@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("//fonts.googleapis.com/css?family=Quattrocento+Sans");
input::-webkit-input-placeholder {
  color: #FFF; }

input::-moz-placeholder {
  color: #FFF; }

input::-moz-placeholder {
  color: #FFF; }

article {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1920px;
  overflow: hidden; }
  article section h1 {
    position: relative;
    z-index: 1;
    text-align: center; }
    article section h1 .en {
      font-size: 40px;
      letter-spacing: 12px; }
      @media only screen and (max-width: 1100px) {
        article section h1 .en {
          font-size: 35px; } }
      @media only screen and (max-width: 375px) {
        article section h1 .en {
          font-size: 30px;
          letter-spacing: 5px; } }
    article section h1 .ch {
      font-size: 30px;
      letter-spacing: 5px; }
      @media only screen and (max-width: 1100px) {
        article section h1 .ch {
          font-size: 25px; } }
      @media only screen and (max-width: 375px) {
        article section h1 .ch {
          font-size: 20px; } }
  article section.kv {
    position: relative;
    width: 100%;
    height: 100vh; }
    @media only screen and (max-width: 1100px) {
      article section.kv {
        height: 70vw; } }
    @media only screen and (max-width: 750px) {
      article section.kv {
        height: 100vh; } }
    article section.kv .scroll {
      font-size: 16px;
      position: absolute;
      text-align: center;
      bottom: 30px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      z-index: 10;
      cursor: pointer; }
      article section.kv .scroll:after {
        content: "";
        width: 1px;
        height: 50px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        bottom: -60px; }
    article section.kv .page_box {
      position: absolute;
      width: 30px;
      right: 50px;
      top: 50%;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
      z-index: 10;
      text-align: center; }
      @media only screen and (max-width: 1100px) {
        article section.kv .page_box {
          right: 20px; } }
      @media only screen and (max-width: 750px) {
        article section.kv .page_box {
          right: 5px; } }
      article section.kv .page_box .prev, article section.kv .page_box .next {
        font-size: 24px;
        position: relative;
        cursor: pointer;
        letter-spacing: 2px; }
        @media only screen and (max-width: 750px) {
          article section.kv .page_box .prev, article section.kv .page_box .next {
            font-size: 14px; } }
      article section.kv .page_box .bar_box {
        position: relative;
        width: 2px;
        height: 250px;
        background-color: #fff;
        margin: 10px auto;
        overflow: hidden; }
        article section.kv .page_box .bar_box .bar {
          width: 2px;
          height: 0px;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          background-color: #949494; }
    article section.kv .img_box {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }
      article section.kv .img_box .img {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center top;
        display: none;
        position: absolute;
        left: 0;
        top: 0; }
        article section.kv .img_box .img.active {
          display: block; }
  article section.made {
    position: relative;
    width: 100%;
    padding: 80px 0;
    background-color: #313334;
    overflow: hidden; }
    @media only screen and (max-width: 750px) {
      article section.made {
        padding: 80px 0 0; } }
    article section.made .bg01 {
      position: absolute;
      left: 50%;
      top: 80px;
      width: 503px;
      height: 73px;
      background-image: url(http://man.venussecret.com.tw/images/made_bg01.png);
      background-repeat: no-repeat;
      background-size: contain;
      margin-left: -251px; }
      @media only screen and (max-width: 750px) {
        article section.made .bg01 {
          max-width: 503px;
          width: 90%;
          margin-left: -45%; } }
    article section.made .bg02 {
      position: absolute;
      left: 0;
      top: -50px;
      width: 761px;
      height: 960px;
      background-image: url(http://man.venussecret.com.tw/images/made_bg02.png);
      background-repeat: no-repeat;
      background-size: contain; }
      @media only screen and (max-width: 1500px) {
        article section.made .bg02 {
          top: 50px;
          width: 600px; } }
      @media only screen and (max-width: 1100px) {
        article section.made .bg02 {
          top: 90px;
          width: 500px; } }
      @media only screen and (max-width: 750px) {
        article section.made .bg02 {
          display: none; } }
    article section.made .bg03 {
      position: absolute;
      right: -100px;
      top: 850px;
      width: 612px;
      height: 809px;
      margin-left: 330px;
      background-image: url(http://man.venussecret.com.tw/images/made_bg03.png);
      background-repeat: no-repeat;
      background-size: contain; }
      @media only screen and (max-width: 1500px) {
        article section.made .bg03 {
          top: 700px; } }
      @media only screen and (max-width: 1100px) {
        article section.made .bg03 {
          top: 760px; } }
      @media only screen and (max-width: 750px) {
        article section.made .bg03 {
          display: none; } }
    article section.made .dotbg01 {
      position: absolute;
      right: 0;
      top: -50px;
      width: 358px;
      height: 663px;
      background-image: url(http://man.venussecret.com.tw/images/made_dotbg01.png);
      background-repeat: no-repeat;
      background-size: contain; }
      @media only screen and (max-width: 1500px) {
        article section.made .dotbg01 {
          width: 300px; } }
      @media only screen and (max-width: 750px) {
        article section.made .dotbg01 {
          width: 98px;
          height: 258px;
          top: 100px;
          background-image: url(http://man.venussecret.com.tw/images/made_dotbg01_m.png); } }
    article section.made .dotbg02 {
      position: absolute;
      left: 0;
      top: 50%;
      width: 161px;
      height: 589px;
      background-image: url(http://man.venussecret.com.tw/images/made_dotbg02_m.png);
      background-repeat: no-repeat;
      background-size: contain;
      display: none;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%); }
      @media only screen and (max-width: 750px) {
        article section.made .dotbg02 {
          display: block;
          top: 64%;
          width: 130px; } }
    article section.made .dotbg03 {
      position: absolute;
      right: 0;
      top: 50%;
      width: 186px;
      height: 636px;
      background-image: url(http://man.venussecret.com.tw/images/made_dotbg03_m.png);
      background-repeat: no-repeat;
      background-size: contain;
      display: none;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%); }
      @media only screen and (max-width: 750px) {
        article section.made .dotbg03 {
          display: block;
          top: 70%;
          width: 150px; } }
    article section.made .dotbg04 {
      position: absolute;
      right: 0;
      bottom: 300px;
      width: 226px;
      height: 480px;
      background-image: url(http://man.venussecret.com.tw/images/made_dotbg05_m.png);
      background-repeat: no-repeat;
      background-size: contain; }
      @media only screen and (max-width: 750px) {
        article section.made .dotbg04 {
          display: block;
          bottom: 115px;
          width: 160px; } }
    article section.made .dotbg05 {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 383px;
      height: 812px;
      background-image: url(http://man.venussecret.com.tw/images/made_dotbg05.png);
      background-repeat: no-repeat;
      background-size: contain; }
      @media only screen and (max-width: 1500px) {
        article section.made .dotbg05 {
          width: 300px;
          bottom: 50px; } }
      @media only screen and (max-width: 750px) {
        article section.made .dotbg05 {
          width: 120px;
          height: 458px;
          bottom: -267px;
          background-image: url(http://man.venussecret.com.tw/images/made_dotbg04_m.png); } }
    article section.made .title {
      padding-top: 30px;
      padding-bottom: 120px; }
      @media only screen and (max-width: 375px) {
        article section.made .title {
          padding-top: 20px;
          padding-bottom: 80px; } }
      article section.made .title p {
        font-size: 20px;
        text-align: center;
        letter-spacing: 5px; }
        @media only screen and (max-width: 750px) {
          article section.made .title p {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 0 30px;
            letter-spacing: 2px;
            font-size: 14px; } }
        @media only screen and (max-width: 500px) {
          article section.made .title p br {
            display: none; } }
    article section.made .made_box {
      position: relative; }
      article section.made .made_box h1 {
        padding-top: 100px;
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0); }
        @media only screen and (max-width: 1500px) {
          article section.made .made_box h1 {
            padding-top: 50px; } }
        @media only screen and (max-width: 1100px) {
          article section.made .made_box h1 {
            padding-top: 20px; } }
        @media only screen and (max-width: 750px) {
          article section.made .made_box h1 {
            display: none; } }
      article section.made .made_box .left {
        position: relative;
        margin-right: auto;
        width: 697px; }
        @media only screen and (max-width: 1500px) {
          article section.made .made_box .left {
            width: 550px; } }
        @media only screen and (max-width: 1100px) {
          article section.made .made_box .left {
            width: 450px; } }
        @media only screen and (max-width: 750px) {
          article section.made .made_box .left {
            width: 100%; } }
        article section.made .made_box .left figure {
          width: 100%; }
        article section.made .made_box .left .mh1 {
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          text-align: center;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          width: 100%; }
          article section.made .made_box .left .mh1 .en {
            font-size: 35px;
            letter-spacing: 12px; }
            @media only screen and (max-width: 375px) {
              article section.made .made_box .left .mh1 .en {
                font-size: 24px;
                letter-spacing: 5px; } }
          article section.made .made_box .left .mh1 .ch {
            font-size: 25px;
            letter-spacing: 5px; }
            @media only screen and (max-width: 375px) {
              article section.made .made_box .left .mh1 .ch {
                font-size: 20px; } }
          @media only screen and (max-width: 750px) {
            article section.made .made_box .left .mh1 {
              display: block; } }
      article section.made .made_box .right {
        position: absolute;
        top: 50%;
        right: 0;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        width: calc(100% - 697px); }
        @media only screen and (max-width: 1500px) {
          article section.made .made_box .right {
            width: calc(100% - 550px); } }
        @media only screen and (max-width: 1100px) {
          article section.made .made_box .right {
            width: calc(100% - 350px); } }
        @media only screen and (max-width: 750px) {
          article section.made .made_box .right {
            position: relative;
            top: 0;
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0);
            width: 100%;
            padding: 50px 0; } }
        @media only screen and (max-width: 500px) {
          article section.made .made_box .right {
            max-height: 310px; } }
        article section.made .made_box .right .slide {
          text-align: right;
          margin-right: 100px;
          height: 40px; }
          @media only screen and (max-width: 1500px) {
            article section.made .made_box .right .slide {
              margin-right: 30px; } }
          @media only screen and (max-width: 750px) {
            article section.made .made_box .right .slide {
              height: auto;
              margin-right: auto;
              margin-left: auto;
              width: calc(100% - 40px); } }
          article section.made .made_box .right .slide .item {
            display: inline-block;
            vertical-align: middle;
            margin-left: -11px;
            cursor: pointer;
            height: 100%; }
            @media only screen and (max-width: 750px) {
              article section.made .made_box .right .slide .item {
                display: block;
                text-align: center;
                margin-top: 5px;
                margin-bottom: 5px;
                margin-left: 0; } }
            article section.made .made_box .right .slide .item h2 {
              position: relative;
              font-size: 20px;
              color: #b2b2b2;
              padding: 0 25px;
              letter-spacing: 5px;
              -webkit-transition: .3s;
              -o-transition: .3s;
              transition: .3s; }
              @media only screen and (max-width: 1500px) {
                article section.made .made_box .right .slide .item h2 {
                  padding: 0 15px; } }
              @media only screen and (max-width: 1100px) {
                article section.made .made_box .right .slide .item h2 {
                  font-size: 18px;
                  padding: 0 8px; } }
              article section.made .made_box .right .slide .item h2:before, article section.made .made_box .right .slide .item h2:after {
                content: "";
                position: absolute;
                width: 1px;
                height: 20px;
                top: 50%;
                background-color: #b2b2b2;
                -webkit-transform: skewX(10deg) translate(0, -40%);
                -ms-transform: skewX(10deg) translate(0, -40%);
                transform: skewX(10deg) translate(0, -40%);
                -webkit-transition: .3s;
                -o-transition: .3s;
                transition: .3s; }
                @media only screen and (max-width: 750px) {
                  article section.made .made_box .right .slide .item h2:before, article section.made .made_box .right .slide .item h2:after {
                    max-width: 479px;
                    width: 0%;
                    opacity: 0;
                    height: 1px;
                    background-color: transparent;
                    -webkit-transform: skewX(0deg) translate(-50%, 0%);
                    -ms-transform: skewX(0deg) translate(-50%, 0%);
                    transform: skewX(0deg) translate(-50%, 0%);
                    -webkit-transition: 0s;
                    -o-transition: 0s;
                    transition: 0s;
                    background-repeat: no-repeat;
                    background-position: center top;
                    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 90%);
                    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 90%);
                    background: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.6)), color-stop(90%, rgba(255, 255, 255, 0)));
                    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 90%);
                    background: linear-gradient(to right, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 90%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
                    left: 50%; } }
              article section.made .made_box .right .slide .item h2:before {
                left: 0px; }
                @media only screen and (max-width: 750px) {
                  article section.made .made_box .right .slide .item h2:before {
                    left: 50%; } }
              article section.made .made_box .right .slide .item h2:after {
                right: 0px;
                display: none; }
                @media only screen and (max-width: 750px) {
                  article section.made .made_box .right .slide .item h2:after {
                    display: block; } }
            article section.made .made_box .right .slide .item h3 {
              position: absolute;
              display: none;
              left: 160px;
              bottom: -70px;
              font-size: 18px;
              letter-spacing: 5px; }
              @media only screen and (max-width: 1500px) {
                article section.made .made_box .right .slide .item h3 {
                  left: 90px;
                  font-size: 16px;
                  letter-spacing: 2px; } }
              @media only screen and (max-width: 1100px) {
                article section.made .made_box .right .slide .item h3 {
                  left: 50px; } }
              @media only screen and (max-width: 750px) {
                article section.made .made_box .right .slide .item h3 {
                  position: relative;
                  left: 0;
                  bottom: 0;
                  font-size: 14px; } }
              @media only screen and (max-width: 375px) {
                article section.made .made_box .right .slide .item h3 {
                  font-size: 13px; } }
              article section.made .made_box .right .slide .item h3:before {
                content: "";
                width: 170px;
                height: 1px;
                background-color: #fff;
                position: absolute;
                left: -200px;
                top: 15px; }
                @media only screen and (max-width: 1500px) {
                  article section.made .made_box .right .slide .item h3:before {
                    width: 100px;
                    left: -130px; } }
                @media only screen and (max-width: 1100px) {
                  article section.made .made_box .right .slide .item h3:before {
                    width: 60px;
                    left: -90px; } }
            article section.made .made_box .right .slide .item:last-child h2:after {
              display: block; }
              @media only screen and (max-width: 750px) {
                article section.made .made_box .right .slide .item:last-child h2:after {
                  display: none; } }
            @media only screen and (max-width: 750px) {
              article section.made .made_box .right .slide .item.active {
                margin-top: 42px;
                margin-bottom: 42px; } }
            article section.made .made_box .right .slide .item.active h2 {
              font-size: 22px;
              color: #FFF; }
              @media only screen and (max-width: 1100px) {
                article section.made .made_box .right .slide .item.active h2 {
                  font-size: 20px; } }
              @media only screen and (max-width: 750px) {
                article section.made .made_box .right .slide .item.active h2 {
                  font-size: 18px; } }
              article section.made .made_box .right .slide .item.active h2:before, article section.made .made_box .right .slide .item.active h2:after {
                height: 30px;
                background-color: #fff;
                display: block; }
                @media only screen and (max-width: 750px) {
                  article section.made .made_box .right .slide .item.active h2:before, article section.made .made_box .right .slide .item.active h2:after {
                    -webkit-transition: .5s;
                    -o-transition: .5s;
                    transition: .5s;
                    opacity: 1;
                    height: 1px;
                    width: 100%;
                    background-color: transparent; } }
              @media only screen and (max-width: 750px) {
                article section.made .made_box .right .slide .item.active h2:before {
                  top: -20px; } }
              @media only screen and (max-width: 750px) {
                article section.made .made_box .right .slide .item.active h2:after {
                  top: 70px; } }
            article section.made .made_box .right .slide .item.active h3 {
              display: block; }
            @media only screen and (min-width: 751px) {
              article section.made .made_box .right .slide .item:hover h2 {
                font-size: 22px;
                color: #FFF; } }
  @media only screen and (min-width: 751px) and (max-width: 1100px) {
    article section.made .made_box .right .slide .item:hover h2 {
      font-size: 20px; } }
            @media only screen and (min-width: 751px) {
                article section.made .made_box .right .slide .item:hover h2:before, article section.made .made_box .right .slide .item:hover h2:after {
                  height: 30px;
                  background-color: #fff; }
                article section.made .made_box .right .slide .item:hover h2:after {
                  display: block; } }
        article section.made .made_box .right .more {
          font-size: 22px;
          position: absolute;
          right: 100px;
          top: 150px;
          cursor: pointer;
          letter-spacing: 2px; }
          @media only screen and (max-width: 1500px) {
            article section.made .made_box .right .more {
              font-size: 18px;
              right: 20px; } }
          @media only screen and (max-width: 750px) {
            article section.made .made_box .right .more {
              display: none; } }
    article section.made .five_box {
      position: relative;
      margin-top: -110px; }
      @media only screen and (max-width: 1100px) {
        article section.made .five_box {
          margin-top: 50px; } }
      @media only screen and (max-width: 750px) {
        article section.made .five_box {
          margin-top: 0; } }
      article section.made .five_box h1 {
        padding-top: 240px;
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0); }
        @media only screen and (max-width: 1500px) {
          article section.made .five_box h1 {
            padding-top: 150px; } }
        @media only screen and (max-width: 750px) {
          article section.made .five_box h1 {
            display: none; } }
      article section.made .five_box .img {
        position: relative;
        width: 833px;
        margin-left: auto;
        margin-bottom: 75px; }
        @media only screen and (max-width: 1500px) {
          article section.made .five_box .img {
            width: 650px; } }
        @media only screen and (max-width: 750px) {
          article section.made .five_box .img {
            width: 100%;
            margin-bottom: 0; } }
        article section.made .five_box .img figure {
          width: 100%; }
        article section.made .five_box .img .mh1 {
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          text-align: center;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          width: 100%; }
          article section.made .five_box .img .mh1 .en {
            font-size: 35px;
            letter-spacing: 12px; }
            @media only screen and (max-width: 375px) {
              article section.made .five_box .img .mh1 .en {
                font-size: 24px;
                letter-spacing: 5px; } }
          article section.made .five_box .img .mh1 .ch {
            font-size: 25px;
            letter-spacing: 5px; }
            @media only screen and (max-width: 375px) {
              article section.made .five_box .img .mh1 .ch {
                font-size: 18px; } }
          @media only screen and (max-width: 750px) {
            article section.made .five_box .img .mh1 {
              display: block; } }
      article section.made .five_box .info_box {
        text-align: center; }
        @media only screen and (max-width: 1100px) {
          article section.made .five_box .info_box {
            width: 700px;
            margin: 0 auto; } }
        @media only screen and (max-width: 750px) {
          article section.made .five_box .info_box {
            width: 100%;
            padding: 50px 0; } }
        article section.made .five_box .info_box .item {
          display: inline-block;
          vertical-align: top;
          padding: 0 35px;
          position: relative; }
          @media only screen and (max-width: 1500px) {
            article section.made .five_box .info_box .item {
              padding: 0 15px; } }
          @media only screen and (max-width: 1100px) {
            article section.made .five_box .info_box .item {
              padding: 0 10px;
              margin-bottom: 30px; }
              article section.made .five_box .info_box .item:nth-child(3):after {
                display: none; } }
          @media only screen and (max-width: 750px) {
            article section.made .five_box .info_box .item {
              display: block;
              margin-bottom: 30px; } }
          article section.made .five_box .info_box .item:after {
            content: "";
            position: absolute;
            width: 1px;
            height: 60px;
            right: -5px;
            top: 0px;
            background-color: #FFF;
            -webkit-transform: skewX(10deg);
            -ms-transform: skewX(10deg);
            transform: skewX(10deg); }
            @media only screen and (max-width: 1500px) {
              article section.made .five_box .info_box .item:after {
                height: 50px; } }
            @media only screen and (max-width: 1100px) {
              article section.made .five_box .info_box .item:after {
                height: 40px; } }
            @media only screen and (max-width: 750px) {
              article section.made .five_box .info_box .item:after {
                display: none; } }
          article section.made .five_box .info_box .item h2 {
            font-size: 22px;
            margin-bottom: 22px; }
            @media only screen and (max-width: 750px) {
              article section.made .five_box .info_box .item h2 {
                font-size: 20px;
                margin-bottom: 10px; } }
            @media only screen and (max-width: 500px) {
              article section.made .five_box .info_box .item h2 {
                margin-bottom: 5px; } }
          article section.made .five_box .info_box .item h3 {
            font-size: 15px;
            color: #d3d3d3;
            text-align: center; }
            @media only screen and (max-width: 750px) {
              article section.made .five_box .info_box .item h3 {
                font-size: 14px; } }
            @media only screen and (max-width: 500px) {
              article section.made .five_box .info_box .item h3 {
                letter-spacing: 2px; } }
            @media only screen and (max-width: 375px) {
              article section.made .five_box .info_box .item h3 {
                font-size: 13px; } }
            @media only screen and (max-width: 750px) {
              article section.made .five_box .info_box .item h3 br {
                display: none; } }
          article section.made .five_box .info_box .item:last-child:after {
            display: none; }
  article section.material {
    position: relative;
    background-color: #6c6f6f;
    height: 925px; }
    @media only screen and (max-width: 1400px) {
      article section.material {
        height: 760px; } }
    @media only screen and (max-width: 750px) {
      article section.material {
        height: auto; } }
    article section.material:after {
      content: "";
      display: block;
      clear: both; }
    article section.material .title {
      position: absolute;
      left: 50%;
      top: 165px;
      z-index: 3;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0); }
      @media only screen and (max-width: 1100px) {
        article section.material .title {
          top: 20px; } }
    article section.material .left, article section.material .right {
      width: 50%;
      height: 925px;
      position: relative;
      overflow: hidden;
      -webkit-transition: .5s;
      -o-transition: .5s;
      transition: .5s;
      position: absolute; }
      @media only screen and (max-width: 1400px) {
        article section.material .left, article section.material .right {
          height: 760px; } }
      @media only screen and (max-width: 750px) {
        article section.material .left, article section.material .right {
          height: 650px;
          position: relative;
          display: none; } }
      article section.material .left .mask, article section.material .right .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.2;
        z-index: 2; }
      article section.material .left .bg, article section.material .right .bg {
        width: 480px;
        height: 100%;
        position: absolute;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        z-index: 1; }
        @media only screen and (max-width: 1400px) {
          article section.material .left .bg, article section.material .right .bg {
            width: 390px; } }
        @media only screen and (max-width: 750px) {
          article section.material .left .bg, article section.material .right .bg {
            width: 340px; } }
        article section.material .left .bg figure, article section.material .right .bg figure {
          width: 100%;
          position: absolute; }
        article section.material .left .bg .dot_box, article section.material .right .bg .dot_box {
          display: none;
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 1; }
          article section.material .left .bg .dot_box [class^="dot"], article section.material .right .bg .dot_box [class^="dot"] {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 18px;
            display: inline-block; }
            article section.material .left .bg .dot_box [class^="dot"] span, article section.material .right .bg .dot_box [class^="dot"] span {
              font-size: 18px;
              letter-spacing: 1px; }
              @media only screen and (max-width: 1400px) {
                article section.material .left .bg .dot_box [class^="dot"] span, article section.material .right .bg .dot_box [class^="dot"] span {
                  font-size: 15px; } }
            article section.material .left .bg .dot_box [class^="dot"]:before, article section.material .right .bg .dot_box [class^="dot"]:before {
              content: "";
              position: absolute;
              width: 16px;
              height: 16px;
              background-color: #fff;
              border-radius: 100%;
              opacity: 0.6;
              right: -25px;
              top: 50%;
              -webkit-transform: translate(0, -40%);
              -ms-transform: translate(0, -40%);
              transform: translate(0, -40%); }
              @media only screen and (max-width: 1100px) {
                article section.material .left .bg .dot_box [class^="dot"]:before, article section.material .right .bg .dot_box [class^="dot"]:before {
                  width: 12px;
                  height: 12px; } }
            article section.material .left .bg .dot_box [class^="dot"]:after, article section.material .right .bg .dot_box [class^="dot"]:after {
              content: "";
              position: absolute;
              width: 20px;
              height: 20px;
              border: solid 1px #fff;
              border-radius: 100%;
              right: -28px;
              top: 50%;
              -webkit-animation: materialDotAct infinite 1s;
              -moz-animation: materialDotAct infinite 1s;
              -o-animation: materialDotAct infinite 1s; }
              @media only screen and (max-width: 1100px) {
                article section.material .left .bg .dot_box [class^="dot"]:after, article section.material .right .bg .dot_box [class^="dot"]:after {
                  width: 16px;
                  height: 16px; } }

@-webkit-keyframes materialDotAct {
  0% {
    -webkit-transform: translate(0, -40%) scale(0);
    transform: translate(0, -40%) scale(0);
    opacity: 0.6; }
  50% {
    -webkit-transform: translate(0, -40%) scale(1);
    transform: translate(0, -40%) scale(1);
    opacity: 0.6; }
  100% {
    -webkit-transform: translate(0, -40%) scale(1.3);
    transform: translate(0, -40%) scale(1.3);
    opacity: 0; } }

@keyframes materialDotAct {
  0% {
    -webkit-transform: translate(0, -40%) scale(0);
    transform: translate(0, -40%) scale(0);
    opacity: 0.6; }
  50% {
    -webkit-transform: translate(0, -40%) scale(1);
    transform: translate(0, -40%) scale(1);
    opacity: 0.6; }
  100% {
    -webkit-transform: translate(0, -40%) scale(1.3);
    transform: translate(0, -40%) scale(1.3);
    opacity: 0; } }
            article section.material .left .bg .dot_box [class^="dot"].leftdot:before, article section.material .right .bg .dot_box [class^="dot"].leftdot:before {
              left: -25px; }
            article section.material .left .bg .dot_box [class^="dot"].leftdot:after, article section.material .right .bg .dot_box [class^="dot"].leftdot:after {
              left: -28px; }
      article section.material .left .info, article section.material .right .info {
        position: absolute;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        z-index: 3; }
        article section.material .left .info h2, article section.material .right .info h2 {
          font-size: 28px;
          letter-spacing: 15px;
          text-align: center;
          border-bottom: solid 1px #ffffff;
          width: 270px;
          padding-bottom: 20px;
          text-indent: 15px;
          margin: 0 auto; }
          @media only screen and (max-width: 1100px) {
            article section.material .left .info h2, article section.material .right .info h2 {
              font-size: 24px; } }
        article section.material .left .info h3, article section.material .right .info h3 {
          font-size: 18px;
          text-align: center;
          padding-top: 20px; }
          @media only screen and (max-width: 1400px) {
            article section.material .left .info h3, article section.material .right .info h3 {
              font-size: 17px; } }
        article section.material .left .info .more_info, article section.material .right .info .more_info {
          display: none;
          margin: 0 auto;
          text-align: center; }
          article section.material .left .info .more_info p, article section.material .right .info .more_info p {
            font-size: 16px;
            letter-spacing: 2px;
            margin: 50px 0; }
            @media only screen and (max-width: 1400px) {
              article section.material .left .info .more_info p, article section.material .right .info .more_info p {
                font-size: 14px; } }
          article section.material .left .info .more_info .btn, article section.material .right .info .more_info .btn {
            font-size: 28px;
            padding: 8px 70px;
            border: solid 1px #fff;
            display: inline-block;
            cursor: pointer;
            background-color: rgba(255, 255, 255, 0);
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s; }
            @media only screen and (max-width: 1400px) {
              article section.material .left .info .more_info .btn, article section.material .right .info .more_info .btn {
                font-size: 24px; } }
            @media only screen and (min-width: 751px) {
              article section.material .left .info .more_info .btn:hover, article section.material .right .info .more_info .btn:hover {
                background-color: rgba(255, 255, 255, 0.2); } }
      article section.material .left .back, article section.material .right .back {
        display: none;
        position: absolute;
        top: 50%;
        cursor: pointer;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        z-index: 3; }
        @media only screen and (max-width: 1100px) {
          article section.material .left .back, article section.material .right .back {
            top: 50px;
            -webkit-transform: translate(0, 0%);
            -ms-transform: translate(0, 0%);
            transform: translate(0, 0%); } }
        article section.material .left .back:after, article section.material .right .back:after {
          content: "";
          width: 18px;
          height: 32px;
          position: absolute;
          top: 50%;
          -webkit-transform: translate(0, -50%);
          -ms-transform: translate(0, -50%);
          transform: translate(0, -50%); }
      article section.material .left .more, article section.material .right .more {
        font-size: 20px;
        position: absolute;
        right: 120px;
        bottom: 220px;
        cursor: pointer;
        width: 150px;
        z-index: 3; }
        @media only screen and (max-width: 750px) {
          article section.material .left .more, article section.material .right .more {
            bottom: 150px; } }
        article section.material .left .more:after, article section.material .right .more:after {
          content: "";
          width: 18px;
          height: 32px;
          background-image: url(http://man.venussecret.com.tw/images/arrow01_left.png);
          position: absolute;
          -webkit-animation: materialMoreLeftAct infinite 1s;
          -moz-animation: materialMoreLeftAct infinite 1s;
          -o-animation: materialMoreLeftAct infinite 1s; }

@-webkit-keyframes materialMoreLeftAct {
  0% {
    right: -35px; }
  50% {
    right: -30px; }
  100% {
    right: -35px; } }

@keyframes materialMoreLeftAct {
  0% {
    right: -35px; }
  50% {
    right: -30px; }
  100% {
    right: -35px; } }
      article section.material .left.active, article section.material .right.active {
        width: calc(100% - 400px); }
        @media only screen and (max-width: 1100px) {
          article section.material .left.active, article section.material .right.active {
            width: 100%; } }
        article section.material .left.active .info .more_info, article section.material .right.active .info .more_info {
          display: block; }
        article section.material .left.active .more, article section.material .right.active .more {
          display: none; }
        @media only screen and (max-width: 1100px) {
          article section.material .left.active .back, article section.material .right.active .back {
            display: block; } }
      article section.material .left.unactive, article section.material .right.unactive {
        width: 400px; }
        @media only screen and (max-width: 1100px) {
          article section.material .left.unactive, article section.material .right.unactive {
            width: 0px; } }
        article section.material .left.unactive .mask, article section.material .right.unactive .mask {
          opacity: 0.5; }
        article section.material .left.unactive .info, article section.material .right.unactive .info {
          display: none; }
        article section.material .left.unactive .more, article section.material .right.unactive .more {
          display: none; }
        article section.material .left.unactive .back, article section.material .right.unactive .back {
          display: block; }
          @media only screen and (max-width: 1100px) {
            article section.material .left.unactive .back, article section.material .right.unactive .back {
              display: none; } }
    article section.material .left {
      float: left;
      background-color: #6c6f6f;
      left: 0; }
      article section.material .left.hover {
        width: 55%; }
        article section.material .left.hover .bg {
          width: 510px; }
      article section.material .left.unhover {
        width: 45%; }
      article section.material .left .bg {
        left: 0px; }
        @media only screen and (max-width: 1400px) {
          article section.material .left .bg {
            left: -50px; } }
        article section.material .left .bg .dot_box [class^="dot"].dot01 {
          margin-left: -210px;
          margin-top: -190px; }
        article section.material .left .bg .dot_box [class^="dot"].dot02 {
          margin-left: 80px;
          margin-top: -250px; }
        article section.material .left .bg .dot_box [class^="dot"].dot03 {
          margin-left: -170px;
          margin-top: 40px; }
        article section.material .left .bg .dot_box [class^="dot"].dot04 {
          margin-left: 125px;
          margin-top: 90px; }
        article section.material .left .bg .dot_box [class^="dot"].dot05 {
          margin-left: -225px;
          margin-top: 380px; }
        article section.material .left .bg .dot_box [class^="dot"].dot06 {
          margin-left: 125px;
          margin-top: 260px; }
        @media only screen and (max-width: 1400px) {
          article section.material .left .bg .dot_box [class^="dot"]:before {
            right: initial;
            left: -25px; }
          article section.material .left .bg .dot_box [class^="dot"]:after {
            right: initial;
            left: -28px; }
          article section.material .left .bg .dot_box [class^="dot"].dot01 {
            margin-left: 90px;
            margin-top: 50px; }
          article section.material .left .bg .dot_box [class^="dot"].dot02 {
            margin-left: 100px;
            margin-top: -10px; }
          article section.material .left .bg .dot_box [class^="dot"].dot03 {
            margin-left: 90px;
            margin-top: 110px; }
          article section.material .left .bg .dot_box [class^="dot"].dot04 {
            margin-left: 100px;
            margin-top: 190px; }
          article section.material .left .bg .dot_box [class^="dot"].dot05 {
            margin-left: 65px;
            margin-top: -230px; }
          article section.material .left .bg .dot_box [class^="dot"].dot06 {
            margin-left: 105px;
            margin-top: 270px; } }
      article section.material .left .info {
        right: 45px; }
      article section.material .left .back {
        text-align: right;
        right: 45px; }
        article section.material .left .back:after {
          background-image: url(http://man.venussecret.com.tw/images/arrow01_right.png);
          -webkit-animation: materialBackLeftAct infinite 1s;
          -moz-animation: materialBackLeftAct infinite 1s;
          -o-animation: materialBackLeftAct infinite 1s; }

@-webkit-keyframes materialBackLeftAct {
  0% {
    right: -35px; }
  50% {
    right: -30px; }
  100% {
    right: -35px; } }

@keyframes materialBackLeftAct {
  0% {
    right: -35px; }
  50% {
    right: -30px; }
  100% {
    right: -35px; } }
      article section.material .left .more {
        right: 120px; }
        article section.material .left .more:after {
          background-image: url(http://man.venussecret.com.tw/images/arrow01_right.png);
          -webkit-animation: materialMoreLeftAct infinite 1s;
          -moz-animation: materialMoreLeftAct infinite 1s;
          -o-animation: materialMoreLeftAct infinite 1s; }

@keyframes materialMoreLeftAct {
  0% {
    right: -35px; }
  50% {
    right: -30px; }
  100% {
    right: -35px; } }
      article section.material .left.active .bg {
        width: 540px; }
        @media only screen and (max-width: 1400px) {
          article section.material .left.active .bg {
            width: 390px; } }
        @media only screen and (max-width: 750px) {
          article section.material .left.active .bg {
            width: 340px; } }
        @media only screen and (max-width: 500px) {
          article section.material .left.active .bg {
            width: 240px; } }
      article section.material .left.active .info {
        width: 450px;
        right: initial;
        left: 74%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    article section.material .right {
      float: right;
      background-color: #2e3030;
      right: 0; }
      article section.material .right.hover {
        width: 55%; }
        article section.material .right.hover .bg {
          width: 510px; }
      article section.material .right.unhover {
        width: 45%; }
      article section.material .right .bg {
        right: 0px; }
        @media only screen and (max-width: 1400px) {
          article section.material .right .bg {
            right: -50px; } }
        article section.material .right .bg .dot_box [class^="dot"].dot01 {
          margin-left: -230px;
          margin-top: -125px; }
        article section.material .right .bg .dot_box [class^="dot"].dot02 {
          margin-left: 120px;
          margin-top: -145px; }
        article section.material .right .bg .dot_box [class^="dot"].dot03 {
          margin-left: 140px;
          margin-top: 20px; }
        article section.material .right .bg .dot_box [class^="dot"].dot04 {
          margin-left: 110px;
          margin-top: 210px; }
        article section.material .right .bg .dot_box [class^="dot"].dot05 {
          margin-left: -80px;
          margin-top: 350px; }
        @media only screen and (max-width: 1400px) {
          article section.material .right .bg .dot_box [class^="dot"].leftdot:before {
            left: initial; }
          article section.material .right .bg .dot_box [class^="dot"].leftdot:after {
            left: initial; }
          article section.material .right .bg .dot_box [class^="dot"].dot01 {
            margin-left: -165px;
            margin-top: -175px; }
          article section.material .right .bg .dot_box [class^="dot"].dot02 {
            margin-left: -200px;
            margin-top: -85px; }
          article section.material .right .bg .dot_box [class^="dot"].dot03 {
            margin-left: -155px;
            margin-top: 40px; }
          article section.material .right .bg .dot_box [class^="dot"].dot04 {
            margin-left: -170px;
            margin-top: 160px; }
          article section.material .right .bg .dot_box [class^="dot"].dot05 {
            margin-left: -180px;
            margin-top: 270px; } }
      article section.material .right .info {
        left: 45px; }
      article section.material .right .back {
        text-align: left;
        left: 45px; }
        article section.material .right .back:after {
          background-image: url(http://man.venussecret.com.tw/images/arrow01_left.png);
          -webkit-animation: materialBackRightAct infinite 1s;
          -moz-animation: materialBackRightAct infinite 1s;
          -o-animation: materialBackRightAct infinite 1s; }

@-webkit-keyframes materialBackRightAct {
  0% {
    left: -35px; }
  50% {
    left: -30px; }
  100% {
    left: -35px; } }

@keyframes materialBackRightAct {
  0% {
    left: -35px; }
  50% {
    left: -30px; }
  100% {
    left: -35px; } }
      article section.material .right .more {
        left: 120px; }
        article section.material .right .more:after {
          background-image: url(http://man.venussecret.com.tw/images/arrow01_left.png);
          -webkit-animation: materialMoreRightAct infinite 1s;
          -moz-animation: materialMoreRightAct infinite 1s;
          -o-animation: materialMoreRightAct infinite 1s; }

@-webkit-keyframes materialMoreRightAct {
  0% {
    left: -35px; }
  50% {
    left: -30px; }
  100% {
    left: -35px; } }

@keyframes materialMoreRightAct {
  0% {
    left: -35px; }
  50% {
    left: -30px; }
  100% {
    left: -35px; } }
      article section.material .right.active .bg {
        width: 630px; }
        @media only screen and (max-width: 1400px) {
          article section.material .right.active .bg {
            width: 390px; } }
        @media only screen and (max-width: 750px) {
          article section.material .right.active .bg {
            width: 340px; } }
        @media only screen and (max-width: 500px) {
          article section.material .right.active .bg {
            width: 240px; } }
      article section.material .right.active .info {
        width: 450px;
        left: 25%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    article section.material .product {
      display: none; }
      @media only screen and (max-width: 750px) {
        article section.material .product.active {
          display: block; } }
      article section.material .product.p1 .top {
        background-color: #6c6f6f; }
      article section.material .product.p2 .top {
        background-color: #2e3030; }
      article section.material .product.p1 .go_p2 {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 100%;
        cursor: pointer;
        background-color: #222;
        z-index: 4; }
        article section.material .product.p1 .go_p2:after {
          content: "";
          width: 18px;
          height: 32px;
          position: absolute;
          right: 20px;
          top: 50%;
          -webkit-transform: translate(0, -50%);
          -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
          background-image: url(http://man.venussecret.com.tw/images/arrow01_right.png);
          -webkit-animation: materialBackLeftActM infinite 1s;
          -moz-animation: materialBackLeftActM infinite 1s;
          -o-animation: materialBackLeftActM infinite 1s; }

@-webkit-keyframes materialBackLeftActM {
  0% {
    right: 20px; }
  50% {
    right: 15px; }
  100% {
    right: 20px; } }

@keyframes materialBackLeftActM {
  0% {
    right: 20px; }
  50% {
    right: 15px; }
  100% {
    right: 20px; } }
      article section.material .product.p1 .top {
        position: relative;
        height: 580px;
        overflow: hidden;
        padding-top: 100px; }
        @media only screen and (max-width: 500px) {
          article section.material .product.p1 .top {
            height: 450px; } }
        article section.material .product.p1 .top .mask {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #000;
          opacity: 0.2;
          top: 0;
          z-index: 2; }
        article section.material .product.p1 .top figure {
          position: relative;
          z-index: 1;
          width: 350px;
          left: -25px;
          margin: 0 auto; }
          @media only screen and (max-width: 500px) {
            article section.material .product.p1 .top figure {
              width: 260px; } }
        article section.material .product.p1 .top .dot_box {
          position: absolute;
          width: 350px;
          height: 100%;
          padding-top: 100px;
          top: 0;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
          z-index: 3; }
          @media only screen and (max-width: 500px) {
            article section.material .product.p1 .top .dot_box {
              width: 260px; } }
          article section.material .product.p1 .top .dot_box [class^="dot"] {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 16px;
            display: inline-block; }
            @media only screen and (max-width: 500px) {
              article section.material .product.p1 .top .dot_box [class^="dot"] {
                font-size: 14px; } }
            article section.material .product.p1 .top .dot_box [class^="dot"] span {
              font-size: 16px;
              letter-spacing: 1px; }
              @media only screen and (max-width: 500px) {
                article section.material .product.p1 .top .dot_box [class^="dot"] span {
                  font-size: 14px; } }
            article section.material .product.p1 .top .dot_box [class^="dot"]:before {
              content: "";
              position: absolute;
              width: 16px;
              height: 16px;
              background-color: #fff;
              border-radius: 100%;
              opacity: 0.6;
              right: -25px;
              top: 50%;
              -webkit-transform: translate(0, -40%);
              -ms-transform: translate(0, -40%);
              transform: translate(0, -40%); }
              @media only screen and (max-width: 500px) {
                article section.material .product.p1 .top .dot_box [class^="dot"]:before {
                  width: 12px;
                  height: 12px; } }
            article section.material .product.p1 .top .dot_box [class^="dot"]:after {
              content: "";
              position: absolute;
              width: 20px;
              height: 20px;
              border: solid 1px #fff;
              border-radius: 100%;
              right: -28px;
              top: 50%;
              -webkit-animation: materialDotAct infinite 1s;
              -moz-animation: materialDotAct infinite 1s;
              -o-animation: materialDotAct infinite 1s; }
              @media only screen and (max-width: 500px) {
                article section.material .product.p1 .top .dot_box [class^="dot"]:after {
                  width: 16px;
                  height: 16px; } }
            article section.material .product.p1 .top .dot_box [class^="dot"].leftdot:before {
              left: -25px; }
            article section.material .product.p1 .top .dot_box [class^="dot"].leftdot:after {
              left: -28px; }
            article section.material .product.p1 .top .dot_box [class^="dot"].dot01 {
              margin-left: -190px;
              margin-top: -120px; }
            article section.material .product.p1 .top .dot_box [class^="dot"].dot02 {
              margin-left: 40px;
              margin-top: -150px; }
            article section.material .product.p1 .top .dot_box [class^="dot"].dot03 {
              margin-left: -200px;
              margin-top: 40px; }
            article section.material .product.p1 .top .dot_box [class^="dot"].dot04 {
              margin-left: 55px;
              margin-top: 90px; }
            article section.material .product.p1 .top .dot_box [class^="dot"].dot05 {
              margin-left: -275px;
              margin-top: 200px; }
            article section.material .product.p1 .top .dot_box [class^="dot"].dot06 {
              margin-left: 65px;
              margin-top: 210px; }
            @media only screen and (max-width: 500px) {
              article section.material .product.p1 .top .dot_box [class^="dot"].dot01 {
                margin-left: -160px;
                margin-top: -105px; }
              article section.material .product.p1 .top .dot_box [class^="dot"].dot02 {
                margin-left: 35px;
                margin-top: -120px; }
              article section.material .product.p1 .top .dot_box [class^="dot"].dot03 {
                margin-left: -155px;
                margin-top: 10px; }
              article section.material .product.p1 .top .dot_box [class^="dot"].dot04 {
                margin-left: 40px;
                margin-top: 70px; }
              article section.material .product.p1 .top .dot_box [class^="dot"].dot05 {
                margin-left: -150px;
                margin-top: 110px; }
              article section.material .product.p1 .top .dot_box [class^="dot"].dot06 {
                margin-left: 45px;
                margin-top: 170px; } }
      article section.material .product.p1 .info {
        position: relative;
        background-color: #2e3030;
        padding: 50px 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        article section.material .product.p1 .info h2 {
          font-size: 28px;
          letter-spacing: 15px;
          text-align: center;
          border-bottom: solid 1px #ffffff;
          width: 270px;
          padding-bottom: 20px;
          text-indent: 15px;
          margin: 0 auto; }
          @media only screen and (max-width: 1100px) {
            article section.material .product.p1 .info h2 {
              font-size: 24px; } }
        article section.material .product.p1 .info h3 {
          font-size: 18px;
          text-align: center;
          padding-top: 20px; }
          @media only screen and (max-width: 500px) {
            article section.material .product.p1 .info h3 {
              font-size: 16px; } }
        article section.material .product.p1 .info .more_info {
          margin: 0px auto;
          text-align: center; }
          article section.material .product.p1 .info .more_info p {
            font-size: 16px;
            letter-spacing: 1px;
            margin: 30px 0; }
            @media only screen and (max-width: 500px) {
              article section.material .product.p1 .info .more_info p {
                font-size: 15px; } }
            @media only screen and (max-width: 500px) {
              article section.material .product.p1 .info .more_info p br {
                display: none; } }
          article section.material .product.p1 .info .more_info .btn {
            font-size: 20px;
            padding: 8px 70px;
            border: solid 1px #fff;
            display: inline-block;
            cursor: pointer;
            background-color: rgba(255, 255, 255, 0);
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s; }
            @media only screen and (min-width: 751px) {
              article section.material .product.p1 .info .more_info .btn:hover {
                background-color: rgba(255, 255, 255, 0.2); } }
      article section.material .product.p2 .go_p1 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 50px;
        height: 100%;
        cursor: pointer;
        background-color: #6c6f6f;
        z-index: 4; }
        article section.material .product.p2 .go_p1:after {
          content: "";
          width: 18px;
          height: 32px;
          position: absolute;
          left: 20px;
          top: 50%;
          -webkit-transform: translate(0, -50%);
          -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
          background-image: url(http://man.venussecret.com.tw/images/arrow01_left.png);
          -webkit-animation: materialBackLeftActM infinite 1s;
          -moz-animation: materialBackLeftActM infinite 1s;
          -o-animation: materialBackLeftActM infinite 1s; }

@keyframes materialBackLeftActM {
  0% {
    left: 20px; }
  50% {
    left: 15px; }
  100% {
    left: 20px; } }
      article section.material .product.p2 .top {
        position: relative;
        height: 580px;
        overflow: hidden;
        padding-top: 100px; }
        @media only screen and (max-width: 500px) {
          article section.material .product.p2 .top {
            height: 450px; } }
        article section.material .product.p2 .top .mask {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #000;
          opacity: 0.2;
          top: 0;
          z-index: 2; }
        article section.material .product.p2 .top figure {
          position: relative;
          z-index: 1;
          width: 400px;
          margin: 0 0 0  auto; }
          @media only screen and (max-width: 500px) {
            article section.material .product.p2 .top figure {
              width: 260px; } }
        article section.material .product.p2 .top .dot_box {
          position: absolute;
          width: 400px;
          height: 100%;
          padding-top: 100px;
          top: 0;
          right: 0;
          z-index: 3; }
          @media only screen and (max-width: 500px) {
            article section.material .product.p2 .top .dot_box {
              width: 260px; } }
          article section.material .product.p2 .top .dot_box [class^="dot"] {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 16px;
            display: inline-block; }
            @media only screen and (max-width: 500px) {
              article section.material .product.p2 .top .dot_box [class^="dot"] {
                font-size: 14px; } }
            article section.material .product.p2 .top .dot_box [class^="dot"] span {
              font-size: 16px;
              letter-spacing: 1px; }
              @media only screen and (max-width: 500px) {
                article section.material .product.p2 .top .dot_box [class^="dot"] span {
                  font-size: 14px; } }
            article section.material .product.p2 .top .dot_box [class^="dot"]:before {
              content: "";
              position: absolute;
              width: 16px;
              height: 16px;
              background-color: #fff;
              border-radius: 100%;
              opacity: 0.6;
              right: -25px;
              top: 50%;
              -webkit-transform: translate(0, -40%);
              -ms-transform: translate(0, -40%);
              transform: translate(0, -40%); }
              @media only screen and (max-width: 500px) {
                article section.material .product.p2 .top .dot_box [class^="dot"]:before {
                  width: 12px;
                  height: 12px; } }
            article section.material .product.p2 .top .dot_box [class^="dot"]:after {
              content: "";
              position: absolute;
              width: 20px;
              height: 20px;
              border: solid 1px #fff;
              border-radius: 100%;
              right: -28px;
              top: 50%;
              -webkit-animation: materialDotAct infinite 1s;
              -moz-animation: materialDotAct infinite 1s;
              -o-animation: materialDotAct infinite 1s; }
              @media only screen and (max-width: 500px) {
                article section.material .product.p2 .top .dot_box [class^="dot"]:after {
                  width: 16px;
                  height: 16px; } }
            article section.material .product.p2 .top .dot_box [class^="dot"].leftdot:before {
              left: -25px; }
            article section.material .product.p2 .top .dot_box [class^="dot"].leftdot:after {
              left: -28px; }
            article section.material .product.p2 .top .dot_box [class^="dot"].dot01 {
              margin-left: -170px;
              margin-top: -80px; }
            article section.material .product.p2 .top .dot_box [class^="dot"].dot02 {
              margin-left: 80px;
              margin-top: -100px; }
            article section.material .product.p2 .top .dot_box [class^="dot"].dot03 {
              margin-left: -160px;
              margin-top: 40px; }
            article section.material .product.p2 .top .dot_box [class^="dot"].dot04 {
              margin-left: 105px;
              margin-top: 120px; }
            article section.material .product.p2 .top .dot_box [class^="dot"].dot05 {
              margin-left: -145px;
              margin-top: 200px; }
            @media only screen and (max-width: 500px) {
              article section.material .product.p2 .top .dot_box [class^="dot"].dot01 {
                margin-left: -135px;
                margin-top: -90px; }
              article section.material .product.p2 .top .dot_box [class^="dot"].dot02 {
                margin-left: 60px;
                margin-top: -110px; }
              article section.material .product.p2 .top .dot_box [class^="dot"].dot03 {
                margin-left: -130px;
                margin-top: 10px; }
              article section.material .product.p2 .top .dot_box [class^="dot"].dot04 {
                margin-left: 65px;
                margin-top: 45px; }
              article section.material .product.p2 .top .dot_box [class^="dot"].dot05 {
                margin-left: -125px;
                margin-top: 120px; } }
      article section.material .product.p2 .info {
        position: relative;
        background-color: #2e3030;
        padding: 50px 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        article section.material .product.p2 .info h2 {
          font-size: 28px;
          letter-spacing: 15px;
          text-align: center;
          border-bottom: solid 1px #ffffff;
          width: 270px;
          padding-bottom: 20px;
          text-indent: 15px;
          margin: 0 auto; }
          @media only screen and (max-width: 1100px) {
            article section.material .product.p2 .info h2 {
              font-size: 24px; } }
        article section.material .product.p2 .info h3 {
          font-size: 18px;
          text-align: center;
          padding-top: 20px; }
          @media only screen and (max-width: 500px) {
            article section.material .product.p2 .info h3 {
              font-size: 16px; } }
        article section.material .product.p2 .info .more_info {
          margin: 0px auto;
          text-align: center; }
          article section.material .product.p2 .info .more_info p {
            font-size: 16px;
            letter-spacing: 1px;
            margin: 30px 0; }
            @media only screen and (max-width: 500px) {
              article section.material .product.p2 .info .more_info p {
                font-size: 15px; } }
            @media only screen and (max-width: 500px) {
              article section.material .product.p2 .info .more_info p br {
                display: none; } }
          article section.material .product.p2 .info .more_info .btn {
            font-size: 20px;
            padding: 8px 70px;
            border: solid 1px #fff;
            display: inline-block;
            cursor: pointer;
            background-color: rgba(255, 255, 255, 0);
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s; }
            @media only screen and (min-width: 751px) {
              article section.material .product.p2 .info .more_info .btn:hover {
                background-color: rgba(255, 255, 255, 0.2); } }
  article section.time {
    position: relative;
    width: 100%;
    padding: 40px 0;
    background-color: #434343;
    overflow: hidden; }
    @media only screen and (max-width: 750px) {
      article section.time {
        padding: 50px 0; } }
    article section.time .bg01 {
      position: absolute;
      left: 0;
      top: 0px;
      width: 180px;
      height: 374px;
      background-image: url(http://man.venussecret.com.tw/images/time_bg01.png);
      background-repeat: no-repeat;
      background-size: contain; }
      @media only screen and (max-width: 1100px) {
        article section.time .bg01 {
          width: 120px; } }
      @media only screen and (max-width: 750px) {
        article section.time .bg01 {
          width: 102px;
          height: 322px;
          background-image: url(http://man.venussecret.com.tw/images/time_dotbg01_m.png); } }
    article section.time .bg02 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 285px;
      height: 314px;
      background-image: url(http://man.venussecret.com.tw/images/time_bg02.png);
      background-repeat: no-repeat;
      background-size: contain; }
      @media only screen and (max-width: 1100px) {
        article section.time .bg02 {
          width: 200px;
          bottom: -100px; } }
      @media only screen and (max-width: 750px) {
        article section.time .bg02 {
          width: 113px;
          height: 305px;
          bottom: 0;
          background-image: url(http://man.venussecret.com.tw/images/time_dotbg02_m.png); } }
    article section.time .item_box {
      position: relative;
      width: 100%;
      text-align: center; }
      article section.time .item_box .item {
        display: inline-block;
        vertical-align: top;
        margin: 0 60px;
        position: relative; }
        @media only screen and (max-width: 1100px) {
          article section.time .item_box .item {
            margin: 0 20px; } }
        @media only screen and (max-width: 750px) {
          article section.time .item_box .item {
            margin: 0 10px; } }
        @media only screen and (max-width: 500px) {
          article section.time .item_box .item {
            margin: 0 5px; } }
        article section.time .item_box .item .circle {
          position: absolute;
          width: 110px;
          height: 110px;
          border: solid 2px #FFF;
          border-radius: 100%;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
          display: none; }
          @media only screen and (max-width: 1100px) {
            article section.time .item_box .item .circle {
              width: 80px;
              height: 80px; } }
          @media only screen and (max-width: 500px) {
            article section.time .item_box .item .circle {
              width: 60px;
              height: 60px; } }
        article section.time .item_box .item figure {
          width: 115px;
          margin: 0 auto 20px; }
          @media only screen and (max-width: 1100px) {
            article section.time .item_box .item figure {
              width: 85px; } }
          @media only screen and (max-width: 750px) {
            article section.time .item_box .item figure {
              width: 70px; } }
          @media only screen and (max-width: 500px) {
            article section.time .item_box .item figure {
              width: 55px; } }
        article section.time .item_box .item p {
          font-size: 20px;
          text-align: center; }
          @media only screen and (max-width: 1100px) {
            article section.time .item_box .item p {
              font-size: 18px; } }
          @media only screen and (max-width: 750px) {
            article section.time .item_box .item p {
              font-size: 14px;
              letter-spacing: 2px; } }
          @media only screen and (max-width: 500px) {
            article section.time .item_box .item p {
              font-size: 12px;
              letter-spacing: 0px; } }
  article section.style {
    position: relative;
    background-color: #606160;
    padding: 70px 0; }
    @media only screen and (max-width: 750px) {
      article section.style {
        padding: 50px 0; } }
    @media only screen and (max-width: 750px) {
      article section.style {
        padding: 50px 0 100px; } }
    article section.style .title {
      margin-bottom: 70px; }
      @media only screen and (max-width: 750px) {
        article section.style .title {
          margin-bottom: 40px; } }
    article section.style .bg {
      width: 1920px;
      height: 1417px;
      background-image: url(http://man.venussecret.com.tw/images/style_bg.png);
      position: absolute;
      left: 50%;
      top: 0;
      margin-left: -750px;
      opacity: 0.3; }
    article section.style .main {
      width: 1460px;
      height: 1750px;
      margin: 0 auto;
      position: relative;
      z-index: 1; }
      @media only screen and (max-width: 1500px) {
        article section.style .main {
          width: 1010px;
          height: 1210px; } }
      @media only screen and (max-width: 1100px) {
        article section.style .main {
          width: 740px;
          height: 887px; } }
      @media only screen and (max-width: 750px) {
        article section.style .main {
          width: 100%;
          height: auto; } }
      article section.style .main .slick-list {
        overflow: initial; }
      article section.style .main > button {
        width: 70px;
        height: 70px;
        position: absolute;
        z-index: 6;
        bottom: -35px;
        color: transparent;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 20px;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        border: none; }
        @media only screen and (max-width: 750px) {
          article section.style .main > button {
            bottom: -60px; } }
        @media only screen and (max-width: 500px) {
          article section.style .main > button {
            bottom: -30px;
            width: 40px;
            height: 40px;
            background-size: 10px; } }
        article section.style .main > button.slick-prev {
          background-color: #626262;
          background-image: url(http://man.venussecret.com.tw/images/arrow02_left.png);
          left: calc(50% - 35px); }
          @media only screen and (max-width: 500px) {
            article section.style .main > button.slick-prev {
              left: calc(50% - 20px); } }
        article section.style .main > button.slick-next {
          background-color: #535353;
          background-image: url(http://man.venussecret.com.tw/images/arrow02_right.png);
          left: calc(50% + 35px); }
          @media only screen and (max-width: 500px) {
            article section.style .main > button.slick-next {
              left: calc(50% + 20px); } }
      article section.style .main .item {
        position: absolute;
        width: 480px;
        height: 830px;
        overflow: hidden;
        cursor: pointer;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; }
        @media only screen and (max-width: 1500px) {
          article section.style .main .item {
            width: 330px;
            height: 570px; } }
        @media only screen and (max-width: 1100px) {
          article section.style .main .item {
            width: 240px;
            height: 415px; } }
        @media only screen and (max-width: 750px) {
          article section.style .main .item.slick-active {
            -webkit-transform: scale(1.05);
            -ms-transform: scale(1.05);
            transform: scale(1.05); }
            article section.style .main .item.slick-active .mask {
              opacity: 1; }
            article section.style .main .item.slick-active .info {
              opacity: 1;
              bottom: 100px; } }
        article section.style .main .item figure {
          position: absolute;
          overflow: hidden; }
        article section.style .main .item .mask {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          z-index: 1;
          background-color: #000;
          opacity: 0;
          -webkit-transition: .5s;
          -o-transition: .5s;
          transition: .5s; }
          @media only screen and (max-width: 750px) {
            article section.style .main .item .mask {
              width: 110%;
              height: 110%;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
              background-color: transparent;
              background-image: url(http://man.venussecret.com.tw/images/style_mask.png);
              background-position: center top;
              background-repeat: repeat-x;
              background-size: contain; } }
        article section.style .main .item .info {
          position: absolute;
          top: 60%;
          left: 50px;
          -webkit-transform: translate(0, -50%);
          -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
          z-index: 2;
          opacity: 0;
          -webkit-transition: .5s;
          -o-transition: .5s;
          transition: .5s; }
          @media only screen and (max-width: 750px) {
            article section.style .main .item .info {
              top: initial;
              left: 50%;
              bottom: 50px;
              -webkit-transform: translate(-50%, 0);
              -ms-transform: translate(-50%, 0);
              transform: translate(-50%, 0);
              opacity: 0;
              -webkit-transition: .5s .5s;
              -o-transition: .5s .5s;
              transition: .5s .5s; } }
          @media only screen and (max-width: 500px) {
            article section.style .main .item .info {
              width: 140px;
              bottom: 70px; } }
          article section.style .main .item .info:before {
            content: "";
            position: absolute;
            left: -15px;
            top: 50%;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%); }
          article section.style .main .item .info .ch {
            font-size: 25px;
            letter-spacing: 10px; }
            @media only screen and (max-width: 1100px) {
              article section.style .main .item .info .ch {
                font-size: 20px;
                letter-spacing: 5px; } }
            @media only screen and (max-width: 750px) {
              article section.style .main .item .info .ch {
                font-size: 18px;
                letter-spacing: 2px; } }
          article section.style .main .item .info .en {
            font-size: 18px; }
            @media only screen and (max-width: 1100px) {
              article section.style .main .item .info .en {
                font-size: 16px; } }
            @media only screen and (max-width: 750px) {
              article section.style .main .item .info .en {
                font-size: 14px; } }
        article section.style .main .item .more {
          display: none;
          position: absolute;
          left: 50%;
          bottom: 50px;
          z-index: 3;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
          letter-spacing: 2px; }
          @media only screen and (max-width: 750px) {
            article section.style .main .item .more {
              display: block; } }
          @media only screen and (max-width: 500px) {
            article section.style .main .item .more {
              bottom: 30px; } }
        article section.style .main .item.item01 {
          left: 0;
          top: 0; }
          article section.style .main .item.item01 .info:before {
            width: 40px;
            height: 143px;
            background-image: url(http://man.venussecret.com.tw/images/style_icon01.png); }
        article section.style .main .item.item02 {
          left: 490px;
          top: 0;
          height: 600px; }
          @media only screen and (max-width: 1500px) {
            article section.style .main .item.item02 {
              left: 340px;
              height: 413px; } }
          @media only screen and (max-width: 1100px) {
            article section.style .main .item.item02 {
              left: 250px;
              height: 300px; } }
          article section.style .main .item.item02 .info:before {
            width: 47px;
            height: 64px;
            background-image: url(http://man.venussecret.com.tw/images/style_icon02.png); }
        article section.style .main .item.item03 {
          left: 980px;
          top: 0;
          height: 895px; }
          @media only screen and (max-width: 1500px) {
            article section.style .main .item.item03 {
              left: 680px;
              height: 615px; } }
          @media only screen and (max-width: 1100px) {
            article section.style .main .item.item03 {
              left: 500px;
              height: 447px; } }
          article section.style .main .item.item03 .info:before {
            width: 44px;
            height: 119px;
            background-image: url(http://man.venussecret.com.tw/images/style_icon03.png); }
          article section.style .main .item.item03 figure {
            height: 100%; }
            article section.style .main .item.item03 figure img {
              width: auto;
              height: 100%; }
        article section.style .main .item.item04 {
          left: 490px;
          top: 610px;
          height: 510px; }
          @media only screen and (max-width: 1500px) {
            article section.style .main .item.item04 {
              left: 340px;
              top: 423px;
              height: 350px; } }
          @media only screen and (max-width: 1100px) {
            article section.style .main .item.item04 {
              left: 250px;
              top: 310px;
              height: 255px; } }
          article section.style .main .item.item04 .info:before {
            width: 45px;
            height: 62px;
            background-image: url(http://man.venussecret.com.tw/images/style_icon04.png); }
          article section.style .main .item.item04 figure {
            top: -225px; }
            @media only screen and (max-width: 1500px) {
              article section.style .main .item.item04 figure {
                top: -150px; } }
            @media only screen and (max-width: 1100px) {
              article section.style .main .item.item04 figure {
                top: -110px; } }
        article section.style .main .item.item05 {
          left: 0px;
          top: 840px; }
          @media only screen and (max-width: 1500px) {
            article section.style .main .item.item05 {
              top: 580px; } }
          @media only screen and (max-width: 1100px) {
            article section.style .main .item.item05 {
              top: 425px; } }
          article section.style .main .item.item05 .info:before {
            width: 40px;
            height: 143px;
            background-image: url(http://man.venussecret.com.tw/images/style_icon01.png); }
          article section.style .main .item.item05 figure img {
            height: 100%; }
        article section.style .main .item.item06 {
          left: 490px;
          top: 1130px;
          height: 540px; }
          @media only screen and (max-width: 1500px) {
            article section.style .main .item.item06 {
              left: 340px;
              top: 783px;
              height: 370px; } }
          @media only screen and (max-width: 1100px) {
            article section.style .main .item.item06 {
              left: 250px;
              top: 575px;
              height: 270px; } }
          article section.style .main .item.item06 .info:before {
            width: 44px;
            height: 119px;
            background-image: url(http://man.venussecret.com.tw/images/style_icon03.png); }
          article section.style .main .item.item06 figure {
            top: -225px; }
            @media only screen and (max-width: 1500px) {
              article section.style .main .item.item06 figure {
                top: -150px; } }
            @media only screen and (max-width: 1100px) {
              article section.style .main .item.item06 figure {
                top: -110px; } }
        article section.style .main .item.item07 {
          left: 980px;
          top: 905px;
          height: 765px; }
          @media only screen and (max-width: 1500px) {
            article section.style .main .item.item07 {
              left: 680px;
              top: 625px;
              height: 527px; } }
          @media only screen and (max-width: 1100px) {
            article section.style .main .item.item07 {
              left: 500px;
              top: 457px;
              height: 387px; } }
          article section.style .main .item.item07 .info:before {
            width: 44px;
            height: 119px;
            background-image: url(http://man.venussecret.com.tw/images/style_icon03.png); }
        @media only screen and (max-width: 750px) {
          article section.style .main .item.item01, article section.style .main .item.item02, article section.style .main .item.item03, article section.style .main .item.item04, article section.style .main .item.item05, article section.style .main .item.item06, article section.style .main .item.item07 {
            position: relative;
            height: auto;
            top: initial;
            left: initial;
            display: inline-block;
            vertical-align: top;
            margin: 0 10px;
            overflow: hidden; }
            article section.style .main .item.item01 figure, article section.style .main .item.item02 figure, article section.style .main .item.item03 figure, article section.style .main .item.item04 figure, article section.style .main .item.item05 figure, article section.style .main .item.item06 figure, article section.style .main .item.item07 figure {
              position: relative;
              width: auto;
              height: 100%;
              top: 0; }
              article section.style .main .item.item01 figure img, article section.style .main .item.item02 figure img, article section.style .main .item.item03 figure img, article section.style .main .item.item04 figure img, article section.style .main .item.item05 figure img, article section.style .main .item.item06 figure img, article section.style .main .item.item07 figure img {
                width: 100%;
                height: auto; }
          article section.style .main .item.item01 .info:before, article section.style .main .item.item03 .info:before, article section.style .main .item.item05 .info:before, article section.style .main .item.item06 .info:before, article section.style .main .item.item07 .info:before {
            background-size: contain;
            background-repeat: no-repeat;
            width: 30px;
            height: 80px; } }
        @media only screen and (min-width: 751px) {
          article section.style .main .item:hover .mask {
            opacity: 0.5; }
          article section.style .main .item:hover .info {
            top: 50%;
            opacity: 1; } }
  article section.star {
    position: relative;
    background-color: #585858; }
    article section.star .title {
      position: absolute;
      width: 100%;
      z-index: 1;
      left: 0;
      top: 420px;
      background-color: #585858;
      text-align: center;
      padding: 28px 0; }
      @media only screen and (max-width: 1400px) {
        article section.star .title {
          top: 340px; } }
      @media only screen and (max-width: 1100px) {
        article section.star .title {
          top: 280px; } }
      @media only screen and (max-width: 900px) {
        article section.star .title {
          top: 340px; } }
      @media only screen and (max-width: 750px) {
        article section.star .title {
          top: 300px; } }
      @media only screen and (max-width: 500px) {
        article section.star .title {
          padding: 20px 0;
          top: 220px; } }
      article section.star .title h1 .en {
        letter-spacing: 20px; }
        @media only screen and (max-width: 750px) {
          article section.star .title h1 .en {
            letter-spacing: 12px; } }
    article section.star .slide {
      position: relative;
      width: 100%;
      overflow: hidden; }
      @media only screen and (max-width: 900px) {
        article section.star .slide {
          padding-bottom: 70px; } }
      article section.star .slide > button {
        display: none !important; }
      article section.star .slide .slick-dots {
        position: absolute;
        top: 465px;
        right: 100px;
        z-index: 1; }
        @media only screen and (max-width: 1400px) {
          article section.star .slide .slick-dots {
            top: 385px; } }
        @media only screen and (max-width: 1100px) {
          article section.star .slide .slick-dots {
            top: 325px; } }
        @media only screen and (max-width: 900px) {
          article section.star .slide .slick-dots {
            top: initial;
            bottom: 20px;
            right: initial;
            text-align: center;
            width: 100%; } }
        article section.star .slide .slick-dots li {
          display: inline-block;
          vertical-align: top; }
          article section.star .slide .slick-dots li button {
            width: 16px;
            height: 16px;
            border-radius: 100%;
            margin: 0 10px;
            cursor: pointer;
            background-color: #434343;
            border: none;
            color: transparent; }
            @media only screen and (max-width: 900px) {
              article section.star .slide .slick-dots li button {
                width: 10px;
                height: 10px;
                margin: 0 5px; } }
          article section.star .slide .slick-dots li.slick-active button {
            background-color: #fff; }
      article section.star .slide .row {
        width: 50%;
        display: inline-block;
        vertical-align: top; }
        article section.star .slide .row .item {
          width: 100%;
          background-color: #313131;
          position: relative;
          overflow: hidden; }
          article section.star .slide .row .item:after {
            content: "";
            display: block;
            clear: both; }
          article section.star .slide .row .item figure {
            width: 50%;
            height: 420px;
            overflow: hidden;
            float: left;
            position: relative; }
            @media only screen and (max-width: 1400px) {
              article section.star .slide .row .item figure {
                height: 340px; } }
            @media only screen and (max-width: 1100px) {
              article section.star .slide .row .item figure {
                height: 280px; } }
            @media only screen and (max-width: 900px) {
              article section.star .slide .row .item figure {
                height: 340px; } }
            @media only screen and (max-width: 750px) {
              article section.star .slide .row .item figure {
                height: 300px; } }
            @media only screen and (max-width: 500px) {
              article section.star .slide .row .item figure {
                height: 220px; } }
            article section.star .slide .row .item figure img {
              position: absolute;
              top: 0;
              left: 0;
              -webkit-transform: scale(1);
              -ms-transform: scale(1);
              transform: scale(1);
              -webkit-transition: .5s;
              -o-transition: .5s;
              transition: .5s; }
            @media only screen and (min-width: 751px) {
              article section.star .slide .row .item figure:hover img {
                -webkit-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1); } }
          article section.star .slide .row .item .info {
            width: 50%;
            height: 420px;
            float: left;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            padding: 100px 40px 0; }
            @media only screen and (max-width: 1400px) {
              article section.star .slide .row .item .info {
                padding: 70px 20px 0;
                height: 340px; } }
            @media only screen and (max-width: 1100px) {
              article section.star .slide .row .item .info {
                padding: 40px 20px 0;
                height: 280px; } }
            @media only screen and (max-width: 900px) {
              article section.star .slide .row .item .info {
                padding: 40px 20px 0;
                height: 340px; } }
            @media only screen and (max-width: 750px) {
              article section.star .slide .row .item .info {
                height: 300px; } }
            @media only screen and (max-width: 500px) {
              article section.star .slide .row .item .info {
                padding: 20px 15px 0;
                height: 220px; } }
            article section.star .slide .row .item .info .name {
              font-size: 34px;
              font-weight: 400; }
              @media only screen and (max-width: 1400px) {
                article section.star .slide .row .item .info .name {
                  font-size: 30px; } }
              @media only screen and (max-width: 1100px) {
                article section.star .slide .row .item .info .name {
                  font-size: 25px; } }
              @media only screen and (max-width: 900px) {
                article section.star .slide .row .item .info .name {
                  font-size: 30px; } }
              @media only screen and (max-width: 500px) {
                article section.star .slide .row .item .info .name {
                  font-size: 22px; } }
            article section.star .slide .row .item .info h2 {
              font-size: 22px;
              letter-spacing: 2px;
              margin-bottom: 15px; }
              @media only screen and (max-width: 1400px) {
                article section.star .slide .row .item .info h2 {
                  font-size: 20px;
                  letter-spacing: 1px; } }
              @media only screen and (max-width: 1100px) {
                article section.star .slide .row .item .info h2 {
                  font-size: 18px; } }
              @media only screen and (max-width: 900px) {
                article section.star .slide .row .item .info h2 {
                  font-size: 20px; } }
              @media only screen and (max-width: 500px) {
                article section.star .slide .row .item .info h2 {
                  font-size: 15px;
                  margin-bottom: 10px; } }
            article section.star .slide .row .item .info h3 {
              font-size: 16px;
              letter-spacing: 1px;
              text-align: justify; }
              @media only screen and (max-width: 1400px) {
                article section.star .slide .row .item .info h3 {
                  font-size: 14px;
                  letter-spacing: 0px; } }
              @media only screen and (max-width: 500px) {
                article section.star .slide .row .item .info h3 {
                  font-size: 12px; } }
            article section.star .slide .row .item .info .more {
              font-size: 22px;
              position: absolute;
              bottom: 40px;
              right: 40px;
              letter-spacing: 2px;
              cursor: pointer; }
              @media only screen and (max-width: 1100px) {
                article section.star .slide .row .item .info .more {
                  font-size: 18px;
                  bottom: 20px; } }
              @media only screen and (max-width: 500px) {
                article section.star .slide .row .item .info .more {
                  font-size: 12px;
                  bottom: 10px;
                  right: 20px; } }
              article section.star .slide .row .item .info .more:after {
                content: "";
                position: absolute;
                width: 250px;
                height: 1px;
                background-color: #a0a0a0;
                right: 100px;
                top: 50%;
                -webkit-transform: translate(0, -50%);
                -ms-transform: translate(0, -50%);
                transform: translate(0, -50%);
                -webkit-transition: .5s;
                -o-transition: .5s;
                transition: .5s; }
                @media only screen and (max-width: 500px) {
                  article section.star .slide .row .item .info .more:after {
                    width: 160px;
                    right: 60px; } }
              @media only screen and (min-width: 751px) {
                article section.star .slide .row .item .info .more:hover:after {
                  width: 300px; } }
  @media only screen and (min-width: 751px) and (max-width: 500px) {
    article section.star .slide .row .item .info .more:hover:after {
      width: 200px; } }
          article section.star .slide .row .item:last-child {
            margin-top: 90px; }
            article section.star .slide .row .item:last-child figure {
              float: right; }
            article section.star .slide .row .item:last-child .info {
              float: right; }
              article section.star .slide .row .item:last-child .info .more {
                right: 0px;
                left: 40px; }
                @media only screen and (max-width: 500px) {
                  article section.star .slide .row .item:last-child .info .more {
                    left: 20px; } }
                article section.star .slide .row .item:last-child .info .more:after {
                  right: 0;
                  left: 100px; }
                  @media only screen and (max-width: 500px) {
                    article section.star .slide .row .item:last-child .info .more:after {
                      left: 60px; } }
    article section.star .popup {
      position: fixed;
      z-index: 50;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.8);
      display: none; }
      article section.star .popup .slide2 {
        width: 1100px;
        height: 620px;
        position: absolute;
        left: 50%;
        top: 50%;
        background-color: #313334;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
        @media only screen and (max-width: 1400px) {
          article section.star .popup .slide2 {
            width: 850px;
            height: 480px; } }
        @media only screen and (max-width: 1100px) {
          article section.star .popup .slide2 {
            width: 670px;
            height: 378px; } }
        @media only screen and (max-width: 750px) {
          article section.star .popup .slide2 {
            width: 400px;
            height: auto; } }
        @media only screen and (max-width: 500px) {
          article section.star .popup .slide2 {
            width: 300px; } }
        @media only screen and (max-width: 374px) {
          article section.star .popup .slide2 {
            width: 250px; } }
        article section.star .popup .slide2 .close {
          position: absolute;
          width: 26px;
          height: 26px;
          background-image: url(http://man.venussecret.com.tw/images/close01.png);
          cursor: pointer;
          right: 25px;
          top: 25px;
          z-index: 5; }
          @media only screen and (max-width: 750px) {
            article section.star .popup .slide2 .close {
              right: 0;
              top: -40px; } }
        article section.star .popup .slide2 .prev, article section.star .popup .slide2 .next {
          width: 47px;
          height: 93px;
          position: absolute;
          cursor: pointer;
          top: 50%;
          background-size: contain;
          background-repeat: no-repeat;
          -webkit-transform: translate(0, -50%);
          -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
          -webkit-transition: .5s;
          -o-transition: .5s;
          transition: .5s; }
        article section.star .popup .slide2 .prev {
          left: -100px;
          background-image: url(http://man.venussecret.com.tw/images/arrow02_left.png); }
          @media only screen and (max-width: 1400px) {
            article section.star .popup .slide2 .prev {
              width: 30px;
              left: -40px; } }
          @media only screen and (max-width: 500px) {
            article section.star .popup .slide2 .prev {
              width: 20px;
              left: -25px; } }
        article section.star .popup .slide2 .next {
          right: -100px;
          background-image: url(http://man.venussecret.com.tw/images/arrow02_right.png); }
          @media only screen and (max-width: 1400px) {
            article section.star .popup .slide2 .next {
              width: 30px;
              right: -40px; } }
          @media only screen and (max-width: 500px) {
            article section.star .popup .slide2 .next {
              width: 20px;
              right: -25px; } }
        article section.star .popup .slide2 .bg01 {
          position: absolute;
          right: 0;
          top: 0px;
          width: 621px;
          height: 317px;
          background-image: url(http://man.venussecret.com.tw/images/popup_dotbg01.png);
          background-repeat: no-repeat;
          background-size: contain; }
          @media only screen and (max-width: 1400px) {
            article section.star .popup .slide2 .bg01 {
              width: 500px; } }
          @media only screen and (max-width: 750px) {
            article section.star .popup .slide2 .bg01 {
              background-image: url(http://man.venussecret.com.tw/images/popup_dotbg01_m.png);
              width: 400px;
              top: 260px; } }
          @media only screen and (max-width: 500px) {
            article section.star .popup .slide2 .bg01 {
              width: 300px;
              top: 200px; } }
          @media only screen and (max-width: 374px) {
            article section.star .popup .slide2 .bg01 {
              width: 250px;
              top: 160px; } }
        article section.star .popup .slide2 .bg02 {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 621px;
          height: 274px;
          background-image: url(http://man.venussecret.com.tw/images/popup_dotbg02.png);
          background-repeat: no-repeat;
          background-size: contain; }
          @media only screen and (max-width: 1400px) {
            article section.star .popup .slide2 .bg02 {
              width: 500px;
              height: 221px; } }
          @media only screen and (max-width: 750px) {
            article section.star .popup .slide2 .bg02 {
              background-image: url(http://man.venussecret.com.tw/images/popup_dotbg02_m.png);
              width: 400px;
              height: 179px; } }
          @media only screen and (max-width: 500px) {
            article section.star .popup .slide2 .bg02 {
              width: 300px;
              height: 135px; } }
          @media only screen and (max-width: 374px) {
            article section.star .popup .slide2 .bg02 {
              width: 250px;
              height: 112px; } }
        article section.star .popup .slide2 .main {
          width: 100%;
          height: 100%; }
          article section.star .popup .slide2 .main .item {
            display: none; }
            article section.star .popup .slide2 .main .item.active {
              display: block; }
            article section.star .popup .slide2 .main .item figure {
              width: 490px;
              margin-right: auto;
              position: relative;
              z-index: 1; }
              @media only screen and (max-width: 1400px) {
                article section.star .popup .slide2 .main .item figure {
                  width: 380px; } }
              @media only screen and (max-width: 1100px) {
                article section.star .popup .slide2 .main .item figure {
                  width: 299px; } }
              @media only screen and (max-width: 750px) {
                article section.star .popup .slide2 .main .item figure {
                  width: 100%; } }
            article section.star .popup .slide2 .main .item .info {
              width: calc(100% - 490px);
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              padding: 0 50px 0 60px;
              position: absolute;
              z-index: 2;
              left: 490px;
              top: 50%;
              -webkit-transform: translate(0, -50%);
              -ms-transform: translate(0, -50%);
              transform: translate(0, -50%); }
              @media only screen and (max-width: 1400px) {
                article section.star .popup .slide2 .main .item .info {
                  width: calc(100% - 380px);
                  left: 380px; } }
              @media only screen and (max-width: 1100px) {
                article section.star .popup .slide2 .main .item .info {
                  width: calc(100% - 299px);
                  left: 299px; } }
              @media only screen and (max-width: 750px) {
                article section.star .popup .slide2 .main .item .info {
                  position: relative;
                  width: 100%;
                  top: 0;
                  left: 0;
                  -webkit-transform: translate(0, 0);
                  -ms-transform: translate(0, 0);
                  transform: translate(0, 0);
                  padding: 50px; } }
              @media only screen and (max-width: 500px) {
                article section.star .popup .slide2 .main .item .info {
                  padding: 50px 25px; } }
              @media only screen and (max-width: 374px) {
                article section.star .popup .slide2 .main .item .info {
                  padding: 50px 20px; } }
              article section.star .popup .slide2 .main .item .info .name {
                position: absolute;
                font-size: 48px;
                font-weight: 400;
                top: 50%;
                left: -150px;
                -webkit-transform: translate(0, -50%) rotate(90deg);
                -ms-transform: translate(0, -50%) rotate(90deg);
                transform: translate(0, -50%) rotate(90deg);
                width: 300px;
                text-align: center; }
                @media only screen and (max-width: 1400px) {
                  article section.star .popup .slide2 .main .item .info .name {
                    font-size: 40px;
                    left: -145px; } }
                @media only screen and (max-width: 750px) {
                  article section.star .popup .slide2 .main .item .info .name {
                    top: -30px;
                    left: 50%;
                    -webkit-transform: translate(-50%, 0) rotate(0deg);
                    -ms-transform: translate(-50%, 0) rotate(0deg);
                    transform: translate(-50%, 0) rotate(0deg); } }
              article section.star .popup .slide2 .main .item .info p {
                font-size: 18px;
                letter-spacing: 1px; }
                @media only screen and (max-width: 1100px) {
                  article section.star .popup .slide2 .main .item .info p {
                    font-size: 16px; } }
                @media only screen and (max-width: 374px) {
                  article section.star .popup .slide2 .main .item .info p {
                    font-size: 14px; } }
  article section.news {
    position: relative;
    background-color: #707070;
    padding: 50px 0 100px;
    width: 100%;
    overflow: hidden; }
    article section.news .title {
      margin-bottom: 50px; }
    article section.news .slide {
      position: relative;
      width: 100%; }
      article section.news .slide .slick-list {
        overflow: initial; }
      article section.news .slide > button {
        width: 70px;
        height: 70px;
        position: absolute;
        z-index: 6;
        bottom: -35px;
        color: transparent;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 20px;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        border: none; }
        @media only screen and (max-width: 500px) {
          article section.news .slide > button {
            bottom: -20px;
            width: 40px;
            height: 40px;
            background-size: 10px; } }
        article section.news .slide > button.slick-prev {
          background-color: #626262;
          background-image: url(http://man.venussecret.com.tw/images/arrow02_left.png);
          left: calc(50% - 35px); }
          @media only screen and (max-width: 500px) {
            article section.news .slide > button.slick-prev {
              left: calc(50% - 20px); } }
        article section.news .slide > button.slick-next {
          background-color: #535353;
          background-image: url(http://man.venussecret.com.tw/images/arrow02_right.png);
          left: calc(50% + 35px); }
          @media only screen and (max-width: 500px) {
            article section.news .slide > button.slick-next {
              left: calc(50% + 20px); } }
      article section.news .slide .item {
        display: inline-block;
        vertical-align: top;
        width: 1253px;
        margin: 0 25px;
        position: relative;
        cursor: pointer;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; }
        @media only screen and (max-width: 750px) {
          article section.news .slide .item {
            margin: 0 10px; } }
        article section.news .slide .item.slick-active {
          -webkit-box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.2); }
          @media only screen and (max-width: 750px) {
            article section.news .slide .item.slick-active {
              -webkit-transform: scale(1.05);
              -ms-transform: scale(1.05);
              transform: scale(1.05); } }
        article section.news .slide .item figure {
          width: 100%; }
  article section.store, article section.store_m {
    position: relative;
    background-image: url(http://man.venussecret.com.tw/images/stroe_img01.png);
    background-position: center top;
    background-size: cover;
    padding: 100px 0; }
    @media only screen and (max-width: 750px) {
      article section.store, article section.store_m {
        display: none;
        padding: 50px 0; } }
    @media only screen and (max-width: 600px) {
      article section.store, article section.store_m {
        background-image: url(http://man.venussecret.com.tw/images/stroe_img01_m.png);
        background-position: center center; } }
    article section.store .title, article section.store_m .title {
      margin-bottom: 80px; }
      @media only screen and (max-width: 750px) {
        article section.store .title, article section.store_m .title {
          margin-bottom: 30px; } }
    article section.store .main, article section.store_m .main {
      text-align: center; }
      @media only screen and (max-width: 1100px) {
        article section.store .main, article section.store_m .main {
          width: calc(100% - 40px);
          max-width: 600px;
          margin: 0 auto; } }
      @media only screen and (max-width: 600px) {
        article section.store .main, article section.store_m .main {
          width: 100%;
          max-width: initial; } }
      article section.store .main .item, article section.store_m .main .item {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        padding: 0 50px;
        position: relative; }
        @media only screen and (max-width: 1500px) {
          article section.store .main .item, article section.store_m .main .item {
            padding: 0 10px; } }
        @media only screen and (max-width: 1100px) {
          article section.store .main .item, article section.store_m .main .item {
            padding: 0;
            margin-bottom: 50px;
            width: calc(50% - 30px);
            vertical-align: top;
            margin-right: 30px; }
            article section.store .main .item:nth-child(2), article section.store .main .item:nth-child(4), article section.store_m .main .item:nth-child(2), article section.store_m .main .item:nth-child(4) {
              margin-right: 0; }
            article section.store .main .item:nth-child(3), article section.store .main .item:nth-child(4), article section.store_m .main .item:nth-child(3), article section.store_m .main .item:nth-child(4) {
              margin-bottom: 0; } }
        @media only screen and (max-width: 750px) {
          article section.store .main .item, article section.store_m .main .item {
            margin-bottom: 25px;
            margin-right: 15px; } }
        @media only screen and (max-width: 600px) {
          article section.store .main .item, article section.store_m .main .item {
            margin-right: 0px;
            text-align: center;
            margin-bottom: 15px; }
            article section.store .main .item:nth-child(3), article section.store_m .main .item:nth-child(3) {
              margin-bottom: 15px; } }
        @media only screen and (max-width: 450px) {
          article section.store .main .item, article section.store_m .main .item {
            width: 100%; } }
        article section.store .main .item:after, article section.store_m .main .item:after {
          content: "";
          position: absolute;
          width: 1px;
          height: 90px;
          right: -5px;
          top: 0px;
          background-color: #FFF;
          -webkit-transform: skewX(10deg);
          -ms-transform: skewX(10deg);
          transform: skewX(10deg); }
          @media only screen and (max-width: 1100px) {
            article section.store .main .item:after, article section.store_m .main .item:after {
              display: none; } }
        article section.store .main .item:first-child, article section.store_m .main .item:first-child {
          text-align: center; }
          @media only screen and (max-width: 1100px) {
            article section.store .main .item:first-child, article section.store_m .main .item:first-child {
              text-align: left; } }
          @media only screen and (max-width: 600px) {
            article section.store .main .item:first-child, article section.store_m .main .item:first-child {
              text-align: center; } }
        article section.store .main .item:last-child:after, article section.store_m .main .item:last-child:after {
          display: none; }
        article section.store .main .item p, article section.store_m .main .item p {
          font-size: 20px;
          letter-spacing: 2px; }
          @media only screen and (max-width: 1500px) {
            article section.store .main .item p, article section.store_m .main .item p {
              font-size: 18px;
              letter-spacing: 1px;
              margin-bottom: 5px; } }
          @media only screen and (max-width: 750px) {
            article section.store .main .item p, article section.store_m .main .item p {
              font-size: 16px; } }
          @media only screen and (max-width: 600px) {
            article section.store .main .item p, article section.store_m .main .item p {
              font-size: 12px; } }
  article section.store_m {
    display: none; }
    @media only screen and (max-width: 750px) {
      article section.store_m {
        display: block; } }
  article section.phone, article section.phone_m {
    background-color: #1b1b1b;
    position: relative;
    padding: 50px 0;
    overflow: hidden; }
    @media only screen and (max-width: 750px) {
      article section.phone, article section.phone_m {
        display: none; } }
    article section.phone .bg01, article section.phone_m .bg01 {
      position: absolute;
      left: 0;
      top: 0px;
      width: 272px;
      height: 157px;
      background-image: url(http://man.venussecret.com.tw/images/phone_bg01.png);
      background-repeat: no-repeat;
      background-size: contain; }
      @media only screen and (max-width: 1100px) {
        article section.phone .bg01, article section.phone_m .bg01 {
          width: 200px; } }
      @media only screen and (max-width: 500px) {
        article section.phone .bg01, article section.phone_m .bg01 {
          width: 150px; } }
    article section.phone .bg02, article section.phone_m .bg02 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 311px;
      height: 158px;
      background-image: url(http://man.venussecret.com.tw/images/phone_bg02.png);
      background-repeat: no-repeat;
      background-size: contain; }
      @media only screen and (max-width: 1100px) {
        article section.phone .bg02, article section.phone_m .bg02 {
          width: 250px;
          bottom: -50px; } }
      @media only screen and (max-width: 500px) {
        article section.phone .bg02, article section.phone_m .bg02 {
          width: 200px;
          bottom: -80px; } }
    article section.phone p, article section.phone_m p {
      text-align: center;
      font-size: 30px; }
      @media only screen and (max-width: 750px) {
        article section.phone p, article section.phone_m p {
          font-size: 24px; } }
      @media only screen and (max-width: 500px) {
        article section.phone p, article section.phone_m p {
          font-size: 22px;
          letter-spacing: 2px; } }
      @media only screen and (max-width: 375px) {
        article section.phone p, article section.phone_m p {
          font-size: 18px; } }
  article section.phone_m {
    display: none; }
    @media only screen and (max-width: 750px) {
      article section.phone_m {
        display: block; } }
  article section.form {
    background-color: #313131;
    position: relative; }
    article section.form:after {
      content: "";
      display: block;
      clear: both; }
    article section.form .left {
      width: 50%;
      height: 950px;
      float: left;
      background-image: url(http://man.venussecret.com.tw/images/contact_img01.jpg);
      background-position: center top;
      position: relative;
      background-size: cover; }
      @media only screen and (max-width: 1200px) {
        article section.form .left {
          height: 700px; } }
      @media only screen and (max-width: 900px) {
        article section.form .left {
          height: 600px; } }
      @media only screen and (max-width: 750px) {
        article section.form .left {
          width: 100%;
          height: 800px;
          float: none; } }
      @media only screen and (max-width: 500px) {
        article section.form .left {
          height: 375px; } }
      article section.form .left h2 {
        position: absolute;
        top: 50%;
        font-size: 30px;
        width: 100%;
        text-align: center;
        font-weight: 300;
        letter-spacing: 12px;
        text-indent: 12px;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%); }
        @media only screen and (max-width: 500px) {
          article section.form .left h2 {
            font-size: 18px; } }
        article section.form .left h2 br {
          display: none; }
          @media only screen and (max-width: 1200px) {
            article section.form .left h2 br {
              display: block; } }
      article section.form .left .info {
        position: absolute;
        bottom: 50px;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 20px;
        text-align: center; }
        @media only screen and (max-width: 500px) {
          article section.form .left .info {
            bottom: 10px; } }
        article section.form .left .info .brand {
          max-width: 552px;
          width: 100%;
          margin: 0 auto 20px; }
          @media only screen and (max-width: 500px) {
            article section.form .left .info .brand {
              width: 90%;
              margin: 0 auto 10px; } }
        article section.form .left .info h3 {
          font-size: 20px;
          letter-spacing: 2px;
          font-weight: 300; }
          @media only screen and (max-width: 500px) {
            article section.form .left .info h3 {
              font-size: 14px; } }
    article section.form form {
      width: 50%;
      float: left;
      padding: 100px 150px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      @media only screen and (max-width: 1400px) {
        article section.form form {
          padding: 100px 80px; } }
      @media only screen and (max-width: 1200px) {
        article section.form form {
          padding: 50px; } }
      @media only screen and (max-width: 1200px) {
        article section.form form {
          padding: 40px; } }
      @media only screen and (max-width: 750px) {
        article section.form form {
          float: none;
          width: 100%;
          padding: 50px 20px;
          text-align: center; } }
      @media only screen and (max-width: 500px) {
        article section.form form {
          padding: 50px 10px; } }
      article section.form form p {
        font-size: 20px;
        margin-bottom: 30px; }
        @media only screen and (max-width: 900px) {
          article section.form form p {
            margin-bottom: 20px; } }
        @media only screen and (max-width: 750px) {
          article section.form form p {
            text-align: center; } }
      article section.form form .radio {
        margin-bottom: 40px; }
        @media only screen and (max-width: 1600px) {
          article section.form form .radio {
            width: 300px; } }
        @media only screen and (max-width: 900px) {
          article section.form form .radio {
            margin-bottom: 20px; } }
        @media only screen and (max-width: 750px) {
          article section.form form .radio {
            text-align: center;
            margin-bottom: 30px;
            width: 250px;
            margin-right: auto;
            margin-left: auto; } }
        article section.form form .radio .item {
          display: inline-block;
          vertical-align: top;
          position: relative;
          margin-right: 10px;
          overflow: hidden; }
          @media only screen and (max-width: 1600px) {
            article section.form form .radio .item {
              margin-right: 30px; } }
          @media only screen and (max-width: 750px) {
            article section.form form .radio .item {
              margin-right: 15px; } }
          @media only screen and (max-width: 500px) {
            article section.form form .radio .item {
              margin-right: 0; } }
          article section.form form .radio .item label {
            font-size: 18px;
            letter-spacing: 2px;
            padding-left: 25px;
            cursor: pointer; }
            @media only screen and (max-width: 900px) {
              article section.form form .radio .item label {
                font-size: 16px; } }
            @media only screen and (max-width: 750px) {
              article section.form form .radio .item label {
                font-size: 14px; } }
            @media only screen and (max-width: 500px) {
              article section.form form .radio .item label {
                font-size: 12px; } }
            article section.form form .radio .item label input[type="radio"] {
              position: absolute;
              left: -50px; }
              article section.form form .radio .item label input[type="radio"]::-ms-expand {
                display: none; }
            article section.form form .radio .item label:before {
              cursor: pointer;
              content: "";
              position: absolute;
              left: 0px;
              top: 6px;
              width: 15px;
              height: 15px;
              border: solid 1px #FFF; }
            article section.form form .radio .item label.checked:after {
              cursor: pointer;
              content: "";
              position: absolute;
              left: 3px;
              top: 9px;
              width: 11px;
              height: 11px;
              background-color: #FFF; }
      article section.form form .row {
        border-bottom: 1px solid #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 10px;
        padding-bottom: 40px;
        margin-bottom: 40px; }
        @media only screen and (max-width: 1200px) {
          article section.form form .row {
            padding-bottom: 20px;
            margin-bottom: 20px; } }
        @media only screen and (max-width: 750px) {
          article section.form form .row {
            padding-bottom: 15px;
            margin-bottom: 15px;
            display: inline-block;
            vertical-align: top;
            margin-right: 20px;
            width: calc(50% - 20px); }
            article section.form form .row:nth-child(4), article section.form form .row:nth-child(6) {
              margin-right: 0; } }
        article section.form form .row > input {
          font-size: 20px;
          background-color: transparent;
          letter-spacing: 2px;
          width: 100%;
          padding: 0 10px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box; }
          @media only screen and (max-width: 900px) {
            article section.form form .row > input {
              font-size: 18px; } }
          @media only screen and (max-width: 750px) {
            article section.form form .row > input {
              font-size: 14px;
              letter-spacing: 0; } }
        article section.form form .row select {
          background-color: #313131;
          font-size: 20px;
          border: none;
          padding: 0 10px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 100%;
          -webkit-appearance: none;
          background-image: url(http://man.venussecret.com.tw/images/contact_arrow.png);
          background-repeat: no-repeat;
          background-position: calc(100% - 20px) center; }
          @media only screen and (max-width: 900px) {
            article section.form form .row select {
              font-size: 18px;
              background-size: 25px; } }
          @media only screen and (max-width: 750px) {
            article section.form form .row select {
              font-size: 14px;
              letter-spacing: 0;
              background-size: 16px; } }
      article section.form form .agree_box {
        margin-bottom: 50px; }
        @media only screen and (max-width: 900px) {
          article section.form form .agree_box {
            margin-bottom: 20px; } }
        @media only screen and (max-width: 750px) {
          article section.form form .agree_box {
            margin-top: 20px; } }
        article section.form form .agree_box label {
          display: inline-block;
          vertical-align: middle;
          font-size: 14px;
          letter-spacing: 2px;
          position: relative;
          padding-left: 35px;
          overflow: hidden;
          text-align: left;
          padding-bottom: 5px; }
          @media only screen and (max-width: 750px) {
            article section.form form .agree_box label {
              font-size: 12px; } }
          article section.form form .agree_box label input {
            display: inline-block;
            vertical-align: middle;
            position: absolute;
            left: -50px; }
          article section.form form .agree_box label:before {
            cursor: pointer;
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 15px;
            height: 15px;
            border: solid 1px #FFF; }
          article section.form form .agree_box label.checked:after {
            cursor: pointer;
            content: "";
            position: absolute;
            left: 3px;
            top: 5px;
            width: 11px;
            height: 11px;
            background-color: #FFF; }
          article section.form form .agree_box label a {
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 2px; }
            @media only screen and (max-width: 750px) {
              article section.form form .agree_box label a {
                font-size: 12px; } }
      article section.form form .send_box {
        text-align: center; }
        article section.form form .send_box input {
          font-size: 28px;
          padding: 8px 150px;
          border: solid 1px #fff;
          display: inline-block;
          cursor: pointer;
          background-color: rgba(255, 255, 255, 0);
          -webkit-transition: .5s;
          -o-transition: .5s;
          transition: .5s; }
          @media only screen and (max-width: 1100px) {
            article section.form form .send_box input {
              padding: 8px 70px; } }
          @media only screen and (max-width: 900px) {
            article section.form form .send_box input {
              font-size: 24px; } }
          @media only screen and (max-width: 750px) {
            article section.form form .send_box input {
              font-size: 16px; } }
          @media only screen and (min-width: 751px) {
            article section.form form .send_box input:hover {
              background-color: rgba(255, 255, 255, 0.2); } }