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

.board_wrap{width:100%;margin:0 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;z-index:1;}
.board_wrap .btn:hover{background:var(--primary);color:#fff;border:1px solid var(--primary);}
.board_wrap .btn.btn-primary{background:#494949;color:#fff;border:1px solid #494949;z-index:1;}
.board_wrap .btn.btn-danger{background:var(--primary);color:#fff;border:1px solid var(--primary); z-index:1;}


/* input box 처리 */


/************ 게시판리스트 ************/

.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 0px;border-bottom:1px solid #f3f3f3;font-size:16px;transition: 0.3s all;}
.board_list tbody tr:hover td{background:#f0f6f8;color:var(--primary);}
.board_list tbody tr td a{color:#333; font-weight:500; transition: 0.3s all;}
.board_list tbody tr:hover td a{color:var(--primary);}
.board_list tbody {border-bottom:1px solid #d3d3d3;padding:10px;}

.board_list{overflow:hidden;margin:0 -10px;}
.board_list .gallery_item{width:50%;padding:10px;float:left;margin-bottom:40px;animation-name : test;animation-duration: 1s;position:relative;}
.board_list .gallery_item .box{transition: all .25s cubic-bezier(0,0,.2,1);height:100%;position: relative;}
.board_list .gallery_item .box > a {position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;}
/*.board_list .gallery_item .box:hover{border:1px solid #000;box-shadow: 0 10px 20px rgb(0 0 0 / 15%);transform: translateY(-5px);}*/

.board_list .td_image{width: 100%;height:400px;overflow: hidden;display: flex;align-items: center;justify-content: center;position: relative;}
.board_list .td_image a {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
.board_list .td_image img {display: block;position: relative;margin: 0 auto;background: #FFF;width:100%;height:100%;object-fit:cover;transform: scale(1);transition: 0.4s;}
.board_list .gallery_item .box:hover .td_image img {transform: scale(1.1);}

.board_list .td_title {margin:22px auto 8px;font-size:24px;color:white;font-weight:600;line-height: 25px;max-height:26px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;}
.board_list .td_title a{color: inherit;}
.board_list .td_time{display: flex;justify-content: space-between;font-size:16px;color:var(--variant-dark);text-transform:uppercase;}
.board_list .td_time i{margin-right:4px;}
.board_list .td_time b{margin-right:3px;}


.board_list {
    transition: height 0.6s ease-out !important;
}
.gallery_item.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.gallery_item.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}


@media(max-width:1300px) {
    .board_list .td_image{height:300px;}
}

@media(max-width:950px) {
    .board_list .td_image{height:250px;}
    .board_list .td_title{font-size:18px;}
}
@media(max-width:750px) {
    .board_list .td_image{height:200px;}
}
@media(max-width:650px) {
    .board_list{margin:0 auto;}
    .board_list .td_image{height:380px;}
    .board_list .gallery_item{width:100%;padding:0 0 10px;}
    .board_list ul {margin: 0 auto;}
    .board_list .td_title{margin:15px auto 10px;font-size:17px;}
    .board_list .td_time{font-size:14px;}
}
@media(max-width:500px) {
    .board_list .td_image{height:280px;}
}
@media(max-width:350px) {
    .board_list .td_image{height:200px;}
}
/* 검색 */
.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:#000;height:100%;display: flex;align-items: center;justify-content: center;transition:0.3s;}
.sch_btn:hover{color:var(--primary);}

/* 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:var(--primary);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;}
}



/************ 읽기 페이지 ************/

.board_read{width:100%; color:#333;}
.board_read p{color:#333;}
.board_read .title{width:100%;border-top:2px solid var(--primary);font-size:24px;padding:32px 20px;background: #fcfcfc;}
.board_read .title h1{font-size:24px;font-weight:600;color:#333;line-height:1.4em;margin-bottom:8px;}
.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-top:1px solid #eee; border-bottom:1px solid #ccc; padding:30px 20px;font-size:16px;line-height:1.5;font-weight:400;}
.board_read .con p{font-size:16px;font-weight:400;}

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;}


@media(max-width:750px){
    .board_read .title h1{font-size:20px;}
}

@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;}
}

.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}


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

.board_write{width:100%;border-top:1px solid #000;}
.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_write .form-control{width:auto;}
.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;}