@charset "utf-8";

/* ==========================================================================
   1. 配置中心 (CSS Variables)
   ========================================================================== */
:root {
  /* --- 品牌色 (政府/企业常用蓝) --- */
  --color-primary: #cd3729;
  --color-embellish: #8f231a;
  --color-corner: #fdaaa2;
  --color-line: #ffd7d3;
  --color-secondary: #f0f2f5;
  --color-text-main: #333333;
  --color-text-sub: #666666;
  --color-border: #e1e1e1;

  /* --- 核心：流体字号 (Clamp) --- */
  /* 移动端到1920px PC端的平滑过渡 */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* 12px - 14px */
  --fs-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); /* 14px - 16px */
  --fs-base: clamp(1rem, 0.95rem + 0.4vw, 1.125rem); /* 16px - 18px (正文) */
  --fs-md: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); /* 18px - 24px (小标题) */
  --fs-lg: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24px - 32px (中标题) */
  /* --fs-xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); 32px - 56px (大标题) */
  --fs-xl: clamp(2rem, 1.8rem + 0.5vw, 2.5rem);
  /* Level 2: 40px -> 48px (新增：特大号) */
  --fs-2xl: clamp(2.5rem, 2.3rem + 0.5vw, 3rem);
  /* Level 3: 48px -> 56px (新增：超大号) */
  --fs-3xl: clamp(3rem, 2.8rem + 0.5vw, 3.5rem);

  /* --- 间距系统 (REM) --- */
  --space-xs: 0.5rem; /* ~8px */
  --space-sm: 1rem; /* ~16px */
  --space-md: 2rem; /* ~32px */
  --space-lg: 4rem; /* ~64px */

  /* --- 容器宽度 --- */
  /* PC端内容区最大宽度 1400px (基于16px换算) */
  --container-max-width: 87.5rem;

  --container-padding: 1.5rem;
}

/* ==========================================================================
   2. 全局重置 (Reset & Base)
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* 保持可访问性，允许缩放 */
  -webkit-text-size-adjust: 100%;
}
header,
footer,
nav,
section,
article {
  display: block;
}
html {
  /* 基础字号 16px，作为 1rem 的基准 */
  font-size: 16px;
  scroll-behavior: smooth;
}

@media (max-width: 768px) and (orientation: portrait) {
  html {
    font-size: 4.2vw;
  }
}
/* 当宽度超过 1920px 时，启动整体缩放模式 */
@media (min-width: 1921px) {
  html {
    /* 
       计算逻辑：100vw / (1920 / 16) = 100vw / 120
       效果：页面元素、字体、间距全部等比放大
    */
    font-size: clamp(16px, 0.83333vw, 50px);
  }
}
body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei',
    'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: var(--color-text-main);
  background-color: #fff;
  overflow-x: hidden;
  /* 使用流体正文字号 */
  font-size: var(--fs-base);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
a:hover {
  opacity: 0.96;
}
ul,
li {
  list-style: none;
}

/* ==========================================================================
   3. 布局容器系统 (Layout System)
   ========================================================================== */

/* Level 1: 全宽容器 (用于背景通栏) */
.maxcontainer {
  width: 100%;
  position: relative;
  /* 可选：清除内部浮动，虽然我们主要用 Grid/Flex */
  display: flow-root;
}

/* Level 2: 内容限制容器 (居中) */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
}
/* ================= 页脚整体容器 ================= */
.sxtopics2026-common-footer {
  padding-top: var(--space-lg);
}
/* 链接通用样式 */
.sxtopics2026-common-footer a {
  color: #fff;
}
.sxtopics2026-common-footer a:hover {
  text-decoration: underline;
}

/* ================= 需求 1：上半部分 (InfoBox) ================= */
/* 左右两端分布，垂直居中 */
.sxtopics2026-footer-infobox {
  display: flex;
  justify-content: space-between; /* 关键：左右撑开 */
  align-items: center; /* 关键：垂直居中 */
  padding-bottom: var(--space-lg); /* 与下方版权区的间距 */
}

/* 左侧信息栏：左对齐，分两行 */
.sxtopics2026-common-infos {
  text-align: left;
  display: flex;
  flex-direction: column; /* 上下排列 */
  gap: var(--space-xs); /* dt 和 dd 的间距 */
}

/* dt (关于我们等链接) */
.sxtopics2026-common-infos dt {
  font-size: var(--fs-sm);
  color: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 手机端防溢出 */
  justify-content: center;
}

.sxtopics2026-common-infos dt a {
  position: relative; /* 为伪元素定位做参照 */

  /* 改用 padding 控制间距，让竖线居中 */
  padding: 0 1rem;
  color: #fff;
}
.sxtopics2026-common-infos dt a::before {
  content: ''; /* 空内容，用来画线 */
  position: absolute;
  left: 0; /* 定位到最左侧 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精确修正垂直居中 */

  /* 竖线的尺寸与颜色 */
  width: 1px;
  height: 1em; /* 线高，可以根据字号微调 */
  background-color: #ccc; /* 浅灰色，不要太抢眼 */

  /* 如果你觉得画线太麻烦，想直接用字符 '|'，请注释上面几行，用下面这行： */
  /* content: '|'; color: #ccc; top: auto; transform: none; position: static; margin-right: 5px; */
}

/* ================= 去掉第一个链接前面的竖线 ================= */
.sxtopics2026-common-infos dt a:first-child {
  padding-left: 0; /* 第一个链接不需要左边距 */
}

.sxtopics2026-common-infos dt a:first-child::before {
  display: none; /* 隐藏第一个链接的伪元素 */
}
/* dd (主办单位等) */
.sxtopics2026-common-infos dd {
  font-size: var(--fs-xs);
  color: #fff;
}

/* ================= 需求 2：右侧 APP 图标区 ================= */
/* 三个水平排列，图在上字在下 */
.footer-copyright-apps {
  display: flex; /* 水平排列 */
  gap: var(--space-md); /* 图标组之间的间距 */
}

.footer-copyright-apps li {
  display: flex;
  flex-direction: column; /* 关键：图在上，字在下 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center;
  text-align: center;
  font-size: var(--fs-sm);
  color: #fff;
}

.footer-copyright-apps li img {
  width: 4rem; /* 限制图标大小，根据实际调整 */
  height: auto;
  margin-bottom: var(--space-xs); /* 图与字的间距 */
  display: block;
}

/* ================= 需求 3：版权区域背景 ================= */
/* 100%宽度，背景色处理 */
.sxtopics2026-common-copyright {
  width: 100%;
  background-color: rgba(40, 40, 40, 0.2);
}

/* ================= 需求 4：版权信息内部居中 ================= */
/* 子元素水平居中 */
.footer-copyright-infos {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  text-align: center;
  font-size: var(--fs-sm);
}
.footer-copyright-infos p {
  line-height: 1.8;
  color: #fff;
  display: flex;
  align-items: center;
}

.footer-copyright-infos p a {
  margin: 0 0.625rem; /* 备案号之间的间距 */
  display: inline-flex;
  align-items: center;
}
.footer-copyright-infos p img {
  margin-right: 0.375rem;
  height: 1em;
  width: auto;
}

/* 底部图标组 (党政机关等图标) */
.footer-copyright-icons {
  display: flex;
  gap: var(--space-xs);
  margin-left: var(--space-sm);
}
.footer-copyright-icons img {
  height: 2rem; /* 限制图标高度 */
  width: auto;
}

/* ==========================================================================
   6. 通用工具类 (Utilities)
   ========================================================================== */
/* 字体大小 */
.fz-xs {
  font-size: var(--fs-xs);
}
.fz-base {
  font-size: var(--fs-base);
}
.fz-md {
  font-size: var(--fs-md);
  font-weight: 600;
}
.fz-lg {
  font-size: var(--fs-lg);
  font-weight: 700;
}
.fz-xl {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
}

/* 40px - 48px */
.fz-2xl {
  font-size: var(--fs-2xl);
  font-weight: 800; /* 字号越大，字重通常越重或越细，看设计风格，这里设为更粗 */
  line-height: 1.2;
}

/* 48px - 56px */
.fz-3xl {
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1.1; /* 字号极大时，行高要收紧 */
}
/* 文本对齐 */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}

/* 颜色背景辅助 */
.bg-gray {
  background-color: var(--color-secondary);
}
.bg-primary {
  background-color: var(--color-primary);
  color: #fff;
}

/* 间距辅助 (全部使用 rem) */
.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.py-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.py-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

/* 显示隐藏控制 */
.m-hide {
  display: block;
}
.pc-hide {
  display: none;
}
/* 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
}

/* 桌面 */
@media (min-width: 1025px) and (max-width: 1440px) {
}

/* 大屏 */
@media (min-width: 1441px) {
}
@media (max-width: 768px) {
  .m-hide {
    display: none !important;
  }
  .pc-hide {
    display: block !important;
  }

  /* 手机上改为上下堆叠 */
  .sxtopics2026-footer-infobox {
    flex-direction: column;
    align-items: flex-start; /* 或者 center */
    gap: 1.25rem;
    padding-bottom: var(--space-sm);
  }

  .sxtopics2026-common-infos,
  .footer-copyright-apps {
    width: 100%;
    justify-content: space-around; /* 图标分散对齐 */
    align-items: center;
  }
  .footer-copyright-apps {
    gap: var(--space-sm); /* 减小间距 */
  }

  .footer-copyright-apps li img {
    width: 4rem; /* 手机上图标稍小 */
  }
  .sxtopics2026-common-infos dt {
    display: flex;
    flex-wrap: wrap; /* 链接多行显示 */
    gap: 0;
  }
  .sxtopics2026-common-infos dt a:first-child {
    padding-left: 0.75rem;
  }
  .sxtopics2026-common-infos dt a {
    padding: 0 0.75rem;
  }
  .footer-copyright-infos {
    flex-direction: column;
    gap: var(--fs-sm);
  }
  .footer-copyright-infos p {
    flex-direction: column;
  }
}