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

.mainBoxWst {
	position:relative; 
	overflow:hidden; 
	text-align:center;
	background:URL(./img/blankSpacerH.png) repeat bottom left #efefef; 
	background-size:25%;
}

.mainBoxWst ul{
	overflow:hidden; padding:0; 
}

.WCMSScontBoardBoxOutside .mainBoxWst ul{ 
	min-height:auto !important;
}

.mainBoxWst ul li{
	width:25%; 
	float:left; 
	overflow:hidden; -webkit-
	transition-duration: 0.2s; -webkit-
	transition-timing-function: ease; 
	transition-duration: 0.2s; 
	transition-timing-function: ease;
}

.mainBoxWst ul li a{
	display:block; 
	position:relative;  
	text-align:left;
}

.mainBoxWst ul li a > em{
	display:block; 
	font-style:normal; 
	position:absolute; 
	left:5px; 
	top:5px; 
}

.mainBoxWst ul li a > b{
	display:block; 
	text-align:left;  
	overflow:hidden; 
	color:#fff; 
	position:absolute; 
	left:30px; 
	right:60px;
	bottom:-90px; 
	-webkit-
	transition-duration: 0.5s; -webkit-
	transition-timing-function: ease-in; 
	transition-duration: 0.5s; 
	transition-timing-function: ease-in; 
	filter:Alpha(opacity=0); 
	opacity:0; -moz-
	opacity:0;
}

.mainBoxWst ul li a > b b{
	font-size:14px; 
	display:inline-block; 
	float:left; 
	max-width:100%; 
	overflow:hidden;
}

.mainBoxWst ul li a:hover > b{
	bottom:30px; -webkit-
	transition-duration: 0.3s; -webkit-
	transition-timing-function: ease-out; 
	transition-duration: 0.3s; 
	transition-timing-function: ease-out; 
	filter:Alpha(opacity=100); 
	opacity:1; -moz-
	opacity:1;
}


.mainBoxWst ul li a .bo_cate_link{
	font-size:11px; 
	display:block; 
	overflow:hidden; 
	text-overflow:ellipsis; 
	white-space:nowrap; 
	text-align:left; 
	color:RGBA(255,255,255,0.5);
	-webkit-
	transition-duration: 0.2s; -webkit-
	transition-timing-function: ease; 
	transition-duration: 0.2s; 
	transition-timing-function: ease;
}

	
.mainBoxWst ul li a .bo_cate_link em{
	display:inline-block; 
	color:RGBA(255,255,255,0.3); 
	padding:0 5px;
}

.mainBoxWst ul li a .arrRight{
	display:block; 
	width:30px; 
	height:30px; 
	position:absolute; 
	right:50px; 
	bottom:30px; 
	background:URL(./img/arrRight.png) no-repeat bottom center;
	background-size:100% auto;
	filter:Alpha(opacity=0);
	opacity:0; -moz-
	opacity:0;
	-webkit-
	transition-duration: 0.4s; -webkit-
	transition-timing-function: ease; 
	transition-duration: 0.4s; 
	transition-timing-function: ease;
}

.mainBoxWst ul li a:hover .arrRight{
	right:30px; 
	filter:Alpha(opacity=100); 
	opacity:1; -moz-
	opacity:1;}

.mainBoxWst 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:30px; 
	color:#b8b8b8; 
	text-align:center;
}

.mainBoxWst ul li a > i{
	display:block; 
	position:relative; 
	overflow:hidden; 
	background:#333; }
.mainBoxWst ul li a > i img{
	background:#fff; 
	display:block; 
	width:100%; 
	height:auto; -webkit-
	transition-duration: 0.4s; -webkit-
	transition-timing-function: ease; 
	transition-duration: 0.4s; 
	transition-timing-function: ease;
}

.mainBoxWst ul li a:hover > i .youtube_img,
.mainBoxWst ul li a:hover > i img{
	transform: scale(1.1);  
	filter:Alpha(opacity=10); 
	opacity:0.1; -moz-
	opacity:0.1;
}

.mainBoxWst ul li a > i em{
	display:block; 
	position:absolute; 
	left:0px; top:0px; 
	right:0px; bottom:0px; 
	width:100%; overflow:hidden; 
	background-color:#333;
}

.mainBoxWst ul li a > i .youtube_img{
	display:block; width:100%;
	height:100%; 
	background-repeat:no-repeat; 
	background-size:cover; 
	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;
}

.mainBoxWst ul li a:hover > i .youtube_img{
	transform: scale(1.1); -webkit-
	transition-timing-function: ease; 
	transition-duration: 0.2s; 
	transition-timing-function: ease; 
}

.mainBoxWst li a span{
	font-size:11px;
}

.mainBoxWst li .fa-heart{
	color:#ff0000;
}

.mainBoxWst li .fa-lock{
	display: inline-block; 
	font-size:11px; 
	line-height: 14px; 
	width: 16px; 
	color: #999; 
	background: #efefef; 
	text-align: center; 
	border-radius: 2px; 
	font-size: 12px; 
	border:1px solid #ddd
}

.mainBoxWst li .new_icon{
	display:inline-block; 
	font-size:11px; 
	width: 16px; 
	line-height:16px; 
	color:#fff; 
	background:#ff6600; 
	text-align:center; 
	border-radius: 50%;
}

.mainBoxWst li .hot_icon{
	display:inline-block;
	font-size:11px; width: 16px; 
	line-height:16px ; color:#fff;
	background:#e52955; 
	text-align:center; 
	border-radius: 50%;
}

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

.mainBoxWst .empty_pWst {
	position:absolute; 
	left:0px; top:50%;
	margin-top:-150px;
	width:100%; color:RGBA(0,0,0,0.2);
	text-align:center; 
	font-size:30px; 
	font-weight:700;
}

.mainBoxWst .empty_pWst u{
	display:block; 
	width:200px; 
	height:200px; 
	margin:0 auto 15px; 
	background:URL(../../../img/logo.png) no-repeat center center; 
	background-size:100% auto;  
	filter:Alpha(opacity=10);
	opacity:0.1; -moz-
	opacity:0.1;
	
}
.mainBoxWst .empty_liImg{
	background:URL(./img/blankSpacer.png) repeat top left #efefef;
	background-size:100% 100%;
	
}
.mainBoxWst .empty_liImg img{
	display:block; width:100%; 
	height:auto; filter:Alpha(opacity=50);
	opacity:0.5; -moz-
	opacity:0.5;}

/* ====== 여기서 부터 간격 조정 하는 곳 ====== */
@media all and (max-width:1400px)
{
	.mainBoxWst ul li{width:25%;} /* ✅ PC: 4열 고정 */
	.mainBoxWst {background-size:25%;}
}
@media all and (max-width:650px)
{
	.mainBoxWst ul li{width:50%;} /* ✅ 모바일: 2열 고정 */
	.mainBoxWst {background-size:50%;}
}