@charset "UTF-8";

.b-category{position: relative;margin-bottom: 5.7rem;}
.b-category .category-box{position:relative;}
.b-category .category-box ul{display: flex;gap: 0 28px;}
.b-category .category-box ul li{position:relative;vertical-align: bottom;z-index: 5;display: block;}
.b-category .category-box ul li a{position: relative;font-size: 20px;font-weight: 700;color: #222;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;letter-spacing: -0.5px;}
.b-category .category-box ul li.active a{background: #FFFFFF;z-index: 2;color: #b00000;}
.b-category .category-box ul li.active a:before{content: '';width: 5px;height: 5px;border-radius: 50%;background: #b00000;position: absolute;top: -11px;margin: auto;left: 0;right:0;}
.b-category .b-category-m{background: #163055 url(../img/sj-common/board/gallery-selectbox-white.png) no-repeat center right 15px;position: relative;padding: 16px 25px;display: none;border-radius: 2px;}
.b-category .b-category-m label {color: #fff;font-weight: 500;font-size: 18px;display: block;}
.b-category .sel-category {background: transparent;border: 0;color: #fff;filter: alpha(opacity=0);opacity: 0;position: absolute;width: 100%;left: 0;top: 0;height: 100%;}
.b-category .sel-category option {font-size: 18px;color: #111;}

/*** 검색 영역 ***/
.bn-search{padding-bottom: 6rem;}
.bn-search .b-search-wrap{justify-content: space-between;gap: 5px;}
.bn-search .b-sel-box{position: relative;z-index: 1;width: 250px;margin: 0;}
.bn-search .b-sel-box ul{display: none;position: absolute;width: 100%;overflow:hidden;box-sizing: border-box;max-height: 406px;overflow: auto;top: 100%;padding-top: 4px;}
.bn-search .b-sel-box.close{z-index: 10;}
.bn-search .b-sel-box.close ul{display:block;}
.bn-search .b-sel-title{display: block;background: #fff url(../img/sj-common/board/gallery-selectbox.png) no-repeat right 15px center;box-sizing: border-box;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;overflow: hidden;font-size: 15px;font-weight: 700;color: #222;border: 1px solid #ccc;height: 54px;width: 100%;padding: 17px 25px 17px 20px;border-radius: 2px;}
.bn-search .b-sel-box ul li{border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
.bn-search .b-sel-box ul li:first-child{border-top: 1px solid #ccc;}
.bn-search .b-sel-box ul li:last-child{border-bottom: 1px solid #ccc;}
.bn-search .b-sel-box ul li a{display: block;padding: 7px 20px;font-size: 15px;font-weight: 500;color: #222;background: #fff;box-sizing: border-box;}
.bn-search .b-sel-box ul li:first-child a{padding-top: 20px;}
.bn-search .b-sel-box ul li:last-child a{padding-bottom: 20px;}
.bn-search .b-sel-box ul li a:hover{color: #b00000;font-weight: 700;text-decoration: underline;text-underline-offset: 4px;}
.bn-search .b-search-box{gap: 5px;flex: 1;margin-left: 5px;}
.bn-search .b-search-box .b-sel-label{display: none;}
.bn-search .b-input{padding: 1.6rem 2rem 1.5rem;border: 1px solid #ccc;border-radius: 2px;margin: 0;}
.bn-search .b-sel-btn{background: #163055;}
.bn-search .b-sel-btn span{background: url(../img/sj-common/board/gallery-search.png) no-repeat center left;}

/*** 일반 목록 ***/
.archive-list ul{display: grid;gap: 57px 60px;grid-template-columns: repeat(3, 1fr);}
.archive-list ul .img-box{position: relative;overflow: hidden;margin-bottom: 20px;height: 290px;}
.archive-list ul .img-box img{max-width: 100%;width: 100%;max-height: 100%;height: 100%;transition: transform 0.5s ease;transform: scale(1);object-fit: cover;object-position: center;}
.archive-list ul .img-box span{position: absolute;top: 0;right:0;background:#b00000;font-size: 14px;font-weight: 700;color: #fff;padding: 9.5px 15px;min-width: 71px;box-sizing: border-box;z-index: 10;}
.archive-list ul .txt-box .txt01{font-size: 20px;font-weight: 700;line-height: 30px;color: #222;margin-bottom: 5px;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;}
.archive-list ul .txt-box .txt02{font-size: 14px;font-weight: 500;line-height: 24px;color: #444;margin-bottom: 2px;background: url(../img/sj-common/board/archive-date.png) no-repeat left center;padding-left: 25px;background-size: 15px 15px;}
.archive-list ul .txt-box .txt03{font-size: 14px;font-weight: 500;line-height: 24px;color: #444;margin-bottom: 4px;background: url(../img/sj-common/board/archive-location.png) no-repeat left center;padding-left: 25px;}
.archive-list ul .txt-box .txt04{font-size: 14px;font-weight: 500;line-height: 24px;color: #989898;text-underline-offset: 3px;}
.archive-list ul .txt-box .txt-blue{color: #004071;text-decoration: underline;}
.archive-list ul .txt-box .txt-red{color: #b00000;text-decoration: underline;}

@keyframes fadeInUp {
    from {opacity: 0;transform: translateY(20px);}
    to {opacity: 1;transform: translateY(0);}
}
.archive-list ul li{opacity: 0;transform: translateY(20px);animation: fadeInUp 0.5s ease-in-out forwards;}
.archive-list ul li:hover .img-box img{transform: scale(1.1);}


/*** 페이징 ***/
.b-paging .b-paging-wrap ul li{margin: 0 0.45rem;}
.b-paging .b-paging-wrap ul li.first a{margin:0 1.8rem 0 0;background:url(../img/sj-common/board/btn-first-page.png) no-repeat center;}
.b-paging .b-paging-wrap ul li.prev a{margin:0 1.8rem 0 0;background:url(../img/sj-common/board/btn-prev-page.png) no-repeat center;}
.b-paging .b-paging-wrap ul li.next a{margin:0 0 0 1.8rem;background:url(../img/sj-common/board/btn-next-page.png) no-repeat center;}
.b-paging .b-paging-wrap ul li.last a{margin:0 0 0 1.8rem;background:url(../img/sj-common/board/btn-last-page.png) no-repeat center;}
.b-paging .b-paging-wrap ul li:not(.pager) a{font-size: 1.5rem;width: 3rem;height: 3rem;color: #666;}
.b-paging .b-paging-wrap ul li a.active{background: var(--color68);color: var(--text-color24);}

@media (max-width: 1280px){
	.bn-search form{flex-direction: row;}
	.bn-search .b-search-box{margin-left: 0;}
}

@media (max-width: 1024px){
	.b-category{margin-bottom: 3rem;}
	.bn-search{padding-bottom: 2rem;}
	.bn-search .b-sel-box{width: calc((100% / 3) - 4px);min-width: auto;}
	.bn-search .b-sel-btn span{text-indent: 0;}
}

@media (max-width: 768px){
	.archive-list ul{gap: 30px 20px;grid-template-columns: repeat(2, 1fr);}
	.archive-list ul .img-box{height: 250px;}
}

@media (max-width: 480px){
	.archive-list ul{grid-template-columns: repeat(1, 1fr);}
}