/*
main{
  display: flex;
   margin-bottom: 200px;
  flex-direction: column;
  height: 100%;
}
*/

/* 기본적인 스타일 및 리셋 */
/*
body, html {
  width: 100%;
  height: 100%; 
  margin: 0;
  padding-bottom: 100px;   
  
  position: fixed; 
  overflow: auto


}*/



/* 모든 요소의 box-sizing 설정 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 최소 높이 설정 */
  display: flex;
  flex-direction: column;

}

main {
  flex: 1; /* 본문이 footer 위로 올라오지 않도록 설정 */
}

/* 기본 컨테이너 스타일 */
.container {
  width: 100%;
  max-width: 2000px; /* 최대 너비 설정 */
  margin: 0 auto; /* 가운데 정렬 */
  padding: 20px;
}

/* 추가적인 레이아웃 스타일 */
.content {
  display: flex;
  flex-wrap: wrap; /* 내용이 넘칠 경우 줄바꿈 */
  justify-content: center;
  align-items: center;
}

/* 반응형 대응 */
@media (max-width: 768px) {
  main {
    margin-bottom: 100px; /* 작은 화면에서 조정 */
  }
}



/* 네비게이션 바 내 탭 메뉴 (스크롤 가능 & 중앙 정렬 유지) */
.nav-content {
  display: flex;
  justify-content: center; /* 중앙 정렬 */
  overflow-x: auto; /* 가로 스크롤 허용 */
  white-space: nowrap; /* 글씨 줄바꿈 방지 */
  -webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 */
  scroll-behavior: smooth; /* 스크롤 부드럽게 */
  direction: ltr; /* 왼쪽에서부터 시작 */
}

/* 탭 내부 정렬 */
.nav-content .tabs {
  display: inline-flex; /* 중앙 정렬을 유지하면서 가로로 배치 */
  justify-content: center; /* 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  gap: 5px; /* 탭 간격 줄이기 */
  flex-wrap: nowrap; /* 줄바꿈 방지 */
  min-width: max-content; /* 탭이 작아지지 않도록 설정 */
}

/* 개별 탭 스타일 */
.nav-content .tabs .tab {
  margin: 0 5px; /* 좌우 마진 조정 */
  min-width: max-content; /* 글자가 짤리지 않도록 설정 */
}

/* 모바일 화면에서 간격 및 글씨 크기 조정 */
@media (max-width: 768px) {
  .nav-content {
    padding: 0 10px; /* 좌우 여백 추가 */
  }

  .nav-content .tabs {
    gap: 2px; /* 모바일에서 간격 더 줄이기 */
  }

  .nav-content .tabs a {
    font-size: 14px !important; /* 모바일에서 글씨 크기 줄이기 */
    padding: 0 10px; /* 탭 내부 여백 줄이기 */
  }

  .nav-content .tabs .tab {
    margin: 0 2px; /* 간격 최소화 */
  }
}

/* 더 작은 화면 (예: 480px 이하) */
@media (max-width: 480px) {
  .nav-content .tabs {
    gap: 1px; /* 작은 화면에서 간격 최소화 */
  }

  .nav-content .tabs a {
    font-size: 12px !important; /* 작은 화면에서는 더 작게 */
    padding: 0 8px; /* 탭 내부 여백 줄이기 */
  }
}

/* 기존 탭 스타일 */
.nav-content .tabs {
  height: 60px !important; /* 탭 바의 전체 높이를 증가 */
  display: flex;
  align-items: center; /* 중앙 정렬 */
}

.nav-content .tabs a {
  font-size: 14px !important; /* 글씨 크기 */
  color: #fff !important; /* 글씨 색상 */
  text-transform: none !important; /* 대문자 변환 제거 */
  line-height: 60px !important; /* 높이에 맞춰 정렬 */
}

.nav-content .tabs .tab a.active {
  font-size: 14px !important; /* 활성 탭 글씨 더 크게 */
  color: #ffffff !important; /* 클릭된 탭 색상 */
}

.nav-content .tabs .indicator {
  height: 4px !important; /* 두께 조절 */
  background-color: #fafafa !important; /* 색상 적용 */
  bottom: 0px !important; /* 인디케이터를 아래로 이동 */
}

/* 상단 메뉴 고정 */
.nav-extended {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff; /* 배경색 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 */
  height: 30px; /* 상단 메뉴의 높이 설정 */
}

/* 로고 위치 */
.brand-logo {
  font-family: "Batang", "바탕체", serif;
  position: relative;
  left: 20px; /* 원하는 만큼 이동 */
}

/* 상단 메뉴 높이 수정 */
.nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 70px; /* 상단 메뉴의 높이를 70px로 설정 */
}

/* 이미지 정렬 */
.nav-images {
  display: flex;
  margin: 20px auto;
  justify-content: center; /* 이미지 가로 중앙 정렬 */
  align-items: center; /* 이미지 세로 중앙 정렬 */
  gap: 15px; /* 이미지 간격 */
  flex-wrap: wrap; /* 화면 크기에 따라 줄바꿈 */
}

.nav-images img {
  height: 50px; /* 이미지 높이 */
  width: auto; /* 가로 비율 유지 */
  border-radius: 4px; /* 이미지 모서리 둥글게 */
}

/* 모바일 반응형 디자인 */
@media (max-width: 768px) {
  .nav-images {
    gap: 10px; /* 모바일에서 간격 좁히기 */
  }

  .nav-images img {
    height: 40px; /* 모바일에서 이미지 크기 줄이기 */
  }
}

@media (max-width: 480px) {
  .nav-images {
    flex-direction: row; /* 모바일 화면에서 세로 정렬 */
    gap: 10px; /* 간격 조정 */
  }

  .nav-images img {
    height: 35px; /* 작은 화면에서 이미지 크기 더 줄이기 */
  }
}















/* 콘텐츠 영역 */
.main-content {
  position: relative;
  padding: 20px;
  margin-top: 70px; /* 상단 메뉴 높이만큼 여백 추가 */
  overflow-y: auto; /* 콘텐츠 영역이 화면을 벗어나면 스크롤 */
  max-width: 100%;
  flex: 1; /* 콘텐츠 영역이 화면을 꽉 채우도록 설정 */
}












    /* CSS 스타일 (제공된 모든 스타일 통합) */
    #postListContainer {
      margin: 20px 0;
      padding: 20px;
      width: 100%;
      max-width: 2000px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background-color: #f9f9f9;
      box-sizing: border-box;
    }

    #posts-container {
      margin: 20px auto;
      width: 100%;
      max-width: 2000px;
      text-align: center;
    }

    #postList {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      max-width: 2000px;
    }

    .collection-item {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      background: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .modal, .reply-modal, .comment-modal {
      display: none;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }

    .modal-content, .reply-modal .modal-content, .comment-modal .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      max-width: 400px;
      width: 90%;
      position: relative;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      text-align: center;
    }

    .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
    }

    button {
      width: 100%;
      padding: 10px;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }

    button.green {
      background-color: green;
      color: white;
    }

    button.red {
      background-color: red;
      color: white;
    }

    .cancel-modal-btn {
      margin-top: 10px;
    }

    .post-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
    }

    .post-item:hover {
      background-color: #f1f1f1;
    }

    .post-meta {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .post-content,
    .post-actions {
      display: none;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ddd;
    }

    .post-actions {
      display: flex;
      gap: 10px;
      width: auto;
    }

    @media (max-width: 600px) {
      .post-actions {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    .post-content.show,
    .post-actions.show {
      display: block;
    }

    .post-summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .post-summary span {
      margin-right: 15px;
    }

    .post-details {
      margin-top: 10px;
    }

    .post-actions button {
      padding: 10px 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      border-radius: 5px;
    }

    .edit-btn {
      background-color: #4caf50;
      color: white;
    }

    .delete-btn {
      background-color: #f44336;
      color: white;
    }

    .cancel-btn {
      background-color: #9e9e9e;
      color: white;
    }

    .reply-list {
      list-style-type: none;
      padding-left: 0;
    }

    .reply-item {
      margin: 10px 0;
      padding: 10px;
      background-color: #f9f9f9;
      border-radius: 5px;
    }

    .comment-input {
      margin-top: 10px;
    }

    .comment-list {
      list-style-type: none;
      padding-left: 0;
      margin-top: 10px;
    }

    .comment-list li {
      margin: 5px 0;
      padding: 5px;
      background-color: #e9ecef;
      border-radius: 5px;
    }

    .btn-small {
      padding: 5px 10px;
      margin: 5px;
      cursor: pointer;
    }






















.blue { background-color: #007bff; color: white; }
.green { background-color: #28a745; color: white; }
.red { background-color: #dc3545; color: white; }









h1 {
  text-align: center;
  margin-top: 20px;
  font-size: 24px;
}

#training-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-width: 1300px; /* 리스트뷰의 최대 너비를 1300px로 설정 */
  width: 100%; /* 화면 크기에 맞게 자동 조정 */
  margin: 0 auto; /* 중앙 정렬 */
}
.training-item {
  background-color: #fff;
  margin: 15px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between; /* 텍스트와 이미지를 양쪽에 배치 */
  align-items: center; /* 수직 가운데 정렬 */
}
.training-text {
  max-width: 70%; /* 텍스트 영역에 너비를 제한 */
}
.training-item img {
  max-width: 200px; /* 이미지의 최대 너비 */
  height: auto;
  border-radius: 8px;
}









/* Default Card Styles */
.cart {
  width: 300px;  /* Default width for the card */
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
 
  text-align: center;
}

/* Small Card Styles */
.cart.small {
  width: 300px; /* Smaller width for the 'small' class */
  background-color: #f9f9f9; /* Optional: Set a different background for small cards */
}

.cart img {
  width: 100%; /* Image takes the full width of the card */
  height: auto;  /* Keep aspect ratio of the image */
}

.cart-title {
  font-size: 14px;
  margin-top: 10px;
  text-align: center; /* Align the title text to the center */
}

.btn-floating {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

/* 푸터 스타일 */
footer {
  text-align: right;
  padding: 10px;
  background: #333;
  color: #fff;
  position: sticky; /* 화면 하단에 유지되면서 스크롤 가능 */
  bottom: 0;
  width: 100%;
  z-index: 1000; /* 항상 위에 위치 */
}






#cardjob-container {
  width: 100%; /* 전체 너비 설정 */
  max-width: 2000px; /* 최대 너비 제한 */
  margin: 30px auto; /* 수평 중앙 정렬 */
  display: flex; /* Flexbox 레이아웃 */
  flex-wrap: wrap; /* 줄 바꿈 허용 */
  gap: 20px; /* 카드 간격 */
  justify-content: center; /* 카드 수평 중앙 정렬 */
  align-items: flex-start; /* 카드 수직 정렬 */
  text-align: center; /* 텍스트 중앙 정렬 */
  
}

.cardjob {
  flex: 1 1 calc(50% - 40px); /* 50% 너비, 카드 간격 제외 */
  max-width: calc(50% - 40px); /* 최대 너비 설정 */
  height: 200px;
  box-sizing: border-box; /* 패딩 포함 크기 계산 */
  padding: 20px;
  border-radius: 10px; /* 카드 모서리를 둥글게 */
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* 기본 그림자 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 애니메이션 추가 */
}

.cardjob:hover {
  transform: scale(1.1); /* 마우스 갖다 대면 카드 커짐 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1); /* 강조된 그림자 */
}

@media (max-width: 1000px) {
  .cardjob {
    flex: 1 1 calc(100% - 20px); /* 모바일 뷰에서는 카드가 한 줄에 하나 */
    max-width: calc(100% - 20px); /* 최대 너비 설정 */
  }
}







 /* 부모 컨테이너 스타일 */
#test5 {
  width: 100%;
  height: auto; /* 높이를 유동적으로 설정 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 20px;
  box-sizing: border-box;
}

/* iframe 스타일 */
#test5 iframe {
  width: 90vw; /* 화면 너비의 90% */
  max-width: 2000px; /* 최대 너비 */
  height: calc(90vw * 0.5); /* 너비 비율에 따른 높이 조정 */
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 반응형 스타일 */
@media (max-width: 768px) {
  #test5 iframe {
    width: 100%; /* 모바일에서 화면 너비에 맞춤 */
    height: 56.25vw; /* 16:9 비율 유지 */
  }
}











.card2 {
  width: 100%;
max-width: 2000px;   /*위쪽 여백 추가 (50px) */
  height: 50px;

  border: 2px solid #333;

  margin: 20px auto; 
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* 가로 정렬 */
  display: flex;
  justify-content: center; /* 가로 정렬 */
  align-items: center; /* 세로 정렬 */
  background-color: #fff;
  transition: background-color 1s ease, transform 1s ease;  
  position: relative; /* 부모의 상대적 위치를 지정 */
}
.card2-text {
  font-size: 1.5em;
  text-align: center;
  opacity: 1;
  transition: opacity 1s ease;
}
.card2-text.hidden {
  opacity: 0;
}














    #card4-container {
      display: flex;
      flex-direction: column; /* 세로 방향으로 카드 정렬 */
      align-items: center; /* 카드를 중앙 정렬 */
      gap: 15px; /* 카드 간격 */
    }
    .card4 {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
      width: 100%; /* 카드가 화면 너비의 80%를 차지 */
      max-width: 2000px; /* 최대 카드 너비 */
    }
    .card4-header {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .card4-content {
      font-size: 0.95em;
      color: #555;
    }
    /* 밝은 배경색 */
    .card1-bg {
      background-color: #fdfd96; /* 밝은 노랑 */
    }
    .card2-bg {
      background-color: #ffdab9; /* 밝은 살구색 */
    }
    .card3-bg {
      background-color: #c1f0f6; /* 밝은 하늘색 */
    }
    .card4-bg {
      background-color: #d5f5e3; /* 밝은 연녹색 */
    }
    .card5-bg {
      background-color: #ffd1dc; /* 밝은 핑크 */
    }
    .card6-bg {
      background-color: #e6e6fa; /* 밝은 라벤더 */
    }

    .new-badge {
      color: #fff;
      background-color: #e91e63;
      border-radius: 50%;
      padding: 5px;
      font-size: 12px;
      margin-left: 10px;
      display: inline-block;
      text-align: center;
  }
  .comment-box {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f9f9f9;
  }

  .card {
    display: flex;               /* Flexbox로 중앙 정렬 */
    justify-content: center;      /* 가로 중앙 정렬 */
    align-items: center;          /* 세로 중앙 정렬 */
    padding: 20px;                /* 여백 */
    box-sizing: border-box;       /* 박스 모델에 padding 포함 */
    width: 100%;                  /* 가로 100% */
    max-width: 2000px;            /* 최대 너비 설정 (1200px로 제한) */
    margin: 0 auto;    
  }
  
  .card img {
    width:100%;                  /* 가로는 자동으로 비율을 맞추도록 설정 */
    height: 400px;             /* 높이를 300px로 고정 */
    max-width: 100%;   
  }
  

  .card13 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
   /* max-width: 2000px; */
    margin: 0 auto;
 
    border-radius: 20px;  /*모서리를 둥글게 */
    /*  background: linear-gradient(145deg, #e6e6e6, #ffffff);카드에 빛 효과 */
   /* box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2), -8px -8px 16px rgba(255, 255, 255, 0.6);  기본 3D 느낌 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 부드러운 전환 효과 */
  }
  


/* 페이드 이미지 컨테이너 */
.fade-container {
  position: relative; 
  width: 100%;
  max-width: 2000px; /* 컨테이너 크기 제한 */
  height: 500px;
  overflow: hidden;   
  /* border-radius: 0 200px 0 500px; 이미지 컨테이너 모서리를 둥글게*/
  border-radius: 20px; 
/*  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  외곽 그림자 */
}

/* 이미지 스타일 */
.fade-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 20px; /* 이미지 모서리를 둥글게 */
  transition: opacity 2s ease-in-out; /* 부드러운 전환 */
}

.fade-image.active {
  opacity: 1; /* 활성화된 이미지만 보이게 */
}


/* 
.card13 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;

  margin: 0 auto;
}

.fade-container {
  position: relative; 
  width: 100%;
  width: 2000px; 

  height: 500px;
  overflow: hidden;
}

.fade-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out; 
}

.fade-image.active {
  opacity: 1; 
}

*/
@keyframes fade {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}




/* 흔들림 애니메이션 */
.shake {
  animation: shake-animation 3s ease;
}

@keyframes shake-animation {
  0% { transform: rotate(0); }
  25% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0); }
}

/* 아이콘 컨테이너 스타일 */
.icon-badge-container {
  display: flex;
  flex-direction: row; /* 가로 정렬 유지 */
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap; /* 줄바꿈 방지 */
  justify-content: center; /* 중앙 정렬 */
}

.icon-badge i {
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
}






.btn-medium {
  padding: 5px 10px; /* 내부 여백 (버튼 크기 조정 핵심) */
  font-size: 13px; /* 글씨 크기 */
  border-radius: 4px; /* 버튼 모서리 */
  line-height: 1; /* 버튼 높이 균일하게 설정 */
  background-color: #d5f0a9; /* 기본 배경색 */
  color: white; /* 글씨 색상 */
  border: 1px solid transparent; /* 테두리 */
  cursor: pointer; /* 마우스 커서 */
}

.btn-medium:hover {
  background-color: #ffe605; /* 호버 상태 배경색 */
  opacity: 0.9; /* 호버 상태 불투명도 */
}

.btn-medium.blue {
  background-color: #8d61aa; /* 파란색 */
}

.btn-medium.red {
  background-color: #00eeff; /* 빨간색 */
}





/* card3-container 스타일 */
/* card3-container 스타일 */
.card3-container {
  width: 2000px; /* 고정된 너비 설정 */
  display: flex;
  flex-wrap: wrap; /* 여러 줄로 배치 */
  gap: 20px; /* 카드 간격 */
  justify-content: flex-start; /* 카드 왼쪽 정렬 */
  align-items: flex-start; /* 세로 정렬 */
  margin: 0 auto; /* 컨테이너 중앙 정렬 */
}

/* card3 스타일 */
.card3 {
  border: 1px solid #ccc;
  border-radius: 10px;
  width: calc(25% - 20px); /* 한 줄에 4개 배치 (100% / 4 - 간격) */
  max-width: 300px; /* 최대 크기 제한 */
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 내용 넘침 방지 */
  display: flex;
  flex-direction: column; /* 이미지와 텍스트가 세로로 배치 */
}

/* 이미지 스타일 */
.card3 img {
  width: 100%; /* 카드 너비에 맞춤 */
  height: 200px; /* 고정된 높이 */
  object-fit: cover; /* 비율을 유지하면서 자름 */
  border-radius: 10px 10px 0 0; /* 상단 모서리를 둥글게 */
}

/* 카드 헤더 */
.card3-header {
  text-align: center;
  background-color: #007bff;
  color: #fff;
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
}

/* 카드 내용 */
.card3-body {
  padding: 15px;
  flex-grow: 1; /* 텍스트가 카드의 남은 공간을 채우도록 설정 */
}

.card3-body p {
  margin: 8px 0;
  font-size: 14px;
  color: #555;
}

/* 반응형 처리 */
@media (max-width: 768px) {
  .card3 {
    width: calc(50% - 20px); /* 한 줄에 2개 배치 */
  }
}

@media (max-width: 480px) {
  .card3 {
    width: 100%; /* 한 줄에 1개 배치 */
  }
}

















#card1-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%; /* 부모의 전체 너비 */
  max-width: 2000px; /* 최대 너비 제한 */
  
  margin: 50px auto; /* 상하 여백 및 가운데 정렬 */
  gap: 20px; /* 카드 간 간격 */
  justify-content: center; /* 중앙 정렬 */
}

.card1 {
  flex: 0 0 calc(50% - 20px); /* 기본: 한 줄에 2개 */
  max-width: calc(50% - 20px); /* 최대 너비 계산 */
margin-bottom: 30px;
  box-sizing: border-box; /* 패딩 포함 */
  border: 1px solid #ddd; /* 테두리 */
  border-radius: 8px; /* 둥근 모서리 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 */
  overflow: hidden; /* 넘침 숨김 */
  background-color: #fff; /* 기본 배경색 */
  display: flex;
  flex-direction: column;
}

/* 반응형 레이아웃 */
@media (max-width: 768px) {
  .card1 {
    flex: 0 0 100%; /* 작은 화면: 한 줄에 1개 */
    max-width: 100%;
  }
}

.card1 p {
  padding: 10px;
  border-radius: 5px;
  margin: 0;
}

.card1 img {
  width: 100%; /* 이미지 너비를 카드에 맞춤 */
  height: auto; /* 비율 유지 */
  border-radius: 8px; /* 둥근 모서리 */
  object-fit: cover; /* 이미지 크기 조정 */
}




@keyframes blinkBackground {
  0% { background-color: #ffeb3b; }
  50% { background-color: #ffc107; }
  100% { background-color: #ffeb3b; }
}

.blinking {
  animation: blinkBackground 1s infinite alternate !important;
  transition: background-color 0.5s ease-in-out;
}







/* 부모 컨테이너 스타일 */
#imageList {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 2000px;
  margin: 40px auto 0;
  gap: 20px;
  justify-content: space-between;
}

/* 개별 카드 스타일 */
.imageCard {
  flex: 1 1 calc(25% - 20px);
  max-width: calc(25% - 20px);
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

/* 이미지 스타일 */
.imageCard img {
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
  object-fit: cover;
  max-height: 300px;
}

/* 카드 내부 텍스트 */
.imageCard div {
  padding: 10px;
}

.imageCard p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 5px 0;
}

/* 반응형: 중간 화면 */
@media (max-width: 1024px) {
  .imageCard {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

/* 반응형: 작은 화면 */
@media (max-width: 768px) {
  .imageCard {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .imageCard img {
    max-height: none;
  }
}

















































    /* 카드 스타일 */
    .card44 {
      width: 2000px; /* 기본 카드 너비 */
      max-width: 90%; /* 화면 너비의 90%로 제한 */
      height: auto; /* 높이를 내용에 맞게 설정 */
      padding: 20px; /* 내부 여백 */
      background: #fff; /* 카드 배경 */
      border-radius: 10px; /* 모서리 둥글게 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
      text-align: center; /* 텍스트 중앙 정렬 */
      gap: 20px;
      margin: 20px auto; /* 수평 중앙 정렬 */
      line-height: 1.6; /* 텍스트 줄 간격 */
      font-family: "바탕체", serif;
    }

    /* 제목 스타일 */
    .card44 h3 {
      font-size: 32px;
      color: #333;
      margin-bottom: 20px;
    }

    /* 본문 텍스트 스타일 */
    .card44 p {
      font-size: 18px;
      color: #555;
      margin: 10px 0;
    }

    /* 강조 텍스트 스타일 */
    .highlight {
      font-weight: bold;
      color: #007BFF; /* 강조 텍스트 색상 */
    }

    /* 반응형 디자인 */
    @media (max-width: 1200px) {
      .card44 {
        width: 90%; /* 화면 너비의 90%로 설정 */
        padding: 15px; /* 내부 여백 축소 */
      }

      .card44 h3 {
        font-size: 28px; /* 제목 크기 축소 */
      }

      .card44 p {
        font-size: 16px; /* 본문 텍스트 크기 축소 */
      }
    }

    @media (max-width: 768px) {
      .card44 {
        width: 100%; /* 화면 너비에 맞춤 */
        padding: 10px; /* 내부 여백 축소 */
      }

      .card44 h3 {
        font-size: 24px; /* 제목 크기 축소 */
      }

      .card44 p {
        font-size: 14px; /* 본문 텍스트 크기 축소 */
      }
    }





    @keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      50% { transform: translateX(5px); }
      75% { transform: translateX(-5px); }
      100% { transform: translateX(0); }
    }






    .job-card {
      width: 100%;
      max-width: 2000px;
      margin: 20px auto;
      padding: 20px;
      border-radius: 12px;
      background: linear-gradient(135deg, #fcfcfc, #eef1da);
     /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);*/
      font-family: "Batang", serif;
      text-align: center;
    }
    .job-card h2 {
      color: #4a148c;
      font-size: 36px;
      margin-bottom: 15px;
      font-weight: bold;
    }
    .job-card p {
      font-size: 28px;
      color: #4e342e;
      margin: 10px 0;
    }
    .job-card strong {
      color: #1a237e;
    }

    @media (max-width: 480px) {
      .job-card {
        padding: 15px;
      }
      .job-card h2 {
        font-size: 24px;
      }
      .job-card p {
        font-size: 18px;
      }
    }





    h1 {
      text-align: center;
      font-size: 20px;
      margin-bottom: 20px;
    }
    
    .table-wrapper {
      width: 100%;
      overflow-x: auto;
      display: flex;
      justify-content: center;  /* 가운데 정렬 핵심 */
    }
    
    table {
      width: 100%;
      max-width: 2000px; /* 너무 넓지 않게 */
      border-collapse: collapse;
      background: white;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    th, td {
      padding: 10px;
      border: 1px solid #ddd;
      font-size: 14px;
      text-align: center;
    }
    
    th {
      background: #f0f0f0;
      font-weight: bold;
    }
    
    @media (max-width: 480px) {
      table, th, td {
        font-size: 12px;
        padding: 6px;
      }
    }







  




    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    
    .modal-content {
      background: #fff;
      border-radius: 6px;
      width: 95%;
      max-width: 420px;
      max-height: 90vh; /* ✅ 화면보다 넘지 않게 제한 */
      overflow-y: auto;  /* ✅ 내부 스크롤 */
      padding: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      box-sizing: border-box;
    }
    
    .modal-content h1 {
      font-size: 16px;
      margin-bottom: 10px;
      text-align: center;
    }
    
    /* 테이블 스타일 */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }
    
    th, td {
      padding: 6px;
      border: 1px solid #ddd;
      text-align: center;
    }
    
    th {
      background-color: #f4f4f4;
      font-weight: bold;
    }
    
    td {
      color: #555;
    }
    
    /* 닫기 버튼 */
    .close, #close-modal-button {
      font-size: 12px;
      padding: 6px 10px;
      margin-top: 10px;
      background: #333;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .close {
      position: absolute;
      top: 8px;
      right: 10px;
      background: none;
      color: #000;
    }
    
    /* 모바일 최적화 */
    @media (max-width: 480px) {
      .modal-content {
        max-width: 95vw;
        padding: 10px;
        font-size: 11px;
      }
    
      th, td {
        font-size: 11px;
        padding: 4px;
      }
    
      .modal-content h1 {
        font-size: 14px;
      }
    
      #close-modal-button {
        font-size: 11px;
        padding: 5px 10px;
      }
    }
























 





/* 콘텐츠 스타일 */
#test7 {
  display: flex;
  flex-direction: column; /* 세로 정렬 */
  align-items: center; /* 내부 콘텐츠 가운데 정렬 */
  text-align: center; /* 텍스트 가운데 정렬 */
  padding: 20px;
  background-color: #ffffff; /* 흰색 배경 */
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 */

  max-width: 100%; /* 부모 요소의 최대 너비 */
  margin: auto; /* 가운데 정렬 */
  min-height: 600px; /* 최소 높이 */
}

/* iframe 스타일 */
#test7 iframe {
  width: 100%; /* 부모 요소 크기에 맞게 조절 */
  max-width: 1900px; /* 최대 너비 설정 */
  height: 600px; /* 고정 높이 */
  border: none; /* 테두리 제거 */
}

/* 반응형 조정 */
@media (max-width: 768px) {
  #test7 {
      padding: 10px; /* 모바일에서는 여백 줄이기 */
  }

  #test7 iframe {
      height: 300px; /* 모바일에서 높이 축소 */
  }
}

  /* 버튼 스타일 */
  .pretty-link {
    display: inline-block;
    text-decoration: none; /* 밑줄 제거 */
    font-size: 16px; /* 글자 크기 */
    font-weight: bold; /* 글자 두껍게 */
    color: white; /* 글자 색 */
    background-color: #007BFF; /* 버튼 배경색 (파랑) */
    padding: 12px 20px; /* 버튼 내부 여백 */
    border-radius: 8px; /* 버튼 테두리 둥글게 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
    transition: all 0.3s ease; /* 애니메이션 효과 */
}

/* 버튼 hover 효과 */
.pretty-link:hover {
    background-color: #0056b3; /* hover 시 어두운 파랑 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* hover 시 그림자 강조 */
    transform: translateY(-2px); /* 살짝 위로 올라감 */
}

/* 버튼 active 효과 */
.pretty-link:active {
    background-color: #004085; /* active 시 더 어두운 파랑 */
    transform: translateY(0); /* 클릭 시 원래 위치 */
}
.pretty-link i {
  margin-right: 8px; /* 아이콘과 텍스트 사이 간격 */
}




      
      .card123 {
        max-width: 2000px; /* 최대 너비 */
        margin: auto; /* 가운데 정렬 */
     
        padding: 15px 20px; /* 패딩 줄임 */
        border-radius: 15px; /* 모서리 크기도 약간 줄임 */
        text-align: center;
        display: inline-block;
        position: relative;
    }
    
    .card123::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), transparent);
        border-radius: 15px; /* 부모 카드의 크기와 일치 */
        pointer-events: none;
    }
    
    #counter {
        display: flex;
        justify-content: center;
        gap: 10px; /* 간격 축소 */
    }
    
    .digit {
        font-size: 2rem; /* 글자 크기 줄임 */
        font-weight: bold;
        display: inline-block;
        width: 40px; /* 폭 줄임 */
        height: 60px; /* 높이 줄임 */
        line-height: 60px;
        text-align: center;
        border: 2px solid #d1d8e0;
        border-radius: 8px; /* 모서리 크기 줄임 */
        background: linear-gradient(145deg, #dfe6e9, #e7a2d6);
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .digit:hover {
        transform: translateY(-3px); /* hover 효과 크기 감소 */
    }
    
    .digit.flip {
        animation: flip 0.5s ease-in-out;
    }
    
    @keyframes flip {
        0% {
            transform: rotateX(0deg);
        }
        50% {
            transform: rotateX(90deg);
            color: #ffffff;
        }
        100% {
            transform: rotateX(0deg);
        }
    }
    



 








.card50 {
  width: 100%;
  max-width: 2000px;   /* 최대 너비 설정 */
  min-height: 100px;   /* 최소 높이 설정 */
  padding: 20px;       /* 패딩 추가 */
  
  border: 2px solid #333;
  margin: 50px auto; /* 위쪽 여백 추가 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  

  /* 중앙 정렬 */
  display: flex;
  flex-direction: column; /* 세로 방향으로 정렬 */
  justify-content: center; 
  align-items: center; 

  background-color: #fff;
  transition: background-color 1s ease, transform 1s ease;  
  position: relative;
}

.card50 h5 {
  font-size: 1.5em;
  text-align: center;
  margin: 10px 0; /* 위아래 여백 추가 */
}

.card50.hidden {
  opacity: 0;
  transition: opacity 1s ease;
}



   /* .card123 스타일 - 배경 그라디언트 적용 */
.card123 {
  max-width: 2000px; /* 화면 초과 방지 */
  width: 100%;
  margin: 0 auto; /* 중앙 정렬 */
  display: flex;
  flex-wrap: wrap; /* 줄 바꿈 허용 (모바일 대응) */
  justify-content: center; /* 내부 요소 중앙 정렬 */
  align-items: center;
  padding: 20px; /* 여백 추가 */
  background: linear-gradient(135deg, #ffffff, #3f34dd); /* 배경 그라디언트 */
}

/* 카운터 영역 */
#counter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 모바일에서 줄 바꿈 */
  gap: 10px; /* 숫자 간 간격 */
  font-size: 50px; /* 숫자 크기 */
  font-weight: bold;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 90%; /* 화면을 초과하지 않도록 조정 */
}

/* 숫자 스타일 - 그라디언트 적용 */
.digit {
  width: 60px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #007BFF, #9b59b6); /* 숫자 박스 그라디언트 */
  color: white;
  font-size: 48px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* 반응형: 모바일 화면에서 스타일 조정 */
@media (max-width: 768px) {
  .card123 {
      flex-direction: column; /* 세로 배치 */
      padding: 15px;
  }

  #counter {
      font-size: 30px; /* 숫자 크기 조정 */
      padding: 10px;
      gap: 5px;
  }

  .digit {
      width: 45px;
      height: 60px;
      font-size: 32px;
  }
}










  ul.collapsible {
    border-radius: 15px; /* 둥근 모서리 */
   
    padding: 20px;  /* 내부 여백 */
    max-width: 2000px; /* 최대 너비 2000px */
    width: 100%; /* 화면 크기에 맞게 조절 */

    
    /* 가운데 정렬 */
    display: block;
    margin: 0 auto;
    border: 2px solid black; 
}
/* Collapsible 아이콘 스타일 */
.collapsible-header i {
  margin-right: 10px;
  font-size: 24px; /* 아이콘 크기 조정 */
  color: #007bff; /* 아이콘 색상 */
}

/* 제목 오른쪽 정렬 & 라운드 처리 */
.collapsible-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  padding: 15px 25px; /* 여백 추가 */
  margin-bottom: 10px;
  border-radius: 15px; /* 둥글게 */
  cursor: pointer; /* 클릭 가능 표시 */
  font-weight: bold;
  transition: background-color 0.3s ease-in-out;
}

/* 마우스 오버 효과 */
.collapsible-header:hover {
  background-color: #d6d8db; /* 밝은 회색으로 변경 */
}

/* Collapsible 내용도 둥글게 */
.collapsible-body {
  border-radius: 15px; /* 내용도 둥글게 */

  padding: 20px;

  transition: all 0.3s ease-in-out;
}

/* 반응형 - 작은 화면에서 여백 조정 */
@media (max-width: 1024px) {
  .container23 {
      width: 95%; /* 화면이 작아지면 가로 여백을 줄이기 */
  }
}

/* 반응형 - 모바일 화면에서 여백 추가 */
@media (max-width: 768px) {
  .collapsible-header {
      justify-content: center; /* 모바일에서는 가운데 정렬 */
      text-align: center;
  }

  .container23 {
      padding: 10px; /* 모바일에서 패딩 줄이기 */
  }
}




.container70 {
  display: flex;
  align-items: center;
 
  font-family: Arial, sans-serif;
   margin: 50px;
  
  justify-content: center;


}

.card1004 { width: 700px;

  background: #fff;
  border-radius: 12px;


  text-align: center;

}


.card1004 img {
   width: 100%;
  height: 400px;
  border-radius: 10px;
}

.card1004 h3 {
  
  font-size: 18px;
}

.card1004 p {
  font-size: 16px;

 
}

/* 테이블 스타일 */
table {
  width: 100%;
  border-collapse: collapse; /* 테두리를 합쳐 간격 제거 */
  border-spacing: 0; /* 테이블 셀 간격 완전 제거 */
  margin: 0; /* 위아래 여백 제거 */
  background-color: white; /* 테이블 배경 흰색 */
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid white; /* 테두리 흰색 */
}


.center-text {
  font-size: 24px;
  font-weight: bold;
 
  width: 200px;
  text-align: center;
}





@media screen and (max-width: 768px) {
  .container70 {
      flex-direction: column; /* 가로 정렬에서 세로 정렬로 변경 */
      align-items: center;
  }

  .card1004 {
      width: 100%; /* 화면 크기에 맞춰 자동 조정 */
  }

  .card1004 img {
      height: auto; /* 이미지 비율 유지하면서 크기 조정 */
      max-height: 300px; /* 너무 커지지 않도록 최대 높이 지정 */
  }

  table {
      font-size: 14px; /* 작은 화면에서 글자 크기 줄이기 */
  }

  .center-text {
      font-size: 20px; /* 화면이 작아질 때 폰트 크기 조정 */
  }
}




   



/* 컨테이너를 2000px 크기로 설정하고 중앙 정렬 */
.container213 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4개씩 정렬 */
  gap: 20px;
  width: 2000px; /* 컨테이너 너비 설정 */
  margin: 0 auto; /* 화면 가운데 정렬 */
  margin-top: 20px;
  justify-items: center; /* 카드들이 중앙에 정렬되도록 설정 */
}

/* 화면이 작아지면 1개씩 정렬하고 가운데 정렬 */
@media screen and (max-width: 1600px) {
  .container213 {
      width: 100%; /* 너비를 화면에 맞춤 */
      grid-template-columns: repeat(2, 1fr); /* 2개씩 정렬 */
  }
}

@media screen and (max-width: 800px) {
  .container213 {
      width: 100%;
      grid-template-columns: 1fr; /* 1개씩 정렬 */
      justify-items: center; /* 카드가 가운데 정렬되도록 설정 */
  }
}

.card213 { 
  width: 300px; /* 카드 크기 고정 */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 15px;
  cursor: pointer;

}


.card213 h3 {
  font-size: 18px;
  margin: 10px 0;
}

.card213 p {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.timestamp {
  display: block;
  font-size: 12px;
  color: #888;
}

.youtube-btn {
  background: #ff0000;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;

}

.youtube-btn:hover {
  background: #cc0000;
}

/* 버튼을 가운데 정렬 */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

/* 수정된 버튼 크기 */
.loadVideosButton {
  background: #007bff;
  color: white;
  border: none;
  width: 500px; /* 버튼 가로 크기 조정 */
  height: 40px; /* 버튼 세로 크기 */
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;

  text-align: center;
}

.loadVideosButton:hover {
  background: #0056b3;
}



























.pretty-link1 h6 {
  color: black !important;
}













     /* 전체 컨테이너 스타일 */
     #test7 {
      width: 2000px; /* 너비 설정 */
      margin: 100px auto; /* 중앙 정렬 */
      text-align: center; /* 텍스트 중앙 정렬 */
      display: flex;
      flex-direction: column;
      align-items: center;
      background: linear-gradient(135deg, #ffffff, #ffffff); /* 부드러운 블루 그라디언트 */
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }


 
/* 카드 주소 컨테이너 스타일 */
.card-ads {
  margin: 50px 0; /* 위아래 간격을 100px로 늘림 */
  padding: 20px; /* 내부 여백 추가 */
  text-align: center;
}

/* 지도 iframe 스타일 */
iframe {
  width: 90%; /* 부모 요소 기준 90% 크기 */
  max-width: 2000px; /* 최대 너비 */
  height: 600px; /* 높이 설정 */
  border: none;
  margin-top: 30px;
  border-radius: 10px;

}

/* 안내 텍스트 스타일 */
h6 {
  font-size: 20px;
  color: #fffeff;
  margin: 20px 0;
}

/* 링크 스타일 */
.pretty-link a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
}

.pretty-link a:hover {
  color: #ffffff;
}




  .selected-row {
    background-color: #f0f8ff !important; /* 밝은 파란색 */
    transition: background-color 0.3s ease-in-out;
  }




  .title-container {
    display: flex;
    justify-content: space-between; /* 제목 왼쪽, 버튼 오른쪽 */
    align-items: center; /* 세로 중앙 정렬 */
    padding-bottom: 10px; /* 제목 아래 여백 */
  }
  
  #new-post-btn {
    width: 120px;
    height: 40px;
    font-size: 16px;
    
    padding: 5px 15px; /* 상하 패딩 줄임 */
    line-height: 1; /* 기본 글자 높이 유지 */
    
    border-radius: 5px; /* 모서리 둥글게 */
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    
    transition: background-color 0.3s ease-in-out;
    display: flex; /* flexbox 적용 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
  }




contact-buttons

  
  #new-post-btn:hover {
    background-color: #0056b3;
  }









  #bottom-ad {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        text-align: center;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
        z-index: 9999;
        padding: 5px 0;
    }

    /* 모바일 화면에서는 광고 숨김 */
    @media screen and (max-width: 768px) {
        #bottom-ad {
            display: none;
        }
    }




.custom-btn {
  display: inline-block;
  padding: 15px 25px;
  background-color: #2196F3;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}

.custom-btn:hover {
  background-color: #1976D2;
}



@keyframes rotateShake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}


.container2311 {
  overflow-x: auto; /* 가로 스크롤 생김 */
  max-width: 100%;
}
.notice-box {
    width: 100%;
    max-width: 2000px;  /* 최대 넓이 */
    background-color: #ffeb3b;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    border: 2px solid #fbc02d;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    box-sizing: border-box;
    margin: 50px auto;
}

@media (max-width: 480px) {
    .container2311 {
        width: 100%;
        padding: 0 10px;
        overflow-x: visible;  /* 스크롤 필요 없게 */
    }

    .notice-box {
        font-size: 16px;
        padding: 15px;
        width: 100%;       /* 모바일에 꽉 차도록 */
        max-width: 100%;   /* 최대폭 부모에 맞춤 */
    }
}












/* 모달 오버레이 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
 display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-in-out;
}


.modal-overlay.active {
  display: flex;
}


.modal1 {
  background: white;
  padding: 30px;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-in-out;
}


.modal1 h2 {
  font-size: 24px;
  margin-top: 0;
}


.modal1 input,
.modal1 textarea {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}


.modal1 .actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}


.modal1 .submit,
.modal1 .close1 {
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


.modal1 .submit {
  background-color: #4CAF50;
  color: white;
}
.modal1 .submit:hover {
  background-color: #45a049;
}


.modal1 .close1 {
  background-color: #ccc;
  color: black;
}
.modal1 .close1:hover {
  background-color: #999;
}


#open-modal {
  background-color: #ffffff;
  color: #000000;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}
#open-modal:hover {
  background-color: #e64a19;
}


.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px auto;
  flex-wrap: wrap;
}
.contact-buttons a {
  display: inline-block;
  min-width: 200px;
  white-space: nowrap;
}




    
.hidden-section {display: none; 
     
  }
  



 

 /* 기본 슬라이드 스타일 */
  .swiper {
    position: relative;
    width: 100%;
    max-width: 2000px;
    margin: auto;
    padding: 30px 0 80px; /* 아래 여백 확보 (페이징 공간) */
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 120px;
    position: relative;
  }

  .banner-btn {
    display: inline-block;
    width: 600px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #007bff;
    transition: background-color 0.3s;
  }

  .banner-btn:hover {
    filter: brightness(1.1);
  }

  /* 페이징 영역 스타일 */
  .swiper-pagination {
    position: relative;
    width: 300px;
    height: 30px;
    margin: 0 auto;
    overflow: hidden;
  }

  .pagination-wrapper {
    display: flex;
    gap: 10px;
    position: absolute;
    right: 0; /* 오른쪽 끝에서 시작 */
    top: 0;
    animation: move-left-step 10s linear infinite;
  }

  .pagination-dot {
    width: 24px;
    height: 24px;
    background: #888;
    border-radius: 50%;
    opacity: 0.4;
    transition: opacity 0.3s;
    flex-shrink: 0;
    cursor: pointer;
  }

  .pagination-dot.active {
    background: #000;
    opacity: 1;
  }

  /* 오른쪽에서 왼쪽으로 한 칸씩 이동 애니메이션 */
  @keyframes move-left-step {
    0% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(-34px);
    }
    40% {
      transform: translateX(-68px);
    }
    60% {
      transform: translateX(-102px);
    }
    80% {
      transform: translateX(-136px);
    }
    100% {
      transform: translateX(0);
    }
  }

  /* 반응형 - 화면 너비 768px 이하 */
  @media screen and (max-width: 768px) {
    .banner-btn {
      width: 90vw; /* 화면 너비의 90% */
      height: 50px;
      line-height: 50px;
      font-size: 16px;
    }

    .swiper-pagination {
      width: 90vw;
      height: 24px;
    }

    .pagination-dot {
      width: 18px;
      height: 18px;
    }
  }





  /* 이미지 그리드 컨테이너 기본 숨김(불필요한 순간 노출 방지) */
  #imageLis {
    display: none;
    grid-template-columns: repeat(4, 300px);
    gap: 12px;
    justify-content: center;
    margin: 20px auto;
  }

  /* 이미지 카드 스타일 */
  .imageCa {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .imageCa img {
    width: 300px;
    height: 240px;
    object-fit: cover;
    display: block;
  }

  .imageCa small {
    display: block;
    height: 60px;
    line-height: 60px;
    color: #666;
    font-size: 0.85rem;
  }



.imageist {
  display: flex;
  flex-wrap: wrap;         /* 줄바꿈 허용 */
  justify-content: center; /* 가운데 정렬 */
  gap: 10px;               /* 간격 */
}

.imageist img {
  width: 100%;
  max-width: 300px;        /* 최대 300px */
  height: auto;
  border-radius: 8px;
}