:root {
    --c-w: #fff;
    --c-wx: 255, 255, 255;
    --c-w-1: #F6F6F6;
    --c-w-2: #E9E9ED;
    --c-b: #000;
    --c-bx: 0, 0, 0;
    --c-b-1: #011632;
    --c-b-2: #474E61;
    --c-b-3: #AFAFAF;
    --c-b-4: #505050;
    --c-b-5: #8E8E8E;
    --c-b-6: #D9D9D9;
    --c-b-7: #797979;
    --c-mj: #C99A10;
    --c-mjx: 201, 154, 16;
    --c-mj-1: #BA9E43;
    --c-mj-1x: 186, 158, 67;
    --c-mj-2: #C99A10;
    --c-mj-3: #EABF5E;
}

@font-face {
    font-family: p100;
    src: url(../assets/fonts/prompt/Prompt-Thin.ttf);
}
@font-face {
    font-family: p100i;
    src: url(../assets/fonts/prompt/Prompt-ThinItalic.ttf);
}
@font-face {
    font-family: p200;
    src: url(../assets/fonts/prompt/Prompt-ExtraLight.ttf);
}
@font-face {
    font-family: p200i;
    src: url(../assets/fonts/prompt/Prompt-ExtraLightItalic.ttf);
}
@font-face {
    font-family: p300;
    src: url(../assets/fonts/prompt/Prompt-Light.ttf);
}
@font-face {
    font-family: p300i;
    src: url(../assets/fonts/prompt/Prompt-LightItalic.ttf);
}
@font-face {
    font-family: p400;
    src: url(../assets/fonts/prompt/Prompt-Regular.ttf);
}
@font-face {
    font-family: p400i;
    src: url(../assets/fonts/prompt/Prompt-Italic.ttf);
}
@font-face {
    font-family: p500;
    src: url(../assets/fonts/prompt/Prompt-Medium.ttf);
}
@font-face {
    font-family: p500i;
    src: url(../assets/fonts/prompt/Prompt-MediumItalic.ttf);
}
@font-face {
    font-family: p600;
    src: url(../assets/fonts/prompt/Prompt-SemiBold.ttf);
}
@font-face {
    font-family: p600i;
    src: url(../assets/fonts/prompt/Prompt-SemiBoldItalic.ttf);
}
@font-face {
    font-family: p700;
    src: url(../assets/fonts/prompt/Prompt-Bold.ttf);
}
@font-face {
    font-family: p700i;
    src: url(../assets/fonts/prompt/Prompt-BoldItalic.ttf);
}
@font-face {
    font-family: p800;
    src: url(../assets/fonts/prompt/Prompt-ExtraBold.ttf);
}
@font-face {
    font-family: p800i;
    src: url(../assets/fonts/prompt/Prompt-ExtraBoldItalic.ttf);
}
@font-face {
    font-family: p900;
    src: url(../assets/fonts/prompt/Prompt-Black.ttf);
}
@font-face {
    font-family: p900i;
    src: url(../assets/fonts/prompt/Prompt-BlackItalic.ttf);
}

h1, h2, h3, h4, h5, h6, p, hr {
    margin: 0;
    font-family: p400;
    color: var(--c-b);
}
button {
    &:not(:disabled):hover {
        cursor: pointer;
    }
}
img {
    user-select: none;
    -webkit-user-drag: none;
}

.cp {
    cursor: pointer;
}
.udn {
    -webkit-user-drag: none;
}
.usn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.t25s {
    transition: .12s;
    -webkit-transition: .12s;
    &:hover {
        transition: .25s;
        -webkit-transition: .25s;
    }
}

.m0 {
    margin: 0;
}
.mt8 {
    margin-top: 8px;
}
.mt12 {
    margin-top: 12px;
}
.mt16 {
    margin-top: 16px;
}
.mt24 {
    margin-top: 24px;
}
.mt48 {
    margin-top: 48px;
}
.mb8 {
    margin-bottom: 8px;
}
.mb12 {
    margin-bottom: 12px;
}
.mb16 {
    margin-bottom: 16px;
}
.mb24 {
    margin-bottom: 24px;
}
.ml8 {
    margin-left: 8px;
}
.mr8 {
    margin-right: 8px;
}
.p0 {
    padding: 0;
}
.p8 {
    padding: 8px;
}
.p12 {
    padding: 12px;
}
.p16 {
    padding: 16px;
}
.p24 {
    padding: 24px;
}
.g8 {
    gap: 8px;
}
.g12 {
    gap: 12px;
}
.g16 {
    gap: 16px;
}
.g24 {
    gap: 24px;
}

.df {
    display: flex;
}
.jcc {
    justify-content: center;
}
.jce {
    justify-content: flex-end;
}
.jcsb {
    justify-content: space-between;
}
.aic {
    align-items: center;
}
.fww {
    flex-wrap: wrap;
}
.fdc {
    flex-direction: column;
}
.tac {
    text-align: center !important;
}
.ttc {
    text-transform: capitalize;
}
.f1 {
    flex: 1;
}
.bsbb {
    box-sizing: border-box;
}
.w100 {
    width: 100% !important;
}
.wfc {
    width: fit-content;
}

.rl-area {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .rl-obj {
        position: relative;
        z-index: 1;
    }
    .rl-content {
        flex: 1;
        overflow: auto;
        background-color: var(--c-w);
        .rlb {
            display: flex;
            flex-direction: column;
            gap: 42px;
            position: relative;
            overflow: hidden;
            i.bg-arrow {
                position: absolute;
                z-index: 0;
                bottom: -50%;
                left: 0;
                font-size: 500px;
                color: rgba(var(--c-mjx), .1);
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                pointer-events: none;
            }
        }
        .area-footer {
            background: linear-gradient(to bottom, var(--c-mj-1), var(--c-mj));
        }
    }
    .rlp {
        box-sizing: border-box;
    }
}

@media screen and (min-width: 0px) {
    .rl-area .rl-content .rlb i.bg-arrow {
        font-size: 600px;
        bottom: 0;
        left: 50%;
        transform: rotate(-45deg) translateX(-66%);
        -webkit-transform: rotate(-45deg) translateX(-66%);
    }
    .rl-area .area-header, .rl-area .rl-content .area-footer, .rl-area .rlp .rl-obj {
        padding: 0;
        &.ct {
            padding: 0 24px;
        }
    }
    .area-header, .area-footer {
        zoom: 1;
    }
}
@media screen and (min-width: 576px) {
    .rl-area .rl-content .rlb i.bg-arrow {
        font-size: 700px;
    }
}
@media screen and (min-width: 768px) {
    .rl-area .rl-content .rlb i.bg-arrow {
        font-size: 555px;
        bottom: -50%;
        left: 0;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
}
@media screen and (min-width: 992px) {
    .rl-area .area-header, .rl-area .rl-content .area-footer, .rl-area .rlp .rl-obj {
        padding: 0 10px;
        &.ct {
            padding: 0 20px;
        }
    }
    .area-header {
        zoom: .7;
    }
    .area-footer {
        zoom: .9;
    }
}
@media screen and (min-width: 1200px) {
    .rl-area .area-header, .rl-area .rl-content .area-footer, .rl-area .rlp .rl-obj {
        padding: 0 50px;
        &.ct {
            padding: 0 100px;
        }
    }
    .area-header {
        zoom: .8;
    }
    .area-footer {
        zoom: 1;
    }
    .rl-area .rl-content .rlb i.bg-arrow {
        font-size: 600px;
        left: 10%;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
}
@media screen and (min-width: 1400px) {
    .rl-area .area-header, .rl-area .rl-content .area-footer, .rl-area .rlp .rl-obj {
        padding: 0;
    }
    .area-header {
        zoom: 1;
    }
}
@media screen and (min-width: 1600px) {
    .rl-area .area-header, .rl-area .rl-content .area-footer, .rl-area .rlp .rl-obj {
        padding: 0 100px;
        &.ct {
            padding: 0 100px;
        }
    }
    .rl-area .rl-content .rlb i.bg-arrow {
        font-size: 700px;
        left: 16%;
    }
}
@media screen and (min-width: 1800px) {
    .rl-area .area-header, .rl-area .rl-content .area-footer, .rl-area .rlp .rl-obj {
        padding: 0 200px;
        &.ct {
            padding: 0 200px;
        }
    }
}

@media screen and (min-width: 0px) {
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1400px) {
}