html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.body .swiper-container {
  width: 100%;
  height: 100%;
}
.bg {
  width: 100%;
  height: 100%;
  position: relative;
  /* background: url(../images/newImg/bg.png) no-repeat; */
  background: url(../images/bg.jpg) no-repeat center center / 100% 100%;
  background-size: cover;
  /* background-size: 100%; */
  /* background-color: #4b307f; */
  overflow: hidden;
}
.bg .bg-img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.bg2 {
  background: url(../images/bg2.jpg) no-repeat center center / 100% 100%;
  background-size: cover;
}
.product-bg {
  background: url(../images/p-bg.jpg) no-repeat center center / 100% 100%;
  background-size: cover;
}
.bg-3 {
  background: url(../images/bg-3.jpg) no-repeat center center / 100% 100%;
  background-size: cover;
}
.bg .logo {
  width: 2.5rem;
  position: absolute;
  top: 0.44rem;
  left: 0.46rem;
}
.bg .text {
  width: 5.89rem;
  /* height: 1.41rem; */
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* top: 2.04rem; */
  top: 9%;
}
.bg .zhu {
  width: 6.84rem;
  height: 10.46rem;
  /* height: 5.78rem; */
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* top: 3.45rem; */
  top: 28%;
  z-index: 20;
  /* background: url(../images/zhu2.png)no-repeat center center /100% 100%; */
}
.zhuimg {
  width: 6.84rem;
  height: 5.78rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.zhu .xin {
  position: absolute;
  width: 1.11rem;
  height: 2.62rem;
  top: 1.9rem;
  left: 0.66rem;
  animation: blink 2s infinite;
  opacity: 1;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.zhu .xin2 {
  position: absolute;
  width: 0.89rem;
  height: 2.03rem;
  top: 2rem;
  right: 0;
  animation: blink 2.5s infinite;
  opacity: 1;
}
.zhu .qiu {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  animation: bounce-down 5s linear infinite alternate;
}
.zhu .box {
  position: absolute;
  width: 1.35rem;
  height: 1.25rem;
  top: 2rem;
  left: 2.9rem;
  animation: bounce2 5s linear infinite alternate;
}
.zhu .box2 {
  position: absolute;
  width: 3rem;
  height: 2rem;
  top: 1.5rem;
  left: 2rem;
  animation: bounce2 4s linear infinite alternate;
}
.zhu .box2 img {
  width: 100%;
  height: 100%;
  animation: bounce-down 6s linear infinite alternate;
}
@keyframes bounce-down {
  25% {
    transform: translateY(-4px);
    transform: translateX(-4px);
  }
  50%,
  100% {
    transform: translateY(0);
    transform: translateX(0);
  }
  75% {
    transform: translateY(4px);
    transform: translateX(4px);
  }
}
@keyframes bounce2 {
  25% {
    transform: rotate(7deg);
  }
  50%,
  100% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-7deg);
  }
}
.xiang img {
  width: 100%;
  height: 100%;
  animation: bounce2 8s linear infinite alternate;
}
.xiang {
  width: 5.02rem;
  height: 4.91rem;
  position: absolute;
  /* top: 7.5rem; */
  top: 52%;
  right: 0rem;
  z-index: 10;
  animation: bounce-down 5s linear infinite alternate;
}
.nai {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* height: 3.5rem; */
  margin: 0 auto;
  z-index: 9999;
}
.next {
  position: absolute;
  bottom: 4%;
  width: 0.19rem;
  height: 0.12rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  animation: bottoms 3s linear infinite alternate;
}
@keyframes bottoms {
  25% {
    transform: translateY(4px);
  }
  50%,
  100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-4px);
  }
}
.text2 {
  width: 6.2rem;
  /* height: 0.95rem; */
  position: absolute;
  left: 0;
  right: 0;
  /* top: 1.48rem; */
  top: 0.4rem;
  z-index: 999;
  margin: 0 auto;
}
.border-box {
  width: 6.22rem;
  height: 6.22rem;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* top: 4rem; */
  top: 30%;
  z-index: 999;
}
.border-box .border {
  width: 100%;
  height: 100%;
  animation: zhuan 5s linear infinite;
}
@keyframes zhuan {
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.n-1 {
  width: 2.1rem;
  height: 2.14rem;
  position: absolute;
  left: 1.22rem;
  /* right: 0; */
  margin: 0 auto;
  bottom: -1.12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.n-1 .qiu {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}
.n-1 .nai {
  /* width: 1.91rem; */
  width: auto;
  height: 2.9rem;
  position: absolute;
  top: -0.28rem;
  left: -0.14rem;
  right: 0;
  margin: 0 auto;
  z-index: 21;
  animation: zhuan2 5s linear infinite alternate;
}
@keyframes zhuan2 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-5px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes zhuan3 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(5px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.zhu-1 {
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 5.02rem;
  left: 2.6rem;
  opacity: 1;
  animation: opt 5s linear infinite alternate;
}
.zhu-2 {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  bottom: 4.02rem;
  left: 2rem;
  opacity: 1;
  animation: opt 4s linear infinite alternate;
}
@keyframes opt {
  25% {
    opacity: 0.8;
    transform: rotate(50deg);
  }
  50% {
    opacity: 0.6;
    transform: rotate(100deg);
  }
  75% {
    opacity: 0.8;
    transform: rotate(50deg);
  }
  100% {
    opacity: 1;
    transform: rotate(100deg);
  }
}
.n-1 .tit {
  width: 2.02rem;
  /* height: 1.05rem; */
  position: absolute;
  right: 1.38rem;
  bottom: -0.18rem;
  z-index: 100;
}
.n-2 {
  width: 1.88rem;
  height: 1.92rem;
  position: absolute;
  right: 0;
  top: -0.42rem;
}
.n-2 .qiu {
  width: 100%;
  height: 100%;
  z-index: 10;
}
.n-2 .nai2 {
  /* width: 1.14rem; */
  height: 2.8rem;
  position: absolute;
  animation: zhuan2 4s linear infinite alternate;
  right: 0;
  margin: 0 auto;
  z-index: 0;
  top: -0.38rem;
  left: -0.22rem;
}
.n-2 .tit {
  width: 1.82rem;
  /* height: 1.05rem; */
  position: absolute;
  right: 0.68rem;
  bottom: -0.32rem;
  z-index: 100;
}
.n-3 {
  width: 1.88rem;
  height: 1.92rem;
  position: absolute;
  right: -0.38rem;
  bottom: 0.46rem;
}
.n-3 .nai3 {
  /* width: 1.53rem; */
  height: 2.8rem;
  position: absolute;
  animation: zhuan3 4s linear infinite alternate;
  top: -0.46rem;
  right: -0.25rem;
  z-index: 21;
}
.n-3 .qiu {
  width: 100%;
  height: 100%;
  z-index: 20;
  position: absolute;
}
.n-3 .tit {
  width: 1.82rem;
  /* height: 1.05rem; */
  position: absolute;
  right: 0.94rem;
  bottom: -0.36rem;
  z-index: 100;
}
.n-4 {
  width: 1.88rem;
  height: 1.92rem;
  position: absolute;
  left: 1.36rem;
  top: -0.96rem;
}
.n-4 .qiu {
  width: 100%;
  height: 100%;
  z-index: 20;
  position: absolute;
}
.n-4 .nai4 {
  /* width: 1.06rem; */
  height: 2.8rem;
  position: absolute;
  /* left: 0; */
  animation: zhuan3 4s linear infinite alternate;
  right: 0;
  margin: 0 auto;
  top: -0.5rem;
  right: -0.3rem;
  z-index: 21;
}
.n-4 .tit {
  width: 1.82rem;
  /* height: 1.05rem; */
  position: absolute;
  right: 1.12rem;
  bottom: -0.2rem;
  z-index: 100;
}
.n-5 {
  width: 1.88rem;
  height: 1.92rem;
  position: absolute;
  left: -0.5rem;
  top: 2.32rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.n-5 .qiu {
  width: 100%;
  height: 100%;
  z-index: 20;
  position: absolute;
}
.n-5 .nai5 {
  /* width: 1.16rem; */
  height: 1.28rem;
  position: absolute;
  left: 0;
  animation: zhuan2 4s linear infinite alternate;
  right: 0;
  margin: 0 auto;
  top: 0.32rem;
  right: -0.1rem;
  z-index: 21;
}
.n-5 .tit {
  width: 1.82rem;
  /* height: 1.05rem; */
  position: absolute;
  left: 0;
  bottom: -0.47rem;
  z-index: 100;
}
.d-1 {
  width: 0.87rem;
  height: 0.67rem;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: zhuan2 2s linear infinite alternate;
}
.y-1 {
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  top: -0.74rem;
  right: 1.5rem;
  animation: op 6s linear infinite alternate;
}
.y-2 {
  width: 0.37rem;
  height: 0.36rem;
  position: absolute;
  top: -0.1rem;
  animation: op 7s linear infinite alternate;
  right: -0.6rem;
  opacity: 1;
}
@keyframes op {
  25% {
    opacity: 0.5;
    transform: rotate(90deg);
  }
  50% {
    opacity: 0.2;
    transform: rotate(180deg);
  }
  75% {
    opacity: 0.7;
    transform: rotate(180deg);
  }
  100% {
    opacity: 1;
    transform: rotate(90deg);
  }
}
.j-1 {
  width: 1.16rem;
  height: 1.16rem;
  position: absolute;
  top: -1.9rem;
  right: -0.4rem;
}
.j-2 {
  width: 0.59rem;
  height: 0.6rem;
  position: absolute;
  top: -1.2rem;
  right: -0.8rem;
  opacity: 1;
}
.touch {
  width: 0.68rem;
  /* height: 0.53rem; */
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 11.4rem;
  animation: touchs 1.4s linear infinite alternate;
}
.bottom-title {
  width: 2.58rem;
  /* height: 0.27rem; */
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 12.2rem;
}
@keyframes touchs {
  25% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(4px);
  }
}
.pub-logo {
  position: absolute;
  /* top: 0.5rem; */
  top: 3%;
  left: 0.5rem;
  width: 2.5rem;
  height: auto;
  z-index: 9999;
}
.p-text {
  width: 100%;
  /* height: 3rem;
  padding: 0 1rem; */
  box-sizing: border-box;
  /* height: 0.64rem; */
  /* position: absolute;
  left: 0;
  right: 0; */
  /* top: 1.65rem; */
  top: 0;
  margin: 0 auto;
  transition: 0.1s;
}
.p-text .dong {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.1s;
  position: relative;
  z-index: 90;
}
.dong1,
.dong2,
.dong3 {
  opacity: 0;
  transition: all 0.8s;
}
.p-text img {
  width: 100%;
  /* height: 0.64rem; */
}
.main {
  position: absolute;
  left: 0;
  top: calc(8% + 3rem);
  width: 100%;
}
.guang-1 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.fenzi {
  width: 80%;
  position: absolute;
  left: 10%;
  top: 3.2rem;
}
.p-bg {
  background: url(../images/bg3.png) no-repeat center center / 100% 100%;
  background-size: cover;
}
.test-bg {
  width: 6.57rem;
  height: 2.6rem;
  position: absolute;
  /* bottom: .92rem; */
  /* bottom: 2%; */
  top: 70%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  /* background: url(../images/test-bg.png) no-repeat center center / 100% 100%; */
  background: rgba(255,255,255,0.3);
  border-radius: 0.35rem;
}
.product {
  height: 5rem;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0) scale(0.5);
  transform-origin: center;
}
.test-bg img {
  width: 5.81rem;
  height: auto;
  /* height: 2.26rem; */
  opacity: 0;
  transition: all 0.8s;
}
.p-bg .guang {
  width: 5.43rem;
  height: 5.09rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 3.8rem;
  opacity: 1;
  animation: blink 1.2s linear infinite alternate;
}
@keyframes blink {
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.p-next {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 0.33rem;
  z-index: 9999;
  width: 0.23rem;
  height: 0.18rem;
  animation: nexts 2s linear infinite alternate;
}
.p-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  left: 0.33rem;
  z-index: 9999;
  width: 0.23rem;
  height: 0.18rem;
  animation: prev 2s linear infinite alternate;
}
@keyframes nexts {
  25% {
    transform: translateX(4px);
  }
  50%,
  100% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(-4px);
  }
}
@keyframes prev {
  25% {
    transform: translateX(-4px);
  }
  50%,
  100% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(4px);
  }
}
.heng {
  width: 4.14rem !important;
  height: 0.28rem !important;
  position: absolute;
  bottom: -0.16rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;
  transition: all 0.1s;
}
.shui {
  width: 6.98rem;
  height: 3.85rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* top: 2.73rem; */
  top: 18%;
}
.shui .shui-img {
  width: 100%;
  height: 100%;
}
.shui .left {
  width: 1.43rem;
  height: 1.56rem;
  position: absolute;
  top: 1rem;
  left: 0.7rem;
  animation: shui 6s linear infinite alternate;
}
@keyframes shui {
  0% {
    transform: translateY(0) rotate(0);
  }
  25% {
    transform: translateY(-6px) rotate(10deg);
  }
  50% {
    transform: translateX(-5px) rotate(0deg);
  }
  75% {
    transform: translateY(6px) rotate(-10deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes shui2 {
  0% {
    transform: translateY(0) rotate(0);
  }
  25% {
    transform: translateY(6px) rotate(10deg);
  }
  50% {
    transform: translateX(-5px) rotate(5deg);
  }
  75% {
    transform: translateY(-6px) rotate(-10deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes shui3 {
  0% {
    transform: translateY(0) rotate(0);
  }
  25% {
    transform: translateY(-6px) rotate(10deg);
  }
  50% {
    transform: translateX(-5px) rotate(5deg);
  }
  75% {
    transform: translateY(6px) rotate(-10deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.shui .shui-1 {
  width: 0.26rem;
  height: 0.25rem;
  position: absolute;
  top: 1.8rem;
  right: 1rem;
  animation: shui2 6s linear infinite alternate;
}
.shui .shui-2 {
  width: 0.46rem;
  height: 0.36rem;
  position: absolute;
  top: 1.3rem;
  right: 0.9rem;
  animation: shui3 6s linear infinite alternate;
}
.shui .shui-3 {
  width: 0.54rem;
  height: 0.6rem;
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  animation: shui2 6s linear infinite alternate;
}
.shui .shui-4 {
  top: 2rem;
  right: 2rem;
  animation: shui3 6s linear infinite alternate;
}
.shui .shui-5 {
  top: 2.3rem;
  right: 1.2rem;
  transform: rotate(-25deg);
  animation: shui3 6s linear infinite alternate;
}
.xiaohua {
  /* top: 6.88rem; */
  top: 54%;
  width: 2.7rem;
  height: 0.6rem;
}
.texts-2 img {
  width: 1.56rem;
  height: 0.6rem;
  display: block;
}
.texts-2 .heng {
  width: 2.34rem !important;
  height: 0.16rem !important;
}
.texts-2 .dong {
  box-sizing: border-box;
  padding-left: 0.55rem;
}
.shui .guang-1 {
  width: 5.8rem;
  height: 3.27rem;
  position: absolute;
  left: 0.8rem;
  top: -0.3rem;
  z-index: 10;
  opacity: 1;
  animation: blink 2s cubic-bezier(0, 0, 0, 0.31) infinite alternate;
}
.people {
  width: 5.96rem;
  height: 5.87rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* top: 7.5rem; */
  top: 6.6rem;
  right: -0.5rem;
}
.people .img {
  width: 100%;
  height: 100%;
}
.people .guang {
  width: 4.88rem;
  height: 4.61rem;
  position: absolute;
  top: 0.17rem;
  left: 0.38rem;
  animation: blink 1.6s cubic-bezier(0, 0, 0, 0.31) infinite alternate;
}
.guan-text {
  width: 6.09rem;
  height: 0.58rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* top: 1.82rem; */
  top: 12%;
}
.guan-text .text-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.guan-text .text-box img {
  width: 6.09rem;
  height: 0.58rem;
}
.biao {
  width: 6.57rem;
  height: 3.21rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 2%;
}
.biao img {
  width: 100%;
  height: 100%;
}
.biao-btn-1 {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  /* top: 8.8rem; */
  top: 66%;
  right: 3.2rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.biao-btn-2 {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  /* top: 7.9rem; */
  top: 58%;
  right: 1.1rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.b-2 {
  display: none;
}
.p-prev {
  display: none;
}
.an-bg {
  width: 100%;
  height: 100%;
  background: url(../images/an-bg.jpg) no-repeat center center / 100% 100%;
}
.an-bg-1 {
  width: 100%;
  height: 100%;
  background: url(../images/an-bg-2.jpg) no-repeat center center / 100% 100%;
}
.an-text {
  width: 6.15rem;
  height: 0.62rem;
}
.an-text img {
  width: 6.15rem;
  height: 0.62rem;
}
.an-guang {
  width: 4.64rem;
  height: 8.18rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 9%;
  mix-blend-mode: screen;
  /* animation: blink 1s linear infinite; */
}
.an-c {
  width: 7.5rem;
  height: 6.99rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 17%;
  mix-blend-mode: screen;
}
.an-q {
  width: 5.71rem;
  height: 2.07rem;
  position: absolute;
  left: 10%;
  top: 49.5%;
  z-index: 2;
}
.an-g {
  width: 2.16rem;
  height: 6.06rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 30%;
  z-index: 1;
}
@keyframes rocket-vibrate {
  0% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(1.5%);
  }
  50% {
    transform: translateX(0%);
  }
  75% {
    transform: translateX(-1.5%);
  }
  100% {
    transform: translateX(0%);
  }
}
.an-xin {
  width: 7.5rem;
  height: 5.6rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 10%;
  left: 20%;
  z-index: 30;
  animation: blink 2s linear infinite;
}
.an-text3 {
  width: 4.67rem;
  height: 0.76rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 24%;
  z-index: 20;
}
.an-text-box {
  position: absolute;
  width: 6.57rem;
  height: 3.57rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url('../images/an-bg.png') no-repeat center center / 100% 100%;
  display: flex;
  align-items: center;
  bottom: 3%;
  justify-content: center;
  opacity: 0;
  transition: all 0.8s;
  z-index: 50;
}
.an-text-box img {
  width: 5.81rem;
  height: 2.83rem;
  transition: all 0.8s;
  opacity: 0;
}
.n-q-box {
  width: 100%;
  height: auto;
  position: relative;
  top: 26%;
}
.neng {
  position: absolute;
  top: 0.26rem;
  right: 24%;
  width: 1.6rem;
  height: 1.6rem;
  /* background: url('../images/neng-1.png')no-repeat center center /100% 100%; */
}
.neng .bgs {
  width: 1.6rem;
  height: 1.6rem;
  z-index: 10;
}
.neng .n-guang {
  width: 2.13rem;
  height: 2.13rem;
  position: absolute;
  top: -16%;
  left: -17%;
  animation: blink 2s linear infinite;
  /* right: 0;
    bottom: 0;
    margin: auto; */
}
.n-x {
  width: 1.78rem;
  height: 1rem;
  position: absolute;
  top: 56%;
  right: 80%;
  overflow: hidden;
  z-index: 1;
}
.n-x img {
  width: 1.78rem;
  height: 1rem;
}
.n-1s {
  width: 2.13rem;
  height: 2.13rem;
  position: absolute;
  top: -3.1%;
  right: 13.3%;
  animation: blink 2s linear infinite;
  z-index: 30;
}
.n-2s {
  width: 2.29rem;
  height: 2.3rem;
  position: absolute;
  top: 16.2%;
  left: 4%;
  animation: blink 2.2s linear infinite;
  z-index: 30;
}
.n-3s {
  width: 1.79rem;
  height: 1.79rem;
  position: absolute;
  top: 40.5%;
  left: 27.5%;
  animation: blink 2s linear infinite;
}
.g-1s {
  width: 1.49rem;
  height: 1.49rem;
  position: absolute;
  top: -1%;
  right: 32%;
  z-index: 50;
  /* mix-blend-mode: screen; */
  animation: blink 1.9s linear infinite;
}
.n-4s {
  width: 1.8rem;
  height: 1.8rem;
  position: absolute;
  top: 64.4%;
  left: 12%;
  animation: blink 2.2s linear infinite;
}
.n-5s {
  width: 1.58rem;
  height: 1.58rem;
  position: absolute;
  top: 76%;
  right: 17%;
  animation: blink 2.2s linear infinite;
}
.g2s {
  top: 21%;
  right: 51%;
}
.g3s {
  top: 42%;
  right: 35%;
}
.g4s {
  top: 74%;
  right: 64%;
}
.g5s {
  top: 70%;
  right: 30%;
}
.g-b-1 {
  width: 3.46rem;
  height: 1.19rem;
  position: absolute;
  top: 0%;
  left: -2%;
  display: flex;
  z-index: 40;
  align-items: center;
  justify-content: center;
  background: url('../images/g-b-1.png') no-repeat center center / 100% 100%;
}
.g-b-2 {
  width: 4.51rem;
  height: 1.38rem;
  position: absolute;
  top: 27%;
  right: -10%;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/q-t-b.png') no-repeat center center / 100% 100%;
}
.g-b-3 {
  width: 3.22rem;
  height: 0.96rem;
  position: absolute;
  top: 47%;
  z-index: 40;
  right: -5.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/bg-322.png') no-repeat center center / 100% 100%;
}
.g-b-4 {
  z-index: 40;
  width: 2.44rem;
  height: 1.1rem;
  position: absolute;
  top: 83.4%;
  left: 20.9%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/b-244.png') no-repeat center center / 100% 100%;
}
.g-b-1 img {
  width: 2.27rem;
  height: auto;
}
.g-b-2 img {
  width: 4.04rem;
  height: auto;
}
.g-b-3 img {
  width: 2.92rem;
  height: auto;
}
.g-b-4 img {
  width: 1.97rem;
  height: auto;
}
.opt {
  opacity: 0;
}
.bg-n {
  opacity: 0;
}
.qiu-sb {
  width: 6.12rem;
  height: 8.99rem;
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
}
.qiu-sb .images {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
}
.qiu-sb .images-bgs {
  width: 4.29rem;
  height: 6.74rem;
  z-index: 2;
  position: absolute;
  top: 15%;
  left: 12%;
}
.x-1 {
  position: absolute;
  top: 83%;
  right: 1.6rem;
  width: 0.73rem;
  height: 0.65rem;
  z-index: 1;
}
.x-2 {
  position: absolute;
  top: 74%;
  right: 1.66rem;
  width: 0.89rem;
  height: 0.79rem;
  z-index: 1;
}
.x-3 {
  position: absolute;
  top: 74.5%;
  left: 1.2rem;
  width: 0.72rem;
  height: 0.58rem;
  z-index: 1;
}
.x-4 {
  position: absolute;
  top: 74.5%;
  right: 2%;
  width: 2.12rem;
  height: 1.08rem;
  z-index: 1;
}
.an-3-t {
  width: 5.91rem;
  height: 1.99rem;
  position: absolute;
  top: 21%;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/an-3-t.png) no-repeat center center / 100% 100%;
}
.an-3-t img {
  width: 5.35rem;
  height: 1.43rem;
}
.childs {
  width: 5.25rem;
  height: 2.83rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 39%;
}
.an-last {
  background: url(../images/an-last.jpg) no-repeat center center / 100% 100%;
}
.an-xiang {
  width: 100%;
  height: 4.33rem;
  position: absolute;
  bottom: 0;
  left: 0;
}
.an-xiang .images {
  width: 100%;
  height: 100%;
  z-index: 20;
  position: absolute;
}
.lu {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 5.02rem;
  height: 1.61rem;
}
.p-1 {
  position: absolute;
  top: -5%;
  right: 11%;
  width: 0.41rem;
  height: 0.3rem;
}
.p-2 {
  position: absolute;
  top: -13%;
  right: 19%;
  width: 0.7rem;
  height: 0.51rem;
}
.p-3 {
  position: absolute;
  top: -26%;
  right: 32%;
  width: 4.37rem;
  height: 1.99rem;
  z-index: 10;
}
.p-3 img:first-child {
  width: 100%;
  height: 100%;
}
.p-3 img:last-child {
  width: 3.85rem;
  height: 1.43rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.qn-center {
  width: 100%;
  height: 12.9rem;
  position: absolute;
  z-index: 10;
  top: 6%;
}
.diban {
  mix-blend-mode: screen;
  position: absolute;
  width: 100%;
  height: 2.58rem;
  top: 67%;
}
.cjb {
  width: 7.07rem;
  height: 6.01rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 35%;
  mix-blend-mode: screen;
  z-index: 2;
}
.qn-guang {
  width: 1.8rem;
  height: 3.59rem;
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  margin: 0 auto;
  mix-blend-mode: screen;
  z-index: 2;
}
.qn-guang.active {
  animation: guang-top 0.5s linear;
  animation-fill-mode: forwards ;
}
.qn-guang-dh {
  width: 1.57rem;
  height: 1.61rem;
  mix-blend-mode: screen;
  position: absolute;
  top: 3%;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0 auto;
  opacity: 0;
}
.qn-guang-dh.active {
  animation: guang-top-1 500ms linear;
  animation-fill-mode: forwards ;
}
@keyframes guang-top-1 {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  25% {
    opacity: 0;
    transform: scale(0.6);
  }
  50% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  75% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes guang-top {
  0% {
    height: 3.59rem;
    /* transform: translateY(0%); */
  }
  25% {
    /* transform: translateY(-10%); */
    height: 4.59rem;
  }
  50% {
    /* transform: translateY(-20%); */
    height: 5.59rem;
  }
  75% {
    /* transform: translateY(-30%); */
    height: 6.59rem;
  }
  100% {
    transform: translateY(-40%);
    height: 6.59rem;
  }
}
.qineng-text {
  width: 6.57rem;
  height: 3.57rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 60;
  transition: all 0.8s;
  background: url(../images/qneng-11.png) no-repeat center center / 100% 100%;
}
.qineng-text img {
  width: 5.81rem;
  height: 2.83rem;
  opacity: 0;
  transition: all 0.8s;
}
.qn-small {
  width: 6.31rem;
  height: 0.6rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 19%;
  opacity: 0;
  transition: all 0.3s;
}
.mother {
  width: 100%;
  height: auto;
  position: absolute;
  top: 26%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mother .imgs {
  width: 2.36rem;
  height: 3.45rem;
}
.mother .left {
  width: 1.77rem;
  height: 1.52rem;
  position: absolute;
  left: 8%;
  opacity: 0;
  transition: all 0.8s;
  top: 28%;
}
.mother .right {
  width: 1.37rem;
  height: 1.51rem;
  position: absolute;
  right: 14%;
  top: 28%;
  opacity: 0;
  transition: all 1s;
}
.qn-bit-center {
  width: 6.11rem;
  height: 1.68rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 54%;
  position: absolute;
  opacity: 0;
  transition: all 1.2s;
}
.yun {
  width: 6.14rem;
  height: 2.3rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 12%;
  position: absolute;
  overflow: hidden;
  opacity: 0;
  transition: all 0.8s;
  background: url(../images/yun.png) no-repeat center center / 100% 100%;
}
.yun img:first-child {
  width: 1.1rem;
  height: 1.73rem;
  position: absolute;
  top: 0.36rem;
  left: 0.17rem;
  opacity: 0;
  transition: all 1.2s;
}
.yun img:nth-child(2) {
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  top: 0.8rem;
  left: 1.44rem;
  opacity: 0;
  transition: all 1.2s;
}
.yun img:nth-child(4) {
  width: 0.3rem;
  height: 0.21rem;
  position: absolute;
  top: 0.8rem;
  left: 3.74rem;
  opacity: 0;
  transition: all 1.2s;
}
.yun img:nth-child(3) {
  width: 1.74rem;
  height: 1.74rem;
  position: absolute;
  top: 0.36rem;
  left: 1.8rem;
  opacity: 0;
  transition: all 1.2s;
}
.yun img:nth-child(5) {
  width: 2.79rem;
  height: 4.59rem;
  position: absolute;
  top: -2.5rem;
  right: -0.6rem;
  opacity: 0;
  transition: all 1.2s;
}
.qn-3-big {
  width: 7.5rem;
  height: 7.87rem;
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  margin: 0 auto;
  mix-blend-mode: screen;
  z-index: 2;
}
.qn-qiu {
  width: 5.9rem;
  height: 3.23rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  opacity: 1;
  margin: 0 auto;
}
.qn-wl {
  width: 5.56rem;
  height: 2.29rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 48%;
  margin: 0 auto;
}
@keyframes qn-top-1 {
  0% {
    transform: translateY(0%);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5%);
  }
  100% {
    opacity: 1;
    transform: translateY(-10%);
  }
}
@keyframes qn-bt-2 {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(10%);
  }
}
.nq-bottoms .img.active {
  animation: qn-bt-2 1000ms linear;
  animation-fill-mode: forwards ;
}
.nq-bottoms {
  width: 100%;
  height: auto;
  position: absolute;
  top: 9.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 3.2rem;
}
.nq-bottoms .img {
  width: 2.88rem;
  height: 3.2rem;
  transition: all 0.8s;
}
.nq-bottoms .img:first-child {
  position: absolute;
  left: -0.1rem;
  top: 0;
}
.nq-bottoms .img:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;
}
.nq-bottoms .img:nth-child(3) {
  position: absolute;
  right: -0.1rem;
  top: 0;
}
.nq-bottoms .img .images {
  mix-blend-mode: screen;
  width: 100%;
  height: 100%;
}
.last-img {
  position: absolute;
  top: 20%;
  left: 24%;
  width: 1.61rem;
  height: auto;
}
.xiang-box {
  width: 2.48rem;
  height: 3.11rem;
  position: absolute;
  top: 0;
  right: 0.3rem;
  z-index: 999999;
  animation: bigs 2.6s cubic-bezier(0.42, 0, 0.34, 0.67) infinite;
}
.xiang-box.small {
  width: 1.9rem;
  left: 1rem;
  height: 1.76rem;
  animation: bigs 2s cubic-bezier(0.42, 0, 0.34, 0.67) infinite;
  top: 2rem;
}
.xiang-box img:first-child {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateX(0deg);
  z-index: 10000;
}
.xiang-box.small .nei {
  width: 1.4rem;
  height: 1.09rem;
  top: 0;
  left: -0.6rem;
}
.xiang-box.small .wai {
  width: 1.44rem;
  height: 0.61rem;
  top: 0.4rem;
  left: -0.6rem;
}
.nei {
  width: 2.34rem;
  height: 1.824rem;
  position: absolute;
  top: 0;
  left: -1.6rem;
  animation: left 1.4s ease-in-out infinite;
}
.wai {
  width: 2.4rem;
  height: 1.016rem;
  position: absolute;
  top: 1rem;
  left: -1.6rem;
  transform: rotate(-7deg);
  animation: left2 1.4s ease-in-out infinite;
  /* z-index: 999999; */
  /* animation: flight-right .5s ease-in-out infinite;

transform-origin: 0 1.27rem; */
}
@keyframes left {
  0% {
    transform: rotateY(0deg);
    transform-origin: right center;
    perspective: 201px;
  }
  50% {
    transform: rotateY(20deg);
    transform-origin: right center;
    perspective: 201px;
  }
  100% {
    transform: rotateY(0deg);
    transform-origin: right center;
    perspective: 201px;
  }
}
@keyframes left2 {
  0% {
    transform: rotateZ(0deg);
    transform-origin: right center;
    perspective: 201px;
  }
  50% {
    transform: rotateY(0deg) rotateZ(-5deg);
    transform-origin: right center;
    perspective: 201px;
  }
  100% {
    transform: rotateY(0deg) rotateZ(0deg);
    transform-origin: right center;
    perspective: 201px;
  }
}
@keyframes bigs {
  0% {
    transform: rotateY(deg) rotateZ(0deg);
    transform-origin: left center;
    perspective: 201px;
  }
  50% {
    transform: rotateY(5deg) rotateZ(-5deg);
    transform-origin: left center;
    perspective: 201px;
  }
  100% {
    transform: rotateY(0deg) rotateZ(0deg);
    transform-origin: left center;
    perspective: 201px;
  }
}
.r-bgs {
  background: url(../images/r-bgs.jpg) no-repeat center center / 100% 100%;
  background-size: cover;
}
.r-bgs2 {
  background: url(../images/bs-2.jpg) no-repeat center center / 100% 100%;
  background-size: cover;
}
.s-481 {
  width: 4.81rem;
  height: 0.22rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: all 0.3s;
  top: 2.8rem;
}
.left-con {
  width: 5.61rem;
  height: 2.06rem;
  position: absolute;
  top: 3.3rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateX(130%);
  transition: all 0.8s;
}
.left-con.active {
  transform: translateX(0);
}
.right-con.active {
  transform: translateX(0);
}
.right-con {
  width: 5.74rem;
  height: 2.06rem;
  position: absolute;
  top: 5.3rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateX(-130%);
  transition: all 0.8s;
}
.bt-context {
  width: 6.6rem;
  height: 4.13rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: all 1s;
  top: 7.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/660-413.png) no-repeat center center / 100% 100%;
}
.bt-context img {
  width: 5.76rem;
  height: 2.8rem;
  margin-top: 0.5rem;
  transition: all 1s;
  opacity: 0;
}
.bt-context.active img {
  opacity: 1;
}
#product4 .big-title {
  width: 4.72rem;
  height: 1.99rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 1.3rem;
}
#product4 .imgs {
  width: 95%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 3.8rem;
}
#product4 .products {
  width: 7.5rem;
  height: 7.31rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 4rem;
  display: flex;
  justify-content: center;
}
#product4 .products .gimg {
  width: 5.64rem;
  height: 5.23rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;
  animation: blink 3s infinite;
  z-index: 10;
}
#product4 .test-bg img {
  width: 5.85rem;
  /* height: 2.55rem; */
}
#product4 .p-text {
  /* width: 5.9rem; */
  width: 100%;
  /* height: 0.61rem; */
}
#product4 .p-text img {
  /* width: 5.9rem; */
  width: 100%;
  /* height: 0.61rem; */
}
#product4 .small-1 {
  width: 5.89rem;
  height: 0.19rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 2.6rem;
  transition: all 1s;
  opacity: 0;
}
#product4 .peoples {
  width: 2.68rem;
  height: 2.34rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 4rem;
}
#product4 .peoples .big {
  width: 100%;
  height: 100%;
  transition: all 1s;
  opacity: 0;
}
#product4 .peoples .big-t {
  width: 0.69rem;
  height: 0.53rem;
  position: absolute;
  top: 0.7rem;
  left: 0.3rem;
  transition: all 1s;
  opacity: 0;
}
#product4 .peoples .r-1 {
  width: 1.1rem;
  height: 1.1rem;
  position: absolute;
  top: -0.9rem;
  left: -0.9rem;
  opacity: 0;
  transition: all 0.8s;
}
#product4 .peoples .r-2 {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 0.7rem;
  left: -1.4rem;
  opacity: 0;
  transition: all 0.8s;
}
#product4 .peoples .r-3 {
  width: 1.48rem;
  height: 1.48rem;
  position: absolute;
  top: 0.7rem;
  right: -1.4rem;
  opacity: 0;
  transition: all 0.8s;
}
#product4 .peoples .r-4 {
  width: 1.21rem;
  height: 1.21rem;
  position: absolute;
  top: -1rem;
  right: -0.47rem;
  opacity: 0;
  transition: all 0.8s;
}
#product4 .r-texts {
  width: 5.9rem;
  height: 0.79rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 7rem;
  transition: all 1s;
  opacity: 0;
}
#product4 .bot {
  width: 6.93rem;
  height: 5.16rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 7.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s;
}
#product4 .bot img {
  width: 90%;
  transition: all 1s;
  opacity: 0;
}
#product4 .bot .x {
  width: 30%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 1.4rem;
  opacity: 0;
  transition: all 1s;
}
#product4 .bts {
  width: 6.09rem;
  height: 10.5rem;
  position: absolute;
  top: 2.6rem;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#product4 .bts .bigs {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}
#product4 .bts .b5 {
  width: 0.85rem;
  height: 0.92rem;
  position: absolute;
  top: 5rem;
  left: 1.2rem;
  animation: shui 6s linear infinite alternate;
}
#product4 .bts .b6 {
  width: 1.23rem;
  height: 1.34rem;
  position: absolute;
  top: 6rem;
  right: 1rem;
  animation: shui 4s linear infinite alternate;
}
#product4 .bts .b7 {
  width: 0.75rem;
  height: 0.73rem;
  position: absolute;
  bottom: 0rem;
  left: 3.4rem;
  animation: shui 5s linear infinite alternate;
}
#product4 .bts .b9 {
  width: 0.67rem;
  height: 0.64rem;
  position: absolute;
  bottom: 1.8rem;
  left: 1rem;
  animation: shui 2s linear infinite alternate;
}
#product4 .bts .b5s {
  width: 0.65rem;
  height: 0.64rem;
  position: absolute;
  bottom: 0.6rem;
  right: 1rem;
  animation: shui 3s linear infinite alternate;
}
.dies {
  width: 6.07rem;
  height: 5.25rem;
  position: absolute;
  top: 5.55rem;
  left: 0.7rem;
  mix-blend-mode: screen;
}
.b-xiang {
  width: 3.12rem;
  position: absolute;
  top: calc(50% + 0.3rem);
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 敏佳 */
.y1 {
  position: absolute;
  width: 1.4rem;
  right: 1.5rem;
  top: -0.4rem;
  opacity: 0;
}
.a1-s-box {
  position: relative;
  top: -3%;
}
.a1-s {
  width: 6rem;
  display: block;
  margin: 0 auto;
}
.a1-s-box .add {
  width: 0.38rem;
  position: absolute;
  left: 3.9rem;
  bottom: -0.3rem;
}
.a1-s-box .add2 {
  left: auto;
  right: 1.25rem;
  bottom: 0.55rem;
}
.product-bg .tu {
  width: 5.32rem;
  display: block;
  margin: auto;
  margin-top: 0.7rem;
}
.product-bg .tu2 {
  display: none;
}
.product-bg .s-img {
  width: 100%;
  position: absolute;
}
.img1588D {
  position: absolute;
  width: 3.4rem;
  z-index: 3;
  bottom: 14%;
  left: 4%;
  animation: zhuan2 4s linear infinite alternate;
}
.zs {
  position: absolute;
  width: 60%;
  z-index: 3;
  bottom: 10%;
  left: 20%;
}
.sesstion {
  position: relative;
}
.sesstion img:first-child {
  width: 6rem;
  display: block;
  margin: auto;
  position: relative;
  z-index: 2;
}
.sesstion .yuan {
  position: absolute;
  width: 2.2rem;
  left: 1rem;
  top: 0;
  z-index: 1;
  animation: zhuan2 4s linear infinite alternate;
}
.sesstion:nth-child(2) .yuan {
  animation: zhuan3 4s linear infinite alternate;
  width: 3.85rem;
  left: auto;
  right: 0.8rem;
  top: -0.6rem;
}
.sesstion:nth-child(2) .jian {
  animation: zhuan3 1.5s linear infinite alternate;
  width: 2rem;
  right: 1.4rem;
  top: 0.6rem;
  position: absolute;
  z-index: 2;
}
.sesstion:nth-child(3) .yuan {
  width: 1.93rem;
  left: 1.2rem;
}

/* 启能 */
#product2 .guang-1 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 6%;
  opacity: 0;
}
#product2 .n1 {
  z-index: 2;
  position: absolute;
  width: 0.9rem;
  left: 0.9rem;
  top: -0.3rem;
  animation: zhuan2 4s linear infinite alternate;
}
#product2 .n2 {
  z-index: 2;
  position: absolute;
  top: -1.2rem;
  left: auto;
  right: 1.95rem;
  width: 1.1rem;
  animation: zhuan2 4.4s linear infinite alternate;
}
#product2 .n3 {
  z-index: 2;
  position: absolute;
  top: 0.6rem;
  left: auto;
  right: 0.5rem;
  width: 0.7rem;
  animation: zhuan2 2s linear infinite alternate;
}
#product2 .n4 {
  z-index: 2;
  position: absolute;
  top: 1.6rem;
  left: auto;
  right: 1.25rem;
  width: 0.6rem;
  animation: zhuan2 3s linear infinite alternate;
}
#product2 .n5 {
  z-index: 2;
  position: absolute;
  top: 1.4rem;
  left: 0.8rem;
  width: 1.7rem;
  animation: zhuan2 5s linear infinite alternate;
}
.qn-info3 .s-tit {
  position: relative;
  width: 5rem;
  left: 50%;
  top: -1.2rem;
  transform: translateX(-50%);
}
.qn-info3 .s2-guang {
  width: 4rem;
  position: absolute;
  left: -0.8rem;
  bottom: 0;
}
.qn-info3 .s2-yuan {
  position: absolute;
  left: 0.4rem;
  bottom: 0.6rem;
  width: 2.3rem;
  animation: zhuan2 4s linear infinite alternate;
}
.qn-info3 .zs {
  position: absolute;
  bottom: 8%;
}
.qn-info4 .qn-s-box {
  position: relative;
}
.qn-info4 .qn-s-box.last .b-img {
  width: 90%;
}
.qn-info4 .qn-s-box .b-img {
  width: 100%;
  left: 5%;
  position: relative;
}
.qn-info4 .guang1 {
  width: 1rem;
  position: absolute;
  right: 31%;
  top: 48%;
  z-index: 2;
  animation: blink 2s infinite;
}
.qn-info4 .guang2 {
  width: 1.5rem;
  position: absolute;
  right: 9%;
  top: 30%;
  z-index: 2;
  animation: blink 2.5s infinite;
}
.qn-info4 .s3-yuan {
  position: absolute;
  width: 55%;
  right: 13%;
  top: 4%;
  animation: zhuan2 4s linear infinite alternate;
}
.qn-info4 .zs {
  position: relative;
  bottom: auto;
  top: 2%;
}
#product3 .n1 {
  z-index: 2;
  position: absolute;
  width: 1rem;
  left: 1rem;
  top: 1rem;
  animation: zhuan2 4s linear infinite alternate;
}
#product3 .n2 {
  z-index: 2;
  position: absolute;
  width: 0.86rem;
  left: 1.65rem;
  top: 2.4rem;
  animation: zhuan2 3s linear infinite alternate;
}
#product3 .n3 {
  z-index: 2;
  position: absolute;
  width: 1rem;
  left: auto;
  right: 1.54rem;
  top: -0.3rem;
  animation: zhuan2 2s linear infinite alternate;
}
#product3 .n4 {
  z-index: 2;
  position: absolute;
  width: 0.74rem;
  left: auto;
  right: 1.3rem;
  top: 1.2rem;
  animation: zhuan2 4s linear infinite alternate;
}
#product3 .n5 {
  z-index: 2;
  position: absolute;
  width: 0.72rem;
  left: auto;
  right: 1.82rem;
  top: 2.1rem;
  animation: zhuan2 5s linear infinite alternate;
}
.an-info2 .an-box {
  position: absolute;
  left: 0;
  top: 15%;
  width: 100%;
}
.an-info2 .an-box .x-bg {
  width: 100%;
}
#product3 .an-info2 .an-box .n1 {
  z-index: 2;
  position: absolute;
  width: 1.14rem;
  left: 1.5rem;
  top: 2rem;
  animation: zhuan2 4s linear infinite alternate;
}
#product3 .an-info2 .an-box .n2 {
  z-index: 2;
  position: absolute;
  width: 1.14rem;
  left: 0.4rem;
  top: 4.1rem;
  animation: zhuan2 4.5s linear infinite alternate;
}
#product3 .an-info2 .an-box .n3 {
  z-index: 2;
  position: absolute;
  width: 1.14rem;
  left: 0.55rem;
  top: auto;
  bottom: 2.65rem;
  animation: zhuan2 3s linear infinite alternate;
}
#product3 .an-info2 .an-box .n4 {
  z-index: 2;
  position: absolute;
  width: 1.14rem;
  left: 2.18rem;
  top: auto;
  bottom: 1.1rem;
  animation: zhuan2 2s linear infinite alternate;
}
#product3 .an-info2 .an-box .n5 {
  z-index: 2;
  position: absolute;
  width: 1.14rem;
  left: auto;
  top: auto;
  bottom: 1.6rem;
  right: 1.15rem;
  animation: zhuan2 3.8s linear infinite alternate;
}
#product3 .an-info2 .an-box .n6 {
  z-index: 2;
  position: absolute;
  width: 1.14rem;
  left: auto;
  top: auto;
  bottom: 4.1rem;
  right: 0.92rem;
  animation: zhuan2 5s linear infinite alternate;
}
.an-info2 .zs {
  left: auto;
  right: 10%;
}
.an-info3 .an-box {
  position: absolute;
  left: 0;
  top: 15%;
  width: 100%;
}
.an-info3 .an-box .x-bg {
  width: 100%;
}
.an-info3 .guang {
  /* width: 90%; */
  width: 0%;
  position: absolute;
  left: 5%;
  bottom: 0;
  transition: all 0.5s linear;
}
.an-info3 .guang.curr {
  width: 90%;
}
#product4 .guang-1 {
  top: 44%;
  width: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#product4 .n1 {
  z-index: 2;
  position: absolute;
  width: 0.8rem;
  left: 1.5rem;
  top: 1rem;
  animation: zhuan2 4s linear infinite alternate;
}
#product4 .n2 {
  z-index: 2;
  position: absolute;
  width: 0.65rem;
  left: 1.8rem;
  top: 2.7rem;
  animation: zhuan2 2s linear infinite alternate;
}
#product4 .n3 {
  z-index: 2;
  position: absolute;
  width: 1rem;
  left: auto;
  right: 1.6rem;
  top: 0;
  animation: zhuan2 3s linear infinite alternate;
}
#product4 .n4 {
  z-index: 2;
  position: absolute;
  width: 0.4rem;
  left: auto;
  right: 1.8rem;
  top: 2.6rem;
  animation: zhuan2 3.7s linear infinite alternate;
}
#product4 .n5 {
  z-index: 2;
  position: absolute;
  width: 0.76rem;
  left: auto;
  right: 1.65rem;
  top: 3.3rem;
  animation: zhuan2 5s linear infinite alternate;
}
.ra-info2 .ra-box {
  position: relative;
}
.ra-info2 .ra-box .s1-1 {
  width: 80%;
  margin-left: 10%;
}
.ra-info2 .ra-box .x-bg {
  width: 95%;
}
.ra-info2 .ra-box .s1-2-1 {
  position: absolute;
  width: 1rem;
  left: 24%;
  bottom: 42%;
  animation: zhengdang 2s linear infinite alternate;
}
.ra-info2 .ra-box .s1-2-2 {
  position: absolute;
  width: 0.8rem;
  left: 42%;
  bottom: 48%;
  animation: zhengdang 3s linear infinite alternate;
}
@keyframes zhengdang {
  0% {
    transform: translateX(0) rotate(0);
  }
  50% {
    transform: translateX(-10px) rotate(10deg);
  }
  100% {
    transform: translateX(0) rotate(0);
  }
}
.ra-info2 .zs {
  position: relative;
  width: 90%;
  left: 5%;
  bottom: auto;
}
.ra-info3 .ra-box {
  position: relative;
}
.ra-info3 .ra-box .s2-1 {
  width: 80%;
  margin-left: 10%;
}
.ra-info3 .guang {
  width: 90%;
  margin-left: 5%;
}
.ra-info3 .x-xiang {
  position: absolute;
  width: 40%;
  height: auto;
  left: 30%;
  bottom: 12%;
  top: auto;
}
.ra-info3 .s2-4 {
  position: absolute;
  width: 14%;
  left: 43%;
  top: 2%;
  animation: zhuan2 5s linear infinite alternate;
}
.ra-info3 .s2-5 {
  position: absolute;
  width: 14%;
  left: 10%;
  top: 51.5%;
  animation: zhuan2 4s linear infinite alternate;
}
.ra-info3 .s2-6 {
  position: absolute;
  width: 14%;
  left: auto;
  right: 12%;
  top: 51.5%;
  animation: zhuan2 3.2s linear infinite alternate;
}
.ra-info4 .ra-box {
  position: relative;
}
.ra-info4 .ra-box .chang-bg {
  width: 96%;
  margin-left: 2%;
}
.ra-info4 .s3-2 {
  width: 1.2rem;
  position: absolute;
  left: 22%;
  top: 12%;
  animation: zhuan2 4s linear infinite alternate;
}
.ra-info4 .s3-3 {
  width: 1.2rem;
  position: absolute;
  left: 62%;
  top: 30%;
  animation: zhuan2 4.5s linear infinite alternate;
}
.ra-info4 .s3-4 {
  width: 1.2rem;
  position: absolute;
  left: 39%;
  top: 52.2%;
  animation: zhuan2 3.5s linear infinite alternate;
}
.ra-info4 .s3-5 {
  width: 1.8rem;
  position: absolute;
  left: auto;
  right: 0;
  top: 60%;
  animation: zhuan2 5s linear infinite alternate;
}
.ra-info4 .s3-6 {
  width: 1.14rem;
  position: absolute;
  left: 31%;
  top: 76%;
  animation: zhuan2 5.4s linear infinite alternate;
}
.ra-info4 .s3-7 {
  width: 0.6rem;
  position: absolute;
  left: 15.5%;
  top: 65%;
  animation: zhuan2 3.8s linear infinite alternate;
}
#product5 .bo1 {
  position: absolute;
  width: 90%;
  /* margin-left: 5%; */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#product5 .bo2 {
  position: absolute;
  width: 96%;
  /* margin-left: 5%; */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#product5 .guang-1 {
  width: 95%;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
}
#product5 .guang-2 {
  position: absolute;
  width: 80%;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
}
.mj-info3 .fz-1 {
  position: absolute;
  top: 42%;
  left: 14%;
  width: 6%;
  animation: zhuanFz 2.8s linear infinite alternate;
}
.mj-info3 .fz-2 {
  position: absolute;
  top: 47%;
  left: 34%;
  width: 5%;
  animation: zhuanFz 2.5s linear infinite alternate;
}
.mj-info3 .fz-3 {
  position: absolute;
  top: 52%;
  left: 48%;
  width: 5.3%;
  animation: zhuanFz 3s linear infinite alternate;
}
.mj-info3 .fz-4 {
  position: absolute;
  top: 48%;
  left: 60%;
  width: 5.3%;
  animation: zhuanFz 5s linear infinite alternate;
}
.mj-info3 .fz-5 {
  position: absolute;
  top: 42%;
  left: auto;
  right: 18%;
  width: 6%;
  animation: zhuanFz 4.6s linear infinite alternate;
}
@keyframes zhuanFz {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.mj-info3 .fenzi-l1 {
  position: absolute;
  left: 10%;
  top: 67%;
  width: 6%;
  animation: zhuan2 3.6s linear infinite alternate;
}
.mj-info3 .fenzi-l2 {
  position: absolute;
  left: 19%;
  top: 60%;
  width: 4%;
  animation: zhuan2 3.2s linear infinite alternate;
}
.mj-info3 .fenzi-r {
  position: absolute;
  right: 10%;
  top: 62%;
  width: 10%;
  animation: zhuan2 2.5s linear infinite alternate;
}
.mj-info3 .fenzi1 {
  position: absolute;
  width: 5%;
  top: 49%;
  left: 29%;
  animation: zhuan2 4s linear infinite alternate;
  z-index: 9;
}
.mj-info3 .fenzi2 {
  position: absolute;
  right: 36%;
  top: 62%;
  width: 2%;
  animation: zhuan2 4.8s linear infinite alternate;
  z-index: 9;
}
#product5 .n1 {
  z-index: 2;
  position: absolute;
  width: 0.6rem;
  left: 1.55rem;
  top: 0.7rem;
  animation: zhuan2 4s linear infinite alternate;
}
#product5 .n2 {
  z-index: 2;
  position: absolute;
  width: 0.85rem;
  left: 1rem;
  top: 1.75rem;
  animation: zhuan2 4.5s linear infinite alternate;
}
#product5 .n3 {
  z-index: 2;
  position: absolute;
  width: 1rem;
  left: 1.2rem;
  top: 3.1rem;
  animation: zhuan2 3.5s linear infinite alternate;
}
#product5 .n4 {
  z-index: 2;
  position: absolute;
  width: 1.12rem;
  right: 1.54rem;
  top: -0.5rem;
  animation: zhuan2 5s linear infinite alternate;
}
#product5 .n5 {
  z-index: 2;
  position: absolute;
  width: 0.7rem;
  right: 1.5rem;
  top: 1.1rem;
  animation: zhuan2 3s linear infinite alternate;
}
#product5 .n6 {
  z-index: 2;
  position: absolute;
  width: 0.75rem;
  right: 1.4rem;
  top: 3.5rem;
  animation: zhuan2 3.3s linear infinite alternate;
}
#product5 .n7 {
  z-index: 1;
  position: absolute;
  width: 0.5rem;
  right: 2.8rem;
  /* top: -0.2rem; */
  top: -0.6rem;
  animation: zhuan2 4s linear infinite alternate;
}
.qr-info2 .s1-1 {
  width: 100%;
}
.qr-info2 .s1-3 {
  width: 90%;
  position: absolute;
  left: 7%;
  bottom: 20%;
  z-index: 9;
}
.qr-info2 .s1-2 {
  width: 84%;
  position: absolute;
  left: 4%;
  bottom: 3%;
  z-index: 10;
}
.qr-info2 .s1-4 {
  position: absolute;
  z-index: 2;
  animation: zhuan2 4s linear infinite alternate;
  width: 0.8rem;
  left: 22%;
  top: 24.5%;
}
.qr-info2 .s1-5 {
  position: absolute;
  z-index: 2;
  animation: zhuan2 3.6s linear infinite alternate;
  width: 1.05rem;
  right: 18%;
  top: 30.5%;
}
.qr-info2 .s1-6 {
  position: absolute;
  z-index: 10;
  animation: zhuan2 4.7s linear infinite alternate;
  width: 1.5rem;
  left: 2%;
  top: 52%;
}
.qr-info2 .s1-7 {
  position: absolute;
  z-index: 10;
  animation: zhuan2 2.6s linear infinite alternate;
  width: 1.15rem;
  right: 9%;
  top: 49%;
}
.qr-info2 .s1-8 {
  position: absolute;
  z-index: 10;
  animation: zhuan2 3.6s linear infinite alternate;
  width: 1.3rem;
  right: 8%;
  top: 65%;
}
.qr-info2 .s1-9 {
  position: absolute;
  z-index: 10;
  animation: zhuan2 5.1s linear infinite alternate;
  width: 1.25rem;
  left: 17%;
  top: 76%;
}
.qr-info2 .s1-10 {
  position: absolute;
  z-index: 10;
  animation: zhuan2 2.4s linear infinite alternate;
  width: 1.1rem;
  right: 21%;
  top: 86%;
}
.qr-info3 .s2 {
  width: 100%;
}

.product6-7 .p-bg {
  background: url(../images/p6/bg.jpg) no-repeat center center / 100% 100%;
  background-size: cover;
}
.product6-7 .n1 {
  z-index: 2;
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 3.3rem;
  right: 1.6rem;
  animation: zhuan2 4s linear infinite alternate;

}
.product6-7 .n2 {
  z-index: 2;
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  top: 0.7rem;
  left: 1rem;
  animation: zhuan2 4.4s linear infinite alternate;
}
.product6-7 .n3 {
  z-index: 2;
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 1rem;
  right: 1rem;
  animation: zhuan2 4.8s linear infinite alternate;
}
.product6-7 .n4 {
  z-index: 2;
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: -0.1rem;
  right: 1.8rem;
  animation: zhuan2 5.2s linear infinite alternate;
}
.product6-7 .n5 {
  z-index: 2;
  position: absolute;
  width: 2.4rem;
  height: 2rem;
  top: 2rem;
  left: 0.5rem;
  animation: zhuan2 5.6s linear infinite alternate;
}
.product6-7 .qr-info1 .p-text {
  margin-top: 0.2rem;
}
.product6-7 .qr-info1 .s1-1 {
  position: absolute;
  top: 22vh;
  right: 0;
  width: 5.92rem;
  height: 5rem;
  animation: zhuan2 4s linear infinite alternate;
}
.product6-7 .qr-info1 .s1-2 {
  position: absolute;
  /* top: 8.55rem; */
  top: 51vh;
  left: 0.8rem;
  width: 2.93rem;
  height: 2.83rem;
  animation: zhuan2 4.4s linear infinite alternate;
}
.product6-7 .qr-info1 .s1-3 {
  position: absolute;
  top: 70vh;
  right: 0.8rem;
  width: 3.31rem;
  height: 3.31rem;
  animation: zhuan2 4.8s linear infinite alternate;
}
.product6-7 .qr-info1 .wx,.product6-7 .qr-info2 .wx,.product6-7 .qr-info3 .wx {
  position: absolute;
  font-family: "MEllePRC";
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0.5rem;
  font-size: 0.12rem;
  font-weight: 600;
  padding: 0 0.8rem;
  color: rgba(107, 50, 143, 0.753);
}
.product6-7 .qr-info2 .b-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.6rem;
  margin: auto;
  width: 75%;
}
.product6-7 .qr-info2 .b-text img {
  width: 100%;
}
.product6-7 .qr-info2 .wx {
  bottom: 1rem;
}
.product6-7 .qr-info3 .wx {
  padding: 0 0.8rem;
  bottom: 1rem;
}
.product6-7 .qr-info1 .zs {
  width: 110%;
  left: -5%;
  bottom: 5%;
}
.product6-7 .qr-info2 .s1-1 {
  position: absolute;
  top: 40.5vh;
  left: 0.4rem;
  width: 2rem;
  height: 2rem;
  /* animation: zhuan2 4s linear infinite alternate; */
}
.product6-7 .qr-info3 .s3-1 {
  position: absolute;
  top: 53vh;
  left: 0.4rem;
  width: 1.2rem;
  height: 1.1rem;
  animation: zhuan2 4s linear infinite alternate;
}
.product6-7 .qr-info3 .s3-2 {
  position: absolute;
  top: 44vh;
  right: 0.2rem;
  width: 1.4rem;
  height: 1.18rem;
  animation: zhuan2 4.4s linear infinite alternate;
}
.product6-7 .qr-info3 .s3-3 {
  position: absolute;
  top: 65vh;
  left: 1.5rem;
  width: 0.9rem;
  height: 0.9rem;
  animation: zhuan2 4.8s linear infinite alternate;
}
.product6-7 .qr-info3 .s3-4 {
  position: absolute;
  top: 65vh;
  right: 2.5rem;
  width: 1.2rem;
  height: 1.2rem;
  animation: zhuan2 5.2s linear infinite alternate;
}
.product6-7 .qr-info3 .s3-5 {
  position: absolute;
  top: 59vh;
  right: 0.9rem;
  width: 1.1rem;
  height: 0.9rem;
  animation: zhuan2 5.6s linear infinite alternate;
}
.product6-7 .p-text .dong {
  position: relative;
  transform: scale(0.8);
}
/* .product6-7 .p-text .dong::before {
  z-index: 8;
  position: absolute;
  content: "";
  inset: 0;
  margin: auto;
  width: 50%;
  height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #fff);
  filter: blur(10px);
} */
.product6-7 .p-text .dong img {
  position: relative;
  z-index: 9;
}

.ccc1 .test-bg {
  top: unset;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: "MEllePRC";
  gap: 0.1rem;
  color: rgba(107, 50, 143, 0.753);
  font-weight: 500;
  padding: 0 0.4rem;
  font-size: 0.18rem;
  box-sizing: border-box;
}
.ccc1 .test-bg .text-view {
  display: flex;
}
.ccc1 .test-bg .text-view span {
  flex-shrink: 0;
}
.ccc1 .test-bg .text-view p {
  text-align: justify;
}
#product8 .p-bg {
  background: url(../images/p8/bg-min.jpg) no-repeat center center / 100% 100%;
  background-size: cover;
}
#product8 .wx {
  color: #eebe60;
  font-weight: 400;
}
#product8 .box-2 .wx {
  color: #f0c570;
} 
#product8 .box-1 .p-text {
  width: 4.7rem;
  margin-top: 0.8rem;
  transform: scale(1);
}
#product8 .box-1 .p-text .dong {
  transform: translateX(-0.2rem);
}
#product8 .box-1 .sub-title {
  width: 5.5rem;
  margin: 0.1rem auto 0;
}
#product8 .box-1 .sub-title img {
  width: 100%;
}
#product8 .box-1 .main-view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 8.5rem;
}
#product8 .box-1 .main-view .main-image {
  position: relative;
  z-index: 2;
  width: 100%;
}
#product8 .box-1 .main-view .jiantou {
  position: absolute;
  z-index: 1;
  left: -4%;
  top: 6%;
  right: 0;
  margin: auto;
  width: 75%;
  transform: scale(0);
  transition: all .5s;
}
#product8 .box-1 .main-view .jiantou.curr {
  transform: scale(1);
}
#product8 .box-1 .main-view .z1 {
  z-index: 3;
  position: absolute;
  top: 7%;
  left: 8%;
  right: 0;
  margin: auto;
  width: 30%;
  opacity: 1;
  transition: all .3s;
  animation: zhuan2 3s linear infinite alternate;
}
#product8 .box-1 .main-view .z1.curr {
  opacity: 1;
}
 
 #product8 .box-2 .p-text {
  width: 80%;
  margin-top: 0.8rem;
  transform: scale(1);
}
#product8 .box-2 .p-text .dong {
  transform: translateX(-0.2rem);
}
#product8 .box-2 .sub-title {
  width: 94vw;
  margin: 0.2rem auto 0;
}
#product8 .box-2 .sub-title img {
  width: 100%;
}
#product8 .box-2 .main-view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 9.28rem;
}
#product8 .box-2 .main-view .main-image {
  position: relative;
  z-index: 2;
  width: 100%;
}
#product8 .box-2 .main-view .zs {
  z-index: 3;
  position: absolute;
  left: 4vw;
  top: 19vh;
  width: 28vw;
  animation: zhuan2 3s linear infinite alternate;
}
#product8 .box-2 .main-view .jiantou {
  z-index: 1;
  position: absolute;
  bottom: 3%;
  left: -5%;
  width: 100%;
  opacity: 0;
  height: 0;
  transition: all .5s;
}
#product8 .box-2 .main-view .jiantou.curr {
  opacity: 1;
  height: 90%;
}
#product8 .box-3 .p-text {
  width: 88%;
  margin-top: 0.8rem;
  transform: scale(1);
}
#product8 .box-3 .p-text .dong {
  transform: translateX(-0.2rem);
}
#product8 .box-3 .sub-title {
  width: 5.5rem;
  margin: 0.2rem auto 0;
}
#product8 .box-3 .sub-title img {
  width: 100%;
}
#product8 .box-3 .bottom-img {
  position: absolute;
  bottom: 0.5rem;
  width: 100%;
  height: 7rem;
  background: url(../images/p8/bottom-3.png)no-repeat center center /100% 100%;
  background-size: 100%;
}
#product8 .wx {
  padding: 0 0.4rem;
  font-size: 0.14rem;
}
#product8 .box-3 .bottom-img .b-z-1 {
  position: absolute;
  right: 1.8rem;
  bottom: 2.4rem;
  width: 1.2rem;
  animation: zhuan2 5.5s linear infinite alternate;
}
#product8 .box-3 .bottom-img .b-z-2 {
  position: absolute;
  left: 2.5rem;
  bottom: 2.3rem;
  width: 1.2rem;
  animation: zhuan2 5s linear infinite alternate;
}
#product8 .box-3 .main-view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100vh;
  background: url(../images/p8/bg-3.jpg)no-repeat center center /100% 100%;
  background-size: 100%;
}
#product8 .box-3 .main-view .z-z-1 {
  position: absolute;
  left: 29vw;
  top: 48vh;
  width: 17.3vw;
  animation: zhuan2 3s linear infinite alternate;
}
#product8 .box-3 .main-view .z-z-2 {
  position: absolute;
  left: 11vw;
  top: 53.5vh;
  width: 15.5vw;
  animation: zhuan2 4s linear infinite alternate;
}