@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * LAYOUT
 * VISUAL
 * CONNECT
 * GARDEN
 * CONSTRUCT
 * DIRECTOR
 * BOARD
 * POPUP
 * HOVER
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
/* CONTAINER */
body.home .main-container { padding-top: 0; overflow: hidden; }

/* SECTION */
.main-section { position: relative; }
.main-section__title + .main-section__desc { margin-top: 50rem; }
.main-section__desc p { color: var(--color-gray-900); }
.main-section__desc p + p { margin-top: 20rem; }
.main-section__more { margin-top: 50rem; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { position: relative; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
html.kakao .main-visual { height: var(--fit-height); }
body.main-visual--running .main-visual:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
body.main-visual--running #header { opacity: 0 !important; visibility: hidden !important; }

.main-visual__slider { width: 100%; height: 100%; border: 20rem solid var(--color-white); }

/*.main-visual__slide-video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }*/
.main-visual__slide-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: no-repeat center center / cover; }

.main-visual__slide--mobile { display: none; }

.main-visual__message { position: absolute; bottom: 50rem; left: 40rem; font-size: 0; color: var(--color-white); cursor: default; width: calc(100% - 80rem); padding-right: 122rem; overflow: hidden; white-space: nowrap; }
.main-visual__message-inner { display: inline-block; opacity: 0; transition: opacity .3s; transition-delay: .3s; }
.main-visual__message .jt-icon { width: 30rem; height: 30rem; margin-right: 4rem; }
.main-visual__message .jt-icon svg path { fill: none; stroke: none; stroke-width: 0; }
.main-visual__message span { vertical-align: middle; position: relative; top: 1rem; }

.main-visual__slide.swiper-slide-active .main-visual__message-inner { opacity: 1; }
.main-visual__slider.main-visual__slider--single .main-visual__message-inner { opacity: 1; }

.main-visual__slide--type-01 .main-visual__message .jt-icon svg path,
.main-visual__slide--type-02 .main-visual__message .jt-icon svg path,
.main-visual__slide--type-05 .main-visual__message .jt-icon svg path  { fill: var(--color-white); }
.main-visual__slide--type-03 .main-visual__message .jt-icon svg path,
.main-visual__slide--type-04 .main-visual__message .jt-icon svg path { stroke: var(--color-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.main-visual .swiper-controls { display: inline-flex; align-items: center; gap: 6rem; position: absolute; bottom: 50rem; right: 40rem; z-index: 1; }
.main-visual .swiper-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30rem; height: 30rem; transition: opacity .3s; }
.main-visual .swiper-button .jt-icon { width: 20rem; height: 20rem; }
.main-visual .swiper-button .jt-icon svg path { fill: var(--color-white); }
.main-visual .swiper-button-prev { left: auto; }
.main-visual .swiper-button-next { right: auto; }
.main-visual .swiper-pagination { display: inline-flex; align-items: center; position: relative; width: auto; left: auto; bottom: auto; gap: 8rem; }
.main-visual .swiper-pagination > span { color: var(--color-white); }
.main-visual .swiper-pagination-current,
.main-visual .swiper-pagination-total { min-width: 1em; }
.main-visual .swiper-pagination-slug { width: 6rem; height: 12rem; }
.main-visual .swiper-pagination-slug svg path { fill: var(--color-white); }

.main-visual__identity { position: absolute; left: 50%; top: 50%; width: 200rem; transform: translate(-50%, -50%); z-index: 1; visibility: hidden; opacity: 0; }
.main-visual__identity-logo { display: block; }
.main-visual__identity-logo img { width: 100%; vertical-align: top; }



/* **************************************** *
 * CONNECT
 * **************************************** */
.main-connect { padding: 140rem 0 240rem; text-align: center; overflow: hidden; }
.main-connect .main-section__title { will-change: transform; }
.main-connect .main-section__desc p { will-change: transform; }
.main-connect .main-section__more { will-change: transform; }



/* **************************************** *
 * GARDEN
 * **************************************** */
.main-garden { height: 100vh; font-size: 0; overflow: hidden; }
html.kakao .main-garden { height: var(--full-height); }
.main-garden__inner { position: absolute; width: 100%; top: 0; left: 0; display: flex; justify-content: space-between; }
.main-garden__section { position: absolute; display: inline-block; vertical-align: top; white-space: nowrap; width: 50%; overflow: hidden; }
.main-garden__anchor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; filter: grayscale(1); transition: filter .3s; }
.main-garden__anchor-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; opacity: 0; visibility: hidden; }
.main-garden__anchor-bg.main-garden__anchor--mobile { display: none; }
.main-garden__anchor-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; writing-mode: vertical-lr; opacity: 0; visibility: hidden; }
.main-garden__anchor-inner:after { content :''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; opacity: .4; }
.main-garden__anchor-inner b { position: relative; z-index: 1; }

.main-garden__desc { margin-top: 8rem; color: var(--color-gray-800); white-space: normal; }

.main-garden-korea { left: 0; }
.main-garden-modern { right: 0; }

.main-garden-korea .main-garden__anchor-bg { background: no-repeat 41% 50% / cover; }
.main-garden-modern .main-garden__anchor-bg { background: no-repeat 59.4% 50% / cover; }

.main-garden-korea__section,
.main-garden-modern__section { position: relative; display: inline-flex; vertical-align: top; width: 100%; height: 100vh; overflow: hidden; }
html.kakao .main-garden-korea__section,
html.kakao .main-garden-modern__section { height: var(--full-height); }

.main-garden-korea__intro { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.main-garden-korea__intro-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat 50% 50% / cover; }
.main-garden-korea__intro-bg.main-garden-korea__intro--mobile { display: none; }
.main-garden-korea__intro .main-garden__desc { white-space: nowrap; }

.main-garden-modern__intro { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.main-garden-modern__intro-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat 50% 50% / cover; }
.main-garden-modern__intro-bg.main-garden-modern__intro--mobile { display: none; }
.main-garden-modern__intro .main-garden__desc { white-space: nowrap; }

.main-garden-korea__content { display: flex; flex-direction: column; flex: 1; padding: 0 100rem 0 202rem; gap: 100rem; }
.main-garden-korea__text .main-garden__desc { margin-top: 24rem; }
.main-garden-korea__large { width: 46.84%; }
.main-garden-korea__large-image { height: 100%; }
.main-garden-korea__large-image .jt-lazyload { height: 100%; }
.main-garden-korea__large-image .jt-lazyload img { height: 100%; object-fit: cover; }

.main-garden-korea__small-image { max-width: 100%; width: 476rem; overflow: hidden; }
/*.main-garden-korea__small-image .jt-lazyload { padding-top: 111.13%; }*/
.main-garden-korea__small-image .jt-lazyload img { height: 100%; object-fit: cover; }

.main-garden-korea__01 .main-garden-korea__content{ justify-content: end; flex-direction: column-reverse; }

.main-garden-korea__epilogue-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center bottom / cover; }
.main-garden-korea__epilogue-bg.main-garden-korea__epilogue--mobile { display: none; }
.main-garden-korea__epilogue-content { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(0, 0, 0, .2); }
.main-garden-korea__epilogue-message { color: var(--color-white); }
.main-garden-korea__epilogue-more { margin-top: 30rem; }

.main-garden-modern__image { position: relative; width: 52.16%; height: 100%; }
.main-garden-modern__image-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.main-garden-modern__image-bg.main-garden-modern__image--mobile { display: none; }
.main-garden-modern__image .main-garden__title { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-white); background: rgba(0, 0, 0, .3); }
.main-garden-modern__image .main-garden__title br { display: none; }
.main-garden-modern__content { position: relative; flex: 1;  display: grid; align-items: center; justify-content: center; padding: 0 100rem; background: var(--color-gray-200); }
.main-garden-modern__source .main-garden__desc { color: var(--color-black); margin-top: 0; }
.main-garden-modern__director { display: block; margin-top: 24rem; color: var(--color-gray-700); }

.main-garden-modern__section--01 { position: absolute; left: 100%; }
.main-garden-modern__section--02 { position: absolute; left: 100%; }
.main-garden-modern__section--03 { position: absolute; left: 100%; }

.main-garden-modern__epilogue { position: absolute; left: 100%; }
.main-garden-modern__epilogue-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center bottom / cover; }
.main-garden-modern__epilogue-bg.main-garden-modern__epilogue--mobile { display: none; }
.main-garden-modern__epilogue-content { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(0, 0, 0, .2); }
.main-garden-modern__epilogue-message { color: var(--color-white); }
.main-garden-modern__epilogue-more { margin-top: 30rem; }



/* **************************************** *
 * CONSTRUCT
 * **************************************** */
.main-construct { padding: 120rem 0; overflow: hidden; }
.main-construct .main-section__title--mobile { display: none; }
.main-construct__container { display: flex; align-items: center; justify-content: space-between; gap: 80rem; }
.main-construct__content { position: relative; flex: 1; }
.main-construct__content .main-section__desc { margin-top: 40rem; }
.main-construct__content .main-section__desc p { color: var(--color-gray-800); line-height: 44rem; }
.main-construct__content .main-section__more { margin-top: 60rem; }
.main-construct__anchor { cursor: inherit; transition: color .3s; }
.main-construct__anchor > span { display: inline-block; position: relative; }
.main-construct__anchor > span:after { content: ''; position: absolute; bottom: 12%; left: 0; width: 100%; height: 2px; background: var(--color-gray-800); transition: background .3s; }
.main-construct__anchor--active { color: var(--color-black); }
.main-construct__anchor--active > span:after { background: var(--color-black); }
.main-construct__image-wrap { max-width: 604rem; width: 100%; overflow: hidden; }
.main-construct__image-list { position: relative; padding-top:150%; }
.main-construct__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: opacity .7s, visibility .7s; }
.main-construct__image .jt-lazyload { height: 100%; transform: scale(1.2); transition: opacity .3s, transform 1s; }
.main-construct__image--active { visibility: visible; opacity: 1; }
.main-construct__image--active .jt-lazyload { transform: scale(1); }


/* **************************************** *
 * DIRECTOR
 * **************************************** */
.main-director { background: var(--color-gray-100); overflow: hidden; }
.main-director__sticky { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
html.kakao .main-director__sticky { height: var(--full-height); }
.main-director__sticky .main-section__title + .main-section__desc { margin-top: 8rem; }
.main-director__sticky .main-section__more { margin-top: 30rem; }
.main-director__more { display: none; }

.main-director__container { position: relative; pointer-events: none; }

.main-director__item { position: absolute; }
.main-director__item--01 { width: 300rem; top: 0; right: 0; padding-top: 120rem; }
.main-director__item--01 .jt-lazyload { padding-top: 80%; }
.main-director__item--02 { width: 348rem; top: 280rem; left: 0; }
.main-director__item--02 .jt-lazyload { padding-top: 132.18%; }
.main-director__item--03 { width: 476rem; top: 640rem; right: 256rem; }
.main-director__item--03 .jt-lazyload { padding-top: 100%; }
.main-director__item--04 { width: 220rem; top: 1080rem; left: 256rem; }
.main-director__item--04 .jt-lazyload { padding-top: 100%; }
.main-director__item--05 { width: 300rem; top: 1356rem; right: 0; }
.main-director__item--05 .jt-lazyload { padding-top: 80%; }
.main-director__item--06 { width: 348rem; top: 1620rem; left: 0; }
.main-director__item--06 .jt-lazyload { padding-top: 132.18%; }
.main-director__item--07 { width: 220rem; top: 1956rem; right: 256rem; }
.main-director__item--07 .jt-lazyload { padding-top: 100%; }
.main-director__item--08 { width: 476rem; top: 2416rem; left: 50%; margin-left: -238rem; padding-bottom: 200rem; }
.main-director__item--08 .jt-lazyload { padding-top: 100%; }



/* **************************************** *
 * BOARD
 * **************************************** */
.main-board { padding: 200rem 0 240rem; background: var(--color-white); overflow: hidden; }
.main-board .main-section__title { text-align: center; }
.main-board .jt-board__list { margin-top: 60rem; }



/* **************************************** *
 * POPUP
 * **************************************** */
.main-popup .jt-popup__image { max-width: 480rem; }



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

    /* VISUAL */
    .main-visual .swiper-controls .swiper-button:hover { opacity: .7; }

    /* GARDEN */
    .main-garden__anchor:hover { filter: grayscale(0); }

    /* CONSTRUCTOR */
    .main-construct__anchor:hover { color: var(--color-black); }
    .main-construct__anchor:hover > span:after { background: var(--color-black); }

}