.dc_wrap, .dc_wrap *{ box-sizing:border-box; }
.dc_wrap > .dc_chk{ margin-bottom:20px; text-align:right; }

.dc_list > ul{ display:flex; flex-flow:row wrap; margin:0 -15px; }
.dc_list > ul > li{ position:relative; z-index:1; padding:0 15px 60px; }
.dc_list > ul > li > input[type=checkbox]{ position:absolute; z-index:50; top:5px; left:20px; margin:0; }

.dc_tmb{ display:block; margin-bottom:20px; opacity:0; transform:translate(0, 60px); box-shadow:0 0 0 0 rgba(0,0,0,.3); transition:0.8s opacity 0s, 0.8s transform 0s, 0.4s box-shadow; }
.dc_tmb:hover{ box-shadow:7px 7px 12px 0 rgba(0,0,0,.2); }
.dc_tmb > div{ position:relative; z-index:1; width:100%; padding-top:50%; background-color:#ddd; }
.dc_tmb > div > span{ position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); font-size:14px; font-weight:400; color:#333; text-shadow:-1px -1px 1px #fff; }
.dc_tmb > img{ display:block; width:100%; height:auto; }

.dc_txt{ word-break:keep-all; }
.dc_txt h3{ font-family:'pt'; font-size:32px; font-weight:500; line-height:1.1em; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translate(0, 60px); transition:0.8s opacity 0.2s, 0.8s transform 0.2s; }
.dc_txt p.summary{ font-size:16px; font-weight:300; color:#444; line-height:1.5em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; opacity:0; transform:translate(0, 60px); transition:0.8s opacity 0.3s, 0.8s transform 0.3s; }

.ani.act .dc_tmb{ opacity:1; transform:translate(0, 0); }
.ani.act .dc_txt h3{ opacity:1; transform:translate(0, 0); }
.ani.act .dc_txt h2{ opacity:1; transform:translate(0, 0); }
.ani.act .dc_txt p.summary{ opacity:1; transform:translate(0, 0); }

@media(max-width:850px){
	.dc_list > ul > li{ width:100% !important; }
}
@media(max-width:500px){
	.dc_txt h3{ font-size:24px; }
	.dc_txt h2{ font-size:18px; }
	.dc_txt p.art_summary{ font-size:14px; }
}