.fixed-style {
    opacity: 0.3;
    margin: 50px;
  }

  



.explain {
    display: flex;
    flex-direction: column; /* 세로로 나열 */
    gap: 50px; /* 각 요소 간 간격 */
    align-items: center; /* 세로 중앙 정렬 */
  line-height: 25px;
    opacity: 0; /* 처음에는 보이지 않음 */
    animation: fadeIn 2s ease-in forwards; /* 2초 동안 페이드 인 */
    -webkit-text-stroke: 0px #0F0F0F;
  }
  
  
          .explainbox {
    display: flex; /* Flexbox로 설정 (기본 방향은 row) */
    gap: 30px; /* 요소 간의 간격 */
    color: #ffffffe0;
    -webkit-text-stroke: 0.5px #0F0F0F; /* 테두리 두께와 색상 */
  margin-left: 120px;
  }
  
  .text-container {
    text-align: left;
    line-height: 25px;
    white-space: nowrap; /* 줄 바꿈 방지 */
  }
  
  b {
    -webkit-text-stroke: 0px #0F0F0F;
    display: inline; /* 텍스트를 한 줄로 유지 */
    white-space: nowrap; /* 줄 바꿈 방지 */
  }
  a {
    text-decoration: underline;
    text-decoration-color: white; /* 밑줄 색상 변경 */
      color:#ffffffe0; /* 링크 색상 설정 */
      cursor: pointer; /* 마우스 커서 추가 */
      display: inline-block; /* 클릭 영역 명확히 설정 */
      z-index: 1000;
      position: relative; /* 추가 */
      -webkit-text-stroke: 0.4px #0F0F0F;
    }
  
  /* 페이드 인 효과 */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  
  .fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in forwards; /* 2초 동안 페이드 인 효과 */
  }
  
  .typing-container {
    display: flex;
    flex-direction: column;
    gap: -50px; /* 줄 간 간격 */
    animation: fadeIn 2s ease-in forwards; /* 2초 동안 페이드 인 효과 */
  }
  
  .typing-line {
    display: inline-block;
    white-space: nowrap; /* 줄 바꿈 방지 */
    overflow: hidden; /* 넘치는 텍스트 숨기기 */
    margin: 0; /* 기본 마진 제거 */
    
  }


/* 깜박이는 애니메이션 */
@keyframes blink {
    0%, 100% {
      opacity: 0.3;
    }
    50% {
      opacity: 0.9;
    }
  }
  .blinking-text {
    animation: blink 1s infinite; /* 애니메이션을 무한 반복하며 1초 간격으로 깜빡임 */
    margin-top: -150px; /* 텍스트의 위치 조정 */
  }
  
  
  .shiny-text {
          font-size: 4rem;
          font-weight: bold;
          font-family: Arial, sans-serif;
          color: #ccc; /* 기본 금속 느낌 */
          background: linear-gradient(90deg, #878787, #fff, #878787);
          background-size: 200% auto;
          -webkit-background-clip: text; /* 텍스트에 배경 클립 */
          -webkit-text-fill-color: transparent; /* 텍스트를 투명 처리 */
          animation: blink 1s step-end infinite, fadeIn 1s ease-in forwards, shine 4s linear infinite; /* 커서 깜박임, 페이드 인, 반짝임 효과 */
          
        }
        
        /* 빛 이동 애니메이션 */
        @keyframes shine {
          0% {
            background-position: 200% center;
          }
          100% {
            background-position: -200% center;
          }
        }
  
        @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }.object-container {
    position: relative;
    margin : -50px;
}

.object {
    pointer-events: auto; /* 포인터 이벤트 활성화 */
    width: 70%;
    z-index: 1;
    position: relative; /* 확대 효과를 적용하기 위해 필요 */
    transition: opacity 0.3s ease; /* opacity 애니메이션 추가 */
    animation: float 1.5s ease-in-out infinite; /* 동동 뜨는 애니메이션 추가 */
}

.object-details {
    opacity: 0; /* 기본적으로 투명 */
    position: absolute; /* 절대 위치로 수정 */
    top: 100%; /* 이미지 바로 아래에 위치 */
    text-align: center;
    transform: translateX(-32%); /* 수평으로 가운데 정렬 */
    left: 0;
    width: 200%;
    padding: 10px;
    background-color: transparent; /* 배경색을 없앰 */
    color: #ffffff; /* 텍스트 색상 하얗게 */
    z-index: 10; /* object보다 더 높은 z-index 설정 */
    font-size: 16px; /* 텍스트 크기 설정 */
    line-height: 25px;
    -webkit-text-stroke: 0.5px #0F0F0F; /* 텍스트 윤곽선 추가 */
    transition: opacity 0.3s ease; /* opacity 애니메이션만 사용 */
}


/* 오브젝트에 마우스를 올리면 텍스트 보이도록 설정 */
.object-container:hover .object-details {
    opacity: 1; /* opacity 1로 변경 */
    height: auto; /* 텍스트가 보일 때 높이를 자동으로 설정 */
    margin-bottom: 100px; /* 텍스트가 보이면 그만큼 아래로 밀리게 설정 */
}
/* 오브젝트 확대 효과 */
.object-container:hover {
    z-index: 10; /* 확대 시 오브젝트를 위로 올리기 */
    height: auto; /* 텍스트가 보일 때 높이를 자동으로 설정 */
    margin-bottom: 100px; /* 텍스트가 보이면 그만큼 아래로 밀리게 설정 */
    transform: scale(1.1); /* 오브젝트 크기 */
}

/* 다른 오브젝트의 투명도를 30%로 설정 */
.object-container:not(:hover) {
    opacity: 0.3;
    
    transform: scale(0.9); /* 오브젝트 크기 */
}

/* 오브젝트가 호버될 때 다른 오브젝트들에 영향을 주지 않도록 수정 */
.object-container:hover {
    opacity: 1; /* 호버된 오브젝트만 불투명하게 */
}