@charset "UTF-8";
@import url(/css/board.css);

/*-------------------------------------------------
title       :	갤러리/동영상 게시판
Create date :	2024-04-12
-------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------
	갤러리/동영상 게시판 목록 전용 css

	0. 기본 게시판          :	css/board.css
	0. 웹진형/블로그형 등   :	upload/skin/board/basic.css
	0. 갤러리/동영상 게시판 :	upload/skin/gallery/basic.css
	
	******* CSS 작업 시 지켜주세요. *******
	0. 공통, 목록(list), 보기(view), 입력(form) 으로 나누어서 작성
	0. 마우스 오버 효과는 해당 영역 바로 아래에 아래 소스를 이용해 작성
	@media (min-width:1024px)
	{ 
		
	}
	0. 반응형 1024px, 768px, 480px 을 기본으로 하며, 1024px 에서 모바일 형태로 변경 하며 가장 아래에 작성
	0. 각 영역별로 설명 주석 작성
	0. 화면에서 보이는 영역 순서대로 작성 (검색 -> 목록 -> 페이징...)
----------------------------------------------------------------------------------------------------*/





/* 게시판 목록(list) ***********************************************************************************/

/* 기본 갤러리 */
.board-list:has(.gallery_list){border-bottom:none}
.gallery_list {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4.0rem; padding:4.0rem; padding-bottom:0;}
.gallery_list li {transition:all 0.2s;}
.gallery_list a {display:flex; flex-direction:column; position:relative; height:100%;}
.gallery_list a::before {opacity:0; transition:0.2s; content:""; display:block; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; border:1px solid #02ACEE; box-sizing:border-box;}
.gallery_list a .thumb {overflow:hidden; display:flex; justify-content:center; align-items:center; aspect-ratio:3/2; background-color:#e8eef2;}
.gallery_list a .thumb img {object-fit:cover; width:100%; height:100%; transition:all 0.2s;}
.gallery_list a .desc {flex:1; display:flex; flex-direction:row; flex-wrap:wrap; padding:2.5rem; padding-bottom:3.5rem; border:1px solid #DCDCDC; border-top:none;}
.gallery_list a .desc .title {overflow:hidden; width:100%; height:5.4rem; margin-bottom:3.0rem; font-size:1.8rem; line-height:1.5; color:#151515; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:initial;}
.gallery_list a .desc .title .category {color:#3241AB;}
.gallery_list a .desc span {display:inline-block; margin-right:1.5rem; font-size:1.4rem; color:#151515; font-weight:500;}
.gallery_list a .desc span:last-child {margin-right:0;}
.gallery_list a .desc .label {margin-right:0.5rem;font-weight:400; color:#151515;}
/* 마우스오버 */
@media (min-width:1024px)
{ 
	.gallery_list li:hover {box-shadow:0px 1px 8px #0000001A;}
	.gallery_list li:hover a .thumb img {transform:scale(1.07);}
	.gallery_list li:hover a::before {opacity:1;}
}

/* 웹진형 */
.gallery_list.webzine a .desc .txt {display:none;}



/* 게시판 뷰(view) ***********************************************************************************/

/* 이미지 슬라이드(썸네일형식/swiper) */
.board_view .image_slide {margin-bottom:5.0rem; border-bottom:1px solid #E4E4E4;}
.board_view .image_slide .swiper-wrapper {align-items:center;}
.board_view .image_slide .btn_thumb {box-sizing:border-box; transition:0.2s;}
.board_view .image_slide .btn_thumb::before {display:block; width:100%; height:100%; font-family:"xeicon";}
.board_view .image_slide .btn_thumb.prev::before {content:"";}
.board_view .image_slide .btn_thumb.next::before {content:"";}

.board_view .image_slide .thumb {display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5.0rem; margin-bottom:5.0rem; padding:0 3rem;}
.board_view .image_slide .thumb .btn_thumb {flex:none; width:4.5rem; height:4.5rem; border:1px solid #E9E9E9; color:#B9B9B9; border-radius:100%; font-size:0;}
.board_view .image_slide .thumb .btn_thumb::before {font-size:2.0rem; line-height:4.5rem;}
.board_view .image_slide .thumb .btn_thumb.prev::before {padding-right:2px;}
.board_view .image_slide .thumb .btn_thumb.next::before {padding-left:2px;}
.board_view .image_slide .thumb_slide {overflow:hidden; max-width:700px; padding:3px 0;}
.board_view .image_slide .thumb_slide .swiper-slide {position:relative; min-width:118px;}
.board_view .image_slide .thumb_slide .swiper-slide-thumb-active {box-shadow:3px 3px 3px rgba(0,0,0,0.1);}
.board_view .image_slide .thumb_slide .swiper-slide-thumb-active::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:3px solid #003CA6; box-sizing:border-box;} 
.board_view .image_slide .detail {display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:5.0rem; padding:5rem 0; background:#F9F9FB;}
.board_view .image_slide .detail .btn_thumb {flex:none; width:5rem; color:#666; font-size:0;}
.board_view .image_slide .detail .btn_thumb::before {font-size:5rem;}
.board_view .image_slide .detail .page {width:100%; margin-top:2.0rem;}
.board_view .image_slide .detail .pagination {width:10rem; margin:0 auto; padding:0.7rem 1.5rem; background:#E9E9E9; font-size:1.6rem; font-weight:600; text-align:center; color:#333; line-height:1.2; border-radius:50em;}
.board_view .image_slide .detail .pagination span {color:#333;}
.board_view .image_slide .detail_slide {flex:1; overflow:hidden;}
/* 마우스오버 */
@media (min-width:1024px)
{ 
	.board_view .image_slide .thumb .btn_thumb:hover {background:#003CA6; color:#fff;}
	.board_view .image_slide .detail .btn_thumb:hover {color:#000;}
}

/* 동영상/유튜브 */
.board_view .video .player { }
.board_view .video .player + .player {margin-top:2rem;}
.board_view .video .player video {max-width:100%;}
.board_view .video .youtube + .player {margin-top:2rem;}
.board_view .video .youtube {position:relative; aspect-ratio:16/9;}
.board_view .video .youtube iframe {position:absolute; left:0; top:0; width:100%; height:100%;}
.board_view .video .txt_center {margin-top:2rem;}

/* SK5 */
.board_view .unknown_box {display:none;}



/*******************************************************************************************/
/** 반응형 *********************************************************************************/
/*******************************************************************************************/

@media (max-width:1300px)
{ 
	/* 게시판 목록(list) ***********************************************************************************/
	.gallery_list {gap:3.0rem; padding:3.0rem 1.5rem 0;}
	.gallery_list a .desc {padding:2.5rem 2.0rem;}
	
	/* 게시판 뷰(view) ***********************************************************************************/
	/* 이미지 슬라이드(썸네일형식/swiper) */
	.board_view .image_slide {padding:0;}
	.board_view .image_slide .thumb {padding:0;}
	.board_view .image_slide .detail {padding:5rem 2rem;}
}

@media (max-width:1024px)
{ 
	/* 게시판 목록(list) ***********************************************************************************/
	.board-list:has(.gallery_list) {border-top:1px solid #454B56;}
	.gallery_list {grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.5rem 0; padding:1.5rem 0;}
	.gallery_list li {padding-bottom:1.5rem; border-bottom:1px solid #E8E8E8;}
	.gallery_list li:nth-child(2n-1) {padding-right:1.0rem;}
	.gallery_list li:nth-child(2n) {padding-left:1.0rem;}
	.gallery_list a .thumb {margin-bottom:1.5rem; border-radius:0.5rem;}
	.gallery_list a .desc {padding:0; border:none;}
	.gallery_list a .desc .title {height:4.8rem; margin-bottom:1.0rem; font-size:1.6rem;}
	.gallery_list a .desc span {margin-right:1.0rem; font-size:1.2rem;}
	.gallery_list a .desc .label {margin-right:0;}
	.gallery_list a .desc .date .label {display:none;}
	
	/* 게시판 뷰(view) ***********************************************************************************/

	/* 이미지 슬라이드(썸네일형식/swiper) */
	.board_view .image_slide .thumb {gap:1.5rem; margin-bottom:3.0rem;}
	.board_view .image_slide .thumb .btn_thumb {width:3.5rem; height:3.5rem;}
	.board_view .image_slide .thumb .btn_thumb::before {font-size:2.5rem; line-height:3.5rem;}
	.board_view .image_slide .detail {margin:0 -1.5rem 3.0rem; padding:3rem 1.6rem;}
	.board_view .image_slide .detail .detail_slide {flex:auto;}
	.board_view .image_slide .detail .btn_thumb {display:none;}
}

@media (max-width:768px)
{ 
	/* 게시판 목록(list) ***********************************************************************************/
	/* 웹진형 */
	.gallery_list.webzine {display:block; padding-top:0;}
	.gallery_list.webzine li {padding-bottom:0; border-bottom:1px solid #E8E8E8;}
	.gallery_list.webzine li:nth-child(2n-1) {padding-right:0;}
	.gallery_list.webzine li:nth-child(2n) {padding-left:0;}
	.gallery_list.webzine a {display:flex; flex-direction:row; align-items:stretch; gap:1.5rem; padding:1.5rem 0;}
	.gallery_list.webzine a .thumb {flex:none; height:80px; margin:0;}
	.gallery_list.webzine a .desc {flex:1; flex-direction:column; align-items:flex-start; gap:0; overflow:hidden; padding-top:0;}
	.gallery_list.webzine a .desc .title {display:block; height:inherit; white-space:nowrap; text-overflow:ellipsis; line-height:1;}
	.gallery_list.webzine a .desc .txt {display:block; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:1.5rem; line-height:1;}
	.gallery_list.webzine a .desc .items {margin-top:auto;}
	
	/* 게시판 뷰(view) ***********************************************************************************/
	.board_view .image_slide .thumb_slide .swiper-slide {min-width:inherit;}
}

@media (max-width:480px)
{ 

}