223 lines
5.4 KiB
Vue
223 lines
5.4 KiB
Vue
<template>
|
|
<section id="tutor-section" class="royal-teacher-section">
|
|
<div class="teacher-inner">
|
|
<div class="section-header">
|
|
<span class="section-badge">TUTOR LINEUP</span>
|
|
<h2 class="section-title">Tutor Lineup</h2>
|
|
<p class="section-subtitle">서울대, 연세대, 고려대 석박사 및 베테랑 교사</p>
|
|
</div>
|
|
|
|
<!-- 시안과 동일한 3인 정장 강사 라인업 카드 -->
|
|
<div class="tutors-grid">
|
|
<article class="tutor-card">
|
|
<div class="tutor-img-wrap">
|
|
<img
|
|
src="/img/tutor-1.jpg"
|
|
alt="서울대·연세대·고려대 수리과학 전담 베테랑 교사"
|
|
width="600"
|
|
height="600"
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="tutor-img"
|
|
/>
|
|
</div>
|
|
<div class="tutor-info">
|
|
<span class="tutor-role">수리·과학 전담</span>
|
|
<h3 class="tutor-name">서울대, 연세대, 고려대<br />석박사 및 베테랑 교사</h3>
|
|
<p class="tutor-desc">학력·경력·신원 100% 서류 검증 및 내신 킬러 문항 1:1 역추적 지도</p>
|
|
<div class="tutor-rate">
|
|
<span>성적 향상도</span>
|
|
<strong>98%</strong>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="tutor-card">
|
|
<div class="tutor-img-wrap">
|
|
<img
|
|
src="/img/tutor-2.jpg"
|
|
alt="서울대·연세대 영어·국어 전담 석박사 및 베테랑 교사"
|
|
width="600"
|
|
height="600"
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="tutor-img"
|
|
/>
|
|
</div>
|
|
<div class="tutor-info">
|
|
<span class="tutor-role">영어·국어 전담</span>
|
|
<h3 class="tutor-name">서울대, 연세대<br />석박사 및 베테랑 교사</h3>
|
|
<p class="tutor-desc">교과서·부교재 변형 예측 및 서술형 조건 감점 0점화 밀착 첨삭</p>
|
|
<div class="tutor-rate">
|
|
<span>성적 향상도</span>
|
|
<strong>98%</strong>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="tutor-card">
|
|
<div class="tutor-img-wrap">
|
|
<img
|
|
src="/img/tutor-3.jpg"
|
|
alt="서울대·연세대·고려대 입시 및 내신 1등급 베테랑 교사"
|
|
width="600"
|
|
height="600"
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="tutor-img"
|
|
/>
|
|
</div>
|
|
<div class="tutor-info">
|
|
<span class="tutor-role">입시·특목고 전담</span>
|
|
<h3 class="tutor-name">서울대, 연세대, 고려대<br />베테랑 교사</h3>
|
|
<p class="tutor-desc">학생 성향 맞춤 인터뷰 배정 및 1회 무료 모의수업 후 최종 확정</p>
|
|
<div class="tutor-rate">
|
|
<span>성적 향상도</span>
|
|
<strong>98%</strong>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.royal-teacher-section {
|
|
background: #f4ece0;
|
|
border-top: 1px solid #e4d9c5;
|
|
border-bottom: 1px solid #e4d9c5;
|
|
padding: clamp(48px, 6vw, 72px) 16px;
|
|
margin: 0 auto 50px;
|
|
}
|
|
|
|
.teacher-inner {
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-badge {
|
|
display: inline-block;
|
|
font-size: 0.76rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.22em;
|
|
color: #9e7a32;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(1.45rem, 3.8vw, 2.1rem);
|
|
font-weight: 900;
|
|
color: #10192b;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: clamp(0.92rem, 2.2vw, 1.08rem);
|
|
font-weight: 700;
|
|
color: #334155;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tutors-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.tutor-card {
|
|
background: #ffffff;
|
|
border: 1.5px solid #dec492;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 24px rgba(16, 25, 43, 0.06);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: transform 0.25s ease;
|
|
}
|
|
|
|
.tutor-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.tutor-img-wrap {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
background: #e8dccb;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tutor-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: top center;
|
|
}
|
|
|
|
.tutor-info {
|
|
padding: 20px 18px 22px;
|
|
text-align: center;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tutor-role {
|
|
display: inline-block;
|
|
align-self: center;
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
color: #9e7a32;
|
|
background: #fbf8f3;
|
|
border: 1px solid #e4d9c5;
|
|
padding: 3px 10px;
|
|
border-radius: 9999px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.tutor-name {
|
|
font-size: 1rem;
|
|
font-weight: 800;
|
|
color: #10192b;
|
|
line-height: 1.4;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.tutor-desc {
|
|
font-size: 0.8rem;
|
|
color: #64748b;
|
|
line-height: 1.5;
|
|
margin-bottom: 14px;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.tutor-rate {
|
|
border-top: 1px solid #f1eae0;
|
|
padding-top: 12px;
|
|
font-size: 0.92rem;
|
|
font-weight: 800;
|
|
color: #10192b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tutor-rate strong {
|
|
color: #b58e43;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.tutors-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|