@charset "utf-8";

@font-face {
    font-family: 'NohHaeChan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/ROEHOE-CHAN.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* layout */
html, body { height:100%; background-color: #f8f9f8;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
body.on{overflow-y: hidden;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.inner {	width:1820px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1480px;	position:relative;	margin-left:auto;	margin-right:auto;}
.ss-inner {	width:1280px;	position:relative;	margin-left:auto;	margin-right:auto;}


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

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

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


/* header */
#header{height: 100px; background-color: #f8f9f8; width: 100%; position: fixed; top: 0; left: 0; z-index: 999;}
#header.on{background: transparent;}
#header.onss{background: #f8f9f8;}
#header.onn{background: #f8f9f8;}
#header.onn::before{content: ''; background-color: #f8f9f8; top: 100px; position: fixed; height: 200px; width: 100%; border-top: 1px solid #ececec;}
#header .inner{display: flex; justify-content: space-between; align-items: center; height: 100%;}
#header .inner #logo{}
#header .inner #logo a{}
#header .inner #logo a img{}
#header .inner .pcGnb{position: absolute; left: 50%; transform: translateX(-50%); width: max-content;}
#header .inner .pcGnb > ul{display: flex; align-items: center;}
#header .inner .pcGnb > ul > li{position: relative; padding: 0 30px;}
#header .inner .pcGnb > ul > li > div{}
#header .inner .pcGnb > ul > li > div > a{display: block; line-height: 98px; font-size: 18px; font-weight: 700; color: #000; border-bottom: 2px solid transparent;}
#header.on .inner .pcGnb > ul > li > div > a{color: #fff;}
#header.on.onss .inner .pcGnb > ul > li > div > a{color: #000;}
#header.on.onn .inner .pcGnb > ul > li > div > a{color: #000;}
#header .inner .pcGnb > ul > li:hover > div > a{color: #55a838; border-bottom: 2px solid #55a838;}
#header .inner .pcGnb > ul > li > ul{display: none; position: absolute; text-align: center; left: 50%; transform: translateX(-50%); min-width: max-content; padding: 20px 0; width: 100%;}
#header .inner .pcGnb > ul > li > ul > li{}
#header .inner .pcGnb > ul > li > ul > li > a{ font-size: 16px; color: #555555; line-height: 40px; display: block;}
#header .inner .pcGnb > ul > li > ul > li:hover > a{color: #55a838;}
#header .inner .r_menu{}
#header .inner .r_menu ul{display: flex; gap:10px;}
#header .inner .r_menu ul li{}
#header .inner .r_menu ul li a{display: block; line-height: 50px; padding: 0 22px; border-radius: 8px; font-size: 15px; font-weight: 700;}
#header .inner .r_menu ul li a.btn1{color: #444444; border: 1px solid #dddddd;}
#header .inner .r_menu ul li a.btn2{background-color: #55a838; color: #fff;}
#header .inner .r_menu .menuToggle{display: none; cursor: pointer;}
#header .inner .r_menu .menuToggle i{}

@media all and (max-width:1480px){
	#header .inner #logo a img{max-width: 184px;}
	#header .inner .r_menu ul li a{line-height: 48px; padding: 0 18px;}
	#header .inner .pcGnb > ul > li{padding: 0 25px;}
	#header .inner .pcGnb > ul > li > div > a{font-size: 17px;}
}
/*
@media all and (max-width:1140px){
	#header .inner .pcGnb > ul > li{padding: 0 16px;}
}
*/
@media all and (max-width:1140px){
	#header .inner #logo a img{max-width: 160px;}
	#header{height: 70px;}
	#header .inner .pcGnb{display: none;}
	#header .inner .r_menu{display: flex; align-items: center; gap:20px;}
	#header .inner .r_menu ul li a{line-height: 44px; padding: 0 15px; font-size: 14px;}
	#header .inner .r_menu .menuToggle{display: block;}
	#header .inner .r_menu .menuToggle i{color: #000; font-size: 28px;}
	#header.on .inner .r_menu .menuToggle i{color: #fff;}
	#header.on.onss .inner .r_menu .menuToggle i{color: #000;}
}
@media all and (max-width:768px){
	#header .inner #logo a img{max-width: 156px;}
	#header .inner .r_menu > ul{display: none;}
}
@media all and (max-width:500px){
	
}

.moGnb{display: none;}

@media all and (max-width:1024px){
	.moGnb{position: fixed; height: calc(100vh - 70px); top: 70px; border-top: 1px solid #dedede; z-index: 999; background-color: #fff; width: 100%; padding: 20px; right: -100%; transition: .4s; display: block;}
	.moGnb.on{right: 0;}
	.moGnb > ul.my{display: flex; gap:10px; margin-bottom: 20px;}
	.moGnb > ul.my li{width: 100%; text-align: center;}
	.moGnb > ul.my li a{display: block; line-height: 50px; padding: 0 22px; border-radius: 8px; font-size: 15px; font-weight: 700; width: 100%;}
	.moGnb > ul.my li a.btn1{color: #444444; border: 1px solid #eee;}
	.moGnb > ul.my li a.btn2{background-color: #55a838; color: #fff;}
	.moGnb > ul.gnb{}
	.moGnb > ul.gnb > li{}
	.moGnb > ul.gnb > li + li > div{border-top: 1px solid #dedede;}
	.moGnb > ul.gnb > li > div{cursor: pointer;}
	.moGnb > ul.gnb > li > div > a{display: block; font-size: 18px; color: #000; font-weight: 600; padding: 15px 0; pointer-events: none;}
	.moGnb > ul.gnb > li.click > div > a{pointer-events: auto;}
	.moGnb > ul.gnb > li.on > div > a{color: #55a838;}
	.moGnb > ul.gnb > li > ul{display: none; padding: 20px; background-color: #f8f8f8; margin-bottom: 20px;}
	.moGnb > ul.gnb > li > ul > li{}
	.moGnb > ul.gnb > li > ul > li + li{margin-top: 10px;}
	.moGnb > ul.gnb > li > ul > li > a{}
}

/* footer */
#footer{background-color: #212121; padding: 70px 0 80px;}
#footer .s-inner{}
#footer .s-inner .top{display: flex;}
#footer .s-inner .top .l_cont{width: 70%; display: flex; gap:50px;}
#footer .s-inner .top .l_cont .f_logo{}
#footer .s-inner .top .l_cont .f_logo img{}
#footer .s-inner .top .l_cont .info{}
#footer .s-inner .top .l_cont .info span{display: inline-block; font-size: 16px; font-weight: 300; opacity: 0.5; color: #fff; margin-right: 12px; line-height: 1.8em; word-break: keep-all;}
#footer .s-inner .top .r_cont{width: 30%;}
#footer .s-inner .top .r_cont .list{display: flex; justify-content: flex-end; gap:15px;}
#footer .s-inner .top .r_cont .list li{}
#footer .s-inner .top .r_cont .list li a{font-size: 16px; color: #cdcdcd;}
#footer .s-inner .top .r_cont .list li a b{color: #fff;}
#footer .s-inner .bottom{margin-top: 50px; padding-top: 40px; border-top: 1px solid #383838; display: flex; justify-content: space-between;}
#footer .s-inner .bottom .l_cont{}
#footer .s-inner .bottom .r_cont{}

@media all and (max-width:1480px){
	#footer{padding: 60px 0 70px;}
	#footer .s-inner .top .l_cont{gap:35px;}
	#footer .s-inner .bottom{margin-top: 45px; padding-top: 35px;}
}
@media all and (max-width:1024px){
	#footer .s-inner .top .l_cont{flex-direction: column; width: 60%;}
	#footer .s-inner .top .l_cont .f_logo img{max-width: 178px;}
	#footer .s-inner .top .r_cont{width: 40%;}
}
@media all and (max-width:768px){
	#footer{padding: 50px 0 60px;}
	#footer .s-inner .top{flex-direction: column; gap:40px;}
	#footer .s-inner .top .l_cont{gap:30px; width: 100%;}
	#footer .s-inner .top .l_cont .f_logo img{max-width: 156px;}
	#footer .s-inner .top .l_cont .info span{font-size: 15px;}
	#footer .s-inner .top .r_cont{width: 100%;}
	#footer .s-inner .top .r_cont .list{justify-content: flex-start;}
	#footer .s-inner .top .r_cont .list li a{font-size: 15px;}
	#footer .s-inner .bottom{margin-top: 40px; padding-top: 30px; font-size: 15px; flex-direction: column; gap:10px;}
}
@media all and (max-width:500px){
	#footer{padding: 40px 0 50px;}
}


/* go_top */
.go_top{position: fixed; bottom: 40px; right: 30px; background-color: #55a838; border-radius: 10px; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; flex-direction: column; width: 80px; height: 80px; z-index: 98; cursor: pointer;}
.go_top .arrow{font-family: 'SUIT', sans-serif; font-size: 30px; line-height: 1em; margin-top: -3px;}
.go_top p{font-size: 16px; font-weight: 600;}

@media all and (max-width:1480px){
	.go_top{bottom: 30px; right: 20px; width: 72px; height: 72px;}
	.go_top .arrow{font-size: 27px;}
	.go_top p{font-size: 15px;}
}
@media all and (max-width:1024px){}
@media all and (max-width:768px){
	.go_top{bottom: 3%; right: 3%; width: 60px; height: 60px;}
	.go_top .arrow{font-size: 24px;}
	.go_top p{font-size: 14px;}
}
@media all and (max-width:500px){
	.go_top{bottom: 2%; right: 2%; width: 58px; height: 58px; border-radius: 7px;}
	.go_top .arrow{font-size: 22px;}
	.go_top p{font-size: 13px;}
}