@charset "utf-8";

/*
 * File    : sub-company.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 창신소개
 * 브랜드스토리
 * 회사연혁
 */

 

/* **************************************** *
 * 창신소개
 * **************************************** */
/* OVERVIEW */
.company-overview { background: var(--color-white); }
.company-overview__inner { --clip-horizontal-space: 0%; position: relative; -webkit-clip-path: inset(0 var(--clip-horizontal-space) 0 var(--clip-horizontal-space)); clip-path: inset(0 var(--clip-horizontal-space) 0 var(--clip-horizontal-space)); }

.company-overview__spacer--enter { height: calc(var(--section-fvh) / 3); }
.company-overview__spacer--leave { height: calc(var(--section-fvh) / 2); }

.company-overview__bg { --clip-vertical-space: 50%; --clip-horizontal-space: 50%; width: 100%; height: var(--section-fvh); position: absolute; top: 0; left: 0; -webkit-clip-path: inset(var(--clip-vertical-space) var(--clip-horizontal-space) var(--clip-vertical-space) var(--clip-horizontal-space) round 0); clip-path: inset(var(--clip-vertical-space) var(--clip-horizontal-space) var(--clip-vertical-space) var(--clip-horizontal-space) round 0); }

.company-overview__typo { height: var(--section-fvh); position: relative; }
.company-overview__typo-inner { height: 100%; }
.company-overview__typo b { display: block; width: 100%; position: absolute; top: 50%; text-align: center; color: var(--color-white); transform: translateY(-50%); }

.company-overview__content { position: relative; padding-top: var(--section-fvh); }
.company-overview__content p { padding: 60rem 0; color: var(--color-white); }
.company-overview__content p:first-child { padding-top: 0; }
.company-overview__content p:last-child { padding-bottom: 0; }

/* MILESTONES */
.company-milestones { padding-top: 190rem; }

.company-milestones__chart { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 120rem; border-bottom: 2rem solid var(--color-primary); }
.company-milestones__chart > li { text-align: center; }
.company-milestones__chart > li > b { color: var(--color-primary); }
.company-milestones__chart > li > p { margin-top: 28rem; }
.company-milestones__chart > li > span { color: var(--color-gray-500); }

/* CEO */
.company-ceo { padding-top: 80rem; }

.company-ceo__title { margin-bottom: 40rem; }

.company-ceo__group { display: grid; grid-template-columns: 612fr 800fr; gap: 108rem; }

.company-ceo__picture { border-radius: var(--border-radius-04); overflow: hidden; }
.company-ceo__picture .jt-lazyload { padding-top: 128.43%; }

.company-ceo__message-note { display: flex; flex-direction: column; gap: 32rem; }
.company-ceo__message-sign { display: flex; align-items: flex-end; justify-content: flex-end; gap: 20rem; margin-top: 20rem; }
.company-ceo__message-sign .jt-lazyload { width: 178rem; aspect-ratio: 178 / 94; }



/* **************************************** *
 * 브랜드스토리
 * **************************************** */
/* KEYWORD */
.brand-keyword__vision { background: var(--color-bg-200); }

/* VALUE */
.brand-value { position: relative; background: var(--color-primary); }

.brand-value__movie { position: relative; }
.brand-value__movie-bg { padding-top: 49.68%; position: relative; }
.brand-value__movie-content { width: 100%; position: absolute; left: 0; top: 120rem; }
.brand-value__movie-title { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30rem; color: var(--color-white); }

.brand-value__collection { padding: 140rem 0; overflow: hidden; }

/* IDENTITY */
.brand-identity { padding-top: 120rem; }

.brand-identity__head { margin-bottom: 60rem; text-align: center; color: var(--color-primary); }
.brand-identity__content { position: relative; }

.brand-identity__data-item { padding-top: 100rem; }
.brand-identity__data-item:first-child { padding-top: 80rem; }

.brand-identity__data-title { margin-bottom: 60rem; padding-bottom: 31rem; position: relative; border-bottom: 1px solid var(--color-gray-500); }
.brand-identity__data-title .jt-btn__fill { position: absolute; right: 0; top: 0; }
.brand-identity__data-detail + .brand-identity__data-detail { margin-top: 80rem; }
.brand-identity__data-detail-txt { display: grid; grid-template-columns: 1fr 1.04fr; gap: 30rem; margin-bottom: 48rem; }

.brand-identity__logo { background: var(--color-bg-200); }
.brand-identity__logo .jt-lazyload { padding-top: 39.47%; }

.brand-identity__guide { display: flex; gap: 24rem; }
.brand-identity__guide > li { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12rem; padding: 32rem; background: var(--color-bg-200); }
.brand-identity__guide-name > b { display: block; color: var(--color-primary); }
.brand-identity__guide-name > span { display: block; margin-top: 4rem; color: var(--color-gray-600); }
.brand-identity__guide-image .jt-lazyload { padding-top: 54.56%; }
.brand-identity__guide-spec { display: flex; flex-direction: column; gap: 12rem; }
.brand-identity__guide-spec > li { display: flex; justify-content: space-between; align-items: center; gap: 12rem; padding-top: 7rem; border-top: 1px solid var(--color-gray-400); }
.brand-identity__guide-spec > li > b { color: var(--color-gray-500); }
.brand-identity__guide-spec > li > p { color: var(--color-gray-800); }

.brand-identity__color { display: flex; gap: 24rem; }
.brand-identity__color > li { flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 320rem; padding: 24rem; color: var(--color-white); }
.brand-identity__color > li:only-child { height: 600rem; padding: 40rem; }
.brand-identity__color > li > p { display: flex; flex-direction: column; gap: 4rem; }
.brand-identity__color > li.brand-identity__color--blue { background: var(--color-primary); }
.brand-identity__color > li.brand-identity__color--purple { background: var(--color-secondary); }
.brand-identity__color > li.brand-identity__color--cyan { background: var(--color-quaternary); }
.brand-identity__color > li.brand-identity__color--white { color: var(--color-gray-900); background: var(--color-white); border: 1px solid var(--color-gray-400); }
.brand-identity__color > li.brand-identity__color--yellow { color: var(--color-gray-900); background: var(--color-quinary); }

.brand-identity--emblem .brand-identity__guide > li:nth-child(1) { flex: 2.2; }
.brand-identity--emblem .brand-identity__guide > li:nth-child(1) .brand-identity__guide-image { width: 172rem; margin: 0 auto; }
.brand-identity--emblem .brand-identity__guide > li:nth-child(1) .brand-identity__guide-image .jt-lazyload { padding-top: 100%; }
.brand-identity--emblem .brand-identity__guide > li:nth-child(2) .brand-identity__guide-image .jt-lazyload { padding-top: 48.47%; }



/* **************************************** *
 * 회사연혁
 * **************************************** */
body.page-template-history .main-container { padding-bottom: 0; }

/* GROUP */
.history-group { background: var(--color-primary); }

.history-group .jt-stack-card--primary { background: var(--color-bg-200); }

/* TIMELINE */
.history-timeline { position: relative; }

.history-timeline__inner { height: var(--section-fvh); position: sticky; top: 0; overflow: hidden; }
.history-timeline__inner:before { content: ''; width: 100%; height: 2rem; position: absolute; left: 0; top: 50%; background: var(--color-white); transform: translateY(-50%); }

.history-timeline__content { display: grid; grid-template-columns: 53fr 250fr 124fr 490fr 145fr 38fr 740fr; width: 100%; height: 50%; padding-top: 20rem; position: absolute; left: 0; top: 50%; color: var(--color-white); }
.history-timeline__content > * { position: relative; }

.history-timeline__category { grid-column: 1; }

.history-timeline__year { grid-column: 3; margin: -10rem 0; }
.history-timeline__year h3 { padding: 10rem 0; opacity: .1; will-change: opacity; }

.history-timeline__subject { grid-column: 5; }

.history-timeline__note { grid-column: 7; }
.history-timeline__note-item { display: flex; flex-direction: column; gap: 12rem; width: 100%; position: absolute; top: 0; left: 0; opacity: 0; will-change: opacity; }

.history-timeline__gallery { height: calc(var(--section-fvh) * 0.37); max-height: 353rem; aspect-ratio: 530 / 353; position: absolute; right: 2rem; top: calc(50% - 40rem); transform: translateY(-100%); }
.history-timeline__image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; will-change: transform, opacity; }
.history-timeline__image .jt-lazyload { height: 100%; }

.history-timeline--03 { height: calc(var(--section-fvh) * 3.3); }
.history-timeline--02 { height: calc(var(--section-fvh) * 3.3); }
.history-timeline--01 { height: calc(var(--section-fvh) * 2.4); }