@charset "utf-8";

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



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

    /* LAYOUT */
    .wrap { max-width: inherit; margin: 0 101rem; }

    /* PAGE */
    .article__visual { min-height: 460rem; }
    .article__visual-sticky { min-height: 540rem; }

}




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

    html,
    html.safari.desktop { font-size: 0.06756756756756757vw; }

    /* VAR */
    :root {
        --font-size-ko-01: 110rem;

        --font-lineheight-ko-01: 125rem;
    }

    /* LAYOUT */
    .wrap { margin: 0 80rem; }
    
    /* HEADER */
    .header__inner { margin: 0 50rem; }

    .menu-container__background { left: -50rem; right: -50rem; }

    #menu > li > ul { min-width: 160rem; }
    #menu > li > ul > li > a { padding: 0 16rem; }
    #menu > li > ul > li > ul > li > a { padding: 0 16rem; }

    /* FOOTER */
    .footer__inner { margin: 0 50rem; }

    /* PAGE */
    .article__section { padding-bottom: 160rem; }

}



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

    html,
    html.safari.desktop { font-size: 0.0833333333333333vw; }

    /* VAR */
    :root {
        --font-size-ko-01: 100rem;
        --font-size-ko-02: 54rem;
        --font-size-ko-05: 26rem;

        --font-lineheight-ko-01: 120rem;
        --font-lineheight-ko-02: 68rem;
        --font-lineheight-ko-05: 40rem;
    }

    /* LAYOUT */
    .wrap { margin: 0 40rem; }
    .wrap-narrow { max-width: inherit; margin: 0 40rem; }

    br.xlbr { display: block !important; }

    /* HEADER */
    #header { height: 80rem; }
    .header__inner { margin: 0 40rem; }

    .header__utils { right: 48rem; }
    .header__link { display: none; }
    
    .header__language-btn .jt-icon { margin-left: 6rem; }

    .menu-container { display: none; }

    .small-menu-controller { display: block; width: 28rem; height: 28rem; position: absolute; top: 50%; right: 40rem; translate: 0 -50%; }
    .small-menu-controller__line { display: block; width: 24rem; border-top: 2rem solid var(--color-black); position: absolute; left: 2rem; }
    .small-menu-controller__line--01 { top: 5rem }
    .small-menu-controller__line--02 { top: 13rem }
    .small-menu-controller__line--03 { top: 21rem }

    .small-menu-container { display: none; width: 100%; height: 100%; padding-top: 80rem; position: fixed; top: 0; left: 0; background: var(--color-white); overflow: hidden; z-index: 650; }
    #small-menu-container:after { content: ''; position: absolute; left: 0; top: 79rem; width: 100%; height: 1px; background: var(--color-gray-400); }
    .small-menu-container__inner { width: 100%; height: 100%; position: relative; z-index: 2; overflow-y: auto; }
    .small-menu-nav { display: block; }
    #small-menu { position: relative; margin-top: 30rem; }
    #small-menu li { display: block; position: relative; }
    #small-menu a { display: block; position: relative; padding-left: 40rem; padding-right: 40rem; transition: color .3s; }
    #small-menu > li > a { padding-top: 20rem; padding-bottom: 20rem; font-size: var(--font-size-ko-05); line-height: var(--font-lineheight-ko-05); font-weight: bold; letter-spacing: var(--letter-spacing-02); color: var(--color-black); }
    #small-menu > li.menu-item--krst > a { color: var(--color-primary); letter-spacing: .94em; }
    #small-menu > li.menu-item--krst > a > span { margin-right: -.94em; }
    #small-menu > li.menu-item-has-children > a { padding-right: 80rem; }
    #small-menu > li.menu-item-has-children > a:after { content: ''; width: 20rem; height: 20rem; position: absolute; right: 40rem; top: 50%; margin-top: -10rem; background: url(../images/icon/icon-chevron.svg) no-repeat center center; background-size: 100% auto; opacity: 0.3; transition: opacity .3s, transform .3s; }
    
    #small-menu > li > ul { display: none; margin: 0 40rem; background: var(--color-gray-100); }
    #small-menu > li > ul > li > a { padding-top: 8rem; padding-bottom: 8rem; font-size: var(--font-size-ko-07); line-height: var(--font-lineheight-ko-07); font-weight: 700; letter-spacing: var(--letter-spacing-02); color: var(--color-gray-800); }
    #small-menu > li > ul > li:first-child > a { padding-top: 32rem; }
    #small-menu > li > ul > li:last-child > a { padding-bottom: 32rem; }
    #small-menu > li > ul > li > a > span > em { color: var(--color-primary); }
    #small-menu > li > ul > li > ul { margin: -3rem 0 3rem; }
    #small-menu > li > ul > li > ul > li > a { padding-top: 5rem; padding-bottom: 5rem; font-size: var(--font-size-ko-08); line-height: var(--font-lineheight-ko-08); letter-spacing: var(--letter-spacing-02); font-weight: 400; color: var(--color-gray-700); }

    #small-menu > li.menu-item-has-children.menu-item--open > a:after { opacity: 1; transform: rotateX(180deg); }
    #small-menu > li > ul > li:not(.menu-item--disable).current-menu-item > a, #small-menu > li > ul > li:not(.menu-item--disable).current-page-ancestor > a { color: var(--color-black); text-decoration: underline; text-decoration-thickness: 2rem; text-underline-offset: 6rem; }
    #small-menu > li > ul > li:not(.menu-item--disable).current-menu-ancestor > a { color: var(--color-black); text-decoration: none; }
    #small-menu > li > ul > li > ul > li.current-menu-item > a { color: var(--color-black); text-decoration: underline; text-decoration-thickness: 2rem; text-underline-offset: 4rem; }

    .small-menu-utils { margin: 20rem 40rem 30rem; padding-top: 18rem; border-top: 1px solid var(--color-gray-300); }
    .small-menu-utils > a { display: block; padding: 12rem 0; color: var(--color-black); }

    body.open-menu-fixed { width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
    body.open-menu #header { transform: none !important; opacity: 1 !important; visibility: visible !important; }
    body.open-menu #logo, body.open-menu .small-menu-controller, body.open-menu .header__utils { z-index: 651; }

    /* FOOTER */
    .footer__inner { margin: 0 40rem; }

    /* CONTAINER */
    .main-container { padding-top: 80rem; padding-bottom: 200rem; }

    /* PAGE */
    .article__visual-sticky { min-height: 480rem; top: 80rem; }
    .article__visual-scroll { clip-path: inset(0 40rem round 30rem); }

    .article__header { padding-top: 140rem; }
    .article__header-sticky { padding-bottom: 140rem; }
    .article__header-sticky--active { top: 80rem; }
    
    .article__body { padding-top: 140rem; }
    .article__section { padding-bottom: 140rem; }
    .article__section-head { margin-bottom: 100rem; }
    .article__section-head .article__section-title + .jt-category, .article__section-head .article__section-title + .jt-tabs__head { margin-top: 24rem; }
    .article__section-head--narrow, .article__section-head--narrow:has(.article__section-desc) { margin-bottom: 80rem; }
    .article__section-head:has(.article__section-desc) { margin-bottom: 48rem; }
    .article__section-head .article__section-desc { margin-top: 24rem; }
    .article__section-subtitle { margin-bottom: 40rem; }

}



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

    html,
    html.safari.desktop { font-size: 0.09775171065493645vw; }

    /* VAR */
    :root {
        --font-size-ko-01: 80rem;
        --font-size-ko-02: 52rem;
        --font-size-ko-03: 40rem;
        --font-size-ko-04: 34rem;

        --font-lineheight-ko-01: 94rem;
        --font-lineheight-ko-02: 64rem;
        --font-lineheight-ko-03: 48rem;
        --font-lineheight-ko-04: 42rem;
    }

    /* LAYOUT */
    br.xlbr { display: none !important; }
    br.lgbr { display: block !important; }

    /* HEADER */
    #header { height: 72rem; }

    .small-menu-container { padding-top: 72rem; }
    #small-menu-container:after { top: 71rem; }

    /* CONTAINER */
    .main-container { padding-top: 72rem; padding-bottom: 160rem; }
    
    /* PAGE */
    .article__visual { min-height: 400rem; }
    .article__visual-sticky { top: 72rem; min-height: 400rem; }
    .article__visual-content br { display: none; }

    .article__header { padding-top: 120rem; }
    .article__header-sticky { padding-bottom: 120rem; }
    .article__header-sticky--active { top: 72rem; }

    .article__body { padding-top: 120rem; }
    .article__section { padding-bottom: 120rem; }
    .article__section-head { margin-bottom: 80rem; }
    .article__section-head--narrow, .article__section-head--narrow:has(.article__section-desc) { margin-bottom: 60rem; }
    .article__section-subtitle { margin-bottom: 32rem; }

    /* PRIVACY */
    .jt-email-popup__content h2 { margin-bottom: 24rem; }

}



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

    html,
    html.safari.desktop { font-size: 0.13020833333333335vw; }

    /* VAR */
    :root {
        --font-size-ko-03: 40rem;

        --font-lineheight-ko-03: 54rem;
    }

    /* LAYOUT */
    .wrap { margin: 0 30rem; }
    .wrap-narrow { margin: 0 30rem; }

    br.lgbr { display: none !important; }
    br.mdbr { display: block !important; }

    /* HEADER */
    .header__inner { margin: 0 30rem; }

    .small-menu-controller { right: 30rem; }

    #small-menu a { padding-left: 30rem; padding-right: 30rem; }
    #small-menu > li > ul { margin: 0 30rem; }
    #small-menu > li.menu-item-has-children > a { padding-right: 70rem; }
    #small-menu > li.menu-item-has-children > a:after { right: 30rem; }

    .small-menu-utils { margin-left: 30rem; margin-right: 30rem; }

    /* FOOTER */
    #footer { padding-bottom: 60rem; }
    .footer__inner { margin: 0 30rem; }

    .footer__banner { border-top-width: 6rem; }

    .footer__contact h2 br { display: none; }
    .footer__contact-list { margin-top: 24rem; }
    .footer__contact-list > li + li { margin-top: 6rem; }
    .footer__contact-list > li > b { margin-right: 10rem; }

    .footer__content { flex-direction: column; gap: 12rem; }

    .footer__info { order: 2; flex-direction: column; align-items: start; gap: 0; }
    .footer__info-btn { cursor: pointer; }
    .footer__info-btn .jt-icon { display: inline-block; }
    html.ios .footer__info-btn .jt-icon { top: 0; }
    .footer__info-content { display: none; }
    .footer__info-list { gap: 0 12rem; flex-wrap: wrap; margin-top: 6rem; }

    .footer__menu-container { order: 1; }

    .footer__copyright { margin-top: 6rem; }
    
    /* PAGE */
    .article__visual-scroll { clip-path: inset(0 30rem round 30rem); }
    .article__visual-section .article__visual-content { padding: 40rem 30rem; }

    .article__header { padding-top: 100rem; }
    .article__header-sticky { padding-bottom: 100rem; }

    .article__body { padding-top: 100rem; }
    .article__section { padding-bottom: 100rem; }
    .article__section-head { margin-bottom: 60rem; }
    .article__section-head--narrow, .article__section-head--narrow:has(.article__section-desc) { margin-bottom: 50rem; }
    .article__section-head .article__section-title + .jt-category, .article__section-head .article__section-title + .jt-tabs__head { margin-top: 20rem; }
    .article__section-head .article__section-desc { margin-top: 20rem; }
    .article__section-title br { display: none; }

    /* CONTAINER */
    .main-container { padding-bottom: 140rem; }

    /* PRIVACY */
    .privacy__revision { max-width: inherit; margin-left: 30rem; margin-right: 30rem; }

}



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

    html,
    html.safari.desktop { font-size: 0.2564102564102564vw; }

    /* VAR */
    :root {
        --font-size-ko-01: 54rem;
        --font-size-ko-02: 36rem;
        --font-size-ko-03: 32rem;
        --font-size-ko-04: 28rem;
        --font-size-ko-05: 23rem;
        --font-size-ko-06: 18rem;
        --font-size-ko-07: 16rem;
        --font-size-ko-08: 14rem;
        --font-size-ko-09: 13rem;
        --font-size-ko-10: 12rem;

        --font-lineheight-ko-01: 66rem;
        --font-lineheight-ko-02: 48rem;
        --font-lineheight-ko-03: 44rem;
        --font-lineheight-ko-04: 40rem;
        --font-lineheight-ko-05: 34rem;
        --font-lineheight-ko-06: 30rem;
        --font-lineheight-ko-07: 28rem;
        --font-lineheight-ko-08: 20rem;
        --font-lineheight-ko-09: 18rem;
        --font-lineheight-ko-10: 18rem;

        --letter-spacing-02: 0em;
    }

    /* LAYOUT */
    .wrap { margin: 0 20rem; }
    .wrap-narrow { margin: 0 20rem; }

    br.mdbr { display: none !important; }
    br.smbr { display: block !important; }

    /* HEADER */
    .header__inner { margin: 0 20rem; }

    #logo { width: 87rem; }
    
    .small-menu-controller { right: 20rem; }

    #small-menu a { padding-left: 24rem; padding-right: 24rem; }
    #small-menu > li > ul { margin: 0 20rem; }
    #small-menu > li > ul > li:first-child > a { padding-top: 24rem; }
    #small-menu > li > ul > li:last-child > a { padding-bottom: 24rem; }
    #small-menu > li.menu-item-has-children > a:after { right: 20rem; }

    .small-menu-utils { margin-left: 20rem; margin-right: 20rem; }

    .header__utils { right: 48rem; }

    /* FOOTER */
    .footer__inner { margin: 0 20rem; }

    .footer__banner { display: flex; align-items: center; justify-content: center; height: 680rem; padding: 0; border-top-width: 3rem; }
    .footer__banner-bg--desktop { display: none; }
    .footer__banner-bg--mobile { display: block; }
    .footer__banner-title > span { margin-bottom: 6rem; }

    .footer__contact-bg--desktop { display: none; }
    .footer__contact-bg--mobile { display: block; }
    .footer__contact-list > li > b { margin-right: 8rem; }
    .footer__contact-link > a { padding-bottom: 11rem; }

    .footer__logo { padding-top: 30rem; }
    .footer__logo svg { width: 72rem; }
    
    /* PAGE */
    .article__visual { min-height: 320rem; }
    .article__visual-sticky { min-height: 320rem; }
    .article__visual-sticky + .article__body { clip-path: inset(0 round 20rem 20rem 0 0); }
    .article__visual-scroll { clip-path: inset(0 20rem round 30rem); }
    .article__visual-content > p { font-size: var(--font-size-ko-05); line-height: var(--font-lineheight-ko-05); }
    .article__visual-content > p + p { margin-top: 20rem; }
    .article__visual-link { margin-top: 40rem; }
    .article__visual-section .article__visual-content { padding: 40rem 20rem; }

    .article__header { padding-top: 80rem; }
    .article__header-sticky { padding-bottom: 80rem; }
    .article__desc { margin-top: 12rem; }

    .article__body { padding-top: 80rem; }
    .article__section { padding-bottom: 80rem; }
    .article__section-head { margin-bottom: 40rem; }
    .article__section-head:has(.article__section-desc) { margin-bottom: 40rem; }
    .article__section-head:has(.jt-category), .article__section-head:has(.jt-tabs__head) { margin-bottom: 50rem; }
    .article__section-subtitle { margin-bottom: 24rem; }

    /* CONTAINER */
    .main-container { padding-bottom: 120rem; }

    /* PRIVACY */
    .privacy__revision { margin-left: 20rem; margin-right: 20rem; margin-bottom: 40rem; }
    .privacy__revision-choice { width: 100%; }

    .jt-email-popup__content h2 { margin-bottom: 20rem; }

}



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

    /* HEADER (1023px) */
    #small-menu > li > ul > li > a:hover { color: var(--color-black); }
    #small-menu > li > ul > li > ul > li > a:hover { color: var(--color-black); }

}