@charset "utf-8";

body{font-weight:400;min-width:1400px;}
body .wrap{margin: 0 auto;background:#ffffff;}
.special-content { font-size:16px}
.row,
.siteWidth{max-width:1400px;margin:0 auto;position: relative;}
.red { color:#f00}


@keyframes bgzoom {100%{ background-size:100%} 50%{background-size:120%} 0%{ background-size:100%} }

/* 头部 */
.special-header{overflow:hidden;clear: both;background: url(../img/banner.jpg) center no-repeat;clear: both;background-size: cover;background-color: #F2F5FC;animation: bgzoom 30s infinite linear;}
.special-header .siteWidth{position:relative;z-index:5;box-sizing:border-box;padding-top: 315px;height: 800px;}
.special-header .logo{position:absolute; left:0px; top:41px; height:90px;}
.special-header .logo img{height: 50px;width:auto;}
.special-header .links {height: 36px;position: absolute;top: 48px; right: 0;}
.special-header .links a { height:34px; border-radius: 18px;line-height: 34px; text-align: center; background-color:transparent; color: #fff;font-size: 16px; float:left; padding:0 1.5em;border:1px solid #fff; margin-left:10px; box-sizing:content-box; }
.special-header .links a:hover {background-color:#fff; color:#021FA4 }
.special-header .special-header-title_cn {text-align: center;font-size: 72px;font-weight:bold;color:#fff;line-height: 1.33;margin-bottom: 40px;}
.special-header .special-header-slogan{margin:0 auto;font-size:18px;line-height:36px;color: rgb(255 255 255 / 80%);text-align: center;}
.special-header .special-header-icon {display:block;position:absolute;right: 10px;top: 230px;}


/* indTabBox */
.indTabBox .tHd{margin-bottom:36px;}
.indTabBox .tHd ul{display:block;margin:0 auto;width: 700px;display:flex;height:52px;border-radius:26px;border: 1px solid #C8CEEC;background: #fff;}
.indTabBox .tHd ul li{width:250px;text-align:center;font-size:18px;line-height:52px;height:52px;font-weight:bold;color:#1067DB;cursor:pointer;}
.indTabBox .tHd ul li a{color:#1067DB}
.indTabBox .tHd ul li.on{color:#fff; background: linear-gradient(90deg, #107EF2 0%, #3460F8 100%); border-radius:26px;}

/* row-arrow-down */
.row-arrow-down{width:60px;height:60px;position:absolute;bottom: 80px;left:calc(50% - 30px);border:1px dashed #059B68;border-radius:50%;box-sizing:border-box;display: none;}
.row-arrow-down::before{content:""; display:block; width:2px; height:80px; background:#059B68; position:absolute; top:20px;; left:calc(50% - 1px);}
.row-arrow-down::after{content:""; display:block; width:0px; height:0px; border:5px solid transparent; border-top-color:#059B68; border-bottom:none; position:absolute; left:calc(50% - 5px); top:98px}

/* cBox */
.rowGroup,
.cBox {padding: 90px 0;}
.cBox .cHd{height:53px;position:relative;margin-bottom: 30px;text-align:center;}
.cBox .cHd h3 {line-height: 53px;transition:all 1s;color: transparent;padding-bottom: 15px;text-align:center;font-size:40px;font-weight:bold;position:relative;display: flex;gap: 30px;justify-content: center;align-items: center;background: url(../img/hdh3bg.png) no-repeat center bottom;}
.cBox .cHd h3::before,
.cBox .cHd h3::after{ transition:all 1s;  content:"";display:block; width:30px; height:30px; background:url(../img/hdarr.png) no-repeat;opacity:0;}
.cBox .cHd h3::after {transform: scale(-1, 1);}

.cBox .cHd.animated h3 {color: #316C9F;}
.cBox .cHd.animated h3::before,
.cBox .cHd.animated h3::after{opacity:1;}

.cBox>.intro {padding:20px 0;text-indent:2em;margin-bottom: 30px;}

.cBox .siteWidth>.intro {font-size: 16px;line-height: 30px;text-indent: 2em;}
.cBox .siteWidth>.intro p { margin-block:15px;}
.cBox .siteWidth>.pic {}

.rowBox .hd { margin-bottom:30px;}
.rowBox .hd h3 {line-height: 53px;transition:all 1s;color: transparent;padding-bottom: 15px;text-align:center;font-size:40px;font-weight:bold;position:relative;display: flex;gap: 30px;justify-content: center;align-items: center;background: url(../img/hdh3bg.png) no-repeat center bottom;}
.rowBox .hd h3::before,
.rowBox .hd h3::after{ transition:all 1s;  content:"";display:block; width:30px; height:30px; background:url(../img/hdarr.png) no-repeat;opacity:0;}
.rowBox .hd h3::after {transform: scale(-1, 1);}
.rowBox .hd h3.animated {color: #316C9F;}
.rowBox .hd h3.animated::before,
.rowBox .hd h3.animated::after{opacity:1;}
.rowBox .hd .line { display:none;}

#cBox_01 {padding-bottom: 0;margin: 0 auto 0;background: url(../img/row01bg.jpg) no-repeat center bottom/ cover;border-radius:10px;}
#cBox_01.cBox>.intro {text-indent:0;margin-bottom: 40px;}
#cBox_01 .cBd p { text-indent:2em; margin-top:18px;}
#cBox_01 .cBd .siteWidth {display:flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;align-items: flex-end;}
#cBox_01 .cBd .icon { width:280px; height:260px; background:url(../img/askico.png) no-repeat}
#cBox_01 .cBd .leftArea {display:flex;flex-direction: column;gap: 22px;}
#cBox_01 .cBd .rightArea {display:flex;flex-direction: column;gap: 22px;align-items: flex-end;}
#cBox_01 .cBd .bottomArea {margin:45px auto 0;flex-basis:444px;}
#cBox_01 .cBd li {position:relative;width: 500px;line-height: 22px;font-size:16px;padding: 6px 10px 6px 18px;border:1px solid #C1D8ED;border-width: 0 1px;background:#fff;transition:all 0.5s;box-sizing: border-box;display: flex;gap: 6px;
                  :before { position:absolute; content:""; width:100%; height:6px; background:url(../img/borderline.png) no-repeat; top:-6px; left:0; }
                  :after { position:absolute; content:""; width:100%; height:6px; background:url(../img/borderline.png) no-repeat; bottom:-6px; left:0; transform:scale(-1) }
                  b {color: #316C9F;font-size:20px;line-height: 24px;}
                 }
#cBox_01 .cBd li.on,
#cBox_01 .cBd li:hover { }
#cBox_01 .cBd { margin-bottom:100px}
#cBox_01 .tips {background: url(../img/tipsbg.png) no-repeat;margin-top: 50px;line-height:1.35;padding-top: 20px;text-align:center;font-size:32px;font-weight:bold;color:#fff;width: 1314px;margin: 0 auto;height: 160px;box-sizing: border-box;}
#cBox_01 .tips:after { content:""; width:30px; height:30px; background:url(../img/tipsarr.png) no-repeat; position:absolute; left:50%; bottom:20px; margin-left:-15px;}

#cBox_02 .siteWidth {display:flex;align-items: center;gap: 30px;}

#cBox_03 { background: #EEF8FE;}
#cBox_03 .siteWidth {display:flex;align-items: center;gap: 30px;flex-direction: row-reverse;}

#cBox_04 .cBd ul{display:flex}
#cBox_04 .cBd ul li {flex:1;padding: 0 5% 0;display:flex;justify-content: flex-start;flex-direction: column;align-items: center;gap: 10px;}
#cBox_04 .cBd ul li i {display:block;width: 164px;height: 180px;background:url(../img/jyico1.png) no-repeat center;}
#cBox_04 .cBd ul .li2 i { background-image:url(../img/jyico2.png) }
#cBox_04 .cBd ul .li3 i { background-image:url(../img/jyico3.png) }
#cBox_04 .cBd ul li h3 { font-size:24px; line-height:1.5; font-weight:bold;}
#cBox_04 .cBd ul li p {font-size:16px;color: #666;line-height: 1.5;text-align: center;}

.atlasBox dl dt,
.atlasBox .hd { background: linear-gradient(360deg, #7EAABE 0%, #016A99 100%);}
.atlasBox ul li a:hover { background-color: #316C9F; }

#solutionSafety {background: #EEF8FE url(../img/solutionSafetybg.png) repeat-x top}
#solutionSafety .hd .intro {font-size: 16px;padding: 0;width: 75%;line-height: 2em;margin: 0 auto;text-align: center;margin-top: 30px;}


.solutionSafety-01 { background: url(../img/bg-safety-05.png) no-repeat center top; }
.solutionSafety-02::before {background: #316C9F url(../img/bg-safety-08.png) repeat-x center;}
.solutionSafety-03 {
    background: url(../img/bg-safety-09.jpg) no-repeat center center;
}

/* cBox_1 - row-1 */
.solutionSafety-04 .list .li1::before {background: #316C9F;}
.solutionSafety-04 .list li {color: #316C9F;}

#solutionSafety .more a {color: #333;}
#solutionSafety .more a::before {border: 0; background:#fff}
#solutionSafety .more a:hover::before {  background: #316C9F; }

.solutionSafety-05 .row { width:1200px;}
.solutionSafety-05 .list li::before { filter:brightness(2)}

.solutionSafety-06 {background: url(../img/bg-safety-10.jpg) no-repeat center center;}

.solutionSafety-07 .rowCon::before {background: #1067DB;}
.solutionSafety-07 .rowCon .list li .icon { background-image:url(../img/icons-safety-07.png)}

#freeWeb .tBd { text-align:center;}
#freeWeb .bd { text-align: center;}
#freeWeb .moreBtn { margin:50px 0;}
#freeWeb .rowBox>.intro {margin-bottom:40px;display:block;text-indent: 2em;}

.moreBtn { text-align: center; margin-top: 48px; font-size: 0; line-height: 1; }
.moreBtn a {position: relative;z-index: 1;display: inline-block;vertical-align: top;line-height: 50px;padding: 0 50px;color: #333;font-size: 16px;perspective: 800px;border-radius: 30px;}
.moreBtn a::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; width: 100%; height: 100%; border-radius: 500px; transition: all ease 0.6s; background: #F2F2F2;}
.moreBtn a:hover { color: #fff; }
.moreBtn a:hover::before { transform: rotateY(180deg); border-color: transparent; background:#316C9F }


#xcsp {background: #EEF8FE;}
#xcsp .hd {margin-bottom: 50px;}
#xcsp .hd .intro {padding-top: 40px;}
#xcsp .intro {font-size:16px;text-indent:2em}
#xcsp .rowBox > .bd .more {margin-top: 45px;padding: 20px 0 25px;height:80px;line-height: 1.2;text-align: center;background: url(../img/xcspmorebg.png) no-repeat center;color: #fff;perspective: 1000px;}
#xcsp .rowBox > .bd .more::before { position: absolute; left: 0; bottom: 100%; content: ''; width: 100%; height: 221px; background: linear-gradient(180deg, rgba(27, 104, 204, 0) 0%, rgba(27, 104, 204, 0.2) 100%); transform-origin: center bottom; transform: rotateX(40deg); }
#xcsp .rowBox > .bd .more a { color: inherit; text-decoration: underline; }
#xcsp .rowBox > .bd .more .title { font-size: 32px; font-weight: bold; }
#xcsp .rowBox > .bd .more .intro { margin-top: 14px; font-size: 16px; }

.xcspList {position: relative;z-index: 1;display: flex;flex-wrap: wrap;justify-content: space-between;gap: 20px;margin-bottom: 45px;padding: 0 40px;}
.xcspList li {position: relative;flex: 1;border-radius:10px;width: 258px;}
.xcspList .con {position:relative;}
.xcspList .title {padding-bottom: 14px;background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);font-size: 18px;line-height: 46px;font-weight: bold;text-align: center;color: #316C9F;}
.xcspList .pic {position: relative;overflow: hidden;height: auto;line-height: 0;text-align: center;background: #fff;}
.xcspList .pic img { width: 100%;height: 330px;}
.xcspList .li3 .pic { padding:10px }
.xcspList .li3 .pic img { width:220px; height: 310px; }
.xcspList li:hover { transform: translateY(-10px); }

/* --------------------------------- 移动设备适配 --------------------------------- */
#mobile {}
#mobile .rowBox .devicesPic {background: #EEF8FE;border-radius: 10px;}
.devicesPic {margin-bottom: 30px;text-align: center;}
.devicesPic span { display: inline-block; vertical-align: top; }
.devicesPic img {max-width: 100%;height: auto;}
.devicesIntro {margin-bottom: 40px;font-size: 16px;line-height: 30px;text-align: justify;color: #333;text-indent: 2em;}
.devicesIntro.center {margin: 0 0 40px!important;}
.mobileList {gap: 70px;display: flex;justify-content: center;}
.mobileList li { flex-basis: 599px; }
.mobileList .pic { position: relative; margin: 0 30px; }
.mobileList .pic img { display: block; width: 100%; height: auto; }
.mobileList li:hover .pic img { transform: translateY(-5px); }
.mobileList .title { margin-top: 25px; text-align: center; }
.mobileList .title span {position: relative;z-index: 1;display: inline-block;vertical-align: top;font-size: 16px;line-height: 45px;padding: 0 40px;background: #F2F2F2;color: #333;border-radius: 500px;overflow: hidden;}
.mobileList .title span::before {position: absolute;z-index: -1;content: '';left: 0;top: 0;width: 100%;height: 100%;background: #316C9F;border-radius: 500px;transform: scaleX(0);transform-origin: center center;visibility: hidden;opacity: 0;}

.mobileList .pic img,
.mobileList .title span,
.mobileList .title span::before {  transition: all ease 0.6s; }

.mobileList li:hover .title span { color: #fff; }
.mobileList li:hover .title span::before { transform: scaleX(1); visibility: visible; opacity: 1; }

#policeApp { padding-top:50px;}
#policeApp .bd {display:flex;gap: 60px;align-items: center;padding: 0 170px;}
#policeApp .bd .intro p { text-indent:2em}

#jcyy {
    background: #EEF8FE;
}

#webfutureIntro {padding: 30px 0;background: #fff;}
#webfutureIntro .bd {display:flex;align-items: center; gap:60px}
#webfutureIntro .intro { text-indent:2em; line-height:2em; font-size:16px;}
#webfutureIntro .intro .moreBtn {margin-top:30px;text-align: left;}

#eduSysIntro { background:#fff ;}
#eduSysIntro .bd {display:flex;align-items: center;gap:60px;flex-direction: row-reverse;}
#eduSysIntro .intro { text-indent:2em; line-height:2em; font-size:16px;}
#eduSysIntro .intro .moreBtn { margin-top:30px;}


.rowTi{position:relative;margin-bottom: 60px;text-align:center;}
.rowTi h2 {line-height: 53px;transition:all 1s;color: transparent;text-align:center;font-size:40px;font-weight:bold;position:relative;display: flex;gap: 20px;justify-content: center;align-items: center;}
.rowTi h2::before,
.rowTi h2::after{ transition:all 1s;  content:"";display:block; width:138px; height:25px; background:url(../img/hdarr.png) no-repeat;opacity:0;}
.rowTi h2::after {transform: scale(-1, 1);}
.rowTi h2.animated {color: #316C9F;}
.rowTi h2.animated::before,
.rowTi h2.animated::after{opacity:1;}
.rowTi .line { display:none; }

/* ------------------------------ 为内网量身打造的业务系统 ------------------------------ */
#intranetSystem {background: url(../img/intranetSystembg.jpg) no-repeat center top;}
#intranetSystem .rowBox .hd h3 {  color: #fff;}
#intranetSystem .rowBox .hd .intro {margin-block:30px;text-align:justify;text-indent:2em;color: #fff;}
.businessList { display: flex; flex-wrap: wrap; gap: 30px; }
.businessList li { display: flex; flex-direction: column; align-content: stretch; width: 680px; box-sizing: border-box; }
.businessList .pic { padding: 30px 300px 30px 40px; display: flex; gap: 6px; flex-direction: column; justify-content: center; align-content: stretch; height: 200px; background: url(../img/bsicon1.jpg) no-repeat center top; background-size: 100% auto; box-sizing: border-box; border-radius: 10px 10px 0 0; }
.businessList .pic .title { font-weight: bold; font-size: 32px; line-height: 1.5; color: #fff; text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25); }
.businessList .pic .intro { font-size: 14px; line-height: 24px; color: #fff; }
.businessList .con {flex: 1 0 0%;display: flex;gap: 25px;flex-direction: column;align-content: stretch;box-sizing: border-box;padding: 25px 30px 30px;border: 1px solid #D9D9D9;border-top: none;border-radius: 0 0 10px 10px;min-height: 200px;background: #fff;}
.businessList .con .intro { flex: 1 0 0%; font-size: 16px; line-height: 30px; text-align: justify; color: #333; text-indent: 2em; }
.businessList .con .intro p { margin-bottom: 1em; }
.businessList .con .intro p:last-of-type { margin-bottom: 0; }
.businessList .moreBtn {margin: 0;}

.businessList .li2 .pic { background-image: url(../img/bsicon2.jpg)  }
.businessList .li3 .pic { background-image: url(../img/bsicon3.jpg) }
.businessList .li4 .pic { background-image: url(../img/bsicon4.jpg) }
.businessList .li5 .pic { background-image: url(../img/bsicon5.jpg) }
.businessList .li6 .pic { background-image: url(../img/bsicon6.jpg) }
.businessList .li7 .pic { background-image: url(../img/bsicon7.jpg) }
.businessList .li8 .pic { background-image: url(../img/bsicon8.jpg) }
.businessList .pic,
.businessList .con { transition: all ease 0.6s; }

.businessList li:hover .pic,
.businessList li:hover .con { transform: translateY(-10px); }

.solutionSafety-06 .row { margin-top:125px;}

#customerCase { background:url(../img/customerCasebg.jpg) no-repeat center} 
#customerCase .siteWidth{ overflow:hidden;}
#customerCase .miso_bd {width: 1200px;margin:0 auto;position:relative;overflow: hidden;text-align: center;}
#customerCase .iprev,
#customerCase .inext {transition:all 0.4s;position:absolute;top:50%;margin-top:-10px;left:0;background: #F2F2F2 url(../img/hsyxarr.png) no-repeat center;width: 44px;height: 120px;z-index:99;cursor:pointer;border-radius:10px 0 0 10px}
#customerCase .inext { transform:scale(-1,1); left:auto; right:0;}
#customerCase ul li {position:relative; }
#customerCase .pic { width:700px; margin:0 auto; position:relative; height:465px;opacity:0.5; transition:all 0.5s}
#customerCase .pic img{ overflow:hidden; border-radius:5px;}
#customerCase .title { position:absolute; bottom:0; width:100%; text-align:center;padding:10px 0; line-height:30px; background:rgb(49 108 159 / 90%);}
#customerCase .title a { color:#fff; }
#customerCase .swiper-slide-active .pic{ opacity:1}


.nodeList { display:flex; gap:13px;}
.nodeList li { flex:1;}
.nodeList li a {display:flex;line-height:17px;color:#1067DB;padding:10px 20px;text-align:center;height:52px;background:#F3F9FF;justify-content: center;align-items: center;}

#technicalSupport {padding:30px 0 0;background: #fff;}
.techSupportList li a {box-shadow: none;background-color: #F8F9FA;}
.techSupportList li a:hover { background-color:#F2F5FC; color:#316C9F; font-weight:bold;}

.lxss { padding:25px 0 60px;}
.lxss a, .lxss a.sq { background-color:#316C9F }
.lxss a:hover, .lxss a.sq:hover {background-color: #3083ca;}