/* 검색 */
.search_box {display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 60px;}
.search_box select {width: 160px;}
.search_box .search_input {position: relative; display: flex; align-items: stretch; flex-wrap: wrap; width: 600px;}
.search_box .search_input input {margin: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; width: 1%; flex: 1 1 auto; min-width: 0; padding-right: 40px;}
.search_box .search_input button {margin: 0; width: 50px; height: 50px; font-size: 24px; font-weight: 600;}
.search_box .search_input button.search_btn {border: 1px solid #eee; border-width: 1px 1px 1px 0; border-radius: 0 10px 10px 0; color: var(--mitc-main);}
.search_box .search_input button.search_btn > i {vertical-align: middle;}
.search_box .search_input button.search_reset {position: absolute; top: 0; right: 50px; background: url('/images/page/common/icon_reset.png') no-repeat 50% 50%; background-size: auto 16px; border-radius: 0;}

/* 카테고리 */
.cate {display: inline-block; min-width: 60px; padding: 3px 10px; font-size: 1rem; font-weight: 600; color: #fff; border-radius: 5px; background-color: #ddd; text-align: center;}
.cate.cate1 {background-color: #27A0CC;}
.cate.cate2 {background-color: var(--mitc-sub);}

/* 상태 */
.state {display: inline-block; min-width: 60px; padding: 3px 10px; font-size: 1rem; font-weight: 600; color: #fff !important; border-radius: 5px; background-color: #ddd; text-align: center;}
.state.open {background-color: var(--mitc-sub);}
.state.close {background-color: var(--mitc-gray);}

/* 제목 아이콘 링크 */
.subject > .tit {position: relative; display: block; width: fit-content; max-width: 100%; padding-right: 30px; text-align: left;}
.subject > .tit .icon {position: absolute; right: 0; bottom: 0; display: inline-block; vertical-align: middle; margin: 0; color: var(--mitc-main);}

/* 일반 게시판 */
.bbsList {width: 100%; border-top: 2px solid #333; table-layout: fixed;}
.bbsList thead th {padding: 14px 14px; text-align: center; font-weight: 600; background: #F9FAFB; border-bottom: 1px solid #eee; border-right: 1px solid #eee; vertical-align: middle;}
.bbsList thead th:last-child {border-right: 0;}
.bbsList tbody td {padding: 14px 14px; text-align: center; color: #666; border-bottom: 1px solid #eee; vertical-align: middle;}
.bbsList tbody th {padding: 14px 14px; font-weight: 600; background: #F9FAFB; border-bottom: 1px solid #eee; vertical-align: middle;}
.bbsList.left tbody td {text-align: left;}
.bbsList small {display: block; color: #1db9bc;}

.bbsList .cont_box {padding: 12px 12px; border-radius: 5px;}
.bbsList .dl_bd_list {text-align: left;}
.bbsList .dl_bd_list dt {font-size: 1rem; width: 100px;}
.bbsList .dl_bd_list dd {font-size: 1rem; width: calc(100% - 80px);}

.mobile.bbsList .m_view {display: none;}

.bbsList .desc_list > li span {color: #999; margin-right: 10px;}

.tb_txt {position: relative; font-size: 15px; color: var(--mitc-gray); word-break: keep-all; padding: 3px 0; padding-left: 15px;}
.tb_txt:before {content: '※'; font-size: inherit; position: absolute; left: 0; color: var(--mitc-main);}

/* 일반게시판 상세보기 */
.bbsView {width: 100%; border-top: 2px solid #000; border-bottom: 1px solid #eee;}
.bbsView .bbsView_header {padding-top: 40px; text-align: center;}
.bbsView .bbsView_header h3 {display: inline-block; font-size: 30px; font-weight: 700; vertical-align: middle;}
.bbsView .bbsView_header .state {margin-right: 10px; vertical-align: middle;}
.bbsView .bbsView_header .bbsTbView {border-top: 1px solid #eee;}
.bbsView .bbsView_header .bbsTbView th {text-align: center; word-break: keep-all;}
.bbsView .bbsView_info {font-size: 0; padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee;}
.bbsView .bbsView_info * {display: inline-block; font-size: 16px; color: #666;}
.bbsView .bbsView_info dt {font-weight: 800;}
.bbsView .bbsView_info dd {padding-left: 20px; margin-right: 40px;}
.bbsView .bbsView_info dd:last-child {margin-right: 0;}
.bbsView .bbsView_info ~ .bbsTbView {border-top: 0;}
.bbsView .bbsView_body {border-bottom: 0; padding-bottom: 30px;}
.bbsView .bbsView_body p {font-size: 1rem; color: #000; font-weight: 400; word-break: keep-all;}
.bbsView .bbsView_content {border-width: 1px 0 1px 0; padding: 0 0 40px;}


.bbsTbView {width: 100%; border-top: 2px solid #333;}
.bbsTbView tbody th,
.bbsTbView tbody td {padding: 12px 12px; border-bottom: 1px solid #eee; vertical-align: middle;}
.bbsTbView tbody th {background: #F9FAFB; font-weight: 600;}
.bbsTbView tbody td {color: #666;}


/* 작성페이지 */
.bbsForm {width: 100%; border-top: 2px solid #111; border-bottom: 1px solid #eee; padding: 30px 0;}
.bbsForm .form_group {font-size: 0;}
.bbsForm .form_group + .form_group {margin-top: 40px;}
.bbsForm .form_group .form_label {display: inline-block; width: 240px; font-size: 17px; font-weight: 600; vertical-align: top;}
.bbsForm .form_group .form_field {display: inline-block; width: calc(100% - 240px);}
.bbsForm .form_group .form_field .input_unit {font-size: 1rem; vertical-align: middle;}

/* 첨부파일 */
/* file drag zone */
/* .drag_file_box {margin: 2px 3px;} */
.dropzone {display:block; border: 1px dashed #eee; padding: 20px 20px; text-align: center; transition: all .3s; border-radius: 10px;}
.dropzone * {color: #666;}
.dropzone strong {text-decoration: underline;  text-underline-position: under;}
.dropzone img.drag_icon {width:24px; height:24px;}
.dropzone:hover {border: 1px solid #ddd;}
.dropzone.dragging {border: 1px solid #ddd;}
.drag_file_box .file_preview {max-height: 120px; background-color: rgba(30, 31, 36, .02); border: 2px solid rgba(30, 31, 36, .05); border-radius: 10px 0 0 10px; overflow-y: auto; margin-top: 10px;}

.file_preview ul {display: flex; flex-wrap: wrap;}
.file_preview ul li {position: relative; display: flex; align-items: center; width: 50%; border-bottom: 1px solid #eee; padding: 20px 20px; margin-bottom: 20px;}
.file_preview ul li .img {position: relative; display: table; width: 80px; height: 80px; overflow: hidden; background-color: #fff; text-align: center; border: 1px solid #eee;}
.file_preview ul li .img:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .3;}
.file_preview ul li .img > img {position: absolute; top:0; bottom:0; right:0; left:0; margin:auto; width: 100%; height: 100%; object-fit:scale-down; z-index: 1;}
.file_preview ul li .txt {width: calc(100% - 80px); padding-left: 20px; font-size: 1rem;}
.file_preview ul li .txt strong{font-weight:400;}
.file_preview ul li .txt p {color: #666;}

.file_preview .btn-icon {width:15px; height:15px; display:inline-block; border:none; padding:0; border:none; background:none; margin-left:5px;}
.file_preview .close_icon{position:relative; width:100%; height:100%; display:block;}
.file_preview .btn-icon .close_icon:before,.file_preview .btn-icon .close_icon:after{content:''; width:10px; height:2px; border-radius:1px; background:#dc4252; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}
.file_preview .close_icon:before{ transform:rotate(45deg);}
.file_preview .close_icon:after{transform:rotate(-45deg);}

.file_list {margin-top:10px; background-color: rgba(30, 31, 36, .02); border: 2px solid rgba(30, 31, 36, .05); border-radius: 10px; padding:20px; display:flex; overflow-y: auto;}
.file_list ul{display: inline-block; width: 100%;}
.file_list li{display: block; position:relative; font-size: 15px; letter-spacing: 0;}
.file_list li + li{margin-top:5px;}
.file_list li * {display: inline; vertical-align: middle; color: #666;}

.file_list .btn-icon {width:15px; height:15px; display:inline-block; border:none; padding:0; border:none; background:none; margin-left:5px;}
.file_list .close_icon{position:relative; width:100%; height:100%; display:block;}
.file_list .btn-icon .close_icon:before,
.file_list .btn-icon .close_icon:after {content:''; width:10px; height:2px; border-radius:1px; background:#dc4252; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}
.file_list .close_icon:before{ transform:rotate(45deg);}
.file_list .close_icon:after{transform:rotate(-45deg);}

/* 이전글 다음글 */
.view_paging {position: relative; padding-top: 50px;}
.view_ctrl {position: absolute; bottom: 0;}
.view_ctrl:before, .view_ctrl:after { content: ''; display: inline-block; width: 60px; height: 60px; background: no-repeat 50% 50%; background-size: auto 24px; border: 1px solid #eaeaea; border-radius: 50%; vertical-align: middle; transition: border .3s;}
.view_ctrl:hover:before, .view_ctrl:hover:after {border-color: #999;}
.view_paging .prev_btn {left: 0;}
.view_paging .next_btn {right: 0;}
.view_paging .prev_btn:after, .view_paging .next_btn:before {content: none;}
.view_paging .prev_btn:before {background-image: url('/images/page/common/icon_bbs_prev.png');}
.view_paging .next_btn:after {background-image: url('/images/page/common/icon_bbs_next.png');}
.view_ctrl .txt {display: inline-block; vertical-align: middle; color: #666; margin: 0 10px;}
.view_ctrl .txt > b { display: block; color: #333;}


/* 포토 게시판 */
.photoList {font-size: 0; display: flex; flex-wrap: wrap; gap: 20px 20px;}
.photoList li {display: inline-block; font-size: 1rem; width: calc(25% - 15px); border-radius: 10px; overflow: hidden; border: 2px solid rgba(30, 31, 36, .05); background-color: rgba(30, 31, 36, .02);}
.photoList .img_box {position: relative; display: block; overflow: hidden; width: 100%; padding-top: 55%; background: #fff url('/images/page/board/noimage.jpg') no-repeat 50% 50%; text-align: center;}
.photoList .img_box img {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 100%; object-fit: cover;}
.photoList .txt_box .top {padding: 30px 20px;}
.photoList .txt_box .tit {position: relative; font-size: 18px; font-weight: 600;}
.photoList .txt_box .bottom {overflow: hidden; border-top: 1px solid #eee;}
.photoList .txt_box .bottom .writer {width: 120px; float: left; border-right: 1px solid #eee; padding: 14px 20px; text-align: center;}
.photoList .txt_box .bottom .date {width: calc(100% - 120px); float: left;  padding: 14px 20px; text-align: right;}
.photoList .txt_box .bottom .date > span {color: #666;}
.photoList li.nodata {width: 100%; padding: 40px 20px; background-color: transparent;}


/* pagination */
.pagination {text-align: center; font-size: 0; margin-top: 80px;}
.pagination .page_item {position: relative; display: inline-block; width: 40px; height: 40px; line-height: 38px; border: 1px solid transparent; border-radius: 10px; font-size: 16px; color: #999; font-weight: 600; margin: 0 3px; transition: all .2s;}
.pagination .page_item:hover {color: var(--mitc-main); background-color: rgba(202, 31, 28, .1);}
.pagination .page_item.on {background-color: var(--mitc-main); border-color: var(--mitc-main); color: #fff; box-shadow: 0 5px 10px 0 rgba(202, 31, 28, .1);}
.pagination .page_control {display: inline-block; vertical-align: top;}
.pagination .page_control:first-child {margin-right: 10px;}
.pagination .page_control:last-child {margin-left: 10px;}
.pagination .page_control .page_item {background: no-repeat 50% 50%; background-size: auto 24px;}
.pagination .page_control .page_item.page_first {background-image: url('../images/common/icon_bbs_first.png');}
.pagination .page_control .page_item.page_prev {background-image: url('../images/common/icon_bbs_prev.png');}
.pagination .page_control .page_item.page_next {background-image: url('../images/common/icon_bbs_next.png');}
.pagination .page_control .page_item.page_end {background-image: url('../images/common/icon_bbs_last.png');}

/* **************************************** *
 * responsive
 * **************************************** */
@media (max-width: 1440px) {
	/* 일반게시판 상세보기 */
	.bbsView .bbsView_header h3 {font-size: 26px;}
}

@media (max-width: 1280px) {
	/* 상태 */
	.state {font-size: 15px; font-weight: 400;}

	/* 포토 게시판 */
	.photoList .txt_box .tit {font-size: 16px;}

	/* pagination */
	.pagination {margin-top: 60px;}
}

@media (max-width: 1024px) {
	/* 검색 */
	.search_box {flex-direction: column; gap: 5px 0;}
	.search_box select {width: 100%;}
	.search_box .search_input {width: 100%;}
	.search_box .search_input button.search_btn {width: 40px; height: 40px;}
	.search_box .search_input button.search_reset {width: 40px; height: 40px; right: 40px;}

	/* table scroll */
	.scrollTable {overflow-x: auto; overflow-y: auto;}
	.scrollTable .bbsList {min-width: 640px; white-space: nowrap; table-layout: auto;}


	/* 일반 게시판 */
	.bbsList.mobile {border-top: 0;}
	.bbsList.mobile,
	.bbsList.mobile tbody,
	.bbsList.mobile tr,
	.bbsList.mobile td {display: block;}

	.mobile.bbsList .m_view {display: block;}
	.mobile.bbsList .m_view.state {display: inline-block; margin-bottom: 5px;}

	.bbsList.mobile tr {position: relative; margin-bottom: 20px; border: 1px solid #eee; border-radius: 10px;}
	.bbsList.mobile tbody td {text-align: left; padding: 16px 10px; border-bottom: 0;}
	.bbsList.mobile tbody td[data-tbl="subject"] {font-size: 16px; font-weight: 600;}

	.bbsList.mobile thead,
	.bbsList.mobile tbody td[data-tbl="num"],
	.bbsList.mobile tbody td[data-tbl="write"],
	.bbsList.mobile tbody td[data-tbl="date"],
	.bbsList.mobile tbody td[data-tbl="view"],
	.bbsList.mobile tbody td[data-tbl="state"],
	.bbsList.mobile tbody td[data-tbl="ect"] {display: none;}

	/* 일반게시판 상세보기 */
	.bbsView .bbsView_header h3 {font-size: 22px;}

	/* 포토 게시판 */
	.photoList li {width: calc(33.3% - 14px);}


	/* pagination */
	.pagination .page_item {width: 34px; height: 34px; line-height: 32px; font-size: 1rem;}


}

@media (max-width: 768px) {
	/* 검색 */
	.search_box {margin-bottom: 30px;}

	/* 일반게시판 상세보기 */
	.bbsView .bbsView_header h3 {font-size: 20px;}

	.bbsTbView,
	.bbsTbView tr,
	.bbsTbView tbody,
	.bbsTbView tbody th,
	.bbsTbView tbody td {display: block;}

	.bbsTbView tbody th {border-right: 0;}

	/* 포토게시판 */
	.photoList li {width: calc(50% - 10px);}
	.photoList .txt_box .top {padding: 20px 20px;}
	.photoList .txt_box .bottom .writer,
	.photoList .txt_box .bottom .date {padding: 10px 20px;}
}

@media (max-width: 576px) {
	/* 일반게시판 상세보기 */
	.bbsView .bbsView_header {padding-top: 30px;}
	.bbsView .bbsView_info {padding-top: 20px; padding-bottom: 20px;}

	/* 이전글 다음글 */
	.view_paging .view_ctrl {display: none;}

	/* 첨부파일 */
	/* file drag zone */
	.file_preview ul li {width: 100%;}

	/* 포토게시판 */
	.photoList li {width: 100%;}
}

@media (max-width: 420px) {
	/* 일반게시판 상세보기 */
	.bbsView .bbsView_header h3 {font-size: 18px;}
	.bbsView .bbsView_info * {font-size: 1rem;}

	/* pagination */
	.pagination .page_item {width: 30px; height: 30px; line-height: 28px; margin: 0;}

}