/* Keep only this custom header block visible if builder injects legacy fragments. */
html,body{margin:0!important;padding:0!important}header > :not(style):not(#kgh):not(script){display:none!important}
/* 全站正文统一为设计标准字体 Readex Pro（覆盖平台默认 Plus Jakarta / 散落的 Inter / Roboto 等）。
   仅作用于 body 及其后代；#kgh 内部另有 id 级规则，不会被覆盖。 */
body{font-family:var(--font-body,'Inter'),system-ui,-apple-system,'Segoe UI',sans-serif!important}
/* 平台部分版块会显式把 font-family 写死成 Roboto（如首页轮播/页脚等），
   body 继承无法覆盖，故对全部文本元素再强制一次 Readex Pro。
   排除图标字体元素（.la / .las / .fa* / swiper 箭头），避免图标变乱码。 */
body,
body *:not([class*="la-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.las):not(.lab):not(.lar):not(.lad):not(.la):not(.swiper-button-prev):not(.swiper-button-next):not([class*="swiper-button"]){
  font-family:var(--font-body,'Inter'),system-ui,-apple-system,'Segoe UI',sans-serif!important;
}
#kgh{--kg-red:#ffffff;--kg-red-dark:#e9edf3;--kg-blue:#ffffff;--kg-ink:#ffffff;--kg-line:rgba(255,255,255,.1);--kg-soft:rgba(255,255,255,.08);--kg-shadow:0 10px 30px rgba(0,0,0,.28);--kg-glass:rgba(11,11,11,.38)}
#kgh,#kgh *,#kgh *::before,#kgh *::after{box-sizing:border-box;margin:0;padding:0}
#kgh{--kg-header-h:72px;font-family:var(--font-body,'Inter'),system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--kg-ink);font-size:16px;line-height:1.6;padding-top:0}
#kgh a{color:inherit;text-decoration:none}
#kgh img{max-width:100%;height:auto;display:block;border:0}
#kgh ul,#kgh li{list-style:none}
#kgh button,#kgh input,#kgh select,#kgh textarea{font-family:inherit}
#kgh .wrap{width:100%;max-width:1440px!important;margin:0 auto!important;padding:0 24px!important;box-sizing:border-box}
#kgh .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px;padding:12px 20px;border-radius:7px;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;cursor:pointer;border:1px solid #c30d23;line-height:1.2;background:#c30d23;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.12)}
#kgh .btn:hover{background:#9e0a1c;border-color:#9e0a1c;box-shadow:0 4px 10px rgba(0,0,0,.18);transform:translateY(-1px)}
#kgh .header{position:fixed;top:0;left:0;right:0;z-index:9000;background:linear-gradient(180deg,rgba(11,27,43,.60),rgba(11,11,11,.44));backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.16);transition:box-shadow .28s ease,background .28s ease}
#kgh .header::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 120% at 0% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 55%)}
#kgh .header::after{content:'';position:absolute;left:0;right:0;top:0;height:55%;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.10),rgba(255,255,255,0))}
#kgh .header.is-floating{background:linear-gradient(180deg,rgba(11,27,43,.60),rgba(11,11,11,.44));box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 10px 30px rgba(0,0,0,.34)}
#kgh .header .wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
#kgh .logo{cursor:pointer}
#kgh .logo img{height:37px!important;width:auto!important;max-width:none!important;cursor:inherit}
#kgh .nav .menu{display:flex;align-items:center;gap:0}
#kgh .nav .menu>li{position:relative}
#kgh .nav .menu>li{cursor:pointer}
#kgh .nav .menu>li>a{display:flex;align-items:center;gap:6px;font-weight:400;font-size:16px;color:var(--kg-ink);padding:13px 15px;cursor:pointer}
#kgh .nav .menu>li>a *{cursor:inherit}
#kgh .nav .menu>li>a:hover{color:var(--kg-red-dark)}
#kgh .nav .menu em{font-style:normal;font-weight:inherit}
.menu .ico, .menu .ico img, #kgh .nav .menu .ico, #kgh .nav .menu .ico img {display:none!important;width:0!important;height:0!important;opacity:0!important;visibility:hidden!important}
/* FIX: 手机汉堡菜单展开后 Our Products / Our Brands 后面的下拉三角不显示。
   根因：GlobalSO 手机端会把菜单里 <b> 内的 <svg> 三角压成 0×0（桌面正常）。
   解法：弃用那个易碎的 svg，改用纯 CSS 边框三角画在"有子菜单的父项" <a>::after 上——
   不依赖 svg；用 #kgh 的 ID 选择器优先级压过平台的 class 规则，桌面/手机都稳定显示。 */
#kgh .nav .menu > li > a > b{display:none!important}
#kgh .nav .menu > li:has(> ul) > a{position:relative}
#kgh .nav .menu > li:has(> ul) > a::after{content:"";display:inline-block;margin-left:8px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));transition:transform .22s;flex:0 0 auto;align-self:center;pointer-events:none}
#kgh .nav .menu li ul{position:absolute;top:100%;left:0;min-width:240px;background:linear-gradient(180deg,rgba(11,27,43,.62),rgba(11,11,11,.5));backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.12);border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--kg-shadow);padding:10px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity .22s ease,transform .22s ease;z-index:9001}
@media(min-width:681px){#kgh .nav .menu li:hover > ul,#kgh .nav .menu li.hover-open > ul{display:block!important;opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}#kgh .nav .menu > li:has(> ul):hover > a::after,#kgh .nav .menu > li:has(> ul).hover-open > a::after{transform:rotate(180deg);border-top-color:#c30d23}
#kgh .nav .menu > li:has(> ul):focus-within > a::after{transform:rotate(180deg);border-top-color:#c30d23}}
#kgh .nav .menu li ul li{cursor:pointer}
#kgh .nav .menu li ul li a{display:block;padding:11px 14px;border-radius:4px;font-size:16px;font-weight:400;color:var(--kg-ink);white-space:nowrap;cursor:pointer;transition:transform .18s ease,background-color .18s ease,color .18s ease}
#kgh .nav .menu li ul li a *{cursor:inherit}
#kgh .nav .menu li ul li a:hover{background:var(--kg-soft);color:#fff;transform:translateX(4px)}
#kgh .header-cta{display:flex;align-items:center;gap:14px}
#kgh .menu-toggle{display:none!important;background:none;border:none;font-size:26px;cursor:pointer;color:var(--kg-ink)}
/* Search */
#kgh .kgh-search{position:relative;display:flex;align-items:center}
#kgh .kgh-search-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);border-radius:4px;color:#fff;cursor:pointer;transition:background-color .2s ease}
#kgh .kgh-search-toggle:hover{background:rgba(255,255,255,.16)}
#kgh .kgh-search-toggle svg{width:18px;height:18px;fill:#fff}#kgh .kgh-search-panel .gsc-control-cse{padding:0!important;font-family:inherit!important}#kgh .kgh-search-panel .gsc-search-box{margin:0!important}#kgh .kgh-search-panel table.gsc-search-box{width:100%!important}#kgh .kgh-search-panel .gsc-input-box{border:1px solid #E5E7EB!important;border-radius:7px!important;background:#F3F4F6!important;height:42px!important;padding:0 12px!important;box-sizing:border-box!important}#kgh .kgh-search-panel .gsc-input-box{transition:border-color .2s ease}#kgh .kgh-search-panel .gsc-input-box:focus-within{border-color:#C00818!important}#kgh .kgh-search-panel table.gsc-input,#kgh .kgh-search-panel .gsib_a,#kgh .kgh-search-panel .gsib_b{background:transparent!important;border:none!important;outline:none!important;box-shadow:none!important;background-image:none!important}#kgh .kgh-search-panel input.gsc-input{background:transparent!important;color:#111827!important;height:42px!important}#kgh .kgh-search-panel .gsc-search-button-v2{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:42px!important;height:42px!important;background:#c30d23!important;border-radius:7px!important;border:none!important;margin-left:8px!important;padding:0!important}#kgh .kgh-search-panel .gsc-search-button-v2 svg{fill:#fff!important}#kgh .kgh-search-panel table.gsc-search-box td.gsc-search-button{vertical-align:middle!important}
/* === kgh-gsc button (match ja) === */
#kgh td.gsc-search-button{display:table-cell!important;padding:0 0 0 10px!important;vertical-align:top!important}
#kgh .gsc-search-button-v2{background:#c30d23!important;border:none!important;border-radius:7px!important;height:48px!important;min-width:48px!important;width:48px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
#kgh .gsc-search-button-v2:hover,#kgh .gsc-search-button-v2:focus{background:#9e0a1c!important}
#kgh .gsc-search-button-v2 svg{fill:#fff!important;width:17px!important;height:17px!important}
/* === kgh-gsc button end === */

#kgh .kgh-search-panel{position:absolute;top:calc(100% + 16px);right:0;width:480px;max-width:88vw;max-height:70vh;overflow-y:auto;background:linear-gradient(180deg,rgba(11,27,43,.64),rgba(11,11,11,.52));backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.12);border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--kg-shadow);padding:12px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease;z-index:9002}
#kgh .kgh-search.open .kgh-search-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}




#kgh .kgh-search-go{flex:none;width:42px;height:42px;border:none;border-radius:4px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
#kgh .kgh-search-go svg{width:16px;height:16px;fill:#111}
/* Compact desktop band (681-1150px): keep the nav on a single line. The mobile
   drawer takes over at <=680px, so this is the narrow-desktop range. */
@media (max-width:1150px) and (min-width:681px){
  #kgh .wrap{padding:0 24px!important}
  #kgh .header .wrap{gap:12px!important}
  #kgh .logo img{height:29px!important;width:auto!important;max-width:none!important}
  #kgh .nav .menu > li > a{padding:13px 9px!important;font-size:14px!important;white-space:nowrap!important;gap:4px!important}
  #kgh .header-cta{gap:8px!important}
  #kgh .header-cta .btn{padding:10px 14px!important;font-size:13px!important;white-space:nowrap!important}
}
@media (max-width:1040px) and (min-width:681px){
  #kgh .header-cta .btn{display:none!important}
}
@media(max-width:680px){
  #kgh .nav,#kgh .header-cta .btn{display:none!important}
  #kgh .menu-toggle{display:block!important}
  #kgh{--kg-header-h:62px}
  #kgh .header{background:linear-gradient(180deg,rgba(11,27,43,.72),rgba(11,11,11,.56));box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 10px 30px rgba(0,0,0,.34)}
  #kgh .header .wrap{height:62px}
  #kgh .wrap{padding:0 20px!important}
  #kgh .header-cta{gap:10px}
  #kgh .logo img{height:30px!important;width:auto!important;max-width:none!important}
  #kgh .kgh-search{position:static}
  #kgh .kgh-search-panel{position:fixed;top:94px;left:10px;right:10px;width:auto;max-width:none;z-index:9004}
  /* 移动端抽屉背景：改为与顶部 header 完全一致的灰度和透明度
     (linear-gradient(180deg,rgba(11,27,43,.60),rgba(11,11,11,.44)) + 同款 blur)，
     不再用之前更深更不透明的一套灰。 */
  #kgh .nav.open{display:flex!important;position:fixed;top:62px;left:0;right:0;z-index:9003;background:linear-gradient(180deg,rgba(11,27,43,.90),rgba(11,11,11,.82));-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(#fff,#fff);isolation:isolate;flex-direction:column;padding:10px 16px 18px;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:var(--kg-shadow);max-height:calc(100vh - 62px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  #kgh .nav.open .menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  #kgh .nav.open .menu>li{border-bottom:1px solid rgba(255,255,255,.08)}
  #kgh .nav.open .menu>li>a{padding:13px 6px;justify-content:flex-start;gap:8px}
  #kgh .nav.open .menu > li.open > a::after{transform:rotate(180deg);border-top-color:#c30d23}
  #kgh .nav.open .menu li ul{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;box-shadow:none;border:none;border-radius:0;padding:0 0 8px 12px;min-width:0;display:none;background:rgba(255,255,255,.03)}
  #kgh .nav.open .menu li.open > ul{display:block}
  #kgh .nav.open .menu li ul li a{white-space:normal;overflow-wrap:break-word;word-break:break-word;padding:11px 8px;font-size:15px;line-height:21px}
}
/* FIX: 正式域名(www.kingentaglobal.com)的【首页，且仅首页】会走 GlobalSO 的「移动端加速」
   渲染链路（标志：<body mobile_visit_pc_home="1">），额外加载 mobile_style_async.css，
   其中带 !important 改写菜单：
     header .nav li a      { font-size:14px !important }
     header .nav ul li a   { font-size:12px !important }   ← 打中一级菜单
     header .nav ul ul li a{ font-size:12px !important }   ← 打中二级菜单
     header .nav li a      { padding:8px 15px 8px 0 !important; line-height:normal !important;
                             color:var(--bs-link-color) !important }   ← 该变量是 #111111
   且该表排在本 <style> 之后。上面那些规则本身没写 !important，所以线上首页手机端会出两种症状：
     1) 一级菜单被压成 12px、二级 10px、左内边距归零，抽屉高度 368px→218px；
     2) 菜单文字被染成 #111111 —— 黑底黑字，展开后看不见字。
        （<em> 继承 a 的 color，下拉三角 ::after 用 currentColor，都会一起变黑。）
   所有内页、以及预览域名 v6-me39v.globalso.site 都不走这条链路，在那些地方看着都正常
   —— 手机端改动必须在正式域名的【首页】上复验，看内页等于没验。
   解法：用 #kgh 的 ID 选择器 + !important 压回来（ID 优先级高于平台的纯 class/元素
   选择器，两边都 !important 时比特异性，我们赢）。 */
#kgh .nav .menu > li > a{font-size:16px!important;padding:13px 15px!important;line-height:1.6!important;color:var(--kg-ink)!important}
#kgh .nav .menu li ul li a{font-size:16px!important;padding:11px 14px!important;line-height:21px!important;color:var(--kg-ink)!important}
/* color 用了 !important，hover 态也必须补 !important，否则会被上面两条基础规则盖掉 */
#kgh .nav .menu > li > a:hover{color:var(--kg-red-dark)!important}
#kgh .nav .menu li ul li a:hover{color:#fff!important}
@media(max-width:680px){
  #kgh .nav.open .menu > li > a{font-size:16px!important;padding:15px 6px!important;line-height:1.6!important}
  #kgh .nav.open .menu li ul li a{font-size:13px!important;padding:9px 8px!important;line-height:21px!important}
}
/* FIX: Globalso's mobile-only stylesheet (mobile_style_first.css) injects
   `header>*:not(.mobile-head-items){display:none!important}`, which hides this
   whole custom header on phones (no menu, no ☰). #kgh is an id selector, so
   with !important it outranks that rule and stays visible on mobile. */
#kgh{display:block!important}
/* Neutralize the white sticky/background bar the platform forces on the site header element globally,
   allowing our custom #kgh .header overlay to float transparently on all screens. */
header{height:auto!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:none!important}
/* FIX: inner-page empty banner. Globalso renders a blank 92px-tall .page-banner
   placeholder inside #sectionIdhuy4658 on pages with no banner image (news + the
   6 product-category/brand pages), showing as a white strip under the fixed menu.
   This id exists ONLY on those affected pages, so hiding it globally is safe. */
/* FIX: GlobalSO 注入 .demo251-body > main {margin-top:92px} 给 fixed header 让位，
   但此值写死无响应式。我们的 header 实际高度是响应式的（桌面72px/手机62px，与 --kg-header-h 一致），需要覆盖。*/
body.demo251-body>main{margin-top:72px!important}
body.demo251-body>main#kgm,main#kgm{margin-top:0!important}
body.demo251-body[page-type="index"]>main,
body.demo251-body[page-route="index"]>main,
body.demo251-body>main:has(.hero),
body.demo251-body>main:has(.hero-banner),
body.demo251-body>main:has(.phero),
body.demo251-body>main:has(.ahero),
body.demo251-body>main:has(.facility-hero),
body.demo251-body>main:has(.section-imagetext-wrap-block),
body.demo251-body>main:has(#sectionIdhuy4658){margin-top:0!important}
@media(max-width:680px){
  body.demo251-body>main{margin-top:62px!important}
  body.demo251-body[page-type="index"]>main,
  body.demo251-body[page-route="index"]>main,
  body.demo251-body>main:has(.hero),
  body.demo251-body>main:has(.hero-banner),
  body.demo251-body>main:has(.phero),
  body.demo251-body>main:has(.ahero),
  body.demo251-body>main:has(.facility-hero),
  body.demo251-body>main:has(.section-imagetext-wrap-block),
  body.demo251-body>main:has(#sectionIdhuy4658){margin-top:0!important}
}
/* FIX: GlobalSO style.css 在 (max-width:992px) 下给 body 加 padding-top:4rem(56px)，
   给它自家的手机顶栏让位。该顶栏已被我们隐藏，但 padding 还在 → 手机/iPad 上
   header 下方出现 56px 白框。清零即可，main 的 margin-top 已经负责让位。*/
@media(max-width:992px){
  body.demo251-body{padding-top:0!important}
}

/* ===== GLOBAL HERO OVERRIDES ===== */
/* Adjust .phero (about-us, partner, brands, products portal, country sites) and .hero-banner (category templates, news) 
   so the text content is pushed down below the floating header. */
#kg .phero {
  min-height: 480px !important;
}
#kg .phero-inner {
  padding-top: 140px !important;
  padding-bottom: 80px !important;
}
.hero-banner {
  min-height: 450px !important;
}
.hero-banner-content {
  padding-top: 140px !important;
  padding-bottom: 60px !important;
}
@media (max-width: 680px) {
  #kg .phero {
    min-height: 380px !important;
  }
  #kg .phero-inner {
    padding-top: 110px !important;
    padding-bottom: 50px !important;
  }
  .hero-banner {
    min-height: 440px !important;
  }
  .hero-banner-content {
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }
}

/* Enforce the unified brand-blue overlay gradient globally on all subpage heroes */
#kg .phero-bg::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(120% 130% at 6% 50%, rgba(11,27,43,.40) 0%, rgba(11,27,43,.40) 18%, rgba(11,27,43,.12) 46%, transparent 72%),
    linear-gradient(90deg, rgba(11,27,43,.48) 0%, rgba(11,27,43,.48) 18%, rgba(11,27,43,.38) 42%, rgba(11,27,43,.07) 75%, transparent 100%) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   DROPDOWN + MEGA PANELS  [KG-MEGA]
   Restored to the original light look: white glass card, red column headings,
   dark item text. Single-column panels and the 4-column Our Product mega share
   the same surface so the menu reads as one system.
   ========================================================================== */
#kgh .nav .menu li ul{
  background:rgba(255,255,255,.98)!important;
  border:1px solid rgba(0,0,0,.08)!important;
  border-radius:12px!important;
  box-shadow:0 20px 50px rgba(11,27,43,.12), 0 4px 16px rgba(0,0,0,.04)!important;
  backdrop-filter:blur(24px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;
  padding:10px!important;
}
#kgh .nav .menu li ul li a{
  color:#2c2d30!important;font-size:13px!important;font-weight:500!important;line-height:21px!important;
  padding:8px 12px!important;border-radius:7px!important;
}
#kgh .nav .menu li ul li a:hover{
  background:rgba(195,13,35,.06)!important;color:#c30d23!important;
  transform:none!important;padding-left:18px!important;
}
/* Our Product mega panel */
#kgh .header .wrap{position:relative}
/* Close-on-click: same-page #anchor links do not navigate, so the hover panel would
   stay open over the page. JS adds .is-suppressed on any nav-link click and clears it
   when the pointer leaves the menu. Desktop only. */
@media (min-width:681px){
  #kgh .nav.is-suppressed .menu li ul,
  #kgh .nav.is-suppressed .menu li ul.kgh-mega{
    opacity:0!important;visibility:hidden!important;transform:translateY(6px)!important;pointer-events:none!important}
}
/* Desktop-only mega panel geometry (absolute 880px-wide centred grid). This
   used to have no media guard, so its !important declarations always beat
   the mobile accordion's non-important default-closed state, forcing the
   "Our Product" panel permanently open as an 880px grid on phones too — with
   the panel centred via left:50%/margin-left:-440px, only the ~375px middle
   slice of that 880px grid fell inside the viewport, so two of the four
   categories were simply off-screen. Scoping this whole block to desktop
   removes it from the mobile cascade entirely. */
@media (min-width:681px){
#kgh .nav .menu > li:has(> ul.kgh-mega){position:relative!important}
#kgh .nav .menu li ul.kgh-mega{
  left:50%!important;right:auto!important;margin-left:-440px!important;max-width:880px!important;width:880px!important;min-width:0!important;
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  column-gap:22px!important;row-gap:0!important;padding:14px 20px!important;
}
#kgh .nav .menu li ul.kgh-mega > li{position:static!important;border:0!important;margin:0!important;padding:0!important}
#kgh .nav .menu li ul.kgh-mega > li.kgh-mega-col{display:flex!important;flex-direction:column!important;min-width:0!important}
#kgh .nav .menu li ul.kgh-mega > li.kgh-mega-col > a{
  display:block!important;padding:0 0 6px!important;margin-bottom:5px!important;
  font-size:13px!important;font-weight:600!important;line-height:21px!important;
  color:#c30d23!important;white-space:nowrap!important;
  background:none!important;transform:none!important;
  border-bottom:1px solid rgba(0,0,0,.12)!important;
}
#kgh .nav .menu li ul.kgh-mega > li.kgh-mega-col > a:hover{color:#9e0a1c!important;background:none!important}
#kgh .nav .menu li ul.kgh-mega ul{
  position:static!important;display:block!important;opacity:1!important;
  transform:none!important;min-width:0!important;
  background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  padding:0!important;margin:0!important;
  /* FIX: do NOT force visibility:visible / pointer-events:auto here unconditionally.
     Those were making the inner column links hoverable+clickable even while the whole
     panel was "closed" (outer ul had opacity:0 but opacity does not block hit-testing).
     That let the invisible 880px-wide band of mega links capture the cursor and flip
     li:hover -> panel popped open early (e.g. when moving the mouse UP toward
     "Our Product" before reaching the label). Now the open-state visibility/pe is
     restored ONLY under li:hover (see the rule right after this block), so the inner
     content stays hidden/non-interactive when closed and becomes visible/clickable
     exactly when the panel is open. */
}
/* FIX (cont.): when the panel IS open (li:hover), force the inner column lists and
   their links visible + interactive again, otherwise the mega items can't be clicked.
   Gated on :hover so it applies ONLY in the open state -> no early-open from below. */
#kgh .nav .menu li:hover > ul.kgh-mega ul,
#kgh .nav .menu li.hover-open > ul.kgh-mega ul,
#kgh .nav .menu li:hover > ul.kgh-mega ul *,
#kgh .nav .menu li.hover-open > ul.kgh-mega ul *{
  visibility:visible!important;
  pointer-events:auto!important;
}
#kgh .nav .menu li ul.kgh-mega ul li{position:static!important;border:0!important;margin:0!important;padding:0!important}
#kgh .nav .menu li ul.kgh-mega ul li a{
  display:block!important;padding:8px 12px!important;font-size:13px!important;line-height:21px!important;
  color:#2c2d30!important;font-weight:500!important;white-space:normal!important;
  background:none!important;transform:none!important;border-radius:7px!important;
}
#kgh .nav .menu li ul.kgh-mega ul li a:hover{
  background:rgba(195,13,35,.06)!important;color:#c30d23!important;transform:none!important;
}
}
/* Narrow desktop (681-1150px): a trigger-anchored 720px panel would overflow the
   viewport, so revert to spanning the content box in that range. */
@media (max-width:1150px) and (min-width:681px){
  #kgh .nav .menu > li:has(> ul.kgh-mega){position:static!important}
  #kgh .nav .menu li ul.kgh-mega{left:24px!important;right:24px!important;max-width:none!important;margin-left:0!important}
}
@media (max-width:680px){
  /* 平台手机端可能用 max-height:0 / overflow:hidden / opacity / visibility 折叠嵌套列表
     （症状：箭头展开但内容空白）。逐项用 #kgh+!important 顶回；display 仍交给上方
     li.open > ul 规则做手风琴，避免全部子菜单常开。 */
  #kgh .nav.open .menu li ul{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;max-height:none!important;height:auto!important;overflow:visible!important;opacity:1!important;visibility:visible!important;transform:none!important}
  #kgh .nav.open .menu li.open > ul.kgh-mega{display:block!important;padding:4px 0 10px!important;max-height:none!important;height:auto!important;overflow:visible!important}
  #kgh .nav.open .menu li.open > ul.kgh-mega > li.kgh-mega-col{display:block!important;height:auto!important;max-height:none!important;overflow:visible!important}
  #kgh .nav.open .menu li.open > ul.kgh-mega > li.kgh-mega-col > a{
    display:block!important;padding:10px 8px 6px!important;margin-bottom:0!important;border-bottom:0!important;color:#c30d23!important}
  #kgh .nav.open .menu li.open > ul.kgh-mega ul{display:block!important;padding-left:10px!important;max-height:none!important;height:auto!important;overflow:visible!important;opacity:1!important;visibility:visible!important}
  #kgh .nav.open .menu li.open > ul.kgh-mega ul li{display:block!important;height:auto!important;max-height:none!important;overflow:visible!important}
  #kgh .nav.open .menu li.open > ul.kgh-mega ul li a{display:block!important;padding:8px!important;font-size:14px!important;line-height:21px!important;color:#e8e8ea!important;opacity:1!important;visibility:visible!important}
  #kgh .nav.open .menu li ul li a{color:#e8e8ea!important}
}