/* load */
#loading{position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;background-color: #fff;z-index: 999999;}
#loading img{position: absolute;width: 20%;max-width: 55px;left: 50%;top: 50%;transform: translate(-50%,-50%);animation: load_img 5s linear infinite;}
@keyframes load_img {
    0%{
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%,-50%) rotate(360deg);
    }
}
/* banner */
.banner{width: 100%;height: calc(100vh - 100px);position: relative;margin-top: 100px;}
.img-swiper img{transition: all 10s;animation: fade 15s linear infinite;}
.txt-swiper{z-index: 0!important;}
/* .txt-swiper .swiper-button-next{bottom: 5%;top: auto;right: calc(5% + 150px)!important;transform: rotate(-90deg);}
.txt-swiper .swiper-button-prev{bottom: 5%;top: auto;right: calc(5% + 210px)!important;transform: rotate(-90deg);}
.txt-swiper .swiper-slide{position: relative;}
.txt-swiper .swiper-slide .ib-bg{position: relative;width: 100%;max-width: 1400px;margin: 0 auto;height: 100%;}
.txt-swiper .swiper-slide img{width: 90%;position: absolute;}
.txt-swiper .swiper-slide img.ib-1{max-width: 480px;top: 20%;left: 50%;transform: translateX(-50%);}
.txt-swiper .swiper-slide img.ib-2{max-width: 630px;top: 32%;right: 2%;}
.txt-swiper .swiper-slide img.ib-3{max-width: 600px;top: 25%;left: 2%;} */
.img-swiper .swiper-slide img.m-img{display: none;}

.ban-procate{position: absolute;left: 50%;transform: translateX(-50%);bottom: 20%;width: 90%;text-align: center;}
.ban-procate a{display: inline-block;width: 29%;margin-right: 5%;max-width: 275px;background-color: rgba(0, 0, 0, 0.7);color: #fff;line-height: 70px;border-radius: 50px;font-size: 28px;}
.ban-procate a:last-child{margin-right: 0;}

@keyframes fade {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }
}
/* #pp-nav */
#pp-nav{top: 50%;transform: translateY(-50%);margin-top: 0!important;z-index: 9;}
#pp-nav.right{right: 4.5%;}
#pp-nav li{margin: 0 7px 30px;width: 10px;height: 10px;}
#pp-nav ul li:last-child{margin-bottom: 0;}
#pp-nav::before{content: '';width: 2px;height: 100%;position: absolute;left: calc(50% - 1px);top: 0;background-color: #fff;}
#pp-nav ul li a{position: absolute;}
#pp-nav ul li a span{width: 10px;height: 10px;border: 2px solid #fff!important;background-color: #1c3b9a;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);transition: all 0.3s;}
#pp-nav ul li a span::after{width: 0;height: 0;content: '';background-color: #f1b64e;border: 2px solid #fff;display: block;border-radius: 4px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
#pp-nav ul li .active span{width: 20px;background: none;height: 36px;border-radius: 10px;}
#pp-nav ul li .active span::after{width: 8px;height: 12px;}




/* 关于我们 */
#section2 .about{}
#section2 .about .a-l{height: 100vh;background-color: #fff;position: relative;}
#section2 .about .a-l .info{width: 90%;max-width: 700px;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
#section2 .about .a-l .info .tit h2{padding-bottom: 3%;margin-bottom: 3%;position: relative;}
#section2 .about .a-l .info .tit h2::after{content: '';display: inline-block;width: 100%;height: 2px;position: absolute;bottom: 0;left: 0;background-image: linear-gradient(to right, rgba(15, 76, 150, 1), rgba(41, 178, 229, 1));}
#section2 .about .a-l .info .content{max-width: 560px;width: 100%;font-size: 18px;line-height: 32px;margin-bottom: 5%;padding-right: 15px;}
#section2 .about .a-l .info .adv{max-width: 560px;width: 100%;}
#section2 .about .a-l .info .adv .li{width: 50%;float: left;margin-bottom: 2%;}
#section2 .about .a-l .info .adv .li h3{font-size: 32px;color: rgba(1, 77, 160, 1);font-weight: bold;position: relative;display: inline-block;line-height: 38px;margin-bottom: 10px;}
#section2 .about .a-l .info .adv .li h3 b{display: inline-block;position: absolute;font-size: 20px;left: 100%;top: 0;}
#section2 .about .a-l .info .adv .li p{font-size: 18px;font-weight: bold;line-height: 28px;height: 56px;}
#section2 .about .a-l .info a{display: inline-block;line-height: 58px;border: 1px solid rgba(1, 77, 160, 1);border-radius: 30px;padding: 0 50px;color: rgba(1, 77, 160, 1);font-size: 18px;margin-top: 3%;}
#section2 .about .a-l .info a.play{margin-right: 7%;color: #fff;background-color: rgba(1, 77, 160, 1);}



#section2 .about .a-r{height: 100vh;padding: 0;position: relative;}
#section2 .about .a-r .video{height: 100%;}
#section2 .about .a-r .video video{width: 100%;height: 100%;background-size: cover;background-position: center;object-fit: cover;}
#section2 .about .a-r .floor{position: absolute;width: 70%;max-width: 440px;left: -15%;bottom: 0;}




/* 产品 */
/* #section3 .product{position: relative;top: 50%;left: 50%;transform: translate(-50%,calc(-50% + 25px));max-width: 1400px;}
#section3 .product .tit{text-align: center;}
#section3 .product #proSwiper{}
#section3 .product #proSwiper .info{height: 64vh;background-color: #fff;position: relative;padding: 50px;overflow: hidden;cursor: pointer;}
#section3 .product #proSwiper .info h3{font-size: 28px;line-height: 37px;margin-bottom: 50px;}
#section3 .product #proSwiper .info span{display: inline-block;width: 46px;height: 46px;text-align: center;background-color: rgba(1, 77, 160, 1);color: #fff;border-radius: 50%;margin-bottom: 50px;line-height: 46px;line-height: 47px;font-family: cursive;font-size: 30px;}
#section3 .product #proSwiper .info a img{position: absolute;bottom: 0;height: 60%;right: -12%;transition: all 0.3s;z-index: 2;}
#section3 .product #proSwiper .info>img{position: absolute;left: 0;bottom: 0;max-width: 100%;filter: grayscale(1);transition: all 0.3s;z-index: 1;}
#section3 .product #proSwiper .info:hover a img{height: 70%;}
#section3 .product #proSwiper .info:hover>img{filter: grayscale(0);} */

#section3 .product{width: 100%;;display: flex;height: 100vh;flex-wrap: wrap;padding-top: 80px;}
#section3 .product .li{width: 50%;display: flex;justify-content: center;align-items: center;background-size: cover;background-position: center;position: relative;flex-wrap: wrap;}
#section3 .product .li::before{content: '';display: inline-block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 100%);transition: all 0.3s;}
#section3 .product .li.active::before{background: linear-gradient(to top, rgba(5, 73, 148, 1), rgba(5, 73, 148, 0) 70%);}
#section3 .product .li a{color: #fff;position: relative;}
#section3 .product .li a h3{font-weight: bold;font-size: 28px;text-transform: uppercase;padding-bottom: 25px;}
#section3 .product .li a i{text-align: center;font-size: 110px;line-height: 110px;position: relative;overflow: hidden;transition: all 0.3s;}
#section3 .product .li a i span{display: inline-block;position: absolute;width: 70px;height: 70px;color: #1c3b9a;text-align: center;font-size: 40px;top: 100%;left: 50%;transform: translateX(-50%);transition: all 0.3s;opacity: 0;display: flex;align-items: center;font-weight: normal;justify-content: center;}
/* #section3 .product .li a i span:before,#section2 .product .li a i span:after {content: "";position: absolute;display: inline-block;width: 100%;height: 100%;left: 50%;top: 50%;transform: translate(-50%,-50%);background-image: url(../images/more-bg.png);background-size: contain;z-index: -1;filter: grayscale(1) brightness(6);} */
/* #section3 .product .li a i span:after{transform: translate(-50%,-50%) scale(1.5);opacity: 0.3;} */
#section3 .product .li a i span:before{content: "";position: absolute;display: inline-block;width: 100%;height: 100%;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: -1;filter: grayscale(1) brightness(6);border-radius: 50%;background-color: #fff;} 
#section3 .product .li:hover a i{font-size: 0px;}
#section3 .product .li:hover a i span{top: 50%;transform: translate(-50%,-50%);opacity: 1;}


/* 案例 */
#section4{background-image: url(../images/globe-bg.jpg);background-size: cover;background-position: center;}
#section4 .tit {position: absolute;left: 50%;transform: translateX(-50%);top: 7%;z-index: 2;text-align: center;}
#section4 .tit h2{padding-bottom: 5%;margin-bottom: 4%;}
#section4 .tit p{width: auto;}

/* #section4 .globe{width: 100%;height: 100vh;position: relative;transform: translateY(-50px);transition: all 2s;opacity: 0;}
#section4 .globe .bg{width: 100%;height: 100%;}
#section4 .globe canvas{width: 100%;height: 100%;} */
#section4 .globe{width: 100%;height: 100vh;transition: all 2s;opacity: 0;overflow: hidden;max-width: 1400px;overflow-x: auto;overflow-y: hidden;margin: 0 auto;}
#section4 .globe .bg{width: 1370px;height: 812px;background-image: url(../images/map.png);background-size: 100% 100%;position: relative;left: 15px;top: 50%;transform: translateY(-50%);background-position: top 16px left 8px;background-repeat: no-repeat;}
#section4 .globe .bg .g-logo{position: absolute;top: 349px;left: 515px;width: 28px;transform: translate(-50%,-50%);}

#section4 .switch{width: 50px;right: 5%;top: 50%;transform: translateY(-50%);position: absolute;z-index: 999999;}
#section4 .switch a{display: inline-block;margin: 15px 0;}
#section4 .switch .next,#section4 .switch .prev{width: 50px;height: 50px;background: none;outline: none;background-color: rgba(0,0,0,0.6);border-radius: 50%;color: #fff;cursor: pointer;}
#section4 .switch .next polyline,#section4 .switch .prev polyline{stroke: #fff;fill: none;}
#section4 .switch .ts{position: absolute;color: #333;font-size: 12px;display: inline-block;width: 14px;text-align: center;line-height: 18px;top: 100%;left: 50%;transform: translateX(-50%);animation: trY4 3s linear infinite;}

#section4 .ul .li{transition: all 0.3s;cursor: pointer;}
#section4 .ul .li:hover{transform: translateY(-5px) scale(1.1);}


@keyframes trY4 {
    0%{
        transform: translate(-50%,0);
    }
    50%{
        transform: translate(-50%,10px);
    }
    100%{
        transform: translate(-50%,0);
    }
}

#section4 .m-globe{display: none;width: 100%;height: 100vh;position: relative;overflow-x: auto;overflow-y: hidden;background-image: url(../images/cavans-bg.jpg);background-size: cover;background-position: center bottom;}
#section4 .m-globe img{height: 100%;padding-left: 10px;}
@media screen and (min-width: 0px) and (max-width:1024px){
    #section4 .globe{display: none;}
    #section4 .m-globe{display: block;}
}


/* 新闻 */
#section5 .news-a{height: 100vh;}
#section5 .news{width: 100%;max-width: 1400px;position: relative;left: 50%;top: 50%;transform: translate(-50%,calc(-50% + 25px));}
#section5 .news .tit{text-align: center;}
#section5 .news .li{height: 28vh;margin-bottom: 3%;}
#section5 .news .li a{color: #333;display: block;width: 100%;height: 100%;transition: all 0.3s;position: relative;background-color: #fff;}
#section5 .news .li a::before{display: inline-block;position: absolute;content: '';width: 0%;height: 100%;background-color: rgb(234, 240, 247);top: 0;right: 0;transition: all 0.5s;z-index: -1;}
#section5 .news .li:hover a{transform: translateX(-5px);box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);}
#section5 .news .li:hover a::before{width: 100%;left: 0;}

#section5 .news .li .img{width: 63%;float: left;height: 100%;}
#section5 .news .li .img img{width: 100%;height: 100%;object-fit: cover;}
#section5 .news .li .info{width: 100%;height: 100%;padding: 20px;position: relative;}
#section5 .news .li:first-child .info{width: 37%;float: left;}
#section5 .news .li .info h3{font-size: 22px;font-weight: bold;line-height: 28px;margin-bottom: 15px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#section5 .news .li .info p{font-size: 15px;line-height: 28px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
#section5 .news .li .info span{font-size: 14px;position: absolute;bottom: 20px;left: 20px;}




/* 底部 */
#section5 .in-foot{}
#section5 .in-foot .mes{position: relative;background-image: url(../images/mes_bg.jpg);background-size: auto 100%;background-position: right center;padding: 0 15px;}
#section5 .in-foot .mes::before{
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    left: -35%;
    background-color: rgba(1, 77, 160, 1);
    border-top-right-radius: 116px;
    transform: skewX(31deg);
    position: absolute;
    right: 0;
}
#section5 .in-foot .mes h2{font-size: 44px;font-weight: bold;color: #fff;padding: 4.5% 0 3.5%;}
#section5 .in-foot .mes form{display: inline-block;width: 100%;max-width: 750px;position: relative;margin-bottom: 8px;color: rgba(255, 255, 255, 0.8);}
#section5 .in-foot .mes form input,#section5 .in-foot .mes form textarea{background: rgba(0, 0, 0, 0.01);border: 1px solid rgba(255, 255, 255, 0.4);line-height: 40px;width: 100%;margin-bottom: 20px;padding: 0 10px;}
#section5 .in-foot .mes form input::placeholder,#section5 .in-foot .mes form textarea::placeholder{color: rgba(255, 255, 255, 0.6);}
#section5 .in-foot .mes form .name{width: 45%;float: left;margin-right: 10%;}
#section5 .in-foot .mes form .tel{width: 45%;float: left;}
#section5 .in-foot .mes form .content{width: 100%;}
#section5 .in-foot .mes form .v-code{width: 50%;margin-right: 5%;float: left;}
#section5 .in-foot .mes form .v-code input{width: 50%;max-width: 170px;float: left;margin-right: 5%;}
#section5 .in-foot .mes form .v-code .verify{width: 45%;float: left;height: 42px;}
#section5 .in-foot .mes form .v-code .verify img{width: 100%;height: 100%;}
#section5 .in-foot .mes form .submit{position: absolute;left: 115%;top: 50%;transform: translateY(-50%);display: inline-block;width: 170px;line-height: 60px;border-radius: 30px;background-color: #fff;font-size: 15px;color: #333;text-align: center;}


#section5 .in-foot .contact{background-color: rgba(51, 51, 51, 1);padding: 50px 15px 35px;}
#section5 .in-foot .contact .c-l{width: 30%;float: left;}
#section5 .in-foot .contact .c-l .f-logo{margin-bottom: 35px;width: 80%;max-width: 125px;filter: grayscale(1) brightness(5);}
#section5 .in-foot .contact .c-l .wx-code{font-size: 14px;color: rgba(151, 151, 151, 1);}
#section5 .in-foot .contact .c-l .wx-code p{width: 40%;float: left;max-width: 125px;text-align: center;margin-right: 10%;}
#section5 .in-foot .contact .c-l .wx-code p img{width: 100%;margin-bottom: 7px;}


#section5 .in-foot .contact .c-r{width: 70%;float: left;}
#section5 .in-foot .contact .c-r .f-link{font-size: 14px;color: rgba(255, 255, 255, 0.5);padding: 10px 0;}
#section5 .in-foot .contact .c-r .f-link a{display: inline-block;padding-right: 15px;color: rgba(255, 255, 255, 0.5);}
#section5 .in-foot .contact .c-r .f-link a:first-child{padding: 0;}
#section5 .in-foot .contact .c-r .f-nav{width: 100%;padding: 20px 0;border-top: 1px solid rgba(216, 216, 216, 0.09);}
#section5 .in-foot .contact .c-r .f-nav a{display: block;float: left;width: 16.666666%;text-align-last: left;color: #fff;font-size: 15px;transition: all 0.3s;}
#section5 .in-foot .contact .c-r .f-nav a:hover{transform: translateY(-3px);}
#section5 .in-foot .contact .c-r .c-info{width: 100%;max-width: 600px;margin-top: 20px;}
#section5 .in-foot .contact .c-r p{color: rgba(255, 255, 255, 0.5);font-size: 14px;width: 40%;display: block;float: left;height: 40px;line-height: 20px;margin-right: 10%;margin-bottom: 10px;}
#section5 .in-foot .contact .c-r .copyright{width: 100%;padding-top: 30px;border-top: 1px solid rgba(216, 216, 216, 0.09);color: rgba(255, 255, 255, 0.5);}





@media screen and (min-width: 0px) and (max-width:1400px){

}

@media screen and (min-width: 0px) and (max-width:1200px){
    .ban-procate a{font-size: 24px;line-height: 60px;}

    #section2 .about .a-l .info .content{font-size: 16px;}

    #section3 .product .li a h3{font-size: 24px;}
    #section3 .product .li a i{font-size: 80px;line-height: 80px;}

    #section5 .in-foot .mes h2{font-size: 34px;}
    #section5 .in-foot .mes::before{left: -18%;}
}
@media screen and (min-width: 0px) and (max-width:1024px){
    #section3 .product{padding-top: 80px;}
    #section3 .product .li{width: 50%;}

}
@media screen and (min-width: 0px) and (max-width:992px){
    #section2 .about .a-l{position: absolute;z-index: 2;left: 0;background-color: rgba(255, 255, 255, 0.8);}
    #section2 .about .a-l .info{right: 50%;transform: translate(50%,-50%);}


    #section4 .tit{width: 90%;}
    #section4 .tit h2{padding-bottom: 4%;margin-bottom: 4%;}

    #section5 .news .li{height: 20vh;}
    #section5 .news .li .img{width: 57%;}
    #section5 .news .ul .li:first-child .info{width: 43%;}
    #section5 .news .ul .li .info p{-webkit-line-clamp: 2;font-size: 14px;}
    #section5 .news .ul .li .info h3{font-size: 19px;}

    #section5 .in-foot .mes form .submit{position: relative;left: 0;top: 0;line-height: 45px;transform: translateY(0);}
}

@media screen and (min-width: 0px) and (max-width:768px){
    .ban-procate a{font-size: 17px;line-height: 45px;}
    #pp-nav.right{right: 10px;}
    #section2 .about .a-l .info .tit h2{font-size: 28px;}
    #section2 .about .a-l .info .adv .li p{font-size: 17px;}
    #section2 .about .a-l .info .adv .li h3{font-size: 26px;}
    #section2 .about .a-l .info a{line-height: 45px;font-size: 16px;}

    /* #section3 .product #proSwiper .info h3{font-size: 22px;} */
    #section3 .product{padding-top: 70px;}

    #section4 .switch{width: 40px;right: 5%;top: 70%;}
    #section4 .switch .next, #section4 .switch .prev{width: 40px;height: 40px;}
    #section4 .switch a{margin: 10px 0;}

    #section5 .news .li:last-child,#section5 .news .li:nth-last-child(2){display: none;}
    #section5 .in-foot .mes h2{font-size: 28px;}
    #section5 .in-foot .contact .c-r p{height: 60px;}
    
}
@media screen and (min-width: 0px) and (max-width:640px){
    #section5 .in-foot .contact .c-l{width: 100%;}
    #section5 .in-foot .contact .c-r{width: 100%;}
}
@media screen and (min-width: 0px) and (max-width:530px){

}
@media screen and (min-width: 0px) and (max-width:460px){

}
@media screen and (min-width: 0px) and (max-width:440px){
    .ban-procate a{font-size: 15px;line-height: 40px;}
    #section2 .about .a-l .info{transform: translate(50%,calc(-50% + 25px));}
    #section2 .about .a-l .info .content{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;font-size: 15px;}
    #section2 .about .a-l .info .tit h2{font-size: 24px;}
    #section2 .about .a-l .info a{font-size: 15px;}
    #section2 .about .a-l .info a.play{margin-right: 0;}
    #section2 .about .a-l .info .adv .li p{font-size: 15px;font-weight: normal;}
    #section2 .about .a-l .info .adv .li h3{margin-bottom: 0;font-size: 23px;}

    #section3 .product{padding-top: 60px;}
    #section3 .product .li a h3{font-size: 20px;}
    #section3 .product .li a i{font-size: 60px;line-height: 60px;}

    #section4 .switch{width: 30px;right: 3.5%;top: 80%;}
    #section4 .switch .next, #section4 .switch .prev{width: 30px;height: 30px;}
    #section4 .switch a{margin: 5px 0;}

    #section5 .news{transform: translate(-50%,calc(-50% + 35px));}
    #section5 .news .li{height: 25vh;}
    #section5 .news .ul .li .info{padding: 15px 20px;}
    #section5 .news .li .img{width: 45%;}
    #section5 .news .ul .li:first-child .info{width: 55%;}
    #section5 .news .ul .li .info h3{font-size: 17px;}

    #section5 .in-foot .mes::before{left: 0;border-top-right-radius: 0;transform: skewX(0);}
    #section5 .in-foot .mes form{margin-bottom: 0;}
    #section5 .in-foot .mes h2{font-size: 20px;}
    #section5 .in-foot .mes form .submit{font-size: 14px;width: 130px;}

    #section5 .in-foot .contact{padding: 25px 15px 15px;}
    #section5 .in-foot .contact .c-r .f-nav a{width: 25%;font-size: 14px;}
    #section5 .in-foot .contact .c-r .c-info{margin-top: 0;}
    #section5 .in-foot .contact .c-r p{width: 100%;margin-right: 0;height: auto;}
    #section5 .in-foot .contact .c-r .copyright{padding-top: 15px;}
}
@media screen and (min-width: 0px) and (max-width:375px){

}
@media screen and (min-width: 0px) and (max-width:320px){

}




@keyframes fade {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }
}