:root {
    /* default color */
    --primary-blue: #001965;
    --primary-10: #001042;
    --primary-30: #002699;
    --primary-40: #0034D1;
    --primary-50: #154EF9;
    --primary-60: #5B82FB;
    --primary-70: #8AA7FF;
    --primary-80: #EBF0FF;
    --primary-90: #F5F7FF;

    --gray-60: #9CA0AA;
    --gray-70: #B5B8C0;
    --gray-80: #DEDFE3;
    --gray-90: #EEEFF1;

    /* status */
    --gray: #606061; /* type1 - 1)임시저장&수정, 2)미등록 .@@-unregistered */
    --gray-bg: #6060610a;
    --gray-bg-dark: #6060611a;
    --blue: #3A4090; /* type2 - 승인 대기 .@@-wait*/
    --blue-bg: #3A40900a;
    --blue-bg-dark: #3A40901a;
    --red: #C74E3C; /* type3 - 1)반려 .@@-reject, 2)비활성 .@@-inactive*/
    --red-bg: #c74e3c0a;
    --red-bg-dark: #c74e3c1a;
    --green: #579032; /* type4 - 1)승인완료 .@@-approval 2)등록 .@@-registered */
    --green-bg: #5790320a;
    --green-bg-dark: #5790321a;
    --yellow: #FAAD3A; /* type5 - EVENT 취소*/
    --yellow-bg: #FAAD3A0a;
    --yellow-bg-dark: #FAAD3A1a;
    --red-sign: #E44E4E; /*Sign*/
    --lavender: #6B77C0; /*calendar-now*/

    /* background color */
    --bg-defalt: #ECEEEF;
    --input-dis: #F5F6F6;
    --pressed-table: #F1F2F9;

    /* font */
    --txt-default: #373B44;
    --txt-second: #808080;
    --icon-default: #8B909C;

    /* 고객정보관리 */
    --pie-chart-size: 146px;
    --ppmi: var(--primary-60);
    --ppmi-bg: var(--primary-90);
    --ppsi: #13A45E;
    --ppsi-bg: #F3FFF9;
    --hcp: #FFAC09;
    --hcp-bg: #FFF8EB;

    /* 권한관리 */
    --auth-yellow: #FFAB2D;

    /* 이니셜 뱃지, 이니셜 버튼 */
    --bu-all: #5B82FB;
    --bu-all-bg: #FAFBFF;
    --bu-dbu: #E99CCA;
    --bu-dbu-bg: #FEFBFD;
    --bu-obu: #FFAA17;
    --bu-obu-bg: #FFFDFA;
    --bu-rbu: #A4B82F;
    --bu-rbu-bg: #FEFEFB;


    /* 폰트 >  제일 큼*/
    --font-title-lg-bold: 900 42px/50px "Noto Sans KR", sans-serif;

    /* 폰트 > 로고 */
    --font-logo: 900 34px/21px "Noto Sans KR", sans-serif;

    /* 폰트 > 컨텐츠 박스 타이틀 */
    --font-title-header-md: 500 24px/35px "Noto Sans KR", sans-serif;
    --font-title-header-bold: 700 24px/35px "Noto Sans KR", sans-serif;

    /* 폰트 > 큰 타이틀 */
    --font-title-md: 500 20px/28px "Noto Sans KR", sans-serif;
    --font-title-bold: 700 20px/28px "Noto Sans KR", sans-serif;

    /* 폰트 > 작은 타이틀 */
    --font-title-sm-md: 500 18px/26px "Noto Sans KR", sans-serif;
    --font-title-sm-bold: 700 18px/26px "Noto Sans KR", sans-serif;

    /* 폰트 > 본문 */
    --font-body-md: 500 16px/21px "Noto Sans KR", sans-serif;
    --font-body-bold: 700 16px/21px "Noto Sans KR", sans-serif;

    /* 폰트 > 작은 본문 */
    --font-body-sm-md: 400 14px/18px "Noto Sans KR", sans-serif;
    --font-body-sm-bold: 700 14px/18px "Noto Sans KR", sans-serif;

    /* 폰트 > 서브 */
    --font-sub-md: 400 12px/16px "Noto Sans KR", sans-serif;
    --font-sub-bold: 700 12px/16px "Noto Sans KR", sans-serif;

    /* 폰트 > 버튼 */
    --font-btn-bold: 700 16px/21px "Noto Sans KR", sans-serif;
    --font-btn-sm-bold: 700 14px/18px "Noto Sans KR", sans-serif;

    /* etc */
    --input-h : 50px;
    --check-box-size : 32px;
    --time-w: 9vw;
    --default-bdrs: 5px;

    --add-container: 1435px;
    --add-container-gap: 35px;
    --detail-container: 1340px;
    --detail-container-gap: 40px;

    --main-list-label-w: 120px;

    --content-padding-x: 33px;
    --content-padding-y: 40px;
    --content-inner-gap: 20px;
    --content-padding-15: 15px;

    --shadow-header: 0px 3px 6px rgba(0, 0, 0, 0.06);
    --shadow-nav: 0px 0px 10px rgba(0, 0, 0, 0.11);
    --shadow-object: 0px 3px 10px rgba(0, 0, 0, 0.16);
}

@media (max-width: 1440px) {
    :root {
        /* 폰트 >  제일 큼*/
        --font-title-lg-bold: 900 40px/50px "Noto Sans KR", sans-serif;

        /* 폰트 > 컨텐츠 박스 타이틀 */
        --font-title-header-md: 500 22px/35px "Noto Sans KR", sans-serif;
        --font-title-header-bold: 700 22px/35px "Noto Sans KR", sans-serif;

        /* 폰트 > 큰 타이틀 */
        --font-title-md: 500 18px/26px "Noto Sans KR", sans-serif;
        --font-title-bold: 700 18px/26px "Noto Sans KR", sans-serif;

        /* 폰트 > 작은 타이틀 */
        --font-title-sm-md: 500 16px/21px "Noto Sans KR", sans-serif;
        --font-title-sm-bold: 700 16px/21px "Noto Sans KR", sans-serif;

        /* 폰트 > 본문 */
        --font-body-md: 500 14px/18px "Noto Sans KR", sans-serif;
        --font-body-bold: 700 14px/18px "Noto Sans KR", sans-serif;

        /* 폰트 > 작은 본문 */
        --font-body-sm-md: 400 12px/16px "Noto Sans KR", sans-serif;
        --font-body-sm-bold: 700 12px/16px "Noto Sans KR", sans-serif;

        /* 폰트 > 서브 */
        --font-sub-md: 400 12px/16px "Noto Sans KR", sans-serif;
        --font-sub-bold: 700 12px/16px "Noto Sans KR", sans-serif;

        --time-w: 150px;
        --main-list-label-w: 110px;
    }
}

@media (max-width: 1100px) {
    :root {
        /* 폰트 >  제일 큼*/
        --font-title-lg-bold: 900 30px/50px "Noto Sans KR", sans-serif;

        /* 폰트 > 컨텐츠 박스 타이틀 */
        --font-title-header-md: 500 18px/26px "Noto Sans KR", sans-serif;
        --font-title-header-bold: 700 18px/26px "Noto Sans KR", sans-serif;

        /* 폰트 > 작은 타이틀 */
        --font-title-sm-md: 500 16px/21px "Noto Sans KR", sans-serif;
        --font-title-sm-bold: 700 16px/21px "Noto Sans KR", sans-serif;

        --font-title-md: 500 16px/21px "Noto Sans KR", sans-serif;
        --font-title-bold: 700 16px/21px "Noto Sans KR", sans-serif;

        --content-inner-gap: 15px;
        --content-padding-x: 15px;
        --content-padding-y: 15px;
    }
}

@media all and (max-width: 500px) {
    :root {
        --input-h: 40px;
        --time-w: 120px;
        --main-list-label-w: 100px;
    }
}