body {
    background-color: var(--page-background-color)
}

.ad {
    max-height: 80px;
    border-radius: 10px
}

.ad-three {
    max-height: 80px
}

.ad-three a {
    display: block;
    width: 32%;
    overflow: hidden;
    border-radius: 10px
}

.ad-three a img {
    width: 100%
}

.text-list ul li {
    line-height: 2.5em
}

.text-list ul li::before {
    content: "•";
    color: #d4d4d4;
    display: inline-block;
    width: 1em
}

.text-list ul li a {
    font-size: var(--font-size-body);
    color: var(--page-front-color)
}

.text-list ul li a:hover {
    color: var(--page-highlight-color)
}

.section-title {
    width: 100%
}

.section-title h2 {
    background: url(../images/icon_title_bg.png?v=20250918142122?v=20251023165651) no-repeat left center;
    padding-left: 20px
}

.section-title h2 a {
    font-size: var(--font-size-h2);
    background: linear-gradient(to right, var(--page-front-color) 0%, var(--page-front-color) 50%, var(--page-highlight-color) 50%, var(--page-highlight-color) 100%);
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block
}

.section-title .column-more {
    font-size: var(--font-size-body);
    color: var(--front-color-brief);
    display: flex;
    align-items: flex-end
}

.section-title .column-more:hover {
    color: var(--page-highlight-color)
}

.section-title .column-list {
    display: flex
}

.section-title .column-list ul {
    align-items: flex-end
}

.section-title .column-list ul li.cur a {
    color: var(--page-highlight-color)
}

.section-title .column-list ul li a {
    font-size: var(--font-size-body);
    color: var(--page-front-color)
}

.section-title .column-list ul li a:hover {
    color: var(--page-highlight-color)
}

.section-title .column-list ul li span {
    margin: 0 15px;
    color: var(--front-color-brief)
}

.section-title .column-list ul li:last-child span {
    display: none
}

.section-title .swiper-arrow {
    align-items: flex-end
}

.section-title .swiper-arrow span {
    cursor: pointer;
    font-size: var(--font-size-h4);
    color: var(--front-color-brief);
    margin: 0 10px
}

.section-title .swiper-arrow span.cur,
.section-title .swiper-arrow span:hover {
    color: var(--page-highlight-color)
}

.img-item {
    width: 384px;
    height: 218px;
    border-radius: 8px
}

.img-item .img-wrap img {
    width: 100%;
    height: 100%
}

.img-item .mask {
    width: 100%;
    height: 100px;
    bottom: 0;
    z-index: 10;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5))
}

.img-item .vod-play {
    width: 33px;
    height: 33px;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background-image: url(../images/icon_play.png?v=20250918142122?v=20251023165651)
}

.img-item .title {
    width: 100%;
    height: 45px;
    line-height: 45px;
    bottom: 0;
    left: 0;
    padding: 0 15px;
    box-sizing: border-box;
    z-index: 20
}

.img-item .title a {
    color: #ffffff
}

.img-item .title a:hover {
    color: #ffffff;
    text-decoration: underline
}

.section-content-text .text-list {
    width: 384px;
    margin-top: 15px
}

.section-content-text .text-list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.text-img-item {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.text-img-item .img-wrap {
    width: 128px;
    height: 74px;
    overflow: hidden;
    border-radius: 8px
}

.text-img-item .img-wrap a img {
    width: 100%;
    height: 100%
}

.text-img-item .img-wrap .duration {
    color: #ffffff;
    font-size: var(--font-size-subheading);
    opacity: 0.7;
    right: 5px;
    bottom: 5px;
    z-index: 10
}

.text-img-item .img-wrap .mask {
    width: 100%;
    height: 34px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.41));
    z-index: 5;
    bottom: 0;
}

.text-img-item .title {
    width: 245px
}

.text-img-item .title a {
    font-size: var(--font-size-body);
    color: var(--page-front-color);
    line-height: 1.4
}

.text-img-item .title a:hover {
    color: var(--page-highlight-color)
}

.text-img-item .title span {
    font-size: var(--font-size-subheading);
    color: var(--front-color-brief);
    left: 0;
    bottom: 0
}

.get-more {
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 50px;
    margin-bottom: 20px
}

.get-more a {
    padding: 10px 40px;
    background-color: rgba(0, 0, 0, 0.05);
    font-size: var(--font-size-subheading);
    color: var(--front-color-brief);
    border-radius: 8px
}

.get-more a:hover {
    color: var(--page-highlight-color)
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--scrollbar-background-color)
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--scrollbar-thumb-color)
}

::-webkit-scrollbar-track {
    border-radius: 4px;
    background: transparent
}

.pic-swiper-1 {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.breadcrumb-navigation {
    font-size: var(--font-size-subheading);
    color: var(--front-color-brief)
}

.breadcrumb-navigation a {
    font-size: var(--font-size-subheading);
    color: var(--front-color-brief)
}

.breadcrumb-navigation a:hover {
    color: var(--page-highlight-color)
}

.breadcrumb-navigation a span {
    font-size: var(--font-size-subheading);
    color: var(--front-color-brief)
}

.breadcrumb-navigation a:last-of-type span {
    display: none
}