.rl-recommend {
    display: flex;
    flex-direction: column;
    gap: 64px;
    .rlr-default {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        gap: 64px;
        padding: 0 150px;
        box-sizing: border-box;
    }
    .rl-border-img {
        position: relative;
        min-width: 50%;
        aspect-ratio: 1 / 1;
        .rlbi-border, img.rlbi-img {
            position: absolute;
            width: 95%;
            height: 95%;
            border-radius: 16px;
            -webkit-border-radius: 16px;
        }
        .rlbi-border {
            top: 0;
            right: 0;
            background: linear-gradient(to bottom, var(--c-mj-1), var(--c-mj));
        }
        img.rlbi-img {
            z-index: 1;
            bottom: 0;
            left: 0;
            object-fit: cover;
            object-position: center;
            &.full {
                object-fit: none;
            }
        }
    }
    .rlr-objective {
        display: flex;
        flex-direction: column;
        gap: 64px;
        .rlro-part, .rlro-erase {
            display: grid;
        }
        &.header-center {
            h1, h3 {
                text-align: center;
            }
            h3 {
                font-size: 16px;
            }
        }
        .rlro-part {
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 50px;
            .rp-block {
                display: flex;
                flex-direction: column;
                gap: 24px;
                .rp-box {
                    border-radius: 16px;
                    -webkit-border-radius: 16px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 64px;
                    height: 64px;
                    background-color: var(--c-mj);
                    img {
                        height: 36px;
                    }
                }
                h4 {
                    font-size: 55px;
                    font-family: p700;
                    background: linear-gradient(to bottom, rgba(var(--c-mj-1x), .8), rgba(var(--c-mjx), .8));
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                    color: transparent;
                }
                h5 {
                    font-size: 26px;
                    font-family: p400;
                }
                h6 {
                    font-size: 16px;
                    font-family: p300;
                    color: var(--c-b-4);
                }
                button {
                    background-color: transparent;
                    border-radius: 28px;
                    -webkit-border-radius: 28px;
                    color: var(--c-mj);
                    font-size: 16px;
                    font-family: p400;
                    border: 1px solid var(--c-mj);
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 12px;
                    padding: 8px 24px;
                    width: fit-content;
                    &:not(:disabled):hover {
                        background-color: var(--c-mj-1);
                        color: var(--c-w);
                        i {
                            color: var(--c-w);
                        }
                    }
                }
            }
        }
        .rlro-erase {
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-gap: 24px;
            .re-block {
                display: flex;
                flex-direction: column;
                gap: 24px;
                img {
                    width: 100%;
                }
                h5 {
                    text-align: center;
                    font-family: p400;
                    font-size: 14px;
                }
            }
        }
    }
    .rlr-contact {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    h1 {
        font-size: 38px;
        font-family: p500;
    }
    h2 {
        font-size: 18px;
        font-family: p400;
        text-transform: capitalize;
        color: var(--c-mj);
    }
    h3 {
        font-size: 14px;
        font-family: p300;
    }
    p, i {
        font-size: 16px;
        font-family: p300;
        line-height: 32px;
        span {
            color: var(--c-b);
            font-family: p400;
        }
    }
    h3, p {
        color: var(--c-b-4);
    }
    i {
        color: var(--c-mj);
    }
    .rlr-top {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 64px;
        h1 {
            font-size: 32px;
        }
        .rlrt-block {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 50px;
            .rlrtb-box {
                display: flex;
                flex-direction: column;
                gap: 24px;
                .box {
                    display: flex;
                    justify-content: flex-start;
                }
                .box-icon {
                    background-color: var(--c-mj);
                    width: 64px;
                    height: 64px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 12px;
                    -webkit-border-radius: 12px;
                }
                h5 {
                    font-size: 18px;
                    font-family: p500;
                }
                h6 {
                    font-size: 14px;
                    font-family: p300;
                    color: var(--c-b-4);
                }
            }
        }
    }
    .rlr-mission, .rlr-bottom {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        background: url(../assets/images/inside_bg.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        flex-direction: column;
        gap: 42px;
        h1, h3 {
            text-align: center;
        }
        h1 {
            font-size: 32px;
        }
        h3 {
            font-size: 16px;
            color: var(--c-b);
        }
    }
    .rlr-mission {
        padding: 64px 360px;
        .rlrm-block {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 36px;
            .rlrmb-box {
                border-radius: 16px;
                -webkit-border-radius: 16px;
                background-color: var(--c-w);
                overflow: hidden;
                img {
                    width: 100%;
                    aspect-ratio: 1.5 / 1;
                    object-fit: cover;
                    object-position: center;
                }
                .box-body {
                    padding: 24px 16px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                }
                h5 {
                    font-size: 18px;
                    font-family: p400;
                }
                h6 {
                    font-size: 14px;
                    font-family: p300;
                }
                button {
                    width: fit-content;
                    padding: 5px 24px;
                    box-sizing: border-box;
                    color: var(--c-w);
                    font-size: 16px;
                    font-family: p300;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    border: none;
                    border-radius: 16px;
                    -webkit-border-radius: 16px;
                    background-color: var(--c-mj);
                    &:not(:disabled):hover {
                        background-color: var(--c-mj-3);
                    }
                    i {
                        color: var(--c-w);
                    }
                }
            }
        }
    }
    .rlr-bottom {
        padding: 42px;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        .rlrb-block {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-gap: 24px;
            .rlrbb-box {
                background: linear-gradient(45deg, var(--c-w), #FFD073);
                padding: 24px;
                box-sizing: border-box;
                border-radius: 24px;
                -webkit-border-radius: 24px;
                display: flex;
                flex-direction: column;
                gap: 16px;
                .rb-box {
                    background: linear-gradient(to left, var(--c-mj-2), var(--c-mj-3));
                    border-radius: 12px;
                    -webkit-border-radius: 12px;
                    width: 64px;
                    height: 64px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img {
                        height: 42px;
                    }
                }
                h5, h6 {
                    text-align: center;
                }
                h5 {
                    font-size: 18px;
                }
                h6 {
                    font-size: 14px;
                    color: var(--c-b-4);
                }
            }
        }
    }
}

@media screen and (min-width: 0px) {
    .rl-recommend {
        gap: 32px;
    }
    .rl-recommend .rlr-default {
        flex-direction: column;
        gap: 32px;
        padding: 0;
        zoom: .7;
    }
    .rl-recommend .rlr-default {
        h1, h2, h3 {
            zoom: .7;
        }
    }
    .rl-recommend .rl-border-img {
        min-width: 100%;
    }
    .rl-recommend .rlr-objective {
        gap: 32px;
    }
    .rl-recommend .rlr-objective .rlro-part, .rl-recommend .rlr-objective .rlro-erase {
        grid-template-columns: 1fr;
        zoom: .8;
        .re-block h5 {
            font-size: 18px;
        }
    }
    .rl-recommend .rlr-top .rlrt-block {
        grid-template-columns: 1fr;
    }
    .rl-recommend .rlr-top .rlrt-block .rlrtb-box .box {
        justify-content: center;
    }
    .rl-recommend .rlr-top .rlrt-block .rlrtb-box h5 {
        text-align: center;
    }
    .rl-recommend .rlr-bottom .rlrb-block {
        grid-template-columns: 1fr;
    }
    .rl-recommend .rlr-bottom {
        border-radius: 24px;
        -webkit-border-radius: 24px;
    }
    .rl-recommend .rlr-mission {
        padding: 16px;
        zoom: .6;
    }
    .rl-recommend .rlr-mission .rlrm-block {
        grid-template-columns: 1fr;
    }
}
@media screen and (min-width: 360px) {
    .rl-recommend .rlr-default {
        padding: 0 50px;
    }
    .rl-recommend .rlr-objective .rlro-part, .rl-recommend .rlr-objective .rlro-erase {
        grid-template-columns: 1fr 1fr;
    }
    .rl-recommend .rlr-mission {
        padding: 36px;
    }
}
@media screen and (min-width: 576px) {
    .rl-recommend .rlr-top .rlrt-block {
        grid-template-columns: 1fr 1fr;
    }
    .rl-recommend .rlr-bottom .rlrb-block {
        grid-template-columns: 1fr 1fr;
    }
    .rl-recommend .rlr-bottom {
        border-radius: 36px;
        -webkit-border-radius: 36px;
    }
    .rl-recommend .rlr-mission {
        padding: 64px 100px;
    }
    .rl-recommend .rlr-mission .rlrm-block {
        grid-template-columns: 1fr 1fr;
    }
    .rl-recommend .rlr-mission {
        zoom: .64;
    }
}
@media screen and (min-width: 768px) {
    .rl-recommend {
        gap: 42px;
    }
    .rl-recommend .rlr-default {
        flex-direction: row;
        padding: 0;
        zoom: .8;
    }
    .rl-recommend .rl-border-img {
        min-width: 50%;
    }
    .rl-recommend .rlr-objective {
        gap: 42px;
    }
    .rl-recommend .rlr-objective .rlro-part, .rl-recommend .rlr-objective .rlro-erase {
        zoom: .9;
    }
    .rl-recommend .rlr-top .rlrt-block .rlrtb-box .box {
        justify-content: flex-start;
    }
    .rl-recommend .rlr-top .rlrt-block .rlrtb-box h5 {
        text-align: start;
    }
    .rl-recommend .rlr-mission {
        zoom: .7;
    }
}
@media screen and (min-width: 992px) {
    .rl-recommend {
        gap: 64px;
    }
    .rl-recommend .rlr-default {
        gap: 50px;
        padding: 0;
        zoom: 1;
    }
    .rl-recommend .rlr-default {
        h1, h2, h3 {
            zoom: .8;
        }
    }
    .rl-recommend .rlr-objective {
        gap: 64px;
    }
    .rl-recommend .rlr-objective .rlro-part {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .rl-recommend .rlr-objective .rlro-erase {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        .re-block h5 {
            font-size: 14px;
        }
    }
    .rl-recommend .rlr-bottom .rlrb-block {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .rl-recommend .rlr-bottom {
        border-radius: 50px;
        -webkit-border-radius: 50px;
    }
    .rl-recommend .rlr-mission {
        padding: 64px 160px;
        zoom: .8;
    }
    .rl-recommend .rlr-mission .rlrm-block {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media screen and (min-width: 1200px) {
    .rl-recommend .rlr-default {
        h1, h2, h3 {
            zoom: 1;
        }
    }
    .rl-recommend .rlr-default {
        padding: 0 50px;
    }
    .rl-recommend .rlr-mission {
        zoom: 1;
    }
}
@media screen and (min-width: 1400px) {
    .rl-recommend .rlr-default {
        gap: 64px;
        padding: 0 150px;
    }
    .rl-recommend .rlr-objective .rlro-part, .rl-recommend .rlr-objective .rlro-erase {
        zoom: 1;
    }
    .rl-recommend .rlr-mission {
        padding: 64px 360px;
    }
}