@charset "UTF-8";
/*-------------------------------------------------
Author :yeona choi
Create date : 2021-08-20
Update : 2022-02-07 유지관리(중복 소스 정리 + 웹접근성 준수 + 웹표준 준수) - ksk
-------------------------------------------------*/

.board_info fieldset span.form-select {
	z-index: 0; 
	}

[class*=" xi-"], [class^="xi-"] {
	font-family: xeicon !important;
	}
	html:has(#header.active){
		overflow: hidden;
		height: 100%;
	}
#header {
	position: fixed; 
	left: 0; 
	top: 0; 
	z-index: 5; 
	width: 100%; 
	height:4.85rem;
	}
#header.fixed {
	-webkit-box-shadow: 0px 20px 20px rgba(0,0,0,0.1);
	box-shadow: 0px 20px 20px rgba(0,0,0,0.1);
	}
#header .headerWrap{
	height: 100%;
}
#header .gnbWrap {
	position: relative; 
	-webkit-transition: all 0.1s; 
	transition: all 0.1s;
	height:100%;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#header .logo { 
	position: relative; 
	height: 100%;
	}
	#header .logo a{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 18.45rem;
		height: 100%;
	}
	#header .logo a img{
		width: 100%;
		object-fit: cover;
	}
	#header .logo a img.black{
		display: none;
	}
/* gnb start */	
#gnb{
	height: 100%;
}
#gnb .gnb{ 
	height: 100%;
	}
#gnb .title { 
	display: none; 
	}
#gnb .topmenu{
	display: flex;
	gap: 5rem;
	align-items: center;
	height: 100%;
	}
	#gnb .topmenu > li{
		height: 100%;
	}
#gnb .topmenu > li > a {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.024rem;
	color: #fff;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	}
#gnb .topmenu > li > a::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
	width: 100%;
	height: 4px;
	background: #087F34;
	transform: scaleX(0);
	opacity: 0;
	}
	#header .headerWrap.active .logo a img.white , #header.fixed .logo a img.white{
		display: none;
	}
	#header .headerWrap.active .logo a img.black, #header.fixed .logo a img.black{
		display: block;
	}
	#header .headerWrap.active #gnb .topmenu > li > a, #header.fixed #gnb .topmenu > li > a{
		color: #3B3E42;
	}

#gnb .submenu { 
	position: absolute; 
	left:50%; 
	top: 100%; 
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%); 
	display: block; 
	width:64rem;
	margin-top: 1px; 
	z-index: 2; 
	visibility: hidden; 
	overflow: hidden; 
	opacity: 0; 
	padding-bottom: 2rem;
	}
#gnb .topmenu > li.active > a{
	color:#087F34;
	font-weight:bold;
	}
#gnb .topmenu > li.active > a:before {
	opacity: 1; 
	transform:scaleX(1);
	}
#gnb .topmenu > li.active .submenu { 
	visibility: visible; 
	overflow: visible; 
	height: auto; 
	opacity: 1; 
	-webkit-transition: all 0.2s; 
	transition: all 0.2s;
	display: flex;
	gap: 2rem;
	padding-top: 2.5rem;
	}
#gnb .submenu .desc { 
	width: 17.25rem; 
	line-height: 1.5625; 
	font-weight: 300; 
	font-size: 0.8rem; 
	color: #777; 
	}

#gnb .submenu .desc strong { 
	letter-spacing: 0px;
	color: #111111; 
	font-weight: bold;
	font-size: 1.45rem; 
	}
#gnb .submenu .desc p { 
	position:relative;
	margin-top:.85rem; 
	padding-top:.9rem; 
	font-weight: 500; 
	color: #888888;
	/*font-family: 'Montserrat', sans-serif;*/
	}
#gnb .submenu .desc p:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:.9rem;
	height:3px;
	background:#087F34;
	}
#gnb .submenu .desc>span>span{display:inline-block;}
#gnb .submenu .first-desc{
	height:18.3rem;
	}
#gnb .submenu > span.img {
	height:4rem;
	line-height:2rem;
	position: absolute;
	left: 7rem;
	bottom: 0;
	}
#gnb .submenu > ul { 
	width: calc(100% - 19rem);
	display: flex;
	flex-wrap: wrap;
	column-gap: .8rem;
	row-gap: 1rem;

	}
#gnb .submenu > ul > li { 
	width: calc((100% - 1.6rem) / 3);
	padding-bottom: 3rem;
	
	}
#gnb li.lnb6 .submenu ul.lnb-detail{
	height:auto;
	}
#gnb .submenu > ul > li > a { 
	position:relative;
	display: block; 
	height: 3.4rem; 
	padding: 0 1.25rem; 
	border: 3px solid #F2F2F2; 
	background-color: #FFFFFF; 
	text-overflow: ellipsis; 
	white-space: nowrap; 
	line-height: 3rem; 
	font-weight: 500; 
	font-size: 0.8rem; 
	color: #555;
	-webkit-transition: all 0.2s; 
	transition: all 0.2s; 
	overflow: hidden; 
	}
#gnb .submenu > ul > li > a:before{
	content:'\e93f';
	position:absolute;
	top:50%;
	right:.8rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: 'xeicon';
	color:#333;
	transition: color .2s linear;
	}

#gnb .submenu > ul > li.active > a 
#gnb .submenu > ul > li > a:hover, 
#gnb .submenu > ul > li > a:focus, 
#gnb .submenu > ul > li > a:active{ 
	border-color: #087F34; 
	background-color: #087F34; 
	color: #fff; 
	}
#gnb .submenu > ul > li > a:hover:before, 
#gnb .submenu > ul > li > a:focus:before, 
#gnb .submenu > ul > li > a:active:before,
#gnb .submenu > ul > li.active > a:before{
	color:#fff;
	}

#gnb .submenu ul.lnb-detail{
	margin-top:1rem;
	}
#gnb .submenu ul.lnb-detail > li{
	position:relative;
	padding-left:11px;
	}
#gnb .submenu ul.lnb-detail > li:before{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 3px;
	height:3px;
	background:#888888;
	border-radius: 50%;
	}
#gnb .submenu ul.lnb-detail > li+li{
	margin-top:.4rem;
	}
#gnb .submenu ul.lnb-detail > li > a{
	display: block;
	color: #555555;
	font-weight: 400;
	font-size:.8rem;
	line-height: 1.2rem;
	letter-spacing: -0.8px;
	transition: all .2s linear;
	}
#gnb .submenu ul.lnb-detail > li > a:hover{
	color:#087F34;
	font-weight: 500;
	}
#gnb .topmenu > li .submenu:before {
	content:'';
	position:absolute;
	top: -2px;
	left:50%;
	width:100vw;
	height:0;
	background:#fff;
	border-top: 1px solid #ddd;
	z-index:-1;
	transform: translateX(-50%);
	}
#header #gnb .topmenu > li.active .submenu:before{
	/* height:15.3rem; */
	height: 100%;
	}
#header.active { 
	position: absolute; 
	left: 0; 
	top: 0; 
	z-index: 10; 
	width: 100%; 
	height: 100%; 
	border-top: 0 none;
	background:#087F34;
	border-bottom:0;
	}
#header.active .AllMn{
	right:0;
	z-index: 1;
	}
#header.active .headerWrap{
	max-width: 100%;
	width: 100%;
	overflow: hidden;
	position: fixed;
	}
	#header.active .headerWrap::before{
		position: fixed;
		left: 50%;
		top: 50%;
		width: 100vw;
		height: 100vh;
		transform: translate(-50%, -50%);
		content: '';
		background: #f5f5f5;
	}
#header .log_etc{position:absolute;top:1.5rem;right:7rem;display:none;}
#header .log_etc ul{
	display: flex;
	align-items: center;
	gap: 10px;
}
#header .log_etc li > a{display:block;height:1.8rem;line-height:1.7rem;border:1px solid #3B3E42;border-radius:18px;padding:0 .8rem;color:#3B3E42;transition: all .2s linear;}
#header .log_etc li > a:focus,
#header .log_etc li > a:hover{background:#3B3E42;color: #fff;}

#header .header-util{
	display: flex;
	gap: 1.7rem;
	align-items: center;
}
#header .header-util .log a, #header .header-util .join a{display: flex;align-items: center;gap: .2rem;}
#header .header-util .log a span, #header .header-util .join a span{color: #fff; font-size: 1rem;font-weight: 500;letter-spacing: -0.02rem;}
#header .log > a:hover,
#header .log > a:focus{border-color:#424242;color:#424242}
#header .header-util .log a img.black{
	display: none;
}
#header .headerWrap.active .header-util .log a img.white , #header.fixed .header-util .log a img.white{
	display: none;
}
#header .headerWrap.active .header-util .log a img.black , #header.fixed .header-util .log a img.black{
	display: block;
}
#header .headerWrap.active .header-util .log a span, #header.fixed .header-util .log a span{
	color: #3B3E42;
}
#header .headerWrap.active .AllMn a::before,#header.fixed .headerWrap.active .AllMn a::before,#header .headerWrap.active .AllMn button::before,#header.fixed .AllMn button::before{
	color: #3B3E42;
}

/* btn-menu start */
#header .AllMn a,
#header .AllMn button {
	padding: 0;
	display: inline-block;
	width: 100%;
	height: 100%;
	}
#header .AllMn a::before,
#header .AllMn button::before {
	content: "\e91c";
	display: flex;
	width: 100%;
	height: 100%;
	font-family: "xeicon";
	color: #fff;
	line-height: inherit;
	font-size: 1.8rem;
	padding: 0;
	align-items: center;
	justify-content: center;
	}
#header .Allmn-close { 
	display:none;
	position:absolute;
	top:0;
	right:0;
	width: 5rem; 
	height: 5rem;
	background: #087F34;
	}
#header .AllMn.Allmn-close a::before,
#header .AllMn.Allmn-close button::before {
	content: "\e921";
	color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
	}
#header.active .AllMn a:hover::before, 
#header.active .AllMn a:focus::before,
#header.active .AllMn.Allmn-close button:hover::before,
#header.active .AllMn.Allmn-close button:focus::before{ 
	-webkit-transform: rotate(180deg); 
	transform: rotate(180deg); 
	}
/* btn-menu end */
	
	
/* all menu */
#gnb_m{
	display: none;
	}
#header.active .gnbWrap{
	display: none;
	}
#header.active #gnb .submenu > ul > li > a:before,
#header.active #gnb_m,
#header.active .Allmn-close{
	display: block;
	}

#header .headerWrap.active .gnb_bg {
	height: 100%;
	visibility: visible;
	z-index: -1;
	opacity: 1;
	}
#header.active #gnb .title,
#header.active #gnb .topmenu > li .submenu:before{
	display:none;
	}

#header .headerWrap.active{
	background: #fff;
}	
#header .headerWrap.active .Allmn-close{
	display: block;	
}
#header .gnb_bg {
	position: fixed;
	left: 0;
	top: auto;
	width: 100%;
	height: 0;
	margin-top: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	}
#header.fixed .gnbWrap{
	background: #fff;
}
#header.fixed .etc { 
	height: 0; 
	visibility: hidden; 
	overflow: hidden; 
	opacity: 0; 
	}
	
#header.active .logo, 
#header.active .etc, #header.active .log{ 
	display: none;
	}
#header.active .gnb_bg { 
	visibility: visible; 
	overflow: visible; 
	height: auto; 
	opacity: 1; 
	-webkit-transition: all 0.2s; 
	transition: all 0.2s; 
	display: block; 
	position: fixed; 
	top: 0; 
	z-index: -1 !important; 
	height: 100%; 
	margin-top: 0; 
	background-color: rgba(0,0,0,0.2); 
	-webkit-transition: all 0s; 
	transition: all 0s; 
	}
#header.active #gnb_m { 
	position:fixed;
	left:inherit;
	top:inherit;
	transform:none; 
	width:100%; 
	max-width:100%;
	margin:auto; 
	padding-left:0;
	height: calc(100% - 7rem);
	}
	#header.active #gnb_m nav{
		height: 100%;
		width: 64rem;
		margin: 0 auto;
	}
#header.active #gnb .topmenu > li > a{
	text-align: left;
	}
	

#header.active #gnb_m .topmenu_all { display: flex;column-gap: 2.5rem;row-gap: 5.5rem; flex-wrap: wrap;padding:0;width:100%;min-width:inherit;overflow: auto;margin-top: 7rem;position: relative;height: calc(100% - 7rem);}

#header.active #gnb_m .topmenu_all > li { display: block;width:calc((100% - 7.5rem) / 4);margin-right:0; position:relative;height: 355px;}
#header.active #gnb_m .topmenu_all > li > a {color: #3B3E42; font-size:1.4rem;line-height:2rem;letter-spacing: -1.4px;-webkit-transition:all .2s linear;transition:all .2s linear;}
#header.active #gnb_m .topmenu_all > li:nth-child(4n):before,#header.active #gnb_m .topmenu_all > li:nth-child(n+5):before{display:none;}
#header.active #gnb_m .topmenu_all > li:before{content:'';background:rgba(0,0,0,0.1);width:1px;height:550%;position:absolute;top:-50%;right: 0;}


#header.active #gnb_m .submenu { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; position: relative;width:auto;-webkit-transform: none;transform: none;left: inherit;top:inherit;}
#header.active #gnb_m .submenu .desc,
#header.active #gnb_m .submenu > span.img { display: none; }
#header.active #gnb_m .submenu > ul {width: 100%; height: auto; padding: 1.7rem 0 0; border: 0 none; }
#header.active #gnb_m .submenu > ul > li {width: 100%; margin: 0; padding: 0; }
#header.active #gnb_m .submenu > ul > li + li{padding-top:.6rem;}
#header.active #gnb_m .submenu > ul > li > a { font-size:1rem; letter-spacing: -1px;line-height: 1.94118; height: auto; border: 0 none; background: none; color: #3B3E42; text-align: left;padding:0; font-weight: 300;-webkit-transition:none;transition:none;display:inline-block;}
#header.active #gnb_m .submenu ul ul { display: block; margin: .4rem 0;  border: 0 none; height:auto; }
#header.active #gnb_m .submenu ul ul a { font-size: 0.85rem; font-weight: 300; color: #3B3E42;opacity: .8; }
#header.active #gnb_m .submenu ul ul li:before{background:#3B3E42;}



#gnb_m .submenu ul.lnb-detail > li{
	position:relative;
	padding-left:11px;
	}
#gnb_m .submenu ul.lnb-detail > li:before{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 3px;
	height:3px;
	background:#888888;
	border-radius: 50%;
	}
#gnb_m .submenu ul.lnb-detail > li+li{
	margin-top:.4rem;
	}
#gnb_m .submenu ul.lnb-detail > li > a{
	display: block;
	color: #555555;
	font-weight: 400;
	font-size:.8rem;
	line-height: 1.2rem;
	letter-spacing: -0.8px;
	}
#gnb_m .submenu ul.lnb-detail > li > a:hover{
	color:#087F34;
	font-weight: 500;
	}
#header.active #gnb_m .topmenu_all > li > a:hover, 
#header.active #gnb_m .topmenu_all > li > a:focus, 
#header.active #gnb_m .topmenu_all > li > a:active, 
#header.active #gnb_m .submenu > ul > li > a:hover,
#header.active #gnb_m .submenu > ul > li > a:focus{ 
	color:#087F34;
	font-weight: 500;
	}
#header.active #gnb_m .submenu ul ul a:hover,
#header.active #gnb_m .submenu ul ul a:focus{
	opacity: 1;
	}
#header.active .log_etc{
	display:block;
	}


	.quick-sns{
		position: fixed;
		right: 2rem;
		top:33.2rem;
		z-index: 2;
	}
	.quick-sns-item a{
		display: flex;
		width: 2.4rem;
		height: 2.4rem;
		border-radius: 50%;
		font-size: 0;
		line-height: 0;
		position: relative;
		padding: 0;
		box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.10);

	}
	.quick-sns-item + .quick-sns-item a {
		margin-top: .4rem;
	}
	.quick-sns-item a::before{
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		content: '';
		transform: translate(-50% , -50%);
	}
	.quick-sns-item.kakao a{
		background: #FAE100;
	}
	.quick-sns-item.facebook a{
		background: #1877F2;
	}
	.quick-sns-item.insta a{
		background: radial-gradient(92.18% 99.11% at 26.56% 107.7%, #FD5 0%, #FD5 10%, #FF543E 50%, #C837AB 100%);
	}
	.quick-sns-item.kakao a::before{
		background: url(/main/images/korean/layout/kakao.svg)no-repeat center 12px;
	}
	.quick-sns-item.facebook a::before{
		background: url(/main/images/korean/layout/facebook.svg)no-repeat center center;
	}
	.quick-sns-item.insta a::before{
		background: url(/main/images/korean/layout/insta.svg)no-repeat center center;
	}
/* footer */
#footer{
	background: #3B3E42;
	position: relative;
}
#footer .container{
	position: relative;
}

#footer .footer-inner{
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding-bottom: 2.4rem;
	color: #fff;
	font-size: .85rem;
	line-height: 1.35;
	font-weight: 500;
	letter-spacing: -0.017rem;
	width: 70rem;
	margin: auto;
	max-width: 100%;
}
#footer .footer-top{
	display: flex;
	align-items: center;
	gap: 1.6rem;
	padding: 1.2rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
#footer .footer-top li.blue{
	color: #2EA7E0;
}
#footer .footer-bottom{
	display: flex;
	justify-content: space-between;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.016rem;
}
#footer .footer-bottom .footer-info{
	display: flex;
	gap: 1.6rem;
}
#footer .footer-bottom .footer-info .footer-logo{
	max-width: 17.2rem;
}
#footer .footer-bottom .footer-info .footer-logo img{
	width: 100%;
}
#footer .footer-bottom .footer-info .copyright{
	margin-top: .2rem;
	color: #9E9E9E;
}
#footer .footer-bottom .footer-familysite{
	position: relative;
	color: #fff;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.016rem;
	display: inline-flex;
	width: fit-content;
	height: fit-content;
}
#footer .footer-bottom .footer-familysite button{
	display: flex;
	padding: .7rem 1.2rem;
	justify-content: space-between;
	align-items: center;
	width: 12rem;
	color: #fff;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.016rem;
	border: 1px solid #757575;
}
#footer .footer-bottom .footer-familysite button.on i::before{
	content: "\f1ae";
}
#footer .footer-bottom .footer-familysite-list{
	position: absolute;
	bottom: calc(100% - -5px);
	left: 0;
	width: 100%;
	background: #3B3E42;
	border: 1px solid #757575;
	display: none;
	z-index: 1;
}
#footer .footer-bottom .footer-familysite-list li + li{
	border-top: 1px solid #757575;
}
#footer .footer-bottom .footer-familysite-list li a{
	display: inline-block;
	width: 100%;
	padding: .7rem 1.2rem;
}
#footer .footer-bottom .footer-familysite-list li a:hover{
	background: #4B4F55;
}

/* 레이아웃 반응형 */
@media (max-width: 1600px){
	#gnb .topmenu{
		gap: 4rem;
	}
}
@media (max-width: 1400px){
	#header .gnbWrap{
		padding: 0 1rem;
	}
	#gnb .submenu{
		padding: 0 2rem 2rem 2rem;
	}
	#gnb .topmenu{
		gap: 3rem;
	}
	#footer .footer-inner{
		padding: 0 1rem;
	}
}

@media (max-width: 1280px) {
	html { font-size: 18px; }
	#gnb .submenu ul li { padding-left: 1rem; }
	#header.active #gnb_m{
		padding: 0 2rem;
	}
	#header.active #gnb_m nav{
		width: 100%;
	}
	.quick-sns-item.kakao a::before{
		background-position: center 11px;
	}

}

@media (max-width: 1200px) {
	#header .logo a{
		width: 16rem;
	}
	#gnb .topmenu{display:none;}
	#header,
	#header .gnbWrap{height:3.5rem;}
	#header .AllMn a, 
	#header .AllMn button{line-height:3.5rem;}
	#header.active #gnb{max-width: 95%;}
}

@media (max-width: 1023px) { 
	
	/* header */
	#header.active{left:inherit;right:0;width:375px;position: fixed;}
	#header.active .headerWrap{position:relative;background: #F5F5F5;}
	#header.active .headerWrap:before{content:'';position:absolute;top:3.5rem;left:0;width:100%;height:1px;background:#087F34;transform: none;}
	#header.active #gnb_m{max-width:90%; min-height: 100vh;padding: 0;position: static;}
	#header.active #gnb_m .gnb_m{height: calc(100vh - 3.5rem + 1px);overflow-y: auto;padding-bottom:3rem;margin-top: 4rem;}
	#header.active #gnb_m .topmenu_all{row-gap: 0;column-gap: 0;padding: 0;margin-top: 0;height: auto;}
	#header.active #gnb_m .topmenu_all > li{width:100%;padding:.3rem 0;border-bottom: 1px solid rgba(0,0,0,0.1);height: auto;}
	#header.active #gnb_m .topmenu_all > li:before{display:none;}
	#header.active #gnb_m .topmenu_all > li.mnlast{border-bottom:0;}
	#header.active #gnb_m .topmenu_all > li:nth-child(n+5){margin-top:0;}
	#header.active #gnb_m .topmenu_all > li > a{display: block;font-size:1rem;}
	#header.active #gnb_m .topmenu_all > li.active .submenu{display:block;height:auto;opacity: 1;visibility: visible;}
	
	#header.active #gnb_m .submenu > ul{padding:.3rem 0 1rem 0.6rem;}
	#header.active #gnb_m .submenu > ul > li > a{font-size:.9rem;line-height:1.2;}
	#header.active #gnb_m .submenu{display:none;height:0;visibility: hidden;opacity: 0;}
	#header.active .AllMn{width: 3.5rem;height: 3.5rem;}
	#header.active .log_etc{top:1rem;right: 5rem;}
	#header.active .log_etc ul{justify-content: flex-end;}

	/* footer */
	#footer .footer-bottom .footer-info{
		flex-direction: column;
		row-gap: 1rem;
	}
	.quick-sns{
		right: .5rem;
	}
	
	
}
@media (max-width: 768px) {
	#header .gnbWrap{
		padding: 0 .5rem;
	}
	#header .AllMn a::before, #header .AllMn button::before{
		font-size: 1.6rem;
	}
	#footer .footer-top{
		flex-wrap: wrap;
		row-gap: .5rem;
	}
	#footer .footer-bottom{
		flex-direction: column;
		row-gap: 1rem;
	}
	#footer .footer-bottom .footer-familysite{
		align-self: flex-end;
	}
}
@media (max-width: 550px) {
/* header */
#header.active{width:100%;}
#header .log, #header .join{display:none;}
#header.active .log_etc{left:1rem;-webkit-transform:none;transform:none;}
}