#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:2em; height:2em; margin-top:-1em; margin-left:-1em; line-height:2em;  background:rgba(0,0,0,.6); border-radius:50%; content:"\f105"; font-size:1.5em; color:#FFF; font-family:'fontawesome'; z-index:2;}

#list_before_after  ul .need_login{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.9);display: -webkit-flex;  display: flex;flex-direction:column; justify-content:center;   color:#FFF;}
 #list_before_after  ul .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 (max-width:750px){

#list_before_after  ul li p{position:absolute; left:0; bottom:0; right:0; background:rgba(0,0,0,.5); color:#FFF; padding:0; z-index:2; font-size:.8em; display:none;}

#list_before_after  ul .imgcontent:before{  font-size:1em;  }
#list_before_after  ul .need_login{font-size:.8em; line-height:120%;}
#list_before_after  ul li h6 {position:relative; margin:3px; }
 #list_before_after  ul .need_login strong{display:block;}

}