/*Gallery*/
div.boardGalleryContainer { position:relative; color:#333;    margin:0 auto; }
.con .board-tit{ position:relative; color:#333; margin:0 0 2rem 0; height:4rem; font-weight:600;}
div.boardGalleryContainer select {  }
div.boardGalleryContainer fieldset { border:none; }
div.boardGalleryContainer fieldset legend { display:none; }
div.boardGalleryContainer a { color:#333; text-decoration:none; }
div.boardGalleryContainer a:hover {  }
div.boardGalleryContainer img { border:none; vertical-align:middle; }
div.boardGalleryContainer div.boardList { overflow:hidden;  }
div.boardGalleryContainer div.boardList div.boardListTitle { float:left; padding:0 0 0 2px; line-height:1.0; font-size:15px; margin-bottom:15px;font-weight:normal; color:#898989;}
div.boardGalleryContainer div.boardList div.boardListTitle strong{color:#333;}
div.boardGalleryContainer div.boardList div.galleryList { clear:both;}

/*갤러리 리스트*/
.galleryList{position:relative;  }
.galleryList ul{margin:-3% -1%;}
.galleryList ul li{width:31.333%; margin:3% 1%; float:left;}
.galleryList ul li a{display:block;}
.galleryList ul li a div.gimg{height:253px; margin-bottom:20px; overflow:hidden; position:relative;  border:1px solid #eee;}
.galleryList ul li a div.gimg em{position:absolute; left:0px; top:0px; background:#262520; color:#fff; width:4rem; height:2rem; line-height:2rem; border-radius:0 0 .75rem 0; text-align:center; font-weight:600; z-index: 1;}
.galleryList ul li a div.gimg span{width:100%; height:100%; display: inline-block; 	transition: transform .3s ease-out; }
.galleryList ul li a:hover div.gimg span{transform: scale(1.2);	}
.galleryList p.subject{ font-weight:500; display: inline-block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.3em;height: 2.6em; font-size: 19px;    color: #343434;}
.galleryList p.date{padding-top: 20px; color: #888;}
.galleryList ul li a input{position:relative; z-index:100;}

.galleryList.movie ul li a div.gimg:after{ content : ""; display : block; position : absolute; left :50%; top:50%; margin-top:-15px; margin-left:-13px; width : 26px; height : 30px;  background: url("/images/default/content/play.png") no-repeat center center; z-index:10;}
.galleryList.movie ul li a div.gimg:before{ content : ""; display : block; position : absolute; left :0; top:0;  width : 100%; height : 100%; background : rgba(0, 0, 0, .5); z-index:1;}

/*갤러리 리스트-new */
/*└> 사진배경으로 깔리고 호버시 사진배경 없어지고 흰배경의 검정글씨*/
.galleryList-new{position:relative; }
.galleryList-new ul{margin:-3% -1%;}
.galleryList-new ul li{width:31.333%; margin:3% 1%; float:left; position: relative; height:18rem;}
.galleryList-new ul li a{display:block; width:100%; height:100%; padding:1.5rem 1.25rem 1.25rem; transition: all ease .2s; }
.galleryList-new ul li a:after{ content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
.galleryList-new p.subject{position: relative; font-weight:500; display: inline-block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.3em;height: 2.6em; font-size: 1.2rem;    color: #fff; transition: all ease .1s; z-index: 10;}
.galleryList-new p.desc{font-size: .9rem;  line-height: 1.3rem;  position: relative;  z-index: 1; display: -webkit-box;  overflow: hidden;  height: 3.9rem;  margin-top: 1.5rem; transition: all ease .1s; text-overflow: ellipsis; word-break: break-word; color: #f2f2f2; -webkit-line-clamp: 3;    -webkit-box-orient: vertical;}
.galleryList-new p.date{position: absolute; z-index: 1; bottom: 1.25rem;  padding-top: 1.25rem;color: #fff;}
.galleryList-new ul li a input{position:relative; z-index:100;}
.galleryList-new ul li:hover{background:#fff !important; box-shadow: 6px 8px 16px 0 rgb(0 0 0 / 12%);}
.galleryList-new ul li a:hover{outline:2px solid #262520; background:#fff !important; }
.galleryList-new ul li a:hover p.subject,
.galleryList-new ul li a:hover p.desc,
.galleryList-new ul li a:hover p.date{color:#111;}
.galleryList-new ul li a:hover:after{display:none;}

/* 카테고리 디자인 */




/********************************************************
■ 레이아웃 변경
********************************************************/

/*********** 태블릿 ***********/
@media all and (max-width:1030px){

}

@media all and (max-width:767px){
	.galleryList ul li,
	.galleryList-new ul li{width:48%;}

	div.cate ul{display:flex;margin:-0.5rem 0; position: relative; overflow-x: scroll; padding:0 1rem;}
	div.cate ul li{margin:0;width:50%;width:calc(100%/2 - 1rem - 1px); margin:0.5rem;}
	div.cate ul li a{width:100%;}

	.con .board-tit{ margin:0;}

}

@media (max-width: 524px){
	.galleryList ul li{width:98%;}
	.galleryList-new ul li{width:98%; height:14rem;}
}