@charset "utf-8";

/*!
 * @名称：index_fluid.css
 * @功能：首页（indexs_last/index.htm）宽度自适应
 *        覆盖 base.css 中 1200px 的定宽容器，使页面在大屏下横向铺满。
 *        最小宽度仍由 base.css 的 body{min-width:1200px} 保证，小屏横向滚动。
 * @说明：仅 indexs_last/index.htm 引用，不影响其它页面。
 */

/* 各外层容器由 1200px 定宽改为“铺满 - 左右留白”，
   上下外边距沿用 base.css 中的设定 */
.topnav .inner,
.topframe,
#main_nav,
.maincontent,
.service,
.friendlink {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
}

/* 白色底衬随容器铺满 */
.mainbg {
    width: 100%;
}

/* 左侧导航保持 230px（背景图 nav_bg.gif 本身即 230px 宽，拉伸会失真），
   右侧内容区占满剩余宽度 */
.rightframe {
    width: auto;
    left: 230px;
    right: 0;
}

/* 焦点图区域保持设计尺寸 430px（图片按 430x295 输出，放大将模糊），
   新闻列表自适应占满右侧剩余宽度 */
.news {
    float: right;
    width: calc(100% - 490px);
}

/* 服务大厅：5 项等分铺满整行 */
.service ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.service ul li {
    float: none;
    width: 19%;
    margin: 20px 0;
}

.service ul li a {
    width: 100%;
}

/* 页面纹理背景在大屏下横向平铺（头部 .head 原本就是 repeat） */
.mainframe {
    background-repeat: repeat;
}

/* ===== 媒体矩阵：微信矩阵 / 微博矩阵 ===== */

/* 右侧内容区原来固定 885px 且靠右浮动，大屏下与左边那条竖排标签之间
   会空出一大片。tabs-bd 带 overflow-y:auto 本身就是 BFC，
   去掉 float 并让宽度自适应，它会自动占满竖排标签右侧的剩余宽度。 */
.weibo-section .tabs-bd {
    float: none;
    width: auto;
}

.weibo-section .tabs-bd .list {
    width: auto;
}

/* 微信矩阵原来固定每行 6 列（每列 100%/6），大屏下单列被拉得很宽、
   图标之间间距稀疏。改成：每个图标最少占 147px（原 885px / 6 列的单元格宽度），
   每行按屏幕宽度自动排满，右边不会留出空白。

   这里必须用 grid 而不是 flex。用 flex + flex-grow 时，拉伸是“按行单独算”的：
   最后一行格子少的时候，那几格会被拉得比上面的宽，左边缘就跟上面各列对不齐了。
   grid 的列宽由整块统一算出来，最后一行照样从第一列开始排，左侧永远对齐。 */
.juzhen-list-new ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(147px, 1fr));
}

/* 这个 <ul> 带 class="clearfix"，base.css 给它加了 ::before / ::after 伪元素用来清除浮动。
   换成 grid 之后，这两个伪元素本身也会变成一个“网格项”：::before 占掉第一格，
   第一个图标就被挤到第二列，左边多出一整格的空隙。
   grid 布局不需要清浮动，直接禁掉这两个伪元素。 */
.juzhen-list-new ul::before,
.juzhen-list-new ul::after {
    display: none;
}

.juzhen-list-new ul li {
    float: none;
    width: auto;
}