@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:#1E5BB3; }


@keyframes msgtrans {100%{transform: translateX (-10px);} 50%{transform: translateX(10px);} 0%{ translateX(-10px);} }

#header { display: none;}
#headerWB{position:relative;width:100%;height: 760px;background: #C53D35; background:linear-gradient(to left, #C53D35, #1E5BB3 )}
#headerWB .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerWB .logo img { height:100%; width:auto;}
#headerWB .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerWB .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;}
#headerWB .links a:hover {background: #ccc; color: #22468c}
#headerWB .wbpcbg { position:absolute; top:205px; left:676px; width:720px; height:425px; background:url(../img/pcbg.png) no-repeat;transition:all 5s ; transition-delay:0s; opacity:0; transform:scale(1.1) }
#headerWB .wbpc { position:absolute; top:465px; left:918px; width:260px; height:153px; background:url(../img/pcimg.png) no-repeat;transition:all 1.2s;  transform:scale(0.8); opacity:0; }
#headerWB .wbmsg { position:absolute; top:280px; left:1128px; width:238px; height:79px; background:url(../img/msg_b.png) no-repeat; opacity:0; transition:all 1.3s; transition-delay:2s; animation: msgtrans 10s ease-in-out infinite;}
#headerWB .wbmsg1 { position:absolute; top:263px; left:834px; width:137px; height:45px; background:url(../img/msg_s.png) no-repeat; opacity:0; transition:all 1.3s; transition-delay:2.3s; animation: msgtrans 9s ease-in-out infinite;}
#headerWB .wbmsg2 { position:absolute; top:268px; left:1333px; width:137px; height:45px; background:url(../img/msg_s.png) no-repeat; opacity:0; transition:all 1.6s; transition-delay:2.3s; animation: msgtrans 8s ease-in-out infinite;}
#headerWB .wbpeople1 { position:absolute; top:380px; left:633px; width:107px; height:257px; background:url(../img/people1.png) no-repeat; opacity:0; transition:all 1.5s; transition-delay:1s;}
#headerWB .wbpeople2 { position:absolute; top:356px; left:1300px; width:154px; height:263px; background:url(../img/people2.png) no-repeat; opacity:0; transition:all 1.5s; transition-delay:0.8s;}
#headerWB .wbline { position:absolute; top:543px; left:860px; width:385px; height:0px; background:url(../img/msgline.png) no-repeat bottom; opacity:.5; transition:all 3.8s; transition-delay:0.2s;}

#headerWB .wbpcbg.animated { opacity:1; transform:scale(1)}
#headerWB .wbfont { position:absolute; top:282px; left:212px; width:580px; line-height:94px; opacity:0; transition:all 1.5s; transition-delay:1s; font-size:18px; color:#fff; font-weight:400; text-shadow:0 4px 4px rgb(0 0 0 / 25%)}
#headerWB .wbfont h1 { font-size:90px; font-weight:bold;}
#headerWB .wbfont.animated { left:12px; opacity:1;}
#headerWB .wbpc.animated { transform:scale(1); top:445px; left:918px; opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); }
#headerWB .wbmsg.animated { opacity:1; left:928px; top:280px}
#headerWB .wbmsg1.animated { opacity:1; top:263px; left:734px; }
#headerWB .wbmsg2.animated { opacity:1; top:268px; left:1233px; }
#headerWB .wbpeople1.animated { opacity:1; left:733px; }
#headerWB .wbpeople2.animated { opacity:1; left:1200px; }
#headerWB .wbline.animated { top:288px; height:255px; opacity:1;}

.productAbout { background:#F3F2F8; line-height:40px; font-size:20px; padding:53px 0; text-indent:2em}
.productAbout a { color:#1E5BB3; text-decoration:underline; }

#funList { padding:80px 0}
.funBox { position:relative; margin:0 -10px; height:686ppx;}
.funBox dl { float:left;width:41%;height:202px;background:url(../img/weiboinfo.png) no-repeat 0 0;padding:90px 4% 50px 5%; transition:all 1.5s; opacity:0; }
.funBox .dl1 { transform:translateX(-100px)translateY(-100px)  }
.funBox .dl2 { transform:translateX(100px)translateY(-100px)  }
.funBox .dl3 { transform:translateX(-100px)translateY(100px)  }
.funBox .dl4 { transform:translateX(100px)translateY(100px)  }
.funBox dt { font-size:32px; line-height:40px; margin-bottom:10px; font-weight:bold; color:#1e5bb3; padding-left:57px; background:url(../img/phdliico1.png) no-repeat left; }
.funBox ul {clear: both; margin-left:-10px;}
.funBox li {padding: 5px 0 5px 40px;font-size:18px;line-height: 30px;transition:all 1s;overflow:hidden;position: relative;}
.funBox li:hover { background:#fff; color:#35a507 }
.funBox p { line-height:30px; font-size:16px; color:#666; background:#fff; padding:13px 20px; margin:6px 0;}

.funBox .dl2 { background-position:right top }
.funBox .dl3 { background-position:left bottom }
.funBox .dl4 { background-position:right bottom }

.funBox .dl2 dt { background:url(../img/phdliico2.png) no-repeat left; }
.funBox .dl3 dt { background:url(../img/phdliico3.png) no-repeat left; }
.funBox .dl4 dt { background:url(../img/phdliico4.png) no-repeat left; }

.funBox .dl2, .funBox .dl4 { padding-left:8.5%; width:37.5% }
.funIcon { position:absolute; top:215px; left:582px; width:255px; height:255px; background:url(../img/phd.png ) no-repeat; transform:scale(.5); opacity:0; transition:all 2s; }
.funIcon.animated { transform:scale(1); opacity:1;}
.funBox dl.animated { transform:translateX(0)translateY(0);opacity:1; }

.funBox li svg{float:left;width: 40px;height: 40px;transform:scale(.4);position: absolute;left: 0; top:0px}
@keyframes suc{100%{transform: scale(.4);} 20%{transform: scale(0.9);} 0%{transform: scale(0.8);}}
.funBox 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: #888;}
@keyframes circle{from{stroke-dasharray: 119; stroke-dashoffset: 119;} to{stroke-dasharray: 119; stroke-dashoffset: 238;}}
.funBox li:hover svg .circle{animation: circle 1s ease-in-out; animation-delay: .8s; animation-fill-mode: forwards;stroke-dasharray: 119; stroke-dashoffset: 119; stroke: #68E534;}
.tick{stroke-dasharray: 0; stroke-dashoffset: 0; stroke: #888;}
@keyframes tick{from{stroke-dashoffset: 60;} to{stroke-dashoffset: 0;}}
.funBox li:hover svg .tick{animation: tick 1.2s ease-in-out; animation-fill-mode: forwards; stroke-dasharray: 60; stroke-dashoffset: 60; stroke: #68E534;}

#technicalSupport { background:#F3F2F8 }
.techSupportList li a:hover { background-color:#1E5BB3; }

.lxss a{background-color: #2F508C!important;}

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