@charset "UTF-8";
/* ===================首页样式========================== */
body{background:#f5f8fc}
#fp-nav{position:fixed;z-index:100;top:50%;opacity:1;transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translate3d(0,-50%,0);font-size:0;right:80px}
#fp-nav li:hover a .fp-sr-only{opacity:1;visibility:visible;padding-right:24px}
#fp-nav li{position:relative}
#fp-nav li:last-child{display:none}
#fp-nav li + li{margin-top:15px}
#fp-nav a.active{background:#ea5413;border-color:#2662a4;width:11px;height:11px}
#fp-nav a{width:7px;height:7px;border-radius:50%;display:block;transition:background .4s ease;background:#fff;margin:0 auto}
.fp-sr-only{transition:all .4s ease;position:absolute;white-space:nowrap;right:0;opacity:0;visibility:hidden;top:50%;transform:translateY(-50%)}
.fp-sr-only em{font-style:normal;font-size:13px;padding:4px 13px;background:#ea5413;color:#fff;border-radius:30px;border:1px solid #ea5413}
.fp-auto-height.fp-section,.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell{height:auto !important}
.fp-responsive .fp-auto-height-responsive.fp-section,.fp-responsive .fp-auto-height-responsive .fp-slide,.fp-responsive .fp-auto-height-responsive .fp-tableCell{height:auto !important}
.section{padding-top:90px}
.section.Footer-wrapper{padding-top:0}
.mid-center{height:100%;display:flex;align-items:center}
.mid-center .row{width:100%}
.com-tit .cn{font-weight:500;color:#333;line-height:1}
.com-tit.white .cn{color:#fff}
.com-tit.animate{animation:to-up 1.5s ease both}
.com-tip{font-size:14px;color:#646c75;margin-top:10px}
.com-tip.white{color:#fff}
.com-tip.animate{animation:to-up 1.5s ease both .2s}
.com-btn{position:relative;z-index:1;border-radius:30px;overflow:hidden;display:inline-block;color:#fff;background:#ea5413;font-size:14px;line-height:1;padding:15px 28px;transition:all .4s ease}
.com-btn:hover{box-shadow:inset 0 0 0 2px;color:#ea5413;background:transparent}
.mCSB_scrollTools .mCSB_draggerRail{background:#eef4fa}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:#2662a4 !important;width:3px}
.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell,.fp-auto-height.fp-section{height:auto !important}
.mCSB_container{margin-right:15px}

/* banner */
.banner.section{padding:0 !important}
.banner picture{width:100%;display:block;overflow:hidden}
.banner picture .bg{display:block;width:100%;height:100vh}
.banner .swiper-slide-active .title{animation:clip 1.5s ease both .4s}
.banner .swiper-slide-active .title:nth-child(2){animation:clip 1.5s ease both .6s}
.banner .swiper-slide-active .line{width:69px;transition-delay:1s}
.banner .btn-toggle{cursor:pointer;color:#fff;display:flex;flex-direction:column;left:50%;transform:translateX(-50%);bottom:25px;position:absolute;z-index:3;font-size:15px;align-items:center}
.banner .btn-toggle i{background:url("../images/index/btn-toggle.png") no-repeat center/100%;width:20px;height:28px;animation:toggleMove 1.5s infinite;margin-bottom:10px}
.banner-cont{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4}
.banner-cont .contain{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;color:#fff}
.banner-cont .title{line-height:1}
.banner-cont .line{display:block;height:3px;background:#fff;width:0;transition:width 1s ease}
@keyframes toggleMove{0%{transform:translateY(5px)}50%{transform:translateY(0);opacity:1}to{transform:translateY(5px)}}
.banner video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:3}

/* 简介 */
.intro{background:#f5f8fc}
.intro .pic{width:47.2%;opacity:1;transform:scale(0.6);transform-origin:left bottom;transition:1s ease;transition-delay:0.5s}
.intro .pic li{position:absolute;animation:float 5s ease-in-out infinite 1s}
.intro .pic .one{left:16%;top:-20%}
.intro .pic .two{left:6%;top:20%}
.intro .pic .three{right:7.2%;top:10%}
.intro .pic .four{left:44.5%;bottom:9%}
.intro .pic.do{opacity:1;transform:scale(1)}
.intro .cont{width:50%}
.intro .cont.animate{animation:com-animate 1.5s ease both .5s}
.intro .txt{margin-top:30px}
.intro .txt p{font-size:16px;line-height:28px;color:#666666}
.intro .com-btn{margin-top:25px}
@keyframes float{0%{transform:translatey(0)}50%{transform:translatey(-20px)}100%{transform:translatey(0)}}

/* 解决方案 */
.solution-bg{height:100%;position:relative}
.solution-bg .bg{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;text-align:center;transition:all 1.5s cubic-bezier(0.23,1,0.32,1);background-repeat:no-repeat;background-size:cover;visibility:hidden;opacity:0}
.solution-bg .bg.active{opacity:1;visibility:visible}
.solution-main{position:absolute;left:0;top:0;width:100%;height:100%}
.solution-nav{width:18.5%;background:rgba(255,255,255,0.2);height:462px;text-align:center;padding:40px 0;border-radius:4px}
.solution-nav.animate{animation:to-lft 1.5s ease both 0.2s}
.solution-nav li{position:relative;padding:0 10px 0 54px;text-align:left}
.solution-nav li:after{content:'';height:calc(100% - 10px);transform:scale(0);transform-origin:center;transition:opacity 0.4s ease,transform 0.4s ease;opacity:0;visibility:hidden;width:4px;background:#fff;position:absolute;left:0;top:5px}
.solution-nav li + li{margin-top:16px}
.solution-nav li:hover:after,.solution-nav li.active:after{transform:scale(1);opacity:1;visibility:visible}
.solution-nav li.active a{color:#ea5413}
.solution-nav li.active:after{background:#ea5413}
.solution-nav a{color:#fff;display:inline-flex;align-items:center;font-size:16px;padding:5px;border-radius:5px;transition:background 0.4s ease}
.solution-nav a i{display:block;background:url("../images/common/arrRW.svg") no-repeat center/100%;width:15px;height:15px;margin-left:6px}
.solution-nav li:not(.active) a:hover{background:rgba(255,255,255,0.1)}
.solution-txt{width:74.5%;color:#fff}
.solution-txt.animate{animation:to-rgt 1.5s ease both 0.2s}
.solution-txt .tit{font-size:24px;font-weight:bold;line-height:1}
.solution-txt .desc{margin-top:15px;font-size:16px;line-height:24px;max-width:900px}
.solution-txt .icon ul{margin:-20px 0 0 -20px}
.solution-txt .icon li{text-align:center;margin:20px 0 0 20px;border-radius:4px;width:122px;height:40px}
.solution-txt .icon li:not(.last){color:#fff;font-size:14px;background:rgba(255,255,255,0.2)}
.solution-txt .icon a{width:100%;height:100%;display:flex;background:#ea5413;border-radius:4px;transition:all .4s ease}
.solution-txt .icon a:hover{box-shadow:inset 0 0 0 2px #ea5413;color:#ea5413;background:transparent}
.solution-txt .logo{background:rgba(255,255,255,0.4);border-radius:4px;display:flex;flex-wrap:wrap;max-width:82.5%;padding:24px 0}
.solution-txt .logo .logo-item{width:25%;display:flex;align-items:center;justify-content:center}

/* 合作企业 */
.coo{position:relative;background:#f6f8fa;z-index:2}
/*.coo .bg.animate{opacity:1;transform:scale(1)}*/
.coo-list{max-width:68%;margin-left:auto;margin-right:auto}
.coo-list.animate{animation:com-animate 1.5s ease both .5s}
.coo-list .swiper-container{width:calc(100% + 40px);padding:0 20px 38px;margin-left:-20px}
.coo-list .item{display:flex;justify-content:space-between;border-radius:8px;background:linear-gradient(180deg,#f3f5f8 0%,#fefefe 100%);box-shadow:0px 13px 17px 0px rgba(155,172,194,0.14);padding:50px 30px 30px}
.coo-list .item .logo{width:66px}
.coo-list .item .text{flex:1;padding-left:10px;font-size:15px;line-height:24px;color:#646c75;position:relative;z-index:1}
.coo-list .item .text:after{content:'';background:url("../images/index/coo-list-item-bg.png") no-repeat center/100%;width:57px;height:46px;z-index:-1;position:absolute;left:10px;top:-24px}
.coo-list .item .text .name{text-align:right}
.coo-list .item .text .name .in{display:inline-block;padding-left:49px;position:relative;margin-left:auto}
.coo-list .item .text .name .in:after{content:'';width:33px;height:1px;background:#646c75;position:absolute;left:0;top:50%}
.coo-list .slider-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#f3f5f8 10%,#fefefe 80%);box-shadow:0px 13px 17px 0px rgba(155,172,194,0.14);cursor:pointer;color:#9a9ea3;transition:all .4s ease;position:absolute;top:50%;transform:translateY(-50%)}
.coo-list .slider-btn.prev{left:-78px}
.coo-list .slider-btn.next{right:-78px}
.coo-list .slider-btn:not(.swiper-button-disabled):hover{background:linear-gradient(145deg,#dbdddf,#ffffff)}
.coo-logo-list.animate{animation:com-animate 1.5s ease both 1s}
.coo-logo-list ul{margin:-12px 0 0 -12px}
.coo-logo-list li{border-radius:5px;transition:all .4s ease;background:#fff;height:98px;width:calc(16.66% - 12px);margin-left:12px;margin-top:12px;display:flex;align-items:center;justify-content:center;box-shadow:0px 13px 17px 0px rgba(152,172,194,0.14)}
.coo-logo-list li:hover{transform:translateY(-4px);box-shadow:0px 13px 17px 0px rgba(152,172,194,0.33)}
.coo .bg{
    position: absolute;
    left: 0;
    top: 90px;
    width: 100%;
    height: calc(100% - 90px);
    z-index: -1;
}
.coo .bg img{
    max-width: 100%;
}
.coo .bg1{
    position: absolute;
    top:0;
    left: 0;
    transform: scale(0);
    transform-origin: left top;
    transition: all 1s ease .4s;
}
.coo .bg.animate .bg1,.coo .bg.animate .bg2{
    transform: scale(1);
}
.coo .bg2{
    position: absolute;
    top: 0;
    right: 0;
    transform: scale(0);
    transform-origin: right top;
    transition: all 1s ease .4s;
}
.coo .bg3{
    position: absolute;
    top: 3%;
    left: 38%;
    animation: _bg2 5s ease-in-out infinite .2s;
}
.coo .bg4{
    position: absolute;
    top: 20%;
    left: 16%;
    animation: float 5s ease-in-out infinite;
}
.coo .bg5{
    position: absolute;
    bottom: 0;
    left: 9%;
    animation: _bg2 5s ease-in-out infinite;
}
.coo .bg6{
    position: absolute;
    bottom: 0;
    right: 0;
    transform: scale(0);
    transform-origin: right bottom;
    transition: all 1s ease .4s;
}
.coo .bg.animate .bg6{
    transform: scale(1);
}

@keyframes _bg2{0%{transform:translatey(0) scale(1)}50%{transform:translatey(20px) scale(0.8)}100%{transform:translatey(0) scale(1)}}

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

@media all and (max-width:1599px) {
    /* 1440 × (700)  */
    .com-btn{padding: 12px 25px}
    .section{padding-top: 84px}

    /* 解决方案 */
    .solution-nav{height: 400px;padding: 30px 0}
    .solution-nav li{padding-left: 30px}
    .solution-nav a{padding: 3px}
    .solution-txt .logo{padding: 20px 0}

    /* 合作企业 */
    .coo .bg{top: 84px;height: calc(100% - 84px)}
    .coo-list .item{padding: 40px 24px 30px}
    .coo-list .item .text:after{width: 40px;height: 30px;top: -10px}
    .coo-list{max-width: 80%}
    .coo-logo-list li{height: 90px}
    .coo .bg1 img{max-width: 80%}
}

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

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

@media all and (max-width:1279px) {
    /* 1152 × (700) */
    .section{height: auto!important;padding: 0}
    .com-tip{margin-top: 6px}

    /* banner */


    /* 简介 */
    .intro{padding: 100px 0 60px}
    .intro .txt p{font-size: 15px;line-height: 26px}
    .intro .txt{margin-top: 20px}
    .intro .pic .one{width: 92px;top: -19%}
    .intro .pic .two{width: 100px}
    .intro .pic .three{right: 5%;width: 100px}
    .intro .pic .four{left: 44%;bottom: 4%;width: 100px}

    /* 解决方案 */
    .solution{padding: 0;z-index: 2}
    .solution-main{position: static;padding: 60px 0}
    .solution-bg{position: absolute;width: 100%;z-index: -1}
    .solution-nav{height: 360px;width: 20%}
    .solution-nav a{font-size: 15px}
    .solution-nav li{padding-left: 20px}
    .solution-txt .tit{font-size: 22px}
    .solution-txt .desc{font-size: 15px;line-height: 22px;margin-top: 10px}
    .solution-txt .icon ul{margin: -15px 0 0 -15px}
    .solution-txt .icon li{margin: 15px 0 0 15px}
    .solution-txt .icon li{width:110px;height: 36px}
    .solution-txt .logo{max-width: 100%;padding: 16px 0}

    /* 合作企业 */
    .coo{padding: 60px 0}
    .coo .bg{height: 100%;top: 0}
    .coo-list .item .text{font-size: 14px;line-height: 22px}
    .coo-list .item .logo{width: 40px}
    .coo-list{max-width: 88%}
    .coo-list .slider-btn.next{right: -50px}
    .coo-list .slider-btn.prev{left: -50px}
    .coo-list .swiper-container{padding-bottom: 30px}
    .coo-logo-list li{height: 80px}
    .coo .bg img{max-width: 80%}
    .coo .bg2,.coo .bg .bg6{text-align: right}
    .coo .bg1 img{max-width: 60%}
    .coo .bg4{top: 13%}
}

@media all and (max-width:1151px) {
    /* 1024 */
    .banner .btn-toggle{display: none}
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */

    /* banner */
    .banner picture .bg{min-height: 500px;height: auto}
    .banner-cont .line{width: 50px;transition: none}
    .banner-cont .title{animation:none!important}
    .banner svg{display:none}

    /* 简介 */
    .intro{padding: 50px 0}
    .intro .com-tit,.intro .com-tip{text-align: center}
    .intro .pic{width: 550px;transform: scale(1);margin: 80px auto 0}
    .intro .cont{width: 100%}
    .intro .pic .one{left: 17%;top: -12%}
    .intro .pic .two{left: 7%;top: 27%}
    .intro .pic .four{left: 45%;bottom: 7%}
    .intro .pic .three{right: 8%;top: 18%}

    /* 解决方案 */
    .solution-main{padding: 50px 0}
    .solution-txt .tit{font-size: 20px}
    .solution-txt .desc{font-size: 14px}
    .solution-nav{height: auto}
    .solution-nav li{padding-left: 14px}
    .solution-nav a{font-size: 14px}
    .solution-nav li + li{margin-top: 10px}

    /* 合作企业 */
    .coo{padding: 50px 0}
    .coo-list .item{padding: 30px 15px 19px}
    .coo-list .item .text .name .in:after{width: 20px}
    .coo-list .item .text .name .in{padding-left: 30px}
    .coo-logo-list li{width: calc(25% - 12px)}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .com-tip{font-size: 13px;margin-top: 4px}
    .com-btn{padding: 10px 20px;font-size: 13px}

    /* banner */
    .banner picture .bg{min-height: 400px;height: auto}
    .banner-cont .contain{align-items: center}

    /* 简介 */
    .intro{padding: 40px 0}
    .intro .txt p{font-size: 14px;line-height: 24px}
    .intro .pic{width: 300px}
    .intro .pic .one{width: 50px}
    .intro .pic .two,.intro .pic .three{width: 56px}
    .intro .pic .four{width: 60px}
    @keyframes float{0%{transform:translatey(0)}50%{transform:translatey(-10px)}100%{transform:translatey(0)}}
    .intro .pic{margin-top: 50px}
    .intro .com-btn{margin: 15px auto 0}

    /* 解决方案 */
    .solution-main{padding: 40px 0}
    .solution-nav{width: 100%;padding:5px;overflow-y: hidden;overflow-x: auto}
    .solution-nav ul{display: flex}
    .solution-nav a{white-space: nowrap}
    .solution-nav li{padding: 0 0 0 5px}
    .solution-nav li + li{margin-top: 0;margin-left:10px}
    .solution-nav li:after{width: 2px;height: calc(100% - 15px);top: 8px}
    .solution-txt{width: 100%;margin-top: 30px}
    .solution-txt .icon li,.solution-txt .icon li:not(.last){font-size: 13px}
    .solution-txt .icon ul{margin: -10px 0 0 -10px}
    .solution-txt .icon li{margin: 10px 0 0 10px}
    .solution-txt .logo{padding: 5px 0 15px}
    .solution-txt .logo .logo-item{width: 50%;margin-top: 10px}

    /* 合作企业 */
    .coo-list .slider-btn{display: none}
    .coo-list{max-width: 100%}
    .coo-logo-list ul{margin: -5px 0 0 -5px}
    .coo-logo-list li{width: calc(50% - 5px);margin-top: 5px;margin-left: 5px}
    .coo-list .swiper-container{padding-bottom: 20px}
    .coo .bg4{top: 3%}
    .coo .bg3{top: 1%}
}