@import url(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: 0px; } .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: 0px; } .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-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, var(--body-m-spacing) -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 screen and (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 screen and (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 screen and (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-background-image-container { position: absolute; z-index: -1; border: none; pointer-events: none; overflow: hidden; border-radius: inherit; } .dx-background-image-container .dx-background-image { position: absolute; border: none; pointer-events: none; border-radius: inherit; } .dx-background-image-container { height: 100%; } .dx-background-image-center { left: 50%; top: 50%; transform: translate(-50%, -50%); } .dx-background-image-top-left { left: 0; top: 0; } .dx-background-image-top-center { top: 0px; left: 50%; transform: translateX(-50%); } .dx-background-image-top-right { top: 0px; right: 0px; } .dx-background-image-center-right { right: 0px; top: 50%; transform: translateY(-50%); } .dx-background-image-bottom-right { right: 0; bottom: 0; } .dx-background-image-bottom-center { bottom: 0px; left: 50%; transform: translateX(-50%) translateY(-100%); transform-origin: bottom; } .dx-background-image-bottom-left { bottom: 0px; left: 0px; } .dx-background-image-center-left { left: 0; top: 50%; transform: translateY(-50%); } .dx-card { width: 100%; height: fit-content; z-index: 0; display: flex; flex-direction: column; overflow: hidden; height: 100%; } .dx-card-media-container { width: 100%; border-radius: inherit; } .dx-card-media-top-rounded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dx-card-content-container { background-color: var(--bg-color); width: 100%; height: 100%; display: flex; flex-direction: column; } .dx-card-content-container.dx-card-content-paddingy { padding-top: calc(1rem * var(--spacing-4)); padding-bottom: calc(1rem * var(--spacing-5)); } .dx-card-content-container.dx-card-content-paddingx { padding-left: calc(1rem * var(--spacing-3)); padding-right: calc(1rem * var(--spacing-3)); } .dx-card .dx-card-content-bottom { padding-top: calc(var(--spacing-4) * 1rem + 4px); padding-bottom: calc(var(--spacing-5) * 1rem); margin-top: -4px; } .dx-card .dx-card-media-bottom-rounded, .dx-card .dx-card-content-bottom { border-top-left-radius: 0; border-top-right-radius: 0; } .dx-cta-container { padding-top: 24px; width: 100%; display: flex; flex-direction: column; gap: 16px; } @media screen and (min-width: 768px) { .dx-cta-container { flex-direction: row; } } [class^="dx-cta-text-dark"] .dx-cta-text-content::before { background-color: #a4a2a2; } .dx-cta-button-sm { box-sizing: border-box; align-items: center; border-radius: var(--btn-br); font-family: var(--typo-secondary); line-height: 1; display: flex; cursor: pointer; flex-grow: 0; flex-shrink: 0; gap: calc(1rem * var(--spacing-1)); justify-content: center; font-size: calc(1rem * var(--body-m)); letter-spacing: calc(1rem * var(--body-m-spacing)); padding: 14px 24px; 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; } .dx-cta-button-sm:has(.dx-cta-icon) { padding: 10px 24px; } .dx-cta-button-sm .dx-cta-text-content::before { display: none; } .dx-cta-text-sm { background-color: transparent; font-family: var(--typo-secondary); display: flex; justify-content: center; align-items: start; gap: 4px; padding: 16px 0; width: fit-content; border-radius: 0; border: none; font-size: calc(1rem * var(--body-m)); align-items: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .dx-cta-text-sm:focus, .dx-cta-text-sm:hover { background-color: transparent; } .dx-cta-text-sm .dx-cta-text-content { position: relative; line-height: 1; } .dx-cta-text-sm .dx-cta-text-content::before { display: block; content: ""; width: 100%; height: 2px; position: absolute; background-color: var(--neutral-med-03); bottom: -8px; transition: var(--main-transition-duration) ease all; } .dx-cta-primary-sm { background-color: var(--neutral-dark-01); border: 2px solid transparent; color: var(--pure-light); } .dx-cta-primary-sm:focus, .dx-cta-primary-sm:hover { color: var(--pure-light); background-color: var(--neutral-dark-04); } .dx-cta-secondary-sm { background-color: transparent; border: 2px solid var(--neutral-med-03); color: var(--neutral-med-01); } .dx-cta-secondary-sm:focus, .dx-cta-secondary-sm:hover { background-color: var(--neutral-light-01); color: var(--neutral-med-01); } .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: 0px 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); }