.banner {
    width: 100%;
    overflow: hidden;
}

.banner-img {
    width: 100%;
    /* height: auto; */
    height: 400px;
    display: block;
    /* 确保图片作为块级元素显示 */
    object-fit: cover;
    /* 保持图片比例并填满容器 */
    object-position: center;
    /* 图片居中显示 */
    margin: 0;
    /* 移除所有边距 */
    padding: 0;
    /* 移除所有内边距 */
}

.info-detail-page {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.detail-header {
    margin-bottom: 40px;
    text-align: center;
}

.detail-header h1 {
    /* font-size: 2rem; */
    color: #940c11;
    margin: 40px 0 20px 0;
    /* 上边距40px，下边距20px */
}

.detail-meta {
    max-width: 1090px;
    color: #666;
    font-size: 14px;
    justify-content: flex-end;
    margin: 0 auto;
    margin-bottom: 20px;
    display: flex;
}

.detail-content,
.detail-content * {
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 0 20px; */
    line-height: 1.8;
    font-size: 16px;
    color: #333;
    background-color: transparent !important;
}

.detail-content p {
    text-indent: 2em !important;
    margin: 0 0 15px 0;
    padding-left: 0;
    /* 去掉可能存在的左侧 padding */
    text-indent: 0;
    /* 去掉旧缩进 */
    background-color: transparent;
}

.detail-content img {
    display: block;
    /* 让 img 独占一行 */
    margin: 0px auto;
    /* 上下 20px，左右 auto → 水平居中 */
    max-width: 100%;
    /* 响应式宽度 */
    height: auto;
    /* 保持比例 */
    background: none;
    /* 去掉可能的背景 */
    box-shadow: none;
    /* 去掉可能的外阴影 */
    float: none !important;
    /* 清除旧浮动 */
    padding: 0 !important;
    /* 清除旧内边距 */
}

.loading {
    text-align: center;
    padding: 50px;
    color: #666;
}

.loading i {
    margin-right: 10px;
}

/* 移动端自适应样式 */

/* 平板设备 (768px 及以下) */
@media (max-width: 768px) {
    .banner-img {
        height: 350px;
    }

    .info-detail-page {
        padding: 40px 0;
    }

    .detail-header {
        margin-bottom: 30px;
        padding: 0 15px;
    }

    .detail-header h1 {
        font-size: 1.8rem;
        margin: 30px 0 15px 0;
    }

    .detail-meta {
        width: 100%;
        font-size: 13px;
        padding: 0 15px;
        margin-bottom: 15px;
        justify-content: center;
    }

    .detail-content,
    .detail-content * {
        font-size: 15px;
        line-height: 1.7;
        padding: 0 15px;
        max-width: 100%;
    }

    .detail-content p {
        text-indent: 2em !important;
        margin: 0 0 12px 0;
    }

    .detail-content img {
        margin: 15px auto;
    }

    .loading {
        padding: 30px;
        font-size: 14px;
    }
}

/* 小屏幕手机 (480px 及以下) */
@media (max-width: 480px) {
    .banner-img {
        height: 300px;
    }

    .info-detail-page {
        padding: 30px 0;
    }

    .detail-header {
        margin-bottom: 25px;
        padding: 0 10px;
    }

    .detail-header h1 {
        font-size: 1.6rem;
        margin: 25px 0 12px 0;
    }

    .detail-meta {
        font-size: 12px;
        padding: 0 10px;
        margin-bottom: 12px;
        flex-direction: column;
        gap: 5px;
    }

    .detail-content,
    .detail-content * {
        font-size: 14px;
        line-height: 1.6;
        padding: 0 10px;
    }

    .detail-content p {
        text-indent: 2em !important;
        margin: 0 0 10px 0;
    }

    .detail-content img {
        margin: 12px auto;
    }

    .loading {
        padding: 25px;
        font-size: 13px;
    }

    .loading i {
        margin-right: 8px;
    }
}

/* 超小屏幕手机 (320px 及以下) */
@media (max-width: 320px) {
    .banner-img {
        height: 250px;
    }

    .info-detail-page {
        padding: 25px 0;
    }

    .detail-header h1 {
        font-size: 1.4rem;
        margin: 20px 0 10px 0;
    }

    .detail-meta {
        font-size: 11px;
    }

    .detail-content,
    .detail-content * {
        font-size: 13px;
        line-height: 1.5;
    }

    .detail-content p {
        margin: 0 0 8px 0;
    }

    .detail-content img {
        margin: 10px auto;
    }

    .loading {
        padding: 20px;
        font-size: 12px;
    }
}

/* 通用移动端优化 */
@media (max-width: 768px) {

    /* 优化触摸体验 */
    .nav-button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
    }

    /* 优化字体渲染 */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* 优化图片加载 */
    .banner-img,
    .detail-content img {
        image-rendering: -webkit-optimize-contrast;
    }

    /* 防止文本调整大小 */
    html {
        -webkit-text-size-adjust: 100%;
    }

    /* 优化容器宽度 */
    .container {
        max-width: 100%;
        padding: 0 15px;
    }

    /* 针对超长内容的优化 */
    .detail-content {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .detail-content * {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 确保表格在移动端可滚动 */
    .detail-content table {
        display: block;
        overflow-x: auto;
        width: 100%;
    }

    /* 1. 标题独占一行 */
    .about-tabs .l1Name {
        width: 2% !important;
        border-right: none !important;
        margin: 0 0 10px 0 !important;
        text-align: center;
    }

    /* 2. 按钮容器：横排 一排两个 */
    .about-tabs .column.flex {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 10px;
    }

    /* 3. 每个按钮占一半宽度 */
    .about-tabs .tab-btn {
        flex: 0 0 calc(50% - 5px) !important;
        /* 一半宽 减去间隙 */
        min-width: auto !important;
        margin: 0 !important;
        text-align: center;
    }
}