@charset "UTF-8";

/* 视听中心 */
.main > .main-bg > .main-content > .main-content-right > .content-right-title > .right-title{
    background-image: url("/assets/img/video-center-title.png");
}

.main> .main-bg > .main-content > .main-content-right > .row {
    padding-top: 2rem;
    display: flex;
    width: 100%;
    margin: 0 auto;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content {
    margin: 0 auto;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content > ul {
    display: flex;
    width: 45.04rem;
    margin: 0 auto;
    list-style: none;
    padding-bottom: 3rem;
    justify-content: space-between;
    padding-left: 0;
    border: 0;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content > ul > li > button {
    display: inline;
    width: 100%;
    flex-grow: 1;
    border: 0;
    background-color: transparent;
    text-align: center;
    height: 2.2rem;
    font-weight: bold;
    color: #fdecb8;
    cursor: pointer;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content > ul > li > button:hover {
    background-image: url("/assets/img/video-center-btn-active.png");
    background-position: center center;
    background-size: auto 2.2rem;
    background-repeat: no-repeat;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content > ul > li > button > div {
    font-size: 1.2rem;
    line-height: 2rem;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content > ul > li > .active {
    background-image: url("/assets/img/video-center-btn-active.png");
    background-position: center center;
    background-size: auto 2.2rem;
    background-repeat: no-repeat;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content > .content-award{
    width: 58.56rem;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content > .content-award > .active{
    display: flex!important;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content > .content-award > div > div{
    margin: 1rem 1.5rem;
}

.main> .main-bg > .main-content > .main-content-right > .row > .video-content > .content-award > div > div > a > img{
    width: 11.64rem;
    height: 7.26rem;
    transition: all 0.3s;
}
.main> .main-bg > .main-content > .main-content-right > .row > .video-content > .content-award > div > div > a > img:hover{
    transform: scale(1.05);
}
/* ============================================================================
   移动端（<768px）流式修复 —— 2026-10-02 新增
   本页原先把三处写成固定 rem 宽（ul 45.04rem / content-award 58.56rem），
   在 390px 视口下整页溢出 **573px**（实测）。这里改为流式，
   与 secondatry.css 的移动端修复配套（那一处修的是外层壳，本处修的是页内块）。
   ============================================================================ */
@media (max-width: 767px){
    .main > .main-bg > .main-content > .main-content-right > .row > .video-content > ul{
        width: 100%;
        flex-wrap: wrap;
    }
    /* 四个 Tab 各占 25% 在窄机上过窄（图标+文字会撑破）⇒ 两个一行 */
    .main > .main-bg > .main-content > .main-content-right > .row > .video-content > ul > .nav-item{
        width: 50% !important;
    }
    .main > .main-bg > .main-content > .main-content-right > .row > .video-content > .content-award{
        width: 100%;
    }
    .main > .main-bg > .main-content > .main-content-right > .row > .video-content > .content-award > div > div > a > img{
        width: 100%;
        max-width: 11.64rem;
        height: auto;
    }
}