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

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

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

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

.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-70 {
  --fs: 3.646vw;
}

/* 65px */
.fs-65 {
  --fs: 3.385vw;
}

/* 70px */
.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-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-26 {
  --fs: 1.354vw;
}

/* 27px */
.fs-27 {
  --fs: 1.406vw;
}

/* 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;
}

/* 12px */
.fs-12 {
  --fs: 0.625vw;
}

/* 13px */
.fs-11 {
  --fs: 0.573vw;
}

/* 11px */
.fs-5 {
  --fs: 0.26vw;
}

/* 5px (icon 사이즈용) */

/* 반응형 폰트 크기 조정 */
@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: #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;
}

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

.m-none {
  display: flex !important;
}


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

    .fs-65 {
    --fs: 6.525vw;
  }
    
  .fs-60 {
    --fs: 7.025vw;
  }

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

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

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

  .fs-45 {
    --fs: 8.584vw;
  }

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

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

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

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

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

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

  .fs-32 {
    --fs: 5.423vw;
  }


  .fs-30 {
    --fs: 5.25vw;
  }

  .fs-28 {
    --fs: 5.128vw;
  }

  .fs-27 {
    --fs: 4.320vw;
  }

  .fs-26 {
    --fs: 4.315vw;
  }

  .fs-25 {
    --fs: 4.302vw;
  }

  .fs-24 {
    --fs: 4.215vw;
  }

  .fs-22 {
    --fs: 4.150vw;
  }

  .fs-20 {
    --fs: 4.042vw;
  }

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

  .fs-18 {
    --fs: 3.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-12 {
    --fs: 1.452vw;
  }


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

  .m-none {
    display: none  !important;
  }

  .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-27 {
    --fs: 2.452vw;
  }

  .fs-25 {
    --fs: 2.302vw;
  }

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

  .fs-12 {
    --fs: 1.2vw;
  }

  .m-h-auto {
    height: auto;
  }
}