@charset "utf-8";

/* 게시판 카네고리 */
#bo_cate {}
#bo_cate .category {display:flex; display:-webkit-flex; justify-content:flex-start; align-items:center; -webkit-justify-content:flex-start; -webkit-align-items:center;}

/* 게시판 읽기 */
#bo_v_title {font-size:23px; font-weight:bold; line-height:1.4; letter-spacing:-1px;}
#bo_v_con {min-height:200px; word-break:break-all;overflow:hidden}
@media all and (max-width:575px) {
	.responsive #bo_v_title {font-size:20px; line-height:1.5;}
	.responsive #bo_v_con {min-height:140px;}
}

#bo_v_con img {max-width:100%; height:auto}
#bo_v_img {width:100%; overflow:hidden; text-align:center; zoom:1;}
#bo_v_img:after {display:block; visibility:hidden; clear:both; content:"";}
#bo_v_img a.view_image {display:block;}
#bo_v_img img {margin-bottom:1.0rem;}

/* 게시판 읽기 :SNS 공유 */
#bo_v_sns_icon {margin:-5px auto;}
#bo_v_sns_icon img {width:40px; margin:5px; border-radius:50%;}

/* 게시판 댓글 :내용 */
.cmt-reply {top:0; left:-16px;}
.cmt-content {word-break:break-all;overflow:hidden}
.cmt-content img {max-width:100%; height:auto}

/* 게시판 댓글 :쓰기폼 */
#fviewcomment #wr_content {resize:none;}
@media all and (max-width:575px) {
	.responsive .cmt-box {border-right:0 !important;}
	.responsive #bo_vc_w .cmt-box {border-left:0 !important; border-radius:0 !important;}
	.responsive #bo_vc_login {border-right:0 !important; border-left:0 !important; border-radius:0 !important;}
}

/* 게시판 댓글 :SNS 등록 */
#bo_vc_opt ol {margin:0; padding:0; border-radius:3px; background:#ccc; list-style:none; zoom:1;}
#bo_vc_opt ol:after {display:block; visibility:hidden; clear:both; content:"";}
#bo_vc_opt ol li {float:left; margin:0;}
#bo_vc_send_sns ul {margin:0; padding:0; list-style:none; zoom:1;}
#bo_vc_send_sns ul:after {display:block; visibility:hidden; clear:both; content:"";}
#bo_vc_send_sns ul li {float:left; margin:0 1.0rem 0 0;}
#bo_vc_send_sns input {margin:0 0 0 0.5rem;}

/* 게시판 쓰기 */
#bo_w .list-group-item {padding-right:0; padding-left:0; border-right:0; border-left:0;}
#bo_w #wr_content {margin-bottom:1.0rem !important;}
@media all and (max-width:575px) {
	.responsive #bo_w .list-group-item {padding-right:1.0rem; padding-left:1.0rem;}
	.responsive #bo_w #wr_content {max-height:160px !important;}
}

/* List */
#bo_btn_top {padding:10px 0;}
@media all and (max-width:768px) {
	.responsive #bo_btn_top {border-top:1px solid #ddd; border-bottom:1px solid #c3c3c3; padding:0;}
}
.btnSort {outline:none; font-size:12px; color:#333;}
.btnSort:hover {color:#007bff;}
.btnSort:focus {outline:none;}


#bo_list_wrap {position:relative;}
#bo_list .na-title .na-subject {background-image:linear-gradient(transparent 80%, #3a8afd 0%); background-repeat: no-repeat; background-size:0 100%; transition:background-size 0.2s;}
#bo_list .na-title .na-subject:hover {color:#3a8afd; background-size:100% 100%;}

.userMenu {position:absolute; top:0; right:-40px; z-index:9; display:block;}
.userMenu .btnSide {display:block; outline:none; width:30px; height:30px; line-height:30px; margin:5px; text-align:center; border-radius:50%;}
@media all and (max-width:1280px) {
	.responsive .userMenu {position:relative; display:flex; right:0;}
}

.adminMenu {text-align:center; margin:20px 0px;}
.adminMenu .btn-group {}
.adminMenu .btn-group a,
.adminMenu .btn-group button {padding:8px; margin:0; line-height:normal; font-size:12px;}
.adminMenu .btn-group a i,
.adminMenu .btn-group button i {font-size:14px;}
.adminMenu .btn-group a label {margin:0; cursor:pointer;}
.adminMenu .btn-group .btn-white {border:1px solid #ddd; background:#fff; color:#333; font-size: 12px;}
.adminMenu .btn-group .btn-white:hover {background:rgb(245, 245, 245); box-shadow:0 0 0 0.2rem rgba(0, 0, 0, 0.1);}

@media all and (max-width:768px) {
	.responsive .adminMenu .btn-group a .mhidden,
	.responsive .adminMenu .btn-group button .mhidden {display:none;}
}
/* view */
.viewBody {position:relative;}
.viewBody .readHeader {border:1px solid #ddd; border-radius:4px; margin-bottom:20px;}
.viewBody .readHeader .rhUser {padding:10px 14px; border-radius:4px 4px 0 0; background:#f5f5f5; border-bottom:1px solid #ddd;}
.viewBody .readHeader .rhInfo {padding:6px 14px;}

/* comment */
.commentMedia {margin:10px 0; padding:10px; border:1px solid #ddd; border-radius:4px; background:#fff;}
.commentMedia .media {margin:0; margin-bottom:4px; position:relative;}
.commentMedia .media .photo {width:40px; height:40px; margin:0; overflow:hidden; border-radius:50%; background:#fff; text-align:center; line-height:40px;}
.commentMedia .media .photo .media-object {font-size:20px;}
.commentMedia .media .photo img {width:40px; height:40px;}
.commentMedia .media .media-body {background:#f1f1f1; padding:6px; border-radius:10px;}
.commentMedia .media .media-body .media-heading {font-size:11px;}
.commentMedia .media .media-body .media-heading time {color:#007bff;}
.commentMedia .media .media-body .media-content {display:inline-block; margin-left:26px; position:relative; max-width:80%; padding:10px; border:1px solid #888; border-radius:12px; background:#fff; box-shadow:4px 4px 6px rgba(0, 0, 0, 0.1); color:#333; font-size:13px; font-weight:500; line-height:18px; vertical-align:top; word-break:break-all;}
.commentMedia .media .media-body .media-content:before {display:block; position:absolute; top:10px; left:-6px; width:10px; height:10px; border-bottom:1px solid #666; border-left:1px solid #666; background:#fff; content:''; transform:rotate(45deg);}
.commentMedia .media .media-body .media-content a {color:#007bff; font-weight:500; text-decoration:underline;}
.commentMedia .media .media-body .media-content a img {width:200px;}
.commentMedia .media .media-body .media-content .na-videowrap {width:500px; margin:0;}
.commentMedia .media .media-body .tools {border-top:1px dashed #ccc; padding-top:8px; margin-top:10px;}
.commentMedia .media .media-body .tools ul {font-size:0;}
.commentMedia .media .media-body .tools ul li {display:inline-block; vertical-align:middle; margin:0 2px;}
.commentMedia .media .media-body .tools ul li a {padding:0 12px; width:auto; height:28px; line-height:25px; color:#666; border-radius:20px; border:1px solid #ddd; background:#fff; font-size:12px;}
.commentMedia .media .media-body .tools ul li a:hover {color:#007bff;}
.commentMedia .media .media-body .tools ul li a span {display:block; white-space:nowrap; margin-right:4px;}
.commentMedia .media .media-body .tools ul li a.btnCmt {display:block;}
.commentMedia .media ~ span .comment-form {margin-top:-10px; padding:0;}
.commentMedia .media ~ span .comment-form .comment-box {background:#fff;}
.commentMedia .media.my .media-body .media-content {color:#007bff; border:1px solid #007bff; text-align:left;}
.commentMedia .media.my .media-body .media-content:before {border-left:1px solid #007bff; border-bottom:1px solid #007bff;}

#fviewcomment .cmt-box {border-radius:4px;}

@media (max-width:767px) {
	.commentMedia .media .media-body .media-content .na-videowrap {width:400px;}
}
@media (max-width:600px) {
	.commentMedia .media .media-body .media-content .na-videowrap {width:300px;}
}
@media (max-width:450px) {
	.commentMedia .media .media-body .media-content .na-videowrap {width:220px;}
}

/* summernote custome */
.note-editor {}
.note-editor .note-btn {border:1px solid rgba(102,102,102,0.5);}
.note-editor .dropdown-menu {background:#FFF !important;}
.note-editor .dropdown-menu li {}
.note-editor .dropdown-menu li a {color:#333 !important;}
.note-editor .dropdown-menu button {color:#333 !important;}
.note-editor .dropdown-toggle::after {display:none;}

.note-modal {}
.note-modal .modal-dialog {color:#333;}
.note-modal .modal-dialog .modal-header {display:block;}