@charset "utf-8";

body{font-weight:400; min-width:1400px; }
body .wrap{margin: 0 auto;background:#ffffff;}
#header {}
#top::after{content:""; height:0px; display:block; margin:0px; padding:0px; clear:both}
.siteWidth{max-width:1400px; margin:0 auto;}
.productSpecial-SOP{overflow:hidden;font-size:16px;}

/* 头部 */
.special-header{position:relative;z-index:1;/* max-width:1920px; */margin:0 auto;overflow:hidden;background:url(../img/banner.jpg) 50% 100% no-repeat #212f8e; background-size:cover}
.special-header .siteWidth{ height: 800px; 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(255,255,255,0.2); 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(255,255,255,0.4); }
.special-header .special-header-title_en{text-align:center; font-size:50px; font-weight:bold; color:#fff; height:66px; line-height:66px; text-shadow:0 0px 18px rgba(0,0,0,0.16); margin-bottom:20px }
.special-header .special-header-title_cn{ text-align:center; font-size:75px; font-weight:bold; color:#fff; height:100px; line-height:100px; text-shadow:0 0px 18px rgba(0,0,0,0.16); margin-bottom:32px;}
.special-header .special-header-slogan{width: 1230px;margin:0 auto;font-size:18px;line-height:36px;color:#fff;text-align:center; text-shadow:0px 0px 18px rgba(0,0,0,0.16);}

/* rowBox */
.rowBox{padding: 50px 0 30px;}
.rowBox .rHd{ margin-bottom:40px;}
.rowBox .rHd h3{font-size:40px; font-weight:bold; color:#0068CE; line-height:1.6; display:flex; align-items:center; justify-content:center; }
.rowBox .rHd h3 span{margin:0 8px;}
.rowBox .rHd h3::before,
.rowBox .rHd h3::after{content:""; display:block; width:34px; height:29px; background:url(../img/icon-star.png) 0 0 no-repeat;}
.rowBox .rHd h3::after{transform: rotateY(180deg)}

/* intro */
.special-row .intro{font-size:16px; line-height:2; text-align:justify}
.special-row .intro p{text-indent:2em;margin-top:1em;}
.special-row .intro p:first-child{margin-top:0px;}

/* indTabBox */
.indTabBox .tHd{margin-bottom:36px;}
.indTabBox .tHd ul{display:block; margin:0 auto; width:500px; display:flex; height:52px; background:#fff; border-radius:26px; }
.indTabBox .tHd ul li{width:250px; text-align:center; font-size:18px; line-height:52px; height:52px; font-weight:bold; color:#555555; cursor:pointer;  }
.indTabBox .tHd ul li a{color:#555555}
.indTabBox .tHd ul li.on{color:#fff; background:linear-gradient(to bottom, #0070FF, #6AB9FF); border-radius:26px;}

/* specialRow_01 */
#specialRow_01{position:relative; background:#EDF2FE;}
#specialRow_01 .siteWidth{position:relative; z-index:1; display:flex; align-items:center}
#specialRow_01 .siteWidth > .pic{width:544px; height:auto; flex-shrink:0; margin-left:20px;}
#specialRow_01 .siteWidth > .pic img{width:100%;}
#specialRow_01 .rowBox .rHd h3{justify-content:flex-start}
#specialRow_01 .rBd .intro a{color:#007AFF; text-decoration:underline}
#specialRow_01 .rBd .intro a:hover{color:#c00}

/* specialRow_02 */
#specialRow_02{position:relative}
#specialRow_02 .siteWidth{position:relative; z-index:1}
#specialRow_02 .rowBox{padding-bottom:0}
#specialRow_02 .questionList{display:grid; grid-template-columns: repeat(5,1fr); grid-gap: 0px; margin-bottom:40px;}
#specialRow_02 .questionList li{font-size:16px; color:#787878; text-align:center; line-height:2; min-height:104px; box-sizing:border-box; border:1px solid #E5F1FE; display:flex; justify-content:center; align-items:center; box-shadow:0 0 15px rgba(45,114,219,0.12); position:relative; transition:0.5s }
#specialRow_02 .questionList li.li1{border-radius:10px 0 0 0;}
#specialRow_02 .questionList li.li5{border-radius:0 10px 0 0;}
#specialRow_02 .questionList li.li6{border-radius:0 0 0 10px;}
#specialRow_02 .questionList li.li10{border-radius:0 0 10px 0px;}
#specialRow_02 .questionList li:hover{border-color:#abc3dd; z-index:5; box-shadow:0 0 15px rgba(45,114,219,0.5);}

.questionBox{padding:50px; background:url(../img/bg-01.jpg) 50% 50% no-repeat; background-size:cover; border-radius:30px;}
.questionBox .hd{position:relative; padding-bottom:32px; margin-bottom:30px;}
.questionBox .hd h3{font-size:32px; line-height:50px; text-align:center; font-weight:bold; color:#fff; }
.questionBox .hd::before{content:""; display:block; height:1px; width:430px; background:#56A2F7; position:absolute; bottom:5px; left:50%; margin-left:-215px;}
.questionBox .hd::after{content:""; display:block; height:1px; width:600px; background:#56A2F7; position:absolute; bottom:0px; left:50%; margin-left:-300px;}
.questionBox .bd .intro{color:#fff}

/* specialRow_03 */
#specialRow_03{}
#specialRow_03 .intensificationList{margin-top:68px; display:flex; justify-content:center; flex-wrap:wrap;}
#specialRow_03 .intensificationList li{width:380px; box-sizing:border-box; flex-shrink:0; flex-grow:0; margin:0 30px; min-height:420px; padding:50px 50px 0; background:linear-gradient(to bottom, #EFF6FF 0%, #ffffff 38%); border-radius:20px; overflow:hidden; box-shadow:0 4px 10px rgba(73,155,255,0.14); position:relative; top:0; transition:0.5s; }
#specialRow_03 .intensificationList li .title{height:50px; line-height:50px; text-align:center; font-size:20px; font-weight:bold; margin-bottom:20px;}
#specialRow_03 .intensificationList li .intro{color:#666666; margin-bottom:30px; text-indent:2em;}
#specialRow_03 .intensificationList li .pic{width:150px; margin:0 auto;}
#specialRow_03 .intensificationList li .pic img{width:100%; height:auto;}
#specialRow_03 .intensificationList li:hover{top:-10px;box-shadow:0 0px 10px rgba(73,155,255,0.3);}

/* specialRow_04 */
#specialRow_04{position:relative; background:url(../img/bg-02.jpg) 50% 50% no-repeat; background-size:cover;}
#specialRow_04 .solution-ITAI .list{position:relative;padding-bottom:40px;/* margin-bottom:50px; */}
#specialRow_04 .solution-ITAI .list::after{content:""; display:block; width:1591px; height:104px; background:url(../img/bg-terrace.png) 50% 50% no-repeat; position:absolute; bottom:0px; left:-96px; z-index:0;}
#specialRow_04 .solution-ITAI .list li{position:relative; z-index:1}
#specialRow_04 .solution-ITAI .list li .pic{width:245px;height:auto; margin-bottom:5px;
    -webkit-box-reflect: below 0px linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0));
    box-reflect: below 0px linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0));
}
#specialRow_04 .solution-ITAI .list li .pic img{width:100%; height:auto;}
#specialRow_04 .solution-ITAI .list li .title{color:#333333; line-height:40px; height:40px; font-weight:normal}
#specialRow_04 .solution-ITAI .list li .title span{display:inline-block; position:relative;}
#specialRow_04 .solution-ITAI .list li .title span::before,
#specialRow_04 .solution-ITAI .list li .title span::after{content:""; display:block; width:20px; height:37px; background:url(../img/icon-01.png) 0 0 no-repeat; position:absolute; top:2px; left:-30px;}
#specialRow_04 .solution-ITAI .list li .title span::after{left:auto; right:-30px; transform:scaleX(-1)}
#specialRow_04 .solution-ITAI .tips{color:#7A7A7A;padding: 30px;}
#specialRow_04 .solution-ITAI .tips::before{content:"*"; color:#C7000B}
#specialRow_04 .solution-ITAI .tips a{color:#5A5A5A}
#specialRow_04 .solution-ITAI .tips a:hover{color:#007AFF}

#specialRow_05 .solution-mobileDevices{display:flex; justify-content: space-between; margin-bottom:75px; }
#specialRow_05 .solution-mobileDevices .sRow-intro{margin:0; width:710px; text-align:left; padding-top:80px;}
#specialRow_05 .solution-mobileDevices .sRow-intro p{text-indent:2em; margin-top:1em}
#specialRow_05 .solution-mobileDevices .sRow-intro p:first-child{margin-top:0;}
#specialRow_05 .solution-mobileDevices .sRow-pic{width:574px; border-radius:0; background-color:transparent; background-size:100% auto; background-image:url(../img/pic-mobiledevices.jpg); height:330px; margin:0;}

.platformsList{}
.platformsList li{background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 0 20px 3px rgba(73,155,255,0.15); margin-bottom:40px; display:flex; min-height:300px; align-items:center;}
.platformsList li .titleArea{width:700px; height:300px; flex-shrink:0; box-sizing:border-box; padding:86px 0px 0px 50px; background:url(../img/pic-05.jpg) 50% 50% no-repeat; background-size: cover; border-radius:20px;}
.platformsList li .titleArea .title{height:50px; line-height:50px; font-size:40px; color:#fff; margin-bottom:30px; }
.platformsList li .titleArea .more a{display:inline-block; line-height:50px; font-size:16px; border:1px solid #ffffff; padding:0 30px; border-radius:26px; color:#fff; transition:0.5s;}
.platformsList li .titleArea .more a:hover{background-color:rgba(255,255,255,0.3)}
.platformsList li .intro{padding:0 60px; text-align:justify}
.platformsList li.li2 .titleArea{background-image:url(../img/pic-06.jpg); order:2}
.platformsList li.li3 .titleArea{background-image:url(../img/pic-07.jpg);}

/* specialRow_06 */
#specialRow_06{background:url(../img/bg-03.png) 50% 0% no-repeat; background-size:100% auto;}
#specialRow_06 .row-intro{padding:0 50px; font-size:16px; line-height:2; text-indent:2em; margin-bottom:50px; text-align:left}
.systemList{display:grid; grid-template-columns: repeat(2,1fr); grid-gap: 40px 60px;}
.systemList li{display:flex; flex-direction:column;}
.systemList .li_hd{height:90px; background:url(../img/title-01.jpg) 0px 50% no-repeat; background-size:100% auto; border-radius:10px; overflow:hidden; box-sizing:border-box; line-height:90px; font-size:24px; color:#fff; font-weight:bold; padding-left:55px; position:relative; z-index:5; flex-shrink:0;}
.systemList .li_bd{background:#fff; border-radius:10px; box-shadow:0 4px 25px 2px rgba(159,184,235,0.21); flex-grow:1; padding-bottom:25px;}
.systemList .li_bd .con{padding:35px 50px ; display:flex; justify-content:space-between; align-items:center; }
.systemList .li_bd .con .pic{flex-shrink:0; margin-left:20px;}
.systemList .li_bd .more{text-align:center;}
.systemList .li_bd .more a{display:inline-block; line-height:54px; font-size:16px; border:1px solid #0092F2; padding:0 30px; border-radius:26px; color:#0077C6; transition:0.5s; background:#fff;}
.systemList .li_bd .more a:hover{background-color:#0092F2; color:#fff}

/* specialRow_07 */
#specialRow_07 .row-intro{padding:0 50px;font-size:16px;line-height:2;margin-bottom:50px;/* text-align:center; */text-indent: 2em;}
#specialRow_07 .solution-institution .sRow-con .bg::after{background: linear-gradient(to bottom, rgba(0,150,249,0), rgba(0,141,234,0.2)); border-radius:10px;}

/* specialRow_08 */
#specialRow_08{background:#F6FBFF; padding-top:70px; padding-bottom:20px;}
#specialRow_08 .solution-testingTools .sRow-con{background:none; position:relative;}
#specialRow_08 .solution-testingTools .sRow-con::before{content:""; display:block; position:absolute; left:0px; right:0px; top:0px; height:235px; background:linear-gradient(to right, #008EEB, #006EEC); border-radius:20px; }
#specialRow_08 .solution-testingTools .sRow-con .con-intro,
#specialRow_08 .solution-testingTools .sRow-con .list{position:relative; z-index:5}

/* specialRow_09 */
#specialRow_09 .solution-attackTesting{background-image:url(../img/solution-attackTesting-bg.jpg)}

/* specialRow_10 */
#specialRow_10{padding-top:50px;}
#specialRow_10 .solution-securityLevel .sRow-card{background-color:#EAF5FF}
#specialRow_10 .solution-securityLevel .sRow-card::before{background: linear-gradient(30deg, #0B83EF 50px, #006EEC);}
#specialRow_10 .solution-securityLevel .sRow-card .icon{background-image:url(../img/solution-icon-06.png)}
#specialRow_10 .solution-securityLevel .sRow-card .sRow-card_right{color:#0068CE}

.row-bg-01{position:relative; z-index:0;}
.row-bg-01::after{content:""; position:absolute; left:0px; right:0px; bottom:0px; top:300px; background:url(../img/bg-05.jpg) 50% 100% no-repeat #f0f7ff; background-size:100% auto; z-index:0}
/* specialRow_11 */
#specialRow_11{padding-top:50px; position:relative; z-index:1}
#specialRow_11 .siteWidth{position:relative; z-index:2;}
#specialRow_11 .solution-defenseSystem .sRow-card{width:auto; margin-bottom:30px}
#specialRow_11 .solution-defenseSystem .sRow-card::before{transform:none; border-radius:0; bottom:auto; height:650px; background:url(../img/bg-04.jpg) 50% 50% no-repeat; background-size:cover;}
#specialRow_11 .solution-defenseSystem .sRow-card::after{display:none;}
#specialRow_11 .solution-defenseSystem .list li{top:0; transition:0.5s; }
#specialRow_11 .solution-defenseSystem .list li:hover{top:-5px; box-shadow: 0 10px 5px rgba(0, 0, 0, 0.2);}
#specialRow_11 .solution-defenseSystem .list li:hover .icon{animation: tada 1s ease 1;}
#specialRow_11 .solution-defenseSystem .list li:hover::after{display:none}
#specialRow_11 .solution-defenseSystem .list li:hover .title,
#specialRow_11 .solution-defenseSystem .list li a:hover{color:#333}
#specialRow_11 .solution-defenseSystem .list li.li1 .icon {background: url(../img/icon-02.png) center center no-repeat;}
#specialRow_11 .solution-defenseSystem .list li.li2 .icon {background: url(../img/icon-04.png) center center no-repeat;}
#specialRow_11 .solution-defenseSystem .list li.li3 .icon {background: url(../img/icon-03.png) center center no-repeat;}
#specialRow_11 .solution-defenseSystem .list li.li4 .icon {background: url(../img/icon-05.png) center center no-repeat;}
#specialRow_11 .solution-defenseSystem .sRow-more{display:none}
#specialRow_11 .solution-safetyProtection .sRow-title{color:#fff; font-size:32px; margin-bottom:40px;}
#specialRow_11 .solution-safetyProtection .protectionList{box-shadow:0 5px 20px rgba(95,120,134,0.2); margin-bottom:50px}
#specialRow_11 .solution-safetyProtection .protectionList li{background-image:url(../img/icon-06.png);}
#specialRow_11 .row-more{text-align:center;}
#specialRow_11 .row-more a{display:inline-block; line-height:50px; font-size:16px; border:1px solid #0068CE; padding:0 30px; border-radius:26px; color:#0068CE; transition:0.5s; background:#fff;}
#specialRow_11 .row-more a:hover{background-color:#0068CE; color:#fff}

#specialRow_12{position:relative; z-index:1}
.caseList{display:flex; flex-wrap:wrap; justify-content:center;   }
.caseList li{margin:0 20px 30px; padding:20px; background:#fff; border-radius:10px; box-shadow:0 0 15px rgba(95,120,134,0.2); cursor:pointer; position:relative; top:0; transition:0.5s; line-height:1;}
.caseList li img{margin:0; }
.caseList li:hover{top:-10px; box-shadow:0 0 15px rgba(95,120,134,0.4);}

/* specialRow_13 */
#specialRow_13{position:relative; background:url(../img/bg-06.jpg) 50% 50% no-repeat; background-size:cover; padding:50px 0;}
#specialRow_13 .row-icon{width:118px; height:168px; margin:0 auto 32px; background:url(../img/icon-15.png) 0 0 no-repeat;}
#specialRow_13 .row-title2{font-size:36px; font-weight:bold; text-align:center; color:#fff; margin-bottom:14px; line-height:1.4; }
#specialRow_13 .row-title3{font-size:20px; text-align:center; color:rgba(255,255,255,0.8); line-height:1.4; margin-bottom:60px;}
#specialRow_13 .provinceList{display:flex; justify-content:space-between}
#specialRow_13 .provinceList li{height:36px; line-height:36px; width:145px; background:rgba(255,255,255,1); text-align:center; font-size:16px; color:#3C6AB4; border-radius:18px; cursor:pointer; transition:0.3s}
#specialRow_13 .provinceList li:hover{background:rgba(255,255,255,0.8);}

/* 模板 */
.platformList .pic span {display: block;width: 1400px;height: 650px; animation: float 4s infinite;}
.platformList .pic span.cp01{background: url(../../products/img/jjfa-cp08.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}

.solutionSafety-07{margin: 0;}
.solutionSafety-07 .intro p{text-indent: 0;}
.solutionSafety-07 .more{margin: 30px auto 0; text-align:center}
.solutionSafety-07 .more a{display:inline-block; line-height:50px; font-size:16px; border:1px solid #0068CE; padding:0 30px; border-radius:26px; color:#0068CE; transition:0.5s; background:#fff;}
.solutionSafety-07 .more a:hover{background-color:#0068CE; color:#fff}


/* 基础应用 */
#jcyy {}
#moban {/* padding: 50px 0 0; */}
#jcyy .row .bd{width: 1400px; margin: auto; position: relative; }
.rowBox{}
.rowBox>.hd{/* height:48px; */line-height:48px;/* padding: 50px 0px 0px; *//* border-bottom:1px solid #dddddd; *//* margin-bottom:50px; *//* display: inline-block; */text-align: center;margin: 0 auto 30px;}
.rowBox>.hd h3{margin: auto 30px;font-size: 40px;font-weight: 700;display: flex;color: #0068CE;align-content: flex-start;justify-content: center;align-items: center;}
.rowBox>.hd h3 span{display:inline-block;padding:0 30px;}
.rowBox>.hd h3::before,.rowBox>.hd h3::after{content:""; display:block; width:34px; height:29px; background:url(../img/icon-star.png) 0 0 no-repeat;}
.rowBox>.hd h3::after{transform: rotateY(180deg)}
.rowBox>.hd h3 .line{display: none;}


/* 相关技术支撑功能模块 */
.lxss .row{z-index:0; position:relative;}
.lxss a{position:relative; }
.lxss a,
.lxss a.sq{ background-color:#0062CF;}
.lxss a::after{content:""; position:absolute; left:0px; top:0; right:0; bottom:0; display:block; z-index:-1; border-radius:30px; transition:0.5s}
.lxss a:hover{background-color:#006EEC; box-shadow:none}

/* 漂浮 */
@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 circle{
    0%{transform: rotate(0)}
    100%{transform: rotate(360deg)}
}
@keyframes circle-reverse{
    0%{transform: rotate(0)}
    100%{transform: rotate(-360deg)}
}
@keyframes svg-circle{
    0%{stroke-dashoffset: 100%;}
    100%{stroke-dashoffset: 0%;}
}