@charset "UTF-8";
/* CSS Document*/
/* CSS reset*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(//fonts.googleapis.com/css?family=Ultra);
@import url(//fonts.googleapis.com/earlyaccess/cwtexming.css);
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, textarea, p, blockquote, th, td, footer, img {
  margin: 0;
  padding: 0;
  border: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ol, ul {
  list-style: none; }

q:before, q:after {
  content: ''; }

abbr, acronym, img {
  border: 0; }

/* link styles*/
a, div, li {
  text-decoration: none; }

a:hover, div:hover, li:hover {
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

/* ----------------------------------------------------
 	clearfix
 */
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  font-size: 0;
  display: inline-block; }

html[xmlns] .clearfix {
  display: block; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  * html .clearfix {
    height: 1%; }

html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  width: 100%;
  background: #000;
  letter-spacing: 1px; }

body {
  width: 100%;
  background: #000;
  font-family: 'Noto Sans TC',微軟正黑體, Arial ,sans-serif;
  letter-spacing: 1px;
  color: #000;
  font-size: 15px;
  line-height: 25px; }

img {
  max-width: 100%;
  height: auto; }

div:focus, a:focus {
  outline: none; }

.pc-hidden {
  display: hidden; }

.eng {
  font-family: 'Ultra', 'Noto Sans TC',"微軟正黑體","繁黑體",serif; }

.red {
  color: #c41616; }

.progress {
  background: #861624;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999999999;
  text-align: center;
  top: 0; }

.loadinglogo {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -145px 0 0 -145px; }
  .loadinglogo .loading-wrap {
    width: 206px;
    height: 206px;
    border: white 1px solid;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -103px 0 0 -103px;
    -webkit-animation: loading 3s 0s ease infinite alternate;
    animation: loading 3s 0s ease infinite alternate; }

body.active, html.active {
  width: 100%;
  height: 100%;
  overflow: hidden; }

#wrap.active {
  width: 100%;
  height: 100vh;
  overflow: hidden; }

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  20% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  25% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  45% {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg); }
  65% {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg); }
  70% {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg); }
  90% {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg); }
  100% {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg); } }

@keyframes loading {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  20% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  25% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  45% {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg); }
  65% {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg); }
  70% {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg); }
  90% {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg); }
  100% {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg); } }

#wrap {
  width: 100%;
  min-width: 1200px;
  height: auto;
  display: block;
  overflow: hidden;
  margin: auto; }

#index {
  width: 100%;
  height: 700px;
  display: block;
  overflow: hidden;
  position: relative;
  margin: auto;
  text-align: center;
  background: #dbd3d5;
  -webkit-perspective: 1000px;
  perspective: 1000px; }
  #index .mc-logo {
    position: absolute;
    top: 35px;
    left: 35px; }
  #index .kv {
    width: 100%;
    height: 700px;
    background: url(../images/bg1.jpg) center;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
    #index .kv.active {
      -webkit-animation: kv-mc 1s 0s linear;
      animation: kv-mc 1s 0s linear; }
  #index .kv-txt-wrap {
    width: 624px;
    height: 624px;
    position: absolute;
    background: url(../images/kv-txt-wrap.png);
    background-size: cover;
    left: 50%;
    top: 102px;
    -webkit-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
    -webkit-transform: rotateX(0deg) rotateY(0deg) scale(1) translateZ(1px);
    transform: rotateX(0deg) rotateY(0deg) scale(1) translateZ(1px);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; }
    #index .kv-txt-wrap .kv-txt1 {
      position: absolute;
      top: 130px;
      left: 65px; }
    #index .kv-txt-wrap h1 {
      font-size: 25px;
      font-weight: 400;
      position: absolute;
      top: 305px;
      left: 65px;
      text-align: center;
      color: #000;
      letter-spacing: 54px; }
    #index .kv-txt-wrap .line {
      width: 300px;
      height: 1px;
      background: black;
      position: absolute;
      top: 370px;
      left: 161px; }
    #index .kv-txt-wrap p {
      font-size: 15px;
      color: #000;
      width: 100%;
      position: absolute;
      top: 395px;
      line-height: 25px;
      left: 5px; }
    #index .kv-txt-wrap .index-scroll {
      width: 52px;
      height: 24px;
      position: absolute;
      top: 495px;
      left: 286px;
      background: url(../images/scroll.png);
      cursor: pointer; }
      #index .kv-txt-wrap .index-scroll img {
        position: absolute;
        bottom: -5px;
        left: 14px;
        -webkit-animation: indx-scroll 1s 0s ease infinite alternate;
        animation: indx-scroll 1s 0s ease infinite alternate; }
    #index .kv-txt-wrap.active {
      -webkit-animation: swing 2s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation: swing 2s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(-720deg) scale(1);
    transform: rotateX(0deg) rotateY(-720deg) scale(1);
    top: 102px;
    margin-left: 320px; }
  to {
    -webkit-transform: rotateX(0deg) rotateY(10deg) scale(1);
    transform: rotateX(0deg) rotateY(10deg) scale(1);
    top: 102px;
    margin-left: 0px; } }

@keyframes swing {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(-720deg) scale(1);
    transform: rotateX(0deg) rotateY(-720deg) scale(1);
    top: 102px;
    margin-left: 320px; }
  to {
    -webkit-transform: rotateX(0deg) rotateY(10deg) scale(1);
    transform: rotateX(0deg) rotateY(10deg) scale(1);
    top: 102px;
    margin-left: 0px; } }

@-webkit-keyframes kv-mc {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  to {
    ttransform: scale(1); } }

@keyframes kv-mc {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  to {
    ttransform: scale(1); } }

@-webkit-keyframes indx-scroll {
  0% {
    bottom: -5px; }
  50% {
    bottom: -10px; }
  100% {
    bottom: -5px; } }

@keyframes indx-scroll {
  0% {
    bottom: -5px; }
  50% {
    bottom: -10px; }
  100% {
    bottom: -5px; } }

#prod {
  width: 100%;
  height: 830px;
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;
  background: url(../images/wave.jpg) center; }
  #prod .wave {
    width: 1920px;
    height: 830px;
    position: absolute;
    left: 50%;
    margin-left: -960px; }
    #prod .wave canvas {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg); }
  #prod h2 {
    font-size: 25px;
    letter-spacing: 6px;
    font-weight: 400;
    position: absolute;
    top: 130px;
    width: 100%; }
    #prod h2::before {
      width: 466px;
      height: 49px;
      content: "";
      background: url(../images/wishingwell.png) no-repeat;
      position: absolute;
      top: -55px;
      -webkit-transform: translateX(-155px);
      -ms-transform: translateX(-155px);
      transform: translateX(-155px); }
  #prod p {
    position: absolute;
    top: 185px;
    width: 100%;
    text-align: center; }
  #prod .prod-silder {
    width: 1920px;
    height: 500px;
    position: absolute;
    top: 275px;
    left: 50%;
    margin-left: -960px;
    text-align: center; }
  #prod .wishprod {
    width: 361px;
    height: 416px;
    -webkit-transform: scale(0.77);
    -ms-transform: scale(0.77);
    transform: scale(0.77);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }
    #prod .wishprod::after {
      content: "";
      width: 37px;
      height: 42px;
      display: block;
      background: url(../images/prod_more.png);
      -webkit-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
      position: absolute;
      bottom: 20px;
      left: 162px; }
    #prod .wishprod:hover::after {
      background: url(../images/prod_more2.png);
      -webkit-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease; }
  #prod .slick-center.slick-center {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: relative; }
  #prod .slick-list {
    overflow: visible; }
  #prod .water {
    width: 347px;
    height: 168px;
    position: absolute;
    background: url(../images/water.png);
    bottom: 65px;
    left: 50%;
    margin-left: -183px;
    pointer-events: none; }

#blog {
  width: 100%;
  height: 870px;
  display: block;
  overflow: hidden;
  background: url(../images/bg2.jpg) center;
  text-align: center;
  padding-top: 80px;
  position: relative; }
  #blog h2 {
    font-size: 68px;
    line-height: 40px; }
    #blog h2 span {
      font-size: 23px;
      letter-spacing: 6px;
      font-weight: 400; }
  #blog p {
    margin: 30px; }
  #blog .blog-silder {
    width: 1200px;
    height: 493px;
    margin: 40px auto;
    text-align: center; }
    #blog .blog-silder .queenblog {
      text-align: center; }
    #blog .blog-silder .queenblog_wrap {
      width: 330px;
      height: 492px;
      margin: 0 35px;
      background: url(../images/blog-bg.png);
      position: relative; }
      #blog .blog-silder .queenblog_wrap:hover .qimg img {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-transition: all 1s cubic-bezier(0.66, 0.28, 0.46, 0.87);
        -o-transition: all 1s cubic-bezier(0.66, 0.28, 0.46, 0.87);
        transition: all 1s cubic-bezier(0.66, 0.28, 0.46, 0.87); }
      #blog .blog-silder .queenblog_wrap .qtxt {
        color: #800916;
        font-size: 22px;
        position: absolute;
        top: -18px;
        left: 140px; }
      #blog .blog-silder .queenblog_wrap .qname {
        font-size: 25px;
        position: absolute;
        top: 15px;
        width: 270px; }
      #blog .blog-silder .queenblog_wrap .qimg {
        width: 280px;
        height: 280px;
        position: absolute;
        top: 85px;
        left: 25px;
        overflow: hidden; }
        #blog .blog-silder .queenblog_wrap .qimg img {
          -webkit-transition: all 0.4s ease;
          -o-transition: all 0.4s ease;
          transition: all 0.4s ease; }
      #blog .blog-silder .queenblog_wrap .qdcp {
        font-size: 15px;
        letter-spacing: 0;
        position: absolute;
        top: 350px;
        width: 270px; }
      #blog .blog-silder .queenblog_wrap a {
        width: 145px;
        height: 44px;
        display: block;
        background: url(../images/b-more.jpg);
        position: absolute;
        bottom: 0;
        left: 93px; }
        #blog .blog-silder .queenblog_wrap a::after {
          content: "";
          width: 17px;
          height: 9px;
          display: block;
          background: url(../images/more-arw.png);
          position: absolute;
          top: 17px;
          left: 97px; }
        #blog .blog-silder .queenblog_wrap a:hover::after {
          -webkit-animation: more-arw 1s 0s ease infinite alternate;
          animation: more-arw 1s 0s ease infinite alternate; }
  #blog .nextbtn {
    width: 32px;
    position: absolute;
    top: 500px;
    left: 50%;
    margin-left: 600px;
    cursor: pointer; }
  #blog .prevbtn {
    width: 32px;
    position: absolute;
    top: 500px;
    left: 50%;
    margin-left: -630px;
    cursor: pointer; }

@-webkit-keyframes more-arw {
  0% {
    left: 97px; }
  50% {
    left: 102px; }
  100% {
    left: 97px; } }

@keyframes more-arw {
  0% {
    left: 97px; }
  50% {
    left: 102px; }
  100% {
    left: 97px; } }

#license {
  width: 100%;
  height: 920px;
  display: block;
  position: relative;
  background: url(../images/bg3.jpg) center; }
  #license .lincese-photo {
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -534px; }
  #license h2 {
    font-size: 25px;
    letter-spacing: 6px;
    font-weight: 400;
    position: absolute;
    top: 110px;
    width: 620px;
    left: 50%;
    text-align: center;
    margin-left: -310px; }
    #license h2::before {
      width: 494px;
      height: 58px;
      content: "";
      background: url(../images/queen-tit.png) no-repeat;
      position: absolute;
      top: -55px;
      -webkit-transform: translateX(-155px);
      -ms-transform: translateX(-155px);
      transform: translateX(-155px); }
  #license .license-p {
    width: 100%;
    position: absolute;
    top: 155px;
    text-align: center;
    letter-spacing: 2px; }
  #license .go_btn {
    width: 235px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    color: white;
    text-align: center;
    position: absolute;
    top: 230px;
    left: 50%;
    margin-left: -250px;
    background: -webkit-gradient(linear, left bottom, left top, from(#820C19), to(#9A3B46));
    background: -webkit-linear-gradient(bottom, #820C19 0%, #9A3B46 100%);
    background: -o-linear-gradient(bottom, #820C19 0%, #9A3B46 100%);
    background: linear-gradient(0deg, #820C19 0%, #9A3B46 100%);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer; }
    #license .go_btn:hover {
      background: -webkit-gradient(linear, left bottom, left top, from(#961d2b), to(#c13544));
      background: -webkit-linear-gradient(bottom, #961d2b 0%, #c13544 100%);
      background: -o-linear-gradient(bottom, #961d2b 0%, #c13544 100%);
      background: linear-gradient(0deg, #961d2b 0%, #c13544 100%); }
  #license .award-btn {
    width: 235px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    color: white;
    text-align: center;
    position: absolute;
    top: 230px;
    left: 50%;
    margin-left: -5px;
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(#999));
    background: -webkit-linear-gradient(bottom, #000 0%, #999 100%);
    background: -o-linear-gradient(bottom, #000 0%, #999 100%);
    background: linear-gradient(0deg, #000 0%, #999 100%);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer; }
    #license .award-btn:hover {
      background: -webkit-gradient(linear, left bottom, left top, from(#5b5656), to(#454545));
      background: -webkit-linear-gradient(bottom, #5b5656 0%, #454545 100%);
      background: -o-linear-gradient(bottom, #5b5656 0%, #454545 100%);
      background: linear-gradient(0deg, #5b5656 0%, #454545 100%); }
  #license .gift-wrap {
    width: 620px;
    height: 570px;
    position: absolute;
    top: 315px;
    left: 50%;
    margin-left: -310px; }
    #license .gift-wrap .lincese-gift {
      position: absolute;
      top: 0px; }
    #license .gift-wrap .lincese-gift2 {
      position: absolute;
      height: 105px;
      bottom: 0px; }
      #license .gift-wrap .lincese-gift2::after {
        width: 105px;
        height: 105px;
        content: "";
        background: url(../images/lincese-gift2-icon.png);
        position: absolute;
        top: -50px;
        left: -55px;
        -webkit-animation: lincese-gift2-icon 3s 0s linear infinite;
        animation: lincese-gift2-icon 3s 0s linear infinite; }
      #license .gift-wrap .lincese-gift2 .lincese-gift2-icont {
        position: absolute;
        top: -23px;
        left: -30px;
        z-index: 10; }
    #license .gift-wrap .item {
      width: 220px;
      height: 105px;
      background: #c3bdbd;
      position: absolute;
      bottom: 0px;
      right: 0px;
      font-size: 18px;
      text-align: center;
      line-height: 105px;
      font-weight: bold;
      cursor: pointer; }
      #license .gift-wrap .item:hover {
        background: #a5a0a0; }
      #license .gift-wrap .item .item-icon {
        margin-right: 5px;
        position: relative;
        top: 3px; }

.item-pop {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  z-index: 50;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  .item-pop.active {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }
  .item-pop .pop-wrap {
    width: 1000px;
    height: 600px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -500px;
    background: url(../images/item-pop.jpg); }
  .item-pop .close-pop {
    width: 80px;
    height: 80px;
    background: black;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 500px;
    cursor: pointer; }
    .item-pop .close-pop img {
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg); }
    .item-pop .close-pop:hover img {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease; }

.bodyover {
  width: 100%;
  height: 100%;
  overflow: hidden; }

.license-pop {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  z-index: 50;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  .license-pop.active {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }
  .license-pop .pop-wrap {
    width: 1000px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -500px;
    background: url(../images/pop-bg.jpg); }
  .license-pop .close-pop {
    width: 80px;
    height: 80px;
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 500px;
    cursor: pointer; }
    .license-pop .close-pop img {
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg); }
    .license-pop .close-pop:hover img {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease; }

/***照片合成***/
.step1, .step2, .step3 {
  position: absolute;
  width: 1000px;
  height: 600px;
  display: none; }

.step1-tit {
  position: absolute;
  top: 30px;
  left: 325px; }

.step2-tit {
  position: absolute;
  top: 120px;
  left: 305px; }

#picShow {
  width: 800px;
  height: 420px;
  position: absolute;
  left: 90px;
  top: 80px;
  background: url(../images/card-bg.jpg); }
  #picShow .picphoto {
    position: absolute;
    width: 350px;
    height: 350px;
    top: 35px;
    left: 33px; }
  #picShow .pictxt1 {
    width: 300px;
    position: absolute;
    top: 150px;
    left: 440px;
    text-align: center;
    font-size: 35px;
    font-weight: bold; }
  #picShow .picText1 {
    background: none;
    border: none;
    border-bottom: #000 1px solid;
    height: 35px;
    font-size: 35px;
    width: 70px;
    font-family: 'Noto Sans TC',微軟正黑體, Arial ,sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 0;
    line-height: 35px; }
    #picShow .picText1:valid {
      border: none; }
  #picShow .picText2 {
    width: 220px;
    height: 32px;
    position: absolute;
    top: 200px;
    left: 475px;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    border: none;
    font-family: 'Noto Sans TC',微軟正黑體, Arial ,sans-serif;
    outline: none;
    resize: none;
    border-bottom: 1px solid #000;
    background: transparent;
    letter-spacing: 2px; }
  #picShow .picText3 {
    width: 220px;
    height: 32px;
    position: absolute;
    top: 240px;
    left: 475px;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    border: none;
    font-family: 'Noto Sans TC',微軟正黑體, Arial ,sans-serif;
    outline: none;
    resize: none;
    border-bottom: 1px solid #000;
    background: transparent;
    letter-spacing: 2px; }

#imageInput {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer; }

#uploadselectbtn {
  width: 236px;
  height: 50px;
  position: absolute;
  bottom: 30px;
  left: 250px;
  background: url(../images/upload.jpg); }

.step1-next {
  width: 236px;
  height: 50px;
  position: absolute;
  bottom: 30px;
  cursor: pointer;
  right: 250px; }

.form-wrap {
  width: 500px;
  height: auto;
  display: block;
  overflow: hidden;
  position: absolute;
  top: 180px;
  left: 250px;
  text-align: center; }
  .form-wrap ul li {
    width: 500px;
    height: 50px;
    margin-bottom: 15px; }
    .form-wrap ul li input {
      width: 500px;
      height: 50px;
      font-size: 16px;
      font-family: 'Noto Sans TC',微軟正黑體, Arial ,sans-serif;
      padding: 15px;
      line-height: 20px; }

input[type="checkbox"] {
  display: none; }
  input[type="checkbox"] + label {
    display: inline-block;
    width: 200px;
    margin: auto;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
    cursor: pointer;
    position: relative; }
  input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #fff;
    margin-right: 10px;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px #000 solid;
    -webkit-transition: background ease-in .5s;
    -o-transition: background ease-in .5s;
    transition: background ease-in .5s; }
  input[type="checkbox"] + label::after {
    content: "";
    display: inline-block;
    top: 4px;
    left: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 10px;
    height: 15px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-style: solid;
    border-color: #fff;
    border-top: 0;
    border-left: 0;
    position: absolute; }
  input[type="checkbox"]:checked + label::after {
    border-color: #000; }

.enter {
  width: 236px;
  height: 50px;
  overflow: hidden;
  margin: 30px auto;
  text-indent: -9999px;
  cursor: pointer;
  background: url(../images/enter1.jpg);
  border: none;
  outline: none; }

#baseimg {
  width: 640px;
  height: 336px;
  position: absolute;
  left: 180px;
  top: 80px; }

.sharefb {
  width: 236px;
  height: 50px;
  position: absolute;
  bottom: 80px;
  cursor: pointer;
  right: 383px; }

@-webkit-keyframes lincese-gift2-icon {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); } }

@keyframes lincese-gift2-icon {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); } }

footer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: block;
  overflow: hidden;
  color: #000;
  font-size: 15px;
  text-align: center;
  background: white;
  font-family: Arial;
  font-weight: bold;
  letter-spacing: 0; }

.pc-hidden {
  display: none; }

.gogo {
  position: fixed;
  top: 50%;
  right: 0;
  width: 96px;
  height: 248px;
  margin-top: -124px;
  background: url(../images/gogo.png);
  z-index: 10;
  cursor: pointer; }
  .gogo .go {
    position: fixed;
    top: 50%;
    right: 7px;
    margin-top: 73px;
    -webkit-animation: gogo3 1s 0s linear infinite;
    animation: gogo3 1s 0s linear infinite; }

.warm {
  width: 100%;
  height: 85px;
  text-align: center;
  background: #141414; }

#award {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  #award.active {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }
  #award .close-award {
    position: fixed;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 110; }
  #award .award-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: block;
    overflow: auto; }
    #award .award-inner img {
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }

@media screen and (max-width: 640px) {
  #wrap.active {
    width: 100%;
    height: 0;
    overflow: hidden; }
  .warm {
    height: 75px; }
    .warm img {
      height: 75px; }
  .lincese-photo {
    display: none; }
  .gogo-m {
    position: absolute;
    top: 670px;
    right: 30px;
    width: 259px;
    height: 208px;
    background: url(../images/gogo-m.png);
    z-index: 10;
    -webkit-animation: gogo 1s 0s linear infinite;
    animation: gogo 1s 0s linear infinite; }
    .gogo-m.fixed {
      position: fixed;
      bottom: -10px;
      right: -20px;
      top: initial;
      -webkit-animation: gogo2 1s 0s linear infinite;
      animation: gogo2 1s 0s linear infinite; }
    .gogo-m .go {
      position: absolute;
      top: 115px;
      right: 50px; }
  .hidden-m {
    display: none; }
  .pc-hidden {
    display: block; }
  body {
    font-size: 20px;
    line-height: 30px; }
  #wrap {
    width: 100%;
    min-width: 640px;
    height: auto;
    display: block;
    overflow: hidden;
    margin: auto; }
  #index {
    width: 100%;
    height: 1100px; }
    #index .kv-txt-wrap {
      right: 8px;
      top: -20px;
      left: initial;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; }
      #index .kv-txt-wrap.active {
        -webkit-animation: swing-m 2s 0s ease;
        animation: swing-m 2s 0s ease; }
      #index .kv-txt-wrap p {
        font-size: 20px;
        line-height: 30px;
        top: 405px; }
      #index .kv-txt-wrap .index-scroll {
        top: 540px; }
    #index .kv {
      width: 100%;
      height: 1100px;
      background: url(../images/bg1-m.jpg) center; }
  #prod .prod-silder {
    width: 1280px;
    margin-left: -640px; }
    #prod .prod-silder .wishprod img {
      margin: auto; }
    #prod .prod-silder .wishprod::after {
      bottom: -10px;
      left: 178px; }
  #prod .water {
    bottom: 15px;
    margin-left: -173px; }
  #blog {
    width: 640px;
    height: 1100px;
    background: url(../images/bg2-m.jpg) center; }
    #blog .nextbtn {
      width: 32px;
      position: absolute;
      top: 610px;
      left: 50%;
      margin-left: 270px;
      cursor: pointer; }
    #blog .prevbtn {
      width: 32px;
      position: absolute;
      top: 610px;
      left: 50%;
      margin-left: -300px;
      cursor: pointer; }
    #blog .blog-silder {
      width: 640px; }
      #blog .blog-silder .queenblog_wrap {
        width: 480px;
        height: 716px;
        background: url(../images/blog-bg-m.png);
        margin: 0 auto; }
        #blog .blog-silder .queenblog_wrap .qimg {
          width: 410px;
          height: 410px;
          top: 125px;
          left: 35px; }
        #blog .blog-silder .queenblog_wrap .qtxt {
          font-size: 32px;
          top: -8px;
          left: 225px; }
        #blog .blog-silder .queenblog_wrap .qname {
          font-size: 36px;
          position: absolute;
          top: 40px;
          width: 420px; }
        #blog .blog-silder .queenblog_wrap .qdcp {
          font-size: 20px;
          letter-spacing: 0;
          position: absolute;
          top: 530px;
          width: 420px; }
        #blog .blog-silder .queenblog_wrap a {
          width: 200px;
          height: 60px;
          display: block;
          background: url(../images/b-more-m.jpg);
          position: absolute;
          bottom: 0;
          left: 140px; }
          #blog .blog-silder .queenblog_wrap a::after {
            content: "";
            width: 24px;
            height: 12px;
            display: block;
            background: url(../images/more-arw-m.png);
            position: absolute;
            top: 23px;
            left: 140px; }
          #blog .blog-silder .queenblog_wrap a:hover::after {
            -webkit-animation: more-arw-m 1s 0s ease infinite alternate;
            animation: more-arw-m 1s 0s ease infinite alternate; }
  #license {
    width: 100%;
    height: 1050px;
    display: block;
    position: relative;
    background: #efecec; }
    #license h2 {
      width: 640px;
      left: 0;
      margin-left: 0;
      top: 120px; }
    #license .license-p {
      width: 640px;
      position: absolute;
      top: 180px;
      left: 0;
      margin-left: -0; }
    #license .go_btn {
      width: 250px;
      height: 60px;
      font-size: 25x;
      line-height: 60px;
      top: 330px;
      left: 50%;
      margin-left: -255px; }
    #license .award-btn {
      width: 250px;
      height: 60px;
      font-size: 25x;
      line-height: 60px;
      top: 330px;
      left: 50%;
      margin-left: 5px; }
    #license .gift-wrap {
      width: 620px;
      height: 570px;
      position: absolute;
      top: 425px;
      left: 10px;
      margin-left: 0; }
      #license .gift-wrap .lincese-gift2 {
        position: absolute;
        height: 105px;
        bottom: 0px; }
        #license .gift-wrap .lincese-gift2::after {
          top: -50px;
          left: -35px; }
        #license .gift-wrap .lincese-gift2 .lincese-gift2-icont {
          top: -23px;
          left: -10px; }
  .item-pop .pop-wrap {
    width: 640px;
    height: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../images/item-pop-m.jpg); }
  .item-pop .close-pop {
    width: 80px;
    height: 80px;
    top: 0;
    left: initial;
    right: 0;
    margin: 0; }
  .license-pop .pop-wrap {
    width: 640px;
    height: 620px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../images/pop-bg-m.jpg); }
  .license-pop .close-pop {
    width: 80px;
    height: 80px;
    top: 0;
    left: initial;
    right: 0;
    margin: 0; }
  .step1, .step2, .step3 {
    width: 640px;
    height: 620px; }
  .step1-tit {
    top: 50px;
    left: 150px; }
  .step2-tit {
    top: 80px;
    left: 123px; }
  #picShow {
    -webkit-transform: scale(0.8) translateX(-100px);
    -ms-transform: scale(0.8) translateX(-100px);
    transform: scale(0.8) translateX(-100px);
    left: 0; }
  #uploadselectbtn {
    bottom: 80px;
    left: 75px; }
  .step1-next {
    bottom: 80px;
    right: 75px; }
  .form-wrap {
    left: 70px;
    top: 150px; }
    .form-wrap ul li {
      height: 75px; }
      .form-wrap ul li input {
        height: 75px;
        font-size: 25px;
        line-height: 45px; }
  input[type="checkbox"] + label {
    width: 100%; }
  .enter {
    margin: 50px auto; }
  #baseimg {
    left: 0; }
  .sharefb {
    bottom: 80px;
    left: 202px; } }

@-webkit-keyframes gogo {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes gogo {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes gogo2 {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7); } }

@keyframes gogo2 {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7); } }

@-webkit-keyframes gogo3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes gogo3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes more-arw-m {
  0% {
    left: 140px; }
  50% {
    left: 150px; }
  100% {
    left: 140px; } }

@keyframes more-arw-m {
  0% {
    left: 140px; }
  50% {
    left: 150px; }
  100% {
    left: 140px; } }

@-webkit-keyframes swing-m {
  0% {
    top: -50px; }
  to {
    top: -20px; } }

@keyframes swing-m {
  0% {
    top: -50px; }
  to {
    top: -20px; } }

/*圖片等比例縮放*/
.container {
  max-width: 800px;
  width: 100%; }

.imginner {
  position: relative;
  padding-top: 56%;
  padding-top: 75%; }
  .imginner .img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }