#root {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* background-color: #060201; */
}

#root .swiper-container,
#root .swiper-wrapper,
#root .swiper-slide {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 7.5rem;
  height: 1.28rem;
  padding: 0 0.32rem;
  box-sizing: border-box;
  z-index: 10;
}

.headerBox {
  width: 100%;
  padding: 0.32rem 0;
  position: relative;
  z-index: 10;
}

.headerMask {
  top: 0;
  left: 0;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100vh;
  padding-top: 4.2rem;
  transform: translateY(-100vh);
  transition: transform 0.2s linear
}

.header .headerMaskActive {
  transform: translateY(0);
}

.btnBox {
  width: 100%;
  text-align: center;
  padding-top: 0.33rem;
  font-size: 0.29rem;
  color: #333333;
  line-height: 0.46rem;
  transform: translate3d(0, 1rem, 0);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}


.home-img {
  width: 5.05rem;
  height: 8.19rem;
  background: url('../img/web_jietu.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  margin-top: .8rem;
  margin-left: 1.3rem;
  position: relative;
  opacity: 0;
  animation: homeImg 1.5s linear forwards;
}

#root .home-swiper .swiper-container,
#root .home-swiper .swiper-wrapper,
#root .home-swiper .swiper-slide {
  width: auto;
  height: auto;
  display: flex;
}

.home-swiper {
  width: 3.79rem;
  height: 7.71rem;
  margin: 0.24rem 0 0 1.01rem;
  border-radius: 0.38rem;
  overflow: hidden;
}

.home-img img {
  width: 3.79rem;
  height: 7.71rem;
}

.item {
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.36rem;
  color: #ffffff;
  text-align: center;
}

.item span {
  padding-left: 0.4rem;
}

.itemIcon {
  margin-left: 0.1rem;
  width: 0.3rem;
  height: 0.3rem;
}

.logo {
  width: 0.84rem;
  height: 0.84rem;
}

.video {
  width: 100%;
  /* height: 100vh; */
}

.imgBox2 {
  width: 100%;
  padding-top: 1.14rem !important;
}

.imgBox {
  left: 0;
  width: 100%;
  height: 100vh;
  top: 0;
  padding-top: 0.92rem;
}

.imgBox .img1 {
  width: 4.82rem;
  height: 0.72rem;
  margin: 0 auto;
  display: block;
  transform: translate3d(0, 1rem, 0);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.imgBox .img2 {
  width: 6.6rem;
  height: 8.5rem;
  margin: 0 auto;
  display: block;
}

.imgBox .imgItem1 {
  width: 6.6rem;
  height: 8.5rem;
  margin: 0 auto;
  display: block;
}


.imgBox .img3 {
  width: 5rem;
  margin: 0 auto;
  display: block;
}

.imgBox .title {
  font-style: 0.28rem;
  color: #FFFEFE;
  text-align: center;
  padding: 0.21rem 0 0 0;
}

.imgBox .img3Box {
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  
}
/* .swiper-slide-active .img3Box{
  animation: homeImg .9s linear forwards;
} */

.img3Box span {
  font-size: 0.54rem;
  font-weight: bold;
  color: #000000;
  position: relative;
}

.img3Box span i {
  position: relative;
  z-index: 99;
}

.img3Box span::after {
  content: ' ';
  width: 0.63rem;
  height: 0.51rem;
  background: url('../img/web_yh.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -0.25rem;
  left: -0.1rem;
  z-index: 0;
}

.img3Box p {
  font-size: 0.29rem;
  color: #333333;
  padding-top: 0.38rem;
  height: 1.96rem;
  line-height: .46rem;
  text-align: center;
}

.imgBox .img3 {
  transform: translate3d(0, 50px, 0);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.imgBox .title {
  transform: translate3d(0, 50px, 0);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.swiper-slide-active .imgBox .img1,
.swiper-slide-active .img3Box {
  transform: translate3d(0, 0, 0);
  transition: all 550ms;
  animation: homeImg .9s linear forwards;
}

.swiper-slide-active .imgBox .btnBox {
  transform: translate3d(0, 0, 0);
  transition: all 750ms;
  animation: homeImg .9s linear forwards;
}


.swiper-bigimg>div {
  position: relative;
  margin: 0 auto;
  width: 4.4rem;
}

.bigimg-box1 {
  width: 4.4rem;
  height: 8.66rem;
}

.swiper-bigimg-page1 .bigimg-box2 {
  width: 2.1rem;
  height: 1.93rem;
  position: absolute;
  right: -1.03rem;
  top: 5.56rem;
}

.swiper-bigimg-page1 .bigimg-box3 {
  width: 2.88rem;
  height: 1.57rem;
  position: absolute;
  left: -1.03rem;
  top: 1.67rem;
}

.swiper-bigimg-page2 .bigimg-box2 {
  width: 2.21rem;
  height: 1.9rem;
  position: absolute;
  left: -1.1rem;
  top: 5.7rem;
}

.swiper-bigimg-page2 .bigimg-box3 {
  width: 2.65rem;
  height: 3.33rem;
  position: absolute;
  right: -1.32rem;
  top: 2.4rem;
}

.swiper-bigimg-page3 .bigimg-box2 {
  width: 2.63rem;
  height: 2.15rem;
  position: absolute;
  right: -1.32rem;
  top: 3.47rem;
}

.swiper-bigimg-page3 .bigimg-box3 {
  width: 6.22rem;
  height: 4.43rem;
  position: absolute;
  left: -0.91rem;
  top: 0.72rem;
}


.swiper-slide-active .swiper-bigimg-page1 .bigimg-box3 {
  transform: scale(0);
  -webkit-animation: swing 1.3s linear .4s forwards;
  -moz-animation: swing 1.3s linear .4s forwards;
  -ms-animation: swing 1.3s linear .4s forwards;
  -o-animation: swing 1.3s linear .4s forwards;
  animation: swing 1.3s linear .4s forwards
}

.swiper-slide-active .swiper-bigimg-page1 .bigimg-box2 {
  transform: scale(0);
  -webkit-animation: scaleone1 .5s linear .5s forwards;
  -moz-animation: scaleone1 .5s linear .5s forwards;
  -ms-animation: scaleone1 .5s linear .5s forwards;
  -o-animation: scaleone1 .5s linear .5s forwards;
  animation: scaleone1 .5s linear .5s forwards
}

.swiper-slide-active .swiper-bigimg-page3 .bigimg-box3 {
  -webkit-animation: scaleone1 .6s linear forwards;
  -moz-animation: scaleone1 .6s linear forwards;
  -ms-animation: scaleone1 .6s linear forwards;
  -o-animation: scaleone1 .6s linear forwards;
  animation: scaleone1 .6s linear forwards
}

.swiper-slide-active .swiper-bigimg-page3 .bigimg-box2 {
  transform: scale(0);
  -webkit-animation: scaleone1 .4s linear .4s forwards;
  -moz-animation: scaleone1 .4s linear .4s forwards;
  -ms-animation: scaleone1 .4s linear .4s forwards;
  -o-animation: scaleone1 .4s linear .4s forwards;
  animation: scaleone1 .4s linear .4s forwards;
}

.swiper-slide-active .swiper-bigimg-page2 .bigimg-box2 {
  transform: scale(0);
  -webkit-animation: scaleone1 .4s linear .4s forwards;
  -moz-animation: scaleone1 .4s linear .4s forwards;
  -ms-animation: scaleone1 .4s linear .4s forwards;
  -o-animation: scaleone1 .4s linear .4s forwards;
  animation: scaleone1 .4s linear .4s forwards;
}

.swiper-slide-active .swiper-bigimg-page2 .bigimg-box3 {
  transform: scale(0);
  -webkit-animation: scaleoneSwing .8s linear .1s forwards;
  -moz-animation: scaleoneSwing .8s linear .1s forwards;
  -ms-animation: scaleoneSwing .8s linear .1s forwards;
  -o-animation: scaleoneSwing .8s linear .1s forwards;
  animation: scaleoneSwing .8s linear .1s forwards
}


.downloadBtn {
  width: 5.92rem;
  height: 1.02rem;
  background: linear-gradient(-90deg, #F71F70 0%, #F96653 100%);
  border-radius: 0.5rem;
  border: 0.01rem solid #FFFFFF;
  color: #FFFFFF;
  margin: 0.17rem auto 0.1rem;
  font-size: 0.36rem;
}

.downIcon {
  width: 100%;
  height: 0.36rem;
  background: url("../img/web_jiantou.png") no-repeat center;
  background-size: 0.36rem 0.36rem;
  margin: 0 auto;
  animation: forBottom 2s linear infinite;
  position: fixed;
  bottom: 1.5rem;
  z-index: 99;
}

.page1 {
  background: url(../img/bg01.jpg) no-repeat;
  background-size: cover;
}

.company {
  color: #ffffff;
  font-size: 0.4rem;
  padding-left: 0.1rem;
}

.menu {
  width: 0.4rem;
  height: 0.4rem;
}

.bgBox {
  height: 100vh;
}

.home-back {
  width: 100%;
  height: 100vh;
}

.box-back {
  width: 100%;
  height: 100vh;
  background: url('../img/bg02.jpg') no-repeat center;
  background-size: cover;
}

.home-i {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
}

.download-box {
  width: 7.08rem;
  height: 1.08rem;
  background: #FFFFFF;
  border-radius: 0.25rem;
  padding: 0.21rem 0.24rem;
  position: fixed;
  bottom: 0.21rem;
  left: 0.21rem;
  z-index: 100;
  font-weight: bold;
}

.download-box-curr {
  display: flex;
}

.download-box img {
  width: 0.69rem;
  height: 0.69rem;
}

.download-box span {
  font-size: 0.33rem;
  color: #333333;
  padding-left: 0.21rem;
}

.download-box div:nth-child(2) {
  width: 1.71rem;
  height: 0.69rem;
  background: linear-gradient(90deg, #0bd7e9 0%, #42edaa 100%);
  border-radius: 0.34rem;
  font-size: 0.27rem;
  color: #FFFFFF;
}

#svgaBg {
  width: 100%;
  height: 100vh;
}


.tip1 {
  width: 100%;
  position: relative;
  text-align: center;
}

.tip1 span {
  font-weight: bold;
  font-size: 0.71rem;
  color: #ADFFED;
  opacity: 0.6;
}

.tip1 b {
  width: 100%;
  font-weight: bold;
  font-size: 0.54rem;
  color: #000000;
  position: absolute;
  top: 0.07rem;
  left: 0;
}

.txt_me {
  font-size: 0.5rem;
  color: #FFFFFF;
  font-weight: bold;
  padding: 0.4rem 0 0.6rem 0;
}

.footBg {
  background: url('../img/web_guanyu.png') no-repeat center bottom;
  background-size: 100% 7.55rem;
}

.infoBox {
  color: #808080;
  font-size: 0.25rem;
  padding-top: 0.98rem;
}

.infoBox div {
  padding-left: 0.45rem;
  font-size: 0.28rem;
  line-height: 0.5rem;
}

.infoBox div i {
  width: 1.45rem;
}

.infoBox div p {
  width: 4.84rem;
}

.infoText {
  padding: 0 0.47rem;
  font-size: 0.28rem;
  color: #808080;
  line-height: 0.5rem;
  padding-top: 0.55rem;
}

.infoText p {
  padding-bottom: 0.72rem;
}

.infoBottom {
  padding-top: 0.15rem;
  color: #fff;
  font-size: 0.28rem;
}

.infoFoot {
  width: 100%;
  font-size: 0.15rem;
  color: #8C8C8C;
  text-align: center;
  position: absolute;
  bottom: 1.3rem;
}

.infoFoot p {
  padding-bottom: 0.16rem;
}

.infoFoot img {
  width: 0.2rem;
  height: 0.2rem;
  margin-right: 0.14rem;
}

@keyframes forBottom {
  0% {
    transform: translate3d(0, 0px, 0);
  }


  10% {
    transform: translate3d(0, 0.1rem, 0);

  }

  20% {
    transform: translate3d(0, 0rem, 0);

  }

  30% {
    transform: translate3d(0, 0.1rem, 0);

  }

  50% {
    transform: translate3d(0, 0px, 0);
  }

  100% {
    transform: translate3d(0, 0px, 0);
  }
}

.href {
  color: #fff;
  cursor: pointer;
}

.href:visited {
  color: #fff;
}

.dowloadTip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.7);
}

.dowloadTipImg1 {
  width: 4.8rem;
  height: 2rem;
  position: absolute;
  top: 2.36rem;
  left: 1.34rem;
}

.dowloadTipImg2 {
  width: 2.2rem;
  height: 2.4rem;
  position: absolute;
  top: 0.38rem;
  right: 0.34rem;
}


@keyframes homeImg {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ---------------------------------------新增动画---------------------------------------------- */
@keyframes scaleone1 {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }

  90% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

@keyframes scaleoneSwing {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }

  25% {
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
  }

  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  75% {
    transform: rotate(-15deg);
  }

  100% {
    transform: rotate(0deg);
  }
}


@keyframes swing {
  0% {
    transform: scale(0);
  }

  5% {
    transform: scale(.5);
  }

  20% {
    transform: scale(1);
  }

  20% {
    transform: rotate(15deg);
  }

  30% {
    transform: rotate(-10deg);
  }

  40% {
    transform: rotate(15deg);
  }

  50% {
    transform: rotate(-5deg);
  }

  60%,
  100% {
    transform: rotate(0deg);
  }
}

@keyframes Swing {
  0% {
    left: -1.7rem;
    top: 1.8rem;
  }

  100% {
    left: -1.7rem;
    top: 1.2rem;
  }
}

@keyframes scaleone3 {
  0% {
    opacity: 0;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

@keyframes scaleone4 {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  50% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

@keyframes arrow {
  0% {
    transform: translateX(0) translateY(0)
  }

  50% {
    transform: translateX(0) translateY(0.1rem)
  }

  100% {
    transform: translateX(0) translateY(0)
  }
}