body{ background-color: #f6f6f6;}
.topper{ background-color: #fff;}
#wrapper{ padding-bottom: 0; }
.block{ display: block;}
.wrap{ width: 100%; box-sizing: border-box; max-width: 1600px; min-width: 1100px; margin:0 auto;}

.filter{ background-color: #fff; border:none; padding-bottom: 20px;}
.filter .items{ font-size: 15px; }
.filter .items .mo{ top: 20px; }
.filter .items dd a{ border-radius: 0; position: relative; }
.filter .items dd span{ display: inline-block;vertical-align: middle;height: 30px;line-height: 30px;margin: 0 0 10px 10px;padding: 0 15px;border-radius: 2px; background: #eee; font-size: 15px; }
.filter .items dd a.current{ background: rgba(202,43,47,0.9); box-shadow:none;border-radius: 2px; line-height: 29px;}
.sorter .sort a.current{ color: #ca2b2f; }
.filter .items dt{ top:20px; }
.filter .items dd{ padding-top: 8px; height: 40px; }
.filter .items dd a:first-child{ top: 18px; }
.filter .items dd a.hot:after{ content: ""; width: 20px; height: 16px; display: block; position: absolute; top:-7px; right: 0; background: url(../images/hot.png) no-repeat center/100%; }
.sorter .sort{ background-color: #fff;}

.search-li{ height: 40px; background-color: #fff; border-radius: 20px; font-size: 0; overflow: hidden;}
.search-li .key{ border:none; padding:10px 20px; width: 250px; }
/* .search-li .key:focus{ width: 360px;} */
.search-li .submit{ background: none; border:none;margin-right: 20px; cursor: pointer;}
.search-li .submit .iconfont{ font-size: 20px;}

.case-lister .case-list{ flex-wrap: wrap; margin:0; }
.case-lister .case-item{ width: 32%; margin: 0 2% 30px 0; position: relative; border-radius: 20px; overflow: hidden; transition: all 0.3s linear;}
.case-lister .case-item:nth-child(3n){ margin-right: 0;}
.case-lister .case-item:hover{ box-shadow: 0 10px 10px rgba(0,0,0,0.1); transform: scale(1.005); transform: translate(-1px, -1px);}
.case-lister .case-cell{ margin:0; }
.case-cell .cover .img{ padding: 0 0 70%;}
.case-cell .exp{ text-align:left; padding: 20px 0 25px 0;}
.case-cell .exp h3 { font-size:18px; color: #333; padding: 0 20px}
.case-cell .exp .eye{  color: #666; font-size: 14px; background: url(../images/eye.png) no-repeat left center/16px; padding-left: 20px; margin-left: 20px;}
.case-cell .exp .info{ color: #999; margin-top: 7px; padding:0 20px}

.case-cell .exp .designer{position: absolute; top:-80px; right: 10px; font-size: 16px; color: #333333; margin-top: 10px; padding: 10px 20px 0 20px; text-align: right; }
.case-cell .exp .designer .img-div{ width: 100px; height: 100px; border-radius: 50%; overflow: hidden; display: inline-block; border:2px solid #eee; box-shadow: 0 5px 5px rgba(0,0,0,0.08); }
.case-cell .exp .designer .img-div img{ width: 120%; height: auto; margin-left:-10%; margin-top:-10%;}
.case-cell .exp .designer .more{ color: #ca2b2f; font-size: 14px; float: right;}
.case-cell .exp .designer .right{ display: inline-block; vertical-align: top; padding-top: 13px; width: 75%;}
.case-cell .cover{ overflow: hidden;}
.case-cell .cover .zan{ display: block; font-size: 14px; line-height: 30px; padding:6px 20px; background:rgba(0, 0, 0, 0.7);}
.case-cell .cover .zan.active{ color: #fff; background: #ca2b2f; }
.case-cell .cover .img img{ transition:all .5s linear; }
.case-cell .cover .more{ position: absolute; bottom: 10px; left: 50%; margin-left: -75px; background:#757579; width: 150px; line-height: 40px; border-radius: 20px; color: #fff; opacity: 0;}
.case-cell .cover:hover .more{ bottom: 50px; opacity: 1; box-shadow: 0 5px 5px rgba(0,0,0,0.08);}
.random .cell .img{ padding: 0 0 65%; }
.random .cell .img img{ width: 110%; margin-left: -5%; object-fit: cover; }

.award-list{ margin: 30px auto; }
.award-list li{ position: relative; height: 507px; margin-bottom: 30px;}
.award-list li .img{position: absolute; left: 0; top:0; width: 80%; height: 100%; object-fit: cover; }
.award-list li .info{ position: absolute; width: 360px; right: 30px;  background: rgba(255,255,255,1); box-shadow: 0 5px 10px #555; top:50px; padding: 30px; text-align: center;}
.award-list li .info h4.top{ color: #000; font-size: 20px; font-weight:600; }
.award-list li .info h4{ font-size: 18px; font-weight: 500; text-align: center; margin-bottom: 20px;}
.award-list li .info .head .head-img{ width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin:20px auto; }
.award-list li .info .head .head-img img{ width: 100%; }
.award-list li .info .head .right p{ margin-bottom: 5px; line-height:1.4;}
.award-list li .info .btn{ display: block;  font-size: 16px; border:1px solid #000; color: #000; width: 140px; line-height: 37px; text-align: center; margin: 20px auto;} 
.award-list li .award{ position: absolute; left: 50px; top:-5px; width: 60px; height: 58px; background: url(../images/home-award.png) no-repeat center/100%; }
.award-list li:nth-child(2n) .img{position: absolute; left: auto; right: 0; top:0; width: 80%; height: 100%; object-fit: cover; }
.award-list li:nth-child(2n) .info{ left: 30px; right: auto; }
.award-list li:nth-child(2n) .award{ left: auto; right: 50px; }