/* common */



.inr {max-width: 1400rem;margin:0 auto; width: 92%;}
.wrapper{max-width: 1400rem; margin:0 auto; width: 92%;}

/* header */
#header {z-index:99; position:absolute; width:100%; height:100rem; transition:0.3s}
#header .inr {display: flex; max-width:1650rem; height: 100%; align-items: center; justify-content: space-between; }
#header h1 a {display:block; width:150px; height:38px; background:url(../images/common/logo.svg) no-repeat 50% 0; background-size:100%; font-size:0;}
#header .gnb > li{position: relative; display:inline-block;}
#header .gnb > li > a {display:block; line-height:100px; height:100px; padding:0 28rem; color:#fff; font-size:17rem; font-weight:500;}
#header .gnb > li > .sub_menu{display:none; position:absolute; left:50%; top:80%; transform: translateX(-50%); min-width: 140rem; width:100%; background:#fff; border:1px solid #eee; box-sizing: border-box; z-index:60; border-radius: 0;}
#header .gnb li:hover .sub_menu{display:block; background:#fff; top: 80%; width:100%; animation: submenu 0.3s 1 linear;}
#header .gnb li:hover .hidden {display: none !important;}
#header .gnb .sub_menu{animation: submenu 0.3s 1 linear; transition: ease all .2s;}
#header .gnb .sub_menu li a{display: block; padding:15px 0; color:#111; font-size:14px; text-align:center;}
#header .gnb .sub_menu li a:hover{color:#cbb796;}
#header .area_util {display: flex; align-items: center; gap:28rem;}
#header .area_util > div {display: flex; gap:10rem; align-items: center;}
#header .area_util img {width: 20px;}
#header .area_util a{font-size: 17rem; font-weight: 500; color:#fff; }

/* mobile-menu */
.btn_menu{ width:25px; height:auto;}
.btn_menu span{display:block; width:24px; height:1px; background:#fff; text-align:center;}
.btn_menu span:nth-child(2){margin-top:7px;}
.btn_menu span:nth-child(3){margin-top:7px;}
.m_area_util{margin-top:40px;overflow:hidden;padding:20px; box-sizing:border-box;}
.m_area_util a{display:inline-block; width: 49%; height:31px; box-sizing: border-box; padding:5px 0; margin:2px 0px; border:1px solid #fff; vertical-align:middle; color:#fff; text-align:center; font-size:14px;}
.m_gnb{overflow-y:auto; transform: translateX(100%); position:fixed; top:0px; right:0; max-width:300rem; width: 100%; height:100%; background:#fff; transition:all 0.5s ease-out 0s;z-index:55;}
.m_gnb .header {height: 100rem; border-bottom: 1px solid #eaeaea;}
.m_gnb > ul > li > a{display:block; position:relative; padding:16px 25px; border-bottom: 1px solid #eaeaea; transition:all 0.3s ease 0s;}
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:25px; right:10px; width:11px; height:7px; background:url(../images/common/menu_button.svg) no-repeat 50% 0; transition:all 0.4s ease 0s; background-size:100%;}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > a:hover,
.m_gnb > ul > li > a.active {color: #cbb796; font-weight: 500; }
.m_gnb > ul > li > ul{display:none; background:#efefef; }
.m_gnb > ul > li > ul.hidden {text-indent: 0;}
.m_gnb > ul > li > ul > li{border-bottom:1px solid #dedede;}
.m_gnb > ul > li > ul > li > a {position:relative; display:block; padding:16px 25px; font-size:14px; color:#333; }
.m_gnb > ul > li > ul > li > a:hover {color: #cbb796;}
.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:30px; right:-100%; width:24px; height:23px; font-size:0px; transition:0.8s;}
.m_gnb.active{transform: translateX(0);}
.m_gnb.active .btn_close{opacity:1; right:15px;}
.m_gnb .btn_close:before{content: ''; display:block; position:absolute; top:9px; left:0px;  width:100%; height:1px; background:#333; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:1px; background:#333; bottom: 9px; transform:rotate(-45deg);}
.cover{position: fixed; width: 100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, 0.5); z-index: index 50; display:none;}
.cover.active{display:block;}

#footer {padding: 60rem 0; color: #888; font-size: 14rem; background: #f5f5f5;}
#footer .privacy { padding: 0; color: #aaa; transition: 0.5s;}
#footer .privacy:hover {color: #999; border-bottom: 1px solid #aaa;}
#footer .inr {display: flex; flex-wrap: wrap; gap: 20rem; justify-content: space-between;}
#footer .address address {display: flex; flex-wrap: wrap; gap: 10rem 30rem;}
#footer .address p {margin-top: 12rem; color: #aaa;}

@media all and (max-width:1400px){
	#header .gnb > li > a {padding: 0 26rem;}
	#header .gnb{display:none;}
}

@media all and (max-width:1080px){
	#header .area_util {gap: 20rem;}
	#header{height:80px;}
}

@media all and (max-width:767px){
	body{font-size:15rem;}
	#footer {padding: 50rem 0;}
	#footer .address address {gap:10rem 20rem;}
}

@media all and (max-width:600px){
	.m_gnb.active {max-width: 100%;}
	#header{height:65px;}
	#header h1 a {width: 125px; height: 32px;}
	#header .area_util > div {display: none;}
	.btn_menu span {width: 22px;}
	.btn_menu span:nth-child(2),
	.btn_menu span:nth-child(3) {margin-top: 6px;}
}