
.btn-nav { position:absolute;top:15px; right:10px;
  background: transparent;
  border: none;

  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  z-index: 99999;
}

.btn-nav:focus {
  outline: 0;
}

.icon-bar {
  display: block;
  margin: 4px 0;
  width: 28px;
  height: 3px;
  background-color: #ccc;
}

.btn-nav:hover .icon-bar {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  background-color: #ccc;
}

.nav-content {
  position: fixed;
  top: -100%;
  bottom: 0;
  left: 0;
  right: 0;
  background:rgba(0,0,0,0.5);
  display: block;
  height: 100%;
  z-index: 9;
}

.nav-list {
  list-style: none;
  padding: 0;
  position: relative;
  top: 50px;
}

.item-anchor:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  left: 0;
  bottom: 0;
  z-index: 9;
  background: transparent;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.item-anchor {
  color: #fff !important;
  font-size: 18px;
  text-transform: uppercase;
  position: relative;
  text-decoration: none;
  padding: 10px;
  font-family:' ';
}

.item-anchor:hover,
.item-anchor:focus {
  color: #FCA311;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.item-anchor:hover:after,
.item-anchor:focus:after{
  width: 100%;
  background: #FCA311;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.nav-item {
  margin: 15px auto;
  text-align: center;
}

.animated {
  display: block;
  margin: 0 auto;
}

.animated:hover .icon-bar,
.animated:focus .icon-bar{
  background-color: #fff;
}

.animated:focus {
  cursor: pointer;
  z-index: 9999;
}

.middle {
  margin: 0 auto;
}

.icon-bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
  z-index: 999999;
}

.animated .icon-bar {
  z-index: 999999;
  background-color: #fff;
}

.animated .top {
  -webkit-transform: translateY(10px) rotateZ(45deg);
  -moz-transform: translateY(10px) rotateZ(45deg);
  -ms-transform: translateY(10px) rotateZ(45deg);
  -o-transform: translateY(10px) rotateZ(45deg);
  transform: translateY(10px) rotateZ(45deg);
}

.animated .bottom {
  -webkit-transform: translateY(-11px) rotateZ(-45deg);
  -moz-transform: translateY(-11px) rotateZ(-45deg);
  -ms-transform: translateY(-11px) rotateZ(-45deg);
  -o-transform: translateY(-11px) rotateZ(-45deg);
  transform: translateY(-11px) rotateZ(-45deg);
}

.animated .middle {
  width: 0;
}

@keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

@-webkit-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

@-moz-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

@-o-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

.showNav {
  -webkit-animation: showNav 1s ease forwards;
  -moz-animation: showNav 1s ease forwards;
  -o-animation: showNav 1s ease forwards;
  animation: showNav 1s ease forwards;
}

@keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

@-webkit-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

@-moz-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

@-o-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

.hideNav {
  -webkit-animation: hideNav 1s ease forwards;
  -moz-animation: hideNav 1s ease forwards;
  -o-animation: hideNav 1s ease forwards;
  animation: hideNav 1s ease forwards;
}

.hidden {
  display: none;
}



.clear{ margin:0; padding:0; clear:both; font-size:0;}


#head{ height:177px; background:url(../images/navBg.jpg) center bottom repeat-x; position:relative; z-index:99;}
#head .top{ height:130px;}
#head .top .qiehuan{ margin-right:30px; text-align:right; font-size:14px; margin-top:10px;}
#head .top .qiehuan a{ font-size:14px;}
#head .top .logo{ float:left;}
#head .top .tel{ float:left; margin-left:7%; width:12%; margin-top:20px;}
#head .top .tel span{ display:block; width:80%; padding-left:20%; background:url(../images/tel.png) left center no-repeat; height:30px; line-height:30px; font-size:18px; color:#d14f4f;}
#head .top .tel strong{ display:block; width:100%; height:30px; line-height:30px; font-size:20px; color:#d14f4f;}
#head .top .ewm{ float:left; width:68px; margin-left:7%; margin-top:12px;}
#head .top .ewm img{ width:100%;}
.search{ background:url(../images/search.png) no-repeat; width:20%; height:32px; line-height:32px; float:right; overflow:hidden; position:relative; margin-top:-62px; border:#ccc solid 1px;}
.search .input_text{ height:32px; line-height:32px; background:none; width:78%; position:absolute; left:0px; top:0px; padding:0 1%; border:none;}
.search .input_button{ position:absolute; right:0px; top:0px; background:url(../images/sou.jpg) #eee center no-repeat; width:19.5%; height:32px; cursor:pointer; border:none;}


.menu{height:47px;line-height:47px;}
.menu ul li{ float:left; position:relative; width:10%;}
.menu ul li dl{ background:#fff; width:100%; position:absolute; left:0px; top:47px; box-shadow:2px 2px 5px rgba(0,0,0,0.2); padding:10px 0;display:none; }
.menu ul li dl dd{ line-height:32px; margin:0 10px; }
.menu ul li dl dd a{ font-size:14px; color:#666; font-weight:normal; display:inline; padding:0; text-align:center;}
.menu ul li dl dd a:hover{ color:#c00;}
.menu a{ font-size:16px;color:#fff; text-decoration:none; display:block;text-align:center;}
.menu a:hover{color:#fff;}
a.menu_hover{ background:#c00;color:#fff;}


.header{ display:none;}

@media screen and (max-width:480px) {
	
#head{ display:none;}
.header{ display:block; width:94%; height:60px; margin:0 auto; position:relative; z-index:999;}
.header .logo{ float:left; width:72%; margin-top:10px; position:relative; z-index:1;}
.header .logo img{ width:100%;}
	
	
	
	
	}
