/* 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-button-arrow-space: 1em; --component-button-arrow-size: 2.4em; --component-button-arrow-on-card-font-size: 14px; --component-button-arrow-on-card-button-size: 1.6em; --component-button-function-space: 0.2em; --component-button-function-icon-size---s: 0.9em; --component-button-function-padding: 1em; --component-button-function-icon-size---m: 1.1em; --component-button-function-icon-size---l: 1.2em; --component-button-function-height---s: 2em; --component-button-function-height---m: 2.4em; --component-button-function-height---l: 2.6em; --component-button-function-min-width: 6em; --component-button-play-size: 1.6em; --component-button-top-size: 2em; --component-card-icon-size-3: 1.6em; --component-card-icon-size: 2em; --component-card-icon-size-2: 2.4em; --component-card-length-min: 16.1em; --component-card-length-max: 21.6em; --component-card-space-space-1: 0.4em; --component-card-space-space-2: 0.6em; --component-card-space-space-3: 1em; --component-card-space-space-4: 1.2em; --component-ksp-corner-radius-general: 0.4em; --component-ksp-size-high-min: 14.3em; --component-ksp-size-high-med: 21.65em; --component-ksp-size-high-max: 29em; --component-ksp-size-wide-min2: 16.1em; --component-ksp-size-wide-min: 21.6em; --component-ksp-size-wide-med: 32.6em; --component-ksp-size-wide-max: 43.6em; --component-ksp-space-min: 0.6em; --component-ksp-space-max: 1em; --corner-radius-xs---4: 0.2em; --corner-radius-s---8: 0.4em; --corner-radius-corner-radius: 0.4em; --corner-radius-corner-radius-2: 0.4em; --corner-radius-corner-radius-3: 0.4em; --corner-radius-corner-radius-4: 0.4em; --corner-radius-corner-radius-5: 0.4em; --corner-radius-m---12: 0.6em; --corner-radius-l---16: 0.8em; --corner-radius-xl---20: 0.8em; --corner-radius-xxl---24: 1.2em; --font-line-height-d1: 0.9em; --font-line-height-b3: 1em; --font-line-height-b3-1: 1.1em; --font-line-height-b2: 1.2em; --font-line-height-b2-1: 1.2em; --font-line-height-b1: 1.3em; --font-line-height-s3: 1.4em; --font-line-height-s2: 1.6em; --font-line-height-s3-1: 1.6em; --font-line-height-s1: 2em; --font-line-height-h6: 2.2em; --font-line-height-h4: 2.5em; --font-line-height-h3: 2.9em; --font-line-height-h5: 3em; --font-line-height-h2: 3.8em; --font-line-height-h1: 4em; --font-size-body-b3: 12px; --font-size-body-b3-1: 14px; --font-size-body-b2: 16px; --font-size-body-b2-1: 16px; --font-size-body-b1: 18px; --font-size-description-d1: 12px; --font-size-headline-h6: 36px; --font-size-headline-h4: 42px; --font-size-headline-h5: 48px; --font-size-headline-h3: 50px; --font-size-headline-h2: 68px; --font-size-headline-h1: 72px; --font-size-subtitle-s3: 20px; --font-size-subtitle-s2: 24px; --font-size-subtitle-s3-1: 24px; --font-size-subtitle-s1: 32px; --space-inset-l10---4: 0.2em; --space-inset-l9---8: 0.4em; --space-inset-l8---12: 0.6em; --space-inset-l7---16: 0.8em; --space-inset-l6---20: 1em; --space-inset-l5---24: 1.2em; --space-inset-l4---32: 1.6em; --space-inset-l3---40: 2em; --space-inset-l2---48: 2.4em; --space-inset-l1---56: 2.8em; --space-stack-l6---52: 2.6em; --space-stack-l5---64: 3.2em; --space-stack-l4---80: 4em; --space-stack-l3---96: 4.8em; --space-stack-l2---128: 6.4em; --space-stack-l1---180: 9em; /* 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-button-arrow-space: 1em; --component-button-arrow-size: 2em; --component-button-arrow-on-card-font-size: 14px; --component-button-arrow-on-card-button-size: 1.6em; --component-button-function-space: 0.2em; --component-button-function-icon-size---s: 0.8em; --component-button-function-padding: 0.8em; --component-button-function-icon-size---m: 0.9em; --component-button-function-icon-size---l: 1em; --component-button-function-height---s: 1.6em; --component-button-function-height---m: 2em; --component-button-function-height---l: 2.2em; --component-button-function-min-width: 4.5em; --component-button-play-size: 1.6em; --component-button-top-size: 2em; --component-card-icon-size-3: 1.2em; --component-card-icon-size: 1.6em; --component-card-icon-size-2: 1.8em; --component-card-length-min: 8.1em; --component-card-length-max: 17.9em; --component-card-space-space-1: 0.2em; --component-card-space-space-2: 0.4em; --component-card-space-space-3: 0.6em; --component-card-space-space-4: 0.6em; --component-ksp-corner-radius-general: 0.2em; --component-ksp-size-high-min: 8.4em; --component-ksp-size-high-med: 12.7em; --component-ksp-size-high-max: 17em; --component-ksp-size-wide-min2: 8.85em; --component-ksp-size-wide-min: 11.85em; --component-ksp-size-wide-med: 17.9em; --component-ksp-size-wide-max: 23.95em; --component-ksp-space-max: 0.4em; --component-ksp-space-min: 0.4em; --corner-radius-corner-radius: 0.2em; --corner-radius-corner-radius-2: 0.2em; --corner-radius-corner-radius-3: 0.2em; --corner-radius-corner-radius-4: 0.2em; --corner-radius-corner-radius-5: 0.2em; --corner-radius-xs---4: 0.2em; --corner-radius-s---8: 0.4em; --corner-radius-m---12: 0.6em; --corner-radius-l---16: 0.8em; --corner-radius-xl---20: 0.8em; --corner-radius-xxl---24: 1.2em; --font-line-height-d1: 0.9em; --font-line-height-b3: 1em; --font-line-height-b3-1: 1em; --font-line-height-b2: 1.1em; --font-line-height-b1: 1.2em; --font-line-height-b2-1: 1.2em; --font-line-height-s3: 1.2em; --font-line-height-s3-1: 1.3em; --font-line-height-s2: 1.4em; --font-line-height-s1: 1.6em; --font-line-height-h6: 1.8em; --font-line-height-h5: 1.9em; --font-line-height-h4: 2.2em; --font-line-height-h3: 2.4em; --font-line-height-h2: 2.8em; --font-line-height-h1: 3.4em; --font-size-body-b3: 12px; --font-size-body-b3-1: 12px; --font-size-body-b2: 14px; --font-size-body-b1: 16px; --font-size-body-b2-1: 16px; --font-size-description-d1: 12px; --font-size-headline-h6: 28px; --font-size-headline-h5: 30px; --font-size-headline-h4: 36px; --font-size-headline-h3: 40px; --font-size-headline-h2: 48px; --font-size-headline-h1: 60px; --font-size-subtitle-s3: 16px; --font-size-subtitle-s3-1: 18px; --font-size-subtitle-s2: 20px; --font-size-subtitle-s1: 24px; --space-inset-l1---56: 0em; --space-inset-l4---32: 0em; --space-inset-l10---4: 0.2em; --space-inset-l9---8: 0.2em; --space-inset-l8---12: 0.4em; --space-inset-l7---16: 0.6em; --space-inset-l6---20: 0.8em; --space-inset-l5---24: 0.9em; --space-inset-l3---40: 1em; --space-inset-l2---48: 1.2em; --space-stack-l1---180: 0em; --space-stack-l2---128: 0em; --space-stack-l3---96: 0em; --space-stack-l6---52: 0em; --space-stack-l5---64: 1.2em; --space-stack-l4---80: 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-button-arrow-space: 1em; --component-button-arrow-size: 1.6em; --component-button-arrow-on-card-font-size: 14px; --component-button-arrow-on-card-button-size: 1.6em; --component-button-function-space: 0.2em; --component-button-function-icon-size---s: 0.8em; --component-button-function-padding: 0.8em; --component-button-function-icon-size---m: 0.9em; --component-button-function-icon-size---l: 1em; --component-button-function-height---s: 1.6em; --component-button-function-height---m: 2em; --component-button-function-height---l: 2.2em; --component-button-function-min-width: 4.5em; --component-button-play-size: 1.2em; --component-button-top-size: 1.6em; --component-card-icon-size-3: 1.2em; --component-card-icon-size: 1.6em; --component-card-icon-size-2: 1.8em; --component-card-length-min: 8.1em; --component-card-length-max: 16.4em; --component-card-space-space-1: 0.2em; --component-card-space-space-2: 0.4em; --component-card-space-space-3: 0.6em; --component-card-space-space-4: 0.6em; --component-ksp-corner-radius-general: 0.2em; --component-ksp-size-high-min: 8.4em; --component-ksp-size-high-med: 12.7em; --component-ksp-size-high-max: 17em; --component-ksp-size-wide-min2: 8.85em; --component-ksp-size-wide-min: 11.85em; --component-ksp-size-wide-med: 17.9em; --component-ksp-size-wide-max: 23.95em; --component-ksp-space-max: 0.4em; --component-ksp-space-min: 0.4em; --corner-radius-corner-radius: 0.2em; --corner-radius-corner-radius-2: 0.2em; --corner-radius-corner-radius-3: 0.2em; --corner-radius-corner-radius-4: 0.2em; --corner-radius-corner-radius-5: 0.2em; --corner-radius-xs---4: 0.2em; --corner-radius-s---8: 0.4em; --corner-radius-m---12: 0.6em; --corner-radius-l---16: 0.8em; --corner-radius-xl---20: 0.8em; --corner-radius-xxl---24: 1.2em; --font-line-height-d1: 0.9em; --font-line-height-b3: 1em; --font-line-height-b3-1: 1em; --font-line-height-b2: 1.1em; --font-line-height-b1: 1.2em; --font-line-height-b2-1: 1.2em; --font-line-height-s3: 1.2em; --font-line-height-s3-1: 1.3em; --font-line-height-s2: 1.4em; --font-line-height-s1: 1.6em; --font-line-height-h6: 1.8em; --font-line-height-h5: 1.9em; --font-line-height-h4: 2.2em; --font-line-height-h3: 2.4em; --font-line-height-h2: 2.8em; --font-line-height-h1: 3.4em; --font-size-body-b3: 12px; --font-size-body-b3-1: 12px; --font-size-body-b2: 14px; --font-size-body-b1: 16px; --font-size-body-b2-1: 16px; --font-size-description-d1: 12px; --font-size-headline-h6: 28px; --font-size-headline-h5: 30px; --font-size-headline-h4: 36px; --font-size-headline-h3: 40px; --font-size-headline-h2: 36px; --font-size-headline-h1: 60px; --font-size-subtitle-s3: 16px; --font-size-subtitle-s3-1: 18px; --font-size-subtitle-s2: 20px; --font-size-subtitle-s1: 24px; --space-inset-l1---56: 0em; --space-inset-l4---32: 0em; --space-inset-l10---4: 0.2em; --space-inset-l9---8: 0.2em; --space-inset-l8---12: 0.4em; --space-inset-l7---16: 0.6em; --space-inset-l6---20: 0.8em; --space-inset-l5---24: 0.9em; --space-inset-l3---40: 1em; --space-inset-l2---48: 1.2em; --space-stack-l1---180: 0em; --space-stack-l2---128: 0em; --space-stack-l3---96: 0em; --space-stack-l6---52: 0em; --space-stack-l5---64: 0.8em; --space-stack-l4---80: 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-battery-section-a, #one-assistant-section-a, #one-eyecare-section-a, #one-connectedTitle-section-a, #one-fluency-section-a, #one-kids-section-a { position: absolute; top: -46px; } #one-battery2-section-a { position: absolute; top: calc(500px - 46px); } } @media screen and (max-width: 1023px) and (min-width: 650px) { #one-battery2-section-a { position: absolute !important; top: calc(500px - 20px) !important; } } @media screen and (max-width: 1023px) { #one-battery-section-a, #one-battery2-section-a, #one-assistant-section-a, #one-eyecare-section-a, #one-connectedTitle-section-a, #one-fluency-section-a, #one-kids-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; } } /* 章节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.grey { background-color: #1D1D1F; } } /* 字体 */ @media screen and (min-width: 1024px) { #one-dom-container .one-h1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 1 */ font-family: var(--font-m); font-size: var(--font-size-headline-h1, 72px); font-style: normal; line-height: 111.111%; } #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(--font-size-headline-h2, 68px); font-style: normal; line-height: 111.765%; } #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(--font-size-headline-h3, 50px); font-style: normal; line-height: 116%; } #one-dom-container .one-h4 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 4 */ font-family: var(--font-m); font-size: var(--font-size-headline-h4, 42px); font-style: normal; line-height: 119.048%; } #one-dom-container .one-h5 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 5 */ font-family: var(--font-m); font-size: var(--font-size-headline-h5, 48px); font-style: normal; line-height: 125%; } #one-dom-container .one-h6 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 6 */ font-family: var(--font-m); font-size: var(--font-size-headline-h6, 36px); font-style: normal; line-height: 122.222%; } #one-dom-container .one-st1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-r); font-size: var(--font-size-subtitle-s1, 32px); font-style: normal; line-height: 125%; } #one-dom-container .one-st2 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Subtitle/Subheadline 2 R */ font-family: var(--font-r); font-size: var(--font-size-subtitle-s2, 24px); font-style: normal; line-height: 133.333%; } #one-dom-container .one-st3-1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-r); font-size: var(--font-size-subtitle-s3-1, 24px); font-style: normal; line-height: 133.333%; } #one-dom-container .one-st3 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-r); font-size: var(--font-size-subtitle-s3, 20px); font-style: normal; line-height: 140%; } #one-dom-container .one-st1.m, #one-dom-container .one-st2.m, #one-dom-container .one-st3-1.m, #one-dom-container .one-st3.m { font-family: var(--font-m); } #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(--font-size-body-b1, 18px); font-style: normal; line-height: 144.444%; } #one-dom-container .one-b2-1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 2-1 R */ font-family: var(--font-r); font-size: var(--font-size-body-b2-1, 16px); font-style: normal; line-height: 150%; } #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(--font-size-body-b2, 16px); font-style: normal; line-height: 150%; } #one-dom-container .one-b3-1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 3-1 R */ font-family: var(--font-r); font-size: var(--font-size-body-b3-1, 14px); font-style: normal; line-height: 157.143%; } #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(--font-size-body-b3, 12px); font-style: normal; line-height: 166.667%; } #one-dom-container .one-b1.m, #one-dom-container .one-b2-1.m, #one-dom-container .one-b2.m, #one-dom-container .one-b3-1.m, #one-dom-container .one-b3.m { font-family: var(--font-m); } #one-dom-container .one-b1.grey, #one-dom-container .one-b2-1.grey, #one-dom-container .one-b2.grey, #one-dom-container .one-b3-1.grey, #one-dom-container .one-b3.grey { opacity: 0.75; } #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(--font-size-description-d1, 12px); font-style: normal; line-height: 180%; } } /* 字体 */ @media screen and (max-width: 1023px) { #one-dom-container .one-h1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 1 */ font-family: var(--font-m); font-size: var(--font-size-headline-h1, 60px); font-style: normal; line-height: 113.333%; } #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(--font-size-headline-h2, 48px); font-style: normal; line-height: 116.667%; } #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(--font-size-headline-h3, 40px); font-style: normal; line-height: 120%; } #one-dom-container .one-h4 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 4 */ font-family: var(--font-m); font-size: var(--font-size-headline-h4, 36px); font-style: normal; line-height: 122.222%; } #one-dom-container .one-h5 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 5 */ font-family: var(--font-m); font-size: var(--font-size-headline-h5, 30px); font-style: normal; line-height: 126.667%; } #one-dom-container .one-h6 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 6 */ font-family: var(--font-m); font-size: var(--font-size-headline-h6, 28px); font-style: normal; line-height: 128.571%; } #one-dom-container .one-st1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-r); font-size: var(--font-size-subtitle-s1, 24px); font-style: normal; line-height: 133.333%; } #one-dom-container .one-st2 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Subtitle/Subheadline 2 R */ font-family: var(--font-r); font-size: var(--font-size-subtitle-s2, 20px); font-style: normal; line-height: 140%; } #one-dom-container .one-st3-1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-r); font-size: var(--font-size-subtitle-s3-1, 18px); font-style: normal; line-height: 144.444%; } #one-dom-container .one-st3 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-r); font-size: var(--font-size-subtitle-s3, 16px); font-style: normal; line-height: 150%; } #one-dom-container .one-st1.m, #one-dom-container .one-st2.m, #one-dom-container .one-st3-1.m, #one-dom-container .one-st3.m { font-family: var(--font-m); } #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(--font-size-body-b1, 16px); font-style: normal; line-height: 150%; } #one-dom-container .one-b2-1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 2-1 R */ font-family: var(--font-r); font-size: var(--font-size-body-b2-1, 16px); font-style: normal; line-height: 150%; } #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(--font-size-body-b2, 14px); font-style: normal; line-height: 157.143%; } #one-dom-container .one-b3-1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 3-1 R */ font-family: var(--font-r); font-size: var(--font-size-body-b3-1, 12px); font-style: normal; line-height: 166.667%; } #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(--font-size-body-b3, 12px); font-style: normal; line-height: 166.667%; } #one-dom-container .one-b1.m, #one-dom-container .one-b2-1.m, #one-dom-container .one-b2.m, #one-dom-container .one-b3-1.m, #one-dom-container .one-b3.m { font-family: var(--font-m); } #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(--font-size-description-d1, 12px); font-style: normal; line-height: 180%; } } /* 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-flexRow { display: flex !important; flex-direction: row; } #one-dom-container .one-pc-flexCol { display: flex !important; 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; } /* 居中 */ #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; } /* 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-flexRow { display: flex !important; flex-direction: row; } #one-dom-container .one-pad-flexCol { display: flex !important; 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; } /* 居中 */ #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; } /* 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-flexRow { display: flex !important; flex-direction: row; } #one-dom-container .one-wap-flexCol { display: flex !important; flex-direction: column; } /* 居中 */ #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; } } /* 相互改写部分 不加-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: 32em; } #one-dom-container .one-kv-txt { align-items: center; right: calc(50% + 5em); padding-bottom: 3em; } #one-dom-container .one-kv-p1 { margin-bottom: 24px; } #one-dom-container .one-kv-p2:not(:last-of-type) { margin-right: 33px; padding-right: 33px; border-right: 1.5px solid #000; } #one-dom-container .one-kv-remark { position: absolute; right: 65px; bottom: 33px; width: 103px; } #one-dom-container .one-kv-desc { position: absolute; left: 64px; bottom: 33px; } #one-dom-container .one-kv-desc p { font-size: 8px !important; color: var(--semantic-text-primary-opacity---black-l6---20a, rgba(0, 0, 0, 0.20)) !important; } /* navigation */ #one-dom-container .one-navigation-div { width: 100%; border-collapse: separate; border-spacing: 4px; } #one-dom-container .one-navigation-div td { width: 432px; height: 1px; } #one-dom-container .one-navigation-item { position: relative; height: 100%; cursor: pointer; } #one-dom-container .one-navigation-item picture { display: block; position: relative; margin-bottom: 4px; overflow: hidden; background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); width: 100%; height: 234px; } #one-dom-container .one-navigation-info { width: 100%; padding: var(--component-ksp-space-min, 12px) var(--component-ksp-space-max, 20px); align-items: center; justify-content: space-between; border-radius: var(--component-ksp-corner-Radius-general, 8px); background: var(--semantic-surface-primary-gray---l9---02, #FAFAFA); flex: 1; } #one-dom-container .one-navigation-info .one-title { height: 100%; } #one-dom-container .one-navigation-icon { margin-left: 20px; width: var(--component-button-function-icon-size---l, 24px); height: var(--component-button-function-icon-size---l, 24px); opacity: 0; } #one-dom-container .one-navigation-item:hover .one-navigation-icon { opacity: 1; } /* tvc */ #one-dom-container .one-tvc-video { height: 640px; } #one-dom-container .one-tvc-play-btn { position: absolute; bottom: 30px; right: 30px; z-index: 20; cursor: pointer; align-items: center; } #one-dom-container .one-tvc-play-icon { width: 26px; height: 26px; margin-right: 10px; } #one-dom-container .one-tvc-play-btn span { border-bottom: 1px solid #fff; } #one-dom-container .one-tvc-popup { visibility: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; overflow: auto; background-color: transparent; overflow: hidden; } #one-dom-container .one-tvc-popup-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fafafa; } #one-dom-container .one-popup-close-btn { position: absolute; top: 32px; right: 32px; width: 32px; height: 32px; z-index: 9999; cursor: pointer; } #one-dom-container .one-tvc-video-div { width: 100%; height: 100%; justify-content: center; align-items: center; } #one-dom-container .one-tvc-video-div video { width: 70vw; } /* eyecare */ #one-dom-container .one-eyecare-section { overflow: visible; z-index: 10; } #one-dom-container .one-eyecare-p2 { width: 872px; } #one-dom-container .one-eyecare-middle { width: 100%; height: 366px; margin-top: 48px; overflow: visible; } #one-dom-container .one-eyecare-imgdiv { top: 0; width: 931px; height: 464px; position: relative; } #one-dom-container .one-eyecare-img2 { opacity: 0; z-index: 10; } #one-dom-container .one-eyecare-info-div { margin-top: 48px; width: 872px; justify-content: space-between; opacity: 0; } #one-dom-container .one-eyecare-info { width: calc(25% - 6px); padding: 16px; border-radius: 8px; background: #282828; } /* matte */ #one-dom-container .one-matte-cert-div { margin-top: 24px; justify-content: space-between; } #one-dom-container .one-matte-cert { width: calc(50% - 4px); padding: 16px 24px; align-items: center; border-radius: 8px; background: #282828; } #one-dom-container .one-matte-cert-icon { width: 56px; height: 56px; margin-right: 8px; } #one-dom-container .one-matte-img { margin-top: 48px; width: 100%; height: 370px; } /* protection */ #one-dom-container .one-protection-section { background: #1A1A1A !important; } #one-dom-container .one-protection-img { width: 50%; height: 560px; } #one-dom-container .one-protection-txt1 { width: 50%; height: 560px; padding-left: 48px; justify-content: space-between; } #one-dom-container .one-protection-cert-div1 { justify-content: space-between; } #one-dom-container .one-protection-cert { width: calc(50% - 4px); padding: 16px 24px; align-items: center; border-radius: 8px; background: #000; } #one-dom-container .one-protection-cert-icon { width: 56px; height: 56px; margin-right: 8px; } /* sound */ #one-dom-container .one-sound-section { background: #1A1A1A !important; } #one-dom-container .one-sound-img { width: 660px; height: 560px; } #one-dom-container .one-sound-txt1 { width: 652px; height: 560px; padding-right: 48px; justify-content: space-between; } #one-dom-container .one-sound-cert-div { justify-content: start; align-items: start; } #one-dom-container .one-sound-cert-icon1 { width: 68px; height: 68px; margin-right: 12px; } #one-dom-container .one-sound-cert-icon2 { width: 68px; height: 86px; } /* color */ #one-dom-container .one-color-btn-div { margin-top: 14px; } #one-dom-container .one-color-btn { margin-right: 20px; cursor: pointer; align-items: center; opacity: 0.4; } #one-dom-container .one-color-btn.active { opacity: 1; } #one-dom-container .one-color-btn svg { width: 28px; height: 28px; margin-right: 8px; } #one-dom-container .one-color-circle { fill: none; stroke-width: 2.5px; stroke-dasharray: 125.6px; stroke-dashoffset: 125.6px; } #one-dom-container .one-color-btn.index0 .one-color-circle { stroke: #B8BCC5; } #one-dom-container .one-color-btn.index1 .one-color-circle { stroke: #7F89A7; } #one-dom-container .one-color-btn.active .one-color-circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-out; } #one-dom-container .one-color-swiper { width: 100%; height: 540px; margin-top: 48px; } #one-dom-container .one-color-swiper-item { width: 100%; height: 100%; background: #000; overflow: hidden; } #one-dom-container .one-color-img { width: 100%; height: 100%; } /* battery */ #one-dom-container .one-battery-section { background: #1A1A1A !important; } #one-dom-container .one-battery-content { height: 100%; position: relative; overflow: hidden; } #one-dom-container .one-battery-imgdiv { width: calc(50% + 106px); height: 100%; position: relative; } #one-dom-container .one-battery-txtdiv { width: calc(50% - 106px); height: 100%; position: relative; } #one-dom-container .one-battery-img { width: 826px; height: 687px; right: 0; } #one-dom-container .one-battery-txt1, #one-dom-container .one-battery-txt2 { width: 502px; height: 520px; left: 48px; justify-content: space-between; } #one-dom-container .one-battery-txt2 { opacity: 0; } #one-dom-container .one-battery-info-div { justify-content: space-between; margin-bottom: 8px; } #one-dom-container .one-battery-txt1 .one-battery-info { width: calc(50% - 4px); padding: 16px; border-radius: 8px; background: #000; } #one-dom-container .one-battery-txt1 .one-battery-info sub { font-size: 50%; bottom: 0; line-height: 0; position: relative; vertical-align: initial; } #one-dom-container .one-battery-txt2 .one-battery-info { width: calc(33.333333% - 5.4px); padding: 16px; border-radius: 8px; background: #000; } /* fluency */ #one-dom-container .one-fluency-section { background-color: #0D0D0D !important; height: 720px; } #one-dom-container .one-fluency-content { height: 720px; height: 100%; } #one-dom-container .one-fluency-txtdiv { width: calc(50% - 73px); height: 100%; position: relative; } #one-dom-container .one-fluency-txt1 { left: 0; width: 502px; } #one-dom-container .one-fluency-imgdiv { position: relative; width: calc(50% + 73px); height: 100%; } #one-dom-container .one-fluency-img { height: 538px; left: 0; position: absolute; } /* kids */ #one-dom-container .one-kids-section { background-color: #1A1A1A !important; } #one-dom-container .one-kids-content { align-items: center; justify-content: start; } #one-dom-container .one-kids-img { width: 41.3em; height: 30em; } #one-dom-container .one-kids-txt1 { margin-left: 2.4em; width: 530px; } /* opconnect */ #one-dom-container .one-opconnect-img { width: 50%; height: 600px; position: relative; } #one-dom-container .one-opconnect-txt { width: 50%; height: 600px; padding: 64px 48px; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); justify-content: center; } /* communication */ #one-dom-container .one-communication-txt { width: 50%; height: 600px; padding: 64px 48px; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); justify-content: space-between; } #one-dom-container .one-communication-img { width: 50%; height: 600px; position: relative; overflow: hidden; background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); } /* crossdevice */ #one-dom-container .one-crossdevice-img { width: 50%; height: 600px; position: relative; } #one-dom-container .one-crossdevice-txt { width: 50%; height: 600px; padding: 64px 48px; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); justify-content: space-between; } #one-dom-container .one-crossdevice-infolist { justify-content: space-between; } #one-dom-container .one-crossdevice-info { width: calc(33.333333% - 5.4px); padding: 20px; border-radius: 8px; background: var(--semantic-surface-primary-gray---l10---00, #FFF); } #one-dom-container .one-crossdevice-icon { width: 40px; height: 40px; margin-bottom: 8px; } /* assistant */ #one-dom-container .one-assistant-txt { width: 50%; height: 720px; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); position: relative; } #one-dom-container .one-assistant-title { width: 604px; right: 52px; } #one-dom-container .one-assistant-img { width: 50%; height: 720px; position: relative; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } #one-dom-container .one-assistant-img img { width: 590px; left: 0; } /* aiphoto */ #one-dom-container .one-aiphoto-content { justify-content: space-between; } #one-dom-container .one-aiphoto-left { width: 542px; justify-content: space-between; } #one-dom-container .one-aiphoto-imglist { width: 722px; height: 480px; align-items: center; justify-content: space-between; position: relative; } #one-dom-container .one-aiphoto-imgdiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: space-between; } #one-dom-container .one-aiphoto-imgdiv:not(.active) { display: none !important; } #one-dom-container .one-aiphoto-img { width: 357px; height: 480px; position: relative; } .one-aiphoto-img-tag { position: absolute; right: 16px; bottom: 12px; z-index: 10; padding: 4px 12px; border-radius: 44px; background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(3px); } #one-dom-container .one-aiphoto-drawer { width: 100%; position: relative; border-radius: 8px; overflow: hidden; } #one-dom-container .one-aiphoto-drawer-item { cursor: pointer; padding: 20px; opacity: 0.7; background: var(--semantic-surface-primary-opacity---black-l10---02a, rgba(0, 0, 0, 0.02)); backdrop-filter: blur(10px); } #one-dom-container .one-aiphoto-drawer-item:hover { opacity: 0.7; background: #F5F4F0; backdrop-filter: blur(10px); } #one-dom-container .one-aiphoto-drawer-item.active { opacity: 1; background: #F5F4F0; backdrop-filter: unset; } #one-dom-container .one-aiphoto-drawer-item .title { justify-content: space-between; align-items: center; } #one-dom-container .one-aiphoto-drawer-icon { width: 24px; height: 24px; transition: all 0.5s; } #one-dom-container .one-aiphoto-drawer-item.active .one-aiphoto-drawer-icon { opacity: 0; } #one-dom-container .one-aiphoto-drawer-item .desc { box-sizing: border-box; overflow: hidden; padding-right: 1.5em; height: 0; } #one-dom-container .one-aiphoto-drawer-item .desc p { padding-top: 4px; } #one-dom-container .one-aiphoto-drawer-item:first-child .desc { height: auto; } /* aidocument */ #one-dom-container .one-aidocument-content { justify-content: space-between; padding: 24px; align-items: center; background: #F6F6F6; } #one-dom-container .one-aidocument-img { width: 660px; height: 360px; padding: 16px 116px 16px 40px; } #one-dom-container .one-aidocument-img img.contain:not(.active) { display: none; } #one-dom-container .one-aidocument-right { width: 584px; height: 320px; justify-content: space-between; } #one-dom-container .one-aidocument-drawer { width: 100%; position: relative; overflow: hidden; border-left: 2px solid rgba(0, 0, 0, 0.30); padding-left: 20px; overflow: visible; } #one-dom-container .one-aidocument-drawer-block { position: absolute; left: -2px; width: 2px; height: 82px; background-color: #000; } #one-dom-container .one-aidocument-drawer-item { cursor: pointer; margin-top: 20px; opacity: 0.3; } #one-dom-container .one-aidocument-drawer-item:first-child { margin-top: 0px; } #one-dom-container .one-aidocument-drawer-item.active { opacity: 1; } #one-dom-container .one-aidocument-drawer-item .desc { box-sizing: border-box; overflow: hidden; padding-right: 76px; height: 0; } #one-dom-container .one-aidocument-drawer-item .desc p { padding-top: 4px; } #one-dom-container .one-aidocument-drawer-item:first-child .desc { height: auto; } /* notes */ #one-dom-container .one-notes-ol { margin-top: 24px; list-style: decimal; padding: 0; } #one-dom-container .one-notes-ol li { list-style: decimal; margin-left: 1em; } #one-dom-container .st2 .one-desc { margin-left: 1em; } #one-dom-container .st2 .one-desc::before { content: '*'; position: absolute; left: 0; } #one-dom-container .one-notes-rohs { margin-top: 24px; align-items: center; } #one-dom-container .one-notes-icon { width: 60px; height: 38.175px; } #one-dom-container .one-notes-rohs p { padding-top: 10px; } } /* one-pad.css */ @media screen and (max-width: 1439px) and (min-width: 650px) { /* kv */ #one-dom-container .one-kv-section { height: 21em; } #one-dom-container .one-kv-txt { align-items: center; left: 1.2em; padding-bottom: 2.35em; } #one-dom-container .one-kv-p1 { margin-bottom: 9px; font-size: 1.4em !important; } #one-dom-container .one-kv-p2 { font-size: 0.5em !important; } #one-dom-container .one-kv-p2:not(:last-of-type) { margin-right: 22px; padding-right: 22px; border-right: 0.8px solid #000; } #one-dom-container .one-kv-remark { position: absolute; right: 1.2em; bottom: 1em; width: 3.25em; } #one-dom-container .one-kv-desc { position: absolute; left: 1.2em; bottom: 1em; } #one-dom-container .one-kv-desc p { font-size: 0.25em !important; color: var(--semantic-text-primary-opacity---black-l6---20a, rgba(0, 0, 0, 0.20)) !important; } /* navigation */ #one-dom-container .one-navigation-div { width: 100%; border-collapse: separate; border-spacing: 0.2em; } #one-dom-container .one-navigation-div td { width: 11.85em; height: 1px; } #one-dom-container .one-navigation-item { position: relative; height: 100%; cursor: pointer; } #one-dom-container .one-navigation-item picture { width: 100%; height: 6.3em; display: block; position: relative; margin-bottom: 0.2em; overflow: hidden; background: linear-gradient(156deg, #C2C8CC -51.73%, #F5F5F5 52.87%); } #one-dom-container .one-navigation-item .one-navigation-info { flex: 1 auto; width: 100%; padding: 0.4em; border-radius: var(--component-ksp-corner-Radius-general, 0.2em); background: var(--semantic-surface-primary-gray---l9---02, #FAFAFA); } #one-dom-container .one-navigation-item .one-navigation-info .one-title { height: 100%; } .one-navigation-icon { width: 1em; height: 1em; } /* tvc */ #one-dom-container .one-tvc-videoview { height: 20.25em; } #one-dom-container .one-tvc-play-btn { position: absolute; bottom: 30px; right: 30px; z-index: 20; cursor: pointer; align-items: center; } #one-dom-container .one-tvc-play-icon { width: 26px; height: 26px; margin-right: 10px; } #one-dom-container .one-tvc-play-btn span { border-bottom: 1px solid #fff; } #one-dom-container .one-tvc-popup { visibility: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; overflow: auto; background-color: transparent; overflow: hidden; } #one-dom-container .one-tvc-popup-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fafafa; } #one-dom-container .one-popup-close-btn { position: absolute; top: 32px; right: 32px; width: 32px; height: 32px; z-index: 9999; cursor: pointer; } #one-dom-container .one-tvc-video-div { width: 100%; height: 100%; justify-content: center; align-items: center; } #one-dom-container .one-tvc-video-div video { width: 70vw; } /* eyecare */ #one-dom-container .one-eyecare-section { overflow: visible; z-index: 10; } #one-dom-container .one-eyecare-middle { width: 100%; height: 13.7em; margin-top: 1.2em; overflow: visible; } #one-dom-container .one-eyecare-imgdiv { top: 0; width: 36em; height: 18.5em; position: relative; } #one-dom-container .one-eyecare-img2 { opacity: 0; z-index: 10; } #one-dom-container .one-eyecare-info-div { margin-top: 1.2em; width: 36em; justify-content: space-between; opacity: 0; z-index: 2; } #one-dom-container .one-eyecare-info { width: calc(25% - 0.15em); padding: 0.6em; border-radius: 0.2em; background: #282828; } /* matte */ #one-dom-container .one-matte-img { margin-top: 1.2em; width: 100%; height: 10.2em; } #one-dom-container .one-matte-cert-div { margin-top: 1.2em; justify-content: space-between; } #one-dom-container .one-matte-cert { width: calc(50% - 0.1em); padding: 0.6em 0.9em; align-items: center; border-radius: 0.2em; background: #282828; } #one-dom-container .one-matte-cert-icon { width: 1.8em; height: 1.8em; margin-right: 0.2em; } /* protection */ #one-dom-container .one-protection-section { background: #1A1A1A !important; } #one-dom-container .one-protection-content { align-items: center; } #one-dom-container .one-protection-img { width: 17.9em; height: 19em; } #one-dom-container .one-protection-txt1 { width: 50%; min-height: 19em; padding-left: 1.2em; justify-content: space-between; } #one-dom-container .one-protection-cert-div1 { justify-content: space-between; margin-top: 0.5em; } #one-dom-container .one-protection-cert { width: calc(50% - 0.1em); padding: 0.8em; align-items: center; border-radius: 0.2em; background: #000; } #one-dom-container .one-protection-cert-icon { width: 1.8em; height: 1.8em; margin-right: 0.4em; } /* sound */ #one-dom-container .one-sound-section { background: #1A1A1A !important; } #one-dom-container .one-sound-content { align-items: center; } #one-dom-container .one-sound-img { width: 18.1em; height: 19em; } #one-dom-container .one-sound-txt1 { width: 17.9em; min-height: 19em; padding-right: 1.2em; justify-content: space-between; } #one-dom-container .one-sound-cert-div { justify-content: start; align-items: start; margin-top: 0.5em; } #one-dom-container .one-sound-cert-icon1 { width: 1.8em; height: 1.8em; margin-right: 0.4em; } #one-dom-container .one-sound-cert-icon2 { width: 1.8em; height: 2.25em; } /* color */ #one-dom-container .one-color-btn-div { margin-top: 0.6em; } #one-dom-container .one-color-btn { margin-right: 0.8em; cursor: pointer; align-items: center; opacity: 0.4; } #one-dom-container .one-color-btn.active { opacity: 1; } #one-dom-container .one-color-btn svg { width: 28px; height: 28px; margin-right: 0.2em; } #one-dom-container .one-color-circle { fill: none; stroke-width: 2.5px; stroke-dasharray: 125.6px; stroke-dashoffset: 125.6px; } #one-dom-container .one-color-btn.index0 .one-color-circle { stroke: #B8BCC5; } #one-dom-container .one-color-btn.index1 .one-color-circle { stroke: #7F89A7; } #one-dom-container .one-color-btn.active .one-color-circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-out; } #one-dom-container .one-color-swiper { width: 100%; height: 15em; margin-top: 1.2em; } #one-dom-container .one-color-swiper-item { width: 100%; height: 100%; background: #000; overflow: hidden; } #one-dom-container .one-color-img { width: 100%; height: 100%; } /* battery */ #one-dom-container .one-battery-section { background: #1A1A1A !important; } #one-dom-container .one-battery-content { height: 100%; position: relative; overflow: hidden; } #one-dom-container .one-battery-imgdiv { width: 50%; height: 100%; position: relative; } #one-dom-container .one-battery-txtdiv { width: 50%; height: 100%; position: relative; } #one-dom-container .one-battery-img { width: 19.1em; height: calc(100% - 100px); right: 0; } #one-dom-container .one-battery-txt1, #one-dom-container .one-battery-txt2 { width: 17.9em; height: calc(100% - 100px); max-height: 19.2em; padding: 0 1.2em; justify-content: space-between; } #one-dom-container .one-battery-txt2 { opacity: 0; } #one-dom-container .one-battery-info-div { justify-content: space-between; margin-bottom: 0.2em; margin-top: 0.5em; } #one-dom-container .one-battery-txt1 .one-battery-info { width: calc(50% - 0.1em); padding: 0.6em; border-radius: 0.2em; background: #000; } #one-dom-container .one-battery-txt1 .one-battery-info sub { font-size: 50%; bottom: 0; line-height: 0; position: relative; vertical-align: initial; } #one-dom-container .one-battery-txt2 .one-battery-info { width: calc(33.333333% - 5.4px); padding: 0.6em; border-radius: 0.2em; background: #000; } /* fluency */ #one-dom-container .one-fluency-section { background-color: #0D0D0D !important; } #one-dom-container .one-fluency-content { height: 22.5em; } #one-dom-container .one-fluency-txtdiv { width: 50%; height: 100%; position: relative; } #one-dom-container .one-fluency-txt1 { right: 1.2em; width: 16.7em; } #one-dom-container .one-fluency-imgdiv { position: relative; width: 50%; height: 100%; } #one-dom-container .one-fluency-img { height: 14.9em; left: 1.2em; } /* kids */ #one-dom-container .one-kids-section { background-color: #1A1A1A !important; } #one-dom-container .one-kids-content { align-items: center; justify-content: start; } #one-dom-container .one-kids-img { width: 19.1em; height: 20em; } #one-dom-container .one-kids-txt1 { margin-left: 1.2em; width: 16.7em; } /* opconnect */ #one-dom-container .one-opconnect-img { width: 50%; height: 18em; position: relative; } #one-dom-container .one-opconnect-txt { width: 50%; height: 18em; padding: 1.2em; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); justify-content: center; } /* communication */ #one-dom-container .one-communication-txt { width: 50%; height: 18em; padding: 1.2em; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); justify-content: space-between; } #one-dom-container .one-communication-img { width: 50%; height: 18em; position: relative; overflow: hidden; background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); } /* crossdevice */ #one-dom-container .one-crossdevice-img { width: 50%; min-height: 18em; position: relative; } #one-dom-container .one-crossdevice-txt { width: 50%; min-height: 18em; padding: 1.2em; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); justify-content: space-between; } #one-dom-container .one-crossdevice-infolist { justify-content: space-between; margin-top: 1.2em; } #one-dom-container .one-crossdevice-info { width: calc(33.333333% - 0.1334em); padding: 0.6em; border-radius: 0.2em; background: var(--semantic-surface-primary-gray---l10---00, #FFF); } #one-dom-container .one-crossdevice-icon { width: 1.2em; height: 1.2em; margin-bottom: 0.2em; } /* assistant */ #one-dom-container .one-assistant-txt { width: 50%; height: 20em; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); position: relative; } #one-dom-container .one-assistant-title { width: 16.7em; right: 1.2em; } #one-dom-container .one-assistant-img { width: 50%; height: 20em; position: relative; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } /* aiphoto */ #one-dom-container .one-aiphoto-content { justify-content: space-between; align-items: end; } #one-dom-container .one-aiphoto-left { width: 14.4em; height: 17.6em; min-height: 380px; justify-content: space-between; } #one-dom-container .one-aiphoto-imglist { width: 20.4em; height: 17.6em; align-items: center; justify-content: space-between; position: relative; } #one-dom-container .one-aiphoto-imgdiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: space-between; } #one-dom-container .one-aiphoto-imgdiv:not(.active) { display: none !important; } #one-dom-container .one-aiphoto-img { width: 10.1em; height: 17.6em; position: relative; } .one-aiphoto-img-tag { position: absolute; right: 12px; bottom: 8px; z-index: 10; padding: 4px 8px; border-radius: 44px; background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(3px); } #one-dom-container .one-aiphoto-drawer { width: 100%; position: relative; border-radius: 0.2em; overflow: hidden; } #one-dom-container .one-aiphoto-drawer-item { cursor: pointer; padding: 0.6em; opacity: 0.7; background: var(--semantic-surface-primary-opacity---black-l10---02a, rgba(0, 0, 0, 0.02)); backdrop-filter: blur(10px); } #one-dom-container .one-aiphoto-drawer-item:hover { opacity: 0.7; background: #F5F4F0; backdrop-filter: blur(10px); } #one-dom-container .one-aiphoto-drawer-item.active { opacity: 1; background: #F5F4F0; backdrop-filter: unset; } #one-dom-container .one-aiphoto-drawer-item .title { justify-content: space-between; align-items: center; } #one-dom-container .one-aiphoto-drawer-icon { width: 24px; height: 24px; transition: all 0.5s; } #one-dom-container .one-aiphoto-drawer-item.active .one-aiphoto-drawer-icon { opacity: 0; } #one-dom-container .one-aiphoto-drawer-item .desc { box-sizing: border-box; overflow: hidden; padding-right: 1.5em; height: 0; } #one-dom-container .one-aiphoto-drawer-item .desc p { padding-top: 4px; } #one-dom-container .one-aiphoto-drawer-item:first-child .desc { height: auto; } /* aidocument */ #one-dom-container .one-aidocument-content { justify-content: space-between; padding: 1.2em; align-items: center; background: #F6F6F6; } #one-dom-container .one-aidocument-img { width: 15.2em; height: 9.9em; } #one-dom-container .one-aidocument-img img.contain:not(.active) { display: none; } #one-dom-container .one-aidocument-right { width: 17em; justify-content: space-between; height: 300px; } #one-dom-container .one-aidocument-drawer { width: 100%; position: relative; overflow: hidden; border-left: 2px solid rgba(0, 0, 0, 0.30); padding-left: 1em; overflow: visible; } #one-dom-container .one-aidocument-drawer-block { position: absolute; left: -2px; width: 2px; height: 82px; background-color: #000; } #one-dom-container .one-aidocument-drawer-item { cursor: pointer; margin-top: 0.8em; opacity: 0.3; } #one-dom-container .one-aidocument-drawer-item:first-child { margin-top: 0px; } #one-dom-container .one-aidocument-drawer-item.active { opacity: 1; } #one-dom-container .one-aidocument-drawer-item .desc { box-sizing: border-box; overflow: hidden; height: 0; } #one-dom-container .one-aidocument-drawer-item .desc p { padding-top: 4px; } #one-dom-container .one-aidocument-drawer-item:first-child .desc { height: auto; } /* notes */ #one-dom-container .one-notes-ol { margin-top: 0.9em; margin-left: 1em; list-style: decimal; padding: 0; } #one-dom-container .one-notes-ol li { list-style: decimal; margin-left: 1em; } #one-dom-container .st2 .one-desc { margin-left: 1em; } #one-dom-container .st2 .one-desc::before { content: '*'; position: absolute; left: 0; } #one-dom-container .one-notes-rohs { margin-top: 0.9em; align-items: center; } #one-dom-container .one-notes-icon { width: 60px; height: 38.175px; } #one-dom-container .one-notes-rohs p { padding-top: 10px; } } /* one-wap.css */ @media screen and (max-width: 649px) { /* kv */ #one-dom-container .one-kv-img { width: 100%; height: 31.95em; } #one-dom-container .one-kv-txt { top: 3.5em; width: 100%; } #one-dom-container .one-kv-p1 { color: var(--component-text-headine-l1, #000); font-family: var(--font-m); font-size: 1.6em; font-style: normal; line-height: 125%; } #one-dom-container .one-kv-subtitle { justify-content: center; margin-top: 0.4em; } #one-dom-container .one-kv-p2 { color: var(--component-text-headine-l1, #000); font-family: var(--font-r); font-size: 0.5em; font-style: normal; line-height: 110%; } #one-dom-container .one-kv-p2:not(:last-of-type) { margin-right: 12px; padding-right: 12px; border-right: 0.5px solid #000; } #one-dom-container .one-kv-remark { position: absolute; right: 0.8em; bottom: 0.86em; width: 2.75em; } #one-dom-container .one-kv-desc { position: absolute; left: 0.8em; bottom: 0.85em; } #one-dom-container .one-kv-desc p { font-size: 0.2em !important; color: var(--semantic-text-primary-opacity---black-l6---20a, rgba(0, 0, 0, 0.20)) !important; } /* navigation */ #one-dom-container .one-navigation-div { flex-wrap: wrap; width: 100%; gap: 0.2em; } #one-dom-container .one-navigation-item { position: relative; width: 8.1em; } #one-dom-container .one-navigation-item.st2 { width: 100% } #one-dom-container .one-navigation-item img { width: 100%; height: 6.9em; } #one-dom-container .one-navigation-info { margin-top: 0.2em; width: 100%; padding: 0.4em; border-radius: var(--semantic-corner-radius-level-3, 0.2em); background: var(--semantic-surface-light-level-6, #FAFAFA); flex: 1; } /* tvc */ #one-dom-container .one-tvc-videoview { height: 20.5em; } #one-dom-container .one-tvc-play-btn { position: absolute; bottom: 0.55em; right: 0.7em; z-index: 20; cursor: pointer; align-items: center; } #one-dom-container .one-tvc-play-icon { width: 14px; height: 14px; margin-right: 0.27em; } #one-dom-container .one-tvc-play-btn span { border-bottom: 1px solid #fff; font-size: 10px !important; } #one-dom-container .one-tvc-popup { visibility: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; overflow: auto; background-color: transparent; overflow: hidden; } #one-dom-container .one-tvc-popup-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fafafa; } #one-dom-container .one-popup-close-btn { position: absolute; top: 32px; right: 32px; width: 32px; height: 32px; z-index: 9999; cursor: pointer; } #one-dom-container .one-tvc-video-div { width: 100%; height: 100%; justify-content: center; align-items: center; } #one-dom-container .one-tvc-video-div video { width: 85vw; } /* eyecare */ #one-dom-container .one-eyecare-section { overflow-x: hidden; z-index: 2; } #one-dom-container .one-eyecare-middle { width: 100%; height: 8.15em; margin-top: 1.2em; overflow: visible; } #one-dom-container .one-eyecare-imgdiv { top: 0; width: 35.9em; height: 17.9em; position: relative; } #one-dom-container .one-eyecare-img2 { opacity: 0; z-index: 10; } #one-dom-container .one-eyecare-info-div { margin-top: 1.2em; justify-content: space-between; opacity: 0; flex-wrap: wrap; } #one-dom-container .one-eyecare-info { margin-bottom: 0.2em; width: calc(50% - 0.1em); padding: 0.6em; border-radius: 0.2em; background: #282828; } /* matte */ #one-dom-container .one-matte-txt1 { margin-top: 0.9em; } #one-dom-container .one-matte-img { margin-top: 1.2em; width: 100%; height: 4.9em; overflow: visible; } #one-dom-container .one-matte-cert-div { margin-top: 1.2em; justify-content: space-between; } #one-dom-container .one-matte-cert { width: 100%; padding: 0.6em 0.9em; align-items: center; border-radius: 0.2em; background: #282828; margin-top: 0.2em; } #one-dom-container .one-matte-cert-icon { width: 1.8em; height: 1.8em; margin-right: 0.4em; } /* protection */ #one-dom-container .one-protection-section { background: #1A1A1A !important; } #one-dom-container .one-protection-img { margin-top: 1.2em; width: 100%; height: 20em; } #one-dom-container .one-protection-cert-div1 { justify-content: space-between; bottom: 0.8em; } #one-dom-container .one-protection-cert { width: calc(50% - 0.1em); padding: 0.6em 0.8em; align-items: center; border-radius: 0.2em; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(10px); } #one-dom-container .one-protection-cert-icon { width: 1.8em; height: 1.8em; margin-bottom: 0.2em; } /* sound */ #one-dom-container .one-sound-section { background: #0D0D0D !important; } #one-dom-container .one-sound-content { align-items: center; } #one-dom-container .one-sound-cert-div { justify-content: start; align-items: start; margin-top: 1.2em; } #one-dom-container .one-sound-cert-icon1 { width: 2.5em; height: 2.5em; margin-right: 0.4em; } #one-dom-container .one-sound-cert-icon2 { width: 2.5em; height: 3.15em; } #one-dom-container .one-sound-img { margin-top: 1.2em; width: 18em; height: 14em; } /* color */ #one-dom-container .one-color-txt1 { margin-top: 0.9em; } #one-dom-container .one-color-btn-div { margin-top: 1.2em; } #one-dom-container .one-color-btn { align-items: center; margin-right: 0.8em; } #one-dom-container .one-color-btn svg { width: 28px; height: 28px; margin-right: 0.2em; } #one-dom-container .one-color-circle { fill: none; stroke-width: 2.5px; stroke-dasharray: 125.6px; stroke-dashoffset: 125.6px; } #one-dom-container .one-color-btn.index0 .one-color-circle { stroke: #B8BCC5; } #one-dom-container .one-color-btn.index1 .one-color-circle { stroke: #7F89A7; } #one-dom-container .one-color-btn.active .one-color-circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-out; } #one-dom-container .one-color-swiper { width: 100%; height: 16em; margin-top: 0.6em; } #one-dom-container .one-color-swiper-item { width: 100%; height: 100%; background: #000; overflow: hidden; } #one-dom-container .one-color-img { width: 100%; height: 100%; } /* battery */ #one-dom-container .one-battery-section { background: #1A1A1A !important; } #one-dom-container .one-battery-txt1, #one-dom-container .one-battery-txt2 { background: #000; padding: 0.8em; } #one-dom-container .one-battery-info-div { justify-content: space-between; margin-top: 1.2em; flex-wrap: wrap; } #one-dom-container .one-battery-txt1 .one-battery-info { width: calc(50% - 0.1em); padding: 0.6em; border-radius: 0.2em; background: #1A1A1A; } #one-dom-container .one-battery-txt1 .one-battery-info sub { font-size: 50%; bottom: 0; line-height: 0; position: relative; vertical-align: initial; } #one-dom-container .one-battery-txt2 .one-battery-info { width: calc(50% - 0.1em); padding: 0.6em; border-radius: 0.2em; background: #1A1A1A; margin-bottom: 0.2em; } #one-dom-container .one-battery-txt2 .one-battery-info:last-of-type { width: 100%; } #one-dom-container .one-battery-img { width: 100%; height: 15.2em; position: relative; } /* fluency */ #one-dom-container .one-fluency-section { background-color: #1A1A1A !important; } #one-dom-container .one-fluency-imgdiv { margin-top: 1.2em; width: 100%; height: 14em; } /* kids */ #one-dom-container .one-kids-section { background-color: #1A1A1A !important; } #one-dom-container .one-kids-img { margin-top: 1.2em; width: 100%; height: 18.5em; } /* opconnect */ #one-dom-container .one-opconnect-img { width: 100%; height: 16.4em; position: relative; background: #F6F6F6; } #one-dom-container .one-opconnect-txt { padding: 1.2em; background: #F6F6F6; justify-content: center; } /* communication */ #one-dom-container .one-communication-img { width: 100%; height: 16.4em; position: relative; background: #F6F6F6; } #one-dom-container .one-communication-txt { padding: 1.2em; background: #F6F6F6; } #one-dom-container .one-communication-txt .one-title { margin-bottom: 1.2em; } /* crossdevice */ #one-dom-container .one-crossdevice-img { width: 100%; height: 16.4em; position: relative; } #one-dom-container .one-crossdevice-txt { padding: 1.2em; background: #F6F6F6; } #one-dom-container .one-crossdevice-infolist { justify-content: space-between; margin-top: 1.2em; } #one-dom-container .one-crossdevice-info { width: calc(33.333333% - 0.1334em); padding: 0.6em; border-radius: 0.2em; background: #FFF; } #one-dom-container .one-crossdevice-icon { width: 1.2em; height: 1.2em; margin-bottom: 0.2em; } /* assistant */ #one-dom-container .one-assistant-section { background: #F6F6F6 !important; } #one-dom-container .one-assistant-title { width: 16.7em; right: 1.2em; } #one-dom-container .one-assistant-img { margin-top: 1.2em; width: 100%; height: 15em; } /* aiphoto */ #one-dom-container .one-aiphoto-imglist { margin-top: 1.2em; width: 100%; height: 12em; align-items: center; justify-content: space-between; position: relative; } #one-dom-container .one-aiphoto-imgdiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: space-between; } #one-dom-container .one-aiphoto-imgdiv:not(.active) { display: none !important; } #one-dom-container .one-aiphoto-img { width: 8.1em; height: 12em; position: relative; } .one-aiphoto-img-tag { position: absolute; right: 4px; bottom: 4px; z-index: 10; padding: 4px 8px; border-radius: 44px; background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(3px); } #one-dom-container .one-aiphoto-drawer { margin-top: 1.2em; width: 100%; position: relative; border-radius: 0.4em; overflow: hidden; } #one-dom-container .one-aiphoto-drawer-item { cursor: pointer; padding: 0.6em; background: rgba(0, 0, 0, 0.014); backdrop-filter: blur(10px); } #one-dom-container .one-aiphoto-drawer-item.active { background: #F5F4F0; padding: 0.6em; } #one-dom-container .one-aiphoto-drawer-item .title { justify-content: space-between; align-items: center; } #one-dom-container .one-aiphoto-drawer-icon { width: 24px; height: 24px; transition: all 0.5s; } #one-dom-container .one-aiphoto-drawer-item.active .one-aiphoto-drawer-icon { opacity: 0; } #one-dom-container .one-aiphoto-drawer-item .desc { box-sizing: border-box; overflow: hidden; height: 0; } #one-dom-container .one-aiphoto-drawer-item:first-child .desc { height: auto; } /* aidocument */ #one-dom-container .one-aidocument-swiper { margin-top: 1.2em; width: 100%; position: relative; } #one-dom-container .one-aidocument-drawer-item { width: 100%; padding: 0.6em; border-radius: 0.4em; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } #one-dom-container .one-aidocument-drawer-item .desc { padding-top: 4px; } #one-dom-container .one-aidocument-img { width: 15.2em; height: 9.95em; margin-top: 0.6em; } #one-dom-container .one-aidocument-scrollbar { margin-top: 1.2em; position: static; background-color: rgba(0, 0, 0, 0.30); } #one-dom-container .one-aidocument-scrollbar .swiper-scrollbar-drag { background: #000; } /* notes */ #one-dom-container .one-notes-ol { margin-top: 0.9em; list-style: decimal; padding: 0; } #one-dom-container .one-notes-ol li { list-style: decimal; margin-left: 1em; } #one-dom-container .st2 .one-desc { margin-left: 1em; } #one-dom-container .st2 .one-desc::before { content: '*'; position: absolute; left: 0; } #one-dom-container .one-notes-rohs { margin-top: 0.9em; align-items: center; } #one-dom-container .one-notes-icon { width: 60px; height: 38.175px; } #one-dom-container .one-notes-rohs p { padding-top: 5px; } }