.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-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;
}