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;
  
  --blue: #0087f5;
  --darkblue: #005599;
 }

 .common_padding1{
  padding : 150px 0;
}

 .blue{
  color: var(--blue);
 }

 .darkblue{
  color: var(--darkblue);
 }

 b, strong{
  font-weight: normal;
 }

 .border_none{
  border: none !important;
 }

 .visible_hidden{
  visibility: hidden !important;
 }
 
 /* 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;
 }
 
 
 
 
 /* 3px  */
 .gap-3 {
  --gap-value: 0.1875;
 }
 
 /* 5px  */
 .gap-5 {
  --gap-value: 0.3125;
 }
 
 /* 7px  */
 .gap-7 {
  --gap-value: 0.4375;
 }
 
 /* 10px  */
 .gap-10 {
  --gap-value: 0.625;
 }
 
 /* 15px  */
 .gap-15 {
  --gap-value: 0.9375;
 }
 
 /* 20px  */
 .gap-20 {
  --gap-value: 1.25;
 }
 
 /* 30px  */
 .gap-30 {
  --gap-value: 1.8;
 }
 
 /* 40px  */
 .gap-40 {
  --gap-value: 2.5;
 }
 
 /* 50px  */
 .gap-50 {
  --gap-value: 3.125;
 }
 
 /* 55px  */
 .gap-55 {
  --gap-value: 3.4375;
 }
 
 /* 60px  */
 .gap-60 {
  --gap-value: 3.75;
 }
 
 /* 70px  */
 .gap-70 {
  --gap-value: 4.375;
 }
 
 /* 100px  */
 .gap-100 {
  --gap-value: 6.25;
 }
 
 
 
 .f-white {
  color: white;
 }
 
 .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;
 }
 
 .between {
  justify-content: space-between;
 }
 
 .justify-center {
  justify-content: center;
 }
 
 .align-center {
  align-items: center;
 }
 
 .align-end {
  align-items: flex-end;
 }
 
 
 .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;
 }
 
 .block{
   display: block;
 }
 
 
 /* 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;
  }
     
  .common_padding1 {
     padding: 100px 0;
  }
 }
 
 /* tablet */
 @media screen and (min-width: 768px) and (max-width: 1024px) {
  .t-h-auto {
   height: auto;
  }
 }