/* 공통 */
.h5{ font-size:18px; font-weight:bold; }

/* 목록 카드. 사이트는 Bootstrap 4라 row-cols-md-3이 적용되지 않는다. */
#gallery_3_col {
	display: flex;
	flex-wrap: wrap;
	margin: 10px -10px 20px;
}
#gallery_3_col > .col {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	width: 33.3333%;
	padding: 10px;
	box-sizing: border-box;
}
#gallery_3_col .card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #e6e6e6;
	border-radius: 2px;
	background: #fff;
	overflow: hidden;
	box-shadow: none;
}
#gallery_3_col .card img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
	background: #111;
}
#gallery_3_col .b5-card-chk {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	margin: 0;
	line-height: 0;
}
#gallery_3_col .b5-card-chk input {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
}
#gallery_3_col .card-body {
	padding: 12px 12px 14px;
}
#gallery_3_col .card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: #222;
}
#gallery_3_col .card-title a {
	color: #222;
	text-decoration: none;
}
#gallery_3_col .card-title .fa {
	margin-right: 4px;
	color: #333;
}
@media (max-width: 991px) {
	#gallery_3_col > .col {
		flex-basis: 50%;
		max-width: 50%;
		width: 50%;
	}
}
@media (max-width: 575px) {
	#gallery_3_col > .col {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}
}

/* 배너 바로 아래에 붙지 않게 목록 위쪽 여백을 둔다. */
.b5-list,
.b5-view {
	padding-top: 60px;
	padding-bottom: 90px;
}
.b5-view-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 16px 0 0;
	padding: 18px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	color: #777;
	font-size: 13px;
	line-height: 1.4;
}
.b5-view-meta-side {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}
.b5-view-meta i {
	margin-right: 5px;
	color: #8a8a8a;
}
.b5-search {
	display: flex;
	align-items: center;
	gap: 8px;
}
.b5-search select,
.b5-search input[type="text"] {
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	border: 1px solid #d7d7d7;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-family: "Noto Sans KR", sans-serif;
}
.b5-search select {
	flex: 0 0 110px;
	width: 110px;
	padding: 0 8px;
}
.b5-search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 12px;
}

/* 그누보드 default.css의 .btn{font-size:1.4em}이 이 스킨 버튼을 키운다.
   목록 관리 버튼을 일반 외곽선 버튼과 글쓰기 채움 버튼으로 맞춘다. */
.b5-list a.btn,
.b5-list button.btn,
.b5-write a.btn,
.b5-write button.btn,
.b5-view a.btn,
.b5-view button.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 36px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #d7d7d7;
	border-radius: 4px;
	background: #fff;
	color: #555;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	flex-shrink: 0;
	cursor: pointer;
}
.b5-list a.btn:hover,
.b5-list a.btn:focus,
.b5-list button.btn:hover,
.b5-list button.btn:focus,
.b5-write a.btn:hover,
.b5-write a.btn:focus,
.b5-write button.btn:hover,
.b5-write button.btn:focus,
.b5-view a.btn:hover,
.b5-view a.btn:focus,
.b5-view button.btn:hover,
.b5-view button.btn:focus {
	background: #f7f7f7;
	color: #222;
	text-decoration: none;
}
.b5-list .b5-btn-icon,
.b5-write .b5-btn-icon {
	width: 36px;
	padding: 0;
}
.b5-list a.b5-btn-solid,
.b5-list button.b5-btn-solid,
.b5-write a.b5-btn-solid,
.b5-write button.b5-btn-solid,
.b5-view a.b5-btn-solid,
.b5-view button.b5-btn-solid {
	background: #3a3a3a;
	border-color: #3a3a3a;
	color: #fff;
}
.b5-list a.b5-btn-solid:hover,
.b5-list a.b5-btn-solid:focus,
.b5-list button.b5-btn-solid:hover,
.b5-list button.b5-btn-solid:focus,
.b5-write a.b5-btn-solid:hover,
.b5-write a.b5-btn-solid:focus,
.b5-write button.b5-btn-solid:hover,
.b5-write button.b5-btn-solid:focus,
.b5-view a.b5-btn-solid:hover,
.b5-view a.b5-btn-solid:focus,
.b5-view button.b5-btn-solid:hover,
.b5-view button.b5-btn-solid:focus {
	background: #2c2c2c;
	border-color: #2c2c2c;
	color: #fff;
}
.b5-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}
.b5-list .b5-actions {
	gap: 4px;
}
.b5-empty {
	margin: 70px 0 40px;
	text-align: center;
	font-size: 16px;
	color: #666;
}

.b5-write {
	padding-top: 60px;
	padding-bottom: 90px;
}
.b5-field {
	margin: 0 0 18px;
}
.b5-field > label:not(.b5-check),
.b5-label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: #243040;
}
.b5-field > input[type="text"],
.b5-field > input[type="password"],
.b5-field > input[type="file"],
.b5-field > select,
.b5-subject > input[type="text"] {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #d7d7d7;
	border-radius: 4px;
	background: #fff;
	color: #243040;
	font-size: 14px;
	font-family: "Noto Sans KR", sans-serif;
	line-height: 1.4;
}
.b5-field > input[type="file"] {
	height: auto;
	padding: 8px 10px;
}
.b5-field > select {
	appearance: auto;
}
.b5-subject {
	display: flex;
	align-items: center;
	gap: 8px;
}
.b5-subject > input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
}
.b5-help {
	margin: 6px 0 0;
	font-size: 13px;
	color: #6b7785;
	line-height: 1.5;
}
.b5-checks,
.b5-field > .b5-check {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}
.b5-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: #243040;
	cursor: pointer;
}
.b5-check input {
	width: 16px;
	height: 16px;
	margin: 0;
}
.b5-write .wr_content,
.b5-write .wr_content textarea {
	width: 100%;
	max-width: 100%;
}
.b5-write .wr_content textarea {
	display: block;
	box-sizing: border-box;
	min-height: 220px;
	padding: 12px;
	border: 1px solid #d7d7d7;
	border-radius: 4px;
	font-size: 14px;
	font-family: "Noto Sans KR", sans-serif;
	line-height: 1.6;
}
.b5-write .b5-actions {
	margin-top: 8px;
}
#char_count_desc,
#char_count_wrap {
	margin: 0 0 8px;
	font-size: 13px;
	color: #6b7785;
}

/* 동영상 */
.b5-view .b5-view-video {
	margin-top: 8px;
	margin-bottom: 40px;
}
.b5-view #bo_v_con,
.b5-view #bo_v_con p,
.b5-view #bo_v_con li,
.b5-view #bo_v_con div,
.b5-view #bo_v_con span,
.b5-view #bo_v_con td {
	font-size: 14px;
	line-height: 1.8;
	color: #333;
}
.b5-view #bo_v_con {
	margin-top: 8px;
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.popup_youtube, .popup_imgview { cursor: pointer; }

#youtubeModal,
#imgviewModal {
	z-index: 2000;
}
#youtubeModal .modal-dialog,
#imgviewModal .modal-dialog {
	max-width: 860px;
}
#youtubeModal .modal-content,
#imgviewModal .modal-content {
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
#youtubeModal .modal-header,
#imgviewModal .modal-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid #ececec;
}
#youtubeModal .modal-title,
#imgviewModal .modal-title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #333;
}
#youtubeModal .modal-title span,
#imgviewModal .modal-title span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#youtubeModal .b5-modal-x,
#imgviewModal .b5-modal-x {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #666;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
#youtubeModal .modal-body,
#imgviewModal .modal-body {
	padding: 16px 18px 6px;
}
#imgviewModal .modal-body img {
	display: block;
	width: 100%;
	height: auto;
}
#youtubeModal .modal-footer,
#imgviewModal .modal-footer {
	display: flex;
	justify-content: flex-end;
	padding: 10px 18px 16px;
	border-top: 0;
}
#youtubeModal .b5-modal-close,
#imgviewModal .b5-modal-close {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 17px;
	background: #6c757d;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}


/* board btn 영역 */
#mj-board-btn-wrap{ margin-top: 28px; margin-bottom: 2.5rem;}
#mj-board-btn-wrap .b5-actions,
#mj-board-comment-wrap .b5-actions { gap: 4px; }
#mj-board-btn-wrap .btn,
#mj-board-comment-wrap .b5-actions .btn{ margin: 0; }
#mj-board-comment-wrap .b5-actions { margin-top: 28px; }

#autosave_wrapper {position:relative}
#autosave_pop {display:none;z-index:10;position:absolute !important;top:34px;right:0;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #565656;background:#fff;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
#autosave_pop:before {content:"";position:absolute;top:-8px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #000 transparent}
#autosave_pop:after {content:"";position:absolute;top:-7px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */
#autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden}
#autosave_pop div {text-align:center;margin:0 !important}
#autosave_pop button {margin:0;padding:0;border:0}
#autosave_pop ul {padding:15px;border-top:1px solid #e9e9e9;list-style:none;overflow-y:scroll;height:130px;border-bottom:1px solid #e8e8e8}
#autosave_pop li {padding:8px 5px;border-bottom:1px solid #fff;background:#eee;zoom:1}
#autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop a {display:block;float:left}
#autosave_pop span {display:block;float:right;font-size:0.92em;font-style:italic;color:#999}
.autosave_close {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em}
.autosave_close:hover {background:#f3f3f3;color:#3597d9}
.autosave_content {display:none}
.autosave_del {background:url(./img/close_btn.png) no-repeat 50% 50%;text-indent:-999px;overflow:hidden;height:20px;width:20px}

/* view.skin */
.board-content img{ width:30px; border-radius:50%; }
.media-body img{ width:30px; border-radius:50%; }

/* 댓글 */
#mj-board-comment-wrap .board-comment .media-left { float:left; }
#mj-board-comment-wrap .board-comment { margin-top:30px; }
#mj-board-comment-wrap .board-comment .media-list{ margin-bottom:30px; border:1px solid rgba(0,0,0,.125); border-radius:3px; padding:10px 20px; }
#mj-board-comment-wrap .board-comment .media-list li{ border-bottom:1px solid rgba(0,0,0,.125); padding-top:10px; }
#mj-board-comment-wrap .board-comment .media-list li:last-child{ border-bottom:none; }
#mj-board-comment-wrap .board-comment .media-body img{ width:30px; border-radius:50%; }
#mj-board-comment-wrap .board-comment .media-left { float:left; }

.row_subject_wrap{ margin:20px 0;  }
.b_prev{  padding: 20px 0; border-bottom:1px solid #ced4da; }
.b_next{  padding: 20px 0; border-bottom:1px solid #ced4da;; }
.b_title{ font-weight:bold; }


.txt-left{ text-align:left !important;}
.txt-right{ text-align:right  !important;}

.board-file{ margin-bottom:30px; }
.board-link{ margin-bottom:30px; }
.board-comment{ margin-bottom:30px; }
.board-prev-next{ margin-bottom:30px; }
.b5-pn {
	margin: 8px 0 28px;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}
.b5-pn-row {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 54px;
	padding: 14px 2px;
	border-top: 1px solid #e5e5e5;
	color: #222;
	font-size: 15px;
	line-height: 1.5;
}
.b5-pn-row:first-child {
	border-top: 0;
}
.b5-pn-label {
	flex: 0 0 64px;
	font-weight: 700;
	color: #222;
}
.b5-pn-row .fa {
	flex: 0 0 14px;
	width: 14px;
	color: #c8c8c8;
	font-size: 16px;
	text-align: center;
}
.b5-pn-row a {
	color: #333;
	font-weight: 400;
	text-decoration: none;
}
.b5-pn-row a:hover {
	color: #111;
}
.b5-pn-empty {
	color: #999;
}


@media (max-width: 767px) {
.txt-left{ text-align:left !important;}
.txt-right{ text-align:left !important;}
}

.board-title-wrap{ border:1px solid #e5e5e5; border-radius:5px; }
.board-title-box{ padding:15px;  }
.board-title-box .category_wrap{ padding:0px; margin:0px; }
.board-title-box h2{ font-size:26px; padding:0px 0px 10px 0px; margin:0px; }