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

	SUPERBOARD :: BOARD SKIN :: gallery

**************************************************/
#sb-gallery{margin: -12px;}
#sb-gallery > li{position: relative;display: inline-block;*display: inline;*zoom: 1;vertical-align: top; width: calc(25% - 24px); margin: 12px;}
#sb-gallery > li:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 0 0 / 30%);}
#sb-gallery > li .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 1px solid rgba(0,0,0,0);box-sizing: border-box; z-index: 5;}
#sb-gallery > li .tmb{padding-bottom: 110%;border: 1px solid #dddddd;text-align: center;background-position: center center;background-size: cover;}
#sb-gallery > li .infobox {position: absolute; bottom: 30px; padding: 0 30px; box-sizing: border-box; z-index: 4;}
#sb-gallery > li .infobox > * {color: #fff;}
#sb-gallery > li .infobox em {font-family: worksans; font-weight: 600; font-size: 13px; line-height: 16px; color: #fff; text-decoration: underline; font-style: normal;}
#sb-gallery > li .infobox .sbj{display: block;height: 52px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 300; font-size: 19px; line-height: 26px; color: #fff; letter-spacing: -1px; text-overflow: ellipsis; word-wrap: break-word; overflow: hidden; margin: 15px 0;}
#sb-gallery > li .infobox .txt {height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 300; font-size: 13px; line-height: 20px; color: #dddddd; letter-spacing: -1px; text-overflow: ellipsis; word-wrap: break-word; overflow: hidden;}
#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;}

@media screen and (max-width: 750px) {
    #sb-wrap {padding: 0 30px; box-sizing: border-box}
    #sb-gallery {margin: -15px}
	#sb-gallery > li{width: calc(50% - 30px); margin: 15px}
    #sb-gallery > li .infobox em {font-size: 18px; line-height: 20px}
    #sb-gallery > li .infobox .sbj {font-size: 22px; line-height: 30px; height: 60px}
    #sb-gallery > li .infobox .txt {font-weight: 400; font-size: 18px; line-height: 26px; height: 52px}
}