@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:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1450px;	position:relative;	margin-left:auto;	margin-right:auto;}
.w-inner {	width:1820px;	position:relative;	margin-left:auto;	margin-right:auto;}


/* 타블렛 가로 */
@media all and (max-width:1850px) {	
.w-inner {width:94%;}
}
@media all and (max-width:1399px) {	
.inner {width:94%;}
.s-inner {width:94%;}
}

#header{height: 140px; position: fixed; background-color: #fff; top: 0; width: 100%; z-index: 999;display: flex; align-items: center; justify-content: space-between; padding: 0 50px; transition: 0.3s;}
/* #header.on{height: 120px; border-bottom: 1px solid #f0f0f0; transition: 0.3s;} */
#header #logo{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; transition: 0.3s;}
/* #header.on #logo{width: 68px; transition: 0.3s;} */
#header #logo a{}
#header #logo a img{width: 100%;}
#header .pcGnb{}
#header .pcGnb .menu{display: flex; justify-content: center; align-items: center; gap:50px;}
#header .pcGnb .menu li{position: relative;}
#header .pcGnb .menu > li > a{font-size: 1.8rem;color: #7a5f3d; font-weight: 700; display: block; line-height: 100px;}
#header .call a{display: flex; align-items: center;gap: 7px; height: 100%;width: 100%;}
#header .call p img{margin-right: 3px; max-width: 100%;}
#header .call h3{color: #7a5f3d; font-size: 1.8rem;font-family: "Poppins"; font-weight: 600;}
#header .menuToggle{display: none; cursor: pointer;}
.moGnb{display: none;}

@media all and (max-width:1400px){
    #header{height: 120px; padding: 0 30px;}
    #header .pcGnb .menu{gap:40px;}
    #header #logo{width: 74px;}
}
@media all and (max-width:1080px){
    #header{height: 100px; padding: 0 20px;}
    #header #logo{width: 66px;}
    #header .pcGnb .menu{display: none;}
    #header .call{display: flex; align-items: center;gap: 20px;}
    #header .menuToggle{display: block; color: #000;}
    .moGnb{position: fixed; display: block; top: 100px; background-color: rgba(0,0,0,0.8); left: 0; width: 100%; z-index: -999; opacity: 0; height: 100%; visibility: hidden; transition: .2s ease-in-out;}
    .moGnb.on{z-index: 999; opacity: 1; visibility: visible;}
    .moGnb .menu{display: flex; gap:30px 0; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
    .moGnb .menu li{}
    .moGnb .menu li a{color: #fff;font-size: 2rem;}
}
@media all and (max-width:780px){
    #header{height: 80px;}
    #header #logo{width: 54px;}
    #header .call h3{display: none;}
    .moGnb{top: 80px;}
}
@media all and (max-width:480px){
}
/* footer */
#footer {width: 100%;padding: 60px 50px; border-top: 1px solid #e4dfd8; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
#footer .l_cont{display: flex;flex-wrap: wrap; align-items: center;gap: 60px;}
#footer .l_cont .link{display: flex; font-weight: bold; gap: 35px; margin-bottom: 30px;}
#footer .l_cont .link a{color: #7a5f3d; font-size: 1.4rem;}
#footer .l_cont .info{display: flex;gap: 10px 30px; font-size: 1.4rem;color: #7a5f3d; flex-wrap: wrap; width: 480px;opacity: 0.8;}
#footer .l_cont .info span{font-weight: bold; margin-right: 5px;}
#footer .r_cont {text-align: right; font-size: 1.4rem;}
#footer .r_cont ul{display: flex; flex-direction: column; flex-wrap: wrap;}
#footer .r_cont ul li{color: #7a5f3d;}
#footer .r_cont ul li a{color: #7a5f3d;}
#footer .r_cont ul li + li{margin-top: 8px;}
#footer .r_cont ul li:nth-child(3){margin-top: 20px;}

@media all and (max-width:980px){
    #footer .l_cont{justify-content: center; width: 100%;gap: 30px;}
    #footer .l_cont .img{width: 100%;text-align: center;}
    #footer .l_cont img{width: 60px;}
    #footer .l_cont .link{justify-content: center; gap: 25px; margin-bottom: 20px;}
    #footer .l_cont .info{justify-content: center; gap: 5px 20px;}
    #footer .r_cont {text-align: center; width: 100%; margin-top: 20px;}
    #footer .r_cont ul{flex-direction: row; justify-content: center; gap: 0 10px;}
    #footer .r_cont ul li + li{margin-top: 0px;}
    #footer .r_cont ul li:nth-child(3),
    #footer .r_cont ul li:nth-child(4){width: 100%;}
    #footer .r_cont ul li:nth-child(3){margin-top: 10px;}
}
@media all and (max-width:540px){
    #footer {padding: 30px 20px;}
    #footer .l_cont img{width: 45px;}
    #footer .l_cont .info{width: 100%;}
}


#goTopBtn {position: fixed; bottom: 40px; right: 40px; width: 60px; height: 100px; background-color: #000; border: none; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; cursor: pointer; opacity: 0; transition: opacity 0.5s ease;}
#goTopBtn.show {opacity: 1;}
#goTopBtn .line {width: 1px; height: 30px; background-color: rgba(255,255,255,0.2); position: relative; overflow: hidden;}
#goTopBtn .line::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; animation: fillDown 3s infinite;}
#goTopBtn .txt {color: #fff; font-size: 1.4rem; font-weight: 600; font-family: 'Poppins'; margin-top: 10px;}
@keyframes fillDown {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(100%);}
}

@media all and (max-width:1280px){
    #goTopBtn {bottom: 20px; right: 20px;}
}
@media all and (max-width:580px){
    #goTopBtn {width: 40px; height: 40px; border-radius: 100px; bottom: 10px; right: 10px;}
    #goTopBtn .line {display: none;}
    #goTopBtn .txt {font-size: 1.2rem; margin-top: 0px;}
}


.quick{position: fixed; z-index: 99; bottom: 40px; right: 40px; display: flex; flex-direction: column; gap:10px; transition: .2s;}
.quick.show{bottom: 150px;}
.quick li{}
.quick li a{}
.quick li a img{max-width: 100%;}

@media all and (max-width:1280px){
	.quick{right: 20px; bottom: 20px;}
	.quick.show{bottom:130px;}
}
@media all and (max-width:580px){
	.quick{right: 10px; bottom: 10px;}
	.quick.show{bottom: 60px;}
	.quick li a img{max-width: 40px;}
}