.article-site {
    padding-top: 3rem;
}

/* ===== PC article-detail-page ===== */
.article-detail-page {
    padding-top: 1.5rem;
}

.article-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 0 0 1rem 0;
}

/* PC：pc/51yc/news-detail/desktop（Zeplin y1JddJy） */
@media (min-width: 768px) {
    .article-detail-page {
        padding-top: 0;
        padding-bottom: 2.5rem;
    }

    .article-detail-page .article-row-main {
        margin-bottom: 0;
    }

    /* 内容区统一宽度 1080px 居中 */
    .article-detail-page .article-page-inner {
        box-sizing: border-box;
        width: 100%;
        max-width: 67.5rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* 标题条 Rectangle 141：1920×171 #000，位于容器外独立全宽 */
    .article-title-bar {
        width: 100%;
        box-sizing: border-box;
        background-color: #000 !important;
        /* min-height: 10.6875rem; */
        padding: 30px 0 50px;
        margin-bottom: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .article-title-bar.video-info {
        background-color: #000 !important;
    }

    .article-title-bar .info-header {
        display: block;
        width: 100%;
        max-width: 67.5rem;
        margin: 0 auto;
        margin-bottom: 0;
    }

    .article-title-bar .info-header .header-left {
        text-align: center;
        width: 100%;
        flex: none;
    }

    .article-title-bar .info-header .header-left > h1.article-page-title {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        text-align: center;
        font-size: 1.875rem;
        font-weight: 600;
        line-height: 1.4;
        margin: 0;
        color: #fff;
        width: 100%;
    }

    /* 正文区 Rectangle 143：1079×625 #111111 r5 */
    .article-detail-page .article-content-panel {
        box-sizing: border-box;
        width: 100%;
        background-color: #111 !important;
        border-radius: 5px;
        padding: 1.25rem;
    }

    .article-detail-page .article-content-panel.text-content {
        padding: 1.25rem;
    }

    .article-detail-page .article-content-panel .markdown-body {
        background-color: transparent;
    }

    .article-detail-page .article-content-panel .markdown-body > h1:first-of-type {
        display: none;
    }

    .article-detail-page .article-content-panel .markdown-body h2,
    .article-detail-page .article-content-panel .markdown-body h3,
    .article-detail-page .article-content-panel .markdown-body h4 {
        color: #fff;
        font-weight: 400;
        border-bottom: none;
        padding-bottom: 0;
    }

    .article-detail-page .article-content-panel .markdown-body h2 {
        font-size: 1.5rem;
        margin: 1.125rem 0 0.5rem;
    }

    .article-detail-page .article-content-panel .markdown-body h2:first-of-type {
        margin-top: 0;
    }

    .article-detail-page .article-content-panel .markdown-body h2 strong,
    .article-detail-page .article-content-panel .markdown-body h2 a {
        font-weight: 400;
        color: #fff;
        text-decoration: none;
    }

    .article-detail-page .article-content-panel .markdown-body h3 {
        font-size: 1.125rem;
        margin: 1rem 0 0.5rem;
    }

    .article-detail-page .article-content-panel .markdown-body p,
    .article-detail-page .article-content-panel .markdown-body li {
        font-size: 0.9375rem;
        line-height: 1.73;
        color: #9c9c9c;
        margin-bottom: 0.75rem;
    }

    .article-detail-page .article-content-panel .markdown-body strong {
        color: #fff;
        font-weight: 600;
    }

    .article-detail-page .article-content-panel .markdown-body a {
        color: #f7327b !important;
    }

    .article-detail-page .article-content-panel img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 1rem 0;
        border-radius: 5px;
    }

    /* 文章主图：对应 Zeplin 播放区 1079×434，贴紧第一面板下方 */
    .article-detail-page .article-media-block {
        margin-top: 0;
        margin-bottom: 1.25rem;
        line-height: 0;
        /* background-color: #111111; */
        /* overflow: hidden; */
    }

    .article-detail-page .article-media-block .article-main-img {
        width: 100%;
        height: auto;
        max-height: 434px;
        display: block;
        border-radius: 0;
        margin: 0;
        /* margin-bottom: 1.25rem; */
    }

    /* 第二内容面板（Rectangle 144）：接在主图下方 */
    .article-detail-page .article-content-panel--secondary {
        margin-top: 0;
    }

    /* 区块间距 */
    .article-row-ads {
        margin-top: 3.125rem;
    }

    .article-row-fine {
        margin-top: 3.125rem;
    }

    .article-section-comments {
        margin-top: 3.125rem;
    }

    .article-section-recommend {
        margin-top: 3.125rem;
    }

    .article-detail-page .row {
        margin-left: 0;
        margin-right: 0;
    }

    .article-detail-page .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    /* 广告 image/s：1080×718，双列 537×62，列间距 6px，行间距 20px（Zeplin y1JddJy） */
    .article-detail-page .article-section-ads .article-ad-image-s .slf-ad-list-type-a {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.375rem;
        row-gap: 1.25rem;
        width: 100%;
        max-width: 67.5rem;
        margin: 0;
    }

    .article-detail-page .article-section-ads .article-ad-image-s .slf-ad-list-type-a .ad-item {
        width: 100%;
        max-width: none;
        height: 3.875rem;
        min-height: 3.875rem;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .article-detail-page .article-section-ads .article-ad-image-s .slf-ad-list-type-a .ad-item:first-child {
        width: 100%;
        max-width: none;
    }

    .article-detail-page .article-section-ads .article-ad-image-s .slf-ad-list-type-a .ad-image-box {
        width: 100%;
        height: 100%;
        background-color: #323232;
    }

    .article-detail-page .article-section-ads .article-ad-image-s .slf-ad-list-type-a .ad-image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* 精品推荐：24px 标题 + 5 列 */
    .article-section-fine .adaptation {
        padding: 0;
    }

    .article-section-fine .fine-wrap {
        margin-bottom: 0;
    }

    .article-section-fine .fine-wrap .title {
        margin: 0 0 1.25rem;
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.4;
        color: #ededef;
    }

    .article-section-fine .fine-wrap .list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -0.5rem 0 0;
    }

    .article-section-fine .fine-wrap .list .fine {
        width: calc(20% - 0.5rem);
        height: 2.75rem;
        margin: 0 0.5rem 0.5rem 0;
        padding: 0.45rem 0.55rem;
        border-radius: 4px;
        background-color: #202020;
    }

    .article-section-fine .fine-wrap .list .fine .img {
        width: 1.33rem;
        height: 1.33rem;
        margin-right: 0.43rem;
        border-radius: 50%;
    }
    .title-box{
        margin-bottom: 0;
    }

    .article-section-fine .fine-wrap .list .fine .name {
        font-size: 0.875rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
    }

    .article-section-fine .fine-wrap .list .fine .icon {
        width: 0.9375rem;
        height: 0.9375rem;
        margin-left: 0.5rem;
    }

    /* 留言：24px 标题 + 输入框 #202020 */
    .article-section-comments .comment-list h3.sub-title {
        font-size: 1.5rem !important;
        font-weight: 400;
        color: #ededef;
        margin-bottom: 1.25rem;
        padding-bottom: 0;
    }

    .article-section-comments .comment-box {
        margin-bottom: 1.5rem;
    }

    .article-section-comments .comment-box textarea {
        height: 11.5625rem;
        min-height: 11.5625rem;
        background-color: #202020;
        border: 0;
        border-radius: 4px;
        padding: 1.5rem 1.875rem 3.5rem;
        margin-bottom: 0;
        font-size: 1.125rem;
        color: #fff;
    }

    .article-section-comments .comment-box textarea::placeholder {
        color: #4f5259;
    }

    .article-section-comments .comment-box .btn-comment-submit {
        right: 1rem;
        bottom: 1rem;
        padding: 5px 15px;
        border-radius: 1.875rem;
        background-color: #f7327b;
        color: #fff;
        font-size: 0.9375rem;
        font-weight: 500;
    }

    /* 留言列表项（Zeplin 留言 layer：头像 35px、用户名 14/#fff、时间 12/#8e9194、正文 14/#fff） */
    .article-detail-page .article-section-comments .comment-list {
        width: 100%;
    }

    .article-detail-page .article-section-comments .video_comments_item {
        width: 100%;
        color: #fff;
    }

    .article-detail-page .article-section-comments .video_comments_item .item {
        display: flex;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 1.5rem;
        padding: 0;
    }

    .article-detail-page .article-section-comments .video_comments_item .item.is-comment-hidden {
        display: none !important;
    }

    .article-detail-page .article-section-comments .video_comments_item .load-more {
        display: flex;
        justify-content: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    .article-detail-page .article-section-comments .video_comments_item .load-more .load-more-btn {
        display: block;
        min-width: 120px;
        padding: 10px 16px;
        border: none;
        border-radius: 6px;
        background-color: #262626;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        box-sizing: border-box;
    }

    .article-detail-page .article-section-comments .video_comments_item .load-more .load-more-btn:hover {
        color: #bbb;
        text-decoration: none;
    }

    .article-detail-page .article-section-comments .video_comments_item .item > a {
        flex-shrink: 0;
        line-height: 0;
    }

    .article-detail-page .article-section-comments .video_comments_item .avatar {
        width: 2.1875rem;
        height: 2.1875rem;
        margin-top: 0.25rem;
        border-radius: 50%;
        display: block;
    }

    .article-detail-page .article-section-comments .video_comments_item .right {
        flex: 1;
        min-width: 0;
        margin-left: 0.875rem;
        padding-right: 0;
        overflow: visible;
    }

    .article-detail-page .article-section-comments .video_comments_item .title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 0.25rem;
        line-height: 1.25rem;
    }

    .article-detail-page .article-section-comments .video_comments_item .title .pr-2 {
        padding-right: 0.5rem;
    }

    .article-detail-page .article-section-comments .video_comments_item .title a {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.25rem;
        color: #fff;
        text-decoration: none;
    }

    .article-detail-page .article-section-comments .video_comments_item .title a:hover {
        color: #fff;
        text-decoration: none;
    }

    .article-detail-page .article-section-comments .video_comments_item .title .inactive-color {
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.0625rem;
        color: #8e9194;
    }

    .article-detail-page .article-section-comments .video_comments_item .comment-text {
        margin: 0;
        padding: 0;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25rem;
        color: #fff;
    }

    .article-detail-page .article-section-comments .video_comments_item .comment-text .original-text {
        color: #fff;
        font-weight: 500;
    }

    /* 猜你喜欢 Component 5：1078 宽 4 列，卡片 262×230，列距 10px、行距 20px（Zeplin y1JddJy） */
    .article-detail-page .article-section-recommend .title-with-more {
        margin: 0 0 1.25rem;
        align-items: flex-end;
    }

    .article-detail-page .article-section-recommend .title-with-more .h3-md {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 2.125rem;
        color: #ededef;
        margin-bottom: 0;
    }

    .article-detail-page .article-section-recommend .title-with-more .sub-title {
        display: none;
    }

    .article-detail-page .article-section-recommend .row.gutter-20 {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 0.625rem;
        row-gap: 1.25rem;
        margin-left: 0;
        margin-right: 0;
    }

    .article-detail-page .article-section-recommend .row.gutter-20 > [class*="col-"] {
        flex: none;
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .article-detail-page .article-section-recommend .video-img-box.mb-e-20 {
        margin-bottom: 0 !important;
    }

    .article-detail-page .article-section-recommend .video-img-box .img-box {
        margin-bottom: 0.875rem;
        border-radius: 0;
    }

    .article-detail-page .article-section-recommend .video-img-box .img-box.cover-md a {
        padding-bottom: 67.1756%;
        background-color: #161a26;
    }

    .article-detail-page .article-section-recommend .video-img-box .detail {
        padding-top: 0;
    }

    .article-detail-page .article-section-recommend .video-img-box .title {
        display: block;
        max-width: none;
        margin-bottom: 0.5rem;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.0625rem;
        color: #b8b6bc;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: unset;
    }

    .article-detail-page .article-section-recommend .video-img-box .title a {
        color: #b8b6bc;
        font-size: 12px;
    }

    .article-detail-page .article-section-recommend .video-img-box .title a:hover {
        color: #b8b6bc;
    }

    .article-detail-page .article-section-recommend .video-img-box .sub-title {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        font-size: 0.6875rem;
        font-weight: 400;
        line-height: 0.9375rem;
        color: #b8b6bc;
    }

    .article-detail-page .article-section-recommend .video-img-box .sub-title svg {
        width: 0.875rem;
        height: 0.875rem;
        flex-shrink: 0;
    }

    .article-detail-page .article-section-recommend .video-img-box .sub-title svg.mr-1 {
        margin-right: 0.25rem;
    }

    .article-detail-page .article-section-recommend .video-img-box .sub-title svg.ml-3 {
        margin-left: 38px !important;
    }

    .article-detail-page .article-section-recommend .video-img-box .sub-title svg.mr-1.ml-3 {
        margin-right: 0.25rem;
    }

    .article-detail-page .article-section-recommend .video-img-box .absolute-bottom-right {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .article-detail-page .article-section-recommend .video-img-box .label {
        padding: 0.125rem 0.3125rem;
        font-size: 0.6875rem;
        font-weight: 400;
        line-height: 0.9375rem;
        color: #fff;
        background: rgba(8, 8, 8, 0.7);
        border-radius: 4px;
        box-shadow: none;
    }
}

/* ===== H5 article-detail-page（Zeplin o0Y4BvZ / h5/51yc/news-detail/mobile） ===== */
@media (max-width: 767.98px) {
    .article-site {
        padding-top: 3rem;
    }

    .article-detail-page {
        padding-top: 0;
        padding-bottom: 1.25rem;
        background-color: #1c1c1c;
    }

    .article-detail-page.container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .article-detail-page .article-page-inner {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* 标题条：375×242 #000，标题 24px，左右 28px */
    .article-title-bar {
        width: 100%;
        box-sizing: border-box;
        background-color: #000 !important;
        padding: 1.25rem 1.75rem 1.25rem;
        margin-bottom: 0;
    }

    .article-title-bar .info-header {
        max-width: none;
        margin: 0;
    }

    .article-title-bar .info-header .header-left {
        text-align: left;
        width: 100%;
    }

    .article-title-bar .info-header .header-left > h1.article-page-title {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        text-align: center;
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.4;
        margin: 0;
        color: #fff;
    }

    /* 正文：H5 无 #111 面板，10px #aaa 正文 + 粉色链接 */
    .article-detail-page .article-content-panel {
        background-color: transparent !important;
        border-radius: 0;
        padding: 0;
        margin-bottom: 0.75rem;
    }

    .article-detail-page .article-content-panel.text-content {
        padding: 0;
    }

    .article-detail-page .article-content-panel .markdown-body > h1:first-of-type {
        display: none;
    }

    .article-detail-page .article-content-panel .markdown-body h2,
    .article-detail-page .article-content-panel .markdown-body h3,
    .article-detail-page .article-content-panel .markdown-body h4 {
        color: #fff;
        font-weight: 600;
        border-bottom: none;
        padding-bottom: 0;
    }

    .article-detail-page .article-content-panel .markdown-body h2 {
        font-size: 15px;
        margin: 0.75rem 0 0.375rem;
    }

    .article-detail-page .article-content-panel .markdown-body h2:first-of-type {
        margin-top: 0;
    }

    .article-detail-page .article-content-panel .markdown-body h3 {
        font-size: 0.75rem;
        margin: 0.625rem 0 0.375rem;
    }

    .article-detail-page .article-content-panel .markdown-body p,
    .article-detail-page .article-content-panel .markdown-body li {
        font-size: 0.625rem;
        line-height: 1.5;
        color: #aaa;
        margin-bottom: 0.5rem;
    }
    .article-detail-page .article-content-panel .markdown-body p{
        margin-bottom: 20px;
    }

    .article-detail-page .article-content-panel .markdown-body strong {
        color: #fff;
        font-weight: 600;
    }

    .article-detail-page .article-content-panel .markdown-body a {
        color: #f7327b !important;
        font-size: 10px !important;
    }

    .article-detail-page .article-content-panel img {
        margin: 0.75rem 0;
        border-radius: 0;
    }

    .article-detail-page .article-media-block {
        margin: 1.25rem 0;
    }

    .article-detail-page .article-media-block .article-main-img {
        width: 100%;
        height: auto;
        max-height: none;
        border-radius: 0;
    }

    .article-detail-page .article-content-panel--secondary {
        margin-top: 0;
    }

    .article-detail-page .article-row-main {
        margin-bottom: 0;
    }

    /* 区块间距（稿面约 30px） */
    .article-detail-page .article-row-ads {
        margin-top: 1.25rem;
    }

    .article-detail-page .article-row-fine {
        margin-top: 1.875rem;
    }

    .article-detail-page .article-section-comments {
        margin-top: 1.875rem;
    }

    .article-detail-page .article-section-recommend {
        margin-top: 1.875rem;
    }

    /* 广告：351×40 单列，行距 5px */
    .article-detail-page .article-section-ads .article-ad-image-s .slf-ad-list-type-a {
        display: flex;
        flex-direction: column;
        gap: 0.3125rem;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .article-detail-page .article-section-ads .article-ad-image-s .slf-ad-list-type-a .ad-item {
        width: 100%;
        max-width: none;
        height: 2.5rem;
        min-height: 2.5rem;
        margin: 0;
    }

    .article-detail-page .article-section-ads .article-ad-image-s .slf-ad-list-type-a .ad-image-box {
        height: 100%;
        background-color: #323232;
    }

    /* 精品推荐：15px 标题 + 3 列标签 110×25 #262626 */
    .article-detail-page .article-section-fine .adaptation {
        padding: 0;
    }

    .article-detail-page .article-section-fine .fine-wrap {
        margin-bottom: 0;
    }

    .article-detail-page .article-section-fine .fine-wrap .title {
        margin: 0 0 0.875rem;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.4;
        color: #fff;
    }

    .article-detail-page .article-section-fine .fine-wrap .list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.625rem;
        margin: 0;
    }

    .article-detail-page .article-section-fine .fine-wrap .list .fine {
        width: 100%;
        height: 1.5625rem;
        margin: 0;
        padding: 0.25rem 0.3rem;
        border-radius: 0.15rem;
        background-color: #262626;
    }

    .article-detail-page .article-section-fine .fine-wrap .list .fine .img {
        width: 1.04rem;
        height: 1.04rem;
        margin-right: 0.3rem;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .article-detail-page .article-section-fine .fine-wrap .list .fine .name {
        font-size: 0.52rem;
        font-weight: 500;
        color: #fff;
    }

    .article-detail-page .article-section-fine .fine-wrap .list .fine .icon {
        width: 0.6rem;
        height: 0.6rem;
        margin-left: auto;
        flex-shrink: 0;
    }

    /* 留言：15px 标题 + 输入框 351×116 #202020 r3 */
    .article-detail-page .article-section-comments .comment-list h3.sub-title {
        font-size: 0.9375rem !important;
        font-weight: 600;
        color: #fff;
        margin-bottom: 0.875rem;
        padding-bottom: 0;
    }

    .article-detail-page .article-section-comments .comment-box {
        margin-bottom: 1rem;
        position: relative;
    }

    .article-detail-page .article-section-comments .comment-box textarea {
        height: 7.25rem;
        min-height: 7.25rem;
        background-color: #202020;
        border: 0;
        border-radius: 3px;
        padding: 0.625rem 0.75rem 2.5rem;
        margin-bottom: 0;
        font-size: 0.84375rem;
        color: #fff;
    }

    .article-detail-page .article-section-comments .comment-box textarea::placeholder {
        color: #4f5259;
    }

    .article-detail-page .article-section-comments .comment-box .btn-comment-submit {
        right: 0.625rem;
        bottom: 0.625rem;
        padding: 0.25rem 0.75rem;
        border-radius: 1.40625rem;
        background-color: #f7327b;
        color: #fff;
        font-size: 0.703125rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .article-detail-page .article-section-comments .video_comments_item .item {
        margin-bottom: 1rem;
    }

    .article-detail-page .article-section-comments .video_comments_item .avatar {
        width: 1.64rem;
        height: 1.64rem;
        margin-top: 0.15rem;
    }

    .article-detail-page .article-section-comments .video_comments_item .right {
        margin-left: 0.5rem;
    }

    .article-detail-page .article-section-comments .video_comments_item .title a {
        font-size: 0.65625rem;
        line-height: 1.2;
        color: #fff;
    }

    .article-detail-page .article-section-comments .video_comments_item .title .inactive-color {
        font-size: 9px;
        color: #8e9194;
    }
    .comments .title{
        margin-bottom: 0.3rem;
    }

    .article-detail-page .article-section-comments .video_comments_item .comment-text {
        font-size: 0.65625rem;
        line-height: 1.35;
        color: #fff;
    }

    /* 猜你喜欢：2 列 169×135，列距 13px、行距 16px */
    .article-detail-page .article-section-recommend .title-with-more {
        margin: 0 0 0.875rem;
        align-items: flex-start;
    }

    .article-detail-page .article-section-recommend .title-with-more .h3-md {
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.4;
        color: #fff;
        margin-bottom: 0;
    }

    .article-detail-page .article-section-recommend .title-with-more .sub-title {
        display: none;
    }

    .article-detail-page .article-section-recommend .row.gutter-20 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.8125rem;
        row-gap: 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    .article-detail-page .article-section-recommend .row.gutter-20 > [class*="col-"] {
        flex: none;
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .article-detail-page .article-section-recommend .video-img-box.mb-e-20 {
        margin-bottom: 0 !important;
    }

    .article-detail-page .article-section-recommend .video-img-box .img-box {
        margin-bottom: 0.25rem;
        border-radius: 0;
    }

    .article-detail-page .article-section-recommend .video-img-box .img-box.cover-md a {
        padding-bottom: 55.62%;
        background-color: #161a26;
    }

    .article-detail-page .article-section-recommend .video-img-box .detail {
        padding-top: 0;
    }

    .article-detail-page .article-section-recommend .video-img-box .title {
        display: -webkit-box;
        max-width: none;
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25rem;
        color: #fff;
        white-space: normal;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .article-detail-page .article-section-recommend .video-img-box .title a {
        color: #fff;
        font-size: 0.875rem;
    }

    .article-detail-page .article-section-recommend .video-img-box .title a:hover {
        color: #fff;
    }

    .article-detail-page .article-section-recommend .video-img-box .sub-title {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.0625rem;
        color: rgba(255, 255, 255, 0.4);
    }

    .article-detail-page .article-section-recommend .video-img-box .sub-title svg {
        width: 0.75rem;
        height: 0.75rem;
        flex-shrink: 0;
        /* opacity: 0.4; */
    }

    .article-detail-page .article-section-recommend .video-img-box .sub-title svg.mr-1 {
        margin-right: 0.25rem;
    }

    .article-detail-page .article-section-recommend .video-img-box .sub-title svg.ml-3 {
        margin-left: 0.75rem !important;
    }

    .article-detail-page .article-section-recommend .video-img-box .absolute-bottom-right {
        right: 0.5rem;
        bottom: 0.5rem;
    }

    .article-detail-page .article-section-recommend .video-img-box .label {
        padding: 0.125rem 0.25rem;
        font-size: 0.4rem;
        font-weight: 500;
        line-height: 1.2;
        color: #fff;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0;
        box-shadow: none;
    }
    .title-box{
        margin-bottom: 0;
    }
}

.article-header {
    text-align: center;
    margin-bottom: 0.5rem;
}

.video-info .info-header .header-left {
    text-align: center;
}

.comments .comment-list .alert.alert-success {
    display: none;
}

.comments .comment-list h3.sub-title {
    font-size: 1.54rem;
}

.article-header-title {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.text-content {
    padding: 0 0.5rem;
}

.text-content,
.text-content a,
.text-content p,
.text-content div,
.text-content h1,
.text-content h2,
.text-content h3,
.text-content h4,
.text-content strong,
.text-content em,
.text-content span {
    font-size: 0.93rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
}

.text-content p {
    margin: 0 0 0.8rem 0;
}

.text-content strong {
    color: #fff;
    font-weight: 600;
}

.text-content a {
    color: #f7327b !important;
    text-decoration: none;
}

.text-content a:hover {
    text-decoration: underline;
}

.text-content a.btn {
    font-family: 'FontAwesome';
    background: #dbe7ff;
    color: #212121;
    padding: 0.5rem 1.3rem;
    border-radius: 0.3rem;
    text-decoration: none;
}

.text-content .markdown-body {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
}

.text-content .markdown-body h1 {
    font-size: 1.45rem;
    color: #fff;
    font-weight: 700;
    margin: 0.8rem 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.12rem solid rgba(255, 255, 255, 0.9);
}

.text-content .markdown-body h2 {
    font-size: 1.24rem;
    color: #fff;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    border-bottom: none;
    padding-bottom: 0;
}

.text-content .markdown-body h3 {
    font-size: 1.12rem;
    color: #fff;
    font-weight: 600;
    margin: 0.8rem 0 0.4rem;
}

.text-content .markdown-body h4 {
    font-size: 1.03rem;
    color: #fff;
    font-weight: 600;
    margin: 0.6rem 0 0.3rem;
}

.text-content .markdown-body hr {
    border-color: rgba(255, 255, 255, 0.15);
    margin: 1rem 0;
}

.text-content .markdown-body blockquote {
    padding: 0 0.8rem;
    border-left: 0.2rem solid #f7327b;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.3rem;
    margin: 0.5rem 0;
}

.text-content .markdown-body blockquote p {
    margin-bottom: 0.5rem;
    padding: 0.2rem 0;
}

.text-content .markdown-body h3 a {
    font-size: 1em;
}

@media (max-width: 51.2rem) {
    .article-site {
        padding-top: 10rem;
    }

    .article-header-title {
        font-size: 2.4rem;
    }

    .adaptation .fine-wrap .title {
        font-size: 0.8rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .adaptation .fine-wrap .list {
        margin: 0 -0.4rem 0 0;
    }
    .adaptation .fine-wrap .list .fine {
        width: calc(35% - 0.8rem);
        height: 1.6rem;
        margin: 0 0.4rem 0.62rem 0; 
        padding: 0.3rem 0.4rem;
    }
    .adaptation .fine-wrap .list .fine .img {
        width: 1.23rem;
        height: 1.23rem;
        margin: 0 0.4rem 0 0;
        flex-shrink: 0;
    }
    .adaptation .fine-wrap .list .fine .name {
        font-size: 0.7rem;
        flex: 1;
        min-width: 0;
    }
    .adaptation .fine-wrap .list .fine .icon {
        width: 0.77rem;
        height: 0.77rem;
        margin-left: 0.3rem;
        flex-shrink: 0;
    }

    .comments .video_comments_item {
        font-size: 0.8rem;
    }
    .comments .comment-list h3.sub-title {
        font-size: 1.2rem;
    }
    .comments .comment-box textarea {
        height: 10rem;
        padding: 0.85rem 1rem 1rem;
        margin-bottom: 1.6rem;
        font-size: 0.9rem;
    }
    .comments .comment-box .btn-comment-submit {
        right: 0.67rem;
        bottom: 0.67rem;
        padding: 0.27rem 0.73rem 0.27rem;
        font-size: 0.8rem;
        border-radius: 0.67rem;
    }

    .text-content,
    .text-content a,
    .text-content p,
    .text-content div,
    .text-content h1,
    .text-content h2,
    .text-content h3,
    .text-content h4,
    .text-content strong,
    .text-content em,
    .text-content span {
        font-size: 0.975rem;
        line-height: 1.8;
    }

    .text-content p {
        margin: 0 0 1.5rem 0;
    }

    .text-content .markdown-body h1 {
        font-size: 1.3rem;
    }

    .text-content .markdown-body h2 {
        font-size: 1.17rem;
    }

    .text-content .markdown-body h3 {
        font-size: 1.04rem;
    }
}

@media (max-width: 29.8667rem) {
    .article-site {
        padding-top: 12rem;
    }

    .article-header-title {
        font-size: 2.4rem;
    }

    .adaptation .fine-wrap .title {
        font-size: 0.8rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .adaptation .fine-wrap .list {
        margin: 0 -0.4rem 0 0;
    }
    .adaptation .fine-wrap .list .fine {
        width: calc(35% - 0.8rem);
        height: 1.6rem;
        margin: 0 0.4rem 0.62rem 0; 
        padding: 0.3rem 0.4rem;
    }
    .adaptation .fine-wrap .list .fine .img {
        width: 1.23rem;
        height: 1.23rem;
        margin: 0 0.4rem 0 0;
        flex-shrink: 0;
    }
    .adaptation .fine-wrap .list .fine .name {
        font-size: 0.7rem;
        flex: 1;
        min-width: 0;
    }
    .adaptation .fine-wrap .list .fine .icon {
        width: 0.77rem;
        height: 0.77rem;
        margin-left: 0.3rem;
        flex-shrink: 0;
    }

    .comments .video_comments_item {
        font-size: 0.8rem;
    }
    .comments .comment-list h3.sub-title {
        font-size: 1.2rem;
    }
    .comments .comment-box textarea {
        height: 10rem;
        padding: 0.85rem 1rem 1rem;
        margin-bottom: 1.6rem;
        font-size: 0.9rem;
    }
    .comments .comment-box .btn-comment-submit {
        right: 0.67rem;
        bottom: 0.67rem;
        padding: 0.27rem 0.73rem 0.27rem;
        font-size: 0.8rem;
        border-radius: 0.67rem;
    }

    .text-content,
    .text-content a,
    .text-content p,
    .text-content div,
    .text-content h1,
    .text-content h2,
    .text-content h3,
    .text-content h4,
    .text-content strong,
    .text-content em,
    .text-content span {
        font-size: 1.04rem;
    }

    .text-content .markdown-body h1 {
        font-size: 1.43rem;
    }

    .text-content .markdown-body h2 {
        font-size: 1.3rem;
    }

    .text-content .markdown-body h3 {
        font-size: 1.17rem;
    }
}