/* ============================================================
   全国服务 quanguo-fuwu.css
   母题：hero 横竖线交叉；合作区横线切割；城市区竖线切割
   仅本页定制样式，公共样式见 css/style.css
   ============================================================ */

/* ---------- 1. Hero：H18 网格图阵 ---------- */
.qg-hero {
  position: relative;
  padding: 120px 0 90px;
  overflow: hidden;
  background: linear-gradient(135deg, #f4f9fd 0%, #eaf4fb 55%, #f7fbfe 100%);
}

.qg-hero-vline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62%;
  width: 2px;
  background: var(--blue);
  opacity: .35;
}

.qg-hero-xline {
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  height: 2px;
  background: var(--blue);
  opacity: .25;
}

.qg-hero-in {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.qg-hero-text h1 {
  font-size: 46px;
  line-height: 1.25;
  margin: 18px 0 16px;
}

.qg-hero-text h1 em {
  color: var(--blue);
  font-style: normal;
}

.qg-hero-text > p {
  font-size: 17px;
  color: #5a6b78;
  line-height: 1.9;
  max-width: 520px;
}

.qg-hero-cta {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.qg-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qg-hero-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(30, 80, 120, .18);
}

.qg-hero-grid img:nth-child(2) { transform: translateY(-14px); }
.qg-hero-grid img:nth-child(3) { transform: translateY(14px); }

/* ---------- 2. 异地合作三卡 ---------- */
.qg-way-sec {
  position: relative;
}

.qg-way-xline {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--blue);
  opacity: .2;
}

.qg-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.qg-way {
  background: #fff;
  border: 1px solid #e4edf4;
  border-radius: 14px;
  padding: 34px 28px;
  position: relative;
  transition: transform .3s, box-shadow .3s;
}

.qg-way:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(30, 80, 120, .12);
}

.qg-way-down {
  transform: translateY(26px);
}

.qg-way-down:hover {
  transform: translateY(20px);
}

.qg-way-ic {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(142, 208, 236, .2);
  color: #2c6d94;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.qg-way-ic .ic { width: 26px; height: 26px; }

.qg-way h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.qg-way p {
  color: #60748a;
  font-size: 15px;
  line-height: 1.85;
}

/* ---------- 3. 服务城市胶囊 ---------- */
.qg-city-sec {
  position: relative;
  background: #f6fafd;
}

.qg-city-vline {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 30px;
  width: 2px;
  background: var(--blue);
  opacity: .25;
}

.qg-city-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.qg-city-list li {
  padding: 9px 20px;
  background: #fff;
  border: 1px solid #d8e6f0;
  border-radius: 999px;
  font-size: 15px;
  color: #33475b;
  transition: all .25s;
}

.qg-city-list li a { color: inherit; }

.qg-city-list li:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #14394f;
}

/* ---------- 4. 远程交付五步 ---------- */
.qg-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 34px;
}

.qg-flow-step {
  background: #fff;
  border: 1px solid #e4edf4;
  border-radius: 12px;
  padding: 24px 18px;
  text-align: center;
  position: relative;
}

.qg-flow-step b {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue);
  color: #14394f;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.qg-flow-step h3 { font-size: 16px; margin-bottom: 6px; }
.qg-flow-step p { font-size: 13px; color: #7a8ea0; }

/* ---------- 5. 案例图文错位 ---------- */
.qg-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.qg-case-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 22px;
}

.qg-case-links li a {
  display: block;
  padding: 12px 16px;
  background: #f4f9fc;
  border-radius: 8px;
  font-size: 14px;
  color: #2c6d94;
  border-left: 3px solid var(--blue);
}

.qg-case-img {
  position: relative;
}

.qg-case-img .photo {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(30, 80, 120, .2);
}

.qg-case-sticker {
  position: absolute;
  right: -14px;
  bottom: -14px;
  background: #14394f;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
}

/* ---------- 6. FAQ ---------- */
.qg-faq-list {
  max-width: 820px;
  margin: 30px auto 0;
  display: grid;
  gap: 14px;
}

.qg-q {
  background: #fff;
  border: 1px solid #e4edf4;
  border-radius: 10px;
  padding: 18px 22px;
}

.qg-q summary {
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}

.qg-q summary::-webkit-details-marker { display: none; }

.qg-q p {
  margin-top: 12px;
  color: #60748a;
  line-height: 1.9;
  font-size: 15px;
}

/* ---------- 7. CTA ---------- */
.qg-cta-sec {
  background: #14394f;
}

.qg-cta {
  text-align: center;
  color: #fff;
  padding: 30px 0;
}

.qg-cta h2 {
  color: #fff;
  font-size: 36px;
  margin-bottom: 10px;
}

.qg-cta h2 em { color: var(--blue); font-style: normal; }
.qg-cta > p { color: #b9c9d6; }

.qg-cta-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 24px 0 18px;
}

.qg-cta-tel {
  display: flex;
  justify-content: center;
  gap: 30px;
  color: #b9c9d6;
  font-size: 15px;
}

.qg-cta-tel a { color: var(--blue); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .qg-hero-in,
  .qg-case { grid-template-columns: 1fr; }
  .qg-ways { grid-template-columns: 1fr; }
  .qg-way-down { transform: none; }
  .qg-flow { grid-template-columns: repeat(2, 1fr); }
  .qg-hero-text h1 { font-size: 34px; }
}

@media (max-width: 560px) {
  .qg-flow { grid-template-columns: 1fr; }
  .qg-case-links { grid-template-columns: 1fr; }
  .qg-hero-grid img { height: 110px; }
  .qg-cta-tel { flex-direction: column; gap: 8px; }
}

/* ===== 补充模块：异地顾虑（十字分割装饰） ===== */
.xt-sec{position:relative;overflow:hidden;}
.xt-xline{position:absolute;top:42px;left:0;right:0;height:2px;background:var(--blue);opacity:.22;}
.xt-vline{position:absolute;top:70px;bottom:70px;right:36px;width:2px;background:var(--blue);opacity:.22;}
.xt-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;}
.xt-card{background:#fff;border:1px solid #e4edf4;border-radius:12px;padding:26px 22px;}
.xt-card h3{font-size:17px;margin-bottom:10px;}
.xt-card p{color:#60748a;font-size:14px;line-height:1.85;}
.xt-foot{margin-top:24px;color:#60748a;font-size:15px;line-height:1.9;max-width:820px;}
@media (max-width:992px){.xt-cols{grid-template-columns:1fr;}}