871 lines
22 KiB
Vue
871 lines
22 KiB
Vue
<script setup lang="ts">
|
|
// 메인(채용 홈) — Hero / About / 브랜드 / Growth / People / CTA
|
|
useHead({ title: '이너탭 (innertab)' })
|
|
|
|
// 브랜드 타일 데이터
|
|
interface BrandTile {
|
|
name: string
|
|
img: string
|
|
feature?: boolean
|
|
}
|
|
const brands: BrandTile[] = [
|
|
{ name: 'selite', img: '/images/img-selite.png', feature: true },
|
|
{ name: 'INNERDYSET', img: '/images/img-innerdyset.png' },
|
|
{ name: 'recurely', img: '/images/img-recurely.png' },
|
|
{ name: 'innerzen', img: '/images/img-innerzen.png' },
|
|
{ name: 'retriq', img: '/images/img-retriq.png' },
|
|
]
|
|
|
|
// 성장 지표 데이터
|
|
interface Stat {
|
|
title: string
|
|
value: number
|
|
unit: string
|
|
desc: string
|
|
}
|
|
const stats: Stat[] = [
|
|
{ title: '운영 브랜드', value: 5, unit: '개', desc: '서로 다른 문제를 해결하기 위해\n각기 다른 브랜드를 정교하게 설계했습니다.' },
|
|
{ title: '누적 매출', value: 150, unit: '억', desc: '고객의 믿음과 선택으로\n이너탭은 꾸준히 성장해왔습니다.' },
|
|
{ title: '연 평균 성장률', value: 320, unit: '%', desc: '끊임없는 도전과 실행으로\n이너탭은 더 빠르게 확장하고 있습니다.' },
|
|
{ title: '더 나은 일상을 연구한 시간', value: 1200, unit: '일', desc: '작은 변화가 만드는 큰 차이를\n매일 관찰하고 개선해왔습니다.' },
|
|
]
|
|
|
|
// 주요 연혁
|
|
const history: string[] = [
|
|
'일 최대 매출 4,500만원 달성',
|
|
'미국 법인 설립',
|
|
'홍콩 법인 설립',
|
|
'한국 소비자 평가 대상 2회',
|
|
]
|
|
|
|
// 구성원 카드 (실제 사진 준비 전 — 플레이스홀더)
|
|
interface PeopleCard {
|
|
label: string
|
|
shape: 'tall' | 'wide'
|
|
title: string
|
|
desc: string
|
|
}
|
|
const peopleColA: PeopleCard[] = [
|
|
{ label: '회사 사진 — 종무식', shape: 'tall', title: '2025 이너탭 종무식 : “Together, We Rise”', desc: '함께 만든 시간, 더 높이 올라가기 위한 시작' },
|
|
{ label: '회사 사진 — 인터뷰', shape: 'wide', title: '꿈은 크게, 실행은 집요하게!', desc: '브랜드사업본부장, 조이' },
|
|
]
|
|
const peopleColB: PeopleCard[] = [
|
|
{ label: '회사 사진 — 구성원', shape: 'wide', title: '2025 Innertab Superookie', desc: '최고의 순간은 함께 만든 성장 속에서 — 슈퍼루키 5인의 성장 스토리' },
|
|
{ label: '회사 사진 — 인터뷰', shape: 'tall', title: '실험·회고·학습으로 실제로 팔리는 브랜드를 만듭니다', desc: '글로벌사업본부 영미권실장, Gaby' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<AppHeader variant="home" />
|
|
|
|
<!-- ===================== HERO ===================== -->
|
|
<section class="hero">
|
|
<div class="hero-video"><span class="ph-label">▶ Hero Video</span></div>
|
|
<div class="scroll-hint"><span>SCROLL</span><i /></div>
|
|
</section>
|
|
|
|
<!-- ===================== ABOUT ===================== -->
|
|
<section id="mission" class="about">
|
|
<div class="wrap">
|
|
<div class="inner">
|
|
<p v-reveal class="m-eyebrow">ABOUT ITAB</p>
|
|
<p v-reveal="{ delay: 80 }" class="m-lead">누군가의 매일을 더 낫게 만드는 일,</p>
|
|
<h2 v-reveal="{ delay: 160 }" class="m-title">이너탭은 <mark>그 답</mark>을 제시합니다.</h2>
|
|
|
|
<p v-reveal class="about-intro">매일은 당연한 의문들로 시작됩니다.</p>
|
|
<ul class="q-list">
|
|
<li v-reveal="{ delay: 60 }">더 가뿐한 아침은 불가능할까?</li>
|
|
<li v-reveal="{ delay: 160 }">더 단단한 나를 만드는 방법은 무엇일까?</li>
|
|
</ul>
|
|
|
|
<div v-reveal class="about-statement">
|
|
<p>이너탭은 질문에 답하는 무게가 다릅니다.</p>
|
|
<p>타협 없는 설계로 본질을 짚고, 데이터와 결과로 증명합니다.</p>
|
|
<p>우리는 안주하지 않습니다.</p>
|
|
<p class="closing">사람의 매일이 닿는 모든 곳에서,<br >우리는 가장 앞선 답을 증명합니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 브랜드 벤토 그리드 -->
|
|
<div id="brands" class="brand-bento">
|
|
<article
|
|
v-for="(brand, i) in brands"
|
|
:key="brand.name"
|
|
v-reveal:scale="{ delay: i * 70 }"
|
|
class="btile"
|
|
:class="{ feature: brand.feature }"
|
|
>
|
|
<img :src="brand.img" :alt="`${brand.name} 브랜드 이미지`" >
|
|
<div class="tile-overlay" />
|
|
<span class="tile-name">{{ brand.name }}</span>
|
|
<span class="tile-arrow" aria-hidden="true">↗</span>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== GROWTH ===================== -->
|
|
<section id="growth" class="growth">
|
|
<div class="growth-bg"><span class="bg-label">BACKGROUND VIDEO</span></div>
|
|
<div class="wrap">
|
|
<div class="growth-head">
|
|
<p v-reveal class="m-eyebrow">Growth</p>
|
|
<h2 v-reveal="{ delay: 100 }">우리가 만든 변화를 증명하며,<br >끊임없이 성장하고 있습니다.</h2>
|
|
</div>
|
|
|
|
<div class="growth-layout">
|
|
<div class="stat-grid">
|
|
<div
|
|
v-for="(stat, i) in stats"
|
|
:key="stat.title"
|
|
v-reveal="{ delay: i * 90 }"
|
|
class="gcard stat-card"
|
|
>
|
|
<div class="stat-orb" />
|
|
<div class="gcard-title">{{ stat.title }}</div>
|
|
<div class="stat-big">
|
|
<CountUp :value="stat.value" /><small>{{ stat.unit }}</small><span class="plus">+</span>
|
|
</div>
|
|
<p class="stat-desc">
|
|
<template v-for="(line, li) in stat.desc.split('\n')" :key="li">
|
|
{{ line }}<br v-if="li === 0" >
|
|
</template>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-reveal="{ delay: 120 }" class="gcard history-card">
|
|
<div class="gcard-title">주요 연혁 내역</div>
|
|
<ul class="timeline">
|
|
<li v-for="(item, i) in history" :key="i" v-reveal="{ delay: 200 + i * 90 }">
|
|
<span class="t-text">{{ item }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== PEOPLE ===================== -->
|
|
<section id="people" class="people">
|
|
<div class="wrap">
|
|
<div class="people-head">
|
|
<p v-reveal class="people-lead">이너탭은</p>
|
|
<h2 v-reveal="{ delay: 100 }">구성원들과 함께 성장합니다.</h2>
|
|
</div>
|
|
<div class="people-cols">
|
|
<div class="pcol pcol-a">
|
|
<article v-for="(card, i) in peopleColA" :key="i" v-reveal="{ delay: i * 120 }" class="pcard">
|
|
<div class="pshot" :class="card.shape">
|
|
<ImagePlaceholder :label="card.label" />
|
|
</div>
|
|
<h3>{{ card.title }}</h3>
|
|
<p>{{ card.desc }}</p>
|
|
</article>
|
|
</div>
|
|
<div class="pcol pcol-b">
|
|
<article v-for="(card, i) in peopleColB" :key="i" v-reveal="{ delay: 80 + i * 120 }" class="pcard">
|
|
<div class="pshot" :class="card.shape">
|
|
<ImagePlaceholder :label="card.label" />
|
|
</div>
|
|
<h3>{{ card.title }}</h3>
|
|
<p>{{ card.desc }}</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== CTA ===================== -->
|
|
<section id="cta" class="cta">
|
|
<div class="cta-bg" />
|
|
<div class="cta-overlay" />
|
|
<div class="wrap">
|
|
<div class="cta-inner">
|
|
<h2 v-reveal>바로 지금,<br >이너탭의 여정에 함께 하세요!</h2>
|
|
<p v-reveal="{ delay: 120 }">저희와 함께 더 큰 성장을 만들어 나갈 구성원을 기다리고 있습니다.</p>
|
|
<div v-reveal="{ delay: 240 }" class="cta-btns">
|
|
<NuxtLink to="/coffee-chat" class="btn btn-primary">커피챗 신청하기</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<AppFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* ===================== HERO ===================== */
|
|
.hero {
|
|
position: relative;
|
|
min-height: clamp(35rem, 86vh, 51.25rem); /* 560~820px */
|
|
display: flex;
|
|
align-items: flex-end;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-video {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
background: linear-gradient(160deg, #161d33 0%, #202a44 55%, #33415f 100%);
|
|
/* 로드 시 살짝 확대된 상태에서 천천히 안착 (Ken Burns) */
|
|
animation: hero-settle 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
@keyframes hero-settle {
|
|
from {
|
|
transform: scale(1.12);
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.hero-video .ph-label {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
font-size: 0.9375rem; /* 15px */
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
animation: hero-fade-in 1.2s ease 0.4s both;
|
|
}
|
|
|
|
@keyframes hero-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(0.5rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.scroll-hint {
|
|
position: absolute;
|
|
bottom: 1.75rem; /* 28px */
|
|
right: var(--pad);
|
|
z-index: 2;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 0.75rem; /* 12px */
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.625rem; /* 10px */
|
|
animation: hero-fade-in 1.2s ease 0.7s both;
|
|
}
|
|
|
|
.scroll-hint span {
|
|
writing-mode: vertical-rl;
|
|
}
|
|
|
|
.scroll-hint i {
|
|
position: relative;
|
|
width: 0.0625rem; /* 1px */
|
|
height: 2.875rem; /* 46px */
|
|
background: rgba(255, 255, 255, 0.25);
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 라인을 따라 아래로 흐르는 펄스 — 스크롤 유도 */
|
|
.scroll-hint i::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: -100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
animation: scroll-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
@keyframes scroll-pulse {
|
|
0% {
|
|
top: -100%;
|
|
}
|
|
60%,
|
|
100% {
|
|
top: 100%;
|
|
}
|
|
}
|
|
|
|
/* ===================== ABOUT ===================== */
|
|
.about {
|
|
padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
|
|
background: var(--white);
|
|
}
|
|
|
|
.about .inner {
|
|
max-width: 100%; /* 사이트 폭(.wrap)에 맞춰 브랜드 벤토와 동일하게 */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.m-eyebrow {
|
|
font-size: 1.4375rem; /* 23px */
|
|
font-weight: 700;
|
|
color: var(--label);
|
|
font-family: var(--font-display);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.m-lead {
|
|
font-size: clamp(1rem, 1.7vw, 1.25rem); /* 16~20px */
|
|
color: var(--ink-soft);
|
|
font-weight: 500;
|
|
margin-top: 1.875rem; /* 30px */
|
|
}
|
|
|
|
.m-title {
|
|
font-size: clamp(1.875rem, 4.4vw, 3.375rem); /* 30~54px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.025em;
|
|
line-height: 1.3;
|
|
margin-top: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.m-title mark {
|
|
background: var(--brand);
|
|
color: var(--white);
|
|
padding: 0.04em 0.14em;
|
|
border-radius: 0.125rem; /* 2px */
|
|
}
|
|
|
|
.about-intro {
|
|
font-size: clamp(1rem, 1.5vw, 1.1875rem); /* 16~19px */
|
|
color: var(--ink-soft);
|
|
margin-top: clamp(2.5rem, 5vw, 4rem); /* 40~64px */
|
|
}
|
|
|
|
.q-list {
|
|
list-style: none;
|
|
margin-top: 1.375rem; /* 22px */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.q-list li {
|
|
font-size: clamp(1.25rem, 2.4vw, 1.875rem); /* 20~30px */
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--ink);
|
|
line-height: 1.35;
|
|
padding-left: 1.625rem; /* 26px */
|
|
position: relative;
|
|
}
|
|
|
|
.q-list li::before {
|
|
content: 'Q.';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.08em;
|
|
color: var(--label);
|
|
font-weight: 800;
|
|
font-size: 0.78em;
|
|
}
|
|
|
|
.about-statement {
|
|
margin-top: clamp(3.5rem, 7vw, 6rem); /* 56~96px */
|
|
padding-top: clamp(2.5rem, 5vw, 3.75rem); /* 40~60px */
|
|
border-top: 0.0625rem solid var(--line);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem; /* 4px */
|
|
}
|
|
|
|
.about-statement p {
|
|
font-size: clamp(1rem, 1.6vw, 1.25rem); /* 16~20px */
|
|
color: var(--ink-soft);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.about-statement .closing {
|
|
font-size: clamp(1.375rem, 2.6vw, 2.125rem); /* 22~34px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
color: var(--ink);
|
|
line-height: 1.4;
|
|
margin-top: 0.875rem; /* 14px */
|
|
}
|
|
|
|
/* ===================== 브랜드 벤토 ===================== */
|
|
.brand-bento {
|
|
margin-top: clamp(3.5rem, 7vw, 6rem); /* 56~96px */
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-auto-rows: auto;
|
|
gap: clamp(0.75rem, 1.4vw, 1.125rem); /* 12~18px */
|
|
}
|
|
|
|
.btile {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 1.25rem; /* 20px */
|
|
aspect-ratio: 1;
|
|
background: #11151f;
|
|
cursor: pointer; /* 이미지 위에서 포인터 커서 */
|
|
}
|
|
|
|
.btile.feature {
|
|
/* 가로로 2칸 차지하는 와이드 타일 — 가로(landscape) 이미지가 잘리지 않도록 */
|
|
grid-column: span 2;
|
|
aspect-ratio: 2 / 1;
|
|
}
|
|
|
|
.btile img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.btile:hover img {
|
|
transform: scale(1.05); /* 호버 시 이미지 확대 */
|
|
}
|
|
|
|
.btile .tile-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background: linear-gradient(to top, rgba(8, 11, 18, 0.78) 0%, rgba(8, 11, 18, 0.25) 34%, transparent 60%);
|
|
}
|
|
|
|
.btile .tile-name {
|
|
position: absolute;
|
|
left: clamp(1.25rem, 2vw, 1.875rem); /* 20~30px */
|
|
bottom: clamp(1.25rem, 2vw, 1.75rem); /* 20~28px */
|
|
z-index: 3;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
font-size: clamp(1.125rem, 1.6vw, 1.5rem); /* 18~24px */
|
|
pointer-events: none;
|
|
text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.btile.feature .tile-name {
|
|
font-size: clamp(1.75rem, 2.8vw, 2.625rem); /* 28~42px */
|
|
}
|
|
|
|
.btile .tile-arrow {
|
|
position: absolute;
|
|
right: clamp(1rem, 1.6vw, 1.375rem); /* 16~22px */
|
|
bottom: clamp(1rem, 1.6vw, 1.375rem);
|
|
z-index: 3;
|
|
width: 2.875rem; /* 46px */
|
|
height: 2.875rem;
|
|
border-radius: 50%;
|
|
border: 0.09375rem solid rgba(255, 255, 255, 0.7); /* 1.5px */
|
|
color: #fff;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 1.0625rem; /* 17px */
|
|
pointer-events: none;
|
|
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
|
|
}
|
|
|
|
.btile:hover .tile-arrow {
|
|
background: #fff;
|
|
color: var(--brand);
|
|
transform: translateY(-0.125rem);
|
|
}
|
|
|
|
/* ===================== GROWTH ===================== */
|
|
.growth {
|
|
position: relative;
|
|
padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.growth-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
background:
|
|
radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.55), transparent 20%),
|
|
radial-gradient(circle at 70% 62%, rgba(255, 255, 255, 0.4), transparent 16%),
|
|
radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.45), transparent 13%),
|
|
radial-gradient(circle at 38% 82%, rgba(255, 255, 255, 0.4), transparent 16%),
|
|
radial-gradient(circle at 58% 38%, rgba(120, 128, 136, 0.45), transparent 32%),
|
|
linear-gradient(125deg, #aeb6bc 0%, #cbd1d6 46%, #a6aeb4 100%);
|
|
}
|
|
|
|
.bg-label {
|
|
position: absolute;
|
|
right: 1.125rem; /* 18px */
|
|
bottom: 0.875rem; /* 14px */
|
|
font-family: var(--font-display);
|
|
font-size: 0.75rem; /* 12px */
|
|
letter-spacing: 0.18em;
|
|
color: rgba(40, 50, 70, 0.32);
|
|
}
|
|
|
|
.growth .wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.growth-head {
|
|
text-align: center;
|
|
margin-bottom: clamp(2.5rem, 5vw, 4.375rem); /* 40~70px */
|
|
}
|
|
|
|
.growth-head .m-eyebrow {
|
|
margin-bottom: 1.125rem; /* 18px */
|
|
}
|
|
|
|
.growth-head h2 {
|
|
font-size: clamp(1.75rem, 4.2vw, 3.125rem); /* 28~50px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.025em;
|
|
line-height: 1.32;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.growth-layout {
|
|
display: grid;
|
|
grid-template-columns: 1.45fr 1fr;
|
|
gap: clamp(1rem, 1.8vw, 1.5rem); /* 16~24px */
|
|
align-items: stretch;
|
|
}
|
|
|
|
.stat-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: clamp(1rem, 1.8vw, 1.5rem);
|
|
}
|
|
|
|
.gcard {
|
|
position: relative;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
backdrop-filter: blur(0.375rem) saturate(1.1);
|
|
-webkit-backdrop-filter: blur(0.375rem) saturate(1.1);
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 1.5rem; /* 24px */
|
|
padding: clamp(1.625rem, 2.6vw, 2.375rem); /* 26~38px */
|
|
box-shadow: 0 1.25rem 3.125rem -2.125rem rgba(30, 40, 60, 0.5);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gcard-title,
|
|
.stat-big,
|
|
.stat-desc,
|
|
.timeline {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stat-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stat-card .stat-orb {
|
|
position: absolute;
|
|
z-index: 0;
|
|
width: clamp(9.375rem, 17vw, 12.5rem); /* 150~200px */
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
left: 1rem; /* 16px — 카드 안쪽으로 이동 */
|
|
top: 3.75rem; /* 60px */
|
|
/* 가장자리를 투명하게 → 하드한 동그라미 테두리 제거 */
|
|
background: radial-gradient(
|
|
circle at 50% 42%,
|
|
rgba(255, 255, 255, 0.95),
|
|
rgba(255, 255, 255, 0.55) 54%,
|
|
rgba(255, 255, 255, 0) 78%
|
|
);
|
|
}
|
|
|
|
.gcard-title {
|
|
font-size: 1.0625rem; /* 17px */
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.stat-card .stat-big {
|
|
font-size: clamp(2.5rem, 5vw, 3.75rem); /* 40~60px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.03em;
|
|
color: var(--ink);
|
|
line-height: 1;
|
|
margin: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 1.875rem);
|
|
}
|
|
|
|
.stat-card .stat-big small {
|
|
font-size: 0.36em;
|
|
font-weight: 700;
|
|
margin-left: 0.1875rem; /* 3px */
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.plus {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 1.125rem; /* 18px */
|
|
height: 1.125rem;
|
|
border-radius: 50%;
|
|
background: var(--brand);
|
|
color: #fff;
|
|
font-size: 0.6875rem; /* 11px */
|
|
font-weight: 700;
|
|
vertical-align: top;
|
|
margin-left: 0.25rem; /* 4px */
|
|
}
|
|
|
|
.stat-card .stat-desc {
|
|
font-size: 0.875rem; /* 14px */
|
|
color: var(--ink-soft);
|
|
line-height: 1.65;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.history-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.timeline {
|
|
list-style: none;
|
|
margin-top: clamp(1.25rem, 2.5vw, 1.875rem); /* 20~30px */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.timeline li {
|
|
display: flex;
|
|
gap: 1.125rem; /* 18px */
|
|
align-items: baseline;
|
|
padding: clamp(0.9375rem, 1.6vw, 1.1875rem) 0; /* 15~19px */
|
|
border-top: 0.0625rem solid rgba(40, 50, 70, 0.1);
|
|
}
|
|
|
|
.timeline li:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.timeline .t-text {
|
|
font-size: 0.9375rem; /* 15px */
|
|
color: var(--ink);
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ===================== PEOPLE ===================== */
|
|
.people {
|
|
padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
|
|
}
|
|
|
|
.people-lead {
|
|
font-size: clamp(1.125rem, 1.9vw, 1.5rem); /* 18~24px */
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.people-head h2 {
|
|
font-size: clamp(1.875rem, 4.4vw, 3.5rem); /* 30~56px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.025em;
|
|
line-height: 1.18;
|
|
color: var(--ink);
|
|
margin-top: 0.625rem; /* 10px */
|
|
}
|
|
|
|
.people-cols {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: clamp(1.5rem, 2.6vw, 2.75rem); /* 24~44px */
|
|
margin-top: clamp(2.25rem, 4.5vw, 3.75rem); /* 36~60px */
|
|
align-items: start;
|
|
}
|
|
|
|
.pcol {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(2.5rem, 5vw, 4.5rem); /* 40~72px */
|
|
}
|
|
|
|
.pcol-b {
|
|
margin-top: clamp(3rem, 7vw, 6.5rem); /* 48~104px */
|
|
}
|
|
|
|
.pcard {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pcard .pshot {
|
|
position: relative;
|
|
width: 100%;
|
|
border-radius: 1rem; /* 16px */
|
|
overflow: hidden;
|
|
background: #edeff2;
|
|
transition: box-shadow 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.pcard .pshot.tall {
|
|
aspect-ratio: 4 / 5;
|
|
}
|
|
|
|
.pcard .pshot.wide {
|
|
aspect-ratio: 4 / 3;
|
|
}
|
|
|
|
.pcard:hover .pshot {
|
|
box-shadow: 0 1.625rem 3.5rem -2rem rgba(30, 40, 60, 0.5);
|
|
transform: translateY(-0.25rem); /* -4px */
|
|
}
|
|
|
|
.pcard h3 {
|
|
font-size: clamp(1.125rem, 1.7vw, 1.375rem); /* 18~22px */
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: var(--ink);
|
|
margin-top: 1.25rem; /* 20px */
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.pcard p {
|
|
font-size: clamp(0.8125rem, 1.2vw, 0.9375rem); /* 13~15px */
|
|
color: var(--ink-soft);
|
|
margin-top: 0.5rem; /* 8px */
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* ===================== CTA ===================== */
|
|
.cta {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: clamp(4.5rem, 10vw, 8rem) 0; /* 72~128px — 높이 축소 */
|
|
}
|
|
|
|
.cta-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
/* 배너 이미지 배경 */
|
|
background: url('/images/img-banner.png') center / cover no-repeat;
|
|
}
|
|
|
|
.cta-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
/* 더 어둡게 */
|
|
background: linear-gradient(90deg, rgba(16, 13, 9, 0.82) 0%, rgba(16, 13, 9, 0.7) 60%, rgba(16, 13, 9, 0.6) 100%);
|
|
}
|
|
|
|
.cta .wrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.cta-inner {
|
|
color: var(--white);
|
|
max-width: 45rem; /* 720px */
|
|
}
|
|
|
|
.cta-inner h2 {
|
|
font-size: clamp(1.75rem, 4.2vw, 3.25rem); /* 28~52px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.cta-inner p {
|
|
color: rgba(255, 255, 255, 0.82);
|
|
font-size: clamp(0.9375rem, 1.5vw, 1.125rem); /* 15~18px */
|
|
margin-top: 1.125rem; /* 18px */
|
|
}
|
|
|
|
.cta-btns {
|
|
display: flex;
|
|
gap: 0.875rem; /* 14px */
|
|
margin-top: clamp(2rem, 4vw, 3rem); /* 32~48px */
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ===================== 반응형 ===================== */
|
|
@media (max-width: 56.25rem) {
|
|
/* 900px */
|
|
.growth-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.brand-bento {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.btile.feature {
|
|
grid-row: auto;
|
|
grid-column: span 2;
|
|
aspect-ratio: 16 / 10;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 32.5rem) {
|
|
/* 520px */
|
|
.brand-bento {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.btile.feature {
|
|
grid-column: auto;
|
|
aspect-ratio: 1; /* 1열에서는 다른 타일과 동일한 정사각 비율 */
|
|
}
|
|
|
|
/* Growth 스탯: 가장 작은 화면에서는 2x2 → 1열 나열 */
|
|
.stat-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.people-cols {
|
|
grid-template-columns: 1fr;
|
|
gap: clamp(2.5rem, 8vw, 4rem);
|
|
}
|
|
|
|
.pcol {
|
|
gap: clamp(2.5rem, 8vw, 4rem);
|
|
}
|
|
|
|
.pcol-b {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.pcard .pshot.tall,
|
|
.pcard .pshot.wide {
|
|
aspect-ratio: 4 / 3;
|
|
}
|
|
}
|
|
|
|
/* 모션 최소화 선호 시 히어로/호버 애니메이션 비활성화 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-video,
|
|
.hero-video .ph-label,
|
|
.scroll-hint,
|
|
.scroll-hint i::after {
|
|
animation: none !important;
|
|
}
|
|
|
|
.btile img {
|
|
transition: none;
|
|
}
|
|
|
|
.btile:hover img {
|
|
transform: none;
|
|
}
|
|
}
|
|
</style>
|