@charset "utf-8";

/*
 * File       : sub-story.css
 * Author     : STUDIO-JT (KMS, JSH)
 *
 * SUMMARY:
 * VISUAL
 * IDENTITY
 * ABOUT
 * VALUE
 * SENSORY
 * TYPE
 * BUSINESS
 */



/* **************************************** *
 * VISUAL
 * **************************************** */
.story-visual { position: relative; overflow: hidden; }

.story-visual__video { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; }
html.kakao .story-visual__video { height: var(--full-height); }
.story-visual__video-inner { width: 100%; height: 100%; position: relative; overflow: hidden; }
.story-visual__video-inner:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #000; opacity: .6; }

.story-visual__scene { width: 100%; position: absolute; top: 50%; text-align: center; margin-top: -55rem; }
.story-visual__scene b { display: block; font-size: 110rem; line-height: 1; font-weight: 700; letter-spacing: .17em; color: var(--color-white); margin-right: -.17em; }

.story-visual__content { position: relative; }
.story-visual__content-item { display: flex; align-items: center; justify-content: center; width: 100%; height: 100svh; text-align: center; padding-top: 66rem; }
html.naver .story-visual__content-item { height: 100vh; }
html.kakao .story-visual__content-item { height: var(--full-height); }
.story-visual__content-item > p { color: var(--color-white); }

.story-visual__down { position: fixed; bottom: 44rem; left: 50%; padding: 4rem; margin-left: -22rem; }
.story-visual__down .jt-icon { width: 36rem; height: 36rem; animation: scroll-down 2.5s ease-in-out infinite; }
.story-visual__down .jt-icon svg path { fill: var(--color-white); }

/* MOTION */
.story-visual__scene,
.story-visual__content-item:not(:first-child) { opacity: 0; }



/* **************************************** *
 * IDENTITY
 * **************************************** */
.story-identity { position: relative; height: 60vh; overflow: hidden; }
html.kakao .story-identity { height: calc(var(--full-height) * 2); }
.story-identity__inner { width: 100%; height: 50%; }
.story-identity__viewer-outer { position: relative; width: 600rem; height: 100%; margin: auto; }
.story-identity__viewer { width: 100%; padding-top: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.story-identity__video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); opacity: 1 !important; visibility:visible !important; }
.story-identity__video video { width: 100%; height: auto; clip-path: inset(0); }
.story-identity__video--play { opacity: 1; }
.story-identity__poster { position: absolute; top: 45%; left: 50%; width: 39%; height: 55%; transform: translate(-50%, -50%); background: no-repeat center center / cover; opacity: 0; visibility: hidden; }



/* **************************************** *
 * ABOUT
 * **************************************** */
.story-about { padding: 140rem 0; position: relative; overflow: hidden; }

.story-about .gird-background { background: var(--color-gray-100); }
.story-about__title { margin-bottom: 84rem; overflow: hidden; position: relative;  }
.story-about__title > * { position: relative; overflow: hidden; }
.story-about__title b { display: block; position: relative; }
.story-about__title--01 { color: var(--color-gray-700); left: 20%; }
.story-about__title--02 { margin-top: 12rem; left: 40%; }

.story-about__item { display: inline-flex; flex-direction: column; gap: 80rem; text-align: left; overflow: hidden; margin-left: 626rem; }
.story-about__item span { display: block; margin-bottom: 4rem; color: var(--color-gray-600); }
.story-about__item b { display: block; }
.story-about__item p { margin-top: 20rem; color: var(--color-gray-700); }



/* **************************************** *
 * VALUE
 * **************************************** */
.story-value { padding-top: 100vh; position: relative; overflow: hidden; background: var(--color-gray-100); }
html.kakao .story-value { padding-top: var(--full-height); }

.story-value__background { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; }
html.kakao .story-value__background { height: var(--full-height); }
.story-value__image { width: 200%; height: 100%; position: absolute; top: 0; background: no-repeat center center / cover; }
.story-value__image .jt-lazyload { padding-top: 100vh; }
html.kakao .story-value__image .jt-lazyload { padding-top: var(--full-height); }
.story-value__image .jt-lazyload.jt-lazyload--loaded img { height: 100%; object-fit: cover; }

.story-value__image--mobile { display: none; }

.story-value__sticky { position: absolute; top: 0; width: calc(50% + 1px); height: 100%; overflow: hidden; }
.story-value__sticky--left { left: 0; clip-path: inset( 100% 100% 0 0 ); }
.story-value__sticky--left .story-value__image { left: 0; }
.story-value__sticky--right { right: 0; clip-path: inset( 100% 0 0 100% ); }
.story-value__sticky--right .story-value__image { right: 0; }

.story-value__typo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; align-items: center; height: 100vh; opacity: 0; }
html.kakao .story-value__typo { height: var(--full-height); }
.story-value__typo span,
.story-value__typo b { display: block; text-align: center; color: var(--color-white); }
.story-value__typo span { opacity: .6; }
.story-value__typo b { margin-top: 12rem; }

.story-value__overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .2); opacity: 0; }

.story-value__spacer { height: 100vh; }
html.kakao .story-value__spacer { height: var(--full-height); }



/* **************************************** *
 * SENSORY
 * **************************************** */
.story-sensory { background: var(--color-gray-100); overflow: hidden; position: relative; }
.story-sensory__inner { position: relative; display: flex; justify-content: space-between; height: 100vh; /* max-width: 1500rem; margin: 0 auto; */ }
html.kakao .story-sensory__inner { height: var(--full-height); }

.story-sensory__title { flex: 1 1; position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; min-width: 437rem; }
.story-sensory__title > * { display: block; overflow: hidden; position: relative; opacity: 1; line-height:36px !important;}
.story-sensory__title > span { margin-bottom: 12rem; color: var(--color-gray-600); }

.story-sensory__gallery { display: flex; gap: 16rem; position: relative; right: -20%; }
.story-sensory__gallery-list { opacity: 1; transition: opacity .3s; }
.story-sensory__gallery-list.jt-marquee { opacity: 1; }
.story-sensory__gallery-item { width: 396rem; margin-bottom: 16rem; }
.story-sensory__gallery-item .jt-lazyload img { border-radius: 20rem; height: 100%; object-fit: cover; }
.story-sensory__gallery-item .jt-lazyload__color-preview { border-radius: 20rem; }

.story-sensory__gallery-list--01 { margin-top: -100rem; }
.story-sensory__gallery-list--01 .story-sensory__gallery-item:nth-child(1) .jt-lazyload { padding-top: 108.83%; }
.story-sensory__gallery-list--01 .story-sensory__gallery-item:nth-child(2) .jt-lazyload { padding-top: 133.08%; }
.story-sensory__gallery-list--01 .story-sensory__gallery-item:nth-child(3) .jt-lazyload { padding-top: 108.83%; }
.story-sensory__gallery-list--01 .story-sensory__gallery-item:nth-child(4) .jt-lazyload { padding-top: 108.83%; }
.story-sensory__gallery-list--01 .story-sensory__gallery-item:nth-child(5) .jt-lazyload { padding-top: 65.65%; }
.story-sensory__gallery-list--01 .story-sensory__gallery-item:nth-child(6) .jt-lazyload { padding-top: 108.83%; }

.story-sensory__gallery-list--02 .story-sensory__gallery-item:nth-child(1) .jt-lazyload { padding-top: 108.83%; }
.story-sensory__gallery-list--02 .story-sensory__gallery-item:nth-child(2) .jt-lazyload { padding-top: 146.46%; }
.story-sensory__gallery-list--02 .story-sensory__gallery-item:nth-child(3) .jt-lazyload { padding-top: 108.83%; }
.story-sensory__gallery-list--02 .story-sensory__gallery-item:nth-child(4) .jt-lazyload { padding-top: 108.83%; }
.story-sensory__gallery-list--02 .story-sensory__gallery-item:nth-child(5) .jt-lazyload { padding-top: 65.65%; }
.story-sensory__gallery-list--02 .story-sensory__gallery-item:nth-child(6) .jt-lazyload { padding-top: 108.83%; }



/* **************************************** *
 * TYPE
 * **************************************** */
.story-type__slider { display: flex; flex-wrap: nowrap; height: 100vh; gap: 240rem; overflow: hidden; }
html.kakao .story-type__slider { height: var(--full-height); }

.story-type__item { display: flex; flex-direction: column; justify-content: center; gap: 24rem; }
.story-type__item:first-child { padding-left: calc((100% - 1500rem) / 2); }
.story-type__item:last-child { padding-right: calc((100% - 1500rem) / 2); }

.story-type__title { font-size: 0; }
.story-type__title-inner { display: inline-block; }
.story-type__title span { display: inline-block; vertical-align: bottom; margin-left: 20rem; position: relative; top: -14rem; color: var(--color-gray-700); }

.story-type__gallery { font-size: 0; white-space: nowrap; }
.story-type__gallery > li { display: inline-block; vertical-align: top; }
.story-type__gallery > li + li { margin-left: 16rem; }
.story-type__gallery .jt-lazyload img { border-radius: 20rem; height: 100%; object-fit: cover; }
.story-type__gallery .jt-lazyload__color-preview { border-radius: 20rem; }

.story-type--art .story-type__gallery > li:nth-child(1) { width: 513rem; }
.story-type--art .story-type__gallery > li:nth-child(1) .jt-lazyload { padding-top: 100%; }
.story-type--art .story-type__gallery > li:nth-child(2) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(2) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(3) { width: 670rem; }
.story-type--art .story-type__gallery > li:nth-child(3) .jt-lazyload { padding-top: 76.56%; }
.story-type--art .story-type__gallery > li:nth-child(4) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(4) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(5) { width: 670rem; }
.story-type--art .story-type__gallery > li:nth-child(5) .jt-lazyload { padding-top: 76.56%; }
.story-type--art .story-type__gallery > li:nth-child(6) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(6) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(7) { width: 513rem; }
.story-type--art .story-type__gallery > li:nth-child(7) .jt-lazyload { padding-top: 100%; }
.story-type--art .story-type__gallery > li:nth-child(8) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(8) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(9) { width: 670rem; }
.story-type--art .story-type__gallery > li:nth-child(9) .jt-lazyload { padding-top: 76.56%; }
.story-type--art .story-type__gallery > li:nth-child(10) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(10) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(11) { width: 670rem; }
.story-type--art .story-type__gallery > li:nth-child(11) .jt-lazyload { padding-top: 76.56%; }
.story-type--art .story-type__gallery > li:nth-child(12) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(12) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(13) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(13) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(14) { width: 670rem; }
.story-type--art .story-type__gallery > li:nth-child(14) .jt-lazyload { padding-top: 76.56%; }
.story-type--art .story-type__gallery > li:nth-child(15) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(15) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(16) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(16) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(17) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(17) .jt-lazyload { padding-top: 122.14%; }
.story-type--art .story-type__gallery > li:nth-child(18) { width: 670rem; }
.story-type--art .story-type__gallery > li:nth-child(18) .jt-lazyload { padding-top: 76.56%; }
.story-type--art .story-type__gallery > li:nth-child(19) { width: 420rem; }
.story-type--art .story-type__gallery > li:nth-child(19) .jt-lazyload { padding-top: 122.14%; }

.story-type--music .story-type__gallery > li:nth-child(1) { width: 420rem; }
.story-type--music .story-type__gallery > li:nth-child(1) .jt-lazyload { padding-top: 122.14%; }
.story-type--music .story-type__gallery > li:nth-child(2) { width: 513rem; }
.story-type--music .story-type__gallery > li:nth-child(2) .jt-lazyload { padding-top: 100%; }
.story-type--music .story-type__gallery > li:nth-child(3) { width: 724rem; }
.story-type--music .story-type__gallery > li:nth-child(3) .jt-lazyload { padding-top: 70.85%; }
.story-type--music .story-type__gallery > li:nth-child(4) { width: 420rem; }
.story-type--music .story-type__gallery > li:nth-child(4) .jt-lazyload { padding-top: 122.14%; }
.story-type--music .story-type__gallery > li:nth-child(5) { width: 420rem; }
.story-type--music .story-type__gallery > li:nth-child(5) .jt-lazyload { padding-top: 122.14%; }
.story-type--music .story-type__gallery > li:nth-child(6) { width: 513rem; }
.story-type--music .story-type__gallery > li:nth-child(6) .jt-lazyload { padding-top: 100%; }
.story-type--music .story-type__gallery > li:nth-child(7) { width: 724rem; }
.story-type--music .story-type__gallery > li:nth-child(7) .jt-lazyload { padding-top: 70.85%; }
.story-type--music .story-type__gallery > li:nth-child(8) { width: 420rem; }
.story-type--music .story-type__gallery > li:nth-child(8) .jt-lazyload { padding-top: 122.14%; }
.story-type--music .story-type__gallery > li:nth-child(9) { width: 420rem; }
.story-type--music .story-type__gallery > li:nth-child(9) .jt-lazyload { padding-top: 122.14%; }
.story-type--music .story-type__gallery > li:nth-child(10) { width: 513rem; }
.story-type--music .story-type__gallery > li:nth-child(10) .jt-lazyload { padding-top: 100%; }
.story-type--music .story-type__gallery > li:nth-child(11) { width: 724rem; }
.story-type--music .story-type__gallery > li:nth-child(11) .jt-lazyload { padding-top: 70.85%; }
.story-type--music .story-type__gallery > li:nth-child(12) { width: 420rem; }
.story-type--music .story-type__gallery > li:nth-child(12) .jt-lazyload { padding-top: 122.14%; }
.story-type--music .story-type__gallery > li:nth-child(13) { width: 420rem; }
.story-type--music .story-type__gallery > li:nth-child(13) .jt-lazyload { padding-top: 122.14%; }
.story-type--music .story-type__gallery > li:nth-child(14) { width: 513rem; }
.story-type--music .story-type__gallery > li:nth-child(14) .jt-lazyload { padding-top: 100%; }
.story-type--music .story-type__gallery > li:nth-child(15) { width: 724rem; }
.story-type--music .story-type__gallery > li:nth-child(15) .jt-lazyload { padding-top: 70.85%; }
.story-type--music .story-type__gallery > li:nth-child(16) { width: 420rem; }
.story-type--music .story-type__gallery > li:nth-child(16) .jt-lazyload { padding-top: 122.14%; }
.story-type--music .story-type__gallery > li:nth-child(17) { width: 420rem; }
.story-type--music .story-type__gallery > li:nth-child(17) .jt-lazyload { padding-top: 122.14%; }

.story-type--sports .story-type__gallery > li:nth-child(1) { width: 420rem; }
.story-type--sports .story-type__gallery > li:nth-child(1) .jt-lazyload { padding-top: 122.14%; }
.story-type--sports .story-type__gallery > li:nth-child(2) { width: 724rem; }
.story-type--sports .story-type__gallery > li:nth-child(2) .jt-lazyload { padding-top: 70.85%; }
.story-type--sports .story-type__gallery > li:nth-child(3) { width: 724rem; }
.story-type--sports .story-type__gallery > li:nth-child(3) .jt-lazyload { padding-top: 70.85%; }
.story-type--sports .story-type__gallery > li:nth-child(4) { width: 384rem; }
.story-type--sports .story-type__gallery > li:nth-child(4) .jt-lazyload { padding-top: 133.59%; }

.story-type--gourmet .story-type__gallery > li:nth-child(1) { width: 724rem; }
.story-type--gourmet .story-type__gallery > li:nth-child(1) .jt-lazyload { padding-top: 70.85%; }
.story-type--gourmet .story-type__gallery > li:nth-child(2) { width: 424rem; }
.story-type--gourmet .story-type__gallery > li:nth-child(2) .jt-lazyload { padding-top: 120.99%; }
.story-type--gourmet .story-type__gallery > li:nth-child(3) { width: 724rem; }
.story-type--gourmet .story-type__gallery > li:nth-child(3) .jt-lazyload { padding-top: 70.85%; }
.story-type--gourmet .story-type__gallery > li:nth-child(4) { width: 420rem; }
.story-type--gourmet .story-type__gallery > li:nth-child(4) .jt-lazyload { padding-top: 122.14%; }
.story-type--gourmet .story-type__gallery > li:nth-child(5) { width: 724rem; }
.story-type--gourmet .story-type__gallery > li:nth-child(5) .jt-lazyload { padding-top: 70.85%; }
.story-type--gourmet .story-type__gallery > li:nth-child(6) { width: 424rem; }
.story-type--gourmet .story-type__gallery > li:nth-child(6) .jt-lazyload { padding-top: 120.99%; }
.story-type--gourmet .story-type__gallery > li:nth-child(7) { width: 724rem; }
.story-type--gourmet .story-type__gallery > li:nth-child(7) .jt-lazyload { padding-top: 70.85%; }
.story-type--gourmet .story-type__gallery > li:nth-child(8) { width: 420rem; }
.story-type--gourmet .story-type__gallery > li:nth-child(8) .jt-lazyload { padding-top: 122.14%; }



/* **************************************** *
 * BUSINESS
 * **************************************** */
.story-business { background: var(--color-gray-100); padding-top: 140rem; padding-bottom: 160rem; overflow: hidden; position: relative; }

.story-business__title { text-align: center; }
.story-business__title > span { display: block; color: var(--color-gray-600); margin-bottom: 12rem; }
.story-business__title > b { display: block; margin-bottom: 24rem; }
.story-business__title > p { color: var(--color-gray-700); }

.story-business__gallery { display: flex; flex-direction: column; gap: 16rem; margin-top: 84rem; }
.story-business__gallery-group { position: relative; display: flex; justify-content: center; gap: 16rem; }
.story-business__gallery-left { display: flex; flex-flow: column; gap: 16rem; align-items: end; justify-content: end; }
.story-business__gallery-center { display: flex; flex-flow: row wrap; gap: 16rem; align-items: start; justify-content: space-between; align-content: start; }
.story-business__gallery-right { display: flex; flex-flow: column; gap: 16rem; justify-content: end; }
.story-business__gallery-bottom { display: flex; flex-flow: row nowrap; gap: 16rem; justify-content: center; }

.story-business__gallery-item .jt-lazyload img { border-radius: 20rem; height: 100%; object-fit: cover; }
.story-business__gallery-item .jt-lazyload__color-preview { border-radius: 20rem; }

.story-business__img-center { transform-origin: 50% 0; }

.story-business__gallery-left .story-business__gallery-item:nth-child(1) { width: 297rem; }
.story-business__gallery-left .story-business__gallery-item:nth-child(1) .jt-lazyload { padding-top: 148.82%; }
.story-business__gallery-left .story-business__gallery-item:nth-child(2) { width: 450rem; }
.story-business__gallery-left .story-business__gallery-item:nth-child(2) .jt-lazyload { padding-top: 60.88%; }

.story-business__gallery-center .story-business__gallery-item:nth-child(1) { width: 620rem; z-index: 1; }
.story-business__gallery-center .story-business__gallery-item:nth-child(1) .jt-lazyload { padding-top: 66.45%; }
.story-business__gallery-center .story-business__gallery-item:nth-child(2) { width: 302rem; }
.story-business__gallery-center .story-business__gallery-item:nth-child(2) .jt-lazyload { padding-top: 146.35%; }
.story-business__gallery-center .story-business__gallery-item:nth-child(3) { width: 302rem; }
.story-business__gallery-center .story-business__gallery-item:nth-child(3) .jt-lazyload { padding-top: 146.35%; } 

.story-business__gallery-right .story-business__gallery-item:nth-child(1) { width: 297rem; }
.story-business__gallery-right .story-business__gallery-item:nth-child(1) .jt-lazyload { padding-top: 148.82%; }
.story-business__gallery-right .story-business__gallery-item:nth-child(2) { width: 450rem; }
.story-business__gallery-right .story-business__gallery-item:nth-child(2) .jt-lazyload { padding-top: 60.88%; }

.story-business__gallery-bottom .story-business__gallery-item { width: 350rem; }
.story-business__gallery-bottom .story-business__gallery-item .jt-lazyload { padding-top: 60.88%; }



/* **************************************** *
 * KEYFRAMES
 * **************************************** */
@keyframes scroll-down { 0% { transform: translateY(-10rem); opacity: .2; } 50% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-10rem); opacity: .2; } }