html, body {
    background-color: #f5f5f5;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    pointer-events: auto; /* Ensure the element remains clickable */
}
.material-title {
    background-color: rgba(108, 117, 125, .5) !important;
    color: #ffffff !important;
}
.material-footer {
    background-color: #f3f6f9;
}
.cate_btn{
    background:#ffffff !important;
    color:#333333 !important;
    border:1px solid #cccccc;
    margin:2px 0;
}
.cate_btn + .cate_btn{
    margin-left:2px;
}
.keybox {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding:2px 10px !important;
}

.sytle-search {
    height: 54px;
    margin: 20px;
    background-color: #fff;
    padding: 0px 20px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
}

* {
    -webkit-font-smoothing: antialiased;
    font-family: "PingFang SC", "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
}

.sytle-search .search-sort ul {
    float: left;
    border-radius: 3px;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    margin-left: 17px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}

    .sytle-search .search-sort ul li {
        width: 72px;
        color: #547381;
        background: #f3f6f9;
        cursor: pointer;
        transition: all .2s;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
    }

.search-input {
    text-align: right;
}

.sytle-search .search-sort h4 {
    float: left;
    line-height: 28px;
}

.search-sort li:not(.active):hover {
    background: #494574 !important;
    color: #fff !important;
}

.search-sort .active {
    background: #494574 !important;
    color: #fff !important;
}

.masonry {
    margin: 15px;
    position:relative;
}
.masonry .item{
    position:absolute;
    width:33.33%;
    padding:5px;
}
/*@media screen and (min-width: 768px) {
    .masonry {
        column-count: 2;*/ /* 设置列数*/
    /*}
}
@media screen and (min-width: 1170px) {
    .masonry {
        column-count: 3;*/ /* 设置列数*/
    /*}
}*/
/*@media screen and (min-width: 1400px) {
    .masonry {
        column-count: 4;*/ /* 设置列数*/
    /*}
}*/



.masonry .material_content {
    padding: 15px 10px;
}

.material-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px;
}

.scoll i{
    color:red !important;
}