/* ============================================
   页头样式表 header.css
   功能：顶栏 Logo/标语/快捷链接 + 桌面导航 + 搜索区
   写法：手机优先——每个模块先写移动端基础样式，
        紧跟其后的 min-width 媒体查询写桌面端增强（合写式，不开单独目录）
   断点全站统一：768 / 992 / 1200 / 1400
   变焦约定：桌面可见模块（搜索热词区）的定高框/字号/内距一律 rem（px ÷ 16）——
            <2560px 时根字号恒 16px、与原 px 完全等值；≥2560px 巨幕变焦段
            （见 base.css）随根字号整体放大。移动端专属模块（顶栏偏移、
            汉堡、移动搜索条）永远不会进入变焦段，保留 px 即可
   最后更新：2026-10-20（搜索热词区 px→rem，支持巨幕变焦）
   ============================================ */


/* ---------- 1. 移动端页面偏移 ---------- */
/* 手机端顶栏是 fixed 固定定位，给 body 顶部留出空间避免内容被遮挡 */
body {
  padding-top: 60px;        /* 等于移动端固定顶栏高度 */
}

/* ≥768px：顶栏回归文档流，不再需要偏移 */
@media (min-width: 768px) {
  body { padding-top: 0; }
}

/* ---------- 2. 顶栏（移动端：固定顶部） ---------- */
.main-header {
  position: fixed;                       /* 移动端固定在屏幕顶部 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 610;
  background-color: var(--color-bg-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding-block: 10px;
}

/* Logo + 标语 + 右侧链接 横向排列容器 */
.header-container {
  display: flex;
  align-items: center;                   /* 垂直居中 */
  justify-content: space-between;        /* Logo 靠左，链接靠右 */
  width: 100%;
}

/* ---------- 3. Logo 与标语 ---------- */
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;                        /* 防止 Logo 区被压缩 */
}

.header-logo img {
  width: auto;
  height: 40px;                          /* 移动端小 Logo */
  display: block;                        /* 消除图片底部间隙 */
  object-fit: contain;                   /* 按比例缩放不变形 */
}

/* 标语：移动端隐藏，≥992px 显示（见下方媒体查询） */
.header-slogan {
  display: none;
  margin-left: 20px;
  flex-direction: column;                /* 两段文字垂直排列 */
  transition: all 0.3s ease;
}

.header-slogan .slogan-1 {
  font-size: calc(var(--font-size-base) + 0.05vw);
}

.header-slogan .slogan-2 em i {
  font-size: 0.88rem;
}

/* ≥992px：显示顶部标语 */
@media (min-width: 992px) {
  .header-slogan { display: flex; }
}

/* 第二行标语前面的红色小图标（ax-iconfont 字体图标） */
.header-logo em i::before {
  content: '\e61a';
  font-family: 'ax-iconfont';
  font-size: 1rem;
  color: var(--color-primary);
}

/* ---------- 4. 顶栏右侧链接区 ---------- */
.header-tag {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 20px;
}

/* 桌面端快捷链接（字体下载/订单查询/TAG标签）：移动端整组隐藏 */
.desktop-use {
  display: none;
}

.header-tag .favorite {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 16px 0 0;                   /* 右侧留出红色小方块位置 */
  margin-right: 4px;
  margin-left: 1px;
  color: #cd0000;
  white-space: nowrap;
  position: relative;
}

/* 链接右侧的红色小方块装饰 */
.header-tag .favorite::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #cd0000;
}

/* 汉堡菜单按钮：移动端显示，≥768px 在 media 文件中隐藏 */
.mobile-toggle {
  display: block;
}

#menuDrawer i {
  color: var(--text-tertiary);
  font-size: 25px;
}

/* ≥768px：恢复桌面顶栏布局 */
@media (min-width: 768px) {
  /* 顶栏取消固定，回归文档流 */
  .main-header {
    position: relative;
    box-shadow: none;
  }
  /* 恢复桌面大 Logo */
  .header-logo img {
    width: 300px;
    height: 80px;
  }
  /* 显示桌面快捷链接，隐藏汉堡按钮 */
  .desktop-use { display: block; }
  .mobile-toggle { display: none; }
}


/* ---------- 5. 桌面主导航（移动端整栏隐藏，≥768px 显示） ---------- */
.nav.header-nav {
  display: none;                         /* 移动端隐藏 */
  position: sticky;                      /* 桌面端滚动到顶部时吸附 */
  top: 0;
  z-index: 600;
  background: var(--color-bg-light);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.1rem 0 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* ≥768px：显示桌面主导航 */
@media (min-width: 768px) {
  .nav.header-nav { display: block; }
}

.header-nav .container {
  display: flex;
}

/* 每个一级菜单项：均分宽度 + 分隔线 */
.header-nav .ax-item {
  flex: 1;
  text-align: center;
  border-right: 1px var(--rgba-005) solid;
  padding: calc(0.1rem + 0.1vw) 0;
}

.header-nav .ax-item:first-child {
  border-left: 1px var(--rgba-005) solid;
}

.header-nav .ax-item a.ax-text {
  display: block;
  width: 100%;
  line-height: calc(2rem + 0.6rem);      /* 菜单行高 */
  text-align: center;
  color: #000;
}

/* 菜单项悬停：文字变红 */
.header-nav div:hover > .ax-text {
  color: var(--color-primary-hover);
}

/* 菜单项下方的红色短横线：默认收起，悬停展开 */
.header-nav .ax-item .ax-line {
  position: absolute;
  left: 50%;
  top: calc(2rem + 0.6rem - 0.15rem);
  width: 2.8rem;
  height: 0.2rem;
  background-color: var(--color-primary-hover);
  transform: translate(-50%, 0) scaleX(0);
  transition: all 200ms linear;
}

.header-nav .ax-item:hover .ax-line {
  transform: translate(-50%, 0) scaleX(1);
}

/* ---------- 6. 导航二级下拉菜单 ---------- */
.ax-grade {
  position: relative;                    /* 下拉菜单定位参考 */
}

/* 下拉面板：默认隐藏，悬停展开 */
.ax-grade .ax-outer {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 3;
  display: none;
  width: 100%;
  box-sizing: border-box;
  transform: translate(-50%, 0);
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  text-align: left;
}

.ax-grade:hover .ax-outer {
  display: block;
}

.ax-grade ul.ax-outer li {
  line-height: 100%;
  font-size: calc(0.6rem + 0.2vw);
  transition: all 1000ms linear;
}

.ax-grade ul.ax-outer li:hover {
  color: #198cff;
  background-color: #f0f7ff;
}

.ax-grade .ax-outer a {
  display: block;
  position: relative;
  padding: calc(0.5rem + 0.2vw) calc(0.46rem + 0.3vw);
  color: var(--text-light);
  border-bottom: 1px rgba(255, 255, 255, 0.05) solid;
}

/* 下拉项右侧的小箭头图标 */
.ax-grade .ax-outer a::before {
  content: "\e76b";
  font-family: 'ax-iconfont';
  font-size: calc(0.3rem + 0.1vw);
  position: absolute;
  right: calc(0.3rem + 0.2vw);
  color: rgba(255, 255, 255, 0.4);
}

.ax-grade .ax-outer a:hover {
  color: var(--text-light);
  background: var(--color-primary-hover);
}


/* ---------- 7. 桌面搜索热词区（移动端隐藏，≥768px 显示） ----------
   本区所有定高框/字号/内距一律 rem（px ÷ 16）：<2560px 时根字号恒 16px、
   数值与 px 完全等值、外观不变；≥2560px 巨幕变焦段随根字号整体放大，
   避免"框不放大、字放大"把热词和输入框裁掉 */
.search-terms {
  display: none;                         /* 移动端隐藏 */
  height: 3.125rem;                      /* 50px ÷ 16 */
  margin: 0 auto;
  padding: 0 1.5625rem;                  /* 25px ÷ 16 */
  position: relative;
  z-index: 1;
  background-color: var(--color-bg-light);
}

/* 关键词列表统一字体（老站原有规则：防止继承成 20px 加粗默认字体） */
.search-terms ul,
.search-terms ol,
.search-terms li {
  font-size: 1rem;                       /* 16px ÷ 16，变焦段同步放大 */
  line-height: 1.5;
  font-weight: normal;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
}

/* 左侧：热门关键词 */
.search-terms .hotkw_left {
  float: left;
  width: 63%;
  height: 3.125rem;                      /* 50px ÷ 16，与外框同步 */
  margin-top: 0.625rem;                  /* 10px ÷ 16 */
  overflow: hidden;
  color: #777;
  font-size: 1rem;                       /* 16px ÷ 16 */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 关键词前的红色小图标 */
.search-terms .hotkw_left i {
  display: inline-block;
  width: 1.5rem;                         /* 24px ÷ 16，随文字同步放大 */
  height: 1.5rem;
  margin-bottom: -0.3125rem;             /* -5px ÷ 16 */
  overflow: hidden;
  background: url(/images/icon/ser01.png) no-repeat left center;
  background-size: contain;              /* 图标随框放大不变形、不裁切 */
}

.search-terms .hotkw_left #search-keywords {
  display: inline-block;
  color: #222;
  font-size: 1.25rem;                    /* 20px ÷ 16 */
  font-weight: bold;
}

.search-terms .hotkw_left #search-keywords ul {
  display: flex;
  gap: 0.75rem;                          /* 12px ÷ 16 */
}

.search-terms .hotkw_left #search-keywords ul li {
  display: inline-block;
}

.search-terms .hotkw_left a:hover {
  color: #c10326;
}

/* 右侧：搜索框 + 按钮 */
.search-terms .search_right {
  float: right;
  width: 40%;
  height: 1.875rem;                      /* 30px ÷ 16 */
  margin-top: 0.625rem;                  /* 10px ÷ 16 */
  padding-right: 3.125rem;               /* 50px ÷ 16，给搜索按钮留位 */
  overflow: hidden;
  position: relative;
}

.search-terms .search_right .sc_ipt {
  width: 100%;
  height: 1.875rem;                      /* 30px ÷ 16 */
}

.search-terms .search_right .sc_ipt input {
  display: block;
  width: 100%;
  height: 1.875rem;                      /* 30px ÷ 16 */
  line-height: 1.875rem;                 /* 30px ÷ 16，与框高取齐防裁字 */
  padding: 0 0.5625rem 0 1.0625rem;      /* 9px / 17px ÷ 16 */
  border: 1px solid #ccc;
  outline: none;
  color: var(--text-secondary);
  font-size: 1rem;                       /* 16px ÷ 16，变焦段同步放大 */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-terms .search_right .sc_ipt input:focus {
  color: var(--text-dark);
}

.search-terms .search_right .sc_ipt input::placeholder {
  color: var(--text-secondary);
}

/* 红色搜索按钮（放大镜图标） */
.search-terms .search_right .sc_btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 3.125rem;                       /* 50px ÷ 16 */
  height: 1.875rem;                      /* 30px ÷ 16 */
}

.search-terms .search_right .sc_btn input {
  display: block;
  width: 100%;
  height: 1.875rem;                      /* 30px ÷ 16 */
  border: none;
  outline: none;
  cursor: pointer;
  background: #c10326 url(/images/icon/top_ss.png) no-repeat center center;
  background-size: 1.375rem 1.375rem;    /* 22px ÷ 16，放大镜图标随按钮同步放大 */
}


/* ≥768px：显示桌面搜索热词区 */
@media (min-width: 768px) {
  .search-terms { display: flex; }
}

/* ---------- 8. 移动端搜索条（移动端显示，≥768px 隐藏） ---------- */
.search-bar {
  display: flex;
  align-items: center;                   /* 输入框与按钮垂直居中 */
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 5px 5%;
  box-sizing: border-box;
  background-color: var(--color-bg-light);
  border-top: 1px solid #eee;
}

/* 输入框容器：占满剩余空间 */
.search-bar .sc_ipt {
  flex: 1;
  height: 30px;
}

.search-bar .sc_ipt input {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 30px;
  padding: 0 15px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  outline: none;
}

.search-bar .sc_ipt input:focus {
  border-color: #aaa;
}

/* 红色搜索按钮 */
.search-bar .sc_btn {
  width: 50px;
  height: 30px;
  flex-shrink: 0;
}

.search-bar .sc_btn input {
  width: 100%;
  height: 100%;
  border: none;
  cursor: pointer;
  background: #c10326 url(/images/icon/top_ss.png) no-repeat center center;
}

/* ≥768px：隐藏移动端搜索条 */
@media (min-width: 768px) {
  .search-bar { display: none; }
}