1191 lines
36 KiB
Vue
1191 lines
36 KiB
Vue
<script setup lang="ts">
|
|
// 조직문화 — 사원증(목걸이) 히어로 + 목표 매출 성장 그래프(스크롤 시 라인 등장 애니메이션)
|
|
import imgNecklace from '~/assets/images/img-necklace.png'
|
|
|
|
const config = useRuntimeConfig()
|
|
const siteUrl = String(config.public.siteUrl || '').replace(/\/$/, '')
|
|
|
|
useSeo({
|
|
title: '조직문화 — 투명한 보상·실력 중심 성장·아낌없는 복지 | 이너탭(innertab)',
|
|
description:
|
|
'이너탭(innertab)의 조직문화를 소개합니다. 투명하고 높은 수준의 보상(성과금 최대 연봉 75%·영업이익 30% 추가 분배), 연차가 아닌 실력으로 승진하는 Level 제도, 유연근무·재택근무·교육비 100% 지원·자유로운 휴가·식대 지원 등 일하기 좋은 환경과 아낌없는 복지로 함께 성장할 동료를 찾습니다.',
|
|
path: '/culture',
|
|
keywords:
|
|
'이너탭, innertab, 조직문화, 기업문화, 스타트업 채용, 복지, 성과급, 보상, 커리어 성장, 유연근무, 재택근무, 교육비 지원, 자유로운 휴가, 수평적 문화, 채용',
|
|
})
|
|
|
|
// 구조화 데이터(JSON-LD) — 조직문화(AboutPage) + 빵부스러기(BreadcrumbList)
|
|
useHead({
|
|
script: [
|
|
{
|
|
type: 'application/ld+json',
|
|
innerHTML: JSON.stringify({
|
|
'@context': 'https://schema.org',
|
|
'@type': 'AboutPage',
|
|
name: '조직문화 | 이너탭(innertab)',
|
|
description:
|
|
'이너탭(innertab)의 보상·커리어 성장·복지 등 조직문화 소개',
|
|
url: `${siteUrl}/culture`,
|
|
isPartOf: { '@type': 'WebSite', name: '이너탭 innertab', url: siteUrl },
|
|
about: { '@type': 'Organization', name: '이너탭', alternateName: 'innertab', url: siteUrl },
|
|
breadcrumb: {
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement: [
|
|
{ '@type': 'ListItem', position: 1, name: '홈', item: `${siteUrl}/` },
|
|
{ '@type': 'ListItem', position: 2, name: '조직문화', item: `${siteUrl}/culture` },
|
|
],
|
|
},
|
|
}),
|
|
},
|
|
],
|
|
})
|
|
|
|
// 복지 — 상단 원형 배지 3개
|
|
interface WelfareBadge {
|
|
title: string
|
|
sub: string
|
|
}
|
|
const welfareBadges: WelfareBadge[] = [
|
|
{ title: '매주 금요일', sub: '1시간 조기 퇴근' },
|
|
{ title: '생일자 5만원', sub: '상당 선물' },
|
|
{ title: '개별 성과급', sub: '분기 1회' },
|
|
]
|
|
|
|
// 복지 항목 — 이모지 + 2줄 설명
|
|
interface Perk {
|
|
icon: string
|
|
l1: string
|
|
l2: string
|
|
desk?: boolean // 책상 — 유니코드 desk 이모지가 없어 인라인 SVG로 표시
|
|
}
|
|
const envPerks: Perk[] = [
|
|
{ icon: '⏰', l1: '유연근무제', l2: '(9시~10시)' },
|
|
{ icon: '💳', l1: '가끔가다 있는 점심 회식', l2: '(feat. 오마카세 & 호텔뷔페)' },
|
|
{ icon: '👕', l1: '자유로운 복장', l2: '' },
|
|
{ icon: '🙌', l1: '수평적 문화', l2: '(진짜로)' },
|
|
{ icon: '', desk: true, l1: '넓은 책상간격', l2: '(의외로 중요)' },
|
|
{ icon: '🖥️', l1: '최신형 업무기기', l2: '(Mac or window 택1)' },
|
|
]
|
|
const supportPerks: Perk[] = [
|
|
{ icon: '📚', l1: '교육비 100% 지원', l2: '(강의, 전자책, 도서등)' },
|
|
{ icon: '🏠', l1: '재택근무', l2: '(협의 가능)' },
|
|
{ icon: '✈️', l1: '자유로운 휴가', l2: '(연차/월차/반차/반반차)' },
|
|
{ icon: '🍽️', l1: '혹시 모를 야근 시', l2: '식대 지원' },
|
|
]
|
|
|
|
// 그래프가 화면에 들어오면 라인/포인트 애니메이션 트리거
|
|
const chartEl = ref<HTMLElement | null>(null)
|
|
const lineEl = ref<SVGPathElement | null>(null)
|
|
const animated = ref(false)
|
|
|
|
onMounted(() => {
|
|
if (!chartEl.value) return
|
|
// 라인 실제 길이를 측정해 stroke-dash 기준값으로 사용(정확한 그리기 애니메이션)
|
|
if (lineEl.value) {
|
|
const len = lineEl.value.getTotalLength()
|
|
lineEl.value.style.setProperty('--len', String(len))
|
|
}
|
|
// 모션 최소화 선호 시 애니메이션 없이 최종 상태로 즉시 표시
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
animated.value = true
|
|
return
|
|
}
|
|
const io = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const entry of entries) {
|
|
if (entry.isIntersecting) {
|
|
// 시작 시점을 살짝 늦춤
|
|
window.setTimeout(() => {
|
|
animated.value = true
|
|
}, 300)
|
|
io.disconnect()
|
|
break
|
|
}
|
|
}
|
|
},
|
|
{ threshold: 0.3 },
|
|
)
|
|
io.observe(chartEl.value)
|
|
onUnmounted(() => io.disconnect())
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<AppHeader variant="home" />
|
|
|
|
<!-- ===================== CULTURE HERO ===================== -->
|
|
<section class="culture-hero">
|
|
<div class="hero-inner">
|
|
<!-- 사원증 목걸이 -->
|
|
<img
|
|
v-reveal:fade
|
|
class="badge"
|
|
:src="imgNecklace"
|
|
alt="이너탭(ITAB) 사원증"
|
|
>
|
|
<p v-reveal="{ delay: 120 }" class="brand-eyebrow">INNERTAB</p>
|
|
<h1 v-reveal="{ delay: 200 }" class="culture-title">Culture</h1>
|
|
<p v-reveal="{ delay: 300 }" class="culture-sub">
|
|
이너탭은 새로운 역사를 써내려갈<br >우리만의 문화를 만들고 있습니다.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== 목표 매출 성장 그래프 ===================== -->
|
|
<section class="growth-graph">
|
|
<div class="wrap">
|
|
<p v-reveal class="g-eyebrow">2026년 목표 매출</p>
|
|
<h2 v-reveal="{ delay: 100 }" class="g-title">150억 기업으로</h2>
|
|
<hr v-reveal="{ delay: 160 }" class="g-divider" >
|
|
<p v-reveal="{ delay: 220 }" class="g-sub">
|
|
<strong>유능한 팀원</strong>과 <strong>압도적인 커리어</strong>를 지향합니다
|
|
</p>
|
|
|
|
<div ref="chartEl" class="chart" :class="{ 'is-animated': animated }">
|
|
<svg
|
|
class="chart-svg"
|
|
viewBox="0 0 1000 460"
|
|
role="img"
|
|
aria-label="2023년 창립부터 2028년 목표 1000억까지의 매출 성장 그래프"
|
|
>
|
|
<defs>
|
|
<!-- 끝점 글로우 -->
|
|
<filter id="dotGlow" x="-150%" y="-150%" width="400%" height="400%">
|
|
<feGaussianBlur stdDeviation="5" />
|
|
</filter>
|
|
<!-- 라인 아래 채움 그라데이션 (위는 진하고 아래로 투명) -->
|
|
<linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#6ea8e6" stop-opacity="0.3" />
|
|
<stop offset="1" stop-color="#6ea8e6" stop-opacity="0" />
|
|
</linearGradient>
|
|
<!-- 좌→우로 펼쳐지는 reveal 클립 (라인 그리기와 동기화) -->
|
|
<clipPath id="areaReveal">
|
|
<rect class="reveal-rect" x="0" y="0" width="1000" height="460" />
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<!-- 라인 아래 채움 영역 (좌→우로 펼쳐짐) -->
|
|
<path
|
|
class="area"
|
|
clip-path="url(#areaReveal)"
|
|
d="M60,388 L280,358 L500,305 L730,230 L940,80 L940,412 L60,412 Z"
|
|
/>
|
|
|
|
<!-- 각 포인트의 세로 점선 (baseline까지) -->
|
|
<path class="dropline" style="transition-delay: 0s" d="M60,388 V412" />
|
|
<path class="dropline" style="transition-delay: 0.4s" d="M280,358 V412" />
|
|
<path class="dropline" style="transition-delay: 0.8s" d="M500,305 V412" />
|
|
<path class="dropline" style="transition-delay: 1.2s" d="M730,230 V412" />
|
|
<path class="dropline" style="transition-delay: 1.6s" d="M940,80 V412" />
|
|
|
|
<!-- 메인 라인 (좌하단→우상단 그려짐) -->
|
|
<path
|
|
ref="lineEl"
|
|
class="line"
|
|
d="M60,388 L280,358 L500,305 L730,230 L940,80"
|
|
/>
|
|
|
|
<!-- 데이터 포인트 -->
|
|
<circle class="dot" cx="60" cy="388" r="4.5" style="transition-delay: 0.1s" />
|
|
<circle class="dot" cx="280" cy="358" r="4.5" style="transition-delay: 0.5s" />
|
|
<circle class="dot" cx="500" cy="305" r="4.5" style="transition-delay: 0.9s" />
|
|
<circle class="dot" cx="730" cy="230" r="4.5" style="transition-delay: 1.3s" />
|
|
|
|
<!-- 끝점 (2028) — 빛나는 강조 -->
|
|
<circle class="dot-glow" cx="940" cy="80" r="15" filter="url(#dotGlow)" />
|
|
<circle class="dot-ring" cx="940" cy="80" r="9" />
|
|
<circle class="dot-end" cx="940" cy="80" r="5" />
|
|
|
|
<!-- 라벨 (연도 + 값) -->
|
|
<text class="lbl" x="60" y="330" text-anchor="middle" style="transition-delay: 0.25s">
|
|
<tspan class="lbl-year" x="60">2023년</tspan>
|
|
<tspan class="lbl-val" x="60" dy="38">창립</tspan>
|
|
</text>
|
|
<text class="lbl" x="280" y="300" text-anchor="middle" style="transition-delay: 0.65s">
|
|
<tspan class="lbl-year" x="280">2024년</tspan>
|
|
<tspan class="lbl-val" x="280" dy="38">55억</tspan>
|
|
</text>
|
|
<text class="lbl" x="500" y="231" text-anchor="middle" style="transition-delay: 1.05s">
|
|
<tspan class="lbl-year" x="500">2026년 목표</tspan>
|
|
<tspan class="lbl-val" x="500" dy="38">150억(e)</tspan>
|
|
</text>
|
|
<text class="lbl" x="730" y="138" text-anchor="middle" style="transition-delay: 1.45s">
|
|
<tspan class="lbl-year" x="730">2027년 목표</tspan>
|
|
<tspan class="lbl-val" x="730" dy="38">300억</tspan>
|
|
</text>
|
|
<text class="lbl" x="940" y="22" text-anchor="end" style="transition-delay: 1.85s">
|
|
<tspan class="lbl-year" x="940">2028년 목표</tspan>
|
|
<tspan class="lbl-val lbl-val--hl" x="940" dy="38">1000억+</tspan>
|
|
</text>
|
|
|
|
<!-- 모바일 전용 — 년도 라벨을 그래프 하단(축)에 배치 -->
|
|
<g class="lbl-years-bottom">
|
|
<text class="lbl-year-b" x="60" y="442" text-anchor="middle">2023년</text>
|
|
<text class="lbl-year-b" x="280" y="442" text-anchor="middle">2024년</text>
|
|
<text class="lbl-year-b" x="500" y="442" text-anchor="middle">2026년 목표</text>
|
|
<text class="lbl-year-b" x="730" y="442" text-anchor="middle">2027년 목표</text>
|
|
<text class="lbl-year-b" x="940" y="442" text-anchor="end">2028년 목표</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== 3가지 약속 인트로 ===================== -->
|
|
<section class="promise-intro">
|
|
<span v-reveal class="read-badge">Read This!</span>
|
|
<h2 v-reveal="{ delay: 100 }" class="promise-q">
|
|
이너탭은<br ><strong>3가지</strong>를 약속합니다.
|
|
</h2>
|
|
<svg class="promise-chevron" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M5 9l7 7 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</section>
|
|
|
|
<!-- ===================== 첫째 — 보상 약속 / 둘째 — 커리어 성장 ===================== -->
|
|
<section class="promise-panel">
|
|
<div class="wrap">
|
|
<div class="panel-inner">
|
|
<!-- 첫째 — 요소별로 화면 진입 시 각각 등장 -->
|
|
<h3 v-reveal class="promise-title">
|
|
첫째,<br ><span class="t-soft">투명하고 높은 수준의</span><br >보상을 약속합니다.
|
|
</h3>
|
|
<hr class="panel-divider" >
|
|
<p v-reveal class="panel-eyebrow">About INNERTAB</p>
|
|
<h4 v-reveal="{ delay: 80 }" class="panel-head">말 뿐인 보상은 의미 없습니다.</h4>
|
|
<p v-reveal="{ delay: 160 }" class="panel-sub">
|
|
좋은 결과를 냈다면, 그에 맞는 최고의 보상이<br ><strong>“즉각”</strong> 따라야 한다고 생각합니다.
|
|
</p>
|
|
<ul class="rule-list">
|
|
<li v-reveal class="rule-card">
|
|
<span class="rule-no">RULE 1</span>
|
|
<p class="rule-text">연차나 직급이 아닌, 실제로 해결한 문제가 회사의 성장으로 이어졌다면 보상이 주어집니다.</p>
|
|
</li>
|
|
<li v-reveal="{ delay: 100 }" class="rule-card">
|
|
<span class="rule-no">RULE 2</span>
|
|
<p class="rule-text">성과금은 목표 달성 시 <mark>연봉의 75%까지 지급</mark>됩니다. (LEVEL2 기준, 분기별 지급)</p>
|
|
</li>
|
|
<li v-reveal="{ delay: 200 }" class="rule-card">
|
|
<span class="rule-no">RULE 3</span>
|
|
<p class="rule-text">목표 초과 달성 시, <mark>영업이익의 30% 추가 분배</mark>합니다. (상한 없음)</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== 둘째 — 커리어 성장(회색) ===================== -->
|
|
<section class="promise-second">
|
|
<div class="wrap">
|
|
<div class="panel-inner">
|
|
<h3 v-reveal class="promise-title">
|
|
둘째,<br >커리어 성장을<br >약속해요.
|
|
</h3>
|
|
<hr class="panel-divider" >
|
|
<div v-reveal="{ delay: 80 }" class="promise-body">
|
|
<p>ITAB은 Level 제도를 운영중이며,<br ><strong>연차가 아닌 실력으로 승진합니다.</strong></p>
|
|
<p>업계 3~4년차 수준의 역량을 1년 안에 얻어갈 수 있도록 <br class="br-pc" >밀도있고 효율적으로 업무를 진행하게 됩니다.</p>
|
|
<p class="promise-emph">물경력? 그런건 우리 사전에 없습니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== 셋째 — 효율적인 업무(블루) ===================== -->
|
|
<section class="promise-third">
|
|
<div class="wrap">
|
|
<div class="panel-inner">
|
|
<h3 v-reveal class="third-title">
|
|
<span class="t-soft">셋째,</span><br >효율적인 업무를 약속해요
|
|
</h3>
|
|
<hr class="third-divider" >
|
|
<div v-reveal="{ delay: 100 }" class="third-body">
|
|
<p>IR? 없어도 됩니다. 투자없이 성장했거든요.</p>
|
|
<p>회의도 주 1회만 합니다.<br >보고자료 만드는데 시간쓰면 모두가 손해거든요.<br ><strong>ITAB은 개인의 역량을 믿습니다.</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== 복지(블루 + 흰 카드) ===================== -->
|
|
<section class="welfare">
|
|
<div class="wrap">
|
|
<h2 v-reveal class="welfare-q">이너탭은 무슨 복지가 있나요?</h2>
|
|
|
|
<!-- 원형 배지 3개 -->
|
|
<ul class="welfare-badges">
|
|
<li
|
|
v-for="(b, i) in welfareBadges"
|
|
:key="b.title"
|
|
v-reveal:scale="{ delay: i * 150 }"
|
|
class="wbadge"
|
|
>
|
|
<strong>{{ b.title }}</strong>
|
|
<span>{{ b.sub }}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- 일하기 좋은 쾌적한 환경 -->
|
|
<div v-reveal class="welfare-card">
|
|
<h3 class="welfare-card-title">#일하기 좋은 쾌적한 환경</h3>
|
|
<ul class="welfare-grid">
|
|
<li v-for="(p, i) in envPerks" :key="p.l1" v-reveal="{ delay: i * 70 }">
|
|
<span class="wi-emoji" aria-hidden="true">
|
|
<svg v-if="p.desk" class="wi-desk" viewBox="0 0 64 64">
|
|
<rect x="6" y="22" width="52" height="8" rx="2" fill="#E08B3E" />
|
|
<rect x="11" y="30" width="5" height="24" rx="1" fill="#C2752F" />
|
|
<rect x="48" y="30" width="5" height="24" rx="1" fill="#C2752F" />
|
|
<rect x="36" y="30" width="17" height="16" rx="2" fill="#D67F34" />
|
|
<rect x="40" y="37" width="9" height="2.4" rx="1.2" fill="#9C5C1C" />
|
|
</svg>
|
|
<template v-else>{{ p.icon }}</template>
|
|
</span>
|
|
<p class="wi-title">{{ p.l1 }}</p>
|
|
<p v-if="p.l2" class="wi-sub">{{ p.l2 }}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 아낌없는 지원 -->
|
|
<div v-reveal class="welfare-card">
|
|
<h3 class="welfare-card-title">#아낌없는 지원</h3>
|
|
<ul class="welfare-grid welfare-grid--2">
|
|
<li v-for="(p, i) in supportPerks" :key="p.l1" v-reveal="{ delay: i * 70 }">
|
|
<span class="wi-emoji" aria-hidden="true">{{ p.icon }}</span>
|
|
<p class="wi-title">{{ p.l1 }}</p>
|
|
<p v-if="p.l2" class="wi-sub">{{ p.l2 }}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== 마무리 CTA ===================== -->
|
|
<section class="culture-cta">
|
|
<div class="cta-bg" />
|
|
<div class="cta-overlay" />
|
|
<div class="wrap">
|
|
<div class="cta-inner">
|
|
<h2 v-reveal>이제 시작입니다.</h2>
|
|
<p v-reveal="{ delay: 120 }">
|
|
저희의 가능성을 보고 합류한 많은 인재들과 함께,<br >더욱 빠르고 가파르게 성장할 예정입니다.
|
|
</p>
|
|
<p v-reveal="{ delay: 200 }">
|
|
유능한 인재들과 함께 일잘러로 거듭날 수 있습니다.<br >내가 만든 제품이 주변 사람들의 일상이 될 수 있습니다.
|
|
</p>
|
|
<p v-reveal="{ delay: 280 }" class="cta-last">이 설레는 여정에 어서 합류하세요.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<AppFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* culture 페이지의 모든 등장 애니메이션 시작 시점을 살짝 늦춤(+300ms) */
|
|
.reveal {
|
|
transition-delay: calc(var(--reveal-delay, 0ms) + 300ms);
|
|
}
|
|
|
|
.culture-hero {
|
|
position: relative;
|
|
/* 헤더(4.5rem)를 제외한 화면 높이를 가득 채움 */
|
|
min-height: calc(100dvh - 4.5rem);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
padding: clamp(2.5rem, 6vw, 5rem) var(--pad);
|
|
/* 어두운 네이비 베이스 */
|
|
background: linear-gradient(160deg, #05122e 0%, #0a2350 56%, #0e2f63 100%);
|
|
}
|
|
|
|
/* 카드 뒤 타원형 블루 글로우 — 좌하단→우상단 대각선으로 기울임(-45deg 회전) */
|
|
.culture-hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -30%; /* 회전 시 모서리 빈틈 방지 위해 크게 */
|
|
z-index: 0;
|
|
background: radial-gradient(
|
|
34% 31% at 50% 50%,
|
|
rgba(178, 216, 255, 0.62) 0%,
|
|
rgba(95, 150, 218, 0.26) 40%,
|
|
transparent 68%
|
|
);
|
|
transform: rotate(-45deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 사원증 목걸이 — 상단 중앙 / 목걸이 끈(상단) 기준으로 좌우로 아주 살짝 흔들림 */
|
|
.badge {
|
|
display: block;
|
|
width: auto;
|
|
height: clamp(26rem, 72vh, 44rem); /* 416~704px */
|
|
filter: drop-shadow(0 1.75rem 3rem rgba(0, 0, 0, 0.5));
|
|
transform-origin: top center; /* 끈 위쪽을 축으로 진자처럼 흔들림 */
|
|
animation: badge-sway 4.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes badge-sway {
|
|
0%,
|
|
100% {
|
|
transform: rotate(-1.5deg);
|
|
}
|
|
50% {
|
|
transform: rotate(1.5deg);
|
|
}
|
|
}
|
|
|
|
/* 모션 최소화 선호 시 흔들림 비활성화 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.badge {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.brand-eyebrow {
|
|
margin-top: clamp(1.75rem, 4vw, 2.75rem); /* 28~44px */
|
|
font-size: clamp(0.8125rem, 1.2vw, 0.9375rem); /* 13~15px */
|
|
font-weight: 600;
|
|
letter-spacing: 0.32em;
|
|
text-indent: 0.32em; /* 자간으로 인한 좌측 쏠림 보정 */
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.culture-title {
|
|
margin-top: clamp(0.5rem, 1.2vw, 0.875rem); /* 8~14px */
|
|
font-size: clamp(2.75rem, 8vw, 5rem); /* 44~80px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.05;
|
|
color: #fff;
|
|
}
|
|
|
|
.culture-sub {
|
|
margin-top: clamp(1.25rem, 2.6vw, 2rem); /* 20~32px */
|
|
font-size: clamp(0.9375rem, 1.6vw, 1.1875rem); /* 15~19px */
|
|
font-weight: 400;
|
|
line-height: 1.7;
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
/* ===================== 목표 매출 성장 그래프 ===================== */
|
|
.growth-graph {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(4rem, 10vw, 8rem);
|
|
/* 히어로(하단 #0e2f63)에서 이어지는 다크 네이비 */
|
|
background: linear-gradient(180deg, #0b264f 0%, #07182f 52%, #050f1e 100%);
|
|
}
|
|
|
|
/* culture 페이지 콘텐츠 폭 — 메인(1440)보다 좁게 1000으로 */
|
|
.growth-graph .wrap,
|
|
.promise-panel .wrap,
|
|
.promise-second .wrap,
|
|
.promise-third .wrap,
|
|
.welfare .wrap,
|
|
.culture-cta .wrap {
|
|
max-width: 62.5rem; /* 1000px */
|
|
}
|
|
|
|
.g-eyebrow {
|
|
font-size: clamp(1rem, 1.8vw, 1.375rem); /* 16~22px */
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
/* 밝은 하늘색 → 진한 블루 그라데이션 텍스트 */
|
|
background: linear-gradient(100deg, #a6d6ff 0%, #6aa6ec 55%, #4f86d8 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
-webkit-text-fill-color: transparent;
|
|
width: fit-content; /* 그라데이션이 텍스트 폭에만 적용되도록 */
|
|
}
|
|
|
|
.g-title {
|
|
margin-top: 0.625rem; /* 10px */
|
|
font-size: clamp(2.125rem, 5.5vw, 3.5rem); /* 34~56px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.03em;
|
|
color: #fff;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.g-divider {
|
|
width: clamp(16rem, 38vw, 26rem);
|
|
height: 0.0625rem; /* 1px */
|
|
border: 0;
|
|
background: rgba(255, 255, 255, 0.22);
|
|
margin: clamp(1.5rem, 3vw, 2.25rem) 0;
|
|
}
|
|
|
|
.g-sub {
|
|
font-size: clamp(1.0625rem, 2vw, 1.4375rem); /* 17~23px */
|
|
color: rgba(255, 255, 255, 0.62);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.g-sub strong {
|
|
font-weight: 800;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ── 차트 ── */
|
|
.chart {
|
|
position: relative;
|
|
width: 100%; /* 콘텐츠(wrap) 폭을 모두 차지 */
|
|
margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
|
|
}
|
|
|
|
.chart-svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: visible; /* 끝점 글로우/라벨이 잘리지 않도록 */
|
|
}
|
|
|
|
/* 라인 아래 채움 영역 — reveal 클립으로 좌→우 펼쳐짐(라인 그리기와 동기화) */
|
|
.chart-svg .area {
|
|
fill: url(#areaFill);
|
|
}
|
|
|
|
.chart-svg .reveal-rect {
|
|
transform: scaleX(0);
|
|
transform-box: fill-box;
|
|
transform-origin: left center;
|
|
transition: transform 1.9s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.chart.is-animated .reveal-rect {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
/* 메인 라인 — 좌하단→우상단으로 그려지는 등장 */
|
|
.chart-svg .line {
|
|
fill: none;
|
|
stroke: #ffffff;
|
|
stroke-width: 2.5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
/* --len: onMounted에서 측정한 실제 라인 길이(미측정 시 fallback) */
|
|
stroke-dasharray: var(--len, 620);
|
|
stroke-dashoffset: var(--len, 620);
|
|
transition: stroke-dashoffset 1.9s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.chart.is-animated .line {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
/* 세로 점선 */
|
|
.chart-svg .dropline {
|
|
fill: none;
|
|
stroke: rgba(255, 255, 255, 0.2);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 4;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.chart.is-animated .dropline {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 데이터 포인트 */
|
|
.chart-svg .dot {
|
|
fill: #ffffff;
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.chart.is-animated .dot {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* 끝점(2028) — 빛나는 강조 */
|
|
.chart-svg .dot-glow {
|
|
fill: rgba(150, 196, 255, 0.85);
|
|
}
|
|
|
|
.chart-svg .dot-ring {
|
|
fill: none;
|
|
stroke: rgba(255, 255, 255, 0.6);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.chart-svg .dot-end {
|
|
fill: #ffffff;
|
|
}
|
|
|
|
.chart-svg .dot-glow,
|
|
.chart-svg .dot-ring,
|
|
.chart-svg .dot-end {
|
|
opacity: 0;
|
|
transform: scale(0.4);
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
transition: opacity 0.6s ease 1.85s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.85s;
|
|
}
|
|
|
|
.chart.is-animated .dot-glow,
|
|
.chart.is-animated .dot-ring,
|
|
.chart.is-animated .dot-end {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* 라벨 */
|
|
.chart-svg .lbl {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
}
|
|
|
|
.chart.is-animated .lbl {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.chart-svg .lbl-year {
|
|
fill: rgba(255, 255, 255, 0.6);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 하단 년도 축 — 데스크톱에서는 숨김(라벨 내 .lbl-year 사용), 모바일에서만 표시 */
|
|
.chart-svg .lbl-years-bottom {
|
|
display: none;
|
|
}
|
|
|
|
.chart-svg .lbl-year-b {
|
|
fill: rgba(255, 255, 255, 0.75);
|
|
font-size: 24px; /* 상단 인라인 년도(13px)보다 키움 */
|
|
font-weight: 600;
|
|
}
|
|
|
|
.chart-svg .lbl-val {
|
|
fill: #ffffff;
|
|
font-size: 38px; /* 19px 대비 2배 */
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.chart-svg .lbl-val--hl {
|
|
font-size: 42px; /* 21px 대비 2배 */
|
|
}
|
|
|
|
/* 모바일 — SVG가 작게 축소되므로 매출 값 텍스트를 키워 가독성 확보
|
|
(연도↔값 간격 dy=38 안에서 윗줄 연도와 겹치지 않는 최대치 수준) */
|
|
@media (max-width: 32.5rem) {
|
|
.chart-svg .lbl-val {
|
|
font-size: 50px;
|
|
}
|
|
|
|
.chart-svg .lbl-val--hl {
|
|
font-size: 54px;
|
|
}
|
|
|
|
/* 모바일: 라벨 내 상단 년도는 숨기고, 그래프 하단 년도 축을 표시 */
|
|
.chart-svg .lbl-year {
|
|
display: none;
|
|
}
|
|
|
|
.chart-svg .lbl-years-bottom {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* 모션 최소화 선호 시 모든 차트 전환 제거 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.chart-svg * {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/* ===================== 3가지 약속 인트로 ===================== */
|
|
.promise-intro {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: clamp(3.5rem, 9vw, 6.5rem) var(--pad) clamp(4.5rem, 10vw, 7rem);
|
|
/* 밝은 블루 글로우 + 네이비 (시안 색상 기반) */
|
|
background:
|
|
radial-gradient(70% 60% at 50% 18%, rgba(15, 110, 215, 0.5) 0%, transparent 60%),
|
|
linear-gradient(180deg, #0a3877 0%, #062a5a 100%);
|
|
}
|
|
|
|
.read-badge {
|
|
display: inline-block;
|
|
padding: 0.4375rem 1.125rem; /* 7~18px */
|
|
border-radius: 6.25rem;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
color: #0b2f63;
|
|
font-size: 0.8125rem; /* 13px */
|
|
font-weight: 800;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.promise-q {
|
|
margin-top: clamp(1.25rem, 2.6vw, 1.875rem);
|
|
font-size: clamp(1.75rem, 4.4vw, 2.875rem); /* 28~46px */
|
|
font-weight: 600;
|
|
line-height: 1.34;
|
|
color: #fff;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.promise-q strong {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.promise-chevron {
|
|
width: clamp(1.75rem, 3vw, 2.25rem);
|
|
height: clamp(1.75rem, 3vw, 2.25rem);
|
|
margin: clamp(1.5rem, 3.5vw, 2.5rem) auto 0;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
animation: chevron-bob 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes chevron-bob {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(0.375rem);
|
|
}
|
|
}
|
|
|
|
/* ===================== 첫째 — 보상 약속(흰 패널) ===================== */
|
|
.promise-panel {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: -2rem; /* 인트로 위로 살짝 겹침 */
|
|
background: #fff;
|
|
border-radius: 2.25rem 2.25rem 0 0; /* 상단 라운드 */
|
|
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 9vw, 7rem);
|
|
}
|
|
|
|
.panel-inner {
|
|
max-width: 100%; /* 콘텐츠 폭(1000px)을 모두 사용 */
|
|
}
|
|
|
|
.promise-title {
|
|
font-size: clamp(1.5rem, 3.6vw, 2.375rem); /* 24~38px */
|
|
font-weight: 800;
|
|
line-height: 1.4;
|
|
letter-spacing: -0.02em;
|
|
color: #14181f;
|
|
}
|
|
|
|
.promise-title .t-soft {
|
|
font-weight: 600; /* 가운데 줄은 살짝 얇게 */
|
|
}
|
|
|
|
.panel-divider {
|
|
border: 0;
|
|
height: 0.0625rem;
|
|
background: #e7e9ee;
|
|
margin: clamp(2rem, 4.5vw, 3.25rem) 0;
|
|
}
|
|
|
|
.panel-eyebrow {
|
|
text-align: center;
|
|
font-size: clamp(0.875rem, 1.4vw, 1rem); /* 14~16px */
|
|
font-weight: 800;
|
|
letter-spacing: 0.02em;
|
|
color: #3b73d6;
|
|
}
|
|
|
|
.panel-head {
|
|
text-align: center;
|
|
margin-top: clamp(0.75rem, 1.6vw, 1.125rem);
|
|
font-size: clamp(1.375rem, 3vw, 2rem); /* 22~32px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
color: #14181f;
|
|
}
|
|
|
|
.panel-sub {
|
|
text-align: center;
|
|
margin-top: clamp(1rem, 2vw, 1.5rem);
|
|
font-size: clamp(0.9375rem, 1.5vw, 1.125rem); /* 15~18px */
|
|
line-height: 1.7;
|
|
color: #6a7180;
|
|
}
|
|
|
|
.panel-sub strong {
|
|
font-weight: 800;
|
|
color: #14181f;
|
|
}
|
|
|
|
/* ── RULE 카드 ── */
|
|
.rule-list {
|
|
list-style: none;
|
|
margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(0.875rem, 1.8vw, 1.25rem);
|
|
}
|
|
|
|
.rule-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(1rem, 3vw, 2.25rem);
|
|
background: #f4f8fe;
|
|
border: 0.09375rem dashed #b3d0f2; /* 1.5px */
|
|
border-radius: 1rem; /* 16px */
|
|
padding: clamp(1.125rem, 2.6vw, 1.625rem) clamp(1.25rem, 3.2vw, 2.125rem);
|
|
}
|
|
|
|
.rule-no {
|
|
flex: none;
|
|
width: clamp(3.5rem, 7vw, 4.75rem);
|
|
color: #2f6fd0;
|
|
font-weight: 800;
|
|
font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); /* 15~17px */
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.rule-text {
|
|
font-size: clamp(0.875rem, 1.4vw, 1rem); /* 14~16px */
|
|
line-height: 1.6;
|
|
color: #515967;
|
|
}
|
|
|
|
.rule-text mark {
|
|
background: none;
|
|
color: #e23b3b; /* 빨강 강조 */
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 좁은 화면 — RULE 라벨을 텍스트 위로 */
|
|
@media (max-width: 32.5rem) {
|
|
.rule-card {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* 모바일: 문장 중간 강제 줄바꿈 제거 → 자연스럽게 이어 흐르도록
|
|
(br 앞 공백이 남아 단어가 붙지 않음) */
|
|
.br-pc {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ── 둘째 — 커리어 성장(회색 섹션) ── */
|
|
.promise-second {
|
|
background: #f3f4f6; /* 연한 회색 */
|
|
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 9vw, 7rem);
|
|
}
|
|
|
|
.promise-body p {
|
|
font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); /* 15~17px */
|
|
line-height: 1.7;
|
|
color: #6a7180;
|
|
}
|
|
|
|
.promise-body p + p {
|
|
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
|
|
}
|
|
|
|
.promise-body strong {
|
|
font-weight: 800;
|
|
color: #14181f;
|
|
}
|
|
|
|
.promise-body .promise-emph {
|
|
margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
|
|
color: #e23b3b; /* 빨강 강조 */
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* ===================== 셋째 — 효율적인 업무(블루) ===================== */
|
|
.promise-third {
|
|
background: #fff; /* 흰색 (푸른 그라데이션은 복지 섹션 전용) */
|
|
padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(4.5rem, 11vw, 8rem);
|
|
}
|
|
|
|
.third-title {
|
|
font-size: clamp(1.5rem, 3.6vw, 2.375rem); /* 24~38px */
|
|
font-weight: 800;
|
|
line-height: 1.4;
|
|
letter-spacing: -0.02em;
|
|
color: #14181f;
|
|
}
|
|
|
|
.third-title .t-soft {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 셋째 제목 아래 경계선 */
|
|
.third-divider {
|
|
border: 0;
|
|
height: 0.0625rem;
|
|
background: #e7e9ee;
|
|
margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
|
|
}
|
|
|
|
.third-body {
|
|
margin-top: clamp(2rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.third-body p {
|
|
font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); /* 15~17px */
|
|
line-height: 1.7;
|
|
color: #6a7180;
|
|
}
|
|
|
|
.third-body p + p {
|
|
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
|
|
}
|
|
|
|
.third-body strong {
|
|
font-weight: 800;
|
|
color: #14181f;
|
|
}
|
|
|
|
/* ===================== 복지(블루 배경 + 흰 카드) ===================== */
|
|
.welfare {
|
|
/* 셋째 블루에서 이어지는 블루 — 위에서 아래로 약간 진해짐 */
|
|
background: linear-gradient(180deg, #2a6fc4 0%, #1a5298 100%);
|
|
padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(4.5rem, 11vw, 8rem);
|
|
}
|
|
|
|
.welfare-q {
|
|
font-size: clamp(1.5rem, 3.6vw, 2.375rem); /* 24~38px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 원형 배지 3개 */
|
|
.welfare-badges {
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: clamp(0.875rem, 2.5vw, 2rem);
|
|
/* 원형 배지 위아래 여백 — 넉넉하게 */
|
|
margin: clamp(3.25rem, 6.5vw, 5rem) 0 clamp(3.25rem, 6.5vw, 5rem);
|
|
}
|
|
|
|
.wbadge {
|
|
flex: 1 1 0;
|
|
max-width: 12.5rem; /* 200px */
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.28);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
text-align: center;
|
|
padding: 0.5rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.wbadge strong {
|
|
font-weight: 800;
|
|
font-size: clamp(0.9375rem, 1.6vw, 1.1875rem); /* 15~19px */
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* 배지 등장 — 작게 시작해 오버슈트하며 통통 튀는 팝(뽁뽁뽁) */
|
|
.wbadge.reveal {
|
|
opacity: 0;
|
|
transition:
|
|
opacity 0.3s ease,
|
|
transform 0.55s cubic-bezier(0.34, 1.7, 0.45, 1); /* 오버슈트 */
|
|
transition-delay: calc(var(--reveal-delay, 0ms) + 300ms);
|
|
}
|
|
|
|
.wbadge.reveal-scale {
|
|
transform: scale(0.2);
|
|
}
|
|
|
|
.wbadge.reveal.is-revealed {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wbadge.reveal {
|
|
transition: none;
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.wbadge span {
|
|
font-size: clamp(0.75rem, 1.3vw, 0.9375rem); /* 12~15px */
|
|
color: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
/* 흰 카드 */
|
|
.welfare-card {
|
|
background: #fff;
|
|
border-radius: 1.5rem; /* 24px */
|
|
padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3.5vw, 2.5rem);
|
|
margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
|
|
box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 20, 50, 0.35);
|
|
}
|
|
|
|
.welfare-card-title {
|
|
color: #3b73d6;
|
|
font-weight: 800;
|
|
font-size: clamp(1.0625rem, 1.8vw, 1.375rem); /* 17~22px */
|
|
letter-spacing: -0.01em;
|
|
margin-bottom: clamp(1.5rem, 3.2vw, 2.5rem);
|
|
}
|
|
|
|
.welfare-grid {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.5rem);
|
|
}
|
|
|
|
.welfare-grid--2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.welfare-grid li {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.wi-emoji {
|
|
font-size: clamp(2.875rem, 5.5vw, 3.75rem); /* 46~60px — 전체적으로 키움 */
|
|
line-height: 1;
|
|
margin-bottom: 1rem; /* 이모지↔제목 — 살짝 벌림 */
|
|
}
|
|
|
|
/* 책상 SVG — 이모지와 동일 크기로 */
|
|
.wi-desk {
|
|
width: 1em;
|
|
height: 1em;
|
|
display: block;
|
|
}
|
|
|
|
.wi-title {
|
|
font-size: clamp(0.8125rem, 1.3vw, 0.9375rem); /* 13~15px */
|
|
font-weight: 700;
|
|
color: #1b1f27;
|
|
line-height: 1.45;
|
|
/* 한글이 글자 단위로 끊기지 않고 어절(공백) 단위로만 줄바꿈되도록 */
|
|
word-break: keep-all;
|
|
text-wrap: balance; /* 여러 줄일 때 줄 길이를 고르게 분배 */
|
|
}
|
|
|
|
.wi-sub {
|
|
margin-top: 0.1875rem; /* 제목↔보조 — 좁힘(3px) */
|
|
font-size: clamp(0.75rem, 1.2vw, 0.875rem); /* 12~14px */
|
|
color: #8a909c;
|
|
line-height: 1.45;
|
|
word-break: keep-all;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* 좁은 화면 — 배지/그리드 열 축소 */
|
|
@media (max-width: 32.5rem) {
|
|
.welfare-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
/* 버블 배지 — 좁은 화면에서 원이 작아져 제목이 줄바꿈되던 문제 해결:
|
|
간격·안쪽 여백을 줄여 원을 키우고, 제목 폰트를 줄여 한 줄로 유지 */
|
|
.welfare-badges {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.wbadge {
|
|
padding: 0.25rem;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.wbadge strong {
|
|
font-size: 0.8125rem; /* 13px — 한 줄에 맞춤 */
|
|
white-space: nowrap; /* 제목 줄바꿈 방지 */
|
|
}
|
|
|
|
.wbadge span {
|
|
font-size: 0.6875rem; /* 11px */
|
|
}
|
|
}
|
|
|
|
/* ===================== 마무리 CTA ===================== */
|
|
.culture-cta {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: clamp(5rem, 12vw, 9rem) 0;
|
|
}
|
|
|
|
.culture-cta .cta-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
background: url('/images/img-banner.png') center / cover no-repeat;
|
|
}
|
|
|
|
.culture-cta .cta-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
/* 다크 네이비 오버레이 — 좌측을 더 진하게(텍스트 가독성) */
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(7, 18, 42, 0.94) 0%,
|
|
rgba(7, 18, 42, 0.82) 52%,
|
|
rgba(7, 18, 42, 0.55) 100%
|
|
);
|
|
}
|
|
|
|
.culture-cta .wrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.cta-inner {
|
|
max-width: 45rem; /* 720px */
|
|
color: #fff;
|
|
}
|
|
|
|
.cta-inner h2 {
|
|
font-size: clamp(1.875rem, 4.4vw, 3rem); /* 30~48px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.cta-inner p {
|
|
margin-top: clamp(1.25rem, 2.6vw, 1.875rem);
|
|
font-size: clamp(0.9375rem, 1.5vw, 1.125rem); /* 15~18px */
|
|
line-height: 1.75;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.cta-inner .cta-last {
|
|
margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
</style>
|