.big{ font-size: 3.6vw; line-height: 4vw; }
.middle{ font-size: 2.4vw; line-height: 2.8vw; margin: 0.5vw auto 1vw auto; }
.small{ font-size: 1.4vw; line-height: 2.2vw; margin-top: 1vw; }
.gradient{ background: linear-gradient(to left, #0072ff, #a0caff);-webkit-background-clip: text;color: transparent; }
.orange{ background: linear-gradient(to left, #f99e01, #fece00);-webkit-background-clip: text;color: transparent; }
#f3pro5g img{ width: 100%; max-width: 100%; vertical-align: bottom; }

#f3pro5g .box1{ position: relative; overflow: hidden; }
#f3pro5g .box1 .box{ position: absolute; width: 40%; left: 64%; top: 35%; }
#f3pro5g .box1 .b{ font-size: 5vw; line-height: 5.2vw; }
#f3pro5g .box1 .m{ font-size: 2.4vw; line-height: 2.6vw; }
#f3pro5g .box1 .s{ font-size: 1.4vw; line-height: 1.6vw; margin-bottom: 2%; }
#f3pro5g .box1 .mt{ margin-top: 4%; }
#f3pro5g .box2{ position: relative; overflow: hidden; background-color: #000000; padding: 4% 10%; }
#f3pro5g .box2 .text{ position: absolute; left: 0%; top: 8%; width: 100%; color: #ffffff; font-size: 1.8vw; line-height: 2vw; z-index: 2;
    padding: 0px 9%; box-sizing: border-box; 
}
#f3pro5g .box2 .textBox:hover .img{ transform: scale(1.2); }
#f3pro5g .box2 .textBox.tb1:hover .img{ transform: scale(1.7); }
#f3pro5g .box2 .textBox{ float: left; height: 18vw; margin-bottom: 1.6vw; overflow: hidden; position: relative;
    border-radius: 10px;
    background-color:#282a2f;
    background-image:-webkit-gradient(-135deg,#282a2f,#0f1116);
    background-image:-webkit-linear-gradient(-135deg,#282a2f,#0f1116);
    background-image:-moz-linear-gradient(-135deg,#282a2f,#0f1116);
    background-image: -ms-linear-gradient(-135deg, #282a2f 0%, #0f1116 100%);
    background-image: -o-linear-gradient(-135deg,#282a2f,#0f1116);
    background-image: linear-gradient(-135deg,#282a2f,#0f1116);
    box-shadow: 0px 0px 2px #ffffff;
    box-sizing: border-box;
}
#f3pro5g .box2 .tb1,#f3pro5g .box2 .tb2,#f3pro5g .box2 .tb3{ width: 32%;  }
#f3pro5g .box2 .tb2{ margin-left:2%; margin-right:2%; }
#f3pro5g .box2 .tb4,#f3pro5g .box2 .tb5{ width: 24%; }
#f3pro5g .box2 .tb5{ margin-left:2%; margin-right:2%; }
#f3pro5g .box2 .tb6{ width: 48%; }
#f3pro5g .box2 .tb6 .bb{ font-size: 1.8vw; line-height: 2vw; }
#f3pro5g .box2 .tb6 .bbt{ margin-top: 18%; }
#f3pro5g .box2 .tb7{ width: 40%; margin-right: 2%; height: 37.6vw; }
#f3pro5g .box2 .tb8,#f3pro5g .box2 .tb9,#f3pro5g .box2 .tb10,#f3pro5g .box2 .tb11{ width: 28%; }
#f3pro5g .box2 .tb8,#f3pro5g .box2 .tb10{ margin-right: 2%; }
#f3pro5g .box2 .textBox .img{ position: absolute; width: 100%; bottom: 0%; left: 0%; transition: all 0.3s linear }
#f3pro5g .box2 .textBox .img1{ transform: scale(1.5); }
#f3pro5g .box2 .textBox .img2{ top: -1%; bottom: inherit; width: 200%; max-width: 200%; left: -40%;}
#f3pro5g .box2 .textBox .img4{ width: 54%; left: 9%; bottom: 10%; }
#f3pro5g .box2 .textBox .img5{ width: 80%; left: 10%; bottom: 16%; }
#f3pro5g .box2 .textBox .img6{ width: 15%; left: 57%; }
#f3pro5g .box2 .textBox .img7{ width: 90%; left: 5%; bottom: 5%; }
#f3pro5g .box2 .textBox .img9{ width: 40%; left: 30%; bottom: 10%; }
#f3pro5g .box2 .textBox .img10{ width: 28%; left: 36%; bottom: 4%; }
#f3pro5g .box2 .textBox .img11{ width: 40%; left: 30%; bottom: 12%; }
#f3pro5g .box2 .textBox.tb10 .img10{ bottom: 13%; }
#f3pro5g .box2 .textBox.tb11 .img11{ bottom: 15%; }
#f3pro5g .box2 .tb10 .bb{ font-size: 2.8vw; line-height: 3vw; text-align: center; }
#f3pro5g .box2 .tb10 .bbt{ margin-top: 1%; text-align: center; font-size: 1.4vw; line-height: 1.6vw; }
#f3pro5g .box2 .tb10 .text{ top:12%; }
#f3pro5g .box2 .tb10 .mt{ margin-top: 13%; padding-top: 11%; border-top: 2px solid #ffffff; }
#f3pro5g .box2 .tb11 .text{ text-align: center; top: 22%; }
#f3pro5g .box2 .tb11 .nfc{ font-size: 2.8vw; line-height: 3vw; }
#f3pro5g .box2 .tb11 .tt{ font-size: 2vw; line-height: 2.4vw; margin-top: 13%; padding-top: 10%; border-top: 2px solid #ffffff; }
#f3pro5g .box2 .textBox .jump{ position: absolute; top: 9%; right: 5%; width: 2vw; display: inline-block; z-index: 3; }
#f3pro5g .box2 .textBox.tb7 .jump{ top: 5%; }
#f3pro5g .box3{ background-color: #000000; overflow: hidden; position: relative; }
#f3pro5g .box3 .fixedBox{ position: relative; width: 100%; min-height: 50vw; }
#f3pro5g .box3 .fixedBox .box{ width: 60%; color: #ffffff; margin: 4% auto 0%; text-align: center; opacity: 0; }
#f3pro5g .box3 .fixedBox .box.active{ opacity: 1; transition: all 0.3s linear; }
#f3pro5g .box3 .imgBox{ position: relative; transform: translateY(-13%) scale(0);  }
#f3pro5g .box3 .img1{ width: 100%; }
#f3pro5g .box3 .img2{ width: 50%; top: 2%; left: 25%; position: absolute; }
#f3pro5g .box3 .img3{ width: 17%; top: 36%; left: 42%; position: absolute; }
#f3pro5g .box4{ position: relative; overflow: hidden; background-color: #000000; }
#f3pro5g .box4 .imgBox{ overflow: hidden; position: relative; margin-top: 2%; }
#f3pro5g .box4 .imgBox .box{ position: absolute; width: 60%; left: 20%; top: 3%; text-align: center; color: #ffffff; }
#f3pro5g .box4 .textBox{ width: 60%; margin:0px auto; position: relative; }
#f3pro5g .box4 .b{ font-weight: bolder; font-size: 1.8vw; line-height: 2vw; color: #ffffff; }
#f3pro5g .box4 .m{ font-size: 1.4vw; line-height: 1.6vw; color: #ffffff; margin: 3% 0px; }
#f3pro5g .box4 .s{ color: #D9D9D9; font-size: 0.8vw; }
#f3pro5g .box4 .line{ height: 2px; background-color: #B6B6B6; margin:4% 0px; }
#f3pro5g .box4 .bb{ color: #E0E0E0; font-size: 1.2vw; line-height: 1.4vw; margin: 2% 0px 1%; }
#f3pro5g .box4 .lines{ overflow: hidden; padding: 1% 0px; }
#f3pro5g .box4 .lineBox{ height: 16px; background-color: #e2e6ea; display: inline-block; width: 0; transition: all 0.3s linear; }
#f3pro5g .box4 .tips{ font-size: 0.8vw; line-height: 1.4vw; color: #ffffff; margin:2% 0px 3%; }
#f3pro5g .box4 .l1.active{ width: 85%; }
#f3pro5g .box4 .l2.active{ width: 68%; }
#f3pro5g .box4 .l3.active{ width: 56%; }
#f3pro5g .box4 .number{ float: right; font-size: 1.4vw; line-height: 1; color: #ffffff; transform: rotateY(-20%); }
#f3pro5g .box4 .imgTop{ width: 3%; top: 0%; right: 0%; position: absolute; }
#f3pro5g .box4 .imgTop1{ top: 30%; right: 0%; }
#f3pro5g .box4 .ml{ margin-left: 8%; }
#f3pro5g .box5{ position: relative; overflow: hidden;  }
#f3pro5g .box5 .poBox{ position: relative; overflow: hidden; }
#f3pro5g .box5 .fixed{ width: 100%; position: relative;padding:4% 0px 6% 0px; }
#f3pro5g .box5 ul{ overflow: hidden; }
#f3pro5g .box5 .ul1{ transform:translateX(100%); }
#f3pro5g .box5 .ul2{ transform:translateX(-100%); }
#f3pro5g .box5 ul li{ float: left; width: 19.52%; margin-right: 0.6%; margin-bottom: 1.6%; }
#f3pro5g .box5 ul li:last-child{ margin-right: 0%; }
#f3pro5g .box5 .box{  width: 60%; margin: 0px auto 6%; text-align: center; transition: all 0.3s linear; opacity: 0; }
#f3pro5g .box5 .img1{ position: absolute; width: 22%; left: 39%; top: 1%; z-index: 1; }
#f3pro5g .box5 .img2{ position: absolute; width: 100%; left: 0%; top: 0%; }
#f3pro5g .box5 .pp{ position: relative; overflow: hidden; transform: scale(0.5) translate(0%,-15%); padding-top: 5%; opacity: 0; }
#f3pro5g .box6{ position: relative; overflow: hidden; }
#f3pro5g .box6 .pt{ position: relative; overflow: hidden; }
#f3pro5g .box6 .fixed{ position: relative; width: 100%; overflow: hidden; }
#f3pro5g .box6 .box{ width: 60%; margin: 4% auto; text-align: center; opacity: 0; transition: all 0.3s linear; }
#f3pro5g .box6 .img{ width: 100%; position: absolute; left: 0%; top: 20%; }
#f3pro5g .box6 .imgBox{ position: absolute; width: 10%; overflow: hidden; top: 36%; left: 66%; padding-bottom: 20%; }
#f3pro5g .box6 .img2{ position: absolute; width: 20%; left: 40%; top: 150%; transition: all 1s linear; }
#f3pro5g .box6 .img2.active{ top: 49%; }
#f3pro5g .box6 .img1{ position: relative;z-index: 1; }
#f3pro5g .box6 .img3{ position: absolute; width: 40%; left: 30%; top: 48%; z-index: 2; opacity: 0; transition: all 0.5s linear; }
#f3pro5g .box6 .img3.active{ opacity: 1; transition-delay: 1s; }
#f3pro5g .box6 .img4{ position: absolute; width: 40%; left: 30%; top: 42%; z-index: 2; opacity: 0; transition: all 0.2s linear; }
#f3pro5g .box6 .img4.active{ opacity: 1; transition-delay: 1.5s; }
#f3pro5g .box6 .img5{ position: absolute; width: 99%; left: 1%; top: 16%; z-index: 2; opacity: 0; transition: all 0.5s linear; }
#f3pro5g .box6 .img5.active{ opacity: 1; transition-delay: 2s; }
#f3pro5g .box6 .img6{ position: absolute; width: 83%; left: 9%; top: 20%; z-index: 2; opacity: 0; transition: all 0.5s linear; }
#f3pro5g .box6 .img6.active{ opacity: 1; transition-delay: 2s; }
#f3pro5g .box6 .textBox{ width: 60%; margin: 0% auto 2%; overflow: hidden; }
#f3pro5g .box6 .textBox .li{ float: left; width: 23.5%; margin-right: 2%; box-sizing: border-box; padding-left: 11%; position: relative; padding-top: 2%; }
#f3pro5g .box6 .textBox .li:last-child{ margin-right: 0%; }
#f3pro5g .box6 .textBox .imgAll{ position: absolute; width: 38%; top: 0%; left: 0%; }
#f3pro5g .box6 .textBox .b{ font-size: 2.4vw; line-height: 2.6vw; }
#f3pro5g .box6 .textBox .s{ font-size: 1.4vw; line-height: 1.6vw; margin-top: 2%; }
#f3pro5g .box7{ position: relative; overflow: hidden; }
#f3pro5g .box7 .fixed{ position:relative ; width: 100%; }
#f3pro5g .box7 .box{ width: 60%; margin: 4% auto; text-align: center; opacity: 0; transition: all 0.2s linear; }
#f3pro5g .box7 .box.active{ transition-delay: 0.3s; opacity: 1; }
#f3pro5g .box7 .video{ position: absolute; width: 40%; left: 30%; top: 44%; transform: scale(2.5); transition: all 0.4s linear; }
#f3pro5g .box7 .video.active{ transform: scale(1.3); }
#f3pro5g .box7 .img{ position: absolute; width: 60%; left: 20%; top: 36%; z-index: 1; transition: all 0.1s linear; opacity: 0; }
#f3pro5g .box7 .img.active{ transition-delay: 0.3s; opacity: 1; }
#f3pro5g .box7 .ul{ position: absolute; width: 38%; left: 31%; top: 54%; overflow: hidden; z-index: 2; transition: all 0.2s linear; opacity: 0; }
#f3pro5g .box7 .ul.active{ transition-delay: 0.6s; opacity: 1; }
#f3pro5g .box7 .ul li{ float: left; width: 50%; text-align: center; color: #ffffff; margin-bottom: 8%; }
#f3pro5g .box7 .b{ font-size: 1.6vw; line-height: 1.8vw; margin-top: 2%; }
#f3pro5g .box7 .s{ font-size: 1.2vw; line-height: 1.4vw; }
#f3pro5g .box7 .img1{ width: 14%; }
#f3pro5g .box8{ position: relative; overflow: hidden; }
#f3pro5g .box8 .fixed{ position: relative; width: 100%; overflow: hidden; }
#f3pro5g .box8 .box{ width: 60%; margin: 4% auto 1%; text-align: center; }
#f3pro5g .box8 .imgBox{ width: 60%; margin: 0% auto 2%; overflow: hidden; }
#f3pro5g .box8 .block{ width: 45%; margin-right:10%; float: left; overflow-x: hidden; overflow-y: scroll; position: relative; 
    -ms-overflow-style: none;overflow: -moz-scrollbars-none; height: 25vw; border-radius: 20px; padding: 6% 0px; box-sizing: border-box;

}
#f3pro5g .box8 .block::-webkit-scrollbar { width: 0 !important }
#f3pro5g .box8 .bl1{
    background-color:#e5d3c3;
    background-image:-webkit-gradient(60deg,#e5d3c3,#fffcf9);
    background-image:-webkit-linear-gradient(60deg,#e5d3c3,#fffcf9);
    background-image:-moz-linear-gradient(60deg,#e5d3c3,#fffcf9);
    background-image: -ms-linear-gradient(60deg, #e5d3c3 0%, #fffcf9 100%);
    background-image: -o-linear-gradient(60deg,#e5d3c3,#fffcf9);
    background-image: linear-gradient(60deg,#e5d3c3,#fffcf9);
}
#f3pro5g .box8 .bl2{
    background-color:#333333;
    background-image:-webkit-gradient(60deg,#333333,#adadad);
    background-image:-webkit-linear-gradient(60deg,#333333,#adadad);
    background-image:-moz-linear-gradient(60deg,#333333,#adadad);
    background-image: -ms-linear-gradient(60deg, #333333 0%, #adadad 100%);
    background-image: -o-linear-gradient(60deg,#333333,#adadad);
    background-image: linear-gradient(60deg,#333333,#adadad);
}
#f3pro5g .box8 .bl3{
    background-color:#d9d9d9;
    background-image:-webkit-gradient(60deg,#d9d9d9,#f2f2f2);
    background-image:-webkit-linear-gradient(60deg,#d9d9d9,#f2f2f2);
    background-image:-moz-linear-gradient(60deg,#d9d9d9,#f2f2f2);
    background-image: -ms-linear-gradient(60deg, #d9d9d9 0%, #f2f2f2 100%);
    background-image: -o-linear-gradient(60deg,#d9d9d9,#f2f2f2);
    background-image: linear-gradient(60deg,#d9d9d9,#f2f2f2);
}
#f3pro5g .box8 .ml{ margin-right: 0px; }
#f3pro5g .box8 .swiper-slide { overflow: hidden; }
#f3pro5g .box8 .swiper-pagination{ position: inherit; margin: 2% auto; }
#f3pro5g .box8 .swiper-pagination-bullet{ width: 20%; height: auto; text-align: center; opacity: 1; background-color: inherit; border-radius: inherit; }
#f3pro5g .box8 .swiper-pagination-bullet:focus-visible{ outline: none; }
#f3pro5g .box8 .swiper-pagination-bullet-active{ background-color: inherit;  }
#f3pro5g .box8 .swiper-pagination-bullet .circle{ width: 3vw; height: 3vw; border-radius: 50%; padding: 5px; margin-bottom: 2%; display: inline-block;
    border: 3px solid transparent; box-sizing: border-box; 
}
#f3pro5g .box8 .swiper-pagination-bullet-active  .circle{ border: 3px solid #cccccc; }
#f3pro5g .box8 .swiper-pagination-bullet .text{ font-size: 1.2vw; line-height: 1.4vw; }
#f3pro5g .box8 .img4{ width: 10%; margin-left: 45%; }
#f3pro5g .box8 .img5{ width: 60%; margin-left: 20%; }
#f3pro5g .box9{ background-color: #F0FBFF; position: relative; overflow: hidden; }
#f3pro5g .box9 .box{ width: 60%; position: absolute; left: 20%; top: 10%; text-align: center; z-index: 3; }
#f3pro5g .box9 .fixed{ position: relative; width: 100%; overflow: hidden; }
#f3pro5g .box9 .imgTextBox{ overflow: hidden; padding: 8% 0px; width: 280vw; transform: translateX(7%); position: relative; z-index: 2; }
#f3pro5g .box9 .li{ float: left; width: 76vw; position: relative; padding:0px 5vw; }
#f3pro5g .box9 .img{ width: 50vw; }
#f3pro5g .box9 .text{ width: 20vw; position: absolute; left: 66%; top: 26%; text-align: right; }
#f3pro5g .box9 .b{ font-size: 3vw; line-height: 3.4vw; }
#f3pro5g .box9 .s{ font-size: 1.4vw; line-height: 1.6vw; margin-top: 2%; }
#f3pro5g .box9 .img2{ width: 24%; position: absolute; left: 38%; top: 38%; z-index: 1; }
#f3pro5g .box9 .img22{ z-index: 4; width: 34%; top: 30%; left: 33%;transition: all 0.1s linear;}
#f3pro5g .box9 .img22.active{ opacity: 0 !important; }
#f3pro5g .box9 .t{ position: absolute; width: 0vw; left: 14%; top: 40%; z-index: 1; padding:2% 0px; overflow: hidden; z-index: 5; }
#f3pro5g .box9 .widthBox{ width: 34vw; position: relative; } 
#f3pro5g .box9 .bb{ font-size: 2vw; line-height: 2.2vw; }
#f3pro5g .box9 .ss{ font-size: 1.4vw; line-height: 1.8vw; }
#f3pro5g .box9 .lines{ position: absolute; width: 17vw; left: 22%; top: 52%; border-bottom: 3px dashed #000000; box-sizing: border-box; }
#f3pro5g .box9 .circle{ width: 9vw; height: 9vw; border-radius: 50%; border: 3px dashed #000000; position: absolute; left: 71.6%; top: -23%;box-sizing: border-box; }
#f3pro5g .box9 .t1{ right: 50%; left: auto; width: 37vw; }
#f3pro5g .box9 .t1 .widthBox{ float: right; width: 36vw; }
#f3pro5g .box9 .t2{ top: 56%; width: 0vw; left: auto; right: 45.8%; }
#f3pro5g .box9 .t2 .widthBox{ width: 40vw; float: right; }
#f3pro5g .box9 .t2 .lines{ width: 26vw; left: 16%; }
#f3pro5g .box9 .t2 .circle{ width: 5.5vw; height: 5.5vw; left: 82.5%; top: 5%; }
#f3pro5g .box9 .t3{ overflow: hidden; text-align: right; left: 50%; padding: 3% 0px; }
#f3pro5g .box9 .t3 .circle{ left: 3.6%; top: -55%; }
#f3pro5g .box9 .t3 .lines{ width:15vw; left: 33%; top: 52%; }
#f3pro5g .box9 .t4{ top: 58%; left: 50%; text-align: right; }
#f3pro5g .box9 .t4 .lines{ width:15vw; left: 27%; top: 52%; }
#f3pro5g .box9 .t4 .circle{ width: 5.5vw; height: 5.5vw; left: 8.8%; top: -14%; }
#f3pro5g .box9 .imgTitle{ transform: scale(0.5) translate(-42%, 12%); position: relative; z-index: 2; overflow: hidden; border-radius: 22%; opacity: 0;transition: all 0.1s linear; }
#f3pro5g .box9 .textTitle{ opacity: 0; transition: all 0.1s linear; }
#f3pro5g .box10{ position: relative; overflow: hidden;background-color: #F0FBFF; }
#f3pro5g .box10 .box{ width: 60%; margin: 2% auto; text-align: center; }
#f3pro5g .box10 .video{ width: 50%; margin: 2% auto 2% 25%; }
#f3pro5g .box11{ position: relative; overflow: hidden;background-color: #F0FBFF; }
#f3pro5g .box11 .box{ width: 60%; margin: 2% auto; text-align: center; }
#f3pro5g .box11 .img{ width: 60%; margin: 2% auto 2% 20%; }
#f3pro5g .box12{ position: relative; overflow: hidden;background-color: #F0FBFF; padding-bottom: 6%; }
#f3pro5g .box12 .box{ width: 60%; margin: 2% auto; text-align: center; }
#f3pro5g .box12 .imgBox{ width: 60%; margin: 2% auto; position: relative; }
#f3pro5g .box12 .img{ width: 98%; top: 0%; left: 0%; position: absolute; }
#f3pro5g .box12 .img2{  transform: translate(-9%,11%); max-width: inherit; max-width: inherit; width: 20vw; transition: all 0.3s linear; }
#f3pro5g .box12 .img2.active{  transform: translate(-9%,11%);  }
#f3pro5g .box12 .img1{ width: 20vw; transform: translate(0%,11%); position: absolute; top: 0%; right: -100%; }
#f3pro5g .box12 .fixed{ position: relative; width: 100%; padding: 2% 0px; }
#f3pro5g .box12 .imgAll{ overflow: hidden; margin-left: 35%; width: 20vw; position: relative;  }
#f3pro5g .box12 .img3{ opacity: 1;  position: relative; z-index: 1; transition: all 0.3s linear; }
#f3pro5g .box12 .img3.active{ opacity: 0; }
#f3pro5g .box12 .blackBox{ position: absolute; border: 1px solid #ffffff; box-sizing: border-box; z-index: 2; }
#f3pro5g .box12 .black1{ width: 100%; top: 0%; left: 0%; height: 40%; }
#f3pro5g .box12 .black2{ width: 44%; top: 0%; right: 0%; height: 100%; }
#f3pro5g .box12 .black3{ width: 100%; bottom: 0%; left: 0%; height: 40%; }
#f3pro5g .box12 .black4{ width: 44%; height: 100%; left: 0%; top: 0%; }

#f3pro5g .box13{ position: relative; overflow: hidden; background-color: #000000; }
#f3pro5g .box13 .fixed{ position: relative; width: 100%; }
#f3pro5g .box13 .canvas{ width: 200px; height: 200px;position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transition: all 0.1s linear; }
#f3pro5g .box13 .imgBox{ position: absolute;  overflow: hidden; left: 0%; top: 0%; width: 100%; height: 100%; }
#f3pro5g .box13 .pi{ position: absolute; width: 30%; left: 100%; top: 38%; height: 16vw; padding-top: 4vw; }
#f3pro5g .box13 .imgb{ position: absolute; width: 40%; left: 30%; top: -10%; }
#f3pro5g .box13 .imgb img{ width: 80%;margin-left: 10%; }
#f3pro5g .box13 .img{ width: 123vw; max-width: inherit; transform: translate(-12%,2%); max-width: inherit; }
#f3pro5g .box13 .img.active{ transform: translate(11%,11%); }
#f3pro5g .box13 .ll{ position: absolute; top: 0%; left: 0%; background-color: #787878; height: 2px;width: 100%; 
    outline: none;border: none; -webkit-animation: toDown 2s linear infinite;animation: toDown 2s linear infinite; 
}
@-webkit-keyframes toDown{
    0%{top: 0%;}
    50%{top: 100%;}
    100%{top: 0%;}
}
@keyframes toDown{
    0%{top: 0%;}
    50%{top: 100%;}
    100%{top: 0%;}
}
#f3pro5g .box13 .box{ color: #ffffff; width: 60%; position: absolute; left: 20%; top: 20%; opacity: 0; text-align: center; z-index: 3; }
#f3pro5g .box13 .imgBoxll{ position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; overflow: hidden; }
#f3pro5g .box13 .imgl1{ position: absolute; width: 14%; left: 41%; top: 40%; transform: scale(0); z-index: 1; }
#f3pro5g .box13 .imgl2{ position: absolute; width: 7%; left: 48%; top: 52%; transform: scale(0); z-index: 1; }
#f3pro5g .box13 .blackBox{ position: absolute; background-color: #000000; box-sizing: border-box; }
#f3pro5g .box13 .black1{ width: 100%; top: 0%; left: 0%; height: 40%; }
#f3pro5g .box13 .black2{ width: 44%; top: 0%; right: 0%; height: 100%; }
#f3pro5g .box13 .black3{ width: 100%; bottom: 0%; left: 0%; height: 40%; }
#f3pro5g .box13 .black4{ width: 44%; height: 100%; left: 0%; top: 0%; }

#f3pro5g .box14{ position: relative; overflow: hidden; }
#f3pro5g .box14 .box{ width: 60%; margin: 4% auto 0%; text-align: center; }
#f3pro5g .box14 .tips{ font-size: 0.8vw; line-height: 1vw; text-align: center; width: 60%; position: absolute; left: 20%; top: 95%;z-index: 2; }
#f3pro5g .box14 .imgBox{ position: relative; overflow: initial; padding: 4% 0px 14%; }
#f3pro5g .box14 .img{ width: 8%; margin-left: 43%; position: relative; z-index: 1; }
#f3pro5g .box14 .img1{ position: absolute; width: 8%; top: 0%; left: 52%; z-index: 1; }
#f3pro5g .box14 .imgs{ position: absolute; transition: all 0.5s linear; }
#f3pro5g .box14 .imgs1{ width: 24%; left: 1%; top: -23%; }
#f3pro5g .box14 .imgs1.active{ left: 23%; top: 6%; }
#f3pro5g .box14 .imgs2{ width: 22%; left: 77%; top: -27%; }
#f3pro5g .box14 .imgs2.active{ left: 59%; top: 5%; }
#f3pro5g .box14 .imgs3{ width: 24%; left: 7%; top: 15%; }
#f3pro5g .box14 .imgs3.active{ left: 20%; top: 38%; }
#f3pro5g .box14 .imgs4{ width: 24%; left: 70%; top: 17%; }
#f3pro5g .box14 .imgs4.active{ left: 57%; top: 37%; }
#f3pro5g .box14 .fixed{ position: relative; width: 100%; }
#f3pro5g .box15{ position: relative; overflow: hidden; background-color: #000000; }
#f3pro5g .box15 .box{ width: 60%; margin: 4% auto 2%; text-align: center; color: #ffffff; }
#f3pro5g .box15 .ul{ width: 60%; overflow: hidden; margin: 4% auto; }
#f3pro5g .box15 .ul li{ float: left; width: 50%; color: #ffffff; position: relative; padding:4% 0px; box-sizing: border-box; height: 13vw; }
#f3pro5g .box15 .ul li:nth-child(1){ border-right: 1px solid #e2e6ea; border-bottom: 1px solid #e2e6ea; }
#f3pro5g .box15 .ul li:nth-child(2){ border-bottom: 1px solid #e2e6ea; padding-left: 6%; }
#f3pro5g .box15 .ul li:nth-child(3){ border-right: 1px solid #e2e6ea; }
#f3pro5g .box15 .ul li:nth-child(4){ padding-left: 6%; }
#f3pro5g .box15 .b{ font-size: 1.6vw; line-height: 1.8vw; margin-bottom: 2%; }
#f3pro5g .box15 .s{ font-size: 1.2vw; line-height: 1.4vw; }
#f3pro5g .box15 .img{ position: absolute; width: 26%; left: 65%; top: 20%; }
#f3pro5g .box16{ position: relative; overflow: hidden; }
#f3pro5g .box16 .link{ width: 27%; position: absolute; left: 13%; top: 45%; font-size: 3.4vw; line-height: 3.6vw; color: #ffffff; }