@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;}
.f-inner {	width:100%; max-width: 1920px; position:relative;	margin-left:auto;	margin-right:auto;}

@media all and (max-width:1280px){
	body { position: relative; left: 0; transition: .4s;}
	body.on{overflow-y: hidden; left: -280px;}
}

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

/* header */
#header{height: 100px; width: 100%; position: absolute; top: 0; left: 0; z-index: 100;}
#header .l_header{position: absolute; top: 50%; left: 80px; display: flex; align-items: center; gap:75px; transform: translateY(-50%);}
#header .l_header #logo{filter: grayscale(1) brightness(10);}
#header .l_header #logo a{display: block; width: 314px; height: 42px; background: url(/images/common/logo.webp?v=250318) no-repeat center center / contain;}
#header .l_header .pcGnb{}
#header .l_header .pcGnb > ul{display: flex; align-items: center;}
#header .l_header .pcGnb > ul > li{position: relative;}
#header .l_header .pcGnb > ul > li > div{}
#header .l_header .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 500; color: #fff; padding: 0 25px; display: block; line-height: 100px;}
#header .l_header .pcGnb > ul > li > ul{display: none; position: absolute; background-color: #a5885b; text-align: center; width: 180px; position: absolute; left: 50%; transform: translateX(-50%); padding: 20px 0;}
#header .l_header .pcGnb > ul > li > ul > li{}
#header .l_header .pcGnb > ul > li > ul > li > a{font-size: 17px; font-weight: 500; color: #fff; line-height: 40px; transition: .4s; display: block; width: 100%;}
#header .l_header .pcGnb > ul > li > ul > li:hover > a{opacity: 0.7;}
#header .r_header{position: absolute; right: 80px; top: 50%; transform: translateY(-50%); display: flex; align-items: center;}
#header .r_header .tel{display: flex; align-items: center; gap:12px; cursor: pointer;}
#header .r_header .tel .icon{}
#header .r_header .tel .icon img{max-width: 32px;}
#header .r_header .tel p{font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 600; color: #ffffff;}
#header .r_header .menuToggle{display: none; cursor: pointer;}

@media all and (max-width:1600px){
	#header .l_header{left: 3%; gap:25px;}
	#header .l_header .pcGnb > ul > li > div > a{padding: 0 20px; font-size: 17px;}
	#header .r_header{right: 3%;}
}
@media all and (max-width:1400px){
	#header .l_header{gap:10px;}
	#header .l_header .pcGnb > ul > li > div > a{padding: 0 15px;}
}
@media all and (max-width:1280px){
	#header{height: 70px;}
	#header .l_header #logo a{width: 200px;}
	#header .l_header .pcGnb{display: none;}
	#header .r_header{gap:22px;}
	#header .r_header .menuToggle{display: block;}
	#header .r_header .menuToggle i{color: #fff; font-size: 32px;}
}
@media all and (max-width:768px){
	#header .r_header{gap:16px;}
	#header .r_header .tel .icon img{max-width: 42px;}
	#header .r_header .tel p{display: none;}
}

.moGnb{display: none;}

@media all and (max-width:1280px){
	.mo_bg.on{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 100;}
	.moGnb{position: fixed; top: 0; right: -280px; width: 280px; height: 100vh; padding-top: 100px; z-index: -1; background: #b7945e; padding-top: 140px; opacity: 1; transition: .4s; display: block; z-index: 102;}
	.moGnb.on{z-index: 102; right: 0;}
	.moGnb .gnb{display: grid; grid-template-columns: repeat(3, 1fr);}
	.moGnb .gnb > li{text-align: center; height: calc(50vh - 70px); padding: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); position: relative;}
	.moGnb .gnb > li.active > div::after{content: '↓'; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; color: #fff; font-size: 16px; font-family: 'SUIT', sans-serif;}
	.moGnb .gnb > li > div{margin-bottom: 20px; position: relative;}
	.moGnb .gnb > li > div > a{color:#fff; font-size: 24px; font-weight: 700;}
	.moGnb .gnb > li.active > div > a{pointer-events: none;}
	.moGnb .gnb > li:hover > div > a{color: #fff;}
	.moGnb .gnb > li > ul{display: block; background-color: #9a7b4b;}
	.moGnb .gnb > li > ul > li{}
	.moGnb .gnb > li > ul > li > a{color:#ddd; font-size: 17px; transition: .4s; font-weight: 300;}
	.moGnb .gnb > li > ul > li:hover > a{color: #fff; text-decoration: underline;}
	.moGnb .gnb > li > ul > li + li{margin-top: 15px;}
	.moGnb{overflow-y: scroll; padding-top: 100px;}
	.moGnb .gnb{grid-template-columns: repeat(1, 1fr);}
	.moGnb .gnb > li{height: auto; padding: 0px; text-align: left; cursor: pointer;}
	.moGnb .gnb > li + li{border-top: 1px solid rgba(255,255,255,0.1);}
	.moGnb .gnb > li > div{margin-bottom: 0;}
	.moGnb .gnb > li > div > a{color: #fff; font-size: 20px; width: 100%; display: block; padding: 15px 20px;}
	.moGnb .gnb > li > ul{}
	.moGnb .gnb > li > ul > li{}
	.moGnb .gnb > li > ul > li + li{margin-top: 0;}
	.moGnb .gnb > li > ul > li > a{color: #fff; display: block; width: 100%;padding: 10px 30px;}
	.moGnb .gnb > li > ul{display: none;}
}
@media all and (max-width:768px){
	.moGnb{padding-top: 0px;}
/*	.moGnb .gnb > li > div{padding: 15px;}*/
	.moGnb .gnb > li > div > a{font-size: 17px;}
	.moGnb .gnb > li > ul > li > a{padding: 10px 20px; font-size: 16px;}
}


/* footer */
#footer{background-color: #fff; padding: 65px 0 70px; text-align: center; border-top: 1px solid #eee;}
#footer .inner{}
#footer .inner .f_logo{margin-bottom: 35px;}
#footer .inner .f_logo img{max-width: 314px;}
#footer .inner .info{display: flex; gap:12px 30px; justify-content: center; flex-wrap: wrap;}
#footer .inner .info span{display: flex; gap:10px; font-weight: 500; font-size: 16px; color: #b1aca8;}
#footer .inner .info span b{color: #8e867c; font-weight: 500;}
#footer .inner .copy{font-size: 14px; font-weight: 500; color: #b1aca8; opacity: .7; margin-top: 20px;}

@media all and (max-width:1280px){
	#footer{padding: 60px 0 65px;}
	#footer .inner .f_logo img{max-width: 270px;}
	#footer .inner .info{gap:10px 25px;}
}
@media all and (max-width:1024px){
	#footer{padding: 55px 0 60px;}
}
@media all and (max-width:768px){
	#footer{padding: 50px 0 55px;}
	#footer .inner .f_logo img{max-width: 230px;}
	#footer .inner .info{gap:10px 20px;}
	#footer .inner .info span{font-size: 15px;}
}
@media all and (max-width:500px){
	#footer{padding: 45px 0 50px;}
	#footer .inner .f_logo img{max-width: 200px;}
	#footer .inner .info{gap:10px 15px;}
}