.nav-list ul{
    padding-top: 12px;
}
.nav-list ul li{
    padding-bottom: 24px;
}
.nav-list ul li.last{
    padding-bottom: 12px;
}
.nav-list ul li a{
    display: block;
    height: 56px;
    text-align: left;
    line-height: 56px;
    color: #777777;
    font-size: 14px;
    text-indent: 35px;
}
.nav-list ul li a.active{
    height: 80px;
    line-height: 80px;
    margin: -12px 0;
    color: #ffffff;
    background: url("/pkg/img/my/nav/listhoverbg.png") no-repeat;
}
.nav-list ul li a:hover{
    border-left: 5px solid #FF836B;
    color: #30313a;
    animation: fade-in;
    animation-duration: .4s;
    -webkit-animation:fade-in .4s;
}
.nav-list ul li a.active:hover{
    border-left: none;
    text-indent: 35px;
}

.nav-list ul li a i{
    position: relative;
    top: 5px;
    display: inline-block;
    width: 32px;
    height: 27px;
    background: url(/pkg/img/my/nav/asset.png?v=1517994612) no-repeat 0 -84px;
}
.nav-list ul li a.personal-icon i{
    background-position: 1px -85px;
}
.nav-list ul li a.personal-icon:hover i{
    background-position: 1px 3px;
}
.nav-list ul li a.personal-icon.active i{
    background-position: 1px -40px;
}
.nav-list ul li a.task-icon i{
    background-position: -89px -84px;
}
.nav-list ul li a.task-icon:hover i{
    background-position: -89px 4px;
}
.nav-list ul li a.task-icon.active i{
    background-position: -89px -40px;
}
.nav-list ul li a.zp-icon i{
    background-position: -45px -84px;
}
.nav-list ul li a.zp-icon:hover i{
    background-position: -45px 4px;
}
.nav-list ul li a.zp-icon.active i{
    background-position: -45px -40px;
}
.nav-list ul li a.da-icon i{
    background-position: -134px -83px;
}
.nav-list ul li a.da-icon:hover i{
    background-position: -134px 4px;
}
.nav-list ul li a.da-icon.active i{
    background-position: -134px -40px;
}
.nav-list ul li a.red-icon i{
    background-position: -266px -83px;
}
.nav-list ul li a.red-icon:hover i{
    background-position: -266px 4px;
}
.nav-list ul li a.red-icon.active i{
    background-position: -266px -40px;
}
.nav-list ul li a.account-icon i{
    background-position: -177px -84px;
}
.nav-list ul li a.account-icon:hover i{
    background-position: -177px 4px;
}
.nav-list ul li a.account-icon.active i{
    background-position: -177px -40px;
}
.nav-list ul li a.prestore-icon i{
    background-position: -309px -83px;
}
.nav-list ul li a.prestore-icon:hover i{
    background-position: -309px 4px;
}
.nav-list ul li a.prestore-icon.active i{
    background-position: -309px -40px;
}
.nav-list ul li a.level-icon i{
    background-position: -348px -83px;
}
.nav-list ul li a.level-icon:hover i{
    background-position: -348px 4px;
}
.nav-list ul li a.level-icon.active i{
    background-position: -348px -40px;
}
.nav-list ul li a.account-icon.active:hover,
.nav-list ul li a.zp-icon.active:hover,
.nav-list ul li a.task-icon.active:hover,
.nav-list ul li a.personal-icon.active:hover,
.nav-list ul li a.prestore-icon.active:hover,
.nav-list ul li a.level-icon.active:hover
{
    color: #ffffff;
}
@keyframes fade-in {  
    0% {border-width: 0;} 
    20% {border-width: 1;} 
    100% {border-width: 5;} 
}  
@-webkit-keyframes fade-in { 
    0% {border-width: 0;} 
    20% {border-width: 1;} 
    100% {border-width: 5;} 
}