.rl-header {
    padding: 24px 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 24px;
    background-color: var(--c-w);
    .start {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 36px;
        .logo {
            display: flex;
            align-items: center;
            gap: 16px;
            img {
                height: 42px;
            }
            h1 {
                font-size: 36px;
                font-family: p500;
                letter-spacing: 1.5px;
                span {
                    &.buddhist {
                        color: var(--c-mj);
                    }
                    &.social {
                        color: var(--c-b-2);
                    }
                }
            }
        }
        .menu {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 28px;
            .route {
                font-family: p300;
                font-size: 18px;
                color: var(--c-b-1);
                text-decoration: none;
                position: relative;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 8px;
                &.active {
                    font-family: p500;
                    color: var(--c-mj);
                }
                &:not(.active):hover {
                    color: var(--c-mj);
                }
                .dropdown {
                    position: absolute;
                    z-index: 9;
                    left: 0;
                    bottom: 0;
                    width: max-content;
                    transform: translateY(100%);
                    box-sizing: border-box;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    background-color: var(--c-w);
                    box-shadow: 3px 3px 5px rgba(var(--c-bx), .05);
                    opacity: 0;
                    pointer-events: none;
                    max-height: 0;
                    padding: 0;
                    &.active {
                        opacity: 1;
                        pointer-events: visible;
                        max-height: 999px;
                        padding: 24px;
                    }
                }
                i {
                    &.active {
                        transform: rotate(180deg);
                        -webkit-transform: rotate(180deg);
                    }
                }
            }
        }
    }
    .end {
        button.download {
            color: var(--c-w);
            font-size: 18px;
            font-family: p300;
            background-color: var(--c-mj);
            border: none;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            padding: 8px 24px;
            box-sizing: border-box;
            text-transform: capitalize;
            &:hover {
                background: rgba(var(--c-mjx), .8);
            }
        }
    }
}

@media screen and (min-width: 0px) {
    .rl-header {
        display: none;
    }
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
    .rl-header {
        display: flex;
    }
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1400px) {
}