.caseList-banner{ height: 400px; background-color: #dee3f8;}
.caseList-container .caseList-body{}
.caseList-container .caseList-body .tabs{ margin-top: 50px; padding: 0 21px;}
.caseList-container .caseList-body .item{ float: left; width: 172px; padding: 8px 0; margin-right: 25px; background-color: #f1f2f6; text-align: center; cursor: pointer; border-radius: 8px;}
.caseList-container .caseList-body .item:last-child{ margin-right: 0;}
.caseList-container .caseList-body .item i{ display: inline-block; vertical-align: middle; width: 48px; height: 38px; transition: 0.5s; }
.caseList-container .caseList-body .item:hover i{ transform: rotateY(180deg); }
.caseList-container .caseList-body .item.active{ background-color: #fff; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);}
.caseList-container .caseList-body .item .des{ display: inline-block; vertical-align: middle; margin-left: 4px;}
.caseList-container .caseList-body .item .des dt{ font-size: 16px;}
.caseList-container .caseList-body .item .des dt a{ display: inline-block; vertical-align: middle; margin-top: -2px; margin-left: 4px; width: 43px; height: 22px; line-height: 22px; border-radius: 22px; font-size: 14px; text-align: center; color: #fff; background-color: #fc3869;}
.caseList-container .caseList-body .item .des dt a:hover{ box-shadow: 0 2px 10px rgba(252, 56, 105, 0.4);}
.caseList-container .caseList-body .item .des dt a span{ margin-left: 2px;}
.caseList-container .caseList-body .item .des dd{ font-size: 14px; color: #8c8d9e;}
.caseList-container .caseList-body .item.All i{ background: url(../images/case/case@icon.png);}
.caseList-container .caseList-body .item.ywzj i{ width: 40px; background: url(../images/case/case@icon.png) -60px 0;}
.caseList-container .caseList-body .item.ppsj i{ background: url(../images/case/case@icon.png) -115px 0;}
.caseList-container .caseList-body .item.uisj i{ background: url(../images/case/case@icon.png) -174px 0;}
.caseList-container .caseList-body .item.dssj i{ background: url(../images/case/case@icon.png) -234px 0;}
.caseList-container .caseList-body .item.spjj i{ width: 45px; background: url(../images/case/case@icon.png) -293px 0;}

.caseList-container .caseList-body .box{ margin-top: 67px;}
.caseList-container .caseList-body .box .list li{ float: left; width: 282px; margin: 0 24px 46px 0;}
.caseList-container .caseList-body .box .list li:nth-child(4n){ margin-right: 0;}
.caseList-container .caseList-body .box .list li .show{ display: block; overflow: hidden; width: 282px; height: 212px; border-radius: 6px;}
.caseList-container .caseList-body .box .list li .show img{ transition: 0.3s;}
.caseList-container .caseList-body .box .list li:hover .show img{ transform: scale(1.06); }
.caseList-container .caseList-body .box .list li dl{ height: 48px; margin-top: 20px;}
.caseList-container .caseList-body .box .list li dl dt{ font-size: 16px; margin-bottom: 3px;}
.caseList-container .caseList-body .box .list li dl dd{ color: #5f606b;}
.caseList-container .caseList-body .box .list li .belong{ margin-top: 20px; color: #8c8d9e;}
.caseList-container .caseList-body .box .list li .belong .user{ display: inline-block;}
.caseList-container .caseList-body .box .list li .belong .user i{ display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin: 0 10px 0 0; border-radius: 32px; border:1px solid #9495a5; background-color: #f5f5f5; background-position: center; background-size: cover;}
.caseList-container .caseList-body .box .list li .belong .type{ float: right; margin: 5px 0 0 0;}

.caseDetail-banner{ height: 265px; background-image: linear-gradient(to bottom, #dce1f7 10%, #e6eaf9); }
.caseDetail-banner .title{ display: inline-block; margin-top: 155px; text-transform:uppercase; padding-left: 25px;}
.caseDetail-banner .title h3{ font-size: 24px; }
.caseDetail-banner .title p{ font-size: 14px; margin-top: 4px;}
.caseDetail-container{ padding: 25px 0 0; background-color: #f1f2f6;}
.caseDetail-container .caseDetail-body{ position: relative;}
.caseDetail-container .caseDetail-body .box .instrLeft{ float: left; width: 849px; padding: 40px 23px 60px; background-color: #fff;}
.caseDetail-container .caseDetail-body .box .instrLeft h4{ font-size: 24px;  text-transform:uppercase}
.caseDetail-container .caseDetail-body .box .instrLeft .des{ margin-top: 30px;}
.caseDetail-container .caseDetail-body .box .instrLeft .des dd{ margin-top: 25px;}
.caseDetail-container .caseDetail-body .box .instrLeft .des dd p{ margin-bottom: 4px;}

.caseDetail-container .caseDetail-body .box .instrLeft .bd{ margin-top: 40px;}
.caseDetail-container .caseDetail-body .box .instrLeft .bd img{ max-width: 849px}
.caseDetail-container .caseDetail-body .box .instrLeft .giveLike{ display: block; width: 125px; height: 47px; line-height: 47px; margin: 40px auto 0;  border-radius: 8px; color: #2f4ad1; text-align: center;  border: 1px solid #2f4ad1; }
.caseDetail-container .caseDetail-body .box .instrLeft .giveLike i{ display: inline-block; vertical-align: middle; margin: -4px 12px 0 0; width: 28px; height: 27px; border-radius: 8px; background: url(../images/case/case@icon.png) 0 -48px; }
.caseDetail-container .caseDetail-body .box .instrLeft .giveLike:hover{box-shadow: 0 2px 10px rgba(30, 60, 205, 0.2);}

.caseDetail-container .caseDetail-body .box .sideBar{ position: absolute; top: -216px; right: 0; width: 288px; height: 577px; background-color: #fff;}
.caseDetail-container .caseDetail-body .box .sideBar .info{ text-align: center; padding: 60px 24px 48px;}
.caseDetail-container .caseDetail-body .box .sideBar .info .p-photo{ display: inline-block; width: 78px; height: 78px; background-color: #f1f2f6; border-radius: 78px; background-size: cover;}
.caseDetail-container .caseDetail-body .box .sideBar .info .p-name{ font-size: 16px; margin-top: 15px; font-weight: bold;}
.caseDetail-container .caseDetail-body .box .sideBar .info .p-kw{ margin-top: 15px; color: #a4b0be; }
.caseDetail-container .caseDetail-body .box .sideBar .info .p-kw span{ display: inline-block; font-size: 12px; margin: 5px 3px;}
.caseDetail-container .caseDetail-body .box .sideBar .info a.consult{ display: block; height: 44px;  margin-top: 24px; line-height: 44px; border-radius: 12px; color: #fff; background-color: #1e3ccd;}
.caseDetail-container .caseDetail-body .box .sideBar .info a.consult:hover{ box-shadow: 0 2px 10px rgba(30, 60, 205, 0.4);}
.caseDetail-container .caseDetail-body .box .sideBar .info a.publish{  display: block; height: 44px; margin-top: 24px; line-height: 44px; border-radius: 12px; color: #fff; background-color: #fc3869;}
.caseDetail-container .caseDetail-body .box .sideBar .info a.publish:hover{ box-shadow: 0 2px 10px rgba(30, 60, 205, 0.07);}

.caseDetail-container .caseDetail-body .box .sideBar .contactItem{ border-top: 1px solid #dfe4ea; padding:24px 24px  }
.caseDetail-container .caseDetail-body .box .sideBar .contactItem .weChat{ display: inline-block; width: 94px; height: 94px; background-color: #f1f2f6;}
.caseDetail-container .caseDetail-body .box .sideBar .contactItem .weChat img{ width: 100%;}
.caseDetail-container .caseDetail-body .box .sideBar .contactItem .tel{ display: inline-block; vertical-align: middle; width: 130px; margin: 0 0 0 10px;}
.caseDetail-container .caseDetail-body .box .sideBar .contactItem .tel dt{ color: #747d8c;}
.caseDetail-container .caseDetail-body .box .sideBar .contactItem .tel dd{ margin-top: 10px;}
.caseDetail-container .caseDetail-body .box .sideBar .contactItem .tel dd i{ display: inline-block; vertical-align: middle; width: 17px; height: 17px; margin: -4px 4px 0 0; background: url(../images/case/case@icon.png) -37px -57px;}


.recommend-works-container{ background-color: #f1f2f6; padding: 45px 0 20px;}
.recommend-works-container .recommend-works-body .title { margin-bottom: 32px;}
.recommend-works-container .recommend-works-body .title h3{ font-size: 24px;}
.recommend-works-container .recommend-works-body .box .list li{ float: left; width: 282px; margin: 0 24px 46px 0; padding: 0 0 22px 0; background-color: #fff; border-radius: 6px;}
.recommend-works-container .recommend-works-body .box .list li:nth-child(4n){ margin-right: 0;}
.recommend-works-container .recommend-works-body .box .list li .show{ display: block; overflow: hidden; width: 282px; height: 212px; border-radius: 6px;}
.recommend-works-container .recommend-works-body .box .list li .show img{ transition: 0.3s;}
.recommend-works-container .recommend-works-body .box .list li:hover .show img{ transform: scale(1.06); }
.recommend-works-container .recommend-works-body .box .list li dl{ height: 48px; margin-top: 20px; padding: 0 10px;}
.recommend-works-container .recommend-works-body .box .list li dl dt{ font-size: 16px; margin-bottom: 3px;}
.recommend-works-container .recommend-works-body .box .list li dl dd{ color: #5f606b;}
.recommend-works-container .recommend-works-body .box .list li .belong{ margin-top: 20px; color: #8c8d9e; padding: 0 10px;}
.recommend-works-container .recommend-works-body .box .list li .belong .user{ display: inline-block;}
.recommend-works-container .recommend-works-body .box .list li .belong .user i{ display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin: 0 10px 0 0; border-radius: 32px; border:1px solid #9495a5; background-color: #f5f5f5; background-position: center; background-size: cover;}
.recommend-works-container .recommend-works-body .box .list li .belong .type{ float: right; margin: 5px 0 0 0;}