@charset "utf-8";
/* =========================================================
   微信小程序开发落地页（wechat.php）独立样式
   仅本页使用，前缀 mp-，避免影响全站
   ========================================================= */

.mp-hero{
  background:linear-gradient(135deg,#0a92e8 0%,#0067b0 100%);
  color:#fff;
  padding:56px 0 60px;
}
.mp-wrap{ width:1140px; margin:0 auto; }
.mp-hero-in{ display:flex; align-items:center; gap:44px; }
.mp-hero-txt{ flex:1 1 auto; min-width:0; }
.mp-tag{
  display:inline-block;
  padding:5px 14px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:15px;
  font-size:13px;
  letter-spacing:2px;
  color:#eaf6ff;
}
.mp-hero h1{
  font-size:42px;
  line-height:1.25;
  margin:18px 0 16px;
  font-weight:700;
  color:#fff;
}
.mp-hero h2{
  font-size:16px;
  line-height:1.9;
  font-weight:400;
  color:rgba(255,255,255,.92);
  max-width:640px;
}
.mp-pts{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin-top:22px;
  font-size:14px;
  color:#eaf6ff;
}
.mp-pts span{ display:inline-flex; align-items:center; }
.mp-pts span:before{
  content:"";
  width:16px; height:16px;
  margin-right:8px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  background-image:linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),
                   linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);
  background-size:6px 6px,6px 6px;
  background-position:4px 5px,7px 5px;
  background-repeat:no-repeat;
}
.mp-cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }
.mp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 26px;
  border-radius:24px;
  font-size:16px;
  text-decoration:none;
  box-sizing:border-box;
  transition:opacity .2s ease;
}
.mp-btn:hover{ opacity:.88; text-decoration:none; }
.mp-btn-main{ background:#fff; color:#0067b0; font-weight:700; }
.mp-btn-ghost{ border:1px solid rgba(255,255,255,.6); color:#fff; }

/* 右侧能力卡 */
.mp-panel{
  flex:0 0 356px;
  background:#fff;
  border-radius:14px;
  padding:24px 24px 18px;
  box-shadow:0 14px 40px rgba(0,40,80,.18);
  color:#123;
}
.mp-panel h3{
  font-size:16px;
  color:#0f2b3d;
  font-weight:700;
  padding-bottom:14px;
  border-bottom:1px solid #eef2f7;
}
.mp-panel ul{ margin-top:6px; }
.mp-panel li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px dashed #eef2f7;
  font-size:14px;
  color:#41525f;
}
.mp-panel li:last-child{ border-bottom:0; }
.mp-panel li em{
  font-style:normal;
  font-size:12px;
  color:#0083cb;
  background:#eef7fd;
  border-radius:10px;
  padding:2px 9px;
}

/* 通用区块 */
.mp-sec{ padding:64px 0; }
.mp-sec-alt{ background:#f4f8fc; }
.mp-h{ text-align:center; margin-bottom:38px; }
.mp-h h2{ font-size:32px; line-height:1.3; color:#0f2b3d; font-weight:700; }
.mp-h p{ margin-top:12px; font-size:14px; line-height:1.8; color:#7a8a99; }

.mp-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.mp-card{
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:12px;
  padding:24px 24px 22px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.mp-card:hover{ box-shadow:0 10px 26px rgba(0,60,110,.08); transform:translateY(-2px); }
.mp-card h3{
  font-size:18px;
  color:#0f2b3d;
  margin-bottom:10px;
  font-weight:700;
}
.mp-card p{ font-size:14px; line-height:1.85; color:#6b7c8c; }

/* 能力 / 技术点：两列列表 */
.mp-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.mp-list{ background:#fff; border:1px solid #e8eef4; border-radius:12px; padding:26px 28px; }
.mp-list h3{ font-size:18px; color:#0f2b3d; margin-bottom:14px; }
.mp-list li{
  position:relative;
  padding-left:18px;
  margin-bottom:10px;
  font-size:14px;
  line-height:1.8;
  color:#5d6f7e;
}
.mp-list li:before{
  content:"";
  position:absolute;
  left:0; top:11px;
  width:6px; height:6px;
  border-radius:50%;
  background:#0083cb;
}

/* 流程 */
.mp-step{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;
}
.mp-step li{
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:10px;
  padding:20px 10px 18px;
  text-align:center;
}
.mp-step b{
  display:block;
  width:32px; height:32px;
  line-height:32px;
  margin:0 auto 10px;
  border-radius:50%;
  background:#0083cb;
  color:#fff;
  font-size:14px;
  font-weight:700;
}
.mp-step h4{ font-size:15px; color:#0f2b3d; margin-bottom:6px; font-weight:700; }
.mp-step p{ font-size:12px; line-height:1.7; color:#7a8a99; }

/* 案例条 */
.mp-cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mp-case{
  display:block;
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:12px;
  padding:22px 24px;
  text-decoration:none;
  color:inherit;
}
.mp-case:hover{ border-color:#b7dcf3; text-decoration:none; }
.mp-case h3{ font-size:17px; color:#0f2b3d; margin-bottom:8px; }
.mp-case p{ font-size:13px; color:#7a8a99; line-height:1.8; }
.mp-case span{ display:inline-block; margin-top:14px; font-size:13px; color:#0083cb; }

/* FAQ */
.mp-faq{ max-width:900px; margin:0 auto; }
.mp-faq details{
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:10px;
  margin-bottom:12px;
  padding:0 22px;
}
.mp-faq summary{
  position:relative;
  list-style:none;
  padding:18px 30px 18px 0;
  font-size:16px;
  color:#0f2b3d;
  cursor:pointer;
}
.mp-faq summary::-webkit-details-marker{ display:none; }
.mp-faq summary:after{
  content:"+";
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  font-size:20px;
  color:#9db1c1;
  line-height:1;
}
.mp-faq details[open] summary:after{ content:"-"; color:#0083cb; }
.mp-faq details p{
  padding:0 0 18px;
  font-size:14px;
  line-height:1.9;
  color:#6b7c8c;
  border-top:1px dashed #eef2f7;
  padding-top:14px;
}

/* 底部 CTA */
.mp-band{
  background:#0067b0;
  color:#fff;
  text-align:center;
  padding:52px 0;
}
.mp-band h2{ font-size:28px; color:#fff; font-weight:700; }
.mp-band p{ margin-top:12px; font-size:15px; color:rgba(255,255,255,.85); }
.mp-band .mp-btn-main{ margin-top:24px; }

/* ---------------- 响应式 ---------------- */
@media screen and (max-width:1199px){
  .mp-wrap{ width:auto; max-width:1140px; padding:0 15px; box-sizing:border-box; }
  .mp-hero{ padding:44px 0 48px; }
  .mp-hero-in{ gap:28px; }
  .mp-hero h1{ font-size:34px; }
  .mp-panel{ flex:0 0 300px; }
  .mp-grid{ grid-template-columns:repeat(2,1fr); }
  .mp-step{ grid-template-columns:repeat(4,1fr); }
  .mp-cases{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width:860px){
  .mp-hero-in{ display:block; }
  .mp-panel{ margin-top:32px; width:auto; }
  .mp-hero h1{ font-size:30px; }
  .mp-sec{ padding:44px 0; }
  .mp-h h2{ font-size:26px; }
  .mp-two{ grid-template-columns:1fr; }
}
@media screen and (max-width:767px){
  .mp-hero{ padding:32px 0 36px; }
  .mp-hero h1{ font-size:26px; margin:14px 0 12px; }
  .mp-hero h2{ font-size:14px; line-height:1.85; }
  .mp-pts{ gap:8px 18px; font-size:13px; }
  .mp-cta{ gap:10px; }
  .mp-btn{ height:44px; padding:0 20px; font-size:15px; flex:1 1 auto; }
  .mp-panel{ padding:20px 18px 12px; }
  .mp-sec{ padding:36px 0; }
  .mp-h{ margin-bottom:26px; }
  .mp-h h2{ font-size:22px; }
  .mp-h p{ font-size:13px; }
  .mp-grid{ grid-template-columns:1fr; gap:14px; }
  .mp-card{ padding:20px 18px; }
  .mp-card h3{ font-size:16px; }
  .mp-step{ grid-template-columns:1fr 1fr; gap:10px; }
  .mp-step li{ padding:16px 10px 14px; }
  .mp-cases{ grid-template-columns:1fr; gap:12px; }
  .mp-faq details{ padding:0 16px; }
  .mp-faq summary{ font-size:15px; padding:15px 26px 15px 0; }
  .mp-band{ padding:38px 0; }
  .mp-band h2{ font-size:21px; }
  .mp-band p{ font-size:14px; }
}

/* =========================================================
   APP 开发页（app.php）扩展组件
   ========================================================= */

/* 行业领域：图标网格 */
.mp-icons{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
.mp-icons li{
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:12px;
  padding:22px 10px 18px;
  text-align:center;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mp-icons li:hover{
  border-color:#b7dcf3;
  box-shadow:0 10px 26px rgba(0,60,110,.08);
  transform:translateY(-2px);
}
.mp-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  margin-bottom:12px;
  border-radius:50%;
  background:#eaf6fe;
  color:#0083cb;
}
.mp-ico svg{ width:28px; height:28px; display:block; }
.mp-icons h4{ font-size:14px; color:#22303c; font-weight:600; }

/* 观点卡片补充说明 */
.mp-list .mp-note{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed #e6edf4;
  font-size:13px;
  line-height:1.8;
  color:#7f8f9d;
}

/* 流程 8 步 */
.mp-step.is-8{ grid-template-columns:repeat(8,1fr); }

/* 案例截图条 */
.mp-shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mp-shot{
  display:block;
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:12px;
  padding:14px 14px 18px;
  text-decoration:none;
  color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mp-shot:hover{
  border-color:#b7dcf3;
  box-shadow:0 10px 26px rgba(0,60,110,.08);
  transform:translateY(-2px);
  text-decoration:none;
}
.mp-shot-img{
  display:block;
  border-radius:8px;
  overflow:hidden;
  background:#f4f8fc;
}
.mp-shot-img img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:top center;
}
.mp-shot h3{ margin-top:14px; font-size:17px; color:#0f2b3d; font-weight:700; text-align:center; }
.mp-shot p{ margin-top:6px; font-size:13px; color:#7a8a99; text-align:center; }
.mp-more{ text-align:center; margin-top:28px; }
.mp-more a{
  display:inline-block;
  padding:11px 26px;
  border:1px solid #cfe3f2;
  border-radius:23px;
  font-size:14px;
  color:#0083cb;
  text-decoration:none;
}
.mp-more a:hover{ background:#eaf6fe; border-color:#9ecdea; text-decoration:none; }

@media screen and (max-width:1199px){
  .mp-icons{ grid-template-columns:repeat(5,1fr); gap:12px; }
  .mp-icons li{ padding:18px 8px 15px; }
  .mp-step.is-8{ grid-template-columns:repeat(4,1fr); }
}
@media screen and (max-width:860px){
  .mp-icons{ grid-template-columns:repeat(5,1fr); gap:10px; }
  .mp-icons li{ padding:15px 6px 13px; }
  .mp-ico{ width:48px; height:48px; margin-bottom:9px; }
  .mp-ico svg{ width:24px; height:24px; }
  .mp-icons h4{ font-size:12.5px; }
}
@media screen and (max-width:767px){
  .mp-icons{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .mp-icons li{ padding:16px 8px 14px; border-radius:10px; }
  .mp-ico{ width:46px; height:46px; margin-bottom:9px; }
  .mp-ico svg{ width:24px; height:24px; }
  .mp-icons h4{ font-size:13px; }
  .mp-step.is-8{ grid-template-columns:1fr 1fr; gap:10px; }
  .mp-shots{ grid-template-columns:1fr; gap:14px; }
  .mp-shot-img img{ aspect-ratio:3/4; max-height:none; object-fit:cover; }
  .mp-shot h3{ margin-top:12px; font-size:16px; }
  .mp-list .mp-note{ font-size:12.5px; }
}

/* =========================================================
   了解鸿孚栏目（about.php / contact.php / job.php）
   二级导航 + 简介 / 优势 / 客户 / 理念 / 联系方式 / 岗位
   ========================================================= */

/* 栏目二级导航：下划线标签栏（替代原来的小胶囊，更像真正的分页标签） */
.mp-subnav{
  background:#fff;
  border-bottom:1px solid #e6edf4;
  position:relative;
}
.mp-subnav ul{
  display:flex !important;
  justify-content:center;
  align-items:stretch;
  gap:0 !important;
  width:auto;
  max-width:100%;
  box-sizing:border-box;
  margin:0 !important;
  padding:0 !important;
  flex-wrap:nowrap;
}
.mp-subnav li{
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  display:block !important;
  line-height:1 !important;
}
.mp-subnav a{
  position:relative;
  display:block !important;
  height:56px !important;
  line-height:56px !important;
  padding:0 30px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:15.5px !important;
  font-weight:400;
  color:#5d6f7e !important;
  text-decoration:none !important;
  white-space:nowrap;
  transition:color .18s,background .18s;
}
.mp-subnav a:hover{
  color:#0083cb !important;
  background:#f6fbfe !important;
  text-decoration:none !important;
}
.mp-subnav a.on{
  color:#0083cb !important;
  font-weight:700 !important;
  background:transparent !important;
}
.mp-subnav a.on:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  background:#0083cb;
}

/* 简介段落 */
.ab-intro{ max-width:940px; margin:0 auto; }
.ab-intro p{
  font-size:15px;
  line-height:2.05;
  color:#5d6f7e;
  margin-bottom:14px;
  text-align:justify;
}
.ab-intro p:last-child{ margin-bottom:0; }
.ab-intro strong{ color:#0f2b3d; font-weight:700; }

/* 关键数据条 */
.ab-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:32px;
}
.ab-fact{
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:12px;
  padding:22px 16px 20px;
  text-align:center;
}
.ab-fact b{
  display:block;
  font-size:30px;
  line-height:1.1;
  font-weight:700;
  color:#0083cb;
}
.ab-fact b em{ font-style:normal; font-size:15px; font-weight:600; }
.ab-fact span{
  display:block;
  margin-top:9px;
  font-size:13px;
  line-height:1.5;
  color:#7a8a99;
}

/* 四列卡片网格 */
.mp-grid.is-4{ grid-template-columns:repeat(4,1fr); }
.mp-card-lnk{ margin-top:14px !important; }
.mp-card-lnk a{ font-size:13px; color:#0083cb; text-decoration:none; }
.mp-card-lnk a:hover{ text-decoration:underline; }

/* 优势：六宫格 */
.ab-adv{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ab-adv li{
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:12px;
  padding:24px 22px 22px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ab-adv li:hover{
  border-color:#b7dcf3;
  box-shadow:0 10px 26px rgba(0,60,110,.08);
  transform:translateY(-2px);
}
.ab-adv .mp-ico{ width:46px; height:46px; margin-bottom:14px; }
.ab-adv .mp-ico svg{ width:23px; height:23px; }
.ab-adv h3{ font-size:16px; color:#0f2b3d; font-weight:700; margin-bottom:8px; }
.ab-adv p{ font-size:13.5px; line-height:1.85; color:#6b7c8c; }

/* 四步流程 */
.mp-step.is-4{ grid-template-columns:repeat(4,1fr); }

/* 客户名单 */
.ab-tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ab-tags li{
  padding:10px 18px;
  border:1px solid #e2eaf2;
  border-radius:8px;
  background:#fff;
  font-size:13.5px;
  line-height:1.3;
  color:#4a5a69;
}

/* 理念卡英文标签 */
.ab-idea .ab-en{
  display:block;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#9db1c1;
  margin-bottom:8px;
}
.ab-idea .mp-card h3{ margin-bottom:10px; }

/* 联系方式卡 */
.ab-lx{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ab-lx li{
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:12px;
  padding:24px 22px 22px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ab-lx li:hover{ border-color:#b7dcf3; box-shadow:0 10px 26px rgba(0,60,110,.08); }
.ab-lx .mp-ico{ width:44px; height:44px; margin-bottom:14px; }
.ab-lx .mp-ico svg{ width:22px; height:22px; }
.ab-lx h3{ font-size:13px; font-weight:400; color:#7a8a99; margin-bottom:8px; }
.ab-lx b{
  display:block;
  font-size:18px;
  line-height:1.45;
  font-weight:700;
  color:#0f2b3d;
  word-break:break-all;
}
.ab-lx b.ab-lx-addr{ font-size:15px; line-height:1.7; }
.ab-lx p{ margin-top:8px; font-size:12.5px; line-height:1.7; color:#8a99a7; }
.ab-lx .lnk{ display:inline-block; margin-top:12px; font-size:13px; color:#0083cb; text-decoration:none; }
.ab-lx .lnk:hover{ text-decoration:underline; }

/* 招聘岗位 */
.ab-jobs > li{
  background:#fff;
  border:1px solid #e8eef4;
  border-radius:12px;
  padding:26px 28px 22px;
  margin-bottom:18px;
}
.ab-jobs > li:last-child{ margin-bottom:0; }
.ab-job-h{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid #eef2f7;
}
.ab-job-h h3{ font-size:19px; color:#0f2b3d; font-weight:700; }
.ab-job-h em{
  font-style:normal;
  font-size:12px;
  line-height:1;
  padding:5px 11px;
  border-radius:10px;
  background:#eef7fd;
  color:#0083cb;
}
.ab-job-cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.ab-job-cols h4{ font-size:14px; font-weight:700; color:#0083cb; margin-bottom:10px; }
.ab-job-cols li{
  position:relative;
  padding-left:16px;
  margin-bottom:7px;
  font-size:13.5px;
  line-height:1.85;
  color:#5d6f7e;
}
.ab-job-cols li:before{
  content:"";
  position:absolute;
  left:0; top:9px;
  width:5px; height:5px;
  border-radius:50%;
  background:#b7d3e8;
}

/* ---------------- 响应式 ---------------- */
@media screen and (max-width:1199px){
  .mp-grid.is-4{ grid-template-columns:repeat(2,1fr); }
  .ab-facts{ grid-template-columns:repeat(4,1fr); gap:12px; }
  .ab-fact b{ font-size:26px; }
  .ab-adv{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .ab-lx{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .ab-jobs > li{ padding:22px 22px 18px; }
}
@media screen and (max-width:860px){
  .ab-facts{ grid-template-columns:repeat(2,1fr); }
  .ab-intro p{ font-size:14.5px; line-height:1.95; }
  .ab-job-cols{ gap:18px; }
}
@media screen and (max-width:767px){
  .mp-subnav ul{ width:100% !important; padding:0 10px !important; }
  .mp-subnav li{ flex:1 1 0; text-align:center; min-width:0; }
  .mp-subnav a{
    height:50px !important;
    line-height:50px !important;
    padding:0 4px !important;
    font-size:14.5px !important;
  }
  .mp-subnav a.on:after{ left:10px; right:10px; height:2.5px; }
  .mp-grid.is-4{ grid-template-columns:1fr; }
  .ab-adv{ grid-template-columns:1fr; gap:12px; }
  .ab-adv li{ padding:20px 18px; }
  .ab-adv h3{ font-size:15px; }
  .ab-adv p{ font-size:13px; }
  .mp-step.is-4{ grid-template-columns:1fr 1fr; }
  .ab-facts{ gap:10px; margin-top:24px; }
  .ab-fact{ padding:18px 12px 16px; }
  .ab-fact b{ font-size:24px; }
  .ab-fact span{ font-size:12px; }
  .ab-tags{ gap:8px; }
  .ab-tags li{ padding:8px 13px; font-size:12.5px; }
  .ab-lx{ grid-template-columns:1fr; gap:12px; }
  .ab-lx b{ font-size:17px; }
  .ab-jobs > li{ padding:20px 18px 16px; border-radius:10px; }
  .ab-job-h{ padding-bottom:12px; margin-bottom:14px; }
  .ab-job-h h3{ font-size:17px; }
  .ab-job-cols{ grid-template-columns:1fr; gap:16px; }
  .ab-job-cols li{ font-size:13px; line-height:1.8; }
}

/* 平板/手机上「公司档案」类面板行距收紧，避免首屏过高 */
@media screen and (max-width:860px){
  .mp-panel{ padding:18px 18px 10px; }
  .mp-panel h3{ padding-bottom:10px; font-size:15px; }
  .mp-panel li{ padding:10px 0; font-size:13.5px; }
}