:root {
    /* font */
    --header-font: 1.8rem;
    --slide-font : 5.6rem;
    --title-font-xxs : 3rem;
    --title-font-xs : 3.4rem;
    --title-font-sm : 4.0rem;
    --title-font-md : 4.2rem;
    --title-font-lg : 4.6rem;
    --title-font-xl : 5rem;
    --font-size-xs: 1.4rem;
    --font-size-sm: 1.6rem;
    --font-size-md: 1.8rem;
    --font-size-lg: 2.0rem;
    --font-size-xl: 2.2rem;
    --font-size-xxl: 2.4rem;

    /* border */
    --border-radius-xl: 3rem;
    --border-radius-lg: 2rem;
    --border-radius-md: 1rem;
    --border-radius-sm: .6rem;

    /* color */
    --color-primary: #047EE2;
    --color-secondary: #002B4A;
    --color-bg: #EEF7FF;
    --color-point01: #047EE2;
    --color-point02: #FFA81C;
    --color-opacity: #;

    --color-gray90: #1d1d1d;
    --color-gray80: #2d2d2d;
    --color-gray70: #444444;
    --color-gray60: #717171;
    --color-gray50: #8e8e8e;
    --color-gray40: #c6c6c6;
    --color-gray30: #d8d8d8;
    --color-gray20: #e4e4e4;
    --color-gray10: #f0f0f0;
    --color-gray05: #f9f9f9;

    /* input */
    --input-height-xs: 30px;
    --input-height-sm: 30px;
    --input-height-md: 36px;
    --input-height-lg: 48px;

    --input-padding-xs: 6px 12px;
    --input-padding-sm: 6px 12px;
    --input-padding-md: 8px 12px;
    --input-padding-lg: 10px 14px;

    --input-font-size-xs: 13px;
    --input-font-size-sm: 14px;
    --input-font-size-md: 15px;
    --input-font-size-lg: 16px;

    --input-border-radius: 4px;
    --input-border-color: #c6cbd1;
    --input-bg-color: #fff;
    --input-focus-border-color: #005fcc;
    --input-disabled-bg: #f5f5f5;

    /* button */
    --btn-primary-bg: #004faf;
    --btn-primary-color: #fff;
    --btn-primary-hover-bg: #00408f;
    --btn-primary-disabled-bg: #e0e0e0;
    --btn-primary-disabled-color: #a0a0a0;

    --btn-secondary-bg: #f5f5f5;
    --btn-secondary-color: #333;
    --btn-secondary-hover-bg: #e0e0e0;

    --btn-height-xs: 32px;
    --btn-height-sm: 36px;
    --btn-height-md: 38px;
    --btn-height-lg: 42px;

    --btn-padding-xs: 0 10px;
    --btn-padding-sm: 0 12px;
    --btn-padding-md: 0 16px;
    --btn-padding-lg: 0 20px;

    --btn-font-xs: 14px;
    --btn-font-sm: 15px;
    --btn-font-md: 16px;
    --btn-font-lg: 18px;

    --btn-radius-xs: 3px;
    --btn-radius-sm: 4px;
    --btn-radius-md: 6px;
    --btn-radius-lg: 8px;

    /* 기타 */
    --btn-gap: 8px;
    --btn-transition: all 0.2s ease;
    --btn-icon-size-sm: 20px;
    --btn-icon-size-md: 24px;
    --btn-icon-size-lg: 26px;
}

@media (max-width:1024px){
    :root{
        --slide-font : 4.8rem;
        --title-font-xl : 4.8rem;
        --title-font-lg : 4.4rem;
        --title-font-md : 4.0rem;
        --title-font-sm : 3.8rem;
        --font-size-xs: 1.2rem;
        --font-size-sm: 1.4rem;
        --font-size-md: 1.6rem;
        --font-size-lg: 1.8rem;
        --font-size-xl: 2rem;
        --font-size-xxl: 2.2rem;
        --border-radius-xl: 2rem;
        --border-radius-lg: 1rem;
        --border-radius-md: .6rem;
        --border-radius-sm: .4rem;
    }
}
@media (max-width:767px){
    :root{
        --slide-font : 3.8rem;
        --title-font-xl : 3.8rem;
        --title-font-lg : 4rem;
        --title-font-md : 3.6rem;
        --title-font-sm : 3rem;
        --title-font-xs : 2.8rem;
        --title-font-xxs : 2.6rem;
        --font-size-xs: 1.2rem;
        --font-size-sm: 1.4rem;
        --font-size-md: 1.6rem;
        --font-size-lg: 1.6rem;
        --font-size-xl: 1.8rem;
        --font-size-xxl: 2rem;
        --border-radius-xl: 1rem;
        --border-radius-lg: .6rem;
        --border-radius-md: .4rem;
        --border-radius-sm: .2rem;
    }
}