@charset "utf-8";

body{font-weight:400; min-width:1400px; }
body .wrap{ margin: 0 auto; background:#fff }
#header { display: none;}
.siteWidth{max-width:1400px; margin:0 auto;}
.productSpecial-html{width:100%; min-width:1400px; overflow:hidden}

/* 头部 */
.special-header{height: 760px; background:url(../img/banner.jpg) 50% 50% no-repeat #012C88; background-size:cover; max-width: 1920px; margin:0 auto}
.special-header .siteWidth{ height: 760px; position:relative;}
.special-header .logo{position:absolute; left:0px; top:41px; height:50px;}
.special-header .logo img{max-height:50px; width:auto;}
.special-header .links {height: 36px;position: absolute;top: 48px; right: 0;}
.special-header .links a { height:34px;background-color: transparent; border-radius: 18px;line-height: 34px; border:1px solid rgba(255,255,255,0.5); text-align: center;color: #fff;font-size: 16px; float:left; padding:0 1.5em; box-shadow: 0 5px 5px rgb(0 0 0 / 25%); margin-left:10px; box-sizing:content-box; }
.special-header .links a:hover {background-color:#ffffff; color:#22468C; border-color:#ffffff; }
.special-header  .special-h1{position:absolute; top:290px; left:312px; font-size:80px; font-weight:bold; color:#fff; height:100px; line-height:100px; text-align:left;  opacity:0; transition:all 1s; transition-delay:0.5s; text-shadow:0 4px 4px rgba(0,0,0,0.25); user-select: none; }
.special-header  .special-h2{position:absolute; top:400px; left:312px; font-size:18px; text-indent:5px; font-weight:normal; color:#fff; height:32px; line-height:32px; text-align:left; user-select: none; opacity:0; transition:all 1s; transition-delay:0.5s;}
.special-header  .special-pic{width:560px; height:392px; position:absolute; top:210px; right:0px; z-index:2; background:url(../img/special-pic.png) 50% 50% no-repeat; opacity:0; transition:all 1.2s;  transform:scale(0.5); }
.special-header  .special-h1.animated,
.special-header  .special-h2.animated{opacity:1; left:10px}
.special-header  .special-pic.animated { transform:scale(1); opacity:1;}

/* column */
.column{padding-top:65px; position:relative; z-index:2}
.column .cHd{width:1400px; margin:0 auto; text-align:center; margin-bottom:50px;}
.column .cHd h4{height:36px; line-height:36px; font-size:24px;}
.column .cHd h3{height:60px; line-height:60px; font-size:40px; font-weight:bold; color:#22468C}
.column .cBd{width:1388px; margin:0 auto;}

/* cardsList */
.cardsList{display:flex; justify-content:space-between; flex-wrap:wrap;}
.cardsList li{width:669px;height:295px;margin-bottom:30px;background:#F3F9FF;border-radius:12px;overflow:hidden;box-sizing:border-box;padding: 38px 68px;text-align:left;position:relative;cursor:pointer;transition:0.3s;}
.cardsList li::before{content:""; width:200px; height:295px; position:absolute; left:0px; bottom:0px; background:url(../img/cards-bg-left.png) 0px 0px no-repeat; opacity:0.4; z-index:1; transition:0.3s;}
.cardsList li::after{content:""; width:200px; height:195px; position:absolute; right:0px; top:0px; background:url(../img/cards-bg-right.png) 0px 0px no-repeat; opacity:0.4; z-index:1; transition:0.3s;}
.cardsList li .bg{position:absolute; left:0px; top:0px; right:0px; bottom:0px; z-index:0; background:linear-gradient(100deg, #4E7BD5, #1B369A ); opacity:0; transition:0.3s;}
.cardsList li .title{height:40px; line-height:40px; font-size:24px; font-weight:bold; margin-bottom:42px; position:relative; top:0px; z-index:10;transition:0.3s}
.cardsList li .title::before,
.cardsList li .title::after{content:""; display:block; position:absolute; left:0px; bottom:-15px;transition:0.3s }
.cardsList li .title::before{ width: 27px; height: 0; border: 0 solid transparent; border-right: 3px solid transparent; border-left: 0px solid transparent; border-top: 5px solid #F8537E; z-index:2 }
.cardsList li .title::after{width:60px; height:5px; z-index:1; background:#2241B1}
.cardsList li .intro{font-size:16px; line-height:32px; position:relative; z-index:10; top:0px; transition:0.3s;}
.cardsList li .intro p{text-indent:2em; text-align:justify}

.cardsList li.li-xs{width:433px;padding: 38px 68px;}
.cardsList li.li-xs::after{right:-40px;}


.cardsList li:hover::before,
.cardsList li:hover::after{opacity:0.8}
.cardsList li:hover .bg{opacity:1;}
.cardsList li:hover .title{color:#fff; top:20px;}
.cardsList li:hover .title::after{background-color:#fff;}
.cardsList li:hover .intro{top:10px; color:#fff}

/* 相关技术支撑功能模块 */
#technicalSupport {padding:50px 0 30px;overflow: hidden; background:#F3F9FF; position:relative; z-index:3}
#technicalSupport .row{width:1400px; margin:0 auto;}
.rowTi{position:relative;}
.rowTi::before,
.rowTi::after{content:""; display:block; position:absolute; top:50%; width:0px; height:2px; margin-top:-1px; transition:all 1s; transition-delay: 1.5s;}
.rowTi::before{right:50%; margin-right:230px; background:linear-gradient(to left, #22468C, transparent)}
.rowTi::after{left:50%; margin-left:230px; background:linear-gradient(to right, #22468C, transparent)}
.rowTi h2{color:#22468C;position:relative;overflow:hidden; }
.rowTi h2::before,
.rowTi h2::after{ content:""; display:block; position:absolute; top:50%; transition:all 0.5s; transition-delay: 1s; margin-top:-5px; }
.rowTi h2::before{ right:50%; margin-right:220px; transform:scale(0);  width:10px; height:10px; background:#22468C; border-radius:50%;  }
.rowTi h2::after{ left:50%; margin-left:220px; transform: scale(0); width:10px; height:10px; background:#22468C; border-radius:50%; }
.rowTi.animated:before,
.rowTi.animated:after {width:190px;}
.rowTi h2.animated:before,
.rowTi h2.animated:after { transform:scale(1);}
.techSupportList li a{transition:0.5s;}
.techSupportList li a:hover { background:#5F80C2; color:#fff;}

.lxss a,
.lxss a.sq{background-color:#22468C}
.lxss a:hover{background-color:#2241B1}