@charset "utf-8";
.prod-color-1 {
  color: #7D7676 !important;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar:horizontal {
  display: none;
}

/* ::-webkit-scrollbar-track {
        background: #328d4f;
        border-radius: 10px;
      } */

::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 5px;
}
@font-face {
  font-family: 'Pretendard-Regular';
  src: url('/fonts/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cafe24Ohsquare';
  src: url('/fonts/Cafe24Ohsquare.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h3,
    h1 {
      font-family: 'Cafe24Ohsquare' !important;
    }

    html, body {
      font-family: 'Pretendard-Regular' !important;
      font-size: 16px;
      height: 100%;
      color: #292929 !important;
      background-color: #F5FFF9 !important;
      scroll-behavior: auto !important;
    }
    section {
      width: 100% !important;
      height: auto !important;
      min-height: auto;
    }    
    h6 {
      font-size: 1rem !important;
      line-height: 1.2 !important;
    }

    p {
      margin: 0 !important;
      padding: 0 !important;
    }

    i {
      font-size: 16px;
    }

    ul,
    li {
      list-style: none;
      text-decoration: none;
      padding: 0;
    }
    
    #fc {
      color: #292929;
    }

    #fc2 {
      color: #9b9b9b;
    }

    .fs-3 {
      font-size: calc(1.2875rem + 0.65vw) !important;
    }

    .top-11 {
      top: 25% !important;
    }

    .start-97 {
      left: 97.5% !important;
    }

    .col-2 {
      padding: 0 !important;
      margin: 0 !important;
    }

.whitelogo{
  position: absolute;
  left: 1.5rem !important;
  top: 1.8rem !important;
}
.main-human {
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  z-index: 2; /* 스피너보다 아래로 배치 */
  width: 200px;
}
.spinner-grow {
  position: absolute; /* 위치 고정 */
  bottom: 3rem;
  z-index: 1; /* 스피너가 사람 이미지 위로 올라오도록 설정 */
  width: 320px; /* 크기 조절 */
  height: 320px;
  animation-duration: 1.5s; /* 속도 조절 */
  color: #009142;
}
.hangot{
  color: #fff;
  font-size: 45px;
  font-family: 'Cafe24Ohsquare';
}
.hanbeon{
  color: #FCCE09;
  font-size: 45px;
  font-family: 'Cafe24Ohsquare';
}
/* .jiab {
  color: #fff;
  font-size: 45px;
  font-family: "SBAggroB";
  position: relative;
}

.jiab2 {
  position: absolute;
  top: 0.5rem;
  left: 0rem;
  color: #14A455;
  opacity: 1;
  font-size: 45px;
  font-family: "SBAggroB";
  z-index: -1;
} */

    /* #loginSection {
      height: 53px;
      width: 200px;
      background-color: #fff;
      border-radius: 10px;
    } */

    #myList {
      margin-left: 0 !important;
    }

    .vr {
      display: inline-block;
      align-self: stretch;
      width: var(--bs-border-width);
      min-height: 1em;
      background-color: #E8EAED;
    }

    .fa-solid {
      line-height: 1.7rem;
    }

    .card-img-overlay * {
      box-sizing: border-box;
    }

    .rounded-20 {
      border-radius: 20px;
    }

    .small-card {
      width: 100%;
      height: 140px;
    }

    .fs-small {
      color: #6f6f6f;
      font-size: small;
    }

    .icon-50 {
      width: 50px;
      height: 50px;
    }

    .h-300 {
      height: 297.5px;
    }

    .position-absolute {
      background-color: #ff0505;
    }

    .namenim {
      display: flex;
      align-items: center;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
.namenim:hover > .fa-gear{
  animation: spin 3s linear infinite;
}
    
    #background {
      position: relative;
      /* background-image: url("/img/icon/main-background.png"); */
      width: 100%;
      max-width: 1366px;
      height: 600px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .background1 {
      width: 100%;
      background: linear-gradient(to right, #38B761, #75E398, #38B761);
    }

    .background2 {
      width: 100%;
      height: 200px;
      padding: 0 1rem;
      background: #F5FFF9;
    }

    #article {
      position: relative;
      bottom: 70px;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      height: 233px;
    }

    #article-not-login {
      position: relative;
      bottom: 70px;
      /* z-index 적용을 위해 position 설정 */
      z-index: 1;
      /* #main-human보다 위에 배치 */
      /* main-human 위로 올라오도록 설정 */
      display: flex;
      justify-content: space-between;
      /* height: 100%; */
      height: 233px;
      gap: 3%;
    }

    #article-not-login>#card {
      width: 100%;
      max-width: none;
      margin: 0 !important;
    }

    #article-not-login>#card>a>.not-login-2>#card-img {
      width: 18%;
      right: 5% !important;
      bottom: -20% !important;
    }

    #article-not-login>#card>a>.not-login-3>#card-img {
      width: 20%;
      right: -5% !important;
      bottom: -20% !important;
    }

    #card {
      width: 100%;
      /* height: 100%; */
      max-width: 148.88px;
      max-height: 232.72px !important;
    }

    #card-img {
      width: 65%;
    }

    .main-userlist{
      width: 80%;
    }

    #article>div:nth-of-type(1) #card-img {
      width: 90%;
    }

    .text-shadow {
      text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    }

    #mainback {
      display: flex;
      gap: 100px;
    }

    #hanachimdae {
      margin-top: 70px !important;
      margin-left: 80px !important;
    }

    #hana {
      font-size: 2rem;
    }

    #chimdae {
      font-size: 3rem;
    }
    #productIconblack{
      display: none;
    }
    .cardtit {
      font-size: 1.1rem;
    }

    #main-human {
      display: inline-block;
      z-index: 1;
      /* #article보다 뒤에 위치 */
    }

    #notice {
      cursor: pointer;
      position: absolute;
      right: 0;
      display: flex;
      flex-wrap: wrap;
      width: 310px;
      height: 212px;
      border-radius: 15px;
      background-color: rgba(51, 166, 88, 0.9);
      backdrop-filter: blur(10px);
      margin-top: 15px;
      padding: 2%;
      color: #fff;
      z-index: 1;
    }

    #notice>hr {
      width: 100%;
      margin: 0 !important;
      padding: 0 !important;
    }

    #noticetit {
      margin: 0 !important;
      padding: 0 !important;
      font-weight: bold;
      font-size: 1.2rem;
    }

    #noticecon {
      /* margin: 0 !important;
      padding: 0 !important; */
      font-size: 1rem;
    }

    #morebtn {
      width: 100%;
      background-color: transparent;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 5px;
      padding: 3% 10%;
    }

    #morebtn>a {
      color: #fff;
    }

    .fixed-nav {
      display: none;
    }

    .dropdown-toggle::after {
      display: none;
    }

    .btn {
      border: none;
      padding: 0 !important;
      --bs-btn-padding-x: 0rem !important;
      --bs-btn-padding-y: 0rem !important;
    }

    .btn-group {
      position: relative;
      /* 부모 요소에 상대 위치를 부여해 자식 요소 위치를 고정 */
    }

    .btn-group .dropdown-menu {
      position: absolute;
      left: auto;
      right: 0 !important;
      transform: none !important;
      /* 트랜스폼 제거 */
      padding: 0% 0% 50% 0% !important;
      margin-top: 10px;
      box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.25);
      max-width: 265px;
      height: 235px;
      /* 최대 높이 설정 */
      overflow: hidden;
      /* 기본적으로 스크롤 숨김 */
    }

    .allimtit {
      text-align: center;
      border-bottom: 1px solid #d9dee3;
      font-size: 1rem;
    }

    .dropdown-menu .dropdown-content {
      max-height: calc(100% - 30px);
      padding: 0 5% 30px 5%;
      overflow-y: auto;
      /* 내용이 많을 경우 세로 스크롤 표시 */
      overflow-x: hidden;
    }

    .dropdown-content::-webkit-scrollbar {
      width: 5px;
      /* 스크롤바의 너비 */
    }

    .dropdown-content::-webkit-scrollbar-thumb {
      background-color: #888;
      /* 스크롤바의 색상 */
      border-radius: 4px;
      /* 스크롤바의 둥근 모서리 */
    }

    .dropdown-content::-webkit-scrollbar-thumb:hover {
      background-color: #555;
      /* 스크롤바를 호버했을 때 색상 */
    }

    .fixed-bottom-btn {
      position: absolute;
      /* 드롭다운 내부에서 절대 위치 */
      bottom: 0;
      /* 하단에 고정 */
      left: 0;
      /* 왼쪽에 고정 */
      width: 100%;
      /* 전체 너비 */
      background-color: #fff;
      /* 배경색 설정 */
      border-top: 1px solid #d9dee3;
      /* 상단 테두리 추가 */
      z-index: 100;
      /* 버튼이 다른 요소 위에 표시되도록 설정 */
      text-align: center;
      /* 텍스트 중앙 정렬 */
      padding: 0.5rem;
      /* 버튼의 내부 여백 */
    }

    .dropdown-item {
      font-size: 1rem;
      display: block;
      width: 100%;
      padding: 0% !important;
      white-space: nowrap;
      /* 텍스트가 한 줄로 표시되도록 설정 */
      overflow: hidden;
      /* 넘치는 텍스트를 숨김 */
      text-overflow: ellipsis;
      /* 넘치는 텍스트를 '...'으로 표시 */
    }

    #megaphone {
      color: #43bd6a;
    }
    .bell{
      width: 23px;
      height: 23px;
    }
    .alarm-circle{
      /* display: none; */
      position: absolute !important;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      top: 0.3rem;
      right: -1.3rem;
      background-color: #ff5656;
      width: 24px;
      height: 24px;
    }
    .side-item {
      background-color: transparent !important;
      border: none !important;
      color: white !important;
    }
    .side-header {
      color: white !important;
      background-color: transparent !important;
    }
    .side-header > button {
      font-size: 18px !important;
      font-weight: bold !important;
    }
    .side .side-item.active,
    .mobile-side .side-item.active {
      box-shadow: none !important;
    }
    .side-button,
    .mobile-side-button {
      background-color: transparent !important;
      color: white !important;
      padding: 0.3rem 0rem !important;
    }
    .side-button::after,
    .mobile-side-button::after {
      color: white !important;
    }
    .side-button.collapsed::after {
      transform: rotate(0deg) !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") !important;
    }
    .side-button:not(.collapsed)::after {
      transform: rotate(0deg) !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E") !important;
    }
    .mobile-side-button.collapsed::after {
      transform: rotate(0deg) !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23919191' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") !important;
    }
    .mobile-side-button:not(.collapsed)::after {
      transform: rotate(0deg) !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23919191' d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E") !important;
    }
    .side-button.collapsed.active::after {
      transform: rotate(0deg) !important;
    }
    .side-button:not(.collapsed).active::after {
      transform: rotate(0deg) !important;
    }
    .mobile-side-button.collapsed.active::after {
      transform: rotate(180deg) !important;
    }
    .mobile-side-button:not(.collapsed).active::after {
      transform: rotate(180deg) !important;
    }
    
    .side-button:focus {
      outline: none !important;
      box-shadow: none !important;
    }
    .side-body {
      padding: 0 !important;
    }
    .side-body > ul > li {
  display: flex;
  padding: 0.8rem 1rem 0.8rem 1rem !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  align-items: center;
  justify-content: space-between;
}
    .mobile-side > .side-item > .side-collapse > .side-body > ul > li {
  padding: 0.8rem 1rem 0.8rem 2.8rem !important;
  border-radius: 30px !important;
  cursor: pointer !important;
}
    .modal-header{
      border: 0 !important;
    }
    .modal-content {
      color: #8e9baa !important;
    }
    .modal-content > .modal-body {
      color: #8e9baa !important;
    }
    .mobile-side{
      height: 100%;
      padding-right: 1rem;
      border: none !important;
      overflow-y: auto !important;
      scroll-behavior: auto !important;
      --bs-accordion-border-color: none !important;
    }
    .mobile-body {
      padding: 0 0 1rem 1rem !important;
      height: calc(100% - 110px);
      margin: 0.6rem 0;
    }
    .modal-fullscreen .btn-close {
      box-shadow: none;
      transform: translate(0, 0) !important;
    }
    .mobile-guide{
      padding: 0.3rem 0rem !important;
      font-size: 18px !important;
      color: #292929 !important;
      cursor: pointer !important;
    }
    .guide{
      background-color: transparent !important;
      color: white !important;
      padding: 0.3rem 0rem !important;
      font-size: 18px !important;
      font-weight: bold !important;
      cursor: pointer !important;
    }
    .btn-close {
      background-color: transparent;
      background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate%28-225.000000, -250.000000%29'%3E%3Cg id='Icon-Color' transform='translate%28225.000000, 250.500000%29'%3E%3Cuse fill='%23a1acb8' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23a1acb8' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      background-position: center;
      background-size: 1em auto;
      background-repeat: no-repeat;
      outline: none !important;
      box-shadow: none !important;
  }
  
    .modal .btn-close {
      margin-top: 0 !important;
      opacity: 0.3 !important;
    }
    .offcanvas-header .btn-close {
      margin: 0;
    }
    .offcanvas-header{
      padding: 1.5rem 1rem 0.5rem 1rem !important;
    }
    @media screen and (max-width: 1072px) {
      #article-not-login>#card>a>.not-login-2>#card-img {
        width: 20%;
        right: 5% !important;
        bottom: -20% !important;
      }

      #article-not-login>#card>a>.not-login-3>#card-img {
        width: 30%;
        right: -5% !important;
        bottom: -20% !important;
      }
    }

    @media screen and (max-width: 970px) {
      #article>div:nth-child(5) {
        display: none;
      }
    }

    @media screen and (max-width: 827px) {
      #hanachimdae {
        margin-left: 50px !important;
      }
    }

    @media screen and (max-width: 812px) {
      #article>div:nth-child(5) {
        display: none;
      }

      #mainback {
        display: flex;
        gap: 50px;
      }
    }

    @media screen and (max-width: 768px) {
      .vr{
        display: none;
      }
      .fixed-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80px;
        z-index: 9;
        background-color: #fff;
        box-shadow: 0 0px 5px 0 #e0e5e8;
        border-radius: 20px 20px 0 0;
      }

      .fixed-nav li {
        width: 20%;
        text-align: center;
        padding-top: 3%;
        padding-bottom: 2%;
        color: #d8d8d8;
        text-decoration: none;
      }

/* 로그인 상태일 때만: li 총 5개 */
.fixed-nav.five-items > li {
  width: 25%;
}

/* 비로그인 상태일 때: li 총 4개 */
.fixed-nav:not(.five-items) > li {
  width: 25%;
}

      .fixed-nav li > p {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
      }

      .fixed-nav li > i {
        font-size: 1.5rem !important;
      }

      .custom-card {
        padding: 0 !important;
        height: 55px;
      }

      .custom-card > img {
        display: block;
        margin: 0 auto;
        width: 23px;
        height: 24px;
        margin-top: 6px;
        margin-bottom: 3px;
      }

      /* #article>div:nth-child(2) {
        display: none;
      } */

      /* #article>div:nth-child(4) {
        display: none;
      } */

      #article>div:nth-child(5) {
        display: none;
      }

      #article>div:nth-child(6) {
        display: none;
      }

      #loginSection {
        display: none !important;
      }
      ul{
        margin-bottom: 0 !important;
      }
      body{
        height: 100% !important;
      }
      section{
        height: 100% !important;
      }
      #background {
        width: 100%;
        height: auto !important;
      }
      .background2 {
        width: 100%;
        height: 100%;
        padding: 4rem 1rem 6.5rem 1rem;
      }
      #article {
        top: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        height: 100%;
      }
      #hanachimdae {
        margin-top: 40px !important;
        margin-left: 20px !important;
      }

      #hana {
        font-size: 1.8rem;
        margin-bottom: 1rem;
      }

      #chimdae {
        font-size: 2.5rem;
      }

      #mainback {
        justify-content: center;
        gap: 5%;
      }

      #main-human {
        clip-path: inset(0 0 50px 0px);
        /* 상단 0px, 우측 0px, 하단 50px, 좌측 0px */
        width: 191px;
        height: 295px;
      }

      #article-not-login {
        display: block;
        height: 100%;
        max-height: 200px;
        margin-top: 80px !important;
        min-height: 200px;
      }

      #article-not-login>#card {
        width: 100%;
        height: 250px;
      }

      #article-not-login>#card>a>.not-login-2>#card-img {
        width: 30%;
        right: -5% !important;
        bottom: -10% !important;
      }

      #article-not-login>#card:nth-child(2) {
        display: none;
      }

      #notice {
        width: 93%;
        height: 160px;
        top: 14.5rem;
        left: 50%;
        padding: 15px;
        transform: translateX(-50%);
      }

      #morebtn {
        width: 100%;
        background-color: transparent;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 5px;
        padding: 0% 5%;
      }

      #card {
        flex: 1 1 calc(50% - 16px);
        /* 두 줄로 배치, 간격 고려 */
        box-sizing: border-box;
        max-width: none;
        /* 768px 이하에서는 max-width 제거 */
      }

      #card-img {
        width: 40% !important;
      }

      .main-userlist{
        width: 50% !important;
      }

      #article>div:nth-of-type(1) #card-img {
        position: absolute;
        right: -3% !important;
        bottom: -13% !important;
        width: 55%;
      }
    }
    @media screen and (max-width: 550px) {
      .fixed-nav li > p {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
      }

      .fixed-nav li > i {
        font-size: 1.3rem !important;
      }

      .custom-card > img {
        display: block;
        margin: 0 auto;
        width: 20px;
        height: 22px;
        margin-top: 7.5px;
        margin-bottom: 4px;
      }
    }

    @media screen and (max-width: 541px) {
      #hanachimdae {
        margin-left: 0px !important;
      }

      #article>div:nth-of-type(1) #card-img {
        position: absolute;
        right: -5% !important;
        bottom: -5% !important;
        width: 55%;
      }
    }

    @media screen and (max-width: 518px) {
      #hana {
        font-size: 1.6rem;
        margin-bottom: 1rem;
      }

      #chimdae {
        font-size: 2.3rem;
      }

      #hanachimdae {
        width: 55%;
        margin-left: 0 !important;
      }

      #mainback {
        margin: 0 0 0 1.5rem !important;
        justify-content: center;
        gap: 0%;
      }
    }
    @media screen and (max-width: 475px) {
      .main-human {
        width: 200px;
      }
    }
    @media screen and (max-width: 474px) {
      #hana {
        font-size: 1.4rem;
        margin-bottom: 1rem;
      }

      #chimdae {
        font-size: 2.1rem;
      }

      #hanachimdae {
        margin-top: 50px !important;
      }
    }

    @media screen and (max-width: 468px) {
      #article-not-login>#card>a>.not-login-2>#card-img {
        width: 45%;
        right: -5% !important;
        bottom: -10% !important;
      }
    }

    @media screen and (max-width: 429px) {
      #article>div:nth-of-type(1) #card-img {
        bottom: -10% !important;
      }
    }
    @media screen and (max-width: 420px) {
      #notice {
        top: 13.5rem;
      }

      #main-human {
        width: 161px;
        height: 235px;
      }
      
      .background2 {
        width: 100%;
        height: 100%;
        padding: 7rem 1rem 6.5rem 1rem;
      }
    }
    @media screen and (max-width: 414px) {
      .main-human {
        width: 200px;
      }
    }
    @media screen and (max-width: 415px) {
      #chimdae {
        font-size: 1.8rem;
      }
    }

    @media screen and (max-width: 397px) {
      #mainback {
        margin: 0 0 0 1.5rem !important;
        justify-content: center;
        gap: 0%;
      }
    }

    @media screen and (max-width: 333px) {
      #mainback {
        margin: 0 0 0 1rem !important;
      }
      .cardtit {
        font-size: 1rem;
      }

      .fs-small {
        font-size: 12px !important;
        color: #6f6f6f;
        font-size: small;
      }

      #article>div:nth-of-type(1) #card-img {
        right: -10% !important;
        bottom: -5% !important;
      }

      #card {
        max-height: 159.72px;
      }

      /* #article {
        height: 350px !important;
        min-height: 350px !important;
        padding-bottom: 210px;
      } */
    }

  @media screen and (max-width: 1024px) and (max-height: 1366px) {
    .hangot{
      font-size: 45px;
    }
    .hanbeon{
      font-size: 45px;
    }
    .main-human {
      width: 30%;
    }
  }
  @media screen and (max-width: 853px) and (max-height: 1280px) {
    .hangot{
      font-size: 60px;
    }
    .hanbeon{
      font-size: 60px;
    }
    .main-human {
      width: 35%;
    }
    .spinner-grow {
      bottom: 8%;
      width: 480px;
      height: 480px;
    }
  }
  @media screen and (max-width: 768px) and (max-height: 1024px) {
    .main-human {
      width: 32% !important;
    }
    .spinner-grow {
      bottom: 3% !important;
    }
  }
  @media screen and (max-width: 430px) and (max-height: 932px) {
    .main-human {
      width: 48% !important;
    }
    .spinner-grow {
      width: 380px !important;
      height: 380px !important;
    }
  }
  @media screen and (max-width: 344px) and (max-height: 882px) {
    .hangot{
      font-size: 50px !important;
    }
    .hanbeon{
      font-size: 50px !important;
    }
    .main-human {
      width: 57% !important;
    }
    .spinner-grow {
      bottom: 6% !important;
      width: 300px !important;
      height: 300px !important;
    }
  }
  @media screen and (max-width: 390px) and (max-height: 844px) {
    .hangot{
      font-size: 50px !important;
    }
    .hanbeon{
      font-size: 50px !important;
    }
    .main-human {
      width: 50% !important;
    }
    .spinner-grow {
      bottom: 6% !important;
      width: 300px !important;
      height: 300px !important;
    }
  }
  @media screen and (max-width: 853px) and (max-height: 1180px) {
    .hangot{
      font-size: 60px;
    }
    .hanbeon{
      font-size: 60px;
    }
    .main-human {
      width: 35%;
    }
    .spinner-grow {
      bottom: 8%;
      width: 480px;
      height: 480px;
    }
  }
  @media screen and (max-width: 412px) and (max-height: 915px) {
    .hangot{
      font-size: 48px;
    }
    .hanbeon{
      font-size: 48px;
    }
    .main-human {
      width: 50% !important;
    }
  }
  @media screen and (max-width: 1280px) and (max-height: 800px) {
    .main-human {
      width: 15%;
    }
  }
  @media screen and (max-width: 360px) and (max-height: 740px) {
    .skeleton-container {
      top: 13%;
    }
    .hangot{
      font-size: 50px !important;
    }
    .hanbeon{
      font-size: 50px !important;
    }
    .main-human {
      width: 50% !important;
    }
  }
  @media screen and (max-width: 540px) and (max-height: 720px) {
    .hangot{
      font-size: 40px;
    }
    .hanbeon{
      font-size: 40px;
    }
    .main-human {
      width: 33% !important;
    }
    .spinner-grow {
      bottom: 5% !important;
      width: 300px;
      height: 300px;
    }
  }
  @media screen and (max-width: 375px) and (max-height: 667px) {
    .skeleton-container {
      top: 13%;
    }
    .hangot{
      font-size: 40px !important;
    }
    .hanbeon{
      font-size: 40px !important;
    }
    .main-human {
      width: 43% !important;
    }
  }
  @media screen and (max-width: 1024px) and (max-height: 600px) {
    .hangot{
      font-size: 35px;
    }
    .hanbeon{
      font-size: 35px;
    }
    .main-human {
      width: 14%;
    }
    .spinner-grow {
      bottom: 2.5%;
      width: 280px;
      height: 280px;
    }
  }