@charset "utf-8";

/* 게시판 폰트 설정 - 미사용시 주석처리 */
/* html, body{
    font-family: 'Noto Sans KR', sans-serif;
} */

:root{
    --bdColor-black: #222;
    --bdColor-grayA: #ddd;
    --bdColor-grayB: #eee;
    --bdColor-grayC: #aaa;
    --bdColor-grayD: #f8f8f8;

    --bdFont-title: 20px;
    --bdFont-big: 16px;
    --bdFont-normal: 15px;
    --bdFont-small: 14px;
}

/* 버튼 */
.bd_btn{
    display: inline-block;
    box-sizing: border-box;
    /* 버튼에 별도의 폰트값 적용 필요! */
    font-family: 'Noto Sans KR', sans-serif;
    font-size: var(--bdFont-small);
    line-height: 1;
}
.bd_button_b{
    background-color: var(--bdColor-black);
    border: 1px solid var(--bdColor-black);
    color: #fff;
    text-align: center;
    height: 35px; line-height: 33px;
    width: 70px;
}
.bd_button_w{
    background-color: #fff;
    border: 1px solid var(--bdColor-black);
    color: var(--bdColor-black);
    text-align: center;
    height: 35px; line-height: 33px;
    width: 70px;
}

/* 그누보드 공통 */
.sound_only {display: inline-block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;}

/* 게시판 감싸고 있는 div 스타일 설정 */
.board_container_wrap{
    padding: 120px 0 160px;
}
.board_container{
    /* 최대넓이는 홈페이지 넓이에 맞춰 값 조절 */
    max-width: 1300px;
    width: 95%;
    margin: 0 auto;
}

/* board (공통) */
/* .board {margin: 50px 0;} */

/* 게시판 상단 */
.board_filter {
    border-top: 2px solid var(--color-d);
    border-bottom: 1px solid var(--gray-f);
    margin-bottom: 30px;
}
.board_filter ul {
    display: flex; justify-content: center;
}
.board_filter ul li {
    width: 100%;
    border-right: 1px solid var(--gray-f);
}
.board_filter ul li:last-child {
    border-right: 0;
}
.board_filter ul li a {
    display: block; text-align: center; padding: 15px 0;
    font-size: 15px;
}
.board_filter ul li.active a {
    background: var(--color-d);
    color: #fff;
}

.board_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.board_top .count{font-size: var(--bdFont-small);}

.board_top .search{display: flex; align-items: center;}
.board_top .search select,
.board_top .search .search_txt,
.board_top .search .search_btn{
    border: 1px solid var(--bdColor-grayC);
    height: 35px;
}
.board_top .search select{margin-right: 2px;}
.board_top .search .search_txt{margin-right: 2px; padding: 0 5px;}
.board_top .search .search_btn{
    width: 55px;
    background-color: var(--bdColor-black);
    color: #fff;
}

/* 게시판 하단 */
.border_bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.border_bottom .bd_btn_wrap{display: flex;}
.border_bottom .bd_btn_wrap .bd_btn{margin-right: 2px;}
.border_bottom .bd_btn_wrap .bd_btn:last-child{margin-right: 0;}

/* board (게시판 리스트) */
.board .board_inner {
    border-top: 2px solid var(--bdColor-black);
}
.board .board_inner ul {}
.board .board_inner ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid var(--bdColor-grayB);
}
.board .board_inner ul li .cell {padding: 20px 10px;}
.board .board_inner ul li .cell p {
    text-align: center;
    word-break: normal;
    font-size: var(--bdFont-normal);
}
/* 넓이 설정 */
.board .board_inner ul li div{box-sizing: border-box;}
.board .board_inner ul li .board_num {width: 60px;}
.board .board_inner ul li .board_title {
    /* 전체 넓이에서 (번호, 작성자, 작성일, 조회 영역) 값을 뺌 */
    width: -webkit-calc(100% - 360px);
    width: -moz-calc(100% - 360px);
    width: -o-calc(100% - 360px);
    width: calc(100% - 360px);
}
.board .board_inner ul li .board_write {width: 100px;}
.board .board_inner ul li .board_date {width: 130px;}
.board .board_inner ul li .board_see {width: 70px;}
/* 분류 */
.board .board_inner ul li.board_cate .board_num {}
.board .board_inner ul li.board_cate .board_title {}
.board .board_inner ul li.board_cate .board_write {}
.board .board_inner ul li.board_cate .board_date {}
.board .board_inner ul li.board_cate .board_view {}

.board .board_inner ul li.board_list .board_num p.notice {
    background: var(--bdColor-black);
    color: #fff;
    padding: 5px 0;
    font-size: 0.75rem;
    border-radius: 0.3125rem;
}
/* 리스트 */
.board .board_inner ul li .board_title p{
    line-height: 1.2;
    /* 글 제목 1줄 초과 시 말줄임표 표시, 사용하지 않을 시 세줄 전부 주석처리 할 것 */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.board .board_inner ul li.board_list .board_title p {text-align: left;}
.board .board_inner ul li.board_list .board_title p a{display: block;}
.board .board_inner ul li.board_list:hover{
    background-color: var(--bdColor-grayD);
}

/* board (게시판 갤러리) */
.board .gallery_inner{}
.board .gallery_inner .gall_wrap{
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-bottom: -60px;
}
.board .gallery_inner .gall_wrap .board_list{
    /* width에 margin-left만큼 값을 빼고 부모 요소에도 마이너스 값을 넣어줘야 함 */
    margin-left: 20px;
    margin-bottom: 60px;
    width: -webkit-calc(100% / 2 - 20px);
    width: -moz-calc(100% / 2 - 20px);
    width: -o-calc(100% / 2 - 20px);
    width: calc(100% / 2 - 20px);
}

.board .gallery_inner .gall_wrap .board_list .gall_img{
    position: relative; box-sizing: border-box;
    overflow: hidden;
    border: 0.5px solid var(--bdColor-grayB);    
    /* padding-top 값으로 썸네일 비율 조정 */
    padding-top: 27%;
    border-radius: 10px;
    isolation: isolate;
}
.board .gallery_inner .gall_wrap .board_list .gall_img img{
    position: absolute;
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    object-fit: cover;
}
.board .gallery_inner .gall_wrap .board_list .gall_txt{margin-top: 20px;}
.board .gallery_inner .gall_wrap .board_list .gall_txt .board_title{}
.board .gallery_inner .gall_wrap .board_list .gall_txt .board_title p{
    line-height: 1.2;
    word-break: normal;
    font-size: var(--bdFont-big);
}
.board .gallery_inner .gall_wrap .board_list .gall_txt .board_write{margin-top: 20px;}
.board .gallery_inner .gall_wrap .board_list .gall_txt .board_write p{
    color: var(--bdColor-grayC);
    font-size: var(--bdFont-normal);
}
.board .gallery_inner .gall_wrap .board_list .gall_txt .board_date{margin-top: 10px;}
.board .gallery_inner .gall_wrap .board_list .gall_txt .board_date p{
    text-align: right;
    color: var(--bdColor-grayC);
    font-size: var(--bdFont-normal);
}

/* 페이징 */
.board .board_page {margin-top: 30px;}
.board .board_page .pg_wrap {}
.board .board_page .pg_wrap .pg {
    display: flex;
    justify-content: center;
}
.board .board_page .pg_wrap .pg .pg_current {
    position: relative;
    margin: 0 10px;
    font-weight: 500;
    font-size: var(--bdFont-small);
}
.board .board_page .pg_wrap .pg .pg_current::after{
    content: ""; position: absolute;
    bottom: -5px; left: 0;
    width: 100%; height: 1.5px;
    background-color: var(--bdColor-black);
}
.board .board_page .pg_wrap .pg .pg_page {
    margin: 0 5px;
    padding: 0 5px;
    color: var(--bdColor-grayA);
    font-size: var(--bdFont-small);
}
.board .board_page .pg_wrap .pg .pg_page:hover{
    color: var(--bdColor-black);
}

/* board (게시판 상세보기) */
.board .board_view {
    border-top: 2px solid var(--bdColor-black);
}
.board .board_view .view_wrap {}
.board .board_view .view_wrap li {
    border-bottom: 0.5px solid var(--bdColor-grayB);
}
.board .board_view .view_wrap li > div {padding: 20px 10px;}
.board .board_view .view_wrap li .view_title {}
.board .board_view .view_wrap li .view_title p {
    font-size: var(--bdFont-title);
    margin-bottom: 10px;
}
.board .board_view .view_wrap li .view_title .data_wrap{
    display: flex;
    justify-content: flex-end;
}
.board .board_view .view_wrap li .view_title .data_wrap span {
    color: var(--bdColor-grayC);
    font-size: var(--bdFont-small);
    margin-right: 10px;
}
.board .board_view .view_wrap li .view_title .data_wrap span:last-child{margin-right: 0;}
.board .board_view .view_wrap li .view_title .data_wrap span b {}

.board .board_view .view_wrap li .link_wrap{
    background-color: var(--bdColor-grayD);
}
.board .board_view .view_wrap li .link_wrap span{
    display: block;
    font-size: var(--bdFont-small);
    padding: 15px 10px;    
}
.board .board_view .view_wrap li .link_wrap span:last-child{margin-bottom: 0;}
.board .board_view .view_wrap li .link_wrap span b{font-weight: 700;}
.board .board_view .view_wrap li .link_wrap span a{}
.board .board_view .view_wrap li .link_wrap span a:hover{text-decoration: underline;}

.board .board_view .view_wrap li .view_desc {}

.board .board_view .view_wrap li.view_pg{}
.board .board_view .view_wrap li.view_pg .view_pg_wrap{
    font-size: var(--bdFont-normal);
    display: flex;
    align-items: center;
}
.board .board_view .view_wrap li.view_pg > .view_prev{
    border-bottom: 0.5px solid var(--bdColor-grayB);
}
.board .board_view .view_wrap li.view_pg .view_pg_wrap .left{
    width: 100px; text-align: center; font-size: 0;
}
.board .board_view .view_wrap li.view_pg .view_pg_wrap .left i{
    display: inline-block;
    width: 15px; height: 5.9px;    
    vertical-align: middle;
    background-image: url(board/icon_view_arrow.svg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-right: 10px;
}
.board .board_view .view_wrap li.view_pg .view_pg_wrap.view_next .left i{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.board .board_view .view_wrap li.view_pg .view_pg_wrap .left p{
    color: var(--bdColor-grayC);
    display: inline-block;
    vertical-align: middle;
    font-size: var(--bdFont-normal);
}
.board .board_view .view_wrap li.view_pg .view_pg_wrap .right{
    /* 전체 넓이에서 .left 값을 뺌 */
    width: -webkit-calc(100% - 100px);
    width: -moz-calc(100% - 100px);
    width: -o-calc(100% - 100px);
    width: calc(100% - 100px);
}
.board .board_view .view_wrap li.view_pg .view_pg_wrap .right a{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display: block;
    padding-left: 20px;
}
.board .board_view .view_wrap .view_link_wrap .link_wrap{padding: 0;}

/* 댓글 */
.board .comment_wrap{margin-top: 20px;}
.board .comment_wrap ul li{
    border-bottom: 0;
    font-size: var(--bdFont-normal);
}
.board .comment_wrap .title{
    font-size: var(--bdFont-big);
    font-weight: 700;
    display: inline-block; margin-bottom: 10px;
}
.board .comment_wrap .comment{
    border: 1px solid var(--bdColor-black);
}
.board .comment_wrap .comment .top textarea{
    width: 100%;
    border: 0;
    padding: 10px;
    resize: none;
}
.board .comment_wrap .comment .bottom{
    display: flex; justify-content: space-between;
    padding: 10px;
    border-top: 0.5px solid var(--bdColor-grayB);
}
.board .comment_wrap .comment .bottom .box{display: flex; align-items: center;}
.board .comment_wrap .comment .bottom .box ul{
    display: flex; align-items: center; margin-right: 20px;
}
.board .comment_wrap .comment .bottom .box ul:last-child{margin-right: 0;}
.board .comment_wrap .comment .bottom .box ul li .txt_input{
    box-sizing: border-box;
    height: 35px;
    border: 1px solid var(--bdColor-grayC);
    padding: 10px 5px;
}
.board .comment_wrap .comment .bottom .box ul li:first-child{
    margin-right: 10px;
}
.board .comment_wrap .comment_list{
    border: 0; padding: 15px 10px;
    border-top: 2px solid var(--bdColor-black);
    border-bottom: 2px solid var(--bdColor-black);    
}
.board .comment_wrap .comment_list .com_box{
    border-bottom: 0.5px solid var(--bdColor-grayB);
    padding-bottom: 15px; margin-bottom: 15px;
}
.board .comment_wrap .comment_list .com_box:last-child{
    border-bottom: 0; padding-bottom: 0; margin-bottom: 0;
}
.board .comment_wrap .comment_list .com_box ul.top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.board .comment_wrap .comment_list .com_box ul.top li{margin-right: 20px;}
.board .comment_wrap .comment_list .com_box ul.top li:last-child{margin-right: 0;}
.board .comment_wrap .comment_list .com_box ul.top li span{}
.board .comment_wrap .comment_list .com_box ul.top li .id_area{font-weight: 700;}
.board .comment_wrap .comment_list .com_box ul.top li .date_area{
    color: var(--bdColor-grayC);
}
.board .comment_wrap .comment_list .com_box ul.mid{border: 0;}
.board .comment_wrap .comment_list .com_box ul.mid li{}
.board .comment_wrap .comment_list .com_box ul.mid li p{padding: 20px 0;}
.board .comment_wrap .comment_list .com_box ul.bot{}
.board .comment_wrap .comment_list .com_box ul.bot ol{
    display: flex; justify-content: flex-end;
}
.board .comment_wrap .comment_list .com_box ul.bot ol li{margin-right: 2px;}
.board .comment_wrap .comment_list .com_box ul.bot ol li:last-child{margin-right: 0;}
.board .comment_wrap .comment_list .com_box ul.bot ol li .bd_btn{
    height: 30px;
    line-height: 28px;
    width: 50px;
}
/*// 댓글 */

/* board (게시판 글쓰기) */
.board .board_register {
    border-top: 2px solid var(--bdColor-black);
    font-size: var(--bdFont-normal);
}
.board .board_register .bd_regi_wrap {}
.board .board_register .bd_regi_wrap li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bdColor-grayB);
}
.board .board_register .bd_regi_wrap li .write_cate,
.board .board_register .bd_regi_wrap li .write_input {
    padding: 15px 10px;
    box-sizing: border-box;
}
.board .board_register .bd_regi_wrap li .write_cate {
    width: 20%;
    max-width: 150px;
}
.board .board_register .bd_regi_wrap li .write_cate p {}
.board .board_register .bd_regi_wrap li .write_input {
    border-left: 1px solid var(--bdColor-grayB);
    width: 80%;
}
.board .board_register .bd_regi_wrap li .write_input .input_chk{
    vertical-align: bottom; border-color: var(--bdColor-grayC);
}
.board .board_register .bd_regi_wrap li .write_input .txt_input{
    width: 100%;
    height: 35px;
    border-color: var(--bdColor-grayC);
    padding: 10px 5px;
}
.board .board_register .bd_regi_wrap li .write_input textarea {
    width: 100%;
    resize: none;
}
.board .board_register .regi_bt {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.board .board_register .regi_bt a {
    display: block;
    background: var(--bdColor-black);
    color: #fff;
    padding: 10px 20px;
    margin: 0 10px;
}

/* media query */
@media screen and (max-width: 1024px) {
    .board .board_inner ul li .board_see{display: none;}
    .board .board_inner ul li .board_title{
        width: -webkit-calc(100% - 290px);
        width: -moz-calc(100% - 290px);
        width: -o-calc(100% - 290px);
        width: calc(100% - 290px);
    }
}
@media screen and (max-width: 768px) {
    :root{
        --bdFont-big: 15px;
        --bdFont-normal: 14px;
        --bdFont-small: 13px;
    }
    
    .board .board_inner ul li .cell{padding: 15px 5px;}
    .board .board_inner ul li .board_date{width: 105px;}
    .board .board_inner ul li .board_write {width: 65px;}
    .board .board_inner ul li .board_num{display: none;}
    .board .board_inner ul li .board_title{
        width: -webkit-calc(100% - 170px);
        width: -moz-calc(100% - 170px);
        width: -o-calc(100% - 170px);
        width: calc(100% - 170px);
    }
    .board .board_inner ul li .board_title p{        
        overflow: inherit;
        text-overflow: inherit;
        white-space: inherit;
    }

    .board .board_view .view_wrap li.view_pg .view_pg_wrap .left{
        width: 80px;
    }    
    .board .board_view .view_wrap li.view_pg .view_pg_wrap .right{
        width: -webkit-calc(100% - 80px);
        width: -moz-calc(100% - 80px);
        width: -o-calc(100% - 80px);
        width: calc(100% - 80px);
    }
    .board .board_view .view_wrap li.view_pg .view_pg_wrap .right a{margin-left: 10px;}
    .board .comment_wrap .comment .bottom{display: block; overflow: hidden;}
    .board .comment_wrap .comment .bottom .box{margin-bottom: 5px;}
    .board .comment_wrap .comment .bottom .box:last-child{
        margin-bottom: 0;
        float: right;
    }
    .board .comment_wrap .comment .bottom .box ul{width: 50%;}
    .board .comment_wrap .comment .bottom .box ul li:first-child{
        width: 65px;
    }
    .board .comment_wrap .comment .bottom .box ul li:last-child{
        width: -webkit-calc(100% - 65px);
        width: -moz-calc(100% - 65px);
        width: -o-calc(100% - 65px);
        width: calc(100% - 65px);
    }
    .board .comment_wrap .comment .bottom .box ul li .txt_input{
        width: 100%;
    }

}
@media screen and (max-width: 500px){
    .board .gallery_inner .gall_wrap{
        margin-left: -20px;
        margin-bottom: -40px;
    }
    .board .gallery_inner .gall_wrap .board_list{
        margin-left: 20px;
        margin-bottom: 40px;

        width: -webkit-calc(100% / 2 - 20px);
        width: -moz-calc(100% / 2 - 20px);
        width: -o-calc(100% / 2 - 20px);
        width: calc(100% / 2 - 20px);
    }

    
}
@media screen and (max-width: 430px) {
    .board_top{display: block;}
    .board_top .count{margin-bottom: 5px;}

    .board .board_view .view_wrap li.view_pg .view_pg_wrap .right a{padding-left: 0;}
    .board .comment_wrap .comment .bottom .box ul{margin-right: 10px;}
    .board .comment_wrap .comment .bottom .box ul li:first-child{
        width: 55px;
        margin-right: 5px;
    }
    .board .comment_wrap .comment .bottom .box ul li:last-child{
        width: -webkit-calc(100% - 55px);
        width: -moz-calc(100% - 55px);
        width: -o-calc(100% - 55px);
        width: calc(100% - 55px);
    }

    .board .board_register .bd_regi_wrap li .write_cate{max-width: none;}
    .board .gallery_inner .gall_wrap .board_list{
        /* width에 margin-left만큼 값을 빼고 부모 요소에도 마이너스 값을 넣어줘야 함 */
        margin-left: 20px;
        margin-bottom: 60px;
        width: -webkit-calc(100% / 1 - 20px);
        width: -moz-calc(100% / 1 - 20px);
        width: -o-calc(100% / 1 - 20px);
        width: calc(100% / 1 - 20px);
    }
}