@import url("core.css");
@import url("../font-awesome/css/font-awesome.min.css");
@import url("common.css");

/*common*/
*{line-height: 1.6;}
.w1200{width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 30px;}
.clear{clear: both;}
body{background-color: #fff;}
.to-big .img{overflow: hidden;}
.to-big .img img{transform: scale(1.0);transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;}
.to-big:hover .img img{transform: scale(1.1);}
.backshow{background-repeat: no-repeat;background-position: center;background-size: cover;}
.bounceOut1{visibility: visible;animation-duration: 1.5s;animation-delay: 0.1s;animation-name: bounceOut1;}

@media(max-width:1100px){
    .w1200{padding:0 20px;}
}

@keyframes bounceOut1{
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1);
        transform: scale3d(.1, .1, .1);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    
}
/**/
.module p{font-weight: 300;font-size: 16px;line-height: 25px;}
.module h2{font-size: 40px;}
.module h2 font{font-weight: 300;}
.module h3{font-size: 24px;}

/*banner*/
#banner{position: relative;}
 .banner-content{position: relative;}
 .banner-content .img{overflow: hidden;display: flex;justify-content: center;width: 100%;}
 .banner-content .img img{display: block;width: 100%;}
 .banner-content .con{position: absolute;left: 0;right: 0;text-align: center;top: 50%;transform: translateY(-50%);padding:0 5px}
 .banner-content .con.top{/* transform: unset; */top: 20%;}
 .banner-content .con.top2{transform: unset;top: 10%;}
 .banner-content .con *{color: #fff;}
 .banner-content .con p{font-weight: 300;font-size: 16px;}
 .banner-content .con h2{font-size: 40px;}
 .banner-content .con h2 font{font-weight: 300;}
 .banner-content .con h3{font-size: 24px;}
 .banner-content .con img{height: 210px;}
.m20{margin-bottom: 20px;}
 .banner-content .con a{display: block;width: 150px;border-radius: 35px;line-height: 35px;text-align: center;border:1px solid #fff;margin:40px auto 75px;}
 .banner-content .con a:hover{background-color: #EC6125 !important;border-color: #EC6125 !important;color: #fff !important;}
 .banner-content .con a:hover i{color: #fff !important;}
 
 .banner-content.black *{color: #000 !important;}
 .banner-content.black .con a{border-color: #000;}
 .banner-content.white *{color: #fff !important;}
 .banner-content.white .con a{border-color: #fff;} 
#banner .swiper-pagination{bottom:50px}
#banner .swiper-pagination-bullet{background-color: rgba(255,255,255,0.5);border-radius: unset;width: 20px;height: 3px;}
#banner .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #fff;}


@media(max-width:1680px){
    .banner-content .con h2{font-size: 40px;}
    .banner-content .con h3{font-size: 20px;} 
    .banner-content .con a{margin:30px auto 55px;}
    .banner-content .con img{height: 180px;}

}

@media(max-width:1440px){
    .banner-content .con h2{font-size: 36px;}
    .banner-content .con h3{font-size: 18px;} 
    .banner-content .con a{margin:25px auto 45px;}
    .banner-content .con img{height: 165px;}
}
@media(max-width:1200px){
    .banner-content .con h2{font-size: 32px;}
    .banner-content .con h3{font-size: 16px;} 
    .banner-content .con a{margin:20px auto 35px;line-height: 30px;height: 30px;font-size: 13px;}
    .banner-content .con img{height: 155px;}
}


@media(max-width:1024px){
    .banner-content .con p{font-size: 13px;}
    .banner-content .con h2{font-size: 24px;}
    .banner-content .con h3{font-size: 14px;} 
    .banner-content .con a{margin:15px auto 15px;line-height: 30px;height: 30px;font-size: 12px;width: 110px;}
    .banner-content .con img{height: 135px;}

    .banner-content .con.top{top:29%}
}

@media(max-width:768px){
    .m20{margin-bottom: 10px;}
    #banner .banner-content .img img{min-width: 768px}
    .banner-content .con p{display: none;}
    .banner-content .con h2{font-size: 17px;}
    .banner-content .con h3{font-size: 12px;}
    .banner-content .con img{height: 80px;}
    #banner .swiper-button-next::after{font-size: 13px;}
    #banner .swiper-button-prev::after{font-size: 13px;}
    * {
        line-height: 1.4;
    }
}





/*#solution*/
#solution {position: relative;margin:15px 0;}
#solution .banner-content{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 33;}
#solution .swiper-big .swiper-slide{position: relative;}
#solution .swiper-big .swiper-slide img{width:100%;height:auto;min-height:100%;transition:1s linear 2s;transform:scale(1.1,1.1);}
#solution .swiper-big .swiper-slide.swiper-slide-active img,#solution .swiper-big .swiper-slide.swiper-slide-duplicate-active img{transition:6s linear;transform:scale(1,1);}


/*#product*/
#product{padding: 0px 1% 1%;overflow: hidden;}
#product .pro-list{float: left;width: 49.5%;margin-right: 1%;margin-bottom: 1%;border-radius: 10px;position: relative;overflow: hidden;}
#product .pro-list:nth-child(2n){margin-right: 0;}

#product .pro-list .banner-content *{color: #000;border-color: #000;}

#product .pro-list .banner-content .con p{font-weight: normal;color: #888;}
#product .pro-list .banner-content .con img{max-height: 255px;}

@media(max-width:1100px){

}

@media(max-width:768px){
    #product .pro-list{width: 100%;margin-right: 0;}
}


/*#exi*/
#exi{position: relative;}
#exi .swiper-container{padding:0 345px}
#exi .swiper-button-prev{left: 365px;}
#exi .swiper-button-next{right:365px;}
#exi .swiper-slide{position: relative;}
#exi .swiper-slide::after{content:"";position: absolute;z-index: 2;left:0;top:0;width:100%;height:100%;display: block;background-color: rgba(0,0,0,0.5);opacity: 0;transition: opacity 0.5s ease-in;}
#exi .swiper-slide.swiper-slide-active::after{opacity: 1;}
#exi .swiper-slide .banner-content .con{z-index: 3;}

#exi .swiper-pagination{bottom:50px;width: 100%;}
#exi .swiper-pagination-bullet{background-color: rgba(255,255,255,0.5);border-radius: unset;width: 20px;height: 3px;margin: 0 5px;}
#exi .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #fff;}

@media(max-width:1100px){
    #exi .swiper-container{padding: 0;}
    #exi .swiper-button-prev{left: 0;}
    #exi .swiper-button-next{right: 0;}
    #exi .swiper-button-next::after{font-size: 13px;}
    #exi .swiper-button-prev::after{font-size: 13px;}

    #exi .swiper-pagination{bottom:15px;}
}



/*#about*/
#about{padding:75px 0}
#about>h2{font-size: 40px;text-align: center;}
#about>h2 font{font-weight: 300;}
#about>p{font-weight: 100;font-size: 16px;margin:25px auto 60px;text-align: center;font-weight: 300;}

#about .flex-box{display: flex;gap:10px}
#about .flex-box .flex{flex:1;position: relative;}
#about .flex-box .flex::after{content:"";position: absolute;z-index: 2;left:0;top:0;width:100%;height:100%;display: block;background-color: rgba(0,0,0,0.5);}
#about .flex-box .flex .con{z-index: 3;}

@media(max-width:1680px){
    #about>h2{font-size: 40px;}
    .module h2{font-size: 40px;}
    .module h3{font-size: 22px;}
}
@media(max-width:1440px){
    #about>h2{font-size: 36px;}
    #about>p{font-size: 13px;}
    .module h2{font-size: 36px;}
    .module h3{font-size: 20px;}
}
@media(max-width:1280px){
    #about>h2{font-size: 32px;}
    .module h2{font-size: 32px;}
    .module h3{font-size: 19px;}
}

@media(max-width:1100px){
    #about{padding:30px 0}
    #about>p{margin:20px auto;}
}

@media(max-width:1024px){
    #about>h2{font-size: 24px;}
    .module h2{font-size: 24px;}
    .module h3{font-size: 17px;}
    .module p{font-size: 14px;}
}

@media(max-width:768px){
    #about>h2{font-size: 20px;}
    .module h2{font-size: 20px;}
    .module h3{font-size: 15px;}
    .module p{font-size: 13px;}
}