/* ============================================================
   山东天研仪器 - 全站页脚样式（首页 + 内页共用）
   由 index.css 抽出；由 f_common.html（页脚公共模块）中的 <link> 引用
   注意：此处只放页脚自身样式，绝不加入 body/overflow 等页面级规则
   ============================================================ */
  :root{
    --blue:#1a6fe8;
    --deep:#0b2a5b;
    --cyan:#19b8d8;
    --ink:#16233b;
    --gray:#5b6b84;
    --bg:#f4f8fd;
    --card:#ffffff;
    --shadow:0 18px 50px rgba(15,60,140,.12);
    --radius:18px;
  }

  /* 内页适配：页脚自然高度（首页由 index.css 的 .screen 提供 100vh 全屏）
     clear:both 清除内页 float 布局（.lod_a/.lod_b 等均 float:left），否则页脚会与内容重叠 */
  footer{position:relative;padding:40px 0;clear:both}

  /* ============ 底部（全屏 · 联系我们卡片式） ============ */
  footer{background:
    radial-gradient(900px 500px at 15% 10%, rgba(64,150,255,.35), transparent 60%),
    linear-gradient(160deg,#0b2f66 0%,#0d3f86 45%,#1160c9 100%);
    display:flex;color:var(--ink)}
  .f-wrap{width:min(1240px,92%);margin:auto;background:#fff;border-radius:26px;
    padding:54px 58px 26px;box-shadow:0 40px 90px rgba(3,20,50,.4);position:relative;z-index:2;overflow:hidden}
  .f-wrap::before{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,rgba(26,111,232,.08),transparent 70%)}
  .f-grid2{display:grid;grid-template-columns:1.08fr 1fr;gap:56px;align-items:start;position:relative;z-index:2}
  .f-left h4{font-size:27px;font-weight:800;color:var(--deep);display:flex;align-items:center;gap:12px;letter-spacing:2px;margin-top: 22px;}
  .f-left h4::before{content:"";width:6px;height:24px;border-radius:3px;flex:none;
    background:linear-gradient(180deg,var(--cyan),var(--blue));box-shadow:0 4px 10px rgba(26,111,232,.35)}
  .f-left .f-sub{color:#93a7c4;font-size:13px;margin:8px 0 16px;letter-spacing:.5px;padding-left:18px}
  .f-desc{font-size:13.2px;color:var(--gray);line-height:1.85;text-align:justify;margin-bottom:16px;
    background:linear-gradient(135deg,rgba(26,111,232,.05),rgba(25,184,216,.05));
    border-left:3px solid var(--blue);border-radius:0 10px 10px 0;padding:10px 14px}
  /* 热线：横向条卡（图标 + 文案 + 大号号码） */
  .f-hotline{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#1a6fe8,#2f8bff);color:#fff;
    border-radius:16px;padding:13px 20px;margin-bottom:14px;box-shadow:0 14px 30px rgba(26,111,232,.28);
    position:relative;overflow:hidden}
  .f-hotline::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12)}
  .fh-ico{width:46px;height:46px;border-radius:50%;flex:none;background:rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
  .fh-ico svg{width:22px;height:22px}
  .fh-info{flex:1;min-width:0;position:relative;z-index:1}
  .fh-label{font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.85);margin-bottom:2px}
  .fh-num{display:inline-block;font-size:25px;font-weight:800;color:#fff;letter-spacing:1px;line-height:1.2;transition:transform .3s}
  .fh-num:hover{transform:scale(1.04)}
  /* 三位经理：一排三张小卡，替代原先三行裸文本 */
  .f-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px;padding:0;list-style:none}
  .f-phones li{display:flex}
  .f-phones a{flex:1;display:flex;flex-direction:column;gap:4px;text-decoration:none;
    background:#f7fafd;border:1px solid #eaf1fa;border-radius:12px;padding:10px 12px;
    transition:transform .3s,box-shadow .3s,border-color .3s}
  .f-phones a:hover{transform:translateY(-3px);border-color:rgba(26,111,232,.45);box-shadow:0 12px 24px rgba(15,60,140,.12)}
  .fp-top{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gray)}
  .f-phones .fp-dot{width:6px;height:6px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--cyan),var(--blue))}
  .f-phones em{font-style:normal;color:#a9bad4;font-size:11px;margin-left:auto}
  .fp-num{font-size:15.5px;font-weight:800;color:var(--deep);letter-spacing:.4px;transition:color .3s}
  .f-phones a:hover .fp-num{color:var(--blue)}
  /* 搜索框：与整体圆角风格统一 */
  footer .tysdn_b .jij_ser form.flex{max-width:none;margin:0}
  footer .tysdn_b .search-inp{height:44px;border:1px solid #e3edf8;border-right:none;background:#f7fafd;
    border-radius:12px 0 0 12px;font-size:13.5px;color:var(--deep);transition:border-color .3s,background .3s}
  footer .tysdn_b .search-inp::placeholder{color:#a9bad4}
  footer .tysdn_b .search-inp:focus{border-color:var(--blue);background:#fff}
  footer .tysdn_b .search-sub{height:44px;padding:0 22px;border:none;color:#fff;font-weight:600;letter-spacing:1px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));border-radius:0 12px 12px 0;transition:filter .3s}
  footer .tysdn_b .search-sub:hover{filter:brightness(1.08)}
  .hq-web{margin-top:12px;font-size:13.5px;color:var(--gray)}
  .hq-web a{color:var(--blue);font-weight:600}
  .f-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
  .f-item .fi-ico{width:42px;height:42px;border-radius:50%;flex:none;
    background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;
    display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(26,111,232,.28);
    transition:transform .35s}
  .f-item:hover .fi-ico{transform:scale(1.1) rotate(-6deg)}
  .f-item .fi-ico svg{width:19px;height:19px}
  .fi-label{font-size:12.5px;color:#93a7c4;margin-bottom:4px}
  .fi-val{font-size:15.5px;color:var(--deep);font-weight:600;line-height:1.65}
  .fi-val a{color:var(--deep);transition:color .3s}
  .fi-val a:hover{color:var(--blue)}
  .f-right{display:flex;flex-direction:column;gap:22px}
  .qr-card{background:linear-gradient(180deg,#fbfdff,#f1f6fc);border:1px solid #eaf1fa;border-radius:18px;
    padding:18px 20px 16px;text-align:center;box-shadow:0 10px 26px rgba(15,60,140,.07);transition:transform .4s,box-shadow .4s}
  .qr-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,60,140,.13)}
  .qr-pair{display:grid;grid-template-columns:repeat(4,auto);gap:12px 18px;justify-content:center;margin-bottom:14px}
  .qr-item{display:flex;flex-direction:column;align-items:center}
  .qr-big{width:96px;height:96px;border-radius:10px;overflow:hidden;
    border:1px solid #eef3fa;background:#fff;padding:6px;transition:transform .35s,box-shadow .35s}
  .qr-item:hover .qr-big{transform:translateY(-4px);box-shadow:0 14px 28px rgba(15,60,140,.14)}
  .qr-big svg{width:100%;height:100%;display:block}
  .qr-cap{margin-top:7px;font-size:12px;color:var(--deep);font-weight:600;letter-spacing:.5px}
  .qr-card b{display:block;font-size:16px;color:var(--deep);margin-bottom:6px;letter-spacing:1px}
  .qr-card span{font-size:12.5px;color:#93a7c4}
  .hq-card{background:linear-gradient(180deg,#fbfdff,#f1f6fc);border:1px solid #eaf1fa;border-radius:18px;
    padding:24px 26px;box-shadow:0 10px 26px rgba(15,60,140,.07)}
  .hq-card h5{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--deep);margin-bottom:14px}
  .hq-card h5 svg{width:20px;height:20px;color:var(--blue)}
  .hq-card li{display:flex;gap:10px;font-size:13.5px;color:var(--gray);line-height:1.85;margin-bottom:9px;align-items:flex-start}
  .hq-card li svg{width:15px;height:15px;flex:none;margin-top:5px;color:var(--blue)}
  .hq-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .hq-badges span{display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1px 6px;
    font-size: 12px;
    color: var(--gray);
    background: #fff;
    border: 1px solid #e3edf8;
    border-radius: 16px;
    padding: 5px 12px;}
    .hq-badges span a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
  .hq-badges svg{width:13px;height:13px;color:var(--blue)}
  .f-bar{margin-top:36px;border-top:1px solid #edf3fa;padding-top:16px;text-align:center;
    font-size:12.5px;color:#93a7c4;position:relative;z-index:2}
  .f-bar a{color:#5b6b84}
  .f-bar a:hover{color:var(--blue)}

/* 搜索 */
/* 1. 核心布局容器 */
.tysdn_b .jij_ser form.flex {
    display: flex;             /* 启用弹性布局，使子元素横向排列 */
    align-items: center;       /* 垂直居中对齐，防止输入框和按钮高低不一 */
    width: 100%;               /* 确保表单占满父容器宽度 */
    max-width: 600px;          /* 可选：限制最大宽度，避免在大屏上过宽 */
    margin: 0 auto;            /* 可选：如果限制了宽度，使其水平居中 */
}

/* 2. 搜索输入框样式 */
.tysdn_b .search-inp {
    flex: 1;                   /* 关键：让输入框自动占据剩余所有空间 */
    height: 40px;              /* 设定统一高度 */
    padding: 0 15px;           /* 内部文字间距 */
    border: 1px solid #ddd;    /* 边框样式 */
    border-right: none;        /* 去掉右边框，以便与按钮无缝衔接（可选） */
    border-radius: 4px 0 0 4px;/* 左侧圆角 */
    outline: none;             /* 去掉点击时的默认蓝框 */
    font-size: 14px;
    color: #333;
    background-color: #fff;
}

/* 输入框聚焦时的效果 */
.tysdn_b .search-inp:focus {
    border-color: #007bff;     /* 聚焦时变色，提升体验 */
}

/* 3. 搜索按钮样式 */
.tysdn_b .search-sub {
    height: 40px;              /* 高度与输入框保持一致 */
    padding: 0 20px;           /* 按钮左右内边距 */
    border: 1px solid #007bff; /* 边框颜色 */
    background-color: #007bff; /* 背景颜色 */
    color: #fff;               /* 文字/图标颜色 */
    border-radius: 0 4px 4px 0;/* 右侧圆角，与输入框形成整体感 */
    cursor: pointer;           /* 鼠标悬停显示手型 */
    font-size: 14px;
    display: flex;             /* 如果按钮内有图标和文字，用flex居中 */
    align-items: center;
    justify-content: center;
    white-space: nowrap;       /* 防止按钮文字换行 */
}

/* 按钮悬停效果 */
.tysdn_b .search-sub:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}


  /* ============ 响应式（页脚部分） ============ */
  @media (max-height:820px){
    .f-wrap{padding:34px 46px 18px}
    .f-left h4{font-size:23px}
    .f-left h4::before{height:20px}
    .f-left .f-sub{margin:6px 0 12px}
    .f-desc{margin-bottom:12px;font-size:12.6px;padding:8px 12px}
    .f-hotline{padding:10px 16px;margin-bottom:12px}
    .fh-ico{width:38px;height:38px}
    .fh-ico svg{width:18px;height:18px}
    .fh-num{font-size:21px}
    .f-phones{gap:8px;margin-bottom:12px}
    .f-phones a{padding:8px 10px}
    .fp-num{font-size:14px}
    .f-item{margin-bottom:10px}
    .qr-big{width:84px;height:84px}
    .qr-pair{gap:10px 12px}
    .hq-card{padding:18px 20px}
    .f-bar{margin-top:22px;padding-top:12px}
  }

  @media (max-width:1080px){
    .f-grid2{grid-template-columns:1fr 1fr}
    .qr-pair{grid-template-columns:repeat(2,auto)}
    .qr-big{width:104px;height:104px}
    .fp-num{font-size:13.5px}
    .f-phones em{display:none}
    footer{padding:26px 0}
  }

  @media (max-width:640px){
    .f-wrap{padding:26px 18px 14px}
    .f-grid2{grid-template-columns:1fr;gap:26px}
    .qr-pair{gap:8px 10px}
    .qr-big{width:76px;height:76px}
    .f-phones{grid-template-columns:1fr 1fr}
  }