@charset "utf-8";


/* 게시판 영역 */
.board-wrap {width: 100%; display: table; table-layout: fixed;}


/* 고정 핀 */
.notice-pin {padding: 5px;background: #ebe7f9;color: var(--theme-color);border-radius: 5px;margin-right: 15px;}
.notice-pin .material-icons {transform: rotate(45deg); font-size: 19px; position: relative; left: -1px;}

/* 게시판 헤더 */
.board-wrap .board-head {display: table-header-group; background:#f4f4f4;}
.board-wrap .board-head > span.board-head-tit {display: table-cell; text-align: center; font-size: 1.4rem; font-weight: 500; padding: 15px 0;font-weight:700;}
.board-wrap .board-head > span.board-head-tit.num {width: 8%}
.board-wrap .board-head > span.board-head-tit.answer {width: 12%}
.board-wrap .board-head > span.board-head-tit.title {width: calc(100% - 50%)}
.board-wrap .board-head > span.board-head-tit.file {width: 12%}
.board-wrap .board-head > span.board-head-tit.date {width: 18%}

@media(max-width:1024px) {
	.board-wrap .board-head > span.board-head-tit {font-size:1.3rem;}
}

@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 .notice-pin {margin-right:0}
.board-wrap .board-body > div.board-cell {display: table-cell; vertical-align: middle; font-size: 1.35rem; text-align: center; padding: 12px 5px; border-bottom: 1px solid #d5d5d5; 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.pin > div.board-cell {font-weight:600}
.board-wrap .board-body > div.board-cell:hover.cell-tit {text-decoration: underline;}
.board-wrap .board-body > div.board-cell.waiting {color:#939393;}
.board-wrap .board-body > div.board-cell.answer {color:var(--theme-color); font-weight:600}
span.notice-pin img {width:16px; height: 14px; position: relative; top: -2px}
.mo-notice-pin {display: none}

@media(max-width:1024px) {
	.board-wrap .board-body > div.board-cell {font-size: 1.3rem}
}

@media(max-width:  768px) {
	.board-wrap .board-body.pin {border:1px solid #ddd1ff; background:#f9f7ff}
	.board-wrap .board-body:hover  {border:1px solid var(--theme-color)}
	.board-wrap .board-body > div.board-cell:hover.cell-tit {text-decoration: none}
	.board-wrap .board-body {padding: 15px 8px; display: block; margin-bottom:12px; border-radius:5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border:1px solid #e5e5e5;}
	.board-wrap .board-body > div.board-cell {border-bottom: 0; text-align: left; padding:5px; position: relative}
	.board-wrap .board-body > div.board-cell.cell-tit {display: block; padding-bottom:5px}		
	.mo-notice-pin {display: inline-block; margin-right: 8px;color: var(--theme-color);}	
	.mo-notice-pin .material-icons {transform: rotate(45deg); font-size: 19px; font-size:1.65rem}

	.board-wrap .board-body > div.board-cell.inline {display: inline-block; width: auto; margin-right: 15px}
	.board-wrap .board-body.pin .board-cell:not(.cell-tit),
	.board-wrap .board-body .board-cell:not(.cell-tit) {font-size: 1.2rem; padding-top: 5px; font-weight:300}
	.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: -7px; 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 > div.board-cell.num, 
	.board-wrap .board-body > div.board-cell.notice-pin-cell,
	.board-wrap .board-body > div.board-cell.file {display: none;}
}

@media(max-width:500px) {
	.board-wrap .board-body > div.board-cell.inline {margin-right:10px;}
}

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

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

.search-wrap {margin-bottom:25px}
.search-wrap .search-box {float: right}
.search-wrap .search-box .select-box {width: 110px; float:left}
.search-wrap .search-box .select-box select {border-right: 0; border-radius: 0;height: 35px; font-size: 1.3rem; border-radius:5px 0 0 5px}
.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; background:#fff; border-color:#c4c4c4}
.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; border-radius:0 5px 5px 0}
.search-wrap .search-box .btn-wrap button img {vertical-align: middle}

@media(max-width: 768px) {
	.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;}
	.search-wrap .search-box .input-box input[type="text"].text-input {width: 100%;}
	.search-wrap .search-box .input-box {width: calc(100% - 136px)}
	.search-wrap .search-box .btn-wrap button img {width:16px; vertical-align: top; padding-top:8px}
}

/* detail */

.d-head .d-tit {border-bottom:1px solid #e5e5e5; border-top:1px solid #d3d3d3; position: relative}
.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 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 .material-icons {font-size:20px;padding: 2px;
    border-radius: 3px; transition: background .2s ease}
.d-control-wrap .prev-next.empty .control-btn .material-icons {color:#b3b3b3;}
.d-control-wrap .prev-next:hover .control-btn .material-icons {background: #ebe7f9;}
.d-control-wrap .prev-next.empty:hover .control-btn .material-icons {background:transparent}

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