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

	SUPERBOARD :: BOARD SKIN :: certificate

**************************************************/
#sb-certific{margin: -1%; padding: 50px 0 0 0;}
#sb-certific > li{position: relative;display: inline-block;*display: inline;*zoom: 1;vertical-align: top;margin: 1% 1% 3% 1%;width: 23%;}
#sb-certific > li .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%; box-sizing: border-box;}
#sb-certific > li .tmb{padding-bottom: 100%;text-align: center;background-position: center center;background-size: cover; border-radius: 20px; border: 1px solid #eee; transition: 0.5s;}
#sb-certific > li .infobox{border-width: 0 1px 1px 1px;padding: 30px 0;}
#sb-certific > li .infobox .sbj{
    font-size: 17px;
    text-align: center;
    color: #333333;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word; text-align: left; font-weight: 300; line-height: 1.5
}
#sb-certific > li .infobox .top {display: flex; align-items: center; justify-content: space-between}
#sb-certific > li .infobox .top .view {font-size: 12px; color: #777;}
#sb-certific > li .infobox .top .date {display: inline-block; padding: 4px 6px; font-size:13px; color: #333; background-color: #efefef; border-radius: 4px; margin: 0 0 10px 0;}

@media(hover: hover) and (pointer: fine) {
    #sb-certific > li:hover .tmb {box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; border: 1px solid #c9c9c9}
}


@media screen and (max-width: 750px) {
	#sb-certific > li{width: 48%;}
	#sb-certific > li .infobox{padding: 15px 5px;}
	#sb-certific > li .infobox .sbj{font-size: 12px;}
    #sb-certific > li .infobox .top .date {font-size: 10px;}
}