@charset "utf-8";
/* 초기화 및 변수 설정 */
:root {
    --point-color: #75b927; /* 로고 INTELLIGENCE 색상 */
    --text-dark: #333;
    --text-light: #888;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 100%; background: transparent; font-family: 'Pretendard', sans-serif; overflow-x: hidden; }
/* 1. 헤더 & SNS 아이콘 */
#hd { position: relative !important; width: 100%; z-index: 1000; background: #fff; }
#hd_top { padding: 45px 0 20px; border-bottom: 1px solid #eee; position: relative; }
.hd_inner { 
    display: flex !important; justify-content: space-between !important; 
    align-items: flex-end !important; max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.hd_left { flex: 1; display: flex; justify-content: flex-start; }
.sns_icon { display: flex; list-style: none; gap: 15px; padding-bottom: 5px; }
.sns_icon a { color: var(--text-dark); font-size: 30px !important; transition: 0.3s; }
/* SNS 아이콘 마우스 오버 시 색상 변경 */
.sns_icon a:hover { color: var(--point-color); transform: translateY(-3px); }
.hd_center { flex: 1; display: flex; justify-content: center; }
.hd_logo img { max-height: 70px; width: auto; display: block; }
.hd_right { flex: 1; }
.login_menu { position: absolute; top: 15px; right: 30px; display: flex; list-style: none; gap: 15px; }
.login_menu li a { color: var(--text-light); font-size: 13px; text-decoration: none; transition: 0.2s; }
.login_menu li a:hover { color: var(--point-color); }
/* 2. GNB 메인 메뉴 & 드롭다운 디자인 */
#gnb { background: var(--point-color); width: 100%; height: 60px; }
.gnb_inner { max-width: 1200px; margin: 0 auto; height: 100%; }
#gnb_ul { display: flex; justify-content: center; list-style: none; height: 100%; }
.gnb_li { position: relative; }
.gnb_1d { 
    display: block; padding: 0 40px; line-height: 60px; color: #fff; 
    font-weight: bold; font-size: 18px; text-decoration: none; transition: 0.3s; 
}
/* 메인메뉴 오버 시 배경색 변화 */
.gnb_li:hover .gnb_1d { background: rgba(0,0,0,0.1); color: #fff; }
/* 자식 메뉴 드롭다운 디자인 추천 (Modern Box Style) */
.gnb_2d { 
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%) translateY(10px); 
    min-width: 190px; background: #fff; border-radius: 0 0 10px 10px;
    padding: 15px 0; display: block; list-style: none; z-index: 1001;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-top: 3px solid var(--point-color); /* 상단 포인트 라인 */
    opacity: 0; visibility: hidden; transition: 0.3s ease; /* 애니메이션 효과 */
}
/* 마우스 오버 시 부드럽게 나타남 */
.gnb_li:hover .gnb_2d { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.gnb_2d li a { 
    display: block; padding: 12px 20px; color: #555 !important; 
    text-decoration: none; font-size: 15px; text-align: center; 
    font-weight: 500; transition: 0.2s; 
}
/* 자식 메뉴 오버 시 글자색/배경 변화 */
.gnb_2d li a:hover { 
    background: #f9f9f9; 
    color: var(--point-color) !important; 
    padding-left: 25px; /* 살짝 밀리는 효과 */
}
/* 3. 슬라이드 (유지) */
#wrapper { position: relative !important; z-index: 1; width: 100%; display: block !important; }
#main_visual { position: relative; width: 100%; overflow: hidden; margin-bottom: 0px;}
.mySwiper { width: 100%; height: 75vh; min-height: 500px; max-height: 900px; }
.swiper-slide { 
    position: relative; background-size: cover !important; background-position: center !important; 
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.slide_txt { position: relative; z-index: 20; text-align: center; color: #fff; padding: 0 20px; }
.slide_txt h2 { font-size: 55px; font-weight: 800; margin-bottom: 20px; text-shadow: 2px 2px 10px rgba(0,0,0,0.4); }
.slide_txt p { font-size: 22px; margin-bottom: 35px; text-shadow: 1px 1px 5px rgba(0,0,0,0.4); }
.slide_txt .btn_more { 
    display: inline-block; padding: 12px 40px; border: 2px solid #fff; color: #fff; 
    text-decoration: none; font-weight: bold; border-radius: 4px; transition: 0.3s;
}
.slide_txt .btn_more:hover { background: #fff; color: var(--point-color); border-color: #fff; }
/* 모바일 대응 */
@media screen and (max-width: 768px) {
    .gnb_1d { padding: 0 15px; font-size: 16px; }
    .mySwiper { height: 60vh; }
}
/* 공통 레이아웃 - 요청에 따라 여백 축소 */
.py_100 { padding: 30px 0; } 
.bg_gray { background: #f9f9f9; }
.inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.title_area { text-align: center; margin-bottom: 60px; }
.title_area h2 { font-size: 36px; color: var(--text-dark); margin-bottom: 10px; }
.title_area p { color: var(--text-light); font-size: 18px; }
/* 프로그램 리스트 */
.program_list { display: flex; gap: 30px; list-style: none; }
.program_list li { 
    flex: 1; text-align: center; padding: 50px 30px; 
    background: #fff; border: 1px solid #eee; border-radius: 15px;
    transition: 0.3s;
}
.program_list li:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-color: var(--point-color); }
.program_list li .icon_box { 
    width: 80px; height: 80px; background: var(--point-color); 
    border-radius: 50%; color: #fff; font-size: 35px; line-height: 80px; 
    margin: 0 auto 25px; 
}
.program_list li h3 { font-size: 22px; margin-bottom: 15px; }
/* 최신글 레이아웃 */
.board_group { display: flex; gap: 40px; }
.board_item { flex: 1; background: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.title_sub { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid var(--point-color); padding-bottom: 10px; }
.title_sub h3 { font-size: 20px; color: var(--text-dark); }
.btn_add { text-decoration: none; color: #999; font-size: 24px; transition: 0.2s; }
.btn_add:hover { color: var(--point-color); }
/* 그누보드 기본 latest 스킨 보정 */
.board_item ul { list-style: none; }
.board_item li { padding: 10px 0; border-bottom: 1px solid #f2f2f2; display: flex; justify-content: space-between; }
.board_item li a { text-decoration: none; color: #555; }
.board_item li .lt_date { color: #999; font-size: 13px; }
/* 푸터 스타일 */
#footer { background: #2c2e33; color: #adb5bd; line-height: 1.8; font-family: 'Pretendard', sans-serif; }
/* 푸터 상단 링크 바 */
.ft_top { background: #1a1c1f; border-bottom: 1px solid #3d4146; padding: 12px 0; }
.ft_menu { list-style: none; display: flex; gap: 30px; justify-content: flex-start; }
.ft_menu li a { color: #868e96; text-decoration: none; font-size: 14px; transition: 0.3s; }
.ft_menu li a:hover { color: #75b927; }
/* 푸터 정보 본문 */
.ft_main { padding: 50px 0; }
.ft_main .inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.ft_logo { margin-bottom: 30px; width: 100%; }
.ft_logo img { max-height: 45px; }
.ft_info address { font-style: normal; font-size: 14px; margin-bottom: 20px; color: #ced4da; }
.ft_info address span { margin-right: 25px; display: inline-block; }
.ft_info address b { color: #f8f9fa; font-weight: 600; }
.ft_info .copy { font-size: 13px; color: #868e96; margin-top: 15px; letter-spacing: 0.5px; }
/* 우측 유틸리티 영역 */
.ft_right { display: flex; flex-direction: column; align-items: flex-end; gap: 25px; }
.family_site select { 
    background: #3d4146; color: #f8f9fa; border: 1px solid #495057; 
    padding: 10px 15px; border-radius: 4px; font-size: 13px; cursor: pointer;
}
.ft_sns { list-style: none; display: flex; gap: 12px; }
.ft_sns a { 
    display: inline-block; width: 42px; height: 42px; background: #3d4146; 
    color: #fff; text-align: center; line-height: 42px; border-radius: 50%; 
    font-size: 18px; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.ft_sns a:hover { background: #75b927; transform: translateY(-5px); color: #fff; }
/* TOP 버튼 디자인 */
#btn_top { 
    position: fixed; bottom: 40px; right: 40px; width: 50px; height: 50px; 
    background: #75b927; color: #fff; border: none; border-radius: 8px; 
    cursor: pointer; display: none; z-index: 1000; box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: 0.3s;
}
#btn_top:hover { background: #5e961f; transform: translateY(-3px); }
/* 반응형 처리 */
@media screen and (max-width: 991px) {
    .ft_main .inner { flex-direction: column; align-items: center; text-align: center; }
    .ft_right { align-items: center; margin-top: 40px; width: 100%; }
    .ft_menu { justify-content: center; gap: 15px; flex-wrap: wrap; }
    .ft_info address span { margin: 0 10px; }
}
/* 비전 및 핵심가치 섹션 공통 */
#main_values { background: transparent; 
              margin-top: -20px;}
.sub_title { display: block; color: var(--point-color); font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; font-size: 30px; }
.title_area h2 { font-size: 38px; color: #222; margin-bottom: 15px; }
.title_area .bar { width: 50px; height: 3px; background: var(--point-color); margin: 0 auto 25px; }

/* 비전 텍스트 강조 */
.vision_txt { font-size: 22px; line-height: 1.6; color: #444; word-break: keep-all; }
.vision_txt strong { color: var(--point-color); font-weight: 700; }
.vision_txt span { color: #222; font-weight: 700; border-bottom: 2px solid var(--point-color); }

/* 인성, 지성, 영성 (삼위일체 리스트) */
/* 인성, 지성, 영성 (삼위일체 리스트) 디자인 수정 */
.trinity_list { 
    display: flex; 
    gap: 20px; 
    list-style: none; 
    margin-top: 20px; 
    margin-bottom: 40px;
}

.trinity_list li { 
    flex: 1; 
    padding: 40px 20px; 
    background: #fff; 
    border: 1px solid #eee; 
    border-radius: 15px; /* 모서리를 핵심가치 카드와 통일 */
    transition: 0.4s; 
    text-align: center;
    position: relative;
    overflow: hidden; /* 상단 선이 삐져나가지 않게 처리 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* 은은한 그림자 */
    
    /* [핵심] 박스 상단에 초록색 선 추가 */
    border-top: 5px solid var(--point-color); 
}

.trinity_list li:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(117, 185, 39, 0.15); /* 호버 시 초록빛 그림자 */
    border-color: #eee; /* 테두리 색 유지 */
    border-top-color: var(--point-color); /* 상단 선 색 고정 */
}

.trinity_list li .icon_box { 
    font-size: 45px; 
    color: var(--point-color); 
    margin-bottom: 15px; 
}

.trinity_list li h3 { 
    font-size: 22px; 
    color: #222; 
    margin-bottom: 12px; 
    font-weight: 700;
}

.trinity_list li p { 
    color: #777; 
    font-size: 15px; 
    line-height: 1.5;
    word-break: keep-all; 
}

/* 모바일 대응: 리스트가 세로로 나열될 때 */
@media screen and (max-width: 768px) {
    .trinity_list { 
        flex-direction: column; 
        gap: 15px; 
    }
    .trinity_list li { 
        padding: 30px 20px; 
    }
}
/* ========================= 4대 핵심가치 세련된 리디자인 ========================= */

/* 핵심가치 그리드 컨테이너 */
.values_grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
    margin-top: -40px;
    padding: 5px;
}

/* 핵심가치 개별 아이템 카드 */
.value_item { 
    position: relative;
    display: flex; 
    align-items: center; 
    padding: 20px 30px; 
    background: rgba(255, 255, 255, 0.7); /* 반투명 흰색 */
    backdrop-filter: blur(10px); /* 유리 질감 효과 */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.5); /* 미세한 테두리 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* 부드러운 그림자 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    cursor: default;
}

/* 카드 하단 포인트 라인 (기존 왼쪽 선에서 하단 애니메이션 선으로 변경) */
.value_item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--point-color);
    transition: width 0.4s ease;
}

/* 호버 시 효과 */
.value_item:hover { 
    transform: translateY(-10px); 
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 40px rgba(117, 185, 39, 0.15); /* 포인트 컬러 강조 그림자 */
    border-color: var(--point-color);
}

.value_item:hover::after {
    width: 100%;
}

/* 숫자 디자인 (워터마크 스타일) */
.v_num { 
    font-size: 60px; 
    font-weight: 900; 
    color: var(--point-color);
    opacity: 0.1; /* 배경처럼 은은하게 */
    position: absolute;
    right: 20px;
    bottom: -10px;
    font-style: italic;
    transition: 0.4s;
}

.value_item:hover .v_num {
    opacity: 0.2;
    transform: scale(1.1);
}

/* 텍스트 영역 */
.v_content {
    position: relative;
    z-index: 2;
}

.v_content h3 { 
    font-size: 22px; 
    color: #1a1a1a; 
    margin-bottom: 12px; 
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 제목 앞에 작은 포인트 점 추가 */
.v_content h3::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--point-color);
    border-radius: 50%;
}

.v_content p { 
    color: #555; 
    font-size: 16px; 
    line-height: 1.7; 
    word-break: keep-all;
    font-weight: 400;
}

/* 반응형 설정 (모바일) */
@media screen and (max-width: 768px) {
    .values_grid { 
        grid-template-columns: 1fr; /* 모바일은 1열로 */
        gap: 15px; 
    }
    .value_item {
        padding: 25px 20px;
    }
    .v_num {
        font-size: 45px;
    }
}
/* 반응형 */
@media screen and (max-width: 768px) {
    .vision_txt { font-size: 18px; }
    .trinity_list { flex-direction: column; }
    .values_grid { grid-template-columns: 1fr; }
    .title_area h2 { font-size: 30px; }
}
/* ========================= 반응형 기본 세팅 ========================= */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
/* ========================= 메인 비주얼 ========================= */
.main-visual { padding: 80px 20px; text-align: center; }
.main-visual h1 { font-size: 2.4rem; }
.main-visual p { font-size: 1.2rem; margin-top: 10px; }
/* ========================= 프로그램 안내 ========================= */
.program { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }
.program ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.program li { padding: 20px; border: 1px solid #ddd; text-align: center; }
/* ========================= 공지사항 ========================= */
.notice { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }
/* ========================= 태블릿 이하 ========================= */
@media (max-width: 1024px) {
    .program ul { grid-template-columns: repeat(2, 1fr); }
    .main-visual h1 { font-size: 2rem; }
}
/* ========================= 모바일 ========================= */
@media (max-width: 768px) {
    .program ul { grid-template-columns: 1fr; }
    .main-visual { padding: 50px 15px; }
    .main-visual h1 { font-size: 1.6rem; }
    .main-visual p { font-size: 1rem; }
}
/* ========================= 메인 슬라이드 모바일 최적화 ========================= */
@media screen and (max-width: 768px) {
    .mySwiper { height: 40vh; min-height: auto; }
    .slide_txt h2 { font-size: 28px; line-height: 1.3; margin-top:50px; margin-bottom: 12px; }
    .slide_txt p { font-size: 15px; margin-bottom: 20px; }
    .slide_txt .btn_more { padding: 10px 22px; font-size: 14px; border-width: 1px; }
}
/* ========================= 모바일 헤더 정렬 개선 ========================= */
@media screen and (max-width: 768px) {
    #hd_top { padding: 15px 0 10px; }
   /* 1. 부모 박스 정렬 해제 및 중앙 정렬 */
    .hd_inner { display: flex !important; justify-content: center !important; text-align: center !important; }
/* 1. 헤더 전체의 과도한 여백 줄이기 */
    #hd_top { padding: 15px 0 10px !important; }
    #hd_top .hd_inner { min-height: 50px !important; position: relative !important; }
    /* 2. 로고 위치 및 크기 미세 조정 */
    .hd_center { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
    .hd_logo img { height: 32px !important; width: auto !important; }
    /* 3. 로그인 메뉴 위치 수정 (로고와 수평 맞춤) */
    .login_menu { top: 50% !important; transform: translateY(-50%) !important; right: 15px !important; }
    /* 4. 햄버거 버튼 위치 아래로 조정 (요청사항) */
    #btn_hamburger { top: 155px !important; left: 15px !important; z-index: 10001 !important; }
    /* 5. GNB(사이드바) 시작 위치도 햄버거 버튼에 맞춰 조정 */
    #gnb { top: 100px !important; }
    /* 6. 페이지 콘텐츠(슬라이드 등)와의 간격 밀착 */
    #wrapper { margin-top: 0 !important; }
    /* SNS 아이콘 숨김 */
    .hd_left, .sns_icon { display: none !important; }
    .sns_icon a { font-size: 18px !important; }
    /* SNS + 로그인 메뉴 한 줄로 */
    .hd_left, .hd_right { display: flex; align-items: center; }
    .hd_left { justify-content: flex-start; }
    .hd_right { justify-content: flex-end; }
    .login_menu { position: static; margin-left: 12px; gap: 10px; }
    .login_menu li a { font-size: 12px; }
}
@media screen and (max-width: 768px) {
    body.dark #hd_top .hd_logo img { content: url('/img/logo_white.png'); }
}
/* ========================= 모바일 햄버거 버튼 ========================= */
#btn_hamburger { display: none; position: absolute; top: 78px; left: 20px; width: 30px; height: 22px; background: none; border: none; cursor: pointer; z-index: 1100; }
#btn_hamburger span { display: block; width: 100%; height: 3px; background: #333; margin-bottom: 5px; border-radius: 2px; transition: 0.3s; }
#btn_hamburger span:last-child { margin-bottom: 0; }
/* 모바일에서만 노출 */
@media screen and (max-width: 768px) {
    #btn_hamburger { display: block; }
    #gnb { display: none; }
}
/* ========================= 모바일 GNB 슬라이드 ========================= */
@media screen and (max-width: 768px) {
    #gnb { position: fixed; top: 0; left: -100%; width: 80%; height: 100vh; background: #75b927; z-index: 1090; display: block; transition: left 0.35s ease; padding-top: 120px; }
    #gnb.active { left: 0; }
    #gnb_ul { flex-direction: column; align-items: flex-start; }
    .gnb_1d { width: 100%; padding: 15px 30px; font-size: 18px; }
    .gnb_2d { position: static; transform: none; opacity: 1; visibility: visible; background: rgba(255,255,255,0.15); box-shadow: none; border: none; padding: 0; }
    .gnb_2d li a { color: #fff !important; padding: 12px 40px; }
}
/* ========================= 햄버거 버튼 가독성 강화 ========================= */
/* ========================= 햄버거 버튼 리디자인 (정석) ========================= */
#btn_hamburger { width: 44px; height: 44px; padding: 0; border-radius: 12px; background: rgba(255,255,255,0.95); box-shadow: 0 8px 20px rgba(0,0,0,0.18); display: flex; flex-direction: column; justify-content: center; align-items: center; border: none; cursor: pointer; }
#btn_hamburger span { width: 22px; height: 2px; background: #222; margin: 3px 0; border-radius: 2px; }
.hamburger { display: none; }
/* 모바일 */
@media (max-width: 768px) {
    .hamburger { display: block; position: absolute; top: 12px; right: 12px; z-index: 1000; background: rgba(0,0,0,0.6); padding: 8px; border-radius: 6px; }
}
#btn_hamburger { display: none; position: absolute; top: 100px; left: 20px; width: 44px; height: 44px; background: rgba(255,255,255,0.95); border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.18); border: none; cursor: pointer; z-index: 1100; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#btn_hamburger span { width: 22px; height: 2px; background: #222; margin: 3px 0; border-radius: 2px; }
@media screen and (max-width: 768px) {
    #btn_hamburger { display: flex; }
}
@media screen and (min-width: 769px) {
    #btn_hamburger { display: none !important; }
}
/* PC 환경: 메뉴 강제 노출 */
@media screen and (min-width: 769px) {
    #gnb { display: block !important; position: relative !important; left: 0 !important; width: 100% !important; height: 60px !important; background: var(--point-color) !important; visibility: visible !important; opacity: 1 !important; padding-top: 0 !important; }
    #gnb_ul { display: flex !important; justify-content: center !important; }
    #btn_hamburger { display: none !important; }
}
/* 모바일 환경: 초기 상태 보정 */
@media screen and (max-width: 768px) {
    #gnb { display: block !important; visibility: visible !important; }
    #gnb.active { left: 0 !important; }
}
/* [PC 전용 메뉴 강제 출력 설정] */
@media screen and (min-width: 769px) {
    #gnb { display: block !important; position: relative !important; width: 100% !important; height: 60px !important; left: 0 !important; background: #75b927 !important; visibility: visible !important; opacity: 1 !important; padding: 0 !important; }
    #gnb_ul { display: flex !important; justify-content: center !important; align-items: center !important; height: 100% !important; margin: 0 auto !important; max-width: 1200px !important; }
    .gnb_li { display: block !important; float: none !important; }
    .gnb_1d { color: #fff !important; padding: 0 30px !important; line-height: 60px !important; font-size: 18px !important; text-align: center !important; }
    #btn_hamburger { display: none !important; }
}
/* [모바일 전용 초기값 보정] */
@media screen and (max-width: 768px) {
    #gnb { display: block !important; visibility: visible !important; }
}
/* 푸터 전체 스타일 */
#footer { background: #2c2e33; color: #adb5bd; font-family: 'Pretendard', sans-serif; line-height: 1.6; }
/* 푸터 상단 링크 바 */
.ft_top { background: #1a1c1f; border-bottom: 1px solid #3d4146; padding: 12px 0; }
.ft_menu { list-style: none; display: flex; gap: 30px; }
.ft_menu li a { color: #868e96; text-decoration: none; font-size: 14px; transition: 0.3s; }
.ft_menu li a:hover { color: var(--point-color); }
/* 푸터 본문 */
.ft_main { padding: 60px 0; }
.ft_main .inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.ft_logo { margin-bottom: 25px; opacity: 0.8; }
.ft_logo img { max-height: 40px; }
.white_logo { filter: brightness(0) invert(1); }
.ft_info address { font-style: normal; font-size: 14px; }
.ft_info address span { margin-right: 20px; display: inline-block; margin-bottom: 5px; }
.ft_info address b { color: #dee2e6; margin-right: 5px; }
.ft_info address a { color: #adb5bd; text-decoration: none; }
.copy { margin-top: 25px; font-size: 13px; color: #6c757d; letter-spacing: 0.5px; }
/* 우측 유틸리티 */
.ft_right { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.family_site select { background: #3d4146; color: #f8f9fa; border: 1px solid #495057; padding: 8px 15px; border-radius: 4px; font-size: 13px; cursor: pointer; outline: none; }
.ft_sns { display: flex; gap: 10px; }
.ft_sns a { display: block; width: 38px; height: 38px; background: #3d4146; color: #fff; text-align: center; line-height: 38px; border-radius: 50%; font-size: 16px; transition: 0.3s; }
.ft_sns a:hover { background: var(--point-color); transform: translateY(-3px); }
/* TOP 버튼 */
#btn_top { position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px; background: var(--point-color); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: none; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
/* 반응형 모바일 */
@media screen and (max-width: 768px) {
    /* [1] 햄버거 버튼: 평상시 (슬라이드 좌측 상단) */
    #btn_hamburger { display: flex !important; position: absolute !important; top: 75px !important; left: 10px !important; right: auto !important; width: 40px !important; height: 40px !important; z-index: 10001 !important; background: rgba(255, 255, 255, 0.9) !important; border: 1px solid #ddd !important; border-radius: 6px !important; flex-direction: column; justify-content: center; align-items: center; gap: 4px; transition: all 0.3s ease-in-out; }
    /* [2] 메뉴 활성화 시 버튼: 메뉴바 우측 상단 */
    #btn_hamburger.active { left: 200px !important; top: 75px !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; }
    #btn_hamburger.active span { background: #fff !important; }
    /* [3] GNB 메뉴바: 헤더 아래(슬라이드 위치)에서 시작 */
    #btn_hamburger { display: flex !important; position: absolute !important; top: 75px !important; left: 10px !important; width: 40px !important; height: 40px !important; z-index: 10001 !important; background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(0,0,0,0.05) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; flex-direction: column; justify-content: center; align-items: center; gap: 4px; transition: all 0.3s ease-in-out; }
    #btn_hamburger.active { left: 195px !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: none !important; }
    #gnb { display: block !important; position: absolute !important; top: 72px !important; left: -280px !important; width: 245px !important; height: 55vh !important; min-height: 380px !important; background: linear-gradient(135deg, #75b927 0%, #5e961f 100%) !important; z-index: 10000 !important; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; padding-top: 60px !important; box-shadow: 10px 0 30px rgba(0,0,0,0.2) !important; overflow-y: auto !important; border-radius: 0 20px 20px 0; }
    #gnb.active { left: 0 !important; }
    .gnb_1d { padding: 15px 25px !important; font-size: 17px !important; font-weight: 600 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; color: #fff !important; }
    .gnb_2d { background: rgba(255, 255, 255, 0.1) !important; margin: 10px 15px !important; border-radius: 12px !important; padding: 5px 0 !important; backdrop-filter: blur(5px); }
    .gnb_2d li a { color: rgba(255, 255, 255, 0.9) !important; font-size: 14px !important; padding: 10px 20px !important; text-align: left !important; border: none !important; }
    .gnb_2d li a::before { content: '·'; margin-right: 8px; font-weight: bold; }
}
.side_logo_mobile { display: none !important; }
@media screen and (max-width: 768px) {
    #gnb { padding-top: 0 !important; height: auto !important; max-height: 80vh !important; }
    .gnb_1d { padding: 10px 20px !important; line-height: 1.2 !important; font-size: 16px !important; margin-top: 5px !important; }
    .gnb_2d { margin: 5px 15px !important; padding: 5px 0 !important; }
    .gnb_2d li a { padding: 8px 20px !important; font-size: 14px !important; line-height: 1.2 !important; }
    #btn_hamburger.active { top: 78px !important; left: 195px !important; width: 35px !important; height: 35px !important; }
}
/* ========================= 모바일 햄버거 버튼 디자인 수정 ========================= */
@media screen and (max-width: 768px) {
    #btn_hamburger { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px !important; width: 44px !important; height: 44px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 8px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important; top: 75px !important; }
    #btn_hamburger span { width: 24px !important; height: 2px !important; background: var(--point-color) !important; border-radius: 10px !important; margin: 0 !important; transition: 0.3s !important; }
    #btn_hamburger.active { 
    top: 50% !important; 
    left: 10px !important; 
    transform: translateY(-50%) !important; /* 수직 중앙 정렬 유지 */
    width: 44px !important;   /* 평상시와 동일한 크기 강제 고정 */
    height: 44px !important;  /* 평상시와 동일한 크기 강제 고정 */
    background: var(--point-color) !important; 
    border-color: var(--point-color) !important; 
    box-shadow: none !important; 
    display: flex !important; /* 내부 span 정렬 유지 */
}

    #btn_hamburger.active span { background: #ffffff !important; }
    #btn_hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #btn_hamburger.active span:nth-child(2) { opacity: 0; }
    #btn_hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ========================= 계절 그라데이션 노출을 위한 최적화 (서브페이지 포함) ========================= */

/* 1. 바디 및 기본 컨테이너 투명화 */
body {
    background-color: transparent !important;
}

/* 2. 서브페이지 배경을 가리는 모든 요소 투명화 (그누보드 공통 구조 보강) */
#wrapper, 
#container, 
#container_wr,   /* 서브페이지 본문 감싸는 박스 */
.bg_gray, 
.program, 
.notice,
.sub_content,    /* 일반 서브페이지 본문 */
#wrapper_content, 
#main_values {
    background-color: transparent !important;
    background: none !important;
}

/* 3. 게시판 목록/뷰 페이지 배경 투명화 */
#bo_list, #bo_v, .bo_v_table, #bo_gall, #bo_w {
    background-color: transparent !important;
}

/* 4. 가독성을 위해 본문 박스에만 반투명 흰색 적용 */
.board_item, 
.program_list li, 
.trinity_list li, 
.value_item,
.sub_page_content, 
.write_div {
    background: rgba(255, 255, 255, 0.85) !important; 
    backdrop-filter: blur(8px); 
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

/* 5. 푸터는 기존 어두운 색 유지 (그라데이션 종료 지점) */
#footer {
    position: relative;
    z-index: 10;
}