* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; box-sizing: border-box;}
body{ font-family: Helvetica;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; vertical-align: top; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

html, .main{
  height: 100%;
  overflow: hidden;  
}
.page, .page-content{
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.page{
	-webkit-justify-content: center;
	justify-content: center;
	height: 100%;
}
.page-content{
	-webkit-justify-content: space-around;
  justify-content: space-around;
  width: 100%;
	height: 86%;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}
.bg-1{
  background: url('../images/bg1.png') center no-repeat;
  background-size: cover;
}
.bg-2{
  background: url('../images/bg2.png') center no-repeat;
  background-size: cover;
}
.bg-3{
  background: -webkit-linear-gradient(50deg, #f8cdb5,#f8f0eb); /* Safari 5.1 - 6.0 */
  background: linear-gradient(50deg, #f8cdb5,#f8f0eb); /* 标准的语法（必须放在最后） */
}
.bg-4{
  background: -webkit-linear-gradient(50deg, #fdb593,#f7e5d1); /* Safari 5.1 - 6.0 */
  background: linear-gradient(50deg, #fdb593,#f7e5d1); /* 标准的语法（必须放在最后） */
}
.bg-5{
  background: -webkit-linear-gradient(50deg, #f9f4f1,#fdb593); /* Safari 5.1 - 6.0 */
  background: linear-gradient(50deg, #f9f4f1,#fdb593); /* 标准的语法（必须放在最后） */
}
.img-box{
  position: relative;
}
.img, .img-box img{
  display: block;
  width: 100%;
}
.re-box{
  position: relative;
}
.ab-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.bottom-box{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.logo{
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  width: 2.17rem;
  height: 0.41rem;
}
.page1-1{
  position: absolute;
  bottom: 0;
  left: 2.3rem;
  width: 1.34rem;
  height: 2.26rem;
}
.page1-2{
  position: absolute;
  bottom: 100%;
  left: 30%;
  width: 0.49rem;
  height: 0.45rem;
}
.page1-3{
  position: absolute;
  bottom: 0.45rem;
  left: 0.5rem;
  width: 0.55rem;
  height: 5.36rem;
}
.page1-4{
  position: absolute;
  top: 0;
  left: 0;
  width: 4.51rem;
  height: 3.49rem;
  background: url('../images/4.png') center no-repeat;
  background-size: 100%;
}
.page1-5{
  position: absolute;
  right: 0;
  bottom: 5%;
  left: 0;
  width: 50%;
  margin: auto;
  padding-top: 0.4rem;
  text-align: center;
  font-size: 14px;
  color: #d66658;
}
.page1-5 .icon{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 0.26rem;
  height: 0.34rem;
  margin: auto;
  background: url('../images/9.png') center no-repeat;
  background-size: 0.26rem 0.34rem;
}
.swiper-slide-active .page1-4{
  -webkit-animation: 4s ani1 1s infinite;
  animation: 4s ani1 1s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes ani1 {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  30%{
    opacity: 1;
  }
  50%{
    opacity: 0;
    -webkit-transform: translate3d(50%, 50%, 0);
    transform: translate3d(50%, 50%, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(50%, 50%, 0);
    transform: translate3d(50%, 50%, 0);
  }
}
@keyframes ani1 {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  30%{
    opacity: 1;
  }
  50%{
    opacity: 0;
    -webkit-transform: translate3d(50%, 50%, 0);
    transform: translate3d(50%, 50%, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(50%, 50%, 0);
    transform: translate3d(50%, 50%, 0);
  }
}
.swiper-slide-active .page1-2{
  -webkit-animation: ani2 4s infinite;
  animation: ani2 4s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes ani2{
  0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 150%, 0) scale(0);
    transform: translate3d(0, 150%, 0) scale(0);
  }
  50%{
    opacity: 1;
    -webkit-transform: translate3d(0, -80%, 0) scale(1.5);
    transform: translate3d(0, -80%, 0) scale(1.5);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, -80%, 0) scale(1.5);
    transform: translate3d(0, -80%, 0) scale(1.5);
  }
}
@keyframes ani2{
  0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 150%, 0) scale(0);
    transform: translate3d(0, 150%, 0) scale(0);
  }
  50%{
    opacity: 1;
    -webkit-transform: translate3d(0, -80%, 0) scale(1.5);
    transform: translate3d(0, -80%, 0) scale(1.5);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, -80%, 0) scale(1.5);
    transform: translate3d(0, -80%, 0) scale(1.5);
  }
}
.swiper-slide-active .page1-5 .icon{
  -webkit-animation: ani3 1s infinite;
  animation: ani3 1s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes ani3{
  80%{
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100%{
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes ani3{
  80%{
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100%{
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
.page2-1{
  position: absolute;
  top: 50%;
  left: 0.68rem;
  width: 3.09rem;
  height: 5.27rem;
}
.page2-2{
  position: absolute;
  top: 3.75rem;
  z-index: -1;
}
.page3-1{
  -webkit-transform-origin: 4.4rem 3rem;
  transform-origin: 4.4rem 3rem;
}
.swiper-slide-active .page3-1{
  -webkit-animation: ani4 .8s ease-in 2s;
  animation: ani4 .8s ease-in 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.page3-2, .page3-3{
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.swiper-slide-active .page3-2{
  -webkit-animation-name: ani5;
  animation-name: ani5;
}
.swiper-slide-active .page3-3{
  -webkit-animation-name: ani6;
  animation-name: ani6;
}
@-webkit-keyframes ani4{
  0%{
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  100%{
    -webkit-transform: rotate(-8.5deg);
    transform: rotate(-8.5deg);
  }
}
@keyframes ani4{
  0%{
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  100%{
    -webkit-transform: rotate(-8.5deg);
    transform: rotate(-8.5deg);
  }
}
@-webkit-keyframes ani5{
  100%{
    -webkit-transform: translate3d(-10px, 10px, 0) rotate(-20deg);
    transform: translate3d(-10px, 10px, 0) rotate(-20deg);
  }
}
@keyframes ani5{
  100%{
    -webkit-transform: translate3d(-10px, 10px, 0) rotate(-20deg);
    transform: translate3d(-10px, 10px, 0) rotate(-20deg);
  }
}
@-webkit-keyframes ani6{
  100%{
    -webkit-transform: translate3d(10px, 10px, 0) rotate(10deg);
    transform: translate3d(10px, 10px, 0) rotate(10deg);
  }
}
@keyframes ani6{
  100%{
    -webkit-transform: translate3d(10px, 10px, 0) rotate(10deg);
    transform: translate3d(10px, 10px, 0) rotate(10deg);
  }
}
.svg-1{
  background: url('../css/xin.svg') no-repeat;
  left: 0;
  top: 0;
  width: 7.5rem;
  height: 4rem;
  position: absolute;
  background-size: 10rem;
}
.page4-1{
  position: absolute;
  top: 1rem;
  left: 1.2rem;
  width: 1.75rem;
  height: 1.96rem;
}
.page4-2,
.page4-3,
.page4-4,
.page4-5,
.page4-6,
.page4-7,
.page4-9 {
  position: absolute;
}
.page4-2 {
  top: -0.07rem;
  left: 0.68rem;
  width: 0.39rem;
  height: 0.55rem;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.page4-3 {
  top: 0.99rem;
  left: 1.52rem;
  width: 0.86rem;
  height: 0.65rem;
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}
.page4-4 {
  top: 1.2rem;
  left: 0.1rem;
  width: 0.91rem;
  height: 0.51rem;
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}
.page4-5 {
  top: -0.12rem;
  left: 3.48rem;
  width: 0.65rem;
  height: 0.62rem;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.page4-6 {
  top: 1.22rem;
  left: 3.59rem;
  width: 0.92rem;
  height: 0.72rem;
  -webkit-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}
.page4-7 {
  top: 1.4rem;
  left: 2.56rem;
  width: 0.98rem;
  height: 0.25rem;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.page4-8{
  width: 4.89rem;
  height: 3.37rem;
  margin-right: 20%;
}
.page4-9{
  top: 96%;
  width: 100%;
}
.swiper-slide-active .page4-2{
  -webkit-animation: ani7 3s infinite;
  animation: ani7 3s infinite;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}
.swiper-slide-active .page4-3 {
  -webkit-animation: ani7 3s infinite;
  animation: ani7 3s infinite;
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}
.swiper-slide-active .page4-4 {
  -webkit-animation: ani7 3s infinite;
  animation: ani7 3s infinite;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}
.swiper-slide-active .page4-5 {
  -webkit-animation: ani7 3s infinite;
  animation: ani7 3s infinite;
  -webkit-animation-delay: .8s;
  animation-delay: .8s;
}
.swiper-slide-active .page4-6 {
  -webkit-animation: ani7 3s infinite;
  animation: ani7 3s infinite;
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
}
.swiper-slide-active .page4-7 {
  -webkit-animation: ani7 3s infinite;
  animation: ani7 3s infinite;
  -webkit-animation-delay: .6s;
  animation-delay: .6s;
}
@-webkit-keyframes ani7{
  25%{
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }
  50%{
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  75%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes ani7{
  25%{
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }
  50%{
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  75%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.page7-5,
.page7-6,
.page7-7,
.page7-8{
  position: absolute;
  z-index: 99;
}
.swiper-slide-active .page7-5,
.swiper-slide-active .page7-6,
.swiper-slide-active .page7-7,
.swiper-slide-active .page7-8{
  -webkit-animation: ani8 2.5s ease-in-out infinite alternate;
  animation: ani8 2.5s ease-in-out infinite alternate;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.page7-5{
  top: 0.38rem;
  left: 0.25rem;
  width: 2.63rem;
  height: 2.37rem;
  -webkit-transform-origin: 0.84rem 0.05rem;
  transform-origin: 0.84rem 0.05rem;
  -webkit-animation-delay: 2s !important;
  animation-delay: 2s !important;
}
.page7-6{
  top: 0.9rem;
  left: 3.28rem;
  width: 2.32rem;
  height: 2.01rem;
  -webkit-transform-origin: 50% 0.1rem;
  transform-origin: 50% 0.1rem;
  -webkit-animation-delay: 0.6s !important;
  animation-delay: 0.6s !important;
}
.page7-7{
  top: 2.62rem;
  left: 4.82rem;
  width: 2.56rem;
  height: 2.27rem;
  -webkit-transform-origin: 1.8rem 0.1rem;
  transform-origin: 1.8rem 0.1rem;
  -webkit-animation-delay: 1.2s !important;
  animation-delay: 1.2s !important;
}
.page7-8{
  top: 3.2rem;
  left: 1.8rem;
  width: 2.3rem;
  height: 1.81rem;
  -webkit-transform-origin: 50% 0.08rem;
  transform-origin: 50% 0.08rem;
}
.page7-9{
  position: absolute;
  top: 2.3rem;
  left: 0;
  z-index: -1;
  width: 5.17rem;
  height: 1.48rem;
}
@-webkit-keyframes ani8{
  0%{
    -webkit-transform: rotateX(-10deg);
    transform: rotateX(-10deg);
  }
  100%{
    -webkit-transform: rotateX(25deg);
    transform: rotateX(25deg);
  }
}
@keyframes ani8{
  0%{
    -webkit-transform: rotateX(-12deg);
    transform: rotateX(-12deg);
  }
  100%{
    -webkit-transform: rotateX(25deg);
    transform: rotateX(25deg);
  }
}
.page7-1{
  -webkit-animation-delay: .5s !important;
  animation-delay: .5s !important;
}
.page7-2{
  z-index: -1;
}
.page7-3{
  -webkit-animation-delay: .9s !important;
  animation-delay: .9s !important;
}
.swiper-slide-active .page7-1,
.swiper-slide-active .page7-2,
.swiper-slide-active .page7-3{
  -webkit-animation: ani9 2s ease-in-out infinite alternate;
  animation: ani9 2s ease-in-out infinite alternate;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes ani9{
  0%{
    -webkit-transform: translate3d(0, -5px, 0) scale(1);
    transform: translate3d(0, -5px, 0) scale(1);
  }
  100%{
    -webkit-transform: translate3d(0, 8px, 0) scale(1.04);
    transform: translate3d(0, 8px, 0) scale(1.04);
  }
}
@keyframes ani9{
  0%{
    -webkit-transform: translate3d(0, -5px, 0) scale(1);
    transform: translate3d(0, -5px, 0) scale(1);
  }
  100%{
    -webkit-transform: translate3d(0, 8px, 0) scale(1.04);
    transform: translate3d(0, 8px, 0) scale(1.04);
  }
}
.page8-1,
.page8-2{
  opacity: 0;
  -webkit-animation-fill-mode: both !important;
  animation-fill-mode: both !important;
  -webkit-animation-delay: 2s !important;
  animation-delay: 2s !important;
}
.swiper-slide-active .page8-1{
  -webkit-animation: ani10 1s ease-in-out;
  animation: ani10 1s ease-in-out;
}
.swiper-slide-active .page8-2{
  -webkit-animation: ani11 1s ease-in-out;
  animation: ani11 1s ease-in-out;
}
.page8-3{
  opacity: 0;
  position: absolute;
  top: 0.7rem;
  right: 0;
  left: 0;
  width: 1.41rem;
  height: 1.24rem;
  margin: auto;
}
.swiper-slide-active .page8-3{
  -webkit-animation: ani12 1s ease-in-out;
  animation: ani12 1s ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.swiper-slide-active .page8-4{
  -webkit-animation: ani13 1s ease-in-out infinite alternate;
  animation: ani13 1s ease-in-out infinite alternate;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
@-webkit-keyframes ani10{
  0%{
    opacity: 0;
    -webkit-transform: scale(1.2) translate3d(-30px, 10px, 0);
    transform: scale(1.2) translate3d(-30px, 10px, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes ani10{
  0%{
    opacity: 0;
    -webkit-transform: scale(1.2) translate3d(-30px, 10px, 0);
    transform: scale(1.2) translate3d(-30px, 10px, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes ani11{
  0%{
    opacity: 0;
    -webkit-transform: scale(1.2) translate3d(30px, 10px, 0);
    transform: scale(1.2) translate3d(30px, 10px, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes ani11{
  0%{
    opacity: 0;
    -webkit-transform: scale(1.2) translate3d(30px, 10px, 0);
    transform: scale(1.2) translate3d(30px, 10px, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes ani12{
  0%{
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes ani12{
  0%{
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes ani13{
  0%{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100%{
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes ani13{
  0%{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100%{
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.load-mask{
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: #2e1c12;
  opacity: 0;
  -webkit-transition: visibility .3s ease-in-out,
              opacity .3s ease-in-out;
  transition: visibility .3s ease-in-out,
              opacity .3s ease-in-out;
}
.load-mask-show{
  visibility: visible;
  opacity: 1;
}
.gooey{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(120deg, #de6d4f 0%, #ec7658 100%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  width: 1.5rem; 
  height: 1.44rem;
  margin: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;
}
.gooey:before,
.gooey:after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0; top: 0;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  box-shadow: 0.05rem 0.05rem 0.89rem rgba(255, 77, 65, .89);
  will-change: border-radius, transform, opacity;
  background-image: linear-gradient(120deg, rgba(254,240,213,.55) 0%, rgba(255,77,65,.89) 100%);
}
.gooey:before{
  opacity: .21;
}
.text{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  width: 1.5rem;
  height: 1.44rem;
  margin: auto;
  line-height: 1.44rem;
  text-align: center;
  font-size: 14px;
  color: #2e1c12;
}
.load-mask-show .gooey{
  -webkit-animation: morph 3s linear infinite;
  animation: morph 3s linear infinite;
}
.load-mask-show .gooey:after,
.load-mask-show .gooey:before{
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
.load-mask-show .gooey:before{
  -webkit-animation: morph 3s linear infinite;
  animation: morph 3s linear infinite;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}
.load-mask-show .text{
  -webkit-animation: morph 3s linear infinite;
  animation: morph 3s linear infinite;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
@-webkit-keyframes morph{
  0%,100%{
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
    border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    -webkit-transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    opacity: .89;
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    -webkit-transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}
@keyframes morph{
  0%,100%{
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
    border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    -webkit-transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    opacity: .89;
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    -webkit-transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}
.fadeInLeftMin{
  -webkit-animation-name: fadeInLeftMin;
  animation-name: fadeInLeftMin;
}
@-webkit-keyframes fadeInLeftMin{
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeftMin{
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUpMin{
  -webkit-animation-name: fadeInUpMin;
  animation-name: fadeInUpMin;
}
@-webkit-keyframes fadeInUpMin{
  0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 5vh, 0);
    transform: translate3d(0, 5vh, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUpMin{
  0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 5vh, 0);
    transform: translate3d(0, 5vh, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDownMin{
  -webkit-animation-name: fadeInDownMin;
  animation-name: fadeInDownMin;
}
@-webkit-keyframes fadeInDownMin {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(0, -3vh, 0);
    transform: translate3d(0, -3vh, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDownMin {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(0, -3vh, 0);
    transform: translate3d(0, -3vh, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.gka{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.music{
  width: 0;
  height: 0;
  overflow: hidden;
}
/* .gka img{
  -webkit-animation: ani14 2s infinite alternate;
  animation: ani14 2s infinite alternate;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.gka img:nth-child(odd) {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
.gka img:nth-child(even) {
  -webkit-animation-delay: .7s;
  animation-delay: .7s;
}
@keyframes ani14{
  0%{
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  10%{
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
} */