/*@mixin img-replace($img, $w: image-width($img), $h: image-height($img), $disp: block) {
    background: image-url($img) no-repeat;
    width: $w;
    height: $h;
    display: $disp;
}*/
@-webkit-keyframes loading {
  0% {
    width: 50%;
    opacity: 1;
    left: 25%;
  }
  33% {
    width: 0%;
    opacity: 1;
    left: 75%;
  }
  66% {
    width: 0%;
    opacity: 1;
    left: 25%;
  }
  100% {
    width: 50%;
    opacity: 1;
    left: 25%;
  }
}
@keyframes loading {
  0% {
    width: 50%;
    opacity: 1;
    left: 25%;
  }
  33% {
    width: 0%;
    opacity: 1;
    left: 75%;
  }
  66% {
    width: 0%;
    opacity: 1;
    left: 25%;
  }
  100% {
    width: 50%;
    opacity: 1;
    left: 25%;
  }
}
@-webkit-keyframes actmarkaniHover {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
    opacity: 0;
  }
}
@keyframes actmarkaniHover {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
    opacity: 0;
  }
}
@-webkit-keyframes ctaani {
  0% {
    left: 0;
  }
  50% {
    left: 5px;
  }
  100% {
    left: 0px;
  }
}
@keyframes ctaani {
  0% {
    left: 0;
  }
  50% {
    left: 5px;
  }
  100% {
    left: 0px;
  }
}
/*mixin-set*/
/*style set*/
html, body {
  box-sizing: border-box;
  letter-spacing: 1px;
  -webkit-overflow-scrolling: touch;
  font-size: 16px;
}
html a, body a {
  box-sizing: border-box;
  text-decoration: none;
  display: block;
}

.hide {
  display: none !important;
}

.alcenter, .view4 .jbox .jbox--item, .view4 .jbox, .view4--sub, .view4 .tline, .view4--title, .view3--pic, .view3--womanbox .w-item, .view3--womanbox, .view3 .ani-btn, .view3 .tline, .view3--title, .view2--pic2--box, .view2--pic, .view2--elsa, .view2 .ani-btn, .view2 .tline, .view2--title, .view1--pic, .view1--icon, .view1--j2--box, .view1--j1--box, .view1--dancer--box, .view1 .ani-btn, .view1 .tline, .view1--title, .mobindex .mobindexpopup .index-cta, .mobindex .mobindexpopup .mobindex--subtitle, .mobindex--j1, .mobindex--j0, .mobindex--title, .loading .loading--img, .popupvideo video, .popup img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.alhcenta, .view4 .goyt-btn, .view3 .next-btn, .view2 .next-btn, .view1 .next-btn, .tline, .ani-btn {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.fit, .view4 .jbox .jbox--item.jbox12--box .j12, .view4 .jbox .jbox--item.jbox10--box .j10, .view4 .jbox .jbox--item.jbox9--box .j9, .view4 .jbox .jbox--item.jbox8--box .j8, .view4 .jbox .jbox--item.jbox7--box .j7, .view4 .jbox .jbox--item.jbox6--box .j6, .view4 .jbox .jbox--item.jbox5--box .j5, .view4 .jbox .jbox--item.jbox4--box .j4, .view4 .jbox .jbox--item.jbox3--box .j3, .view4 .jbox .jbox--item.jbox2--box .j2, .view4 .jbox .jbox--item.jbox1--box .j1, .view4 .goyt-btn img, .view4--sub, .view4--title, .view3--pic, .view3--womanbox .w-item, .view3--title, .view2--pic2--box .view2--pic2, .view2--pic, .view2--elsa img, .view2--title, .view1--pic, .view1--icon, .view1--j2--box .view1--j2, .view1--j1--box .view1--j1, .view1--dancer--box .view1--dancer, .view1--title, .mobindex .mobindexpopup .index-cta, .mobindex .mobindexpopup .mobindex--subtitle, .mobindex--j1, .mobindex--j0, .mobindex--title, .qrbox--txt2 img, .qrbox--txt1 img, .qrbox--qr img, .dtp--j img, .dtp--title img, .dtp--mainimg img, .bling, .popup img, .next-btn img, .ani-btn {
  width: 100%;
  display: block;
}

/*layout-set*/
body {
  overflow: hidden;
}

loading {
  position: absolute;
}

.ab {
  position: absolute;
}

.view {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.ani-btn {
  width: 36.8%;
}

.tline {
  width: 1px;
  height: 4%;
  background: #000;
}

.next-btn {
  display: block;
  width: 33.33%;
}
.popup {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  display: none;
}
.popup img {
  width: 85.2%;
}

.popimg {
  opacity: 0;
}

.bling {
  position: absolute;
  width: 60px;
  position: absolute;
  top: 0%;
  left: 0%;
  opacity: 0;
}

.popupvideo {
  opacity: 0;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.popupvideo .close {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 20px;
  right: 20px;
}
.popupvideo .close span {
  position: absolute;
  display: block;
  width: 1px;
  height: 50px;
  background: #fff;
}
.popupvideo .close span:nth-child(1) {
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.popupvideo .close span:nth-child(2) {
  -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
}

/*dtp*/
.device-uncheck {
  width: 100%;
  height: 100vh;
  position: relative;
}

.dtp {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("../images/index-d-bg.jpg") center center no-repeat;
  background-size: cover;
}
.dtp--mainimg {
  width: 51%;
  min-width: 900px;
  top: 63%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 10%;
}
.dtp--title {
  width: 40%;
  min-width: 700px;
  top: 23%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 16%;
}
.dtp--j {
  width: 10.5%;
  top: 78.5%;
  right: 7.3%;
}
.qrbox {
  width: 42%;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  /*background:rgba(0,0,0,.3);*/
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0%;
}
.qrbox--qr {
  width: 31%;
  min-width: 230px;
  display: block;
  margin: 0 auto;
  background: #fff;
  position: relative;
  margin-bottom: 5%;
}
.qrbox--txt1 {
  width: 35%;
  min-width: 260px;
  display: block;
  margin: 0 auto;
  position: relative;
  margin-bottom: 5%;
}
.qrbox--txt2 {
  width: 45%;
  min-width: 335px;
  display: block;
  margin: 0 auto;
  position: relative;
}
/*mob index*/
.loading {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: #000;
}
.loading .loading--img {
  top: 40%;
}
.loading .loading--img img {
  width: 50%;
  display: block;
  margin: 0 auto;
}
.loading .loading--img:after {
  content: "";
  display: block;
  width: 50%;
  height: 3px;
  background: #fff;
  position: absolute;
  bottom: -20px;
  -webkit-animation: loading 2s normal 0s infinite ease-in-out;
  animation: loading 2s normal 0s infinite ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.mobindex--bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
}
.mobindex--title {
  width: 70%;
  top: 20%;
  opacity: 0;
}
.mobindex--j0 {
  width: 25%;
  left: 82%;
  top: 88%;
  opacity: 0;
}
.mobindex--j1 {
  width: 20%;
  left: 58%;
  top: 98%;
  opacity: 0;
}
.mobindex .mobindexpopup {
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: 0;
}
.mobindex .mobindexpopup .mobindex--subtitle {
  width: 69%;
  opacity: 0;
  top: 35%;
}
.mobindex .mobindexpopup .index-cta {
  width: 25%;
  opacity: 0;
  top: 70%;
}

/*view1*/
.view1 {
  display: none;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}
.view1--bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
}
.view1--title {
  width: 71.6%;
  top: 10%;
}
.view1 .tline {
  top: 16%;
}
.view1 .ani-btn {
  top: 21%;
}
.view1--dancer--box {
  width: 70%;
  height: 122.6vw;
  top: 60%;
  left: 45%;
}
.view1--dancer--box .view1--dancer {
  position: absolute;
  top: 0;
  left: 0;
}
.view1--dancer--box .bling1 {
  top: 55%;
  left: 48%;
}
.view1--dancer--box .bling2 {
  top: 65%;
  left: 48%;
}
.view1--dancer--box .bling3 {
  top: 61%;
  left: 54%;
}
.view1--j1--box {
  width: 33%;
  height: 70.2vw;
  top: 45%;
  left: 25%;
  overflow: hidden;
}
.view1--j1--box .view1--j1 {
  height: 70.2vw;
  position: absolute;
  top: 0;
  left: 0;
}
.view1--j1--box .bling1 {
  top: 67%;
  left: 11%;
}
.view1--j2--box {
  width: 33%;
  height: 83.54vw;
  top: 55%;
  left: 75%;
}
.view1--j2--box .view1--j2 {
  position: absolute;
  top: 0;
  left: 0;
}
.view1--j2--box .bling1 {
  top: 80%;
  left: 42%;
}
.view1--j2--box .bling2 {
  top: 81%;
  left: 64%;
}
.view1--icon.icon1 {
  width: 3.6%;
  top: 45%;
  left: 8%;
}
.view1--icon.icon2 {
  width: 9.7%;
  top: 84%;
  left: 10%;
}
.view1--icon.icon3 {
  width: 9.7%;
  top: 91%;
  left: 23%;
}
.view1--icon.icon4 {
  width: 7.4%;
  top: 83%;
  left: 71%;
}
.view1--icon.icon5 {
  width: 4%;
  top: 63%;
  left: 98%;
}
.view1--icon.icon6 {
  width: 5.6%;
  top: 38%;
  left: 76%;
}
.view1--pic {
  /*&.pic1{
  	width:49.5%;
  	top:28%;
  	left:-5%;
  }
  &.pic2{
  	width:49.5%;
  	top:71%;
  	left:-5%;
  }
  &.pic3{
  	width:46.5%;
  	top:82%;
  	left:104%;
  }
  &.pic4{
  	width:53.5%;
  	top:32%;
  	left:104%;
  }*/
}
.view1--pic.pic1 {
  width: 46.5%;
  top: 92%;
  left: 85%;
}
.view1--pic.pic2 {
  width: 53.5%;
  top: 32%;
  left: 90%;
}
.view1--pic.pic3 {
  width: 49.5%;
  top: 23%;
  left: 9%;
}
.view1--pic.pic4 {
  width: 49.5%;
  top: 78%;
  left: 16%;
}
.view1 .next-btn {
  bottom: 8%;
}

/*view2*/
.view2 {
  display: none;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}
.view2--bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.view2--title {
  width: 71.6%;
  top: 10%;
}
.view2 .tline {
  top: 16%;
}
.view2 .ani-btn {
  top: 21%;
}
.view2--elsa {
  width: 90%;
  top: 50%;
}
.view2--elsa--mask {
  width: 34.9%;
  height: 11vw;
  background-size: cover;
  -webkit-animation: eyebrushani 3s infinite;
          animation: eyebrushani 3s infinite;
  -webkit-mask: url(../images/view2-elsa-eyebrush.png) no-repeat center center;
  mask: url(../images/view2-elsa-eyebrush.png) no-repeat center center;
  position: absolute;
  top: 29.5%;
  right: 40%;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}
.view2--pic.pic1 {
  width: 49.6%;
  top: 70%;
  left: 25%;
}
@media (max-width: 414px) {
  .view2--pic.pic1 {
    width: 37%;
  }
}
.view2--pic2--box {
  height: 46.4vw;
  width: 46.4%;
  top: 80%;
  left: 55%;
}
.view2--pic2--box .view2--pic2 {
  position: absolute;
  top: 0;
  left: 0;
}
.view2--pic2--box .bling1 {
  top: 30%;
  left: -10%;
}
.view2--pic2--box .bling2 {
  top: 67%;
  left: 24%;
}
.view2--pic2--box .bling3 {
  top: 45%;
  left: 36%;
}
.view2--pic2--box .bling4 {
  top: 57%;
  left: 62%;
}
@media (max-width: 414px) {
  .view2--pic2--box {
    width: 35%;
    height: 35vw;
    top: 73%;
  }
}
.view2 .next-btn {
  bottom: 8%;
}

@-webkit-keyframes eyebrushani {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  10% {
    background-color: rgba(239, 30, 222, 0.8);
  }
  45% {
    background-color: rgba(16, 233, 108, 0.8);
  }
  90% {
    background-color: rgba(233, 98, 16, 0.8);
  }
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
}

@keyframes eyebrushani {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  10% {
    background-color: rgba(239, 30, 222, 0.8);
  }
  45% {
    background-color: rgba(16, 233, 108, 0.8);
  }
  90% {
    background-color: rgba(233, 98, 16, 0.8);
  }
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
}
/*view3*/
.view3 {
  display: none;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}
.view3--bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
@media (max-width: 414px) {
  .view3--bg {
    -o-object-position: 50% 90%;
       object-position: 50% 90%;
  }
}
.view3--title {
  width: 71.6%;
  top: 10%;
}
.view3 .tline {
  top: 16%;
}
.view3 .ani-btn {
  top: 21%;
}
.view3--womanbox {
  width: 100%;
  height: 100vh;
}
.view3--womanbox .w-item {
  width: 30%;
}
.view3--womanbox .w-item.w1 {
  width: 53.6%;
  top: 72%;
  left: 62%;
}
.view3--womanbox .w-item.w2 {
  width: 35.8%;
  top: 69%;
  left: 35%;
}
.view3--womanbox .w-item.w3 {
  width: 44.7%;
  top: 56%;
  left: 63%;
}
.view3--womanbox .w-item.w4 {
  width: 35.5%;
  top: 47%;
  left: 49%;
}
.view3--womanbox .w-item.w5 {
  width: 30.8%;
  top: 43%;
  left: 40%;
}
@media (max-width: 414px) {
  .view3--womanbox {
    width: 80%;
  }
}
.view3--pic.pic1 {
  width: 49.6%;
  top: 45%;
  left: 2%;
}
@media (max-width: 414px) {
  .view3--pic.pic1 {
    width: 37%;
  }
}
.view3--pic.pic2 {
  width: 46.4%;
  top: 89%;
  left: 84%;
}
@media (max-width: 414px) {
  .view3--pic.pic2 {
    width: 35%;
    top: 80%;
  }
}
.view3 .next-btn {
  bottom: 8%;
}

/*view4*/
.view4 {
  display: none;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}
.view4--bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
@media (max-width: 414px) {
  .view4--bg {
    -o-object-position: 50% 80%;
       object-position: 50% 80%;
  }
}
.view4--title {
  width: 52.4%;
  top: 33%;
}
.view4 .tline {
  top: 38%;
}
.view4--sub {
  width: 78.4%;
  top: 48.5%;
}
.view4 .goyt-btn {
  width: 28%;
  top: 64%;
}
@media (max-width: 414px) {
  .view4--title {
    top: 34%;
  }
  .view4 .tline {
    top: 41%;
  }
  .view4--sub {
    top: 54%;
  }
  .view4 .goyt-btn {
    top: 70%;
  }
}
.view4 .jbox {
  width: 100%;
  height: 100vh;
}
.view4 .jbox .jbox--item.jbox1--box {
  height: 12.9vw;
  width: 16.1%;
  top: 13%;
  left: 15%;
}
.view4 .jbox .jbox--item.jbox1--box .bling1 {
  top: -31%;
  left: 21%;
}
.view4 .jbox .jbox--item.jbox2--box {
  width: 13.2%;
  height: 11.3vw;
  top: 28%;
  left: 85%;
}
.view4 .jbox .jbox--item.jbox2--box .bling1 {
  top: -4%;
  left: -25%;
}
.view4 .jbox .jbox--item.jbox2--box .bling2 {
  top: 6%;
  left: 34%;
}
.view4 .jbox .jbox--item.jbox3--box {
  width: 32.3%;
  height: 41.78vw;
  top: 73%;
  left: 15%;
}
.view4 .jbox .jbox--item.jbox3--box .bling1 {
  top: 43%;
  left: 68%;
}
.view4 .jbox .jbox--item.jbox4--box {
  width: 14.8%;
  height: 31.3vw;
  top: 7%;
  left: 80%;
}
.view4 .jbox .jbox--item.jbox4--box .bling1 {
  top: 50%;
  left: 12%;
}
.view4 .jbox .jbox--item.jbox4--box .bling2 {
  top: 60%;
  left: -33%;
}
.view4 .jbox .jbox--item.jbox4--box .bling3 {
  top: 67%;
  left: 38%;
}
.view4 .jbox .jbox--item.jbox5--box {
  width: 52%;
  height: 106.5vw;
  top: 0%;
  left: 49%;
}
.view4 .jbox .jbox--item.jbox5--box .bling1 {
  top: 59.5%;
  left: 18%;
}
.view4 .jbox .jbox--item.jbox5--box .bling2 {
  top: 77.5%;
  left: 36%;
}
.view4 .jbox .jbox--item.jbox5--box .bling3 {
  top: 89.5%;
  left: 37%;
}
.view4 .jbox .jbox--item.jbox5--box .bling4 {
  top: 85.5%;
  left: 47%;
}
.view4 .jbox .jbox--item.jbox6--box {
  width: 11.7%;
  height: 12.11vw;
  top: 65%;
  left: 91%;
}
.view4 .jbox .jbox--item.jbox6--box .bling1 {
  top: 37%;
  left: 8%;
}
.view4 .jbox .jbox--item.jbox7--box {
  width: 22.5%;
  height: 18.9vw;
  top: 92%;
  left: 25%;
}
.view4 .jbox .jbox--item.jbox7--box .bling1 {
  top: 16%;
  left: -8%;
}
.view4 .jbox .jbox--item.jbox7--box .bling2 {
  top: 40%;
  left: 62%;
}
.view4 .jbox .jbox--item.jbox8--box {
  width: 9.5%;
  height: 9.5vw;
  top: 28%;
  left: 21%;
}
.view4 .jbox .jbox--item.jbox8--box .bling1 {
  top: -30%;
  left: 8%;
}
.view4 .jbox .jbox--item.jbox9--box {
  width: 26%;
  height: 21.87vw;
  top: 82%;
  left: 64%;
}
.view4 .jbox .jbox--item.jbox9--box .bling1 {
  top: -18%;
  left: 66%;
}
.view4 .jbox .jbox--item.jbox10--box {
  width: 27.5%;
  height: 33.9vw;
  top: 90%;
  left: 80%;
}
.view4 .jbox .jbox--item.jbox10--box .bling1 {
  top: 11%;
  left: 8%;
  display: none;
}
.view4 .jbox .jbox--item.jbox12--box {
  width: 26%;
  height: 31.6vw;
  top: 94%;
  left: 62%;
}
.view4 .jbox .jbox--item.jbox12--box .bling1 {
  top: 11%;
  left: 8%;
  display: none;
}
@media (max-width: 414px) {
  .view4 .jbox .jbox--item.j1 {
    width: 11%;
    top: 13%;
    left: 15%;
  }
  .view4 .jbox .jbox--item.j2 {
    width: 9%;
    top: 28%;
    left: 85%;
  }
  .view4 .jbox .jbox--item.j3 {
    width: 22%;
    top: 73%;
    left: 11%;
  }
  .view4 .jbox .jbox--item.j4 {
    width: 10%;
    top: 5%;
    left: 80%;
  }
  .view4 .jbox .jbox--item.j5 {
    width: 52%;
    top: -5%;
    left: 49%;
  }
  .view4 .jbox .jbox--item.j6 {
    width: 7%;
    top: 65%;
    left: 91%;
  }
  .view4 .jbox .jbox--item.j7 {
    width: 15%;
    top: 92%;
    left: 25%;
  }
  .view4 .jbox .jbox--item.j8 {
    width: 6%;
    top: 28%;
    left: 21%;
  }
  .view4 .jbox .jbox--item.j9 {
    width: 18%;
    top: 82%;
    left: 64%;
  }
  .view4 .jbox .jbox--item.j10 {
    width: 18%;
    top: 90%;
    left: 80%;
  }
  .view4 .jbox .jbox--item.j12 {
    width: 18%;
    top: 94%;
    left: 62%;
  }
}