body {
font-family: 'Noto Sans KR', sans-serif; /* 전체 폰트 설정 */
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh; /* 최소 높이를 100%로 설정 */
}
header {
background-color: #FFF;
color: black;
padding: 30px 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
position: relative; /* 바를 위치시키기 위한 상대 위치 설정 */
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px; /* 최대 너비 설정 */
margin: 0 auto; /* 가운데 정렬 */
padding: 0 20px; /* 좌우 패딩 */
}
.logo img {
/*height: 50px;  로고 이미지 높이 설정 */
}

nav {
display: flex;
gap: 20px;
}
nav a {
color: #959595;
text-decoration: none;
position: relative; /* 하단 바를 위치시키기 위한 상대 위치 설정 */
font-size: 20px; /* 글자 크기 조정 */
padding: 10px 30px; /* 좌우 여백 추가 */
font-weight: bold;
}
nav a.menu_sel {
color: black; /* 메뉴 1의 색상 설정 */
}
/* 메뉴 1에 대한 하단 노란색 바 스타일 */
nav a:first-child::after {
content: '';
display: block;
height: 10px; /* 바의 높이 설정 */
background-color: #FFD33D; /* 바의 색상 */
position: absolute;
left: 0;
right: 0;
bottom: -30px; /* 헤더 높이 아래에 위치하도록 간격 설정 */
}

main {
flex: 1; /* 메인 콘텐츠가 가능한 공간을 차지하도록 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
padding: 20px;
padding-bottom: calc(60px); /* 풋터 높이(60px)설정 */
}
.content-div {
display: flex; /* flexbox 사용 */
flex-direction: column; /* 세로 방향으로 정렬 */
justify-content: center; /* 수평 가운데 정렬 */
align-items: center; /* 수직 가운데 정렬 */
width: 100%; /* 전체 너비 사용 */
max-width: 800px; /* 최대 너비 설정 */
margin: 20px auto; /* 상하 간격 및 가운데 정렬 */
}
.content-div h2 {
margin: 12px 0; /* 텍스트 간격 설정 */
}
.page_logo {
margin: 0px 10px 15px 10px;
height: 60px;
}
.search-container {
margin: 10px 10px 10px 10px; /* 검색창 상하 간격 */
border: 4px solid #FFD33D; /* 노란색 테두리 추가 */
border-radius: 40px; /* 모서리 둥글게 */
padding: 9px; /* 내부 여백 추가 */
min-width: 310px;
display: flex; /* flexbox 사용 */
align-items: center; /* 세로 가운데 정렬 */
justify-content: space-between; /* 좌우 공간을 균등하게 */
}
.search-container input {
padding: 10px;
border: none; /* 기본 테두리 제거 */
outline: none; /* 포커스 시 아웃라인 제거 */
width: 90%;
}
.search-container img {
width: 20px; /* 돋보기 이미지 크기 설정 */
height: 20px; /* 돋보기 이미지 크기 설정 */
cursor: pointer; /* 커서 변경 */
margin-left: 10px; /* 검색창과 간격 설정 */
margin-right: 4px;
}
.images {
display: flex; /* flexbox 사용 */
justify-content: center; /* 수평 가운데 정렬 */
gap: 20px; /* 이미지 간격 설정 */
margin-top: 20px; /* 이미지 상단 간격 */
}
.images img {
}

footer {
display: flex;
justify-content: center; /* 가운데 정렬 */
align-items: center; /* 세로 가운데 정렬 */
background-color: #f1f1f1;
padding: 20px 0;
height: 60px; /* 풋터 높이 설정 */
}

footer a {
text-decoration: none;
color: #333;
margin: 0 8px; /* 좌우 여백 추가 */
font-size: 16px; /* 글자 크기 조정 */
}
footer a.corp {
font-weight: bold;
}
/* 점 특수문자 추가 */
footer a:not(:last-child)::after {
content: ' • '; /* 점 추가 */
color: #959595;
margin-left: 10px; /* 점과 링크 간격 조정 */
margin-right: 0px; /* 점과 링크 간격 조정 */
}

.shadow-box {
display: flex;
width: 90%;
margin: 0px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
border: 1px solid #ddd; /* 테두리 */
}
.round-box-left {
display: table-cell;
width: 50%;
margin: 0px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
border: 1px solid #ddd; /* 테두리 */
}
.round-box-goobun {
display: table-cell;
padding: 1px 10px 1px 10px;
align-content: center;
}
.round-box-right {
display: table-cell;
width: 50%;
text-align: left;
margin: 0px auto;
padding: 20px 20px 20px 30px;
background-color: #ffffff;
border-radius: 10px;
border: 1px solid #ddd; /* 테두리 */
}
/* 좌측 영역 */
.left-area {
display: flex;
flex-direction: column; /* 수직 정렬 */
justify-content: space-between;
flex: 1;
/* border-right: 1px solid #ddd; */
padding-right: 20px;
padding-left: 20px;
}

/* 우측 영역 */
.right-area {
display: table;
justify-content: flex-end; /* 우측 정렬 */
align-items: flex-end; /* 하단 정렬 */
flex: 1;
padding-left: 20px;
}

.right-area .content-box-bar {
display: table-cell;
vertical-align: bottom;
}
.right-area .content-box-bar .graph-bar {
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 14px;
}
.right-area .content-box-bar .graph-bar span {
padding-bottom: 6px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
.right-area .content-box-name {
display: table-cell;
vertical-align: bottom;
text-align: left;
}

/* 좌측 수직 나열 콘텐츠 스타일 */
.left-area div {
width: 100%;
margin: 10px 0;
}

/* 우측 수평 나열 콘텐츠 스타일 */
.right-area div {
margin-left: 15px;
}

/* 공통 스타일 */
.content-box {
width: 80px;
/* height: 80px; */
background-color: #fff;
display: flex;
color: #000;
font-size: 14px;
}

/* A 박스의 내부 스타일 */
.content-box-A {
text-align: left;
display: flex;
flex-direction: column;
}
.content-box-A span {
font-size: 30px;
font-weight: bold;
}

.horizontal-content {
display: flex;
align-items: center; /* 이미지와 텍스트를 수평 중앙 정렬 */
}

.horizontal-content img {
height: 20px;
margin-right: 10px; /* 이미지와 텍스트 간격 */
}

.horizontal-content p {
margin: 0;
color: #000;
}

.content-box-B {
background-color: #fff;
height: 20px;
}

.content-box-C {
text-align: left;
display: flex;
flex-direction: column;
}
.content-box-C .spanA {
font-size: 16px;
}
.content-box-C .spanB {
font-size: 22px;
font-weight: bold;
}

.round-box-main{
display: table;
width: 95%;
margin-top: 20px;
}
.round-box-aiinfo {
display: flex;
width: 90%;
align-items: center;
margin: 0px auto;
padding: 20px;
border-radius: 10px;
border: 1px solid #ddd; /* 테두리 */
}

.main-button-box{
width: 95%;
display: table-row;
}

.button-moai{
display: table-cell;
padding-right: 20px;
}
.button-moai-img{
width: 100%;
height:auto;
}

.button-moyaapp{
display: table-cell;
}
.button-moyaapp-img{
width: 100%;
height:auto;
}



/* 메인 레이아웃 컨테이너 */
.main-layout-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 광고가 길기 때문에 위쪽 정렬 */
    width: 100%;
    max-width: 1400px; /* 메인(800) + 양옆광고(160*2) + 여백 고려 */
    margin: 0 auto;
}

/* 양옆 사이드 광고 영역 */
.ad-side {
    flex: 0 0 160px; /* 너비 고정 */
    margin-top: 50px; /* 로고 높이 등에 맞춰 조정 */
}

/* 중앙 하단 광고 영역 */
.ad-center-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

/* --- 모바일 대응 (media query 내부에 추가) --- */
@media (max-width: 1100px) {
    /* 화면이 좁아지면 양옆 광고 숨기기 (선택사항) */
    .ad-side {
        display: none;
    }
    
    /* 하단 광고도 모바일 사이즈에 맞게 조절 */
    .ad-center-bottom div {
        width: 100% !important; /* 728px 대신 화면 꽉 차게 */
        height: auto !important;
        min-height: 50px;
    }
}

@media (max-width: 768px) {
    .ad-side {
        display: none !important; /* 모바일에서 양옆 광고 제거 */
    }
    .ad-center-bottom div {
        width: 100% !important; /* 하단 광고는 가로 폭에 맞춤 */
        height: auto !important;
    }
}



@media (max-width: 768px) {
	
	.search-container {
	margin: 10px 10px 30px 10px; /* 검색창 상하 간격 */
	border: 4px solid #FFD33D; /* 노란색 테두리 추가 */
	border-radius: 40px; /* 모서리 둥글게 */
	padding: 9px; /* 내부 여백 추가 */
	min-width: 310px;
	display: flex; /* flexbox 사용 */
	align-items: center; /* 세로 가운데 정렬 */
	justify-content: space-between; /* 좌우 공간을 균등하게 */
	}
	
	header {
	background-color: #FFF;
	color: black;
	padding: 15px 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
	position: relative; /* 바를 위치시키기 위한 상대 위치 설정 */
	}
	.logo img {
	height: 16px;
	}
	
	nav {
	display: flex;
	gap: 0px;
	}
	nav a {
	color: #959595;
	text-decoration: none;
	position: relative; /* 하단 바를 위치시키기 위한 상대 위치 설정 */
	font-size: 14px; /* 글자 크기 조정 */
	padding: 10px 14px; /* 좌우 여백 추가 */
	font-weight: bold;
	}
	nav a:first-child::after {
	content: '';
	display: block;
	height: 10px; /* 바의 높이 설정 */
	background-color: #FFD33D; /* 바의 색상 */
	position: absolute;
	left: 0;
	right: 0;
	bottom: -15px; /* 헤더 높이 아래에 위치하도록 간격 설정 */
	}
	main {
	flex: 1; /* 메인 콘텐츠가 가능한 공간을 차지하도록 설정 */
	display: flex; /* flexbox 사용 */
	flex-direction: column; /* 세로 방향으로 정렬 */
	justify-content: center; /* 수직 가운데 정렬 */
	align-items: center; /* 좌우 가운데 정렬 */
	text-align: center; /* 텍스트 가운데 정렬 */
	padding: 20px;
	padding-bottom: calc(0px); /* 풋터 높이(60px)설정 */
	}
	
	footer {
	display: flex;
	justify-content: center; /* 가운데 정렬 */
	align-items: center; /* 세로 가운데 정렬 */
	background-color: #f1f1f1;
	padding: 10px 0;
	height: 15px; /* 풋터 높이 설정 */
	}
	
	footer a {
	text-decoration: none;
	color: #333;
	margin: 0 8px; /* 좌우 여백 추가 */
	font-size: 10px; /* 글자 크기 조정 */
	}
	/* 점 특수문자 추가 */
	footer a:not(:last-child)::after {
	content: ''; /* 점 추가 */
	color: #959595;
	margin-left: 0px; /* 점과 링크 간격 조정 */
	margin-right: 0px; /* 점과 링크 간격 조정 */
	}
	
	.images {
	flex-direction: column; /* 세로 방향으로 정렬 */
	align-items: center; /* 이미지 가운데 정렬 */
	}
	.images img {
	height: 140px; /* 이미지 높이 설정 */
	border-radius: 5px; /* 모서리 둥글게 */
	max-width: 100%; /* 이미지가 컨테이너를 넘어가지 않도록 설정 */
	}
	
	.left-area {
	display: flex;
	flex-direction: column; /* 수직 정렬 */
	justify-content: space-between;
	flex: 1;
	border-right: none;
	padding-right: 20px;
	}
	
	.right-area {
	display: none;
	justify-content: flex-end; /* 우측 정렬 */
	align-items: flex-end; /* 하단 정렬 */
	flex: 1;
	padding-left: 20px;
	}
	
	.round-box-main{
	display: table;
	width: 100%;
	margin-top: 20px;
	}
	
	.round-box-goobun {
	display: none;
	padding: 1px 10px 1px 10px;
	align-content: center;
	}
	.round-box-right {
	display: none;
	width: 50%;
	text-align: left;
	margin: 0px auto;
	padding: 20px;
	background-color: #ffffff;
	border-radius: 10px;
	border: 1px solid #ddd; /* 테두리 */
	}
	
	.main-button-box{
	width: 100%;
	display: table;
	}
	
	.button-moai{
	display: table-row;
	padding-right: 0px;
	}
	.button-moai-img{
	width: 100%;
	height:auto;
	margin-bottom: 14px;
	}
	
	.button-moyaapp{
	display: table-row;
	}
	.button-moyaapp-img{
	width: 100%;
	height:auto;
	}
	
	.content-box-A {
	text-align: center;
	display: flex;
	flex-direction: column;
	}
	.content-box-B {
	background-color: #fff;
	height: 0px;
	margin: 0px !important;
	}
	
	.horizontal-content {
	display: flex;
	align-items: center; /* 이미지와 텍스트를 수평 중앙 정렬 */
	place-content: center;
	}
	
	.content-box-C {
	text-align: center;
	display: flex;
	flex-direction: column;
	}

}