@font-face {
      font-family: 'Hakgyoansim';
      src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-B.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
  }


  :root {
      --Hipink: #FF7AB8;
      --Higreen: #70C44A;
      --Hired: #FF4D3F;
      --Hiyellow: #FFCA38;
      --Hiblue: #1F8FBA;
  }


  *,
  ::before,
  ::after {
      box-sizing: border-box;
      word-break: keep-all;
  }

  html {
      overflow-x: hidden;
      box-sizing: inherit;
      background-color: #fff;
      overscroll-behavior-y: none;
      scroll-behavior: smooth;
  }


  input[type="checkbox"],
  input[type="radio"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }



  /* :focus{outline:none;} */
  ::placeholder {
      color: rgba(0, 0, 0, 0.2);
  }

  :-ms-input-placeholder {
      color: rgba(0, 0, 0, 0.3);
  }

  ::-ms-input-placeholder {
      color: rgba(0, 0, 0, 0.3);
  }



  /*Color*/

  .text-primary-100 {
      color: var(--bs-primary-100)
  }

  .text-primary-200 {
      color: var(--bs-primary-200)
  }

  .text-primary-300 {
      color: var(--bs-primary-300)
  }

  .text-primary-40 {
      color: var(--bs-primary-400)
  }

  .text-primary-500 {
      color: var(--bs-primary-500)
  }

  .text-primary-600 {
      color: var(--bs-primary-600)
  }

  .text-primary-700 {
      color: var(--bs-primary-700)
  }

  .text-primary-800 {
      color: var(--bs-primary-800)
  }

  .text-primary-900 {
      color: var(--bs-primary-900)
  }

  .text-primary-950 {
      color: var(--bs-primary-950)
  }





  /* 애니메이션 정의 */
  @-webkit-keyframes fadeInUp {
      0% {
          opacity: 0;
          -webkit-transform: translateY(20px);
          transform: translateY(20px);
      }

      50% {
          opacity: 0;
          -webkit-transform: translateY(20px);
          transform: translateY(20px);
      }

      100% {
          opacity: 1;
          -webkit-transform: translateX(0);
          transform: translateX(0);
      }
  }

  @keyframes fadeInUp {
      0% {
          opacity: 0;
          -webkit-transform: translateY(20px);
          -ms-transform: translateY(20px);
          transform: translateY(20px);
      }

      50% {
          opacity: 0;
          -webkit-transform: translateY(20px);
          -ms-transform: translateY(20px);
          transform: translateY(20px);
      }

      100% {
          opacity: 1;
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          transform: translateY(0);
      }
  }

  @keyframes fadeInDown {
      0% {
          opacity: 0;
          -webkit-transform: translateY(-20px);
          -ms-transform: translateY(-20px);
          transform: translateY(-20px);
      }

      50% {
          opacity: 0;
          -webkit-transform: translateY(-20px);
          -ms-transform: translateY(-20px);
          transform: translateY(-20px);
      }

      100% {
          opacity: 1;
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          transform: translateY(0);
      }
  }

  @keyframes fadeInRight {
      0% {
          opacity: 0;
          -webkit-transform: translateX(40px);
          -ms-transform: translateX(40px);
          transform: translateX(40px);
      }

      50% {
          opacity: 0;
          -webkit-transform: translateX(40px);
          -ms-transform: translateX(40px);
          transform: translateX(40px);
      }

      100% {
          opacity: 1;
          -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0);
      }
  }

  @keyframes circle_on {
      0% {
          width: 0px;
          height: 0px;
          margin-left: 0px;
          margin-top: 0px;
          background-color: var(--Hired);
      }

      100% {
          width: 40rem;
          height: 40rem;
          margin-left: -20rem;
          margin-top: -20rem;
          background-color: var(--Hipink);
      }
  }

  @keyframes circle_off {
      0% {
          width: 40rem;
          height: 40rem;
          margin-left: -20rem;
          margin-top: -20rem;
          background-color: var(--Hipink);
      }

      100% {
          width: 0px;
          height: 0px;
          margin-left: 0px;
          margin-top: 0px;
          background-color: var(--Hired);
      }
  }

  @keyframes slideInUp {
      0% {
          transform: translateY(100%);
          opacity: 0;
      }

      100% {
          transform: translateY(0);
          opacity: 1;
      }
  }