/* ==========================================================================
   全站统一框架：顶部信息栏 / 导航 / 页脚 / 手机底部条
   版式来源：客户确认的原型页（src/proto/index.html），每个页面完全一致，不改版式。
   原型页与非原型页都加载本文件，避免顶部/底部出现无样式错位。
   ========================================================================== */

/* ---------- 全局基准（非原型页 body 默认 margin 会导致整页内缩错位） ---------- */
body{margin:0}
/* .wrap 改为 auto 宽度：内容宽 = 容器宽 - 左右 padding，手机端不再左右溢出 36px
   （此前溢出会让浏览器缩小整页，所有文字变小看不清） */
.wrap{width:auto}

/* ---------- 顶部信息栏 ---------- */
.topbar{background:#0C1116;color:#7C8894;font-size:12.5px;letter-spacing:.02em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.topbar .r{display:flex;gap:26px}
.topbar b{color:#fff;font-weight:600}

/* ---------- 导航 ---------- */
nav{background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid #EBEDEF;position:sticky;top:0;z-index:60}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo__img{height:28px;width:auto;display:block}
.logo .cn{font-size:21px;font-weight:600;letter-spacing:.16em;color:#0C1116}
.logo .cn em{font-style:normal;color:#C8102E}
.logo .en{font-size:10px;color:#AAB2BC;letter-spacing:.22em;font-weight:500}
.menu{display:flex;gap:27px;font-size:14.5px}
/* display:block：下拉项（服务项目）的 a 在内层，行内元素撑不开上下 padding 会偏高 */
.menu a{display:block;color:#5C646E;padding:22px 0;border-bottom:2px solid transparent;transition:.2s;line-height:1.5}
.menu a:hover{color:#0C1116}
.menu a.hot{color:#C8102E;font-weight:600}
.menu a.on{color:#0C1116;font-weight:600;border-bottom-color:#C8102E}
.btn-o{background:#C8102E;color:#fff;padding:11px 22px;font-size:14px;font-weight:600;
       border-radius:3px;flex:none;transition:.2s}
.btn-o:hover{background:#A80D26}

/* 服务项目下拉（保留原导航的二级入口） */
.menu .has{position:relative;display:block}
.menu .has>a{display:block}
.menu .drop{position:absolute;left:0;top:100%;min-width:190px;background:#fff;border:1px solid #EBEDEF;box-shadow:0 8px 24px rgba(12,17,22,.10);padding:8px 0;display:none;z-index:70}
.menu .has:hover .drop{display:block}
.menu .drop a{display:block;padding:10px 18px;font-size:13.5px;color:#5C646E;border-bottom:0}
.menu .drop a:hover{background:#F7F8F9;color:#0C1116}

/* ---------- 页脚 ---------- */
footer{background:#080B0E;color:#69737F;padding:64px 0 30px;font-size:13px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
footer b{color:#fff;font-size:13.5px;display:block;margin-bottom:14px;font-weight:600;letter-spacing:.03em}
footer p{line-height:2.1;color:#7C8894}
.summ{margin-top:44px;padding-top:26px;border-top:1px solid #171C22;font-size:13.5px;color:#8B96A2;line-height:1.95}
.fbt{border-top:1px solid #171C22;margin-top:26px;padding-top:22px;font-size:12px;color:#5A6370;text-align:center}

/* ---------- 手机底部固定条（发照片 / 看案例 / 打电话） ---------- */
.mbar{display:none}

@media (max-width:992px){
  .menu{gap:18px;font-size:13.5px}
  footer .wrap{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:768px){
  /* 顶部信息栏手机上只保留电话，避免长文字换行溢出 */
  .topbar .wrap>div:first-child{display:none}
  .topbar .r span:first-child{display:none}
  .topbar .wrap{justify-content:flex-end}
  .topbar{font-size:11.5px}
  .topbar .wrap{height:34px}
  .topbar .r{gap:14px}
  nav .wrap{height:auto;flex-wrap:wrap;padding:12px 18px;gap:10px}
  .logo__img{height:19px}
  .menu{order:3;width:100%;overflow-x:auto;white-space:nowrap;gap:20px;font-size:13.5px;
        padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .menu a{padding:6px 0}
  .btn-o{padding:9px 16px;font-size:13px}
  footer .wrap{grid-template-columns:1fr;gap:26px}
  footer{padding:44px 0 24px}
  /* 给固定底部条留出空间，避免压住页脚版权行 */
  body{padding-bottom:62px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:99;background:#fff;
        border-top:1px solid #EBEDEF;box-shadow:0 -2px 14px rgba(0,0,0,.07)}
  .mbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
          gap:2px;padding:9px 4px;font-size:11.5px;color:#5C646E}
  .mbar a b{font-size:14px;color:#0C1116;font-weight:500}
  .mbar a.hot{background:#C8102E;color:#fff}
  .mbar a.hot b{color:#fff}
  .mbar a+.mbar a{border-left:1px solid #F0F1F3}
}