﻿@charset "utf-8";

body{font-weight:400; min-width:1400px; }
body .wrap{margin: 0 auto;background:#ffffff;}
#header {}
.siteWidth{max-width:1400px; margin:0 auto;}
.product-special{overflow:hidden}

/* 头部 */
.special-header{position:relative; z-index:1; max-width:1920px; margin:0 auto; overflow:hidden; background:url(../img/banner-bg.jpg) 50% 50% no-repeat #319d7b; background-size: cover;}
.special-header .siteWidth{ height: 820px; position:relative; z-index:5; box-sizing:border-box; padding-top:260px;}
.special-header .logo{position:absolute; left:0px; top:41px; height:90px;}
.special-header .logo img{max-height:90px; width:auto;}
.special-header .links {height: 36px;position: absolute;top: 48px; right: 0;}
.special-header .links a { height:36px; border-radius: 18px;line-height: 36px; text-align: center; background-color:rgba(0,0,0,0.34); color: #fff;font-size: 16px; float:left; padding:0 1.5em; box-shadow: 0 4px 4px rgb(0 0 0 / 25%); margin-left:10px; box-sizing:content-box; }
.special-header .links a:hover {background-color:rgba(0,0,0,0.5); }
.special-header .special-header-title_en{text-align:center; font-size:48px; font-weight:bold; color:#fff; height:64px; line-height:64px; text-shadow:0 2px 2px rgba(0,0,0,0.25); }
.special-header .special-header-title_cn{ text-align:center; font-size:72px; font-weight:bold; color:#fff; height:96px; line-height:96px; text-shadow:0 2px 6px rgba(0,0,0,0.25); margin-bottom:20px;}
.special-header .special-header-slogan{width: 1200px;margin:0 auto;font-size:18px;line-height:36px;color:#fff;text-align:center;}


/* indTabBox */
.indTabBox .tHd{margin-bottom:36px;}
.indTabBox .tHd ul{display:block; margin:0 auto; width:500px; display:flex; height:52px; background:#F1FAF7; border-radius:26px; }
.indTabBox .tHd ul li{width:250px; text-align:center; font-size:18px; line-height:52px; height:52px; font-weight:bold; color:#006342; cursor:pointer;  }
.indTabBox .tHd ul li a{color:#006342}
.indTabBox .tHd ul li.on{color:#fff; background:linear-gradient(to right, #6CB75A, #0FAB77); border-radius:26px;}


/* cBox */
.cBox .cHd {
    margin: 0 auto;
    text-align: center;
    height: 53px;
    line-height: 53px;
    padding: 50px 0px 30px;
}
.cBox .cHd h3 {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    height: 53px;
    padding: 0 255px;
    font-size: 40px;
    font-weight: bold;
    position: relative;
}
.cBox .cHd h3::after,
.cBox .cHd h3::before{
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    width: 227px;
    height: 10px;
    margin-top: -5px;
}
.cBox .cHd h3::before{
    left: 0;
    background:  url(../img/box-hd-left.png) left top no-repeat;
}
.cBox .cHd h3::after{
    right: 0;
    background:  url(../img/box-hd-right.png) left top no-repeat;
}

/* box-dilemma */
#box-dilemma{
    padding: 10px 0 60px;
    background:  url(../img/box-dilemma-bg.jpg) center top no-repeat;
    background-size: 100% auto;
}
#box-dilemma .row-intro{
    font-size: 16px;
    line-height: 40px;
}
#box-dilemma .row-intro p{
    text-indent: 2em;
    margin-bottom: 30px;
}
#box-dilemma .row-intro .more{
    font-weight: bold;
    color: #16894A;
    text-decoration: underline;
}
#box-dilemma .row-intro .more:hover{
    text-emphasis: none;
    color: #0FAB77;
}

/* problem-box */
#box-problem{
    margin-bottom: 50px;
}
.problem-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 50px 20px 20px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0,0.15);
}
.problem-box dt{
    width: 210px;
    overflow: hidden;
    height: 320px;
    border-radius: 50px 20px 20px 0;
    box-shadow:  0 0 30px rgba(85, 187, 17, 0.1);
    background: linear-gradient(50deg, #4CB162, #459768 80%,#459768 100%);
}
.problem-box dt strong{
    display: block;
    padding: 190px 46px 0 38px;
    font-size:18px;
    line-height: 2;
    color: white;
    font-weight: bold;
    text-align: center;
    background:  url(../img/problem-icon-1.png) center 70px no-repeat;
}
.problem-box dd{
    flex: 1;
    padding: 0 42px 0 35px;
}

.problem-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.problem-list li{
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: calc(100% / 3 - 20px);
    margin: 12px 0;
    height: 62px;
    line-height: 62px;
    padding-left: 75px;
    border-radius: 31px;
    background-color: #F0F7F7;
}
.problem-list li::before{
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 62px;
    height: 62px;
    line-height: 62px;
    border-radius: 50%;
    background-color: #16894A;
    background: #16894A url(../img/problem-icon-2.png) center center no-repeat;
}
.problem-list li:hover{
    font-weight: bold;
    color:#16894A;
}

/* cBox_1 - row-1 */
#cBox_1 .row-1{ padding-bottom:30px; position:relative;}
#cBox_1 .row-1 .row-intro{line-height:32px;text-align:center;margin:0 auto;width: 1142px; margin-bottom:60px; font-size:16px;}
.solution-institution .sRow-con .bg::after{
    opacity: 0.1;
}
.solution-institution .pics li:nth-child(1){
    order:2;
}
.solution-institution .pics li:nth-child(2){
    order:1;
}


/* cBox_1 - row-2 */
#cBox_1 .row-2{background:#F8FAFA; padding-bottom:50px; padding-top:50px; position:relative}


/* cBox_1 - row-4 */
#cBox_1 .row-4{position:relative; padding-bottom:50px; padding-top:50px;}

/* cBox_1 - row-5 */
#cBox_1 .row-5{background:url(../img/row-5-bg.jpg) 50% 100% no-repeat;background-size:100% auto;padding: 50px 0;}
#cBox_1 .row-5::after{content:"";position: absolute;z-index: -1;left: 0;right: 0;top: 210px;bottom: 0;background:url(../img/row-5-bg.jpg) 50% bottom no-repeat;background-size:100% auto;}
#cBox_1 .row-5 .row-icon{width:71px; height:100px; margin:0 auto 21px; background:url(../img/icon-08.png) 0 0 no-repeat}
#cBox_1 .row-5 .row-title2{font-size:36px; font-weight:bold; text-align:center; color:#fff; text-shadow:0 0 4px rgba(0,0,0,0.25); line-height:48px; margin-bottom:10px;}
#cBox_1 .row-5 .row-title3{font-size:20px; text-align:center; color:#fff; text-shadow:0 0 4px rgba(0,0,0,0.25); line-height:48px; margin-bottom:54px;}
#cBox_1 .row-5 .provinceList{display:flex; justify-content:space-between}
#cBox_1 .row-5 .provinceList li{height:36px; line-height:36px; width:145px; background:#fff; text-align:center; font-size:16px; color:#006342; border-radius:18px;}

/* cBox_1 - row-6 */
#cBox_1 .row-6{padding: 50px 0 0px;}


/* cBox_2 */
#cBox_2{position:relative; padding-bottom:20px;}
#cBox_2::after{content:""; position:absolute; bottom:0px; left:0px; right:0px; height:270px; background:linear-gradient(to bottom, #6CB75A, #0FAB77); display:block; z-index:0 }
#cBox_2 .cBd{position:relative; z-index:2;}
#cBox_2 .row-intro{font-size:16px; line-height:2; text-indent:2em; margin-bottom:50px;}
#cBox_2 .list{display:flex; justify-content:space-between; margin-bottom:20px;}
#cBox_2 .list .pic{width:260px; height:368px; margin-bottom:20px; -webkit-box-reflect: below 0px linear-gradient(to bottom,rgba(0,0,0,0) 270px,rgba(0,0,0,0.05));
box-reflect: below 0px linear-gradient(to bottom,rgba(0,0,0,0) 270px,rgba(0,0,0,0.05));}
#cBox_2 .list .pic img{width:260px; height:368px;}
#cBox_2 .list .title{font-size:16px; font-weight:bold; text-align:center; color:#fff;}
#cBox_2 .tips{text-align:center; font-size:16px; color:#fff;}
#cBox_2 .tips a{color:#fff; text-decoration:underline;}

/* cBox_3 */
#cBox_3 {
    padding-bottom: 50px;
    overflow: hidden;
    background-color: #FCFCFC;
}
.solution-mobileDevices{
    display: flex;
    justify-content: space-between;
}
.solution-mobileDevices .sRow-pic{
    width: 600px;
    height: 330px;
    margin: 0 0 0 30px;
    padding: 0;
    border-radius: 0;
    background-size: cover;
}
.solution-mobileDevices .sRow-pic img{
    width: 100%;
    height: auto;
}
.solution-mobileDevices .sRow-intro{
    flex: 1;
    padding-top: 45px;
    text-align: left;
    font-size: 16px;
    line-height: 2;
}
.solution-mobileDevices .sRow-intro p{
    text-indent: 2em;
    margin-bottom: 20px;
}

/* indTabBox_01 */
#indTabBox_01 .pic{ text-align:center;}

/* cBox_4 */
#cBox_4{overflow:hidden}
#cBox_4 .row-intro{font-size:16px;line-height:2;/* text-align:center; */width:1014px;margin:0 auto 38px;text-indent: 2em;color:#666666;}
#cBox_4 .row-pic{text-align:center; padding:25px 0px; background:#FBFBFB; border-radius:20px 180px 20px 180px; margin-bottom:50px;  }
#cBox_4 .more{width:360px; height:56px; line-height:56px; text-align:center; margin:0 auto; overflow:hidden; background:#F1FAF7; border-radius:26px; position:relative;}
#cBox_4 .more::after{content:""; display:block; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(to right, #6CB75A, #0FAB77); z-index:0; opacity:0; transition:0.5s; }
#cBox_4 .more a{display:block; height:56px; font-size:16px; font-weight:bold; color:#006342; position:relative; z-index:1;}
#cBox_4 .more:hover::after{opacity:1; color:#fff}
#cBox_4 .more:hover a,
#cBox_4 .more a:hover{color:#fff;}

/* indTabBox_02 */
#indTabBox_02{margin-bottom:20px;}
#indTabBox_02 .pic{ text-align:center;}

/* 多重防御体系 - 样式重置 */
.solution-defenseSystem .sRow-more{
    background-color: #F1FAF7;
    border-radius: 28px;
}
.solution-defenseSystem .sRow-more a{
    color: #16894A;
}
.solution-defenseSystem .sRow-more:hover{
    background: linear-gradient(45deg, #6CB75A, #0FAB77);
}
.solution-defenseSystem .sRow-more:hover a{
	color:white;
}

/* box-solution */
.box-solution{
    background:  url(../img/box-solution-bg.jpg) center top no-repeat;
    background-size: 100% auto;
}
.box-solution .hd{
    padding: 46px 0 32px;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    line-height: 52px;
    color: white;
}
.box-solution .bd{
    padding: 60px 40px 0;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0,0.15);
}

.box-solution .box-intro{
    font-size: 16px;
    line-height: 2;
}
.box-solution .box-intro p{
    text-indent: 2em;
    margin-bottom: 20px;
}


.solution-list{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}
.solution-list li{
    box-sizing: border-box;
    margin: 0 auto 45px;
    text-align: center;
    padding: 20px 30px 30px;
    width: calc(100% / 5 - 24px);
    border-radius: 12px;
    background-color: #E9F8FF;
}
.solution-list li .num{
    display: inline-block;
    width: 82px;
    height: 82px;
    line-height: 82px;
    margin: 0 auto 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background:  url(../img/solution-icon.png) center top no-repeat;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all  1s;
    -o-transition:all 1s;
    transition:all 1s;
}
.solution-list li:hover .num{
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    -ms-transform:rotateY(360deg);
    -o-transform:rotateY(360deg);
    transform:rotateY(360deg);
}
.solution-list li .intro{
    font-size: 16px;
    line-height: 2;
    text-align: left;
}
.solution-list li:nth-child(1),
.solution-list li:nth-child(10){
    background-color: #E9F8FF;
}
.solution-list li:nth-child(2),
.solution-list li:nth-child(8){
    background-color: #F4F4FF;
}
.solution-list li:nth-child(3),
.solution-list li:nth-child(9){
    background-color: #F0FCF8;
}
.solution-list li:nth-child(4),
.solution-list li:nth-child(7){
    background-color: #FFF8F5;
}
.solution-list li:nth-child(5),
.solution-list li:nth-child(6){
    background-color: #F2F9F5;
}
.solution-list li:nth-child(2) .num,
.solution-list li:nth-child(8) .num{
    background-position: center -100px;
}
.solution-list li:nth-child(3) .num,
.solution-list li:nth-child(9) .num{
    background-position: center -200px;
}
.solution-list li:nth-child(4) .num,
.solution-list li:nth-child(7) .num{
    background-position: center -300px;
}
.solution-list li:nth-child(5) .num,
.solution-list li:nth-child(6) .num{
    background-position: center -400px;
}

/* solution-platforms  重置 */
.solution-platforms .sBox .sHd{
    margin: 0 auto;
    text-align: center;
    height: 53px;
    line-height: 53px;
    padding: 50px 0px 30px;
    border-bottom: 0;
}
.solution-platforms .sBox .sHd h3{
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    height: 53px;
    padding: 0 255px;
    font-size: 40px;
    font-weight: bold;
}
.solution-platforms .sBox .sHd h3::after,
.solution-platforms .sBox .sHd h3::before{
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    width: 227px;
    height: 10px;
    margin-top: -5px;
}
.solution-platforms .sBox .sHd h3::before{
    left: 0;
    background:  url(../img/box-hd-left.png) left top no-repeat;
}
.solution-platforms .sBox .sHd h3::after{
    right: 0;
    bottom: auto;
    left: auto;
    background:  url(../img/box-hd-right.png) left top no-repeat;
}

#sBox_release,
#sBox_sso{
    background-color: #FCFCFC;
}


/* cBox_8 */
#cBox_8 .row-intro {
    margin: 0 auto 50px;
    font-size: 16px;
    text-indent: 2em;
}

.system-list{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}
.system-list li{
    box-sizing: border-box;
    padding: 0 30px 40px;
    margin: 0 auto 34px;
    text-align: center;
    width: calc(100% / 2 - 20px);
    border-radius: 20px;
    background-color: rgba(241, 250, 247, 0.5);
}
.system-list li:hover{
    background-color: #F1FAF7;
}
.system-list li .intro{
    font-size: 16px;
    line-height: 2;
    color: #666;
    text-align: justify;
}
.system-list li .intro p{
    margin-bottom: 20px;
    text-indent: 2em;
}
.system-list li .title{
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 26px;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    font-weight: bold;
    color: white;
    border-radius: 0 0 20px 20px;
}
.system-list li .title::before{
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(45deg,#4cb162,#459768);
}
.system-list li .more{
    display: inline-block;
    padding: 0 20px;
    margin: 0 auto;
    text-align: center;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    color: #16894A;
    border: 1px solid #B1CDBE;
    border-radius: 23px;
}
.system-list li .more:hover{
    background-color: #16894A;
    border-color: #16894A;
    color: white;
}

/* cBox_9 */
#cBox_9 {
    position: relative;
}
#cBox_9 .row-title{
    font-size: 36px;
    font-weight: bold;
    color: #16894A;
    line-height: 2;
    text-align: center;
}
#cBox_9 .row-intro{
	margin-bottom: 36px;
    font-size: 16px;
    line-height: 2;
    color: #666;
    text-align: center;
}
#cBox_9 .row-intro .red{
    color:#f00;
}

.case-pic-box{
    margin-bottom: 50px;
}
.case-pic-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
.case-pic-list li{
    position: relative;
    z-index: 1;
    width: 335px;
    overflow: hidden;
    border-radius: 10px;
}
.case-pic-list li .pic{
    overflow: hidden;
}
.case-pic-list li .pic img{
    width: 100%;
    height: auto;
}
.case-pic-list li .title{
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    overflow: hidden;
    font-size: 16px;
    color: white;
    background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.6));
}

.case-info{
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
.case-info img{
    max-width: 100%;
    height: auto;
    text-align: center;
}

/* 相关技术支撑功能模块 */
.lxss .row{z-index:0; position:relative;}
.lxss a{position:relative; }
.lxss a,
.lxss a.sq{background-color:transparent; }
.lxss a::after{content:""; position:absolute; left:0px; top:0; right:0; bottom:0; display:block; background:linear-gradient(to right, #6CB75A, #0FAB77); z-index:-1; border-radius:30px; transition:0.5s}
.lxss a:hover{background-color:#6CB75A; box-shadow:none}


/* 模板 */
.platformList .pic span {display: block;width: 1400px;height: 650px; animation: float 4s infinite;}
.platformList .pic span.cp01{background: url(../../products/img/jjfa-cp09.jpg) no-repeat center;background-size: 100%;}
.platformList .pic span.cpmb{background: url(../../products/img/jjfa-cpmb.jpg) no-repeat top center;margin: 20px auto; border: #fff solid 40px;box-shadow: #ccc 0 0 20px;background-size: 100% auto;width: 1320px;height: 450px;border-radius: 10px;}
.platformList .row-intro p{text-indent:2em;text-align: left;padding-bottom:20px;font-size: 16px;}

.solutionSafety-07{margin: 0;}
.solutionSafety-07 .more{margin: 30px auto 0; text-align:center}
.solutionSafety-07 .more a{display:inline-block; line-height:56px;   font-weight: bold; font-size:16px;  padding:0 30px; border-radius:26px; color:#006342; transition:0.5s; background:#F1FAF7;}
.solutionSafety-07 .more a:hover{background:linear-gradient(to right, #6CB75A, #0FAB77); color:#fff}


/* 基础应用 */
#jcyy {}
#moban {/* padding: 50px 0 0; */}
#jcyy .row .bd{width: 1400px; margin: auto; position: relative; }
.rowBox{}
.rowBox>.hd { margin: 0 auto; text-align: center;height: 53px;line-height: 53px;padding: 50px 0px 30px;}
.rowBox>.hd h3 {position: relative;z-index: 1;display: inline-block;margin: 0 auto;text-align: center;height: 53px;padding: 0 255px;font-size: 40px;font-weight: bold;position: relative;}
.rowBox>.hd h3::after,
.rowBox>.hd h3::before{content: "";display: block;position: absolute;z-index: 1;top: 50%;width: 227px;height: 10px;margin-top: -5px;}
.rowBox>.hd h3::before{left: 0;background:  url(../img/box-hd-left.png) left top no-repeat;}
.rowBox>.hd h3::after{right: 0;background:  url(../img/box-hd-right.png) left top no-repeat;}
.rowBox>.hd h3 .line{display: none;}
#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;}

