/* ===== Hero readability fix v2: darken the photo itself, no boxed panel ===== A diagonal scrim sits between the background photo (z-index:0) and the title text (z-index:2, already set by the Tier-2 hero standard), so any photo underneath is guaranteed dark enough for white type without putting a visible card behind the words. */ .phero::before, .hero-banner::before, .kgc.contact-hero .page-title-bar::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: none !important; content: none !important; display: none !important; } .phero-inner h1, .hero-inner h1, .hero-banner-content h1, .kgc.contact-hero .page-title h1, .phero-inner p, .hero-inner p, .hero-banner-content p, .kgc.contact-hero .page-title p { text-shadow: 0 2px 10px rgba(0, 0, 0, .5) !important; } /* Legacy token bridge --------------------------------------------------- --kg-* is a page-local legacy namespace (GlobalSO does not provide it). Keep it: the header (#kgh) re-defines these to white for its dark theme. Only the one missing value is filled here: --kg-radius-lg (lg panels). ---------------------------------------------------------------------- */ :root{ --kg-radius-lg: 12px; } /* Knowledge cards: long article titles must not run to 4 lines and overflow. kg-minimal.css disables line clamping globally (product names are never truncated); on this hub the long article titles then overflow the fixed 48px title row and overlap the image / next row. Restore a 3-line clamp and give the title row enough height at the 14px card font, keeping every card the same height. Scoped with #kgm so no other page is affected. */ html body #kgm .pcat-links .pcat-link{grid-template-rows:minmax(0,1fr) 56px!important} html body #kgm .pcat-links .pcat-link .nm-link-name:not(#kgm){ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:3!important; overflow:hidden!important; max-height:none!important; white-space:normal!important; overflow-wrap:anywhere!important; line-height:1.28!important; align-self:start!important; } html body #kgh .nav .menu li > ul li > a:hover{background:rgba(195,13,35,.06)!important;color:#c30d23!important;transform:none!important} /* 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 手机端会把菜单里 内的 三角压成 0×0（桌面正常）。 解法：弃用那个易碎的 svg，改用纯 CSS 边框三角画在"有子菜单的父项" ::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 的「移动端加速」 渲染链路（标志：），额外加载 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 且该表排在本