@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */ 

/* Company */
.greetings {display:flex; align-items:center; gap:var(--space-70); overflow:hidden;}
.greetings .img {position:relative; width:50%; max-width:664px; aspect-ratio:664/885; background:#eee; overflow:hidden;}
.greetings .img img {display:block; width:100%; height:100%; object-fit:cover;}
.greetings .img .caption {position:absolute; bottom:var(--space-24); left:var(--space-24); padding:var(--space-16) var(--space-24); background:#fff;}
.greetings .img .caption .name {font-size:var(--font-size-16); line-height:1.5em; color:#171717;}
.greetings .img .caption .position {margin-top:4px; font-size:var(--font-size-12); line-height:1.5em; color:#737373;}
.greetings .cnt {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; gap:var(--space-32);}
.greetings .cnt h2 {font-size:var(--font-size-48); line-height:1.3em; color:#171717; letter-spacing:-.03em;}
.greetings .cnt p {line-height:1.5em; color:#525252;}
.greetings .cnt .sm {margin-top:var(--space-16); font-size:var(--font-size-14); font-weight:300; line-height:1.42em; color:#a1a1a1;}
.greetings .cnt .sign {font-size:var(--font-size-30); font-style:italic; line-height:1.3em; color:#a1a1a1;}

.directions {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-24);}
.directions .label {margin-bottom:16px; font-size:var(--font-size-16); font-weight:700; line-height:1.2em; color:#a1a1a1;}
.directions .info {display:flex; align-items:flex-start; gap:var(--space-16); margin-bottom:24px;}
.directions .info .icon {display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:#F5F5F5; border-radius:50%;}
.directions .info .icon svg {display:block;}
.directions .info .cnt {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column;}
.directions .info .cnt .tit {font-size:var(--font-size-16); line-height:1.5em; color:#171717;}
.directions .info .cnt .txt {font-size:var(--font-size-14); line-height:1.5em; color:#525252;}
.directions .image {position:relative; width:100%; aspect-ratio:684/494; overflow:hidden; background:#f5f5f5;}
.directions .image img {display:block; width:100%; height:100%; object-fit:cover;}

/* Business */
.brand-overview {display:flex; justify-content:space-between; gap:var(--space-100); margin-bottom:var(--space-96); overflow:hidden;}
.brand-overview .imgage {width:360px;}
.brand-overview .content {width:100%; max-width:884px;}
.brand-overview .content h2 {margin-bottom:var(--space-16); font-size:var(--font-size-14); line-height:1.42em; color:#737373;}
.brand-overview .content .title {margin-bottom:var(--space-24); font-size:var(--font-size-24); font-weight:300; line-height:1.333em; letter-spacing:-.02em; color:#171717;}
.brand-overview .content .text-wrap {display:flex; flex-wrap:wrap; gap:var(--space-48); line-height:1.625em; color:#525252;}
.brand-overview .content .text-wrap .text {width:100%; max-width:410px; display:flex; flex-direction:column; gap:var(--space-24);}
.brand-overview .content .text-wrap .author {color:#171717; font-weight:700;}

.brands-items {display:flex; flex-direction:column; gap:var(--space-64); overflow:hidden;}
.brand-item {display:flex; align-items:flex-end;}
.brand-item:nth-child(even) {flex-direction:row-reverse;}
.brand-item .image {display:flex; width:45%; max-width:600px; aspect-ratio:601/845; background:#eee; overflow:hidden;}
.brand-item .image img {display:block; width:100%; height:100%; object-fit:cover;}
.brand-item .caption {display:flex; flex-direction:column; gap:var(--space-8); position:relative; margin:0 calc(clamp(24px, calc(150 / var(--inner) * 100vw), 150px) * -1); padding:var(--space-48); background:#fff;}
.brand-item .caption .number {font-size:var(--font-size-14); font-weight:700; line-height:1.42em; color:#171717;}
.brand-item .caption .title {font-size:var(--font-size-30); font-weight:700; line-height:1.2em; color:#171717;}
.brand-item .caption .text {font-size:var(--font-size-16); font-weight:400; line-height:1.62em; color:#525252;}

/* Shop */
.shop-content {text-align:center;}
.shop-content .image {margin-bottom:var(--space-96);}
.shop-content .btn {display:inline-flex; align-items:center; justify-content:center; width:auto; padding:var(--space-16) var(--space-32); background:#171717; color:#fff; font-size:var(--font-size-16); line-height:1.625em;}
.shop-content .btn:hover {background:#505050;}