@charset "utf-8";
/* *************************************************************************************
*
* 게시판 검색 공통
* 
* **************************************************************************************/
/*게시판 검색*/
[class*="board_search"] {margin-top: 3rem; margin-bottom: 3.5rem; padding: 2rem; background-color: #d0edfa; border-radius: var(--border-radius-base);}
[class*="board_search"] .search_select, [class*="board_search"] .search_inp {height: 5rem; padding: 1.5rem 3rem 1.5rem 2rem; border: 0; border-radius: var(--border-radius-30px); font-size: 1.8rem; line-height: 1;}
[class*="board_search"] .select_group {display: flex; gap: 1rem;}
[class*="board_search"] .search_select {width: 100%; min-width: 15rem; max-width: 15rem;}
[class*="board_search"] .search_select.mw30 {max-width: 30rem;}
[class*="board_search"] > form {display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;}
[class*="board_search"] .search_label {margin-right: 1.5rem; font-size: 1.8rem; font-weight: 500;}
[class*="board_search"] .inp_group {display: flex; flex: 1;}
[class*="board_search"] .search_inp {width: calc(100% - 16rem); min-width: 23.5rem;}
[class*="board_search"] .search_submit {width: 15rem; height: 5rem; margin-left: 1rem; background-color: var(--primary-point-color); color: #fff; border-radius: var(--border-radius-30px); font-size: 1.8rem; line-height: 1;}
[class*="board_search"] .search_submit > span {display: inline-block; padding-left: 2.2rem; background-image: url("/images/site/NGLMS/icon/search_icon.svg"); background-size: 1.7rem; background-position: left top; background-repeat: no-repeat;}
[class*="board_search"] .search_submit02{width: 12rem; height: 5rem; background-color: #404040; color:#fff; border-radius: var(--border-radius-30px); font-size: 1.8rem; line-height: 1;}
[class*="board_search"] .search_submit02 > span{display: inline-block; padding-left: 3rem; position: relative;}
[class*="board_search"] .search_submit02 > span::before{content:""; width: 2.4rem; height: 2.4rem; display: inline-block; background: url("/images/site/NGLMS/icon/search_icon02.png") no-repeat left top/contain; position: absolute; left:0; top:-3px;}

/*검색어 input 없을 때 Style*/
.board_search:not(:has(.inp_group)) > form {justify-content: right;}

/*총 게시물 수*/
.board_page_info {margin-bottom:1.5rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;}
.board_count {padding-left:1rem; font-size:1.7rem;}
.board_count strong {font-weight:400;}
.board_count span {color: var(--primary-point-color); font-weight:600;}

/*게시판 정렬 방식*/
.board_cate {display: flex; margin-left: auto; gap: 0.5rem 1rem;}
.board_cate > li > a {display: block; padding: 1rem 1.4rem; color: var(--primary-point-color); border: 1px solid var(--primary-point-color); border-radius: 0.8rem; font-weight: 500; line-height: 1;}
.board_cate > li > a.on {background-color: var(--primary-point-color); color: #fff;}

/* *************************************************************************************
*
* 테이블 공통
* 
* **************************************************************************************/
.scroll_table table {width: 100%;}
.respon_table {margin-top: 1.5rem; margin-bottom: 4rem;}
.respon_table .mobile {display: none;}
.board_basic {width: 100%; border-bottom: 1px solid var(--border-gray-color); font-variant-numeric: tabular-nums;}
.board_basic th {padding: 2rem 1rem; vertical-align: middle; font-size: 1.7rem; color: var(--primary-point-color); font-weight: 700; background-color: #bed8f5; word-break: keep-all;}
.board_basic tr.bg th{background-color: #FBFBFB;}
.board_basic th:first-child {border-radius: 1.5rem 0 0 0;}
.board_basic th:last-child {border-radius: 0 1.5rem 0 0;}
.board_basic tr {border-bottom: 1px solid var(--border-gray-color);}
.board_basic td {padding: 1.5rem 1rem; text-align: center; vertical-align: middle; word-break: keep-all;}
.board_basic td.tal {text-align: left;}
.board_basic td a:focus-visible {text-decoration: underline; text-underline-offset: 0.3rem;}
.board_basic .ta_r {text-align: right;}
.board_basic .bold {font-weight: 600;}
.board_basic .tit {text-align: left;}
.board_basic .tit > a {display: inline-block; width: 100%;}
.board_basic .tit > a .label_tag {display: inline-block; vertical-align: middle; margin-bottom: 0; margin-right: 0.5rem;}
.board_basic .tit > button {display: block; width: 100%; max-width: 68rem; padding: 0; text-align: left;}
.board_basic .tit .label_tag {margin-bottom: 0.5rem;}
.board_basic .sub_tit {display: block;}
.board_basic .label_notice {display: inline-block; padding: 0 1.5rem; min-width: 6rem; height: 3rem; line-height: 3rem; background-color: #d83158; color: #fff; border-radius: var(--border-radius-30px); font-weight: bold; text-align: center;}
.board_basic .teacher_thumb {position: relative; width: 9.5rem; height: 9.5rem; border: 1px solid var(--border-gray-color); border-radius: 3rem; overflow: hidden; margin: 0 auto 0.5rem; text-align: center;}
.board_basic .teacher_thumb > img {max-width: 11rem; position: absolute; left: 50%; bottom: -2rem; transform: translateX(-50%);}
.board_basic .answer > span {display: inline-block; width: 8.5rem; height: 3.2rem; line-height: 3rem; background-color: #fff; color: #333; border: 1px solid #333; border-radius: var(--border-radius-30px); text-align: center;}
.board_basic .answer .done {background-color: var(--primary-point-color); border-color: var(--primary-point-color); color: #fff;}
.board_basic .down_load {display: block; width: 11rem; margin: 0 auto; border-radius: 3rem; background-color: #333; color: #fff; font-size: 1.4rem; font-weight: 500; text-align: center;}
.board_basic .down_load > span {display: inline-block; padding: 0.9rem 0 0.8rem 2rem; background-image: url("/images/site/NGLMS/icon/down_icon.svg"); background-size: 1.2rem; background-position: left center; background-repeat: no-repeat;}
.board_basic .quiz_btn {display: inline-block; width: 8.5rem; height: 3.2rem; line-height: 1; background-color: #fff; color: #333; border: 1px solid #333; border-radius: var(--border-radius-30px); text-align: center;}
.board_basic .dash {display: block;}
.board_basic .progress span {display: block;}
.board_basic .percent {display: block;}
.board_basic .register_btn {display: inline-block; min-width: 10rem; height: 4rem; line-height: 4rem; padding: 0 1.5rem; color: #fff; font-size: 1.4rem; background-color: var(--primary-point-color); border-radius: 3rem; text-align: center;} 
.board_basic .register_btn > span {padding-left: 1.5rem; background-image: url("/images/site/NGLMS/icon/write_icon.svg"); background-position: left top; background-size: 1.1rem; background-repeat: no-repeat; font-weight: 500;}
.board_basic .register_btn.ing {background-color: #fff; border: 1px solid #333; color: #333;}
.board_basic .register_btn.ing > span {padding-left: 2rem; background-image: url("/images/site/NGLMS/icon/display_icon.svg"); background-size: 1.6rem; background-position: left; font-weight: 600;}
.board_basic .register_btn.end {background-color: #333; color: #fff;}
.board_basic .ui-datepicker-trigger {width: 2.5rem;}
.board_basic .file_img {display: inline-block; vertical-align: middle; width: 2.4rem; margin-right: 1rem; text-align: right;}
.board_basic .file_name {display: inline-block; vertical-align: middle;}
.board_basic .status{display: inline-block; padding:0.3rem 0.8rem; background-color: #fff; border:1px solid #979797; color:#737373; border-radius: 0.6rem; }
.board_basic .dash_list + .form_iframe {margin-top: 2rem;}
.board_basic .review_answer, .board_basic .answer_write {background-color: #eee;}
.board_basic .review_answer .tit {position: relative; padding-left: 3rem;}
.board_basic .review_answer .tit::before {content: 'ㄴ'; position: absolute; left: 1rem; top: 1rem; font-size: 2rem;}
.board_basic .answer_edit {display: none; background-color: #F5F6FB;}
.board_basic .answer_write .answer_input {display: none;}
.board_basic .answer_textarea {margin-top: 1.5rem;}
.board_basic .review_score img {width: 11rem;}
.board_basic .reply + a {width: 90%;}
.board_basic .class {display: block;}

/*연락처, 이메일*/
.board_basic .form_phone {display: flex; align-items: center; gap: 0.8rem;}
.board_basic .form_phone .basic_input {width: 14rem;}
.board_basic .form_phone .phone1 {width: 10rem;}
.board_basic .form_email {display: flex; align-items: center; gap: 0.8rem;}
.board_basic .email_domain {display: none;}
.board_basic .form_secret {display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;}
.board_basic .form_secret .basic_input {width: calc(100% - 10rem);}
.board_basic .form_secret .input_group {margin-right: 0;}

/*datepicker*/
.board_basic .datepicker_box.flex {display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;}
.board_basic .datepicker_box input {width: 35%;}
.board_basic .datepicker_box .datepick_items{display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem;}
.board_basic .hasDatepicker {height: 3.5rem; padding: 0 1.2rem; border: 1px solid var(--border-gray-color); border-radius: 0.5rem;}
.board_basic .hasDatepicker::placeholder {font-size: 1.4rem;}

/*버튼*/
.board_basic .btn {min-width: 8.5rem; height: 3rem; line-height: 3rem; padding: 0 1.2rem; background-color: var(--primary-point-color); border-radius: 3rem; font-size: 1.4rem; color: #fff; text-align: center;}
.board_basic .btn + .btn {margin-top: 1rem;}
.board_basic .btn.quiz {background-color: #4e67ce;}
.board_basic .btn:disabled{background-color: #F1F1F1; color: #333;}
.board_basic .btn.cancel {background-color: #fff; border: 1px solid #333; color: #333; line-height:2.8rem;}
.board_basic .btn.primary {background-color: #4087d7;}
.board_basic .btn.dark {background-color: #333;}
.board_basic .btn.danger {background-color: #fb4c4c;}
.board_basic .btn.default {background-color: #cfcfcf; color: #333;}
.board_basic .basic_btn {margin-top: 1rem;}
.board_basic .basic_btn .btn {height: 4rem; line-height: 4rem; border-radius: 0.8rem;}

.table_desc {margin-top: 1.2rem;}

/* *************************************************************************************
*
* 배치용 테이블 공통
* 
* **************************************************************************************/
.view_table {width: 100%; border-top: 2px solid #000;}
.view_table tr {border-bottom: 1px solid var(--border-gray-color);}
.view_table td {padding: 1.5rem; vertical-align: middle;}

/*테이블 border 추가*/
.board_basic.line tbody {border-right: 1px solid var(--border-gray-color);}
.board_basic.line td {border-top: 1px solid var(--border-gray-color); border-left: 1px solid var(--border-gray-color);}

/*th left-layout*/
.board_basic.th_left {border-top: 1px solid var(--border-gray-color);}
.board_basic.th_left > tbody > tr > th:first-child {border-radius: 0;}
.board_basic.th_left > tbody > tr > td {padding: 1.5rem; text-align: left;}

/*dl - 테이블 형태*/
.board_dl {border: 1px solid var(--border-gray-color);}
.board_dl dl {display: flex;}
.board_dl dt {display: inline-block; width: 20%; padding: 2rem; font-size: 1.7rem; color: var(--primary-point-color); font-weight: 700; background-color: #bed8f5;}
.board_dl dd {display: inline-block; width: 80%; padding: 2rem; text-align: left;}
.board_dl .row dt {width: 26%;}
.board_dl .row dd {width: 40%;}

/* *************************************************************************************
*
* input - select - textarea 공통
* 
* **************************************************************************************/
input[type="text"]:read-only,
input[type="number"]:read-only{background-color: #F1F1F1;}

.basic_select {min-width: 12rem; height: 4.5rem; padding: 0 3rem 0 1.5rem; border: 1px solid var(--border-gray-color); border-radius: 1rem;}
.basic_select.w100p {width: 100%;}
.basic_input {height: 4.5rem; padding: 0 1.5rem; border: 1px solid var(--border-gray-color); border-radius: 1rem; box-sizing: border-box;}
.basic_input.w80p {width: 80%;}
.basic_input.w100p {width: 100%;}
.basic_textarea {width: 100%; min-height: 15rem; padding: 1.5rem; border: 1px solid var(--border-gray-color); border-radius: 1rem; resize: none; box-sizing: border-box;}
.basic_file_upload {display: flex; flex-wrap: wrap; gap: 1rem;}
.basic_file_upload .file_item {display: flex; align-items: center; gap: 0.5rem;}
.basic_file_upload .file_item + .file_item {margin-top: 1rem;}
.basic_file_upload .file_select {position: relative;}
.basic_file_upload .file_select label {position: relative; display: block; width: 10rem; height: 4rem; line-height: 4rem; font-weight: 500; background-color: var(--primary-point-color); color: #fff; border-radius: 0.5rem; text-align: center; cursor: pointer; z-index: 1;}
.basic_file_upload .file_select input[type="file"] {position: absolute; left: 0; top: 0; display: block; width: 1px; height: 1px;}
.basic_file_upload .file_select input[type="file"]:focus-visible {width: 100%; height: 100%; outline: 2px dashed var(--focus-color);}
.basic_file_upload .file_select label input[type="file"]{opacity:0;} /* 20260710 */
.basic_file_upload .file_select label:has(input[type="file"]:focus) {outline: 2px dashed red;} /* 20260710 */
.basic_file_upload .file_name {flex: 1;}
.basic_file_upload .upload_name {width: 100%; height: 4rem; padding: 0 1.5rem; color: #757575; background-color: #f7f7f7; border-radius: 0.5rem; border: 1px solid var(--border-gray-color); box-sizing: border-box;}
.basic_file_upload .file_delete {width: 10rem; height: 4rem; line-height: 4rem; border-radius: 0.5rem; background-color: #888; color: #fff; text-align:center;}
.basic_file_upload .file_btn  {height: 4rem; line-height: 4rem; padding: 0 1.5rem; border-radius: 0.5rem; background-color: #333; color: #fff; font-size: 1.6rem; text-align:center;}
.basic_checkgroup {display: flex; align-items: center; gap: 0.8rem;}
.basic_file_download{margin-bottom: 2rem;}
.basic_file_download .down_btn{padding:0.6rem 1.6rem; font-weight: 500; border:1px solid var(--primary-point-color); color: var(--primary-point-color); background-color: #fff; border-radius: 0.5rem; text-align: center;}
.ar-txt{margin-top: 0.5rem; color: #737373;}

/* *************************************************************************************
*
* 게시판 탭
* 
* **************************************************************************************/
.board_tab {margin-bottom: 5rem; display: flex; gap: 1rem 2rem; flex-wrap: wrap;}
.board_tab > li {flex: 1 1 18%;}
.board_tab > li:nth-child(n+6) {max-width: calc(100% / 5 - 1.6rem);}
.board_tab > li > a {display: block; padding: 2rem 1.5rem; border: 2px solid #c1d4ff; background-color: #fff; border-radius: var(--border-radius-base); font-size: 2rem; text-align: center;}
.board_tab > li > a.on {background-color: #c1d4ff; color: var(--primary-point-color); font-weight: bold;}

/* *************************************************************************************
*
* 게시판 상세
* 
* **************************************************************************************/
.board_view {display:block; padding:0; border-top:2px solid #333; border-bottom:1px solid var(--border-gray-color);}
.board_view .view_title {padding:2.5rem 3rem; background:#f9f9f9;}
.board_view .view_title .label_tag {gap: 1rem;}
.board_view .subject{display: block; width:100%; font-size:2.6rem; font-weight:500;}

.board_view .detail{padding: 2rem 3rem; display: flex; justify-content: right; gap: 1rem 3rem; flex-wrap: wrap; border-top: 1px solid var(--border-gray-color); border-bottom: 1px solid var(--border-gray-color);}
.board_view .detail > li {line-height: 1;}
.board_view .detail > li > span {display: inline-block; margin-right: 1rem;}
.board_view .detail > li > b {display: inline-block;}

.board_view .board_content {padding: 3rem; line-height: 1.5;}
.board_view .board_content.v1 {padding: 3rem 0; line-height: 1.5;}
.board_view .board_content img {max-width: 100%;}
.board_view .board_content .mobile {display:none;}

.board_view .file_box {display: flex; align-items: baseline; margin: 5rem auto; padding: 3rem; background-color:#d0edfa; border-radius: var(--border-radius-base); flex-wrap: wrap;}
.board_view .file_box strong {position: relative; display: inline-block; padding-right: 2.5rem; font-size: 1.7rem;}
.board_view .file_box strong::before {position: absolute; right: 0; top: 0.5rem; width: 1px; height: 1.4rem; background-color: #888; content: '';}
.board_view .file_list {flex: 1; padding-left: 2.5rem;}
.board_view .file_list > li + li {margin-top: 1.5rem;}
.board_view .file_list > li > a {display: inline-flex; align-items: center; flex-wrap: wrap;}
.board_view .file_list .file_img {display: inline-block; width: 2.4rem; margin-right: 1rem; text-align: right;}
.board_view .file_list .file_name {display: inline-block;}

.prev_next_link li {display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--border-gray-color);}
.prev_next_link li > strong {display: block; width: 12rem; padding: 1.5rem 2rem; background-color: #f9f9f9; text-align: center;}
.prev_next_link li > strong > span {position: relative; display: inline-block; padding-left: 1.8rem;}
.prev_next_link li > strong > span::before {position: absolute; left: 0; top: 0.8rem; content: ''; display:block; width: 0.6rem; height: 0.6rem; border-top: 2px solid #222; border-right: 2px solid #222; transform: rotate(-45deg);}
.prev_next_link .next > strong > span::before {top: 0.4rem; transform: rotate(135deg);}
.prev_next_link li > a {display: inline-block; max-width: calc(100% - 12rem); padding: 1.5rem;}
.prev_next_link li .link {display: inline-block; max-width: calc(100% - 12rem); padding: 1.5rem;}

.board_back_btn {position:relative; margin-top: 4rem; display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap;}
.board_back_btn .btn {min-width: 13rem; height: 5rem; line-height: 5rem; font-size: 1.8rem; font-weight: 600; border-radius: 3rem; text-align: center;}
.board_back_btn .btn.defalut {background-color: var(--primary-point-color); color: #fff;}
.board_back_btn .top_btn {position:absolute; top:0; right:0;}
.board_back_btn .top_btn > img {width:5rem; height:5rem;}

/* *************************************************************************************
*
* 댓글
* 
* **************************************************************************************/
.board_comment {padding: 3rem; margin: 5rem 0; background-color: #f7f7f7; border-radius: var(--border-radius-base);}
.board_comment .write_notice {display: flex; align-items: baseline; font-size: 2rem; font-weight: 500; flex-wrap: wrap; gap: 1rem;}
.board_comment .write_notice .desc {font-size: 1.4rem; font-weight: 400;}
.board_comment .comment_form {display: flex; gap: 1.5rem; flex-wrap: wrap;}
.board_comment .comment_form .basic_textarea {width: calc(100% - 12rem); min-height: 10rem;}
.board_comment .comment_form .comment_btn {width: 10rem; height: 10rem; line-height: 10rem; font-size: 1.8rem; text-align: center; background-color: #333; color: #fff; border-radius: 1rem;}
.board_comment .form_byte {padding: 1rem; display: flex; justify-content: space-between; align-items: center; color: #555; font-size: 1.5rem;}
.board_comment .comment_list {margin-top: 1.5rem; border-top: 1px dashed var(--border-gray-color);}
.board_comment .comment_list > li {padding: 2rem 1.5rem; border-bottom: 1px dashed var(--border-gray-color);}
.board_comment .comment_list .writer {margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem;}
.board_comment .comment_list .name {font-weight: 500;}
.board_comment .comment_list .edit > button { padding: 0 1.5rem; height: 2.8rem; line-height: 2.8rem; font-size: 1.5rem; color: #fff; background-color: var(--primary-point-color); border-radius: 3rem;}


/* *************************************************************************************
*
* 설문조사 form
* 
* **************************************************************************************/
.ask_form_list {margin: 3rem 0;}
.ask_form_list > li {margin-bottom: 3rem; padding: 2rem; border: 1px solid var(--border-gray-color); border-radius: 1rem;}
.ask_form_list .ask_header {padding: 1.5rem; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; background-color: var(--bg-gray); border-radius: 1rem;}
.ask_form_list .ask_header .num {display: block; width: 4rem; height: 4rem; line-height: 4rem; font-size: 1.5rem; background-color: var( --sub-primary-color); color: #fff; font-weight: bold; text-align: center; border-radius: 50%;}
.ask_form_list .ask_header .ask  {display: block; width: calc(100% - 5.5rem); font-size: 2rem;}
.ask_form_list .ask_body {padding: 2rem 1.5rem;}

/* *************************************************************************************
*
* card 게시판
* 
* **************************************************************************************/
.card_basic {display: flex; gap: 3rem; flex-wrap: wrap;}
.card_basic > li {position: relative; width: calc(100% / 3 - 2rem);}
.card_basic > li > a {display: block; width: 100%; height: 100%;}
.card_basic .card_thumb {position: relative; height: 0; padding-top: 93.25%; background-color: #f1f1f1; border-radius: var(--border-radius-base); overflow: hidden;}
.card_basic .card_thumb > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; /*object-fit: cover;*/ transition: .5s;}
.card_basic .card_cnt {margin-top: 2rem; padding-left: 1rem;}
.card_basic .card_cnt strong {display: block; margin: 1rem 0; font-size: 2rem; color: #222; font-weight: 500;}
.card_basic .card_date span {font-size: 1.4rem; color: #777;}
.card_basic .hash_tag {display: flex; gap: 0.2rem 1rem; flex-wrap: wrap;}
.card_basic .hash_tag > li {color: #777; font-size: 1.4rem;}
.card_basic .hash_tag span {position: relative; display: inline-block; padding-left: 1.2rem;}
.card_basic .hash_tag span::before {content: '#'; position: absolute; left: 0; top: 0;}
.card_basic .target_class {margin-bottom: 0.5rem;}
.card_basic .target_class b {display: inline-block; margin-right: 0.5rem;}
.card_basic .card_survey {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem;}
.card_basic .survey_btn {height: 3.4rem; padding: 0 1.5rem; background-color: #4e67ce; border: 1px solid #4e67ce; color: #fff; font-weight: 500; border-radius: var(--border-radius-30px); line-height: 1;}
.card_basic .survey_btn.check {background-color: #fff; color: #4e67ce;}

/* *************************************************************************************
*
* 멘토링 게시판
* 
* **************************************************************************************/
.card_course {display: flex; gap: 3rem; flex-wrap: wrap;}
.card_course > li {width: calc(100% / 3 - 2rem);}
.card_course > li > a {display: block; width: 100%;}
.card_course .card_thumb {position: relative; height: 0; padding-top: 63.52%; background-color: #e3dff5; border-radius: var(--border-radius-20px); overflow: hidden;}
.card_course .card_thumb > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: .3s;}
.card_course .card_mento {position: relative; height: 0; padding-top: 63.305%; background-color: #e3dff5; border-radius: var(--border-radius-20px); overflow: hidden;}
.card_course .card_mento > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: .3s;}
.card_course .card_badge {position: absolute; left: 2rem; top: 2rem; display: inline-block; padding: 0.8rem 1.5rem; background-color: #7761e2; border-radius: var(--border-radius-30px); color: #fff; line-height: 1; z-index: 1;}
.card_course .card_cnt {margin-top: 1.5rem; padding-left: 1rem; color: #222;}
.card_course .card_cnt > a {width:100%;}
.card_course .card_cnt strong {display: block; margin-bottom: 1.2rem; font-size: 2.2rem; font-weight: 500;}
.card_course .card_cnt .elps_2 {display: -webkit-box; height: 6rem;}
.card_course .card_info {display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 2.5rem; font-size: 1.5rem;}
.card_course .card_teacher + .card_date {position: relative;}
.card_course .card_teacher + .card_date::before {position: absolute; left: -1.25rem; top: 0.4rem; display: inline-block; width: 1px; height: 1.2rem; background-color: var(--border-gray-color); content: '';}
.card_course .card_tit {position: absolute; top: 6.5rem; left: 2rem; max-width: 19rem; font-size: 2.4rem; z-index: 1;}
.card_course .card_tit strong {display: block; font-weight: 600; word-break: keep-all;}
.card_course .lecture_btn {margin-left: auto; height: 3.2rem; line-height: 3.2rem; padding: 0 2rem; background-color: #333; color: #fff; text-align: center; border-radius: 0.5rem;}
.card_course .teacher_thumb {position: absolute; right: -3rem; bottom: 0;}
.card_course .teacher_thumb > img {width: 15vw;}

.card_course .no_data { width:100%; text-align: center; padding:20px; font-size:20px; }
.card_course .card_link {margin-top:1.2rem; float:right;}
.card_course .link {display:inline-block; text-align: center; background:#666666; color:#fff; padding:2px 5px;}

/* *************************************************************************************
*
* 페이징
* 
* **************************************************************************************/
.pagination {margin-top: 5rem; display: flex; justify-content: center; gap: 1rem; flex-wrap:wrap; overflow: hidden;}
.pagination a {display: flex; width: 35px; height: 35px; align-items: center; justify-content: center; color: #222; font-weight: 500; border: 1px solid #e5e5e5; border-radius: 50%; font-size: 1.4rem;}
.pagination .paging {display: flex; justify-content: center; gap: 1rem; flex-wrap:wrap;}
.pagination .page {background-color: #eee; background-position: center; background-repeat: no-repeat; border: 0; text-indent: -1000px; font-size:0;}
.pagination .page.first {background-image: url("/images/site/NGLMS/common/page_first.svg");}
.pagination .page.prev {background-image: url("/images/site/NGLMS/common/page_arr.svg");}
.pagination .page.next {background-image: url("/images/site/NGLMS/common/page_arr.svg"); transform: rotate(180deg);}
.pagination .page.last {background-image: url("/images/site/NGLMS/common/page_first.svg"); transform: rotate(180deg);}
.pagination .active {background-color: var(--primary-point-color); color: #fff; border: 0; text-decoration: underline; text-underline-offset: 0.3rem;}

/* *************************************************************************************
*
* 수강후기 게시판 - 답변
* 
* **************************************************************************************/
.board_basic .comment_drop {display: none;}
.comment_drop.open {display: table-row; background-color: #FBFBFB;}
.comment_drop td {padding: 2rem 3rem 3rem; text-align: left;}
.comment_drop .user > i {display: inline-block; vertical-align: middle; width: 5rem; height: 5rem; margin-right: 1rem; background-color: #f6eae0; border-radius: 50%; overflow: hidden;}
.comment_drop .user > span {display: inline-block; vertical-align: middle; font-size: 1.8rem; font-weight: 500;}
.comment_drop .review_group .user {margin-bottom: 1rem;}
.comment_drop .review {margin-bottom: 2rem; line-height: 1.6;}
.comment_drop .comment_group {position: relative; margin-left: 4rem; padding: 2rem 1.2rem; border: 1px solid var(--border-gray-color); background-color: #fff; border-radius: 1rem;}
.comment_drop .comment_group::before {position: absolute; left: -3.8rem; top: 0; width: 1.4rem; height: 1.8rem; background: url("/images/site/NGLMS/icon/comment_arr.svg") no-repeat; content: '';}
.comment_drop .comment_group .user > i {position: relative; background-color: #f1f1f1;}
.comment_drop .comment_group .user > i > img {width: 70px; position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%);}
.comment_drop .comment {padding-left: 6.3rem; color: #333; line-height: 1.6;}

/* *************************************************************************************
*
* 다운로드 테이블
* 
* **************************************************************************************/
.download_table {display: flex; flex-wrap: wrap; margin-bottom: 4rem;}
.download_table > li {flex: 1; border-bottom: 1px solid #eee; overflow: hidden;}
.download_table > li + li {border-left: 1px solid #eee;}
.download_table > li:first-child {border-radius: var(--border-radius-base) 0 0 var(--border-radius-base); border-left: 1px solid #eee;}
.download_table > li:last-child {border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; border-right: 1px solid #eee;}
.download_table .th {padding: 2rem 1.5rem; color: var(--primary-point-color); background-color: #bed8f5; font-size: 1.7rem; font-weight: 700; text-align: center;}
.download_table .tr {display: flex; flex-direction: column;}
.download_table .td {min-height: 7rem; align-content: center; padding: 1.5rem 1rem; text-align: center;}
.download_table .td + .td {border-top: 1px solid #eee;}
.download_table .down_btn {display: inline-block; padding: 0 1.2rem; border-radius: 3rem; border: 1px solid var(--border-gray-color); font-size: 1.4rem; font-weight: 500;}
.download_table .down_btn > span {display: inline-block; padding: 0.8rem 0 0.7rem 2rem; background-position: left center; background-repeat: no-repeat;}
.download_table .down_btn + .down_btn {margin-top: 1rem;}
.download_table .zip_ico {background-image: url("/images/site/NGLMS/icon/file_zip.svg"); background-size: 1.5rem;}
.download_table .sound_ico {background-image: url("/images/site/NGLMS/icon/speaker_icon.svg"); background-size: 1.8rem;}

/*datepicker*/
.datepicker_basic {display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;}
.datepicker_basic input {height: 4rem; padding: 0 1.2rem; border: 1px solid var(--border-gray-color); border-radius: 0.5rem;}

/*ckeditor*/
.staticPageCkeditor.readonly + .cke_chrome { border:0; height:auto; }
.staticPageCkeditor.readonly + #cke_contents .cke_inner #cke_1_top,
.staticPageCkeditor.readonly + #cke_contents .cke_inner #cke_1_bottom {
    display:none !important;
}

#pop {display:none;}
.close_btn {float: right; padding: 5px; cursor: pointer;}

.tbl_view01 iframe {width:100% !important;}

#rcmdLvUpdate {display:inline-block; padding:10px; background:#cc6666; color:#ffffff; border-radius: 5px;}

#subjectGroup { line-height:1.5 }
#subjectGroup tr td p a:hover { color:#0000C0; text-decoration:underline; }


/*Only PC*/
@media all and (min-width:1280px){
    a:hover .elps {text-decoration: underline; text-underline-offset: 0.3rem;}
    .board_basic .tit:hover:not(.label_tag > span) {font-weight: 500;}
    .board_basic .register_btn:not(.ing):hover {box-shadow: 0 0 5px rgba(32, 58, 89, 0.7);}
    a:hover .card_thumb > img {transform: scale(1.1); transition: .5s;}
    a .card_thumb > img {transition: .3s;}
    a:hover .card_mento > img {transform: scale(1.1); transition: .5s;}
    .card_course > li > a:hover .card_mento {outline: 2px solid #7761e2;}
    .card_course .teacher_thumb > img {width: 20rem;}
    .board_tab > li > a[aria-selected="false"] {color: #000; background-color: #fff; border: 2px solid #c1d4ff; font-weight: normal;}
    .board_tab > li > a[aria-selected="true"] {background-color: #c1d4ff; color: var(--primary-point-color); font-weight: bold;}
    .board_view .file_list > li > a:hover {text-decoration: underline; text-underline-offset: 0.3rem;}
}

/* *************************************************************************************
*
* 모바일
* 
* **************************************************************************************/
@media all and (max-width:1024px){
    /*스크롤 테이블*/
    .scroll_table {overflow-x: auto; -ms-overflow-style: none;}
    .scroll_table::-webkit-scrollbar {display: none;}
    .scroll_table > table {width: 1024px;}
    
    /*다운로드 테이블*/
    .download_table {width: 1024px;}
    	
    /*반응형 테이블*/
    .respon_table .teacher_thumb {width:8rem; height:8rem; border-radius: 2.5rem;}
    .board_basic .teacher_thumb > img {max-width: 9.5rem;}
    
    .board_basic #moreButtonRow {padding:0; border-bottom:0;}
}

@media all and (max-width:780px){
	/*반응형 테이블*/
    .respon_table {border-top: 2px solid var(--primary-point-color);}
    .respon_table colgroup {display: none;}
    .respon_table thead {display: none;}
    .respon_table tr {position: relative; display: block; padding: 1.5rem 0;}
    .respon_table tr:has(.tit .label_tag) {padding: 3.5rem 0 1.5rem;}
     .respon_table tr:has(.tit .course_lecture) {padding: 1.5rem 0;}
    .respon_table td {display: block; padding: 0.5rem 0.4rem; text-align: left;}
    .respon_table td.mo_inline {position: relative; display: inline-block; padding-right:1rem; color: var(--font-gray); font-size: 1.4rem;}
    .respon_table td.mo_inline::before {position: absolute; right: 0; top: 0.8rem; width: 1px; height: 12px; background-color: #959595; content: '';}
    .respon_table .pc {display: none;} 
    .respon_table .label_notice {min-width: 5rem; height: 2.5rem; line-height: 2.5rem; margin-bottom: 0.4rem; font-size: 1.4rem; font-weight: 500;}
    .respon_table .mobile {position: relative; display: inline-block; margin-right: 0.8rem; color: var(--primary-point-color); font-weight: 600; white-space: nowrap;}
    .respon_table .no_data {text-align: center;}
    .respon_table .no_data i.mobile {display: none;}
    .respon_table .tit {display: flex; font-weight: 500;}
    .respon_table .tit > a {width: auto; font-weight: 600;}
    .respon_table .tit > button {max-width: none; font-weight: 600;}
    .respon_table .tit .label_tag:not(:has(.course_lecture)) {position: absolute; left: 0; top: 0.8rem;} /*강좌명 태그는 적용제외, 진행상태만 적용*/
    .respon_table .file_atch > img {width: 2rem;}
    .respon_table .video_tag {display: inline-flex; flex-direction: row;}
    .respon_table .down_load {margin: initial; margin-left: auto; margin-top: 1rem;}
    .respon_table .progress span {display: inline-block;}
    .respon_table .dash {display: inline-block;}
    .respon_table .teacher {display: none;}
    .respon_table .th_left tr {padding: 0;}
    .respon_table .th_left th {display: block; padding: 1rem 1.5rem; text-align: left;}
    .respon_table .th_left td {padding: 1.2rem 1.5rem;}
	.respon_table .board_answer .writer {display: none;}
	.respon_table .board_answer .date {display: none;}
    .respon_table .board_answer .tit::before {top: 0;}
    .respon_table .register_btn {min-width: 9rem; height: 3.2rem; line-height: 3.2rem;}
    .respon_table .percent {display: inline-block;}
    .respon_table .view_table {border-top: 0; border-bottom: 1px solid var(--border-gray-color);}
    .respon_table .view_table tr {padding: 0; border: 0;}
    
    .mobile_table {display: block;}
    .mobile_table tbody {display: block;}
    .mobile_table .tit .mobile {/*display: none;*/ vertical-align: middle;}
    .mobile_table .tit > a {max-width: 100%; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
    .mobile_table .label_tag .course_lecture {padding: 0;}
    .mobile_table .tit:has(.course_lecture) {display: block;}
    .mobile_table .tit:has(.course_lecture) .mobile {display: none;}
    .mobile_table .reply + a {width: 90%; vertical-align: text-top;}
    .mobile_table input[type="checkbox"] {vertical-align: bottom;}
    .mobile_table .answer > span {color: #000; width: auto; height: auto; background-color: transparent; border: 0; line-height: 1;}
    .mobile_table .answer .done {color: #000; background-color: transparent; border: 0;}
    .mobile_table .class {display: inline-block; margin-right: 0.5rem;}
	
    /*게시판 검색*/
    [class*="board_search"] .select_group {width: 100%; flex-wrap: wrap;}    
    [class*="board_search"] .search_select, [class*="board_search"] .search_inp {padding: 1.5rem 1.2rem; border-radius: 1rem; font-size: 1.6rem;}
    [class*="board_search"] .search_select {flex: 1; min-width: calc(50% - 1rem); max-width: none;}
    [class*="board_search"] .search_label {display: none;}
    [class*="board_search"] .inp_group {flex-wrap: wrap;}
    [class*="board_search"] .search_inp {width: calc(100% - 13rem); min-width: auto;}
    [class*="board_search"] .search_submit {width: 12rem; border-radius: 1rem;}   
    .board_search:not(:has(.inp_group)) .search_submit {width: 100%; margin-left: 0; border-radius: 1rem;}
      
    /*게시물 count*/
    .board_count {padding-left:0;}

    /*datepicker*/
    .board_basic .datepicker_box.flex {gap: 0.5rem;}

    /*게시판 탭*/
    .board_tab {margin-bottom: 3rem; gap: 0.8rem;}
    .board_tab > li:nth-child(n+6) {max-width: calc(100% / 5 - 0.638rem);}
    .board_tab > li > a {padding: 1.2rem 1rem; font-size: 1.8rem;}

    /*게시판 상세*/
    .board_view .view_title {padding: 2rem;}
    .board_view .subject {font-size: 2.2rem;}
    .board_view .detail {padding: 1.5rem 2rem; gap: 1rem 1.5rem;}
    .board_view .detail > li {font-size: 1.4rem;}
    .board_view .board_content {padding: 2rem;}
    .board_view .board_content .pc {display:none;}
    .board_view .board_content .mobile {display:block;}
    .board_view .file_box {padding: 2rem;}
    .board_view .file_box strong {padding-right: 1.5rem;}
    .board_view .file_list {padding-left: 1.5rem;}
    .board_view .file_list .file_img {display: none;}
    .prev_next_link .link {padding: 1.5rem;}
    
    /*설문조사*/
    .ask_form_list > li {padding: 1.5rem; margin-bottom: 1.5rem;}
    .ask_form_list .ask_header .ask {font-size: 1.6rem;}
    .ask_form_list .ask_body {padding: 1.5rem;}

    /*card 게시판*/
	.card_basic {gap: 2rem;}
    .card_basic > li {width: calc(100% / 2 - 1rem);}
    .card_basic .card_cnt {margin-top: 1.5rem; padding-left: 0;}
    .card_basic .card_cnt strong {font-size: 1.8rem;}

    /*멘토링 게시판*/
    .card_course {gap: 2rem 1rem;}
    .card_course > li {width: calc(100% / 2 - 0.5rem);}
    .card_course .teacher_thumb > img {width: 24vw;}
    .card_course .card_cnt {margin-top: 1rem; padding-left: 0;}
    .card_course .card_cnt .elps_2 {height: 4.2rem;}
    .card_course .card_cnt strong {margin-bottom: 0.5rem; font-size: 1.6rem;}
    .card_course .card_teacher {font-size: 1.4rem;}
    .card_course .lecture_btn {padding: 0 1rem; height: 2.6rem; line-height: 2.6rem; font-size: 1.4rem;}
    .card_course .card_date {display: none;}

    /*선생님 - 수강후기 답변*/
    .comment_drop td {padding: 0.8rem;}
    .comment_drop.open {display: block;}
    .comment_drop .review {padding-left: 0; margin-top: 1.2rem;}
    .comment_drop i.mobile {display: none;}
    .comment_drop .user > span {font-size: 1.6rem;}
    .comment_drop .comment_group {padding: 1.2rem; margin-left: 0;}
    .comment_drop .comment {padding-left: 0; margin-top: 1.2rem;}
    .comment_drop .comment_group::before {content: none;}

    /*선생님 - 개설강좌*/
    .accordion_course {margin-bottom: 1.4rem;}
    .accordion_course .accordion_btn {padding: 1.6rem 2.5rem 1.6rem 1.5rem; font-size: 1.6rem;}
    .accordion_course .accordion_btn::after {top: 2rem; right: 1rem; width: 1.4rem; height: 1rem; background-size: 1.4rem;}
    .accordion_content {padding: 0 1rem 0;}

    /*datepicker*/
    .datepicker_basic {width: 100%; gap: 0.5rem;}
    .datepicker_basic input {width: calc(50% - 3.5rem); font-size: 1.4rem;}
    .datepicker_basic .ui-datepicker-trigger {width: 1.8rem;}
    
    .prev_next_link li > a {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
    .prev_next_link li .link {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
}

@media all and (max-width:480px){
    /*반응형 테이블*/
    .respon_table .form_phone .basic_input {width: calc(100% / 3 - 1.5rem);}
    .respon_table .form_email .basic_input, .respon_table .form_email .basic_select {width: calc(100% / 3 - 1.5rem);}
    .respon_table .form_secret .basic_input {width: 100%;}

    /*게시판 검색*/
    [class*="board_search"] {padding: 1.5rem;}
    [class*="board_search"] .search_select {background-position: center right 1rem;}
    [class*="board_search"] .search_select, [class*="board_search"] .search_inp {width: 100%; border-radius: 1rem; font-size: 1.6rem;}
    [class*="board_search"] .select_group {width: 100%; margin-right: 0;}
    [class*="board_search"] .search_submit {width: 100%; margin-left: 0; border-radius: 1rem;}
    [class*="board_search"] .search_submit02{border-radius: 1rem;}
    [class*="board_search"] .search_inp {margin-bottom: 1rem;}
    [class*="board_search"] .inp_group, [class*="board_search"] .search_inp {width: 100%;}

    /*게시판 탭*/
    .board_tab {position: relative; gap: 0;}
    .board_tab > li {position: relative;}
    .board_tab > li:nth-child(n+6) {max-width: calc(100% / 5);}
    .board_tab::before , .board_tab > li::before {position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: var(--border-gray-color); content: ''; z-index: -1;}
    .board_tab > li > a {padding: 1rem 0.5rem; font-size: 1.7rem; border-radius: 0; border: 0;}
    .board_tab > li > a.on {color: var(--primary-point-color); border-bottom: 2px solid var(--primary-point-color); background-color: transparent;}
    .board_tab > li > a[aria-selected="true"] {color: var(--primary-point-color); border-bottom: 2px solid var(--primary-point-color); background-color: transparent; font-weight: bold;}
    .board_tab > li > a[aria-selected="false"] {color: inherit; font-weight: 400; border-bottom:0; background-color: transparent;}

    /*첨부파일*/
    .basic_file_upload .file_select label {width: 8rem;}
    .basic_file_upload .file_delete {width: 5.5rem;}
    .basic_file_upload .file_add {width:100%;}

	/*페이징*/
    .pagination {gap: 5px;}
    .pagination .paging {gap: 5px;}
    .pagination a {width: 25px; height: 25px; font-size:1.2rem;}
    .pagination .page.first, .pagination .page.last {background-size: 1.4rem;}
    .pagination .page.prev, .pagination .page.next {background-size: 0.7rem;}

    /*card 게시판*/
    .card_basic .card_progress {left: 1rem; top: 1rem;}
    .card_course .card_badge {left: 1rem; top: 1rem; padding: 0.6rem 1.2rem; font-size: 1.2rem;}
    .card_course .card_tit {top: 4.5rem; left: 1.2rem; max-width: 15rem; font-size: 1.5rem;}
    .card_course .teacher_thumb > img {width: 24vw;}

    /*다운로드 테이블*/
    .download_table {width: 100%; gap: 2rem;}
    .download_table > li {width: calc(50% - 1rem); flex: none; border-radius: var(--border-radius-base); border-right: 1px solid #eee;}
    .download_table > li:first-child {border-top-right-radius: var(--border-radius-base); border-bottom-right-radius: var(--border-radius-base);}
    .download_table > li:last-child {border-top-left-radius: var(--border-radius-base); border-bottom-left-radius: var(--border-radius-base);}
    .download_table .th {padding: 1.2rem;}
}