@charset "utf-8";

/*
 * File       : sub-bi-vi.css
 * Author     : STUDIO-JT (JSH)
 *
 * SUMMARY:
 * VISUAL
 * MEETS
 * DIRECTOR
 * SLOGAN
 * INTERVIEW
 * PRODUCT
 * IDENTITY
 */



/* **************************************** *
 * VISUAL
 * **************************************** */
.bivi-visual { position: relative; height: calc(100svh - 66rem); background: var(--color-gray-100); margin-top: 66rem; overflow: hidden; }
html.naver .bivi-visual { height: calc(100vh - 66rem); }
.bivi-visual__video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; max-width: 888rem; max-height: 888rem; transform: translate(-50%, -50%); overflow: hidden; }
.bivi-visual__video .jt-background-video { height: auto; padding-top: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); clip-path: inset(0 0 1px 0); }
.bivi-visual__inner { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }
.bivi-visual__title { margin-bottom: 87rem; }
.bivi-visual__title b { position: relative; display: inline-block; font-size: 96rem; line-height: 110rem; letter-spacing: var(--letter-spacing); font-weight: 700; opacity: 0; }
.bivi-visual__title--01,
.bivi-visual__title--02 { position: relative; overflow: hidden; }
.bivi-visual__title--02 { left: 40%; margin-top: 9rem; }
.bivi-visual__desc { position: relative; left: 40%; overflow: hidden; }
.bivi-visual__desc > p { position: relative; color: var(--color-gray-700); display: inline-block; opacity: 0; }
.bivi-visual__desc em { font-family: var(--font-secondary); }



/* **************************************** *
 * MEETS
 * **************************************** */
.bivi-meets { position: relative; padding: 140rem 0; }
.bivi-meets__screen { position: relative; border-radius: 20rem; padding-top: 32.15%; margin-bottom: 40rem; overflow: hidden; }
.bivi-meets__screen:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; opacity: .5; z-index: 1; }
.bivi-meets__screen-inner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: grid; align-items: center; align-content: center; justify-content: center; gap: 12rem; text-align: center; padding: 40rem; z-index: 1; }
.bivi-meets__title { color: var(--color-white); letter-spacing: .19em; margin-right: -.19em; }
.bivi-meets__desc { color: var(--color-gray-700); }



/* **************************************** *
 * DIRECTOR
 * **************************************** */
.bivi-director { position: relative; background: var(--color-gray-100); display: flex; justify-content: end; overflow: hidden; }
.bivi-director__content { width: 100%; display: flex; align-items: center; min-height: 100vh; }
html.kakao .bivi-director__content { min-height: var(--full-height); }
.bivi-director__content-inner { padding: 140rem calc(50% + 125rem) 140rem 0; }

.bivi-director__image { position: absolute; width: 50%; right: 0; top: 0; height: 100%; }
.bivi-director__image .jt-lazyload { height: 100%; }
.bivi-director__image .jt-lazyload img { object-fit: cover; height: 100%; }
.bivi-director__image-author { display: block; position: absolute; bottom: 24rem; right: 24rem; font-size: 0; opacity: .5; }
.bivi-director__image-author > span { position: relative; color: var(--color-white); }
.bivi-director__image-author > span + span { padding-left: 9rem; margin-left: 8rem; }
.bivi-director__image-author > span + span:before { content: ''; position: absolute; left: 0; top: 4rem; width: 1px; height: 10rem; background: var(--color-white); } 
html.ios .bivi-director__image-author > span + span:before { top: 5rem; }
.bivi-director__image-author em { font-family: var(--font-secondary); }



/* **************************************** *
 * SLOGAN
 * **************************************** */
.bivi-slogan { position: relative; padding: 160rem 0; background: #000; text-align: center; color: var(--color-white); }
.bivi-slogan__logo { display: flex; align-items: center; justify-content: center; height: 46rem; margin-bottom: 10rem; }
.bivi-slogan__logo .jt-icon { width: 46rem; }
.bivi-slogan__logo .jt-icon svg { overflow: visible; }
.bivi-slogan__logo .jt-icon path { fill: var(--color-white); }
.bivi-slogan__interview-author { display: block; margin-top: 16rem; color: var(--color-gray-500); }
.bivi-slogan__interview-author:before { content: '- '; }
.bivi-slogan__interview-author:after { content: ' -'; }



/* **************************************** *
 * INTERVIEW
 * **************************************** */
.bivi-interview { position: relative; padding-bottom: 160rem; }
.bivi-interview__sticky { display: flex; }

.bivi-interview__content { position: sticky; top: 0; display: grid; align-content: start; padding: 160rem 0 40rem; width: 50%; height: 100vh; overflow: auto; scrollbar-width: none; }
.bivi-interview__content::-webkit-scrollbar { display: none; }
html.kakao .bivi-interview__content { height: var(--full-height); }
.bivi-interview__question { margin-bottom: 20rem; }
.bivi-interview__answer-item + .bivi-interview__answer-item { margin-top: 40rem; }
.bivi-interview__answer-item p { color: var(--color-gray-700); }
.bivi-interview__answer-item p + p { margin-top: 10rem;}
.bivi-interview__answer-item .jt-typo--hanwha { font-weight: 100; }
.bivi-interview__author { display: block; margin-top: 12rem; font-size: 0; }
.bivi-interview__author > span { position: relative; color: var(--color-gray-700); }
.bivi-interview__author > span + span { padding-left: 9rem; margin-left: 8rem; }
.bivi-interview__author > span + span:before { content: ''; position: absolute; left: 0; top: 5rem; width: 1px; height: 12rem; background: var(--color-gray-700); } 
html.ios .bivi-interview__author > span + span:before { top: 6rem; }

.bivi-interview__image { position: relative; width: 50%; right: 10%; padding-top: 160rem; }
.bivi-interview__image-item { position: relative; border-radius: 20rem; overflow: hidden; margin-bottom: 40rem; }
.bivi-interview__image-item:last-child { margin-bottom: 0; }
.bivi-interview__image-item--01 .jt-lazyload { padding-top: 115.84%; }
.bivi-interview__image-item--02 .jt-lazyload { padding-top: 67.2%; }
.bivi-interview__image-item--03 .jt-lazyload { padding-top: 115.84%; }
.bivi-interview__image-item--04 .jt-lazyload { padding-top: 62.4%; }
.bivi-interview__image-item--05 .jt-lazyload { padding-top: 100%; }
.bivi-interview__image-item--06 .jt-lazyload { padding-top: 67.2%; }
.bivi-interview__image-item--07 .jt-lazyload { padding-top: 119.2%; }
.bivi-interview__image-item--08 .jt-lazyload { padding-top: 100%; }



/* **************************************** *
 * PRODUCT
 * **************************************** */
.bivi-product { display: grid; grid-template-columns: repeat(6, 1fr); }
.bivi-product__item .jt-lazyload { height: 100%; object-fit: cover; }
.bivi-product__item--01 { grid-column: 1 / 3; grid-row: 1 / 3; }
.bivi-product__item--01 .jt-lazyload { padding-top: 200%; }
.bivi-product__item--02 { grid-column: 3 / 7; }
.bivi-product__item--02 .jt-lazyload { padding-top: 50%; }
.bivi-product__item--03 { grid-column: 3 / 5; }
.bivi-product__item--03 .jt-lazyload { padding-top: 100%; }
.bivi-product__item--04 { grid-column: 5 / 7; }
.bivi-product__item--04 .jt-lazyload { padding-top: 100%; }



/* **************************************** *
 * IDENTITY
 * **************************************** */
.bivi-identity { position: relative; padding: 160rem 0 320rem; }

.bivi-identity__title { text-align: center; margin-bottom: 40rem; transition: color .3s; }
.bivi-identity__desc { text-align: center; color: var(--color-gray-800); margin-bottom: 80rem; transition: color .3s; }

body.jt-background--dark .bivi-identity__title { color: var(--color-white); }
body.jt-background--dark .bivi-identity__desc { color: var(--color-white); opacity: .8; }

.bivi-identity__logo { padding-bottom: 200rem; }
.bivi-identity__font { padding-top: 160rem; }

.bivi-identity__case { display: grid; }
.bivi-identity__case-item { position: relative; background: var(--color-gray-100); border-radius: 20rem; overflow: hidden; display: grid; align-items: center; align-content: center; justify-content: center; transition: background .3s; }
.bivi-identity__case-title { position: absolute; left: 24rem; top: 24rem; color: var(--color-gray-700); }

/* LOGO */
.bivi-identity__logo .bivi-identity__case { gap: 20rem; grid-template-columns: repeat(6, 1fr); }

.bivi-identity__logo .bivi-identity__case-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.bivi-identity__logo .bivi-identity__case-logo .jt-lazyload { overflow: visible; }
.bivi-identity__logo .bivi-identity__case-motion { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230rem; clip-path: inset(0); }
.bivi-identity__logo .bivi-identity__case-motion .jt-background-video { position: relative; height: auto; padding-top: 66.66%; }

.bivi-identity__logo .bivi-identity__case-item { background: var(--color-white); }
.bivi-identity__logo .bivi-identity__case-item--01 { grid-column: 1 / 4; padding-top: 91.5%; }
.bivi-identity__logo .bivi-identity__case-item--02 { grid-column: 4 / 7; padding-top: 91.5%; }
.bivi-identity__logo .bivi-identity__case-item--03 { grid-column: 1 / 3; padding-top: 100%; }
.bivi-identity__logo .bivi-identity__case-item--04 { grid-column: 3 / 5; padding-top: 100%; }
.bivi-identity__logo .bivi-identity__case-item--05 { grid-column: 5 / 7; padding-top: 100%; }

.bivi-identity__logo .bivi-identity__case-item--01 .bivi-identity__case-logo { width: 157rem; }
.bivi-identity__logo .bivi-identity__case-item--01 .bivi-identity__case-logo .jt-lazyload { padding-top: 119.11%; }
.bivi-identity__logo .bivi-identity__case-item--02 .bivi-identity__case-logo { width: 300rem; }
.bivi-identity__logo .bivi-identity__case-item--02 .bivi-identity__case-logo .jt-lazyload { padding-top: 25.86%; }
.bivi-identity__logo .bivi-identity__case-item--03 .bivi-identity__case-logo { width: 160rem; }
.bivi-identity__logo .bivi-identity__case-item--03 .bivi-identity__case-logo .jt-lazyload { padding-top: 63.13%; }
.bivi-identity__logo .bivi-identity__case-item--04 .bivi-identity__case-logo { width: 160rem; }
.bivi-identity__logo .bivi-identity__case-item--04 .bivi-identity__case-logo .jt-lazyload { padding-top: 46.6%; }

/* FONT */
.bivi-identity__font .bivi-identity__case { display: grid; gap: 48rem; }
.bivi-identity__font .bivi-identity__case-item { min-height: 400rem; padding: 70rem; }

.bivi-identity__case-font > p { font-size: 40rem; line-height: 54rem; color: var(--color-black); text-align: center; }
.bivi-identity__case--light { font-weight: 300; margin-bottom: 40rem; }
.bivi-identity__case--bold { font-weight: 700; }

.bivi-identity__case--ko .bivi-identity__case--light { font-size: 39rem; letter-spacing: .02em; }
.bivi-identity__case--en .bivi-identity__case--light { font-size: 39rem; letter-spacing: .022em; }

.bivi-package__download { margin-top: 120rem; text-align: center; }
.bivi-package__download .jt-icon { width: 24rem; height: 24rem; margin-left: 8rem; top: 0; transition: opacity .3s; }
.bivi-package__download .jt-icon path { fill: var(--color-white); }