@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:20px; right:0px;bottom:30px; text-shadow: 1px 2px 2px rgba(0,0,0,0.3); 
	-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:1; -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:60px; -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.7);text-shadow: 1px 2px 2px rgba(0,0,0,0.3); 
	-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:33.33333%;}
	.mainBoxWst {background-size:33.33333%;}
}
@media all and (max-width:650px)
{
	.mainBoxWst ul li{width:50%;}
	.mainBoxWst {background-size:50%;}
}