/* ==========================================================
   联系我们 · 主体内容样式
   ========================================================== */
@import url('/static/home/css/icons.css');

:root{
  --red:#e63946;
  --red-dark:#c1121f;
  --red-soft:#fdeced;
  --dark:#15181d;
  --dark-2:#1d2128;
  --dark-3:#262b33;
  --ink:#1f2329;
  --sub:#6b7280;
  --line:rgba(255,255,255,.07);
  --line-light:rgba(0,0,0,.06);
  --bg-soft:#f6f7f9;
  --r:12px;
  --ease:cubic-bezier(.4,0,.2,1);
}


/* ================= 通用按钮 ================= */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--red);color:#fff;font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:999px;transition:.25s var(--ease);
  box-shadow:0 8px 20px rgba(230,57,70,.25);
}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(230,57,70,.32)}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);
  font-weight:600;font-size:15px;padding:12px 26px;border-radius:999px;transition:.25s var(--ease);
}
.btn-ghost:hover{background:#fff;color:var(--dark)}
.btn-ghost-light{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);
  font-weight:600;font-size:15px;padding:12px 26px;border-radius:999px;transition:.25s var(--ease);
}
.btn-ghost-light:hover{background:var(--red);border-color:var(--red)}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-lg{padding:15px 30px;font-size:16px;width:100%;border:none;}
.btn-block{width:100%}

/* ================= 通用图标（背景图） ================= */
.ico{display:inline-block;width:22px;height:22px;background-repeat:no-repeat;background-position:center;background-size:contain;vertical-align:-5px}
.ico-w{filter:brightness(0) invert(1)}
.ico-phone{background-image:var(--i-phone)}
.ico-phone-w{background-image:var(--i-phone-w)}
.ico-phone-lg{background-image:var(--i-phone-lg)}
.ico-wechat{background-image:var(--i-wechat)}
.ico-wechat-w{background-image:var(--i-wechat-w)}
.ico-wechat-lg{background-image:var(--i-wechat-lg)}
.ico-mail{background-image:var(--i-mail)}
.ico-mail-w{background-image:var(--i-mail-w)}
.ico-mail-lg{background-image:var(--i-mail-lg)}
.ico-location{background-image:var(--i-location)}
.ico-location-w{background-image:var(--i-location-w)}
.ico-location-lg{background-image:var(--i-location-lg)}
.ico-clock{background-image:var(--i-clock)}
.ico-clock-w{background-image:var(--i-clock-w)}
.ico-shield{background-image:var(--i-shield)}
.ico-shield-w{background-image:var(--i-shield-w)}
.ico-map-pin{background-image:var(--i-map-pin)}
.ico-map-pin-w{background-image:var(--i-map-pin-w)}
.ico-check{background-image:var(--i-check)}
.ico-check-w{background-image:var(--i-check-w)}
.ico-send{background-image:var(--i-send)}
.ico-message-lg{background-image:var(--i-message-lg)}
.ico-map{background-image:var(--i-map)}
.ico-loc{background-image:var(--i-loc)}
.ico-subway{background-image:var(--i-subway)}
.ico-car{background-image:var(--i-car)}
.ico-top{background-image:var(--i-top)}

/* ================= 通用版式 ================= */
.section{padding:80px 0}
.section-head{text-align:center;margin-bottom:48px; display: block;}
.section-kicker{color:var(--red);font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:10px}
.section-head h2{font-size:30px;font-weight:800;letter-spacing:.5px}
.section-desc{color:var(--sub);font-size:15px;margin-top:12px;max-width:640px;margin-left:auto;margin-right:auto}

/* ================= 联系方式网格 ================= */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.contact-card{
  background:#fff;border:1px solid var(--line-light);border-radius:var(--r);
  padding:28px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 4px 16px rgba(17,24,39,.04);transition:.28s var(--ease);
  min-height: unset;
}
.contact-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(230,57,70,.1);border-color:#ffd9dc}
.contact-ico{width:48px;height:48px;border-radius:12px;background:var(--red-soft);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.contact-ico .ico{width:24px;height:24px}
.contact-card h3{font-size:16px;font-weight:700; 
    margin: 5px 0;}
.contact-value{font-size:18px;font-weight:700;color:var(--ink);margin: 0;}
.contact-value a{transition:.2s}
.contact-value a:hover{color:var(--red)}
.contact-note{font-size:13px;color:var(--sub);line-height:1.7;margin: 0;}
.contact-card--full{flex-direction:row;align-items:center;justify-content:space-between;grid-column:1 / -1;
  background:linear-gradient(100deg,#fff,var(--red-soft));border-color:#ffd9dc}
.contact-card--full .contact-card-body{flex:1}
.contact-card--full h3{font-size:17px}

/* ================= 在线留言表单 ================= */
.form-wrap{
  background:#fff;border:1px solid var(--line-light);border-radius:16px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1.3fr;box-shadow:0 8px 30px rgba(17,24,39,.05);
}
.form-intro{background:linear-gradient(160deg,#1d2128,#15181d);color:#fff;padding:40px 36px;position:relative;overflow:hidden}
.form-intro::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,57,70,.18),transparent 65%)}
.form-intro .section-kicker{color:var(--red);position:relative}
.form-intro h2{font-size:26px;margin-bottom:14px;position:relative}
.form-lead{font-size:14px;color:rgba(255,255,255,.66);line-height:1.8;position:relative}
.form-tips{margin-top:26px;display:flex;flex-direction:column;gap:12px;position:relative}
.form-tips li{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.78)}
.form-tips .ico{width:16px;height:16px;flex-shrink:0}
.form-quote{margin-top:32px;padding:18px;border-left:3px solid var(--red);background:rgba(255,255,255,.05);border-radius:0 8px 8px 0;position:relative}
.form-quote p{font-size:13px;color:rgba(255,255,255,.82);line-height:1.7;font-style:italic}
.form-quote span{display:block;font-size:12px;color:rgba(255,255,255,.4);margin-top:8px;font-style:normal}

.form{padding:40px 36px;display:flex;flex-direction:column;gap:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:7px;position:relative}
.field>span{font-size:13px;font-weight:600;color:var(--ink)}
.field>span em{color:var(--red);font-style:normal;margin-left:2px}
.field input[type=text],
.field input[type=tel],
.field input[type=email],
.field textarea{
  border:1px solid var(--line-light);border-radius:10px;padding:11px 13px;font-size:14px;
  color:var(--ink);background:#fff;transition:.2s;width:100%;outline:none;
}
.field textarea{resize:vertical;min-height:110px;line-height:1.7}
.field input:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(230,57,70,.08)}
.field-err{color:var(--red);font-size:12px;font-weight:600;display:none;line-height:1.4}
.field.has-err input,.field.has-err textarea{border-color:var(--red)}
.field.has-err .field-err{display:block}
.field-counter{font-size:12px;color:#9ca3af;text-align:right;margin-top:-2px}
.field-counter i{font-style:normal;font-variant-numeric:tabular-nums}
.field-counter.warn i{color:var(--gold);font-weight:700}
.field-inline{flex-direction:row;align-items:flex-start;gap:10px}
.field-inline input{width:auto;margin-top:3px;flex-shrink:0;accent-color:var(--red)}
.field-inline span{font-size:13px;color:var(--sub);line-height:1.7}
.field-inline a{color:var(--red)}
.form-foot{font-size:12px;color:#9ca3af;line-height:1.7}

/* Chips */
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line-light);background:#fff;color:var(--sub);padding:8px 15px;border-radius:999px;
  font-size:13px;transition:.2s;cursor:pointer}
.chip:hover{border-color:#ffd9dc;color:var(--red)}
.chip.is-active{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
input[type=hidden]{display:none}

/* ================= 办事处 Tabs ================= */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;justify-content:center}
.tab{border:1px solid var(--line-light);background:#fff;color:var(--sub);padding:10px 22px;border-radius:999px;
  font-size:14px;transition:.25s var(--ease)}
.tab:hover{color:var(--red);border-color:#ffd9dc}
.tab.is-active{background:var(--red);border-color:var(--red);color:#fff;font-weight:600;box-shadow:0 6px 16px rgba(230,57,70,.22)}

.office{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:stretch}
.office-map{background:var(--bg-soft);border-radius:var(--r);min-height:340px;overflow:hidden;border:1px solid var(--line-light)}
.map-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:32px}
.map-placeholder .ico{width:52px;height:52px;opacity:.5}
.map-placeholder b{font-size:16px}
.map-placeholder em{font-size:13px;color:var(--sub);font-style:normal;max-width:280px}

.office-info{background:#fff;border:1px solid var(--line-light);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:18px}
.office-info h3{font-size:20px}
.office-info ul{display:flex;flex-direction:column;gap:16px}
.office-info li{display:flex;gap:14px;align-items:flex-start}
.office-info li .ico{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.office-info li div{display:flex;flex-direction:column}
.office-info li span{font-size:12px;color:var(--sub)}
.office-info li b{font-size:14px;font-weight:600;line-height:1.6}
.office-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.office-tags span{font-size:12px;color:var(--red);background:var(--red-soft);padding:5px 12px;border-radius:999px}

/* ================= 合作流程 ================= */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(7,1fr);gap:14px;position:relative}
.steps::before{content:"";position:absolute;left:6%;right:6%;top:26px;height:2px;
  background:linear-gradient(90deg,var(--red),rgba(230,57,70,.15));z-index:0}
.steps li{position:relative;z-index:1;text-align:center;    list-style: none;}
.steps b{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:#fff;border:2px solid var(--red);color:var(--red);font-size:16px;font-weight:800;margin:0 auto 14px;
  transition:.28s var(--ease)}
.steps li:hover b{background:var(--red);color:#fff;transform:scale(1.08)}
.steps h4{font-size:14px;margin-bottom:5px}
.steps p{font-size:12px;color:var(--sub);line-height:1.6}

/* ================= 响应式 ================= */
@media(max-width:1000px){
  .section{padding:56px 0}
  .section-head{margin-bottom:34px}
  .section-head h2{font-size:24px}
  .contact-grid{grid-template-columns:1fr}
  .contact-card--full{flex-direction:column;align-items:flex-start;gap:16px}
  .form-wrap{grid-template-columns:1fr}
  .form-intro{padding:32px 26px}
  .form{padding:32px 26px}
  .office{grid-template-columns:1fr}
  .office-map{min-height:240px}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 14px}
  .steps::before{display:none}
}

/* ================= 提交成功状态 ================= */
.success{text-align:center;padding:48px 24px;animation:fadeUp .5s var(--ease)}
.success h3{font-size:22px;margin:16px 0 8px}
.success p{color:var(--sub);line-height:1.8}
.success small{display:block;margin-top:14px;color:var(--sub);font-size:12px}
.success-mark{
  display:inline-flex;width:64px;height:64px;border-radius:50%;
  background:var(--red);align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(230,57,70,.3);animation:pop .4s var(--ease);
}
.success-mark .ico{width:30px;height:30px}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ================= 提交中按钮状态 ================= */
.btn-primary.is-loading{opacity:.7;pointer-events:none}
.btn-primary .ico{width:18px;height:18px;vertical-align:-4px}

/* ================= 浮层关闭按钮 ================= */
.pop-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);
  transition:.25s var(--ease);
}
.pop-close:hover{background:var(--red);transform:rotate(90deg)}
.pop-close .ico{width:16px;height:16px}

/* ================= 二维码占位 ================= */
.pop-qr{
  width:180px;height:180px;margin:16px auto 6px;border-radius:12px;
  background:
    linear-gradient(45deg,var(--dark-2) 25%,transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg,var(--dark-2) 25%,transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg,transparent 75%,var(--dark-2) 75%) 0 0/20px 20px,
    linear-gradient(-45deg,transparent 75%,var(--dark-2) 75%) 0 0/20px 20px,
    var(--dark-3);
  position:relative;
}
.pop-qr::after{
  content:"";position:absolute;inset:0;margin:auto;width:40px;height:40px;border-radius:8px;
  background:var(--red);background-image:var(--i-wechat);background-repeat:no-repeat;
  background-position:center;background-size:60%;
}
@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li{text-align:left;display:flex;gap:16px;align-items:flex-start}
  .steps b{width:40px;height:40px;font-size:14px;margin:0;flex-shrink:0}
  .tabs .tab{padding:8px 16px;font-size:13px}
}