.filter-box { margin-bottom: 25px; margin-top: 40px; background-color: #f6f8fb; }
.filter-box .filter-conditons { padding: 0 15px; }
.filter-box .filter-conditons .filter-v { font-size: 12px; padding: 2px 6px 2px 10px; color: #f8a200; border: 1px solid #f8a200; cursor: pointer; margin: 0 5px; }
.filter-box .filter-conditons .filter-v i { font-family: simsun; font-style: normal; }
.filter-box .filter-conditons .filter-v:hover { background-color: #f8a200; color: #fff; }
.filter-box .filter-item { line-height: 48px; }
.filter-box .filter-item:not(:last-child) { border-bottom: 1px dashed #dee0e2; }
.filter-box .filter-item .label-name { width: 70px; text-align: right; color: #666666; }
.filter-box .filter-item .item-con { padding: 0 10px; flex: 1; max-width: 1220px; }
.filter-box .filter-item .item-con a { display: block; padding: 0 8px; line-height: 24px; color: #333333; position: relative; }
.filter-box .filter-item .item-con a.on { background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); color: #FFFFFF; }
.filter-box .filter-item .item-con a:not(.on):hover { color: #de3833; }
.filter-box .filter-item .item-con.color-box a { padding: 0; }
.filter-box .filter-item .item-con.color-box a span { display: block; height: 16px; width: 82px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.filter-box .filter-item .item-con.color-box a .icon { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.filter-box .filter-item .item-con.color-box a .icon path { fill: #FFFFFF; }
.filter-box .filter-item .item-con.color-box a:hover span { -webkit-transform: scaleY(1.25); -moz-transform: scaleY(1.25); -ms-transform: scaleY(1.25); -o-transform: scaleY(1.25); transform: scaleY(1.25); }

.case-lists { margin-top: 40px; }
.case-lists .cases-item { width: 410px; height: 400px; float: left; margin-left: 35px; margin-bottom: 30px; }
.case-lists .cases-item:nth-child(3n+1) { margin-left: 0; }
.case-lists .cases-item .item-wrap .item-img { width: 100%; height: 275px; }
.case-lists .cases-item .item-wrap .item-caption { border: 1px solid #f5f5f5; padding-left: 25px; padding-right: 25px; padding-top: 14px; }
.case-lists .cases-item .item-wrap .item-caption .item-name { color: #333333; font-size: 16px; line-height: 28px; }
.case-lists .cases-item .item-wrap .item-caption .item-brief { line-height: 20px; font-size: 12px; color: #999999; }
.case-lists .cases-item .item-wrap .item-caption .item-tool { border-top: 1px solid #ededed; padding-top: 8px; padding-bottom: 9px; line-height: 24px; width: 340px; margin-top: 20px; }
.case-lists .cases-item .item-wrap .item-caption .item-tool a { color: #999999; font-size: 12px; }

.casebanner { position: relative; height: 835px; }
.casebanner > img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }
.casebanner .sbanner-wrap { height: 100%; position: relative; z-index: 2; color: #fff; }
.casebanner .sbanner-wrap .banner-name { font-size: 48px; line-height: 70px; }
.casebanner .sbanner-wrap .banner-name::after { content: ''; display: block; width: 40px; height: 4px; margin-top: 14px; background-color: #FFFFFF; display: block; }
.casebanner .sbanner-wrap .banner-brief { display: block; line-height: 36px; font-size: 18px; margin-top: 44px; }
.casebanner .sbanner-wrap .banner-link { width: 43px; height: 43px; color: #fff; position: relative; border-radius: 50%; cursor: pointer; margin-top: 95px; border: 1px solid rgba(255, 255, 255, 0.4); transition: transform 0.3s ease 0.6s, opacity 0.3s ease 0.6s, background 0.3s ease 0s, border 0.3s ease 0s; }
.casebanner .sbanner-wrap .banner-link::before { content: ''; display: block; width: 0; height: 0; left: 50%; top: 50%; transition: all 0.3s ease 0s; position: absolute; border-radius: 50%; overflow: hidden; z-index: 1; }
.casebanner .sbanner-wrap .banner-link svg { position: absolute; z-index: 2; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 26px; height: 26px; }
.casebanner .sbanner-wrap .banner-link svg path { fill: #fff; }
.casebanner .sbanner-wrap .banner-link:hover { background-color: #fff; border: 1px solid #fff; }
.casebanner .sbanner-wrap .banner-link:hover::before { width: 100%; height: 100%; top: 0; left: 0; background-color: #fff; }
.casebanner .sbanner-wrap .banner-link:hover svg path { fill: #333; }

.cases-detail { background-color: #f0f3f7; padding: 40px; }
.cases-detail .detail-wrap .detail-top { height: 440px; }
.cases-detail .detail-wrap .detail-top .top-left { background-color: #FFFFFF; padding: 60px 10% 60px 60px; width: 800px; }
.cases-detail .detail-wrap .detail-top .top-right { width: 500px; padding: 60px; background-color: #f7f9fb; }
.cases-detail .detail-wrap .detail-top .top-right h3 { font-size: 40px; line-height: 50px; color: #333; font-weight: bold; font-family: "Base-font"; text-transform: capitalize; }
.cases-detail .detail-wrap .detail-top h3 { font-size: 26px; line-height: 46px; color: #333; margin-left: -1px; }
.cases-detail .detail-wrap .detail-top h3::after { content: ''; display: block; width: 10px; height: 2px; background-color: #9a9a9a; margin-top: 10px; }
.cases-detail .detail-wrap .detail-top .params { width: 80%; margin-top: 38px; }
.cases-detail .detail-wrap .detail-top .params p { padding-left: 20px; line-height: 30px; font-size: 14px; color: #777777; position: relative; }
.cases-detail .detail-wrap .detail-top .params p::before { content: ''; display: block; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: CurrentColor; left: 5px; top: 0; bottom: 0; margin: auto; }
.cases-detail .detail-wrap .detail-top .title { display: block; margin-top: 18px; line-height: 36px; color: #444; font-size: 16px; }
.cases-detail .detail-wrap .detail-top .content { display: block; line-height: 24px; font-size: 13px; margin-top: 10px; color: #777; }
.cases-detail .detail-wrap .detail-top a.link { display: inline-block; width: 110px; height: 34px; border: 1px solid #d0d0d0; line-height: 34px; font-size: 14px; border-radius: 20px; margin-top: 50px; transition: all 0.3s ease 0s; color: #000; text-align: center; }
.cases-detail .detail-wrap .detail-top a.link:hover { background-color: #333; color: #fff; border: 1px solid #333; }
.cases-detail .detail-wrap .detail-content { margin-top: 35px; padding: 70px; background-color: #FFFFFF; line-height: 2; }
.cases-detail .detail-wrap .detail-content img { max-width: 100%; vertical-align: bottom; }