/* load */
#loading{position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;background-color: #fff;z-index: 999999;}
#loading img{position: absolute;width: 20%;max-width: 55px;left: 50%;top: 50%;transform: translate(-50%,-50%);animation: load_img 5s linear infinite;}
@keyframes load_img {
    0%{
        transform: translate(-50%,-50%) rotateX(0deg);
    }
    75%{
        transform: translate(-50%,-50%) rotateX(360deg);
    }
    100%{
        transform: translate(-50%,-50%) rotateX(360deg);
    }
}
/* banner */
.banner{width: 100%;height: calc(100vh - 220px);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%;padding: 0 15px;}
.txt-swiper .swiper-slide .ib-bg .info{position: absolute;color: #fff;left: 0;top: 40%;transform: translateY(-50%);padding-left: 15px;}
.txt-swiper .swiper-slide .ib-bg .info h3{font-size: 34px;font-weight: bold;margin-bottom: 10px;letter-spacing: 2px;}
.txt-swiper .swiper-slide .ib-bg .info h4{font-size: 28px;display: inline-block;max-width: 500px;line-height: 35px;}
.img-swiper .swiper-slide img.m-img{display: none;}

.hot-pro{max-width: 1400px;margin: 0 auto;transform: translateY(-50%);position: relative;z-index: 5;}
.hot-pro .li{width: 14%;background-color: rgba(6, 53, 115, 1);float: left;color: #fff;text-align: center;}
.hot-pro .li:first-child{width: 16%;background-color: rgba(235, 92, 32, 1);}
.hot-pro .li h3{font-size: 22px;margin-top: 20px;line-height: 30px;}
.hot-pro .li p{font-size: 17px;margin: 15px 25px;line-height: 30px;}
.hot-pro .li img{height: 30px;margin-top: 20px;}


/*  */
.adv-about{margin-bottom: 5%;}
.adv-about .tit{text-align: center;color: rgba(6, 53, 115, 1);}
.adv-about .tit h2{font-size: 44px;font-weight: bold;}
.adv-about .tit span{font-size: 15px;display: inline-block;width: 100%;line-height: 25px;margin-bottom: 30px;font-weight: bold;}
.adv-about #abSwiper{}
.adv-about #abSwiper li .info{border: 1px solid #e6e6e6;color: #333;}
.adv-about #abSwiper li .info img{width: 100%;height: 320px;object-fit: cover;}
.adv-about #abSwiper li .info h3{padding: 25px 0;text-align: center;margin: 0 15px;display: inline-block;width: calc(100% - 30px);border-bottom: 1px solid #b6b6b6;}
.adv-about #abSwiper li .info h3 b{font-size: 40px;line-height: 40px;font-weight: bold;color: rgba(6, 53, 115, 1);}
.adv-about #abSwiper li .info h3 span{font-size: 22px;}
.adv-about #abSwiper li .info p{padding: 10px 15px;display: inline-block;width: 100%;line-height: 25px;min-height: 120px;font-size: 14px;}


/*  */
.case.area{padding: 0 15px 6%;background-color: #f3f3f3;position: relative;}
.case .tit{text-align: center;margin: 4% 0;}
.case .tit h2{display: inline-block;font-size: 24px;font-weight: bold;color: #fff;padding: 15px 40px 15px 85px;background-color: rgba(6, 53, 115, 1);position: relative;}
.case .tit h2::after{content: '';position: absolute;display: inline-block;width: 45px;height: 87px;background-image: url(../images/tit-ico.png);left: 0;top: 50%;transform: translateY(-50%);background-size: contain;background-repeat: no-repeat;}
.case #caseSwiper{position: relative;}
.case #caseSwiper .info{}
.case #caseSwiper .info .img{position: relative;padding-top: 75%;overflow: hidden;}
.case #caseSwiper .info .img img{position: absolute;width: 100%;height: 100%;object-fit: cover;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.case #caseSwiper .info p{display: inline-block;line-height: 50px;text-align: center;background-color: #fff;font-size: 15px;width: 100%;color: #333;}
.case .switch{position: absolute;top: 50%;left: 50%;transform: translateX(-50%);width: 100%;max-width: 1550px;z-index: 2;}
.case .switch .swiper-button-next,.case .switch .swiper-button-prev{color: #fff;background-color: rgba(0, 0, 0, 0.5);width: 44px;height: 44px;}
.case .swiper-button-next:after,.case .swiper-button-prev:after{font-size: 18px;}


/* product */
.product.area{padding: 0;background-color: #f3f3f3;}
.product .tit{text-align: center;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.product .tit h2{display: inline-block;font-size: 24px;font-weight: bold;color: #fff;padding: 15px 40px 15px 85px;background-color: rgba(6, 53, 115, 1);position: relative;white-space: nowrap;}
.product .tit h2::after{content: '';position: absolute;display: inline-block;width: 45px;height: 87px;background-image: url(../images/tit-ico.png);left: 0;top: 50%;transform: translateY(-50%);background-size: contain;background-repeat: no-repeat;}
.product .ul{width: 100%;transform: translateY(-3px);float: left;}
.product .ul .li{width: calc(25% - 6px);float: left;margin: 3px;background-color: #e6e6e6;text-align: center;height: 200px;position: relative;}
.product .ul .li a{width: 100%;display: inline-block;height: 100%;filter: grayscale(1);transition: all 0.3s;}
.product .ul .li a:hover{filter: grayscale(0);}
.product .ul .li:nth-child(2){width: calc(50% - 6px);}
.product .ul .li .img{position: relative;overflow: hidden;height: calc(100% - 45px);}
.product .ul .li .img img{width: 90%;height: 90%;object-fit: contain;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.product .ul .li p{display: inline-block;padding:  0 20px;background-color: rgba(235, 92, 32, 1);color: #fff;margin: 10px 0;line-height: 25px;font-size: 14px;border-radius: 25px;}



/* adv */
.adv.area{background-color: #f3f3f3;}
.adv.area .n-area{padding: 4% 0 5%;}
.adv .tit{text-align: center;margin-bottom: 20px;}
.adv .tit h2{font-size: 44px;color: rgba(6, 53, 115, 1);font-weight: bold;position: relative;z-index: 2;}
.adv .tit h2::after{content: 'Five core competencies';display: inline-block;text-transform: uppercase;font-size:44px;font-family: fantasy;color: #e4e4e4;position: absolute;left: 50%;top: 0;transform: translate(-50%,-50%);z-index: -1;white-space: nowrap;}
.adv .tit h2 span{font-size: 13px;color: #b6b6b6;font-weight: normal;position: relative;display: inline-block;width: 100%;margin-top: 10px;}
.adv .tit h2 span::after{content: '';display: inline-block;width: 40px;height: 5px;background-color: rgba(6, 53, 115, 1);position: absolute;left: 50%;transform: translateX(-50%);top: -17px;}
.adv .ul{background-color: #fff;background-image: url(../images/adv-bg.jpg);background-size: cover;position: relative;width: 100%;height: 460px;float: left;}
.adv .ul::before{position: absolute;height: 140px;width: 100%;left: 0;bottom: 0;background-color: #fff;content: '';}
.adv .ul .li{position: relative;height: 100%;border-right: 1px solid #d2d2d2;border-bottom: 1px solid #d2d2d2;width: 15%;float: left;}
.adv .ul .li:last-child{border-right: 0;}
.adv .ul .li .info{position: absolute;left: 0;bottom: 0;height: 140px;background-color: rgba(6, 53, 115, 0);padding: 0 15px;width: 100%;}
.adv .ul .li .info .content{height: 80px;width: 100%;padding: 15px 0;}
.adv .ul .li .info .content h3{height: 25px;line-height: 25px;font-size: 17px;}
.adv .ul .li .info .content h3 b{display: inline-block;overflow: hidden;width: 0;font-size: 10px;font-family: fantasy;vertical-align: bottom;font-weight: normal;color: #fff;}
.adv .ul .li .info .content h4{height: 25px;line-height: 25px;font-size: 14px;color: #b6b6b6;text-transform: uppercase;}
.adv .ul .li .info .content p{font-size: 14px;line-height: 25px;transform-origin: top;transform: rotateX(90deg);}
.adv .ul .li .info a{display: block;height: 60px;width: 100%;position: relative;}
.adv .ul .li .info a span{position: absolute;left: 0;top: 0;}
.adv .ul .li .info a span:first-child{display: block;width: 26px;line-height: 24px;border: 1px solid #b6b6b6;text-align: center;color: #b6b6b6;font-size: 14px;border-radius: 50%;margin-top: 10px;}
.adv .ul .li .info a span:last-child{display: block;line-height: 40px;padding: 0 40px;font-size: 14px;border: 1px solid #b6b6b6;text-align: center;color: #b6b6b6;max-width: 160px;transform: perspective(1000px) rotateX(90deg);border-radius: 20px;}


.adv .ul .li.active{width: 40%;}
.adv .ul .li.active .info{height: 459px;background-color: rgba(6, 53, 115, 0.8);padding: 15px 40px;}
.adv .ul .li.active .info .content h3,.adv .ul .li.active .info .content h4,.adv .ul .li.active .info .content p,.adv .ul .li.active .info a span{color: #fff;border-color: #fff;}
.adv .ul .li.active .info .content{height: 215px;}
.adv .ul .li.active .info .content h3{font-size: 22px;font-weight: bold;height: 90px;line-height: 90px;}
.adv .ul .li.active .info .content h3 b{width: 65px;font-size: 44px;}
.adv .ul .li.active .info .content h4{overflow: hidden;height: 0;}
.adv .ul .li.active .info .content p{transform: rotateX(0deg);}
.adv .ul .li.active .info a span:first-child{transform: perspective(1000px) rotateX(90deg);}
.adv .ul .li.active .info a span:last-child{transform: perspective(1000px) rotateX(0deg);}


/* about */
.about.area{padding: 0;background-image: url(../images/adv-bg.jpg);background-size: cover;position: relative;margin-bottom: 5%;}
.about.area::before{content: '';position: absolute;display: inline-block;width: 100%;height: 100%;left: 0;top: 0;background-color: rgba(6, 53, 115, 0.7);}
.about.area::after{content: '';position: absolute;display: inline-block;width: 100%;height: 145px;left: 0;bottom: 0;z-index: 2;background-color: #fff;}

.about .n-area{padding: 0 15px;max-width: 1430px;}
.about .content{font-size: 15px;color: #fff;line-height: 35px;margin: 5% auto;width: 100%;max-width: 1000px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.about .honor{padding: 5% 0 4%;position: relative;z-index: 3;background-color: #fff;box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);margin-bottom: 15px;}
.about .honor .li{width: 20%;float: left;text-align: center;}
.about .honor .li:first-child{width: 25%;}
.about .honor .li:nth-child(4){width: 35%;}

.about .honor .li .tit{color: rgba(235, 92, 32, 1);display: inline-block;margin-bottom: 15px;position: relative;}
.about .honor .li .tit::before,.about .honor .li .tit::after{content: '';display: inline-block;position: absolute;width: 30px;height: 45px;background-image: url(../images/hon-ico.png);right: 100%;background-size: contain;top: 50%;transform: translateY(-50%);background-repeat: no-repeat;}
.about .honor .li .tit::after{right: auto;left: 100%;transform: translateY(-50%) rotateY(180deg);}
.about .honor .li .tit span{font-size: 15px;padding: 3px 0;}
.about .honor .li .tit p{font-size: 17px;font-weight: bold;position: relative;padding: 3px 0;}
.about .honor .li .tit p::before{content: '';display: inline-block;position: absolute;width: 100%;height: 2px;background-color: rgba(235, 92, 32, 1);top: 0;left: 50%;transform: translate(-50%,-1px);}
.about .honor .li .img{position: relative;height: 185px;}
.about .honor .li .img img{position: absolute;width: 90%;height: 100%;object-fit: contain;left: 50%;top: 50%;transform: translate(-50%,-50%);}




@media screen and (min-width: 0px) and (max-width:1400px){
    .hot-pro .li p{font-size: 17px;}
    .adv-about .tit h2,.adv .tit h2{font-size: 38px;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
    .hot-pro .li p{font-size: 16px;}
    .adv-about .tit h2,.adv .tit h2{font-size: 34px;}
}
@media screen and (min-width: 0px) and (max-width:1100px){

}
@media screen and (min-width: 0px) and (max-width:992px){
    .hot-pro .li p{font-size: 14px;}
    .adv-about #abSwiper li .info p{font-size: 13px;}
    .case .tit h2,.product .tit h2{font-size: 21px;}
    .product .ul .li p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;max-width: 85%;margin: 10px 7.5%;}
    .adv-about .tit h2, .adv .tit h2{font-size: 30px;}
    .adv .ul .li .info .content h3{font-size: 15px;}
    .adv .ul .li .info .content h4{font-size: 12px;}
    .about .content{font-size: 14px;}
    .about .honor .li .tit span{font-size: 14px;}
    .about .honor .li .tit p{font-size: 15px;font-weight: normal;}
    .about .honor .li{width: 40%;margin-bottom: 10px;}
    .about .honor .li:first-child{width: 60%;}
    .about .honor .li:nth-child(4){width: 60%;}
}
@media screen and (min-width: 0px) and (max-width:768px){
    .hot-pro{transform: translateY(0);}
    .hot-pro .li p{font-size: 16px;}
    .adv-about.area{margin: 0;padding: 30px 15px;}
    .case .tit{margin: 30px 0;}
    .case.area{padding-bottom: 30px;}
    .hot-pro .li:first-child{display: none;}
    .hot-pro .li:first-child,.hot-pro .li{width: 33.333333%;}
    .txt-swiper .swiper-slide .ib-bg .info h3{font-size: 30px;}
    .txt-swiper .swiper-slide .ib-bg .info h4{font-size: 13px;}

    .product .ul .li:nth-child(1){display: none;}
    .product .ul .li:nth-child(2){width: calc(100% - 6px);height: 130px;}
    .product .ul .li{width: calc(33.333333% - 6px);height: 170px;}

    .adv.area .n-area{padding: 40px 0 30px;}
    .adv .ul::before{display: none;}
    .adv .ul .li{width: 13%;}
    .adv .ul .li.active{width: 48%;}
    .adv .ul .li .info{height: 459px;width: 45px;}
    .adv .ul .li.active .info{width: 100%;}
    .adv .ul .li .info .content h3{color: #fff;height: auto;}
    .adv .ul .li .info .content h4{display: none;}
    .adv .ul .li .info .content{height: auto;}
    .adv .ul .li.active .info .content{height: auto;}
    .adv .ul .li .info a span:first-child{color: #fff;border-color: #fff;}
    .adv .ul .li .info .content p{font-size: 13px;}
    .adv .ul .li.active .info{padding: 15px;}
}
@media screen and (min-width: 0px) and (max-width:550px){
    .adv .ul .li.active .info .content h3 b{width: 40px;font-size: 32px;}
    .adv .ul .li.active .info .content h3{font-size: 18px;}
    .adv .ul .li .info a span:last-child{padding: 0 20px;}
    .about .honor .li{width: 50%;}
    .about .honor .li:first-child{width: 100%;}
    .about .honor .li:nth-child(4){width: 100%;margin-bottom: 0;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .txt-swiper .swiper-slide .ib-bg .info h3{font-size: 22px;}
    .hot-pro .li p{margin: 10px;font-size: 13px;}
    .hot-pro .li h3{font-size: 19px;}
    .case .tit h2, .product .tit h2{font-size: 19px;}
    .adv .ul .li.active .info .content h3 b{display: none;}
    .adv .ul .li.active .info .content h3{height: 70px;line-height: 50px;}
    .adv.area .n-area{width: auto;margin-left: -15px;margin-right: -15px;}
    .adv-about .tit h2, .adv .tit h2{font-size: 26px;}
    .adv .tit h2 span::after{top: -10px;}
    .adv .tit h2::after{font-size: 32px;}
    .adv .ul .li .info .content p{line-height: 30px;}
    .about .honor .li .img{height: 150px;}
    .about .honor .li .tit p{font-size: 13px;}
    .about .honor .li .tit{margin-bottom: 0;}
}
@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);
    }
}