@charset "utf-8";

/* 게시판 목록 */
#bo_list {position:relative;margin-bottom:20px}
#bo_list:after {display:block;visibility:hidden;clear:both;content:""}
#bo_list .td_board {width:120px;text-align:center}
#bo_list .td_chk {width:30px;text-align:center;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1}
#bo_list .td_date {width:60px;text-align:center}
#bo_list .td_datetime {width:60px;text-align:center}
#bo_list .td_group {width:100px;text-align:center}
#bo_list .td_mb_id {width:100px;text-align:center}
#bo_list .td_mng {width:80px;text-align:center}
#bo_list .td_name {width:90px;text-align:left;padding:10px 0}
#bo_list .td_nick {width:100px;text-align:center}
#bo_list .td_num {width:50px;text-align:center}
#bo_list .td_num2 {width:50px;text-align:center}
#bo_list .td_numbig {width:80px;text-align:center}
#bo_list .txt_active {color:#5d910b}
#bo_list .txt_expired {color:#ccc}
#bo_list tbody tr {border-left:2px solid transparent}
#bo_list tbody tr:hover {border-left:2px solid #253dbe}
#bo_list tbody .even td {background:#fbfbfb}





/* 게시판 카네고리 */
#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;}

/* list rating */
.rating-stars {
    display: inline-block;
    font-size: 13px;
    color: #ffd700;
    margin-left: 8px;
    vertical-align: middle;
}
.rating-stars .empty {
    color: #ddd;
}
.rating-info {
    display: inline-block;
    margin-left: 5px;
    font-size: 11px;
    color: #999;
    vertical-align: middle;
}

/* view rating */
/* 별점 요약 */
.view-rating-summary {
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #eee;
    margin: 15px 0;
    text-align: center;
    border-radius: 5px;
}
.view-rating-summary .big-rating {
    font-size: 42px;
    color: #333;
    font-weight: bold;
    margin-bottom: 15px;
}
.view-rating-summary .big-stars {
    font-size: 28px;
    color: #ffd700;
    margin-bottom: 10px;
}
.view-rating-summary .rating-detail {
    font-size: 16px;
    color:#FF0000;
    font-weight: bold;
}

/* 댓글 별점 */
.comment-rating {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: #ffd700;
}

/* view_comment rating */
/* 별점 입력 */
.rating-input-area {
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
}
.rating-input-area > label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
    color: #333;
}
.star-rating-input {
    font-size: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 3px;
}
.star-rating-input input[type="radio"] {
    display: none;
}
.star-rating-input label {
    display: inline-block;
    font-size: 28px;
    color: #ddd;
    cursor: pointer;
    margin: 0;
    padding: 0;
    transition: color 0.2s;
}
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
    color: #ffd700;
}
.star-rating-input input[type="radio"]:checked ~ label {
    color: #ffd700;
}
.rating-selected {
    margin-left: 10px;
    font-size: 13px;
    color: #666;
    font-weight: normal;
}

/* 댓글 별점 표시 */
.comment-rating {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: #ffd700;
}