@charset "utf-8";

/*
 * File       : layout.css
 * Author     : STUDIO-JT (KMS, Chaehee)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) GLOBAL
 * 02) BARBA + TRANSITION
 * 03) HEADER
 * 04) FOOTER
 * 05) SCROLL
 * 06) CONTAINER
 * 07) PAGE
 * 08) INTRO
 * 09) PRIVACY
 * 10) 404
 * 11) BROWSER SUPPORT
 * 12) MOTION LINES
 * 13) KEYFRAMES
 */



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

body { overflow-x: hidden; font-family: 'Pretendard', sans-serif; font-size: 16rem; word-break: keep-all; background: #020A0A; color: #fff; }
a { color: #fff; text-decoration: none; }
[lang="en"] { font-family: 'AnekLatin', 'Pretendard', sans-serif; }

/* WRAP */
.wrap { max-width: 1488rem; margin: 0 auto; position: relative; }
.wrap-middle { max-width: 1176rem; margin: 0 auto; position: relative; }
.wrap-narrow { max-width: 864rem; margin: 0 auto; position: relative; }

br.smbr { display: none; }

/* CURSOR */
#global-cursor {position: relative;height: 0;z-index: 99999;}
html.mobile #global-cursor {display: none;}

.global-cursor--circle,
.global-cursor--word { display: block; width: 180rem; height: 180rem; position: fixed; top: 0; left: 0; pointer-events: none; }
.global-cursor--circle > span,
.global-cursor--text { display: block; width: 0; height: 0; position: absolute; top: 0; left: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; opacity: 0; }
.global-cursor--circle > span > i { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; background: rgba(255, 255, 255, 0.15); border-radius: 50%; }
.global-cursor--text > span { display: block; width: 100%; position: relative; top: 50%; font-size: 17rem; font-weight: 400; line-height: 1.2; text-align: center; color: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

/* BGM */
.global-sound { display: block; padding: 15rem 0; position: absolute; right: 51rem; top: 38rem; cursor: pointer; opacity: 0; -webkit-transition: top .3s; transition: top .3s; }

.global-sound__equalizer { display: block; width: 48rem; height: 21rem; position: relative; overflow: hidden; }
.global-sound__equalizer svg { width: 125rem; height: auto; position: absolute; left: 0; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation: equalizer 5s linear infinite; animation: equalizer 5s linear infinite; }
.global-sound__equalizer svg path { fill: none; stroke: #fff; stroke-width: 2; stroke-miterlimit: 10; }

.global-sound__label { display: none; }

.global-sound__info-message { position: absolute; top: 41rem; right: -22rem; background: #000; border: 2rem solid #fff; padding: 12rem 15rem 10rem; width: 185rem; opacity: 0; visibility: hidden; cursor: auto; }
.global-sound__info-message span { display: block; font-size: 11rem; line-height: 1.4; }



/* **************************************** *
 * BARBA + TRANSITION
 * **************************************** */
/* fix scroll */
#barba-wrapper {position: relative;overflow: hidden;}
.barba-container {display: block;}
.barba-container + .barba-container {display: none;}



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: 124rem; position: fixed; top: 0; left: 0; border-bottom: 2rem solid transparent; z-index: 500; -webkit-transition: height .3s, background .3s, border .3s; transition: height .3s, background .3s, border .3s; }
.header__inner { height: 100%; position: relative; }

/* LOGO */
#logo { width: 240rem; height: 45rem; position: absolute; left: 51rem; top: 39rem; -webkit-transition: width .3s, height .3s, top .3s; transition: width .3s, height .3s, top .3s; }
#logo a { display: block; width: 100%; height: 100%; }
#logo a svg, #logo a img { display: block; width: 100%; height: 100%; }

/* MENU */
.menu-container { display: block; position: absolute; top: 32rem; right: 116rem; font-size: 0; line-height: 1; -webkit-transition: top .3s; transition: top .3s; }
#menu {display: block;}
#menu:after {content: '';display: table;clear: both;}
#menu a { display: block; position: relative; line-height: 1.4; letter-spacing: 0.05em; }
#menu ul.sub-menu { display: none; }

#menu > li { display: inline-block; vertical-align: top; position: relative; }
#menu > li > a { padding: 16rem 30rem; position: relative; font-size: 20rem; font-weight: 400; }

.sub-menu__outer { width: 200rem; position: absolute; left: 50%; margin-left: -100rem; top: 100%; background: #020A0A; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transition: all .4s cubic-bezier(.2, .8, .25, 1); transition: all .4s cubic-bezier(.2, .8, .25, 1); }
.sub-menu__line { width: 0; height: 0; position: absolute; -webkit-transition: .8s cubic-bezier(0, 0.4, 0.5, 1); transition: .8s cubic-bezier(0, 0.4, 0.5, 1); border: 0rem solid #fff; z-index: 2; }
.sub-menu__line:nth-of-type(1) {left: 0;top: 0;height: 2rem;border-top-width: 2rem;}
.sub-menu__line:nth-of-type(2) {right: 0;top: 0;width: 2rem;border-right-width: 2rem;}
.sub-menu__line:nth-of-type(3) {right: 0;bottom: 0;height: 2rem;border-bottom-width: 2rem;}
.sub-menu__line:nth-of-type(4) {left: 0;bottom: 0;width: 2rem;border-left-width: 2rem;}
#menu > li > .sub-menu__outer > ul { display: block; }
#menu > li > .sub-menu__outer > ul > li { display: block; -webkit-transform: translateY(8rem) rotate(0.1deg); -ms-transform: translateY(8rem) rotate(0.1deg); transform: translateY(8rem) rotate(0.1deg); opacity: 0; -webkit-transition: opacity .8s cubic-bezier(.2, .8, .25, 1), -webkit-transform .8s cubic-bezier(.2, .8, .25, 1); transition: opacity .8s cubic-bezier(.2, .8, .25, 1), -webkit-transform .8s cubic-bezier(.2, .8, .25, 1); transition: transform .8s cubic-bezier(.2, .8, .25, 1), opacity .8s cubic-bezier(.2, .8, .25, 1); transition: transform .8s cubic-bezier(.2, .8, .25, 1), opacity .8s cubic-bezier(.2, .8, .25, 1), -webkit-transform .8s cubic-bezier(.2, .8, .25, 1); will-change: transform; }
#menu > li:hover > .sub-menu__outer { opacity: 1; visibility: visible; -webkit-transition: all .8s cubic-bezier(.2, .8, .25, 1); transition: all .8s cubic-bezier(.2, .8, .25, 1); }
#menu > li:hover > .sub-menu__outer > ul > li { -webkit-transform: translateY(0rem) rotate(0deg); -ms-transform: translateY(0rem) rotate(0deg); transform: translateY(0rem) rotate(0deg); opacity: 1; }
#menu > li:hover .sub-menu__line:nth-of-type(1),
#menu > li:hover .sub-menu__line:nth-of-type(3) { width: 100%; }
#menu > li:hover .sub-menu__line:nth-of-type(2),
#menu > li:hover .sub-menu__line:nth-of-type(4) { height: 100%; }

#menu > li > .sub-menu__outer > ul > li > a { padding: 15rem 27rem; font-size: 18rem; line-height: 1.33; font-weight: 400; letter-spacing: 0; }
#menu > li > .sub-menu__outer > ul > li:first-child > a { padding-top: 32rem; }
#menu > li > .sub-menu__outer > ul > li:last-child > a { padding-bottom: 30rem; }
#menu > li > .sub-menu__outer > ul > li > a > span { display: inline-block; position: relative; }
#menu > li > .sub-menu__outer > ul > li > a > span:after { content: ''; display: block; width: 100%; height: 2rem; position: absolute; left: 0; bottom: -3rem; background: #fff; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: -webkit-transform .6s cubic-bezier(.19, 1, .22, 1); transition: -webkit-transform .6s cubic-bezier(.19, 1, .22, 1); transition: transform .6s cubic-bezier(.19, 1, .22, 1); transition: transform .6s cubic-bezier(.19, 1, .22, 1), -webkit-transform .6s cubic-bezier(.19, 1, .22, 1); }
html.desktop #menu > li > .sub-menu__outer > ul > li > a:hover > span:after,
#menu > li > .sub-menu__outer > ul > li.current-menu-item > a > span:after { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/* Active Dot */
.menu-container__ball { display: block; width: 4rem; height: 4rem; position: absolute; top: 6rem; left: 50%; margin-left: -2rem; }
.menu-container__ball > span { display: block; width: 100%; height: 100%; position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background: #fff; }

/* Mobile */
#small-menu-btn, #small-menu-container { display: none; }

/* Minimize */
.minimize#header { height: 94rem; background: #020A0A; border-bottom-color: #fff; }
.minimize #logo { width: 192rem; height: 36rem; top: 28rem; }
.minimize .menu-container { top: 17rem; }
.minimize .global-sound { top: 24rem; }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { width: 100%; padding: 520rem 51rem 54rem; position: relative; overflow: hidden; }
.footer__inner { position: relative; }

.footer__symbol { width: 302rem; position: absolute; left: 50%; top: 220rem; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.footer__symbol svg { display: block; width: 100%; height: auto; }
.footer__symbol svg path { fill: #E8E9EB; opacity: 0.1; }

/* MENU */
.footer__menu-wrap { position: absolute; left: 0; bottom: 2rem; z-index: 1; }
.footer__menu { font-size: 0; }
.footer__menu > li { display: inline-block; vertical-align: middle; }
.footer__menu > li > a { display: block; padding: 0 16rem; position: relative; font-size: 16rem; font-weight: 600; letter-spacing: 0em; line-height: 1.35; color: #fff; }
.footer__menu > li > a > span { display: inline-block; padding: 6rem 0; position: relative; }
.footer__menu > li > a > span:after { content: ''; display: block; width: 100%; height: 2rem; position: absolute; left: 0; bottom: 1rem; background: #fff; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: -webkit-transform .6s cubic-bezier(.19, 1, .22, 1); transition: -webkit-transform .6s cubic-bezier(.19, 1, .22, 1); transition: transform .6s cubic-bezier(.19, 1, .22, 1); transition: transform .6s cubic-bezier(.19, 1, .22, 1), -webkit-transform .6s cubic-bezier(.19, 1, .22, 1); }
.footer__menu > li:first-child > a { padding-left: 0; }
.footer__menu > li:last-child > a { padding-right: 0; }
html.desktop .footer__menu > li > a:hover { opacity: 1; }
html.desktop .footer__menu > li > a:hover > span:after { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/* COPYRIGHT */
.copyright { font-size: 20rem; font-weight: 400; line-height: 1.64; text-align: center; color: #fff; }

/* Mobile */
.footer-menu-nav { display: none; }



/* **************************************** *
 * SCROLL
 * **************************************** */
/* TOP */
.go-top { display: block; width: 84rem; position: absolute; bottom: 1rem; right: -15rem; cursor: pointer; z-index: 10; }
.go-top .jt-guide--icon { display: block; }

/* DOWN */
.go-down { display: block; width: 64rem; position: absolute; bottom: 39rem; right: 40rem; cursor: pointer; z-index: 10; }
.go-down .jt-guide--icon { display: block; }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { padding-top: 213rem; padding-bottom: 0; }



/* **************************************** *
 * PAGE
 * **************************************** */
/* Page header */
.article-header { padding-bottom: 64rem; text-align: center; }
.article-header .jt-en-text--03 { letter-spacing: 0.03em; }

/* Page Visual */
.article-visual { position: relative; width: 100%; height: 100vh; }
.article-visual:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(2,10,10,0)), color-stop(80%, rgba(2,10,10,0.8)), to(rgba(2,10,10,1))); background: -webkit-linear-gradient(rgba(2,10,10,0) 40%, rgba(2,10,10,0.8) 80%, rgba(2,10,10,1) 100%); background: linear-gradient(rgba(2,10,10,0) 40%, rgba(2,10,10,0.8) 80%, rgba(2,10,10,1) 100%); }
.article-visual__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center; background-size: cover; }
.article-visual__bg-overlay { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #020A0A; z-index: 2; opacity: 0; visibility: hidden; }
.article-visual__bg--small { display: none; }
.article-visual__inner { width: 100%; position: absolute; top: 50%; left: 0; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; }
.article-visual__title { padding-bottom: 42rem; opacity: 0; }

/* Page body */
.article-body { position: relative; min-height: 360rem; }



/* **************************************** *
 * INTRO
 * **************************************** */
.global-intro-overlay { display: none; position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: #020A0A; z-index: 9998; }
.global-intro { display: none; position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: #020A0A; overflow: hidden; z-index: 9999; }

.global-intro__typo { width: 100%; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.global-intro__typo b { display: block; text-align: center; }

.global-intro__symbol { display: none; width: 223rem; position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); }
.global-intro__easel { width: 74rem; height: 138rem; margin: 0 auto; }
.global-intro__sign { width: 223rem; margin: 30rem auto 0; position: relative; }
.global-intro__symbol svg { display: block; width: 100%; height: auto; }



/* **************************************** *
 * PRIVACY
 * **************************************** */
.article--privacy .article-header { text-align: left; padding-bottom: 60rem; }

.privacy-select { position: absolute; top: -120rem; right: 0; -webkit-font-feature-settings: 'tnum'; -moz-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; }

.privacy-modal__close { position: absolute; top: 77rem; right: 77rem; width: 50rem; height: 50rem; background: none; border: 0; margin: 0; padding: 0; z-index: 1; cursor: pointer; }
.privacy-modal__close svg { width: 100%; height: auto; line-height: 50rem; }
.privacy-modal__close svg path { stroke: #fff; }

html.js-privacy-open .selectric-open .selectric-items {width: 100% !important}

body.privacy-popup-open .mfp-container { padding: 0; }
body.privacy-popup-open .mfp-bg { opacity: 0; }
body.privacy-popup-open .mfp-wrap { background: #020A0A; }
body.privacy-popup-open .mfp-wrap .main-container { padding-top: 213rem; padding-bottom: 200rem; }
body.privacy-popup-open .privacy-modal__close { position: fixed; z-index: 9999;}
html.desktop:not(.mac) body.privacy-popup-open .mfp-container { overflow-y: scroll; }
html.desktop:not(.mac) body.privacy-popup-open .header__inner { margin-right: 17px; }
html.desktop:not(.mac) body.privacy-popup-open .main-fullpage,
html.desktop:not(.mac) body.privacy-popup-open .story-fullpage,
html.desktop:not(.mac) body.privacy-popup-open.home #footer,
html.desktop:not(.mac) body.privacy-popup-open.page-template-brand-story #footer {width: calc(100% - 17px);}
body.open-popup-fixed { width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }



/* **************************************** *
 * 404
 * **************************************** */
body.error404 .main-container { padding-top: 0; } 
body.error404 .go-top { display: none; }

.error-404 { padding: 372rem 0 42rem; position: relative; } 
.error-404__inner { position: relative; text-align: center; } 
.error-404__inner h1 { font-size: 80rem; font-weight: 500; line-height: 1.2; } 
.error-404__inner p { padding: 31rem 0 61rem; font-size: 18rem; line-height: 1.78; } 
.error-404__controller { font-size: 0; }



/* **************************************** *
 * BROWSER SUPPORT
 * **************************************** */
.jt-browser-support { width: 100vw; height: 100vh; }
.jt-browser-support__inner { width: 750rem; margin: 0 auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; }
.jt-browser-support h1 { font-size: 44rem; line-height: 1.31; font-weight: 400; }
.jt-browser-support p { margin-top: 16rem; font-size: 18rem; line-height: 1.66; font-weight: 400; }

.jt-browser-list {margin: 50rem -12rem 60rem;font-size: 0;}
.jt-browser-list > li { display: inline-block; vertical-align: top; width: 136rem; height: 160rem; margin: 0 12rem; border: 2rem solid #fff; overflow: hidden; }
.jt-browser-list a { display: block; padding: 30rem 16rem; }
.jt-browser-list figure { width: 60rem; margin: 0 auto; }
.jt-browser-list img { display: block; width: 100%; height: auto; }
.jt-browser-list b { display: block; margin-top: 12rem; font-size: 14rem; line-height: 1.85; font-weight: 400; }

body.page-template-support #header, body.page-template-support #footer { display: none; }
body.page-template-support .main-container { padding: 0; }



/* **************************************** *
 * MOTION LINES
 * **************************************** */
.sub-lines { position: relative; width: 100%; height: 193rem; margin-top: 239rem; margin-bottom: 68rem; }
.sub-lines > span { position: absolute; top: 0; width: 40rem; height: 100%; background: #fff; }
.sub-lines > span:nth-child(1) {left: 2.75%;}
.sub-lines > span:nth-child(2) {left: 10.95%;}
.sub-lines > span:nth-child(3) {left: 43.7%;}
.sub-lines > span:nth-child(4) {left: 54.25%;}
.sub-lines > span:nth-child(5) {left: 68.95%;}
.sub-lines > span:nth-child(6) {left: 95.2%;}
html.mac.safari .sub-lines > span { will-change: transform; }

.sub-vertical-line { display: block; width: 20rem; height: 100%; background: #fff; position: absolute; top: 0; left: 0; }



/* **************************************** *
 * KEYFRAMES
 * **************************************** */
@-webkit-keyframes equalizer {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to { -webkit-transform: translateX(-62rem); transform: translateX(-62rem); }
}
@keyframes equalizer {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to { -webkit-transform: translateX(-62rem); transform: translateX(-62rem); }
}