@charset "utf-8";

/*
 * File       : rwd-layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.1
 *
 * Dependency : css/reset.css
 *              css/ke-strap.css
 *              css/layout.css
 *
 * SUMMARY:
 * 01) 2000px
 * 02) 1850px
 * 03) 1680px
 * 04) 1570px
 * 05) 1480px
 * 06) 1023px
 * 07) 860px
 * 08) 540px
 */



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

    /* 404 */
    .error-404__bg { width: 1010em; height: 607em; font-size: 0.05254860746190225vw; }
    
}



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

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



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

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

    /* HEADER */
    .header__inner { max-width: inherit; margin: 0 80rem; }

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



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

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

    /* INQUIRY BANNER */
    .global-inquiry-banner__content { max-width: inherit; margin: 0 160rem; }
    
}



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

    html { font-size: 0.06756756756756757vw; }

    /* LAYOUT */
    .wrap-wide { margin: 0 125rem; }
    .wrap-middle { margin: 0 50rem; }
    .wrap { margin: 0 125rem; }
    .wrap-narrow { max-width: inherit; margin: 0 200rem; }

    .article { padding-bottom: 160rem; }
    .article-header { margin-bottom: 82rem; }
    .article-title { font-size: 20rem; }
    .article-intro { margin-top: 14rem; font-size: 40rem; }
    .article-addition { margin-top: 24rem; }

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

    #menu > li > a { padding: 0 36rem; }
    #menu .sub-menu__wrap > ul > li > a { padding: 8rem 0 7rem; }

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

    .footer__menu > li > a { padding-left: 15rem; padding-right: 15rem; }
    .footer__menu > li.footer__menu--group > a { padding-right: 30rem; }
    .footer__menu > li > ul > li > a { padding: 5rem 0; }

    .footer__relation-list em { margin-bottom: 8rem; }
    .footer__relation-list a { padding: 5rem 0; }

    .footer__sns-wrap { top: 58rem; }
    .footer__sns > li { margin: 0 2rem; }

    /* INQUIRY BANNER */
    .global-inquiry-banner { height: 340rem; }
    .global-inquiry-banner__content { margin: 0 125rem; }
    .global-inquiry-banner__typo { padding-right: 260rem; font-size: 36rem; }
    .global-inquiry-banner__cat { margin-bottom: 14rem; font-size: 19rem; }

    /* TAG */
    body.tag .article-title { font-size: 40rem; }

    /* BROWSER SUPPORT */
    .ke-browser-support h1 { font-size: 40rem; }

    /* 404 */
    body.error404 .wrap-middle { margin: 0 125rem; }

    .error-404__bg { width: 810rem; height: 487rem; }
    .error-404__inner h1 { font-size: 54rem; }
    .error-404__inner p { margin: 18rem 0 50rem; }

    /* STICKY BANNER */
    .global-sticky-banner { right: 32rem; bottom: 32rem; }
    .global-sticky-banner__item { width: 60rem; height: 60rem; margin: 8rem 0; }
    .global-sticky-banner__item .ke-guide--icon { width: 30rem; }

}



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

    html { font-size: 0.09775171065493645vw; }

    /* LAYOUT */
    ::-webkit-input-placeholder { font-size: 17rem; }
    ::-moz-placeholder { font-size: 17rem; }
    :-ms-input-placeholder { font-size: 17rem; }

    .wrap-wide { margin: 0 40rem; }
    .wrap-middle { margin: 0 40rem; }
    .wrap { margin: 0 100rem; }
    .wrap-narrow { margin: 0 100rem; }

    .main-container { padding-top: 140rem; }

    .article { padding-bottom: 150rem; }
    .article-title { font-size: 19rem; }
    .article-header { margin-bottom: 64rem; }
    .article-intro { font-size: 37rem; }
    .article-addition { margin-top: 20rem; font-size: 17rem; }

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

    .menu-container,
    .header__career { display: none; }

    #small-menu-btn { display: block; width: 34rem; height: 36rem; position: absolute; top: 18rem; right: 40rem; z-index: 550; cursor: pointer; }
    .small-menu-btn__line { display: block; width: 100%; height: 2px; position: absolute; left: 0; background: #191919; }
    .small-menu-btn__line--01 { top: 8rem; }
    .small-menu-btn__line--02 { top: 17rem; }
    .small-menu-btn__line--03 { bottom: 8rem; }

    #small-menu-container { display: none; width: 100%; height: 100%; padding-top: 74rem; position: fixed; top: 0; left: 0; z-index: 650; background: #fff; overflow: hidden; }
    #small-menu-container:after { content: ''; position: absolute; left: 0; top: 73rem; width: 100%; height: 1px; background: #ddd; }
    .small-menu-container__inner { width: 100%; height: 100%; padding: 29rem 0 32rem; 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; line-height: 1.6; letter-spacing: -0.025em; font-weight: bold; }
    #small-menu span { display: inline-block; position: relative; }
    #small-menu > li > a { padding-top: 17rem; padding-bottom: 18rem; font-size: 20rem; color: #888; }
    #small-menu > li.menu-item-has-children > a:after { content: ''; width: 20rem; height: 20rem; position: absolute; right: 41rem; top: 50%; margin-top: -11rem; background: url(../images/icon/icon-chevron.svg) no-repeat center center; background-size: 20rem auto; opacity: 0.3; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: .3s; transition: .3s; }
    #small-menu > li.menu-item--careers > a > span:after { content: ''; width: 22rem; height: 22rem; position: absolute; right: -29rem; top: 50%; margin-top: -10rem; background: url(../images/icon/icon-outlink-circle.svg) no-repeat center center; background-size: 22rem auto; }
    #small-menu > li > ul { display: none; margin-bottom: 19rem; background: #f8f8f8; }
    #small-menu > li > ul > li > a { padding-top: 13rem; padding-bottom: 14rem; font-size: 16rem; color: #888; -webkit-transition: color .3s; transition: color .3s; }
    #small-menu > 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 > li > ul > li:first-child > a { padding-top: 36rem; }
    #small-menu > li > ul > li:last-child > a { padding-bottom: 36rem; }
    #small-menu > li.current-menu-item > a,
    #small-menu > li.current-menu-ancestor > a,
    html.desktop #small-menu > li > a:hover { color: #191919; }
    #small-menu > li.menu-item-has-children.menu-item--open > a:after { -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; }
    #small-menu > li > ul > li.current-menu-item > a,
    html.desktop #small-menu > li > ul > li > a:hover { color: #191919; }
    #small-menu > li > ul > li.current-menu-item > a > span:after { opacity: 1; }
    html.ios #small-menu > li.menu-item--careers > a > span:after { margin-top: -12rem; }

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

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

    .footer__extend { width: 100%; margin-bottom: 18rem; }

    .footer__menu-wrap { float: left; }
    .footer__menu > li > a { padding: 6rem 14rem; }
   
    .footer__relation { float: right; margin-left: 0; }

    .footer__sns-wrap { position: relative; top: auto; left: auto; margin-left: -1rem; clear: both; }
    .footer__sns { text-align: left; }
    .footer__sns > li { margin: 0 1rem; }

    .footer__copyright { margin-top: 40rem }

    /* INQUIRY BANNER */
    .global-inquiry-banner { height: 300rem; }
    .global-inquiry-banner__content { margin: 0 40rem; text-align: center; }
    .global-inquiry-banner__typo { padding: 15rem 0 30rem 0; font-size: 31rem; }
    .global-inquiry-banner__cat { margin-bottom: 12rem; }
    .global-inquiry-banner__link { position: relative; right: auto; top: auto; -webkit-transform: none; -ms-transform: none; transform: none; }

    /* TAG */
    body.tag .wrap-narrow { margin: 0 40rem; }
    body.tag .article-title { font-size: 37rem; }

    .tag-section { padding: 90rem 0; }
    .tag-section__title { margin-bottom: 30rem; }
    .tag-section__title h2 { font-size: 22rem; }
    .tag-section__title i { font-size: 13rem; }

    /* BROWSER SUPPORT */
    .ke-browser-support h1 { font-size: 37rem; }
    .ke-browser-support p { font-size: 17rem; }

    /* 404 */
    body.error404 .wrap-middle { margin: 0 40rem; }

    .error-404__bg { width: 580rem; height: 349rem; }
    .error-404__inner h1 { font-size: 48rem; }
    .error-404__inner p { font-size: 17rem; margin: 15rem 0 40rem; }

}



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

    html { font-size: 0.13020833333333335vw; }

    /* LAYOUT */
    body { font-family: sans-serif; }
    [lang="en"] { font-family: 'gilroy', sans-serif; }

    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; } 

    .wrap-wide { margin: 0 32rem; }
    .wrap-middle { margin: 0 32rem; }
    .wrap { margin: 0 32rem; }
    .wrap-narrow { margin: 0 64rem; }

    .article { padding-bottom: 130rem; }
    .article-header { margin-bottom: 58rem; }
    .article-title { letter-spacing: -0.025em; }
    .article-intro { font-size: 32rem; letter-spacing: -0.025em; font-weight: bold; }
    .article-addition { letter-spacing: -0.025em; }

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

    #small-menu-btn { right: 32rem; }

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

    /* FOOTER */
    #footer { padding: 30rem 0 40rem; }
    .footer__inner { margin: 0 32rem; }
    .footer__extend { margin-bottom: 14rem; }

    .footer__menu > li > a { padding: 6rem 10rem; }
    .footer__menu > li.footer__menu--group > a span { padding-right: 6rem; }
    .footer__menu > li > a > .ke-guide--icon { width: 12rem; margin-top: -4rem; }
    .footer__menu > li.footer__menu--group > a { padding-right: 24rem; }
    html.ios .footer__menu > li > a > .ke-guide--icon { margin-top: -5rem; }

    html.ios .footer__relation-button { padding-top: 6rem; padding-bottom: 6rem; }

    .footer__copyright { margin-top: 36rem; }
    .footer__copyright p { font-size: 14rem; }

    /* INQUIRY BANNER */
    .global-inquiry-banner { height: 274rem; }
    .global-inquiry-banner__content { margin: 0 32rem; }
    .global-inquiry-banner__typo { padding-bottom: 22rem; font-size: 28rem; letter-spacing: -0.025em; font-weight: bold; }
    .global-inquiry-banner__cat { font-size: 18rem; letter-spacing: -0.025em; font-weight: bold; }

    /* TAG */
    body.tag .wrap-narrow { margin: 0 32rem; }
    body.tag .article-title { font-size: 32rem; }

    .tag-section { padding: 86rem 0; }
    .tag-section__title { margin-bottom: 24rem; font-weight: bold; }

    .tag-recommend__list { margin: -4rem -2rem; }
    .tag-recommend__list a { margin: 4rem 2rem; }
    html.ios .tag-recommend__list a { padding-top: 5rem; padding-bottom: 2rem; }

    /* BROWSER SUPPORT */
    .ke-browser-support__inner { width: 680rem; }
    .ke-browser-support h1 { font-size: 32rem; }
    .ke-browser-support p { margin-top: 14rem; }
    .ke-browser-list { margin: 45rem -8rem 55rem; }
    .ke-browser-list > li { width: 130rem; margin: 0 8rem; }
    .ke-browser-list b { font-size: 13rem; }

    /* 404 */
    body.error404 .wrap-middle { margin: 0 32rem; }

    .error-404 { text-align: center; }
    .error-404__bg { width: 717rem; height: 432rem; right: -80rem; top: auto; bottom: -296rem; }
    .error-404__inner { padding-top: 0; padding-bottom: 220rem; }
    .error-404__inner h1 { font-size: 46rem; font-weight: bold; }
    .error-404__inner p { margin: 15rem 0 35rem; letter-spacing: -0.025em; }

    /* CHATBOT */
    html .KEP-WebChatArea.style-custom .KEP-ChatContainer { width: 100% !important; position: fixed !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; max-height: none !important; }
    
}



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

    html { font-size: 0.26666666666666665vw; }

    /* LAYOUT */
    ::-webkit-input-placeholder { font-size: 16rem; }
    ::-moz-placeholder { font-size: 16rem; }
    :-ms-input-placeholder { font-size: 16rem; }

    .wrap-wide { margin: 0 24rem; }
    .wrap-middle { margin: 0 24rem; }
    .wrap { margin: 0 24rem; }
    .wrap-narrow { margin: 0 24rem; }

    .main-container { padding-top: 120rem; }

    .article { padding-bottom: 110rem; }
    .article-header { margin-bottom: 44rem; }
    .article-title { font-size: 17rem; }
    .article-intro { margin-top: 12rem; font-size: 24rem; }
    .article-intro br { display: none; }
    .article-addition { margin-top: 14rem; font-size: 16rem; }
    .article-addition br { display: none; }

    .article-header .wrap-middle,
    .article-header .wrap-narrow { margin: 0 36rem; }

    /* HEADER */
    #header { height: 72rem; }
    .header__inner { margin: 0 24rem; }

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

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

    /* FOOTER */
    #footer { padding: 37rem 0 40rem; }
    .footer__inner { margin: 0 24rem; }
    .footer__extend { float: none; margin-bottom: 0; }

    .footer__menu-wrap { float: none; }
    .footer__menu > li { display: block; }
    .footer__menu > li > a { padding: 8rem 0 9rem; }
    .footer__menu > li.footer__menu--group > a { padding-right: 0; }
    .footer__menu > li > ul { padding: 0 18rem; left: 0; bottom: -webkit-calc(100% + 3rem); bottom: calc(100% + 3rem); white-space: nowrap; }
    .footer__menu > li > ul > li > a { padding: 6rem 0; }
    .footer__menu--group.footer__dropdown--active > a { color: #191919; }
    .footer__menu--group.footer__dropdown--active > a > .ke-guide--icon path { stroke: #191919; }

    .footer__relation { float: none; width: 100%; margin: 35rem 0 40rem; }
    .footer__relation-button { width: 100%; padding: 11rem 45rem 12rem 24rem; }
    .footer__relation-button span { font-size: 14rem; }
    .footer__relation-button .ke-guide--icon { right: 18rem; }
    .footer__relation-bundle { width: 100%; padding: 26rem 0 21rem; }
    .footer__relation-list > li { float: none; width: 100%; }
    .footer__relation-list > li + li { margin-top: 20rem; }
    .footer__relation-list em { margin-bottom: 10rem; }
    .footer__relation-list a { padding: 4rem 0; }
    html.ios .footer__relation-button { padding-top: 11rem; padding-bottom: 11rem; }

    .footer__sns > li { width: 44rem; height: 44rem; margin: 0 8rem; }
    .footer__sns .ke-guide--icon { width: 44rem; margin-top: 0; top: 0; }

    .footer__copyright { float: none; margin-top: 42rem; }

    /* INQUIRY BANNER */
    .global-inquiry-banner { height: auto; padding: 48rem 0 45rem; }
    .global-inquiry-banner__obj { background-position: -15rem 0; background-size: 638rem auto; }
    .global-inquiry-banner__content { margin: 0 24rem; }
    .global-inquiry-banner__content-inner { top: 0; -webkit-transform: none; -ms-transform: none; transform: none; }
    .global-inquiry-banner__typo { padding-top: 0; padding-bottom: 20rem; font-size: 22rem; }
    .global-inquiry-banner__typo br { display: none; }
    .global-inquiry-banner__cat { margin-bottom: 10rem; font-size: 16rem; }

    /* TAG */
    body.tag .wrap-narrow { margin: 0 24rem; }
    body.tag .article-title { margin-left: -4rem; font-size: 28rem; }

    .tag-section { padding: 60rem 0; }
    .tag-section__title { margin-left: -1rem; margin-bottom: 18rem; }
    .tag-section__title h2 { font-size: 20rem; }
    .tag-section__title i { font-size: 12rem; }

    .tag-recommend__list { margin: -3rem -2rem; }
    .tag-recommend__list a { margin: 3rem 2rem; padding-left: 14rem; padding-right: 14rem; font-size: 13rem; }

    /* BROWSER SUPPORT */
    .ke-browser-support h1 { font-size: 24rem; }
    .ke-browser-support p { margin-top: 12rem; font-size: 16rem; }
    .ke-browser-support__inner { width: 100%; padding: 0 18rem; }
    .ke-browser-list { margin: 20rem 0 26rem; }
    .ke-browser-list > li { width: 46%; height: 140rem; margin: 2%; }
    .ke-browser-list a { padding: 25rem 12rem; }
    .ke-browser-list figure { width: 56rem; }
    .ke-browser-list b { margin-top: 10rem; }

    /* 404 */
    body.error404 .wrap-middle { margin: 0 24rem; }

    .error-404__bg { width: 427rem; height: 257rem; right: -90rem; bottom: -208rem; }
    .error-404__inner { padding-bottom: 90rem; }
    .error-404__inner h1 { font-size: 42rem; }
    .error-404__inner p { margin: 15rem 0 30rem; font-size: 16rem; }
    .error-404__inner .error-404__br { display: block; }
    .error-404__controller .ke-btn__basic { min-width: 70%; }

    /* STICKY BANNER */
    .global-sticky-banner { right: 24rem; bottom: 24rem; }
    .global-sticky-banner__item { margin: 6rem 0; }    

}