@charset "utf-8";

/* frame */
img { vertical-align: top; }
.wrap { overflow:hidden; }
a { transition:all 0.5s;}
body{font-weight:400;background: #fff;}
.clear{clear: both;}
#content{zoom: 1;width: 100%; background: none;padding: 0; overflow: hidden;}
.row{width: 100%; margin: auto; position: relative; padding: 0; }
.row::before,
.row::after { content:""; clear:both; display:table;}

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

#headerChannel{ position:relative; width:100%; height: 400px; background: url(../img/bg-banner.jpg) no-repeat center bottom; background-size: cover; overflow: hidden; }
#headerChannel .row { height: 100%; }
#headerChannel .logo-box { display: none; }
#headerChannel .logo{display:block;height:64.29px;float: left;overflow:visible;margin: 30px 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 #fff; 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%, #CFE2FA 100%); color: #021FA4; }

#headerChannel .con { position: absolute; left: 10px; top: 120px; right: 10px; line-height: 1.3; color: #fff; text-align: center; }
#headerChannel .con h1 { font-size: 28px; font-weight: bold; }
#headerChannel .con h3 { margin-bottom: 10px; font-size: 24px; font-weight: bold; }
#headerChannel .con .intro { margin-top: 10px; line-height: 1.5; font-size: 16px; color: rgba(255, 255, 255, 0.6); }

.rowGroup { padding: 25px 10px; }

.rowIntro { font-size: 16px; line-height: 30px; text-indent: 2em; text-align: justify; }

.rowBox > .hd { position: relative; text-align: center; font-size: 0; line-height: 1; margin-bottom: 15px; }
.rowBox > .hd h3 { position: relative; display: inline-block; vertical-align: top; padding: 9px 14px 19px; font-size: 23px; font-weight: bold; line-height: 30px; color: #021FA4; margin-bottom: 10px; }
.rowBox > .hd h3::before { position: absolute; content: ''; left: 0; top: 2px; width: 20px; height: 20px; background: linear-gradient(180deg, rgba(2, 31, 164, 0.2) 0%, rgba(2, 31, 164, 0) 100%); border-radius: 50%; }
.rowBox > .hd h3::after { position: absolute; content: ''; right: 9px; bottom: 14px; width: 10px; height: 10px; background: linear-gradient(225deg, rgba(216, 18, 12, 0.2) 0%, rgba(216, 18, 12, 0) 100%); border-radius: 50%; }
.rowBox > .hd h3 span { position: relative; z-index: 1; }
.rowBox > .hd h3 .line { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 60px; height: 4px; background: #021FA4; overflow: hidden; }
.rowBox > .hd h3 .line::before { position: absolute; content: ''; left: -10%; right: 62%; top: 0; height: 100%; background: #D8120C; transform: skewX(25deg); }
.rowBox > .hd .intro { margin: 10px 5px 0; font-size: 14px; line-height: 2; text-align: justify; color: #333; text-indent: 2em; }
.rowBox > .bd .moreWrap { margin-top: 20px; text-align: center; font-size: 0; line-height: 1; }
.rowBox > .bd .moreWrap a { display: inline-block; vertical-align: top; padding: 0 20px; border-radius: 500px; color: #fff; font-size: 14px; line-height: 40px; background: linear-gradient(90deg, #1067DB 0%, #021FA4 100%); }
.rowBox > .bd .moreWrap a:hover { transform: translateY(5px); box-shadow: 0 -3px 0 rgba(0, 53, 167, 0.3); }

/* 集约化建设 */
#construction { background: #F8FBFF url(../img/bg-01.png) repeat-y center top; background-size: 100% auto; }
.constructionList { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 10px; background: #fff; }
.constructionList li { position: relative; padding: 20px 15px; flex: 1 0 100%; box-sizing: border-box; border-top: 1px solid #f1f1f1; }
.constructionList li:first-of-type { border-top: none; }
.constructionList .pic { width: 100px; margin: 0 auto; }
.constructionList .pic span { display: block; width: 100%; height: 100px; }
.constructionList .pic span::before { display: block; content: ''; width: 100%; height: 100%; background: url(../img/icons-construction.png) no-repeat 0 0; background-size: auto 100%; }
.constructionList .con { padding-top: 10px; }
.constructionList .title { position: relative; font-size: 20px; color: #333; text-align: center; line-height: 32px; font-weight: bold; text-align: center; }
.constructionList .title span { display: block; }
.constructionList .intro { margin-top: 10px; font-size: 14px; color: #999; line-height: 2; text-align: center; }

.constructionList .li2 .pic span::before { background-position: -100px 0; }
.constructionList .li3 .pic span::before { background-position: -200px 0; }


/* 信创适配 */
#xcsp { background: #021FA4 url(../img/bg-03.png) repeat-x center bottom; }
#xcsp .rowBox > .hd h3 { color: #fff; }
#xcsp .rowBox > .hd h3::before { background: linear-gradient(180deg, rgba(207, 226, 250, 0.2) 0%, rgba(207, 226, 250, 0) 100%); }
#xcsp .rowBox > .hd h3::after { background: linear-gradient(180deg, rgba(207, 226, 250, 0.2) 0%, rgba(207, 226, 250, 0) 100%); }
#xcsp .rowBox > .hd h3 .line { background: #fff; }
#xcsp .rowBox > .hd h3 .line::before { background: #D6B581; }
#xcsp .rowBox > .hd .intro { color: #CFE2FA; }
#xcsp .rowBox > .bd { padding-top: 30px; }
#xcsp .rowBox > .bd .more { margin-top: 15px; text-align: center; color: #fff; font-size: 14px; line-height: 1.8; }
#xcsp .rowBox > .bd .more a { color: inherit; text-decoration: underline; }
#xcsp .rowBox > .bd .more .red { color: #f00; }

.xcspList { display: flex; flex-wrap: wrap; justify-content: center; }
.xcspList li { position: relative; width: 44%; margin: 0 3%; }
.xcspList li:nth-of-type(even) { margin-top: 40px; }
.xcspList .con { padding-bottom: 28%; background: url(../img/bg-02.png) no-repeat center bottom; background-size: 100% auto; animation: float 4s infinite; }
.xcspList .title { margin-bottom: 10px; font-size: 14px; line-height: 20px; font-weight: bold; text-align: center; color: #fff; }
.xcspList .title span { position: relative; display: inline-block; vertical-align: top; padding: 4px 15px; }
.xcspList .title span::before,
.xcspList .title span::after { position: absolute; left: 0; top: 50%; margin-top: -8px; width: 10px; height: 17px; content: ''; background: url(../img/icon-ear.png) no-repeat left top; background-size: 100% auto; }
.xcspList .title span::after { left: auto; right: 0; background-position: right bottom; }
.xcspList .pic { position: relative; margin: 0 15%; padding-bottom: 103.9%; }
.xcspList .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 5px; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(95%, transparent) , to(rgba(250, 250, 250, 0.3)));
}

.xcspList li:nth-of-type(2) .con { animation-delay: 400ms; }
.xcspList li:nth-of-type(3) .con { animation-delay: 800ms; }
.xcspList li:nth-of-type(4) .con { animation-delay: 200ms; }
.xcspList li:nth-of-type(5) .con { animation-delay: 400ms; }


/* 移动设备适配 */
.devicesPic { padding: 15px; background: #F6FBFF; border: 1px solid #F0F0F0; border-radius: 10px; text-align: center; }
.devicesPic span { display: inline-block; vertical-align: top; }
.devicesPic img { max-width: 100%; height: auto; }
.devicesIntro { margin: 20px 10px 0; font-size: 14px; line-height: 2; text-align: justify; color: #333; text-indent: 2em; }
.mobileList { padding: 25px 10px 10px; display: flex; flex-wrap: wrap; row-gap: 20px; justify-content: center; }
.mobileList li { width: 100%; }
.mobileList .pic { position: relative; }
.mobileList .pic::before { position: absolute; content: ''; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.0633723) 27.17%, #FFFFFF 95.09%); }
.mobileList .pic img { width: 100%; height: auto; }
.mobileList .title { margin-top: 8px; text-align: center; }
.mobileList .title span { display: inline-block; vertical-align: top; font-size: 14px; line-height: 35px; padding: 0 32px; background: linear-gradient(90deg, #1067DB 0%, #021FA4 100%); color: #fff; border-radius: 500px; }

/* 无障碍改造和适老化建设 */
#elderly { background: #DCEBFF url(../img/bg-04.jpg) repeat-x center center; }
.elderlyBox { padding-top: 10px; }
.elderlyBox > .hd { display: flex; justify-content: center; }
.elderlyBox > .hd ul { display: flex; justify-content: space-between; border: 1px solid #C8CEEC; background: #fff; border-radius: 500px; }
.elderlyBox > .hd li { flex-grow: 1; padding: 11px 15px; color: #021FA4; font-size: 16px; line-height: 22px; font-weight: bold; border-radius: 500px; text-align: center; cursor: pointer; }
.elderlyBox > .hd li.on { margin: -1px; padding-top: 12px; padding-bottom: 12px; color: #fff; background: linear-gradient(90deg, #1067DB 0%, #021FA4 100%); }
.elderlyBox > .bd { padding-top: 20px; }
.elderlyBox > .bd li { display: inline-flex; vertical-align: top; gap: 10px; justify-content: center; }
.elderlyBox > .bd li .pc { position: relative; width: 65%; background: #F3F9FF; border: 1px solid #0B237F; border-radius: 10px; padding: 20px 5px 5px; }
.elderlyBox > .bd li .pc img { display: block; width: 100%; height: auto; }
.elderlyBox > .bd li .pc::before { position: absolute; left: 10px; top: 7px; content: ''; width: 6px; height: 6px; background: #FF5F5C; border-radius: 50%; box-shadow: 10px 0 0 #FFC359, 20px 0 0 #0CCDA3; }
.elderlyBox > .bd li .phone { position: relative; width: 20.7%; background: #F3F9FF; border: 1px solid #0B237F; border-radius: 10px; padding: 5px; }
.elderlyBox > .bd li .phone img { display: block; width: 100%; height: auto; border-radius: 5px; }
.elderlyBox > .bd li .phoneTitle { position: absolute; left: -60px; top: 40%; padding: 0 10px; font-size: 12px; line-height: 26px; border-radius: 5px; color: #fff; background: linear-gradient(90deg, #1067DB 0%, #021FA4 100%); }

/* 平台 */
.platform { border-bottom: 1px solid #f0f0f0; padding: 20px 15px; }
.platformList li {display: flex;justify-content: center;align-items: center;gap: 15px;flex-direction: column;}
.platformList .pic span {display: block;width: 400px;height: 650px;/* background: url(../img/icons-platform.png) no-repeat 0 0; */animation: float 4s infinite;}
.platformList .pic img{max-width:100%;animation: float 4s infinite;text-align: center;}
.platformList .con {flex: 1 0 100%;/* order: 1; */}
.platformList .intro { font-size: 14px; line-height: 2; text-align: justify; text-indent: 2em; }
.platformList .more { margin-top: 15px; font-size: 0; line-height: 1; text-align: center; }
.platformList .more a { position: relative; z-index: 1; display: inline-block; vertical-align: top; line-height: 20px; padding: 8px 15px; color: #021FA4; font-size: 13px; perspective: 800px;  }
.platformList .more a::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #021FA4; border-radius: 500px; transition: all ease 0.6s; }

/*.platformList .pic span.cp01{background: url(../../products/img/jjfa-cp01.jpg) no-repeat center;background-size: 100%;}
.platformList .pic span.cpmb{background: url(../../products/img/jjfa-cpmb.jpg) no-repeat top center;margin: 20px;border: #fff solid 20px;box-shadow: #ccc 0 0 20px;background-size: 100% auto;width:300px;height: 480px;border-radius: 10px;}
.platformList .li2 .pic span { background-position: -180px 0; }
.platformList .li3 .pic span { background-position: -360px 0; }*/
.platformList .li2 .pic img { }
.platformList .li3 .pic img { margin: 20px;border: #fff solid 20px;box-shadow: #ccc 0 0 20px; width:76%;border-radius: 10px;}

/* 基础应用 */
.atlasBox .hd {margin-right: 20px; width: 100%; background: #2165D0;  background: linear-gradient(to bottom, #20AEFB, #1667F0); border-radius: 5px;display: flex;flex-direction: column;justify-content: center;height: 120px;}
.atlasBox .hd a {display: block; overflow: hidden;height: 120px;display: flex;flex-direction: column;justify-content: center; transition: all 0.5s;background: #2165D0;background: linear-gradient(to bottom, #20AEFB, #1667F0);border-radius: 5px;background: url(../img/linkico.png) no-repeat 95% 20%;}
.atlasBox .hd a:hover{filter:brightness(120%)}
.atlasBox .hd a:after { content: ""; position: absolute; width: 100px; height: 100%; top: 0; left: -100%; overflow: hidden; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-30deg); }
.atlasBox .hd a:hover:after { left: 150%; transition: left 1s ease 0s; }


.atlasBox .hd i {display:block;height:60px;background :url(../../products/img/atlasico1.png) no-repeat center;width: 100%;}
.atlasBox .hd h4 {font-size: 16px;font-weight:bold;color:#fff;padding:0 20px;text-align:center;}
.atlasBox dl {background:#E8F1F5;overflow:hidden;padding:10px;border-radius:5px;margin-bottom: 10px;}
.atlasBox .dl3 { margin:0;}
.atlasBox dt {height: 24px;width: auto;padding: 10px;background:#2165D0;border-radius:5px;display:flex;flex-direction: column;justify-content: center;color:#fff;font-size: 15px;font-weight:bold;line-height:18px;text-align:center;}
.atlasBox dd {overflow:hidden;position:relative;margin: 1% 0 -1%;}
.atlasBox ul {position:relative;display:flex;flex-wrap: wrap;justify-content: flex-start;margin-right: -2%;min-height: 76px;align-content: center;}
.atlasBox ul li {height:36px;line-height:36px;margin: 1% 2% 1% 0;background:#fff;border-radius:5px;text-align:center;width: 48%;margin-right: 2%;font-size: 14px;color: #333;overflow:hidden;}
.atlasBox .dl1 dt {}
.atlasBox ul li a {display:block;background:url(../img/linkico.png) no-repeat 95%;padding:0 8%;height: 100%;}
.atlasBox ul li a:hover { background-color:#2165D0; color:#fff;}

/* 为政府网站量身打造的业务系统 */
.businessList { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.businessList li { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 0 100%; padding: 20px; box-sizing: border-box; border: 1px solid #f0f0f0; border-radius: 5px; }
.businessList .pic { width: 60px; }
.businessList .pic span { display: block; height: 60px; background: url(../img/icons-business.png) no-repeat 0 0; background-size: auto 100%; }
.businessList .con { flex: 1 0 0%; }
.businessList .title { font-size: 20px; line-height: 28px; font-weight: bold; text-align: center; color: #333; }
.businessList .intro { margin-top: 10px; font-size: 14px; line-height: 2; text-align: justify; color: #666; text-indent: 2em; }
.businessList .more a { position: relative; z-index: 1; display: block; line-height: 20px; padding: 8px 15px; color: #021FA4; font-size: 13px; border: 1px solid #021FA4; border-radius: 500px; overflow: hidden; }
.businessList .more a::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; width: 100%; height: 100%; transition: all ease 0.4s; transform-origin: center bottom; transform: scaleY(0); opacity: 0; background: #021FA4; }


.businessList .li2 .pic span { background-position: -60px 0; }
.businessList .li3 .pic span { background-position: -120px 0; }
.businessList .li4 .pic span { background-position: -180px 0; }
.businessList .li5 .pic span { background-position: -240px 0; }
.businessList .li6 .pic span { background-position: -300px 0; }
.businessList .li7 .pic span { background-position: -360px 0; }
.businessList .li8 .pic span { background-position: -420px 0; }
.businessList .li9 .pic span { background-position: -540px 0; }
.businessList .li10 .pic span { background-position: -480px 0; }
.businessList .li11 .pic span {background-position: -610px 0;}

/* 安全性 */
#solutionSafety { }
#solutionSafety .rowBox > .hd .intro { margin-top: 10px; text-align: center; }
#solutionSafety .rowBox > .bd { padding-top: 10px; }

/* 客户案例 */
#case { background: #F8FAFF url(../img/bg-12.jpg) no-repeat center top; background-size: contain; }
#case .rowBox > .hd .intro { text-align: center; font-size: 14px; }
#case .rowBox > .hd .intro b { font-size: 18px; color: #021FA4; }
#case .rowBox > .bd .moreWrap { margin-top: 25px; }
#case .rowBox > .bd .moreWrap a { padding: 0 20px; border: 1px solid #021FA4; background: none; line-height: 38px; color: #021FA4; }

.caseFocus { position: relative; margin: 0 30px; }
.caseFocus .bd ul { padding: 10px 0 !important; }
.caseFocus .bd li { position: relative; padding: 15px; background:#fff; border-radius: 10px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); margin: 0 10px; overflow: hidden; }
.caseFocus .bd li .pic { position: relative; height: 0; overflow: hidden; padding-bottom: 66.66%; }
.caseFocus .bd li .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; }
.caseFocus .bd li .title { margin-top: 15px; line-height: 26px; font-size: 18px; font-weight: bold; text-align: center; }
.caseFocus .bd li .intro { margin-top: 10px; line-height: 22px; font-size: 14px; text-align: justify; overflow: hidden; color: #666; }
.caseFocus .bd li .more { margin-top: 10px; display: block; line-height: 38px; border-radius: 8px; background: #021FA4; color: #fff; text-align: center; font-weight: bold; font-size: 14px; }


.caseFocus .hd .prev,
.caseFocus .hd .next { position: absolute; right: 100%; top: 50%; margin: -30px 0 0; width: 30px;height: 30px;display: block; background:#021FA4;cursor: pointer; border-radius:50%; text-align:center; line-height:30px; color: #fff; font-size: 14px; text-indent: -2px; }
.caseFocus .hd .next { right: auto; left: 100%; text-indent: 2px; }


.caseList { margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; }
.caseList li { width: 48%; margin: 1%; background: #fff; border-radius: 10px; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all ease 0.6s; outline: 1px solid rgba(0, 53, 167, 0); }
.caseList li img { width: 100%; height: auto; border-radius: 10px; }

.caseList li:hover { transform: translateY(-5px); outline: 1px solid rgba(10, 60, 223, 0.3); }


/* 底部通用 */
.lxss a,
.lxss a.sq { text-indent: 0; text-align: center; background: linear-gradient(90deg, #1067DB 0%, #021FA4 100%); }
.lxss a::before,
.lxss a.sq::before { display: inline-block; vertical-align: top; height: 50px; content: ''; width: 30px; background: url(../../products/img/lx-icon.png) no-repeat center center; margin-right: 10px; background-size: 100% auto; }
.lxss a.sq::before { width: 26px; background-image: url(../../products/img/tymk-icon.png); }

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
        animation-timing-function: ease-in-out;
    }
    50% {
        transform: translateY(-0.6rem);
        animation-timing-function: ease-in-out;
    }
}