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

/* 头部 */
.special-header{height: 720px; background:#2E58C3 radial-gradient(58.2% 90.2% at 59.74% 63.8%, #5086FB 0%, #2E58C4 100%); position:relative; z-index:1; max-width:1920px; margin:0 auto; overflow:hidden;}
.special-header .siteWidth{ height: 720px; position:relative; z-index:5}
.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:36px; border-radius: 18px;line-height: 36px; text-align: center; background-color:#4B7FF2; 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:#2E58C4; }
.special-header .special-h1{font-size:70px;font-weight:bold;color:#fff;position:absolute;left:10px;top: 269px;letter-spacing: 0.1em;}
.special-header .special-h2{font-size:18px;color:#fff;line-height:34px;position:absolute;left:10px;top: 377px;}
.special-header .banner_mask{width:100%;height:163px;position:absolute;bottom: -2px;left:0px;mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%226456%22%20height%3D%22163%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6284.98%2096.29C6342.14%2097.8761%206398.98%2095.1841%206456%2091.7505V162.91H0V91.7562C191.396%2080.2405%20377.64%2028.4151%20570.553%2029.6037C813.148%2031.0974%201038.18%20151.728%201280.28%20143.61C1632.09%20144.524%201967.15%20-1.54424%202319.45%200.13329C2601.82%201.47745%202873.99%20103.47%203155.68%2095.89C3368.29%2085.3472%203576.73%2030.2202%203790.03%2029.61C4034.56%2028.428%204261.32%20150.555%204503.64%20143.64C4843.17%20143.64%205165.76%201.65958%205505.37%200C5770.72%200%206021.78%2085.6439%206284.98%2096.29Z%22%2F%3E%3C%2Fsvg%3E);mask-repeat: repeat;mask-size: auto 100%;mask-position: 0px bottom;background-color:#fff;animation: 45s linear infinite mask_roll;z-index:4;}
.special-header .banner_elements{width:100%; position:absolute; left:0px; top:0px; bottom:0px; right:0px; z-index:3; }
.special-header .banner_elements .oldster{width:458px;height:510px;background:url(../img/oldster.png) 0 0 no-repeat;position:absolute;bottom:0px;left:50%;transform: translateX(212px); z-index:5}
.special-header .banner_elements .cloud_left{position:absolute; width:585px; height:296px; background:url(../img/cloud-left.png) 0px 0px no-repeat; bottom:0px; left:0px; z-index:4; }
.special-header .banner_elements .cloud_right{position:absolute; width:439px; height:315px; background:url(../img/cloud-right.png) 0px 0px no-repeat; bottom:0px; right:0px; z-index:4;}
.special-header .banner_elements .moon{width:664px;overflow:hidden;position:absolute;top:0;bottom:0px;left:50%; transform: translateX(139px); mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 80%); mask-repeat: no-repeat; mask-size: 100%; mask-position: 0% 0%;}
.special-header .banner_elements .moon::before{content:"";display:block;width:664px;height:664px;position:absolute;left:0px;bottom: -85px;background:#fff;border-radius:50%; animation: 3s linear moon; animation-fill-mode: forwards;}

@keyframes mask_roll {
    0% {
        mask-position: 0 bottom;
    }
    100% {
        mask-position: -6456px bottom;
    }
}

@keyframes moon{
    0%{
        bottom:-800px;
    }
    100%{
        bottom:-85px;
    }
}

/* iconList */
.iconList{padding-top:0px;}
.iconList li{display:flex;align-items:self-start; margin-bottom:15px; }
.iconList li .icon{width:20px; height:20px; background:#F0F7FF; border-radius:50%; margin-right:10px; flex-shrink:0; text-align:center; line-height:20px; margin-top:5px; }
.iconList li .icon i{ width:16px; height:16px; 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:2; 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;
    }
}

/* column */
.column{padding:50px 0; position:relative; z-index:2}
.column .cHd{height:auto; line-height:60px; margin-bottom:30px; }
.column .cHd h3{display:block; margin:0px; padding:20px 0 0 34px; height:60px; line-height:60px; font-size:40px; font-weight:bold; color:#4B7FF2; box-sizing:content-box; position:relative;}
.column .cHd h3::before{content:""; display:block; width:2px; height:66px; position:absolute; left:13px; top:0px; background:rgba(75,127,242,0.2);}
.column .cHd h3::after{content:""; display:block; width:50px; height:2px; position:absolute; left:0px; top:14px; background:rgba(75,127,242,0.2);}

.tabBox .hd{height:60px; }
.tabBox .hd ul{display:flex; justify-content:center;}
.tabBox .hd ul li{width:278px; height:60px; line-height:58px; box-sizing:border-box; background:#fff; border:1px solid #A6C2FF; border-radius:5px; text-align:center; font-size:20px; font-weight:bold; color:#0088EA; cursor:pointer; margin:0 28px; overflow:hidden}
.tabBox .hd ul li.on{background:linear-gradient(to right, #0070FF, #3590E0); color:#fff; border-color:transparent;}

/* 符合标准 */
#columnA{padding-top:0}
#columnA .intro{ overflow:hidden; padding:40px; background:linear-gradient(to bottom, #B9D6FF, transparent) 50% 50% no-repeat; position: relative; border-radius:10px; box-shadow: 0 -5px 10px rgba(0,27,89,0.08);}
#columnA .intro::before{content:""; display:block; position:absolute; top:1px; left:1px; right:1px; bottom:0px; background:linear-gradient(to top, #ffffff00 0%, #ffffff 22%,#F5FAFF 100%); border-radius:10px; z-index:0; }
#columnA .intro p{position:relative; z-index:1; font-size:16px; line-height:2; text-indent:2em}
.indBoxA .hd{margin-bottom:36px;}
.indBoxA .hd h3{ height:40px; line-height:40px; font-size:32px; font-weight:bold; text-align:center; background:linear-gradient(to bottom, #0070FF, #6AB9FF); background-clip: text; color: transparent; margin-bottom:15px;}
.indBoxA .hd .ind-stars{display:flex; justify-content:center;  filter:drop-shadow(0 0 4px rgba(0,0,0,0.25));}
.indBoxA .hd .ind-star{ width:32px; height:32px; color: #FF0303; mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: 100%; background-color: currentColor; mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2231%22%20height%3D%2231%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.2985%200.950439L18.9702%2011.497L30.5965%2011.58L21.6132%2018.6936L25.1475%2030.0496L15.2985%2023.2829L5.44945%2030.0496L8.75523%2018.5424L0%2011.58L11.6266%2011.497L15.2985%200.950439Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); margin:0 10px;}
.bzPicList{display:flex; justify-content:space-between}
.bzPicList li{width:236px; padding:8px; box-sizing:border-box; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 149, 255, 0.1) 28%, rgba(255, 255, 255, 0) 100%); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.1)}

/* 功能完备 */
#columnB{min-height:880px; background:#F9FCFF; position:relative; }
#columnB .columnBg{ position:absolute; left:0px; right:0px; bottom:0px; top:20%; background:linear-gradient(to right,#A8CDFF 0%,#BEF6FF 40% , #F0F6FF 100%  ); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 76.13%, #000000 100%); opacity:0.5; z-index:0; }
#columnB .tabBox{position:relative; z-index:2}
#columnB .tabBox .tCon{padding-top:20px;}
#columnB .tabBox .pic{text-align:center; margin-bottom:30px;}
#columnB .tabBox .intro{ overflow:hidden; padding:40px; background:linear-gradient(to bottom, #B9D6FF, transparent) 50% 50% no-repeat; position: relative; border-radius:10px; box-shadow: 0 -5px 10px rgba(0,27,89,0.08); width:1080px; margin:0 auto; box-sizing:border-box;}
#columnB .tabBox .intro::before{content:""; display:block; position:absolute; top:1px; left:1px; right:1px; bottom:0px; background:linear-gradient(to top, #FFFFFF00 0%, #FFFFFF 22%,#F5FAFF 100%); border-radius:10px; z-index:0; }
#columnB .tabBox .intro p{position:relative; z-index:1; font-size:16px; line-height:2; text-indent:2em}
#columnB .tabBox .prev,
#columnB .tabBox .next{width:67px; height:67px; position:absolute;  top:240px; z-index:5; cursor:pointer; overflow:hidden}
#columnB .tabBox .prev::after,
#columnB .tabBox .next::after{content:""; display:block; width:30px; height:30px; box-sizing: border-box; border:4px solid #A6C2FF; transform:rotate(45deg); position:absolute; left:50%; top:50%; margin-left:-8px; margin-top:-15px; }
#columnB .tabBox .prev{left:50px; }
#columnB .tabBox .prev::after{border-top:none; border-right:none;}
#columnB .tabBox .next{right:50px;}
#columnB .tabBox .next::after{border-bottom:none; border-left:none; margin-left:-23px;}

/* 移动适配 */
#columnC{min-height:654px; background:#F7FAFF; position:relative; }
#columnC .cBd{display:flex; align-items:flex-start}
#columnC .cBd .pic{margin-right:120px; flex-shrink:0; width:609px;}
#columnC .cBd .pic img{max-width:100%; height:auto; }
#columnC .cBd .intro{ overflow:hidden; padding:40px; background:linear-gradient(to bottom, #B9D6FF, transparent) 50% 50% no-repeat; position: relative; border-radius:10px; box-shadow: 0 -5px 10px rgba(0,27,89,0.08); width:1080px; margin:0 auto; box-sizing:border-box; min-height:220px; top:50px; }
#columnC .cBd .intro::before{content:""; display:block; position:absolute; top:1px; left:1px; right:1px; bottom:0px; background:linear-gradient(to top, #FFFFFF00 0%, #FFFFFF 22%,#F5FAFF 100%); border-radius:10px; z-index:0; }
#columnC .cBd .intro p{position:relative; z-index:1; font-size:16px; line-height:2; text-indent:2em}

/* 功能清单banner */
.columnBanner{height:250px; min-width:1400px; background:url(../img/column-banner.jpg) 50% 50% no-repeat #2D58C3; background-size:cover; display:flex; align-items:center; justify-content:center}
.columnBanner .icon{width:118px; height:95px; background:url(../img/icon-gnqd.png) 0 0 no-repeat; margin-right:20px;}
.columnBanner .title{height:80px; line-height:80px; font-size:50px; font-weight:bold; color:#fff; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);}

/* indBoxB */
.indBoxB{ overflow:hidden; padding:40px 30px; background:linear-gradient(to bottom, #B9D6FF, transparent) 50% 50% no-repeat; position: relative; border-radius:10px; box-shadow: 0 -5px 10px rgba(0,27,89,0.08);  margin:0 auto; box-sizing:border-box; margin-bottom:30px; }
.indBoxB::before{content:""; display:block; position:absolute; top:1px; left:1px; right:1px; bottom:0px; background:linear-gradient(to top, #FFFFFF00 0%, #FFFFFF 22%,#F5FAFF 100%); border-radius:10px; z-index:0; }
.indBoxB .hd{position:relative; z-index:2; display:flex; height:36px; align-items:center; margin-bottom:30px;}
.indBoxB .hd .icon{display:block; width:24px; height:24px; margin-right:10px; filter:drop-shadow(2px 2px 0px #C9E1FF);}
.indBoxB .hd .icon svg{width:24px; height:24px; text-align:center; fill: #268AFF; }
.indBoxB .hd h3{font-size:24px; color:#268AFF; font-weight:bold; line-height:1.2; }
.indBoxB .bd{position:relative; z-index:2}

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

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

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