.PhotoList_i1 { padding:0;} .PhotoList_i1 li{ width:22%; margin-right:3%; margin-bottom:15px; float:left; transition:all 0.5s ease 0s; height:300px; color:#FFFFFF; } .PhotoList_i1 li span{ font-size:14px; line-height:48px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; color:#FFFFFF; transition:all 0.5s ease 0s;} .PhotoList_i1 li a{position:relative;display:block;text-align: center;overflow: hidden; background:#f1f1f1;/* border:solid #e0e0e0 1px;*/ height:250px; transition:all 0.5s ease 0s;} .PhotoList_i1 li a:after{ content:''; display:block; width:100%; height:0;background:#CD945A; transition:all 0.5s ease 0s; position:absolute ; top:0; left:0;} .PhotoList_i1 li a img{transform: scale(1);transition: all 1s ease 0s;-webkit-transform: scale(1);-webkit-transform: all 1s ease 0s; height:100%; max-width:100%; vertical-align: middle; display: inline-block;} .PhotoList_i1 li a h4{position: absolute;z-index:10;display:block;transition: 0.6s;color:#fff; top:0%; left:0; width:90%; padding:0 5%; text-align:center; line-height:40px; font-size:22px; opacity:0; font-family:"微软雅黑";overflow:hidden;text-overflow:ellipsis;white-space:nowrap; display:none;} @media (min-width:721px){ .PhotoList_i1 li a:hover img{transform: scale(1.3);transition: all 1s ease 0s;-webkit-transform: scale(1.3);-webkit-transform: all 1s ease 0s;} .PhotoList_i1 li a:hover h4{ opacity:1; top:30%;transition: 0.6s;} .PhotoList_i1 li:hover a:after{ height:6px;} .PhotoList_i1 li:hover span{ color:#cd945a; } } @media only screen and (max-width: 1200px){ /*.PhotoList_i1 li{ width:31%; margin-right:2%; margin-bottom:30px; float:left; }*/ .PhotoList_i1 li{ height:25vw; } .PhotoList_i1 li a{ height:20.8vw;} .content_r_box{ height:718px;} } @media only screen and (max-width: 720px){ .PhotoList_i1{ padding:0 2.6%; min-height:618px;} .PhotoList_i1 li{ width:49%; margin-right:0; height:auto;} .PhotoList_i1 li a{ height:53.5vw;} .PhotoList_i1 li:nth-of-type(2n){ margin-left:2%;} .content_r_box{ height: auto;} }