/* banner */
.banner{width: 100%;height: 100vh;position: relative;}
.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%;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;}

/*  */
.switch-search{position: absolute;bottom: -1px;width: 100%;max-width: 1600px;background-color: #fff;height: 100px;left: 50%;transform: translateX(-50%);padding: 0 6.25%;z-index: 2;}
.switch-search::after{content: '';display: inline-block;position: absolute;width: 25px;height: 30px;left: 50%;top: 50%;transform: translate(-50%,-50%);background-image: url(../images/mouse.png);background-size: contain;z-index: 1;background-repeat: no-repeat;animation: fade3 3s ease-out infinite;}
.switch-search .prev-next{position: relative;float: left;height: 100%;width: 110px;z-index: 2;}

.switch-search .prev-next .swiper-button-next:after,.switch-search .prev-next .swiper-button-prev:after{font-size: 17px;color: #333;}
/* .switch-search .prev-next .swiper-button-next svg,.switch-search .prev-next .swiper-button-prev svg{transform: rotate(-90deg) scale(2);} */

.switch-search .search{height: 60px;float: right;width: 60px;position: relative;margin-top: 20px;transition: all 0.3s;z-index: 2;}
.switch-search .search input{display: block;float: left;width: 100%;border: 1px solid #fff;color: #333;border-radius: 5px;height: 58px;text-indent: 65px;font-size: 15px;transition: all 0.3s;}
.switch-search .search button{display: inline-block;width: 50px;height: 50px;position: absolute;left: 5px;top: 50%;transform: translateY(-50%);background-color: rgba(0,0,0,0);}
.switch-search .search input::placeholder{color: #ccc;}
.switch-search .search:hover{width: 300px;}
.switch-search .search:hover input{border: 1px solid #ddd;}

/* 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 span{display: inline-block;color: #f2600a;}
.num-change .shuzi p span:last-child{font-size: 30px;line-height: 15px;}
.num-change .shuzi p span b{font-weight: normal;color: #333;font-size: 16px;}
.num-change .shuzi p:first-child{display: inline-block;width: 100%;padding: 5% 0 2%;position: relative;}
.num-change .shuzi p:first-child::after{content: '';display: inline-block;position: absolute;width: 15px;height: 2px;background-color: #333;left: 50%;bottom: 0;transform: translateX(-50%);}
.num-change .shuzi p:last-child{display: inline-block;width: 100%;padding: 0 0 9%;border-bottom: 2px solid #f2600a;position: relative;}
.num-change .shuzi p:last-child::after{content: '>';display: inline-block;position: absolute;left: 5px;bottom: 10px;width: 13px;height: 13px;color: #fff;border-radius: 50%;background-color: #f2600a;text-align: center;font-size: 12px;line-height: 14px;}
.num-change .counter{font-size: 46px;padding-right: 5px;font-family: fantasy;text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);}

/* about */
.about{position: relative;background-size: auto 100%;background-position: center;background-repeat: no-repeat;padding-top: 4.5%;padding-bottom: 4%;}
.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: 4%;}



/* Pro */
.area.product{padding: 0;margin: 0 auto;position: relative;padding-top: 6.5%;background-size: auto 820px;background-position: center top;background-repeat: no-repeat;}
.product .n-area{overflow: unset;width: 100%;max-width: none;position: relative;}
.product .p-logo{position: absolute;bottom: 10px;left: 5%;width: 30%;max-width: 445px;}
.product .p-logo img{width: 100%;filter: grayscale(1);opacity: 0.2;}
.product .pro-l{width: 35%;}
.product .pro-l .info{width: 100%;max-width: 560px;text-align: left;padding: 0 15px;}
.product .pro-l .info h4{font-size: 38px;color: #fff;font-weight: bold;}
.product .pro-l .info h4 span{display: inline-block;width: 100%;margin-top: 20px;font-size: 22px;font-weight: normal;}
.product .pro-l .info .img{width: 90%;max-width: 380px;padding-top: 10%;height: 510px;float: left;}
.product .pro-l .info .img img{width: 100%;height: 100%;object-fit: cover;}

.product .pro-r{width: 65%;}
.product .pro-r #proSwiper{}
.product .pro-r #proSwiper .pro-img{height: 770px;}
.product .pro-r #proSwiper img{width: 100%;height: 100%;object-fit: cover;}

.product .pro-r #proSwiper2{margin: 30px 0 10px;}
.product .pro-r #proSwiper2 .swiper-slide{position: relative;cursor: pointer;}

.product .pro-r #proSwiper2 .pro-img{height: 110px;}
.product .pro-r #proSwiper2 img{width: 100%;height: 100%;object-fit: cover;}
.product .pro-r #proSwiper2 .pro-tit{position: absolute;top: 100%;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);transition: all 0.3s;left: 0;}
.product .pro-r #proSwiper2 .pro-tit p{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);color: #fff;font-size: 17px;font-weight: bold;width: 100%;text-align: center;}

/* .product .pro-r #proSwiper2 .swiper-slide.swiper-slide-active .pro-tit{top: 0;} */
.product .pro-r #proSwiper2 .swiper-slide:hover .pro-tit{top: 0;}

/* case */
.cate{margin-top: 5%;}
.cate h2{margin-bottom: 3%!important;}
.cate .cate-info{display: inline-block;width: 100%;margin-bottom: 20px;padding: 1px;background-color: #f5f5f5;position: relative;z-index: 1;transition: all 0.3s;overflow: hidden;}
.cate .cate-info .cate-img{overflow: hidden;position: relative;padding-top: calc(85%);z-index: 3;transition: all 0.3s;}
.cate .cate-info .cate-img img{width: calc(110%);height: calc(100%);position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);object-fit: cover;z-index: 2;transition: all 0.5s;}
.cate .cate-info .cate-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;}

/* .cate .cate-info .cate-tit{position: absolute;z-index: 3;left: 5%;top: 0px;font-size: 24px;line-height: 30px;transform: translateY(-100%);transition: all 0.3s;color: #333;z-index: 3;} */
.cate .cate-info .cate-tit{position: relative;z-index: 3;font-size: 22px;line-height: 30px;transform: translateY(0%);transition: all 0.3s;color: #fff;z-index: 3;padding: 10px 15px;text-align: center;background-color: #f2600a;margin-top: 3px;font-weight: bold;}
.cate .cate-info .c-more{display: none;width: 100%;position: absolute;bottom: 0;transform: translateY(100%);transition: all 0.3s;line-height: 40px;font-size: 15px;background-color: rgba(255, 255, 255, 0.8);text-align: center;z-index: 3;color: #333;}

.cate .cate-info:hover .cate-img img{width: 100%;}
/* .cate .cate-info:hover .cate-tit{transform: translateY(0);top: 30px;} */
/* .cate .cate-info:hover .c-more{transform: translateY(0);} */

/* info2 */
.info2{margin-top: 3%;}
.info2 .n-area{max-width: 1650px;}
.info2 .n-area h2{margin-bottom: 5%;}
.info2 .info-l{width: calc(95% - 950px);max-width: 475px;margin-right: 5%;}
.info2 .info-l h3{font-size: 32px;line-height: 48px;margin-bottom: 10%;}
.info2 .info-l h4{color: #f2600a;display: block;width: 45%;float: left;margin-right: 5%;border-right: 1px solid #e9eef2;}
.info2 .info-l h4:nth-child(3){border-right: 0;}
.info2 .info-l h4 strong{font-size: 60px;font-weight: bold;display: inline-block;}
.info2 .info-l h4 em{font-size: 20px;display: inline-block;}
.info2 .info-l h4 span{display: inline-block;}
.info2 .info-l h5{float: left;margin-top: 10%;font-size: 15px;line-height: 30px;}
.info2 .info-r{position: relative;width: 100%;max-width: 950px;}
.info2 .info-r img{position: absolute;right: 0;top: 0;width: 100%;}
.info2 .info-r .i-0{width: 100%;position: relative;}
.info2 .info-r .i-1{z-index: 2;}

/* cate2 */
.area.cate2{padding: 0;}
.cate2 .n-area{max-width: none;}
.cate2 h2{padding: 2% 15px 3%;}
.cate2 .swiper{margin-bottom: 3px;}
.cate2 #cate2Swiper3{margin-bottom: 20px;}
.cate2 .swiper-slide{width: auto;}
.cate2 .swiper .swiper-wrapper{-webkit-transition-timing-function: linear;-moz-transition-timing-function: linear;-ms-transition-timing-function: linear;-o-transition-timing-function: linear;transition-timing-function: linear;height: 100%;}
.cate2 .swiper-slide img{height: 220px;filter: grayscale(1);cursor: pointer;}
.cate2 .swiper-slide img:hover{filter: grayscale(0);}

/* info3 */
.info3{background-color: #f9f9f9;background-size: cover;background-position: center top;}
.info3 .n-area h2{padding: 4% 15px;}
.info3 .info{margin-bottom: 2.5%;}
.info3 .info li{text-align: center;position: relative;}
.info3 .info li::after{content: '';display: inline-block;position: absolute;width: 1px;height: 100%;background-color: #ebebeb;right: 0;top: 0;}
.info3 .info li:last-child::after{width: 0;}
.info3 .info li .img{display: inline-block;width: 75px;height: 75px;border-radius: 50%;border: 1px solid rgba(226,119,29,1);position: relative;margin: 10px 0 22px;}
.info3 .info li .img img{height: 34px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.info3 .info li .img::before{content: '';display: inline-block;position: absolute;width: 75px;height: 75px;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 50%;border: 1px solid rgba(226,119,29,.5);animation: fade2 1s linear infinite;}
.info3 .info li .img::after{content: '';display: inline-block;position: absolute;width: 90px;height: 90px;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 50%;border: 1px solid rgba(226,119,29,.2);animation: fade2 1s linear infinite;}
.info3 .info li h3{font-size: 20px;font-weight: bold;margin-bottom: 10px;}
.info3 .info li p{font-size: 15px;color: #999898;line-height: 25px;height: 50px;}



@media screen and (min-width: 0px) and (max-width:1600px){
    .info2 .info-l h3{font-size: 28px;}
    .product .p-logo{left: 15px;}
}
@media screen and (min-width: 0px) and (max-width:1400px){
    .info2 .info-l{width: 100%;margin-right: 0;max-width: none;}
    .info2 .info-l h3{margin-bottom: 20px;margin-top: 30px;}
    .info2 .info-l h4{max-width: 260px;}
    .info2 .info-l h5{margin-top: 20px;}
    .info2 .info-r{float: none;margin: 0 auto;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
    .area.product{background-size: auto 670px;}
    .product .pro-l .info h4{font-size: 28px;}
    .product .pro-l .info h4 span{font-size: 17px;}
    .product .pro-l .info .img{height: 450px;}
    .product .pro-r #proSwiper2{margin-top: 10px;}
    .product .pro-r #proSwiper .pro-img{height: 570px;}
}


@media screen and (min-width: 0px) and (max-width:992px){
    .banner{height: calc(100vh - 70px);}
    .cate .cate-info{margin-bottom: 13px;}
    .product .pro-r #proSwiper .pro-img{height: 480px;}
    .product .pro-r #proSwiper2 .pro-img{height: 80px;}

    .cate .cate-info .cate-tit{
        /* transform: translateY(0);top: 15px; */
        font-size: 18px;}
    /* .cate .cate-info:hover .cate-tit{transform: translateY(0);top: 15px;} */
}

@media screen and (min-width: 0px) and (max-width:768px){
    .img-swiper .swiper-slide img.h-img{display: none;}
    .img-swiper .swiper-slide img.m-img{display: block;}

    .about{padding-top: 30px;}
    .about .a-con{line-height: 35px;font-size: 15px;}
    .info2 .info-l h3{font-size: 24px;}
    .info2 .info-l h4 strong{font-size: 48px;}
    .info2 .info-l h4 span{font-size: 16px!important;}

    .cate{margin-top: 30px;}

    .area.product{padding: 50px 15px 0;}
    .product .pro-l{width: 100%;}
    .product .pro-l .info{max-width: none;text-align: center;margin-bottom: 20px;}
    .product .pro-l .info .img{display: none;}
    .product .pro-r{width: 100%;}
    .product .pro-r #proSwiper2{margin-top: 10px;}

    .info3 .n-area h2{padding: 30px 0;}
    
}
@media screen and (min-width: 0px) and (max-width:600px){
    .switch-search{height: 60px;padding: 0 15px;}
    .switch-search .prev-next{width: 90px;}
    .switch-search .search:hover{width: calc(100% - 110px);}
    .switch-search .search{height: 40px;margin-top: 10px;width: calc(100% - 110px);}
    .switch-search .search button{left: 0px;}
    .switch-search .search input{height: 40px;font-size: 14px;text-indent: 50px;}

}

@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;margin-top: 10px;}
    .num-change .shuzi p span:last-child{font-size: 16px;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .num-change .counter, .num-change b{font-size: 28px;}
    .num-change .shuzi p:first-child{padding-top: 10px;}
    .info2 .info-l h3{font-size: 22px;line-height: 35px;}
    .info2 .info-l h4 strong{font-size: 36px;}
    .info2 .info-l h4 span{font-size: 14px!important;}
    .info2 .info-l h5{font-size: 14px;}

    .info3 .n-area h2 p{font-size: 18px;}
    .info3 .info li h3{font-size: 18px;}
    .info3 .info li p{font-size: 14px;}

    .product .pro-l .info h4{font-size: 22px;}
    .product .pro-l .info h4 span{font-size: 14px;}
    .product .pro-r #proSwiper .pro-img{height: 320px;}
    .product .pro-r #proSwiper2 .pro-img{height: 60px;}
    .product .pro-r #proSwiper2 .pro-tit p{font-size: 14px;font-weight: normal;}

    .cate2 .swiper-slide img{height: 130px;}

    .cate .cate-info .cate-tit{
        /* transform: translateY(0);top: 5px; */
        font-size: 15px;
        font-weight: normal;
        padding: 10px 10px;
        line-height: 20px;
    }
    /* .cate .cate-info:hover .cate-tit{transform: translateY(0);top: 5px;} */
}

@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%);
    }
}