@charset "utf-8";

/* 모바일 목록 */
@media all and (max-width:767px) {
	.responsive #bo_list .float-left.float-md-none { margin-right:0.75rem; }
	.responsive #bo_list .na-title { margin-bottom:0.14rem; }
}

/* gallery */
#bo_gallery .chk-box { position:absolute; bottom:5px; right:10px; z-index:2; }
#bo_gallery .wr-now { position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.75); z-index:1; }

/* 갤러리 호버 효과 */
#bo_gallery .img-item a { position:relative; display:block; overflow:hidden; border-radius:0.3rem; }
#bo_gallery .img-item a::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0); transition:all 0.3s ease; z-index:1; box-shadow:0 0 0 0 rgba(0,0,0,0); }
#bo_gallery .img-item a:hover::before { background:rgba(0,0,0,0.3); box-shadow:0 4px 20px rgba(0,0,0,0.25), inset 0 0 0 3px var(--kj-accent); }
#bo_gallery .img-item img { transition:transform 0.3s ease; }
#bo_gallery .img-item a:hover img { transform:scale(1.1); }

/* ===============================================
   텍스트 애니메이션 추가
   =============================================== */

/* 갤러리 아이템 전체 애니메이션 */
#bo_gallery > ul > li {
	opacity: 0;
	animation: fadeInUp 0.6s ease forwards;
}

/* 순차적 딜레이 */
#bo_gallery > ul > li:nth-child(1) { animation-delay: 0.1s; }
#bo_gallery > ul > li:nth-child(2) { animation-delay: 0.2s; }
#bo_gallery > ul > li:nth-child(3) { animation-delay: 0.3s; }
#bo_gallery > ul > li:nth-child(4) { animation-delay: 0.4s; }
#bo_gallery > ul > li:nth-child(5) { animation-delay: 0.5s; }
#bo_gallery > ul > li:nth-child(6) { animation-delay: 0.6s; }
#bo_gallery > ul > li:nth-child(7) { animation-delay: 0.7s; }
#bo_gallery > ul > li:nth-child(8) { animation-delay: 0.8s; }
#bo_gallery > ul > li:nth-child(9) { animation-delay: 0.9s; }
#bo_gallery > ul > li:nth-child(n+10) { animation-delay: 1s; }

/* 제목 애니메이션 */
#bo_gallery .na-title {
	opacity: 0;
	transform: translateY(10px);
	animation: fadeInUp 0.5s ease forwards;
	animation-delay: 0.3s;
}

#bo_gallery > ul > li:nth-child(1) .na-title { animation-delay: 0.4s; }
#bo_gallery > ul > li:nth-child(2) .na-title { animation-delay: 0.5s; }
#bo_gallery > ul > li:nth-child(3) .na-title { animation-delay: 0.6s; }
#bo_gallery > ul > li:nth-child(4) .na-title { animation-delay: 0.7s; }
#bo_gallery > ul > li:nth-child(5) .na-title { animation-delay: 0.8s; }
#bo_gallery > ul > li:nth-child(6) .na-title { animation-delay: 0.9s; }
#bo_gallery > ul > li:nth-child(7) .na-title { animation-delay: 1s; }
#bo_gallery > ul > li:nth-child(8) .na-title { animation-delay: 1.1s; }
#bo_gallery > ul > li:nth-child(9) .na-title { animation-delay: 1.2s; }

/* 제목 호버 효과 */
#bo_gallery .na-subject {
	display: inline-block;
	position: relative;
	transition: all 0.3s ease;
}

#bo_gallery .na-subject:hover {
	color: #be9d6c;
	transform: translateX(5px);
}

#bo_gallery .na-subject::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -2px;
	left: 0;
	background-color: #be9d6c;
	transition: width 0.3s ease;
}

#bo_gallery .na-subject:hover::after {
	width: 100%;
}

/* 댓글 카운트 펄스 애니메이션 */
#bo_gallery .na-info {
	display: inline-block;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

/* 작성자 및 날짜 정보 애니메이션 */
#bo_gallery .clearfix.font-weight-normal {
	opacity: 0;
	animation: fadeIn 0.6s ease forwards;
	animation-delay: 0.5s;
}

#bo_gallery > ul > li:nth-child(1) .clearfix.font-weight-normal { animation-delay: 0.6s; }
#bo_gallery > ul > li:nth-child(2) .clearfix.font-weight-normal { animation-delay: 0.7s; }
#bo_gallery > ul > li:nth-child(3) .clearfix.font-weight-normal { animation-delay: 0.8s; }
#bo_gallery > ul > li:nth-child(4) .clearfix.font-weight-normal { animation-delay: 0.9s; }
#bo_gallery > ul > li:nth-child(5) .clearfix.font-weight-normal { animation-delay: 1s; }
#bo_gallery > ul > li:nth-child(6) .clearfix.font-weight-normal { animation-delay: 1.1s; }
#bo_gallery > ul > li:nth-child(7) .clearfix.font-weight-normal { animation-delay: 1.2s; }
#bo_gallery > ul > li:nth-child(8) .clearfix.font-weight-normal { animation-delay: 1.3s; }
#bo_gallery > ul > li:nth-child(9) .clearfix.font-weight-normal { animation-delay: 1.4s; }

/* 작성자명 호버 효과 */
#bo_gallery .float-right.ml-2 {
	transition: all 0.3s ease;
}

#bo_gallery .float-right.ml-2:hover {
	transform: translateY(-2px);
}

/* 날짜 아이콘 회전 효과 */
#bo_gallery .fa-clock-o {
	display: inline-block;
	transition: transform 0.3s ease;
}

#bo_gallery .float-left.text-muted:hover .fa-clock-o {
	transform: rotate(360deg);
}

/* 라벨 캡션 애니메이션 */
.label-cap {
	display: inline-block;
	animation: bounceIn 0.6s ease;
}

@keyframes bounceIn {
	0% { transform: scale(0); opacity: 0; }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); opacity: 1; }
}

/* 키프레임 정의 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ===============================================
   이미지 모달
   =============================================== */

.image-modal { display:none; position:fixed; z-index:999; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.9); align-items:center; justify-content:center; }
.image-modal img.modal-content { max-width:70%; max-height:75vh; object-fit:contain; background-color: transparent;}

/* 모달 닫기 버튼 - 우측 상단 X */
.modal-close { position:absolute; top:20px; right:35px; color:#fff; font-size:45px; font-weight:200; cursor:pointer; z-index:100000; transition:opacity 0.3s ease; user-select:none; line-height:0.8; opacity:0.8; }
.modal-close:hover, .modal-close:focus { opacity:1; }

/* 모달 좌우 버튼 - 크고 둥글게 */
.modal-prev, .modal-next { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:30px; font-weight:100; cursor:pointer; width:80px; height:80px; display:flex; align-items:center; justify-content:center; transition:background 0.3s ease; user-select:none; z-index:100000; border-radius:50%; }
.modal-prev { left:50px; }
.modal-next { right:50px; }
.modal-prev:hover, .modal-next:hover { background:rgba(0,0,0,0.5); }

/* 모달 상단 왼쪽 카운터 */
.modal-counter { position:absolute; top:25px; left:35px; color:#fff; font-size:16px; opacity:0.9; z-index:100000; }

/* 모달 하단 중앙 캡션 */
.modal-caption { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:#fff; font-size:18px; opacity:0.9; text-align:center; max-width:80%; }

/* 모달 정보 영역 제거 */
.modal-info { display:none; }

@media all and (max-width:767px) {
	.image-modal img.modal-content { max-width:90%; max-height:80vh; }
	.modal-close { top:15px; right:20px; font-size:40px; }
	.modal-prev, .modal-next { font-size:40px; width:60px; height:60px; }
	.modal-prev { left:20px; }
	.modal-next { right:20px; }
	.modal-counter { top:20px; left:20px; font-size:14px; }
	.modal-caption { bottom:20px; font-size:15px; max-width:85%; }
}

/* 게시판 읽기 */
#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; }
#bo_v_con img { max-width:100%; height:auto; }
#bo_v_img { width:100%; text-align:center; overflow:hidden; 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; }

@media all and (max-width:575px) {
	.responsive #bo_v_title { font-size:20px; line-height:1.5; }
	.responsive #bo_v_con { min-height:140px; }
}

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

/* 게시판 댓글 : 내용 */
.cmt-reply { top:0; left:-16px; }
.by-writer { background:#fbefef !important; border-top:1px solid #f6cece !important; }
.cmt-content { word-break:break-all; overflow:hidden; }
.cmt-content img { max-width:100%; height:auto; }

/* 게시판 댓글 : 대댓글, 수정, 삭제 */
.cmt-btn ul { list-style:none; margin:0; }
.cmt-btn ul > li { float:left; font-size:12px; padding:0 10px; }
.cmt-btn ul > li::before { float:left; color:#ccc; content:"|"; margin-left:-12px; }
.cmt-btn ul > li:last-child { padding-right:0; }
.cmt-btn ul > li:first-child::before, .cmt-btn ul > li.no-bar::before { content:""; margin-left:0; }
.cmt-btn ul > li > a { float:left; color:#888; white-space:nowrap; }

/* 게시판 댓글 : 쓰기폼 */
#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-left:0 !important; border-right:0 !important; border-radius:0 !important; }
}

/* 게시판 댓글 : SNS 등록 */
#bo_vc_opt ol { margin:0; padding:0; list-style:none; zoom:1; background:#ccc; border-radius:3px; }
#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-left:0; padding-right:0; border-left:0; border-right:0; } */
#bo_w #wr_content { margin-bottom:1.0rem !important; }

@media all and (max-width:575px) {
	#bo_w .list-group-item { padding-left:1.0rem; padding-right:1.0rem; }
	.responsive #bo_w #wr_content { max-height:160px !important; }
}

/* SLY 분류탭 - 심플한 언더라인 스타일 */
.sly-tab { border:0; overflow:hidden; margin-bottom:40px; }
.sly-tab .d-flex { border-bottom: 0; border-left: 0; justify-content:center; margin:0 auto; }
.sly-tab li a { display:block; text-align:center; border:0; color:#999; background:transparent; font-weight:400; font-size:18px; padding:12px 24px; transition:all 0.3s ease; position:relative; }
.sly-tab li a:hover { color:#000; font-weight:600; transform:scale(1.05); }
.sly-tab li.active a { font-weight:700; color:#000; background:transparent; border-bottom:2px solid #000; }
.sly-tab .sly-btn { display:none; text-align:center; border:0; color:#333; background:transparent; }
.sly-tab .sly-btn:hover { background:#fafafa; }
.sly-tab .sly-btn.sly-next { border-left:0; }
.sly-tab hr { display:none; }

.page-item.disabled .page-link{background-color: transparent;}

.btn-primary,
.btn-primary.disabled, 
.btn-primary:disabled,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active, 
.btn-outline-primary:not(:disabled):not(.disabled).active,
.page-item.active .page-link,
.show > .btn-outline-primary.dropdown-toggle,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
	background-color: #be9d6c !important;
	border-color: #be9d6c !important;
}

hr.hr::after, .dropdown-item.active, .dropdown-item:active, .bg-primary{background-color: #be9d6c !important;}