/************ 게시판 전체 영역 ************/

.board_wrap{width: 100%;max-width: 1250px;padding:236px 40px 200px;margin: 0 auto;color:#bbb;position: relative;z-index: 1;}
#border-read .board_wrap{padding:161px 40px 200px;}

@media(max-width:510px) {
    .board_wrap{padding:96px 20px 200px;}
    #border-read .board_wrap{padding:116px 20px 200px;}
}

.board_wrap input[type='checkbox']{appearance:auto;}

/* 버튼 정의 */

.board_wrap .btn_wrap {margin-top: 20px;display: flex;justify-content: center;flex-flow: row wrap;}

.board_wrap .btn{margin:3px; transition: 0.3s all;width: 100%;max-width: 140px;border-radius: 0;height: 50px;border: 1px solid #333;color: #333;background: #fff;display: flex;align-items: center;justify-content: center;}
.board_wrap .btn:hover{background:#ea5404;color:#fff;border:1px solid #ea5404;}
.board_wrap .btn.btn-primary{background:#494949;color:#fff;border:1px solid #494949;}
.board_wrap .btn.btn-danger{background:#dc3545;color:#fff;border:1px solid #dc3545;}


/* input box 처리 */


/************ 게시판리스트 ************/
#border-list{position:relative;background-image: url("../../theme/skin03/img/sub/news-bg-list.jpg");background-repeat: no-repeat;background-position: center;background-size: cover;}
#border-list::before{content: '';width:100%;height:100%;background:rgba(0,0,0,0.5);position: absolute;top:0;left:0;}

.board_list thead{}
.board_list thead tr th{text-align:center;border-top:2px solid #333;border-bottom:1px solid #d2d7dc;padding:15px 10px;font-size:16px;font-weight:600;background:#f9fafb;}
.board_list thead tr th.w100{width:100px;}
.board_list tbody tr td{padding:26px 0;border-bottom:1px solid #f3f3f3;font-size:16px;transition: 0.3s all;}
.board_list tbody tr:hover td{background:#f0f6f8;color:#ea5404;}
.board_list tbody tr td a{color:#7f7f7f; font-weight:500; transition: 0.3s all;}
.board_list tbody tr:hover td a{color:#ea5404;}
.board_list tbody {border-bottom:1px solid #d3d3d3;padding:10px;}

.board_list{width: 100%;display: grid;grid-template-columns: repeat(5, 1fr);gap:20px;}
.board_list .gallery_item{float:left;cursor:pointer;position: relative;margin-bottom:60px;}
.board_list .gallery_item a{position:absolute;top:0;left: 0;right: 0;bottom:0;width:100%;height:100%;}
.board_list .gallery_item .box{position: relative;top: 0;transition: all 0.2s linear;height:100%;}

.board_list .td_image{aspect-ratio:1080/1350;height:auto;border:2px solid transparent;overflow:hidden;border-radius:10px;width: 100%;padding-top:0;display: flex;align-items: center;justify-content: center;position: relative;background-position:center center;background-size:cover;transition: all .3s;}
.board_list .td_image img {height:100%;width:100% !important;object-fit: cover;}

.board_list .gallery_item .box:hover .td_image{border:2px solid #EA5404;box-shadow: 0px 4px 20px 0px #EA540466;}
.board_list .gallery_item .box:hover{transition: all 0.2s linear;top: -20px;}

.board_list .td_title{font-size:1rem;color:#fff; margin:15px auto 10px; height:20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.board_list .td_time{display: flex;justify-content: space-between;font-size: 12px;color: #777;font-family: 'SCD'; padding-bottom: 10px;}
.board_list .td_time i{margin-right:4px;}
.board_list .td_time b{margin-right:3px;}
.board_list .td_content{font-size:0.875rem;height:20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;color:#bbb;}

@media(max-width:1600px) {
    .board_list{grid-template-columns: repeat(4, 1fr);gap:20px;}
}
@media(max-width:1199px) {
    .board_list{grid-template-columns: repeat(3, 1fr);gap:20px;}
}
@media(max-width:850px) {
    .board_list{grid-template-columns: repeat(2, 1fr);gap:20px;}
    .board_list .td_image {height: auto;}
}
@media(max-width:510px) {
    .board_list{grid-template-columns: repeat(1, 1fr);gap:10px;}
}



/* 검색 */
.search_wrap {width: 100%;max-width: 570px;margin: 0 auto 80px;display: flex;justify-content: center;align-items: center;border-bottom: 2px solid #333;padding:0 10px 10px;}
.search_wrap form {position: relative;width: 100%;display: flex;align-items: center;}
.search_wrap select#s1 {width:20%;margin-right:8px;height:35px; font-size:15px; border: none;}
.search_wrap input#s2 {width:80%;height: 35px; padding:0 8px;border: none;}
.search_wrap input#s2::placeholder{color:#b7b7b7;font-size:15px;}
.sch_btn {position: absolute;top: 0;right: 0;font-size: 25px;color:#ea5404;height:100%;display: flex;align-items: center;justify-content: center;}

/* Pagination */
.board_wrap .board_list_foot{overflow:hidden;}
.board_wrap .board_list_foot .btn_wrap{width:25%;float:left;padding:20px 10px;display: inline-flex;justify-content: flex-end;}
.board_wrap .board_list_foot .btn_wrap.text-right{padding:20px 0 20px 10px;}
.board_wrap .board_list_foot .paging_wrap{width:50%;float:left;text-align:center;padding:20px 10px;}
.board_wrap .board_list_foot .paging_wrap .pagination{display:inline-block;margin:0;}
.board_wrap .board_list_foot .paging_wrap .pagination li{display:inline-block;}
.board_wrap .board_list_foot .paging_wrap .pagination li a{color:#666;padding: 5px 11px;font-size: 15px;border: none;transition:0.3s all;}
.board_wrap .board_list_foot .paging_wrap .pagination li.active a,
.board_wrap .board_list_foot .paging_wrap .pagination li a:hover{background:#ea5404;color:#fff;border-radius:0;}

.board_wrap .board_list_foot .search_wrap{text-align:Center;clear:both;}

@media(max-width:750px){
    .board_wrap .board_list tr th.th_name{display:none;}
    .board_wrap .board_list tr td.td_name{display:none;}
    .board_wrap .board_list tr th.th_view{display:none;}
    .board_wrap .board_list tr td.td_view{display:none;}
    .board_wrap .board_list_foot .paging_wrap{width:100%;}
    .board_wrap .board_list_foot .btn_wrap {width: 100%;margin-top: 0;padding: 0;padding: 0 !important;}
}
@media(max-width:600px){
    .board_wrap .board_list thead tr th{font-size:15px;}
    .board_wrap .board_list tbody tr td a{font-size:15px;}
}



/************ 읽기 페이지 ************/
#border-read{position:relative;background-image: url("../../theme/skin03/img/sub/news-bg-read.jpg");background-repeat: no-repeat;background-position: center;background-size: cover;}
#border-read::before{content: '';width:100%;height:100%;background:rgba(0,0,0,0.5);position: absolute;top:0;left:0;}

.board_read{width:100%; color:#B8B8B8;}
.board_read a{color:#B8B8B8;word-break: break-all;}

.board_read .title{width:100%;border-bottom:1px solid #bbb;padding:0 20px;}
.board_read .title h1{font-size:1.25rem;font-weight:500;color:#fff;line-height:1.4em;margin-bottom:1.5rem;}

.board_read .info{display:flex;}
.board_read .info p{float:left; color:#888; font-size:16px;font-weight:400;}
.board_read .info p.name{padding-right:15px;}
.board_read .info i{color:#888; font-size:15px;font-weight:400;margin-right:5px;}
.board_read .con{width:100%;border-bottom:1px solid #000; padding:1.5rem 0;font-size:18px;line-height:1.7;}
.board_read .con p{font-size:1rem;color:#B8B8B8;font-weight:400;}
.board_read .top_date{margin-bottom:10px;font-size:0.875rem;color:#767676;}

table.board_read.down_box{width:100%;border-top:1px solid #ddd;margin-top: 20px;}
.board_read tbody tr th{background:#f9f9f9;text-align:right;transition-duration:0.5s;}
.board_read tbody tr.file th{text-align:left;}
.board_read tbody tr th,.board_wrap .board_read tbody tr td{border-bottom:1px solid #ddd;padding:10px;}
.board_read tbody tr td input.wfull,.board_wrap .board_read tbody tr td textarea.wfull{width:100% !important;}
.board_read tbody tr td textarea{width:100%;height:200px;}
.board_read .form-control{width:auto;}
.board_read .bof_image{display:block;width:100%;max-width:760px;height:auto;margin:0 auto 20px;}
.board_read .con img{display:block;width:100%;max-width:760px;height:auto;margin:0 auto 20px;}

@media(max-width:750px){
    .board_read .title h1{font-size:20px;margin-bottom:0;}
    .board_read .title{padding:0 0 20px;}
    .board_read .con{padding:30px 0;}
    .board_read .bof_image,
    .board_read .con img{max-width:100%;}
}

@media(max-width:600px){

    .board_read tbody tr.file th:first-child{display:none;}
    .board_read .con p{font-size:15px;}
    .board_read .info p{font-size:15px;}
	.category-tabs { margin-top:60px !important}
}


/************ 글쓰기 페이지 ************/

.board_write{width:100%;border-top:2px solid #ea5404;}
.board_write tbody tr th{background:#f9f9f9;text-align:left;}
.board_write tbody tr th,.board_wrap .board_write tbody tr td{border-bottom:1px solid #ddd;padding:10px;}
.board_write tbody tr td input.wfull,.board_wrap .board_write tbody tr td textarea.wfull{width:100% !important;}
.board_write tbody tr td textarea{width:100%;height:200px;}
.board_wrap .board_write tbody tr td{background:#f9f9f9;}
.board_write .form-control{width:auto;}

@media(max-width:550px){
    .board_write tbody tr th{display:none;}
    .board_write tbody tr td {width: 100%;}
    .board_write tbody tr td input{width: 100%;}
    .board_write input#bod_secret {width: auto;margin-right:5px;}
}


/************ 패스워드 확인 페이지 ************/

.board_wrap .board_pass_check{margin:50px 0px;}
.board_wrap .board_pass_check h1{font-size:24px;text-align:center;margin-bottom:20px;}
.board_wrap .pass_wrap{background:#f3f3f3;border:1px solid #ddd;text-align:center;width:100%;max-width:400px;padding:30px;margin:0px auto;}
.board_wrap .pass_wrap .pass_help{font-size:12px;}



/** 카테고리 **/
/* 탭 전체 영역 */
.category-tabs {
    display: flex;
    align-items: center;
    gap: 15px; /* 탭 사이 간격 */
    margin-bottom: 30px; /* 게시판 리스트와의 간격 */
	justify-content: center;
}

/* 탭 버튼 기본 (비활성 상태) */
.category-tabs a {
    display: inline-block;
    padding: 8px 24px; /* 위아래 8px, 좌우 24px */
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: #ffffff; /* 비활성 텍스트는 흰색 */
    border-radius: 50px; /* 양쪽이 완전히 둥근 알약 모양 */
    transition: background-color 0.2s ease, color 0.2s ease; /* 부드러운 전환 효과 */
}

/* 탭 버튼 활성화 상태 (.active) */
.category-tabs a.active {
    background-color: #ffffff; /* 배경 흰색 */
    color: #000000; /* 텍스트 검은색 */
    font-weight: bold; /* 선택된 탭은 글씨를 조금 더 굵게 */
}

/* 마우스 호버 효과 (선택 사항) */
.category-tabs a:not(.active):hover {
    color: #000; /* 비활성 탭에 마우스를 올리면 살짝 어두워짐 */
}