* {
  margin: 0;
  padding: 0;
}
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 100vh;
}
.main {
  position: relative;
}
.bg-video__content {
  position: relative;
  width: 100%;
  height: 1080px;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.hub {
  margin-left: 70px;
  margin-right: 70px;
  padding-bottom: 80px;
}

.bold {
  margin-top: 80px;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 40px;
}
.text {
  font-size: 18px;
  line-height: 160%;
  color: #484848;
}

.hub-grid {
  margin-top: 80px;
  width: 100%;
  height: 680px;
  border: solid 1px;
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto;
  margin-bottom: 80px;
}
.hub-grid-img {
  width: 100%;
  height: 100%;
  display: flex;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}
.hub-grid-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6fr 4fr;
  border-left: solid 1px;
  height: 100%;
}
.hub-grid-content-top {
  border-bottom: solid 1px;
  background-color: #ffffff;
  padding-top: 1px;
  transition: background-color 0.3s ease; /* 배경색 변화에 대한 부드러운 전환 */
}
.hub-grid-content-top:hover {
  background-color: #ffda00; /* 호버 시 배경색을 노랑으로 변경 */
}
.hub-grid-content-top-text,
.hub-grid-content-bottom-text {
  margin: 40px;
}
.hub-grid-content-bottom {
  padding-top: 1px;
  background-color: #ffffff;
  transition: background-color 0.3s ease; /* 배경색 변화에 대한 부드러운 전환 */
}
.hub-grid-content-bottom:hover {
  background-color: #dddddd; /* 호버 시 배경색을 노랑으로 변경 */
}

.change {
  width: 100%;
}
.change-grid {
  margin-top: 80px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  border: solid 1px;
  margin-bottom: 80px;
}
.change-grid-1,
.change-grid-2,
.change-grid-3 {
  grid-template-rows: 1fr 1fr;
  border-right: solid 1px;
  background-color: white; /* 기본 배경색 */
  transition: background-color 0.8s ease;
}
.change-grid-img {
  width: 100%;
  border-bottom: solid 1px;
  object-fit: cover;
  overflow: hidden;
}
.change-grid-1:hover,
.change-grid-2:hover,
.change-grid-3:hover {
  background-color: #ffdb01; /* 호버 시 노란색 */
}

.change-grid-text {
  margin: 30px;
}
.change-grid-text-back:hover {
  background-color: yellow; /* 호버 시 노란색 */
}

.vision-back {
  padding-top: 80px;
}
.vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  border: solid 1px;
  margin-bottom: 80px;
}

.vision-content-back {
  background-color: #00853e;
  height: 100%;
}
.vision-content {
  margin: 100px;
  height: auto;
  color: white;
  display: flex;
  flex-direction: column;
}
.vision-content-text {
  flex-grow: 1;
}
.vision-content-button-back {
  color: black;
  text-align: center;
  border: black solid 1px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #f1f1f1;
  transition: background-color 0.3s ease;
}
.vision-content-button-back:hover {
  background-color: #ffdb01;
}
.visition-content-button-text {
  font-weight: bold;
}
.vision-grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 영상이 부모 요소에 맞게 꽉 차도록 */
  object-position: center; /* 영상의 중앙이 부모 요소의 중앙에 맞춰짐 */
}
.grid-title {
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 20px;
}

.grid-text {
  font-size: 16px;
  color: #484848;
  line-height: 160%;
}
.grid-text2 {
  font-size: 16px;
  color: #ffffff;
  line-height: 160%;
  margin-bottom: 150px;
}

.vision-big {
  font-size: 50px;
  padding-bottom: 30px;
}

.vision-big-bold {
  font-weight: bold;
}
hr {
  border: none; /* 기본 테두리 제거 */
  height: 1px; /* 높이를 1px로 설정 */
  background-color: #888888; /* 색상 설정 */
}
.vision-content-button-text {
  font-size: 20px;
  font-weight: bold;
}

.overlay-image {
  position: absolute; /* 이미지 위치를 절대적으로 설정 */
  top: 10%; /* 컨테이너의 세로 중심 */
  left: 5%; /* 컨테이너의 가로 중심 */
  width: 100px; /* 이미지 너비 */
  height: auto; /* 이미지 높이를 비율에 맞게 설정 */
  pointer-events: none; /* 이미지가 클릭되지 않도록 설정 */
  animation: rotateImage 5s infinite linear;
}
@keyframes rotateImage {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); /* 시작: 회전 없음 */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); /* 끝: 한 바퀴 회전 */
  }
}
hr {
  border: none; /* 기본 테두리 제거 */
  height: 1px; /* 선의 두께 */
  background-color: #888888; /* 선 색상 */
  margin-top: 80px;
}
.number-circles {
  position: fixed;
  bottom: 30px; /* 하단에서 20px 떨어지게 */
  right: 45px; /* 오른쪽에서 20px 떨어지게 */
  display: flex;
  gap: 14px; /* 원들 사이에 간격 설정 */
  z-index: 999;
}

.circle {
  width: 50px; /* 원의 가로 크기 */
  height: 50px; /* 원의 세로 크기 */
  border-radius: 50%; /* 원 형태로 만들기 */
  background-color: #ffffff; /* 원의 배경색 */
  display: flex;
  justify-content: center; /* 숫자를 가운데 정렬 */
  align-items: center; /* 숫자를 가운데 정렬 */
  font-size: 20px; /* 숫자의 크기 */
  font-weight: bold; /* 숫자 굵게 */
  color: rgb(0, 0, 0); /* 숫자의 색상 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
  border: 1px solid #000000;
  text-decoration: none; /* 링크 텍스트 밑줄 제거 */
  transition: transform 0.3s ease; /* 호버 시 부드러운 이동 효과 */
}
.circle:nth-child(3) {
  background-color: #cecece; /* 두 번째 원 배경색을 회색으로 설정 */
  color: #505050;
}
.circle:hover {
  background-color: #ffcc00; /* 호버 시 배경 색 변경 */
  cursor: pointer; /* 클릭 시 포인터 커서로 변경 */
  transform: translateY(-10px); /* 위로 10px 이동 */
}