section[data-cattype="235"]{ padding: 80px 0 15vh 0; } [data-cattype="235"] .case-study-wrap{ text-align: left; margin-top: 24px; margin-bottom: 24px; } [data-cattype="235"] .case-study-btn{ display: inline-block; background-color: orange; color: #000; padding: 12px 24px; text-decoration: none; font-size: 16px; border-radius: 6px; text-align: center; } [data-cattype="235"] .wrapper_triangle{ position: absolute; z-index: -10; top: -6vh; left: 30%; } [data-cattype="235"] .bg-triangle{ position: absolute; content: ""; width: 0; height: 0; border-top: 83vh solid #bffaf4; border-right: 57vw solid transparent; } [data-cattype="235"] .bg-triangle:nth-child(1){ opacity: 0.3; } [data-cattype="235"] .bg-triangle:nth-child(2){ opacity: 0.5; } [data-cattype="235"] .bg-triangle:nth-child(3){ opacity: 0.8; } [data-cattype="235"] > .container{ width: 1450px; max-width: 100%; padding: 0; } [data-cattype="235"] h2{ color: #000; } [data-cattype="235"] div.li-box { display: flex; flex-wrap: wrap; align-items: center; } [data-cattype="235"] div.li-box > div{ width: 49%; } [data-cattype="235"] div.li-box div.panel-left{ background-position: center center; background-repeat: no-repeat; background-size: contain; background: none !important; height: 54vh; min-height: 420px; position: relative; } [data-cattype="235"] div.li-box div.panel-left .astronaut-bg, [data-cattype="235"] div.li-box div.panel-left .astronaut-only, [data-cattype="235"] div.li-box div.panel-left .image-bg{ position: absolute; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: 114%; } [data-cattype="235"] div.li-box div.panel-right{ padding: 60px; text-align: left; max-width: 36vw; } section[data-cattype="235"] { --bg: #FAF9F5; --bg-shade-200: #F2EEDF; --bg-shade-outline: #E0DDCF; --font-color: #212121; --spacing-32: 2rem; --sapcing-24: 1.5rem; --spacing-16: 1rem; --spacing-1: 0.063rem; --universal-transition: all 0.5s ease-in-out; } [data-cattype="235"] ul.list-item { display: flex; flex-direction: column; gap: var(--spacing-16); list-style: none; padding: 0; } [data-cattype="235"] summary h3{ font-size: 1.2em; } [data-cattype="235"] .circle-icon{ display: none; } [data-cattype="235"] details { position: relative; border: var(--spacing-1) solid var(--bg-shade-outline); padding: clamp(1.5rem, calc(1.5rem + ((1vw - 0.28125rem) * 0.8081)), 2rem); border-radius: var(--sapcing-24); transition: var(--universal-transition); opacity: 0.6; } [data-cattype="235"] details details-content { display: block; overflow: hidden; height: 0; transition: var(--universal-transition); } [data-cattype="235"] details:has(summary[expanded]) { background-color: var(--bg-shade-200); border-color: var(--bg-shade-200); opacity: 1; } [data-cattype="235"] details:has(summary[expanded]) p { opacity: 1; } [data-cattype="235"] details p { opacity: 0; line-height: 1.5; margin-block: var(--sapcing-24); transition: var(--universal-transition); } [data-cattype="235"] summary { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-32); list-style: none; cursor: pointer; transition: var(--universal-transition); caret-color: transparent; } [data-cattype="235"] summary::-webkit-details-marker { display: none; } [data-cattype="235"] summary::marker { content: ''; } @media (min-width: 1200px) { [data-cattype="235"] details circle-expand { display: none; } [data-cattype="235"] details h3{ color: #f7941e; } [data-cattype="235"] details:has(summary[expanded]){ border: none; background: none; padding: 0; } } @media (max-width: 1400px) { [data-cattype="235"] div.li-box div.panel-left{ height: 50vh; } [data-cattype="235"] div.li-box div.panel-left .astronaut-bg, [data-cattype="235"] div.li-box div.panel-left .astronaut-only, [data-cattype="235"] div.li-box div.panel-left .image-bg{ background-size: contain; } [data-cattype="235"] .bg-triangle{ border-top: 103vh solid #bffaf4; } [data-cattype="235"] div.li-box div.panel-right{ max-width: 48vw; } } @media (max-width: 980px) { [data-cattype="235"] div.li-box div.panel-right{ max-width: 90vw; padding-bottom: 0; } } @media (max-width: 767px) { [data-cattype="235"] .list-item > li details { opacity: 0.6; background-color: transparent; border-color: var(--bg-shade-outline); } [data-cattype="235"] .list-item > li details.is-current { opacity: 1; background-color: var(--bg-shade-200); border-color: var(--bg-shade-200); } [data-cattype="235"] .list-item > li details p { opacity: 1; } [data-cattype="235"] .wrapper_triangle{ top: 90px; left: 0; } [data-cattype="235"] .bg-triangle{ border-top: 340px solid #bffaf4; border-right: 500px solid transparent; } [data-cattype="235"] div.li-box div.panel-right{ width: 100%; max-width: 100%; } [data-cattype="235"] div.li-box > div{ width: 100%; } [data-cattype="235"] .circle-icon{ display: none; } [data-cattype="235"] .circle-icon svg{ width: 35px; height: 35px; display: block; overflow: visible; } [data-cattype="235"] .circle-icon svg circle, [data-cattype="235"] .circle-icon svg path{ fill: none; stroke: #f7941e; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: all 0.45s ease-in-out; } [data-cattype="235"] .circle-icon .circle-line{ stroke-dasharray: 75.4086px; stroke-dashoffset: 75.4086px; } [data-cattype="235"] summary .circle-icon .line-horizontal{ stroke-dasharray: 10px; stroke-dashoffset: 0; } [data-cattype="235"] summary .circle-icon .line-vertical{ stroke-dasharray: 10px; stroke-dashoffset: 0; } [data-cattype="235"] summary[expanded] .circle-icon .circle-line{ stroke-dashoffset: 0; } [data-cattype="235"] summary[expanded] .circle-icon .line-vertical{ stroke-dashoffset: 10px; } [data-cattype="235"] .panel-right.os-animation.fast.animated.fadeInLeft { width: 100%; } } @media (max-width: 480px) { section[data-cattype="235"]{ padding-bottom: 0; } [data-cattype="235"] div.li-box { flex-direction: column-reverse; } [data-cattype="235"] div.li-box div.panel-right{ padding: 100px 20px 0 20px; } [data-cattype="235"] div.li-box div.panel-left{ width: 100vw; height: 75vw; min-height: 75vw; } [data-cattype="235"] div.li-box div.panel-right .section-title{ margin-left: 0; margin-right: 0; } section[data-cattype="235"]{ position: relative; z-index: 20; margin-top: -122px; } } @media (max-width: 767px){ [data-cattype="235"] .list-item-scroll-wrap{ width: 100%; overflow: hidden; } [data-cattype="235"] .list-item-scroll{ width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 12px; cursor: grab; touch-action: pan-x; } [data-cattype="235"] .list-item-scroll::-webkit-scrollbar{ display: none; } [data-cattype="235"] .list-item{ display: flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none; } [data-cattype="235"] .list-item > li{ flex: 0 0 min(82vw, 320px); width: min(82vw, 320px); min-width: min(82vw, 320px); list-style: none; scroll-snap-align: start; scroll-snap-stop: always; } [data-cattype="235"] .list-item > li details{ width: 100%; box-sizing: border-box; min-height: 0; } [data-cattype="235"] .list-item > li summary{ min-height: 0; align-items: flex-start; } [data-cattype="235"] .list-item > li details-content{ height: auto; padding-block-start: 12px; overflow: visible; } [data-cattype="235"] .scroll-indicator{ width: 120px; height: 4px; background: rgba(0,0,0,0.15); border-radius: 999px; margin: 14px auto 0; overflow: hidden; position: relative; } [data-cattype="235"] .scroll-indicator-bar{ display: block; width: 0; min-width: 0; height: 100%; background: #212121; border-radius: 999px; transition: width 0.25s ease; } [data-cattype="235"] .scroll-indicator.is-hidden{ display: none; } [data-cattype="235"] .list-item-scroll.is-dragging{ cursor: grabbing; scroll-snap-type: none; user-select: none; } } @media (max-width: 767px) { [data-cattype="235"] div.li-box { flex-direction: column-reverse; } [data-cattype="235"] div.li-box > div, [data-cattype="235"] div.li-box div.panel-right, [data-cattype="235"] .panel-right.os-animation.fast.animated.fadeInLeft { width: 100%; max-width: 100%; } [data-cattype="235"] div.li-box div.panel-right { padding: 60px 20px 0; } [data-cattype="235"] .section-title { margin-bottom: 30px; } [data-cattype="235"] .case-study-wrap { text-align: center; margin-top: 24px; margin-bottom: 24px; } [data-cattype="235"] .list-item-scroll-wrap { width: 100%; overflow: hidden; margin-bottom: 18px; } [data-cattype="235"] .list-item-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; touch-action: pan-x; padding: 0 20vw 12px 0; cursor: grab; } [data-cattype="235"] .list-item-scroll::-webkit-scrollbar { display: none; } [data-cattype="235"] ul.list-item { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none; } [data-cattype="235"] .list-item > li { flex: 0 0 60vw; width: 60vw; min-width: 60vw; max-width: 60vw; list-style: none; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; box-sizing: border-box; } [data-cattype="235"] .list-item > li details { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 0; padding: 18px 16px; overflow: hidden; transition: none; } [data-cattype="235"] .list-item > li details[open], [data-cattype="235"] .list-item > li details:has(summary[expanded]), [data-cattype="235"] .list-item > li summary, [data-cattype="235"] .list-item > li summary[expanded] { width: 100%; min-width: 0; max-width: 100%; } [data-cattype="235"] .list-item > li *, [data-cattype="235"] .list-item > li *::before, [data-cattype="235"] .list-item > li *::after { box-sizing: border-box; max-width: 100%; } [data-cattype="235"] .list-item > li details-content { display: block; height: 0; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; padding-block-start: 0; overflow-wrap: anywhere; word-break: break-word; transition: none; } [data-cattype="235"] .list-item > li details[open] details-content { height: auto; overflow: hidden; } [data-cattype="235"] .list-item > li details-content > * { max-width: 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } [data-cattype="235"] .list-item > li summary { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: start; gap: 12px; min-height: 0; } [data-cattype="235"] .list-item > li summary h3 { line-height: 1.15; margin: 0; min-width: 0; word-break: break-word; padding-bottom: 5px; } [data-cattype="235"] .list-item > li summary .circle-icon { width: 28px; min-width: 28px; height: 28px; justify-self: end; } [data-cattype="235"] .list-item > li summary .circle-icon svg { width: 28px; height: 28px; } [data-cattype="235"] .scroll-indicator { display: block; width: 100%; height: 4px; margin: 10px 0 0; background: rgba(0, 0, 0, 0.16); border-radius: 999px; overflow: hidden; } [data-cattype="235"] .scroll-indicator-bar { display: block; width: 40px; height: 100%; background: #111; border-radius: 999px; transition: transform 0.25s ease; } [data-cattype="235"] .scroll-indicator.is-hidden { display: block; opacity: 0; pointer-events: none; } [data-cattype="235"] .list-item-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } }