.articles {
    padding: 0 0 8rem;
}

.articles-center {
    width: 140rem;
    height: 59.9rem;
    display: flex;
    justify-content: space-between;
}

.articles-center-left,
.articles-center-for {
    border-radius: 1rem;
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
    padding: 3.2rem;
}

.articles-center-left:hover,
.articles-center-for:hover {
    box-shadow: 0rem 0.4rem 1.2rem 0.1rem rgba(5, 23, 60, 0.16);
}

.articles-center-left {
    width: 40rem;
    height: 59.9rem;
    padding: 3.2rem;
    background: url('../../img/index/24.png') no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}

.articles-center-left:nth-child(2) {
    background: #fff;
    color: #05173C;
}

.articles-center-left:nth-child(2):hover .name {
    color: #F16522;
}

.articles-center-left:nth-child(2) .articles-center-left-title {
    width: 5rem;
    background-color: #05173C;
    color: #fff;
}

.articles-center-left:nth-child(2) .time {
    color: #F16522;
    opacity: 1;
}

.articles-center-left:nth-child(2)>img {
    width: 33.6rem;
    height: 20.4rem;
    margin-top: 3.2rem;
    border-radius: 0.8rem;
}

.articles-center-left .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(5, 23, 60, 0) 0%, #05173C 100%);
    z-index: 0;
}

.articles-center-left>div,
.articles-center-left>p {
    z-index: 1;
}

.articles-center-left .time {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    opacity: 0.6;
}

.articles-center-left .articles-center-left-title {
    width: 15.9rem;
    height: 2.6rem;
    border-radius: 10rem;
    font-size: 1.4rem;
    font-weight: 400;
    margin: 1.6rem 0;
    color: #05173C;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.articles-center-left .name {
    height: 7.2rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.4rem;
    margin-bottom: 1.6rem;
}

.articles-center-left p {
    font-size: 1.6rem;
    font-weight: 400;
    height: 9.2rem;
    line-height: 2.3rem;
    margin-bottom: 2.4rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

.articles-center-left-img {
    display: flex;
    align-items: center;
}

.articles-center-left-img img {
    width: 2rem;
    height: 2rem;
    display: block;
    margin-left: 0.6rem;
}

.articles-center-left-img span {
    font-size: 1.4rem;
    font-weight: 400;
    opacity: 0.6;
}

.articles-center-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.articles-center-for {
    display: flex;
    justify-content: space-between;
    width: 56.8rem;
    height: 18.9rem;
    display: flex;
}

.articles-center-for-time {
    width: 8.9rem;
    display: flex;
    flex-direction: column;
}

.articles-center-for-time span {
    color: #F16522;
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.articles-center-for-time span:nth-child(2) {
    font-size: 1.4rem;
    font-weight: 400;
}

.articles-center-for-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.articles-center-for-right-title {
    color: #05173C;
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 41.6rem;
}

.articles-center-for :hover .articles-center-for-right-title {
    color: #F16522;
}

.articles-center-for-right p {
    line-height: 2.2rem;
    font-size: 1.6rem;
    color: #666666;
    margin-bottom: 1.6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.articles-center-for-right-button {
    padding: 0.4rem 1rem;
    background-color: #05173C;
    color: #fff;
    font-size: 1.4rem;
    width: 5.9rem;
    border-radius: 10rem;
}

@media screen and (max-width: 768px) {
    .articles {
        padding: 0 0 4rem;
    }

    .articles-center {
        width: 34.3rem;
        height: auto;
        display: block;
    }

    .articles-center-left,
    .articles-center-for {
        border-radius: 1rem;
        background-color: #fff;
        border-radius: 1rem;
        overflow: hidden;
        padding: 1.2rem;
    }

    .articles-center-left:hover,
    .articles-center-for:hover {
        box-shadow: none;
    }

    .articles-center-left {
        width: 34.3rem;
        height: 32.8rem;
        padding: 1.2rem;
        background: url('../../img/index/40.png') no-repeat;
        background-size: cover;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        color: #fff;
    }

    .articles-center-left:nth-child(2) {
        background: #fff;
        color: #05173C;
        margin-top: 1.6rem;
    }

    .articles-center-left:nth-child(2):hover .name {
        color: #F16522;
    }

    .articles-center-left:nth-child(2) .articles-center-left-title {
        width: 11.9rem;
        height: 2.1rem;
        /*background-color: #05173C;*/
        color: #fff;
    }

    .articles-center-left:nth-child(2) .time {
        color: #F16522;
    }

    .articles-center-left:nth-child(2)>img {
        width: 31.9rem;
        height: 12rem;
        margin-top: 2.4rem;
        border-radius: 0.8rem;
    }

    .articles-center-left .gradient {
        display: none;
    }

    .articles-center-left>div,
    .articles-center-left>p {
        z-index: 1;
    }

    .articles-center-left .time {
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.3rem;
        opacity: 0.6;
    }

    .articles-center-left .articles-center-left-title {
        width: 11.9rem;
        height: 2.1rem;
        border-radius: 10rem;
        font-size: 1rem;
        font-weight: 400;
        margin: 0.8rem 0 1.2rem;
        color: #05173C;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }

    .articles-center-left .name {
        height: 5.4rem;
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 1.8rem;
        margin-bottom: 1.2rem;
    }

    .articles-center-left p {
        font-size: 1.2rem;
        height: 6rem;
        font-weight: 400;
        line-height: 1.5rem;
        margin-bottom: 1.2rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.8;
    }

    .articles-center-left-img {
        display: flex;
        align-items: center;
    }

    .articles-center-left-img img {
        width: 1.6rem;
        height: 1.6rem;
        display: block;
        margin-left: 0.4rem;
    }

    .articles-center-left-img span {
        font-size: 1.2rem;
        font-weight: 400;
        opacity: 0.6;
    }

    .articles-center-right {
        display: block;
    }

    .articles-center-for {
        display: flex;
        width: 34.3rem;
        height: 14.2rem;
        flex-direction: column;
        margin-top: 1.6rem;
    }

    .articles-center-for-time {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .articles-center-for-time span {
        color: #F16522;
        font-size: 1rem;
        margin-bottom: 0;
        font-weight: 400;
    }

    .articles-center-for-time span:nth-child(2) {
        font-size: 1rem;
        font-weight: 400;
    }

    .articles-center-for-right {
        margin-top: 1.2rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .articles-center-for-right-title {
        color: #05173C;
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 1.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .articles-center-for :hover .articles-center-for-right-title {
        color: #F16522;
    }

    .articles-center-for-right p {
        line-height: 1.5rem;
        font-size: 1.2rem;
        color: #666666;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .articles-center-for-right-button {
        padding: 0.4rem 1rem;
        background-color: #05173C;
        color: #fff;
        font-size: 1rem;
        width: 11.9rem;
        border-radius: 10rem;
    }


    .articles-center-left:nth-child(2) .articles-center-left-title,
    .articles-center-for-right-button {
        min-width: 3.2rem;
        padding: 0.25rem 0.5rem;
    }
}
/* ========== 桌面端 ========== */
/* 桌面 */
.articles-center-left .articles-center-left-title,
.articles-center-for-right-button {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0.6rem 0.8rem !important;   /* ≈ Innovative Album 间距 */
    height: 2.6rem !important;
    line-height: 1 !important;
    font-size: 1.4rem !important;
    border-radius: 1rem !important;
    white-space: nowrap;
}
.articles-center-left:nth-child(2) .articles-center-left-title,
.articles-center-for-right-button {
    background-color: #05173C !important;
    color: #fff !important;
}