@charset "utf-8";
/* ===================首页样式========================== */
.com-tit{font-size: 38px;color: #333;letter-spacing: .02em;font-weight: 700;text-align: center}


/* banner */
.banner{height:100vh;overflow: hidden}
.banner .swiper-container,.banner-bg{height:100%;overflow: hidden}
.banner-bg-mb{display:none}
.banner-cont{position:absolute;width:100%;height:100%;left:0;top:0}
.banner-cont .contain{height:100%;display:flex;flex-direction:column;justify-content:center}
.banner-cont h1{font-size:42px;color:#fff}
/* .banner-cont h1 p:nth-child(2){font-weight:700} */
.banner-btn{margin-top:40px}
.banner .swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:30px;display:flex;justify-content:center;align-items:center}
.banner .swiper-pagination-bullet{border:2px solid #fff;background:0 0!important;width:10px;height:10px;position:relative;margin-right:120px!important;opacity:1}
.banner .swiper-pagination-bullet i{content:'';display:block;width:124px;height:1px;background:rgba(255,255,255,.3);position:absolute;left:8px;top:3px}
.banner .swiper-pagination-bullet-active{width:26px;height:26px;background:rgba(255,255,255,.4)!important;border:1px solid #fff}
.banner .swiper-pagination-bullet-active:after{content:'';border-radius:50%;border:2px solid #fff;width:10px;height:10px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.banner .swiper-pagination-bullet-active i{left:26px;top:12px}
.banner .swiper-pagination-bullet:last-child{margin-right:0!important}
.banner .swiper-pagination-bullet:last-child i{display:none}
.banner .swiper-pagination-bullet:before{content:"";position:absolute;top:12px;left:25px;background:#fff;width:0;height:1px;z-index:1;transition:0s}
.banner .swiper-pagination-bullet:last-child:before{display:none}
.banner .slideOntrue.swiper-pagination-bullet:before{width:125px;transition:4s linear}
.banner .banner-bg img{transform: matrix(1.0, 0, 0, 1.0, 0, 0);transition: all 0.4s ease 1.2s}
.banner .swiper-slide-active .banner-bg img{transition-delay: 0.4s !important;transform: matrix(1.1, 0, 0, 1.1, 0, 0);transition: all 5s ease}
.banner .swiper-slide-active h1 p:nth-child(1){animation: banLt 1.4s ease both}
.banner .swiper-slide-active h1 p:nth-child(2){animation: banRt 1.4s ease both}
@keyframes banLt{0%{transform: translateX(-280px);opacity: 0;}100%{transform: translateX(0);opacity: 1}}
@keyframes banRt{0%{transform: translateX(280px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}}


/* 产品中心 */
.product{padding:90px 0 110px;background:url(../images/index/product-bg.jpg) no-repeat center/cover}
.prod-cell{margin-top:40px}
.prod-cell h3{font-size:28px;color:#333;font-weight:700;letter-spacing:.04em;position:relative;padding-left:42px}
.prod-cell h3:after{content:'';width:26px;height:26px;border:1px solid #525252;position:absolute;left:0;top:4px;border-radius:50%}
.prod-cell h3:before{content:'';width:10px;height:10px;background:#818181;position:absolute;left:8px;top:12px;border-radius:50%}
.prod-list{display:flex;justify-content:space-between;margin-top:30px;flex-wrap:wrap}
.prod-list:after{content:'';width:24%}
.prod-item{width:32%;display:block}
.prod-cell-loop .prod-item{width: 100%;}
.prod-tit{background:#fff;border:1px solid #e7edf1;border-radius:5px;height:98px;line-height: 96px;display:block;text-align: center;font-size:24px;color:#333;padding: 0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.06em;transition: all .4s ease}
.prod-pic{background:#fff;border:1px solid #e7edf1;border-radius:5px;height:216px;display:flex;justify-content:center;font-size:24px;color:#333;align-items:center;margin-top:10px;transition: all .4s ease}
.prod-pic img{max-width:90%;max-height:90%;object-fit:cover;transition: all .6s ease-in-out}
.prod-item:hover .prod-tit,.prod-item:hover .prod-pic{border-color: #006fbc;color: #006fbc}
.prod-item:hover img{transform: scale(1.1)}
.product .swiper-wrapper{padding-bottom: 60px}
.product .swiper-pagination-bullet{width: 10px;height: 10px;background: transparent;border: 2px solid #aab3b8;opacity: 1;transition: all .4s ease}
.product .swiper-pagination-bullet-active{background: #e77817;border-color: #e77817}

/* 解决方案 */
.solution{padding-top:90px}
.solution-main{height:796px;margin-top:40px;position:relative}
.solution-bg{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;text-align:center;transition:all 2s cubic-bezier(.23,1,.32,1);background-repeat:no-repeat;background-size:cover;visibility:hidden;opacity:0}
.solution-bg.active{opacity:1;visibility:visible}
.solution-list{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;z-index:1}
.solution-item{width:25%;display:flex;flex-direction:column;justify-content:center;align-items:center;border-right:1px solid rgba(255,255,255,.15)}
.solution-item h3{color:#fff;font-size:26px;font-weight:700;letter-spacing:.08em}
.solution-item i{display:block;margin-top:45px;width:12px;height:12px;background:#fff;border-radius:50%;position:relative;transform:scale(0);transition:all .4s ease .4s}
.solution-item.active i{transform:scale(1)}
.solution-item i:after{content:'';position:absolute;left:-12px;top:-12px;width:36px;height:36px;border:1px solid #fff;border-radius:50%;animation:pulse 1s ease-out infinite;opacity:0}
.solution-item i:before{content:'';position:absolute;left:-21px;top:-21px;width:54px;height:54px;border:1px solid #fff;border-radius:50%;animation:pulse 1s ease-out infinite;opacity:0}
@keyframes pulse{0%{transform:scale(.1,.1);opacity:0}50%{opacity:1}100%{transform:scale(1.1,1.1);opacity:0}}

/* 新闻 */
.news{padding:80px 0 100px}
.news-main{margin-top:40px;display:flex;justify-content:space-between;height:456px}
.news-lft{width:48%;height:100%}
.news-lft .swiper-container{height:100%}
.news-lft a{display:block;height:100%}
.news-cont{position:absolute;left:0;top:0;width:100%;height:100%;padding:42px;color:#fff}
.news-lft-top{display:flex;align-items:center}
.news-cat{display:flex;align-items:center;justify-content:center;width:104px;height:36px;letter-spacing:.08em;border-radius:4px;background:#d2e5f1;color:#2687c7}
.news-lft-top .news-cat{background:rgba(255,255,255,.3);margin-right:10px;color:#fff}
.news-cont h3{font-size:18px;font-weight:700;letter-spacing:.04em;margin-top:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.news .swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:30px;display:flex;margin-left:42px}
.news .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 6px}
.news .swiper-pagination-bullet{width:10px;height:10px;background:0 0;border:2px solid #fff;opacity:1}
.news .swiper-pagination-bullet-active{background:#e77817;border-color:#e77817}
.news-mid{width:24%;height: 100%;background:#f1f6f9}
.news-mid-pic{height:222px;overflow:hidden}
.news-mid-txt{padding:38px 30px}
.news-mid-top{display:flex;align-items:center}
.news-mid-top span{font-size:14px;color:#a8a8a8;padding-left:10px}
.news-mid h3{font-size:18px;line-height:26px;letter-spacing:.02em;color:#333;margin:15px 0;height: 52px;overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical}
.news-mid p{font-size:14px;color:#777;line-height:20px;height: 40px;overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical}
.news-rgt{width:24%;background:#f1f6f9;padding:28px;height: 100%}
.news-rgt ul{margin-top:26px}
.news-rgt li+li{margin-top:20px}
.news-rgt h3{transition:all .4s ease;font-size:16px;color:#1b1f25}
.news-rgt a:hover h3{color:#006fbc}
.news-rgt a h3 span{position:relative;padding-bottom:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display: inline-block;width: 100%}
.news-rgt a h3 span:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:#609fd1;opacity:0;transition:all .4s ease}
.news-rgt a:hover h3 span:after{opacity:1}
.news-rgt h3+span{color:#a8a8a8}
.news-btn{display:flex;margin-top:50px;justify-content:center}
.news-btn a{display:flex;justify-content:center;align-items:center;width:170px;height:40px;font-size:16px;color:#272727;border-radius:5px;border:1px solid #6e6e6e;flex-direction: column}
.news-btn a:hover{color: #006fbc;border-color: #006fbc}
.news-btn a+a{margin-left:18px}



/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900) */
}

@media all and (max-width:1599px) {
    /* 1440 × (700)  */
    .prod-tit{font-size: 20px}
    .prod-cell h3{font-size: 24px}
}

@media all and (max-width:1439px) {
    /* 1360 */
}

@media all and (max-width:1359px) {
    /* 1280 */
}

@media all and (max-width:1279px) {
    /* 1152 × (700) */
    .news-mid-txt,.news-rgt{padding: 20px}
    .news-main{height: 430px}
    .news-rgt,.news-mid{width: 24.5%}
    .news-mid h3{font-size: 16px}
    .news-rgt h3{font-size: 14px}
    .news-cont{padding: 30px}
}

@media all and (max-width:1151px) {
    /* 1024 */
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .product,.news{padding: 60px 0}
    .com-tit{font-size: 30px}
    .solution-item h3{font-size: 20px}
    .prod-cell h3{font-size: 20px;padding-left: 30px}
    .prod-cell h3:after{width: 20px;height: 20px}
    .prod-cell h3:before{width: 6px;height: 6px;left: 7px;top: 11px}
    .prod-cell,.solution-main,.news-btn{margin-top: 30px}
    .prod-list{margin-top: 20px}
    .prod-item{width: 49%;margin-bottom: 2%}
    .solution{padding-top: 60px}
    .news-lft{width: 100%;height: 400px;margin-bottom: 15px}
    .news-rgt, .news-mid{width: 49%}
    .news-main{flex-wrap: wrap;height: auto}
    .news-rgt li+li{margin-top: 21px}
    .prod-pic{margin-top: 5px}
    .banner-cont h1{font-size: 40px}
    .banner{height: calc(100vh - 60px)}
    .solution-main{height: 300px}
    .product .swiper-wrapper{padding-bottom: 40px}
    .prod-tit{font-size: 18px}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .product,.news{padding: 40px 0}
    .banner-bg-mb{display: block}
    .banner-bg-pc{display: none}
    .banner{height: 300px}
    .banner-cont h1{font-size: 26px}
    .banner-btn{margin-top: 20px}
    .banner .swiper-pagination-bullet-active{width: 20px;height: 20px}
    .banner .swiper-pagination-bullet-active:after{width: 8px;height: 8px;border-width: 1px}
    .banner .swiper-pagination-bullet{margin-right: 50px!important}
    .banner .slideOntrue.swiper-pagination-bullet:before{width: 55px}
    .banner .swiper-pagination-bullet i{width: 54px}
    .banner .swiper-pagination-bullet:before{left: 19px}
    .banner .swiper-pagination-bullet-active i{left: 21px}
    .banner .swiper-pagination-bullet:before,.banner .swiper-pagination-bullet-active i{top: 9px}
    .com-tit{font-size: 24px}
    .prod-pic{height: 180px}
    .prod-tit{font-size: 16px;height: 50px;line-height: 50px;}
    .prod-cell h3{font-size: 18px}
    .prod-cell{margin-top: 20px}
    .solution{padding-top: 40px}
    .solution-item{width: 100%;height: 20%;border-right: unset;align-items: center;justify-content: center;border-bottom: 1px solid rgba(255,255,255,.15)}
    .solution-item:not(:last-child){border-top: 0}
    .solution-item h3{font-size: 16px}
    .solution-item i{display: none}
    .solution-list{flex-wrap: wrap}
    .news-lft{height: 300px}
    .news-cont{padding: 20px}
    .news-cont h3{font-size: 16px;overflow: unset;white-space: unset;text-overflow:unset}
    .news-cat{width: 80px;height: 34px;font-size: 13px}
    .news .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{margin-left: 20px;bottom: 20px}
    .news-rgt, .news-mid{width: 100%}
    .news-rgt{margin-top: 15px}
    .product .swiper-wrapper{padding-bottom: 36px}
}