/* load */
#loading{position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;background-color: #fff;z-index: 999999;}
#loading .img{position: absolute;width: 40%;max-width: 300px;left: 50%;top: 50%;transform: translate(-50%,-50%);display: flex;}
#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: 100vh;position: relative;}
.img-swiper{position: relative!important;}
.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 img.h-info{width: auto;position: absolute;max-width: 95%;max-height: 90%;left: 50%;top: 50%;transform: translate(-50%,-40%);}
.txt-swiper .swiper-slide:nth-child(3) img.h-info{max-width: 85%;transform: translate(-50%,-45%);}

.txt-swiper .swiper-slide img.m-info{width: auto;position: absolute;max-width: 90%;max-height: 80%;left: 50%;top: 50%;transform: translate(-50%,-50%);display: none;}
.txt-swiper .swiper-slide:nth-child(3) img.m-info{max-width: 100%;}

/*  */
.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: #006AAD;}
.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 #006AAD;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: #006AAD;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);}


/* Pro */
.area.product{margin: 0 auto;position: relative;padding-top: 6.5%;background-size: 100% auto;background-position: center top;background-repeat: no-repeat;background-color: #f4f4f4;}
.product .procate{width: 100%;display: flex;flex-wrap: wrap;margin: 15px 0;justify-content: center;}
.product .procate a{width: 33.333333%;max-width: 170px;line-height: 44px;text-align: center;font-weight: 600;border-left: 1px solid rgba(0, 0, 0, .8);font-size: 17px;margin: 10px 0;}
.product .procate a:last-child{border-right: 1px solid rgba(0, 0, 0, .8);}

.product .product-ul{margin-bottom: 30px;}
.product .product-ul a{background-color: #fff;display: flex;flex-wrap: wrap;margin-bottom: 30px;position: relative;overflow: hidden;}
.product .product-ul .tit{line-height: 60px;margin: 0 20px;width: calc(100% - 40px);font-size: 17px;font-weight: 600;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;position: relative;z-index: 2;}
.product .product-ul .img{width: 100%;position: relative;padding-top: 80%;border-top: 1px solid rgba(0, 0, 0, .07);}
.product .product-ul .img img{width: 90%;height: 80%;object-fit: contain;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);object-position: center;}

.product .product-ul a .content{position: absolute;width: 100%;height: 100%;top: 100%;color: #fff;padding-top: 60px;transition: all 0.3s;background-color: rgba(0, 106, 173, .9);z-index: 1;}
.product .product-ul a .content .txt{width: 100%;height: 100%;display: flex;flex-wrap: wrap;padding: 20px;align-content: space-between;}
.product .product-ul a .content .txt p{width: 100%;line-height: 35px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;color: #fff;font-size: 16px;}
.product .product-ul a .content .txt span{display: inline-block;width: 65%;max-width: 110px;line-height: 30px;border: 1px solid #fff;border-radius: 30px;text-align: center;color: #fff;margin-left: auto;}

.product .product-ul a:hover .tit{color: #fff;}
.product .product-ul a:hover .content{top: 0;}

/* about */
.about{background-size: cover;background-position: center;background-repeat: no-repeat;padding: 90px 0;display: flex;flex-wrap: wrap;}
.about .left{width: 50%;padding-right: 4%;}
.about .left img{width: 100%;height: 100%;object-fit: cover;object-position: right center;}
.about .right{width: 50%;max-width: 700px;padding-right: 15px;}
.about .right .content{font-size: 17px;line-height: 35px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;margin-bottom: 25px;}
.about .right .bt{width: 100%;display: flex;margin-bottom: 60px;}
.about .right .bt a{flex-grow: 1;margin-right: 10%;display: flex;flex-wrap: wrap;padding: 15px;align-items: center;justify-content: center;color: rgba(0, 0, 0, .8);border: 1px solid rgba(0, 0, 0, .1);}
.about .right .bt a i{font-size: 32px;color: rgba(0, 0, 0, .6);margin-right: 15px;}
.about .right .bt a:last-child{margin-right: 0;}
.about .right .bt a h3{font-size: 20px;font-weight: 600;}
.about .right .bt a h3 span{font-size: 14px;color: rgba(0, 0, 0, 0.4);}

.about .right .bt a:hover{background-color: #006AAD;border-color: #006AAD;color: #fff;}
.about .right .bt a:hover i{color: rgba(255, 255, 255, .7);}
.about .right .bt a:hover h3{color: #fff;}
.about .right .bt a:hover h3 span{color: rgba(255, 255, 255, .7);}

.about .right .company_adv{width: 100%;display: flex;}
.about .right .company_adv .li{flex-grow: 1;border-left: 1px solid rgba(0, 0, 0, .1);padding: 17px 0;text-align: center;}
.about .right .company_adv .li:last-child{border-right: 1px solid rgba(0, 0, 0, .1);}
.about .right .company_adv .li h3{font-size: 16px;width: 100%;margin-bottom: 5px;color: #006AAD;font-weight: 300;}
.about .right .company_adv .li h3 span{font-size: 40px;font-weight: 600;color: #006AAD;}
.about .right .company_adv .li h3 b{font-size: 48px;margin: 0 5px;color: #006AAD;}
.about .right a.more{margin-top: 50px;margin-left: auto;background-color: #006AAD;color: #fff;}

.cooperate{padding: 0;background-color: #f9f9f9;}
.cooperate .img{position: relative;width: 100%;padding-top: 60%;}
.cooperate .img img{width: 60%;height: 80%;position: absolute;left: 50%;top: 50%;object-fit: contain;transform: translate(-50%,-50%);}



/* case */
.cate{padding: 75px 15px;background-size: 58%;background-position: right top;background-repeat: no-repeat;}
.cate .top{width: 100%;display: flex;flex-wrap: wrap;margin-bottom: 100px;}
.cate .top .tit-1{width: 50%;}
.cate .top .tel{width: 50%;padding-left: 5%;}
.cate .top .tel p{color: #fff;font-size: 24px;display: flex;font-weight: 600;align-items: center;}
.cate .top .tel p i{font-size: 32px;margin-right: 5px;color: #fff;}
.cate .top .tel p:first-child{font-size: 32px;}

.cate .txt{line-height: 60px;background-color: #f9f9f9;padding: 0 10px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 17px;font-weight: 600;}
.cate .txt::before{display: inline-block;content: '';width: 8px;height: 8px;background-color: #006AAD;margin: 0 10px;}
.cate .img{width: 100%;position: relative;padding-top: 70%;margin-bottom: 20px;overflow: hidden;}
.cate .img img{width: 100%;height: 100%;object-fit: cover;left: 0;top: 0;position: absolute;}
.cate a:hover img{width: 105%;}

.cate .bt{display: flex;justify-content: center;margin-top: 40px;}
.cate .bt a{color: #fff;margin-right: 30px;}
.cate .bt a i{color: #fff;}
.cate .bt a:first-child{background-color: rgba(0, 0, 0, .8);}
.cate .bt a:last-child{background-color: #006AAD;margin-right: 0;}


/* adv */
.adv{padding: 70px 15px;background-size: cover;background-position: right top;background-repeat: no-repeat;}
.adv .tit-1 h4{color: #fff;}
.adv .tit-1 h4 span::before{background-color: #fff;}
.adv .ul{width: 100%;display: flex;flex-wrap: wrap;}
.adv .ul .li{width: calc(50% - 10px);margin-right: 20px;background-color: #fff;margin-top: 20px;display: flex;flex-wrap: wrap;}
.adv .ul .li:nth-child(2n){margin-right: 0;}
.adv .ul .li .txt{padding: 20px;}
.adv .ul .li .txt h3{font-size: 20px;font-weight: 600;margin-top: 10px;line-height: 35px;color: #006AAD;text-align: center;}
.adv .ul .li .txt span{font-size: 14px;color: rgba(0, 0, 0, 0.4);margin-bottom: 20px;text-align: center;display: block;}
.adv .ul .li .txt p{line-height: 35px;font-size: 16px;}
.adv .ul .li .img{width: 100%;position: relative;padding-top: 50%;max-height: 280px;margin-top: auto;overflow: hidden;}
.adv .ul .li .img img{width: 100%;height: 100%;position: absolute;object-fit: cover;left: 0;top: 0;}
.adv .ul .li:hover{transform: translateY(-3px);}
.adv .ul .li:hover img{width: 103%;}

/* cate2 */
.cate2{background-color: #fff;display: flex;flex-wrap: wrap;padding: 0;}
.cate2 .left{width: 50%;background-size: cover;display: flex;padding: 70px 0;}
.cate2 .left .tit-1 h4{color: #fff;}
.cate2 .left .tit-1 h4 span{color: #fff;}
.cate2 .left .tit-1 h4 span::before{background-color: #fff;}
.cate2 .left .tit-1 i{color: #fff;}
.cate2 .left .tit-1 i::after,.cate2 .left .tit-1 i::before{background-color: #fff;}
.cate2 .left .tit-1 p{color: #fff;}
.cate2 .left .tit-1 b{color: rgba(255, 255, 255, .1);}
.cate2 .left .info{width: 100%;max-width: 700px;margin-left: auto;}
.cate2 .left .info .ul{width: 100%;margin: 30px 0 0;}
.cate2 .left .info .ul p{line-height: 40px;font-size: 17px;font-weight: 600;color: #fff;text-align: center;}
.cate2 .left .more{color: #fff;margin: 0 auto;margin-top: 25px;}
.cate2 .left .more i{color: #fff;}
.cate2 .right{width: 50%;}
.cate2 .right .ul{display: flex;width: 100%;flex-wrap: wrap;max-width: 700px;margin-right: auto;height: 100%;}
.cate2 .right .img{width: 50%;position: relative;background-color: #fff;height: 50%;}
.cate2 .right .img img{width: 80%;height: 80%;position: absolute;left: 50%;top: 50%;object-fit: contain;transform: translate(-50%,-50%);}
.cate2 .right .img:hover img{width: 90%;height: 90%;}

/* news */
.news{padding: 70px 15px;background-size: contain;background-position: center;background-repeat: no-repeat;}
.news .topping{margin: 50px 0 45px;display: flex;}
.news .topping a{display: flex;width: 100%;flex-wrap: wrap;}
.news .topping .img{width: 50%;position: relative;height: 100%;}
.news .topping .img img{width: 100%;height: 100%;object-fit: cover;position: absolute;}
.news .topping .txt{width: 50%;padding: 15px 30px;}
.news .topping .txt h3{font-size: 24px;line-height: 35px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;margin-bottom: 30px;}
.news .topping .txt p{line-height: 35px;font-size: 16px;margin-bottom: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.news .topping .txt span{background-color: #fff;border-color: rgba(0, 0, 0, .3);}
.news .bt{display: flex;width: 100%;}
.news .bt span{flex-grow: 1;max-width: 120px;margin-right: 30px;font-size: 17px;font-weight: 600;text-align: center;display: flex;align-items: center;line-height: 45px;border-bottom: 2px solid rgba(0, 0, 0, .1);justify-content: center;cursor: pointer;}
.news .bt span.active{color: #006AAD;border-color: #006AAD;}
.news .bt span::before{content: '';display: inline-block;width: 8px;height: 8px;background-color: #006AAD;margin-right: 6px;}

.news .swiper-area{margin-top: 40px;}
.news .swiper a{display: flex;width: 100%;flex-wrap: wrap;padding: 30px;background-color: #ebebeb;}
.news .swiper a b{font-size: 14px;color: #006AAD;margin-bottom: 20px;font-weight: 600;width: 100%;}
.news .swiper a h3{font-size: 17px;font-weight: 600;line-height: 35px;height: 70px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-bottom: 25px;width: 100%;}
.news .swiper a p{font-size: 16px;line-height: 35px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;margin-bottom: 45px;width: 100%;}
.news .swiper a span{margin-left: auto;color: #006AAD;border-color: #006AAD;width: 90%;line-height: 30px;max-width: 125px;}
.news .swiper a span i{color: #006AAD;}

.news .topping a:hover .txt span{color: #fff;background-color: #006AAD;border-color: #006AAD;}
.news .topping a:hover .txt span i{color: #fff;}
.news .swiper a:hover{background-color: #006AAD;}
.news .swiper a:hover b{color: rgba(255, 255, 255, .7);}
.news .swiper a:hover h3{color: #fff;}
.news .swiper a:hover p{color: rgba(255, 255, 255, .7);}
.news .swiper a:hover span{color: rgba(255, 255, 255, .7);border-color: rgba(255, 255, 255, .7);}
.news .swiper a:hover span i{color: rgba(255, 255, 255, .7);}


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

}
@media screen and (min-width: 0px) and (max-width:1400px){
    .cate .top .tit-1{text-align: left;}
    .cate .top .tit-1 i{justify-content: left;}
    .cate .top .tit-1 b{left: 0;transform: translateX(0);}
    .cate .top .tel p:first-child{font-size: 28px;}
    .cate .top .tel p{font-size: 22px;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
    .product .product-ul a .content .txt p{font-size: 15px;}
    .about .right .bt a h3{font-size: 17px;}
    .about .right .company_adv .li h3 span{font-size: 36px;}

    .cate{background-size: 70%;}
    .cate .top .tit-1{width: 40%;}
    .cate .top .tel{width: 60%;}

    .adv .ul .li .txt p{font-size: 15px;}
    .adv .ul .li .txt h3{font-size: 18px;}

    .news .topping .txt h3{font-size: 22px;}
    .news .swiper a p{font-size: 15px;}
}
@media screen and (min-width: 0px) and (max-width:1024px){
    .txt-swiper .swiper-slide img.h-info{display: none;}
    .txt-swiper .swiper-slide img.m-info{display: block;}
}
@media screen and (min-width: 0px) and (max-width:992px){
    /* .banner{height: calc(100vh - 70px);} */

    .product .product-ul a{margin-bottom: 15px;}

    .about{padding: 0 0;}
    .about .left{display: none;}
    .about .right{width: 100%;max-width: none;margin: 0 auto;padding: 60px 30px;background-color: rgba(255,255,255,.8);}

    .cate .top .tel p:first-child{font-size: 26px;}
    .cate .top .tel p{font-size: 18px;}
}

@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;} */
    
    .area.product{padding-top: 35px;}
    .product .procate a{font-weight: 300;font-size: 15px;line-height: 35px;}
    .product .product-ul a .content{padding-top: 45px;}
    .product .product-ul a .content .txt p{-webkit-line-clamp: 3;}
    .product .product-ul .tit{line-height: 55px;}

    .about .right .content{font-size: 16px;}

    .cate{background-size: 140%;padding: 55px 15px;}
    .cate .top .tel p:first-child{font-size: 22px;}
    .cate .top .tit-1{text-align: center;width: 100%;}
    .cate .top .tit-1 h4,.cate .top .tit-1 h4 span{color: #fff;}
    .cate .top .tit-1 h4 span::before{background-color: #fff;}
    .cate .top .tit-1 i{justify-content: center;color: #fff;}
    .cate .top .tit-1 i::after,.cate .top .tit-1 i::before{background-color: #fff;}
    .cate .top .tit-1 b{left: 50%;transform: translateX(-50%);color: rgba(255,255,255,.08);}
    .cate .top .tel{width: 100%;}
    .cate .top{margin-bottom: 35px;}

    .adv .ul .li{width: calc(50% - 7.5px);margin-right: 15px;}

    .cate2 .left{width: 100%;padding: 55px 0 35px;}
    .cate2 .right{width: 100%;}
    .cate2 .right .img{height: auto;padding-top: 35%;}

    .news .topping .img{width: 100%;height: auto;}
    .news .topping .txt{width: 100%;padding: 15px 0;}
    .news .topping .txt h3{margin-bottom: 10px;}
    .news .topping .txt p{margin-bottom: 15px;}
}
@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;}

    .adv .ul .li{width: 100%;margin-right: 0;}
    .adv .ul .li .txt p{font-size: 14px;}
    .adv .ul .li .txt h3{font-size: 17px;}
    .adv{padding: 55px 15px;}
}

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

}
@media screen and (min-width: 0px) and (max-width:440px){
    .product .product-ul .tit{font-size: 15px;font-weight: 300;}
    .product .product-ul a .content .txt p{-webkit-line-clamp: 2;font-size: 14px;line-height: 30px;}
    .product .procate a{font-size: 14px;line-height: 30px;}
    .product .product-ul a .content{padding-top: 30px;}
    .product .product-ul a .content .txt span{margin-top: 5px;font-size: 13px;line-height: 25px;}
    .product .product-ul{margin-bottom: 20px;}
    

    .about .right{padding: 40px 15px;}
    .about .right .bt a{margin-right: 10px;}
    .about .right .bt a h3{font-size: 15px;font-weight: 300;}
    .about .right .content{font-size: 15px;}
    .about .right .company_adv .li h3 span{font-size: 28px;}
    .about .right .company_adv .li h3 b{font-size: 28px;}
    .about .right .bt{margin-bottom: 30px;}
    .about .right a.more{margin-top: 30px;}

    .cate{padding-bottom: 35px;}
    .cate .top .tel{padding-left: 0;}
    .cate .top .tel p:first-child{font-size: 19px;margin-bottom: 10px;justify-content: center;font-weight: 600;}
    .cate .top .tel p i{font-size: 22px;}
    .cate .top .tel p{font-size: 16px;font-weight: 300;}
    .cate .txt{line-height: 45px;font-size: 15px;font-weight: 300;}
    .cate .img{margin-bottom: 15px;}
    .cate .bt{margin-top: 20px;}

    .news{padding: 50px 15px 35px;}
    .news .swiper a{padding: 15px;}
    .news .topping{margin: 30px 0 10px;}
    .news .swiper-area{margin-top: 20px;}
    .news .topping .txt p{font-size: 15px;}
    .news .swiper a b{margin-bottom: 10px;}
    .news .swiper a h3{margin-bottom: 10px;-webkit-line-clamp: 1;height: 35px;}
    .news .swiper a p{font-size: 14px;line-height: 30px;margin-bottom: 15px;-webkit-line-clamp: 3;}
}

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