@charset "utf-8";
@import url('./reset.css');
@import url('./layout.css');


/* ============================================================== S:예전 리소스 ============================================================== */
/* 버튼 */
.motiv_btn{display: flex;align-items: center;}
.motiv_btn .btns{flex: 1;color: #000;background-color: #fff;border: 1px solid #ccc;}
.motiv_btn.type_confirm{gap: 40px;}
.motiv_btn.type_confirm .btns{flex: 1;font-size: 24px;font-weight: 400;line-height:62px;text-align: center;}
.btns.btn_next{color: #fff;background-color: #535353;border-color: #535353;}
.btns.btns_submit{color: #fff;background-color: #2D4390;border-color: #2D4390;}
.btns.btns_complete{max-width:260px;font-size: 24px;font-weight: 400;line-height:62px;text-align: center;color: #fff;background-color: #535353;border-color: #535353;}
.btns.btns_login{font-size: 24px;font-weight: 400;line-height:62px;text-align: center;color: #fff;background-color: #35B597;border-color: #35B597;}
.btns.btns_join{font-size: 24px;font-weight: 400;line-height:62px;text-align: center;color: #fff;background-color: #535353;border-color: #535353;}
.btns.btns_add{font-size: 24px;font-weight: 400;line-height:62px;text-align: center;color: #fff;background-color: #535353;border-color: #535353;}
.btns.btns_later{}
.btns.btns_back{font-size: 24px;font-weight: 400;line-height:62px;text-align: center;color: #fff;background-color: #535353;border-color: #535353;}

@media screen and (max-width:768px) {
    .motiv_btn.type_confirm{gap: 20px;flex-direction: column;}
    .motiv_btn.type_confirm .btns{width: 100%;font-size: 20px;line-height: 48px;}
    .btns.btns_complete{font-size: 20px;line-height: 48px;}
    .btns.btns_login{font-size: 20px;line-height: 48px;}
    .btns.btns_join{font-size: 20px;line-height: 48px;}
    
}

/* input */
.frm_box{}
.frm_box + .frm_box{margin-top: 20px;}
.frm_box .label_box{}
.frm_box .label_box label{display:block;font-size:16px;font-weight: 500;line-height: 20px;color: #333;}
.frm_box .label_box .label{font-size:16px;font-weight: 500;line-height: 20px;color: #333;}
.frm_box .label_box label .tooltip_icon{font-size:16px;font-weight: 400;line-height: 20px;color: #999;}
.frm_box .label_box + .inp_box{margin-top: 8px;}
.frm_box .inp_box{width: 100%;}
.frm_box .inp_box input{width:100%;padding:0 10px;background-color:#fff;font-size:20px;font-weight: 400;line-height: 58px;color: #333;border: 1px solid #ddd;transition: border-color .3s ease, color .3s ease;}
.frm_box .inp_box input::placeholder{color: #999;font-size: 18px;}
.frm_box .inp_box input:focus{border-color: #333;color: #333;}
.frm_box .inp_box select{width:100%;height:60px;padding:0 10px;background-color:#fff;font-size:20px;font-weight: 400;line-height: 58px;color:#333;border: 1px solid #ddd;transition: border-color .3s ease, color .3s ease;}
.frm_box .inp_box select:focus{border-color: #333;}
.frm_box .inp_box select option{font-size: 14px;}
.frm_box .inp_box textarea{width:100%;height:150px;padding:15px 10px;overflow-y:scroll;background-color:#fff;font-size:14px;font-weight: 400;line-height: 1.4;color:#666;border: 1px solid #ddd;resize:none;}
.frm_box .inp_box .frm_info{display:block;margin-top:5px;font-size: 14px;font-weight:400;color: #666;letter-spacing: -0.05px;}
@media screen and (max-width:1280px) {
    .frm_box .inp_box input{line-height: 52px;}
    .frm_box .inp_box select{height: 54px;line-height: 52px;}
}
@media screen and (max-width:950px) {
    .frm_box .inp_box input{font-size:18px;line-height: 42px;}
    .frm_box .inp_box input::placeholder{font-size: 16px;}
    .frm_box .inp_box select{height: 44px;font-size:18px;line-height: 42px;}
    
}
/* ============================================================== //E:예전 리소스 ============================================================== */

.nickname_lable{margin-left:4px;}

/* ============================================================== S:input custom ============================================================== */
.frm_box{}
.frm_box + .frm_box{margin-top: 32px;}
.frm_box + .frm_flex_box{margin-top: 32px;}
.frm_flex_box + .frm_box{margin-top: 32px;}

.frm_flex_box{display: flex;align-items: center;gap: 16px;}
.frm_flex_box .frm_box{flex: 1 1 auto;}
.frm_flex_box.custom_box .frm_box{flex: 1;}
.frm_flex_box .frm_box + .frm_box{margin-top: 0;}

.frm_box .frm_label_box{line-height: 0;}
.frm_box .frm_label_box label{font-size: 18px;font-weight: 500;line-height: 26px;color: #333;}
.frm_box .frm_label_box .label{display: inline-block;font-size: 18px;font-weight: 500;line-height: 26px;color: #333;}

.frm_box .frm_inp_box{line-height: 0;}
.frm_box .frm_label_box + .frm_inp_box{margin-top: 8px;}
.frm_box .frm_inp_box .frm_input{width: 100%;height: 54px;padding: 8px 16px;box-shadow: none;font-family: "Pretendard Variable", Pretendard, sans-serif;font-size: 16px;font-weight: 400;line-height: 1;color: #333;transition: border-color .2s, background-color .2s;background-color: #eee;outline: 1px solid transparent;border: 1px solid transparent;border-radius: 8px;}
.frm_box .frm_inp_box .frm_input::placeholder{color: #666;}
.frm_box .frm_inp_box .frm_input:-webkit-autofill{-webkit-box-shadow: 0 0 0 1000px #fff inset;-webkit-text-fill-color: #333;border-color: #2D4390;}
.frm_box .frm_inp_box .frm_input:focus{border-color: #2D4390;background-color: #fff;}
.frm_box .frm_inp_box .frm_input:disabled,
.frm_box .frm_inp_box .frm_input:read-only{cursor: default;border-color: transparent;background-color: #ddd;color: #999;}

.frm_box .frm_inp_box .frm_input[type="file"]{font-size: 14px;}
.frm_box .frm_inp_box .frm_input[type="file"]::file-selector-button {width: 100%;max-width: 120px;height: 100%;background: #434a54;font-size: 14px;font-weight: 500;line-height: 1;color: #fff;border: 0;cursor: pointer;border-radius: 4px;}

.frm_box .frm_inp_box .frm_select{width: 100%;height: 54px;padding: 8px 16px;box-shadow: none;font-family: "Pretendard Variable", Pretendard, sans-serif;font-size: 16px;font-weight: 400;line-height: 1;color: #333;transition: border-color .2s, background-color .2s;background-color: #eee;outline: 1px solid transparent;border: 1px solid transparent;border-radius: 8px;}

.frm_box .frm_label_box + .frm_textarea_box{margin-top: 8px;}
.frm_box .frm_textarea_box{line-height: 0;}
.frm_box .frm_textarea_box textarea{width:100%;height:150px;padding:8px 16px;overflow-y:scroll;background-color:#fff;font-size:14px;font-weight: 400;line-height: 1.4;color:#666;border: 1px solid #ddd;resize:none;}
.frm_box .frm_label_box + .frm_table_box{margin-top: 8px;}
.frm_box .frm_table_box{}

@media (max-width: 1100px){}
@media (max-width: 1024px){
    .frm_box .frm_label_box label{font-size: 16px;line-height: 24px;}
    .frm_box .frm_label_box .label{font-size: 16px;line-height: 24px;}
    .frm_box .frm_inp_box .frm_input{height: 48px;padding: 8px 12px;font-size: 14px;line-height: 20px;}
}
@media (max-width: 600px){
    .frm_box + .frm_box{margin-top: 24px;}
    .frm_box + .frm_flex_box{margin-top: 24px;}
    .frm_flex_box + .frm_box{margin-top: 24px;}

    .frm_box .frm_label_box label{font-size: 14px;line-height: 20px;}
    .frm_box .frm_label_box .label{font-size: 14px;line-height: 20px;}
    .frm_box .frm_inp_box .frm_input[type="file"]::file-selector-button{max-width: 60px;font-size: 12px;}
}
/* ============================================================== //E:input custom ============================================================== */
/* ============================================================== S:checkbox custom ============================================================== */
.frm_chk_wrap{}
.frm_chk_wrap .frm_chk_box + .frm_chk_box{margin-top: 8px;}
.frm_chk_box{line-height: 0;}
.frm_chk_box .chk_inp_box{}
.frm_chk_box .chk_inp_box input[type="checkbox"]{position: absolute !important;left: -9999px !important;top:-9999px !important;width: 0 !important;height: 0 !important;opacity: 0 !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;visibility: hidden !important;background:transparent !important;clip: rect(0,0,0,0) !important;border: 0 !important;border-radius: 0 !important;appearance: none !important;-webkit-appearance: none !important;}
.frm_chk_box .chk_inp_box input[type="checkbox"]:checked{}

.frm_chk_box .chk_label_box{}
.frm_chk_box .chk_label_box .chk_label{font: unset;display: inline-flex;align-items: flex-start;flex-wrap: nowrap;gap: 8px;}
.frm_chk_box .chk_label_box .chk_label_custom{flex: 0 0 auto;display: block;width: 26px;height: 26px;background-color: #fff;border: 1px solid #d9d9d9;position: relative;overflow: hidden;box-sizing: border-box;transition: border-color .15s;}
.frm_chk_box .chk_label_box .chk_label_custom .icon_chked{display: block;width: 24px;height: 24px;background-color: transparent;opacity: 0;transition: opacity .15s;pointer-events: none;}
.frm_chk_box .chk_label_box .chk_label_custom .icon_chked svg{width: 100%;height: 100%;pointer-events: none;}
.frm_chk_box .chk_label_box .chk_label_txt{font-size: 16px;font-weight: 500;line-height: 26px;color: #333;letter-spacing: -0.54px;}

.frm_chk_box .chk_inp_box:has(input[type="checkbox"]:checked) + .chk_label_box{}
.frm_chk_box .chk_inp_box:has(input[type="checkbox"]:checked) + .chk_label_box .chk_label_custom{border-color: #2356A1;}
.frm_chk_box .chk_inp_box:has(input[type="checkbox"]:checked) + .chk_label_box .chk_label_custom .icon_chked{opacity: 1;}

@media (max-width: 1100px){
    .frm_chk_box .chk_label_box .chk_label_custom{width: 24px;height: 24px;}
    .frm_chk_box .chk_label_box .chk_label_custom .icon_chked{width: 22px;height: 22px;}
    .frm_chk_box .chk_label_box .chk_label_txt{line-height: 24px;}
}
@media (max-width: 1024px){}

@media (max-width: 600px){
    .frm_chk_box .chk_label_box .chk_label_custom{width: 20px;height: 20px;}
    .frm_chk_box .chk_label_box .chk_label_custom .icon_chked{width: 18px;height: 18px;}
    .frm_chk_box .chk_label_box .chk_label_txt{font-size: 14px;line-height: 20px;}
}
/* ============================================================== //E:checkbox custom ============================================================== */
/* ============================================================== S:radio custom ============================================================== */
.frm_radio_wrap{}
.frm_radio_wrap .frm_radio_box + .frm_radio_box{margin-top: 8px;}
.frm_radio_box{line-height: 0;}
.frm_radio_box .radio_inp_box{}
.frm_radio_box .radio_inp_box input[type="radio"]{position: absolute !important;left: -9999px !important;top:-9999px !important;width: 0 !important;height: 0 !important;opacity: 0 !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;visibility: hidden !important;background:transparent !important;clip: rect(0,0,0,0) !important;border: 0 !important;border-radius: 0 !important;appearance: none !important;-webkit-appearance: none !important;}
.frm_radio_box .radio_inp_box input[type="radio"]:checked{}

.frm_radio_box .radio_label_box{}
.frm_radio_box .radio_label_box .radio_label{font: unset;display: inline-flex;align-items: center;flex-wrap: nowrap;gap: 8px;}
.frm_radio_box .radio_label_box .radio_label_custom{display: block;width: 26px;height: 26px;background-color: #fff;border: 1px solid #d9d9d9;position: relative;overflow: hidden;box-sizing: border-box;transition: border-color .15s;}
.frm_radio_box .radio_label_box .radio_label_custom .icon_chked{display: block;width: 24px;height: 24px;background-color: transparent;opacity: 0;transition: opacity .15s;}
.frm_radio_box .radio_label_box .radio_label_custom .icon_chked svg{width: 100%;height: 100%;}
.frm_radio_box .radio_label_box .radio_label_txt{font-size: 16px;font-weight: 500;line-height: 24px;color: #333;letter-spacing: -0.54px;}

.frm_radio_box .radio_inp_box:has(input[type="radio"]:checked) + .radio_label_box{}
.frm_radio_box .radio_inp_box:has(input[type="radio"]:checked) + .radio_label_box .radio_label_custom{border-color: #2356A1;}
.frm_radio_box .radio_inp_box:has(input[type="radio"]:checked) + .radio_label_box .radio_label_custom .icon_chked{opacity: 1;}

@media (max-width: 1100px){
    .frm_radio_box .radio_label_box .radio_label_custom{width: 24px;height: 24px;}
    .frm_radio_box .radio_label_box .radio_label_custom .icon_chked{width: 22px;height: 22px;}
}
@media (max-width: 1024px){}

@media (max-width: 600px){
    .frm_radio_box .radio_label_box .radio_label_custom{width: 20px;height: 20px;}
    .frm_radio_box .radio_label_box .radio_label_custom .icon_chked{width: 18px;height: 18px;}
    .frm_radio_box .radio_label_box .radio_label_txt{font-size: 14px;line-height: 20px;}
}
/* ============================================================== //E:radio custom ============================================================== */
/* ============================================================== //S:select custom ============================================================== */
.frm_slt_wrap{}
.frm_slt_box{}
.frm_slt_box .slt_label_box{}
.frm_slt_box .slt_label_box label{}
.frm_slt_box .slt_inp_box{}
.frm_slt_box .slt_inp_box select{width: 100%;min-width: 120px;height: 54px;padding: 0 34px 0 20px;font-size: 16px;font-weight: 500;line-height: 1;color: #333;letter-spacing: -0.54px;background-color: #fff;background-image: url('/resources/images/icon/icon_slt_arr.svg');background-repeat: no-repeat;background-size: 24px 24px;background-position: right 10px center;border: 1px solid #d6d6d6;border-radius: 8px;box-sizing: border-box;overflow: hidden;appearance: none;-webkit-appearance: none !important;cursor: pointer;}
@media (max-width: 1100px){
    .frm_slt_box .slt_inp_box select{min-width: 100px;height: 48px;padding: 0 28px 0 16px;background-size: 20px 20px;font-size: 14px;line-height: 20px;}
}
@media (max-width: 600px){}
/* ============================================================== //E:select custom ============================================================== */
/* ============================================================== S:Page Banner ============================================================== */
#pageBanner{position: relative;width: 100%;max-width: 2560px;padding-left: 40px;padding-right: 40px;margin: 0 auto;font-family: "Pretendard Variable", Pretendard, sans-serif;}
#pageBanner .banner_wrap{display: block;width: 100%;height: 300px;border-radius: 20px;box-sizing: border-box;overflow: hidden;background-repeat: no-repeat;background-size: cover;background-position: center center;display: flex;align-items: flex-end;flex-wrap: nowrap;position: relative;}
#pageBanner .banner_wrap{background-image: url(/resources/images/page_banner/myclass_bg.png);}
#pageBanner .banner_wrap::before{content: '';display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 1;background-color: rgba(0, 0, 0, .2);}
#pageBanner.noticeBanner .banner_wrap{background-image: url('/resources/images/page_banner/notice_bg.png');}
#pageBanner.qaBanner .banner_wrap{background-image: url('/resources/images/page_banner/notice_bg.png');}
#pageBanner.faqBanner .banner_wrap{background-image: url('/resources/images/page_banner/notice_bg.png');}

#pageBanner.archiveBanner .banner_wrap{background-image: url('/resources/images/page_banner/archive_bg.png');}

#pageBanner.myclassBanner .banner_wrap{background-image: url('/resources/images/page_banner/myclass_bg.png');}

#pageBanner.member_register .banner_wrap{background-image: url('/resources/images/page_banner/archive_bg.png');}
#pageBanner.member_modify .banner_wrap{background-image: url('/resources/images/page_banner/archive_bg.png');}

#pageBanner .banner_inner{width: 100%;max-width: 1480px;margin: 0 auto;padding: 40px 40px;position: relative;z-index: 5;}
#pageBanner .banner_tit_box{}
#pageBanner .banner_tit{font-size: 24px;font-weight: 500;line-height: 1;color: #fff;letter-spacing: -0.54px;filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .9));}
#pageBanner .banner_desc_box{margin-top: 20px;}
#pageBanner .banner_desc{font-size: 44px;font-weight: 500;line-height: 52px;color: #fff;letter-spacing: -0.54px;filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .9));}

@media (max-width: 1520px){
    #pageBanner{max-width: 1520px;padding-left: 20px;padding-right: 20px;}
    #pageBanner .banner_inner{padding: 30px 20px;}
}
@media (max-width: 1440px){}
@media (max-width: 1280px){
    #pageBanner .banner_tit{font-size: 20px;line-height: 30px;}
    #pageBanner .banner_desc_box{margin-top: 10px;}
    #pageBanner .banner_desc{font-size: 36px;line-height: 44px;}
}
@media (max-width: 1100px){
    #pageBanner .banner_wrap{height: 260px;}
}
@media (max-width: 600px){
    #pageBanner{padding-left: 20px;padding-right: 20px;}
    #pageBanner .banner_wrap{height: 240px;border-radius: 12px;}
    #pageBanner .banner_wrap::before{background-color: rgba(0, 0, 0, .4);}
    #pageBanner .banner_inner{padding: 24px 20px;}
    #pageBanner .banner_tit{font-size: 16px;line-height: 24px;}
    #pageBanner .banner_desc_box{margin-top: 8px;}
    #pageBanner .banner_desc{font-size: 26px;font-weight: 600;line-height: 34px;}
}
@media (max-width: 600px){
    #pageBanner .banner_desc{font-size: 24px;line-height: 30px;}
}
/* ============================================================== //E:Page Banner ============================================================== */
/* ============================================================== S:Sub Top ============================================================== */
#subTop{width: 100%;max-width: 1480px;padding-top: 40px;padding-bottom: 40px;padding-left: 40px;padding-right: 40px;margin: 0 auto;font-family: "Pretendard Variable", Pretendard, sans-serif;}
#subTop .top_inner{display: flex;align-items: center;justify-content: space-between;gap: 24px;flex-wrap: nowrap;}
#subTop .page_tit{font-size: 40px;font-weight: 500;line-height: 1;color: #333;letter-spacing: -0.54px;}

#subTop .breadcrumbs{flex: 0 0 auto;display: flex;align-items: center;flex-wrap: nowrap;gap: 4px;}
#subTop .breadcrumbs .crumbs_item{flex: 0 0 auto;}
#subTop .breadcrumbs .item_menu{display: block;line-height: 0;}
#subTop .breadcrumbs .menu_name{display: block;font-size: 16px;font-weight: 500;line-height: 24px;color: #999;letter-spacing: -0.54px;transition: color .3s;}
#subTop .breadcrumbs .icon_crumbs_home{display: block;width: 24px;height: 24px;}
#subTop .breadcrumbs .icon_crumbs_home svg{width: 100%;height: 100%;}
#subTop .breadcrumbs .icon_crumbs_home svg path{fill: #999;transition: fill .3s;}
#subTop .breadcrumbs .icon_crumbs_arr{display: block;width: 24px;height: 24px;background-image: url('/resources/images/icon/icon_crumbs_arr.svg');background-repeat: no-repeat;background-size: cover;background-position: center;}

@media (hover: hover){
    #subTop .breadcrumbs .item_menu:hover .menu_name{color: #333;}
    #subTop .breadcrumbs .item_menu:hover .icon_crumbs_home svg path{fill: #333;}
}

@media (max-width: 1280px){
    #subTop{padding-top: 30px;padding-bottom: 30px;}
    #subTop .page_tit{font-size: 32px;}
}
@media (max-width: 1100px){}
@media (max-width: 600px){
    #subTop{padding-top: 20px;padding-bottom: 10px;padding-left: 20px;padding-right: 20px;}
    #subTop .page_tit{font-size: 20px;font-weight: 600;line-height: 30px;white-space: nowrap;}
    
    #subTop .breadcrumbs{gap: 2px;}
    #subTop .breadcrumbs .icon_crumbs_home{width: 20px;height: 20px;}
    #subTop .breadcrumbs .icon_crumbs_arr{width: 20px;height: 20px;}
    #subTop .breadcrumbs .menu_name{font-size: 14px;line-height: 20px;}
}

@media (max-width: 480px){
    #subTop .top_inner{gap: 8px;}
    #subTop .page_tit{font-size: 18px;line-height: 26px;}
    #subTop .breadcrumbs{gap: 0;}
    #subTop .breadcrumbs .icon_crumbs_home{width: 18px;height: 18px;}
    #subTop .breadcrumbs .icon_crumbs_arr{width: 18px;height: 18px;}
    #subTop .breadcrumbs .menu_name{font-size: 12px;line-height: 18px;}
}
@media (max-width: 374px){
    #subTop .page_tit{font-size: 16px;line-height: 24px;}
}
/* ============================================================== //E:Sub Top ============================================================== */
/* ============================================================== S:Page Cate ============================================================== */
#pageCate{width: 100%;max-width: 1480px;padding-top: 40px;padding-bottom: 40px;padding-left: 40px;padding-right: 40px;margin: 0 auto;font-family: "Pretendard Variable", Pretendard, sans-serif;}
#pageCate .cate_list{display: flex;align-items: center;flex-wrap: nowrap;gap: 60px;}
#pageCate .cate_item{flex: 0 0 auto;}
#pageCate .cate_link{display: block;padding: 0 10px 16px;font-size: 26px;font-weight: 500;line-height: 1;color: #666;letter-spacing: -0.54px;position: relative;transition: color .3s}
#pageCate #bo_cate_on.cate_link,
#pageCate .cate_item.active .cate_link{font-weight: 700;color: #2D4390;}
#pageCate .cate_link::after{content: '';display: block;width: 0;height: 3px;background-color: #666;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);transition: background-color .3s, width .3s;}
#pageCate .cate_item.active .cate_link::after{width: 100%;background-color: #2D4390;}

@media (hover: hover){
    #pageCate .cate_link:hover{color: #2D4390;}
}

@media (max-width: 1280px){
    #pageCate{padding-top: 30px;padding-bottom: 30px;}
    #pageCate .cate_list{gap: 40px;}
    #pageCate .cate_link{font-size: 24px;padding: 0 10px 12px;}
}
@media (max-width: 1100px){}
@media (max-width: 600px){
    #pageCate{padding-top: 24px;padding-bottom: 16px;padding-left: 20px;padding-right: 20px;}
    #pageCate .cate_list{gap: 32px;overflow: hidden;overflow-x: auto;}
    #pageCate .cate_list::-webkit-scrollbar{display: none;}
    #pageCate .cate_link{padding: 0 0 10px;font-size: 16px;line-height: 1;}
    #pageCate .cate_link::after{height: 2px;}
}

@media (max-width: 375px){
    #pageCate .cate_list{gap: 24px;}
}
/* ============================================================== //E:Page Cate ============================================================== */