@charset "UTF-8"; /* 리스트 스타일 (해상도 0px ~ 767px)*/


:root {    
  --font-size1: 14px;    
  --line-height1: 20px;
  --font-size2: 17px;    
  --line-height2: 25px;
  --font-size3: 20px;    
  --line-height3: 30px;
  --font-size5: 24px;    
  --line-height5: 34px; 
  --wrapper-mv: 70px; /* margin-vertical */
  --wrapper-pv: 30px; /* padding-vertical */
  --wrap-ph: 20px; /* padding-horizontal */
  --title-mb: 30px; /* margin-bottom */
}

@media screen and (max-width: 768px) {
  :root {
    --wrap-ph: 10px; 
  }
}


.grid_container {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 기본은 모바일용 */
    gap: 20px;
}

.item {
    padding: 0px;
    transition: box-shadow 0.3s;
}

.item:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.image_box {
    position: relative;
    cursor: pointer;
}

.copy_box {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 70%;
    padding: 10px;
    color: white;
    font-size: 14px;
    line-height: 1.4;
    /*background: rgba(0, 0, 0, 0.6);*/ /* 반투명 배경 */
    /*border-radius: 5px;*/
}

.image_box img {
    width: 100%;
    height: auto;
    display: block;
    
}

.caption_box {
    display: flex;
    align-items: center;
    padding:5px 0px;
}

.name {
    font-size: 1.0em;
    font-weight:500;
}

.subject {
    font-size: 1em;
    font-weight: 400;
    color: #9C9C9C;
}

.sound {
    margin-left: auto; /* 우측 정렬 */
}

.sound img {
    width: 20px;
}


/* 태블릿 화면 (768px 이상)에서는 2개씩 */
@media (min-width: 768px) {
    .grid_container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PC 화면 (1024px 이상)에서는 3개씩 */
@media (min-width: 1024px) {
    .grid_container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.contentsWrap {max-width: 100%; width: 1170px; margin: 0 auto; gap: 30px;display: flex;justify-content:space-between;  align-items: flex-start;  flex-wrap: nowrap; padding-top:80px;}
.contentsWrap .left{flex:2;}
.contentsWrap .right {flex:1; position: sticky;top: 67px;margin-top:15px;margin-bottom:70px;}
@media (min-width:768px) and (max-width:1199px){
.contentsWrap .right {margin-right:var(--wrap-ph);}
}
.contentsWrap .right .namePlus {width:100%; height:120px;background:black; border-radius:25px 25px 0 0;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:start;gap:20px;}
.contentsWrap .right .name { margin-left:20px; font-size: 30px; color:white; background:black; text-align:left;}
.contentsWrap .right .location { margin-left:20px;font-size: 20px; color:white; background:black; text-align:left;}
.contentsWrap .right .photo{width:100%;aspect-ratio:1/1.2;overflow:hidden;margin-bottom:50px;border:2px solid gray;border-radius:0 0 30px 30px;}
.contentsWrap .right .photo>img{width:100%; height:100%; object-fit:cover; object-position:top;}


.contentsWrap .right .sign-up {position: relative; bottom: auto; width: 100%; padding:0;}
.contentsWrap .right .sign-up .ad_samples{
font-size:15px;line-height:17px; margin-bottom:20px;
  text-align:center; display:flex; justify-content:space-between; align-items:center;gap:20px;}
.contentsWrap .right .sign-up .ad_samples .sample-audio,
.contentsWrap .right .sign-up .ad_samples .sample-video {border:2px solid darkcyan; flex:1;height:40px;  display: flex;
  justify-content: space-between;
  align-items: center; overflow:hidden;padding:10px;}  
.contentsWrap .right .sign-up .ad_samples .sample-audio svg {
  width: 15%; 
  height: auto;
  fill: darkcyan;
}
.contentsWrap .right .sign-up .ad_samples .sample-video svg {
  width: 18%; 
  height: auto;
  fill: darkcyan;
}
.contentsWrap .right .sign-up .ad_samples .click-name{ font-size:18px;color:darkcyan;}
.contentsWrap .right .sign-up .button{color:white;font-size:20px;  background:darkcyan;padding:10px;text-align:center;}

.contentsWrap .right .sign-up.sticky { position: fixed; bottom: 0px;  left: 0; width: 100%;padding:0 var(--wrap-ph); z-index: 1000;}
.contentsWrap .right .sign-up.sticky .add{padding:1px 10px; margin-bottom:1px;}
.contentsWrap .right .sign-up.sticky .button {margin-bottom: 0px;}

.contentsWrap .left0 {position: sticky; top: 50px;padding: 15px var(--wrap-ph);margin-bottom: 50px;display: flex;justify-content: space-between; align-items: center; z-index: 100; }
.contentsWrap .left0 .allmenu1{  background: white; padding: 1px 10px;border-radius: 18px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);}
.contentsWrap .left0 .menu1 {    cursor: pointer;display: flex;justify-content: space-between; align-items: center; gap: 50px;font-size: 15px;}
.contentsWrap .left0 .menu1 .teacher-home,.contentsWrap .left0 .menu1 .teacher-info,
.contentsWrap .left0 .menu1 .class-review { background: white; padding: 10px 20px; border-radius: 18px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);}
.contentsWrap .left0 .menu1 div.active { color: rgb(167, 107, 107);}
@media (max-width: 768px) {
  .contentsWrap .left0 { top: 40px; }
  .contentsWrap .left0 .allmenu1 {margin-left: 0px; }
}
.contentsWrap .left1{ padding:50px var(--wrap-ph) ; background: url(./image/beige.jpg);}
/* .contentsWrap .left1{ padding:50px var(--wrap-ph) ; background: rgb(246, 247, 239);} */
.contentsWrap .left1 .headline{font-size:25px; font-weight:bold;line-height:30px; margin-bottom:var(--title-mb);}
.contentsWrap .left1 .body {border:2px solid gray; width:100%; display: flex;flex-direction:column; justify-content: space-between; align-items:start;}
.contentsWrap .left1 .body .teacher-name{border-bottom:2px solid gray;width:100%;font-size:var(--font-size3); line-height:var(--line-height3);padding:10px;}
.contentsWrap .left1 .body .career-plus{border-bottom:2px solid gray;width:100%; display:flex;justify-content:space-between;align-items:start;}
.contentsWrap .left1 .body .career-plus .scooling {flex:1;display:flex; justify-content:start; align-items:start; border-right:2px solid gray;font-size:var(--font-size1); line-height:var(--line-height1);padding:10px;}
.contentsWrap .left1 .body .career-plus .scooling .title{flex:1}
.contentsWrap .left1 .body .career-plus .scooling .bodytext{flex:2}
.contentsWrap .left1 .body .career-plus .career {flex:1;display:flex; justify-content:start; align-items:start;font-size:var(--font-size1); line-height:var(--line-height1);padding:10px;}
.contentsWrap .left1 .body .career-plus .career .title{flex:1}
.contentsWrap .left1 .body .career-plus .career .bodytext{flex:2}

.contentsWrap .left1 .body .position-plus{border-bottom:2px solid gray;width:100%; display:flex;justify-content:space-between;align-items:start;}
.contentsWrap .left1 .body .position-plus .position {flex:1;display:flex; justify-content:start; align-items:start; border-right:2px solid gray;font-size:var(--font-size1); line-height:var(--line-height1);padding:10px;}
.contentsWrap .left1 .body .position-plus .position .title{flex:1}
.contentsWrap .left1 .body .position-plus .position .bodytext{flex:2}
.contentsWrap .left1 .body .position-plus .office {flex:1;display:flex; justify-content:start; align-items:start;font-size:var(--font-size1); line-height:var(--line-height1);padding:10px;}
.contentsWrap .left1 .body .position-plus .office .title{flex:1}
.contentsWrap .left1 .body .position-plus .office .bodytext{flex:2}

.contentsWrap .left1 .body .hours-plus{width:100%; display:flex;justify-content:space-between;align-items:start;}
.contentsWrap .left1 .body .hours-plus .email {flex:1;display:flex; justify-content:start; align-items:start;font-size:var(--font-size1); line-height:var(--line-height1);padding:10px;}
.contentsWrap .left1 .body .hours-plus .email .title{flex:1}
.contentsWrap .left1 .body .hours-plus .email .bodytext{flex:2}
.contentsWrap .left1 .body .hours-plus .hours {flex:1;display:flex; justify-content:start; align-items:start;border-left:2px solid gray;font-size:var(--font-size1); line-height:var(--line-height1);padding:10px;}
.contentsWrap .left1 .body .hours-plus .hours .title{flex:1}
.contentsWrap .left1 .body .hours-plus .hours .bodytext{flex:2}

/* .contentsWrap .left1 .body_left,
.contentsWrap .left1 .body_right { flex: 1;display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.contentsWrap .left1 .body_left .name0{font-size:17px; font-weight:bold;}
.contentsWrap .left1 .body_left .compliance-rate { width: 100%; display:flex;justify-content:space-between;    align-items: start; }
.contentsWrap .left1 .body_left .compliance-rate .title {flex:1; font-size:15px;}
.contentsWrap .left1 .body_left .compliance-rate .progress-bar {flex:3; width: 100%; height: 12px;background: linear-gradient(to right, #ddd, #f0f0f0);border-radius: 15px;position: relative;overflow: hidden;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);}
.contentsWrap .left1 .body_left .compliance-rate .progress-fill {width: 90%; height: 100%;background: linear-gradient(to right, #32a852, #6dd47e);color: white;font-size:10px;font-weight: bold;text-align: center;line-height: 12px;border-radius: 5px;}
.contentsWrap .left1 .body_left .location0 .location-name{font-size:15px; margin-bottom:10px;}
.contentsWrap .left1 .body_left .phone{font-size:15px; margin-bottom:10px;}
.contentsWrap .left1 .body_right .child{gap:20px; display:flex; justify-content:start;align-items:start;}
.contentsWrap .left1 .body_right .child .title{flex:1;font-size:15px;}
.contentsWrap .left1 .body_right .child .bodytext{flex:7;} */

.contentsWrap .left2 {margin:100px 0; padding:0 var(--wrap-ph);}
.contentsWrap .left2 .headline{font-size:25px; font-weight:bold;line-height:30px; margin-bottom:var(--title-mb);}
.contentsWrap .left2 .body {display: flex;flex-direction:column; justify-content: space-between; gap: 20px; height: 350px;}
.contentsWrap .left2 .body .comment{display:flex;justify-content:space-between;align-items:center;}
.contentsWrap .left2 .body .comment .word{font-size:15px;}
.contentsWrap .left2 .body .graph{display:flex;justify-content:space-between;align-items:center;height:350px;gap:50px;}
.contentsWrap .left2 .graph .graph_left,
.contentsWrap .left2 .graph .graph_right { flex: 1;display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.contentsWrap .left2 .graph .progress-bar {width: 100%; height: 45px;background: white;position: relative;overflow: hidden;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);border-radius: 0px;}
.contentsWrap .left2 .graph .progress-bar .progress-fill{height: 100%;background: linear-gradient(to right, #32a852, #6dd47e);color: white;font-size: 15px; display: flex; justify-content: center;align-items: center;border-radius: 0 5px 5px 0;padding: 0 10px;}
.contentsWrap .left2 .graph .progress-icon {width: 18px;height: 18px;display: inline-block;flex-shrink: 0;}
.contentsWrap .left2 .graph .progress-text { width:100%;color: white;font-size: 15px;line-height:20px;display: flex;justify-content:start; align-items: center; gap: 5px; padding-right:10px;}

@media screen and (max-width: 768px){
  .contentsWrap .left2 .body {height: 700px;}
  .contentsWrap .left2 .body .graph{flex-direction:column;justify-content:start;width:100%;height:650px;gap:20px; }
  .contentsWrap .left2 .graph .graph_left,
  .contentsWrap .left2 .graph .graph_right {gap:20px; width:100%;}
}
@media screen and (max-width: 768px) {
  .contentsWrap { flex-direction: column; flex-wrap: wrap; }
  .contentsWrap   .right { order: -1; width: 100%; position: static; }
  .contentsWrap   .left { width: 100%; }
}	

.contentsWrap .left3{
  background: rgb(246, 247, 239);margin:100px 0; padding:50px var(--wrap-ph);
}
.left3 .review-section {
  position: relative; /* 부모 요소를 relative로 설정 */
}

.left3 .arrow1 { position: absolute;top: 50%;transform: translateY(-50%);font-size:40px; color:gray;}
.left3 .arrow_left1 {left: 0; }
.left3 .arrow_right1 {right: 0;}
.left3 .arrow1:hover {color: #333;}
.left3 .review-box {flex: 1;max-width: 600px;display: flex;flex-direction: column;align-items:center;gap: 15px; width:100%; }
.left3 .review-text {font-weight: bold;font-size: 20px; color: #222; }
.left3 .review-detail { font-size: 15px;color: #444;line-height: 1.6; white-space: pre-wrap;text-align:center;}
.left3 .review-meta {font-size: 13px; color: #666;display: flex; gap: 20px; border-top: 1px solid #ddd; padding-top: 10px; }
.left3 .review-page {font-size: 13px; text-align: right; color: #999;}
.left3 .viewall1{font-size:17px;text-align:center;margin-top:40px;}

@media (max-width:768px){
  .left3 .review-box{padding:0 40px;}
}

.contentsWrap .left4{ margin:100px 0; margin-bottom:70px; padding:50px var(--wrap-ph) ; background: url(./image/pink.jpg);}
.contentsWrap .left4 .qna-section{display:flex; flex-direction:column; justify-content:space-between; align-items:start; gap:60px;}

.contentsWrap .left4 .qna-section .qna-pair:nth-child(even) {
  align-self: flex-end;   
}

.contentsWrap .left4 .qna-section .qna-pair{display:flex;flex-direction:column;justify-content:space-between;align-items:start;gap:20px;}
.contentsWrap .left4 .qna-section .qna-pair .question {  font-size:var(--font-size2); line-height:var(--line-height2);color:rgb(101, 22, 105);}
.contentsWrap .left4 .qna-section .qna-pair .answer {  font-size:var(--font-size1); line-height:var(--line-height1); padding-left:25px;}
.contentsWrap .left4 .qna-section .qna-pair .question::before {
  content: "Q. ";
  font-size:var(--font-size2);
  font-weight: bold;
  margin-right: 6px;
  color:rgb(101, 22, 105);
  display: inline-block; /* 🔹 transform이 작동하려면 필수 */
  transform: rotate(15deg);
}

.contentsWrap .left1_teacherInfo{padding:40px var(--wrap-ph) ;margin-bottom:100px; background: url(./image/beige.jpg);}
.contentsWrap .left1_teacherInfo .activity-plus {margin-top:var(--wrapper-mv);}
.contentsWrap .left1_teacherInfo>div,
.contentsWrap .left1_teacherInfo>div {gap:50px; display:flex;flex-direction:column;justify-content:start;align-items:start;}
.contentsWrap .left1_teacherInfo .career-plus > div,
.contentsWrap .left1_teacherInfo .activity-plus > div {width:100%; font-size:var(--font-size2);line-height:var(--line-height2); display:flex;justify-content:space-between;align-items:start;}
.contentsWrap .left1_teacherInfo .title{flex:1;}
.contentsWrap .left1_teacherInfo .bodytext{flex:1.5; border-left:2px solid gray;padding-left:40px;}
.contentsWrap .timeline{font-size:var(--font-size1);line-height:var(--line-height1);display:flex;justify-content:space-between;align-items:start;}
.contentsWrap .timeline .period{flex:1;}
.contentsWrap .timeline .achievement{flex:1.5;}

.contentsWrap .left1_classReview{ margin:100px 0; padding:50px var(--wrap-ph) ;}
.contentsWrap .left1_classReview .review_wrap{display:flex; flex-direction:column; justify-content:space-between; align-items:start; gap:60px;}
.contentsWrap .left1_classReview .review_wrap .review{width:70%;padding:0 var(--wrap-ph);}
.contentsWrap .left1_classReview .review_wrap .review:nth-child(even) { align-self: flex-end;   }
.contentsWrap .left1_classReview .review_wrap .review .title{font-size:var(--font-size2); line-height:var(--line-height2);color:rgb(101, 22, 105);margin-bottom:30px;}
.contentsWrap .left1_classReview .review_wrap .review .detail{font-size:var(--font-size1); line-height:var(--line-height1);margin-bottom:20px;}
.contentsWrap .left1_classReview .review_wrap .review .meta{font-size:var(--font-size1); line-height:var(--line-height1);color:rgb(39, 41, 158);}