.p1_k {
  width: 99%;
  position: absolute;
  top: 85px;
  left: 0.5%;
}
.content_text {
  color: #fff;
  position: absolute;
  top: 22%;
  left: 45%;
  width: 45%;
  text-shadow: rgba(0, 0, 0, 1) 2px 10px 30px;
}
.content_text h4 {
  font-size: 0.5rem;
  margin-bottom: 0.2rem;
  font-family: "aAtmo";
  animation: sliderOns 0.8s 0s both;
  opacity: 0;
}
.changetext {
  position: relative;
  animation: sliderOns 0.8s 0.2s both;
  opacity: 0;
}
.content_text p {
  font-size: 0.24rem;
  line-height: 1.6;
  font-family: "poppins";
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.page_nagive {
  position: absolute;
  top: 5.3rem;
  left: 45%;
  width: 40%;
  animation: sliderOns 0.8s 0.4s both;
  opacity: 0;
}
.pliner {
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(196, 196, 196, 0),
    rgba(196, 196, 196, 0),
    rgba(196, 196, 196, 0.2),
    rgba(196, 196, 196, 0.5),
    rgba(196, 196, 196, 0.2),
    rgba(196, 196, 196, 0),
    rgba(196, 196, 196, 0)
  );
}
.page_clicker {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  padding: 0.2rem 0;
  overflow: hidden;
}
.page_clicker > div {
  cursor: pointer;
  position: relative;
  width: 30px;
  height: 12px;
  background: rgba(196, 196, 196, 0.5);
  transform: skew(-45deg);
  margin: 0 6px;
}
.page_clicker > div.current {
  background: rgba(196, 196, 196, 1);
  box-shadow: rgba(255, 87, 166, 0.4) 0 0 10px 5px;
}
.page_clicker > div.current:after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(196, 196, 196, 0.8);
  box-shadow: rgba(255, 87, 166, 0.4) 0 0 10px 5px;
  position: absolute;
  top: -3px;
  left: -5px;
}

.page_mover {
  width: 104%;
  position: absolute;
  top: -2%;
  left: -2%;
  z-index: 10;
}
.qx_conts{ width: 3.31rem; z-index: 20; position: absolute; right: -0.6rem; bottom: 0; perspective: 40rem;}
.qo_per{ position: absolute; top: 0; left: 0; width: 100%; transform-style: preserve-3d; transform: rotateY(0deg); transform-origin: 1.41rem 2.87rem;}
@keyframes rotateper{
  from{  transform: rotateY(0deg);}
  to{  transform: rotateY(360deg);}
}

.spaceship1 {
  width: 2.7%;
  top: 130%;
  left: 70%;
  position: absolute;
  animation: spaceship1 10s infinite linear;
}
@keyframes spaceship1 {
  from {
    top: 130%;
    left: 70%;
    transform: scale(1);
  }
  to {
    top: -26%;
    left: 130%;
    transform: scale(0.9);
  }
}
.spaceship2 {
  width: 2.4%;
  top: 113%;
  left: 66%;
  position: absolute;
  animation: spaceship2 12s infinite linear;
}
@keyframes spaceship2 {
  from {
    top: 113%;
    left: 66%;
    transform: scale(1);
  }
  to {
    top: -20%;
    left: 120%;
    transform: scale(0.9);
  }
}
.spaceship3 {
  width: 2.2%;
  top: 107%;
  left: 60%;
  position: absolute;
  animation: spaceship3 9s infinite linear;
}
@keyframes spaceship3 {
  from {
    top: 107%;
    left: 60%;
    transform: scale(1);
  }
  to {
    top: -14%;
    left: 114%;
    transform: scale(0.9);
  }
}
.spaceship4 {
  width: 3.1%;
  top: 50%;
  left: -20%;
  position: absolute;
  animation: spaceship4 7s infinite linear;
}
@keyframes spaceship4 {
  from {
    top: 50%;
    left: -10%;
    transform: scale(1);
  }
  to {
    top: -14%;
    left: 40%;
    transform: scale(0.9);
  }
}
.spaceship5 {
  width: 3%;
  top: 20%;
  left: -20%;
  position: absolute;
  animation: spaceship5 20s infinite linear;
}
@keyframes spaceship5 {
  from {
    top: 20%;
    left: -20%;
    transform: scale(1);
  }
  to {
    top: 110%;
    left: 100%;
    transform: scale(0.9);
  }
}

.p3_title {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 0.35rem;
  width: 100%;
  font-family: "aAtmo";
  margin-bottom: 0.4rem;
  animation: sliderOns 0.8s 0s both;
}
.p3_contable {
  width: 100%;
  display: flex;
  justify-content: center;
}

.p3_contable .p3_block:nth-child(1) {
  animation: sliderOns 0.8s 0.2s both;
}
.p3_contable .p3_block:nth-child(1) .conp_t1 {
  animation: sliderOns 0.8s 0.4s both;
}
.p3_contable .p3_block:nth-child(1) .conp_t2 {
  animation: sliderOns 0.8s 0.6s both;
}

.p3_contable .p3_block:nth-child(2) {
  animation: sliderOns 0.8s 0.4s both;
}
.p3_contable .p3_block:nth-child(2) .conp_t1 {
  animation: sliderOns 0.8s 0.6s both;
}
.p3_contable .p3_block:nth-child(2) .conp_t2 {
  animation: sliderOns 0.8s 0.8s both;
}

.p3_contable .p3_block:nth-child(3) {
  animation: sliderOns 0.8s 0.6s both;
}
.p3_contable .p3_block:nth-child(3) .conp_t1 {
  animation: sliderOns 0.8s 0.8s both;
}
.p3_contable .p3_block:nth-child(3) .conp_t2 {
  animation: sliderOns 0.8s 1s both;
}

.p3_contable .p3_block:nth-child(4) {
  animation: sliderOns 0.8s 0.8s both;
}
.p3_contable .p3_block:nth-child(4) .conp_t1 {
  animation: sliderOns 0.8s 1s both;
}
.p3_contable .p3_block:nth-child(4) .conp_t2 {
  animation: sliderOns 0.8s 1.2s both;
}

.conterP3 {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  top: 50%;
  left: 0;
}

.p3_block {
  width: 3.26rem;
  position: relative;
  margin: 0 0.12rem;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.5s ease;
}
.p3_img {
  position: relative;
  width: 3.26rem;
  height: 3.9rem;
  overflow: hidden;
  border-top-left-radius: 0.25rem 0.28rem;
  border-top-right-radius: 0.25rem 0.28rem;
}
.p3_img.p1bg {
  background: url("") no-repeat;
  background-size: 100% auto;
}
.p3_img.p2bg {
  background: url("") no-repeat;
  background-size: 100% auto;
}
.p3_img.p3bg {
  background: url("") no-repeat;
  background-size: 100% auto;
}
.p3_img.p4bg {
  background: url("") no-repeat;
  background-size: 100% auto;
}

.p3_img:after {
  content: "";
  display: block;
  background: url("nshadow.png") no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: all 0.5s ease;
}
.conp_t1 {
  font-size: 0.22rem;
  color: #fff;
  font-family: "aAtmo";
  width: 95%;
  margin: 0.15rem auto 0.05rem;
  position: relative;
  z-index: 2;
}
.conp_t2 {
  font-size: 0.2rem;
  color: #fff;
  font-family: "poppins";
  width: 95%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  line-height: 1.2;
}
.p3_block:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  background: url("p_light.png") no-repeat;
  background-size: 100% auto;
  top: 3.7rem;
  left: 0;
  width: 3.26rem;
  height: 2rem;
  opacity: 0;
  transition: all 0.5s ease;
}

.current.p3_block {
  opacity: 1;
}
.current .p3_img:after {
  opacity: 0;
}
.current.p3_block:after {
  opacity: 1;
}
.contpage{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: none;}
.clickable {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 2;
  
}
.back_btn {
  width: 0.6rem !important;
  position: absolute;
  right: 0;
  bottom: 0.5rem;
  z-index: 10;
  display: none;
}
.swiper-slide.pagebg000{ background: #000; height: 100vh;}

.pagedt1{
  position: relative;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

.word_contear {
  position: absolute;
  top: 50%;
  left: 19%;
  transform: translate(0, -50%);
  z-index: 3;
}
.word_contear:before {
  content: "";
  display: block;
  width: 8.4rem;
  height: 130vh;
  background: rgba(0, 0, 0, 0.5);
  transform: skew(-12deg);
  position: absolute;
  top: -50vh;
  left: -1.2rem;
  z-index: 2;
  opacity: 0;
  animation: word_contear 0.8s 0.2s ease both;
}
@keyframes word_contear {
  from {
    opacity: 0;
    left: 20rem;
  }
  to {
    opacity: 1;
    left: -1.2rem;
  }
}
.word_calp1 {
  font-size: 0.36rem;
  color: #fff;
  font-family: "aAtmo";
  margin-bottom: 0.02rem;
  position: relative;
  z-index: 5;
  opacity: 0;
  animation: slideInLeft11 0.8s ease both;
  animation-delay: 1.1s;
}
.word_calp2 {
  font-size: 0.3rem;
  color: #fff;
  font-family: "poppins";
  position: relative;
  z-index: 5;
  opacity: 0;
  animation: slideInLeft11 0.8s ease both;
  animation-delay: 1.3s;
  width: 7rem;
}
.fadeOp.word_contear{ animation: ons 0.6s 0.4s ease both;}
@keyframes ons{
  from{ top: 50%;  transform: translate(0,-50%);}
  to{ top: 20%; transform: translate(0,0);}
}
.fadeOp .word_calp1{ text-shadow: 2px 2px 9px #000;}
.fadeOp .word_calp2{ text-shadow: 2px 2px 9px #000;}


.fadeOp.word_contear:before {
  animation: word_contear1 0.8s 0.2s ease both;
}
@keyframes fadeOuts{
  from{ opacity: 1;}
  to{ opacity: 0;}

}

@keyframes word_contear1 {
  from {
    opacity: 1;
    left: -1.2rem;
  }
  to {
    opacity: 0;
    left: -8.2rem;
  }
}


@keyframes slideInLeft11 {
  from {
    opacity: 0;
    transform: translate(2.6rem, 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.scaleBg {
  animation: scaleBg 0.6s ease;
}
@keyframes scaleBg {
  from {
    transform: scale(0.3);
  }
  to {
    transform: scale(1);
  }
}

.cloud_p1 {
  width: 100%;
  height: 6.64rem;
  position: absolute;
  top: 5rem;
  left: 0;
  background: url("") repeat-x;
  background-size: 90vw auto;
  animation: cloud_p1 60s infinite linear;
}
@keyframes cloud_p1 {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -22.29rem 0;
  }
}

.contpage img {
  width: 100%;
  display: block;
}
.p2_anime {
  width: 13.32rem;
  position: absolute;
  right: -2.4rem;
  bottom: -0.5rem;
}
.p2_boot1 {
  width: 0.7rem;
  position: absolute;
  top: 0.97rem;
  left: 17.45rem;
  animation: p2_boot1 7s infinite linear;
  opacity: 0;
  transform-origin: center bottom;
}
@keyframes p2_boot1 {
  0% {
    top: 0.97rem;
    left: 17.45rem;
    transform: scale(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  80% {
    top: 2.6rem;
    left: 14.19rem;
    transform: scale(0.55);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.p2_boot2 {
  width: 0.65rem;
  position: absolute;
  top: 1.16rem;
  left: 13.75rem;
  animation: p2_boot2 6s infinite linear;
  animation-delay: 4s;
  opacity: 0;
  transform-origin: center bottom;
}
@keyframes p2_boot2 {
  0% {
    top: 1.16rem;
    left: 13.75rem;
    transform: scale(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  80% {
    top: 1.9rem;
    left: 12.45rem;
    transform: scale(0.55);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.p2_boot3 {
  width: 1.09rem;
  position: absolute;
  top: 0.5rem;
  left: 8rem;
  animation: p2_boot3 5.3s infinite linear;
  opacity: 0;
  transform-origin: center bottom;
}
@keyframes p2_boot3 {
  0% {
    top: 0.5rem;
    left: 8rem;
    transform: scale(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  80% {
    top: 1.22rem;
    left: 9.55rem;
    transform: scale(0.55);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.p2_boot4 {
  width: 0.8rem;
  position: absolute;
  top: 1.06rem;
  left: 1.62rem;
  animation: p2_boot4 6.2s infinite linear;
  opacity: 0;
  transform-origin: center bottom;
}
@keyframes p2_boot4 {
  0% {
    top: 1.06rem;
    left: 1.62rem;
    transform: scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  70% {
    top: 2.2rem;
    left: 5.32rem;
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.p2_boot5 {
  width: 0.8rem;
  position: absolute;
  top: 2.18rem;
  left: 2.36rem;
  animation: p2_boot5 6.2s infinite linear;
  opacity: 0;
  transform-origin: center bottom;
}
@keyframes p2_boot5 {
  0% {
    top: 2.18rem;
    left: 2.36rem;
    transform: scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  70% {
    top: 2.84rem;
    left: 10rem;
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.coapt {
  text-align: center;
  font-size: 0.5rem;
  color: #ffffff;
  position: absolute;
  top: 0.6rem;
  left: 0;
  width: 100%;
  font-family: "aAtmo";
  animation: sliderOns 0.8s 0.2s ease both;
}
.conterP4 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 100%;
}
.hline {
  width: 10.15rem;
  position: relative;
  margin-left: 1.05rem;
  animation: fadeIns 0.6s 0s linear both;
}

.menulistp4 {
  position: absolute;
  top: 1.6rem;
  left: 0.1rem;
}
.menli {
  width: 8.01rem;
  height: 0.58rem;
  background: url("p4_tbg.png") no-repeat;
  background-size: 100% auto;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 0.2rem;
  cursor: pointer;
}
.menli:before {
  content: "";
  display: block;
  width: 10.16rem;
  height: 1.7rem;
  background: url("p4_tbg_light.png") no-repeat;
  background-size: 100% auto;
  pointer-events: none;
  position: absolute;
  top: -0.59rem;
  left: -0.73rem;
  opacity: 0;
  transition: all 0.4s ease;
}
.menli:hover:before {
  opacity: 1;
}
.men_time {
  font-size: 0.24rem;
  color: #fff;
  font-family: "aAtmo";
  padding-right: 0.1rem;
  padding-left: 1rem;
  position: relative;
  z-index: 5;
}
.men_desc {
  font-size: 0.18rem;
  color: #fff;
  font-family: "poppins";
  line-height: 1.15;
  width: 5.4rem;
  position: relative;
  z-index: 5;
  margin-top: -0.05rem;
}
.menulistp4 .menli:nth-child(1) {
  animation: slideInLeft11 0.8s 0.1s ease both;
}
.menulistp4 .menli:nth-child(2) {
  margin-left: 0.26rem;
  animation: slideInLeft11 0.8s 0.2s ease both;
}
.menulistp4 .menli:nth-child(3) {
  margin-left: 0.6rem;
  animation: slideInLeft11 0.8s 0.3s ease both;
}
.menulistp4 .menli:nth-child(4) {
  margin-left: 1.05rem;
  animation: slideInLeft11 0.8s 0.4s ease both;
}
.menulistp4 .menli:nth-child(5) {
  margin-left: 1.65rem;
  animation: slideInLeft11 0.8s 0.5s ease both;
}
.menulistp4 .menli:nth-child(6) {
  margin-left: 2.45rem;
  animation: slideInLeft11 0.8s 0.6s ease both;
}
.menulistp4 .menli:nth-child(7) {
  margin-left: 3.7rem;
  animation: slideInLeft11 0.8s 0.7s ease both;
}
@keyframes fadeIns {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.conterP5 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 100%;
}
.coapt5 {
  text-align: center;
  font-size: 0.5rem;
  color: #ffffff;
  width: 100%;
  font-family: "aAtmo";
  font-style: italic;
  margin-bottom: 1rem;
  animation: sliderOns 0.8s 0s ease both;
}
.hz_logo1 {
  width: 13.04rem;
  margin: 0 auto 0.78rem;
  animation: sliderOns 0.8s 0.2s ease both;
}
.hz_logo2 {
  width: 13.01rem;
  margin: 0 auto 0.78rem;
  animation: sliderOns 0.8s 0.4s ease both;
}
.hz_logo3 {
  width: 13.01rem;
  margin: 0 auto;
  animation: sliderOns 0.8s 0.6s ease both;
}

.conterP6 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 100%;
  height: 5.5rem;
}
.coapt6 {
  text-align: center;
  font-size: 0.5rem;
  color: #ffffff;
  width: 100%;
  font-family: "aAtmo";
  font-style: italic;
  margin-bottom: 0.4rem;
  animation: sliderOns 0.8s 0s ease both;
}
.coapt6a {
  text-align: center;
  font-size: 0.5rem;
  color: #ffffff;
  width: 100%;
  font-family: "aAtmo";
  font-style: italic;
  margin-bottom: 0.2rem;
  animation: sliderOns 0.8s 0s ease both;
}
.coapt6 span {
  font-size: 0.3rem;
}
.person_block {
  width: 1.31rem;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  animation: fadeIns 0.8s 0.4s ease both;
}
.person_block:before{ content: ""; display: block; width: 100%; height: 100%; background: url("pbs1.png") no-repeat center; background-size: 100% 100%; z-index: -2; position: absolute; top: 0; left: 0; animation: scalet1 10s infinite linear;}
.person_block:after{ content: ""; display: block; width: 100%; height: 100%; background: url("pbs2.png") no-repeat center; background-size: 100% 100%;  z-index: -1; position: absolute; top: 0; left: 0; animation: scalet2 10s infinite linear;}

.person_name {
  color: #fff;
  font-size: 0.14rem;
  text-align: center;
  bottom: -0.3rem;
  width: 1.3rem;
  position: absolute;
  left: 50%;
  margin-left: -0.65rem;
  font-family: "poppins";
}
.personslidercont {
  width: 16rem;
  height: 5rem;
  position: relative;
  margin: 0 auto;
}

.persons1 {
  width: 1.31rem;
}
.persons2 {
  width: 0.94rem;
}
.persons3 {
  width: 0.75rem;
}
.persons4 {
  width: 0.75rem;
}
.persons5 {
  width: 1.17rem;
}
.persons6 {
  width: 1.08rem;
}
.persons7 {
  width: 1.28rem;
}
.persons8 {
  width: 1.31rem;
}

.personpage {
 position: absolute;
 width: 100%;
 height: 100%;
 overflow: hidden;
 left: 0;
 top: 0; 
 display: none;
 z-index: 4;

}
.paersonpage_in{

    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    

}
.person_chose {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: sliderOns 0.6s 0.6s ease both;
  opacity: 0;
}
.person_chose > a {
  display: block;
  width: 0.9rem;
  margin: 0 0.12rem;
  opacity: 0.5;
  transition: all 0.4s ease;
  position: relative;
}
.person_chose > a:before{ content: ""; display: block; width: 100%; height: 100%; background: url("pbs1.png") no-repeat center; background-size: 100% 100%; z-index: -2; position: absolute; top: 0; left: 0; animation: scalet1 10s infinite linear;}
.person_chose > a:after{ content: ""; display: block; width: 100%; height: 100%; background: url("pbs2.png") no-repeat center; background-size: 100% 100%;  z-index: -1; position: absolute; top: 0; left: 0; animation: scalet2 10s infinite linear;}
.person_chose > a.chose {
  opacity: 1;
}
.person_produce_info {
  width: 100%;
  position: relative;
}
.person_img {
  width: 2rem;
  margin: 0 auto;
  animation: sliderOns 0.6s 0.2s ease both;
  opacity: 0;
  position: relative;
}
.person_img:before{ content: ""; display: block; width: 100%; height: 100%; background: url("pbs1.png") no-repeat center; background-size: 100% 100%; z-index: -2; position: absolute; top: 0; left: 0; animation: scalet1 5s infinite linear;}
.person_img:after{ content: ""; display: block; width: 100%; height: 100%; background: url("pbs2.png") no-repeat center; background-size: 100% 100%;  z-index: -1; position: absolute; top: 0; left: 0; animation: scalet2 5s infinite linear;}
@keyframes scalet1{
  from{ transform: rotate(0deg);}
  to{ transform: rotate(360deg);}
}
@keyframes scalet2{
  from{ transform: rotate(0deg);}
  to{ transform: rotate(-360deg);}
}


.person_info {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.person_na {
  font-family: "aAtmo";
  font-size: 0.22rem;
  text-align: center;
  color: #fff;
  margin-bottom: 0.15rem;
  animation: sliderOns 0.6s 0.4s ease both;
  opacity: 0;
}
.person_dsc {
  font-family: "poppins";
  font-size: 0.18rem;
  color: #fff;
  text-align: center;
  line-height: 1.6;
  animation: sliderOns 0.6s 0.6s ease both;
  opacity: 0;
}
@keyframes sliderOns {
  from {
    opacity: 0;
    transform: translate(0, 50px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.loading_txt {
  width: 100%;
  text-align: center;
 
  font-size: 0.24rem;
  font-family: "aAtmo";
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 2rem;
}
/* .person_zone {
  width: 5.5rem;
  height: 7.5rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
} */
.person_zone {
  width: 8.84rem;
  height: 8.34rem;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  border-bottom-left-radius: 100%;
}

.person_zone img{ width: 100%; display: block;}
.canvaswrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

.canvaswrap1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.p4_e {
  width: 7rem;
  position: absolute;
  right: 0.3rem;
  top: 0.6rem;
  pointer-events: none;
}
.op5 {
  opacity: 0.5;
}
.current .op5 {
  opacity: 1;
}

.pagevideo{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.5;}
.pagevideo video{ display: block; width: 100%; }

.bg_kuan{ width: 100%; left: 0.01rem; position: absolute; top: 0.86rem; z-index: 30; pointer-events: none;}
.bg_kuan img{ display: block; width: 100%; }

@keyframes rotate {
  0%{ transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}
.person_block img { animation: rotate  linear 4s infinite both;}
.percotmodel{ position: absolute; top: 1.1rem; left: 2.5rem; width: 5.8rem; height: 7.05rem; opacity: 0;}
.percotmodel img{ display: block; position: absolute; left: 0; top: 0; opacity: 0;}
.percotmodel img:nth-child(1){ opacity: 1;}
@keyframes twinkls{
  0%{ opacity: 0;}
  2.5%{ opacity: 1;}
  47.5%{ opacity: 1;}
  50%{ opacity: 0;}
  100%{ opacity: 0;}
}
.person1{  animation: twinkls 16s infinite linear;}
.person2{  animation: twinkls 16s 8s infinite linear;}
.parical_bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.5;}

.vbgs1{ width: 100%; position: absolute; bottom: -0.5rem; right: -0.5rem; z-index: 3; animation: moverst1 4.8s ease infinite;}
.vbgs2{ width: 100%; position: absolute; bottom: -0.5rem; right: -0.5rem; z-index: 2; animation: moverst2 4.8s ease infinite;}
.vbgs3{ width: 100%; position: absolute; bottom: -0.5rem; right: -0.5rem; z-index: 1; animation: moverst3 4.8s ease infinite;}
.ovac{ opacity: 0; animation: ccc 1s ease both;}
@keyframes ccc{
  from{ opacity: 0;}
  to{ opacity: 1;}
}

@keyframes moverst1{
  0%{ transform: translate(-0.7rem,0.24rem);}
  50%{ transform: translate(0.7rem,-0.24rem);}
  100%{ transform: translate(-0.7rem,0.24rem);}
}
@keyframes moverst2{
  0%{ transform: translate(-0.4rem,0.12rem);}
  50%{ transform: translate(0.4rem,-0.12rem);}
  100%{ transform: translate(-0.4rem,0.12rem);}
}

@keyframes moverst3{
  0%{ transform: translate(-0.2rem,0.08rem);}
  50%{ transform: translate(0.2rem,-0.08rem);}
  100%{ transform: translate(-0.2rem,0.08rem);}
}
.povxls{ position: absolute; top: 0; left: 0; width: 100%;}
.povxls img{ display: block; position: absolute; left: 0; top: 0; opacity: 0;}
.povxls img:nth-child(1){ opacity: 1;}