@charset "utf-8";
/* ===================首页样式========================== */
.index-tit{text-align: center;font-size: 40px;font-weight: bold;line-height: 40px;color: #015198}
.index-tit.white{color: #fff}
.index-tit.lft{text-align: left}
.com-i{display:flex;width:30px;height:30px;border-radius:50%;border:1px solid rgba(1,81,152,.3);background:url(../images/common/arrow-rgt-sm.png) no-repeat center/6px 10px;transition: all .4s ease}
.com-i:hover{border-color: #015198;box-shadow: inset 0 0 2px #015198}

/* banner */
.banner-bg{height:100%}
.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:50px;font-weight:700;line-height:1;letter-spacing:20px;color:#fff}
.banner-cont p{font-weight:lighter;font-size:45px;line-height:50px;color:rgba(255,255,255,.2);margin-top:20px;text-transform:uppercase}
.banner .swiper-slide{transform:translateZ(0)}
#banner{overflow:hidden}
#masterslider .ms-slide{-webkit-transition:initial;-moz-transition:initial;-ms-transition:initial;-o-transition:initial;transition:initial}
#masterslider .ms-bullets{position:absolute;left:0;right:0;bottom:50px;width:100%;margin:0 auto;font-size:0;letter-spacing:-4px;z-index:10;text-align:center}
#masterslider .ms-bullets .ms-bullets-count{right:auto;left:0}
#masterslider .ms-bullets .ms-bullet{display:inline-block;font-size:20px;color:#fff;font-family:Arial;border-bottom:2px solid #fff;width:80px;letter-spacing:normal;text-align:left;text-indent:-2px}
#masterslider .ms-bullets .ms-bullet.ms-bullet-selected{color:#32b9ff;border-color:#32b9ff}
.ms-grab-cursor{cursor:unset}

/* about */
.about{background:url(../images/index/about-bg.png) no-repeat bottom;height:100%;display: flex;align-items: center;overflow: hidden}
.about-main{margin-top:70px;display:flex;justify-content:space-between}
.about-lft{width:48%}
.about-data{display:flex;color:#015198}
.about-num{font-size:20px;line-height:1}
.about-num span{font-size:50px;font-family:Arial;font-weight:700}
.about-data p{font-size:16px;margin-top:5px}
.about-data li:not(:first-child){margin-left:60px}
.about-cont{margin:40px 0}
.about-cont p{font-size:16px;line-height:26px;color:#999}
.about-cont br{content:'';display:block;height:.7em}
.about-btn a{position:relative;display:inline-flex;align-items:center;justify-content:space-between;font-size:28px;font-weight:700;color:#015198}
.about-btn a:hover i{border-color: #015198;box-shadow: inset 0 0 2px #015198}
.about-btn i{margin-left: 20px}
.about-rgt{width:48%;display:flex;justify-content:center}
.about-box-mid{display:flex;justify-content:center;align-items:center;width:408px;height:408px;position:relative}
.about-box-mid svg{fill:transparent;position:absolute;width:100%;height:100%;left:0;top:0;z-index:0;animation:circle 50s linear infinite}
.about-box-inner{z-index:1;background:#fff;box-shadow:0 11px 68px 0 rgba(1,81,152,.22);border-radius:50%;width:58%;height:58%;display:flex;align-items:center;justify-content:center;flex-direction:column}
.about-rgt h6{font-size:22px;line-height:22px;color:#015198;margin-bottom:8px}
.about-box h6{color:#fff}
.about-rgt p{display:flex;flex-wrap:wrap;width:70%;text-align:center;font-size:15px;line-height:24px;color:#888}
.about-box p{color:#fff}
.about-rgt p span{display:block;width:50%}
.inner-box{width:148px;height:148px;position:absolute;top:50%;background:rgba(1,81,152,.06);border-radius:50%;transform:translateY(-50%)}
.inner-box:after{content:'';width:100%;height:1px;top:50%;transform:translateY(-50%);left:0;border-top:1px dashed #d0d0d0;position:absolute}
.inner-box.l{left:0;animation:circle-i 8s ease-in-out both infinite 1s}
.inner-box.r{right:0;background:rgba(1,81,152,.15);animation:circle-i-r 8s ease-in-out both infinite 1s}
.box-out{position:absolute;top:0;left:50%;width:10px;height:50%;transform-origin:50% 100%;transform:rotate(270deg);z-index:2;cursor:pointer;animation:circle-l 8s ease-in-out both infinite 1s}
.box-out2{position:absolute;top:0;left:50%;width:10px;height:50%;transform-origin:50% 100%;transform:rotate(90deg);z-index:2;cursor:pointer;animation:circle-r 8s ease-in-out both infinite 1s}
.about-box{width:186px;height:186px;background:#015198;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;position:absolute;z-index:1}
.about-box.l{left:-86px;top:-150px;transform:rotate(90deg);animation:circle-l-sub 8s ease-in-out both infinite 1s}
.about-box.r{right:-86px;top:-150px;transform:rotate(-90deg);animation:circle-r-sub 8s ease-in-out both infinite 1s}
@keyframes circle-i{0%,100%,40%,50%{transform:translateY(-50%) translateX(0)}25%,70%,75%{transform:translateY(-50%) translateX(100%)}}
@keyframes circle-i-r{0%,100%,40%,50%{transform:translateY(-50%) translateX(0)}25%,70%,75%{transform:translateY(-50%) translateX(-100%)}}
@keyframes circle-l{0%{transform:rotate(270deg)}25%,50%{transform:rotate(450deg)}100%,75%{transform:rotate(630deg)}}
@keyframes circle-r{0%{transform:rotate(90deg)}25%,50%{transform:rotate(270deg)}100%,75%{transform:rotate(450deg)}}
@keyframes circle-l-sub{0%{transform:rotate(90deg)}25%,50%{transform:rotate(-90deg)}75%{transform:rotate(-270deg)}100%{transform:rotate(-270deg)}}
@keyframes circle-r-sub{0%{transform:rotate(-90deg)}25%,50%{transform:rotate(-270deg)}75%{transform:rotate(-450deg)}100%{transform:rotate(-450deg)}}
@keyframes circle{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* 解决方案 */
.solution{height:100%;display: flex;align-items: center;background:#015198;height:100%;position:relative;z-index:1;overflow: hidden}
.solution .contain{background:#015198}
#mydiv{position:absolute;width:100%;height:100%;left:0;top:0;z-index:-1}
.solution-list{margin-top:40px;display:flex;flex-wrap:wrap}
.solution-item{display:flex;flex-direction:column;justify-content:center;padding:0 55px;height:234px;width:25%;background:linear-gradient(169deg,#f0f5f9 0,#dbe8f3 80%);position:relative;overflow:hidden;z-index:1}
.solution-item:after{content:'';z-index:0;width:100%;height:100%;position:absolute;left:0;top:0;background:linear-gradient(144deg,#0388e6 0,#00b7ec 50%);opacity:0;transition:all .4s ease}
.solution-item:hover:after{opacity:1}
.solution-item h3{color:#015198;font-size:22px;margin-bottom:-97px;z-index:1;text-align: center;transition:all .4s ease;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.solution-item:hover h3{color:#fff}
.solution-item p{font-size:15px;line-height:24px;z-index:1;color:#666;transition:all .4s ease;overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;height: 48px}
.solution-item:hover p{color:#fff}
.solution-item i{margin-top:20px;z-index:1;transition:all .4s ease}
.solution-item:hover i{background:#fff url(../images/common/arrow-rgt-sm.png) no-repeat center/6px 10px;border-color:#fff}
.solution-i{display:block;background:url(../images/index/solution-i-1.png) no-repeat center/cover;width:85px;height:84px;z-index:1;position:absolute;bottom:-10px;right:50px;transform:translateY(100%);transition:all .4s ease}
.solution-item:hover .solution-i{transform:translateY(0)}
.solution-i:nth-of-type(2){position:absolute;bottom:-35px;right:35px;transition-delay:.1s}
.solution-i:nth-of-type(3){position:absolute;bottom:-60px;right:20px;transition-delay:.2s}

/* 新闻中心 */
.news{height:100%;display: flex;align-items: center}
.news .index-tit{text-align:left}
.news-nav{display:flex;align-items:center;justify-content:space-between}
.news-nav ul{display:flex;align-items:center}
.news-nav li a{font-size:24px;color:#444}
.news-nav a:hover,.news-nav li.active a{color:#015198}
.news-nav li+li{margin-left:40px}
.news-list{display:flex;justify-content:space-between;margin-top:30px}
.news-lft{width:31%;display:block}
.news-pic{width:100%;height:344px;overflow:hidden}
.news-pic img{transition:all .6s ease}
.news-lft:hover img{transform:scale(1.1)}
.news-lft h3{font-size:20px;line-height:26px;color:#666;margin-top:15px;padding-bottom:20px;border-bottom:1px solid #e6e6e6;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;height:73px;transition: all .4s ease}
.news-lft:hover h3{color: #015198}
.news-item{width:31%}
.news-item li{padding:26px 0;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6}
.news-item li+li{border-top:0}
.news-item h3{font-size:18px;color:#666;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition: all .4s ease}
.news-item a:hover h3{color: #015198}
.news-time{display:flex;align-items:center;font-size:15px;color:#666;margin-top:10px}
.news-time i{display:block;background:url(../images/common/time.png) no-repeat center/100%;width:17px;height:17px;margin-right:5px}
.news-list:not(:first-child){display:none}



#fp-nav.fp-right{right:0;transition:3s ease-in-out}
#fp-nav ul li{width:50px;height:18px;line-height:18px;margin:15px 0;position:relative}
#fp-nav ul li a{height:1px;position:absolute;height:1px;background:#fff;top:0;left:0;bottom:0;width:50%;margin:auto;transition:.5s ease-in-out}
#fp-nav ul li a.active{width:100%;}
#fp-nav ul li a.active span,#fp-nav ul li span,#fp-nav ul li:hover .fp-tooltip,#fp-nav ul li:hover a span,#fp-nav ul li:hover a.active span,#fp-nav.fp-show-active a.active+.fp-tooltip{display:none}
#fp-nav ul li a span,.fp-slidesNav ul li a span{display:none}
#fp-nav ul li .fp-tooltip.fp-right{width:40px;right:100%;font-size:15px;transform:translateX(100%);transition:all .4s ease}
#fp-nav ul li a.active+.fp-tooltip.fp-right{display:block!important;opacity:1;transform:translateX(0)}
#fp-nav.color ul li .fp-tooltip{color:#666}
#fp-nav.color ul li a{background:#666}
#fp-nav.color ul li a.active{background:#015198}
#fp-nav ul li:last-child{display:none}


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

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

@media all and (max-width:1439px) {
    /* 1360 */
    .about-box-mid{width: 280px;height: 280px}
    .inner-box{width: 100px;height: 100px}
    .about-rgt h6{font-size: 18px}
    .about-rgt p{font-size: 13px;width: 70%}
    .about-box{width: 150px;height: 150px}
    .about-box.r,.about-box.l{top: -110px}
    .solution-item{padding: 0 20px}
    .news-pic{height: 298px}
    .news-item li{padding: 20px 0}
}

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

@media all and (max-width:1279px) {
    /* 1152 × (700) */
    #fp-nav ul li{width: 25px}
    #fp-nav ul li a.active+.fp-tooltip.fp-right{display: none!important}
}

@media all and (max-width:1151px) {
    /* 1024 */
    .about-num span,.index-tit{font-size: 30px}
    .about-btn a{font-size: 22px}
    .solution-item h3,.news-nav li a{font-size: 20px}
    .news-item h3,.news-lft h3{font-size: 16px}
    .about-data p,.about-cont p,.solution-item p{font-size: 14px}
    .solution-item:hover h3{margin-bottom: 10px}
    .solution-item,.news-pic{height: 200px}
    .news-item li{padding: 9.5px 0}
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .about-lft,.about-rgt,.news-lft{width: 100%}
    .about-main,.news-list{flex-wrap: wrap}
    .about-rgt{margin-top: 50px}
    .about-main{margin-top: 40px}
    .about-cont{margin: 20px 0}
    .solution-item{width: 50%;height: 170px}
    .solution-item h3{margin-bottom: 10px}
    .news-item{width: 49%}
    .news-item li:nth-child(1){border-top: 0}
    .PAD.fp-viewing-footer #fp-nav.fp-right{display: none}
    .banner-cont h1{font-size: 40px}
    .banner-cont p{font-size: 35px}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .about,.solution,.news{padding: 40px 0}
    .news-item{width: 100%}
    .about-main,.solution-list,.about-rgt{margin-top: 30px}
    .banner-bg-mb{display: block}
    .banner-bg-pc,.about-box-mid svg,.inner-box{display: none}
    .about-num span{font-size: 20px}
    .index-tit,.banner-cont p{font-size: 24px}
    .banner-cont p{line-height: 30px}
    .banner-cont h1{font-size: 30px;letter-spacing:10px}
    #masterslider .ms-bullets .ms-bullet{font-size: 16px}
    .about-data li:not(:first-child){margin-left: 10px}
    .about-box-mid svg,.about-box,.box-out,.box-out2{animation: none!important}
    .about-box-mid{width: auto;height: auto;flex-direction: column}
    .box-out,.about-box,.box-out2{position: static;transform: none!important}
    .box-out,.box-out2{width: auto;height: auto;transform-origin:unset}
    .about-box-inner,.about-box{border-radius: 5px;width: 230px;height: 100px;margin-top: 20px}
    .solution-item{padding: 0 10px}
    .solution-item h3{font-size: 16px;margin-bottom: 10px}
    .solution-item i{margin-top: 10px}
    .news-nav{flex-direction: column}
    .news-nav li a{font-size: 16px}
    .news-nav ul{margin-top: 20px}
    .news-nav li+li{margin-left: 20px}
}