:root { --c-primary: #2563eb; --c-primary-dark: #1d4ed8; --c-primary-light: #eff6ff; --c-accent: #7c3aed; --c-text: #0f172a; --c-text-muted: #64748b; --c-text-light: #94a3b8; --c-border: #e5e7eb; --c-bg: #ffffff; --c-bg-alt: #f8fafc; --c-bg-dark: #0f172a; --c-success: #10b981; --container-w: 1480px; --radius: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 3px rgba(15,23,42,0.06); --shadow: 0 4px 12px rgba(15,23,42,0.08); --shadow-lg: 0 12px 32px rgba(15,23,42,0.10); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--c-text); background: var(--c-bg); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; } a { color: var(--c-primary); text-decoration: none; transition: color .2s; } a:hover { color: var(--c-primary-dark); } img { max-width: 100%; height: auto; display: block; } .container { max-width: var(--container-w); margin: 0 auto; padding: 0 20px; } .site-header { position: sticky; top: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); z-index: 100; } .header-bar { display: flex; align-items: center; height: 72px; gap: 32px; } .brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--c-text); } .brand:hover { color: var(--c-text); } .brand .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; box-shadow: 0 4px 12px rgba(37,99,235,0.3); } .main-nav { flex: 1; display: flex; gap: 4px; align-items: center; } .main-nav a { color: var(--c-text-muted); padding: 8px 14px; border-radius: 6px; font-size: 14.5px; font-weight: 500; transition: all .2s; } .main-nav a:hover, .main-nav a.active { background: var(--c-primary-light); color: var(--c-primary); } .nav-item-has-sub { position: relative; display: inline-block; } .nav-item-has-sub > a { display: inline-flex; align-items: center; gap: 4px; } .nav-caret { font-size: 10px; transition: transform .2s; opacity: .7; } .nav-item-has-sub:hover .nav-caret { transform: rotate(180deg); } .nav-submenu { position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 12px 32px rgba(11,31,58,.14); border: 1px solid #eef2f7; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s, transform .22s, visibility .22s; z-index: 200; } .nav-item-has-sub:hover .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-submenu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .nav-submenu a { display: block; padding: 10px 14px; font-size: 14px; color: #0b1f3a; border-radius: 6px; font-weight: 500; transition: background .18s, color .18s; } .nav-submenu a:hover { background: #fff4ec; color: #ff8c42; } .nav-dark .nav-submenu a, .nav-transparent .nav-submenu a { color: #0b1f3a !important; } @media (max-width: 980px) { .nav-submenu { display: none; } } .header-right { display: flex; align-items: center; gap: 12px; } .lang-switch { position: relative; } .lang-switch summary { list-style: none; cursor: pointer; padding: 6px 12px; border: 1px solid var(--c-border); border-radius: 6px; font-size: 13px; color: var(--c-text-muted); text-transform: uppercase; background: #fff; } .lang-switch summary::-webkit-details-marker { display: none; } .lang-switch summary:hover { background: var(--c-bg-alt); } .lang-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 140px; padding: 6px; } .lang-dropdown a { display: block; padding: 8px 12px; color: var(--c-text); font-size: 13px; border-radius: 4px; } .lang-dropdown a:hover { background: var(--c-bg-alt); } .btn-quote { background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,0.25); transition: all .2s; } .btn-quote:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,99,235,0.35); } .block-section { padding: 80px 0; } .block-section.no-pad-top { padding-top: 0; } .block-section.no-pad-bot { padding-bottom: 0; } .section-title { font-size: 36px; font-weight: 800; text-align: center; margin: 0 0 12px; color: var(--c-text); line-height: 1.2; } .section-subtitle { text-align: center; color: var(--c-text-muted); font-size: 16px; margin: 0 auto 50px; max-width: 700px; } .block-hero { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); background-color: #0f172a; color: #fff; padding: 0; position: relative; overflow: hidden; aspect-ratio: 1920 / 800; min-height: 240px; display: flex; align-items: center; justify-content: center; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; } .block-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 80% 50%, rgba(124,58,237,0.3), transparent 60%), radial-gradient(circle at 20% 80%, rgba(37,99,235,0.4), transparent 60%); } .hero-inner { position: relative; z-index: 2; text-align: center; max-width: 800px; margin: 0 auto; padding: 20px 24px; } .hero-title { font-size: 56px; font-weight: 900; margin: 0 0 20px; line-height: 1.1; letter-spacing: -1px; } .hero-subtitle { font-size: 20px; color: rgba(255,255,255,0.85); margin: 0 0 36px; line-height: 1.5; } .hero-cta { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--c-primary); padding: 16px 38px; border-radius: 8px; font-size: 16px; font-weight: 700; box-shadow: 0 8px 24px rgba(255,255,255,0.2); transition: all .2s; } .hero-cta:hover { color: var(--c-primary-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,255,255,0.3); } .block-two-col { background: var(--c-bg-alt); } .two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .two-col-text h2 { font-size: 32px; margin: 0 0 16px; color: var(--c-text); } .two-col-text p { color: var(--c-text-muted); font-size: 16px; line-height: 1.7; margin: 0 0 16px; } .two-col-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .feature-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 36px 28px; text-align: center; transition: all .3s; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .feature-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: linear-gradient(135deg, var(--c-primary-light), #f5f3ff); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 28px; } .feature-card h3 { font-size: 20px; margin: 0 0 12px; color: var(--c-text); } .feature-card p { color: var(--c-text-muted); margin: 0; line-height: 1.6; } .block-text-content { max-width: 100%; margin: 0 auto; color: var(--c-text); font-size: 16px; line-height: 1.7; } .block-cta { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%); color: #fff; padding: 80px 0; text-align: center; } .cta-title { font-size: 36px; font-weight: 800; margin: 0 0 14px; } .cta-subtitle { font-size: 18px; color: rgba(255,255,255,0.9); margin: 0 0 32px; } .cta-button { display: inline-block; background: #fff; color: var(--c-primary); padding: 16px 40px; border-radius: 8px; font-size: 16px; font-weight: 700; transition: all .2s; } .cta-button:hover { color: var(--c-primary-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .product-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; transition: all .3s; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; border-color: var(--c-primary-light); } .product-cover { aspect-ratio: 4 / 3; background: var(--c-bg-alt); overflow: hidden; } .product-cover img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; } .product-card:hover .product-cover img { transform: scale(1.05); } .product-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; } .product-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--c-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card .summary { color: var(--c-text-muted); font-size: 13px; line-height: 1.5; flex: 1; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card .more { color: var(--c-primary); font-size: 13px; font-weight: 600; } .news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .news-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--c-border); transition: all .3s; } .news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; } .news-cover { aspect-ratio: 16 / 9; background: var(--c-bg-alt); overflow: hidden; } .news-cover img { width: 100%; height: 100%; object-fit: contain; } .news-card-body { padding: 18px; } .news-date { color: var(--c-text-light); font-size: 12px; margin-bottom: 6px; } .news-card h3 { font-size: 16px; margin: 0 0 8px; line-height: 1.4; color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-card .summary { color: var(--c-text-muted); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .inquiry-form { max-width: 720px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px; } .inquiry-form .form-row { margin-bottom: 18px; } .inquiry-form label { display: block; font-size: 13px; color: var(--c-text-muted); font-weight: 600; margin-bottom: 6px; } .inquiry-form input, .inquiry-form textarea { width: 100%; border: 1px solid var(--c-border); border-radius: 6px; padding: 12px 14px; font-size: 14px; font-family: inherit; transition: all .2s; } .inquiry-form input:focus, .inquiry-form textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .inquiry-form textarea { resize: vertical; min-height: 100px; } .inquiry-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .inquiry-submit { background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; padding: 14px 36px; border: none; border-radius: 6px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,0.25); transition: all .2s; width: 100%; } .inquiry-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,0.35); } .site-footer { background: var(--c-bg-dark); color: rgba(255,255,255,0.7); padding: 60px 0 30px; margin-top: 80px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 40px; } .footer-col h4 { color: #fff; font-size: 16px; margin: 0 0 18px; font-weight: 700; } .footer-col p, .footer-col li { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.6); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 8px; } .footer-col a { color: rgba(255,255,255,0.7); transition: color .2s; } .footer-col a:hover { color: #fff; } .footer-contact-row { display: flex; gap: 8px; margin-bottom: 10px; font-size: 13.5px; } .footer-contact-row .ic { width: 18px; color: var(--c-primary); flex-shrink: 0; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,0.4); } #ai-chat-launcher { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); box-shadow: 0 8px 24px rgba(37,99,235,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; z-index: 9998; transition: all .2s; } #ai-chat-launcher:hover { transform: scale(1.08); } @media (max-width: 960px) { .header-bar { gap: 16px; height: 60px; } .main-nav { display: none; } .hero-title { font-size: 36px; } .hero-subtitle { font-size: 16px; } .block-section { padding: 50px 0; } .section-title { font-size: 26px; } .two-col-grid { grid-template-columns: 1fr; gap: 30px; } .features-grid { grid-template-columns: 1fr; } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .news-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .inquiry-form { padding: 24px; } .inquiry-form .grid2 { grid-template-columns: 1fr; } } .nav-center .header-bar { position: relative; justify-content: center; } .nav-center .brand { position: absolute; left: 50%; transform: translateX(-50%); order: 2; } .nav-center .main-nav { flex: none; order: 1; justify-content: flex-start; position: absolute; left: 0; } .nav-center .header-right { order: 3; position: absolute; right: 0; } @media (max-width: 900px){ .nav-center .brand { position: static; transform: none; } .nav-center .main-nav { position: static; } } .nav-dark.site-header { background: #0b1f3a; border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: none; } .nav-dark .brand { color: #fff; } .nav-dark .brand:hover { color: #fff; } .nav-dark .main-nav a { color: rgba(255,255,255,.78); } .nav-dark .main-nav a:hover, .nav-dark .main-nav a.active { background: rgba(255,255,255,.1); color: #fff; } .nav-dark .lang-switch summary { color: rgba(255,255,255,.85); } .nav-dark .btn-quote { background: var(--c-accent, #ff8c42); color: #fff; } .nav-transparent.site-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,.15); backdrop-filter: none; transition: all .3s ease; } .nav-transparent .brand { color: #fff; } .nav-transparent .brand:hover { color: #fff; } .nav-transparent .main-nav a { color: rgba(255,255,255,.85); } .nav-transparent .main-nav a:hover, .nav-transparent .main-nav a.active { background: rgba(255,255,255,.15); color: #fff; } .nav-transparent .lang-switch summary { color: #fff; } .nav-transparent .btn-quote { background: #fff; color: #0b1f3a; } .nav-transparent.nav-scrolled { background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); } .nav-transparent.nav-scrolled .brand { color: var(--c-text); } .nav-transparent.nav-scrolled .main-nav a { color: var(--c-text-muted); } .nav-transparent.nav-scrolled .main-nav a:hover, .nav-transparent.nav-scrolled .main-nav a.active { background: var(--c-primary-light); color: var(--c-primary); } .nav-transparent.nav-scrolled .lang-switch summary { color: var(--c-text); } .nav-transparent.nav-scrolled .btn-quote { background: var(--c-primary); color: #fff; } .nav-minimal.site-header { background: #fff; border-bottom: 1px solid #f0f0f0; backdrop-filter: none; } .nav-minimal .header-bar { height: 84px; gap: 48px; } .nav-minimal .brand { font-weight: 700; letter-spacing: .5px; } .nav-minimal .brand .logo-icon { background: #0b1f3a; box-shadow: none; } .nav-minimal .main-nav { gap: 12px; justify-content: center; } .nav-minimal .main-nav a { color: #1a1a1a; font-size: 14px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; border-radius: 0; padding: 6px 4px; border-bottom: 2px solid transparent; } .nav-minimal .main-nav a:hover, .nav-minimal .main-nav a.active { background: transparent; color: #0b1f3a; border-bottom-color: #0b1f3a; } .nav-minimal .btn-quote { background: transparent; color: #0b1f3a; border: 1px solid #0b1f3a; border-radius: 0; text-transform: uppercase; letter-spacing: .8px; font-size: 13px; } .nav-minimal .btn-quote:hover { background: #0b1f3a; color: #fff; } .site-header { background:#fff; backdrop-filter:none; border-bottom:1px solid #ececec; } .header-bar { height:80px; gap:40px; } .brand { font-size:21px; font-weight:700; letter-spacing:-.3px; color:#111; gap:11px; } .brand:hover { color:#111; } .brand .logo-icon { width:38px; height:38px; border-radius:9px; background:#111; box-shadow:none; font-size:18px; } .main-nav { flex:1; gap:6px; } .main-nav a { position:relative; color:#444; padding:8px 16px; border-radius:0; font-size:15px; font-weight:500; letter-spacing:.1px; background:transparent; } .main-nav a::after { content:''; position:absolute; left:16px; right:16px; bottom:2px; height:2px; background:var(--c-primary,#111); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .main-nav a:hover, .main-nav a.active { background:transparent; color:#111; } .main-nav a:hover::after, .main-nav a.active::after { transform:scaleX(1); } .lang-switch summary { padding:7px 13px; border:1px solid #e2e2e2; border-radius:7px; font-size:13px; color:#555; background:#fff; font-weight:500; } .lang-switch summary:hover { background:#fafafa; border-color:#d0d0d0; } .btn-quote { background:var(--c-primary,#111); color:#fff; padding:11px 24px; border-radius:8px; font-size:14px; font-weight:600; letter-spacing:.2px; border:none; box-shadow:none; transition:all .2s ease; } .btn-quote:hover { background:var(--c-primary-dark,#000); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.2); } .nav-center .brand .logo-icon { background:#111; } .nav-dark.site-header { background:#0f1115; border-bottom:1px solid rgba(255,255,255,.07); } .nav-dark .brand { color:#fff; } .nav-dark .brand:hover { color:#fff; } .nav-dark .brand .logo-icon { background:#fff; color:#0f1115; } .nav-dark .main-nav a { color:rgba(255,255,255,.72); } .nav-dark .main-nav a:hover, .nav-dark .main-nav a.active { color:#fff; background:transparent; } .nav-dark .main-nav a::after { background:#fff; } .nav-dark .lang-switch summary { background:transparent; border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.85); } .nav-dark .lang-switch summary:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); } .nav-dark .lang-dropdown { background:#1a1d23; border-color:rgba(255,255,255,.1); } .nav-dark .lang-dropdown a { color:rgba(255,255,255,.8); } .nav-dark .lang-dropdown a:hover { background:rgba(255,255,255,.08); } .nav-dark .btn-quote { background:#fff; color:#0f1115; } .nav-dark .btn-quote:hover { background:#f0f0f0; box-shadow:0 6px 18px rgba(0,0,0,.3); } .nav-transparent.site-header { background:transparent; border-bottom:1px solid rgba(255,255,255,.18); backdrop-filter:none; transition:all .35s ease; } .nav-transparent .brand { color:#fff; } .nav-transparent .brand:hover { color:#fff; } .nav-transparent .brand .logo-icon { background:rgba(255,255,255,.15); color:#fff; backdrop-filter:blur(4px); } .nav-transparent .main-nav a { color:rgba(255,255,255,.85); } .nav-transparent .main-nav a:hover, .nav-transparent .main-nav a.active { color:#fff; background:transparent; } .nav-transparent .main-nav a::after { background:#fff; } .nav-transparent .lang-switch summary { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; backdrop-filter:blur(4px); } .nav-transparent .lang-switch summary:hover { background:rgba(255,255,255,.18); } .nav-transparent .btn-quote { background:#fff; color:#111; } .nav-transparent .btn-quote:hover { background:#f0f0f0; } .nav-transparent.nav-scrolled { background:rgba(255,255,255,.98); backdrop-filter:blur(10px); border-bottom:1px solid #ececec; } .nav-transparent.nav-scrolled .brand { color:#111; } .nav-transparent.nav-scrolled .brand .logo-icon { background:#111; color:#fff; } .nav-transparent.nav-scrolled .main-nav a { color:#444; } .nav-transparent.nav-scrolled .main-nav a:hover, .nav-transparent.nav-scrolled .main-nav a.active { color:#111; } .nav-transparent.nav-scrolled .main-nav a::after { background:#111; } .nav-transparent.nav-scrolled .lang-switch summary { background:#fff; border-color:#e2e2e2; color:#555; } .nav-transparent.nav-scrolled .btn-quote { background:#111; color:#fff; } .nav-minimal.site-header { background:#fff; border-bottom:1px solid #f2f2f2; backdrop-filter:none; } .nav-minimal .header-bar { height:88px; gap:56px; } .nav-minimal .brand { font-weight:600; letter-spacing:1px; text-transform:uppercase; font-size:18px; } .nav-minimal .brand .logo-icon { background:#111; box-shadow:none; } .nav-minimal .main-nav { gap:0; justify-content:center; } .nav-minimal .main-nav a { color:#222; font-size:13px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; padding:8px 18px; border-radius:0; } .nav-minimal .main-nav a::after { left:18px; right:18px; background:#111; } .nav-minimal .lang-switch summary { border:none; background:transparent; letter-spacing:1px; } .nav-minimal .btn-quote { background:transparent; color:#111; border:1.5px solid #111; border-radius:0; text-transform:uppercase; letter-spacing:1px; font-size:12.5px; font-weight:600; padding:11px 24px; } .nav-minimal .btn-quote:hover { background:#111; color:#fff; transform:none; box-shadow:none; } .pd-content img, .article-content img, .rich-content img { max-width: 100%; height: auto; display: block; margin: 22px auto; border-radius: 12px; } .rc-video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin: 24px 0; background: #000; } .rc-video-wrap iframe, .rc-video-wrap video, .rc-video-wrap embed, .rc-video-wrap object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .pd-content video, .article-content video, .rich-content video { max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: 12px; } .rc-table-wrap { margin: 26px 0; } .pd-content table, .article-content table, .rich-content table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.6; background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.04); } .pd-content table th, .article-content table th, .rich-content table th { background: #1e293b; color: #fff; font-weight: 600; text-align: left; padding: 14px 18px; font-size: 14px; letter-spacing: .2px; border: none; border-right: 1px solid rgba(255,255,255,.08); white-space: nowrap; } .pd-content table td, .article-content table td, .rich-content table td { padding: 13px 18px; border-top: 1px solid #eef1f6; color: #334155; vertical-align: top; } .pd-content table tbody tr:nth-child(even), .article-content table tbody tr:nth-child(even), .rich-content table tbody tr:nth-child(even) { background: #f8fafc; } .pd-content table tbody tr:hover, .article-content table tbody tr:hover, .rich-content table tbody tr:hover { background: #f1f5f9; } @media (max-width: 768px) { .pd-content table, .article-content table, .rich-content table, .pd-content table thead, .article-content table thead, .rich-content table thead, .pd-content table tbody, .article-content table tbody, .rich-content table tbody, .pd-content table tr, .article-content table tr, .rich-content table tr, .pd-content table td, .article-content table td, .rich-content table td { display: block; width: 100%; box-sizing: border-box; } .pd-content table thead, .article-content table thead, .rich-content table thead { position: absolute; left: -9999px; top: -9999px; } .pd-content table, .article-content table, .rich-content table { border: none; box-shadow: none; background: transparent; } .pd-content table tr, .article-content table tr, .rich-content table tr { margin-bottom: 16px; border: 1px solid #e6e9f0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.05); } .pd-content table tbody tr:nth-child(even), .article-content table tbody tr:nth-child(even), .rich-content table tbody tr:nth-child(even) { background: #fff; } .pd-content table td, .article-content table td, .rich-content table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 16px; border-top: 1px solid #f1f5f9; text-align: right; } .pd-content table tr td:first-child, .article-content table tr td:first-child, .rich-content table tr td:first-child { border-top: none; } .pd-content table td::before, .article-content table td::before, .rich-content table td::before { content: attr(data-label); font-weight: 600; color: #0f1f3d; text-align: left; flex-shrink: 0; max-width: 45%; } .pd-content table td:empty::before, .article-content table td:empty::before, .rich-content table td:empty::before { content: attr(data-label); } } .rc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0; border-radius: 12px; } .rc-table-scroll table { margin: 0 !important; min-width: 100%; } @media (max-width: 768px) { .pd-content table.rc-no-head, .article-content table.rc-no-head, .rich-content table.rc-no-head, .two-col-text-content table.rc-no-head, .block-text-content table.rc-no-head, .block-render-wrap table.rc-no-head { display: table !important; width: auto !important; min-width: 100%; border: 1px solid var(--c-border, #e6e9f0) !important; box-shadow: none !important; background: #fff !important; } .pd-content table.rc-no-head tr, .article-content table.rc-no-head tr, .rich-content table.rc-no-head tr, .two-col-text-content table.rc-no-head tr, .block-text-content table.rc-no-head tr, .block-render-wrap table.rc-no-head tr { display: table-row !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .pd-content table.rc-no-head td, .article-content table.rc-no-head td, .rich-content table.rc-no-head td, .two-col-text-content table.rc-no-head td, .block-text-content table.rc-no-head td, .block-render-wrap table.rc-no-head td { display: table-cell !important; width: auto !important; text-align: left !important; white-space: nowrap; padding: 12px 16px !important; border-top: 1px solid var(--c-border, #eef1f6) !important; } .pd-content table.rc-no-head td::before, .article-content table.rc-no-head td::before, .rich-content table.rc-no-head td::before, .two-col-text-content table.rc-no-head td::before, .block-text-content table.rc-no-head td::before, .block-render-wrap table.rc-no-head td::before { content: none !important; } } .rc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0; border-radius: 12px; } .rc-table-scroll table { margin: 0 !important; min-width: 100%; } @media (max-width: 768px) { .pd-content table.rc-no-head, .article-content table.rc-no-head, .rich-content table.rc-no-head, .two-col-text-content table.rc-no-head, .block-text-content table.rc-no-head, .block-render-wrap table.rc-no-head { display: table !important; width: auto !important; min-width: 100%; border: 1px solid var(--c-border, #e6e9f0) !important; box-shadow: none !important; background: #fff !important; } .pd-content table.rc-no-head tr, .article-content table.rc-no-head tr, .rich-content table.rc-no-head tr, .two-col-text-content table.rc-no-head tr, .block-text-content table.rc-no-head tr, .block-render-wrap table.rc-no-head tr { display: table-row !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .pd-content table.rc-no-head td, .article-content table.rc-no-head td, .rich-content table.rc-no-head td, .two-col-text-content table.rc-no-head td, .block-text-content table.rc-no-head td, .block-render-wrap table.rc-no-head td { display: table-cell !important; width: auto !important; text-align: left !important; white-space: nowrap; padding: 12px 16px !important; border-top: 1px solid var(--c-border, #eef1f6) !important; } .pd-content table.rc-no-head td::before, .article-content table.rc-no-head td::before, .rich-content table.rc-no-head td::before, .two-col-text-content table.rc-no-head td::before, .block-text-content table.rc-no-head td::before, .block-render-wrap table.rc-no-head td::before { content: none !important; } } .brand { display: flex; align-items: center; } .brand .brand-logo { height: 44px; width: auto; max-width: 200px; object-fit: contain; display: block; } .nav-dark .brand .brand-logo, .nav-transparent .brand .brand-logo { filter: brightness(1.05); } .brand .brand-logo-mobile { display: none; } @media (max-width: 768px) { .brand .brand-logo { height: 34px; max-width: 150px; } .brand .brand-logo-pc { display: none; } .brand .brand-logo-mobile { display: block; } } .page-banner{position:relative;width:100%;aspect-ratio:1920/480;display:flex;align-items:center;justify-content:center;background:center/100% 100% no-repeat;overflow:hidden} .page-banner-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.55) 100%);z-index:1} .page-banner-grad{background:var(--c-section-dark,linear-gradient(135deg,#0f172a 0%,#1e293b 100%))} .page-banner-grad::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%);pointer-events:none} .page-banner-grad::after{content:"";position:absolute;bottom:-80px;left:8%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.04),transparent 70%);pointer-events:none} .page-banner-body{position:relative;z-index:2;text-align:center;max-width:900px;padding:0 24px} .page-banner-body h1{font-size:clamp(28px,5vw,48px);font-weight:800;color:#fff;margin:0;line-height:1.25;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.15)} .page-banner-body h1::after{content:"";display:block;width:56px;height:4px;background:linear-gradient(90deg,var(--c-primary,#3b82f6),rgba(255,255,255,.45));margin:18px auto 0;border-radius:2px} .page-banner-sub{font-size:clamp(15px,1.8vw,19px);color:rgba(255,255,255,.82);margin:14px auto 0;line-height:1.65;max-width:680px} @media(max-width:768px){.page-banner-body h1::after{margin-top:14px}} @media(max-width:480px){.page-banner-body h1::after{width:40px;height:3px}} html[dir="rtl"] { direction: rtl; } html[dir="rtl"] body { text-align: right; } html[dir="rtl"] .block-text-content, html[dir="rtl"] .pd-content, html[dir="rtl"] .article-content, html[dir="rtl"] .rich-content, html[dir="rtl"] .pd-content p, html[dir="rtl"] .article-content p, html[dir="rtl"] .rich-content p { text-align: right; } html[dir="rtl"] .pd-content ul, html[dir="rtl"] .pd-content ol, html[dir="rtl"] .article-content ul, html[dir="rtl"] .article-content ol, html[dir="rtl"] .rich-content ul, html[dir="rtl"] .rich-content ol { padding-right: 1.6em; padding-left: 0; } html[dir="rtl"] [style*="text-align:left"], html[dir="rtl"] [style*="text-align: left"] { text-align: right !important; } html[dir="rtl"] .pd-content table th, html[dir="rtl"] .article-content table th, html[dir="rtl"] .rich-content table th { text-align: right; border-right: none; border-left: 1px solid rgba(255,255,255,.08); } html[dir="rtl"] .pd-content table td, html[dir="rtl"] .article-content table td, html[dir="rtl"] .rich-content table td { text-align: right; } html[dir="rtl"] .pd-content table td::before, html[dir="rtl"] .article-content table td::before, html[dir="rtl"] .rich-content table td::before { text-align: right; } html[dir="rtl"] .nav-submenu { left: auto; right: 0; } html[dir="rtl"] .nav-submenu::before { left: auto; right: 0; } html[dir="rtl"] .nav-center .main-nav { left: auto; right: 0; } html[dir="rtl"] .nav-center .header-right { right: auto; left: 0; } html[dir="rtl"] #ai-chat-launcher { right: auto; left: 24px; }
html { scroll-padding-top: 92px; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--c-primary, #2563eb); outline-offset: 2px; border-radius: 6px; } img { image-rendering: auto; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .products-grid { gap: 22px; } @media (max-width: 1200px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 560px) { .products-grid { gap: 12px; } } .product-card { position: relative; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .product-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15,23,42,.10); border-color: color-mix(in srgb, var(--c-primary, #2563eb) 35%, #e5e7eb); } .product-cover { background: #fff; border-bottom: 1px solid #f1f5f9; } .product-card-body { padding: 16px 16px 14px; } .product-card h3 { font-size: 15px; font-weight: 650; min-height: 2.8em; } .product-card .summary { font-size: 12.5px; } .product-card .more { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; } @media (max-width: 560px) { .product-card-body { padding: 12px 12px 12px; } .product-card h3 { font-size: 13.5px; } .product-card .summary { display: none; } } .ps-card { position: relative; } .b2b-ca { position: absolute; top: 10px; inset-inline-end: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 3; opacity: 0; transform: translateY(-4px); transition: .18s; } .product-card:hover .b2b-ca, .ps-card:hover .b2b-ca, .b2b-ca:focus-within, .b2b-ca.has-on { opacity: 1; transform: none; } @media (hover: none) { .b2b-ca { opacity: 1; transform: none; } } .b2b-cb { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.96); border: 1px solid var(--c-border, #e5e7eb); box-shadow: 0 2px 10px rgba(15,23,42,.14); color: #475569; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; user-select: none; } .b2b-cb svg { width: 17px; height: 17px; pointer-events: none; } .b2b-cb:hover { color: var(--c-primary, #2563eb); border-color: var(--c-primary, #2563eb); transform: scale(1.08); } .b2b-cb.on { background: var(--c-primary, #2563eb); border-color: var(--c-primary, #2563eb); color: #fff; } .b2b-cb[data-tip]:hover::after { content: attr(data-tip); position: absolute; inset-inline-end: 42px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: rgba(15,23,42,.92); color: #fff; font-size: 11.5px; padding: 4px 9px; border-radius: 6px; pointer-events: none; } @media (max-width: 560px) { .b2b-cb { width: 30px; height: 30px; } .b2b-cb svg { width: 15px; height: 15px; } .b2b-cb[data-tip]:hover::after { display: none; } } .pl-toolbar { position: sticky; top: 72px; z-index: 30; } @media (max-width: 900px) { .pl-toolbar { position: static; } .pl-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .pl-cats::-webkit-scrollbar { display: none; } } .pl-hero { padding: 54px 0 46px; } .pl-hero h1 { letter-spacing: -.6px; } .pl-chip { border: 1px solid transparent; } .pl-chip:hover { border-color: color-mix(in srgb, var(--c-primary, #2563eb) 30%, transparent); } .pl-pager a, .pl-pager span, .cat-pager a, .cat-pager span { border-radius: 10px; } .product-detail { gap: 48px; align-items: start; } @media (min-width: 901px) { .pd-gallery { position: sticky; top: 96px; } } .pd-main-img { border-radius: 16px; box-shadow: 0 8px 28px rgba(15,23,42,.06); } .pd-thumbs { margin-top: 2px; } .pd-thumbs img { border-radius: 10px; width: 72px; height: 72px; } .pd-info { background: #fff; border: 1px solid var(--c-border, #e5e7eb); border-radius: 16px; padding: 26px 28px 28px; box-shadow: 0 10px 34px rgba(15,23,42,.05); min-width: 0; } .pd-info h1 { font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.4px; line-height: 1.28; } .pd-meta { gap: 8px 10px; border-bottom: 0; padding-bottom: 6px; margin-bottom: 14px; } .pd-meta .item { background: var(--c-bg-alt, #f8fafc); border: 1px solid var(--c-border, #e5e7eb); padding: 5px 12px; border-radius: 999px; font-size: 12.5px; } .pd-cta { flex-wrap: wrap; gap: 10px; } .pd-cta .btn-quote { flex: 1 1 200px; padding: 14px 24px !important; border-radius: 12px !important; font-size: 15.5px !important; font-weight: 700 !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--c-primary, #2563eb) 30%, transparent); } .pd-cta a[href*="wa.me"] { flex: 1 1 160px; text-align: center; border-radius: 12px !important; padding: 14px 20px !important; font-size: 15px !important; } .pd-content { margin-top: 52px; padding-top: 6px; } .pd-content h2 { font-size: 24px; position: relative; padding-bottom: 12px; } .pd-content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--c-primary, #2563eb); } [dir="rtl"] .pd-content h2::after { left: auto; right: 0; } .pd-content img { max-width: 100%; height: auto; } .pd-content table, .article-content table { max-width: 100%; } .pd-content thead th, .article-content thead th { white-space: nowrap; } .pd-inquiry .pdi-card { border-radius: 18px; } @media (max-width: 900px) { .pd-info { padding: 20px 18px 22px; } .product-detail { gap: 22px; } } @media (max-width: 560px) { .pd-info { border: 0; box-shadow: none; padding: 4px 0 6px; background: transparent; } } .b2b-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .b2b-tb { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--c-border, #e5e7eb); background: #fff; color: var(--c-text, #0f172a); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .15s; text-decoration: none; } .b2b-tb svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--c-primary, #2563eb); } .b2b-tb:hover { border-color: var(--c-primary, #2563eb); color: var(--c-primary, #2563eb); background: var(--c-primary-light, #eff6ff); } .b2b-tb.on { background: var(--c-primary-light, #eff6ff); border-color: var(--c-primary, #2563eb); color: var(--c-primary, #2563eb); } @media (max-width: 560px) { .b2b-tb { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 0 8px; font-size: 13px; } } .b2b-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 18px; padding: 16px 18px; background: linear-gradient(135deg, var(--c-bg-alt, #f8fafc), #fff); border: 1px solid var(--c-border, #e5e7eb); border-radius: 14px; } .b2b-trust div { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-text, #334155); font-weight: 600; line-height: 1.35; } .b2b-trust svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--c-primary, #2563eb); } .b2b-note { margin-top: 12px; font-size: 12.5px; color: var(--c-text-muted, #64748b); display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; } .b2b-note::before { content: "ⓘ"; color: var(--c-primary, #2563eb); font-weight: 700; } .b2b-bar { display: none; } @media (max-width: 760px) { .b2b-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--c-border, #e5e7eb); box-shadow: 0 -8px 24px rgba(15,23,42,.10); transform: translateY(0); transition: transform .25s; } .b2b-bar.hide { transform: translateY(110%); } .b2b-bar a, .b2b-bar button { flex: 1 1 0; height: 46px; border-radius: 12px; border: 1px solid var(--c-border, #e5e7eb); background: #fff; color: var(--c-text, #0f172a); font: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; cursor: pointer; } .b2b-bar .pri { flex: 2 1 0; background: var(--c-primary, #2563eb); border-color: var(--c-primary, #2563eb); color: #fff; } .b2b-bar .wa { flex: 0 0 52px; background: #25d366; border-color: #25d366; color: #fff; } .b2b-bar svg { width: 18px; height: 18px; } body.b2b-has-bar { padding-bottom: 72px; } body.b2b-has-bar .fsh-btn { bottom: 84px !important; } body.b2b-has-bar #aiChatBtn { bottom: 84px !important; } body.b2b-has-bar .b2b-tray { bottom: 82px; } } .b2b-tray { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9500; display: flex; gap: 8px; align-items: center; max-width: calc(100vw - 24px); } .b2b-tray:empty { display: none; } .b2b-tp { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 23px; background: var(--c-primary, #2563eb); color: #fff; border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px rgba(15,23,42,.28); animation: b2bpop .25s ease; white-space: nowrap; } .b2b-tp.alt { background: #0f172a; } .b2b-tp b { min-width: 22px; height: 22px; border-radius: 11px; background: #fff; color: var(--c-primary, #2563eb); font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .b2b-tp.alt b { color: #0f172a; } .b2b-tp svg { width: 18px; height: 18px; } @keyframes b2bpop { from { transform: translateY(14px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } .b2b-mask { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); z-index: 99000; display: none; } .b2b-mask.show { display: block; } .b2b-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(440px, 100vw); background: #fff; z-index: 99001; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .25s; box-shadow: -18px 0 50px rgba(15,23,42,.22); } [dir="rtl"] .b2b-drawer { transform: translateX(-105%); } .b2b-drawer.show { transform: none; } .b2b-dh { padding: 18px 22px; border-bottom: 1px solid var(--c-border, #e5e7eb); display: flex; align-items: center; justify-content: space-between; } .b2b-dh b { font-size: 18px; color: var(--c-text, #0f172a); } .b2b-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--c-bg-alt, #f1f5f9); color: #64748b; font-size: 20px; line-height: 1; cursor: pointer; } .b2b-x:hover { background: #e2e8f0; color: #0f172a; } .b2b-db { flex: 1; overflow: auto; padding: 8px 22px; } .b2b-it { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f1f5f9; } .b2b-it img { width: 62px; height: 62px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--c-border, #e5e7eb); flex: 0 0 auto; } .b2b-it .ph { width: 62px; height: 62px; border-radius: 10px; background: var(--c-bg-alt, #f1f5f9); flex: 0 0 auto; } .b2b-it .tx { flex: 1; min-width: 0; } .b2b-it .tx a { color: var(--c-text, #0f172a); font-weight: 600; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .b2b-q { display: inline-flex; align-items: center; margin-top: 6px; border: 1px solid var(--c-border, #e5e7eb); border-radius: 8px; overflow: hidden; } .b2b-q button { width: 28px; height: 28px; border: 0; background: var(--c-bg-alt, #f8fafc); cursor: pointer; font-size: 16px; color: #475569; } .b2b-q input { width: 54px; height: 28px; border: 0; text-align: center; font: inherit; font-size: 13px; -moz-appearance: textfield; } .b2b-q input::-webkit-outer-spin-button, .b2b-q input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .b2b-rm { border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: 18px; padding: 6px; } .b2b-rm:hover { color: #dc2626; } .b2b-df { padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-border, #e5e7eb); display: flex; gap: 10px; } .b2b-btn { flex: 1; height: 46px; border-radius: 12px; border: 1px solid var(--c-border, #e5e7eb); background: #fff; color: var(--c-text, #0f172a); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; } .b2b-btn.pri { background: var(--c-primary, #2563eb); border-color: var(--c-primary, #2563eb); color: #fff; flex: 2; } .b2b-btn:hover { filter: brightness(.97); } .b2b-empty { text-align: center; color: var(--c-text-muted, #94a3b8); padding: 50px 10px; line-height: 1.8; } .b2b-modal { position: fixed; inset: 0; z-index: 99001; display: none; align-items: center; justify-content: center; padding: 18px; } .b2b-modal.show { display: flex; } .b2b-mc { position: relative; background: #fff; border-radius: 18px; width: min(1100px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; } .b2b-mb { overflow: auto; padding: 0 22px 18px; -webkit-overflow-scrolling: touch; } .b2b-ct { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; font-size: 13.5px; } .b2b-ct th, .b2b-ct td { padding: 11px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top; text-align: start; line-height: 1.55; } .b2b-ct th.k, .b2b-ct td.k { position: sticky; inset-inline-start: 0; background: #f8fafc; font-weight: 700; color: #475569; min-width: 130px; width: 150px; z-index: 1; } .b2b-ct thead th { position: sticky; top: 0; background: #fff; z-index: 2; vertical-align: bottom; border-bottom: 2px solid var(--c-border, #e5e7eb); } .b2b-ct thead th.k { z-index: 3; } .b2b-ct .pc img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--c-border, #e5e7eb); border-radius: 10px; margin-bottom: 8px; background: #fff; } .b2b-ct .pc a { color: var(--c-text, #0f172a); font-weight: 700; font-size: 14px; line-height: 1.4; display: block; } .b2b-ct .pc .rm { display: inline-block; margin-top: 6px; color: #94a3b8; font-size: 12px; cursor: pointer; } .b2b-ct tr.diff td:not(.k) { background: color-mix(in srgb, var(--c-primary, #2563eb) 6%, #fff); } .b2b-ct .none { color: #cbd5e1; } .b2b-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; cursor: pointer; } .b2b-top { position: fixed; inset-inline-end: 20px; bottom: 90px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-border, #e5e7eb); background: rgba(255,255,255,.96); color: #475569; box-shadow: 0 6px 20px rgba(15,23,42,.14); display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 8000; } .b2b-top.show { display: flex; } .b2b-top svg { width: 18px; height: 18px; } @media (max-width: 760px) { .b2b-top { bottom: 86px; inset-inline-end: 14px; width: 38px; height: 38px; } } .b2b-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99999; background: rgba(15,23,42,.92); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13.5px; max-width: 86vw; text-align: center; animation: b2bpop .2s ease; } .news-hero, .pl-hero { background-image: linear-gradient(135deg, var(--c-bg-dark, #0f172a), var(--c-primary-dark, #1d4ed8)); } .blog-hero, .blog-row, .side-card { border-radius: 16px; } .blog-row:hover, .blog-hero:hover { transform: translateY(-2px); } .blog-row-img img, .blog-hero-img img { object-fit: cover; } .blog-row-img, .blog-hero-img { background: var(--c-bg-alt, #f1f5f9); } .blog-pager { flex-wrap: wrap; } .blog-pager .gap { padding: 9px 4px; color: #94a3b8; } @media (max-width: 640px) { .news-hero { padding: 38px 0 !important; } .news-hero h1 { font-size: 28px !important; } } .article-content { font-size: 16.5px; max-width: 100%; } .article-content img { box-shadow: 0 6px 22px rgba(15,23,42,.08); } .article-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .article-header h1 { font-size: clamp(26px, 3vw, 38px); } .nd-toc { border-radius: 16px; } .nd-wrap { max-width: var(--container-w, 1480px); padding-left: 20px; padding-right: 20px; } @media (min-width: 961px) { .nd-main { max-width: none; } } .b2b-ncta { margin: 40px 0 10px; padding: 26px 28px; border-radius: 18px; background: linear-gradient(135deg, var(--c-primary, #2563eb), var(--c-primary-dark, #1d4ed8)); color: #fff; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; box-shadow: 0 16px 40px color-mix(in srgb, var(--c-primary, #2563eb) 28%, transparent); } .b2b-ncta .tx { flex: 1 1 280px; min-width: 0; } .b2b-ncta h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.2px; } .b2b-ncta p { margin: 0; opacity: .92; font-size: 14.5px; line-height: 1.6; color: #fff; } .b2b-ncta .bt { display: flex; gap: 10px; flex-wrap: wrap; } .b2b-ncta a { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 11px; font-weight: 700; font-size: 14.5px; text-decoration: none !important; white-space: nowrap; } .b2b-ncta a.w { background: #fff; color: var(--c-primary, #2563eb); } .b2b-ncta a.g { border: 1px solid rgba(255,255,255,.55); color: #fff; } .b2b-ncta a:hover { transform: translateY(-1px); } .site-footer .footer-contact-row { display: flex; gap: 8px; align-items: flex-start; line-height: 1.6; } .site-footer a { transition: opacity .15s; } .site-footer .footer-privacy a:hover { opacity: 1 !important; } .site-footer .footer-social a { transition: transform .15s, background .15s; } .site-footer .footer-social a:hover { transform: translateY(-2px); } #quote-modal .qm-row input, #quote-modal .qm-row textarea, .pd-inquiry .pdi-row input, .pd-inquiry .pdi-row textarea { font-size: 16px; } @media (min-width: 761px) { #quote-modal .qm-row input, #quote-modal .qm-row textarea, .pd-inquiry .pdi-row input, .pd-inquiry .pdi-row textarea { font-size: 14px; } } #quote-modal > div:nth-child(2) { border-radius: 18px !important; } .b2b-ctx { margin: 12px 26px 0; padding: 9px 12px; border-radius: 10px; background: var(--c-primary-light, #eff6ff); border: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 25%, #fff); color: var(--c-text, #0f172a); font-size: 13px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; } .b2b-ctx b { color: var(--c-primary, #2563eb); white-space: nowrap; } @media print { .site-header, .site-footer, .pd-gallery .pd-thumbs, .pd-cta, .b2b-tools, .b2b-bar, .b2b-tray, .b2b-top, .pd-inquiry, .share-bar, .pd-lightbox, #floatCs, .fsh-btn, .fsh-p, #aiChat, #quote-modal, .section-title + .products-grid, .block-section { display: none !important; } body { background: #fff !important; padding: 0 !important; } .product-detail { grid-template-columns: 180px 1fr !important; gap: 20px !important; } .pd-gallery { position: static !important; } .pd-info { border: 0 !important; box-shadow: none !important; padding: 0 !important; } .pd-main-img { box-shadow: none !important; border: 1px solid #ddd !important; } .pd-content { margin-top: 18px !important; } a { color: #000 !important; text-decoration: none !important; } .container::before { content: attr(data-print-title); display: block; font-weight: 700; font-size: 11px; color: #666; margin-bottom: 10px; } } .b2b-modal > .b2b-mask { z-index: 0; } .b2b-modal > .b2b-mc { z-index: 1; } @media (min-width: 769px) { .pd-content table, .article-content table, .rich-content table { width: 100% !important; max-width: 100% !important; height: auto !important; table-layout: auto !important; margin: 28px 0 !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid #e3e8f1 !important; border-radius: 14px !important; overflow: hidden; background: #fff; box-shadow: 0 4px 18px rgba(15,23,42,.06); } .pd-content table col, .article-content table col, .rich-content table col { width: auto !important; } .pd-content table th, .article-content table th, .rich-content table th { width: auto !important; height: auto !important; padding: 15px 20px !important; font-size: 14px; font-weight: 700; letter-spacing: .2px; text-align: start; vertical-align: middle !important; white-space: normal !important; border: 0 !important; border-inline-end: 1px solid rgba(255,255,255,.14) !important; } .pd-content table th:last-child, .article-content table th:last-child, .rich-content table th:last-child { border-inline-end: 0 !important; } .pd-content table td, .article-content table td, .rich-content table td { width: auto !important; height: auto !important; padding: 14px 20px !important; font-size: 15px; line-height: 1.65; color: #334155; vertical-align: middle !important; border: 0 !important; border-top: 1px solid #eef1f6 !important; border-inline-end: 1px solid #f1f4f9 !important; } .pd-content table td:last-child, .article-content table td:last-child, .rich-content table td:last-child { border-inline-end: 0 !important; } .pd-content table td:first-child, .article-content table td:first-child, .rich-content table td:first-child { font-weight: 600; color: #0f172a; } .pd-content table td p, .article-content table td p, .rich-content table td p, .pd-content table th p, .article-content table th p, .rich-content table th p { margin: 0 !important; } .pd-content table caption, .article-content table caption, .rich-content table caption { caption-side: top; text-align: start; padding: 0 2px 10px; font-weight: 600; color: #475569; } .rc-table-scroll { width: 100%; border-radius: 14px; } } @media (min-width: 769px) { .pd-content table, .article-content table, .rich-content table { display: table !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; table-layout: auto !important; } .pd-content table thead th, .article-content table thead th, .rich-content table thead th { white-space: normal !important; } } .pd-rel-title, .block-section > h2.section-title[style*="font-size:24px"] { display: flex !important; align-items: center; gap: 16px; text-align: start !important; font-size: 26px !important; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 26px !important; color: var(--c-text, #0f172a); } .pd-rel-title::before, .block-section > h2.section-title[style*="font-size:24px"]::before { content: ""; flex: 0 0 auto; width: 6px; height: 28px; border-radius: 3px; background: linear-gradient(180deg, var(--c-primary, #2563eb), var(--c-primary-dark, var(--c-primary, #1d4ed8))); } .pd-rel-title::after, .block-section > h2.section-title[style*="font-size:24px"]::after { content: ""; flex: 1 1 auto; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--c-border, #e5e7eb), transparent); } @media (max-width: 768px) { .pd-rel-title, .block-section > h2.section-title[style*="font-size:24px"] { font-size: 21px !important; gap: 12px; margin-bottom: 18px !important; } .pd-rel-title::before, .block-section > h2.section-title[style*="font-size:24px"]::before { height: 22px; } } .product-card .more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 26px; border: 1.5px solid var(--c-primary, #2563eb); border-radius: 999px; color: var(--c-primary, #2563eb); font-size: 13.5px; font-weight: 700; line-height: 1; background: transparent; transition: background .2s, color .2s, box-shadow .2s, gap .2s; } .product-card:hover .more { background: var(--c-primary, #2563eb); color: #fff; gap: 10px; box-shadow: 0 8px 18px color-mix(in srgb, var(--c-primary, #2563eb) 30%, transparent); } .product-card-body > h3 { margin-bottom: 14px; } .ps-p .ps-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border: 1.5px solid var(--c-primary, #2563eb); border-radius: 10px; font-weight: 700; line-height: 1; transition: background .2s, color .2s, box-shadow .2s; } .ps-p .ps-card:hover .ps-more { background: var(--c-primary, #2563eb); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--c-primary, #2563eb) 28%, transparent); } .ps-p-minimal .ps-more { display: none; } .ps-p-overlay .ps-more { border-color: rgba(255,255,255,.75); color: #fff; } .ps-p-overlay .ps-card:hover .ps-more { background: #fff; color: var(--c-primary, #2563eb); box-shadow: none; } .ps-p .ps-q { border-radius: 10px; font-weight: 700; padding: 11px 14px; } .ps-p .ps-acts:has(.ps-q) { flex-direction: column; align-items: stretch; gap: 10px; } .ps-p .ps-acts:has(.ps-q) .ps-more, .ps-p .ps-acts:has(.ps-q) .ps-q { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; } @media (max-width: 768px) { .product-card .more { padding: 9px 20px; font-size: 13px; } .ps-p .ps-more { padding: 9px 14px; } } .product-detail.ps-d-gallery .pd-gallery { position: static !important; top: auto !important; }
.nav-center .header-bar { position: relative; justify-content: center; } .nav-center .brand { position: absolute; left: 50%; transform: translateX(-50%); order: 2; } .nav-center .main-nav { flex: none; order: 1; justify-content: flex-start; position: absolute; left: 0; } .nav-center .header-right { order: 3; position: absolute; right: 0; } @media (max-width: 900px){ .nav-center .brand { position: static; transform: none; } .nav-center .main-nav { position: static; } } .nav-dark.site-header { background: #0b1f3a; border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: none; } .nav-dark .brand { color: #fff; } .nav-dark .brand:hover { color: #fff; } .nav-dark .main-nav a { color: rgba(255,255,255,.78); } .nav-dark .main-nav a:hover, .nav-dark .main-nav a.active { background: rgba(255,255,255,.1); color: #fff; } .nav-dark .lang-switch summary { color: rgba(255,255,255,.85); } .nav-dark .btn-quote { background: var(--c-accent, #ff8c42); color: #fff; } .nav-transparent.site-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,.15); backdrop-filter: none; transition: all .3s ease; } .nav-transparent .brand { color: #fff; } .nav-transparent .brand:hover { color: #fff; } .nav-transparent .main-nav a { color: rgba(255,255,255,.85); } .nav-transparent .main-nav a:hover, .nav-transparent .main-nav a.active { background: rgba(255,255,255,.15); color: #fff; } .nav-transparent .lang-switch summary { color: #fff; } .nav-transparent .btn-quote { background: #fff; color: #0b1f3a; } .nav-transparent.nav-scrolled { background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); } .nav-transparent.nav-scrolled .brand { color: var(--c-text); } .nav-transparent.nav-scrolled .main-nav a { color: var(--c-text-muted); } .nav-transparent.nav-scrolled .main-nav a:hover, .nav-transparent.nav-scrolled .main-nav a.active { background: var(--c-primary-light); color: var(--c-primary); } .nav-transparent.nav-scrolled .lang-switch summary { color: var(--c-text); } .nav-transparent.nav-scrolled .btn-quote { background: var(--c-primary); color: #fff; } .nav-minimal.site-header { background: #fff; border-bottom: 1px solid #f0f0f0; backdrop-filter: none; } .nav-minimal .header-bar { height: 84px; gap: 48px; } .nav-minimal .brand { font-weight: 700; letter-spacing: .5px; } .nav-minimal .brand .logo-icon { background: #0b1f3a; box-shadow: none; } .nav-minimal .main-nav { gap: 12px; justify-content: center; } .nav-minimal .main-nav a { color: #1a1a1a; font-size: 14px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; border-radius: 0; padding: 6px 4px; border-bottom: 2px solid transparent; } .nav-minimal .main-nav a:hover, .nav-minimal .main-nav a.active { background: transparent; color: #0b1f3a; border-bottom-color: #0b1f3a; } .nav-minimal .btn-quote { background: transparent; color: #0b1f3a; border: 1px solid #0b1f3a; border-radius: 0; text-transform: uppercase; letter-spacing: .8px; font-size: 13px; } .nav-minimal .btn-quote:hover { background: #0b1f3a; color: #fff; } .site-header[style*="--nav-bg"] { background: var(--nav-bg) !important; } .site-header[style*="--nav-text"] .brand, .site-header[style*="--nav-text"] .main-nav a, .site-header[style*="--nav-text"] .lang-switch summary { color: var(--nav-text) !important; } .site-header[style*="--nav-hover-bg"] .main-nav a:hover, .site-header[style*="--nav-hover-bg"] .main-nav a.active { background: var(--nav-hover-bg) !important; } .site-header[style*="--nav-btn-bg"] .btn-quote { background: var(--nav-btn-bg) !important; border-color: var(--nav-btn-bg) !important; } .nav-transparent.site-header[style*="--nav-bg"] { background: transparent !important; } .nav-transparent.nav-scrolled.site-header[style*="--nav-bg"] { background: var(--nav-bg) !important; } .nav-underline .main-nav a{background:transparent;border-radius:0;position:relative;} .nav-underline .main-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--c-primary,#2a5298);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;} .nav-underline .main-nav a:hover::after,.nav-underline .main-nav a.active::after{transform:scaleX(1);} .nav-underline .main-nav a:hover,.nav-underline .main-nav a.active{background:transparent;color:var(--c-primary,#2a5298);} .nav-pill .main-nav a{border-radius:999px;padding:8px 16px;transition:background .2s ease,color .2s ease;} .nav-pill .main-nav a:hover,.nav-pill .main-nav a.active{background:var(--c-primary,#2a5298);color:#fff;} .nav-highlight .main-nav a{border-radius:8px;padding:8px 14px;transition:background .2s ease,color .2s ease,transform .2s ease;} .nav-highlight .main-nav a:hover,.nav-highlight .main-nav a.active{background:var(--c-primary-light,rgba(42,82,152,.1));color:var(--c-primary,#2a5298);transform:translateY(-1px);} .nav-plain .main-nav a{background:transparent;border-radius:0;padding:6px 4px;letter-spacing:.3px;} .nav-plain .main-nav a:hover,.nav-plain .main-nav a.active{background:transparent;color:var(--c-primary,#2a5298);} .logo-align-center .header-bar{position:relative;justify-content:center;} .logo-align-center .brand{position:absolute;left:50%;transform:translateX(-50%);order:2;} .logo-align-center .main-nav{order:1;position:absolute;left:0;justify-content:flex-start;} .logo-align-center .header-right{order:3;position:absolute;right:0;} @media(max-width:900px){.logo-align-center .brand{position:static;transform:none;}.logo-align-center .main-nav{position:static;}.logo-align-center .header-right{position:static;}} .logo-align-split .header-bar{justify-content:space-between;} .logo-align-split .main-nav{margin-left:auto;margin-right:24px;} .nav-sticky.site-header,.nav-shrinkable.site-header{position:sticky;top:0;z-index:50;} .nav-shrinkable.site-header{transition:box-shadow .3s ease,background-color .3s ease,padding .3s ease;} .nav-shrinkable.nav-scrolled.site-header{box-shadow:0 6px 24px rgba(15,23,42,.10);} .nav-shrinkable.nav-scrolled .header-bar{padding-top:6px;padding-bottom:6px;} .site-header[style*="--nav-font-size"] .main-nav a{font-size:var(--nav-font-size)!important;} .site-header[style*="--nav-item-gap"] .main-nav{gap:var(--nav-item-gap)!important;} .site-header[style*="--nav-radius"] .main-nav a{border-radius:var(--nav-radius)!important;} .site-header[style*="--nav-active-bg"] .main-nav a.active{background:var(--nav-active-bg)!important;} .footer-social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;} .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);transition:background .2s ease,transform .2s ease;} .footer-social a:hover{background:var(--c-primary,#2a5298);transform:translateY(-2px);} .footer-social svg{width:18px;height:18px;fill:currentColor;display:block;} .nav-submenu{width:max-content !important;max-width:340px !important;} .nav-submenu a{white-space:nowrap !important;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/site/fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/site/fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/site/fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/site/fonts/inter-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/static/site/fonts/inter-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/site/fonts/inter-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/site/fonts/inter-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/site/fonts/inter-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/site/fonts/inter-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/static/site/fonts/inter-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} :root{ --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif; } body{ font-family:var(--font); font-size:16px; line-height:1.7; letter-spacing:.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } input,button,textarea,select{ font-family:inherit; } ::selection{ background:color-mix(in srgb, var(--c-primary) 22%, transparent); } a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; border-radius:3px; } .hero-title{ font-size:clamp(2.25rem,1.35rem + 3.6vw,3.75rem); line-height:1.08; letter-spacing:-.022em; font-weight:800; } .hero-subtitle{ font-size:clamp(1.05rem,.95rem + .55vw,1.3rem); line-height:1.6; letter-spacing:0; } .section-title{ font-size:clamp(1.75rem,1.15rem + 2vw,2.5rem); line-height:1.18; letter-spacing:-.018em; font-weight:700; } .block-section{ padding-top:clamp(56px,3.2vw + 34px,104px); padding-bottom:clamp(56px,3.2vw + 34px,104px); } .pd-content,.article-content,.rich-content{ font-size:1.0625rem; line-height:1.8; color:var(--c-text); } .pd-content>:first-child,.article-content>:first-child,.rich-content>:first-child{ margin-top:0; } .pd-content p,.article-content p,.rich-content p{ margin:0 0 1.15em; } .pd-content h1,.article-content h1,.rich-content h1{ font-size:clamp(1.9rem,1.4rem + 1.6vw,2.5rem); line-height:1.2; letter-spacing:-.02em; font-weight:800; margin:1.6em 0 .6em; } .pd-content h2,.article-content h2,.rich-content h2{ font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem); line-height:1.25; letter-spacing:-.015em; font-weight:700; margin:1.5em 0 .55em; } .pd-content h3,.article-content h3,.rich-content h3{ font-size:1.3rem; line-height:1.3; font-weight:700; margin:1.35em 0 .5em; } .pd-content h4,.article-content h4,.rich-content h4{ font-size:1.12rem; line-height:1.35; font-weight:600; margin:1.2em 0 .5em; } .pd-content ul,.pd-content ol,.article-content ul,.article-content ol,.rich-content ul,.rich-content ol{ line-height:1.8; padding-left:1.4em; margin:0 0 1.15em; } .pd-content li,.article-content li,.rich-content li{ margin:.3em 0; } .pd-content blockquote,.article-content blockquote,.rich-content blockquote{ margin:1.4em 0; padding:.4em 0 .4em 1.1em; border-left:3px solid var(--c-primary); color:var(--c-text-muted); font-style:italic; } .site-footer{ position:relative; padding:72px 0 30px; margin-top:96px; background:var(--c-bg-dark); color:rgba(255,255,255,.66); font-size:15px; } .site-footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--c-primary),var(--c-accent)); } .site-footer .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:48px; margin-bottom:48px; } .site-footer .footer-logo{ filter:brightness(1.06); } .site-footer .footer-col h4{ font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#fff; margin:0 0 20px; position:relative; padding-bottom:12px; } .site-footer .footer-col h4::after{ content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; border-radius:2px; background:var(--c-primary); } .site-footer .footer-col p,.site-footer .footer-col li{ font-size:14.5px; line-height:1.8; color:rgba(255,255,255,.6); } .site-footer .footer-about{ max-width:34ch; } .site-footer .footer-col ul{ list-style:none; padding:0; margin:0; } .site-footer .footer-col li{ margin-bottom:11px; } .site-footer .footer-col a{ color:rgba(255,255,255,.68); transition:color .2s,padding-left .2s; } .site-footer .footer-col li a:hover{ color:#fff; padding-left:6px; } .site-footer .footer-contact-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.66); } .site-footer .footer-contact-row a{ color:rgba(255,255,255,.7); } .site-footer .footer-contact-row a:hover{ color:#fff; } .site-footer .footer-contact-row .ic{ width:20px; flex:0 0 20px; text-align:center; opacity:.95; } .site-footer .footer-social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } .site-footer .footer-social a{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.82); transition:all .2s; } .site-footer .footer-social a:hover{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; transform:translateY(-2px); } .site-footer .footer-social a svg{ width:18px; height:18px; fill:currentColor; } .site-footer .footer-social a svg [fill="none"]{ fill:none; } .site-footer .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:24px; margin-top:8px; text-align:center; font-size:13px; letter-spacing:.01em; color:rgba(255,255,255,.5); } @media (max-width:960px){ .site-footer{ padding:52px 0 26px; margin-top:64px; } .site-footer .footer-grid{ grid-template-columns:1fr 1fr; gap:34px 26px; } } @media (max-width:560px){ body{ font-size:15.5px; } .site-footer .footer-grid{ grid-template-columns:1fr; gap:30px; } .site-footer .footer-social{ gap:8px; } } .site-footer{ font-size:16px; padding:84px 0 34px; margin-top:104px; } .site-footer .footer-logo{ max-height:none; max-width:100%; } .site-footer .footer-grid{ gap:56px; margin-bottom:54px; } .site-footer .footer-col h4{ font-size:14px; letter-spacing:.08em; margin:0 0 22px; } .site-footer .footer-col h4::after{ width:32px; height:2px; } .site-footer .footer-col p, .site-footer .footer-col li, .site-footer .footer-col li a, .site-footer .footer-about{ font-size:15.5px; line-height:1.85; color:rgba(255,255,255,.74); } .site-footer .footer-col li{ margin-bottom:11px; } .site-footer .footer-col li a{ color:rgba(255,255,255,.7); transition:color .18s ease,padding-left .18s ease; } .site-footer .footer-col li a:hover{ color:#fff; padding-left:4px; } .site-footer .footer-about{ color:rgba(255,255,255,.68); } .site-footer .footer-contact-row{ font-size:15.5px; line-height:1.7; margin-bottom:15px; color:rgba(255,255,255,.78); } .site-footer .footer-contact-row .ic{ width:22px; flex:0 0 22px; } .site-footer .footer-social{ margin-top:24px; gap:12px; } .site-footer .footer-social a{ width:40px; height:40px; } .site-footer .footer-social a svg{ width:19px; height:19px; } .site-footer .footer-bottom{ font-size:14px; color:rgba(255,255,255,.62); padding-top:28px; } @media (max-width:960px){ .site-footer{ padding:64px 0 30px; } .site-footer .footer-grid{ gap:40px 48px; } } @media (max-width:560px){ .site-footer{ font-size:15.5px; padding:56px 0 26px; margin-top:72px; } .site-footer .footer-col p, .site-footer .footer-col li, .site-footer .footer-col li a, .site-footer .footer-about, .site-footer .footer-contact-row{ font-size:15px; } } .products-grid{ grid-template-columns:repeat(4,1fr); gap:28px; } .product-card{ border-radius:14px; box-shadow:0 1px 3px rgba(15,23,42,.04); } .product-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(15,23,42,.13); border-color:var(--c-border); } .product-card-body{ padding:20px 20px 22px; } .product-card h3{ font-size:16px; font-weight:700; margin:0 0 10px; line-height:1.45; } .product-card .summary{ font-size:14px; line-height:1.6; margin:0 0 14px; } .product-card .more{ font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px; margin-top:auto; } @media(max-width:1180px){ .products-grid{ grid-template-columns:repeat(3,1fr); } } @media(max-width:820px){ .products-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } .product-card-body{ padding:16px 16px 18px; } } .news-grid{ grid-template-columns:repeat(4,1fr); gap:28px; } .news-card{ border-radius:14px; box-shadow:0 1px 3px rgba(15,23,42,.04); } .news-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(15,23,42,.13); } .news-cover img{ transition:transform .45s ease; } .news-card:hover .news-cover img{ transform:scale(1.06); } .news-card-body{ padding:20px 22px 22px; } .news-date{ font-size:12.5px; color:var(--c-text-muted); margin-bottom:9px; } .news-card h3{ font-size:17px; font-weight:700; margin:0 0 10px; line-height:1.45; } .news-card .summary{ font-size:14px; line-height:1.65; } .news-grid--3{ grid-template-columns:repeat(3,1fr); } @media(max-width:1180px){ .news-grid{ grid-template-columns:repeat(3,1fr); } } @media(max-width:900px){ .news-grid--3{ grid-template-columns:repeat(2,1fr); } } @media(max-width:820px){ .news-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } } @media(max-width:560px){ .news-grid{ grid-template-columns:1fr; } .news-grid--3{ grid-template-columns:1fr; } } .blog-layout{ gap:40px; padding-bottom:72px; } .blog-side{ width:340px; } .blog-crumb{ font-size:14px; } .blog-hero{ border-radius:18px; } .blog-hero-body{ padding:28px 32px 30px; } .blog-hero-body h2{ font-size:28px; letter-spacing:-.4px; } .blog-hero-body .summary{ font-size:15.5px; line-height:1.75; } .blog-date{ font-size:13.5px; } .blog-more{ font-size:14.5px; } .blog-row{ border-radius:16px; gap:26px; margin-bottom:22px; } .blog-row-img{ width:300px; } .blog-row-body{ padding:24px 28px 24px 0; } .blog-row-body h3{ font-size:20px; } .blog-row-body .summary{ font-size:14.5px; line-height:1.7; } .side-card{ border-radius:16px; padding:22px 24px; } .side-title{ font-size:16.5px; } .blog-pager a{ padding:10px 16px; font-size:14px; } @media(max-width:640px){ .blog-layout{ gap:28px; padding-bottom:48px; } .blog-hero-body{ padding:22px 20px 24px; } .blog-hero-body h2{ font-size:22px; } .blog-row-body{ padding:18px 20px 20px; } .blog-row-body h3{ font-size:18px; } } .product-detail{ gap:56px; margin-top:28px; } .pd-info h1{ font-size:30px; line-height:1.25; margin:0 0 16px; } .pd-meta{ gap:22px; margin-bottom:22px; padding-bottom:22px; } .pd-meta .item{ font-size:13.5px; } .pd-summary{ font-size:16px; line-height:1.75; margin-bottom:26px; } .pd-cta{ gap:14px; margin-bottom:8px; } .pd-cta .btn-quote{ display:inline-flex; align-items:center; gap:8px; padding:15px 32px; background:var(--c-primary); color:#fff; font-size:15.5px; font-weight:700; border-radius:10px; box-shadow:0 8px 22px rgba(15,23,42,.16); transition:transform .2s ease,box-shadow .2s ease,background .2s ease; text-decoration:none; } .pd-cta .btn-quote:hover{ background:var(--c-primary-dark); transform:translateY(-2px); box-shadow:0 12px 30px rgba(15,23,42,.22); } .pd-content{ font-size:16px; line-height:1.85; margin-top:56px; } .pd-content h2{ font-size:25px; margin:32px 0 16px; } .pd-content h3{ font-size:19px; } @media(max-width:900px){ .product-detail{ gap:30px; margin-top:20px; } .pd-info h1{ font-size:25px; } .pd-content{ margin-top:40px; } } @media(max-width:768px){ .site-footer .footer-grid{ grid-template-columns:1fr 1fr; gap:34px 28px; } .site-footer .footer-col h4{ margin-bottom:16px; } } @media(max-width:460px){ .site-footer .footer-grid{ grid-template-columns:1fr; gap:30px; } } @media(max-width:768px){ .specs-body-naked table{ box-shadow:0 1px 4px rgba(15,23,42,.05); } .specs-body-naked tbody td:first-child{ text-transform:uppercase; letter-spacing:.4px; font-size:12px; color:#64748b; font-weight:700; padding:11px 16px 4px; } .specs-body-naked tbody td:last-child{ font-size:14.5px; line-height:1.6; color:#1e293b; padding:2px 16px 13px; } } .block-section{ padding:88px 0; } .section-title{ font-size:38px; font-weight:800; letter-spacing:-.4px; margin:0 0 14px; } .section-subtitle{ font-size:16.5px; line-height:1.65; margin:0 auto 46px; max-width:680px; } .block-hero{ background:var(--c-bg-dark); padding:0; } .block-hero::before{ background:radial-gradient(circle at 78% 26%, var(--c-primary), transparent 58%); opacity:.20; } .hero-title{ font-size:52px; letter-spacing:-1px; } .hero-subtitle{ font-size:19px; color:rgba(255,255,255,.82); } .hero-cta{ box-shadow:0 10px 30px rgba(0,0,0,.22); } .two-col-grid{ gap:56px; } .two-col-text h2{ font-size:30px; line-height:1.25; letter-spacing:-.3px; margin:0 0 18px; } .two-col-text p{ font-size:16px; line-height:1.75; } .two-col-image img{ border-radius:14px; box-shadow:0 18px 44px rgba(15,23,42,.12); width:100%; } .features-grid{ gap:26px; } .feature-card{ border:1px solid var(--c-border); border-radius:14px; padding:38px 30px; box-shadow:0 1px 3px rgba(15,23,42,.04); } .feature-card:hover{ transform:translateY(-5px); box-shadow:0 18px 42px rgba(15,23,42,.10); border-color:var(--c-border); } .feature-icon{ width:60px; height:60px; margin:0 auto 20px; border-radius:12px; background:var(--c-primary-light); font-size:26px; } .feature-card h3{ font-size:19px; margin:0 0 12px; } .feature-card p{ font-size:15px; line-height:1.7; } .block-text-content{ font-size:16px; line-height:1.8; } .block-render-wrap{ font-size:16px; line-height:1.8; color:var(--c-text); } .block-render-wrap img{ border-radius:12px; } .block-cta{ background:linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); padding:84px 0; } .cta-title{ font-size:34px; letter-spacing:-.3px; } .cta-subtitle{ font-size:17px; color:rgba(255,255,255,.92); } .cta-button{ color:var(--c-primary); box-shadow:0 10px 30px rgba(0,0,0,.18); } .inquiry-form{ border:1px solid var(--c-border); box-shadow:0 4px 24px rgba(15,23,42,.06); } .inquiry-form label{ font-size:13px; letter-spacing:.2px; } .inquiry-submit{ background:var(--c-primary); box-shadow:0 6px 18px rgba(15,23,42,.12); } .inquiry-submit:hover{ background:var(--c-primary-dark); box-shadow:0 10px 24px rgba(15,23,42,.16); } #ai-chat-launcher{ background:var(--c-primary); box-shadow:0 8px 24px rgba(15,23,42,.22); } @media(max-width:960px){ .block-section{ padding:56px 0; } .section-title{ font-size:28px; } .section-subtitle{ font-size:15px; margin-bottom:34px; } .block-hero{ padding:84px 0; } .hero-title{ font-size:38px; } .hero-subtitle{ font-size:16px; } .two-col-grid{ gap:30px; } .two-col-text h2{ font-size:24px; } .features-grid{ grid-template-columns:repeat(3,1fr); gap:20px; } .feature-card{ padding:30px 22px; } .block-cta{ padding:60px 0; } .cta-title{ font-size:26px; } .cta-subtitle{ font-size:15.5px; } .block-render-wrap{ padding:0; } } @media(max-width:640px){ .block-section{ padding:46px 0; } .section-title{ font-size:24px; } .section-subtitle{ font-size:14.5px; margin-bottom:28px; } .block-hero{ padding:66px 0; } .hero-title{ font-size:30px; letter-spacing:-.5px; } .hero-subtitle{ font-size:15.5px; margin-bottom:28px; } .hero-cta{ padding:14px 30px; font-size:15px; } .two-col-text h2{ font-size:22px; } .two-col-text p{ font-size:15px; } .features-grid{ grid-template-columns:1fr; gap:16px; max-width:420px; margin-left:auto; margin-right:auto; } .feature-card{ padding:28px 24px; } .block-cta{ padding:52px 0; } .cta-title{ font-size:23px; } .cta-button{ padding:14px 32px; font-size:15px; } .inquiry-form{ padding:22px 18px; } .block-text-content{ font-size:15px; } .block-render-wrap{ font-size:15px; padding:0; } } :root{ --radius-sm:10px; --radius:14px; --radius-lg:20px; --radius-xl:26px; --shadow-xs:0 1px 2px rgba(15,23,42,.05); --shadow-sm:0 4px 14px rgba(15,23,42,.06); --shadow-md:0 14px 36px rgba(15,23,42,.09); --shadow-lg:0 28px 64px rgba(15,23,42,.13); --ring:0 0 0 3px color-mix(in srgb, var(--c-primary) 15%, transparent); --ease:cubic-bezier(.2,.7,.2,1); } html{ scroll-behavior:smooth; } .section-eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:13px; letter-spacing:3px; font-weight:700; color:var(--c-primary); text-transform:uppercase; margin-bottom:16px; } .section-eyebrow::before{ content:""; width:32px; height:2px; background:var(--c-primary); } .section-eyebrow:empty{ display:none; } .section-head--center{ text-align:center; } .section-head--center .section-eyebrow{ justify-content:center; } .section-head--center .section-eyebrow::after{ content:""; width:32px; height:2px; background:var(--c-primary); opacity:.5; } .section-head--center .section-subtitle{ margin-left:auto; margin-right:auto; } .block-section--alt{ background:var(--c-bg-alt); } .product-card,.news-card{ border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); transition:transform .42s var(--ease), box-shadow .42s var(--ease), border-color .3s ease; } .product-card:hover,.news-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); } .product-cover{ overflow:hidden; } .product-cover img{ transition:transform .55s var(--ease); } .product-card:hover .product-cover img{ transform:scale(1.055); } .blog-hero,.blog-row,.side-card{ border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform .42s var(--ease), box-shadow .42s var(--ease); } .blog-hero{ overflow:hidden; } .blog-hero:hover,.blog-row:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .blog-hero-img img,.blog-row-img img,.side-news-img img,.side-prod-img img{ transition:transform .55s var(--ease); } .blog-hero:hover .blog-hero-img img, .blog-row:hover .blog-row-img img{ transform:scale(1.05); } .more,.blog-more{ transition:gap .25s var(--ease), color .2s ease; } .more:hover,.blog-more:hover{ gap:11px; color:var(--c-primary-dark); } .pd-cta .btn-quote{ border-radius:var(--radius-sm); } a:focus-visible,button:focus-visible,.btn-quote:focus-visible,[tabindex]:focus-visible{ outline:none; box-shadow:var(--ring); } .section-title{ color:var(--c-text); } .section-subtitle{ color:var(--c-text-muted); } .section-head--line .section-title::after{ content:""; display:block; width:52px; height:3px; border-radius:3px; background:var(--c-primary); margin:18px 0 0; } .section-head--line.section-head--center .section-title::after{ margin-left:auto; margin-right:auto; } @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .products-grid > *, .news-grid > *, .blog-row, .side-card{ animation:refv6-rise linear both; animation-timeline:view(); animation-range:entry 2% cover 20%; } @keyframes refv6-rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } } } } .product-cover,.news-cover,.blog-hero-img,.blog-row-img,.side-news-img,.side-prod-img{ overflow:hidden; } @media (hover:none){ .product-card:hover,.news-card:hover,.blog-hero:hover,.blog-row:hover{ transform:none; } } .product-card-body{ text-align:center; align-items:center; } @media (max-width:768px){ [style*="max-width:min(1480px"]{ max-width:100% !important; } section[style*="padding"]{ padding-left:16px !important; padding-right:16px !important; } .pcn-wrap{ padding-left:16px !important; padding-right:16px !important; } .pcn-grid{ grid-template-columns:1fr !important; gap:16px !important; } .pcn-card{ height:auto !important; aspect-ratio:16/10 !important; } .pcn-mask{ padding:20px !important; } .pcn-name{ font-size:20px !important; } } @media (max-width:460px){ section[style*="padding"]{ padding-left:14px !important; padding-right:14px !important; } .pcn-wrap{ padding-left:14px !important; padding-right:14px !important; } .pcn-card{ aspect-ratio:16/11 !important; } .news-grid, .products-grid{ gap:14px !important; } } @media (max-width:768px){ .sld-hf-slide{ aspect-ratio:auto !important; min-height:0 !important; height:auto !important; overflow:hidden !important; } .sld-hf-slide img{ position:static !important; inset:auto !important; width:100% !important; height:auto !important; object-fit:contain !important; display:block !important; background:#0b1f3a !important; } .sld-hf-cap{ display:none !important; } .sld-hf-mask{ display:none !important; } .sld-hf-dots{ bottom:10px !important; } .sld-hf-arrow{ width:36px !important; height:36px !important; font-size:16px !important; } } @media (max-width:460px){ .sld-hf-dots{ bottom:8px !important; } .sld-hf-arrow{ width:32px !important; height:32px !important; font-size:15px !important; } } .b4sc-card{ position:relative !important; overflow:hidden !important; background:#fff !important; border:1px solid rgba(15,23,42,.05) !important; border-radius:18px !important; padding:44px 30px 36px !important; text-align:center !important; box-shadow:0 4px 20px rgba(15,23,42,.06) !important; transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .35s ease !important; } .b4sc-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--c-primary,#2563eb),#8b5cf6,#ff8c42); } .b4sc-card > div:first-child{ width:84px !important; height:84px !important; margin:6px auto 22px !important; border-radius:24px !important; background:linear-gradient(135deg,var(--c-primary-light,#eef4ff),#fff) !important; color:var(--c-primary,#2563eb) !important; font-size:36px !important; line-height:1 !important; box-shadow:0 8px 24px rgba(37,99,235,.18), inset 0 0 0 1px rgba(37,99,235,.08) !important; display:flex !important; align-items:center !important; justify-content:center !important; transition:transform .35s ease,box-shadow .35s ease !important; } .b4sc-card h3{ font-size:21px !important; font-weight:800 !important; color:var(--c-text,#0b1f3a) !important; margin:0 0 12px !important; letter-spacing:-.2px !important; } .b4sc-card p{ font-size:14.5px !important; line-height:1.7 !important; color:var(--c-text-muted,#5a6b7e) !important; margin:0 !important; } .b4sc-card:hover{ transform:translateY(-8px) !important; box-shadow:0 24px 48px rgba(15,23,42,.14) !important; border-color:rgba(37,99,235,.18) !important; } .b4sc-card:hover > div:first-child{ transform:scale(1.06) !important; box-shadow:0 12px 32px rgba(37,99,235,.28), inset 0 0 0 1px rgba(37,99,235,.14) !important; } .b4sc-card:nth-child(1) p::after{ content:"Custom formulations and private-label manufacturing tailored to your brand."; } .b4sc-card:nth-child(2) p::after{ content:"In-house engineers assist with specs, materials and compliance from sketch to mass production."; } .b4sc-card:nth-child(3) p::after{ content:"Door-to-door freight, customs handling and warehousing for on-time global delivery."; } .b4wc-card{ position:relative !important; overflow:hidden !important; background:#fff !important; border:1px solid rgba(15,23,42,.05) !important; border-radius:18px !important; padding:42px 26px 34px !important; text-align:center !important; box-shadow:0 4px 20px rgba(15,23,42,.06) !important; transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .35s ease !important; } .b4wc-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#ff8c42,#ff6b6b,#8b5cf6); } .b4wc-card > div:first-child{ width:80px !important; height:80px !important; margin:6px auto 20px !important; border-radius:24px !important; background:linear-gradient(135deg,var(--c-primary-light,#eef4ff),#fff) !important; color:#ff8c42 !important; font-size:34px !important; line-height:1 !important; box-shadow:0 8px 24px rgba(255,140,66,.18), inset 0 0 0 1px rgba(255,140,66,.1) !important; display:flex !important; align-items:center !important; justify-content:center !important; transition:transform .35s ease,box-shadow .35s ease !important; } .b4wc-card h3{ font-size:19px !important; font-weight:800 !important; color:var(--c-text,#0b1f3a) !important; margin:0 0 10px !important; } .b4wc-card p{ font-size:14px !important; line-height:1.65 !important; color:var(--c-text-muted,#5a6b7e) !important; margin:0 !important; } .b4wc-card:hover{ transform:translateY(-8px) !important; box-shadow:0 24px 48px rgba(15,23,42,.14) !important; border-color:rgba(255,140,66,.2) !important; } .b4wc-card:hover > div:first-child{ transform:scale(1.06) !important; box-shadow:0 12px 32px rgba(255,140,66,.28) !important; } .b4wc-card:nth-child(1) p::after{ content:"Trusted manufacturing partner since 2009, refined across thousands of shipments."; } .b4wc-card:nth-child(2) p::after{ content:"Exporting to six continents with localized documentation and after-sales support."; } .b4wc-card:nth-child(3) p::after{ content:"ISO 9001 and SGS-audited processes, with full COA and test reports on every batch."; } .b4wc-card:nth-child(4) p::after{ content:"Stocked SKUs ship in 72 hours; bulk orders on reliable 15-30 day schedules."; } @media (max-width:768px){ .b4sc-card{ padding:36px 22px 30px !important; } .b4sc-card > div:first-child{ width:72px !important; height:72px !important; font-size:32px !important; margin:4px auto 18px !important; } .b4sc-card h3{ font-size:19px !important; } .b4wc-card{ padding:34px 20px 28px !important; } .b4wc-card > div:first-child{ width:68px !important; height:68px !important; font-size:30px !important; margin:4px auto 16px !important; } .b4wc-card h3{ font-size:17px !important; } } @media (max-width:460px){ .b4sc-card p,.b4wc-card p{ font-size:13.5px !important; } } .b4sc-card::before,.b4wc-card::before{ display:none !important; } .b4sc-card{ background:#fff !important; border:1px solid #eef1f6 !important; border-radius:16px !important; padding:40px 28px 34px !important; text-align:center !important; box-shadow:0 2px 8px rgba(15,23,42,.04) !important; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important; } .b4sc-card > div:first-child{ width:64px !important; height:64px !important; margin:0 auto 20px !important; border-radius:16px !important; background:var(--c-primary-light,#eef4ff) !important; color:var(--c-primary,#2563eb) !important; font-size:28px !important; line-height:1 !important; box-shadow:none !important; display:flex !important; align-items:center !important; justify-content:center !important; transition:background .25s ease !important; } .b4sc-card h3{ font-size:19px !important; font-weight:700 !important; color:#0b1f3a !important; margin:0 0 10px !important; letter-spacing:0 !important; } .b4sc-card p{ font-size:14px !important; line-height:1.7 !important; color:#5a6b7e !important; margin:0 !important; } .b4sc-card:hover{ transform:translateY(-4px) !important; box-shadow:0 8px 24px rgba(15,23,42,.08) !important; border-color:#e2e8f0 !important; } .b4sc-card:hover > div:first-child{ transform:none !important; background:#e0eaff !important; } .b4wc-card{ background:#fff !important; border:1px solid #eef1f6 !important; border-radius:16px !important; padding:38px 24px 32px !important; text-align:center !important; box-shadow:0 2px 8px rgba(15,23,42,.04) !important; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important; } .b4wc-card > div:first-child{ width:60px !important; height:60px !important; margin:0 auto 18px !important; border-radius:16px !important; background:#fff4ec !important; color:#ff8c42 !important; font-size:26px !important; line-height:1 !important; box-shadow:none !important; display:flex !important; align-items:center !important; justify-content:center !important; transition:background .25s ease !important; } .b4wc-card h3{ font-size:17px !important; font-weight:700 !important; color:#0b1f3a !important; margin:0 0 8px !important; } .b4wc-card p{ font-size:13.5px !important; line-height:1.65 !important; color:#5a6b7e !important; margin:0 !important; } .b4wc-card:hover{ transform:translateY(-4px) !important; box-shadow:0 8px 24px rgba(15,23,42,.08) !important; border-color:#e2e8f0 !important; } .b4wc-card:hover > div:first-child{ transform:none !important; background:#ffe8d6 !important; } @media (max-width:768px){ .b4sc-card{ padding:32px 22px 28px !important; } .b4sc-card > div:first-child{ width:56px !important; height:56px !important; font-size:24px !important; } .b4sc-card h3{ font-size:18px !important; } .b4wc-card{ padding:30px 20px 26px !important; } .b4wc-card > div:first-child{ width:54px !important; height:54px !important; font-size:22px !important; } .b4wc-card h3{ font-size:16px !important; } } .b4sc-card p::after,.b4wc-card p::after{ content:none !important; } div:has(> .b4sc-card),div:has(> .b4wc-card){ grid-template-columns:repeat(4,1fr) !important; gap:24px !important; } @media (max-width:900px){ div:has(> .b4sc-card),div:has(> .b4wc-card){ grid-template-columns:repeat(2,1fr) !important; } } @media (max-width:560px){ div:has(> .b4sc-card),div:has(> .b4wc-card){ grid-template-columns:1fr !important; } } .spr-txt, .spr-txt p, .spr-txt li, .spl-txt, .spl-txt p, .spl-txt li, .sld-hs-text, .sld-hs-text p, .sld-hs-text li, .sld-hf-cap, .sld-hf-cap p, .sld-hf-cap li{ color: rgba(255,255,255,.85); } .spr-txt .spr-title, .spl-txt .spl-title, .sld-hs-text .sld-hs-title, .sld-hf-cap .sld-hf-title{ color:#fff; } .block-section{ padding:56px 0 !important; } .block-cta{ padding:56px 0 !important; } .block-hero{ padding:76px 0 !important; } .block-two-col{ padding:56px 0 !important; } .block-section.no-pad-top{ padding-top:0 !important; } .block-section.no-pad-bot{ padding-bottom:0 !important; } .section-subtitle{ margin-bottom:30px !important; } .section-title{ margin-bottom:10px !important; } .section-head--center{ margin-bottom:0 !important; } .section-title:empty{ display:none !important; margin:0 !important; } .section-subtitle:empty{ display:none !important; margin:0 !important; } .section-title:blank{ display:none !important; margin:0 !important; } .section-subtitle:blank{ display:none !important; margin:0 !important; } @media (max-width:768px){ .block-section, .block-cta, .block-two-col{ padding:38px 0 !important; } .block-hero{ padding:52px 0 !important; } .section-subtitle{ margin-bottom:22px !important; } } @media (max-width:768px){ .page-banner{ background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important; background-color:#0b1f3a !important; } .block-hero{ background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important; } } .site-header .nav-submenu .nav-subitem-has-child{ position:relative !important; } .site-header .nav-submenu .nav-subitem-has-child > a{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; } .site-header .nav-submenu .nav-caret-r{ font-size:15px !important; line-height:1 !important; opacity:.55 !important; margin-left:auto !important; transition:transform .2s, opacity .2s !important; } .site-header .nav-submenu .nav-subitem-has-child:hover > a .nav-caret-r{ opacity:1 !important; transform:translateX(2px) !important; } .site-header .nav-submenu-lv2{ position:absolute !important; top:-8px !important; left:100% !important; margin-left:4px !important; min-width:190px !important; background:#fff !important; border-radius:10px !important; padding:8px !important; box-shadow:0 12px 32px rgba(11,31,58,.14) !important; border:1px solid #eef2f7 !important; opacity:0 !important; visibility:hidden !important; transform:translateX(8px) !important; transition:opacity .2s, transform .2s, visibility .2s !important; z-index:210 !important; } .site-header .nav-subitem-has-child:hover > .nav-submenu-lv2{ opacity:1 !important; visibility:visible !important; transform:translateX(0) !important; } .site-header .nav-submenu-lv2::before{ content:'' !important; position:absolute !important; left:-12px !important; top:0 !important; bottom:0 !important; width:12px !important; background:transparent !important; } .site-header .nav-submenu-lv2 a{ display:block !important; padding:10px 14px !important; font-size:14px !important; color:#0b1f3a !important; border-radius:6px !important; font-weight:500 !important; white-space:nowrap !important; } .site-header .nav-submenu-lv2 a:hover{ background:#fff4ec !important; color:#ff8c42 !important; } @media (max-width:980px){ .site-header .nav-submenu-lv2{ display:none !important; } } :is(.block-text-content,.two-col-text-content,.rich-content){ overflow-wrap:anywhere; } :is(.block-text-content,.two-col-text-content,.rich-content) > :first-child{ margin-top:0; } :is(.block-text-content,.two-col-text-content,.rich-content) > :last-child{ margin-bottom:0; } :is(.block-text-content,.two-col-text-content,.rich-content) img{ max-width:100%; height:auto; display:block; margin:22px auto; border-radius:14px; box-shadow:0 10px 30px rgba(15,23,42,.10); } :is(.block-text-content,.two-col-text-content,.rich-content) a img{ box-shadow:none; } img.rc-zoomable{ cursor:zoom-in; transition:box-shadow .25s ease, transform .25s ease; } img.rc-zoomable:hover{ box-shadow:0 16px 40px rgba(15,23,42,.18); } :is(.block-text-content,.two-col-text-content,.rich-content) figure{ margin:22px 0; max-width:100%; } :is(.block-text-content,.two-col-text-content,.rich-content) figure img{ margin:0 auto; } :is(.block-text-content,.two-col-text-content,.rich-content) figcaption{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--c-text-muted,#6b7280); text-align:center; font-style:italic; } :is(.block-text-content,.two-col-text-content,.rich-content) table{ width:100%; border-collapse:separate; border-spacing:0; margin:24px 0; font-size:15px; line-height:1.6; color:var(--c-text,#1f2937); background:#fff; border:1px solid var(--c-border,#e5e7eb); border-radius:14px; overflow:hidden; box-shadow:0 6px 22px rgba(15,23,42,.06); } :is(.block-text-content,.two-col-text-content,.rich-content) table th, :is(.block-text-content,.two-col-text-content,.rich-content) table td{ padding:13px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--c-border,#e5e7eb); border-right:1px solid var(--c-border,#e5e7eb); } :is(.block-text-content,.two-col-text-content,.rich-content) table th:last-child, :is(.block-text-content,.two-col-text-content,.rich-content) table td:last-child{ border-right:none; } :is(.block-text-content,.two-col-text-content,.rich-content) table tr:last-child td{ border-bottom:none; } :is(.block-text-content,.two-col-text-content,.rich-content) table th{ background:var(--c-primary,#2563eb); color:#fff; font-weight:600; border-bottom:none; border-right-color:rgba(255,255,255,.22); } :is(.block-text-content,.two-col-text-content,.rich-content) table th:last-child{ border-right:none; } :is(.block-text-content,.two-col-text-content,.rich-content) table tbody tr:nth-child(even) td{ background:var(--c-bg-alt,#f8fafc); } :is(.block-text-content,.two-col-text-content,.rich-content) table tbody tr:hover td{ background:color-mix(in srgb, var(--c-primary,#2563eb) 8%, #fff); } :is(.block-text-content,.two-col-text-content,.rich-content) .rc-table-scroll{ margin:24px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-border,#e5e7eb); border-radius:14px; } :is(.block-text-content,.two-col-text-content,.rich-content) .rc-table-scroll table{ margin:0; border:none; border-radius:0; box-shadow:none; min-width:520px; } :is(.block-text-content,.two-col-text-content,.rich-content) .rc-video-wrap{ position:relative; width:100%; height:auto; padding:0; margin:24px 0; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(15,23,42,.12); } :is(.block-text-content,.two-col-text-content,.rich-content) .rc-video-wrap iframe, :is(.block-text-content,.two-col-text-content,.rich-content) .rc-video-wrap video, :is(.block-text-content,.two-col-text-content,.rich-content) .rc-video-wrap embed{ position:absolute; inset:0; width:100%; height:100%; border:0; } :is(.block-text-content,.two-col-text-content,.rich-content) iframe, :is(.block-text-content,.two-col-text-content,.rich-content) video{ max-width:100%; } :is(.block-text-content,.two-col-text-content,.rich-content) blockquote{ margin:22px 0; padding:14px 20px; color:var(--c-text,#1f2937); border-left:4px solid var(--c-primary,#2563eb); background:color-mix(in srgb, var(--c-primary,#2563eb) 6%, #fff); border-radius:0 12px 12px 0; } :is(.block-text-content,.two-col-text-content,.rich-content) blockquote :last-child{ margin-bottom:0; } :is(.block-text-content,.two-col-text-content,.rich-content) pre{ margin:22px 0; padding:16px 18px; overflow-x:auto; background:#0f172a; color:#e2e8f0; border-radius:12px; font-size:13.5px; line-height:1.65; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } :is(.block-text-content,.two-col-text-content,.rich-content) pre code{ background:none; color:inherit; padding:0; font-size:inherit; } :is(.block-text-content,.two-col-text-content,.rich-content) code{ background:var(--c-bg-alt,#f1f5f9); color:var(--c-primary-dark,#1e40af); padding:2px 6px; border-radius:6px; font-size:.92em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } @media (max-width:768px){ :is(.block-text-content,.two-col-text-content,.rich-content) img{ margin:18px auto; border-radius:12px; } :is(.block-text-content,.two-col-text-content,.rich-content) .rc-table-scroll table{ min-width:460px; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head){ border:none; border-radius:0; box-shadow:none; background:transparent; font-size:14px; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) thead, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tr:has(> th):not(:has(> td)){ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tr{ display:block; margin:0 0 14px; border:1px solid var(--c-border,#e5e7eb); border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(15,23,42,.07); background:#fff; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) td{ display:flex; justify-content:space-between; gap:18px; padding:11px 15px; text-align:right; border:none; border-bottom:1px solid var(--c-border,#eef1f6); } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tr td:last-child{ border-bottom:none; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) td::before{ content:attr(data-label); flex:0 0 40%; text-align:left; font-weight:600; color:var(--c-text-muted,#6b7280); white-space:normal; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) td:empty{ display:none; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tbody tr:nth-child(even) td, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tbody tr:hover td{ background:#fff; } } .rc-lb{ position:fixed; inset:0; z-index:99990; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.88); padding:4vmin; cursor:zoom-out; opacity:0; transition:opacity .22s ease; } .rc-lb.is-open{ display:flex; opacity:1; } .rc-lb-img{ max-width:94vw; max-height:88vh; border-radius:10px; background:#fff; cursor:default; box-shadow:0 30px 80px rgba(0,0,0,.55); } .rc-lb-cap{ position:absolute; left:0; right:0; bottom:3vmin; text-align:center; color:#e5e7eb; font-size:14px; line-height:1.5; padding:0 24px; pointer-events:none; } .rc-lb-x{ position:absolute; top:18px; right:22px; width:44px; height:44px; background:rgba(255,255,255,.12); border:none; border-radius:50%; color:#fff; font-size:26px; line-height:1; cursor:pointer; transition:background .2s ease; } .rc-lb-x:hover{ background:rgba(255,255,255,.24); } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head){ width:100% !important; max-width:100% !important; border-collapse:separate !important; border-spacing:0; margin:22px 0; border:1px solid var(--c-border,#e6e9f0); border-radius:12px; overflow:hidden; box-shadow:0 2px 14px rgba(15,23,42,.06); table-layout:auto; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) thead th, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) thead td, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head):not(:has(thead)) > tr:first-child > *, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head):not(:has(thead)) > tbody > tr:first-child > *{ background:var(--c-primary,#2563eb) !important; color:#fff !important; font-weight:600; text-align:left; padding:13px 16px !important; border:none !important; border-right:1px solid rgba(255,255,255,.16) !important; white-space:nowrap; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) thead tr > *:last-child, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head):not(:has(thead)) > tr:first-child > *:last-child, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head):not(:has(thead)) > tbody > tr:first-child > *:last-child{ border-right:none !important; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) td{ padding:11px 16px; border-top:1px solid var(--c-border,#eef1f6); vertical-align:top; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tbody tr:nth-child(even) td{ background:var(--c-bg-alt,#f8fafc); } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tbody tr:hover td{ background:color-mix(in srgb, var(--c-primary,#2563eb) 7%, #fff); } @media (max-width:768px){ :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head), :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tbody, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tr, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) td{ display:block !important; width:100% !important; box-sizing:border-box; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) thead, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head):not(:has(thead)) > tr:first-child, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head):not(:has(thead)) > tbody > tr:first-child{ position:absolute !important; left:-9999px !important; top:-9999px !important; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head){ border:none !important; box-shadow:none !important; margin:18px 0 !important; overflow:visible !important; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tr{ margin:0 0 16px !important; border:1px solid var(--c-border,#e6e9f0) !important; border-radius:12px !important; overflow:hidden !important; background:#fff !important; box-shadow:0 2px 10px rgba(15,23,42,.06) !important; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) td{ display:flex !important; justify-content:space-between; align-items:flex-start; gap:14px; padding:11px 15px !important; border-top:1px solid #f1f5f9 !important; text-align:right !important; background:transparent !important; white-space:normal !important; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tr td:first-child{ border-top:none !important; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) td::before{ content:attr(data-label); font-weight:600; color:var(--c-text,#0f1f3d); text-align:left; flex-shrink:0; max-width:42%; padding-right:6px; } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) td:empty{ display:none !important; } } :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head), :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tr, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) td, :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) th{ height:auto !important; min-height:0 !important; } @media (max-width:768px){ :is(.block-text-content,.two-col-text-content,.rich-content) table:not(.rc-no-head) tr{ height:auto !important; } } .blog-hero .blog-hero-img img, .blog-row .blog-row-img img{ object-fit:cover !important; object-position:center center; } .product-cover img, .side-prod-img img{ object-fit:cover !important; } .page-banner{aspect-ratio:auto !important;height:350px;min-height:0; background-size:cover !important;background-position:center !important} @media (max-width:768px){.page-banner{height:240px;background-size:cover !important}} @media (max-width:480px){.page-banner{height:200px}} .page-banner{aspect-ratio:var(--pb-ratio,1920 / 350) !important;height:auto !important; max-height:480px;min-height:220px;background-size:cover !important;background-position:center !important} @media (max-width:768px){.page-banner{aspect-ratio:auto !important;height:240px !important; min-height:0;background-size:cover !important}} @media (max-width:480px){.page-banner{height:200px !important}} main ::first-letter, .tb-content p:first-child::first-letter, .tb-content p::first-letter{ float:none !important; font-size:inherit !important; font-weight:inherit !important; font-style:inherit !important; font-family:inherit !important; line-height:inherit !important; color:inherit !important; margin:0 !important; padding:0 !important; initial-letter:normal !important; } :root{--hs-1:48px;--hs-2:36px;--hs-3:28px;--hs-4:22px;--hs-5:18px;--hs-6:16px;--hc-1:36px;--hc-2:28px;--hc-3:22px;--hc-4:18px} @media (max-width:1024px){:root{--hs-1:40px;--hs-2:32px;--hs-3:26px;--hs-4:21px;--hs-5:18px;--hs-6:16px;--hc-1:32px;--hc-2:26px;--hc-3:21px;--hc-4:18px}} @media (max-width:640px){:root{--hs-1:30px;--hs-2:26px;--hs-3:22px;--hs-4:19px;--hs-5:17px;--hs-6:16px;--hc-1:26px;--hc-2:23px;--hc-3:20px;--hc-4:17px}} main h1:not(#hs):not([class*="hero"]):not(:is(.sld-hf,[class*="hero"]) *){font-size:var(--hs-1)!important;line-height:1.2!important} main :is(.pl-hero,.news-hero,.page-banner-body) h1:not(#hs):not(#hs){font-size:var(--hs-1)!important;line-height:1.2!important} main :is(.pd-info,.article-header) h1:not(#hs):not(#hs){font-size:var(--hc-1)!important;line-height:1.25!important} main h2:not(#hs):not([class*="hero"]):not(:is(.sld-hf,[class*="hero"]) *){font-size:var(--hs-2)!important;line-height:1.25!important} main :is(.plb-cta-tx,.blog-hero-body,.pdi-head-tx) h2:not(#hs):not(#hs){font-size:var(--hs-3)!important;line-height:1.3!important} main:has(.pd-info,.article-header) h2:not(#hs):not(#hs){font-size:var(--hc-2)!important;line-height:1.3!important} :is(.tb-content,.rich-content,.article-content,.pd-content,.two-col-text-content) h2:not(#hs):not(#hs){font-size:var(--hc-2)!important;line-height:1.3!important} :is(.tb-content,.rich-content,.article-content,.pd-content,.two-col-text-content) h3:not(#hs):not(#hs){font-size:var(--hc-3)!important;line-height:1.35!important} :is(.tb-content,.rich-content,.article-content,.pd-content,.two-col-text-content) h4:not(#hs):not(#hs){font-size:var(--hc-4)!important;line-height:1.4!important} :is(.tb-content,.rich-content,.article-content,.pd-content,.two-col-text-content) :is(h5,h6):not(#hs):not(#hs){font-size:var(--hs-6)!important;line-height:1.45!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) div[style*="padding-bottom"][style*="overflow"]:has(>img[style*="absolute"]){background:transparent!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) div[style*="padding-bottom"][style*="overflow"]>img[style*="absolute"]{object-fit:cover!important;object-position:center!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit:not(#pvf){position:relative} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit:not(#pvf)>.pvfit-bg{position:absolute;inset:-14%;background-size:cover;background-position:center;filter:blur(18px) saturate(1.15);transform:scale(1.1);pointer-events:none} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit.pvfit-is-contain:not(#pvf)>img{object-fit:contain!important;position:absolute!important;inset:0!important;z-index:1} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit.pvfit-flow:not(#pvf){padding-bottom:0!important;background:transparent!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit.pvfit-flow:not(#pvf)>img{position:static!important;width:100%!important;height:auto!important;object-fit:fill!important;display:block} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) div[style*="padding-bottom"][style*="overflow"]:has(>img[style*="absolute"]):not(#pvf){background:#fff!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit:not(#pvf)>.pvfit-bg{display:none!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit.pvfit-flow:not(#pvf){background:transparent!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) div[style*="padding-bottom"][style*="overflow"]:has(>img[style*="absolute"]):not(#pvf){background:#fff!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) div[style*="padding-bottom"][style*="overflow"]>img[style*="absolute"]:not(#pvf){margin:0!important;border-radius:0!important;box-shadow:none!important;max-width:none!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit:not(#pvf){position:relative} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit.pvfit-is-stretch:not(#pvf):not(#pvf2)>img{object-fit:fill!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit.pvfit-is-contain:not(#pvf):not(#pvf2)>img{object-fit:contain!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit>.pvfit-bg{display:none!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit.pvfit-flow:not(#pvf):not(#pvf2){padding-bottom:0!important;background:transparent!important} :is(.block-text-content,.rich-content,.tb-content,.pd-content,.article-content,.two-col-text-content) .pvfit.pvfit-flow:not(#pvf):not(#pvf2)>img{position:static!important;width:100%!important;height:auto!important;object-fit:fill!important;display:block} @media (max-width:640px){ .blog-row{ gap:0 !important; flex-direction:column !important; } .blog-row .blog-row-img{ width:100% !important; flex:0 0 auto !important; aspect-ratio:16/9 !important; } .blog-row .blog-row-img img{ width:100% !important; height:100% !important; display:block; } } :root{ --rc-h1:clamp(28px,1.6vw + 22px,38px); --rc-h2:clamp(24px,1.2vw + 19px,30px); --rc-h3:clamp(20px,.6vw + 17px,23px); --rc-h4:clamp(17px,2.4vw,20px); } .pd-content.pd-content h1,.article-content.article-content h1,.rich-content.rich-content h1{font-size:var(--rc-h1);line-height:1.2} .pd-content.pd-content h2,.article-content.article-content h2,.rich-content.rich-content h2{font-size:var(--rc-h2);line-height:1.25} .pd-content.pd-content h3,.article-content.article-content h3,.rich-content.rich-content h3{font-size:var(--rc-h3);line-height:1.3} .pd-content.pd-content h4,.article-content.article-content h4,.rich-content.rich-content h4{font-size:var(--rc-h4);line-height:1.35} :is(.pd-content,.article-content,.rich-content) h2[style*="clamp("]{font-size:var(--rc-h2)!important} :is(.pd-content,.article-content,.rich-content) h3[style*="clamp("]:not([style*="clamp(26px"]){font-size:var(--rc-h3)!important} :is(.pd-content,.article-content,.rich-content) h4[style*="17px"], :is(.pd-content,.article-content,.rich-content) h4[style*="clamp(16px"]{font-size:var(--rc-h4)!important} :is(.pd-content,.article-content,.rich-content) [style*="clamp(28px"]{overflow-wrap:normal;word-break:keep-all}