* {
  margin: 0;
  padding: 0;
}
.section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 100vh;
}

.main {
  width: 100%; /* 원하는 크기 */
  height: 900px; /* 원하는 크기 */
  background-image: url("christmas/christmas-main.jpg"); /* 이미지 경로 */
  background-size: cover; /* 비율 유지하며 꽉 채우기 */
  background-position: center; /* 이미지 중앙 정렬 */
  background-repeat: no-repeat; /* 반복 방지 */
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.santacap {
  position: absolute;
  right: 40px;
  bottom: 24%;
  z-index: 2;
  animation: shake 2s ease-in-out infinite; /* 애니메이션 추가 */
}
@keyframes shake {
  0% {
    transform: rotate(0deg); /* 처음 위치 */
  }
  25% {
    transform: rotate(-5deg); /* 왼쪽으로 회전 */
  }
  50% {
    transform: rotate(5deg); /* 오른쪽으로 회전 */
  }
  75% {
    transform: rotate(-5deg); /* 왼쪽으로 회전 */
  }
  100% {
    transform: rotate(0deg); /* 처음 위치로 돌아옴 */
  }
}
.main-top {
  margin-top: 120px;
  text-align: center;
  color: white;
}
.main-top-bold {
  font-weight: bold;
  font-size: 30px;
}
.main-top-regular {
  font-size: 24px;
  padding-top: 10px;
}
.main-bottom-content {
  margin-top: 105px;
  margin-right: 30px;
  width: 730px;
  background-color: white;
  border: solid black 1px;
  position: absolute;
  right: 70px;
}
.main-bottom-content-div {
  padding: 58px;
}

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

hr {
  border: none; /* 기본 테두리 제거 */
  height: 1px; /* 높이를 1px로 설정 */
  background-color: #888888; /* 색상 설정 */
}

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

.bestseller-grid {
  border: solid black 1px;
  display: grid;
  grid-template-rows: 5fr 3fr;
  margin-top: 60px;
}
.bestseller-grid-div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 1fr씩 3개의 열 */
}
.bestseller-img1 {
  width: 100%; /* div 너비 */
  background-image: url("christmas/bestseller-1.jpg"); /* 이미지 경로 */
  background-size: cover; /* 이미지를 div에 맞게 크기 조절 */
  background-position: center; /* 이미지를 중앙에 위치시킴 */
  box-sizing: border-box; /* 경계선 포함한 크기 계산 */
}
.bestseller-img2 {
  width: 100%; /* div 너비 */
  background-image: url("christmas/bestseller-2.png"); /* 이미지 경로 */
  background-size: cover; /* 이미지를 div에 맞게 크기 조절 */
  background-position: center; /* 이미지를 중앙에 위치시킴 */
  box-sizing: border-box; /* 경계선 포함한 크기 계산 */
}
.bestseller-img3 {
  width: 100%; /* div 너비 */
  background-image: url("christmas/bestseller-3.png"); /* 이미지 경로 */
  background-size: cover; /* 이미지를 div에 맞게 크기 조절 */
  background-position: center; /* 이미지를 중앙에 위치시킴 */
  box-sizing: border-box; /* 경계선 포함한 크기 계산 */
}
.bestseller-grid-bottom {
  display: grid;
  grid-template-columns: 5fr 2fr;
  border-top: solid black 1px;
}
.bestseller-grid-bottom-left {
  margin: 30px;
}
.bestseller-bold {
  font-size: 30px;
  line-height: 160%;
  color: #000000;
  font-weight: bold;
  padding-bottom: 20px;
}
.bestseller-regular {
  font-size: 17px;
  line-height: 160%;
  color: #484848;
}
.arrow-style {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid black;
  transition: background-color 0.3s ease; /* 배경색 변화에 대한 부드러운 전환 */
}
.arrow-style:hover {
  background-color: #ffda00; /* 호버 시 배경색을 #FFDA00으로 변경 */
}

.vontresega-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  margin-top: 60px;
  border: solid black 1px;
}
.vontresega-vid {
  width: 100%; /* 원하는 width */
  height: 100%; /* 원하는 height */
  overflow: hidden; /* 넘치는 부분 숨기기 */
  position: relative; /* position 설정 */
}
.vontresega-vid video {
  position: absolute; /* 부모 div를 기준으로 배치 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-right: solid black 1px;
}
.vontresega-right {
  background-color: #007cc1;
}
.vontresega-bold2 {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 30px;
  color: #ffffff;
}
video {
  display: block; /* 기본 inline 요소 제거 */
  margin: 0; /* 불필요한 여백 제거 */
}
.vontresega-text {
  font-size: 18px;
  line-height: 160%;
  color: #ffffff;
  font-weight: 100;
}
.vontresega-right-grid {
  margin: 50px;
  display: felx;
  justify-content: space-between;
}
.vontresega-right-grid-text {
  padding-bottom: 190px;
}
.vontresega-button {
  text-align: center;
  background-color: #ffffff;
  padding: 25px;
  transition: background-color 0.3s ease; /* 배경색 변화에 대한 부드러운 전환 */
}
.vontresega-button:hover {
  background-color: #ffda00; /* 호버 시 배경색을 #FFDA00으로 변경 */
}
.tea-img {
  width: 100%; /* 원하는 width */
  height: auto; /* 원하는 height */
  overflow: hidden; /* 넘치는 부분 숨기기 */
  position: relative; /* position 설정 */
}
.tea-img img {
  position: absolute; /* 부모 안에서 정확히 채우기 */
  top: 0;
  left: 0;
  width: 100%; /* div의 가로를 채움 */
  height: 100%; /* div의 높이를 채움 */
  object-fit: cover; /* 이미지 비율 유지하며 꽉 채움 */
  transform: scale(1.01);
}
.tea-right {
  background-color: #ffda00;
}
.tea-bold2 {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 30px;
  color: #000000;
}

.tea-text {
  font-size: 18px;
  line-height: 160%;
  color: #000000;
  font-weight: 100;
}
.tea-right-grid {
  display: felx;
  justify-content: space-between;
  border: 1px solid black; /* 테두리 설정 */
}
.tea-right-grid-box {
  margin: 50px;
}
.tea-right-grid-text {
  padding-bottom: 70px;
}
.tea-table table {
  text-align: center;
  width: 100%;
  border-collapse: collapse; /* 테두리 겹침 제거 */
  background-color: white;
}
.tea-table td {
  outline: 1px solid black;
  height: 60px; /* 각 셀의 높이 설정 */
}
.narrow {
  width: 20%; /* 오른쪽 좁은 열 비율 설정 */
  transition: background-color 0.3s ease; /* 배경색 변화에 대한 부드러운 전환 */
}
.narrow:hover {
  background-color: #bbbbbb; /* 호버 시 배경색을 #FFDA00으로 변경 */
}
.wide {
  width: 80%; /* 왼쪽 넓은 열 비율 설정 */
  background-color: white;
}

.more-table-div {
  display: flex;
  justify-content: center; /* 수평 가운데 정렬 */
  align-items: center; /* 수직 가운데 정렬 */
}
.more-table {
  display: grid;
  grid-template-columns: repeat(3, 300px); /* 3개의 열 */
  grid-template-rows: repeat(3, 300px); /* 3개의 행 */
  gap: 0px; /* 셀 간격 */
  padding-top: 70px;
  padding-bottom: 100px;
}

.grid-item {
  display: flex;
  justify-content: center; /* 수평 가운데 정렬 */
  align-items: center; /* 수직 가운데 정렬 */
  background-color: white;
  outline: 1px solid black;
}
.grid-item {
  display: flex;
  justify-content: center; /* 수평 가운데 정렬 */
  align-items: center; /* 수직 가운데 정렬 */
  position: relative; /* 오버레이 위치를 위한 relative 설정 */
  background-color: white; /* 기본 배경색 */
  outline: 1px solid black;
  transition: background-color 0.3s ease; /* 배경색 변화에 대한 트랜지션 */
}

.grid-item img {
  width: 80%; /* 이미지 크기 설정 */
  transition: opacity 0.3s ease-in-out; /* 이미지 투명도 변경에 대한 트랜지션 */
}

.overlay {
  position: absolute;
  top: 50%; /* 수직 중앙 */
  left: 50%; /* 수평 중앙 */
  transform: translate(-50%, -50%); /* 완전 중앙 정렬 */
  color: black;
  font-size: 24px;
  font-weight: bold;
  opacity: 0; /* 기본 상태에서는 숨기기 */
  padding: 10px;
  border-radius: 5px;
  transition: opacity 0.3s ease-in-out; /* 오버레이 투명도 변경에 대한 트랜지션 */
}

.grid-item:hover {
  background-color: #ffffff; /* 호버 시 배경색을 노란색으로 변경 */
}

.grid-item:hover .overlay {
  opacity: 1; /* 호버 시 오버레이 보이게 하기 */
}

.grid-item:hover img {
  opacity: 0; /* 호버 시 이미지 투명도 낮추기 */
}
.more {
  text-align: center;
}
hr {
  border: none; /* 기본 테두리 제거 */
  height: 1px; /* 선의 두께 */
  background-color: #888888; /* 선 색상 */
  margin-top: 80px;
}
.number-circles {
  position: fixed;
  bottom: 30px; /* 하단에서 20px 떨어지게 */
  right: 30px; /* 오른쪽에서 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(1) {
  background-color: #cecece; /* 두 번째 원 배경색을 회색으로 설정 */
  color: #505050;
}
.circle:hover {
  background-color: #ffcc00; /* 호버 시 배경 색 변경 */
  cursor: pointer; /* 클릭 시 포인터 커서로 변경 */
  transform: translateY(-10px); /* 위로 10px 이동 */
}