body{
        background: url('../image/bg.png') repeat-x;
}

#top-line-art{display: none;}
/* ------------------------------------------------------ */
/* 2. 하단 행: 주 메뉴 */
.navbar-container {
    background-color: #eee; /* 메뉴 바 배경색#1F63AE */
    border-bottom:5px #00B0BD solid;
}
.nav-menu li a {
    color: #333;
}
.nav-menu li a:hover {
    background-color: rgba(0,0,0,0.0);
    color:#00B0BD !important;
    font-weight: bold;
}
.has-submenu{
    position: relative;
}
.has-submenu::after{
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    height:30px;
    background-color:#aaa;
    margin-top:-35px;
}
.has-submenu:nth-child(1)::before{
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height:30px;
    background-color:#aaa;
    margin-top:10px;
}
.submenu li a {
    color: #fff;
}

main.main-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 500px; /* 필요 시 조정 */
  padding: 40px;
  background: url('../image/main_bg4.png') center no-repeat;
  /*background-attachment: fixed; /* 부드러운 시차 효과 */
  
}

.main-left {
    /* Flex 비율 설정: 45% */
    flex: 0 0 45%; 
    padding: 20px;
    /*background-color: rgba(255, 255, 255, 0.7);*/
    /*border: 1px solid #ddd;*/
    /*background: url('/image/main_left_bg1.png') center no-repeat;*/

}

/* 메인 영역 분할 스타일 */
.main-content, .main2-content {
    /* 기존 인라인 스타일을 클래스로 옮김 */
    padding: 20px; 
    max-width: 1200px; 
    margin: 0 auto; 

    margin-top: 30px; /* 원하는 간격만큼 값 조정 (예: 30px) */
    
    /* Flexbox 설정 */
    display: flex;
    gap: 20px; /* 두 영역 사이의 간격 (선택 사항) */
    align-items: center; /* 세로 정렬 상단 기준 */
}

.blurred-ellipse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; 

    /* 크기 및 형태는 동일: 가로 300px, 세로 200px 타원 */
    width: 300px; 
    height: 200px; 
    border-radius: 50%; 

    /* ?? 색상 수정: 산뜻한 파란색 계열 Radial Gradient 적용 */
    background: radial-gradient(
        ellipse at center, 
        rgba(135, 206, 250, 0.8) 0%,   /* Light Sky Blue (밝은 하늘색, 80% 투명도) - 중앙 */
        rgba(30, 144, 255, 0.5) 70%,   /* Dodger Blue (푸른색, 50% 투명도) - 중간 */
        transparent 100%               /* 투명 - 외곽 */
    );

    /* 블러 설정은 동일: blur 30 적용 */
    filter: blur(30px);
}

/* 6. 텍스트 요소 스타일 (타원 위에 오도록 설정) */
.main-left h1,
.main-left h2,
.main-left h3,
.main-left h4 {
    /* 텍스트가 타원보다 위에 오게 하려면 z-index를 타원보다 높게 설정해야 합니다. */
    position: relative; /* z-index를 적용하기 위해 필요 */
    z-index: 2; 
    text-align: center; /* 텍스트 가운데 정렬 (선택 사항) */
}

.main-left{
    
    text-align: center;
}

.main-right {
    /* Flex 비율 설정: 55% */
    flex: 0 0 55%; 
    /*background-color: white; */
    /*border: 1px solid #ddd;*/
    display: flex;
    
    /* 2. 자식 요소(.carousel-wrapper)를 가로 중앙에 배치 */
    justify-content: center;
    
    /* 3. 자식 요소(.carousel-wrapper)를 세로 중앙에 배치 (필요하다면) */
    align-items: center;
}

.main-left h1 {font-size: 3em;letter-spacing: -1px;}
.main-left h2 {font-size: 2.5em;margin-top: -1em;letter-spacing: -1px;}
.main-left h3 {font-size: 1.8em;margin-top: -1em;letter-spacing: -1px;}
.main-left h4 {font-size: 1.5em;margin-top: -0.5em;letter-spacing: -1px;}

/* 4. 게시판/배너 영역 (.main2-content) - 3열 x 2행 구조 */
.main2-content {
    max-width: 1200px;
    margin: 30px auto 40px auto; 
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr; 
    gap: 20px; 
}

/* 게시판 공통 스타일 - 높이 최소화 조정 */
.content-box { 
    background-color: white; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    display: flex; flex-direction: column; 
    min-height: 0; /* 최소 높이 제거 */
    grid-column: span 1; 
}

/* 게시판 제목 */
.content-box h3 { 
    font-size: 1.2em; padding-bottom: 5px; margin-top: 0; 
    margin-bottom: 5px; /* 간격 축소 */
    border-bottom-width: 2px; border-bottom-style: solid; 
}

/* 게시판 목록 */
.content-box ul {
    list-style: none;
    padding: 0;
    margin: 0; /* 상하 마진 제거 */
    flex-grow: 1; 
}

/* 게시판 항목 */
.content-box ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0; /* 상하 패딩 축소 */
    border-bottom: 1px dashed #eee;
    font-size: 0.9em;
}



.content-box ul li a{
    color: #444;
    text-decoration: none; /* 밑줄 없음 유지 */
    max-width: 75%; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.content-box ul li a:hover{
    color:red;
}

/* 더보기 링크 */
.more-link {
    display: block;
    text-align: right;
    margin-top: auto; 
    font-size: 0.85em;
    color: #007bff;
    text-decoration: none;
    padding-top: 5; /* 상단 패딩 제거 */
    margin-bottom: 0px; /* 하단 간격 확보 */
}

/* 6. 배너 컨테이너 (맨 오른쪽, 2행 차지) */
.banner-container {
    grid-row: 1 / span 2; 
    grid-column: 3 / 4; 
    
    background-color: white; 
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    
    display: flex; 
    flex-direction: column; 
    gap: 10px;
}

/* 5. 배너 아이템 스타일 */
.banner-item {
    cursor: pointer !important;
    flex: 1; /* 기존 flex 속성 유지 (남은 공간 채우기) */
    text-align: center;
    padding: 10px 10px;
    border-radius: 6px; 
    text-decoration: none;
    transition: background-color 0.3s;
    min-height: 115px; /* ?? 폰트 크기와 상관없이 배너의 최소 높이 지정 */
}

.banner-paper{
    
    background-image: url('../image/banner1_bg.png');
    background-size: cover; /* 이미지가 div를 꽉 채우도록 설정 */
    font-size: 1.6em;            
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    color:#777;
    text-align: right;
    padding-top: 55px;
    border:1px #999 solid;
    
}

.banner-jams{
    background-image: url('../image/banner2_bg.png');
    background-size: cover; /* 이미지가 div를 꽉 채우도록 설정 */
    font-size: 1.2em; 
    font-weight: 600;           
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    color:#fff;
    text-align: left !important;
    padding-top: 75px;
}

.banner-letter{
    background-image: url('../image/banner3_bg.png');
    background-size: cover; /* 이미지가 div를 꽉 채우도록 설정 */
    font-size: 1.5em; 
    text-align: right;  
    padding-top: 55px;  
    color:#777;     
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    border:1px #999 solid;
}

/*
.banner-item i {
    margin-bottom: 10px;
    display: block;
}
    */

.banner-item span {
    font-size: 1.1em;
    font-weight: bold;
}

/* ------------------------------------------- */
/* ?? 게시판별 h3 색상 정의 */
/* ------------------------------------------- */

.box-notice h3 {
    color: #185CAC; 
    border-bottom-color: #185CAC;
}

.box-event h3 {
    color: #0096A1;
    border-bottom-color: #0096A1;
}

.box-member h3 {
    color: #77AD0C;
    border-bottom-color: #77AD0C;
}

.box-info h3 {
    color: #E76D01;
    border-bottom-color: #E76D01;
}

.more-link {
    display: block;
    text-align: right;
    margin-top: auto; /* 리스트가 짧아도 버튼이 하단에 붙도록 */
    font-size: 0.85em;
    color: #007bff;
    text-decoration: none;
    padding-top: 5px;
}

.more-link:hover {
    color: #0056b3;
}

@media (max-width: 768px) {

    .navbar-container {
        border-bottom:none;
    }

    .main-content {
        flex-direction: column;
    }
    
    main.main-content {
        
        /* 모바일에서는 세로로 쌓이도록 변경 */
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
        /* max-width 1200px와 margin: 0 auto; 덕분에 이미 페이지 중앙에 위치합니다. */
        /* 너비 100%를 사용하므로, 양쪽 섹션은 동일하게 화면 전체 폭을 차지합니다. */
        background: url('');
        
    }
    
    .main-left {display: none;}
    .main-right {
        
        /* 모바일에서는 너비 100%로 설정 (같은 크기를 의미) */
        flex: 0 0 100%; 
        
        /* ?? [옵션] 섹션 내부 텍스트를 중앙 정렬하려면 아래를 추가 */
        /* text-align: center; */
        /* [옵션 끝] */
    }

    /* 게시판/배너 영역 모바일 순서 조정 (Flexbox 사용) */
    .main2-content {
        grid-template-columns: 1fr; 
        gap: 15px;
        padding: 0 10px;
        margin-top: 15px;
        margin-bottom: 20px;
        display: flex; 
        flex-direction: column; 
    }
    
    /* 게시판 순서 */
    .content-box {
        width:95%;
        grid-row: auto; 
        grid-column: auto;
        min-height: auto;
        order: 0; 
    }

    /* 배너 컨테이너 순서 조정 */
    .banner-container {
        width:95%;
        grid-row: auto; 
        grid-column: auto;
        min-height: auto;
        order: 5; 
        padding: 10px;
        gap: 10px;
    }

    .banner-item {
        padding: 10px 10px;
        flex: none;
        min-height: 115px; /* ?? 폰트 크기와 상관없이 배너의 최소 높이 지정 */ 
    }

    .banner-paper, .banner-letter{
        padding-top: 60px;
    }

    .banner-jams i, .banner-jams span{
        display: none;
    }
    /*
    .banner-item i {
        font-size: 2em;
        margin-bottom: 5px;
    }
    */

}