@charset "utf-8";
/* CSS Document */

.case{ width:100%; margin:auto; overflow:hidden; position:relative; margin-bottom:20px;}
.case-list{ width:100%; margin:auto; margin-top:45px;}
.case-list ul{}
.case-list ul li{ float:left; width:22%; margin-bottom:50px; margin-left:2.4%; position:relative; overflow:hidden;}
.case-list ul li a{ display:block; }
.case-list ul li img{ width:100%;}
/* .case-list ul li .case-ycc{ z-index:-1;  transition:all 1.5s; opacity:0; width:100%; height:100%; position:absolute; top:0; left:0; background:url(../images/bk4-5.png); text-align:center;} */
.case-list ul li .case-ycc{z-index:9; transition:all 1.5s; opacity:1; width:100%; height:100%; position:absolute; top:0; left:0;     background: rgba(0,0,0,0.5); text-align:center;}
.case-list ul li .bk1{ z-index:999; transition:all 0.5s; position:absolute; width:0; top:4%; left:3%; border-top:solid 1px #fff;}
.case-list ul li .bk1{ transition:all 0.5s; width:94%;}
.case-list ul li .bk2{ z-index:999; transition:all 0.5s; position:absolute; height:0; top:4%; left:3%; border-left:solid 1px #fff;}
.case-list ul li .bk2{ transition:all 0.5s; height:92%;}
.case-list ul li .bk3{ z-index:999; transition:all0.5s; position:absolute;  height:0; bottom:4%; right:3%; border-right:solid 1px #fff;}
.case-list ul li .bk3{ transition:all 0.5s; height:92%;}
.case-list ul li .bk4{ z-index:999; transition:all 0.5s; position:absolute; width:0; bottom:4%; right:3%; border-bottom:solid 1px #fff; }
.case-list ul li .bk4{ transition:all 0.5s; width:94%;}
.case-ycc span{ display:block; padding:0 10%; color:#FFF; font-size:23px; margin-top:20%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.case-ycc p{ color:#FFF; font-size:16px; padding:0 10%; margin-top:3%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }


@media screen and (min-width:800px) and (max-width:899px) {

.case-list{ margin-top:2%;}	
.case-list ul li{ width:30%; margin-left:2.4%; margin-bottom:2%;}
.case-ycc span{ font-size:16px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; margin-top:15%; }
.case-ycc p{ font-size:12px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }	

}

@media screen and (min-width:750px) and (max-width:799px) {

.case-list{ margin-top:2%;}	
.case-list ul li{ width:30%; margin-left:2.4%; margin-bottom:2%;}
.case-ycc span{ font-size:16px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; margin-top:15%; }
.case-ycc p{ font-size:12px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }	

}

@media screen and (min-width:720px) and (max-width:749px) {

.case-list{ margin-top:2%;}	
.case-list ul li{ width:30%; margin-left:2.4%; margin-bottom:2%;}
.case-ycc span{ font-size:16px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; margin-top:15%; }
.case-ycc p{ font-size:12px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }	

}

@media screen and (min-width:640px) and (max-width:719px) {

.case-list{ margin-top:2%;}	
.case-list ul li{ width:30%; margin-left:2.3%; margin-bottom:2%;}
.case-ycc span{ font-size:16px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; margin-top:15%; }
.case-ycc p{ font-size:12px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }	

}

@media screen and (min-width:415px) and (max-width:639px) {

.case-list{ margin-top:2%;}	
.case-list ul li{ width:48%; margin-left:1.4%; margin-bottom:2%;}
.case-ycc span{ font-size:16px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; margin-top:15%; }
.case-ycc p{ font-size:12px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }	

}

@media screen and (min-width:376px) and (max-width:414px) {
	
.case-list{ margin-top:2%;}	
.case-list ul li{ width:48%; margin-left:1.4%; margin-bottom:2%;}
.case-ycc span{ font-size:16px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; margin-top:15%; }
.case-ycc p{ font-size:12px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }	


}

@media screen and (min-width:320px) and (max-width:375px) {
	
.case-list{ margin-top:2%;}	
.case-list ul li{ width:48%; margin-left:1.4%; margin-bottom:2%;}
.case-ycc span{ font-size:16px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; margin-top:15%; }
.case-ycc p{ font-size:12px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
	
	

}