@charset "utf-8";

/*
 * File       : layout.css
 * Author     : STUDIO-JT (JSH)
 *
 * SUMMARY:
 * GLOBAL
 * HEADER
 * FOOTER
 * CONTAINER
 * ARTICLE
 * 404
 * HOVER
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
html { font-size: 6.25%; }
html.safari.desktop {
    font-size: 1px; /* Type : px */
}

body { overflow-x: hidden; font-family: var(--font-primary); font-size: 16rem; word-break: keep-all; color: var(--color-black); }
a { color: inherit; text-decoration: none; }

body.scroll-fixed { overflow: hidden; }
html:not(.android):not(.mac) body.scroll-fixed { position: fixed; overflow-y: scroll; height: 100%; }

/* WRAP */
.wrap { max-width: 1500rem; margin: 0 auto; position: relative; }
.wrap-narrow { max-width: 1244rem; margin: 0 auto; position: relative; }

/* BR */
br.smbr { display: none; }
br.mdbr { display: none; }

/* GRID */
.gird-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; overflow: hidden; opacity: 0.1}
.gird-background__inner { position: relative; max-width: 1244rem; margin: 0 auto; height: 100%; }
.gird-background span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-gray-300); transition: background .7s; }
.gird-background span:nth-child(1) { left: -20%; }
.gird-background span:nth-child(2) { left: -1px; }
.gird-background span:nth-child(3) { left: 20%; }
.gird-background span:nth-child(4) { left: 40%; }
.gird-background span:nth-child(5) { left: 60%; }
.gird-background span:nth-child(6) { left: 80%; }
.gird-background span:nth-child(7) { right: -1px; }
.gird-background span:nth-child(8) { right: -20%; }

/* GRAY */
.jt-background--gray .gird-background span { background: var(--color-gray-400); }

/* DARK */
body.jt-background--dark .main-container {}
body.jt-background--dark .main-container .gird-background span,
.main-container .jt-background--dark .gird-background span { background: #1f1f1f; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { position: fixed; top: 0; left: 0; width: 100%; height: 115rem; background: var(--color-white); z-index: 500; } 
#header:after { content: ''; position: absolute; left: 0; width: 100%; top: 0; height: 100%; background: var(--color-white); border-bottom: 1px solid var(--color-gray-300); box-sizing: border-box; }
.header__inner { max-width: 1500rem; height: 100%; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: end; gap: 22rem; z-index: 1; }

/* LOGO */
#logo { width: 101rem; height: 26rem; position: absolute; left: 0; top: 20rem; z-index: 2; }
#logo a { display: block; width: 100%; height: 100%; }
#logo a svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* LANGUAGE */
.header__language { display: flex; align-items: center; gap: 2px; }
.header__language a { display: block; padding: 7rem 12rem; position: relative; color: var(--color-gray-500); transition: color .3s; }
.header__language a:nth-child(n+2):before { content: ''; position: absolute; right: 100%; top: 50%; width: 2px; height: 12rem; margin-top: -6rem; background: var(--color-gray-500); }
.header__language a.header__language--current { color: var(--color-black); }

/* MENU */
.menu-controller { display: block; width: 30rem; height: 30rem; position: relative; right: -3rem; }
.menu-controller__line { display: block; width: 24rem; height: 2px; background: var(--color-black); position: absolute; left: 3rem; }
.menu-controller__line--01 { top: 6rem; }
.menu-controller__line--02 { top: 14rem; }
.menu-controller__line--03 { top: 22rem; }

.menu-container { display: none; width: 100%; position: fixed; top: 66rem; left: 0; bottom: 0; border-top: 1px solid var(--color-gray-300); overflow: hidden; z-index: 650; }
.menu-container__space { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .7; }
.menu-container__inner { position: relative; background: var(--color-white); z-index: 1; border-bottom: 1px solid var(--color-gray-300); }

.menu-nav { display: flex; max-width: 1244rem; margin: 0 auto; min-height: 398rem; }

#menu { width: 80%; display: flex; }
#menu a { font-size: 0; display: block; padding-left: 12rem; padding-right: 12rem; }
#menu a > span { display: inline-block; vertical-align: middle; position: relative; }
#menu a .jt-icon { transition: transform .3s; will-change: transform; }
#menu li:last-child { margin-bottom: 0; }
#menu > li { position: relative; width: 25%; padding-top: 24rem; padding-bottom: 46rem; overflow: hidden; }
#menu > li > a { position: relative; padding-top: 16rem; padding-bottom: 16rem; }
#menu > li > a .jt-icon { display: none; }
#menu > li > ul { position: relative; }
#menu > li > ul > li { margin-bottom: 8rem; }
#menu > li > ul > li > a { color: var(--color-gray-600); padding-top: 4rem; padding-bottom: 4rem; transition: color .3s; }
#menu > li > ul > li > a .jt-icon { position: relative; width: 12rem; height: 12rem; margin-left: 4rem; }
#menu > li > ul > li > a .jt-icon svg path { fill: var(--color-gray-600); }
#menu > li > ul > li > ul > li > a { color: var(--color-gray-600); padding-top: 2rem; padding-bottom: 2rem; transition: color .3s; }
#menu > li > ul > li > ul > li > a > span:before { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--color-black); display: none; }
#menu .jt-typo--hanwha { font-weight: 500; position: relative; left: -1rem; margin-right: -1rem;}

#menu li.current-menu-item > a, #menu li.current-menu-ancestor > a { color: var(--color-black); }
#menu li.menu-item--open > a > .jt-icon { transform: rotate(-180deg); }
html.mac #menu li.menu-item--open > a > .jt-icon { top: .5rem; }
#menu li.current-menu-ancestor > a > .jt-icon path { fill: var(--color-black); }
#menu > li > ul > li > ul > li.current-menu-item > a > span { text-decoration: underline; text-decoration-thickness: 2rem; text-underline-offset: 6rem; }

.menu-item--svg { width: 100%; }
.menu-item--svg i { display: inline-grid; align-items: center; height: var(--font-lineheight-ko-07); }
.menu-item--svg svg { height: calc(var(--font-size-ko-07) - 2rem); }
.menu-item--svg svg path { fill: var(--color-gray-600); transition: fill .3s; }
#menu li.current-menu-item > a > .menu-item--svg svg path { fill: var(--color-black); }

.menu-outlink { position: relative; width: 20%; padding: 40rem 0; overflow: hidden; }

.menu-family { position: relative; }
.menu-family__btn { display: none; }
.menu-family__list > li > a { display: block;  padding: 6rem 12rem; color: var(--color-gray-500); transition: color .3s; }

.menu-sns { position: relative; display: flex; align-items: center; padding: 0 4rem; gap: 4rem; margin-top: 12rem; }
.menu-sns a { display: block; padding: 8rem; }
.menu-sns .jt-icon { width: 24rem; height: 24rem; }
.menu-sns .jt-icon path { fill: var(--color-gray-500); }

body.open-menu #header { transform: none !important; opacity: 1 !important; visibility: visible !important; }

/* NAVIGATION */
.header__navigator { position: relative; top: -60rem; height: 60rem; border-bottom: 1px solid var(--color-gray-300); background: var(--color-white); opacity: 0; visibility: hidden; }
.header__navigator-list { display: flex; height: 100%; max-width: 1540rem; margin: 0 auto; height: 100%; }
.header__navigator-item { display: flex; align-items: center; width: auto; color: var(--color-gray-600); padding: 0 20rem; transition: color .3s; }
.header__navigator-item.header__navigator--current { color: var(--color-black); }
.header__navigator--native .header__navigator-list { overflow: auto; scrollbar-width: none; }
.header__navigator--native .header__navigator-list::-webkit-scrollbar { display: none; }

body.navigator--fixed .article__header { padding-top: 226rem; }
body.navigator--fixed .header__navigator { top: 0; opacity: 1; visibility: visible; }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { background: #000; padding-top: 52rem; padding-bottom: 52rem; }
.footer__inner { max-width: 1500rem; margin: 0 auto; padding-right: 200rem; position: relative; }

.footer__sns { display: flex; position: absolute; right: -12rem; top: 50%; transform: translateY(-50%); z-index: 2; }
.footer__sns > li > a { display: block; padding: 12rem; text-align: center; transition: opacity .3s; }
.footer__sns .jt-icon { width: 24rem; height: 24rem; }
.footer__sns .jt-icon svg path { fill: var(--color-white); }

.footer__menu-btn { display: none; padding: 0; background: none; border: none; font-family: 'Lifeplus', sans-serif; font-size: 0; cursor: pointer; }
.footer__menu-btn span { vertical-align: middle; }
.footer__menu-btn .jt-icon { position: relative; width: 16rem; height: 16rem; margin-left: 6rem; transition: transform .3s; will-change: transform; }
.footer__menu-btn .jt-icon svg path { fill: var(--color-white); }
.footer__menu-btn.footer__menu--open .jt-icon { transform: rotate(-180deg); }

.footer__menu-list { display: flex; flex-wrap: wrap; }
.footer__menu-list > li > a { display: block; font-weight: 500; padding: 6rem 8rem; color: var(--color-white); transition: opacity .3s; }
.footer__menu-list > li > a.jt-typo--carrot { font-weight: 700; }
.footer__menu-list > li:first-child > a { padding-left: 0; }
.footer__menu-list > li:last-child > a { padding-right: 0; }

.footer__copyright { margin-top: 6rem; font-size: 12rem; line-height: 18rem; font-weight: 700; color: var(--color-gray-700); }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { position: relative; min-height: calc(100svh - 164rem); transition: background .7s; }
html.naver .main-container { min-height: calc(100vh - 164rem); }



/* **************************************** *
 * ARTICLE
 * **************************************** */
.article { position: relative; }
.article__header { text-align: center; padding: 166rem 0 120rem; background: var(--color-white); }
.article__body { position: relative; padding-bottom: 320rem; }
.article__category { display: block; color: var(--color-gray-600); margin-bottom: 12rem; font-size: 0; }
.article__category > a { display: inline-block; }
.article__category span { vertical-align: middle; }
.article__category .jt-icon { width: 16rem; height: 16rem; margin: 0 4rem; }
.article__category .jt-icon svg path { fill: var(--color-gray-600); }
.article__desc { margin-top: 12rem; }

/* STICKY */
.article__header-sticky--active { position: sticky; top: 0; }
.article__header-sticky + div { margin-top: -100rem; }



/* **************************************** *
 * 404
 * **************************************** */
.error-404 { display: grid; align-items: center; align-content: center; min-height: 100vh; gap: 160rem; padding: 266rem 0 100rem; }
html.kakao .error-404 { height: var(--full-height); }
.error-404__marquee { width: 100%; opacity: 0; transition: opacity .3s; }
.error-404__marquee.jt-marquee { opacity: 1; }
.error-404__text { font-size: 0; }
.error-404__text span { display: inline-block; font-size: 160rem; line-height: 1; letter-spacing: var(--letter-spacing); font-weight: 700; vertical-align: middle; }
.error-404__text .jt-icon { height: auto; width: 160rem; margin: 0 60rem; }
.error-404__controller { text-align: center; }



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

    /* HEADER */
    .header__language a:not(.header__language--current):hover { color: var(--color-black); }

    /* MENU */
    #menu a:hover .jt-icon path { fill: var(--color-black); }
    #menu a:hover .menu-item--svg svg path { fill: var(--color-black); }
    #menu > li > ul > li > a:hover { color: var(--color-black); }
    #menu > li > ul > li > ul > li > a:hover { color: var(--color-black); }

    .menu-family a:hover { color: var(--color-black); }

    .menu-sns a:hover .jt-icon path { fill: var(--color-black); }

    /* NAVIGATION */
    .header__navigator-item:hover { color: var(--color-black); }

    /* FOOTER */
    .footer__menu-list > li > a:hover { opacity: 0.8; }
    .footer__sns > li > a:hover { opacity: 0.8; }

}