/* one-variables.css */ #one-dom-container { --font-r: OPPOSans-Ver2-Regular, OPPOSans-Regular, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Helvetica, Arial, sans-serif; --font-m: OPPOSans-Ver2-Medium, OPPOSans-Medium, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Helvetica, Arial, sans-serif; --font-b: OPPOSans-Ver2-Bold, OPPOSans-Bold, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Helvetica, Arial, sans-serif; } /* ≥1024(PC) */ @media screen and (min-width: 1024px) { #one-dom-container { /* typography tokens */ /* number */ --component-chapter-page-spacing-2: 3.2em; --component-chapter-page-spacing-1: 9.2em; --component-chapter-page-width: 72em; --component-toggle-control-01-spacing: 1em; --component-toggle-control-01-size: 2.4em; --component-toggle-control-02-outline: 0.075em; --component-toggle-control-02-spacing: 0.8em; --component-toggle-control-02-size: 1.4em; --component-toggle-control-05-size: 1.6em; --component-toggle-control-06-spacing: 0.4em; --component-toggle-control-06-spacing-2: 1em; --component-toggle-control-07-spacing: 0.4em; --component-toggle-control-07-spacing-2: 1em; --component-toggle-control-08-spacing: 0.2em; --component-toggle-control-08-spacing-2: 0.4em; --component-toggle-control-08-spacing-3: 0.6em; --semantic-corner-radius-level-3: 0.4em; --semantic-corner-radius-level-2: 0.6em; --semantic-corner-radius-level-1: 0.8em; --semantic-font-line-height-footnote-1: 166.667%; --semantic-font-line-height-body-3: 157.143%; --semantic-font-line-height-body-2: 150%; --semantic-font-line-height-body-1: 144.444%; --semantic-font-line-height-sub-head-3: 140%; --semantic-font-line-height-sub-head-2: 133.333%; --semantic-font-line-height-sub-head-1: 125%; --semantic-font-line-height-head-4: 128.571%; --semantic-font-line-height-head-3: 122.222%; --semantic-font-line-height-head-2: 119.048%; --semantic-font-line-height-head-1: 125%; --semantic-font-line-height-head-0: 111.765%; --semantic-font-size-footnote-1: 12px; --semantic-font-size-body-3: 14px; --semantic-font-size-body-2: 16px; --semantic-font-size-body-1: 18px; --semantic-font-size-sub-head-3: 20px; --semantic-font-size-sub-head-2: 24px; --semantic-font-size-sub-head-1: 32px; --semantic-font-size-head-2: 36px; --semantic-font-size-head-1: 48px; --semantic-font-size-head-0: 68px; --semantic-space-inset-level-7: 0.2em; --semantic-space-inset-level-6: 0.4em; --semantic-space-inset-level-5: 0.6em; --semantic-space-inset-level-4: 0.8em; --semantic-space-inset-level-3: 1em; --semantic-space-inset-level-2: 1.2em; --semantic-space-inset-level-1: 2.4em; --semantic-space-stack-level-2: 3.2em; --semantic-space-stack-level-1: 4em; /* string */ --component-button-arrow-on-card-port: pc; --component-ksp-layout: PC; } } /* 650(PAD) ≤ W < 1024 */ @media screen and (max-width: 1023px) and (min-width: 650px) { #one-dom-container { /* typography tokens */ /* number */ --component-chapter-page-spacing-2: 1.2em; --component-chapter-page-spacing-1: 7em; --component-chapter-page-width: 38.4em; --component-toggle-control-01-spacing: 1em; --component-toggle-control-01-size: 2em; --component-toggle-control-02-outline: 0.075em; --component-toggle-control-02-spacing: 0.8em; --component-toggle-control-02-size: 1.4em; --component-toggle-control-05-size: 1.6em; --component-toggle-control-06-spacing: 0.2em; --component-toggle-control-06-spacing-2: 0.8em; --component-toggle-control-07-spacing: 0.2em; --component-toggle-control-07-spacing-2: 0.8em; --component-toggle-control-08-spacing: 0.2em; --component-toggle-control-08-spacing-2: 0.2em; --component-toggle-control-08-spacing-3: 0.4em; --semantic-corner-radius-level-3: 0.2em; --semantic-corner-radius-level-2: 0.4em; --semantic-corner-radius-level-1: 0.6em; --semantic-font-line-height-footnote-1: 166.667%; --semantic-font-line-height-body-3: 166.667%; --semantic-font-line-height-body-2: 157.143%; --semantic-font-line-height-body-1: 150%; --semantic-font-line-height-sub-head-3: 150%; --semantic-font-line-height-sub-head-2: 140%; --semantic-font-line-height-sub-head-1: 133.333%; --semantic-font-line-height-head-4: 157.143%; --semantic-font-line-height-head-3: 128.571%; --semantic-font-line-height-head-2: 122.222%; --semantic-font-line-height-head-1: 126.667%; --semantic-font-line-height-head-0: 116.667%; --semantic-font-size-footnote-1: 12px; --semantic-font-size-body-3: 12px; --semantic-font-size-body-2: 14px; --semantic-font-size-body-1: 16px; --semantic-font-size-sub-head-3: 16px; --semantic-font-size-sub-head-2: 20px; --semantic-font-size-sub-head-1: 24px; --semantic-font-size-head-4: 14px; --semantic-font-size-head-3: 28px; --semantic-font-size-head-2: 36px; --semantic-font-size-head-1: 30px; --semantic-font-size-head-0: 48px; --semantic-space-inset-level-6: 0.2em; --semantic-space-inset-level-7: 0.2em; --semantic-space-inset-level-5: 0.4em; --semantic-space-inset-level-4: 0.6em; --semantic-space-inset-level-3: 0.8em; --semantic-space-inset-level-2: 0.9em; --semantic-space-inset-level-1: 1.2em; --semantic-space-stack-level-2: 1.2em; --semantic-space-stack-level-1: 2.4em; /* string */ --component-button-arrow-on-card-port: pad; --component-ksp-layout: Pad; } } /* 360(PHONE) ≤ W ≤ 650 */ @media screen and (max-width: 649px) { #one-dom-container { /* typography tokens */ /* number */ --component-chapter-page-spacing-2: 0.8em; --component-chapter-page-spacing-1: 4em; --component-chapter-page-width: 18em; --component-toggle-control-01-spacing: 0.8em; --component-toggle-control-01-size: 1.6em; --component-toggle-control-02-outline: 0.05em; --component-toggle-control-02-spacing: 0.6em; --component-toggle-control-02-size: 1em; --component-toggle-control-05-size: 1.2em; --component-toggle-control-06-spacing: 0.2em; --component-toggle-control-06-spacing-2: 0.8em; --component-toggle-control-07-spacing: 0.2em; --component-toggle-control-07-spacing-2: 0.8em; --component-toggle-control-08-spacing: 0.2em; --component-toggle-control-08-spacing-2: 0.2em; --component-toggle-control-08-spacing-3: 0.4em; --semantic-corner-radius-level-3: 0.2em; --semantic-corner-radius-level-2: 0.4em; --semantic-corner-radius-level-1: 0.6em; --semantic-font-line-height-footnote-1: 166.667%; --semantic-font-line-height-body-3: 166.667%; --semantic-font-line-height-body-2: 157.143%; --semantic-font-line-height-body-1: 150%; --semantic-font-line-height-sub-head-3: 150%; --semantic-font-line-height-sub-head-2: 140%; --semantic-font-line-height-sub-head-1: 133.333%; --semantic-font-line-height-head-4: 166.667%; --semantic-font-line-height-head-3: 128.571%; --semantic-font-line-height-head-2: 122.222%; --semantic-font-line-height-head-1: 126.667%; --semantic-font-line-height-head-0: 122.222%; --semantic-font-size-footnote-1: 12px; --semantic-font-size-body-3: 12px; --semantic-font-size-body-2: 14px; --semantic-font-size-body-1: 16px; --semantic-font-size-sub-head-3: 16px; --semantic-font-size-sub-head-2: 20px; --semantic-font-size-sub-head-1: 24px; --semantic-font-size-head-2: 28px; --semantic-font-size-head-1: 30px; --semantic-font-size-head-0: 48px; --semantic-space-inset-level-6: 0.2em; --semantic-space-inset-level-7: 0.2em; --semantic-space-inset-level-5: 0.4em; --semantic-space-inset-level-4: 0.6em; --semantic-space-inset-level-3: 0.8em; --semantic-space-inset-level-2: 0.9em; --semantic-space-inset-level-1: 1.2em; --semantic-space-stack-level-2: 0.8em; --semantic-space-stack-level-1: 2.4em; /* string */ --component-button-arrow-on-card-port: wap; --component-ksp-layout: Phone; } } /* Color Tokens */ /* light */ /* color */ #one-dom-container .wt { --component-button-bg-primary-black-default: var(--semantic-surface-primary-gray---l1---100); --component-button-bg-primary-black-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-black-overlay-hover: var(--primitives-neutral-white-25a); --component-button-bg-primary-brand-default: var(--semantic-surface-brand-fixed---green); --component-button-bg-primary-brand-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-brand-overlay-hover: var(--primitives-neutral-black-20a); --component-button-bg-primary-gray-default: var(--semantic-surface-primary-fixed---l7---08); --component-button-bg-primary-gray-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-gray-overlay-hover: var(--primitives-neutral-black-08a); --component-button-bg-primary-opa-high-default: var(--semantic-surface-primary-opacity---black-l5---25a); --component-button-bg-primary-opa-high-disable: var(--semantic-surface-primary-opacity---black-l8---08a); --component-button-bg-primary-opa-high-overlay-hover: var(--primitives-neutral-black-00a); --component-button-bg-primary-opa-low-default: var(--semantic-surface-primary-opacity---black-l8---08a); --component-button-bg-primary-opa-low-disable: var(--semantic-surface-primary-opacity---black-l10---02a); --component-button-bg-primary-opa-low-overlay-hover: var(--primitives-neutral-black-00a); --component-button-bg-secondary-black-default: var(--primitives-neutral-black-00a); --component-button-bg-secondary-black-disable: var(--primitives-neutral-black-00a); --component-button-bg-secondary-black-overlay-hover: var(--primitives-neutral-black-08a); --component-button-bg-secondary-gray-default: var(--primitives-neutral-black-00a); --component-button-bg-secondary-gray-disable: var(--primitives-neutral-black-00a); --component-button-bg-secondary-gray-overlay-hover: var(--primitives-neutral-black-08a); --component-button-border-secondary-black-default: var(--semantic-border-primary-black-l1---100); --component-button-border-secondary-black-disable: var(--semantic-border-primary-black-l3---20a); --component-button-border-secondary-black-hover: var(--semantic-border-primary-black-l1---100); --component-button-border-secondary-gray-default: var(--semantic-border-primary-black-l4---15a); --component-button-border-secondary-gray-disable: var(--semantic-border-primary-black-l3---20a); --component-button-border-secondary-gray-hover: var(--semantic-border-primary-black-l4---15a); --component-button-icon-primary-black-default: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-icon-primary-black-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-black-hover: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-icon-primary-brand-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-brand-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-brand-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-gray-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-gray-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-gray-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-opa-high-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-high-disable: var(--semantic-text-primary-opacity---black-l6---20a); --component-button-icon-primary-opa-high-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-low-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-low-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-icon-primary-opa-low-overlay-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-black-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-black-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-icon-secondary-black-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-gray-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-gray-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-icon-secondary-gray-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-black-default: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-text-primary-black-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-black-hover: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-text-primary-brand-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-brand-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-brand-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-gray-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-gray-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-gray-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-opa-high-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-high-disable: var(--semantic-text-primary-opacity---black-l6---20a); --component-button-text-primary-opa-high-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-low-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-low-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-text-primary-opa-low-overlay-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-black-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-black-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-text-secondary-black-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-gray-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-gray-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-text-secondary-gray-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-bg-primary-black-opa: var(--semantic-surface-primary-opacity---black-l9---04a); --component-card-info-bg-primary-black-opa-select: var(--semantic-surface-primary-opacity---black-l7---12a); --component-card-info-bg-primary-white: var(--semantic-surface-primary-gray---l9---02); --component-card-info-bg-primary-white-opa: var(--semantic-surface-primary-opacity---white-l4---45a); --component-card-info-bg-primary-white-opa-select: var(--semantic-surface-primary-gray---l10---00); --component-card-info-icon-primary-black-opa: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white-opa: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white-opa-white-bg: var(--semantic-icon-primary-on-surface---white-l1---00); --component-card-info-text-primary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-black-opa-select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-black-opa-select-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-card-info-text-primary-white-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-white-l2: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-info-text-primary-white-opa: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-info-text-primary-white-opa--select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-white-opa-select-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-card-info-text-primary-white-link: var(--semantic-text-state-link&tip); --component-card-info-text-secondary: var(--semantic-text-primary-opacity---black-l5---30a); --component-card-info-text-secondary-select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-secondary-select-l2: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-mark-bg-primary-black-opa: var(--semantic-surface-primary-opacity---black-l3---55a); --component-card-mark-bg-primary-gray-opa: var(--semantic-surface-primary-opacity---black-l8---08a); --component-card-mark-bg-primary-white: var(--semantic-surface-primary-gray---l10---00); --component-card-mark-border-secondary-black-opa: var(--semantic-border-primary-black-l2---50a); --component-card-mark-border-secondary-gray-opa: var(--primitives-neutral-black-10a); --component-card-mark-border-secondary-white: var(--semantic-border-primary-black-l1---100); --component-card-mark-divider-primary-gray-opa: var(--primitives-neutral-black-08a); --component-card-mark-icon-primary-black-opa: var(--semantic-text-primary-on-surface---white-l1---00); --component-card-mark-icon-primary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-primary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-primary-black-opa: var(--semantic-text-primary-on-surface---white-l1---00); --component-card-mark-text-primary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-primary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-tab-bar-bg-primary: var(--semantic-surface-primary-opacity---black-l9---04a); --component-card-tab-bar-bg-primary-select: var(--semantic-surface-primary-fixed---l10---00); --component-card-tab-bar-divider-primary: var(--primitives-neutral-black-04a); --component-card-tab-bar-text-primary: var(--semantic-surface-primary-gray---l1---100); --component-card-tab-bar-text-primary-select: var(--semantic-surface-primary-fixed---l1---100); --component-card-tab-bar-text-secondary: var(--semantic-surface-primary-opacity---black-l4---35a); --component-card-tab-bar-text-secondary-select: var(--semantic-surface-primary-gray---l1---100); --component-text-body-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-body-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-body-l3: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-data-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-headine-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-remark-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-remark-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-remark-l2-2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-remark-l3: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-remark-l3-2: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-subtitle-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-subtitle-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-subtitle-l3: var(--semantic-text-primary-opacity---black-l4---55a); --primitives-brand-blue: #2660f5; --primitives-brand-brand-brown: #a07e6d; --primitives-brand-brand-gray02: #fafafa; --primitives-brand-brand-gray04: #f5f4f0; --primitives-brand-brand-gray08: #ebe8e3; --primitives-brand-brand-gray13: #ddd9d4; --primitives-brand-brand-gray23: #c3bfb9; --primitives-brand-brand-gray38: #9e9a94; --primitives-brand-brand-gray56: #706c66; --primitives-brand-brand-gray72: #484540; --primitives-brand-brand-gray87: #201f1c; --primitives-brand-brand-green: #2cff73; --primitives-brand-brand-light-green: #d7ffdb; --primitives-brand-brand-purple: #b995ff; --primitives-brand-brand-theme-green: #26c05d; --primitives-brand-light-blue: #e8f3ff; --primitives-brand-light-red: #fdefed; --primitives-brand-red: #e23220; --primitives-neutral-black-00a: #00000000; --primitives-neutral-black-02a: #00000005; --primitives-neutral-black-04a: #0000000a; --primitives-neutral-black-08a: #00000014; --primitives-neutral-black-10a: #0000001a; --primitives-neutral-black-12a: #0000001f; --primitives-neutral-black-15a: #00000026; --primitives-neutral-black-20a: #00000033; --primitives-neutral-black-25a: #00000040; --primitives-neutral-black-30a: #0000004d; --primitives-neutral-black-35a: #00000059; --primitives-neutral-black-50a: #00000080; --primitives-neutral-black-55a: #0000008c; --primitives-neutral-black-60a: #00000099; --primitives-neutral-black-70a: #000000b2; --primitives-neutral-black-75a: #000000bf; --primitives-neutral-black-80a: #000000cc; --primitives-neutral-black-84a: #000000d6; --primitives-neutral-black-90a: #000000e5; --primitives-neutral-black-95a: #000000f2; --primitives-neutral-gray-00: #ffffff; --primitives-neutral-gray-02: #fafafa; --primitives-neutral-gray-04: #f6f6f6; --primitives-neutral-gray-08: #ebebeb; --primitives-neutral-gray-10: #e6e6e6; --primitives-neutral-gray-100: #000000; --primitives-neutral-gray-12: #e0e0e0; --primitives-neutral-gray-15: #d9d9d9; --primitives-neutral-gray-20: #cccccc; --primitives-neutral-gray-25: #bfbfbf; --primitives-neutral-gray-30: #b3b3b3; --primitives-neutral-gray-35: #a6a6a6; --primitives-neutral-gray-50: #808080; --primitives-neutral-gray-55: #737373; --primitives-neutral-gray-60: #666666; --primitives-neutral-gray-70: #4d4d4d; --primitives-neutral-gray-75: #404040; --primitives-neutral-gray-80: #333333; --primitives-neutral-gray-84: #282828; --primitives-neutral-gray-90: #1a1a1a; --primitives-neutral-gray-95: #0d0d0d; --primitives-neutral-white-00a: #ffffff00; --primitives-neutral-white-05a: #ffffff0d; --primitives-neutral-white-10a: #ffffff1a; --primitives-neutral-white-16a: #ffffff29; --primitives-neutral-white-20a: #ffffff33; --primitives-neutral-white-25a: #ffffff40; --primitives-neutral-white-30a: #ffffff4d; --primitives-neutral-white-40a: #ffffff66; --primitives-neutral-white-45a: #ffffff73; --primitives-neutral-white-50a: #ffffff80; --primitives-neutral-white-65a: #ffffffa6; --primitives-neutral-white-70a: #ffffffb2; --primitives-neutral-white-75a: #ffffffbf; --primitives-neutral-white-80a: #ffffffcc; --primitives-neutral-white-85a: #ffffffd9; --primitives-neutral-white-88a: #ffffffe0; --primitives-neutral-white-90a: #ffffffe5; --primitives-neutral-white-92a: #ffffffeb; --primitives-neutral-white-96a: #fffffff5; --primitives-neutral-white-98a: #fffffffa; --semantic-background-primary-cold-gray--04: #f4f3f6; --semantic-background-primary-warm-gray---07: #eceae6; --semantic-background-primary-gray---l1---00: var(--primitives-neutral-gray-00); --semantic-background-primary-gray---l2--02: var(--primitives-neutral-gray-02); --semantic-background-primary-gray---l3---04: var(--primitives-neutral-gray-04); --semantic-background-primary-gray---l4---15: var(--primitives-neutral-gray-15); --semantic-border-primary-black-l1---100: var(--primitives-neutral-gray-100); --semantic-border-primary-black-l2---50a: var(--primitives-neutral-black-50a); --semantic-border-primary-black-l3---20a: var(--primitives-neutral-black-20a); --semantic-border-primary-black-l4---15a: var(--primitives-neutral-black-15a); --semantic-divider-primary-gray---l1---15: var(--primitives-neutral-gray-15); --semantic-divider-primary-gray---l2---04: var(--primitives-neutral-gray-04); --semantic-icon-miscellaneous-border-button---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-fixed---black-l1---100: var(--primitives-neutral-gray-100); --semantic-icon-primary-fixed---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-icon-primary-fixed---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-icon-primary-fixed---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-icon-primary-fixed---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-fixed---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-icon-primary-fixed---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-icon-primary-fixed---white-l1---00: var(--primitives-neutral-gray-00); --semantic-icon-primary-fixed---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-icon-primary-fixed---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-icon-primary-fixed---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-icon-primary-fixed---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-icon-primary-fixed---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-icon-primary-fixed---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-icon-primary-on-surface---white-l1---00: var(--primitives-neutral-gray-00); --semantic-icon-primary-on-surface---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-icon-primary-on-surface---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-icon-primary-on-surface---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-icon-primary-on-surface---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-icon-primary-on-surface---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-icon-primary-on-surface---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-icon-primary-opacity---black-l1---100: var(--primitives-neutral-gray-100); --semantic-icon-primary-opacity---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-icon-primary-opacity---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-icon-primary-opacity---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-icon-primary-opacity---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-opacity---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-icon-primary-opacity---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-icon-state-error: var(--primitives-brand-red); --semantic-icon-state-link-tip: var(--primitives-brand-blue); --semantic-overlay-black-fixed---l1---20a: var(--primitives-neutral-black-20a); --semantic-overlay-black-fixed---l2---12a: var(--primitives-neutral-black-12a); --semantic-overlay-black-fixed---l3---08a: var(--primitives-neutral-black-08a); --semantic-overlay-black-fixed---l4---04a: var(--primitives-neutral-black-04a); --semantic-overlay-white-fixed---l1---20a: var(--primitives-neutral-white-20a); --semantic-overlay-white-fixed---l2---12a: var(--primitives-neutral-white-16a); --semantic-overlay-white-fixed---l3---10a: var(--primitives-neutral-white-10a); --semantic-overlay-white-fixed---l4---05a: var(--primitives-neutral-white-05a); --semantic-surface-brand-fixed---brown: var(--primitives-brand-brand-brown); --semantic-surface-brand-fixed---gray-l1---87: var(--primitives-brand-brand-gray87); --semantic-surface-brand-fixed---gray-l2---72: var(--primitives-brand-brand-gray72); --semantic-surface-brand-fixed---gray-l3---56: var(--primitives-brand-brand-gray56); --semantic-surface-brand-fixed---gray-l4---38: var(--primitives-brand-brand-gray38); --semantic-surface-brand-fixed---gray-l5---23: var(--primitives-brand-brand-gray23); --semantic-surface-brand-fixed---gray-l6---13: var(--primitives-brand-brand-gray13); --semantic-surface-brand-fixed---gray-l7---08: var(--primitives-brand-brand-gray08); --semantic-surface-brand-fixed---gray-l8---04: var(--primitives-brand-brand-gray04); --semantic-surface-brand-fixed---gray-l9---02: var(--primitives-brand-brand-gray02); --semantic-surface-brand-fixed---green: var(--primitives-brand-brand-green); --semantic-surface-brand-fixed---light-green: var(--primitives-brand-brand-light-green); --semantic-surface-brand-fixed---purple: var(--primitives-brand-brand-purple); --semantic-surface-brand-fixed---theme-green: var(--primitives-brand-brand-theme-green); --semantic-surface-brand-gray---l1---13: var(--primitives-brand-brand-gray13); --semantic-surface-brand-gray---l2---13: var(--primitives-brand-brand-gray13); --semantic-surface-brand-gray---l3---04: var(--primitives-brand-brand-gray04); --semantic-surface-brand-gray---l4---02: var(--primitives-brand-brand-gray02); --semantic-surface-brand-gray---l5---02: var(--primitives-brand-brand-gray02); --semantic-surface-primary-fixed---l1---100: var(--primitives-neutral-gray-100); --semantic-surface-primary-fixed---l10---00: var(--primitives-neutral-gray-00); --semantic-surface-primary-fixed---l2---75: var(--primitives-neutral-gray-80); --semantic-surface-primary-fixed---l3---70: var(--primitives-neutral-gray-70); --semantic-surface-primary-fixed---l4---25: var(--primitives-neutral-gray-25); --semantic-surface-primary-fixed---l5---15: var(--primitives-neutral-gray-15); --semantic-surface-primary-fixed---l6---12: var(--primitives-neutral-gray-12); --semantic-surface-primary-fixed---l7---08: var(--primitives-neutral-gray-08); --semantic-surface-primary-fixed---l8---04: var(--primitives-neutral-gray-04); --semantic-surface-primary-fixed---l9---02: var(--primitives-neutral-gray-02); --semantic-surface-primary-gray---l1---100: var(--primitives-neutral-gray-100); --semantic-surface-primary-gray---l10---00: var(--primitives-neutral-gray-00); --semantic-surface-primary-gray---l2---80: var(--primitives-neutral-gray-80); --semantic-surface-primary-gray---l3---70: var(--primitives-neutral-gray-70); --semantic-surface-primary-gray---l4---25: var(--primitives-neutral-gray-25); --semantic-surface-primary-gray---l5---15: var(--primitives-neutral-gray-15); --semantic-surface-primary-gray---l6---12: var(--primitives-neutral-gray-12); --semantic-surface-primary-gray---l7---08: var(--primitives-neutral-gray-08); --semantic-surface-primary-gray---l8---04: var(--primitives-neutral-gray-04); --semantic-surface-primary-gray---l9---02: var(--primitives-neutral-gray-02); --semantic-surface-primary-opacity---black-l1---75a: var(--primitives-neutral-black-75a); --semantic-surface-primary-opacity---black-l10---02a: var(--primitives-neutral-black-02a); --semantic-surface-primary-opacity---black-l2---70a: var(--primitives-neutral-black-70a); --semantic-surface-primary-opacity---black-l3---55a: var(--primitives-neutral-black-55a); --semantic-surface-primary-opacity---black-l4---35a: var(--primitives-neutral-black-35a); --semantic-surface-primary-opacity---black-l5---25a: var(--primitives-neutral-black-25a); --semantic-surface-primary-opacity---black-l6---15a: var(--primitives-neutral-black-15a); --semantic-surface-primary-opacity---black-l7---12a: var(--primitives-neutral-black-12a); --semantic-surface-primary-opacity---black-l8---08a: var(--primitives-neutral-black-08a); --semantic-surface-primary-opacity---black-l9---04a: var(--primitives-neutral-black-04a); --semantic-surface-primary-opacity---white-l1---80a: var(--primitives-neutral-white-80a); --semantic-surface-primary-opacity---white-l10---05a: var(--primitives-neutral-white-05a); --semantic-surface-primary-opacity---white-l2---75a: var(--primitives-neutral-white-75a); --semantic-surface-primary-opacity---white-l3---65a: var(--primitives-neutral-white-65a); --semantic-surface-primary-opacity---white-l4---45a: var(--primitives-neutral-white-45a); --semantic-surface-primary-opacity---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-surface-primary-opacity---white-l6---25a: var(--primitives-neutral-white-25a); --semantic-surface-primary-opacity---white-l7---20a: var(--primitives-neutral-white-20a); --semantic-surface-primary-opacity---white-l8---16a: var(--primitives-neutral-white-16a); --semantic-surface-primary-opacity---white-l9---10a: var(--primitives-neutral-white-10a); --semantic-surface-state-error: var(--primitives-brand-light-red); --semantic-surface-state-link-tip: var(--primitives-brand-light-blue); --semantic-surface-state-un-active---20: var(--primitives-neutral-gray-20); --semantic-text-primary-fixed---black-l1---100: var(--primitives-neutral-gray-100); --semantic-text-primary-fixed---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-text-primary-fixed---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-text-primary-fixed---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-text-primary-fixed---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-text-primary-fixed---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-text-primary-fixed---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-text-primary-fixed---white-l1---00: var(--primitives-neutral-gray-00); --semantic-text-primary-fixed---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-text-primary-fixed---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-text-primary-fixed---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-text-primary-fixed---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-text-primary-fixed---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-text-primary-fixed---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-text-primary-on-surface---white-l1---00: var(--primitives-neutral-gray-00); --semantic-text-primary-on-surface---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-text-primary-on-surface---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-text-primary-on-surface---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-text-primary-on-surface---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-text-primary-on-surface---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-text-primary-on-surface---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-text-primary-opacity---black-l1---100: var(--primitives-neutral-gray-100); --semantic-text-primary-opacity---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-text-primary-opacity---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-text-primary-opacity---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-text-primary-opacity---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-text-primary-opacity---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-text-primary-opacity---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-text-state-error: var(--primitives-brand-red); --semantic-text-state-link-tip: var(--primitives-brand-blue); } /* dark */ /* color */ #one-dom-container .bk { --component-button-bg-primary-black-default: var(--semantic-surface-primary-gray---l1---100); --component-button-bg-primary-black-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-black-overlay-hover: var(--primitives-neutral-black-15a); --component-button-bg-primary-brand-default: var(--semantic-surface-brand-fixed---green); --component-button-bg-primary-brand-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-brand-overlay-hover: var(--primitives-neutral-black-35a); --component-button-bg-primary-gray-default: var(--semantic-surface-primary-fixed---l7---08); --component-button-bg-primary-gray-disable: var(--semantic-surface-primary-fixed---l4---25); --component-button-bg-primary-gray-overlay-hover: var(--primitives-neutral-black-15a); --component-button-bg-primary-opa-high-default: var(--semantic-surface-primary-opacity---black-l5---25a); --component-button-bg-primary-opa-high-disable: var(--semantic-surface-primary-opacity---black-l8---08a); --component-button-bg-primary-opa-high-overlay-hover: var(--primitives-neutral-white-00a); --component-button-bg-primary-opa-low-default: var(--semantic-surface-primary-opacity---black-l8---08a); --component-button-bg-primary-opa-low-disable: var(--semantic-surface-primary-opacity---black-l10---02a); --component-button-bg-primary-opa-low-overlay-hover: var(--primitives-neutral-white-00a); --component-button-bg-secondary-black-default: var(--primitives-neutral-white-00a); --component-button-bg-secondary-black-disable: var(--primitives-neutral-white-00a); --component-button-bg-secondary-black-overlay-hover: var(--primitives-neutral-white-30a); --component-button-bg-secondary-gray-default: var(--primitives-neutral-white-00a); --component-button-bg-secondary-gray-disable: var(--primitives-neutral-white-00a); --component-button-bg-secondary-gray-overlay-hover: var(--primitives-neutral-white-30a); --component-button-border-secondary-black-default: var(--semantic-border-primary-black-l1---100); --component-button-border-secondary-black-disable: var(--semantic-border-primary-black-l2---50a); --component-button-border-secondary-black-hover: var(--semantic-border-primary-black-l1---100); --component-button-border-secondary-gray-default: var(--semantic-border-primary-black-l2---50a); --component-button-border-secondary-gray-disable: var(--semantic-border-primary-black-l2---50a); --component-button-border-secondary-gray-hover: var(--semantic-border-primary-black-l2---50a); --component-button-icon-primary-black-default: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-icon-primary-black-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-black-hover: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-icon-primary-brand-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-brand-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-brand-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-gray-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-gray-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-icon-primary-gray-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-icon-primary-opa-high-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-high-disable: var(--semantic-text-primary-opacity---black-l6---20a); --component-button-icon-primary-opa-high-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-low-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-primary-opa-low-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-icon-primary-opa-low-overlay-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-black-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-black-disable: var(--semantic-text-primary-opacity---black-l4---55a); --component-button-icon-secondary-black-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-gray-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-icon-secondary-gray-disable: var(--semantic-text-primary-opacity---black-l4---55a); --component-button-icon-secondary-gray-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-black-default: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-text-primary-black-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-black-hover: var(--semantic-text-primary-on-surface---white-l1---00); --component-button-text-primary-brand-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-brand-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-brand-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-gray-default: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-gray-disable: var(--semantic-text-primary-fixed---black-l5---30a); --component-button-text-primary-gray-hover: var(--semantic-text-primary-fixed---black-l1---100); --component-button-text-primary-opa-high-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-high-disable: var(--semantic-text-primary-opacity---black-l6---20a); --component-button-text-primary-opa-high-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-low-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-primary-opa-low-disable: var(--semantic-text-primary-opacity---black-l5---30a); --component-button-text-primary-opa-low-overlay-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-black-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-black-disable: var(--semantic-text-primary-opacity---black-l4---55a); --component-button-text-secondary-black-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-gray-default: var(--semantic-text-primary-opacity---black-l1---100); --component-button-text-secondary-gray-disable: var(--semantic-text-primary-opacity---black-l4---55a); --component-button-text-secondary-gray-hover: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-bg-primary-black-opa: var(--semantic-surface-primary-opacity---black-l9---04a); --component-card-info-bg-primary-black-opa-select: var(--semantic-surface-primary-opacity---black-l7---12a); --component-card-info-bg-primary-white: var(--semantic-surface-primary-gray---l9---02); --component-card-info-bg-primary-white-opa: var(--semantic-surface-primary-opacity---white-l4---45a); --component-card-info-bg-primary-white-opa-select: var(--semantic-surface-primary-gray---l10---00); --component-card-info-icon-primary-black-opa: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white-opa: var(--semantic-icon-primary-opacity---black-l1---100); --component-card-info-icon-primary-white-opa-white-bg: var(--semantic-icon-primary-on-surface---white-l1---00); --component-card-info-text-primary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-black-opa-select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-black-opa-select-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-card-info-text-primary-white-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-white-l2: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-info-text-primary-white-opa: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-info-text-primary-white-opa--select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-primary-white-opa-select-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-card-info-text-primary-white-link: var(--semantic-text-state-link&tip); --component-card-info-text-secondary: var(--semantic-text-primary-opacity---black-l5---30a); --component-card-info-text-secondary-select-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-card-info-text-secondary-select-l2: var(--semantic-text-primary-opacity---black-l4---55a); --component-card-mark-bg-primary-black-opa: var(--semantic-surface-primary-opacity---black-l3---55a); --component-card-mark-bg-primary-gray-opa: var(--semantic-surface-primary-opacity---black-l8---08a); --component-card-mark-bg-primary-white: var(--semantic-surface-primary-gray---l10---00); --component-card-mark-border-secondary-black-opa: var(--semantic-border-primary-black-l2---50a); --component-card-mark-border-secondary-gray-opa: var(--primitives-neutral-white-10a); --component-card-mark-border-secondary-white: var(--semantic-border-primary-black-l1---100); --component-card-mark-divider-primary-gray-opa: var(--primitives-neutral-white-10a); --component-card-mark-icon-primary-black-opa: var(--semantic-text-primary-on-surface---white-l1---00); --component-card-mark-icon-primary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-primary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-icon-secondary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-primary-black-opa: var(--semantic-text-primary-on-surface---white-l1---00); --component-card-mark-text-primary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-primary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-black-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-gray-opa: var(--semantic-text-primary-opacity---black-l1---100); --component-card-mark-text-secondary-white: var(--semantic-text-primary-opacity---black-l1---100); --component-card-tab-bar-bg-primary: var(--semantic-surface-primary-opacity---black-l9---04a); --component-card-tab-bar-bg-primary-select: var(--semantic-surface-primary-fixed---l10---00); --component-card-tab-bar-divider-primary: var(--primitives-neutral-white-05a); --component-card-tab-bar-text-primary: var(--semantic-surface-primary-gray---l1---100); --component-card-tab-bar-text-primary-select: var(--semantic-surface-primary-fixed---l1---100); --component-card-tab-bar-text-secondary: var(--semantic-surface-primary-opacity---black-l4---35a); --component-card-tab-bar-text-secondary-select: var(--semantic-surface-primary-gray---l1---100); --component-text-body-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-body-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-body-l3: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-data-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-headine-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-remark-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-remark-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-remark-l2-2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-remark-l3: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-remark-l3-2: var(--semantic-text-primary-opacity---black-l4---55a); --component-text-subtitle-l1: var(--semantic-text-primary-opacity---black-l1---100); --component-text-subtitle-l2: var(--semantic-text-primary-opacity---black-l3---75a); --component-text-subtitle-l3: var(--semantic-text-primary-opacity---black-l4---55a); --primitives-brand-blue: #2660f5; --primitives-brand-brand-brown: #a07e6d; --primitives-brand-brand-gray02: #fafafa; --primitives-brand-brand-gray04: #f5f4f0; --primitives-brand-brand-gray08: #ebe8e3; --primitives-brand-brand-gray13: #ddd9d4; --primitives-brand-brand-gray23: #c3bfb9; --primitives-brand-brand-gray38: #9e9a94; --primitives-brand-brand-gray56: #706c66; --primitives-brand-brand-gray72: #484540; --primitives-brand-brand-gray87: #201f1c; --primitives-brand-brand-green: #2cff73; --primitives-brand-brand-light-green: #d7ffdb; --primitives-brand-brand-purple: #b995ff; --primitives-brand-brand-theme-green: #26c05d; --primitives-brand-light-blue: #e8f3ff; --primitives-brand-light-red: #fdefed; --primitives-brand-red: #e23220; --primitives-neutral-black-00a: #00000000; --primitives-neutral-black-02a: #00000005; --primitives-neutral-black-04a: #0000000a; --primitives-neutral-black-08a: #00000014; --primitives-neutral-black-10a: #0000001a; --primitives-neutral-black-12a: #0000001f; --primitives-neutral-black-15a: #00000026; --primitives-neutral-black-20a: #00000033; --primitives-neutral-black-25a: #00000040; --primitives-neutral-black-30a: #0000004d; --primitives-neutral-black-35a: #00000059; --primitives-neutral-black-50a: #00000080; --primitives-neutral-black-55a: #0000008c; --primitives-neutral-black-60a: #00000099; --primitives-neutral-black-70a: #000000b2; --primitives-neutral-black-75a: #000000bf; --primitives-neutral-black-80a: #000000cc; --primitives-neutral-black-84a: #000000d6; --primitives-neutral-black-90a: #000000e5; --primitives-neutral-black-95a: #000000f2; --primitives-neutral-gray-00: #ffffff; --primitives-neutral-gray-02: #fafafa; --primitives-neutral-gray-04: #f6f6f6; --primitives-neutral-gray-08: #ebebeb; --primitives-neutral-gray-10: #e6e6e6; --primitives-neutral-gray-100: #000000; --primitives-neutral-gray-12: #e0e0e0; --primitives-neutral-gray-15: #d9d9d9; --primitives-neutral-gray-20: #cccccc; --primitives-neutral-gray-25: #bfbfbf; --primitives-neutral-gray-30: #b3b3b3; --primitives-neutral-gray-35: #a6a6a6; --primitives-neutral-gray-50: #808080; --primitives-neutral-gray-55: #737373; --primitives-neutral-gray-60: #666666; --primitives-neutral-gray-70: #4d4d4d; --primitives-neutral-gray-75: #404040; --primitives-neutral-gray-80: #333333; --primitives-neutral-gray-84: #282828; --primitives-neutral-gray-90: #1a1a1a; --primitives-neutral-gray-95: #0d0d0d; --primitives-neutral-white-00a: #ffffff00; --primitives-neutral-white-05a: #ffffff0d; --primitives-neutral-white-10a: #ffffff1a; --primitives-neutral-white-16a: #ffffff29; --primitives-neutral-white-20a: #ffffff33; --primitives-neutral-white-25a: #ffffff40; --primitives-neutral-white-30a: #ffffff4d; --primitives-neutral-white-40a: #ffffff66; --primitives-neutral-white-45a: #ffffff73; --primitives-neutral-white-50a: #ffffff80; --primitives-neutral-white-65a: #ffffffa6; --primitives-neutral-white-70a: #ffffffb2; --primitives-neutral-white-75a: #ffffffbf; --primitives-neutral-white-80a: #ffffffcc; --primitives-neutral-white-85a: #ffffffd9; --primitives-neutral-white-88a: #ffffffe0; --primitives-neutral-white-90a: #ffffffe5; --primitives-neutral-white-92a: #ffffffeb; --primitives-neutral-white-96a: #fffffff5; --primitives-neutral-white-98a: #fffffffa; --semantic-background-primary-cold-gray--04: var(--primitives-neutral-gray-90); --semantic-background-primary-warm-gray---07: var(--primitives-neutral-gray-90); --semantic-background-primary-gray---l1---00: var(--primitives-neutral-gray-100); --semantic-background-primary-gray---l2--02: var(--primitives-neutral-gray-95); --semantic-background-primary-gray---l3---04: var(--primitives-neutral-gray-90); --semantic-background-primary-gray---l4---15: var(--primitives-neutral-gray-84); --semantic-border-primary-black-l1---100: var(--primitives-neutral-gray-00); --semantic-border-primary-black-l2---50a: var(--primitives-neutral-white-50a); --semantic-border-primary-black-l3---20a: var(--primitives-neutral-white-30a); --semantic-border-primary-black-l4---15a: var(--primitives-neutral-white-25a); --semantic-divider-primary-gray---l1---15: var(--primitives-neutral-gray-84); --semantic-divider-primary-gray---l2---04: var(--primitives-neutral-gray-95); --semantic-icon-miscellaneous-border-button---30a: var(--primitives-neutral-white-50a); --semantic-icon-primary-fixed---black-l1---100: var(--primitives-neutral-gray-100); --semantic-icon-primary-fixed---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-icon-primary-fixed---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-icon-primary-fixed---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-icon-primary-fixed---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-fixed---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-icon-primary-fixed---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-icon-primary-fixed---white-l1---00: var(--primitives-neutral-gray-00); --semantic-icon-primary-fixed---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-icon-primary-fixed---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-icon-primary-fixed---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-icon-primary-fixed---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-icon-primary-fixed---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-icon-primary-fixed---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-icon-primary-on-surface---white-l1---00: var(--primitives-neutral-gray-100); --semantic-icon-primary-on-surface---white-l2---98a: var(--primitives-neutral-black-95a); --semantic-icon-primary-on-surface---white-l3---75a: var(--primitives-neutral-black-75a); --semantic-icon-primary-on-surface---white-l4---50a: var(--primitives-neutral-black-55a); --semantic-icon-primary-on-surface---white-l5---30a: var(--primitives-neutral-black-30a); --semantic-icon-primary-on-surface---white-l6---20a: var(--primitives-neutral-black-20a); --semantic-icon-primary-on-surface---white-l7---16a: var(--primitives-neutral-black-15a); --semantic-icon-primary-opacity---black-l1---100: var(--primitives-neutral-gray-00); --semantic-icon-primary-opacity---black-l2---95a: var(--primitives-neutral-white-98a); --semantic-icon-primary-opacity---black-l3---75a: var(--primitives-neutral-white-75a); --semantic-icon-primary-opacity---black-l4---55a: var(--primitives-neutral-white-50a); --semantic-icon-primary-opacity---black-l5---30a: var(--primitives-neutral-white-30a); --semantic-icon-primary-opacity---black-l6---20a: var(--primitives-neutral-white-20a); --semantic-icon-primary-opacity---black-l7---15a: var(--primitives-neutral-white-16a); --semantic-icon-state-error: var(--primitives-brand-red); --semantic-icon-state-link-tip: var(--primitives-brand-blue); --semantic-overlay-black-fixed---l1---20a: var(--primitives-neutral-black-20a); --semantic-overlay-black-fixed---l2---12a: var(--primitives-neutral-black-12a); --semantic-overlay-black-fixed---l3---08a: var(--primitives-neutral-black-08a); --semantic-overlay-black-fixed---l4---04a: var(--primitives-neutral-black-04a); --semantic-overlay-white-fixed---l1---20a: var(--primitives-neutral-white-20a); --semantic-overlay-white-fixed---l2---12a: var(--primitives-neutral-white-16a); --semantic-overlay-white-fixed---l3---10a: var(--primitives-neutral-white-10a); --semantic-overlay-white-fixed---l4---05a: var(--primitives-neutral-white-05a); --semantic-surface-brand-fixed---brown: var(--primitives-brand-brand-brown); --semantic-surface-brand-fixed---gray-l1---87: var(--primitives-brand-brand-gray87); --semantic-surface-brand-fixed---gray-l2---72: var(--primitives-brand-brand-gray72); --semantic-surface-brand-fixed---gray-l3---56: var(--primitives-brand-brand-gray56); --semantic-surface-brand-fixed---gray-l4---38: var(--primitives-brand-brand-gray38); --semantic-surface-brand-fixed---gray-l5---23: var(--primitives-brand-brand-gray23); --semantic-surface-brand-fixed---gray-l6---13: var(--primitives-brand-brand-gray13); --semantic-surface-brand-fixed---gray-l7---08: var(--primitives-brand-brand-gray08); --semantic-surface-brand-fixed---gray-l8---04: var(--primitives-brand-brand-gray04); --semantic-surface-brand-fixed---gray-l9---02: var(--primitives-brand-brand-gray02); --semantic-surface-brand-fixed---green: var(--primitives-brand-brand-green); --semantic-surface-brand-fixed---light-green: var(--primitives-brand-brand-light-green); --semantic-surface-brand-fixed---purple: var(--primitives-brand-brand-purple); --semantic-surface-brand-fixed---theme-green: var(--primitives-brand-brand-theme-green); --semantic-surface-brand-gray---l1---13: var(--primitives-neutral-gray-100); --semantic-surface-brand-gray---l2---13: var(--primitives-brand-brand-gray87); --semantic-surface-brand-gray---l3---04: var(--primitives-brand-brand-gray87); --semantic-surface-brand-gray---l4---02: var(--primitives-brand-brand-gray87); --semantic-surface-brand-gray---l5---02: var(--primitives-brand-brand-gray72); --semantic-surface-primary-fixed---l1---100: var(--primitives-neutral-gray-100); --semantic-surface-primary-fixed---l10---00: var(--primitives-neutral-gray-00); --semantic-surface-primary-fixed---l2---75: var(--primitives-neutral-gray-80); --semantic-surface-primary-fixed---l3---70: var(--primitives-neutral-gray-70); --semantic-surface-primary-fixed---l4---25: var(--primitives-neutral-gray-25); --semantic-surface-primary-fixed---l5---15: var(--primitives-neutral-gray-15); --semantic-surface-primary-fixed---l6---12: var(--primitives-neutral-gray-12); --semantic-surface-primary-fixed---l7---08: var(--primitives-neutral-gray-08); --semantic-surface-primary-fixed---l8---04: var(--primitives-neutral-gray-04); --semantic-surface-primary-fixed---l9---02: var(--primitives-neutral-gray-02); --semantic-surface-primary-gray---l1---100: var(--primitives-neutral-gray-00); --semantic-surface-primary-gray---l10---00: var(--primitives-neutral-gray-100); --semantic-surface-primary-gray---l2---80: var(--primitives-neutral-gray-15); --semantic-surface-primary-gray---l3---70: var(--primitives-neutral-gray-25); --semantic-surface-primary-gray---l4---25: var(--primitives-neutral-gray-70); --semantic-surface-primary-gray---l5---15: var(--primitives-neutral-gray-75); --semantic-surface-primary-gray---l6---12: var(--primitives-neutral-gray-80); --semantic-surface-primary-gray---l7---08: var(--primitives-neutral-gray-84); --semantic-surface-primary-gray---l8---04: var(--primitives-neutral-gray-90); --semantic-surface-primary-gray---l9---02: var(--primitives-neutral-gray-95); --semantic-surface-primary-opacity---black-l1---75a: var(--primitives-neutral-white-80a); --semantic-surface-primary-opacity---black-l10---02a: var(--primitives-neutral-white-05a); --semantic-surface-primary-opacity---black-l2---70a: var(--primitives-neutral-white-75a); --semantic-surface-primary-opacity---black-l3---55a: var(--primitives-neutral-white-65a); --semantic-surface-primary-opacity---black-l4---35a: var(--primitives-neutral-white-45a); --semantic-surface-primary-opacity---black-l5---25a: var(--primitives-neutral-white-30a); --semantic-surface-primary-opacity---black-l6---15a: var(--primitives-neutral-white-25a); --semantic-surface-primary-opacity---black-l7---12a: var(--primitives-neutral-white-20a); --semantic-surface-primary-opacity---black-l8---08a: var(--primitives-neutral-white-16a); --semantic-surface-primary-opacity---black-l9---04a: var(--primitives-neutral-white-10a); --semantic-surface-primary-opacity---white-l1---80a: var(--primitives-neutral-black-75a); --semantic-surface-primary-opacity---white-l10---05a: var(--primitives-neutral-black-02a); --semantic-surface-primary-opacity---white-l2---75a: var(--primitives-neutral-black-70a); --semantic-surface-primary-opacity---white-l3---65a: var(--primitives-neutral-black-55a); --semantic-surface-primary-opacity---white-l4---45a: var(--primitives-neutral-black-35a); --semantic-surface-primary-opacity---white-l5---30a: var(--primitives-neutral-black-08a); --semantic-surface-primary-opacity---white-l6---25a: var(--primitives-neutral-black-25a); --semantic-surface-primary-opacity---white-l7---20a: var(--primitives-neutral-black-15a); --semantic-surface-primary-opacity---white-l8---16a: var(--primitives-neutral-black-12a); --semantic-surface-primary-opacity---white-l9---10a: var(--primitives-neutral-black-04a); --semantic-surface-state-error: var(--primitives-brand-light-red); --semantic-surface-state-link-tip: var(--primitives-brand-light-blue); --semantic-surface-state-un-active---20: var(--primitives-neutral-gray-20); --semantic-text-primary-fixed---black-l1---100: var(--primitives-neutral-gray-100); --semantic-text-primary-fixed---black-l2---95a: var(--primitives-neutral-black-95a); --semantic-text-primary-fixed---black-l3---75a: var(--primitives-neutral-black-75a); --semantic-text-primary-fixed---black-l4---55a: var(--primitives-neutral-black-55a); --semantic-text-primary-fixed---black-l5---30a: var(--primitives-neutral-black-30a); --semantic-text-primary-fixed---black-l6---20a: var(--primitives-neutral-black-20a); --semantic-text-primary-fixed---black-l7---15a: var(--primitives-neutral-black-15a); --semantic-text-primary-fixed---white-l1---00: var(--primitives-neutral-gray-00); --semantic-text-primary-fixed---white-l2---98a: var(--primitives-neutral-white-98a); --semantic-text-primary-fixed---white-l3---75a: var(--primitives-neutral-white-75a); --semantic-text-primary-fixed---white-l4---50a: var(--primitives-neutral-white-50a); --semantic-text-primary-fixed---white-l5---30a: var(--primitives-neutral-white-30a); --semantic-text-primary-fixed---white-l6---20a: var(--primitives-neutral-white-20a); --semantic-text-primary-fixed---white-l7---16a: var(--primitives-neutral-white-16a); --semantic-text-primary-on-surface---white-l1---00: var(--primitives-neutral-gray-100); --semantic-text-primary-on-surface---white-l2---98a: var(--primitives-neutral-black-95a); --semantic-text-primary-on-surface---white-l3---75a: var(--primitives-neutral-black-75a); --semantic-text-primary-on-surface---white-l4---50a: var(--primitives-neutral-black-55a); --semantic-text-primary-on-surface---white-l5---30a: var(--primitives-neutral-black-30a); --semantic-text-primary-on-surface---white-l6---20a: var(--primitives-neutral-black-20a); --semantic-text-primary-on-surface---white-l7---16a: var(--primitives-neutral-black-15a); --semantic-text-primary-opacity---black-l1---100: var(--primitives-neutral-gray-00); --semantic-text-primary-opacity---black-l2---95a: var(--primitives-neutral-white-98a); --semantic-text-primary-opacity---black-l3---75a: var(--primitives-neutral-white-75a); --semantic-text-primary-opacity---black-l4---55a: var(--primitives-neutral-white-50a); --semantic-text-primary-opacity---black-l5---30a: var(--primitives-neutral-white-30a); --semantic-text-primary-opacity---black-l6---20a: var(--primitives-neutral-white-20a); --semantic-text-primary-opacity---black-l7---15a: var(--primitives-neutral-white-16a); --semantic-text-state-error: var(--primitives-brand-red); --semantic-text-state-link-tip: var(--primitives-brand-blue); } #oc-wrapper { overflow: visible; -webkit-transition: none; -moz-transition: none; transition: none; } #one-dom-container .loadingWt { position: fixed; top: 0; bottom: 0; z-index: 999; width: 100vw; height: 100vh; background-color: #fff; } @media screen and (min-width: 1024px) { #one-waterproof-section-a, #one-engine-section-a, #one-dropproof-section-a, #one-battery-section-a, #one-smooth-section-a, #one-signalTitle-section-a { position: absolute; top: -46px; } #one-battery2-section-a { position: absolute; top: calc(500px - 46px); } } @media screen and (max-width: 1023px) { #one-waterproof-section-a, #one-engine-section-a, #one-dropproof-section-a, #one-battery-section-a, #one-smooth-section-a, #one-signalTitle-section-a { position: absolute; top: -90px; } } /* one-common.css */ /* 默认值 */ @media screen { #one-dom-container * { text-rendering: optimizeLegibility; 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 { display: inline-block; font-size: 50%; position: relative; top: -1em; -webkit-transform: scale(.7); -moz-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); line-height: 0; vertical-align: initial; } #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.bk.grey { background: #1A1A1A; } #one-dom-container .one-section.bk.grey2 { background: #0D0D0D; } } /* 字体 */ #one-dom-container .one-h0 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 1 */ font-family: var(--font-m); font-size: var(--semantic-font-size-head-0, 68px); font-style: normal; line-height: var(--semantic-font-line-height-head-0, 76px); /* 111.765% */ } #one-dom-container .one-h1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 1 */ font-family: var(--font-m); font-size: var(--semantic-font-size-head-1, 48px); font-style: normal; line-height: var(--semantic-font-line-height-head-1, 60px); /* 125% */ } #one-dom-container .one-h2 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Headline/Headline 2 */ font-family: var(--font-m); font-size: var(--semantic-font-size-head-2, 36px); font-style: normal; line-height: var(--semantic-font-line-height-head-2, 50px); /* 119.048% */ } #one-dom-container .one-sh1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-m); font-size: var(--semantic-font-size-sub-head-1, 32px); font-style: normal; line-height: var(--semantic-font-line-height-sub-head-1, 40px); /* 125% */ } #one-dom-container .one-sh2 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Subtitle/Subheadline 2 R */ font-family: var(--font-m); font-size: var(--semantic-font-size-sub-head-2, 24px); font-style: normal; line-height: var(--semantic-font-line-height-sub-head-2, 32px); /* 133.333% */ } #one-dom-container .one-sh3 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); font-family: var(--font-m); font-size: var(--semantic-font-size-sub-head-3, 20px); font-style: normal; line-height: var(--semantic-font-line-height-sub-head-3, 28px); /* 140% */ } #one-dom-container .one-b1 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 1 R */ font-family: var(--font-r); font-size: var(--semantic-font-size-body-1, 18px); font-style: normal; line-height: var(--semantic-font-line-height-body-1, 26px); /* 144.444% */ } #one-dom-container .one-b2 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 2 R */ font-family: var(--font-r); font-size: var(--semantic-font-size-body-2, 16px); font-style: normal; line-height: var(--semantic-font-line-height-body-2, 24px); /* 150% */ } #one-dom-container .one-b3 { color: var(--semantic-text-primary-opacity---black-l1---100, #000); /* Body/Body 3 R */ font-family: var(--font-r); font-size: var(--semantic-font-size-body-3, 14px); font-style: normal; line-height: var(--semantic-font-line-height-body-3, 22px); /* 157.143% */ } #one-dom-container .one-b1.m, #one-dom-container .one-b2.m, #one-dom-container .one-b3.m { font-family: var(--font-m); } #one-dom-container .one-b1.grey, #one-dom-container .one-b2.grey, #one-dom-container .one-b3.grey { opacity: 0.75; } #one-dom-container .one-b1 span.grey, #one-dom-container .one-b2 span.grey, #one-dom-container .one-b3 span.grey { opacity: 0.75; } #one-dom-container .one-b1.grey2, #one-dom-container .one-b2.grey2, #one-dom-container .one-b3.grey2 { color: #000; opacity: 0.3; } #one-dom-container .one-desc.grey2 { opacity: 0.55; } #one-dom-container .one-b1 span.grey2, #one-dom-container .one-b2 span.grey2, #one-dom-container .one-b3 span.grey2 { opacity: 0.3; } #one-dom-container .one-desc { color: var(--semantic-text-primary-opacity---black-l4---55a, rgba(0, 0, 0, 0.55)); font-family: var(--font-r); font-size: var(--semantic-font-size-footnote-1, 12px); font-style: normal; line-height: var(--semantic-font-line-height-footnote-1, 20px); /* 166.667% */ } #one-dom-container p.wt { color: #fff; } #one-dom-container .showColorA { transition: all 0.5s; transition-delay: 0.2s; } #one-dom-container .showColorA.active { text-shadow: 0px 0px 15px var(--brand-Cyan-100, #00F3FA), 0px 0px 30px var(--brand-Cyan-60, rgba(0, 243, 250, 0.60)); } #one-dom-container .media-clip { clip-path: inset(1px 1px 1px 1px); } /* one-common-pc.css */ /* 独有部分 加-pc*/ @media screen and (min-width: 1440px) { #one-dom-container { font-size: 20px; } #one-dom-container p.pc-ct { text-align: center; } #one-dom-container .one-pc-fix { height: 100vh; overflow: hidden; box-sizing: border-box; } #one-dom-container .one-pc-noWrap { text-wrap: nowrap; white-space: nowrap; } /* 安全距离 */ #one-dom-container .pc-safeRow { display: block; width: 1312px; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .one-pc-fix .pc-safeRow { height: 100vh; } #one-dom-container .pc-safeCol { padding: 40px 0; } #one-dom-container .pc-safeCol2 { padding: 80px 0; } #one-dom-container .pc-safeCol3 { padding-top: 184px; padding-bottom: 104px; } #one-dom-container .pc-safeTop { padding-top: 40px; } #one-dom-container .pc-safeBottom { padding-bottom: 40px; } #one-dom-container .pc-safeTop2 { padding-top: 80px; } #one-dom-container .pc-safeBottom2 { padding-bottom: 80px; } /* 盒子布局 */ #one-dom-container .one-pc-flexRow { display: flex !important; flex-direction: row; } #one-dom-container .one-pc-flexCol { display: flex !important; flex-direction: column; } /* hover动画 */ #one-dom-container .one-pc-hoverScale:hover>img, #one-dom-container .one-pc-hoverScale:hover>picture>img { transform: scale(1.05); } #one-dom-container .one-pc-hoverScale>img, #one-dom-container .one-pc-hoverScale>picture>img { transition: transform 0.5s; } p.one-pc-wt { color: #fff !important; } /* 居中 */ #one-dom-container .one-pc-allCenter { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); } #one-dom-container .one-pc-rowCenter1 { display: block; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .one-titletxt.one-pc-rowCenter1 { display: flex; } #one-dom-container .one-pc-rowCenter2 { position: absolute; left: 50%; transform: translateX(-50%); } #one-dom-container .one-pc-colCenter { position: absolute; top: 50%; transform: translateY(-50%); } #one-dom-container .one-pc-colCenter.lt { left: 0; } #one-dom-container .one-pc-colCenter.rt { right: 0; } /* drag 拖拽组件 */ #one-dom-container .one-pc-drag-div { width: 100%; border-radius: 0.6em; overflow: hidden; user-select: none; position: relative; } #one-dom-container .one-drag-img1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #one-dom-container .one-drag-img2 { width: 38.2%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; } #one-dom-container .one-drag-img2 img, #one-dom-container .one-drag-img2 video { width: 49em; height: 100%; position: absolute; top: 0; right: 0; background-position: center; background-size: cover; object-fit: cover; object-position: center; } #one-dom-container .one-drag-controlBtn { position: absolute; top: 0; left: 61.8%; width: 0.15em; height: 100%; background-color: #fff; cursor: ew-resize; z-index: 99; } #one-dom-container .one-drag-controlBtn div { width: 1.5em; height: 1.5em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99; background-size: contain; background-repeat: no-repeat; background-position: center; } #one-dom-container .one-drag-desc { position: absolute; bottom: 30px; left: 30px; text-wrap: nowrap; } #one-dom-container .one-drag-desc p { padding: 0.2em 0.75em; border-radius: 2.6em; border: 0.769px solid #DEDEDE; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(11.5px); } #one-dom-container .one-drag-img2 .one-drag-desc { left: auto; right: 30px; } } /* 相互改写部分 不加-pc */ @media screen and (min-width: 1440px) { /* 标题+正文 */ #one-dom-container .one-title { display: flex; flex-direction: column; align-items: flex-start; } #one-dom-container .one-title>p:last-of-type { margin-top: 16px; } #one-dom-container .one-title.ct { align-items: center; text-align: center; } #one-dom-container .one-title.row { flex-direction: row; justify-content: space-between; } #one-dom-container .one-title.row>p, #one-dom-container .one-title.row>div { width: calc(50% - 4px); } #one-dom-container .one-title.row>p:first-child { padding-right: 24px; } #one-dom-container .one-title.b>p:last-of-type { margin-top: 24px } #one-dom-container .one-title.m>p:last-of-type { margin-top: 12px; } #one-dom-container .one-title.sm>p:last-of-type { margin-top: 8px; } #one-dom-container .one-title.ssm>p:last-of-type { margin-top: 4px; } #one-dom-container .replay-icon { position: absolute; bottom: 20px; right: 20px; cursor: pointer; width: 36px; display: none; } } /* one-common-pad.css */ /* 独有部分 加-pad*/ @media screen and (max-width: 1439px) and (min-width: 650px) { #one-dom-container { font-size: 20px; font-size: 2.6041666666vw !important; } #one-dom-container p.pad-ct { text-align: center; } #one-dom-container .one-pad-fix { height: 100vh; overflow: hidden; box-sizing: border-box; } #one-dom-container .one-pad-noWrap { text-wrap: nowrap; white-space: nowrap; } /* 安全距离 */ #one-dom-container .pad-safeRow { display: block; width: 36em; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .pad-safeCol { padding: 1.2em 0; } #one-dom-container .pad-safeCol2 { padding: 2.4em 0; } #one-dom-container .pad-safeCol3 { padding-top: 4em; padding-bottom: 1.6em; } #one-dom-container .pad-safeTop { padding-top: 1.2em; } #one-dom-container .pad-safeTop2 { padding-top: 2.4em; } #one-dom-container .pad-safeBottom { padding-bottom: 1.2em; } #one-dom-container .pad-safeBottom2 { padding-bottom: 2.4em; } /* 居中 */ #one-dom-container .one-pad-allCenter { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); } #one-dom-container .one-pad-rowCenter1 { display: block; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .one-pad-rowCenter2 { position: absolute; left: 50%; transform: translateX(-50%); } #one-dom-container .one-pad-colCenter { position: absolute; top: 50%; transform: translateY(-50%); } #one-dom-container .one-pad-colCenter.lt { left: 0; } #one-dom-container .one-pad-colCenter.rt { right: 0; } /* 盒子布局 */ #one-dom-container .one-pad-flexRow { display: flex; flex-direction: row; } #one-dom-container .one-pad-flexCol { display: flex; flex-direction: column; } /* hover动画 */ #one-dom-container .one-pad-hoverScale:hover>img, #one-dom-container .one-pad-hoverScale:hover>picture>img { transform: scale(1.05); } #one-dom-container .one-pad-hoverScale>img, #one-dom-container .one-pad-hoverScale>picture>img { transition: transform 0.5s; } p.one-pad-wt { color: #fff !important; } /* drag 拖拽组件 */ #one-dom-container .one-pad-drag-div { width: 100%; border-radius: 0.6em; overflow: hidden; user-select: none; position: relative; } #one-dom-container .one-drag-img1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #one-dom-container .one-drag-img2 { width: 38.2%; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; } #one-dom-container .one-drag-img2 img, #one-dom-container .one-drag-img2 video { width: 49em; height: 100%; position: absolute; top: 0; right: 0; background-position: center; background-size: cover; object-fit: cover; object-position: center; } #one-dom-container .one-drag-controlBtn { position: absolute; top: 0; left: 61.8%; width: 0.15em; height: 100%; background-color: #fff; cursor: ew-resize; z-index: 99; } #one-dom-container .one-drag-controlBtn div { width: 1.5em; height: 1.5em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99; background-size: contain; background-repeat: no-repeat; background-position: center; } #one-dom-container .one-drag-desc { position: absolute; bottom: 30px; left: 30px; text-wrap: nowrap; } #one-dom-container .one-drag-desc p { padding: 0.2em 0.75em; border-radius: 2.6em; border: 0.769px solid #DEDEDE; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(11.5px); } #one-dom-container .one-drag-img2 .one-drag-desc { left: auto; right: 30px; } } /* 相互改写部分 不加-pad */ @media screen and (max-width: 1439px) and (min-width: 650px) { /* 标题+正文 */ #one-dom-container .one-title { display: flex; flex-direction: column; align-items: flex-start; } #one-dom-container .one-title>p:last-of-type { margin-top: 18px; } #one-dom-container .one-title.ct { align-items: center; } #one-dom-container .one-title.pad-ct { align-items: center; } #one-dom-container .one-title.m>p:last-of-type { margin-top: 16px; } #one-dom-container .one-title.sm>p:last-of-type { margin-top: 8px; } #one-dom-container .one-title.ssm>p:last-of-type { margin-top: 4px; } #one-dom-container .one-title.row { flex-direction: row; justify-content: space-between; } #one-dom-container .one-title.row>p, #one-dom-container .one-title.row>div { width: calc(50% - 0.1em); } #one-dom-container .replay-icon { position: absolute; bottom: 0.3em; right: 0.3em; cursor: pointer; width: 1.6em; display: none; } } /* 独有部分 加-wap*/ @media screen and (max-width: 649px) { #one-dom-container { font-size: 20px; font-size: 5.5555555555vw !important; } #one-dom-container p.wap-ct { text-align: center; } #one-dom-container .one-wap-fix { height: 100vh; overflow: hidden; box-sizing: border-box; } #one-dom-container .one-wap-noWrap { text-wrap: nowrap; white-space: nowrap; } /* 安全距离 */ #one-dom-container .wap-safeRow { display: block; width: 16.4em; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .wap-safeCol { padding: 1.2em 0; } #one-dom-container .wap-safeCol2 { padding: 2.4em 0; } #one-dom-container .wap-safeCol3 { padding-top: 4em; padding-bottom: 1.6em; } #one-dom-container .wap-safeTop { padding-top: 1.2em; } #one-dom-container .wap-safeTop2 { padding-top: 2.4em; } #one-dom-container .wap-safeBottom { padding-bottom: 1.2em; } #one-dom-container .wap-safeBottom2 { padding-bottom: 2.4em; } /* 居中 */ #one-dom-container .one-wap-allCenter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #one-dom-container .one-wap-rowCenter1 { display: block; margin-left: auto; margin-right: auto; position: relative; } #one-dom-container .one-wap-rowCenter2 { position: absolute; left: 50%; transform: translateX(-50%); } #one-dom-container .one-wap-colCenter { position: absolute; top: 50%; transform: translateY(-50%); } #one-dom-container .one-wap-colCenter.lt { left: 0; } #one-dom-container .one-wap-colCenter.rt { right: 0; } /* 盒子布局 */ #one-dom-container .one-wap-flexRow { display: flex; flex-direction: row; } #one-dom-container .one-wap-flexCol { display: flex; flex-direction: column; } } /* 相互改写部分 不加-wap */ @media screen and (max-width: 649px) { /* 标题+正文 */ #one-dom-container .one-title { display: flex !important; flex-direction: column; align-items: flex-start; } #one-dom-container .one-title.ct { align-items: center; text-align: center; } #one-dom-container .one-title>p:last-of-type { margin-top: 12px; } #one-dom-container .one-title.b>p:last-of-type { margin-top: 18px; } #one-dom-container .one-title.m>p:last-of-type { margin-top: 12px; } #one-dom-container .one-title.sm>p:last-of-type { margin-top: 4px; } #one-dom-container .one-title.ssm>p:last-of-type { margin-top: 4px; } #one-dom-container .replay-icon { position: absolute; bottom: 0.6em; right: 0.6em; cursor: pointer; width: 1.6em; display: none; } } /* one-pc.css */ @media screen and (min-width: 1440px) { #one-dom-container .one-pc-autoPx { font-size: 20px; font-size: 1.3888888889vw !important; } /* kv */ #one-dom-container .one-kv-section { height: 32em; } #one-dom-container .one-kv-content { width: 100%; height: 100%; } #one-dom-container .one-kv-txt1 { top: 16.5em; left: 3.2em; position: absolute; z-index: 2; } #one-dom-container .one-kv-txt2 { top: 16.5em; right: 3em; position: absolute; z-index: 2; } #one-dom-container .one-kv-p1 { color: rgba(0, 0, 0, 0.95); font-size: 4.4em; line-height: 100%; } #one-dom-container .one-kv-p2 { color: rgba(0, 0, 0, 0.95); font-size: 4.4em; line-height: 100%; text-align: center; } #one-dom-container .one-kv-p3 { margin-top: 0.4em; color: rgba(0, 0, 0, 0.95); font-size: 1.4em; line-height: 100%; text-align: center; } #one-dom-container .one-kv-remark { position: absolute; right: 3.2em; bottom: 2em; width: 106px; z-index: 2; } /* navigation */ #one-dom-container .one-navigation-section { background-color: #EBEBEB !important; } #one-dom-container .one-navigation-div { width: 100%; border-collapse: separate; border-spacing: 4px; margin-top: 48px; } #one-dom-container .one-navigation-div td { width: 432px; height: 286px; overflow: hidden; } #one-dom-container .one-navigation-item { display: block; position: relative; width: 100%; height: 286px; cursor: pointer; overflow: hidden; } #one-dom-container .one-navigation-item.st2 { height: 100%; } #one-dom-container .one-navigation-info { position: absolute; top: 12px; left: 12px; } #one-dom-container .one-navigation-info .color1 { color: #fff !important; } #one-dom-container .one-navigation-info .color2 { color: #3C3422 !important; opacity: 0.6; } #one-dom-container .one-navigation-info .color3 { color: #F9F7F1 !important; opacity: 0.7; } #one-dom-container .one-navigation-title { position: absolute; bottom: 12px; left: 12px; z-index: 2; opacity: 0; transition: all 0.3s; } #one-dom-container .one-navigation-item:hover .one-navigation-title { opacity: 0.95; } #one-dom-container .one-navigation-icon { position: absolute; bottom: 12px; right: 12px; width: 20px; opacity: 0; transition: all 0.3s; } #one-dom-container .one-navigation-item:hover .one-navigation-icon { opacity: 1; } /* tvc */ #one-dom-container .one-tvc-video { height: 738px; } #one-dom-container .one-tvc-play-btn { z-index: 20; cursor: pointer; width: 100%; height: 100%; } #one-dom-container .one-tvc-play-btn img { width: 52px; height: 52px; transition: all 0.5s; } #one-dom-container .one-tvc-play-btn:hover img { width: 70px; height: 70px; } #one-dom-container .one-tvc-popup { visibility: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; overflow: auto; background-color: transparent; overflow: hidden; } #one-dom-container .one-tvc-popup-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; } #one-dom-container .one-popup-close-btn { position: absolute; top: 32px; right: 32px; width: 32px; height: 32px; z-index: 9999; cursor: pointer; } #one-dom-container .one-tvc-video-div { width: 100%; height: 100%; justify-content: center; align-items: center; } #one-dom-container .one-tvc-video-div video { width: 70vw; clip-path: inset(1px 1px 1px 1px); } /* color */ #one-dom-container .one-color-swiper { width: 100%; height: 560px; } #one-dom-container .one-color-swiper-item { width: 100%; height: 100%; background: #FFF; overflow: hidden; justify-content: space-between; } #one-dom-container .one-color-img { width: 982px; height: 100%; position: relative; } #one-dom-container .one-color-info { width: 306px; } #one-dom-container .one-color-img2 { width: 306px; height: 280px; position: relative; margin-bottom: 20px; } #one-dom-container .one-color-swiper-item .one-title { width: 568px; } #one-dom-container .one-color-btn-div { position: absolute; bottom: 0; left: 1006px; z-index: 2; } #one-dom-container .one-color-btn { margin-right: 20px; cursor: pointer; align-items: center; opacity: 0.7; } #one-dom-container .one-color-btn.active { opacity: 1; } #one-dom-container .one-color-btn svg { width: 30px; height: 30px; margin-bottom: 8px; } #one-dom-container .one-color-circle { fill: none; stroke-width: 2px; stroke-dasharray: 94px; stroke-dashoffset: 94px; } #one-dom-container .one-color-btn.active .one-color-circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-out; } /* designdetail */ #one-dom-container .one-designdetail-list { justify-content: space-between; } #one-dom-container .one-designdetail-item { position: relative; width: 652px; height: 560px; } #one-dom-container .one-designdetail-item .one-title { position: absolute; top: 24px; left: 24px; } /* osTitle */ #one-dom-container .one-osTitle-content svg { height: 80px; margin-bottom: 24px; } /* engine */ #one-dom-container .one-engine-content { width: 100%; background: linear-gradient(0deg, #091420 0%, #091420 100%), #000; } #one-dom-container .one-engine-top { width: 100%; height: 42.5em; position: relative; } #one-dom-container .one-engine-txt { top: 0; width: 100%; height: 34em; } #one-dom-container .one-engine-detaildiv { margin-top: -170px; height: 600px; } #one-dom-container .one-engine-imgdiv { width: 50%; height: 100%; position: relative; } #one-dom-container .one-engine-right { width: 50%; height: 100%; background-color: #000; padding: 48px; justify-content: space-between; } #one-dom-container .one-engine-svg { width: 100%; } /* smooth */ #one-dom-container .one-smooth-section { background: linear-gradient(180deg, #091420 0%, #000 100%) !important; } #one-dom-container .one-smooth-item1 { width: 100%; height: 500px; margin-top: 48px; position: relative; } #one-dom-container .one-smooth-item1 .one-title { left: 40px; } #one-dom-container .one-smooth-item2 { width: 100%; height: 600px; margin-top: 8px; padding: 40px; position: relative; background: linear-gradient(112deg, #1A1A1A 9.49%, #3A3A3A 93.07%), linear-gradient(155deg, #F4F4F4 10.75%, #79766B 109.47%), #121212; justify-content: space-between; } #one-dom-container .one-smooth-txt { width: 392px; height: 100%; position: relative; justify-content: space-between; } #one-dom-container .one-smooth-infolist { justify-content: space-between; } #one-dom-container .one-smooth-info { width: 194px; border-radius: 8px; background: rgba(0, 0, 0, 0.30); padding: 20px; } #one-dom-container .one-smooth-swiperdiv { width: 630px; margin-right: 62px; height: 100%; overflow: hidden; position: relative; } #one-dom-container .one-smooth-swiper { width: 100%; height: 440px; } #one-dom-container .one-smooth-swiper .swiper-wrapper { transform: none !important; /* position: relative !important; */ } #one-dom-container .one-smooth-swiper .swiper-slide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; opacity: 0.4; } #one-dom-container .one-smooth-swiper img { width: 170px; transition: all 0.3s; } #one-dom-container .one-smooth-swiper .swiper-slide-active img { width: 210px; } #one-dom-container .one-smooth-swiper .swiper-slide-active { opacity: 1; } #one-dom-container .one-smooth-swiper .swiper-slide.right { margin-left: 230px; } #one-dom-container .one-smooth-swiper .swiper-slide.left { margin-left: -230px; } #one-dom-container .one-smooth-swiper-button-div { align-items: center; bottom: 0; z-index: 2; } #one-dom-container .one-smooth-swiper-numdiv { margin: 0 12px; } #one-dom-container .one-smooth-swiper-button { opacity: 0.8; cursor: pointer; width: 32px; height: 32px; border-radius: 100%; } #one-dom-container .one-smooth-swiper-button svg { width: 100%; height: 100%; } #one-dom-container .one-smooth-swiper-button-prev { transform: rotate(180deg); } #one-dom-container .one-smooth-swiper-button:hover { opacity: 1; } /* smoothauth */ #one-dom-container .one-smoothauth-list { justify-content: space-between; margin-top: 48px; } #one-dom-container .one-smoothauth-item { width: 652px; height: 300px; position: relative; background: #121212; } #one-dom-container .one-smoothauth-img1 { height: 152px; } #one-dom-container .one-smoothauth-img2 { height: 183px; } /* smoothhightemp */ #one-dom-container .one-smoothhightemp-content { justify-content: space-between; height: 490px; } #one-dom-container .one-smoothhightemp-imgdiv { width: 762px; height: 100%; position: relative; } #one-dom-container .one-smoothhightemp-right { width: 542px; height: 100%; justify-content: space-between; } #one-dom-container .one-smoothhightemp-infodiv { width: 100%; height: 92px; align-items: center; } #one-dom-container .one-smoothhightemp-info1 { width: 274px; height: 100%; justify-content: center; align-items: center; border-radius: 8px; background: #1A1A1A; padding: 16px 20px; } #one-dom-container .one-smoothhightemp-info1 img { width: 192px; } #one-dom-container .one-smoothhightemp-info2 { margin-left: 8px; width: 260px; height: 100%; border-radius: 8px; background: #1A1A1A; padding: 16px 20px; justify-content: center; } /* durableTitle */ #one-dom-container .one-durableTitle-section { padding-bottom: 184px; background: linear-gradient(90deg, #EAEAE6 0%, #B2B1AA 100%), #FFF !important; } #one-dom-container .one-durableTitle-play-btn { margin-top: 4px; justify-content: center; align-items: center; cursor: pointer; } #one-dom-container .one-durableTitle-play-btn span { border-bottom: 1px solid #000; } #one-dom-container .one-durableTitle-play-btn svg { width: 32px; height: 32px; margin-left: 8px; } #one-dom-container .one-durableTitle-popup { visibility: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; overflow: auto; background-color: transparent; overflow: hidden; } #one-dom-container .one-durableTitle-popup-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; } #one-dom-container .one-popup-close-btn { position: absolute; top: 32px; right: 32px; width: 32px; height: 32px; z-index: 9999; cursor: pointer; } #one-dom-container .one-durableTitle-video-div { width: 100%; height: 100%; justify-content: center; align-items: center; } #one-dom-container .one-durableTitle-video-div video { width: 70vw; clip-path: inset(1px 1px 1px 1px); } /* battery */ #one-dom-container .one-battery-section { background: linear-gradient(90deg, #EAEAE6 0%, #B2B1AA 100%), #FFF !important; } #one-dom-container .one-battery-content { height: 620px; width: 100%; } #one-dom-container .one-battery-txt1 { width: 322px; left: 0; } #one-dom-container .one-battery-imgdiv { width: 542px; height: 620px; left: 330px; } #one-dom-container .one-battery-imgdiv img { position: absolute; top: 0; left: 0; } #one-dom-container .one-battery-img1 { z-index: 1; } #one-dom-container .one-battery-img2 { z-index: 2; } #one-dom-container .one-battery-img3 { z-index: 3; } #one-dom-container .one-battery-img4 { z-index: 4; } #one-dom-container .one-battery-txt2 { width: 432px; left: 880px; } #one-dom-container .one-battery-infodiv { width: 100%; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-battery-info { width: calc(50% - 4px); padding: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.20); margin-bottom: 8px; } #one-dom-container .one-battery-txt2 .one-battery-info:nth-of-type(1) { width: 232px; } #one-dom-container .one-battery-txt2 .one-battery-info:nth-of-type(2) { width: 192px; } #one-dom-container .one-battery-txt2 .one-battery-info:nth-of-type(3) { width: 100%; } #one-dom-container .one-battery-info svg { width: 30px; height: 30px; margin-right: 8px; } #one-dom-container .one-battery-txt3 { width: 652px; height: 460px; left: 935px; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-battery-txt3 .one-battery-info:last-of-type { width: 100%; } /* waterproof */ #one-dom-container .one-waterproof-content { height: 720px; justify-content: space-between; } #one-dom-container .one-waterproof-left { padding: 80px 0; width: 432px; height: 100%; justify-content: space-between; } #one-dom-container .one-waterproof-p1 { width: 360px; } #one-dom-container .one-waterproof-info { padding: 16px 20px; border-radius: 8px; background: #F6F6F6; margin-top: 8px; width: 322px; } #one-dom-container .one-waterproof-info-txt { width: 218px; } #one-dom-container .one-waterproof-info svg { width: 52px; margin-right: 12px; } #one-dom-container .one-waterproof-imgdiv { width: 872px; height: 100%; } /* waterproofinfo */ #one-dom-container .one-waterproofinfo-list { justify-content: space-between; } #one-dom-container .one-waterproofinfo-item { position: relative; width: 652px; height: 450px; } #one-dom-container .one-waterproofinfo-title { position: absolute; top: 24px; left: 24px; } /* dropproof */ #one-dom-container .one-dropproof-contentdiv { background-color: #000; position: relative; } #one-dom-container .one-dropproof-content { height: 100%; z-index: 2; } #one-dom-container .one-dropproof-left { padding: 80px 0; width: 542px; height: 100%; justify-content: space-between; } #one-dom-container .one-dropproof-test { margin-top: 12px; width: 212px; height: 67px; border-radius: 8px; background: rgba(255, 255, 255, 0.30); align-items: center; justify-content: center; } #one-dom-container .one-dropproof-test img { width: 52px; margin-right: 8px; } #one-dom-container .one-dropproof-infolist { width: 100%; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-dropproof-info { width: 175.333px; height: 60px; padding: 0 20px; border-radius: 8px; background: rgba(255, 255, 255, 0.30); margin-top: 8px; align-items: center; } #one-dom-container .one-dropproof-info.st2 { width: 100%; padding: 0; justify-content: space-between; } #one-dom-container .one-dropproof-info2 { width: 175.333px; height: 100%; padding: 0 20px; align-items: center; } #one-dom-container .one-dropproof-line { width: 1px; height: 26px; background: #EBEBEB; } #one-dom-container .one-dropproof-info img { width: 36px; margin-right: 8px; } #one-dom-container .one-dropproof-imgdiv { width: 100%; height: 28.5em; z-index: 1; } /* dropproofinfo */ #one-dom-container .one-dropproofinfo-list { justify-content: space-between; } #one-dom-container .one-dropproofinfo-item { position: relative; width: 652px; } #one-dom-container .one-dropproofinfo-item img { margin-top: 20px; width: 100%; height: 480px; } /* qatest */ #one-dom-container .one-qatest-title { align-items: center; } #one-dom-container .one-qatest-icon { height: 122px; width: 122px; margin-right: 16px; } #one-dom-container .one-qatest-list { margin-top: 15px; justify-content: space-between; flex-wrap: wrap; } #one-dom-container .one-qatest-item { height: 220px; width: 322px; position: relative; } #one-dom-container .one-qatest-item.m { margin-bottom: 8px; width: 432px; } #one-dom-container .one-qatest-item .one-title { white-space: nowrap; } /* signal */ #one-dom-container .one-signal-btn-div { width: 700px; height: 52px; border-radius: 100px; background: #1A1A1A; align-items: center; box-shadow: 5px 7px 11px 0 rgba(0, 0, 0, 0.10) inset; position: relative; } #one-dom-container .one-signal-btn { width: 233px; height: 100%; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 3; } #one-dom-container .one-signal-btn-bg { position: absolute; top: 0; left: 0; height: 100%; width: 233px; z-index: 2; transition: all 0.1s; } #one-dom-container .one-signal-swiper { margin-top: 18px; width: 100%; height: 650px; } #one-dom-container .one-signal-swiper .swiper-slide { background-color: #121212; } #one-dom-container .one-signal-imgdiv { width: 100%; height: 100%; position: absolute; left: -100%; top: 0; } #one-dom-container .one-signal-imgdiv.index1 { background: linear-gradient(171deg, #FCFCFB 6.74%, #B0AEA8 98.67%); } #one-dom-container .one-signal-imgdiv.index2, #one-dom-container .one-signal-imgdiv.index3 { background: linear-gradient(161deg, #494949 10.6%, #1B1B1B 94.79%); } #one-dom-container .one-signal-img1 { height: 530px; } #one-dom-container .one-signal-img2, #one-dom-container .one-signal-img3 { height: 500px; top: 60px; } #one-dom-container .one-signal-icondiv { position: absolute; bottom: 20px; left: 20px; z-index: 2; padding: 8px 20px; align-items: center; border-radius: 8px; background-color: #1A1A1A; } #one-dom-container .one-signal-icondiv.wt { background: #EBEBEB; } #one-dom-container .one-signal-icondiv img { height: 32px; margin-right: 8px; } #one-dom-container .one-signal-right { padding: 48px; width: 50%; height: 100%; justify-content: space-between; position: absolute; right: 0; top: 0; } #one-dom-container .one-signal-right .one-title .one-pc-flexRow { align-items: center; } #one-dom-container .one-signal-txlogo { height: 24px; margin-right: 4px; } #one-dom-container .one-signal-infodiv { width: 100%; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-signal-info { width: 100%; padding: 16px 20px; border-radius: 8px; background: #000; margin-top: 8px; align-items: center; } #one-dom-container .one-signal-info.st2 { width: calc(50% - 4px); } #one-dom-container .one-signal-info.st3 { width: 33.333333%; height: 180px; margin-top: 0; padding: 0; position: relative; } #one-dom-container .one-signal-info.st3 .one-title { width: 100%; } #one-dom-container .one-signal-info svg { width: 40px; margin-right: 8px; } #one-dom-container .one-signal-swiper-pagediv { margin-top: 20px; justify-content: center; } #one-dom-container .one-signal-swiper-page { margin-left: 20px; width: 14px; height: 14px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.40); cursor: pointer; } #one-dom-container .one-signal-swiper-page:first-of-type { margin-left: 0; } #one-dom-container .one-signal-swiper-page.active { background-color: #FFF; } /* positioning */ #one-dom-container .one-positioning-list { margin-top: 48px; justify-content: space-between; flex-wrap: wrap; } #one-dom-container .one-positioning-item { width: 652px; height: 450px; position: relative; margin-bottom: 8px; } #one-dom-container .one-positioning-title { width: calc(100% - 40px); bottom: 20px; padding: 16px 20px; border-radius: 12px; background: rgba(0, 0, 0, 0.70); backdrop-filter: blur(20px); align-items: center; justify-content: space-between; z-index: 2; } #one-dom-container .one-positioning-title .tx { margin-left: 8px; } #one-dom-container .one-positioning-txlogo { height: 60px; } /* chip */ #one-dom-container .one-chip-section { background: linear-gradient(180deg, #000 0%, #2E2E2E 100%), #000 !important; } #one-dom-container .one-chip-content { height: 570px; justify-content: space-between; } #one-dom-container .one-chip-left { width: 542px; height: 100%; justify-content: space-between; position: relative; } #one-dom-container .one-chip-infodiv { width: 100%; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-chip-info { width: 175px; border-radius: 8px; background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(10px); padding: 20px; margin-top: 8px; } #one-dom-container .one-chip-info.st2 { width: 359px; } #one-dom-container .one-chip-imgdiv { width: 762px; height: 570px; } /* screen */ #one-dom-container .one-screen-content { height: 460px; width: 100%; } #one-dom-container .one-screen-txt1 { top: 0; width: 100%; } #one-dom-container .one-screen-imgdiv { top: 158px; width: 1000px; height: 460px; } #one-dom-container .one-screen-img2 { width: 100%; } #one-dom-container .one-screen-img3 { width: 918px; top: 41.5px; } #one-dom-container .one-screen-txt2, #one-dom-container .one-screen-txt3 { bottom: 0; width: 100%; justify-content: space-between; align-items: center; } #one-dom-container .one-screen-txt2 .one-title { width: 253px; padding: 20px; border-radius: 8px; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); } #one-dom-container .one-screen-txt2 .one-title:last-of-type { width: 270px; } #one-dom-container .one-screen-txt3-info .one-title { margin-left: 8px; width: 267px; padding: 20px 16px; border-radius: 8px; background: #1A1A1A; } /* outdoor */ #one-dom-container .one-outdoor-content { height: 700px; } #one-dom-container .one-outdoor-left { width: 50%; height: 100%; position: relative; } #one-dom-container .one-outdoor-swiper { width: 100%; height: 100%; } #one-dom-container .one-outdoor-btn-div { bottom: 20px; z-index: 2; width: fit-content; height: fit-content; border-radius: 100px; background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(10px); padding: 4px; align-items: center; } #one-dom-container .one-outdoor-btn { cursor: pointer; padding: 4px 20px; border-radius: 100px; text-wrap: nowrap; } #one-dom-container .one-outdoor-btn.active { background: #000; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06); } #one-dom-container .one-outdoor-right { width: 50%; height: 100%; padding: 48px; justify-content: space-between; background: #121212; } #one-dom-container .one-outdoor-infodiv { justify-content: space-between; flex-wrap: wrap; } #one-dom-container .one-outdoor-info { width: 272px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.30); } /* trip */ #one-dom-container .one-trip-content { background-color: #121212; height: 650px; } #one-dom-container .one-trip-left { padding: 64px 48px; width: 50%; height: 100%; justify-content: space-between; } #one-dom-container .one-trip-drawer { width: 100%; } #one-dom-container .one-trip-drawer-item { cursor: pointer; opacity: 0.8; position: relative; margin-bottom: 4px; padding: 20px; background: #201F1C; border-radius: 16px; } #one-dom-container .one-trip-drawer-item:hover { opacity: 1; } #one-dom-container .one-trip-drawer-item.active { opacity: 1; background: #484540; } #one-dom-container .one-trip-drawer-item img { opacity: 1; width: 28px; right: 20px; transition: all 0.2s; } #one-dom-container .one-trip-drawer-item.active img { opacity: 0; } #one-dom-container .one-trip-drawer-block { position: absolute; left: -2px; width: 2px; height: 82px; background-color: #000; } #one-dom-container .one-trip-drawer-item .desc { box-sizing: border-box; overflow: hidden; padding-right: 1.5em; height: 0; transition: all 0.5s; } #one-dom-container .one-trip-drawer-item .desc p { padding-top: 12px; } #one-dom-container .one-trip-drawer-item:first-child .desc { height: auto; } #one-dom-container .one-trip-right { width: 50%; height: 100%; position: absolute; right: 0; top: 0; overflow: hidden; } #one-dom-container .one-tripinternal-swiperdiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; } #one-dom-container .one-tripinternal-swiperdiv.active { z-index: 2; opacity: 1; } #one-dom-container .one-tripinternal-swiper { width: 100%; height: 100%; } #one-dom-container .one-tripinternal-swiper .swiper-slide { background: linear-gradient(161deg, #494949 10.6%, #1B1B1B 94.79%); } #one-dom-container .one-trip-img { height: 540px; top: 40px; } #one-dom-container .one-tripinternal-swiper-button-div { align-items: center; bottom: 20px; z-index: 2; } #one-dom-container .one-tripinternal-swiper-numdiv { margin: 0 12px; } #one-dom-container .one-tripinternal-swiper-button { opacity: 0.8; cursor: pointer; width: 32px; height: 32px; border-radius: 100%; } #one-dom-container .one-tripinternal-swiper-button svg { width: 100%; height: 100%; } #one-dom-container .one-tripinternal-swiper-button-prev { transform: rotate(180deg); } #one-dom-container .one-tripinternal-swiper-button:hover { opacity: 1; } #one-dom-container .one-tripinternal-swiper-button.swiper-button-disabled { opacity: 0.3; cursor: auto; } /* experience */ #one-dom-container .one-experience-list { justify-content: space-between; } #one-dom-container .one-experience-item { position: relative; width: 652px; background: #121212; } #one-dom-container .one-experience-item .one-title { padding: 24px 48px; } #one-dom-container .one-experience-img { width: 100%; height: 508px; position: relative; } #one-dom-container .one-experience-infodiv { width: 612px !important; height: 72px; bottom: 20px; justify-content: space-between; } #one-dom-container .one-experience-info { border-radius: 8px; background: rgba(0, 0, 0, 0.70); backdrop-filter: blur(15px); align-items: center; padding: 12px 16px; width: 302px; } /* simple */ #one-dom-container .one-simple-content { justify-content: space-between; } #one-dom-container .one-simple-imgdiv { width: 770px; height: 460px; justify-content: space-between; position: relative; overflow: hidden; } #one-dom-container .one-simple-info { width: 494px; } #one-dom-container .one-simple-img { width: 381px; height: 100%; position: relative; overflow: hidden; } #one-dom-container .one-simple-icon { position: absolute; top: 12px; left: 12px; height: 24px; } /* photosimple */ #one-dom-container .one-photosimple-list { justify-content: space-between; } #one-dom-container .one-photosimple-item { position: relative; width: 608px; } #one-dom-container .one-photosimple-item.st2 { width: 344px; } #one-dom-container .one-photosimple-item img { margin-bottom: 8px; width: 100%; height: 456px; } /* aiphoto */ #one-dom-container .one-aiphoto-content { justify-content: space-between; } #one-dom-container .one-aiphoto-left { width: 384px; justify-content: space-between; } #one-dom-container .one-aiphoto-imglist { width: 880px; height: 540px; justify-content: space-between; position: relative; } #one-dom-container .one-aiphoto-imgdiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: space-between; } #one-dom-container .one-aiphoto-imgdiv:not(.active) { display: none !important; } #one-dom-container .one-aiphoto-img { width: 436px; height: 540px; position: relative; } #one-dom-container .one-aiphoto-imgdiv-item { height: 100%; justify-content: space-between; } #one-dom-container .one-aiphoto-imgdiv-item .one-aiphoto-img { height: 266px; } .one-aiphoto-img-tag { bottom: 20px; z-index: 10; border-radius: 999px; padding: 6px 12px; background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(15px); } #one-dom-container .one-aiphoto-drawer { width: 100%; position: relative; overflow: visible; border-left: 2px solid rgba(0, 0, 0, 0.30); padding-left: 20px; } #one-dom-container .one-aiphoto-drawer-item { cursor: pointer; height: 58px; opacity: 0.3; position: relative; margin-bottom: 2px; justify-content: center; } #one-dom-container .one-aiphoto-drawer-item:hover { opacity: 0.7; } #one-dom-container .one-aiphoto-drawer-item.active { opacity: 1; } #one-dom-container .one-aiphoto-drawer-block { position: absolute; left: -2px; width: 2px; height: 82px; background-color: #000; } #one-dom-container .one-aiphoto-drawer-item .desc { box-sizing: border-box; overflow: hidden; padding-right: 1.5em; height: 0; } #one-dom-container .one-aiphoto-drawer-item .desc p { padding-top: 4px; } #one-dom-container .one-aiphoto-drawer-item:first-child .desc { height: auto; } /* guard */ #one-dom-container .one-guard-title { text-align: center; width: 100%; } #one-dom-container .one-guard-content { height: 570px; background: #F6F6F6; margin-top: 48px; } #one-dom-container .one-guard-left { width: 50%; height: 100%; position: relative; } #one-dom-container .one-guard-swiper { width: 100%; height: 100%; } #one-dom-container .one-guard-swiper .swiper-slide { background: linear-gradient(171deg, #F8F8F6 6.74%, #BDBBB6 98.67%); } #one-dom-container .one-guard-btn-div { bottom: 20px; z-index: 2; width: fit-content; height: fit-content; border-radius: 100px; background: rgba(0, 0, 0, 0.08); backdrop-filter: blur(10px); padding: 4px; align-items: center; } #one-dom-container .one-guard-btn { cursor: pointer; padding: 4px 20px; border-radius: 100px; white-space: noWrap; } #one-dom-container .one-guard-btn.active { background: #FFF; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06); } #one-dom-container .one-guard-right { width: 50%; height: 100%; padding: 48px; justify-content: space-between; } #one-dom-container .one-guard-infodiv { width: 100%; } #one-dom-container .one-guard-info { margin-top: 8px; padding-top: 8px; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.30); } #one-dom-container .one-guard-info svg { height: 30px; margin-right: 12px; flex-shrink: 0; } /* notes */ #one-dom-container .one-notes-ol { margin-top: 24px; list-style: decimal; padding: 0; } #one-dom-container .one-notes-ol li { list-style: decimal; margin-left: 1.5em; } #one-dom-container .one-notes-section .st2 .one-desc { margin-left: 1.5em; } #one-dom-container .one-notes-section .st2 .one-desc::before { content: '*'; position: absolute; left: 0.5em; } #one-dom-container .one-notes-rohs { margin-top: 24px; align-items: center; } #one-dom-container .one-notes-rohs svg { width: 60px; height: 38.175px; margin-right: 6px; } #one-dom-container .one-notes-rohs p { padding-top: 10px; } #one-dom-container .replay-icon { position: absolute; bottom: 20px; right: 20px; cursor: pointer; width: 36px; display: none; } } /* one-pad.css */ @media screen and (max-width: 1439px) and (min-width: 650px) { /* kv */ #one-dom-container .one-kv-section { height: 17em; } #one-dom-container .one-kv-content { width: 100%; height: 100%; } #one-dom-container .one-kv-txt1 { top: 8.5em; left: 1.2em; position: absolute; z-index: 2; } #one-dom-container .one-kv-txt2 { top: 8.5em; right: 1.2em; position: absolute; z-index: 2; } #one-dom-container .one-kv-p1 { color: rgba(0, 0, 0, 0.95); font-size: 2.3em; line-height: 100%; } #one-dom-container .one-kv-p2 { color: rgba(0, 0, 0, 0.95); font-size: 2.3em; line-height: 100%; text-align: center; } #one-dom-container .one-kv-p3 { margin-top: 0.25333em; color: rgba(0, 0, 0, 0.95); font-size: 0.75em; line-height: 100%; text-align: center; } #one-dom-container .one-kv-remark { position: absolute; right: 1.2em; bottom: 0.95em; width: 3.7em; z-index: 2; } /* navigation */ #one-dom-container .one-navigation-section { background-color: #EBEBEB !important; } #one-dom-container .one-navigation-div { width: 100%; border-collapse: separate; border-spacing: 0.2em; margin-top: 1.2em; } #one-dom-container .one-navigation-div td { width: 11.8em; height: 8.4em; } #one-dom-container .one-navigation-item { display: block; position: relative; width: 100%; height: 100%; cursor: pointer; overflow: hidden; } #one-dom-container .one-navigation-info { position: absolute; top: 0.4em; left: 0.4em; } #one-dom-container .one-navigation-info p { font-size: 0.8em !important; } #one-dom-container .one-navigation-info .color1 { color: #fff !important; } #one-dom-container .one-navigation-info .color2 { color: #3C3422 !important; opacity: 0.6; } #one-dom-container .one-navigation-info .color3 { color: #F9F7F1 !important; opacity: 0.7; } #one-dom-container .one-navigation-title { position: absolute; bottom: 0.4em; left: 0.4em; z-index: 2; opacity: 0.95; } #one-dom-container .one-navigation-title p { font-size: 0.7em !important; } #one-dom-container .one-navigation-icon { position: absolute; bottom: 0.4em; right: 0.4em; width: 0.6em; } /* tvc */ #one-dom-container .one-tvc-videoview { height: 20.25em; } #one-dom-container .one-tvc-play-btn { z-index: 20; cursor: pointer; width: 100%; height: 100%; } #one-dom-container .one-tvc-play-btn img { width: 1.6em; height: 1.6em; transition: all 0.5s; } #one-dom-container .one-tvc-play-btn:hover img { width: 2em; height: 2em; } #one-dom-container .one-tvc-popup { visibility: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; overflow: auto; background-color: transparent; overflow: hidden; } #one-dom-container .one-tvc-popup-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; } #one-dom-container .one-popup-close-btn { position: absolute; top: 32px; right: 32px; width: 32px; height: 32px; z-index: 9999; cursor: pointer; } #one-dom-container .one-tvc-video-div { width: 100%; height: 100%; justify-content: center; align-items: center; } #one-dom-container .one-tvc-video-div video { width: 70vw; clip-path: inset(1px 1px 1px 1px); } /* color */ #one-dom-container .one-color-swiper { width: 100%; height: 18em; } #one-dom-container .one-color-swiper-item { width: 100%; height: 100%; background: #FFF; overflow: hidden; justify-content: space-between; } #one-dom-container .one-color-img { width: 26.05em; height: 100%; position: relative; } #one-dom-container .one-color-info { width: 9.05em; } #one-dom-container .one-color-img2 { display: block; width: 100%; height: 8.3em; position: relative; margin-bottom: 0.8em; } #one-dom-container .one-color-btn-div { position: absolute; bottom: 0; left: 26.95em; width: 9.05em; justify-content: space-between; z-index: 2; } #one-dom-container .one-color-btn { cursor: pointer; align-items: center; opacity: 0.7; } #one-dom-container .one-color-btn.active { opacity: 1; } #one-dom-container .one-color-btn svg { width: 1.5em; height: 1.5em; margin-bottom: 0.2em; } #one-dom-container .one-color-circle { fill: none; stroke-width: 2px; stroke-dasharray: 94px; stroke-dashoffset: 94px; } #one-dom-container .one-color-btn.active .one-color-circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-out; } #one-dom-container .one-color-btn p { font-size: 0.7em !important; } /* designdetail */ #one-dom-container .one-designdetail-list { justify-content: space-between; } #one-dom-container .one-designdetail-item { position: relative; width: 17.9em; height: 15.4em; } #one-dom-container .one-designdetail-item .one-title { position: absolute; top: 0.6em; left: 0.6em; } /* osTitle */ #one-dom-container .one-osTitle-content svg { height: 2.25em; margin-bottom: 0.9em; } /* engine */ #one-dom-container .one-engine-content { width: 100%; background: linear-gradient(0deg, #091420 0%, #091420 100%), #000; } #one-dom-container .one-engine-top { width: 100%; height: 22.65em; position: relative; } #one-dom-container .one-engine-txt { top: 0; width: 100%; height: 18.5em; } #one-dom-container .one-engine-txt div { width: 100%; } #one-dom-container .one-engine-detaildiv { margin-top: -5.15em; } #one-dom-container .one-engine-imgdiv { width: 100%; height: 20em; position: relative; } #one-dom-container .one-engine-video { width: 100%; height: 100%; } #one-dom-container .one-engine-right { width: 100%; background-color: #000; padding: 1.2em; justify-content: space-between; align-items: center; } #one-dom-container .one-engine-right .one-title { width: 14.4em; } #one-dom-container .one-engine-svg { width: 18.45em; } /* smooth */ #one-dom-container .one-smooth-section { background: linear-gradient(180deg, #091420 0%, #000 100%) !important; } #one-dom-container .one-smooth-item1 { width: 100%; padding: 1em 1em 0.5em 1em; margin-top: 1.2em; position: relative; background: linear-gradient(130deg, #191C1F 4.96%, #333 98.23%); align-items: center; } #one-dom-container .one-smooth-imgdiv1 { margin-top: 0.6em; position: relative; width: 14em; height: 12.5em; } #one-dom-container .one-smooth-item2 { margin-top: 0.2em; width: 100%; padding: 1em; position: relative; align-items: center; background: linear-gradient(112deg, #1A1A1A 9.49%, #3A3A3A 93.07%), linear-gradient(155deg, #F4F4F4 10.75%, #79766B 109.47%), #121212; } #one-dom-container .one-smooth-txt { width: 100%; } #one-dom-container .one-smooth-infolist { justify-content: center; margin-top: 0.8em; } #one-dom-container .one-smooth-info:first-of-type { margin-right: 0.2em; } #one-dom-container .one-smooth-info { border-radius: 4px; background: rgba(0, 0, 0, 0.30); padding: 0.6em 0.8em; } #one-dom-container .one-smooth-info .one-title { flex-direction: row; align-items: end; } #one-dom-container .one-smooth-info .one-title .one-b3 { margin-right: 4px; } #one-dom-container .one-smooth-swiperdiv { margin-top: 0.8em; width: 18.63em; overflow: hidden; position: relative; align-items: center; } #one-dom-container .one-smooth-swiper { width: 100%; height: 13em; } #one-dom-container .one-smooth-swiper .swiper-wrapper { transform: none !important; /* position: relative !important; */ } #one-dom-container .one-smooth-swiper .swiper-slide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; opacity: 0.4; } #one-dom-container .one-smooth-swiper img { width: 4.8em; transition: all 0.3s; } #one-dom-container .one-smooth-swiper .swiper-slide-active img { width: 6.21em; } #one-dom-container .one-smooth-swiper .swiper-slide-active { opacity: 1; } #one-dom-container .one-smooth-swiper .swiper-slide.right { margin-left: 6.5em; } #one-dom-container .one-smooth-swiper .swiper-slide.left { margin-left: -6.5em; } #one-dom-container .one-smooth-swiper-button-div { margin-top: 0.8em; align-items: center; bottom: 0; z-index: 2; } #one-dom-container .one-smooth-swiper-numdiv { margin: 0 12px; } #one-dom-container .one-smooth-swiper-button { opacity: 0.8; cursor: pointer; width: 32px; height: 32px; border-radius: 100%; } #one-dom-container .one-smooth-swiper-button svg { width: 100%; height: 100%; } #one-dom-container .one-smooth-swiper-button-prev { transform: rotate(180deg); } #one-dom-container .one-smooth-swiper-button:hover { opacity: 1; } /* smoothauth */ #one-dom-container .one-smoothauth-list { justify-content: space-between; margin-top: 1.2em; } #one-dom-container .one-smoothauth-item { width: 17.9em; height: 8.2em; position: relative; background: #121212; } #one-dom-container .one-smoothauth-img1 { height: 4.2em; } #one-dom-container .one-smoothauth-img2 { height: 5.15em; } /* smoothhightemp */ #one-dom-container .one-smoothhightemp-content { justify-content: space-between; height: 14em; } #one-dom-container .one-smoothhightemp-imgdiv { width: 22.4em; height: 100%; position: relative; } #one-dom-container .one-smoothhightemp-right { width: 13.3em; height: 100%; justify-content: space-between; } #one-dom-container .one-smoothhightemp-infodiv { width: 100%; } #one-dom-container .one-smoothhightemp-info1, #one-dom-container .one-smoothhightemp-info2 { justify-content: center; border-radius: 4px; background: #1A1A1A; padding: 0.4em 0.6em; margin-top: 0.2em; align-items: center; width: 100%; } #one-dom-container .one-smoothhightemp-info1 img { height: 2.21405em; } /* durableTitle */ #one-dom-container .one-durableTitle-section { background: linear-gradient(90deg, #EAEAE6 0%, #B2B1AA 100%), #FFF !important; } #one-dom-container .one-durableTitle-play-btn { margin-top: 4px; justify-content: center; align-items: center; cursor: pointer; } #one-dom-container .one-durableTitle-play-btn span { border-bottom: 1px solid #000; } #one-dom-container .one-durableTitle-play-btn svg { width: 1.6em; height: 1.6em; margin-left: 8px; } #one-dom-container .one-durableTitle-popup { visibility: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; overflow: auto; background-color: transparent; overflow: hidden; } #one-dom-container .one-durableTitle-popup-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; } #one-dom-container .one-popup-close-btn { position: absolute; top: 32px; right: 32px; width: 32px; height: 32px; z-index: 9999; cursor: pointer; } #one-dom-container .one-durableTitle-video-div { width: 100%; height: 100%; justify-content: center; align-items: center; } #one-dom-container .one-durableTitle-video-div video { width: 70vw; clip-path: inset(1px 1px 1px 1px); } /* battery */ #one-dom-container .one-battery-section { background: linear-gradient(90deg, #EAEAE6 0%, #B2B1AA 100%), #FFF !important; } #one-dom-container .one-battery-content { width: 100%; } #one-dom-container .one-battery-img1 { margin-top: 1.2em; width: 100%; width: 15em; height: 13.7em; } #one-dom-container .one-battery-txt2 { margin-top: 1.2em; } #one-dom-container .one-battery-infodiv { flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-battery-info { width: 100%; padding: 0.6em; border-radius: 0.2em; background: rgba(255, 255, 255, 0.20); } #one-dom-container .one-battery-info { width: 17.9em; margin-bottom: 0.2em; } #one-dom-container .one-battery-txt3 .one-battery-info { backdrop-filter: blur(10px); } #one-dom-container .one-battery-info:last-of-type { width: 100%; } #one-dom-container .one-battery-info svg { width: 1.5em; height: 1.5em; margin-right: 0.2em; } #one-dom-container .one-battery-txt3 { margin-top: 2.4em; } #one-dom-container .one-battery-img2 { margin-top: 1.2em; width: 16.4em; height: 20.4em; } #one-dom-container .one-battery-txt3 .one-battery-infodiv { margin-top: -1.7em; position: relative; z-index: 2; } /* waterproof */ #one-dom-container .one-waterproof-content { position: relative; } #one-dom-container .one-waterproof-left .one-title { height: 21em; justify-content: center; } #one-dom-container .one-waterproof-p1 { width: 290px; } #one-dom-container .one-waterproof-infodiv { flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-waterproof-info { width: 17.9em; padding: 0.4em; border-radius: 4px; background: rgba(0, 0, 0, 0.08); margin-bottom: 0.2em; } #one-dom-container .one-waterproof-info:last-of-type { width: 100%; margin-bottom: 0; } #one-dom-container .one-waterproof-info svg { width: 2em; margin-right: 0.4em; } #one-dom-container .one-waterproof-imgdiv { position: absolute; width: 20.4em; height: 21em; top: 0; right: 0; } /* waterproofinfo */ #one-dom-container .one-waterproofinfo-list { justify-content: space-between; } #one-dom-container .one-waterproofinfo-item { position: relative; width: 17.9em; height: 12.35em; } #one-dom-container .one-waterproofinfo-title { position: absolute; top: 0.6em; left: 0.6em; } /* dropproof */ #one-dom-container .one-dropproof-contentdiv { background-color: #000; position: relative; } #one-dom-container .one-dropproof-content { height: 100%; z-index: 2; } #one-dom-container .one-dropproof-left { padding: 2.4em 0; width: 100%; height: 100%; justify-content: space-between; } #one-dom-container .one-dropproof-test { margin-top: 0.4em; padding: 0.2em; border-radius: 4px; background: rgba(255, 255, 255, 0.30); align-items: center; justify-content: center; width: fit-content; } #one-dom-container .one-dropproof-test img { width: 2.1em; margin-right: 0.2em; } #one-dom-container .one-dropproof-infolist { width: 100%; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-dropproof-info { width: 11.866666em; padding: 0.4em; border-radius: 4px; background: rgba(255, 255, 255, 0.30); margin-top: 0.2em; align-items: center; } #one-dom-container .one-dropproof-info.st2 { width: 100%; padding: 0; justify-content: space-between; } #one-dom-container .one-dropproof-info2 { width: 11.866666em; height: 100%; padding: 0.4em; align-items: center; } #one-dom-container .one-dropproof-line { width: 1px; height: calc(100% - 1em); background: #1A1A1A; } #one-dom-container .one-dropproof-info img { width: 1.5em; margin-right: 0.4em; } #one-dom-container .one-dropproof-imgdiv { width: 100%; height: 26.4em; z-index: 1; } #one-dom-container .one-dropproof-info p { color: rgba(0, 0, 0, 0.95); } /* dropproofinfo */ #one-dom-container .one-dropproofinfo-list { justify-content: space-between; } #one-dom-container .one-dropproofinfo-item { position: relative; width: 17.9em; } #one-dom-container .one-dropproofinfo-item img { margin-top: 0.8em; width: 100%; height: 13.2em; } /* qatest */ #one-dom-container .one-qatest-title { align-items: center; } #one-dom-container .one-qatest-icon { height: 76px; width: 76px; margin-right: 0.6em; } #one-dom-container .one-qatest-list { margin-top: 1.2em; justify-content: space-between; flex-wrap: wrap; } #one-dom-container .one-qatest-item { height: 6em; width: 8.85em; position: relative; } #one-dom-container .one-qatest-item.m { margin-bottom: 0.2em; width: 11.9em; } #one-dom-container .one-qatest-item .one-title { width: 7.8em; white-space: nowrap; } #one-dom-container .one-qatest-item .one-title .one-sh2 { font-size: 1em; } #one-dom-container .one-qatest-item .one-title .one-b3 { font-size: 0.6em; } /* signal */ #one-dom-container .one-signal-btn-div { width: 540px; height: 48px; border-radius: 100px; background: #1A1A1A; align-items: center; box-shadow: 5px 7px 11px 0 rgba(0, 0, 0, 0.10) inset; position: relative; } #one-dom-container .one-signal-btn { width: 180px; height: 100%; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 3; } #one-dom-container .one-signal-btn-bg { position: absolute; top: 0; left: 0; height: 100%; width: 180px; z-index: 2; transition: all 0.1s; } #one-dom-container .one-signal-swiper { margin-top: 0.8em; width: 100%; } #one-dom-container .one-signal-right { width: 100%; } #one-dom-container .one-signal-right>.one-title { flex-direction: row !important; justify-content: space-between; } #one-dom-container .one-signal-right>.one-title .one-b3 { width: 50%; margin-top: 0; } #one-dom-container .one-signal-imgdiv { margin-top: 0.8em; width: 100%; height: 19em; position: relative; } #one-dom-container .one-signal-imgdiv.index1 { background: linear-gradient(171deg, #FCFCFB 6.74%, #B0AEA8 98.67%); } #one-dom-container .one-signal-imgdiv.index2, #one-dom-container .one-signal-imgdiv.index3 { background: linear-gradient(161deg, #494949 10.6%, #1B1B1B 94.79%); } #one-dom-container .one-signal-img1 { position: absolute; top: -0.78em; right: 1.5em; height: 20.129em; z-index: 2; } #one-dom-container .one-signal-img2, #one-dom-container .one-signal-img3 { height: 16.6em; right: 2.02em; z-index: 2; } #one-dom-container .one-signal-icondiv { position: absolute; top: 0.8em; left: 0.8em; z-index: 2; padding: 0.2em 0.8em; align-items: center; border-radius: 8px; background-color: #1A1A1A; width: 185px; } #one-dom-container .one-signal-icondiv.wt { background: #EBEBEB; } #one-dom-container .one-signal-icondiv img { height: 32px; margin-right: 0.2em; } #one-dom-container .one-signal-infodiv { position: absolute; bottom: 0.8em; left: 0.8em; width: 185px; } #one-dom-container .one-signal-info { width: 100%; margin-top: 0.2em; align-items: center; } #one-dom-container .one-signal-infodiv.index1 p { color: #000; } #one-dom-container .one-signal-infodiv.index1 svg path { fill: #000; } #one-dom-container .one-signal-infodiv.index1 .one-signal-info { background: #FFF; border-radius: 4px; padding: 0.6em; } #one-dom-container .one-signal-infodiv.index2 .one-signal-info { height: 72px; position: relative; overflow: hidden; } #one-dom-container .one-signal-infodiv.index3 { width: 193px; } #one-dom-container .one-signal-infodiv.index3 .one-signal-info { background: #000; border-radius: 4px; padding: 0.8em; } #one-dom-container .one-signal-infodiv.index2 .one-title { width: 100%; } #one-dom-container .one-signal-info svg { width: 30px; margin-right: 0.4em; } #one-dom-container .one-signal-swiper-pagediv { margin-top: 0.8em; justify-content: center; } #one-dom-container .one-signal-swiper-page { margin-left: 1em; width: 0.4em; height: 0.4em; border-radius: 50%; background-color: rgba(255, 255, 255, 0.40); cursor: pointer; } #one-dom-container .one-signal-swiper-page:first-of-type { margin-left: 0; } #one-dom-container .one-signal-swiper-page.active { background-color: #FFF; } /* positioning */ #one-dom-container .one-positioning-list { margin-top: 1.2em; justify-content: space-between; flex-wrap: wrap; } #one-dom-container .one-positioning-item { width: 17.9em; position: relative; margin-bottom: 0.2em; flex-direction: column-reverse; } #one-dom-container .one-positioning-item>picture { flex-direction: column-reverse; position: relative; display: block; width: 100%; height: 12.3em; margin-bottom: 0.2em; } #one-dom-container .one-positioning-title { flex: 1; padding: 0.6em; border-radius: 8px; background: #1A1A1A; backdrop-filter: blur(20px); align-items: center; justify-content: space-between; } #one-dom-container .one-positioning-title .tx { margin-left: 8px; } #one-dom-container .one-positioning-txlogo { margin-left: 1.2em; width: 2.7em; } /* chip */ #one-dom-container .one-chip-section { background: linear-gradient(180deg, #000 0%, #2E2E2E 100%), #000 !important; } #one-dom-container .one-chip-content { justify-content: space-between; align-items: center; } #one-dom-container .one-chip-left { width: 17.9em; height: 16.6em; min-height: 332px; justify-content: space-between; position: relative; } #one-dom-container .one-chip-infodiv { width: 100%; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-chip-info { width: 8.85em; border-radius: 4px; background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(10px); padding: 0.4em 0.8em; margin-top: 0.2em; } #one-dom-container .one-chip-info.st2 { width: 100%; } #one-dom-container .one-chip-imgdiv { width: 17.9em; height: 16.6em; } /* screen */ #one-dom-container .one-screen-imgdiv1 { margin-top: 1.2em; width: 100%; height: 16.5em; } #one-dom-container .one-screen-txt2 { margin-top: -2.4em; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-screen-txt2 .one-title { width: 17.9em; padding: 0.8em; border-radius: 0.2em; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); margin-bottom: 0.2em; } #one-dom-container .one-screen-txt2 .one-title:last-of-type { width: 100%; margin-bottom: 0; } #one-dom-container .one-screen-txt3 { margin-top: 2.4em; } #one-dom-container .one-screen-imgdiv2 { margin: 1.2em 0; width: 100%; height: 7.7em; } #one-dom-container .one-screen-txt3-info { justify-content: space-between; } #one-dom-container .one-screen-txt3-info .one-title { width: 17.9em; padding: 0.8em 0.6em; border-radius: 0.2em; background: #1A1A1A; } /* outdoor */ #one-dom-container .one-outdoor-content { height: 18.65em; } #one-dom-container .one-outdoor-left { width: 50%; height: 100%; position: relative; } #one-dom-container .one-outdoor-swiper { width: 100%; height: 100%; } #one-dom-container .one-outdoor-swiper picture { display: block; position: relative; width: 100%; height: 100%; } #one-dom-container .one-outdoor-video1 { width: 100%; height: 100%; } #one-dom-container .one-outdoor-right { width: 50%; height: 100%; padding: 1.2em; justify-content: space-between; background: #121212; position: relative; } #one-dom-container .one-outdoor-infodiv-container { width: calc(100% - 2.4em); bottom: 4em; } #one-dom-container .one-outdoor-info { width: 100%; position: absolute; bottom: 0; left: 0; opacity: 0; } #one-dom-container .one-outdoor-info.active { opacity: 1; } #one-dom-container .one-outdoor-btn-div { position: absolute; left: 50%; margin-left: 1.2em; bottom: 1.2em; z-index: 9; align-items: center; } #one-dom-container .one-outdoor-swiper-button { cursor: pointer; width: 1.6em; height: 1.6em; border-radius: 100%; } #one-dom-container .one-outdoor-swiper-button svg { width: 100%; height: 100%; } #one-dom-container .one-outdoor-swiper-button-prev { transform: rotate(180deg); } #one-dom-container .one-outdoor-swiper-button.swiper-button-disabled { opacity: 0.3; cursor: auto; } #one-dom-container .one-outdoor-swiper-numdiv { margin: 0 12px } /* trip */ #one-dom-container .one-trip-content { background-color: #121212; height: 19.2em; } #one-dom-container .one-trip-left { padding: 1.2em; width: 50%; height: 100%; justify-content: space-between; } #one-dom-container .one-trip-drawer { width: 100%; } #one-dom-container .one-trip-drawer-item { cursor: pointer; opacity: 0.8; position: relative; margin-bottom: 0.2em; padding: 0.8em; background: #201F1C; border-radius: 12px; } #one-dom-container .one-trip-drawer-item.active { opacity: 1; background: #484540; } #one-dom-container .one-trip-drawer-item img { opacity: 1; width: 1.4em; right: 0.8em; transition: all 0.2s; } #one-dom-container .one-trip-drawer-item.active img { opacity: 0; } #one-dom-container .one-trip-drawer-item .desc { box-sizing: border-box; overflow: hidden; height: 0; transition: all 0.5s; } #one-dom-container .one-trip-drawer-item .desc p { padding-top: 8px; } #one-dom-container .one-trip-drawer-item:first-child .desc { height: auto; } #one-dom-container .one-trip-right { width: 50%; height: 100%; position: absolute; right: 0; top: 0; overflow: hidden; } #one-dom-container .one-tripinternal-swiperdiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; } #one-dom-container .one-tripinternal-swiperdiv.active { z-index: 2; opacity: 1; } #one-dom-container .one-tripinternal-swiper { width: 100%; height: 100%; } #one-dom-container .one-tripinternal-swiper .swiper-slide { background: linear-gradient(161deg, #494949 10.6%, #1B1B1B 94.79%); } #one-dom-container .one-trip-img { height: 14.8em; top: 1.1em; } #one-dom-container .one-tripinternal-swiper-button-div { align-items: center; bottom: 1em; z-index: 2; } #one-dom-container .one-tripinternal-swiper-numdiv { margin: 0 12px; } #one-dom-container .one-tripinternal-swiper-button { opacity: 0.8; cursor: pointer; width: 1.6em; height: 1.6em; border-radius: 100%; } #one-dom-container .one-tripinternal-swiper-button svg { width: 100%; height: 100%; } #one-dom-container .one-tripinternal-swiper-button-prev { transform: rotate(180deg); } #one-dom-container .one-tripinternal-swiper-button:hover { opacity: 1; } #one-dom-container .one-tripinternal-swiper-button.swiper-button-disabled { opacity: 0.3; cursor: auto; } /* experience */ #one-dom-container .one-experience-list { justify-content: space-between; } #one-dom-container .one-experience-item { position: relative; width: 17.9em; background: #121212; } #one-dom-container .one-experience-item .one-title { padding: 0.9em 1.2em; } #one-dom-container .one-experience-img { width: 100%; height: 13.95em; position: relative; } #one-dom-container .one-experience-infodiv { width: 16.3em !important; bottom: 0.8em; justify-content: space-between; } #one-dom-container .one-experience-info { border-radius: 4px; background: rgba(0, 0, 0, 0.70); backdrop-filter: blur(15px); align-items: center; padding: 0.4em 0.6em; width: 8.05em; } /* simple */ #one-dom-container .one-simple-content { justify-content: space-between; } #one-dom-container .one-simple-imgdiv { width: 19.2em; height: 11.5em; justify-content: space-between; position: relative; overflow: hidden; } #one-dom-container .one-simple-info { width: 15.6em; } #one-dom-container .one-simple-img { width: 9.55em; height: 100%; position: relative; overflow: hidden; } #one-dom-container .one-simple-video1, #one-dom-container .one-simple-video2 { width: 100%; height: 100%; } #one-dom-container .one-simple-icon { position: absolute; top: 0.3em; left: 0.3em; height: 1.05em; } /* photosimple */ #one-dom-container .one-photosimple-list { justify-content: space-between; } #one-dom-container .one-photosimple-item { position: relative; width: 16.7em; } #one-dom-container .one-photosimple-item.st2 { width: 9.45em; } #one-dom-container .one-photosimple-item img { margin-bottom: 0.3em; width: 100%; height: 12.5em; } /* aiphoto */ #one-dom-container .one-aiphoto-content { justify-content: space-between; } #one-dom-container .one-aiphoto-left { width: 12.8em; justify-content: space-between; } #one-dom-container .one-aiphoto-imglist { width: 22em; height: 13.5em; justify-content: space-between; position: relative; } #one-dom-container .one-aiphoto-imgdiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: space-between; } #one-dom-container .one-aiphoto-imgdiv:not(.active) { display: none !important; } #one-dom-container .one-aiphoto-img { width: 10.9em; height: 13.5em; position: relative; } #one-dom-container .one-aiphoto-imgdiv-item { height: 100%; justify-content: space-between; } #one-dom-container .one-aiphoto-imgdiv-item .one-aiphoto-img { height: 6.65em; } .one-aiphoto-img-tag { bottom: 0.6em; z-index: 10; border-radius: 999px; padding: 0.2em 0.6em; background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(15px); } #one-dom-container .one-aiphoto-drawer { width: 100%; position: relative; overflow: visible; border-left: 2px solid rgba(0, 0, 0, 0.30); padding-left: 0.8em; margin-top: 1em; } #one-dom-container .one-aiphoto-drawer-item { cursor: pointer; height: 58px; opacity: 0.3; position: relative; justify-content: center; } #one-dom-container .one-aiphoto-drawer-item.active { opacity: 1; } #one-dom-container .one-aiphoto-drawer-block { position: absolute; left: -2px; width: 2px; height: 82px; background-color: #000; } #one-dom-container .one-aiphoto-drawer-item .desc { box-sizing: border-box; overflow: hidden; height: 0; } #one-dom-container .one-aiphoto-drawer-item .desc p { padding-top: 4px; } #one-dom-container .one-aiphoto-drawer-item:first-child .desc { height: auto; } /* guard */ #one-dom-container .one-guard-right { width: 100%; height: 100%; position: relative; } #one-dom-container .one-guard-right-top { background: linear-gradient(174deg, #F5F5F3 2.89%, #BAB8B3 95.11%); padding: 0.8em 0.8em 0 0.8em; } #one-dom-container .one-guard-left { width: 100%; height: 100%; position: relative; } #one-dom-container .one-guard-swiper { margin-top: 0.75em; width: 100%; height: 17.95em; overflow: hidden; } #one-dom-container .one-guard-swiper .swiper-slide { opacity: 0 !important; } #one-dom-container .one-guard-swiper .swiper-slide.swiper-slide-active { opacity: 1 !important; } #one-dom-container .one-guard-img { height: 15.5em; bottom: 0; } #one-dom-container .one-guard-img.index1, #one-dom-container .one-guard-img.index2 { margin-left: 0.66em; } #one-dom-container .one-guard-btn-div { top: 0em; z-index: 2; width: fit-content; height: fit-content; border-radius: 5em; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(10px); padding: 0.1em; align-items: center; white-space: noWrap; } #one-dom-container .one-guard-btn { cursor: pointer; padding: 0.2em 0.8em; border-radius: 5em; } #one-dom-container .one-guard-btn.active { background: #FFF; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06); } #one-dom-container .one-guard-infodiv { padding: 0.6em 1.2em 1.2em 1.2em; background: #F6F6F6; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-guard-info { margin-top: 0.6em; padding-top: 0.2em; width: 16.5em; border-top: 1px solid rgba(0, 0, 0, 0.30); } #one-dom-container .one-guard-info svg { height: 1.5em; margin-right: 0.4em; flex-shrink: 0; } /* notes */ #one-dom-container .one-notes-ol { margin-top: 0.9em; margin-left: 20px; list-style: decimal; padding: 0; } #one-dom-container .one-notes-ol li { list-style: decimal; } #one-dom-container .one-notes-section .st2 .one-desc { margin-left: 1.5em; } #one-dom-container .one-notes-section .st2 .one-desc::before { content: '*'; position: absolute; left: 0.5em; } #one-dom-container .one-notes-rohs { margin-top: 0.9em; align-items: center; } #one-dom-container .one-notes-rohs svg { margin-right: 6px; width: 60px; } #one-dom-container .one-notes-rohs p { padding-top: 10px; } } @media screen and (max-width: 1439px) and (min-width: 1024px) { #one-dom-container .one-screen-info svg { height: 48px; margin-top: 3px; } } @media screen and (max-width: 1023px) and (min-width: 650px) { #one-dom-container .one-screen-info svg { height: 38px; margin-top: 5px; } } /* one-wap.css */ @media screen and (max-width: 649px) { /* kv */ #one-dom-container .one-kv-section { background-color: #F7F7F7 !important; } #one-dom-container .one-kv-content { width: 100%; height: 100%; } #one-dom-container .one-kv-img { width: 100%; height: 22.5em; } #one-dom-container .one-kv-txtdiv { height: 7.5em; width: 100%; } #one-dom-container .one-kv-txt1 { margin-top: 1.65em; } #one-dom-container .one-kv-txt2 { margin-top: 0.2em; } #one-dom-container .one-kv-p1 { color: rgba(0, 0, 0, 0.95); font-size: 2.25em; line-height: 100%; text-align: center; } #one-dom-container .one-kv-p2 { color: rgba(0, 0, 0, 0.95); font-size: 1.4em; line-height: 100%; text-align: center; } #one-dom-container .one-kv-remark { position: absolute; right: 0.8em; bottom: 8.5em; width: 3.8em; } /* navigation */ #one-dom-container .one-navigation-section { background-color: #EBEBEB !important; } #one-dom-container .one-navigation-div { width: 100%; margin-top: 1.2em; justify-content: space-between; flex-wrap: wrap; } #one-dom-container .one-navigation-item { display: block; position: relative; width: 8.1em; height: 8.9em; overflow: hidden; margin-bottom: 0.2em; } #one-dom-container .one-navigation-item.st2 { width: 100%; } #one-dom-container .one-navigation-item.st3 { height: 18em; } #one-dom-container .one-navigation-info { position: absolute; top: 0.4em; left: 0.4em; } #one-dom-container .one-navigation-info p { font-size: 0.8em !important; } #one-dom-container .one-navigation-info .color1 { color: #fff !important; } #one-dom-container .one-navigation-info .color2 { color: #3C3422 !important; opacity: 0.7; } #one-dom-container .one-navigation-info .color3 { color: #F9F7F1 !important; opacity: 0.7; } #one-dom-container .one-navigation-title { position: absolute; bottom: 0.2em; left: 0.4em; z-index: 2; opacity: 0.95; } #one-dom-container .one-navigation-title p { font-size: 0.7em !important; } #one-dom-container .one-navigation-icon { position: absolute; bottom: 0.3em; right: 0.3em; width: 0.5em; } /* tvc */ #one-dom-container .one-tvc-videoview { height: 29.15em; } #one-dom-container .one-tvc-play-btn { z-index: 20; width: 100%; height: 100%; } #one-dom-container .one-tvc-play-btn img { width: 2.8em; height: 2.8em; } #one-dom-container .one-tvc-popup { visibility: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150vw; height: 150vh; z-index: 999; overflow: auto; background-color: #000; overflow: hidden; } #one-dom-container .one-tvc-popup-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; } #one-dom-container .one-popup-close-btn { position: absolute; top: calc(25vh + 32px); right: calc(25vw + 32px); width: 32px; height: 32px; z-index: 1000; cursor: pointer; } #one-dom-container .one-tvc-video-div { width: 100%; height: 100%; justify-content: center; align-items: center; } #one-dom-container .one-tvc-video-div video { width: 85vw; clip-path: inset(1px 1px 1px 1px); } /* color */ #one-dom-container .one-color-swiper-item { overflow: hidden; } #one-dom-container .one-color-img { width: 100%; height: 17.5em; } #one-dom-container .one-color-img2 { position: relative; width: 100%; height: 11.4em; margin-top: 0.2em; margin-bottom: 3.2em; } #one-dom-container .one-color-btn-div { top: 30.3em; z-index: 10; width: 100%; height: 1.4em; overflow: visible; justify-content: space-between; } #one-dom-container .one-color-btn { cursor: pointer; align-items: center; opacity: 0.7; } #one-dom-container .one-color-btn.active { opacity: 1; } #one-dom-container .one-color-btn svg { width: 1.5em; height: 1.5em; margin-right: 0.2em; } #one-dom-container .one-color-circle { fill: none; stroke-width: 2px; stroke-dasharray: 88px; stroke-dashoffset: 88px; } #one-dom-container .one-color-btn.active .one-color-circle { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-out; } /* designdetail */ #one-dom-container .one-designdetail-item { position: relative; width: 100%; height: 14.1em; margin-top: 0.2em; } #one-dom-container .one-designdetail-item .one-title { position: absolute; top: 0.5em; left: 0.5em; } /* osTitle */ #one-dom-container .one-osTitle-content svg { height: 2.5em; margin-bottom: 0.9em; } #one-dom-container .one-osTitle-content p { position: relative; } #one-dom-container .one-osTitle-content sup { position: absolute; top: 0.5em; } /* engine */ #one-dom-container .one-engine-content { width: 100%; background: linear-gradient(0deg, #091420 0%, #091420 100%), #000; } #one-dom-container .one-engine-top { width: 100%; height: 16em; position: relative; } #one-dom-container .one-engine-txt { top: 0; width: 100%; height: 14em; } #one-dom-container .one-engine-txt .one-title { width: 100%; } #one-dom-container .one-engine-txt p { width: 100%; } #one-dom-container .one-engine-detaildiv { margin-top: -2em; } #one-dom-container .one-engine-imgdiv { width: 100%; height: 15em; position: relative; } #one-dom-container .one-engine-video { width: 100%; height: 100%; } #one-dom-container .one-engine-right { width: 100%; background-color: #000; padding: 1.2em; justify-content: space-between; } #one-dom-container .one-engine-svg { margin-top: 1.2em; width: 100%; } /* smooth */ #one-dom-container .one-smooth-section { background: linear-gradient(180deg, #091420 0%, #000 100%) !important; } #one-dom-container .one-smooth-item1 { width: 100%; padding: 1.2em; margin-top: 1.2em; background: linear-gradient(145deg, #191C1F 11.78%, #333 82.9%); } #one-dom-container .one-smooth-imgdiv1 { margin-top: 1.2em; width: 100%; height: 12.5em; } #one-dom-container .one-smooth-item2 { margin-top: 0.2em; width: 100%; padding: 1.2em; background: linear-gradient(155deg, #1A1A1A 8.22%, #3A3A3A 92.02%); } #one-dom-container .one-smooth-infolist { margin-top: 1.2em; justify-content: space-between; } #one-dom-container .one-smooth-info { width: 6.9em; border-radius: 0.2em; background: rgba(0, 0, 0, 0.30); padding: 0.6em 0.4em; } #one-dom-container .one-smooth-swiperdiv { margin-top: 1.2em; width: 100%; overflow: hidden; position: relative; } #one-dom-container .one-smooth-swiper { width: 100%; height: 20em; } #one-dom-container .one-smooth-swiper img { margin: 0 auto; transition: all 0.3s; } #one-dom-container .one-smooth-swiper-button-div { margin-top: 0.4em; justify-content: center; align-items: center; } #one-dom-container .one-smooth-swiper-numdiv { margin: 0 8px; } #one-dom-container .one-smooth-swiper-button { opacity: 0.8; cursor: pointer; width: 1.6em; height: 1.6em; border-radius: 100%; } #one-dom-container .one-smooth-swiper-button svg { width: 100%; height: 100%; } #one-dom-container .one-smooth-swiper-button-prev { transform: rotate(180deg); } #one-dom-container .one-smooth-swiper-button:hover { opacity: 1; } #one-dom-container .one-smooth-swiper-button.swiper-button-disabled { opacity: 0.3; cursor: auto; } /* smoothauth */ #one-dom-container .one-smoothauth-list { justify-content: space-between; margin-top: 1.2em; } #one-dom-container .one-smoothauth-item { margin-top: 0.2em; width: 100%; height: 7.5em; position: relative; background: #121212; } #one-dom-container .one-smoothauth-img1 { width: 12.9em; } #one-dom-container .one-smoothauth-img2 { width: 13em; } /* smoothhightemp */ #one-dom-container .one-smoothhightemp-p2 { text-align: center; } #one-dom-container .one-smoothhightemp-imgdiv { width: 100%; height: 10.1em; margin-top: 1.2em; position: relative; } #one-dom-container .one-smoothhightemp-p1 { position: absolute; top: 0; left: 0; width: 100%; text-align: center; } #one-dom-container .one-smoothhightemp-infodiv { margin-top: 1.2em; width: 100%; align-items: center; justify-content: space-between; } #one-dom-container .one-smoothhightemp-info1 { width: 100%; height: 84px; border-radius: 0.2em; background: #1A1A1A; position: relative; } #one-dom-container .one-smoothhightemp-info1 img { height: 60px; } #one-dom-container .one-smoothhightemp-info2 { margin-top: 0.2em; width: 100%; height: 84px; border-radius: 0.2em; background: #1A1A1A; padding: 0.6em 0.8em; align-items: center; justify-content: center; } /* durableTitle */ #one-dom-container .one-durableTitle-section { background: #B2B1AA !important; } #one-dom-container .one-durableTitle-play-btn { margin-top: 0.2em; justify-content: center; align-items: center; cursor: pointer; } #one-dom-container .one-durableTitle-play-btn span { border-bottom: 1px solid #000; } #one-dom-container .one-durableTitle-play-btn svg { width: 1.4em; height: 1.4em; margin-left: 0.45em; } #one-dom-container .one-durableTitle-section p { position: relative; } #one-dom-container .one-durableTitle-section sup { position: absolute; top: 0.5em; } #one-dom-container .one-durableTitle-popup { visibility: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150vw; height: 150vh; z-index: 999; overflow: auto; background-color: #000; overflow: hidden; } #one-dom-container .one-durableTitle-popup-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; } #one-dom-container .one-popup-close-btn { position: absolute; top: calc(25vh + 32px); right: calc(25vw + 32px); width: 32px; height: 32px; z-index: 1000; cursor: pointer; } #one-dom-container .one-durableTitle-video-div { width: 100%; height: 100%; justify-content: center; align-items: center; } #one-dom-container .one-durableTitle-video-div video { width: 85vw; clip-path: inset(1px 1px 1px 1px); } /* battery */ #one-dom-container .one-battery-section { background: linear-gradient(0deg, #CECDC7 0%, #B2B1AA 101.45%)#FFF; } #one-dom-container .one-battery-content { width: 100%; } #one-dom-container .one-battery-img1 { margin-top: 1.2em; width: 100%; height: 15em; } #one-dom-container .one-battery-txt2 { margin-top: 1.2em; } #one-dom-container .one-battery-txt3 { margin-top: 2.4em; } #one-dom-container .one-battery-img2 { margin-top: 1.2em; width: 100%; height: 20.4em; } #one-dom-container .one-battery-txt3 .one-battery-infodiv { margin-top: -3.4em; } #one-dom-container .one-battery-info { width: 100%; padding: 0.6em; border-radius: 0.2em; background: rgba(255, 255, 255, 0.20); } #one-dom-container .one-battery-txt2 .one-battery-info { margin-bottom: 0.2em; } #one-dom-container .one-battery-txt3 .one-battery-info { margin-top: 0.4em; backdrop-filter: blur(10px); } #one-dom-container .one-battery-info svg { width: 1.5em; height: 1.5em; margin-right: 0.2em; } /* waterproof */ #one-dom-container .one-waterproof-imgdiv { margin-top: 1.2em; width: 100%; height: 22.5em; } #one-dom-container .one-waterproof-info { margin-top: 0.4em; padding: 0.6em 0.8em; border-radius: 0.2em; background: #F6F6F6; width: 100%; align-items: center; } #one-dom-container .one-waterproof-info-txt { width: 218px; } #one-dom-container .one-waterproof-info svg { width: 2.6em; margin-right: 0.4em; } /* waterproofinfo */ #one-dom-container .one-waterproofinfo-list { margin-top: 1.2em; } #one-dom-container .one-waterproofinfo-item { position: relative; width: 100%; height: 11.3em; margin-top: 0.2em; } #one-dom-container .one-waterproofinfo-title { position: absolute; top: 24px; left: 24px; } /* dropproof */ #one-dom-container .one-dropproof-section { height: 33.9em; } #one-dom-container .one-dropproof-contentdiv, #one-dom-container .one-dropproof-content, #one-dom-container .one-dropproof-left { position: relative; z-index: 2; height: 100%; justify-content: space-between; } #one-dom-container .one-dropproof-test { margin-top: 0.4em; width: 200px; padding: 0 16px; height: 67px; border-radius: 4px; background: rgba(255, 255, 255, 0.30); align-items: center; } #one-dom-container .one-dropproof-test img { width: 52px; } #one-dom-container .one-dropproof-infodiv { justify-content: space-between; } #one-dom-container .one-dropproof-infolist { width: 8.1em; height: 9em; justify-content: space-between; } #one-dom-container .one-dropproof-info { width: 100%; height: 2.8em; padding: 0 0.8em; border-radius: 0.2em; background: rgba(255, 255, 255, 0.30); align-items: center; } #one-dom-container .one-dropproof-info.st2 { width: 8.1em; height: 100%; padding: 0; justify-content: space-between; align-items: center; } #one-dom-container .one-dropproof-info2 { width: 100%; height: 2.8em; padding: 0 20px; align-items: center; } #one-dom-container .one-dropproof-line { width: 6.2em; height: 1px; background: #1A1A1A; } #one-dom-container .one-dropproof-info img { width: 1.8em; margin-right: 0.2em; } #one-dom-container .one-dropproof-info p { color: rgba(0, 0, 0, 0.95); } /* dropproofinfo */ #one-dom-container .one-dropproofinfo-item { position: relative; } #one-dom-container .one-dropproofinfo-item:first-of-type { margin-bottom: 1.2em; } #one-dom-container .one-dropproofinfo-item img { margin-top: 0.8em; width: 100%; height: 12em; } /* qatest */ #one-dom-container .one-qatest-icon { height: 3em; width: 3em; margin-bottom: 0.6em; } #one-dom-container .one-qatest-list { margin-top: 1.2em; justify-content: space-between; flex-wrap: wrap; } #one-dom-container .one-qatest-item { height: 8.1em; width: 8.1em; margin-bottom: 0.2em; position: relative; } #one-dom-container .one-qatest-item:first-of-type { width: 100%; } #one-dom-container .one-qatest-item .one-title { width: 100%; padding: 0 10px; } /* signal */ #one-dom-container .one-signal-swiper .swiper-wrapper { flex-direction: column; } #one-dom-container .one-signal-swiper .swiper-slide { margin-top: 2.4em; } #one-dom-container .one-signal-imgdiv { margin-top: 1.2em; width: 100%; height: 16.25em; position: relative; } #one-dom-container .one-signal-imgdiv.index1 { background: linear-gradient(171deg, #FCFCFB 6.74%, #B0AEA8 98.67%); } #one-dom-container .one-signal-imgdiv.index2 { background: linear-gradient(161deg, #494949 10.6%, #1B1B1B 94.79%); height: 17.5em; } #one-dom-container .one-signal-imgdiv.index3 { background: linear-gradient(161deg, #494949 10.6%, #1B1B1B 94.79%); } #one-dom-container .one-signal-img1 { height: 13.2em; top: 1.4em; } #one-dom-container .one-signal-img2, #one-dom-container .one-signal-img3 { height: 12.5em; top: 1.5em; } #one-dom-container .one-signal-icondiv { position: absolute; bottom: 0.8em; left: 0.8em; z-index: 2; padding: 0.2em 0.8em; align-items: center; border-radius: 0.2em; background-color: #1A1A1A; } #one-dom-container .one-signal-icondiv.wt { background: #EBEBEB; } #one-dom-container .one-signal-icondiv img { height: 32px; margin-right: 0.2em; } #one-dom-container .one-signal-infodiv { margin-top: 1.2em; } #one-dom-container .one-signal-info { width: 100%; padding: 0.6em 0.8em; margin-top: 0.4em; border-radius: 0.2em; background: #1A1A1A; align-items: center; } #one-dom-container .one-signal-info svg { width: 2em; margin-right: 0.4em; } #one-dom-container .one-signal-info.st3 { height: 4.5em; padding: 0; position: relative; } #one-dom-container .one-signal-info.st3 .one-title { width: 100%; } /* positioning */ #one-dom-container .one-positioning-list { margin-top: 1.2em; } #one-dom-container .one-positioning-item { margin-top: 0.6em; flex-direction: column-reverse; position: relative; } #one-dom-container .one-positioning-item picture { display: block; width: 100%; height: 11.3em; position: relative; } #one-dom-container .one-positioning-title { margin-top: 0.2em; padding: 0.6em 0.8em; border-radius: 0.4em; background: #1A1A1A; backdrop-filter: blur(20px); align-items: center; justify-content: space-between; } #one-dom-container .one-positioning-title .tx { margin-left: 8px; } #one-dom-container .one-positioning-txlogo { height: 2.4em; margin-left: 0.5em; } /* chip */ #one-dom-container .one-chip-section { background: linear-gradient(180deg, #000 0%, #2E2E2E 100%) !important; } #one-dom-container .one-chip-imgdiv { margin-top: 1.2em; height: 12.3em; } #one-dom-container .one-chip-infodiv { margin-top: 1.2em; width: 100%; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-chip-info { width: 5.3335em; border-radius: 0.2em; background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(10px); padding: 0.8em; margin-top: 0.2em; } #one-dom-container .one-chip-info.st2 { width: 10.86665em; } /* screen */ #one-dom-container .one-screen-content .one-title { text-align: left; align-items: start; } #one-dom-container .one-screen-imgdiv1 { margin-top: 1.2em; width: 100%; height: 7.5em; } #one-dom-container .one-screen-txt2 { margin-top: -1em; flex-wrap: wrap; justify-content: space-between; } #one-dom-container .one-screen-txt2 .one-title { width: 8.1em; padding: 0.8em; border-radius: 0.2em; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); margin-bottom: 0.2em; } #one-dom-container .one-screen-txt2 .one-title:last-of-type { width: 100%; } #one-dom-container .one-screen-txt3 { margin-top: 2.4em; } #one-dom-container .one-screen-imgdiv2 { margin: 1.2em 0; width: 100%; height: 3.5em; } #one-dom-container .one-screen-txt3-info .one-title { width: 100%; padding: 0.8em 0.6em; border-radius: 0.2em; background: #1A1A1A; margin-top: 0.2em; } /* outdoor */ #one-dom-container .one-outdoor-swiper { margin-top: 1.2em; width: 100%; height: 17em; } #one-dom-container .one-outdoor-swiper picture, #one-dom-container .one-outdoor-video1 { display: block; width: 100%; height: 100%; } #one-dom-container .one-outdoor-btn-div { margin-top: 1.2em; width: fit-content; height: fit-content; border-radius: 5em; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(10px); padding: 0.1em; align-items: center; } #one-dom-container .one-outdoor-btn { cursor: pointer; padding: 0.2em 0.8em; border-radius: 5em; text-wrap: nowrap; } #one-dom-container .one-outdoor-btn.active { background: #fff; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06); } #one-dom-container .one-outdoor-infodiv-container { overflow: hidden; } #one-dom-container .one-outdoor-infodiv { margin-top: 0.9em; width: 400%; position: relative; } #one-dom-container .one-outdoor-info { width: 25%; } /* trip */ #one-dom-container .one-trip-right { margin-top: 1.2em; width: 100%; height: 17.5em; position: relative; overflow: hidden; } #one-dom-container .one-tripinternal-swiperdiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; } #one-dom-container .one-tripinternal-swiperdiv.active { z-index: 2; opacity: 1; } #one-dom-container .one-tripinternal-swiper { width: 100%; height: 100%; } #one-dom-container .one-tripinternal-swiper .swiper-slide { background: linear-gradient(161deg, #494949 10.6%, #1B1B1B 94.79%); } #one-dom-container .one-trip-img { height: 13.5em; top: 1em; } #one-dom-container .one-tripinternal-swiper-button-div { align-items: center; bottom: 0.8em; z-index: 2; } #one-dom-container .one-tripinternal-swiper-numdiv { margin: 0 8px; } #one-dom-container .one-tripinternal-swiper-button { width: 1.6em; height: 1.6em; } #one-dom-container .one-tripinternal-swiper-button svg { width: 100%; height: 100%; } #one-dom-container .one-tripinternal-swiper-button-prev { transform: rotate(180deg); } #one-dom-container .one-tripinternal-swiper-button.swiper-button-disabled { opacity: 0.3; cursor: auto; } #one-dom-container .one-trip-drawer { width: 100%; height: 220px; margin-top: 1.2em; } #one-dom-container .one-trip-drawer-item { position: relative; margin-bottom: 4px; padding: 0.8em; background: #201F1C; border-radius: 0.6em; backdrop-filter: blur(10px); } #one-dom-container .one-trip-drawer-item.active { opacity: 1; background: #484540; } #one-dom-container .one-trip-drawer-item img { opacity: 1; width: 1.4em; right: 0.8em; transition: all 0.2s; } #one-dom-container .one-trip-drawer-item.active img { opacity: 0; } #one-dom-container .one-trip-drawer-item .desc { box-sizing: border-box; overflow: hidden; height: 0; transition: all 0.5s; } #one-dom-container .one-trip-drawer-item .desc p { padding-top: 12px; } #one-dom-container .one-trip-drawer-item:first-child .desc { height: auto; } /* experience */ #one-dom-container .one-experience-img { margin-top: 1.2em; width: 100%; height: 12.8em; position: relative; } #one-dom-container .one-experience-infodiv { width: 100%; margin-bottom: 2.4em; } #one-dom-container .one-experience-info { margin-top: 0.4em; width: 100%; padding: 0.4em 0.6em; border-radius: 0.2em; background: #1A1A1A; backdrop-filter: blur(15px); } /* simple */ #one-dom-container .one-simple-swiper { margin-top: 1.2em; } #one-dom-container .one-simple-imgdiv { width: 100%; height: 19.9em; position: relative; } #one-dom-container .one-simple-video { width: 100%; height: 100%; position: relative; } #one-dom-container .one-simple-icon { position: absolute; top: 0.6em; left: 0.6em; height: 1.2em; } #one-dom-container .one-simple-swiper-control { margin-top: 0.6em; align-items: center; width: 100%; justify-content: center; } #one-dom-container .one-simple-swiper-button { width: 1.6em; height: 1.6em; } #one-dom-container .one-simple-swiper-button svg { width: 100%; height: 100%; } #one-dom-container .one-simple-swiper-button-prev { transform: rotate(180deg); margin-right: 8px; } #one-dom-container .one-simple-swiper-button.swiper-button-disabled { opacity: 0.3; } /* photosimple */ #one-dom-container .one-photosimple-item { margin-top: 1.2em; } #one-dom-container .one-photosimple-item:first-of-type { margin-top: 0; } #one-dom-container .one-photosimple-item img { width: 100%; height: 12.3em; } #one-dom-container .one-photosimple-item.st2 img { height: 21.9em; } #one-dom-container .one-photosimple-title { margin-top: 0.2em; width: 100%; } /* aiphoto */ #one-dom-container .one-aiphoto-swiper { margin-top: 1.2em; } #one-dom-container .one-aiphoto-imgdiv { margin-top: 1.2em; width: 100%; height: 10em; align-items: center; justify-content: space-between; } #one-dom-container .one-aiphoto-img { width: 8.1em; height: 100%; position: relative; } #one-dom-container .one-aiphoto-imgdiv-item { height: 100%; justify-content: space-between; } #one-dom-container .one-aiphoto-imgdiv-item .one-aiphoto-img { height: 4.9em; } .one-aiphoto-img-tag { bottom: 0.4em; z-index: 10; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); } #one-dom-container .one-aiphoto-swiper-control { align-items: center; margin-top: 0.6em; justify-content: end; } #one-dom-container .one-aiphoto-swiper-indexbtnlist { height: 1.2em; align-items: center; width: 100%; justify-content: space-between; } #one-dom-container .one-aiphoto-swiper-indexbtn { cursor: pointer; height: 100%; width: 5.33em; position: relative; } #one-dom-container .one-aiphoto-swiper-indexbtn>div { width: 100%; height: 2px; background-color: rgba(0, 0, 0, 0.15); } #one-dom-container .one-aiphoto-swiper-indexbtn.active>div { background-color: rgba(0, 0, 0, 0.95); } /* guard */ #one-dom-container .one-guard-left { width: 100%; height: 100%; position: relative; } #one-dom-container .one-guard-swiper { margin-top: 1.2em; width: 100%; height: 15em; } #one-dom-container .one-guard-swiper .swiper-slide { background: linear-gradient(171deg, #F8F8F6 6.74%, #BDBBB6 98.67%); } #one-dom-container .one-guard-btn-div { bottom: 0.6em; z-index: 2; width: fit-content; height: fit-content; border-radius: 5em; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(10px); align-items: center; } #one-dom-container .one-guard-btn { cursor: pointer; padding: 0.1459em 0.5835em; border-radius: 5em; } #one-dom-container .one-guard-btn.active { background: #FFF; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06); } #one-dom-container .one-guard-infodiv { margin-top: 1.2em; } #one-dom-container .one-guard-info { margin-top: 0.2em; padding-top: 0.2em; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.30); } #one-dom-container .one-guard-info svg { height: 30px; margin-right: 12px; flex-shrink: 0; } /* notes */ #one-dom-container .one-notes-section { background: #FAFAFA !important; } #one-dom-container .one-notes-ol { margin-top: 0.9em; list-style: decimal; padding: 0; } #one-dom-container .one-notes-ol li { list-style: decimal; margin-left: 1.5em; } #one-dom-container .one-notes-section .st2 .one-desc { margin-left: 1.5em; } #one-dom-container .one-notes-section .st2 .one-desc::before { content: '*'; position: absolute; left: 0; } #one-dom-container .one-notes-rohs { margin-top: 0.9em; align-items: center; } #one-dom-container .one-notes-rohs svg { width: 60px; height: 38.175px; } #one-dom-container .one-notes-rohs p { padding-top: 5px; } }