@charset "utf-8";
/* ============================================================
   行业专题页 公用头尾样式
   被 application/shop/view/topic/topic_header.html
      application/shop/view/topic/topic_footer.html 使用
   ============================================================ */

/* ---------- 顶部条 ---------- */
.topic-topbar{background:#f7f7f7;color:#666;font-size:13px;border-bottom:1px solid #eee}
.topic-topbar .topic-inner{max-width:1200px;margin:0 auto;padding:0 15px;height:34px;display:flex;justify-content:space-between;align-items:center}
.topic-topbar a{color:#666;margin-left:16px}
.topic-topbar a:hover{color:#164a7c}
.topic-topbar .tel{color:#164a7c;font-weight:700}

/* ---------- 头部导航 ---------- */
.topic-header{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);position:relative;z-index:99}
.topic-header .topic-inner{max-width:1200px;margin:0 auto;padding:0 15px;display:flex;align-items:center;height:68px;gap:30px}
.topic-header .logo{display:flex;align-items:center;gap:12px}
.topic-header .logo img{height:46px;width:auto;display:block}
.topic-header .logo .brand{font-size:22px;font-weight:700;color:#164a7c;display:flex;align-items:baseline;gap:6px}
.topic-header .logo .brand-sub{font-size:12px;color:#999;font-weight:400;letter-spacing:.5px}
.topic-nav{display:flex;gap:4px;flex:1}
.topic-nav a{padding:6px 14px;font-size:15px;color:#333;border-radius:4px;white-space:nowrap}
.topic-nav a:hover{color:#164a7c;background:#eaf1f8;font-weight:700}
.topic-hsearch{display:flex;border:2px solid #164a7c;border-radius:4px;overflow:hidden}
.topic-hsearch input{border:0;outline:0;padding:6px 12px;width:180px;font-size:13px}
.topic-hsearch button{border:0;background:#164a7c;color:#fff;padding:0 18px;cursor:pointer}

/* ---------- 页脚 ---------- */
.topic-footer{background:#fff;color:#666;font-size:13px;padding:36px 0 20px;border-top:1px solid #eee;margin-top:60px}
.topic-footer .topic-inner{max-width:1200px;margin:0 auto;padding:0 15px}
.topic-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:26px}
.topic-footer .cols p{font-size:13px;line-height:1.9}
.topic-footer h4{color:#1f2d3d;font-size:15px;margin-bottom:12px}
.topic-footer a{display:block;padding:3px 0;color:#666}
.topic-footer a:hover{color:#164a7c}
.topic-footer .copy{border-top:1px solid #eee;padding-top:16px;text-align:center}

/* ---------- CTA 按钮 hover 浮层：显示咨询电话 ----------
   HTML 用法：<a href="#" data-tip="全国服务热线&#10;173-1779-5937">按钮文字</a>
   （data-tip 里用 &#10; 换行，配合 white-space:pre 实现两行） */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 14px);
  transform:translateX(-50%) translateY(6px);
  background:#fff;color:#164a7c;border-radius:8px;padding:10px 20px;
  font-size:14px;font-weight:700;line-height:1.7;letter-spacing:.4px;
  text-align:center;white-space:pre;
  box-shadow:0 8px 26px rgba(16,44,80,.22);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:999;
}
[data-tip]::before{
  content:"";position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(6px);
  border:6px solid transparent;border-top-color:#fff;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:999;
}
[data-tip]:hover::after,[data-tip]:hover::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ---------- 移动端 ---------- */
@media(max-width:920px){
  .topic-topbar .topic-inner{height:auto;padding:8px 15px;flex-wrap:wrap;gap:6px}
  .topic-header .topic-inner{height:auto;flex-wrap:wrap;padding:12px 15px;gap:12px}
  .topic-header .logo img{height:40px}
  .topic-hsearch{order:3;width:100%}
  .topic-hsearch input{flex:1;width:auto}
  .topic-nav{order:4;width:100%;overflow-x:auto;padding:6px 0}
  .topic-footer .cols{grid-template-columns:1fr 1fr}
}