@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";}


#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: #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;}





.view_info .sample_lesson{width:150px;}


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

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