@charset "utf-8";

/*
 * File       : rwd-layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 * Dependency : reset.css
 *
 * SUMMARY:
 * 01) 2000px
 * 02) 1800px
 * 03) 1500px
 * 04) 1200px
 * 05) 1023px
 * 06) 860px
 * 07) 540px
 */



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

    /* HEADER */
    .header__inner { max-width: 1500rem; padding: 0; margin: 0 auto; }
    #logo { left: 0; }
    .header-btns { right: 0; }

}



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

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

    /* HEADER */
    .header__inner { padding: 0 150rem; max-width: inherit; }
    #logo { left: 150rem; }
    .header-btns { right: 150rem; }

}




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

    :root {
        --font-size-ko-01: 50rem;
        --font-size-ko-02: 44rem;
        --font-size-ko-03: 33rem;
        --font-size-ko-04: 25rem;
        --font-size-ko-05: 19rem;
    
        --font-size-en-01: 50rem;
        --font-size-en-02: 44rem;
        --font-size-en-03: 33rem;
        --font-size-en-04: 25rem;
        --font-size-en-05: 19rem;
    
        --font-lineheight-ko-01: 69rem;
        --font-lineheight-ko-02: 58rem;
        --font-lineheight-ko-03: 45rem;
        --font-lineheight-ko-04: 35rem;
        --font-lineheight-ko-05: 30rem;
    
        --font-lineheight-en-01: 69rem;
        --font-lineheight-en-02: 58rem;
        --font-lineheight-en-03: 45rem;
        --font-lineheight-en-04: 35rem;
        --font-lineheight-en-05: 30rem;
    }

    html { font-size: 0.06756756756756757vw; }

    /* LAYOUT */
    .wrap { margin: 0 100rem; }

    /* HEADER */
    .header__inner { padding: 0 100rem; }
    #logo { top: 22rem; left: 100rem; }
    .header-btns { right: 100rem; }

    /* FLOAT UI */
    .float-ui { bottom: 32rem; right: 32rem; }

    /* PAGE */
    .article { padding: 100rem 0 140rem; }
    .article__header { margin-bottom: 70rem; }

    /* SINGLE */
    .single { padding-top: 100rem; }
    .single-content { padding-bottom: 100rem; }

    /* 404 */
    .jt-error--icon { height: 94rem; }
    .jt-error__content { padding: 80rem 0 50rem; }

}



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

    :root {
        --font-size-ko-01: 46rem;
        --font-size-ko-02: 40rem;
        --font-size-ko-03: 30rem;
        --font-size-ko-04: 23rem;
    
        --font-size-en-01: 46rem;
        --font-size-en-02: 40rem;
        --font-size-en-03: 30rem;
        --font-size-en-04: 23rem;
    
        --font-lineheight-ko-01: 59rem;
        --font-lineheight-ko-02: 53rem;
        --font-lineheight-ko-03: 41rem;
        --font-lineheight-ko-04: 33rem;
    
        --font-lineheight-en-01: 59rem;
        --font-lineheight-en-02: 53rem;
        --font-lineheight-en-03: 41rem;
        --font-lineheight-en-04: 33rem;
    }

    html { font-size: 0.0833333333333333vw; }

    /* LAYOUT */
    .wrap { margin: 0 90rem; }

    br.tbr { display: none; }
    
    /* HEADER */
    #logo { left: 90rem; }
    .header__inner { padding: 0 90rem; }
    .header-btns { right: 90rem; }
    /* #logo { left: 40rem; }
    .header__inner { padding: 0 40rem; }
    .header-btns { right: 40rem; } */
    body:not(.is-partner) .menu-container > ul { margin-left: -125rem; }

    /* FOOTER */
    .footer__family .jt-selectric__wrap { width: 190rem; }
    .footer__info-logo-award { width: 52rem; }

    /* SINGLE */
    .single-content__title {margin-bottom: 20rem; }

    /* 404 */
    .jt-error::before { background-position-y: top; }
    .jt-error--icon-wrap { margin-bottom: 40rem; }
    .jt-error--icon { height: 84rem; }

}



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

    :root {
        --font-size-ko-01: 44rem;
        --font-size-ko-02: 38rem;
        --font-size-ko-03: 28rem;
        --font-size-ko-04: 22rem;
    
        --font-size-en-01: 44rem;
        --font-size-en-02: 38rem;
        --font-size-en-03: 29rem;
        --font-size-en-04: 22rem;
    
        --font-lineheight-ko-01: 56rem;
        --font-lineheight-ko-02: 50rem;
        --font-lineheight-ko-03: 38rem;
        --font-lineheight-ko-04: 31rem;
    
        --font-lineheight-en-01: 56rem;
        --font-lineheight-en-02: 50rem;
        --font-lineheight-en-03: 38rem;
        --font-lineheight-en-04: 31rem;
    }

    html { font-size: 0.09775171065493645vw; }

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

    /* HEADER */
    #header { height: 70rem; }
    .header__inner { padding: 0 24rem; }
    
    #logo { left: 24rem; top: 18rem; width: 126rem; }

    .menu-container,
    .header-btns { display: none; }

    #small-menu-btn { display: block; width: 34rem; height: 36rem; position: absolute; top: 18rem; right: 24rem; z-index: 550; cursor: pointer; }
    .small-menu-btn__line { display: block; width: 100%; height: 2rem; position: absolute; left: 0; background: var(--color-base); }
    .small-menu-btn__line--01 { top: 8rem; }
    .small-menu-btn__line--02 { top: 17rem; }
    .small-menu-btn__line--03 { bottom: 8rem; }
    
    #header.minimize .small-menu-btn__line { background:var(--color-base); }
    body.open-menu--motion .small-menu-btn__line { background: var(--color-base) !important; }
    html.ios .small-menu-btn__line { height: 2px }

    .small-menu-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .5); z-index: 650; opacity: 0; visibility: hidden; }

    #small-menu-container { display: none; max-width: 320rem; width: 100%; height: 100%; background: var(--color-base-bg); padding: 70rem 0 170rem; position: fixed; top: 0; right: 0; z-index: 650; overflow: hidden; }
    body.is-partner #small-menu-container { padding-bottom: 0; } 

    .small-menu-container__inner { width: 100%; height: 100%; padding: 14rem 0; position: relative; z-index: 2; overflow-y: scroll; }
    html.ios .small-menu-container__inner { height: auto; }
    .small-menu-nav { display: block; }

    .small-menu-nav > ul { position: relative; }
    .small-menu-nav > ul li { display: block; position: relative; }
    .small-menu-nav > ul a { display: block; position: relative; padding-left: 20rem; padding-right: 20rem; }
    .small-menu-nav > ul span { display: inline-block; position: relative; }
    .small-menu-nav > ul > li > a { padding: 14rem 40rem 14rem 20rem; color: var(--color-base); }
    .small-menu-nav > ul > li.small-menu--has-child > a:after { content: ''; width: 15rem; height: 15rem; position: absolute; right: 22rem; top: 50%; margin-top: -8rem; background: url(/@resource/images/icon/jt-icon/jt-chevron-down-smaller-2px-square.svg) no-repeat center center; background-size: 100%; opacity: 0.3; transform: rotate(0); -webkit-transition: .3s; transition: .3s; }
    .small-menu-nav > ul > li > ul { display: none; background: #f3f3f3;}
    .small-menu-nav > ul > li > ul > li > a { padding-top: 7rem; padding-bottom: 7rem; color: #888; -webkit-transition: color .3s; transition: color .3s; }
    .small-menu-nav > ul > li > ul > li > a > span:after { content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: 0; background: #191919; opacity: 0; }
    .small-menu-nav > ul > li > ul > li:first-child > a { padding-top: 20rem; }
    .small-menu-nav > ul > li > ul > li:last-child > a { padding-bottom: 20rem; }
    .small-menu-nav > ul > li.menu-current > a { color: var(--color-primary); }
    .small-menu-nav > ul > li.small-menu--has-child.menu-item--open > a:after {transform: rotate(-180deg); opacity: 1;}
    .small-menu-nav > ul > li > ul > li.menu-current > a,
    html.desktop .small-menu-nav > ul > li > ul > li > a:hover { color: var(--color-base); }
    html.ios .small-menu-nav > ul > li.small-menu--has-child > a:after { margin-top: -9rem; }

    .small-menu__member { position: absolute; top: 0; left: 0; display: flex; align-items: center; height: 70rem; padding:0 20rem; font-size: 0; width: 100%; background: #fff; }
    .small-menu__member > a { position: relative; display: inline-block; color: #888; padding-right: 10rem; margin-right: 10rem; transition: color .3s; }
    .small-menu__member > a:after { content:""; position: absolute; right: 0; top:50%; height: 12rem; margin-top: -6rem; width: 1rem; background: var(--color-base-line); }
    .small-menu__member > a:last-of-type{ padding-right: 0; margin-right: 0; }
    .small-menu__member > a:last-of-type:after { display: none; }
    .small-menu__member .jt-guide--icon { vertical-align: -3rem; margin-right: 4rem; width: 18rem; }
    .small-menu__member .small-menu__member-arrow { width: 10rem; margin-right: 0; vertical-align: 1rem; margin-left: 4rem; transition: transform 0.3s;  }
    .small-menu__member.open .small-menu__member-arrow { transform:rotate(-180deg); }
    html.mac .small-menu__member > a { margin-top: 1rem; }
    html.desktop .small-menu__member > a:hover { color:var(--color-base); }

    .small-menu__member-bundle { display: none; position: absolute; background:#fff; border:1px solid #ebebeb; border-radius: 4rem; top:50rem; left:20rem; z-index:10; }
    .small-menu__member-list { padding: 20rem 28rem; }
    .small-menu__member-list > li { margin-bottom: 8rem; }
    .small-menu__member-list > li:last-child { margin-bottom: 0; }
    .small-menu__member-list > li > a { display: block; color:var(--color-secondary); white-space: nowrap; }
    .small-menu__member-list > li > a > span { position: relative; }

    .small-menu__btns { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding:20rem; }
    .small-menu__btns > a { display: block; line-height: 1; padding: 20rem 0; text-align: center; }
    .small-menu__btns > a + a { margin-top: 8rem; }
    .small-menu__btns > a > span { line-height: 1; white-space: nowrap; }
    .small-menu__btns-inquiry { border: 2px solid var(--color-secondary); color: var(--color-secondary); }
    .small-menu__btns-consult { background: var(--color-primary); color:#fff; }
    html.ios .small-menu__btns > a { padding: 21rem 0 20rem; }

    .small-menu-nav > ul > li.small-menu--has-child.menu-item--open > a:after {transform: rotate(-180deg); opacity: 1;}

    body.open-menu #header { -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
    body.open-menu #small-menu-btn { z-index: 651; }
    body.open-menu .small-menu-btn__line { background: var(--color-base); }


    /* FOOTER */
    #footer { padding: 56rem 0; }
    .footer__bottom { padding-top: 48rem; margin-top: 48rem; }
    .footer__menu-list { margin-top: -5rem; }
    .footer__menu-list > li > a { display: block; padding: 5rem 0; }
    .footer__member { display: block; }
    .footer__member:before { display: none; }
    .footer__member > li:first-child { padding-left: 0; }
    .footer__member > li > a { display: block; padding: 5rem 0; }
    .footer__member-button { padding:5rem 0; }

    /* CONTAINER */
    .main-container { margin-top: 70rem; }

    /* PAGE */
    .article { padding: 80rem 0 120rem; }
    .article__header { margin-bottom: 60rem; }

    /* SINGLE */
    .single { padding-top: 80rem; }
    .single-content { padding-bottom: 80rem; }
    .single__title { margin-bottom: 18rem; }
    .single-content__title { margin-bottom: 16rem; }
    .single-pagination { margin-top: 120rem; }
    .single__pagination-type { top: 23rem; }
    .single-pagination__link { padding: 23rem 23rem 22rem 115rem; }

    /* 404 */
    .jt-error .wrap { min-height: calc((var(--vh, 1vh) * 100) - 70rem); }
    .jt-error__content { padding: 50rem 0; }
    html.ios .jt-error .wrap  { min-height: calc(100svh - 70rem); }

}




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

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

        --font-size-ko-01: 38rem;
        --font-size-ko-02: 33rem;
        --font-size-ko-03: 26rem;
        --font-size-ko-04: 21rem;
        --font-size-ko-05: 18rem;

        --font-size-en-01: 38rem;
        --font-size-en-02: 33rem;
        --font-size-en-03: 26rem;
        --font-size-en-04: 21rem;
        --font-size-en-05: 18rem;

        --font-lineheight-ko-01: 48rem;
        --font-lineheight-ko-02: 44rem;
        --font-lineheight-ko-03: 36rem;
        --font-lineheight-ko-04: 30rem;
        --font-lineheight-ko-05: 27rem;

        --font-lineheight-en-01: 48rem;
        --font-lineheight-en-02: 44rem;
        --font-lineheight-en-03: 36rem;
        --font-lineheight-en-04: 30rem;
        --font-lineheight-en-05: 27rem;
    }

    html { font-size: 0.13020833333333335vw; }

    /* LAYOUT */
    input[type=submit], input[type=button], button { font-family: sans-serif; }
    ::-webkit-input-placeholder { font-family: sans-serif; }
    ::-moz-placeholder { font-family: sans-serif; }
    :-ms-input-placeholder { font-family: sans-serif; }

    br.tmbr { display: none; }
    br.mdbr { display: block; }

    .wrap { margin: 0 36rem; }
    .wrap-narrow { margin:0 36rem; }

    /* FLOAT UI */
    html.naver .float-ui { bottom: 40rem; }

    /* FOOTER */
    .footer__sitemap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36rem; }
    .footer__menu-container { margin-right: 0; }
    .footer__family { position: relative; right: auto; top: auto; margin-top: 34rem; }
    .footer__info small.sales:after{ display: inline-block; }
    .footer__info small.primary:after { display: none; }
    .footer__info small.email:after { display: none; }
    html.ios .footer__family .jt-selectric__wrap > select { padding-top: 15rem; }
    .footer__info-container { flex-wrap: wrap; gap: 24rem; }

    /* PAGE */
    .article { padding: 60rem 0 100rem; }
    .article__header { margin-bottom: 50rem; }

    /* SINGLE */
    .single { padding-top: 60rem; }

    .single__header { margin-bottom: 48rem; }
    .single__header .jt-share { top: -9rem; }
    .single__header .jt-category__list { margin-bottom: 30rem; margin-right: 50rem; }

    .single-content__title { margin-bottom: 12rem; }

    .single__control { margin-top: 48rem; }

    .single__pagination-type { top: 19rem; left: 20rem; }
    .single-pagination__link { padding: 19rem 20rem 17rem 100rem; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){
    :root {
        --font-size-ko-01: 30rem;
        --font-size-ko-02: 28rem;
        --font-size-ko-03: 24rem;
        --font-size-ko-04: 20rem;
        --font-size-ko-05: 17rem;
        --font-size-ko-06: 16rem;
        --font-size-ko-07: 14rem;
        --font-size-ko-08: 13rem;

        --font-size-en-01: 30rem;
        --font-size-en-02: 28rem;
        --font-size-en-03: 24rem;
        --font-size-en-04: 20rem;
        --font-size-en-05: 17rem;
        --font-size-en-06: 16rem;
        --font-size-en-07: 14rem;
        --font-size-en-08: 13rem;

        --font-lineheight-ko-01: 40rem;
        --font-lineheight-ko-02: 36rem;
        --font-lineheight-ko-03: 32rem;
        --font-lineheight-ko-04: 29rem;
        --font-lineheight-ko-05: 25rem;
        --font-lineheight-ko-06: 26rem;
        --font-lineheight-ko-07: 21rem;
        --font-lineheight-ko-08: 18rem;

        --font-lineheight-en-01: 40rem;
        --font-lineheight-en-02: 36rem;
        --font-lineheight-en-03: 32rem;
        --font-lineheight-en-04: 29rem;
        --font-lineheight-en-05: 25rem;
        --font-lineheight-en-06: 26rem;
        --font-lineheight-en-07: 21rem;
        --font-lineheight-en-08: 18rem;
    }

    html { font-size: 0.26666666666666665vw; }

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

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

    /* HEADER */
    #header { height: 68rem; }
    .header__inner { padding: 0 20rem; }

    #logo { left: 20rem; top: 20rem; width: 106rem; height: 28rem; }
    
    #small-menu-btn { right: 12rem; top: 16rem; }

    .small-menu-btn__line { width: 20rem; left: 7rem; }
    .small-menu-btn__line--01 { top: 10rem; }
    .small-menu-btn__line--03 { bottom: 10rem; }

    .small-menu__member { height: 62rem; }
    
    #small-menu-container { padding: 62rem 0 170rem; max-width: 308rem; }

    /* FLOAT UI */
    .float-ui { bottom: 20rem; right: 20rem; }
    html.naver .float-ui { bottom: 50rem; }


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

    .footer__sitemap { margin-top: -20rem; }

    .footer__sitemap-list { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0; }
    .footer__sitemap-list > li { border-bottom: 1rem solid rgba(255, 255, 255, 0.1); }
    .footer__sitemap-list > li:last-child { margin-bottom: 0; }
    .footer__sitemap-list > li > button { padding: 18rem 0; cursor: pointer; }
    .footer__sitemap-sublist { margin-bottom: 12rem; margin-top: -12rem; }
    .footer__sitemap-sublist > ul  { display: none; }
    .footer__sitemap-sublist > ul  > li > a { padding:5rem 0; }

    .footer__sitemap-dropdown { display: inline-block; position: absolute; right: 0; background: none; border:0; padding:0; cursor: pointer; }
    .footer__sitemap-dropdown .jt-guide--icon { vertical-align: 2rem; opacity: .5; transition: transform .3s, opacity .3s; }
    .footer__sitemap-dropdown .jt-guide--icon svg { width: 10rem; }
    .footer__sitemap--active .footer__sitemap-dropdown .jt-guide--icon { opacity: 1; transform: rotate(-180deg); }

    .footer__bottom { padding-top: 0; border-top: 0; margin-top: 54rem; }

    .footer__menu-list > li { margin-right: 13rem; }
    .footer__member > li { padding-left: 13rem; }

    .footer__info { margin-bottom: 12rem; }
    .footer__info-container { margin-top: 40rem; }
    .footer__info small:after { margin-bottom: 3rem; }
    .footer__info small.sm-last:after { display: none; }

    html.mobile .footer__family .jt-selectric__wrap { width: 200rem; }
    html.mobile .footer__family .jt-selectric__wrap:before { background-size: 10rem; width: 40rem; }
    html.mobile .footer__family .jt-selectric__wrap > select { padding-left: 15rem; padding-right: 40rem; width: 100%; }

    /* CONTAINER */
    .main-container { margin-top: 62rem; }
    
    /* ARTICLE */
    .article { padding: 48rem 0 67rem; }
    .article__header { margin-bottom: 38rem; }
    .article__title sup { margin-top: 2rem; }
    .article__desc { margin-top: 12rem; }
    .article-section__head { margin-bottom: 22rem; padding-right: 105rem; }

    /* SINGLE */
    .single { padding-top: 48rem; }
    .single-content { padding-bottom: 67rem; }
    .single__header .jt-category__list { margin-bottom: 28rem; margin-right: 50rem; }
    .single__header .jt-share__tooltip { position: fixed; right: auto; top: auto; bottom: 32rem; left: 50%; transform: translateX(-50%); }
    .single__subtitle { margin-bottom: 4rem; }
    .single__title { margin-right: 48rem; }
    .single__control { margin-top: 40rem; }
    .single-pagination { margin-top: 80rem; }
    .single__pagination-type { top: 18rem; left: 0; }
    .single-pagination__link { padding: 18rem 0rem 17rem 60rem; }

    .jt-category__list ~ .single__title { margin-right: 0; }

    /* PASSWORD POPUP */
    .jt-popup__overlay#jt-popup--password .jt-popup__container { padding: 36rem 24rem 84rem; }
    .jt-popup__overlay#jt-popup--password .jt-popup__title { padding-bottom: 24rem; }
    .jt-popup__overlay#jt-popup--password .jt-popup__close { right: 24rem; top: 48rem; transform: translateY(-50%); }
    
    /* 404 */
    .jt-error .wrap { min-height: calc((var(--vh, 1vh) * 100) - 62rem); }
    .jt-error__content .jt-btn__basic { width: 190rem; }
    .jt-error__content p { margin-bottom: 48rem; }
    .jt-error--icon-wrap { margin-bottom: 0; }
    .jt-error--icon { height: 60rem; }
    .jt-error::before { display: none; }
    html.ios .jt-error .wrap  { min-height: calc(100svh - 62rem); }
}