.page1{width:100vw;height:100vh;overflow:hidden;background:url(xchx-bg.jpg) no-repeat top center;background-size:100% 100%;}
.page2{width:100vw;height:100vh;overflow:hidden;background:url(xchx-bg2.jpg) no-repeat top center;background-size:100% 100%;}
.a0{position:absolute; width:39.06%; top:6.1333vw;left:1.03%;}
.a1 { position: absolute; width: 45.866%; top: -6vw; right: -21%; z-index: 100; }

.a2{position:absolute;width:100%;top:12.3vw;left:0;  z-index: 90;}   
.a20{position:absolute;width:80%;top:26.266vw;left:12.1333%; z-index: 60;}
.a3{position:absolute;width:94%;top:30vw;left:5.8%; z-index: 70;}

.a4{position:absolute;width:19.6%;top:28.66vw;left:43.2%;  z-index: 100;}
.a5 { position: absolute; width: 46%; top: 54.266vw; left: 22%;  z-index: 100;}
.a6 { position: absolute; width: 11.86%; top: 53.4666vw; right: 18.4%;  z-index: 100;}

.a7{position:absolute;width:33.6%; top:121.86vw;left:0;   z-index: 100; /* margin-left: -32.47%; */}
.a8 { position: absolute; width: 58.366%; top: 146.2666vw; left: 23.866%;  z-index: 100; }
.a9 { position: absolute; width: 24.533%; top: 125.2vw; right: 1%;  z-index: 100;  /* margin-left: -32%; */}
.a10 { position: absolute; width: 35.533%; top: 123.2vw; right: -2%; z-index: 100; /* margin-left: -32%; */ }

/* iphone 6 */
@media (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2){
  /* .a6{bottom:12.07vw;} */
}

/* iphone6 plus */
@media (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3){
  /* .a6{bottom:12.07vw;} */
}

@media screen and (mix-width: 760px) {
    /* .a5 { position: absolute; width: 82.53%; top: 105.33vw; left: 8.93%; }
    .a6 { position: absolute; width: 32.8%; top: 142.07vw; left: 53%; margin-left: -19%; }
    .a8 { position: absolute; width: 64%; bottom: 0.3vw; left: 50%; margin-left: -32%; } */
}

.a21{position:absolute;width:27.2%;top:0;left:9.733%;  z-index: 90;}   
.a22 {
  position: absolute;
  width: 45.866%;
  top: 21vw;
  right: -26%;
  z-index: 50;
}
.a23 {position: absolute; width: 24.0666%; top: 3.8vw; right: 0; z-index: 90; }
.a24{position:absolute;width:89.4666%;top:13.866vw; left:6.8%;  z-index: 70;}
.a25{position:absolute;width:90%;top:131.866vw; left:6.8%;  z-index: 90;}
.a26 { position: absolute; width: 45.866%; top: 144.333vw; left: 0%; z-index: 100; }
.a27 {
  position: absolute;
  width: 45.866%;
  top: 107.2vw;
  right: -12%;
  z-index: 60;
}
::-webkit-scrollbar {
  display: none;
}

#word {
  position: absolute;
  overflow-y: auto;
  width: 73.7333%;
  top: 36.366vw;
  left: 13.0666%;
  z-index: 70;
  height: 119.0666vw;
}


.a28 { width: 100%; top: 36.366vw; left: 13.0666%; z-index: 70; }
.a29 {
  position: absolute;
  width: 23.2%;
  top: 153.2vw;
  left: 69.6%;
  z-index: 90;
}

.shakeY {
  animation-name: shakeY;
}

@keyframes shakeY{
  0% { transform: skewY(-15deg); }
  5% { transform: skewY(15deg); }
  10% { transform: skewY(-15deg); }
  15% { transform: skewY(15deg); }
  20% { transform: skewY(0deg); }
  100% { transform: skewY(0deg); }
 }


 .wobble {
  animation-delay: 2s;
  animation: coolVerticalShake 2s;

  /* animation-duration: 5s;
  animation-name: wobble; */

}

@keyframes wobble {
  from {
    transform: none;
  }

  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: none;
  }
}


/* @keyframes coolVerticalShake {
  3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) }
  6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) }
  9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) }
} */

@keyframes coolVerticalShake {
  0% {
    transform: translateY(-15%);
  }
  15% {
    transform: translateY(0%);
  }

  30% {
    transform: translateY(-25%);
  } 

  45% {
    transform: translateY(0%);
  }

  75% {
    transform: translateY(-25%);
  }

  98% {
    transform: translateY(0%);
  }
 
}




.eye-gif1{position:absolute;width:36.4%;top:82.27vw;left:35.2%;height:36.53vw;}
.eye-gif2{position:absolute;width:34.8vw;bottom:3.07vw;right:5.07%;height:29.33vw;}
.swiper-container { margin-top: 33.06vw; }
.page3 .part1 { width: 49.86vw; height: 12.8vw; }
.page3 .part4{width:26.33%;position:fixed;bottom:9%;left:36%;}


.swing {
  transform-origin: top center;
  -webkit-transform-origin: top center;
  animation: badge-swing 2s infinite;
  -webkit-animation: badge-swing 2s infinite;
  -webkit-animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation: badge-swing 2s infinite;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.stopit {
  -webkit-animation-duration: 2s;
  -webkit-animation-name: stopit;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-duration: 2s;
  -moz-animation-name: stopit;
  -moz-animation-fill-mode: forwards;
  animation-name: stopit;
}
@-webkit-keyframes badge-swing {
  0% {
    -webkit-transform: rotate(-5deg);
    -webkit-animation-timing-function: ease-in;
  }
  25% {
    -webkit-transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: rotate(5deg);
    -webkit-animation-timing-function: ease-in;
  }
  75% {
    -webkit-transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: rotate(-5deg);
    -webkit-animation-timing-function: ease-in;
  }
}
@-moz-keyframes badge-swing {
  0% {
    -moz-transform: rotate(-5deg);
    -moz-animation-timing-function: ease-in;
  }
  25% {
    -moz-transform: rotate(0deg);
    -moz-animation-timing-function: ease-out;
  }
  50% {
    -moz-transform: rotate(5deg);
    -moz-animation-timing-function: ease-in;
  }
  75% {
    -moz-transform: rotate(0deg);
    -moz-animation-timing-function: ease-out;
  }
  100% {
    -moz-transform: rotate(-5deg);
    -moz-animation-timing-function: ease-in;
  }
}
@-webkit-keyframes stopit {
  0% {
    -webkit-transform: rotate(-5deg);
    -webkit-animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: rotate(0deg);
    -webkit-animation-timing-function: ease-out;
  }
}
@-moz-keyframes stopit {
  0% {
    -moz-transform: rotate(-5deg);
    -moz-animation-timing-function: ease-out;
  }
  100% {
    -moz-transform: rotate(0deg);
    -moz-animation-timing-function: ease-out;
  }
}

.firework{
  /* width: calc(50% - 1rem); */
  aspect-ratio: 1 / 1;
  animation: burst 1.5s cubic-bezier(0,.46,.26,.99) alternate-reverse infinite;
  display: inline-block;
}

@keyframes burst {
  from {
    opacity:0;
    transform: scale(.75);
  }
}

@keyframes fade {
  from {
    opacity:0.5;
  }
}

@keyframes scale {
  from {
    transform: scale(.85);
  }
}


@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}


/* 
.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.bounce2 {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.shake {
  animation: shake 2s ease infinite;
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
} */