/* banner */
.banner{position: relative;height: 100vh;}
.banner .img-swiper img{transition: all 10s;animation: fade 15s ease infinite;}
.banner .prev-next{position: absolute;bottom: 20px;width: 245px;left: 5%;}
.banner .txt-swiper .swiper-button-next{transform: rotate(-0deg);}
.banner .txt-swiper .swiper-button-prev{transform: rotate(-0deg);}
.banner .txt-swiper .swiper-slide{position: relative;}
.banner .txt-swiper .swiper-slide .ib-bg{position: relative;width: 100%;max-width: 1600px;margin: 0 auto;height: 100%;padding: 0 15px;}
.banner .txt-swiper .swiper-slide .ib-bg .info{position: absolute;color: #fff;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 100%;max-width: calc(100% - 0px);text-align: center;}
.banner .txt-swiper .swiper-slide:nth-child(1) .ib-bg .info{}
.banner .txt-swiper .swiper-slide:nth-child(2) .ib-bg .info{}
.banner .txt-swiper .swiper-slide:nth-child(3) .ib-bg .info{text-align: right;}
.banner .txt-swiper .swiper-slide:nth-child(4) .ib-bg .info{}
.banner .txt-swiper .swiper-slide .ib-bg .info img{width: auto;max-width: calc(100%);}
.banner .txt-swiper .swiper-slide .ib-bg .info h3{font-size: 34px;font-weight: bold;margin-bottom: 10px;letter-spacing: 2px;}
.banner .txt-swiper .swiper-slide .ib-bg .info h4{font-size: 28px;display: inline-block;max-width: 500px;line-height: 35px;}
.banner .txt-swiper .swiper-pagination{right: calc(5%);}


.banner .prev-next .swiper-button-prev,.banner .prev-next .swiper-button-next{border-radius: 50%;top: auto;bottom: 15px;width: 50px;height: 50px;}
.banner .prev-next .swiper-button-prev::after,.banner .prev-next .swiper-button-next::after{content: "→";display: inline-block;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%) scaleY(2);color: #fff;font-family: math;font-weight: 600;font-size: 16px!important;}
.banner .prev-next .swiper-button-prev::after{transform: translate(-50%,-50%) scaleY(2) rotate(180deg);}
.banner .prev-next .swiper-button-prev{left: 0;background-color: rgba(255,255,255,0.2);}
.banner .prev-next .swiper-button-next{right: 0;background-color: rgba(255,255,255,0.2);}
.banner .prev-next .swiper-button-next:after,.banner .prev-next .swiper-button-prev:after{font-size: 24px;color: rgba(255, 255, 255, 0.7);}

.banner .swiper-pagination,.banner .swiper-pagination.swiper-pagination-fraction{width: auto;left: auto;right: calc(10% + 120px);font-weight: 100;font-family: 'swiper-icons';font-size: 60px;color: #fff;}
.banner .swiper-pagination,.banner .swiper-pagination.swiper-pagination-fraction span{font-size: 40px;display: inline-block;color: #fff;}
.banner .swiper-pagination,.banner .swiper-pagination.swiper-pagination-fraction span:first-child{transform: translateY(-15px);}
.banner .swiper-pagination,.banner .swiper-pagination.swiper-pagination-fraction span:last-child{transform: translateY(5px);}

.banner .img-swiper .swiper-pagination{width: 245px;left: 5%;}
.banner .img-swiper .swiper-pagination .swiper-pagination-bullet{background-color: #fff;opacity: 1;transition: all 0.3s;}
.banner .img-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{transform: scale(1.5);}

.banner .prev-next div:hover{background-color: #fff;}
.banner .txt-swiper .prev-next div:hover::after{color: rgba(17, 95, 173, 1)!important;}
@keyframes fade {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

/* num-change */
.num-change{margin-bottom: 60px;padding-top: 20px;border-top: 1px dashed #dbdbdb;}
.num-change .shuzi p:first-child{font-size: 15px;color: rgba(17, 95, 173, 1);}
.num-change .shuzi p:last-child{font-size: 15px;color: #8f8f8f;}
.num-change .shuzi p .counter{font-size: 46px;font-family: fantasy;}

/* about */
.about.area{margin: 90px 0 0;padding: 0 0 85px;}
.about{display: flex;flex-wrap: wrap;justify-content: flex-end;}
.about.area h2{text-align: left;}
.about>div{width: 50%;}
.about .a-l{max-width: 800px;}
.about .a-l .info{padding:20px 7.5% 0 15px;height: 100%;}
.about .a-con{font-size: 16px;line-height: 35px;padding: 30px 0 0px;margin-bottom: 20px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;color: rgba(0, 0, 0, 0.8);}

.about .a-r{}
.about .a-r img{width: 100%;height: 100%;object-fit: cover;object-position: bottom;}

.about .more{float: left;margin-bottom: 10px;}
.about .more:hover{background-color: rgba(17, 95, 173, 1);color: #fff;}

/* Pro */
.product.area{padding: 0;}
.product{background-color: rgba(17, 95, 173, 0.06);}
.product .procate{display: flex;flex-wrap: wrap;border-bottom: 5px solid #fff;}
.product .procate .li{width: calc(20% - 4px);height: 220px;display: flex;align-items: center;justify-content: center;border-right: 5px solid #fff;}
.product .procate .li:last-child{border: 0;}
.product .procate .li:first-child{background-color: rgba(17, 95, 173, 1);color: #fff;}
.product .procate .li .title{padding-left: 15px;}
.product .procate .li .title a{color: #333;}
.product .procate .li:first-child .title{padding-left: 0;}
.product .procate .li .title h3{font-size: 22px;margin-bottom: 10px;}
.product .procate .li .title span{font-size: 12px;text-transform: uppercase;color: rgba(0, 0, 0, 0.4);}
.product .procate .li:first-child .title span{color: #fff;}
.product .procate .li .img{height: 120px;}
.product .procate .li .img img{width: 90%;height: 100%;object-fit: contain;object-position: center;transition: all 0.3s;max-width: 135px;}

.product .procate .li:hover{}
.product .procate .li:hover .img img{transform: translateY(-5px);}
.product .procate .li:hover .title a h3{color: rgba(17, 95, 173, 1);}
.product .procate .li:hover .title a span{color: rgba(17, 95, 173, 1);}


.product h2{padding: 70px 0;}
.product .proli{margin-bottom: 100px;padding: 0 15px;}
.product .proli .li{display: inline-block;padding: 30px;background-color: rgba(255,255,255,0.9);text-align: center;width: 100%;transition: all 0.3s;margin-bottom: 20px;}
.product .proli .li:hover{box-shadow: 0 0px 5px rgba(255,255,255,0.2);transform: translateY(-5px);}
.product .proli .li .tit p{line-height: 45px;font-size: 22px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;color: rgba(0, 0, 0, 0.8);}
.product .proli .li .tit span{color: #9d9d9d;font-size: 14px;}
.product .proli .li .img{margin: 40px 0;position: relative;padding-top: 65%;overflow: hidden;}
.product .proli .li .img img{width: 100%;height: 100%;object-fit: cover;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);transition: all 0.3s;}
.product .proli .li:hover .img img{width: 105%;height: 105%;}
.product .proli .li>span{display: inline-block;width: 80%;max-width: 160px;line-height: 40px;border: 1px solid rgba(17, 95, 173, 1);color: rgba(17, 95, 173, 1);font-size: 14px;border-radius: 20px;text-align: center;margin: 15px 0 20px;}
.product .proli .li:hover>span{background-color: rgba(17, 95, 173, 1);color: #fff;}


/* case */
.case.area{padding: 70px 15px 50px;background-color: #fff;}
.case.area h2{margin-bottom: 30px!important;}
.case.area h2 p{color: #333;}
.case .case-info{display: inline-block;width: 100%;margin-bottom: 30px;padding: 1px;background-color: rgba(17, 95, 173, 0.07);position: relative;z-index: 1;transition: all 0.3s;}

.case .case-info .case-img{overflow: hidden;position: relative;padding-top: calc(63.5% + 40px);z-index: 3;transition: all 0.3s;}
.case .case-info .case-img img{width: calc(100% - 40px);height: calc(100% - 20px);position: absolute;top: 20px;left: 20px;object-fit: cover;z-index: 2;transition: all 0.3s;}
.case .case-info .case-img::after{content: '';position: absolute;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0);transition: all 0.3s;z-index: 3;left: 0;top: 0;}
.case .case-info .case-tit{position: relative;z-index: 3;}
.case .case-info .case-tit p{color: #222;font-size: 22px;padding: 4% 5%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-right: calc(35px);text-align: center;}
.case .case-info .case-tit span{display: inline-block;width: 100%;color: #fff;background-color: rgba(17, 95, 173, 1);text-align: center;font-weight: bold;line-height: 40px;height: 40px;transform: rotateX(90deg);transform-origin: top;position: absolute;bottom: -35px;transition: all 0.3s;}
.case .case-info .case-con{width: calc(50%);line-height: 30px;height: 60px;position: absolute;top: 50%;left: 50%;color: #fff;font-size: 17px;left: 20px;z-index: 4;transition: all 0.3s;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;opacity: 0;text-align: center;transform: translateY(100%);}

.case .case-info:hover .case-img{padding-top: calc(63.5%);}
/* .case .case-info:hover .case-img img{left: 0;width: 100%;top: 0;height: 100%;} */
/* .case .case-info:hover .case-img::after{background-color: rgba(0, 0, 0, 0.6);} */
.case .case-info:hover .case-tit p{}
.case .case-info:hover .case-con{opacity: 1;transform: translateY(-50%);}
.case .case-info:hover .case-tit span{transform: rotateX(0deg);}


/* news */
.news.area{padding: 50px 15px 70px;}
.news{background-color: rgba(17, 95, 173, 0.06);}
.news.area h2{text-align: left;}
.news #newsSwiper{margin-top: 40px;}
.news a{display: inline-block;width: 100%;height: 100%;background-size: cover;}
.news .info{padding: 30px 35px;background-color: rgba(17, 95, 173, 0.9);transition: all 0.3s;}
/* .news .info::before{position: absolute;display: inline-block;content: '';width: 100%;height: 100%;background-color: rgba(17, 95, 173, 0.9);z-index: -1;} */
.news .info>span{font-size: 15px;color: rgba(255, 255, 255, 0.9);line-height: 50px;display: inline-block;}
.news .info h3{font-size: 22px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;color: #fff;line-height: 50px;}
.news .info p{font-size: 14px;color: rgba(255, 255, 255, 0.7);line-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;margin-bottom: 40px;}
.news .info b{font-size: 15px;font-weight: normal;line-height: 20px;line-height: 20px;padding-bottom: 30px;display: inline-block;color: #fff;}
.news .info b span{display: inline-block;width: 25px;height: 25px;margin-left: 50px;background-color: #cf0b0f;color: #fff;font-weight: bold;border-radius: 50%;text-align: center;font-family: cursive;line-height: 23px;}
.news a:hover span{color: #fff;}
.news a:hover h3{color: #fff;}
.news a:hover p{color: #fff;}
.news a:hover b{color: #fff;}
.news a:hover .info{background-color: rgba(17, 95, 173, 0.5);}



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

}


@media screen and (min-width: 0px) and (max-width:1200px){
    .about.area{margin: 60px;}
    .about .a-con{font-size: 15px;}
    .num-change .shuzi p .counter{font-size: 38px;}

    .product .procate .li .title h3{font-size: 16px;}
    .product .procate .li{height: 180px;}
    .product .procate .li .img{text-align: right;}
    .product .procate .li .img img{width: 80%;}

    .case{margin-bottom: 30px;}

    .news .info h3{font-size: 18px;}
}


@media screen and (min-width: 0px) and (max-width:992px){
    .about.area{position: relative;margin: 0;padding: 50px;}
    .about .a-l{max-width: none;position: relative;z-index: 1;width: 100%;}
    .about .a-l .info{padding: 55px;height: 100%;width: 100%;background-color: rgba(255,255,255,0.8);}
    .about .a-r{position: absolute;width: 100%;height: 100%;left: 0;bottom: 0;}
    .about .more{margin-bottom: 55px;}

    .product h2{padding: 50px 0;}
    .product .proli .li{margin-bottom: 15px;}

    .case{margin: 40px 0 10px;}

    .news .info h3{font-size: 17px;}
    
}

@media screen and (min-width: 0px) and (max-width:768px){
    .banner{height: calc(100vh - 70px);}

    .about .a-l .info{padding: 30px;}
    .about.area{padding: 30px;}
    .num-change .shuzi p .counter{font-size: 32px;}

    .product .procate .li{width: calc(33.333333% - 4px);}
    .product .procate .li:first-child{width: calc(66.666666% - 5px);}
    .product .procate .li:first-child .title h3{font-size: 24px;}
    .product .procate .li:nth-child(2){border: 0;width: 33.333333%;}
    .product .proli{margin-bottom: 30px;}
    .product .proli .li .tit p{font-size: 18px;}

    .case.area{padding: 30px 15px;}
    .case .case-info .case-tit p{font-size: 18px;}
    .case #caseSwiper2 .case-info{margin-bottom: 0;}
}

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

    .case .case-info .case-tit p{font-size: 16px;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .about.area{padding: 30px 20px;}
    .about .a-con{font-size: 14px;padding-top: 10px;}
    .about .a-l .info{padding: 20px;}
    .about .more{margin-bottom: 30px;}
    .num-change{margin-bottom: 20px;}
    .num-change .shuzi p:last-child{font-size: 14px;}
    .num-change .li{padding: 7.5px;}
    .num-change .shuzi p .counter{font-size: 24px;}
    .product .procate .li{width: 50%!important;border: 0;height: 135px;}
    .product .procate .li .title h3{font-size: 15px;}
    .product .procate .li:first-child{width: 100%!important;height: 120px;}
    .product h2{padding: 20px 0;}
    .product .proli .li{padding: 15px;}
    .product .proli .li .tit p{font-size: 15px;}
    .product .proli .li .img{margin: 15px 0;}
    .product .proli .li>span{font-size: 13px;line-height: 35px;margin: 5px 0;}
    

    .case{margin: 20px 0 0;}
    .case.area h2{margin-bottom: 15px!important;}
    .case .case-info .case-tit p{font-size: 15px;}
    
    .news.area{padding: 30px 15px 40px;}
    .news #newsSwiper{margin-top: 20px;}
    .news .info{padding: 15px 20px;}
    .news .info p{margin-bottom: 20px;}
    .news .info h3{font-size: 15px;}
}

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

}