@charset "utf-8";/* ocp.import.css */

@import url(ocp.font.css?t=7);
@import url(ocp.default.css?t=7);
@import url(ocp.layout.css?t=7);
@import url(ocp.grid.css?t=7);
@import url(ocp.common.css?t=7);
@import url(ocp.kebhana.css?t=7);
@import url(ocp.contents.css?t=7);
@import url(ocp.layout-new.css?t=7);
@import url(ocp.terms.css?t=7);
@import url(ocp.offer.css?t=7);
@import url(ocp.operate.css?t=7);

:root {
    /* =========================
    Basic - Primary
    ========================= */
    --color-primary-hana-green: #009178; /*00A38D*/
    --color-primary-text-green: #009178; /*009e88*/
    --color-secondary-tint-green: #E3F6F3;

    /* =========================
    Basic - UI Grayscale
    ========================= */
    --gray-white: #FFFFFF;
    --gray-10: #F9FAFB;
    --gray-20: #F6F7F8;
    --gray-40: #F1F2F4;
    --gray-60: #E5E8EB;
    --gray-80: #D5D9DE;
    --gray-100: #C4C8CC;
    --gray-200: #B3B6BA;
    --gray-300: #A6A9AD;
    --gray-400: #8F959C;
    --gray-500: #777; /*79828B*/
    --gray-600: #666; /*5E6976*/
    --gray-700: #444; /*49515B*/
    --gray-800: #333; /*333547*/
    --gray-black-900: #111; /*22262B*/

    /* =========================
    Basic - Text Color
    ========================= */
    --t-gray-white: #FFFFFF;
    --t-gray-100: #C4C8CC;
    --t-gray-200: #B3B6BA;
    --t-gray-300: #A6A9AD;
    --t-gray-400: #8F959C;
	--t-gray-500: #777; /*79828B*/
    --t-gray-600: #666; /*5E6976*/
    --t-gray-700: #444; /*49515B*/
    --t-gray-800: #333; /*333547*/
    --t-gray-black-900: #111; /*22262B*/

    /* =========================
    Semantic - Green
    ========================= */
    --green-20: #E3F6F3;
    --green-100: #93D9D0;
    --green-200: #70CCC0;
    --green-300: #3FBDAD;
    --green-400: #33B5A4;
    --green-500: #00A38D;
    --green-600: #00806E;
    --green-700: #006658;
    --green-800: #005247;
    --green-900: #003D35;

    /* =========================
    Semantic - Blue
    ========================= */
    --blue-20: #E8F2FF;
    --blue-100: #C6DEFF;
    --blue-200: #A7CBFF;
    --blue-300: #91BFFF;
    --blue-400: #7396FF;
    --blue-500: #6572FF;
    --blue-600: #4A59EF;
    --blue-700: #3643D2;
    --blue-800: #2832A8;
    --blue-900: #242B7D;

    /* =========================
    Semantic - Orange
    ========================= */
    --orange-20: #FFF2EA;
    --orange-100: #FFD8C1;
    --orange-200: #FEB991;
    --orange-300: #F8A06E;
    --orange-400: #F47E3A;
    --orange-500: #E45B0C;
    --orange-600: #C34700;
    --orange-700: #A13B00;
    --orange-800: #823000;
    --orange-900: #551F00;

    /* =========================
    Semantic - Red
    ========================= */
    --red-20: #FFEAEA;
    --red-100: #FCB9B9;
    --red-200: #FB9797;
    --red-300: #F87275;
    --red-400: #EA5154;
    --red-500: #E44959;
    --red-600: #BF0741;
    --red-700: #9C103C;
    --red-800: #6F0029;
    --red-900: #4F001D;

    /* =========================
    Background / Layer / Gradient
    ========================= */
    --bg-white: #FFFFFF;
    --bg-basic-gray: #F6F7F8;
    --bg-tint-green: #E3F6F3;

    --layer-bg: #343548;
    --dimmed: rgba(0, 0, 0, 0.7);

    --gradient: background:linear-gradient(180deg, #B5ABFF 0%, #888CF6 100%);
    --font-family-pd: 'pd';
    --font-family-pretendard: 'Pretendard';
    /* font-family:var(--font-family-pd, var(--font-family-pretendard)) cmb, csw pretendard 폰트 혼용으로 사용할 시 설정*/
    --font-family-roboto: Roboto;
    
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-100: 1;
	--line-height-140: 1.4;
	--line-height-150: 1.5;
}