/*.s-f {*/
/*  font-size: 24px;*/
/*  font-style: normal;*/
/*  font-weight: 400;*/
/*  line-height: 150%; !* 36px *!*/
/*  letter-spacing: -1px;*/
/*}*/

/*===================================================================================*/

/*padding*/
/*padding 상하좌우*/
/*.pd-20 {*/
/*  padding: 20px;*/
/*}*/

/*.pd-0-5{*/
/*  padding: 0px 5px;*/
/*}*/

/*.pd-18-20 {*/
/*  padding: 18px 20px;*/
/*}*/

/*.pd-r-20 {*/
/*  padding-right: 20px;*/
/*}*/

/*.pd-t-30 {*/
/*  padding-top: 30px;*/
/*}*/
/*lca main point padding*/
/*.pd-1-0-primary-60 {*/
/*  background-color: var(--primary-60);*/
/*  border-radius: 8px;*/
/*  padding: 1px 10px;*/
/*}*/

/*.pd-2-5 {*/
/*  padding: 2px 5px;*/
/*}*/
/*.pd-7-0-7-13 {*/
/*  padding: 7px 0px 7px 13px;*/
/*}*/

/*.pd-10-0 {*/
/*  padding: 10px 0px;*/
/*}*/

/*.pd-20-0 {*/
/*  padding: 20px 30px;*/
/*}*/

/*.pd-20-10 {*/
/*  padding: 20px 10px;*/
/*}*/

/*.pd-40-0 {*/
/*  padding: 40px 0px;*/
/*}*/

/*.pd-20-0-0-10 {*/
/*  padding: 20px 0px 0px 10px;*/
/*}*/

/*padding 좌우*/

/*.pd-0-12 {*/
/*  padding: 0px 12px;*/
/*}*/

/*.pd-0-24 {*/
/*  padding: 0px 24px;*/
/*}*/

/*.pd-0-0-10-10 {*/
/*  padding: 0px 0px 10px 10px;*/
/*}*/

/*.pd-0-391 {*/
/*  padding: 0px 391px;*/
/*}*/

/*.pd-1 {*/
/*  padding: 0px 1px;*/
/*}*/

/*.pd-b-4 {*/
/*  padding-bottom: 4px;*/
/*}*/

/*.pd-b-10 {*/
/*  padding-bottom: 10px;*/
/*}*/

/*.pd-b-20 {*/
/*  padding-bottom: 20px;*/
/*}*/

/*.pd-l-12 {*/
/*  padding-left: 12px;*/
/*}*/

/*.pd-l-18 {*/
/*  padding-left: 18px;*/
/*}*/

/*.pd-l-20 {*/
/*  padding-left: 20px;*/
/*}*/

/*.pd-l-24 {*/
/*  padding-left: 24px;*/
/*}*/

/*.pd-l-54 {*/
/*  padding-left: 54px;*/
/*}*/

/*.pd-l-92{*/
/*  padding-left:92px;}*/

/*margin*/

/*.ml-4 {*/
/*  margin-left: 4px;*/
/*}*/

/*.ml-12 {*/
/*  margin-left: 12px;*/
/*}*/


/*.ml-13 {*/
/*  margin-left: 13px;*/
/*}*/

/*Margin Top*/

/*.mt-5 {*/
/*  margin-top: 5px;*/
/*}*/
/*.mt-7 {*/
/*  margin-top: 7px;*/
/*}*/
/*.mt-8 {*/
/*  margin-top: 8px;*/
/*}*/
/*.mt-10 {*/
/*  margin-top: 10px;*/
/*}*/

/*.mt-20 {*/
/*  margin-top: 20px;*/
/*}*/

/*.mt-22{*/
/*  margin-top: 22px;*/
/*}*/
/*.mt-30 {*/
/*  margin-top: 30px;*/
/*}*/

/*.mt-32 {*/
/*  margin-top: 32px;*/
/*}*/

/*.mt-45 {*/
/*  margin-top: 45px;*/
/*}*/
/*.mt-50{*/
/*  margin-top: 50px;*/
/*}*/

/*.mt-52{*/
/*  margin-top: 52px;*/
/*}*/

/*.mt-60 {*/
/*  margin-top: 60px;*/
/*}*/

/*.mt-70{*/
/*  margin-top: 70px;*/
/*}*/

/*.mt-72{*/
/*  margin-top: 72px;*/
/*}*/

/*.mt-80 {*/
/*  margin-top: 80px;*/
/*}*/

/*.mt-90 {*/
/*  margin-top: 90px;*/
/*}*/

/*.mt-95 {*/
/*  margin-top: 95px;*/
/*}*/

/*.mt-140 {*/
/*  margin-top: 140px;*/
/*}*/

/*.mt-150{*/
/*  margin-top: 150px;*/
/*}*/

/*.mt-200{*/
/*  margin-top: 200px;*/
/*}*/

/*Margin Bottom*/
/*.mb-2 {*/
/*  margin-bottom: 10px;*/
/*}*/

/*.mb-4 {*/
/*  margin-bottom: 4px;*/
/*}*/

/*.mb-9 {*/
/*  margin-bottom: 9px;*/
/*}*/

/*.mb-10 {*/
/*  margin-bottom: 10px;*/
/*}*/

/*.mb-20 {*/
/*  margin-bottom: 20px;*/
/*}*/

/*.mb-21 {*/
/*  margin-bottom: 21px;*/
/*}*/

/*.mb-30 {*/
/*  margin-bottom: 30px;*/
/*}*/

/*.mb-34 {*/
/*  margin-bottom: 34px;*/
/*}*/

/*.mb-40 {*/
/*  margin-bottom: 40px;*/
/*}*/

/*.mb-45 {*/
/*  margin-bottom: 45px;*/
/*}*/

/*.mb-50 {*/
/*  margin-bottom: 50px;*/
/*}*/

/*.mb-151 {*/
/*  margin-bottom: 151px;*/
/*}*/

/*.mb-210 {*/
/*  margin-bottom: 210px;*/
/*}*/

/*margin-top/bottom*/

/*.mtb-50 {*/
/*  margin: 50px 0px;*/
/*}*/

/*.mtb-8 {*/
/*  margin: 8px 0px;*/
/*}*/

/*Margin Right + Left*/
/*.mrl-4 {*/
/*  margin: 0px 4px;*/
/*}*/

/*.mrl-20 {*/
/*  margin: 0px 20px;*/
/*}*/

/*marginleft*/
/*.ml-1 {*/
/*  margin-left: 1px;*/
/*}*/

/*.ml-2 {*/
/*  margin-left: 2px;*/
/*}*/

/*.ml-3 {*/
/*  margin-left: 3px;*/
/*}*/

/*.ml-4 {*/
/*  margin-left: 4px;*/
/*}*/

/*.ml-5 {*/
/*  margin-left: 5px;*/
/*}*/

/*.ml-6 {*/
/*  margin-left: 6px;*/
/*}*/

/*.ml-7 {*/
/*  margin-left: 7px;*/
/*}*/

/*.ml-8 {*/
/*  margin-left: 8px;*/
/*}*/

/*.ml-9 {*/
/*  margin-left: 9px;*/
/*}*/

.ml-10 {
  margin-left: 10px;
}

/*.ml-17 {*/
/*  margin-left: 17px;*/
/*}*/

/*.ml-18 {*/
/*  margin-left: 18px;*/
/*}*/

.ml-24 {
  margin-left: 24px;
}

.ml-26 {
  margin-left: 26px;
}

/*margin-right*/
/*.mr-1 {*/
/*  margin-right: 1px;*/
/*}*/

/*.mr-2 {*/
/*  margin-right: 2px;*/
/*}*/

/*.mr-3 {*/
/*  margin-right: 3px;*/
/*}*/

.mr-4 {
  margin-right: 4px;
}

/*.mr-5 {*/
/*  margin-right: 5px;*/
/*}*/

/*.mr-6 {*/
/*  margin-right: 6px;*/
/*}*/

/*.mr-7 {*/
/*  margin-right: 7px;*/
/*}*/

/*.mr-8 {*/
/*  margin-right: 8px;*/
/*}*/

/*.mr-9 {*/
/*  margin-right: 9px;*/
/*}*/

/*.mr-10 {*/
/*  margin-right: 10px;*/
/*}*/

.mr-45 {
  margin-right: 45px;
}

/*==================================================================================================================*/

/*color*/
/*.font-Primary-black {*/
/*  color: var(--primary-90);*/
/*}*/

/*.font-primary-50 {*/
/*  background: var(--primary-50);*/
/*}*/

/*.font-primary-60 {*/
/*  background: var(--primary-60);*/
/*}*/

/*.font-gray {*/
/*  color: var(--grayscale-50);*/
/*}*/

/*.font-white {*/
/*  color: var(--primary-0);*/
/*}*/

/*backgroundColor*/

/*START 기본 배경 색상 사용*/
/*.background-secondary-5 {*/
/*  background-color: var(--secondary-5);*/
/*}*/

/*.background-gray-0 {*/
/*  background-color: var(--grayscale-0);*/
/*}*/
/*.background-gray-5 {*/
/*  background-color: var(--grayscale-5);*/
/*}*/

/*END 기본 배경 색상 사용*/

/*.back-aPrimary-black {*/
/*  background-color: var(--primary-90);*/
/*}*/

/*.back-primary-50 {*/
/*  background-color: var(--primary-50);*/
/*}*/

/*.back-primary-60 {*/
/*  background-color: var(--primary-60);*/
/*}*/

.back-gray {
  background-color: var(--grayscale-50);
}

/*.back-white {*/
/*  background-color: var(--primary-0);*/
/*}*/

.back-grayscale-5 {
  background-color: var(--grayscale-5);
}

/*==========================================font - style==========================================*/

/*display : Display는 화면에서 가장 큰 텍스트로 주로 마케팅 용도로 사용합니다.*/
/*.font-display-large {*/
/*  font-size: 60px;*/
/*  font-weight: 700;*/
/*}*/

/*.font-display-medium {*/
/*  font-size: 50px;*/
/*  font-weight: 600;*/
/*}*/

/*.font-display-small {*/
/*  font-size: 40px;*/
/*  font-weight: 600;*/
/*}*/

/*Heading : Title은 템플릿 단위, 모듈 단위의 역할 및 기능을 강조할 때 사용합니다.*/

/*.font-heading-large {*/
/*  font-size: 50px;*/
/*  font-weight: 700;*/
/*}*/
/*.font-heading-medium-special {*/
/*  font-size: 36px;*/
/*  font-weight: 600;*/
/*}*/

/*.font-heading-medium {*/
/*  font-size: 40px;*/
/*  font-weight: 600;*/
/*}*/

/*.font-heading-small {*/
/*  font-size: 32px;*/
/*  font-weight: 500;*/
/*}*/

/*title : Title은 템플릿 단위, 모듈 단위의 역할 및 기능을 강조할 때 사용합니다.*/

.font-title-xxlarge {
  font-size: 32px;
  font-weight: 700;
}

/*.font-title-xlarge-special {*/
/*  font-size: 28px;*/
/*  font-weight: 700;*/
/*}*/

.font-title-xlarge {
  font-size: 26px;
  font-weight: 700;
}

/*.font-title-large {*/
/*  font-size: 22px;*/
/*  font-weight: 600;*/
/*}*/

/*.font-title-medium {*/
/*  font-size: 20px;*/
/*  font-weight: 600;*/
/*}*/

/*.font-title-medium-bold {*/
/*  font-size: 20px;*/
/*  font-weight: 700;*/
/*}*/

/*.font-title-small {*/
/*  font-size: 18px;*/
/*  font-weight: 500;*/
/*}*/
/*.font-title-xsmall {*/
/*  font-size: 16px;*/
/*  font-weight: 400;*/
/*}*/

/*!*body : Body는 본문 텍스트로 사용합니다.*!*/

/*.font-body-xlarge {*/
/*  font-size: 24px;*/
/*  font-weight: 500;*/
/*}*/

/*.font-body-large {*/
/*  font-size: 18px;*/
/*  font-weight: 500;*/
/*}*/

/*.font-body-medium {*/
/*  font-size: 16px;*/
/*  font-weight: 500;*/
/*}*/

/*.font-body-xmedium {*/
/*  font-size: 15px;*/
/*  font-weight: 500;*/
/*}*/

.font-body-small {
  font-size: 14px;
  font-weight: 500;
}

.font-body-small-light {
  font-size: 14px;
  font-weight: 400;
}

/*.font-body-xsmall {*/
/*  font-size: 13px;*/
/*  font-weight: 300;*/
/*}*/


/*.font-body-xsmall-normal {*/
/*  font-size: 13px;*/
/*  font-weight: 400;*/
/*}*/

/*.font-body-xsmall-bold {*/
/*  font-size: 13px!important;*/
/*  font-weight: 500!important;*/
/*}*/

/*.font-body-xsmall-light {*/
/*  font-size: 13px;*/
/*  font-weight: 300;*/
/*}*/

/*Detail : Detail은 추가 정보 또는 작은 항목 텍스트에 사용합니다.*/

/*.font-detail-xlarge-normal {*/
/*  font-size: 18px;*/
/*  font-weight: 500;*/
/*}*/

/*.font-detail-large {*/
/*  font-size: 16px;*/
/*  font-weight: 600;*/
/*}*/

.font-detail-medium {
  font-size: 15px;
  font-weight: 500;
}
/*.font-detail-small-light {*/
/*  font-size: 14px;*/
/*  font-weight: 300;*/
/*}*/

/*.font-detail-small {*/
/*  font-size: 14px;*/
/*  font-weight: 400;*/
/*}*/

/*.font-detail-small-bold {*/
/*  font-size: 14px;*/
/*  font-weight: 500;*/
/*}*/
/*.font-detail-xsmall-bold {*/
/*  font-size: 13px;*/
/*  font-weight: 300;*/
/*}*/

/*.font-detail-xsmall-light {*/
/*  font-size: 13px;*/
/*  font-weight: 300;*/
/*}*/

/*.font-detail-xxsmall-light {*/
/*  font-size: 12px;*/
/*  font-weight: 300;*/
/*}*/

/*label : 구성 요소 내부의 텍스트로 사용합니다. (예: Button, Label, Chips ...)*/

/*.font-label-large {*/
/*  font-size: 18px;*/
/*  font-weight: 600;*/
/*}*/

/*.font-label-medium {*/
/*  font-size: 16px;*/
/*  font-weight: 500;*/
/*}*/

.font-label-small-bold {
  font-size: 14px;
  font-weight: 600;
}

.font-label-small {
  font-size: 14px;
  font-weight: 500;
}

.font-label-small-light {
  font-size: 14px;
  font-weight: 400;
}

.font-label-xsmall {
  font-size: 13px;
  font-weight: 500;
}

.font-label-xsmall-light {
  font-size: 13px;
  font-weight: 400;
}

.font-label-xxsmall {
  font-size: 11px;
  font-weight: 400;
}

/*label : 구성 요소 내부의 텍스트로 사용합니다. (예: Button, Label, Chips ...)*/

/*.font-links-large {*/
/*  font-size: 18px;*/
/*  font-weight: 600;*/
/*}*/

/*.font-links-medium {*/
/*  font-size: 16px;*/
/*  font-weight: 500;*/
/*}*/

/*.font-links-small {*/
/*  font-size: 14px;*/
/*  font-weight: 500;*/
/*}*/

/*.font-detail-m {*/
/*  color: var(--primary-90);*/
/*  font-family: Pretendard;*/
/*  font-size: 15px;*/
/*  font-style: normal;*/
/*  font-weight: 400;*/
/*  line-height: 150%; !* 22.5px *!*/
/*}*/

/*.font-title-large-bold {*/
/*  color: var(--primary-90);*/
/*  font-size: 32px;*/
/*  font-style: normal;*/
/*  font-weight: 700;*/
/*  line-height: 140%; !* 44.8px *!*/
/*  letter-spacing: -1px;*/
/*}*/

.font-title-xsmall-bold {
  color: var(--grayscale-90);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}

.font-title-Xsmall {
  color: var(--grayscale-90);
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 24px */
}

/*.font-title-Medium {*/
/*  color: var(--gray-gray-90, #1d1d1d);*/
/*  font-family: Pretendard;*/
/*  font-size: 20px;*/
/*  font-style: normal;*/
/*  font-weight: 400;*/
/*  line-height: 150%; !* 28.5px *!*/
/*}*/

.font-title-Xsmall-bold {
  color: var(--grayscale-90);
  font-feature-settings: "liga" off, "clig" off;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  letter-spacing: -1px;
}

.font-label-Xsmall {
  color: var(--grayscale-90);
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  line-height: 130%; /* 16.9px */
}

.font-label-XXsmall {
  color: var(--grayscale-90);
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 130%; /* 16.9px */
}

.font-label-XXsmall {
  color: var(--grayscale-90);
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 300;
  line-height: 130%; /* 16.9px */
}

/*==========================================font - color==========================================*/

.primary-0 {
  color: #ffffff;
}
.primary-5 {
  color: #eff5ff;
}
.primary-10 {
  color: #d3e1fb;
}
.primary-20 {
  color: #a7c4f7;
}
.primary-30 {
  color: #7ca6f3;
}
.primary-40 {
  color: #5089ef;
}
.primary-50 {
  color: #246beb;
}
.primary-60 {
  color: #1d56bc;
}
.primary-70 {
  color: #16408d;
}
.primary-80 {
  color: #0e2b5e;
}
.primary-90 {
  color: #07152f;
}
.primary-90 {
  color: #000000;
}

.secondary-0 {
  color: #ffffff;
}
.secondary-5 {
  color: #edf1f5;
}
.secondary-10 {
  color: #cdd7e4;
}
.secondary-20 {
  color: #b4c4d6;
}
.secondary-30 {
  color: #99b0cb;
}
.secondary-40 {
  color: #2a5c96;
}
.secondary-50 {
  color: #003675;
}
.secondary-60 {
  color: #002b5e;
}
.secondary-70 {
  color: #002046;
}
.secondary-80 {
  color: #00162f;
}
.secondary-90 {
  color: #000b17;
}
.secondary-100 {
  color: #000000;
}

/*Grayscale*/
/*Grayscale은 정보전달과 위계를 나타내는 중요한 역할을 하며 주로 BG, Text, Line에 사용됩니다.
    특히 텍스트는 가독성을 고려해야 하므로 배경과의 명암비를 고려해야 합니다*/
.grayscale-0 {
  color: #ffffff;
}
.grayscale-5 {
  color: #f7f7f8;
}
.grayscale-10 {
  color: #f0f0f0;
}
.grayscale-20 {
  color: #e4e4e4;
}
.grayscale-30 {
  color: #d8d8d8;
}
.grayscale-40 {
  color: #c6c6c6;
}
.grayscale-50 {
  color: #999999;
}
.grayscale-60 {
  color: #717171;
}
.grayscale-70 {
  color: #555555;
}
.grayscale-80 {
  color: #4a4b4c;
}
.grayscale-90 {
  color: #121315;
}
.grayscale-100 {
  color: #000000;
}

/*Key colors proportion*/
/*색의 비율을 균형감 있게 맞추기 위해 60%의 비율로 배경색, 30%는 보조색, 10%는 강조 색으로 색 구성에 적용을 권장합니다.
  • 60%에 해당하는 색상은 주로 배경에 사용되며 흰색, 회색, 검은색처럼 무채색이나 Grayscale이 적용될 수 있습니다.
  • 30%에 해당하는 색상은 보조 색으로 BG color와 강조색을 연결하는 색상으로 BG color와 대비를 이루는 색을 조합하는 것이 좋습니다.
  • 10%에 해당하는 색상은 강조 색으로 강조색은 10% 이하로 적용하는 것이 색 구성에 효과적이며, 너무 높은 비율로 사용할 경우 강조성이 떨어지게 되므로 주의합니다.
  */

/*System colors*/
/*Danger : 오류, 금지, 위험, 삭제, 불가 등을 표시할 때 사용합니다.*/
.danger-5 {
  color: #feecf0;
}
.danger-10 {
  color: #fcd4de;
}
.danger-20 {
  color: #f799b1;
}
.danger-30 {
  color: #f36689;
}
.danger-40 {
  color: #ef3e5e;
}
.danger-50 {
  color: #eb003b;
}
.danger-60 {
  color: #d50136;
}
.danger-70 {
  color: #8d0023;
}
.danger-80 {
  color: #5e0018;
}
.danger-90 {
  color: #2f000c;
}

/*Warning : 실수나 오류가 발생하지 않도록 주의 사항을 전달할 때 사용합니다.  */
.warning-5 {
  color: #fffbf4;
}
.warning-10 {
  color: #fef0d5;
}
.warning-20 {
  color: #fddcac;
}
.warning-30 {
  color: #fac382;
}
.warning-40 {
  color: #f6a963;
}
.warning-50 {
  color: #f18231;
}
.warning-60 {
  color: #cf6223;
}
.warning-70 {
  color: #ad4618;
}
.warning-80 {
  color: #8b2e0f;
}
.warning-90 {
  color: #731e09;
}

/*success : 성공, 완료, 진행 등의 결과를 전달할 때 사용합니다.  */
.success-5 {
  color: #eef7f0;
}
.success-10 {
  color: #cee9d4;
}
.success-20 {
  color: #b2dcbb;
}
.success-30 {
  color: #8cca99;
}
.success-40 {
  color: #33a14b;
}
.success-50 {
  color: #008a1e;
}
.success-60 {
  color: #006e18;
}
.success-70 {
  color: #005312;
}
.success-80 {
  color: #00370c;
}
.success-90 {
  color: #002207;
}

/*information: 정보를 제공하거나 특별히 강조가 필요할 때 사용합니다. */
.information-5 {
  color: #e9f0ff;
}
.information-10 {
  color: #d4e1ff;
}
.information-20 {
  color: #a9c3ff;
}
.information-30 {
  color: #7da4ff;
}
.information-40 {
  color: #5286ff;
}
.information-50 {
  color: #2768ff;
}
.information-60 {
  color: #1f53cc;
}
.information-70 {
  color: #173e99;
}
.information-80 {
  color: #0c1f4d;
}
.information-90 {
  color: #040a1a;
}

/*==================================================================================*/

/*Layout*/
/*flex-가로-세로*/
/*s: flex-start, c: center, e: flex-end, sb: space-between, sa: space-around*/

/*flex-direction:column = 세로로 정렬 */
.flex-s-c {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.flex-s-s {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-s-e {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.flex-s-e {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.flex-c-s {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.flex-c-e {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.flex-c-c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-e-s {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.flex-sb-s {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-snd;
}
.flex-sb-c {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.flex-sb-e {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.flex-sa-e {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
}

/*flex-direction:row = 가로로 정렬 */

.flex-row-c-s {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.flex-row-c-c {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-row-s-e {
  display: flex;
  justify-content: start;
  align-items: flex-end;
}

.flex-row-s-c {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-row-s-stretch {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: stretch;
}

.flex-row-s-s {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-row-sb-e {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.flex-row-sb-s {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-row-sb-c {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-row-c-f {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-row-e-c {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-row-e-e {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.carbon-size {
  width: 150px;
  height: 150px;
}

/*==================================================================================*/

/*Search bar*/
.searchBar {
  width: 328px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--grayscale-40);
  background-color: #f8f8f8;
}

.searchBarBtn {
  width: 60px;
  height: 40px;
  background-color: var(--secondary-40);
  color: var(--grayscale-0);
  border-radius: 2px;
}

/*==================================================================================*/
/*가로 라인*/
.line-row {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--grayscale-40);
}

/*border-color*/
/*toggle-gnb 사용 색상*/

/*버튼 기본 레이아웃*/
.btn-refresh-info,
.btn-delete-info,
.btn-add-info{
  width: 50px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.24px;
  border-radius: 2px;
  border: 1px solid var(--button-border-color);
  background: var(--grayscale-0);
  margin-left: 1px;
}

.btn-info-on{
  background-color: var(--secondary-50);
  color: var(--secondary-0);
  font-weight: 500;
}