@charset "utf-8";

/*
 * File    : layout.css
 * Author  : STUDIO-JT
 *
 * GLOBAL
 * HEADER
 * FOOTER
 * CONTAINER
 * PAGE
 * 404
 * HOVER
 */



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

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

/* WRAP */
.wrap { width: 100%; max-width: 1840rem; margin: 0 auto; position: relative; }
.wrap-narrow { width: 100%; max-width: 900rem; margin: 0 auto; position: relative; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { position: fixed; top: 10rem; left: 10rem; right: 10rem; height: 92rem; z-index: 500; transition: background-color .3s, height .3s; }
.header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 1840rem; height: 100%; margin: 0 auto; }
.header__overlay { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); height: 200rem; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

body:has(.article__header--black) #header { background: var(--color-white); }
body:has(#menu > li:hover > ul) #header { background: var(--color-white); }
body:has(#menu > li:hover > ul) .header__overlay { opacity: 1; visibility: visible; }

/* LOGO */
#logo { width: 175rem; height: auto; transition: width .3s; }
#logo a { display: block; padding: 5rem 0; }
#logo a :is(svg, img) { display: block; width: 100%; height: auto; overflow: visible; }
#logo path { transition: fill .3s; }

/* MENU */
.menu-container { display: flex; justify-content: center; height: 100%; }

#menu { display: flex; }
#menu li { position: relative; }
#menu a { position: relative; white-space: nowrap; transition: color .3s; }
#menu a span { position: relative; }

#menu ul.sub-menu { opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.05, .9, .32, .96); }
#menu > li:hover > ul, 
#menu > li.focusin > ul { opacity: 1; visibility: visible; }

#menu > li > a { display: flex; align-items: center; height: 100%; padding: 0 30rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-black); }
#menu > li.current-menu-item > a, 
#menu > li.current-menu-ancestor > a { font-weight: 700; }
#menu > li.current-menu-item > a > span,
#menu > li.current-menu-ancestor > a > span { box-shadow: inset 0 -2px 0 currentColor; }
#menu > li > ul { position: absolute; top: 100%; left: 0; text-align: start; padding: 0 0 40rem; }
#menu > li > ul > li > a { display: block; padding: 10rem 30rem; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-gray-600); }
#menu > li > ul > li.current-menu-item > a, 
#menu > li > ul > li.current-menu-ancestor > a { color: var(--color-black); font-weight: 700; }

/* EXTRA */
.header__extra { display: flex; align-items: center; gap: 16rem; transition: gap .3s; }
.header__extra-contact { display: inline-flex; gap: 1px; color: var(--color-white); border-radius: 2rem; overflow: hidden; transform-origin: 100% 50%; transition: transform .3s; }
.header__extra-contact span { display: flex; align-items: center; justify-content: center; padding: 10rem 20rem; background: var(--color-black); transition: background-color .3s; }
.header__extra-contact .jt-icon { display: flex; align-items: center; justify-content: center; width: 46rem; background: var(--color-black); transition: background-color .3s; }
.header__extra-contact .jt-icon svg { width: 24rem; }
.header__extra-contact .jt-icon path { fill: currentColor; }
.header__extra-lang { position: relative; width: 46rem; height: 46rem; }
.header__extra-lang > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.header__extra-lang > ul { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); min-width: 100%; background: var(--color-white); opacity: 0; visibility: hidden; }
.header__extra-lang > ul > li > a { display: block; padding: 10rem 20rem; color: var(--color-gray-600); transition: color .3s; }
.header__extra-lang > ul > li > a > span { display: inline-block; }
.header__extra-lang > ul > li:first-child > a { padding-top: 20rem; }
.header__extra-lang > ul > li:last-child > a { padding-bottom: 20rem; }
.header__extra-lang > ul > li.header__extra-lang--current > a { color: var(--color-black); }
.header__extra-lang > ul > li.header__extra-lang--current > a > span { box-shadow: inset 0 -2px 0 currentColor; }

/* MOBILE */
.small-menu-controller, 
.small-menu-container { display: none; }

/* MINIMIZE */
.minimize#header { height: 82rem; background: var(--color-white); }
.minimize#header #logo { width: 160rem; }
.minimize#header .header__extra { gap: 0; }
.minimize#header .header__extra-contact { transform: scale(0.9); }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { position: relative; background: var(--color-black); padding: 60rem 0; }
.footer__inner { max-width: 1840rem; margin: 0 auto; }

.footer__top { display: flex; justify-content: space-between; gap: 20rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 40rem; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20rem; margin-top: 50rem; }

.footer__content { width: 600rem; }
.footer__menu { flex: 1; }

/* LOGO */
.footer__logo { width: 131rem; }
.footer__logo a { display: block; }
.footer__logo svg { display: block; width: 100%; height: auto; }
.footer__logo svg path { fill: var(--color-white); }

/* INFORMATION */
.footer__info { display: flex; flex-direction: column; gap: 14rem; margin-top: 73rem; padding-right: 170rem; }
.footer__info > li > b { display: flex; color: var(--color-white); }
.footer__info > li > span { display: block; color: var(--color-gray-500); margin-top: 4rem; }

/* SOCIAL */
.footer__social { display: flex; gap: 20rem; margin-top: 73rem; }
.footer__social a { position: relative; display: flex; justify-content: center; align-items: center; width: 40rem; height: 40rem; border-radius: 20rem; background: var(--color-white); transition: color .3s, background .3s; }
.footer__social a.footer__social--newsletter { width: auto; height: auto; border: 1px solid var(--color-white); background: none; padding: 9rem 17rem; color: var(--color-white); }
.footer__social .jt-icon { width: 60%; }
.footer__social .jt-icon path { fill: var(--color-black); }

/* MENU */
#footer-menu { display: flex; gap: 22rem; }
#footer-menu a { display: inline-block; transition: color .3s, box-shadow .3s; }
#footer-menu > li { flex: 1; }
#footer-menu > li > a { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 700; letter-spacing: var(--letter-spacing); color: var(--color-white); }
#footer-menu > li > ul { margin-top: 20rem; }
#footer-menu > li > ul > li > a { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-gray-500); padding: 10rem 0; }

/* COPYRIGHT */
.footer__copyright { display: flex; gap: 20rem; color: var(--color-white); }

/* PRIVACY */
.footer__policy { display: inline-block; color: var(--color-white); transition: box-shadow .3s; }

/* MAIL */
.footer__mail a { display: inline-block; color: var(--color-white); transition: box-shadow .3s; }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { position: relative; }



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article__header { display: flex; flex-direction: column; justify-content: flex-end; height: 100svh; padding-bottom: 60rem; overflow: hidden; }
.article__header--secondary { height: 650rem; }
.article__header--gray { background: var(--color-gray-100); }
.article__header--black { background: var(--color-black); color: var(--color-white); }
.article__parent { display: block; margin-bottom: 40rem; text-transform: uppercase; opacity: 0; }
.article__title { text-transform: uppercase; opacity: 0; }
.article__title--secondary { text-transform: none; }
.article__desc { margin-top: 20rem; overflow-wrap: anywhere; opacity: 0; }

/* MENU */
.article__menu { position: relative; border-top: 1px solid var(--color-gray-700); border-bottom: 1px solid var(--color-gray-700); padding: 0 40rem; z-index: 1; }
.article__menu-list { display: flex; }
.article__menu-list li { flex: 1; }
.article__menu-list a { display: block; padding: 14rem 28rem; color: var(--color-gray-600); text-align: center; transition: color .3s; }
.article__menu--current a { color: var(--color-black); }

/* PAGE BODY */
.article__body { position: relative; min-height: 360rem; }
.article__body--gray { background: var(--color-gray-100); }
.article__section { position: relative; background: var(--color-gray-100); }
.article__section--black { background: var(--color-black); color: var(--color-white); }
.article__section-head { position: relative; margin-bottom: 40rem; z-index: 1; }
.article__section-head:has(.article__section-more) { padding-right: 240rem; }
.article__section-desc { max-width: 1200rem; margin-top: 10rem; }
.article__section-more { position: absolute; right: 0; bottom: 0; color: var(--color-black); box-shadow: inset 0 -1px 0 0 currentColor; transition: box-shadow .3s; }
.article__section:has(.jt-cta) { padding: 0 0 100rem; }
.article__section--black + .article__section:has(.jt-cta) { padding-top: 100rem; }

/* VISUAL */
.article__visual { position: relative; background: var(--color-white); }
.article__visual-head { display: flex; justify-content: space-between; align-items: center; padding: 120rem 0 60rem; }
.article__visual-content { flex: 1; }
.article__visual-desc { margin-top: 20rem; }
.article__visual-control { width: 588rem; text-align: center; }
.article__visual-slide:before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, #000 100%); z-index: 1; }
.article__visual-bg { position: relative; height: 100vh; }
.article__visual-image { position: absolute; inset: 0; background: no-repeat center center / cover; }
.article__visual .swiper-control { width: 100%; bottom: 0;}
.article__visual .swiper-control .swiper-pagination.swiper-pagination-bullets { display: flex; justify-content: center; gap: 20rem; }
.article__visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { flex: 1; width: auto; height: auto; margin: 0; color: var(--color-white); border-radius: 0; padding-bottom: 40rem; }
.article__visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { display: none; }
.article__visual .swiper-control .swiper-pagination-bullet__progress { position: absolute; top: 0; left: 0; right: 0; height: 5rem; background: rgba(255, 255, 255, .1); }
.article__visual .swiper-control .swiper-pagination-bullet__progress span { position: absolute; top: 0; left: 0; height: 100%; background: var(--color-white); }
.article__visual .swiper-control .swiper-pagination-bullet__label { text-align: left; margin-top: 33rem; opacity: .3; transition: opacity .3s; }
.article__visual .swiper-control .swiper-pagination-bullet__label p { margin-top: 10rem; }

.article__visual .swiper-control .swiper-pagination-bullet-active .swiper-pagination-bullet__label { opacity: 1; }

/* TODO: 임시로 모두 활성화 */
.article__visual .swiper-control { visibility: visible; opacity: 1; }
.article__visual .swiper-control .swiper-pagination-bullet__label { opacity: 1; }
.article__visual .swiper-control .swiper-pagination-bullet__progress { background: var(--color-white); }
.article__visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { pointer-events: none; }


/* **************************************** *
 * 404
 * **************************************** */
.error-404 { display: flex; align-items: center; justify-content: center; height: 100vh; }
.error-404__inner { text-align: center; max-width: 435rem; margin: 0 auto; }
.error-404__image .jt-lazyload { width: 300rem; aspect-ratio: 1 / .4766; margin: 0 auto; }
.error-404__title { margin-top: 40rem; }
.error-404__desc { margin-top: 4rem; }
.error-404__control { display: inline-block; margin-top: 32rem; box-shadow: inset 0 -2px 0 0 currentColor; transition: color .3s; }

/* IOS 100vh helper */
html.ios .error-404 { min-height: 100svh; max-height: -webkit-fill-available; }



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

    /* HEADER */
    #menu > li > ul > li > a:hover { color: var(--color-black); }

    .header__extra-lang > ul > li > a:hover { color: var(--color-black); }
    .header__extra-lang:hover > ul { opacity: 1; visibility: visible; }

    .header__extra-contact:hover span { background: var(--color-gray-800); }
    .header__extra-contact:hover .jt-icon { background: var(--color-gray-800); }

    /* FOOTER */
    #footer-menu > li > a:hover { box-shadow: inset 0 -2px 0 0 currentColor; }
    #footer-menu > li > ul > li > a:hover { color: var(--color-white); }

    .footer__social a:hover { background: var(--color-gray-400); }
    .footer__social a.footer__social--newsletter:hover { background: var(--color-white); color: var(--color-black); }
    .footer__policy:hover { box-shadow: inset 0 -1px 0 0 currentColor; }
    .footer__mail a:hover { box-shadow: inset 0 -1px 0 0 currentColor; }

    /* PAGE */
    .article__section-more:hover { box-shadow: inset 0 -2px 0 0 currentColor; }
    .article__menu a:hover { color: var(--color-black); }
    
    .article__visual .swiper-pagination-bullet:hover .swiper-pagination-bullet__label { opacity: 1; }

    /* 404 */
    .error-404__control:hover { color: var(--color-gray-700); }
    
}