/* load */
#loading{position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;background-color: #fff;z-index: 999999;}
#loading .img{position: absolute;width: 80%;max-width: 300px;left: 50%;top: 50%;transform: translate(-50%,-50%);display: flex;align-items: center;}
#loading .img img{width: 100%;}
#loading .img::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    animation: slide 1.5s linear infinite;
}
@keyframes slide {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
}


/* banner */
.banner{width: 100%;height: 70vh;position: relative;max-height: 640px;}
.img-swiper img{transition: all 10s;animation: fade 15s linear infinite;}

.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%;height: 100%;max-width: 1400px;margin: 0 auto;height: 100%;}
.txt-swiper .swiper-slide .ib-bg .info{position: absolute;left: 15px;top: 50%;transform: translateY(-50%);}
.txt-swiper .swiper-slide .ib-bg .info h3{font-size: 50px;margin-bottom: 15px;font-weight: 500;}
.txt-swiper .swiper-slide .ib-bg .info p{font-size: 28px;}
.txt-swiper .swiper-slide a{display: block;width: 100%;max-width: 1060px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.txt-swiper .swiper-slide img{max-width: 70%;position: absolute;left: 5%;top: 50%;transform: translateY(-50%);}

.n-area h2{font-size: 42px;font-weight: 500;text-align: left;}


/* about */
.about{padding: 70px 15px;}
.about .n-area{display: flex;flex-wrap: wrap;align-items: stretch;}
.about .n-area .content{width: 50%;padding: 25px 0;}
.about .n-area .content div{margin-top: 40px;;height: 245px;overflow: hidden;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 7;-webkit-box-orient: vertical;line-height: 35px;font-size: 16px;}
.about .n-area .img{padding-left: 15px;width: 50%;max-width: 480px;margin-left: auto;position: relative;}
.about .n-area .img img{position: absolute;left: 0;top: 0;object-fit: cover;width: 100%;height: 100%;}



/* Pro */
.area.product{padding: 70px 15px;background-color: #f7f8f9;}
.product .n-area{}
.product .pro-ul{width: 100%;display: flex;flex-wrap: wrap;margin-top: 40px;position: relative;}
.product .anchor{position: absolute;bottom: 100%;left: 0;width: 1px;height: 140px;}
.product .pro-ul .li{width: 45%;margin-right: 10%;background-color: #fff;}
.product .pro-ul .li:last-child{margin-right: 0;}
.product .pro-ul .li .img{width: 100%;padding-top: 100%;position: relative;overflow: hidden;}
.product .pro-ul .li .img img{width: 100%;height: 100%;object-fit: contain;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.product .pro-ul .li .txt{padding: 30px;border-top: 1px solid rgba(0 ,0 ,0 ,0.05);}
.product .pro-ul .li h3{margin-bottom: 20px;font-size: 22px;font-weight: 500;}
.product .pro-ul .li p{line-height: 35px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;line-height: 35px;font-size: 16px;}
.product .pro-ul .li:hover{transform: translateY(-3px);box-shadow: 0 2px 5px rgba(0 ,0 ,0 ,0.05);}
.product .pro-ul .li a:hover .img img{width: 105%;height: 105%;}

/* cate1 */
.area.cate{padding: 70px 15px;}
.cate .cate-ul{display: flex;width: 100%;flex-wrap: wrap;margin-top: 40px;}
.cate .cate-ul .li{width: calc(25% - 11px);margin-right: 15px;position: relative;background-size: cover;height: 400px;margin-bottom: 15px;overflow: hidden;}
.cate .cate-ul .li>a{display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.cate .cate-ul .li::before{content: '';display: inline-block;width: 100%;height: 100%;background-color: rgba(0 ,0 ,0 ,0.6);left: 0;top: 0;z-index: -1;}
.cate .cate-ul .li:nth-child(3n){margin-right: 0;}
.cate .cate-ul .li:first-child,.cate .cate-ul .li:last-child{width: calc(50% - 8px);}
.cate .cate-ul .li .info{width: 100%;padding: 0 35px;position: absolute;bottom: 35px;left: 0;transform: translateY(calc(100% - 25px));}
.cate .cate-ul .li:first-child .info,.cate .cate-ul .li:last-child .info{transform: translateY(0);}
.cate .cate-ul .li .info h3{color: #fff;font-size: 22px;font-weight: 500;line-height: 30px;margin-bottom: 20px;}
.cate .cate-ul .li .info p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;line-height: 35px;font-size: 16px;color: #fff;margin-bottom: 20px;}
.cate .cate-ul .li .info span{color: #fff;font-size: 18px;}
.cate .cate-ul .li .info span:hover{transform: translateY(-3px);}
.cate .cate-ul .li:hover .info{transform: translateY(0);}
.cate .cate-ul .li:hover{transform: scale(1.02);}


/* news */
.area.news{padding: 40px 15px 70px;}
.news .n-area{display: flex;flex-wrap: wrap;align-items: stretch;}
.news h2{margin-bottom: 40px;}
/* .news .n-l{width: calc(66.666666% - 15px);margin-right: 30px;} 隐藏右侧新闻栏*/
.news .n-l{width: calc(100%);}
.news .n-l .ul{display: flex;flex-wrap: wrap;height: 100%;}
.news .n-l .ul .li{width: calc(33.333333% - 20px);margin-right: 30px;background-color: #f7f8f9;height: 100%;}
.news .n-l .ul .li:last-child{margin-right: 0;}
.news .n-l .ul .li .img{width: 100%;padding-top: 60%;position: relative;overflow: hidden;}
.news .n-l .ul .li .img img{width: 100%;height: 100%;position: absolute;object-fit: cover;left: 0;top: 0;}
.news .n-l .ul .li .txt{padding: 25px 20px;}
.news .li h3{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 20px;line-height: 30px;font-weight: 400;height: 60px;}
.news .li span{display: inline-block;color: rgba(0 ,0 ,0 ,0.4);}
.news .n-l .ul .li .txt p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 16px;line-height: 30px;color: rgba(0 ,0 ,0 ,0.6);margin: 20px 0;}

/* 右侧，已隐藏 */
.news .n-r{width: calc(33.333333% - 15px);padding: 20px;background-color: #f7f8f9;}
.news .n-r h2{font-size: 22px;font-weight: 500;margin-bottom: 0;display: flex;width: 100%;align-items: center;}
.news .n-r h2 a{margin-left: auto;font-size: 15px;}
.news .n-r .li{margin: 15px 0;width: 100%;}
.news .n-r .li:last-child{margin-bottom: 0;}
.news .n-r .li a{display: inline-block;width: 100%;}
.news .n-r .li a h3{margin-bottom: 5px;}
.news .n-l .ul .li a:hover .img img{width: 105%;height: 105%;}



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

}
@media screen and (min-width: 0px) and (max-width:1400px){
    .txt-swiper .swiper-slide .ib-bg .info h3{font-size: 44px;}
    .txt-swiper .swiper-slide .ib-bg .info p{font-size: 26px;}

    .n-area h2{font-size: 36px;}

}
@media screen and (min-width: 0px) and (max-width:1200px){
    .news .li h3{font-size: 18px;}
}
@media screen and (min-width: 0px) and (max-width:1024px){
    .txt-swiper .swiper-slide .ib-bg .info h3{font-size: 36px;}
    .txt-swiper .swiper-slide .ib-bg .info p{font-size: 22px;}
    .banner{max-height: 450px;}

    .n-area h2{font-size: 32px;}
    .about .n-area .content div{margin-top: 25px;font-size: 15px;}
    .about .n-area .content{padding-right: 15px;}
    .num-change .counter{font-size: 40px;}
    .num-change .shuzi p:first-child{padding-bottom: 0;}

    .product .pro-ul .li{margin-right: 5%;width: 47.5%;}
    .cate .cate-ul .li .info p{font-size: 15px;}
    .cate .cate-ul .li .info a{font-size: 16px;}
}
@media screen and (min-width: 0px) and (max-width:992px){
    .cate .cate-ul .li .info{padding: 0 20px;}
    /*右侧新闻栏隐藏，需删除样式 .news .n-l{margin-right: 15px;width: calc(66.666666% - 7.5px);}
    .news .n-l .ul .li{margin-right: 15px;width: calc(50% - 7.5px);} */
    .news .n-r{width: calc(33.333333% - 7.5px);}
    .news .li h3{font-size: 17px;}
}
@media screen and (min-width: 0px) and (max-width:768px){
    .img-swiper img{object-position: left center;}

    .n-area h2{font-size: 28px;}
    .about{padding: 50px 15px;}
    .about .n-area .content{width: 100%;padding: 0 0 20px;}
    .about .n-area .content div{height: auto;}
    .about .n-area .img{width: 100%;padding: 0;padding-bottom: 40%;max-width: none;}
    .num-change{margin-top: 20px;}
    .num-change .counter{font-size: 32px;}

    .product .pro-ul .li{width: 100%;margin-right: 0;padding: 10px 0;margin-bottom: 15px;}
    .product .pro-ul .li:last-child{margin-bottom: 0;}
    /* .product .pro-ul .li a{display: flex;width: 100%;}
    .product .pro-ul .li .img{padding-top: 0;min-width: 150px;width: 50%;max-width: 225px;} */
    .product .pro-ul .li .txt{border-top: 0;width: 100%;}

    .cate .cate-ul .li .info h3{font-size: 20px;}
    .cate .cate-ul .li{width: calc(50% - 7.5px);margin-right: 15px;}
    .cate .cate-ul .li:first-child, .cate .cate-ul .li:last-child{width: calc(50% - 7.5px);}
    .cate .cate-ul .li:nth-child(3n){margin-right: 15px;}
    .cate .cate-ul .li:nth-child(2n){margin-right: 0;}
    .cate .cate-ul .li .info{transform: translateY(0);}
    

    .news .li h3{height: auto;}
    .news .n-l{width: 100%;margin-right: 0;}
    .news .n-r{width: 100%;margin-top: 15px;}
    .news .n-r .li{margin: 0;padding: 20px 0 0;}
    .news .n-l .ul .li{width: 100%;margin-right: 0;height: auto;margin-bottom: 15px;}
    .news .n-l .ul .li:last-child{margin-bottom: 0;}
    .news .n-l .ul .li a{display: flex;width: 100%;}
    .news .n-l .ul .li .img{padding-top: 0;min-width: 120px;}
}
@media screen and (min-width: 0px) and (max-width:640px){
    .n-area h2{font-size: 24px;}

    .area.cate{padding: 50px 15px;}
    .cate .cate-ul .li .info h3{font-size: 18px;}
    .cate .cate-ul .li{height: 300px;}
    .cate .cate-ul .li .info p{line-height: 30px;}

    .area.product{padding: 50px 15px;}
    .product .pro-ul .li h3{font-size: 18px;margin-bottom: 10px;}
    .product .pro-ul .li p{font-size: 15px;}
    .product .pro-ul .li .txt{padding: 15px;border: 0;}

    .area.news{padding-top: 0;padding-bottom: 30px;}
    .news .li h3{font-size: 16px;}
    .news .n-l .ul .li .txt p{font-size: 15px;}
}
@media screen and (min-width: 0px) and (max-width:550px){

}
@media screen and (min-width: 0px) and (max-width:440px){
    .txt-swiper .swiper-slide .ib-bg .info{display: none;}
}
@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);
    }
}
@keyframes fade2 {
    0%{
        transform: translate(-50%,-50%) scale(1);
    }
    100%{
        transform: translate(-50%,-50%) scale(1.3);
    }
}
@keyframes fade3 {
    0%{
        transform: translate(-50%,-50%);
    }
    33%{
        transform: translate(-50%,-30%);
    }
    66%{
        transform: translate(-50%,-70%);
    }
    100%{
        transform: translate(-50%,-50%);
    }
}