#nav{
  width: 320px;
  height: 95%;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: -320px;
  transition-duration:0.6s;
  transition-timing-function:ease-in-out;
}
#nav.active{
  left: 0px;
}
#nav ul{
  display: block;
}
#nav li{
  width: 50%;
  float: left;
  height: 3rem;
  text-align: center;
  border-bottom: 1px solid #999;
  box-sizing: border-box;
  display: table;
}
#nav .nav-body{
  display: block;
  position: absolute;
  width: 320px;
  height: 95%;
  background-color: #333333;
  font-size: 0.8rem;
  color: white;
  z-index: 998;
  overflow: scroll;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
#nav .nav-wrap{
  position: absolute;
  display: block;
  top:71.19px;
  z-index: 999;
  height: 90%;
  display: block;
  overflow: hidden;
}
#nav .nav-wrap.sp{
  width: 320px;
}
#nav .nav-wrap.pc{
  width: 303px;
}

#nav a{
  color: white;
  text-decoration: none;
  /*line-height: 1.6rem;*/
}
#nav li a{
width: 100%;
height: 100%;
vertical-align: middle;
display: table-cell;
}
#nav li:nth-child(odd) {
  border-right: 1px solid #999;
  box-sizing: border-box;
}
#nav .nav-title{
  height:2rem;
  line-height: 2rem;
  vertical-align: middle;
  text-align: center;
  background-color: #222222;
  display: block;
  border-bottom: 1px solid #999;
}
.nav-small{
  display: block;
  font-size: 8px;
  margin-top: -4px;
  line-height: 8px;
}
/*!------------------------------------*\
overlay
\*!------------------------------------*/
.nav-overlay {
position: fixed;
z-index: 998;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
/*!------------------------------------*\
fixed body
\*!------------------------------------*/
/*body.active,*/html.active{
overflow: hidden!important;
height:100%!important;
}
/*!------------------------------------*\
nav-btn
\*!------------------------------------*/
.nav-btn{
width: 2rem;
padding:1rem 1rem 0.2rem 1rem;
position: fixed;
border: none;
top: 0;
left:0;
font-size: 2rem;
line-height: 2rem;
color: #666666;
background-color: #333333;
display: block;
}
.nav-icon {
position: relative;
display: block;
margin-top: 10px;
}
.nav-icon,
.nav-icon:before,
.nav-icon:after {
width: 100%;
height: 2px;
-webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #fff;
}
.nav-icon:before,
.nav-icon:after {
position: absolute;
top: -10px;
left: 0;
content: ' ';
}
.nav-icon:after {
top: 10px;
}
.active .nav-icon {
background-color: #333333;
}
.active .nav-icon:before,
.active .nav-icon:after {
top: 0;
}
.active .nav-icon:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.active .nav-icon:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-name{
position: relative;
font-size: 11px;
color:#fff;
}