.wrap{  width: 1280px; margin-left: auto; margin-right: auto;}
.header .wrap { width: auto; }
.p15 {
    padding: 15px;
}
.clearfix:after,.clearfix:before{content:"";display:table}
.clearfix:after{clear:both}
.clearfix{zoom:1}

.caseSwiper .banner {margin-right:420px;}
.caseSwiper .swiper-container {height:310px;background:none;}
.caseSwiper .banner a {background-size:cover;border-radius:3px;overflow:hidden;display:block;width:100%;height:100%;}
.caseSwiper .links {position:absolute;top:0;right:0;width:420px;}
.caseSwiper .links a {width:200px;height:150px;border-radius:3px;float:left;overflow:hidden;margin-left:10px;background:#000;position:relative;}
.caseSwiper .links h3 {position:absolute;left:0;bottom:0;right:0;font-size:14px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));color:#fff;z-index:1;padding:60px 10px 10px;text-shadow:1px 1px 3px rgba(0,0,0,0.3);}
.caseSwiper .links a:nth-child(n+3) {margin-top:10px;}
.caseSwiper .links a img {width:100%;height:100%;object-fit:cover;transition:all ease .3s;}
.caseSwiper .links a:hover img {transform:scale(1.1);opacity:.8;}
.caseSwiper .wrap {padding:0 0 10px 0;position:relative;}
.caseTabs {background:#fff;width:100%;font-size:17px;line-height:24px;text-align:center;border-radius:3px;display:table;font-weight:bold;}
.case {padding-top:10px;}
.caseTabs a {display:table-cell;color:#9494a9;padding:13px 0 15px;border-top:2px solid #fff; }
.caseTabs a:hover,.caseTabs a.active {border-top-color:#FDD000;color:#000;}
.caseTabs img {margin-right:8px;vertical-align:top;}
.caseTabs a:nth-child(n+4){ display:none;}

.caseSubNav{background: #fff; border-radius: 3px; padding: 20px; }
.caseSubNav h3{ color: #9494a9; font-size: 14px; margin: 20px 0 5px; width: 100%;}
.caseSubNav a{ margin-right: 5px; font-size: 12px; margin-top: 5px; display: inline-block; background: #fafafa; padding: 0 5px; line-height: 24px; border-radius: 2px; text-align: center; flex-grow: 1; }
.caseSubNav a:hover,.caseSubNav a.active{ background: #FDD000; color: #000; }
.caseSubNav .tabs{ font-size: 0; display: flex; flex-wrap: wrap;}
.caseSubNav .tabs::after{ content: ""; display: block; flex-grow: 99;}



/*分页样式*/
.pageNav{ text-align: center; padding: 60px 0;}
.pageNav a,.pageNav b{ display: inline-block; line-height: 32px; font-size: 16px; padding: 0 12px; border: 1px solid #e9f1f7;}
.pageNav a b{ line-height: inherit; border: none; padding: 0; background: none;}
.pageNav a:hover{ color: #FDD000; border-color: #FDD000;}
.pageNav b{ background: #FDD000; border-color: #FDD000;}


.caselist{ padding:0 2%;}
.caselist li{ width: 18%; background: #fff; margin-right: 2%; margin-top:2%; float: left; position: relative;    box-shadow: 5px 10px 27px rgba(39,44,49,0.06); overflow: hidden; border-radius: 3px;}
.caselist li .grey{ opacity: 0.6; font-size: 14px;}

.caselist li:nth-child(5n+5){ margin-right:0;}
.caselist li h2,.case-use{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 16px;}
.caselist li>img{
    height: 167px;vertical-align: top;min-height: 167px;object-fit: cover;
}
.case-use span{background: #e9f1f7;vertical-align: middle;cursor:default;border-radius: 100px;font-size: 12px;padding:1px 8px;max-width: 130px;overflow: hidden;display: inline-block;text-overflow: ellipsis;}
.case-use span:hover{ background: #09BB07; color: #fff;}
.casema{ position: absolute; left: 0; top:0; right: 0; bottom: 0; background: #fff; z-index: 1; opacity: 0; transition: all ease 0.3s;}
.casema img{ position: absolute; left: 50%; top: 50%; margin: -75px 0 0 -75px; width: 150px;height: 150px; transition: all ease 0.3s;}
.caselist li:hover .casema{ opacity: 1;}
.case{ background: #f6f6f8;}

@media (max-width:1280px) {
    .caselist{ padding:0 4%;}
    .caselist li{width: 23%;margin-right: 1.5%; margin-top:1.5%; }
    .caselist li:nth-child(4n+4){ margin-right: 0;}
    .caselist li:nth-child(5n+5){ margin-right: 2%;}
}

@media (max-width:960px) {
    .caselist{ padding:0 4%;}
    .caselist li{ width:48%; margin-right:4%; margin-top:4%;}
    .caselist li:nth-child(2n){ margin-right:0;}
    .caselist li:nth-child(5n+5){ margin-right: 2%;}
    .wrap{width: auto;}
}