/* 전체 페이지를 감싸는 컨테이너 */
body {
  font-family: "Pretendard", sans-serif !important;
}

.wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
section {
  display: flex;
  justify-content: center;
}

/* 배너 슬라이드 영역 */
.slider-container {
  position: relative;
  width: 100%; /* 화면 전체 너비 사용 */
  height: 400px;
  overflow: hidden; /* 이미지가 container 밖으로 나가지 않게 숨김 */
}

.slider {
  display: flex; /* 이미지를 가로로 나열 */
  transition: transform 0.5s ease; /* 슬라이드 전환 애니메이션 */
}

.slide {
  min-width: 100%; /* 각 슬라이드가 화면 크기만큼 차지하도록 설정 */
  max-width: 100%;
}

.slide img {
  width: 100%; /* 이미지를 슬라이드 컨테이너에 맞춰 크기 조정 */
  height: 100%; /* 화면에 맞게 이미지 높이 조정 */
  object-fit: cover; /* 이미지 비율 유지하면서 화면에 꽉 차도록 설정 */
}
/* 텍스트 스타일 */
.banner-text {
  position: absolute;
  top: 50%; /* 이미지의 세로 중앙에 위치 */
  left: 17%; /* 왼쪽으로 위치 */
  transform: translateY(-50%); /* 수직 중앙에 위치 */
  color: white;
  text-align: left; /* 텍스트 왼쪽 정렬 */
  z-index: 1;
  max-width: 1280px; /* 텍스트 박스 너비를 1280px로 제한 */
  width: 100%; /* 부모 요소의 너비에 맞게 텍스트 박스 너비를 설정 */
}

.banner-text h1 {
  font-size: 60px; /* 원하는 크기로 설정 */
  margin: 0;
  letter-spacing: -1px;
}

.banner-text p {
  font-size: 24px; /* 원하는 크기로 설정 */
  margin: 10px 0 0;
  letter-spacing: -1px;
}

/* 이전/다음 버튼 스타일 */
/* button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
} */

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 메뉴 영역 */
.nav {
  display: flex;
  justify-content: space-between;
  padding: 30px 0;
  max-width: 1280px; /* 너비를 1280px로 제한 */
  margin: 0 auto; /* 화면 중앙에 배치 */
}

.menubar {
  display: flex;
  justify-content: center; /* 메뉴 중앙 정렬 */
  align-items: center;
}

.menuItem {
  display: flex; /* 메뉴 항목을 가로로 나열 */
  justify-content: center;
  gap: 50px; /* 메뉴 간 간격 */
}

.menuItem > li {
  position: relative; /* 서브메뉴가 부모 메뉴 아래에 위치하도록 설정 */
}

.menubar a {
  color: #000000; /* 메인메뉴 폰트색 */
  display: block;
  font-weight: 600; /* 메인메뉴 폰트굵기 */
  font-size: 18px; /* 메인메뉴 폰트크기 */
  line-height: 25px; /* 메인메뉴 높이 */
  padding: 1px 32px; /* 메인메뉴 마우스온 여백 */
  text-align: center;
  white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 */
}

/* 서브메뉴 숨기기 */
.menuItem > li > ul {
  display: none; /* 기본적으로 서브메뉴 숨기기 */
  position: absolute; /* 서브메뉴가 부모 메뉴 아래에 위치하도록 설정 */
  top: 100%; /* 부모 메뉴 바로 아래에 위치하도록 설정 */
  left: 50%;
  transform: translateX(-50%); /* 수평으로 중앙 정렬 */
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 9999999;
}

/* 메인 메뉴에 호버하면 서브 메뉴 보이기 */
.menuItem > li:hover > ul {
  display: block;
}

/* 서브 메뉴 항목 스타일 */
.menuItem > li > ul > li {
  padding: 10px 20px;
 background: rgba(112, 112, 112, 0.8); /* 반투명 회색 배경 */
}

.menuItem > li > ul > li > a {
  font-weight: normal;
  font-size: 16px;
  color: #fff; /* 서브메뉴 링크 색 */
}

.menuItem > li > ul > li > a:hover {
  color: #fff; /* 서브메뉴 링크 색 */
  background: #333333; /* 서브메뉴 마우스온시 배경색 */
}

/* 콘텐츠 부분 (1280px로 제한된 영역) */
.content {
  max-width: 1280px; /* 콘텐츠 너비 제한 */
  margin: 0 auto; /* 중앙 정렬 */
  margin-top: 120px;
}
.product {
  display: flex;
  justify-content: center;
  width: 100%;
}

.product-item:nth-child(1) {
  border-radius: 6rem 0 0 0;
}
.product-item:nth-child(4) {
  border-radius: 0 0 6rem 0;
}
.product-item {
  width: 320px;
  position: relative;
  height: 600px;
  background-color: #333333;
  border: 0.2px solid #fff;
}

.product-item {
  width: 320px;
  position: relative;
  height: 500px;
  background-color: #333333;
  border: 0.2px solid #fff;
}
.txt-box {
  margin-top: 320px;
}
.product-item h3 {
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: -2px;
  color: #fff;
  font-weight: 500;
  display: flex;
  padding-left: 30px;
}
.product-item p {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -1px;
  color: #fff;
  font-weight: 300;
  display: flex;
  padding: 15px 30px;
}

.contact {
  width: 100%;
  height: 380px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 120px;
  padding: 30px;
background-image: url('../img/contact.jpg');
 background-size: cover;  /* 이미지 크기를 배경에 맞게 조정 */
    background-position: center; /* 이미지를 중앙에 배치 */
}
.contact a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contact h1 {
  font-size: 2.5rem;
  line-height: 1.3;
  letter-spacing: 3px;
  color: #fff;
  font-weight: bold;
  display: flex;
}

.contact h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #fff;
  font-weight: 300;
  display: flex;
  margin-top: 10px;
}
.contact ul {
  margin-top: 30px;
}
.contact ul li {
  display: flex;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #fff;
  font-weight: 300;
  margin-bottom: 10px;
}

.button-banner {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
}
.button-item {
  width: 30%;
  background-color: beige;
  height: 180px;
}
/* 호버 시 배경이 커지도록 설정 */
.button-item:hover {
  transform: scale(1.1); /* 요소 자체 크기를 약간 키움 */
  background-size: 101%; /* 배경 이미지 크기를 110%로 설정 */
  border: 3px solid #079dfe;
}
.txt {
  padding: 30px;
}
.txt h2 {
  font-weight: bold;
  color: #fff;
}
.txt h3 {
  color: #fff;
  letter-spacing: -0.5px;
}
.notice {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 30px 0;
}
.notice-txt h1 {
  font-size: 24px;
}
.notice-box {
  width: 880px;
  padding: 0 50px;
}
.notice-item {
  margin-bottom: 20px;
}
.notice-item .text {
  border-bottom: 1px solid #c9c9c9;
}
.notice .font34:hover {
    color: #375BA4; /* 호버했을 때 변경되는 색상 */
	font-weight:bold;
}

.introduction-txt {
display: flex;
justify-content: space-between;
    align-items: center;
}

.footer {
  padding: 2rem 0; /* 위아래 여백 추가 */
  width: 100%; /* 100% 너비로 설정 */
  margin-top: 120px;
  background-color: #333;

}
.footer-logo {
  font-size: 20px;
  font-weight: bold;
  color: #e0e0e0 ;
}
.footer-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1280px; /* 너비를 1280px로 제한 */
  margin: 0 auto; /* 화면 중앙에 배치 */
}

.address {
  max-width: 51.5rem;
  position: relative; /* absolute에서 relative로 수정 */
  padding: 0 1rem; /* 좌우 여백을 추가하여 내용이 너무 붙지 않도록 */
}

.address ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.4rem;
  row-gap: 0.8rem;
}

.address ul li {
  font-size: 14px;
  color : #ccc;
}