@charset "utf-8";

/* frame */
a { transition:all 0.5s;}
body{min-width: 1400px;font-weight:400;background: #fff;}
.clear{clear: both;}
#content{zoom: 1;width: 100%;}
.row{width: 1400px; margin: auto; position: relative;}
.row:after { content:""; clear:both; display:block; overflow:hidden;}

#header { display: none;}
#headerChannel{ position:relative; width:100%; height: 800px; background:#156EE4 url(../img/bg-banner.jpg) no-repeat center bottom; background-size: cover; }
#headerChannel .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerChannel .logo img { height:100%; width:auto;}
#headerChannel .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerChannel .links a { height:34px;background: none; border: 1px solid rgba(238, 238, 238, 0.3); border-radius: 18px;line-height: 34px;text-align: center;color: #fff;font-size: 16px; float:left; padding:0 1.5em;margin-left:10px;}
#headerChannel .links a:hover {background: #1155AF; border-color: #1155AF; }

#headerChannel .con { position: absolute; left: 0; top: 293px; left: 0; line-height: 1.3; color: #fff; text-align: left; }
#headerChannel .con h1 { font-size: 92px; font-weight: bold; }
#headerChannel .con h3 { margin-top: 50px; font-size: 18px; }
#headerChannel .pics { position: absolute; right: 0; top: 174px; }
#headerChannel .pics > div { background-size: contain; }
#headerChannel .p-01 { width: 600px; height: 426px; background: url(../img/pic-01.png) no-repeat center center; }

.rowIntro { margin: -80px 0 0; padding: 40px; text-align: justify; font-size: 18px; color: #333; text-indent: 2em; line-height: 40px; background: #fff; border-radius: 20px; font-weight: normal; box-shadow: 0px 10px 20px 0px rgba(16, 103, 219, 0.1); }

.rowGroup { padding: 80px 0; overflow: hidden; }

.rowBox > .hd { text-align: center; font-size: 0; line-height: 1; margin-bottom: 50px; }
.rowBox > .hd h3 { display: inline-block; vertical-align: top; font-size: 40px; font-weight: bold; color: #333; line-height: 54px; }
.rowBox > .hd h3::before,
.rowBox > .hd h3::after { position: absolute; margin: 0 20px; top: 50%; width: 30px; height: 30px; content: ''; top: 50%; transform: translateY(-50%); background: url(../img/icon-tit.png) no-repeat 0 0; background-size: contain; }
.rowBox > .hd h3::before { right: 100%; }
.rowBox > .hd h3::after { left: 100%; }
.rowBox > .hd .intro { margin-top: 17px; font-size: 18px; color: #666; line-height: 32px; }

#xtjz { padding-bottom: 0; }
#xtjz .rowBox > .bd { padding: 50px 0 80px; background: url(../img/bg-01.jpg) no-repeat center bottom; background-size: cover;  }

/* 价值列表 */
.valuesList li { margin-top: 80px; font-size: 0; line-height: 1; text-align: center; }
.valuesList li:first-of-type { margin-top: 0; }
.valuesList .title { position: relative; display: inline-block; vertical-align: top; padding: 0 50px; font-size: 32px; color: #1067db; text-align: center; line-height: 104px; font-weight: bold; margin-bottom: 40px; animation-name: tit; }
.valuesList .title::before { position: absolute; left: 0; top: 0; content: ''; width: 104px; height: 100%; background: url(../img/icons-number.png) no-repeat -2px 0; background-size: auto 100%; }
.valuesList .title span { position: relative; }
.valuesList .con { position: relative; padding: 30px; display: flex; align-items: center; gap: 50px; background: #fff; border-radius: 20px; box-shadow: 0px 5px 10px 0px rgba(16, 103, 219, 0.05); }
.valuesList .intro { flex: 1 0 0%; font-size: 16px; color: #333; line-height: 36px; text-indent: 2em; text-align: justify; }
.valuesList .pic { width: 256px; height: 200px; background: url(../img/pic-02.png) no-repeat center center; background-size: contain; }

.valuesList .li2 .title::before { background-position: -196px 0; }
.valuesList .li3 .title::before { background-position: -410px 0; }

.valuesList .li3 .pic { background-image: url(../img/pic-03.png); }

.valuesList .con { transition: all ease 0.6s; }

.valuesList .con:hover { transform: translateY(-10px); }


/* 优势列表 */
.advantagesList dl { margin-top: 45px; text-align: left; }
.advantagesList dl:first-of-type { margin-top: 0; }
.advantagesList dt { position: relative; z-index: 1; display: inline-block; vertical-align: top; padding: 0 40px; height: 70px; line-height: 70px; color: #fff; font-size: 24px; background: linear-gradient(90deg, #1067DB 0%, #63A5FD 100%); box-shadow: 10px 10px 0px 0px rgba(16, 103, 219, 0.05); border-radius: 20px 50px 50px 0; }
.advantagesList dd { margin-top: -35px; background: #fff; border-radius: 20px; box-shadow: 0px 5px 10px 0px rgba(16, 103, 219, 0.05); background: #fff; padding: 65px 30px 30px; font-size: 16px; color: #333; line-height: 36px; text-indent: 2em; text-align: justify; }

.advantagesList dl,
.advantagesList dt { transition: all ease 0.6s; }

.advantagesList dl:hover { transform: translateX(10px); }
.advantagesList dl:hover dt { padding: 0 60px; }

/* 功能特性 */
.characteristics { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.characteristics li { position: relative; top: 0; flex: 1 0 680px; }
.characteristics .con { height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.characteristics .title { position: relative; min-width: 250px; padding: 0 40px 0 20px; height: 50px; line-height: 50px; color: #fff; font-size: 24px; border-radius: 5px 0 0 0; overflow: hidden; }
.characteristics .title::before { position: absolute; left: 0; right: 0; top: 0; content: ''; height: 100%; background: linear-gradient(90deg, #1067DB 0%, #63A5FD 100%); border-radius: 0 10px 0 0; transform: skewX(32deg); transform-origin: right bottom; }
.characteristics .title span { position: relative; }
.characteristics .intro { position: relative; width: 100%; flex-grow: 1; min-height: 148px; box-sizing: border-box; padding: 20px; padding-left: 50px; background: linear-gradient(124.75deg, #FFFFFF 68.65%, #EEF4F9 100%); border: 1px solid #DFE9F2; border-radius: 0 0 5px 5px; box-shadow: 0px 5px 10px 0px rgba(16, 103, 219, 0.1); font-size: 16px; line-height: 36px; }
.characteristics .intro .fa { position: absolute; left: 20px; top: 32px; font-size: 13px; line-height: 1; color: #aabdd6;  }

.characteristics .con,
.characteristics .title { transition: all ease 0.6s; }

.characteristics li:hover .con { transform: translateY(-10px); }
.characteristics li:hover .title { padding: 0 60px 0 40px; }
.characteristics li:hover .intro .fa { animation: icon 0.6s ease 1; }



/* 功能清单 */
#gnqd { background: url(../img/bg-03.jpg) no-repeat center center; background-size: cover;  }
#gnqd .rowBox > .bd { border: 1px solid #DFE9F2; background: #F8F9FA; padding: 9px; border-radius: 10px; }
.functionsList { padding: 50px; border: 1px solid #DFE9F2; background: #fff; border-radius: 10px; }
.functionsList li { border-bottom: 1px solid #DFE9F2; }
.functionsList .title { position: relative; z-index: 1; padding: 0 50px; line-height: 80px; font-size: 24px; color: #333; cursor: pointer; overflow: hidden; }
.functionsList .title::before { position: absolute; content: ''; right: 0; top: -110px; width: 300px; height: 300px; background: url(../img/bg-02.png) no-repeat center center; background-size: contain; animation: rotate 15s linear infinite; }
.functionsList .title .fa { margin: 25px 20px 0 0; display: inline-block; vertical-align: top; width: 30px; height: 30px; line-height: 30px; background: #DFE9F2; color: #ACBDD3; text-align: center; border-radius: 50%; font-size: 12px; text-indent: 2px; }
.functionsList .intro { display: none; padding: 30px 50px; line-height: 36px; font-size: 16px; text-align: justify; }
.functionsList .intro p { position: relative; padding-left: 20px; margin-bottom: 10px; }
.functionsList .intro p:last-of-type { margin-bottom: 0; }
.functionsList .intro p::before { position: absolute; left: 0; top: 15px; content: ''; width: 7px; height: 7px; background: #ACBDD3; border-radius: 50%; }

.functionsList li,
.functionsList .title,
.functionsList .title .fa { transition: all ease 0.6s; }

.functionsList li:hover .title { padding-left: 60px; }
.functionsList li:hover .title .fa { background: #1067DB; color: #fff; }

.functionsList li.on .title { background: #1067DB; color: #fff; border-radius: 10px; padding-left: 50px; }
.functionsList li.on .title .fa { background: #fff; color: #1067DB; transform: rotate(90deg); }



/* 动画 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes tit {
    0% {
        opacity: 0;
        transform: scale(5);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes icon {
    0% {
        transform: scale(3);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}