@charset "utf-8";


/* layout */
html, body { height:100%; overflow-x: clip !important;}
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;}


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

/* header */
#header{position: fixed; top: 0; right: 0; width: 100%; height: 100px; z-index: 102; border-bottom: 1px solid rgba(255,255,255,0.1); transition: .4s;}
#header.on{background-color: #fff;}
#header.onss{background-color: #fff;}
#header #logo{position: absolute; left: 60px; top: 50%; transform: translateY(-50%); z-index: 2;}
#header #logo a{}
#header #logo a img{max-height: 60px;}
#header #logo a img.off{display: none;}
#header.on #logo a img.on,
#header.onss #logo a img.on{display: none;}
#header.on #logo a img.off,
#header.onss #logo a img.off{display: block;}
#header .pcGnb{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; justify-content: center;}
#header .pcGnb > ul{display: flex; align-items: center; gap:0 65px;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 500; color: #fff; display: block; line-height: 100px;}
#header.on .pcGnb > ul > li > div > a,
#header.onss .pcGnb > ul > li > div > a{color: #000;}
#header .pcGnb > ul > li:hover > div > a{color: #33cc66}
#header .pcGnb > ul > li > ul{position: absolute; display: none; width: 180px; background-color: #3c6;padding: 10px 20px; ;left: 50%; transform: translateX(-50%);}
#header .pcGnb > ul > li > ul > li{text-align: center;}
#header .pcGnb > ul > li > ul > li > a{font-size: 17px; font-weight: 500; color: #333333; display: block; line-height: 40px; color: #fff;}
#header .pcGnb > ul > li > ul > li:hover > a{text-decoration: underline;}
#header .menuToggle{cursor: pointer; position: absolute; right: 60px; top: 50%; transform: translateY(-50%); z-index: 2;}
#header .menuToggle img{max-width: 24px;}
#header.on .menuToggle img,
#header.onss .menuToggle img{filter: invert(1);}
/*
#header .shop{display: flex; flex-direction: column; align-items: center; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); right: 120px; cursor: pointer;}
#header .shop .icon{}
#header .shop .icon img{max-width: 30px;}
#header .shop p{color: #000; margin-top: 5px; font-size: 12px;}
*/

@media all and (max-width:1280px){
	#header #logo{left: 3%;}
	#header .menuToggle{right: 3%;}
	#header .pcGnb > ul{gap:50px;}
}
@media all and (max-width:1024px){
	#header{height: 70px;}
	#header #logo a img{max-height: 44px;}
	#header .pcGnb{display: none;}
	#header .menuToggle img{max-width: 22px;}
}

.mo_bg{}
.moGnb{position: fixed; top: 0; right: -320px; width: 320px; height: 100vh; padding-top: 100px; z-index: -1; background: #33cc66; padding-top: 140px; opacity: 1; transition: .4s;}
.moGnb.on{z-index: 99; right: 0;}
.moGnb .lang{display: none;}
.moGnb .lang li{}
.moGnb .lang li.on{}
.moGnb .lang li a{}
.moGnb .lang li.on a{}
.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;}
.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{text-decoration: underline; font-weight: bold;}
.moGnb .gnb > li > ul > li + li{margin-top: 15px;}
.moGnb{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: 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;}

.moGnb .lang{display: flex; align-items: center; gap:20px; justify-content: flex-end; padding: 0 20px; margin-top: 40px;}
.moGnb .lang li{}
.moGnb .lang li.on{}
.moGnb .lang li a{font-family: "Montserrat", sans-serif; font-size: 16px; color: #000; font-weight: 700; opacity: 0.5; padding-bottom: 4px;}
.moGnb .lang li.on a{opacity: 1; color: #128e39; border-bottom: 1px solid #128e39;}
@media all and (max-width:768px){
	.moGnb{padding-top: 70px;}
/*	.moGnb .gnb > li > div{padding: 15px;}*/
	.moGnb .gnb > li > div > a{font-size: 18px;}
	.moGnb .gnb > li > ul > li > a{padding: 10px 20px; font-size: 16px;}
}


/* footer */
#footer {width:100%;clear:both;	position:relative;	margin:0 auto;	padding: 70px 0 20px; }
#footer .inner{display: flex; justify-content: space-between; flex-wrap: wrap;}
#footer .lt{display: flex; gap: 50px;}
#footer .lt ul{display: flex; gap: 0px 20px; flex-wrap: wrap; width: 570px;}
#footer .lt ul li{font-size: 1.5rem;color: #212121;}
#footer .lt ul li span{margin-right: 10px; font-weight: bold;}
#footer .ntc{display: flex; gap: 30px; font-size: 1.5rem;}
#footer .ntc a{color: #212121;}
#footer .copy{width: 100%; text-align: right; color: #666;font-size: 1.3rem; margin-top: 80px;}

@media all and (max-width:1280px){
    #footer {padding: 50px 0 20px; }
    #footer .lt{gap: 30px;width: 100%;}
    #footer .lt .logo img{width: 150px;}
    #footer .lt ul{width: 535px;}
    #footer .lt ul li{font-size: 1.4rem;}
    #footer .ntc{gap: 20px; font-size: 1.4rem;}
    #footer .copy{margin-top: 50px;}
}
@media all and (max-width:980px){
    #footer .ntc{order: 1; justify-content: center; width: 100%; margin-bottom: 30px;}
    #footer .lt{order: 2;flex-wrap: wrap; justify-content: center;}
    #footer .lt .logo{width: 100%;text-align: center;}
    #footer .lt ul{justify-content: center;}
    #footer .copy{order: 3; text-align: center; margin-top: 30px;}
}
@media all and (max-width:580px){
    #footer {padding: 40px 0 20px; }
    #footer .lt .logo img{width: 130px;}
    #footer .lt ul{width: 100%;}
}


/* quick */
.quick{position: fixed; right: 30px; bottom: 50px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap:10px}
.quick .go_top{width: 60px; height: 60px; background-color: #33cc66; border-radius: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: 700; color: #fff; cursor: pointer; text-align: center;}

@media all and (max-width:1280px){
	.quick{right: 2%; bottom: 2%;}
}
@media all and (max-width:768px){
	.quick{right: 2%; bottom: 2%;}
	.quick .go_top{width: 52px; height: 52px;}
}