@charset "utf-8";@media screen and (min-width:750px){html{font-size:100px}}
@media screen and (max-width:750px){html{font-size:100px}}
@media screen and (max-width:600px){html{font-size:80px}}
@media screen and (max-width:540px){html{font-size:72px}}
@media screen and (max-width:480px){html{font-size:64px}}
@media screen and (max-width:432px){html{font-size:57.6px}}
@media screen and (max-width:424px){html{font-size:56.53px}}
@media screen and (max-width:414px){html{font-size:55.2px}}
@media screen and (max-width:400px){html{font-size:53.33px}}
@media screen and (max-width:384px){html{font-size:51.2px}}
@media screen and (max-width:375px){html{font-size:50px}}
@media screen and (max-width:360px){html{font-size:48px}}
@media screen and (max-width:320px){html{font-size:42.67px}}
body,html{padding:0;margin:0;width:100%;position: absolute;top:0;bottom:0;left:0; overflow:hidden;background: #000;}
/* loading */
.loading{position:absolute;width:100%;height:100%;z-index:888;top:0;left:0;bottom:0;color:#ccc;text-align:center;overflow:hidden;background-color:#eee;z-index:5}
.loaded{display:none}
.spinner{margin:160px auto 0;width:150px;text-align:center}
.spinner>div{width:20px;height:20px;background-color:#ccc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out}
.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}
.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}
/* welcomeVideo */
.welcome,.video-content{width:100%;height: 100%;overflow: hidden;background: #000 ;}
.welcome video {width: 100%;height: 100%;background: #000;position: relative;object-fit: fill;}
.video-cover{position:absolute;width:100%;height:100%;top:0;left:0;background:#000 url(../imgs/loadimg.png) center center no-repeat;background-size:2.79rem auto ;-webkit-animation:fadeIn 1s ease both;animation:fadeIn 1s ease both}
.video-cover p{position:absolute;width:2.25rem;top:50%;left:50%;margin-top:-3.25rem;margin-left: -1.125rem; }
.video{width:100%;height:100%;background:#000;object-fit:fill;}
.js-canvas{width:100%;height: 100%;;}
/* .video-cover p:nth-child(1){-webkit-animation:fadeIn 1s ease both;animation:fadeIn 1s ease both} */
.video-cover p:nth-child(1) img{width:100%;}

/* home */
.home{width:100%;height:100%;overflow:hidden;display: none;position: absolute;top:0;bottom:0;left:0;right: 0;z-index: 111;;}
.clearfix:after,.clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}
.swiper-container{width:100%;height:100%}
.swiper-slide{text-align:center;}


/* p2 */
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

#video {
  display: none;
  width:100%;height: 100%;
  z-index: 0;
  overflow: hidden;
}
.videoMask{position: absolute; top:0;left:0;width:100%;height: 100%;;}

/* p1 */
.page{ width:100%;height: 100%;overflow: scroll;-webkit-overflow-scrolling: touch;position: relative;padding-bottom:2rem; background: url(../imgs/p1.jpg) top center repeat-y;background-size: 100% 100%;}
.page1{width:100%;position: relative; background: url(../imgs/p1.jpg) top center repeat-y;background-size: 100% 100%; height: 11.34rem;box-sizing: border-box;; -webkit-overflow-scrolling: touch;}
.page1 .wxInfos{width:100%;padding-top:1rem;}
.page1 .wxInfos .wxImg{width:2.2rem;height:2.2rem;margin:0 auto .2rem;border-radius: 1.1rem;overflow: hidden;}
.page1 .wxInfos .wxImg img{width:100%;}
.page1 .wxInfos .wxName{width:100%;text-align: center;color:#949494;font-size: 0.26rem;}
.page1 .txt{ width:100%;margin-top:0.4rem;text-align: center;}
.page1 .p1{ width:100%;font-size: 0.36rem;color:#454545;margin-bottom: 10px;}
.page1 .p1 span{color:#01885f;}
.page1 .warterBox{width: 0.5rem; height: 0.9rem;position: relative; margin:0.6rem auto 0;}
.page1 .warter{position: absolute;top:0;left:0; width:0.5rem;height: 0.9rem;background: url(../imgs/drop.png) top center no-repeat;background-size: 100% auto;}
.page1 .warter0{opacity: 1;}
.page1 .warter1{display: none;}
.page1 .warter2{display: none;}
.page1 .warter3{display: none;}
.page1 .warterDrop {-webkit-animation: warterDrop 1s cubic-bezier(.5, 0, 1, .5) both;animation: warterDrop 1s cubic-bezier(.5, 0, 1, .5) both;}
.page1 .dropBox{position: relative;width:6.78rem;height:2.8rem; margin:-0.5rem auto ;overflow:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.page1 .drop{ position: absolute; top:0;left:0;width:100%;height:2.8rem;overflow:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.page1 .drop0{position: absolute; top:0;left:0;width:6.78rem;height:2.8rem;background: url(../imgs/drop0.png) bottom center no-repeat;background-size: 100% auto;opacity: 1;}
.page1 .drop1{position: absolute; top:0;left:0;width:6.78rem;height:2.8rem;background: url(../imgs/drop1.png) bottom center no-repeat;background-size: 100% auto;display: none;}
.page1 .drop2{position: absolute; top:0;left:0;width:6.78rem;height:2.8rem;background: url(../imgs/drop2.png) bottom center no-repeat;background-size: 100% auto;display: none;}
.page1 .drop3{position: absolute; top:0;left:0;width:6.78rem;height:2.8rem;background: url(../imgs/drop3.png) bottom center no-repeat;background-size: 100% auto;display: none;}
.page1 .likeBtn{position: relative;width:4.17rem;height: 1.43rem; margin:1.4rem auto 0;-webkit-user-select: none;}
.page1 .likeBtn>div{width:4.17rem;height: 1.43rem;background: url(../imgs/likeBtn.png) top center no-repeat;background-size: 100% auto;}
.page1 .likeBtn>div:active {background-image: url(../imgs/btnon.png)}
.page1 .likeBtn .like{position: absolute;top:0.43rem;left:1.37rem;width:0.36rem;height: 0.31rem;background: url(../imgs/like.png) top center no-repeat;background-size: 100% auto;}
.page1 .likeBtn p{height: 100%;padding-left:1.9rem;font-size: 0.37rem;color:#fff;line-height:1.09rem;}
/* p2 */
.page2 {width:100%;position: relative;background: url(../imgs/p1.jpg) top center no-repeat;background-size: 100% 100%; height: 11.34rem;box-sizing: border-box; -webkit-overflow-scrolling: touch;}
.page2 .video{margin:0 auto;width:100%;height:auto ;background: rgba(0,0,0,0);position: relative;height: 6.6rem;}
.page2 .video .video2{position: absolute;top:0;left:0;width:100%;height: auto;z-index: 1;}
.page2 .video .video2 img{width:100%;}
.page2 .video video{width:100%;height: auto;}
.page2 .likeBtn{padding-top:9.02rem;left:50%;margin-left:-1.48rem;width:2.96rem;height: 0.97rem;background: url(../imgs/likeBtn.png) top center no-repeat;background-size: 100% auto;}
.page2 .likeBtn .like{position: absolute;top:0.33rem;left:0.77rem;width:0.36rem;height: 0.31rem;background: url(../imgs/like.png) top center no-repeat;background-size: 100% auto;}
.page2 .likeBtn p{height: 100%;padding-left:0.4rem;font-size: 0.37rem;color:#fff;line-height: 0.97rem;}
.page2 .p2-txt{width:100%;margin-top:0.6rem;left:0;padding:0 0.4rem 0.2rem;;box-sizing: border-box;font-size: 0.32rem;color:#01885f;text-align: left;line-height: 0.55rem;}
.page2 .p1{width:100%;font-size: 0.36rem;color:#454545;margin-bottom: 10px;}
.page2 .p2{width:100%;font-size: 0.48rem;color:#01885f;font-weight: 600;}
.page2 .p1 span{color:#01885f;}
.page2 .up{position: absolute;bottom:0.3rem;width:1rem;height: 0.86rem;background: url(../imgs/up.png) top center no-repeat;background-size: 100% auto;left:50%;margin-left:-0.42rem;-webkit-animation: fadeInUp 1s infinite both;}

/* p3 */
.page3 {width: 100%;background: #01885f;position: relative;padding-bottom:1.2rem;padding-top:0.7rem;height: 11.34rem;box-sizing: border-box; -webkit-overflow-scrolling: touch;}
.page3 .p3-title{width:7.29rem;margin:0 auto;text-align: center;background: url(../imgs/p3-title.png) center center no-repeat;height: 0.69rem;background-size: 100% auto;;}
.page3 .p3-title h2{font-size: 0.52rem;text-align: center;color:#fff;font-weight: normal;}
.page3 .p3-title h2 span{font-size: 0.16rem;}
.page3 .p3-title img{width:100%;}
.page3 .p3-slide{width:6.70rem;height: 8.24rem;margin:0.8rem auto;}
.page3 .p3-slide h3{width:100%;text-align: center;font-size: 0.36rem;color:#fff;font-weight: normal;line-height: 1.2;margin-bottom:0.2rem;}
.page3 .p3-slide .p3-h3   p{font-size:0.26rem;width:100%;text-align: center;color:#fff;font-weight: normal;line-height: 0.36rem;margin-bottom:0.2rem;}
.page3 .p3-slide img{width:100%;}
.page3 .swiper-container-horizontal>.swiper-pagination{bottom:0px;}
.page3 .swiper-pagination-bullet{width:0.24rem;height: 0.24rem;}
.page3 .swiper-pagination-bullet{background: url(../imgs/off.png) top center no-repeat ;background-size: 100% 100%;opacity: 1;}
.page3 .swiper-pagination-bullet-active{background: url(../imgs/on.png) top center no-repeat !important;background-size: 100% auto;}

/* p4 */
.page4 {width:100%;position: relative;background: url(../imgs/p1.jpg) top center repeat-y;background-size: 100% 100%;height: 11.34rem;box-sizing: border-box; -webkit-overflow-scrolling: touch;}
.page4 .p4-title{width:7.29rem;padding-top:0.7rem;margin:0 auto;background: url(../imgs/p4-title.png) bottom center no-repeat;height: 0.69rem;background-size: 100% auto;;}
.page4 .p4-title h2{width:100%;font-size: 0.52rem;text-align: center;color:#888888;font-weight: normal;}
.page4 .p4-title h2 span{font-size: 0.16rem;}
.page4 .p4-title img{width:100%;}
.page4 .p4-slide{width:6.70rem;height: 9rem;margin:0.8rem auto 0;}
.page4 .p4-slide h3{width:100%;text-align: center;font-size: 0.68rem;color:#01885f;font-weight: normal;margin-bottom:0.2rem;line-height: 1}
.page4 .p4-slide .p4-h3 p{font-size:0.26rem;color:#838383;margin-bottom:0.2rem;}
.page4 .p4-slide img{width:100%;}
.page4 .swiper-container-horizontal>.swiper-pagination{bottom:0px;}
.page4 .swiper-pagination-bullet{width:0.24rem;height: 0.24rem;}
.page4 .swiper-pagination-bullet{background: url(../imgs/off1.png) top center no-repeat ;background-size: 100% 100%;opacity: 1;}
.page4 .swiper-pagination-bullet-active{background: url(../imgs/on1.png) top center no-repeat !important;background-size: 100% auto;}

/* p5 */
.page5 {width: 100%;;position: relative;background: #01885f;height: 11.34rem;box-sizing: border-box; -webkit-overflow-scrolling: touch;}
.page5 .p5-top{background: #01885f;width:100%;}
.page5 .p5-title{width:7.29rem;margin:0 auto;padding-top:0.8rem;text-align: center;background: url(../imgs/p3-title.png) bottom center no-repeat;height: 0.69rem;background-size: 100% auto;}
.page5 .p5-title h2{font-size: 0.52rem;text-align: center;color:#fff;font-weight: normal;}
.page5 .p5-title h2 span{font-size: 0.16rem;}
.page5 .p5-title img{width:100%;}
.page5 .p5-logos{position: absolute;bottom:0;left:0;width:100%;height:4.95rem;background:  #01885f url(../imgs/p5-logos-bg.png) top center no-repeat ;background-size: 100% auto;}
.page5 .p5-logos::after{position: absolute;bottom:0;left:0;content: "";right: 0;height: 1px;border-bottom:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.2);-webkit-transform-origin: 0 0;transform: scaleY(0.5)}
.page5 .p5-logos .p5-logo1{position: absolute;top:2.70rem;left:0.14rem;width:1.48rem;}
.page5 .p5-logos .p5-logo2{position: absolute;top:0.71rem;left:0.38rem;width:0.98rem;}
.page5 .p5-logos .p5-logo3{position: absolute;top:0.57rem;left:1.77rem;width:1.88rem;}
.page5 .p5-logos .p5-logo4{position: absolute;top:0.09rem;left:4.08rem;width:1.56rem;}
.page5 .p5-logos .p5-logo5{position: absolute;top:0.69rem;left:6.22rem;width:1.12rem;}
.page5 .p5-logos .p5-logo6{position: absolute;top:2.78rem;left:5.96rem;width:1.28rem;}
.page5 .p5-logos .p5-logo7{position: absolute;bottom:0.73rem;left:2.48rem;width:2.57rem;}
.page5 .txt{width:100%;padding:0 0.4rem;margin:1.4rem auto;box-sizing: border-box;font-size: 0.32rem;color:#fff;text-align: left;line-height: 0.55rem;}

.page5 .p5-logos .p5-logo1{-webkit-animation:pulse 1s 0.2s infinite ease-in-out;}
.page5 .p5-logos .p5-logo2{-webkit-animation:pulse 1s 0.4s infinite ease-in-out;}
.page5 .p5-logos .p5-logo3{-webkit-animation:pulse 1s 0.6s infinite ease-in-out;}
.page5 .p5-logos .p5-logo4{-webkit-animation:pulse 1s 0.8s infinite ease-in-out;}
.page5 .p5-logos .p5-logo5{-webkit-animation:pulse 1s 1s infinite ease-in-out;}
.page5 .p5-logos .p5-logo6{-webkit-animation:pulse 1s 1.2s infinite ease-in-out;}
.page5 .p5-logos .p5-logo7{-webkit-animation:pulse 1s 1.4s infinite ease-in-out;}
.page5 .p5-logos img{width:100%;}


/* p6 */
.page6{width:100%;position: relative;background:url(../imgs/p1.jpg) top center no-repeat;background-size: 100% 100%; height: 11.34rem;box-sizing: border-box; -webkit-overflow-scrolling: touch;}
.page6 .p6-top{width:100%;height: 9.2rem;background: #01885f;}
.page6 .p6-top .p6-title{width:5.29rem;margin:0 auto;text-align: center;padding-top:0.7rem;}
.page6 .p6-top .p6-title img{width:100%;}
.page6 .p6-top .loadPic{width:5.84rem;height: 5.84rem;margin:0.6rem auto 0 ;border:0.2rem solid #fff;position: relative;}
.page6 .p6-top .imgs{width:100%;height: 100%;background: url(../imgs/add.jpg) center center no-repeat;background-size:100% auto;}
.page6 .p6-top .imgs .addImg{position: absolute;width:2.08rem;top:1.5rem;left:50%;margin-left:-1.04rem;}
.page6 .p6-top .imgs .addImg img{width:100%;}
.page6 .weui-uploader__file{width:100%;height: 100%;background-size: 100% 100%;;display: block;}
.page6 .p6-top .file{position: absolute;top:0;left:0;display: block;width:5.84rem;height: 5.84rem;opacity: 0;}
.page6 .p6-top .logos{position: absolute;width:5.84rem;bottom:0;left:0;}
.page6 .p6-top .mask{display:none;position: absolute;top:0;left:0;bottom:0;right:0;background: rgba(0, 0, 0, 0.8);}
.page6 .p6-top .logos img{width:100%;}
.page6 .btn{margin:0.5rem auto ; width:4.09rem;height: 0.96rem;background: url(../imgs/setPic.png) top center no-repeat;background-size: 100% auto;-webkit-animation:pulse 1s  infinite ease-in-out;}
.page6 .poster{display: none; position: absolute;top:0;left:0;bottom:0;right:0;background: rgba(0,0,0,0.8);z-index: 100;    }
.page6 .poster .txt{position: absolute;top:6.4rem;left:0;width:100%;text-align: center;font-size: 0.24rem;color:#929292;}
.page6 .poster .txt2{position: absolute;bottom:-0.8rem;left:0;width:100%;text-align: center;font-size: 0.4rem;color:#fff;}
.page6 .loadPoster{display: none; position: absolute;top:0;left:0;bottom:0;right:0;background: rgba(0,0,0,0.8);z-index: 100;  }
.page6 .poster .posterimgBox{display:block;width:6.54rem;height: 9.38rem; position: absolute;top:50%;margin-top:-4.69rem;left:50%;margin-left:-3.27rem;}
.page6 .poster .posterimgBox img{width:100%;}

.page6 .closeBtn{position: absolute; top:-0.5rem;right:-0.5rem;width:0.74rem;height: 0.74rem;;}
.page6 .closeBtn img{width:100%;}
.page6 .loadPoster .spinner {
  margin-top: 7rem;
}
#toast {
  top: 50%;
  left: 50%;
  width: 200px;
  height: 60px;
  font-size: 0.2rem;
  margin-left: -100px;
  margin-top: -30px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
}

.page7{width:100%;padding-bottom:1rem;background: #1b1b1d;}
.p5-footer{position: absolute;bottom:0px;width:100%;left:0;}
.page5 .footer{position: absolute;bottom:0px;width:100%;left:0;}
.page5 .footer .bot{padding-bottom: 1rem;}
.p5-footer .footer-bot .t-c{color:#000}
.p5-footer .footer-bot .t-c{color:#FFF}
.p5-footer .footer-bot p .t-c{color:silver}
.p5-footer .footer-bot p .t-c{color:silver}
.p5-footer .footer-bot .t-c{color:silver}
.p5-footer .footer-bot a{color:silver}
.p5-footer .footer-top ul .shouye p a{color:#000}
.p5-footer .footer-top ul li p a{color:#000}
.p5-footer .footer-top ul{width:5.7rem;margin:0 auto;}
.p5-footer .footer-top ul li{width:0.9rem;}
.footer .top li a{color:#333}
/* .weixiner {
    position: absolute;
    top: -60%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    z-index: 6;
    display: none;
} */
.header .lang {
  position: absolute;
  right: 1.2rem;
  top: 0;
  height: .88rem;
  line-height: .88rem;
  color: #666;
  font-size: .3rem;
}


@-webkit-keyframes fadeIn{
  0%{opacity:0}
  100%{opacity:1}
}

@keyframes fadeIn{
  0%{opacity:0}
  100%{opacity:1}
}
@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}
40%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}
40%{-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes shan1{
  0%{opacity:1}
  50%{opacity:.6}
  100%{opacity:1}
}

@keyframes shan1{
  0%{opacity:1}
  50%{opacity:.6}
  100%{opacity:1}
}
@-webkit-keyframes shan{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.3);transform:scale(.3)}
  100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes shan{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.3);transform:scale(.3)}
  100%{-webkit-transform:scale(1);transform:scale(1)}
}

@-keyframes warterDrop {
  0% {
    top: 0rem;
    -webkit-transform:scale(1);
    transform:scale(1)
  }

  50% {
   top:1.3rem;
   -webkit-transform:scale(1.02);
   transform:scale(1.02)
  }
  80% {
    top: 1.86rem;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0.7;
  }

  100% {
    top:2.5rem;
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
     opacity: 0;
  }
}
@-webkit-keyframes warterDrop {
  0% {
    top: 0rem;
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  50% {
    top: 1.3rem;
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
  }

  80% {
    top: 2.06rem;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0.7;
  }

  100% {
    top: 2.5rem;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
  }
}

@-webkit-keyframes fall{15%,5%{box-shadow:0 -1.4em 0 .1em rgba(167,217,234,1),0 -.8em 0 .15em rgba(167,217,234,1),0 -.3em 0 .2em rgba(167,217,234,1),0 -.1em 0 .25em rgba(167,217,234,1),0 0 0 .3em rgba(167,217,234,1),0 .2em 0 .35em rgba(167,217,234,1),0 .4em 0 .4em rgba(167,217,234,1),0 .6em 0 .45em rgba(167,217,234,1),0 .8em 0 .5em rgba(167,217,234,1)}
16%{top:80%}
18%{top:80%;box-shadow:1em -8em 0 .2em rgba(177,227,234,1),-2.2em -3.8em 0 .1em rgba(177,227,234,1),3em -2.85em 0 .3em rgba(177,227,234,1),-3.5em -4em 0 .2em rgba(177,227,234,1),0 0 0 .3em rgba(177,227,234,1),2em -2em 0 .2em rgba(177,227,234,1),-.3em -3em 0 .2em rgba(177,227,234,1),.5em -5em 0 .35em rgba(177,227,234,1),-3em -1em 0 .3em rgba(177,227,234,1)}
30%{top:90%;box-shadow:1.5em 0 0 .2em rgba(252,252,255,.1),-2em 0 0 .15em rgba(252,252,255,.1),3em 0 0 .2em rgba(252,252,255,.1),-2em 0 0 .25em rgba(252,252,255,.1),0 0 0 .2em rgba(252,252,255,.1),2.35em 0 0 .3em rgba(252,252,255,.1),-.5em 0 0 .2em rgba(252,252,255,.1),1em 0 0 .3em rgba(252,252,255,.1),-4em 0 0 .4em rgba(252,252,255,.1)}
100%,40%{top:95%;background:rgba(255,255,255,1);box-shadow:1.8em .5em 0 .2em rgba(255,255,255,0),-3em .5em 0 .1em rgba(255,255,255,0),4em .5em 0 .1em rgba(255,255,255,0),-3.5em .5em 0 .1em rgba(255,255,255,0),0 0 0 .3em rgba(255,255,215,0),2.45em .5em 0 .1em rgba(255,255,255,0),-.8em .5em 0 .2em rgba(255,255,255,0),1.5em .5em 0 .3em rgba(255,255,255,0),-4.5em .5em 0 .2em rgba(255,255,255,0)}}
@keyframes fall{15%,5%{box-shadow:0 -1.4em 0 .1em rgba(167,217,234,1),0 -.8em 0 .15em rgba(167,217,234,1),0 -.3em 0 .2em rgba(167,217,234,1),0 -.1em 0 .25em rgba(167,217,234,1),0 0 0 .3em rgba(167,217,234,1),0 .2em 0 .35em rgba(167,217,234,1),0 .4em 0 .4em rgba(167,217,234,1),0 .6em 0 .45em rgba(167,217,234,1),0 .8em 0 .5em rgba(167,217,234,1)}
16%{top:80%}
18%{top:80%;box-shadow:1em -8em 0 .2em rgba(177,227,234,1),-2.2em -3.8em 0 .1em rgba(177,227,234,1),3em -2.85em 0 .3em rgba(177,227,234,1),-3.5em -4em 0 .2em rgba(177,227,234,1),0 0 0 .3em rgba(177,227,234,1),2em -2em 0 .2em rgba(177,227,234,1),-.3em -3em 0 .2em rgba(177,227,234,1),.5em -5em 0 .35em rgba(177,227,234,1),-3em -1em 0 .3em rgba(177,227,234,1)}
30%{top:90%;box-shadow:1.5em 0 0 .2em rgba(252,252,255,.1),-2em 0 0 .15em rgba(252,252,255,.1),3em 0 0 .2em rgba(252,252,255,.1),-2em 0 0 .25em rgba(252,252,255,.1),0 0 0 .2em rgba(252,252,255,.1),2.35em 0 0 .3em rgba(252,252,255,.1),-.5em 0 0 .2em rgba(252,252,255,.1),1em 0 0 .3em rgba(252,252,255,.1),-4em 0 0 .4em rgba(252,252,255,.1)}
100%,40%{top:95%;background:rgba(255,255,255,1);box-shadow:1.8em .5em 0 .2em rgba(255,255,255,0),-3em .5em 0 .1em rgba(255,255,255,0),4em .5em 0 .1em rgba(255,255,255,0),-3.5em .5em 0 .1em rgba(255,255,255,0),0 0 0 .3em rgba(255,255,215,0),2.45em .5em 0 .1em rgba(255,255,255,0),-.8em .5em 0 .2em rgba(255,255,255,0),1.5em .5em 0 .3em rgba(255,255,255,0),-4.5em .5em 0 .2em rgba(255,255,255,0)}}
@-webkit-keyframes surface{50%{border-radius:0 95% 0 95%;opacity:.5;height:3.5em}}
@keyframes surface{50%{border-radius:0 95% 0 95%;opacity:.5;height:3.5em}}
.text-init.animate {
  -webkit-animation: text_animate 1s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-animation: text_animate 1s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-animation: text_animate 1s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
  animation: text_animate 1s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
}

@-webkit-keyframes text_animate {
  0% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 0;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 0;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 0;
    /* IE9 + etc...modern browsers */
    opacity: 0;
    opacity: 1\0;
    transform: translate3d(0, 25px, 0);
  }

  100% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 1;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 1;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 1;
    /* IE9 + etc...modern browsers */
    opacity: 1;
    opacity: 1\0;
    transform: translate3d(0, 0, 0);
  }
}

@-moz-keyframes text_animate {
  0% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 0;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 0;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 0;
    /* IE9 + etc...modern browsers */
    opacity: 0;
    opacity: 1\0;
    transform: translate3d(0, 25px, 0);
  }

  100% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 1;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 1;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 1;
    /* IE9 + etc...modern browsers */
    opacity: 1;
    opacity: 1\0;
    transform: translate3d(0, 0, 0);
  }
}

@-ms-keyframes text_animate {
  0% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 0;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 0;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 0;
    /* IE9 + etc...modern browsers */
    opacity: 0;
    opacity: 1\0;
    transform: translate3d(0, 25px, 0);
  }

  100% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 1;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 1;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 1;
    /* IE9 + etc...modern browsers */
    opacity: 1;
    opacity: 1\0;
    transform: translate3d(0, 0, 0);
  }
}

@-o-keyframes text_animate {
  0% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 0;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 0;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 0;
    /* IE9 + etc...modern browsers */
    opacity: 0;
    opacity: 1\0;
    transform: translate3d(0, 25px, 0);
  }

  100% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 1;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 1;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 1;
    /* IE9 + etc...modern browsers */
    opacity: 1;
    opacity: 1\0;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes text_animate {
  0% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 0;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 0;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 0;
    /* IE9 + etc...modern browsers */
    opacity: 0;
    opacity: 1\0;
    transform: translate3d(0, 25px, 0);
  }

  100% {
    /* older safari/Chrome browsers */
    -webkit-opacity: 1;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 1;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 1;
    /* IE9 + etc...modern browsers */
    opacity: 1;
    opacity: 1\0;
    transform: translate3d(0, 0, 0);
  }
}

.text-init {
  /* older safari/Chrome browsers */
  -webkit-opacity: 0;
  /* Netscape and Older than Firefox 0.9 */
  -moz-opacity: 0;
  /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
  -khtml-opacity: 0;
  /* IE9 + etc...modern browsers */
  opacity: 0;
  opacity: 1\0;
}
/* @media (max-width: 320px) {
  .page3 .p3-slide h3 span {
    font-size: 0.16rem;
  }
  .page4 .p4-slide h3 span {
    font-size: 0.16rem;
  }
} */