@charset "utf-8";
/* ===================首页样式========================== */
.index-tit{font-size:36px;text-align:center;position:relative;opacity: 0}
.index-tit:after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-25px;width:0;height:6px;background:#0079cb;border-radius:5px;opacity: 0;transition: all 1.5s ease}
.index-tit.startAnimate:after{width: 80px;opacity: 1}
.index-tit.startAnimate{animation: fontB 1.5s ease both}

/* product */
.prod-nav{padding-top:80px}
.prod-nav .container{position: relative}
.prod-nav .swiper-container{margin-top:100px;padding:0 90px}
.prod-nav-item{text-align:center;cursor:pointer;transition: all .6s ease}
.prod-nav-item:hover{transform:  scale3d(1.05, 1.05, 1)}
.prod-nav-item.active:after{content:"";width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:10px solid #f5f8fa;position:absolute;bottom:-20px;left:50%;transform:translateX(-50%)}
.prod-icon{width:82px;height:82px;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;z-index:1;position:relative;transform-style:preserve-3d;transition:transform .4s ease}
.icon-black,.icon-front{left:0;top:0;position:absolute;backface-visibility:hidden;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:auto}
.prod-nav-item.active .prod-icon,.prod-nav-item:hover .prod-icon{transform:rotateY(180deg)}
.prod-nav-item.active .prod-icon .icon-front{opacity:0}
.icon-black{transform:rotateY(180deg)}
.prod-nav-item h3{font-size:18px;color:#999;transition:all .4s ease}
.prod-nav-item.active h3,.prod-nav-item:hover h3{color:#333}
.prod-nav .swiper-wrapper{padding-bottom:20px}
.prod-list{background:#f5f8fa;padding:46px 0;overflow: hidden}
.prod-item{display:flex;justify-content:space-between;align-items:center}
.prod-item:not(.active){display:none}
.prod-lft{width:25%}
.prod-lft h3{font-size:24px;color:#333;margin-bottom:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.prod-lft p{font-size:16px;line-height:36px;color:#999}
.prod-rgt{width:71%}
.prod-rgt .swiper-wrapper{padding-top:10px}
.prod-rgt .swiper-container{width:calc(100% + 10px);padding:0 10px;margin-left:-5px}
.prod-full{display:block;text-align:center}
.prod-picture{height:240px;background:#fff;border-radius:20px;display:flex;align-items:center;justify-content:center;position:relative}
.prod-picture img{max-width:88%;max-height:88%;object-fit:cover;transition:all .6s ease}
.prod-full h6{font-size:18px;color:#333;margin-top:15px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.prod-btn{margin-top:30px}
.prod-full:hover{transform:translateY(-5px)}
.prod-full:hover img{transform:scale(1.1)}
.prod-btn-nav{width: 60px;height: 138px;position: absolute;bottom: 35px;display: flex;align-items: center;justify-content: center;color: #d9f0ff;display: none}
.prod-btn-nav.swiper-button-disabled{color: #f5f8fa}
.prod-prev{left: 20px}
.prod-next{right: 20px}
.startAnimate.prod-list h3{animation: to-up 1.5s ease both}
.startAnimate.prod-list p{animation: to-up 1.5s ease both .2s}
.startAnimate.prod-list .prod-btn{animation: to-up 1.5s ease both .5s}

.prod-picture svg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;stroke-dashoffset: 856;stroke-dasharray:856,856}
.prod-picture svg rect{width: 186px;height: calc(100% - 2px);fill: none;stroke: #0079cb;stroke-width: 2;}
.prod-full:hover .prod-picture svg{stroke-dashoffset:0;transition: all 1s ease}

/* solution */
.solution{padding-top:80px}
body.PC .solution .swiper-container{margin-top:100px;height:480px}
.solution .swiper-slide{width:360px;transition:width .6s ease}
body.PC .solution .swiper-slide.active,body.PC .solution .swiper-slide:hover{width:540px}
body.PC .solution .swiper-slide.active .solution-cont,body.PC .solution .swiper-slide:hover .solution-cont{width:360px}
body.PC .solution-cont{position:absolute;right:0;top:0;width:100%;height:100%;padding:90px 50px;background:rgba(22,38,49,.8);color:#fff;transition:all .8s ease}
body.PC .solution .swiper-slide.active .solution-cont,body.PC .solution .swiper-slide:hover .solution-cont{padding-top:40px}
body.PC .solution-cont i{width:50px;height:50px;display:flex;align-items:center;justify-content:center}
body.PC .solution-cont i img{max-width:100%}
body.PC .solution-cont h3{font-size:18px;margin:15px 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition: all .6s ease}
body.PC .solution .swiper-slide.active .solution-cont h3{font-size: 24px}
body.PC .solution-cont .en{font-size:14px;text-transform:uppercase;opacity:.5;font-family:Arial;margin-bottom:50px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
body.PC .solution-cont p{font-size:14px;line-height:30px;opacity:0;color:rgba(255,255,255,.5);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.PC .solution .swiper-slide.active .solution-cont p,body.PC .solution .swiper-slide:hover .solution-cont p{animation:solution 2s ease both}
body.PC .solution-btn{margin-top:60px;opacity:0}
body.PC .solution-btn .btn:hover{box-shadow:inset 0 0 0 2px #fff;color:#fff}
body.PC .solution .swiper-slide.active .solution-btn{animation:to-up 1.5s ease both}
body.PC .solution-nav{position:absolute;top:0;height:100%;width:130px;color:#999;z-index:2;display:flex;align-items:center;justify-content:center;cursor:pointer;transition: all .6s ease}
body.PC .solution-nav:hover{color:#fff}
body.PC .solution-nav svg{width:44px;height:80px}
body.PC .solution-prev{left:0;background:linear-gradient(to right,rgba(0,0,0,.9) 20%,transparent 100%)}
body.PC .solution-next{right:0;background:linear-gradient(to right,transparent 20%,rgba(0,0,0,.9) 100%)}
@keyframes solution{0%{opacity: 0;transform: translate3d(150px, 0, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}}

/* news */
.news{padding:95px 0 65px}
.news-list{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:85px}
.news-list:after{content:'';width:31.5%}
.news-item{display:block;width:31.5%;height:400px;opacity: 0}
.news-picture{width:100%;height:210px}
.news-info{width:92%;position:relative;top:-75px;background:#fff;left:4%;padding:30px 30px 20px}
.news-info:after{content:'';width:100%;height:100%;position:absolute;left:0;top:0;box-shadow:10px 10px 10px 0 rgba(245,245,245,.75);z-index:-1;transition:all .6s ease}
.news-info h3{font-size:20px;color:#333;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.news-info p{font-size:14px;line-height:24px;color:#999;margin-top:20px;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:48px;transition:height .6s ease}
 .news-item:hover p{height:96px;-webkit-line-clamp:4}
.news-time{font-size:14px;color:#333}
.news-bott{display:flex;justify-content:space-between;margin-top:15px;align-items:center}
.news-bott .btn{display:none}
body.PC .news-item:hover .btn{display:block}
body.PC .news-item:hover .news-bott{margin-top:25px}
body.PC .news-item:hover{transform:translateY(-20px)}
body.PC .news-item:hover .news-info:after{box-shadow:0 5px 40px rgba(17,58,93,.1)}
.startAnimate.news-item:nth-child(1){animation: to-upB 1.5s ease both}
.startAnimate.news-item:nth-child(2){animation: to-upB 1.5s ease both .2s}
.startAnimate.news-item:nth-child(3){animation: to-upB 1.5s ease both .4s}

/* search */
.index-search{padding:40px 0 50px;background:#f5f8fa}
.index-search .container{padding:0 140px}
.index-search h2{color:#333;font-size:36px;text-align:center}
.index-search-box{display:flex;position:relative;margin-top:50px}
.index-search-box input{background:0 0;height:50px;line-height:50px;font-size:18px;width:100%}
.index-search-box:after{content:'';height:2px;width:100%;position:absolute;bottom:0;left:0;background:#0079cb}
.index-search-box:before{content:'';height:2px;width:0;position:absolute;bottom:0;left:0;background:#999;transition: all 2s linear}
.startAnimate .index-search-box:before{width: 100%;z-index: 1}
.index-search-box input::placeholder{color:#999;font-size:18px}
.index-search-box a{color:#686868;height:50px;width:50px;display:flex;align-items:center;justify-content:center}
.index-search-box a:hover{color: #0079cb}

/* icon-list */
.icon-list{padding:95px 0 110px}
.icon-list .container{display:flex}
.icon-item i{display:flex;align-items:center;justify-content:center;margin:0 auto 10px;width:70px;height:70px}
.icon-item{width:16.66%;text-align:center}
.icon-item p{font-size:16px;color:#333;line-height:26px}


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

@media all and (max-width:1599px) {
    /* 1440 × (900/1050) */

}

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

}

@media all and (max-width:1359px) {
    /* 1280 × (800/854/1024) */

}

@media all and (max-width:1279px) {
    /* 1152 × (864) */
    .prod-full h6{font-size: 16px}
    .prod-picture svg{stroke-dashoffset:900;stroke-dasharray:900,900}
    .prod-picture svg rect{width: 221px}
}

@media all and (max-width:1151px) {
    /* 1024 × (600/768) */
    .prod-lft p{font-size: 14px}
    .prod-lft h3{font-size: 20px}
    .prod-lft h3{margin-bottom: 15px}
    .prod-btn{margin-top: 20px}
    .prod-picture svg rect{width: 193px}
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .prod-nav .swiper-container{padding: 0;width: calc(100% - 120px)}
    .prod-rgt{width: 100%}
    .prod-item{flex-direction: column-reverse}
    .prod-list{padding: 30px 0}
    .prod-btn{margin-top: 50px}
    .index-tit:after{opacity: 1;width: 60px}
    .prod-btn-nav{display: flex;z-index: 2}
    .solution-nav{width: 40px}
    .solution-nav svg{width: 20px;height: 60px}
    .news-item{opacity: 1;width: 49%;height: 350px}
    .index-tit{font-size: 30px;opacity: 1}
    .news-item:last-child{display: none}
    .news-list-btn{display: flex;justify-content: center}
    .index-search h2{font-size: 30px}
    .index-search .container{padding: 0 70px}
    .icon-item{min-width: 170px}
    .icon-list .container{overflow-x: auto}
    .solution .swiper-container{margin-top: 50px;width: 90%}
    .solution .swiper-wrapper{flex-direction: column}
    .solution .swiper-slide{background-repeat: no-repeat;background-position: center;background-size: cover;color: #fff;height: 120px;transition: height .4s ease}
    .solution .swiper-slide.active{height: 320px}
    .solution-cont{display: flex;flex-direction: column;justify-content: center;height: 100%;align-items: center;position: relative}
    .solution-cont:after{content: '';position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: #000;opacity: .5;z-index: 0;transition: all .4s ease}
    .solution-cont h3{font-size: 24px;font-weight: lighter;z-index: 1}
    .solution-cont .en{opacity: .5;font-size: 24px;font-family: Arial;display: none;z-index: 1}
    .solution .swiper-slide i{margin-bottom: 15px;z-index: 1;width:40px;transform:scale(0);transition:all .4s ease;height:0;display:block}
    .solution .swiper-slide.active i{transform:scale(1);height:40px}
    .solution .swiper-slide.active h3{font-size: 32px;font-weight: normal}
    .solution .swiper-slide.active .en{display: block;text-transform: uppercase;margin-top: 10px;line-height: 1}
    .solution .swiper-slide.active .solution-btn{display: block;margin-top: 30px;z-index: 1}
    .solution .swiper-slide .btn{background: transparent}
    .solution .swiper-slide.active .solution-cont:after{background: #1f608c;opacity: .7}
    .solution .swiper-slide:last-child{display: none}
    .solution .swiper-slide .btn:hover{color: #fff;box-shadow: inset 0 0 0 2px #fff}
    .solution-list-btn{margin-top: 40px;text-align: center}
    .prod-picture svg{display: none}
    .solution .swiper-slide.active,.solution .swiper-slide{width: 100%}
    .index-search-box:before{display: none}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .index-tit{font-size: 24px}
    .index-tit:after{width: 50px;height: 4px;bottom: -15px}
    .prod-nav .swiper-container{margin-top: 80px;width: calc(100%)}
    .prod-nav-item h3{font-size: 13px}
    .prod-icon{width: 60px;height: 60px}
    .prod-btn-nav{height: 110px;width: 20px;bottom: 25px}
    .prod-btn-nav svg{width: 20px;height: 20px}
    .prod-prev{left: -10px}
    .prod-next{right: -10px}
    .prod-picture{height: 200px}
    .prod-lft{width: 100%}
    .prod-btn{text-align: center;margin-top: 40px}
    .solution{padding-top: 40px}
    .solution .swiper-slide.active h3,.solution .swiper-slide.active .en{font-size: 20px}
    .news-item{width: 100%}
    .news-item:hover p{height: unset}
    .index-search .container{padding: 0}
    .index-search h2{font-size: 24px}
    .index-search-box{margin-top: 30px}
    .index-search-box input{padding: 0 20px;font-size: 14px;text-align: center}
    .index-search-box input::placeholder{color:#999;font-size:14px;font-weight: lighter;text-align: center}
    .index-search-box a{bottom: -55px;position: absolute;left: 50%;transform: translateX(-50%);color: #0079cb}
    .index-search{padding: 40px 0 75px}
    .icon-list{padding: 40px 0}
    .icon-item i{width: 50px;height: 50px}
    .icon-item i img{max-width: 90%;max-height: 90%}
    .icon-item p{font-size: 14px;font-weight: lighter;color: #333}
}