@charset "utf-8";
/* 
 * Project Name:
 * Author:浅浅
 * Date：2017-11-29
 */
@font-face {
    font-family: 'Humanst521 BT';
    src: url('Humanist521BT-Roman.eot');
    src: url('Humanist521BT-Roman.eot?#iefix') format('embedded-opentype'),
        url('Humanist521BT-Roman.woff') format('woff'),
        url('Humanist521BT-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
*{margin:0;padding:0;}
body {margin-left:0px; margin-right:0px; margin-bottom:0px; font-family:"微软雅黑";}

img {border:0px}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
ul,li {list-style:none; margin:0px; padding:0px;}
.left {float:left;}
.right {float:right;}
.header{ height:80px;}
.top a:link, .top a:visited { color: #333333;}
.top a:active,.top a:hover { color: #f39800;}   
.top{ position: fixed; z-index: 999; width: 100%; left: 0; top: 0; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);}
.logo{ float: left; margin-left: 3%; display: block; position: relative;}
.logo a{ display: block; height:56px; padding: 11px 0px;}
.logo .img{ height: 100%; display: block;}
.nav{ float: right; display: block; padding-right: 25px;}
.nav li{ float: left; display: block; position: relative;}
.nav li>a{ position: relative; height: 80px; line-height: 80px; font-size:1.1em; display: block; padding: 0px 20px; z-index: 1;}
.nav li>a.active{ color: #f39800;}
.nav li>a.hov,.nav li>a:hover{ color: #fff;}
.nav a:before {  content:""; width:100%; height:100%; background-color:#f39800; z-index: -1; position:absolute; left:0; bottom:0px; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .42s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .42s cubic-bezier(.4,0,.2,1); transition:transform .3s cubic-bezier(.4,0,.2,1); transition:transform .42s cubic-bezier(.4,0,.2,1),-webkit-transform .42s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0);  visibility:hidden\9;}
.nav>li>a:hover:before,.nav>li>a.hov:before { transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0;visibility:visible\9;}
.nav .subnav{ position: absolute; z-index: 10; left: 50%; top: 55px; width:100%; padding: 10px 0px; margin-left: -55px; background-color: #ffffff; display: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);}
.nav .subnav a{ display: block; padding: 7px 0px; line-height:1.2; color: #666666; font-size:1em; text-align: center; position: relative; z-index: 1; perspective: 300px; transform-style: preserve-3d;}
.nav .subnav a:before{ content: ""; display: block;position: absolute; left: 0px; bottom: 0px; z-index: -1; width: 100%; display: block; height: 100%; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; -webkit-transform: rotateX(-70deg); transform: rotateX(-70deg); z-index:-1; transform-origin: center bottom 0; -webkit-transform-origin: center top 0; left:0; opacity:0; bottom: 0; visibility:hidden; background-color: #ececec;}
.nav .subnav a:hover{ color: #f39800;}
.nav .subnav a:hover:before{  transform: none; opacity: 1; visibility:visible;}
.top-sider a:link, .top-sider a:visited { color: #646464;}
.top-sider a:active,.top-sider a:hover { color: #f39800;}
.top-sider{ float: right; display: block; width: 110px; border-left: 1px solid #d2d2d2; line-height: 40px; text-align: center;}
.follow-box{ border-bottom: 1px solid #d2d2d2; height: 39px; line-height: 39px;}
.follow-box a{ width: 30px; height: 100%; display: inline-block; position: relative; margin: 0px 8px;}
.follow-box a .ico{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center;}
.follow-box a .i2{ opacity: 0; visibility: hidden; transition: 0.3s; -webkit-transition: 0.3s;}
.follow-box a:hover .i2{ opacity: 1; visibility: visible;}
.oaBtn{ display: block;}
.oaBtn span{ background: url(../images/oa.png) no-repeat right center; padding-right: 25px;}
.oaBtn:hover{ background-color: #ececec;}
.menu-handler {width:60px;height:56px; float: right; display: none; position: relative;}
.menu-handler .burger {display: block;width:24px;height:3px;background-color:#666666;-webkit-transition:all .5s cubic-bezier(.25,.46,.45,.94);-moz-transition:all .5s cubic-bezier(.25,.46,.45,.94); -ms-transition:all .5s cubic-bezier(.25,.46,.45,.94);-o-transition:all .5s cubic-bezier(.25,.46,.45,.94);transition:all .5s cubic-bezier(.25,.46,.45,.94); position: absolute; left: 50%; margin-left: -12px;}
.menu-handler .burger-1 { top: 18px;}
.menu-handler .burger-2 { top: 27px;}
.menu-handler .burger-3{ top: 36px;}
.menu-handler.active .burger { top: 27px;}
.menu-handler.active .burger-1 {-moz-transform:rotate(225deg); -ms-transform:rotate(225deg);-webkit-transform:rotate(225deg); transform:rotate(225deg)}
.menu-handler.active .burger-2 {opacity:0; -moz-transform:rotate(360deg); -ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.menu-handler.active .burger-3 {-moz-transform:rotate(-225deg);-ms-transform:rotate(-225deg);-webkit-transform:rotate(-225deg);transform:rotate(-225deg)}
.menuBox a:link, .menuBox a:visited { color: #333333;}
.menuBox a:active,.menuBox a:hover { color: #f39800;}   
.menuBox { background-color: #f7f7f7; color: #333333; position: fixed; display: none; right: 0px; top: 0px;  height: 100%; height:100vh; overflow-x:hidden;  overflow-y:auto;-moz-transform:translateX(100%);-ms-transform:translateX(100%);-webkit-transform:translateX(100%);transform:translateX(100%); -webkit-overflow-scrolling:touch; width: 400px; z-index: 980;  -webkit-transition:all .5s cubic-bezier(.25,.46,.45,.94); -moz-transition:all .5s cubic-bezier(.25,.46,.45,.94);-ms-transition:all .5s cubic-bezier(.25,.46,.45,.94); -o-transition:all .5s cubic-bezier(.25,.46,.45,.94);transition:all .5s cubic-bezier(.25,.46,.45,.94); }
.menuMoblie{ padding: 80px 0px 100px;}
.menuMoblie li { border-bottom: 1px solid #b5b5b5; }
.menuMoblie .nav-link { color: #333333; display: block; padding: 6px 8%; position: relative;}
.menuMoblie .nav-link.cur{ background-color: #ee2d31; color: #fff;}
.menuMoblie .nav-link:before{ content:""; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; position:absolute; right:26px; top:50%; transform:translateY(-50%) scale(0); -webkit-transform:translateY(-50%) scale(0); -moz-transform:translateY(-50%) scale(0); transition:0.4s; -webkit-transition:0.4s;}
.menuMoblie .cur:before{ transform:translateY(-50%) scale(1); -webkit-transform:translateY(-50%) scale(1); -moz-transform:translateY(-50%) scale(1);}
.menuMoblie .subnav { background-color: #d6d6d6; display: none;}
.menuMoblie .subnav p{ border-top: 1px solid #b5b5b5;}
.menuMoblie .subnav p:first-child{ border-top-color: #fff;}
.menuMoblie .subnav a { position: relative; display: block; padding: 12px 8%; line-height: 1; font-size:1em;}
.pusher-black { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background-color: rgba(0,0,0,0.4); z-index: 900; visibility:hidden; filter:alpha(Opacity=0);opacity:0;-webkit-transition:all .2s cubic-bezier(.02,.01,.47,1) 0s; -moz-transition:all .2s cubic-bezier(.02,.01,.47,1) 0s; -ms-transition:all .2s cubic-bezier(.02,.01,.47,1) 0s; -o-transition:all .2s cubic-bezier(.02,.01,.47,1) 0s; transition:all .2s cubic-bezier(.02,.01,.47,1) 0s;}
.menuOpen .pusher-black { visibility:visible;filter:alpha(enabled=false); opacity:1;}
.menuOpen .menuBox { -moz-transform:translateX(0); -ms-transform:translateX(0); -webkit-transform:translateX(0);  transform:translateX(0)}
@media screen and (max-width:1024px){
.logo-left {margin-left:0;}
.logo-right {margin-left:0;}
.header{height:56px;}
.nav{ float: right; display: block; padding-right: 25px;}
.nav li{ float: left; display: block; position: relative;}
.nav li>a{ position: relative; height:56px; line-height:56px; display: block; padding: 0px 18px; z-index: 1;}
.nav li>a.active{ color: #f39800;}
.nav li>a.hov,.nav li>a:hover{ color: #fff;}
.logo{ float: left; margin-left:3%; margin-top:0px; display: block; position: relative;}
.img{width:80%; border:0px; display: block;}
.menuMoblie{ padding: 56px 0px 100px;}
}
@media screen and (max-width:768px){
.header{height:56px; margin-top:-25px;}
}