/* banner */
.banner{position: relative;}
.banner img{width: 100%;}

.banner .swiper-slide{overflow: hidden;}
.banner .slide-inner{position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-size: cover;background-position: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;color:#fff;}
.banner .swiper-pagination{z-index: 1;}
.banner .swiper-pagination-bullet{transition: all 0.3s;}
.banner .swiper-pagination-bullet-active{width: 24px;background-color: #fff;border-radius: 4px;}

/* num-change */
.num-change{width: 100%;font-size: 16px;}
.num-change ul{width: 100%;float: left;display: block;margin: 2% 0;}
.num-change ul li{padding: 0;}
.num-change .shuzi{padding: 0 5% 0 10%;text-align: center;}
.num-change .shuzi p:first-child{display: inline-block;width: 100%;padding: 5% 0 2%;}
.num-change .shuzi p:last-child{display: inline-block;width: 100%;padding: 0 0 9%;}
.num-change .counter,.num-change b{font-size: 46px;color: #e60619;font-weight: bold;}


/* about */
.about{position: relative;background-size: cover;background-position: 0 bottom;background-repeat: no-repeat;padding-top: 4.5%!important;}
.about .a-con{line-height: 45px;font-size: 18px;color: #2b2b2b;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;width: 100%;max-width: 1400px;margin: 0 auto;margin-top: 2%;}

/* Pro */
.product{margin: 0 auto;position: relative;padding-top: 2%!important;background-size: cover;background-position: 0 bottom;margin-top: 4%;}
.product::after{content: '';width: 100%;height: 100%;z-index: 1;position: absolute;background-color: rgba(0, 0, 0, 0.7);left: 0;top: 0;}
.product .n-area{overflow: unset;position: relative;z-index: 2;}
.product .tit{position: relative;margin: 3% 0;}
.product h2{display: inline-block;padding: 0 15px;}
.product h2 p{color: #fff!important;}
.product h2 span{color: #E8E8E8;opacity: 0.1;}

.product .pro-cate{background-color: #fff;padding: 10% 8%;margin-bottom: 20%;}
.product .pro-cate h4{font-size: 30px;font-weight: bold;color: #e60619;margin: 0;padding: 5% 0;position: relative;border-bottom: 2px solid #e8e8e8;}
.product .pro-cate h4 span{position: absolute;right: 0;top: 50%;transform: translateY(-50%);width: 35px;line-height: 35px;text-align: center;border-radius: 8px;background-color: #e8e8e8;color: #ccc;}
.product .pro-cate ul{width: 100%;display: block;float: left;margin: 6% 0 0%;border-bottom: 2px solid #e8e8e8;padding-bottom: 58.6%;}
.product .pro-cate ul li{float: left;display: block;width: 50%;padding: 2.5% 0;}
.product .pro-cate ul li a{display: inline-block;width: 100%;font-size: 16px;color: #333;overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;}
.product .pro-cate ul li a:hover{color: #e60619;}
.product .pro-cate ul li a b{font-size: 20px;width: 20px;text-align: center;display: inline-block;}
.product .pro-cate .pro-contact{width: 100%;padding: 8% 0 0;}
.product .pro-cate .pro-contact p{height: 50px;line-height: 50px;font-size: 16px;text-align: center;}
.product .pro-cate .pro-contact p img{height: 100%;margin-right: 5%;}
.product .pro-cate .pro-contact b{color: #e60619;font-weight: bold;font-size: 30px;display: inline-block;width: 100%;padding-top: 6%;text-align: center;}
.product .pro-cate .pl-img{width: 100%;}


.product .proli{display: inline-block;width: 100%;margin: 0;}
.product .proli a{display: inline-block;width: 100%;margin-bottom: 30px;padding: 1px;background-color: #dbdbdb;position: relative;z-index: 1;transition: all 0.3s;}
.product .proli a::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: #e60619;width: 0;height: 0;transition: all 0.3s;}
.product .proli a::before{position: absolute;z-index: 2;content: '';left: 0;bottom: 0;background-color: #e60619;width: 0;height: 0;transition: all 0.3s;}
.product .proli a .pro-img{overflow: hidden;position: relative;padding-top: 50.8%;z-index: 3;background-color: #fff;transition: all 0.3s;}
.product .proli a .pro-img::before{
    position: absolute;
    z-index: 10;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255,255,255,0.3);
    content: '';
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}
.product .proli a .pro-img img{width: calc(100% - 36px);height: calc(100% - 18px);position: absolute;top: 18px;left: 18px;object-fit: contain;transition: all 0.3s;}
.product .proli a .pro-tit{position: relative;z-index: 3;}
.product .proli a .pro-tit p{color: #222;font-size: 16px;padding: 6% 5%;background-color: #fff;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;}
.product .proli a .pro-tit span{width: 32px;height: 32px;text-align: center;line-height: 32px;color: #ccc;border: 1px solid #ccc;position: absolute;right: 5%;top: 50%;transform: translateY(-50%);font-size: 30px;background-color: #fff;}

.product .proli a:hover .pro-img img{width: calc(100%);height: calc(100% );left: 0px;top: 0px;filter: brightness(1.4);}
.product .proli a:hover .pro-img::before{
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}
.product .proli a:hover .pro-tit p{color: #e60619;}


/* case */
.case{margin-top: 4%;}
.case h2{margin-bottom: 1%!important;}
.case .case-info{display: inline-block;width: 100%;margin-bottom: 30px;padding: 1px;background-color: #f5f5f5;position: relative;z-index: 1;transition: all 0.3s;margin-bottom: 40px;}

.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: 16px;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: #e60619;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{padding-bottom: 4%!important;background-size: cover;background-position: left bottom;}
.news h2{border-bottom: 2px solid #f5f5f5;padding-bottom: 3%;}
.news h2{position: relative;margin: 5.5% 0 3%;}
.news h2 a{float: right;display: block;font-size: 16px;color: #999;right: 1%;position: absolute;top: 50%;transform: translateY(-50%);}
.news h2 a span{display: inline-block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid #999;border-radius: 50%;font-size: 18px;color: #999;font-family: cursive;font-weight: bold;position: relative;}

.news ul{float: left;width: 100%;margin-bottom: 3%;}
.news ul li.st1 {width: 100%;}
.news ul li.st1 div.fr img{width: 100%;max-width: 430px;float: right;max-height: 220px;object-fit: cover;transition: all 0.3s;}
.news ul li.st1 a{display: block;}
.news ul li.st1 a span{font-size: 15px;font-weight: bold;color: #979797;display: inline-block;width: 100%;padding: 1% 0;}
.news ul li.st1 a h4{font-size: 22px;color: #333;font-weight: bold;margin: 2.5% 0;display: inline-block;width: 100%;overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;transition: all 0.3s;}
.news ul li.st1 a p{line-height: 30px;font-size: 15px;color: #969696;height: 60px;display: inline-block;width: 100%;overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;transition: all 0.3s;}
.news ul li.st1 a b{font-size: 42px;color: #828282;display: inline-block;width: 100%;line-height: 50px;transition: all 0.3s;}

.news ul .li-d{position: relative;margin-top: 3%;cursor: pointer;border-top: 2px solid #f5f5f5;}
.news ul .li-d::after,.news ul .li-d::before{content: '';width: 100%;position: absolute;height: 2px;background-color: #f5f5f5;transition: all 0.5s;bottom: 0;right: 0;}
.news ul .li-d::after{width: 0;height: 4px;background-color: #e60619;}
.news ul .li-d div{}
.news ul .li-d div a h4{width: calc(100% - 90px);display: block;float: left;margin: 4% 0;font-size: 22px;color: #333;font-weight: bold;text-indent: 10px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;transition: all 0.3s;}
.news ul .li-d div a span{width: 80px;display: block;float: left;font-size: 15px;color: #979797;font-weight: bold;position: absolute;right: 10px;top: 50%;transform: translateY(-50%);}
.news ul .li-d div a::before{content: '';position: absolute;background-color: #e60619;width: 5px;height: 5px;left: 0;top: 50%;transform: translateY(-50%);border-radius: 50%;}

.news ul li.st1:hover a p{color: #e60619;}
.news ul li.st1:hover div.fr img{max-width: 530px;}
.news ul li.st1:hover a b{font-size: 50px; color:#e60619;}
/* .news ul .li-d:hover::before{height: 4px;background-color: #e60619;} */
.news ul .li-d:hover::after{width: 100%;left: 0;}
.news ul .li-d:hover div a h4{margin: calc(4% - 3px) 0 calc(4% + 3px);}



@media screen and (min-width: 0px) and (max-width:1200px){
    .product .pro-cate .pro-contact p{font-size: 12px;}
    .product .pro-cate .pro-contact b{font-size: 26px;}
}


@media screen and (min-width: 0px) and (max-width:992px){
    .product .pro-cate .pro-contact p{font-size: 16px;}
    .product .pro-cate ul li{width: 33.333333%;}
    .product .pro-cate{padding: 5% 8%;}
    .product .pro-cate .pro-contact{padding: 5% 0;}
    .product .pro-cate ul{margin-top: 3%;padding-bottom: 4%;}
    .product .pro-cate .pro-contact b{padding-top: 4%;}
    .product .pro-cate{margin-bottom: 3%;}
    .news ul li.st1 a h4,.news ul .li-d div a h4{font-size: 19px;}
}

@media screen and (min-width: 0px) and (max-width:768px){
    .about .a-con{line-height: 35px;font-size: 16px;}


    .product .proli li:nth-child(2n-1){padding-right: 8px;}
    .product .proli li:nth-child(2n){padding-left: 8px;}
    .product .proli a{margin-bottom: 5%;}
    .product .proli a .pro-img img{width: calc(100% - 20px);height: calc(100% - 10px);top: 10px;left: 10px;}

    .news ul li.st1 div.fr img{max-width: 100%;}
    
}

@media screen and (min-width: 0px) and (max-width:550px){
    .about .a-con{font-size: 14px;}
    .num-change .counter, .num-change b{font-size: 35px;}
    .num-change .shuzi p:last-child{font-size: 14px;}
    .news ul li.st1 a h4,.news ul li.st1 a h4, .news ul .li-d div a h4{font-size: 17px;}
    .product .pro-cate ul li{width: 50%;}
}
@media screen and (min-width: 0px) and (max-width:430px){
    .num-change .shuzi p:last-child{font-size: 12px;}
    .product .pro-cate h4{font-size: 24px;}
    .product .pro-cate ul li a{font-size: 14px;}
    .product .pro-cate .pro-contact b{font-size: 24px;}
    .num-change .counter, .num-change b{font-size: 28px;}
}

@media screen and (min-width: 0px) and (max-width:320px){
    .product .pro-cate ul li{width: 50%;}
}

@keyframes fade {
    0%{
        opacity: 0;
        transform: translateY(-30%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}