@charset "utf-8";

/*!
 * @名称：fluid.css
 * @功能：频道页 / 栏目页 / 内容页 宽度自适应（大屏铺满）
 *        覆盖 head.css、page.css 里 1200px 的定宽容器，使页面在大屏下横向铺满。
 *        由 indexs_last/index_head.htm 统一引入，所有引用该头部的页面都会加载。
 *        最小宽度仍由 head.css 的 body{min-width:1200px} 保证，小屏横向滚动。
 * @说明：首页单独用 index_fluid.css；本文件不涉及首页专有的 .maincontent 等结构。
 */

/* ===== 公共框架：顶部信息条 / 头部 / 主导航 / 页脚 =====
   这四块在每个页面都是同一份 markup（来自 index_head.htm），
   原来是 1200px 居中，改为“铺满 - 左右各 20px”，与正文边距对齐。 */
.topnav .inner,
.topframe,
#main_nav,
.bottomframe .bqsy {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
}

/* ===== 正文容器 =====
   page.css 的 .content 与 head.css 的 .mainframe .content 都是 1200px 定宽。
   原 page.css 给 .content 留了 40px 右内边距（对应左侧 40px 的错位），
   改成自适应后左右各 20px 外边距更匀称，故一并去掉这个内边距。 */
.mainframe > .content {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
    padding-right: 0;
}

/* ===== 面包屑“当前位置” =====
   page.css 把它写成 1190px 居中，容器变宽后它会缩在页面中间，改成占满一行。 */
.mainframe .content .location {
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

/* ===== 频道页 / 内容页：左正文栏 + 右栏 =====
   head.css 里 .leftframe 860px、.rightframe 280px。
   右栏放的是固定尺寸的公告 / 视频 / 专题图（图片按 258px 输出），保持 280px 不动；
   左栏改为占满剩余宽度（右栏 280px + 20px 间距）。 */
.mainframe .content .leftframe {
    width: calc(100% - 300px);
}

.mainframe .content .rightframe {
    width: 280px;
}

/* ===== 栏目页：左侧栏目导航 + 右侧列表 =====
   .list .leftframe 是 250px，背景图 leftnav.png 本身就 250px 宽，拉伸会失真，保持不动；
   .list .rightframe 原来固定 920px，改为占满剩余宽度（左栏 250px + 20px 间距）。
   这两条写在上面 .leftframe 规则之后：选择器权重相同（都是三级类），后写的生效，
   用来把栏目页的左导航从“占满剩余”改回固定的 250px。 */
.mainframe .list .leftframe {
    width: 250px;
}

.mainframe .list .rightframe {
    width: calc(100% - 270px);
}

/* ===== 栏目页图文列表 =====
   列表项里“标题”与右侧 140px 缩略图左右并排，原来标题固定 80%，
   大屏下标题与缩略图之间会空出一截，改为占满除缩略图外的宽度。 */
.list .newscontent ul li .newslist_title,
.newscontent ul li .newslist_title {
    width: calc(100% - 160px);
}

/* ===== 服务平台频道页（channel_last/channel_fwdt/fwdt_index_new.htm）=====
   fwdt.css 里 .fwdt-service ul 固定 1200px、.activity-forecast 固定 564px，
   容器变宽后这两处右侧会空出一大块。
   右侧焦点图 #fwdtSlide 的图片按 430px 输出，保持 564px 不动，左侧列表占满剩余宽度。 */
/* 顶部大图：fwdt.css 里 .banner 固定 1200px，而图片本身是 1920x400，
   被裁掉了左右两边。改成自适应宽度后按图片实际尺寸居中完整显示。 */
.banner {
    width: auto;
}

.fwdt-service ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.fwdt-service ul li {
    float: none;
    width: auto;
    flex: 1;
    margin: 20px 0;
}

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

.activity-forecast {
    width: calc(100% - 604px);
}

/* “职工维权”一行左右两块原来各占 47%，中间会空出 6%（大屏下约 150px），
   改成各占一半减去 20px 的间距，正好铺满整行。 */
.zxjd,
.alfx {
    width: calc(50% - 20px);
}

/* ===== 部门 / 机构设置页（menu_1 模板 + zjgh.css）=====
   zjgh.css 里 .menu-jgsz 固定 300px 靠左、.leftframe-jgsz 固定 850px 靠右，
   加起来 1150px 是原来 1200px 容器的尺寸；容器变宽后右栏不动，右边会空出很大一块。
   左栏保持 300px（内部是固定尺寸的图片），右栏改为占满剩余宽度。
   这里只写一级类选择器：权重低于 jgsz.css 里
   .mainframe .content .leftframe-jgsz{width:300px;float:left} 那条（左栏写法），
   所以那种“机构设置”版式依旧保持 300px，不会误伤。 */
.leftframe-jgsz {
    width: calc(100% - 320px);
}

/* 机构设置栏目的 38 个静态页（/zj_zgh/zjgh_jgsz/category_*.html）用 jgsz.css，
   里面 .mainframe .content .rightframe-jgsz 固定 850px 靠右，同样会空出右侧一大块。
   这三条权重与 jgsz.css 相同（都是三级类），本文件在头部片段里、加载更靠后，所以生效；
   而左栏 .mainframe .content .leftframe-jgsz 保持 jgsz.css 的 300px 不动。 */
.mainframe .content .rightframe-jgsz {
    width: calc(100% - 320px);
}

/* 右栏内部的两块内容（部门领导 / 部门职责）随栏宽铺满 */
.mainframe .content .rightframe-jgsz .box-glb {
    width: 100%;
}

/* ===== 栏目页图片/视频列表（工会视频、职工文化等）=====
   .piccontent li 原来固定 200px 宽、左右各 30px 外边距，
   大屏下一行排满后右侧还会空出近 300px。
   改用 grid 等分：每列最少 200px，按容器宽度自动决定列数并均分，
   卡片尺寸一致，右侧不再留出空白。 */
.piccontent ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 40px 30px;
    margin-left: 0;
}

.piccontent li {
    float: none;
    width: auto;
    margin: 0;
}

/* ===== 信息公开 / 反映求助频道页的子栏目块（page/public/theme/style/xxgk.css）=====
   这几个块原来都给死了宽度：xxgk-list1/2 各 540px、xxgk-list3 350px、xxgk-list5 350px，
   在 1200px 容器里刚好排两行；容器变宽后它们宽度不变，右边会空出一大片。
   - list1（左）/ list2（右）：各占一半减 20px 间距；
   - list3 有两条（法律法规、政策文件）都靠左，list5（下载中心）靠右，三者等分一行。
     list3 原本带 margin-right:75px!important，必须同样用 !important 才能盖掉；
     宽度用 calc((100% - 60px)/3) 而不是精确的 (100% - 40px)/3，
     留 20px 余量避免小数宽度取整后第三块被挤到下一行。 */
.xxgk-list1,
.xxgk-list2 {
    width: calc(50% - 20px);
}

.xxgk-list3 {
    width: calc((100% - 60px) / 3) !important;
    margin-right: 20px !important;
}

.xxgk-list5 {
    width: calc((100% - 60px) / 3);
}

/* ===== 视频内容页（content_new/content_video_new.htm）=====
   new_content.css 里 #video_contentnew 固定 1200px 且左右 auto 居中，
   .videoBoxL 固定 860px；外层 .content 变宽后它在中间，右侧同样空一大块。
   .videoBoxR（来源 / 发布时间 / 点赞）是固定尺寸的小栏，保持 260px。 */
#video_contentnew {
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

#video_contentnew .videoBox .videoBoxL {
    width: calc(100% - 290px);
}

/* ===== 领导动态等图文列表（zjgh.css 的 .lddt）=====
   与栏目页图文列表同理：标题固定 630px，改为占满除右侧缩略图外的宽度。 */
.lddt li .newslist_title {
    width: calc(100% - 160px);
}

/* ===== 横向滚动图组（zjgh.css 的 .pic_scroll）=====
   .Scoll_content 固定 1130px 的滚动视口，左右各留 35px 给翻页箭头，
   容器变宽后右侧会空出一大块，改成占满整行减去两侧箭头。 */
.pic_scroll .Scoll_content {
    width: calc(100% - 70px);
}