
/*게시판*/
.board {width: 100%;  table-layout: fixed; text-align: center; border-top:2px solid #333;}
.board td{padding: 15px 5px; border-bottom: 1px solid #e1e1e1; color: #555; font-size: .9rem;}
.board .td_tit {text-align: left !important; color: #333; font-size: 1rem; width: calc(100% - 100px);float: left;  }
.board .td_tit a{display: inline-block; font-size: 1.2rem; font-weight: 500; max-width: 100%;}
.board .td_tit em{color: #4483dc; font-style: normal; display: block; font-weight: 600;}
.board .td_num .mark{display: inline-block;  color: #fff; background: #1a2436; border-radius: 50px; border: 0; padding: 1px 10px; font-size: .8rem; font-weight: 500;}
.board thead{ position: absolute;top: 0;left: 0;width: 1px;height: 1px;overflow: hidden;}
.board tbody tr{position: relative;overflow: hidden;display: block; padding: 30px 0; width: 100%;border-bottom: 1px solid #eaeaea;float: left;}
.board td{border-bottom: 0; padding: 0 7px; position: relative;}
.board td:before{content: ''; display: inline-block; width: 1px; height: 10px; background: #ddd; margin-right: 15px;}
.board td.td_num:before,.board td.td_tit:before,.board td.td_write:before, td.td_file:before, td.no_data:before{display: none;}
td.td_file .has_file:before{content: ''; display: inline-block; width: 1px; height: 11px; background: #ddd; position: absolute; left: 5px; top:6px;}
.board .td_num{float: left; width: 100px;transform: translateY(17px);}
.board .td_write {padding-left: 108px;}
.board .td_file {padding: 2px 6px 2px 15px;}
.board .td_edit {position: absolute; right: 0; top: 50%; transform: translateY(-50%)}
.board .td_edit:before{display: none;}
.board .td_edit:hover span{text-decoration: underline;}
.board td.no_data{min-width: 100vw;}
.has_file {display: inline-block;width: 20px;height: 20px; vertical-align: middle; background: url('/resources/images/layout/board/has_file.png') center center no-repeat;}
.board td.no_data{ padding: 100px 0;}
.board_category{padding-bottom: 1rem;}
.board_category ul{display: flex; margin-left: -10px; margin-right: -10px;}
.board_category ul li{padding: 0 10px; position: relative;}
.board_category ul li a{ color: #777; font-weight: 300;}
.board_category ul li.active a{color: #000; font-weight: 600;}
.board_category ul li+li:before{content: ''; width: 1px; height: 13px; background: #ddd; position: absolute; left: 0; top: 50%; transform: translateY(-50%)}

/*게시판 상세*/
.board_view{border-top: 2px solid #333;}
.board_view .tit{ padding: 25px 15px; border-bottom: 1px solid #dedede;}
.board_view .tit small{font-weight: 600; font-size: .95rem; display: inline-block; margin-bottom: .5rem;}
.board_view .tit em{font-style: normal; color: #A09690; font-size: 1rem;}
.board_view .tit p{font-size: 1.5rem; font-weight:500; color: #333;}
.board_view .tit .info{padding: 1rem 0 0;}
.board_view .tit .info span{font-size: .95rem; position: relative; display: inline-block;  color: #777; font-weight: 300;}
.board_view .tit .info span + span:before{content: '';display: inline-block; width: 1px; height: 10px; background:#ADADAD;margin: 0 15px; vertical-align: middle;}
.view_files {background:#fcfcfc; padding: 30px 60px;   }
.view_files a:hover {text-decoration: underline;}
.view_files li {padding: 3px 0 3px 25px; font-size: .9rem; position: relative;}
.view_files li:before{ content: ''; position: absolute; top: 7px; left: 0; width: 15px; height: 15px; background: url("/resources/images/layout/board/ico_board_file_sm.png") center no-repeat;}
.view_files li {color: #555;}
.board_view .view_cont {padding: 50px 30px; line-height: 1.7;border-bottom: 1px solid #dedede;}
.board_view .view_cont img {max-width: 100%; height: auto!important;}
.view_btn{text-align: right; margin-top: 30px;}
.view_btn .btn{display: inline-block; background: #e7ecf1; color: #4E5968; font-weight: 500; border-radius: 5px;}

/*갤러리형*/
.board_gallery ul {display: flex; flex-wrap: wrap; gap:1.25rem;}
.board_gallery ul li {width: calc(100% / 3 - 0.875rem);}
.board_gallery ul li a{position: relative; display: inline-block; width: 100%; height: 100%;transition: all 0.3s;}
.board_gallery ul li a::after{content: ""; position: absolute; bottom:0; left:0; width: 0; height: 2px; background-color: #11141c; transition: all .3s;}
.board_gallery ul li:hover a::after{width: 100%;}
.board_gallery .thumb {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}
.board_gallery .thumb-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.board_gallery .thumb-img img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.board_gallery .top {position: relative; padding: 15px 0;border-bottom: 2px solid #ddd;}
.board_gallery .top p.tit{width: 100%; font-size: 1.18rem; color: #333; font-weight:600; padding: 0 0 5px; min-height: 69px;}
.board_gallery .top .info span{font-size: .9rem; position: relative; display: inline-block;  color: #666; font-weight: 300;}
.board_gallery .top .info span + span:before{content: '';display: inline-block; width: 1px; height: 10px; background:#ADADAD;margin: 0 15px; vertical-align: middle;}

/*글쓰기*/
.page_noti{background: #f7f8f9; padding: 30px; margin-bottom: 20px; }
.page_noti strong{ font-size: 1.3rem; margin-bottom: 10px; display: block;}
.page_noti p{font-size: 1rem; line-height: 1.5rem; color: #444;}
.board_write{border-top: 2px solid #333;}
.board_write li {display: flex; align-items: center; border-bottom: 1px solid #e8e8e8;}
.board_write .w_category .select {width: 250px; height: 50px;}
.board_write .w_category .select select{border: 1px solid #eaeaea;}
.board_write .w_tit input{width: 100%;}
.board_write .tit {width: 160px;  font-size: 1rem; font-weight: 500; padding: 0 0 0 20px; border-bottom: 0; text-align: left;}
.board_write .txt {width: calc(100% - 160px); padding: 20px; border-left: 1px solid #e8e8e8;}
.board_write .txt.radio {display: flex; border-left: none !important; padding: 0px !important;}
.board_write .txt.radio .checkbox:not(:last-child) {margin-right: 20px;}
.board_write .w_edit {padding: 20px 0; display: block;}
.board_write input{border: 1px solid #cdcdcd; height: 50px; padding: 5px 20px; line-height: 50px; font-size: 1rem; width: 100%;}
.board_write input:focus {border: 1px solid #333;}
.board_write textarea{border: 1px solid #cdcdcd; resize: none; min-height: 50px; padding: 0px 20px; line-height: 50px; font-size: 1rem; width: 100%;}
.board_write textarea:focus {border: 1px solid #333;}
.input_desc{color: #777; font-weight: 300; font-size: .95rem; margin-bottom: 5px;}
.input_desc span{color: #E94E1B;}
.up_file_list li{border: 0; display: block; position: relative; margin: 5px 0;}
.up_file_list .del{position: absolute; right: 0; top:4px; display: inline-block; font-size: 0; width: 15px; height: 15px; background: url("/resources/images/layout/board/ico_delete.png") no-repeat;}
.btn_file {background: #35445b; color: #fff; font-size: .9rem; padding: 10px 20px; display: inline-block; margin-top: 10px;}

/*체크박스*/
.checkbox {display: inline-block;position: relative;font-size: 16px;line-height: 30px;}
.checkbox_input {position: absolute;top: 4px;left: 0;width: 20px;height: 20px;opacity: 0;z-index: 0;}
.checkbox_label {display: block;padding: 0 0 0 30px;cursor: pointer;}
.checkbox_label:before {content: '';position: absolute;top: 4px;left: 0;width: 20px;height: 20px;background-color: transparent;border: 1px solid #a6a6a6;z-index: 1;-webkit-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-property: background-color, border-color;transition-property: background-color, border-color;}
.checkbox_label:after {content: '';position: absolute;top: 8px;left: 7px;width: 5px;height: 9px;border-bottom: 2px solid transparent;border-right: 2px solid transparent;-webkit-transform: rotate(45deg);transform: rotate(45deg);z-index: 2;-webkit-transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);}
.checkbox_input:checked + .checkbox_label:before {background-color: #0b4391;border-color: #0b4391;}
.checkbox_input:checked + .checkbox_label:after {border-color: #fff;}


/* search_box */
.search_box{width:100%;box-sizing:border-box;text-align: center;margin-bottom: 30px;}
.search_box > div{display:inline-block;}
.search_box input{width: 350px;border:1px solid #dbdbdb;box-sizing:border-box; padding:10px 50px 10px 20px;font-size: 0.9444rem; font-weight: 300; border-radius: 50px;}
.search_box input::placeholder {color:#999;}
.search_box input::-webkit-input-placeholder {color:#999;}
.search_box input:-ms-input-placeholder {color:#999;}
.search_box .btn_sear{color:#fff; display:inline-block; background: #1c2232;padding: 9px 30px;vertical-align:middle;min-height: 43px; border-radius:50px; line-height: 1.8;box-sizing: border-box;margin-left: 4px;color:#fff;font-size: 0.9444rem;}
.search_box .btn_sear:hover{background: #222; transition: all .3s ease;}
.search_box .filter {display: flex; align-items: flex-end; justify-content: space-between;}
.search_box .filter .count span{color: #0b4391; font-weight: 700;}
.select{position: relative;}
.select select{height: 100%;width: 100%;font-size: 1rem;background: #fff;padding: 10px 50px 10px 20px;border: 1px solid #dbdbdb;cursor: pointer;transition: all 0.3s; color:#555; -webkit-text-fill-color: #555; border-radius: 50px;}
.select select:focus{border: 1px solid #333;}
.select:before{content: '';width: 1px;height: 20px;background: #bbb;right: 50px;position: absolute;top: 50%;transform: translateY(-50%);}
.select:after{content: ''; width: 20px; height: 20px; position: absolute; right: 16px;  top: 50%; transform: translateY(-50%);background: url("/resources/images/layout/board/ico_select.png") center no-repeat;}
.select+.select {margin-left: 5px;}
.search_group {display: flex;}
.search_group .select{margin-right: 5px; min-width: 140px;}
.select.type2 {width: 300px; }
.select.type2 select{border: 1px solid #ddd; height: 50px;}
.select.type2:before {background: #ddd;}

/*비밀글*/
.secret_box{ text-align: center; padding: 50px 0; height: 100%; background: #f9f9f9;display: flex; align-items: center; justify-content: center;}
.secret_box .box_inner{width: 100%;}
.secret_box h4{font-size: 1.5rem; margin-bottom: 20px;}
.secret_box p{font-weight:400;   padding-bottom: 30px;}
.secret_box input[type="password"]{border:1px solid #ddd; padding: 15px; height: 55px; background:#fff; width:20%; text-align: center;}
.secret_box .btn{display: inline-block; height: 55px; background: #0b4391; color: #fff; padding: 14px 30px; margin-left: 10px; }
.secret_box .box_inner > div{display: flex; justify-content: center;}




/*pagination*/
.paging_box{text-align: center;margin:20px 0;}
.paging_box div.paging{height: auto;}
.paging_box div.paging a{font-weight: 400;display:inline-block;width: 30px;height: 30px;font-size: .95rem; border-radius: 5px; color:#888;margin: 0 3px;line-height: 30px;vertical-align: top;}
.paging_box div.paging a.active {color: #fff; background: #1c2232;}
.paging_box div.paging a:hover{transition: all .2s ease;}
.paging_box div.paging .prebtn a:nth-child(1){background:url('/resources/images/layout/board/ico_page_prev_all.svg') no-repeat center; border: 1px solid #dedede;}
.paging_box div.paging .prebtn a:nth-child(2){background:url('/resources/images/layout/board/ico_page_prev.svg') no-repeat center; border: 1px solid #dedede;}
.paging_box div.paging .nextbtn a:nth-child(1){background:url('/resources/images/layout/board/ico_page_next.svg') no-repeat center; border: 1px solid #dedede;}
.paging_box div.paging .nextbtn a:nth-child(2){background:url('/resources/images/layout/board/ico_page_next_all.svg') no-repeat center;border: 1px solid #dedede; }

/*qna*/
.qna_answer {padding: 30px 15px; border-bottom: 1px solid #e5e5e5;}
.qna_answer > div:first-child {display: inline-block; width: 25px;vertical-align: top;}
.qna_answer .answer_cont {display: inline-block;width: calc(100% - 55px); padding-left: 10px;}
.re_txt {font-size: 12px;margin-left: 5px; padding: 3px 8px;border-radius: 3px;color: #fff;border: 1px solid #4d6bab; background: #4d6bab; display: inline-block;}
.answer_icon {display: inline-block; position: relative;}
.answer_icon:after {content: 'A'; display: inline-block; width: 25px; height: 25px; background: #0b4391; color: #fff; text-align: center; border-radius: 50px; font-size: 12px; line-height: 2;}
.qna_answer .view_files {margin-top: 30px; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede;}

/*program*/
.program_tab{ width: 500px; margin: 0 auto 2rem; }
.program_tab ul{display: flex; width: 100%; flex-wrap: wrap; justify-content: center; border-radius: 50px;background: #f7f7f7;}
.program_tab li{text-align: center; position: relative; padding: 0 5px;flex: 1 1 auto;}
.program_tab li a{display: inline-block; position:relative; width: 100%; font-size: 1rem; border-radius: 50px; padding:15px 0; color: #666; background: #f7f7f7;}
/*.program_tab li a:before{content: "";position: absolute;left: 0;top: 50%;transform: translateY(-55%);width: 0.9rem;height: 0.9rem;border-radius: 50%;background: #ddd;}*/
.program_tab li.active a{color: #0b4391;font-weight: 700; background: #fff; border: 1px solid #0b4391; box-shadow: 0 4px 5px rgba(80,135,245,.2); }
/*.program_tab li.active a:before{ background: #0C347C url("/images/layout/board/check.svg") center no-repeat;}*/

.program_list ul {border-top: 2px solid #333;}
.program_list ul li{display: flex; padding: 20px; align-items: center; font-size: .95rem; border-bottom: 1px solid #e5e5e5;}
.program_list ul li em{font-style: normal; display: block; padding-left: 20px; color: #777; font-weight: 500;}
.program_list ul li .date1 em{background: url("/resources/images/layout/board/ico_date1.svg") left center no-repeat;}
.program_list ul li .date2 em{background: url("/resources/images/layout/board/ico_date2.svg") left center no-repeat;}
.program_list ul li .capa em{background: url("/resources/images/layout/board/ico_capa.svg") left center no-repeat;}
.program_item .tit{width: 30%; text-align: left;}
.program_item .tit span{display: inline-block; color: #8fb7b6; border: 1px solid #8fb7b6; font-size: .85rem; padding: 0 10px; border-radius: 50px; margin-bottom: 3px;}
.program_item .tit strong{display: block; font-size: 1.1rem;}
.program_item .date1 {width: 15%;}
.program_item .date2 {width: 20%;}
.program_item > div {flex: 1 1 auto;}
.program_item > div:last-child {width: 5%; text-align: right;}
.program_item > div:last-child .btn{padding: .5rem 2rem .5rem 1rem; font-size: .9rem; border-radius: 5px; position: relative;}
.program_item > div:last-child .btn:after{content: ''; display: inline-block; width: 5px; height: 10px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url("/resources/images/layout/common/btn_arrow.svg") center no-repeat;  transition: all .3s;}
.program_item > div:last-child .btn:hover:after {right: 15px;}
.program_item > div span{padding-left: 20px;}
.program_list li.empty {justify-content: center; color: #666; flex-wrap: wrap;}
.program_list li.empty p {width: 100%; text-align: center; padding-top: 20px;}

/*강의평가 평가완료 텍스트, 연수과정 신청 승인 텍스트 */
.program_list .cmp_txt{font-size: .9rem;margin-left: 5px; padding: 0.5rem 1.5rem 0.5rem 1.5rem;border-radius: 5px;color: #fff;border: 1px solid #4d6bab; background: #4d6bab; display: inline-block;}
/*연수과정 신청 취소 / 승인 취소*/
.program_list .cancel_txt{font-size: .9rem;margin-left: 5px; padding: 0.5rem 1.5rem 0.5rem 1.5rem;border-radius: 5px;color: #ec4d4d;border: 1px solid #ec4d4d; background: #fff; display: inline-block;}
/*연수과정 신청 승인 전 */
.program_list .approve_before{font-size: .9rem;margin-left: 5px; padding: 0.5rem 1.5rem 0.5rem 1.5rem;border-radius: 5px;color: #4d6bab;border: 1px solid #4d6bab; background: #fff; display: inline-block;}


@media all and (max-width:1200px) {
    /*갤러리형*/
    .board_gallery ul li{width: calc(100% / 3)}
}
@media all and (max-width:992px){
    /*pagination*/
    .paging_box div.paging a{width: 25px;height: 25px;font-size: 13px;margin: 0 2px;line-height: 25px;}

    /*갤러리형*/
    .board_gallery ul li{width: calc(100% / 2)}
    .board_gallery .top p.tit {min-height: 60px;}

    /*program*/
    .program_list ul li{flex-wrap: wrap;}
    .program_item .tit{width: 100%; margin-bottom: 10px;}
    .program_item > div:last-child .btn:after{right: 15px;}
}

@media all and (max-width:768px) {
    /*게시판*/
    .board thead{ position: absolute;top: 0;left: 0;width: 1px;height: 1px;overflow: hidden;}
    .board tbody tr{position: relative;overflow: hidden;display: block; padding: 20px 0; width: 100%;border-bottom: 1px solid #eaeaea;float: left;}
    .board td{border-bottom: 0; padding: 0 7px; position: relative;}
    .board td:before{content: ''; display: inline-block; width: 1px; height: 10px; background: #ddd; margin-right: 15px;}
    .board td.td_num:before,.board td.td_tit:before,.board td.td_write:before, td.td_file:before, td.no_data:before{display: none;}
    td.td_file .has_file:before{content: ''; display: inline-block; width: 1px; height: 11px; background: #ddd; position: absolute; left: 5px; top:6px;}
    .board .td_num{float: left; width: 45px;}
    .board .td_num .mark {padding: 1px 5px;}
    .board .td_tit{ width: calc(100% - 45px);float: left; }
    .board .td_tit a {max-width: 100%;}
    .board .td_write {padding-left: 52px;}
    .board .td_file {padding: 2px 6px 2px 15px;}
    .board td.no_data{min-width: 100vw;}
    .board_btn{text-align: center;}

    /*search*/
    .search_box .filter {flex-wrap: wrap;}
    .search_box .filter .count {margin-bottom: 1rem;}
    .search_group{width: 100%;}
    .search_group .select {width: 30%;}
    .select.type2 {width: 100%;}
    .select.type2 select {height: auto;}

    /*게시판상세*/
    .board_view .tit{padding: 25px 10px;}
    .board_view .tit em {font-size: .9rem;}
    .board_view .tit p {font-size: 1.25rem;}
    .board_view .tit .info span {font-size: .85rem;}
    .board_view .tit .info span + span:before {margin: 0 8px;}
    .board_view .view_files{padding: 20px 10px;}
    .board_view .view_files li{font-size: .95rem;}
    .board_view .view_cont{padding: 50px 0; overflow-x: scroll;-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */}
    .board_view .view_cont::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
    .board_view .view_more li .icon{width: 50px;}
    .board_view .view_answer_tit {padding: 30px 20px;}
    .board_view .view_answer .txt{padding: 30px 20px }
    .board_view .view_more li.prev{padding: 20px 10px 20px 60px;}
    .board_view .view_more li.next{padding: 20px 60px 20px 10px; }
    .board_view .view_more li a span{font-size: .9rem;}
    .board_view .view_more li a p{font-size: .85rem;}
    .board_view .view_more li.prev .icon,.board_view .view_more li.next .icon{background-size: 10px auto;}
    .btn_area a{padding: 10px 30px; font-size: .95rem; }
    .view_btn {text-align: center;}

    /*비밀글*/
    .secret_box input[type="password"]{width: 40%;}

    /*글쓰기*/
    .page_noti{padding: 15px;}
    .page_noti strong{font-size: 1.1rem;}
    .board_write li{flex-wrap: wrap; padding: 15px;}
    .board_write .tit{width: 100%; font-size: 1rem; padding: 0; border-bottom: 0; text-align: left;}
    .board_write .txt{border-left: 0; padding: 10px 0 0; width: 100%;}
    .board_write .w_category .select {height: 40px; width: 100%;}
    .input_group input{height: 40px;}


    /*뉴스*/
    .board.news .board_filter {display: block;  width: 100%;}
    .board.news .board_filter.count{width: 100%; font-size: .9rem;}
    .board.news .board_filter .board_search {flex-wrap: wrap; width: 100%; margin-top: 5px;}
    .board.news .board_filter .board_search .select{width: 100%; height: 40px;}
    .board.news .board_filter .board_search .select_first{width: 100%; height: 40px; margin: 0 0 5px 0;}
    .board.news .board_filter .board_search .select select,.board_search .input_addition input{font-size: .9rem;}
    .board.news .board_filter .board_search .input_addition {width: 100%; height: 40px; margin-top: 5px; margin-left: 0;}
    .board.news .board_filter .board_search .input_addition .btn_search {height: 40px;}

    .board.news .board_list .list_m {display: flex;padding:20px 0;border-bottom:1px solid #ddd;justify-content: space-between;align-items: center;}
    .board.news .board_list .list_m span {display: block; text-align: left;}
    .board.news .board_list .list_m .title {max-width:75%; overflow: hidden;}
    .board.news .board_list .list_m .title a {display: block; text-align: left; margin-bottom:10px; font-size:1.3rem;}
    .board.news .board_list .list_m .inform {text-align: left;}
    .board.news .board_list .list_m .inform li {display: inline-block; border-bottom:0; padding-left:8px; color:#666;}
    .board.news .board_list .list_m .inform li:before {content: ""; display: inline-block; width:1px; height:12px; background: #ddd; margin-right:10px;}
    .board.news .board_list .list_m .inform li:first-child {padding-left:0;}
    .board.news .board_list .list_m .inform li:first-child:before {display: none;}
    .board.news .board_list .list_pc {display: none;}


    /*program*/
    .program_tab {width: 100%;}
    .program_tab li a{padding: 10px 0;}
    .program_list ul li{flex-wrap: wrap; padding: 20px 10px;}
    .program_item > div{width: 100% !important; margin-bottom: 5px;}
    .program_item > div:last-child{margin-bottom: 0;}
    .program_item > div:last-child .btn{width: 100%;}
    .program_item > div:last-child .btn:after{display: none;}

}


@media all and (max-width:566px) {
    /*search*/
    .search_group{flex-wrap: wrap;}
    .search_group .select {width: 100%; margin: 0 0 5px;}
    .search_box input{width: 100%; margin: 0 0 5px;}
    .search_box .btn_sear{width: 100%;  margin: 0;}

    /*갤러리형*/
    .board_gallery ul li{width: 100%;}

}
