* {
padding: 0;
margin: 0;
list-style-type: none;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}

.content {

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
z-index: 2;
border-top: 1px solid #333;
margin-top:35px;
margin-bottom:50px;
overflow: auto;
background: #fff;
text-align: center;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

}
.box {
width: 96%;
margin: 0 auto;
text-align: center;
}
.nav-wrap {
position: absolute;

margin-top:35px;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
background: #333;
}
.nav {
font-size:90%;
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: auto;
width: 180px;
height: auto;
overflow: auto;
background: #333;
color: #fff;
-webkit-overflow-scrolling: touch;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-ms-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
.navi_title{
font-weight: bold;
border-bottom: 1px solid #666;
text-align:left;
text-indent: 10px;
}
.navi_title2{
font-weight: bold;
text-align:left;
text-indent: 10px;
}
.nav li a {
display: block;
border-bottom: 1px solid #666;
padding: 2px;
text-decoration: none;
color: #ccc;
text-align:left;
text-indent: 20px;
}
.nav-left {
left: 0;
z-index: 1;
}
.nav-right {
right: 0;
z-index: 1;
}
.snapjs-left .nav-right, .snapjs-right .nav-left {
display: none;
}
.snapjs-expand-left .nav-left, .snapjs-expand-right .nav-right {
width: 100%;
}
.snapjs-right .nav-left {
display: block;
right: 0;
left: auto;
}