*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#photoContents{border-bottom: 1px solid #ddd;}

#content .table {margin:0;}
#content .table .wrap {margin:0 auto; padding:0; list-style:none; position:relative;}
#content .table .wrap:after {content:''; display:block; clear:both;}
#content .table .item {overflow:hidden; float:left; margin:20px; /* 이미지 간격 */}
#content .table .item:hover {}
#content .table .item a {display:block; position:relative; text-decoration:none; color:#ffffff;}
#content .table .item > span {display:block; margin:0; padding:0;}
#content .table .item .thumbnail {display:block;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;}
#content .table .item .thumbnail img {display:block; width:100%; border:none;}
#content .table .item .subject {display:block; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;color: #444;padding-top: 15px;padding-bottom: 10px;}
#content .table .item .body {
position:absolute; bottom:-50px; left:0; width:100%; height:100%; padding:45% 20px; background:rgba(0, 0, 0, 0.7); text-align:center; opacity:0;
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    transition:all .3s ease; -o-transition:all .3s ease; -ms-transition:all .3s ease; -moz-transition:all .3s ease; -webkit-transition:all .3s ease;
}
#content .table .item a:hover .body {bottom:0; opacity:1;}

@media \0screen{
    #content .table .item .body {background:#000000;}
}

#content .table .item .body .hSubject {display:block; font-size:17px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#content .table .item .body .hDate {display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;padding-top:10px}
#content .table .empty {background:#fafafa; font-size:13px; color:#666; line-height:200px; text-align:center;}


@media only screen and (max-width: 1100px) {
    #content .table .item .body {
        padding:39% 20px;
    }
}

@media only screen and (max-width: 767px) {
    #content .table .item .body {
        padding:36% 20px;
    }
}

@media only screen and (max-width: 480px) {
    #content .table .item .body {
        padding:40% 20px;
    }
}