@import "https://c1-ofp.static.pub/ShareResource/DSM/DSM_3/css/dsm3-css-variables.css"; * { margin: 0; padding: 0; box-sizing: border-box; } .html_upload_pc { min-height: auto  !important; } img { max-width: 100%; } body { margin: 0  !important; } .dx-grid-container { display: flex; flex-direction: row; flex-wrap: wrap; } .dx-grid-container.dx-grid-container-gap { gap: calc(var(--spacing-3) * 1rem); } .dx-grid-container.dx-grid-container-nogap { gap: 0; } .dx-grid-container.dx-grid-container-fullwidth { width: 100%; margin-left: auto; margin-right: auto; } .dx-grid-container.dx-grid-container-fulldesktop { max-width: var(--breakpoint-full-desktop); margin-left: auto; margin-right: auto; } .dx-grid-row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; position: relative; } .dx-grid-row li { margin-left: 0  !important; } .dx-grid-row.dx-grid-row-nogap { gap: 0; } .dx-grid-row.dx-grid-row-gap { gap: calc(var(--spacing-3) * 1rem); } .dx-grid-row.dx-grid-row-margins { padding-left: calc(var(--mobile-grid-margins) * 1rem); padding-right: calc(var(--mobile-grid-margins) * 1rem); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-margins { padding-left: calc(var(--tablet-grid-margins) * 1rem); padding-right: calc(var(--tablet-grid-margins) * 1rem); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-margins { padding-left: clamp(var(--small-desktop-grid-margins) * 1rem, (100% - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem); padding-right: clamp(var(--small-desktop-grid-margins) * 1rem, (100% - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-margins { padding-left: calc((100% - 1920px) / 2 + var(--full-desktop-grid-margins) * 1rem); padding-right: calc((100% - 1920px) / 2 + var(--full-desktop-grid-margins) * 1rem); } } .dx-grid { display: flex; flex-shrink: 0  !important; flex-grow: 0  !important; position: relative; } .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 25% * var(--columns-sm), 100%); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 12.5% * var(--columns-md), 100%); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-lg), 100%); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-xl), 100%); } } .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 25% * var(--columns-sm) - var(--spacing-3) * 1rem / 4 * (4 - var(--columns-sm)), 100%); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 12.5% * var(--columns-md) - var(--spacing-3) * 1rem / 8 * (8 - var(--columns-md)), 100%); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-lg) - var(--spacing-3) * 1rem / 12 * (12 - var(--columns-lg)), 100%); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-xl) - var(--spacing-3) * 1rem / 12 * (12 - var(--columns-xl)), 100%); } } .dx-carousel { --controls-background-color: var(--neutral-light-01); --controls-fill-color: var(--neutral-dark-01); --controls-hover-color: var(--neutral-pale-02); } .dx-carousel-dark-mode { --controls-background-color: var(--neutral-dark-01); --controls-fill-color: var(--neutral-light-01); --controls-hover-color: var(--neutral-dark-04); } .dx-grid-row.dx-carousel { --button-size: 2.5rem; --button-padding: calc(var(--spacing-3) * 1rem); width: 100%; margin-left: 0; margin-right: 0; max-width: 100%; display: flex; justify-content: center; align-items: center; } .dx-grid-row.dx-carousel.dx-carousel-controls-left { justify-content: flex-start; } .dx-grid-row.dx-carousel.dx-carousel-controls-right { justify-content: flex-end; } @media screen and (min-width: 1280px) { .dx-carousel { margin-left: auto; margin-right: auto; max-width: 1920px; } .dx-carousel.dx-carousel-arrows-sides-desktop:has(.dx-carousel-button) { margin-left: auto; margin-right: auto; max-width: clamp( 1280px - var(--button-size) * 2 - var(--spacing-3) * 1rem * 2, 100% - var(--button-size) * 2 - var(--spacing-3) * 1rem * 2, 1920px - var(--button-size) * 2 - var(--spacing-3) * 1rem * 2 ); } } .dx-carousel-viewport { overflow: hidden; width: 100%; } .dx-carousel-container { display: flex; touch-action: pan-y pinch-zoom; flex-grow: 1; margin-left: -16px; } .dx-carousel-container .dx-grid.dx-carousel-slide { transform: translate3d(0, 0, 0); min-width: 0; width: clamp(0%, 25% * var(--columns-sm), 100%); padding-left: var(--slide-spacing); } @media screen and (min-width: 768px) { .dx-carousel-container .dx-grid.dx-carousel-slide { width: clamp(0%, 12.5% * var(--columns-md), 100%); } } @media screen and (min-width: 1280px) { .dx-carousel-container .dx-grid.dx-carousel-slide { width: clamp(0%, 8.3333333333% * var(--columns-lg), 100%); } } @media screen and (min-width: 1920px) { .dx-carousel-container .dx-grid.dx-carousel-slide { width: clamp(0%, 8.3333333333% * var(--columns-xl), 100%); } } .dx-carousel-button { -webkit-appearance: none; appearance: none; background-color: rgba(0, 0, 0, 0); touch-action: manipulation; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; background-color: var(--controls-background-color); width: var(--button-size); height: var(--button-size); z-index: 100; border-radius: 50%; color: var(--controls-fill-color); display: flex; justify-content: center; align-items: center; } @media (min-width: 1280px) { .dx-carousel-arrows-sides-desktop:has(.dx-carousel-dots) .dx-carousel-button { position: absolute; top: calc(50% - 40px + 16px); transform: translateY(-50%); } .dx-carousel-arrows-sides-desktop .dx-carousel-button { position: absolute; top: 50%; transform: translateY(-50%); } .dx-carousel-arrows-sides-desktop .dx-carousel-button--next { right: calc((var(--spacing-3) * 1rem + var(--button-size)) * -1); } .dx-carousel-arrows-sides-desktop .dx-carousel-button--prev { left: calc((var(--spacing-3) * 1rem + var(--button-size)) * -1); } .dx-grid-row-margins.dx-carousel-arrows-sides-desktop .dx-carousel-button--next { right: calc( ( var(--spacing-3) * 1rem + var(--button-size) - clamp(var(--small-desktop-grid-margins) * 1rem, (100vw - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem) ) * -1 ); } .dx-grid-row-margins.dx-carousel-arrows-sides-desktop .dx-carousel-button--prev { left: calc( ( var(--spacing-3) * 1rem + var(--button-size) - clamp(var(--small-desktop-grid-margins) * 1rem, (100vw - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem) ) * -1 ); } } @media (min-width: 1920px) { .dx-grid-row-margins .dx-carousel-desktop-arrow.dx-carousel-button--next { right: calc((var(--spacing-3) * 1rem + var(--button-size) - var(--full-desktop-grid-margins) * 1rem) * -1); } .dx-grid-row-margins .dx-carousel-desktop-arrow.dx-carousel-button--prev { left: calc((var(--spacing-3) * 1rem + var(--button-size) - var(--full-desktop-grid-margins) * 1rem) * -1); } } .dx-carousel-button:hover { background-color: var(--controls-hover-color); } .dx-carousel-button__svg { width: 35%; height: 35%; } .dx-carousel-button:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } .dx-carousel-dots { display: flex; flex-wrap: wrap; align-items: center; width: max-content; height: 28px; justify-self: center; background-color: var(--controls-background-color); border-radius: 25px; padding: 0 calc(var(--spacing-3) * 1rem); gap: 8px; backdrop-filter: blur(30px); } .dx-carousel-dot { -webkit-appearance: none; appearance: none; background-color: rgba(0, 0, 0, 0); touch-action: manipulation; display: inline-flex; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; width: 8px; height: 8px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .dx-carousel-dot:after { box-shadow: inset 0 0 0 1px var(--controls-fill-color); width: 8px; height: 8px; border-radius: 50%; display: flex; align-items: center; content: ""; } .dx-carousel-dot--selected:after { box-shadow: inset 0 0 0 8px var(--controls-fill-color); } .dx-cta-container { display: flex; flex-wrap: wrap; gap: calc(1rem * var(--spacing-1)); margin: 0; padding: 0; width: 100%; margin-top: calc(var(--spacing-5) * 1rem); flex-direction: row; gap: calc(1rem * var(--spacing-3)); } .dx-cta-container.dx-cta-container-nomargintop { margin-top: 0; } .dx-cta-container.dx-cta-container-column-sm { flex-direction: column; } .dx-cta-container.dx-cta-container-row-sm { flex-direction: row; } .dx-cta-container:has(.dx-cta-invisible) { margin: 0; } @media screen and (min-width: 768px) { .dx-cta-container.dx-cta-container-row-md { flex-direction: row; } .dx-cta-container.dx-cta-container-column-md { flex-direction: column; } } @media screen and (min-width: 1280px) { .dx-cta-container.dx-cta-container-row-lg { flex-direction: row; } .dx-cta-container.dx-cta-container-column-lg { flex-direction: column; } } @media screen and (min-width: 1920px) { .dx-cta-container.dx-cta-container-row-xl { flex-direction: row; } .dx-cta-container.dx-cta-container-column-xl { flex-direction: column; } } .dx-cta { --border-width: 2px; display: flex; align-items: center; justify-content: center; flex-grow: 0; box-sizing: border-box; flex-shrink: 0; gap: calc(1rem * var(--spacing-1)); border-radius: var(--btn-br); font-family: var(--typo-secondary); cursor: pointer; text-align: center; text-decoration: none; transition: all ease-out var(--main-transition-duration), color ease-out var(--main-transition-duration); white-space: nowrap; width: fit-content; z-index: 2; min-height: calc(var(--cta-height, 48px) - var(--border-width) * 2); } .dx-cta:has(> img:only-child), .dx-cta:has(> picture:only-child), .dx-cta:has(> svg:only-child) { min-height: calc(var(--cta-height, 48px)); padding: 0; width: calc(var(--cta-height, 48px)); } .dx-cta .dx-cta-text-content { font-size: var(--cta-font-size, calc(var(--body-m) * 1rem)); line-height: var(--cta-font-lh, calc(var(--body-m-line) * 1rem)); letter-spacing: var(--cta-font-ls, calc(var(--body-m-spacing) * 1rem)); color: var(--cta-text-color, #171717); border-bottom: var(--cta-border-bottom, none); } .dx-cta .dx-cta-text-content::before { display: none; } .dx-cta img { height: calc(var(--cta-height, 48px) / 2); width: calc(var(--cta-height, 48px) / 2); } .dx-cta { background-color: var(--cta-background-color); border: var(--cta-border, 2px solid transparent); padding: var(--cta-padding, 10px calc(var(--spacing-5) * 1rem)); } .dx-cta:not(.dx-cta-disabled):hover, .dx-cta:not(.dx-cta-disabled):focus { background-color: var(--cta-hover-background-color); border: var(--cta-hover-border, 2px solid transparent); } .dx-cta:not(.dx-cta-disabled):hover .dx-cta-text-content, .dx-cta:not(.dx-cta-disabled):focus .dx-cta-text-content { color: var(--cta-hover-text-color, #171717); border-bottom: var(--cta-hover-border-bottom, none); } .dx-cta-disabled { opacity: 40%; cursor: not-allowed; } .dx-cta-clickable-parent::before { content: ""; position: absolute; inset: 0; z-index: 1; } .dx-cta-invisible { opacity: 0  !important; height: 0  !important; width: 0  !important; padding: 0  !important; min-height: 0  !important; margin: 0  !important; border: 0  !important; } .dx-cta-primary { --cta-background-color: var(--neutral-dark-01); --cta-text-color: var(--pure-light); --cta-hover-background-color: var(--neutral-dark-04); --cta-hover-text-color: var(--pure-light); } .dx-cta-secondary { --cta-background-color: transparent; --cta-text-color: var(--neutral-dark-01); --cta-border: 2px solid #aba8b1; --cta-hover-background-color: var(--neutral-light-01); --cta-hover-text-color: var(--neutral-dark-01); --cta-hover-border: 2px solid #aba8b1; } .dx-cta-alternative { --cta-background-color: var(--neutral-light-01); --cta-text-color: var(--neutral-dark-01); --cta-hover-background-color: #ccc; --cta-hover-text-color: var(--neutral-dark-01); } .dx-cta-tertiary { --cta-background-color: transparent; --cta-text-color: var(--neutral-dark-01); --cta-border-bottom: 1px solid var(--neutral-med-03); --cta-hover-background-color: transparent; --cta-hover-text-color: var(--neutral-dark-01); --cta-hover-border-bottom: 1px solid var(--elementary-signature); padding: 0; } .dx-cta-danger { --cta-background-color: var(--pure-light); --cta-text-color: var(--elementary-med); --cta-border: 2px solid var(--elementary-med); --cta-hover-background-color: var(--neutral-light-01); --cta-hover-text-color: var(--elementary-med); --cta-hover-border: 2px solid var(--elementary-med); } .dx-cta-primary-dark { --cta-background-color: var(--pure-light); --cta-text-color: var(--neutral-dark-01); --cta-hover-background-color: var(--neutral-light-01); --cta-hover-text-color: var(--neutral-dark-01); } .dx-cta-secondary-dark { --cta-background-color: transparent; --cta-text-color: var(--pure-light); --cta-border: 2px solid var(--neutral-med-02); --cta-hover-background-color: var(--neutral-dark-04); --cta-hover-text-color: var(--pure-light); --cta-hover-border: 2px solid var(--neutral-med-02); } .dx-cta-alternative-dark { --cta-background-color: var(--neutral-dark-04); --cta-text-color: var(--pure-light); --cta-hover-background-color: var(--neutral-dark-05); --cta-hover-text-color: var(--pure-light); } .dx-cta-tertiary-dark { --cta-background-color: transparent; --cta-text-color: var(--pure-light); --cta-border-bottom: 1px solid var(--neutral-med-02); --cta-hover-background-color: transparent; --cta-hover-text-color: var(--pure-light); --cta-hover-border-bottom: 1px solid var(--elementary-signature); padding: 0; } .dx-cta-danger-dark { --cta-background-color: var(--neutral-dark-01); --cta-text-color: #ffb9a2; --cta-border: 2px solid #ffb9a2; --cta-hover-background-color: var(--neutral-dark-04); --cta-hover-text-color: #ffb9a2; --cta-hover-border: 2px solid #ffb9a2; } .dx-cta-small { --cta-padding: 6px calc(var(--spacing-3) * 1rem); --cta-height: 32px; --cta-font-size: calc(var(--label-s) * 1rem); --cta-font-lh: calc(var(--label-s-line) * 1rem); --cta-font-ls: calc(var(--label-s-spacing) * 1rem); } .dx-cta-medium { --cta-padding: 8px calc(var(--spacing-3) * 1rem); --cta-height: 40px; --cta-font-size: calc(var(--body-s) * 1rem); --cta-font-lh: calc(var(--body-s-line) * 1rem); --cta-font-ls: calc(var(--body-s-spacing) * 1rem); } .dx-cta-large { --cta-padding: 10px calc(var(--spacing-5) * 1rem); --cta-height: 48px; --cta-font-size: calc(var(--body-m) * 1rem); --cta-font-lh: calc(var(--body-m-line) * 1rem); --cta-font-ls: calc(var(--body-m-spacing) * 1rem); } .dx-typo { font-size: calc(var(--fs, var(--body-m)) * 1rem); line-height: calc(var(--lh, var(--body-m-line)) * 1rem); letter-spacing: calc(var(--ls, -30) * 1rem); font-family: var(--ff, var(--typo-primary)); margin-top: calc(var(--mt, 0) * 1rem); margin-bottom: calc(var(--mb, 0) * 1rem); color: var(--color, inherit); } @media (min-width: 768px) { .dx-typo { font-size: calc(var(--md-fs, var(--fs)) * 1rem); line-height: calc(var(--md-lh, var(--lh)) * 1rem); letter-spacing: calc(var(--md-ls, var(--ls)) * 1rem); margin-top: calc(var(--md-mt, var(--mt)) * 1rem); margin-bottom: calc(var(--md-mb, var(--mb)) * 1rem); } } @media (min-width: 1280px) { .dx-typo { font-size: calc(var(--lg-fs, var(--md-fs, var(--fs))) * 1rem); line-height: calc(var(--lg-lh, var(--md-lh, var(--lh))) * 1rem); letter-spacing: calc(var(--lg-ls, var(--md-ls, var(--ls))) * 1rem); margin-top: calc(var(--lg-mt, var(--md-mt, var(--mt))) * 1rem); margin-bottom: calc(var(--lg-mb, var(--md-mb, var(--mb))) * 1rem); } } @media (min-width: 1920px) { .dx-typo { font-size: calc(var(--xl-fs, var(--lg-fs, var(--fs))) * 1rem); line-height: calc(var(--xl-lh, var(--lg-lh, var(--lh))) * 1rem); letter-spacing: calc(var(--xl-ls, var(--lg-ls, var(--ls))) * 1rem); margin-top: calc(var(--xl-mt, var(--lg-mt, var(--mt))) * 1rem); margin-bottom: calc(var(--xl-mb, var(--lg-mb, var(--mb))) * 1rem); } } .dx-typo-bold { font-weight: var(--bold); } .dx-typo-secondary { font-family: var(--typo-secondary); } .dx-logo { display: block; max-width: 100%; } .dx-card { border-radius: var(--large-border-radius); flex-direction: column; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 82px; } .dx-card:has(.dx-cta-clickable-parent:focus-visible) { outline: solid var(--elementary-signature) 3px; } .dx-card .dx-card-media-container:first-child picture, .dx-card .dx-card-media-container:first-child img { border-top-left-radius: var(--large-border-radius); border-top-right-radius: var(--large-border-radius); } .dx-card .dx-card-media-container:last-child picture, .dx-card .dx-card-media-container:last-child img { border-bottom-left-radius: var(--large-border-radius); border-bottom-right-radius: var(--large-border-radius); } .dx-card .dx-card-content-container .dx-card-title:has(+ *) { --mb: 1; } .dx-card .dx-card-content-container .dx-card-copy:has(+ *), .dx-card .dx-card-content-container .dx-card-eyebrow:has(+ *) { --mb: .5; } .dx-card .dx-card-content-container *:has(+ .dx-cta-container), .dx-card .dx-card-content-container *:has(+ .dx-cta-invisible) { margin-bottom: 0; } .dx-card .dx-card-content-container .dx-card-media-container picture, .dx-card .dx-card-content-container .dx-card-media-container img { border-radius: var(--large-border-radius); border-radius: var(--large-border-radius); margin-bottom: calc(var(--spacing-3) * 1rem); } .dx-card .dx-card-content-container .dx-logo { margin-bottom: calc(var(--spacing-3) * 1rem); height: 72px; } .dx-brands-carousel-title { transition: all 300ms ease-out; } .dx-brands-content:hover .dx-brands-carousel-title { text-decoration: underline; } .dx-brands-content { flex-direction: row; gap: 8px; align-items: flex-start; padding: 14px 0px; border: 1px transparent solid; } .dx-card-content-container { display: flex; flex-direction: column; } .dx-brands-tile-selected .dx-brands-content { border: 1px #707070 solid; } .dx-brands-carousel-container { width: 100%; background-color: #eaeef5; } .dx-brands-carousel-container.is-fixed { position: fixed; top: 0; left: 0; z-index: 1000; padding-left: 20px; padding-right: 20px; } .dx-brands-carousel-placeholder { display: none; } .dx-card-copy{ padding: 0 14px 0 0; }