@charset "utf-8";

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



/* **************************************** *
 * 2000px
 * **************************************** */
@media (min-width: 2000px){

    /*
    html { font-size: 0.05254860746190225vw; }
    */

}



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

    /* FOOTER */
    .footer__inner { max-width: inherit; margin: 0 80rem; }

}




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

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

    /* VAR */
    :root {
        --font-size-ko-01: 54rem;
        --font-size-ko-02: 46rem;

        --font-size-en-01: 72rem;

        --font-lineheight-ko-01: 66rem;
        --font-lineheight-ko-02: 59rem;

        --font-lineheight-en-01: 75rem;
    }

    /* LAYOUT */
    .wrap { max-width: inherit; margin: 0 132rem; }
    
    /* HEADER */
    #header { height: 84rem; }
    .header__inner { margin: 0 50rem; }

    #logo { top: 22rem; }

    #menu > li > a { padding: 26rem 30rem; }

    .search-controller { top: 22rem; }

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

    /* SCROLL TOP */
    .go-top { right: 36rem; }

}



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

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

    /* VAR */
    :root {
        --font-size-ko-01: 52rem;
        --font-size-ko-02: 44rem;
        --font-size-ko-03: 36rem;
        --font-size-ko-04: 30rem;
        --font-size-ko-05: 26rem;
        --font-size-ko-06: 23rem;
        --font-size-ko-07: 19rem;
        --font-size-ko-08: 17rem;

        --font-size-en-01: 65rem;

        --font-lineheight-ko-01: 63rem;
        --font-lineheight-ko-02: 57rem;
        --font-lineheight-ko-03: 49rem;
        --font-lineheight-ko-04: 43rem;
        --font-lineheight-ko-05: 39rem;
        --font-lineheight-ko-06: 36rem;
        --font-lineheight-ko-07: 32rem;
        --font-lineheight-ko-08: 30rem;

        --font-lineheight-en-01: 67rem;
    }

    /* LAYOUT */
    .main-container { padding-top: 170rem; padding-bottom: 170rem; }

    .wrap { margin: 0 40rem; }

    /* PAGE */
    .article__header { padding-bottom: 60rem; }

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

    #logo { top: 20rem; }

    #menu > li > a { padding: 25rem 28rem; }
    #menu > li > ul { width: 190rem; margin-left: -95rem; }
    #menu > li > ul > li > a { padding: 6rem 26rem; }
    #menu > li > ul > li:first-child > a { padding-top: 22rem; }
    #menu > li > ul > li:last-child > a { padding-bottom: 22rem; }

    .search-controller { top: 20rem; }

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

    #footer-menu > li > a { padding: 3rem 14rem 2rem; }

    .footer__sns-container { margin-bottom: 38rem; }
    .footer__sns { gap: 10rem; }

    /* SCROLL TOP */
    .go-top { width: 56rem; height: 56rem; padding: 12rem 0; top: -80rem; right: 24rem; }
    .go-top.go-top--fix { bottom: 24rem; }

}



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

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

    /* VAR */
    :root {
        --font-size-ko-01: 50rem;
        --font-size-ko-02: 42rem;
        --font-size-ko-03: 33rem;
        --font-size-ko-04: 28rem;
        --font-size-ko-05: 24rem;
        --font-size-ko-06: 21rem;
        --font-size-ko-07: 18rem;
        --font-size-ko-08: 16rem;
        --font-size-ko-09: 15rem;
        --font-size-ko-10: 14rem;

        --font-size-en-01: 62rem;
        --font-size-en-02: 13rem;

        --font-lineheight-ko-01: 60rem;
        --font-lineheight-ko-02: 54rem;
        --font-lineheight-ko-03: 45rem;
        --font-lineheight-ko-04: 40rem;
        --font-lineheight-ko-05: 36rem;
        --font-lineheight-ko-06: 33rem;
        --font-lineheight-ko-07: 30rem;
        --font-lineheight-ko-08: 28rem;
        --font-lineheight-ko-09: 28rem;
        --font-lineheight-ko-10: 24rem;

        --font-lineheight-en-01: 64rem;
        --font-lineheight-en-02: 20rem;
    }
    
    /* LAYOUT */
    .main-container { padding-top: 160rem; padding-bottom: 160rem; }

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

    #logo { width: 135rem; height: 27rem; top: 20rem; }

    .menu-container { display: none; }

    .small-menu-controller { display: block; width: 30rem; height: 30rem; position: absolute; top: 19rem; right: 37rem; transition: top .3s; }
    .small-menu-controller__line { display: block; width: 24rem; height: 2rem; position: absolute; left: 3rem; background: var(--color-black); }
    .small-menu-controller__line--01 { top: 10rem }
    .small-menu-controller__line--02 { bottom: 9rem }

    .search-controller { top: 20rem; right: 42rem; }
    .search-controller__btn { width: 32rem; height: 32rem; padding: 5rem; }

    .small-menu-container { display: none; width: 100%; height: 100%; padding-top: 70rem; 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: 69rem; width: 100%; height: 1px; background: var(--color-gray-400); }
    .small-menu-container__inner { width: 100%; height: 100%; padding: 16rem 0; position: relative; z-index: 2; overflow-y: scroll; }
    .small-menu-nav { display: block; }
    #small-menu { position: relative; }
    #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: 16rem; padding-bottom: 16rem; font-size: var(--font-size-ko-07); line-height: var(--font-lineheight-ko-07); font-weight: bold; letter-spacing: var(--letter-spacing); color: var(--color-black); text-transform: uppercase; }
    #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: 16rem auto; opacity: 0.3; transition: opacity .3s, rotate .3s; }
    #small-menu > li > ul { display: none; margin-bottom: 16rem; background: var(--color-gray-100); }
    #small-menu > li > ul > li > a { padding-top: 8rem; padding-bottom: 8rem; font-size: var(--font-size-ko-08); line-height: var(--font-lineheight-ko-08); font-weight: normal; letter-spacing: var(--letter-spacing); color: var(--color-gray-800); }
    #small-menu > li > ul > li:first-child > a { padding-top: 28rem; }
    #small-menu > li > ul > li:last-child > a { padding-bottom: 28rem; }
    #small-menu > li.current-menu-item > a, #small-menu > li.current-menu-ancestor > a { color: var(--color-primary); }
    #small-menu > li.menu-item-has-children.menu-item--open > a:after { opacity: 1; rotate: -180deg; }
    #small-menu > li > ul > li.current-menu-item > a { 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 { z-index: 651; }

    /* SCROLL TOP */
    .go-top { display: none; }

}



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

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

    /* VAR */
    :root {
        --font-primary: sans-serif;
        --font-secondary: 'Montserrat', sans-serif;

        --font-size-ko-01: 42rem;
        --font-size-ko-02: 40rem;
        --font-size-ko-03: 32rem;
        --font-size-ko-04: 26rem;

        --font-size-en-01: 58rem;

        --font-lineheight-ko-01: 52rem;
        --font-lineheight-ko-02: 51rem;
        --font-lineheight-ko-03: 43rem;
        --font-lineheight-ko-04: 37rem;

        --font-lineheight-en-01: 60rem;
    }

    /* LAYOUT */
    .main-container { padding-top: 145rem; padding-bottom: 140rem; }

    .wrap { margin: 0 24rem; }
    .wrap-narrow { max-width: inherit; margin: 0 24rem; }

    /* PAGE */
    .article__header { padding-bottom: 56rem; }

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

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

    .search-controller { right: 36rem; }

    #small-menu a { padding-left: 24rem; padding-right: 24rem; }
    #small-menu > li.menu-item-has-children > a { padding-right: 64rem; }
    #small-menu > li.menu-item-has-children > a:after { right: 24rem; }

    /* FOOTER */
    #footer { padding: 45rem 0 50rem; }
    .footer__inner { margin: 0 24rem; }

    #footer-menu > li > a { padding-top: 2rem; padding-bottom: 3rem; }

    .footer__sns-container { margin-bottom: 32rem; }

}



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

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

    /* VAR */
    :root {
        --font-size-ko-01: 37rem;
        --font-size-ko-02: 36rem;
        --font-size-ko-03: 28rem;
        --font-size-ko-04: 24rem;
        --font-size-ko-05: 22rem;
        --font-size-ko-06: 19rem;
        --font-size-ko-07: 17rem;
        --font-size-ko-08: 15rem;
        --font-size-ko-09: 14rem;
        --font-size-ko-10: 13rem;
        --font-size-ko-11: 12rem;

        --font-size-en-01: 52rem;
        --font-size-en-02: 12rem;
        --font-size-en-03: 11rem;

        --font-lineheight-ko-01: 46rem;
        --font-lineheight-ko-02: 46rem;
        --font-lineheight-ko-03: 37rem;
        --font-lineheight-ko-04: 33rem;
        --font-lineheight-ko-05: 31rem;
        --font-lineheight-ko-06: 29rem;
        --font-lineheight-ko-07: 28rem;
        --font-lineheight-ko-08: 26rem;
        --font-lineheight-ko-09: 26rem;
        --font-lineheight-ko-10: 22rem;
        --font-lineheight-ko-11: 20rem;

        --font-lineheight-en-02: 54rem;
        --font-lineheight-en-02: 19rem;
        --font-lineheight-en-03: 18rem;
    }

    /* LAYOUT */
    .main-container { padding-top: 130rem; padding-bottom: 100rem; }

    /* PAGE */
    .article__header { padding-bottom: 36rem; }

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

    #logo { width: 119rem; height: 25rem; top: 19rem; }

    .small-menu-controller { top: 15rem; }

    .search-controller { top: 15rem; }

    #small-menu-container { padding-top: 64rem; }
    #small-menu-container:after { top: 63rem; }
    #small-menu > li > a { padding-top: 15rem; padding-bottom: 15rem; }
    #small-menu > li.menu-item-has-children > a { padding-right: 45rem; }
    #small-menu > li.menu-item-has-children > a:after { background-size: 14rem auto; }
    #small-menu > li > ul { margin-bottom: 15rem; }
    #small-menu > li > ul > li > a { padding-top: 6rem; padding-bottom: 6rem; }
    #small-menu > li > ul > li:first-child > a { padding-top: 23rem; }
    #small-menu > li > ul > li:last-child > a { padding-bottom: 23rem; }

    /* FOOTER */
    #footer { padding: 36rem 0 45rem; }

    #footer-menu { gap: 6rem; }
    #footer-menu > li > a { padding-top: 3rem; }

    .footer__sns-container { margin: 24rem 0; }
    .footer__sns { gap: 5rem 8rem; }

}



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

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

}