@charset "utf-8";

/*
 * File    : sub-platform.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * PLATFORM
 * ARCHITECTURE
 * HOVER
 */

 

/* **************************************** *
 * PLATFORM
 * **************************************** */
/* VISUAL */
.platform-visual { background: var(--color-black); padding: 80rem 0 0; }
.platform-visual__head { color: var(--color-white); }
.platform-visual__desc { margin-top: 20rem; }
.platform-visual__webgl { position: relative; aspect-ratio: 1 / .4687; }
.platform-visual__webgl-bg {  position: absolute; inset: 0; background: no-repeat center center / cover; }
.platform-visual__webgl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.platform-visual__webgl-anchor { position: absolute; top: 50%; left: 50%; width: 1130rem; aspect-ratio: 1 / 0.6353; transform: translate(-50%, -50%); }

/* ARCHITECTURE */
.platform-architecture { background: var(--color-gray-100); padding: 120rem 0; --margin-gap: -120rem; }
.platform-architecture__container { margin-top: 60rem; }
.platform-architecture__item { position: relative; display: flex; justify-content: center; align-items: center; }
.platform-architecture__item + .platform-architecture__item { margin-top: var(--margin-gap); }
.platform-architecture__image { width: 723rem; }
.platform-architecture__image .jt-lazyload { padding-top: 57.95%; }
.platform-architecture__content { position: absolute; width: 440rem; }
.platform-architecture__content-category { display: flex; align-items: center; gap: 10rem; margin-bottom: 30rem; }
.platform-architecture__content-title { margin-bottom: 10rem; }
.platform-architecture__content-desc { margin-bottom: 20rem; }
.platform-architecture__content-control { display: flex; gap: 20rem; }
.platform-architecture__content-control > a { display: inline-flex; gap: 4rem; align-items: center; white-space: nowrap; color: var(--color-black); box-shadow: inset 0 -1px 0 0 currentColor; transition: box-shadow .3s; }
.platform-architecture__content-control .jt-icon { width: 15rem; }
.platform-architecture__content-feature li { position: relative; padding-left: 30rem; }
.platform-architecture__content-feature li:before { content: ''; position: absolute; width: 4rem; height: 4rem; left: 14rem; top: calc(var(--font-size-primary-08) * var(--font-lineheight-primary-08) / 2); margin-top: -2rem; border-radius: 50%; background: currentColor; }

.platform-architecture__item--01 { z-index: 5; }
.platform-architecture__item--02 { z-index: 4; }
.platform-architecture__item--02 .platform-architecture__content { left: 0; }
.platform-architecture__item--03 { z-index: 3; }
.platform-architecture__item--03 .platform-architecture__content { right: 0; }
.platform-architecture__item--04 { z-index: 2; }
.platform-architecture__item--04 .platform-architecture__content { left: 0; }
.platform-architecture__item--05 { z-index: 1; }
.platform-architecture__item--05 .platform-architecture__content { right: 0; }

/* INTELLIGENCE */
.platform-intelligence { background: var(--color-black); padding: 80rem 0; }

/* PROMISE */
.platform-promise { padding: 120rem 0; }

/* BEFORE & AFTER */
.platform-beforeafter { padding: 100rem 0 }
.platform-beforeafter__container { display: flex; }
.platform-beforeafter__column { flex: 1; position: relative; }
.platform-beforeafter__row { display: flex; align-items: center; justify-content: center; text-align: center; gap: 10rem; height: 73rem; border-bottom: 1px solid var(--color-gray-500); color: var(--color-gray-700); }
.platform-beforeafter__row:nth-child(1) { height: 156rem; border-top: 1px solid var(--color-gray-500); }
.platform-beforeafter__row .jt-icon { width: 24rem; }
.platform-beforeafter__row .jt-icon path { fill: var(--color-black); }

.platform-beforeafter--after:before { content: ''; position: absolute; bottom: 100%; left: 0; width: 100%; border: 2rem solid var(--color-gray-700); box-sizing: border-box; }
.platform-beforeafter--after:after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; border: 2rem solid var(--color-gray-700); box-sizing: border-box; }
.platform-beforeafter--after .platform-beforeafter__row { background: var(--color-white); color: var(--color-black); border-color: var(--color-gray-700); }

/* ADOPT */
.platform-adopt { padding: 120rem 0; }
.platform-adopt__container { display: flex; }
.platform-adopt__head { flex: 1; padding-right: 120rem; }
.platform-adopt__content { width: 50%; }
.platform-adopt__item { padding: 40rem 0; border-top: 1px solid var(--color-gray-700); }
.platform-adopt__item > span { display: block; margin-bottom: 10rem; color: var(--color-gray-700); }
.platform-adopt__item > b { display: block; margin-bottom: 32rem; }
.platform-adopt__item .jt-btn__basic { padding-left: 24rem; padding-right: 24rem; min-width: 320rem; }





/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* ARCHITECTURE */
    .platform-architecture__content-control > a:hover { box-shadow: inset 0 -2px 0 0 currentColor; }

}