@charset "UTF-8";

/* 공지사항, 수강후기 페이지 */
.cmnt_area.notice table,
.cmnt_area.epilogue table {
  width: 100%;
  border-collapse:collapse;
}

.cmnt_area.notice h2,
.cmnt_area.epilogue h2 {
  padding-bottom: 14px;
  margin-bottom: 24px;  
  border-bottom: 1px solid #ddd;
}

.cmnt_area.notice th,
.cmnt_area.notice td,
.cmnt_area.epilogue th,
.cmnt_area.epilogue td {
  padding:14px 10px;
  border-bottom:1px solid #e5e5e5;
}

.cmnt_area.notice .table-header th,
.cmnt_area.epilogue .table-header th {
  background:#f4f4f4;
  font-size:20px;
  font-weight:600;
  color:#555;
  text-align: center;
}

.cmnt_area.notice .td_title span,
.cmnt_area.epilogue .td_title span {
  font-size:16px;
  color:#222;
}

.cmnt_area.notice td:not(.td_title),
.cmnt_area.epilogue td:not(.td_title) {
  font-size:17px;
  color:#777;
  text-align: center !important;
}

.cmnt_area.notice tr,
.cmnt_area.epilogue tr {
  height:56px;
  text-align: center;
}

.cmnt_area.notice .notice-title,
.cmnt_area.epilogue .epilogue-title {
  display: block;        /* 중요 */
  text-align: left;
}

.cmnt_area.notice table tr {
    transition: background-color 0.15s ease;
}

.cmnt_area.notice table tr:not(.table-header):hover {
    background-color: #f5f7fb;
    cursor: pointer;
}

.cmnt_area.notice table tr:not(.table-header):hover .notice-title {
    color: #20418e;
    font-weight: 700;
}

.cmnt_area.notice table tr:not(.table-header):hover .n_date span,
.cmnt_area.notice table tr:not(.table-header):hover .n_view span {
    color: #555;
}

.cmnt_area.epilogue table tr:not(.table-header):hover {
    background-color: #f5f7fb;
    cursor: pointer;
}

.cmnt_area.epilogue table tr:not(.table-header):hover .epilogue-title {
    color: #20418e;
    font-weight: 700;
}

.cmnt_area.epilogue table tr:not(.table-header):hover .n_date span,
.cmnt_area.epilogue table tr:not(.table-header):hover .n_view span {
    color: #555;
}

@media all and (max-width:800px) {
	.cmnt_area.notice table,
	.cmnt_area.epilogue table {
	  width: 90%;
	  margin: 0 auto;
	  box-sizing: border-box;
	}
	
	.cmnt_area.notice .table-header th,
	.cmnt_area.epilogue .table-header th {
	  font-size:15px;
	}
	
	.cmnt_area.notice .notice-title,
	.cmnt_area.epilogue .epilogue-title {
		display: inline-block;
		max-width: 320px;
		white-space: nowrap;
		overflow: hidden;
        text-overflow: ellipsis;
	}
}

@media all and (max-width:580px) {
	.cmnt_area.notice .notice-title,
	.cmnt_area.epilogue .epilogue-title {
		max-width: 200px;
	}
}

@media all and (max-width:370px) {
	.cmnt_area.notice table,
	.cmnt_area.epilogue table {
	  width: 90%;
	  margin: 0 auto;
	}
	
	.cmnt_area.notice .table-header th,
	.cmnt_area.epilogue .table-header th {
	  font-size:15px;
	}
	
	.cmnt_area.notice .notice-title,
	.cmnt_area.epilogue .epilogue-title {
		display: inline-block;
		max-width: 170px;
		white-space: nowrap;
		overflow: hidden;
        text-overflow: ellipsis;
	}
	.cmnt_area.notice td:not(.td_title), 
	.cmnt_area.epilogue td:not(.td_title){
		font-size: 13px;
	}
	
	.cmnt_area.notice .td_title span, 
	.cmnt_area.epilogue .td_title span{
		font-size: 13px;
	}
	
	.cmnt_area.notice th, .cmnt_area.notice td, 
	.cmnt_area.epilogue th, .cmnt_area.epilogue td{
		padding: 5px;
	}
	
}

/*
   공지사항
    .notice table{
        width: 94%;
        margin: 10px auto;
    }
    .notice th:nth-child(3),
    .notice th:nth-child(5){
        display: none;
    }
    .notice td:nth-child(3),
    .notice td:nth-child(5){
        display: none;
    }
    .notice .td_title{
        width:65%;
    }
    .notice .table-header{
        height:45px;
    }
    .notice td{
        height:50px;
        font-size:1em;
    }
    
       질문답변
    .qna table{
        width: 94%;
        margin: 10px auto;
    }
    .qna th:nth-child(3){
        width: 15%;
    }
    .qna th:nth-child(5){
        display: none;
    }
    .qna td:nth-child(5){
        display: none;
    }
    .qna .td_title{
        width:65%;
    }
    .qna .table-header{
        height:45px;
    }
    .qna td{
        height:50px;
        font-size:1em;
    }
    
       질문답변
    .epilogue table{
        width: 94%;
        margin: 10px auto;
    }
    .epilogue th:nth-child(3),
    .epilogue th:nth-child(5){
        display: none;
    }
    .epilogue td:nth-child(3),
    .epilogue td:nth-child(5){
        display: none;
    }
    .epilogue .td_title{
        width:65%;
    }
    .epilogue .table-header{
        height:45px;
    }
    .epilogue td{
        height:50px;
        font-size:1em;
    }

} */

/* ===============================
   관리자 공지사항 관리 테이블
=============================== */
.management-table {
    width: 100%;
    border-collapse: collapse;
}

/* ===============================
   헤더
=============================== */
.management-table th {
    padding: 14px 10px;
    background: #f4f4f4;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

/* ===============================
   td 기본 (모두 가운데)
=============================== */
.management-table td {
    padding: 14px 10px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #ddd;
    text-align: center;         
    vertical-align: middle;
}

/* ===============================
   제목만 왼쪽 정렬
=============================== */
.management-table td.td_title {
    text-align: left;            
}

/* 공지/후기와 동일한 논리를 관리자에 적용 */
.management-table td:not(.td_title) {
    text-align: center;
}

.management-table .td_title span {
    display: block;
    text-align: left;
}

/* ===============================
   Hover
=============================== */
.management-table tr {
    transition: background-color 0.15s ease;
}

.management-table tr:not(.table-header):hover {
    background-color: #f4f7ff;
    cursor: pointer;
}

.management-table tr:not(.table-header):hover .td_title span {
    color: #1D326C;
    font-weight: 700;
}

/* ===============================
   온라인 문의 관리 - 제목 영역 보정
=============================== */

/* 제목(td) 자체를 왼쪽 기준으로 */
.management-table td.td_title,
.management-table td.td_title_answer {
    text-align: left !important;
    padding-left: 16px;
}

/* 제목 안 내용은 한 줄 정렬 */
.management-table td.td_title span,
.management-table td.td_title_answer span {
    display: inline;
    vertical-align: middle;
}

/* 답변 아이콘 위치 보정 */
.management-table td.td_title_answer img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

/* Q 표시 [Q] */
.management-table .s_blue {
    margin-right: 4px;
    font-weight: 700;
    color: #1D4ED8; 
}

.table_wrap .management-table tr:not(.table-header):hover .s_blue {
    color: #1D4ED8 !important;
}