@charset "utf-8";
/* ============================================================
   固莱手机站 · 主样式
   视觉基准来源：原手机站 /mobile/css/common.css + /mobile/css/index.css
   （2026-11-05 经 FTP 只读读取，未复制其源码，以下为原创实现）
   实测值换算说明：原站 1rem = 10px @375 宽，本表统一折算成 px。
   ============================================================ */
:root{
  /* 原站实测配色 */
  --blue:#0b55b5;        /* 主蓝：标题短线、选中态 */
  --blue-deep:#1D2088;   /* 深蓝：选中文字 */
  --blue-dark:#0F3059;   /* 深藏蓝：板块底 */
  --blue-ink:#224682;    /* 流程序号 */
  --yellow:#FEF322;      /* 强调黄：主按钮、选中分页 */
  --ink:#333333;         /* 正文 */
  --ink-2:#666666;       /* 次要文字 */
  --ink-3:#999999;       /* 弱文字 */
  --ink-4:#b8c0c0;       /* 英文副标题 */
  --line:#e6e6e6;
  --bg:#f5f5f5;
  --white:#ffffff;

  /* 原站实测尺寸（common.css .wrap） */
  --wrap-max:750px;
  --wrap-min:320px;
  /* 换算后的常用字号 */
  --fs-title:28px;       /* 2.8rem 区块大标题 */
  --fs-sub:12px;         /* 1.2rem 英文副标题 */
  --fs-body:14px;        /* 1.4rem 正文 */
  --fs-small:11px;       /* 1.1rem 小字 */
  --fs-num:23px;         /* 2.3rem 数字 */
  --radius:8px;
  --shadow:0 8px 20px rgba(31,37,21,.15);
  --bot-h:56px;          /* 底部固定条高度：原站未在 CSS 直接给出，按图标+文字反推，标注「待确认」 */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Microsoft YaHei","PingFang SC",Verdana,Arial,sans-serif;
  font-size:14px;color:var(--ink);background:#e9ebef;line-height:1.6;
}
img{display:block;max-width:100%;border:0}
a{color:inherit;text-decoration:none}
ul,ol,li,dl,dd,dt,h1,h2,h3,h4,h5,h6,p,figure{margin:0;padding:0;list-style:none;font-weight:normal}
i,em{font-style:normal}
button,input,textarea{font-family:inherit;border:0;outline:0;background:none}

/* 手机容器：PC 上预览时居中显示 480px 手机视图，不影响手机端满屏 */
.app{
  width:100%;max-width:480px;min-width:var(--wrap-min);min-height:100vh;
  margin:0 auto;background:var(--white);position:relative;overflow:hidden;
  box-shadow:0 0 30px rgba(0,0,0,.08);padding-bottom:var(--bot-h);
}

/* ---------------- 顶部 ---------------- */
.hd{position:sticky;top:0;z-index:50;height:56px;background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:12px}
.hd .logo{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.hd .logo img{height:30px;width:auto}
.hd .logo span{font-size:15px;font-weight:bold;color:var(--blue-deep);white-space:nowrap}
.hd .hd-nav{margin-left:auto;display:flex;align-items:center;gap:16px}
.hd .hd-nav a{font-size:14px;color:var(--ink)}
.hd .burger{flex:0 0 auto;width:26px;height:26px;position:relative;cursor:pointer;margin-left:4px}
.hd .burger i{position:absolute;left:2px;right:2px;height:2px;background:var(--blue-deep);border-radius:2px;transition:transform .25s,opacity .25s}
.hd .burger i:nth-child(1){top:6px}
.hd .burger i:nth-child(2){top:12px}
.hd .burger i:nth-child(3){top:18px}
.hd .burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd .burger.on i:nth-child(2){opacity:0}
.hd .burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 下拉全屏菜单（原站 .menu2 / .erji，带从上落下动画） */
.menu{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;z-index:49;background:rgba(0,0,0,.45)}
.menu.on{display:block}
.menu-in{background:var(--white);padding:8px 0 18px;max-width:480px;margin:0 auto;animation:dropIn .3s both}
@keyframes dropIn{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
.menu-in a{display:block;padding:13px 20px;font-size:15px;border-bottom:1px solid #f2f2f2;color:var(--ink)}
.menu-in a:active{background:#f7f9ff;color:var(--blue)}
.menu-in a.cur{color:var(--blue);font-weight:bold}

/* ---------------- 轮播 ---------------- */
.banner{position:relative;width:100%;height:200px;overflow:hidden;background:var(--blue-dark)}
.banner .track{display:flex;height:100%;transition:transform .45s ease}
.banner .slide{flex:0 0 100%;height:100%;background-size:cover;background-position:center;position:relative}
.banner .slide .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 20px;color:var(--white);background:linear-gradient(transparent,rgba(0,0,0,.62))}
.banner .slide .cap h1{font-size:22px;font-weight:bold;line-height:1.3}
.banner .slide .cap p{font-size:12px;margin-top:4px;opacity:.92}
.banner .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.banner .dots i{width:6px;height:6px;border-radius:5px;background:rgba(255,255,255,.55);transition:width .25s,background .25s}
.banner .dots i.on{width:14px;background:var(--white)}

/* 快捷入口（原站 guide） */
.guide{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
.guide a{background:#f3f7ff;border-radius:var(--radius);padding:12px 10px;font-size:13px;color:var(--blue-deep);display:flex;align-items:center;gap:8px}
.guide a b{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:12px;flex:0 0 auto}

/* ---------------- 通用区块标题 ---------------- */
.sec{padding:26px 0}
.sec-hd{text-align:center;margin-bottom:18px}
.sec-hd h2{font-size:var(--fs-title);line-height:1.35;color:var(--ink);font-weight:bold}
.sec-hd em{display:block;font-size:var(--fs-sub);color:var(--ink-3);margin-bottom:8px;letter-spacing:.5px}
.sec-hd i{display:block;width:28px;height:2px;background:var(--blue);margin:8px auto 0}
.sec-hd.on-dark h2,.sec-hd.on-dark em{color:var(--white)}
.sec-hd.on-dark i{background:var(--white)}

/* 主按钮：原站黄色胶囊 .product strong */
.btn-y{display:block;width:180px;height:42px;line-height:42px;margin:16px auto 0;text-align:center;border-radius:21px;background:var(--yellow);color:#000;font-size:14px;font-weight:bold}
.btn-b{display:block;width:180px;height:42px;line-height:42px;margin:16px auto 0;text-align:center;border-radius:21px;background:var(--blue);color:#fff;font-size:14px}

/* ---------------- 产品中心（原站 .product） ---------------- */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:0 14px 12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs li{flex:0 0 auto;padding:8px 14px;border-radius:18px;background:#f2f3f5;font-size:13px;color:var(--ink-2);text-align:center;cursor:pointer}
.tabs li small{display:block;font-size:9px;color:var(--ink-4);line-height:1.2}
.tabs li.cur{background:var(--blue);color:#fff}
.tabs li.cur small{color:#dbe6ff}
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:0 14px 6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.pro-card{flex:0 0 46%;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.05)}
/* 二次精修：占位图为 388×220 横版，contain 保证占位说明文字不被裁掉；
   换成团队真实产品图后如需满铺，把 object-fit 改回 cover 即可 */
.pro-card .pic{width:100%;aspect-ratio:4/3;background:#f4f6fa;display:grid;place-items:center;padding:6px}
.pro-card .pic img{width:100%;height:100%;object-fit:contain}
.pro-card .tt{padding:10px;font-size:13px;text-align:center;color:var(--ink)}
.pro-card .tt em{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.pro-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 14px}
.pro-grid .pro-card{width:100%}

/* ---------------- 六大优势（原站 .super） ---------------- */
.super-box{background:#f6f8fc;padding:6px 0 22px}
.sup-list{display:flex;gap:12px;overflow-x:auto;padding:0 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.sup-list::-webkit-scrollbar{display:none}
.sup-card{flex:0 0 78%;scroll-snap-align:start;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.sup-card .num{background:var(--blue-deep);color:var(--yellow);font-size:var(--fs-num);font-weight:bold;padding:10px 14px;display:flex;align-items:baseline;gap:8px}
.sup-card .num small{font-size:11px;color:#c9d2f5;font-weight:normal}
.sup-card h4{font-size:15px;padding:12px 14px 0;color:var(--ink);font-weight:bold}
.sup-card p{font-size:13px;color:var(--ink-2);padding:8px 14px 16px;line-height:1.7}

/* ---------------- 8 大扶持（原站 .zcbj 深蓝底） ---------------- */
.policy{background:var(--blue-dark);padding:26px 14px}
.policy ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
.policy li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:12px 10px}
.policy li .ic{width:28px;height:28px;border-radius:50%;background:var(--yellow);color:#000;display:grid;place-items:center;font-size:12px;font-weight:bold;margin-bottom:8px}
.policy li h4{color:#fff;font-size:14px;font-weight:bold;margin-bottom:4px}
.policy li p{color:rgba(255,255,255,.78);font-size:11px;line-height:1.65}

/* ---------------- 加盟流程 / 条件 tab（原站 .jmbj） ---------------- */
.jm-tab{display:flex;border-bottom:1px solid var(--line);margin:0 14px}
.jm-tab li{flex:1;text-align:center;padding:10px 0;font-size:14px;color:var(--ink-2);position:relative;cursor:pointer}
.jm-tab li.cur{color:var(--blue-deep);font-weight:bold}
.jm-tab li.cur:after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--yellow)}
.jm-pane{display:none;padding:16px 14px}
.jm-pane.on{display:block}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.flow li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 6px;text-align:center;font-size:12px;color:var(--ink)}
.flow li b{display:block;width:24px;height:24px;line-height:24px;margin:0 auto 6px;border-radius:50%;background:var(--blue-deep);color:#fff;font-size:11px}
.cond li{padding:11px 12px;border-bottom:1px dashed var(--line);font-size:13px;color:var(--ink);display:flex;gap:8px}
.cond li:before{content:"✓";color:var(--blue);font-weight:bold}

/* ---------------- 案例 / 新闻 ---------------- */
.case-list{display:flex;gap:12px;overflow-x:auto;padding:0 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.case-list::-webkit-scrollbar{display:none}
.case-card{flex:0 0 70%;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.case-card .pic{aspect-ratio:16/9;background:#eef2f8;display:grid;place-items:center}
.case-card .pic img{width:100%;height:100%;object-fit:cover}
.case-card h4{padding:10px 12px 2px;font-size:14px;font-weight:bold}
.case-card p{padding:0 12px 12px;font-size:12px;color:var(--ink-3)}
.news-list{padding:0 14px}
.news-list li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.news-list li .pic{flex:0 0 92px;height:64px;border-radius:6px;overflow:hidden;background:#eef2f8}
.news-list li .pic img{width:100%;height:100%;object-fit:cover}
.news-list li .tx h4{font-size:14px;line-height:1.45;font-weight:bold;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-list li .tx p{font-size:11px;color:var(--ink-3);margin-top:4px}

/* ---------------- 内页 ---------------- */
.crumb{padding:10px 14px;font-size:12px;color:var(--ink-3);background:#fafbfc;border-bottom:1px solid var(--line)}
.crumb a{color:var(--blue)}
.pg-hd{padding:20px 14px 8px;text-align:center}
.pg-hd h1{font-size:22px;font-weight:bold;color:var(--ink)}
.pg-hd p{font-size:12px;color:var(--ink-3);margin-top:4px}
.article{padding:14px 16px 24px;font-size:15px;line-height:1.9;color:var(--ink)}
.article h2{font-size:18px;font-weight:bold;margin:18px 0 8px}
.article h3{font-size:16px;font-weight:bold;margin:14px 0 6px}
.article p{margin-bottom:12px}
.article img{border-radius:6px;margin:10px 0}
.kv{padding:0 14px 20px}
.kv li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;display:flex;gap:10px}
.kv li b{flex:0 0 76px;color:var(--ink-3);font-weight:normal;font-size:13px}
.form{padding:6px 14px 20px}
.form li{margin-bottom:12px}
.form label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:5px}
.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:11px 12px;font-size:14px;background:#fafbfc}
.form textarea{min-height:90px;resize:vertical}
.form .tip{font-size:11px;color:var(--ink-3);line-height:1.6}
.faq-item{margin:0 14px;border-bottom:1px solid var(--line)}
.faq-item dt{padding:14px 0;font-size:14px;font-weight:bold;display:flex;justify-content:space-between;gap:10px;cursor:pointer}
.faq-item dt:after{content:"+";color:var(--blue);font-size:18px;line-height:1}
.faq-item.open dt:after{content:"−"}
.faq-item dd{display:none;padding:0 0 14px;font-size:13px;color:var(--ink-2);line-height:1.8}
.faq-item.open dd{display:block}

/* ---------------- 页脚 + 底部固定条 ---------------- */
.ft{margin-top:8px;background:#f7f8fa;border-top:1px solid var(--line)}
.ft-nav{display:flex;justify-content:center;align-items:center;gap:16px;padding:16px 0;font-size:13px;color:var(--blue-deep)}
.ft-nav i{width:1px;height:12px;background:#ccc}
.ft-xx{text-align:center;padding:0 14px 18px;font-size:11px;color:var(--ink-3);line-height:1.9}
.ft-xx em{display:block}
.ft-xx a{color:var(--ink-3)}
.bot{position:fixed;left:0;right:0;bottom:0;z-index:48;height:var(--bot-h);background:#fff;border-top:1px solid var(--line);display:flex;max-width:480px;margin:0 auto;box-shadow:0 -2px 10px rgba(0,0,0,.05)}
.bot a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--ink-2)}
.bot a svg{width:20px;height:20px;fill:none;stroke:var(--blue-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bot a.tel{color:#fff;background:var(--blue);font-weight:bold;border-radius:0}
.bot a.tel svg{stroke:#fff}
.totop{position:fixed;right:calc(50% - 240px + 12px);bottom:calc(var(--bot-h) + 14px);z-index:47;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.12);display:none;place-items:center}
.totop svg{width:16px;height:16px;stroke:var(--blue-deep);stroke-width:2;fill:none}
.totop.on{display:grid}
@media (max-width:480px){.totop{right:12px}}

/* ---------------- 动效 ---------------- */
.fade{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.fade.in{opacity:1;transform:none}
.pc-tip{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bot-h) + 12px);z-index:60;background:rgba(29,32,136,.94);color:#fff;font-size:12px;padding:9px 14px;border-radius:20px;white-space:nowrap}
.pc-tip.on{display:block}
.pc-tip a{color:var(--yellow);text-decoration:underline}