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-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-50 { --fs: 2.604vw; }    /* 50px */
.fs-48 { --fs: 2.5vw; }        /* 48px */
.fs-46 { --fs: 2.396vw; } /* 46px */
.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 *f/
.fs-14 { --fs: 0.729vw; }    /* 14px */
.fs-13 { --fs: 0.677vw; }    /* 13px */
.fs-11 { --fs: 0.573vw; }    /* 11px */
.fs-5 { --fs: 0.26vw; }    /* 5px (icon 사이즈용) */

/* 폰트 컬러 */
.fc-111{
  color: #111;
}
.fc-333{
  color: #333;
}
.fc-555{
  color: #555;
}
.fc-666{
  color: #666;
}
.fc-888{
  color: #888;
}

/* 반응형 폰트 크기 조정 */
@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-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: 4.382vw;
  }
    
  .fs-60 {
    --fs: 4.025vw;
  }

  .fs-55 {
    --fs: 3.865vw;
  }

  .fs-50 {
    --fs: 3.832vw;
  }

  .fs-48 {
    --fs: 4.65vw;
  }

    .fs-46 {
    --fs: 3.884vw;
  }
    
  .fs-45 {
    --fs: 3.584vw;
  }

  .fs-42 {
    --fs: 8.188vw;
  }

  .fs-40 {
    --fs: 4.083vw;
  }

  .fs-38 {
    --fs: 7.979vw;
  }

  .fs-36 {
    --fs: 4.880vw;
  }

  .fs-35 {
    --fs: 4.823vw;
  }

  .fs-34 {
    --fs: 4.223vw;
  }

  .fs-32 {
    --fs: 5.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: 4.042vw;
  }

  .fs-19 { 
    --fs: 3.98vw;
  }

  .fs-18 {
    --fs: 2.938vw;
  }

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