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-22 { --mt-value: 22; }
.mb-22 { --mb-value: 22; }
.mr-22 { --mr-value: 22; }
.ml-22 { --ml-value: 22; }

.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: 12.1875rem; } /* 195px */
.fs-150 { --fs: 9.375rem; }   /* 150px */
.fs-100 { --fs: 6.25rem; }    /* 100px */
.fs-90 { --fs: 5.625rem; }    /* 90px */
.fs-80 { --fs: 5rem; }        /* 80px */
.fs-70 { --fs: 4.375rem; }    /* 70px */
.fs-60 { --fs: 3.75rem; }     /* 60px */
.fs-55 { --fs: 3.4375rem; }   /* 55px */
.fs-50 { --fs: 3.125rem; }    /* 50px */
.fs-48 { --fs: 3rem; }        /* 48px */
.fs-45 { --fs: 2.8125rem; }  /* 45px */
.fs-42 { --fs: 2.625rem; }    /* 42px */
.fs-40 { --fs: 2.5rem; }      /* 40px */
.fs-38 { --fs: 2.375rem; }    /* 38px */
.fs-35 { --fs: 2.1875rem; }   /* 35px */
.fs-30 { --fs: 1.875rem; }    /* 30px */
.fs-28 { --fs: 1.75rem; }     /* 28px */
.fs-25 { --fs: 1.5625rem; }   /* 25px */
.fs-22 { --fs: 1.375rem; }    /* 22px */
.fs-20 { --fs: 1.25rem; }     /* 20px */
.fs-18 { --fs: 1.125rem; }    /* 18px */
.fs-16 { --fs: 1rem; }        /* 16px */
.fs-14 { --fs: 0.875rem; }    /* 14px */
.fs-5 { --fs: 0.3125rem; }    /* 5px (icon 사이즈용) */

/* 반응형 폰트 크기 조정 */
@media screen and (max-width: 768px) {


 html {
  font-size: 14px;
 }
 .fs-150 {
  --fs: 6.375rem;
 }
 .fs-100 {
  --fs: 3.25rem;
 }

 .fs-80 {
  --fs: 3rem;
 }
 .fs-70 {
  --fs: 3.375rem;
 }
 .fs-60 {
  --fs: 2.75rem;
 }

 .fs-55 {
  --fs: 2.4375rem;
 }
 .fs-50 {
  --fs: 2.125rem;
 }

 .fs-48 {
  --fs: 1.68em;
 }

 .fs-45 {
  --fs: 1.4125rem;
 }

 .fs-42 {
  --fs: 1.38rem;
 }
 .fs-28 {
  --fs: 1.25rem;
 }
 .fs-25 {
  --fs: 1.2rem;
 }
 .fs-22 {
  --fs: 1.175rem;
 }
 .fs-18 {
  --fs: 1rem;
 }

 .m-gap-0{
  gap:0;
 }

  .gap-50 {
   --gap-value: 1.125;
  }
.m-mb-0{
 margin-bottom: 0 !important;
}
.m-mt-0{
 margin-top: 0 !important;
}
.m-mr-2{
}

}

@media screen and (max-width: 480px) {
 html {
  font-size: 12px;
 }
}



.f-white {
 color: white;
}

.f-black {
 color: #111111;
}

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


/* mobile */
@media screen and (max-width: 767px) {
.m-w-90{
 width: 90%;
}
 .m-w-90vw{
  width:90vw;
 }
 .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;
 }

 /*.fs-195 {*/
 /* font-size: 105px;*/
 /*}*/


 /*.fs-150 {*/
 /* font-size: 75px;*/
 /*}*/

 /*.fs-100 {*/
 /* font-size: 50px;*/
 /*}*/

 /*.fs-90 {*/
 /* font-size: 45px;*/
 /*}*/

 /*.fs-80 {*/
 /* font-size: 40px;*/
 /*}*/

 /*.fs-70 {*/
 /* font-style: 35px;*/
 /*}*/

 /*.fs-60 {*/
 /* font-size: 30px;*/
 /*}*/

 /*.fs-55 {*/
 /* font-size: 28px;*/
 /*}*/

 /*.fs-50 {*/
 /* font-size: 25px;*/
 /*}*/

 /*.fs-42 {*/
 /* font-size: 22px;*/
 /*}*/

 /*.fs-40 {*/
 /* font-size: 21px;*/
 /*}*/

 /*.fs-35 {*/
 /* font-size: 20px;*/
 /*}*/

 /*.fs-30 {*/
 /* font-size: 19px;*/
 /*}*/

 /*.fs-28 {*/
 /* font-size: 20px;*/
 /*}*/

 /*.fs-25 {*/
 /* font-size: 18px;*/
 /*}*/

 /*.fs-22 {*/
 /* font-size: 16px;*/
 /*}*/

 /*.fs-20 {*/
 /* font-size: 14px;*/
 /*}*/

 /*.fs-18 {*/
 /* font-size: 12px;*/
 /*}*/

 /*.fs-16 {*/
 /* font-size: 10px;*/
 /*}*/

 /*.fs-14 {*/
 /* font-size: 10px;*/
 /*}*/

 /*.fs-13 {*/
 /* font-size: 10px;*/
 /*}*/

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

 .m-mt-2 { --mt-value: 2; }
 .m-mb-2 { --mb-value: 2; }
 .m-mr-2 { --mr-value: 2; }
 .m-ml-2 { --ml-value: 2; }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
 .p-200 {
  padding: 150px;
 }

 .pb-10 {
  padding-bottom: 7.5px;
 }

 .fs-150 {
  font-size: 100px;
 }

 .fs-100 {
  font-size: 70px;
 }

 .fs-90 {
  font-size: 70px;
 }

 .fs-80 {
  font-size: 60px;
 }

 .fs-70 {
  font-style: 50px;
 }

 .fs-60 {
  font-size: 45px;
 }

 .fs-55 {
  font-size: 40px;
 }

 .fs-50 {
  font-size: 38px;
 }

 .fs-42 {
  font-size: 35px;
 }

 .fs-35 {
  font-size: 30px;
 }

 .fs-30 {
  font-size: 25px;
 }

 .fs-28 {
  font-size: 22px;
 }

 .fs-25 {
  font-size: 20px;
 }

 .fs-22 {
  font-size: 18px;
 }

 .fs-20 {
  font-size: 16px;
 }

 .fs-18 {
  font-size: 14.3px;
 }

 .fs-16 {
  font-size: 13.3px;
 }

 .fs-14 {
  font-size: 12.3px;
 }

 .gap-70 {
  gap: 55px;
 }

 .gap-100 {
  gap: 75px;
 }

 .gap-150 {
  gap: 105px;
 }

 .gap-200 {
  gap: 130px;
 }
}