@charset "utf-8";
 
/*reset*/
body,html{ padding:0; margin:0 auto; background:#fff; font-size:125%; line-height:24px; word-break:break-all; height:100%; font-family:"Microsoft YaHei";}
img{ border:none;}
h1,h2,h3,h4,h5,h6,hr,blockquote,form,ul,ol,li,p,pre,dl,dt,dd,fieldset,legend,button,input,textarea,th,td,figure{ padding:0; margin:0;}
ul,ol,li{ list-style:none;}
sup{ vertical-align:text-top;}
sub{ vertical-align:text-bottom;}
legend{ color:#000;}
fieldset{ border:0;} 
button,input,select,textarea{ font-size:100%;}
table{ border-collapse:collapse; border-spacing:0;}
textarea{ resize:none;}
select{ height:22px; line-height:18px; padding:2px; border:1px solid #d9d9d9; border-radius:2px;}

/*public font*/
button,input,select,textarea{ font-family:Arial, Helvetica, sans-serif simsun; color:#333;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:500;}
address,cite,dfn,em,var,s{ font-style:normal;}
code,kbd,pre,samp{ font-family:courier new, courier, monospace;}
.fn{ font-weight:500;}.fb{ font-weight:700;}
small,.ft12{ font-size:12px;}.ft14{ font-size:14px;}.ft16{ font-size:16px;}.ft18{ font-size:18px;}.ft20{ font-size:20px;}.ft22{ font-size:22px;}.ft24{ font-size:24px;}
.ffs{ font-family:"simsun";}.ffm{ font-family:"Microsoft YaHei";}.ffa{ font-family:Arial, Helvetica, sans-serif;}
a{ color:#000; text-decoration:none;}
.op8:hover{ filter:alpha(opacity=80); opacity:0.8;}
.tl{ text-align:left;}.tc{ text-align:center;}.tr{ text-align:right;}
.fl{ float:left;}.fr{ float:right;}
.clear{ clear:both; line-height:0px; font-size:0px;}
.clearfix:after{ content:".";display:block; height:0; clear:both; visibility:hidden;}
.clearfix{ zoom:1;}
.vm{ vertical-align:middle;}.vt{ vertical-align:top;}
.db{ display:block;}.dn,.dsn{ display:none;}.vh{ visibility:hidden;}
.utra{ transition:all 0.2s ease-in-out 0s; -moz-transition:all 0.2s ease-in-out 0s; -webkit-transition:all 0.2s ease-in-out 0s; -o-transition:all 0.2s ease-in-out 0s;}
.pta{ position:absolute;}.ptr{ position:relative;}
.cp{ cursor:pointer;}
.none{ display:none; overflow:hidden;}

/*layout main*/
body{ -webkit-user-select:none; /* 禁止选择 */-webkit-touch-callout:none; /* 禁用弹出 */}
.wrapper{ width:100%; display:block; min-width:320px;}
.main{ margin:0 auto;}
#wrap{ position:relative; min-height:100%; _height:100%; overflow:hidden; color:#fff;}
.page{ width:100%; height:100%; background:#000;}

/*mainnav*/
#mainnav{ width:100%; position:absolute; z-index:999; height:4.4rem; text-align:right;}
#mainnav h1{ position:absolute; left:2.5rem; top:0.5rem; width:13.9rem;}
#mainnav h1 img{ display:block; width:100%;}
#mainnav a{ display:inline-block; padding:0 22px; color:#fff; cursor:pointer; font:1.2rem/4.4rem microsoft Yahei;}
#mainnav a:last-child{ margin-right:20px;}
#mainnav a.active{ background:#E70E00;}

/*focus*/
.focus{ width:100%; height:100%;}
.focus h2{ width:65rem; font-size:3.4rem; line-height:4.6rem; color:#fff; position:absolute; top:50%; right:0; margin:-14rem 0 0 0; opacity:0; color:#1A5074; background:rgba(255,255,255,0.5); padding:2.5rem 5rem 2.5rem 4.5rem;}
.focus h2 b{ display:block; font-size:3.8rem;}
.focus h2 span{ font-size:2rem; line-height:2.8rem; display:block; border-top:1px solid #1A5074; padding-top:1.5rem; margin-top:1.5rem;}
.focus h3{ width:32rem; position:absolute; top:50%; left:50%; margin:-17rem 0 0 -50rem; visibility:hidden;}
.focus h3 img{ width:100%; display:block;}
.focus h3 a{ width:15rem; height:15rem; position:absolute; cursor:pointer;}
.focus h3 .logo1{ left:0; top:2rem;}
.focus h3 .logo2{ right:0; top:0;}
.focus h3 .logo3{ left:0; bottom:0;}
.focus h3 .logo4{ right:0; bottom:0;}
.focus h3 .imgBlur{ -webkit-animation:2s imgBlur linear; animation:.5s imgBlur linear; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.focus h3 .imgShow{ -webkit-animation:2s imgShow linear; animation:.5s imgShow linear; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.focus h3.animate{ -webkit-animation:1s logoBig; animation:1s logoBig; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; visibility:visible;}
.focus h3 .tip{ width:1rem; height:1rem; background:#fff; opacity:0.1; border-radius:50%; position:absolute; left:5rem; top:10rem; animation:1s tipShow infinite linear;}

#focusNav{ width:4.6rem; position:absolute; top:50%; right:4rem; margin-top:-5.4rem; z-index:10;}
#focusNav a{ width:4.6rem; height:4.6rem; display:block; cursor:pointer; opacity:0.8;}
#focusNav a:hover{ -webkit-animation:.8s navScale infinite; -moz-animation:.8s navScale infinite; animation:.8s navScale infinite;}
#focusNav .prev{ background:url(../images/up.png) no-repeat; background-size:contain;}
#focusNav .next{ background:url(../images/down.png) no-repeat; background-size:contain;}
#focusNav span{ font-size:1.8rem; line-height:2rem; color:#fff; text-align:center; display:block; margin:1rem 0;}
.focus h2.animate{ -webkit-animation:.8s lightSpeedIn .2s; -moz-animation:.8s lightSpeedIn .2s; animation:.8s bounceInRight .2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.loading{ background:url(../images/loading.png) no-repeat; background-size:contain; width:2.45rem; height:2.45rem; position:absolute; left:50%; top:50%; margin:-1.225rem 0 0 -1.225rem; animation:1s loading infinite linear;}

/*service*/
.service{ padding:10% 0 0 7rem; width:60rem;}
.service h2{ font-size:3.6rem; color:#356892; line-height:4rem;}
.service .item{ width:23.5rem; height:7rem; background:#538BAC; padding:1.5rem 1rem; float:left; position:relative; color:#fff; margin:2rem 2.5rem 0 0; opacity:0;}
.service .item dt{ width:6.8rem; height:6.8rem; float:left;}
.service .item1 dt{ background:url(../images/service_icon1.png) no-repeat; background-size:contain;}
.service .item2 dt{ background:url(../images/service_icon2.png) no-repeat; background-size:contain;}
.service .item3 dt{ background:url(../images/service_icon3.png) no-repeat; background-size:contain;}
.service .item4 dt{ background:url(../images/service_icon4.png) no-repeat; background-size:contain;}
.service .item dd{ width:16rem; float:right;}
.service .item dd h3{ font-size:1.6rem; margin-bottom:1rem;}
.service .item dd p{ font-size:1rem; line-height:2rem;}
.service .item dd p span{ cursor:pointer; display:block; float:left; margin-right:1rem;}
.service .item1.animate{ -webkit-animation:.6s bounceInLeft; -moz-animation:.6s bounceInLeft; animation:.6s bounceInLeft; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.service .item2.animate{ -webkit-animation:.6s bounceInDown .2s; -moz-animation:.6s bounceInDown .2s; animation:.6s bounceInDown .2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.service .item3.animate{ -webkit-animation:.6s bounceInUp .6s; -moz-animation:.6s bounceInUp .6s; animation:.6s bounceInUp .6s;-webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.service .item4.animate{ -webkit-animation:.6s bounceInRight .4s; -moz-animation:.6s bounceInRight .4s; animation:.6s bounceInRight .4s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}

/*manageModel*/
.manageModel{ padding:10% 0 0 0; width:40rem; margin:0 auto;}
.manageModel h2{ font-size:3.6rem; color:#fff; line-height:4rem; text-align:center; border-bottom:1px solid rgba(255,252,252,0.3); padding-bottom:1rem;}
.manageModel .intro{ font-size:1.2rem; color:#fff; line-height:2rem; border-top:1px solid rgba(0,0,0,0.3); padding-top:1rem; visibility:hidden;}
.manageModel .intro span{ position:relative; display:inline-block; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); transform:scale(1.5); opacity:0;}
.manageModel .item a{ width:18rem; display:block; font-size:1.8rem; line-height:4rem; text-align:center; color:rgba(255,255,255,0.8); background:rgba(13,85,181,0.3); border:2px solid rgba(255,255,255,0.8); margin-top:2.5rem; transition:.5s; visibility:hidden; cursor:pointer;}
.manageModel .item a:hover{ background:#C62318; color:#fff; border-color:#C62318;}
.manageModel .item a:nth-child(1).animate{ -webkit-animation:.6s bounceInLeft 3.8s; -moz-animation:.6s bounceInLeft 3.8s; animation:.6s bounceInLeft 3.8s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.manageModel .item a:nth-child(2).animate{ -webkit-animation:.6s bounceInRight 4s; -moz-animation:.6s bounceInRight 4s; animation:.6s bounceInRight 4s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.manageModel .item a:nth-child(3).animate{ -webkit-animation:.6s bounceInLeft 4.2s; -moz-animation:.6s bounceInLeft 4.2s; animation:.6s bounceInLeft 4.2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.manageModel .item a:nth-child(4).animate{ -webkit-animation:.6s bounceInRight 4.4s; -moz-animation:.6s bounceInRight 4.4s; animation:.6s bounceInRight 4.4s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.manageModel .intro.move{ -webkit-animation:.5s bottomIn; -moz-animation:.5s bottomIn; animation:.5s bottomIn; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}

/*successCase*/
.successCase{ padding:10% 7rem 0 0;}
.successCase h2{ font-size:3.6rem; color:#356892; line-height:4rem; text-align:right;}
.successCase .list{ position:relative; margin-top:0.5rem;}
.successCase .list li{ position:absolute; opacity:0; cursor:pointer;}
.successCase .list li .inbox{ width:100%; height:100%; position:absolute; left:0; top:0;}
.successCase .list li .inbox div{ padding:0.5rem 0; background:rgba(0,0,0,0.4); position:absolute; left:0; bottom:0; color:#fff; width:100%; line-height:1.4rem; z-index:2;}
.successCase .list li .inbox div h3{ font-size:1.2rem; padding-left:0.5rem;}
.successCase .list li .inbox div p{ font-size:1rem; padding-left:0.5rem;}
.successCase .list li .inbox div p em{ font-size:1.2rem;}
.successCase .list li.c1{ width:13.9rem; height:13.9rem; right:0; top:0;}
.successCase .list li.c1 .inbox{ background:url(../images/case_pic1.jpg) no-repeat; background-size:contain;}
.successCase .list li.c2{ width:10.7rem; height:10.7rem; right:14rem; top:3.2rem; }
.successCase .list li.c2 .inbox{ background:url(../images/case_pic2.jpg) no-repeat; background-size:contain;}
.successCase .list li.c3{ width:13.9rem; height:13.9rem; right:24.8rem; top:0;}
.successCase .list li.c3 .inbox{ background:url(../images/case_pic3.jpg) no-repeat; background-size:contain;}
.successCase .list li.c4{ width:9.2rem; height:9.2rem; right:38.8rem; top:3.2rem;}
.successCase .list li.c4 .inbox{ background:url(../images/case_pic4.jpg) no-repeat; background-size:contain;}
.successCase .list li.c5{ width:13.9rem; height:13.9rem; right:0; top:14rem;}
.successCase .list li.c5 .inbox{ background:url(../images/case_pic5.jpg) no-repeat; background-size:contain;}
.successCase .list li.c6{ width:13.9rem; height:13.9rem; right:14rem; top:14rem;}
.successCase .list li.c6 .inbox{ background:url(../images/case_pic6.jpg) no-repeat; background-size:contain;}
.successCase .list li.c7{ width:10.7rem; height:10.7rem; right:28rem; top:14rem;}
.successCase .list li.c7 .inbox{ background:url(../images/case_pic7.jpg) no-repeat; background-size:contain;}
.successCase .list li.c8{ width:10.7rem; height:10.7rem; right:38.8rem; top:12.5rem;}
.successCase .list li.c8 .inbox{ background:url(../images/case_pic8.jpg) no-repeat; background-size:contain;}
.successCase .list li.c1.animate{ -webkit-animation:.8s case1In; -moz-animation:.8s case1In; animation:.8s case1In; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.successCase .list li.c2.animate{ -webkit-animation:.8s case2In .1s; -moz-animation:.8s case2In .1s; animation:.8s case2In .1s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.successCase .list li.c3.animate{ -webkit-animation:.8s case3In .2s; -moz-animation:.8s case3In .2s; animation:.8s case3In .2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.successCase .list li.c4.animate{ -webkit-animation:.8s case4In .3s; -moz-animation:.8s case4In .3s; animation:.8s case4In .3s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.successCase .list li.c5.animate{ -webkit-animation:.8s case5In .4s; -moz-animation:.8s case5In .4s; animation:.8s case5In .4s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.successCase .list li.c6.animate{ -webkit-animation:.8s case6In .5s; -moz-animation:.8s case6In .5s; animation:.8s case6In .5s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.successCase .list li.c7.animate{ -webkit-animation:.8s case7In .6s; -moz-animation:.8s case7In .6s; animation:.8s case7In .6s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.successCase .list li.c8.animate{ -webkit-animation:.8s case8In .7s; -moz-animation:.8s case8In .7s; animation:.8s case8In .7s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.successCase .list li.hinge{ -webkit-animation:.8s zoomOutDown; -moz-animation:.8s zoomOutDown; animation:.8s zoomOutDown;}
.successCase .list li.scaleBig{ z-index:10;}
.successCase .list li.scaleBig .inbox{ -webkit-animation:.5s scaleBig; -moz-animation:.5s scaleBig; animation:.5s scaleBig; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.successCase .detail{ width:37rem; min-height:26rem; position:absolute; left:8rem; top:50%; margin-top:-14rem; padding:2rem 0; opacity:0; background:rgba(255,255,255,.8); color:#333; box-shadow:3px 3px 3px 0 rgba(0,0,0,0.5);}
.successCase .detail .pic{ width:12rem; height:12rem; box-shadow:3px 3px 3px 0 rgba(0,0,0,0.7); position:absolute; left:2rem; top:-1.6rem;}
.successCase .detail .pic div{ padding:0.5rem 0; background:rgba(0,0,0,0.4); position:absolute; left:0; bottom:0; color:#fff; width:100%; line-height:1.4rem;}
.successCase .detail .pic img{ width:100%; display:block;}
.successCase .detail .pic h3{ font-size:1.2rem; padding-left:0.5rem;}
.successCase .detail .pic p{ font-size:1rem; padding-left:0.5rem;}
.successCase .detail span{ font-size:1rem; display:inline-block; margin:1rem 1rem 0 0;}
.successCase .detail ul li{ font-size:1.2rem; line-height:2.4rem; width:16.5rem; padding-left:2rem; float:left; color:#333;}
.successCase .detail ul li:first-child{ margin-top:9.5rem;}
.successCase .detail ul li:before{ content:''; background:url(../images/dot.png) no-repeat; background-size:contain; width:0.5rem; height:0.5rem; display:inline-block; vertical-align:middle; margin:-0.2rem 0.5rem 0 0;}
.successCase .detail .close{ width:3rem; height:3rem; background:rgba(255,255,255,.8); padding:1rem; position:absolute; right:0; top:0; cursor:pointer; opacity:0; transition:all .5s;}
.successCase .detail .close img{ width:100%; display:block;}
.successCase .detail:hover .close{ top:-5rem; opacity:1;}
.successCase .detail.animate{ -webkit-animation:.6s rollIn; -moz-animation:.6s rollIn; animation:.6s rollIn; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}

/*solution*/
.solution{ padding:8% 0 0 0;}
.solution h2{ font-size:3.6rem; color:#356892; line-height:4rem; text-align:center;}
.solution ul{ position:relative; -webkit-transform-style:preserve-3d; -webkit-perspective:150px; -moz-transform-style:preserve-3d; -moz-perspective:150px; transform-style:preserve-3d; perspective:150px; width:100%;}
.solution ul li{ border-radius:50%; color:#fff; text-align:center; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; display:-moz-box; -moz-box-pack:center; -moz-box-align:center; align-items:center; display:flex; position:absolute; cursor:pointer; opacity:0; }
.solution ul li div{ width:100%;}
.solution ul li h3{ font-size:1.6rem; line-height:2rem; border-bottom:1px solid #fff; padding-bottom:0.5rem; margin-bottom:0.3rem;}
.solution ul li p{ font-size:1rem; border-bottom:1px dotted #fff; line-height:1.4rem; padding:0.3rem 0; cursor:pointer;}
.solution ul li p a{ color:#fff;}
.solution ul li p:last-of-type{ border-bottom:none;}
.solution ul li.s1{ width:14rem; height:20rem; padding:0 3rem; background:#C62318; box-shadow:0 0 0 1rem #E19F97; left:50%; top:2.5rem; margin-left:-10rem; -webkit-transform:translateZ(-40rem); -moz-transform:translateZ(-40rem); transform:translateZ(-40rem);}
.solution ul li.s1.animate{ -webkit-animation:8s translateBig infinite linear; -moz-animation:8s translateBig infinite linear; animation:8s translateBig infinite linear;}
.solution ul li.s2{ width:8rem; height:12rem; padding:0 2rem; background:#5E92B0; box-shadow:0 0 0 1rem #8EB5C9; left:50%; top:7rem; margin-left:-28.5rem; -webkit-transform:translateZ(-35rem); -moz-transform:translateZ(-35rem); transform:translateZ(-35rem);}
.solution ul li.s2.animate{ -webkit-animation:10s translateBig 1.5s infinite linear; -moz-animation:10s translateBig 1.5s infinite linear; animation:10s translateBig 1.5s infinite linear;}
.solution ul li.s3{ width:14rem; height:20rem; padding:0 3rem; background:#C62318; box-shadow:0 0 0 1rem #E19F97; left:50%; top:4rem; margin-left:5rem; -webkit-transform:translateZ(-25rem); -moz-transform:translateZ(-25rem); transform:translateZ(-25rem);}
.solution ul li.s3.animate{ -webkit-animation:10s translateBig 13.5s infinite linear; -moz-animation:10s translateBig 13.5s infinite linear; animation:10s translateBig 13.5s infinite linear;}
.solution ul li.s4{ width:12rem; height:18rem; padding:0 3rem; background:#5E92B0; box-shadow:0 0 0 1rem #8EB5C9; left:50%; top:8rem; margin-left:-20rem; -webkit-transform:translateZ(-37rem); -moz-transform:translateZ(-37rem); transform:translateZ(-37rem);}
.solution ul li.s4.animate{ -webkit-animation:10s translateBig 12s infinite linear; -moz-animation:10s translateBig 12s infinite linear; animation:10s translateBig 12s infinite linear;}
.solution ul li.s5{ width:12rem; height:16rem; padding:0 2rem; background:#C62318; box-shadow:0 0 0 1rem #E19F97; left:50%; top:4rem; margin-left:-35rem; -webkit-transform:translateZ(-32rem); -moz-transform:translateZ(-32rem); transform:translateZ(-32rem);}
.solution ul li.s5.animate{ -webkit-animation:10s translateBig 4.5s infinite linear; -moz-animation:10s translateBig 4.5s infinite linear; animation:10s translateBig 4.5s infinite linear;}
.solution ul li.s6{ width:8rem; height:12rem; padding:0 2rem; background:#5E92B0; box-shadow:0 0 0 1rem #8EB5C9; left:50%; top:14rem; margin-left:11rem; -webkit-transform:translateZ(-20rem); -moz-transform:translateZ(-20rem); transform:translateZ(-20rem);}
.solution ul li.s6.animate{ -webkit-animation:10s translateBig 3s infinite linear; -moz-animation:10s translateBig 3s infinite linear; animation:10s translateBig 3s infinite linear;}
.solution ul li.s7{ width:12rem; height:16rem; padding:0 2rem; background:#C62318; box-shadow:0 0 0 1rem #E19F97; left:50%; top:15rem; margin-left:-20rem; -webkit-transform:translateZ(-25rem); -moz-transform:translateZ(-25rem); transform:translateZ(-25rem);}
.solution ul li.s7.animate{ -webkit-animation:10s translateBig 7.5s infinite linear; -moz-animation:10s translateBig 7.5s infinite linear; animation:10s translateBig 7.5s infinite linear;}
.solution ul li.s8{ width:8rem; height:12rem; padding:0 2rem; background:#5E92B0; box-shadow:0 0 0 1rem #8EB5C9; left:50%; top:9rem; margin-left:-43rem; -webkit-transform:translateZ(-20rem); -moz-transform:translateZ(-20rem); transform:translateZ(-20rem);}
.solution ul li.s8.animate{ -webkit-animation:10s translateBig 10.5s infinite linear; -moz-animation:10s translateBig 10.5s infinite linear; animation:10s translateBig 10.5s infinite linear;}
.solution ul li.s9{ width:8rem; height:12rem; padding:0 2rem; background:#5E92B0; box-shadow:0 0 0 1rem #8EB5C9; left:50%; top:0.5rem; margin-left:18rem; -webkit-transform:translateZ(-25rem); -moz-transform:translateZ(-25rem); transform:translateZ(-25rem);}
.solution ul li.s9.animate{ -webkit-animation:10s translateBig 6s infinite linear; -moz-animation:10s translateBig 6s infinite linear; animation:10s translateBig 6s infinite linear;}
.solution ul li.s10{ width:12rem; height:18rem; padding:0 3rem; background:#5E92B0; box-shadow:0 0 0 1rem #8EB5C9; left:50%; top:12rem; margin-left:25rem; -webkit-transform:translateZ(-23rem); -moz-transform:translateZ(-23rem); transform:translateZ(-23rem);}
.solution ul li.s10.animate{ -webkit-animation:10s translateBig 9s infinite linear; -moz-animation:10s translateBig 9s infinite linear; animation:10s translateBig 9s infinite linear;}

/*aboutus*/
.aboutus{ padding:10% 6rem 0 0;}
.aboutus h2{ font-size:2.4rem; line-height:3rem; color:#fff; text-align:right; font-weight:600;}
.aboutus h3{ font-size:2rem; line-height:5rem; color:#fff; text-align:right;}
.aboutus ul{ float:right; margin-top:3rem;}
.aboutus ul li{ width:10rem; float:left; text-align:center; color:#fff; font-size:1.6rem; line-height:2.4rem; margin-left:1.5rem; position:relative; opacity:0; cursor:pointer;}
.aboutus ul li span{ border:0.4rem solid #fff; width:9.2rem; height:7.7rem; border-radius:10rem; font-size:2.4rem; display:block; margin-bottom:1.6rem; line-height:2.8rem; padding-top:1.5rem;}
.aboutus ul li span b{ font-size:2.2rem;}
.aboutus .tip{ width:50rem; text-align:center; font-size:1.6rem; color:#fff; clear:both; float:right; position:relative; opacity:0; margin-top:1rem;}
.aboutus .tip i{ background:url(../images/about_icon.png) no-repeat; background-size:contain; width:13rem; height:6.7rem; display:block; margin:0 auto 1rem;}
.aboutus .tip.animate{ -webkit-animation:.8s bounceInUp 1.5s; -moz-animation:.8s bounceInUp 1.5s; animation:.8s bounceInUp 1.5s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.aboutus ul li:nth-child(1).animate{ -webkit-animation:.6s scaleIn; -moz-animation:.6s scaleIn; animation:.6s scaleIn; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.aboutus ul li:nth-child(2).animate{ -webkit-animation:.6s scaleIn .3s; -moz-animation:.6s scaleIn .3s; animation:.6s scaleIn .3s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.aboutus ul li:nth-child(3).animate{ -webkit-animation:.6s scaleIn .6s; -moz-animation:.6s scaleIn .6s; animation:.6s scaleIn .6s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.aboutus ul li:nth-child(4).animate{ -webkit-animation:.6s scaleIn .9s; -moz-animation:.6s scaleIn .9s; animation:.6s scaleIn .9s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.aboutus ul li:nth-child(5).animate{ -webkit-animation:.6s scaleIn 1.2s; -moz-animation:.6s scaleIn 1.2s; animation:.6s scaleIn 1.2s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.aboutus ul li span:hover{ -webkit-animation:.8s navScale infinite; -moz-animation:.8s navScale infinite; animation:.8s navScale infinite;}

/*bottomarea*/
.bottomarea{ position:absolute; left:0; bottom:0; width:100%; background:#fff; visibility:hidden;}
.bottomarea-arr{ background:url(../images/arr.png) no-repeat; background-size:contain; width:4.05rem; height:3rem; position:absolute; left:50%; bottom:1rem; margin-left:-2.525rem;}
.bottomarea.animate{ -webkit-animation:.8s slideInUp; -moz-animation:.8s slideInUp; animation:.8s slideInUp; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; visibility:visible;}
.bottomarea.animated{ -webkit-animation:.8s slideOutDown; -moz-animation:.8s slideOutDown; animation:.8s slideOutDown; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; visibility:visible;}

/*supernav*/
.supernav{ background:#EEF2F5; padding:3rem 7.5rem 5rem;}
.supernav dl{ font-size:1.2rem; width:6rem; float:left; margin-right:3.5rem; color:#333; line-height:1.8rem; text-align:center;}
.supernav dl dt{ font-weight:700; margin-bottom:0.4rem;}
.supernav .product{ position:relative; color:#5091B9; padding-top:3rem;}
.supernav .product i{ background:url(../images/supernav_icon.gif) no-repeat; background-size:contain; width:3.6rem; height:3.6rem; position:absolute; top:-1rem; left:50%; margin-left:-1.8rem;}
.supernav .telephone{ border-left:1px solid #E2E2E2; padding:0 0 3.5rem 4rem; font-size:1.2rem; color:#333; float:left;}
.supernav .telephone h4{ font-weight:700;}
.supernav .telephone .num{ font-size:2rem; font-weight:700; color:#E20000; padding:1rem 0;}

/*copyright*/
.copyright{ text-align:center; font-size:1.2rem; line-height:2.2rem; color:#333; padding:1rem 0;}
.copyright a:hover{color:#888;}

/*dialog*/
.dialog{ width:80%; height:36rem; position:absolute; z-index:100; left:50%; top:50%; margin:-18rem 0 0 -40%; padding:2rem 0; background:rgba(255,255,255,1); color:#333; box-shadow:3px 3px 3px 0 rgba(0,0,0,0.5); visibility:hidden;}
.dialog .close{ background:url(../images/close.png) no-repeat; background-size:contain; width:3rem; height:3rem; position:absolute; right:1rem; top:1rem; cursor:pointer;}
.dialog.animate{ -webkit-animation:.6s bounceInDown; -moz-animation:.6s bounceInDown; animation:.6s bounceInDown; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; visibility:visible;}
.dialog-manageModel{ padding:2rem 3%; width:74%; height:32rem;}
.dialog-manageModel h3{ color:#C90C00; font-size:2rem; margin-bottom:2rem;}
.dialog-manageModel div{ height:27rem; overflow-y:auto;}
.dialog-manageModel p{ font-size:1.4rem; line-height:2.4rem;}
.dialog-solution{ height:40rem; margin-top:-20rem;}
.dialog-solution h3{ color:#C90C00; font-size:2rem; margin-bottom:1rem; text-indent:2rem;}
.dialog-solution .tab-tit{ width:22rem; float:left; margin:2rem 0 0 0;}
.dialog-solution .tab-tit li{ font-size:1.35rem; line-height:2rem; padding:1rem 1rem 1rem 2rem; border-bottom:1px solid #999; cursor:pointer;}
.dialog-solution .tab-tit li:last-child{ border-bottom:none;}
.dialog-solution .tab-tit li.cur{ background:#E71101; color:#fff; border-bottom:none;}
.dialog-solution .tab-con{ margin:0 1rem 0 23.5rem;}
.dialog-solution .tab-con>div{ height:35rem; overflow-y:auto; padding-right:4rem; display:none;}
.dialog-solution .tab-con>div h4{ font-size:1.3rem; font-weight:700; margin-bottom:1rem;}
.dialog-solution .tab-con>div p{ font-size:1.2rem; line-height:2rem; margin-top:1rem;}
.dialog-solution .tab-con>div p img{ width:70%; display:block; margin:1rem auto;}
.dialog-service{ height:23rem; width:65%; padding:2rem 1rem 2rem 2.5rem; left:7rem; margin:0; top:10%; margin-top:11rem; background:rgba(53,103,145,.9); color:#fff;}
.dialog-service h3{ font-size:2rem; float:left;}
.dialog-service h3 span{ display:inline-block; vertical-align:middle; margin:-0.3rem 1rem 0 0; display:inline-block; vertical-align:middle;}
.dialog-service h3 span.s1{ background:url(../images/service_icon5.png) no-repeat; background-size:contain; width:3.8rem; height:2rem;}
.dialog-service h3 span.s2{ background:url(../images/service_icon6.png) no-repeat; background-size:contain; width:3.5rem; height:2.75rem;}
.dialog-service h3 span.s3{ background:url(../images/service_icon7.png) no-repeat; background-size:contain; width:2.95rem; height:2.75rem;}
.dialog-service h3 span.s4{ background:url(../images/service_icon8.png) no-repeat; background-size:contain; width:3.25rem; height:3.15rem;}
.dialog-service .tab-tit{ float:left; padding-left:4rem;}
.dialog-service .tab-tit li{ float:left; font-size:1.4rem; line-height:2rem; border-radius:0.3rem; padding:0 1rem; cursor:pointer;}
.dialog-service .tab-tit li.cur{ background:#fff; color:#356791;}
.dialog-service .tab-con{ clear:both; padding-top:2rem;}
.dialog-service .tab-con>div{ height:18rem; overflow-y:auto; display:none;}
.dialog-service .tab-con>div h4{ font-size:1.6rem; margin-bottom:1rem;}
.dialog-service .close{ background:url(../images/close2.png) no-repeat; background-size:contain;}
.dialog-service .tab-con>div p{ font-size:1.2rem; line-height:2rem;}
.dialog-aboutus{ padding:2rem 3%; width:74%; height:32rem; margin-top:-15rem;}
.dialog-aboutus .tab-tit{ height:4rem; position:absolute; left:0; top:-4rem;}
.dialog-aboutus .tab-tit li{ float:left; padding:0 1.2rem; font-size:1.8rem; line-height:4rem; margin-right:0.3rem; color:#fff; background:#E71301; border-radius:0.5rem 0.5rem 0 0; cursor:pointer;}
.dialog-aboutus .tab-tit li.cur{ background:#fff; color:#333;}
.dialog-aboutus .tab-con>div{ display:none;}
.dialog-aboutus .tab-con>div h4{ font-size:1.3rem; font-weight:700; margin-bottom:1rem;}
.dialog-aboutus .tab-con>div>div{ height:27rem; overflow-y:auto;}
#mask{ width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:99; position:absolute; left:0; top:0;}

/*keyframes*/
@-webkit-keyframes navScale{
	0%{ -webkit-transform:scale(1); opacity:0.8;}
	50%{ -webkit-transform:scale(1.1); opacity:1;}	
	100%{ -webkit-transform:scale(1); opacity:0.8;}
}
@-moz-keyframes navScale{
	0%{ -moz-transform:scale(1); opacity:0.8;}
	50%{ -moz-transform:scale(1.1); opacity:1;}	
	100%{ -moz-transform:scale(1); opacity:0.8;}
}
@keyframes navScale{
	0%{ transform:scale(1); opacity:0.8;}
	50%{ transform:scale(1.1); opacity:1;}	
	100%{ transform:scale(1); opacity:0.8;}		
}

@-webkit-keyframes case1In{
	0%{ -webkit-transform:translate(30rem,-30rem) scale(0); opacity:0;}
	80%{ -webkit-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -webkit-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -webkit-transform:translate(0,0) scale(1); opacity:1;}
}
@-moz-keyframes case1In{
	0%{ -moz-transform:translate(30rem,-30rem) scale(0); opacity:0;}
	80%{ -moz-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -moz-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -moz-transform:translate(0,0) scale(1); opacity:1;}
}
@keyframes case1In{
	0%{ transform:translate(30rem,-30rem) scale(0); opacity:0;}
	80%{ transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ transform:translate(0,0) scale(1); opacity:1;}
}
@-webkit-keyframes case2In{
	0%{ -webkit-transform:translate(10rem,-25rem) scale(0); opacity:0;}
	80%{ -webkit-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -webkit-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -webkit-transform:translate(0,0) scale(1); opacity:1;}
}
@-moz-keyframes case2In{
	0%{ -moz-transform:translate(10rem,-25rem) scale(0); opacity:0;}
	80%{ -moz-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -moz-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -moz-transform:translate(0,0) scale(1); opacity:1;}
}
@keyframes case2In{
	0%{ transform:translate(10rem,-25rem) scale(0); opacity:0;}
	80%{ transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ transform:translate(0,0) scale(1); opacity:1;}
}
@-webkit-keyframes case3In{
	0%{ -webkit-transform:translate(-15rem,-40rem) scale(0); opacity:0;}
	80%{ -webkit-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -webkit-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -webkit-transform:translate(0,0) scale(1); opacity:1;}
}
@-moz-keyframes case3In{
	0%{ -moz-transform:translate(-15rem,-40rem) scale(0); opacity:0;}
	80%{ -moz-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -moz-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -moz-transform:translate(0,0) scale(1); opacity:1;}
}
@keyframes case3In{
	0%{ transform:translate(-15rem,-40rem) scale(0); opacity:0;}
	80%{ transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ transform:translate(0,0) scale(1); opacity:1;}
}
@-webkit-keyframes case4In{
	0%{ -webkit-transform:translate(-80rem,-50rem) scale(0); opacity:0;}
	80%{ -webkit-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -webkit-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -webkit-transform:translate(0,0) scale(1); opacity:1;}
}
@-moz-keyframes case4In{
	0%{ -moz-transform:translate(-80rem,-50rem) scale(0); opacity:0;}
	80%{ -moz-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -moz-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -moz-transform:translate(0,0) scale(1); opacity:1;}
}
@keyframes case4In{
	0%{ transform:translate(-80rem,-50rem) scale(0); opacity:0;}
	80%{ transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ transform:translate(0,0) scale(1); opacity:1;}
}
@-webkit-keyframes case5In{
	0%{ -webkit-transform:translate(30rem,30rem) scale(0); opacity:0;}
	80%{ -webkit-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -webkit-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -webkit-transform:translate(0,0) scale(1); opacity:1;}
}
@-moz-keyframes case5In{
	0%{ -moz-transform:translate(30rem,30rem) scale(0); opacity:0;}
	80%{ -moz-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -moz-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -moz-transform:translate(0,0) scale(1); opacity:1;}
}
@keyframes case5In{
	0%{ transform:translate(30rem,30rem) scale(0); opacity:0;}
	80%{ transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ transform:translate(0,0) scale(1); opacity:1;}
}
@-webkit-keyframes case6In{
	0%{ -webkit-transform:translate(10rem,30rem) scale(0); opacity:0;}
	80%{ -webkit-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -webkit-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -webkit-transform:translate(0,0) scale(1); opacity:1;}
}
@-moz-keyframes case6In{
	0%{ -moz-transform:translate(10rem,30rem) scale(0); opacity:0;}
	80%{ -moz-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -moz-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -moz-transform:translate(0,0) scale(1); opacity:1;}
}
@keyframes case6In{
	0%{ transform:translate(10rem,30rem) scale(0); opacity:0;}
	80%{ transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ transform:translate(0,0) scale(1); opacity:1;}
}
@-webkit-keyframes case7In{
	0%{ -webkit-transform:translate(-25rem,40rem) scale(0); opacity:0;}
	80%{ -webkit-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -webkit-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -webkit-transform:translate(0,0) scale(1); opacity:1;}
}
@-moz-keyframes case7In{
	0%{ -moz-transform:translate(-25rem,40rem) scale(0); opacity:0;}
	80%{ -moz-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -moz-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -moz-transform:translate(0,0) scale(1); opacity:1;}
}
@keyframes case7In{
	0%{ transform:translate(-25rem,40rem) scale(0); opacity:0;}
	80%{ transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ transform:translate(0,0) scale(1); opacity:1;}
}
@-webkit-keyframes case8In{
	0%{ -webkit-transform:translate(-80rem,50rem) scale(0); opacity:0;}
	80%{ -webkit-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -webkit-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -webkit-transform:translate(0,0) scale(1); opacity:1;}
}
@-moz-keyframes case8In{
	0%{ -moz-transform:translate(-80rem,50rem) scale(0); opacity:0;}
	80%{ -moz-transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ -moz-transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ -moz-transform:translate(0,0) scale(1); opacity:1;}
}
@keyframes case8In{
	0%{ transform:translate(-80rem,50rem) scale(0); opacity:0;}
	80%{ transform:translate(0,0) scale(1.3); opacity:0.8;}
	90%{ transform:translate(0,0) scale(0.9); opacity:0.9;}	
	100%{ transform:translate(0,0) scale(1); opacity:1;}
}
@-webkit-keyframes scaleIn{
	0%{ -webkit-transform:scale(2); opacity:0;}	
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@-moz-keyframes scaleIn{
	0%{ -moz-transform:scale(2); opacity:0;}	
	100%{ -moz-transform:scale(1); opacity:1;}
}
@keyframes scaleIn{
	0%{ transform:scale(2); opacity:0;}	
	100%{ transform:scale(1); opacity:1;}
}
@-webkit-keyframes scaleBig{
	0%{ -webkit-transform:scale(1);}	
	100%{ -webkit-transform:scale(1.5);}
}
@-moz-keyframes scaleBig{
	0%{ -moz-transform:scale(1);}	
	100%{ -moz-transform:scale(1.5);}
}
@keyframes scaleBig{
	0%{ transform:scale(1);}	
	100%{ transform:scale(1.5);}
}
@-webkit-keyframes translateBig{	
	50%{ -webkit-transform:translateZ(0); opacity:1;}
	100%{ -webkit-transform:translateZ(20rem); opacity:0;}
}
@-moz-keyframes translateBig{	
	50%{ -moz-transform:translateZ(0); opacity:1;}
	100%{ -moz-transform:translateZ(20rem); opacity:0;}
}
@keyframes translateBig{	
	50%{ transform:translateZ(0); opacity:1;}
	100%{ transform:translateZ(20rem); opacity:0;}
}
@-webkit-keyframes loading{
	100%{ -webkit-transform:rotate(360deg);}	
}
@-moz-keyframes loading{
	100%{ -moz-transform:rotate(360deg);}	
}
@keyframes loading{
	100%{ transform:rotate(360deg);}	
}
@-webkit-keyframes logoBig{
	0%{ -webkit-transform:translate(-30rem,-28rem) scale(0);}
	100%{ -webkit-transform:translate(0,0) scale(1);}
}
@keyframes logoBig{
	0%{ transform:translate(-30rem,-28rem) scale(0);}
	100%{ transform:translate(0,0) scale(1);}
}
@-webkit-keyframes imgBlur{
	0%{ -webkit-filter:blur(0); filter:blur(0);}
	100%{ -webkit-filter:blur(10px); filter:blur(10px);}
}
@keyframes imgBlur{
	0%{ -webkit-filter:blur(0); filter:blur(0);}
	100%{-webkit-filter:blur(10px); filter:blur(10px);}
}
@-webkit-keyframes imgShow{
	0%{ -webkit-filter:blur(10px); filter:blur(10px);}
	100%{ -webkit-filter:blur(0); filter:blur(0);}
}
@keyframes imgShow{
	0%{ -webkit-filter:blur(10px); filter:blur(10px);}
	100%{ -webkit-filter:blur(0); filter:blur(0);}
}
@keyframes tipShow{
	0%{ transform:scale(0); opacity:0.1;}
	50%{ transform:scale(1); opacity:0.3;}
	100%{ transform:scale(0); opacity:0.1;}
}
/*media*/
@media screen and (max-width:1199px){html{font-size:8px}}
@media screen and (min-width:1200px) and (max-width:1279px){html{font-size:10px}}
@media screen and (min-width:1280px) and (max-width:1365px){html{font-size:12px}}
@media screen and (min-width:1366px) and (max-width:1439px){html{font-size:13px}}
@media screen and (min-width:1440px) and (max-width:1679px){html{font-size:13.5px}}
@media screen and (min-width:1680px) and (max-width:1919px){html{font-size:16px}}
@media screen and (min-width:1920px) and (max-width:2559px){html{font-size:18px}}
@media screen and (min-width:2560px){html{font-size:23px}}