.banner {
    margin-top: 42px;
 }

 /* 배너 텍스트 박스 스타일 */
 .banner-text-box {
     margin-bottom: 30px; /* 텍스트 박스와 카드 섹션 간 간격 */
     background-color: #e6f3ff; /* 배경색 */
     border-radius: 16px; /* 둥근 모서리 */
     padding: 40px 20px; /* 내부 여백 */
     text-align: center;
     margin: 20px 0; /* 위아래 마진 */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 */
 }

 .banner-text-box h2 {
     font-size: 28px; /* 제목 크기 */
     font-weight: bold;
     color: #3a77d6; /* 제목 색상 */
     margin: 0;
 }

 /* 이미지 섹션 스타일 */
 .image-section {
     display: flex;
     justify-content: space-between;
 }

 /* 카드 스타일 */
 .card {

     width: 16%;
     height: 308px; /* 카드 높이 */
     background-color: #F3F5F9; /* 카드 배경색 */
     border-radius: 12px; /* 둥근 모서리 */
     border: 1px solid #e3e8f1; /* 카드 테두리 */
         text-align: center;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 카드 그림자 */
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }


 /* 카드 이미지 스타일 */
 .card img {
     padding: 10px;
     width: 198.67px; /* 이미지 너비 */
     height: 188px; /* 이미지 높이 */
     margin-bottom: 10px; /* 이미지와 텍스트 간 간격 */
     border-radius: 12px;
     object-fit: contain; /* 이미지 비율 유지 */
 }

 /* 카드 텍스트 스타일 */
 .card .text-box p {
     font-size: 20px; /* 텍스트 크기 */
     font-weight: 600; /* 텍스트 굵기 */
     color: #333; /* 텍스트 색상 */
     margin: 0;
     line-height: 1.5; /* 텍스트 줄 간격 */
 }
/* Sidemenu */

/* Auto layout */


.side-nav{display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;

    width: 256px;
    height: 351px;
    }

    /* Inside auto layout */
    .textBox{
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px 8px;
        gap: 8px;
        color: white;
        width: 256px;
        height: 95px;
        text-align: center;
        ;

        background: linear-gradient(97.84deg, #32B6F3 0.17%, #4E7AE5 100.17%), #3273E4;
        border-radius: 10px;

    }


    .image-container {
        margin-top: 42px;
        position: relative;
    }

    .image-container h3 {
        font-size: 36px;
        position: absolute;

        top: 100px;
        left: 120px;
    }

    .image-container p{
        position: absolute;
        font-size: 18px;
        top: 200px;
        left: 120px;
        line-height: 25px;
    }

    #image3 h3 {
        font-size: 36px;

        position: absolute;
        top: 150px;
        left: 120px;
    }

    #image3 p{
        position: absolute;
        font-size: 18px;
        top: 225px;
        left: 120px;
    }
    .content-header {
        display: flex;
        justify-content: space-between; /* 헤더의 h2와 breadcrumb를 양쪽 끝에 배치 */
        align-items: center;
        border-bottom: 2px solid #ddd; /* 하단 선 */
        padding: 10px 20px;
        font-family: Arial, sans-serif;
    }

    .content-header h2 {
        font-size: 32px;
        font-weight: bold;
        color: #333;
        margin: 0;
    }

    .breadcrumb {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #777;
        margin-left: auto; /* breadcrumb를 오른쪽으로 정렬 */
    }

    .breadcrumb a {
        text-decoration: none; /* 밑줄 제거 */
        color: inherit; /* 부모 요소의 색상 상속 */
        margin: 0 5px;
    }

    .breadcrumb a:hover {
        color: #000; /* 링크 호버 시 색상 변경 */
    }

    .breadcrumb span {
        color: #aaa; /* > 색상 */
        margin: 0 5px;
    }



/* ---------------------------------------------------------------------
   창 크기 대응(2026-10-15, 민간플랫폼 알림마당 > 사업소개).
   그림 위 글자가 고정 px 위치·크기라 창을 줄이면 그림 밖으로 넘쳐 아래 상자와 겹치고, 카드는 높이·그림 너비가 고정이라 찌그러졌다.
   - 그림 위 글자: 넓은 화면(본문 폭 1536px 기준)과 같은 모양을 유지하면서 본문 폭에 비례해 위치·크기 조정(cqw = 본문 폭의 1%)
   - 본문 폭 960px 미만: 글자를 그림 아래로 내림 / 카드: 6칸 → 900px 미만 3칸 → 480px 미만 2칸
   컨테이너 쿼리를 모르는 옛 브라우저는 위의 기존 px 값 그대로(이전과 같은 모양) */
.image-container { container-type: inline-size; }
.image-container h3 { top: 6.5cqw; left: 7.8cqw; font-size: clamp(22px, 2.34cqw, 36px); line-height: 1.5; }
.image-container p { top: 13cqw; left: 7.8cqw; font-size: max(14px, 1.17cqw); line-height: 1.4; word-break: keep-all; }
#image3 h3 { top: 9.77cqw; left: 7.8cqw; font-size: clamp(22px, 2.34cqw, 36px); }
#image3 p { top: 14.65cqw; left: 7.8cqw; font-size: max(14px, 1.17cqw); }
@container (max-width: 959px) {
    .image-container h3, .image-container p,
    #image3 h3, #image3 p { position: static; }
    .image-container h3, #image3 h3 { margin: 20px 0 8px; font-size: 26px; font-weight: 700; }
    .image-container p, #image3 p { font-size: 16px; line-height: 1.6; }
    .image-container p br { display: none; }
}

.banner { container-type: inline-size; }
.banner-text-box h2 { font-size: clamp(20px, 1.82cqw, 28px); word-break: keep-all; }
.image-section { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.image-section .card { width: auto; height: auto; min-width: 0; padding-bottom: 20px; }
@container (min-width: 1400px) { .image-section .card { min-height: 308px; } } /* 넓은 화면은 원래 카드 높이 */
.image-section .card img { width: 100%; max-width: 198.67px; height: auto; aspect-ratio: 199 / 188; }
.image-section .card .text-box p { font-size: clamp(16px, 1.6cqw, 20px); word-break: keep-all; padding: 0 6px; }
@container (max-width: 899px) {
    .image-section { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .image-section .card .text-box p { font-size: 17px; }
}
@container (max-width: 479px) {
    .image-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .image-section .card .text-box p { font-size: 15px; }
}