@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extra-light {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semi-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extra-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato{
  font-family: "Lato", sans-serif !important;
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-medium {
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.lato-semi-bold {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-extra-bold {
  font-family: "Lato", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}



: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: 0.1vw;
  --main-color: #302d90;
}

.f-main-color {
  color: var(--main-color);
}

.bg-main-color {
  background-color: var(--main-color);
}


/***********동적 마진 크기 클래스***********/

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

[class*="gap-"] {
  gap: calc(var(--gap-unit) * var(--gap-value));
}

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

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

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

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

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


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


/***********동적 갭 크기 클래스***********/


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

.gap-4 {
  --gap-value: 4;
}
.gap-5 {
  --gap-value: 5;
}
.gap-6 {
   --gap-value: 6;
 }

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

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

.gap-13 {
  --gap-value: 13;
}

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

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

.gap-22 {
  --gap-value: 22;
}

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

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

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

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

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

/***********레이아웃조정***********/

.m-auto {
  margin: auto;
}

.ml-auto {
  margin-left: auto;
}

.w-100vw {
  width: 100vw;
}

.h-100vh {
  height: 100vh;
}

.w-100 {
  width: 100%;
}

.w-90 {
  width: 90%;
}

.w-80 {
  width: 80%;
}

.w-70 {
  width: 70%;
}

.w-60 {
  width: 60%;
}

.w-50 {
  width: 50%;
}

.w-auto {
  width: auto;
}

.h-100 {
  height: 100%;
}

.h-80 {
  height: 80%;
}

.h-50 {
  height: 50%;
}

.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-start{
  align-items:start;
}
/* 우측정렬 */
.align-end {
  align-items: flex-end;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 절대위치 */
.absolute {
  position: absolute;
}

/* 요소 가운데 정렬 */
.element-center {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 우측정렬 */
.justify-end {
  justify-content: flex-end;
}

/* 텍스트 가운데 */
.txt-center {
  text-align: center;
}

/* 텍스트 우측 */
.txt-right {
  text-align: right;
}

/* 텍스트 좌측 */
.txt-left {
  text-align: left;
}

/* 텍스트 줄바꿈없도록 고정 */
.ws-nowrap {
  white-space: nowrap;
}

/* 텍스트 말줄임... */
.txt-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: block;
}

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

.txt-italic {
  font-style: italic
}

.f-white {
  color: white;
}

.f-black1 {
  color: #111111;
}

.f-black2 {
  color: #222222;
}

.bg-white {
  background-color: white;
}

.bg-black {
  background-color: black;
}

/* 마우스호버시 커서 포인터로 바뀜 */
.pointer {
  cursor: pointer
}

/* 요소를원모양으로 */
.border-circle {
  border-radius: 50%;
}


/* pc에서 안보임 */
.pc-none {
  display: none;
}

/* 모바일에서 안보임 */
.m-none {
  display: flex;
}




@media screen and (max-width: 768px) {

  /* 클래스명 앞에 m- 모바일에서 바뀔 때  */
  .m-h-50 {
    height: 50%;
  }

  .m-h-100 {
    height: 100%;
  }

  .m-w-100 {
    width: 100% !important;
  }

  .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-justify-center {
    justify-content: center;
  }

  .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-txt-left {
    text-align: left;
  }

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

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

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

  .m-mb-0 {
    margin-bottom: 0 !important;
  }

  .m-mt-0 {
    margin-top: 0 !important;
  }

  .m-ml-0 {
    margin-left: 0 !important;
  }

  .m-mr-0 {
    margin-right: 0 !important;
  }

  .m-m-auto {
    margin: auto;
  }

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

  .m-between {
    justify-content: space-between;
  }

  .m-flex-wrap {
    flex-wrap: wrap;
  }


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


  .m-pt-12{
    --pt-value:12;
  }
  .m-pb-12{
    --pb-value:12;
  }

  .m-pt-20{
    --pt-value:20;
  }
  .m-pb-20{
    --pb-value:20;
  }

}





/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .gap-60 {
    --gap-value: 2.75;
  }
  /* 클래스명 앞에 t- 태블릿에서 바뀔 때  */
  .t-h-auto {
    height: auto;
  }

}