/**
 * Theme Name: TMC LAB 迈科检测
 * Theme URI: https://www.tmc-lab.com/
 * Description: 高转化营销官网主题 —— 首屏资质前置、按行业服务方案、案例实证、全局转化入口与内容营销专栏。含响应式布局与询盘来源埋点。
 * Author: TMC LAB
 * Version: 3.10.56
 * Tags: corporate, responsive, clean
 */
:root { --red: #6c8650; --red-d: #5a7042; --red-l: #eef3e8; --navy: #3f503b; --navy-2: #4d6150; --navy-3: #5d7259; --ink: #2c3a2e; --ink-2: #4a5a48; --muted: #6b7b66; --muted-2: #62715D; --muted-3: #5A6756; --bg: #FFFFFF; --bg-soft: #f4f7f2; --bg-soft-2: #e8ede4; --surface-1: #f8faf6; --surface-2: #eef3ea; --surface-3: #e3ebe0; --surface-line: #d3ddd0; --line: #e1e8de; --line-2: #cdd6c9; --gold: #a8b092; --green: #6c8650; --acc-tint: #c9d4b8; --dot: #9dbd7f; --dot-ring: rgba(108, 134, 80, .22); --deep-rgb: 63, 80, 59; --acc-rgb: 108, 134, 80; --grad-hero: linear-gradient(168deg, #FAFCFE 0%, #F1F7FC 42%, #E6EFF8 100%); --grad-page: linear-gradient(152deg, #F9FCFE 0%, #EDF5FB 48%, #E2EDF7 100%); --scrim-mid: rgba(243, 248, 253, .78); --scrim-end: rgba(230, 240, 249, .84); --hl-soft: rgba(226, 35, 26, .14); --hl-faint: rgba(226, 35, 26, .03); --acc-sh: rgba(226, 35, 26, .24); --acc-sh-h: rgba(226, 35, 26, .3); --acc-92: rgba(226, 35, 26, .92); --acc-45: rgba(226, 35, 26, .45); --acc-30: rgba(226, 35, 26, .3); --acc-10: rgba(226, 35, 26, .1); --acc-0: rgba(226, 35, 26, 0); --r: 12px; --r-sm: 8px; --r-lg: 18px; --shadow-sm: 0 2px 8px rgba(16, 38, 58, .05); --shadow: 0 8px 30px rgba(16, 38, 58, .08); --shadow-lg: 0 20px 60px rgba(16, 38, 58, .14); --head-h: 68px; --topbar-h: 38px; --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif; --font-num: "DIN Alternate", "Barlow", "Helvetica Neue", Arial, sans-serif; --font-portal: "Microsoft YaHei", "微软雅黑", SimHei, "黑体", "PingFang SC", "Hiragino Sans GB", SimSun, "宋体", Arial, sans-serif; } html[data-theme="sgs"] { --red: #FF6600; --red-d: #D95400; --red-l: #FFF1E4; --navy: #33322E; --navy-2: #4A4945; --navy-3: #5F5E59; --ink: #2B2A27; --ink-2: #4C4B46; --muted: #6E6D67; --muted-2: #6E6D66; --muted-3: #65645E; --bg: #FFFFFF; --bg-soft: #F6F5F2; --bg-soft-2: #ECEAE4; --surface-1: #FAF9F6; --surface-2: #F1EFE9; --surface-3: #E7E4DC; --surface-line: #D8D4CA; --line: #E5E2D9; --line-2: #CFCBC0; --gold: #999999; --green: #5E8A46; --acc-tint: #FFD9B3; --dot: #FF6600; --dot-ring: rgba(255, 102, 0, .22); --grad-hero: linear-gradient(168deg, #FDFBF8 0%, #FBF3EA 42%, #F7E9D8 100%); --grad-page: linear-gradient(152deg, #FDFBF7 0%, #FAF1E6 48%, #F5E7D3 100%); --scrim-mid: rgba(251, 243, 234, .8); --scrim-end: rgba(247, 233, 216, .85); --hl-soft: rgba(255, 102, 0, .16); --hl-faint: rgba(255, 102, 0, .04); --acc-sh: rgba(255, 102, 0, .26); --acc-sh-h: rgba(255, 102, 0, .34); --acc-92: rgba(255, 102, 0, .92); --acc-45: rgba(255, 102, 0, .45); --acc-30: rgba(255, 102, 0, .3); --acc-10: rgba(255, 102, 0, .1); --acc-0: rgba(255, 102, 0, 0); } html[data-theme="amber"] { --red: #8F6A00; --red-d: #6F5200; --red-l: #FBF0D5; --navy: #453506; --navy-2: #5C4808; --navy-3: #74600F; --deep-rgb: 69, 53, 6; --acc-rgb: 143, 106, 0; --ink: #2F2A1B; --ink-2: #4E4632; --muted: #776C55; --muted-2: #746C58; --muted-3: #6D634E; --bg: #FFFFFF; --bg-soft: #FDFAF1; --bg-soft-2: #FAF3E0; --surface-1: #FEFCF6; --surface-2: #FBF6E9; --surface-3: #F5EDD8; --surface-line: #E3D6B4; --line: #F0E8D3; --line-2: #DED0AC; --gold: #F2B705; --green: #5E8A46; --acc-tint: #F0D9A0; --dot: #8F6A00; --dot-ring: rgba(143, 106, 0, .22); --grad-hero: linear-gradient(168deg, #FFFDF7 0%, #FDF6E4 42%, #FAEFD2 100%); --grad-page: linear-gradient(152deg, #FFFDF6 0%, #FCF5E2 48%, #F8EDCF 100%); --scrim-mid: rgba(253, 246, 228, .8); --scrim-end: rgba(250, 239, 210, .85); --hl-soft: rgba(143, 106, 0, .16); --hl-faint: rgba(143, 106, 0, .04); --acc-sh: rgba(143, 106, 0, .26); --acc-sh-h: rgba(143, 106, 0, .34); --acc-92: rgba(143, 106, 0, .92); --acc-45: rgba(143, 106, 0, .45); --acc-30: rgba(143, 106, 0, .3); --acc-10: rgba(143, 106, 0, .1); --acc-0: rgba(143, 106, 0, 0); } html[data-theme="rhein"] { --red: #16233F; --red-d: #0E1830; --red-l: #E9EDF4; --navy: #0E1830; --navy-2: #16233F; --navy-3: #24365C; --deep-rgb: 14, 24, 48; --acc-rgb: 22, 35, 63; --ink: #1A2438; --ink-2: #3C4864; --muted: #6B7488; --muted-2: #667085; --muted-3: #5D6678; --bg: #FFFFFF; --bg-soft: #F6F3EC; --bg-soft-2: #EDE7DA; --surface-1: #FBF9F4; --surface-2: #F4EFE4; --surface-3: #EAE2D2; --surface-line: #DCD2BE; --line: #EBE5D8; --line-2: #D8CFBB; --gold: #C8944C; --green: #5E8A46; --acc-tint: #E2C98F; --dot: #C8944C; --dot-ring: rgba(200, 148, 76, .22); --grad-hero: linear-gradient(168deg, #FFFFFF 0%, #F7F3EA 42%, #EFE7D6 100%); --grad-page: linear-gradient(152deg, #FFFFFF 0%, #F6F2E9 48%, #EDE4D2 100%); --scrim-mid: rgba(246, 243, 236, .8); --scrim-end: rgba(237, 231, 218, .85); --hl-soft: rgba(200, 148, 76, .16); --hl-faint: rgba(200, 148, 76, .04); --acc-sh: rgba(22, 35, 63, .26); --acc-sh-h: rgba(22, 35, 63, .34); --acc-92: rgba(22, 35, 63, .92); --acc-45: rgba(22, 35, 63, .45); --acc-30: rgba(22, 35, 63, .3); --acc-10: rgba(22, 35, 63, .1); --acc-0: rgba(22, 35, 63, 0); } html[data-theme="mono"] { --red: #1C1C1C; --red-d: #000000; --red-l: #EFEFEF; --navy: #111111; --navy-2: #2E2E2E; --navy-3: #454545; --ink: #1A1A1A; --ink-2: #3C3C3C; --muted: #6A6A6A; --muted-2: #6D6D6D; --muted-3: #636363; --bg: #FFFFFF; --bg-soft: #F5F5F5; --bg-soft-2: #EAEAEA; --surface-1: #FAFAFA; --surface-2: #F1F1F1; --surface-3: #E5E5E5; --surface-line: #D4D4D4; --line: #E3E3E3; --line-2: #CCCCCC; --gold: #8C8C8C; --green: #3D3D3D; --acc-tint: #D6D6D6; --dot: #1C1C1C; --dot-ring: rgba(0, 0, 0, .18); --grad-hero: linear-gradient(168deg, #FDFDFD 0%, #F5F5F5 42%, #EBEBEB 100%); --grad-page: linear-gradient(152deg, #FDFDFD 0%, #F4F4F4 48%, #E9E9E9 100%); --scrim-mid: rgba(245, 245, 245, .8); --scrim-end: rgba(235, 235, 235, .85); --hl-soft: rgba(0, 0, 0, .12); --hl-faint: rgba(0, 0, 0, .03); --acc-sh: rgba(0, 0, 0, .22); --acc-sh-h: rgba(0, 0, 0, .3); --acc-92: rgba(28, 28, 28, .92); --acc-45: rgba(28, 28, 28, .45); --acc-30: rgba(28, 28, 28, .3); --acc-10: rgba(28, 28, 28, .1); --acc-0: rgba(28, 28, 28, 0); } html[data-theme="violet"] { --red: #8E66B4; --red-d: #74509A; --red-l: #F3ECFA; --navy: #4C3D68; --navy-2: #5F5080; --navy-3: #746494; --ink: #382F4A; --ink-2: #524868; --muted: #6E6484; --muted-2: #736789; --muted-3: #685F7D; --bg: #FFFFFF; --bg-soft: #F8F6FB; --bg-soft-2: #EFEAF6; --surface-1: #FBFAFD; --surface-2: #F4F0F9; --surface-3: #EAE3F2; --surface-line: #D5CBDF; --line: #E7E1EE; --line-2: #D0C6DC; --gold: #FFC000; --green: #5E9384; --acc-tint: #E2D3F0; --dot: #8E66B4; --dot-ring: rgba(142, 102, 180, .22); --grad-hero: linear-gradient(168deg, #FDFCFF 0%, #F6F2FA 42%, #EDE5F5 100%); --grad-page: linear-gradient(152deg, #FDFCFF 0%, #F5F1FA 48%, #EAE1F3 100%); --scrim-mid: rgba(246, 242, 250, .8); --scrim-end: rgba(234, 225, 243, .85); --hl-soft: rgba(142, 102, 180, .16); --hl-faint: rgba(142, 102, 180, .04); --acc-sh: rgba(142, 102, 180, .28); --acc-sh-h: rgba(142, 102, 180, .36); --acc-92: rgba(142, 102, 180, .92); --acc-45: rgba(142, 102, 180, .45); --acc-30: rgba(142, 102, 180, .3); --acc-10: rgba(142, 102, 180, .1); --acc-0: rgba(142, 102, 180, 0); } html[data-theme="crimson"] { --red: #C8102E; --red-d: #9E0C24; --red-l: #FCEAED; --navy: #4A2028; --navy-2: #63202C; --navy-3: #7E2E3B; --deep-rgb: 74, 32, 40; --acc-rgb: 200, 16, 46; --ink: #2E2426; --ink-2: #4E4244; --muted: #75676A; --muted-2: #766A6C; --muted-3: #6D6063; --bg: #FFFFFF; --bg-soft: #FBF6F6; --bg-soft-2: #F5EAEA; --surface-1: #FDFAFA; --surface-2: #F8F1F1; --surface-3: #EEE2E2; --surface-line: #DDCBCB; --line: #F1E5E5; --line-2: #D9C6C6; --gold: #B08D3F; --green: #5E8A46; --acc-tint: #F0B8C0; --dot: #C8102E; --dot-ring: rgba(200, 16, 46, .22); --grad-hero: linear-gradient(168deg, #FFFDFD 0%, #FDF3F4 42%, #F8E5E7 100%); --grad-page: linear-gradient(152deg, #FFFDFC 0%, #FCF2F2 48%, #F7E3E4 100%); --scrim-mid: rgba(253, 243, 244, .8); --scrim-end: rgba(248, 229, 231, .85); --hl-soft: rgba(200, 16, 46, .16); --hl-faint: rgba(200, 16, 46, .04); --acc-sh: rgba(200, 16, 46, .26); --acc-sh-h: rgba(200, 16, 46, .34); --acc-92: rgba(200, 16, 46, .92); --acc-45: rgba(200, 16, 46, .45); --acc-30: rgba(200, 16, 46, .3); --acc-10: rgba(200, 16, 46, .1); --acc-0: rgba(200, 16, 46, 0); } .brand__logo:not([data-logo="default"]), .foot-logo:not([data-logo="default"]) { display: none; } html[data-theme="sgs"] .brand__logo[data-logo="sgs"], html[data-theme="sgs"] .foot-logo[data-logo="sgs"] { display: block; } html[data-theme="sgs"] .brand__logo[data-logo="default"], html[data-theme="sgs"] .foot-logo[data-logo="default"] { display: none; } html[data-theme="rhein"] .brand__logo[data-logo="rhein"], html[data-theme="rhein"] .foot-logo[data-logo="rhein"] { display: block; } html[data-theme="rhein"] .brand__logo[data-logo="default"], html[data-theme="rhein"] .foot-logo[data-logo="default"] { display: none; } html[data-theme="amber"] .brand__logo[data-logo="amber"], html[data-theme="amber"] .foot-logo[data-logo="amber"] { display: block; } html[data-theme="amber"] .brand__logo[data-logo="default"], html[data-theme="amber"] .foot-logo[data-logo="default"] { display: none; } html[data-theme="mono"] .brand__logo[data-logo="mono"], html[data-theme="mono"] .foot-logo[data-logo="mono"] { display: block; } html[data-theme="mono"] .brand__logo[data-logo="default"], html[data-theme="mono"] .foot-logo[data-logo="default"] { display: none; } html[data-theme="violet"] .brand__logo[data-logo="violet"], html[data-theme="violet"] .foot-logo[data-logo="violet"] { display: block; } html[data-theme="violet"] .brand__logo[data-logo="default"], html[data-theme="violet"] .foot-logo[data-logo="default"] { display: none; } html[data-theme="crimson"] .brand__logo[data-logo="crimson"], html[data-theme="crimson"] .foot-logo[data-logo="crimson"] { display: block; } html[data-theme="crimson"] .brand__logo[data-logo="default"], html[data-theme="crimson"] .foot-logo[data-logo="default"] { display: none; } .theme-sw { position: relative; flex: 0 0 auto; } .theme-sw__btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--navy); transition: border-color .18s ease, color .18s ease, box-shadow .18s ease; } .theme-sw__btn:hover { border-color: var(--red); color: var(--red); box-shadow: var(--shadow-sm); } .theme-sw__pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 80; min-width: 172px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } .theme-sw__title { margin: 4px 8px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); } .theme-sw__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; transition: background .15s ease, color .15s ease; } .theme-sw__opt:hover { background: var(--red-l); color: var(--red); } .theme-sw__opt[aria-checked="true"] { color: var(--red); font-weight: 800; } .theme-sw__opt[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-size: 13px; } .sw { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); } .sw--default { background: linear-gradient(135deg, #6c8650 50%, #3f503b 50%); } .sw--sgs { background: linear-gradient(135deg, #FF6600 50%, #999999 50%); } .sw--amber { background: linear-gradient(135deg, #8F6A00 50%, #F2B705 50%); } .sw--rhein { background: linear-gradient(135deg, #16233F 50%, #C8944C 50%); } .sw--mono { background: linear-gradient(135deg, #1C1C1C 50%, #BBBBBB 50%); } .sw--violet { background: linear-gradient(135deg, #8E66B4 50%, #FFC000 50%); } .sw--crimson { background: linear-gradient(135deg, #C8102E 50%, #B08D3F 50%); } @media (max-width: 760px) { .theme-sw__btn { width: 34px; height: 34px; } .theme-sw__pop { position: fixed; top: 118px; right: 12px; left: auto; } } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-locked { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--navy); text-decoration: none; transition: color .18s ease; } a:hover { color: var(--red); } h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--navy); } p { margin: 0; } ul, ol, dl, dd, dt, blockquote, figure { margin: 0; padding: 0; } li { list-style: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; } .ic { flex: 0 0 auto; vertical-align: middle; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .btn .arrow { transition: transform .2s ease; } .btn:hover .arrow { transform: translateX(3px); } .btn--red { background: var(--red); color: #fff; box-shadow: 0 6px 20px var(--acc-sh); } .btn--red:hover { background: var(--red-d); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 26px var(--acc-sh-h); } .btn--outline { background: #fff; color: var(--navy); border-color: var(--line-2); } .btn--outline:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; } .btn--light { background: #fff; color: var(--navy); border-color: #fff; } .btn--light:hover { background: rgba(255, 255, 255, .92); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, .22); } .btn--lg { padding: 16px 30px; font-size: 16px; } .btn--sm { padding: 10px 16px; font-size: 14px; border-radius: 8px; } .btn--block { width: 100%; } .topbar { height: var(--topbar-h); background: var(--navy); color: rgba(255, 255, 255, .82); font-size: 12.5px; position: relative; z-index: 60; } .topbar__in { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; } .topbar__left { display: flex; align-items: center; gap: 14px; min-width: 0; } .topbar__brand { color: #fff; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } .topbar__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .22); } .topbar__creds { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; } .mini-creds { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: rgba(255, 255, 255, .9); font-weight: 600; } .mini-creds .ic { color: var(--gold); } .topbar__right { display: flex; align-items: center; gap: 18px; } .topbar__tel { display: inline-flex; align-items: center; gap: 7px; color: #fff; white-space: nowrap; } .topbar__tel .ic { color: var(--red); } .topbar__tel strong { font-family: var(--font-num); font-size: 15px; letter-spacing: .02em; } .topbar__tel:hover { color: #fff; } .topbar__tel-label { color: rgba(255, 255, 255, .6); } .topbar__mail { color: rgba(255, 255, 255, .62); white-space: nowrap; } .topbar__mail:hover { color: #fff; } .topbar__lang { display: inline-flex; align-items: center; margin-left: 2px; flex: 0 0 auto; } .topbar__lang .gtranslate_wrapper { display: inline-flex; align-items: center; } .topbar__lang .gt_switcher { font-size: 12.5px; line-height: 1; color: inherit !important; } .topbar__lang .gt_switcher .gt_selected, .topbar__lang .gt_switcher .gt_current, .topbar__lang .gt_switcher a { color: inherit !important; } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .24s ease, background .24s ease; } .site-header.is-stuck { box-shadow: 0 6px 24px rgba(16, 38, 58, .08); } .nav { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); gap: 24px; } .brand { display: flex; align-items: center; flex: 0 0 auto; background: transparent; } .brand__logo { height: 40px; width: auto; mix-blend-mode: normal; } .nav__wrap { flex: 1 1 auto; display: flex; align-self: stretch; align-items: stretch; justify-content: center; } .nav-menu { display: flex; align-items: stretch; gap: 10px; } .nav-item { display: flex; align-items: center; position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--ink-2); white-space: nowrap; background: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(var(--deep-rgb), .04); transition: all .2s ease; } .nav-link:hover { background: #fff; color: var(--navy); border-color: var(--line-2); box-shadow: 0 4px 12px rgba(var(--deep-rgb), .10); transform: translateY(-1px); } .caret { width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; } .dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px); min-width: 232px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: all .2s ease; } .nav-item.has-children:hover .dropdown, .nav-item.has-children:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .dropdown::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .dd-title { padding: 6px 12px 8px; color: var(--muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .dropdown a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); } .dropdown a:hover { background: var(--red-l); color: var(--red); } .nav-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .nav-cta__tel { color: var(--navy); border-color: var(--line-2); font-family: var(--font-num); } .nav-cta__tel:hover { border-color: var(--navy); } .burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-2); flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .burger span { display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px; } .mobile-nav { position: fixed; inset: 0; z-index: 80; background: #fff; display: flex; flex-direction: column; padding: 20px 22px 26px; transform: translateY(-8px); opacity: 0; transition: all .22s ease; } .mobile-nav.is-open { transform: translateY(0); opacity: 1; } .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .mobile-nav__title { font-weight: 700; color: var(--navy); } .mobile-nav__close { padding: 6px; color: var(--muted); } .mobile-nav__body { flex: 1; overflow-y: auto; padding-top: 8px; } .mobile-nav__body a { display: block; padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 700; color: var(--navy); } .mobile-nav__foot { display: grid; gap: 10px; padding-top: 18px; } .section { padding: 88px 0; } .section--soft { background: var(--bg-soft); } .section--navy { background: var(--navy); color: rgba(255, 255, 255, .82); } .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; } .section-head { max-width: 780px; margin-bottom: 44px; } .section-head h2 { font-size: 38px; margin: 12px 0 14px; } .section-head > p { color: var(--muted); font-size: 17px; line-height: 1.8; } .section-head--dark > p { color: rgba(255, 255, 255, .7); } .section-head--dark h2 { color: #fff; } .eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--red); font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .section--navy .eyebrow { color: var(--acc-tint); } .section > .container > h1 { font-size: 36px; margin-bottom: 12px; } .hero { position: relative; overflow: hidden; background: var(--navy); color: rgba(255, 255, 255, .86); padding: 74px 0 0; } .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; } .hero__scrim { position: absolute; inset: 0; background: radial-gradient(1100px 520px at 12% 24%, rgba(var(--deep-rgb), .82), transparent 62%), linear-gradient(160deg, rgba(var(--deep-rgb), .95) 0%, rgba(var(--deep-rgb), .88) 46%, rgba(var(--acc-rgb), .9) 100%); } .hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 56px; } .hero__tag { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em; } .hero__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px var(--dot-ring); } .hero__title { font-size: 54px; line-height: 1.16; color: #fff; margin: 20px 0 18px; letter-spacing: -.02em; } .hero__title .hl { position: relative; z-index: 1; color: #fff; } .hero__title .hl::after { content: ""; position: absolute; left: -.02em; right: -.02em; bottom: .06em; height: .34em; background: linear-gradient(90deg, rgba(var(--acc-rgb), .95), rgba(var(--acc-rgb), .4)); z-index: -1; border-radius: 3px; } .hero__lede { font-size: 17.5px; line-height: 1.85; color: rgba(255, 255, 255, .78); max-width: 620px; } .promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 30px; } .promise { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); } .promise__ic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: var(--acc-92); color: #fff; } .promise__tx { display: flex; flex-direction: column; min-width: 0; } .promise__tx strong { color: #fff; font-size: 15px; font-weight: 700; } .promise__tx em { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .64); line-height: 1.6; margin-top: 2px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero__tel { display: inline-flex; align-items: center; gap: 13px; margin-top: 26px; padding: 13px 20px 13px 15px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); } .hero__tel:hover { background: rgba(255, 255, 255, .13); } .hero__tel-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; animation: ring 2.6s ease-in-out infinite; } @keyframes ring { 0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb), .5); } 36% { box-shadow: 0 0 0 10px rgba(var(--acc-rgb), 0); } } .hero__tel em { display: block; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .6); } .hero__tel strong { display: block; font-family: var(--font-num); font-size: 25px; line-height: 1.15; color: #fff; letter-spacing: .02em; } .hero__tel i { display: block; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .55); margin-top: 2px; } .hero__tel--card { margin-top: 16px; padding: 13px 16px; background: var(--bg-soft); border: 1px solid var(--line); box-shadow: none; } .hero__tel--card:hover { background: #fff; border-color: var(--red); } .hero__tel--card em { color: var(--muted); } .hero__tel--card strong { color: var(--navy); font-size: 22px; } .hero__tel--card i { color: var(--muted-2); } .hero__tel--card .hero__tel-ic { background: var(--red); } .hero__card { background: rgba(255, 255, 255, .97); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .5); } .hero__card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hero__card-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; } .hero__card-badge { padding: 3px 10px; border-radius: 999px; background: var(--red-l); color: var(--green); font-size: 11.5px; font-weight: 800; } .hero__card-title { font-size: 22px; margin: 10px 0 16px; } .hero__creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hcred { text-align: left; padding: 13px 13px 11px; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); transition: all .18s ease; cursor: zoom-in; } .hcred:hover { border-color: var(--red); background: var(--red-l); transform: translateY(-2px); } .hcred strong { display: block; font-size: 19px; color: var(--navy); letter-spacing: .01em; } .hcred span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; word-break: break-all; } .hcred em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--red); margin-top: 7px; } .hero__card-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding-top: 15px; border-top: 1px dashed var(--line-2); font-size: 14.5px; font-weight: 700; color: var(--red); } .hero__facts { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-lg) var(--r-lg) 0 0; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-bottom: 0; } .fact { padding: 20px 22px; border-right: 1px solid rgba(255, 255, 255, .1); } .fact:last-child { border-right: 0; } .fact b { display: block; font-family: var(--font-num); font-size: 25px; color: #fff; letter-spacing: .01em; } .fact span { display: block; font-size: 13px; color: rgba(255, 255, 255, .62); margin-top: 3px; } .verify-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; margin-bottom: 40px; } .verify-card { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 18px 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .verify-card:hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: var(--shadow); } .verify-card__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: var(--navy); color: #fff; } .verify-card__tx { flex: 1; min-width: 0; } .verify-card__tx strong { display: block; font-size: 16px; color: var(--navy); font-weight: 800; } .verify-card__tx em { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.6; } .verify-card__go { color: var(--red); flex: 0 0 auto; } .cert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .cert { text-align: left; padding: 0; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .22s ease; width: 100%; } button.cert { cursor: zoom-in; } .cert:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); } .cert__thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-1) 100%); overflow: hidden; border-bottom: 1px solid var(--line); } .cert__thumb img { width: 100%; height: 100%; padding: 8px; object-fit: contain; object-position: center; transition: transform .4s ease; } .cert:hover .cert__thumb img { transform: scale(1.18); } .cert__zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--deep-rgb), .84); color: #fff; } .cert__hot { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; } .cert__body { display: block; padding: 15px 16px 17px; } .cert__abbr { display: block; font-size: 17px; color: var(--navy); } .cert__abbr i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); } .cert__no { display: block; font-family: var(--font-num); font-size: 13px; color: var(--ink-2); margin-top: 7px; } .cert__valid { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.6; } .cert__thumb--mark { display: grid; place-items: center; } .cert__mark { font-family: var(--font-num); font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: .04em; opacity: .5; } .reports { margin: 46px 0 0; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; } .reports__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); } .reports__label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--navy); } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1.8s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--acc-45); } 50% { opacity: .65; box-shadow: 0 0 0 6px var(--acc-0); } } .reports__note { font-size: 12.5px; color: var(--muted-2); } .marquee { overflow: hidden; padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee__track { display: flex; width: max-content; animation: slide 46s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; gap: 12px; padding-right: 12px; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } .rep { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 9px 15px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); } .rep b { font-family: var(--font-num); font-size: 13.5px; color: var(--navy); font-weight: 700; } .rep i { font-style: normal; font-size: 12px; color: var(--muted); } .rep em { font-style: normal; font-size: 12px; color: var(--red); font-weight: 700; } .lab-block { margin-top: 50px; } .lab-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .lab-block__head h3 { font-size: 24px; margin-bottom: 6px; } .lab-block__head p { color: var(--muted); font-size: 15px; } .lab-sound { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 9px 15px; border-radius: 999px; cursor: pointer; background: var(--bg-soft); border: 1px solid var(--line-2); color: var(--ink-2); font-family: inherit; font-size: 13px; font-weight: 700; transition: background .2s ease, border-color .2s ease, color .2s ease; } .lab-sound:hover { border-color: var(--red); color: var(--red); } .lab-sound .ic--sound { display: none; } .lab-sound.is-on { background: var(--red-l); border-color: var(--red); color: var(--red); } .lab-sound.is-on .ic--mute { display: none; } .lab-sound.is-on .ic--sound { display: inline-block; } .lab-grid { display: grid; grid-template-columns: repeat(var(--lab-cols, 5), minmax(0, 1fr)); gap: 14px; } .lab { position: relative; overflow: hidden; border-radius: var(--r); cursor: zoom-in; aspect-ratio: 4 / 3; background: var(--bg-soft-2); padding: 0; box-shadow: var(--shadow-sm); } .lab--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .lab img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .lab--wide img { position: absolute; inset: 0; } .lab--blank { visibility: hidden; pointer-events: none; box-shadow: none; background: transparent; cursor: default; } .lab:hover img { transform: scale(1.06); } .lab__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; } .lab:hover .lab__video, .lab.is-playing .lab__video { opacity: 1; } .lab--wide .lab__video { opacity: 1; } .lab .lab__cap { z-index: 2; } .lab__hint { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; transition: opacity .2s ease; } .lab:hover .lab__hint { opacity: 0; } .lab__badge { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; } .lab__play { position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--deep-rgb), .82); color: #fff; transition: opacity .2s ease; } .lab:hover .lab__play { opacity: 0; } .lab__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(to top, rgba(6, 24, 38, .9), transparent); text-align: left; } .lab__cap strong { display: block; color: #fff; font-size: 14.5px; } .lab__cap em { display: block; font-style: normal; color: rgba(255, 255, 255, .72); font-size: 12px; margin-top: 2px; } .lab-cta { margin-top: 18px; text-align: center; } .lab-pages { margin-top: 26px; } .lab-pages__tip { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 12px; } .pager.lab-pager { margin-top: 0; } .pager.lab-pager button.page-numbers { cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; } .pager.lab-pager button.page-numbers:hover { border-color: var(--red); color: var(--red); } .pager.lab-pager button.page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; } .pager.lab-pager button.page-numbers[disabled] { opacity: .38; cursor: default; } .pager.lab-pager button.page-numbers[disabled]:hover { border-color: var(--line-2); color: var(--ink-2); } .lab-pager__prev .ic { transform: rotate(180deg); } .section--clients { background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%); color: var(--ink); padding: 44px 0 40px; } .section--clients .container { position: relative; } .clients--dark { margin: 0; padding: 0; border: none; } .clients--dark .clients__head { text-align: center; margin: 0 auto 16px; max-width: 600px; } .clients--dark .clients__head h3 { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: .04em; margin-bottom: 6px; } .clients--dark .clients__head p { font-size: 12.5px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; } .client-showcase--dark { position: relative; margin: 0 auto; width: 100%; min-height: 340px; display: flex; align-items: center; justify-content: center; padding: 22px 0; border-radius: var(--r-lg); background: transparent; overflow: visible; } .client-showcase--dark::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(245, 247, 249, .88), rgba(245, 247, 249, .88)), url('images/bg-port.jpg') center / cover no-repeat; background: linear-gradient(rgba(245, 247, 249, .88), rgba(245, 247, 249, .88)), image-set( url('images/bg-port.webp') type('image/webp'), url('images/bg-port.jpg') type('image/jpeg') ) center / cover no-repeat; border-radius: var(--r-lg); opacity: .28; filter: grayscale(100%) contrast(90%) brightness(105%); pointer-events: none; z-index: 0; } .client-showcase__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; max-width: 1080px; margin: 0 auto; gap: 10px; } .client-cell { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 14px; overflow: visible; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 22px -10px rgba(20, 30, 45, .45), 0 3px 6px -2px rgba(20, 30, 45, .12), inset 0 1px 0 rgba(255, 255, 255, .95); transition: transform .22s ease, box-shadow .22s ease; } .client-cell:hover { transform: translateY(-5px); box-shadow: 0 18px 34px -14px rgba(20, 30, 45, .55), 0 5px 10px -3px rgba(20, 30, 45, .16), inset 0 1px 0 rgba(255, 255, 255, .95); z-index: 2; } .client-cell--light { background: linear-gradient(145deg, #ffffff 0%, #f3f5f7 100%); } .client-cell--dark { background: linear-gradient(145deg, #ffffff 0%, #eef1f4 100%); background: linear-gradient(145deg, #ffffff 0%, color-mix(in srgb, var(--primary) 12%, #ffffff) 100%); } .client-cell__img { display: block; position: relative; max-width: 88%; max-height: 82%; width: auto; height: auto; object-fit: contain; filter: none; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); transform-origin: center; } .client-cell:hover .client-cell__img { transform: scale(3); z-index: 10; } .client-cell__name { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--navy); text-align: center; padding: 0 8px; word-break: break-word; position: relative; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); transform-origin: center; } .client-cell:hover .client-cell__name { transform: scale(2); z-index: 10; } .clients--dark .clients__note { margin: 16px auto 0; max-width: 640px; font-size: 12.5px; color: var(--muted); text-align: center; } .client-pager { display: flex; gap: 7px; justify-content: center; align-items: center; margin-top: 16px; position: relative; z-index: 1; } .client-pager__dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--line-2); cursor: pointer; transition: all .25s ease; } .client-pager__dot:hover { background: var(--muted); } .client-pager__dot.is-active { background: var(--navy); width: 20px; border-radius: 4px; } @media (max-width: 1180px) { .client-showcase--dark { min-height: 300px; padding: 20px 0; } .client-showcase__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .client-cell__name { font-size: 15px; } } @media (max-width: 768px) { .section--clients { padding: 36px 0 32px; } .clients--dark .clients__head h3 { font-size: 22px; } .client-showcase--dark { min-height: 280px; padding: 18px 0; border-radius: var(--r); } .client-showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .client-cell__name { font-size: 14px; } } @media (max-width: 480px) { .section--clients { padding: 32px 0 28px; } .client-showcase--dark { min-height: 240px; padding: 16px 0; } .client-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .client-cell__name { font-size: 12px; } } .plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .plan { position: relative; height: 330px; transition: transform .3s ease; } .plan:hover, .plan:focus-within { z-index: 30; transform: translateY(-4px); } .plan__card { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, border-color .3s ease, opacity .18s ease; } .plan:hover .plan__card, .plan:focus-within .plan__card { opacity: 0; box-shadow: 0 18px 40px rgba(16, 38, 58, .18); border-color: var(--line-2); } .plan--hot .plan__card { border-color: var(--acc-30); } .plan__pic { position: relative; flex: none; height: 176px; overflow: hidden; background: var(--bg-soft-2); } .plan__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; } .plan:hover .plan__pic img, .plan:focus-within .plan__pic img { transform: scale(1.06); } .plan__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 38, 58, .3) 0%, rgba(16, 38, 58, 0) 45%, rgba(16, 38, 58, .2) 100%); } .plan__ic { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--red); color: #fff; border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 6px 16px rgba(255, 102, 0, .3); } .plan__flag { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--red); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .plan__body { flex: 1; display: flex; flex-direction: column; padding: 15px 18px 17px; } .plan__head h3 { font-size: 18.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .plan__head em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .12em; color: var(--muted-2); margin-top: 4px; font-family: var(--font-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plan__tagline { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .plan__more { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--red); letter-spacing: .02em; transition: opacity .22s ease; } .plan__more i { font-style: normal; transition: transform .28s ease; } .plan__more-t { display: none; } .plan:hover .plan__more i, .plan:focus-within .plan__more i { transform: translateX(4px); } .plan:hover .plan__more, .plan:focus-within .plan__more { opacity: 0; } .plan__detail { position: absolute; left: 0; top: 0; z-index: 3; width: calc(200% + 18px); height: auto; min-height: 100%; max-height: calc(100vh - 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 17px 19px 19px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 28px 56px rgba(16, 38, 58, .22); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .26s ease, transform .26s ease, visibility .26s ease; } .plan:hover .plan__detail, .plan:focus-within .plan__detail { opacity: 1; visibility: visible; transform: translateY(0); } .plan__dcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .plan__dcol + .plan__dcol { padding-left: 19px; border-left: 1px solid var(--line); } .plan__detail .plan__items li, .plan__detail .std { padding: 3px 9px; font-size: 12px; line-height: 1.4; } .plan__pain { display: block; padding: 11px 13px; border-radius: var(--r); background: var(--red-l); border-left: 3px solid var(--red); } .plan__pain strong { display: block; font-size: 11.5px; color: var(--red); letter-spacing: .06em; margin-bottom: 3px; } .plan__pain span { font-size: 13px; color: var(--ink-2); line-height: 1.6; } .plan__block h4 { font-size: 11.5px; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; } .plan__items { display: flex; flex-wrap: wrap; gap: 6px; } .plan__items li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); font-weight: 600; } .plan__items .ic { color: var(--green); } .plan__stds { display: flex; flex-wrap: wrap; gap: 5px; } .std { padding: 4px 9px; border-radius: 7px; background: var(--bg-soft); border: 1px dashed var(--line-2); font-family: var(--font-num); font-size: 12px; color: var(--navy); font-weight: 600; } .plan__cycle { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: var(--r); background: var(--bg-soft); font-size: 13px; font-weight: 700; color: var(--navy); } .plan__cycle .ic { color: var(--red); } .plan__actions { display: grid; gap: 9px; margin-top: auto; } .plan__link { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; } .plan__link:hover { color: var(--red); } @media (hover: none), (max-width: 768px) { .plan { height: auto; } .plan__card { position: static; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom-color: transparent; } .plan__pic { height: 168px; } .plan__detail { position: static; width: auto; height: auto; min-height: 0; max-height: none; display: none; grid-template-columns: minmax(0, 1fr); margin-top: -1px; padding: 18px 20px 20px; opacity: 1; visibility: visible; transform: none; overflow: visible; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-sm); border-color: var(--line); } .plan--open .plan__detail { display: grid; } .plan__dcol + .plan__dcol { padding-left: 0; border-left: 0; } .plan__actions { margin-top: 0; } .plan--open .plan__card { border-bottom-color: transparent; } .plan__more-t { display: inline; } .plan__more-h { display: none; } .plan:hover .plan__more, .plan:focus-within .plan__more { opacity: 1; } .plan--open .plan__more i { transform: rotate(-90deg); } .plan:hover { transform: none; } .plan:hover .plan__card { opacity: 1; box-shadow: var(--shadow-sm); } .plan:hover .plan__detail { box-shadow: var(--shadow-sm); } } .more-fields { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); } .more-fields__label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 13px; font-weight: 600; } .more-fields__chips { display: flex; flex-wrap: wrap; gap: 9px; } .field-chip { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; color: var(--ink-2); transition: all .18s ease; } .field-chip:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-2px); } .case-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; } .case-filter { padding: 9px 17px; border-radius: 999px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: all .18s ease; } .case-filter:hover { background: rgba(255, 255, 255, .15); color: #fff; } .case-filter.is-active { background: var(--red); border-color: var(--red); color: #fff; } .case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .case { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(255, 255, 255, .1); transition: all .26s ease; } .case.is-hidden { display: none; } .case:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .case-grid--show { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .case-grid--show .case { position: relative; display: block; height: 330px; overflow: visible; background: none; border: 0; border-radius: 0; transition: transform .3s ease; } .case-grid--show .case:hover, .case-grid--show .case:focus-within { z-index: 30; transform: translateY(-4px); box-shadow: none; } .case-grid--show .case.is-hidden { display: none; } .case__card { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, border-color .3s ease, opacity .18s ease; } .case-grid--show .case:hover .case__card, .case-grid--show .case:focus-within .case__card { opacity: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .32); border-color: var(--line-2); } .case__thumb { position: relative; display: block; flex: none; width: 100%; height: 176px; aspect-ratio: auto; overflow: hidden; padding: 0; cursor: zoom-in; background: var(--bg-soft-2); } .case__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; } .case-grid--show .case:hover .case__thumb img, .case-grid--show .case:focus-within .case__thumb img { transform: scale(1.06); } .case__cat { position: absolute; left: 12px; top: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(var(--deep-rgb), .9); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .case__zoom { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--deep-rgb), .88); color: #fff; } .case__body { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 15px 18px 17px; color: var(--ink); } .case__body h3 { font-size: 16.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .case__sub { display: flex; align-items: flex-start; gap: 5px; margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.6; } .case__sub .ic { flex: none; margin-top: 2px; color: var(--muted-2); } .case__hint { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--red); letter-spacing: .02em; transition: opacity .22s ease; } .case__hint i { font-style: normal; transition: transform .28s ease; } .case__hint-t { display: none; } .case-grid--show .case:hover .case__hint i, .case-grid--show .case:focus-within .case__hint i { transform: translateX(4px); } .case-grid--show .case:hover .case__hint, .case-grid--show .case:focus-within .case__hint { opacity: 0; } .case__detail { position: absolute; left: 0; top: 0; z-index: 3; width: calc(200% + 18px); height: auto; min-height: 100%; max-height: calc(100vh - 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 17px 19px 19px; background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 28px 56px rgba(16, 38, 58, .32); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .26s ease, transform .26s ease, visibility .26s ease; } .case-grid--show .case:hover .case__detail, .case-grid--show .case:focus-within .case__detail { opacity: 1; visibility: visible; transform: translateY(0); } .case__dcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .case__dcol + .case__dcol { padding-left: 19px; border-left: 1px solid var(--line); } .case__detail .case__dmethods li { padding: 3px 9px; font-size: 12px; line-height: 1.4; } .case__dblock h4 { font-size: 11px; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; } .case__need { padding: 11px 13px; border-radius: var(--r); background: var(--red-l); border-left: 3px solid var(--red); } .case__need strong { display: block; font-size: 11.5px; color: var(--red); letter-spacing: .06em; margin-bottom: 3px; } .case__need span { font-size: 13px; color: var(--ink-2); line-height: 1.6; } .case__dmethods { display: flex; flex-wrap: wrap; gap: 6px; } .case__dmethods li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); font-weight: 600; } .case__dmethods .ic { color: var(--green); } .case__dcycle { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: var(--r); background: var(--bg-soft); font-size: 13px; font-weight: 700; color: var(--navy); } .case__dcycle .ic { color: var(--red); } .case__dsum { font-size: 13px; color: var(--ink-2); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .case__dres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .case__dres .cres { padding: 11px 13px; } .case__dres .cres b { font-size: 19px; } .case__dact { display: grid; gap: 9px; margin-top: auto; } .case__dl { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .case__dl:hover { color: var(--red); } .case__dl .ic { color: var(--muted-2); } @media (hover: none), (max-width: 768px) { .case-grid--show .case { height: auto; } .case-grid--show .case:hover, .case-grid--show .case:focus-within { transform: none; } .case__card { position: static; border-radius: var(--r-lg) var(--r-lg) 0 0; } .case__detail { position: static; width: auto; height: auto; min-height: 0; max-height: none; display: none; grid-template-columns: minmax(0, 1fr); margin-top: -1px; padding: 18px 20px 20px; opacity: 1; visibility: visible; transform: none; overflow: visible; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-sm); border-color: var(--line); } .case--open .case__detail { display: grid; } .case__dcol + .case__dcol { padding-left: 0; border-left: 0; } .case__dact { margin-top: 0; } .case__hint-t { display: inline; } .case__hint-h { display: none; } .case-grid--show .case:hover .case__hint, .case-grid--show .case:focus-within .case__hint { opacity: 1; } .case--open .case__hint i { transform: rotate(-90deg); } .case-grid--show .case:hover .case__card, .case-grid--show .case:focus-within .case__card { opacity: 1; box-shadow: var(--shadow-sm); } } .case__meta { display: grid; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .case__meta > div { display: grid; grid-template-columns: 66px 1fr; gap: 10px; } .case__meta dt { font-size: 12.5px; color: var(--muted-2); font-weight: 700; } .case__meta dd { font-size: 14px; color: var(--ink-2); line-height: 1.6; } .case__cycle { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--navy); } .case__cycle .ic { color: var(--red); } .case__summary { margin: 14px 0 16px; font-size: 14px; color: var(--muted); line-height: 1.75; } .case__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .cres { padding: 12px 14px; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); } .cres b { display: block; font-family: var(--font-num); font-size: 22px; color: var(--red); letter-spacing: .01em; } .cres span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .case__quote { margin-top: auto; padding: 14px 16px; border-radius: var(--r); background: var(--bg-soft); border-left: 3px solid var(--gold); } .case__quote .ic { color: var(--gold); margin-bottom: 6px; } .case__quote p { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; } .case__quote cite { display: block; font-style: normal; font-size: 12.5px; color: var(--muted-2); margin-top: 7px; } .cases-cta { margin-top: 34px; text-align: center; } .apply-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; } .apply-copy h2 { font-size: 36px; margin: 14px 0 18px; line-height: 1.25; } .apply-copy__desc { color: var(--muted); font-size: 16.5px; line-height: 1.85; margin-bottom: 32px; } .steps { display: grid; } .steps li { display: flex; gap: 15px; padding-bottom: 22px; position: relative; } .steps li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 1.5px; background: var(--line-2); } .steps li:last-child::before { display: none; } .steps__n { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 14px; font-weight: 800; position: relative; z-index: 1; } .steps__t strong { display: block; font-size: 15.5px; color: var(--navy); font-weight: 700; line-height: 1.4; } .steps__t em { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; } .steps__branch { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--line-2); } .steps__branch:last-child { border-bottom: 0; } .steps__branch b { display: inline-grid; place-items: center; min-width: 44px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; } .apply-quick { display: grid; gap: 12px; margin-top: 12px; } .apply-quick__tel, .apply-quick__calc { display: flex; align-items: center; gap: 13px; text-align: left; padding: 15px 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .apply-quick__tel .ic, .apply-quick__calc .ic { color: var(--red); flex: 0 0 auto; } .apply-quick__tel em, .apply-quick__calc em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); } .apply-quick__tel strong { display: block; font-family: var(--font-num); font-size: 21px; color: var(--navy); } .apply-quick__calc strong { display: block; font-size: 15px; color: var(--navy); } .apply-quick__tel:hover, .apply-quick__calc:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow); } .apply-form { position: relative; background: #fff; border-radius: var(--r-lg); padding: 30px; border: 1px solid var(--line); box-shadow: var(--shadow); } .apply-form__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 5px; border-radius: var(--r); background: var(--bg-soft); margin-bottom: 24px; } .apply-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 9px; font-size: 14.5px; font-weight: 700; color: var(--muted); transition: all .18s ease; } .apply-tab.is-active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); } .tmc-form { display: grid; gap: 18px; } .form-row { display: grid; gap: 8px; } .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .form-row--2 > div { display: grid; gap: 8px; } .form-row label { font-size: 13.5px; font-weight: 700; color: var(--ink-2); } .req { color: var(--red); } .opt { color: var(--muted-2); font-weight: 500; } .tmc-form input[type="text"], .tmc-form input[type="tel"], .tmc-form input[type="date"], .tmc-form textarea { width: 100%; padding: 14px 16px; border-radius: 11px; background: var(--bg-soft); border: 1.5px solid var(--line); font-size: 15px; color: var(--ink); transition: all .18s ease; } .tmc-form textarea { resize: vertical; min-height: 92px; line-height: 1.7; } .tmc-form input:focus, .tmc-form textarea:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px rgba(var(--deep-rgb), .07); } .tmc-form input.has-error, .tmc-form textarea.has-error { border-color: var(--red); background: var(--red-l); } .form-err { font-size: 12.5px; color: var(--red); font-weight: 600; } .form-err:empty { display: none; } .form-hint { font-size: 12.5px; color: var(--muted-2); line-height: 1.6; } .form-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-2); text-align: center; } .form-privacy .ic { color: var(--green); } .form-kw { color: var(--red); font-weight: 700; } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .form-done { text-align: center; padding: 26px 10px 12px; } .form-done__ic { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--red-l); color: var(--green); margin-bottom: 16px; } .form-done h3 { font-size: 23px; margin-bottom: 8px; } .form-done p { color: var(--muted); font-size: 15px; margin-bottom: 22px; } .form-done__acts { display: grid; gap: 10px; } .insight-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; } .insight-tab { position: relative; text-align: left; padding: 20px 22px; border-radius: var(--r-lg); background: #fff; border: 1.5px solid var(--line); transition: all .2s ease; } .insight-tab:hover { border-color: var(--line-2); transform: translateY(-2px); } .insight-tab.is-active { border-color: var(--navy); box-shadow: var(--shadow); } .insight-tab__cn { display: block; font-size: 19px; font-weight: 800; color: var(--navy); } .insight-tab__en { display: block; font-size: 11px; letter-spacing: .14em; color: var(--muted-2); margin-top: 4px; } .insight-tab__n { position: absolute; top: 20px; right: 22px; font-style: normal; font-family: var(--font-num); font-size: 13px; color: var(--muted-2); } .insight-tab.is-active .insight-tab__n { color: var(--red); font-weight: 800; } .insight-panel { display: none; } .insight-panel.is-active { display: block; animation: fadeUp .32s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .insight-list { display: grid; gap: 12px; } .insight { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: all .2s ease; } .insight:hover { border-color: var(--line-2); box-shadow: var(--shadow); } .insight__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .insight__tag { padding: 3px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700; } .insight__meta { font-size: 12.5px; color: var(--muted-2); } .insight__main h3 { font-size: 18.5px; margin-bottom: 7px; } .insight__main p { font-size: 14px; color: var(--muted); line-height: 1.75; } .insight__go { flex: 0 0 auto; padding: 11px 18px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; transition: all .18s ease; } .insight__go:hover { background: var(--red); border-color: var(--red); color: #fff; } .insight-foot { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; padding: 22px; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px dashed var(--line-2); } .insight-foot p { font-size: 15.5px; font-weight: 700; color: var(--navy); } .dock { position: fixed; right: 18px; top: 50%; transform: translateY(-50%) translateX(140%); z-index: 45; transition: transform .3s cubic-bezier(.2, .8, .3, 1); } .dock.is-visible { transform: translateY(-50%) translateX(0); } .dock__in { display: grid; gap: 8px; } .dock__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 76px; padding: 12px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: all .2s ease; } .dock__btn:hover { transform: translateX(-4px); border-color: var(--navy); } .dock__ic { color: var(--navy); display: grid; place-items: center; } .dock__btn--red { background: var(--red); border-color: var(--red); } .dock__btn--red .dock__ic, .dock__btn--red .dock__tx { color: #fff; } .dock__btn--red:hover { border-color: var(--red-d); } .dock__tx { font-size: 12.5px; font-weight: 800; color: var(--navy); line-height: 1.2; text-align: center; } .dock__tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(8px); padding: 9px 13px; border-radius: 9px; background: var(--navy); color: #fff; font-size: 12.5px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: all .2s ease; } .dock__btn:hover .dock__tip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } .dock__btn--top { background: var(--bg-soft); opacity: 0; visibility: hidden; } .dock__btn--top.is-visible { opacity: 1; visibility: visible; } .mobile-bar { display: none; } .kf { position: fixed; right: 22px; bottom: 22px; z-index: 65; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; pointer-events: none; } .kf > * { pointer-events: auto; } .kf__launcher { position: relative; display: flex; align-items: center; gap: 9px; padding: 11px 17px 11px 14px; border-radius: 999px; background: var(--red); color: #fff; border: 1px solid var(--red); box-shadow: 0 10px 26px rgba(200, 30, 30, .3); font-size: 14px; font-weight: 800; letter-spacing: .01em; transform: translateY(12px) scale(.9); opacity: 0; transition: transform .32s cubic-bezier(.2, .8, .3, 1), opacity .28s ease, box-shadow .2s ease; } .kf--in .kf__launcher { transform: none; opacity: 1; } .kf__launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(200, 30, 30, .42); } .kf__launcher-ic { display: grid; place-items: center; } .kf__launcher-dot { position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: kfPulse 2.2s ease-out 3; } @keyframes kfPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); } 70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .kf__panel { position: relative; width: 336px; max-width: calc(100vw - 44px); max-height: calc(100vh - 150px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); transform: translateY(14px) scale(.96); transform-origin: 100% 100%; opacity: 0; visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .24s ease, visibility .24s; } .kf--open .kf__panel { transform: none; opacity: 1; visibility: visible; } .kf__head { display: flex; align-items: center; gap: 11px; padding: 14px 14px 14px 16px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(135deg, var(--navy) 0%, #19384f 100%); color: #fff; } .kf__ava { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); } .kf__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kf__who strong { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; } .kf__who em { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-style: normal; color: rgba(255, 255, 255, .74); } .kf__live { width: 6px; height: 6px; border-radius: 50%; background: #48d18a; } .kf__x { margin-left: auto; flex: none; padding: 6px; border-radius: 8px; color: rgba(255, 255, 255, .7); transition: all .18s ease; } .kf__x:hover { background: rgba(255, 255, 255, .14); color: #fff; } .kf__body { padding: 15px; display: grid; gap: 12px; } .kf__hello { font-size: 13.5px; line-height: 1.68; color: var(--ink-2); } .kf__chips { display: flex; flex-wrap: wrap; gap: 7px; } .kf__chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--navy); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: left; transition: all .18s ease; } .kf__chip:hover { border-color: var(--red); background: #fff; color: var(--red); } .kf__qrbox { display: grid; justify-items: center; gap: 8px; padding: 13px 13px 12px; border-radius: 14px; background: var(--bg-soft); border: 1px dashed var(--line); } .kf__qr, .kf__qrph { width: 118px; height: 118px; border-radius: 10px; background: #fff; border: 1px solid var(--line); } .kf__qr { object-fit: contain; display: block; } .kf__qrph { display: grid; place-items: center; gap: 5px; padding: 10px; text-align: center; } .kf__qrph-ic { color: var(--muted); } .kf__qrph strong { font-size: 12.5px; font-weight: 700; color: var(--navy); } .kf__qrph-tx { font-size: 11px; line-height: 1.55; color: var(--muted-2); } .kf__qrtip { font-size: 12.5px; font-weight: 700; color: var(--navy); } .kf__go { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--red); } .kf__go:hover { text-decoration: underline; } .kf__foot { padding: 0 16px 15px; display: grid; gap: 10px; } .kf__tel { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--navy); } .kf__tel:hover { color: var(--red); } .kf__never { justify-self: center; font-family: inherit; font-size: 11.5px; color: var(--muted-2); text-decoration: underline; } .kf__never:hover { color: var(--muted); } .dock { transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .22s ease, visibility .22s; } body.kf-open .dock { opacity: 0; visibility: hidden; pointer-events: none; } @media (max-width: 1024px) { .kf { right: 14px; bottom: 74px; } .kf__panel { max-height: calc(100vh - 210px); } } @media (max-width: 768px) { .kf { left: 14px; right: 14px; align-items: stretch; } .kf__launcher { align-self: flex-end; padding: 10px 15px 10px 12px; font-size: 13.5px; } .kf__panel { width: auto; max-width: none; } .kf__body { padding: 14px; gap: 12px; } .kf__foot { padding: 0 14px 14px; } .kf__qr, .kf__qrph { width: 124px; height: 124px; } } .tmc-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; } .tmc-modal__mask { position: absolute; inset: 0; border: 0; padding: 0; width: 100%; background: rgba(6, 24, 38, .62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .24s ease; } .tmc-modal.is-open .tmc-modal__mask { opacity: 1; } .tmc-modal__panel { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-lg); transform: translateY(16px) scale(.98); opacity: 0; transition: all .26s cubic-bezier(.2, .8, .3, 1); } .tmc-modal.is-open .tmc-modal__panel { transform: none; opacity: 1; } .tmc-modal__panel--wide { max-width: 880px; } .tmc-modal__panel--sm { max-width: 440px; } .tmc-modal__panel--md { max-width: 620px; } .tmc-modal__x { position: absolute; right: 16px; top: 16px; padding: 7px; border-radius: 9px; color: var(--muted); transition: all .18s ease; } .tmc-modal__x:hover { background: var(--bg-soft); color: var(--navy); } .tmc-modal__head { margin-bottom: 22px; padding-right: 30px; } .tmc-modal__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; } .tmc-modal__head h2 { font-size: 25px; margin: 10px 0 8px; } .tmc-modal__head p { font-size: 14.5px; color: var(--muted); line-height: 1.75; } .tmc-form--modal { gap: 15px; } .quoter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 26px; } .quoter__field { margin-bottom: 16px; } .quoter__field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; } .quoter__field select { width: 100%; padding: 13px 15px; border-radius: 10px; background: var(--bg-soft); border: 1.5px solid var(--line); font-size: 15px; color: var(--ink); appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B7B' stroke-width='2.2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; } .quoter__field select:focus { outline: none; border-color: var(--navy); background-color: #fff; } .quoter__result { padding: 24px; border-radius: var(--r-lg); background: var(--navy); text-align: center; } .quoter__label { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .6); letter-spacing: .08em; } .quoter__amount { margin: 10px 0 16px; font-family: var(--font-num); font-size: 30px; font-weight: 800; color: #fff; letter-spacing: .01em; } .quoter__note { font-size: 12.5px; color: rgba(255, 255, 255, .6); line-height: 1.7; margin-bottom: 18px; text-align: left; } .quoter__result .btn { margin-bottom: 9px; } .quoter__result .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); } .quoter__result .btn--outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; } .quoter { align-items: start; } .quoter__tabs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .quoter__tab { padding: 12px 15px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg-soft); text-align: left; cursor: pointer; transition: all .18s ease; } .quoter__tab strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink-2); } .quoter__tab em { display: block; font-style: normal; font-size: 12px; color: var(--muted-2); margin-top: 3px; line-height: 1.5; } .quoter__tab:hover { border-color: var(--line-2); } .quoter__tab.is-active { border-color: var(--navy); background: #fff; box-shadow: var(--shadow-sm); } .quoter__tab.is-active strong { color: var(--navy); } .quoter__pane { grid-column: 1; grid-row: 2; min-width: 0; } .quoter__pane[hidden] { display: none; } .quoter__bar { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 10px; margin-bottom: 12px; } .quoter__search { position: relative; min-width: 0; } .quoter__search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; } .quoter__search input { width: 100%; padding: 11px 12px 11px 36px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg-soft); font-size: 14px; color: var(--ink); } .quoter__search input:focus { outline: none; border-color: var(--navy); background: #fff; } .quoter__hours label { display: block; font-size: 11.5px; color: var(--muted-2); margin-bottom: 5px; line-height: 1.4; } .quoter__hours select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg-soft); font-size: 13.5px; color: var(--ink); } .quoter__hours select:focus { outline: none; border-color: var(--navy); background: #fff; } .quoter__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .qchip { padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: all .16s ease; } .qchip em { font-style: normal; color: var(--muted-2); font-size: 11.5px; margin-left: 2px; } .qchip:hover { border-color: var(--line-2); } .qchip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } .qchip.is-active em { color: rgba(255, 255, 255, .72); } .quoter__list { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .qsub { border-bottom: 1px solid var(--line); } .qsub:last-child { border-bottom: 0; } .qsub__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-soft); } .qsub__hd strong { color: var(--navy); font-size: 13.5px; font-weight: 700; } .qsub__hd em { font-style: normal; color: var(--muted-2); font-size: 11.5px; flex: 0 0 auto; } .qsub__bd { padding: 4px 0; } .qitem-wrap.is-hide { display: none; } .qsub__more { display: block; width: 100%; padding: 9px; border: 0; border-top: 1px dashed var(--line); background: transparent; color: var(--red); font-size: 12.5px; cursor: pointer; } .qsub__more:hover { background: var(--bg-soft); } .qitem { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 9px 14px; cursor: pointer; } .qitem:hover { background: var(--bg-soft); } .qitem.is-on { background: var(--bg-soft); } .qitem.is-on .qitem__n { color: var(--navy); font-weight: 700; } .qitem.is-on .qitem__p { color: var(--green); } .qitem input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--green); } .qitem__n { font-size: 14px; color: var(--ink); line-height: 1.45; } .qitem__m { grid-column: 2; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; } .qitem__p { grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--navy); } .quoter__empty { padding: 26px 16px; text-align: center; color: var(--muted-2); font-size: 13.5px; } .quoter__hint { margin-top: 9px; font-size: 12px; color: var(--muted-2); line-height: 1.7; } .quoter__side { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 0; min-width: 0; } .quoter__rush { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 12px; } .quoter__rush label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; } .quoter__rush select { padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg-soft); font-size: 13.5px; color: var(--ink); } .quoter__result { text-align: left; } .quoter__amount { margin: 8px 0 10px; } .quoter__meta { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; } .quoter__detail { margin-bottom: 14px; border-top: 1px solid var(--surface-line); padding-top: 10px; } .quoter__detail summary { font-size: 12.5px; color: var(--navy); cursor: pointer; } .quoter__detail summary span { color: var(--muted-2); } .quoter__detail ul { margin: 10px 0 0; max-height: 168px; overflow-y: auto; display: grid; gap: 6px; } .quoter__detail li { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); } .quoter__detail li b { font-family: var(--font-num); color: var(--ink-2); font-weight: 700; white-space: nowrap; } .quoter__actions { display: grid; gap: 9px; } .quoter__result .btn { margin-bottom: 0; } .quoter__result .quoter__note { margin: 14px 0 0; } @media (max-width: 900px) { .quoter { grid-template-columns: minmax(0, 1fr); } .quoter__tabs { grid-column: 1; } .quoter__pane, .quoter__side { grid-column: 1; grid-row: auto; position: static; } .quoter__bar { grid-template-columns: minmax(0, 1fr); } .quoter__list { max-height: 320px; } } @media (max-width: 520px) { .quoter__tabs { grid-template-columns: 1fr; } .quoter__rush { grid-template-columns: 1fr; } .qitem { grid-template-columns: 18px minmax(0, 1fr); } .qitem__m, .qitem__p { grid-column: 2; grid-row: auto; } .qitem__p { justify-self: start; } } .verify-steps { display: grid; gap: 14px; margin-bottom: 22px; } .verify-steps li { padding: 16px 18px; border-radius: var(--r); background: var(--bg-soft); border-left: 3px solid var(--red); } .verify-steps strong { display: block; font-size: 15px; color: var(--navy); margin-bottom: 4px; } .verify-steps span { font-size: 14px; color: var(--muted); line-height: 1.75; } .verify-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .wechat-box { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; } .wechat-box__qr { aspect-ratio: 1; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .wechat-box__qr img { width: 100%; height: 100%; object-fit: contain; } .wechat-box__ph { display: grid; place-items: center; gap: 8px; color: var(--muted-2); } .wechat-box__ph em { font-style: normal; font-size: 11.5px; text-align: center; line-height: 1.5; } .wechat-box__alt { display: grid; gap: 9px; } .wechat-box__alt p { font-size: 14px; color: var(--muted); } .wechat-nest { display: grid; gap: 18px; } .wechat-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .wechat-card { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-1); } .wechat-card__qr { width: 100%; aspect-ratio: 1; max-width: 200px; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .wechat-card__qr img { width: 100%; height: 100%; object-fit: contain; } .wechat-card__t { font-size: 14.5px; font-weight: 800; color: var(--navy); line-height: 1.3; } .wechat-card__d { font-size: 12px; color: var(--muted); line-height: 1.65; } .wechat-card__qr .ic { color: var(--navy); opacity: .38; } .wechat-card__qr .wechat-box__ph { width: 100%; height: 100%; } .lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 4vh 4vw; } .lightbox__mask { position: absolute; inset: 0; border: 0; padding: 0; width: 100%; background: rgba(4, 16, 26, .9); opacity: 0; transition: opacity .24s ease; cursor: zoom-out; } .lightbox.is-open .lightbox__mask { opacity: 1; } .lightbox__in { position: relative; z-index: 1; max-width: 1080px; width: 100%; } .lightbox__x { position: absolute; right: -6px; top: -50px; padding: 9px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; } .lightbox__x:hover { background: rgba(255, 255, 255, .22); } .lightbox__figure { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transform: scale(.96); opacity: 0; transition: all .28s cubic-bezier(.2, .8, .3, 1); max-height: calc(100vh - 12vh); display: flex; flex-direction: column; } .lightbox.is-open .lightbox__figure { transform: none; opacity: 1; } .lightbox__figure img { flex: 0 1 auto; min-height: 0; width: 100%; height: auto; max-height: calc(100vh - 24vh); object-fit: contain; background: var(--bg-soft); } .lightbox__video { flex: 0 1 auto; min-height: 0; display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: calc(100vh - 24vh); background: #000; } .lightbox.is-video .lightbox__in { width: fit-content; max-width: min(1080px, 92vw); } .lightbox__figure figcaption { flex: 0 0 auto; padding: 16px 22px; border-top: 1px solid var(--line); } .lightbox__figure figcaption strong { display: block; font-size: 16.5px; color: var(--navy); } .lightbox__figure figcaption span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; } .lightbox__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--red); } .site-footer { background: var(--navy); color: rgba(255, 255, 255, .72); padding: 62px 0 26px; } .foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 34px; } .foot-logo { height: 40px; margin-bottom: 16px; } .foot-brand p { font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, .62); } .foot-contact { display: grid; gap: 10px; margin-top: 16px; } .foot-tel, .foot-mail { display: inline-flex; align-items: center; gap: 11px; } .foot-tel .ic, .foot-mail .ic { color: var(--red); } .foot-tel em, .foot-mail em { display: block; font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .55); } .foot-tel strong { display: block; font-family: var(--font-num); font-size: 22px; color: #fff; } .foot-mail strong { display: block; font-family: var(--font-num); font-size: 15px; color: #fff; } .foot-tel:hover strong, .foot-mail:hover strong { color: #fff; } .foot-col h3 { font-size: 13.5px; color: #fff; letter-spacing: .06em; margin-bottom: 15px; } .foot-col ul { display: grid; gap: 10px; } .foot-col a, .foot-col li { font-size: 13.5px; color: rgba(255, 255, 255, .66); } .foot-col a:hover { color: #fff; } .foot-top--ind2 { grid-template-columns: 1.5fr 1.9fr 1fr 1fr 1.3fr; } .foot-col--ind2 ul { grid-template-columns: 1fr 1fr; gap: 10px 22px; } @media (max-width: 1180px) { .foot-col--ind2 ul { grid-template-columns: 1fr; } } .foot-base { margin-bottom: 8px; padding: 10px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); } .foot-base strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: #fff; } .foot-base strong i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; } .foot-base--branch strong i { background: var(--gold); color: var(--navy); } .foot-base span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .7); line-height: 1.6; margin-top: 3px; } .foot-base em { display: block; font-style: normal; font-size: 11.5px; color: var(--gold); margin-top: 4px; } .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; color: rgba(255, 255, 255, .5); } .foot-bottom__mid { color: rgba(255, 255, 255, .42); } .foot-bottom a { color: rgba(255, 255, 255, .6); } .foot-bottom a:hover { color: #fff; } .scope-note { margin: 16px 0 0; max-width: 46em; font-size: 12.5px; line-height: 1.85; color: var(--muted-2); } .scope-note--foot { margin-top: 20px; max-width: 46em; } .scope-note--creds { margin-top: 22px; max-width: 46em; } .foot-impartiality { margin-top: 46px; padding: 26px 28px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .78); } .foot-impartiality h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14.5px; color: #fff; font-weight: 600; } .foot-impartiality h3 svg { flex: 0 0 16px; } .foot-impartiality p { margin: 0 0 14px; max-width: 46em; } .foot-impartiality ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .foot-impartiality li { padding-left: 14px; position: relative; } .foot-impartiality li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .foot-impartiality li b { color: #fff; font-weight: 600; } @media (max-width: 1024px) { .foot-impartiality ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .foot-impartiality { margin-top: 34px; padding: 20px 22px; } .foot-impartiality ul { grid-template-columns: 1fr; gap: 10px; } } .breadcrumb { font-size: 13px; color: var(--muted-2); padding: 20px 0 0; } .breadcrumb a { color: var(--muted); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); transition: all .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card h3 { font-size: 19px; margin-bottom: 8px; } .card p { color: var(--muted); font-size: 14.5px; line-height: 1.75; } .card .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 19px; font-weight: 800; margin-bottom: 16px; } .card .more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--red); } .grid { display: grid; gap: 22px; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cta { padding: 46px; border-radius: var(--r-lg); text-align: center; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; } .cta h2 { color: #fff; font-size: 32px; margin-bottom: 12px; } .cta p { color: rgba(255, 255, 255, .72); font-size: 16px; margin-bottom: 24px; } .news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .news__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .news__thumb { height: 132px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: rgba(255, 255, 255, .8); display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: .16em; } .news__body { padding: 20px 22px 24px; } .news__body h3 { font-size: 17.5px; margin-bottom: 8px; } .news__body p { font-size: 14px; color: var(--muted); line-height: 1.75; } .news__date { font-size: 12.5px; color: var(--muted-2); margin-bottom: 7px; } .qual { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .chip { padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 14px; font-weight: 700; } .stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center; } .stat-band .n { font-family: var(--font-num); font-size: 40px; font-weight: 800; color: var(--navy); line-height: 1; } .stat-band .n small { font-size: 18px; } .stat-band .l { font-size: 14px; color: var(--muted); margin-top: 8px; } .ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ind { display: grid; place-items: center; padding: 26px 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--navy); transition: all .2s ease; } .ind:hover { border-color: var(--red); color: var(--red); transform: translateY(-3px); box-shadow: var(--shadow); } .hero__badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; } .hero__badges > div { font-size: 13px; color: rgba(255, 255, 255, .7); } .hero__badges strong { display: block; font-family: var(--font-num); font-size: 24px; color: #fff; } @media (max-width: 1456px) { .nav { gap: 18px; } .nav-menu { gap: 4px; } .nav-link { padding: 11px 13px; font-size: 14.5px; } .nav-cta__tel { display: none; } } @media (max-width: 1180px) { .nav-menu { gap: 0; } .nav-link { padding: 10px 10px; font-size: 14.5px; } .foot-top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } .foot-col:nth-child(4) { display: none; } .plan-grid, .case-grid--show { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1100px) { .nav { gap: 10px; } .nav-link { padding: 10px 7px; } .brand__logo { height: 34px; } .nav-item.has-children .caret { display: none; } } @media (max-width: 1024px) { .section { padding: 68px 0; } .hero__in { grid-template-columns: 1fr; gap: 32px; } .hero__title { font-size: 44px; } .hero__card { max-width: 560px; } .plan-grid, .case-grid, .case-grid--show { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .verify-row { grid-template-columns: 1fr; } .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab--wide { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; } .apply-layout { grid-template-columns: 1fr; gap: 36px; } .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; } .foot-col:nth-child(4) { display: block; } .grid-3, .news { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dock { display: none; } .mobile-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--line); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .mobile-bar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 11px 4px; background: #fff; color: var(--navy); font-size: 12px; font-weight: 700; } .mobile-bar__btn--primary { background: var(--red); color: #fff; } body { padding-bottom: 62px; } .quoter { grid-template-columns: 1fr; } .insight-tabs { grid-template-columns: 1fr; gap: 10px; } .insight-tab { padding: 15px 18px; } .insight-tab__cn { font-size: 17px; } } @media (max-width: 900px) { .topbar__brand, .topbar__sep, .topbar__mail { display: none; } .topbar__in { gap: 10px; } .topbar__left { flex: 1 1 auto; } .topbar__creds { gap: 10px; flex: 1 1 auto; } .topbar__tel-label { display: none; } .topbar__tel strong { font-size: 14px; } .topbar__right { flex: 0 0 auto; } .nav__wrap { display: none; } .burger { display: flex; } .nav-cta .btn { display: none; } .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact:nth-child(2) { border-right: 0; } .fact:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); } } @media (max-width: 620px) { .topbar { font-size: 11.5px; } .mc-num { display: none; } .topbar__check { display: none; } .topbar__creds { gap: 9px; } .mini-creds { gap: 4px; } .mini-creds .ic { width: 12px; height: 12px; } .topbar__tel .ic { width: 12px; height: 12px; } .topbar__tel strong { font-size: 13px; } } @media (max-width: 768px) { :root { --head-h: 60px; } .container { padding: 0 18px; } .section { padding: 56px 0; } .section-head { margin-bottom: 32px; } .section-head h2 { font-size: 28px; } .section-head > p { font-size: 15.5px; } .hero { padding-top: 46px; } .hero__title { font-size: 33px; } .hero__lede { font-size: 15.5px; } .hero__tag { font-size: 12px; } .promises { grid-template-columns: 1fr; } .hero__actions .btn { width: 100%; } .hero__tel { width: 100%; } .hero__tel strong { font-size: 22px; } .hero__creds { grid-template-columns: 1fr; } .hero__card { padding: 20px; max-width: 100%; } .hero__facts { border-radius: var(--r); } .fact { padding: 15px 16px; } .fact b { font-size: 20px; } .plan-grid, .case-grid, .cert-grid, .grid-3, .grid-4, .news, .ind-grid, .lab-grid { grid-template-columns: 1fr; } .cert__thumb { aspect-ratio: 1 / 1; } .lab--wide { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; } .apply-form { padding: 20px; } .form-row--2 { grid-template-columns: 1fr; } .apply-copy h2 { font-size: 27px; } .case__meta > div { grid-template-columns: 1fr; gap: 3px; } .insight { grid-template-columns: 1fr; gap: 14px; } .insight__go { justify-self: start; } .insight-foot { flex-direction: column; gap: 12px; text-align: center; } .tmc-modal { padding: 0; align-items: flex-end; } .tmc-modal__panel { max-width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); max-height: 92vh; transform: translateY(100%); } .tmc-modal.is-open .tmc-modal__panel { transform: none; } .verify-actions { grid-template-columns: 1fr; } .wechat-box { grid-template-columns: 1fr; } .wechat-duo { gap: 10px; } .wechat-card { padding: 11px 9px 13px; border-radius: var(--r); } .wechat-card__t { font-size: 13.5px; } .wechat-card__d { font-size: 11px; } .wechat-box__qr { width: 200px; margin: 0 auto; } .quoter__amount { font-size: 25px; } .lightbox { padding: 2vh 14px; } .lightbox__x { top: -44px; right: 0; } .foot-top { grid-template-columns: 1fr; gap: 24px; } .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .stat-band { grid-template-columns: repeat(2, 1fr); } .hero__badges { grid-template-columns: repeat(2, 1fr); } .section > .container > h1 { font-size: 28px; } .cta { padding: 30px 22px; } .cta h2 { font-size: 24px; } .reports__head { flex-direction: column; align-items: flex-start; gap: 6px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } .marquee__track { animation: none; } } @media print { .topbar, .site-header, .dock, .mobile-bar, .mobile-nav, .tmc-modal, .lightbox { display: none !important; } body { padding-bottom: 0; } .section { padding: 24px 0; } } .section--tight { padding: 46px 0; } .h2 { font-size: 38px; } .section-head--left { max-width: 820px; } .section-head--left h2 { font-size: 34px; } .eyebrow--light { color: rgba(255, 255, 255, .62); } .two-col { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 44px; align-items: start; } .two-col--text { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .two-col__main { min-width: 0; } .two-col__side { min-width: 0; display: grid; gap: 18px; position: sticky; top: calc(var(--head-h) + 22px); } .card-grid { display: grid; gap: 22px; } .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .row-act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; } .row-act--center { justify-content: center; } .brand-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 26px; padding: 15px 18px; border-radius: var(--r-sm); background: var(--bg-soft); border-left: 3px solid var(--gold); color: var(--muted); font-size: 13.5px; line-height: 1.75; max-width: 46em; } .brand-note .ic { flex: 0 0 auto; margin-top: 2px; color: var(--gold); } .brand-note--center { justify-content: center; text-align: center; margin-left: auto; margin-right: auto; } .tbl-note { margin-top: 12px; max-width: 46em; color: var(--muted-2); font-size: 13px; line-height: 1.7; } .muted-tx { color: var(--muted); font-size: 15px; line-height: 1.8; } .lead-tx { color: var(--ink-2); font-size: 18px; line-height: 1.8; } .empty-tx { color: var(--muted); font-size: 15.5px; line-height: 1.8; } .section-img { position: relative; margin: 0 0 30px; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft-2); } .section-img img { width: 100%; display: block; } .section-img--wide img { aspect-ratio: 21 / 9; object-fit: cover; } .section-img--video { cursor: pointer; } .section-img--video img { transition: transform .4s ease; } .section-img--video:hover img { transform: scale(1.04); } .section-img__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; } .section-img--video:hover .section-img__video { opacity: 1; } .section-img__hint { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; transition: opacity .2s ease; } .section-img--video:hover .section-img__hint { opacity: 0; } .section-img__play { position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--deep-rgb), .82); color: #fff; transition: opacity .2s ease; } .section-img--video:hover .section-img__play { opacity: 0; } .section-img figcaption { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; text-align: left; } .empty-card { padding: 44px 34px; border-radius: var(--r-lg); text-align: center; background: #fff; border: 1px dashed var(--line-2); } .empty-card__ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--bg-soft); color: var(--navy); } .empty-card h3 { font-size: 21px; margin-bottom: 10px; } .empty-card > strong { display: block; font-size: 21px; color: var(--navy); margin-bottom: 10px; } .empty-card p { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 560px; margin: 0 auto 18px; } .empty-card .btn { margin-top: 4px; } .kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .kpi { padding: 28px 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .kpi b { display: block; font-family: var(--font-num); font-size: 27px; color: var(--navy); margin-bottom: 9px; letter-spacing: -.01em; } .kpi span { color: var(--muted); font-size: 14.5px; line-height: 1.75; } .kv { list-style: none; margin: 16px 0 20px; display: grid; gap: 1px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; } .kv li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; background: #fff; font-size: 14px; } .kv li > span { color: var(--muted); } .kv li > b { color: var(--navy); font-weight: 700; text-align: right; } .kv__on { color: var(--green) !important; } .link-chips { display: flex; flex-wrap: wrap; gap: 10px; } .link-chips .chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--navy); font-size: 14.5px; font-weight: 700; transition: all .18s ease; } .link-chips .chip:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .link-chips .chip .ic { color: var(--red); } .link-chips .chip--all { background: var(--navy); border-color: var(--navy); color: #fff; } .link-chips .chip--all:hover { background: var(--red); border-color: var(--red); color: #fff; } .link-chips .chip--all .ic { color: rgba(255, 255, 255, .8); } .page-hero { position: relative; overflow: hidden; padding: 62px 0 66px; background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 52%, var(--navy-3) 100%); color: rgba(255, 255, 255, .82); } .page-hero--compact { padding: 44px 0 48px; } .page-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var( --page-hero-bg ); background-size: cover; background-position: center 42%; background-repeat: no-repeat; opacity: var( --page-hero-bg-op, .6 ); pointer-events: none; } .page-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(96deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .58) 50%, rgba(255, 255, 255, .20) 78%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } .page-hero__in { position: relative; z-index: 1; } .page-hero .breadcrumb { margin-bottom: 20px; } .page-hero .breadcrumb a, .page-hero .breadcrumb > span { color: rgba(255, 255, 255, .58); } .page-hero .breadcrumb a:hover { color: #fff; } .page-hero .breadcrumb .breadcrumb__current { color: rgba(255, 255, 255, .9); } .page-hero__eyebrow { display: inline-block; margin-bottom: 14px; color: var(--acc-tint); font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .page-hero h1 { color: #fff; font-size: 44px; line-height: 1.2; letter-spacing: -.02em; max-width: 900px; margin-bottom: 18px; } .page-hero--compact h1 { font-size: 34px; max-width: 1000px; } .page-hero__lead { color: rgba(255, 255, 255, .74); font-size: 17px; line-height: 1.85; max-width: 780px; } .page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .breadcrumb a { color: var(--muted); font-weight: 600; } .breadcrumb a:hover { color: var(--red); } .breadcrumb__current { color: var(--ink); font-weight: 700; } .icard { display: flex; flex-direction: column; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: all .22s ease; } .icard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; } .icard__top { position: relative; display: block; } .icard__img { display: block; aspect-ratio: 16 / 10; background: var(--bg-soft-2); overflow: hidden; } .icard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .icard:hover .icard__img img { transform: scale(1.05); } .icard__ico { display: grid; place-items: center; height: 108px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; } .icard__ico .ic { width: 34px; height: 34px; opacity: .92; } .icard__tag { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy); font-size: 12px; font-weight: 800; } .icard__bd { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .icard__en { color: var(--muted-2); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; } .icard__name { display: block; color: var(--navy); font-size: 19px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; } .icard:hover .icard__name { color: var(--red); } .icard__tx { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.75; flex: 1; } .icard__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .icard__meta > span { padding: 4px 11px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); font-size: 12.5px; font-weight: 700; } .icard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--red); font-size: 14px; font-weight: 800; } .icard__go .ic { transition: transform .2s ease; } .icard:hover .icard__go .ic { transform: translateX(4px); } .tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: #fff; -webkit-overflow-scrolling: touch; } .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; } .tbl thead th { padding: 14px 18px; text-align: left; white-space: nowrap; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .03em; } .tbl tbody th, .tbl tbody td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); line-height: 1.7; } .tbl tbody th { color: var(--navy); font-weight: 800; white-space: nowrap; } .tbl tbody td { color: var(--ink-2); } .tbl tbody tr:nth-child(even) td, .tbl tbody tr:nth-child(even) th { background: #FBFCFD; } .tbl tbody tr:hover td, .tbl tbody tr:hover th { background: var(--red-l); } .tbl--matrix { min-width: 780px; } .tbl--matrix thead th { text-align: center; } .tbl--matrix thead th:first-child { text-align: left; } .tbl--matrix tbody th a { color: var(--navy); font-weight: 800; } .tbl--matrix tbody th a:hover { color: var(--red); } .cell-mark { text-align: center !important; } .mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; } .mark--y { background: var(--acc-10); color: var(--red); } .mark--n { color: var(--muted-2); } .tbl--standards tbody th { width: 34%; } .tbl--equip { min-width: 720px; } .tbl--equip tbody th { width: 26%; } .tbl--equip tbody td:last-child { color: var(--muted); font-size: 13.5px; } .blk-stack { display: block; } .blk-stack > .blk + .blk { margin-top: 40px; } .blk { display: block; } .blk__title { position: relative; font-size: 23px; color: var(--navy); margin-bottom: 20px; padding-left: 16px; } .blk__title::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 3px; background: var(--red); } .blk__p { color: var(--ink-2); font-size: 16px; line-height: 1.9; margin-bottom: 12px; } .blk--bullets .feature-list { margin-top: 4px; } .steps { list-style: none; display: grid; gap: 0; counter-reset: none; } .step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); } .step:last-child { border-bottom: 1px solid var(--line); } .step__n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red-l); color: var(--red); font-family: var(--font-num); font-size: 16px; font-weight: 800; } .step__bd b { display: block; color: var(--navy); font-size: 17px; font-weight: 800; margin-bottom: 5px; } .step__bd em { display: block; color: var(--red); font-size: 14px; font-style: normal; font-weight: 700; margin-bottom: 7px; } .step__bd p { color: var(--muted); font-size: 14.5px; line-height: 1.8; max-width: 46em; } .feature-list { list-style: none; display: grid; gap: 12px; } .feature-list > li { display: flex; align-items: flex-start; gap: 11px; color: var(--ink-2); font-size: 15px; line-height: 1.8; } .feature-list > li b { color: var(--navy); } .feature-list .tick { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; background: var(--acc-10); color: var(--red); } .feature-list--wide { gap: 14px; } .feature-list--wide > li { font-size: 15.5px; } .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .svc-card { padding: 26px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } .svc-card .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--red-l); color: var(--red); margin-bottom: 16px; } .svc-card h3, .svc-card__t { color: var(--navy); font-size: 17px; margin-bottom: 9px; font-weight: 700; } .svc-card p { color: var(--muted); font-size: 14.5px; line-height: 1.78; } .tlx-sec { position: relative; overflow: hidden; } .tlx-sec__bg, .tlx-sec__scrim { position: absolute; inset: 0; pointer-events: none; } .tlx-sec__bg { z-index: 0; opacity: .22; background: #fff url(images/kunlun.jpg) center/cover no-repeat; } .tlx-sec__scrim { z-index: 1; background: linear-gradient(180deg, var(--bg) 0%, rgba(255, 255, 255, .44) 11%, rgba(255, 255, 255, .44) 74%, var(--bg) 100%); } .tlx-sec > .container { position: relative; z-index: 2; } @media (min-width: 769px) { .tlx-sec__bg { background-attachment: fixed; } } @media (max-width: 768px) { .tlx-sec__bg { background-size: 100% auto; background-position: center top; background-repeat: no-repeat; } } .vtl { position: relative; } .vtl__list { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 34px; } .vtl__list::before, .vtl__list::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 6px; border-radius: 999px; pointer-events: none; } .vtl__list::before { top: 8px; bottom: 8px; z-index: 0; background: linear-gradient(90deg, var(--surface-3), #fff); box-shadow: inset 1px 0 2px rgba(16, 38, 58, .16), 1px 0 0 #fff; } .vtl__list::after { top: 8px; z-index: 1; height: calc(var(--vtl-prog, 0) * (100% - 16px)); background: linear-gradient(180deg, var(--red), var(--acc-30)); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .45), 0 2px 10px var(--acc-sh); transition: height .3s ease; } .vtl__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr); align-items: center; } .vtl__item > .vtl__card, .vtl__item > .vtl__media { grid-row: 1; } .vtl__item > .vtl__card { grid-column: 1; } .vtl__item > .vtl__media { grid-column: 3; } .vtl__item:nth-child(even) > .vtl__card { grid-column: 3; } .vtl__item:nth-child(even) > .vtl__media { grid-column: 1; } .vtl--js .vtl__item { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); } .vtl--js .vtl__item.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .vtl--js .vtl__item { opacity: 1; transform: none; transition: none; } } .vtl__card { position: relative; padding: 20px 22px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(158deg, #fff, var(--surface-1)); box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--line-2), 0 3px 0 var(--surface-3), 0 14px 26px -12px rgba(16, 38, 58, .22); transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease; } .vtl__card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 62%); } .vtl__card::after { content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--red), var(--acc-30)); } .vtl__item:hover .vtl__card { transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--line-2), 0 6px 0 var(--surface-3), 0 24px 40px -14px rgba(16, 38, 58, .3); } .vtl__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--line-2), 0 3px 0 var(--surface-3), 0 16px 30px -14px rgba(16, 38, 58, .26); transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease; } .vtl__media img, .vtl__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vtl__media img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); } .vtl__media:hover img { transform: scale(1.05); } .vtl__media:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--line-2), 0 6px 0 var(--surface-3), 0 26px 42px -14px rgba(16, 38, 58, .34); } .vtl__video { opacity: 0; transition: opacity .35s ease; pointer-events: none; } .vtl__media:hover .vtl__video, .vtl__media.is-playing .vtl__video { opacity: 1; } .vtl__cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; } .vtl__hint { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; transition: opacity .2s ease; } .vtl__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--red); box-shadow: 0 8px 20px -8px rgba(16, 38, 58, .55); transition: opacity .25s ease, transform .25s ease; } .vtl__media:hover .vtl__hint, .vtl__media:hover .vtl__play { opacity: 0; } .vtl__node { position: absolute; left: 50%; top: 50%; z-index: 2; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 34% 28%, #fff 0 22%, var(--red) 58%, var(--red-d) 100%); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line), 0 6px 12px -3px rgba(16, 38, 58, .4); transition: transform .25s ease; } .vtl__item:hover .vtl__node { transform: translate(-50%, -50%) scale(1.18); } .vtl__item.is-now .vtl__node { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--dot-ring), 0 6px 14px -2px var(--acc-sh), 0 0 0 12px var(--acc-10); } .vtl__year { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--font-num); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--navy); text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(16, 38, 58, .14); } .vtl__tag { font-family: var(--font); font-size: 11.5px; font-style: normal; font-weight: 800; letter-spacing: .1em; color: var(--red); padding: 4px 9px; border-radius: 999px; background: var(--red-l); border: 1px solid var(--acc-30); } .vtl__card b { display: block; color: var(--ink); font-size: 17px; font-weight: 800; line-height: 1.5; margin-bottom: 9px; } .vtl__card p { color: var(--muted); font-size: 13.8px; line-height: 1.8; } .vtl__item.is-now .vtl__card { background: linear-gradient(158deg, #fff, var(--red-l)); border-color: var(--acc-30); } .vtl__item.is-now .vtl__year { color: var(--red); } .val-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .val { padding: 28px 24px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .val__ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--acc-tint); } .val b { display: block; color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 4px; } .val em { display: block; color: rgba(255, 255, 255, .55); font-size: 13px; font-style: normal; margin-bottom: 12px; } .val p { color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.78; } .base-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .base { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .base__img { aspect-ratio: 16 / 10; height: 320px; background: var(--bg-soft-2); overflow: hidden; } .base__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .base__img--gal { position: relative; } .base__img--gal .base__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; } .base__img--gal .base__slide.is-active { opacity: 1; } .base__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 8px; pointer-events: none; } .base__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); pointer-events: auto; cursor: pointer; transition: all .2s ease; } .base__dot.is-active { width: 20px; border-radius: 5px; background: #fff; } .base__bd { padding: 24px 26px 26px; } .base__en { color: var(--muted-2); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .base__bd h3 { color: var(--navy); font-size: 20px; margin: 7px 0 10px; } .base__role { color: var(--red); font-size: 13.5px; font-weight: 700; margin-bottom: 14px; } .base__addr { color: var(--muted); font-size: 14.5px; line-height: 1.78; } .base__tel { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--navy); font-weight: 800; font-size: 15px; } .base__tel:hover { color: var(--red); } .base__note { margin-top: 14px; color: var(--muted-2); font-size: 13px; line-height: 1.7; } .fac { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .fac__img { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--bg-soft-2); } .fac__img img { width: 100%; height: 100%; object-fit: cover; } .fac__bd { padding: 18px 20px 20px; } .fac__bd b { display: block; color: var(--navy); font-size: 17px; font-weight: 800; margin-bottom: 8px; } .fac__bd p { color: var(--muted); font-size: 14px; line-height: 1.75; } .stat-band__i { text-align: center; } .stat-band__i b { display: block; font-family: var(--font-num); font-size: 40px; font-weight: 800; color: var(--navy); line-height: 1; } .stat-band__i span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; } .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .filter { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 14px; font-weight: 700; transition: all .18s ease; } .filter:hover { border-color: var(--red); color: var(--red); } .filter.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } .filter em { font-style: normal; font-family: var(--font-num); font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); } .filter.is-active em { background: rgba(255, 255, 255, .18); color: #fff; } .filter-desc { margin: -14px 0 28px; color: var(--muted); font-size: 14.5px; line-height: 1.8; } .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .news-grid .news { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all .22s ease; } .news-grid .news:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; } .news__link { display: flex; flex-direction: column; height: 100%; } .news__img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-soft-2); overflow: hidden; } .news__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .news-grid .news:hover .news__img img { transform: scale(1.05); } .news__cat { position: absolute; top: 13px; left: 13px; font-style: normal; padding: 5px 12px; border-radius: 999px; background: rgba(var(--deep-rgb), .86); color: #fff; font-size: 12px; font-weight: 800; } .news__bd { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } .news__bd time { color: var(--muted-2); font-size: 12.5px; font-weight: 700; margin-bottom: 8px; } .news__bd strong { display: block; color: var(--navy); font-size: 17.5px; font-weight: 800; line-height: 1.45; margin-bottom: 10px; } .news-grid .news:hover .news__bd strong { color: var(--red); } .news__ex { display: block; flex: 1; color: var(--muted); font-size: 14px; line-height: 1.78; } .news__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--red); font-size: 13.5px; font-weight: 800; } .news-grid .news:hover .news__go .ic { transform: translateX(4px); } .news__go .ic { transition: transform .2s ease; } .press-list { display: flex; flex-direction: column; margin-top: 36px; } .press-item { border-bottom: 1px solid var(--line); } .press-item__link { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 30px 0; color: inherit; text-decoration: none; transition: background-color .2s ease; } .press-item__link:hover { background-color: var(--surface-2); } .press-item__date { color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.6; white-space: nowrap; font-family: var(--font-num); } .press-item__body { min-width: 0; } .press-item__cat { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .press-item__title { margin: 0 0 10px; font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1.35; transition: color .2s ease; } .press-item__link:hover .press-item__title { color: var(--red); } .press-item__ex { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 44px; } .pager .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 13px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 14.5px; font-weight: 700; } .pager .page-numbers:hover { border-color: var(--red); color: var(--red); } .pager .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; } .pager .page-numbers.dots { background: transparent; border-color: transparent; } .sub-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 54px; padding: 34px 38px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); } .sub-band h3 { color: #fff; font-size: 22px; margin-bottom: 8px; } .sub-band p { color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.8; max-width: 640px; } .faq-layout { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 46px; align-items: start; } .faq-layout__main { min-width: 0; } .faq-layout__side { min-width: 0; display: grid; gap: 18px; position: sticky; top: calc(var(--head-h) + 22px); } .faq-group { display: block; scroll-margin-top: calc(var(--head-h) + 20px); } .faq-group + .faq-group { margin-top: 46px; } .faq-group__head { margin-bottom: 28px; } .faq-group__eyebrow { color: var(--red); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .faq-group__title { color: var(--navy); font-size: 26px; margin: 10px 0 12px; } .faq-group__desc { color: var(--muted); font-size: 14.5px; line-height: 1.8; } .faq-list { display: grid; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .18s ease, box-shadow .18s ease; } .faq-item[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); } .faq-item__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; color: var(--navy); font-size: 16.5px; font-weight: 800; line-height: 1.6; } .faq-item__q::-webkit-details-marker { display: none; } .faq-item__q:hover { color: var(--red); } .faq-item__ico { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); transition: all .2s ease; } .faq-item[open] .faq-item__ico { background: var(--red); color: #fff; transform: rotate(90deg); } .faq-item__a { margin-top: 6px; padding: 0 22px 22px; color: var(--ink-2); font-size: 15px; line-height: 1.85; } .faq-item__a p + p { margin-top: 12px; } .faq-item__a ul, .faq-item__a ol { margin: 10px 0 10px 20px; } .faq-item__a li { margin-bottom: 7px; } .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; } .faq-grid .faq-item { padding: 26px 28px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow-wrap: break-word; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .faq-grid .faq-item:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); } .faq-grid .faq-item h3 { margin: 0 0 14px; color: var(--navy); font-size: 17px; font-weight: 800; line-height: 1.55; } .faq-grid .faq-item__a { margin-top: 0; padding: 0; color: var(--ink-2); font-size: 15px; line-height: 1.85; } .faq-grid .faq-item__a p { margin: 0; } .faq-grid .faq-item__a p + p { margin-top: 10px; } .notice-card { padding: 26px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .notice-card--soft { background: var(--bg-soft); border-color: transparent; box-shadow: none; } .notice-card__ico, .notice-card__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 15px; border-radius: 12px; background: var(--red-l); color: var(--red); } .notice-card__ic { float: left; margin: 0 16px 6px 0; } .notice-card strong, .notice-card__t { display: block; color: var(--navy); font-size: 18px; font-weight: 800; margin-bottom: 10px; } .notice-card p { color: var(--muted); font-size: 14.5px; line-height: 1.8; } .notice-card .btn { margin-top: 18px; } .notice-card__tel { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--navy); font-size: 15px; font-weight: 800; } .notice-card__tel:hover { color: var(--red); } .notice-card__list { list-style: none; display: grid; gap: 10px; } .notice-card__list a { display: inline-flex; align-items: center; color: var(--ink-2); font-size: 14.5px; font-weight: 600; } .notice-card__list a::before { content: '→'; margin-right: 8px; color: var(--red); font-weight: 800; } .notice-card__list a:hover { color: var(--red); } .cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; padding: 44px 46px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); } .cta-band__tx { max-width: 640px; } .cta-band h2 { color: #fff; font-size: 29px; margin-bottom: 12px; } .cta-band__tx p { color: rgba(255, 255, 255, .72); font-size: 15.5px; line-height: 1.82; } .cta-band__act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .cta-band__tel { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .72); font-size: 14px; } .cta-band__tel:hover { color: #fff; } .pillar-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .pillar { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 28px 26px 30px; } .pillar__k { font-family: var(--font-num); font-size: 12.5px; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; } .pillar__t { font-size: 21px; color: var(--navy); margin: 10px 0 12px; line-height: 1.35; } .pillar__d { font-size: 15px; color: var(--ink-2); line-height: 1.82; } .pillar__d ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; } .pillar__d li { position: relative; padding-left: 22px; } .pillar__d li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); } .pillar--hot { border-color: var(--red); background: linear-gradient(180deg, rgba(255, 102, 0, .06), var(--surface)); box-shadow: 0 14px 34px rgba(255, 102, 0, .14); } .pillar--hot .pillar__t { color: var(--red); } .pillar__tag { position: absolute; top: -13px; left: 26px; background: var(--red); color: #fff; font-size: 12.5px; font-weight: 700; padding: 5px 13px; border-radius: 999px; box-shadow: 0 6px 16px rgba(255, 102, 0, .3); } .cert-weight-note { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 16px 20px; border-radius: var(--r-lg); background: var(--bg-soft); border-left: 4px solid var(--red); font-size: 15.5px; color: var(--ink-2); line-height: 1.8; } .cert-weight-note b { color: var(--navy); } .eu-teaser { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 36px 34px; position: relative; overflow: hidden; } .eu-teaser::before { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 102, 0, .12), transparent 70%); } .eu-teaser__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--red); border: 1px solid var(--red); border-radius: 999px; padding: 5px 14px; } .eu-teaser__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: euPulse 1.8s infinite; } @keyframes euPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .eu-teaser h3 { font-size: 26px; color: var(--navy); margin: 16px 0 10px; line-height: 1.4; position: relative; } .eu-teaser__lead { font-size: 16px; color: var(--ink-2); line-height: 1.85; max-width: 760px; position: relative; } .tl-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 28px 0 6px; position: relative; } .tl-mini__i { border-left: 3px solid var(--red); padding: 4px 0 4px 16px; } .tl-mini__d { font-family: var(--font-num); font-weight: 800; color: var(--navy); font-size: 16px; } .tl-mini__t { font-size: 14.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.7; } .eu-teaser__ready { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; position: relative; } .eu-teaser__ready .chip { font-size: 13.5px; color: var(--navy); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; } .eu-teaser__act { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; position: relative; } @media (max-width: 900px) { .pillar-row { grid-template-columns: 1fr; } .tl-mini { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 768px) { .eu-teaser { padding: 28px 22px; } .eu-teaser h3 { font-size: 22px; } } .pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .pain { padding: 26px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); } .pain__n { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 50%; background: var(--red-l); color: var(--red); font-family: var(--font-num); font-size: 14px; font-weight: 800; } .pain p { color: var(--ink-2); font-size: 15px; line-height: 1.82; } .cycle-band { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 30px 34px; border-radius: var(--r-lg); background: var(--bg-soft); border-left: 4px solid var(--gold); } .cycle-band__ico { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px; background: #fff; color: var(--gold); box-shadow: var(--shadow-sm); } .cycle-band > div { flex: 1 1 380px; } .cycle-band h2 { color: var(--navy); font-size: 21px; margin-bottom: 8px; } .cycle-band p { color: var(--ink-2); font-size: 15px; line-height: 1.82; } .cap-grid { display: flex; flex-wrap: wrap; gap: 10px; } .cap { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1.5; } .cap .ic { color: var(--red); flex: 0 0 auto; } .std-list { display: flex; flex-wrap: wrap; gap: 9px; } .std { padding: 8px 14px; border-radius: 6px; background: var(--bg-soft); color: var(--ink-2); font-family: var(--font-num); font-size: 13px; font-weight: 700; letter-spacing: .01em; } .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.38fr); gap: 40px; align-items: start; } .contact-side { display: grid; gap: 26px; min-width: 0; } .contact-form-wrap { min-width: 0; } .office { display: grid; grid-template-columns: 132px minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .office__img { background: var(--bg-soft-2); } .office__img img { width: 100%; height: 100%; object-fit: cover; } .office__bd { padding: 22px 24px; } .office__en { color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .office__bd h3 { color: var(--navy); font-size: 19px; margin: 6px 0 4px; } .office__role { color: var(--red); font-size: 13px; font-weight: 700; margin-bottom: 12px; } .office__list { list-style: none; display: grid; gap: 9px; } .office__list li { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 14px; line-height: 1.7; } .office__list li .ic { flex: 0 0 auto; margin-top: 3px; color: var(--navy); opacity: .55; } .office__list a { color: var(--navy); font-weight: 700; } .office__list a:hover { color: var(--red); } .office__note { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted-2); font-size: 13px; line-height: 1.7; } .ship-guide { margin-top: 26px; padding: 26px 28px; border-radius: var(--r-lg); background: var(--bg-soft); border-left: 4px solid var(--gold); } .ship-guide h3 { color: var(--navy); font-size: 19px; margin-bottom: 12px; } .ship-guide ol { margin-left: 20px; display: grid; gap: 9px; } .ship-guide li { color: var(--ink-2); font-size: 14.5px; line-height: 1.8; } .map-box { margin-top: 30px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; } .map-box__ph { display: grid; place-items: center; gap: 8px; padding: 54px 24px; text-align: center; background: repeating-linear-gradient(45deg, var(--bg-soft) 0 12px, #fff 12px 24px); color: var(--muted); } .map-box__stage { display: grid; } .map-box__canvas, .map-box__ph { grid-area: 1 / 1; } .map-box__canvas { width: 100%; height: 420px; background: var(--bg-soft); } .map-box__ph { position: relative; z-index: 1; } .map-box.is-map-ready .map-box__ph { display: none; } .amap-marker-label { border: 0; border-radius: 6px; padding: 4px 9px; font-size: 12.5px; color: var(--navy); box-shadow: 0 2px 10px rgba(0, 0, 0, .14); } .map-box__foot { display: grid; gap: 10px 26px; padding: 18px 22px; border-top: 1px solid var(--line); background: var(--bg-soft); } .map-box__addr { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); } .map-box__tag { flex: 0 0 auto; color: var(--navy); font-weight: 600; } .map-box__tx { min-width: 0; overflow-wrap: anywhere; } .map-box__foot .map-box__links { justify-content: flex-start; margin-top: 0; } @media (min-width: 900px) { .map-box__foot { grid-template-columns: 1fr 1fr auto; align-items: center; } } @media (max-width: 768px) { .map-box__canvas { height: 320px; } .amap-marker-label { max-width: 56vw; overflow: hidden; text-overflow: ellipsis; font-size: 12px; padding: 3px 8px; } } .map-box__ph .ic { color: var(--navy); opacity: .4; } .map-box__ph strong { display: block; color: var(--navy); font-size: 17px; margin-bottom: 6px; } .map-box__ph p { font-size: 14px; line-height: 1.75; max-width: 520px; } .map-box__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .wechat-box__qr--ph { display: grid; place-items: center; gap: 8px; padding: 26px 16px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--bg-soft); color: var(--muted); font-size: 13.5px; line-height: 1.7; } .wechat-box__qr--ph .ic { color: var(--navy); opacity: .4; } .contact-form-wrap .form-foot { margin-top: 14px; color: var(--muted-2); font-size: 13px; line-height: 1.7; } .art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 48px; align-items: start; } .art-layout__main { min-width: 0; } .art-layout__side { min-width: 0; display: grid; gap: 20px; position: sticky; top: calc(var(--head-h) + 22px); } .art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted-2); font-size: 13px; font-weight: 600; } .art-meta > span, .art-meta time { display: inline-flex; align-items: center; gap: 6px; } .art-meta__sep { width: 1px; height: 12px; background: var(--line-2); } .art-meta__cat { padding: 4px 12px; border-radius: 999px; background: var(--red-l); color: var(--red); font-weight: 800; font-size: 12.5px; } .art-meta__cat:hover { background: var(--red); color: #fff; } .toc { padding: 22px 22px 24px; border-radius: var(--r); background: var(--bg-soft); } .toc__t { display: block; color: var(--navy); font-size: 14px; font-weight: 800; letter-spacing: .04em; margin-bottom: 14px; } .toc__list { list-style: none; display: grid; gap: 10px; counter-reset: toc; } .toc__list li { counter-increment: toc; } .toc__list a { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-2); font-size: 14px; line-height: 1.65; } .toc__list a::before { content: counter(toc, decimal-leading-zero); flex: 0 0 auto; font-family: var(--font-num); font-size: 11.5px; font-weight: 800; color: var(--red); line-height: 1.9; } .toc__list a:hover { color: var(--red); } .art-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 54px; } .art-nav__i { display: flex; flex-direction: column; gap: 7px; padding: 20px 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: all .18s ease; } .art-nav__i:hover { border-color: var(--red); box-shadow: var(--shadow-sm); } .art-nav__i > span { color: var(--muted-2); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; } .art-nav__i strong { color: var(--navy); font-size: 15.5px; line-height: 1.6; } .art-nav__i:hover strong { color: var(--red); } .art-nav__i--next { text-align: right; align-items: flex-end; } .art-nav__i--empty { background: transparent; border: 0; } .answer p { color: var(--ink-2); font-size: 16.5px; line-height: 1.95; } .answer p + p { margin-top: 14px; } .prose { color: var(--ink-2); font-size: 16px; line-height: 1.9; } .prose > * + * { margin-top: 18px; } .prose h2 { font-size: 27px; color: var(--navy); margin-top: 44px; margin-bottom: 18px; padding-left: 16px; position: relative; line-height: 1.35; } .prose h2::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 3px; background: var(--red); } .prose h3 { font-size: 20px; color: var(--navy); margin-top: 32px; margin-bottom: 12px; } .prose h4 { font-size: 17px; color: var(--navy); margin-top: 24px; margin-bottom: 10px; } .prose p { color: var(--ink-2); } .prose strong { color: var(--navy); font-weight: 800; } .prose a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: var(--red-d); } .prose ul, .prose ol { margin: 16px 0 16px 22px; display: grid; gap: 9px; } .prose li { color: var(--ink-2); line-height: 1.85; } .prose li::marker { color: var(--red); font-weight: 800; } .prose blockquote { margin: 26px 0; padding: 18px 24px; border-left: 4px solid var(--red); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--red-l); color: var(--ink-2); } .prose blockquote p { margin: 0; } .prose code { padding: 2px 7px; border-radius: 5px; background: var(--bg-soft); color: var(--red-d); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; } .prose pre { padding: 18px 20px; border-radius: var(--r-sm); overflow-x: auto; background: var(--navy); color: rgba(255, 255, 255, .88); font-size: 13.5px; line-height: 1.7; } .prose pre code { padding: 0; background: transparent; color: inherit; } .prose img { border-radius: var(--r); margin: 26px 0; } .prose table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14.5px; } .prose thead th { padding: 13px 16px; text-align: left; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; } .prose tbody td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--ink-2); } .prose tbody tr:nth-child(even) td { background: #FBFCFD; } .prose hr { margin: 36px 0; border: 0; border-top: 1px solid var(--line); } .prose--article { font-size: 16.5px; line-height: 1.95; } .prose--article > p:first-of-type { font-size: 17.5px; color: var(--ink); } .prose--article h2 { scroll-margin-top: calc(var(--head-h) + 24px); } .prose--article table { display: block; overflow-x: auto; white-space: nowrap; } .job-list { display: grid; gap: 18px; } .job { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 26px 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .job:hover { box-shadow: var(--shadow); border-color: transparent; } .job__hd { flex: 1 1 420px; min-width: 0; } .job__hd h3 { font-size: 20px; margin-bottom: 10px; } .job__hd h3 a { color: var(--navy); } .job__hd h3 a:hover { color: var(--red); } .job__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .job__meta > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; font-weight: 600; } .job__meta > span .ic { color: var(--navy); opacity: .5; } .job__desc { flex: 1 1 320px; color: var(--muted); font-size: 14.5px; line-height: 1.8; } .job__act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--red-l); color: var(--red); font-size: 12.5px; font-weight: 800; font-style: normal; } .case__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft-2); } .case__img img { width: 100%; height: 100%; object-fit: cover; } .case__bd { padding: 22px 24px 24px; } .case__ind { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); font-size: 12.5px; font-weight: 800; } .case__sum { color: var(--muted); font-size: 14.5px; line-height: 1.8; } .case__res { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .case__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--red); font-size: 14px; font-weight: 800; } .cert--nocopy .cert__thumb::after { display: none; } .stat { text-align: center; } .stat b { display: block; font-family: var(--font-num); font-size: 38px; font-weight: 800; color: var(--navy); line-height: 1; } .stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; } .form-row--sampling { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .quoter__fields { display: grid; gap: 14px; } .foot-bottom__links { display: flex; flex-wrap: wrap; gap: 16px; } .foot-col--contact { min-width: 0; } .hero__copy { min-width: 0; } @media (max-width: 1180px) { .two-col, .two-col--text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; } .art-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; } .faq-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 34px; } .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 1024px) { .page-hero { padding: 52px 0 56px; } .page-hero h1 { font-size: 38px; } .two-col, .two-col--text, .faq-layout, .art-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .two-col__side, .faq-layout__side, .art-layout__side { position: static; top: auto; } .section-head--left h2, .h2 { font-size: 30px; } .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid--3, .svc-grid, .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .base-grid, .fac, .faq-grid { grid-template-columns: minmax(0, 1fr); } .blk-stack > .blk + .blk { margin-top: 32px; } .cta-band { padding: 34px 30px; } .cta-band h2 { font-size: 25px; } .sub-band { padding: 28px 26px; } .vtl__item { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); } .vtl__list { gap: 28px; } .vtl__card { padding: 18px 18px 20px; } .vtl__card b { font-size: 16px; } .vtl__card p { font-size: 13.2px; } .vtl__year { font-size: 27px; } } @media (max-width: 768px) { .page-hero { padding: 40px 0 44px; } .page-hero h1 { font-size: 29px; } .page-hero--compact h1 { font-size: 25px; } .page-hero__lead { font-size: 15.5px; } .page-hero__cta { margin-top: 24px; } .page-hero__cta .btn { width: 100%; } .section--tight { padding: 32px 0; } .h2, .section-head--left h2 { font-size: 26px; } .blk__title { font-size: 20px; } .prose h2 { font-size: 22px; margin-top: 34px; } .prose--article { font-size: 16px; } .card-grid--3, .card-grid--4, .svc-grid, .pain-grid, .news-grid, .val-grid, .kpi-row, .faq-grid, .base-grid, .fac { grid-template-columns: minmax(0, 1fr); } .filter-bar { gap: 8px; } .filter { padding: 9px 15px; font-size: 13.5px; } .press-item__link { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; } .press-item__date { font-size: 13px; } .press-item__title { font-size: 18px; } .press-item__ex { -webkit-line-clamp: 3; } .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .stat-band__i b { font-size: 30px; } .pain-grid { gap: 16px; } .cycle-band { padding: 24px 22px; gap: 16px; } .cycle-band > div { flex: 1 1 100%; } .cap-grid, .std-list { gap: 8px; } .cap { padding: 9px 14px; font-size: 13.5px; } .std { font-size: 12.5px; } .contact-layout { gap: 28px; } .office { grid-template-columns: minmax(0, 1fr); } .office__img { aspect-ratio: 16 / 7; } .office__img img { height: 100%; } .ship-guide { padding: 22px 20px; } .sub-band { flex-direction: column; align-items: flex-start; gap: 18px; } .cta-band { flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 24px; } .cta-band h2 { font-size: 22px; } .cta-band__act { width: 100%; } .cta-band__act .btn { width: 100%; } .vtl__list { gap: 24px; } .vtl__list::before, .vtl__list::after { left: 13px; transform: none; width: 5px; } .vtl__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; gap: 12px; padding-left: 40px; } .vtl__item > .vtl__card, .vtl__item:nth-child(even) > .vtl__card { grid-column: 1; grid-row: 2; } .vtl__item > .vtl__media, .vtl__item:nth-child(even) > .vtl__media { grid-column: 1; grid-row: 1; } .vtl__node { left: 13px; width: 18px; height: 18px; } .vtl__card { padding: 17px 17px 19px; } .vtl__card b { font-size: 15.6px; } .vtl__card p { font-size: 13px; line-height: 1.76; } .vtl__year { font-size: 26px; } .vtl__play { width: 40px; height: 40px; margin: -20px 0 0 -20px; } .art-nav { grid-template-columns: minmax(0, 1fr); } .art-nav__i--next { text-align: left; align-items: flex-start; } .art-nav__i--empty { display: none; } .faq-item__q { padding: 16px 18px; font-size: 15.5px; } .faq-item__a { padding: 0 18px 18px; font-size: 14.5px; } .faq-group + .faq-group { margin-top: 36px; } .faq-group__title { font-size: 22px; } .faq-grid { gap: 16px; } .faq-grid .faq-item { padding: 20px 22px 22px; } .faq-grid .faq-item h3 { font-size: 15.5px; margin-bottom: 10px; } .faq-grid .faq-item__a { font-size: 14px; line-height: 1.8; } .job { padding: 22px 20px; gap: 16px; } .job__hd, .job__desc, .job__act { flex: 1 1 100%; } .job__act .btn { flex: 1 1 auto; justify-content: center; } .blk-stack > .blk + .blk { margin-top: 28px; } .step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 18px 0; } .step__n { width: 32px; height: 32px; font-size: 14px; } .tbl { font-size: 14px; } .tbl thead th, .tbl tbody th, .tbl tbody td { padding: 12px 14px; } .notice-card, .empty-card { padding: 22px 20px; } .pager { margin-top: 32px; } .pager .page-numbers { min-width: 38px; height: 38px; font-size: 14px; } } @media (max-width: 480px) { .page-hero h1 { font-size: 25px; } .filter { padding: 8px 13px; font-size: 13px; } .kpi { padding: 22px 20px; } .kpi b { font-size: 23px; } .val { padding: 22px 20px; } .pain { padding: 22px 20px; } .cap { font-size: 13px; padding: 8px 12px; } .row-act .btn { width: 100%; justify-content: center; } } .duo-note { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .duo-note__item { padding: 26px 24px; border-radius: var(--r-lg); background: var(--bg-soft); border-left: 3px solid var(--red); } .duo-note__item > span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: #fff; color: var(--red); box-shadow: var(--shadow-sm); } .duo-note__item h3 { color: var(--navy); font-size: 17.5px; margin-bottom: 8px; } .duo-note__item p { color: var(--muted); font-size: 14.5px; line-height: 1.8; } .art-nav__i--prev { align-items: flex-start; } @media (max-width: 900px) { .duo-note { grid-template-columns: minmax(0, 1fr); gap: 16px; } } .foot-more { color: var(--red) !important; font-weight: 800; } .btn--block { white-space: normal; } .apply-layout > *, .two-col > *, .card-grid > *, .svc-grid > *, .cap-grid > *, .news-grid > *, .pain-grid > *, .val-grid > *, .base-grid > *, .kpi-row > * { min-width: 0; } .muted-tx, .lead-tx, .tbl-note, .brand-note, .empty-tx, .kv b, .kv span, .job__meta, .art-meta, .answer, .prose { overflow-wrap: anywhere; } @media (max-width: 480px) { .btn--lg { padding: 14px 20px; font-size: 15px; } } .topbar { background: var(--surface-2); color: var(--ink-2); border-bottom: 1px solid var(--surface-line); } .topbar__brand { color: var(--navy); } .topbar__sep { background: var(--line-2); } .mini-creds { color: var(--ink-2); } .mini-creds .ic { color: var(--red); } .topbar__tel { color: var(--navy); } .topbar__tel:hover { color: var(--red); } .topbar__tel-label { color: var(--muted); } .topbar__mail { color: var(--muted); } .topbar__mail:hover { color: var(--red); } .topbar__lang .gt_switcher, .topbar__lang .gt_switcher .gt_selected, .topbar__lang .gt_switcher .gt_current, .topbar__lang .gt_switcher a { color: var(--ink-2) !important; } .topbar__lang .gt_switcher .gt_option { background: var(--surface-1) !important; border-color: var(--line-2) !important; box-shadow: var(--shadow) !important; } .topbar__lang .gt_switcher .gt_option a:hover { background: var(--surface-2) !important; color: var(--navy) !important; } .hero { background: var(--grad-hero); color: var(--ink-2); } .hero__media img { opacity: var(--hero-bg-op, .6); } .hero__scrim { background: radial-gradient(880px 470px at 12% 28%, rgba(255, 255, 255, .88), transparent 60%), linear-gradient(115deg, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .10) 100%); } .hero__tag { background: #fff; border-color: var(--surface-line); color: var(--navy); box-shadow: var(--shadow-sm); } .hero__title { color: var(--navy); } .hero__title .hl { color: var(--red); } .hero__title .hl::after { background: linear-gradient(90deg, var(--hl-soft), var(--hl-faint)); } .hero__lede { color: var(--ink-2); } .promise { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); } .promise__tx strong { color: var(--navy); } .promise__tx em { color: var(--muted); } .hero__tel { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); } .hero__tel:hover { background: #fff; border-color: var(--red); } .hero__tel em { color: var(--muted); } .hero__tel strong { color: var(--navy); } .hero__tel i { color: var(--muted-2); } .hero__card { border-color: var(--line); box-shadow: var(--shadow); } .hero__facts { background: #fff; border-color: var(--line); box-shadow: var(--shadow); } .fact { border-right-color: var(--line); } .fact b { color: var(--navy); } .fact span { color: var(--muted); } .hero__badges > div { color: var(--muted); } .hero__badges strong { color: var(--navy); } .section--navy { background: var(--surface-2); color: var(--ink-2); } .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--navy); } .section--navy .eyebrow { color: var(--red); } .section-head--dark h2 { color: var(--navy); } .section-head--dark > p { color: var(--muted); } .case-filter { color: var(--ink-2); background: #fff; border-color: var(--line); } .case-filter:hover { background: var(--red-l); color: var(--red); border-color: var(--red); } .case { border-color: var(--line); box-shadow: var(--shadow-sm); } .page-hero { background: var(--grad-page); color: var(--ink-2); border-bottom: 1px solid var(--surface-line); } .page-hero__eyebrow { color: var(--red); } .page-hero h1 { color: var(--navy); } .page-hero__lead { color: var(--ink-2); } .page-hero .breadcrumb a, .page-hero .breadcrumb > span { color: var(--muted); } .page-hero .breadcrumb a:hover { color: var(--red); } .page-hero .breadcrumb .breadcrumb__current { color: var(--ink); } .site-footer { background: var(--surface-2); color: var(--muted); border-top: 1px solid var(--surface-line); } .foot-logo { mix-blend-mode: normal; } .foot-brand p { color: var(--muted); } .foot-tel em { color: var(--muted-2); } .foot-tel strong { color: var(--navy); } .foot-tel:hover strong { color: var(--red); } .foot-col h3 { color: var(--navy); } .foot-col a, .foot-col li { color: var(--muted); } .foot-col a:hover { color: var(--red); } .foot-base { background: var(--surface-1); border-color: var(--line-2); } .foot-base strong { color: var(--navy); } .foot-base strong i { background: var(--surface-3); color: var(--navy); } .foot-base--branch strong i { background: var(--gold); } .foot-base span { color: var(--muted); } .foot-mail em { color: var(--muted-2); } .foot-mail strong { color: var(--navy); } .foot-mail:hover strong { color: var(--red); } .foot-bottom { border-top-color: var(--surface-line); color: var(--muted-2); } .foot-bottom__mid { color: var(--muted-2); } .foot-bottom a { color: var(--muted); } .foot-bottom a:hover { color: var(--red); } .foot-impartiality { background: var(--surface-3); border-color: var(--surface-line); color: var(--muted-3); } .foot-impartiality h3 { color: var(--navy); } .foot-impartiality li::before { background: var(--green); } .foot-impartiality li b { color: var(--navy); } .foot-links { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 13px; line-height: 1.9; } .foot-links__label { flex: 0 0 auto; color: var(--navy); font-weight: 600; } .foot-links__items { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; } .foot-links__items i { font-style: normal; color: var(--line-2); } .foot-links__items a, .foot-links__items span { color: var(--muted); } .foot-links__items a:hover { color: var(--red); } .cta { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); color: var(--ink-2); border: 1px solid var(--surface-line); } .cta h2 { color: var(--navy); } .cta p { color: var(--muted); } .sub-band { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid var(--surface-line); } .sub-band h3 { color: var(--navy); } .sub-band p { color: var(--muted); } .cta-band { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid var(--surface-line); } .cta-band h2 { color: var(--navy); } .cta-band__tx p { color: var(--muted); } .cta-band__tel { color: var(--muted); } .cta-band__tel:hover { color: var(--red); } .btn--ghost { color: var(--navy); border-color: var(--line-2); } .btn--ghost:hover { background: var(--red-l); color: var(--red); border-color: var(--red); } .icard__ico { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); color: var(--navy); border-bottom: 1px solid var(--surface-line); } .news__thumb { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); color: var(--navy); } .tbl thead th { background: var(--surface-3); color: var(--navy); border-bottom: 1px solid var(--surface-line); } .prose thead th { background: var(--surface-3); color: var(--navy); } .quoter__result { background: var(--surface-2); border: 1px solid var(--surface-line); } .quoter__label { color: var(--muted); } .quoter__amount { color: var(--red); } .quoter__note { color: var(--muted); } .quoter__result .btn--outline { background: #fff; color: var(--navy); border-color: var(--line-2); } .quoter__result .btn--outline:hover { background: #fff; border-color: var(--navy); color: var(--navy); } .val { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); } .val__ic { background: var(--red-l); color: var(--red); } .val b { color: var(--navy); } .val em { color: var(--muted-2); } .val p { color: var(--muted); } .report-check { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; margin: 22px 0 0; padding: 22px 26px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid var(--surface-line); } .report-check__tx { min-width: 0; } .report-check__tx strong { display: block; color: var(--navy); font-size: 18px; font-weight: 800; margin-bottom: 5px; } .report-check__tx span { color: var(--muted); font-size: 14.5px; line-height: 1.7; } .report-check__act { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 1 auto; min-width: 0; } .report-check--cnas { border-left: 4px solid var(--green); background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); } .report-check--cnas .report-check__tx strong { color: var(--green); } .report-check + .cert-grid { margin-top: 48px; } .report-check__note { margin-top: 14px; color: var(--muted-2); font-size: 12.5px; line-height: 1.7; } .topbar__check { display: inline-flex; align-items: center; gap: 5px; color: var(--red); font-weight: 700; white-space: nowrap; } .topbar__check:hover { color: var(--red-d); } .reports__meta { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } .reports__go { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--red); } .reports__go:hover { color: var(--red-d); } .branch-box { margin-top: 26px; padding: 24px 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .branch-box__head { margin-bottom: 18px; } .branch-box__head h2 { font-size: 21px; margin-bottom: 6px; } .branch-box__head p { color: var(--muted); font-size: 14px; line-height: 1.7; } .branch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .branch { padding: 18px 20px; border-radius: var(--r); background: var(--surface-1); border: 1px solid var(--surface-line); } .branch__en { display: block; color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .branch strong { display: block; color: var(--navy); font-size: 17px; font-weight: 800; margin: 5px 0 3px; } .branch em { display: block; color: var(--red); font-size: 12.5px; font-style: normal; font-weight: 700; margin-bottom: 10px; } .branch__addr { display: flex; align-items: flex-start; gap: 7px; color: var(--ink-2); font-size: 14px; line-height: 1.7; } .branch__addr .ic { flex: 0 0 auto; margin-top: 3px; color: var(--navy); opacity: .55; } .branch__note { margin-top: 8px; color: var(--muted-2); font-size: 12.5px; line-height: 1.7; } .branch__tel { margin-top: 8px; color: var(--muted); font-size: 13.5px; } .branch__tel .ic { color: var(--red); } .branch__tel a { color: var(--navy); font-weight: 800; } .branch__tel a:hover { color: var(--red); } @media (max-width: 620px) { .branch-grid { grid-template-columns: minmax(0, 1fr); } .report-check { flex-direction: column; align-items: stretch; padding: 20px; } .report-check__act { flex: 1 1 auto; width: 100%; } .report-check__act .btn { flex: 1 1 auto; justify-content: center; } } .res-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; row-gap: 26px; align-items: start; } .res-group__head { margin-bottom: 8px; } .res-group__title { display: flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-portal); font-size: 16px; font-weight: 400; letter-spacing: .01em; margin: 0 0 3px; } .res-group__title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--red); flex: none; } .res-group__desc { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; } .res-list { list-style: none; margin: 0; padding: 0; display: block; } .res-item { display: flex; align-items: center; gap: 14px; padding: 8px 0; border: 0; border-bottom: 1px dotted var(--line); border-radius: 0; background: transparent; } .res-item:hover { border-bottom-color: var(--line-2); } .res-item__main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .res-item__name { color: var(--ink); font-family: var(--font-portal); font-size: 14.5px; font-weight: 400; flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: color .16s ease; } .res-item:hover .res-item__name { color: var(--red); } .res-item__ext { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--bg-soft-2); color: var(--muted-2); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; } .res-item__desc { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 0; flex: 0 1 auto; min-width: 0; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .res-item--pending .res-item__name { color: var(--muted); } .res-item__act { flex: 0 0 auto; } .res-item__dl, .res-item__soon { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .res-list .res-item__dl.btn, .res-list .res-item__soon.btn { padding: 4px 12px; font-size: 12.5px; border-radius: 999px; } .res-item__soon { background: var(--bg-soft); color: var(--muted-2); border: 1px solid var(--line); font-weight: 600; cursor: not-allowed; opacity: .85; } .res-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; } .res-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--font-portal); font-size: 13px; font-weight: 500; line-height: 1.5; cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease; } .res-tab em { font-family: var(--font-num); font-size: 11px; font-style: normal; color: var(--muted-2); } .res-tab:hover { color: var(--red); border-color: var(--red); } .res-tab.is-active { color: #fff; background: var(--red); border-color: var(--red); } .res-tab.is-active em { color: rgba(255, 255, 255, .85); } .res-cols.is-one { grid-template-columns: minmax(0, 1fr); } .res-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .res-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 7px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); font-family: var(--font-portal); font-size: 12px; font-weight: 600; cursor: pointer; transition: color .16s ease, border-color .16s ease; } .res-pg:hover { color: var(--red); border-color: var(--red); } .res-pg.is-active { color: #fff; background: var(--red); border-color: var(--red); font-weight: 700; } .res-pg[disabled] { opacity: .4; cursor: default; } .res-pg__nums { display: inline-flex; align-items: center; gap: 6px; } .res-pager__sum { margin-left: auto; color: var(--muted-2); font-size: 11.5px; font-family: var(--font-num); } @media (max-width: 900px) { .res-cols { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } } @media (max-width: 768px) { .res-item { gap: 10px 12px; padding: 9px 0; } .res-item__dl, .res-item__soon { flex: 0 0 auto; justify-content: center; } } .method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; } .method { padding: 22px 20px 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .method:hover { border-color: var(--red); transform: translateY(-2px); } .method__n { display: block; font-family: var(--font-num); font-size: 24px; font-weight: 800; line-height: 1; color: var(--acc-30); margin-bottom: 9px; } .method b { display: block; color: var(--navy); font-size: 16px; margin-bottom: 7px; } .method p { color: var(--muted); font-size: 14px; line-height: 1.78; } .case__scene { font-size: 13.5px; color: var(--muted-2); margin-bottom: 12px; } .case__methods { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; } .case__methods li { padding: 3px 9px; border-radius: 6px; background: var(--acc-10); color: var(--red); font-size: 12px; font-weight: 700; line-height: 1.5; } .case__more { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); } .case__more summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--navy); transition: color .18s ease; } .case__more summary:hover { color: var(--red); } .case__more[open] summary { color: var(--red); margin-bottom: 4px; } .case__more-bd { display: grid; gap: 11px; margin-top: 10px; } .case__more-bd p { font-size: 13.5px; line-height: 1.85; color: var(--muted); } .case__more-bd b { display: inline-block; margin-right: 7px; padding: 1px 8px; border-radius: 5px; background: var(--surface-2); color: var(--navy); font-size: 12px; font-weight: 800; } .tool-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .tool-card { display: flex; align-items: center; gap: 16px; text-align: left; padding: 22px 24px; border-radius: 18px; cursor: pointer; border: 1.5px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease; font: inherit; color: inherit; } .tool-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15, 43, 30, .14); } .tool-card__ic { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: #fff; } .tool-card--red .tool-card__ic { background: var(--red); box-shadow: 0 8px 18px var(--acc-sh); } .tool-card--red:hover { border-color: var(--red); } .tool-card--blue .tool-card__ic { background: var(--navy); box-shadow: 0 8px 18px rgba(15, 43, 30, .18); } .tool-card--blue:hover { border-color: var(--navy); } .tool-card__tx { flex: 1; min-width: 0; } .tool-card__tx strong { display: block; font-size: 17.5px; font-weight: 800; color: var(--ink); } .tool-card__tx em { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; } .tool-card__go { flex: none; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .tool-card--red .tool-card__go { color: var(--red); } .tool-card--blue .tool-card__go { color: var(--navy); } .cc-tool { background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 34px 36px 26px; box-shadow: var(--shadow-sm); } .cc-step { margin-bottom: 26px; } .cc-step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .cc-step__n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; } .cc-step__t { font-size: 17px; font-weight: 800; color: var(--ink); } .cc-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .cc-cat { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 13px; border-radius: 13px; cursor: pointer; font: inherit; border: 1.5px solid var(--line); background: var(--bg-soft, #f7f9f7); transition: border-color .16s ease, background .16s ease, transform .16s ease; } .cc-cat:hover { border-color: var(--red); transform: translateY(-1px); } .cc-cat.is-active { border-color: var(--red); background: var(--acc-tint, #eef6f0); box-shadow: inset 0 0 0 1px var(--red); } .cc-cat__ic { flex: none; color: var(--ink-2); display: grid; place-items: center; } .cc-cat.is-active .cc-cat__ic { color: var(--red); } .cc-cat__tx { min-width: 0; } .cc-cat__tx strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; } .cc-cat__tx em { display: none; } .cc-mkts { display: flex; flex-wrap: wrap; gap: 10px; } .cc-mkt { padding: 10px 16px; border-radius: 999px; cursor: pointer; font: inherit; text-align: center; border: 1.5px solid var(--line); background: var(--bg-soft, #f7f9f7); transition: border-color .16s ease, background .16s ease; } .cc-mkt strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); } .cc-mkt em { display: block; font-style: normal; font-size: 11px; color: var(--ink-2); letter-spacing: .02em; } .cc-mkt:hover { border-color: var(--red); } .cc-mkt.is-active { border-color: var(--red); background: var(--acc-tint, #eef6f0); box-shadow: inset 0 0 0 1px var(--red); } .cc-mkt.is-active strong { color: var(--red); } .cc-specs { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .cc-toggle { cursor: pointer; } .cc-toggle input { position: absolute; opacity: 0; pointer-events: none; } .cc-toggle span { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg-soft, #f7f9f7); font-size: 13.5px; color: var(--ink); transition: border-color .16s ease, background .16s ease; } .cc-toggle input:checked + span { border-color: var(--red); background: var(--acc-tint, #eef6f0); color: var(--red); font-weight: 700; } .cc-volt { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); } .cc-volt select { padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 13.5px; color: var(--ink); } .cc-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; } .cc-quota { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 9px 14px; border-radius: 999px; background: var(--bg-soft, #f7f9f7); border: 1px dashed var(--line-2); } .cc-hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-3, #8a938c); line-height: 1.6; } .cc-result { margin-top: 26px; background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 30px 36px; box-shadow: var(--shadow-sm); } .cc-result__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--red); } .cc-result__head h3 { font-size: 22px; font-weight: 900; color: var(--ink); margin: 6px 0 8px; } .cc-result__head p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0 0 18px; } .cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cc-item { border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 16px; background: var(--bg-soft, #f7f9f7); } .cc-item__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .cc-item__mark { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--red); background: var(--acc-tint, #eef6f0); padding: 3px 9px; border-radius: 6px; border: 1px solid currentColor; } .cc-item__name { font-size: 14.5px; font-weight: 800; color: var(--ink); } .cc-item__cycle { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; } .cc-item__std { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-2); background: rgba(0, 0, 0, .035); border-radius: 7px; padding: 6px 9px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: nowrap; } .cc-item__desc { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; } .cc-notes-list { margin: 16px 0 0; padding: 14px 18px; border-radius: 12px; background: #fff8ec; border: 1px solid #f0dfc0; } .cc-notes-list li { font-size: 13px; color: #6b5b3e; line-height: 1.7; list-style: none; position: relative; padding-left: 18px; } .cc-notes-list li::before { content: '·'; position: absolute; left: 4px; font-weight: 900; } .cc-result__foot { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-2); } .cc-result__tip { font-size: 12px; color: var(--ink-3, #8a938c); margin: 0 0 14px; } .cc-result__acts { display: flex; gap: 12px; flex-wrap: wrap; } .cc-locked { margin-top: 26px; background: linear-gradient(135deg, #fff 55%, var(--acc-tint, #eef6f0)); border: 1.5px solid var(--red); border-radius: 22px; padding: 34px 36px; text-align: center; } .cc-locked__ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #fff; margin-bottom: 12px; } .cc-locked__head h3 { font-size: 20px; font-weight: 900; color: var(--ink); margin: 0 0 8px; } .cc-locked__head p { max-width: 520px; margin: 0 auto; font-size: 14px; color: var(--ink-2); line-height: 1.65; } .cc-locked__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } .cc-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; } .cc-note { display: flex; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; } .cc-note__ic { flex: none; color: var(--red); margin-top: 2px; } .cc-note strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); } .cc-note em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; } @media (max-width: 900px) { .tool-strip { grid-template-columns: 1fr; } .cc-tool { padding: 24px 18px 20px; } .cc-cats { grid-template-columns: repeat(2, 1fr); } .cc-grid { grid-template-columns: 1fr; } .cc-result { padding: 22px 18px; } .cc-locked { padding: 26px 18px; } .cc-notes { grid-template-columns: 1fr; } } @media (max-width: 520px) { .tool-card { padding: 16px; gap: 12px; } .tool-card__ic { width: 46px; height: 46px; border-radius: 12px; } .tool-card__tx strong { font-size: 15.5px; } .cc-cats { grid-template-columns: 1fr 1fr; gap: 8px; } .cc-cat { padding: 10px 11px; } } .dd-title--grp { margin-top: 6px; padding: 8px 12px 6px; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: none; border-bottom: 1px solid var(--line); } .dd-title--grp:first-child { margin-top: 0; } .dropdown a em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted-2); line-height: 1.45; } .dropdown a:hover em { color: var(--red); } .svc-group + .svc-group { margin-top: 46px; } .svc-group__head { margin-bottom: 18px; } .svc-group__title { font-size: 21px; font-weight: 900; color: var(--ink); margin: 4px 0 0; padding-left: 12px; border-left: 3px solid var(--red); line-height: 1.3; } .mobile-nav__sub { display: block; margin: 12px 0 2px; padding: 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--red); } .mobile-nav__kid { padding-left: 18px !important; font-size: 14px !important; } .imp-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; } .imp-toc { position: sticky; top: 92px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 12px; box-shadow: var(--shadow-sm); } .imp-toc__title { display: block; padding: 0 10px 10px; margin-bottom: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--muted-2); border-bottom: 1px solid var(--line); } .imp-toc a { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5; transition: background .16s ease, color .16s ease; } .imp-toc a i { flex: none; font-style: normal; font-weight: 800; font-size: 12px; color: var(--red); margin-top: 1px; } .imp-toc a:hover { background: var(--red-l); color: var(--red); } .imp-body { min-width: 0; } .imp-sec { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 26px 30px; margin-bottom: 18px; box-shadow: var(--shadow-sm); scroll-margin-top: 96px; } .imp-sec__title { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; font-size: 18px; font-weight: 900; color: var(--ink); line-height: 1.5; } .imp-sec__title span { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; } .imp-sec__lead { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.85; } .imp-list { margin: 0; padding: 0; list-style: none; } .imp-list li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.8; } .imp-list li:first-child { border-top: 0; } .imp-list li i { flex: none; font-style: normal; font-weight: 800; font-size: 13px; color: var(--red); min-width: 18px; } .imp-sign { display: flex; gap: 42px; justify-content: flex-end; flex-wrap: wrap; padding: 22px 30px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--bg-soft, #f7f9f7); } .imp-sign span { display: block; font-size: 12px; color: var(--muted-2); letter-spacing: .06em; margin-bottom: 3px; } .imp-sign strong { font-size: 17px; font-weight: 900; color: var(--ink); letter-spacing: .04em; } .foot-impartiality { display: flex; align-items: center; gap: 26px; justify-content: space-between; } .foot-impartiality__tx { max-width: 780px; } .foot-impartiality__link { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--red); background: #fff; color: var(--red); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background .18s ease, color .18s ease, border-color .18s ease; } .foot-impartiality__link:hover { background: var(--red); color: #fff; } @media (max-width: 900px) { .imp-wrap { grid-template-columns: minmax(0, 1fr); gap: 22px; } .imp-toc { position: static; } .imp-sec { padding: 20px 18px; } .imp-sign { gap: 22px; justify-content: flex-start; padding: 18px; } .foot-impartiality { flex-direction: column; align-items: flex-start; gap: 14px; } .foot-impartiality__link { white-space: normal; } } .nav-item--mega { position: static; } .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .nav-item--mega:hover .mega, .nav-item--mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); } .mega__in { max-height: calc(100vh - var(--head-h) - 20px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-top: 3px solid var(--red); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 26px 60px rgba(16, 38, 58, .17); } .mega__arrow { position: absolute; top: -9px; left: var(--mega-x, 50%); width: 0; height: 0; margin-left: -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: var(--red); } .mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 30px; align-items: start; width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 24px 6px; } .mega-col { min-width: 0; } .mega-col__head { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 800; color: var(--navy); line-height: 1.35; letter-spacing: -.01em; } .mega-col__ic { display: inline-flex; flex: none; color: var(--red); } .mega-col__ic .ic { width: 20px; height: 20px; } .mega-col__head:hover .mega-col__name { color: var(--red); } .mega-col__rule { display: block; height: 2px; margin: 9px 0 5px; background: linear-gradient(90deg, var(--red) 0 32px, var(--line) 32px 100%); } .mega-col__list { margin: 0; padding: 0; list-style: none; } .mega-col--dense .mega-col__list { columns: 2; column-gap: 18px; } .mega-link { display: block; width: 100%; text-align: left; padding: 4px 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 400; color: var(--ink-2); line-height: 1.55; transition: color .16s ease; } .mega-link span { border-bottom: 1px solid transparent; transition: border-color .16s ease; } .mega-link:hover { color: var(--red); } .mega-link:hover span { border-bottom-color: currentColor; } .mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 15px max(24px, calc((100% - 1240px) / 2 + 24px)); border-top: 1px solid var(--line); background: var(--surface-1); border-radius: 0 0 var(--r-lg) var(--r-lg); } .mega__foot p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; } .mega__foot .btn { flex: 0 1 auto; white-space: nowrap; } @media (max-width: 1180px) { .mega__grid { gap: 22px 20px; padding: 22px 18px 4px; } .mega-col__head { font-size: 16px; } .mega-link { font-size: 12px; padding: 3.5px 0; } .mega-col__list { columns: 2; column-gap: 16px; } .mega__foot { padding: 14px 18px; } } @media (max-width: 1024px) { .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega__foot { flex-direction: column; align-items: flex-start; gap: 10px; } .mega__foot .btn { white-space: normal; } } .section[id] { scroll-margin-top: calc(var(--head-h) + 16px); } .insight-pager { justify-content: flex-start; margin-top: 18px; } .insight-pager .page-numbers { cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; } .insight-pager .page-numbers[disabled] { opacity: .38; cursor: default; } .insight-pager .page-numbers[disabled]:hover { border-color: var(--line-2); color: var(--ink-2); } .insight-pager__prev .ic { transform: rotate(180deg); } .case-pager .page-numbers { cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; } .case-pager .page-numbers[disabled] { opacity: .38; cursor: default; } .case-pager .page-numbers[disabled]:hover { border-color: var(--line-2); color: var(--ink-2); } .case-pager__prev .ic { transform: rotate(180deg); } .filter-bar, .case-filters, #caseGrid { scroll-margin-top: calc(var(--head-h) + 16px); } .np-masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-bottom: 11px; } .np-masthead__id { display: flex; align-items: center; gap: 10px; } .np-masthead__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 900; font-size: 12px; letter-spacing: .02em; box-shadow: var(--shadow-sm); flex: none; } .np-masthead__txt { display: flex; flex-direction: column; } .np-masthead__name { margin: 0; color: var(--navy); font-size: 17px; font-weight: 800; line-height: 1.1; } .np-masthead__sub { margin-top: 1px; color: var(--muted-2); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .np-masthead__meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; } .np-masthead__meta b { font-family: var(--font-num); color: var(--navy); font-size: 14px; padding: 0 1px; } .np-masthead__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); } .np-desks { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 22px; position: sticky; top: var(--head-h); z-index: 40; margin: 0 0 18px; background: var(--bg); border-bottom: 1px solid var(--line); } .np-desk { position: relative; padding: 9px 1px; color: var(--muted); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: color .18s ease; } .np-desk:hover { color: var(--red); } .np-desk.is-active { color: var(--navy); } .np-desk.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--red); } .np-kicker { display: block; color: var(--red); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .np-kicker i { font-style: normal; color: var(--line-2); margin: 0 7px; } .np-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted-2); font-size: 12.5px; font-weight: 600; } .np-meta i { font-style: normal; color: var(--line-2); } .np-meta time { font-family: var(--font-num); } .np-media { position: relative; overflow: hidden; } .np-media__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; } .np-media--video:hover .np-media__video, .np-media--video.is-playing .np-media__video { opacity: 1; } .np-media__hint { position: absolute; right: 8px; top: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(0, 0, 0, .58); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; transition: opacity .25s ease; } .np-media--video:hover .np-media__hint { opacity: 0; } .np-media__hint .ic { display: block; } .np-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 30px; align-items: start; } .np-lead { min-width: 0; } .np-lead__link { display: block; color: inherit; text-decoration: none; } .np-lead__media { aspect-ratio: 16 / 9; border-radius: var(--r); background: var(--bg-soft-2); } .np-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .np-lead:hover .np-lead__media img { transform: scale(1.03); } .np-lead__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 0; } .np-lead__title { margin: 0; color: var(--ink); font-family: var(--font-portal); font-size: 23px; font-weight: 400; line-height: 1.42; letter-spacing: .01em; transition: color .2s ease; } .np-lead:hover .np-lead__title { color: var(--red); } .np-lead__ex { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.72; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .np-top__side { min-width: 0; border-left: 1px solid var(--line); padding-left: 28px; } .np-sideh { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 15px; font-weight: 800; } .np-sideh::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--red); flex: none; } .np-sideh em { margin-left: auto; font-style: normal; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .np-list { list-style: none; margin: 0; padding: 0; } .np-list li + li { border-top: 1px dashed var(--line); } .np-list a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7.5px 0; color: var(--ink); text-decoration: none; transition: color .18s ease; } .np-list a:hover { color: var(--red); } .np-list__no { font-family: var(--font-num); color: var(--line-2); font-size: 13px; font-weight: 800; } .np-list a:hover .np-list__no { color: var(--red); } .np-list__t { min-width: 0; color: inherit; font-family: var(--font-portal); font-size: 13.5px; font-weight: 400; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .np-list a:hover .np-list__t { text-decoration: underline; text-underline-offset: 3px; } .np-list time { color: var(--muted-2); font-size: 11.5px; font-family: var(--font-num); white-space: nowrap; } .np-list a { display: grid; grid-template-columns: 22px 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; color: var(--ink); text-decoration: none; transition: color .18s ease; } .np-list__thumb { width: 56px; aspect-ratio: 16 / 10; border-radius: 3px; background: var(--bg-soft-2); } .np-list__thumb img { width: 100%; height: 100%; object-fit: cover; } .np-list__thumb--ph { display: grid; place-items: center; color: var(--line-2); box-shadow: inset 0 0 0 1px var(--line); } .np-list__thumb .np-media__hint { display: none; } .np-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 38px; row-gap: 34px; align-items: start; } .np-cols--one { grid-template-columns: minmax(0, 1fr); } .np-sec { margin-top: 0; min-width: 0; } .np-sec__head { display: flex; align-items: center; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--line); } .np-sec__bar { width: 3px; height: 15px; border-radius: 2px; background: var(--red); flex: none; } .np-sec__title { margin: 0; color: var(--ink); font-family: var(--font-portal); font-size: 16px; font-weight: 500; letter-spacing: .01em; } .np-sec__en { font-style: normal; color: var(--muted-2); font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .np-sec__cnt { margin-left: auto; color: var(--muted-2); font-size: 11.5px; font-weight: 700; font-family: var(--font-num); } .np-sec__more { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-2); font-size: 12px; font-weight: 700; text-decoration: none; transition: color .18s ease; } .np-sec__more .ic { transition: transform .2s ease; } .np-sec__more:hover { color: var(--red); } .np-sec__more:hover .ic { transform: translateX(3px); } .np-sec__desc { margin: 7px 0 2px; color: var(--muted); font-size: 13px; line-height: 1.7; } .np-lines { list-style: none; margin: 0; padding: 0; } .np-line { position: relative; border-bottom: 1px dotted var(--line); } .np-line::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; margin-top: -1px; border-radius: 1px; background: var(--line-2); } .np-line a { display: flex; align-items: baseline; gap: 11px; padding: 7.5px 0 7.5px 12px; color: var(--ink); text-decoration: none; } .np-line a:hover { color: var(--red); } .np-line__t { flex: 1; min-width: 0; color: inherit; font-family: var(--font-portal); font-size: 14.5px; font-weight: 400; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .np-line a:hover .np-line__t { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .np-line:hover::before { background: var(--red); } .np-line time { flex: none; color: var(--muted-2); font-size: 11.5px; font-family: var(--font-num); } .np-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .np-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 7px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); font-family: var(--font-portal); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease; } .np-pg:hover { color: var(--red); border-color: var(--red); } .np-pg.is-active { color: #fff; background: var(--red); border-color: var(--red); font-weight: 700; } .np-pg[disabled] { opacity: .4; cursor: default; } .np-pg[disabled]:hover { color: var(--muted); border-color: var(--line); } .np-pg__nums { display: inline-flex; align-items: center; gap: 6px; } .np-pager__sum { margin-left: auto; color: var(--muted-2); font-size: 11.5px; font-family: var(--font-num); } .np-trust { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--line); } .np-trust__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--navy); color: #fff; flex: none; } .np-trust__body { flex: 1; min-width: 0; } .np-trust__body h2 { margin: 0 0 4px; color: var(--navy); font-size: 15.5px; font-weight: 800; } .np-trust__body p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.68; } body.tmc-newsportal .site-footer { max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(24px); pointer-events: none; transition: max-height .45s ease, opacity .3s ease, transform .45s ease, visibility .45s; } body.tmc-newsportal .site-footer.is-reveal { max-height: 2600px; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } @media (max-width: 1180px) { .np-top { gap: 24px; } .np-top__side { padding-left: 22px; } .np-lead__title { font-size: 22px; } .np-cols { column-gap: 28px; row-gap: 30px; } } @media (max-width: 1024px) { .np-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .np-top { grid-template-columns: minmax(0, 1fr); gap: 22px; } .np-top__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; } } @media (max-width: 768px) { .np-desks { gap: 2px 16px; } .np-masthead__mark { width: 34px; height: 34px; border-radius: 9px; font-size: 11px; } .np-masthead__name { font-size: 15px; } .np-lead__title { font-size: 20px; } .np-cols { grid-template-columns: minmax(0, 1fr); row-gap: 26px; } .np-sec__title { font-size: 15.5px; } .np-sec__en { display: none; } .np-line__t { font-size: 14px; } .np-trust { flex-wrap: wrap; } } @media (max-width: 480px) { .np-masthead { gap: 8px 14px; } .np-masthead__mark { width: 32px; height: 32px; border-radius: 8px; font-size: 10.5px; } .np-masthead__name { font-size: 14px; } .np-masthead__sub { font-size: 9px; } .np-lead__title { font-size: 18px; } .np-line__t { font-size: 13px; } } .topbar__check, .topbar__tel, .topbar__mail, .topbar__lang .gt_switcher, .topbar__lang .gt_switcher .gt_selected, .topbar__lang .gt_switcher .gt_current { display: inline-flex; align-items: center; min-height: 32px; } .topbar__check, .topbar__mail { padding-inline: 8px; margin-inline: -8px; } .topbar__lang .gt_switcher, .topbar__lang .gt_switcher .gt_selected { padding-block: 4px; } @media (max-width: 1024px) { .tbl-wrap { background: linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)) left center, linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)) right center, radial-gradient(farthest-side at 0 50%, rgba(20, 22, 28, .13), rgba(20, 22, 28, 0)) left center, radial-gradient(farthest-side at 100% 50%, rgba(20, 22, 28, .13), rgba(20, 22, 28, 0)) right center, #fff; background-repeat: no-repeat; background-size: 42px 100%, 42px 100%, 15px 100%, 15px 100%, 100% 100%; background-attachment: local, local, scroll, scroll, scroll; } } .art-meta { flex-wrap: wrap; gap: 6px 14px; } .art-stats { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; } .art-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; } .art-stat .ic { color: var(--green); opacity: .8; } .art-stat b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .art-like { border: 1px solid var(--line-2); background: var(--bg-soft); color: var(--muted); border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: all .15s ease; font: inherit; } .art-like:hover { border-color: var(--red); color: var(--red); } .art-like.is-liked { background: var(--red-l); border-color: var(--red); color: var(--red-d); } .art-like.is-liked .ic { fill: var(--red); opacity: 1; } .art-like .ic { transition: transform .15s ease; } .art-like.is-liked .ic { transform: scale(1.1); } .np-line__stat { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 12px; color: var(--muted-2); white-space: nowrap; } .np-line__stat .ic { color: var(--green); opacity: .7; } .np-line__stat b { font-weight: 600; font-variant-numeric: tabular-nums; } .tmc-comments-sec { background: var(--bg-soft); } .tmc-comments-sec .tmc-comments-n { color: var(--red); } .tmc-comments { max-width: 760px; } .tmc-comments__empty { color: var(--muted); } .tmc-comment-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 18px; } .tmc-comment { display: flex; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; } .tmc-comment--pinned { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-l) inset; } .tmc-comment__avatar img { border-radius: 50%; display: block; } .tmc-comment__body { flex: 1; min-width: 0; } .tmc-comment__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); } .tmc-comment__author { font-weight: 600; color: var(--ink); } .tmc-comment__pin { display: inline-flex; align-items: center; gap: 3px; color: var(--red-d); background: var(--red-l); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; } .tmc-comment__text { margin: 8px 0 6px; color: var(--ink-2); line-height: 1.7; } .tmc-comment__text p { margin: 0 0 8px; } .tmc-comment__actions { font-size: 13px; color: var(--muted); } .tmc-comment__actions a { color: var(--green); margin-right: 12px; } .tmc-comment__actions a:hover { color: var(--red); } .tmc-comment-nav { margin: 0 0 24px; } .tmc-comments .comment-respond { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; } .tmc-comments .comment-reply-title { font-size: 18px; margin: 0 0 12px; color: var(--ink); } .tmc-comments .comment-form { display: grid; gap: 12px; } .tmc-comments .comment-form-author, .tmc-comments .comment-form-email, .tmc-comments .comment-form-comment { display: flex; flex-direction: column; gap: 6px; margin: 0; } .tmc-comments .comment-form label { font-size: 13px; color: var(--muted); } .tmc-comments .comment-form input, .tmc-comments .comment-form textarea { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--bg-soft); resize: vertical; } .tmc-comments .comment-form input:focus, .tmc-comments .comment-form textarea:focus { outline: none; border-color: var(--red); background: #fff; } .tmc-comments .form-submit { margin: 0; } .tmc-comments .submit { border: 0; background: var(--red); color: #fff; font: inherit; font-weight: 600; border-radius: 10px; padding: 11px 22px; cursor: pointer; } .tmc-comments .submit:hover { background: var(--red-d); } .tmc-comments .comment-form-cookies-consent { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; } .tmc-comments .comment-notes, .tmc-comments .logged-in-as { font-size: 13px; color: var(--muted); margin: 0; } .tmc-comments .must-log-in, .tmc-comments .comment-must-login { display: none !important; } .tmc-pin-link { color: var(--red-d); } @media (max-width: 600px) { .art-stats { width: 100%; margin-left: 0; } }