#manset, #manset .r1, #manset .r2 {
    display: flex
}

#manset .r1 {
    width: 44%;
    padding-inline-end: 24px;
    border-inline-end: 1px solid var(--border-color4)
}

.r1 article.l1 .tt {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700
}

.r1 article.l2 .tt {
    font-size: 20px;
    line-height: 28px
}

article.l1 .bt {
    margin-top: 10px
}

.r2 article.l1, .r2 article.l2 {
    padding-bottom: 30px
}

    .r2 article.l2:after, article.l1:after {
        content: '';
        width: 100%;
        height: 1px;
        background-color: var(--border-color4);
        position: absolute;
        bottom: 0;
        inset-inline-start: 0
    }

#manset .r2 {
    width: 56%;
    flex-wrap: wrap;
    align-content: start;
    padding-inline-start: 24px
}

    #manset .r2 article {
        width: calc(50% - 15px)
    }

.r2 article .tn {
    width: 100%;
    aspect-ratio: 16/9
}

@media (min-width:901px) {
    #manset .r1 {
        flex-direction: column;
        gap: 30px
    }

    #manset .r2 {
        flex-direction: row;
        gap: 30px
    }

    .r1 article.l2 {
        display: flex;
        flex-direction: row
    }

        .r1 article.l2 img {
            width: 100%;
            height: auto;
            aspect-ratio: 6/4
        }

        .r1 article.l2 .tn {
            width: 45%
        }

    .r1 article.l1 {
        padding-bottom: 30px
    }

        .r1 article.l1 .tn {
            width: 100%;
            aspect-ratio: 16/9
        }

    .r1 article.l2 .bc {
        width: 65%;
        padding-inline-start: 20px
    }

    .r1 article.l2 .sp {
        max-height: 110px;
        -webkit-line-clamp: 5
    }

    div.tl.dh {
        padding-top: 0;
        padding-inline-end: 20px;
        padding-bottom: 0;
        padding-inline-start: 40px
    }

    a.tumu {
        font-size: 11px
    }

    div.tl:not(.dh) {
        padding-inline-start: 40px
    }
}

@media (max-width:901px) {
    div.tl.dh {
        padding-top: 0;
        padding-inline-end: 15px;
        padding-bottom: 0;
        padding-inline-start: 20px
    }

    a.tumu {
        font-size: 10px
    }

    div.tl:not(.dh) {
        padding-inline-start: 20px;
    }
}

@media (min-width:768px) and (max-width:901px) {
    #manset {
        flex-direction: column;
        gap: 30px
    }

        #manset .r1, #manset .r2 {
            width: 100%;
            border: none;
            padding: 0;
            display: flex;
            flex-direction: row;
            column-gap: 20px;
            row-gap: 30px
        }

        #manset article:after {
            content: '';
            width: 100%;
            height: 1px;
            background-color: var(--border-color4);
            position: absolute;
            bottom: 0;
            inset-inline-start: 0
        }

        #manset .r2 article:nth-child(3):after, #manset .r2 article:nth-child(4):after {
            display: none
        }

        #manset article {
            padding-bottom: 30px;
            width: calc(50% - 10px)
        }

            #manset article .tt {
                font-size: 20px;
                line-height: 28px
            }
}

@media (max-width:768px) {
    #manset {
        flex-direction: column
    }

        #manset .r1 article, #manset .r2 article {
            width: 100%
        }

        #manset .r1, #manset .r2 {
            width: 100%;
            border: none;
            padding: 0;
            display: flex;
            flex-direction: column
        }

        #manset article:after {
            content: '';
            width: 100%;
            height: 1px;
            background-color: var(--border-color4);
            position: absolute;
            bottom: 0;
            inset-inline-start: 0
        }

        #manset article {
            padding-bottom: 30px
        }

        #manset .r2 article:last-child:after {
            display: none
        }

        #manset article .tt {
            font-size: 20px;
            line-height: 28px
        }
}

#ea {
    margin-bottom: 60px
}