@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:1600px;	position:relative;	margin-left:auto;	margin-right:auto; letter-spacing: -0.05em;}
.s-inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; letter-spacing: -0.05em;}


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


/* header */
#header{height: 120px; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; transition: .4s;}
#header .inner{height: 100%; display: flex; align-items: center; justify-content: space-between;}
#header .inner .l_cont{display: flex; align-items: center; gap:80px;}
#header .inner .l_cont #logo{}
#header .inner .l_cont #logo a{display: block; width: 320px; height: 80px; background: url(/images/common/logo.webp) no-repeat left center / contain;}
#header .inner .l_cont .pcGnb{}
#header .inner .l_cont .pcGnb > ul{display: flex; align-items: center; gap:60px;}
#header .inner .l_cont .pcGnb > ul > li{position: relative;}
#header .inner .l_cont .pcGnb > ul > li > div{height: 100%;}
#header .inner .l_cont .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 500; color:#fff; height: 100%; line-height: 120px;}
#header .inner .l_cont .pcGnb > ul > li:hover > div > a{color:var(--color2) !important;}
#header .inner .l_cont .pcGnb > ul > li > ul{position: absolute; display: none; background-color: #34564b; text-align: center; padding: 20px 40px; border-radius: 10px; width: max-content; left: 50%; transform: translateX(-50%); top: 100px;}
#header .inner .l_cont .pcGnb > ul > li > ul > li{}
#header .inner .l_cont .pcGnb > ul > li > ul > li + li{margin-top: 15px;}
#header .inner .l_cont .pcGnb > ul > li > ul > li > a{font-size: 16px; font-weight: 500; color:#fff;}
#header .inner .l_cont .pcGnb > ul > li > ul > li:hover > a{color:var(--color1);}
#header .inner .r_cont{display: flex; align-items: center; gap:50px;}
#header .inner .r_cont .inquiry{}
#header .inner .r_cont .inquiry p{font-size: 13px; color:#fff; margin-bottom: 3px;}
#header .inner .r_cont .inquiry .tel{}
#header .inner .r_cont .inquiry .tel a{font-weight: 800; font-size: 24px; color:var(--color1);}
#header .inner .r_cont .menuToggle{width: 33px; height: 22px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; position: relative; z-index: 1002;}
#header .inner .r_cont .menuToggle span{width: 100%; height: 2px; background-color: #fff; transition: all 0.3s ease;}
#header .inner .r_cont .menuToggle span.t{}
#header .inner .r_cont .menuToggle span.m{}
#header .inner .r_cont .menuToggle span.b{}

/* 토글 버튼 X자 애니메이션 */
#header .inner .r_cont .menuToggle.on span.t { transform: translateY(10px) rotate(45deg); }
#header .inner .r_cont .menuToggle.on span.m { opacity: 0; }
#header .inner .r_cont .menuToggle.on span.b { transform: translateY(-10px) rotate(-45deg); }

/* mobile GNB 기본 숨김 */
.moGnb, .mo_bg {
    display: none;
}

/* PC 해상도 GNB 토글 메뉴 (메뉴 전체 펼침 형태) */
@media all and (min-width: 1281px) {
    .moGnb {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        z-index: 1001;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 150px 50px 100px;
    }
    .moGnb.on {
        visibility: visible;
        opacity: 1;
    }
    .moGnb > ul {
        display: flex;
        justify-content: center;
        gap: 80px;
        width: 100%;
        max-width: 1400px;
    }
    .moGnb > ul > li {
        text-align: left;
        width: 200px;
    }
    .moGnb > ul > li > div > a, .moGnb > ul > li > a {
        font-size: 22px;
        font-weight: 700;
        color: #333;
        display: block;
        margin-bottom: 20px;
        border-bottom: 2px solid #34564b;
        padding-bottom: 10px;
    }
    .moGnb > ul > li > ul {
        display: block; /* PC 버전에서는 항상 보임 */
    }
    .moGnb > ul > li > ul > li {
        margin-top: 12px;
    }
    .moGnb > ul > li > ul > li > a {
        font-size: 16px;
        color: #666;
        transition: color 0.2s;
        font-weight: 500;
    }
    .moGnb > ul > li > ul > li:hover > a {
        color: var(--color1, #34564b);
    }
}

/* 메뉴 활성화 시 헤더 상태 변경 */
#header.onss {
    background-color: #fff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    z-index: 1002 !important;
}
#header.onss .inner .l_cont #logo a {
    background-image: url(/images/common/logo_on.webp) !important;
}
#header.onss .inner .l_cont .pcGnb > ul > li > div > a {
    color: #000 !important;
}
#header.onss .inner .r_cont .inquiry p {
    color: #000 !important;
}
#header.onss .inner .r_cont .menuToggle span {
    background-color: #000 !important;
}

#header.on,#header:hover{background-color: #fff;}
#header.on .inner .l_cont #logo a,#header:hover .inner .l_cont #logo a{background-image: url(/images/common/logo_on.webp);}
#header.on .inner .l_cont .pcGnb > ul > li > div > a,#header:hover .inner .l_cont .pcGnb > ul > li > div > a{color:#000;}
#header.on .inner .r_cont .inquiry p,#header:hover .inner .r_cont .inquiry p{color:#000;}
#header.on .inner .r_cont .menuToggle span,#header:hover .inner .r_cont .menuToggle span{background-color: #000;}

@media all and (max-width:1280px) {
    #header{height: 80px;}
    #header .inner .l_cont #logo a{height: 54px; width: 240px;}
    #header .inner .l_cont .pcGnb{display: none;}
    #header .inner .r_cont{gap:40px;}
    #header .inner .r_cont .inquiry p{font-size: 13px; margin-bottom: 2px;}
    #header .inner .r_cont .inquiry .tel a{font-size: 22px;}
    #header .inner .r_cont .menuToggle{width: 30px; height: 20px; display: flex;}
    #header .inner .r_cont .menuToggle.on span.t { transform: translateY(9px) rotate(45deg); }
    #header .inner .r_cont .menuToggle.on span.b { transform: translateY(-9px) rotate(-45deg); }

    /* body 스크롤 방지 */
    body.on { overflow: hidden; }

    /* 모바일 딤드 배경 */
    .mo_bg {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1000;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .mo_bg.on {
        visibility: visible;
        opacity: 1;
    }

    /* 모바일 메뉴 본체 */
    .moGnb {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        max-width: 80%;
        height: 100%;
        background-color: #fff;
        z-index: 1001;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 80px 20px 40px;
        box-sizing: border-box;
        overflow-y: auto;
        letter-spacing: -0.05em;
    }
    .moGnb.on {
        right: 0;
    }
    
    /* 모바일 아코디언 메뉴 스타일 */
    .moGnb > ul {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .moGnb > ul > li {
        border-bottom: 1px solid #f0f0f0;
    }
    .moGnb > ul > li > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .moGnb > ul > li > div > a {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        display: block;
        padding: 15px 0;
        width: 100%;
    }
    /* 서브메뉴 토글용 화살표 표시 */
    .moGnb > ul > li.has-sub > div::after {
        content: '';
        width: 12px;
        height: 8px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
        transition: transform 0.3s ease;
        pointer-events: none;
        margin-right: 5px;
    }
    .moGnb > ul > li.on.has-sub > div::after {
        transform: rotate(180deg);
    }
    .moGnb > ul > li > ul {
        display: none;
        background-color: #f9f9f9;
        padding: 10px 20px;
        border-top: 1px solid #f0f0f0;
    }
    .moGnb > ul > li > ul > li {
        padding: 10px 0;
    }
    .moGnb > ul > li > ul > li > a {
        font-size: 15px;
        color: #666;
        display: block;
        transition: color 0.2s;
    }
    .moGnb > ul > li > ul > li:hover > a {
        color: var(--color1, #34564b);
    }
}
@media all and (max-width:768px) {
    #header{height: 70px;}
    #header .inner .l_cont #logo a{height: 50px; width: 220px;}
    #header .inner .r_cont .inquiry{display: none;}
}


/* footer */
#footer {background-color: #f8f8f8; padding: 50px 0 80px;}
#footer .s-inner{display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
#footer .s-inner .top{display: flex; justify-content: space-between; width: 100%; align-items: center;}
#footer .s-inner .top .l_cont{display: flex; gap:80px; align-items: center;}
#footer .s-inner .top .l_cont .f_logo{}
#footer .s-inner .top .l_cont .f_logo img{}
#footer .s-inner .top .l_cont .info{}
#footer .s-inner .top .l_cont .info span{display: inline-block; margin-right: 25px; margin-bottom: 10px;}
#footer .s-inner .top .l_cont .info span br{}
#footer .s-inner .top .r_cont{}
#footer .s-inner .top .r_cont .list{}
#footer .s-inner .top .r_cont .list li{}
#footer .s-inner .top .r_cont .list li + li{margin-top: 10px;}
#footer .s-inner .top .r_cont .list li a{font-size: 16px; opacity: 0.7; font-weight: 700;}
#footer .s-inner .bottom{margin-top: 50px; padding-top: 30px; border-top: 1px solid #dfdfdf; width: 100%; font-size: 16px; opacity: 0.5; display: flex; align-items: center; justify-content: space-between;}
#footer .s-inner .bottom .l_cont{}
#footer .s-inner .bottom .l_cont p{}
#footer .s-inner .bottom .r_cont{}
#footer .s-inner .bottom .r_cont p{}

@media  all and (max-width:1280px) {
    #footer .s-inner .top .l_cont{gap:50px;}
    #footer .s-inner .top .l_cont .f_logo img{width: 156px;}
}
@media  all and (max-width:1024px) {
    #footer .s-inner .top .l_cont .info span{margin-right: 20px; margin-bottom: 10px; font-size: 15px;}
    #footer .s-inner .top .r_cont .list{width: 70px;}
}
@media  all and (max-width:768px) {
    #footer{padding: 40px 0 70px;}
    #footer .s-inner .top .l_cont{flex-direction: column; width: 100%; align-items: flex-start; gap:30px;}
    #footer .s-inner .top .l_cont .f_logo img{width: 138px;}
    #footer .s-inner .top .l_cont .info span{margin-right: 15px;}
    #footer .s-inner .top{flex-direction: column; align-items: flex-start;}
    #footer .s-inner .top .r_cont .list{width: 100%; display: flex; margin-top: 20px; gap:20px;}
    #footer .s-inner .top .r_cont .list li + li{margin-top: 0;}
    #footer .s-inner .top .r_cont .list li a{font-size: 15px;}
    #footer .s-inner .bottom{margin-top: 40px; padding-top: 25px; flex-direction: column; gap:12px; align-items: flex-start;}
    #footer .s-inner .bottom > div p{font-size: 15px !important;}
}
@media  all and (max-width:500px) {
    
}