@charset "utf-8";

/*
 * File       : home.css
 * Author     : STUDIO-JT (KMS)
 *
 * SUMMARY:
 * GLOBAL
 * LOADING
 * VISUAL
 * ROLE
 * CURATOR
 * SOLUTION
 * ANIMATION
 * ORIENTATION
 * HOVER
 * TOUCH DEVICE
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
body { --main-fvh: 100vh; --main-black: #000; }

html:is(.samsungbrowser, .kakao) body { --main-fvh: 100lvh; }

/* HEADER */
body:not(.open-menu--motion) #header { background: transparent; }

body.open-menu--motion #header:after { transition: background-color .3s, border-color .3s; }
body:not(.open-menu--motion) #header:after { background: transparent; border-bottom-color: transparent; transition: background-color 0s, border-color 0s; }

#logo svg path { transition: fill .3s; }
.menu-controller__line { transition: background-color .3s; }

body.main-bg--inevrt:not(.open-menu--motion) #logo svg path { fill: var(--color-white); }
body.main-bg--inevrt:not(.open-menu--motion) .header__language a.header__language--current { color: var(--color-white); }
body.main-bg--inevrt:not(.open-menu--motion) .menu-controller__line { background: var(--color-white); }

/* 공통 UI */
.main-section { position: relative; }
.main-section__screen { overflow: hidden; pointer-events: none; }
.main-section__screen-inner { height: var(--main-fvh); position: relative; }

.main-section__message { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.main-section__message-inner { height: var(--main-fvh); position: relative; }
.main-section__message-item { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; text-align: center; opacity: 0; }

/* SCROLL DOWN */
.main-scroll-helper { position: fixed; bottom: 44rem; left: 50%; padding: 4rem; margin-left: -22rem; z-index: 10; }
.main-scroll-helper .jt-icon { width: 36rem; height: 36rem; animation: scroll-down 2.5s ease-in-out infinite; }
.main-scroll-helper .jt-icon svg path { fill: var(--color-gray-700); }



/* **************************************** *
 * LOADING
 * **************************************** */
.loading-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: var(--main-black); z-index: 9999; }

.loading-overlay__logo { position: absolute; top: calc(50% - 10rem); left: 50%; transform: translate(-50%, -50%); }
.loading-overlay__logo svg { display: block; width: 184rem; height: auto; }
.loading-overlay__outline svg path { fill: var(--color-gray-700); }
.loading-overlay__fill { width: 0%; position: absolute; top: 0; left: 0; overflow: hidden; }
.loading-overlay__fill svg path { fill: var(--color-white); }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { height: calc(var(--main-fvh) * 2.3); background: var(--main-black); }

/* BG OBJECT */
.main-visual__screen { width: 100%; height: 100%; position: fixed; }

.jt-spline-wrap { height: 100%; }
.jt-spline-wrap canvas { width: 100%; height: 100%; }

/* MESSAGE */
.main-visual .main-section__message-item:not(:first-child) { opacity: 0; }
.main-visual .main-section__message-item p { color: var(--color-white); }

/* SCROLL DOWN */
.main-visual .main-scroll-helper .jt-icon svg path { fill: var(--color-white); }

/* MOBILE */
html.mobile .main-visual .main-section__message-item:first-child { height: 100svh; }



/* **************************************** *
 * ROLE
 * **************************************** */
/* BG OBJECT */
.main-role .main-section__screen { height: calc(var(--main-fvh) * 12); }

/* BLACK LAYER */
.main-role__dark { width: 141.5vw; height: 141.5vw; position: absolute; top: 50%; left: 50%; background: var(--main-black); border-radius: 50%; transform: translate3d(-50%, -50%, 0); }

/* LINE ASSET */
.main-role__plane { width: calc(var(--main-fvh) * 0.8176); max-width: 780rem; max-height: 780rem; aspect-ratio: 1 / 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.main-role__plane > * { display: block; width: 100%; height: auto; position: absolute; top: 50%; left: 50%; }
.main-role__plane svg { display: block; width: 100%; height: auto; overflow: visible; will-change: transform; }

.main-role__plane > *.main-role__plane--circle { transform: translate(-50%, -50%) rotate(-180deg); }
.main-role__plane > *.main-role__plane--sonic { transform: translate(-50%, -50%); }
.main-role__plane > *.main-role__plane--orb { width: auto; height: 100%; aspect-ratio: 2.4 / 1; transform: translate(-50%, -50%); }

/* SPHERE ASSET */
.main-role__filled { width: calc(var(--main-fvh) * 0.8176); max-width: 780rem; max-height: 780rem; aspect-ratio: 1 / 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.main-role__filled > * { display: block; width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.main-role__filled .jt-lazyload { width: 100%; aspect-ratio: 1 / 1; }

/* MESSAGE */
.main-role .main-section__message-item p > span { display: block; }
.main-role .main-section__message-item:nth-child(1) p > span:last-child { color: var(--color-gray-400); }
.main-role .main-section__message-item:nth-child(2) p > span:last-child { color: var(--color-gray-600); }

.main-role .main-section__message-item:nth-child(1) p > span:first-child br { display: none; }

/* LOGO VIDEO */
.main-role__viewer { display: none; width: 440rem; margin-top: 8rem; position: relative; aspect-ratio: 1 / 1; z-index: -1; }
.main-role__video { width: 100%; height: 100%; }
.main-role__video video { width: 100%; height: auto; clip-path: inset(0); }
.main-role__poster { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; }
.main-role__poster > span { display: block; width: 100%; height: 100%; background: no-repeat center center / cover; }

/* SCROLL DOWN */
.main-role .main-scroll-helper { opacity: 0; }



/* **************************************** *
 * CURATOR
 * **************************************** */
/* BG OBJECT */
.main-curator .main-section__screen { height: calc(var(--main-fvh) * 4); }

/* CIRCLE LAYER */
.main-curator__balls { width: calc(var(--main-fvh) * 0.6886); max-width: 657rem; max-height: 657rem; aspect-ratio: 1 / 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.main-curator__balls > span { --clip-space: 50%; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--main-black); border-radius: 50%; }
.main-curator__balls > span:nth-child(1),
.main-curator__balls > span:nth-child(2),
.main-curator__balls > span:nth-child(3) { clip-path: inset(0% var(--clip-space) 0% 0% round 0%); }
.main-curator__balls > span:nth-child(4),
.main-curator__balls > span:nth-child(5),
.main-curator__balls > span:nth-child(6) { clip-path: inset(0% 0% 0% var(--clip-space) round 0%); }

/* VIDEO */
.main-curator__movie { height: calc(var(--main-fvh) * 0.6886); max-height: 657rem; aspect-ratio: 1320 / 657; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-mask: url(../images/main/curator-sprite.png) no-repeat 0% 0% / 100% 2700%; mask: url(../images/main/curator-sprite.png) no-repeat 0% 0% / 100% 2700%; animation: wave 1.5s steps(26) infinite; }
.main-curator__movie-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.main-curator__movie-item:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .5); }
.main-curator__movie .jt-background-video__vod video { width: 100%; height: 100%; min-width: inherit; min-height: inherit; top: 0; left: 0; transform: none; object-fit: cover; }

/* MESSAGE */
.main-curator .main-section__message-item > * { color: var(--color-white); }
.main-curator .main-section__message-item > span { display: block; margin-bottom: 4rem; color: var(--color-gray-400); }



/* **************************************** *
 * SOLUTION
 * **************************************** */
.main-solution { overflow: hidden; }

.main-solution__horizontal { display: flex; position: relative; z-index: 1; }
.main-solution__horizontal-inner { display: flex; flex-direction: column; justify-content: center; height: var(--main-fvh); }

.main-solution__horizontal-title { width: 100vw; margin-bottom: 58rem; text-align: center; color: var(--color-white); }
.main-solution__horizontal-title > p { margin-top: 16rem; color: var(--color-gray-600); }

.main-solution__horizontal-progress { width: 100vw; margin-top: 62rem; font-size: 0; text-align: center; }
.main-solution__horizontal-progress-bar { display: inline-block; width: 400rem; height: 4rem; position: relative; background: var(--color-gray-700); }
.main-solution__horizontal-progress-bar > i { width: 0; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-white); }

/* LIST */
.main-solution__list { display: flex; align-items: center; }
.main-solution__list-item { width: calc(var(--main-fvh) * 0.5346); max-width: 510rem; max-height: 510rem; aspect-ratio: 1 / 1; position: relative; overflow: hidden; }

.main-solution__list-basic { width: 100%; height: 100%; position: relative; border-radius: 50%; overflow: hidden; }
.main-solution__list-basic > b { display: block; width: 100%; padding: 40rem; position: absolute; top: 50%; left: 50%; text-align: center; color: var(--color-white); transform: translate(-50%, -50%); box-sizing: border-box; }
.main-solution__list-basic > b:has(.jt-icon) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4rem; }
.main-solution__list-basic > b .jt-icon { width: 20rem; }
.main-solution__list-basic > b .jt-icon svg path { fill: var(--color-white); }
.main-solution__list-thumb { transform: scale(1.1); }
.main-solution__list-thumb .jt-lazyload { padding-top: 100%; }

.main-solution__list-hover { display: flex; flex-direction: column; justify-content: center; gap: 8rem; width: calc(50% + 4px); height: 100%; padding: 32rem; position: absolute; top: 0; right: -2px; background: var(--main-black); overflow: hidden; transform: translateX(100%); visibility: hidden; }
.main-solution__list-title { line-height: 1.5833; color: var(--color-white); }
.main-solution__list-title:has(.jt-icon) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8rem; }
.main-solution__list-title .jt-icon { width: 20rem; }
.main-solution__list-title .jt-icon svg path { fill: var(--color-white); }
.main-solution__list-desc { color: var(--color-gray-600); }
.main-solution__list-link { display: inline-block; width: 40rem; margin-top: 12rem; position: relative; background: var(--color-gray-300); border-radius: 50%; transition: background .3s; overflow: hidden; flex-shrink: 0; }
.main-solution__list-link i { display: block; width: 100%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.main-solution__list-link svg { display: block; width: 100%; height: auto; transition: transform .4s; }
.main-solution__list-link svg path { fill: var(--color-gray-700); transition: fill .3s; }
.main-solution__list-link i:nth-child(2) { position: absolute; }
.main-solution__list-link i:nth-child(2) svg { transform: translateX(-100%); }



/* **************************************** *
 * ANIMATION
 * **************************************** */
@keyframes wave {
    from { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; }
    to { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
}

@keyframes scroll-down {
    0% { transform: translateY(-10rem); opacity: .2; }
    50% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-10rem); opacity: .2; }
}



/* **************************************** *
 * ORIENTATION
 * **************************************** */
@media (orientation: portrait) {

    /* VISUAL */
    .main-visual { height: calc(var(--main-fvh) * 2); }

    /* ROLE */
    .main-role__dark { width: 141.5vh; height: 141.5vh; }

    .main-role__plane { width: 60vw; }
    .main-role__filled { width: 60vw; }

    /* CURATOR */
    .main-curator__balls { width: 50vw; }
    .main-curator__movie { width: 100vw; height: auto; }

    /* SOLUTION */
    .main-solution__list-item { width: 40vw; }

}



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

    /* HEADER */
    body.main-bg--inevrt:not(.open-menu--motion) .header__language a:not(.header__language--current):hover { color: var(--color-white); }

    /* SOLUTION */
    .main-solution__list-link:hover { background: var(--color-gray-600); }
    .main-solution__list-link:hover svg path { fill: var(--color-white); }
    .main-solution__list-link:hover i:nth-child(1) svg { transform: translateX(100%); }
    .main-solution__list-link:hover i:nth-child(2) svg { transform: translateX(0); }    

}