@charset "UTF-8";

header{ background: #FFFFFF; color: #262626; }
.gnb{ text-align: center; overflow: hidden; }
.gnb li{ float: left; }
.gnb li a{ display: block; position: relative; padding: 10px 0 10px 15px; font-size: 12px; line-height: 1em; text-align: center;}
.gnb li a:hover{ color: #e2353f; }
.gnb img{ width: auto; }

.web nav .container{ display:flex; align-items:center; justify-content:center; min-height:118px; }
.top_logo{ float:none; width:220px; flex:0 0 220px; margin-top:0; text-align:left; }
.top_logo a{ display:flex; align-items:center; height:96px; padding:0; }
.top_logo img{ display:block; width:auto; height:auto; max-width:220px; max-height:74px; object-fit:contain; }

nav{ border-bottom: 3px solid #000000;}
nav .menu { float:none; display:flex; align-items:center; justify-content:space-between; flex:1 1 auto; max-width:820px; margin-left:35px; padding:0; }
nav .menu > li{ font-size:15pt;font-weight:600;float:none; position: relative; width:auto; flex:1 1 0;  }
nav .menu > li > a{ display: flex; align-items:center; justify-content:center; position: relative; min-height:96px; padding:0; text-align: center; line-height: 1.15em; }
nav .menu > li > a span{ display: block; }
nav .menu > li:hover > a { color: #e2353f; }
nav .menu > li:nth-child(1) > a span{ border-left: 0; }

/*서브메뉴*/
nav .menu .sub_menu{ font-size:12pt;font-weight:500;display: none; position: absolute; left: 0; top: 96px; z-index: 30; width: 100%; text-align: left; border-top: 3px solid #1C1C1C; background: rgba( 255,255,255,0.8 ); }
nav .menu > li:hover .sub_menu{ display: block; height: auto; padding:10px 0 15px 0; }
nav .menu .sub_menu a { display: block; padding: 5px 15px 0 15px; color: #3f3f3e; }
nav .menu .sub_menu a:hover{ color: #e2353f; }

/*모바일메뉴*/
.mob_nav{ position: fixed; width: 100%; height: 50px; top: 0; z-index: 999; border-bottom:1px solid #ababab; background: #303030; }

html.open { overflow: hidden; } /*메뉴가 열렸을때 본문이 스크롤 되지 않는다.*/
.mob_nav img{ width: auto; height: 30px; }
.mob_nav .mob_logo{ display: block; text-align: center; padding: 10px 0; }
.mob_btn { position: absolute; left: 0px; top: 0px; z-index: 1; width: 50px; height: 50px; background: url("../../img/common/mob_top.png") -50px 0 no-repeat; }/*메뉴 버튼*/
.mob_back { position: absolute; left: 0; top: 0px; z-index: 1; width: 50px; height: 50px; background: url("../../img/common/mob_top.png") 0 0 no-repeat; }

#menu .close { width: 50px; height: 50px; padding: 15px; position: absolute; right: 0px; top: 0px; cursor: pointer; color: #fff; opacity:1; }/*닫기 버튼*/

#menu { width: 100%; height: 100%; background: #4a413b; overflow-x: scroll;
		position: fixed; top: 0px; left: -100%; z-index: 999999; transition: All 0.2s ease; -webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease; } /*메뉴 영역*/

#menu .menu_log{ padding: 14px 20px; text-align: center; background: #3e352e; }
#menu .menu_log img{ width: auto; height: 30px; }
#menu .login { padding: 15px 10px; overflow: hidden; }
#menu .login a{ display: block; text-align: center; line-height: 34px; border-radius: 5px; background: #6c594d; }

#nav-left > li > div { position: relative; padding: 16px 0 16px 10px; font-size: 1.2em; border-bottom: 1px solid #615c58; }
/*#nav-left > li > div:hover { color: #ef4147; border-bottom: 1px solid #e9e9e9; background: #e9e9e9; }*/
#nav-left .open_menu div:after { content: "\e914"; position: absolute; right: 15px; font-family: 'xeicon'; width: 16px; height: 16px; line-height: 15px; text-align: center; }

#nav-left .open_menu.open > div{ color: #fff; }
#nav-left .open_menu.open > div:after { content: "\e91b"; font-family: 'xeicon'; }

/* .nav .open > a, .nav .open>a:focus, .nav .open>a:hover{ color: #fff; border-bottom: 1px solid #fd8a8a; background-color: #fa4b4b; } */

/* 모바일 서브 */
#nav-left > li > ul{display: none;}
#nav-left > .open_menu > ul{ display: none; border-bottom: 1px solid #615c58; background: #322c28; }
#nav-left > .open_menu > ul > li > a{ display: block; position: relative; padding: 10px 0 10px 30px; font-size: 1.2em; }
#menu.open { left: 0px; }

.page_cover { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.4); z-index: 99999; display: none; }
.page_cover.open { display: block; }

footer{ padding: 20px 0; font-size: 12px; color: #9d9d9c; background: #575756; }
footer .container{ width:min(1600px, calc(100% - 48px)); max-width:none; }
footer img{ width: auto; }
footer .foot_logo{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding: 1rem 0; border-bottom: 1px solid #9d9d9c; }
footer .footer-brand{ flex:0 0 300px; min-width:0; }
footer .footer-brand img{ display:block; width:auto; max-width:220px; height:auto; max-height:64px; object-fit:contain; }
footer .footer-banner-list{ display:flex; flex:1 1 auto; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:clamp(8px, 1.2vw, 22px); min-width:0; overflow:hidden; }
footer .footer-banner-item{ display:inline-flex; flex:1 1 0; align-items:center; justify-content:center; min-width:0; line-height:0; }
footer .footer-banner-list img{ display:block; width:auto; height:auto; max-width:100%; max-height:clamp(34px, 3.2vw, 58px); object-fit:contain; }
footer .com{ padding: 0.7rem 0 0 0; }

footer .top { display: none; position: absolute; top: 0; right: 5px; width: 50px; height: 50px; line-height: 1em; padding: 9px 0; font-size: 14px; text-align: center; color: #fff; border-radius: 30px; background: #3e352e; }
@media (max-width:991px) {
	footer .container{ width:calc(100% - 24px); }
	footer .foot_logo{ gap:14px; }
	footer .footer-brand{ flex:0 1 170px; }
	footer .footer-brand img{ max-width:170px; max-height:50px; }
	footer .footer-banner-list{ gap:8px; }
	footer .footer-banner-list img{ max-height:34px; }
	footer .top { display: block; padding: 12px 0; font-size: 12px; }
}
@media (max-width:520px) {
	footer .foot_logo{ gap:8px; }
	footer .footer-brand{ flex:0 1 92px; }
	footer .footer-brand img{ max-width:92px; max-height:34px; }
	footer .footer-banner-list{ gap:5px; }
	footer .footer-banner-list img{ max-height:24px; }
}

/* 2026-07-11: 데스크톱 하위메뉴 디자인 개선 */
@media (min-width: 992px) {
    .web nav,
    .web nav .container,
    .web nav .menu,
    .web nav .menu > li {
        overflow: visible;
    }

    nav .menu .sub_menu {
        display: block;
        position: absolute;
        left: 50%;
        top: calc(100% - 5px);
        z-index: 1000;
        min-width: 210px;
        max-width: 380px;
        height: auto;
        margin: 0;
        padding: 12px;
        text-align: left;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.45;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(45, 45, 45, 0.12);
        border-top: 0;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 16px 38px rgba(20, 20, 20, 0.16);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 12px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }

    nav .menu .sub_menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 4px;
        background: linear-gradient(90deg, #1f1f1f 0%, #e2353f 50%, #1f1f1f 100%);
    }

    nav .menu > li:hover .sub_menu,
    nav .menu > li:focus-within .sub_menu {
        height: auto;
        padding: 12px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    nav .menu .sub_menu > li {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    nav .menu .sub_menu > li + li {
        margin-top: 4px;
    }

    nav .menu .sub_menu a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 42px;
        padding: 10px 13px;
        color: #333;
        line-height: 1.35;
        letter-spacing: -0.02em;
        border-radius: 9px;
        background: transparent;
        transition: color .16s ease, background-color .16s ease, transform .16s ease;
    }

    nav .menu .sub_menu a::before {
        content: "";
        flex: 0 0 6px;
        width: 6px;
        height: 6px;
        margin-right: 10px;
        border-radius: 50%;
        background: #c8c8c8;
        transition: background-color .16s ease, transform .16s ease;
    }

    nav .menu .sub_menu a:hover,
    nav .menu .sub_menu a:focus {
        color: #c82333;
        background: #fff1f2;
        outline: none;
        transform: translateX(3px);
    }

    nav .menu .sub_menu a:hover::before,
    nav .menu .sub_menu a:focus::before {
        background: #e2353f;
        transform: scale(1.2);
    }
}