html {
  font-size: 16px;
 }
 
 :root {
  --mt-unit: 1%;
  --mb-unit: 1%;
  --mr-unit: 1%;
  --ml-unit: 1%;
  --pt-unit: 1%;
  --pb-unit: 1%;
  --pr-unit: 1%;
  --pl-unit: 1%;
  --gap-unit: 1rem;
 }
 /* Margin Top 클래스 */
 [class*="mt-"] {
  margin-top: calc(var(--mt-unit) * var(--mt-value));
 }
 
 /* Margin Bottom 클래스 */
 [class*="mb-"] {
  margin-bottom: calc(var(--mb-unit) * var(--mb-value));
 }
 
 /* Margin Right 클래스 */
 [class*="mr-"] {
  margin-right: calc(var(--mr-unit) * var(--mr-value));
 }
 
 /* Margin Left 클래스 */
 [class*="ml-"] {
  margin-left: calc(var(--ml-unit) * var(--ml-value));
 }
 
 /* Padding Top 클래스 */
 [class*="pt-"] {
  padding-top: calc(var(--pt-unit) * var(--pt-value));
 }
 
 /* Padding Bottom 클래스 */
 [class*="pb-"] {
  padding-bottom: calc(var(--pb-unit) * var(--pb-value));
 }
 
 /* Padding Right 클래스 */
 [class*="pr-"] {
  padding-right: calc(var(--pr-unit) * var(--pr-value));
 }
 
 /* Padding Left 클래스 */
 [class*="pl-"] {
  padding-left: calc(var(--pl-unit) * var(--pl-value));
 }
 
 /* Gap 클래스 */
 [class*="gap-"] {
  gap: calc(var(--gap-unit) * var(--gap-value));
 }
 
 /* Margin 값 정의 */
 .mt-1 { --mt-value: 1; }
 .mb-1 { --mb-value: 1; }
 .mr-1 { --mr-value: 1; }
 .ml-1 { --ml-value: 1; }
 
 .mt-2 { --mt-value: 2; }
 .mb-2 { --mb-value: 2; }
 .mr-2 { --mr-value: 2; }
 .ml-2 { --ml-value: 2; }
 
 .mt-3 { --mt-value: 3; }
 .mb-3 { --mb-value: 3; }
 .mr-3 { --mr-value: 3; }
 .ml-3 { --ml-value: 3; }
 
 .mt-4 { --mt-value: 4; }
 .mb-4 { --mb-value: 4; }
 .mr-4 { --mr-value: 4; }
 .ml-4 { --ml-value: 4; }
 
 .mt-5 { --mt-value: 5; }
 .mb-5 { --mb-value: 5; }
 .mr-5 { --mr-value: 5; }
 .ml-5 { --ml-value: 5; }
 
 .mt-6 { --mt-value: 6; }
 .mb-6 { --mb-value: 6; }
 .mr-6 { --mr-value: 6; }
 .ml-6 { --ml-value: 6; }
 
 .mt-10 { --mt-value: 10; }
 .mb-10 { --mb-value: 10; }
 .mr-10 { --mr-value: 10; }
 .ml-10 { --ml-value: 10; }
 
 .mt-13 { --mt-value: 13; }
 .mb-13 { --mb-value: 13; }
 .mr-13 { --mr-value: 13; }
 .ml-13 { --ml-value: 13; }
 
 .mt-15 { --mt-value: 15; }
 .mb-15 { --mb-value: 15; }
 .mr-15 { --mr-value: 15; }
 .ml-15 { --ml-value: 15; }
 
 .mt-17 { --mt-value: 17; }
 .mb-17 { --mb-value: 17; }
 .mr-17 { --mr-value: 17; }
 .ml-17 { --ml-value: 17; }
 
 .mt-18 { --mt-value: 18; }
 .mb-18 { --mb-value: 18; }
 .mr-18 { --mr-value: 18; }
 .ml-18 { --ml-value: 18; }
 
 .mt-20 { --mt-value: 20; }
 .mb-20 { --mb-value: 20; }
 .mr-20 { --mr-value: 20; }
 .ml-20 { --ml-value: 20; }
 
 .mt-25 { --mt-value: 25; }
 .mb-25 { --mb-value: 25; }
 .mr-25 { --mr-value: 25; }
 .ml-25 { --ml-value: 25; }
 
 .mt-30 { --mt-value: 30; }
 .mb-30 { --mb-value: 30; }
 .mr-30 { --mr-value: 30; }
 .ml-30 { --ml-value: 30; }
 
 .mt-33 { --mt-value: 33; }
 .mb-33 { --mb-value: 33; }
 .mr-33 { --mr-value: 33; }
 .ml-33 { --ml-value: 33; }
 
 /* Padding 값 정의 */
 .pt-1 { --pt-value: 1; }
 .pb-1 { --pb-value: 1; }
 .pr-1 { --pr-value: 1; }
 .pl-1 { --pl-value: 1; }
 
 .pt-2 { --pt-value: 2; }
 .pb-2 { --pb-value: 2; }
 .pr-2 { --pr-value: 2; }
 .pl-2 { --pl-value: 2; }
 
 .pt-3 { --pt-value: 3; }
 .pb-3 { --pb-value: 3; }
 .pr-3 { --pr-value: 3; }
 .pl-3 { --pl-value: 3; }
 
 .pt-4 { --pt-value: 4; }
 .pb-4 { --pb-value: 4; }
 .pr-4 { --pr-value: 4; }
 .pl-4 { --pl-value: 4; }
 
 .pt-5 { --pt-value: 5; }
 .pb-5 { --pb-value: 5; }
 .pr-5 { --pr-value: 5; }
 .pl-5 { --pl-value: 5; }
 
 .pt-6 { --pt-value: 6; }
 .pb-6 { --pb-value: 6; }
 .pr-6 { --pr-value: 6; }
 .pl-6 { --pl-value: 6; }
 
 .pt-10 { --pt-value: 10; }
 .pb-10 { --pb-value: 10; }
 .pr-10 { --pr-value: 10; }
 .pl-10 { --pl-value: 10; }
 
 .pt-13 { --pt-value: 13; }
 .pb-13 { --pb-value: 13; }
 .pr-13 { --pr-value: 13; }
 .pl-13 { --pl-value: 13; }
 
 .pt-15 { --pt-value: 15; }
 .pb-15 { --pb-value: 15; }
 .pr-15 { --pr-value: 15; }
 .pl-15 { --pl-value: 15; }
 
 .pt-20 { --pt-value: 20; }
 .pb-20 { --pb-value: 20; }
 .pr-20 { --pr-value: 20; }
 .pl-20 { --pl-value: 20; }
 
 .pt-25 { --pt-value: 25; }
 .pb-25 { --pb-value: 25; }
 .pr-25 { --pr-value: 25; }
 .pl-25 { --pl-value: 25; }
 
 .pt-30 { --pt-value: 30; }
 .pb-30 { --pb-value: 30; }
 .pr-30 { --pr-value: 30; }
 .pl-30 { --pl-value: 30; }
 
 .pt-33 { --pt-value: 33; }
 .pb-33 { --pb-value: 33; }
 .pr-33 { --pr-value: 33; }
 .pl-33 { --pl-value: 33; }
 
 .mr-auto{
  /* 컨텐츠가 왼쪽에 붙게할 때*/
  margin-right: auto;
 }
 
 [class*="gap-"] {
  gap: calc(var(--gap-unit) * var(--gap-value));
 }
 
 .gap-3 { --gap-value: 0.1875; }  /* 3px  */
 .gap-5 { --gap-value: 0.3125; }  /* 5px  */
 .gap-7 { --gap-value: 0.4375; }  /* 7px  */
 .gap-10 { --gap-value: 0.625; }  /* 10px  */
 .gap-15 { --gap-value: 0.9375; } /* 15px  */
 .gap-20 { --gap-value: 1.25; }   /* 20px  */
 .gap-30 { --gap-value: 1.8; }   /* 30px  */
 .gap-40 { --gap-value: 2.5; }    /* 40px  */
 .gap-50 { --gap-value: 3.125; }  /* 50px  */
 .gap-55 { --gap-value: 3.4375; } /* 55px  */
 .gap-60 { --gap-value: 3.75; }   /* 60px  */
 .gap-70 { --gap-value: 4.375; }  /* 70px  */
 .gap-100 { --gap-value: 6.25; }  /* 100px  */
 
 
 
 /* 동적 폰트 크기 클래스 */
 [class*="fs-"] {
  font-size: var(--fs);
 }
 
 .fs-195 { --fs: 10.156vw; } /* 195px */
 .fs-150 { --fs: 7.813vw; }   /* 150px */
 .fs-130 { --fs: 6.771vw; }   /* 130px */
 .fs-120 { --fs: 6.25vw; }   /* 120px */
 .fs-100 { --fs: 5.208vw; }    /* 100px */
 .fs-90 { --fs: 4.688vw; }    /* 90px */
 .fs-85 { --fs: 4.427vw; }    /* 85px */
 .fs-80 { --fs: 4.167vw; }        /* 80px */
 .fs-78 { --fs: 4.063vw; }        /* 78px */
 .fs-70 { --fs: 3.646vw; }    /* 70px */
 .fs-65 { --fs: 3.385vw; }     /* 65px */
 .fs-60 { --fs: 3.125vw; }     /* 60px */
 .fs-55 { --fs: 2.865vw; }   /* 55px */
 .fs-52 { --fs: 2.708vw; }    /* 52px */
 .fs-50 { --fs: 2.604vw; }    /* 50px */
 .fs-48 { --fs: 2.5vw; }        /* 48px */
 .fs-45 { --fs: 2.344vw; } /* 45px */
 .fs-42 { --fs: 2.188vw; }    /* 42px */
 .fs-40 { --fs: 2.083vw; }      /* 40px */
 .fs-38 { --fs: 1.979vw; }    /* 38px */
 .fs-36 { --fs: 1.875vw; }    /* 36px */
 .fs-35 { --fs: 1.823vw; }   /* 35px */
 .fs-34 { --fs: 1.771vw; }   /* 34px */
 .fs-32 { --fs: 1.667vw; }   /* 32px */
 .fs-30 { --fs: 1.563vw; }    /* 30px */
 .fs-28 { --fs: 1.458vw; }     /* 28px */
 .fs-27 { --fs: 1.406vw; }     /* 27px */
 .fs-26 { --fs: 1.354vw; }   /* 26px */
 .fs-25 { --fs: 1.302vw; }   /* 25px */
 .fs-24 { --fs: 1.25vw; }   /* 24px */
 .fs-22 { --fs: 1.146vw; }    /* 22px */
 .fs-20 { --fs: 1.042vw; }     /* 20px */
 .fs-19 { --fs: 0.99vw;}      /* 19px */
 .fs-18 { --fs: 0.938vw; }    /* 18px */
 .fs-17 { --fs: 0.885vw; }    /* 17px */
 .fs-16 { --fs: 0.833vw; }     /* 16px */
 .fs-15 { --fs: 0.781vw; }     /* 15px */
 .fs-14 { --fs: 0.729vw; }    /* 14px */
 .fs-13 { --fs: 0.677vw; }    /* 13px */
 .fs-12 { --fs: 0.625vw; }    /* 12px */
 .fs-11 { --fs: 0.573vw; }    /* 11px */
 .fs-5 { --fs: 0.26vw; }    /* 5px (icon 사이즈용) */
 
 /* 폰트 컬러 */

 .fc-111{
   color: #111;
 }
 .fc-333{
   color: #333;
 }
 .fc-444{
  color: #444;
}
 .fc-555{
   color: #555;
 }
 .fc-666{
   color: #666;
 }
 .fc-888{
   color: #888;
 }
 .fc-aaa{
  color: #aaa;
  }
  .fc-bbb{
    color: #bbb;
  }
  .fc-ccc{
    color: #ccc;
  }
 
 /* 반응형 폰트 크기 조정 */
 @media screen and (max-width: 768px) {
 
 
  html {
   font-size: 14px;
  }
  
   .gap-50 {
    --gap-value: 1.125;
   }
 .m-mb-0{
  margin-bottom: 0 !important;
 }
 .m-mt-0{
  margin-top: 0 !important;
 }
 
 
 }
 
 @media screen and (max-width: 480px) {
  html {
   font-size: 12px;
  }
 }
 
 
 
 .f-white {
  color: white;
 }
 
 .f-black {
  color: #000;
 }
 
 .bg-white {
  background-color: white;
 }
 
 .bg-black {
  background-color: black;
 }
 
 .w-100vw {
  width: 100vw;
 }
 
 .w-100vw {
  width: 100vw;
 }
 
 .h-100vh {
  height: 100vh;
 }
 
 .w-100 {
  width: 100%;
 }
 
 .h-100 {
  height: 100%;
 }
 .h-80{
  height:80%;
 }
 .h-100vh {
  height: 100vh;
 }
 .w-90 {
  width: 90%;
 }
 .w-80{
  width: 80%;
 }
 
 .w-70 {
  width: 70%;
 }
 
 .w-50 {
  width: 50%;
 }
 .w-auto{
  width:auto;
 }
 .h-auto{
  height:auto;
 }
 .w-fitcontent {
  width: fit-content;
 }
 
 .h-fitcontent {
  height: fit-content;
 }
 
 .flex {
  display: flex;
 }
 
 .row-flex {
  display: flex;
  flex-direction: row;
 }
 
 .col-flex {
  display: flex;
  flex-direction: column;
 }
 
 .flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .flex-wrap {
  flex-wrap: wrap;
 }
 
 .between {
  justify-content: space-between;
 }
 
 .justify-center {
  justify-content: center;
 }
 
 .align-center {
  align-items: center;
 }
 
 .align-end {
  align-items: flex-end;
 }
 
 .txt-center {
  text-align: center;
 }
 
 .justify-end {
  justify-content: flex-end;
 }
 
 .ws-nowrap {
  white-space: nowrap;
 }
 
 .txt-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: block;
 }
 
 .pointer {
  cursor: pointer
 }
 
 .p-200 {
  padding: 200px;
 }
 
 .p-150 {
  padding: 150px;
 }
 .p-100 {
  padding: 100px;
 }
 
 .p-15{
  padding:15px;
 }
 .pl-10 {
  padding-left: 10px;
 }
 
 .pl-30 {
  padding-left: 30px;
 }
 
 .pl-80 {
  padding-left: 80px;
 }
 
 
 
 .pb-5 {
  padding-bottom: 5px;
 }
 
 .pb-10 {
  padding-bottom: 10px;
 }
 
 .pb-30 {
  padding-bottom: 30px;
 }
 
 .pb-150 {
  padding-bottom: 150px;
 }
 
 .pt-25 {
  padding-top: 25px;
 }
 
 .pt-30 {
  padding-top: 30px;
 }
 
 .pt-50 {
  padding-top: 50px;
 }
 
 .pt-400 {
  padding-top: 400px;
 }
 
 .pr-10 {
  padding-right: 10px;
 }
 
 .pr-200 {
  padding-right: 200px;
 }
 
 
 .m-auto {
  margin: auto;
 }
 
 .m-200 {
  margin: 200px;
 }
 
 .m-150 {
  margin: 150px;
 }
 
 .m-100 {
  margin: 100px;
 }
 
 .m-60 {
  margin: 60px;
 }
 
 .m-50 {
  margin: 50px;
 }
 
 .txt-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
 }
 
 .txt-right {
  text-align: right;
 }
 
 .txt-left {
  text-align: left;
 }
 
 .pc-none {
  display: none;
 }
 
 .m-none {
  display: flex;
 }
 
 
 /* 반응형 폰트 크기 조정 */
 @media screen and (max-width: 768px) {
   .fs-195 {
     --fs: 20.156vw;
   }
 
   .fs-150 {
     --fs: 18.813vw;
   }
 
   .fs-130 {
     --fs: 15.771vw;
   }

   .fs-120 {
    --fs: 10.771vw;
  }
 
   .fs-100 {
     --fs: 13.208vw;
   }
 
   .fs-90 {
     --fs: 4.688vw;
   }
 
   .fs-85 {
     --fs: 7.827vw;
   }
 
   .fs-80 {
     --fs: 7.425vw;
   }
 
   .fs-78 {
     --fs: 4.425vw;
   }
 
   .fs-70 {
     --fs: 4.646vw;
   }

   .fs-65 {
    --fs: 3.225vw;
  }
 
   .fs-60 {
     --fs: 4.525vw;
   }
 
   .fs-55 {
     --fs: 3.865vw;
   }

   .fs-52{
    --fs: 3.832vw;
  }
 
   .fs-50 {
     --fs: 3.832vw;
   }
 
   .fs-48 {
     --fs: 4.65vw;
   }
 
   .fs-45 {
     --fs: 8.584vw;
   }
 
   .fs-42 {
     --fs: 8.188vw;
   }
 
   .fs-40 {
     --fs: 4.083vw;
   }
 
   .fs-38 {
     --fs: 4.979vw;
   }
 
   .fs-36 {
     --fs: 4.880vw;
   }
 
   .fs-35 {
     --fs: 6.823vw;
   }
 
   .fs-34 {
     --fs: 6.223vw;
   }
 
   .fs-32 {
     --fs: 4.423vw;
   }
 
 
   .fs-30 {
     --fs: 4.563vw;
   }
 
   .fs-28 {
     --fs: 4.128vw;
   }
 
   .fs-27 {
     --fs: 4.328vw;
   }
   
   .fs-26 {
     --fs: 4.315vw;
   }
 
   .fs-25 {
     --fs: 4.302vw;
   }
 
   .fs-24 {
     --fs: 3.215vw;
   }
 
   .fs-22 {
     --fs: 3.150vw;
   }
 
   .fs-20 {
     --fs: 3.542vw;
   }
 
   .fs-19 { 
     --fs: 3.78vw;
   }
 
   .fs-18 {
     --fs: 3.738vw;
   }
 
   .fs-17 {
     --fs: 3.624vw;
   }
 
   .fs-16 {
     --fs: 3.433vw;
   }
 
   .fs-15 {
     --fs: 3.084vw;
   }
 
   .fs-14 {
     --fs: 2.729vw;
   }
 
   .fs-13 {
     --fs: 2.368vw;
   }

   .fs-12 {
    --fs: 1.842vw;
  }
 
 
   .fs-11 {
     --fs: 1.539vw;
   }
 
   .fs-5 {
     --fs: 0.26vw;
   }
 
 }
 /* mobile */
 @media screen and (max-width: 767px) {
 .m-w-90{
  width: 90%;
 }
  .pc-none {
   display: block;
  }
 
  .m-none {
   display: none;
  }
 
  .m-bg-white {
   background-color: white;
  }
 
  .m-f-black {
   color: black;
  }
 
  .m-f-white {
   color: white;
  }
 
  .m-justify-start {
   justify-content: flex-start;
  }
 
  .m-ws-wrap {
   white-space: wrap;
  }
 
  .m-none {
   display: none;
  }
 
  .m-col-flex {
   flex-direction: column;
  }
 
  .m-row-flex {
   flex-direction: row;
  }
 
  .m-block{
   display: block;
  }
 
  .m-flex-wrap {
   flex-wrap: wrap;
  }
 
 
  .m-align-start{
   align-items: flex-start;
  }
 
  .m-between {
   justify-content: space-between;
  }
 
  .m-txt-center{
   text-align:center;
  }
 
 
  .m-w-100 {
   width: 100%;
  }
 
  .m-w-50 {
   width: 48% !important;
  }
 
  .m-h-100 {
   height: 100%;
  }
 
  .m-mb-20 {
   margin-bottom: 20px;
  }
 
  .m-mb-50 {
   margin-bottom: 50px;
  }
 
  .m-mt-20 {
   margin-top: 20px;
  }
 
  .m-mt-50 {
   margin-top: 55px;
  }
 
  .m-mt-40 {
   margin-top: 40px;
  }
 
  .m-mt-100 {
   margin-top: 100px;
  }
 
 
  .m-pl-10 {
   padding-left: 10px;
  }
 
  .m-100 {
   margin: 50px;
  }
 
  .p-100 {
   padding: 50px;
  }
 
  .p-200 {
   padding: 100px;
  }
 
  .pt-50 {
   padding-top: 25px;
  }
 
  .pb-10 {
   padding-bottom: 5px;
  }
 
  .pb-150 {
   padding-bottom: 75px;
  }
 
  .mr-30 {
   margin-right: 15px;
  }
 
  .mt-70 {
   margin-top: 35px;
  }
 
  .mt-50 {
   margin-top: 25px;
  }
 
  .mt-80 {
   margin-top: 40px;
  }
 
  .mt-90 {
   margin-top: 50px;
  }
 
  .mt-150 {
   margin-top: 75px;
  }
 
  .mb-130 {
   margin-bottom: 65px;
  }
 
  .mb-120 {
   margin-bottom: 60px;
  }
 
  .mb-90 {
   margin-bottom: 45px;
  }
 
  .mb-80 {
   margin-bottom: 40px;
  }
 
  .mb-70 {
   margin-bottom: 35px;
  }
 
  .mb-50 {
   margin-bottom: 25px;
  }
 
  .mb-40 {
   margin-bottom: 20px;
  }
 
  .mb-30 {
   margin-bottom: 15px;
  }
 
  .mb-150 {
   margin-bottom: 80px;
  }
 
  .mt-130 {
   margin-top: 70px;
  }
 
  .mt-30 {
   margin-top: 15px;
  }
 
  .mb-15 {
   margin-bottom: 8px;
  }
 
  .mt-100 {
   margin-top: 50px;
  }
 
  .mb-100 {
   margin-bottom: 50px;
  }
 
  .mr-25 {
   margin-right: 12px;
  }
 
  .m-gap-10 {
   gap: 10px;
  }
 
  .m-gap-20 {
   gap: 20px;
  }
 
  .m-gap-40 {
   gap: 40px;
  }
 
 
 
  .gap-20 {
   gap: 10px;
  }
 
  .gap-40 {
   gap: 20px;
  }
 
 
  .gap-15 {
   gap: 6px;
  }
 
  .gap-30 {
   gap: 15px;
  }
 
  .gap-70 {
   gap: 35px;
  }
 
  .gap-100 {
   gap: 50px;
  }
 
  .gap-150 {
   gap: 75px;
  }
 
  .gap-200 {
   gap: 100px;
  }
 
  .m-justify-start {
   justify-content: flex-start;
  }
 
  .m-50 {
   margin: 20px;
  }
 }
 
 /* tablet */
 @media screen and (min-width: 768px) and (max-width: 1024px) {
   .fs-45 {
     --fs: 3.431vw;
   }
 
   .fs-40 {
     --fs: 3.258vw;
   }
 
   .fs-35 {
     --fs: 2.823vw;
   }
 
   .fs-30 {
     --fs: 2.450vw;
   }
 
   .fs-25 {
     --fs: 2.302vw;
   }
 
   .fs-24 {
     --fs: 2.202vw;
   }
 
 
   .fs-22 {
     --fs: 2.154vw;
   }
 
   .fs-20 {
     --fs: 2.042vw;
   }
 
   .fs-18 {
     --fs: 1.438vw;
   }
 
   .fs-17 {
     --fs: 1.425vw;
   }
 
   .fs-16 {
     --fs: 1.4vw;
   }
 
   .fs-15 {
     --fs: 1.35vw;
   }
 
   .fs-14{
     --fs: 1.32vw;
   }
 
   .fs-13{
     --fs: 1.3vw;
   }
 
   .fs-13{
     --fs: 1.2vw;
   }
 
   .m-h-auto {
     height: auto;
   }
 }