@charset "UTF-8";
/* 视听中心 */

.secondary > .video-content {
    padding-top: 3.5rem;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("/assets/img/secondary-bg.png");
}
.secondary > .video-content > .content-title {
    height: 1.2rem;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 68% auto;
    background-image: url("/assets/img/video-content-title.png");
}

.secondary > .video-content > .video-content {
    width: 100%;
}

.secondary > .video-content > .video-content > .row {
    width: 100%;
}

.secondary > .video-content > .video-content > .row > .title {
    width: 100%;
    background: linear-gradient(transparent 0%, transparent 99%, #4e555b 99%, #4e555b 100%);
}

.secondary > .video-content > .video-content > .row > .title > ul > li {
    margin: 0 0.6rem;
    height: 0.4rem;
    color: white;
    line-height: 0.4rem;
    letter-spacing: 0.04rem;
    cursor: pointer;
}

.secondary > .video-content > .video-content > .row > .title > ul > li.active {
    color: #bd0005;
}

.secondary > .video-content > .video-content > .row > .title > ul > li > div {
    width: 0.8rem;
    text-align: center;
    transition: color 0.3s, background 0.3s;
}

.secondary > .video-content > .video-content > .row > .title > ul > li.active > div {
    background: linear-gradient(transparent 0%, transparent 94%, #bd0005 94%, #bd0005 100%);
}

.secondary > .video-content > .video-content > .row > .title > ul > li > div:hover {
    color: #bd0005;
    background: linear-gradient(transparent 0%, transparent 94%, #bd0005 94%, #bd0005 100%);
}
.secondary > .video-content > .video-content > .row > .content{
    width: 12rem;
    min-height: 6rem;
    margin: 0.4rem auto 0;
}
.secondary > .video-content > .video-content > .row > .content > div{
    width: 100%;
}
.secondary > .video-content > .video-content > .row > .content > div > div{
    width: 2.6rem;
    height: 1.46rem;
    margin: 0 0.2rem 0.2rem 0.2rem;
}
.secondary > .video-content > .video-content > .row > .content > div > div > a{
    width: 2.6rem;
    height: 1.46rem;
    position: relative;
}
.secondary > .video-content > .video-content > .row > .content > div > div > a > .video-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 2.6rem;
    height: 1.46rem;
    background: url("/assets/img/video-bg.png")no-repeat center center / 100%;
    transition: background 0.3s;
}
.secondary > .video-content > .video-content > .row > .content > div > div > a > .video-bg:hover{
    background: url("/assets/img/video-bg-active.png")no-repeat center center / 100%;
}
.secondary > .video-content > .video-content > .row > .content > div > div > a > .video-bg > .video-btn{
    width: 2.6rem;
    height: 1.46rem;
    background: url("/assets/img/music-content-btn-play.png")no-repeat center center / 20%;
}
.secondary > .video-content > .video-content > .row > .content > div > div > a > img{
    width: 2.6rem;
    height: 1.46rem;
}