@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face {
    font-family: 'pretendard-extrabold';
    src: url('webfont/pretendard-extrabold.woff') format('woff');
}
@font-face {
    font-family: 'pretendard-regular';
    src: url('webfont/pretendard-regular.woff') format('woff');
}
@font-face {
    font-family: 'puradak gentle gothic';
    src: url('webfont/puradak gentle gothic.ttf') format('truetype');
}

.fp-slidesNav.bottom { display: none !important; }
.direct-popup .visible-popups > .each { position: fixed !important; }
.board-theme.gallery .theme-list > .each-document > a.title { width: 100% !important; }
.modal-backdrop { z-index: 0 !important; }
.board-theme .theme-list { font-family: inherit !important; }
.board-theme.gallery .theme-list > .each-document > a.title {
    height: auto !important;
    margin: 0 !important;
    text-decoration: none !important;
}
.board-theme.gallery .theme-list > .each-document { margin-bottom: 10px !important; }
body {
    padding: 0 !important;
    font-family: 'pretendard-regular';
}
.pretendardE { font-family: 'pretendard-extrabold'; }
.pretendardR { font-family: 'pretendard-regular'; }
.puradakGG { font-family: 'puradak gentle gothic'; }

.homeLNAV {
    text-decoration: none;
    z-index: 999;
    position: fixed;
    top: 30%;
    right: -4%;
}
.homeLNAV ul li {
    float: right;
    position: relative;
    width: 100%;
    text-align: left;
}
.homeLNAV ul li a {
    line-height: 2;
    text-decoration: none;
}
.homeLNAV ul li a img { padding: 5px; }

#mainF .footerM {
    padding: 55px 0;
    text-align: center;
}
#mainF .footerM h1 {
    margin: 0 0 20px;
    font-size: 16px;
    color: #555;
}
#mainF .footerM ul li {
    font-size: 16px;
    line-height: 1.5;
}
#mainF .footerM ul li:nth-child(1) {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#my-menu {
    background-color: rgba(0, 0, 0, 0.3) !important;
    max-width: 240px;
}
#mm-0:before { height: 0 !important; }
#mm-1 > ul > li:hover > a.mma1 { color: #34b4c7 !important; }
.mm-btn { top: unset !important; }
.mm-menu .mm-listview > li .mm-next:after { border-color: #fff; }
.mm-navbar { display: none !important; }
.mm-panels > .mm-panel > .mm-listview,
.mm-panels > .mm-panel.mm-hasnavbar {
    padding-top: 0 !important;
}
.mm-panels,
.mm-panels > .mm-panel {
    z-index: 9999;
    padding: 0;
}
.mm-listview { margin: 0 !important; }
.mm-listview > li > a,
.mm-listview > li > span {
    padding: 10px 20px !important;
    font-size: 17px;
}
.mm-listview .mm-vertical .mm-panel,
.mm-vertical .mm-listview .mm-panel {
    padding: 0 0 0 10px;
}
.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;
    font-size: 17px !important;
    color: #aaa !important;
    padding: 0 10px !important;
}
.mob-login a .fa { font-size: 20px !important; }
.mmenu-depth1 > a,
.mmenu-depth2 > a,
.mmenu-depth3 > a {
    color: #fff !important;
}
.mm-listview > li.mm-vertical > .mm-next,
.mm-vertical .mm-listview > li > .mm-next {
    width: 100%;
}

#joinForm .extended-value { display: none; }
#loginForm,
#joinForm,
#findForm,
#memberInfoForm {
    padding-top: 90px !important;
}
.go_btn {
    z-index: 999;
    position: fixed;
    bottom: 35%;
    right: 10%;
    width: 60px;
    height: 60px;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.3s;
}

header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 4;
}
header .navbar-default {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    transition: 0.3s all;
    background-color: transparent;
    z-index: 1;
    opacity: 1;
    border: none;
    height: 80px;
    text-align: center;
}
header .header-gnb {
    position: absolute;
    padding: 0;
    right: 5%;
    top: 50%;
    transform: translate(0, -50%);
    display: inline-flex;
    gap: 30px;
}
header .header-gnb .gnbBTNM {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
header .header-gnb .gnbBTNM a {
    color: #000;
    text-decoration: none;
}
header .navbar-brand {
    position: absolute;
    padding: 0;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    height: inherit;
    display: flex;
    align-items: center;
}
#gnb-login {
    transition: all ease .3s;
    height: 100%;
}

.white #gnb-login.shadow {
    transition: all ease .3s;
    background-color: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.black #gnb-login.shadow {
    transition: all ease .3s;
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}


/* =========================================================
   GNB 구조 (넓은 모니터에서는 기존대로 예쁘게 중앙 정렬)
========================================================= */
#gnb {
    position: absolute;
    width: 55%; 
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    display: flex; 
    margin: 0;
    padding: 0;
    list-style: none;
}

#gnb > li {
    flex: 1; 
    padding: 0;
    position: relative;
    cursor: pointer;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#gnb > li::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: #6050F1;
    transition: all ease .3s;
    transform: translateX(-50%);
}
#gnb > li.active::after { width: 100%; }

#gnb > li::before {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    top: 0;
    width: 0%;
    height: 4px;
    background-color: #6050F1;
    transition: all ease .3s;
    transform: translateX(-50%);
}
#gnb > li.active::before { width: 100%; }

#gnb > li > a {
    font-size: 22px;
    font-weight: bold;
    font-family: 'pretendard-extrabold';
    height: 100%;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all ease 0.2s;
    white-space: nowrap;
}

.white #gnb > li > a { color: #000; }
.black #gnb > li > a { color: #fff; }

#gnb > li > ul { display: none; }

.wrap-depth {
    position: absolute;
    z-index: 50;
    width: 100%;
    margin-top: 80px;
    height: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    transition: height 0.3s ease-out;
}

.containerGnb {
    overflow: hidden;
    width: 100%;
}

.containerGnb > ul {
    margin: 0 auto; 
    width: 55%; 
    display: flex; 
    padding: 0;
    list-style: none;
}

.containerGnb > ul > li {
    flex: 1; 
    padding: 30px 0;
    transition: all .6s;
    position: relative;
    text-align: center;
}

.containerGnb > ul > li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 0%;
    width: 100%;
    transition: all .6s;
    background-color: #fff;
    z-index: -1;
}
.containerGnb > ul > li.open::after { height: 100%; }

.containerGnb > ul > li::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 4px;
    background-color: #6050F1;
    transition: all ease .3s;
    transform: translateX(-50%);
}
.containerGnb > ul > li.open::before { width: 100%; }

.depth2 li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    padding: 8px 10px;
    font-family: 'pretendard-extrabold';
    color: rgba(255, 255, 255, 0.5);
    font-size: 17px;
    transition: 0.3s all;
    word-break: keep-all;
}
.open .depth2 li a { color: rgba(0, 0, 0, .8); }
.depth2 li:hover > a { color: rgba(0, 0, 0, 1); font-weight: bold; }

.wrap-depth li .depth3 a {
    font-size: 15px;
    display: inline-block;
    padding: 5px 15px;
    color: rgba(255, 255, 255, 0.4);
}
.open .wrap-depth li .depth3 a { color: rgba(0, 0, 0, 0.6); }
.wrap-depth li .depth3 a:hover { color: rgba(0, 0, 0, 1); }

/* 하위 메뉴 아이콘 처리 */
.wrap-depth li a span .caret {
    border-top: 2px solid #6050F1;
    border-left: 2px solid #6050F1;
    width: 8px;
    height: 8px;
    margin-top: -10px;
    margin-left: 10px;
    position: absolute;
    top: 50%;
    right: 5px;
    transition: 0.6s;
    transform: translateY(-50%) rotate(225deg);
}
.wrap-depth li.on2 a span .caret,
.wrap-depth li.on3 a span .caret { transform: translateY(-50%) rotate(405deg); }

/* Footer 영역 */
#mainF { background: #272E45; }
#mainF hr { margin: 0; border-color: rgba(255,255,255,0.1); }
#mainF .mainFT { display: flex; justify-content: center; padding: 2.1vw 0; }
#mainF .mainFT .mainFTM {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2.2vw;
    width: 80%;
}
#mainF .mainFT .mainFTM .commBT {
    padding: .8vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 30px;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s;
}
#mainF .mainFT .mainFTM .commBT h1 { margin: 0; font-size: 1.3rem; transition: 0.3s; }
#mainF .mainFT .mainFTM .commBT:hover { background-color: #fff; }
#mainF .mainFT .mainFTM .commBT:hover h1 { color: #000; }
#mainF .mainFT .mainFTM .commBT .more { padding: .2vw 1vw; position: relative; width: 30px; height: 30px; }
#mainF .mainFT .mainFTM .commBT .more .on,
#mainF .mainFT .mainFTM .commBT .more .off {
    position: absolute; width: 100%; height: 100%; top: 0; right: 0; background-size: contain; background-repeat: no-repeat; transition: opacity 0.3s;
}
#mainF .mainFT .mainFTM .commBT .more .on { opacity: 0; }
#mainF .mainFT .mainFTM .commBT .more .off { opacity: 1; }
#mainF .mainFT .mainFTM .commBT:hover .more .on { opacity: 1; }
#mainF .mainFT .mainFTM .commBT:hover .more .off { opacity: 0; }

#mainF .mainFB {
    display: flex; gap: 4vw; justify-content: flex-start; align-items: flex-start; padding: 2.8vw 0 3.3vw;
}
#mainF .mainFB ul { padding: 0; list-style: none; }
#mainF .mainFB ul li { color: #fff; font-size: .9rem; margin-bottom: 5px; }
#mainF .mainFB ul li:last-child { color: rgba(255, 255, 255, .5); margin-top: 15px; }
#mainF .mainFB ul li:last-child a { color: rgba(255, 255, 255, .5) !important; }


/* =========================================================
   미디어 쿼리 (겹침 원천 차단: Bounding Box 사용)
========================================================= */

@media (min-width: 1440px) {
    .container { width: 1440px; }
}

/* 1699px 이하: 강제 중앙 정렬을 풀고 좌우 리미트를 설정하여 충돌 방지 */
@media (max-width: 1699px) {
    header .navbar-brand { left: 40px; }
    header .header-gnb { right: 3%; gap: 25px; }
    
    /* 기존의 퍼센트(%)와 transform을 끄고, left/right 여백으로 안전 영역 확보 */
    #gnb { 
        width: auto; 
        left: 220px; /* 로고가 들어갈 공간 비우기 */
        right: 320px; /* 우측 회원정보 영역 비우기 */
        transform: none; 
    }
    
    /* 하단 메뉴도 #gnb와 똑같이 안전 영역을 확보하여 1:1 수직 라인 유지 */
    .containerGnb > ul { 
        width: 100%; 
        margin: 0; 
        padding-left: 220px; 
        padding-right: 320px; 
        box-sizing: border-box; 
    }
    
    #gnb > li > a { font-size: 19px; }
    .homeLNAV { right: -6%; top: 27%; }
}

/* 1499px 이하 (이미지에서 보인 문제의 구간 - 간격 최적화) */
@media (max-width: 1499px) {
    header .navbar-brand { left: 30px; }
    header .header-gnb { right: 2%; gap: 15px; }
    
    /* 로고, 우측메뉴가 조금씩 줄어들었으므로 겹치지 않게 GNB 바운더리 조정 */
    #gnb { 
        left: 180px; 
        right: 280px; 
    }
    .containerGnb > ul { 
        padding-left: 180px; 
        padding-right: 280px; 
    }
    
    #gnb > li > a { font-size: 17px; }
    .depth2 li a { font-size: 15px; padding: 6px 10px; }
}

/* 1199px 이하 ~ 993px (모바일 메뉴로 넘어가기 직전 한계치) */
@media (max-width: 1199px) {
    header .navbar-brand { left: 20px; max-width: 150px; }
    header .navbar-brand img { width: 100%; height: auto; }
    
    /* 좁은 화면이므로 '로그인', '회원정보' 등의 글자 버튼을 숨김 */
    header .header-gnb .gnbBTNM { display: none; } 
    header .header-gnb { right: 3%; }

    /* 우측 텍스트가 사라지고 햄버거 메뉴만 남았으므로 right 여백을 줄여 GNB 공간 확보 */
    #gnb { 
        left: 160px; 
        right: 80px; 
    }
    .containerGnb > ul { 
        padding-left: 160px; 
        padding-right: 80px; 
    }
    
    /* 글씨체가 너무 넓어 삐져나가지 않도록 자간 조절 */
    #gnb > li > a { font-size: 16px; letter-spacing: -0.5px; }
    .depth2 li a { font-size: 14px; padding: 5px 2px; letter-spacing: -0.5px; }
}

/* 992px 이하: 모바일 햄버거 메뉴 발동 구간 */
@media (max-width: 992px) {
    header .navbar-default { height: 80px; }
    header .navbar-brand { left: 20px; top: 50%; transform: translateY(-50%); max-width: 130px; }
    
    #gnb { display: none !important; } 
    .wrap-depth { display: none !important; }
    
    header .header-gnb { right: 5%; gap: 15px; }
}

@media (max-width: 767px) {
    header .navbar-default { height: 60px; }
    header .navbar-brand { max-width: 110px; }
    .go_btn { width: 50px; height: 50px; bottom: 20px; right: 20px; } 
    
    #mainF .mainFT .mainFTM { grid-template-columns: 1fr 1fr; gap: 4vw; width: 90%; margin: 0 auto; }
    #mainF .mainFB { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
}

@media (max-width: 480px) {
    #mainF .mainFT .mainFTM { grid-template-columns: 1fr; }
    #mainF .mainFT .mainFTM .commBT{padding:3vw;}
}

@media (max-width: 320px) {
    header .navbar-brand { max-width: 90px; }
    .mm-listview > li > a, .mm-listview > li > span { font-size: 15px; padding: 10px; }
}