* {
    padding: 0;
    margin: 0;
    outline: none;
}
#bodyer {
    width: 100%;
    height:100%;
}
#righthead {
width: 50px;
height: 50px;
right: 18px;
position: absolute;
transition: 0.5s;
cursor: pointer;
position:fixed;
top:0;
}

#righthead i {
width: 30px;
height: 2px;
left: 0;
right: 0;
margin: 24px auto;
position: absolute;
background: #777;
}

#righthead i:before {
width: 20px;
height: 2px;
top: -8px;
right: 0;
position: absolute;
background: #777;
content: '';
}

#righthead i:after {
width: 20px;
height: 2px;
left: 0;
position: absolute;
background: #777;
content: '';
bottom: -8px;
}

#righthead.on {
right: 380px;
background: blue;
border-radius: 25px;
box-shadow: 0 6px 8px rgba(36, 159, 253, .3);
}

#righthead.on i {
width: 20px;
background: #fff;
}

#righthead.on i:before {
width: 14px;
right: -1px;
left: auto;
top: -5px;
transform: rotate(45deg);
background: #fff;
}

#righthead.on i:after {
width: 14px;
right: -1px;
left: auto;
bottom: -5px;
transform: rotate(-45deg);
background: #fff;
}

.headuser a{
color:#fff;
}

.headmenu {
width: 337px;
height: 100%;
right: 0px;
top: 0px;
padding: 0 20px;
z-index: 2000;
overflow: hidden;
overflow-y: auto;
background: #4B0082;
transition: 0.3s all linear;
position:fixed;
}

.headmenu.closed {
right: -380px;
}

.headmenu ul {
padding: 0 0 20px;
list-style: none;
}

.headmenu ul li {
width: 80px;
line-height: 30px;
margin: 5px;
float: left;
}

.headmenu ul li a {
text-decoration: none;
color: #fff;
width: 100%;
border-radius: 5px;
transition: 0.2s all linear;
display: block;
background: #483D8B;
text-align: center;
font-size: 12px;
}

.headmenu ul li:hover a {
color: #fff;
background-color: #29f;
background-image: linear-gradient(135deg, rgba(35, 153, 255) 0%, rgba(84, 175, 253) 100%);
box-shadow: 0 3px 3px rgba(0, 40, 70, .3);
}

.headmenu ul li.headtitle {
width: 100%;
color: #fff;
font-size: 16px;
font-weight: bold;
}
.headuser{
margin-top:10px;
}
.headuser a{
color:#DAA520;
text-decoration: none;
}
.headdbsx{
padding:6px;
background-color:#8F999F;
border-radius:7px;
}
.headdbsx a{
color:#BDEF0A;
text-decoration: none;
}

@media (max-width: 640px) {
#righthead.on {
right: 270px;
}
.headmenu {
width: 227px;
}
.headmenu ul {
width: 220px;
}
#righthead {
top: 5px;
}
}