/* new css*/
article {
    --swiper_container_width: 1280;
    --swiper_container_height: 440;
    --banner_width: 420px;
    --banner_height: 243px;
    --four_col_width: 308px;
    --four_col_height: 154px;
    --five_col_width: 243px;
    --five_col_small_height: 136px;
    --five_col_big_height: 340px;
    --banner_gap: 10px;
    --four_col_gap: 16px;
    --five_col_gap: 16.25px;
}

.banner {
    width: var(--banner_width);
    margin-right: var(--banner_gap);
}

.banner a.img {
    height: var(--banner_height);
}

.four-col {
    width: var(--four_col_width);
    margin-right: var(--four_col_gap);
}

.four-col a.img {
    height: var(--four_col_height);
}

.five-col-small, .five-col-big {
    width: var(--five_col_width);
    margin-right: var(--five_col_gap);
}

.five-col-small a.img {
    height: var(--five_col_small_height);
}

.five-col-big a.img {
    height: var(--five_col_big_height);
}

.main-wrap {
    width: 1280px;
    height: 100%;
    margin: 0 auto;
    *zoom: 1;
}

.row {
    margin-top: 20px;
}

.row:first-child {
    margin-top: 0;
}

/* .margin-top-0 {
    margin-top: 0;
} */

.row .row-header {
    border-left: 2px solid #f38621;
    padding-left: 8px;
    margin-bottom: 12px;
}

.row .row-header .title {
    color: #333;
    font-size: 20px;
    font-weight: 500;
    float: left;
    margin-right: 30px;
}

.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.row .row-header .more {
    float: right;
    font-size: 14px;
    color: #666;
}

.flex {
    display: flex;
    display: -webkit-flex;
}

.justify-space-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.row .col:last-child {
    margin-right: 0;
}

.row .col a.img {
    display: block;
    overflow: hidden;
}

.row .col a.img img {
    display: block;
    height: 100%;
    width: 100%;
}
.row .col:hover a.img  img {
    transition: all 0.3s linear;
    transform: scale(1.1);
}

.row .col .title {
    height: 20px;
    margin: 10px 0 6px;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
}

.row .col .title a {
    color: #333333;
}

.row .col:hover .title a {
    color: #f38621;
}

.row .col .abstract {
    margin: 0;
    font-size: 14px;
    line-height: 26px;
    height: 52px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.row .col .abstract a {
    color: #666;
}

.row .right-col {
    width: 762px;
}

.swiper-slide a {
    display: block;
    height: 100%;
}

.swiper-slide a img {
    width: 100%;
    height: 100%;
}

.swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-button-prev { opacity:.6; transition:all .2s ease;}
.swiper-container .swiper-button-next { background:url('../images/icon_arr_right.png') no-repeat; background-size:30px;}
.swiper-container .swiper-button-prev { background:url('../images/icon_arr_left.png') no-repeat; background-size:30px;}

@media only screen and (max-width: 640px) {
    article {
        --swiper_container_width: 1280;
        --swiper_container_height: 440;
        --banner_width: 420;
        --banner_height: 243;
        --four_col_width: 308;
        --four_col_height: 154;
        --five_col_width: 243;
        --five_col_small_height: 136;
        --five_col_big_height: 340;
        --col_width: 48vw;
        --col_gap: 1vw;

        /* margin-top: var(--header_height); */
        padding-bottom: 40px;
    }

    .main-wrap {
        width: 100vw;
    }

    .swiper-container {
        height: calc(100vw*var(--swiper_container_height)/var(--swiper_container_width)) !important;
    }

    .xs-flex-container {
        /* flex-wrap: wrap; 保留两个不存在转行*/
    }

    .row .col {
        width: var(--col_width);
        margin: 0 var(--col_gap);
    }

    .row .col.banner a.img {
        height: calc(var(--col_width)*var(--banner_height)/var(--banner_width));
    }

    .row .col.four-col a.img {
        height: calc(var(--col_width)*var(--four_col_height)/var(--four_col_width));
    }

    .row .col.five-col-small a.img {
        height: calc(var(--col_width)*var(--five_col_small_height)/var(--five_col_width));
    }

    .row .col.five-col-big a.img {
        height: calc(var(--col_width)*var(--five_col_big_height)/var(--five_col_width));
    }

    .row .col:nth-child(n+3){
        display: none;
    }


}