@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: 8%}
.board-wrap .board-head > span.board-head-tit.view {width: 7%}
.board-wrap .board-head > span.board-head-tit.title {width: calc(100% - 39%)}
.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.pin div.board-cell.pin-txt .txt { font-size: 12px; display: inline-block; background: #3ca54e; padding: 0 7px; border-radius: 3px; color: #fff; }
.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;}

@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 {display: none;}
	.board-wrap .board-body > div.board-cell {font-size: 1.4rem}
	.board-wrap .board-body > div.board-cell.inline {display: inline-block; width: auto; }
	.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):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}

	.board-wrap .board-body.pin > div.board-cell.pin-txt { display: table-cell; float: left; width: 50px;  }
	.board-wrap .board-body.pin > div.board-cell.cell-tit { float: left; width: calc(100% - 50px); }
}

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


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


/* board detail */
.board-detail { position: relative; }
.board-detail .head { padding:30px 0; border-top: 1px solid #333; border-bottom:1px solid #e5e5e5; }
.board-detail .head h3 {font-size: 2.5rem; font-weight: 500; margin-bottom: 15px;}
.board-detail .head ul li {display: inline-block; font-size: 1.4rem; margin-right: 15px; color: #333}
.board-detail .head ul li span {font-weight: 500; display: inline-block; margin-right: 5px}
.board-detail .text {padding: 30px 0; font-size: 1.4rem; border-bottom: 1px solid #e5e5e5}
.board-detail .text img {max-width: 100%;}
.board-detail .file { background: #f2f2f2; border-bottom: 1px solid #e5e5e5; padding:10px;}
.board-detail .file span {font-weight: 600; display: inline-block; padding-right: 50px;}
.board-detail .file a:hover {text-decoration: underline;}

@media all and (max-width: 500px) {
	/* board-detail */
	.board-detail .head h3 {font-size: 2rem;}
	.board-detail .head ul li {margin-right: 7px;}
	.board-detail .head ul li span.s01 {margin-right: 0;}
}

.btn-wrap button { display: block !important; text-align: center;}