@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.inner {	width:1800px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1280px;	position:relative;	margin-left:auto;	margin-right:auto;}


@media all and (max-width:1799px) {	
    .inner {width:94%;}
}
@media all and (max-width:1279px) {	
    .s-inner {width:94%;}
}


#header{height: 100px; background-color: #fff; position: relative; z-index: 1000;}


#wrap > *:not(#header) {
    transition: filter 0.3s ease;
}
#wrap:has(#header .inner .l_cont .pcGnb:hover) > *:not(#header),
#wrap.gnb-hovered > *:not(#header) {
    filter: blur(8px) brightness(0.95);
}
#header .inner{display: flex; align-items: center; justify-content: space-between; height: 100%;}
#header .inner .l_cont{display: flex; align-items: center; gap:100px;}
#header .inner .l_cont #logo{}
#header .inner .l_cont #logo a{display: block; width: 156px; height: 52px; background: url(/images/common/logo.webp?v=3) no-repeat left center / contain;}
#header .inner .l_cont .pcGnb{}
#header .inner .l_cont .pcGnb > ul{display: flex; gap:80px;}
#header .inner .l_cont .pcGnb > ul > li{position: relative;}
#header .inner .l_cont .pcGnb > ul > li > div{}
#header .inner .l_cont .pcGnb > ul > li > div > span{}
#header .inner .l_cont .pcGnb > ul > li > div > span > a{font-size: 18px; font-weight: 600; color:#000; display: block; line-height: 100px;}
#header .inner .l_cont .pcGnb > ul > li > ul{display: none; position: absolute; left: 50%; transform: translateX(-50%); width: max-content; text-align: center; background-color: #fff; border-radius: 10px; padding: 25px 30px; z-index: 10; top: 80px; box-shadow: 3px 10px 14px rgba(0,0,0,0.05);}
#header .inner .l_cont .pcGnb > ul > li > ul > li{}
#header .inner .l_cont .pcGnb > ul > li > ul > li + li{margin-top: 20px;}
#header .inner .l_cont .pcGnb > ul > li > ul > li > a{font-size: 16px; font-weight: 500; color:#666666;}
#header .inner .l_cont .pcGnb > ul > li > ul > li:hover > a{color:#000; font-weight: 600;}
#header .inner .r_cont{display: flex; align-items: center;}
#header .inner .r_cont .kakao{margin-right: 25px;}
#header .inner .r_cont .kakao a{display: flex; align-items: center; gap: 5px;}
#header .inner .r_cont .kakao a .ico{}
#header .inner .r_cont .kakao a .ico img{width: 30px; border-radius: 50%;}
#header .inner .r_cont .kakao a .t{color: #000; font-size: 16px;}
#header .inner .r_cont .reser{margin-right: 25px; padding-right: 25px; border-right: 1px solid #ccc;}
#header .inner .r_cont .reser a{font-size: 16px; color:#000; display: flex; align-items: center; gap:3px; line-height: 1em;}
#header .inner .r_cont .reser a svg{width: 23px; height: auto;}
#header .inner .r_cont .menuToggle{display: flex; align-items: center; gap:12px;}
#header .inner .r_cont .menuToggle p{font-size: 15px; font-weight: 600; color:#000;}
#header .inner .r_cont .menuToggle .hambug{display: flex; flex-direction: column; height: 22px; justify-content: space-between;}
#header .inner .r_cont .menuToggle .hambug li{width: 40px; height: 2px; background-color: #000;}
#header .inner .r_cont .menuToggle .hambug li.t{}
#header .inner .r_cont .menuToggle .hambug li.m{}
#header .inner .r_cont .menuToggle .hambug li.b{}

#header .inner .mo_kakao{display: none;}

@media all and (max-width:1280px){
    #header{height: 80px;}
    #header .inner .l_cont{flex-wrap: wrap; width: 100%; gap: 0; padding-top: 30px; margin-top: auto; justify-content: center;}
    #header .inner .l_cont #logo a{height: 45px;}
    #header .inner .l_cont .pcGnb{width: 100%; text-align: center;}
    #header.onss .inner .l_cont .pcGnb{display: none;}
    #header .inner .l_cont .pcGnb > ul{justify-content: center;}
    #header .inner .r_cont{position: absolute; right: 0;}
    #header .inner .r_cont .reser{margin-right: 20px; padding-right: 20px;}
    #header .inner .r_cont .reser a{font-size: 15px;}
    #header .inner .r_cont .reser a svg{width: 21px;}
    #header .inner .r_cont .menuToggle p{font-size: 14px;}
    #header .inner .r_cont .menuToggle .hambug{height: 20px;}
    #header .inner .r_cont .menuToggle .hambug li{width: 36px;}
}
@media  all and (max-width:1024px) {
    #header .inner .r_cont .kakao{display: none;}
    #header .inner .mo_kakao{display: block; position: absolute; left: 0;}
    #header .inner .mo_kakao a .ico img{width: 40px; border-radius: 50%;}
}
@media  all and (max-width:768px) {
    #header .inner .l_cont .pcGnb > ul{gap: 0; justify-content: space-around;}
    #header .inner .r_cont .reser{display: none;}



}
@media  all and (max-width:500px) {
    #header{height: 70px;}
    #header .inner .l_cont{padding-top: 20px;}
    #header .inner .l_cont .pcGnb > ul > li > div > span > a{font-size: 15px; line-height: 70px; }
    #header .inner .l_cont .pcGnb > ul > li > ul{top: 50px;}
    #header .inner .l_cont #logo a{height: 41px; background-position: center center;}
    #header .inner .r_cont .reser{display: none;}
    #header .inner .r_cont .menuToggle .hambug{height: 18px;}
    #header .inner .r_cont .menuToggle .hambug li{width: 34px;}
}



/* link */
.link{display: flex; justify-content: flex-end; margin-top: -60px;}
.link li{}
.link li a{display: flex; height: 50px; align-items: center; justify-content: center; padding: 0 25px;  gap: 10px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.link li:nth-child(1) a{color:#000; background-color: #f3f3f3;}
.link li:nth-child(2) a{color:#fff; background-color: #e9436b;}
.link li:nth-child(3) a{color:#fff; background-color: #080808;}
.link li a .icon{}
.link li a .icon img{}
.link li a p{font-size: 15px; font-weight: 600;}

@media  all and (max-width:768px) {
    .link li{width: 100%;}
    .link li a{width: 100%; height: 47px; padding: 0 20px; gap:7px;}
    .link li a p span{display: none;}
}
@media  all and (max-width:500px) {
    .link li a{padding: 0 15px;}
    .link li a p{font-size: 14px;}
    .link li a .icon img{width: 20px; height: 20px;}
}


.moGnb .mo_bottom .mbt_kakao{display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        background-color: #f7e409;
        color: #000;
        padding: 9px 28px;
        border-radius: 30px;
        transition: all 0.3s ease; margin-right: 10px;}
        .moGnb .mo_bottom .mbt_kakao .ico img{height: 30px;}

/* footer */
#footer {background-color: #080808; padding: 60px 0 80px;}
#footer .inner{display: flex; justify-content: space-between;}
#footer .inner .l_cont{display: flex; gap:70px;}
#footer .inner .l_cont .f_logo{}
#footer .inner .l_cont .f_logo img{height: 54px; filter: invert(1) brightness(10);}
#footer .inner .l_cont .info{}
#footer .inner .l_cont .info span{display: inline-block; font-size: 16px; opacity: 0.6; margin-right: 40px; color:#fff; margin-bottom: 12px;}
#footer .inner .l_cont .copy{opacity: 0.3; font-weight: 300; color:#fff; margin-top: 40px;}
#footer .inner .r_cont{text-align: right; color:#fff;}
#footer .inner .r_cont h4{font-size: 18px; font-weight: 700;}
#footer .inner .r_cont h3{font-size: 32px; margin: 5px 0;}
#footer .inner .r_cont p{font-size: 16px; font-weight: 600; opacity: 0.4; margin-bottom: 10px;}
#footer .inner .r_cont a.btn{font-size: 15px; display: inline-block; line-height: 40px; border: 1px solid rgba(255,255,255,0.5); padding: 0 32px; color:#fff; margin-top: 20px; border-radius: 4px;}

@media all and (max-width:1280px) {
    #footer .inner .l_cont{gap:50px;}
    #footer .inner .l_cont .f_logo img{height: 45px;}
    #footer .inner .l_cont .info span{margin-right: 30px; margin-bottom: 10px;}
    #footer .inner .l_cont .copy{margin-top: 30px;}
    #footer .inner .r_cont h4{font-size: 17px;}
    #footer .inner .r_cont h3{font-size: 28px;}
}
@media all and (max-width:1024px) {
    #footer .inner .l_cont{flex-direction: column; gap:30px;}
    #footer .inner .l_cont .copy{margin-top: 20px;}
}
@media all and (max-width:768px) {
    #footer{padding: 50px 0 70px;}
    #footer .inner{flex-direction: column-reverse;}
    #footer .inner .l_cont .f_logo img{height: 41px;}
    #footer .inner .r_cont{text-align: left; width: 100%; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1);}
    #header .inner .r_cont .info span{font-size: 15px; margin-right: 20px;}
    #header .inner .r_cont h4{font-size: 16px;}
    #header .inner .r_cont h3{font-size: 25px;}
    #header .inner .r_cont p{font-size: 15px;}
}

/* ==========================================================================
   Full screen overlay & Mobile GNB (moGnb) styling
   ========================================================================== */
.moGnb {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
}

.moGnb.active {
    display: flex;
    opacity: 1;
}

/* 내부 정렬 스택 */
.moGnb .moGnb_inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 40px 60px;
    box-sizing: border-box;
    overflow-y: auto;
}

.moGnb .moGnb_inner .mo_menu_box {
    flex: 1;
}

/* PC 버전 전체메뉴 스타일 (1281px 이상) */
@media all and (min-width: 1281px) {
    .moGnb .moGnb_inner {
        justify-content: center;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .moGnb .moGnb_inner .mo_menu_box {
        display: flex;
        align-items: center;
        width: 100%;
    }
    .moGnb .gnb_dp1_wrap {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* 5개 카테고리 그리드 */
        gap: 50px;
        width: 100%;
        padding: 0;
        list-style: none;
    }
    .moGnb .gnb_dp1 {
        text-align: left;
    }
    .moGnb .gnb_dp1 > div > span > a {
        font-size: 26px;
        font-weight: 700;
        color: #111;
        display: block;
        margin-bottom: 25px;
        border-bottom: 2px solid #ceb99a;
        padding-bottom: 12px;
    }
    .moGnb .gnb_dp1 > ul {
        padding: 0;
        list-style: none;
        display: block !important; /* PC에서는 아코디언 없이 항상 노출 */
    }
    .moGnb .gnb_dp1 > ul > li {
        margin-bottom: 15px;
    }
    .moGnb .gnb_dp1 > ul > li > a {
        font-size: 17px;
        font-weight: 500;
        color: #666;
        transition: all 0.3s ease;
    }
    .moGnb .gnb_dp1 > ul > li > a:hover {
        color: #ceb99a;
        padding-left: 5px;
    }
    
    /* PC 오버레이 하단 영역 */
    .moGnb .mo_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 60px;
        padding-top: 30px;
        border-top: 1px solid #eaeaea;
        width: 100%;
    }
    .moGnb .mo_bottom .mo_reser {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        background-color: #ceb99a;
        color: #fff;
        padding: 14px 28px;
        border-radius: 30px;
        transition: all 0.3s ease;
        margin-right: auto;
    }
    
    .moGnb .mo_bottom .mo_reser:hover {
        background-color: #bfa885;
        transform: translateY(-2px);
    }
    .moGnb .mo_bottom .mo_sns {
        display: flex;
        gap: 20px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .moGnb .mo_bottom .mo_sns li a img {
        width: 22px;
        height: 22px;
        transition: transform 0.3s ease;
    }
    .moGnb .mo_bottom .mo_sns li a:hover img {
        transform: scale(1.15);
    }
}

/* 태블릿 및 모바일 토글메뉴 스타일 (1280px 이하) */
@media all and (max-width: 1280px) {
    .moGnb .moGnb_inner {
        padding-top: 100px;
        padding-bottom: 40px;
    }
    .moGnb .gnb_dp1_wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding: 0;
        list-style: none;
    }
    .moGnb .gnb_dp1 {
        width: 100%;
        border-bottom: 1px solid #f2f2f2;
    }
    .moGnb .gnb_dp1 > div > span > a {
        font-size: 20px;
        font-weight: 700;
        color: #111;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        transition: color 0.3s ease;
    }
    
    /* 1차 메뉴 토글 화살표 */
    .moGnb .gnb_dp1 > div > span > a::after {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-right: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
        transform: rotate(45deg);
        transition: transform 0.3s ease, border-color 0.3s ease;
        margin-right: 5px;
    }
    
    .moGnb .gnb_dp1 > div > span > a.on {
        color: #ceb99a;
    }
    .moGnb .gnb_dp1 > div > span > a.on::after {
        transform: rotate(-135deg);
        border-color: #ceb99a;
    }
    
    /* 모바일 2차 메뉴 기본 숨김 */
    .moGnb .gnb_dp1 > ul {
        display: none;
        padding: 0 0 20px 10px;
        list-style: none;
    }
    .moGnb .gnb_dp1 > ul > li {
        margin-bottom: 12px;
    }
    .moGnb .gnb_dp1 > ul > li:last-child {
        margin-bottom: 0;
    }
    .moGnb .gnb_dp1 > ul > li > a {
        font-size: 16px;
        color: #666;
        font-weight: 500;
        transition: color 0.3s ease;
        display: block;
        padding: 5px 0;
    }
    .moGnb .gnb_dp1 > ul > li > a:hover {
        color: #ceb99a;
    }
    
    /* 모바일 하단 영역 */
    .moGnb .mo_bottom {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 40px;
        padding-top: 30px;
        border-top: 1px solid #f2f2f2;
        width: 100%;
        align-items: center;
    }
    .moGnb .mo_bottom .mo_reser {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 600;
        background-color: #ceb99a;
        color: #fff;
        padding: 12px 0;
        width: 100%;
        max-width: 320px;
        border-radius: 30px;
        transition: background-color 0.3s ease;
    }

    .moGnb .mo_bottom .mbt_kakao{width: 100%; max-width: 320px; justify-content: center;}
    .moGnb .mo_bottom .mo_sns {
        display: flex;
        gap: 25px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .moGnb .mo_bottom .mo_sns li a img {
        width: 28px;
        height: 28px;
    }
}

/* 햄버거 메뉴 애니메이션 효과 */
#header .inner .r_cont .menuToggle {
    cursor: pointer;
    position: relative;
    z-index: 1000;
}

#header .inner .r_cont .menuToggle .hambug {
    position: relative;
}

#header .inner .r_cont .menuToggle .hambug li {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center;
}

/* Active 상태 트랜스폼 */
#header .inner .r_cont .menuToggle.active .hambug li.t {
    transform: translateY(10px) rotate(45deg);
    background-color: #111;
}
#header .inner .r_cont .menuToggle.active .hambug li.m {
    opacity: 0;
}
#header .inner .r_cont .menuToggle.active .hambug li.b {
    transform: translateY(-10px) rotate(-45deg);
    background-color: #111;
}

@media all and (max-width: 1280px) {
    #header .inner .r_cont .menuToggle.active .hambug li.t {
        transform: translateY(9px) rotate(45deg);
    }
    #header .inner .r_cont .menuToggle.active .hambug li.b {
        transform: translateY(-9px) rotate(-45deg);
    }
}

@media all and (max-width: 500px) {
    #header .inner .r_cont .menuToggle.active .hambug li.t {
        transform: translateY(8px) rotate(45deg);
    }
    #header .inner .r_cont .menuToggle.active .hambug li.b {
        transform: translateY(-8px) rotate(-45deg);
    }
}