body {
    background: #f7f7f5;
}
.main {
    margin-top: 45px;
    padding-bottom: 60px;
}
/* 列表 */
.supList {
    padding-top: 30px;
}
.supList li {
    margin-bottom: 40px;
    overflow: hidden;
}
.supList li .fl {
    width: 260px;
    height: 178px;
}
.supList li .fl img {
    width: 100%;
}
.supList li .fr {
    padding: 20px 35px;
    width: 78%;
    background: #fff;
    height: 178px;
    border: 1px solid #e6e6e6;
}
.supList li .fr h4 {
    color: #096cb0;
    font-size: 18px;
    line-height: 26px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;
    /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1;
    /** 显示的行数 **/
    overflow: hidden;
    /** 隐藏超出的内容 **/
}
.supList li .fr span {
    display: block;
    font-size: 14px;
    line-height: 40px;
    color: #999;
}
.supList li .fr p {
    line-height: 24px;
    color: #666;
    height: 48px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;
    /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2;
    /** 显示的行数 **/
    overflow: hidden;
    /** 隐藏超出的内容 **/
}
/* ------------------------------------- */
.supList li .fr.active {
    background: #096cb0;
}
.supList li .fr.active a {
    color: #fff;
}
.supList li .fr.active h4 {
    color: #fff;
}
.supList li .fr.active span {
    color: #fff;
}
.supList li .fr.active p {
    color: #fff;
}
/* ------------------------------------- */
@media only screen and (min-width:1280px) {
    /* PC端效果 */
    .supList li .fl {
        overflow: hidden;
    }
    .supList li .fl img {
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }
    .supList li .fl:hover img {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
    }
}
@media only screen and (min-width:0px) and (max-width:1280px) {
    .supList li .fl {
        width: 28%;
        height: auto;
    }
    .supList li .fl img {
        height: 136px;
    }
    .supList li .fr {
        width: 70%;
        height: 136px;
        padding: 10px;
    }
    .supList li .fr h4 {
        font-size: 16px;
    }
}
.flex-direction-nav {
    display: none;
}
@media only screen and (min-width:0px) and (max-width:768px) {
    .supList li .fl img {
        height: auto;
    }
    .supList {
        padding: 30px 10px 0;
    }
    .supList li .fl {
        width: 100%;
        height: auto;
    }
    .supList li .fr {
        width: 100%;
        height: auto;
    }
}