@charset "utf-8";
/**************************************************

	SUPERBOARD :: BOARD SKIN :: gallery

**************************************************/
#sb-gallery{margin: -1%;}
#sb-gallery > li{position: relative;display: inline-block;*display: inline;*zoom: 1;vertical-align: top;margin: 1%;width: 31.33%;}
#sb-gallery > li .link{position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height: 100%;border: 1px solid rgba(0,0,0,0);box-sizing: border-box;}
#sb-gallery > li .state {position: absolute;top: 5px;left: 5px;z-index: 1;padding: 0 15px;height: 25px;line-height: 25px;background: #000;font-size: 12px;color: #fff;border-radius: 2px;}
#sb-gallery > li .tmb{padding-bottom: 65%;border: 1px solid #dddddd;text-align: center;background-position: center center;background-size: cover;}
#sb-gallery > li .infobox{border: 1px solid #dddddd;border-width: 0 1px 1px 1px;padding: 25px 15px;}
#sb-gallery > li .infobox .sbj{display: block;margin-bottom: 10px;font-size: 16px;line-height: 20px;color: #333333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 600;}
#sb-gallery > li .infobox .info > li{position: relative;display: inline-block;*display: inline;*zoom: 1;vertical-align: top;margin-right: 20px;font-size: 12px;color: #333333;}
#sb-gallery > li .infobox .info > li:after{position: absolute;top: 50%;right: -12px;margin-top: -6px;content: '';display: block;width: 1px;height: 12px;background: #dddddd;}
#sb-gallery > li .infobox .info > li:last-child:after{display: none;}
#sb-gallery > li:hover .link{border-color: #000;}
#sb-gallery > li:hover .infobox .sbj{text-decoration: underline;}
#sb-gallery > li.on .state {background: #8e5467;}
#sb-gallery > li.off .link {background: rgba(0,0,0,0.5);height: auto;padding-bottom: calc(65% - 1px);}

#sb-view .titWrap .sbj .state {display: inline-block;vertical-align: 1px;margin-right: 5px;padding: 0 10px;height: 26px;line-height: 26px;background: #000;font-size: 14px;color: #fff;border-radius: 2px;}
#sb-view .titWrap .sbj .state.on {background: #8e5467;}

#sb-view .etcfield {position: relative;min-height: 30px;}
#sb-view .etcfield .rig-btn {position: absolute;top: 17px;right: 20px;margin: 0;}
#sb-view .etcfield .like-cnt {background: #fff;}
#sb-view .etcfield .link_url {background: #fff;}

.button_body {display:block; position:relative;  margin:60px 0 30px; min-height:35px;text-align: right;font-family: empty;font-size: 0;}
.button_body > * {display: inline-block;vertical-align: middle;font-family: noto;font-size: 14px;text-align: center;}
.button_body #sh-link {padding:0 15px; line-height:33px; border:1px solid #ddd; border-radius:30px; font-size:13px; font-weight:normal; color:#666; background: #fff;}

/*좋아요*/
.like-container{display:inline-block;position:relative; width:auto; height:35px; margin-left:5px; z-index:9;}
.like-container:after {display:block; content:''; clear:both;}
.like-cnt{ position: relative; cursor: pointer;  background: #f1f1f1;  height: 35px; border-radius: 35px !important; padding:0 15px; box-sizing:border-box; text-align: center; line-height: 35px; z-index: 10;}
.like-btn{ color: #fff;}
.like-cnt.off .like_1 {display:inline-block; line-height:35px; float:left;}
.like-cnt.on .like_1 {display:none;}
.like-cnt.off .like_2 {display:none;}
.like-cnt.on .like_2 {display:inline-block; line-height:35px; float:left;}
.like-cnt #like_cnt {font-style: inherit; display:inline-block; float:left; line-height:33px; margin-left:8px;}

/*link_url*/
.link_url {width:35px; height:35px; position:relative; margin-left:5px; border-radius:50% !important; background: #f1f1f1; }
.link_url:after {display: block;content: '\e081';position: absolute;top: 0;left: 0;right: 0;font-family: 'axicon';font-size: 16px;color: #666;line-height: 35px;}
.link_url:hover div{display:block;}
.link_url div {display:none; position:absolute; top:35px; left:50%; transform:translateX(-50%); }
.link_url div ul {margin-top:5px; width:143px; overflow:hidden; box-sizing:border-box;background: #fff; padding:13px 15px; border:1px solid #ddd;box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);}
.link_url ul li {width:33px; height:33px; margin:0 2px; float:left;}

#sb-comment {margin-top: 30px !important;}

@media screen and (max-width: 750px) {
	#sb-gallery > li{width: 48%;}
	#sb-gallery > li .infobox{padding: 15px 10px;}
	#sb-gallery > li .infobox .sbj{font-size: 14px;line-height: 18px;}
	#sb-gallery > li .infobox .info > li{margin-right: 10px;font-size: 11px;}
	#sb-gallery > li .infobox .info > li:after{right: -5px;}
}