@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-upload{width:100%; min-width:1400px; overflow:hidden}

/* 头部 */
.special-header{height: 726px; background:url(../img/banner.jpg) 50% 50% no-repeat #2D54D0; background-size:cover; position:relative; z-index:1; max-width:1920px; margin:0 auto;}
.special-header .siteWidth{ height: 726px; 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; border-radius: 18px;line-height: 34px; border:1px solid #fff; text-align: center; background-color:#284CBF; color: #fff;font-size: 16px; float:left; padding:0 1.5em; box-shadow: 0 2px 4px rgb(0 0 0 / 15%); margin-left:10px; box-sizing:content-box; }
.special-header .links a:hover {background-color:#ffffff; color:#284CBF; }
.special-header  .special-h1{position:absolute; top:224px; left:0px; right:0; font-size:92px; font-weight:bold; color:#fff; height:120px; line-height:120px; text-align:center; opacity: 0;}
.special-header  .special-h2{position:absolute; top:363px; left:0px; right:0; font-size:18px; font-weight:normal; color:#fff; height:72px; line-height:36px; text-align: center; user-select: none; opacity: 0; }
.special-header  .special-h1.animated,
.special-header  .special-h2.animated{opacity: 1;}

/* 介绍 */
.special-intro{width:1400px; margin:-50px auto 0px; padding:30px 20px; box-sizing:border-box; position:relative; z-index:2;  overflow:visible; display:flex; align-items:center; justify-content:space-between;  animation-delay:1.2s; }
.special-intro::after{content:""; display:block; left:-100px; right:-100px; top:0px; bottom:0px; background:#fff; position:absolute; z-index:1; border-radius:12px; }
.special-intro .con{font-size:22px; line-height:48px; width:744px; text-indent:2em; position:relative; z-index:3;}
.special-intro .pic{width:560px; height:auto; flex-shrink:0; position:relative; z-index:3;}

/* column */
.column{padding:50px 0; position:relative; z-index:2}
.column .siteWidth{width:1400px; margin:0 auto; overflow:visible;}
.column .cHd{width:1400px; margin:0 auto; text-align:center; margin-bottom:50px; display:flex; justify-content:space-between; align-items:center}
.column .cHd .h-line{flex-grow:1; position:relative; display:flex; align-items:center;}
.column .cHd .h-line .line-1{width:6px; height:40px; background:#284CBF; border-radius:3px; order:1; transform:scaleY(0); transition:0.3s; transition-delay:0.3s;}
.column .cHd .h-line .line-2{width:6px; height:30px; background:#FFC400; border-radius:3px; order:2; transform:scaleY(0); transition:0.3s; transition-delay:0.6s;}
.column .cHd .h-line .line-3{width:6px; height:20px; background:#284CBF; border-radius:3px; order:3; transform:scaleY(0); transition:0.3s; transition-delay:0.9s;}
.column .cHd .h-line .line-4{height:1px; background:#dddddd; flex-grow:1; order:4; transform:scaleX(0); transition:0.5s; transition-delay:1.2s; transform-origin:100% 50% }
.column .cHd .h-line_left{flex-direction:row-reverse}
.column .cHd .h-line_left .line-1,
.column .cHd .h-line_left .line-2{margin-left:10px;}
.column .cHd .h-line_left .line-3{margin-left:20px;}
.column .cHd .h-line_right{flex-direction:row}
.column .cHd .h-line_right .line-1,
.column .cHd .h-line_right .line-2{margin-right:10px;}
.column .cHd .h-line_right .line-3{margin-right:20px;}
.column .cHd .h-line_right .line-4{transform-origin:0% 50%}
.column .cHd h3{height:60px; line-height:60px; font-size:40px; font-weight:bold; color:#284CBF; margin:0 30px; flex-shrink:0; opacity:0; transition:0.3s; }
.column .cBd{width:1400px; margin:0 auto; }
.column .cBd .intro{font-size:16px; color:#333333; line-height:32px;}
.column .cBd .intro p{text-indent:2em;}

.column .cHd.animated h3{opacity:1}
.column .cHd.animated .line-1,
.column .cHd.animated .line-2,
.column .cHd.animated .line-3{transform:scaleY(1)}
.column .cHd.animated .line-4{transform:scaleX(1)}

.column_grid .siteWidth{ display:grid; grid-template-rows: auto 1fr; grid-gap: 50px 70px;}
.column_grid .cPic{width:542px;grid-area: cPic;}
.column_grid .cHd{width:100%;grid-area: cHd; margin:0px;}
.column_grid .cBd{width:100%;grid-area: cBd;}

.column_grid_left .siteWidth{ display:grid; grid-template-columns: 1fr auto; grid-gap: 50px 70px; grid-template-areas: "cHd cPic" "cBd cPic"}
.column_grid_left .cHd h3{margin-left:0px;}
.column_grid_right .siteWidth{ display:grid; grid-template-columns:auto 1fr; grid-gap: 50px 70px; grid-template-areas: "cPic cHd" "cPic cBd"}
.column_grid_right .cHd h3{margin-right:0px;}

/* iconList */
.iconList li{display:block;  margin:0px;  padding:50px 0px; position:relative;}
.iconList li::after{content:""; display:block; height:1px; width:0%; position:absolute; bottom:0px; right:0px; background:#DDDDDD;}
.iconList li:last-child{border-bottom:none}
.iconList li:last-child::after{display:none}
.iconList li .bg{display:flex; justify-content: space-between;align-items:flex-start;}
.iconList li .icon{width:100px; height:100px; background-color:#F0F5FB; background-position:50% 50%; background-repeat: no-repeat; border-radius:50%; flex-shrink:0; margin-right:25px; transform:translate(0px,0px); transition:0.5s;}
.iconList li .icon svg{width:100px; height:100px; }
/*
.iconList li .icon svg{width:100px; height:100px; stroke-width:2; fill:none; }
.iconList li .icon svg .path-1{stroke:#FFCC00; }
.iconList li .icon svg .path-2{stroke:#284CBF}
*/
.iconList li .con{width:1px; flex-grow:1; transition:0.5s; transform:translate(0px,0px);}
.iconList li .con .title{height:44px; line-height:44px; font-size:24px; font-weight:bold; color:#333333; margin-bottom:20px;  transition:0.5s;}
.iconList li .con .intro{ color:#888888; min-height:64px;}
.iconList li .con .intro p{ margin-top:16px;}
.iconList li .con .intro p:first-child{margin-top:0px;}

.iconList li:hover .icon,
.iconList li:hover .con{ transform: translate(0px,-10px);}
.iconList li:hover .con .title{color:#284CBF}

.iconList li.animated::after{animation: iconListLine 0.5s ease-in-out; animation-fill-mode: forwards;  animation-delay:0.7s;}

@keyframes iconListLine{
    0%{
        width:0;
    }
    100%{
        width:100%;
    }
}

/* indBox */
.indBox{box-shadow:0 0 6px rgba(0,0,0,0.05); margin-bottom:40px; }
.indBox .hd{height:68px; line-height:68px; background: linear-gradient(to right, #49A3FB ,#1075FA); border-radius:6px 6px 0px 0px;  }
.indBox .hd h3{font-size:24px; text-align:center; font-weight:bold; display:block; margin:0px; padding:0px; color:#fff; }
.indBox .bd{background:#fff; padding:25px; border-radius:0px 0px 6px 6px;}

/* 文件上传 */
#columnA .cBd{position:relative; display:flex;}
#columnA .cBd .c-line{width:9px; left:50%; margin-left:-5px; top:0px; position:absolute; bottom:0px; z-index:0}
#columnA .cBd .c-line::before{content:""; display:block; width:9px; height:9px; background:#284CBF; border-radius:5px; position:relative; z-index:2; transform:scale(0);;}
#columnA .cBd .c-line::after{content:""; display:block; width:1px; position:absolute; left:4px; top:4px; bottom:0px; background:#DDDDDD; transform:scaleY(0);transform-origin:50% 0%;  }
#columnA .cBd .iconList{width:50%; box-sizing:border-box; overflow:hidden; flex-shrink:0;}
#columnA .cBd .iconList_left li{padding-right:40px; overflow:hidden}
#columnA .cBd .iconList_right li{padding-left:40px;overflow:hidden}
#columnA .cBd .iconList_right li::after{left:0px; right:auto;}
#columnA .cBd .iconList_left li:nth-child(1) .icon{background-image:url(../img/icon-01.png);}
#columnA .cBd .iconList_left li:nth-child(2) .icon{background-image:url(../img/icon-02.png);}
#columnA .cBd .iconList_left li:nth-child(3) .icon{background-image:url(../img/icon-03.png);}
#columnA .cBd .iconList_left li:nth-child(4) .icon{background-image:url(../img/icon-04.png);}
#columnA .cBd .iconList_left li:nth-child(5) .icon{background-image:url(../img/icon-05.png);}
#columnA .cBd .iconList_right li:nth-child(1) .icon{background-image:url(../img/icon-06.png);}
#columnA .cBd .iconList_right li:nth-child(2) .icon{background-image:url(../img/icon-07.png);}
#columnA .cBd .iconList_right li:nth-child(3) .icon{background-image:url(../img/icon-08.png);}
#columnA .cBd .iconList_right li:nth-child(4) .icon{background-image:url(../img/icon-09.png);}
#columnA .cBd .iconList_right li:nth-child(5) .icon{background-image:url(../img/icon-10.png);}

#columnA .cBd .c-line.animated::before{animation: cLineScale 0.3s ease-in-out; animation-fill-mode: forwards; animation-delay:0.2s;}
#columnA .cBd .c-line.animated::after{animation: cLineScaleY 0.8s ease-in-out; animation-fill-mode: forwards; animation-delay:0.5s;}

@keyframes cLineScale{
    0% {
        transform:scale(0);
    }
    100% {
        transform:scale(1);
    }
}
@keyframes cLineScaleY{
    0% {
        transform:scaleY(0);
    }
    100% {
        transform:scaleY(1);
    }
}

/* 上传文件管理 */
#columnB{background:#F4F8FF}
#columnB .cBd{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
#columnB .indBox{width:426px;}
#columnB .indBox .bd{height: 362px; position:relative; z-index:1}
#columnB .indBox .bd .con{font-size:16px; line-height:32px;  }
#columnB .indBox .bd .con p{margin:0px; padding:0px; text-indent:2em;}
#columnB .indBox_w{width:670px;}
#columnB .indBox_w .bd{height: 182px;}

#columnB .indBox_more{position:relative; z-index:1}
#columnB .indBox_more .hd{position:relative; z-index:6}
#columnB .indBox_more .bd{z-index:5}
#columnB .indBox_more .con{position:absolute; left:0px; right:0px; top:0px; padding:25px 25px 0px; background:#fff;  border-radius:0 0 6px 6px; box-sizing:border-box; height:313px; overflow:hidden; display: -webkit-box; line-clamp: 9; -webkit-line-clamp: 9; -webkit-box-orient: vertical; text-overflow: ellipsis; z-index:5; transition:0.5s;}
#columnB .indBox_more .con p{display:block;}
#columnB .indBox_more .moreBtn{width:168px; height:42px; box-sizing:border-box; line-height:40px; background:#fff; border:1px solid #DDDDDD; border-radius:12px; font-size:16px; color:#999999; text-align:center; position:absolute; bottom:36px; left:50%; margin-left:-84px; z-index:1;}
#columnB .indBox_more:hover{box-shadow:none;}
#columnB .indBox_more:hover .con{box-shadow:0 0px 6px rgba(0,0,0,0.5); height:500px; line-clamp: 999; -webkit-line-clamp: 999; display:block;}
#columnB #indBox-5 :hover .con{height:600px;}

/* columnD */
#columnD{background:#F4F8FF}

/* 相关技术支撑功能模块 */
#technicalSupport {padding:50px 0 30px;overflow: hidden; background:#F4F8FF; position:relative; z-index:3}
#technicalSupport .row{width:1400px; margin:0 auto;}
/*
.rowTi{position:relative;}
.rowTi h2{color:#2D54D0;position:relative;overflow:hidden; }
*/

#technicalSupport .rowTi{width:1400px; margin:0 auto; text-align:center; margin-bottom:50px; display:flex; justify-content:space-between; align-items:center; height:60px; line-height:60px;}
#technicalSupport .rowTi .h-line{flex-grow:1; position:relative; display:flex; align-items:center;}
#technicalSupport .rowTi .h-line .line-1{width:6px; height:40px; background:#284CBF; border-radius:3px; order:1; transform:scaleY(0); transition:0.3s; transition-delay:0.3s;}
#technicalSupport .rowTi .h-line .line-2{width:6px; height:30px; background:#FFC400; border-radius:3px; order:2; transform:scaleY(0); transition:0.3s; transition-delay:0.6s;}
#technicalSupport .rowTi .h-line .line-3{width:6px; height:20px; background:#284CBF; border-radius:3px; order:3; transform:scaleY(0); transition:0.3s; transition-delay:0.9s;}
#technicalSupport .rowTi .h-line .line-4{height:1px; background:#dddddd; flex-grow:1; order:4; transform:scaleX(0); transition:0.5s; transition-delay:1.2s; transform-origin:100% 50% }
#technicalSupport .rowTi .h-line_left{flex-direction:row-reverse}
#technicalSupport .rowTi .h-line_left .line-1,
#technicalSupport .rowTi .h-line_left .line-2{margin-left:10px;}
#technicalSupport .rowTi .h-line_left .line-3{margin-left:20px;}
#technicalSupport .rowTi .h-line_right{flex-direction:row}
#technicalSupport .rowTi .h-line_right .line-1,
#technicalSupport .rowTi .h-line_right .line-2{margin-right:10px;}
#technicalSupport .rowTi .h-line_right .line-3{margin-right:20px;}
#technicalSupport .rowTi .h-line_right .line-4{transform-origin:0% 50%}
#technicalSupport .rowTi h2{height:60px; line-height:60px; font-size:40px; font-weight:bold; color:#284CBF; margin:0 30px; flex-shrink:0; opacity:0; transition:0.3s; transform:translateY(0)}

#technicalSupport .rowTi.animated h2{opacity:1}
#technicalSupport .rowTi.animated .line-1,
#technicalSupport .rowTi.animated .line-2,
#technicalSupport .rowTi.animated .line-3{transform:scaleY(1)}
#technicalSupport .rowTi.animated .line-4{transform:scaleX(1)}


.techSupportList li a{transition:0.5s;}
.techSupportList li a:hover { background:#4F76F0; color:#fff;}

.lxss a,
.lxss a.sq{background-color:#2D54D0}
.lxss a:hover{background-color:#2241B1}