@charset "utf-8";

/*
 * File       : rwd-layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) 1560px
 * 02) 1200px
 * 03) 1023px
 * 04) 860px
 * 05) 540px
 */



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

    html { font-size: 0.0641025641025641vw; }

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

    .article__header { padding-bottom: 140rem; }
    .article__scene-bg { width: 1185rem; height: 774rem; }

    .page-section { padding: 140rem 0; }
    .page-section__desc { margin-top: 20rem; }

    /* HEADER */
    #header { height: 84rem; }
    #logo { top: 30rem; }
    .menu-container { top: 22rem; }
    .language-controller { top: 27rem; }

    /* FOOTER */
    .footer__family li a { font-size: 17rem; line-height: 25rem; }
    #sitemap-menu > li > a { font-size: 19rem; line-height: 25rem; }

    /* PRIVACY */
    .privacy-item ul > li:before { top: 9rem; }

}



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

    html { font-size: 0.0833333333333333vw; }

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

    .article__header { padding-bottom: 120rem; }
    .article__scene-bg { width: 1007rem; height: 658rem; }

    .page-section { padding: 120rem 0; }
    .page-section__desc { margin-top: 18rem; }
    .page-section__more { margin-top: 52rem; }

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

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

    #logo { width: 133rem; height: 33rem; top: 24rem; }

    .menu-container { top: 16rem; }
    #menu > li > a { padding: 15rem 18rem; font-size: 17rem; line-height: 25rem; }

    .language-controller { top: 23rem; }
    .language-controller__menu li a { padding: 8rem 20rem; }

    .minimize#header .menu-container { top: 3rem; }

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

    .footer__top { grid-template-columns: 230rem auto; column-gap: 30rem; }
    .footer__bottom { margin-top: 70rem; padding-top: 30rem; }

    .footer__logo { width: 133rem; }
    
    .footer__family { margin-top: 36rem; }
    .footer__family li a { font-size: 16rem; line-height: 23rem; }
    .footer__family li a .jt-icon { width: 16rem; }
    html.desktop .footer__family li a:hover span { padding-right: 24rem; }
    
    #sitemap-menu { gap: 50rem 54rem; }
    #sitemap-menu > li > a { font-size: 18rem; line-height: 24rem; }
    #sitemap-menu > li.menu-item--community > .sub-menu > li, #sitemap-menu > li.menu-item--service > .sub-menu > li { width: calc(50% - 27rem); }

    /* TAG */
    body.tag .article__header { padding-bottom: 48rem; }

    /* PRIVACY */
    .privacy-version { margin-top: 68rem; }

    .privacy-item ul > li:before { width: 5rem; height: 5rem; }

    /* 404 */
    .error-404 .wrap { margin: 0 auto; }

}



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

    html { font-size: 0.09775171065493645vw; }

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

    .main-container { padding-top: 180rem; padding-bottom: 160rem; }

    .article__scene-bg { width: 906rem; height: 592rem; }

    .page-section__head { margin-bottom: 48rem; }
    .page-section__desc { margin-top: 15rem; }

    .wrap { margin: 0 40rem; }

    /* HEADER */
    #header { height: 60rem; }
    .header__inner { margin: 0 28rem; }

    .menu-container,
    .language-controller { display: none; }

    #logo { width: 100rem; height: 25rem; top: 18rem; }

    .small-menu-controller { display: block; width: 30rem; height: 30rem; position: absolute; top: 16rem; right: 25rem; transition: top .3s; }
    .small-menu-controller__line { display: block; width: 24rem; height: 2rem; position: absolute; left: 3rem; background: #fff; }
    .small-menu-controller__line--01 { top: 10rem }
    .small-menu-controller__line--02 { bottom: 9rem }

    #small-menu-container { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 650; background: var(--color-base-bg); overflow: hidden; }
    #small-menu-container:before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(../images/layout/menu-bg.jpg) no-repeat center center; background-size: cover; z-index: 1; }
    .small-menu-container__inner { width: 100%; height: 100%; padding: 80rem 40rem 40rem; position: relative; z-index: 2; overflow-y: scroll; }
    .small-menu-nav { display: block; max-width: 325rem; }
    #small-menu { position: relative; }
    #small-menu li { display: block; position: relative; }
    #small-menu a { display: block; position: relative; color: inherit; }
    #small-menu a span { position: relative; }
    #small-menu > li > a { padding: 16rem 0; font-size: 18rem; line-height: 26rem; font-weight: 700; }
    #small-menu > li > a > span:after { content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: -2rem; background: #fff; transform-origin: 100% 50%; transform: scale3d(0, 1, 1); }
    #small-menu > li.current-menu-item > a > span:after { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); }

    .small-menu-language { position: absolute; left: 24rem; bottom: 60rem; font-size: 0; }
    .small-menu-language > li { display: inline-block; vertical-align: middle; }
    .small-menu-language > li > a { display: block; padding: 3rem 16rem; position: relative; color: rgba(255,255,255,0.5); transition: color .3s; }
    .small-menu-language > li:not(:last-child) > a:after { content: ''; width: 1px; height: 10rem; position: absolute; right: 0; top: 50%; background: #fff; transform: translateY(-50%); }
    .small-menu-language > li.small-menu-language--current > a,
    html.desktop .small-menu-language > li > a:hover { color: #fff; }

    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 .small-menu-controller { z-index: 651; }
    
    /* FOOTER */
    .footer__top { display: block; }
    .footer__bottom { margin-top: 50rem; padding-top: 28rem; }

    .footer__family { display: flex; flex-wrap: wrap; row-gap: 10rem; margin: 24rem -12rem 0; }
    .footer__family li a { padding: 0 12rem; }
    .footer__family li a span { display: block; padding: 7rem 0; }
    .footer__family li a .jt-icon { display: none; }
    html.desktop .footer__family li a:hover span { padding-right: 0; }

    .footer__sitemap { margin-top: 70rem; }
    #sitemap-menu > li > a { font-size: 17rem; }
    #sitemap-menu .sub-menu a { font-size: 14rem; line-height: 20rem; }

    .footer__language { display: block; margin-bottom: 28rem; }
    .footer__language__select { position: relative; font-size: 0; }
    .footer__language .jt-icon { width: 26rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
    .footer__language .selectric { border: none; background: transparent; }
    .footer__language .selectric .label { height: 34rem; margin: 0 34rem; line-height: 34rem; }
    .footer__language .selectric .button { right: 17rem; }
    .footer__language .selectric-items { min-width: auto; top: calc(100% + 5rem); }
    .footer__language .selectric-above.selectric-open .selectric-items { top: auto; bottom: calc(100% + 5rem); }
    html.mobile .footer__language .jt-selectric__wrap { background: transparent; }
    html.mobile .footer__language .jt-selectric__wrap:before { right: 17rem; }
    html.mobile .footer__language .jt-selectric__wrap > select { padding: 7rem 34rem; border: none; }

    #footer-menu a { padding: 0 12rem; }
    #footer-menu span { font-size: 14rem; line-height: 20rem; }

    .footer__copyright { font-size: 14rem; line-height: 20rem; }

}



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

    /* FOOTER */
    #sitemap-menu > li > .sub-menu { display: block !important; }

}

@media (max-width: 860px) {

    html { font-size: 0.13020833333333335vw; }

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

    input[type=submit], input[type=button], button { font-family: sans-serif; }
    ::-webkit-input-placeholder { font-family: sans-serif; line-height: 19rem; }
    ::-moz-placeholder { font-family: sans-serif; line-height: 19rem; }
    :-ms-input-placeholder { font-family: sans-serif; line-height: 19rem; }

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

    .article__header { padding-bottom: 100rem; }
    .article__scene-bg { width: 710rem; height: 464rem; }

    .page-section { padding: 100rem 0; }
    .page-section__head { margin-bottom: 36rem; }
    .page-section__desc { margin-top: 12rem; }
    .page-section__desc br { display: none; }
    .page-section__more { margin-top: 40rem; }

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

    /* HEADER */
    .header__inner { margin: 0 24rem; }
    .small-menu-controller { right: 21rem }

    /* FOOTER */
    #footer { padding: 50rem 0; }
    .footer__bottom { margin-top: 0; padding-top: 40rem; border-top: none; }

    .footer__logo { display: none; }

    .footer__family { display: block; margin: 0; }
    .footer__family li a { padding: 5rem 0; }

    .footer__sitemap { margin-top: 54rem; }
    #sitemap-menu { display: block; }
    #sitemap-menu i { width: 8rem; }
    #sitemap-menu .sub-menu a { padding: 6rem 0; line-height: 19rem; }
    #sitemap-menu > li.menu-item--community > .sub-menu > li, #sitemap-menu > li.menu-item--service > .sub-menu > li { width: 100%; }
    #sitemap-menu > li { border-bottom: 1px solid var(--color-base-line); }
    #sitemap-menu > li > a { margin-bottom: 0; padding: 16rem 28rem 16rem 0; font-size: 15rem; line-height: 20rem; }
    #sitemap-menu > li > a:after { content: ''; width: 10rem; height: 10rem; position: absolute; margin-top: -5rem; top: 50%; right: 0; background: url(../images/icon/jt-select.svg) no-repeat center center; background-size: 10rem auto; }
    #sitemap-menu > li > .sub-menu { display: none; padding: 16rem; margin-bottom: 16rem; background: rgba(255,255,255,0.05); border-radius: 8rem; }
    #sitemap-menu > li > .sub-menu > li + li { margin-top: 10rem; }
    #sitemap-menu > li.sitemap-item--open > a:after { transform: rotate(-180deg); }
    html.ios #sitemap-menu > li > a { padding-top: 17rem; padding-bottom: 15rem; }

    .footer__language { margin-bottom: 30rem; }

    #footer-menu a { padding: 6rem 12rem; }
    #footer-menu i { width: 8rem; }

    .footer__copyright { margin-top: 18rem; position: relative; top: inherit; right: inherit; }

    /* TAG */
    body.tag .article__header { padding-bottom: 36rem; }

    /* PRIVACY */
    .privacy-item li { padding-left: 12rem; }
    .privacy-item ul > li:before { width: 4rem; height: 4rem; }
    html.ios .privacy-item ul > li:before { top: 8rem; }

}



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

    html { font-size: 0.26666666666666665vw; }

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

    .main-container { padding-bottom: 100rem; }

    .article__header { padding-bottom: 82rem; }
    .article__header br { display: none; }
    .article__desc { margin-top: 12rem; }
    .article__scene-bg { width: 497rem; height: 325rem; }
    .article__scene-light { padding-top: 100%; }

    .page-section { padding: 82rem 0; }
    .page-section__head { margin-bottom: 32rem; }
    .page-section__more { margin-top: 38rem; }

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

    /* HEADER */
    #header, .minimize#header { height: 58rem; }
    .header__inner { margin: 0 14rem; }
    #logo, .minimize#header #logo { width: 87rem; height: 22rem; }
    .small-menu-controller { top: 13rem; right: 11rem; }
    .small-menu-container__inner { padding: 63rem 40rem 32rem; }

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

    .footer__family li a { padding: 4rem 0; }
    .footer__family li a span { padding: 6rem 0; }

    .footer__sitemap { margin-top: 40rem; }
    #sitemap-menu > li > .sub-menu { padding: 14rem 16rem; }
    
    .footer__language .jt-selectric__wrap { display: inline-block; }
    .footer__language .selectric .label { font-size: 14rem; line-height: 34rem; }
    html.mobile .footer__language .jt-selectric__wrap > select { font-size: 14rem; line-height: 19rem; }

    #footer-menu span { font-size: 13rem; line-height: 17rem; }

    /* TAG */
    body.tag .article__header { padding-bottom: 32rem; }

    /* PRIVACY */
    .privacy-item { margin-bottom: 48rem; }
    .privacy-item p { margin-top: 18rem; }
    .privacy-item h2 + p { margin-top: 14rem; }
    .privacy-item ul { margin-top: 14rem; }
    .privacy-item li { margin-bottom: 6rem; padding-left: 10rem; }
    .privacy-item ul > li:before { width: 4px; height: 4px; }

    .privacy-version { margin-top: 55rem; }

    /* 404 */
    .error-404 .wrap { margin: 29rem 28rem 0; }
    .error-404 p { padding-bottom: 25rem; }

}