body,
html {
    background: var(--bg);
}

#main {
    margin-top: 1px;
}

.content {
    padding   : 0.2rem 0.5rem;
    background: #FFF;

}

.text-img {
    width: 300px;
}

.text-img img {
    padding-top: 5px;
    width      : 100%;
}

.text-img .title {
    padding: 0.1rem 0px;
}

.text-img .title div {
    font-size  : 40px;
    font-weight: bold;
    color      : #000;
    text-align : left;
}

.category {
    position     : relative;
    border-bottom: 1px solid #efefef;
    margin-bottom: 0.25rem;
}

.category .tab {
    background-position: 0px 38px;
    background-repeat  : no-repeat;
    display            : flex;
    align-items        : center;

}

.category .tab span {
    display      : inline-block;
    padding      : 8px 25px 6px 25px;
    margin-right : 20px;
    border       : 1px solid #efefef;
    font-size    : 16px;
    color        : #666;
    border-radius: 25px;
    cursor       : pointer;
    margin-bottom: 10px;
    white-space  : nowrap;
}

.category .tab span.active {
    color           : #FFF;
    background-image: url(../icon/btn-bg.png);
    background-size : 100% 100%;
    border          : none;
}


.list {
    min-height: 500px;
}

.album {
    background   : var(--bg);
    border-radius: 10px;
    overflow     : hidden;
    margin-bottom: 25px;
}

.album .album-cover {
    height: 225px;

}

.album .album-cover img {
    width     : 100%;
    height    : 100%;
    display   : block;
    object-fit: cover;
}

.album .album-cover {}

.album-info {
    padding: 0.1rem 0.15rem;
}

.album-info .name {
    font-size  : 0.16rem;
    font-weight: bold;
    color      : #000;
}

.album:hover .name {
    color: var(--theme);
}

.album-info .desc {
    font-size: 0.14rem;
    color    : #666;
}



.view-img {
    width     : 900px;
    position  : fixed;
    z-index   : 200;
    top       : 20%;
    left      : 0px;
    right     : 0px;
    margin    : auto;
    box-shadow: 0px 0px 35px #283442;
    background: #ffffff;
    padding   : 10px;
    color     : #000;
    font-size : 18px;
}

.view-img video {
    display: block
}

.view-img img {
    display      : block;
    min-height   : 100px;
    width        : 100%;
    margin-bottom: 10px;
}

.view-img .view-close {
    border-radius: 100%;
    height       : 20px;
    width        : 20px;
    background   : #d90d18;
    color        : #fff;
    position     : absolute;
    right        : 15px;
    top          : 15px;
    font-size    : 23px;
    text-align   : center;
    line-height  : 20px;
    transform    : rotate(45deg);
    z-index      : 2;
    cursor       : pointer;
}

.loading {
    padding   : 10px;
    text-align: center;
}

.loadingAnimation {
    animation: rotate 1s linear infinite;
    display  : inline-block;
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(90deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    75% {
        -webkit-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}