.article {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%
}

.article img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.article .desc-container {
    background-color: #f1f2f5;
    padding: 8px 10px
}

.article p {
    /*color: #036;*/
    font-size: 22px;
    line-height: 28px;
    /*text-align: center;*/
    width: 100%
}

@media (max-width: 767px) {
    .article {
        margin-bottom:0;
        width: calc(50% - 6px)
    }

    .article p {
        line-clamp: 3;
        -webkit-line-clamp: 3;
        font-size: 13px;
        line-height: 16px;
        padding: 0;
        text-align: left
    }
}

a {
    color: inherit;
    text-decoration: inherit
}

.home {
    margin: 20px auto 60px;
    max-width: 1220px;
    min-height: calc(100vh - 141px)
}

.home .recommend1 .top-com {
    display: flex;
    justify-content: space-between
}

.home .recommend1 .top-com .block1 {
    width: 380px
}

.home .recommend1 .top-com .block1 img {
    aspect-ratio: 380/217;
    width: 100%
}

.home .recommend1 .top-com .block2 {
    height: 100%;
    width: 790px
}

.home .recommend1 .top-com .block2 img {
    aspect-ratio: 895/457;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.home .recommend1 .top-com .block2 p {
    color: #036;
    font-size: 34px;
    margin-top: 20px;
    width: 100%
}

.home .recommend1 .bottom-com {
    display: flex;
    justify-content: space-between
}

.home .recommend1 .bottom-com .block3 {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    width: 670px
}

.home .recommend1 .bottom-com .block3 img {
    aspect-ratio: 670/382;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.home .recommend1 .bottom-com .block3 p {
    background-color: #e8e9ec;
    color: #036;
    font-size: 34px;
    height: 180px;
    padding: 20px 0 0 20px;
    transform: translateY(-20px);
    width: calc(100% - 70px)
}

.home .recommend1 .bottom-com .block4 {
    display: flex;
    flex-direction: column;
    width: 500px
}

.home .recommend1 .bottom-com .block4 a {
    display: flex;
    justify-content: flex-start
}

.home .recommend1 .bottom-com .block4 a img {
    height: 140px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 140px
}

.home .recommend1 .bottom-com .block4 a p {
    color: #036;
    font-size: 22px;
    line-height: 28px;
    margin-left: 10px;
    /*width: calc(100% - 150px)*/
}

.home .recommend1 .bottom-com .block4 a:first-child {
    padding-bottom: 30px
}

.home .recommend1 .bottom-com .block4 a:nth-child(2) {
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    padding: 30px 0
}

.home .recommend1 .bottom-com .block4 a:last-child {
    padding-top: 30px
}

.home .recommend2 .article-list {
    grid-gap: 10px 30px;
    display: grid;
    grid-template-columns: repeat(3,calc(33.33333% - 20px))
}

.home .recommend2 .article-list .article {
    margin-bottom: 0
}

.home .recommend2 .article-list .article img {
    aspect-ratio: 386/214;
    -o-object-fit: cover;
    object-fit: cover
}

.home .recommend2 .article-list .article .desc-container {
    padding: 15px 20px
}

.home .recommend2 .article-list .article p {
    color: #036;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    text-align: left
}

.home .recommend2 .article-list .article:nth-child(2) {
    grid-row: span 2
}

.home .recommend2 .article-list .article:nth-child(2) img {
    height: 480px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 386px
}

.home .recommend2 .article-list .article:nth-child(2) .desc-container {
    height: calc(100% - 480px)
}

.home .recommend2 .article-list .article:nth-child(2) p {
    text-align: left
}

.home .recommend3 .article-list {
    grid-gap: 10px 30px;
    display: grid;
    grid-template-columns: repeat(3,calc(33.33333% - 20px))
}

.home .recommend3 .article-list .article:first-child {
    display: flex;
    grid-column: span 3
}

.home .recommend3 .article-list .article:first-child img {
    height: 444px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 790px
}

.home .recommend3 .article-list .article:first-child .desc-container {
    background-color: #fff;
    width: calc(100% - 818px)
}

.home .recommend3 .article-list .article:first-child p {
    background-color: #fff;
    display: block;
    font-size: 48px;
    font-weight: 900;
    line-height: 60px;
    margin-left: 28px
}

.home .recommend3 .article-list .article {
    margin-bottom: 0
}

.home .recommend3 .article-list .article img {
    height: 214px
}

.home .recommend3 .article-list .article .desc-container {
    padding: 15px 20px
}

.home .recommend3 .article-list .article p {
    color: #036;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    max-height: none;
    text-align: left
}

.home .h2-title {
    border-top: 1px solid gray;
    color: #036!important;
    font-size: 46px;
    font-weight: 900;
    height: 70px;
    line-height: 68px;
    margin-bottom: 30px;
    margin-top: 50px;
    position: relative;
    width: 100%
}

.home .h2-title:before {
    background-color: orange;
    content: "";
    display: block;
    height: 10px;
    position: absolute;
    top: -15%;
    width: 7%;
    z-index: -1
}

@media (max-width: 1220px) {
    .home {
        margin-bottom:0;
        padding: 0 15px
    }
}

@media (max-width: 768px) {
    .home {
        padding:0 10px
    }

    .home .recommend1 .top-com {
        display: flex;
        flex-direction: column-reverse
    }

    .home .recommend1 .top-com .block1 {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        width: 100%
    }

    .home .recommend1 .top-com .block2 {
        height: auto;
        width: 100%
    }

    .home .recommend1 .top-com .block2 img {
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .home .recommend1 .top-com .block2 p {
        font-size: 18px;
        line-height: 22px;
        margin-top: 10px;
        width: 100%
    }

    .home .recommend1 .bottom-com {
        flex-direction: column;
        justify-content: space-between;
        margin-top: 12px
    }

    .home .recommend1 .bottom-com .block3 {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        width: 100%
    }

    .home .recommend1 .bottom-com .block3 img {
        height: 235px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .home .recommend1 .bottom-com .block3 p {
        background-color: #faebd7;
        font-size: 18px;
        height: auto;
        line-height: 22px;
        padding: 10px;
        transform: translateY(-50%);
        width: calc(100% - 50px)
    }

    .home .recommend1 .bottom-com .block4 {
        display: flex;
        flex-direction: column;
        width: 100%
    }

    .home .recommend1 .bottom-com .block4 a {
        display: flex;
        justify-content: flex-start
    }

    .home .recommend1 .bottom-com .block4 a img {
        height: 70px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 70px
    }

    .home .recommend1 .bottom-com .block4 a p {
        font-size: 13px;
        line-height: 16px;
        margin-left: 15px;
        width: calc(100% - 85px)
    }

    .home .recommend2 .article-list {
        grid-gap: 10px 10px;
        display: grid;
        grid-template-columns: repeat(2,50%);
        padding-right: 10px
    }

    .home .recommend2 .article-list .article {
        margin-bottom: 0;
        width: 100%
    }

    .home .recommend2 .article-list .article img {
        height: auto;
        height: 100px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .home .recommend2 .article-list .article .desc-container {
        padding: 10px
    }

    .home .recommend2 .article-list .article p {
        background-color: #e8e9ec;
        color: #036;
        font-size: 13px;
        font-weight: 900;
        line-height: 16px;
        max-height: none;
        text-align: left
    }

    .home .recommend2 .article-list .article:nth-child(2) {
        grid-row: span 1
    }

    .home .recommend2 .article-list .article:nth-child(2) img {
        height: auto;
        width: 100%
    }

    .home .recommend2 .article-list .article:nth-child(2) .desc-container {
        height: auto
    }

    .home .recommend2 .article-list .article:first-child {
        grid-column: span 2
    }

    .home .recommend2 .article-list .article:first-child img {
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .home .recommend2 .article-list .article:first-child .desc-container {
        height: auto
    }

    .home .recommend2 .article-list .article:first-child p {
        font-size: 18px;
        text-align: left
    }

    .home .recommend3 {
        margin-bottom: 20px
    }

    .home .recommend3 .article-list {
        grid-gap: 10px 10px;
        display: grid;
        grid-template-columns: repeat(2,50%);
        padding-right: 10px
    }

    .home .recommend3 .article-list .article:first-child {
        flex-direction: column;
        grid-column: span 2
    }

    .home .recommend3 .article-list .article:first-child img {
        height: 235px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .home .recommend3 .article-list .article:first-child .desc-container {
        width: 100%
    }

    .home .recommend3 .article-list .article:first-child p {
        background-color: #fff;
        font-size: 20px;
        line-height: 22px;
        margin-left: 0
    }

    .home .recommend3 .article-list .article {
        margin-bottom: 0;
        width: 100%
    }

    .home .recommend3 .article-list .article img {
        height: 100px;
        width: 100%
    }

    .home .recommend3 .article-list .article .desc-container {
        padding: 10px
    }

    .home .recommend3 .article-list .article p {
        background-color: #e8e9ec;
        color: #036;
        font-size: 13px;
        font-weight: 900;
        line-height: 16px;
        max-height: none;
        text-align: left
    }

    .home .h2-title {
        border-top: 1px solid gray;
        font-size: 22px;
        height: auto;
        line-height: 28px;
        margin-bottom: 10px;
        margin-top: 2rem;
        width: 100%
    }

    .home .h2-title:before {
        background-color: #f3b105;
        content: "";
        display: block;
        height: 7px;
        position: absolute;
        top: -7px;
        width: 70px;
        z-index: -1
    }
}