:root{
    --white: #ffffff;
    --white50: #ffffff50;
    --white80: #ffffff80;
    --blue: #3874FF;
    --blue05: #3874FF05;
    --blue06: #3874FF06;
    --blue08: #3874FF08;
    --blue10: #3874FF10;
    --blue12: #3874FF12;
    --blue15: #3874FF15;
    --blue16: #3874FF16;
    --blue19: #3874FF19;
    --blue20: #3874FF20;
    --blue25: #3874FF25;
    --blue30: #3874FF30;
    --blue40: #3874FF40;
    --blue44: #3874FF44;
    --blue50: #3874FF50;
    --blue70: #3874FF70;
    --black: #172B4D;
    --black05: #172B4D05;
    --black10: #172B4D10;
    --black15: #172B4D15;
    --black30: #172B4D30;
    --black40: #172B4D40;
    --black55: #172B4D55;
    --black50: #172B4D50;
    --black60: #172B4D60;
    --black70: #172B4D70;
    --black80: #172B4D80;
    --black90: #172B4D90;
    --opacity00: rgba(0,0,0,0);
    --red: #F12C01;
    --red08: #F12C0108;
    --red15: #F12C0115;
    --red30: #F12C0130;
    --red60: #F12C0160;
    --bright-green: #03CF5D;
    --green: #007935;
    --gray: #B1B8C7;
    --bright-gray: rgba(56, 116, 255, 0.15);
    --x-size : 812px;
    --s-size : 360px;
    --base-shadow: 0 2px 6px 0 #B1B8C743;
    --drop-shadow: 0 4px 12px 0 #B1BBC760;

    --blue : #3874FF;
    --gray : #B1B8C7;
    --blue-dark : #172B4D;
    --black : #282828;
    --pale-gray : #F3F4F7; /*Background*/
    --blue-lighter : #EFF4FF; /*Background*/
    --Blue-100 :#F4F7FB;
    --Blue-200 :#EFF4FF;
    --Blue-300 :#E1EAFF;
    --Blue-400 :#AFC7FF;
    --Blue-500 :#88ACFF;
    --Blue-600 :#5689FF;
    --Blue-700 :#3874FF;
    --Blue-800 :#2A5BCD;
    --gray-100 :#F7F8F9;
    --gray-200 :#EFF1F4;
    --gray-300 :#E8EAEE;
    --gray-400 :#E0E3E9;
    --gray-500 :#D8DBE3;
    --gray-600 :#C1C6D2;
    --gray-700 :#8B95A6;
    --gray-800 :#5D6B82;
    --gray-900 :#455571;
    --gray-warm :#D9D9D9;
    --orange-red :#ED5550;
    --red-dark :#C22E29;
    --green :#37AB00;
    --red :#F12C01;
    --red-light :#FDE0D9;
    --neon-green :#05CA01;
    --green-light :#CFF6E0;
    --green-dark :#007935;
    --purple :#6038FF;
    --purple-light :#E9E1FF;
    --yellow :#EE9D00;
    --yellow-light :#F5E7DA;
    --gradient :(113deg, #3874FF, #3CC4FF);
    --yellow-green :#78CD50;

}

/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: 'Pretendard';
    vertical-align: baseline;
    font-style: normal;
    text-decoration: none;
}
*{
    font-family: 'Pretendard';
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: darkgray lightgray; /* Firefox: thumb and track color */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    color: var(--black);
    font-weight: 600;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
*::-webkit-scrollbar {
    width: 10px;
    background-color: rgba(210, 212, 220, 0);
}
*::-webkit-scrollbar-thumb {
    background-color: #C1CBE0;
    width: 8px;
    height: 8px;
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid transparent;
}
*::-webkit-scrollbar-track {
    background-color: lightgray;
}
.none{
    display: none !important;
}

main,
aside,
nav{
    margin: auto;
}
@media screen and (min-width: 812px) {
    main,aside,nav{
        width: var(--x-size);
    }
}
@media screen and (min-width: 360px ) and (max-width: 812px) {
    aside,nav{
        width: var(--s-size);
    }

}
@media screen  and (max-width: 360px) {
    aside,nav{
        width: 100%;
    }
  
}
.hover-1{
    border: 1px solid var(--white);
}
.hover-1:hover{
    transition: transform 0.2s;
    transform: translateY(-2px);
    background: #B1B8C717;
    border: 1px solid var(--black30);
}

.hover-2:hover{
    transition: transform 0.2s;
    transform: translateY(-2px);
}


.font-hover-1:hover{
    color: #172B4D;
}

.button-hover:hover{
    box-shadow: 0px 0px 0px 5px var(--blue20);
}
.rotate-box{
    animation: rotate 1s infinite;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.buttons-primary{
    background: var(--blue);
    border-radius: 8px;
    color: var(--white);
}
.buttons-primary:disabled{
    background: var(--gray-200);
    color: var(--gray-700);
}
.buttons-primary:hover{
    background: var(--blue-800);
}
.buttons-primary:active{
    background: var(--blue-700);
}

.button-secondary{
    background: var(--blue);
    border-radius: 8px;
    color: var(--white);
}
.button-secondary:hover{
    border: 5px solid var(--blue15);
}
.button-secondary:active{
    background: var(--blue-700);
}

.buttons-shadow{
    background: var(--white);
    color: var(--black);
}
.buttons-shadow:disabled{
    background: var(--gray-200);
    color: var(--gray-700);
}
.buttons-shadow:hover{
    box-shadow: var(--drop-shadow);
}
.buttons-shadow:active{
    background: var(--gray-200);
}

.h1-headline {
    font-weight: 800;
    font-size: 55px;
    line-height: 66px;
}
.h2-headline {
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
}
.h3-headline {
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
}
.h4-headline {
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
}
.h5-sub-headline {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
}
.h6-sub-headline {
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
}
.body-large {
    font-weight: 600;
    font-size: 15px;
    line-height: 19px;
}
.body1-medium {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
}
.body2-medium {
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
}
.body-small {
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
}