/* ===== 全局重置 ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: "微软雅黑", "Microsoft YaHei", SimHei, sans-serif;
    font-size: 15px;
    background-color: #f8f8f8;
    color: #333;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #0099FF;
    text-decoration: none;
}

/* ===== 页面容器与响应策略（移动优先） ===== */
:root {
    --site-width: 1200px; /* 主要宽度阈值 */
    --content-width-perc: 64%;
    --gap: 16px;
    --main-color: #003366;
    --accent-green: #00CC33;
}

.container-center {
    max-width: var(--site-width);
    margin: 0 auto;
    width: 100%;
}

.head-content, #index-box, #link-area, .footer-inner, .top-inner {
    width: 100%;
}

/* 保持最小宽度：即使视口小于 --site-width (1200px) 也让这些主要容器至少为 1200px。
   这会在窄视口下产生横向滚动条，但能保证布局最小宽度不被压缩。原先的问题是
   min-width 只在大屏（@media (min-width:1200px)）中的规则里设置，因此在小于
   1200px 时并没有应用到 .head-content 等元素，导致它们宽度变为 100%（即填满视口）。
*/
.head-content.container-center,
#index-box.container-center,
.top-inner.container-center,
#link-area.link-area--pct {
    min-width: var(--site-width);
    height: 100%;
}

/* 顶层容器也设置最小宽度可以使页面行为更一致：
   - 在视口小于 --site-width 时整个页面产生横向滚动（而不是局部布局错位）
   - 在大视口下不影响正常流式或百分比布局
*/
#container_page {
    min-width: var(--site-width);
}

/* 当视口大于1200px时使用窄内容区居中（近似原效果） */
@media (min-width: 1200px) {
    /* 默认使用统一的 max-width + margin:0 auto 保持大多数容器与设计对齐 */
    .head-content, #link-area, .footer-inner, .top-inner {
        max-width: var(--site-width);
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0
    }

    /* 说明：.head-content 和 #index-box 在大屏时需要使用百分比宽度（--content-width-perc），
       但它们同时要保证最小宽度为 --site-width（1200px）。因为 HTML 中它们都使用了
       class="container-center"，而 .container-center 定义了 max-width:var(--site-width)，
       会把百分比宽度限制为 1200px。因此使用更具体的选择器覆盖该限制： */
    .head-content.container-center {
        /* 使用百分比宽度（例如 64%），并保证不小于 1200px；移除对 max-width 的限制 */
        max-width: none !important;
        width: var(--content-width-perc);
        min-width: var(--site-width);
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* 顶部条也可能使用 container-center 类，覆盖其 max-width 限制以使用百分比 */
    .top-inner.container-center {
        max-width: none !important;
        width: var(--content-width-perc);
        min-width: var(--site-width);
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* 如果使用专用类 top-inner--pct，则直接应用百分比宽度并确保最小宽度为 1200px */
    .top-inner.top-inner--pct {
        max-width: none !important;
        width: var(--content-width-perc) !important;
        min-width: var(--site-width) !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 更高优先级的规则：直接针对 #top-bar 内的 .top-inner，使用 !important 强制生效，
       避免其他样式或外部库再次限制其最大宽度。 */
    #top-bar .top-inner.container-center {
        max-width: none !important;
        width: var(--content-width-perc) !important;
        min-width: var(--site-width) !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 确保主体区域与头部宽度一致（如果需要） */
    #index-box.container-center {
        max-width: none !important;
        width: var(--content-width-perc);
        min-width: var(--site-width);
        margin: 16px auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* 友情链接：专用类，确保在大屏时使用百分比宽度并保持最小宽度 */
    .link-area--pct, #index-box .link-area--pct {
        max-width: none !important;
        /* 填满父容器（#index-box），保证与头部/主体宽度一致；父容器已被设置为 --content-width-perc */
        width: 100% !important;
        min-width: var(--site-width) !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 更高优先级：确保在页面结构中 #index-box 内的 #link-area 使用百分比宽度并保持最小宽度 */
    #container_page #index-box #link-area.link-area--pct,
    #container_page #index-box .index-module #link-area.link-area--pct {
        max-width: none !important;
        width: 100% !important; /* 与 #index-box 宽度一致 */
        min-width: var(--site-width) !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 直接设置 #link-area 为页面宽度的 64%（且最小 1200px），以确保无论父容器如何都满足要求 */
    #link-area.link-area--pct {
        max-width: none !important;
        width: var(--content-width-perc) !important;
        min-width: var(--site-width) !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 保留对其他元素的宽度限制（例如友情链接区等） */
}

/* ===== 顶部深蓝条 ===== */
#top-bar {
    background-color: var(--main-color);
    height: 50px;
    width: 100%;
}

.top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}

.top-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex
}

.top-links li {
    padding-right: 28px
}

.top-links a {
    color: #fff;
    font-size: 13px;
    line-height: 50px
}

.top-links a:hover {
    color: #99ccff
}

.top-time {
    color: #fff;
    font-size: 13px
}

/* ===== 页头区 ===== */
#head-area {
    width: 100%;
    background-image: url("../images/head_bg.jpg");
    background-size: 100% 100%;
}

.head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0
}

.head-logo-title {
    display: flex;
    align-items: center;
    height: 60px;
}

.head-logo-title img.site-logo {
    height: 40px;
    margin-right: 12px
}

.head-logo-title .site-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: 2px
}

.head-search {
    display: flex;
    align-items: center
}

/* 导航条（保持简单语义） */
.head-nav {
    background-color: #014e8a;
    height: 46px
}

.head-nav ul {
    list-style: none;
    margin: 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    height: 46px
}

.head-nav ul li {
    flex: 1 1 160px;
}

.head-nav ul li a {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 0 14px;
    height: 46px;
    font-size: 18px;
    color: #fff;
    font-weight: 600
}

.head-nav ul li a:hover {
    background-color: orange;
    color: #fff !important;
}

.head-nav .wp_nav .nav-item.i1 {
    background: none;
}

.head-nav .wp_nav .nav-item {
    background: url(../images/head-nav-li-bg.png) no-repeat left;
}

/* Banner: 叠放图片并使用 CSS 动画过渡。
   我们使用 CSS Grid 将所有 img 放在同一网格单元内叠放（不改变尺寸/布局）,
   通过 opacity/transform 动画来实现过渡效果。 */
.head-banner {
    width: 100%;
    overflow: hidden;
    background: #002244;
    display: grid
}

.head-banner img {
    grid-area: 1 / 1 / 2 / 2; /* 叠放在同一单元格 */
    width: 100%;
    height: 100%;
    object-fit: fill; /* 保持原有的尺寸/裁剪策略，不改动 */
    opacity: 0;
    transform: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
    display: block; /* 保持在文档流中，grid 会控制叠放 */
}

.head-banner img.active {
    opacity: 1;
    z-index: 2;
}

/* 动画效果（使用 transform + opacity）
   这里定义入场/出场的起止状态，JS 会在切换时添加对应的 anim-in / anim-out 与 effect-name 类 */
.anim-in.fade { /* 仅淡入 */
}

.anim-out.fade { /* 仅淡出 */
}

.anim-in.slide-left {
    transform: translateX(0);
}

.anim-out.slide-left {
    transform: translateX(-10%);
}

.anim-in.slide-right {
    transform: translateX(0);
}

.anim-out.slide-right {
    transform: translateX(10%);
}

.anim-in.zoom {
    transform: scale(1);
}

.anim-out.zoom {
    transform: scale(0.96);
}

.anim-in.flip {
    transform: rotateY(0deg);
    backface-visibility: hidden
}

.anim-out.flip {
    transform: rotateY(-18deg);
    backface-visibility: hidden
}

/* 在添加 anim-in 时，先将入场元素设置为初始偏移（通过 JS 设置 inline 样式），
   然后移除初始偏移以触发 transition（JS 会在添加类前强制回流）。
   这样能用简单的 transition 而无需 keyframes。 */

/* ===== 主体：使用 Grid + Flexbox ===== */
#index-box {
    width: 100%;
    margin: 16px 0
}

/* 全局保证 #index-box 水平居中并使用与头部相同的最大宽度（更稳健） */
#index-box {
    max-width: var(--site-width);
    margin-left: auto;
    margin-right: auto;
}

.grid-wrapper {
    display: block
}

/* 每一行使用 Grid；通过 .row-N 样式控制列比 */
.grid-row {
    display: grid;
    grid-gap: var(--gap);
    margin-bottom: var(--gap)
}

.grid-row.row-1 {
    grid-template-columns:2fr 1fr
}

.grid-row.row-2 {
    grid-template-columns:repeat(3, 1fr)
}

.grid-row.row-3 {
    grid-template-columns:repeat(3, 1fr)
}

.grid-row.row-4 {
    grid-template-columns:1fr
}

/* 小屏幕下单列堆叠 */
@media (max-width: 1199px) {
    .grid-row {
        grid-template-columns:1fr !important
    }

    .head-logo-title .site-title {
        font-size: 22px
    }
}

/* 确保在大屏时 #index-box 没有左右 padding，和头部横幅严格对齐 */
@media (min-width: 1200px) {
    #index-box {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 模块通用样式（保持原有风格） */
.index-module {
    background: transparent
}

.module-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 2px solid var(--main-color);
    padding-bottom: 6px
}

.module-head .mod-title {
    font-size: 18px;
    color: var(--main-color);
    font-weight: 700
}

.module-head .mod-title .en {
    font-size: 13px;
    color: #999;
    font-style: italic;
    margin-left: 8px;
    font-weight: 400
}

/* 为 .mod-title 中的第一个子 span 添加平行四边形绿色背景（优先使用 clip-path） */
.module-head .mod-title > span:first-of-type {
    display: inline-block;
    background: var(--accent-green);
    color: #fff; /* 强制文字为白色，覆盖继承颜色 */
    padding: 6px 20px;
    line-height: 1;
    vertical-align: middle;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    /* fallback: use skew to form parallelogram on older browsers */
    transform: skewX(-12deg);
}

/* 由于父元素可能被 skew，我们需要让内部的真实文本恢复正常（反向 skew）。
   这里选择第一个子 span 内的所有元素都进行反向 skew，使文字方向正确。 */
.module-head .mod-title > span:first-of-type > * {
    display: inline-block;
    transform: skewX(12deg);
    color: inherit; /* 保持白色 */
}

/* 如果浏览器支持 clip-path polygon，则使用 clip-path（更精准、不会扭曲文字），并移除 skew */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
    .module-head .mod-title > span:first-of-type {
        -webkit-clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
        clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
        transform: none; /* 取消 skew */
        padding: 8px 22px;
    }

    .module-head .mod-title > span:first-of-type > * {
        transform: none;
        display: inline; /* 恢复内联文本布局 */
    }

    .module-head .mod-title.blue-border {
        margin-left: 4px;
    }

    /* blue-border 变体：clip-path 会把 border 裁掉，强制改回 skewX 实现平行四边形边框 */
    .module-head .mod-title.blue-border > span:first-of-type {
        -webkit-clip-path: none !important;
        clip-path: none !important;
        transform: skewX(-12deg) !important;
        padding: 6px 20px !important;
    }

    .module-head .mod-title.blue-border > span:first-of-type > * {
        transform: skewX(12deg) !important;
        display: inline-block !important;
    }
}

/* ===== 蓝色平行四边形边框变体（透明背景 + 蓝色描边） ===== */
.module-head .mod-title.blue-border > span:first-of-type {
    background: transparent;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    box-shadow: none;
}

.module-head .mod-title.blue-border > span:first-of-type > * {
    color: var(--main-color);
}

.module-body {
    border: 1px solid #e0e0e0;
    background: #fff;
    min-height: 260px;
    padding: 6px
}

/*滚动图片的标题水平居中*/
.module-body .imgscroll2_td div:nth-child(2) {
    display:flex;
    justify-content: center;
}

/* Grid 内的列项统一内边距 */
.grid-col {
    padding: 6px
}

/* 新闻列表、工作动态等复用之前样式（略） */
.news-list {
    list-style: none;
    margin: 0;
    padding: 6px
}

.news-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    padding: 0 8px;
    overflow: hidden;
    white-space: nowrap;
    color: #999;
}

.news-list li a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

.news-list .articlelist1_li{
    background: none;
}

.news-list .news_icon{
    display: none;
}

.news-list .news-date {
    color: #999;
    margin-left: 8px;
    font-size: 15px
}

/* 联系我们、快速通道、友情链接、页脚保持原设计 */
.contact-body {
    border: 1px solid #e0e0e0;
    background: #fff;
    min-height: 260px;
    padding: 12px
}

.passage-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.passage-item {
    flex: 1 1 calc(50% - 10px);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}

.passage-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.passage-item img {
    display: block;
    margin: 0 auto 8px auto;
    max-width: 64px;
    max-height: 64px;
}

.passage-item div {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 500;
}

.passage-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    z-index: 1;
}

/* ===== 顶部深蓝条 ===== */
.link-head {
    padding: 10px 16px 6px;
    border-bottom: 2px solid #00CC33;
}

.link-head span {
    font-size: 17px;
    font-weight: bold;
    color: #00CC33;
}

/* 友情链接：等宽分布并铺满父容器 */
.link-body {
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
}

.link-body ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

/* 在大屏幕时每行显示 5 列，使用 calc 精确分配宽度（考虑 gap）以确保总和为 100% */
.link-body ul li {
    box-sizing: border-box;
    padding: 6px 8px;
    text-align: center;
    /* (100% - 4*gap) / 5 */
    flex: 0 0 calc((100% - 32px) / 5);
    max-width: calc((100% - 32px) / 5);
}

.link-body ul li a {
    display: block;
    width: 100%;
    padding: 6px 4px;
    color: #333;
    text-decoration: none
}

.link-body ul li a:hover {
    color: var(--accent-green);
    text-decoration: none
}

/* 小屏幕调整为两列或单列以保持可读性 */
@media (max-width: 800px) {
    /* 两列：每列宽度为 (100% - gap) / 2 */
    .link-body ul li {
        flex: 0 0 calc((100% - 8px) / 2);
        max-width: calc((100% - 8px) / 2)
    }
}

@media (max-width: 420px) {
    .link-body ul li {
        flex: 0 0 100%;
        max-width: 100%
    }
}

/* 页脚 */
#footer {
    background: var(--main-color);
    color: #fff;
    padding: 24px 0
}

.footer-inner {
    display: flex;
    justify-content: center;
    align-items: center
}

.footer-info {
}

.footer-qr {
}