@charset "utf-8";
/*
pc first (기존 파일 사용)
1200px~ : pc
~1199px : tablet
~ 576px : mobile
프리텐다드 / 없는 폰트사이즈 - line-height : auto;
*/
.sub-banner img { width: 100%; border-radius: var(--b-radius2); display: block;}
.board-title { margin-bottom: 24px; margin-top: 64px; }
.board-title p { font-weight: 700; font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px; color: var(--n-mainTitle);}
.academy .board-title{margin-top: 0;}
.teacherPage{padding-bottom: 100px; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; padding-top: 64px;}
.teacherPage .pageTitle{display: none;}
/* .teacherPage.detail{padding-top: 100px;} */ /* 250429 모바일에서는 여백 없도록 변경 */
.teacherPage.detail{padding-top: 0px;}
/***********************************
전문강사팀 리스트
***********************************/
.teacher-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.teacher-list a { display: flex; flex-direction: column; flex-wrap: wrap; position: relative; background-color: var(--b-color5); overflow: hidden; border-radius: var(--b-radius2);}
.teacher-list a::before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 100%; }
.teacher-list a img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 68.75%; }
.teacher-list a > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; }
.teacher-list a > div.default { padding: 48px 4px 0; }
.teacher-list a > div.default p { font-size: var(--f-heading3); line-height: normal;}
.teacher-list a > div.default strong { display: block; color: var(--p-color2); font-size: var(--f-heading1); line-height: normal; margin-top: 0; letter-spacing: -0.4px;}
.teacher-list a > div.hover { display: flex; align-items: flex-end; }
.teacher-list a > div.hover ul {background: linear-gradient(0deg, rgba(64, 64, 78, 0.70) 0%, rgba(64, 64, 78, 0.70) 10%, rgba(64, 64, 78, 0.10) 80%, rgba(64, 64, 78, 0.00) 100%); color: var(--n-white); text-align: left; padding: 24px; letter-spacing: -0.03em; transform: translateY(100%); transition: all .3s ease-in-out; width: 100%; min-height: 44%; display: flex; flex-wrap: wrap; flex-direction: column-reverse;}
.teacher-list a > div.hover ul li { font-size: var(--f-body1); line-height: normal; letter-spacing: -0.28px;}
/***********************************
전문강사팀 상세
***********************************/
/* 프로필 */
.teacher-page-wrapper .teacher-info {background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/teacher/teacher_bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; align-items: flex-end;}
.teacher-page-wrapper .teacher-info .topWrap{flex-wrap: nowrap; column-gap: 85px; align-items: center;}
.teacher-page-wrapper .teacher-info .teacher-profile { position: relative; width: 360px;}
.teacher-page-wrapper .teacher-info .teacher-profile img{display: block; width: 100%;}
.teacher-page-wrapper .teacher-info .teacher-profile-text{width: calc(100% - 360px);}
.teacher-page-wrapper .teacher-info .teacher-profile-text p { text-align: left; font-weight: bold; font-size: 24px; line-height: normal; letter-spacing: -0.48px; }
.teacher-page-wrapper .teacher-info .teacher-profile-text h3 { font-weight: 700; font-size: 38px; line-height: normal; letter-spacing: -0.76px; /* color: #6CB640; */ color: var(--p-color2); }
.teacher-page-wrapper .teacher-info .teacher-profile-text .qoute { font-weight: normal; font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; margin-top: 16px; min-height: 130px; font-weight: 400;}
.teacher-page-wrapper .teacher-info .teacher-profile-text>strong { margin-top: 16px; font-size: var(--f-display3); line-height: 34px; letter-spacing: -0.48px;}
.teacher-page-wrapper .teacher-info .teacher-profile-text ul li::before { content: '·'; display: inline; position: absolute; left: 0; top: 0; }
.teacher-page-wrapper .teacher-info .teacher-profile-text ul li { font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; position: relative; padding-left: 8px; }
/* 특별한 이유 */
.teacher-page-wrapper .teacher-special { background-color: var(--b-color5); padding: 64px 0; }
.teacher-page-wrapper .teacher-special h3 { font-size: var(--f-heading1); line-height: 28px; letter-spacing: -0.4px; font-weight: normal; margin-bottom: 24px; color: var(--n-mainTitle);}
.teacher-page-wrapper .teacher-special h3 span {font-weight: 700;}
.teacher-page-wrapper .teacher-special ul {display: grid; grid-template-columns: repeat(3,1fr); column-gap: 24px;}
.teacher-page-wrapper .teacher-special ul li { padding: 24px; background-color: var(--n-white); border-radius: var(--b-radius2); box-shadow: var(--box-shadow1); font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; color: var(--n-subTitle); }
.teacher-page-wrapper .teacher-special ul li:last-child { border-right: 0; }
.teacher-page-wrapper .teacher-special ul li p { display: flex; font-size: var(--f-heading1); line-height: 28px; letter-spacing: -0.4px; align-items: flex-start; font-weight: 700; color: var(--n-mainTitle); margin-bottom: 4px;}
.teacher-page-wrapper .teacher-special ul li p strong { font-size: var(--f-display3); line-height: normal; letter-spacing: -0.48px; margin-right: 4px; }
/* 무료 강의 */
.teacher-page-wrapper .teacher-title { font-size: var(--f-heading1); line-height: normal; letter-spacing: -0.4px; padding-bottom: 16px; border-bottom: 1px solid var(--s-color1); margin-bottom: 24px; overflow: hidden; color: var(--n-mainTitle);}
.teacher-page-wrapper .teacher-title .more { font-size: 15px; letter-spacing: -0.3px; float: right; }
.teacher-page-wrapper .teacher-youtube{ padding: 40px 0 0; }
.teacher-page-wrapper .teacher-youtube .youtube-wrapper {display: flex; column-gap: 24px;}
.teacher-page-wrapper .teacher-youtube .youtube-wrapper > div{width: calc(50% - 12px); }
.teacher-page-wrapper .teacher-youtube .youtube-wrapper .youtube-player { width: 100%; height: auto; aspect-ratio: 588/331; position: relative; border-radius: var(--b-radius2); overflow: hidden; max-width: 588px;}
.teacher-page-wrapper .teacher-youtube .youtube-wrapper iframe { position: absolute; width: 100%; height: 100%; border: none; outline: 0;}
.teacher-page-wrapper .teacher-youtube .youtube-wrapper .youtube-title {font-size: var(--f-heading3); letter-spacing: -0.32px; text-align: left; padding-top: 8px; font-weight: 700; line-height: normal; padding-left: 8px;}
.teacher-page-wrapper .teacher-board { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; }
.teacher-page-wrapper .teacher-board .board-wrapper { width: 100% }
.teacher-page-wrapper .teacher-board .board-wrapper table { width: 100%; border-collapse: collapse; }
.teacher-page-wrapper .teacher-board .board-wrapper table thead { display: none; }
.teacher-page-wrapper .teacher-board .board-wrapper table td { border-bottom: 1px solid #C5C5C5; height: 44px; }
.teacher-page-wrapper .teacher-board .board-wrapper table td .badge { width: 30px; height: 22px; display: flex; align-items: center; justify-content: center; color: #ffffff; /* background-color: #6CB640; */ background-color: var(--p-color2); font-weight: 300; font-size: 12px; letter-spacing: -0.36px; }
.teacher-page-wrapper .teacher-board .board-wrapper table td a { display: flex; align-items: center; gap: 8px; }
.teacher-page-wrapper .teacher-board .board-wrapper table td a div { display: inline-block; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; letter-spacing: -0.3px; color: #000000; }
.teacher-page-wrapper .teacher-board .board-wrapper table td a div + span { font-size: 15px; letter-spacing: -0.3px; color: #777777; margin-left: -8px; }
.teacher-page-wrapper .teacher-board .board-wrapper table td.date { text-align: right; }
/* 어학원 */
.academy .teacher-page-wrapper .teacher-info .teacher-profile span {color: #D1F0FF; background-color: rgb(0, 127, 163, 0.49);}
@media screen and (max-width: 1199px){
/***********************************
전문강사팀 리스트
***********************************/
.teacherPage{padding-top: 40px;}
.board-title{margin-top: 40px; margin-bottom: 16px;}
.sub-banner img{border-radius: var(--b-radius3);}
.teacher-list{gap: 16px;}
.teacher-list a{border-radius: var(--b-radius3);}
.teacher-list a::before{padding-bottom: 150%;}
.teacher-list a > div.default{padding-top: 32px;}
.teacher-list a > div.default p{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
.teacher-list a > div.default strong{font-weight: 600; }
.teacher-list a img{height: 67%;}
.teacher-list a > div.hover ul{padding: 16px;}
/***********************************
전문강사팀 상세
***********************************/
.teacher-page-wrapper .teacher-info{min-height: initial;}
.teacher-page-wrapper .teacher-info .topWrap{column-gap: 40px; align-items: center; padding-top: 40px; justify-content: center;}
.teacher-page-wrapper .teacher-info .teacher-profile{width: 200px; text-align: right;}
.teacher-page-wrapper .teacher-info .teacher-profile img{width: 100%; display: inline-block;}
.teacher-page-wrapper .teacher-info .teacher-profile-text{width: 330px;}
.teacher-page-wrapper .teacher-info .teacher-profile-text h3{font-size: var(--f-display3); line-height: 34px; letter-spacing: -0.48px;}
.teacher-page-wrapper .teacher-info .teacher-profile-text p{font-size: var(--f-heading3); line-height: normal; letter-spacing: -0.32px;}
.teacher-page-wrapper .teacher-info .teacher-profile-text .qoute{font-size: var(--f-body1); line-height: normal; letter-spacing: -0.28px; margin-top: 12px; min-height: initial;}
/* 특별한 이유 */
.teacher-page-wrapper .teacher-special{padding: 40px 0;}
.teacher-page-wrapper .teacher-special h3{margin-bottom: 16px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; }
.teacher-page-wrapper .teacher-special ul{row-gap: 16px; column-gap: 16px;}
.teacher-page-wrapper .teacher-special ul li{border-radius: var(--b-radius1); font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; padding: 16px;}
.teacher-page-wrapper .teacher-special ul li p{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
.teacher-page-wrapper .teacher-special ul li p strong{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
/* 무료 강의 */
.teacher-page-wrapper .teacher-title{font-size: var(--f-body1); font-weight: 700; margin-bottom: 16px;}
.teacher-page-wrapper .teacher-youtube .youtube-wrapper{column-gap: 16px;}
.teacher-page-wrapper .teacher-youtube .youtube-wrapper > div{width: calc(50% - 8px);}
.teacher-page-wrapper .teacher-youtube .youtube-wrapper .youtube-player{border-radius: var(--b-radius1);}
.teacher-page-wrapper .teacher-youtube .youtube-wrapper .youtube-title{font-size: var(--f-body1);}
}
@media screen and (max-width: 768px){
.teacherPage{padding-bottom: 40px;}
/***********************************
전문강사팀 리스트
***********************************/
.teacherPage{padding-top: 32px;}
.sub-banner img{border-radius: var(--b-radius0);}
.teacher-list{grid-template-columns: repeat(2,1fr);}
.teacher-list a{border-radius: var(--b-radius0);}
.board-title{margin-bottom: 16px; margin-top: 32px;}
.board-title p{font-size: var(--f-body1);}
.teacher-list a > div.default{padding: 16px 12px;}
.teacher-list a > div.default p{font-size: var(--f-body2); line-height: normal;}
.teacher-list a > div.default strong{font-size: var(--f-heading3);}
/***********************************
전문강사팀 상세
***********************************/
/* 프로필 */
.teacher-page-wrapper .teacher-info .teacher-profile-text .qoute br{display: none;}
/* 무료 강의 */
.teacher-page-wrapper .teacher-youtube .youtube-wrapper{flex-wrap: wrap; row-gap: 24px;}
.teacher-page-wrapper .teacher-youtube .youtube-wrapper > div{width: 100%;}
.teacher-page-wrapper .teacher-youtube .youtube-wrapper .youtube-player{max-width: 100%;}
}
@media screen and (max-width: 576px){
/***********************************
전문강사팀 상세
***********************************/
/* 프로필 */
.teacher-page-wrapper .teacher-info .topWrap{display: block; padding-bottom: 40px;}
.teacher-page-wrapper .teacher-info .teacher-profile{text-align: center; margin: 0 auto 24px;}
.teacher-page-wrapper .teacher-info .teacher-profile-text{width: 100%; padding: 0 8px;}
.teacher-page-wrapper .teacher-special ul{display: block;}
.teacher-page-wrapper .teacher-special ul li{word-break: break-all; width: 100%;}
.teacher-page-wrapper .teacher-special ul li + li{margin-top: 16px;}
}
/*************************************************************
hover effect
*************************************************************/
@media (hover: hover) and (pointer: fine) {
.teacher-list a:hover {box-shadow: var(--box-shadow2);}
.teacher-list a:hover > div.hover ul { transform: translateY(0%); }
}
@media screen and (min-width: 1200px) {
/* 250429 PC 1200 이상에서는 여백 있도록 변경 */
.teacherPage.detail { padding-top: 64px;}
}