145 lines
3.4 KiB
Vue
145 lines
3.4 KiB
Vue
<template>
|
|
<section id="process-section" class="royal-process-section">
|
|
<div class="process-inner">
|
|
<div class="section-header">
|
|
<span class="section-badge">MATCHING PROCESS</span>
|
|
<h2 class="section-title">
|
|
진단 테스트 및 상담 <span class="gold-arrow">➔</span> 최적의 교사 매칭 <span class="gold-arrow">➔</span> 1:1 맞춤 수업 진행
|
|
</h2>
|
|
<p class="section-desc">무료 학습 진단부터 시범수업까지 직접 경험해보고 결정하실 수 있습니다.</p>
|
|
</div>
|
|
|
|
<div class="process-flow">
|
|
<div class="flow-step">
|
|
<div class="step-num font-royal-serif">1</div>
|
|
<h3 class="step-label">진단 테스트 및 상담</h3>
|
|
<p class="step-desc">온라인 또는 전화로 학생의 현재 성적, 학습 성향 및 목표 대학·학교 정밀 분석</p>
|
|
</div>
|
|
|
|
<div class="flow-arrow"><i class="fa-solid fa-arrow-right"></i></div>
|
|
|
|
<div class="flow-step">
|
|
<div class="step-num font-royal-serif">2</div>
|
|
<h3 class="step-label">최적의 교사 매칭</h3>
|
|
<p class="step-desc">학생 성향과 목표 등급에 최적화된 전담 선생님 배정 및 1회 무료 모의수업 진행</p>
|
|
</div>
|
|
|
|
<div class="flow-arrow"><i class="fa-solid fa-arrow-right"></i></div>
|
|
|
|
<div class="flow-step">
|
|
<div class="step-num font-royal-serif">3</div>
|
|
<h3 class="step-label">1:1 맞춤 수업 진행</h3>
|
|
<p class="step-desc">선생님 확정 후 학교별 기출 족보 밀착 코칭 및 주간 메타인지 플래너 관리</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.royal-process-section {
|
|
background: #10192b;
|
|
color: #ffffff;
|
|
padding: clamp(48px, 6vw, 72px) 16px;
|
|
margin: 0 auto 50px;
|
|
border-top: 1px solid rgba(212, 176, 104, 0.35);
|
|
border-bottom: 1px solid rgba(212, 176, 104, 0.35);
|
|
}
|
|
|
|
.process-inner {
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.section-badge {
|
|
display: inline-block;
|
|
font-size: 0.76rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.22em;
|
|
color: #e2c687;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(1.25rem, 3.4vw, 1.85rem);
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
letter-spacing: -0.4px;
|
|
word-break: keep-all;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.gold-arrow {
|
|
color: #e2c687;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: clamp(0.84rem, 2vw, 0.95rem);
|
|
color: #cbd5e1;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.process-flow {
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
}
|
|
|
|
.flow-step {
|
|
flex: 1;
|
|
background: #ffffff;
|
|
border: 2px solid #d4b068;
|
|
border-radius: 14px;
|
|
padding: 28px 20px;
|
|
text-align: center;
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.step-num {
|
|
font-size: 2.3rem;
|
|
font-weight: 800;
|
|
color: #c49b50;
|
|
line-height: 1;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.step-label {
|
|
font-size: 1.08rem;
|
|
font-weight: 800;
|
|
color: #10192b;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.step-desc {
|
|
font-size: 0.82rem;
|
|
color: #475569;
|
|
line-height: 1.55;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.flow-arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #e2c687;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.process-flow {
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.flow-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
</style>
|