@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: 800px; 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: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);}
#headerChannel .links a:hover { background: #fff; color: #004EC0; }

#headerChannel .con { position: absolute; left: 0; top: 290px; 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: 5px; font-size: 48px; font-weight: bold; }
#headerChannel .con .intro { margin-top: 30px; font-size: 18px; color: #fff; }

.rowGroup { padding: 70px 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: #004EC0; }
.rowBox > .hd h3 span { position: relative; z-index: 1; }
.rowBox > .hd .intro { margin: 30px 100px 0; font-size: 16px; line-height: 30px; text-align: center; color: #333; }
.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%, #004EC0 100%); }
.rowBox > .bd .moreWrap a:hover { transform: translateY(5px); box-shadow: 0 -3px 0 rgba(0, 53, 167, 0.3); }

/* ------------------------------ 当前内部网站普遍存在的现状 ----------------------------- */
#prevalent { background: #e1eefc url(../img/bg-01.jpg) repeat-x center bottom; }
#prevalent .rowBox > .hd .intro { color: #666; }
#prevalent .rowBox > .bd { position: relative; padding: 10px 0; }

.prevalentList { position: absolute; z-index: 2; left: 0; top: 0; right: 0; }
.prevalentList li { position: absolute; display: flex; align-items: center; gap: 15px; }
.prevalentList li .number { width: 50px; height: 50px; background: #0373DF; line-height: 50px; font-size: 20px; font-weight: bold; color: #fff; text-align: center; border-radius: 50%; }
.prevalentList li .title { flex: 1 0 0%; line-height: 1.3; font-size: 18px; color: #333; }

.prevalentList li:nth-of-type(odd) { text-align: right; }
.prevalentList li:nth-of-type(odd) .number { order: 1; }


.prevalentList li.li1 { right: 50%; top: 17px; margin-right: 90px; }
.prevalentList li.li2 { left: 50%; top: 17px; margin-left: 90px; }
.prevalentList li.li3 { right: 50%; top: 100px; margin-right: 153px; }
.prevalentList li.li4 { left: 50%; top: 100px; margin-left: 153px; }
.prevalentList li.li5 { right: 50%; top: 197px; margin-right: 167px; }
.prevalentList li.li6 { left: 50%; top: 197px; margin-left: 167px; }
.prevalentList li.li7 { right: 50%; top: 297px; margin-right: 124px; }
.prevalentList li.li8 { left: 50%; top: 297px; margin-left: 124px; }

#prevalent .roundCon { position: relative; z-index: 1; margin: 0 auto; width: 375px; height: 375px; box-sizing: border-box; overflow: hidden; background: url(../img/bg-02.png) no-repeat center center; }
#prevalent .roundCon::after { position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; content: ''; border: 1px dashed rgba(25, 80, 185, 0.6); border-radius: 50%; animation: roundRotate 60s linear infinite; }
#prevalent .roundCon::before { position: absolute; z-index: -1; left: 32px; top: 32px; right: 32px; bottom: 32px; content: ''; border: 1px solid rgba(25, 80, 185, 0.6); border-radius: 50%; animation: roundScale 3s ease infinite; }
#prevalent .roundCon .title { width: 6em; margin: 155px auto 0; font-size: 22px; font-weight: bold; color: #fff; text-align: center; line-height: 1.5; }


/* --------------------------------- 向下的大标题 --------------------------------- */
#downTitle { position: relative; background: #004EC0; 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: #004EC0; }


/* ---------------------------------- 集约化建设 --------------------------------- */
#construction { background: linear-gradient(180deg, #E3F0FF 50%, #CDE3FF 100%); }
.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 { width: 200px; margin: 0 auto; }
.constructionList .pic span { display: block; width: 100%; height: 200px; }
.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: 10px; }
.constructionList .title { position: relative; font-size: 24px; color: #333; text-align: center; 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: 26px; text-align: center; }

.constructionList .li2 .pic span::before { background-position: -200px 0; }
.constructionList .li3 .pic span::before { background-position: -400px 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: #004EC0; }

/* ---------------------------------- 信创适配 ---------------------------------- */
#xcsp { background: #E3F0FF; }
#xcsp .rowBox > .bd .more { margin-top: 45px; padding: 20px 0 25px; line-height: 1.2; text-align: center; background: #1C68CC; 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; 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: #1B68CC; }
.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: linear-gradient(180deg, #CDE3FF 0%, #E3F0FF 439px); }
#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: #004EC0; 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; }

/* -------------------------------- 对接警务通 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: #004EC0;  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: linear-gradient(180deg, #CDE3FF 0%, #E3F0FF 439px); }
.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: #469AF6; line-height: 21px; background: linear-gradient(180deg, #CDF0FD 0%, #C0DCFC 100%); 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: #3E91F7; 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; }
.allMediaCon .more { margin-top: 77px; font-size: 0; line-height: 1; text-align: center; }
.allMediaCon .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; }
.allMediaCon .more 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; }
.allMediaCon .more a:hover { color: #fff; }
.allMediaCon .more a:hover::before { transform: rotateY(180deg); background: #004EC0; }

/* -------------------------- PowerMonitor 新媒体监测平台 -------------------------- */
#newMedia { padding: 80px 0; background: linear-gradient(180deg, #F1F8FF 15%, #CDE3FF 100%); }
.newMediaList li { display: flex; }
.newMediaList .pic { width: 450px; }
.newMediaList .pic img { height: 200px; }
.newMediaList .con { flex: 1 0 0%; padding: 30px; background: #fff; }
.newMediaList .intro { font-size: 16px; line-height: 30px; text-align: justify; text-indent: 2em; }
.newMediaList .more { margin-top: 23px; font-size: 0; line-height: 1; }
.newMediaList .more a { position: relative; z-index: 1; display: inline-block; vertical-align: top; line-height: 50px; padding: 0 40px; color: #333; font-size: 16px; perspective: 800px; }
.newMediaList .more a::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: #F2F2F2; border-radius: 500px; transition: all ease 0.6s; }
.newMediaList .more a:hover { color: #fff; }
.newMediaList .more a:hover::before { transform: rotateY(180deg); background: #004EC0; }

/* ------------------------------ 为内网量身打造的业务系统 ------------------------------ */
.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; 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 .more { text-align: center; font-size: 0; line-height: 1; }
.businessList .more a { position: relative; z-index: 1; display: inline-block; vertical-align: top; line-height: 50px; padding: 0 40px; color: #333; font-size: 16px; background: #F2F2F2; 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: #004EC0; }
.businessList .more a:hover { color: #fff; }
.businessList .more a:hover::before { opacity: 1; transform: scaleY(1); }

.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-position: 0 -1250px; }
.businessList .li7 .pic { background-position: 0 -1500px; }

.businessList .pic,
.businessList .con { transition: all ease 0.6s; }

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


/* ----------------------------------- 安全性 ---------------------------------- */
#solutionSafety { background: linear-gradient(180deg, #CDE3FF 0%, #E3F0FF 439px); }
.solutionSafety-04 .list { background: #fff; }
.solutionSafety-05 { background: #D4E7FF; }
#solutionSafety .more a { line-height: 56px; color: #333; }
#solutionSafety .more a::before { border: none; background: #fff; }

/* ---------------------------------- 客户案例 ---------------------------------- */
.caseList { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.caseList li { width: 264px; box-sizing: border-box; border: 1px solid #D9D9D9; background: #fff; overflow: hidden; transition: all ease 0.6s; }
.caseList li img { width: 100%; height: 100px; }
.caseList li:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(9, 63, 134, 0.1); border-color: rgba(9, 63, 134, 0.4); }


/* ---------------------------------- 底部通用 ---------------------------------- */
.lxss { padding: 10px 0 70px; }
.lxss a,
.lxss a.sq { background-color: #1E5BB3; }
.lxss a:hover { background-color: #0373df; }

/* ----------------------------------- 动画 ----------------------------------- */
@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);
    }
}