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

.fa { line-height: inherit; vertical-align: top; }

#header { display: none;}
#headerChannel{ position:relative; width:100%; height: 685px; background: url(../img/bg-banner.jpg) no-repeat center bottom; background-size: cover; overflow: hidden; }
#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: #4671CD; }

#headerChannel .con { position: absolute; left: 0; top: 250px; 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; }

.rowGroup { padding: 50px 0; }

.rowBox > .hd { position: relative; text-align: center; font-size: 0; line-height: 1; margin-bottom: 50px; }
.rowBox > .hd h3 { position: relative; display: inline-block; vertical-align: top; min-width: 500px; padding-bottom: 32px; font-size: 40px; font-weight: bold; line-height: 1; border-bottom: 1px solid #ddd; color: #4E7BD5; background: linear-gradient(90deg, #4E7BD5, #1B369A); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
.rowBox > .hd h3::after { position: absolute; bottom: -1px; left: 0; right: 0; margin: auto; width: 72px; height: 5px; content: ''; background: #4671CD; }



/* 研发背景列表 */
#develop { background: url(../img/bg-01.jpg) no-repeat center center; background-size: cover; }
.developList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 45px; }
.developList li { position: relative; padding: 30px 0 0; flex: 1 0 435px; box-sizing: border-box; }
.developList .pic { position: absolute; z-index: 1; left: 0; top: 0; right: 0; margin: auto; width: 120px; }
.developList .pic span { display: block; width: 100%; height: 120px; background: linear-gradient(239.26deg, #8D9DFE 19.16%, #5CA7F3 87.44%); border-radius: 50%; }
.developList .pic span::before { display: block; content: ''; width: 100%; height: 100%; background: url(../img/icons-yfbj.png) no-repeat 0 0; background-size: auto 100%; }
.developList .con { position: relative; min-height: 372px; padding: 110px 28px 68px; box-sizing: border-box; border: 1px solid rgba(40, 76, 191, 0.2); background: linear-gradient(180deg, #D7ECFD 0%, rgba(255, 255, 255, 0.5) 100%); border-radius: 12px 80px 12px 80px; }
.developList .title { position: relative; font-size: 24px; color: #333; text-align: center; line-height: 32px; font-weight: bold; text-align: center; }
.developList .intro { font-size: 16px; color: #555; line-height: 32px; text-indent: 2em; text-align: justify; }
.developList .intro p { margin-bottom: 20px; }
.developList .intro p:last-of-type { margin-bottom: 0; }

.developList .li2 .pic span::before { background-position: -120px 0; }
.developList .li3 .pic span::before { background-position: -240px 0; }

.developList li,
.developList .con,
.developList .intro p { transition: all ease 0.5s; }
.developList li:hover .pic span { animation: bounce 1s ease 1; }
.developList li:hover .con { border-radius: 80px 12px 80px 12px; }
.developList li:hover .intro p { transform: translateY(5px); }


/* 亮点列表 */
#highlights { background: #F2F7FE url(../img/bg-02.jpg) no-repeat center bottom; background-size: 100% auto; }
.highlightsList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.highlightsList li { flex: 1 0 100%; }
.highlightsList .item { display: flex; flex-wrap: wrap; gap: 30px; background: #fff; border-radius: 12px; padding: 40px 40px; height: 100%; box-sizing: border-box; border: 1px solid #D4DBF2; }
.highlightsList .con { flex: 1 0 0%; }
.highlightsList .title span { display: inline-block; vertical-align: top; padding-right: 26px; font-size: 24px; line-height: 64px; color: #fff; background: linear-gradient(239.26deg, #8D9DFE 19.16%, #5CA7F3 87.44%); border-radius: 500px; }
.highlightsList .title span::before { float: left; margin: 5px 18px 5px 6px; width: 54px; height: 54px; border-radius: 50%; content: ''; background: #fff url(../img/icons-gnld.png) no-repeat 0 0; background-size: auto 100%; }
.highlightsList .intro { margin-top: 24px; line-height: 36px; font-size: 16px; text-align: justify; text-indent: 2em; color: #555; }
.highlightsList .intro p { position: relative; margin-bottom: 18px; }
.highlightsList .intro p:last-of-type { margin-bottom: 0; }
.highlightsList .pics { display: flex; flex-wrap: wrap; gap: 20px; padding: 0 10px; }
.highlightsList .pics img { flex-grow: 1; padding: 16px 10px; width: 194px; height: auto; box-sizing: border-box; background: #fff; border-radius: 12px; box-shadow: 0px 0px 12px 0px rgba(40, 76, 191, 0.3); }

.highlightsList .li2 .title span::before { background-position: -54px 0; }
.highlightsList .li3 .title span::before { background-position: -162px 0; }
.highlightsList .li4 .title span::before { background-position: -108px 0; }

.highlightsList .item,
.highlightsList .title span,
.highlightsList .title span::before { transition: all ease 0.4s; }

.highlightsList li:hover .item { transform: translateY(5px); }
.highlightsList li:hover .title span { padding-right: 50px; }
.highlightsList li:hover .title span::before { margin-right: 30px; transform: rotate(360deg); }

/* 图片轮播 */
.picFocus { position: relative; width: 660px; height: 370px; background: url(../img/bg-pc.png) no-repeat center center; background-size: contain; overflow: hidden; }
.picFocus .bd { position: relative; height: 290px; margin: 24px 87px 0 88px; overflow: hidden; }
.picFocus .bd li { position: relative; }
.picFocus .bd li img { display: block; position: relative; width: 100%; height: 290px; }
.picFocus .prev,
.picFocus .next { position: absolute; top: 50%; width: 40px; height: 64px; line-height: 62px; text-align: center; font-size: 30px; color: #ddd; transform: translateY(-70%); border-radius: 4px; }
.picFocus .prev { left: 20px; }
.picFocus .next { right: 20px; }
.picFocus .prev:hover,
.picFocus .next:hover { background: linear-gradient(239.26deg, #8D9DFE 19.16%, #5CA7F3 87.44%); color: #fff; }



/* 功能清单 */
#functions { background: #F2F7FE url(../img/bg-03.jpg) no-repeat center bottom; background-size: 100% auto; }
.functionsList { display: flex; flex-wrap: wrap; gap: 20px 10px; justify-content: space-between; }
.functionsList > li { flex: 1 0 690px; box-sizing: border-box; border: 1px solid #C4CFF2; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #F2F7FE 12%, #EBF0FF 92%); }
.functionsList > li:first-of-type { margin-top: 0; }
.functionsList .title { position: relative; z-index: 1; padding: 0 30px; line-height: 78px; font-size: 24px; color: #333; cursor: pointer; overflow: hidden; }
.functionsList .title .fa { float: right; margin-top: 23px; width: 32px; height: 32px; text-align: center; line-height: 30px; background: rgba(219, 227, 248, 1); color: #284CBF; font-size: 16px; border-radius: 50%; text-indent: 2px; font-weight: bold; }
.functionsList .con { padding: 18px 0 45px; margin: 0 30px; border-top: 1px solid #D1E1F2; }
.functionsList .intro { line-height: 32px; font-size: 16px; text-align: justify; color: #555; }
.functionsList .intro p { position: relative; padding-left: 1em; margin-bottom: 10px; }
.functionsList .intro p:last-of-type { margin-bottom: 0; }
.functionsList .intro p::before { position: absolute; left: 2px; top: 14px; width: 5px; height: 5px; content: ''; background: #999; border-radius: 50%; }

.functionsList li:first-of-type { flex-basis: 100%; }

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

.functionsList > li:hover .title { padding-left: 45px; }

.functionsList > li.on .title { font-weight: bold; }
.functionsList > li.on .title .fa { transform: rotate(90deg); }



/* 底部通用 */
#technicalSupport { padding-bottom: 0; background: #fff; text-align: center; }
#technicalSupport .rowTi { padding: 0; height: auto; margin-bottom: 50px; }
#technicalSupport .rowTi h2 { position: relative; display: inline-block; vertical-align: top; min-width: 500px; padding-bottom: 32px; font-size: 40px; font-weight: bold; line-height: 1; border-bottom: 1px solid #ddd; color: #4E7BD5; background: linear-gradient(90deg, #4E7BD5, #1B369A); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
#technicalSupport .rowTi h2::after { position: absolute; bottom: -1px; left: 0; right: 0; margin: auto; width: 72px; height: 5px; content: ''; background: #4671CD; }
.techSupportList li { box-sizing: border-box; border-radius: 500px; border: 1px solid #ededed; overflow: hidden; }
.techSupportList li:hover { border-color: #fff; background: linear-gradient(239.26deg, #8D9DFE 19.16%, #5CA7F3 87.44%); }
.techSupportList li a { box-shadow: none; border-radius: 0; }
.techSupportList li:hover a { background-color: transparent; color: #fff; }

.lxss a,
.lxss a.sq { text-indent: 0; text-align: center; background: linear-gradient(239.26deg, #8D9DFE 19.16%, #5CA7F3 87.44%); }
.lxss a::before,
.lxss a.sq::before { display: inline-block; vertical-align: top; height: 60px; content: ''; width: 37px; background: url(../../products/img/lx-icon.png) no-repeat center center; margin-right: 14px; }
.lxss a.sq::before { width: 32px; background-image: url(../../products/img/tymk-icon.png); background-size: 32px auto; }