.case_01 ul{ width:100%; float:left; display:block; padding-bottom:60px;}
.case_01 ul li{ width:25%; height:550px; display:block; float:left; background:url(../images/phonebg1.png) top  no-repeat; }
.case_01 ul li a{display:block; width:224px; height:398px; overflow:hidden; margin:63px 0 0 57px; background:#fff; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.case_01 ul li article{position:relative; width:100%; height:398px; padding-top:62.4%; overflow:hidden;}
.case_01 ul li article img{position:absolute; top:0; left:0; width:100%; height:auto; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
.case_01 ul li article summary{width:100%; height:50px; position:absolute; bottom:-50px; left:0; line-height:50px; color:#fff; background:rgba(0,0,0,0.5); background:#666\9;  z-index:3; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; text-align:center;}

.case_01 ul li a:hover{background-color:transparent;}
.case_01 ul li a:hover article summary{bottom:0;}
.case_01 ul li a:hover article img{-webkit-transform:scale(1.1); -moz-transform:scale(1.1); transform:scale(1.1);}
.case_01 ul li a:hover article:before{opacity:1; filter:alpha(opacity=100); zoom:1;}
.case_01 ul li a:hover article:after{opacity:1; filter:alpha(opacity=100); zoom:1; -webkit-transform:scale(1); -moz-transform:scale(1); transform:scale(1);}
@media (max-width: 1367px){	
	.case_01 ul li a{display:block; width:224px; height:398px; overflow:hidden; margin:63px 0 0 32px; background:#fff; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
}
@media (max-width: 1024px) {
	.case_01 ul{
		margin-left: 77px;
	}
}
/* @media (max-width: 768px) */
@media (max-width: 414px) {
	.case_01 ul{
		margin-left: -6px;
	}
}
@media (max-width: 375px) {
	.case_01 ul{
		margin-left: -28px;
	}
}