.case{position: relative;padding-top: 100px;padding-left:274px;box-sizing: border-box;padding-bottom: 90px;}
/*案例导航*/
.case .anlinavs{position: absolute;top:0;left: 0;padding:0 60px;width: 154px;height: 100%;z-index: 2;border-right: 1px solid #eee;}
.case .anlinavs ul{width: 154px;padding:40px 0;overflow: hidden;position: absolute;top:100px;text-align: center;transition: .2s;}
.case .anlinavs ul li{box-sizing: border-box;position: relative;font-size: 18px;color: #555;transition: .3s;padding:20px 0;}
.case .anlinavs ul li a{position: relative;display: inline-block;padding-left: 20px;}
.case .anlinavs ul li a:before{content: "";width: 3px;height: 3px;border-radius: 50%;border: 2px solid #0052d9;position: absolute;left: 0;top:50%;transform: translateY(-50%);transition: .3s;opacity: 0}
.case .anlinavs ul li.act a{color: #181818;font-weight: bold}
.case .anlinavs ul li.act a:before{opacity: 1}
.case .anlinavs ul li:hover a{color: #181818;}
.case .anlinavs ul li:hover a:before{opacity: 1}
/*案例区*/
.case .caselist{padding:0 80px 20px 20px;box-sizing: border-box;}
.case .caselist-bg{background: url("../images/page_focus_1.jpg") no-repeat center;background-size: cover;padding:20px 40px;box-sizing: border-box}
.case .caselist-tit{font-size: 26px;color: #fff;font-weight: normal;padding-top: 55px;}
.case .caselist-t{padding-top: 50px;padding-bottom: 65px;}
.case .caselist-t-l{float: left;}
.case .caselist-t-l h1{font-size: 22px;color: #fff;font-weight: normal;padding-bottom: 16px;}
.case .caselist-t-l p{font-size: 14px;color: #fff;}
.case .caselist-t-l p span{display: block}
.case .caselist-t-r{float: right;width: 60%;}
.case .caselist-t-r ul{margin-top: -10px;}
.case .caselist-t-r li{float: left;width: 33%}
.case .caselist-t-r li h1{font-family: 'myfont';color: #fff;}
.case .caselist-t-r li h1 i{font-size: 60px;}
.case .caselist-t-r li h1 span{font-size: 40px;}
.case .caselist-t-r li h1 .nian{font-size: 22px;font-weight: normal}
.case .caselist-t-r li p{font-size: 14px;color: #fff;}
.case .case-anli{border-top: 1px solid #eeeeee}
.case .case-anli-t{padding:25px 0;}
.case .case-anli-t li{display: inline-block;margin-right: 55px;font-size: 14px;color: #555555;padding:10px 0;}
.case .case-anli-t li a{position: relative}
.case .case-anli-t li a:after{content: "";width: 0;left: 50%;position: absolute;bottom:-2px;height: 2px;background: #0052d9;transition: .3s;}
.case .case-anli-t li a:hover:after{width: 100%;left: 0}
.case .case-anli-t li.act a:after{width: 100%;left: 0}
.case .case-anli-b{min-height: 200px;}
.case .case-anli-b li{float: left;width:32%;margin-right: 2%;margin-bottom: 55px;}
.case .case-anli-b li:nth-child(3n){margin-right: 0}
.case .case-anli-b li a{display: block;}
.case .case-anli-b .case-anli-bg{overflow: hidden;position: relative}
.case .case-anli-b .case-anli-bg:after{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,.5);content: '';transition: transform .6s;transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-130%,0);}
.case .case-anli-b li:hover .case-anli-bg:after{transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,130%,0);}
.case .case-anli-b .case-anli-pic{background: url("../images/anlilist.jpg") no-repeat center;background-size: cover;height: 330px;transition: .6s;}
.case .case-anli-b li:hover .case-anli-pic{transform: scale(1.1)}
.case .case-anli-b .case-anli-info{padding:5px 30px;box-sizing: border-box;border: 1px solid #eeeeee;border-top: none;}
.case .case-anli-b .case-anli-info h1{font-size: 22px;color: #181818;font-weight: normal;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding:30px 0;border-bottom: 1px solid #eeeeee}
.case .case-anli-b .case-anli-info div{padding:15px 0;}
.case .case-anli-b .case-anli-info div h2{float: left;color: #555555;font-size: 14px;}
.case .case-anli-b .case-anli-info div h2 span{font-weight: normal}
.case .case-anli-b .case-anli-info div h2 i{font-family: 'myfont'}
.case .case-anli-b .case-anli-info div h3{float: right;margin-top: -4px;}
.case .case-anli-b .case-anli-info div h3 span{font-size: 12px;color: #cccccc;font-family: 'myfont';display: inline-block;vertical-align: middle;margin-right: 10px;}

.casefenye{}
.casefenye a,.casefenye span{display: inline-block;padding:3px 10px;font-size: 14px;border: 1px solid #ccc;margin-right: 3px;transition: .3s;margin-bottom: 10px;}
.casefenye span{color: #fff;border-color: #0052d9;background: #0052d9}
.casefenye a:hover{color: #fff;border-color: #0052d9;background: #0052d9}

/*案例弹窗*/

.bottom{margin-top: -14px;}
@media screen and (max-width: 1880px){
    .case .case-anli-b .case-anli-pic{height: 217px;}
}

@media screen and (max-width: 1570px){
    .case{padding-left: 234px;}
    .case .anlinavs{padding:0 40px;}
    .case .case-anli-b .case-anli-pic{height: 195px;}
}
@media screen and (max-width: 1400px){
    .case .caselist-t-l{float: none;display: block}
    .case .caselist-t-r{float: none;width: 100%;}
    .case .caselist-t-r ul{margin-top: 40px;}
    .case .case-anli-b .case-anli-pic{height: 166px;}
    .case-info .case-info-cont{width: 960px;}
    .case-info .case-info-l{padding:30px;}
}

@media screen and (max-width: 1270px){
    .case .case-anli-t li{margin-right: 30px;}
    .case .case-anli-b li{width: 49%;margin-right: 0;}
    .case .case-anli-b li:nth-child(even){float: right}
    .case .case-anli-b .case-anli-info h1{font-size: 18px;padding: 20px 0;}
    .case .case-anli-b .case-anli-pic{height: 184px}
    ::-webkit-scrollbar {width:0px;}

}

@media screen and (max-width: 1023px){
    .header.act{box-shadow: none}
    .case{padding-left: 0;}
    .case .anlinavs{position: fixed;top:70px;width: 100%;height: auto;border: none;box-sizing: border-box;background: #f5f5f5;z-index: 3}
    .case .anlinavs .fix{position: static;transform: translateY(0) !important;width: 100%;padding:20px 0;}
    .case .anlinavs ul li{font-size: 14px;padding:5px 0;display: inline-block;}
    .case .anlinavs ul li a{padding:0 15px;}
    .case-info{padding:60px;}
    .case-info .case-info-cont{width: 100%;}
    .case-info .case-info-b{overflow-y: auto}
    .case .case-anli-b{min-height: auto}
    .case-info .case-info-l{position: static;width: 100%;height: auto;display: block}
    .case-info .case-info-item{margin-bottom: 30px;}
    .case-info .case-info-r{position: static;width: 100%;height: auto;}
    .case .case-anli-b .case-anli-pic{height: 178px}
    #fengmian{background-image: url("../images/telcase.jpg") !important;background-size: cover}

}
@media screen and (max-width: 767px){
    .case{padding-top: 100px;padding-bottom: 60px;}
    .case .anlinavs{top:40px;padding: 0 20px;}
    .case .anlinavs .fix{padding:25px 0;text-align: left}
    .case .anlinavs ul li{font-size: 12px;}
    .case .caselist{padding:0 20px;}
    .case .caselist-bg{padding:20px;}
    .case .caselist-t{padding-bottom: 50px;}
    .case .caselist-t-l p span{display: inline;}
    .case .caselist-t-r li h1 i{font-size: 35px;}
    .case .caselist-t-r li h1 span{font-size: 18px;}
    .case .caselist-t-r li p{font-size: 12px;}
    .case .caselist-t-r li h1 .nian{font-size: 14px;}
    .case .case-anli-t{padding: 35px 0;}
    .case .case-anli-t li{margin-right: 15px;font-size: 12px;}
    .case .case-anli-b{margin-top: 35px}
    .case .case-anli-b li{margin-bottom: 35px;}
    .case .case-anli-b li{width: 100%;margin-right: 0;float: none;}
    .case .case-anli-b li:nth-child(even){float: none;}
    .case .case-anli-b .case-anli-pic{height: 189px}
    .case-info{padding:60px 20px;}
    .case-info .case-info-t{height: 40px;line-height: 40px;}

    .case-info .case-info-b{top:40px;height:calc(100% - 40px)}
    .case-info .case-info-t #detailclose{padding:0 15px;}
    /*.case-info .case-info-cont{padding-top: 40px;}*/
    .case-info .case-info-l{padding:20px;}
    .case-info .case-info-l h1{font-size: 22px;}
    .case-info .case-info-l h2{font-size: 18px;}
    .case-info .case-info-l h3{font-size: 16px;}

}
.pager {text-align: center; margin: 20px 0;}
.pager ul {display: flex; flex-wrap: wrap; justify-content: center}
.pager ul li {display: inline-block;}
.pager ul li a {padding: 5px 15px; margin: 15px 5px; border: #dddddd solid 1px; display: inline-block;}
.pager ul li a:hover {border: #2669ec solid 1px; color: #2669ec}
.pager ul .active a {border: #2669ec solid 1px; display: inline-block; background-color: #2669ec; color: #fff;}
.pager ul a:not([href]):not([class]):hover {border: #dddddd solid 1px;}
.pager ul .active a:hover {color: #fff; border: #2669ec solid 1px !important;}