/* =============================================================
   铭喜集团 首页重构样式层 mx-home.css （2026-10-23）
   品牌红体系 + 语义化 section + 区块标题 + 卡片 hover
   复用品牌红：#c9151e 主 / #a81117 hover / 渐变 #e02431→#c9151e
   ============================================================= */
:root {
  --mx-red: #c9151e;
  --mx-red-hover: #a81117;
  --mx-red-deep: #8f0f16;
  --mx-grad: linear-gradient(135deg, #e02431 0%, #c9151e 100%);
  --mx-ink: #2b2b2b;
  --mx-gray: #666;
  --mx-bg: #f7f8fa;
  --mx-line: #eceff3;
  --mx-shadow: 0 8px 24px rgba(201, 21, 30, 0.08);
  --mx-radius: 10px;
}

/* ---------- 语义化容器 ---------- */
.mx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mx-home main {
  display: block;
  background: #fff;
}
.mx-home-section {
  display: block;
  position: relative;
  padding: 48px 0 40px;
  background: #fff;
}
.mx-home-section.mx-alt {
  background: var(--mx-bg);
}
.mx-home-section.mx-home-promise {
  padding: 0;
  background: #fff;
}
.mx-home-section > .mx-wrap {
  width: 1200px;
  margin: 0 auto;
}

/* ---------- 区块标题（统一品牌红左条 + 大字） ---------- */
.mx-home-h2 {
  position: relative;
  display: block;
  margin: 0 auto 8px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mx-ink);
  text-align: center;
}
.mx-home-h2::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 42px;
  height: 4px;
  margin-right: 14px;
  border-radius: 2px;
  background: var(--mx-grad);
}
.mx-home-h2::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 42px;
  height: 4px;
  margin-left: 14px;
  border-radius: 2px;
  background: var(--mx-grad);
}
.mx-home-sub {
  margin: 0 auto 28px;
  font-size: 15px;
  color: var(--mx-gray);
  text-align: center;
  letter-spacing: 1px;
}

/* 兼容旧区块标题（保留 h3left.png/h3right.png 装饰结构） */
.mx-home-section h2.popularService {
  color: var(--mx-ink);
  font-weight: 700;
}
.mx-home-section h3.popularService {
  color: var(--mx-ink);
  font-weight: 700;
}

/* ---------- 热门服务 / 活动特惠 卡片 ---------- */
.mx-home .block-hot {
  padding: 36px 0;
  background: var(--mx-bg);
}
.mx-home .index-hot {
  border-radius: var(--mx-radius);
  overflow: hidden;
  box-shadow: var(--mx-shadow);
}
.mx-home .hot-list h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--mx-ink);
  margin: 0 0 4px;
}
.mx-home .list-item:hover {
  transform: translateY(-3px);
  transition: transform .25s ease;
}
.mx-home .list-item {
  transition: transform .25s ease;
}

/* ---------- 创业必备服务卡片 ---------- */
.mx-home .index-zscq-list {
  position: relative;
  border-radius: var(--mx-radius);
  overflow: hidden;
  box-shadow: var(--mx-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mx-home .index-zscq-list:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(201, 21, 30, 0.16);
}
.mx-home .index-zscq-list:hover p {
  background: var(--mx-grad);
  border-color: var(--mx-red);
  color: #fff;
}

/* ---------- 资讯卡片 hover ---------- */
.mx-home .newsServiceList li:hover {
  box-shadow: var(--mx-shadow);
}
.mx-home .newsServiceList li {
  transition: box-shadow .25s ease;
  border-radius: 8px;
}

/* ---------- 问答 hover ---------- */
.mx-home .hyul ul li {
  transition: background .2s ease;
}
.mx-home .hyul ul li:hover {
  background: #fdeef0;
}
.mx-home .hyul ul li:hover .ulspan {
  background: var(--mx-red) url(../jbbImg/Qicon.png) no-repeat center;
}
.mx-home .hyul ul li:hover a {
  color: var(--mx-red);
}

/* =============================================================
   品牌红覆盖层 —— 清除历史禁用橙（#de3f12 / #dd4800 / #de3e12）
   ============================================================= */
.mx-home a[style*="de3f12"],
.mx-home .ckBtn a,
.mx-home .hyul ul li:hover .ulspan,
.mx-home .index-zscq .index-zscq-list:hover p,
.mx-home .index-zscq .index-zscq-list:hover .index-zscq .index-zscq-list .lastp {
  color: var(--mx-red) !important;
}
.mx-home .g_query_btn,
.mx-home .queryCompanyBtn,
.mx-home #log:hover,
.mx-home .g_query_btn:hover {
  background: var(--mx-grad) !important;
  border-color: var(--mx-red) !important;
}
.mx-home .counselor-ta:hover {
  background: var(--mx-red-hover) !important;
}
.mx-home .tl-num-item:hover .tlitemimg img {
  background-color: var(--mx-red) !important;
}