body {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.main {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-repeat: no-repeat;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
}
.top {
  position: fixed;
  left: 0;
  top: 4%;
  right: 0;
  padding: 0 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 900;
}
.logo {
  width: 6.97916%;
}
.logo a {
  display: block;
}
.logo a img {
  width: 100%;
  display: block;
}
@media screen and (max-width: 1024px) {
  .logo {
    width: 16%;
  }
}
.poinn {
  pointer-events: none;
}
.jstarMain {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}
.main-box {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.item1 {
  width: 100%;
  left: 0;
  bottom: -2%;
  animation: raftFloat2 1.8s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
@media screen and (max-width: 1180px) {
  .item1 {
    width: 110%;
    left: -5%;
  }
}
@media screen and (max-width: 860px) {
  .item1 {
    width: 170%;
    left: -36%;
    bottom: 21%;
  }
}
.item2 {
  width: 20.3125%;
  left: 25.5208%;
  bottom: 11%;
}
.item2 img {
  animation: move3 3s ease-in-out alternate infinite;
}
.item3 {
  width: 44.2708%;
  left: 28.85416%;
  bottom: 25.97676%;
  animation: updpwnMove 1s infinite alternate ease-in-out;
  -webkit-animation: updpwnMove 1s infinite alternate ease-in-out;
  transform-origin: center top;
}
.item3 img {
  -webkit-animation: shine2 1s ease-in-out infinite alternate;
  animation: shine2 1s ease-in-out infinite alternate;
}
.item4 {
  width: 108%;
  top: -2%;
  left: -2%;
}
.item4 img {
  animation: raftFloat2 1.8s ease-in-out infinite alternate;
  transform-origin: center top;
}
@media screen and (max-width: 860px) {
  .item4 {
    width: 158%;
    top: 3%;
    left: -4%;
  }
}
.item5 {
  width: 29.583%;
  left: -6%;
  top: -6%;
}
.item5 img {
  -webkit-animation: raftFloat 1.8s ease-in-out infinite alternate;
  animation: raftFloat 1.8s ease-in-out infinite alternate;
}
.item6 {
  width: 26.5625%;
  right: -4%;
  bottom: -10%;
}
.item6 img {
  -webkit-animation: raftFloat 1.8s ease-in-out infinite alternate;
  animation: raftFloat 1.8s ease-in-out infinite alternate;
}
@media screen and (max-width: 860px) {
  .item6 {
    width: 60%;
    bottom: -5%;
  }
}
.yun img {
  -webkit-animation: wave 9s infinite linear;
  animation: wave 9s infinite linear;
}
.yun1 {
  width: 48.59375%;
  left: 14.84375%;
  bottom: -28%;
}
@media screen and (max-width: 860px) {
  .yun1 {
    width: 78.59375%;
    left: 5.84375%;
    bottom: 9%;
  }
}
.yun2 {
  width: 48.59375%;
  left: -24%;
  bottom: -23%;
}
@media screen and (max-width: 860px) {
  .yun2 {
    width: 94.59375%;
    left: -14%;
    bottom: 0%;
  }
}
.yun3 {
  width: 48.59375%;
  right: -14%;
  bottom: -22%;
}
@media screen and (max-width: 860px) {
  .yun3 {
    width: 82.59375%;
    right: -6%;
    bottom: 6%;
  }
}
.yf1 {
  width: 4.375%;
  left: 51.0416%;
  top: 8.85416%;
}
.yf2 {
  width: 5.78125%;
  left: 39.58%;
  top: 13.54%;
}
.yf3 {
  width: 2.7604%;
  left: 58.22%;
  bottom: 5.4%;
}
.yf4 {
  width: 5.572916%;
  left: 67.1875%;
  bottom: 31.25%;
}
.yf5 {
  width: 3.0208%;
  right: 8.59375%;
  top: 9.5833%;
}
.yf {
  animation: planet-move 1.4s ease-in-out infinite alternate;
}
.yf img {
  -webkit-animation: shine2 0.7s ease-in-out infinite alternate;
  animation: shine2 0.7s ease-in-out infinite alternate;
}
.nav-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.nav-item {
  position: absolute;
  cursor: pointer;
}
.nav-item img {
  -webkit-animation: bounce1 2.5s ease-in-out infinite;
  animation: bounce1 2.5s ease-in-out infinite;
}
.nav-item1 {
  width: 18.6979%;
  right: 5.208%;
  bottom: 2.9166%;
}
.nav-item1 img {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
@media screen and (max-width: 860px) {
  .nav-item1 {
    width: 32.6979%;
    right: 21.208%;
    bottom: -1.0834%;
  }
}
.nav-item2 {
  width: 11.35416%;
  left: 26.25%;
  top: 9.1666%;
}
.nav-item2 img {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
@media screen and (max-width: 1180px) {
  .nav-item2 {
    width: 18%;
  }
}
@media screen and (max-width: 860px) {
  .nav-item2 {
    width: 28%;
    left: 32.25%;
    top: 7.1666%;
  }
}
.nav-item3 {
  width: 11.0416%;
  right: 19.0104%;
  top: 5.4166%;
}
.nav-item3 img {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
@media screen and (max-width: 1180px) {
  .nav-item3 {
    width: 18%;
  }
}
@media screen and (max-width: 860px) {
  .nav-item3 {
    width: 29%;
    right: 2.0104%;
    top: 12.4166%;
  }
}
.nav-item4 {
  width: 15.4166%;
  left: 8.958%;
  top: 21.0416%;
}
.nav-item4 img {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
@media screen and (max-width: 1180px) {
  .nav-item4 {
    width: 17%;
    top: 32%;
  }
}
@media screen and (max-width: 860px) {
  .nav-item4 {
    width: 29%;
    left: 1%;
    top: 22%;
  }
}
.nav-item5 {
  width: 19.73958%;
  left: 15.104%;
  bottom: 7.0833%;
}
.nav-item5 img {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
@media screen and (max-width: 860px) {
  .nav-item5 {
    width: 30%;
    left: 6.104%;
  }
}
.nav-item6 {
  width: 14.8958%;
  right: 5.677%;
  top: 22.9166%;
}
.nav-item6 img {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
@media screen and (max-width: 1180px) {
  .nav-item6 {
    width: 18%;
    top: 32%;
  }
}
@media screen and (max-width: 860px) {
  .nav-item6 {
    width: 30%;
    top: 58%;
  }
}
.pop-main {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: none rgba(0, 0, 0, 0.89);
  -webkit-overflow-scrolling: touch;
  z-index: -10;
  opacity: 0;
  transition: 0.3s;
  -webkit-mask: url(../img/bg-ico6.svg) no-repeat center center;
  mask: url(../img/bg-ico6.svg) no-repeat center center;
}
.pop-main.show {
  z-index: 999;
  opacity: 1;
  -webkit-animation: maskStarIn4 1s cubic-bezier(1, 0, 1, 1) forwards;
  animation: maskStarIn4 1s cubic-bezier(1, 0, 1, 1) forwards;
}
.pop-wapper {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  color: #fff;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
  margin-top: 40px;
  width: 100%;
  height: 100%;
}
.md-show {
  overflow-y: hidden;
}
.md-show body {
  overflow-y: hidden;
}
.show .pop-wapper.act {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
}
.pop-img {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 35%;
  transform: translateY(-50%);
}
.swiper-img-box {
  width: 70.92%;
  top: 18%;
  left: 15%;
}
.swiper-img-bor {
  box-sizing: border-box;
  border-radius: 10px;
  border: 2px solid #34ceef;
  background-color: #fff;
}
.swiper-img-bor .swiper-slide {
  border-radius: inherit;
}
.swiper-img-bor .img {
  border-radius: inherit;
}
.swiper-img-bor .img img {
  width: 100%;
  border-radius: inherit;
}
.swiper-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.77083vw;
  cursor: pointer;
  z-index: 500;
}
.swiper-btn img {
  width: 100%;
  display: block;
  transition: 0.3s;
}
.swiper-btn:hover img {
  transform: scale(1.06);
}
.swiper-prev {
  left: -2.0833vw;
}
.swiper-next {
  right: -2.0833vw;
}
.swiper-img {
  position: relative;
  overflow: hidden;
}
.swiper-img .img {
  display: block;
}
.swiper-img .img img {
  width: 100%;
  display: block;
}
.swiper-img .swiper-pagination {
  bottom: 8%;
}
.swiper-img .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.8;
}
.swiper-img .swiper-pagination-bullet-active {
  opacity: 1;
}
.open-title {
  width: 18.80208%;
  position: relative;
  padding-top: 9.166vh;
  margin: 0 auto 3.125vh;
}
@media screen and (max-width: 1180px) {
  .open-title {
    width: 24%;
  }
}
.open-desc {
  width: 36.354%;
  margin: 0 auto 8.333vh;
}
@media screen and (max-width: 1180px) {
  .open-desc {
    width: 41.354%;
  }
}
.pop-wapper2 .open-desc {
  width: 29.375%;
}
@media screen and (max-width: 1180px) {
  .pop-wapper2 .open-desc {
    width: 34.375%;
  }
}
.pop-wapper2 .swiper-img-bor {
  border-color: #34ceef;
}
.pop-wapper3 .open-title {
  width: 15.5729%;
}
@media screen and (max-width: 1180px) {
  .pop-wapper3 .open-title {
    width: 21%;
  }
}
.pop-wapper3 .open-desc {
  width: 22.5%;
  margin-bottom: 13.54166667vh;
}
@media screen and (max-width: 1180px) {
  .pop-wapper3 .open-desc {
    width: 27.5%;
  }
}
.pop-wapper3 .swiper-img-bor {
  border-color: #43bb30;
}
.pop-wapper4 .open-desc {
  width: 36.1458%;
}
@media screen and (max-width: 1180px) {
  .pop-wapper4 .open-desc {
    width: 41.1458%;
  }
}
.pop-wapper4 .swiper-img-bor {
  border-color: #ffaf74;
}
.pop-wapper5 .open-desc {
  width: 36.4583%;
  margin-bottom: 2.5vh;
}
@media screen and (max-width: 1180px) {
  .pop-wapper5 .open-desc {
    width: 41.4583%;
  }
}
.pop-wapper5 .swiper-img-bor {
  border-color: #ee53c2;
}
.pop-wapper6 .open-title {
  margin-bottom: 3.3333vh;
}
.pop-wapper6 .open-desc {
  width: 22.8645%;
  margin-bottom: 2.5vh;
}
@media screen and (max-width: 1180px) {
  .pop-wapper6 .open-desc {
    width: 27.8645%;
  }
}
.pop-wapper6 .swiper-img-bor {
  border-color: #ee53c2;
}
.open-tab6 {
  display: flex;
  justify-content: center;
  margin: 0 auto 3.125vh;
}
.open-tab6 > li {
  width: 8.3333vw;
  margin: 0 1.08333vw;
  position: relative;
  cursor: pointer;
}
.open-tab6 > li img {
  width: 100%;
  display: block;
  transition: 0.4s;
}
.open-tab6 > li .img2 {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
}
.open-tab6 > li.active .img2 {
  opacity: 0;
  visibility: hidden;
}
.open-tab6 > li.active .img2 {
  opacity: 1;
  visibility: visible;
}
.open-desc6 {
  position: relative;
}
.open-desc6 .item {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.open-desc6 .item.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.swiper-img-kua {
  position: relative;
  width: 23.6458%;
  margin: 0 auto;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .swiper-img-kua {
    width: 28.6458%;
  }
}
.pop-close {
  position: absolute;
  right: 8%;
  top: 5%;
  width: 3.802%;
  cursor: pointer;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}
.pop-close:hover {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
.btn-buy {
  width: 10.15625%;
  right: 8%;
  bottom: 5%;
}
.aitem1 {
  width: 63.656%;
  right: 108%;
  top: -15%;
}
.aitem1 img {
  animation: move3 2s ease-in-out alternate infinite;
}
.aitem2 {
  width: 48.8986%;
  left: 108%;
  top: -5%;
}
.aitem2 img {
  -webkit-transform-origin: center left;
  transform-origin: center left;
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
.aitem3 {
  width: 3.4375%;
  left: 35.15625%;
  top: 8.6458vh;
}
.aitem3 img {
  -webkit-animation: shine2 0.7s ease-in-out infinite alternate;
  animation: shine2 0.7s ease-in-out infinite alternate;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .aitem3 {
    left: 32.15625%;
  }
}
.aitem4 {
  width: 6.92708%;
  right: 24.5833%;
  top: 6.5625vh;
}
.aitem4 img {
  -webkit-animation: shine2 0.7s ease-in-out infinite alternate;
  animation: shine2 0.7s ease-in-out infinite alternate;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .aitem4 {
    right: 21.5833%;
  }
}
.aitem5 {
  width: 160.132158%;
  top: -30%;
  left: -30%;
}
.bitem1 {
  width: 4.32291%;
  left: 24.6354%;
  top: 7.8125vh;
}
.bitem1 img {
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .bitem1 {
    left: 21.6354%;
  }
}
.bitem2 {
  width: 6.04166%;
  right: 23.125%;
  top: 12.083vh;
}
.bitem2 img {
  -webkit-transform-origin: center left;
  transform-origin: center left;
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .bitem2 {
    right: 20.125%;
  }
}
.bitem3 {
  width: 84.3612%;
  right: 94.5%;
  top: 2%;
  animation: move3 2s ease-in-out alternate infinite;
}
.bitem3 > img {
  -webkit-animation: twinkle2 3s linear infinite alternate;
  animation: twinkle2 3s linear infinite alternate;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}
.bitem4 {
  width: 69.60352%;
  left: 90%;
  top: 3%;
  animation: move3 2s ease-in-out alternate infinite;
}
.bitem4 > img {
  -webkit-animation: twinkle2 3s linear infinite alternate;
  animation: twinkle2 3s linear infinite alternate;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}
.bitem5 {
  width: 31.0126%;
  right: -2%;
  bottom: 9%;
}
.bitem6 {
  width: 107.2687%;
  left: 65.63876%;
  top: -29.7709%;
}
.bitem6 img {
  -webkit-animation: wave 9s infinite linear;
  animation: wave 9s infinite linear;
}
.bitem7 {
  width: 126.8722%;
  left: -14.5374%;
  top: 27.4809%;
}
.citem1 {
  width: 8.59375%;
  right: 28.125%;
  top: 6.45833vh;
}
.citem1 img {
  -webkit-transform-origin: center left;
  transform-origin: center left;
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .citem1 {
    right: 25.125%;
  }
}
.citem2 {
  width: 48.28125%;
  left: 29.166%;
  top: 15.10416vh;
}
.citem2 img {
  -webkit-animation: wave 9s infinite linear;
  animation: wave 9s infinite linear;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .citem2 {
    width: 53.28125%;
    left: 24.166%;
  }
}
.citem3 {
  width: 43.832%;
  right: 95%;
  bottom: -50.7633%;
}
.citem3 img {
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
.citem4 {
  width: 29.5154%;
  right: 3%;
  bottom: 98%;
  animation: move3 2s ease-in-out alternate infinite;
}
.citem5 {
  width: 93.392%;
  left: 78%;
  top: -30%;
  animation: move3 2s ease-in-out alternate infinite;
}
.citem6 {
  width: 34.6698%;
  left: 1%;
  bottom: -7%;
}
.citem6 img {
  -webkit-animation: bounce1 2.5s ease-in-out infinite;
  animation: bounce1 2.5s ease-in-out infinite;
}
.citem7 {
  width: 126.8722%;
  left: -14.5374%;
  top: 27.4809%;
}
.ditem1 {
  width: 6.97916%;
  left: 23.229%;
  top: 6.04166667%;
}
.ditem1 img {
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .ditem1 {
    left: 20.229%;
  }
}
.ditem2 {
  width: 5.3125%;
  right: 26.0416%;
  top: 9.79166vh;
}
.ditem2 img {
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .ditem2 {
    right: 23.0416%;
  }
}
.ditem3 {
  width: 60.7929%;
  right: 100%;
  top: 8%;
  animation: move3 2s ease-in-out alternate infinite;
}
.ditem4 {
  width: 79.5154%;
  left: 96%;
  top: -22%;
  animation: move3 2s ease-in-out alternate infinite;
}
.ditem5 {
  width: 181.938%;
  top: -28.244%;
  left: -29.0748%;
}
.eitem1 {
  width: 4.42708%;
  left: 26.666%;
  top: 9.375%;
}
.eitem1 img {
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .eitem1 {
    left: 23.666%;
  }
}
.eitem2 {
  width: 4.5833%;
  right: 25.15625%;
  top: 15.625vh;
}
.eitem2 img {
  -webkit-transform-origin: center right;
  transform-origin: center right;
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .eitem2 {
    right: 22.15625%;
  }
}
.eitem3 {
  width: 41.1894%;
  left: -9.1629%;
  top: 110%;
  animation: move2 2s ease-in-out alternate infinite;
}
.eitem4 {
  width: 25.1101%;
  left: 61.67400881%;
  top: 115%;
}
.eitem4 img {
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
.eitem5 {
  width: 32.3788%;
  left: 105%;
  top: -12%;
  animation: move3 2s ease-in-out alternate infinite;
}
.eitem6 {
  width: 104.7619%;
  left: -3%;
  bottom: -10%;
}
.eitem7 {
  width: 49.7797%;
  right: 112%;
  top: 15%;
}
.eitem7 img {
  -webkit-animation: fudong1 3s ease-in-out infinite;
  animation: fudong1 3s ease-in-out infinite;
}
.eitem8 {
  width: 6.6079%;
  right: 125%;
  top: 3%;
}
.eitem9 {
  width: 126.8722%;
  top: 22.1374%;
  left: -12.3348%;
}
.fitem1 {
  width: 4.47916%;
  top: 24.8958vh;
  left: 30.7291%;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .fitem1 {
    left: 27.7291%;
  }
}
.fitem2 {
  width: 6.61458%;
  right: 28.4375%;
  top: 22.916%;
}
@media screen and (max-width: 1180px) and (min-width: 750px) {
  .fitem2 {
    right: 25.4375%;
  }
}
.fitem3 {
  width: 33.259%;
  right: 115.4185%;
  top: -10%;
}
.fitem4 {
  width: 39.6475%;
  left: 108%;
  top: 0;
  animation: move3 2s ease-in-out alternate infinite;
}
.fitem5 {
  width: 27.97356%;
  right: 108.37%;
  bottom: -10%;
  animation: move3 2s ease-in-out alternate infinite;
}
.fitem6 {
  width: 125.9842%;
  top: 70%;
  left: 4%;
}
.fitem7 {
  width: 37.004%;
  left: 104%;
  bottom: -5%;
  animation: move3 2s ease-in-out alternate infinite;
}
.fitem8 {
  width: 126.8722%;
  top: 22.1374%;
  left: -12.3348%;
}