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

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

#header { }
#headerChannel{ position:relative; width:100%; height: 800px; background: url(../img/bg-banner.jpg) no-repeat center top; background-size: cover; overflow: hidden; animation: bgzoom 30s infinite linear; }
#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:36px;background: none;border-radius: 18px;line-height: 36px;text-align: center;color: #fff;font-size: 16px;float:left;padding:0 1.5em;margin-left:10px;background: rgba(0, 0, 0, 0.34);box-shadow: 0 5px 5px rgb(0 0 0 / 15%);}
#headerChannel .links a:hover { background: #fff; color: #0D937E; }

#headerChannel .con {position: absolute;left: 0;top: 280px;right: 0;line-height: 1.3;color: #fff;text-align: center;}
#headerChannel .con h1 {font-size: 72px;font-weight: bold;text-shadow: 0 2px 6px rgb(0 0 0 / 25%);}
#headerChannel .con h3 { margin-bottom: 5px; font-size: 48px; font-weight: bold; }
#headerChannel .con .intro { margin-top: 30px; font-size: 18px; line-height:2.8; color: #fff; }

.rowGroup {padding: 50px 0;}

.rowIntro { margin: -10px 0; font-size: 18px; line-height: 34px; text-indent: 2em; text-align: justify; color: #555; }
.rowIntro p { margin-bottom: 1em; }
.rowIntro p:last-of-type { margin-bottom: 0; }

/* --------------------------------- rowBox --------------------------------- */
.rowBox > .hd { position: relative; text-align: center; font-size: 0; line-height: 1; margin-bottom: 45px; }
.rowBox > .hd h3 { position: relative; font-size: 40px; font-weight: bold; line-height: 54px; color: #0D937E;}
.rowBox > .hd h3 span { position: relative; z-index: 1; display:inline-block; padding:0 46px; }
.rowBox > .hd h3 span:before , .rowBox > .hd h3 span:after{ content:""; width:27px; height:41px; background:url(../img/rowtiarr.png) no-repeat; position:absolute; left:-100px; top:50%; margin-top:-19px; opacity:0; transition:all 1s;}
.rowBox > .hd h3 span:after { transform:scale(-1); left:auto; right:-100px;}
.rowBox > .hd h3 span.line { display:none; }
.rowBox > .hd h3.animated span:before { left:0; opacity:1; }
.rowBox > .hd h3.animated span:after { right:0; opacity:1; }
.rowBox > .hd .intro {margin: 30px 30px 0;font-size: 16px;line-height: 30px;text-align: left;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%, #0D937E 100%); }
.rowBox > .bd .moreWrap a:hover { transform: translateY(5px); box-shadow: 0 -3px 0 rgba(0, 53, 167, 0.3); }

/* ------------------------------ 研发背景 ----------------------------- */
#background {  background: #fff url(../img/backgroundbg.jpg) repeat-x center bottom; }

/* ------------------------------ 当前内部网站普遍存在的现状 ----------------------------- */
#prevalent .bd {position:relative;display:flex;justify-content: space-between;margin-bottom: 40px;}
.prevalentico { position:absolute; left:50%; top:0; margin-left:-207px;} 

.prevalentList {width:417px;display:flex;gap:20px;flex-direction: column; padding:30px 0;}
.prevalentList:first-child { text-align:right;}
.prevalentList li .title {border:2px solid rgb(13 147 126 / 20%);border-radius:25px;height:46px;line-height:46px;display:inline-block;padding:0 28px;font-size:18px; transition:all 0.5s;}
.prevalentList li .title i {width: 13px;height:13px;display:inline-block;margin-right: 10px; position:relative;}
.prevalentList li .title i:before,.prevalentList li .title i:after {position:absolute;content:"";width:6px;height:17px;background:#DC611C;transform:rotate(-45deg);border-radius:2px; left: -5px;top: -12px; opacity:0; }
.prevalentList li .title i:after { transform:rotate(45deg); left: 15px;top: -12px; }
.prevalentList li.animated .title i:before, .prevalentList li.animated .title i:after {  left: 5px;top: -2px; opacity:1; width:3px; transition:all .6s; transition-delay:1s;}
.prevalentList li.animated .title i:after { transition-delay:1.2s; }
.prevalentList .li2.animated .title i:before { transition-delay:1s;}
.prevalentList .li2.animated .title i:after { transition-delay:1.2s;}
.prevalentList .li3.animated .title i:before { transition-delay:1.2s;}
.prevalentList .li3.animated .title i:after { transition-delay:1.4s;}
.prevalentList .li4.animated .title i:before { transition-delay:1.4s;}
.prevalentList .li4.animated .title i:after { transition-delay:1.6s;}
.prevalentList .li5.animated .title i:before { transition-delay:1.6s;}
.prevalentList .li5.animated .title i:after { transition-delay:1.8s;}
.prevalentList li .title:hover { background:#0D937E; color:#fff;}
.prevalentList li .title:hover i:before, .prevalentList li .title:hover i:after { background:#fff;transition-delay:0.2s!important;}

.solution { border:4px solid #0D937E; border-width: 4px 0 ; width:0px; transition: all 1s cubic-bezier(0, 0, 1, 0)!important; margin:0 auto;}
.solution .con{position:relative;border:4px solid #0D937E;border-width: 1px 0;margin:3px auto;background:#EEFBF9;height:368px;width: 100%;}
.solution .con:before,.solution .con:after {content:"";width:20px;height:425px;background:url(../img/solutionbgico.png);position:absolute;top:-29px;left:48.5%;transition: all 1s cubic-bezier(0, 0, 0, 1);}
.solution .con:after { left:51.5%;}
.solution h3 { text-align:center; line-height:1.3; font-size:32px; font-weight:bold; color:#0D937E;  padding:40px 0 30px; opacity:0; transition:all 1s; transition-delay:.8s;}
.solution p { line-height:2; font-size:0px; padding:0 60px; text-align:justify; text-indent:2em; margin-bottom:1em; opacity:0; transition:all 1s; transition-delay:.8s;}

.solution.animated { width:100%; }
.solution.animated .con:before {left:0%;}
.solution.animated .con:after { left:100%;}
.solution.animated h3 {opacity:1;}
.solution.animated p {opacity:1;font-size:16px;}

/* --------------------------------- 向下的大标题 --------------------------------- */
#downTitle { position: relative; background: #0D937E; padding: 35px 0; }
#downTitle .title { text-align: center; line-height: 36px; font-size: 24px; font-weight: bold; text-align: center; color: #fff; }
#downTitle::after { position: absolute; content: ''; left: 50%; top: 100%; transform: translateX(-50%); border: 29px solid transparent; border-top-color: #0D937E; }


/* ---------------------------------- 集约化建设 --------------------------------- */
#construction { background:#EEFBF9; }
.constructionList { display: flex; flex-wrap: wrap; justify-content: space-between; }
.constructionList li { position: relative; padding: 0 90px; flex: 1 0 33.33%; box-sizing: border-box; }
.constructionList .pic {margin: 0 auto;width: 148px;height: 148px;border: 1px solid #0D937E;border-radius: 50%;}
.constructionList .pic span {display: block;width: 118px;height: 118px;margin: 13px;border:2px dashed #0D937E;background:#fff;border-radius:50%;}
.constructionList .pic span::before { display: block; content: ''; width: 100%; height: 100%; background: url(../img/icons-construction1.png) no-repeat center; }
.constructionList .con {padding-top: 6px;}
.constructionList .title {position: relative;font-size: 24px;color: #333;padding: 20px 0 0;line-height: 30px;font-weight: bold;text-align: center;}
.constructionList .title span { display: block; }
.constructionList .intro {margin-top: 14px;font-size: 16px;color: #666;line-height: 1.5;text-align: center;}

.constructionList .li2 .pic span::before { background-image: url(../img/icons-construction2.png) }
.constructionList .li3 .pic span::before { background-image: url(../img/icons-construction3.png) }

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

/* ---------------------------------- 信创适配 ---------------------------------- */
#xcsp {}
#xcsp .rowBox > .bd .more { text-align: center; }
#xcsp .rowBox > .bd .more a { color: inherit; text-decoration: underline; }
#xcsp .rowBox > .bd .more .intro {font-size: 16px;padding: 20px 0 0;}

.xcspList { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 0 39px; }
.xcspList li { position: relative; flex: 1 0 248px; }
.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: #0D937E; }
.xcspList .pic { position: relative; height: 0; overflow: hidden; padding-bottom: 142.74%; }
.xcspList .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.xcspList .con,
.xcspList .pic img { transition: all ease 0.6s; }
.xcspList li:hover .con { transform: translateY(-10px); }

/* --------------------------------- 移动设备适配 --------------------------------- */
#mobile {background: #EEFBF9;}
#mobile .rowBox > .bd { background: #fff; padding: 25px 30px; border-radius: 4px; }
.devicesPic { padding-bottom: 40px; margin-bottom: 30px; border-bottom: 1px solid #D9D9D9; 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;}
.mobileList { padding: 5px 0 15px; 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: 40px; padding: 0 30px; 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: #0D937E; 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; }
#mobile .text_p { text-align: center;}

/* indTabBox */
.indTabBox .tHd{margin-bottom:36px;}
.indTabBox .tHd ul{display:block;margin:0 auto;width: 500px;display:flex;height:52px;border-radius:26px;border: 1px solid #EEE;background: #fff;}
.indTabBox .tHd ul li{width:250px;text-align:center;font-size:18px;line-height:52px;height:52px;font-weight:bold;cursor:pointer;}
.indTabBox .tHd ul li.on{color:#fff; background:#559A92; border-radius:26px;}

#freeWeb .bd { text-align: center;}
#freeWeb .moreBtn {margin: 50px 0 0;}
#freeWeb .rowBox>.intro {margin-bottom:40px;display:block;/* text-align: center; */font-size: 16px;line-height: 1.67;padding: 0 7%;text-indent: 2em;}

.moreBtn { margin-top: 77px; font-size: 0; line-height: 1; text-align: center; }
.moreBtn a {position: relative;z-index: 1;display: inline-block;vertical-align: top;line-height: 48px;padding: 0 60px;color: #30625C;font-size: 16px;perspective: 800px;}
.moreBtn a::before {position: absolute;z-index: -1;content: '';left: 0;top: 0;width: 100%;height: 100%;/* background: #fff; */border-radius: 500px;transition: all ease 0.6s;border:1px solid #30625C;border-radius:24px;margin: -1px;}
.moreBtn a:hover { color: #fff; }
.moreBtn a:hover::before { transform: rotateY(180deg); background: #0D937E; border-color:#0D937E }


/* -------------------------------- 对接警务通 APP ------------------------------- */
#police { background: #F1F8FF; }
#police .rowBox > .bd { position: relative; }
#police .list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center; column-gap: 10%; background: url(../img/bg-03.png) no-repeat center center; height: 300px; }
#police .list li { display: flex; align-items: center; gap: 18px; width: 35.8%; font-size: 14px; line-height: 32px; color: #0D937E;  margin: 0 10px; }
#police .list li::before { width: 36px; height: 1px; content: ''; background: #2054F5; }
#police .list li:nth-of-type(odd) { justify-content: flex-end; }
#police .list li:nth-of-type(odd)::before { order: 1; }
#police .list li:nth-of-type(3),
#police .list li:nth-of-type(4) { margin: 0; }

#police .iconsList { position: absolute; display: flex; width: 335px; left: 0; right: 0; margin: auto; top: 86px; }
#police .iconsList li { position: relative; width: 120px; height: 120px; background: #2054F5; border-radius: 50%; overflow: hidden; }
#police .iconsList li .icon { margin: 25px auto; width: 70px; height: 70px; background: url(../img/icons-police.png) no-repeat 0 0; background-size: auto 100%; }
#police .iconsList li .tit { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 24px; font-weight: bold; color: #fff; }
#police .iconsList li.li2 { width: 95px; background: none; }

#police .iconsList li.li2 .icon { background-position: -70px 0; }
#police .iconsList li.li3 .icon { opacity: 0.1; background-position: -140px 0;}

/* ---------------------------- WebFuture 全媒体发布平台 --------------------------- */
#allMedia { background: #EEFBF9; }
.allMediaCon { position: relative; background: url(../img/bg-04.png) no-repeat center top; }
.allMediaCon .roundList { width: 380px; margin: 8px auto 0; display: flex; flex-wrap: wrap; gap: 7px 20px; justify-content: center; }
.allMediaCon .roundList li .title { width: 60px; height: 60px; padding: 8px 10px; box-sizing: border-box; text-align: center; font-size: 16px; font-weight: bold; color: #0D937E; line-height: 21px; background: #DEECEA; border-radius: 50%; animation: float 4s infinite; }

.allMediaCon .roundList li:nth-of-type(2) .title { animation-delay: 400ms; }
.allMediaCon .roundList li:nth-of-type(3) .title { animation-delay: 800ms; }
.allMediaCon .roundList li:nth-of-type(4) .title { animation-delay: 200ms; }
.allMediaCon .roundList li:nth-of-type(5) .title { animation-delay: 400ms; }
.allMediaCon .roundList li:nth-of-type(6) .title { animation-delay: 600ms; }
.allMediaCon .roundList li:nth-of-type(7) .title { animation-delay: 200ms; }
.allMediaCon .roundList li:nth-of-type(8) .title { animation-delay: 400ms; }
.allMediaCon .roundList li:nth-of-type(9) .title { animation-delay: 1000ms; }

.allMediaCon .dataList { margin-top: 222px; display: flex; justify-content: center; column-gap: 50px; }
.allMediaCon .dataList li { width: 120px; text-align: center; line-height: 1; }
.allMediaCon .dataList .number { color: #0D937E; font-size: 24px; font-weight: bold; }
.allMediaCon .dataList .tit { margin-top: 8px; font-size: 16px; }

.allMediaCon .dataList .li1 { text-align: right; }
.allMediaCon .dataList .li2,
.allMediaCon .dataList .li3 { margin-top: 44px; }
.allMediaCon .dataList .li4 { text-align: left; }

/* -------------------------- PowerMonitor 新媒体监测平台 -------------------------- */
#newMedia {padding: 80px 0;}
.newMediaList li {display: flex;flex-direction: row;gap: 90px;align-items: center;}
.newMediaList .pic {}
.newMediaList .pic img {}
.newMediaList .con {flex: 1 0 0%;text-align: left;}
.newMediaList .intro { font-size: 16px; line-height: 30px; text-align: justify; text-indent: 2em; }
.newMediaList .moreBtn {margin-top: 40px;text-align: left;}

/* -------------------------- PowerSSO 统一身份认证平台 -------------------------- */
#powerSSO { background:#EEFBF9; }
#powerSSO .newMediaList li {flex-direction: row-reverse;gap: 0;}

/* ------------------------------ 为内网量身打造的业务系统 ------------------------------ */
.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/pics-business.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-position: 0 -250px; }
.businessList .li3 .pic { background-position: 0 -500px; }
.businessList .li4 .pic { background-position: 0 -750px; }
.businessList .li5 .pic { background-position: 0 -1000px; }
.businessList .li6 .pic { background-image: url(../../products/img/pic-PM.jpg)   }
.businessList .li7 .pic { background-image: url(../../products/img/pic-SSO.jpg)  }
.businessList .li8 .pic { background-image: url(../../products/img/pic-AI.jpg)   }
.businessList .pic,
.businessList .con { transition: all ease 0.6s; }

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


/* ----------------------------------- 安全性 ---------------------------------- */
#solutionSafety {background: #EEFBF9;}
#solutionSafety .more a { line-height: 56px; color: #333; }
#solutionSafety .more a::before { border: none; background: #fff; }
.solutionSafety-01 { background: url(../img/bg-safety-05.png) no-repeat center top; }
.solutionSafety-02::before { background: #0D937E; }
.solutionSafety-03 { background: url(../img/bg-safety-09.jpg) no-repeat center center; }
.solutionSafety-03 .roundCon { background-color:rgba(13, 147, 126, 0.3)}
.solutionSafety-03 .roundCon .title-01 { margin:0; line-height:200px; height:50px; overflow:hidden;}
.solutionSafety-04 {margin-top: 50px;}
.solutionSafety-04 .list { background: #fff; }
.solutionSafety-04 .list li { color:#0D937E }
.solutionSafety-04 .list .li1::before { background:#0D937E; }
.solutionSafety-05 {background: transparent;margin-top: 40px;padding-top: 50px;height: 340px;}
.solutionSafety-05 .row { width:1200px;}
.solutionSafety-05 .list li::before { filter:hue-rotate(270deg)brightness(1.7)}
.solutionSafety-05 .list li:hover { color:#30625C;}
.solutionSafety-06 {background: url(../img/bg-safety-10.jpg) no-repeat center center;}
.solutionSafety-06 .pic { display:none;}
.solutionSafety-06 .title { text-align:center;}
.solutionSafety-06 .title::before {margin:0 auto 20px;float: none;display: block;background: url(../img/icon-safety-04.png) no-repeat center center;}
.solutionSafety-06 .intro {font-size:20px;font-weight:400;text-align:center;margin-top: 15px;}
.solutionSafety-06 .row { }
.solutionSafety-06 .list li { background: #fff; color: #0D937E; }
.solutionSafety-06 .list li:hover { color: #0D937E;}
.solutionSafety-07 .rowCon::before {  background:#0D937E; }
.solutionSafety-07 .rowCon .list .icon {background-image: url(../img/icons-safety-07.png); }

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


/*基础应用*/
#jcyy {padding:50px 0 0}
#jcyy .atlasBox .hd{    background: linear-gradient(to bottom, #14c9a1, #26af6c);}
#jcyy .atlasBox dt{    background: linear-gradient(90deg, #26AF6C 0%, #249682 100%);}
#jcyy .atlasBox ul li a:hover {   background-color: #259f7a;}

/* ---------------------------------- 底部通用 ---------------------------------- */
.lxss {padding: 80px 0;}
.lxss a,
.lxss a.sq { background-color: #0D937E; }
.lxss a:hover { background-color: #077f6c; }

/* ----------------------------------- 动画 ----------------------------------- */
@keyframes roundRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes roundScale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
    100% {
        transform: scale(1);
    }
}

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