@charset "utf-8";

@font-face {
    font-family: "Pretendard Variable";
    src: url("https://db.onlinewebfonts.com/t/872a6c5775ec910058a9a409a201972a.eot");
    src: url("https://db.onlinewebfonts.com/t/872a6c5775ec910058a9a409a201972a.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/872a6c5775ec910058a9a409a201972a.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/872a6c5775ec910058a9a409a201972a.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/872a6c5775ec910058a9a409a201972a.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/872a6c5775ec910058a9a409a201972a.svg#Pretendard Variable")format("svg");
}

:root {
    --main-font: Pretendard Variable;
}
*{font-family: "Pretendard Variable";}


#wrap .compad{padding-top:36px;padding-bottom:36px;}

#header.gnb_type1 .head_in{flex-direction: column;}
.head_in .head_in_line1{display:flex;justify-content: space-between;width: 100%;}
.head_in .head_in_line1 .member_util{}
.head_in .head_in_line1 .member_util  ul{display:flex;gap:4px;align-items: center;}
#header .head_in_line1 .member_util li.login a{background-image:none;padding:6px 16px;background-color: #fff;border-radius:8px;font-size:14px;line-height:20px;color:#314158;}
#header .head_in_line1 .member_util li.join a{background-image:none;padding:6px 16px;background-color: #fff;border-radius:8px;font-size:14px;line-height:20px;color:#314158;}
#header .head_in_line1 .member_util li.mypage2 a{background-image:none;padding:6px 16px;background-color: #2B7FFF;border-radius:8px;font-size:14px;line-height:20px;color:#F1F5F9;}

.head_in .head_in_line2{width:100%;}
.head_in .head_in_line2 .gnb_ul{}
.head_in .head_in_line2 .gnb_ul a{font-size:16px;line-height:24px;color:#0F172B;font-weight:700;}
.head_in .head_in_line2 .sub_menu{}
.head_in .head_in_line2 .sub_menu .sm_ul{display:flex;justify-content: space-between;}
.head_in .head_in_line2 .sub_menu .sm_ul li{display:flex;}
.head_in .head_in_line2 .sub_menu .sm_ul li a{display:flex;gap:8px;font-size:15px;line-height:24px;color:#0F172B;font-weight:500;}
.head_in .head_in_line2 .sub_menu .sm_ul li a:before{content:'';display:block;width:24px;height:24px;}

.head_in .head_in_line2 .sub_menu .sm_ul li.sm01 a:before{background: url(/html/images/new/ico_sm01.png) no-repeat 50% 50% / 100% auto;}
.head_in .head_in_line2 .sub_menu .sm_ul li.sm02 a:before{background: url(/html/images/new/ico_sm02.png) no-repeat 50% 50% / 100% auto;}
.head_in .head_in_line2 .sub_menu .sm_ul li.sm03 a:before{background: url(/html/images/new/ico_sm03.png) no-repeat 50% 50% / 100% auto;}
.head_in .head_in_line2 .sub_menu .sm_ul li.sm04 a:before{background: url(/html/images/new/ico_sm04.png) no-repeat 50% 50% / 100% auto;}
.head_in .head_in_line2 .sub_menu .sm_ul li.sm05 a:before{background: url(/html/images/new/ico_sm05.png) no-repeat 50% 50% / 100% auto;}
.head_in .head_in_line2 .sub_menu .sm_ul li.sm06 a:before{background: url(/html/images/new/ico_sm06.png) no-repeat 50% 50% / 100% auto;}
.head_in .head_in_line2 .sub_menu .sm_ul li.sm07 a:before{background: url(/html/images/new/ico_sm07.png) no-repeat 50% 50% / 100% auto;}
.head_in .head_in_line2 .sub_menu .sm_ul li.sm08 a:before{background: url(/html/images/new/ico_sm08.png) no-repeat 50% 50% / 100% auto;}
.head_in .head_in_line2 .sub_menu .sm_ul li.sm09 a:before{background: url(/html/images/new/ico_sm09.png) no-repeat 50% 50% / 100% auto;}

#wrap h3.title{text-align:left;font-size:24px;color: #000;letter-spacing:0;font-weight: 700;line-height: 1.5;margin: 0 0 24px;position: relative;}
#wrap .best_list{overflow-x:hidden;margin-left:-25px;}
#wrap .best_list .item{margin-left:25px;border-radius:8px;}
#wrap .best_list .item .img_box{border-radius:8px 8px 0 0;}
#wrap .best_list .item .img_box > img{border-radius:8px 8px 0 0;vertical-align:top;}
#wrap .best_list .item .con_box{border-radius:0 0 8px 8px;padding:12px 12px 20px;}
#wrap .best_list .item .con_box h4{font-size:16px;font-weight:700;color:#0F172B;line-height:1.4;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-break: break-word;height:45px;}
#wrap .best_list .item .con_box .label_box{display:flex;gap:4px;}
#wrap .best_list .item .con_box .label_box .label{display:block;position: unset;min-width: 40px;padding: 0 4px;box-sizing: border-box;height: 18px;line-height: 18px;z-index: 10;color: #fff;font-style: 400;text-align: center;font-size: 12px;letter-spacing: -0.5pt;font-weight: normal;border-radius: 4px;margin-bottom:8px;}

#wrap .new_list{overflow:hidden;display:flex;gap:30px 25px;}

#wrap .new_list .item{position: relative;width: calc((100% - 100px) / 5);border-radius:8px;border: 1px solid #ddd;box-sizing: border-box;margin:0;}
#wrap .new_list .item .img_box{border-radius:8px 8px 0 0;}
#wrap .new_list .item .img_box > img{border-radius:8px 8px 0 0;vertical-align:top;}
#wrap .new_list .item .con_box{border-radius:0 0 8px 8px;padding:12px 12px 20px;}
#wrap .new_list .item .con_box h4{font-size:16px;font-weight:700;color:#0F172B;line-height:1.4;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-break: break-word;height:45px;}
#wrap .new_list .item .con_box .label_box{display:flex;gap:4px;}
#wrap .new_list .item .con_box .label_box .label{display:block;position: unset;min-width: 40px;padding: 0 4px;box-sizing: border-box;height: 18px;line-height: 18px;z-index: 10;color: #fff;font-style: 400;text-align: center;font-size: 12px;letter-spacing: -0.5pt;font-weight: normal;border-radius: 4px;margin-bottom:8px;}
#wrap .new_list .item .con_box ul{margin:8px 0;}
#wrap .new_list .item .con_box span{margin-top:8px;}
#wrap .new_list .item .con_box ul li{display:flex;gap:8px 4px;padding:0;}
#wrap .new_list .item .con_box ul li span{margin:0;display:block;position:unset;width:40px;}
#wrap .price{font-size:16px;line-height:24px;}
#wrap .price strong {font-weight:700;font-size:16px;line-height:24px;letter-spacing: 0;color:#1C398E;}


#wrap .market_list{overflow:hidden;display:flex;gap:30px;}
#wrap .market_list .item{position: relative;width: calc((100% - 150px) / 6);border-radius:8px;border: 1px solid #ddd;box-sizing: border-box;margin:0;}
#wrap .market_list .item .img_box{border-radius:8px 8px 0 0;}
#wrap .market_list .item .img_box > img{border-radius:8px 8px 0 0;width:100%;vertical-align:top;}
#wrap .market_list .item .con_box{border-radius:0 0 8px 8px;padding:12px 12px 20px;}
#wrap .market_list .item .con_box h4{font-size:16px;font-weight:700;color:#0F172B;line-height:1.4;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-break: break-word;height:45px;}
#wrap .market_list .item .con_box .label_box{display:flex;gap:4px;}
#wrap .market_list .item .con_box .label_box .label{display:block;position: unset;min-width: 40px;padding: 0 4px;box-sizing: border-box;height: 18px;line-height: 18px;z-index: 10;color: #fff;font-style: 400;text-align: center;font-size: 12px;letter-spacing: -0.5pt;font-weight: normal;border-radius: 4px;margin-bottom:8px;}
#wrap .market_list .item .con_box ul{margin:8px 0;}
#wrap .market_list .item .con_box span{margin-top:8px;}
#wrap .market_list .item .con_box ul li{display:flex;gap:8px 4px;padding:0;}
#wrap .market_list .item .con_box ul li span{margin:0;display:block;position:unset;width:40px;}


#wrap .teacher_list{overflow:hidden;}
/* #wrap .teacher_list .teacher_box{position: relative;width: calc((100% - 150px) / 6);border-radius:8px;border: 1px solid #ddd;box-sizing: border-box;margin:0;} */
#wrap .teacher_list .teacher_box{position: relative;width:285px;border-radius:8px;border: 1px solid #ddd;box-sizing: border-box;margin:0;padding:16px;margin-left:30px;}
#wrap .teacher_list .teacher_box .teacher_top{}
#wrap .teacher_list .teacher_box .teacher_top a{display:flex;gap:16px;}
#wrap .teacher_list .teacher_box .img_box{border-radius:50%;width:72px;}
#wrap .teacher_list .teacher_box .img_box > img{border-radius:50%;width:100%;vertical-align:top;aspect-ratio:1/1;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;}
#wrap .teacher_list .teacher_box .teacher_name{width: calc(100% - 88px);} 
#wrap .teacher_list .teacher_box .teacher_name h4{font-size:18px;font-weight:700;color:#0F172B;line-height:1.4;}
#wrap .teacher_list .teacher_box .teacher_name p{font-size:15px;font-weight:400;color:#62748E;line-height:1.4;}

#wrap .teacher_list .teacher_box .teacher_course{margin-top:20px;display:flex;align-items: center;justify-content: center;}
#wrap .teacher_list .teacher_box .teacher_course span{position:relative;display:block;font-size:14px;color:#62748E;line-height:1.4;padding:0 8px;}
#wrap .teacher_list .teacher_box .teacher_course span + span:before{content:'';display:block;width:1px;height:16px;background-color:#CAD5E2;position:absolute;left:0;top:2px;}
#wrap .teacher_list .teacher_box .teacher_course strong{color:#45556C;font-weight:700;padding-left:4px;}
#wrap .teacher_list .teacher_box .like_box{margin-top:12px;}
#wrap .teacher_list .teacher_box .like_box .w_like{position:unset;}
#wrap .teacher_list .teacher_box .like_box .w_like .follow{display:flex;background-color:#fff;border:1px solid #CAD5E2;width:100%;height:40px;align-items: center;justify-content: center;border-radius:4px;font-style:normal;}
#wrap .teacher_list .teacher_box .like_box .w_like .follow:before{content:'+';}
#wrap .teacher_list .teacher_box .like_box .w_like .follow:after{content:'팔로우';}

#wrap .teacher_list .teacher_box .like_box .w_like .follow.on{background-color:#F1F5F9;}
#wrap .teacher_list .teacher_box .like_box .w_like .follow.on:before{content:'v';}
#wrap .teacher_list .teacher_box .like_box .w_like .follow.on:after{content:'팔로잉';}



#wrap #footer{background-color:#F1F5F9;padding:0;border-top:1px solid #E2E8F0;margin-top:36px;}
#wrap #footer .foot_top{display:flex;gap:24px;margin:0;padding:16px 0 12px 0}
#wrap #footer .foot_top a{color:#62748E;font-size:15px;font-weight:700;margin:0;}
#wrap #footer .foot_top a.txt_point{color:#62748E;font-size:15px;font-weight:700;}
#wrap #footer .foot_bottom{font-size:14px;color:#62748E;line-height:1.5;font-weight:400;padding:8px 0 32px 0;}

.bar_banner_box{padding:36px 0;}

.view_info .sample_lesson{width:150px;}

#wrap .photo_list .item{border-radius:8px;}
#wrap .photo_list .item .img_box > img{border-radius:8px 8px 0 0;}
#wrap .photo_list .item .con_box{border-radius:0 0 8px 8px;padding:16px 12px;}
#wrap .photo_list .item .con_box h4{color:#0F172B;font-size:16px;font-weight:700;line-height:1.4;height:45px;margin-bottom:8px;}
#wrap .photo_list .item .con_box .n_tutor_box{}
#wrap .photo_list .item .con_box .n_tutor_box .tutor_thumb{display:flex;gap:8px;font-size:14px;color:#314158;}
#wrap .photo_list .item .con_box .n_tutor_box .tutor_thumb span{display:block;width:24px;height:24px;border-radius:12px;overflow:hidden;align-items: center;background-color:red;}
#wrap .photo_list .item .con_box .n_tutor_box .tutor_thumb span img{width:100%;background-position:50% 50%;background-size:cover;}
#wrap .photo_list .item .con_box .date_box{display:flex;margin-top:2px;gap:16px;}
#wrap .photo_list .item .con_box .date_box .course_date{display:flex;gap:4px;align-items: center;}
#wrap .photo_list .item .con_box .date_box .course_date:before{content:'';display:block;width:12px;height:12px;background: url(/html/images/new/course_ico_date.png) no-repeat 50% 50%;}
#wrap .photo_list .item .con_box .date_box .course_date span{display:block;font-size:14px;line-height:24px;color:#45556C;}
#wrap .photo_list .item .con_box .date_box .course_date span + span{font-size:14px;color:#314158;line-height:24px;}

#wrap .photo_list .item .con_box .date_box .course_review{display:flex;gap:4px;align-items: center;}
#wrap .photo_list .item .con_box .date_box .course_review:before{content:'';display:block;width:12px;height:12px;background: url(/html/images/new/course_ico_review.png) no-repeat 50% 50%;}
#wrap .photo_list .item .con_box .date_box .course_review span{display:block;font-size:14px;line-height:24px;color:#45556C;}
#wrap .photo_list .item .con_box .date_box .course_review span + span{font-size:14px;color:#314158;line-height:24px;}

#wrap .photo_list .item .con_box .date_box > p{position:relative;}
#wrap .photo_list .item .con_box .date_box > p + p:after{content:'';display:block;width:1px;height:16px;background-color:#E2E8F0;position:absolute;left:-8px;top:50%;transform:translateY(-50%);}




@media (max-width: 980px) {
.view_info .sample_lesson{width:140px;}
}

@media (max-width: 680px) {
.view_info .sample_lesson{width:120px;}
}