@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) LAYOUT
 * 2) VISUAL
 * 3) BRAND
 * 4) STYLE
 * 5) PROJECTS
 * 6) GALLERY
 * 7) NEWS
 */

 

/* **************************************** *
 * LAYOUT
 * **************************************** */
/* RESET */
body.home { overflow-y: scroll; }
html.mobile body.home { overflow: hidden; }

body.home .main-container { padding: 0; }
body.home #header { height: auto; }
body.home #footer { padding-top: 300rem; position: fixed; bottom: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); z-index: 3; }
body.home .footer__symbol { top: 0; }
body.home .global-intro-overlay { display: block; }

/* FULLPAGE */
.main-fullpage { position: fixed; width: 100%; height: 100%; }
.main-section { position: relative; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); will-change: transform; }
.main-section__parallax { width: 100%; height: 100%; position: relative; }

.main-fullpage-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(2, 10, 10, 0.6); opacity: 0; visibility: hidden; z-index: 2; -webkit-transition: opacity .6s; transition: opacity .6s; }
body.main-fullpage--show-footer .main-fullpage-overlay { opacity: 1; visibility: visible; }

.main-fullpage__paging { position: absolute; right: 38rem; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; opacity: 1; visibility: visible; -webkit-transition: opacity .4s; transition: opacity .4s; }
.main-fullpage__paging .swiper-pagination { position: relative; }
.main-fullpage__paging .swiper-pagination-bullet { display: block; width: 32rem; height: auto; padding: 23rem 0; position: relative; background: none; outline: none; opacity: 1; }
.main-fullpage__paging .swiper-pagination-bullet:before { content: ''; width: 6rem; height: 6rem; position: absolute; top: 50%; left: 50%; background: #fff; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
.main-fullpage__paging .swiper-pagination-bullet > i { display: block; position: absolute; right: -webkit-calc(100% + 3rem); right: calc(100% + 3rem); font-size: 16rem; line-height: 1.75; font-style: normal; font-weight: 400; text-align: right; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; visibility: hidden; -webkit-transition: opacity .3s; transition: opacity .3s; }
.main-fullpage__paging .swiper-pagination-bullet.swiper-pagination-bullet-active { background: none; }
.main-fullpage__paging .swiper-pagination-bullet.swiper-pagination-bullet-active > i { opacity: 1; visibility: visible; }
body.main-fullpage--show-footer .main-fullpage__paging { opacity: 0; visibility: hidden; }

.main-fullpage__paging-helper { width: 308rem; position: absolute; top: 0; bottom: 0; right: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(2,10,10,0)),to(rgba(2,10,10,1))); background: -webkit-linear-gradient(left, rgba(2,10,10,0) 0%,rgba(2,10,10,1) 100%); background: linear-gradient(to right, rgba(2,10,10,0) 0%,rgba(2,10,10,1) 100%); opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; -webkit-transition-delay: 0s, 0s; transition-delay: 0s, 0s; z-index: 10; }
body[data-slide-index="1"] .main-fullpage__paging-helper,
body[data-slide-index="2"] .main-fullpage__paging-helper { opacity: 1; visibility: visible; -webkit-transition-delay: 0s, .2s; transition-delay: 0s, .2s; }

/* KAKAO INAPP */
html.kakao body.home .global-container > #footer { display: none; }
html.kakao body.home .main-footer #footer { position: absolute; bottom: 0; -webkit-transform: none; -ms-transform: none; transform: none; }

/* ELEMENT */
.main-section__ground { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
.main-section__ground:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.main-section__ground-bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: no-repeat center center; background-size: cover; }
.main-section__content { width: 100%; padding-top: 16rem; position: absolute; top: 50%; left: 0; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual .main-section__content h2 + p { margin-top: 8rem; }
.main-visual .main-section__content .jt-btn__basic { display: none; }

.main-visual__slider-wrap, .main-visual__slider { width: 100%; height: 100%; }
.main-visual__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
.main-visual__bg:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); }

.main-visual__action { position: absolute; left: 50%; bottom: 36rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); }

/* CUSTOM SLIDE ITEM (SHORTCODE) */
.main-visual__item--rolling .main-section__content p { display: none; }

/* MOTION */
.main-visual .main-section__content .wrap-middle > * { opacity: 0; }



/* **************************************** *
 * BRAND
 * **************************************** */
.main-brand__inner { height: 100%; padding-top: 210rem; padding-bottom: 144rem; position: relative; }

.main-brand__slider { width: 100%; height: 100%; }
.main-brand__item { width: auto; height: 100%; padding: 0 20rem; }
.main-brand__item:first-child { padding-left: 51rem; }
.main-brand__item:last-child { padding-right: 209rem; }
.main-brand__item-inner { display: block; width: -webkit-calc(100vh - 210rem); width: calc(100vh - 210rem); height: 100%; position: relative; overflow: hidden; }

.main-brand .main-section__ground:after { background: rgba(0, 0, 0, 0.25); z-index: 3; }
.main-brand__video { width: -webkit-calc(100% + 10rem); width: calc(100% + 10rem); height: -webkit-calc(100% + 10rem); height: calc(100% + 10rem); position: absolute; top: -5rem; left: -5rem; overflow: hidden; opacity: 0; -webkit-transition: opacity .3s cubic-bezier(0, 0, .58, .32); transition: opacity .3s cubic-bezier(0, 0, .58, .32); z-index: 2; -webkit-mask-image: -webkit-radial-gradient(white, black); will-change: transform; }
.main-brand__video:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.main-brand__video video { display: block; width: auto; height: auto; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.main-brand__picture { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
html.desktop .main-brand__item-inner:hover .main-brand__video {opacity: 1;}

.main-brand__typo { width: 100%; padding: 63rem 60rem; position: absolute; top: 0; left: 0; z-index: 4; }
.main-brand__typo p { margin-top: 11rem; }

/* LINK */
.main-brand__item.main-brand__item--link .main-brand__item-inner { width: -webkit-calc(100vh - 502rem); width: calc(100vh - 502rem); border: 2rem solid #fff; }
.main-brand__item.main-brand__item--link .main-brand__more { display: block; width: 100%; height: 100%; }
.main-brand__item.main-brand__item--link .main-brand__more p { display: inline-block; width: 100%; position: absolute; top: 50%; left: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); font-size: 17rem; line-height: 1; font-weight: 400; letter-spacing: 0em; text-align: center; }
.main-brand__item.main-brand__item--link .main-brand__more p > span { display: inline-block; padding: 9rem 0; position: relative; }
.main-brand__item.main-brand__item--link .main-brand__more p > span:after { content: ''; display: block; width: 100%; height: 3rem; position: absolute; left: 0; bottom: 0; background: #fff; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; opacity: 0; -webkit-transition: opacity .15s, -webkit-transform .6s cubic-bezier(.19, 1, .22, 1); transition: opacity .15s, -webkit-transform .6s cubic-bezier(.19, 1, .22, 1); transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .15s; transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .15s, -webkit-transform .6s cubic-bezier(.19, 1, .22, 1); -webkit-transition-delay: 0s, .4s; transition-delay: 0s, .4s; }
html.desktop .main-brand__item.main-brand__item--link .main-brand__more:hover p > span:after { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity: 1; -webkit-transition-delay: 0s, 0s; transition-delay: 0s, 0s; }

/* MOBILE */
.main-brand__title { display: none; }



/* **************************************** *
 * STYLE
 * **************************************** */
.main-style__playground { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }

.main-style__picture { width: 136.63%; height: 134.17%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
.main-style__picture:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }
.main-style__picture .main-section__ground:nth-child(1) { -webkit-clip-path: inset(0 50% 50% 0); clip-path: inset(0 50% 50% 0); }
.main-style__picture .main-section__ground:nth-child(2) { -webkit-clip-path: inset(0 0 50% 50%); clip-path: inset(0 0 50% 50%); }
.main-style__picture .main-section__ground:nth-child(3) { -webkit-clip-path: inset(50% 50% 0 0); clip-path: inset(50% 50% 0 0); }
.main-style__picture .main-section__ground:nth-child(4) { -webkit-clip-path: inset(50% 0 0 50%); clip-path: inset(50% 0 0 50%); }
.main-style__picture .main-section__ground-bg { width: 100vw; height: 100vh; left: 50%; top: 50%; right: auto; bottom: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

.main-style__content { width: 136.63%; height: 134.17%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
.main-style__content__inner { width: 100%; height: 100%; position: relative; }
.main-style__object { position: absolute; width: 50%; height: 50%; overflow: hidden; }
.main-style__link { display: block; width: 100%; height: 100%; position: relative; }
.main-style__typo { position: absolute; }
.main-style__typo-fold { margin-top: 11rem; height: 0; }
.main-style__typo-fold > * { opacity: 0; }
.main-style__typo-fold .jt-guide--icon { display: none; height: auto; width: 20rem; padding-top: 10rem; margin-left: 1rem; }
.main-style__typo-fold .jt-guide--icon path { stroke: #ffffff; }
html.mobile .main-style__typo-fold .jt-guide--icon { display: inline-block; }

.main-style__playground-line { position: absolute; background: #fff; pointer-events: none; }
.main-style__playground-line--hor { width: 100%; height: 6rem; top: 50%; left: 0; margin-top: -3rem; }
.main-style__playground-line--ver { width: 6rem; height: 100%; top: 0; left: 50%; margin-left: -3rem; }

.main-style__object:nth-child(1) { top: 0; left: 0; }
.main-style__object:nth-child(1) .main-style__typo { right: 65rem; bottom: 37rem; }
.main-style__object:nth-child(2) { top: 0; right: 0; }
.main-style__object:nth-child(2) .main-style__typo { left: 65rem; bottom: 37rem; }
.main-style__object:nth-child(3) { bottom: 0; left: 0; }
.main-style__object:nth-child(3) .main-style__typo { right: 65rem; top: 58rem; }
.main-style__object:nth-child(4) { bottom: 0; right: 0; }
.main-style__object:nth-child(4) .main-style__typo { left: 65rem; top: 58rem; }
.main-style__object:nth-child(odd) .main-style__typo { text-align: right; }

/* MOBILE */
.main-style__cat { display: none; }



/* **************************************** *
 * PROJECTS
 * **************************************** */
.main-projects__playground { width: 100%; height: 100%; position: relative; overflow: hidden; }
.main-projects .main-section__ground:after { background: rgba(0, 0, 0, 0.3); }
.main-projects .main-section__ground .jt-fullvid-container { z-index: -1; } /* safari fix */
.main-projects__typo { width: 100%; position: absolute; left: 0; bottom: 79rem; text-align: center; }
.main-projects .main-section__content br { display: none; }

/* MOBILE */
.main-projects__title { display: none; }



/* **************************************** *
 * GALLERY
 * **************************************** */
.main-gallery__train { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; }
.main-gallery__train-rail { width: 546rem; padding: 0 75rem; position: relative; overflow: hidden; z-index: -1; }
.main-gallery__train-group { display: block; padding: 69rem 0; }
.main-gallery__train-item { width: 100%; height: 431rem; position: relative; background: no-repeat center center; background-size: cover; }
.main-gallery__train-item + .main-gallery__train-item { margin-top: 138rem; }
.main-gallery__train-item:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.3); }

.main-gallery__playground { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.main-gallery__link { display: inline-block; }
.main-gallery__link .jt-guide--icon { display: block; width: 64rem; margin: 16rem auto 0; }

/* MOBILE */
.main-gallery__title { display: none; }



/* **************************************** *
 * NEWS
 * **************************************** */
.main-news .main-section__content { padding-top: 92rem; }
.main-news__more { margin-top: 93rem; font-size: 0; }

/* MOBILE */
.main-news__title, .main-news__action { display: none; }