@charset "utf-8";

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



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

    html { font-size: 0.05254860746190225vw; }

}



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

    /* WRAP */
    .wrap { max-width: 1244rem; margin: 0 auto }
    
    /* HEADER */
    .header__inner { max-width: inherit; margin: 0 70rem; }

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

}



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

    /* GLOBAL */
    html { font-size: 0.06756756756756757vw; }

}



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

    /* GLOBAL */
    html { font-size: 0.0833333333333333vw; }

    /* VAR */
    :root {
        --font-size-ko-01: 54rem;
        --font-size-ko-02: 42rem;
        --font-size-ko-03: 38rem;
        --font-size-ko-11: 80rem;

        --font-lineheight-ko-01: 72rem;
        --font-lineheight-ko-02: 57rem;
        --font-lineheight-ko-03: 54rem;
        --font-lineheight-ko-11: 94rem;
    }

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

    /* GRID */
    .gird-background__inner { max-width: inherit; margin: 0 50rem; }
    .gird-background span:nth-child(1),
    .gird-background span:nth-child(8) { display: none; }
    
    /* HEADER */
    .header__inner { margin: 0 50rem; }

    /* MENU */
    .menu-container .gird-background { display: none; }
    .menu-container__inner { height: 100%; } 
    .menu-nav { position: relative; flex-direction: column; height: 100%; overflow: auto; }
    #menu { width: 100%; flex-direction: column; padding-bottom: 80rem; }
    #menu > li { width: 100%; padding: 0; }
    #menu > li > a { padding: 20rem 74rem 20rem 50rem; border-bottom: 1px solid var(--color-gray-200); }
    #menu > li > a .jt-icon { display: inline-block; width: 24rem; height: 24rem; position: absolute; right: 50rem; top: 30rem; }
    #menu > li > a .jt-icon svg path { fill: var(--color-gray-600); }
    #menu > li > ul { padding: 20rem 50rem; background: var(--color-gray-100); display: none; }
    #menu > li > ul > li { margin-bottom: 12rem; }
    #menu > li > ul > li > a { padding: 0; }
    #menu > li > ul > li > a .jt-icon,
    #menu > li > ul > li.menu-item--open > a .jt-icon { transform: rotate(-90deg); }
    #menu > li > ul > li > ul { display: block; }
    #menu > li > ul > li.menu-item-has-children { display: flex; gap: 20rem; }
    #menu > li > ul > li > ul > li { margin-bottom: 4rem; }
    #menu > li > ul > li > ul > li > a { padding: 4rem 0; transition: color .3s; }
    #menu > li > ul > li > ul > li > a > span { font-size: 14rem; line-height: 20rem; }
    #menu > li > ul > li > ul > li > a > span:before,
    #menu > li > ul > li > ul > li.current-menu-item > a > span:before { display: none; }
    #menu > li > ul > li > ul > li.current-menu-item > a > span { text-decoration: none; }
    #menu > li:not(:first-child) > ul > li.menu-item-has-children { margin-bottom: 4rem; }
    #menu > li:not(:first-child) > ul > li.menu-item-has-children:last-child { margin-bottom: 0; }
    #menu > li:not(:first-child) > ul > li.menu-item-has-children > a { display: none; }
    #menu > li:not(:first-child) > ul > li > ul > li { margin-bottom: 4rem; }
    #menu > li:not(:first-child) > ul > li > ul > li:last-child { margin-bottom: 0; }
    #menu > li:not(:first-child) > ul > li > ul > li > a > span.jt-typo--09 { font-size: var(--font-size-ko-07); line-height: var(--font-lineheight-ko-07); }
    #menu br:not(.smbr) { display: none; }
    #menu .jt-typo--hanwha { left: 0; }

    .menu-item--svg i:first-child { margin-right: 6rem; }

    .menu-outlink { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--color-white); padding: 20rem 50rem; }

    .menu-family { padding-right: 132rem; }
    .menu-family__btn { display: block; height: 48rem; font-size: 0; padding: 0; background: none; border: 0; font-family: inherit; color: var(--color-gray-600); cursor: pointer; }
    .menu-family__btn span { vertical-align: middle; }
    .menu-family__btn .jt-icon { position: relative; width: 16rem; height: 16rem; margin-left: 6rem; transition: transform .3s; will-change: transform; }
    .menu-family__btn .jt-icon svg path { fill: var(--color-gray-600); }
    .menu-family__list { display: none; }
    .menu-family__list > li > a { display: inline-block; padding: 6rem  8rem 6rem 0; color: var(--color-gray-600); line-height: 1; }
    .menu-family__list > li > a > span { vertical-align: top; }
    .menu-family--open .menu-family__btn .jt-icon { transform: rotate(-180deg); }

    .menu-sns { position: absolute; right: 50rem; top: 20rem; padding: 0; margin: 0 -12rem; gap: 0; }
    .menu-sns a { padding: 12rem; }

    /* NAVIGATOR */
    body.navigator--fixed .article__header { padding-top: 206rem; }

    /* FOOTER */
    #footer { padding-top: 40rem; padding-bottom: 40rem; }
    .footer__inner { margin: 0 50rem; }

    /* CONTAINER */
    .main-container { min-height: calc(100svh - 140rem); }
    html.naver .main-container { min-height: calc(100vh - 140rem); }
    html.ios { min-height: calc(100svh - 139rem); }

    /* ARTICLE */
    .article__header { padding: 146rem 0 100rem; }
    .article__body { padding-bottom: 240rem; }

    /* 404 */
    .error-404__text span { font-size: 120rem; }
    .error-404__text .jt-icon { width: 120rem; margin: 0 45rem; }

}



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

    /* GLOBAL */
    html { font-size: 0.09775171065493645vw; }
    
    /* VAR */
    :root {
        --font-size-ko-01: 45rem;
        --font-size-ko-02: 35rem;
        --font-size-ko-03: 32rem;
        --font-size-ko-04: 27rem;
        --font-size-ko-05: 22rem;
        --font-size-ko-06: 18rem;
        --font-size-ko-10: 18rem;
        --font-size-ko-11: 70rem;

        --font-lineheight-ko-01: 60rem;
        --font-lineheight-ko-02: 48rem;
        --font-lineheight-ko-03: 46rem;
        --font-lineheight-ko-05: 38rem;
        --font-lineheight-ko-06: 28rem;
        --font-lineheight-ko-10: 28rem;
        --font-lineheight-ko-11: 82rem;
    }

    /* WRAP */
    .wrap { margin: 0 40rem; }
    .wrap-narrow { margin: 0 40rem }
    
    /* GRID */
    .gird-background__inner { margin: 0 40rem; }
    
    /* HEADER */
    .header__inner { margin: 0 40rem; }

    /* MENU */
    #menu > li > a { padding: 20rem 44rem 20rem 40rem; }
    #menu > li > a .jt-icon { top: 27rem; right: 40rem; }
    #menu > li > ul { padding: 20rem 40rem; }

    .menu-outlink { padding: 20rem 40rem; }

    .menu-sns { right: 40rem; }

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

    /* ARTICLE */
    .article__body { padding-bottom: 200rem; }

    /* 404 */
    .error-404 { gap: 120rem; padding: 206rem 0 100rem; }
    .error-404__text span { font-size: 100rem; }
    .error-404__text .jt-icon { width: 100rem; margin: 0 37.5rem; }

}



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

    /* GLOBAL */
    html { font-size: 0.13020833333333335vw; }

    /* VAR */
    :root {
        --font-secondary: sans-serif;

        --font-size-ko-01: 40rem;
        --font-size-ko-02: 33rem;
        --font-size-ko-03: 30rem;
        --font-size-ko-04: 26rem;
        --font-size-ko-11: 84rem;

        --font-lineheight-ko-01: 53rem;
        --font-lineheight-ko-02: 45rem;
        --font-lineheight-ko-03: 43rem;
        --font-lineheight-ko-04: 37rem;
        --font-lineheight-ko-11: 108rem;
    }

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

    /* BR */
    br.mdbr { display: block; }
    
    /* GRID */
    .gird-background__inner { margin: 0 30rem; }
    .gird-background span:nth-child(2) { left: 0; }
    .gird-background span:nth-child(3) { left: 25%; }
    .gird-background span:nth-child(4) { left: 50%; }
    .gird-background span:nth-child(5) { left: 75%; }
    .gird-background span:nth-child(6) { left: 100%;}
    .gird-background span:nth-child(7) { display: none; }
    html.android .gird-background span:nth-child(4) { left: calc(50% - .1rem); }
    html.android .gird-background span:nth-child(5) { left: calc(75% - .25rem); }
    html.android .gird-background span:nth-child(6) { left: calc(100% - .25rem); }
    
    /* HEADER */
    .header__inner { margin: 0 30rem; }
    
    /* NAVIGATOR */
    body.navigator--fixed .article__header { padding-top: 186rem; }

    /* MENU */
    #menu > li > a { padding: 20rem 54rem 20rem 30rem; }
    #menu > li > ul { padding: 20rem 30rem; }

    .menu-outlink { padding: 20rem 30rem; }

    .menu-family { padding-right: 122rem; }
    .menu-sns { right: 30rem; }

    /* FOOTER */
    .footer__inner { margin: 0 30rem; padding-right: 0; }

    .footer__menu-btn { display: block; color: var(--color-white); }
    html.ios .footer__menu-btn.footer__menu--open .jt-icon,
    html.mac .footer__menu-btn.footer__menu--open .jt-icon { top: .5rem; }
    .footer__menu-list { flex-direction: column; flex-wrap: nowrap; padding-top: 12rem; display: none; overflow: hidden; }
    .footer__menu-list > li > a { display: inline-block; padding-left: 0; opacity: .8; }
    .footer__menu-list > li:last-child > a { padding-right: 8rem; }

    .footer__sns { right: -8rem; top: -10rem; transform: none; gap: 6rem; }
    .footer__sns > li > a { padding: 10rem; }
    
    .footer__copyright { margin-top: 20rem; }

    /* ARTICLE */
    .article__header { padding: 126rem 0 60rem; }
    .article__header-sticky + div { margin-top: -80rem; }
    .article__category { margin-bottom: 8rem; }
    .article__desc { margin-top: 8rem; }
    .article__body { padding-bottom: 140rem; }

    /* 404 */
    .error-404__text span { font-size: 80rem; }
    .error-404__text .jt-icon { width: 80rem; margin: 0 30rem; }

}



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

    /* GLOBAL */
    html { font-size: 0.2564102564102564vw; }

    /* VAR */
    :root {
        --font-size-ko-01: 33rem;
        --font-size-ko-02: 30rem;
        --font-size-ko-03: 28rem;
        --font-size-ko-04: 25rem;
        --font-size-ko-05: 20rem;
        --font-size-ko-06: 17rem;
        --font-size-ko-07: 15rem;
        --font-size-ko-08: 14rem;
        --font-size-ko-09: 13rem;
        --font-size-ko-10: 16rem;
        --font-size-ko-11: 46rem;

        --font-lineheight-ko-01: 45rem;
        --font-lineheight-ko-02: 42rem;
        --font-lineheight-ko-03: 40rem;
        --font-lineheight-ko-04: 36rem;
        --font-lineheight-ko-05: 30rem;
        --font-lineheight-ko-06: 26rem;
        --font-lineheight-ko-07: 23rem;
        --font-lineheight-ko-08: 21rem;
        --font-lineheight-ko-09: 19rem;
        --font-lineheight-ko-10: 25rem;
        --font-lineheight-ko-11: 60rem;
    }

    /* WRAP */
    .wrap { margin: 0 24rem; }
    .wrap-narrow { margin: 0 24rem }
    
    /* GRID */
    .gird-background__inner { margin: 0 24rem; }

    /* BR */
    br.smbr { display: block; }
    br.mdbr { display: none; }
    
    /* HEADER */
    .header__inner { margin: 0 24rem; gap: 0; }
    .header__language a:nth-child(n+2):before { margin-top: -5.5rem; }

    /* MENU */
    .menu-controller { right: -5rem; }
    .menu-controller__line { width: 20rem; left: 5rem; }
    .menu-controller__line--01 { top: 7rem; }
    .menu-controller__line--02 { top: 15rem; }
    .menu-controller__line--03 { top: 23rem; }

    html.android .menu-controller__line--01 { top: 6rem; }
    html.android .menu-controller__line--02 { top: 14rem; }
    html.android .menu-controller__line--03 { top: 22rem; }

    #menu { padding-bottom: 64rem; }
    #menu > li > a { padding: 20rem 48rem 20rem 24rem; }
    #menu > li > a .jt-icon { top: 24rem; right: 24rem; }
    #menu > li > ul { padding: 20rem 24rem; }
    #menu > li > ul > li > ul > li { margin-bottom: 8rem; }
    #menu > li > ul > li > ul > li > a { padding: 2rem 0; }
    #menu > li > ul > li > a { position: relative; padding-right: 16rem; }
    #menu > li > ul > li > a .jt-icon { position: absolute; top: 5rem; right: 0; margin-left: auto; }
    #menu > li:not(:first-child) > ul > li.menu-item-has-children { margin-bottom: 8rem; }
    #menu > li:not(:first-child) > ul > li > ul > li { margin-bottom: 8rem; }

    .menu-outlink { padding: 12rem 24rem; }

    .menu-family { padding-right: 0; }
    .menu-family__btn { height: 38rem; }
    .menu-family__list { bottom: calc(100% + 12rem); }
    .menu-sns { gap: 6rem; margin: 0 -8rem; top: 12rem; right: 24rem; }
    .menu-sns a { padding: 8rem; }
    .menu-sns .jt-icon { width: 20rem; height: 20rem; }

    /* NAVAGATOR */
    body.navigator--fixed .article__header { padding-top: 166rem; }

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

    .footer__sns > li > a { padding: 8rem; }
    .footer__sns .jt-icon { width: 20rem; height: 20rem; }

    .footer__copyright { margin-top: 20rem; }

    /* CONTAINER */
    .main-container { min-height: calc(100svh - 119rem); }
    html.ios { min-height: calc(100svh - 119rem); }
    html.naver .main-container { min-height: calc(100vh - 119rem); }
    html.samsungbrowser .main-container { min-height: calc(var(--full-height) - 119rem); }

    /* ARTICLE */
    .article__header { padding: 106rem 0 40rem; }
    .article__header-sticky + div { margin-top: -60rem; }
    .article__body { padding-bottom: 100rem; }

    /* 404 */
    .error-404 { gap: 60rem; padding: 166rem 0 100rem; }
    .error-404__text span { font-size: 54rem; }
    .error-404__text .jt-icon { width: 54rem; margin: 0 20rem; }

}