* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
.page {
  width: 100%;
  height: 100vh;
  background: url(../img/img8.jpg) no-repeat;
  background-size: cover;
  padding-top: 0.45rem;
  position: relative;
}
.page .video-box {
  width: 6.46rem;
  height: 3.9rem;
  margin: auto;
  position: relative;
  z-index: 100;
}
.page .video-box video {
  width: 100%;
  height: 100%;
}
.page .img-box {
  position: relative;
  height: calc(100vh - 4.3rem);
}
.page .img-box img {
  position: absolute;
}
.page .img-box .img1 {
  width: 1.22rem;
  height: 1.44rem;
  top: .5rem;
  right: .2rem;
}
.page .img-box .img2 {
  width: 4.34rem;
  height: 2.65rem;
  top: rem;
  left: .8rem;
}
.page .img-box .img3 {
  width: 1.82rem;
  height: 1.24rem;
  left: 2.69rem;
  top: em;
}
.page .img-box .img4 {
  width: 6.96rem;
  height: 5.23rem;
  top: .5rem;
  left: .12rem;
  z-index: 50;
}
.page .img-box .img5 {
  width: 6.4rem;
  height: 2.05rem;
  top: 1.2rem;
  left: .4rem;
  z-index: 40;
}
.page .img-box .btn {
  width: 4.04rem;
  height: 1.08rem;
  bottom: 0.4rem;
  left: 1.58rem;
  z-index: 100;
}
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  5%,
  10% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  15%,
  25%,
  35%,
  45% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  20%,
  30%,
  40% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  50% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  5%,
  10% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  15%,
  25%,
  35%,
  45% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  20%,
  30%,
  40% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  50% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
@-webkit-keyframes an1 {
  0% {
    -webkit-transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@-webkit-keyframes an1 {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.an1 {
  -webkit-animation-name: an1;
  animation-name: an1;
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse;
}
@-webkit-keyframes an2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
  }
}
@keyframes an2 {
  0% {
    transform: rotate(0deg);
    transform: scale(0.9);
  }
  100% {
    transform: rotate(10deg);
    transform: scale(1);
  }
}
.an2 {
  -webkit-animation-name: an2;
  animation-name: an2;
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse;
}
@-webkit-keyframes an3 {
  0% {
    -webkit-transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes an3 {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.an3 {
  -webkit-animation-name: an3;
  animation-name: an3;
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse;
}