/*index.html
/* General Reset */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

/* Navigation Bar */
.navbar {
  position: sticky;
  top: 0;
  background: #fdf4e3;
  padding: 1rem 0;
  height: 60px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.navbar .logo img {
  max-width: 25%; /* 크기를 최대 25%로 설정 */
  max-height: 50px; /* 크기를 최대 50px로 설정 */
  height: auto; /* 비율을 유지하면서 높이 자동 설정 */
  width: auto; /* 너비 자동 설정, 비율에 맞춰서 조정 */
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex: 2;
}

.navbar li {
  position: relative;
  margin: 0 20px;
}

/* 기본 메뉴 항목 스타일 */
.navbar a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  padding: 5px 0;
  display: block;
  position: relative;
  transition: color 0.3s;
}

/* 메뉴 항목 hover 효과 */
.navbar a:hover {
  color: #007BFF; /* 글자 색상 변경 */
}

/* 왼쪽에서 오른쪽으로 부드럽게 나타나는 밑줄 효과 */
.navbar a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007BFF;
  transition: width 0.3s ease-in-out;
}

.navbar a:hover::after {
  width: 100%; /* 커서를 올리면 밑줄이 가로로 확장됨 */
}

/* 하위 메뉴 스타일 */
.navbar .menu-item {
  position: relative;
}

.navbar .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.navbar .submenu li {
  padding: 10px;
}

.navbar .submenu a {
  color: #333;
  font-size: 14px;
  padding: 5px 10px;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s;
}

.navbar .submenu a:hover {
  background-color: #f0f0f0;
  color: #2f87e6;
}

/* hover 시 서브 메뉴 나타나기 */
.navbar .menu-item:hover .submenu {
  display: block;
}

/* Home Section */
#home {
  width: 100%;
  opacity: 100%;
  height: 100vh; /* 섹션의 높이는 100vh로 설정 */
  background-image: url('home_1_upscaling.png'); /* 배경 이미지 경로 설정 */
  background-size: cover; /* 이미지가 섹션을 덮도록 설정 */
  background-position: center; /* 이미지가 섹션의 가운데로 위치하도록 설정 */
  background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
  transition: background-image 1s ease-in-out; /* 부드럽게 전환 효과 */
}
#home h1 span {
  color: #007bff;
}

#home .home-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff5eb;
  z-index: 1;
  opacity: 1;
  transition: opacity 1s ease-in-out;
  font-size: 3rem;
  font-weight: bold;
  margin: 0;
  display: flex;
  flex-direction: column; /* 세로로 배치 */
  align-items: center;    /* 가운데 정렬 */
}

#home button {
  margin-top: 1rem;
  padding: 10px 20px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

#home button:hover {
  background-color: #0056b3;
}

#home .home-content.fade-out {
  opacity: 0; /* 텍스트가 서서히 사라짐 */
}

#home .home-content.fade-in {
  opacity: 1; /* 텍스트가 서서히 나타남 */
}

/* 줄별 애니메이션 */
.line {
  opacity: 0;
  transform: translateY(20px); /* 아래에서 위로 올라오는 효과 */
  animation: slideIn 1s ease forwards;
}

/* 슬라이드 애니메이션 */
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0); /* 원래 위치로 */
  }
}

/* 페이드 인/아웃 효과 */
.home-content.fade-out {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.home-content.fade-in {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.logo-line-container {
  display: flex;
  align-items: center; /* 세로 정렬 */
  justify-content: flex-start; /* 가로 정렬 */
  margin-bottom: 10px; /* 두 번째 줄 간격 */
}

.inline-logo {
  width: 120px; /* 로고의 너비 */
  height: auto; /* 비율 유지 */
  margin-right: 10px; /* 텍스트와 로고 사이 간격 */
}

.line {
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  overflow: visible; /* 넘치는 텍스트도 표시 */
  text-overflow: clip; /* 말줄임표 없이 끝까지 표시 */
}

.home-content span {
  display: inline-block; /* 텍스트를 한 줄에 배치 */
  font-size: 1.5rem; /* 텍스트 크기 조정 */
}

.popup-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.popup-box{
  width:420px;
  background:white;
  padding:35px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.popup-box h2{
  margin-bottom:20px;
}

.popup-box a{
  color:#2d6cdf;
  font-weight:600;
  text-decoration:none;
}

.popup-box a:hover{
  text-decoration:underline;
}

.popup-box button{
  margin-top:25px;
  padding:10px 25px;
  border:none;
  background:#2d6cdf;
  color:white;
  border-radius:6px;
  cursor:pointer;
}

/* Products Section */
#products {
  background-color: #eef9ff;
  height: 120vh;
  text-align: center;
}

.products-content {
  width: 80%;
}

.product-button {
  margin-top: 1rem;
  padding: 10px 20px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.product-button:hover {
  background-color: #0056b3;
}

.product-item {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  margin: 1px 0;
  gap: 40px; /* 간격을 널널하게 설정 */
}

.product-img img {
max-width: 100%;
max-height: auto;
}

.product-description {
  text-align: left;
}

.product-description h3 {
  font-size: 1.8rem;
  margin-bottom: 1px;
}

.product-description p {
  font-size: 1rem;
}

/* 간격을 띄우는 부분 */
.product-item .product-description {
  margin-top: 1px; /* 텍스트와 사진 사이의 간격 */
}

/* About Section 3 (고객지원과 동일, 크기 1/3으로 줄임) */
#about-3{
  background-color: #f0f0f0;
  height: 20vh; /* 1/3로 크기 줄임 */
  padding: 50px 0;
  display: flex;
  justify-content: center;  /* 수평 중앙 정렬 */
  align-items: center;  /* 수직 중앙 정렬 */
  text-align: center;  /* 텍스트 가운데 정렬 */
}

.contact-info-content {
  display: flex;
  justify-content: space-between;
  width: 80%; /* 넓이를 메인 페이지와 동일하게 수정 */
  text-align: center;
  margin-top: 40px;
}

.contact-item {
  width: 30%;
  text-align: center;
}

.contact-item img {
  max-height: 50%; /* 로고가 섹션 높이에 맞게 설정 */
  max-width: auto; /* 로고의 최대 너비 설정 */
  object-fit: contain; /* 이미지가 잘리지 않도록 비율을 유지하면서 들어가게 설정 */
}

.contact-item h3 {
  font-size: 1rem;
  margin-top: 20px;
}

.contact-item p {
  font-size: 0.6rem;
  margin-top: 10px;
}

.company-info, .address-info {
  width: 30%;
}

.company-info h3, .address-info h3 {
  font-size: 1rem;
}

.company-info p, .address-info p {
  font-size: 0.8rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .navbar ul {
      flex-direction: column;
      align-items: center;
  }

  .contact-info-content {
      flex-direction: column;
      align-items: center;
  }

  .contact-item {
      width: 80%;
      margin-bottom: 20px;
  }

  .company-info, .address-info {
      width: 80%;
  }

  .timeline {
      flex-direction: column;
      align-items: center;
  }

  .timeline-left, .timeline-right {
      width: 100%;
      margin-bottom: 20px;
  }
}





/*about.html
/* General Reset */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

/* Navigation Bar */
.navbar {
  position: sticky;
  top: 0;
  background: #fdf4e3;
  padding: 1rem 0;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.navbar .logo img {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex: 2;
}

.navbar li {
  position: relative;
  margin: 0 20px;
}

/* 기본 메뉴 항목 스타일 */
.navbar a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  padding: 5px 0;
  display: block;
  position: relative;
  transition: color 0.3s;
}

/* 메뉴 항목 hover 효과 */
.navbar a:hover {
  color: #007BFF; /* 글자 색상 변경 */
}

/* 왼쪽에서 오른쪽으로 부드럽게 나타나는 밑줄 효과 */
.navbar a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007BFF;
  transition: width 0.3s ease-in-out;
}

.navbar a:hover::after {
  width: 100%; /* 커서를 올리면 밑줄이 가로로 확장됨 */
}

/* 하위 메뉴 스타일 */
.navbar .menu-item {
  position: relative;
}

.navbar .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.navbar .submenu li {
  padding: 10px;
}

.navbar .submenu a {
  color: #333;
  font-size: 14px;
  padding: 5px 10px;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s;
}

.navbar .submenu a:hover {
  background-color: #f0f0f0;
  color: #2f87e6;
}

/* hover 시 서브 메뉴 나타나기 */
.navbar .menu-item:hover .submenu {
  display: block;
}

/* General Section Layout */
.section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* About Section 1 (회사소개 섹션) */
#about-1 {
  width: 100%;
  height: 50vh; /* 섹션의 높이는 50vh로 설정 */
  background-image: url('about_1_v1.png'); /* 배경 이미지 경로 설정 */
  background-size: cover; /* 이미지가 섹션을 덮도록 설정 */
  background-position: center; /* 이미지가 섹션의 가운데로 위치하도록 설정 */
  background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}

#about-1 h1 {
  font-size: 3rem;
  color: white;
}

/* About Section 2 (회사소개 섹션) */
#about-2 {
  background-color: #f0f0f0;
  height: 100vh; /* 2번 섹션 크기 설정 */
  border-top: 2px solid black;  /* 상단 경계선 */
  border-bottom: 2px solid black; /* 하단 경계선 */
  text-align: center;
  padding: 50px 0;
}

#about-2 .about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-2 h2 {
  font-size: 2.5rem;
  margin-bottom: 50px;
}

#about-2 p {
  font-size: 1.2rem;
  line-height: 0.5;
  margin-bottom: 20px;
  text-align: center;
}

/* 대표자 이름에 대한 스타일 */
.representative-name {
  font-size: 0.75rem; /* 대표자 이름 크기 반으로 줄임 */
  color: rgba(0, 0, 0, 0.5); /* 색상 50% 연하게 */
  margin-top: 100px;
}

/* About Section 3 (연혁) */
#about-3 {
  background-color: #fff5eb;
  height: 100vh; /* 섹션의 높이를 화면에 맞게 설정 */
  border-bottom: 2px solid black; /* 하단 경계선 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 50px; /* 양 옆 여백 */
}

.about-left {
  flex: 1;
  text-align: left;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 상단에 위치하도록 설정 */
  padding-top: 20px; /* 적당한 여백 */
}

.about-left h2 {
  font-size: 2.5rem;
  margin-top: 0;
}

/* 오른쪽 타임라인 */
.about-right {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.timeline {
  display: flex;
  justify-content: space-between; /* 항목 간의 간격을 널널하게 설정 */
  align-items: flex-start; /* 세로로 정렬 */
  width: 100%;
}

/* 왼쪽과 오른쪽 타임라인 항목 */
.timeline-left, .timeline-right {
  width: 45%; /* 양쪽의 너비를 일정하게 유지 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 각 항목 간의 간격을 고르게 유지 */
  margin-bottom: 30px; /* 세로 간격을 넓히기 위한 마진 */
}

/* 세로줄 */
.timeline-divider {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 세로줄이 가운데로 정렬되도록 설정 */
  border-left: 2px solid black;
  height: 100%; /* 부모의 높이를 기준으로 세로줄이 채워지게 설정 */
}

/* 연도 오른쪽 정렬 */
.timeline-left p, .timeline-right p {
  font-size: 1.5rem;  /* 폰트 크기를 동일하게 설정 */
  line-height: 2;
}

/* 연도를 왼쪽 정렬 */
.timeline-left p {
  text-align: right;
  margin-bottom: 30px; /* 각 연도 간의 간격을 넓히기 위한 마진 */
}

/* 사건을 오른쪽 정렬 */
.timeline-right p {
  text-align: left;
  margin-bottom: 30px; /* 각 사건 간의 간격을 넓히기 위한 마진 */
}

/* 오른쪽 사건 항목을 세로줄 오른쪽으로 배치 */
.timeline-right {
  position: relative;
  margin-left: 30px; /* 세로줄과 사건 간의 간격 조정 */
}

/* 두 항목을 대칭 배치 */
.timeline-left, .timeline-right {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; /* 항목 간의 간격을 고르게 유지 */
}

/* About Section 4 (고객지원과 동일, 크기 1/3으로 줄임) */
#about-4 {
  background-color: #f0f0f0;
  height: 11vh; /* 1/3로 크기 줄임 */
  padding: 50px 0;
  display: flex;
  justify-content: center;  /* 수평 중앙 정렬 */
  align-items: center;  /* 수직 중앙 정렬 */
  text-align: center;  /* 텍스트 가운데 정렬 */
}

.contact-info-content {
  display: flex;
  justify-content: space-between;
  width: 80%; /* 넓이를 메인 페이지와 동일하게 수정 */
  text-align: center;
  margin-top: 40px;
}

.contact-item {
  width: 30%;
  text-align: center;
}

.contact-item img {
  width: 80%;
  height: auto;
  border-radius: 50%;
}

.contact-item h3 {
  font-size: 1rem;
  margin-top: 20px;
}

.contact-item p {
  font-size: 0.6rem;
  margin-top: 10px;
}

.company-info, .address-info {
  width: 30%;
}

.company-info h3, .address-info h3 {
  font-size: 1rem;
}

.company-info p, .address-info p {
  font-size: 0.8rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .navbar ul {
      flex-direction: column;
      align-items: center;
  }

  .contact-info-content {
      flex-direction: column;
      align-items: center;
  }

  .contact-item {
      width: 80%;
      margin-bottom: 20px;
  }

  .company-info, .address-info {
      width: 80%;
  }

  .timeline {
      flex-direction: column;
      align-items: center;
  }

  .timeline-left, .timeline-right {
      width: 100%;
      margin-bottom: 20px;
  }
}



/*products.html
/* General Reset */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

/* Navigation Bar */
.navbar {
  position: sticky;
  top: 0;
  background: #fdf4e3;
  padding: 1rem 0;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.navbar .logo img {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex: 2;
}

.navbar li {
  position: relative;
  margin: 0 20px;
}

/* 기본 메뉴 항목 스타일 */
.navbar a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  padding: 5px 0;
  display: block;
  position: relative;
  transition: color 0.3s;
}

/* 메뉴 항목 hover 효과 */
.navbar a:hover {
  color: #007BFF; /* 글자 색상 변경 */
}

/* 왼쪽에서 오른쪽으로 부드럽게 나타나는 밑줄 효과 */
.navbar a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007BFF;
  transition: width 0.3s ease-in-out;
}

.navbar a:hover::after {
  width: 100%; /* 커서를 올리면 밑줄이 가로로 확장됨 */
}

/* General Section Layout */
.section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 제품소개 첫 번째 섹션 */
#products-1 {
  width: 100%;
  height: 50vh; /* 섹션의 높이는 50vh로 설정 */
  background-image: url('home_2_v1.jpg'); /* 배경 이미지 경로 설정 */
  background-size: cover; /* 이미지가 섹션을 덮도록 설정 */
  background-position: center; /* 이미지가 섹션의 가운데로 위치하도록 설정 */
  background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}

#products-1 h1 {
  font-size: 3rem;
  color: white;
}

/* 제품소개 두 번째, 세 번째, 네 번째 섹션 */
.section-left {
  width: 50%;
}

.section-right {
  width: 50%;
  padding: 0 20px;
}

.section img {
    max-width: 50%; /* 이미지 크기를 줄이려면 이 값을 조정 */
    height: auto; /* 비율 유지 */
    display: block; /* 이미지 가운데 정렬 시 필요 */
    margin: 0 auto; /* 가운데 정렬 */
  }
  
.section-border {
  height: 1px;
  background-color: black;
  width: 100%;
  margin: 20px 0;
}

/* 2번 섹션 스타일 */
#products-2 {
  height: 50vh;
  display: flex;
  position: relative; /* 비디오 위치를 위한 상대 위치 지정 */
}

.section-left {
  width: 50%;
  position: relative;
}

.section-right {
  text-align: left;
  width: 50%;
  padding: 20px;
}

#products-2 .section-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube Video 스타일 */
.youtube-video {
  position: absolute;
  bottom: 50px; /* 섹션 아래쪽에 위치 */
  right: -900px; /* 섹션 오른쪽에 위치 */
  width: 500px; /* 비디오 크기 */
  height: 150px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.youtube-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 3번 섹션 스타일 */
#products-3 {
  height: 50vh;
  display: flex;
  position: relative; /* 비디오 위치를 위한 상대 위치 지정 */
}

.section-left {
  width: 50%;
  position: relative;
}

.section-right {
  text-align: left;
  width: 50%;
  padding: 20px;
}

#products-3 .section-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube Video 스타일 */
.youtube-video {
  position: absolute;
  bottom: 50px; /* 섹션 아래쪽에 위치 */
  right: -900px; /* 섹션 오른쪽에 위치 */
  width: 500px; /* 비디오 크기 */
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.youtube-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 4번 섹션 스타일 */
#products-4 {
  height: 50vh;
  display: flex;
  position: relative; /* 비디오 위치를 위한 상대 위치 지정 */
}

.section-left {
  width: 50%;
  position: relative;
}

.section-right {
  text-align: left;
  width: 50%;
  padding: 20px;
}

#products-4 .section-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube Video 스타일 */
.youtube-video {
  position: absolute;
  top: 50px; /* 섹션 아래쪽에 위치 */
  right: -900px; /* 섹션 오른쪽에 위치 */
  width: 500px; /* 비디오 크기 */
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.youtube-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 5번 섹션 스타일 */
#products-5 {
  height: 50vh;
  display: flex;
  position: relative; /* 비디오 위치를 위한 상대 위치 지정 */
}

.section-left {
  width: 50%;
  position: relative;
}

.section-right {
  text-align: left;
  width: 50%;
  padding: 20px;
}

#products-5 .section-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube Video 스타일 */
.youtube-video {
  position: absolute;
  bottom: 50px; /* 섹션 아래쪽에 위치 */
  right: -900px; /* 섹션 오른쪽에 위치 */
  width: 500px; /* 비디오 크기 */
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.youtube-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 6번 섹션 스타일 */
#products-6 {
  height: 50vh;
  display: flex;
  position: relative; /* 비디오 위치를 위한 상대 위치 지정 */
}

.section-left {
  width: 50%;
  position: relative;
}

.section-right {
  text-align: left;
  width: 50%;
  padding: 20px;
}

#products-6 .section-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube Video 스타일 */
.youtube-video {
  position: absolute;
  bottom: 50px; /* 섹션 아래쪽에 위치 */
  right: -900px; /* 섹션 오른쪽에 위치 */
  width: 500px; /* 비디오 크기 */
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.youtube-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 7번 섹션 스타일 */
#products-7 {
  height: 50vh;
  display: flex;
  position: relative; /* 비디오 위치를 위한 상대 위치 지정 */
}

.section-left {
  width: 50%;
  position: relative;
}

.section-right {
  text-align: left;
  width: 50%;
  padding: 20px;
}

#products-7 .section-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube Video 스타일 */
.youtube-video {
  position: absolute;
  bottom: 50px; /* 섹션 아래쪽에 위치 */
  right: -900px; /* 섹션 오른쪽에 위치 */
  width: 500px; /* 비디오 크기 */
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.youtube-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 8번 섹션 스타일 */
#products-8 {
  height: 50vh;
  display: flex;
  position: relative; /* 비디오 위치를 위한 상대 위치 지정 */
}

.section-left {
  width: 50%;
  position: relative;
}

.section-right {
  text-align: left;
  width: 50%;
  padding: 20px;
}

#products-8 .section-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube Video 스타일 */
.youtube-video {
  position: absolute;
  bottom: 50px; /* 섹션 아래쪽에 위치 */
  right: -900px; /* 섹션 오른쪽에 위치 */
  width: 500px; /* 비디오 크기 */
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.youtube-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 9번 섹션 스타일 */
#products-9 {
  height: 50vh;
  display: flex;
  position: relative; /* 비디오 위치를 위한 상대 위치 지정 */
}

.section-left {
  width: 50%;
  position: relative;
}

.section-right {
  text-align: left;
  width: 50%;
  padding: 20px;
}

#products-9 .section-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* YouTube Video 스타일 */
.youtube-video {
  position: absolute;
  bottom: 50px; /* 섹션 아래쪽에 위치 */
  right: -900px; /* 섹션 오른쪽에 위치 */
  width: 500px; /* 비디오 크기 */
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.youtube-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* products Section 4 (고객지원과 동일, 크기 1/3으로 줄임) */
#products-10 {
  background-color: #f0f0f0;
  height: 11vh; /* 1/3로 크기 줄임 */
  padding: 50px 0;
  display: flex;
  justify-content: center;  /* 수평 중앙 정렬 */
  align-items: center;  /* 수직 중앙 정렬 */
  text-align: center;  /* 텍스트 가운데 정렬 */
}

.contact-info-content {
  display: flex;
  justify-content: space-between;
  width: 80%; /* 넓이를 메인 페이지와 동일하게 수정 */
  text-align: center;
  margin-top: 40px;
}

.contact-item {
  width: 30%;
  text-align: center;
}

.contact-item img {
  width: 80%;
  height: auto;
  border-radius: 50%;
}

.contact-item h3 {
  font-size: 1rem;
  margin-top: 20px;
}

.contact-item p {
  font-size: 0.6rem;
  margin-top: 10px;
}

.company-info, .address-info {
  width: 30%;
}

.company-info h3, .address-info h3 {
  font-size: 1rem;
}

.company-info p, .address-info p {
  font-size: 0.8rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .navbar ul {
      flex-direction: column;
      align-items: center;
  }

  .contact-info-content {
      flex-direction: column;
      align-items: center;
  }

  .contact-item {
      width: 80%;
      margin-bottom: 20px;
  }

  .company-info, .address-info {
      width: 80%;
  }

  .timeline {
      flex-direction: column;
      align-items: center;
  }

  .timeline-left, .timeline-right {
      width: 100%;
      margin-bottom: 20px;
  }
}





/*contact.html
/* General Reset */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

/* Navigation Bar */
.navbar {
  position: sticky;
  top: 0;
  background: #fdf4e3;
  padding: 1rem 0;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.navbar .logo img {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex: 2;
}

.navbar li {
  position: relative;
  margin: 0 20px;
}

/* 기본 메뉴 항목 스타일 */
.navbar a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  padding: 5px 0;
  display: block;
  position: relative;
  transition: color 0.3s;
}

/* 메뉴 항목 hover 효과 */
.navbar a:hover {
  color: #007BFF; /* 글자 색상 변경 */
}

/* 왼쪽에서 오른쪽으로 부드럽게 나타나는 밑줄 효과 */
.navbar a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007BFF;
  transition: width 0.3s ease-in-out;
}

.navbar a:hover::after {
  width: 100%; /* 커서를 올리면 밑줄이 가로로 확장됨 */
}

/* 기본 메뉴 항목 스타일 */
.navbar a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  padding: 5px 0;
  display: block;
  position: relative;
  transition: color 0.3s;
}

/* 메뉴 항목 hover 효과 */
.navbar a:hover {
  color: #007BFF; /* 글자 색상 변경 */
}

/* 왼쪽에서 오른쪽으로 부드럽게 나타나는 밑줄 효과 */
.navbar a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007BFF;
  transition: width 0.3s ease-in-out;
}

.navbar a:hover::after {
  width: 100%; /* 커서를 올리면 밑줄이 가로로 확장됨 */
}

/* Section Styles */
.section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 1번 섹션 스타일 */
/* support Section 1 (회사소개 섹션) */
#support-1 {
  width: 100%;
  height: 50vh; /* 섹션의 높이는 50vh로 설정 */
  background-image: url('home_3_v1.png'); /* 배경 이미지 경로 설정 */
  background-size: cover; /* 이미지가 섹션을 덮도록 설정 */
  background-position: center; /* 이미지가 섹션의 가운데로 위치하도록 설정 */
  background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
}
#support-1 h1 {
  font-size: 3rem;
  color: #e0ffff;
}

/* 2번 섹션 */
#support-2 {
  background-color: #e0ffff;
  display: flex;
  justify-content: space-between;  /* 왼쪽과 오른쪽에 공간을 분배 */
  align-items: center;  /* 수직 중앙 정렬 */
  height: 80vh;
  border-top: 2px solid black;  /* 상단 경계선 */
  border-bottom: 2px solid black; /* 하단 경계선 */
  padding: 20px;
}

/* 왼쪽: 연락처 정보 */
.contact-left {
  flex: 1; /* 왼쪽 영역이 오른쪽 영역보다 더 넓게 설정될 수 있도록 */
  padding-right: 20px;  /* 오른쪽과 간격을 추가 */
}

.contact-left h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.contact-left p {
  font-size: 1rem;
  margin-bottom: 10px;
}

.contact-left a {
  color: #007bff;
  text-decoration: none;
}

/* 오른쪽: 의견 보내기 폼 */
.contact-right {
  flex: 1;  /* 오른쪽 영역 설정 */
  padding-left: 20px;  /* 왼쪽과 간격을 추가 */
}

.contact-right h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.contact-right form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;  /* 최대 너비 */
  margin: 0 auto;  /* 폼을 수평 중앙 정렬 */
}

.contact-right form label {
  margin: 10px 0 5px;
  font-size: 1.1rem;
}

.contact-right form input,
.contact-right form textarea {
  padding: 10px;
  font-size: 1rem;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.contact-right form button {
  padding: 10px;
  font-size: 1.1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.contact-right form button:hover {
  background-color: #0056b3;
}

/* 3번 섹션 스타일 (구글 지도) */
#support-3 {
  height: 50vh;  /* 세로 높이를 50vh로 설정 */
  width: 100%;
  border-bottom: 2px solid black; /* 하단 경계선 */
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-container {
  width: 100%;
  height: 100%;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* contact Section 4 (고객지원과 동일, 크기 1/3으로 줄임) */
#conctact-4{
  background-color: #f0f0f0;
  height: 11vh; /* 1/3로 크기 줄임 */
  padding: 50px 0;
  display: flex;
  justify-content: center;  /* 수평 중앙 정렬 */
  align-items: center;  /* 수직 중앙 정렬 */
  text-align: center;  /* 텍스트 가운데 정렬 */
}

.contact-info-content {
  display: flex;
  justify-content: space-between;
  width: 80%; /* 넓이를 메인 페이지와 동일하게 수정 */
  text-align: center;
  margin-top: 40px;
}

.contact-item {
  width: 30%;
  text-align: center;
}

.contact-item img {
  width: 80%;
  height: auto;
  border-radius: 50%;
}

.contact-item h3 {
  font-size: 1rem;
  margin-top: 20px;
}

.contact-item p {
  font-size: 0.6rem;
  margin-top: 10px;
}

.company-info, .address-info {
  width: 30%;
}

.company-info h3, .address-info h3 {
  font-size: 1rem;
}

.company-info p, .address-info p {
  font-size: 0.8rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .navbar ul {
      flex-direction: column;
      align-items: center;
  }

  .contact-info-content {
      flex-direction: column;
      align-items: center;
  }

  .contact-item {
      width: 80%;
      margin-bottom: 20px;
  }

  .company-info, .address-info {
      width: 80%;
  }

  .timeline {
      flex-direction: column;
      align-items: center;
  }

  .timeline-left, .timeline-right {
      width: 100%;
      margin-bottom: 20px;
  }
}