main {
    display: flex;
    flex: 1 0 auto;
    max-width: 100%;
    background: var(--bg-2)!important;
    transition: .2s cubic-bezier(.4,0,.2,1);
}

main > .main-wrap {
    flex: 1 1 auto;
    max-width: 100%;
    position: relative;
}

.btn-filter {
    display: none;
}
.btn-filter.filter-active {
    display: inline-block;
}
.btn-follow-load-more {
    float: right;
    text-decoration: none;
    color: var(--grey);
    display: none;
    font-size: 13px;
}
.btn-follow-load-more:hover, .btn-load-more-home:hover {
    color: var(--primary);
}

.btn-load-more-home {
    float: right;
    text-decoration: none;
    color: var(--grey);
    margin: 0 5px 0 10px;
}

.next-prev-recent {
    display: none;
}

main > .main-wrap .chapter-state {
    color: red;
    font-style: italic;
}
main > .main-wrap .icon-limit {
    fill: #ff0000db;
    color: #ff0000db;
    caret-color: #ff0000db;
    height: 14px !important;
    width: 24px;
    top: 3px;
    position: relative;
}
main > .main-wrap .side-bar .rank .rank-block {
    border-color: #1e1e1e;
    box-shadow: 0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)!important;
    border-width: thin;
    display: block;
    max-width: 100%;
    outline: none;
    text-decoration: none;
    transition-property: box-shadow,opacity;
    word-wrap: break-word;
    position: relative;
    white-space: normal;
    color: #fff;
}
main > .main-wrap .side-bar .rank .rank-block:hover {
    background-color: #0808082e;
}
main > .main-wrap .side-bar .rank > .rank-block > .rank-items > .rank-image {
    height: 220px;
}

main > .main-wrap .side-bar .rank > .rank-block > .rank-items > .rank-image .image,
main > .main-wrap .side-bar .rank .rank-block .rank-items .rank-image .image {
    background-position: center top;
    background-size: cover;
    height: 100%;
}

main > .main-wrap .side-bar .rank > .rank-block > .rank-items > .title-favorite {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(153,0,0,.75);
    border-radius: 0.5rem;
    z-index: 1;
    margin: 1rem;
}
main > .main-wrap .side-bar .rank > .rank-block > .rank-items > .title-favorite > .box {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: pulse-data-v-9277804c 2.5s infinite;
    animation: pulse-data-v-9277804c 2.5s infinite;
    background-color: inherit;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 1;
}
main > .main-wrap .side-bar .rank > .rank-block > .rank-items > .title-favorite > .content-box {
    font-size: .85rem;
    font-weight: 700;
    padding: 0.5rem;
    z-index: 2;
    position: relative;
}

main > .main-wrap .side-bar .rank > .rank-block > .rank-label {
    position: relative;
}

main > .main-wrap .side-bar .rank > .rank-block > .rank-label::before {
    content: "";
    position: absolute;
    width: 100%;
    background-color: #b9121287;
    height: 100%;
    z-index: -1;
    opacity: .3;
    border-radius: 5px;
    left: 0;
    top: 12px;
}

main > .main-wrap .comic-list .lds-loading,
main > .main-wrap .recommend-section .lds-loading,
main > .main-wrap .new-section .lds-loading{
    display: none;
}

main > .main-wrap .comic-list .cover-items::before,
main > .main-wrap .recommend-section .cover-items::before,
main > .main-wrap .new-section .cover-items::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000b3;
    z-index: 999;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
}

main > .main-wrap .comic-list .cover-items .lds-loading,
main > .main-wrap .recommend-section .cover-items .lds-loading,
main > .main-wrap .new-section .cover-items .lds-loading{
    display: inline-block;
    position: absolute !important;
    top: 0;
    margin: auto;
    z-index: 1000;
    text-align: center;
    left: 47%;
}

main > .main-wrap .comic-list > .topic > .title,
main > .main-wrap .topic .title-line {
    background: #121212;
    color: #fff;
}

main > .main-wrap .comic-list > .topic > .items-title {
    flex: 1;
}


main > .main-wrap .comic-list > .items-wrap .items .card-block {
    border-width: thin;
    display: block;
    max-width: 100%;
    outline: none;
    text-decoration: none;
    transition-property: box-shadow,opacity;
    word-wrap: break-word;
    position: relative;
    white-space: normal;
}

main > .main-wrap .comic-list > .items-wrap .items .card-flat {
    box-shadow: 0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)!important;
}

main > .main-wrap .comic-list > .items-wrap .items .card-block .card-image {
    z-index: 0;
    height: 250px;
    border-radius: 5px;
}

main > .main-wrap .comic-list > .items-wrap .items .card-block .card-image::before {
    position: absolute;
    top: 0;
    left: -90%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

main > .main-wrap .comic-list > .items-wrap .items .card-block .card-image:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%
    }
}

@keyframes shine {
    100% {
        left: 125%
    }
}
main > .main-wrap .comic-list > .items-wrap .items .card-block .card-image .v-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

main > .main-wrap .comic-list > .items-wrap .items .card .info-comic {
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 100%;
}

main > .main-wrap .comic-list > .items-wrap .items .card .info-comic .item-info {
    height: inherit;
    line-height: 20px;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    opacity: .5;
    font-family: sans-serif !important;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-block .info-comic .item-info {
    display: inline-flex;
    width: inherit;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info {
    width: 100%;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .info-comic .item-info {
    display: none;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-name {
    text-decoration: none;
    color: #81818e;
    cursor: pointer;
    font-size: 13px;
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 32px;
    box-sizing: border-box;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-name > .name {
    color: #ffffffc9;
    overflow: hidden;
    line-height: 17px;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-name:hover > .name {
    color: var(--primary);
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline {
    padding: 0 8px 8px 8px;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline {
    padding-top: 0!important;
    position: relative;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline::before {
    background: hsla(0,0%,100%,.12);
    left: 14px!important;
    width: 1px;
    border-radius: 50%;
    bottom: 0;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item {
    align-items: center;
    color: #fff;
    display: flex;
    flex: 1 0 auto;
    justify-content: inherit;
    line-height: normal;
    position: relative;
    transition: inherit;
    transition-property: opacity;
    cursor: pointer;
    opacity: .62;
    text-decoration: none;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item:hover {
    opacity: 1;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .number,
main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .time {
    font-size: .875rem!important;
    line-height: 1.25rem;
    letter-spacing: .0178571429em !important;
    font-weight: 400;
    font-family: Roboto,sans-serif !important;
    text-align: right;

}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .time {
    color: hsla(0,0%,100%,.5) !important;
    font-size: 12px !important;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .number  .long-tag,
main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .number  .short-tag {
    display: none;
}
main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-divider {
    position: relative;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-info {
    width: 100%;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-divider .timeline-item-dot {
    background: #1e1e1e;
    height: 24px;
    left: calc(50% - 12px);
    width: 24px;
    z-index: 2;
    border-radius: 50%;
    box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-divider .timeline-item-dot .timeline-item-dot-inner {

    height: 18px;
    margin: 3px;
    width: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-divider .timeline-item-dot .timeline-item-dot-inner.new {
    background-color: var(--primary-darken);
    border-color: var(--primary-darken);
}
main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline a:visited,
main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline .sticker-read {
    color: gray;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline a:visited svg path:nth-of-type(1),
.sticker-read svg path:nth-of-type(1)
{
    color: #1e1e1e;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline a:visited svg path:nth-of-type(2),
.sticker-read svg path:nth-of-type(2)
{
    color: #ffffff !important;
}

main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline a:visited .new,
.sticker-read .new {
    background-color: #1e1e1e !important;
}

.main > .main-wrap .new-comic .comic {
    position: relative;
}
.main > .main-wrap .new-comic .comic .block-comic .block-wrap {
    height: 168px;
    background: var(--bg-1-variant) !important;
    border-radius: 4px;
}

.main > .main-wrap .new-comic .comic .block-comic .block-wrap .image {
    width: 120px;
    border-radius: 4px;
    height: 100%;
}

.main > .main-wrap .new-comic .comic .block-comic .info2 {
    font-family: sans-serif !important;
    font-size: 12px;
}
.main > .main-wrap .new-comic .comic .block-comic .info {
    width: calc(100% - 120px);
    font-family: sans-serif !important;
    font-size: 12px;
    position: relative;
}

@media(max-width: 500px) {
    .col-mb {
        flex: 0 0 49% !important;
        max-width: 49% !important;
    }

    /*.col-mb .card-block,*/
    /*.col-mb .card-block .card-image {*/
    /*    height: 168px !important;*/
    /*    width: 120px;*/
    /*}*/

    /*main > .main-wrap .comic-list > .items-wrap .items .card {*/
    /*    flex-direction: row !important;*/
    /*}*/

    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-info {*/
    /*    flex-direction: column !important;*/
    /*    padding-top: 4px !important;*/
    /*    position: relative;*/
    /*}*/

    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters {*/
    /*    margin-top: 12px;*/
    /*}*/

    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .number > .long-tag {*/
    /*    display: initial;*/
    /*}*/
    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-divider {*/
    /*    display: none;*/
    /*}*/
    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-block .info-comic .item-info,*/
    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-block .info-comic {*/
    /*    display: none;*/
    /*}*/

    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-info .info-comic .item-info {*/
    /*    display: inline-flex;*/
    /*    width: 100%;*/
    /*}*/

    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .timeline-info {*/
    /*    display: flex;*/
    /*}*/

    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline::before {*/
    /*    display: none;*/
    /*}*/
}

@media(max-width: 320px) {
    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .number .long-tag {*/
    /*    display: none !important;*/
    /*}*/
    /*main > .main-wrap .comic-list > .items-wrap .items .card .card-info .card-chapters .card-timeline .timeline > .timeline-item .number .short-tag {*/
    /*    display: initial !important;*/
    /*}*/
}

main > .main-wrap .main-banner-comic {
    max-height: 320px;
    background: #fff;
    overflow: hidden;
}

main > .main-wrap .main-banner-comic .background-banner .each-fade {
    width: 100%;
    height: 320px;
    overflow: hidden;
}

main > .main-wrap .main-banner-comic > #slideshow ~ a {
    display: none;
}

main > .main-wrap .main-banner-comic > #fssList {
    margin: auto;
    display: flex;
    width: 200px;
    height: 30px;
    justify-content: center;
    position: relative;
    top: -25px;
    list-style: none;
}

main > .main-wrap .main-banner-comic > #fssList > li {
    display: inline-block;
    position: relative;
    width: 7px;
    height: 7px;
    padding: 5px;
    margin: 0;
}

main > .main-wrap .main-banner-comic > #fssList > li.fssActive a::before {
    background: #fff;
}

main > .main-wrap .main-banner-comic > #fssList > li a {
    border: 0;
    opacity: .25;
    cursor: pointer;
    background: transparent;
    color: transparent;
}

main > .main-wrap .main-banner-comic > #fssList > li a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    content: '';
    background: #000;
    text-align: center;
}
main > .main-wrap .main-banner-comic .background-banner img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

@media only screen and (max-width: 500px) {
    main > .main-wrap .main-banner-comic {
        height: 250px;
        margin-bottom: 5px;
    }

    main > .main-wrap .main-banner-comic .background-banner .each-fade {
        height: 250px;
    }

    main > .main-wrap .main-banner-comic #slideshow {
        height: 250px !important;
    }

    main > .main-wrap .main-banner-comic #slideshow .background-banner {
        height: 100% !important;
    }
}

.main .main-wrap .follow-recent-section .topic svg {
    vertical-align: sub;
    transform: rotate(360deg);
    transition: transform .2s linear;
}

.main .main-wrap .follow-recent-section.hide-items .topic svg {
    transform: rotate(270deg);
    transition: transform .2s linear;
}

.main .main-wrap .follow-recent-section.hide-items .box-follow {
    display: none !important;
}

.main .main-wrap .follow-recent-section {
    display: inline-block;
    width: 100%;
}
.main .main-wrap .follow-recent-section.hide-box {
    display: none !important;
}
.main .main-wrap .follow-recent-section .box-follow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.main .main-wrap .follow-recent-section .box-follow .box-item {
    cursor: pointer;
}

.main .main-wrap .follow-recent-section .box-follow .box-item:hover {
    box-shadow: 1px 1px 20px 1px grey;
}

.main .main-wrap .follow-recent-section .box-follow .box-item .box-image {
    width: 90px;
    height: 90px;
}
.main .main-wrap .follow-recent-section .box-follow .box-item .box-image img {
    width: 100%;
    height: 100%;
}
.main .main-wrap .follow-recent-section .box-follow .box-item .box-content {
    width: 100%;
}

.main .main-wrap .follow-recent-section .box-follow .box-item .box-content .box-title {
    height: 53px;
    margin-top: 3px;
    padding-left: 6px;
    padding-right: 4px;
    color: #ffffff;
    font-size: 16px;
    padding-bottom: 3px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.main .main-wrap .follow-recent-section .box-follow .box-item .box-content .box-title:hover {
    color: var(--primary);
}

.main .main-wrap .follow-recent-section .box-follow .box-item .box-content .box-chapter {
    height: 20px;
    display: block;
    padding-left: 8px;
    margin-top: 10px;
    text-decoration: none;
    font-weight: 600;
    color: #6b6b6b;
}

.main .main-wrap .follow-recent-section .box-follow .box-item .box-content .box-chapter:hover {
    color: var(--primary);
}