@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* FONT FAMILY
font-family: 'Inter', sans-serif;
*/

.spartan {
    font-family: 'Spartan', sans-serif;
}
section * {
    font-family: 'Pretendard';
}
.inter {
    font-family: 'Inter', sans-serif !important;
}

section{
    padding: calc(100vw * (0/375)) calc(100vw * (30/375));
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.section1 {
    padding-top: calc(100vw * (34/375));
    .main_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .profile {
            font-size: calc(100vw * (18/375));
            font-weight: 600;
        }
        .profile_txt {
            color: #b1b3bd;
            font-size: calc(100vw * (13/375));
            font-weight: 400;
            margin-top: calc(100vw * (3/375));
        }
        .main_num {
            color: #292929;
            font-size: calc(100vw * (26/375));
            font-weight: 400;
            display: flex;
            align-items: center;
        }
        .main_cash {
            font-size: calc(100vw * (25/375));
            font-weight: 700;
        }
    }
    .main_btn_box {
        padding: calc(100vw * (20/375)) 0 calc(100vw * (14/375));
        border-radius: calc(100vw * (16/375));
        display: flex;
        margin-top: calc(100vw * (38/375));
        background-image: linear-gradient(135deg, #6631fb, #ffb580);
        background-size: 150% 150%;
        background-position: center;
        color: #FFF;
        font-size: calc(100vw * (14/375));
        font-weight: 500;
        animation: MoveGrad 4s linear infinite;
        .main_btn_mid {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: calc(100vw * (8/375));
        }
        .dash_right {
            border-right: 1px dashed rgba(255, 255, 255, 0.2);
        }
    }
    .main_btn_group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: calc(100vw * (32/375));
        font-size: calc(100vw * (13/375));
        color: #474758;
        font-weight: 600;
        .main_btn_sml {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(100vw * (9/375));
            .sml_btn_img {
                width: calc(100vw * (56/375));
                height: calc(100vw * (56/375));
                border: 2px solid #f0eff2;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: calc(100vw * (16/375));
            }
        }
    }
}

@keyframes MoveGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.section2 {
    margin-top: calc(100vw * (36/375));
    display: flex;
    flex-direction: column;
    gap: calc(100vw * (10/375));
    .verify_box {
        border-radius: calc(100vw * (16/375));
        background-color: #f8f8fc;
        padding: calc(100vw * (18/375)) calc(100vw * (23/375));
        display: flex;
        gap: calc(100vw * (15/375));
    }
    .no_verify_img {
        min-width: calc(100vw * (36/375));
        height: fit-content;
        padding: calc(100vw * (6/375));
        background-color: #fff;
        border-radius: calc(100vw * (10/375));
    }
    .verify_title {
        color: #000;
        font-size: calc(100vw * (15/375));
        font-weight: 700;
        line-height: calc(100vw * (19/375));
    }
    .verify_text {
        color: #474758;
        font-size: calc(100vw * (12/375));
        font-weight: 400;
        line-height: calc(100vw * (19/375));
        margin: calc(100vw * (7/375)) 0;
        .bold {
            font-weight: 600;
        }
        .p_bold {
            font-weight: 600;
            color: #9774ff;
        }
    }
    .verify_go {
        color: #ff9e59;
        font-size: calc(100vw * (12/375));
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: calc(100vw * (5/375));
    }
}

.section3 {
    margin-top: calc(100vw * (36/375));
    display: flex;
    flex-direction: column;
    gap: calc(100vw * (20/375));
    padding-bottom: calc(100vw * (100/375));
    .s3_title {
        font-size: calc(100vw * (17/375));
        font-weight: 600;
    }
    .s3_banner {
        border-radius: calc(100vw * (16/375));
        overflow: hidden;
    }
}

#footer {
    position: fixed;
    bottom: 2%;
    padding: 0 calc(100vw * (20/375));
    animation: brr 10s linear;
    .footer_inner {
        padding: calc(100vw * (14/375)) calc(100vw * (15/375)) calc(100vw * (14/375)) calc(100vw * (25/375));
        background: rgba(41, 41, 41, 0.94);
        border-radius: calc(100vw * (20/375));
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
        backdrop-filter: blur(10px);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .footer_pay {
        padding: calc(100vw * (11/375)) calc(100vw * (24/375));
        color: #fff;
        display: flex;
        align-items: center;
        gap: calc(100vw * (14/375));
        border-radius: calc(100vw * (11/375));
        background: linear-gradient(135deg, #7D43F2, #FFB580);
        background-size: 150% 150%;
        animation: MoveGrad 2s ease infinite;
    }
}

@keyframes brr {
    0%     {bottom: 2%;}
    2.5%   {bottom: 3%;}
    5%     {bottom: 2%;}
    7.5%   {bottom: 3%;}
    10%    {bottom: 2%;}
    100%   {bottom: 2%;}
}