.aside {
  position: relative;
  float: left;
}

.aside dl {
    width: 234px;
    margin: 0 auto;
}

.aside dt {
    margin-bottom: 24px;
}

.aside dd {
    width: 100%;
}

.aside .category-list {
    width: 191px;
    margin: 0 auto;
    z-index: 3;
}

.aside .category-list li {
    float: left;
    width: 88px;
    height: 20px;
    margin-bottom: 28px;
    text-align: center;
}

.category-list li a{
    display: inline-block;
    height: 21px;
    background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(255,242,80,1) 50%);
    background-position: 0 0;
    background-size: 200% auto;
}

.aside dd:nth-child(2) .category-list li:nth-child(1) a {
    background-position: -100% 0;
}

.aside ul li:nth-child(2n-1) {
    margin-right: 15px;
}

.main {
    width: 834px;
    height: 780px;
    padding-left: 36px;
    margin-bottom: 70px;
}

.character-detail {
    position: relative;
}

.character-detail li {
    position: absolute;
    display: none;
    width: 834px;
    height: 780px;
}

.character-detail li:nth-child(1) {
    display: block;
}