/* one-variables.css */ #one-dom-container { --font-r: OPPOSans-Ver2-Regular, OPPOSans-Regular, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Helvetica, Arial, sans-serif; --font-m: OPPOSans-Ver2-Medium, OPPOSans-Medium, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Helvetica, Arial, sans-serif; --font-b: OPPOSans-Ver2-Bold, OPPOSans-Bold, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Helvetica, Arial, sans-serif; } /* ≥1024(PC) */ @media screen and (min-width: 1024px) { #one-dom-container { /* typography tokens */ /* number */ --component-chapter-page-spacing-2: 3.2em; --component-chapter-page-spacing-1: 9.2em; --component-chapter-page-width: 72em; --component-toggle-control-01-spacing: 1em; --component-toggle-control-01-size: 2.4em; --component-toggle-control-02-outline: 0.075em; --component-toggle-control-02-spacing: 0.8em; --component-toggle-control-02-size: 1.4em; --component-toggle-control-05-size: 1.6em; --component-toggle-control-06-spacing: 0.4em; --component-toggle-control-06-spacing-2: 1em; --component-toggle-control-07-spacing: 0.4em; --component-toggle-control-07-spacing-2: 1em; --component-toggle-control-08-spacing: 0.2em; --component-toggle-control-08-spacing-2: 0.4em; --component-toggle-control-08-spacing-3: 0.6em; --semantic-corner-radius-level-3: 0.4em; --semantic-corner-radius-level-2: 0.6em; --semantic-corner-radius-level-1: 0.8em; --semantic-font-line-height-footnote-1: 166.667%; --semantic-font-line-height-body-3: 157.143%; --semantic-font-line-height-body-2: 150%; --semantic-font-line-height-body-1: 144.444%; --semantic-font-line-height-sub-head-3: 140%; --semantic-font-line-height-sub-head-2: 133.333%; --semantic-font-line-height-sub-head-1: 125%; --semantic-font-line-height-head-3: 122.222%; --semantic-font-line-height-head-2: 119.048%; --semantic-font-line-height-head-1: 125%; --semantic-font-line-height-head-0: 111.765%; --semantic-font-size-footnote-1: 12px; --semantic-font-size-body-3: 14px; --semantic-font-size-body-2: 16px; --semantic-font-size-body-1: 18px; --semantic-font-size-sub-head-3: 20px; --semantic-font-size-sub-head-2: 24px; --semantic-font-size-sub-head-1: 32px; --semantic-font-size-head-3: 36px; --semantic-font-size-head-2: 42px; --semantic-font-size-head-1: 48px; --semantic-font-size-head-0: 68px; --semantic-space-inset-level-7: 0.2em; --semantic-space-inset-level-6: 0.4em; --semantic-space-inset-level-5: 0.6em; --semantic-space-inset-level-4: 0.8em; --semantic-space-inset-level-3: 1em; --semantic-space-inset-level-2: 1.2em; --semantic-space-inset-level-1: 2.4em; --semantic-space-stack-level-2: 3.2em; --semantic-space-stack-level-1: 4em; /* string */ --component-button-arrow-on-card-port: pc; --component-ksp-layout: PC; } } /* 650(PAD) ≤ W < 1024 */ @media screen and (max-width: 1023px) and (min-width: 650px) { #one-dom-container { /* typography tokens */ /* number */ --component-chapter-page-spacing-2: 1.2em; --component-chapter-page-spacing-1: 7em; --component-chapter-page-width: 38.4em; --component-toggle-control-01-spacing: 1em; --component-toggle-control-01-size: 2em; --component-toggle-control-02-outline: 0.075em; --component-toggle-control-02-spacing: 0.8em; --component-toggle-control-02-size: 1.4em; --component-toggle-control-05-size: 1.6em; --component-toggle-control-06-spacing: 0.2em; --component-toggle-control-06-spacing-2: 0.8em; --component-toggle-control-07-spacing: 0.2em; --component-toggle-control-07-spacing-2: 0.8em; --component-toggle-control-08-spacing: 0.2em; --component-toggle-control-08-spacing-2: 0.2em; --component-toggle-control-08-spacing-3: 0.4em; --semantic-corner-radius-level-3: 0.2em; --semantic-corner-radius-level-2: 0.4em; --semantic-corner-radius-level-1: 0.6em; --semantic-font-line-height-footnote-1: 166.667%; --semantic-font-line-height-body-3: 166.667%; --semantic-font-line-height-body-2: 157.143%; --semantic-font-line-height-body-1: 150%; --semantic-font-line-height-sub-head-3: 150%; --semantic-font-line-height-sub-head-2: 140%; --semantic-font-line-height-sub-head-1: 133.333%; --semantic-font-line-height-head-3: 128.571%; --semantic-font-line-height-head-2: 122.222%; --semantic-font-line-height-head-1: 126.667%; --semantic-font-line-height-head-0: 116.667%; --semantic-font-size-footnote-1: 12px; --semantic-font-size-body-3: 12px; --semantic-font-size-body-2: 14px; --semantic-font-size-body-1: 16px; --semantic-font-size-sub-head-3: 16px; --semantic-font-size-sub-head-2: 20px; --semantic-font-size-sub-head-1: 24px; --semantic-font-size-head-3: 28px; --semantic-font-size-head-2: 36px; --semantic-font-size-head-1: 30px; --semantic-font-size-head-0: 48px; --semantic-space-inset-level-6: 0.2em; --semantic-space-inset-level-7: 0.2em; --semantic-space-inset-level-5: 0.4em; --semantic-space-inset-level-4: 0.6em; --semantic-space-inset-level-3: 0.8em; --semantic-space-inset-level-2: 0.9em; --semantic-space-inset-level-1: 1.2em; --semantic-space-stack-level-2: 1.2em; --semantic-space-stack-level-1: 2.4em; /* string */ --component-button-arrow-on-card-port: pad; --component-ksp-layout: Pad; } } /* 360(PHONE) ≤ W ≤ 650 */ @media screen and (max-width: 649px) { #one-dom-container { /* typography tokens */ /* number */ --component-chapter-page-spacing-2: 0.8em; --component-chapter-page-spacing-1: 4em; --component-chapter-page-width: 18em; --component-toggle-control-01-spacing: 0.8em; --component-toggle-control-01-size: 1.6em; --component-toggle-control-02-outline: 0.05em; --component-toggle-control-02-spacing: 0.6em; --component-toggle-control-02-size: 1em; --component-toggle-control-05-size: 1.2em; --component-toggle-control-06-spacing: 0.2em; --component-toggle-control-06-spacing-2: 0.8em; --component-toggle-control-07-spacing: 0.2em; --component-toggle-control-07-spacing-2: 0.8em; --component-toggle-control-08-spacing: 0.2em; --component-toggle-control-08-spacing-2: 0.2em; --component-toggle-control-08-spacing-3: 0.4em; --semantic-corner-radius-level-3: 0.2em; --semantic-corner-radius-level-2: 0.4em; --semantic-corner-radius-level-1: 0.6em; --semantic-font-line-height-footnote-1: 166.667%; --semantic-font-line-height-body-3: 166.667%; --semantic-font-line-height-body-2: 157.143%; --semantic-font-line-height-body-1: 150%; --semantic-font-line-height-sub-head-3: 150%; --semantic-font-line-height-sub-head-2: 140%; --semantic-font-line-height-sub-head-1: 133.333%; --semantic-font-line-height-head-3: 128.571%; --semantic-font-line-height-head-2: 122.222%; --semantic-font-line-height-head-1: 126.667%; --semantic-font-line-height-head-0: 122.222%; --semantic-font-size-footnote-1: 12px; --semantic-font-size-body-3: 12px; --semantic-font-size-body-2: 14px; --semantic-font-size-body-1: 16px; --semantic-font-size-sub-head-3: 16px; --semantic-font-size-sub-head-2: 20px; --semantic-font-size-sub-head-1: 24px; --semantic-font-size-head-3: 28px; --semantic-font-size-head-2: 36px; --semantic-font-size-head-1: 30px; --semantic-font-size-head-0: 36px; --semantic-space-inset-level-6: 0.2em; --semantic-space-inset-level-7: 0.2em; --semantic-space-inset-level-5: 0.4em; --semantic-space-inset-level-4: 0.6em; --semantic-space-inset-level-3: 0.8em; --semantic-space-inset-level-2: 0.9em; --semantic-space-inset-level-1: 1.2em; --semantic-space-stack-level-2: 0.8em; --semantic-space-stack-level-1: 2.4em; /* string */ --component-button-arrow-on-card-port: wap; --component-ksp-layout: Phone; } } /* Color Tokens */ /* light */ /* color */ #one-dom-container .wt { --component-button-bg-primary-black-default: var(--semantic-surface-primary-gray---l1---100); --component-button-bg-primary-black-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-black-overlay-hover: var(--primitives-neutral-white-25a); --component-button-bg-primary-brand-default: var(--semantic-surface-brand-fixed---green); --component-button-bg-primary-brand-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-brand-overlay-hover: var(--primitives-neutral-black-20a); --component-button-bg-primary-gray-default: var(--semantic-surface-primary-fixed---l7---08); --component-button-bg-primary-gray-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-gray-overlay-hover: var(--primitives-neutral-black-08a); --component-button-bg-primary-opa-high-default: var(--semantic-surface-primary-opacity---black-l5---25a); --component-button-bg-primary-opa-high-disable: var(--semantic-surface-primary-opacity---black-l8---08a); --component-button-bg-primary-opa-high-overlay-hover: var(--primitives-neutral-black-00a); --component-button-bg-primary-opa-low-default: var(--semantic-surface-primary-opacity---black-l8---08a); --component-button-bg-primary-opa-low-disable: var(--semantic-surface-primary-opacity---black-l10---02a); --component-button-bg-primary-opa-low-overlay-hover: var(--primitives-neutral-black-00a); --component-button-bg-secondary-black-default: var(--primitives-neutral-black-00a); --component-button-bg-secondary-black-disable: var(--primitives-neutral-black-00a); --component-button-bg-secondary-black-overlay-hover: var(--primitives-neutral-black-08a); --component-button-bg-secondary-gray-default: var(--primitives-neutral-black-00a); --component-button-bg-secondary-gray-disable: var(--primitives-neutral-black-00a); --component-button-bg-secondary-gray-overlay-hover: var(--primitives-neutral-black-08a); --component-button-border-secondary-black-default: var(--semantic-border-primary-black-l1---100); --component-button-border-secondary-black-disable: var(--semantic-border-primary-black-l3---20a); --component-button-border-secondary-black-hover: var(--semantic-border-primary-black-l1---100); --component-button-border-secondary-gray-default: var(--semantic-border-primary-black-l4---15a); --component-button-border-secondary-gray-disable: var(--semantic-border-primary-black-l3---20a); --component-button-border-secondary-gray-hover: var(--semantic-border-primary-black-l4---15a); --component-button-icon-primary-black-default: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-icon-primary-black-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-black-hover: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-icon-primary-brand-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-brand-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-brand-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-gray-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-gray-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-gray-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-opa-high-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-high-disable: var(--semantic-text-primary-opacity---black-l6---20a); --component-button-icon-primary-opa-high-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-low-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-low-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-icon-primary-opa-low-overlay-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-black-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-black-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-icon-secondary-black-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-gray-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-gray-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-icon-secondary-gray-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-black-default: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-text-primary-black-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-black-hover: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-text-primary-brand-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-brand-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-brand-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-gray-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-gray-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-gray-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-opa-high-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-high-disable: var(--semantic-text-primary-opacity---black-l6---20a); --component-button-text-primary-opa-high-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-low-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-low-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-text-primary-opa-low-overlay-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-black-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-black-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-text-secondary-black-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-gray-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-gray-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-text-secondary-gray-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-bg-primary-black-opa: var(--semantic-surface-primary-opacity---black-l9---04a); --component-card-info-bg-primary-black-opa-select: var(--semantic-surface-primary-opacity---black-l7---12a); --component-card-info-bg-primary-white: var(--semantic-surface-primary-gray---l9---02); --component-card-info-bg-primary-white-opa: var(--semantic-surface-primary-opacity---white-l4---45a); --component-card-info-bg-primary-white-opa-select: var(--semantic-surface-primary-gray---l10---00); --component-card-info-icon-primary-black-opa: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white-opa: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white-opa-white-bg: var(--semantic-icon-primary-on-surface---white-l1---00); --component-card-info-text-primary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-black-opa-select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-black-opa-select-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-card-info-text-primary-white-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-white-l2: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-info-text-primary-white-opa: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-info-text-primary-white-opa--select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-white-opa-select-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-card-info-text-primary-white-link: var(--semantic-text-state-link&tip); --component-card-info-text-secondary: var(--semantic-text-primary-opacity---black-l5---30a); --component-card-info-text-secondary-select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-secondary-select-l2: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-mark-bg-primary-black-opa: var(--semantic-surface-primary-opacity---black-l3---55a); --component-card-mark-bg-primary-gray-opa: var(--semantic-surface-primary-opacity---black-l8---08a); --component-card-mark-bg-primary-white: var(--semantic-surface-primary-gray---l10---00); --component-card-mark-border-secondary-black-opa: var(--semantic-border-primary-black-l2---50a); --component-card-mark-border-secondary-gray-opa: var(--primitives-neutral-black-10a); --component-card-mark-border-secondary-white: var(--semantic-border-primary-black-l1---100); --component-card-mark-divider-primary-gray-opa: var(--primitives-neutral-black-08a); --component-card-mark-icon-primary-black-opa: var(--semantic-text-primary-on-surface---white-l1---00); --component-card-mark-icon-primary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-primary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-primary-black-opa: var(--semantic-text-primary-on-surface---white-l1---00); --component-card-mark-text-primary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-primary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-tab-bar-bg-primary: var(--semantic-surface-primary-opacity---black-l9---04a); --component-card-tab-bar-bg-primary-select: var(--semantic-surface-primary-fixed---l10---00); --component-card-tab-bar-divider-primary: var(--primitives-neutral-black-04a); --component-card-tab-bar-text-primary: var(--semantic-surface-primary-gray---l1---100); --component-card-tab-bar-text-primary-select: var(--semantic-surface-primary-fixed---l1---100); --component-card-tab-bar-text-secondary: var(--semantic-surface-primary-opacity---black-l4---35a); --component-card-tab-bar-text-secondary-select: var(--semantic-surface-primary-gray---l1---100); --component-text-body-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-body-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-body-l3: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-data-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-headine-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-remark-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-remark-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-remark-l2-2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-remark-l3: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-remark-l3-2: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-subtitle-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-subtitle-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-subtitle-l3: var(--semantic-text-primary-opacity---black-l4---55a); --primitives-brand-blue: #2660f5; --primitives-brand-brand-brown: #a07e6d; --primitives-brand-brand-gray02: #fafafa; --primitives-brand-brand-gray04: #f5f4f0; --primitives-brand-brand-gray08: #ebe8e3; --primitives-brand-brand-gray13: #ddd9d4; --primitives-brand-brand-gray23: #c3bfb9; --primitives-brand-brand-gray38: #9e9a94; --primitives-brand-brand-gray56: #706c66; --primitives-brand-brand-gray72: #484540; --primitives-brand-brand-gray87: #201f1c; --primitives-brand-brand-green: #2cff73; --primitives-brand-brand-light-green: #d7ffdb; --primitives-brand-brand-purple: #b995ff; --primitives-brand-brand-theme-green: #26c05d; --primitives-brand-light-blue: #e8f3ff; --primitives-brand-light-red: #fdefed; --primitives-brand-red: #e23220; --primitives-neutral-black-00a: #00000000; --primitives-neutral-black-02a: #00000005; --primitives-neutral-black-04a: #0000000a; --primitives-neutral-black-08a: #00000014; --primitives-neutral-black-10a: #0000001a; --primitives-neutral-black-12a: #0000001f; --primitives-neutral-black-15a: #00000026; --primitives-neutral-black-20a: #00000033; --primitives-neutral-black-25a: #00000040; --primitives-neutral-black-30a: #0000004d; --primitives-neutral-black-35a: #00000059; --primitives-neutral-black-50a: #00000080; --primitives-neutral-black-55a: #0000008c; --primitives-neutral-black-60a: #00000099; --primitives-neutral-black-70a: #000000b2; --primitives-neutral-black-75a: #000000bf; --primitives-neutral-black-80a: #000000cc; --primitives-neutral-black-84a: #000000d6; --primitives-neutral-black-90a: #000000e5; --primitives-neutral-black-95a: #000000f2; --primitives-neutral-gray-00: #ffffff; --primitives-neutral-gray-02: #fafafa; --primitives-neutral-gray-04: #f6f6f6; --primitives-neutral-gray-08: #ebebeb; --primitives-neutral-gray-10: #e6e6e6; --primitives-neutral-gray-100: #000000; --primitives-neutral-gray-12: #e0e0e0; --primitives-neutral-gray-15: #d9d9d9; --primitives-neutral-gray-20: #cccccc; --primitives-neutral-gray-25: #bfbfbf; --primitives-neutral-gray-30: #b3b3b3; --primitives-neutral-gray-35: #a6a6a6; --primitives-neutral-gray-50: #808080; --primitives-neutral-gray-55: #737373; --primitives-neutral-gray-60: #666666; --primitives-neutral-gray-70: #4d4d4d; --primitives-neutral-gray-75: #404040; --primitives-neutral-gray-80: #333333; --primitives-neutral-gray-84: #282828; --primitives-neutral-gray-90: #1a1a1a; --primitives-neutral-gray-95: #0d0d0d; --primitives-neutral-white-00a: #ffffff00; --primitives-neutral-white-05a: #ffffff0d; --primitives-neutral-white-10a: #ffffff1a; --primitives-neutral-white-16a: #ffffff29; --primitives-neutral-white-20a: #ffffff33; --primitives-neutral-white-25a: #ffffff40; --primitives-neutral-white-30a: #ffffff4d; --primitives-neutral-white-40a: #ffffff66; --primitives-neutral-white-45a: #ffffff73; --primitives-neutral-white-50a: #ffffff80; --primitives-neutral-white-65a: #ffffffa6; --primitives-neutral-white-70a: #ffffffb2; --primitives-neutral-white-75a: #ffffffbf; --primitives-neutral-white-80a: #ffffffcc; --primitives-neutral-white-85a: #ffffffd9; --primitives-neutral-white-88a: #ffffffe0; --primitives-neutral-white-90a: #ffffffe5; --primitives-neutral-white-92a: #ffffffeb; --primitives-neutral-white-96a: #fffffff5; --primitives-neutral-white-98a: #fffffffa; --semantic-background-primary-cold-gray--04: #f4f3f6; --semantic-background-primary-warm-gray---07: #eceae6; --semantic-background-primary-gray---l1---00: var(--primitives-neutral-gray-00); --semantic-background-primary-gray---l2--02: var(--primitives-neutral-gray-02); --semantic-background-primary-gray---l3---04: var(--primitives-neutral-gray-04); --semantic-background-primary-gray---l4---15: var(--primitives-neutral-gray-15); --semantic-border-primary-black-l1---100: var(--primitives-neutral-gray-100); --semantic-border-primary-black-l2---50a: var(--primitives-neutral-black-50a); --semantic-border-primary-black-l3---20a: var(--primitives-neutral-black-20a); --semantic-border-primary-black-l4---15a: var(--primitives-neutral-black-15a); --semantic-divider-primary-gray---l1---15: var(--primitives-neutral-gray-15); --semantic-divider-primary-gray---l2---04: var(--primitives-neutral-gray-04); --semantic-icon-miscellaneous-border-button---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-fixed---black-l1---100: var(--primitives-neutral-gray-100); --semantic-icon-primary-fixed---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-icon-primary-fixed---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-icon-primary-fixed---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-icon-primary-fixed---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-fixed---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-icon-primary-fixed---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-icon-primary-fixed---white-l1---00: var(--primitives-neutral-gray-00); --semantic-icon-primary-fixed---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-icon-primary-fixed---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-icon-primary-fixed---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-icon-primary-fixed---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-icon-primary-fixed---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-icon-primary-fixed---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-icon-primary-on-surface---white-l1---00: var(--primitives-neutral-gray-00); --semantic-icon-primary-on-surface---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-icon-primary-on-surface---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-icon-primary-on-surface---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-icon-primary-on-surface---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-icon-primary-on-surface---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-icon-primary-on-surface---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-icon-primary-opacity---black-l1---100: var(--primitives-neutral-gray-100); --semantic-icon-primary-opacity---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-icon-primary-opacity---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-icon-primary-opacity---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-icon-primary-opacity---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-opacity---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-icon-primary-opacity---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-icon-state-error: var(--primitives-brand-red); --semantic-icon-state-link-tip: var(--primitives-brand-blue); --semantic-overlay-black-fixed---l1---20a: var(--primitives-neutral-black-20a); --semantic-overlay-black-fixed---l2---12a: var(--primitives-neutral-black-12a); --semantic-overlay-black-fixed---l3---08a: var(--primitives-neutral-black-08a); --semantic-overlay-black-fixed---l4---04a: var(--primitives-neutral-black-04a); --semantic-overlay-white-fixed---l1---20a: var(--primitives-neutral-white-20a); --semantic-overlay-white-fixed---l2---12a: var(--primitives-neutral-white-16a); --semantic-overlay-white-fixed---l3---10a: var(--primitives-neutral-white-10a); --semantic-overlay-white-fixed---l4---05a: var(--primitives-neutral-white-05a); --semantic-surface-brand-fixed---brown: var(--primitives-brand-brand-brown); --semantic-surface-brand-fixed---gray-l1---87: var(--primitives-brand-brand-gray87); --semantic-surface-brand-fixed---gray-l2---72: var(--primitives-brand-brand-gray72); --semantic-surface-brand-fixed---gray-l3---56: var(--primitives-brand-brand-gray56); --semantic-surface-brand-fixed---gray-l4---38: var(--primitives-brand-brand-gray38); --semantic-surface-brand-fixed---gray-l5---23: var(--primitives-brand-brand-gray23); --semantic-surface-brand-fixed---gray-l6---13: var(--primitives-brand-brand-gray13); --semantic-surface-brand-fixed---gray-l7---08: var(--primitives-brand-brand-gray08); --semantic-surface-brand-fixed---gray-l8---04: var(--primitives-brand-brand-gray04); --semantic-surface-brand-fixed---gray-l9---02: var(--primitives-brand-brand-gray02); --semantic-surface-brand-fixed---green: var(--primitives-brand-brand-green); --semantic-surface-brand-fixed---light-green: var(--primitives-brand-brand-light-green); --semantic-surface-brand-fixed---purple: var(--primitives-brand-brand-purple); --semantic-surface-brand-fixed---theme-green: var(--primitives-brand-brand-theme-green); --semantic-surface-brand-gray---l1---13: var(--primitives-brand-brand-gray13); --semantic-surface-brand-gray---l2---13: var(--primitives-brand-brand-gray13); --semantic-surface-brand-gray---l3---04: var(--primitives-brand-brand-gray04); --semantic-surface-brand-gray---l4---02: var(--primitives-brand-brand-gray02); --semantic-surface-brand-gray---l5---02: var(--primitives-brand-brand-gray02); --semantic-surface-primary-fixed---l1---100: var(--primitives-neutral-gray-100); --semantic-surface-primary-fixed---l10---00: var(--primitives-neutral-gray-00); --semantic-surface-primary-fixed---l2---75: var(--primitives-neutral-gray-80); --semantic-surface-primary-fixed---l3---70: var(--primitives-neutral-gray-70); --semantic-surface-primary-fixed---l4---25: var(--primitives-neutral-gray-25); --semantic-surface-primary-fixed---l5---15: var(--primitives-neutral-gray-15); --semantic-surface-primary-fixed---l6---12: var(--primitives-neutral-gray-12); --semantic-surface-primary-fixed---l7---08: var(--primitives-neutral-gray-08); --semantic-surface-primary-fixed---l8---04: var(--primitives-neutral-gray-04); --semantic-surface-primary-fixed---l9---02: var(--primitives-neutral-gray-02); --semantic-surface-primary-gray---l1---100: var(--primitives-neutral-gray-100); --semantic-surface-primary-gray---l10---00: var(--primitives-neutral-gray-00); --semantic-surface-primary-gray---l2---80: var(--primitives-neutral-gray-80); --semantic-surface-primary-gray---l3---70: var(--primitives-neutral-gray-70); --semantic-surface-primary-gray---l4---25: var(--primitives-neutral-gray-25); --semantic-surface-primary-gray---l5---15: var(--primitives-neutral-gray-15); --semantic-surface-primary-gray---l6---12: var(--primitives-neutral-gray-12); --semantic-surface-primary-gray---l7---08: var(--primitives-neutral-gray-08); --semantic-surface-primary-gray---l8---04: var(--primitives-neutral-gray-04); --semantic-surface-primary-gray---l9---02: var(--primitives-neutral-gray-02); --semantic-surface-primary-opacity---black-l1---75a: var(--primitives-neutral-black-75a); --semantic-surface-primary-opacity---black-l10---02a: var(--primitives-neutral-black-02a); --semantic-surface-primary-opacity---black-l2---70a: var(--primitives-neutral-black-70a); --semantic-surface-primary-opacity---black-l3---55a: var(--primitives-neutral-black-55a); --semantic-surface-primary-opacity---black-l4---35a: var(--primitives-neutral-black-35a); --semantic-surface-primary-opacity---black-l5---25a: var(--primitives-neutral-black-25a); --semantic-surface-primary-opacity---black-l6---15a: var(--primitives-neutral-black-15a); --semantic-surface-primary-opacity---black-l7---12a: var(--primitives-neutral-black-12a); --semantic-surface-primary-opacity---black-l8---08a: var(--primitives-neutral-black-08a); --semantic-surface-primary-opacity---black-l9---04a: var(--primitives-neutral-black-04a); --semantic-surface-primary-opacity---white-l1---80a: var(--primitives-neutral-white-80a); --semantic-surface-primary-opacity---white-l10---05a: var(--primitives-neutral-white-05a); --semantic-surface-primary-opacity---white-l2---75a: var(--primitives-neutral-white-75a); --semantic-surface-primary-opacity---white-l3---65a: var(--primitives-neutral-white-65a); --semantic-surface-primary-opacity---white-l4---45a: var(--primitives-neutral-white-45a); --semantic-surface-primary-opacity---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-surface-primary-opacity---white-l6---25a: var(--primitives-neutral-white-25a); --semantic-surface-primary-opacity---white-l7---20a: var(--primitives-neutral-white-20a); --semantic-surface-primary-opacity---white-l8---16a: var(--primitives-neutral-white-16a); --semantic-surface-primary-opacity---white-l9---10a: var(--primitives-neutral-white-10a); --semantic-surface-state-error: var(--primitives-brand-light-red); --semantic-surface-state-link-tip: var(--primitives-brand-light-blue); --semantic-surface-state-un-active---20: var(--primitives-neutral-gray-20); --semantic-text-primary-fixed---black-l1---100: var(--primitives-neutral-gray-100); --semantic-text-primary-fixed---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-text-primary-fixed---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-text-primary-fixed---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-text-primary-fixed---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-text-primary-fixed---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-text-primary-fixed---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-text-primary-fixed---white-l1---00: var(--primitives-neutral-gray-00); --semantic-text-primary-fixed---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-text-primary-fixed---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-text-primary-fixed---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-text-primary-fixed---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-text-primary-fixed---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-text-primary-fixed---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-text-primary-on-surface---white-l1---00: var(--primitives-neutral-gray-00); --semantic-text-primary-on-surface---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-text-primary-on-surface---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-text-primary-on-surface---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-text-primary-on-surface---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-text-primary-on-surface---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-text-primary-on-surface---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-text-primary-opacity---black-l1---100: var(--primitives-neutral-gray-100); --semantic-text-primary-opacity---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-text-primary-opacity---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-text-primary-opacity---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-text-primary-opacity---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-text-primary-opacity---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-text-primary-opacity---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-text-state-error: var(--primitives-brand-red); --semantic-text-state-link-tip: var(--primitives-brand-blue); } /* dark */ /* color */ #one-dom-container .bk { --component-button-bg-primary-black-default: var(--semantic-surface-primary-gray---l1---100); --component-button-bg-primary-black-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-black-overlay-hover: var(--primitives-neutral-black-15a); --component-button-bg-primary-brand-default: var(--semantic-surface-brand-fixed---green); --component-button-bg-primary-brand-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-brand-overlay-hover: var(--primitives-neutral-black-35a); --component-button-bg-primary-gray-default: var(--semantic-surface-primary-fixed---l7---08); --component-button-bg-primary-gray-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-gray-overlay-hover: var(--primitives-neutral-black-15a); --component-button-bg-primary-opa-high-default: var(--semantic-surface-primary-opacity---black-l5---25a); --component-button-bg-primary-opa-high-disable: var(--semantic-surface-primary-opacity---black-l8---08a); --component-button-bg-primary-opa-high-overlay-hover: var(--primitives-neutral-white-00a); --component-button-bg-primary-opa-low-default: var(--semantic-surface-primary-opacity---black-l8---08a); --component-button-bg-primary-opa-low-disable: var(--semantic-surface-primary-opacity---black-l10---02a); --component-button-bg-primary-opa-low-overlay-hover: var(--primitives-neutral-white-00a); --component-button-bg-secondary-black-default: var(--primitives-neutral-white-00a); --component-button-bg-secondary-black-disable: var(--primitives-neutral-white-00a); --component-button-bg-secondary-black-overlay-hover: var(--primitives-neutral-white-30a); --component-button-bg-secondary-gray-default: var(--primitives-neutral-white-00a); --component-button-bg-secondary-gray-disable: var(--primitives-neutral-white-00a); --component-button-bg-secondary-gray-overlay-hover: var(--primitives-neutral-white-30a); --component-button-border-secondary-black-default: var(--semantic-border-primary-black-l1---100); --component-button-border-secondary-black-disable: var(--semantic-border-primary-black-l2---50a); --component-button-border-secondary-black-hover: var(--semantic-border-primary-black-l1---100); --component-button-border-secondary-gray-default: var(--semantic-border-primary-black-l2---50a); --component-button-border-secondary-gray-disable: var(--semantic-border-primary-black-l2---50a); --component-button-border-secondary-gray-hover: var(--semantic-border-primary-black-l2---50a); --component-button-icon-primary-black-default: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-icon-primary-black-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-black-hover: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-icon-primary-brand-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-brand-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-brand-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-gray-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-gray-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-gray-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-opa-high-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-high-disable: var(--semantic-text-primary-opacity---black-l6---20a); --component-button-icon-primary-opa-high-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-low-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-low-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-icon-primary-opa-low-overlay-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-black-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-black-disable: var(--semantic-text-primary-opacity---black-l4---55a); --component-button-icon-secondary-black-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-gray-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-gray-disable: var(--semantic-text-primary-opacity---black-l4---55a); --component-button-icon-secondary-gray-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-black-default: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-text-primary-black-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-black-hover: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-text-primary-brand-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-brand-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-brand-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-gray-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-gray-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-gray-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-opa-high-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-high-disable: var(--semantic-text-primary-opacity---black-l6---20a); --component-button-text-primary-opa-high-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-low-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-low-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-text-primary-opa-low-overlay-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-black-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-black-disable: var(--semantic-text-primary-opacity---black-l4---55a); --component-button-text-secondary-black-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-gray-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-gray-disable: var(--semantic-text-primary-opacity---black-l4---55a); --component-button-text-secondary-gray-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-bg-primary-black-opa: var(--semantic-surface-primary-opacity---black-l9---04a); --component-card-info-bg-primary-black-opa-select: var(--semantic-surface-primary-opacity---black-l7---12a); --component-card-info-bg-primary-white: var(--semantic-surface-primary-gray---l9---02); --component-card-info-bg-primary-white-opa: var(--semantic-surface-primary-opacity---white-l4---45a); --component-card-info-bg-primary-white-opa-select: var(--semantic-surface-primary-gray---l10---00); --component-card-info-icon-primary-black-opa: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white-opa: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white-opa-white-bg: var(--semantic-icon-primary-on-surface---white-l1---00); --component-card-info-text-primary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-black-opa-select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-black-opa-select-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-card-info-text-primary-white-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-white-l2: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-info-text-primary-white-opa: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-info-text-primary-white-opa--select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-white-opa-select-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-card-info-text-primary-white-link: var(--semantic-text-state-link&tip); --component-card-info-text-secondary: var(--semantic-text-primary-opacity---black-l5---30a); --component-card-info-text-secondary-select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-secondary-select-l2: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-mark-bg-primary-black-opa: var(--semantic-surface-primary-opacity---black-l3---55a); --component-card-mark-bg-primary-gray-opa: var(--semantic-surface-primary-opacity---black-l8---08a); --component-card-mark-bg-primary-white: var(--semantic-surface-primary-gray---l10---00); --component-card-mark-border-secondary-black-opa: var(--semantic-border-primary-black-l2---50a); --component-card-mark-border-secondary-gray-opa: var(--primitives-neutral-white-10a); --component-card-mark-border-secondary-white: var(--semantic-border-primary-black-l1---100); --component-card-mark-divider-primary-gray-opa: var(--primitives-neutral-white-10a); --component-card-mark-icon-primary-black-opa: var(--semantic-text-primary-on-surface---white-l1---00); --component-card-mark-icon-primary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-primary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-primary-black-opa: var(--semantic-text-primary-on-surface---white-l1---00); --component-card-mark-text-primary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-primary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-tab-bar-bg-primary: var(--semantic-surface-primary-opacity---black-l9---04a); --component-card-tab-bar-bg-primary-select: var(--semantic-surface-primary-fixed---l10---00); --component-card-tab-bar-divider-primary: var(--primitives-neutral-white-05a); --component-card-tab-bar-text-primary: var(--semantic-surface-primary-gray---l1---100); --component-card-tab-bar-text-primary-select: var(--semantic-surface-primary-fixed---l1---100); --component-card-tab-bar-text-secondary: var(--semantic-surface-primary-opacity---black-l4---35a); --component-card-tab-bar-text-secondary-select: var(--semantic-surface-primary-gray---l1---100); --component-text-body-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-body-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-body-l3: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-data-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-headine-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-remark-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-remark-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-remark-l2-2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-remark-l3: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-remark-l3-2: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-subtitle-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-subtitle-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-subtitle-l3: var(--semantic-text-primary-opacity---black-l4---55a); --primitives-brand-blue: #2660f5; --primitives-brand-brand-brown: #a07e6d; --primitives-brand-brand-gray02: #fafafa; --primitives-brand-brand-gray04: #f5f4f0; --primitives-brand-brand-gray08: #ebe8e3; --primitives-brand-brand-gray13: #ddd9d4; --primitives-brand-brand-gray23: #c3bfb9; --primitives-brand-brand-gray38: #9e9a94; --primitives-brand-brand-gray56: #706c66; --primitives-brand-brand-gray72: #484540; --primitives-brand-brand-gray87: #201f1c; --primitives-brand-brand-green: #2cff73; --primitives-brand-brand-light-green: #d7ffdb; --primitives-brand-brand-purple: #b995ff; --primitives-brand-brand-theme-green: #26c05d; --primitives-brand-light-blue: #e8f3ff; --primitives-brand-light-red: #fdefed; --primitives-brand-red: #e23220; --primitives-neutral-black-00a: #00000000; --primitives-neutral-black-02a: #00000005; --primitives-neutral-black-04a: #0000000a; --primitives-neutral-black-08a: #00000014; --primitives-neutral-black-10a: #0000001a; --primitives-neutral-black-12a: #0000001f; --primitives-neutral-black-15a: #00000026; --primitives-neutral-black-20a: #00000033; --primitives-neutral-black-25a: #00000040; --primitives-neutral-black-30a: #0000004d; --primitives-neutral-black-35a: #00000059; --primitives-neutral-black-50a: #00000080; --primitives-neutral-black-55a: #0000008c; --primitives-neutral-black-60a: #00000099; --primitives-neutral-black-70a: #000000b2; --primitives-neutral-black-75a: #000000bf; --primitives-neutral-black-80a: #000000cc; --primitives-neutral-black-84a: #000000d6; --primitives-neutral-black-90a: #000000e5; --primitives-neutral-black-95a: #000000f2; --primitives-neutral-gray-00: #ffffff; --primitives-neutral-gray-02: #fafafa; --primitives-neutral-gray-04: #f6f6f6; --primitives-neutral-gray-08: #ebebeb; --primitives-neutral-gray-10: #e6e6e6; --primitives-neutral-gray-100: #000000; --primitives-neutral-gray-12: #e0e0e0; --primitives-neutral-gray-15: #d9d9d9; --primitives-neutral-gray-20: #cccccc; --primitives-neutral-gray-25: #bfbfbf; --primitives-neutral-gray-30: #b3b3b3; --primitives-neutral-gray-35: #a6a6a6; --primitives-neutral-gray-50: #808080; --primitives-neutral-gray-55: #737373; --primitives-neutral-gray-60: #666666; --primitives-neutral-gray-70: #4d4d4d; --primitives-neutral-gray-75: #404040; --primitives-neutral-gray-80: #333333; --primitives-neutral-gray-84: #282828; --primitives-neutral-gray-90: #1a1a1a; --primitives-neutral-gray-95: #0d0d0d; --primitives-neutral-white-00a: #ffffff00; --primitives-neutral-white-05a: #ffffff0d; --primitives-neutral-white-10a: #ffffff1a; --primitives-neutral-white-16a: #ffffff29; --primitives-neutral-white-20a: #ffffff33; --primitives-neutral-white-25a: #ffffff40; --primitives-neutral-white-30a: #ffffff4d; --primitives-neutral-white-40a: #ffffff66; --primitives-neutral-white-45a: #ffffff73; --primitives-neutral-white-50a: #ffffff80; --primitives-neutral-white-65a: #ffffffa6; --primitives-neutral-white-70a: #ffffffb2; --primitives-neutral-white-75a: #ffffffbf; --primitives-neutral-white-80a: #ffffffcc; --primitives-neutral-white-85a: #ffffffd9; --primitives-neutral-white-88a: #ffffffe0; --primitives-neutral-white-90a: #ffffffe5; --primitives-neutral-white-92a: #ffffffeb; --primitives-neutral-white-96a: #fffffff5; --primitives-neutral-white-98a: #fffffffa; --semantic-background-primary-cold-gray--04: var(--primitives-neutral-gray-90); --semantic-background-primary-warm-gray---07: var(--primitives-neutral-gray-90); --semantic-background-primary-gray---l1---00: var(--primitives-neutral-gray-100); --semantic-background-primary-gray---l2--02: var(--primitives-neutral-gray-95); --semantic-background-primary-gray---l3---04: var(--primitives-neutral-gray-90); --semantic-background-primary-gray---l4---15: var(--primitives-neutral-gray-84); --semantic-border-primary-black-l1---100: var(--primitives-neutral-gray-00); --semantic-border-primary-black-l2---50a: var(--primitives-neutral-white-50a); --semantic-border-primary-black-l3---20a: var(--primitives-neutral-white-30a); --semantic-border-primary-black-l4---15a: var(--primitives-neutral-white-25a); --semantic-divider-primary-gray---l1---15: var(--primitives-neutral-gray-84); --semantic-divider-primary-gray---l2---04: var(--primitives-neutral-gray-95); --semantic-icon-miscellaneous-border-button---30a: var(--primitives-neutral-white-50a); --semantic-icon-primary-fixed---black-l1---100: var(--primitives-neutral-gray-100); --semantic-icon-primary-fixed---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-icon-primary-fixed---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-icon-primary-fixed---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-icon-primary-fixed---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-fixed---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-icon-primary-fixed---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-icon-primary-fixed---white-l1---00: var(--primitives-neutral-gray-00); --semantic-icon-primary-fixed---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-icon-primary-fixed---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-icon-primary-fixed---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-icon-primary-fixed---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-icon-primary-fixed---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-icon-primary-fixed---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-icon-primary-on-surface---white-l1---00: var(--primitives-neutral-gray-100); --semantic-icon-primary-on-surface---white-l2---98a: var(--primitives-neutral-black-95a); --semantic-icon-primary-on-surface---white-l3---75a: var(--primitives-neutral-black-75a); --semantic-icon-primary-on-surface---white-l4---50a: var(--primitives-neutral-black-55a); --semantic-icon-primary-on-surface---white-l5---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-on-surface---white-l6---20a: var(--primitives-neutral-black-20a); --semantic-icon-primary-on-surface---white-l7---16a: var(--primitives-neutral-black-15a); --semantic-icon-primary-opacity---black-l1---100: var(--primitives-neutral-gray-00); --semantic-icon-primary-opacity---black-l2---95a: var(--primitives-neutral-white-98a); --semantic-icon-primary-opacity---black-l3---75a: var(--primitives-neutral-white-75a); --semantic-icon-primary-opacity---black-l4---55a: var(--primitives-neutral-white-50a); --semantic-icon-primary-opacity---black-l5---30a: var(--primitives-neutral-white-30a); --semantic-icon-primary-opacity---black-l6---20a: var(--primitives-neutral-white-20a); --semantic-icon-primary-opacity---black-l7---15a: var(--primitives-neutral-white-16a); --semantic-icon-state-error: var(--primitives-brand-red); --semantic-icon-state-link-tip: var(--primitives-brand-blue); --semantic-overlay-black-fixed---l1---20a: var(--primitives-neutral-black-20a); --semantic-overlay-black-fixed---l2---12a: var(--primitives-neutral-black-12a); --semantic-overlay-black-fixed---l3---08a: var(--primitives-neutral-black-08a); --semantic-overlay-black-fixed---l4---04a: var(--primitives-neutral-black-04a); --semantic-overlay-white-fixed---l1---20a: var(--primitives-neutral-white-20a); --semantic-overlay-white-fixed---l2---12a: var(--primitives-neutral-white-16a); --semantic-overlay-white-fixed---l3---10a: var(--primitives-neutral-white-10a); --semantic-overlay-white-fixed---l4---05a: var(--primitives-neutral-white-05a); --semantic-surface-brand-fixed---brown: var(--primitives-brand-brand-brown); --semantic-surface-brand-fixed---gray-l1---87: var(--primitives-brand-brand-gray87); --semantic-surface-brand-fixed---gray-l2---72: var(--primitives-brand-brand-gray72); --semantic-surface-brand-fixed---gray-l3---56: var(--primitives-brand-brand-gray56); --semantic-surface-brand-fixed---gray-l4---38: var(--primitives-brand-brand-gray38); --semantic-surface-brand-fixed---gray-l5---23: var(--primitives-brand-brand-gray23); --semantic-surface-brand-fixed---gray-l6---13: var(--primitives-brand-brand-gray13); --semantic-surface-brand-fixed---gray-l7---08: var(--primitives-brand-brand-gray08); --semantic-surface-brand-fixed---gray-l8---04: var(--primitives-brand-brand-gray04); --semantic-surface-brand-fixed---gray-l9---02: var(--primitives-brand-brand-gray02); --semantic-surface-brand-fixed---green: var(--primitives-brand-brand-green); --semantic-surface-brand-fixed---light-green: var(--primitives-brand-brand-light-green); --semantic-surface-brand-fixed---purple: var(--primitives-brand-brand-purple); --semantic-surface-brand-fixed---theme-green: var(--primitives-brand-brand-theme-green); --semantic-surface-brand-gray---l1---13: var(--primitives-neutral-gray-100); --semantic-surface-brand-gray---l2---13: var(--primitives-brand-brand-gray87); --semantic-surface-brand-gray---l3---04: var(--primitives-brand-brand-gray87); --semantic-surface-brand-gray---l4---02: var(--primitives-brand-brand-gray87); --semantic-surface-brand-gray---l5---02: var(--primitives-brand-brand-gray72); --semantic-surface-primary-fixed---l1---100: var(--primitives-neutral-gray-100); --semantic-surface-primary-fixed---l10---00: var(--primitives-neutral-gray-00); --semantic-surface-primary-fixed---l2---75: var(--primitives-neutral-gray-80); --semantic-surface-primary-fixed---l3---70: var(--primitives-neutral-gray-70); --semantic-surface-primary-fixed---l4---25: var(--primitives-neutral-gray-25); --semantic-surface-primary-fixed---l5---15: var(--primitives-neutral-gray-15); --semantic-surface-primary-fixed---l6---12: var(--primitives-neutral-gray-12); --semantic-surface-primary-fixed---l7---08: var(--primitives-neutral-gray-08); --semantic-surface-primary-fixed---l8---04: var(--primitives-neutral-gray-04); --semantic-surface-primary-fixed---l9---02: var(--primitives-neutral-gray-02); --semantic-surface-primary-gray---l1---100: var(--primitives-neutral-gray-00); --semantic-surface-primary-gray---l10---00: var(--primitives-neutral-gray-100); --semantic-surface-primary-gray---l2---80: var(--primitives-neutral-gray-15); --semantic-surface-primary-gray---l3---70: var(--primitives-neutral-gray-25); --semantic-surface-primary-gray---l4---25: var(--primitives-neutral-gray-70); --semantic-surface-primary-gray---l5---15: var(--primitives-neutral-gray-75); --semantic-surface-primary-gray---l6---12: var(--primitives-neutral-gray-80); --semantic-surface-primary-gray---l7---08: var(--primitives-neutral-gray-84); --semantic-surface-primary-gray---l8---04: var(--primitives-neutral-gray-90); --semantic-surface-primary-gray---l9---02: var(--primitives-neutral-gray-95); --semantic-surface-primary-opacity---black-l1---75a: var(--primitives-neutral-white-80a); --semantic-surface-primary-opacity---black-l10---02a: var(--primitives-neutral-white-05a); --semantic-surface-primary-opacity---black-l2---70a: var(--primitives-neutral-white-75a); --semantic-surface-primary-opacity---black-l3---55a: var(--primitives-neutral-white-65a); --semantic-surface-primary-opacity---black-l4---35a: var(--primitives-neutral-white-45a); --semantic-surface-primary-opacity---black-l5---25a: var(--primitives-neutral-white-30a); --semantic-surface-primary-opacity---black-l6---15a: var(--primitives-neutral-white-25a); --semantic-surface-primary-opacity---black-l7---12a: var(--primitives-neutral-white-20a); --semantic-surface-primary-opacity---black-l8---08a: var(--primitives-neutral-white-16a); --semantic-surface-primary-opacity---black-l9---04a: var(--primitives-neutral-white-10a); --semantic-surface-primary-opacity---white-l1---80a: var(--primitives-neutral-black-75a); --semantic-surface-primary-opacity---white-l10---05a: var(--primitives-neutral-black-02a); --semantic-surface-primary-opacity---white-l2---75a: var(--primitives-neutral-black-70a); --semantic-surface-primary-opacity---white-l3---65a: var(--primitives-neutral-black-55a); --semantic-surface-primary-opacity---white-l4---45a: var(--primitives-neutral-black-35a); --semantic-surface-primary-opacity---white-l5---30a: var(--primitives-neutral-black-08a); --semantic-surface-primary-opacity---white-l6---25a: var(--primitives-neutral-black-25a); --semantic-surface-primary-opacity---white-l7---20a: var(--primitives-neutral-black-15a); --semantic-surface-primary-opacity---white-l8---16a: var(--primitives-neutral-black-12a); --semantic-surface-primary-opacity---white-l9---10a: var(--primitives-neutral-black-04a); --semantic-surface-state-error: var(--primitives-brand-light-red); --semantic-surface-state-link-tip: var(--primitives-brand-light-blue); --semantic-surface-state-un-active---20: var(--primitives-neutral-gray-20); --semantic-text-primary-fixed---black-l1---100: var(--primitives-neutral-gray-100); --semantic-text-primary-fixed---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-text-primary-fixed---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-text-primary-fixed---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-text-primary-fixed---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-text-primary-fixed---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-text-primary-fixed---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-text-primary-fixed---white-l1---00: var(--primitives-neutral-gray-00); --semantic-text-primary-fixed---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-text-primary-fixed---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-text-primary-fixed---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-text-primary-fixed---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-text-primary-fixed---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-text-primary-fixed---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-text-primary-on-surface---white-l1---00: var(--primitives-neutral-gray-100); --semantic-text-primary-on-surface---white-l2---98a: var(--primitives-neutral-black-95a); --semantic-text-primary-on-surface---white-l3---75a: var(--primitives-neutral-black-75a); --semantic-text-primary-on-surface---white-l4---50a: var(--primitives-neutral-black-55a); --semantic-text-primary-on-surface---white-l5---30a: var(--primitives-neutral-black-30a); --semantic-text-primary-on-surface---white-l6---20a: var(--primitives-neutral-black-20a); --semantic-text-primary-on-surface---white-l7---16a: var(--primitives-neutral-black-15a); --semantic-text-primary-opacity---black-l1---100: var(--primitives-neutral-gray-00); --semantic-text-primary-opacity---black-l2---95a: var(--primitives-neutral-white-98a); --semantic-text-primary-opacity---black-l3---75a: var(--primitives-neutral-white-75a); --semantic-text-primary-opacity---black-l4---55a: var(--primitives-neutral-white-50a); --semantic-text-primary-opacity---black-l5---30a: var(--primitives-neutral-white-30a); --semantic-text-primary-opacity---black-l6---20a: var(--primitives-neutral-white-20a); --semantic-text-primary-opacity---black-l7---15a: var(--primitives-neutral-white-16a); --semantic-text-state-error: var(--primitives-brand-red); --semantic-text-state-link-tip: var(--primitives-brand-blue); } #oc-wrapper { overflow: visible; -webkit-transition: none; -moz-transition: none; transition: none; } #one-dom-container .loadingWt { position: fixed; top: 0; bottom: 0; z-index: 999; width: 100vw; height: 100vh; background-color: #fff; } @media screen and (min-width: 1024px) { #one-kv-section-a, #one-whouses-section-a, #one-products-section-a, #one-qa-section-a { position: absolute; top: -46px; } } @media screen and (max-width: 1023px) { #one-kv-section-a, #one-whouses-section-a, #one-products-section-a, #one-qa-section-a { position: absolute; top: -90px; } } /* one-common.css */ /* 默认值 */ @media screen { #one-dom-container * { box-sizing: border-box; margin: 0; } #one-dom-container img { vertical-align: middle; } #one-dom-container a { text-decoration: none; color: inherit; } #one-dom-container video:focus { outline: none; } #one-dom-container { max-width: 100%; min-height: 100vh; } #one-dom-container .loadingWt { position: fixed; top: 0; bottom: 0; z-index: 100; width: 100%; height: 100%; background-color: #fff; } #one-dom-container { font-size: 20px; background: transparent; color: black; /* display: none; */ background-color: #fff; } #one-dom-container sup { font-size: 0.5em; position: relative; top: -0.21em; line-height: 0; vertical-align: super; } #one-dom-container video.cover, #one-dom-container img.cover { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } #one-dom-container video.contain, #one-dom-container img.contain { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } #one-dom-container .showA { position: relative; top: 20px; opacity: 0; } } /* 常用 */ @media screen { #one-dom-container .one-hide { opacity: 0; } #one-dom-container .none { display: none !important; } } /* 章节screen */ @media screen { #one-dom-container .one-section { position: relative; width: 100%; background-color: #F3F2F1; overflow: hidden; } #one-dom-container .one-section.wt { background-color: #fff; } #one-dom-container .one-section.bk { background-color: #000000; } #one-dom-container .one-section.bk.grey { background: var(--semantic-background-level-3, #1A1A1A); } } /* 字体 */ #one-dom-container .one-h0 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 1 */ font-family: var(--font-b); font-size: var(--semantic-font-size-head-0, 68px); font-style: normal; line-height: var(--semantic-font-line-height-head-0, 76px); /* 111.765% */ } #one-dom-container .one-h1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 1 */ font-family: var(--font-b); font-size: var(--semantic-font-size-head-1, 48px); font-style: normal; line-height: var(--semantic-font-line-height-head-1, 60px); /* 125% */ } #one-dom-container .one-h2 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 2 */ font-family: var(--font-m); font-size: var(--semantic-font-size-head-2, 42px); font-style: normal; line-height: var(--semantic-font-line-height-head-2, 50px); /* 119.048% */ } #one-dom-container .one-h3 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline3 */ font-family: var(--font-m); font-size: var(--semantic-font-size-head-3, 36px); font-style: normal; line-height: var(--semantic-font-line-height-head-3, 44px); /* 122.222% */ } #one-dom-container .one-sh1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-m); font-size: var(--semantic-font-size-sub-head-1, 32px); font-style: normal; line-height: var(--semantic-font-line-height-sub-head-1, 40px); /* 125% */ } #one-dom-container .one-sh2 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Subtitle/Subheadline 2 R */ font-family: var(--font-m); font-size: var(--semantic-font-size-sub-head-2, 24px); font-style: normal; line-height: var(--semantic-font-line-height-sub-head-2, 32px); /* 133.333% */ } #one-dom-container .one-sh3 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-r); font-size: var(--semantic-font-size-sub-head-3, 20px); font-style: normal; line-height: var(--semantic-font-line-height-sub-head-3, 28px); /* 140% */ } #one-dom-container .one-b1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 1 R */ font-family: var(--font-r); font-size: var(--semantic-font-size-body-1, 18px); font-style: normal; line-height: var(--semantic-font-line-height-body-1, 26px); /* 144.444% */ } #one-dom-container .one-b2 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 2 R */ font-family: var(--font-r); font-size: var(--semantic-font-size-body-2, 16px); font-style: normal; line-height: var(--semantic-font-line-height-body-2, 24px); /* 150% */ } #one-dom-container .one-b3 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 3 R */ font-family: var(--font-r); font-size: var(--semantic-font-size-body-3, 14px); font-style: normal; line-height: var(--semantic-font-line-height-body-3, 22px); /* 157.143% */ } #one-dom-container .one-b1.m, #one-dom-container .one-b2.m, #one-dom-container .one-b3.m { font-family: var(--font-m); } #one-dom-container .one-b1.grey, #one-dom-container .one-b2.grey, #one-dom-container .one-b3.grey { opacity: 0.75; } #one-dom-container .one-b1.grey2, #one-dom-container .one-b2.grey2, #one-dom-container .one-b3.grey2 { opacity: 0.5; } #one-dom-container .one-desc { color: var(--semantic-text-primary-opacity---black-l4---55a, rgba(0, 0, 0, 0.55)); font-family: var(--font-r); font-size: var(--semantic-font-size-footnote-1, 12px); font-style: normal; line-height: var(--semantic-font-line-height-footnote-1, 20px); /* 166.667% */ } /* one-common-pc.css */ /* 独有部分 加-pc*/ @media screen and (min-width: 1440px) { #one-dom-container { font-size: 20px; } #one-dom-container p.pc-ct { text-align: center; } #one-dom-container .one-pc-fix { height: 100vh; overflow: hidden; box-sizing: border-box; } #one-dom-container .one-pc-noWrap { text-wrap: nowrap; white-space: nowrap; } /* 安全距离 */ #one-dom-container .pc-safeRow { display: block; width: 1312px; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .one-pc-fix .pc-safeRow { height: 100vh; } #one-dom-container .pc-safeCol { padding: 40px 0; } #one-dom-container .pc-safeCol2 { padding: 80px 0; } #one-dom-container .pc-safeCol3 { padding: 184px 0; } #one-dom-container .pc-safeTop { padding-top: 40px; } #one-dom-container .pc-safeBottom { padding-bottom: 40px; } #one-dom-container .pc-safeTop2 { padding-top: 80px; } #one-dom-container .pc-safeBottom2 { padding-bottom: 80px; } /* 居中 */ #one-dom-container .one-pc-allCenter { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); } #one-dom-container .one-pc-rowCenter1 { display: block; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .one-titletxt.one-pc-rowCenter1 { display: flex; } #one-dom-container .one-pc-rowCenter2 { position: absolute; left: 50%; transform: translateX(-50%); } #one-dom-container .one-pc-colCenter { position: absolute; top: 50%; transform: translateY(-50%); } #one-dom-container .one-pc-colCenter.lt { left: 0; } #one-dom-container .one-pc-colCenter.rt { right: 0; } /* 盒子布局 */ #one-dom-container .one-pc-flexRow { display: flex; flex-direction: row; } #one-dom-container .one-pc-flexCol { display: flex; flex-direction: column; } /* hover动画 */ #one-dom-container .one-pc-hoverScale:hover>img, #one-dom-container .one-pc-hoverScale:hover>picture>img { transform: scale(1.05); } #one-dom-container .one-pc-hoverScale>img, #one-dom-container .one-pc-hoverScale>picture>img { transition: transform 0.5s; } p.one-pc-wt { color: #fff !important; } /* drag 拖拽组件 */ #one-dom-container .one-pc-drag-div { width: 100%; border-radius: 0.6em; overflow: hidden; user-select: none; position: relative; } #one-dom-container .one-drag-img1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #one-dom-container .one-drag-img2 { width: 38.2%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; } #one-dom-container .one-drag-img2 img, #one-dom-container .one-drag-img2 video { width: 49em; height: 100%; position: absolute; top: 0; right: 0; background-position: center; background-size: cover; object-fit: cover; object-position: center; } #one-dom-container .one-drag-controlBtn { position: absolute; top: 0; left: 61.8%; width: 0.15em; height: 100%; background-color: #fff; cursor: ew-resize; z-index: 99; } #one-dom-container .one-drag-controlBtn div { width: 1.5em; height: 1.5em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99; background-size: contain; background-repeat: no-repeat; background-position: center; } #one-dom-container .one-drag-desc { position: absolute; bottom: 30px; left: 30px; text-wrap: nowrap; } #one-dom-container .one-drag-desc p { padding: 0.2em 0.75em; border-radius: 2.6em; border: 0.769px solid #DEDEDE; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(11.5px); } #one-dom-container .one-drag-img2 .one-drag-desc { left: auto; right: 30px; } } /* 相互改写部分 不加-pc */ @media screen and (min-width: 1440px) { /* 标题+正文 */ #one-dom-container .one-title { display: flex; flex-direction: column; align-items: flex-start; } #one-dom-container .one-title>p:nth-of-type(2) { margin-top: 24px; } #one-dom-container .one-title.ct { align-items: center; text-align: center; } #one-dom-container .one-title.row { flex-direction: row; justify-content: space-between; } #one-dom-container .one-title.row>p, #one-dom-container .one-title.row>div { width: calc(50% - 4px); } #one-dom-container .one-title.row>p:first-child { padding-right: 24px; } #one-dom-container .one-title.row .one-b1 { padding-top: 6px; } #one-dom-container .one-title.m>p:nth-of-type(2) { margin-top: 16px; } #one-dom-container .one-title.sm>p:nth-of-type(2) { margin-top: 8px; } #one-dom-container .one-title.ssm>p:nth-of-type(2) { margin-top: 4px; } } /* one-common-pad.css */ /* 独有部分 加-pad*/ @media screen and (max-width: 1439px) and (min-width: 650px) { #one-dom-container { font-size: 20px; font-size: 2.6041666666vw !important; } #one-dom-container p.pad-ct { text-align: center; } #one-dom-container .one-pad-fix { height: 100vh; overflow: hidden; box-sizing: border-box; } #one-dom-container .one-pad-noWrap { text-wrap: nowrap; white-space: nowrap; } /* 安全距离 */ #one-dom-container .pad-safeRow { display: block; width: 36em; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .pad-safeCol { padding: 1.2em 0; } #one-dom-container .pad-safeCol2 { padding: 2.4em 0; } #one-dom-container .pad-safeCol3 { padding: 4em 0; } #one-dom-container .pad-safeTop { padding-top: 1.2em; } #one-dom-container .pad-safeTop2 { padding-top: 2.4em; } #one-dom-container .pad-safeBottom { padding-bottom: 1.2em; } #one-dom-container .pad-safeBottom2 { padding-bottom: 2.4em; } /* 居中 */ #one-dom-container .one-pad-allCenter { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); } #one-dom-container .one-pad-rowCenter1 { display: block; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .one-pad-rowCenter2 { position: absolute; left: 50%; transform: translateX(-50%); } #one-dom-container .one-pad-colCenter { position: absolute; top: 50%; transform: translateY(-50%); } #one-dom-container .one-pad-colCenter.lt { left: 0; } #one-dom-container .one-pad-colCenter.rt { right: 0; } /* 盒子布局 */ #one-dom-container .one-pad-flexRow { display: flex; flex-direction: row; } #one-dom-container .one-pad-flexCol { display: flex; flex-direction: column; } /* hover动画 */ #one-dom-container .one-pad-hoverScale:hover>img, #one-dom-container .one-pad-hoverScale:hover>picture>img { transform: scale(1.05); } #one-dom-container .one-pad-hoverScale>img, #one-dom-container .one-pad-hoverScale>picture>img { transition: transform 0.5s; } p.one-pad-wt { color: #fff !important; } /* drag 拖拽组件 */ #one-dom-container .one-pad-drag-div { width: 100%; border-radius: 0.6em; overflow: hidden; user-select: none; position: relative; } #one-dom-container .one-drag-img1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #one-dom-container .one-drag-img2 { width: 38.2%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; } #one-dom-container .one-drag-img2 img, #one-dom-container .one-drag-img2 video { width: 49em; height: 100%; position: absolute; top: 0; right: 0; background-position: center; background-size: cover; object-fit: cover; object-position: center; } #one-dom-container .one-drag-controlBtn { position: absolute; top: 0; left: 61.8%; width: 0.15em; height: 100%; background-color: #fff; cursor: ew-resize; z-index: 99; } #one-dom-container .one-drag-controlBtn div { width: 1.5em; height: 1.5em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99; background-size: contain; background-repeat: no-repeat; background-position: center; } #one-dom-container .one-drag-desc { position: absolute; bottom: 30px; left: 30px; text-wrap: nowrap; } #one-dom-container .one-drag-desc p { padding: 0.2em 0.75em; border-radius: 2.6em; border: 0.769px solid #DEDEDE; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(11.5px); } #one-dom-container .one-drag-img2 .one-drag-desc { left: auto; right: 30px; } } /* 相互改写部分 不加-pad */ @media screen and (max-width: 1439px) and (min-width: 650px) { /* 标题+正文 */ #one-dom-container .one-title { display: flex; flex-direction: column; align-items: flex-start; } #one-dom-container .one-title>p:nth-of-type(2) { margin-top: 18px; } #one-dom-container .one-title.ct { align-items: center; } #one-dom-container .one-title.m>p:nth-of-type(2) { margin-top: 16px; } #one-dom-container .one-title.sm>p:nth-of-type(2) { margin-top: 8px; } #one-dom-container .one-title.ssm>p:nth-of-type(2) { margin-top: 4px; } #one-dom-container .one-title.row { flex-direction: row; justify-content: space-between; } #one-dom-container .one-title.row>p, #one-dom-container .one-title.row>div { width: calc(50% - 0.1em); } } /* 独有部分 加-wap*/ @media screen and (max-width: 649px) { #one-dom-container { font-size: 20px; font-size: 5.5555555555vw !important; } #one-dom-container p.wap-ct { text-align: center; } #one-dom-container .one-wap-fix { height: 100vh; overflow: hidden; box-sizing: border-box; } #one-dom-container .one-wap-noWrap { text-wrap: nowrap; white-space: nowrap; } /* 安全距离 */ #one-dom-container .wap-safeRow { display: block; width: 16.4em; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .wap-safeCol { padding: 1.2em 0; } #one-dom-container .wap-safeCol2 { padding: 2.4em 0; } #one-dom-container .wap-safeCol3 { padding: 4em 0; } #one-dom-container .wap-safeTop { padding-top: 1.2em; } #one-dom-container .wap-safeTop2 { padding-top: 2.4em; } #one-dom-container .wap-safeBottom { padding-bottom: 1.2em; } #one-dom-container .wap-safeBottom2 { padding-bottom: 2.4em; } /* 居中 */ #one-dom-container .one-wap-allCenter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #one-dom-container .one-wap-rowCenter1 { display: block; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .one-wap-rowCenter2 { position: absolute; left: 50%; transform: translateX(-50%); } #one-dom-container .one-wap-colCenter { position: absolute; top: 50%; transform: translateY(-50%); } #one-dom-container .one-wap-colCenter.lt { left: 0; } #one-dom-container .one-wap-colCenter.rt { right: 0; } /* 盒子布局 */ #one-dom-container .one-wap-flexRow { display: flex; flex-direction: row; } #one-dom-container .one-wap-flexCol { display: flex; flex-direction: column; } } /* 相互改写部分 不加-wap */ @media screen and (max-width: 649px) { /* 标题+正文 */ #one-dom-container .one-title { display: flex !important; flex-direction: column; align-items: flex-start; } #one-dom-container .one-title>p:nth-of-type(2) { margin-top: 18px; } #one-dom-container .one-title.m>p:nth-of-type(2) { margin-top: 16px; } #one-dom-container .one-title.sm>p:nth-of-type(2) { margin-top: 8px; } #one-dom-container .one-title.ssm>p:nth-of-type(2) { margin-top: 4px; } } /* one-pc.css */ @media screen and (min-width: 1440px) { #one-dom-container .one-pc-autoPx { font-size: 20px; font-size: 1.3888888889vw !important; } /* kv */ #one-dom-container .one-kv-section { height: 38em; } /* whouses */ #one-dom-container .one-whouses-section { padding-top: 40px; } #one-dom-container .one-whouses-content { align-items: center; } #one-dom-container .one-whouses-p1 { width: 872px; } #one-dom-container .one-whouses-btn { padding: var(--semantic-space-inset-level-5, 12px) var(--semantic-space-inset-level-2, 24px); justify-content: center; align-items: center; border-radius: 999px; border: 1px solid #FFF; margin-top: 48px; transition: all 0.5s; } #one-dom-container .one-whouses-btn:hover { background: rgba(255, 255, 255, 0.25); } /* products */ #one-dom-container .one-products-content { align-items: center; } #one-dom-container .one-products-list { width: 1092px; margin-top: 48px; justify-content: center; flex-wrap: wrap; gap: 8px; } #one-dom-container .one-products-item { align-items: center; margin-bottom: 24px; cursor: pointer; } #one-dom-container .one-products-img { position: relative; overflow: hidden; border-radius: var(--semantic-corner-radius-level-3, 8px); background: var(--semantic-surface-light-level-5, #1A1A1A); width: 267px; height: 300px; } #one-dom-container .one-products-item:hover .one-products-img { background: #404040; } #one-dom-container .one-products-name { margin-top: 16px; } #one-dom-container .one-products-link { margin-top: 16px; color: #0083FD; align-items: center; } #one-dom-container .one-products-link span { color: #0083FD; margin-right: 4px; } #one-dom-container .one-products-item:hover .one-products-link span { text-decoration: underline; } #one-dom-container .one-products-link svg { position: relative; top: 1px; } #one-dom-container .one-products-morebtn { cursor: pointer; margin-top: 24px; border-radius: 999px; background: #333; padding: var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-4, 16px) var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-2, 24px); align-items: center; gap: var(--semantic-space-inset-level-7, 4px); transition: background 0.5s; } #one-dom-container .one-products-morebtn:hover { background: #4D4D4D; } #one-dom-container .one-products-morebtn svg { width: 20px; height: 20px; margin-left: 4px; } #one-dom-container .one-products-hidebtn { cursor: pointer; border-radius: 999px; background: #333; padding: var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-4, 16px) var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-2, 24px); align-items: center; gap: var(--semantic-space-inset-level-7, 4px); transition: background 0.5s; } #one-dom-container .one-products-hidebtn:hover { background: #4D4D4D; } #one-dom-container .one-products-hidebtn svg { width: 20px; height: 20px; margin-left: 4px; transform: rotate(180deg); } #one-dom-container .one-products-btn { margin-top: 64px; padding: var(--semantic-space-inset-level-5, 12px) var(--semantic-space-inset-level-2, 24px); justify-content: center; align-items: center; border-radius: 999px; border: 1px solid #FFF; transition: all 0.5s; } #one-dom-container .one-products-btn:hover { background: rgba(255, 255, 255, 0.25); } #one-dom-container .one-products-btn svg { width: 24px; height: 24px; margin-left: 4px; } /* qa */ #one-dom-container .one-qa-content { align-items: center; } #one-dom-container .one-qa-drawer { margin-top: 48px; width: 652px; position: relative; border-radius: 8px; overflow: hidden; } #one-dom-container .one-qa-drawer-item { cursor: pointer; padding: 20px; background: rgba(255, 255, 255, 0.10); } #one-dom-container .one-qa-drawer-item.active { background: rgba(255, 255, 255, 0.30); } #one-dom-container .one-qa-drawer-item .title { justify-content: space-between; align-items: center; } #one-dom-container .one-qa-drawer-icon { width: 15px; height: 8px; transition: all 0.5s; transform: rotate(180deg); } #one-dom-container .one-qa-drawer-item.active .one-qa-drawer-icon { transform: rotate(0); } #one-dom-container .one-qa-drawer-item .desc { box-sizing: border-box; overflow: hidden; padding-right: 1.5em; height: 0; transition: opacity 1s; opacity: 0; } #one-dom-container .one-qa-drawer-item.active .desc { opacity: 1; } #one-dom-container .one-qa-drawer-item .desc p { padding-top: 8px; } #one-dom-container .one-qa-morebtn { margin-top: 48px; color: #0083FD; align-items: center; } #one-dom-container .one-qa-morebtn:hover { text-decoration: underline; } #one-dom-container .one-qa-morebtn span { color: #0083FD; margin-right: 4px; } } /* one-pad.css */ @media screen and (max-width: 1439px) and (min-width: 650px) { /* kv */ #one-dom-container .one-kv-section { height: 20.25em; } /* whouses */ #one-dom-container .one-whouses-section { padding-top: 1.2em; } #one-dom-container .one-whouses-content { align-items: center; } #one-dom-container .one-whouses-p1 { width: 27em; } #one-dom-container .one-whouses-btn { padding: var(--semantic-space-inset-level-5, 12px) var(--semantic-space-inset-level-2, 24px); justify-content: center; align-items: center; border-radius: 999px; border: 1px solid #FFF; margin-top: 1.2em; transition: all 0.5s; } #one-dom-container .one-whouses-btn:hover { background: rgba(255, 255, 255, 0.25); } /* products */ #one-dom-container .one-products-content { align-items: center; } #one-dom-container .one-products-list { width: 36em; margin-top: 2.4em; justify-content: center; flex-wrap: wrap; gap: 0.2em; } #one-dom-container .one-products-item { align-items: center; margin-bottom: 0.9em; cursor: pointer; } #one-dom-container .one-products-img { position: relative; overflow: hidden; border-radius: var(--semantic-corner-radius-level-3, 8px); background: var(--semantic-surface-light-level-5, #1A1A1A); width: 11.866667em; height: 12.5em; } #one-dom-container .one-products-item:hover .one-products-img { background: #404040; } #one-dom-container .one-products-name { margin-top: 0.6em; } #one-dom-container .one-products-link { margin-top: 0.6em; color: #0083FD; align-items: center; } #one-dom-container .one-products-link span { color: #0083FD; margin-right: 4px; } #one-dom-container .one-products-item:hover .one-products-link span { text-decoration: underline; } #one-dom-container .one-products-link svg { position: relative; top: 1px; } #one-dom-container .one-products-morebtn { cursor: pointer; border-radius: 999px; background: #333; padding: var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-4, 16px) var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-2, 24px); align-items: center; gap: var(--semantic-space-inset-level-7, 4px); transition: background 0.5s; } #one-dom-container .one-products-morebtn:hover { background: #4D4D4D; } #one-dom-container .one-products-morebtn svg { width: 20px; height: 20px; margin-left: 4px; } #one-dom-container .one-products-hidebtn { cursor: pointer; border-radius: 999px; background: #333; padding: var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-4, 16px) var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-2, 24px); align-items: center; gap: var(--semantic-space-inset-level-7, 4px); transition: background 0.5s; } #one-dom-container .one-products-hidebtn:hover { background: #4D4D4D; } #one-dom-container .one-products-hidebtn svg { width: 20px; height: 20px; margin-left: 4px; transform: rotate(180deg); } #one-dom-container .one-products-btn { margin-top: 2.4em; padding: var(--semantic-space-inset-level-5, 12px) var(--semantic-space-inset-level-2, 24px); justify-content: center; align-items: center; border-radius: 999px; border: 1px solid #FFF; transition: all 0.5s; } #one-dom-container .one-products-btn:hover { background: rgba(255, 255, 255, 0.25); } #one-dom-container .one-products-btn svg { width: 24px; height: 24px; margin-left: 4px; } /* qa */ #one-dom-container .one-qa-content { align-items: center; } #one-dom-container .one-qa-drawer { margin-top: 1.2em; width: 27em; position: relative; border-radius: 8px; overflow: hidden; } #one-dom-container .one-qa-drawer-item { cursor: pointer; padding: 0.8em; background: rgba(255, 255, 255, 0.10); } #one-dom-container .one-qa-drawer-item.active { background: rgba(255, 255, 255, 0.30); } #one-dom-container .one-qa-drawer-item .title { justify-content: space-between; align-items: center; } #one-dom-container .one-qa-drawer-icon { width: 15px; height: 8px; transition: all 0.5s; transform: rotate(180deg); } #one-dom-container .one-qa-drawer-item.active .one-qa-drawer-icon { transform: rotate(0); } #one-dom-container .one-qa-drawer-item .desc { box-sizing: border-box; overflow: hidden; padding-right: 1.5em; height: 0; } #one-dom-container .one-qa-drawer-item .desc p { padding-top: 8px; } #one-dom-container .one-qa-morebtn { margin-top: 1.2em; color: #0083FD; align-items: center; } #one-dom-container .one-qa-morebtn:hover { text-decoration: underline; } #one-dom-container .one-qa-morebtn span { color: #0083FD; margin-right: 4px; } } /* one-wap.css */ @media screen and (max-width: 649px) { /* kv */ #one-dom-container .one-kv-img { width: 100%; height: 18.75em; } /* whouses */ #one-dom-container .one-whouses-content { align-items: center; } #one-dom-container .one-whouses-btn { padding: var(--semantic-space-inset-level-5, 12px) var(--semantic-space-inset-level-2, 24px); justify-content: center; align-items: center; border-radius: 999px; border: 1px solid #FFF; margin-top: 1.2em; } #one-dom-container .one-whouses-btn:hover { background: rgba(255, 255, 255, 0.25); } /* products */ #one-dom-container .one-products-content { align-items: center; } #one-dom-container .one-products-list { width: 100%; margin-top: 1.2em; justify-content: center; flex-wrap: wrap; gap: 0.2em; position: relative; } #one-dom-container .one-products-item { align-items: center; margin-bottom: 0.9em; } #one-dom-container .one-products-img { position: relative; overflow: hidden; border-radius: var(--semantic-corner-radius-level-3, 8px); background: var(--semantic-surface-light-level-5, #1A1A1A); width: 8em; height: 11em; } #one-dom-container .one-products-name { margin-top: 0.6em; } #one-dom-container .one-products-link { margin-top: 0.6em; color: #0083FD; align-items: center; } #one-dom-container .one-products-link span { color: #0083FD; margin-right: 4px; } .one-products-mask { position: absolute; z-index: 3; width: 100%; height: 12em; left: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 58.95%); } #one-dom-container .one-products-morebtn { z-index: 5; bottom: 6.4em; border-radius: 999px; background: var(--semantic-surface-light-level-1, #4D4D4D); padding: var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-4, 16px) var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-2, 24px); align-items: center; gap: var(--semantic-space-inset-level-7, 4px); } #one-dom-container .one-products-morebtn svg { width: 20px; height: 20px; margin-left: 4px; } #one-dom-container .one-products-hidebtn { z-index: 5; border-radius: 999px; background: var(--semantic-surface-light-level-1, #4D4D4D); padding: var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-4, 16px) var(--semantic-space-inset-level-6, 8px) var(--semantic-space-inset-level-2, 24px); align-items: center; gap: var(--semantic-space-inset-level-7, 4px); } #one-dom-container .one-products-hidebtn svg { width: 20px; height: 20px; margin-left: 4px; transform: rotate(180deg); } #one-dom-container .one-products-btn { z-index: 10; margin-top: 2.4em; padding: var(--semantic-space-inset-level-5, 12px) var(--semantic-space-inset-level-2, 24px); justify-content: center; align-items: center; border-radius: 999px; border: 1px solid #FFF; } #one-dom-container .one-products-btn:hover { background: rgba(255, 255, 255, 0.25); } #one-dom-container .one-products-btn svg { width: 24px; height: 24px; margin-left: 4px; } /* qa */ #one-dom-container .one-qa-content { align-items: center; } #one-dom-container .one-qa-drawer { margin-top: 1.2em; width: 100%; position: relative; border-radius: 8px; overflow: hidden; } #one-dom-container .one-qa-drawer-item { cursor: pointer; padding: 0.8em; background: rgba(255, 255, 255, 0.10); } #one-dom-container .one-qa-drawer-item.active { background: rgba(255, 255, 255, 0.30); } #one-dom-container .one-qa-drawer-item .title { justify-content: space-between; align-items: center; } #one-dom-container .one-qa-drawer-icon { width: 15px; height: 8px; transition: all 0.5s; transform: rotate(180deg); } #one-dom-container .one-qa-drawer-item.active .one-qa-drawer-icon { transform: rotate(0); } #one-dom-container .one-qa-drawer-item .desc { box-sizing: border-box; overflow: hidden; padding-right: 1.5em; height: 0; } #one-dom-container .one-qa-drawer-item .desc p { padding-top: 8px; } #one-dom-container .one-qa-morebtn { margin-top: 1.2em; color: #0083FD; align-items: center; } #one-dom-container .one-qa-morebtn span { color: #0083FD; margin-right: 4px; } }