.project-list {display: flex;justify-content: start;flex-wrap: wrap;padding:0;margin:10px; }
.project li{width: 25%;padding: 10px;box-sizing: border-box;position: relative}
.project li{opacity: 0;-moz-transform: translateY(20px);-ms-transform: translateY(20px);-webkit-transform: translateY(20px);transform: translateY(20px);-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;}
.project li.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.project a:hover .project-pic img {-moz-transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1); opacity: 0.5;}
.project-pic{width: 100%;overflow: hidden;position: relative;background-color: #000000}
.project-pic img{width: 100%;-moz-transition: all 1s;-o-transition: all 1s;-webkit-transition: all 1s;transition: all 1s; margin:0; padding:0;display:block}
.project-content{text-align: left;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; margin-bottom: 10px; padding: 0 6px 2px}
.project-content i{margin:0 0 0 3px;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; font-size:16px;}
.project a:hover .project-content {color: #955f2e;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}
.project-name{display: none;}
.project li .view{opacity: 0;color: #000;width: 80%;text-align: center; box-sizing: border-box;position: absolute;left: 10%; top:50%; overflow: hidden;
    -webkit-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);-o-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1); font-weight: 400; color: #fff; padding: 0;z-index: 8;}
.project li .view .en{width: 100%;float: left; font-size:13px; color: #c6c6c6; margin-bottom: 10px;}
.project li .view .cn{width: 100%; float: left; font-size: 18px;}
.project li:hover .view{-webkit-transform: translateY(-35%);-moz-transform: translateY(-35%);transform: translateY(-35%);z-index: 3;opacity: 1;}
.caseall{width:100%;margin:0 0 50px;text-align: center}
.caseall ul{ margin:0; padding:0; list-style:none;} 
.caseall li{margin:0 6px; padding:0;display: inline;text-align:center; line-height:2em;color:#000} 
.caseall a{font-size:16px;text-decoration:none;padding:4px 16px;background-color:transparent;border-radius:15px;}
.caseall a:hover{text-decoration: none;background-color: #cccccc;transition: 0.3s;border-radius:15px;}
.inpage a{text-decoration:none;background-color: #cccccc;border-radius:15px;}
.inpage a:hover {text-decoration: none} 
.wrapper{width:100%; float:none; }
.base-content{width:100%; margin: 70px auto 80px}

@media screen and (max-width: 1600px) {
.base-content{margin: 60px auto 70px}
.caseall{margin:0 0 40px}
}
@media screen and (max-width: 1200px) {
.base-content{ margin:50px auto 25px}
.caseall{margin:0 0 30px}
.project li{width:33.333333%;padding: 10px;margin-bottom: 10px}
.project li .view{display:none;}	
.project-name {font-size: 18px;font-family: 'Noto Sans TC', sans-serif;font-weight: 400;margin-top: 10px;display:block;}
}
@media screen and (max-width: 980px) {
.base-content{margin:40px auto 20px}
.project li{width: 50%;margin-bottom:8px}
.caseall{margin:0 0 25px}
}
@media screen and (max-width: 767px) {
.base-content{width:90%;margin: 40px auto 20px;}
.project li {width: 100%;margin: auto;padding:0 0 24px;}
}
@media screen and (max-width: 550px) {
.base-content{margin:30px auto 10px;}
.project-list { width:100%;margin: 0; }
.caseall{margin:0 0 25px}
.caseall li {margin:0 2px; } 
.caseall a {padding:4px 8px}
}