#wrap {
    display: flex;
    flex-flow: column nowrap;
    /* border: 1px solid red; */
    width: 90%;
    /* height: 100vh; */
    margin: 0 auto;
    max-width: 1200px;
    background-color: var(--main-bg-m-grey);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* header----------------------- */
.header {
    order: 1;
    width: 100%;
    height: 140px;
    background-color: var(--main-bg-color);
    box-shadow: 2px 2px 6px 0px rgb(0 0 0 / 10%);
}
/* .header>.top_area영역 */
.top_area {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    box-shadow: 2px 2px 6px 0px rgb(0 0 0 / 10%);
}
.logo_wrap {
    display: flex;
    flex-wrap: row nowrap;
    justify-content: flex-start;
}
.logo_wrap h1 {
    color: var(--main-font-wh);
    margin-right: 0.5rem;
}
.link_wrap {
    display: flex;
    flex-wrap: row nowrap;
}
.link_wrap button {
    padding: 0.5rem;
    border: none;
    border-radius: 3px;
}
.top_title {
    background-image: url(../images/brand-l.png);
    width: 2.2rem;
    height: 2.2rem;
    background-size: cover;
    background-position: center;
    display: none;
}
.top_area .menu.btn {
    display: block;
    border-radius: 3px;
    border: 0;
    font-size: 0;
    padding: 0.5rem;
    box-shadow: 2px 2px 0px 0px rgb(92 109 116 / 62%), inset 2px 2px 13px 0px rgb(92 109 116 / 62%);
    /* 외부그림자, 내부 그림자(inset) */
    width: 1.9rem;
    height: 1.9rem;
    background-image: url(../images/menu3.png);
    background-size: cover;
    background-position: center;
    background-color: transparent;
    display: none;
}
/* index_2----------------- */
#menu_list {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem;
    color: var(--main-font-wh);
}
#menu_list .nav {
    /* border: 1px solid red; */
    width: 50%;
}
#menu_list .nav ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    /* border: 1px solid red; */
    margin: 0;
    padding: 0.8rem 0;
}
/* header 검색 폼 */
div.search {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
}
div.search div {
    flex: 1 auto;
}
#find {
    display: block;
    width: 100%;
    padding: 0.8rem;
}
.nav ul li:hover,
.search:hover {
    background-color: var(--sub-bg-color);
}
#searchFrm button {
    width: 20%;
    min-width: 70px; /* 최소 너비 */
    max-width: 150px; /* 최대 너비 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    overflow: hidden; /* 텍스트 오버플로 시 숨김 */
    text-overflow: ellipsis; /* 텍스트 잘림 표시 (...) */
}
/* footer ------------------------- */
.footer {
    display: block;
    order: 3;
    width: 100%;
    background-color: var(--footer-bg-color);
    color: var(--footer-font-rgrey);
    text-align: center;
    padding: 3rem 0;
}
/*.main #content-wrap------------------------ */
main#content-wrap {
    order: 2;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    min-height: 90vmin;
    background-color: var(--main-bg-m-grey);
    justify-content: center;
    align-items: stretch;
    column-gap: 0.2rem;
}
/* .main_left board ----- */
.main_left {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* border: 1px solid red; */
    width: 49%;
    /* background-color: brown; */
}
.main_right {
    display: flex;
    flex-flow: column nowrap;
    width: 49%;
    /* background-color: cadetblue; */
}
.main_header {
    height: 33.33%;
    background-color: lightcyan;
    border-radius: 3px;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
    font-size: 2rem;
    color: var(--main-font-wh);
}
.main_header header {
    /* border: 1px solid red; */
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-image: url('../images/header_img.jpg');
    background-size: cover;
    border-radius: 3px;
}
/* .main_left [board] ------------------- 
    #main
        .main_left
            .main_header
            .board
                .data-list
                    .list-body
                        .list-item
                        
 -------------------------------------------
*/
.main_left section.board {
    display: flex;
    flex-direction: column;
    align-items: space-between;
    height: 100%;
}
.data-list {
    padding: 1rem;
    background-color: var(--main-font-wh);
    margin-bottom: 0.5rem;
    flex: 1; 균등하게 배치되도록 1 1 0% */
    /* border-radius: 0.3rem; */
    /* border: 1px solid red; */
}
.data-list .list-title {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 0.1rem solid var(--desc-line-color);
}
.list-title a {
    font-size: 0;
    display: flex;
    flex-direction: column;
    /* border: 1px solid black; */
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.list-title a::after {
    content: '';
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background-image: url(../images/more.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.5;
}
.data-list .list-body .list-item {
    padding: 0.2rem;
    display: flex;
    justify-content: space-between;
}
/* 알림--- */
.data-list .list-body .list-item .noti strong {
    display: inline-block;
    background-color: var(--denger-color);
    padding: 0 5px;
    border-radius: 3px;
    font-size: 0.9rem;
    color: #fff;
    margin-right: 0.5rem;
}
/* 게시판 제목 */
.data-list .list-body .list-item a {
    flex: auto;
    display: block;
    width: 50%;
    /* border: 1px solid green; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 게시글 날짜-- */
.data-list .list-body .list-item span:not(.noti) {
    text-align: right;
    color: var(--footer-bg-color);
    flex: 0 0 25%;
}

/* .main_right gallery ------------------- 
    #main
        .main_right 
            .data-list
                .list-title
                .list-body-grid
                    .gallery-item
                        .gallery-content
                            .gallery-img
                            .gallery-title
                            .gallery-desc
 -------------------------------------------
*/
.main_right>.data-list{
     display: flex;
     flex-direction: column;
    gap: 1rem;
}
.main_right .data-list .list-body-grid {
    flex-grow: 1;
    /* border: 1px solid red; */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 화면 크기에 따라 열 수가 자동 조절 */
    gap: 1rem;
    box-sizing: border-box;
    padding: 0 .5rem;
}
.gallery-item {
    display: block;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 0 .5rem;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.gallery-item a:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gallery-img {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 비율 */
    overflow: hidden;
}
.gallery-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-content {
    padding: 12px;
}
.gallery-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.gallery-desc {
    display: flex;
    justify-content: space-between;
}
.f09 {
    font-size: 0.9rem;
}
.ellips {
    display: block;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ======미디어 쿼리===================================== */
/* 360px 모바일 */
@media screen and (min-width: 360px) {
    main#content-wrap {
        /* background-color: red; */
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: stretch;
    }
    .main_left {
        display: flex;
        width: 100%;
        flex-flow: column nowrap;
    }
    .main_right {
        display: flex;
        width: 100%;
        flex-flow: column nowrap;
    }
    .main_right .data-list .list-body-grid {
        grid-template-columns: 1fr !important;
    }
    .main_right .data-list .list-body-grid .gallery-item {
        width: 100%;
    }
   
    /* 모바일 헤더 메뉴 360px */
    .header {
        height: 10%;
    }
    .top_area .logo_wrap {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    .top_area .logo_wrap .top_title {
        display: block;
        width: 2.2rem;
        height: 2.2rem;
        background-image: url(../images/brand-l.png);
        background-size: cover;
        background-position: center;
    }
    .top_area .logo_wrap h1 {
        display: none;
    }
    .top_area .menu.btn {
        display: block;
    }
    .top_area .link_wrap {
        display: none;
    }
    /* 헤더 하위 메뉴 햄버거 클릭시 리스트 형태로 보여주기 */
    #menu_list {
        display: none;
        justify-content: space-between;
        padding: 0.8rem;
        color: var(--main-font-wh);
    }
    #menu_list.is-open {
        /*#menu_list.is-open이 활성화되었을 때만 표시*/
        /* border:1px solid red; */
        display: flex;
        flex-flow: column nowrap;
    }
    #menu_list.is-open nav {
        width: 100%;
    }
    #menu_list.is-open nav ul {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        width: 100%;
    }
    #menu_list.is-open nav ul li {
        width: 100%;
        border-bottom: 1px solid #fff;
        padding: 0.5rem;
    }
    #menu_list.is-open .search {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
}
/* 768px  태블릿 ------------------------------------------ */
@media all and (min-width: 768px) {
    .header {
        height: 15%;
    }
    .top_area {
        display: flex;
        justify-content: space-between;
    }
    .top_area .logo_wrap {
        width: 50%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
    }
    .top_area .logo_wrap h1 {
        display: block;
    }
    .top_area .menu.btn {
        display: none;
    }
    .top_area .link_wrap {
        display: block;
    }
    .top_area .logo_wrap .top_title {
        /* display: block; */
        display: none;
    }
    /* 헤더 하위 메뉴 리스트 --- */
    #menu_list {
        display: flex;
        justify-content: space-between;
        padding: 0.8rem;
        color: var(--main-font-wh);
    }
    #menu_list .nav {
        /* border: 1px solid red; */
        width: 50%;
    }
    #menu_list .nav ul {
        list-style: none;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        /* border: 1px solid red; */
        margin: 0;
        padding: 0.8rem 0;
    }
    /* main -------- */
    main#content-wrap {
        /* background-color: red; */
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: stretch;
    }
    .main_left {
        display: flex;
        width: 50%;
        flex-flow: column nowrap;
        /* height: 70vh; 처음엔 높이 지정. 후에 지우기 */
    }
    .main_right {
        display: flex;
        width: 50%;
        flex-flow: column nowrap;
        /* height: 70vh; */
    }
    .main_right>.data-list{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .main_right .data-list .list-body-grid {
        flex-grow: 1;
        /* border: 1px solid red; */
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;/* 다시 2열 */
        gap: 1rem;
        box-sizing: border-box;
        padding: 0 .5rem;
    }
    #menu_list {
        display: flex !important;
        justify-content: space-between;
        padding: 0.8rem;
        color: var(--main-font-wh);
    }
    #menu_list .nav {
        /* border: 1px solid red; */
        width: 50%;
    }
    #menu_list .nav ul {
        list-style: none;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        /* border: 1px solid red; */
        margin: 0;
        padding: 0.8rem 0;
    }
    /* header 검색 폼 */
    div.search {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        /* border: 1px solid red; */
    }
    div.search div {
        flex: 1 auto;
    }
    #find {
        display: block;
        width: 100%;
        padding: 0.8rem;
    }
    .nav ul li:hover,
    .search:hover {
        background-color: var(--sub-bg-color);
    }
    #searchFrm button {
        width: 20%;
        min-width: 70px; /* 최소 너비 */
        max-width: 150px; /* 최대 너비 */
        white-space: nowrap; /* 텍스트 줄바꿈 방지 */
        overflow: hidden; /* 텍스트 오버플로 시 숨김 */
        text-overflow: ellipsis; /* 텍스트 잘림 표시 (...) */
    }
}
/* 1024px  데스크탑 -------------------- */
@media all and (min-width: 1024px) {
    main#content-wrap {
        order: 2;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: stretch;
        width: 100%;
        min-height: 70vmin;
        background-color: var(--main-bg-m-grey);
        /* border: 2px solid red; */
    }
    .main_left {
        /* border: 3px solid red; */
        display: flex;
        flex-flow: column nowrap;
        width: 49.8%;
        /* background-color: brown; */
    }
    .main_right {
        width: 49.8%;
        /* background-color: cadetblue; */
    }
    .main_left section.board {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: space-between;
    }
    #menu_list {
        display: flex;
        justify-content: space-between;
        padding: 0.8rem;
        color: var(--main-font-wh);
    }
    #menu_list .nav {
        /* border: 1px solid red; */
        width: 50%;
    }
    #menu_list .nav ul {
        list-style: none;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        /* border: 1px solid red; */
        margin: 0;
        padding: 0.8rem 0;
    }
    /* header 검색 폼 */
    div.search {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        /* border: 1px solid red; */
    }
    div.search div {
        flex: 1 auto;
    }
    #find {
        display: block;
        width: 100%;
        padding: 0.8rem;
    }
    .nav ul li:hover,
    .search:hover {
        background-color: var(--sub-bg-color);
    }
    #searchFrm button {
        width: 20%;
        min-width: 70px; /* 최소 너비 */
        max-width: 150px; /* 최대 너비 */
        white-space: nowrap; /* 텍스트 줄바꿈 방지 */
        overflow: hidden; /* 텍스트 오버플로 시 숨김 */
        text-overflow: ellipsis; /* 텍스트 잘림 표시 (...) */
    }
}