body {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100vh;
  overflow: hidden;
}
[ismo] {
  display: none;
}
@media screen and (max-width: 1180px) {
  [ismo] {
    display: block;
  }
}
[ispc] {
  display: block;
}
@media screen and (max-width: 1180px) {
  [ispc] {
    display: none;
  }
}
.jstarMain {
  pointer-events: none;
}
.warp {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swiper-App {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.app-con {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  -webkit-mask: url(../img/effectMaskB.png);
  mask: url(../img/effectMaskB.png);
  -webkit-mask-position: center 400%;
  mask-position: center 400%;
  -webkit-mask-size: 200% 300%;
  mask-size: 200% 300%;
}
.app-con.show {
  -webkit-animation: mask 1.5s steps(40) both;
  animation: mask 1.5s steps(40) both;
}
.top {
  position: absolute;
  left: 2.2395%;
  top: 3.125%;
  right: 2.2395%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 900;
}
.logo {
  width: 6.25%;
}
.logo a {
  display: block;
}
.logo a img {
  width: 100%;
  display: block;
}
@media screen and (max-width: 1180px) {
  .logo {
    width: 10%;
  }
}
.pp-logo {
  width: 7.9166%;
}
.pp-logo a {
  display: block;
}
.pp-logo a img {
  width: 100%;
  display: block;
}
@media screen and (max-width: 1180px) {
  .pp-logo {
    width: 14%;
  }
}
.poinn {
  pointer-events: none;
}
.zhu-box {
  width: 37.76%;
  top: 3%;
  left: 32.302%;
  -webkit-animation: bounce 0.6s ease-in-out infinite;
  animation: bounce 0.6s ease-in-out infinite;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .zhu-box {
    width: 60%;
    left: 20%;
    top: 10%;
  }
}
@media screen and (max-width: 750px) {
  .zhu-box {
    width: 40%;
    left: 30%;
  }
}
.gzf-item1,
.gzf-item2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.gzf-item1 {
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.gzf-item2 {
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}
:root {
  --color-text: #fff;
  --color-bg: #000;
  --color-link: #f9d77e;
  --color-link-hover: #fff;
  --color-info: #efc453;
  --glitch-width: 100vw;
  --glitch-height: 100vh;
  --gap-horizontal: 7px;
  --gap-vertical: 5px;
  --time-anim: 4s;
  --delay-anim: 0.5s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: none;
  --blend-mode-4: none;
  --blend-mode-5: overlay;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: transparent;
  --blend-color-4: transparent;
  --blend-color-5: #af4949;
}
.glitch.app-con > .glitch__item {
  background-position: center center;
  background-size: cover;
  background-image: inherit;
}
.glitch .glitch--img {
  position: relative;
}
.glitch .glitch--imga {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.glitch .glitch--imga1 {
  -webkit-clip-path: polygon(0 16%, 100% 24%, 100% 18%, 0 13%);
  clip-path: polygon(0 16%, 100% 24%, 100% 18%, 0 13%);
  animation: move 0.95s infinite;
}
.glitch .glitch--imga1 img {
  filter: blur(0.04rem);
}
.glitch .glitch--imga2 {
  animation: move 1.1s infinite 0.2s;
  -webkit-clip-path: polygon(0 61%, 100% 59.5%, 100% 63%, 0 63.6%);
  clip-path: polygon(0 61%, 100% 59.5%, 100% 63%, 0 63.6%);
}
.glitch .glitch--imga3 {
  animation: move 0.8s infinite 0.1s;
  -webkit-clip-path: polygon(0 81%, 100% 76%, 100% 79%, 0 82%);
  clip-path: polygon(0 81%, 100% 76%, 100% 79%, 0 82%);
}
.glitch .glitch--imga4 {
  -webkit-clip-path: polygon(0 60%, 100% 44%, 100% 42%, 0 56%);
  clip-path: polygon(0 60%, 100% 44%, 100% 42%, 0 56%);
  animation: move 0.95s infinite 0.15s;
}
.glitch .glitch__item {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.glitch .glitch__item:nth-of-type(n+2) {
  opacity: 0;
  animation-duration: var(--time-anim);
  animation-delay: var(--delay-anim);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.glitch .glitch__item:nth-of-type(2) {
  background-color: var(--blend-color-2);
  background-blend-mode: var(--blend-mode-2);
  animation-name: glitch-anim-2;
}
.glitch .glitch__item:nth-of-type(3) {
  background-color: var(--blend-color-3);
  background-blend-mode: var(--blend-mode-3);
  animation-name: glitch-anim-3;
}
.glitch .glitch__item:nth-of-type(4) {
  background-color: var(--blend-color-4);
  background-blend-mode: var(--blend-mode-4);
  animation-name: glitch-anim-4;
}
.glitch .glitch__item:nth-of-type(5) {
  background-color: var(--blend-color-5);
  background-blend-mode: var(--blend-mode-5);
  animation-name: glitch-anim-flash;
}
.item1 {
  mix-blend-mode: color-dodge;
  width: 51.71875%;
  left: 0;
  bottom: 0;
}
.item1 img {
  -webkit-animation: opacity0 0.5s linear infinite alternate;
  animation: opacity0 0.5s linear infinite alternate;
}
.y2 {
  width: 100%;
  left: 0;
  bottom: 0%;
  mix-blend-mode: overlay;
}
.item2 {
  width: 34.0104%;
  left: 3.6458%;
  bottom: -29.2708%;
}
.item2 img {
  animation: beat 1s ease-in-out infinite;
  -webkit-animation: beat 1s ease-in-out infinite;
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
}
@media screen and (max-width: 1180px) and (min-width: 860px) {
  .item2 {
    bottom: -15%;
  }
}
.item3 {
  width: 11.25%;
  left: -2%;
  top: 18.75%;
}
.item3 img {
  transform-origin: left center;
  -webkit-transform-origin: left center;
  animation: three 4s infinite alternate ease-in-out;
  -webkit-animation: three 4s infinite alternate ease-in-out;
}
.item4 {
  width: 32.2916%;
  right: -1%;
  bottom: -4.0625%;
}
.item5 {
  width: 52.65625%;
  right: 23.28125%;
  bottom: -6.25%;
}
.item6 {
  width: 14.11458%;
  bottom: 0;
  right: 23.48958%;
}
.item6 img {
  -webkit-animation: shakeX 12s infinite linear;
  animation: shakeX 12s infinite linear;
}
.y1 {
  width: 100%;
  left: 0;
  bottom: 15.9375%;
}
.y3 {
  width: 100%;
  left: 0;
  bottom: 0;
}
.item7 {
  left: 43.75%;
  width: 15.2604%;
  bottom: -1%;
}
.item7 img {
  -webkit-animation: shakeX 12s infinite linear;
  animation: shakeX 12s infinite linear;
}
.item8 {
  width: 6.25%;
  left: 53.90625%;
  bottom: 12.2916%;
}
.item8 img {
  -webkit-animation: shakeX 12s infinite linear;
  animation: shakeX 12s infinite linear;
}
.item9 {
  width: 6.92708%;
  left: 42.65625%;
  bottom: 6.0416%;
}
.item9 img {
  -webkit-animation: shakeX 12s infinite linear;
  animation: shakeX 12s infinite linear;
}
.item10 {
  width: 6.5625%;
  right: 16.0416%;
  bottom: 6.66%;
}
.item10 img {
  -webkit-animation: shakeX 12s infinite linear;
  animation: shakeX 12s infinite linear;
}
.item11 {
  width: 5.41666%;
  left: 33.5416%;
  bottom: 0;
}
.item12 {
  width: 12.2395%;
  left: -3.3333%;
  bottom: -2.1875%;
}
.item13 {
  width: 12.3958%;
  right: -2%;
  top: 30.625%;
}
.item13 img {
  transform-origin: right top;
  -webkit-transform-origin: right top;
  animation: three 4s infinite alternate ease-in-out;
  -webkit-animation: three 4s infinite alternate ease-in-out;
}
.item14 {
  width: 8.59375%;
  right: 16.25%;
  bottom: 50.8333%;
}
.item14 img {
  -webkit-animation: gui-flying 8s linear infinite;
  animation: gui-flying 8s linear infinite;
}
.item15 {
  width: 11.6666%;
  left: 22.8125%;
  bottom: 60%;
}
.item15 img {
  opacity: 0;
  -webkit-animation: gui-flying2 8s linear infinite;
  animation: gui-flying2 8s linear infinite;
}
.item16 {
  width: 12.708%;
  left: 10.729%;
  bottom: 56.25%;
}
.itemiz1 {
  width: 18.22916%;
  right: 4.1666%;
  bottom: 15.625%;
}
.itemiz1k {
  width: 103.4285714%;
  left: -3.4285714%;
  top: 0;
}
.itemiz1k img {
  -webkit-animation: opacity0 0.8s linear infinite alternate;
  animation: opacity0 0.8s linear infinite alternate;
}
.itemiz2 {
  width: 34.375%;
  bottom: 13%;
  right: 14.8958%;
}
.itemiz2k {
  width: 100%;
  left: 0;
  top: 0;
}
.itemiz2k img {
  -webkit-animation: opacity0 0.8s linear infinite alternate;
  animation: opacity0 0.8s linear infinite alternate;
}
.itemiz3 {
  width: 33.125%;
  bottom: 11.625%;
  left: 31.09375%;
}
.itemiz4 {
  width: 31.0416%;
  left: 12.2916%;
  bottom: 14.625%;
}
.itemiz5 {
  width: 18.3854%;
  right: 59.53125%;
  bottom: 15.16666%;
}
.itemiz6 {
  width: 28.125%;
  left: 0;
  bottom: 14%;
}
.itemiz6k {
  width: 100%;
  left: 0;
  top: 0;
}
.itemiz6k img {
  -webkit-animation: opacity0 0.8s linear infinite alternate;
  animation: opacity0 0.8s linear infinite alternate;
}
.itemiz7 {
  width: 11.5625%;
  left: 8.90625%;
  bottom: 20.625%;
}
.nav-box {
  bottom: 3%;
  width: 81.7708%;
  left: 9.1146%;
}
@media screen and (max-width: 1180px) {
  .nav-box {
    width: 94%;
    left: 3%;
  }
}
.nav-warp {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
}
.nav-warp .nav-item {
  margin: 0 0.3vw;
  cursor: pointer;
  transition: 0.6s;
}
.nav-warp .nav-item:hover {
  transform: scale(1.06);
}
.btn-black {
  width: 8.80208%;
  right: 4.47916%;
  top: 3.6458%;
}
.btn-black img {
  animation: yaobai-move 1s infinite alternate ease-in-out;
  -webkit-animation: yaobai-move 1s infinite alternate ease-in-out;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
}
@media screen and (max-width: 1180px) {
  .btn-black {
    width: 12%;
    right: 2%;
    top: 2%;
  }
}
.btn-buy {
  width: 7.34375%;
  right: 4.375%;
  bottom: 5.208%;
}
.btn-buy img {
  animation: beat 0.8s ease 0s infinite normal;
  -webkit-animation: beat 0.8s ease 0s infinite normal;
}
@media screen and (max-width: 1180px) {
  .btn-buy {
    width: 10%;
    right: 3%;
    bottom: 5%;
  }
}
.btn-buy1,
.btn-buy2,
.btn-buy3 {
  left: 0;
  top: 0;
  width: 100%;
}
.btn-buy1 img,
.btn-buy2 img,
.btn-buy3 img {
  opacity: 0;
}
.btn-buy1 img {
  -webkit-animation: opacity0 0.6s linear infinite alternate;
  animation: opacity0 0.6s linear infinite alternate;
}
.btn-buy2 img {
  -webkit-animation: opacity0 0.6s 0.2s linear infinite alternate;
  animation: opacity0 0.6s 0.2s linear infinite alternate;
}
.btn-buy3 img {
  -webkit-animation: opacity0 0.6s 0.4s linear infinite alternate;
  animation: opacity0 0.6s 0.4s linear infinite alternate;
}
.aitem1 {
  width: 13.75%;
  left: -1%;
  top: -1%;
  -webkit-animation: opacity1 0.6s linear infinite alternate;
  animation: opacity1 0.6s linear infinite alternate;
}
.aitem1 img {
  -webkit-animation: yaobai-move 3.8s ease-in-out infinite alternate;
  animation: yaobai-move 3.8s ease-in-out infinite alternate;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}
.aitem2 {
  width: 6.0416%;
  left: 23.0729%;
  top: -4.1666%;
}
.aitem2 img {
  -webkit-animation: misu2 8s infinite linear;
  animation: misu2 8s infinite linear;
}
.aitem3 {
  width: 18.5416%;
  right: 10.41666%;
  top: 9.375%;
}
.aitem3 img {
  -webkit-animation: wave 6.6s infinite linear;
  animation: wave 6.6s infinite linear;
}
@media screen and (max-width: 750px) {
  .aitem3 {
    right: 7.41666%;
  }
}
.aitem4 {
  width: 11.71875%;
  left: 54.7916%;
  top: 2.5%;
  -webkit-animation: opacity0 0.6s linear infinite alternate;
  animation: opacity0 0.6s linear infinite alternate;
}
.aitem4 img {
  -webkit-animation: gui-flying2 8s linear infinite;
  animation: gui-flying2 8s linear infinite;
}
.aitem5 {
  width: 15.9375%;
  left: 7.29166%;
  top: 16.875%;
  -webkit-animation: opacity1 0.6s linear infinite alternate;
  animation: opacity1 0.6s linear infinite alternate;
}
.aitem5 img {
  animation: levitation 3s ease-in-out infinite;
  -webkit-animation: levitation 3s ease-in-out infinite;
}
.aitem6 {
  width: 12.60416%;
  left: 35.3125%;
  top: 5.208%;
}
.aitem6 img {
  -webkit-animation: zhuazi 0.8s 0.6s infinite alternate ease-in-out;
  animation: zhuazi 0.8s 0.6s infinite alternate ease-in-out;
}
.aitem7 {
  width: 17.1875%;
  left: 0.8%;
  bottom: -5%;
}
.aitem7 img {
  -webkit-animation: wave 6.6s infinite linear;
  animation: wave 6.6s infinite linear;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .aitem7 {
    bottom: 0;
  }
}
.aitem8 {
  width: 17.65625%;
  left: 32.604%;
  bottom: -26.0416%;
}
.aitem8 img {
  -webkit-animation: wave 6.6s infinite linear;
  animation: wave 6.6s infinite linear;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .aitem8 {
    bottom: -16%;
  }
}
.aitem9 {
  width: 14.53125%;
  left: 52.083%;
  bottom: 3.75%;
}
.aitem9 img {
  -webkit-animation: twinkle2 6s infinite linear;
  animation: twinkle2 6s infinite linear;
}
.aitem10 {
  width: 31.0416%;
  right: 0;
  bottom: -2%;
  -webkit-animation: twinkle2 6s infinite linear;
  animation: twinkle2 6s infinite linear;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.aitem10 img {
  -webkit-animation: opacity1 0.6s linear infinite alternate;
  animation: opacity1 0.6s linear infinite alternate;
}
.titbox {
  overflow: hidden;
}
.titbox > img {
  -webkit-animation: shake 4s ease-in-out infinite;
  animation: shake 4s ease-in-out infinite;
}
.titbox .titbox-star {
  position: absolute;
  left: 10%;
  right: 11%;
  top: 11%;
  bottom: 13%;
  overflow: hidden;
}
.titbox .titbox-star::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 40px;
  top: 0;
  left: -10%;
  background: linear-gradient(90deg, transparent, rgba(158, 0, 0, 0.4), transparent);
  transform: rotate(-35deg);
  animation: shine 2.6s ease-in-out infinite;
}
.titbox .tit-txt {
  left: 0;
  top: 0;
}
.titbox .tit-txt > img {
  position: relative;
}
.desc-box {
  width: 16.0416%;
}
.page1 .titbox {
  width: 28.22916%;
  right: 52.55208%;
  top: 45%;
  transform: translateY(-50%);
}
.page1 .desc-box {
  width: 16.0416%;
  left: 49.8958%;
  top: 45%;
  transform: translateY(-50%);
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .page1 .titbox {
    width: 38.22916%;
  }
  .page1 .desc-box {
    width: 30.0416%;
  }
}
@media screen and (max-width: 750px) {
  .page1 .titbox {
    width: 32.22916%;
  }
  .page1 .desc-box {
    left: 48%;
    width: 24.0416%;
  }
}
.bitem1 {
  width: 34.7916%;
  left: -10%;
  bottom: -2%;
}
.bitem1 img {
  -webkit-animation: opacity1 0.6s ease-in-out infinite alternate;
  animation: opacity1 0.6s ease-in-out infinite alternate;
}
.bitem2 {
  width: 20.4166%;
  left: 25.9375%;
  bottom: -2%;
}
.bitem2 img {
  -webkit-animation: opacity1 0.8s ease-in-out infinite alternate;
  animation: opacity1 0.8s ease-in-out infinite alternate;
}
.bitem3 {
  width: 20.572%;
  left: 48.125%;
  bottom: -4%;
}
.bitem3 img {
  -webkit-animation: opacity1 0.6s ease-in-out infinite alternate;
  animation: opacity1 0.6s ease-in-out infinite alternate;
}
.bitem4 {
  width: 15.72916%;
  left: 69.2708%;
  bottom: -12%;
}
.bitem4 img {
  -webkit-animation: opacity1 0.6s ease-in-out infinite alternate;
  animation: opacity1 0.6s ease-in-out infinite alternate;
}
.bitem5 {
  width: 6.5104%;
  left: 69.7916%;
  top: -2%;
}
.bitem5 img {
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  animation: hands 3s infinite;
  -webkit-animation: hands 3s infinite;
}
.bitem6 {
  width: 14.84375%;
  left: 27.08%;
  top: 1.71875%;
}
.bitem6 img {
  -webkit-animation: opacity0 0.6s ease-in-out infinite alternate;
  animation: opacity0 0.6s ease-in-out infinite alternate;
}
.bitem7 {
  width: 23.6458%;
  left: 45.208%;
  top: -2%;
}
.bitem7 img {
  -webkit-animation: twinkle 6s infinite linear;
  animation: twinkle 6s infinite linear;
}
.bitem8 {
  width: 23.5416%;
  left: -1%;
  top: -2%;
}
.bitem8 img {
  animation: beat 1s ease-in-out infinite;
  -webkit-animation: beat 1s ease-in-out infinite;
  transform-origin: center top;
  -webkit-transform-origin: center top;
}
.bitem9 {
  width: 10.67708%;
  left: 1.5625%;
  top: 35.4166%;
  -webkit-animation: opacity2 0.6s linear infinite alternate;
  animation: opacity2 0.6s linear infinite alternate;
}
.bitem9 img {
  animation: levitation 3s ease-in-out infinite;
  -webkit-animation: levitation 3s ease-in-out infinite;
}
.kuang {
  position: relative;
  pointer-events: none;
}
.swiper-img {
  width: 91.1354%;
  left: 4.2%;
  top: 5.6%;
}
.page-swiper {
  position: relative;
  overflow: hidden;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
}
.swiper-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7.9316%;
  cursor: pointer;
  z-index: 500;
  transition: 0.3s;
}
.swiper-btn:hover {
  transform: scale(1.1) translateY(-50%);
}
.swiper-btn.swiper-button-disabled {
  opacity: 0.4;
}
.swiper-prev {
  left: -15%;
}
.swiper-next {
  right: -15%;
}
.page2 .rbox {
  width: 28.229%;
  left: 56.25%;
  top: 40%;
  transform: translateY(-50%);
}
.page2 .titbox {
  width: 100%;
}
.page2 .desc-box {
  width: 87.45387%;
  margin: 0 auto;
  margin-top: -5%;
}
.page2 .pbox-imgdemo {
  width: 33.48958%;
  right: 47.9166%;
  top: 25.3125%;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .page2 .rbox {
    width: 33.229%;
  }
  .page2 .pbox-imgdemo {
    width: 38.48958%;
  }
}
@media screen and (max-width: 750px) {
  .page2 .rbox {
    width: 32.229%;
  }
  .page2 .pbox-imgdemo {
    width: 37.48958%;
  }
}
.citem1 {
  width: 14.0625%;
  top: 20.104%;
  right: 3.6458%;
}
.citem1 img {
  animation: yaobai-move 1.8s infinite alternate ease-in-out;
  -webkit-animation: yaobai-move 1.8s infinite alternate ease-in-out;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
}
.citem2 {
  width: 12.34375%;
  left: 5.9375%;
  bottom: -10%;
}
.citem2 img {
  animation: yaobai-move 1.8s infinite alternate ease-in-out;
  -webkit-animation: yaobai-move 1.8s infinite alternate ease-in-out;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
}
@media screen and (max-width: 1180px) and (min-width: 860px) {
  .citem2 {
    bottom: -5%;
  }
}
.citem3 {
  width: 11.09375%;
  left: 39.3229%;
  bottom: -10%;
}
.citem3 img {
  animation: yaobai-move 1.8s infinite alternate ease-in-out;
  -webkit-animation: yaobai-move 1.8s infinite alternate ease-in-out;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
}
@media screen and (max-width: 1180px) and (min-width: 860px) {
  .citem3 {
    bottom: -5%;
  }
}
.citem4 {
  width: 16.25%;
  left: 19.7916%;
  top: 70%;
}
.citem4 img {
  -webkit-animation: misu2 8s infinite linear;
  animation: misu2 8s infinite linear;
}
.citem41 {
  width: 16.25%;
  left: 62.5%;
  top: -2%;
}
.citem41 img {
  -webkit-animation: misu2 8s -0.4s infinite linear;
  animation: misu2 8s -0.4s infinite linear;
}
.citem5 {
  width: 16.614%;
  left: 67.708%;
  bottom: -2%;
}
.citem5 img {
  -webkit-animation: twinkle2 5s infinite linear;
  animation: twinkle2 5s infinite linear;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
}
.citem6 {
  width: 16.875%;
  left: 1%;
  top: -4%;
}
.citem6 img {
  -webkit-animation: twinkle2 5s infinite linear;
  animation: twinkle2 5s infinite linear;
}
.citem7 {
  width: 12.5%;
  left: 38.28125%;
  top: -5%;
}
.citem7 img {
  -webkit-animation: twinkle2 5s infinite linear;
  animation: twinkle2 5s infinite linear;
}
.page3 .lbox {
  width: 27.864%;
  left: 16.5625%;
  top: 40%;
  transform: translateY(-50%);
}
.page3 .titbox {
  width: 100%;
}
.page3 .titbox .titbox-star {
  left: 9%;
  top: 9%;
  right: 9%;
  bottom: 9%;
}
.page3 .desc-box {
  width: 68.5981%;
  margin: 0 auto;
  margin-top: 5%;
}
.page3 .pbox-imgdemo {
  width: 18.854%;
  left: 54.6875%;
  top: 45%;
  transform: translateY(-50%);
}
.page3 .swiper-img {
  width: 94.75138%;
  left: 3%;
  top: 1%;
}
.page3 .kuang {
  z-index: 600;
}
.page3 .swiper-btn {
  width: 20.4%;
}
.page3 .swiper-prev {
  left: -25%;
}
.page3 .swiper-next {
  right: -25%;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .page3 .lbox {
    width: 32.864%;
  }
  .page3 .pbox-imgdemo {
    width: 23.854%;
  }
}
@media screen and (max-width: 750px) {
  .page3 .lbox {
    width: 31.864%;
  }
  .page3 .pbox-imgdemo {
    width: 22.854%;
  }
}
.ditem1 {
  width: 16.614%;
  left: 8.645%;
  bottom: -5%;
}
.ditem1 img {
  -webkit-animation: fireworks 3.2s -0.1s linear infinite normal;
  animation: fireworks 3.2s -0.1s linear infinite normal;
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
}
.ditem2 {
  width: 14.166%;
  right: 14.0625%;
  bottom: -5%;
}
.ditem2 img {
  -webkit-animation: fireworks 3.4s -0.2s linear infinite normal;
  animation: fireworks 3.4s -0.2s linear infinite normal;
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
}
.ditem3 {
  width: 22.76041%;
  right: 0;
  top: 13.125%;
}
.ditem3 img {
  -webkit-animation: fireworks 3s -0.15s linear infinite normal;
  animation: fireworks 3s -0.15s linear infinite normal;
}
.ditem4 {
  width: 32.2916%;
  left: -1%;
  top: -1%;
}
.ditem4 img {
  -webkit-animation: fireworks 3.3s linear infinite normal;
  animation: fireworks 3.3s linear infinite normal;
  transform-origin: left top;
  -webkit-transform-origin: left top;
}
.ditem5 {
  width: 29.84375%;
  left: 42.5%;
  bottom: 0;
}
.ditem5 img {
  -webkit-animation: shakeX 12s infinite linear;
  animation: shakeX 12s infinite linear;
}
.ditem6 {
  bottom: 0;
  left: 17.96875%;
  width: 24.2708%;
}
.ditem6 img {
  -webkit-animation: shakeX 12s infinite linear;
  animation: shakeX 12s infinite linear;
}
.ditem7 {
  width: 42.2916%;
  bottom: 0;
  right: 0;
}
.ditem7 img {
  -webkit-animation: shakeX 12s infinite linear;
  animation: shakeX 12s infinite linear;
}
.page4 .titbox {
  width: 24.114%;
  right: 56.71875%;
  top: 15%;
}
.page4 .titbox .titbox-star {
  left: 2%;
  right: 2%;
  top: 7%;
  bottom: 8%;
}
.page4 .desc-box {
  width: 24.322%;
  left: 45.364%;
  top: 15%;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .page4 .titbox {
    width: 34.114%;
    top: 19%;
  }
  .page4 .desc-box {
    top: 19%;
    width: 34.322%;
  }
}
@media screen and (max-width: 750px) {
  .page4 .titbox {
    width: 28.114%;
    top: 19%;
  }
  .page4 .desc-box {
    width: 28.322%;
  }
}
.eitem1 {
  width: 10.989%;
  right: 15.625%;
  bottom: -4%;
}
.eitem1 img {
  -webkit-animation: twinkle 6s infinite linear;
  animation: twinkle 6ss infinite linear;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
}
.eitem2 {
  width: 13.072%;
  left: 30.98%;
  top: 4%;
}
.eitem2 img {
  -webkit-animation: twinkle 6s infinite linear;
  animation: twinkle 6ss infinite linear;
  transform-origin: left top;
  -webkit-transform-origin: left top;
}
.eitem2 {
  width: 13.072%;
  left: 30.98%;
  top: 4%;
}
.eitem2 img {
  -webkit-animation: twinkle 6s infinite linear;
  animation: twinkle 6ss infinite linear;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
}
.eitem3 {
  width: 9.73958%;
  left: 71.875%;
  top: -4%;
}
.eitem3 img {
  -webkit-animation: twinkle 6s infinite linear;
  animation: twinkle 6ss infinite linear;
}
.eitem4 {
  width: 9.42708%;
  left: 13.02%;
  bottom: -4%;
}
.eitem4 img {
  -webkit-animation: twinkle 6s infinite linear;
  animation: twinkle 6ss infinite linear;
  transform-origin: left top;
  -webkit-transform-origin: left top;
}
.eitem5 {
  width: 25.98%;
  left: -5%;
  top: 20%;
}
.eitem5 img {
  -webkit-animation: bounce1 2s ease infinite;
  animation: bounce1 2s ease infinite;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.eitem6 {
  width: 8.072%;
  left: 37.2916%;
  bottom: -2%;
}
.eitem6 img {
  -webkit-animation: bounce1 2s ease infinite;
  animation: bounce1 2s ease infinite;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.eitem7 {
  width: 13.697%;
  right: 1.458%;
  bottom: 25.625%;
}
.eitem7 img {
  -webkit-animation: bounce1 2s ease infinite;
  animation: bounce1 2s ease infinite;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.page5 .lbox {
  width: 22.65625%;
  right: 60.26%;
  top: 46%;
  transform: translateY(-50%);
}
.page5 .titbox {
  width: 100%;
}
.page5 .titbox .titbox-star {
  left: 2%;
  top: 2%;
  right: 2%;
  bottom: 2%;
}
.page5 .desc-box {
  width: 87.586%;
  margin: 0 auto;
  margin-top: 5%;
}
.page5 .pbox-imgdemo {
  width: 35.9375%;
  left: 44.375%;
  top: 50%;
  transform: translateY(-50%);
}
.page5 .swiper-img {
  width: 78%;
  left: 14.5%;
  top: 9%;
}
.page5 .swiper-btn {
  width: 7.391304%;
}
.page5 .swiper-prev {
  left: -24%;
}
.page5 .swiper-next {
  right: -16%;
}
@media screen and (max-width: 1180px) and (min-width: 860px) {
  .page5 .lbox {
    width: 27.65625%;
  }
  .page5 .pbox-imgdemo {
    width: 40.9375%;
  }
}
@media screen and (max-width: 750px) {
  .page5 .lbox {
    width: 25.65625%;
  }
  .page5 .pbox-imgdemo {
    width: 39.9375%;
  }
}
.fitem1 {
  width: 11.458%;
  right: 41.14%;
  bottom: -2%;
}
.fitem1 img {
  animation: levitation 3s ease-in-out infinite;
  -webkit-animation: levitation 3s ease-in-out infinite;
}
.fitem2 {
  width: 18.385%;
  left: 1.854%;
  bottom: -2%;
}
.fitem2 img {
  -webkit-animation: shakeX 16s infinite linear;
  animation: shakeX 16s infinite linear;
}
.fitem3 {
  width: 11.927%;
  left: 1.979%;
  top: 0;
}
.fitem3 img {
  animation: levitation 3s ease-in-out infinite;
  -webkit-animation: levitation 3s ease-in-out infinite;
}
.fitem4 {
  width: 12.1875%;
  left: 31.7708%;
  top: 5.04%;
}
.fitem4 img {
  animation: levitation 3s ease-in-out infinite;
  -webkit-animation: levitation 3s ease-in-out infinite;
}
.fitem5 {
  width: 16.92708%;
  right: 1%;
  bottom: 0;
}
.fitem5 img {
  -webkit-animation: shakeX 16s infinite linear;
  animation: shakeX 16s infinite linear;
}
.page6 .rbox {
  width: 29.21875%;
  left: 63.125%;
  top: 42%;
  transform: translateY(-50%);
}
.page6 .titbox {
  width: 100%;
}
.page6 .titbox .titbox-star {
  left: 2%;
  top: 22%;
  right: 2%;
  bottom: 2%;
}
.page6 .desc-box {
  width: 69.34%;
  margin: 0 auto;
  margin-top: 4%;
}
.page6 .pbox-imgdemo {
  width: 33.34%;
  right: 40.625%;
  top: 50%;
  transform: translateY(-50%);
}
.page6 .swiper-img {
  width: 96.3%;
  left: 3.4%;
  top: 4.8%;
}
.page6 .swiper-btn {
  width: 7.03125%;
}
.page6 .swiper-next {
  right: -10%;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .page6 .rbox {
    width: 34.21875%;
  }
  .page6 .pbox-imgdemo {
    width: 38.34%;
  }
}
@media screen and (max-width: 750px) {
  .page6 .lbox {
    width: 32.21875%;
  }
  .page6 .pbox-imgdemo {
    width: 37.34%;
  }
}