.mp-layer {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 30%;
max-width: 250px;
min-width: 130px;
background-color: #191a1d;
box-shadow: inset 0 0 20px #000000;
font-family: Verdana, arial, sans-serif;
font-size: 14px;
overflow: hidden;
}
.mp-layer h1 {
font-size: 16px;
color: #8d8d8d;
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #373737;
background-color: #121212;
margin: 0;
padding: 0;
text-indent: 30px;
background-image: url("../img/menuPanda_menuP.png");
background-position: 95% center;
background-repeat: no-repeat;
}
.mp-layerlink {
background-image: url("../img/menuPanda_arrow.png");
background-repeat: no-repeat;
background-position: 95% center;
}
 @media all and (max-width: 1024px) {
.mp-layer h1 {
background-image: none;
}
.mp-layer {
font-size: +20px;
}
}
.mp-layer ul {
margin: 0;
padding: 0;
}
.mp-layer li {
list-style: none;
display: block;
width: 100%;
height: 35px;
line-height: 35px;
text-indent: 30px;
border-bottom: solid 1px #3d3d3d;
transition: all 0.5s ease;
}
.mp-layer li:hover {
text-indent: 50px;
color: 000;
}
.mp-layer a {
color: #727272;
text-decoration: none;
transition: all 0.5s ease;
}
.mp-layer a:hover {
color: #8b8b8b;
}
.mp-wrapper {
position: absolute;
overflow: scroll;
top: 0px;
bottom: 0px;
left: 0px;
width: 100%;
}
.mp-buttom {
padding: 30px;
}