/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 关键：让padding不撑大盒子 */
}

body {
    background-color: #f6f9fa;
    /* 移除 body 的 width: 100%，默认就是100% */
    font-family: "宋体", serif, Arial, Helvetica;
}

a:link, a:visited {
    text-decoration: none;
    color: #212121;
}

/* --- 主容器：适配移动端的核心 --- */
.body-all {
    width: 100%;           /* 宽度占满屏幕 */
    max-width: 900px;      /* 大屏上最大不超过900px */
    margin: 0 auto;        /* 居中显示 */
    min-height: 100vh;     /* 保证至少占满一屏高度 */
    overflow-x: hidden;    /* 防止横向滚动条 */
}

/* --- 导航栏：固定定位也要适配宽度 --- */
.top_bar {
    width: 100%;           /* 占满屏幕宽 */
    max-width: 900px;      /* 限制最大宽 */
    height: 80px;
    background-color: #f6f9fa;
    position: fixed;
    top: 0;
    left: 50%;             /* 配合 transform 实现居中 */
    transform: translateX(-50%);
    z-index: 999;
    /* 手机端导航可能需要简化，这里保持原结构但确保不溢出 */
}

.top_bar .top_ob {
    list-style-type: none;
    height: 50px;
    line-height: 80px;
    padding: 15px 0;
    display: flex;         /* 使用 Flex 代替 float */
    justify-content: center; /* 内容居中 */
    align-items: center;
    overflow: hidden;
}

/* 导航按钮适配 */
.top_block {
    /* 移除固定宽度和 float，改用 flex 子项 */
    flex: 0 0 auto;        /* 不伸缩，保持内容大小 */
    height: 50px;
    line-height: 50px;
    background-color: #212121;
    text-align: center;
    border-radius: 4px;
    box-shadow: 2px 5px 5px #eef6ea;
    margin: 0 2px;
    padding: 0 10px;       /* 用 padding 代替固定宽，适应文字长度 */
}

.top_block a {
    display: block;
    color: white;
    opacity: 0.9;
    font-size: 20px;
}

/* --- 正文容器 --- */
.container {
    margin-top: 100px;     /* 调整顶部间距，避免被固定导航遮挡 */
    width: 100%;
    max-width: 900px;
    padding: 0 10px;       /* 左右留白，防止贴边 */
    box-sizing: border-box;
}

/* --- 图片卡片区域：Flex 自动换行 --- */
.container .arr-border {
    display: flex;
    flex-wrap: wrap;       /* 允许换行 */
    justify-content: space-between; /* 两端对齐或居中 */
    gap: 15px;             /* 卡片间距 */
    margin: 10px 0;
}

.container .arr-border .box_border {
    /* 关键：手机端一行2个，大屏一行4个 */
    flex: 1 1 calc(50% - 10px); /* 基础宽度50%，减去gap的一半 */
    max-width: 210px;      /* 大屏上限 */
    box-sizing: border-box;
}

/* 媒体查询：大屏下一行显示4个 */
@media (min-width: 768px) {
    .container .arr-border .box_border {
        flex: 1 1 calc(25% - 15px);
    }
}

.container .arr-border .box_border .img-box {
    width: 100%;
    aspect-ratio: 1 / 1;   /* 保持正方形比例，替代固定height */
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.container .arr-border .box_border .img-box a {
    display: block;
    width: 100%;
    height: 100%;
}

.container .arr-border .box_border .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    display: block;
}

.container .arr-border .box_border p {
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 5px;
    text-align: center;    /* 文字居中更美观 */
}

.container img:hover {
    transform: scale(1.05);
}

/* --- 底部信息栏：Flex 替代 Float --- */
.container .body_bar,
.container .body_bar2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;       /* 允许换行 */
    justify-content: flex-start; /* 左对齐 */
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.container .body_bar .bar1,
.container .body_bar2 .bar2 {
    /* 移除固定宽度和 float */
    padding: 8px 15px;
    box-shadow: 2px 5px 5px #eef6ea;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;      /* 建议加背景色以便看清阴影 */
}

.container .body_bar .bar1 p,
.container .body_bar2 .bar2 p {
    font-size: 16px;       /* 手机端字体稍小 */
    opacity: 0.7;
    white-space: nowrap;   /* 防止文字换行破坏布局 */
}

/* --- 页脚：Flex 自动换行 --- */
.footing {
    width: 100%;
    max-width: 900px;
    background-color: #f5f8f9;
    margin-top: 50px;
    padding: 20px 0;
}

.footing_bottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;       /* 关键：自动换行 */
    justify-content: center; /* 居中对齐 */
    gap: 15px;
    padding: 0 10px;
}

.foot_cell, .foot_cell1, .foot_cell3 {
    /* 移除 float 和固定宽度 */
    font-size: 14px;
    opacity: 0.7;
    cursor: pointer;
    text-align: center;
}

/* 媒体查询：针对小屏幕手机的额外优化 */
@media (max-width: 480px) {
    .top_bar {
        height: 60px;      /* 手机导航栏稍微矮一点 */
    }
    .top_bar .top_ob {
        line-height: 60px;
    }
    .container {
        margin-top: 70px;
    }
    .container .arr-border .box_border {
        flex: 1 1 100%;    /* 极小屏幕下一行只显示1个卡片 */
        max-width: 100%;
    }
}