/* 全局变量兼容处理（IE不支持CSS变量，需降级） */
:root {
    --primary: #00287d;
    --white: #ffffff;
    --gray-text: #666666;
    --shadow: 0 4px 12px rgba(0, 40, 125, 0.08);
    --shadow-hover: 0 8px 24px rgba(0, 40, 125, 0.15);
}

/* 基础样式重置 & IE兼容预处理 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* IE6-8 触发hasLayout */
    zoom: 1;
}

/* 页面标题样式（全兼容） */
.page-title {
    text-align: center;
    margin-bottom: 2.5rem;
    /* IE兼容：rem转px兜底（1rem=16px） */
    margin-bottom: 40px\9;
}

.page-title h1 {
    font-size: 2rem;
    /* IE兼容：rem转px + 颜色降级（不识别var） */
    font-size: 32px\9;
    color: var(--primary);
    color: #00287d\9;
    margin-bottom: 0.8rem;
    margin-bottom: 12.8px\9;
    /* IE字体渲染优化 */
    font-family: "Microsoft Yahei", SimSun, sans-serif;
}

.page-title .divider {
    width: 60px;
    height: 2px;
    background-color: var(--primary);
    background-color: #00287d\9;
    margin: 0 auto;
    /* IE7-8 居中兼容 */
    *display: block;
    *position: relative;
    *left: 50%;
    *margin-left: -30px;
}

/* 图片网格布局（Grid降级为Float，兼容IE9+） */
.image-grid {
    /* 现代浏览器Grid布局 */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
    gap: 19.2px\9;
    /* IE兼容：清除浮动 + 宽度100% */
    width: 100%;
    overflow: hidden\9;
    *zoom: 1\9;
}

/* IE9+ 降级为flex布局，IE8-降级为float */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .image-grid {
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0\9;
    }
}

/* IE8及以下 float布局 */
*html .image-grid,
*+html .image-grid {
    display: block\9;
}

/* 图片卡片样式（全兼容） */
.image-card {
    background: var(--white);
    background: #ffffff\9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    box-shadow: 0 4px 12px rgba(0, 40, 125, 0.08)\9;
    transition: all 0.3s ease;
    cursor: pointer;
    /* IE兼容：Grid/Flex子元素基础样式 + float降级 */
    margin: 0 0.6rem 1.2rem 0.6rem\9;
    -ms-flex: 0 0 calc(33.333% - 1.2rem)\9;
    flex: 0 0 calc(33.333% - 1.2rem)\9;
    width: calc(33.333% - 1.2rem)\9;
    /* IE8- float布局宽度 */
    *width: 280px\9;
    *float: left\9;
    *margin: 0 8px 16px 8px\9;
    /* IE圆角兼容（仅IE9+） */
    -ms-border-radius: 8px\9;
    /* IE阴影兼容（仅IE9+） */
    -ms-box-shadow: 0 4px 12px rgba(0, 40, 125, 0.08)\9;
}

/* IE9+ flex布局卡片间距补偿 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .image-card {
        margin: 0 0.6rem 1.2rem 0.6rem;
    }
}

/* 卡片hover效果（兼容IE） */
.image-card:hover {
    transform: translateY(-5px);
    /* IE9+ 兼容transform */
    -ms-transform: translateY(-5px)\9;
    box-shadow: var(--shadow-hover);
    box-shadow: 0 8px 24px rgba(0, 40, 125, 0.15)\9;
    /* IE8- 无transform，用margin模拟上浮 */
    *margin-top: -5px\9;
    *margin-bottom: 21px\9;
}

/* 图片容器样式 */
.image-wrapper {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    /* IE高度兼容 */
    height: auto\9;
    min-height: 200px\9;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    /* IE不支持object-fit，用background替代兜底 */
    *width: 100%\9;
    *height: auto\9;
    *min-height: 200px\9;
    transition: transform 0.5s ease;
    /* IE9+ 兼容transform */
    -ms-transition: -ms-transform 0.5s ease\9;
}

.image-card:hover .image-wrapper img {
    transform: scale(1.08);
    /* IE9+ 兼容scale */
    -ms-transform: scale(1.08)\9;
    /* IE8- 无scale，不做动效降级 */
}

/* 图片信息区样式 */
.image-info {
    padding: 0.1rem 0.1rem;
    padding: 1.6px 1.6px\9;
    text-align: center;
    /* IE内边距兼容 */
    *padding: 2px 2px\9;
}

.image-info h3 {
    color: #333;
    margin-bottom: 0.5rem;
    margin-bottom: 8px\9;
    font-weight: 600;
    /* IE字体加粗兼容 */
    *font-weight: bold\9;
    font-size: 1rem\9;
}

.image-info p {
    font-size: 0.9rem;
    font-size: 14.4px\9;
    color: var(--gray-text);
    color: #666\9;
    /* IE行高优化 */
    line-height: 1.5\9;
}

/* 响应式适配（兼容IE） */
@media (max-width: 768px) {
    .container {
        padding: 1.5rem 0.8rem;
        padding: 24px 12.8px\9;
    }

    .page-title h1 {
        font-size: 1.8rem;
        font-size: 28.8px\9;
    }

    .image-wrapper {
        max-height: 400px;
        /* IE移动端高度兼容 */
        *max-height: 300px\9;
    }

    /* IE9+ 平板端列数改为2列 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .image-card {
            -ms-flex: 0 0 calc(50% - 1.2rem)\9;
            flex: 0 0 calc(50% - 1.2rem)\9;
            width: calc(50% - 1.2rem)\9;
        }
    }

    /* IE8- 平板端宽度调整 */
    *html .image-card,
    *+html .image-card {
        *width: calc(50% - 16px)\9;
        *max-width: 280px\9;
    }
}

@media (max-width: 480px) {
    .image-grid {
        gap: 0.1rem;
        gap: 1.6px\9;
    }

    .image-wrapper {
        max-height: 400px;
        *max-height: 250px\9;
    }

    /* IE9+ 手机端单列 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .image-card {
            -ms-flex: 0 0 100%\9;
            flex: 0 0 100%\9;
            width: 100%\9;
            margin: 0 0 1.2rem 0\9;
        }
    }

    /* IE8- 手机端单列 */
    *html .image-card,
    *+html .image-card {
        *width: 100%\9;
        *float: none\9;
        *margin: 0 0 16px 0\9;
    }
}

/* IE8及以下 特殊兼容处理 */
*html .image-grid {
    *padding: 0 4px\9;
}

*html .image-card:hover {
    *position: relative\9;
    *top: -5px\9;
}