@charset "utf-8";

body{font-weight:400; min-width:1440px;}
body .wrap{ margin: 0 auto; }
#header { display: none;}
.siteWidth{max-width:1400px; margin:0 auto;}

/* 头部 */
.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:10px; 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:36px;background-color: #0451C3;border-radius: 18px;line-height: 36px;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;}
.special-header .links a:hover {background:#206dde; }
.special-header  .special-logo{width:709px; height:133px; background:url(../img/special-logo.png) 50% 50% no-repeat; position:absolute; left:50%; margin-left:-355px; top:150px; animation-duration:1s;}
.special-header  .special-header_txt{width:1000px; height:60px; line-height:60px; text-align:center; font-size:30px; font-weight:bold; color:#ffffff; position:absolute; left:50%; margin-left:-500px; top:320px;letter-spacing: 0.5em; cursor:default; user-select: none; animation-delay:1s;}
.special-header  .special-header_txt2{height:74px; line-height:74px; position:absolute; left:50%; margin-left:-255px; width:510px; background:rgba(17,38,186,0.2); top:428px;text-align:center; font-size:18px; color:#fff; cursor:default;user-select: none; animation-delay:2s;}
.special-header  .special-header_txt2::before,
.special-header  .special-header_txt2::after{content:""; display:block; width:20px; height:20px; border:1px solid #fff; position:absolute; }
.special-header  .special-header_txt2::before{left:0px; top:0px; border-bottom:none; border-right:none;}
.special-header  .special-header_txt2::after{right:0px; bottom:0px; border-left:none; border-top:none;}

/* column */
.column{padding-top:70px;}
.column .cHd{height:60px; line-height:60px; }
.column .cHd h2{width:360px; margin:0 auto; font-size:42px; font-weight:bold; color:#111; text-align:center; position:relative;}
.column .cHd h2 .txt{display: block; opacity: 0;}
.column .cHd .sLine{width:34px; height:14px; background:rgba(79,154,253,1); display:block; border-radius:7px; position:absolute; transform:rotate(45deg) scale(0.6) translate(-30px,0); top:50%; margin-top:-7px; opacity:0 ;  }
.column .cHd .sLine-xs{width:20px; background:rgba(79,154,253,0.5);}
.column .cHd .sLine-left{left:0px;}
.column .cHd .sLine-xs.sLine-left{left:35px;}
.column .cHd .sLine-right{right:0px; transform:rotate(-45deg)  scale(0.6) translate(30px,0);}
.column .cHd .sLine-xs.sLine-right{right:35px;}
.column .cHd .sLine-left.animated{animation: sLine-left 0.3s ease-in-out; animation-fill-mode: forwards;}
.column .cHd .sLine-right.animated{animation: sLine-right 0.3s ease-in-out; animation-fill-mode: forwards;}

@keyframes sLine-left{
    from{
        transform:rotate(45deg) scale(0.6) translate(-30px,0); 
        opacity:0;
    } to{
        transform:rotate(45deg) scale(1) translate(0,0);
        opacity:1;
    }
}
@keyframes sLine-right{
    from{
        transform:rotate(-45deg)  scale(0.6) translate(30px,0);
        opacity:0;
    } to{
        transform:rotate(-45deg) scale(1) translate(0,0);
        opacity:1;
    }
}


/* columnA */
#columnA{background:#F1F4F9; overflow:hidden; position:relative;}
#columnA::before{content:""; width:912px; height:912px; background: linear-gradient(to right, rgba(198,221,255,0.15), rgba(198,221,255,0)); position:absolute; right:-390px; top:-174px; border-radius:50%}
#columnA .cHd h2 .txt{animation-delay:3s;}
#columnA .cBd{padding-top:40px;}

/* indBox */
.indBox{box-sizing:border-box; overflow:hidden;}
.indBox .bd{display:flex; width:1400px; margin:0 auto;justify-content: space-between;}
.indBox .bd > .pic{max-width:680px; text-align:left;}
.indBox .bd > .pic img{max-width:100%; height:auto;}
.indBox .bd .con{width:680px; flex-shrink:0; padding-top:63px;}
.indBox .bd .con > .title{ height:74px; line-height:74px; padding-left:28px; font-size:36px; font-weight:bold; color:#0451C3; background:url(../img/box-title.png) 0 50% no-repeat}

/* iconList */
.iconList{padding-top:54px;}
.iconList li{display:flex;align-items:center; margin-bottom:20px; min-height:52px}
.iconList li .icon{width:38px; height:38px; background:#fff; border-radius:50%; margin-right:20px; flex-shrink:0; text-align:center; line-height:38px;  }
.iconList li .icon i{ width:24px; height:24px; display: inline-block; vertical-align: middle; mask-repeat: no-repeat; mask-size: 100%; mask-position: 50% 50%; background-color: currentColor; mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21.75%206.18409C21.75%206.18409%2018.75%207.22045%2015.25%2011.3659C12%2015.1227%2011.25%2016.6773%2010%2018.75C9.875%2018.6205%208%2014.8636%203%2012.1432L5.625%209.55227C5.625%209.55227%208%2011.2364%209.625%2014.3455C9.625%2014.3455%2013.75%207.73864%2021.75%204.5V6.18409Z%22%2F%3E%3C%2Fsvg%3E); color: #007AFF; position:relative}
.iconList li .icon i::after{content:""; display:block; width:100%; height:100%; position:absolute; right:0px; top:0px; background:#ccc; opacity:0;}
.iconList li .txt{font-size:16px; color:#333; line-height:26px; transition:0.5s}
.iconList li:hover .txt{color:#007AFF}
.iconList li:hover .icon i::after{animation:tick 0.5s ease-in-out; animation-fill-mode: forwards;}
.iconList li:last-child{margin-bottom:0px;}

@keyframes tick{
    from{
        width:100%;
        opacity:1;
    } to{
        width:0%;
        opacity:1;
    }
}

/* 功能完备 */
#indBox-gnwb{min-height:618px;}
#indBox-gnwb .bd > .pic{margin-left:-15px;}
#indBox-gnwb .iconList{padding-top:80px;}

/* 易用好用 */
#indBox-yyhy{background:#fff; padding-top:65px; min-height:618px; position:relative;}
#indBox-yyhy::before{content:""; width:912px; height:912px; background: linear-gradient(to right, rgba(198,221,255,0), rgba(198,221,255,0.1)); position:absolute; left:-488px; top:-223px; border-radius:50%}
#indBox-yyhy .iconList li .icon{background-color:#F0F7FF}

/* 灵活百变 */
#indBox-lhbb{padding-top:87px; min-height:642px; background:#F5F8FA}

/* 方便快捷 */
#indBox-fbkj{padding-top:77px; background:#fff url(../img/bg-fbkj.png) 50% 100% no-repeat; min-height:640px;}
#indBox-fbkj .bd .con{width:610px;}
#indBox-fbkj .iconList li .icon{background-color:#F0F7FF}

/* 移动设备适配 */
#indBox-ydsp{padding-top:79px; background:#F4FBFF; min-height:534px;}
#indBox-ydsp .iconList{padding-top:30px;}

/* tabBox */
.tabBox{width:1400px; margin:0 auto;}
.tabBox .hd{height:200px; margin-bottom:20px;}
.tabBox .hd ul{ display:flex; justify-content: space-between;}
.tabBox .hd ul li{width:250px; height:180px; background:#ffffff; border-radius:10px; box-shadow:0 3px 8px rgba(0,0,0,0.15); box-sizing:border-box; padding-top:30px; text-align:center; font-size:22px; font-weight:bold; color:#333333; line-height:36px; cursor:pointer; transition:0.5s; position:relative; }
.tabBox .hd ul li::after{content:""; width:0px; height:0px; border:13px solid transparent; border-bottom:0px; position:absolute; top:100%; border-top:0px solid #fff; left:50%; margin-left:-13px;transition:0.5s;}
.tabBox .hd ul li i{display:block; width:80px; height:80px; margin:0 auto 0px;; background:url(../img/icon-bdgl.png) 50% 50% no-repeat; transition:0.5s;}
.tabBox .hd ul li.on{background-color:#0972E7; color:#fff;}
.tabBox .hd ul li.on::after{border-top:13px solid #0972E7;}
.tabBox .hd ul li.on i{background-image:url(../img/icon-bdgl-on.png)}
.tabBox .hd ul li.li1 i{background-image:url(../img/icon-bdgl.png);}
.tabBox .hd ul li.li2 i{background-image:url(../img/icon-bdsj.png);}
.tabBox .hd ul li.li3 i{background-image:url(../img/icon-txbd.png);}
.tabBox .hd ul li.li4 i{background-image:url(../img/icon-bdsjgl.png);}
.tabBox .hd ul li.li5 i{background-image:url(../img/icon-zxbdqjpz.png);}
.tabBox .hd ul li.li1.on i{background-image:url(../img/icon-bdgl-on.png);}
.tabBox .hd ul li.li2.on i{background-image:url(../img/icon-bdsj-on.png);}
.tabBox .hd ul li.li3.on i{background-image:url(../img/icon-txbd-on.png);}
.tabBox .hd ul li.li4.on i{background-image:url(../img/icon-bdsjgl-on.png);}
.tabBox .hd ul li.li5.on i{background-image:url(../img/icon-zxbdqjpz-on.png);}
.tabBox .tabHingeBg{background:#fff; padding: 20px 40px 40px; box-sizing:border-box; border-radius:10px; position:relative; z-index:0; box-shadow:0 0 20px rgba(0,0,0,0.08)}
.tabBox .tabHinge{position:absolute; width:5px; height:12px; background:#83A0DE; border-radius:0 5px 0 0; overflow:visible; z-index:10; top:-12px; }
.tabBox .tabHinge::before{content:""; display:block; width:6px; height:34px; border-radius:3px; background:#2659C5; position:absolute; top:0px; right:2px; z-index:2;}
.tabBox .tabHinge::after{content:"";display:block;width:10px;height:10px;box-sizing: content-box;background:#9FC9FF;border:5px solid #D6EAF2;border-radius:50%;position:absolute;top: 22px;left: -10px;z-index:1;}
.tabBox .tabHinge-left{left:60px;}
.tabBox .tabHinge-right{right:60px;}

/* 功能清单 */
#columnB{background:#F9F9F9; overflow:hidden; position:relative;}
#columnB .cBd{padding-top:80px; padding-bottom:90px;}
#tabBox-gnqd .iconList li{min-height:38px; margin-bottom:12px; }
#tabBox-gnqd .iconList li .txt{font-size:18px;letter-spacing:0.1em}
#tabBox-gnqd .iconList li .icon{background-color:rgba(0,0,0,0.02); width:30px; height:30px; line-height:30px; }
#tabBox-gnqd .iconList li .icon i{width:16px; height:16px; color:#34C759}
#tabBox-gnqd .tCon{min-height:560px;}
#tabBox-gnqd .tCon1{background:url(../img/pic-bdgl.png) 100% 40px no-repeat;padding-right: 120px;}
#tabBox-gnqd .tCon2{background:url(../img/pic-bdsj.png) 100% 60px no-repeat;padding-right: 330px;}
#tabBox-gnqd .tCon3{background: url(../img/pic-txbd.png) 100% 60px no-repeat;padding-right: 290px;}
#tabBox-gnqd .tCon4{background:url(../img/pic-bdsjgl.png) 100% 60px no-repeat;padding-right: 270px;}
#tabBox-gnqd .tCon5{background:url(../img/pic-zxbdqjpz.png) 100% 60px no-repeat;padding-right: 290px;}

/* 相关技术支撑功能模块 */
#technicalSupport {padding:50px 0 30px;overflow: hidden; background:#F8F9FF}
#technicalSupport .row{width:1400px; margin:0 auto;}
.rowTi h2:before { display:inline-block; content:""; width:1px; height:1px; background:#333; margin-right:20px; vertical-align:middle; transition:all 0.5s; transition-delay:1s;}
.rowTi h2:after { display:inline-block; content:""; width:1px; height:1px; background:#333; margin-left:20px; vertical-align:middle; transition:all 0.5s; transition-delay:1s;}
.rowTi h2.animated:before { width:100px;}
.rowTi h2.animated:after { width:100px;}