#list_before_after{margin-top: 4em; }
#list_before_after  ul{padding:0; margin:0; list-style:none;zoom:1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em;}
#list_before_after  ul li{position:relative; }


#list_before_after  ul .imgcontent {position:relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em;}

.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; backdrop-filter: blur(6px); text-align: center;}
.need_login strong{color:var(--color-main)}
#list_before_after  ul li .baimg{position:relative;  border-radius: 2em; overflow: hidden; }
#list_before_after  ul li .baimg figure{position:relative; height: 200px;}
#list_before_after  ul li .baimg figure img{width: 100%; height: 100%; object-fit: cover;}
#list_before_after  ul li p{position:relative; background:#737373; color:#FFF; font-size: 2.4rem; padding:.3em; font-weight: 700; text-align: center;}
#list_before_after  ul li .baimg:last-child p{background-color: var(--primary); }

#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;  display: none;}
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{ grid-template-columns: repeat(1, 1fr); gap: 1em;}
#list_before_after  ul li .baimg{ border-radius: 1em; }


}