@charset "utf-8";
/* ============================================================
   常见问题 FAQ 页（2026-11 改版）
   分级分类选择 + 关键词搜索 + 手风琴问答
   适用于 faq.aspx
   ============================================================ */

/* ---------- 顶部标题区 ---------- */
.fq-hero{background:linear-gradient(135deg,#002b60 0%,#0a4a8e 52%,#1668b6 100%);padding:44px 20px 38px;position:relative;overflow:hidden;}
.fq-hero:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;
  background-image:radial-gradient(circle at 16% 18%,rgba(255,255,255,.12) 0,transparent 40%),
                   radial-gradient(circle at 84% 82%,rgba(255,255,255,.08) 0,transparent 44%);}
.fq-hero:after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border:1px solid rgba(255,255,255,.10);border-radius:50%;}
.fq-hero-in{max-width:1200px;margin:0 auto;position:relative;z-index:1;}
.fq-hero h1{font-size:30px;line-height:1.4;color:#fff;font-weight:700;text-align:center;margin:0 0 10px;letter-spacing:3px;}
.fq-hero .fq-lead{font-size:14px;line-height:1.9;color:rgba(255,255,255,.90);text-align:center;margin:0 0 24px;}

/* 搜索框 */
.fq-search{max-width:640px;margin:0 auto;position:relative;}
.fq-search input{width:100%;height:52px;line-height:52px;border:0;border-radius:26px;
  padding:0 132px 0 52px;font-size:15px;color:#1f2a37;background:#fff;box-sizing:border-box;
  box-shadow:0 8px 24px rgba(0,18,54,.22);outline:none;font-family:inherit;
  -webkit-appearance:none;appearance:none;}
.fq-search input::-webkit-search-cancel-button{-webkit-appearance:none;}
.fq-search input::placeholder{color:#9aa6b5;}
.fq-search .fq-si{position:absolute;left:19px;top:16px;width:20px;height:20px;fill:#9aa6b5;pointer-events:none;}
.fq-search .fq-sbtn{position:absolute;right:6px;top:6px;height:40px;padding:0 26px;border:0;border-radius:20px;
  background:#c8102e;color:#fff;font-size:15px;font-family:inherit;cursor:pointer;transition:background .2s;}
.fq-search .fq-sbtn:hover{background:#a80b24;}

/* 热门关键词 */
.fq-hot{max-width:640px;margin:14px auto 0;text-align:center;font-size:12px;color:rgba(255,255,255,.72);}
.fq-hot span{margin-right:6px;}
.fq-hot a{display:inline-block;margin:0 3px 4px;padding:3px 12px;border:1px solid rgba(255,255,255,.28);
  border-radius:14px;color:#fff;font-size:12px;text-decoration:none;transition:.2s;}
.fq-hot a:hover{background:#fff;border-color:#fff;color:#002b60;}

/* ---------- 面包屑 ---------- */
.fq-crumb{max-width:1200px;margin:0 auto;padding:14px 20px 0;font-size:13px;line-height:1.6;color:#9aa6b5;}
.fq-crumb a{color:#9aa6b5;text-decoration:none;}
.fq-crumb a:hover{color:#c8102e;}

/* ---------- 主体两栏 ---------- */
.fq-body{background:#f4f7fb;padding:16px 20px 56px;}
.fq-wrap{max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;gap:20px;}

/* 左侧分类 */
.fq-side{width:264px;flex:0 0 264px;background:#fff;border:1px solid #e6ecf4;border-radius:10px;
  position:sticky;top:12px;box-sizing:border-box;overflow:hidden;}
.fq-side h2{font-size:15px;line-height:1.4;color:#002b60;font-weight:700;margin:0;
  padding:15px 16px 13px;border-bottom:1px solid #eef2f7;background:#fbfcfe;}
.fq-cats{padding:8px 6px 10px;}
.fq-cat{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 12px;margin-bottom:2px;border-radius:6px;
  font-size:14px;line-height:1.45;color:#3d4a59;text-decoration:none;transition:.16s;}
.fq-cat:hover{background:#f2f7fd;color:#0b5cad;}
.fq-cat em{font-style:normal;font-size:12px;line-height:18px;color:#98a4b3;background:#f2f5f9;
  border-radius:9px;padding:0 8px;min-width:24px;text-align:center;flex:0 0 auto;}
.fq-cat.fq-on{background:#eaf2fd;color:#0b5cad;font-weight:700;box-shadow:inset 3px 0 0 #0b5cad;}
.fq-cat.fq-on em{background:#fff;color:#0b5cad;font-weight:700;}
.fq-side-foot{padding:0 16px 16px;}
.fq-side-foot a{display:block;text-align:center;font-size:13px;line-height:36px;height:36px;
  border:1px solid #dbe6f4;border-radius:6px;color:#0b5cad;text-decoration:none;transition:.2s;}
.fq-side-foot a:hover{background:#0b5cad;border-color:#0b5cad;color:#fff;}

/* 右侧内容 */
.fq-main{flex:1;min-width:0;}

/* 工具条 */
.fq-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border:1px solid #e6ecf4;border-radius:10px;padding:13px 18px;margin-bottom:12px;}
.fq-now{font-size:16px;line-height:1.5;color:#002b60;font-weight:700;}
.fq-now .fq-sep{color:#c5cfdb;font-weight:400;margin:0 6px;}
.fq-now .fq-cnt{font-size:12px;font-weight:400;color:#8d99a8;margin-left:8px;}
.fq-now .fq-cnt a.fq-alllink{color:#0b5cad;text-decoration:underline;margin-left:2px;}
.fq-now .fq-cnt a.fq-alllink:hover{color:#c8102e;}
.fq-tools .fq-sp{flex:1;}
.fq-toggle{height:32px;padding:0 14px;border:1px solid #dbe6f4;border-radius:16px;background:#fff;
  font-size:13px;color:#5f6b7a;font-family:inherit;cursor:pointer;transition:.2s;}
.fq-toggle:hover{border-color:#0b5cad;color:#0b5cad;}

/* 二级分类 */
.fq-subs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;}
.fq-subs:empty{display:none;}
.fq-sub{display:inline-block;padding:6px 14px;border:1px solid #dbe4ef;border-radius:16px;background:#fff;
  font-size:13px;line-height:1.5;color:#57636f;text-decoration:none;transition:.16s;}
.fq-sub em{font-style:normal;font-size:12px;color:#9aa6b5;margin-left:4px;}
.fq-sub:hover{border-color:#9bc2e8;color:#0b5cad;}
.fq-sub.fq-on{background:#0b5cad;border-color:#0b5cad;color:#fff;}
.fq-sub.fq-on em{color:rgba(255,255,255,.72);}
.fq-sub[hidden]{display:none;}

/* 三级（型号）胶囊：更轻，和二级区分 */
.fq-subs3{margin-top:-4px;padding:8px 0 2px 12px;border-left:2px solid #e6eef8;}
.fq-subs3:empty{display:none;}
.fq-subs3 .fq-sub{padding:4px 11px;font-size:12px;border-radius:13px;border-color:#e6ecf4;background:#f7fafd;color:#6b7789;}
.fq-subs3 .fq-sub em{font-size:11px;}
.fq-subs3 .fq-sub:hover{border-color:#9bc2e8;color:#0b5cad;}
.fq-subs3 .fq-sub.fq-on{background:#eaf3fd;border-color:#9bc2e8;color:#0b5cad;font-weight:700;}
.fq-subs3 .fq-sub.fq-on em{color:#7b93ab;}

/* 问答列表 */
.fq-item{background:#fff;border:1px solid #e6ecf4;border-radius:10px;margin-bottom:10px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;}
.fq-item:hover{border-color:#c9dbf0;box-shadow:0 4px 14px rgba(11,92,173,.07);}
.fq-item.fq-open{border-color:#b7d0ea;box-shadow:0 4px 16px rgba(11,92,173,.09);}
.fq-item.fq-hide{display:none;}

.fq-q{display:flex;align-items:flex-start;gap:12px;width:100%;padding:16px 18px;
  background:none;border:0;text-align:left;cursor:pointer;font-family:inherit;
  font-size:15px;line-height:1.65;color:#1f2a37;box-sizing:border-box;}
.fq-q:focus{outline:none;}
.fq-q:focus-visible{outline:2px solid #6aa9e0;outline-offset:-2px;}
.fq-qi{flex:0 0 22px;height:22px;line-height:22px;text-align:center;border-radius:5px;
  background:#eaf2fd;color:#0b5cad;font-size:13px;font-weight:700;margin-top:1px;transition:.2s;}
.fq-qt{flex:1;}
.fq-open .fq-qi{background:#0b5cad;color:#fff;}

.fq-ico{flex:0 0 14px;width:14px;height:14px;margin-top:6px;position:relative;}
.fq-ico:before,.fq-ico:after{content:"";position:absolute;background:#a8b6c6;border-radius:1px;transition:.25s;}
.fq-ico:before{left:0;top:6px;width:14px;height:2px;}
.fq-ico:after{left:6px;top:0;width:2px;height:14px;}
.fq-open .fq-ico:before{background:#0b5cad;}
.fq-open .fq-ico:after{transform:rotate(90deg);opacity:0;}

/* 答案折叠 */
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.fq-open .fq-a{grid-template-rows:1fr;}
.fq-ai{overflow:hidden;min-height:0;}
.fq-ai-in{position:relative;margin:0 18px;padding:16px 0 20px 34px;
  border-top:1px dashed #e6ecf4;font-size:14px;line-height:1.9;color:#4a5563;word-break:break-word;}
.fq-ai-in:before{content:"A";position:absolute;left:0;top:16px;width:22px;height:22px;line-height:22px;
  text-align:center;border-radius:5px;background:#fdecee;color:#c8102e;font-size:13px;font-weight:700;}

/* 答案内富文本复位 */
.fq-ai-in div{margin:0 0 8px;padding:0;}
.fq-ai-in div:last-child{margin-bottom:0;}
.fq-ai-in p{margin:0 0 8px;}
.fq-ai-in p:last-child{margin-bottom:0;}
.fq-ai-in span{background:none;}
.fq-ai-in img{max-width:100%;height:auto;}
.fq-ai-in ul,.fq-ai-in ol{margin:8px 0;padding-left:22px;}
.fq-ai-in li{margin-bottom:4px;}
.fq-ai-in table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13px;line-height:1.7;}
.fq-ai-in table td,.fq-ai-in table th{border:1px solid #dfe6ef;padding:7px 9px;vertical-align:top;}
.fq-ai-in table th{background:#f5f8fc;font-weight:700;color:#3d4a59;}
.fq-ai-in a{color:#0b5cad;text-decoration:underline;}
.fq-ai-in strong,.fq-ai-in b{color:#1f2a37;}
.fq-ai-in br{line-height:1.9;}

/* 搜索命中高亮 */
mark.fq-hl{background:#fff2a8;color:inherit;padding:0 1px;border-radius:2px;}

/* 空状态 */
.fq-empty{background:#fff;border:1px dashed #d8e2ee;border-radius:10px;padding:54px 20px;text-align:center;}
.fq-empty .fq-e-t{font-size:16px;line-height:1.6;color:#3d4a59;margin:0 0 8px;font-weight:700;}
.fq-empty .fq-e-s{font-size:13px;line-height:1.9;color:#8d99a8;margin:0 0 20px;}
.fq-empty .fq-e-s a{color:#c8102e;text-decoration:none;}
.fq-empty .fq-e-btn{height:38px;padding:0 22px;border:1px solid #0b5cad;border-radius:19px;background:#fff;
  color:#0b5cad;font-size:14px;font-family:inherit;cursor:pointer;transition:.2s;}
.fq-empty .fq-e-btn:hover{background:#0b5cad;color:#fff;}

/* 底部帮助入口 */
.fq-help{margin-top:18px;background:#fff;border:1px solid #e6ecf4;border-radius:10px;padding:22px 24px;}
.fq-help h3{font-size:16px;line-height:1.5;color:#002b60;margin:0 0 6px;font-weight:700;}
.fq-help p{font-size:13px;line-height:1.9;color:#8d99a8;margin:0 0 16px;}
.fq-help .fq-h-grid{display:flex;flex-wrap:wrap;gap:12px;}
.fq-help .fq-h-box{flex:1 1 200px;padding:14px 16px;border:1px solid #e8eef6;border-radius:8px;
  text-decoration:none;transition:.2s;background:#fbfcfe;}
.fq-help .fq-h-box:hover{border-color:#0b5cad;background:#f4f9ff;}
.fq-help .fq-h-box b{display:block;font-size:14px;line-height:1.6;color:#0b5cad;font-weight:700;margin-bottom:3px;}
.fq-help .fq-h-box span{display:block;font-size:12px;line-height:1.7;color:#98a4b3;}

/* 移动端 */
@media (max-width:960px){
  .fq-wrap{flex-direction:column;gap:12px;}
  .fq-side{width:100%;flex:none;position:static;border-radius:8px;}
  .fq-side h2{padding:12px 14px;}
  .fq-cats{display:flex;overflow-x:auto;padding:8px;-webkit-overflow-scrolling:touch;}
  .fq-cat{flex:0 0 auto;white-space:nowrap;padding:8px 14px;margin:0 4px 0 0;font-size:13px;}
  .fq-cat.fq-on{box-shadow:inset 0 -2px 0 #0b5cad;}
  .fq-side-foot{padding:0 10px 10px;}
  .fq-side-foot a{line-height:34px;height:34px;font-size:12px;}
}
@media (max-width:640px){
  .fq-hero{padding:30px 16px 26px;}
  .fq-hero h1{font-size:22px;letter-spacing:1px;}
  .fq-hero .fq-lead{font-size:13px;margin-bottom:18px;}
  .fq-search input{height:46px;line-height:46px;padding:0 96px 0 44px;font-size:14px;}
  .fq-search .fq-si{top:13px;left:15px;width:18px;height:18px;}
  .fq-search .fq-sbtn{height:36px;top:5px;padding:0 18px;font-size:14px;}
  .fq-body{padding:12px 12px 40px;}
  .fq-tools{padding:11px 14px;}
  .fq-now{font-size:15px;}
  .fq-q{padding:14px;font-size:14px;gap:10px;}
  .fq-ai-in{margin:0 14px;padding:14px 0 16px 30px;font-size:13.5px;}
  .fq-help{padding:18px 16px;}
}