/* ============================================================
   产品区域左侧菜单 · 展开/折叠（手风琴）样式
   作用域：仅首页 index1.html 的 .pro_con_l
   独立文件，不改动 public.css / index.css
   ------------------------------------------------------------
   交互说明：
   - 每个分类块 .pro-cat 由「标题 h3.pro-cat-tit + 列表面板 ul.pro-cat-list」组成
   - 【默认全部展开】，点击分类标题（非内部链接）折叠 / 再次点击展开
   - 折叠图标：展开态为「−」、折叠态为「+」，均为白线画在蓝底上
     图标用 ::before(横线) + ::after(竖线) 画出，展开时竖线收起 → 构成「−」，
     折叠时竖线展开 → 构成「+」，带过渡动画
   - 配色：展开态 / 折叠态 均保持蓝底白字（仅图标 −/+ 变化）
   - 渐进增强：默认全部展开，无 JS 也能看到全部，不伤 SEO
   ============================================================ */

.pro_con_l .pro-cat-tit {
  cursor: pointer;
  position: relative;
  /* ★★ 关键修复（图标看不见的根因）★★
     public.css 无全局 box-sizing 重置（默认 content-box），且
     .pro_con_l{width:282px; overflow:hidden} + .pro_con_l h3{width:100%; padding-left:30px}。
     若用 content-box，本元素外宽 = 282(内容) + 30 + 46(padding) = 358px，
     即比父容器宽 76px，右侧被父级 overflow:hidden 裁掉 →
     靠右定位的 +/− 图标(right:22px)整个落在裁剪区里，不可见。
     改为 border-box 后 width:100% 把 padding 算进宽度，外宽正好 282px，不再被裁。 */
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 71px;                    /* 与原标题高度一致 */
  line-height: 1.45 !important;
  display: flex;                       /* 长分类名可换行、单行时垂直居中 */
  align-items: center;
  background-image: none !important;   /* 去掉 public.css 里 pro_b1.png 装饰箭头 */
  padding-right: 46px;                 /* 给 +/− 图标预留空间（图标占右侧 22~37px） */
  -webkit-user-select: none;
  user-select: none;
  background-color: #006fc0;           /* 展开态：蓝底 */
  color: #ffffff;
  transition: background-color .2s ease, color .2s ease;
}
.pro_con_l .pro-cat-tit a,
.pro_con_l .pro-cat-tit a.flei {
  color: inherit !important;           /* 文字颜色跟随标题（蓝底白字，压住 public.css） */
}





/* 折叠态：保持蓝底不变，仅图标由 − 变为 +（线条仍为白色） */

/* ---------- +/− 图标（::before 横线 + ::after 竖线） ---------- */
.pro_con_l .pro-cat-tit::before,
.pro_con_l .pro-cat-tit::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  background-color: #ffffff;           /* 白线（蓝底上，展开/折叠一致） */
  pointer-events: none;
  transition: background-color .2s ease, transform .2s ease;
}
/* 横线（+/− 共用） */
.pro_con_l .pro-cat-tit::before {
  width: 15px;
  height: 2px;
  margin-top: -1px;
}
/* 竖线（折叠态才显示，构成 +） */
.pro_con_l .pro-cat-tit::after {
  width: 2px;
  height: 15px;
  right: 28.5px;                       /* 与横线水平居中对齐 */
  margin-top: -7.5px;
  transform: scaleY(0);                /* 展开态：收起竖线 → 只剩横线 = − */
}

/* 折叠态：显示竖线 → 构成 +（线条仍为白，与蓝底一致） */
.pro_con_l .pro-cat.collapsed .pro-cat-tit::after {
  transform: scaleY(1);
}

/* 列表面板：默认展开（显示）；折叠(.collapsed)时隐藏 */
.pro_con_l .pro-cat-list {
  display: block;
}
.pro_con_l .pro-cat.collapsed .pro-cat-list {
  display: none;
}

/* “查看更多”独立块：保持蓝色调，不参与折叠 */
.pro_con_l .pro-cat-more {
  margin-top: 8px;
}
.pro_con_l .pro-cat-more a {
  display: block;
  width: 100%;
  height: 54px;
  line-height: 54px;
  text-align: center;
  background: #eaf3fb;
  color: #006fc0;
  font-size: 15px;
  letter-spacing: 1px;
  border: 1px dashed #9cc7e8;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.pro_con_l .pro-cat-more a:hover {
  background: #006fc0;
  color: #fff;
  border-color: #006fc0;
}

/* 折叠后相邻块间距微调，避免空白过大 */
.pro_con_l .pro-cat + .pro-cat {
  margin-top: 0;
}