@charset "utf-8";


.board-wrap {width: 100%; display: table; table-layout: fixed; margin-top: 15px; border-top: 1px solid #222;}

/************************************** 게시판 헤더 **************************************/
.board-wrap .board-head {display: table-header-group; }
.board-wrap .board-head > span.board-head-tit {display: table-cell; text-align: center; font-size: 1.4rem; font-weight: 500; border-bottom: 1px solid #d2d2d2; padding: 12px 0}
.board-wrap .board-head > span.board-head-tit.num {width: 11%}
.board-wrap .board-head > span.board-head-tit.view {width: 7%}
.board-wrap .board-head > span.board-head-tit.title {width: calc(100% - 42%)}
.board-wrap .board-head > span.board-head-tit.writer {width: 12%}
.board-wrap .board-head > span.board-head-tit.date {width: 12%}

@media (max-width: 768px) {
	.board-wrap .board-head { display: none;position: absolute; top: -9999px; left: -9999px;}
}

/************************************** 게시판 바디 **************************************/
.board-wrap .board-body {display: table-row; width: 100%}
.board-wrap .board-body.pin {background-color: #f5f5f5}
.board-wrap .board-body > div.board-cell {display: table-cell; vertical-align: middle; font-size: 1.4rem; text-align: center; padding: 12px 5px; border-bottom: 1px solid #e5e5e5; color: #222; }
.board-wrap .board-body > div.board-cell.cell-tit {text-align: left}
.board-wrap .board-body > div.board-cell.cell-tit a {display: block;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.board-wrap .board-body > div.board-cell:hover.cell-tit {text-decoration: underline;}
span.notice-pin img {width: 15px; height: 15px; position: relative; top: 2px}
.mo-notice-pin {display: none}

@media(max-width:  768px) {
	.board-wrap .board-body {padding: 8px 0; display: block; border-bottom: 1px solid #e5e5e5}
	.board-wrap .board-body > div.board-cell {border-bottom: 0; text-align: left; padding: 3px 5px; position: relative}
	.board-wrap .board-body > div.board-cell.cell-tit {display: block}	
	.board-wrap .board-body > div.board-cell.num, .board-wrap .board-body > div.board-cell.notice-pin-cell {display: none;}
	.mo-notice-pin img {width: 13px; height: 13px; position: relative; top: 3px}
	.mo-notice-pin {display: inline-block; margin-right: 5px}
	.board-wrap .board-body > div.board-cell {font-size: 1.4rem}
	.board-wrap .board-body > div.board-cell.inline {display: inline-block; width: auto; margin-right: 15px}
	.board-wrap .board-body .board-cell:not(.cell-tit) {font-size: 1.2rem; padding-top: 5px}
	.board-wrap .board-body .board-cell:not(.cell-tit, .notice-pin-cell):before {padding-right: 5px;color: #7E7E7E; content: attr(data-label); font-weight: 600}
	.board-wrap .board-body .board-cell:after {content: ''; width: 1px; height: 10px; background-color:#e2e2e2; top: 7px; right: -10px; position: absolute}
	.board-wrap .board-body .board-cell:first-child:after, .board-wrap .board-body .board-cell.cell-tit:after, .board-wrap .board-body .board-cell:last-child:after {content: none}
}

@media(max-width: 500px) {
	.board-wrap {margin-top: 5px}
}


.empty-area {text-align: center; padding: 15px 0; font-size: 1.4rem}

/************************************** 게시판 검색 박스 **************************************/

.search-wrap .search-box {float: right}
.search-wrap .search-box .select-box {width: 110px;}
.search-wrap .search-box .select-box select {border-right: 0; border-radius: 0;height: 35px; font-size: 1.3rem}
.search-wrap .search-box .input-box {float: left;}
.search-wrap .search-box .input-box input[type="text"].text-input {border-right: 0; border-radius: 0;height: 35px; width: 200px}
.search-wrap .search-box .btn-wrap {float: left}
.search-wrap .search-box .btn-wrap button {padding: 0 19px; border-radius: 0; min-width: 50px; height: 35px; line-height: 35px}
.search-wrap .search-box .btn-wrap button img {vertical-align: middle; position: relative; top:-3px}

@media(max-width: 500px) {
	.search-wrap .search-box {float: none; width: 100%}
	.search-wrap .search-box .select-box {width: 80px;}
	.search-wrap .search-box .select-box select {font-size: 1.2rem; height: 30px; padding:0 10px 0 10px}
	.search-wrap .search-box .input-box input[type="text"].text-input {width: 100%; height: 30px;}
	.search-wrap .search-box .input-box {width: calc(100% - 136px)}
	.search-wrap .search-box .btn-wrap button {height: 30px}
	.search-wrap .search-box .btn-wrap button img {width:15px; height:15px;}
}


/* detail */
.d-head {background:#f7f7f7}
.d-head .d-tit {border-bottom:1px solid #e5e5e5; border-top:1px solid #d3d3d3; position: relative}
.d-head .d-tit .notice-pin {position:relative; margin-right:10px; top:4px;}
.d-head .d-tit h2 {font-size:2rem;padding: 20px 100px 20px 10px; font-weight:600; line-height:27px}
.d-head .d-info {padding-right: 10px; position: relative; font-size:1.45rem; color:#888; position:absolute; right:0; top:25px}
.d-content {padding:20px 10px; border-bottom:1px solid #d5d5d5;}
.d-content p { font-size:1.5rem; line-height:23px;}
.d-content img {max-width:100%;}
.d-content video {max-width:100%;}
.d-content .file-set-wrap {padding-top:30px;}
.d-content .file-set-wrap .file-tit {float:left; vertical-align: middle; margin-right:10px; font-size:1.5rem; font-weight:600;}
.d-content .file-set-wrap .add-file-wrap {float:left;}
.d-foot {margin-top:20px}

@media(max-width:768px) {
	.d-head .d-tit h2 {font-size:1.7rem; padding: 15px 85px 15px 10px;}
	.d-head .d-tit .notice-pin {margin-right:8px; top:4px;}
	.d-head .d-tit .notice-pin img {width:16px; height:16px;}
	.d-head .d-info {font-size:1.3rem; top:21px}
	.d-content p {font-size:1.4rem; line-height:20px;}
	
}

@media(max-width:500px) {
	.d-head .d-tit .notice-pin {top:0;}
	.d-head .d-tit h2 {padding:15px 0 10px;text-align: center; line-height:21px;}
	.d-head .d-tit .notice-pin img  {width:14px; height:14px;}
	.d-head .d-info {position:static; text-align: center; padding-bottom:15px; padding-right:0}
	.d-content {padding:15px 0;}
	.d-foot .btn-wrap {text-align: center;}
	.d-foot .btn-wrap button {float:none; font-size:1.3rem; height:30px;}
}

/* 검색 시 게시글 없을떄 */
.board-empty-cell { font-size: 1.4rem; color:#777;text-align: center; border-bottom: 1px solid #d2d2d2; padding: 50px 0}

@media(max-width:768px) {
	.board-empty-cell {font-size:1.2rem;}
}

/* 이전글 다음글 영역 */
.d-control-wrap .prev-next {position:relative; padding:15px 10px; border-bottom:1px solid #e5e5e5;}
.d-control-wrap .prev-next a {display:block;}
.d-control-wrap .prev-next p {padding-right: 32px;font-size: 1.4rem;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.d-control-wrap .prev-next.empty p {color:#b3b3b3;}
.d-control-wrap .prev-next:hover p{text-decoration: underline; }
.d-control-wrap .prev-next.empty:hover p {text-decoration: none;}
.d-control-wrap .prev-next .control-btn {position:absolute; right:0px; top:12px}
.d-control-wrap .prev-next .control-btn img {width:24px; height:24px;}
.d-control-wrap .prev-next.empty .control-btn img {opacity:0.4;}

@media(max-width:500px) {
	.d-control-wrap .prev-next {padding:15px 0;}
	.d-control-wrap .prev-next p {font-size:1.3rem}
}


/* 첨부파일 */
.added-file { display: inline-block; cursor: pointer; background: #e8e8e8; height: 33px; line-height: 32px; padding: 0 20px; border-radius: 30px; margin-right: 10px; font-size:1.3rem; color:#424242 ; margin: 3px 10px 3px 0; font-weight: 600; }
.added-file:last-of-type { margin-right: 0; }
.added-file:hover {background: #e0e0e0}
.added-file img { margin-right: 1px;opacity: 0.7;	width: 21px;position: relative;top: 6px; height:auto;}

@media(max-width: 768px) {
	.added-file {font-size: 1.3rem}
}

@media(max-width: 500px) {
	.added-file {font-size: 1.2rem}
}

.detail .list-btn { width:200px; height:40px; margin: 0 auto; margin-top:40px; background:#2ea7e0; text-align: center;}
.detail .list-btn button { background: none; border: 0; color: #fff; font-size:1.4rem; width: 100%; height: 100%; transition:background .3s ease;}
.detail .list-btn button:hover {background:#098dcb}