@charset "utf-8";


/* 게시판 목록 */
#bo_list .list-box .li_label span.top100 { background:#fb6d36; margin-right:auto; }


/* board.css에서는 필요없는 내용 */
#bo_list .list-top .swiper span { display:inline !important; }





#bo_list .list-top .area:before { left:-30%; }

#bo_list .list-top { display:flex; flex-direction:row-reverse ; justify-content: space-between; flex-wrap:wrap; --div-gap:20px; }
/* #bo_list .list-top > div:not(.category) { width:calc(50% - 20px); } */


#bo_list .list-top .recommend { width:calc(60% - var(--div-gap)); position:relative; border-radius:10px; z-index:2; display: flex; flex-direction:column; --swiper-theme-color: var(--main-color3); --swiper-pagination-bullet-horizontal-gap:3px; }
#bo_list .list-top .recommend .title { margin-bottom:10px; font-weight: 600; }
#bo_list .list-top .recommend .swiper { width:100%; }
#bo_list .list-top .recommend a { position:relative; height:auto; border-radius:20px; height:100%; overflow:hidden; --v-padding:20px; --h-padding:25px; }

#bo_list .list-top .recommend .li_thumb { position:relative; background:#ddd; padding-bottom:66.66% ; }
#bo_list .list-top .recommend .li_thumb img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; }

#bo_list .list-top .recommend .content { position:relative; padding:var(--v-padding) var(--h-padding); margin-bottom:5px; font-size:.875rem; background:#fff; }

#bo_list .list-top .recommend .tag { position:relative; font-weight:600; margin-bottom:5px; }
#bo_list .list-top .recommend .tag span { background:none no-repeat left center/contain; margin-right:10px; white-space: nowrap; }
#bo_list .list-top .recommend .tag span:not(:nth-child(3)) i { margin-right:3px; color:var(--main-color2); }

#bo_list .list-top .recommend .li_subject { font-size:1.125rem; font-weight:600; }

#bo_list .list-top .recommend .address { color:#888; }
#bo_list .list-top .recommend .pg { margin-top:10px; }


#bo_list .list-top .area { display:flex; align-items: center; flex-wrap:wrap; padding-bottom:0; width:calc(40% - var(--div-gap)); }

#bo_list .list-top .area li b { color:#aaa; font-size:.75rem; display:block; line-height:1; }
#bo_list .list-top .area button { border-radius:5px; padding:5px 20px; background:#111; color:#fff; margin-left:auto; display:block; margin-bottom:30px; }

#bo_list .list-top .category { width:100%; display:flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top:20px; }
#bo_list .list-top .category .swiper span { display:block; }



#bo_list .list-top .category button { border:1px solid #666; border-radius:99px; padding:5px 20px; font-size:.875rem; }


@media (min-width: 1025px) {
    #bo_list .list-top .area ul { width:100%; grid-template-columns: repeat(6, 1fr); --circle-gap:10px 30px; margin-bottom:10px; }
}


@media (max-width: 1400px) {
    #bo_list .list-top .area ul { --circle-gap: 10px 20px; }
}

@media (max-width: 1200px) {
    #bo_list .list-top { --div-gap:15px; }
    #bo_list .list-top .area ul { --circle-gap: 10px 15px; }
}

@media (max-width: 1024px) {
    #bo_list .list-top { display:block; }
    #bo_list .list-top .recommend { position:relative; width:100%; padding-bottom:10px; }
    #bo_list .list-top .recommend:before { content:""; position:absolute; left:50%; top:0; bottom:0; width:100vw; transform: translateX(-50%); background:#f8f8f8; z-index:-1; }
    #bo_list .list-top .recommend .pg { margin-top:0; }


    #bo_list .list-top .area { width:auto; padding-top:20px; }
    #bo_list .list-top .area ul { --circle-gap: 15px; }
    #bo_list .list-top .area:before { left:50%; }

    #bo_list .list-top .area button { margin:5px var(--c-padding) 15px auto; }

}