@charset "UTF-8";

:root {
  /* KXC(2026-08-23): 对齐内容区主色。导航的强调绿原来是 #2f7a52，
     和内容区的 #1f6b45 是两个绿，同屏并列能看出来。
     深色底面（--kxc-nav-ink / --kxc-nav-footer）保持不动 ——
     那是背景不是强调色，改了会动整个头尾的观感。 */
  --kxc-nav-green: #1f6b45;
  --kxc-nav-ink: #17382b;
  --kxc-nav-muted: #6a7e73;
  --kxc-nav-line: rgba(47, 122, 82, .16);
  --kxc-nav-bg: rgba(255, 255, 255, .96);
  --kxc-nav-footer: #102f23;
}

html {
  overflow-x: hidden;
}

body {
  max-width: 100%;
  min-width: 0 !important;
  overflow-x: hidden;
}

/* KXC(2026-08-23): 这里原本有四条规则，给「主页头 + 专题导航」两层叠放让位
   （.kxc-master-header 固定、专题导航 top:74px、#main-content padding-top:138px）。
   /10th 已改成独立专题（主导航里新窗口打开，页面内不注入主页头），
   两层变一层，这些让位全部撤掉 —— 留着会在导航条上方空出 74px 的空白。
   专题页自己的 Tailwind pt-16 正好配它 h-16 的导航条，不需要额外补。 */

.kxc-nav-unified-ready body,
.kxc-nav-unified-ready .body,
.kxc-nav-unified-ready .wrap,
.kxc-nav-unified-ready .wrapper,
.kxc-nav-unified-ready .container {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.header,
header.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  width: 100% !important;
  height: 74px !important;
  min-height: 74px !important;
  line-height: normal !important;
  border-bottom: 1px solid var(--kxc-nav-line) !important;
  background: var(--kxc-nav-bg) !important;
  box-shadow: 0 10px 30px rgba(20, 54, 38, .06) !important;
  backdrop-filter: saturate(130%) blur(10px);
}

.header .com-width,
header.header .com-width {
  display: flex !important;
  width: min(100% - 48px, 1240px) !important;
  height: 74px !important;
  margin: 0 auto !important;
  align-items: center !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

.header .logo,
header.header .logo {
  flex: 0 0 auto !important;
  width: 132px !important;
  height: 58px !important;
  margin: 0 !important;
}

.header .logo a,
.header .logo img,
header.header .logo a,
header.header .logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.header .logo img,
header.header .logo img {
  object-fit: contain !important;
}

.header .nav-list,
header.header .nav-list,
.header .gr-nav,
header.header .gr-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 74px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  white-space: nowrap !important;
}

.header .nav-list > li,
header.header .nav-list > li,
.header .gr-nav > li,
header.header .gr-nav > li {
  position: relative !important;
  float: none !important;
  height: 74px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header .nav-list > li > a,
header.header .nav-list > li > a,
.header .gr-nav > li > a,
header.header .gr-nav > li > a {
  display: inline-flex !important;
  height: 74px !important;
  align-items: center !important;
  padding: 0 14px !important;
  color: var(--kxc-nav-ink) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
}

.header .nav-list > li.on > a,
.header .nav-list > li > a:hover,
header.header .nav-list > li.on > a,
header.header .nav-list > li > a:hover,
.header .gr-nav > li.on > a,
.header .gr-nav > li > a:hover,
header.header .gr-nav > li.on > a,
header.header .gr-nav > li > a:hover {
  color: var(--kxc-nav-green) !important;
}

.header .nav-list > li.on > a::after,
header.header .nav-list > li.on > a::after,
.header .gr-nav > li.on > a::after,
header.header .gr-nav > li.on > a::after {
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  bottom: 15px !important;
  left: 14px !important;
  height: 2px !important;
  background: var(--kxc-nav-green) !important;
}

.header .nav-list > li > a::before,
header.header .nav-list > li > a::before,
.header .gr-nav > li > a::before,
header.header .gr-nav > li > a::before {
  display: none !important;
  content: none !important;
}

.header .caret,
header.header .caret {
  margin-left: 6px !important;
  border-top-color: currentColor !important;
}

.header .gr-sub-nav,
header.header .gr-sub-nav {
  position: absolute !important;
  top: 74px !important;
  left: 50% !important;
  z-index: 1001 !important;
  display: none !important;
  min-width: 168px !important;
  padding: 10px !important;
  border: 1px solid var(--kxc-nav-line) !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(16, 49, 34, .12) !important;
  transform: translateX(-50%) !important;
}

.header .nav-list > li:hover > .gr-sub-nav,
header.header .nav-list > li:hover > .gr-sub-nav,
.header .gr-nav > li:hover > .gr-sub-nav,
header.header .gr-nav > li:hover > .gr-sub-nav {
  display: grid !important;
  gap: 4px !important;
}

.header .gr-sub-nav li,
header.header .gr-sub-nav li {
  position: relative !important;
  float: none !important;
  width: 100% !important;
}

.header .gr-sub-nav a,
header.header .gr-sub-nav a {
  display: block !important;
  padding: 10px 12px !important;
  color: var(--kxc-nav-ink) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

.header .gr-sub-nav a:hover,
header.header .gr-sub-nav a:hover {
  background: #f1f8f3 !important;
  color: var(--kxc-nav-green) !important;
}

.header .header-right,
header.header .header-right {
  display: flex !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  margin-left: auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.header .search,
header.header .search {
  width: 210px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 1px solid var(--kxc-nav-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.header .search form,
header.header .search form {
  display: flex !important;
  width: 100% !important;
  height: 32px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.header .search input[type="hidden"],
header.header .search input[type="hidden"] {
  display: none !important;
}

.header .search .inp,
.header .search input[type="text"],
header.header .search .inp {
  width: calc(100% - 42px) !important;
  height: 32px !important;
  padding: 0 10px 0 16px !important;
  color: var(--kxc-nav-ink) !important;
  font-size: 13px !important;
  line-height: 32px !important;
}

.header .search .sub,
.header .search input[type="submit"],
header.header .search .sub {
  width: 36px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent url("/weboms/Template/pc_web/statics/images/icon-search.png") no-repeat center !important;
  font-size: 0 !important;
  line-height: 32px !important;
}

.footer,
footer.footer,
#main-footer {
  clear: both !important;
  visibility: visible !important;
  margin: 0 !important;
  padding: 44px 0 22px !important;
  background: var(--kxc-nav-footer) !important;
  color: rgba(255, 255, 255, .8) !important;
}

.kxc-master-header,
.kxc-master-footer {
  visibility: visible !important;
}

.footer .foot-content,
footer.footer .foot-content {
  display: grid !important;
  width: min(100% - 48px, 1240px) !important;
  margin: 0 auto !important;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.7fr) auto !important;
  gap: 32px !important;
  align-items: start !important;
}

.footer .foot-contact,
.footer .foot-nav,
.footer .foot-focus,
footer.footer .foot-contact,
footer.footer .foot-nav,
footer.footer .foot-focus {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.footer .tit,
footer.footer .tit,
#main-footer h3 {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.footer .tel,
footer.footer .tel {
  color: rgba(255, 255, 255, .82) !important;
}

.footer .foot-nav,
footer.footer .foot-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.footer .foot-nav .item,
footer.footer .foot-nav .item {
  width: auto !important;
}

.footer a,
footer.footer a,
#main-footer a {
  color: rgba(255, 255, 255, .72) !important;
  text-decoration: none !important;
}

.footer a:hover,
footer.footer a:hover,
#main-footer a:hover {
  color: #fff !important;
}

.footer .copyright,
footer.footer .copyright {
  width: min(100% - 48px, 1240px) !important;
  margin: 28px auto 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .58) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

.footer .links,
footer.footer .links {
  width: min(100% - 48px, 1240px) !important;
  margin: 26px auto 0 !important;
  color: rgba(255, 255, 255, .62) !important;
}

#main-nav {
  min-height: 74px !important;
  background: var(--kxc-nav-bg) !important;
  border-bottom: 1px solid var(--kxc-nav-line) !important;
}

#main-nav a {
  letter-spacing: 0 !important;
}

@media (max-width: 1180px) {
  .header .com-width,
  header.header .com-width {
    width: min(100% - 28px, 1240px) !important;
    gap: 14px !important;
  }

  .header .nav-list > li > a,
  header.header .nav-list > li > a,
  .header .gr-nav > li > a,
  header.header .gr-nav > li > a {
    padding: 0 10px !important;
    font-size: 15px !important;
  }

  .header .header-right,
  header.header .header-right {
    flex-basis: 160px !important;
    width: 160px !important;
  }
}

@media (max-width: 760px) {
  .header,
  header.header {
    height: 112px !important;
    min-height: 112px !important;
  }

  .kxc-anniversary-page #mobile-menu-btn {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    color: #4a5568 !important;
  }

  .kxc-anniversary-page #mobile-menu-btn::before {
    content: "\2630" !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }

  .kxc-anniversary-page #mobile-menu-btn .fa-bars {
    display: none !important;
  }

  .header .com-width,
  header.header .com-width {
    display: grid !important;
    height: auto !important;
    min-height: 112px !important;
    grid-template-columns: 112px 1fr !important;
    gap: 8px 12px !important;
    padding: 8px 0 10px !important;
  }

  .header .logo,
  header.header .logo {
    width: 104px !important;
    height: 44px !important;
  }

  .header .header-right,
  header.header .header-right,
  .header .search,
  header.header .search {
    display: none !important;
  }

  .header .nav-list,
  header.header .nav-list,
  .header .gr-nav,
  header.header .gr-nav {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .header .nav-list::-webkit-scrollbar,
  header.header .nav-list::-webkit-scrollbar,
  .header .gr-nav::-webkit-scrollbar,
  header.header .gr-nav::-webkit-scrollbar {
    display: none !important;
  }

  .header .nav-list > li,
  header.header .nav-list > li,
  .header .gr-nav > li,
  header.header .gr-nav > li {
    height: 44px !important;
    flex: 0 0 auto !important;
  }

  .header .nav-list > li > a,
  header.header .nav-list > li > a,
  .header .gr-nav > li > a,
  header.header .gr-nav > li > a {
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
  }

  .header .gr-sub-nav,
  header.header .gr-sub-nav {
    display: none !important;
  }

  .nav-box {
    background: #fff !important;
  }

  .nav-box a,
  #menu2 a {
    color: var(--kxc-nav-ink) !important;
    font-size: 16px !important;
  }

  .menu-footer {
    border-top: 1px solid var(--kxc-nav-line) !important;
    background: rgba(255, 255, 255, .96) !important;
  }

  .menu-footer a {
    color: var(--kxc-nav-green) !important;
  }

  .max-container .header-wrap {
    height: 72px !important;
    line-height: 72px !important;
  }

  .max-container .header,
  .max-container header.header {
    min-height: 72px !important;
    height: 72px !important;
    line-height: 72px !important;
  }

  .max-container .header .com-width,
  .max-container header.header .com-width {
    display: flex !important;
    width: min(100% - 32px, 690px) !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .max-container .header .logo,
  .max-container header.header .logo {
    width: 112px !important;
    height: 46px !important;
    margin: 0 !important;
  }

  .max-container .header .btn-menu,
  .max-container header.header .btn-menu {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    background-size: 34px auto !important;
  }

  .footer .foot-content,
  footer.footer .foot-content {
    width: min(100% - 28px, 1240px) !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer .foot-nav,
  footer.footer .foot-nav {
    grid-template-columns: 1fr 1fr !important;
  }

  .footer .copyright,
  footer.footer .copyright,
  .footer .links,
  footer.footer .links {
    width: min(100% - 28px, 1240px) !important;
  }

  #main-nav {
    min-height: 64px !important;
  }
}

/* ============================================================
   KXC(2026-08-23): 移动端抽屉菜单
   ------------------------------------------------------------
   作用范围：/mx /pp /ax /10th 四套静态页 —— 它们通过
   kxc-nav-unified.js 把 kxc-nav-fragment.php 注入当页头。

   改之前窄屏是一条横向滚动的导航带。实测（375px）：
     · 8 个一级链接都能划到（可滚 334px），不是够不到
     · 但 scrollbar-width:none 把滚动条藏了，没有任何可滚提示
     · 20 个二级栏目（产品中心 12 / 邂逅小草 6 / 草粉圈 2）
       在 <=760px 是 display:none，只能先进落地页再点
   抽屉把两级栏目一次摊开，顺带把窄屏被藏掉的搜索框也放进去。

   ── 两个必须留意的点 ──

   1. 所有规则都限定在 .kxc-nav-has-drawer 之下。
      这个类由 JS 在页面上确实存在 .kxc-nav-burger 时才打到 <html>。
      因为同一份 CSS 也被 CMS 的 pc_web / m_web 模板加载：
        pc_web 的页头有一模一样的 .nav-list.gr-nav 但没有汉堡按钮，
               不限定的话窄屏会变成"打得开却没开关"的抽屉；
        m_web  的页头有它自己的 .btn-menu 和 .nav-box，
               不限定的话我这些 .header 规则会去干扰它。
      加了限定，这两套模板完全碰不到下面任何一条。

   2. .header 上有 backdrop-filter，它会给 position:fixed 的后代
      造出包含块 —— 抽屉会钉在页头那个矩形里而不是视口上。
      所以窄屏必须把它关掉。
   ============================================================ */

/* 汉堡与遮罩只存在于注入的片段里，桌面端不显示 */
.kxc-nav-burger,
.kxc-nav-backdrop {
  display: none !important;
}

@media (max-width: 760px) {
  /* --- 页头回到单行（原来是 112px 的两行：logo 一行、导航带一行）--- */
  .kxc-nav-has-drawer .header,
  .kxc-nav-has-drawer header.header {
    height: 74px !important;
    min-height: 74px !important;
    backdrop-filter: none !important;          /* 见文件头第 2 点 */
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
  }

  .kxc-nav-has-drawer .header .com-width,
  .kxc-nav-has-drawer header.header .com-width {
    display: flex !important;
    height: 74px !important;
    min-height: 74px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* --- 汉堡按钮 --- */
  .kxc-nav-has-drawer .kxc-nav-burger {
    display: inline-flex !important;
    position: relative !important;
    z-index: 1002 !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  .kxc-nav-has-drawer .kxc-nav-burger__bar {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: var(--kxc-nav-ink) !important;
    transition: transform .24s cubic-bezier(.22, .61, .36, 1),
                opacity .18s linear !important;
  }

  /* 打开后三条变叉 */
  .kxc-nav-has-drawer.kxc-nav-open .kxc-nav-burger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .kxc-nav-has-drawer.kxc-nav-open .kxc-nav-burger__bar:nth-child(2) {
    opacity: 0 !important;
  }

  .kxc-nav-has-drawer.kxc-nav-open .kxc-nav-burger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .kxc-nav-has-drawer .kxc-nav-burger:focus-visible {
    outline: 2px solid var(--kxc-nav-green) !important;
    outline-offset: 2px !important;
  }

  /* --- 抽屉本体：覆盖原来那条横向滚动带 ---
         top 取 136px 而不是 74px，上面 62px 让给搜索框（见下）。 */
  .kxc-nav-has-drawer .header .nav-list,
  .kxc-nav-has-drawer header.header .nav-list,
  .kxc-nav-has-drawer .header .gr-nav,
  .kxc-nav-has-drawer header.header .gr-nav {
    position: fixed !important;
    top: 136px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 1001 !important;
    display: block !important;
    width: min(86vw, 330px) !important;
    height: auto !important;
    padding: 4px 0 32px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: -14px 0 40px rgba(16, 49, 34, .16) !important;
    transform: translateX(101%) !important;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1) !important;
    white-space: normal !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .kxc-nav-has-drawer.kxc-nav-open .header .nav-list,
  .kxc-nav-has-drawer.kxc-nav-open header.header .nav-list,
  .kxc-nav-has-drawer.kxc-nav-open .header .gr-nav,
  .kxc-nav-has-drawer.kxc-nav-open header.header .gr-nav {
    transform: translateX(0) !important;
  }

  /* --- 抽屉里的一级项 --- */
  .kxc-nav-has-drawer .header .nav-list > li,
  .kxc-nav-has-drawer header.header .nav-list > li,
  .kxc-nav-has-drawer .header .gr-nav > li,
  .kxc-nav-has-drawer header.header .gr-nav > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    border-bottom: 1px solid rgba(47, 122, 82, .1) !important;
  }

  .kxc-nav-has-drawer .header .nav-list > li > a,
  .kxc-nav-has-drawer header.header .nav-list > li > a,
  .kxc-nav-has-drawer .header .gr-nav > li > a,
  .kxc-nav-has-drawer header.header .gr-nav > li > a {
    display: block !important;
    height: auto !important;
    padding: 15px 22px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  /* 当前栏目原本是底部下划线，竖排里改成左侧色条 */
  .kxc-nav-has-drawer .header .nav-list > li.on > a::after,
  .kxc-nav-has-drawer header.header .nav-list > li.on > a::after,
  .kxc-nav-has-drawer .header .gr-nav > li.on > a::after,
  .kxc-nav-has-drawer header.header .gr-nav > li.on > a::after {
    top: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    left: 0 !important;
    width: 3px !important;
    height: auto !important;
  }

  /* 二级已经摊开了，下拉箭头没有意义 */
  .kxc-nav-has-drawer .header .caret,
  .kxc-nav-has-drawer header.header .caret {
    display: none !important;
  }

  /* --- 二级栏目：原来 <=760px 是 display:none，只能先进落地页。
         抽屉里直接摊开，20 个栏目一次可达。 --- */
  .kxc-nav-has-drawer .header .gr-sub-nav,
  .kxc-nav-has-drawer header.header .gr-sub-nav,
  .kxc-nav-has-drawer .header .nav-list > li:hover > .gr-sub-nav,
  .kxc-nav-has-drawer header.header .nav-list > li:hover > .gr-sub-nav,
  .kxc-nav-has-drawer .header .gr-nav > li:hover > .gr-sub-nav,
  .kxc-nav-has-drawer header.header .gr-nav > li:hover > .gr-sub-nav {
    position: static !important;
    display: block !important;
    /* pc_web/statics/css/style.css:946 把 .gr-sub-nav 做成了
       visibility:hidden + opacity:0 + translateY(20px)，靠 :hover 才显形；
       :948 又给它 position:absolute / top:104px / right:0 / width:150px。
       抽屉里这些全都要拆掉，光覆盖 display 是不够的 —— 会得到
       一块「占了位却看不见」的空白。 */
    visibility: visible !important;
    opacity: 1 !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* 同一处 style.css:949 给二级 li 设了 line-height:50px，
     配上抽屉里的 padding 会撑到 68px 一行，太高。 */
  .kxc-nav-has-drawer .header .gr-sub-nav > li,
  .kxc-nav-has-drawer header.header .gr-sub-nav > li {
    line-height: 1.4 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  .kxc-nav-has-drawer .header .gr-sub-nav a,
  .kxc-nav-has-drawer header.header .gr-sub-nav a {
    display: block !important;
    width: auto !important;
    padding: 9px 22px 9px 38px !important;
    line-height: 1.4 !important;
    transition: none !important;
    color: var(--kxc-nav-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  /* 三级不再摊开 —— 再摊一层抽屉会太长，三级都能从二级页进去 */
  .kxc-nav-has-drawer .header .gr-dropdown-menu,
  .kxc-nav-has-drawer header.header .gr-dropdown-menu {
    display: none !important;
  }

  /* --- 搜索框放进抽屉顶部（原来窄屏是整个 display:none）--- */
  .kxc-nav-has-drawer .header .header-right,
  .kxc-nav-has-drawer header.header .header-right {
    display: block !important;
    position: fixed !important;
    top: 74px !important;
    right: 0 !important;
    z-index: 1002 !important;
    width: min(86vw, 330px) !important;
    height: 62px !important;
    flex: none !important;
    margin: 0 !important;
    padding: 14px 22px !important;
    border-bottom: 1px solid rgba(47, 122, 82, .1) !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transform: translateX(101%) !important;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1) !important;
  }

  .kxc-nav-has-drawer.kxc-nav-open .header .header-right,
  .kxc-nav-has-drawer.kxc-nav-open header.header .header-right {
    transform: translateX(0) !important;
  }

  .kxc-nav-has-drawer .header .search,
  .kxc-nav-has-drawer header.header .search {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  /* --- 遮罩 --- */
  .kxc-nav-has-drawer .kxc-nav-backdrop {
    display: block !important;
    position: fixed !important;
    top: 74px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    background: rgba(10, 32, 22, .42) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .28s linear !important;
  }

  .kxc-nav-has-drawer.kxc-nav-open .kxc-nav-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* 抽屉打开时锁住背后的滚动 */
  .kxc-nav-has-drawer.kxc-nav-open,
  .kxc-nav-has-drawer.kxc-nav-open body {
    overflow: hidden !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .kxc-nav-has-drawer .header .nav-list,
  .kxc-nav-has-drawer header.header .nav-list,
  .kxc-nav-has-drawer .header .gr-nav,
  .kxc-nav-has-drawer header.header .gr-nav,
  .kxc-nav-has-drawer .header .header-right,
  .kxc-nav-has-drawer header.header .header-right,
  .kxc-nav-has-drawer .kxc-nav-backdrop,
  .kxc-nav-has-drawer .kxc-nav-burger__bar {
    transition: none !important;
  }
}