@charset "utf-8";

/*
 * File    : rwd-main.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * 1680px
 * 1480px
 * 1200px
 * 1023px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1680px
 * **************************************** */
@media (max-width: 1680px){

    /* GARDEN */
    .main-garden-korea__content { padding: 0 90rem; gap: 60rem; }
    .main-garden-korea__small-image { width: 420rem; max-height: 50vh; }

    .main-garden-modern__content { padding: 0 90rem; }

    /* CONSTRUCT */
    .main-construct__image-wrap { max-width: 540rem; }

}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    /* CONNECT */
    .main-connect { padding: 140rem 0 200rem; }

    /* BOARD */
    .main-board { padding: 200rem 0; }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    /* LAYOUT */
    .main-section__title + .main-section__desc { margin-top: 40rem; }
    .main-section__more { margin-top: 40rem; }

    /* VISUAL */
    .main-visual__message { left: 30rem; bottom: 40rem; width: calc(100% - 60rem); }
    .main-visual .swiper-controls { right: 30rem; bottom: 80rem; }

    /* CONNECT */
    .main-connect { padding: 140rem 0; }

    /* GARDEN */
    .main-garden-modern__image .main-garden__title br { display: block; }

    body.jt-orientation--landscape .main-garden-korea__content { width: 50%; gap: 48rem; padding: 0 80rem 0 60rem; }
    body.jt-orientation--landscape .main-garden-korea__large { width: 50%; }
    body.jt-orientation--landscape .main-garden-korea__small-image { width: 320rem; }
    
    body.jt-orientation--landscape .main-garden-modern__image { width: 50%; }
    body.jt-orientation--landscape .main-garden-modern__content { width: 50%; padding: 0 60rem 0 80rem; }
    
    body.jt-orientation--portrait .main-garden__inner { display: block; height: 100%; }
    body.jt-orientation--portrait .main-garden__section { display: block; width: 100%; white-space: normal; }
    body.jt-orientation--portrait .main-garden__anchor { display: none; }
    body.jt-orientation--portrait .main-garden-korea__intro .main-garden__desc { white-space: normal; }
    body.jt-orientation--portrait .main-garden-modern__intro .main-garden__desc { white-space: normal; }

    body.jt-orientation--portrait .main-garden-korea__section,
    body.jt-orientation--portrait .main-garden-modern__section { display: flex; }
    body.jt-orientation--portrait .main-garden-korea { top: 0; }
    body.jt-orientation--portrait .main-garden-korea__content { padding: 0; gap: 0; width: 100%; }
    body.jt-orientation--portrait .main-garden-korea__small { height: calc(100vh * .2511); }
    html.kakao body.jt-orientation--portrait .main-garden-korea__small { height: calc(var(--full-height) * .2511); }
    body.jt-orientation--portrait .main-garden-korea__small-image { width: 48.71%; height: 100%; }
    body.jt-orientation--portrait .main-garden-korea__small-image .jt-lazyload { padding-top: 0; height: 100%; }
    body.jt-orientation--portrait .main-garden-korea__large { display: flex; justify-content: end; width: 100%; height: calc(100vh * .3708) }
    html.kakao body.jt-orientation--portrait .main-garden-korea__large { height: calc(var(--full-height) * .3708); }
    body.jt-orientation--portrait .main-garden-korea__large-image { width: 71.79%; height: 100%; }
    body.jt-orientation--portrait .main-garden-korea__large-image .jt-lazyload { padding-top: 0; height: 100%; }
    body.jt-orientation--portrait .main-garden-korea__text { flex: 1; text-align: center; padding: 40rem; display: grid; align-content: center; }
    body.jt-orientation--portrait .main-garden-korea__intro { padding-left: 0; display: flex; }
    body.jt-orientation--portrait .main-garden-korea__spring { flex-direction: column; }
    body.jt-orientation--portrait .main-garden-korea__summer { flex-direction: column; position: absolute; top: 100vh; }
    html.kakao body.jt-orientation--portrait .main-garden-korea__summer { top: var(--full-height); }
    body.jt-orientation--portrait .main-garden-korea__summer .main-garden-korea__text,
    body.jt-orientation--portrait .main-garden-korea__summer .main-garden-korea__small,
    body.jt-orientation--portrait .main-garden-korea__summer .main-garden-korea__large { opacity: 0; visibility: hidden; }
    body.jt-orientation--portrait .main-garden-korea__autumn { flex-direction: column; position: absolute; top: 100vh; }
    html.kakao body.jt-orientation--portrait .main-garden-korea__autumn { top: var(--full-height); }
    body.jt-orientation--portrait .main-garden-korea__autumn .main-garden-korea__text,
    body.jt-orientation--portrait .main-garden-korea__autumn .main-garden-korea__small,
    body.jt-orientation--portrait .main-garden-korea__autumn .main-garden-korea__large { opacity: 0; visibility: hidden; }
    body.jt-orientation--portrait .main-garden-korea__winter { flex-direction: column; position: absolute; top: 100vh; }
    html.kakao body.jt-orientation--portrait .main-garden-korea__winter { top: var(--full-height); }
    body.jt-orientation--portrait .main-garden-korea__winter .main-garden-korea__text,
    body.jt-orientation--portrait .main-garden-korea__winter .main-garden-korea__small,
    body.jt-orientation--portrait .main-garden-korea__winter .main-garden-korea__large { opacity: 0; visibility: hidden; }
    body.jt-orientation--portrait .main-garden-korea__summer .main-garden-korea__content,
    body.jt-orientation--portrait .main-garden-korea__winter .main-garden-korea__content { justify-content: start; flex-direction: column; }

    body.jt-orientation--portrait .main-garden-modern { top: 100%; }
    body.jt-orientation--portrait .main-garden-modern__image { width: 100%; }
    body.jt-orientation--portrait .main-garden-modern__content { width: 100%; height: 100%; padding: 0 40rem; justify-content: stretch; }
    body.jt-orientation--portrait .main-garden-modern__source { text-align: center; }
    body.jt-orientation--portrait .main-garden-modern__intro { padding-right: 0; }
    body.jt-orientation--portrait .main-garden-modern__section--01 { display: block; left: 0; top: 100%; }
    body.jt-orientation--portrait .main-garden-modern__section--02 { display: block; left: 0; top: 100%; }
    body.jt-orientation--portrait .main-garden-modern__section--03 { display: block; left: 0; top: 100%; }
    body.jt-orientation--portrait .main-garden-modern__epilogue { left: 0; top: 100%; }

    /* CONSTRUCT */
    .main-construct__content .main-section__desc p { line-height: 40rem; }
    .main-construct__content .main-section__desc br { display: none; }
    .main-construct__content .main-section__more { margin-top: 40rem; }
    .main-construct__image-wrap { max-width: 480rem; }

    /* DIRECTOR */
    .main-director__item--01 { width: 240rem; }
    .main-director__item--02 { width: 278rem; top: 320rem; }
    .main-director__item--03 { width: 380rem; top: 608rem; right: 160rem; }
    .main-director__item--04 { width: 176rem; top: 960rem; left: 160rem; }
    .main-director__item--05 { width: 240rem; top: 1180rem; }
    .main-director__item--06 { width: 278rem; top: 1392rem; }
    .main-director__item--07 { width: 176rem; top: 1660rem; right: 160rem; }
    .main-director__item--08 { width: 380rem; top: 2028rem; margin-left: -190rem; padding-bottom: 140rem; }

    /* BOARD */
    .main-board { padding: 140rem 0; }

}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){

    /* CONNECT */
    .main-connect { padding: 120rem 0; }

    /* CARDEN */
    body.jt-orientation--landscape .main-garden-korea__text .main-garden__desc br { display: none; }
    body.jt-orientation--landscape .main-garden-modern__source .main-garden__desc br { display: none; }
    
    /* DIRECTOR */
    .main-construct__container { gap: 40rem; }

    /* DIRECTOR */
    .main-director__item--03 { right: 100rem; }
    .main-director__item--04 { left: 100rem; }
    .main-director__item--07 { right: 100rem; }
    .main-director__item--08 { padding-bottom: 120rem; }

    /* BOARD */
    .main-board { padding: 120rem 0; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* VISUAL */
    .main-visual .swiper-controls { }
    .main-visual__message { padding-right: 0; opacity: 0; left: 0; bottom: 30rem; width: 100%; }
    .main-visual__slide.swiper-slide-active .main-visual__message { opacity: 1; }
    .main-visual__slider--single .main-visual__message { opacity: 1; }

    /* CONNECT */
    .main-connect { padding: 100rem 0 120rem; }
    
    /* GARDEN */
    .main-garden__desc { margin-top: 4rem; }
    .main-garden-korea__text .main-garden__desc { margin-top: 20rem; }
    .main-garden-korea__epilogue-message { font-size: var(--font-size-ko-06); line-height: var(--font-lineheight-ko-06); }
    .main-garden-korea__epilogue-more { margin-top: 40rem; }
    .main-garden-modern__image .main-garden__title { padding: 0 40rem; }
    .main-garden-modern__director { margin-top: 20rem; } 
    .main-garden-modern__epilogue-message { font-size: var(--font-size-ko-06); line-height: var(--font-lineheight-ko-06); }
    .main-garden-modern__epilogue-more { margin-top: 40rem; }

    body.jt-orientation--portrait .main-garden__anchor-bg.main-garden__anchor--desktop { display: none; }
    body.jt-orientation--portrait .main-garden__anchor-bg.main-garden__anchor--mobile { display: block; }
    
    body.jt-orientation--portrait .main-garden-korea__intro-bg.main-garden-korea__intro--desktop { display: none; }
    body.jt-orientation--portrait .main-garden-korea__intro-bg.main-garden-korea__intro--mobile { display: block; }
    body.jt-orientation--portrait .main-garden-korea__epilogue-bg.main-garden-korea__epilogue--desktop { display: none; }
    body.jt-orientation--portrait .main-garden-korea__epilogue-bg.main-garden-korea__epilogue--mobile { display: block; }

    body.jt-orientation--portrait .main-garden-modern__intro-bg.main-garden-modern__intro--desktop { display: none; }
    body.jt-orientation--portrait .main-garden-modern__intro-bg.main-garden-modern__intro--mobile { display: block; }
    body.jt-orientation--portrait .main-garden-modern__image-bg.main-garden-modern__image--desktop { display: none; }
    body.jt-orientation--portrait .main-garden-modern__image-bg.main-garden-modern__image--mobile { display: block; }
    body.jt-orientation--portrait .main-garden-modern__epilogue-bg.main-garden-modern__epilogue--desktop { display: none; }
    body.jt-orientation--portrait .main-garden-modern__epilogue-bg.main-garden-modern__epilogue--mobile { display: block; }

    /* CONSTRUCT */
    .main-construct { padding: 100rem 0 120rem; }
    .main-construct__container { flex-direction: column-reverse; gap: 0; }
    .main-construct .main-section__title--mobile { display: block; }
    .main-construct__content { width: 100%; }
    .main-construct__content .main-section__title { display: none; }
    .main-construct__content .main-section__desc { margin-top: 24rem; }
    .main-construct__content .main-section__more { text-align: center; }
    .main-construct__content { max-width: 480rem; }
    .main-construct__image-wrap { margin-top: 40rem; }
    .main-construct__anchor.main-construct__anchor--active { color: var(--color-black); }
    .main-construct__anchor.main-construct__anchor--active > span:after { background: var(--color-black); }

    /* DIRECTOR */
    .main-director .pin-spacer { pointer-events: none; }
    .main-director__sticky { height: 100svh; padding: 100rem 0 120rem; align-items: start; z-index: 1; }
    .main-director__sticky:before { content: ''; position: absolute; left: -20rem; top: 0; right: -20rem; height: 400rem; background: linear-gradient(to bottom, var(--color-gray-100) 50%, transparent); z-index: -1; }
    .main-director__sticky .main-section__more { display: none; }
    .main-director__container { pointer-events: all; }
    .main-director__more { display: block; width: 100%; position: absolute; bottom: 120rem; left: 0; text-align: center; }

    .main-director__item { padding-top: 360rem; }
    .main-director__item--02 { width: 240rem; top: 292rem; }
    .main-director__item--03 { top: 709rem; right: 0; }
    .main-director__item--04 { top: 1189rem; left: 0; }
    .main-director__item--05 { top: 1465rem; }
    .main-director__item--06 { width: 240rem; top: 1757rem; }
    .main-director__item--07 { top: 2174rem; right: 0; }
    .main-director__item--08 { width: 260rem; top: 2450rem; margin-left: -140rem; padding-bottom: 220rem; }

    /* BOARD */
    .main-board { padding: 100rem 0 120rem; }
    .main-board .jt-board__list { margin-top: 48rem; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* LAYOUT */
    .main-section__desc p + p { margin-top: 16rem; }
    .main-section__desc br { display: none; }
    
    /* VISUAL */
    .main-visual__slider { border-width: 0; }
    .main-visual__slide--desktop { display: none; }
    .main-visual__slide--mobile { display: block; }
    .main-visual__message span { font-size: var(--font-size-ko-10); line-height: var(--font-lineheight-ko-10); }

    .main-visual__identity { width: 160rem; }

    /* CONNECT */
    .main-connect { padding: 80rem 0 100rem; }
    .main-connect .main-section__desc br { display: block; }

    /* GARDEN */
    body.jt-orientation--portrait .main-garden__desc br { display: none; }

    body.jt-orientation--portrait .main-garden-korea__large-image { width: 280rem; }
    body.jt-orientation--portrait .main-garden-korea__small-image { width: 190rem; }
    body.jt-orientation--portrait .main-garden-korea__text { padding: 20rem; }
    body.jt-orientation--portrait .main-garden-korea__epilogue-message br { display: none; }

    body.jt-orientation--portrait .main-garden-modern__image .main-garden__title { padding: 0 20rem; }
    body.jt-orientation--portrait .main-garden-modern__content { padding: 0 20rem; }
    body.jt-orientation--portrait .main-garden-modern__epilogue-message br { display: none; }

    /* CONSTRUCT */
    .main-construct { padding: 80rem 0 100rem; }
    .main-construct__content .main-section__desc p { line-height: 34rem; }

    /* DIRECTOR */
    .main-director__sticky { padding: 80rem 0 100rem; }
    .main-director__sticky .main-section__title + .main-section__desc { margin-top: 4rem; }
    .main-director__sticky .main-section__more { bottom: 100rem; }
    .main-director__more { bottom: 100rem; }

    .main-director__item { padding-top: 320rem; }
    .main-director__item--01 { width: 170rem; }
    .main-director__item--02 { width: 170rem; top: 234rem; }
    .main-director__item--03 { width: 260rem; top: 566rem; }
    .main-director__item--04 { width: 170rem; top: 926rem; }
    .main-director__item--05 { width: 190rem; top: 1196rem; }
    .main-director__item--06 { width: 190rem; top: 1444rem; }
    .main-director__item--07 { width: 170rem; top: 1795rem; }
    .main-director__item--08 { width: 260rem; top: 2065rem; margin-left: -140rem; padding-bottom: 200rem; }

    /* BOARD */
    .main-board { padding: 80rem 0 100rem; }

}