/* ==========================================================================
   首页区块：常见问题（FAQ）  .HomeF9
   仅首页加载，位于 main.css / tailwind.css 之后，所有规则均限定在 .HomeF9 内
   ========================================================================== */

/* ---------- PC / 移动 容器切换 ----------
   body 上的 is-pc / is-mb 由 header.php 按 UA 写入（桌面 UA => is-pc，移动 UA => is-mb）。
   UA 不能代表窗口宽度（平板、缩小的桌面窗口都可能是 is-pc），因此在 1000px 以下
   再按视口宽度兜底成移动版式，和 main.js / 手风琴自身的 1000px 断点保持一致。
   任一次断言（assert）失败都会导致两套结构同时显示 => 文档水平溢出，故不作任何多余堆叠。 */

/* 1) UA 判定 */
.HomeF9 .boxpc{display:none;}
body.is-pc .HomeF9 .boxpc{display:block;}
.HomeF9 .warp{display:none;}
body.is-mb .HomeF9 .warp{display:block;}

/* 2) 视口宽度兜底：桌面 UA 但窗口很窄时（平板 / 缩小的桌面窗口）也使用移动版式。
      body.is-pc .HomeF9 .boxpc 的权重是 (0,2,1)，所以这里必须用同等或更高权重才能覆盖，
      否则两套结构会同时显示、FAQ 内容重复并撑破布局。 */
@media screen and (max-width:999px){
  body.is-pc .HomeF9 .boxpc{display:none;}
  body .HomeF9 .warp{display:block;}
}

/* ---------- 区块容器 ---------- */
.HomeF9{
  position:relative;
  padding:2rem 0 2.4rem;
  background-color:#fff;
  overflow:hidden;
}
.HomeF9 .w1400{position:relative;}
.HomeF9 .MainTitle{padding-bottom:1.6rem;}
.HomeF9 .MainTitle .h3{color:#333;font-weight:normal;letter-spacing:.02em;}

/* ---------- 桌面两栏 ---------- */
.HomeF9 .faqWrap{
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
  gap:4%;
  padding-top:.4rem;
  font-size:14px;
}
.HomeF9 .faqIn{
  -webkit-box-flex:0;-ms-flex:0 0 35%;flex:0 0 35%;
  max-width:35%;
  position:-webkit-sticky;position:sticky;top:120px;
  padding-right:.5rem;
}
.HomeF9 .faqIn .eyebrow{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:10px;
  font-size:13px;line-height:1;letter-spacing:.24em;text-transform:uppercase;
  color:#263c92;font-weight:600;
  padding:0 0 1rem;
}
.HomeF9 .faqIn .eyebrow:after{
  content:'';display:block;width:30px;height:2px;background:#f4dd56;border-radius:2px;margin-top:1px;
}
.HomeF9 .faqIn .h3{
  font-size:26px;line-height:1.4;font-weight:600;color:#263c92;
  padding:0 0 .7rem;
  letter-spacing:.01em;
}
.HomeF9 .faqIn .lede{
  font-size:16px;line-height:1.9;color:#6e7976;
  padding:0 0 1.6rem;
  max-width:24em;
}
.HomeF9 .more{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:8px;
  font-size:15px;font-weight:600;color:#263c92;
  line-height:1.4;
  padding:2px 0;
  -webkit-transition:color .3s;-o-transition:color .3s;transition:color .3s;
}
.HomeF9 .more .moreIcon{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  width:16px;height:16px;
  -webkit-transition:-webkit-transform .3s;transition:transform .3s,-webkit-transform .3s;
}
.HomeF9 .more .moreIcon svg{width:16px;height:16px;display:block;}
.HomeF9 .more:hover{color:#16265f;}
.HomeF9 .more:hover .moreIcon{-webkit-transform:translateX(4px);-ms-transform:translateX(4px);transform:translateX(4px);}
.HomeF9 .more:focus-visible{outline:2px solid #263c92;outline-offset:4px;border-radius:2px;}

/* ---------- 列表（桌面） ---------- */
.HomeF9 .faqList{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  min-width:0;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  gap:12px;
}
.HomeF9 .faqItem{
  position:relative;
  background:#fff;
  border:1px solid #e8e5e0;
  border-radius:10px;
  -webkit-transition:border-color .3s,box-shadow .3s;-o-transition:border-color .3s,box-shadow .3s;transition:border-color .3s,-webkit-box-shadow .3s,box-shadow .3s;
}
.HomeF9 .faqItem:hover{border-color:#c9cfdf;}
.HomeF9 .faqItem.on{border-color:#cfd5e6;box-shadow:0 6px 18px rgba(38,60,146,.06);}

/* 问题行 */
.HomeF9 .faqQ{
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  gap:20px;
  min-height:56px;
  padding:16px 22px;
  cursor:pointer;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  border-radius:10px;
  -webkit-transition:background-color .3s;-o-transition:background-color .3s;transition:background-color .3s;
}
.HomeF9 .faqQ:hover{background:#fbfaf7;}
.HomeF9 .faqQ:focus{outline:none;}
.HomeF9 .faqQ:focus-visible{outline:2px solid #263c92;outline-offset:-2px;}
.HomeF9 .faqQ .h3{
  font-size:17px;line-height:1.55;font-weight:600;color:#333;
  padding:0;
  -webkit-transition:color .3s;-o-transition:color .3s;transition:color .3s;
}
.HomeF9 .faqQ:hover .h3{color:#263c92;}
.HomeF9 .faqItem.on .faqQ .h3{color:#263c92;}

/* 加号图标：闭合 => 加号，展开 => 旋转 45° 变叉号并变主题色 */
.HomeF9 .faqIcon{
  position:relative;
  -webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;
  width:16px;height:16px;
  color:#98a0a8;
  -webkit-transition:-webkit-transform .3s,color .3s;transition:transform .3s,color .3s,-webkit-transform .3s;
}
.HomeF9 .faqIcon:before,
.HomeF9 .faqIcon:after{
  content:'';position:absolute;background:currentColor;border-radius:2px;
}
.HomeF9 .faqIcon:before{top:50%;left:0;width:100%;height:1.5px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
.HomeF9 .faqIcon:after{left:50%;top:0;width:1.5px;height:100%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
.HomeF9 .faqQ:hover .faqIcon{color:#263c92;}
.HomeF9 .faqItem.on .faqIcon{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);color:#263c92;}

/* 答案：grid-template-rows 0fr -> 1fr 手风琴 */
.HomeF9 .faqA{display:grid;grid-template-rows:0fr;min-height:0;transition:grid-template-rows .3s ease;}
.HomeF9 .faqItem.on .faqA{grid-template-rows:1fr;}
.HomeF9 .faqAIn{min-height:0;overflow:hidden;}
/* 关键：grid 项默认 min-height:auto 会被内容撑开，导致 0fr 收起时也被内容顶高（首项之后的面板全部展开）
   这里 .faqA 已是 grid 容器，其唯一项 .faqAIn 也必须是 min-height:0 —— 已在上方声明。 */
.HomeF9 .faqATxt{
  padding:0 22px 0 22px;
  font-size:15px;line-height:1.85;color:#6e7976;
  opacity:0;
  -webkit-transition:padding .3s,opacity .3s;-o-transition:padding .3s,opacity .3s;transition:padding .3s,opacity .3s;
}
.HomeF9 .faqItem.on .faqATxt{padding-bottom:20px;opacity:1;}

/* 单项“查看详情”链接 */
.HomeF9 .faqLink{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:6px;
  font-size:14px;font-weight:600;color:#263c92;
  margin:0 22px 0 22px;
  -webkit-transition:color .3s;-o-transition:color .3s;transition:color .3s;
}
.HomeF9 .faqLink .moreIcon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:16px;height:16px;-webkit-transition:-webkit-transform .3s;transition:transform .3s,-webkit-transform .3s;}
.HomeF9 .faqLink .moreIcon svg{width:16px;height:16px;display:block;}
.HomeF9 .faqLink:hover .moreIcon{-webkit-transform:translateX(4px);-ms-transform:translateX(4px);transform:translateX(4px);}
.HomeF9 .faqItem.on .faqLink{margin-bottom:18px;}

/* ---------- 移动端 ---------- */
.HomeF9 .warp{padding:0;}
.HomeF9 .warp .MainTitle{padding-bottom:1.2rem;}
.HomeF9 .warp .faqIn{padding:0 0 1.2rem;position:static;max-width:none;flex:none;}
.HomeF9 .warp .faqIn .eyebrow{font-size:12px;padding-bottom:.7rem;}
.HomeF9 .warp .faqIn .lede{font-size:14px;line-height:1.8;padding:0;max-width:none;}
.HomeF9 .warp .faqList{gap:10px;}
.HomeF9 .warp .faqItem{border-radius:8px;}
.HomeF9 .warp .faqQ{min-height:48px;padding:13px 14px;gap:12px;border-radius:8px;}
.HomeF9 .warp .faqQ .h3{font-size:15px;line-height:1.55;}
.HomeF9 .warp .faqIcon{width:14px;height:14px;}
.HomeF9 .warp .faqATxt{font-size:14px;line-height:1.8;padding:0 14px;}
.HomeF9 .warp .faqItem.on .faqATxt{padding-bottom:16px;}
.HomeF9 .warp .faqLink{margin:0 14px 0 14px;font-size:13px;}
.HomeF9 .warp .faqItem.on .faqLink{margin-bottom:14px;}
.HomeF9 .faqMore{margin-top:1.4rem;}
.HomeF9 .faqMore .more{font-size:14px;}

/* ---------- 断点 ---------- */
@media screen and (min-width:640px){
  .HomeF9{padding:2.4rem 0 3rem;}
  .HomeF9 .faqIn .h3{font-size:28px;}
}
@media screen and (min-width:768px){
  .HomeF9 .MainTitle{padding-bottom:2rem;}
}
@media screen and (min-width:1000px){
  .HomeF9{padding:3.4rem 0 4.4rem;}
  .HomeF9 .MainTitle{padding-bottom:2.4rem;}
  .HomeF9 .faqIn .h3{font-size:30px;}
  .HomeF9 .faqIn .lede{font-size:16px;}
  .HomeF9 .faqList{gap:14px;}
  .HomeF9 .faqQ{min-height:60px;padding:18px 24px;}
  .HomeF9 .faqQ .h3{font-size:17px;}
  .HomeF9 .faqATxt{padding:0 24px;font-size:15px;}
  .HomeF9 .faqItem.on .faqATxt{padding-bottom:22px;}
  .HomeF9 .faqLink{margin-left:24px;margin-right:24px;}
}
@media screen and (min-width:1300px){
  .HomeF9{padding:4rem 0 5rem;}
  .HomeF9 .faqIn .h3{font-size:32px;}
  .HomeF9 .faqIn .lede{font-size:17px;}
  .HomeF9 .faqQ{min-height:62px;padding:20px 28px;}
  .HomeF9 .faqATxt{padding-left:28px;padding-right:28px;}
  .HomeF9 .faqItem.on .faqATxt{padding-bottom:24px;}
  .HomeF9 .faqLink{margin-left:28px;margin-right:28px;}
}
@media screen and (min-width:1600px){
  .HomeF9{padding:4.6rem 0 5.6rem;}
  .HomeF9 .faqIn .h3{font-size:34px;}
}
/* 1000px 以下（= 移动版式生效区间）统一使用紧凑版式，避免平板宽度下沿用桌面字号 */
@media screen and (max-width:999px){
  .HomeF9{padding:1.6rem 0 2rem;}
  .HomeF9 .MainTitle{padding-bottom:1.2rem;}
  .HomeF9 .w1400{margin:0;padding:0 15px;}
  .HomeF9 .faqQ{min-height:48px;padding:13px 14px;}
  .HomeF9 .faqQ .h3{font-size:15px;}
  .HomeF9 .faqATxt{font-size:14px;padding:0 14px;}
  .HomeF9 .faqItem.on .faqATxt{padding-bottom:16px;}
  .HomeF9 .faqIcon{width:14px;height:14px;}
  .HomeF9 .faqIn .h3{font-size:20px;}
  .HomeF9 .faqIn .lede{font-size:14px;}
}
@media screen and (min-width:640px) and (max-width:999px){
  .HomeF9{padding:2.4rem 0 3rem;}
  .HomeF9 .faqIn .h3{font-size:24px;}
  .HomeF9 .faqQ{min-height:54px;padding:16px 18px;}
  .HomeF9 .faqQ .h3{font-size:16px;}
  .HomeF9 .faqATxt{font-size:15px;padding:0 18px;}
}

/* 降低动效偏好 */
@media (prefers-reduced-motion:reduce){
  .HomeF9 .faqA,
  .HomeF9 .faqIcon,
  .HomeF9 .more .moreIcon,
  .HomeF9 .faqLink .moreIcon{-webkit-transition-duration:.01ms;transition-duration:.01ms;}
}

/* ---------- 深色（亮字）模式：后台开启“文字浅色”时 ---------- */
.HomeF9.textLight .MainTitle .h3,
.HomeF9.textLight .faqQ .h3{color:#fff;}
.HomeF9.textLight .faqIn .eyebrow{color:#f4dd56;}
.HomeF9.textLight .faqIn .h3{color:#fff;}
.HomeF9.textLight .faqIn .lede{color:rgba(255,255,255,.78);}
.HomeF9.textLight .more,
.HomeF9.textLight .faqLink{color:#f4dd56;}
.HomeF9.textLight .more:hover,
.HomeF9.textLight .faqLink:hover{color:#fff;}
.HomeF9.textLight .faqItem{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);}
.HomeF9.textLight .faqItem:hover{border-color:rgba(255,255,255,.34);}
.HomeF9.textLight .faqItem.on{border-color:rgba(244,221,86,.55);box-shadow:none;}
.HomeF9.textLight .faqQ:hover{background:rgba(255,255,255,.05);}
.HomeF9.textLight .faqQ:hover .h3,
.HomeF9.textLight .faqItem.on .faqQ .h3{color:#f4dd56;}
.HomeF9.textLight .faqIcon{color:rgba(255,255,255,.55);}
.HomeF9.textLight .faqQ:hover .faqIcon,
.HomeF9.textLight .faqItem.on .faqIcon{color:#f4dd56;}
.HomeF9.textLight .faqATxt{color:rgba(255,255,255,.82);}
.HomeF9.textLight .faqQ:focus-visible{outline-color:#f4dd56;}