.bespokePageContainer .nav{position:relative;color: #000000;display: flex;flex-flow: row wrap;justify-content: center;flex: 1 1 auto;padding: 10px 0; margin-bottom:50px}
 .bespokePageContainer .nav-item {position: relative;margin: 0 5px; padding-right: 10px; text-decoration: none;line-height:14px;font-size: 14px;letter-spacing: 0;color: #666666;border-right: 2px solid #666666}
 .bespokePageContainer .nav-item:hover,.bespokePageContainer .nav-item:hover{ text-decoration: underline;}
 .bespokePageContainer .nav-item:before {content: "";position: absolute;bottom: 0;left: 0;width: 0;height: 2px;height: 0px; background:#595959;transition: all 500ms;}
 .bespokePageContainer .nav-item.active {font-weight:700;color:#000000;transition: all 350ms;}
 .bespokePageContainer .nav-item.active:before {width: 100%;}
 .bespokePageContainer .nav-item:last-child{border-right:none}

.filterTExt {font-family: 'Noto Sans TC', sans-serif;font-size: 17px;font-weight: 500;letter-spacing: 0;line-height: 17px;text-align: center;margin-bottom:15px;}

.project-warp{position:relative;float:left;width:100%;margin:0;background-color: #f5f5f7;}
.project-content{width:100%;margin:180px auto 10px;padding: 0 10px}
.projects-item {display: flex;justify-content: start;flex-wrap: wrap;margin:0; font-family: 'Noto Sans TC', sans-serif}
.projects li {width: 25%; margin: 10px 0;padding:0 10px;box-sizing: border-box;position: relative;}
.projects li{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;}
.projects li.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.projects a:hover .projects-pic img {-moz-transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1); opacity: 0.5}
.projects-pic {width: 100%;overflow: hidden;position: relative;background-color: #000;}
.projects-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}
.projects-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}
.projects-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;}
.projects a:hover .projects-content {color: #955f2e;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}
.projects-name {display: none;}
.projects 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;}
.projects li .view .en{width: 100%;float: left; font-size:13px; color: #eeeeee}
.projects li .view .cn{width: 100%; float: left; font-size:22px; margin-bottom: 10px; font-weight: 300}
.projects li:hover .view{-webkit-transform: translateY(-35%);-moz-transform: translateY(-35%);transform: translateY(-35%);z-index: 3;opacity: 1;}

@media screen and (max-width: 1600px) {
.project-content{margin:130px auto 20px;}
.projects li .view .cn{font-size:18px; }
}
@media screen and (max-width: 1200px) {
.project-content{margin:110px auto 10px;}
.projects li {width: 33.333333%}
.projects li .view .cn{font-size:18px; }
.bespokePageContainer .nav{margin-bottom:35px}
}
@media screen and (max-width: 980px) {
.project-content{margin:100px auto 10px;}
.projects li {width:50%}
.projects li .view .cn{font-size:18px; }
}
@media screen and (max-width:550px) {
.bespokePageContainer .nav{margin-bottom:0}
.project-content{width:90%;margin:90px auto 20px;padding: 0}
.project-row{margin:15px auto 0;}
.projects li {width:100%;margin:10px 0;padding:0;}
.projects li .view .cn{font-size:16px; }
 .bespokePageContainer .nav-item {position: relative;margin: 0 4px; padding-right: 6px; line-height:13px;font-size: 13px;line-height: 1.5em}
}