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-6 {
  --mt-value: 6;
}

.mb-6 {
  --mb-value: 6;
}

.mr-6 {
  --mr-value: 6;
}

.ml-6 {
  --ml-value: 6;
}

.mt-7 {
  --mt-value: 7;
}

.mb-7 {
  --mb-value: 7;
}

.mr-7 {
  --mr-value: 7;
}

.ml-7 {
  --ml-value: 7;
}

.mt-8 {
  --mt-value: 8;
}

.mb-8 {
  --mb-value: 8;
}

.mr-8 {
  --mr-value: 8;
}

.ml-8 {
  --ml-value: 8;
}

.mt-9 {
  --mt-value: 9;
}

.mb-9 {
  --mb-value: 9;
}

.mr-9 {
  --mr-value: 9;
}

.ml-9 {
  --ml-value: 9;
}

.mt-10 {
  --mt-value: 10;
}

.mb-10 {
  --mb-value: 10;
}

.mr-10 {
  --mr-value: 10;
}

.ml-10 {
  --ml-value: 10;
}
.mt-12 {
  --mt-value: 12;
}

.mb-12 {
  --mb-value: 12;
}

.mr-12 {
  --mr-value: 12;
}

.ml-12 {
  --ml-value: 12;
}
.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;
}



.gap-3 {
  --gap-value: 0.1875;
}

.gap-5 {
  --gap-value: 0.3125;
}

.gap-7 {
  --gap-value: 0.4375;
}

.gap-10 {
  --gap-value: 0.625;
}

.gap-15 {
  --gap-value: 0.9375;
}

.gap-20 {
  --gap-value: 1.25;
}

.gap-30 {
  --gap-value: 1.8;
}

.gap-35 {
  --gap-value: 2.0;
}

.gap-40 {
  --gap-value: 2.5;
}

.gap-50 {
  --gap-value: 3.125;
}

.gap-55 {
  --gap-value: 3.4375;
}

.gap-60 {
  --gap-value: 3.75;
}

.gap-70 {
  --gap-value: 4.375;
}

.gap-100 {
  --gap-value: 6.25;
}

.f-white {
  color: white;
}
.f-black {
  color: #000;
}

.f-black,
.f-black1 {
  color: #111111;
}

.f-black2 {
  color: #222222;
}

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

.mr-auto {
  /* 컨텐츠가 왼쪽에 붙게할 때*/
  margin-right: 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;
}
.element-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}
.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.align-start{
  align-items: start;
}

.between, .justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}

.ws-nowrap {
  white-space: nowrap;
}

.pointer {
  cursor: pointer;
}

.txt-center {
  text-align: center;
}

.txt-right {
  text-align: right;
}

.txt-left {
  text-align: left;
}

.pc-none {
  display: none;
}

.m-none {
  display: flex;
}

.txt-underline {
  text-decoration: underline;
}

/* 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-60{
  width:60%
}

  .m-w-50 {
    width: 48%
  }
  .m-w-40 {
    width: 40%
  }

  .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-20{
    margin-top:20px;
  }

  .m-mt-100 {
    margin-top: 100px;
  }

  .m-pl-10 {
    padding-left: 10px;
  }
.m-pl-150{
  padding-left:150px;
}
  .m-justify-start {
    justify-content: flex-start;
  }


/*모바일*/
    /* Margin 값 정의 */
    .mt-1 { --mt-value: 4; }
    .mb-1 { --mb-value: 4; }
    .mr-1 { --mr-value: 4; }
    .ml-1 { --ml-value: 4; }

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

    .mt-3 { --mt-value: 6; }
    .mb-3 { --mb-value: 6; }
    .mr-3 { --mr-value: 6; }
    .ml-3 { --ml-value: 6; }

    .mt-4 { --mt-value: 7; }
    .mb-4 { --mb-value: 7; }
    .mr-4 { --mr-value: 7; }
    .ml-4 { --ml-value: 7; }

    .mt-5 { --mt-value: 8; }
    .mb-5 { --mb-value: 8; }
    .mr-5 { --mr-value: 8; }
    .ml-5 { --ml-value: 8; }

    .mt-6 { --mt-value: 9; }
    .mb-6 { --mb-value: 9; }
    .mr-6 { --mr-value: 9; }
    .ml-6 { --ml-value: 9; }

    .mt-7 { --mt-value: 10; }
    .mb-7 { --mb-value: 10; }
    .mr-7 { --mr-value: 10; }
    .ml-7 { --ml-value: 10; }

    .mt-8 { --mt-value: 11; }
    .mb-8 { --mb-value: 11; }
    .mr-8 { --mr-value: 11; }
    .ml-8 { --ml-value: 11; }

    .mt-9 { --mt-value: 12; }
    .mb-9 { --mb-value: 12; }
    .mr-9 { --mr-value: 12; }
    .ml-9 { --ml-value: 12; }

    .mt-10 { --mt-value: 13; }
    .mb-10 { --mb-value: 13; }
    .mr-10 { --mr-value: 13; }
    .ml-10 { --ml-value: 13; }

    .mt-12 { --mt-value: 15; }
    .mb-12 { --mb-value: 15; }
    .mr-12 { --mr-value: 15; }
    .ml-12 { --ml-value: 15; }

    .mt-13 { --mt-value: 16; }
    .mb-13 { --mb-value: 16; }
    .mr-13 { --mr-value: 16; }
    .ml-13 { --ml-value: 16; }

    .mt-15 { --mt-value: 18; }
    .mb-15 { --mb-value: 18; }
    .mr-15 { --mr-value: 18; }
    .ml-15 { --ml-value: 18; }

    .mt-17 { --mt-value: 20; }
    .mb-17 { --mb-value: 20; }
    .mr-17 { --mr-value: 20; }
    .ml-17 { --ml-value: 20; }

    .mt-18 { --mt-value: 21; }
    .mb-18 { --mb-value: 21; }
    .mr-18 { --mr-value: 21; }
    .ml-18 { --ml-value: 21; }

    .mt-20 { --mt-value: 23; }
    .mb-20 { --mb-value: 23; }
    .mr-20 { --mr-value: 23; }
    .ml-20 { --ml-value: 23; }

    .mt-25 { --mt-value: 28; }
    .mb-25 { --mb-value: 28; }
    .mr-25 { --mr-value: 28; }
    .ml-25 { --ml-value: 28; }

    .mt-30 { --mt-value: 33; }
    .mb-30 { --mb-value: 33; }
    .mr-30 { --mr-value: 33; }
    .ml-30 { --ml-value: 33; }

    .mt-33 { --mt-value: 36; }
    .mb-33 { --mb-value: 36; }
    .mr-33 { --mr-value: 36; }
    .ml-33 { --ml-value: 36; }

    /* Padding 값 */
  .pt-1 { --pt-value: 4; }
  .pb-1 { --pb-value: 4; }
  .pr-1 { --pr-value: 4; }
  .pl-1 { --pl-value: 4; }

  .pt-2 { --pt-value: 5; }
  .pb-2 { --pb-value: 5; }
  .pr-2 { --pr-value: 5; }
  .pl-2 { --pl-value: 5; }

  .pt-3 { --pt-value: 6; }
  .pb-3 { --pb-value: 6; }
  .pr-3 { --pr-value: 6; }
  .pl-3 { --pl-value: 6; }

  .pt-4 { --pt-value: 7; }
  .pb-4 { --pb-value: 7; }
  .pr-4 { --pr-value: 7; }
  .pl-4 { --pl-value: 7; }

  .pt-5 { --pt-value: 8; }
  .pb-5 { --pb-value: 8; }
  .pr-5 { --pr-value: 8; }
  .pl-5 { --pl-value: 8; }

  .pt-6 { --pt-value: 9; }
  .pb-6 { --pb-value: 9; }
  .pr-6 { --pr-value: 9; }
  .pl-6 { --pl-value: 9; }

  .pt-10 { --pt-value: 13; }
  .pb-10 { --pb-value: 13; }
  .pr-10 { --pr-value: 13; }
  .pl-10 { --pl-value: 13; }

  .pt-13 { --pt-value: 16; }
  .pb-13 { --pb-value: 16; }
  .pr-13 { --pr-value: 16; }
  .pl-13 { --pl-value: 16; }

  .pt-15 { --pt-value: 18; }
  .pb-15 { --pb-value: 18; }
  .pr-15 { --pr-value: 18; }
  .pl-15 { --pl-value: 18; }

  .pt-20 { --pt-value: 23; }
  .pb-20 { --pb-value: 23; }
  .pr-20 { --pr-value: 23; }
  .pl-20 { --pl-value: 23; }

  .pt-25 { --pt-value: 28; }
  .pb-25 { --pb-value: 28; }
  .pr-25 { --pr-value: 28; }
  .pl-25 { --pl-value: 28; }

  .pt-30 { --pt-value: 33; }
  .pb-30 { --pb-value: 33; }
  .pr-30 { --pr-value: 33; }
  .pl-30 { --pl-value: 33; }

  .pt-33 { --pt-value: 36; }
  .pb-33 { --pb-value: 36; }
  .pr-33 { --pr-value: 36; }
  .pl-33 { --pl-value: 36; }

    .gap-3 { --gap-value: 0.125; }  /* 원래 0.1875 */
    .gap-5 { --gap-value: 0.215; }  /* 원래 0.3125 */
    .gap-7 { --gap-value: 0.3; }    /* 원래 0.4375 */
    .gap-10 { --gap-value: 0.4; }   /* 원래 0.625 */
    .gap-15 { --gap-value: 0.6; }   /* 원래 0.9375 */
    .gap-20 { --gap-value: 0.8; }   /* 원래 1.25 */
    .gap-30 { --gap-value: 1.2; }   /* 원래 1.8 */
    .gap-35 { --gap-value: 1.4; }   /* 원래 2.0 */
    .gap-40 { --gap-value: 1.6; }   /* 원래 2.5 */
    .gap-50 { --gap-value: 2.0; }   /* 원래 3.125 */
    .gap-55 { --gap-value: 2.2; }   /* 원래 3.4375 */
    .gap-60 { --gap-value: 2.4; }   /* 원래 3.75 */
    .gap-70 { --gap-value: 2.8; }   /* 원래 4.375 */
    .gap-100 { --gap-value: 4.0; }  /* 원래 6.25 */




}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .t-h-auto {
    height: auto;
  }

  .t-col-flex {
    flex-direction: column;
  }

  .t-row-flex {
    flex-direction: row;
  }


}