.gallery-wrapper{margin-right:-20px;}
.gallery-wrapper:after{clear: both;content: "."; }
.gallery-wrapper .gallery{width: 21%; margin:  2% 2% 2% 2%; height: auto;   display: block; float: left; border-radius: 3px;  transition: all .3s linear 0s }
.gallery-wrapper .gallery .inner{position: relative;width: 100%; padding-bottom:100%; overflow: hidden; display: block; background-color: #eee; background: linear-gradient(to bottom, #ccc 0%,#ffffff 100%);}
.gallery-wrapper .gallery .hover-wrapper{display: none;}
.gallery-wrapper .gallery:hover{  transition: all .3s linear 0s}
.gallery-wrapper .gallery:hover .hover-wrapper{display: block;position: absolute; margin: auto; top: 0;bottom:0;left: 0;right: 0; opacity: 0.9; background-color: #000; z-index: 50;overflow: hidden;padding: 0 10% 10% 10%;}
.gallery-wrapper .gallery:hover .hover-wrapper .line{height: 30px; border-left:2px solid #009AE3}
.gallery-wrapper .gallery:hover .hover-wrapper .content{color: #888}
.gallery-wrapper .gallery .title-model{padding: 4% 0; width: 100%; color: #333;  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px; font-weight: 200}
.gallery-wrapper .gallery .title-name{padding: 4% 0; width: 100%; color: #666; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; border-top:1px solid #009AE3;font-weight:  200 }

.gallery-wrapper .gallery img{position:absolute;top:5%;bottom: 5%;left:10%; right:10%;height: 80%; margin: auto;border:0;}
@media screen and (max-width: 900px) { /*当屏幕尺寸小于500px时，应用下面的CSS样式*/
.gallery-wrapper{padding: 0.2%;margin-right:0px;}
.gallery-wrapper .gallery{ background-color: #fff; width: 48%; margin:  1% ; height: auto; }
        
}