@charset "utf-8";

:root {
    --main-font: "Arita-dotum", sans-serif;
    --sub-font: "DM Serif Display", serif;
    --main-color: #758246;
    --sub-color: #a89079;
    --base-color: #67625e;
}

/* 공통사항 */
body { font-family: 'Arita-dotum', sans-serif; font-size: 1.6rem; line-height: 1.5; color: #333; overflow-x: hidden; }
.inner { max-width: 1640px; padding: 0 20px; margin: 0 auto; }


/* header */
#header { transition: all 0.5s; z-index: 3; position: absolute; left: 0; top: 0; width: 100%; padding: 20px 0 0; color: #fff; }
#header.fix { position: fixed; left: 0; top: 0; width: 100%; z-index: 100; background: var(--sub-color); }
#header .inner { display: flex; justify-content: space-between; align-items: center; max-width: 1740px; }

#header h1 img { display: block; }

#header nav { margin: 0 auto 0 100px; }
#header .gnb { display: flex; }
#header .gnb > li { position: relative; }
#header .gnb > li::before { transition: all 0.5s; content: ""; display: block; width: 8px; height: 8px; background: var(--main-color); border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); top: -5px; opacity: 0; }
#header .gnb > li:hover::before { opacity: 1; top: 5px; }
#header .gnb > li > a { display: block; padding: 20px 40px; font-size: 2rem; }

#header .gnb .depth2 { display: none; position: absolute; width: 500px; z-index: 99; }
#header .gnb .depth2 li { display: inline-block; }
#header .gnb .depth2 li a { display: block; padding: 15px; color: #fff; transition: all 0.5s; }

#header .depth2_bg { display: none; width: 100%; height: 55px; background: var(--main-color); position: absolute; left: 0; z-index: 98; }

#header .util { display: flex; gap: 30px; }
#header .util .btn_search { width: 24px; height: 24px; font-size: 0; background: url('../images/common/icon_search_w.svg') no-repeat center; cursor: pointer; }
#header .util .btn_search.active { background: url('../images/common/icon_close_w.svg') no-repeat center; }
#header .util .btn_menu { width: 24px; height: 24px; font-size: 0; background: url('../images/common/icon_menu_w.svg') no-repeat center; cursor: pointer; }
#header .util .cart { width: 24px; height: 24px; font-size: 0; background: url('../images/common/icon_cart_w.svg') no-repeat center; }


#header.active { background: #fff; color: #333; }
#header.active h1 { filter: invert(70%); }
#header.active .gnb > li:hover > a { color: var(--main-color); }
#header.active .util { filter: invert(80%); }



.mgnb_wrap { display: none; position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 100%; background: url('../images/common/mgnb_bg.jpg') no-repeat center / cover; }
.mgnb_wrap .mgnb_inner { position: absolute; right: 0; top: 0; width: 50%; height: 100%; background: #fff; color: #000; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.1); }
.mgnb_wrap .mgnb { width: 70%; border-top: 1px solid rgba(0,0,0,0.8); }
.mgnb_wrap .mgnb > li { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 30px 0; }
.mgnb_wrap .mgnb > li > a { pointer-events: none; display: block; font-size: 3rem; }
.mgnb_wrap .mdepth2 { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 30px; font-size: 1.8rem; opacity: 0.5; }
.mgnb_wrap .mgnb_close { background: transparent; width: 30px; height: 30px; cursor: pointer; position: absolute; right: 20px; top: 20px; font-size: 0; }


@media (max-width:1200px) {
    #header { height: 60px; }
    #header h1 img { width: 80px; }
    #header .gnb { display: none; }
    #header .util > :not(.btn_menu) { display: none; }
    .mgnb_wrap .mgnb_inner { width: 100%; }
    .mgnb_wrap .mgnb > li > a { font-size: 2.5rem; }
    .mgnb_wrap .mdepth2 { font-size: 1.6rem; }
}

@media (max-width:768px) {
    .mgnb_wrap .mgnb { width: 90%; }
    .mgnb_wrap .mgnb > li { padding: 20px 0; }
    .mgnb_wrap .mgnb > li > a { font-size: 2rem; }
    .mgnb_wrap .mdepth2 { font-size: 1.4rem; gap: 20px; }
}


/* search */
.search { display: none; position: absolute; left: 0; width: 100%; background: #fff; border-top: 1px solid #ddd; text-align: center; padding: 100px 0; z-index: 100; }
.search div { display: inline-block; border-radius: 50px; background: #eee; overflow: hidden; width: 30%; min-width: 260px; }
.search input[type="text"] { font-family: var(--main-font); background: #eee; width: calc(100% - 60px); height: 50px; font-size: 1.6rem; padding: 0 20px; }
.search input[type="submit"] { background: url('../images/common/search.png') no-repeat center center; font-size: 0; width: 50px; height: 50px; cursor: pointer; }



/* footer */
#footer { border-top: 1px solid #ddd; padding: 100px 0; }
#footer .inner { display: flex; justify-content: space-between; flex-wrap: wrap; }
#footer .footer_link { display: flex; flex-wrap: wrap; gap: 30px; }
#footer .footer_txt { padding: 20px 0; opacity: 0.6; }
#footer .tel { text-align: right; }
#footer .tel span { font-weight: 700; font-size: 3rem; }
#footer .copy { opacity: 0.4; padding: 30px 0 0; }

@media (max-width:1024px) {
    #footer { padding: 50px 0; font-size: 1.4rem; }
    #footer .inner { flex-direction: column; }
    #footer .footer_link { gap: 10px 20px; }
    #footer .tel { text-align: left; }
}