@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 { padding: 70px 0 60px; 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%); }

/* 平台 */
.platform { border-bottom: 1px solid #f0f0f0; padding: 40px 0 30px; }
.platformList li { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.platformList .pic span { display: block; width: 360px; height: 360px; background: url(../img/icons-platform.png) no-repeat 0 0; animation: float 4s infinite; }
.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 .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 { padding-top: 0; }
#solutionSafety .rowBox > .hd .intro { margin-top: 10px; text-align: center; }
#solutionSafety .rowBox > .bd { padding-top: 20px; }

/* 客户案例 */
#case { padding: 70px 0 60px; 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);
    }
}