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


/* 头部 */
.special-header{overflow:hidden;clear: both;background: url(../img/banner.jpg) center no-repeat;clear: both;background-size: cover;background-color: #F2F5FC;}
.special-header .siteWidth{position:relative;z-index:5;box-sizing:border-box;padding-top: 250px;height: 820px;}
.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: 92px;font-weight:bold;color:#fff;line-height: 1.33;margin-bottom: 30px;}
.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;}
.special-header .tianping {width:240px;height:188px; margin:0 auto 30px; background:url(../img/tianping.png) no-repeat;transition:all 1.5s; transition-delay:0s; transform:scale(5) rotate3d(0,1,0,180deg); opacity:0;  animation: pclight 12s cubic-bezier(0, 0.63, 1, -0.29) infinite;}
.special-header .tianping.animated { transform:scale(1) ; opacity:1 }

/* 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 */
.cBox { padding:60px 0 ;}
.cBox .cHd{position:relative;margin-bottom: 30px;text-align:center;}
.cBox .cHd h3 { position:relative;line-height: 53px;transition:all 1s;color: transparent;text-align:center;font-size:40px;font-weight:bold;position:relative;border-bottom: 1px solid #3C5185;display: inline-block;padding-bottom: 24px;}
.cBox .cHd h3:after {content:"";width:120px;left: 50%;height:5px;margin-left: -60px;position:absolute;background:#E3383B;bottom:-3px;}
.cBox .cHd.animated h3 {color: #3C5185;}
.cBox .cHd.animated h3::before,
.cBox .cHd.animated h3::after{opacity:1;}

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

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

.rowBox .hd{position:relative;margin-bottom: 30px;text-align:center;}
.rowBox .hd h3 {position:relative;line-height: 53px;transition:all 1s;color: transparent;text-align:center;font-size:40px;font-weight:bold;position:relative;border-bottom: 1px solid #3C5185;display: inline-block;padding-bottom: 24px;min-width: 160px;}
.rowBox .hd h3:after {content:"";width:120px;left: 50%;height:5px;margin-left: -60px;position:absolute;background:#E3383B;bottom:-3px;}
.rowBox .hd h3.animated {color: #3C5185;}
.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: #F3F9FF url(../img/pic-1.png) no-repeat center 380px;border-radius:10px;}
#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;padding-top: 10px;}
#cBox_01 .cBd .icon { display:none;}
#cBox_01 .cBd .leftArea {flex-basis:50%;display:flex;flex-direction: column;gap: 10px;}
#cBox_01 .cBd .rightArea {flex-basis:50%;display:flex;flex-direction: column;gap: 10px;align-items: flex-end;}
#cBox_01 .cBd .bottomArea {margin:45px auto 0;flex-basis:444px;}
#cBox_01 .cBd li {width: 350px;height: 76px;line-height:28px;font-size:16px;padding: 10px 25px;border: 1px solid #BAC3D9;border-radius: 5px 0;background:#F8F9FA;transition:all 0.5s;text-align: center;box-sizing: border-box;position: relative;display: flex;align-items: center;}
#cBox_01 .cBd li.on,
#cBox_01 .cBd li:hover { background:#fff; }
#cBox_01 .cBd li b {position:absolute;right:-15px;width:30px;height:30px;background:#3C5185;border-radius:50%;color:#fff;display:flex;align-items: center;justify-content: center;}
#cBox_01 .cBd .rightArea li b { right:auto; left:-15px;}

#cBox_01 .cBd .leftArea li:nth-child(1) { margin-left:210px;}
#cBox_01 .cBd .leftArea li:nth-child(2) { margin-left:140px;}
#cBox_01 .cBd .leftArea li:nth-child(3) { margin-left:70px;}

#cBox_01 .cBd .rightArea li:nth-child(1) { margin-right:210px;}
#cBox_01 .cBd .rightArea li:nth-child(2) { margin-right:140px;}
#cBox_01 .cBd .rightArea li:nth-child(3) { margin-right:70px;}

#cBox_01 .tips {background: url(../img/tipsbg.png) repeat-x center / cover;height: 200px;box-sizing: border-box;margin-top: 90px;padding:20px 0 90px;line-height:45px;text-align:center;font-size:28px;font-weight:bold;color:#fff;}
#cBox_01 .tips:after { content:""; width:116px; height:66px; background:url(../img/tipsarr.png) no-repeat; position:absolute; left:50%; margin-left:-58px;}
#cBox_01 .tips b {color: #FFD4A6;}

#cBox_02 {padding: 50px 0 30px;}
#cBox_02 .intro { flex:1}
#cBox_02 .pic {width: 460px;float: none;text-align: center;}
#cBox_02 .siteWidth {display:flex;flex-direction: row;align-items: center;gap: 40px;}

#cBox_03 {padding: 50px 0 60px;background: url(../img/row03bg.png) repeat-x center bottom;}
#cBox_03 .cHd {margin-bottom: 60px;}
.agvBox {display: flex;gap: 40px;background:#fff;border-radius: 10px;padding: 40px;box-shadow: 0px 0px 10px 0px #021FA426;position: relative;min-height: 150px;flex-direction: row;}
.agvBox dl {flex:1;display:flex;flex-direction: column;gap: 20px;padding: 0 20px 20px;transition:all 0.5s}
.agvBox dl dt { text-align:center; 
              &::before { content:""; width:70px; height:60px; display:block; background:url(../img/agvicon1.png) no-repeat center; margin:0 auto 20px;transition:all 0.5s;}
              }
.agvBox .dl2 dt::before { background:url(../img/agvicon2.png) no-repeat center; }
.agvBox .dl3 dt::before { background:url(../img/agvicon3.png) no-repeat center; }
.agvBox dl dt h3 { font-size:24px; font-weight:bold; transition:all 0.5s}
.agvBox dl dd { text-align:justify; text-indent:2em}
.agvBox dl:hover { background: linear-gradient(155.7deg, #FD676A 0%, #E3383B 37.61%); border-radius:10px; padding-top:50px; margin-top:-50px;}
.agvBox dl:hover dt::before { filter:brightness(10)}
.agvBox dl:hover dt h3 { color:#fff; }
                            
.agvBox dl:hover dd { color:#fff}

#cBox_04 {padding: 50px 0 0;}
#cBox_04 .cBd ul{ box-shadow: 0px 0px 10px 0px #021FA426;background: #FFFFFF; border-radius:10px; display:flex}
#cBox_04 .cBd ul li {flex:1;padding:66px 55px 0;height:385px;display:flex;justify-content: flex-start;flex-direction: column;align-items: center; gap:20px; border-right:1px solid #f1f1f1}
#cBox_04 .cBd ul li i { display:block; width:150px; height:150px; 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: #999;line-height: 2; text-align:center}



#solutionSafety {padding: 50px 0;background: #fff;}
#solutionSafety .hd .intro {font-size: 16px;padding: 0;width: 75%;line-height: 2em;margin: 0 auto;text-align: center;margin-top: 50px;}
.solutionSafety-02::before {background: #3C5185 url(../img/bg-safety-08.png) repeat-x left center;}

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

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

#solutionSafety .more a {line-height: 42px;color: #3C5185;}
#solutionSafety .more a::before { border: 1px solid #3C5185;}
#solutionSafety .more a:hover::before {  background: #3C5185; }

.solutionSafety-05 .row { width:1200px;}
.solutionSafety-05 .list li::before { filter:brightness(2)}
.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;font-size: 0;line-height: 1;}
.moreBtn a {position: relative;z-index: 1;display: inline-block;vertical-align: top;line-height: 42px;padding: 0 42px;color: #3C5185;font-size: 16px;perspective: 800px;}
.moreBtn a::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #3C5185; border-radius: 500px; transition: all ease 0.6s; }
.moreBtn a:hover { color: #fff; }
.moreBtn a:hover::before { transform: rotateY(180deg); border-color: transparent; background:linear-gradient(to right, #3C5185, #4863a5); }


#xcsp {background:#fff;padding: 50px 0;margin:0 auto;}
#xcsp .hd { margin-bottom:70px;}
#xcsp .hd .intro { padding-top:50px}
#xcsp .intro {font-size:16px;text-indent:2em}
#xcsp .more { text-align:center;}
#xcsp .more .intro a { text-decoration:underline}


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

.xcspList li .con:before {position:absolute;top:-74px;left:50%;margin-left:-50px;content:"";display:block;width:100px;height:200px;background:url(../img/num1.png) no-repeat center;filter: brightness(0.72) contrast(1.8);}
.xcspList .li2 .con:before { background-image:url(../img/num2.png);}
.xcspList .li3 .con:before { background-image:url(../img/num3.png);}
.xcspList .li4 .con:before { background-image:url(../img/num4.png);}
.xcspList .li5 .con:before { background-image:url(../img/num5.png);}

/* --------------------------------- 移动设备适配 --------------------------------- */
#mobile {background: #F8F8F8;padding-top: 50px;}
#mobile .rowBox .devicesPic { background: #fff; padding: 60px 30px; border-radius: 10px; }
.devicesPic {margin-bottom: 40px;text-align: center;}
.devicesPic span { display: inline-block; vertical-align: top; }
.devicesPic img {max-width: 100%;height: auto;}
.devicesIntro {margin-bottom: 30px;font-size: 16px;line-height: 30px;text-align: justify;color: #333;text-indent: 2em;padding:0 30px;text-align: center;}
.mobileList {padding: 50px 0 65px;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: #3C5185;color: #fff;border-radius: 500px;overflow: hidden;}
.mobileList .title span::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: #E3383B; 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 {padding: 50px 0;}

#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: #3C5185;}
.rowTi h2.animated::before,
.rowTi h2.animated::after{opacity:1;}
.rowTi .line { display:none; }

/* ------------------------------ 为内网量身打造的业务系统 ------------------------------ */
#intranetSystem {background: #EAF0FF;padding: 50px 0;}
#intranetSystem .hd .intro { padding-top:30px; font-size:16px;text-indent:2em; text-align:left;}
.businessList {display: flex;flex-wrap: wrap;gap: 20px;justify-content: space-between;flex-direction: row;}
.businessList li {display: flex;gap:30px;flex-direction: column;align-content: stretch;min-width: 43.5%;box-sizing: border-box;background: #fff;padding: 50px 30px;box-shadow: 0px 0px 10px 0px #021FA426;border-radius: 10px;flex: 1;}
.businessList .pic .icon {width:80px;height:60px;background:url(../img/bsicon1.png) no-repeat center;margin: 0 auto 10px;}
.businessList .pic .title {text-align: center; font-size:24px; font-weight:bold;}
.businessList .con {flex: 1;display: flex;gap: 20px;flex-direction: column;box-sizing: border-box;align-items: center;}
.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 {}
.businessList .con .intro p:last-of-type { margin-bottom: 0; }

.businessList .li2 .pic .icon { background-image:url(../img/bsicon2.png)}
.businessList .li3 .pic .icon { background-image:url(../img/bsicon3.png)}
.businessList .li4 .pic .icon { background-image:url(../img/bsicon4.png)}
.businessList .li5 .pic .icon { background-image:url(../img/bsicon5.png)}
.businessList .li6 .pic .icon { background-image:url(../img/bsicon6.png)}
.businessList .li7 .pic .icon { background-image:url(../img/bsicon7.png)}
.businessList .li8 .pic .icon { background-image:url(../img/bsicon8.png)}

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

#customerCase { background:url(../img/customerCasebg.jpg) no-repeat center; padding:60px 0 90px} 
#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:#3C5185;padding:10px 20px;text-align:center;height:52px;background:#EEF3FF;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:#0D81F1; font-weight:bold;}

.lxss { padding:25px 0 60px;}
.lxss a, .lxss a.sq { background-color:#3C5185 }
.lxss a:hover, .lxss a.sq:hover {background-color: #3e5dab;}