@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;}


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

/* header */
#header{height: 90px; width: 100%; position: fixed; top: 0; left: 0; z-index: 200; border-bottom: 1px solid rgba(255,255,255,0.3);}
#header #logo{position: absolute; left: 80px; top: 50%; transform: translateY(-50%);}
#header #logo a{display: block; width: 201px; height: 46px; background: url(/images/common/logo.webp) no-repeat center center / contain; filter: grayscale(1) brightness(10);}
#header .pcGnb{display: flex; justify-content: center; align-items: center;}
#header .pcGnb > ul{display: flex; justify-content: center; align-items: center; gap:80px;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 600; color: #fff; line-height: 90px; display: block;}
#header .pcGnb > ul > li > ul{display: none; position: absolute; background-color: #22372b; left: 50%; transform: translateX(-50%); text-align: center; width: 192px; padding: 15px 0;}
#header .pcGnb > ul > li > ul > li{}
#header .pcGnb > ul > li > ul > li > a{font-weight: 500; color: #ffffff; font-size: 18px;  display: block; line-height: 42px;}
#header .pcGnb > ul > li > ul > li:hover > a{text-decoration: underline; text-underline-position: under;}
#header .r_menu{display: flex; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: 60px; gap:50px;}
#header .r_menu .call{display: flex; gap:7px; align-items: center;}
#header .r_menu .call img{max-width: 14px; filter: invert(1) grayscale(1) brightness(10);}
#header .r_menu .call p{font-size: 15px; font-weight: 600; color: #fff;}
#header .r_menu .call p b{font-weight: 700; color: #fff}
#header .r_menu .menuToggle{cursor: pointer;}
#header .r_menu .menuToggle img{max-width: 23px; filter: invert(1) grayscale(1) brightness(10);}


#header.on{background-color: #fff; border-bottom: 1px solid #eee;}
#header.on #logo a{filter: grayscale(0) brightness(1);}
#header.on .pcGnb > ul > li > div > a{color: #222;}
#header.on .r_menu .call{cursor: pointer;}
#header.on .r_menu .call img{filter: grayscale(0) brightness(1)}
#header.on .r_menu .call p{color: #222222;}
#header.on .r_menu .call p b{ color: #22372b;}
#header.on .r_menu .menuToggle img{max-width: 23px; filter: grayscale(0) brightness(1)}

#header:hover{background-color: #fff; border-bottom: 1px solid #eee;}
#header:hover #logo a{filter: grayscale(0) brightness(1);}
#header:hover .pcGnb > ul > li > div > a{color: #222;}
#header:hover .r_menu .call img{filter: grayscale(0) brightness(1)}
#header:hover .r_menu .call p{color: #222222;}
#header:hover .r_menu .call p b{ color: #22372b;}
#header:hover .r_menu .menuToggle img{max-width: 23px; filter: grayscale(0) brightness(1)}


@media all and (max-width:1400px){
	#header #logo{left: 3%;}
	#header .r_menu{right: 3%;}
	#header .pcGnb > ul{gap:60px;}
}
@media all and (max-width:1280px){
	#header .pcGnb > ul{gap:3vw;}
	#header .r_menu{gap:30px;}
}
@media all and (max-width:1024px){
	#header{height: 60px;}
	#header #logo a{width: 170px;}
	#header .pcGnb{display: none;}
}
@media all and (max-width:768px){
	#header #logo a{width: 148px;}
	#header .r_menu{gap:20px;}
	#header .r_menu .call{width: 32px; height: 32px; border: 1px solid #ccc; display: inline-flex; justify-content: center; align-items: center; border-radius: 100%;}
	#header.on .r_menu .call{border-color: #ccc;}
	#header .r_menu .call p{display: none;}
}
@media all and (max-width:500px){}

/* moGnb */
.mo_bg{position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: -1; opacity: 0; visibility: hidden; z-index: -1; transition: 0s; top: 0; left: 0;}
.mo_bg.on{z-index: 201; visibility: visible; opacity: 1;}
.moGnb{position: fixed; right: -100%; background-color: #fff; height: 100vh; width: 280px; top: 0; transition: .2s; z-index: 202;}
.moGnb.on{right: 0;}
.moGnb .close{padding: 20px; font-size: 24px; color: #000; text-align: right; cursor: pointer;}
.moGnb > ul{padding: 20px; border-top: 1px solid #eee;}
.moGnb > ul > li{}
.moGnb > ul > li > div{cursor: pointer;}
.moGnb > ul > li > div > a{font-size: 16px; color: #333; padding: 16px 12px; display: block; border-bottom: 1px solid #eee;}
.moGnb > ul > li.active > div > a{pointer-events: none; position: relative;}
.moGnb > ul > li.active > div > a::after{content: ''; width: 12px; height: 12px; display: block; background: url(/images/common/quick_arrow.webp) no-repeat center center / contain; position: absolute; top: 50%; transform: translateY(-50%) rotate(90deg); right: 12px;}
.moGnb > ul > li.active.on > div > a::after{transform: translateY(-50%) rotate(270deg);}
.moGnb > ul > li.on > div > a{color: #22372b;}
.moGnb > ul > li > ul{background-color: #f3f3f3; display: none;}
.moGnb > ul > li > ul > li{}
.moGnb > ul > li > ul > li > a{display: block; padding: 12px 20px; font-size: 14px; color: #555; font-weight: 300; transition: .2s;}
.moGnb > ul > li > ul > li:hover{color: #000;}

/* footer */
#footer {background-color: #ffffff; padding: 60px 0 100px; border-top: 1px solid #f3f3f3;}
#footer .inner{display: flex; justify-content: space-between; align-items: center;}
#footer .inner .l_cont{display: flex; align-items: center; gap:50px;}
#footer .inner .l_cont .f_logo{}
#footer .inner .l_cont .f_logo img{}
#footer .inner .l_cont .info{}
#footer .inner .l_cont .info li{font-size: 16px; color: #222222; display: inline-block; line-height: 2em; margin-right: 30px; font-weight: 300;}
#footer .inner .l_cont .info li span{font-weight: 400; opacity: 0.5; margin-right: 6px;}
#footer .inner .r_cont{text-align: right;}
#footer .inner .r_cont .list{display: flex; gap:30px; justify-content: flex-end; margin-bottom: 15px;}
#footer .inner .r_cont .list li{}
#footer .inner .r_cont .list li a{font-size: 16px; color: #222222; font-weight: 300;}
#footer .inner .r_cont .list li a b{font-weight: 500;}
#footer .inner .r_cont .copy{font-size: 16px; color: #222222; opacity: 0.4; line-height: 1.6em;}

@media all and (max-width:1280px){
	#footer{padding: 50px 0 90px;}
	#footer .inner .l_cont{gap:35px;}
	#footer .inner .l_cont .f_logo img{max-width: 120px;}
	#footer .inner .l_cont .info li{margin-right: 20px; font-size: 15px;}
	#footer .inner .r_cont .list{gap:20px;}
	#footer .inner .r_cont .list li a{font-size: 15px;}
	#footer .inner .r_cont .copy{font-size: 15px;}
}
@media all and (max-width:1024px){
	#footer .inner{align-items: flex-end;}
	#footer .inner .l_cont{width: 50%; display: flex; flex-direction: column; align-items: flex-start; gap:20px;}
	#footer .inner .r_cont{width: 50%;}
}
@media all and (max-width:768px){
	#footer{padding: 45px 0 70px;}
	#footer .inner{flex-direction: column;}
	#footer .inner .l_cont{width: 100%; text-align: center; align-items: center;}
	#footer .inner .r_cont{width: 100%; text-align: center; margin-top: 30px;}
	#footer .inner .r_cont .list{justify-content: center;}
}


/* go_top */
.go_top{position: fixed; z-index: 99; right: 40px; bottom: 50px; border-radius: 100%; box-shadow: 1px 8px 12px rgba(0,0,0,0.1); cursor: pointer;}
.go_top img{max-width: 100%;}

@media all and (max-width:1280px){
	.go_top{right: 30px; bottom: 40px;}
	.go_top img{max-width: 64px;}
}
@media all and (max-width:768px){
	.go_top{right: 3%; bottom: 4%;}
	.go_top img{max-width: 56px;}
}


.tb1 colgroup col:nth-child(1) {width: 20%;}
.tb1 colgroup col:nth-child(2) {width: 30%;}
.tb1 colgroup col:nth-child(3) {width: 50%;}
.tb1 {width: 100%;border-collapse: collapse;text-align: center;}
.tb1 th{border-right: 1px solid #fcfcfc; padding: 20px 15px; background: #76ab6a; color: #fff;font-size: 1.8rem;}
.tb1 th:last-child{border-right: 1px solid #76ab6a;}
.tb1 td{border: 1px solid #eee; padding: 20px; font-size: 1.7rem;}
.tb1 td br{display: none;}

@media all and (max-width:768px){
    .tb1 colgroup col:nth-child(1) {width: 30%;}
    .tb1 colgroup col:nth-child(2) {width: 35%;}
    .tb1 colgroup col:nth-child(3) {width: 35%;}
    .tb1 th{padding: 15px 10px; font-size: 1.6rem;}
    .tb1 td{padding: 10px 5px; font-size: 1.4rem;}
    .tb1 td br{display: block;}
}