*{ padding:0; margin:0;}
body {margin:0; padding:0; font: inherit; font-size: 14px;font-family:Microsoft YaHei,Arial;  }
html {line-height:1.5;font-size:1em; color: #333;}
img { border:0; vertical-align: baseline; max-width:100%;}
img, object{ max-width:100%; }
ul,li { margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ padding:0; margin:0; font-weight:normal; /*font-size:1.5em;*/}
p{ margin:0; padding:0;}
a { text-decoration:none; color:#333; background-color:transparent}
a:active,a:hover {outline:0; color:#0889d0; }
table{ border-collapse:collapse;}
input{ outline:none;} 
.clearfix{ height:0; clear: both;}

html *,
html *:before,
html *:after {box-sizing: border-box;/*-webkit-transition: 0.5s; transition: 0.5s;*/}

.header{ max-width:1200px;width:100%; margin:0 auto; position:relative; background:#FFF; height:65px;}

.main-bg{ background:url(../images/intro-bg.jpg) no-repeat center;}
.main{ max-width:1200px; width:100%;margin:35px auto; overflow:hidden;}
.main1{ max-width:1200px; width:100%;margin:20px auto 35px; overflow:hidden;}

.top{ max-width:1200px; width:100%;margin:0 auto; padding:10px 0; overflow:hidden; position:relative;}
.top div{ float:left;}
.call{ margin:1% 19% 0;}
.call img{ float:left; margin-right:5px;}
.call span{ float:left;}
.call b{ font-size:20px; color:#db2219; display:block;}
.shop{ text-align:center;}
.shop a{ margin:0 5px;}
.nav-menu-btn{ display:none; position:absolute; right:30px; top:30px;}

.daohang-bg{ width:100%; height:55px; border-top:1px solid #f2f2f2; border-bottom:1px solid #f2f2f2; zoom:1; /*overflow:hidden;*/}
.daohang{ max-width:1200px;width:100%;margin:0 auto;}

.nav-menu{ width:100%;}
.nav-menu li{ float:left; position:relative; font-size:16px; width:14%; text-align:center;/*margin:0 50px;*/  line-height:55px; background:url(../images/menu-line.png) no-repeat right;}
.nav-menu .sub{ display:none; width:100%; position:absolute; left:0; top:55px; background:rgba(0,0,0,0.5); z-index:9999;  font-size:14px;}
.nav-menu .sub a{ color:#fff; display:block;  line-height:45px; padding:0 10px; zoom:1;}
.nav-menu .sub a:hover{ background:#0889d0; }
.nav-menu li:last-child{ background:none;}

.submenu .sub{ display:none; width:100%; position:absolute; left:0; top:55px; background:rgba(0,0,0,0.5); z-index:9999;  font-size:14px;}
.submenu .sub a{ color:#fff; display:block;  line-height:45px; padding:0 10px; zoom:1;}
.submenu .sub a:hover{ background:#0889d0; }
.menu li.click {background:#0889d0;  }
.menu li.click>a { color:#fff; }
.menu li.click>span { color:#fff; }

/* banner */
#banner{ overflow:hidden; position:relative;/* width:1100px; margin:0 auto;*/ }
#banner a{width:100%;height:100%;display:block;position:absolute;left:0px;top:0px; z-index:18;/*background-size:100% 100%!important;*/ }
#banner ul{ text-align:center; width:100%; clear:both;position:absolute;z-index:20; bottom:15px; }
#banner ul li{width:10px;height:10px;overflow:hidden;cursor:pointer; background-color:#fff; margin:0 3px;display:inline-block; border-radius:100px;}
#banner ul li.active{ background-color:#0889d0;}
#banner span { position:absolute; width:72px; height:100px; top:50%; margin-top:-50px;  /*background:#666;*/ z-index:100;  }
#banner span.tl { left:10px; background:url(../images/left-arrow.png) no-repeat; width:72px; height:72px; cursor:pointer;}
#banner span.tr { right:10px; background:url(../images/right-arrow.png) no-repeat; width:72px; height:72px; cursor:pointer;}
/*.bans { position:fixed; top:0px; width:100%; z-index:10; }*/

.bar{ text-align:center; color:#6e6e6e;}
.bar h4{ color:#333; font-size:30px; margin-bottom:15px;}
.bar h4 span{ color:#0889d0;}
.bar1 h4{ color:#fff; font-size:30px; margin-top:25px; margin-bottom:25px; text-align:center;}

.intro-product{ width:102%; overflow:hidden;}
.intro-product div{ float:left; width:23%; margin-right:2%; top:-200px; position:relative; z-index:1; margin-top:25px; opacity:0; filter:alpha(opacity=0); transition:all 1s; }
.intro-product div.loaded { top:0px; opacity:1; filter:alpha(opacity=100); }
.intro-product div img{ opacity:1; transition:all 0.4s;}
.intro-product div:hover img{ opacity:0.5;}
.intro-product div a{ visibility:hidden; position:absolute; left:50%; bottom:-142px; margin-left:-71px; margin-top:0; transition:all 0.4s;  }
.intro-product div:hover a{ visibility:visible; background:rgba(0,133,206,0.8); position:absolute; left:50%; bottom:50%; margin-left:-71px; margin-bottom:-71px; width:142px; height:142px; z-index:2; color:#fff; border-radius:100px; font-size:22px; text-align:center; padding-top:36px; }
.intro-product a span{ display:block;}

.intro-max{ margin-bottom:35px; }
.intro-left{ float:left; width:34%; margin-left:-200px; background-color:#fff; overflow:hidden; opacity:0; filter:alpha(opacity=0); transition:all 1s; }
.intro-left.loaded { margin-left:0; opacity:1; filter:alpha(opacity=100); }

.intro-left a{ color:#a3a3a3;}
.intro-left h3{ text-align:center; font-size:18px;  margin-bottom:12px; color:#333;}
.intro-left .intro-left-text{ padding:20px 20px; color:#6e6e6e;}
.intro-right{ float:right; width:64%; color:#6e6e6e; margin-right:-200px; opacity:0; filter:alpha(opacity=0); transition:all 1s; }
.intro-right.loaded { margin-right:0; opacity:1; filter:alpha(opacity=100); }
.intro-right h3{ font-size:18px; margin-bottom:10px; color:#333;}
.intro-right-top{ background-color:#fff; margin-bottom:23px; overflow:hidden;}
.intro-right-top .intro-text{ float:left; /*margin:0 20px;*/ width:56%; padding:2% 2% 0% 4%;}
.intro-right-top .intro-text a{ display:block; color:#a3a3a3; margin-top:15px;}

.intro-left:hover a{ color:#0889d0;}
.intro-right-top:hover .intro-text a{ color:#0889d0;}

.intro-left-img{ overflow:hidden;}
.intro-left img{ transition:all ease 0.6s;-moz-transition:all ease 0.6s; -o-transition:all ease 0.6s; -webkit-transition:all ease 0.6s;}
.intro-left:hover img{ transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); -webkit-transform:scale(1.1);} 

.intro-img{ float:left; width:40%;overflow:hidden;}
.intro-img img{ width:100%; transition:all ease 0.6s;-moz-transition:all ease 0.6s; -o-transition:all ease 0.6s; -webkit-transition:all ease 0.6s; vertical-align:bottom;}
.intro-right-top:hover .intro-img img{ transform:scale(1.1);}

.info-news-max{ width:102%; overflow:hidden;}
.info-news{ float:left; width:23%; margin-right:2%; position:relative; top:-200px; opacity:0; filter:alpha(opacity=0); transition:all 1s; }
.info-news.loaded { top:0;  opacity:1; filter:alpha(opacity=100);  }
.info-news-text{ padding-top:20px;  color:#6e6e6e;}
.info-news-text h4{ color:#333; font-size:16px;}
/*.info-news:hover .info-news-text{ background-color:#005ac3; color:#fff;}*/
.info-news:hover .info-news-text h4{  color:#0889d0;}
.info-news-img{ overflow:hidden;}
.info-news-img img{ vertical-align:bottom; transition:all ease 0.6s;-moz-transition:all ease 0.6s; -o-transition:all ease 0.6s; -webkit-transition:all ease 0.6s;}
.info-news:hover img{ transform:scale(1.1);}
.info-news-text span{ display:block; border:1px solid #dddddd; width:84px; height:26px; line-height:26px; font-size:12px; text-align:center; margin-top:20px;}

.link{ max-width:1200px; width:100%; margin:0 auto 20px; overflow:hidden; }
.link b{ color:#333; margin-right:10px;}
.link a{ color:#6e6e6e; margin:0 5px;}
.link a:hover{ color:#0889d0;}

.tonglang{ max-width:1200px;width:100%;margin:0 auto; color:#9a9a9a; line-height:45px;}
.tonglang img{ margin-right:5px; vertical-align:middle;}
.submenu-bg{ background-color:#f0f0f0; padding:15px 0;}
.submenu,.submenu-01{ max-width:1200px;width:100%;margin:0 auto; text-align:center;}
.submenu ul{ /*background-color:#fff;*/}
.submenu ul li{ display:inline-block; border-right:1px solid #f0f0f0; padding:10px 25px; height:55px; background-color:#FFF; margin:0 -2px;}
.submenu ul li a,.submenu-01 ul li a{ display:block;}
.submenu ul li a:hover,.submenu-01 ul li a:hover{ color:#fff;}
.submenu ul li:hover,.submenu-01 ul li:hover{ background-color:#0085ce; }
.submenu ul li span,.submenu-01 ul li span{ display:block; transform:rotate(90deg); color:#ccc; font-family:"宋体";}
.submenu ul li:hover span,.submenu-01 ul li:hover span{ color:#fff;}

.submenu-01 ul li{ display:inline-block; border-right:1px solid #f0f0f0; padding:10px 0; height:55px; width:14%;  background-color:#FFF; position:relative; margin:0 -2px;}
.submenu-01-list{ display:none; position:absolute; border:1px solid #e7e7e7; z-index:99; width:100%; top:55px; background-color:#fff;}
.submenu-01-list a{ border-bottom:1px solid #e7e7e7; height:55px; line-height:55px;}
.submenu-01-list a:hover{ background-color:#0085ce; color:#fff;}

.content{ color:#6e6e6e; line-height:2;}
.about-img{ float:left; width:22%;}
.about-text{ float:left; width:74%; margin-left:4%;}

.product-list{ width:102%; }
.product-list a{ float:left; width:23%; margin-right:2%; margin-bottom:2%; text-align:center; background-color:#fff; }
.product-list a:hover{ /*box-shadow:0px 0px 18px #dcdcdc;*/}

.store1{ display:none;}

.detail-max{  background-color:#FFF; overflow:hidden; max-width:1200px; width:100%; margin:20px auto 35px;}
.detail{ overflow:hidden;}
.detail-img{ width:48%; float:left; text-align:center; margin-right:4%; border:1px solid #e5e5e5;}
.detail-text{ width:48%; float:right; text-align:left; line-height:2;}
.detail-text b{ display:block; font-size:1.4em;   color:#007ac6;}
.detail-text div{ border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; padding:20px 0; margin-bottom:25px;}

.detail-title{  height:50px; line-height:50px; background-color:#006db0; width:100%; color:#fff; font-size:1.2em;}
.detail-title div{ max-width:1200px; width:100%; margin:0 auto; }
.detail-text001{ max-width:1200px; width:100%; margin:0 auto; padding:35px 0;}
.detail-text001 div a{ background-color:#e9e9e9; color:#a1a1a1; text-align:center; display:block; height:40px; line-height:40px; margin-top:25px;}
.detail-text001 div a:hover{ background-color:#006db0; color:#fff;}

.news{ width:100%; overflow:hidden; margin-bottom:25px; padding-bottom:25px; border-bottom:1px dashed #e5e5e5;}
.news-img{ float:left; width:22%; overflow:hidden;}
.news-text{ float:left; width:74%;  margin-left:4%;}
.news-text h4{ display:block; font-size:16px; font-weight:bold;}
.news-text div{ margin:10px 0 5px; color:#6e6e6e; }
.news-text span{ display:block; color:#adadad;}
.news-text span img{ margin-right:5px; vertical-align:middle;}
.news:hover .news-text h4{color:#0085ce;}
.news:hover .news-text div{ color:#6e6e6e;}
.news-img img{  vertical-align:bottom; transition:all ease 0.6s;-moz-transition:all ease 0.6s; -o-transition:all ease 0.6s; -webkit-transition:all ease 0.6s; width:100%;}
.news:hover .news-img img{ transform:scale(1.1);}

.vedio{ width:102%;}
.vedio a{ float:left; display:block; width:23%; margin-right:2%; margin-bottom:2%; position:relative; z-index:2;}
.vedio-img{  }
.vedio-text h4{ float:left;}
.vedio-text h4 b{ font-weight:normal;color:#d0d0d0; display:block;}
.vedio span{ position:absolute; left:50%; top:50%; margin-left:-27px; margin-top:-43px; display:block; z-index:3;}

.vediodetial{ margin:0 auto; text-align:center; /*height:640px;*/}

.recruit{ background-color:#f3f3f3; padding:20px; margin-bottom:35px;}
.server ul li { margin-bottom:15px; border-bottom:1px solid #e5e5e5;}
.server-title { display:block;  height:39px; line-height:39px; cursor:pointer; color:#333; font-weight:bold;}
.server-title a{ float:right; color:#969696; font-size:20px; padding-right:20px; }
.server-text { display:none; padding:20px 0; color:#6e6e6e; line-height:2;}

.contact-img{ float:left; width:40%;}
.contact-text{ float:left; width:56%; margin-left:4%;}

.menber{ max-width:1200px; width:100%; margin:0 auto;}
.menber h4{ max-width:1200px; width:100%; margin:0 auto 45px; position:relative; }
.menber h4 span{ background-color:#0189d2;border-radius:25px; width:130px; height:35px;line-height:35px; text-align:center; margin:0 auto; color:#fff; display:block;position:absolute; left:50%; margin-left:-65px; z-index:3;}
.line{ width:100%; border-top:1px solid #dcdbdc; position:absolute; top:16px; z-index:1;}
.menber .menber-text{ /*width:102%;*/}
.menber .menber-text a{ float:left; margin-left:1%; margin-right:1%; width:31%; margin-top:6%; margin-bottom:2%;} 
.menber .menber-text a img{ width:100%; }
.menber-banner-img{ text-align:center;}

.submenu h3{ display:none;}

.newsdemo{ width:90%; margin:0 auto;}

.footer-bg{ width:100%; border-top:1px solid #eeeeee;}
.footer{ max-width:1200px; width:100%; margin:0 auto; padding:20px 0; overflow:hidden;}
.footer-logo{ float:left;}
.footer-middow{ float:left; margin:0 10%;}
.footer-middow div{ margin-bottom:20px;}
.footer-middow div a{ margin:0 10px;}
.footer-middow span{ display:block;}
.footer-middow img{ vertical-align:middle; margin-right:5px;}
.footer-weixin{ float:left;}
.footer-weixin img{ float:left;}
.footer-weixin span{ float:left; margin-left:10px; margin-top:20px;}
		
.alright{ background-color:#3f3f3f; padding:10px 0;  color:#adadad; text-align:center; overflow:hidden; }
.alright a{ color:#adadad;}
 
@media (max-width: 1170px) {
.call {margin: 1% 10% 0;}
.newsdemo{ width:100%; margin:0 auto;}
}

@media (max-width: 960px) {
.main,.main1,.footer{ margin-left:3%; margin-right:3%;width:94%;}
.tonglang,.menber-banner-img{ margin-left:3%; margin-right:3%; width:94%;}
.link{ margin-left:3%; margin-right:3%;width:94%;}
.alright{ padding-left:3%; padding-right:3%;}
.footer-middow{ margin: 0 5%;}
.logo-top{ margin-left:3%;}
#banner span{ display:none;}
.nav-menu-btn{ display:block;}
.call{ display:none;}
.shop{ display:none;}

.daohang-bg{ width:100%; height:0; border-top:none; border-bottom:none; zoom:1; /*overflow:hidden;*/}
.daohang{ max-width:1200px;width:100%;margin:0 auto;}

.nav-menu{ width:100%; position:relative; z-index:9999; background:rgba(0,0,0,0.8); display:none; }
.nav-menu li{ float:none; position:relative; font-size:16px; width:100%; text-align:center;/*margin:0 50px;*/  line-height:55px; background:none; }
.nav-menu .sub{ display:none !important; width:100%; position:absolute; left:0; top:55px; background:rgba(0,0,0,0.5); z-index:9999;  font-size:14px;}
.nav-menu li a{ display:block; color:#fff;}
.nav-menu li a:hover{ background-color:#0889d0;}

.main-bg{ background:none;}
.bar1{ text-align:center; color:#6e6e6e;}
.bar1 h4{ color:#333; font-size:30px; }
.bar1 h4 span{ color:#0889d0;}
.intro-left,.intro-right{ width:100%; }
.intro-right-top{ margin-bottom:0px; }
.intro-left h3{ text-align:left;}
.intro-left-img{ float:left; width:38%; margin-right:3%;}
.intro-left .intro-left-text{ float:left; width:59%; padding:0;}
.intro-left a{ display:block; margin-top:15px;}
.intro-img{ float:left; width:38%; margin-right:3%;}
.intro-right-top{  margin-top:20px;}
.intro-right-top .intro-text{ float:left; width:59%; padding:0;}

.detail-title div{ padding-left:3%; }
.detail-text001{ margin-left:3%; margin-right:3%; width:94%;}
.detail{ margin-left:3%; margin-right:3%;}
.vedio span{ margin-top:-73px;}
.menber .menber-text{ margin-left:3%; margin-right:3%;}
.menber .menber-text a{ float:left; width:31%; margin-top:6%; margin-bottom:2%;} 
.line{ margin-left:3%; margin-right:3%; width:94%;}

.footer-logo{ display:none;}
.footer-middow{ margin-left:0;}
.footer-middow div a{ margin:0 10px 0 0;}
}
@media (max-width: 760px) {
.info-news-text span{ margin-top:10px;}
.info-news{float:left; width:48%; margin-right:2%; margin-bottom:25px;}
.info-news img{ width:100%;}
.footer{ display:none;}

.intro-product div a{ position:absolute; left:50%; bottom:-110px; margin-left:-71px; margin-top:0; transition:all 0.4s;  }
.intro-product div:hover a{ background:rgba(0,133,206,0.8); position:absolute; left:50%; bottom:50%; margin-left:-55px; margin-bottom:-55px; width:110px; height:110px; z-index:2; color:#fff; border-radius:100px; font-size:18px; text-align:center; padding-top:26px; }
.detail-img{ width:100%;}
.detail-text{ width:100%; margin-top:25px;}
.vedio span{ margin-top:-80px;}
.menber h4 { margin: 0 auto; padding-bottom:35px;}
}
@media (max-width: 560px) {
.logo-top{ width:70%;}	
.nav-menu-btn{ top:15px;}
.main{ margin-top:25px; margin-bottom:0;}
.bar1 h4{ margin-top:0;}

.intro-product div{ width:48%; margin-left:1%; margin-right:1%; }
.intro-product div a{ position:absolute; left:50%; bottom:-142px; margin-left:-71px; margin-top:0; transition:all 0.4s;  }
.intro-product div:hover a{ background:rgba(0,133,206,0.8); position:absolute; left:50%; bottom:50%; margin-left:-71px; margin-bottom:-71px; width:142px; height:142px; z-index:2; color:#fff; border-radius:100px; font-size:22px; text-align:center; padding-top:36px; }
.submenu ul li{ width:100%;}
.submenu-01 ul li{ width:100%;}
.product-list a{ width:48%;}
.about-img { width:100%;text-align: center;}
.about-text{ width:100%; margin-left:0;}
.content{ margin-bottom:25px; overflow:hidden;}

.contact-img{ width:100%;text-align: center;}
.contact-text{ width:100%; margin-left:0;}

.news-text div{ display:none;}
.news-text{ width:56%;}
.news-img{ width:40%;}
.vedio a{ width:48%;}
.vedio span{ margin-top:-53px;}

.submenu h3{ display:block; background-color:#0889d0; color:#fff; font-weight:normal; height:55px; line-height:55px; padding:0 20px; text-align:left;}
.submenu h3 span{ float:right; display:block; transform:rotate(90deg); -webkit-transform:rotate(90deg); font-family:"宋体"; font-size:1.5em; margin-right:25px;}
.submenu ul li span{ display:none;}
.submenu ul li{ border-bottom:1px solid #eeeeee; text-align:left; margin:0; height: 55px; line-height: 55px;padding: 0 20px;}

.submenu .menu { display:none; }
}

@media (max-width: 480px) {
.intro-max h3{ margin-top:10px;}
.intro-left-img{ float:none; width:100%; margin-right:0%;}
.intro-left .intro-left-text{ float:none; width:100%; padding:0;}
.intro-left a{ display:block; margin-top:15px;}
.intro-img{ float:left; width:100%; margin-right:0%;}
.intro-right-top .intro-text{ float:left; width:100%; padding:0;}
.intro-max { margin-bottom: 0px;}
.menber .menber-text a{ width:98%; float:none; text-align:center; margin-top:25px; display:block;}
}

@media (max-width: 375px) {
.info-news{width:100%;}
/*.intro-product div{ width: 100%;margin: 0 auto; float: none; text-align: center; margin-top:25px; }
.intro-product div a{ position:absolute; left:50%; bottom:-142px; margin-left:-71px; margin-top:0; transition:all 0.4s;  }
.intro-product div:hover a{ background:rgba(0,133,206,0.8); position:absolute; left:50%; bottom:50%; margin-left:-71px; margin-bottom:-71px; width:142px; height:142px; z-index:2; color:#fff; border-radius:100px; font-size:22px; text-align:center; padding-top:36px; }*/
/*.product-list a{ width:100%;}*/
.vedio a{ width:100%; text-align:center;}
.vedio h4{ float:none;}

}

#header  { position:fixed; z-index:100; width:100%; background:#fff; }
#header .Hline { width:100%; border-bottom:1px solid #eee; clear:both; }
#header .top { width:100%; max-width:1200px;margin:0 auto; }
#header .top .logo { float:left; margin:10px 0; display:block; width:425px; position:relative; top:-50px; opacity:0; filter:alpha(opacity=0); transition: top 1s; }
#header .top .right { float:right; width:50%; opacity:0; filter:alpha(opacity=0); transition: right 1s; position:relative; right:-200px; }
#header .top .right .store {  float:right; margin-top:10px; margin-right:20px; }
#header .top .right .store p { display:block; margin:0; padding:0; font-size:14px; }
#header .top .right .hotline { margin-top:20px; }
#header .top .right .hotline img { float:left; }
#header .top .right .hotline p { font-size:14px; margin:0; padding:0; margin-left:45px; }
#header .top .right .hotline p a { display:block; color:#db2219; font-weight:bold; font-size:20px; }
#header .top .menu_btn { display:none; /*width:45px;*/ color:#0091dc; height:45px; position:absolute; right:20px; top:50%; margin-top:-20px; font-size:18px; /*background:url(/cn/images/menu-btn.png) center no-repeat; */}
#header .top .menu_btn img{ vertical-align:middle; margin-left:10px;}
#header .nav { width:100%; max-width:1200px;margin:0 auto; position:relative; left:-200px;transition: left 1s; opacity:0; filter:alpha(opacity=0);  }   
#header .nav ul { overflow:visible; transition: height 1s; }
#header .nav>ul>li { display:block; position:relative; float:left; width:14.2%; height:55px; line-height:55px; text-align:center;background:url(/cn/images/menu-line.png) center right no-repeat; }
#header .nav>ul>li a { display:block; width:100%; position:absolute; height:100%; text-decoration:none; color:#000; position:relative; }
#header .nav ul ul { position:absolute; padding:10px 0; top:55px; text-align:center; width:100%; visibility:hidden; overflow:hidden; transition: all 0.25s; background:#000; filter:alpha(opacity=60); background:rgba(0,0,0,0.6)!important;  }
#header .nav ul ul li { transition: height 0.25s; height:0px; overflow:hidden; position:relative; }
#header .nav ul ul li a {  color:#fff; display:block; width:100%; height:40px; line-height:40px; position:absolute; top:50%; margin-top:-20px;  }
#header .nav ul li:hover>ul { visibility:visible; }
#header .nav ul li:hover>ul>li { height:40px; }
.headerbg { height:140px; }

@media (max-width: 960px) {
    #header  { position:relative; z-index:100; }
    #header .top .logo { top:0px; opacity:1; filter:alpha(opacity=100); }    
    #header .top .right { display:none; }
	.store1{ display:block; background:#000; filter:alpha(opacity=60); background:rgba(0,0,0,0.6)!important; text-align: center; color: #fff;padding-top: 25px;}
    #header .nav { display:none; }    
    #header .top .menu_btn { display:block; }
    #header .nav>ul {  background:#000; filter:alpha(opacity=60); background:rgba(0,0,0,0.6)!important; position:absolute; width:100%; }
    #header .nav>ul>li{ width:100%; float:none; }
    #header .nav ul li a { color:#fff; }
    #header .nav ul ul { display:none; }
    .headerbg { display:none; }
}

@media (max-width: 520px) {
    #header .top .logo {  width:auto; float:none; margin-right:80px; }
    #header .top .logo img { width:80%; }
}