.containerWrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    background-color: #4c4847;
	cursor: pointer;
  }
  
  .layer {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  
  /* 기본: 2/3 스케일 기준 (sm 이하) */
  .layer-3 {
    width: 141px;
    height: 142px;
    transform: translate(-72px, -157px);
    background: url("../img/layer_3_Vector_Smart_Object.png") no-repeat center center;
    background-size: contain;
  
    /* animation: fadeIn 2s ease-out forwards; */
  
    mask-image: conic-gradient(white 0deg, transparent 0deg);
    -webkit-mask-image: conic-gradient(white 0deg, transparent 0deg);
  
    mask-size: cover;
    -webkit-mask-size: cover;
  
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
  
    mask-position: center;
    -webkit-mask-position: center;
  
    animation: ScaleUp3 0.5s ease-out forwards;
    animation-delay: 4.5s;
  }
  
  .layer-4 {
    width: 99px;
    height: 100px;
    transform: translate(-85px, -117px);
  
    animation: slideInLeft 2s ease-out forwards, ScaleUp4 0.5s ease-out forwards;
    animation-delay: 0s, 4.5s;
  }
  
  .layer-5 {
    width: 125px;
    height: 125px;
    transform: translate(-38px, -149px);
  
    animation: slideInRight 2s ease-out forwards, ScaleUp5 0.5s ease-out forwards;
    animation-delay: 0s, 4.5s;
  }
  
  .layer-6 {
    width: 340px;
    height: 27px;
    transform: translate(-50%, 32px);
    opacity: 0;
  
    animation: riseUp-6 0.5s ease-out forwards, fadeOut 1s ease-out forwards;
    animation-delay: 2s, 4s;
  }
  
  .layer-7 {
    width: 340px;
    height: 16px;
    transform: translate(-50%, 72px);
    opacity: 0;
  
    animation: riseUp 0.5s ease-out forwards, fadeOut 1s ease-out forwards;
    animation-delay: 2.5s, 4.3s;
  }
  
  .logo {
	display:none;
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 283px;
    height: 35px;
    opacity: 0;
  
    animation: fadeIn 2s ease-out forwards;
    animation-delay: 4.5s;
  }
  
  /* sm 이상: 원본 해상도 기준 */
  @media (min-width: 640px) {
    .layer-3 {
      width: 212px;
      height: 213px;
      transform: translate(-108px, -235px);
      background: url("../img/layer_3_Vector_Smart_Object.png") no-repeat center center;
      transform-origin: top left;
    }
  
    .layer-4 {
      width: 149px;
      height: 150px;
      transform: translate(-127px, -176px);
      transform-origin: top left;
    }
  
    .layer-5 {
      width: 188px;
      height: 188px;
      transform: translate(-57px, -223px);
      transform-origin: top left;
    }
  
    .layer-6 {
      width: 634px;
      height: 46px;
      transform: translate(-50%, 49px);
    }
  
    .layer-7 {
      width: 635px;
      height: 27px;
      transform: translate(-50%, 108px);
    }
  
    .logo {
      opacity: 0;
      top: 46px;
      left: 48px;
      transform: translate(0, 0);
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translate(calc(-85px - 40px), -117px); /* 왼쪽에서 더 밀어냄 */
    }
    to {
      opacity: 1;
      transform: translate(-85px, -117px);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translate(calc(-38px + 40px), -149px); /* 오른쪽에서 더 밀어냄 */
    }
    to {
      opacity: 1;
      transform: translate(-38px, -149px);
    }
  }
  
  @keyframes riseUp {
    from {
      opacity: 0;
      transform: translate(-50%, calc(72px + 40px)); /* 기본값은 7번 기준 */
    }
    to {
      opacity: 1;
      transform: translate(-50%, 72px);
    }
  }
  
  @keyframes riseUp-6 {
    from {
      opacity: 0;
      transform: translate(-50%, calc(32px + 40px));
    }
    to {
      opacity: 1;
      transform: translate(-50%, 32px);
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  @keyframes ScaleUp3 {
    from {
      transform: translate(-72px, -157px);
    }
    to {
      transform: translate(-72px, -207px);
    }
  }
  
  @keyframes ScaleUp4 {
    from {
      transform: translate(-85px, -117px);
    }
    to {
      transform: translate(-85px, -167px);
    }
  }
  
  @keyframes ScaleUp5 {
    from {
      transform: translate(-38px, -149px);
    }
    to {
      transform: translate(-38px, -199px);
    }
  }
  
  /* sm 사이즈 대응 (원본 위치로) */
  @media (min-width: 640px) {
    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translate(calc(-127px - 40px), -176px);
      }
      to {
        opacity: 1;
        transform: translate(-127px, -176px);
      }
    }
  
    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translate(calc(-57px + 40px), -223px);
      }
      to {
        opacity: 1;
        transform: translate(-57px, -223px);
      }
    }
  
    @keyframes riseUp {
      from {
        opacity: 0;
        transform: translate(-50%, calc(108px + 40px));
      }
      to {
        opacity: 1;
        transform: translate(-50%, 108px);
      }
    }
  
    @keyframes riseUp-6 {
      from {
        opacity: 0;
        transform: translate(-50%, calc(49px + 40px));
      }
      to {
        opacity: 1;
        transform: translate(-50%, 49px);
      }
    }
  
    @keyframes ScaleUp3 {
      from {
        transform: translate(-108px, -235px) scale(1);
      }
      to {
        transform: translate(-162px, -192px) scale(1.5);
      }
    }
  
    @keyframes ScaleUp4 {
      from {
        transform: translate(-127px, -176px) scale(1);
      }
      to {
        transform: translate(-190px, -104px) scale(1.5);
      }
    }
  
    @keyframes ScaleUp5 {
      from {
        transform: translate(-57px, -223px) scale(1);
      }
      to {
        transform: translate(-85px, -174px) scale(1.5);
      }
    }
  }
  
  .menu-item {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    font-size: 2em;
    color: #f1f1f0;
  }
  
  .menu-item:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
  }
  
  .containerWrapper.show-main .menu-item.delay-1 {
    transform: translate(280px, -330px);
    opacity: 1;
  
    transition-delay: 0.5s;
  }
  .containerWrapper.show-main .menu-item.delay-2 {
    transform: translate(480px, -160px);
    opacity: 1;
  
    transition-delay: 0.7s;
  }
  .containerWrapper.show-main .menu-item.delay-3 {
    transform: translate(480px, 50px);
    opacity: 1;
  
    transition-delay: 0.9s;
  }
  .containerWrapper.show-main .menu-item.delay-4 {
    transform: translate(280px, 210px);
    opacity: 1;
  
    transition-delay: 1.1s;
  }
  
  @media (max-width: 1200px) {
    .containerWrapper.show-main .menu-item.delay-1 {
      transform: translate(80px, -330px);
    }
    .containerWrapper.show-main .menu-item.delay-2 {
      transform: translate(280px, -160px);
    }
    .containerWrapper.show-main .menu-item.delay-3 {
      transform: translate(280px, 50px);
    }
    .containerWrapper.show-main .menu-item.delay-4 {
      transform: translate(80px, 210px);
    }
  }
  
  @media (max-width: 640px) {
    .containerWrapper.show-main .menu-item.delay-1 {
      transform: translate(-50%, 0px);
    }
    .containerWrapper.show-main .menu-item.delay-2 {
      transform: translate(-50%, 70px);
    }
    .containerWrapper.show-main .menu-item.delay-3 {
      transform: translate(-50%, 140px);
      font-size: 34px;
    }
    .containerWrapper.show-main .menu-item.delay-4 {
      transform: translate(-50%, 210px);
    }
  }