@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: 635px;}
.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 .junren {width:550px;height:367px;background:url(../img/junren.png) no-repeat;position:absolute;bottom:0;left: 50%;margin-left: 334px; opacity:0}
.special-header .junren.animated { 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 .cHd{height:53px;position:relative;margin-bottom: 30px;text-align:center;}
.cBox .cHd h3 {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;}
.cBox .cHd h3::before,
.cBox .cHd h3::after{ transition:all 1s;  content:"";display:block; width:138px; height:25px; background:url(../img/hdarr.png) no-repeat;opacity:0;}
.cBox .cHd h3::after {transform: scale(-1, 1);}

.cBox .cHd.animated h3 {color: #153CB9;}
.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;margin-bottom: 40px;padding: 15px 0;}
.cBox .siteWidth>.intro p { margin-block:15px;}
.cBox .siteWidth>.pic {float: right;margin-left: 40px;}

.rowBox .hd{position:relative;margin-bottom: 30px;text-align:center;}
.rowBox .hd h3 {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;}
.rowBox .hd h3::before,
.rowBox .hd h3::after{ transition:all 1s;  content:"";display:block; width:138px; height:25px; background:url(../img/hdarr.png) no-repeat;opacity:0;}
.rowBox .hd h3::after {transform: scale(-1, 1);}
.rowBox .hd h3.animated {color: #153CB9;}
.rowBox .hd h3.animated::before,
.rowBox .hd h3.animated::after{opacity:1;}
.rowBox .hd .line { display:none; }

#cBox_01 {padding: 40px 0 0;margin: 0 auto 0;background: #F3F9FF url(../img/pic-1.png) no-repeat center 125px;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;}
#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:404px; line-height:28px; font-size:16px; padding:19px; border:1px solid #C1D8ED; border-radius:5px; background:#fff; transition:all 0.5s; }
#cBox_01 .cBd li.on,
#cBox_01 .cBd li:hover { background:#1067DB; color:#fff; border:1px solid #021FA4}
#cBox_01 .tips {background: linear-gradient(180deg, #0055C1 0%, #10A5DB 127.14%);margin-top: 50px;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:#FFD000}

#cBox_02 {padding: 50px 0 30px;}
#cBox_02 .pic {float:left;margin: 0 40px 0 0;}
#cBox_02 .siteWidth {display:flex;flex-direction: row;align-items: center;gap: 50px;}

#cBox_03 {padding: 50px 0 60px;background: #F0F9FF url(../img/row03bg.jpg) no-repeat center bottom / 100% auto;}
#cBox_03 .cHd {margin-bottom: 60px;}
.agvBox {display: flex;gap: 40px 20px;flex-wrap: wrap;}
.agvBox dl {width: 44%;background:#fff;border-radius: 10px;padding: 30px;box-shadow: 0px 0px 10px 0px #021FA426;position: relative;min-height: 150px;}
.agvBox dl dt {font-size:24px;font-weight:bold;line-height: 32px;margin-bottom: 20px;}
.agvBox dl dt h3 {font-weight:bold;text-align:center;position:relative;z-index:1;}
.agvBox dl dd {font-size:16px;line-height:2;text-indent:2em;text-align:justify;display:flex;flex-direction: column;color: #666;}
.agvBox dl dt i {position:absolute;top: -22px;width: 56px;height: 56px;background: url(../img/Polygon1.png) no-repeat center;align-items: center;line-height: 60px;text-align: center;color: #fff;font-family: impact;}
.agvBox .dl2 dt i { background-image:url(../img/Polygon2.png);}
.agvBox .dl3 dt i { background-image:url(../img/Polygon3.png);}
.agvBox .dl4 dt i { background-image:url(../img/Polygon4.png);}
.agvBox .dl5 dt i { background-image:url(../img/Polygon5.png);}
.agvBox .dl6 dt i { background-image:url(../img/Polygon6.png);}
.agvBox .dl7 dt i { background-image:url(../img/Polygon7.png);}
.agvBox .dl8 dt i { background-image:url(../img/Polygon8.png);}

#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:#1067DB}

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

#solutionSafety .more a {color: #1067DB; }
#solutionSafety .more a::before { border: 1px solid #1067DB;}
#solutionSafety .more a:hover::before {  background: #1067DB; }

.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; margin-top: 48px; 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: #1067DB;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 #1067DB; 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, #107EF2, #3460F8); }


#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;}

.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: #EFF9FF;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 }
.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: #021FA4;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: #1e44f0; 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: #153CB9;}
.rowTi h2.animated::before,
.rowTi h2.animated::after{opacity:1;}
.rowTi .line { display:none; }

/* ------------------------------ 为内网量身打造的业务系统 ------------------------------ */
#intranetSystem {background:#EFF9FF;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: 30px;justify-content: space-between;flex-direction: row;}
.businessList li {display: flex;gap:30px;flex-direction: column;align-content: stretch;min-width: 31.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: 25px;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 { padding:20px 0}
#customerCase .moreBtn a { line-height:54px; }

.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:#0D81F1; font-weight:bold;}

.lxss { padding:25px 0 60px;}
.lxss a, .lxss a.sq { background-color:#0D81F1 }
.lxss a:hover, .lxss a.sq:hover {background-color: #1067DB;}