/** { touch-action: pan-y; } */
#power5s .bold{ 
	-webkit-transform: translate(0,2rem);
    -ms-transform: translate(0,2rem);
    transform: translate(0,2rem);
    opacity: 0;
    -webkit-transition: opacity ease-in-out .6s,-webkit-transform ease-in-out 1s;
    transition: opacity ease-in-out .6s,-webkit-transform ease-in-out 1s ;
    transition: transform ease-in-out .6s,opacity ease-in-out 1s;
    transition: transform ease-in-out .6s,opacity ease-in-out 1s,-webkit-transform ease-in-out 1s;
}
#power5s .italic{ 
	-webkit-transform: translate(0,2rem);
    -ms-transform: translate(0,2rem);
    transform: translate(0,2rem);
    opacity: 0;
    -webkit-transition: opacity ease-in-out .6s,-webkit-transform ease-in-out 1s;
    transition: opacity ease-in-out .6s,-webkit-transform ease-in-out 1s;
    transition: transform ease-in-out .6s,opacity ease-in-out 1s;
    transition: transform ease-in-out .6s,opacity ease-in-out 1s,-webkit-transform ease-in-out 1s;
}
#power5s .third{  
	-webkit-transform: translate(0,2rem);
    -ms-transform: translate(0,2rem);
    transform: translate(0,2rem);
    opacity: 0;
    -webkit-transition: opacity ease-in-out .6s,-webkit-transform ease-in-out 1s;
    transition: opacity ease-in-out .6s,-webkit-transform ease-in-out 1s;
    transition: transform ease-in-out .6s,opacity ease-in-out 1s;
    transition: transform ease-in-out .6s,opacity ease-in-out 1s,-webkit-transform ease-in-out 1s;
}
#power5s .bold.active,#power5s .third.active,#power5s .italic.active{
	-webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1
}

.big{ font-size: 3vw; line-height: 4vw; }
.middle{ font-size: 3vw; line-height: 3.22vw; margin: 0.5vw auto 1.5vw auto; }
.small{ font-size: 1.8vw; line-height: 2.6vw; }
.color-yellow{ color: #FFC604; }
.toright{ 
    background-image: linear-gradient(to right, #09BAFE, #2500FD);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.qing{ color: #02EFFF; }
#power5s { color: #000000;}
#power5s img{ width: 100%; max-width: 100%; vertical-align: bottom; }
#power5s .box1 { position: relative; }
#power5s .box1 .box{ width: 100%; position: absolute; left: 0%; top: 5%; color: #ffffff; text-align: center; }
#power5s .box1 .box .b{ font-size: 3vw; line-height: 3.2vw; }
#power5s .box1 .box .m{ font-size: 3vw; line-height: 3.2vw; margin: 0vw auto 1vw auto; }
#power5s .box1 .box .s{ font-size: 1.4vw; line-height: 2vw; }
#power5s .box1 .box .s span{ font-size: 1.4vw; line-height: 2vw; }
#power5s .box1 .box .text{ border: 2px solid #ffffff; box-sizing: border-box; width: 2.6vw; height: 2.6vw; line-height: 2.6vw; text-align: center; 
    display: inline-block; outline: none; font-size: 2vw; border-radius: 5px;
}
#power5s .box1 .box .ul{ overflow: hidden; width: 52%; margin: 2% auto; }
#power5s .box1 .box .ul .li{ float: left; width: 33.33%; position: relative; padding-left: 9%; box-sizing: border-box; text-align: left; }
#power5s .box1 .box .ul .li .icon{ width: 20%; position: absolute; left: 0%; top: 2%; }
#power5s .box1 .logo{ position: absolute; width: 10%; left: 5%; top: 4%; }
#power5s .box2{ overflow: hidden; }
#power5s .box3{ position: relative; overflow: hidden; }
#power5s .box3 .img2{ width: 68%; left: 49%; top: 49%; position: absolute; transition: all 0.3s linear; opacity: 0; filter: opacity(0); }
#power5s .box3 .img2.active{ left: 16%; top: 34%;opacity: 1; filter: opacity(100); }
#power5s .box3 .img3{ width: 34%; left: -12%; top: 37%; position: absolute; transition: all 0.3s linear;opacity: 0; filter: opacity(0); }
#power5s .box3 .img3.active{ left: 21%; top: 53%;opacity: 1; filter: opacity(100); }
#power5s .box3 .box{ position: absolute; width: 74%; left: 13%; top: 6%; text-align: center; color: #ffffff; }
#power5s .box3 .ul{ overflow: hidden; position: absolute; width: 74%; left: 13%; top: 83%;  }
#power5s .box3 .ul .li{ width: 25%; float: left; box-sizing: border-box; text-align: center; }
#power5s .box3 .ul .li .icon{ width: 20%; }
#power5s .box3 .ul .li .bold{ color: #ffffff; font-size: 2vw; line-height: 2.4vw; }
#power5s .box3 .ul .li .ss{ color: #ffffff; font-size: 1.4vw; line-height: 1.8vw; }
#power5s .box3 .ul .li .color-yellow{ font-size: 1.6vw; line-height: 2vw; color: #FFC604; margin: 0.2vw auto; }
#power5s .box3 .ul .li .mr{ border-right:  2px solid #ffffff; }
#power5s .box4{ position: relative; overflow: hidden; background-color: #000000; }
#power5s .box4 .box{ position: absolute; width: 74%; left: 13%; top: 4%; text-align: center; color: #ffffff; }
#power5s .box4 .ul{ overflow: hidden; position: absolute; width: 50%; left: 25%; top: 87%;  }
#power5s .box4 .ul .li{ width: 50%; float: left; box-sizing: border-box; text-align: center; }
#power5s .box4 .ul .li .ss{ color: #ffffff; font-size: 1.4vw; line-height: 1.8vw; }
#power5s .box4 .ul .li .qing{ font-size: 2vw; line-height: 2.4vw; color: #02EFFF; margin: 0.2vw auto; }
#power5s .box5{ overflow: hidden; position: relative; }
#power5s .box5 .img{ position: absolute; width: 24%; left: 38%; bottom: -40%; transition: all 0.3s linear; }
#power5s .box5 .img.active{ bottom: 0%;  }
#power5s .box5 .show3{ opacity: 0; filter: opacity(0);  transition: all 0.3s linear 0.3s; }
#power5s .box5 .show3.active{ opacity: 1; filter: opacity(100); }
#power5s .box5 .pp{ position: absolute; width: 20%; left: 13%; top:40%; }
#power5s .box5 .pp .bb{ font-size: 5vw; line-height: 5.4vw; }
#power5s .box5 .pp .ss{ font-size: 2vw; line-height: 2.4vw; }
#power5s .box5 .ul{ position: absolute; width: 24%; left: 65%; top: 20%; }
#power5s .box5 .ul .li{ padding-left: 20%; box-sizing: border-box; margin-bottom: 12%; position: relative; }
#power5s .box5 .ul .li .mm{ font-size: 1.4vw; line-height: 2vw; }
#power5s .box5 .ul .li .icon{ position: absolute; width: 15%; left: 0%; top: -12%; }
#power5s .box5 .ul .l5{ margin-top: 17%; }
#power5s .box5 .ul .l5 .icon{ top: -89%; }
#power5s .box6{ width: 63%; padding: 4% 0px; margin: 0% auto; }
#power5s .box6 .p{ position: relative; overflow: hidden; }
#power5s .box6 .p1{ width: 100%; position: relative; }
#power5s .box6 .p2{ position: relative; }
#power5s .box6 .p2 img{  margin-top: 6%; height: 25.5vw; width: auto; }
#power5s .box6 .img{ position: absolute; right: 0%; bottom: 0%; }
#power5s .box6 .text{ position: absolute; width: 10%; left: 4%; top: 4%; font-size: 4vw; line-height: 4.4vw; color: #ffffff; }
#power5s .box6 .t2{ top: 18%; }
#power5s .box6 .t3{ top: 18%; right: 0%; z-index: 1; left: inherit; }
#power5s .box7{ margin: 4% auto; width: 74%; }
#power5s .box7 .box{ color: #000000; text-align: center; }
#power5s .box7 .imgBox{ margin-top: 4%; position: relative; }
#power5s .box7 .imgBox .on{ position: absolute; width: 10%; font-size: 3vw; line-height: 3.4vw;top: 4%; right: 53%; color: #ffffff; }
#power5s .box7 .imgBox .off{ position: absolute; width: 10%; font-size: 3vw; line-height: 3.4vw;top: 4%; right: 4%; color: #ffffff; }
#power5s .box8{ margin: 4% auto; }
#power5s .box8 .box{ color: #000000; text-align: center;  margin: 4% auto 0% auto; width: 74%;}
#power5s .box8 .imgBox{ position: relative;  }
#power5s .box8 .imgBox .div{ position: absolute; background-color: #ffffff; transition: all 0.2s linear; }
#power5s .box8 .imgBox .d1{ width: 100%; height: 20%; top: 0%; left: 0%; }
#power5s .box8 .imgBox .d2{ width: 20%; height: 100%; top: 0%; right: 0%; }
#power5s .box8 .imgBox .d3{ width: 100%; height: 20%; bottom: 0%; left: 0%; }
#power5s .box8 .imgBox .d4{ width: 20%; height: 100%; top: 0%; left: 0%; }
#power5s .box8 .imgBox .d1.active{ height: 0%; }
#power5s .box8 .imgBox .d2.active{ width: 0%; }
#power5s .box8 .imgBox .d3.active{ height: 0%; }
#power5s .box8 .imgBox .d4.active{ width:0% ; }
#power5s .box9{ margin: 4% auto; }
#power5s .box9 .box{ color: #000000; text-align: center;  margin: 4% auto; width: 74%;}
#power5s .box9 .imgBox{ width: 74%; margin: 4% auto; }
#power5s .box10{ margin: 4% auto; }
#power5s .box10 .box{ color: #000000; text-align: center;  margin: 4% auto; width: 74%;}
#power5s .box10 .imgBox{ width: 74%; margin: 4% auto; }
#power5s .box11{ position: relative; }
#power5s .box11 .box{ color: #000000; width: 74%; left: 13%; top: 6%; text-align: center; position: absolute; }
#power5s .box11 .ul{ width: 74%; left: 13%; top: 70%; position: absolute; transition: all 0.3s linear; }
#power5s .box11 .ul li{ float: left; width: 32%; margin-right: 2%; position: relative; }
#power5s .box11 .ul li.mr{ margin-right: 0px; }
#power5s .box11 .ul li .text{ font-size: 1.4vw; line-height: 1.8vw; width: 100%; position: absolute; left: 0%; top: 81%; text-align: center; }

#power5s .box12{ position: relative; }
#power5s .box12 .swiper-container1{ position: relative; }
#power5s .box12 .swiper-container1 .icon{ position: absolute; width: 3%; top: 3%; }
#power5s .box12 .swiper-container1 .circle1 .icon{ left: 23.5%; }
#power5s .box12 .swiper-container1 .circle2 .icon{ left: 48.8%; }
#power5s .box12 .swiper-container1 .circle3 .icon{ left: 74.6%; }
#power5s .box12 .swiper-pagination1{ margin:12% auto 2% auto; position: inherit; width: 74%; overflow: hidden; }
#power5s .box12 .swiper-pagination1 .button{ float: left; width: 33.33%; text-align: center; font-size: 2vw; line-height: 3vw; 
    height: auto; background-color: inherit;
}
#power5s .box12 .swiper-pagination1 .color0{ color: #676767; }
#power5s .box12 .swiper-pagination1 .color1{ color: #708EFE; }
#power5s .box12 .swiper-pagination1 .color2{ color: #00DEE1; }

#power5s .box13{ position: relative; }
#power5s .box13 .pbox{ width: 74%; top: 4%; left: 13%; position: absolute; text-align: center;}
#power5s .box13 .pbox .big{}
#power5s .box13 .pbox .middle{ color: #FFFFFF;}
#power5s .box13 .pbox .small{ color: #FFFFFF;}
#power5s .box13 .text{ width: 64%; position: absolute; left: 18%; top: 28%; }
#power5s .box13 .text ul{ width: 36%; position: absolute; left: 13%; top: 23%; }
#power5s .box13 .text ul li{ margin-bottom: 15%; }
#power5s .box13 .text ul li .dd{ font-size: 2vw; line-height: 2.4vw; }
#power5s .box13 .text ul li .ss{ font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; margin-top: 1%; }
#power5s .box13 .pbox2{ width: 74%; top: 66%; left: 13%; position: absolute; text-align: center;}
#power5s .box13 .pbox2 .big{ }
#power5s .box13 .pbox2 .middle{ color: #000000;}
#power5s .box13 .pbox2 .small{ color: #000000;}
/*#power5s .box13 .toright{ 
    background-image: linear-gradient(to right, #8ffca0, #0BCBFC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#power5s .box13 .toright2{ 
    background-image: linear-gradient(to right, #8F6CFC, #DCA0F6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}*/
#power5s .box13 .img2{  width: 64%; position: absolute; left: 18%; top: 88%; }
#power5s .box14{ padding: 28vw 13% 10vw 13%; position: relative; }
#power5s .box14 .img{ width: 40%; }
#power5s .box14 .img2{ width: 42%; position: absolute; right: 13%; top: 32%; z-index: 2; }


#power5s .box15{ position: relative; overflow: hidden;}
#power5s .box15 .pbox{ width: 40%; top: 27%; left: 51%; position: absolute; z-index: 1;}
#power5s .box15 .pbox .big{ }
#power5s .box15 .pbox .middle{ color: #000000;}
#power5s .box15 .pbox .small{ color: #000000;}
#power5s .box15 .img{ width: 100%; left: 0%; top: 19%; position: absolute;}
#power5s .box15 .img2{ width: 34%; left: 33%; top: 45%; position: absolute;}
#power5s .box15 .img2 .b{ font-size: 3vw; text-align: center; position: absolute; width: 100%; left: 0%; top: 32%; color: #FFFFFF;}
#power5s .box15 .tips{ width: 34%; left: 33%; top: 50%; position: absolute; font-size: 1.6vw; text-align: center; color: #585858;}
#power5s .box15 .pp{ position: absolute; width: 30%; top: 54%; left: 13%;}
#power5s .box15 .pp .img_left{ width: auto;height: 3vw;}
#power5s .box15 .pp .m{ font-size: 1.6vw; line-height: 2.4vw; margin: 2% auto 4% auto; color: #F7F7F7;}
#power5s .box15 .pp .imgBox{ position: relative; margin-top: -10%;}
#power5s .box15 .pp .imgBox img{ width: auto;height: 9vw;}
#power5s .box15 .imgLast{ position: absolute; right: 0%; bottom: 0%; width: 80%; }
#power5s .box15 .img3{ position: absolute; left: 26%; top: 20%; width: 20%; }
#power5s .box15 .toright2{ 
    background-image: linear-gradient(to right, #8F6CFC, #DCA0F6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#power5s .box16{ position: relative; }
#power5s .box16 .pbox{ color: #ffffff; position: absolute; top: 9%; left: 13%; width: 74%; text-align: center; }

#power5s .box17{ position: relative; }
#power5s .box17 .box{ color: #000000; position: absolute; top: 8%; left: 13%; width: 74%; text-align: center; }
#power5s .box17 .box .img{ width: 26%; vertical-align: middle; margin-top: -1%; }
#power5s .box17 .img1{ width: 20%; position: absolute; left: 13%; top: 34%; transition: all 0.3s linear; }
#power5s .box17 .img2{ width: 20%; position: absolute; left: 40%; top: 38%; transition: all 0.3s linear;  }
#power5s .box17 .img3{ width: 20%; position: absolute; left: 67%; top: 34%; transition: all 0.3s linear;  }
#power5s .box17 .img1.active{ top: 34%; }
#power5s .box17 .img3.active{ top: 34%; }
#power5s .box17 .img1.active1{ top: 42%; }
#power5s .box17 .img3.active1{ top: 42%; }
#power5s .box18{ position: relative; }
#power5s .box18 .box{ color: #ffffff; position: absolute; top: 8%; left: 13%; width: 74%; text-align: center; }
#power5s .box19{ position: relative; }
#power5s .box19 .box{ position: absolute; top: 40%; left: 13%; width: 40%; font-size: 2vw; color: #000000; line-height: 3vw; }