.wrapper{width:100%; float:left;}
.base-content{width:94%; margin: 180px auto 20px;}
.works{width:100%; margin: 0;float: left;}
.works-list {display: flex;justify-content: start;flex-wrap: wrap;padding:0;}
.works li {width:22%;margin:0 1.5% 70px; box-sizing: border-box;}
.works a:hover .works-pic img{-moz-transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1); opacity: 0.8;}
.works-pic{width: 100%;float: left; margin-bottom:5px;overflow: hidden;}
.works-pic{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;background-color: #000;}
.works-pic.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.works-pic img {max-width: 100%;height: auto;-o-transition: all 1s;-webkit-transition: all 1s;transition: all 1s; margin:0; padding:0;display:block;}
.info{width:100%;float: left;padding: 0 5px;}
.info-title{width:100%;float: left;text-align: left}
.info-title h2{font-size: 15px;text-align: left}
.caseall{float:none;width:96%;margin:0 2% 30px; display:block;position:relative;}
.caseall ul { margin:0; padding:0; list-style:none;} 
.caseall li {margin:0 15px; padding:0;display: inline;text-align:center; line-height:2em;} 
.caseall a {font-size:16px;color:#171717;text-decoration: underline;text-decoration-color: transparent;-webkit-text-decoration-color: transparent;-moz-text-decoration-color: transparent;text-underline-offset:5px;text-decoration-thickness: 1px;}
.caseall a:hover {color: #7c784e;text-decoration: none;text-decoration: underline;text-underline-offset:5px;text-decoration-thickness: 1px;transition: .8s;-moz-transition: .8s;-webkit-transition: .8s;-o-transition: .8s;}
.inpage a {color: #7c784e; font-weight:500;text-decoration: underline;text-underline-offset:5px;text-decoration-thickness: 1px}
.inpage a:hover {color: #7c784e;text-decoration: underline;text-decoration-color: transparent;-webkit-text-decoration-color: transparent;-moz-text-decoration-color: transparent;text-underline-offset:5px;text-decoration-thickness: 1px;} 

@media screen and (max-width: 1600px) {
.base-content{width:94%;margin: 160px auto 10px; }
}
@media screen and (max-width: 1200px) {
.base-content{width:94%;margin: 135px auto 10px;}
.caseall{width:100%;}
.works li{width:22%;margin:0 1.5% 40px;}
}
@media screen and (max-width: 980px) {
.base-content{width:94%;margin:100px auto 10px;}
.works li{width:46%;margin:0 2% 40px;}
.caseall{margin:0 0 15px}
}
@media screen and (max-width: 767px) {
.base-content{width:90%;margin:85px auto 5px;}
.works li {width:100%;margin:0 0 30px;}
.works-list {width:100%;margin: 0; }
.caseall{width:100%;margin:0 0 15px}
.caseall li {margin:0 8px} 
}