@charset "utf-8";

/* frame */
a { transition:all 0.5s;}
body{min-width: 1400px;font-weight:400;background: transparent;}
.clear{clear: both;}
#content{zoom: 1;width: 100%;}
.row{width: 1400px; margin: auto; position: relative;}
.row:after { content:""; clear:both; display:block; overflow:hidden;}

.rowTi h2 { color:#1B215E; }
.rowTi h2:before {content:"";width:0px;height:35px;background:url(../img/rowtileftarr.png) no-repeat left;display:inline-block;margin-right:20px;vertical-align: top;transition:all 2s;transition-delay:.5s;opacity:0}
.rowTi h2:after {content:"";width:0px;height:35px;background:url(../img/rowtirightarr.png) no-repeat right;display:inline-block;margin-left:20px;vertical-align: top;transition:all 2s;transition-delay:.5s;opacity:0}
.rowTi h2.animated:before {width: 133px;opacity:1}
.rowTi h2.animated:after { width:133px; opacity:1}


@keyframes bgzoom {100%{ background-size:100%} 50%{background-size:120%} 0%{ background-size:100%} }

#header { display: none;}
#headerOS{position:relative;width:100%;height: 760px;background: #312f7a url(../img/bg.jpg) repeat-x center;height:683px;animation: bgzoom 20s infinite linear;}
#headerOS .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerOS .logo img { height:100%; width:auto;}
#headerOS .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerOS .links a { height:36px;background-color: rgb(0 0 0 / 34%);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 / 10%); margin-left:10px;}
#headerOS .links a:hover {background: #ccc; color: #22468c}

#headerOS .osfont { position:absolute; top:282px;font-size:18px; color:#fff; line-height:52px; font-weight:400; text-shadow:0 4px 4px rgb(0 0 0 / 25%); text-align:center; width:100%;letter-spacing:1.5em; transition:all 2s; opacity:0; filter:blur(100px)}
#headerOS .osfont h1 {font-size: 92px;font-weight:bold; line-height:120px; letter-spacing:1em; transition:all 4s; opacity:0;}
#headerOS .osfont.animated { letter-spacing:0; opacity:1; filter:blur(0)}
#headerOS .osfont.animated h1 { letter-spacing:0; opacity:1;} 

#overallSituation {background: #F5FAFF;padding: 0 0 50px;}

.productAbout {line-height:48px;font-size:20px;padding: 58px 0 80px;text-align:center;}
.productAbout a { color:#1E5BB3; text-decoration:underline; }

#funList { padding:80px 0}
.osBox { }
.osBox dl {padding: 21px 0px 21px 38px;background: linear-gradient(180.28deg, #FCFEFF 2.85%, #D6E3FF 99.72%);border: 1px solid rgb(183 203 248 / 50%);border-radius: 20px;margin-bottom: 30px;display: flex;align-items: center;}
.osBox dt { float:left; background: linear-gradient(180deg, #B6CCFF 0%, #5B86DF 100%); width:80px; height:80px; border-radius:50%;}
.osBox dt:before { content:""; width:80px; height:80px; margin:0 auto; display:block; background:url(../img/orgicon1.png) no-repeat center; }
.osBox ul {clear: both; margin-left:-10px;}
.osBox li {padding: 5px 0 5px 40px;font-size:18px;line-height: 30px;transition:all 1s;overflow:hidden;position: relative;}
.osBox li:hover { background:#fff; color:#35a507 }
.osBox p {overflow:hidden;line-height: 32px;font-size:16px;color:#444;padding: 8px 39px;text-indent: 2em;}

.osBox .dl2 dt:before { background-image:url(../img/orgicon2.png); }
.osBox .dl3 dt:before { background-image:url(../img/orgicon3.png); }
.osBox .dl4 dt:before { background-image:url(../img/orgicon4.png); }

#depManage { padding:80px 0;}

.focusPic {position:relative;float:left;background:#f7f9fc;width:547px;padding:9px;border:1px solid #dee8f2;border-radius:10px;margin-right: 24px;}
.focusPic .hd { position:absolute; bottom:28px; left:50%; margin-left:-28px;}
.focusPic .hd li { float:left; width:12px; height:12px; background:#feeeee; border-radius:50%; margin:0 5px;}
.focusPic .hd li.on { background:#FF3B30}
.focusPic .bd { line-height:0;}

.funList {overflow:hidden;padding-left: 10px;}
.funList ul {clear: both; margin-left:-10px;}
.funList li {padding: 8px 0 8px 40px;font-size:16px;line-height: 32px;transition:all 1s;overflow:hidden;position: relative;}
.funList li:hover {background:#fff;color: #FF3B30;}
.funList p { line-height:30px; font-size:16px; color:#666; background:#fff; padding:13px 20px; margin:6px 0;}

.funList dl.animated { transform:translateX(0)translateY(0);opacity:1; }

.funList li svg{float:left;width: 40px;height: 40px;transform:scale(.4);position: absolute;left: 0;top: 4px;}
@keyframes suc{100%{transform: scale(.4);} 20%{transform: scale(0.9);} 0%{transform: scale(0.8);}}
.funList li:hover svg{animation: suc 0.5s ease-in-out; animation-delay: 1.6s; animation-fill-mode: forwards; transform:scale(0.8);}
.circle{stroke-dasharray: 0; stroke-dashoffset: 0; stroke: #7C9CEF;}
@keyframes circle{from{stroke-dasharray: 119; stroke-dashoffset: 119;} to{stroke-dasharray: 119; stroke-dashoffset: 238;}}
.funList li:hover svg .circle{animation: circle 1s ease-in-out; animation-delay: .8s; animation-fill-mode: forwards;stroke-dasharray: 119; stroke-dashoffset: 119; stroke: #FF3B30;}
.tick{stroke-dasharray: 0; stroke-dashoffset: 0; stroke: #7C9CEF;}
@keyframes tick{from{stroke-dashoffset: 60;} to{stroke-dashoffset: 0;}}
.funList li:hover svg .tick{animation: tick 1.2s ease-in-out; animation-fill-mode: forwards; stroke-dasharray: 60; stroke-dashoffset: 60; stroke: #FF3B30;}

#extendedFields { padding:80px 0 ; background:#f5faff; text-align:center;}
#extendedFields .intro {  font-size:16px; color:#333; margin-bottom:35px;}


#technicalSupport {background: transparent;padding-bottom: 0;}

.techSupportList li a { box-shadow:0 0 0; border:1px solid #ededed; z-index:9; position:relative; background-color:transparent!important;}
.techSupportList li { position:relative; }
.techSupportList li:before { content:""; width:100%; height:100%; position:absolute; background: linear-gradient(85.42deg, #CCDBFF -4.15%, #5F81EF 95.78%); border-radius:10px; opacity:0; transition:all 0.5s } 
.techSupportList li:hover::before { opacity:1}


.lxss a{background-color: transparent!important; position:relative;}
.lxss a span { position:relative; z-index:1; background: url(../../products/img/lx-icon.png) 36px 50% no-repeat; display:block;}
.lxss a.sq span { position:relative; z-index:1; background: url(../../products/img/tymk-icon.png) 25px 50% no-repeat; display:block; background-size: 14%;}
.lxss a:after { position:absolute; top:0; z-index:0; content:""; display:block; width:100%; height:100%;background: linear-gradient(85.42deg, #CCDBFF -4.15%, #5F81EF 95.78%); border-radius:30px;}

@media only screen and (max-width: 1400px){}