#list_before_after{ }
#list_before_after:after {display:block;visibility:hidden;clear:both;content:""}
#list_before_after  ul{padding:0; margin:0; list-style:none;zoom:1; margin:0 -.5%; }
#list_before_after  ul:after {display:block;visibility:hidden;clear:both;content:""}
#list_before_after  ul li{position:relative; float:left; width:49%; margin:.5%;padding:0px; border:1px solid #DDD; text-align:center;  box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box; z-index:1; }
#list_before_after  ul li:nth-child(2n+1){ clear:both; }

#list_before_after  ul .imgcontent {position:relative;}
#list_before_after  ul .imgcontent:before{position:absolute; top:50%; left:50%; width:30px; height:30px; margin-top:-15px; margin-left:-15px; line-height:30px;  background:rgba(0,0,0,.6); border-radius:50%; content:"\f105"; font-size:1.5em; color:#FFF; font-family:'fontawesome'; z-index:2;}

.need_login{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.7);display: -webkit-flex;  display: flex;flex-direction:column; justify-content:center;   color:#FFF;}
 .need_login strong{color:#1effff}

#list_before_after  ul .imgcontent:after {display:block;visibility:hidden;clear:both;content:""}
#list_before_after  ul li span{width:50%;  position:relative; float:left; height:0; padding-top:40%; background-size:cover;}
#list_before_after  ul li p{position:absolute; left:0; bottom:0; right:0; background:rgba(0,0,0,.5); color:#FFF; padding:6px; z-index:2;}

#list_before_after  ul li img{width:100%;}
#list_before_after  ul li .ck_style{position:absolute; top:0px; right:0px; z-index:10;}
#list_before_after  ul li h6 {position:relative; margin:10px; overflow: hidden;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;word-break: break-all;}
span.no_image{display:Block; background:#F6F6F6 url(/img/logo.png) center center no-repeat; background-size:80%; text-align:center; font-size:1.5em; color:#999;}



@media (min-width:425px) and (max-width:767px){
#list_before_after  ul{margin:0 -.5%; }
#list_before_after  ul li{width:99%; margin:.5%;}

}
@media (max-width:424px){
#list_before_after  ul{margin:0 -.5%; }
#list_before_after  ul li{width:99%; margin:.5%;}


}