.runfeng_blog_list {
    padding: calc(var(--text-gap-md) / 2) 0 var(--text-gap);
}

.runfeng_blog_list_title {
    color: var(--title-text-color);
    font-family: var(--title-font-family);
    font-size: var(--title-size-h1);
    font-weight: 700;
    line-height: 1.52;
}
.runfeng_blog_list_top_item_content .runfeng-btn2{
    color: #fff !important;
    margin-top: var(--text-gap);
}
.runfeng_blog_list_top_item_content .runfeng-btn2:hover{
    color: #fff !important;
}
.runfeng_blog_list_top_item_content .runfeng-btn2::after{
    background: #fff;
}
.runfeng_blog_list_desc {
    color: rgba(40, 40, 40, 0.80);
    font-size: var(--text-size);
    font-weight: 400;
    line-height: 1.375;
    margin-top: var(--text-gap-md);
    text-align: justify;
}

.runfeng_blog_list_top {
    margin-top: var(--text-gap);
    padding-bottom: var(--content-gap-md) !important;
}

.runfeng_blog_list_top a {
    display: flex;
}

.runfeng_blog_list_top_item_image {
    width: 50%;
    aspect-ratio: 720/506;
}

.runfeng_blog_list_top_item_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.runfeng_blog_list_top_item_content {
    flex: 1;
    padding: calc(var(--text-gap-lg) * 2) calc(var(--text-gap-md) * 2);
    background: var(--color-primary);
}

.runfeng_blog_list_top_item_content_title {
    color: #FFF;
    font-family: var(--title-font-family);
    font-size: var(--title-size-h4);
    font-weight: 700;
    line-height: 1.53;
}

.runfeng_blog_list_top_item_content_desc {
    color: #FFF;
    font-size: var(--text-size);
    font-weight: 400;
    line-height: 1.375;
    margin-top: var(--text-gap-lg);
    text-align: justify;
}

.runfeng_blog_list .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0 !important;
}

.runfeng_blog_list .swiper-pagination .swiper-pagination-bullet {
    background: rgba(40, 40, 40, 0.2);
}

.runfeng_blog_list .swiper-pagination .swiper-pagination-bullet-active {
    background: rgba(40, 40, 40, 1);
}

.runfeng_blog_list_list {
    margin-top: calc(var(--text-gap-lg) + var(--text-gap-md));
    padding-bottom: var(--content-gap-md) !important;
}

.runfeng_blog_list_list a {
    display: block;
}
.runfeng_blog_list_list .empty-slide{
    background: #f5f5f5;
    opacity: 0;
    pointer-events: none;
    cursor: default;
}
.runfeng_blog_list_list .swiper-slide{
    margin-top: calc(var(--text-gap-lg) + var(--text-gap-md)) !important;
}

.runfeng_blog_list_list_item_image {
    width: 100%;
    aspect-ratio: 227/160;
    position: relative;
}

.runfeng_blog_list_list_item_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.runfeng_blog_list_list_item_info{
    position: absolute;
    top: calc(var(--text-gap-md) / 2);
    left: calc(var(--text-gap-md) / 2);
    width: 100%;
    color: #FFF;
    font-size: var(--text-size);
    font-weight: 700;
    line-height: 1.25;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.runfeng_blog_list_list_item_date{
    background: #535353;
    padding: 3px 10px;
}

.runfeng_blog_list_list_item_tag{
    background: #7E7E7E;
    padding: 3px 10px;
}

.runfeng_blog_list_list_item_content {
    padding: calc(var(--text-gap-md) / 2) calc(var(--text-gap-md) / 2 + 4px) 0 0;
}

.runfeng_blog_list_list_item_content_title {
    color: var(--title-text-color);
    font-family: var(--title-font-family);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.54;
    height: calc(22px * 1.54 * 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.runfeng_blog_list_list_item_content_desc {
    color: rgba(40, 40, 40, 0.70);
    text-overflow: ellipsis;
    font-size: var(--text-size);
    font-weight: 400;
    line-height: 1.375;
    margin-top: 4px;
    height: calc(var(--text-size) * 1.375 * 2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.runfeng_blog_list_list .runfeng-btn2 {
    margin-top: calc(var(--text-gap-md) / 2 + 4px);
}










.runfeng_blog_list_line {
    width: 100%;
    height: 1px;
    background: #E1E1E1;
}

.runfeng_blog_list_filter {
    position: relative;
    margin-top: var(--content-gap-lg);
    margin-bottom: var(--text-gap-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.runfeng_blog_list_search {
    width: 27.7%;
    flex-shrink: 0;
    padding: 23px 40px;
    border: 1px solid #E1E1E1;
}

.Blog-filters-content {
    flex: 1;
}

.runfeng_blog_list_search .submit_btn {
    background-color: transparent;
}

.runfeng_blog_list_search input {
    margin-left: 10px;
}

.runfeng_blog_list_search input::placeholder {
    color: rgba(40, 40, 40, 0.40);
    font-family: var(--title-font-family);
    font-size: var(--text-title-size);
    font-weight: 700;
    line-height: 1.555;
    
}

.runfeng_blog_list .attr__label {
    padding: 23px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E1E1E1;
    color: var(--title-text-color);
    font-family: var(--title-font-family);
    font-size: var(--text-title-size);
    font-weight: 700;
    line-height: 1.555;
    
}

.runfeng_blog_list .attr__label:after {
    content: "\e600";
    font-family: "qico" !important;
    margin-left: 8px;
    font-size: 16px;
    width: 16px;
    color: var(--title-text-color);
}

.runfeng_blog_list .attr__label.act:after {
    content: "\e61e";
}


.runfeng_blog_list .attr__content {
    display: none;
    position: absolute;
    top: calc(100% + var(--text-gap-lg) + 1px);
    left: 0;
    width: 340px;
    border-right: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
    border-left: 1px solid #E1E1E1;
    background: #FFF;
    box-shadow: 0 4px 4px 0 rgba(64, 64, 64, 0.06);
    padding: var(--text-gap-md);
    z-index: 1000;
}

.runfeng_blog_list .js-filter.is-open .attr__content {
    display: block;
}



.runfeng_blog_list .js-filter {
    flex: 1;
    cursor: pointer;
    position: relative;
}


.runfeng_blog_list .collection-filter-wrapper {
    display: flex;
    align-items: center;
    gap: var(--text-gap-md);
}

.runfeng_blog_list .attr__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.runfeng_blog_list .attr-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
}

.runfeng_blog_list .attr-checkbox__label {
    color: rgba(40, 40, 40, 0.70);
    font-size: var(--text-size);
    font-weight: 400;
    line-height: 1.375;
    
    text-align: center;
}

.runfeng_blog_list .attr-checkbox .attr-checkbox__input:checked~.attr-checkbox__label {
    color: var(--title-text-color);
}

.runfeng_blog_list .attr-checkbox input[type="checkbox"] {
    display: none;
}

.runfeng_blog_list .attr-checkbox .custom-checkbox {
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--title-text-color);
    padding: 4px;
}

.runfeng_blog_list .attr-checkbox .attr-checkbox__input:checked~.custom-checkbox b {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--title-text-color);
}

.runfeng_blog_list .attr__line {
    width: 100%;
    height: 1px;
    background: #E1E1E1;
    margin-top: var(--text-gap-md);
}

.runfeng_blog_list .attr__clear {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 17px;
}

.runfeng_blog_list .attr__clear--btn,
.runfeng_blog_list .attr__apply--btn {
    border: 1px solid #E1E1E1;
    background: #FFF;
    padding: 7px 35px;
    text-align: center;
    color: var(--title-text-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.571;
    
    cursor: pointer;
}

.runfeng_blog_list .attr__apply--btn {
    background: var(--title-text-color);
    color: #FFF;
}

.runfeng_blog_list_search form {
    display: flex;
}

@media (max-width: 1500px) {
    .runfeng_blog_list_list_item_content_title {
        font-size: var(--title-size-h6);
        height: calc(var(--title-size-h6) * 1.54 * 1);
    }

}

@media (max-width: 992px) {
    .runfeng_blog_list_filter {
        flex-direction: column;
    }

    .runfeng_blog_list_search {
        width: 100%;
        order: -1;
    }

    .Blog-filters-content {
        width: 100%;
    }

    .runfeng_blog_list .js-filter {
        position: static;
    }

    .runfeng_blog_list .attr__content {
        width: 100%;
    }

    .runfeng_blog_list_search {
        padding: 16px 20px;
    }

    .runfeng_blog_list .attr__label {
        padding: 16px 0;
    }

        .runfeng_blog_list_top a{
            flex-direction: column;
        }

        .runfeng_blog_list_top_item_image{
            width: 100%;
        }
        .runfeng_blog_list_top_item_content{
            width: 100%;
        }
}