﻿.header-box{ position:fixed; width:100%; left:0; top:0; z-index:999; padding-bottom:8px; transition:0.42s;}
.logo{ float:left; width:132px; padding-right:9px;  margin-top:20px;line-height:0; position:relative; z-index:9999;}
.logo:before{ content:""; width:268px; height:0px; background:rgba(255,255,255,0.2); background:#fff\9; filter:alpha(opacity=20); position:absolute; left:-58px; top:20px;}
.logo:after{ content:""; width:0px; height:28px; position:absolute; right:-19px; top:7px; background:rgba(255,255,255,0.2); background:#fff\9; filter:alpha(opacity=20);}
.logo img{ display:block; width:132px; height:auto; line-height:1; position:absolute; left:0; top:0; opacity:0; visibility:hidden; transition:0.42s opacity;}
.logo img.show{ opacity:1; visibility:visible; position:relative;}
.nav{ position:absolute; left:50%; top:0; margin-left:-3%; z-index:10;}
.nav >li{ float:left; margin-right:50px; position:relative; padding-bottom:30px;}
.nav >li:last-child{ margin-right:0;}
.nav >li >a{ display:block; padding:37px 4px 0; line-height:1; font-weight:400; color:#555; font-size:16px; position:relative; transition:0.42s;}
.nav >li.active >a{ color:#00707a;}
.nav >li >a:before{ content:""; width:100%; height:6px; background:#007580; position:absolute; left:0; top:0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .45s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .45s cubic-bezier(.4,0,.2,1); transition:transform .45s cubic-bezier(.4,0,.2,1); transition:transform .45s cubic-bezier(.4,0,.2,1),-webkit-transform .45s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9;}
.nav >li:hover >a:before,.nav >li.active >a:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}
.nav >li:hover .meundowns{ opacity:1; visibility:visible; top:80px;}
.meundowns{ background:#fff; position:absolute; width:150px; padding:10px 6px 25px; left:50%; margin-left:-75px; top:83px; opacity:0; transition:430ms; visibility:hidden; z-index:20;}
.meundowns dl{ position:relative;}
.meundowns dl:before{ content:""; width:0; height:100%; background:#569099; position:absolute; left:50%; top:0; transition:320ms; opacity:0;}
.meundowns dl a{ display:block; text-align:center; line-height:30px; color:#569099; font-size:14px; position:relative;}
.meundowns dl a:hover{ color: #fff;}
.meundowns dl:hover:before{ width:100%; opacity:1; left:0;}
.eq-list{ float:right; margin-top:28px; padding-left:20px; position:relative;}
.eq-list .line1{ width:0px; height:28px; background:rgba(5,155,155,0.4); background:#666\9; filter:alpha(opacity=40); position:absolute; left:0; top:0;}
.eq-list .line2{ width:58px; height:0px; background:rgba(5,155,155,0.4); background:#666\9; filter:alpha(opacity=40); position:absolute; right:0; top:14px;}
.eqs{ padding:0 6px;}
.eqs li{ float:left; margin-right:14px; width:38px; height:38px; /*border:1px solid rgba(255,255,255,0.6); border:0px solid #fff\9;*/ text-align:center; border-radius:50%; transition:0.42s; position:relative}
.eqs li:before{ content:""; width:102%; height:102%; /* background:#fff; */ position:absolute; left:-1%; top:-1%; border-radius:0%;  transform:scale(0); -webkit-transform:scale(0); -moz-transform:scale(0); overflow:hidden; transition:0.32s; visibility:hidden;}
.eqs li:last-child{ margin-right:0;}
.eqs li a{ display:block; height:33px; line-height:33px; position:relative; z-index:5;}
.eqs li:nth-child(1) a{ background:url(../images/en3.png) center no-repeat;}
.eqs li:hover:before{ transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); visibility:visible;}
.eqs li:nth-child(1):hover a{ background:url(../images/en.png) center no-repeat;}
.header-box.scoll{ box-shadow:0 0 20px rgba(0,0,0,0.4);}
.header-box.scoll,.innerheader{ background:#fff; animation: 350ms 250ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: fadedown; animation-name: fadedown;}
.innerheader{ animation:none; -webkit-animation:none; -moz-animation:none;}
.header-box.scoll:before,.innerheader:before{ content:""; width:100%; height:0px; background:#d6d6d6; position:absolute; left:0; top:50px;}
.header-box.scoll .logo,.innerheader .logo{ background:#fff;}
.header-box.scoll .logo img.show,.innerheader .logo img.show{ opacity:0; visibility:hidden; position:absolute;}
.header-box.scoll .logo img.hide,.innerheader .logo img.hide{ width:196px;opacity:1; visibility:visible; position:relative; left:0;  margin-top:0px; margin-bottom:10px} /* */
.header-box.scoll .logo:after,.innerheader .logo:after{ background:#adadad;}
.header-box.scoll .nav,.innerheader .nav{ background:#fff;}
.header-box.scoll .nav >li >a,.innerheader >.nav >li >a{ color:#333333;}
.header-box.scoll .nav li:hover .meundowns:before,.innerheader >.nav >li:hover .meundowns:before{ background:url(../images/arrow1_1.png) center no-repeat;}
.header-box.scoll .nav >li .meundowns dl a,.innerheader >.nav >li .meundowns dl a{ color:#fff;}
.header-box.scoll .nav li:hover .meundowns,.innerheader >.nav >li:hover .meundowns{ background:#00707a;}
.header-box.scoll .nav >li:hover >a,.header-box.scoll .nav >li.active >a,.innerheader .nav >li:hover >a,.innerheader .nav >li.active >a{ color:#00707a;}
.header-box.scoll .nav >li >a:before,.innerheader .nav >li >a:before{ background:#00707a;}
.header-box.scoll .eq-list .line1,.innerheader .eq-list .line1{ background:#adadad;}
.header-box.scoll .eqs,.innerheader .eqs{ background:#fff;}
.header-box.scoll .eqs,.innerheader .nav >li >a{ color:#333; }
.header-box.scoll .eqs li,.innerheader .eqs li{ border-color:#a5a5a5; background:#fff;}
.header-box.scoll .eqs li:before,.innerheader .eqs li:before{ /*background:#a5a5a5;*/}
.header-box.scoll .eqs li:nth-child(1) a,.innerheader .eqs li:nth-child(1) a{ background:url(../images/en3.png) center no-repeat;}
.header-box.scoll .eqs li:nth-child(1):hover a,.innerheader .eqs li:nth-child(1):hover a{ background:url(../images/en2.png) center no-repeat;}
.header-box.scoll .eqs li:nth-child(2) a,.innerheader .eqs li:nth-child(2) a{ background:url(../images/weixin3.png) center no-repeat;}
.header-box.scoll .eqs li:nth-child(2):hover a,.innerheader .eqs li:nth-child(2):hover a{ background:url(../images/weixin2.png) center no-repeat;}

.menus{ cursor:pointer; z-index:5; float:right; width:65px; height:64px; background:#00707a; z-index:10; position:relative; text-align:center;}
#menu_toggle1{ display:none;}
.menus span { display: inline-block; width: 22px; margin:auto; height: 4px; top:50%; margin-top:-2px; position:absolute; left:0; right:0; vertical-align: middle; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s;
 -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;}
.menus span:after,
.menus span:before { content: ""; position: absolute; display: inline-block; width: 100%; height: 4px; left: 0;
background-color: #fff; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s;-o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s;-moz-transition-delay: .3s,0s;-ms-transition-delay: .3s,0s;-o-transition-delay: .3s,0s; transition-delay: .3s,0s}
.menus span:before {top: -8px;-webkit-transition-property: top,transform;-moz-transition-property: top,transform;-ms-transition-property: top,transform;-o-transition-property: top,transform;transition-property: top,transform;}
.menus span:after {bottom: -8px;-webkit-transition-property: bottom,transform;-moz-transition-property: bottom,transform;-ms-transition-property: bottom,transform;-o-transition-property: bottom,transform;
transition-property: bottom,transform;}
.menus.active span {background-color: transparent;-webkit-transition-delay: 0s,0s;-moz-transition-delay: 0s,0s;-ms-transition-delay: 0s,0s;-o-transition-delay: 0s,0s;transition-delay: 0s,0s}
.menus.active span:after,.menus.active span:before {-webkit-transition-delay: 0s,.3s;-moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s}
.menus.active span:before {top: 0px; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)}
.menus.active span:after {bottom: 0px; -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
.navigate{ position:fixed; width:100%; height:100%; box-sizing:border-box; padding:50px 0; background:#fff; z-index:20; left:0; top:0; display:none; overflow-y:auto;}
.nclose{ display:block; width:25px; height:25px; background:url(../images/close2.png) center no-repeat; position:absolute; right:20px; top:15px; transition:0.44s;}
.nclose.hover { transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);}
.navigateli { margin-top:50px}
.navigateli >li{ border-bottom:1px solid #cccccc;}
.navigateli >li >a{ display:block; color:#333333; font-size:15px; padding-left:28px; line-height:54px; position:relative;}
.navigateli >li >a.now{ background:#00707b; color:#fff;}
.navigateli >li >a.now b:before,.navigateli >li >a.now b:after{ background:#fff;}
.navigateli >li >a.now b:after{ transform:translateY(30px); -webkit-transform:translateY(30px); -moz-transform:translateY(30px); opacity:0;}
.navigateli >li >a b{ display:block; width:15px; height:15px; position:absolute; right:28px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.navigateli >li >a b:before{ content:""; width:100%; height:2px; background:#999999; position:absolute; left:0; top:7px; transition:0.32s;}
.navigateli >li >a b:after{ content:""; width:2px; height:100%; background:#999999; position:absolute; left:7px; top:0; transition:0.32s;}
.navdown{ background:#dbdbdb; display:none;}
.navdown li a{ display:block; color:#333333; font-size:15px; padding-left:28px; line-height:50px;}
.pnavtop { padding-top:87px}
@keyframes fadedown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes shake {
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}

@-webkit-keyframes shake {
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}

@media screen and (max-width:1450px){
	.nav{ width:auto; }
	.nav >li{ margin-right:30px;}
}
@media screen and (max-width:1366px){
	.nav >li{ margin-right:25px;}
	.nav >li >a{ padding:42px 0 0;}
	.logo{ margin-left:20px; padding-right:13px;}
	.eq-list{ padding-right:20px; padding-left:13px;}
	.eq-list .line2{ width:10px;}
}
@media screen and (max-width:1200px){
	.nav >li{ margin-right:24px;}
	.meundowns{ width:92px; margin-left:-46px;} 
}
@media screen and (max-width:1100px){
	.industry{ height:0; overflow:hidden;}
	.product-list li{ width:33.33333%;}
	.radisuce,.header-box.scoll:before, .innerheader:before{ display:none;}
	.numble,.nav{ display:none;}
	.banner-box .flex-control-nav{ display:none;}
	.eq-list{ position:relative;margin-top:16px; padding-left:0;}
	.eqs li:nth-child(1) a{ background:url(../images/en2.png) center no-repeat;}
	.eqs li:nth-child(1):hover a{ background:url(../images/en2.png) center no-repeat;}
	.header-box.scoll .eqs li:nth-child(1) a,.innerheader .eqs li:nth-child(1) a{ background:url(../images/en2.png) center no-repeat;}
	.header-box{ background:#fff; animation:none !important; -webkit-animation:none !important; padding-left:1%; padding-bottom:0; box-sizing:border-box;}
	.header-box.scoll:before{ display:none;}
	.logo{ padding:0; margin-left:0; margin-top:3px;}
	.logo:after{ display:none;}
	.logo img{ width:160px; }
	.logo img.show{ display:none;margin-top:8px; margin-left:8px;}
	.logo img.hide{ opacity:1; visibility:visible; position:relative}
	.header-box.scoll .logo img.hide,.innerheader .logo img.hide{ width:160px;opacity:1; visibility:visible; position:relative; padding:0; margin-left:0; margin-top:8px;margin-left:8px;  }
	.header-box.scoll .logo img.hide,.header-box .logo img.hide{ width:160px;opacity:1; visibility:visible; position:relative; padding:0; margin-left:0; margin-top:8px;margin-left:8px;  }
	.header-box .main{ width:100%}
	#menu_toggle1{ display:block;}
	.pnavtop { padding-top:63px}
}