@charset "utf-8";

/* frame */
a { transition:all 0.5s;}
body{min-width: 1400px;font-weight:400;background: #fff;}
.wrap { overflow: hidden; }
.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: 700px; background: url(../img/bg-banner.jpg) no-repeat center bottom; background-size: cover; overflow: hidden; }
#headerChannel .row::before { position: absolute; content: ''; left: -490px; right: -490px; top: 600px; height: 900px; background: #fff; border-radius: 60%; }
#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: linear-gradient(180deg, #FFFFFF 0%, #EEFCFF 100%); color: #0B237F; }

#headerChannel .con { position: absolute; left: 0; top: 230px; right: 0; line-height: 1.3; color: #fff; text-align: center; }
#headerChannel .con h1 { font-size: 92px; font-weight: bold; }
#headerChannel .con h3 { margin-top: 20px; font-size: 18px; color: rgba(255, 255, 255, 0.8); }

.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; }

.rowBox > .hd { position: relative; text-align: center; font-size: 0; line-height: 1; padding: 53px 0; }
.rowBox > .hd .number { position: absolute; left: 0; right: 0; top: -10px; width: 2em; margin: auto; font-size: 120px; line-height: 1; font-family: "Impact"; color: #f4f6fd; background: linear-gradient(180deg, rgba(208, 217, 247, 0.5) 0%, rgba(208, 217, 247, 0) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; animation-name: tit; }
.rowBox > .hd h3 { position: relative; display: inline-block; vertical-align: top; padding: 0 30px; font-size: 40px; font-weight: bold; color: #0B237F; line-height: 54px; }
.rowBox > .hd h3::before,
.rowBox > .hd h3::after { position: absolute; top: 50%; width: 10px; height: 10px; content: ''; top: 50%; transform: translateY(-50%); background: rgba(11, 35, 127, 0.6); border-radius: 50%; }
.rowBox > .hd h3::before { right: 100%; margin-right: 55px; box-shadow: 22.5px 0 0 2.5px rgba(11, 35, 127, 0.8), 50px 0 0 5px #0B237F; }
.rowBox > .hd h3::after { left: 100%; margin-left: 55px; box-shadow: -22.5px 0 0 2.5px rgba(11, 35, 127, 0.8), -50px 0 0 5px #0B237F; }
.rowBox > .hd .intro { margin-top: 50px; font-size: 16px; color: #333; line-height: 2; }
.rowBox > .bd .moreBtn { margin-top: 50px; text-align: center; font-size: 0; line-height: 1; }
.rowBox > .bd .moreBtn a { display: inline-block; vertical-align: top; padding: 0 30px; line-height: 48px; border-radius: 5px; background: #0B237F; color: #fff; font-size: 18px; box-shadow: 0px 2px 0px 0px #FEE632; transition: all ease 0.5s; }
.rowBox > .bd .moreBtn a:hover { padding: 0 40px; }



/* 区别列表 */
#difference { padding-top: 0; }
.differenceList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 25px; }
.differenceList li { position: relative; padding: 50px 30px 38px; flex: 1 0 450px; box-sizing: border-box; border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden; }
.differenceList li::before { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: #0B237F; opacity: 0; transform: scaleX(0); transform-origin: center center; visibility: hidden; }
.differenceList .pic { position: relative; margin: 0 auto; width: 90px; }
.differenceList .pic span { display: block; width: 100%; height: 90px; background: url(../img/icons-difference.png) no-repeat 0 0; background-size: auto 270px; }
.differenceList .con { position: relative; margin-top: 20px; }
.differenceList .title { position: relative; font-size: 24px; color: #333; text-align: center; line-height: 32px; font-weight: bold; text-align: center; }
.differenceList .intro { margin-top: 20px; font-size: 16px; color: #666; line-height: 32px; text-indent: 2em; text-align: justify; }
.differenceList .intro p { margin-bottom: 20px; }
.differenceList .intro p:last-of-type { margin-bottom: 0; }

.differenceList .li2 .pic span { background-position: -90px 0; }
.differenceList .li3 .pic span { background-position: -180px 0; }

.differenceList li,
.differenceList li::before,
.differenceList li .con,
.differenceList li .title,
.differenceList li .intro { transition: all ease 0.5s; }
.differenceList li:hover { border-color: #0B237F; }
.differenceList li:hover::before { transform: scaleX(1); opacity: 1; visibility: visible; }
.differenceList li:hover .pic span { animation: icon 0.6s ease 1; }
.differenceList li:hover .con { transform: translateY(10px); }
.differenceList li:hover .title { color: #fff; }
.differenceList li:hover .intro { color: #C1D8ED; }

.differenceList .li1:hover .pic span { background-position: 0 -180px; }
.differenceList .li2:hover .pic span { background-position: -90px -180px; }
.differenceList .li3:hover .pic span { background-position: -180px -180px; }


/* 优势列表 */
#issues { padding-top: 0; background: url(../img/bg-01.jpg) no-repeat center bottom; background-size: contain; }
.issuesList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.issuesList li { position: relative; top: 0; flex: 1 0 690px; }
.issuesList .con { padding: 40px 30px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; background: rgba(249, 250, 255, 0.5); border: 1px solid #E6EFF6; box-sizing: border-box; }
.issuesList .title span { position: relative; display: block; font-size: 23px; line-height: 32px; font-weight: bold; padding-left: 36px; color: #333; }
.issuesList .title span::before { position: absolute; left: 0; top: 2px; width: 21px; height: 26px; content: ''; background: url(../img/dot-01.png) no-repeat 0 0; background-size: contain; }
.issuesList .intro { margin-top: 18px; font-size: 16px; line-height: 32px; color: #666; text-indent: 2em; text-align: justify; }

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

.issuesList li:hover .con { transform: translate(-5px, -5px); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1); }
.issuesList li:hover .title span::before { animation: icon 0.6s ease 1; }

#functions { background: url(../img/bg-02.jpg) repeat-y center top; background-size: 100% auto; }


/* 亮点列表 */
.highlightsList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.highlightsList li { flex: 1 0 100%; }
.highlightsList .item { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 60px; background: #F9FAFF; border-radius: 10px; padding: 40px 30px; height: 100%; box-sizing: border-box; }
.highlightsList .con { flex: 1 0 0%; }
.highlightsList .title { font-size: 24px; line-height: 32px; font-weight: bold; color: #333; }
.highlightsList .number { float: left; margin: 1px 15px 0 0; width: 30px; height: 30px; text-align: center; line-height: 30px; background: #0B237F; box-shadow: -4px 0px 0px 0px #FEE632; border-radius: 50%; font-size: 16px; font-weight: bold; color: #fff; }
.highlightsList .intro { margin-top: 20px; line-height: 32px; font-size: 16px; text-align: justify; color: #666; }
.highlightsList .intro p { position: relative; padding-left: 2em; margin-bottom: 18px; }
.highlightsList .intro p:last-of-type { margin-bottom: 0; }
.highlightsList .intro p::before { position: absolute; left: 12px; top: 14px; content: ''; width: 6px; height: 6px; background: #3C5185; border-radius: 50%; box-shadow: 3px 0 0 0 rgba(60, 81, 133, 0.5); }
.highlightsList .pics { display: flex; flex-wrap: wrap; gap: 10px; }
.highlightsList .pics img { flex-grow: 1; width: 140px; height: auto; box-sizing: border-box; border: 2px solid #0B237F; border-radius: 10px; }

.highlightsList .li3 .pics { width: 440px; }

.highlightsList .li4,
.highlightsList .li5,
.highlightsList .li7,
.highlightsList .li8,
.highlightsList .li10,
.highlightsList .li11 { flex-basis: 690px; }

.highlightsList .li4 .item,
.highlightsList .li5 .item,
.highlightsList .li7 .item,
.highlightsList .li8 .item,
.highlightsList .li10 .item,
.highlightsList .li11 .item { align-items: flex-start; }

.highlightsList .item { transition: all ease 0.4s; }

.highlightsList li:hover .item { transform: translateY(-10px); box-shadow: 0 4px 0 rgba(11, 35, 127, 0.1); }

/* 图片轮播 */
.picFocus { position: relative; width: 510px; height: 284px; padding: 0 30px 0 20px; }
.picFocus::before { position: absolute; content: ""; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 470px; height: 15px; border-radius: 100%; box-shadow: 0 7px 30px rgba(11, 35, 127, 0.6); }
.picFocus .bd { position: relative; }
.picFocus .bd li { position: relative; padding: 10px 0 0 10px; }
.picFocus .bd li::before { position: absolute; content: ''; left: 0; top: 0; right: 10px; bottom: 10px; background: linear-gradient(109.57deg, #DEE8F5 0.81%, #FFFFFF 134.45%); border-radius: 10px; }
.picFocus .bd li img { display: block; position: relative; width: 500px; height: 274px; box-sizing: border-box; border: 2px solid #0B237F; border-radius: 10px; }
.picFocus .prev,
.picFocus .next { position: absolute; top: 50%; width: 30px; line-height: 60px; text-align: center; font-size: 14px; color: #666; transform: translateY(-50%); }
.picFocus .prev { left: 0; text-indent: 1px; border-radius: 3px 0 0 3px; }
.picFocus .next { right: 0; text-indent: 1px; border-radius: 0 3px 3px 0; }
.picFocus .prev:hover,
.picFocus .next:hover { background: #0B237F; color: #fff; }

.picFocus .pageState { position: absolute; left: 30px; top: 10px; width: 40px; text-align: center; line-height: 25px; border-radius: 10px 0 10px 0; font-size: 12px; color: #fff; background: #0B237F; }
.picFocus .pageState span { font-size: 14px; display: inline-block; vertical-align: top; }


/* 功能清单 */
#list { margin-top: 90px; }
.functionsList > li { margin-top: 10px; border: 1px solid #E3E7F4; border-radius: 5px; overflow: hidden; }
.functionsList > li:first-of-type { margin-top: 0; }
.functionsList .title { position: relative; z-index: 1; padding: 0 30px; line-height: 70px; font-size: 24px; color: #333; cursor: pointer; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%); }
.functionsList .title .fa { float: right; color: #ABABAB; font-size: 18px; line-height: inherit; }
.functionsList .con { padding: 30px; }
.functionsList .intro { line-height: 32px; font-size: 16px; text-align: justify; color: #666; }
.functionsList .intro p { position: relative; padding-left: 2em; margin-bottom: 18px; background: url(../img/dot-02.png) no-repeat 9px 11px; }
.functionsList .intro p:last-of-type { margin-bottom: 0; }
.functionsList > li,
.functionsList .title,
.functionsList .title .fa { transition: all ease 0.6s; }

.functionsList > li:hover .title { padding-left: 45px; }
.functionsList > li:hover .title .fa { color: #0B237F; }

.functionsList > li.on .title { background: #0B237F; color: #fff; }
.functionsList > li.on .title .fa { transform: rotate(180deg); color: #fff; }


/* tabBox */
.tabBox > .hd ul { display: flex; flex-wrap: wrap; margin: -0.35%; }
.tabBox > .hd li { width: 15.9666%; margin: 0.35%; box-sizing: border-box; text-align: center; font-size: 18px; line-height: 50px; padding: 0 25px; background: #F8F9FA; border-radius: 5px; cursor: pointer; }
.tabBox > .hd li.on { background: #E8F2FF; color: #0B237F; font-weight: bold; }
.tabBox > .bd { padding-top: 20px; }

/* 底部通用 */
#technicalSupport { padding: 0; background: #fff; text-align: center; }
#technicalSupport .rowTi { margin-bottom: 0; padding: 53px 0; }
#technicalSupport .rowTi::before { content: '05'; position: absolute; left: 0; right: 0; top: -10px; width: 2em; margin: auto; font-size: 120px; line-height: 1; font-family: "Impact"; color: #f4f6fd; background: linear-gradient(180deg, rgba(208, 217, 247, 0.5) 0%, rgba(208, 217, 247, 0) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
#technicalSupport .rowTi h2 { position: relative; z-index: 1; display: inline-block; vertical-align: top; padding: 0 30px; }
#technicalSupport .rowTi h2::before,
#technicalSupport .rowTi h2::after { position: absolute; top: 50%; width: 10px; height: 10px; content: ''; top: 50%; transform: translateY(-50%); background: rgba(11, 35, 127, 0.6); border-radius: 50%; }
#technicalSupport .rowTi h2::before { right: 100%; margin-right: 55px; box-shadow: 22.5px 0 0 2.5px rgba(11, 35, 127, 0.8), 50px 0 0 5px #0B237F; }
#technicalSupport .rowTi h2::after { left: 100%; margin-left: 55px; box-shadow: -22.5px 0 0 2.5px rgba(11, 35, 127, 0.8), -50px 0 0 5px #0B237F; }
.techSupportList li a:hover { background-color: #E8F2FF; color: #0B237F; font-weight: bold; }
.lxss a,
.lxss a.sq { background-color: #0B237F; }

/* 动画 */
@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;
    }
}