/* 기본 리셋 및 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    font-family: sans-serif;
    line-height: 1.5;
    margin: 0;
    padding-top: 60px; /* 고정 네비게이션바 높이만큼 여백 */
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  ul {
    list-style: none;
  }
  body {
    margin: 0;
    height: 2000px; /* 스크롤이 생기도록 임의로 높게 설정 */
    font-family: sans-serif;
  }


/* 하단 문의하기 버튼 (PC & 모바일) */
.inquiry-toggle {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  background-color: #333;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  z-index: 10000;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 하단 고정 문의 섹션 */
.fixed-inquiry {
  position: fixed;
  bottom: -100%; /* 기본적으로 숨김 */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background-color: #f1f1f1;
  padding: 20px;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
  z-index: 9999;
  text-align: center;
  border-radius: 10px 10px;
  transition: bottom 0.3s ease-in-out;
}

/* 문의 폼이 열릴 때 */
.fixed-inquiry.active {
  bottom: 60px; /* 위로 올라오도록 설정 (버튼 위에 위치) */
}

/* 폼 내부 스타일 */
.fixed-inquiry h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.fixed-inquiry form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.fixed-inquiry label {
  font-weight: bold;
  flex: 0 0 70px;
  text-align: right;
}

.fixed-inquiry input {
  flex: 1;
  min-width: 180px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.fixed-inquiry button {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 0.3s ease;
}
.fixed-inquiry button:hover {
  background-color: #555;
}

/* ✅ 반응형: 모바일에서 너비 및 여백 조정 */
@media screen and (max-width: 768px) {
  .fixed-inquiry {
      width: 95%;
      height: auto; /* 내용에 맞게 높이 자동 조절 */
      padding: 15px; /* 여백 최소화 */
  }

  .fixed-inquiry h2 {
      margin-bottom: 5px; /* 제목과 폼 간격 최소화 */
      font-size: 18px;
  }

  .fixed-inquiry form {
      flex-direction: column;
      gap: 5px; /* 요소 간 최소 간격 */
  }

  .fixed-inquiry label {
      width: 100%;
      max-height: fit-content;
      text-align: left;
      font-size: 14px; /* 폰트 크기 살짝 줄이기 */
      margin-bottom: 3px; /* 라벨과 입력창 간격 최소화 */
      padding-bottom: 0;
  }

  .fixed-inquiry input {
      width: 100%;
      min-width: auto;
      padding: 6px; /* 패딩 줄여서 컴팩트하게 */
      font-size: 14px; /* 입력창 텍스트 크기 조정 */
  }

  .fixed-inquiry button {
      width: 100%;
      padding: 8px; /* 버튼 패딩 줄여서 높이 조절 */
      font-size: 14px; /* 버튼 글자 크기 조정 */
  }
}



  /* 상단 고정 네비게이션 바 */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.2); /* 반투명 */
    z-index: 999;
    backdrop-filter: blur(3px);
  }
      /* 내부 래퍼 */
  .navbar-inner {
  /* 원하는 최대 폭 (예: 1200px) */
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  
  /* 로고와 메뉴 정렬 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px; /* 양옆 여백 */
  
  }
  .nav-links {
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    gap: 20px;
    align-items: center;
    }

/* 드롭다운 래퍼 */
.dropdown {
position: relative; /* 자식(dropdown-menu)을 절대 위치시키기 위한 부모 relative */
}

/* 드롭다운 토글 링크 (기본 링크 스타일) */
.dropdown-toggle {
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.2s;
}
.dropdown-toggle:hover {
background-color: rgba(187, 187, 187, 0.2); /* 반투명 */
}

/* 드롭다운 메뉴 */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 150px; /* 드롭다운 폭 */
background-color: rgba(255, 255, 255, 0.2); /* 반투명 */
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
display: none; /* 기본은 숨김 */
flex-direction: column;
z-index: 1000;
}
.dropdown-menu a {
display: block;
padding: 8px 12px;
color: #333;
text-decoration: none;
background-color: rgba(221, 221, 221, 0.493); /* 반투명 */
}
.dropdown-menu a:hover {
background-color: rgba(94, 94, 94, 0.404); /* 반투명 */
}

/* PC에서 hover 시 드롭다운 열기 */
.dropdown:hover .dropdown-menu {
display: flex; /* 혹은 block */
}

/* 햄버거 버튼 (우측 상단으로 정렬) */
.hamburger {
  display: none; /* 기본적으로 PC에서는 숨김 */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 20px; /* 오른쪽 여백 조절 */
  transform: translateY(-50%);
  z-index: 1001; /* 네비게이션보다 위에 배치 */
}
.mobile-menu {
display: none; /* 기본 숨김 */
position: absolute;
top: 60px;
right: 0;
width: 200px;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.mobile-menu ul {
list-style: none;
}
.mobile-menu li {
border-bottom: 1px solid #f0f0f0;
}
.mobile-menu a {
display: block;
padding: 12px;
text-decoration: none;
color: #333;
}

/* 모바일 하위메뉴 */
.sub-menu {
display: none; /* 하위메뉴 숨김 */
background: #f9f9f9;
}
.sub-menu li {
border-bottom: 1px solid #eee;
}
.sub-menu a {
padding: 10px 20px; 
}



  /* 섹션 스타일 */
  section {
    padding: 40px 20px;
    margin: 0 auto;
  }
  h2 {
    margin-bottom: 16px;
    font-size: 1.5rem;
    text-align: center;
  }
  p {
    text-align: center;
    margin-bottom: 20px;
  }

  /* 슬라이드 컨테이너 */
.slider-container {
  position: relative;
  width: 80%;
  margin: 0 auto;
  height: 400px; /* 슬라이드 높이 설정 */
  overflow: hidden;
}

/* 개별 슬라이드 */
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* 첫 번째 슬라이드 활성화 */
.slide.active {
  opacity: 1;
}

/* 슬라이드 오버레이 추가 (어두운 반투명 커버) */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* 검은색 반투명 커버 */
  z-index: 1;
}

/* 슬라이드 내부 텍스트 */
.slide-text {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  max-width: 80%;
}

  .slide-text h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }
  .slide-text p {
    font-size: 1.1rem;
    line-height: 1.4;
  }
  
  /* 섹션 2 */
  .section-2 h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }

  /* 섹션 3: SCHD증권 이용가이드 */
  .section-3 img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }

  /* 섹션 4: 첨부한 이미지처럼 레이아웃 */
  .section-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  .section-4 .card {
    width: 300px;
    background: #f8f8f8;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
  }
  .section-4 .card img {
    width: 100%;
    height: 200px; /* 고정 높이 설정 */
    object-fit: cover; /* 이미지 비율 유지하면서 container에 맞게 채움 */
    display: block;
  }
  
  .section-4 .card p {
    padding: 10px;
  }

  /* 섹션 5: 아이콘 5개 */
  .section-5 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
    max-width: 1000px;
  }
  .section-5 .icon-box {
width: 140px; /* 예: 100px 고정 */
height: 80px; /* 예: 60px 고정 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden; /* 자르는 효과를 위해 오버플로 숨김 */
/* 필요하다면 gap: 10px 등 추가 */
}

.section-5 .icon-box img {
width: 100%;
height: auto;
object-fit: cover;         /* 부모 크기에 맞춰서 이미지를 잘라냄 */
object-position: center;   /* 중앙 기준으로 잘라냄 */
display: block;            /* 혹은 inline 요소 문제 방지 */
}


  /* 섹션 6 (배경이미지 + 버튼) */
.section-6 {
position: relative;
color: #fff;
text-align: center;
height: 300px; /* 필요 시 높이 조정 */
display: flex;
align-items: center;
justify-content: center;
background: url('/bg.jpg') no-repeat center/cover;
}

/* 섹션 6 내부 컨텐츠 래퍼 */
.section-6-content {
text-align: center;
/* 필요 시 최대 너비 설정 가능
   max-width: 600px;
   margin: 0 auto; 
*/
}

/* 제목 스타일 */
.section-6-content h2 {
font-size: 2rem;
margin-bottom: 10px;
}

/* 안내 문구 스타일 */
.section-6-content p {
margin-bottom: 20px;
line-height: 1.4;
}

/* 버튼 스타일 */
.section-6-content a {
display: inline-block;
background: rgba(0,0,0,0.6);
padding: 12px 20px;
border-radius: 6px;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.section-6-content a:hover {
background: rgba(0,0,0,0.8);
}

  /* 하단 문의 폼 & TradingView 전광판 */
  .inquiry-section {
    background: #f1f1f1;
    padding: 20px;
    margin-top: 40px;
  }
  .inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
  }
  .inquiry-form label {
    font-weight: bold;
  }
  .inquiry-form input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .inquiry-form button {
    padding: 10px;
    border: none;
    border-radius: 4px;
    background: #333;
    color: #fff;
    cursor: pointer;
  }
  .inquiry-form button:hover {
    background: #555;
  }
  .tradingview-ticker {
    margin-top: 20px;
    text-align: center;
  }

  /* 푸터 스타일 */
footer {
  background: #c7c7c7a8;
  padding: 50px 20px;
  padding-bottom: 50px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

/* 푸터 컨테이너 */
.footer-container {
  max-width: 1800px;
  margin: 0 auto;
}

/* 푸터 네비게이션 */
.footer-nav {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-bottom: 30px;
}

.footer-column h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 5px;
}

.footer-column ul li a {
  color: #333;
  text-decoration: none;
}

/* 푸터 회사 정보 */
.footer-info {
  text-align: center;
}

.footer-logo {
  width: 120px; /* 로고 크기 조절 */
  margin-bottom: 10px;
}

.footer-info p {
  margin: 5px 0;
}

.copyright {
  margin-top: 10px;
  font-size: 12px;
  color: #777;
}


  /* 카카오톡 아이콘 떠다니기 */
  .tele-icon {
    position: fixed;
    right: 150px;
    bottom: 150px;
    width: 100px;
    height: 100px;
    cursor: pointer;
    z-index: 1000;
  }

      /* 간단히: 모바일에서 .mobile-menu ul li:hover .sub-menu { display: block; } 로 열 수 있음
    또는 자바스크립트로 클릭 시 열고 닫기 로직을 구현할 수도 있습니다. */

    /* 반응형: 768px 이하일 때 PC용 메뉴 숨기고, 햄버거 보이기 */
    @media (max-width: 768px) {
      .nav-links {
        display: none; /* 모바일에서는 PC용 메뉴 숨김 */
      }
      .navbar-logo img {
        margin-top: 15px;
        display: flex; /* 모바일에서는 햄버거 보이기 */
        max-height: 35px;
      }
      .hamburger {
        display: flex; /* 모바일에서는 햄버거 보이기 */
        flex-direction: column;
        justify-content: space-around;
        width: 24px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
      }
      .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background: #333;
        border-radius: 3px;
      }
      .footer-container {
        margin-bottom: 50px;
      }
  }
  @media (max-width: 768px) {
    .tele-icon {
      width: 70px; /* 모바일에서 크기 축소 */
      height: 70px;
      bottom: 200px; /* 모바일에서 위치 조정 */
      right: 20px;
    }
    .section-4 .card {
      width: 280px;
      background: #f8f8f8;
      border-radius: 8px;
      overflow: hidden;
      text-align: center;
    }
  }
  
  /* 📌 🔥 반응형: 모바일(768px 이하)일 때 가독성 향상 */
@media (max-width: 768px) {
  .footer-nav {
    flex-direction: column;  /* 컬럼을 세로 정렬 */
    align-items: center;  /* 가운데 정렬 */
    gap: 20px;  /* 간격 추가 */
    text-align: center;
  }

  .footer-column {
    width: 100%;  /* 전체 너비 사용 */
  }

  .footer-column h3 {
    font-size: 20px;  /* 글씨 크기 조정 */
    margin-bottom: 2px;
  }

  .footer-column ul li {
    margin-bottom: 2px;
    font-weight: bold;
  }

  .footer-logo {
    width: 80px;  /* 모바일에서 로고 크기 축소 */
  }

  .footer-info p {
    font-size: 13px;
    line-height: 1.4;  /* 줄 간격 조절 */
  }

  .copyright {
    font-size: 11px;
  }
}

/* 📌 🔥 반응형: 모바일(768px 이하)일 때 "프로그램문의" 제거 */
@media (max-width: 768px) {
  .mobile-menu li > a[href="#"] { 
    display: none; /* "프로그램문의" 메뉴 숨김 */
  }

  /* 하위 메뉴 보이게 설정 */
  .mobile-menu .sub-menu {
    display: block;
  }

  .mobile-menu .sub-menu li {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .footer-nav {
    display: none;
  }
}