@charset "UTF-8";

/* Escoredream 웹 폰트 */
@font-face {font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); font-weight: 100; font-display: fallback;}
@font-face {font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff'); font-weight: 200; font-display: fallback;}
@font-face {font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: 300; font-display: fallback;}
@font-face {font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight: normal; font-display: fallback;}
@font-face {font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: 500; font-display: fallback;}
@font-face {font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-weight: 600; font-display: fallback;}
@font-face {font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: 700; font-display: fallback;}
@font-face {font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff'); font-weight: 800; font-display: fallback;}
@font-face {font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff'); font-weight: 900; font-display: fallback;}
/* 변수 정의 */
:root {--color: #000000; --color1: #309341; --color2: #bb2d8c; --color3: #7a6655; --color4: #006596; --point-color: #1b94d3; --primary-color: #0c3a6f; --secondary-color: #333333; --success-color: #bb2d8c; --danger-color: var(--color3); --hover-color: #c9fffe; --end-color: #28a745; --focus-color: #006596; --white-color: #ffffff; --pending-bg-color: #bba463; --atcive-bg-color: #010101; --background-color: #006596; --text-primary: #333; --text-secondary: #555; --card-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); --border-radius: 15px; --gradient: linear-gradient(100deg, var(--color3) 0%, var(--color) 100%); --gradient-hover: linear-gradient(to top, #00676521 50%, transparent 50%); --transition: all 0.3s ease;}
/* Header */
#header {position: relative; width: 100%; top: 0; z-index: 9; text-align: center; overflow: hidden; font-family: 'Escoredream', sans-serif;}
#header h1 a {font-size: 30px; letter-spacing: -0.025em; border: 0; font-family: 'Escoredream', sans-serif;}
#content, .container {padding: 0px 5% 50px 5%;}
.container {margin: 0 auto; padding: 0px 5% 50px 5%; max-width: 2500px; font-size: 16px; font-family: 'Escoredream', sans-serif;}
#content {font-family: 'Escoredream', sans-serif;}
body {font-family: 'Escoredream', sans-serif;}
/* 브레드크럼 네비게이션 스타일 (서브타이틀 아래) */
.page-title-section {align-items: flex-end; margin: 100px 0 30px 0;}
.page-title-section .location {display: block !important; text-align: center; align-items: flex-end;}
.page-title-section .location .current_location {justify-content: center;}
.wp5 {padding: 50px 10%;}
/* 상단 바 스타일 */
.top_bar {position: fixed; top: 0; width: 100%; background: #ffffff url(/resources/view/phcf/images/top_bar_bg.png) top left no-repeat; z-index: 99; overflow: hidden;}
.top_bar_content {position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 5%;}
.utility_menu {display: flex; gap: 10px; align-items: flex-end;}
/* 상단 바 로고 */
.logo h1 {margin: 0;}
.logo img {height: auto;}
.top_logo {position: relative; top: 10px; left: 50%; transform: translate(-50%, 0%); z-index: 3;}
.top_logo h1 {margin: 0;}
.top_logo img {height: auto; max-width: 100%;}
.utility_item {display: flex; align-items: center; flex-direction: column; gap: 5px; color: #969696; text-decoration: none; font-size: 12px; font-weight: 500; transition: all 0.3s ease; background: transparent; border: none; cursor: pointer;}
.utility_item:hover {color: var(--color); transform: translateY(-1px);}
.utility_item i {font-size: 16px; color: var(--text-secondary);}
.utility_item span {font-size: 11px; font-weight: 500;}
.utility_item strong {color: var(--color); display: contents; font-weight: normal;}
/* 퀵메뉴 스타일 - 포항문화재단 페이지와 동일한 스타일 (#page-wrapper 선택자 사용) */
/* CSS 변수 설정 - 퀵메뉴 너비와 닫기 버튼 너비 */
:root {
    --quick-menu-width: 150px;
    --close-button-width: 40px;
}

#page-wrapper .quick-menu-fixed,
.quick-menu-fixed {
    position: fixed !important;
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: 150px !important;
    border-radius: 20px 0 0 20px;
    padding: 0 !important;
    margin-top: 180px !important;
    padding-bottom: 0 !important;
    transition: transform 0.3s ease;
    overflow: visible;
    z-index: 6;
    display: flex;
    flex-direction: column;
    transform: translateX(0); /* 기본 상태: 열림 */
}

#page-wrapper .quick-menu-fixed.hidden,
.quick-menu-fixed.hidden {
    transform: translateX(100%) !important;
}

/* 퀵메뉴 배경 - quick-menu-item까지만 */
#page-wrapper .quick-menu-fixed::before,
.quick-menu-fixed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff; /* 흰색 배경 */
    border-radius: 20px 0 0 20px;
    z-index: -1;
    pointer-events: none;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15); /* 그림자 효과 */
}

/* 메뉴 아이템들이 있는 영역만 배경 표시 */
#page-wrapper .quick-menu-fixed > *,
.quick-menu-fixed > * {
    position: relative;
    z-index: 1;
}

/* 배경이 마지막 quick-menu-item까지만 오도록 - quick-menu-item들만 포함 */
#page-wrapper .quick-menu-fixed,
.quick-menu-fixed {
    height: fit-content;
}

#page-wrapper .quick-menu-fixed::before,
.quick-menu-fixed::before {
    bottom: auto;
    height: 100%;
}

/* 퀵메뉴 아이템 */
#page-wrapper .quick-menu-item,
.quick-menu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none;
    background: transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin: 0 5px 5px 5px;
    padding: 8px 12px !important;
    flex-shrink: 0;
    box-sizing: border-box;
    width: calc(100% - 10px) !important;
    height: auto !important;
    min-height: auto !important;
}

/* 첫 번째 아이템(로그인) 위에 여백 추가 */
#page-wrapper .quick-menu-item:first-child,
.quick-menu-item:first-child {
    margin-top: 10px !important;
}

/* 메뉴 아이템 간격 - 각 아이템 간격은 위에서 margin-bottom으로 설정 */

/* 마지막 메뉴 아이템(포항문화재단) 아래 여백 추가 - a 태그만 선택 */
#page-wrapper a.quick-menu-item:last-of-type,
a.quick-menu-item:last-of-type {
    margin-bottom: 30px !important; /* 닫기 버튼과 겹치지 않도록 여백 추가 */
}

/* 마이페이지 위에 여백 추가 */
#page-wrapper a[href="/phcf/membership_history/view.do"].quick-menu-item,
a[href="/phcf/membership_history/view.do"].quick-menu-item {
    margin-top: 10px; /* 마이페이지 위에 여백 추가 */
}

/* 로그아웃 버튼 아이콘 숨김 */
#page-wrapper button.quick-menu-item .quick-menu-icon,
button.quick-menu-item .quick-menu-icon {
    display: none !important;
}

#page-wrapper button.quick-menu-item .quick-menu-icon img,
button.quick-menu-item .quick-menu-icon img {
    display: none !important;
}

/* 아이콘 숨김 */
#page-wrapper .quick-menu-icon,
.quick-menu-icon {
    display: none !important;
}

#page-wrapper .quick-menu-icon img,
.quick-menu-icon img {
    display: none !important;
}

/* 텍스트 스타일 */
#page-wrapper .quick-menu-item .quick-menu-text,
.quick-menu-item .quick-menu-text {
    opacity: 1 !important;
    width: auto !important;
    font-size: 13px !important;
    font-weight: 500;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 0;
    white-space: nowrap;
    overflow: visible; /* 텍스트가 잘리지 않도록 */
    text-overflow: clip; /* 텍스트 오버플로우 처리 */
    filter: none !important; /* 글자에 블러 처리 안 함 */
    backdrop-filter: none !important; /* 글자에 블러 처리 안 함 */
}

/* 버튼 hover 시 강조 - 흰 배경과 텍스트 색상 변경 */
#page-wrapper .quick-menu-item:hover,
.quick-menu-item:hover {
    background: #ffffff !important;
    border-radius: 8px;
    width: calc(100% - 10px) !important;
    min-height: auto !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-bottom: 5px !important;
}

/* 첫 번째 아이템 hover 시에도 margin-top 유지 - 더 구체적인 선택자로 우선순위 높임 */
#page-wrapper .quick-menu-fixed > a.quick-menu-item:first-child:hover,
#page-wrapper .quick-menu-fixed > .quick-menu-item:first-child:hover,
#page-wrapper a.quick-menu-item:first-child:hover,
#page-wrapper .quick-menu-item:first-child:hover,
.quick-menu-fixed > a.quick-menu-item:first-child:hover,
.quick-menu-fixed > .quick-menu-item:first-child:hover,
a.quick-menu-item:first-child:hover,
.quick-menu-item:first-child:hover {
    margin-top: 10px !important; /* 로그인 버튼 위 여백 유지 (기본 상태와 동일) */
}

/* 마지막 아이템 hover 시에도 margin-bottom 유지 */
#page-wrapper a.quick-menu-item:last-of-type:hover,
a.quick-menu-item:last-of-type:hover {
    margin-bottom: 30px !important; /* 닫기 버튼과 겹치지 않도록 여백 유지 */
}

#page-wrapper .quick-menu-item:hover .quick-menu-text,
.quick-menu-item:hover .quick-menu-text {
    color: #e91e63 !important;
    font-weight: 600;
}

/* 버튼 스타일 */
/* form 스타일 - border 제거 */
#page-wrapper .quick-menu-fixed form,
.quick-menu-fixed form {
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 버튼 스타일 - 모든 외곽선 제거 및 다른 메뉴 아이템과 동일한 스타일 */
#page-wrapper .quick-menu-item button,
#page-wrapper form button.quick-menu-item,
#page-wrapper .quick-menu-fixed form button,
#page-wrapper button.quick-menu-item,
.quick-menu-item button,
form button.quick-menu-item,
.quick-menu-fixed form button,
button.quick-menu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important; /* 다른 메뉴 아이템과 동일 */
    padding: 8px 12px !important;
    min-height: auto !important;
    border: none !important; /* 모든 border 제거 */
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important; /* outline 제거 */
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    gap: 0;
    width: calc(100% - 10px) !important;
    background: transparent !important; /* 기본 상태에서는 배경 없음 */
    border-radius: 8px;
    margin: 0 5px 5px 5px !important;
    box-shadow: none !important; /* box-shadow 제거 */
    transition: all 0.2s ease !important; /* 다른 메뉴 아이템과 동일 */
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
}

#page-wrapper .quick-menu-item button .quick-menu-icon,
.quick-menu-item button .quick-menu-icon {
    display: none !important;
}

#page-wrapper .quick-menu-item button .quick-menu-text,
.quick-menu-item button .quick-menu-text {
    opacity: 1 !important;
    width: auto !important;
    font-size: 13px !important; /* 다른 메뉴 아이템과 동일한 크기 */
    font-weight: 500;
    color: #555;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 0;
    filter: none !important; /* 글자에 블러 처리 안 함 */
    backdrop-filter: none !important; /* 글자에 블러 처리 안 함 */
}

#page-wrapper .quick-menu-item button:hover,
#page-wrapper form button.quick-menu-item:hover,
#page-wrapper .quick-menu-fixed form button:hover,
#page-wrapper button.quick-menu-item:hover,
.quick-menu-item button:hover,
form button.quick-menu-item:hover,
.quick-menu-fixed form button:hover,
button.quick-menu-item:hover {
    background: #ffffff !important;
    border-radius: 8px;
    width: calc(100% - 10px) !important;
    margin: 0 5px 5px 5px !important;
    border: none !important; /* hover 시에도 border 없음 */
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important; /* hover 시에도 outline 없음 */
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}

#page-wrapper .quick-menu-item button:hover .quick-menu-text,
.quick-menu-item button:hover .quick-menu-text {
    color: #e91e63 !important;
    font-weight: 600;
}

/* 닫기 버튼 - 퀵메뉴 안에 위치, 배경 외곽선 위에 겹치도록 */
/* 퀵메뉴 안에 있으므로 퀵메뉴와 함께 자동으로 슬라이드됨 */
#page-wrapper .quick-menu-close,
.quick-menu-close {
    position: absolute; /* 퀵메뉴 안에서 절대 위치 */
    right: calc(var(--quick-menu-width) / 2 - var(--close-button-width) / 2); /* 퀵메뉴 중앙에 위치 */
    width: var(--close-button-width);
    height: var(--close-button-width);
    border-radius: 50%;
    background: #c5c5c5;
    border: none;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #000; /* 검은색 X 심볼 */
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    transition: opacity 0.2s ease; /* 위치 변경 애니메이션 제거, opacity만 transition */
    z-index: 7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    visibility: hidden !important; /* 초기에는 숨김 - 위치 계산 후 표시 */
    opacity: 0 !important; /* 초기에는 투명 */
    margin-top: 0;
    margin-bottom: 0;
    top: var(--close-button-top, 0); /* 기본값을 0으로 설정하여 초기 위치 고정 */
    transform: translateY(-50%); /* 외곽선 중앙 정렬을 위해 버튼 높이의 50%만큼 위로 이동 */
    /* 퀵메뉴와 함께 자동으로 슬라이드됨 */
}

/* 위치 계산 완료 후 표시 */
#page-wrapper .quick-menu-close.positioned,
.quick-menu-close.positioned {
    visibility: visible !important;
    opacity: 1 !important;
}

/* 퀵메뉴 보기 버튼 */
.quick-menu-toggle {
    position: fixed;
    right: 0px;
    top: 190px; /* top_menu 아래에 위치 (30px 여백) */
    transform: none; /* transform 제거 */
    width: 50px;
    height: 120px;
    background: #666;
    border: none;
    border-radius: 15px 0 0 15px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 5;
    transition: all 0.2s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.quick-menu-toggle.show {
    display: flex;
}

.quick-menu-toggle:hover {
    background: #333;
}

/* 다크모드 스타일 */
html.color_change #page-wrapper .quick-menu-fixed::before,
html.color_change .quick-menu-fixed::before {
    background: #000000 !important;
    box-shadow: -4px 0 20px rgba(255, 255, 255, 0.3) !important; /* 다크모드에서 더 강한 그림자 */
}

html.color_change #page-wrapper .quick-menu-item,
html.color_change .quick-menu-item {
    background: transparent !important;
    color: #fff !important;
    border-radius: 8px;
}

html.color_change #page-wrapper .quick-menu-item:hover,
html.color_change .quick-menu-item:hover {
    background: #ffffff !important;
    border-radius: 8px;
}

html.color_change #page-wrapper .quick-menu-item .quick-menu-text,
html.color_change .quick-menu-item .quick-menu-text {
    color: #ccc !important;
}

html.color_change #page-wrapper .quick-menu-item:hover .quick-menu-text,
html.color_change .quick-menu-item:hover .quick-menu-text {
    color: #e91e63 !important;
    font-weight: 600;
}

html.color_change #page-wrapper .quick-menu-item button .quick-menu-text,
html.color_change .quick-menu-item button .quick-menu-text {
    color: #ccc !important;
}

html.color_change #page-wrapper .quick-menu-item button:hover .quick-menu-text,
html.color_change .quick-menu-item button:hover .quick-menu-text {
    color: #e91e63 !important;
    font-weight: 600;
}

html.color_change #page-wrapper .quick-menu-item button:hover,
html.color_change .quick-menu-item button:hover {
    background: #ffffff !important;
    border-radius: 8px;
    border: none !important; /* 다크모드에서도 border 없음 */
    outline: none !important; /* 다크모드에서도 outline 없음 */
}

/* 반응형 - style.css 오버라이드만 하고 기본 스타일 유지, 글자 크기만 조정 */
@media screen and (max-width: 1200px) {
    /* CSS 변수 업데이트 */
    :root {
        --quick-menu-width: 170px;
        --close-button-width: 50px;
    }
    
    /* style.css의 반응형 스타일 완전 오버라이드 - 기본 스타일과 동일하게 */
    #page-wrapper .quick-menu-fixed,
    .quick-menu-fixed {
        position: fixed !important;
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        width: var(--quick-menu-width) !important;
        height: fit-content !important;
        padding-top: 0 !important;
        margin-top: 100px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 20px 0 0 20px !important;
        z-index: 6 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
            #page-wrapper .quick-menu-item,
            .quick-menu-item {
                width: calc(100% - 10px) !important;
                height: auto !important;
                min-height: auto !important;
                padding: 8px 12px !important;
                margin: 0 5px 5px 5px !important;
                justify-content: center !important;
                align-items: center !important;
                flex-direction: row !important;
                border-bottom: none !important;
            }
    
    #page-wrapper .quick-menu-item .quick-menu-text,
    .quick-menu-item .quick-menu-text {
        font-size: 20px !important; /* 기본과 동일 */
        display: block !important;
        opacity: 1 !important;
        width: auto !important;
        margin-left: 0 !important;
    }
    
    #page-wrapper .quick-menu-item button .quick-menu-text,
    .quick-menu-item button .quick-menu-text {
        font-size: 13px !important; /* 다른 메뉴 아이템과 동일한 크기 */
        display: block !important;
        opacity: 1 !important;
        width: auto !important;
        margin-left: 0 !important;
    }
    
    /* 닫기 버튼 크기 조정 */
    #page-wrapper .quick-menu-close,
    .quick-menu-close {
        width: var(--close-button-width) !important;
        height: var(--close-button-width) !important;
        font-size: 26px !important;
        right: calc(var(--quick-menu-width) / 2 - var(--close-button-width) / 2) !important;
    }
    
}

@media screen and (max-width: 1000px) {
    /* CSS 변수 업데이트 */
    :root {
        --quick-menu-width: 180px;
        --close-button-width: 50px;
    }
    
    #page-wrapper .quick-menu-fixed,
    .quick-menu-fixed {
        width: var(--quick-menu-width) !important;
    }
    
    /* 퀵메뉴 보기 버튼 크기 및 위치 조정 */
    .quick-menu-toggle {
        width: 65px !important;
        height: 165px !important;
        font-size: 19px !important;
        border-radius: 12px 0 0 12px !important; /* 모서리 둥글기 줄임 */
        right: 0px !important;
        top: 100px !important; /* slick-next와 겹치지 않도록 더 높은 위치로 조정 */
        transform: none !important;
    }
}

@media screen and (max-width: 900px) {
    /* CSS 변수 업데이트 */
    :root {
        --quick-menu-width: 155px;
        --close-button-width: 50px;
    }
    
    #page-wrapper .quick-menu-fixed,
    .quick-menu-fixed {
        width: var(--quick-menu-width) !important;
    }
    
    #page-wrapper .quick-menu-item .quick-menu-text,
    .quick-menu-item .quick-menu-text {
        font-size: 17px !important;
    }
    
    #page-wrapper .quick-menu-item button .quick-menu-text,
    .quick-menu-item button .quick-menu-text {
        font-size: 10px !important; /* 반응형에서도 다른 메뉴 아이템과 동일한 크기 */
    }
    
    /* 닫기 버튼 크기 조정 */
    #page-wrapper .quick-menu-close,
    .quick-menu-close {
        width: var(--close-button-width) !important;
        height: var(--close-button-width) !important;
        font-size: 24px !important;
        right: calc(var(--quick-menu-width) / 2 - var(--close-button-width) / 2) !important;
    }
}

@media screen and (max-width: 768px) {
    /* CSS 변수 업데이트 */
    :root {
        --quick-menu-width: 130px;
        --close-button-width: 37px;
    }
    
    #page-wrapper .quick-menu-fixed,
    .quick-menu-fixed {
        width: var(--quick-menu-width) !important;
    }
    
    #page-wrapper .quick-menu-item,
    .quick-menu-item {
        padding: 8px 12px !important;
        margin: 0 5px 5px 5px !important;
        width: calc(100% - 10px) !important;
    }
    
    #page-wrapper .quick-menu-item .quick-menu-text,
    .quick-menu-item .quick-menu-text {
        font-size: 14px !important;
    }
    
    #page-wrapper .quick-menu-item button .quick-menu-text,
    .quick-menu-item button .quick-menu-text {
        font-size: 10px !important; /* 반응형에서도 다른 메뉴 아이템과 동일한 크기 */
    }
    
    /* 닫기 버튼 크기 조정 */
    #page-wrapper .quick-menu-close,
    .quick-menu-close {
        width: var(--close-button-width) !important;
        height: var(--close-button-width) !important;
        font-size: 20px !important;
        right: calc(var(--quick-menu-width) / 2 - var(--close-button-width) / 2) !important;
    }
    
    /* 퀵메뉴 보기 버튼 크기 및 위치 조정 */
    .quick-menu-toggle {
        width: 40px !important;
        height: 100px !important;
        font-size: 12px !important;
        border-radius: 10px 0 0 10px !important; /* 모서리 둥글기 줄임 */
        right: 0px !important;
        top: 88px !important; /* slick-next와 겹치지 않도록 더 높은 위치로 조정 */
        transform: none !important;
    }
}
/* 상단 메뉴 스타일 */
.top_menu {display: flex; justify-content: space-between; align-items: center; padding: 40px 1% 0px 1%; background: #fff; position: fixed; top: 0px; width: 100%; z-index: 99; transition: transform 0.3s ease-in-out, background 0.3s ease, box-shadow 0.3s ease; transform: translateY(0);}
/* 기본 상태: 메뉴 버튼들은 흰색, 로고와 아이콘들은 검은색 */
.top_menu .menu-level-1, .top_menu .menu-level-2, .top_menu .menu-level-3 {color: #ffffff; transition: color 0.3s ease;}
.top_menu .logo_text, .top_menu .logo_phc {color: #333; transition: color 0.3s ease;}
.top_menu .theme_toggle_btn i, .top_menu .search_btn i, .top_menu .fullmenu_btn i {color: #333; transition: color 0.3s ease;}
/* 히어로 섹션 위에 있을 때 상단 메뉴 스타일 (메인 페이지에서만 적용) */
body.main-page .top_menu.hero-overlay {background: transparent; box-shadow: none;}
body.main-page .top_menu.hero-overlay .menu-level-1, body.main-page .top_menu.hero-overlay .menu-level-2, body.main-page .top_menu.hero-overlay .menu-level-3 {color: #ffffff;}
body.main-page .top_menu.hero-overlay .logo_text, body.main-page .top_menu.hero-overlay .logo_phc {color: #ffffff;}
body.main-page .top_menu.hero-overlay .logo img {filter: brightness(0) invert(1); transition: filter 0.3s ease;}
/* 다크 모드일 때 맨 상단에서 로고 brightness 적용 */
html.color_change body.main-page .top_menu.hero-overlay .logo img {transition: filter 0.3s ease;}
body.main-page .top_menu.hero-overlay .theme_toggle_btn i, body.main-page .top_menu.hero-overlay .search_btn i, body.main-page .top_menu.hero-overlay .fullmenu_btn i {color: #ffffff;}
body.main-page .top_menu.hero-overlay #nav > ul > li > a {color: #ffffff;}
body.main-page .top_menu.hero-overlay #nav > ul > li > a:after {background: #ffffff;}
body.main-page .top_menu.hero-overlay .home-icon {background: rgba(255, 255, 255, 0.2); color: #ffffff; border-color: rgba(255, 255, 255, 0.3); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
/* 서브페이지: 나이트 모드일 때 맨 상단에서 메뉴 투명 및 흰색 글씨 */
html.color_change body:not(.main-page) .top_menu.hero-overlay {background: transparent; box-shadow: none;}
html.color_change body:not(.main-page) .top_menu.hero-overlay .menu-level-1, html.color_change body:not(.main-page) .top_menu.hero-overlay .menu-level-2, html.color_change body:not(.main-page) .top_menu.hero-overlay .menu-level-3 {color: #ffffff;}
html.color_change body:not(.main-page) .top_menu.hero-overlay .logo_text, html.color_change body:not(.main-page) .top_menu.hero-overlay .logo_phc {color: #ffffff;}
html.color_change body:not(.main-page) .top_menu.hero-overlay .logo img {filter: brightness(20); transition: filter 0.3s ease;}
html.color_change body:not(.main-page) .top_menu.hero-overlay .theme_toggle_btn i, html.color_change body:not(.main-page) .top_menu.hero-overlay .search_btn i, html.color_change body:not(.main-page) .top_menu.hero-overlay .fullmenu_btn i {color: #ffffff;}
html.color_change body:not(.main-page) .top_menu.hero-overlay #nav > ul > li > a {color: #ffffff;}
html.color_change body:not(.main-page) .top_menu.hero-overlay #nav > ul > li > a:after {background: #ffffff;}
/* 나이트 모드: 서브페이지에서 스크롤 시 top_menu 검은색 배경 유지 */
html.color_change body:not(.main-page) .top_menu:not(.hero-overlay) {
    background: #000000 !important;
}
html.color_change body:not(.main-page) .top_menu:not(.hero-overlay) .logo img {
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s ease;
}
html.color_change body:not(.main-page) .top_menu:not(.hero-overlay) .theme_toggle_btn i,
html.color_change body:not(.main-page) .top_menu:not(.hero-overlay) .search_btn i,
html.color_change body:not(.main-page) .top_menu:not(.hero-overlay) .fullmenu_btn i {
    color: #ffffff !important;
    filter: brightness(0) invert(1) !important;
    transition: color 0.3s ease, filter 0.3s ease;
}
/* 나이트 모드: 서브페이지에서 메뉴 hover 시 글씨 색상 흰색 유지 */
html.color_change body:not(.main-page) .top_menu #nav > ul > li:hover > a,
html.color_change body:not(.main-page) .top_menu #nav > ul > li.menu-hover > a {
    color: #ffffff !important;
}
html.color_change body:not(.main-page) .top_menu #nav > ul > li:hover > a:after,
html.color_change body:not(.main-page) .top_menu #nav > ul > li.menu-hover > a:after {
    background: #ffffff !important;
}
/* 나이트 모드: 메인 페이지에서 스크롤 시 top_menu 검은색 배경 유지 */
html.color_change body.main-page .top_menu:not(.hero-overlay) {
    background: #000000 !important;
}
html.color_change body.main-page .top_menu:not(.hero-overlay) .logo img {
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s ease;
}
html.color_change body.main-page .top_menu:not(.hero-overlay) .theme_toggle_btn i,
html.color_change body.main-page .top_menu:not(.hero-overlay) .search_btn i,
html.color_change body.main-page .top_menu:not(.hero-overlay) .fullmenu_btn i {
    color: #ffffff !important;
    filter: brightness(0) invert(1) !important;
    transition: color 0.3s ease, filter 0.3s ease;
}
html.color_change body.main-page .top_menu:not(.hero-overlay) #nav > ul > li > a {
    color: #ffffff !important;
}
html.color_change body.main-page .top_menu:not(.hero-overlay) #nav > ul > li > a:after {
    background: #ffffff !important;
}
.top_menu.hidden {transform: translateY(-100%);}
/* 로고 스타일 */
.logo h1 {margin: 0;}
.logo a {display: flex; align-items: center; gap: 10px; text-decoration: none; color: #333;}
.logo_phc {display: flex; font-size: 32px; font-weight: bold; letter-spacing: -2px;}
.logo_p {color: #228B22;}
.logo_h {color: #4169E1;}
.logo_c {color: #FF69B4;}
.logo_icon {font-size: 20px; color: #D2691E; margin: 0 5px;}
.logo_text {font-size: 18px; font-weight: 600; color: #333; margin-left: 5px; transition: color 0.3s ease;}
/* 네비게이션 액션 버튼 */
.nav_actions {display: flex; align-items: center; gap: 15px; width: auto;}
/* 테마 토글 버튼 */
.theme_toggle_btn {background: none; border: none; cursor: pointer; padding: 15px; border-radius: 50%; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px;}
.theme_toggle_btn:hover {background: rgba(0, 0, 0, 0.1);}
.theme_toggle_btn i {font-size: 22px; color: #333; transition: all 0.3s ease;}
.search_btn {background: none; border: none; cursor: pointer; padding: 15px; border-radius: 50%; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;}
.search_btn:hover {background: rgba(0, 0, 0, 0.1);}
.search_btn i {font-size: 22px; color: #333;}
/* 네비게이션 */
#nav {width: 100%; display: flex; justify-content: center; align-items: center; padding-right: 40px;}
#nav > ul {width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3%; list-style: none; padding: 0; margin: 0;}
#nav > ul > li {position: relative;}
#nav > ul > li > a {text-decoration: none; font-size: 20px; font-weight: 500; padding: 15px 0; display: block; position: relative; transition: all 0.3s;}
/* 서브메뉴 스타일 */
#nav > ul > li .submenu-list {position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-10px); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); padding: 15px; min-width: 200px; white-space: nowrap;}
#nav > ul > li.menu-hover .submenu-list {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);}
#nav > ul > li .submenu-list li {margin: 0; display: block;}
#nav > ul > li .submenu-list li a {color: #333; text-decoration: none; font-size: 15px; font-weight: normal; padding: 8px 15px; display: block; border-radius: 5px; transition: all 0.3s ease; white-space: nowrap; border: none; background: transparent; position: relative;}
#nav > ul > li .submenu-list li a:hover {color: var(--color); background: rgba(49, 49, 122, 0.1); transform: translateX(5px);}
#nav > ul > li:hover > a:after, #nav > ul > li.menu-hover > a:after {width: auto;}
#nav > ul > li .submenu-list li a.btn_blank::after {top: 10px; right: auto !important; margin-left: 5px;}
/* 1뎁스 메뉴 호버 효과 */
#nav > ul > li:hover > a, #nav > ul > li.menu-hover > a {color: var(--color);}
/* 1뎁스 메뉴 하단 라인 */
#nav > ul > li > a:after {content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--color3); transition: width 0.3s;}
#nav > ul > li:hover > a:after, #nav > ul > li.menu-hover > a:after {width: 100%;}
#nav.fixed {border-top: 0px solid #ffffff; border-bottom: 0px solid #86868661;}
#nav.fixed ul li a {color: #000;}
#nav.fixed .submenu-inner {background: #ffffff00;}
#nav.fixed .menu-column h3::after {background: linear-gradient(to left, rgb(128 171 169) 30%, rgb(0 86 84));}
/* 네비게이션 호버 효과 추가 */
#nav.fixed ul li a:hover {color: var(--color); transition: all 0.3s ease;}
/* 메뉴 호버 시 해당 메뉴의 제목에 밑줄 효과 추가 */
#nav.fixed ul li a:hover ~ .submenu .menu-column h3::after {left: 0%; width: 100%;}
/* 버튼 스타일 */
.btn_blank {display: inline-flex; align-items: center; position: relative; padding-right: 20px !important; text-decoration: none; transition: all 0.3s ease;}
.btn_blank::after {content: '\f35d' !important; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: auto !important; right: 0px; top: 23px; transform: translateY(-50%) !important; font-size: 12px !important; width: auto !important; height: 0px !important; opacity: 0.7 !important; transition: all 0.3s ease;}
.fullmenu-list > li > a::after{top: 21px !important; filter: invert(1);}
#nav > ul > li > a.btn_blank::hover {display: none !important;}
.fp-viewing-0 nav.navbar {background-color: transparent;}
.fp-viewing-0 nav.navbar .logo {color: #fff;}
.fp-viewing-0 nav.navbar ul li a {color: #fff;}
.navbar ul li:hover .dropdown-content {display: block;}
.navbar {display: flex;}
.navbar_m {display: none;}
.dropdown-content a {color: #000 !important;}
.dropdown-content {display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); z-index: 1;}
.dropdown-content > a {color: #333; padding: 12px 16px; text-decoration: none; display: block; text-align: left; font-size: 16px;}
.dropdown-content > a:hover {background-color: #ddd;}
.logo_text {display: none; font-size: 16px; font-weight: 500; border-radius: 20px; padding: 6px 15px; background: var(--gradient); color: #fff;}
/*하단*/
footer {position: relative; z-index: 11; background: #000; background-size: cover; color: white; padding: 20px 1%; width: 100%;}
footer p {display: flex; font-size: 16px; line-height: 22px; gap: 3%; font-size: 14px; color: #aaa; flex-wrap: wrap;}
footer a {color: #fff;}
footer a:hover {color: var(--hover-color);}
.footer .wrap {margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;}
.footer_right {width: 85%; display: flex; flex-direction: column;}
.footer_policy {margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 0px;}
.footer_policy li::after {content: '·'; padding: 0px 30px; opacity: 0.3;}
.footer_policy li:last-child:after {display: none;}
.footer_info {margin-bottom: 10px;}
.footer .wrap h2 {font-weight: 500; line-height: 40px; font-size: 30px;}
.bt_top {position: fixed; bottom: 0px; right: 10px; z-index: 10;}
.bt_top .top, .bt_top .bts, .bt_top .kakao-chat {position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--color); border: 0px solid var(--color); border-radius: 50%; margin-bottom: 10px; transition: all 0.3s ease;}
.bt_top .top i, .bt_top .bts i, .bt_top .kakao-chat i {font-size: 24px; color: var(--white-color); transition: all 0.3s ease;}
.bt_top .top .top-text, .bt_top .bts .top-text, .bt_top .kakao-chat .top-text {position: absolute; opacity: 0; color: #fff; font-size: 14px; line-height: 16px; font-weight: bold; text-align: center; transition: all 0.3s ease;}
.bt_top .top:hover, .bt_top .bts:hover, .bt_top .kakao-chat:hover {background: var(--color);}
.bt_top .top:hover i, .bt_top .bts:hover i, .bt_top .kakao-chat:hover i {opacity: 0; transform: translateY(-10px);}
.bt_top .top:hover .top-text, .bt_top .bts:hover .top-text, .bt_top .kakao-chat:hover .top-text {opacity: 1; transform: translateY(0);}
/* 카카오톡 채팅 버튼 전용 스타일 */
.bt_top .kakao-chat {background: #FEE500; border: 2px solid #FEE500;}
.bt_top .kakao-chat i {color: #3C1E1E;}
.bt_top .kakao-chat:hover {background: var(--color); border-color: var(--color); transform: scale(1.05);}
.bt_top .kakao-chat:hover i {color: #3C1E1E;}
/*카카오톡 공유하기*/
.detail_share {display: flex; gap: 10px; align-items: center; justify-content: flex-end;}
.detail_share img {width: 30px;}
.detail_share li {margin-left: 0px !important;}
.detail_share li:nth-child(1) img {width: 20px;}
/*버튼*/
.more_btn {position: relative; transition: 0.5s; padding: 10px 50px 10px 40px; display: inline-block; border: 1px solid #ccc; font-size: 16px; color: #333;}
.more_btn:after {content: '>'; position: absolute; right: 25px; transform: rotateY(45deg);}
.more_btn:hover {color: #fff; background: #324b95; border: 1px solid #324b95; border-radius: 50px;}
.more_btn2 {transition: 0.5s; position: absolute; right: 0; top: -80px; letter-spacing: 2px; border: 1px solid #939393; width: 50px; height: 50px; border-radius: 30px; display: flex; align-items: center; justify-content: center;}
.more_btn2:after {content: '+'; transform: translateY(-2px) translateX(1px); font-weight: 100; font-size: 40px; color: #444;}
.more_btn2:hover {width: 100px; background: #ff5722; border: 1px solid #ff5722; font-weight: 300;}
.more_btn2:hover:after {content: 'more'; font-size: 20px; color: #fff;}
/* 서브 상단 영역 */
.subtop_inner {margin: 80px 0% 0px 0%; overflow: hidden; animation: img_ani 1 5s .5s both;}
.sub_top {width: 100%; color: #fff; background: var(--color4); background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-size: 150%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px 0px; display: none;}
@keyframes img_ani {0% {transform: scale(0.99);} 100% {transform: scale(1);}}
.sub_top h2 {font-size: 40px; font-weight: 700; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); transform: translateY(20px); transition: all 0.5s ease; animation: text_ani2 1 1s .5s both;}
.sub_top p {font-size: 18px; max-width: 600px; line-height: 1.5; background: var(--background-color); padding: 4px 20px; border-radius: 20px 20px; transform: translateY(20px); transition: all 0.5s ease 0.2s; animation: text_ani2 1 1s .5s both;}
.sub_top .icon_down {position: relative; color: #71a39f; margin: 0px auto; opacity: 0.5; cursor: pointer; animation: text_ani 1 1s .5s both; z-index: 2;}
.sub_top .icon_down svg, .sub_top .icon_down i {color: #ffffff; background: rgb(157 157 157 / 25%); padding: 15px 20px; border-radius: 100%; font-size: 24px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
.sub_top .icon_down i:hover {color: #ffffff; background: var(--color)4f;}
@keyframes text_ani {0% {opacity: 0; transform: translateY(-50px);} 100% {opacity: 1; transform: translateY(0px);}}
@keyframes text_ani2 {0% {opacity: 0; transform: translateY(10px);} 100% {opacity: 1; transform: translateY(0px);}}
@media (max-width: 1024px) {.top_menu {padding: 1%;}}
@media screen and (max-width: 768px) {.sub_top {height: 500px;} .sub_top h2 {font-size: 28px;} .sub_top p {font-size: 16px;}}
/* 애니메이션 활성화 */
.sub_top.animate h2, .sub_top.animate p {transform: translateY(0); opacity: 1;}
@keyframes flowText {0% {transform: translateX(0%);} 100% {transform: translateX(-50%);}}
/* 서브메뉴 스타일  */
.submenu_2depth {padding: 0; background: #000000; position: relative; z-index: 1; display: block; margin-top: 20px;}
/* 현재 페이지 타이틀 스타일 */
.submenu_current_title {padding: 60px 5%; text-align: center;}
.submenu_current_title h1 {margin: 0; font-size: 40px; font-weight: 500; color: var(--color); line-height: 1.2;}
/* 반응형 타이틀 */
@media screen and (max-width: 768px) {.submenu_current_title {padding: 40px 3%;} .submenu_current_title h1 {font-size: 24px;}}
@media screen and (max-width: 480px) {.submenu_current_title {padding: 15px 2%;} .submenu_current_title h1 {font-size: 20px;}}
/* 메뉴 컨테이너 */
.menu-container {margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; padding: 0 1%; width: 100%;}
/* 메뉴 아이템 */
.menu-item {position: relative; display: flex; align-items: center; z-index: 9; border-left: 1px solid #444;}
/* 홈 아이콘 */
.home-icon {display: flex; align-items: center; justify-content: center; height: 53px; background: #000000; color: #ffffff; font-size: 14px; border-right: 1px solid #444; min-width: 60px; cursor: pointer; transition: all 0.3s ease; z-index: 9;}
.home-icon:hover {opacity: 0.7; transition: opacity 0.3s ease;}
.home-icon i {color: inherit;}
/* 1뎁스 메뉴 */
.menu-level-1, .menu-level-2, .menu-level-3 {display: flex; align-items: center; justify-content: center; gap: 8px; padding: 17px 20px; cursor: pointer; transition: all 0.3s ease; position: relative; color: #ffffff; font-size: 16px; font-weight: 500; border-right: 1px solid #444; min-width: 210px; z-index: 1000;}
.menu-level-1:hover, .menu-level-1.hover, .menu-level-2:hover, .menu-level-2.hover, .menu-level-3:hover, .menu-level-3.hover {opacity: 0.7; transition: opacity 0.3s ease;}
.menu-level-1 span, .menu-level-2 a, .menu-level-3 a {color: inherit; white-space: nowrap;}
.menu-level-1 .dropdown-icon, .menu-level-2 .dropdown-icon, .menu-level-3 .dropdown-icon {font-size: 10px; color: inherit; transition: transform 0.3s ease; margin-left: 5px;}
.menu-level-1:hover .dropdown-icon, .menu-level-1.hover .dropdown-icon, .menu-level-2:hover .dropdown-icon, .menu-level-2.hover .dropdown-icon, .menu-level-3:hover .dropdown-icon, .menu-level-3.hover .dropdown-icon {transform: rotate(180deg);}
.menu-level-1 a, .menu-level-2 a, .menu-level-3 a {color: inherit; text-decoration: none; white-space: nowrap; padding-left: 15px;}
.menu-level-2 .dropdown-icon, .menu-level-3 .dropdown-icon {font-size: 10px; color: inherit; transition: transform 0.3s ease; margin-left: 5px;}
.menu-level-2:hover .dropdown-icon, .menu-level-2.hover .dropdown-icon, .menu-level-3:hover .dropdown-icon, .menu-level-3.hover .dropdown-icon {transform: rotate(180deg);}
/* 드롭다운 메뉴 컨테이너 */
.submenu-container {position: fixed; top: 151px; background: #2c2c2c; border: 1px solid #444; border-top: none; min-width: 210px; z-index: 9999; display: none; height: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}
/* 1뎁스 드롭다운 메뉴 (제일 왼쪽에 표시) */
.submenu-level-1 {left: 80px; border-top: none; border-bottom: 1px solid #444; z-index: 9999;}
.submenu-level-2 {left: 289px; border-top: none; border-bottom: 1px solid #444; z-index: 9999;}
.submenu-level-3 {left: 500px; border-left: none; border-right: 1px solid #444; z-index: 9999; display: none;}
/* 3뎁스 메뉴가 활성화되어 있을 때 표시 */
.menu-level-3.active + .submenu-level-3 {display: block !important; opacity: 1 !important; visibility: visible !important;}
/* 3뎁스 메뉴가 활성화되어 있을 때 기본 표시 */
.menu-level-3.active {background: #006596 !important; color: #ffffff !important;}
/* 드롭다운 메뉴가 마우스 오버시 제대로 표시되도록 */
.menu-item:hover .submenu-container {display: block;}
.menu-level-1:hover ~ .submenu-level-1, .menu-level-2:hover ~ .submenu-level-2, .menu-level-3:hover ~ .submenu-level-3 {display: block;}
/* 마우스 오버시 서브메뉴 표시 */
.menu-level-1:hover + .submenu-level-1, .menu-level-2:hover + .submenu-level-2, .menu-level-3:hover + .submenu-level-3 {display: block !important;}
/* 3뎁스 마우스 오버시 드롭다운 표시 강화 */
.menu-level-3:hover + .submenu-level-3 {display: block !important; opacity: 1 !important; visibility: visible !important;}
/* 호버 상태일 때 서브메뉴 표시 */
.menu-level-1.hover + .submenu-level-1, .menu-level-2.hover + .submenu-level-2, .menu-level-3.hover + .submenu-level-3 {display: block !important;}
.submenu-container ul {list-style: none; padding: 0; margin: 0;}
.submenu-container ul li {border-bottom: 1px solid #444;}
.submenu-container ul li:last-child {border-bottom: none;}
.submenu-container ul li a {display: block; padding: 12px 20px; color: #e0e0e0; text-decoration: none; font-size: 14px; transition: all 0.3s ease; white-space: nowrap;}
.submenu-container ul li a:hover {background: #000000; color: #ffffff;}
.submenu-container ul li.active a {background: #000000; color: #ffffff;}
.submenu-container ul li a.btn_blank::after {right: auto !important; top: 15px !important; margin-left: 10px;}
/* 드롭다운 메뉴 호버 상태 개선 */
.submenu-container:hover {display: block !important;}
.menu-level-1:hover + .submenu-level-1, .menu-level-2:hover + .submenu-level-2, .menu-level-3:hover + .submenu-level-3 {display: block !important;}
/* 활성화된 메뉴 스타일 */
.menu-level-1.active, .menu-level-2.active, .menu-level-3.active {background: #006596; color: #ffffff;}
.menu-level-1.active span, .menu-level-2.active a, .menu-level-3.active a {color: #ffffff;}
/* 풀메뉴 스타일 */
.fullmenu_btn {cursor: pointer; padding: 0; line-height: 1; font-size: 24px; background: none; border: none; z-index: 99; display: flex; align-items: center; justify-content: center; padding: 15px; border-radius: 50%; transition: all 0.3s ease;}
.fullmenu_btn:hover {background: rgba(0, 0, 0, 0.1);}
.fullmenu_btn:hover i {color: var(--primary-color);}
.fullmenu_btn i {font-size: 22px; color: #333;}
.fullmenu-tree{overflow-y: auto;}
/* 모바일 메뉴 스타일 */
.mobile_menu {position: fixed; top: 0; right: 0; width: 300px; height: 100%; background: var(--background-color); backdrop-filter: blur(10px); z-index: 997; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: none; transform: translateX(100%);}
.mobile_menu.active {opacity: 1; visibility: visible; transform: translateX(0);}
.mobile_menu_inner {padding: 75px 20px; height: 100%; overflow-y: auto; text-align: left;}
.mobile_menu .menu-column {margin: 5px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transform: translateX(20px); opacity: 0; transition: all 0.4s ease;}
.mobile_menu.active .menu-column {transform: translateX(0); opacity: 1;}
.mobile_menu .menu-column > a {color: #fff; font-size: 16px; font-weight: 400; display: block; padding: 15px 0; text-decoration: none; position: relative; padding-right: 30px;}
.mobile_menu .menu-column > a:hover {color: #74cfff;}
.mobile_menu .menu-column > .btn_blank::after {right: auto !important; margin-left: 5px; top: 20px;}
.mobile_menu .menu-column > a .dropdown-icon {position: absolute; top: 18px; right: 0; font-size: 14px; transform: translateY(-50%); transition: transform 0.3s ease;}
.mobile_menu .menu-column.active > a .dropdown-icon {transform: translateY(-50%) rotate(180deg);}
.mobile_menu .menu-column ul {list-style: none; padding: 0; display: none;}
.mobile_menu .menu-column.active ul {display: block;}
.mobile_menu .menu-column ul li {margin-bottom: 0px; padding: 0px 0px; opacity: 0; transform: translateX(10px); transition: all 0.3s ease;}
.mobile_menu.active .menu-column ul li {opacity: 1; transform: translateX(0); transition-delay: calc(0.05s * var(--item-index, 0));}
.mobile_menu .menu-column ul li a {color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 15px; transition: all 0.3s; display: block; padding: 5px 0; position: relative; padding-left: 15px; background: transparent;}
.mobile_menu .menu-column ul li a:hover {color: #74cfff;}
.mobile_menu .menu-column ul li a:before {content: '-'; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.mobile_menu .menu-column ul li .third-level-menu {padding-left: 0px;}
.mobile_menu .menu-column ul li .third-level-menu a:before {display: none;}
.mobile_menu_close {position: absolute; top: 30px; right: 10px; background: none; border: none; color: #fff; font-size: 40px; cursor: pointer; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 999;}
/*메인 통합검색 */
.search-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; animation: fadeIn 0.3s ease;}
.search-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px);}
.full_search {position: absolute; top: 0; left: 0; width: 100%; background: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); animation: slideDown 0.3s ease;}
.search-header {display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; border-bottom: 1px solid #f0f0f0; background: linear-gradient(135deg, var(--color3) 0%, var(--color) 100%); color: white;}
.search-header h3 {margin: 0; font-size: 24px; font-weight: 600;}
.search-close {background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 8px; border-radius: 50%; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;}
.search-close:hover {background: rgba(255, 255, 255, 0.2); transform: rotate(90deg);}
.search-content {padding: 40px 5%; margin: 0 auto;}
.search-input-area {margin-bottom: 40px;}
.search-input-wrapper {position: relative; display: flex; align-items: center; background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 50px; transition: all 0.3s ease;}
.search-input-wrapper:focus-within {border-color: var(--color); background: white; box-shadow: 0 4px 20px rgba(102, 71, 44, 0.15);}
.search-icon {color: #6c757d; font-size: 18px; margin-left: 20px; margin-right: 15px;}
.search-input-wrapper input {flex: 1; border: none !important; background: transparent; font-size: 18px; outline: none; color: #333;}
.search-input-wrapper input::placeholder {color: #adb5bd;}
.search-btn {padding: 20px 30px; background: var(--gradient); color: white; border: none; border-radius: 50px; padding: 15px 25px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;}
.search-suggestions {display: grid; gap: 30px;}
.recent-searches, .popular-searches, .search-categories {background: #f8f9fa; border-radius: 15px; padding: 25px; border: 1px solid #e9ecef;}
.recent-searches h4, .popular-searches h4, .search-categories h4 {margin: 0 0 20px 0; font-size: 18px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 10px;}
.recent-searches h4::before {content: '\f017'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: var(--color);}
.popular-searches h4::before {content: '\f005'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: var(--color);}
.search-categories h4::before {content: '\f0ca'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: var(--color);}
.recent-tags, .popular-tags {display: flex; flex-wrap: wrap; gap: 10px;}
.tag {background: white; color: #666; padding: 8px 16px; border-radius: 25px; font-size: 14px; cursor: pointer; transition: all 0.3s ease; border: 1px solid #e9ecef; display: inline-flex; align-items: center; gap: 5px;}
.tag:hover {background: var(--color); color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(102, 71, 44, 0.2);}
.tag.popular {background: var(--gradient); color: white; border: none;}
.tag.popular:hover {transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 15px rgba(102, 71, 44, 0.3);}
.category-buttons {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px;}
.category-btn {background: white; border: 2px solid #e9ecef; border-radius: 12px; padding: 20px 15px; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #666;}
.category-btn:hover {border-color: var(--color); background: var(--color); color: white; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(102, 71, 44, 0.2);}
.category-btn i {font-size: 24px; color: var(--color); transition: color 0.3s ease;}
.category-btn:hover i {color: white;}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes slideDown {from {transform: translateY(-100%); opacity: 0;} to {transform: translateY(0); opacity: 1;}}
.bottom {position: relative; width: 100%;}
/* 버튼 색상 변형 */
.btn_blank.btn-primary {color: var(--primary-color);}
.btn_blank.btn-primary:hover {color: var(--color);}
.btn_blank.btn-secondary {color: var(--secondary-color);}
.btn_blank.btn-secondary:hover {color: var(--color);}
.btn_blank.btn-success {color: var(--success-color);}
.btn_blank.btn-success:hover {color: var(--color);}
/* 버튼 크기 변형 */
.btn_blank.btn-sm::after {font-size: 12px;}
.btn_blank.btn-lg::after {font-size: 16px;}
.con_title {width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid #d5d5d5; margin: 0 auto; position: relative; align-items: flex-end; line-height: 1.5;}
.title_text {font-size: 30px; font-family: 'yg-jalnan';}
.con_title ul li {float: left; margin-left: 16px;}
/*안내 툴팁 */
.btnQuestion {position: absolute; display: inline-block; width: 13px; height: 13px; margin: 0; background: url(/resources/view/phcf/images/ico_tooltip.png) no-repeat 0 0; vertical-align: middle; cursor: pointer; z-index: 11;}
.btnQuestion .hidden {display: none;}
.btnQuestion .warnBalloonBox {display: none; position: absolute; top: auto; bottom: 22px; left: 0; min-width: 95px; width: auto; padding: 5px 13px 3px; border: 1px solid #dcdcdc; background: #fff; border-radius: 2px; box-sizing: border-box; color: #727272; font-size: 11px; text-align: left; line-height: 22px;}
/*공유하기*/
.dropdown {position: relative; display: inline-block;}
.dropdown-content {display: none; position: absolute; z-index: 100; font-weight: 400; background-color: #f9f9f9; border: 1px solid #ccc; min-width: 35px;}
.dropdown-content a {display: block; color: rgb(37, 37, 37); font-size: 12px; padding: 10px !important;}
.dropdown-content a:hover {background-color: #ececec}
.dropdown:hover .dropdown-content {display: block;}
.dropdown-content img {width: 25px !important;}
/* 개인정보방침 및 이메일 무단수집거부 */
.popup_wrap {width: 100%; height: 100%; background: #fff; padding: 20px;}
.popup_title {background: var(--color); color: #ffffff; padding: 20px 30px;}
.popup_title h1 {margin-bottom: 10px;}
.popup_title h3 {font-size: 10px;}
.popup {margin-bottom: 30px;}
.popup dt {font-weight: bold; font-size: 16px; color: var(--color); padding-bottom: 10px; margin-bottom: 10px;}
.popup dd {padding-left: 10px;}
.con_box {background: #f5f5f5; border: 1px solid #e4e4e4; padding: 20px; font-size: 15px; line-height: 22px; text-align: justify; display: block; margin-bottom: 10px;}
.popup_wrap h4 {margin-bottom: 10px; font-size: 20px; font-weight: 500;}
.popup_wrap h5 {color: #1d1d1d; margin-bottom: 10px; font-size: 17px; font-weight: 600;}
.popup_wrap .sub_top_text {line-height: 24px;}
.popup_wrap ul.list_style li {line-height: 20px; padding-left: 23px;}
.popup_wrap ul.list_style li ul li {background: url(/resources/view/phcf/images/list-icon1_1.png) 24px 10px no-repeat; font-size: 14px; color: #333; padding-left: 34px;}
.popup_wrap .margin-bottom {margin-bottom: 40px !important;}
.popup_wrap .img_center {width: 100%;}
/* ====== 현재위치 표시 (Breadcrumb) ====== */
.location {background: transparent; border-bottom: 0px solid #e9ecef; font-size: 14px; display: block;}
.current_location {display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.home-link {display: flex; align-items: center; text-decoration: none; font-size: 16px; color: #333; transition: all 0.3s ease;}
.home-link:hover {color: var(--color3);}
.separator {color: #999; font-weight: 400; margin: 0 8px; font-size: 14px;}
.current-location-link {text-decoration: none; transition: all 0.3s ease; color: #333; font-size: 14px;}
.current-location-link:hover {color: var(--color3);}
.current-location-text a:last-child {font-weight: 500; color: #333;}
.current-page {color: #333; font-size: 14px; font-weight: 500;}
/* 나이트 모드: 브레드크럼 네비게이션 */
html.color_change .home-link {color: #ffffff;}
html.color_change .home-link:hover {color: #b5a182;}
html.color_change .separator {color: #999999;}
html.color_change .current-location-link {color: #e0e0e0;}
html.color_change .current-location-link:hover {color: #ffffff;}
html.color_change .current-location-text a:last-child {color: #ffffff;}
html.color_change .current-page {color: #ffffff;}
/* 반응형 breadcrumb */
@media screen and (max-width: 768px) {.location {padding: 12px 3%; font-size: 13px;} .current_location {gap: 5px;} .separator {margin: 0 3px;} .breadcrumb-link, .current-page {padding: 1px 3px;}}
/* ====== 3뎁스 메뉴 스타일 ====== */
.depth3_menu {background: #ffffff; padding: 0px 5% 40px 5%; display: none;}
.depth3_menu_content {margin: 0 auto;}
.depth3_menu_wrapper {margin: 0 auto;}
.depth3_menu_row {display: flex; border: 1px solid #d5d5d5; border-bottom: none;}
.depth3_menu_row:last-child {border-bottom: 1px solid #d5d5d5;}
.depth3_menu_cell {flex: 1; text-align: center; border-right: 1px solid #d5d5d5; background: #ffffff; transition: all 0.3s ease; position: relative;}
.depth3_menu_cell:last-child {border-right: none;}
.depth3_menu_cell a {color: #333333; text-decoration: none; font-size: 16px; font-weight: 500; padding: 20px; display: block; transition: all 0.3s ease;}
.depth3_menu_cell a.btn_blank::after {right: auto !important; margin-left: 10px;}
.depth3_menu_cell:hover {background: #f8f9fa;}
.depth3_menu_cell:hover a {color: var(--color3);}
/* 활성화된 메뉴 스타일 */
.depth3_menu_cell.active {background: var(--color3) !important; color: #ffffff !important;}
.depth3_menu_cell.active a {color: #ffffff !important;}
.depth3_menu_cell.active:hover {background: var(--color3) !important;}
.depth3_menu_cell.active:hover a {color: #ffffff !important;}
/* 반응형 스타일 */
@media screen and (max-width: 768px) {.depth3_menu {padding: 20px 3%;} .depth3_menu_cell a {font-size: 14px;}}
@media screen and (max-width: 480px) {.depth3_menu_cell a {font-size: 13px;}}
/* ====== 커스텀 풋터 스타일 (phcf) ====== */
.footer-top-menu {border-bottom: 1px solid #ffffff7d; padding: 0 0 10px 0;}
.footer-top-menu .container {display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 0 0px; min-height: auto;}
.policy-list {display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0;}
.policy-list li {color: #fff; font-size: 14px; position: relative;}
.policy-list li:not(:last-child)::after {content: '|'; color: #ffffff70; margin-left: 24px;}
.site-btn-wrap {display: flex; align-items: center; gap: 10px;}
.btn-worker {background: var(--hover-color); color: #232222; border: none; border-radius: 24px; padding: 10px 24px; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.2s;}
.btn-worker i {font-size: 18px;}
.btn-worker:hover {background: #fee500;}
/* 카카오 1:1문의 버튼 스타일 */
.btn-kakao-chat {background: var(--gradient); color: #ffffff; border: none; border-radius: 24px; padding: 10px 24px; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s;}
.btn-kakao-chat i {font-size: 18px;}
.btn-kakao-chat:hover {background: var(--hover-color);}
.footer-main {padding: 40px 0 30px 0;}
.footer-main .container {display: flex; margin: 0 auto; padding: 0 0px; gap: 30px; min-height: auto;}
.footer-logo-info {flex: 1.2; display: flex; flex-direction: row; align-items: center; gap: 28px; min-width: 260px;}
.footer-logo-info .footer-logo {width: 120px; margin-bottom: 0;}
.footer-logo-info .footer-org-name {font-size: 18px; font-weight: bold; color: #fff;}
.footer-logo-info .footer-address, .footer-logo-info .footer-tel {font-size: 15px; color: #ccc;}
.footer-logo-info .footer-copyright {font-size: 14px; color: #888;}
.footer-logo-info .footer-sns {margin-top: 0; margin-left: 18px;}
.footer-3col {display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px;}
.footer-left {display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}
.footer-logo {width: 230px; margin-bottom: 0;}
.footer-sns {display: flex; gap: 10px;}
.sns-icon {display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #232222; font-size: 22px; transition: background 0.2s, color 0.2s;}
.sns-icon:hover {background: var(--hover-color); color: #232222;}
.footer-center {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;}
.footer-org-name {font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 2px;}
.footer-address, .footer-tel {font-size: 14px; color: #ebf5ff;}
.footer-copyright {font-size: 14px; color: #86c0ff;}
.footer-menu-cols {display: flex; flex-direction: row; gap: 40px; flex: 1; justify-content: flex-end;}
.footer-col {min-width: 120px;}
.footer-col-title {font-size: 16px; font-weight: bold; margin-bottom: 14px; color: #fff;}
.footer-col ul {list-style: none; padding: 0; margin: 0;}
.footer-col ul li {font-size: 14px; color: #ccc; margin-bottom: 8px;}
/* 반응형 스타일 */
@media screen and (max-width: 1700px) {#nav > ul {gap: 15px;} #nav > ul > li > a {font-size: 18px;letter-spacing: -1.5px;} .logo img {max-width: 200px;} #nav {padding-right: 10px;} .nav_actions {gap: 5px;} .theme_toggle_btn, .fullmenu_btn { padding: 5px; width: 30px;   height: 30px;} }
@media screen and (max-width: 1400px) {#nav > ul > li > a {font-size: 16px;letter-spacing: -1.5px;}  .top_bar {height: 100px;} .top_bar_content {flex-direction: column-reverse; height: auto; padding: 0 0%;} .top_logo {left: 0%; transform: none;} .utility_menu {width: 100%; justify-content: flex-end; padding: 10px 23px;} .sub_content {padding: 0px 0px !important;} 
#nav > ul {gap: 10px;} 
.submenu-inner {gap: 1%;} .footer-top-menu .container, .footer-main .container {padding: 0px 0px !important;} footer p {justify-content: center; text-align: center;} .footer-main .container {flex-direction: column;} .footer .wrap {flex-direction: column;} .footer_right {width: auto; align-items: center;} .footer_policy {justify-content: center; font-size: 14px;} .footer_policy li::after {padding: 0px 10px;} .footer-sns {margin-top: 0px;} .footer-menu-cols {justify-content: space-between; width: 100%;} .bt_top {bottom: 20px;}}
@media screen and (max-width: 1100px) {.utility_menu {gap: 10px;} .utility_item {font-size: 11px;} .utility_item i {font-size: 14px;} .top_logo img {max-width: 200px;} #nav > ul {gap: 20px;} #nav > ul > li > a {font-size: 16px;} .text-light {display: none;} .sub_top h2 {font-size: 28px;} .sub_top p {font-size: 16px;} .submenu {padding: 20px; overflow-y: auto; max-height: calc(100vh - 180px);} .submenu-inner {flex-direction: column; gap: 20px;} .submenu_2depth ul li a {font-size: 14px; letter-spacing: -1px;} .menu-column ul li a {font-size: 14px;} .logo img {width: 200px;} #nav {display: none !important;} .mobile_menu {display: block !important;} .logo_text {font-size: 16px;} .weather-info .dust {display: none;} .text-light {display: none;} .mobile_menu .menu-column ul li a {padding: 4px 0; padding-left: 15px;} .mobile_menu .menu-column ul li .btn_blank::after {right: auto !important; top: 13px; margin-left: 10px;} footer {padding: 20px 10px;} .footer-menu-cols {justify-content: flex-start; gap: 24px;} .footer-logo-info {flex-direction: column; align-items: flex-start; gap: 10px;} .footer-logo-info .footer-sns {margin-left: 0;} .quick-menu-fixed {position: fixed; z-index: 100; background: #f8f8f8; padding: 10px 0px; height: auto; top: 0px; left: 0px; display: flex; flex-direction: row; justify-content: center;} .quick-menu-item {width: 16px; height: 16px;} .quick-menu-item:hover {padding: 0px 30px; margin: 0px 10px;} .quick-menu-icon {width: 16px; height: 16px; font-size: 12px;} .quick-menu-icon img {width: 16px; height: 16px;} .quick-menu-item:hover::after {font-size: 12px; padding: 5px 10px; right: auto; top: 7px; z-index: 0;} .quick-menu-item:hover::before {left: 30px;}}
@media (max-width: 800px) {.footer {padding: 20px 10px; background-size: auto;} .footer-menu-cols {display: none;} .services {flex-direction: column; align-items: center;} .service-box {height: 300px; width: 100%; margin-bottom: 20px;} .footer-section {width: 100%;} .navbar ul {flex-direction: column; align-items: flex-start;} .navbar ul li {width: 100%;} .navbar ul li a {width: 100%; text-align: left;} .dropdown-content {position: relative; width: 100%;} nav.navbar {background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); height: 60px;} .navbar {display: none;} .navbar_m {display: flex;} nav > a {margin: 0;} .navbar ul {gap: 0; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);} .hamburger-menu {cursor: pointer; line-height: 21px; font-size: 30px; display: block;} .nav-links {display: none; flex-direction: column; width: 100%; background-color: #fff; position: absolute; top: 60px; left: 0; z-index: 1;} .nav-links li {text-align: center; width: 100%;} .nav-links li a {padding: 15px; width: 100%; border-top: 1px solid #eee;} .nav-links .dropdown-content {position: static; background: #f2f2f2;} .nav-links li:hover .dropdown-content {display: none;} .nav-links li.active .dropdown-content {display: block;}}
@media (max-width: 768px) {.utility_menu {gap: 8px;} .utility_item {font-size: 10px;} .utility_item i {font-size: 12px;} .top_bar_content {align-items: flex-start; padding-left: 10px;} .bt_top {right: 5px;} .bt_top .bts, .bt_top .kakao-chat {font-size: 22px; padding: 10px; width: 45px; height: 45px;} .bt_top .top i, .bt_top .bts i, .bt_top .kakao-chat i {font-size: 20px;} .bt_top .top .top-text, .bt_top .bts .top-text, .bt_top .kakao-chat .top-text {font-size: 12px;} .bt_top .top {padding: 0px; font-size: 22px; width: 45px; height: 45px;} .footer_right {padding: 0px 40px;} .sub_top h2 {font-size: 28px;} .sub_top p {font-size: 16px;} .submenu_2depth {overflow-x: auto; max-width: 100%;} .submenu_2depth .menu-container {padding: 0 0px; flex-wrap: wrap;} .home-icon {display: none;} .submenu_2depth .menu-level-1, .submenu_2depth .menu-level-2, .submenu_2depth .menu-level-3 {padding: 12px 15px; font-size: 14px; min-width: 150px;} .submenu_2depth .submenu-container {min-width: 150px; top: 140px;} .submenu-level-1 {left: 0px;} .submenu-level-2 {left: 150px;} .submenu-level-3 {left: 300px;} .footer-main {padding: 20px 0px;} .footer-top-menu .container, .footer-main .container {flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 8px;} .footer-logo-info {align-items: flex-start; min-width: 0;} .footer-menu-cols {flex-direction: column; gap: 10px;} .footer-col {min-width: 0;} .footer-top-menu .policy-list {gap: 5px;} .footer-top-menu .policy-list li {font-size: 14px;} .policy-list li:not(:last-child)::after {margin-left: 5px;} .site-btn-wrap {width: 100%; flex-direction: column;} .btn-worker, .btn-kakao-chat {width: 100%; justify-content: center; font-size: 12px;} .footer-address, .footer-tel {font-size: 14px;} .search-content {padding: 30px 4%;} .search-input-wrapper {border-radius: 30px;} 
.search-input-wrapper input {font-size: 0.8rem; padding: 12px 10px;} 
.search-input-wrapper .search-btn {padding: 0.7rem; font-size: 14px; width: auto;} 
.category-buttons {grid-template-columns: repeat(2, 1fr); gap: 12px;} .category-btn {padding: 18px 12px; font-size: 13px;} .tag {font-size: 13px; padding: 7px 14px;}}
@media (max-width: 440px) {.weather-info {display: none !important;} .top_menu .logo {flex-direction: column; gap: 0px; align-items: flex-start; justify-content: center;} .logo_text {font-size: 14px; padding: 4px 15px; width: 100%;} .footer-address, .footer-tel {font-size: 14px;} .utility_menu {gap: 5px;} .utility_item {font-size: 9px;} .utility_item i {font-size: 11px;} .search-content {padding: 20px 3%;} .search-header h3 {font-size: 20px;} .search-input-wrapper {border-radius: 25px; padding: 3px;} .search-input-wrapper input {font-size: 16px; padding: 12px 10px;} .search-btn {padding: 12px 20px; font-size: 14px;} .recent-searches, .popular-searches, .search-categories {padding: 20px;} .category-buttons {grid-template-columns: repeat(2, 1fr); gap: 10px;} .category-btn {padding: 15px 10px; font-size: 12px;} .category-btn i {font-size: 20px;} .tag {font-size: 12px; padding: 6px 12px;}}
/* 컨텐츠용 탭 */
#content ul.commonTab {display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; text-align: center; margin-bottom: 40px;}
#content ul.commonTab li {width: 24%; display: inline-block;}
#content ul.commonTab li a {padding: 14px 20px; display: block; border: 1px solid #ccc; color: #545454;}
#content ul.commonTab li a.current, #content ul.commonTab li a:hover {border: 1px solid var(--color); background: var(--color); color: #fff;}
#content ul.commonTab li.current {background: var(--color); color: #fff;}
#content ul.commonTab li.current a {color: #fff; margin-left: 0px; border: 1px solid var(--color);}
#content .con_box1 {background: #f5f5f5; border: 1px solid #e4e4e4; padding: 30px; line-height: 22px; display: block; margin-bottom: 10px;}
#content .margin-bottom, #content .margin_bottom {margin-bottom: 40px !important;}
#content .prolist h4, #content h4 {margin-bottom: 20px; font-size: 24px; font-weight: 500; background: url(/resources/view/phcf/images/h4_icon.png) no-repeat left center; padding-left: 30px;}
/*리스트 목록 아이콘*/
#content ul.list_style1 li {line-height: 25px; background: url(/resources/view/phcf/images/list-icon1.png) 0 10px no-repeat; padding-left: 12px; text-align: left;}
#content ul.list_style1 li ul li {background: url(/resources/view/phcf/images/list-icon1_1.png) 0 10px no-repeat; font-size: 14px; color: #333;}
#content .left_margin {margin-left: 20px;}
/*버튼스타일*/
#content a.down_btn {margin: 0 3px; background: var(--color3); border: 1px solid var(--color3); color: #fff; padding: 20px; text-align: center; display: inline-block;}
#content a.down_btn_color2 {background: #fff; border: 1px solid #8a8a8a; color: #545454;}
#content .download_Btn {text-align: right; clear: both;}
#content .download_Btn-c {text-align: center;}
#content a.down_btn:hover {background: #fff; border: 1px solid var(--color3); color: var(--color3);}
#content a.down_btn_color2:hover {background: #fff; border: 1px solid #8a8a8a; color: #8a8a8a;}
#content .download_Btn {text-align: center; margin-bottom: 50px;}
#content .img_center {display: block; margin: 0 auto;}

@media screen and (max-width: 1025px) {.table_scroll {width: 100%; white-space: nowrap; overflow-x: scroll;}}
@media (max-width: 1100px) {#content .space_tab li a {width: 49% !important;} #content ul.commonTab li {width: 49% !important; font-size: 14px;} #content .prolist h4, #content h4 {font-size: 20px;}}
@media (max-width: 560px) {#content ul.commonTab {gap: 5px;} #content .space_tab li a {width: 100% !important;} #content ul.commonTab li {width: 100% !important;} #content a.down_btn {margin: 2px 0px !important; width: 100%;} #content .con_box1 {padding: 20px !important; font-size: 16px;}}
/* 다크모드 스타일 (color_change 클래스가 있을 때) */
html.color_change #content, html.color_change .container {background: transparent; color: #ffffff;}
html.color_change .board_list tbody th {background: #1a1a1a; border-color: #666666; color: #ffffff;}
html.color_change .board_list tbody td {border-bottom-color: #666666; color: #ffffff;}
html.color_change .board_list tbody.ov tr:hover {background: #292723;}
html.color_change .table_style1 th {background: #1a1a1a; border-color: #666666; color: #ffffff;}
html.color_change .table_style1 tbody.tb_none_line tr th {background: #292723; border-right-color: #666666; color: #ffffff;}
html.color_change input::placeholder, html.color_change textarea::placeholder {color: #999999;}
html.color_change .footer-sns a {color: #000;}
html.color_change a, html.color_change .current-page {color: #ffffff;}