/* 공통 스타일 */


/* 공통 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	text-decoration: none !important;
}




body{ overflow-x:hidden;}

body {

   display: flex;
    flex-direction: column;
    min-height: 100vh;
	 box-sizing: border-box;
	 font-family: 'Montserrat', sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
}

.container {

	
	  display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}



.header {
    background-color: #f8f9fa;
    padding: 20px;
    height: 15vh; /* 기본 높이 (PC 화면에서) */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	position: relative; /* 또는 fixed/absolute가 있다면 relative로 바꿔 테스트 */
    z-index: 10000000; /* 다른 레이어보다 위로 오게 */
	
}








/* 상단 구성 요소 */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 왼쪽 홈 아이콘 */
.home-icon img {
    cursor: pointer;
}

/* 가운데 로고 */
.logo {
    flex-grow: 1;
    text-align: center;
}

.logo img {
    cursor: pointer;
}

/* 오른쪽 돋보기와 햄버거 메뉴 */
.search-hamburger {
    display: flex;
    align-items: center;
}

.search-hamburger .search-icon {
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin-right: 20px; /* 돋보기와 햄버거 메뉴 간격 */
}


.hamburger-menu {
    font-size: 30px;
    cursor: pointer;
    display: none; /* PC에서는 숨김 */
}

/* 메뉴 스타일 */
.bottom-header {
    margin-top: 10px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}




/*메뉴스타일*/

.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 메뉴 아이템 간 간격 추가 */
}

.menu a {
    padding: 10px 20px; /* 여유 있는 패딩으로 버튼을 더 크게 */
    margin: 0;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    color: #2C3E50; /* 어두운 네이비 톤 */
    background-color: #ECF0F1; /* 아주 옅은 그레이 */
    border: 0px solid transparent; /* 두꺼운 테두리 */
    border-radius: 8px; /* 모서리를 살짝 둥글게 */
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; /* 부드러운 전환 효과 */
}

.menu a:hover {
    background-color: #3498DB; /* 부드러운 하늘색 */
    color: #ffffff; /* 텍스트 흰색으로 변경 */
    border: 1px solid #2980B9; /* 테두리에 대비되는 색상 */
}

.menu a.active {
    background-color: #3498DB; /* 선택된 메뉴 배경색 */
    color: #ffffff;
    border: 1px solid #2980B9; /* 테두리에 더 진한 파란색 */
    box-shadow: 0px 4px 6px rgba(0, 123, 255, 0.2); /* 부드러운 그림자 추가 */
}





.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 5px;
    box-sizing: border-box;
	  margin-top: 1.5vh;
}

.main-top {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto; /* 가운데 정렬 */
    height: 10%; *//* 이미지 높이 */
   /* background: url('/path/to/house.jpg') no-repeat center center;  배경 이미지 설정 */
    background-size: cover; /* 이미지 크기 조정 */
}

.main-middle,
.main-bottom {
    margin: 1px auto; /* 가운데 정렬 */
    width: 100%;
    max-width: 1080px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    /*box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);*/
}

.main-top h2,
.main-middle h2,
.main-bottom h2 {
    font-size: 24px;
    color: #333;
    text-align: center;
}

/* 테이블 스타일 */
.main-bottom table {
    width: 100%;
    border-collapse: collapse;
}

.main-bottom td {
    padding: 5px;
    vertical-align: middle; /* 세로 중앙 정렬 */
}

/* 각 항목의 배경색 번갈아가며 설정 */
.item {
    background-color: #ffffff !important;
}

.item:nth-child(even) {
    background-color: #ffffff !important;
}

.item td {
    background-color: inherit !important;
}

.item a {
    display: table;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.item td {
    height: 100px;
}

/* 더보기 버튼 스타일 */
#load-more {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    color: #007bff;
    background-color: #e0e0e0;
    border: 1px solid #007bff;
    border-radius: 4px;
    cursor: pointer;
}

#load-more:hover {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
}










.main-top,
.main-middle,
.main-bottom {
	width: 100%; /* 가로 100% */
    padding: 0px;
    border: 0px solid #e0e0e0;
    text-align: center;
    margin-bottom: 20px;
    background-color: #f8f9fa;
  /*  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);*/
}

.main-top h2, .main-middle h2, .main-bottom h2 {
    font-size: 24px;
    color: #333;
}

.footer {
    background-color: #288492;
    color: #ffffff;
    text-align: left;
    padding: 10px;
    height: 23vh;
    font-size: 10px; /* Adjust font size */
    font-weight: 100; /* Adjust font weight */
}
.footer a {
    color: #ffffff; /* Set link color to white */
    text-decoration: none; /* Remove underline if needed */
}
.footer-large {
    background-color: #288492;
    color: #ffffff;
    text-align: left;
    padding: 10px;
    height: 7vh;
    font-size: 13px; /* Larger font size */
    font-weight: 500; /* Font weight */
}


.footer-large a {
    color: #ffffff; /* Set link color to white */
    text-decoration: none; /* Remove underline if needed */
}

.footer a:hover {
    color: #f0f0f0; /* Optionally, lighter color on hover */
}




.mobile-menu a {
    display: block;
    margin: 10px 0;
    text-decoration: none;
    color: #007bff;
    font-size: 20px;
}

.mobile-menu a:hover {
    text-decoration: underline;
}

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

/* 반응형 설정 */
@media (max-width: 1080px) {
    .container {
        max-width: 100%;
    }

    .main-content {
        width: 100%;
    }
}

@media (min-width: 1080px) {
    .container {
        max-width: 1080px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
	
	
	
    .hamburger-menu {
        display: block; /* 모바일에서만 표시 */
    }

    .bottom-header {
        display: none; /* 모바일에서 메뉴 숨김 */
    }
	  .menu {
        flex-direction: column; /* 모바일에서는 세로로 정렬 */
    }
	
	
	 .hamburger-menu {
        display: block;
    }

    .search-hamburger .search-icon {
        margin-right: 10px; /* 모바일에서 돋보기와 햄버거 간격 축소 */
    }

    .menu {
        flex-direction: column; /* 모바일에서는 세로 정렬 */
    }
}















/* 모바일 화면에서 높이를 줄이기 위한 미디어 쿼리 */
@media screen and (max-width: 768px) {
	
	
	/* 아래 소스를 지정하면 좌우스크롤없어짐 그러나 아래위 브래이크현상발생*/
	/*
	body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .container {
        max-width: 100%;
        overflow-x: hidden;
    }
	*/
	
	 body {
        overflow-x: hidden; /* 가로 스크롤 방지 */
    }

    .container {
        max-width: 100%; /* 100% 제한 */
        width: 100%;
		  overflow-x: unset; /* 불필요한 가로 스크롤을 막기 위해 제거 */
		
    }




    .header {
        height: 8vh; /* 모바일 화면에서 높이 줄이기 */
        padding: 5px; /* 패딩도 줄이기 */
    }
    .logo img {
        width: 170px; /* 로고 크기도 줄이기 */
    }
    .home-icon img, .search-icon {
        width: 50px; /* 홈 아이콘과 돋보기 아이콘 크기도 줄이기 */
    }
}




/* Overlay styling */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    font-size: 12px;
}

.overlay-content {
    background-color: white;
    padding: 15px;
    width: 80%;
    max-width: 400px; /* Max width for better responsiveness */
    text-align: center;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    font-size: 12px;
    color: #0d5969; /* Text color */
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 18px;
    cursor: pointer;
    color: #0d5969; /* Close button color */
}

/* Mobile menu styling */
.mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between menu items */
}

.mobile-menu a {
    display: block;
    padding: 6px;
    background-color: #f0f0f0;
    border-radius: 5px;
    color: #0d5969;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px; /* Slightly larger font for readability */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.mobile-menu a:hover {
    background-color: #e0e0e0;
    color: #333;
}

.mobile-menu a:active {
    background-color: #d0d0d0;
    color: #111;
}







.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
    color: #ffffff; /* Bright white color */
    background-color: #094c5c; /* Bright red background for contrast */
    border-radius: 10%; /* Make it circular */
    width: 40px; /* Explicitly set width */
    height: 40px; /* Explicitly set height */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Soft shadow for 3D effect */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
    line-height: 0; /* Remove any extra line-height space */
    padding-top: 1px; /* Adjust padding to center the symbol */
}

.close-btn:hover {
    background-color: #ff6666; /* Lighter red on hover */
}


















/* Common select styles */
select {
  display: block;
  width: 100px; /* Default width (for mobile) */
  max-width: 100px; /* Max width restriction (for mobile) */
  padding: 10px;
  font-size: 13px;
  color: #151b89; /* Same text color as menu items */
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px; /* Match with table cell radius */
  appearance: none; /* Remove default browser styles */
  -webkit-appearance: none; /* Safari */
  -moz-appearance: none; /* Firefox */
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333" d="M2 0L0 2h4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow like table cells */
  font-weight: 600; /* Bold font weight */
}

/* Hover effect for select */
select:hover {
  background-color: #f9f9f9; /* Light hover background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slightly elevated shadow */
}

/* Container with Flexbox applied */
.select-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between select elements */
  width: 100%; /* Flexible container width */
}

/* Mobile styles */
@media (max-width: 767px) {
  .select-container {
    flex-direction: column; /* Vertical alignment on mobile */
  }

  select {
    width: 100px; /* Full width on mobile */
    max-width: 100px; /* Max width restriction on mobile */
  }
}

/* PC styles */
@media (min-width: 768px) {
  .select-container {
    flex-direction: row; /* Horizontal alignment on PC */
    justify-content: space-between;
  }

  select {
    width: 300px; /* Fixed width on PC */
    max-width: 300px; /* Max width restriction on PC */
  }
}

/* Style for the options */
option {
  padding: 10px;
  color: #333;
  font-weight: 600; /* Bold font weight for options */
}

/* Focus state for accessibility */
select:focus {
  border-color: #151b89; /* Highlight border when focused */
  box-shadow: 0 0 0 2px rgba(21, 27, 137, 0.2); /* Soft blue outline */
}














/* Common sub-menu styles for table layout */
.sub-menu {
    padding: 5px;
    background-color: #f2f4f7; /* Light background */
    width: 100%; /* Ensure table takes full width */
    border-spacing: 5px; /* Space between table cells */
}

/* Style for each table cell */


.sub-menu table {
    width: 100%; /* Full-width table */
    table-layout: fixed; /* Ensures each column respects its width */
}

.sub-menu td {
    width: 50%; /* Set each table cell to take 50% width */
    text-align: center;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #e0e0e0; /* Subtle border color */
    border-radius: 8px; /* Rounded corners for a modern look */
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Soft shadow for a card-like effect */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}



/* Style for links inside the table cells */
.sub-menu td a {
    display: block;
    padding: 5px;
    color: #206d84;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover effect */
.sub-menu td:hover {
    background-color: #206d84;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Elevated shadow on hover */
}

.sub-menu td:hover a {
    color: #fff; /* Invert text color on hover */
}

/* Style for the active menu item */
.sub-menu a.active {
    background-color: #206d84;
    color: white;
    font-weight: bold;
    border-radius: 8px;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .sub-menu table {
        width: 100%; /* Ensure full width on mobile */
    }
    .sub-menu td {
        font-size: 13px; /* Smaller font size for mobile */
    }
}






/* 왼쪽 정렬 적용 */
.left-align {
    text-align: left; /* 텍스트를 왼쪽으로 정렬 */
    vertical-align: top; /* 상단 정렬 */
}


/* 타이틀 스타일 */
.title {
    font-size: 18px; /* 가장 크게 */
    font-weight: bold; /* 가장 두껍게 */
    color: blue; /* 파란색 */
}

/* 내용1 스타일 */
.content1 {
    font-size: 16px; /* 두 번째로 크게 */
    font-weight: 600; /* 두껍게 */
    color: red; /* 빨간색 */
}


/* 내용2 스타일 */
.content2 {
    font-size: 14px; /* 세 번째 크기 */
    font-weight: 400; /* 일반 두께 */
}

/* 내용3 스타일 */
.content3 {
    font-size: 12px; /* 가장 작게 */
    font-weight: 300; /* 얇게 */
}





/* 그래프사이즈 */
.responsive-width {
    width: 150px;

}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .responsive-width {
        width: 90px;
	
    }
}







.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.pagination li {
    margin: 0 5px;
}

.pagination li a {
    display: block;
    padding: 4px 6px;
    background-color: #f8f9fa;
    color: #007bff;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination li a:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination li.active {
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    padding: 4px 6px;
    border: 1px solid #007bff;
}

.pagination li.active a {
    color: white;
    pointer-events: none; /* 클릭 불가능하게 설정 */
}

/* 모바일 화면에서 페이지네이션 크기 조정 */
@media (max-width: 600px) {
    .pagination li a {
        padding: 3px 6px; /* 모바일에서 버튼 크기 줄이기 */
        font-size: 14px;  /* 폰트 크기 줄이기 */
    }

    .pagination li.active {
        padding: 3px 6px;
		font-size: 14px;  /* 폰트 크기 줄이기 */
    }

    .pagination li {
        margin: 0 3px; /* 항목 간격 줄이기 */
    }
}




/* 광고 컨테이너 통합 최적화 (CLS 방지 + 로딩 애니메이션) */
.ad-top-wrapper {
  display: block;
  overflow: hidden;
  text-align: center;
  
  /* 1. 공간 확보: 기기별 최소 높이 설정 */
  min-height: 300px; 
  margin-bottom: 20px; /* 광고와 본문 사이 간격 확보 */

  /* 2. 스켈레톤 애니메이션 배경 설정 */
  background: linear-gradient(90deg, #f2f2f2 25%, #fafafa 50%, #f2f2f2 75%);
  background-size: 200% 100%;
  animation: ad-loading 1.5s infinite;
}

/* 모바일 전용 높이 조정 (767px 이하) */
@media (max-width: 767px) {
  .ad-top-wrapper {
    min-height: 250px;
  }
}

/* 애니메이션 효과 정의 */
@keyframes ad-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}