@charset "utf-8";
/* CSS Document */

: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; }
#wrap { min-width: 300px;}
.inner { max-width: 1700px; padding: 0 5%; margin: 0 auto; }

/* header */
header { z-index: 3; position: absolute; left: 0; top: 0; width: 100%; padding: 10px 0 0; }
header .inner { display: flex; justify-content: space-between; align-items: center; max-width: 100%; }

header h1 a { display: block; width: 116px; height: 40px; background: url('../images/common/logo_w.png') no-repeat 0 / 100%; font-size: 0; }

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: #758246; border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); top: -10px; opacity: 0; }
header .gnb > li:hover::before { opacity: 1; top: 0; }
header .gnb > li > a { color: #fff; display: block; padding: 20px 40px; font-size: 2rem; }

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

header .depth2_bg { width: 100%; height: 55px; background: #758246; position: absolute; left: 0; z-index: 98; }

header .util { display: flex; align-items: center; gap: 20px; }
header .util .btn_search { width: 24px; height: 24px; border: 0; font-size: 0; background: url('../images/common/icon_search_w.svg') no-repeat center / 22px; cursor: pointer; }
header .util .btn_search.active { background: url('../images/common/icon_close.svg') no-repeat center / 22px !important; }
header .util .btn_menu { width: 24px; height: 24px; border: 0; font-size: 0; background: url('../images/common/icon_menu_w.svg') no-repeat  center / 22px; cursor: pointer; }
header .util a.cart { width: 24px; height: 24px; font-size: 0; background: url('../images/common/icon_bag_w.svg') no-repeat  center / 22px; }


header.active { background: #fff; }
header.active h1 a { display: block; width: 116px; height: 40px; background: url('../images/common/logo.png'); font-size: 0; }
header.active .gnb > li > a { color: #333; }
header.active .gnb > li:hover > a { color: #758246; }
header.active .util .btn_search { background: url('../images/common/icon_search.svg') no-repeat center / 22px; }
header.active .util .btn_menu { background: url('../images/common/icon_menu.svg') no-repeat  center / 22px; }
header.active .util a.cart { background: url('../images/common/icon_bag.svg') no-repeat  center / 22px; }

.mgnb_wrap { display: flex; text-align: center; width: 100%; height: 100%; background: url('../images/common/mgnb_bg.png') no-repeat center / cover; position: fixed; left: 0; top: 0; z-index: 999; padding: 100px 5%; overflow: auto; }
.mgnb_wrap .mgnb_inner { width: 100%; }
.mgnb_wrap .tit { padding: 0 0 100px; }
.mgnb_wrap .mgnb { display: flex; flex-wrap: wrap; width: 100%; }
.mgnb_wrap .mgnb > li { width: calc(100% / 4); margin: 0 0 50px; }
.mgnb_wrap .mgnb > li > a { /*pointer-events: none;*/ display: block; font-size: 3rem; color:#FFF; padding: 0 0 10px; }
.mgnb_wrap .mgnb > li > a::before { content: ''; display: block; width: 8px; height: 8px; background: #fff; border-radius: 50%; margin: 0 auto 10px; opacity: 0.5; }
.mgnb_wrap .mdepth2 li a { display: block; padding: 5px 0; color: #fff; font-size: 2rem; opacity: 0.5; }
.mgnb_wrap .mgnb_close { border: 0; padding: 10px; background: #000; color: #fff; cursor: pointer; position: absolute; right: 0; top: 0; font-size: 2.5rem; }


/* search */
.search { 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: 'Arita-dotum', sans-serif; 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; }


@media (max-width:1200px) {
    header h1 a { width: 80px; height: 28px; }
    header .gnb { display: none; }
    header .util > :not(.btn_menu) { display: none; }
}

@media (max-width:768px) {
    .mgnb_wrap { padding: 50px 5%; }
    .mgnb_wrap .tit { padding: 0 0 50px; }
    .mgnb_wrap .mgnb { flex-direction: column; }
    .mgnb_wrap .mgnb > li { width: 100%; border: 0; margin: 0 0 30px; }
    .mgnb_wrap .mgnb > li:last-child { margin: 0 0 100px; }
    .mgnb_wrap .mdepth2 { display: none; }
    .mgnb_wrap .mgnb > li > a { font-size: 2.5rem; }
    .mgnb_wrap .mdepth2 li a { font-size: 1.6rem; }
}



/* footer */
#footer { border-top: 1px solid #ddd; padding: 100px 0; background: #fff; }
#footer .inner { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 100%; }
#footer .footer_link { display: flex; flex-wrap: wrap; gap: 30px; }
#footer address { padding: 20px 0; opacity: 0.5; }
#footer .call { text-align: right; }
#footer .call span { font-weight: 700; font-size: 3rem; }
#footer .copy { opacity: 0.3; 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 .call { text-align: left; }
}