@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:'팔로잉';}



.view_info .sample_lesson{width:150px;}

#wrap #footer{background-color:#F1F5F9;}
@media (max-width: 980px) {
.view_info .sample_lesson{width:140px;}
}

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