@charset "utf-8";

/* frame */
img { vertical-align: top; }
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: 720px; background: url(../img/bg-banner.jpg) no-repeat center bottom; background-size: cover; overflow: hidden; }
#headerChannel .logo{display:block;width:460px;height:90px;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 #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: 0; top: 270px; right: 0; line-height: 1.3; color: #fff; text-align: center; }
#headerChannel .con h1 { font-size: 72px; font-weight: bold; }
#headerChannel .con h3 { margin-bottom: 15px; font-size: 48px; font-weight: bold; }
#headerChannel .con .intro { margin-top: 20px; font-size: 18px; color: rgba(255, 255, 255, 0.6); }

.rowGroup { padding: 50px 0; }

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

.rowBox > .hd { position: relative; text-align: center; font-size: 0; line-height: 1; margin-bottom: 30px; }
.rowBox > .hd h3 { position: relative; display: inline-block; vertical-align: top; padding: 0 30px; padding-bottom: 10px; font-size: 40px; font-weight: bold; line-height: 78px; color: #021FA4; margin-bottom: 30px; }
.rowBox > .hd h3::before { position: absolute; content: ''; left: 6px; top: 2px; width: 35px; height: 35px; 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: 18px; bottom: 12px; width: 20px; height: 20px; 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: 30px 30px 0; font-size: 16px; line-height: 32px; text-align: justify; color: #333; text-indent: 2em; }
.rowBox > .bd .moreWrap { margin-top: 30px; text-align: center; font-size: 0; line-height: 1; }
.rowBox > .bd .moreWrap a { display: inline-block; vertical-align: top; padding: 0 30px; border-radius: 500px; color: #fff; font-size: 16px; line-height: 45px; 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) no-repeat 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: 65px 55px; flex: 1 0 33.3334%; box-sizing: border-box; border-left: 1px solid #f1f1f1; }
.constructionList li:first-of-type { border-left: none; }
.constructionList .pic { width: 150px; margin: 0 auto; }
.constructionList .pic span { display: block; width: 100%; height: 150px; }
.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: 20px; }
.constructionList .title { position: relative; font-size: 24px; color: #333; text-align: center; line-height: 32px; font-weight: bold; text-align: center; }
.constructionList .title span { display: block; }
.constructionList .intro { margin-top: 20px; font-size: 16px; color: #999; line-height: 32px; text-align: center; }

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

.constructionList li,
.constructionList .con,
.constructionList .title span { transition: all ease 0.5s; }
.constructionList li:hover .pic span { animation: bounce 1s ease 1; }
.constructionList li:hover .title span { transform: translateY(5px); color: #021FA4; }

/* 信创适配 */
#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: 60px; }
#xcsp .rowBox > .bd .more { margin-top: 25px; text-align: center; color: #fff; font-size: 16px; 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: space-between; gap: 16px; }
.xcspList li { position: relative; flex: 1 0 267px; }
.xcspList li:nth-of-type(even) { margin-top: 110px; }
.xcspList .con { height: 410px; background: url(../img/bg-02.png) no-repeat center bottom; animation: float 4s infinite; }
.xcspList .title { margin-bottom: 20px; font-size: 16px; line-height: 32px; font-weight: bold; text-align: center; color: #fff; }
.xcspList .title span { position: relative; display: inline-block; vertical-align: top; padding: 0 32px; }
.xcspList .title span::before,
.xcspList .title span::after { position: absolute; left: 0; top: 0; width: 20px; height: 100%; content: ''; background: url(../img/icon-ear.png) no-repeat left top; }
.xcspList .title span::after { left: auto; right: 0; background-position: right bottom; }
.xcspList .pic { width: 190px; margin: 0 auto; }
.xcspList .pic img { width: 100%; height: 282px; 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; }

.xcspList .pic img { transition: all ease 0.6s; }

.xcspList li:hover .pic img { transform: scale(1.05); }

/* 移动设备适配 */
.devicesPic { padding: 62px; 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: 40px 30px 0; font-size: 16px; line-height: 32px; text-align: justify; color: #333; text-indent: 2em; }
.mobileList { padding: 90px 0 35px; display: flex; justify-content: space-between; }
.mobileList li { flex-basis: 640px; }
.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: 15px; text-align: center; }
.mobileList .title span { display: inline-block; vertical-align: top; font-size: 16px; line-height: 45px; padding: 0 42px; 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: 40px; }
.elderlyBox > .hd { display: flex; justify-content: center; }
.elderlyBox > .hd ul { display: flex; justify-content: space-between; gap: 20px; border: 1px solid #C8CEEC; background: #fff; border-radius: 500px; }
.elderlyBox > .hd li { width: 160px; padding: 0 30px; color: #021FA4; font-size: 18px; line-height: 50px; font-weight: bold; border-radius: 500px; text-align: center; cursor: pointer; }
.elderlyBox > .hd li.on { margin: -1px; line-height: 52px; color: #fff; background: linear-gradient(90deg, #1067DB 0%, #021FA4 100%); }
.elderlyBox > .bd { padding-top: 40px; }
.elderlyBox > .bd li { display: inline-flex; vertical-align: top; gap: 37px; justify-content: center; }
.elderlyBox > .bd li .pc { position: relative; background: #F3F9FF; border: 1px solid #0B237F; border-radius: 10px; padding: 39px 10px 10px; }
.elderlyBox > .bd li .pc img { display: block; width: 580px; height: 361px; }
.elderlyBox > .bd li .pc::before { position: absolute; left: 20px; top: 17px; content: ''; width: 10px; height: 10px; background: #FF5F5C; border-radius: 50%; box-shadow: 16px 0 0 #FFC359, 32px 0 0 #0CCDA3; }
.elderlyBox > .bd li .phone { position: relative; background: #F3F9FF; border: 1px solid #0B237F; border-radius: 10px; padding: 10px; }
.elderlyBox > .bd li .phone img { display: block; width: 180px; height: 390px; }
.elderlyBox > .bd li .phoneTitle { position: absolute; left: -23px; top: 153px; padding: 0 20px; font-size: 14px; line-height: 32px; border-radius: 5px; color: #fff; background: linear-gradient(90deg, #1067DB 0%, #021FA4 100%); }

/* 基础应用 */
.atlasBox .hd { position:relative; float:left;margin-right:20px;width:145px;height:360px;background: #2165D0;background:linear-gradient(to bottom, #20AEFB, #1667F0);border-radius:5px;display:flex;flex-direction: column;justify-content: center;}
.atlasBox .hd a { display:block; overflow:hidden;width:145px;height:360px; 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 90% 5%;}
.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(../img/atlasico1.png) no-repeat center;width: 100%;}
.atlasBox .hd h4 { font-size:18px; font-weight:bold; color:#fff; padding:0 20px; text-align:center; margin-top:10px;}
.atlasBox dl {background:#E8F1F5;overflow:hidden;padding:10px;border-radius:5px;margin-bottom: 10px;}
.atlasBox .dl3 { margin:0;}
.atlasBox dt {float:left; height:36px; width:50px; margin-right:20px; padding:20px 10px; background:#2165D0; border-radius:5px; display:flex;flex-direction: column;justify-content: center; color:#fff; font-size:14px; font-weight:bold; line-height:18px; text-align:center;}
.atlasBox dd {overflow:hidden;position:relative;margin: -5px 0;}
.atlasBox ul {position:relative;display:flex;flex-wrap: wrap;justify-content: flex-start;margin-right: -0.7%;min-height: 86px;align-content: center;}
.atlasBox ul li {height:36px;line-height:36px;margin: 5px 10px 5px 0;background:#fff;border-radius:5px;text-align:center;width: 19.3%;margin-right: 0.7%;font-size: 15px;color: #333; overflow:hidden;}
.atlasBox .dl1 dt { height:88px; width:30px; padding:20px;}
.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;}

/* 平台 */
.platform { border-bottom: 1px solid #f0f0f0;}
.platformList li { display: flex; justify-content: space-between; align-items: center; gap: 50px; flex-direction: column;}
.platformList .pic img{max-width:1400px;}
.platformList .pic span {display: block;width: 1400px;height: 650px;/* background: url(../img/icons-platform.png) no-repeat 0 0; */animation: float 4s infinite;}
.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 40px;box-shadow: #ccc 0 0 20px;background-size: 100% auto;width: 1320px;height: 450px;border-radius: 10px;}
.platformList .con { flex: 1 0 0%; }
.platformList .intro { font-size: 16px; line-height: 32px; text-align: justify; text-indent: 2em; }
.platformList .more { margin-top: 30px; font-size: 0; line-height: 1; }
.platformList .more a { position: relative; z-index: 1; display: inline-block; vertical-align: top; line-height: 45px; padding: 0 20px; color: #021FA4; font-size: 16px; 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 .more a:hover { color: #fff; }
.platformList .more a:hover::before { transform: rotateY(180deg); border-color: transparent; background: linear-gradient(90deg, #1067DB 0%, #021FA4 100%); }

.platformList .li2 .pic span {/* background-position: -360px 0; */}
.platformList .li3 .pic span {/* background-position: -720px 0; */}


/* 为政府网站量身打造的业务系统 */
.businessList { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.businessList li { display: flex; flex-direction: column; align-items: center; gap: 20px; flex: 1 0 335px; padding: 30px 30px 36px; box-sizing: border-box; border: 1px solid #f0f0f0; border-radius: 5px; }
.businessList .pic { width: 80px; }
.businessList .pic span { display: block; height: 80px; background: url(../img/icons-business.png) no-repeat 0 0; background-size: auto 100%; }
.businessList .con { flex: 1 0 0%; }
.businessList .title { font-size: 24px; line-height: 32px; font-weight: bold; text-align: center; color: #333; }
.businessList .intro { margin-top: 20px; font-size: 16px; line-height: 32px; text-align: justify; color: #666; text-indent: 2em; }
.businessList .more a { position: relative; z-index: 1; display: block; line-height: 40px; padding: 0 20px; color: #021FA4; font-size: 14px; 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 .more a:hover { color: #fff; }
.businessList .more a:hover::before { opacity: 1; transform: scaleY(1); }

.businessList .li2 .pic span { background-position: -80px 0; }
.businessList .li3 .pic span { background-position: -160px 0; }
.businessList .li4 .pic span { background-position: -240px 0; }
.businessList .li5 .pic span { background-position: -320px 0; }
.businessList .li6 .pic span { background-position: -400px 0; }
.businessList .li7 .pic span { background-position: -480px 0; }
.businessList .li8 .pic span { background-position: -560px 0; }
.businessList .li10 .pic span { background-position: -640px 0; }
.businessList .li9 .pic span { background-position: -720px 0; }
.businessList .li11 .pic span {background-position: -810px 0;}

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

.businessList li:hover .pic span { animation: bgIcon 0.6s ease 1; }
.businessList li:hover .title { color: #021FA4; }
.businessList li:hover .con { transform: translateY(-5px); }

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

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

.caseFocus { position: relative; width: 1200px; margin: 0 auto; }
.caseFocus .bd .tempWrap { width: 1200px !important; height: 582px; }
.caseFocus .bd li { position: relative; float: left; width: 285px; padding:20px; background:#fff; border-radius:10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); margin: 15px; overflow: hidden; transform: translateY(102px); }
.caseFocus .bd li .pic img { width: 100%; height: 190px; border-radius: 10px; }
.caseFocus .bd li .title { margin-top: 20px; line-height: 26px; font-size: 20px; font-weight: bold; text-align: center; }
.caseFocus .bd li .intro { margin-top: 0; line-height: 24px; font-size: 15px; text-align: justify; height: 0; overflow: hidden; color: #666; visibility: hidden; opacity: 0; }
.caseFocus .bd li .more { margin-top: 25px; display: block; line-height: 40px; border-radius: 10px; background: #021FA4; color: #fff; text-align: center; font-weight: bold; font-size: 16px; }

.caseFocus .bd li,
.caseFocus .bd li .pic img,
.caseFocus .bd li .intro { transition: all ease 0.6s; }


.caseFocus .bd li.onshow { transform: translateY(0); width: 420px !important; }
.caseFocus .bd li.onshow .pic img { height: 280px; }
.caseFocus .bd li.onshow .intro { margin-top: 25px; height: 96px; visibility: visible; opacity: 1; }

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

.caseFocus .hd .prev:hover,
.caseFocus .hd .next:hover { transform: translateY(-5px); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); }

.caseList { margin-top: 25px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.caseList li { width: 386px; background: #fff; border-radius: 10px; box-shadow: 0px 5px 20px 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: 140px; 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: 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; }

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

@keyframes icon {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}