@charset "utf-8";
/* ============================================================
   页脚「联系我们 / 网站导航」列
   全站加载，选择器全部以 #site-footer 限定，只作用于页脚
   配色走页脚自身变量 --qt / --qf / --qm / --ql，深浅两种风格自动跟随
   ============================================================ */

/* ---------- 自身携带配色变量 ----------
   页脚变量原本由合并样式 opt*.min.css 提供；一旦该文件是旧缓存或未上传，
   --qm / --qf 全部失效，图标（stroke:currentColor）会继承成深灰，
   叠在深色页脚上等于“看不见”。这里本地兜底一份，保证 footer.css 自给自足。 */
#site-footer.qs-ft{
  --qb:#0b0d10;--qt:#eef2f7;--qf:#9aa3b2;--qm:#6c7686;--ql:rgba(255,255,255,.07);
}
#site-footer.qs-ft--light{
  --qb:#fbfbfc;--qt:#14181f;--qf:#5c6472;--qm:#98a0ad;--ql:rgba(15,23,42,.09);
}

/* ---------- 三列布局：品牌 / 联系我们 / 网站导航 ---------- */
#site-footer .qs-ft-top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:26px 36px;
}
#site-footer .qs-ft-brand{flex:1 1 320px;max-width:520px}
#site-footer .qs-ft-contact{flex:0 1 322px;min-width:0}
#site-footer .qs-ft-navbox{flex:0 1 250px;min-width:0}

/* ---------- 列标题 ---------- */
#site-footer .qs-ft-ctitle{
  margin:0 0 14px;
  padding:0;
  font-size:13px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--qt);
}
#site-footer .qs-ft-ctitle::after{
  content:"";
  display:block;
  width:20px;
  height:2px;
  margin-top:8px;
  border-radius:1px;
  background:currentColor;
  opacity:.3;
}

/* ---------- 联系条目 ---------- */
#site-footer .qs-ft-clist{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
#site-footer .qs-ft-citem{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  margin:0;
  padding:0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--qf);
}
/* 图标固定 20×20、不压缩，与第一行文字的中线对齐；SVG 不参与基线排版。
   图标是实心剪影：这里只负责尺寸与配色，SVG 内部不写描边，也不会随文字颜色变化。
   颜色走 currentColor，CSS 本身也给了写死的兜底值；万一 CSS 没加载，SVG 上还有 fill 属性，
   两种情况下图标都不会消失。 */
#site-footer .qs-ft-cico{
  flex:0 0 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-top:1px;
  line-height:0;
  color:#e6edf8;   /* 深色页脚上的图标底色，写死避免变量缺失时隐身 */
}
#site-footer.qs-ft--light .qs-ft-cico{color:#3a4453}
#site-footer .qs-ft-cico svg{
  display:block;
  width:20px;
  height:20px;
  overflow:visible;
  fill:currentColor;   /* 覆盖 SVG 上的 fill 属性，让浅色主题能整体换色 */
  stroke:none;
}
/* 标签统一占 3 个字宽（「联系人」最长），冒号后的内容左端对齐成一条竖线 */
#site-footer .qs-ft-ck{
  flex:0 0 auto;
  min-width:4.1em;   /* 「联系人」3 字 + 冒号，保证冒号后的内容对齐成一条竖线 */
  white-space:nowrap;
  color:var(--qm);
}
#site-footer .qs-ft-ck::after{content:"："}
#site-footer .qs-ft-cv{
  flex:1 1 auto;
  min-width:0;
  word-break:break-word;
  overflow-wrap:anywhere;
}
#site-footer .qs-ft-cv a{
  color:var(--qf);
  text-decoration:none;
  border-bottom:1px dotted var(--ql);
  transition:color .18s,border-color .18s;
}
#site-footer .qs-ft-cv a:hover{color:var(--qt);border-bottom-color:currentColor}

/* 二维码 */
#site-footer .qs-ft-qr{margin:14px 0 0}
#site-footer .qs-ft-qr img{
  display:block;
  width:82px;
  height:82px;
  padding:4px;
  object-fit:cover;
  background:#fff;
  border:1px solid var(--ql);
  border-radius:6px;
}

/* ---------- 导航链接：竖向排布，与联系条目同节奏 ---------- */
#site-footer .qs-ft-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  max-width:none;
  padding-top:0;
}

/* ---------- 响应式 ---------- */
@media screen and (max-width:900px){
  #site-footer .qs-ft-top{gap:24px 28px}
  #site-footer .qs-ft-brand{flex:1 1 100%;max-width:none}
  #site-footer .qs-ft-contact{flex:1 1 240px}
  #site-footer .qs-ft-navbox{flex:1 1 200px}
}
@media screen and (max-width:560px){
  #site-footer .qs-ft-contact,
  #site-footer .qs-ft-navbox{flex:1 1 100%}
  #site-footer .qs-ft-ctitle{margin-bottom:10px;font-size:12.5px}
  #site-footer .qs-ft-ctitle::after{margin-top:6px;width:16px}
  #site-footer .qs-ft-citem{font-size:12px;gap:6px}
  #site-footer .qs-ft-cico{flex-basis:18px;width:18px;height:18px;margin-top:1px}
  #site-footer .qs-ft-cico svg{width:18px;height:18px}
  #site-footer .qs-ft-qr img{width:72px;height:72px}
}