/* ========================================================
   1. 폰트 및 키프레임 (Fonts & Keyframes)
======================================================== */
@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face { font-family: 'cafe24ohsquare-v2.0'; src: url('fonts/cafe24ohsquare-v2.0.otf') format('opentype'); }
@font-face { font-family: 'pretendard-extrabold'; src: url('fonts/pretendard-extrabold.otf') format('opentype'); }
@font-face { font-family: 'pretendard-bold'; src: url('fonts/pretendard-bold.otf') format('opentype'); }
@font-face { font-family: 'pretendard-regular'; src: url('fonts/pretendard-regular.otf') format('opentype'); }

@-webkit-keyframes zoomin { 0% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } }
@keyframes zoomin { 0% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ========================================================
   2. 전역 설정 및 유틸리티 (Globals & Utilities)
======================================================== */
:root { --top: 100%; }

body * { font-family: 'pretendard-regular', sans-serif; letter-spacing: -0.5px; }
a { text-decoration: none !important; color: inherit; }

/* Font Utilities */
.cafe24ohsquare { font-family: 'cafe24ohsquare-v2.0'; }
.pretendardEB { font-family: 'pretendard-extrabold'; }
.pretendardB { font-family: 'pretendard-bold'; }
.pretendardR { font-family: 'pretendard-regular'; }

/* Common Utilities */
.flex { display: flex; }
.point { position: absolute; bottom: -91px; left: 46%; margin-left: -9px; display: none; opacity: 1; }
.white { background-color: rgba(0,0,0,.3) !important; transition: all 0.6s; }
.black { background-color: rgba(0,0,0,0.5); }

/* Plugin / Specific Overrides */
#bandMessage { bottom: 50% !important; }
#findForm { padding: 145px 0 !important; }

/* ========================================================
   3. 헤더 및 GNB 네비게이션 (Header & Navigation)
======================================================== */
#topbar { height: 110px; width: 100%; position: fixed; top: 0px; z-index: 9999; transition: 0.3s; }
#topbar.fixeddown { top: -150px; }
#topbar.fixedup { top: 0px; }
#topbar .black { background-color: rgba(0,0,0,0.8); }
#topbar .container { padding: 0px; }

#main_logo { display: inline-block; float: left; max-width: 235px; }
.logo-wrap { position: absolute; left: 5%; z-index: 9999; }

#gnb { display: inline-block; float: right; }
#gnb-bar { margin-top: 35px; width: 100%; }
#gnb > ul > li { display: inline-block; vertical-align: top; padding: 15px 0px; }
#gnb > ul > li.gnbBTN{margin: 0px 5px;}

.depth1 { padding: 0px; }
.depth1 > li { position: relative; text-align: center; margin: 0px 30px; }
.depth1 > li:last-child { margin: 0 0 5px 0; }
.depth1 li a:hover, .depth1 a:active { color: #bdbdbd; transition: 0.3s; }

.gnb_white a { font-size: 18px; color: #fff; padding-bottom: 5px; font-weight: 500; }
.gnb_white span { color: #fff; }
.gnb_black a { font-size: 18px; color: #000; padding-bottom: 5px; font-weight: 500; }
.gnb_black span { color: #000; }
.gnb_black a:hover { color: #808080 !important; transition: 0.3s; }

.depth2 { display: none; position: absolute; text-align: left; padding: 0px; }
.depth2 > li { padding: 5px 0px; z-index: 15; width: 150px; }

.top-btn { position: fixed; bottom: 50px; right: 50px; z-index: 1000; }

/* ========================================================
   4. 전체 메뉴 오버레이 (All Menu Overlay)
======================================================== */
.gnb-all { display: none; position: fixed; z-index: 9999; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; width: 100%; height: 100%; text-align: center; }
.gnb-all a { color: #fff; }
.gnb-all img { margin: 80px 0px 50px; max-width: 185px; }
.gnb-all .all-wrapper .all-close { color: #fff; cursor: pointer; font-weight: 600; font-size: 5em; float: right; }
.gnb-all .all-wrapper .container > ul > li { display: inline-block; vertical-align: top; padding: 0px 25px; }
.gnb-all .all-wrapper .container > ul > li:first-child { display: none; }
.gnb-all .all-wrapper .container > ul > li > a { margin: 0px 0px 18px; font-size: 25px; font-weight: 600; display: block; }
.gnb-all .all-wrapper .container > ul > li > ul > li > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; padding: 6px 0px; display: block; }
.gnb-all .all-wrapper .container > ul > li > ul > li > a:hover { font-weight: bold; transition: 0.2s all ease; }
.gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a { display: block; margin-bottom: 9px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========================================================
   5. 모바일 헤더 및 Mmenu (Mobile Nav)
======================================================== */
#topbar_m.fixeddown { top: -150px; }
#topbar_m.fixedup { top: 0px; }

.header-gnb { position: absolute; top: 50%; right: 3%; transform: translateY(-50%); word-spacing: 5px; display: inline-flex; align-items: center; gap: 20px; }
.header-gnb .gnbBTNM { display: inline-flex; gap: 15px; }
.header-gnb .gnbBTN { font-size: 16px; color: #fff; }
.header-gnb .gnbMORE { font-size: 16px; color: rgba(0, 0, 0, 0.63); }
.header-gnb .toggle { color: #000 !important; font-size: 30px; }

#my-menu { background-color: rgba(0,0,0,.3); max-width: 240px; z-index: 4; }
#mm-0:before { height: 0 !important; }
.mm-navbar.mm-hasbtns .mm-close .mm-sronly { display: none; }
.mm-navbars-top { background-color: rgba(0,0,0,.75); }
.mm-btn { top: unset !important; }
.mm-menu .mm-listview > li .mm-next:after { border-color: #fff; }
.mm-panels > .mm-panel > .mm-listview { margin: 0px !important; }
.mm-panels > .mm-panel.mm-hasnavbar { padding-top: 0 !important; }
.mm-panels > .mm-panel { padding: 0; }
.mm-panels, .mm-panels > .mm-panel { z-index: 9999; }
.mm-listview { margin: 0; }
.mm-listview > li > a, .mm-listview > li > span { padding: 10px 20px !important; font-size: 17px; margin: 0; }
.mm-listview .mm-vertical .mm-panel, .mm-vertical .mm-listview .mm-panel { padding: 0 0 0 10px; }

.closeMenu { color: #fff !important; cursor: pointer; font-size: 40px; position: absolute; right: 0; top: 5%; }
.mob-login { overflow: hidden; padding: 15px 0; border-bottom: 1px solid #808080; margin-bottom: 10px; }
.mob-login li { float: right; overflow: hidden; }
.mob-login a { display: inline-block !important; border: 0px !important; box-shadow: none !important; color: #aaa !important; padding: 0px 10px !important; }
.mob-login a .fa { font-size: 20px !important; }

.mmenu-depth1 > a { color: #fff !important; }
.mmenu-depth2 > a { color: #E4E3B9 !important; }
.mmenu-depth3 > a { color: #B4EBF1 !important; }
a.mm-next { width: 100% !important; }

/* ========================================================
   6. 서브페이지 디자인 (Subpage Visual & Navigation)
======================================================== */
.sub-rel { width: 100%; position: relative; overflow: hidden; }
#subtop { position: relative; height: inherit; width: 100%; top: 0; z-index: 0; background-size: cover !important; background-position: 50% 50% !important; opacity: 1; aspect-ratio: 1920/230; animation: zoomin 9s 1; }
#subtop img { width: 100%; }
.subTitle { position: absolute; top: 45%; text-align: center; width: 100%; border: none; display: block; transform: translateY(-50%); }
.subgnb-home { position: absolute; top: 70%; text-align: center; width: 100%; border: none; display: block; transform: translateY(-50%); font-weight: bold; color: #ffd4d4; }
.subgnb-home a { color: #ffd4d4; }

/* Sub Top Menu (#subgnbD) */
#subgnbD { padding: 270px 0 0; }
#subgnbD .subTDM .subTD2 { padding: 0 0 40px; }
#subgnbD .subTDM .subTD2 a h1 { margin: 0; font-size: 44.5px; font-weight: bold; color: #000; text-align: right; }
#subgnbD .subTDM .subTD3 ul { display: inline-flex; justify-content: flex-end; width: 100%; gap: 35px; margin-bottom: 4rem; }
#subgnbD .subTDM .subTD3 ul a li { position: relative; }
#subgnbD .subTDM .subTD3 ul a li:after { content: ''; position: absolute; height: 2px; width: 0%; background-color: #000; left: 0; bottom: -5px; transition: all ease .3s; }
#subgnbD .subTDM .subTD3 ul a:hover li:after, #subgnbD .subTDM .subTD3 ul a li.active:after { width: 100%; }
#subgnbD .subTDM .subTD3 ul a li h1 { margin: 0; font-size: 24px; font-weight: bold; color: rgba(0, 0, 0, 0.5); transition: all ease .3s; }
#subgnbD .subTDM .subTD3 ul a li:hover h1, #subgnbD .subTDM .subTD3 ul a li.active h1 { color: rgba(0, 0, 0, 1); }

/* Sub Content & LNB */
.Getpadding{padding-top:10vw!important;}
#content { padding: 0px 0px 80px; }
#content .third-menus { margin: 10px 0 42px 0; text-align: center; }
#content .third-menus ul { display: inline-block; }
#content .third-menus ul li { border: 1px solid #dedede; float: left; margin-left: -1px; }
#content .third-menus ul li a { color: #333; padding: 8px 17px; font-size: 12px; min-width: 160px; display: inline-block; text-align: center; }
#content .third-menus ul li.active a { color: #fff; }
#sub_title { font-size: 40px; font-weight: bold; margin: 0; display: inline-block; padding: 0px 0px 20px; width: 100%; float: left; color: #fff; }

.lnb { padding: 0px 30px; }
.lnb_title { font-size: 30px; border-bottom: 1px solid #000; padding: 40px 0px; font-weight: 600; text-align: center; position: relative; }
.sub-left-triangle { position: absolute; right: 0px; top: 0; width: 0; height: 0; border-left: 30px solid transparent; border-top-width: 30px; border-top-style: solid; border-top-color: #6599CB; }

.sub_depth2 { margin-top: 0px; padding-top: 0px; }
.sub_depth2 li { padding: 20px 25px; border-bottom: 1px solid #ddd; transition: all ease 0.3s; }
.sub_depth2 li.active, .sub_depth2 > li:hover { background: #d9d3f2; }
.sub_depth2 > li > a, .sub_depth2 li a { color: #777; font-weight: 600; font-size: 16px; }
.sub_depth2 li i { position: relative; margin: 3px 15px 0px 0px; cursor: pointer; float: right; font-size: 16px; }
.sub_depth2 li i.fa-minus { display: none; }
.sub_depth2 li:last-child { border-color: #000; }

.sub_depth3 { padding: 0px 15px; margin-top: 15px; display: none; }
.sub_depth3.active { display: block; }
.sub_depth3 li { padding: 10px 20px; border-bottom: 1px solid #999; background-color: #f4c9ff; }
.sub_depth3 li a { color: #999; font-size: 15px; transition: all ease 0.3s; }
.sub_depth3 li a:hover { color: #739AB9; }

/* ========================================================
   7. 사이트맵 및 푸터 (Footer & Sitemap)
======================================================== */
#footer-map { background-color: #DADADA; }
#footer-map #sitemap-wrap { background-color: #FFF; padding: 80px 0; display: none; }
#footer-map #sitemap { margin: 40px 0 70px; text-align: center; }
#footer-map #sitemap a:hover { font-weight: bold; transition: 0.2s all; }
#footer-map #sitemap > li { display: inline-block; vertical-align: top; padding: 0px 30px; text-align: left; width: 15%; }
#footer-map #sitemap > li > a { color: #708da2; font-size: 19px; font-weight: 600; }
#footer-map #sitemap > li > ul { margin-top: 15px; }
#footer-map #sitemap > li > ul > li { padding: 3px 0px; }
#footer-map #sitemap > li > ul > li > a { color: #555555; font-size: 15px; }
#footer-map #sitemap > li > ul > li > a:hover { color: #30318B; transition: all ease 0.3s; }
#footer-map #sitemap > li > ul > li > ul > li { padding-left: 10px; }
#footer-map #sitemap > li > ul > li > ul > li > a { color: #777; font-size: 14px; }
#footer-map #sitemap .depth3 { margin: 3px 0 0; }
#footer-map #sitemap .depth3 li { font-size: 17px; padding: 3px 0; }

#footer .footerM { background-color: #000; }
#footer .footerM .footerB { padding: 6.5vh 0 7.5vh; display: grid; grid-template-columns: 1fr 2fr; }
#footer .footerM .footerB a { color: #fff; }
#footer .footerM .footerB img { padding-bottom: 30px; }
#footer .footerM .footerB ul { list-style: none; padding: 0; margin: 0; }
#footer .footerM .footerB ul li { letter-spacing: -0.43px; color: #fff; width: 100%; font-size: 1rem; }

/* ========================================================
   8. 기타 컴포넌트 (Misc Components)
======================================================== */
.latest-special { margin-bottom: 30px; margin-left: 18px; }
.latest-special .p4 { font-size: 30px; padding-left: 15px; position: relative; color: #000; top: 15px; }
.latest-special .white-bar { background: #7c8789; width: 1px; height: 22px; display: inline-block; margin: -20px 13px; }
.latest-special .p4 span { color: #948e8f; }
.jubowrapper { display: inline-block; position: relative; top: 13px; font-size: 13px; opacity: 0.8; }

/* ========================================================
   Top Utility Menu (우측 상단 로그인, 회원정보 등)
======================================================== */
.top-util {
    position: absolute;
    top: 10%;       /* 메뉴를 띄울 상단 여백 (디자인에 맞게 조절 가능) */
    right: 0;        /* 우측 끝 정렬 */
    z-index: 1000;
    display: flex;
    gap: 15px;       /* 메뉴 사이 간격 */
    padding: 0;
    margin: 0;
}
.top-util li {
    list-style: none;
}
.top-util li a {
    font-size: 1rem; /* 메인 메뉴보다 작은 폰트 사이즈 */
    font-weight: 500;
    transition: 0.3s;
    opacity: 0.8;
}
.top-util li a:hover {
    opacity: 1;
}

/* 스크롤 시 텍스트 색상 변경 대응 */
.top-util.gnb_white li a { color: #fff; }
.top-util.gnb_black li a { color: #000; }

/* ========================================================
   GNB 메뉴 호버 애니메이션 완벽 최적화 (GPU 가속)
======================================================== */
#topbar {
    overflow: hidden; /* 높이가 변할 때 서브메뉴가 삐져나오지 않게 방지 */
    /* 기존 transition:0.3s가 높이 변화까지 부드럽게 만들어 줌 */
}

.depth1 .depth2 {
    display: block !important; /* JS의 hide/show를 무시하고 항상 DOM에 유지 */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* JS에서 'on' 클래스를 붙여주면 스르륵 나타남 */
.depth1 > li.on .depth2 {
    visibility: visible;
    opacity: 1;
}

/* ========================================================
   [대형 데스크톱] 1600px 이상 / 1260px 이상 대응
======================================================== */
@media (min-width: 1600px) { }
@media (min-width: 1260px) {
    .container { width: 1260px; }
}

/* ========================================================
   [노트북 / 데스크톱] 1499px 이하 해상도
======================================================== */
@media (max-width: 1499px) {
    .logo-wrap { left: 3%; }
    
    /* PC 헤더(GNB) 간격 및 크기 유연화 */
    #gnb { width: 75%; } 
    #gnb > ul > li { padding: 15px 0; } 
    .depth1 > li { margin: 0px 1.5vw; }
}

/* ========================================================
   [소형 데스크톱 / 가로형 태블릿] 1199px 이하 해상도
======================================================== */
@media (max-width: 1199px) {
    /* 로고 크기 및 GNB 폰트 축소 */
    .logo-wrap { width: 20vw; }
    .depth1 > li { margin: 0px 1vw; }
    .gnb_white a, .gnb_black a { font-size: 16px; }

    /* 서브페이지 상단 메뉴 여백 및 폰트 */
    #subgnbD { padding: 220px 0 0; }
    #subgnbD .subTDM .subTD2 a h1 { font-size: 38px; }
    #subgnbD .subTDM .subTD3 ul { gap: 20px; margin-bottom: 3rem; }
}

/* ========================================================
   [세로형 태블릿] 992px 이하 해상도
======================================================== */
@media (max-width: 992px) {
    .Getpadding{padding-top:15vw!important;}
    /* 상단 고정 바 전체 설정 */
    #topbar_m {
        position: fixed;
        left: 0;
        width: 100%;
        height: 75px; /* 헤더 높이 고정 */
        transition: 0.2s all;
        z-index: 9999;
        transition: top 0.3s ease-in-out;
    }

    /* 내부 컨테이너: Flexbox를 이용해 로고(좌)와 버튼(우) 양끝 정렬 */
    #topbar_m .container {
        display: flex !important;
        justify-content: space-between; /* 양 끝 정렬 */
        align-items: center; /* 수직 중앙 정렬 */
        padding: 0 20px; /* 좌우 여백 */
    }
    #topbar_m .container:before,
    #topbar_m .container:after{content:none;}

    /* 좌측 로고 영역 */
    #topbar_m .top-logo {
        display: flex;
        align-items: center;
        width: 45vw; /* 모바일 화면 비율에 맞춤 */
        max-width: 180px; /* 최대 크기 제한 (태블릿용) */
    }
    
    #topbar_m .top-logo img {
        width: 100%;
        height: auto;
    }

    /* 우측 햄버거(전체메뉴) 버튼 영역 */
    #topbar_m .header-mobile-gnb {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    #topbar_m .header-mobile-gnb .toggle {
        padding: 10px; /* 터치 영역 확보 */
    }

    #topbar_m .header-mobile-gnb .toggle img {
        width: 30px; /* 아이콘 크기 고정 */
        height: auto;
        display: block;
    }
    #subgnbD { padding: 25vw 0 0; }
    #subgnbD .subTDM .subTD2 a h1 { font-size: 32px; }

    /* 푸터 하단 정보 1열(세로) 정렬 */
    #footer .footerM .footerB { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    #footer .footerM .footerB img { margin: 0 auto; padding-bottom: 15px; max-width: 250px; }
}

/* ========================================================
   [모바일] 767px 이하 해상도
======================================================== */
@media (max-width: 767px) {
    /* 모바일 전용 헤더 (#topbar_m) 스타일링 */
    #topbar_m { height: 75px;}
    #topbar_m .container { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 15px; }
    #topbar_m .top-logo { width: 45vw; max-width: 200px; display: flex; align-items: center; }
    #topbar_m .top-logo img { width: 100%; }
    #topbar_m .header-mobile-gnb { display: flex; align-items: center; }
    #topbar_m .toggle img { width: 30px; }

    /* 서브페이지 메뉴 플렉스 랩핑 및 크기 축소 */
    .Getpadding{padding-top:25vw!important;}
    #subgnbD { padding: 35vw 0 0; }
    #subgnbD .subTDM .subTD2 { padding: 0 0 5vw; }
    #subgnbD .subTDM .subTD2 a h1 { font-size: 2rem; text-align: center; }
    #subgnbD .subTDM .subTD3 ul { justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 2rem; }
    #subgnbD .subTDM .subTD3 ul a li h1 { font-size: 1.2rem; }

    /* 전체 메뉴 (.gnb-all) 모바일 최적화 (다단 -> 2단 그리드) */
    .gnb-all img { margin: 40px 0px 30px; max-width: 140px; }
    .gnb-all .all-wrapper .all-close { font-size: 4em; padding-right: 20px; float: none; position: absolute; top: 10px; right: 20px; }
    .gnb-all .all-wrapper .container > ul { display: flex; flex-wrap: wrap; padding: 0; }
    .gnb-all .all-wrapper .container > ul > li { padding: 0px 10px; width: 50%; text-align: left; margin-bottom: 30px; box-sizing: border-box; }
    .gnb-all .all-wrapper .container > ul > li > a { font-size: 20px; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 10px; display: block; }
    .gnb-all .all-wrapper .container > ul > li > ul > li > a { font-size: 16px; }

    /* 하단 푸터 패딩 축소 및 줄바꿈 */
    #footer .footerM .footerB { padding: 8vw 5vw; gap: 20px; }
    #footer .footerM .footerB ul { padding: 0; margin: 0; list-style: none; }
    #footer .footerM .footerB ul li { font-size: 0.9rem; word-break: keep-all; line-height: 1.6; }
}

/* ========================================================
   [소형 모바일] 340px / 320px 이하
======================================================== */
@media (max-width: 340px) {
    /* 폰트 더 작게 조정 */
    #subgnbD .subTDM .subTD3 ul { gap: 10px; }
    #subgnbD .subTDM .subTD3 ul a li h1 { font-size: 1.1rem; }
    
    /* 전체 메뉴 모바일 최소 화면 시 1열로 변경 */
    .gnb-all .all-wrapper .container > ul > li { width: 100%; text-align: center; margin-bottom: 20px; }
    .gnb-all .all-wrapper .container > ul > li > a { border-bottom: none; display: inline-block; }
}
@media (max-width: 320px) { }