@charset "utf-8";

/************************ 게시판 공통 ************************/
.board_style {
    position:relative;
    box-sizing:border-box;
    overflow:hidden;
    padding-bottom:14rem;
}
.board_style .search {
    box-sizing:border-box;
    padding:4rem;
    border-radius:2rem;
    border:1px solid #eee;
    box-shadow:0 1rem 3rem rgba(0,0,0,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
}
.board_style .search .inner {
    display:flex;
    gap:1rem;
    width:68rem;
}
.board_style .search select.input_style {
    position:relative;
    box-sizing:border-box;
    padding:2rem;
    padding-left:2rem !important;
    font-size:1.6rem;
    font-weight:400;
    color:#000;
    background:#fff;
    border:1px solid #ddd;
    border-radius:0.5rem;
    flex:1;
    -moz-appearance: none; /* Firefox */  
    -webkit-appearance: none; /* Safari and Chrome */  
    appearance: none;
    background:url('../images/comm/xi-angle-down-min.png') no-repeat right 2rem center / 1.4rem;
}
.board_style .search .sch_style {
    position:relative;
    box-sizing:border-box;
    padding:2rem;
    padding-left:2rem !important;
    font-size:1.6rem;
    font-weight:400;
    color:#000;
    background:#fff;
    border:1px solid #ddd;
    border-radius:0.5rem;
    flex:1;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:1rem;
}
.board_style .search .sch_style input[type="text"] {
    border:0;
    width:calc(100% - (2.4rem - 1rem));
}
.board_style .search .sch_style input[type="text"]:focus {
    outline: none !important;
    box-shadow: none !important;
}
.board_style .search .sch_style button {
    border:0;
    background:none;
    font-size:2.4rem;
    width:2.4rem;
    height:100%;
    padding:0;
}
.board_style .top {
    margin-top:8rem;
    margin-bottom:2rem;
    font-size:1.6rem;
}
.board_style .top p > span,
.board_style .top p > strong {
    font-weight:600;
}

.page_wrap ul {
    display:flex;
    gap:0.4rem;
    margin:8rem auto 0;
    justify-content: center;
}
.page_wrap ul > li {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-family: 'Poppins', 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size:1.6rem;
    width:4.4rem; 
    height:4.4rem;
    box-sizing:border-box;
    border:1px solid #eee;
    border-radius:100%;
}
.page_wrap ul > li > a {
    color:#000;
    display:flex;
    width:100%;
    height:100%;
    align-items:Center;
    justify-content: center;
    text-align:center;
}
.page_wrap ul > li .pg_current {
    font-weight:500;
}
.page_wrap ul > li:has(.pg_current) {
    border:0;
    background:var(--primary);
    color:#fff;
}
.page_wrap ul > li .sound_only,
.page_wrap ul > li .s_only {
    font-size:0;
    position:absolute;
    left:-99999px;
    visibility: hidden;
}
.page_wrap ul > li .pg_start {
    background:url('../images/comm/icon_page_arrow1.png') no-repeat center center / 1rem;
}
.page_wrap ul > li .pg_prev {
    background:url('../images/comm/icon_page_arrow2.png') no-repeat center center / 1rem;
}
.page_wrap ul > li .pg_next {
    background:url('../images/comm/icon_page_arrow3.png') no-repeat center center / 1rem;
}
.page_wrap ul > li .pg_end {
    background:url('../images/comm/icon_page_arrow4.png') no-repeat center center / 1rem;
}
@media(max-width:1199.98px){
    .board_style .search {
        padding:3rem;
    }
    .board_style .search .inner {
        width:60rem;
    }
    .board_style .search select.input_style {
        padding:1.5rem;
        padding-left:1.5rem !important;
        background-position:right 1.5rem center;
    }
    .board_style .search .sch_style {
        padding:1.5rem;
        padding-left:1.5rem !important;
    }
    .board_style .search .sch_style input[type="text"] {
        width:calc(100% - (2rem - 1rem));
    }
    .board_style .search .sch_style button {
        font-size:2rem;
    }
    .board_style .top {
        margin-top:6rem;
    }
}
@media(max-width:991.98px){
    .board_style {
        padding-bottom:10rem;
    }
    .board_style .search {
        padding:2rem;
        border-radius:1.5rem;
    }
    .board_style .search .inner {
        width:54rem;
    }
    .board_style .top {
        margin-top:4rem;
        margin-bottom:2rem;
        font-size:1.4rem;
    }
}
@media(max-width:576.98px){
    .board_style {
        padding-bottom:6rem;
    }
    .board_style .search {
        padding:1.5rem;
        border-radius:1rem;
        box-shadow:0 0.8rem 1.5rem rgba(0,0,0,0.1);
    }
    .board_style .search .inner {
        width:100%;
    }
    .board_style .search select.input_style {
        padding:1.2rem;
        padding-left:1.2rem !important;
        background-position:right 1.2rem center;
    }
    .board_style .search .sch_style {
        padding:1.2rem;
        padding-left:1.2rem !important;
    }
    .board_style .search .sch_style input[type="text"] {
        width:calc(100% - (1.8rem - 1rem));
    }
    .board_style .search .sch_style button {
        font-size:1.8rem;
    }
    .board_style .top {
        margin-top:3rem;
        margin-bottom:1rem;
        font-size:1.3rem;
    }
    .page_wrap ul {
        margin:4rem auto 0;
        gap:0.2rem;
    }
    .page_wrap ul > li {
        font-size:1.4rem;
        width:3.6rem; 
        height:3.6rem;
    }
}


/************************ 갤러리 게시판 ************************/
.board_gallery .gallery_list > ul {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    gap:8rem 2rem;
}
.board_gallery .gallery_list > ul > li {
    width:calc(25% - 1.5rem);
}
.board_gallery .gallery_list > ul > li > a {
    display:flex;
    flex-direction:column;
    gap:2rem;
}
.board_gallery .gallery_list > ul > li > a > .thum {
    position:relative;
    box-sizing:border-box;
    padding-bottom:74%;
    overflow:hidden;
    border-radius:2rem;
    border:1px solid #eee;
}
.board_gallery .gallery_list > ul > li > a > .text {
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.board_gallery .gallery_list > ul > li > a > .text > .cate {
    font-size:1.6rem;
    font-weight:400;
    color:#999;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.board_gallery .gallery_list > ul > li > a > .text > .tit {
    font-size:2.4rem;
    font-weight:700;
    color:#000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
@media(max-width:1199.98px){
    .board_gallery .gallery_list > ul {
        gap:6rem 1.5rem;
    }
    .board_gallery .gallery_list > ul > li {
        width:calc(33.3333% - 1.0rem);
    }
    .board_gallery .gallery_list > ul > li > a > .text > .tit {
        font-size:2.2rem;
    }
}
@media(max-width:991.98px){
    .board_gallery .gallery_list > ul {
        gap:4rem 1rem;
    }
    .board_gallery .gallery_list > ul > li {
        width:calc(33.3333% - .7rem);
    }
    .board_gallery .gallery_list > ul > li > a {
        gap:1rem;
    }
    .board_gallery .gallery_list > ul > li > a > .thum {
        border-radius:1.5rem;
    }
    .board_gallery .gallery_list > ul > li > a > .text > .cate {
        font-size:1.4rem;
    }
    .board_gallery .gallery_list > ul > li > a > .text > .tit {
        font-size:1.8rem;
    }
}
@media(max-width:767.98px){
    .board_gallery .gallery_list > ul > li {
        width:calc(50% - .7rem);
    }
}
@media(max-width:576.98px){
    .board_gallery .gallery_list > ul {
        gap:2rem 0.5rem;
    }
    .board_gallery .gallery_list > ul > li {
        width:calc(50% - .25rem);
    }
    .board_gallery .gallery_list > ul > li > a > .thum {
        border-radius:1rem;
    }
    .board_gallery .gallery_list > ul > li > a > .text {
        gap:.3rem;
    }
    .board_gallery .gallery_list > ul > li > a > .text > .cate {
        font-size:1.3rem;
    }
    .board_gallery .gallery_list > ul > li > a > .text > .tit {
        font-size:1.6rem;
    }
}



/************************ 테이블 스타일 ************************/
.table-style {
    position:relative;
    box-sizing:border-box;
}
.table-style table {
    width:100%;
    box-sizing:border-box;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
}
.table-style table th,
.table-style table td {
    font-size:1.8rem;
    font-weight:400;
    color:#444;
    line-height:1.2;
    box-sizing:border-box;
    padding:2rem;
    text-align:center;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.table-style table th {
    font-weight:600;
    color:#000;
}
.table-style table thead th {
    background:#f9f9f9;
}
.table-style2 table thead th {
    background:var(--primary);
    color:#fff;
}
@media(max-width:991.98px){
    .table-style table th,
    .table-style table td {
        font-size:1.6rem;
        padding:1.5rem;
    }
}
@media(max-width:576.98px){
    .table-scroll {
        overflow-x:auto;
    }
    .table-scroll table {
        width:80rem;
    }
    .table-style table th,
    .table-style table td {
        font-size:1.5rem;
        padding:1.2rem;
    }
}