@charset "UTF-8";

.hide {display:none;}
.show {display:block;}
* {
	box-sizing:border-box;
	line-height:1;
}
body {
	min-width:1200px;
	
}
header {
}


header.white .gnb .hamburger .hamburger__btn .hamburger__bar {
    background: #fff;
}

header .logo {
	max-width:380px;
}
header .logo a {
	position:relative;
	z-index:999;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}
header .logo span {
	display:inline-block;
	margin:0 0 0 9px;
}

.top_hd {
	width:100%;
	height:30px;
}
.top_hd ul {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	max-width:1200px;
	margin:0 auto;
	height:100%;
}
.top_hd ul li a {
	display:block;
	font-size:13px;
	font-weight:600;
	color:#5c9158;
}
.top_hd ul li:first-child {
	margin:0 40px 0 0;
}
#headerInner {
	height:100%;
	width:100%;
	margin:0 auto;
	position:relative;
}
.header_center {
	max-width:1200px;
	margin:0 auto;
	/*display:flex;
	align-items:center;
	justify-content:space-between;
	position:relative;*/
	height:64px;
}
/* gnb */
nav#gnb{width:100%; z-index:100;}
nav#gnb .pc {
	position:absolute;
	width:100%;
	top:0;
	left:0;
	z-index:100;
	box-sizing:border-box;text-align:center;
}
nav#gnb .pc > ul {
	max-width:1200px;
	margin:0 auto;
	display:flex; 
	justify-content:flex-end;
}
nav#gnb .pc > ul > li {
	display:inline-block; 
	position:relative; 
	width:auto; 
	height:64px;
	margin:0 0 0 50px;
}
nav#gnb .pc > ul > li:first-child {margin:0;}

nav#gnb .pc > ul > li > a {
	display:block;
	font-size:19px; 
	line-height:64px;
	height:100%;
	font-weight:400; 
	color:#222;
	position:relative;
	transition:all .3s;
}
nav#gnb .pc > ul > li > a:hover,
nav#gnb .pc > ul > li.on a,
nav#gnb .pc > ul > li.active a {color:#5c9158;}
nav#gnb .pc > ul > li > a:after {
	content:'';
	position:absolute;
	left:50%;
	bottom:14px;
	transform:translate(-50%,0);
	width:6px;
	height:6px;
	border-radius:50%;
	background-color:#5c9158;
	transition:all .3s;
	opacity:0;
}
nav#gnb .pc > ul > li a.on {color:#5c9158; font-weight:bold;}
nav#gnb .pc > ul > li a.on:after {
	opacity:1;
}

nav#gnb .pc > ul > li > a:hover:after,
nav#gnb .pc > ul > li.active > a:after {
	opacity:1;
}
nav#gnb .pc > ul > li .gnb-2dep {
	display:none;
	position:absolute; 
	top:70px; 
	padding:17px 0 0;
	z-index:999;
	height:213px;
}
nav#gnb .pc > ul > li .gnb-2dep li {
	text-align:center; 
	width:100%;
	margin:20px 0 0;
}
nav#gnb .pc > ul > li .gnb-2dep li:first-child {margin:0;}
nav#gnb .pc > ul > li .gnb-2dep li a {
	color:#222; 
	display:inline-block;
	width:auto;
	line-height:1.1;
	font-size:17px; 
	font-weight:500; 
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-o-transition:all .3s;
	-ms-transition:all .3s;
	position:relative;
	white-space:nowrap;
}
nav#gnb .pc > ul > li .gnb-2dep li a:hover {color:#5c9158;}

nav#gnb .pc > ul > li.gnb1 .gnb-2dep {left:5px;}
nav#gnb .pc > ul > li.gnb2 .gnb-2dep {left:-10px;}
nav#gnb .pc > ul > li.gnb4 .gnb-2dep {left:2px;}
nav#gnb .pc > ul > li.gnb5 .gnb-2dep {left:10px;}



#gnbBg_wrap {width:100%; overflow:hidden;}
#gnbBg {
	position:relative;
	position:absolute; left:50%; top:64px; width:100%; height:auto; padding:0; 
	background:#fff; display:none; 
	opacity:0.85;
	transform:translate(-50%,0);
	/*box-shadow:1px 7px 10px rgb(0 0 0 / 5%);*/
	
}

header .hamburger {
    display: none;
    position: absolute;
    border-radius: 2px;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    z-index: 100;
}
header .hamburger .hamburger__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 3rem;
    cursor: pointer;
}
header .hamburger .hamburger__btn .hamburger__bar {
    display: block;
    width: 100%;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    height: 0.3rem;
    background: #222;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}
header .hamburger .hamburger__btn span + span {
    margin-top: 0.7rem;
}
header .hamburger .hamburger__btn.active span:nth-child(1) {
    -webkit-animation: ease 0.7s top forwards;
    animation: ease 0.7s top forwards;
}
header .hamburger .hamburger__btn.inactive span:nth-child(1) {
    -webkit-animation: ease 0.7s top-2 forwards;
    animation: ease 0.7s top-2 forwards;
}
header .hamburger .hamburger__btn.active span:nth-child(2) {
    -webkit-animation: ease 0.7s scaled forwards;
    animation: ease 0.7s scaled forwards;
}
header .hamburger .hamburger__btn.inactive span:nth-child(2) {
    -webkit-animation: ease 0.7s scaled-2 forwards;
    animation: ease 0.7s scaled-2 forwards;
}
header .hamburger .hamburger__btn.active span:nth-child(3) {
    -webkit-animation: ease 0.7s bottom forwards;
    animation: ease 0.7s bottom forwards;
}
header .hamburger .hamburger__btn.inactive span:nth-child(3) {
    -webkit-animation: ease 0.7s bottom-2 forwards;
    animation: ease 0.7s bottom-2 forwards;
}
header .nav {
    width: 100%;
    max-width: 100%;
    height: 100%;
    /*background: #1a90cd;*/
    position: fixed;
    top: 0;
    right: -100%;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transition-timing-function: cubic-bezier(10, 2, 3, 1);
    transition-timing-function: cubic-bezier(10, 2, 3, 1);
    overflow-y: auto;
	display:none;
}
header .nav.on {
    right: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transition-timing-function: cubic-bezier(10, 2, 3, 1);
    transition-timing-function: cubic-bezier(10, 2, 3, 1);
}
header .nav a {
    color:#222;
}
header .nav .nav__depth1 {
    padding: 120px 0;
}
header .nav .nav__depth1 > li {
    width: 100%;
    cursor: pointer;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
header .nav .nav__depth1 > li:last-child {
    background: none;
    cursor: auto;
}
header .nav .nav__depth1 > li.open span > a > img {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
header .nav .nav__depth1 > li span {
    width: 100%;
    display: inline-block;
    padding: 0 40px;
}
header .nav .nav__depth1 > li span > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: var(--font-xlarge);
    font-weight: var(--weight-regular);
    border-bottom: 1px solid #4fb0e2;
}
header .nav .nav__depth1 > li span > a strong {
	width: 100%;
    padding: 20px 0;
}
header .nav .nav__depth1 > li span > a img {
    width: 24px;
    height: 24px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
header .nav .nav__depth2 {
    background: #107bb2;
    width: 100%;
    left: 0;
    display: none;
    padding: 30px 0;
}
header .nav .nav__depth2 li {
    margin-bottom: 20px;
    padding: 0 40px;
}
header .nav .nav__depth2 li:last-child {
    margin-bottom: 0;
}
header .nav .nav__depth2 li a {
    font-size: var(--font-medium);
    font-weight: var(--weight-light);
}

@-webkit-keyframes top {
    0% {
        top: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        top: 2vw;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        top: 2vw;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

@keyframes top {
    0% {
        top: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        top: 2vw;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        top: 4vw;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}
@-webkit-keyframes top-2 {
    0% {
        top: 2vw;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    50% {
        top: 2vw;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        top: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes top-2 {
    0% {
        top: 2vw;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    50% {
        top: 2vw;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        top: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes bottom {
    0% {
        bottom: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        bottom: 2vw;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        bottom: 2vw;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
}
@keyframes bottom {
    0% {
        bottom: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        bottom: 2vw;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        bottom: 2vw;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
}
@-webkit-keyframes bottom-2 {
    0% {
        bottom: 2vw;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    50% {
        bottom: 2vw;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        bottom: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
@keyframes bottom-2 {
    0% {
        bottom: 2vw;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    50% {
        bottom: 2vw;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        bottom: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
@-webkit-keyframes scaled {
    50% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@keyframes scaled {
    50% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@-webkit-keyframes scaled-2 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scaled-2 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

header .right {
	display:flex;
	align-items:center;
}

/* lang */
.lang {
	z-index:100;
}
.lang ul {
	display:flex;
	align-items:center;
	justify-content:flex-start;
	padding-right:29px;
}
.lang ul li a {
	font-size:14px;
	font-weight:400;
	color:#9c9c9c;
	position:relative;
	padding:0 0 0 10px;
	margin:0 0 0 10px;
}
.lang ul li a:after {
	content:'';
	position:absolute;
	left:0;
	top:50%;
	transform:translate(0,-50%);
	width:1px;
	height:12px;
	background:#9c9c9c;
}
.lang ul li:first-child a {
	padding:0;
	margin:0;
}
.lang ul li:first-child a:after {
	display:none;
}
.lang ul li.on a {
	color:#fff;
}

/* sitemap */
.sitemap_btn {
	z-index:900;
	cursor:pointer;
}
.siteMap{display: none;}
.siteMap.on{
	display: block;
	z-index:1001;
	position:fixed;
	width:100vw;
	height:100vh;
	background-color: #5c9158;
	left:50%;
	top:0;
	transform:translate(-50%, 0);
}
.siteMap_wrap {
	position:relative;
	width:100%;
	height:100vh;
}
.siteMap_wrap .close_btn {
	position:absolute;
	top:30px;
	right:60px;
	cursor:pointer;
}
.siteMap_wrap .flex_wrap {
	max-width:1400px;
	height:100%;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.siteMap_wrap .flex {
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
    width: 100%;
}
.siteMap_wrap .flex .left {
	width:460px;
}
.siteMap_wrap .flex .left p.logo {
	margin:0 0 220px;
} 
.siteMap_wrap .flex .left dl {
	margin:0 0 55px;
}
.siteMap_wrap .flex .left dl:last-of-type {
	margin:0;
}
.siteMap_wrap .flex .left dl dt {
	font-size:14px;
	font-weight:700;
	color:#fff;
	margin:0 0 20px;
}
.siteMap_wrap .flex .left dl dd {
	font-size:14px;
	font-weight:400;
	color:#fff;
	line-height:24px;
}
.siteMap_wrap .flex .right {
	width:calc(100% - 460px);
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:flex-start;
}
.siteMap_wrap .flex .right dl {
	width:20%;
	text-align:center;
	min-height:405px;
}
.siteMap_wrap .flex .right dl:nth-child(4),
.siteMap_wrap .flex .right dl:nth-child(5) {
	min-height:auto;
}
.siteMap_wrap .flex .right dl dt {
	font-size:28px;
	font-weight:400;
	color:#fff;
	margin:0 0 40px;
}
.siteMap_wrap .flex .right dl dd {
	margin:0 0 15px;
}
.siteMap_wrap .flex .right dl dd:last-of-type {
	margin:0;
} 
.siteMap_wrap .flex .right dl dd a {
	color:#fff;
	display:inline-block;
	font-size:14px;
	font-weight:400;
	line-height:25px;
	letter-spacing:-0.025em;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	position:relative;
}
.siteMap_wrap .flex .right dl dd a:hover {color:#008c96;}
.siteMap_wrap .flex .right dl dd a:hover:after {
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:#008c96;
}


/************************** #footer ***************************/
.footer_terms {
	width:100%;
	border-bottom:1px solid #e7e7e7;
}
.footer_terms ul {
	max-width:1200px;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	height:61px;
	padding:0 0 0 20px;
	box-sizing:border-box;
}
.footer_terms ul li a {
	line-height:61px;
	font-size:14px;
	font-family:'Noto Sans KR', sans-serif;
	font-weight:500;
	color:#676767;
}
.footer_terms ul li:first-child {
	padding:0 20px 0 0;
	margin:0 20px 0 0;
	position:relative;
}
.footer_terms ul li:first-child:after {
	content:'';
	position:absolute;
	right:0;
	top:50%;
	transform:translate(0,-50%);
	width:1px;
	height:16px;
	background:#b3b3b3;
}

.footer_terms ul li a.footer_terms_privacy { color: #5c9158; font-weight: 600; }

.footer_content {
	max-width:1200px;
	margin:0 auto;
	padding:36px 0 65px;
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
}
.footer_content p {
    max-width: 350px;        
}
.footer_content p span {
	display:inline-block;
	margin:0 0 0 8px;
}
.footer_content address {
	font-family:'Noto Sans KR', sans-serif;
	font-size:14px;
	font-weight:500;
	color:#676767;
	margin:0 0 0 100px;
}
.footer_content address li {
	margin:12px 0 0;
}
.footer_content address li span.sp_margin {
	display:inline-block;
	margin:0 0 0 24px;
}
.footer_content address li:first-child {margin:0;}

.toTheTop {
	position:fixed;
	right:20px;
	bottom:20px;
	width: 57px;	
	height: 57px;
	background: url('../images/common/top.png') no-repeat 50% 50%;
	cursor:pointer;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
}
/*.toTheTop:hover {
	background-image:url('../images/common/top_hv.png');
}*/

/************************** 태블릿 ***************************/
@media screen and (max-width:1024px){
	body {
		min-width:100%;
	}
	.top_hd {
		padding:0 30px;
	}
	#headerInner {
		padding:0 30px;
	}
	header .logo {
		max-width:400px;
	}
	nav#gnb .pc > ul {
		max-width:950px;
	}
	nav#gnb .pc > ul > li {
		margin:0 0 0 20px;
	}

	/* footer */
	.footer_content {
		padding:30px;
	}
	.footer_terms ul {
		padding:0 30px;
	}

	/* sitemap */
	.siteMap_wrap .flex_wrap {
		max-width:900px;
	}
	.siteMap_wrap .flex {
		width:100%;
	}
	.siteMap_wrap .flex .left {
		width:40%;
	}
	.siteMap_wrap .flex .right {
		width:calc(100% - 40%);
	}
}
@media screen and (max-width: 768px) {
	body {
		min-width:320px;
	}
	.top_hd {
		display:none;
	}
	header {
        padding: 0 4vw;
		height:19.4vw;
		transition: all .3s;
		z-index:999;
    }
	.header_center {
		height:100%;
		display:flex;
		align-items:center;
	}
	header .logo {
		max-width:85%;
		padding:0;
		width:100%;
	}
	header .logo a img {
		max-width:70vw;
	}
	header .logo a {
		font-size:4vw;
		white-space:nowrap;
		letter-spacing:-0.02em;
		z-index:100;
	}
	header .logo span {
		margin:0 0 0 2vw;
	}
	#headerInner {
		padding:0;
		align-items:center;
	}
	nav#gnb .pc  {
		display:none;
	}
	header .gnb, 
	header.minimized, 
	header.minimized .gnb {
		position:fixed;
		top:0;
		left:0;
		background:#fff;
	}
	header .gnb .gnb__depth1 {
		display:none;
	}
   
	header .hamburger {
		display:block;
		/*width:9vw;
		height:9vw;*/
		width:7vw;
		height:7vw;
		z-index:101;
	}
	header .hamburger .hamburger__btn {
		/*width:9vw;*/
		width:7vw;
	}
	header .hamburger .hamburger__btn.active {
		margin-top:-0.7vw;
	}
	header .hamburger .hamburger__btn.active .hamburger__bar {
		background:#222 !important;
	}
	
	header.subHeader .hamburger .hamburger__btn .hamburger__bar {
		background:#222;
	}
	header.is-scroll .hamburger .hamburger__btn .hamburger__bar {
		background:#222;
	}
	header .hamburger .hamburger__btn .hamburger__bar {
		height:1vw;
	}
	header .hamburger .hamburger__btn span + span {
		margin-top:1.2vw;
	}
	header .hamburger .hamburger__btn.active span + span {
		margin-top:1.95vw;
	}
	header .nav {
		top:0;
		background:#f3f4ff;
		padding-top:25vw;
		border-top:1px solid #ddd;
		display:block;
	}
	header .nav .nav__depth1 {
		padding:0;
	}
	header .nav .nav__depth1 > li span {
		/*padding:0 7.8vw 0 5.6vw;*/
		padding:0 4.5vw 0 5.6vw;
	}
	header .nav .nav__depth1 > li span > a {
		font-size:5vw;
		font-weight:600;
		border-bottom:none;
	}
	header .nav .nav__depth1 > li span > a strong {
		padding:5vw 0;
	}
	header .nav .nav__depth2 {
		background:#f8f8f8;
		/*background:#6871e2;*/
		padding:10.8vw 8.3vw;
	}
	header .nav .nav__depth2 li {
		margin-bottom:5.2vw;
		padding:0;
	}
	header .nav .nav__depth2 li a {
		font-size:4.3vw;
		font-weight:400;
		color:#444 !important;
		display:block;
	}
	header .nav .nav__depth2 li a span {
		width:auto;
		padding:0; 
		margin-left:1vw;
	}
	.sitemap_btn {
		display:none;
	}

	.lang {
		z-index:auto;
	}
	.lang ul {
		padding-right:12vw;
	}
	
	.footer_terms ul {
		padding:0 4vw;
		height:11vw;
	}
	.footer_terms ul li:first-child {
		padding:0 4vw 0 0;
		margin:0 4vw 0 0;
	}
	.footer_terms ul li a {
		line-height:11vw;
		font-size:3.2vw;
	}
	.footer_terms ul li:first-child:after {
		height:3vw;
	}
	.footer_content {
		padding:5vw 4vw;
		flex-wrap:wrap;
	}
	.footer_content p {
		width:100%;
		font-size:4vw;
		white-space:nowrap;
		letter-spacing:-0.02em;
	}
	.footer_content p span {
		margin:0 0 0 2vw;
	}
	.footer_content p img {
		max-width:60vw;
	}
	.footer_content address {
		font-size:3.2vw;
		margin:5vw 0 0;
	}
	.footer_content address ul {
		flex-wrap:wrap;
		margin:0 0 4vw;
	}
	.footer_content address li {
		width:100%;
		padding:0;
		margin:0;
		line-height:1.6;
		word-break:keep-all;
	}
	.footer_content address li span.sp_margin {
		margin:0 0 0 4vw;
	}
	
	.toTheTop {display:none !important;}
	
	
}

/************************** 모바일 ***************************/
@media screen and (max-width: 500px) {
    
    header .gnb h1.logo img {
        min-width: 130px;
    }
    header.minimized .gnb h1.logo img {
        max-width: 130px;
    }

}