/****************************
  ** 1. Color **
  * 1-1) Gray
  * 1-2) Green
  * 1-3) Blue
  * 1-4) System
  * 1-5) Pastel

  ** 2. Font size **
  * 2-1) Heading
  * 2-2) Title
  * 2-3) Body

  ** 3. Font Weight **
  * 3-1) Bold
  * 3-2) Regular

  ** 4. line Height **
  * 4-1) 150%

  ** 5. Shadow **
  * 5-1) top
  * 5-2) right
  * 5-3) all

  ** 6. Radius **
  * 6-1) 24

  ** 7. Opacity **
  * 7-1) 80

  ** 8. Padding **
  * 8-1) 2
  * 8-2) 8
  * 8-3) 16
  * 8-4) 24
  * 8-5) 36
  * 8-6) 48

** 9. Margin **
  * 9-1) 2
  * 9-2) 8
  * 9-3) 16
  * 9-4) 24
  * 9-5) 36
  * 9-6) 48
  ****************************/

:root {
/****************************
 * 1. Color
 ****************************/
    /** 1-1) Gray **/
    --gray600: #25282B;
    --gray500: #4D5053;
    --gray400: #75787B;
    --gray300: #9DA0A3;
    --gray200: #C5C8CB;
    --gray100: #D9DCDF;
    --gray50: #EDF0F3;
    --white: #FFFFFF;
    --black: #000000;
    --stroke: #B1B4B7;

    /** 1-2) Green **/
     --green600: #73B22C;
     --green500: #8FC156;
     --green400: #ABD180;
     --green300: #C7E0AB;
     --green200: #E3F0D5;
     --green100: #F1F7EA;

    /** 1-3) Blue **/
     --blue600: #1075BD;
     --blue500: #4091CA;
     --blue400: #70ACD7;
     --blue300: #9FC8E5;
     --blue200: #CFE3F2;
     --blue100: #E7F1F8;

     /** 1-4) System **/
     --error: #EB003B;
     --warning: #FFB724;
     --success: #008A1E;
     --information: #2768FF;

     /** 1-5) Pastel **/
     --pastel-green: #F0F7EB;
     --pastel-blue: #E7F1F8;
     --pastel-yellow: #FFF7E5;
     --pastel-pink: #FFEBF5;


/****************************
 * 2. Font size
 ****************************/
    /** 2-1) Heading **/
    --heading-size-l: 50px;
    --heading-size-m: 40px;
    --heading-size-s: 32px;

    /** 2-2) Title **/
    --title-size-xl: 27px;
    --title-size-l: 23px;
    --title-size-m: 19px;
    --title-size-s: 17px;

    /** 2-3) Body **/
    --body-size-l: 19px;
    --body-size-m: 17px;
    --body-size-s: 15px;
    --body-size-xs: 13px;
    

/****************************
 * 3. Font Weight
 ****************************/
    /** 3-1) Bold **/
    --font-weight-bold: 700;
    /** 3-2) Regular **/
    --font-weight-regular: 400;


/****************************
 * 4. line Height
 ****************************/
    /** 4-1) 150% **/
    --line-height-150: 150%;


/****************************
 * 5. Shadow
 ****************************/
    /** 5-1) top **/
    --shadow-top: 0px 5px 10px 0px rgba(0, 0, 0, 0.08);
    /** 5-2) right **/
    --shadow-right: 2px 4px 5px 0px rgba(0, 0, 0, 0.10);
    /** 5-3) all **/
    --shadow-all: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
	/** 5-4) inner **/
	--inner-shadow-top: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.05);


/****************************
 * 6. radius
 ****************************/
    /** 6-1) 24 **/
    --radius24: 24px;


 /****************************
 * 7. Opacity
 ****************************/
    /** 7-1) 80 **/
    --opacity80: 0.8;

/****************************
 * 8. Padding
 ****************************/
    /** 8-1) 2 **/
    --p-02: 2px;
    /** 8-2) 8 **/
    --p-08: 8px;
    /** 8-3) 16 **/
    --p-16: 16px;
    /** 8-4) 24 **/
    --p-24: 24px;
    /** 8-5) 36 **/
    --p-24: 36px;
    /** 8-6) 48 **/
    --p-24: 48px;

}

/****************************
 * 1. Color
 ****************************/
/** 1-1) Gray **/
.bg-gray600 { background-color: #25282B; }
.bg-gray500 { background-color: #4D5053; }
.bg-gray400 { background-color: #75787B; }
.bg-gray300 { background-color: #9DA0A3; }
.bg-gray200 { background-color: #C5C8CB; }
.bg-gray100 { background-color: #D9DCDF; }
.bg-gray50   { background-color: #EDF0F3; }
.bg-white     { background-color: #FFFFFF; }
.bg-black     { background-color: #000000; }
.bg-stroke    { background-color: #B1B4B7; }

.co-gray600 { color: #25282B; }
.co-gray500 { color: #4D5053; }
.co-gray400 { color: #75787B; }
.co-gray300 { color: #9DA0A3; }
.co-gray200 { color: #C5C8CB; }
.co-gray100 { color: #D9DCDF; }
.co-gray50   { color: #EDF0F3; }
.co-white     { color: #FFFFFF; }
.co-black     { color: #000000; }
.co-stroke    { color: #B1B4B7; }

/** 1-2) Green **/
.bg-green600 { background-color: #73B22C; }
.bg-green500 { background-color: #8FC156; }
.bg-green400 { background-color: #ABD180; }
.bg-green300 { background-color: #C7E0AB; }
.bg-green200 { background-color: #E3F0D5; }
.bg-green100 { background-color: #F1F7EA; }

.co-green600 { color: #73B22C; }
.co-green500 { color: #8FC156; }
.co-green400 { color: #ABD180; }
.co-green300 { color: #C7E0AB; }
.co-green200 { color: #E3F0D5; }
.co-green100 { color: #F1F7EA; }

/** 1-3) Blue **/
.bg-blue600 { background-color: #1075BD; }
.bg-blue500 { background-color: #4091CA; }
.bg-blue400 { background-color: #70ACD7; }
.bg-blue300 { background-color: #9FC8E5; }
.bg-blue200 { background-color: #CFE3F2; }
.bg-blue100 { background-color: #E7F1F8; }

.co-blue600 { color: #1075BD; }
.co-blue500 { color: #4091CA; }
.co-blue400 { color: #70ACD7; }
.co-blue300 { color: #9FC8E5; }
.co-blue200 { color: #CFE3F2; }
.co-blue100 { color: #E7F1F8; }

/** 1-4) System **/
.bg-error        { background-color: #EB003B; }
.bg-warning      { background-color: #FFB724; }
.bg-success      { background-color: #008A1E; }
.bg-information  { background-color: #2768FF; }

.co-error        { color: #EB003B; }
.co-warning      { color: #FFB724; }
.co-success      { color: #008A1E; }
.co-information  { color: #2768FF; }

/** 1-5) Pastel **/
.bg-pastel-green  { background-color: #F0F7EB; }
.bg-pastel-blue   { background-color: #E7F1F8; }
.bg-pastel-yellow { background-color: #FFF7E5; }
.bg-pastel-pink   { background-color: #FFEBF5; }

.co-pastel-green  { color: #F0F7EB; }
.co-pastel-blue   { color: #E7F1F8; }
.co-pastel-yellow { color: #FFF7E5; }
.co-pastel-pink   { color: #FFEBF5; }


/****************************
 * 2. Font
 ****************************/
/** 2-1) Heading */
.heading-l { font-size: 50px; line-height: 150%; font-weight: 700; }
.heading-m { font-size: 40px; line-height: 150%; font-weight: 700; }
.heading-s { font-size: 32px; line-height: 150%; font-weight: 700; }

/** 2-2) Title */
.title-xl { font-size: 27px; line-height: 150%; font-weight: 700; }
.title-l { font-size: 23px; line-height: 150%; font-weight: 700; }
.title-m { font-size: 19px; line-height: 150%; font-weight: 700; }
.title-s { font-size: 17px; line-height: 150%; font-weight: 700; }

/** 2-3) Body - Bold */
.body-l-600 { font-size: 19px; line-height: 150%; font-weight: 600; }
.body-m-600 { font-size: 17px; line-height: 150%; font-weight: 600; }
.body-s-600 { font-size: 15px; line-height: 150%; font-weight: 600; }
.body-xs-600 { font-size: 13px; line-height: 150%; font-weight: 600; }

/** 2-3) Body - Regular */
.body-l-400 { font-size: 19px; line-height: 150%; font-weight: 400; }
.body-m-400 { font-size: 17px; line-height: 150%; font-weight: 400; }
.body-s-400 { font-size: 15px; line-height: 150%; font-weight: 400; }
.body-xs-400 { font-size: 13px; line-height: 150%; font-weight: 400; }


/****************************
 * 3. Font Weight
 ****************************/
 /** 3-1) Bold **/
 .fw-bold { font-weight: 700; }

/** 3-2) regular **/
.fw-regular { font-weight: 400; }


/****************************
 * 4. line Height
 ****************************/
 .lh-150 { line-height: 150%; }

/****************************
 * 5. Shadow
 ****************************/
  /** 5-1) top **/
.shadow-top { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.08); }

/** 5-2) right **/
.shadow-right { box-shadow: 2px 4px 5px 0px rgba(0, 0, 0, 0.10); }

/** 5-3) all **/
.shadow-all { box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10); }


/****************************
 * 6. Radius
 ****************************/
/** 6-1) 24 **/
.radius24 { border-radius: 24px; }

/****************************
 * 7. Opacity
 ****************************/
.opacity80 { opacity: 0.8; }

/****************************
 * 8. Padding
 ****************************/
/** 8-1) 2 **/
.p-02    { padding: 2px !important; }
.pt-02   { padding-top: 2px !important; }
.pr-02   { padding-right: 2px !important; }
.pb-02   { padding-bottom: 2px !important; }
.pl-02   { padding-left: 2px !important; }
.px-02   { padding-left: 2px; padding-right: 2px !important; }
.py-02   { padding-top: 2px; padding-bottom: 2px !important; }

/** 8-2) 08 **/
.p-08    { padding: 8px !important; }
.pt-08   { padding-top: 8px !important; }
.pr-08   { padding-right: 8px !important; }
.pb-08   { padding-bottom: 8px !important; }
.pl-08   { padding-left: 8px !important; }
.px-08   { padding-left: 8px; padding-right: 8px !important; }
.py-08   { padding-top: 8px; padding-bottom: 8px !important; }

/** 8-3) 16 **/
.p-16    { padding: 16px !important; }
.pt-16   { padding-top: 16px !important; }
.pr-16   { padding-right: 16px !important; }
.pb-16   { padding-bottom: 16px !important; }
.pl-16   { padding-left: 16px !important; }
.px-16   { padding-left: 16px; padding-right: 16px !important; }
.py-16   { padding-top: 16px; padding-bottom: 16px !important; }

/** 8-4) 24 **/
.p-24    { padding: 24px !important; }
.pt-24   { padding-top: 24px !important; }
.pr-24   { padding-right: 24px !important; }
.pb-24   { padding-bottom: 24px !important; }
.pl-24   { padding-left: 24px !important; }
.px-24   { padding-left: 24px; padding-right: 24px !important; }
.py-24   { padding-top: 24px; padding-bottom: 24px !important; }

/** 8-5) 36 **/
.p-36    { padding: 36px !important; }
.pt-36   { padding-top: 36px !important; }
.pr-36   { padding-right: 36px !important; }
.pb-36   { padding-bottom: 36px !important; }
.pl-36   { padding-left: 36px !important; }
.px-36   { padding-left: 36px; padding-right: 36px !important; }
.py-36   { padding-top: 36px; padding-bottom: 36px !important; }

/** 8-6) 48 **/
.p-48    { padding: 48px !important; }
.pt-48   { padding-top: 48px !important; }
.pr-48   { padding-right: 48px !important; }
.pb-48   { padding-bottom: 48px !important; }
.pl-48   { padding-left: 48px !important; }
.px-48   { padding-left: 48px; padding-right: 48px !important; }
.py-48   { padding-top: 48px; padding-bottom: 48px !important; }


/****************************
 * 9. Margin
 ****************************/
/** 9-1) 2 **/
.m-02    { margin: 2px !important; }
.mt-02   { margin-top: 2px !important; }
.mr-02   { margin-right: 2px !important; }
.mb-02   { margin-bottom: 2px !important; }
.ml-02   { margin-left: 2px !important; }
.mx-02   { margin-left: 2px; margin-right: 2px !important; }
.my-02   { margin-top: 2px; margin-bottom: 2px !important; }

/** 9-2) 08 **/
.m-08    { margin: 8px !important; }
.mt-08   { margin-top: 8px !important; }
.mr-08   { margin-right: 8px !important; }
.mb-08   { margin-bottom: 8px !important; }
.ml-08   { margin-left: 8px !important; }
.mx-08   { margin-left: 8px; margin-right: 8px !important; }
.my-08   { margin-top: 8px; margin-bottom: 8px !important; }

/** 9-3) 16 **/
.m-16    { margin: 16px !important; }
.mt-16   { margin-top: 16px !important; }
.mr-16   { margin-right: 16px !important; }
.mb-16   { margin-bottom: 16px !important; }
.ml-16   { margin-left: 16px !important; }
.mx-16   { margin-left: 16px; margin-right: 16px !important; }
.my-16   { margin-top: 16px; margin-bottom: 16px !important; }

/** 9-4) 24 **/
.m-24    { margin: 24px !important; }
.mt-24   { margin-top: 24px !important; }
.mr-24   { margin-right: 24px !important; }
.mb-24   { margin-bottom: 24px !important; }
.ml-24   { margin-left: 24px !important; }
.mx-24   { margin-left: 24px; margin-right: 24px !important; }
.my-24   { margin-top: 24px; margin-bottom: 24px !important; }

/** 9-5) 36 **/
.m-36    { margin: 36px !important; }
.mt-36   { margin-top: 36px !important; }
.mr-36   { margin-right: 36px !important; }
.mb-36   { margin-bottom: 36px !important; }
.ml-36   { margin-left: 36px !important; }
.mx-36   { margin-left: 36px; margin-right: 36px !important; }
.my-36   { margin-top: 36px; margin-bottom: 36px !important; }

/** 9-6) 48 **/
.m-48    { margin: 48px !important; }
.mt-48   { margin-top: 48px !important; }
.mr-48   { margin-right: 48px !important; }
.mb-48   { margin-bottom: 48px !important; }
.ml-48   { margin-left: 48px !important; }
.mx-48   { margin-left: 48px; margin-right: 48px !important; }
.my-48   { margin-top: 48px; margin-bottom: 48px !important; }


.flex-wrap-wrap {
    flex-wrap: wrap;
}

.w-100 {
    width: 100%;
}

/* Flex 컨테이너 설정 */
.d-flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

/* 수평 정렬 */
.justify-start     { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; }
.justify-end       { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; }
.justify-center    { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.justify-between   { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.justify-around    { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; }

/* 수직 정렬 */
.align-start       { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; }
.align-end         { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; }
.align-center      { -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.align-stretch     { -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; }
.align-baseline    { -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; }

/* flex-wrap 설정 */
.flex-wrap         { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-nowrap       { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }

/* flex 방향 설정 */
.flex-row          { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; }
.flex-column       { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }

/* 개별 아이템 정렬 */
.self-start        { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; }
.self-end          { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; }
.self-center       { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; }
.self-stretch      { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; }

/* flex grow/shrink/auto 설정 */
.flex-1            { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; }
.flex-auto         { -ms-flex: 1 1 auto; flex: 1 1 auto; }
.flex-initial      { -ms-flex: 0 1 auto; flex: 0 1 auto; }
.flex-none         { -ms-flex: 0 0 auto; flex: 0 0 auto; }



@media screen and (max-width: 1024px){ /* iPad Pro */
	/** 2-1) Heading */
	.heading-l { font-size: 40px; line-height: 150%; font-weight: 700; }
}

@media screen and (max-width: 768px){ /* iPad Mini */
/****************************
 * 2. Font
 ****************************/
	/** 2-1) Heading */
	.heading-l { font-size: 32px; line-height: 150%; font-weight: 700; }
	/* .heading-m { font-size: 40px; line-height: 150%; font-weight: 700; } */
	/* .heading-s { font-size: 32px; line-height: 150%; font-weight: 700; } */

	/** 2-2) Title */
	.title-xl { font-size: 23px; line-height: 150%; font-weight: 700; }
	.title-l { font-size: 19px; line-height: 150%; font-weight: 700; }
	.title-m { font-size: 17px; line-height: 150%; font-weight: 700; }
	/* .title-s { font-size: 17px; line-height: 150%; font-weight: 700; } */

/** 2-3) Body - Bold */
/* .body-l-600 { font-size: 19px; line-height: 150%; font-weight: 600; } */
/* .body-m-600 { font-size: 17px; line-height: 150%; font-weight: 600; } */
/* .body-s-600 { font-size: 15px; line-height: 150%; font-weight: 600; } */
/* .body-xs-600 { font-size: 13px; line-height: 150%; font-weight: 600; } */

/** 2-3) Body - Regular */
/* .body-l-400 { font-size: 19px; line-height: 150%; font-weight: 400; } */
/* .body-m-400 { font-size: 17px; line-height: 150%; font-weight: 400; } */
/* .body-s-400 { font-size: 15px; line-height: 150%; font-weight: 400; } */
/* .body-xs-400 { font-size: 13px; line-height: 150%; font-weight: 400; } */
}

@media screen and (max-width: 480px){
	.heading-l { font-size: 23px; line-height: 150%; font-weight: 700; }
	
	/*.title-xl { font-size: 15px; line-height: 150%; font-weight: 700; }*/
}