/* 引入 style.css 中的变量 */
@import url('style.css');
@import url('footer-mobile.css');
@media (max-width: 767px) {
    /* Banner */
    .header-banner {
        background: url('../images/header-bg.png') no-repeat center/cover;
        height: 300px; /* 减少 Banner 高度以适应小屏幕 */
    }
    .header-container {
        padding: 80px 20px 0; /* 调整内边距 */
        text-align: center; /* 文字居中显示 */
    }
    .header-container h1 {
        font-size: 28px; /* 减小标题字体大小 */
        margin-bottom: 5px;
    }
    .header-container p {
        font-size: 14px; /* 减小段落字体大小 */
    }
    .header-container a {
        display: inline-block;
        width: 150px; /* 调整按钮宽度 */
        height: 30px; /* 调整按钮高度 */
        line-height: 30px; /* 垂直居中文字 */
        font-size: 14px; /* 减小按钮文字大小 */
    }
    .header-container a:active {
        background-color: var(--primary-dark);
    }
    /* 整体容器样式 */
    .main {
        width: 100%; /* 避免使用 vw，防止出现滚动条 */
        padding: 40px 20px; /* 减少上下内边距，增加左右内边距 */
        background: linear-gradient(to right, #E8ECF5 22%, #D1E7FB 100%);
    }
    /* 标签栏样式 */
    .main-tags {
        display: flex;
        flex-wrap: wrap; /* 允许标签换行 */
        justify-content: center; /* 标签居中显示 */
        margin: 0 auto 20px;
        gap: 10px; /* 增加标签之间的间距 */
    }
    .main-tags-item {
        background-color: #e6f2ff;
        cursor: pointer;
        transition: background-color 0.3s ease;
        width: 45%; /* 调整标签宽度，适应小屏幕 */
        height: 50px; /* 调整标签高度 */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px; /* 减小标签文字大小 */
    }
    .main-tags-item:hover {
        color: var(--primary);
    }
    .main-tags-item.hover {
        color: var(--primary);
    }
    .main-tags-item img {
        width: 25px; /* 减小图片宽度 */
        height: 25px; /* 减小图片高度 */
        margin-right: 5px;
        pointer-events: none;
    }
    /* 文章项样式 */
    .main-article{
        width: 100%; /* 避免使用 max-width，确保占满屏幕宽度 */
        min-height: auto; /* 取消最小高度限制 */
        margin: 0 auto;
    }
    .main-article-item {
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 10px; /* 减少文章项内边距 */
        margin-bottom: 15px;
        background-color: white;
        cursor: default;
    }
    .main-article-title {
        font-size: 16px; /* 减小文章标题字体大小 */
        margin-bottom: 10px;
    }
    .main-article-content {
        font-size: 12px; /* 减小文章内容字体大小 */
        line-height: 1.5;
        color: #495057;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .main-article-item div:last-child {
        margin-top: 10px;
        text-align: right;
    }
    .main-article-item div:last-child a {
        display: inline-block;
        color: #007bff;
        text-decoration: none;
        transition: color 0.3s ease;
        border: 1px solid var(--primary);
        width: 120px; /* 调整按钮宽度 */
        height: 30px; /* 调整按钮高度 */
        text-align: center;
        line-height: 30px; /* 垂直居中文字 */
        font-size: 12px; /* 减小按钮文字大小 */
    }
    .main-article-item div:last-child a:hover {
        color: var(--primary-dark);
        border: 1px solid var(--primary-dark);
    }
    /* 分页导航样式 */
    .main-page-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-page {
        list-style-type: none;
        padding: 0;
        gap: 6px;
        position: relative; /* 取消绝对定位 */
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 20px; /* 增加顶部间距 */
        display: flex; /* 确保使用 flex 布局 */
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 水平居中 */
    }

    .main-page li {
        background: var(--white);
        font-size: 12px; /* 减小页码文字大小 */
        width: 24px; /* 调整页码宽度 */
        height: 26px; /* 调整页码高度 */
        color: #000000;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: default;
    }

    .main-page li:hover {
        color: var(--white);
        background: var(--primary);
    }

    .main-page li.active {
        color: var(--white);
        background: var(--primary);
    }

    .main-page li.pre,
    .main-page li.next {
        color: var(--white);
        background-color: var(--primary);
        background-size: 6.5px 11px;
        background-repeat: no-repeat;
        background-position: center;
        background-origin: content-box;
        background-clip: content-box;
    }

    .main-page li.pre {
        background-image: url("../images/industry/left.png");
    }

    .main-page li.next {
        background-image: url("../images/industry/right.png");
    }

    .main-page {
        gap: 4px; /* 减小间距 */
    }

    .main-page li {
        font-size: 10px; /* 进一步减小文字大小 */
        width: 20px; /* 减小宽度 */
        height: 22px; /* 减小高度 */
    }

    .main-page li.pre,
    .main-page li.next {
        background-size: 5px 9px; /* 调整背景图标大小 */
    }

}