@charset "UTF-8"; #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; } /* 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); } /* 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: 0em; 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-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%; } } @media screen and (min-width: 1025px) { #one-driver-section-a, #one-custom-section-a, #one-battery-section-a, #one-protection-section-a, #one-bluetooth-section-a, #one-durable-section-a { position: absolute; top: -48px; } #one-dom-container .one-durable-img, #one-dom-container .one-protection-img { top: 48px; } } @media screen and (max-width: 1024px) { #one-driver-section-a, #one-custom-section-a, #one-battery-section-a, #one-protection-section-a, #one-bluetooth-section-a, #one-durable-section-a { position: absolute; top: -92px; } #one-dom-container .one-durable-img, #one-dom-container .one-protection-img { top: 92px; } } /* 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-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; } /* 居中 */ #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; gap: var(--space-inset-l5---24, 24px); } #one-dom-container .one-title.ct { align-items: center; } #one-dom-container .one-title.row { flex-direction: row; justify-content: space-between; } #one-dom-container .one-title.row p { width: calc(50% - 4px); } #one-dom-container .one-title.row .one-b1 { padding-top: 6px; } #one-dom-container .one-title.sm { gap: var(--space-inset-l8---8, 8px); } } /* 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-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; } /* 居中 */ #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; gap: 0.9em; } #one-dom-container .one-title.ct { align-items: center; } #one-dom-container .one-title.row { flex-direction: row; justify-content: space-between; } #one-dom-container .one-title.row p { width: calc(50% - 4px); } #one-dom-container .one-title.row .one-b1 { padding-top: 6px; } #one-dom-container .one-title.sm { gap: 0.4em; } } /* one-common-wap.css */ /* 独有部分 加-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-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; gap: var(--space-inset-l5---24, 18px); } #one-dom-container .one-title.sm { gap: 0.4em; } } /* one-pc.css */ @media screen and (min-width: 1440px) { /* kv */ #one-dom-container .one-kv-content { width: 100%; height: 100%; margin-left: calc(-1 * (100vw - 1440px) / 10); } #one-dom-container .one-kv-txt { gap: var(--space-inset-l4---32, 32px); } /* navigation */ #one-dom-container .one-navigation-div, #one-dom-container .one-navigation-div-col, #one-dom-container .one-navigation-div-col-row, #one-dom-container .one-navigation-div-col-row-col { gap: 8px; } #one-dom-container .one-navigation-item { cursor: pointer; position: relative; } #one-dom-container .one-navigation-item picture { display: block; position: relative; margin-bottom: 4px; overflow: hidden; background: linear-gradient(156deg, #C2C8CC -51.73%, #F5F5F5 52.87%); } #one-dom-container .one-navigation-item.index0 picture { width: 432px; height: 528px; } #one-dom-container .one-navigation-item.index1 picture { width: 432px; height: 234px; } #one-dom-container .one-navigation-item.index2 picture { width: 872px; height: 234px; } #one-dom-container .one-navigation-item.index3 picture { width: 432px; height: 234px; } #one-dom-container .one-navigation-item.index4 picture { width: 432px; height: 234px; } #one-dom-container .one-navigation-item.index5 picture { width: 432px; height: 528px; } #one-dom-container .one-navigation-item.index5 picture.icon { display: block; position: absolute; top: 464px; left: 20px; z-index: 2; width: 52px !important; height: 52px !important; border-radius: 7px; overflow: hidden; } #one-dom-container .one-navigation-item p { width: 100%; padding: var(--component-ksp-space-min, 12px) var(--component-ksp-space-max, 20px); border-radius: var(--component-ksp-corner-radius-general, 8px); background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); height: 48px; } /* batteryLifeTitle */ #one-dom-container .one-batteryLifeTitle-txt { padding: 184px 0; } /* battery */ #one-dom-container .one-battery-section { height: 640px; } #one-dom-container .one-battery-content { height: 100%; } #one-dom-container .one-battery-col { width: 50%; height: 100%; position: relative; } #one-dom-container .one-battery-txt { padding-right: var(--space-inset-l3---40, 40px); padding-top: 60px; padding-bottom: 60px; justify-content: space-between; height: 100%; width: 100%; } #one-dom-container .one-battery-info-list { gap: var(--space-inset-l9---8, 8px); } #one-dom-container .one-battery-info { width: 302px; padding: var(--space-inset-l7---16, 16px); border-radius: var(--corner-radius-S---8, 8px); background: var(--component-card-info-bg-primary-white, #FAFAFA); gap: var(--space-inset-l10---4, 4px); } /* charge */ #one-dom-container .one-charge-section { height: 640px; } #one-dom-container .one-charge-content { height: 100%; } #one-dom-container .one-charge-col { width: 50%; height: 100%; } #one-dom-container .one-charge-txt { padding-left: var(--space-inset-l3---40, 40px); padding-top: 60px; padding-bottom: 60px; justify-content: space-between; height: 100%; width: 100%; } #one-dom-container .one-charge-info { padding: var(--space-inset-l7---16, 16px); border-radius: var(--corner-radius-S---8, 8px); background: var(--component-card-info-bg-primary-white, #FAFAFA); } #one-dom-container .one-charge-txt-color { color: #2cff73; } /* durable */ #one-dom-container .one-durable-section { overflow: visible !important; height: calc(100vh - 49px); max-height: 60vw; min-height: 700px; } #one-dom-container .one-durable-content { height: 200%; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); position: relative; } #one-dom-container .one-durable-txt-div { width: 50%; height: 50%; position: absolute; left: 0; top: 0; } #one-dom-container .one-durable-txt { position: absolute; top: 0; right: 0; padding-right: var(--space-inset-l2---48, 48px); padding-top: 80px; padding-bottom: 80px; justify-content: space-between; height: 100%; width: 652px; } #one-dom-container .one-durable-info { width: 322px; padding: var(--space-inset-l6---20, 20px); align-items: center; gap: var(--space-inset-l9---8, 8px); border-radius: var(--space-inset-L1---8, 8px); background: var(--component-card-info-bg-primary-white-opa-select, #FFF); } #one-dom-container .one-durable-durablelogo { width: 56px; height: 56px; } #one-dom-container .one-durable-img { width: 50%; margin-left: 50%; height: 50%; position: sticky; } /* protection */ #one-dom-container .one-protection-section { overflow: visible; height: calc(100vh - 49px); max-height: 60vw; min-height: 700px; } #one-dom-container .one-protection-content { height: 200%; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); position: relative; } #one-dom-container .one-protection-txt-div { width: 50%; height: 50%; position: absolute; right: 0; top: 0; } #one-dom-container .one-protection-txt { padding-left: var(--space-inset-l3---40, 40px); justify-content: space-between; padding-top: 80px; padding-bottom: 80px; height: 100%; width: 652px; } #one-dom-container .one-protection-info-list { gap: var(--space-inset-l9---8, 8px); flex-wrap: wrap; } #one-dom-container .one-protection-info { width: 302px; padding: var(--space-inset-l7---16, 16px); gap: var(--space-inset-l10---4, 4px); border-radius: var(--corner-radius-S---8, 8px); background: var(--component-card-info-bg-primary-white-opa-select, #FFF); } #one-dom-container .one-protection-img { width: 50%; margin-right: 50%; height: 50%; position: sticky; } /* bluetooth */ #one-dom-container .one-bluetooth-section { height: 720px; } #one-dom-container .one-bluetooth-content { height: 100%; } #one-dom-container .one-bluetooth-col { width: 50%; height: 100%; position: relative; } #one-dom-container .one-bluetooth-txt { width: 100%; height: 100%; justify-content: center; padding-right: var(--space-inset-l2---48, 48px); } /* soundTitle */ #one-dom-container .one-soundTitle-section.bk { background: var(--semantic-surface-primary-gray---l8---04, #1A1A1A); } #one-dom-container .one-soundTitle-txt { padding: 184px 0; } /* driver */ #one-dom-container .one-driver-section.bk { background: radial-gradient(85.23% 85.23% at 50% 119.3%, #4D4D4D 0%, #1A1A1A 100%); } #one-dom-container .one-driver-img { width: 100%; height: 600px; position: relative; } #one-dom-container .one-driver-img img { position: absolute; } #one-dom-container .one-driver-img-1 { height: 344px; left: 442px; top: 126px; } #one-dom-container .one-driver-img-2 { height: 136px; left: 556px; top: 134px; } #one-dom-container .one-driver-img-3 { height: 77px; left: 588px; top: 161px; } #one-dom-container .one-driver-img-4 { height: 130px; left: 604px; top: 131px; } #one-dom-container .one-driver-img-5 { height: 170px; left: 612px; top: 108px; } #one-dom-container .one-driver-img-6 { width: 153px; height: 260px; left: 680px; top: 50px; opacity: 0; } #one-dom-container .one-driver-img-info1 { opacity: 0; position: absolute; top: 617px; left: 550px; width: 120px; align-items: center; gap: var(--space-inset-l9---8, 8px); } #one-dom-container .one-driver-img-line1 { width: 0.5px; height: 48px; background: var(--semantic-surface-primary-gray---l1---100, #FFF); } #one-dom-container .one-driver-img-info2 { opacity: 0; position: absolute; top: 673px; left: 698px; width: 138px; align-items: center; gap: var(--space-inset-l9---8, 8px); } #one-dom-container .one-driver-img-line2 { width: 0.5px; height: 80px; background: var(--semantic-surface-primary-gray---l1---100, #FFF); } /* custom */ .one-custom-section { height: 100vh; max-height: 40vw; } #one-dom-container .one-custom-content { height: 100%; } #one-dom-container .one-custom-col { width: 50%; height: 100%; position: relative; background: radial-gradient(115.6% 115.6% at 50% 141.5%, var(--semantic-surface-primary-gray---l4---25, #4D4D4D) 0%, var(--semantic-surface-primary-gray---l8---04, #1A1A1A) 100%); } #one-dom-container .one-custom-txt { width: 724px; height: 100%; padding: var(--space-stack-l4---80, 80px) var(--space-stack-l5---64, 64px); justify-content: space-between; } #one-dom-container .one-custom-info-list { gap: var(--space-inset-l9---8, 8px); } /* controlTitle */ #one-dom-container .one-controlTitle-txt { padding: 184px 0; } /* fingertips */ #one-dom-container .one-fingertips-maincontent { width: 100%; height: 512px; margin-top: 48px; margin-bottom: 48px; border-radius: var(--corner-radius-m---12, 12px); overflow: hidden; position: relative; } #one-dom-container .one-fingertips-info-list { bottom: 24px; width: 100%; justify-content: center; gap: var(--space-inset-l9---8, 8px); } #one-dom-container .one-fingertips-info { width: 310px; height: 80px; padding: var(--space-inset-l7---16, 16px); gap: var(--space-inset-l10---4, 4px); border-radius: var(--corner-radius-S---8, 8px); background: var(--semantic-surface-primary-opacity---white-l2---75a, rgba(255, 255, 255, 0.75)); backdrop-filter: blur(25px); } /* game */ #one-dom-container .one-game-content { height: 600px; border-radius: var(--corner-radius-m---12, 12px); overflow: hidden; background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); } #one-dom-container .one-game-col { width: 50%; height: 100%; } #one-dom-container .one-game-txt { height: 100%; padding: var(--space-stack-l5---64, 64px) var(--space-inset-l2---48, 48px); justify-content: space-between; } #one-dom-container.new .one-game-swiper-button-div { align-items: center; bottom: 0; z-index: 2; } #one-dom-container.new .one-game-swiper-numdiv { margin: 0 12px; } #one-dom-container.new .one-game-swiper-numdiv .grey2 { opacity: 0.3; } #one-dom-container.new .one-game-swiper-button { opacity: 0.8; cursor: pointer; width: 32px; height: 32px; border-radius: 100%; } #one-dom-container.new .one-game-swiper-button svg { width: 100%; height: 100%; } #one-dom-container.new .one-game-swiper-button-prev { transform: rotate(180deg); } #one-dom-container.new .one-game-swiper-button:hover { opacity: 1; } #one-dom-container.new .one-game-swiper-button.swiper-button-disabled { opacity: 0.3; cursor: auto; } /* os */ #one-dom-container .one-os-content { gap: 8px; flex-wrap: wrap; } #one-dom-container .one-os-item { width: calc(50% - 4px); justify-content: space-between; overflow: hidden; border-radius: var(--corner-radius-m---12, 12px); background: linear-gradient(167deg, #F5F5F5 51.85%, #C2C8CC 140.16%); } #one-dom-container .one-os-item .one-title { top: 0; padding: 32px 24px 0 24px; width: 100%; } #one-dom-container .one-os-item.one-os-ai-item img { width: 427px; height: 255px; margin-left: 112px; margin-bottom: 76px; margin-top: 50px; } #one-dom-container .one-os-item.one-os-dualDevice-item img { width: 489.191px; height: 284px; margin-left: 58px; margin-bottom: 31px; margin-top: 50px; } #one-dom-container .one-os-item.one-os-pair-item img { width: 465.244px; height: 495px; margin-left: 24px; margin-bottom: 20px; margin-top: 17px; } #one-dom-container .one-os-item.one-os-personalized-item img { width: 417px; height: 459px; margin-left: 24px; margin-bottom: 0; margin-top: 17px; } /* designTitle */ #one-dom-container .one-designTitle-txt { padding: 184px 0; } /* design */ #one-dom-container .one-design-swiper { width: 100%; height: 600px; } #one-dom-container .one-design-swiper-item { width: 100%; height: 100%; border-radius: var(--corner-radius-m---12, 12px); background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); overflow: hidden; } #one-dom-container .one-design-swiper-col { width: 50%; height: 100%; } #one-dom-container .one-design-swiper .one-title { padding: var(--space-stack-l5---64, 64px) var(--space-inset-l2---48, 48px); } #one-dom-container .one-design-btn-div { position: absolute; left: var(--space-inset-l2---48, 48px); bottom: var(--space-stack-l5---64, 64px); gap: var(--space-inset-l6---20, 20px); z-index: 3; } #one-dom-container .one-design-btn { cursor: pointer; align-items: center; gap: var(--space-inset-l9---8, 8px); } #one-dom-container .one-design-btn svg { width: 28px; height: 28px; } #one-dom-container .one-design-circle { fill: none; stroke-width: 2.5px; stroke-dasharray: 125.6px; stroke-dashoffset: 125.6px; } #one-dom-container .one-design-btn.index0 .one-design-circle { stroke: white; } #one-dom-container .one-design-btn.index1 .one-design-circle { stroke: #333333; } #one-dom-container.new .one-design-btn.index2 .one-design-circle { stroke: #A1B6F7; } #one-dom-container .one-design-btn.active .one-design-circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-out; } /* unpacking */ #one-dom-container .one-unpacking-section.wt { background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } #one-dom-container .one-unpacking-img { width: 1140px; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } /* notes */ #one-dom-container .one-notes-content { padding: var(--space-stack-l5---64, 64px) 0; } } /* one-pad.css */ @media screen and (max-width: 1439px) and (min-width: 650px) { /* kv */ #one-dom-container .one-kv-section { height: 21.7em; } #one-dom-container .one-kv-content { width: 100%; height: 21.7em; } #one-dom-container .one-kv-txt { gap: var(--space-inset-l8---12, 0.4em); } /* navigation */ #one-dom-container .one-navigation-div, #one-dom-container .one-navigation-div-col, #one-dom-container .one-navigation-div-col-row, #one-dom-container .one-navigation-div-col-row-col { gap: 0.2em; } #one-dom-container .one-navigation-item { cursor: pointer; gap: 0.2em; position: relative; } #one-dom-container .one-navigation-item picture { display: block; position: relative; overflow: hidden; background: linear-gradient(154deg, #C2C8CC -61.41%, #F5F5F5 58.19%); flex-grow: 1; } #one-dom-container .one-navigation-item.index0 { flex-grow: 1; } #one-dom-container .one-navigation-item.index0 picture { width: 11.8em; height: 14.9em; } #one-dom-container .one-navigation-item.index1 picture { width: 11.8em; height: 6.3em; } #one-dom-container .one-navigation-item.index2 { flex-grow: 1; } #one-dom-container .one-navigation-item.index2 picture { width: 23.95em; height: 6.3em; } #one-dom-container .one-navigation-item.index3 { flex-grow: 1; } #one-dom-container .one-navigation-item.index3 picture { width: 11.8em; height: 6.3em; } #one-dom-container .one-navigation-item.index4 picture { width: 11.8em; height: 6.3em; } #one-dom-container .one-navigation-item.index5 picture { width: 11.8em; height: 14.9em; } #one-dom-container .one-navigation-item.index5 picture.icon { display: block; position: absolute; bottom: 2.3em; left: 0.4em; z-index: 2; width: 1.6em !important; height: 1.6em !important; border-radius: 7px; overflow: hidden; } #one-dom-container .one-navigation-item p { width: 100%; padding: var(--component-ksp-space-min, 0.4em) var(--component-ksp-space-max, 0.4em); border-radius: var(--component-ksp-corner-Radius-general, 0.2em); background: var(--semantic-surface-primary-gray---l9---02, #FAFAFA); } /* batteryLifeTitle */ #one-dom-container .one-batteryLifeTitle-txt { padding: 4em 0; } /* battery */ #one-dom-container .one-battery-col { width: 50%; height: 19.2em; position: relative; } #one-dom-container .one-battery-txt { width: 100%; height: 100%; padding-right: 1em; padding-bottom: 1.2em; justify-content: space-between; } #one-dom-container .one-battery-info-list { gap: var(--space-inset-l9---8, 0.2em); } #one-dom-container .one-battery-info { width: 8.35em; padding: var(--space-inset-l7---16, 0.6em); gap: var(--space-inset-l10---4, 0.2em); border-radius: var(--corner-radius-xs---4, 0.2em); background: var(--component-card-info-bg-primary-white, #FAFAFA); } /* charge */ #one-dom-container .one-charge-col { width: 50%; height: 20.4em; position: relative; } #one-dom-container .one-charge-txt { width: 100%; height: 100%; padding-left: var(--space-inset-l3---40, 1em); padding-top: 1.2em; padding-bottom: 2.4em; justify-content: space-between; } #one-dom-container .one-charge-info { padding: var(--space-inset-l7---16, 0.6em); border-radius: var(--corner-radius-xs---4, 0.2em); background: var(--component-card-info-bg-primary-white, #FAFAFA); } #one-dom-container .one-charge-txt-color { color: #2cff73; } /* durable */ #one-dom-container .one-durable-section { overflow: visible !important; height: calc(100vh - 92px); max-height: 60vw; min-height: 700px; } #one-dom-container .one-durable-content { position: relative; height: 200%; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } #one-dom-container .one-durable-txt-div { width: 50%; height: 50%; max-height: 30em; position: absolute; left: 0; top: 0; } #one-dom-container .one-durable-txt { width: 100%; height: 100%; padding: 2.4em 1.2em; justify-content: space-between; } #one-dom-container .one-durable-info { width: 16.1em; padding: var(--space-inset-l6---20, 0.8em); align-items: center; gap: var(--space-inset-l9---8, 0.2em); border-radius: var(--space-inset-L1---8, 0.4em); background: var(--component-card-info-bg-primary-white-opa-select, #FFF); } #one-dom-container .one-durable-durablelogo { width: 1.8em; height: 1.8em; } #one-dom-container .one-durable-img { width: 50%; margin-left: 50%; height: 50%; position: sticky; } /* protection */ #one-dom-container .one-protection-section { overflow: visible; height: calc(100vh - 92px); max-height: 60vw; min-height: 700px; } #one-dom-container .one-protection-content { height: 200%; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); position: relative; } #one-dom-container .one-protection-txt-div { width: 50%; height: 50%; max-height: 30em; position: absolute; right: 0; top: 0; } #one-dom-container .one-protection-txt { width: 100%; height: 100%; padding: 2.4em 1.2em; justify-content: space-between; } #one-dom-container .one-protection-info-list { gap: var(--space-inset-l9---8, 0.2em); flex-wrap: wrap; } #one-dom-container .one-protection-info { width: calc(50% - (var(--space-inset-l9---8, 0.2em) / 2)); padding: var(--space-inset-l7---16, 0.6em); gap: var(--space-inset-l10---4, 0.2em); border-radius: var(--corner-radius-xs---4, 0.2em); background: var(--component-card-info-bg-primary-white-opa-select, #FFF); } #one-dom-container .one-protection-img { width: 50%; margin-right: 50%; height: 50%; position: sticky; } /* bluetooth */ #one-dom-container .one-bluetooth-col { width: 50%; position: relative; height: 18em; } #one-dom-container .one-bluetooth-txt { width: 100%; right: 0; padding-right: var(--space-inset-l2---48, 1.2em); } /* soundTitle */ #one-dom-container .one-soundTitle-section.bk { background: var(--semantic-surface-primary-gray---l8---04, #1A1A1A); } #one-dom-container .one-soundTitle-txt { padding: 4em 0; } /* driver */ #one-dom-container .one-driver-section.bk { background: radial-gradient(85.23% 85.23% at 50% 119.3%, #4D4D4D 0%, #1A1A1A 100%); } #one-dom-container .one-driver-img { width: 100%; height: 17.6em; position: relative; } #one-dom-container .one-driver-img img { position: absolute; } #one-dom-container .one-driver-img-1 { height: 10.6em; left: 11.1em; top: 3.35em; } #one-dom-container .one-driver-img-2 { height: 4.2em; left: 14.6em; top: 3.6em; } #one-dom-container .one-driver-img-3 { height: 2.35em; left: 15.6em; top: 4.45em; } #one-dom-container .one-driver-img-4 { height: 4em; left: 16.1em; top: 3.5em; } #one-dom-container .one-driver-img-5 { height: 5.25em; left: 16.35em; top: 2.8em; } #one-dom-container .one-driver-img-6 { width: 4.7em; height: 8em; top: 1.1em; left: 18.35em; opacity: 0; } #one-dom-container .one-driver-img-info1 { opacity: 0; position: absolute; top: 7.7em; left: 13.2em; width: 6em; align-items: center; gap: var(--space-inset-l9---8, 0.2em); } #one-dom-container .one-driver-img-line1 { width: 0.5px; height: 1.4em; background: var(--semantic-surface-primary-gray---l1---100, #FFF); } #one-dom-container .one-driver-img-info2 { opacity: 0; position: absolute; top: 8.25em; left: 17.55em; width: 6.9em; align-items: center; gap: var(--space-inset-l9---8, 0.2em); } #one-dom-container .one-driver-img-line2 { width: 0.5px; height: 3.6em; background: var(--semantic-surface-primary-gray---l1---100, #FFF); } /* custom */ #one-dom-container .one-custom-col { width: 50%; position: relative; background: radial-gradient(115.6% 115.6% at 50% 141.5%, var(--semantic-surface-primary-gray---l4---25, #4D4D4D) 0%, var(--semantic-surface-primary-gray---l8---04, #1A1A1A) 100%); } #one-dom-container .one-custom-txt { width: 100%; height: 100%; padding: 2.4em 1.2em; justify-content: space-between; } #one-dom-container .one-custom-info-list { gap: var(--space-inset-l9---8, 8px); } /* controlTitle */ #one-dom-container .one-controlTitle-txt { padding: 4em 0; } /* fingertips */ #one-dom-container .one-fingertips-maincontent { margin: 1.2em 0; width: 100%; height: 20em; position: relative; } #one-dom-container .one-fingertips-info-list { bottom: 0.6em; width: 100%; justify-content: center; gap: 0.2em; } #one-dom-container .one-fingertips-info { width: 8.55em; padding: var(--space-inset-l7---16, 0.6em); gap: var(--space-inset-l10---4, 0.2em); border-radius: var(--corner-radius-xs---4, 0.2em); background: var(--semantic-surface-primary-opacity---white-l2---75a, rgba(255, 255, 255, 0.75)); backdrop-filter: blur(25px); } /* game */ #one-dom-container .one-game-content { height: 21em; border-radius: var(--corner-radius-m---12, 12px); overflow: hidden; background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); } #one-dom-container .one-game-col { width: 50%; height: 100%; } #one-dom-container .one-game-txt { height: 100%; padding: 1.2em; justify-content: space-between; } #one-dom-container.new .one-game-swiper { height: 100%; } #one-dom-container.new .one-game-swiper-button-div { align-items: center; bottom: 0; z-index: 2; } #one-dom-container.new .one-game-swiper-numdiv { margin: 0 12px; } #one-dom-container.new .one-game-swiper-numdiv .grey2 { opacity: 0.3; } #one-dom-container.new .one-game-swiper-button { opacity: 0.8; cursor: pointer; width: 32px; height: 32px; border-radius: 100%; } #one-dom-container.new .one-game-swiper-button svg { width: 100%; height: 100%; } #one-dom-container.new .one-game-swiper-button-prev { transform: rotate(180deg); } #one-dom-container.new .one-game-swiper-button:hover { opacity: 1; } #one-dom-container.new .one-game-swiper-button.swiper-button-disabled { opacity: 0.3; cursor: auto; } /* os */ #one-dom-container .one-os-content { gap: 0.2em; flex-wrap: wrap; } #one-dom-container .one-os-item { width: calc(50% - 0.1em); justify-content: space-between; overflow: hidden; border-radius: var(--corner-radius-xs---4, 0.2em); background: linear-gradient(167deg, #F5F5F5 51.85%, #C2C8CC 140.16%); } #one-dom-container .one-os-item .one-title { padding: 1.2em 1.2em 0 1.2em; width: 100%; } #one-dom-container .one-os-item.one-os-ai-item img { width: 12.1em; height: 7.05em; margin-left: 2.9em; margin-bottom: 1.2em; margin-top: 1em; } #one-dom-container .one-os-item.one-os-dualDevice-item img { width: 14.52625em; height: 8.4em; margin-left: 0.95em; margin-bottom: 1.35em; margin-top: 1em; } #one-dom-container .one-os-item.one-os-pair-item img { width: 13.266em; height: 13.21065em; margin-left: 1.2em; margin-bottom: 0.99em; margin-top: 1em; } #one-dom-container .one-os-item.one-os-personalized-item img { width: 11.95em; height: 13.15em; margin-left: 1.2em; margin-bottom: 0; margin-top: 1em; } /* designTitle */ #one-dom-container .one-designTitle-txt { padding: 4em 0; } /* design */ #one-dom-container .one-design-swiper { width: 100%; height: 18em; } #one-dom-container .one-design-swiper-item { width: 100%; height: 100%; border-radius: 0.4em; background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); overflow: hidden; } #one-dom-container .one-design-swiper-col { width: 50%; height: 100%; } #one-dom-container .one-design-swiper .one-title { padding: 1.2em; } #one-dom-container .one-design-btn-div { position: absolute; left: 1.2em; bottom: 1.2em; gap: 0.8em; z-index: 3; } #one-dom-container .one-design-btn { cursor: pointer; align-items: center; gap: 0.2em; } #one-dom-container .one-design-btn svg { width: 28px; height: 28px; } #one-dom-container .one-design-circle { fill: none; stroke-width: 2.5px; stroke-dasharray: 125.6px; stroke-dashoffset: 125.6px; } #one-dom-container .one-design-btn.index0 .one-design-circle { stroke: white; } #one-dom-container .one-design-btn.index1 .one-design-circle { stroke: #333333; } #one-dom-container.new .one-design-btn.index2 .one-design-circle { stroke: #A1B6F7; } #one-dom-container .one-design-btn.active .one-design-circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-out; } /* unpacking */ #one-dom-container .one-unpacking-section.wt { background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } #one-dom-container .one-unpacking-img { width: 30.4em; background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } } /* one-wap.css */ @media screen and (max-width: 649px) { /* kv */ #one-dom-container .one-kv-img { width: 100%; height: 24em; } #one-dom-container .one-kv-txt { width: 100%; top: 3.8em; gap: 0.4em; } /* navigation */ #one-dom-container .one-navigation-div { gap: var(--space-inset-l9---8, 0.2em); flex-wrap: wrap; } #one-dom-container .one-navigation-item { width: calc(50% - 0.1em); } #one-dom-container .one-navigation-item picture { display: block; position: relative; overflow: hidden; width: 100%; height: 6.9em; background: linear-gradient(157deg, #C2C8CC -74.85%, #F5F5F5 54.58%); margin-bottom: var(--space-inset-l9---8, 0.2em); } #one-dom-container .one-navigation-item p { width: 100%; flex-grow: 1; padding: var(--component-ksp-space-min, 0.4em) var(--component-ksp-space-max, 0.4em); border-radius: var(--component-ksp-corner-Radius-general, 0.2em); background: var(--semantic-surface-primary-gray---l9---02, #FAFAFA); } /* batteryLifeTitle */ #one-dom-container .one-batteryLifeTitle-txt { padding: 4em 0; } /* battery */ #one-dom-container .one-battery-txt { gap: var(--space-inset-l2---48, 1.2em); } #one-dom-container .one-battery-img { width: 100%; height: 16.4em; } #one-dom-container .one-battery-info-list { justify-content: space-between; } #one-dom-container .one-battery-info { width: 8.1em; padding: var(--space-inset-l7---16, 0.6em); gap: var(--space-inset-l10---4, 0.2em); border-radius: var(--corner-radius-xs---4, 0.2em); overflow: hidden; background: var(--component-card-info-bg-primary-white, #FAFAFA); } /* charge */ #one-dom-container .one-charge-txt { gap: var(--space-inset-l2---48, 1.2em); } #one-dom-container .one-charge-img { width: 100%; height: 16.4em; } #one-dom-container .one-charge-info { width: 100%; padding: var(--space-inset-l7---16, 0.6em); border-radius: var(--corner-radius-xs---4, 0.4em); overflow: hidden; background: var(--component-card-info-bg-primary-white, #FAFAFA); } #one-dom-container .one-charge-txt-color { color: #2cff73; } /* durable */ #one-dom-container .one-durable-section.wt { background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } #one-dom-container .one-durable-txt { gap: var(--space-inset-l2---48, 1.2em); } #one-dom-container .one-durable-img { width: 100%; height: 16em; } #one-dom-container .one-durable-info { padding: var(--space-inset-l6---20, 0.8em); align-items: center; gap: var(--space-inset-l9---8, 0.2em); overflow: hidden; border-radius: var(--corner-radius-xs---4, 0.2em); background: var(--component-card-info-bg-primary-white-opa-select, #FFF); } #one-dom-container .one-durable-durablelogo { width: 1.8em; height: 1.8em; } /* protection */ #one-dom-container .one-protection-section.wt { background: var(--semantic-surface-primary-gray---l8---04, #F6F6F6); } #one-dom-container .one-protection-txt { gap: var(--space-inset-l2---48, 1.2em); } #one-dom-container .one-protection-img { width: 100%; height: 16em; } #one-dom-container .one-protection-info-list { gap: var(--space-inset-l9---8, 0.2em); flex-wrap: wrap; } #one-dom-container .one-protection-info { width: calc(50% - 0.1em); padding: var(--space-inset-l7---16, 0.6em); gap: var(--space-inset-l10---4, 0.2em); overflow: hidden; border-radius: var(--corner-radius-xs---4, 0.2em); background: var(--component-card-info-bg-primary-white-opa-select, #FFF); } /* bluetooth */ #one-dom-container .one-bluetooth-img { width: 100%; height: 14.3em; margin-top: 0.95em; } /* soundTitle */ #one-dom-container .one-soundTitle-section.bk { padding: 4em 0; background: var(--semantic-surface-primary-gray---l8---04, #1A1A1A); } /* driver */ #one-dom-container .one-driver-section.bk { background: radial-gradient(85.23% 85.23% at 50% 119.3%, #4D4D4D 0%, #1A1A1A 100%); } #one-dom-container .one-driver-img { margin-top: var(--space-inset-l2---48, 1.2em); width: 100%; height: 11em; position: relative; } #one-dom-container .one-driver-img img { position: absolute; } #one-dom-container .one-driver-img-1 { height: 6.4em; left: 4.8em; top: 2.45em; } #one-dom-container .one-driver-img-2 { height: 2.5em; left: 6.95em; top: 2.55em; } #one-dom-container .one-driver-img-3 { height: 1.4em; left: 7.55em; top: 3.1em; } #one-dom-container .one-driver-img-4 { height: 2.4em; left: 7.8em; top: 2.5em; } #one-dom-container .one-driver-img-5 { height: 3.2em; left: 7.95em; top: 2.1em; } #one-dom-container .one-driver-img-6 { width: 2.85em; height: 4.85em; top: 0.1em; left: 8.75em; opacity: 0; } #one-dom-container .one-driver-img-info1 { opacity: 0; position: absolute; top: 15em; left: 4.5em; width: 6em; align-items: center; gap: var(--space-inset-l9---8, 0.2em); } #one-dom-container .one-driver-img-line1 { width: 0.5px; height: 1.2em; background: var(--semantic-surface-primary-gray---l1---100, #FFF); } #one-dom-container .one-driver-img-info2 { opacity: 0; position: absolute; top: 15em; left: 7.05em; width: 6.9em; align-items: center; gap: var(--space-inset-l9---8, 0.2em); } #one-dom-container .one-driver-img-line2 { width: 0.5px; height: 4em; background: var(--semantic-surface-primary-gray---l1---100, #FFF); } /* custom */ #one-dom-container .one-custom-section.bk { background: var(--semantic-surface-primary-gray---l8---04, #1A1A1A); } #one-dom-container .one-custom-img { margin-top: var(--space-inset-l2---48, 1.2em); width: 100%; height: 16em; } /* controlTitle */ #one-dom-container .one-controlTitle-txt { padding: 4em 0; } /* fingertips */ #one-dom-container .one-fingertips-content { gap: var(--space-inset-l2---48, 1.2em); } #one-dom-container .one-fingertips-info-list { width: 100%; justify-content: center; gap: var(--space-inset-l10---4, 0.2em); flex-wrap: wrap; } #one-dom-container .one-fingertips-info { width: calc(50% - 0.1em); padding: var(--space-inset-l7---16, 0.6em); gap: var(--space-inset-l10---4, 0.2em); overflow: hidden; border-radius: var(--corner-radius-xs---4, 0.2rem); background: var(--semantic-surface-primary-fixed---l8---04, #F6F6F6); } /* game */ #one-dom-container .one-game-section.wt { background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); } #one-dom-container .one-game-img { margin-top: var(--space-inset-l2---48, 1.2em); width: 100%; height: 16em; } #one-dom-container.new .one-game-swiper { margin: 1.2em 0; width: 100%; height: 16em; } #one-dom-container.new .one-game-swiper-button-div { align-items: center; bottom: 0; z-index: 2; } #one-dom-container.new .one-game-swiper-numdiv { margin: 0 12px; } #one-dom-container.new .one-game-swiper-numdiv .grey2 { opacity: 0.3; } #one-dom-container.new .one-game-swiper-button { opacity: 0.8; cursor: pointer; width: 32px; height: 32px; border-radius: 100%; } #one-dom-container.new .one-game-swiper-button svg { width: 100%; height: 100%; } #one-dom-container.new .one-game-swiper-button-prev { transform: rotate(180deg); } #one-dom-container.new .one-game-swiper-button:hover { opacity: 1; } #one-dom-container.new .one-game-swiper-button.swiper-button-disabled { opacity: 0.3; cursor: auto; } /* os */ #one-dom-container .one-os-content { gap: var(--space-inset-l9---8, 0.2em); } #one-dom-container .one-os-item { width: 100%; position: relative; overflow: hidden; border-radius: var(--corner-radius-S---8, 0.4em); background: linear-gradient(172deg, #F5F5F5 63.42%, #C2C8CC 171.38%); } #one-dom-container .one-os-item .one-title { top: 0; padding: 1.2em 0.8em; width: 100%; } #one-dom-container .one-os-item.one-os-ai-item img { width: 12.3em; height: 7.15em; margin-left: 2.05em; margin-bottom: 1.2em; } #one-dom-container .one-os-item.one-os-dualDevice-item img { width: 14.37125em; height: 8.1em; margin-left: 0.55em; margin-bottom: 0.9em; } #one-dom-container .one-os-item.one-os-pair-item img { width: 13.3818em; height: 12.95em; margin-left: 0.8em; margin-bottom: 0.8em; } #one-dom-container .one-os-item.one-os-personalized-item img { width: 11em; height: 13.5em; margin-left: 0.8em; } /* designTitle */ #one-dom-container .one-designTitle-txt { padding: 4em 0; } /* design */ #one-dom-container .one-design-section.wt { background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); } #one-dom-container .one-design-swiper { width: 100%; } #one-dom-container .one-design-swiper-item { width: 100%; height: 100%; background: var(--semantic-surface-primary-gray---l7---08, #EBEBEB); overflow: hidden; } #one-dom-container .one-design-img { margin-top: var(--space-inset-l2---48, 1.2em); width: 100%; height: 16em; } #one-dom-container .one-design-btn-div { margin-top: var(--space-inset-l2---48, 1.2em); gap: var(--space-inset-l6---20, 0.8em); justify-content: space-between; } #one-dom-container .one-design-btn { cursor: pointer; align-items: center; gap: var(--space-inset-l9---8, 8px); } #one-dom-container .one-design-btn svg { width: 28px; height: 28px; } #one-dom-container .one-design-circle { fill: none; stroke-width: 2.5px; stroke-dasharray: 125.6px; stroke-dashoffset: 125.6px; } #one-dom-container .one-design-btn.index0 .one-design-circle { stroke: white; } #one-dom-container .one-design-btn.index1 .one-design-circle { stroke: #333333; } #one-dom-container.new .one-design-btn.index2 .one-design-circle { stroke: #A1B6F7; } #one-dom-container .one-design-btn.active .one-design-circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-out; } /* unpacking */ #one-dom-container .one-unpacking-img { width: 100%; } /* notes */ #one-dom-container .one-notes-content { padding: var(--space-stack-l5---64, 64px) 0; } }