@charset "utf-8"; 
/* copyright(c) WEBsiting.co.kr */
/* 갤러리 새글 스킨 (latest) */

.galleryBoxLat {position:relative; text-align:center;height:auto;} /* margin-bottom:20px; padding:20px;overflow:hidden;  */
.galleryBoxLat .galleryLatTit {display:block; }
.galleryBoxLat .galleryLatTit a{color:#333; display:inline-block; position:relative; margin:0 auto 10px; padding:20px; font-size:20px; text-align:center; }
.galleryBoxLat .galleryLatTit a u{display:block; width:50px; height:1px; background:#ddd; position:absolute; left:50%; bottom:0px; margin-left:-25px; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }
div:hover.galleryBoxLat .galleryLatTit a u{width:100px;  margin-left:-50px;  }

.galleryBoxLat ul{overflow:hidden;  margin:20px 0; padding:0; min-height:204px;}
.WCMSScontBoardBoxOutside .galleryBoxLat ul{ min-height:auto !important;}
.galleryBoxLat ul:after{clear:both;display:block;content:'';}
.galleryBoxLat ul li{width:25%; float:left; overflow:hidden; }
.galleryBoxLat ul li a{display:block; position:relative; }
.galleryBoxLat ul li a em{display:block; font-style:normal; position:absolute; left:5px; top:5px; }
.galleryBoxLat ul li a > b{font-size:20px;font-weight:300 !important;display:block; text-align:center; height:30px; line-height:30px; overflow:hidden; text-overflow:ellipsis; 
white-space:nowrap; text-align:center; color:#fff; position:absolute; left:10px; right:10px; top:150%; margin-top:-15px;
-webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }
.galleryBoxLat ul li a:hover > b{top:50%; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }

.galleryBoxLat ul li a .bo_cate_link{display:block; text-align:center; height:30px; line-height:30px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; width:100%; position:absolute; left:0px; bottom:150%; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }
.galleryBoxLat ul li a:hover .bo_cate_link{bottom:52%; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }



.galleryBoxLat ul li a > i u{display:block; text-decoration:none; font-style:normal; position:absolute; left:0; top:50%; width:100%; margin-top:-10px; height:20px; line-height:20px; font-size:12px; color:#999; }
.galleryBoxLat ul li a > i{display:block; position:relative; overflow:hidden; background:#333; }
.galleryBoxLat ul li a > i img{display:block; width:100%; height:auto; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }
.galleryBoxLat ul li a:hover > i .youtube_img,
.galleryBoxLat ul li a:hover > i img{filter:Alpha(opacity=50); opacity:0.5; -moz-opacity:0.5; transform: scale(1.1); -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }


.galleryBoxLat ul li a > i em{display:block; position:absolute; left:0px; top:0px; right:0px; bottom:0px; width:100%; overflow:hidden; background-color:#333; }
.galleryBoxLat ul li a > i .youtube_img{display:block; width:100%; height:100%; background-repeat:no-repeat; background-size:auto 200%; background-position:center center; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }
.galleryBoxLat ul li a:hover > i .youtube_img{background-size:auto 220%; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }


.galleryBoxLat li a span{font-size:11px; }
.galleryBoxLat li .fa-heart{color:#ff0000; }
.galleryBoxLat li .fa-lock{display: inline-block; font-size:11px; line-height: 14px; width: 17px; color: #999; background: #efefef; text-align: center; border-radius: 2px;  border:1px solid #ddd}
.galleryBoxLat li .new_icon{display:inline-block; font-size:11px; width: 17px; line-height:16px; color:#fff; background:#ff6600; text-align:center; border-radius: 50%; }
.galleryBoxLat li .hot_icon{display:inline-block; font-size:11px; width: 17px; line-height:16px ; color:#fff; background:#e52955; text-align:center; border-radius: 50%; }


.galleryBoxLat .lt_more {clear:both;width:120px;height:35px;line-height:28px; font-size:16px; font-weight:500; display:block;color:#222; 
					border-radius:50px;  text-align:center; background:#fff !important; border:1px solid #e0e3e7;position:absolute;top:200px;left:-190px;}
.galleryBoxLat .lt_more:hover{color:#fff;background:#313848 !important;transition:0.3s;}
.galleryBoxLat .lt_more > i{padding-left:10px;font-size:24px;font-style:normal;font-weight:300;display:inline-block;}



.galleryBoxLat .fa-youtube-play{font-size:18px; vertical-align:middle; }

.galleryBoxLat .empty_li {width:100% !important; line-height:204px; min-height:204px; color:#999; text-align:center; padding:0;}






@media all and (max-width:1400px)
{
.galleryBoxLat ul li a > b {font-size:18px;}
}


@media all and (max-width:1300px)
{

.galleryBoxLat .lt_more {font-size:15px;left:-180px;}
.galleryBoxLat {padding:0 10px;}
}


@media all and (max-width:1100px)
{
	 
	.galleryBoxLat .lt_more {font-size:15px;top:100px;left:-165px;}
}

@media all and (max-width:980px)
{
	
	.galleryBoxLat {padding:0;}
	.galleryBoxLat .lt_more {width:40px;height:40px;border-radius:20px;top:-70px;right:20px !important;left:auto;border:none;}
	.galleryBoxLat .lt_more > i{padding-left:0px;line-height:37px;text-align:center;}
	span.button_hidden {display:none;}
	.galleryBoxLat ul{min-height:auto;margin:0px 0; }
	.galleryBoxLat ul li{width:50%; }
	.galleryBoxLat ul li a > b {font-size:16px;}
}



@media all and (max-width:650px)
{
	
	.galleryBoxLat .galleryLatTit a{padding:15px; font-size:16px; }

	
	


}

@media all and (max-width:320px)
{

.galleryBoxLat ul li a > b {font-size:14px;}
	
}