@charset "utf-8";
@import url("../css/sub_notice.css?20251205");
@import url("../css/sub_accordian.css?20240610");
@import url("../css/sub_training.css?20251208");
@import url("../css/sub_lecture_room.css?20251205");
@import url("../css/sub_social.css?20240610");
@import url("../css/sub_mystudy.css?20240610"); /*ysjung add*/

/* background, snb*/
section.sub{position: relative;min-height:900px;padding-bottom:100px;background-position: 0px 0px;background-repeat: repeat-x;font-family: 'G-sans', "sans-serif";}
section.sub .snb{position: relative;width: 240px;min-height: 500px;height: 100%;}
/* snb title, snb list */
section.sub .snb h2, section.sub .snb ul{border-radius: 16px;}
section.sub .snb h2{cursor:default;overflow: hidden;position: absolute;top: 50px; left: 0; right: 0;;width: 100%; height: 120px;color: #fff;font-weight: 500;text-align: center;line-height: 110px;font-size: 1.688rem;}
section.sub .snb ul{position:absolute;top:143px;right: 0; left: 0;z-index: 2;padding: 10px 10px 22px;background-color: #fff;border: 1px solid #e8e8e8;border-top: transparent;}
section.sub .snb ul li a{display: block;padding: 0 20px 0 10px;font-size: 0.938rem;border-bottom: 1px solid #e8e8e8; line-height: 49px;}
section.sub .snb ul li a.active{background-position: top 50% right 10px;background-repeat: no-repeat;}

/* content_wrap */
section.sub .content_wrap{position: relative;top:0; right: 0; left: 0;width:calc(100% - 240px);min-height: 500px;height: 100%;padding:0 0 0 65px;;}
section.sub .content_wrap .sub_con_title{position: relative;width: 100%; height: 160px;}
section.sub .content_wrap .sub_con_title .title{position:absolute;bottom: 30px;left:0;}
section.sub .content_wrap .sub_con_title .title h3{font-size: 1.75rem;font-weight: 500;margin-bottom: 20px;cursor:default}
section.sub .content_wrap .sub_con_title .title .self_nav{width: auto;line-height: 20px}
section.sub .content_wrap .sub_con_title .title .self_nav li{cursor:default;float: left;margin-right: 15px;font-size:14px;color: #777;}
section.sub .content_wrap .sub_con_title .title .self_nav li::after{content: url(../image/sub/path_arr.png);display: inline-block;margin-left: 15px;}
section.sub .content_wrap .sub_con_title .title .self_nav li:last-of-type:after{display: none;}
/* content title */
section.sub .content_wrap .sub_con_title .icon_wrap{position: absolute;right: 0; bottom: 30px;}
section.sub .content_wrap .sub_con_title .icon_wrap .share_wrap{float: left;overflow: hidden;border-radius: 30px;}
section.sub .content_wrap .sub_con_title .icon_wrap .hidden_btn{float: left;margin-right: -270px;transition: .3s;}
section.sub .content_wrap .sub_con_title .icon_wrap .hidden_btn.active{margin-right: 0;}

section.sub .content_wrap .sub_con_title .icon_wrap a{float: left;width:35px; border-radius: 50%;height: 35px;margin-left: 10px;background-position: 50% 50%; background-repeat: no-repeat;;}
/* content title icon */
section.sub .content_wrap .sub_con_title .icon_wrap a.print{background-image: url(../image/sub/icon_print.png);}
section.sub .content_wrap .sub_con_title .icon_wrap a.share{background-image: url(../image/sub/icon_share.png);}
section.sub .content_wrap .sub_con_title .icon_wrap a.close{background-image: url(../image/sub/icon_close.png);background-color: #d7d7d7;}
section.sub .content_wrap .sub_con_title .icon_wrap a.facebook{background-image: url(../image/sub/sns_icon_facebook.png);}
section.sub .content_wrap .sub_con_title .icon_wrap a.twitter{background-image: url(../image/sub/sns_icon_twitter.png);}
section.sub .content_wrap .sub_con_title .icon_wrap a.blog{background-image: url(../image/sub/sns_icon_blog.png);}
section.sub .content_wrap .sub_con_title .icon_wrap a.band { background-image: url(../image/sub/sns_icon_band.png); }
section.sub .content_wrap .sub_con_title .icon_wrap a.band > a{margin-left:0;}
section.sub .content_wrap .sub_con_title .icon_wrap a.band img{display:none !important;}
section.sub .content_wrap .sub_con_title .icon_wrap a.kakaostory{background-image: url(../image/sub/sns_icon_kakaostory.png);}
section.sub .content_wrap .sub_con_title .icon_wrap a.kakaotalk{background-image: url(../image/sub/sns_icon_kakaotalk.png);}

/* sub_con */
section.sub .content_wrap .sub_con{padding-top: 50px;font-family: 'N-sans', "sans-serif";}
.txt_wrap{padding: 30px;}

/* sitemap */
section.sub .content_wrap .sub_con .sub_sitemap_title {font-family: 'G-sans', "sans-serif"; font-size: 1.375rem; font-weight: 500; margin-bottom: 30px;}
section.sub .content_wrap .sub_con .sub_sitemap ul { display: flex; flex-wrap: wrap; flex-direction: row; margin-bottom: 60px;}
section.sub .content_wrap .sub_con .sub_sitemap ul li {display:inline-flex; width: 18%; min-width: 105px; margin-right:18px ; margin-bottom: 20px; font-size: 1.125rem;}
section.sub .content_wrap .sub_con .sub_sitemap .btn_sitemap { width:100%; height: 50px; line-height: 50px; border: 1px solid #e8e8e8; text-align: center;border-radius: 5px;}


/*  css 분리 후 common 누락 내용 */
/* class */
.alignbottom{vertical-align: bottom;}
.aligntop{vertical-align: top;}
.alignmiddle{vertical-align: middle;}

/* width */
.w20{width: 20px!important;}
.w30{width: 30px!important;}
.w40{width: 40px!important;}
.w50{width: 50px!important;}
.w60{width: 60px!important;}
.w80{width: 80px!important;}
.w90{width: 90px!important;}
.w100{width: 100px!important;}
.w400{width: 400px!important;}
.w450{width: 450px!important;}
.w500{width: 500px!important;}
.w600{width: 600px!important;}
.w700{width: 700px!important;}
.w800{width: 800px!important;}
.w900{width: 900px!important;}
.w1000{width: 1000px!important;}
.w1200{width: 1200px!important;}
.wauto{width: auto!important;}
.auto_size .wfull{width: calc(100% - 160px)!important;}
.wfull{width: calc(100% - 130px)!important;}
.widthfull{width:100%!important;}
.wfull-w85{width: calc(100% - 85px)!important;}
.minwauto{min-width:auto!important;}
.minw300{min-width:300px!important;}
/* height */'
.h30{height: 30px!important;}
.h60{height: 60px!important;}
.h80{height: 80px!important;}
.h90{height: 90px!important;}
.h100{height: 100px!important;}
.h120{height: 120px!important;}
.h150{height: 150px!important;}
.h160{height: 160px!important;}
.h170{height: 170px!important;}
.h180{height: 180px!important;}
.h200{height: 200px!important;}
.h300{height: 300px!important;}
.h380{height: 380px!important;}
.h400{height: 400px!important;}
.h500{height: 500px!important;}
.h1000{height: 1000px!important;}
.hauto{height: auto!important;}
.minhauto{min-height:auto!important;}
/* btn */
.bullet_title_type_02{margin-bottom: 20px;line-height: 1;font-size: 24px;font-weight: bold;padding-left: 30px;background: url(../image/sub/bullet_title_type_02.png) left 0 bottom 0 no-repeat;}
.btn_back{cursor:pointer;display: inline-block;font-size: 14px;vertical-align: middle;padding: 0 16px 0 30px;line-height: 30px;color: #3f66b1;border-radius: 8px;border: 1px solid #d9e4f8;;background-image: url(../image/common/btn_back_list.png) ;background-position: left 16px top 55%;background-repeat: no-repeat;;background-color: #eaf0fc;;}
.btn_back_txt{cursor:pointer;background-position: left 6px top 50%;background-image: url(../image/header/btn_prev_page.png);background-repeat: no-repeat;padding-left: 30px;font-size: 18px;display: inline-block;line-height: 30px;}
.btn_basic_round{cursor:pointer;margin-right:6px;display: inline-block;vertical-align: middle;width: auto;line-height: 32px;padding: 0 10px;border-radius: 8px;color: #fff;font-size: 14px;background-color: #1a54cb;}
.btn_basic_round:last-of-type{margin-right:0;}
.btn_basic_round.white{background-color: #fff;color: #666;border: 1px solid #666;}
.btn_review{cursor:pointer;display: inline-block;vertical-align: middle;min-width: 110px;height: 35px; line-height: 35px; padding: 0 10px;text-align: center;font-size: 13px;color: #fff;border-radius: 6px; background-color:#003964 ;}
/* color */
.fc_mint{color: #40c3b2!important;font-style: normal;;text-decoration: none;}
.fc_333{color: #333!important;font-style: normal;text-decoration: none;}
.bg_fafafc{background-color: #fafafc;}
/* font */
.bullet_title_type_02{margin-bottom: 20px;line-height: 1;font-size: 24px;font-weight: bold;padding-left: 30px;background: url(../image/sub/bullet_title_type_02.png) left 0 bottom 0 no-repeat;}

/* select type 01 / 최소값 설정 */
.select_01{width: auto!important;min-width:140px!important}
.select_01 .selectric-wrapper{width:100%!important}
.select_01 .selectric-wrapper .selectric{width:100%!important}
.select_01.letter02{min-width:100px!important}
.select_01.letter03{min-width:110px!important}
.select_01.letter04{min-width:120px!important}
.select_01.letter05{min-width:130px!important}
.select_01.letter06{min-width:140px!important}
.select_01.letter07{min-width:150px!important}
.select_01.letter08{min-width:160px!important}
.select_01.letter10{min-width:180px!important}
/* select scroll */
.btn_box02{display:inline-block}
.select_01 .selectric-items .selectric-scroll{max-height: 200px!important;overflow-y: auto!important;}
.detail_info table th{font-weight:normal;}

/* media */
@media screen and (max-width: 820px) {
    section, section.sub{min-height: auto;background-color: #fff;padding: 0;padding: 0px;}

    /* background, snb*/
    section.sub .snb{position:absolute;top:0;}
    /* snb title, snb list *//* section */
    section.sub .snb h2{display: none;}
    section.sub .snb ul{position:absolute;top:12px;left: 52px;z-index: 9999999;padding: 0;background-color: transparent;border: 0}
    section.sub .snb ul li a{display: none;}
    section.sub .snb ul li a.active{display: block;padding: 0;;position: fixed;top: 13px;color: #2b4173!important;font-size: 20px;font-family: 'N-sans','san-serif';border-bottom: 0!important;background-image:none!important;font-weight: bold;}

    /* section.sub .snb{display: none;} */

    section.sub .content_wrap{width: 100%;padding-left: 0;padding: 0;}
    section.sub .content_wrap .sub_con{padding:10px 15px 70px;min-height:700px}
    section.sub .content_wrap .sub_con.popup_con{padding:10px 15px 70px;min-height:auto}
    section.sub .content_wrap .sub_con.padding{padding:0px;padding-bottom:70px}
   /*  section.sub .content_wrap .sub_con_title{display: none;} */
   /*  section.sub .content_wrap .sub_con{padding: 10px 15px 70px;} */
   /*  section.sub .content_wrap .sub_con.padding{padding: 0px;} */

    .txt_wrap{padding: 10px;}

     /* sitemap */
     section.sub .content_wrap .sub_con .sub_sitemap_title {font-family: 'G-sans', "sans-serif"; font-size: 1rem; font-weight: 500; margin-top: 10px; margin-bottom: 15px;}
     section.sub .content_wrap .sub_con .sub_sitemap ul { display: flex; flex-wrap: wrap; flex-direction: row; margin-bottom: 20px;}
     section.sub .content_wrap .sub_con .sub_sitemap ul li {display:inline-flex; width: 18.3%; min-width: 100px; margin-right:10px ; margin-bottom: 10px; font-size: 0.875rem;}
     section.sub .content_wrap .sub_con .sub_sitemap .btn_sitemap { width:100%; height: 35px; line-height: 35px; border: 1px solid #e8e8e8; text-align: center;border-radius: 5px;}

    /* mob_000 */
    .mob_p10{padding: 10px;}
    .mob_p15{padding: 15px;}
    .mob_m15{margin:0 15px;width:auto}
    .mob_mt10{margin-top: 10px;}
    .mob_pr0{padding-right: 0px;}
    .gray_round_box{padding: 10px 20px;}
	.btn_box02{display:block}

}

/* media */
@media screen and (max-width: 800px) {
	 .templete_blue section.sub{background-image:none!important}
}


/* 나의연수 메뉴 관련 templete.css 추가내용 */
/* 기본 버튼 색상 */
.templete_blue .btn_basic_round{background-color: #1a54cb!important;}
.templete_green .btn_basic_round,
.templete_green .sub_list_card_wrap_2 .btn_area > a,
.templete_green .custom_checkbox2 input[type="checkbox"]:checked + span,
.templete_green .sub_list_wrap .sub_list_box.list ul .sub_list_card_wrap_2 .btn_area > a.btn_learning_apply{background-color: #11a24c!important;}
.templete_red .btn_basic_round,
.templete_red .sub_list_card_wrap_2 .btn_area > a,
.templete_red .custom_checkbox2 input[type="checkbox"]:checked + span,
.templete_red .sub_list_wrap .sub_list_box.list ul .sub_list_card_wrap_2 .btn_area > a.btn_learning_apply{background-color: #c31b2b!important;}
.templete_yellow .btn_basic_round,
.templete_yellow .sub_list_card_wrap_2 .btn_area > a,
.templete_yellow .custom_checkbox2 input[type="checkbox"]:checked + span,
.templete_yellow .sub_list_wrap .sub_list_box.list ul .sub_list_card_wrap_2 .btn_area > a.btn_learning_apply{background-color: #dc8d0f!important;}
/* 검색버튼 */
.templete_red .search_box_wrap_02 .search_box .btn_search{background-color: #c31b2b!important;border-color:#c31b2b!important}
.templete_green .search_box_wrap_02 .search_box .btn_search{background-color: #11a24c!important;border-color:#11a24c!important}
.templete_yellow .search_box_wrap_02 .search_box .btn_search{background-color: #dc8d0f!important;border-color:#dc8d0f!important}
/* 회색버튼 */
.templete_green .sub_list_box.card .sub_list_card_wrap_2 .btn_area .btn_learning_apply{background-color: #588a6c!important;}
.templete_red .sub_list_box.card .sub_list_card_wrap_2 .btn_area .btn_learning_apply{background-color: #8a5b63!important;}
.templete_yellow .sub_list_box.card .sub_list_card_wrap_2 .btn_area .btn_learning_apply{background-color: #a57d3b!important;}
/* 흰색버튼 */
.templete_green .sub_list_wrap .sub_list_box.list ul .sub_list_card_wrap_2 .btn_area > a.btn_learning_detail{color:#11a24c;border-color:#11a24c;background-color:#fff!important;}
.templete_red .sub_list_wrap .sub_list_box.list ul .sub_list_card_wrap_2 .btn_area > a.btn_learning_detail{color:#c31b2b;border-color:#c31b2b;background-color:#fff!important;}
.templete_yellow .sub_list_wrap .sub_list_box.list ul .sub_list_card_wrap_2 .btn_area > a.btn_learning_detail{color:#dc8d0f;border-color:#dc8d0f;background-color:#fff!important;}
/* 선색상 */
.templete_blue .search_box_wrap_02 .search_box .text{border-color: #1a54cb!important;}
.templete_green .search_box_wrap_02 .search_box .text{border-color: #11a24c!important;}
.templete_red .search_box_wrap_02 .search_box .text{border-color: #c31b2b!important;}
.templete_yellow .search_box_wrap_02 .search_box .text{border-color: #dc8d0f!important;}
/* 박스 연한 배경 색상 */
.templete_green .search_box_wrap_02,
.templete_green .search_box_wrap.type_01,
.templete_green .search_detail_box{background-color:#f6faf8;}
.templete_red .search_box_wrap_02,
.templete_red .search_box_wrap.type_01,
.templete_red .search_detail_box{background-color:#fbf8f9;}
.templete_yellow .search_box_wrap_02,
.templete_yellow .search_box_wrap.type_01,
.templete_yellow .search_detail_box{background-color:#fcfaf7;}

/* filter */
.templete_green .list_filter li a.on,
.templete_green .btn_list.on,
.templete_green .btn_card.on{filter:hue-rotate(270deg)}
.templete_red .list_filter li a.on,
.templete_red .btn_list.on,
.templete_red .btn_card.on{filter:hue-rotate(110deg)}
.templete_yellow .list_filter li a.on,
.templete_yellow .btn_list.on,
.templete_yellow .btn_card.on{filter:hue-rotate(175deg)}

/* filter - 이수증 */
.templete_green .trng_text_wrap{filter:hue-rotate(250deg)}
.templete_red .trng_text_wrap{filter:hue-rotate(125deg)}
.templete_yellow .trng_text_wrap{filter:hue-rotate(190deg)}
.templete_yellow .trng_text_wrap .fc_mint{color:#40C3EC!important}

section.sub .snb ul li a{padding:13px 20px 13px 10px; line-height:normal;}

/*수강신청 검색*/
.search_box_wrap_02 .search_bar{display:flex; justify-content:center; align-items:center;}
.search_box_wrap_02 .input_bar{display:flex; justify-content:space-between; align-items:center; width:570px; height:70px; border:2px solid #1a54cb; border-radius:8px;}
.search_box_wrap_02 .input_wrap{display:flex; justify-content:space-between; align-items:center; width:calc(100% - 65px); height:100%; padding:5px 10px 5px 5px; border-radius:8px; outline-offset:-5px; box-sizing:border-box;}
.search_box_wrap_02 .input_wrap.focus{outline:2px dashed #bbb;}
.search_box_wrap_02 .input_wrap.focus:has(input:-webkit-autofill){outline:none;}
.search_box_wrap_02 .search_box .text{width:calc(100% - 30px); height:100%; padding:0 0 0 15px; border:0; border-radius:0;}
.search_box_wrap_02 .search_box .text::placeholder{color:#bababa; font-size:17px;}
.search_box_wrap_02 .search_box .text:focus,
.search_box_wrap_02 .search_box .text:focus-visible{outline:none;}
.search_box_wrap_02 .input_wrap .search_delete{display:none; position:relative; background:none; cursor:pointer;}
.search_box_wrap_02 .input_wrap .search_delete.on{display:block;}
.search_box_wrap_02 .input_wrap .search_delete[disabled]{opacity:0; pointer-events:none;}
.search_box_wrap_02 .input_wrap .search_delete span{display:block; position:relative; width:20px; height:20px; border-radius:50%; background:#ddd; text-indent:100%; overflow:hidden; white-space:nowrap;}
.search_box_wrap_02 .input_wrap .search_delete span:before{content:''; display:block; position:absolute; left:50%; top:50%; width:8px; height:8px; margin-top:-4px; margin-left:-4px; background:url(/resource/image/common/ico_search_delete.png) no-repeat; background-size:100%;}
.search_box_wrap_02 .input_wrap input:-webkit-autofill{background-color:#fff !important; -webkit-box-shadow:0 0 0px 28px #fff inset !important; box-shadow:0 0 0px 28px #fff inset !important;}

@media screen and (max-width:820px){
	.search_box_wrap_02{margin-bottom:0;}
	.search_box_wrap_02 .search_box{width:100%;}
	.search_box_wrap_02 .search_box::after{display:none;}
	.search_box_wrap_02 .input_bar{width:calc(100% - 90px); height:45px; border:1px solid #2b4173;}
	.search_box_wrap_02 .input_wrap{width:calc(100% - 60px);}
	.search_box_wrap_02 .input_wrap .text{padding:0 0 0 10px; font-size:16px;}
	.search_box_wrap_02 .input_wrap .text::placeholder{font-size:16px;}
}
@media screen and (max-width:500px){
	.search_box_wrap_02 .input_wrap .text{font-size:15px;}
	.search_box_wrap_02 .input_wrap .text::placeholder{font-size:0;}
}