/*---wrap-title-*/
.wrap-title{margin: 70px auto;text-align:center;overflow:hidden;animation:fadeinT 1s;}
.wrap-title h2{font-size:40px;line-height:1.25;font-weight:normal;color:#333;}
.wrap-title h2 span { font-weight: bold;}
.wrap-title h2 a{font-size: 48px; color:#333;}
.wrap-title p { margin-top: 10px; padding: 0 15px;font-size: 24px; color: #333;}
/*---end wrap-title-*/
.new-product{margin-bottom:50px; position:relative;overflow:hidden;flex-wrap: wrap;background-color:#fff;}
.new-product .box{padding:0;width: 25%;border: 1px solid #e5e2e2;box-sizing: border-box;}
.new-product .box .item{display:block;position: relative;}
.new-product .box .item .header{position:relative}
.new-product .blk{-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;overflow:hidden;position:relative;height:0;width:100%;padding-bottom:100%}
.new-product .blk .square-cont{position:absolute;width:100%;height:100%}
.new-product .blk .cover-image>span{position:relative;width:100%;height:100%;display:block;text-align:center}
.new-product .blk .cover-image>span>img{display:inline-block;padding: 13%; width:74%;max-height:initial;max-width:100%;max-height:100%;overflow:hidden;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;border:none;}
.new-product .intro{width:100%;height:100%;line-height:1;display:block;text-align:center;transition:all .5s;position:absolute;opacity:0;z-index:1;top:0;left:0;font-size:0;background-color:rgba(0, 0, 0, 0.6);background-image:radial-gradient(rgba(0, 0, 0,0)),rgba(0, 0, 0,.5);overflow: hidden;}
.new-product .intro{color:#f5f5f5;width:100%;}
.new-product .intro .title{padding:15%; text-align:center;font-size:18px;}
.new-product .intro .features{padding:0px 15%;font-size:16px;height: 125px; line-height: 25px;text-align: left; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5; overflow: hidden; }
.new-product .adorn{display:block;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:7}
.new-product .adorn span{width:100%;height:100%;position:absolute;top:0;left:0;display:block}
.new-product .adorn span:after,.new-product .adorn span:before{content:"";display:block;position:absolute;width:0;height:1px;opacity:0;background-color:#595454;transition:all .5s ease .2s;top:50%;left:50%}
.new-product .adorn>span:first-child{transform:rotate(45deg)}
.new-product .adorn>span:last-child{transform:rotate(-45deg)}
.new-product .item:hover .cover-image img{transform:scale(1.1)}
.new-product .item:hover .intro{opacity:1}
.new-product .item:hover .adorn>span:before{width:100%;opacity:1;left:-90%}
.new-product .item:hover .adorn>span:after{width:100%;opacity:1;left:90%}
.new-product .footer{padding: 20px; text-align: center;}
.new-product .footer .title{font-size: 18px; color:#333;white-space: nowrap;}
.new-product .footer .more{font-size:14px;color:#b2b2b2;}
.new-product .item:hover .footer{color:#003198;}
/* about start */
.about{background: url('../images/index/about_bg.jpg') no-repeat top right; width: 100%;}
.about .left{padding:60px 2% 100px 7%; width:33%; background-color: rgba(255, 255, 255, 0.6);}
.about .company{font-size: 36px;color: #232323;}
.about .title{font-size: 48px;color: #232323;font-weight: 600;}
.about .intro{margin-top:35px;font-size: 18px;color: #5b5b5b;line-height: 30px;}
.about .more{margin-top:45px;}
.about .more a{display:inline-block;padding:10px 20px; font-size: 18px;color: #fcfcfc;background-color:#486bb4;border-radius: 10px;}
.about .more a span{margin-left: 10px; display:inline-block;width:21px;height:13px; background: url("../images/index/more_icon.png") no-repeat center;}
.about .right{width: 58%;}
.video-btn-box{position: relative; margin: 36% 0 27% 32%; width: 212px;height: 212px;border-radius: 20px;background-color:rgba(0, 0, 0, 0.5); text-align: center;overflow: hidden;cursor: pointer;}
.video-icon-box{position: relative; margin:23px auto 0; width: 102px;height: 102px;border-radius: 51px;background-color:#566fa2;z-index: 9;}
.flash{position: absolute;top:23px; left:55px; width: 102px;height: 102px;z-index: 1;}
.flash:after{content:'';position:absolute;top:calc(50%);left:calc(50%);width:100%;height:100%;border-radius:50%;background:rgba(81,172,251,.4);opacity:.5;-webkit-animation:1.4s ease-out infinite pulse;animation:1.4s ease-out infinite pulse;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:.3s;pointer-events:none}
.video-icon-box img{padding: 27px 31px 27px 31px; display: block;}
.about .right .desc{color:#fcfcfc;}
.about .right .h4{margin-top:5px; line-height: 30px; font-size:24px;}
.about .right .h5{margin-top:5px;line-height: 25px;font-size:16px;}
/* about  end */
/* product */
.product { padding:0px; overflow: hidden; background: #fff;}
.product-list{position: relative;margin:50px 0 0 0; border:1px solid #e5e2e2;}
.product .product-slide { position: relative; margin:0px auto; width: 90%; overflow: hidden;}
.product .product-slide .swiper-slide { padding: 50px 0;  border-right: 1px solid #e5e2e2;}
.product .product-slide .pic { display: block; width: 100%; overflow: hidden;}
.product .product-slide .pic img { transition: all 1s;width: 74%;padding: 13%;border:none;}
.product .product-slide .text { position: relative; z-index: 2; margin-top:-65px; height: 65px; text-align: center;}
.product .product-slide .text p { font-size: 18px; color: #333;}
.product .product-slide .text span { display: block; margin-top: 5px; font-size: 14px; color: #b2b2b2;}
.product .product-slide .swiper-slide:hover img { transform: scale(1.1);}
.product .product-slide .swiper-slide:hover .text * { color: #02319b !important;}
.product-list .prev,.product-list .next { cursor: pointer; position: absolute; top: 50%; width: 35px; height: 35px; line-height: 35px; text-align: center; font-size: 16px; border-radius:50%; background-color: #003198; z-index: 2;}
.product-list .prev { left: 30px;}
.product-list .next { right: 30px;}
.product-list.prev:hover,.product-list .next:hover { background: #003198; color: #fff;}
.product-list .prev img,.product-list .next img{display: block; margin: 7px 0 0 7px; width: 20px;height: 20px;}
/* product  end */
/* news start */
.hot-news{margin:0 5% 50px;width: 90%;}
.hot-news .left{width:46%;margin-right:4%;}
.hot-news .left img{width: 100%;}
.hot-news .right{width: 50%;background-color: #fff;padding: 0px 35px;}
.hot-news-item{position: relative; padding: 40px 0; border-bottom: 1px solid #f2f2f2;}
.hot-news-item a{display: block;font-style:italic;}
.hot-news-item a .date{font-weight: 600; color:#181818;}
.hot-news-item a .date .log{font-size:36px;}
.hot-news-item a .date .small{font-size: 20px;}
.hot-news-item a .title{margin-top: 10px; font-size: 24px; font-weight: 600;color:#181818;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}
.hot-news-item a .desc{margin-top:10px; font-size: 16px;color:#909090;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.hot-news-item.active::after{position: absolute;left:0px; bottom: -2px; display: block; content: "";width: 20%;height: 4px;background-color:#003198;}
/* news  end */
@media (max-width:1800px) {
    .hot-news-item{padding: 30px 0;}
    .hot-news-item a .date .log{font-size: 22px;}
    .hot-news-item a .title{font-size: 18px;}
    .hot-news-item a .desc{height: 50px;line-height: 25px;overflow: hidden;}

}
@media (max-width:1600px) {
    .hot-news-item{padding: 20px 0;}
    .hot-news-item a .date .log{font-size: 20px;}
    .hot-news-item a .title{font-size: 18px;}
    .hot-news-item a .desc{height: 50px;line-height: 25px;overflow: hidden;}
    .about .company{font-size: 26px;}
    .about .title{font-size: 36px;}
    .about .intro{font-size: 18px;display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 15; overflow: hidden;}
}
@media (max-width:1440px) {
    .product .product-slide .text { margin-top:-40px;}
    /* about start */
    .about .left{width: 46%;padding: 40px 2% 30px 2%;}
    .about .right{width: 50%;}
    /* about end */
}
@media (max-width:1200px) {
    /* about start */
    .about .left{width: 50%;padding: 40px 2% 30px 2%;}
    .about .right{width: 46%;}
    /* about end */
    .wrap-title h2 a{ font-size: 26px;}
    .wrap-title p {margin-top: 5px;font-size: 16px;}
    .product { padding:0px;}
    .product-slide .prev { left: 10px;}
    .product-slide .next { right: 10px;}
    .product .product-slide .swiper-slide { padding: 20px 0;}
    .product .product-slide .text { margin-top: -20px;}
    .product .product-slide .text p { font-size: 16px;}
    .hot-news-item a .date{display: none;}
    .hot-news-item:last-child{ border-bottom:none;}
    .about .company{font-size: 22px;}
    .about .title{font-size: 32px;}
    .about .intro{font-size: 16px;display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 9; overflow: hidden;}
}
@media(max-width:980px){
    /* about start */
    .about .left{width: 54%;padding: 40px 2% 30px 2%;}
    .about .company{font-size: 20px;}
    .about .title{font-size: 24px;}
    .about .intro{font-size: 15px;}
    .about .more{margin-top: 20px;}
    .about .right{width: 42%;}
    /* about end */
    .hot-news-item a .desc{height: 40px;line-height: 20px;overflow: hidden;}

}
@media(max-width:768px){
    .hot-news .left{ width: 100%;height: 400px;}
    .hot-news .left img{ width: 100%;height: 400px; object-fit: cover;}
    .product{padding:0}
    .product .product-slide{width: 80%;}
    .product-list .prev {left: 5px;}
    .product-list .next {right: 5px;    }
    /* about start */
    .about{flex-direction: column;background: url('../images/index/m_about_bg.jpg') no-repeat top center; background-size:100% auto;}
    .about .left{width: 94%;padding: 40px 3% 30px 3%;}
    .about .company{font-size: 20px;}
    .about .title{font-size: 24px;}
    .about .intro{font-size: 15px;}
    .about .more{margin-top: 40px;}
    .about .more a{font-size: 16px;}
    .about .right{width: 100%;}
    .video-btn-box{margin:50px auto;}
    /* about end */
    .wrap-title {margin: 40px auto;}
    .wrap-title h2 a{font-size: 26px;}
    .wrap-title .desc {font-size: 18px;}
    .new-product .box {width: 50%;  }
    .hot-news{margin: 0 2%;width: 96%;}
    .hot-news-item{padding:20px 0;}
    .news-list{flex-direction: column;}
    .hot-news .left{ width: 100%;}
    .hot-news .right{width: 92%;padding:2% 4%;}
    .hot-news-item a .date{display: block;}
    .hot-news-item a .date .log{font-size:20px;}
    .hot-news-item a .date .small{font-size: 16px;}
    .hot-news-item a .title{margin-top: 8px; font-size: 20px; }
    .hot-news-item a .desc{margin-top:8px; font-size: 15px;}
    .new-product .item:hover .intro{display: none;}
}
@media(max-width:450px){
    .hot-news-item a .title {font-size: 18px;}
    .hot-news .left{ width: 100%;height: 250px;}
    .hot-news .left img{ width: 100%;height: 250px; object-fit: cover;}
    .hot-news-item a .desc{line-height: 20px;}
    .new-product .intro .features{height:75px; -webkit-line-clamp: 3;}
    .about .more a{padding: 6px 15px;}
    .about .intro{font-size: 15px;  word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4; overflow: hidden;}
    .new-product .footer .title{font-size: 16px;overflow: hidden;text-overflow: ellipsis;}
    .product .product-slide .swiper-slide{border:none;}
    .product .product-slide .text p{overflow: hidden;text-overflow: ellipsis;}
    .video-btn-box{margin:160px auto 160px; width: 120px;height: 120px;border-radius: 16px; }
    .video-icon-box{margin: 18px auto 0;width: 50px;height: 50px;border-radius: 40px;}
    .flash{top:18px; left:35px; width: 50px;height: 50px;}
    .video-icon-box img{padding: 12px 31px 27px 19px;width: 20px;height: 25px;}
    .about .right .h4{margin-top: 2px;line-height: 25px;font-size: 14px;}
    .about .right .h5{margin-top: 0px;line-height: 20px;font-size: 12px;}
}
@-webkit-keyframes pulse {
    from {
        width: 100%;
        height: 100%;
        opacity: .8;
    }
    50% {
        width: 140%;
        height: 140%;
        opacity: 0;
    }
    to {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}
@keyframes pulse {
    from {
        width: 100%;
        height: 100%;
        opacity: .8;
    }
    50% {
        width: 140%;
        height: 140%;
        opacity: 0;
    }
    to {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}