.cases-container {
    font-size: 14px;
    text-align: center;
}

.cases-container * {
    box-sizing: border-box;
    font-size: inherit;
}

.cases-container .banner {
    height: auto;
    width: 100%;
    display: block;
}

.cases-container .banner .swiper-slide {
    display: block;
    height: 100%;
}

.cases-container .banner img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/*Swiper分页器样式↓*/
.cases-container .banner .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    opacity: 0.5;
    border: 1px solid #eee;
}

.cases-container .banner .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #eee;
    opacity: 1;
}

/*主要内容样式↓*/
.cases-container .cases-main {
    width: 1100px;
    max-width: 1100px;
    display: block;
    margin: 30px auto 0;
    text-align: left;
    clear: both;
}

.cases-nav-box {
    text-align: center;
}

.cases-nav-box .link-button {
    display: block;
    vertical-align: top;
    float: left;
    margin: 0 auto 50px;
    width: 50%;
}

.cases-nav-box .link-button>img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 182px;
}

.cases-nav-box .link-button>.hover-img {
    display: none;
}

.cases-nav-box .link-button:hover>img {
    display: none;
    width: 100%;
    height: 100%;
    max-height: 182px;
}

.cases-nav-box .link-button:hover>.hover-img {
    display: block;
}

.cases-main .filters-box {
    margin-bottom: 60px;
}

.cases-main .single-filter {
    border-bottom: 2px dotted #bababa;
    margin-bottom: 5px;
    padding: 3px 0 12px 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}

.cases-main .single-filter .filter-name {
    padding-top: 12px;
    color: #017bf6;
    font-size: 20.5px;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 108px;
    text-align: left;
}

.cases-main .single-filter .values-box {
    -ms-flex: 1;
    flex: 1;
    color: #4d4d4d;
    display: block;
    font-size: 0;
}

.cases-main .single-filter .value {
    cursor: pointer;
    min-width: 115px;
    line-height: 27px;
    display: inline-block;
    font-size: 19px;
    vertical-align: top;
    padding: 0 15px;
    text-align: center;
    margin: 10px 0 10px 20px;
    transition: background 0.222s;
}

.cases-main .single-filter .value>a {
    display: block;
    color: inherit;
}

.cases-main .single-filter .value.more {
    color: #e5535f;
}

.cases-main .single-filter .value:hover {
    color: #333;
    background-color: rgba(11, 150, 230, 0.2);
}

.cases-main .single-filter .value.active {
    color: #fff;
    background-color: #0b96e6;
    cursor: default;
}

/*案例列表样式↓*/
.cases-main .cases-list {
    border-bottom: 1px solid #dcdcda;
    display: -ms-flexbox;
    display: block;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 0;
}

.cases-main .cases-list .cases-border {
    display: block;
    margin-top: 30px;
    margin-bottom: 44px;
}

.cases-main .cases-list .cases-border:after {
    content: '';
    width: 100%;
    background-repeat: no-repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABEwAAAAQCAYAAAAMAuolAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2ZDM2YTQ4Ny01NjQ3LTliNGUtOWMwZS04ZWFiNTFhOGU4ZDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkRFMEI3MzlERTBCMTFFNkI1M0RENTBFODdBQjA0MDQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkRFMEI3MzhERTBCMTFFNkI1M0RENTBFODdBQjA0MDQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NmQzNmE0ODctNTY0Ny05YjRlLTljMGUtOGVhYjUxYThlOGQzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZkMzZhNDg3LTU2NDctOWI0ZS05YzBlLThlYWI1MWE4ZThkMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Piaoeb4AAAHSSURBVHja7N0BioJAFIDhiu5/F/Ua3smYoDIR56XzIPD7YdlhqS/mgbCI6XWaposkSZIkSZI+3V6LYRjeZ076vp/W/t5qzefz+Vu+2fH5fD7f3vl8e+fHX2+OSX65wqQsyu/yU8C1ddd1u1/D5/P5v/pmx+fz+Xx75/PtnV9/rzm291/r6guWHzpf//JBfD6fH12bHZ/P5/PNls8f7J0f8s0xz7+0AI+c3eHz+fylb3Z8Pp/PN1s+3975cd8c2/jL9+46E3PkjA6fz+dnXWVidnw+n38e32z5fHvnr//fbI7t/GZg9oHN5/PP45sdn8/n8+2dz7d3fuy95ph3jDW/SUxkzefz+VvvNTs+n8/n2zufb+/8+GvMMcdPuxlRq7M+fD7/nL7Z8fl8Pt9s+Xx759d9c8zzfV+Jz+f/nW92fD6fzzdbPt+xw4/55pjnr95Rd35JypFHW0UeC8fn8/nRR6OZHZ/P55/TN1s+39759Ru/mmPbY2z3V3Ii3wM6skE+n883Oz6fz+ebLZ/f2Tu/6ptjnu/SHD6f/3e+2fH5fD7f3vl8j9fmx9bmmOdfn2dNJEmSJEmS9O5mBJIkSZIkSd/dx3F0iYkkSZIkSdKshwADANxwPgzWu2g+AAAAAElFTkSuQmCC');
    background-size: 100% 100%;
    height: 16px;
    bottom: 0;
    left: 0;
    display: block;
}

.cases-main .single-case {
    width: 505px;
    margin-bottom: 40px;
    display: -ms-flexbox;
    display: inline-flex;
    vertical-align: top;
}

.cases-main .single-case:nth-of-type(2n-1) {
    margin-right: 45px;
}

.cases-main .single-case:nth-of-type(2n) {
    margin-left: 45px;
}

.cases-main .single-case .preview {
    max-width: 234px;
    min-height: 234px;
    width: 234px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 26px;
    align-items: center;
}

.cases-main .single-case .preview img {
    width: 100%;
    height: auto
}

.cases-main .single-case .info {
    -ms-flex: 1;
    flex: 1;
    padding-bottom: 38px;
    position: relative;
    overflow: hidden;
}

.cases-main .single-case .title {
    line-height: 30px;
    border-bottom: 1px solid #a0a0a0;
    max-width: 100%;
    padding-right: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #000000;
    display: block;
}

.cases-main .single-case .type {
    font-size: 12px;
    color: #a09e99;
    margin: 10px 0;
    display: block;
}

.cases-main .single-case .content {
    font-size: 14px;
    color: #5e5f60;
    line-height: 22px;
    word-break: break-all;
    overflow: hidden;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cases-main .single-case .bottom {
    height: 30px;
    position: absolute;
    left: 0;
    width: 100%;
    display: block;
    bottom: 0;
    padding: 5px;
    font-size: 14px;
}

.cases-main .single-case .bottom .text {
    color: #000000;
    display: inline-block;
    vertical-align: middle;
    margin-right: 24px;
}

.cases-main .single-case .bottom .consult {
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
    color: #ffffff;
    padding: 0 4px;
    background-color: #e60012;
    transition: all 0.323s;
    border-radius: 2px;
}

.cases-main .single-case .bottom .consult:hover {
    color: #e60012;
    background-color: #ffffff;
    box-shadow: 0 0 3px 1px #e60012 inset;
}

.cases-main .single-case.large {
    margin-bottom: 32px;
    -ms-flex-align: start;
    /* align-items: flex-start; */
    /* flex-wrap: wrap; */
    flex-direction: column;
    min-height: 530px;
}

.cases-main .single-case.large .preview {
    width: 100%;
    max-width: 100%;
    height: 287px;
    /* max-height: 448px; */
    border: 10px solid #f2f2f2;
    margin-right: 0;
}

.cases-main .single-case.large .preview img {
    width: 100%;
    height: 100%;
}

.cases-main .single-case.large .title {
    line-height: 34px;
    font-size: 18px;
    margin-top: 20px;
}

.cases-main .single-case.large .info {
    padding-bottom: 50px;
}

.cases-main .single-case.large .type {
    margin: 18px 0;
    font-size: 14px;
}

.cases-main .single-case.large .content {
    font-size: 18px;
    line-height: 28px;
    color: #6a6f73;
}

.cases-main .single-case.large .bottom {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 18px;
}

.cases-main .single-case.large .bottom .consult {
    line-height: 30px;
    padding: 0 6px;
}

.cases-main .single-case.large.border {
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 54px;
}


/*页码样式↓*/
.pagination {
    display: inline-block;
    text-align: left;
    font-size: 0;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0 5%;
}

.pagination .page {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
    line-height: 30px;
    min-width: 28px;
    padding: 0 5px;
    border: 1px solid #dedede;
    transition: all 0.122s;
    cursor: pointer;
    font-size: 12px;
    color: #9c9e98;
    height: 30px;
    margin-bottom: 12px;
}

.pagination .page:hover {
    background-color: rgba(19, 141, 237, 0.8);
    color: #eee;
}

.pagination .page>a {
    cursor: inherit;
    display: block;
    color: inherit;
}

.pagination .page.active {
    cursor: default;
    color: #fff;
    border-color: rgba(19, 141, 237, 1);
    background-color: rgba(19, 141, 237, 1);
}

.pagination .page.ellipsis {
    cursor: default;
    transition: none;
    background-color: inherit;
    font-size: 0;
    border: none;
    height: 30px;
    line-height: 40px;
}

.pagination .page.ellipsis:after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #888;
    box-shadow: 8px 0 0 0px #888, -8px 0 0 0px #888;
    display: inline-block;
}

.suofang_20170220 {
    /*2017年2月20日 12:16:58需求缩放成96%*/
    -webkit-transform: translate(0, -2%) scale(0.90);
    transform: translate(0, -2%) scale(0.90);
}

.cases-nav-box {
    width: 100%;
    text-align: center;
    height: 182px;
    min-width: 1100px;
}


/*************************************************************************
 * ↓响应式相关样式↓
 *************************************************************************/
@media screen and (max-width: 1099px) {
    body {
        min-width: 320px;
    }

    #header .center {
        max-width: 100%;
        overflow: hidden;
    }

    #newBridge {
        /*隐藏左侧咨询栏*/
        display: none !important;
    }

    .floatConsult {
        /*隐藏中间的咨询框*/
        display: none !important;
    }

    #kefu {
        /*隐藏右侧资讯栏*/
        display: none !important;
    }

    .cases-container .cases-main {
        width: 100%;
        padding-left: 2%;
        padding-right: 2%;
    }

    .cases-main .single-case {
        width: 46%
    }
    .cases-main .single-case:nth-of-type(2n-1){
        margin-right:2%;
    }
    .cases-main .single-case:nth-of-type(2n){
        margin-left:2%;
    }
    .cases-main .single-case .info {
        min-width: 54%;
    }

    .cases-main .single-case .preview {
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        margin-right: 5%;
        border-top: 15px solid #fff;
    }
    .cases-main .single-case.large{
        margin-bottom:20px;
    }
    .cases-main .cases-list .cases-border{
        margin-top:20px;
        margin-bottom:28px;
    }
}

@media screen and (max-width: 849px) {
    #header {
        display: none;
    }

    #content {
        padding-top: 0;
    }

    .cases-container .cases-main {
        margin-top: 15px;
    }

    .cases-main .single-filter .value {
        margin: 8px 0 8px 17px;
        min-width: 100px;
    }

    .cases-main .single-case.large .type {
        margin: 14px 0;
    }

    .cases-main .single-case.large.border {
        margin-bottom: 34px;
    }
}

@media screen and (max-width: 649px) {
    .cases-main .single-case .title {
        padding-right: 5%;
    }

    .cases-main .single-case .preview {
        min-height: 0;
    }

    .cases-main .single-case .info {
        min-width: 56%;
        padding-bottom: 35px;
    }

    .cases-main .single-case .content {
        max-height: 150px;
    }

    .cases-main .single-case .bottom .text {
        display: none;
    }

    .cases-main .single-case {
        margin-bottom: 20px;
    }

    .cases-main .single-case.large {
        min-height: 0;
        margin-bottom: 24px;
    }

    .cases-main .single-case.large .preview {
        min-height: 0;
    }

    .cases-main .single-case.large .type {
        margin: 12px 0;
    }

    .cases-main .single-case.large .content {
        font-size: 16px;
        max-height: 200px;
        overflow: hidden;
    }

    .cases-main .single-case.large .bottom .text {
        display: inline-block;
    }

    .cases-main .single-case.large .bottom {
        font-size: 16px;
    }

    .cases-main .single-filter .filter-name {
        font-size: 20px;
        width: 88px;
    }

    .cases-main .single-filter .value {
        line-height: 24px;
        font-size: 18px;
        padding: 0 14px;
        min-width: 80px;
    }
}

@media screen and (max-width: 499px) {
    .cases-main .filters-box {
        margin-bottom: 40px;
    }

    .cases-main .single-filter .value {
        margin: 6px 0 6px 12px;
        padding: 0 10px;
    }

    .cases-main .single-case .type {
        margin: 7px 0;
    }

    .cases-main .single-case .content {
        max-height: 110px;
    }

    .cases-main .single-case.large .content {
        max-height: 140px;
    }

    .cases-main .single-case.large .bottom .text {
        display: none;
    }

    .cases-main .single-case.large .preview {
        margin-top: 15px;
    }
}

@media screen and (max-width: 399px) {
    .cases-main .single-filter .filter-name {
        font-size: 18px;
        width: 68px;
    }

    .cases-main .single-filter .value {
        line-height: 20px;
        font-size: 16px;
        padding: 0 12px;
        min-width: 55px;
    }

    .cases-main .single-filter .value {
        margin: 5px 0 5px 10px;
        padding: 0 6px;
        font-size: 15px;
    }

    .cases-main .single-case .content {
        max-height: 80px;
        min-height: 25px;
    }

    .cases-main .single-case.large .type {
        margin: 10px 0;
    }

    .cases-main .single-case.large .content {
        max-height: 110px;
        font-size: 14px;
        line-height: 20px;
    }

    .cases-main .single-case.large.border {
        margin-bottom: 24px;
    }
}