:root {
    --color-primary: #1E3083; /* 메인 색상 */
    --color-secondary: #3f58c5; /* 보조 색상 */
    --colo-sub-text: #4EA0FF; 
    --color-text: #333; /* 기본 텍스트 색상 */
    --color-text-light: #858484; /* 연한 텍스트 색상 */
    --color-background: #f0f0f0; /* 기본 배경색 */
    --color-background-dark: #2e3b4e; /* 어두운 배경색 */
    --color-border: #E1E1E1; /* 테두리 색상 */
    --color-white: #fff; /* 흰색 */
    --color-black: #000; /* 검정색 */
    
}
body{
    font-family: 'Noto Sans KR', sans-serif;
  
    color: var(--color-text);
   
   
}

.position-relative{
    position: relative !important;
}
.position-absolute{
    position: absolute !important;
}
.position-fixed{
    position: fixed !important;
}
.top-0{
    top: 0 !important;
}
.bottom-0{
    bottom: 0 !important;
}
.start-0{
    left: 0 !important;
}
.end-0{
    right: 0 !important;
}

.container{
    max-width: 1280px;
    margin: 0 auto;
}
.overflow_hidden{
    overflow: hidden;
}
.bg-white{
    background-color: #fff !important;
}
.position-relative{
    position: relative !important;
}
.d-none{
    display: none !important;
}
.d-flex{
    display: flex !important;
}
.flex-column{
    flex-direction: column !important;
}
.justify-content-center{
    justify-content: center !important;
}
.align-items-center{
    align-items: center !important;
}
.w-100{
    width: 100% !important;
}
.h-100{
    height: 100% !important;
}
.order-1{
    order: 1 !important;
}
.order-2{
    order: 2 !important;
}
.order-3{
    order: 3 !important;
}
.flex-grow-1{
    flex-grow: 1 !important;
}
.bg-light{
    background-color: var(--color-background) !important;
}
.bar{
    width: 100%;
    height: 2px;
    background-color: var(--color-background-dark);    
}
.gap-1{
    gap: 8px !important;
}
.gap-2{
    gap: 12px !important;
}
.gap-3{
    gap: 16px !important;
}
.gap-4{
    gap: 24px !important;
}