:root { 
  --alizarin-crimson: #ed1c24;
  --aqua-spring: #eaf9f5;
  --black: #000000;
  --blue: #354dfc;
  --catalina-blue: #063171;
  --congress-blue: #084d97;
  --eerie-black: #17191e;
  --ghost: #c1cadc;
  --gull-gray: #9da6bb;
  --lily-white: #e6f0ff;
  --lily-white-2: #e4f7fc;
  --magnolia: #fbf4ff;
  --milk-punch: #fff5d6;
  --mystic: #e5eaf4;
  --orange-white: #f7fbed;
  --outer-space: #2f333c;
  --remy: #ffedf2;
  --shuttle-gray: #606878;
  --white: #ffffff;
  --white-2: #ffffffb2;
  --white-lilac: #f8f9fc;
 
  --font-size-24px: 24px;
  --font-size-l: 16px;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  --font-size-xxxl: 28px;
  --font-size-xxxxl: 36px;
 
  --font-family-pretendard-bold: "Pretendard", Helvetica, Arial, sans-serif;
  --font-family-pretendard-extrabold: "Pretendard", Helvetica, Arial, sans-serif;
  --font-family-pretendard-medium: "Pretendard", Helvetica, Arial, sans-serif;
  --font-family-pretendard-regular: "Pretendard", Helvetica, Arial, sans-serif;
  --font-family-pretendard-semibold: "Pretendard", Helvetica, Arial, sans-serif;
}
.w-full {
  width: 100%;
}

.sticky {
  position: sticky;
  top: 0
}

.header-one {
  /* display: none; */
  max-height: 0;
  opacity: 0;
}

.header-one.fixed {
  position: fixed;
  background-color: #fff;
  color: #000;
  top: 0;
  max-height: fit-content;
  opacity: 1;
  /* display: block !important; */
}

.header-two {
  /* display: block; */
  max-height: fit-content;
  opacity: 1;
}
.header-two.hide {
  /* display: none; */
  max-height: 0;
  opacity: 0;
}
.header {
  z-index: 100;
}

.displayd3 {
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.headingh1 {
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.headingh2 {
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-24px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.headingh3 {
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.headingh4 {
  font-family: var(--font-family-pretendard-bold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.headingh5 {
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.headingh6 {
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.headingh7 {
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.bodyp1 {
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bodyp2 {
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bodyp3 {
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bodyp4 {
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.singlelinebutton2 {
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.singlelinebutton3 {
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.singlelinebutton4 {
  font-family: var(--font-family-pretendard-medium);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}
.singlelinebutton4 div {
  cursor: pointer;
}

.hidden-sm {
  display: block;
}
.hidden-md {
  display: none !important;
}  
.text-white {
  color: white !important;
}
.flex {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.items-center {
  align-items: center;
}
.gap-xs {
  gap: 8px;
}
.space-y-xs > * + * {
  margin-top: 8px;
}
.space-y-xxs > * + * {
  margin-top: 4px;
}
.overflow-auto {
  overflow: auto;
}
.invisible {
  visibility: hidden;
}
ul {
  list-style: disc !important;
  margin-left: 16px !important;
}
.pretendard-extra-extra-bold-gull-gray-16px {
  color: var(--gull-gray);
  font-family: var(--font-family-pretendard-extrabold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 800;
}

.pretendard-bold-white-11px {
  color: var(--white);
  font-family: var(--font-family-pretendard-bold);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.pretendard-regular-normal-white-10px {
  color: var(--white);
  font-family: var(--font-family-pretendard-regular);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
}

.pretendard-extra-extra-bold-white-72px {
  color: var(--white);
  font-family: var(--font-family-pretendard-extrabold);
  font-size: 72px;
  font-style: normal;
  font-weight: 800;
}

.pretendard-extra-extra-bold-eerie-black-52px {
  color: var(--eerie-black);
  font-family: var(--font-family-pretendard-extrabold);
  font-size: 52px;
  font-style: normal;
  font-weight: 800;
}

.pointer {
  cursor: pointer
}

.pretendard-extra-extra-bold-white-52px {
  color: var(--white);
  font-family: var(--font-family-pretendard-extrabold);
  font-size: 52px;
  font-style: normal;
  font-weight: 800;
  margin-bottom: 24px;
}

.animated-text {
  opacity: 0;
  /* Hidden initially */
  transition: opacity 0.3s ease;
  /* Smooth appearance */
}


  .transit {
    transition: all 0.3s linear;
    opacity: 0;
  }

  .trans-out {
    opacity: 1;
    transform: scale(1);
    animation: transOut 1s ease-in-out forwards;
    display: none;
    max-height: 0;
  }
  
  /* Trans-In: Starts hidden and animates to visible */
  .trans-in {
    opacity: 0;
    transform: scale(0);
    animation: transIn 1s ease-in-out forwards;
    display: block;
  }

  @keyframes transIn {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes transOut {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0);
    }
  }

  @media (max-width:900px) {
    .hidden-sm {
      display: none !important;
    } 
    .hidden-md {
      display: block !important;
    }   
    .mb_space-y-sm > * + * {
      margin-top: 12px;
    }
    .mb_gap-lg {
      gap: 24px !important;
    }
    .trans-in {
      max-height: fit-content;
    }
    .mb_mt-neg-ten {
      margin-top: 2px;
    }
    .headingh5,.bodyp2 {
      font-size:14px;
      line-height: 21px !important;
    }
    .mb_px-0{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .mb_w-full {
      width: 100%;
    }
    .trans-out {
      max-height: 0;
      display: none;
    }
  
    .trans-in {
      max-height: 2000px;
      display: block;
    }
    .header-one.fixed {
      padding:0 16px;
    }
  }