@charset "utf-8";

* {
	word-break: keep-all;
}

/* ----- common ----- */

#contents {
	overflow: hidden;
}

.hidden {
	overflow: hidden !important;
	height: 100vh !important;
	height: calc(var(--vh, 1vh) * 100) !important;
	;
	position: fixed !important;
}

.maxinner {
	margin: 0 auto;
	max-width: 1460px;
	width: 90%;
}

.img-none {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #f2f2f2;
}

	.img-none img {
		position: static !important;
		max-width: 80% !important;
		width: auto !important;
		height: auto !important;
	}

.water-epc .maxinner {
	text-align: center;
}

/* ----- scroll down ----- */

.scroll-btn {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 10;
	display: none;
}

	.scroll-btn a {
		display: block;
		width: 6em;
		height: 6em;
		background: #333;
	}

		.scroll-btn a:hover {
			background: #262626;
		}

		.scroll-btn a:after {
			content: url('../images/common/arrow-down.png');
			position: absolute;
			left: 50%;
			top: 50%;
			font-size: 2.5rem;
			color: #fff;
			font-family: 'xeicon', sans-serif;
			margin-top: -0.5em;
			margin-left: -0.5em
		}

.scroll-down {
	position: absolute;
	bottom: 140px;
	right: 1.5%;
	width: 45px;
	height: 150px;
	z-index: 999;
}

	.scroll-down i {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 1px solid #ddd;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.scroll-down p {
		position: absolute;
		left: 50%;
		top: 0;
		margin-left: -7.5px;
		margin-top: 80px;
		width: 100px;
		font-size: 14px;
		color: #fff;
		letter-spacing: 1px;
		font-weight: 300;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
		-webkit-transform-origin: 0% 0%;
		-moz-transform-origin: 0% 0%;
		-ms-transform-origin: 0% 0%;
		-o-transform-origin: 0% 0%;
		transform-origin: 0% 0%;
		-webkit-transition: margin 0.3s;
		-moz-transition: margin 0.3s;
		-ms-transition: margin 0.3s;
		-o-transition: margin 0.3s;
		transition: margin 0.3s;
	}

	.scroll-down i:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 4px;
		height: 4px;
		background: #fff;
		border-radius: 50%;
		-webkit-animation: scrollZoomIn 2s infinite;
		-moz-animation: scrollZoomIn 2s infinite;
		-ms-animation: scrollZoomIn 2s infinite;
		-o-animation: scrollZoomIn 2s infinite;
		animation: scrollZoomIn 2s infinite;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.scroll-down i:after {
		display: none;
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 4px;
		height: 4px;
		background: #fff;
		border-radius: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.scroll-down:hover {
		height: 130px;
	}

		.scroll-down:hover p {
			margin-top: 0;
		}

		.scroll-down:hover i {
			overflow: hidden;
			width: 2px;
			height: 100px;
			border-radius: 0;
			border: none;
			background-color: rgba(255, 255, 255, 0.3);
			-webkit-transition: height 0.1s;
			-moz-transition: height 0.1s;
			-ms-transition: height 0.1s;
			-o-transition: height 0.1s;
			transition: height 0.1s;
		}

			.scroll-down:hover i:before {
				display: none;
			}

			.scroll-down:hover i:after {
				display: block;
				content: "";
				width: 100%;
				height: 10px;
				border-radius: 0;
				background: #fff;
				-webkit-animation: scrollDown 2s infinite;
				-moz-animation: scrollDown 2s infinite;
				-ms-animation: scrollDown 2s infinite;
				-o-animation: scrollDown 2s infinite;
				animation: scrollDown 2s infinite;
			}

.scroll-down2 {
	position: absolute;
	left: 50%;
	bottom: 5%;
	z-index: 10;
	width: 40px;
	height: 40px;
	border-bottom: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: translateX(-50%), rotate(45deg);
	-moz-transform: translateX(-50%), rotate(45deg);
	-ms-transform: translateX(-50%), rotate(45deg);
	-o-transform: translateX(-50%), rotate(45deg);
	transform: translateX(-50%), rotate(45deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-animation: scrollDown2 2s infinite;
	-moz-animation: scrollDown2 2s infinite;
	-ms-animation: scrollDown2 2s infinite;
	-o-animation: scrollDown2 2s infinite;
	animation: scrollDown2 2s infinite;
}

/* ----- sub scroll down ----- */

.sub .scroll-down {
	opacity: 0;
	right: auto;
	left: 50%;
	bottom: 8%;
	margin-left: -22.5px;
	width: 45px;
	height: 75px;
}

	.sub .scroll-down i {
		border-color: rgba(255, 255, 255, 0.3);
	}

	.sub .scroll-down p {
		left: 50%;
		margin-top: 0;
		margin-left: 0;
		text-align: center;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.sub .scroll-down:hover {
		height: 100px;
	}

		.sub .scroll-down:hover i {
			height: 60px;
		}

.sub.open .scroll-down {
	opacity: 1;
	bottom: 5%;
	-webkit-transition: opacity, bottom 0.7s;
	-moz-transition: opacity, bottom 0.7s;
	-ms-transition: opacity, bottom 0.7s;
	-o-transition: opacity, bottom 0.7s;
	transition: opacity, bottom 0.7s;
}

/* ----- button ----- */

.btn-viewmore {
	position: relative;
	font-size: 15px;
	color: #333;
	font-weight: 600;
	line-height: 1;
	position: relative;
}

	.btn-viewmore strong {
		padding-right: 85px;
		margin-right: 6px;
		font-size: 20px;
		font-weight: 600
	}

	.btn-viewmore:hover .arrow:after,
	.btn-viewmore:hover .arrow:before {
		opacity: 1;
	}

	.btn-viewmore:after {
		content: "";
		position: absolute;
		right: 40px;
		top: 50%;
		z-index: 10;
		margin-top: 1px;
		width: 37px;
		height: 2px;
		background: #333;
		margin-right: -8px;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		transition: all ease .3s;
	}

	/* ----- button add km  ----- */

	.btn-viewmore .arrow {
		display: block;
		position: absolute;
		width: 70px;
		height: 70px;
		right: 0;
		top: -24px;
		z-index: -1;
	}

		.btn-viewmore .arrow.left {
			-webkit-transform: scaleX(-1);
			-moz-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			-o-transform: scaleX(-1);
			transform: scaleX(-1);
		}

		.btn-viewmore .arrow em {
			display: block;
			position: absolute;
			margin: -10px 0 0 -10px;
			width: 20px;
			height: 20px;
			left: 50%;
			top: 50%;
			z-index: 10;
		}

			.btn-viewmore .arrow em:before,
			.btn-viewmore .arrow em:after {
				content: "";
				width: 10px;
				height: 2px;
				border-radius: 1px;
				position: absolute;
				left: 50%;
				top: 50%;
				background: #333;
				margin: -1px 0 0 -5px;
				display: block;
				-webkit-transform-origin: 9px 50%;
				-moz-transform-origin: 9px 50%;
				-ms-transform-origin: 9px 50%;
				-o-transform-origin: 9px 50%;
				transform-origin: 9px 50%;
				z-index: 10;
			}

			.btn-viewmore .arrow em:before {
				-webkit-transform: rotate(-40deg);
				-moz-transform: rotate(-40deg);
				-ms-transform: rotate(-40deg);
				-o-transform: rotate(-40deg);
				transform: rotate(-40deg);
			}

			.btn-viewmore .arrow em:after {
				-webkit-transform: rotate(40deg);
				-moz-transform: rotate(40deg);
				-ms-transform: rotate(40deg);
				-o-transform: rotate(40deg);
				transform: rotate(40deg);
			}

		.btn-viewmore .arrow:before,
		.btn-viewmore .arrow:after {
			content: "";
			display: block;
			position: absolute;
			left: 1px;
			right: 1px;
			top: 1px;
			bottom: 1px;
			border-radius: 50%;
			-webkit-transition: all ease .3s;
			-moz-transition: all ease .3s;
			-ms-transition: all ease .3s;
			-o-transition: all ease .3s;
			transition: all ease .3s;
		}

		.btn-viewmore .arrow div {
			display: block;
			width: 70px;
			height: 70px;
			position: relative;
			z-index: 1;
			border: 2px solid rgba(153, 153, 153, 0.8);
			border-radius: 50%;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}

			.btn-viewmore .arrow div:after {
				content: "";
				position: absolute;
				left: -5%;
				top: -5%;
				width: 110%;
				height: 110%;
				background: #fff;
			}

			.btn-viewmore .arrow div:before {
				content: "";
				position: absolute;
				right: -5%;
				top: -5%;
				width: 0;
				height: 110%;
				background: #fff;
			}

		.btn-viewmore .arrow.animate div:after {
			width: 0;
			-webkit-transition: all ease .5s;
			-moz-transition: all ease .5s;
			-ms-transition: all ease .5s;
			-o-transition: all ease .5s;
			transition: all ease .5s;
			-webkit-transition-delay: 0.3s;
			-moz-transition-delay: 0.3s;
			-ms-transition-delay: 0.3s;
			-o-transition-delay: 0.3s;
			transition-delay: 0.3s;
		}

		.btn-viewmore .arrow.animate div:before {
			width: 110%;
			-webkit-transition: all ease .5s;
			-moz-transition: all ease .5s;
			-ms-transition: all ease .5s;
			-o-transition: all ease .5s;
			transition: all ease .5s;
			-webkit-transition-delay: 0.6s;
			-moz-transition-delay: 0.6s;
			-ms-transition-delay: 0.6s;
			-o-transition-delay: 0.6s;
			transition-delay: 0.6s;
		}

		.btn-viewmore .arrow.animate em {
			-webkit-animation: arrow 1.6s ease forwards;
			-moz-animation: arrow 1.6s ease forwards;
			-ms-animation: arrow 1.6s ease forwards;
			-o-animation: arrow 1.6s ease forwards;
			animation: arrow 1.6s ease forwards;
		}

			.btn-viewmore .arrow.animate em:before {
				-webkit-animation: arrowUp 1.6s ease forwards;
				-moz-animation: arrowUp 1.6s ease forwards;
				-ms-animation: arrowUp 1.6s ease forwards;
				-o-animation: arrowUp 1.6s ease forwards;
				animation: arrowUp 1.6s ease forwards;
			}

			.btn-viewmore .arrow.animate em:after {
				-webkit-animation: arrowDown 1.6s ease forwards;
				-moz-animation: arrowDown 1.6s ease forwards;
				-ms-animation: arrowDown 1.6s ease forwards;
				-o-animation: arrowDown 1.6s ease forwards;
				animation: arrowDown 1.6s ease forwards;
			}

.btn-menu,
.btn-menu:before,
.btn-menu:after {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 25px;
	height: 2px;
	background: #fff;
	cursor: pointer;
	-webkit-transition: 0.2s ease;
	-moz-transition: 0.2s ease;
	-ms-transition: 0.2s ease;
	-o-transition: 0.2s ease;
	transition: 0.2s ease;
}

	.btn-menu:before {
		content: "";
		top: 9px;
		right: 0;
	}

	.btn-menu:after {
		content: "";
		top: 18px;
		right: 0;
	}

/* ----- header ----- */

#header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 5000;
	width: 100%;
	height: 100px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

	#header:after {
		content: "";
		opacity: 0;
		visibility: hidden;
		position: absolute;
		left: 50%;
		top: 100px;
		z-index: 1;
		width: 100%;
		height: 1px;
		background: #ececec;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}

	#header .hd-logo {
		position: absolute;
		left: 36px;
		top: 42px;
		z-index: 6000;
	}

		#header .hd-logo a {
			display: block;
			width: 121px;
			height: 17px;
			background: url(../images/common/logo.png) no-repeat center;
			background-size: 100%;
		}

		#header .hd-logo .hide {
			width: 85px;
			background-repeat: no-repeat;
			background-size: 100%;
			margin-top: 2.5px;
			background-image: url('../images/common/logo-kr-w.png');
			display: inline-block;
			position: static;
			left: auto;
			margin-left: 6px;
			font-size: 1.7rem;
			color: #fff;
			font-weight: 700;
			text-indent: -9999px;
			line-height: 16.5px;
			vertical-align: middle;
			display: none;
		}

			#header .hd-logo .hide span {
				display: none;
			}

	#header .hd-menu .gnb-wrap {
		height: 100%;
	}

		#header .hd-menu .gnb-wrap .gnb {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			text-align: center;
		}

			#header .hd-menu .gnb-wrap .gnb > li {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				padding: 42px 0;
				height: 100%;
				width: 160px;
				-webkit-transition: all ease .3s;
				-moz-transition: all ease .3s;
				-ms-transition: all ease .3s;
				-o-transition: all ease .3s;
				transition: all ease .3s;
			}

				#header .hd-menu .gnb-wrap .gnb > li:after {
					content: "";
					position: absolute;
					left: 50%;
					bottom: 0;
					width: 0;
					height: 3px;
					background: #38b800;
					-webkit-transform: translate(-50%);
					-moz-transform: translate(-50%);
					-ms-transform: translate(-50%);
					-o-transform: translate(-50%);
					transform: translate(-50%);
				}

				#header .hd-menu .gnb-wrap .gnb > li > a {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 1.8rem;
					color: #fff;
					line-height: 1;
					font-weight: 600;
				}

	#header.on .hd-menu .gnb-wrap .gnb > li {
		width: 215px;
	}

		#header.on .hd-menu .gnb-wrap .gnb > li.on > a {
			color: #38b800;
		}

	#header .hd-menu .gnb-wrap .gnb > li .depth {
		opacity: 0;
		visibility: hidden;
		position: absolute;
		left: 0;
		top: 100%;
		padding-top: 2em;
		min-width: 215px;
		width: 100%;
	}

		#header .hd-menu .gnb-wrap .gnb > li .depth:before {
			content: "";
			position: absolute;
			left: 0;
			top: 30px;
			width: 1px;
			height: 300px;
			background: #ececec;
		}

	#header .hd-menu .gnb-wrap .gnb > li:first-child .depth:before {
		display: none;
	}

	#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li > a {
		display: block;
		padding: 0.52em 1em;
		font-size: 1.6rem;
		color: #666;
		letter-spacing: -0.04em;
		line-height: 1.4;
	}

	#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li {
		position: relative;
	}

		#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li > i {
			position: absolute;
			right: 0;
			top: 10px;
			font-size: 2rem;
			color: #666;
			cursor: pointer;
		}

			#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li > i:hover {
				color: #38b800;
			}

		#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li:not(.noafter) > a:after {
			content: "";
			line-height: 1;
			/*position:absolute; right:.5em; top:8px;*/
			margin-top: 2px;
			margin-left: 6px;
			font-size: 1.6rem;
			color: #ccc;
			font-family: 'xeicon', sans-serif;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			-ms-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;
		}

	#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li > a > span {
		position: relative;
	}

	#header .hd-menu .gnb-wrap .gnb > li.open .depth {
		display: block;
	}

	#header .hd-menu .gnb-wrap .gnb > li.open > a:after {
		top: 28px;
		border-left: 2px solid #999;
		border-top: 2px solid #999;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li:hover > a {
		color: #666
	}

	#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li.active > a,
	#header .hd-menu .gnb-wrap .gnb > li .depth2 > li.on > a,
	#header .hd-menu .gnb-wrap .gnb > li.open .depth > ul > li.on > a {
		color: #38b800;
	}

	#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li.on > a {
		color: #38b800;
	}

	#header .hd-menu .gnb-wrap .gnb > li .depth2 > li.on > a:hover {
		color: #38b800;
		text-decoration: none;
	}

	#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li.active > a {
		color: #38b800
	}

	#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li.active .depth2 {
		display: block;
	}

	/*    #header .hd-menu .gnb-wrap .gnb > li:not(:first-child) .depth > ul > li:hover > a {*/
	#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li:hover > a {
		text-decoration: underline;
		text-underline-position: under;
	}

	#header .hd-menu .gnb-wrap .gnb > li .depth2 > li > a:hover {
		text-decoration: underline;
		text-underline-position: under;
		color: #666;
	}

	#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li.open > a:after {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	#header .hd-menu .gnb-wrap .gnb > li .depth2 {
		display: none;
		padding: 0.5em 0;
		/*background:#f1f1f1;*/
	}

		#header .hd-menu .gnb-wrap .gnb > li .depth2 > li > a {
			display: block;
			padding: 0.333em 2.333em;
			font-size: 1.5rem;
			color: #666;
			font-weight: 300;
		}

	#header .hd-info {
		display: flex;
		align-items: center;
		position: absolute;
		right: 36px;
		top: 35px;
		z-index: 6000;
	}

		#header .hd-info .hd-search > div {
			position: relative;
		}

		#header .hd-info .hd-search .btn-search-open {
			display: block;
			width: 20px;
			height: 20px;
			border: none;
			background: url(../images/ico/ico-search.png) no-repeat center;
			font-size: 0;
			line-height: 0;
			text-indent: -9999px;
		}

		#header .hd-info .hd-search .search-wrap {
			display: none;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 9999;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.8);
		}

			#header .hd-info .hd-search .search-wrap.on {
				display: block;
			}

			#header .hd-info .hd-search .search-wrap form {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				width: 100%;
				height: 250px;
				background: #fff;
			}

			#header .hd-info .hd-search .search-wrap .btn-search-close {
				position: absolute;
				right: 0;
				margin-right: 5%;
				top: 250px;
				z-index: 10;
				margin-top: -40px;
				width: 80px;
				height: 80px;
				background: #38b800;
				font-size: 0;
				line-height: 0;
				text-indent: -9999px;
			}

				#header .hd-info .hd-search .search-wrap .btn-search-close:after {
					content: url('../../ds/images/common/ico_close_white.png');
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					font-size: 4rem;
					color: #fff;
					line-height: 1;
					text-indent: 0;
					font-family: 'xeicon', sans-serif;
				}

			#header .hd-info .hd-search .search-wrap .search-form {
				position: relative;
				padding-right: 6em;
				width: 60em;
				border-bottom: 2px solid #333;
			}

				#header .hd-info .hd-search .search-wrap .search-form .search-input {
					display: block;
					padding: 0.5em;
					width: 100%;
					height: 60px;
					border: none;
					background: transparent;
					font-size: 2rem;
					color: #333;
				}

					#header .hd-info .hd-search .search-wrap .search-form .search-input:placeholder {
						color: #f1f1f1;
					}

				#header .hd-info .hd-search .search-wrap .search-form .btn-search {
					position: absolute;
					right: 0;
					top: 0;
					width: 60px;
					height: 60px;
					background: none;
					font-size: 0;
					text-indent: -9999px;
				}

					#header .hd-info .hd-search .search-wrap .search-form .btn-search:after {
						content: url('../../ds/images/common/ico_search.png');
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
						width: 100%;
						height: 100%;
						font-size: 3rem;
						color: #333;
						text-indent: 0;
						font-family: 'xeicon', sans-serif;
					}

			#header .hd-info .hd-search .search-wrap form {
				-webkit-animation: slideUp 0.2s linear forwards;
				-moz-animation: slideUp 0.2s linear forwards;
				-ms-animation: slideUp 0.2s linear forwards;
				-o-animation: slideUp 0.2s linear forwards;
				animation: slideUp 0.2s linear forwards;
			}

			#header .hd-info .hd-search .search-wrap .btn-search-close {
				-webkit-animation: slideLeft 0.2s linear forwards;
				-moz-animation: slideLeft 0.2s linear forwards;
				-ms-animation: slideLeft 0.2s linear forwards;
				-o-animation: slideLeft 0.2s linear forwards;
				animation: slideLeft 0.2s linear forwards;
			}

			#header .hd-info .hd-search .search-wrap.active form {
				-webkit-animation: slideDown 0.2s linear forwards;
				-moz-animation: slideDown 0.2s linear forwards;
				-ms-animation: slideDown 0.2s linear forwards;
				-o-animation: slideDown 0.2s linear forwards;
				animation: slideDown 0.2s linear forwards;
			}

			#header .hd-info .hd-search .search-wrap.active .btn-search-close {
				-webkit-animation: slideRight 0.2s linear forwards;
				-moz-animation: slideRight 0.2s linear forwards;
				-ms-animation: slideRight 0.2s linear forwards;
				-o-animation: slideRight 0.2s linear forwards;
				animation: slideRight 0.2s linear forwards;
			}

			#header .hd-info .hd-search .search-wrap .keyword {
				padding: 10px 0;
			}

		#header .hd-info .hd-lang {
			position: relative;
			cursor: pointer;
		}

			#header .hd-info .hd-lang .btn-lang {
				position: relative;
				padding-right: 38px;
				margin-left: 40px;
				border: none;
				width: 30px;
				height: 30px;
				background: url(../images/ico/ico-lang.png) no-repeat left center;
			}

				#header .hd-info .hd-lang .btn-lang:after {
					content: "";
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -1px;
					border: 4px solid transparent;
					border-top: 4px solid #fff;
				}

			#header .hd-info .hd-lang ul {
				opacity: 0;
				visibility: hidden;
				position: absolute;
				left: 50%;
				top: 100%;
				z-index: 1000;
				margin-top: 10px;
				margin-left: 20px;
				padding: 0.7em 0;
				background: #fff;
				border-radius: 3px;
				-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
				box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
				-webkit-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				-o-transform: translateX(-50%);
				transform: translateX(-50%);
			}

				#header .hd-info .hd-lang ul:after {
					content: "";
					position: absolute;
					left: 50%;
					top: -10px;
					margin-left: -5px;
					border: 5px solid transparent;
					border-bottom: 5px solid #fff;
				}

				#header .hd-info .hd-lang ul li a {
					display: block;
					padding: 0.3em 1em;
					font-size: 13px;
					color: #666;
					text-align: center;
					font-family: 'xeicon', sans-serif;
					font-weight: 500;
				}

					#header .hd-info .hd-lang ul li a:hover {
						color: #38b800;
					}

		#header .hd-info .hd-text {
			width: 115px;
			background-image: url('../images/common/logo-kr-w.png');
			background-repeat: no-repeat;
			background-position: left top;
			background-size: 100%;
			margin-left: 30px;
			font-size: 1.8rem;
			color: #fff;
			font-weight: 700;
			text-indent: -9999px;
		}

		#header .hd-info .hd-lang.on .btn-lang:after {
			border-bottom: 4px solid #fff;
			border-top: none;
		}

		#header .hd-info .hd-lang.on ul {
			opacity: 1;
			visibility: visible;
		}

		#header .hd-info .hd-allmenu-open {
			display: none;
		}

/* ----- header (ONLY 1240) ----- */

@media all and (min-width:1240px) {


	#header.on {
		overflow: hidden;
		height: 465px;
		background: #fff;
		-webkit-box-shadow: 1px 1px 25px rgb(67 67 67 / 10%);
		box-shadow: 1px 1px 25px rgb(67 67 67 / 10%);
	}

		#header.on:after {
			opacity: 1;
			visibility: visible;
		}

		#header.on .hd-logo a {
			background-image: url(../../ds/images/common/logo-on.png);
		}

		#header.on .hd-menu .gnb-wrap .gnb > li > a {
			color: #666666;
		}

		#header.on .hd-info .hd-search .btn-search-open {
			background-image: url(../../ds/images/ico/ico-search-on.png);
		}

			#header.on .hd-info .hd-search .btn-search-open:before {
				background-color: #666;
			}

		#header.on .hd-info .hd-text {
			background-image: url('../images/common/logo-kr.png');
		}

		#header.on .hd-info .hd-lang .btn-lang {
			background-image: url(../../ds/images/ico/ico-lang-on.png);
		}

			#header.on .hd-info .hd-lang .btn-lang:after {
				border-top: 5px solid #333;
			}

		#header.on .hd-menu .gnb > li .depth {
			opacity: 1;
			visibility: visible;
			-webkit-transition-delay: 0.1s;
			-moz-transition-delay: 0.1s;
			-ms-transition-delay: 0.1s;
			-o-transition-delay: 0.1s;
			transition-delay: 0.1s;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			-ms-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;
		}

		#header.on .hd-logo .hide {
			color: #666;
		}

	#pc_remove {
		display: none;
	}
}

/* ----- header (ONLY 1280) ----- */

/* ----- header - reverse ----- */

#header.reverse {
	background: #fff;
}

	#header.reverse .hd-logo a {
		background-image: url(../../ds/images/common/logo-on.png);
	}

	#header.reverse .hd-menu .gnb > li > a {
		color: #666666;
	}

	#header.reverse .hd-info .hd-search .btn-search-open {
		background-image: url(../../ds/images/ico/ico-search-on.png);
	}

		#header.reverse .hd-info .hd-search .btn-search-open:before {
			background-color: #666;
		}

	#header.reverse .hd-info .hd-text {
		background-image: url('../images/common/logo-kr.png');
	}

	#header.reverse .hd-info .hd-lang .btn-lang {
		background-image: url(../../ds/images/ico/ico-lang-on.png);
	}

		#header.reverse .hd-info .hd-lang .btn-lang:after {
			border-top: 5px solid #333;
		}

	#header.reverse .btn-menu,
	#header.reverse .btn-menu:before,
	#header.reverse .btn-menu:after {
		background: #666;
	}

/* ----- footer ----- */

#footer .ft-top {
	overflow: hidden;
	position: relative;
	padding: 5em 0;
	border-top: 1px solid #ececec;
	background: #fff;
}

	#footer .ft-top .maxinner {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}

		#footer .ft-top .maxinner > div {
			width: 16.666%;
			border-right: 1px solid #ececec;
			padding: 0 2rem;
		}

			#footer .ft-top .maxinner > div:last-child {
				border-right: 0;
			}

	#footer .ft-top h3 {
		margin-bottom: .5em;
		font-size: 1.8rem;
		color: #333;
		font-weight: 600;
	}

	#footer .ft-top ul > li > a {
		display: block;
		font-size: 1.5rem;
		color: #000;
		padding: .5em 0;
		font-weight: 400;
		opacity: 0.6;
	}

		#footer .ft-top ul > li > a:hover {
			opacity: 1;
		}

		#footer .ft-top ul > li > a i {
			display: inline-block;
			margin-left: 5px;
			margin-top: -1px;
			vertical-align: top;
		}

#footer .ft-btm {
	position: relative;
	background: #333;
}

	#footer .ft-btm .topbtn {
		opacity: 0;
		visibility: hidden;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1000;
		height: 6em;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}

		#footer .ft-btm .topbtn.on {
			opacity: 1;
			visibility: visible;
			top: -6em;
		}

		#footer .ft-btm .topbtn button {
			width: 6em;
			height: 6em;
			background: #333;
		}

			#footer .ft-btm .topbtn button:hover {
				background: #262626;
			}

			#footer .ft-btm .topbtn button:after {
				content: url('../../ds/images/common/ico-up-arrow.png');
				position: absolute;
				left: 50%;
				top: 50%;
				font-size: 2.5rem;
				color: #fff;
				font-family: 'xeicon', sans-serif;
				margin-top: -0.5em;
				margin-left: -0.5em
			}

.sub #footer .ft-btm .topbtn {
	position: fixed;
	top: auto;
	bottom: 0;
}

	.sub #footer .ft-btm .topbtn.fixed {
		opacity: 1;
		visibility: visible;
	}

	.sub #footer .ft-btm .topbtn.on {
		position: absolute;
		top: -6em;
		bottom: auto;
	}

#footer .ft-btm .ft-country {
	height: 0;
	overflow: hidden;
	visibility: hidden;
	position: absolute;
	left: 0;
	bottom: 100%;
	z-index: 3000;
	width: 100%;
	background: #333;
	border-bottom: 1px solid #434343;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

#footer.open .ft-btm .ft-country {
	opacity: 1;
	visibility: visible;
	padding: 5em 0;
	height: 215px;
}

#footer .ft-btm .ft-country .maxinner > div {
	display: flex;
	padding-top: 1.5em;
}

	#footer .ft-btm .ft-country .maxinner > div:first-child {
		padding-top: 0;
	}

#footer .ft-btm .ft-country h2 {
	width: 8.750em;
	font-size: 1.6rem;
	color: #fff;
	line-height: 1.750em;
}

#footer .ft-btm .ft-country ul {
	width: calc(100% - 14em);
}

	#footer .ft-btm .ft-country ul li {
		display: inline-block;
		margin: 0.5em 0;
		margin-left: 3.5em;
		vertical-align: middle;
	}

		#footer .ft-btm .ft-country ul li a {
			position: relative;
			font-size: 1.5rem;
			color: #fff;
			opacity: .6;
			font-weight: 300;
			letter-spacing: -0.25px;
		}

			#footer .ft-btm .ft-country ul li a:after {
				content: "";
				position: absolute;
				left: 0;
				bottom: -2px;
				width: 0;
				height: 1px;
				background: #fff;
			}

			#footer .ft-btm .ft-country ul li a:hover {
				opacity: 1;
			}

				#footer .ft-btm .ft-country ul li a:hover:after {
					width: 100%;
					-webkit-transition: all 0.3s;
					-moz-transition: all 0.3s;
					-ms-transition: all 0.3s;
					-o-transition: all 0.3s;
					transition: all 0.3s;
				}

			#footer .ft-btm .ft-country ul li a i {
				display: inline-block;
				margin-left: 10px;
				margin-top: -1px;
				vertical-align: top;
			}

#footer .ft-btm .ft-info {
	padding: 1.5em 0;
	border-bottom: 1px solid #434343;
}

	#footer .ft-btm .ft-info .maxinner {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#footer .ft-btm .ft-info .left ul {
		display: flex;
		align-items: center;
	}

		#footer .ft-btm .ft-info .left ul > li {
			position: relative;
			padding-right: 3.5em;
		}

			#footer .ft-btm .ft-info .left ul > li:after {
				content: "/";
				position: absolute;
				right: 12.5px;
				top: 50%;
				font-size: 0.5rem;
				font-weight: 700;
				color: #666;
				-webkit-transform: scale(0.8) rotate(10deg) translate(-50%, -50%);
				-moz-transform: scale(0.8) rotate(10deg) translate(-50%, -50%);
				-ms-transform: scale(0.8) rotate(10deg) translate(-50%, -50%);
				-o-transform: scale(0.8) rotate(10deg) translate(-50%, -50%);
				transform: scale(0.8) rotate(10deg) translate(-50%, -50%);
			}

			#footer .ft-btm .ft-info .left ul > li:last-child {
				padding-right: 0;
			}

				#footer .ft-btm .ft-info .left ul > li:last-child:after {
					display: none;
				}

			#footer .ft-btm .ft-info .left ul > li > a {
				position: relative;
				font-size: 1.5rem;
				color: #999999;
				font-weight: 300;
			}

				#footer .ft-btm .ft-info .left ul > li > a:hover {
					color: #fff;
					font-weight: 300;
				}

				#footer .ft-btm .ft-info .left ul > li > a.btn-company {
					padding-right: 23px;
				}

					#footer .ft-btm .ft-info .left ul > li > a.btn-company:after {
						content: "";
						position: absolute;
						left: 0;
						bottom: -5px;
						width: 0;
						height: 1px;
						background: #fff;
					}

/*    #footer .ft-btm .ft-info .left ul > li > a.btn-company:before {
        content: url('../../ds/images/common/ico_add.png');
        position: absolute;
        top: -0.5px;
        font-size: 1.8rem;
        font-family: 'xeicon', sans-serif;
        padding-left: 80px;
    }
*/
#footer.open .ft-btm .ft-info .left ul > li > a.btn-company {
	color: #fff;
}

	#footer.open .ft-btm .ft-info .left ul > li > a.btn-company:after {
		width: 100%;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}

	#footer.open .ft-btm .ft-info .left ul > li > a.btn-company:before {
		content: "\e91e";
	}

/*
#footer .ft-btm .ft-info .left ul > li > a:after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:#fff;} 
#footer .ft-btm .ft-info .left ul > li > a:hover:after { width:100%;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-ms-transition:all 0.3s;
	-o-transition:all 0.3s;
	transition:all 0.3s;
}
*/

#footer .ft-btm .ft-info .left ul > li > a > strong {
	color: #fff;
	font-weight: 300;
}

	#footer .ft-btm .ft-info .left ul > li > a > strong i {
		display: inline-block;
		margin-left: 10px;
		margin-top: -1px;
		vertical-align: top;
	}

#footer .ft-btm .ft-info .right {
	display: flex;
	align-items: center;
}

	#footer .ft-btm .ft-info .right .sns-list {
		display: flex;
		gap: 5px;
		margin-right: 2em;
	}

		#footer .ft-btm .ft-info .right .sns-list .ico-youtube {
			display: block;
			width: 100%;
			height: 100%;
			background-image: url('../../ds/images/common/ico-youtube.png');
			background-repeat: no-repeat;
			background-position: center;
		}

		#footer .ft-btm .ft-info .right .sns-list li:first-child a:hover > i {
			background-image: url('../../ds/images/common/ico-youtube-on.png');
		}



		#footer .ft-btm .ft-info .right .sns-list .xi-linkedin {
			display: block;
			width: 100%;
			height: 100%;
			background-image: url('../../ds/images/common/ico_facebook.png');
			background-repeat: no-repeat;
			background-position: center;
		}

		#footer .ft-btm .ft-info .right .sns-list li:nth-child(2) a:hover > i {
			background-image: url('../../ds/images/common/ico_facebook-on.png');
		}

		#footer .ft-btm .ft-info .right .sns-list li a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 2.188em;
			height: 2.188em;
			border-radius: 50%;
			background: #434343;
			font-size: 1.6rem;
			color: #999;
			transition: all ease .3s;
		}

			#footer .ft-btm .ft-info .right .sns-list li a:hover {
				color: #fff;
			}

	#footer .ft-btm .ft-info .right .site-wrap {
		position: relative;
	}

		#footer .ft-btm .ft-info .right .site-wrap .btn-site {
			position: relative;
			padding: 1.286em 1.429em;
			width: 240px;
			background: #262626;
			font-size: 1.4rem;
			color: #999;
			font-weight: 400;
			text-align: left !important;
		}

			#footer .ft-btm .ft-info .right .site-wrap .btn-site:after {
				content: "";
				position: absolute;
				right: 20px;
				top: 50%;
				width: 8px;
				height: 8px;
				border-left: 2px solid #999;
				border-top: 2px solid #999;
				-webkit-transition: all 0.3s;
				-moz-transition: all 0.3s;
				-ms-transition: all 0.3s;
				-o-transition: all 0.3s;
				transition: all 0.3s;
				-webkit-transform: rotate(225deg);
				-moz-transform: rotate(225deg);
				-ms-transform: rotate(225deg);
				-o-transform: rotate(225deg);
				transform: rotate(225deg);
				-webkit-transform-origin: center 0;
				-moz-transform-origin: center 0;
				-ms-transform-origin: center 0;
				-o-transform-origin: center 0;
				transform-origin: center 0;
			}

		#footer .ft-btm .ft-info .right .site-wrap ul {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			bottom: 100%;
			z-index: 3000;
			width: 100%;
			background: #fff;
			border: 1px solid #262626;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			-ms-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;
			padding: 1em 0;
		}

			#footer .ft-btm .ft-info .right .site-wrap ul li a {
				display: block;
				padding: .5em 1.429em;
				font-size: 1.4rem;
				color: #999;
			}

				#footer .ft-btm .ft-info .right .site-wrap ul li a:hover {
					color: #000;
				}

		#footer .ft-btm .ft-info .right .site-wrap.on ul {
			opacity: 1;
			visibility: visible;
		}

		#footer .ft-btm .ft-info .right .site-wrap.on .btn-site:after {
			margin-top: 2px;
			-webkit-transform: rotate(45deg) translateY(-50%);
			-moz-transform: rotate(45deg) translateY(-50%);
			-ms-transform: rotate(45deg) translateY(-50%);
			-o-transform: rotate(45deg) translateY(-50%);
			transform: rotate(45deg) translateY(-50%);
		}

#footer .ft-btm .ft-copy .maxinner {
	position: relative;
	padding: 4em 0;
}

#footer .ft-btm .ft-copy h2 {
	display: inline-block;
	vertical-align: middle
}

	#footer .ft-btm .ft-copy h2 a {
		display: block;
		width: 132px;
		height: 20px;
		background: url(../images/common/logo.png) no-repeat center;
		background-size: 100%;
	}

#footer .ft-btm .ft-copy p {
	display: inline-block;
	margin-left: 3.929em;
	font-size: 1.4rem;
	color: #666666;
	vertical-align: middle;
}

#footer .ft-btm .ft-info .right .sns-list .ico-youtube {
	background-size: 60%;
}

/* ---------------------- */

/* ----- RESPONSIVE ----- */

/* ---------------------- */

@media all and (max-width:1600px) {
	#header .hd-info .hd-lang .btn-lang {
		margin-left: 25px;
	}

	#header .hd-menu .gnb-wrap .gnb {
		margin-left: -3em;
	}

		#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li > a {
			padding: 0.5em 1em;
			font-size: 1.5rem;
		}

		#header .hd-menu .gnb-wrap .gnb > li {
			width: 140px;
		}

	#header.on .hd-menu .gnb-wrap .gnb > li {
		width: 170px;
	}

		#header.on .hd-menu .gnb-wrap .gnb > li:first-child {
			width: 210px;
		}

	#header.reverse .hd-logo .hide {
		background-image: url('../images/common/logo-kr.png');
	}

	#header .hd-menu .gnb-wrap .gnb > li .depth {
		min-width: auto;
	}
}

@media all and (max-width: 1440px) {
	html {
		font-size: 58%;
	}

	#header .hd-info .hd-lang .btn-lang {
		margin-left: 20px;
	}

	#header .hd-info .hd-text {
		margin-left: 15px;
	}

	#header .hd-menu .gnb-wrap .gnb {
		margin-left: -4.5em;
	}

		#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li > a {
			padding: 0.5em;
			font-size: 1.6rem;
		}

	#header.on .hd-menu .gnb-wrap .gnb > li {
		width: 140px;
	}

		#header.on .hd-menu .gnb-wrap .gnb > li:first-child {
			width: 190px;
		}
}

@media all and (max-width: 1240px) {
	html {
		font-size: 55%;
	}

	#header {
		height: 70px;
	}

		#header:after {
			display: none !important;
		}

		#header .hd-logo {
			position: relative;
			display: flex;
			align-items: center;
			top: auto;
			left: auto;
			height: 70px;
			padding-left: 16px;
		}

			#header .hd-logo a {
				padding-left: 90px;
				width: auto;
				background-size: 90px;
				background-position: left top 2.5px;
				height: auto;
			}

			#header .hd-logo .hide {
				display: inline-block;
			}

				#header .hd-logo .hide span {
					display: none;
				}

		#header .hd-info {
			right: 16px;
			top: 20px
		}

			#header .hd-info .hd-text {
				display: none;
			}

			#header .hd-info .hd-lang .btn-lang {
				margin-left: 20px;
				margin-right: 20px;
			}

			#header .hd-info .hd-lang ul {
				margin-left: 0;
			}

			#header .hd-info .hd-allmenu-open {
				display: block;
				position: relative;
				z-index: 6000;
				width: 25px;
				height: 20px;
				cursor: pointer;
			}

			#header .hd-info .hd-search .search-wrap .btn-search-close {
				top: 310px;
			}

		#header .hd-menu {
			opacity: 0;
			visibility: hidden;
			position: fixed;
			left: 0;
			top: 0;
			padding-left: 0;
			max-width: none;
			width: 100%;
			height: 100%;
			-webkit-transition: all 0.2s;
			-moz-transition: all 0.2s;
			-ms-transition: all 0.2s;
			-o-transition: all 0.2s;
			transition: all 0.2s;
		}

			#header .hd-menu .hd-mak {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
			}

			#header .hd-menu .gnb-wrap {
				position: fixed;
				right: -100%;
				top: 0;
				margin: 0;
				padding: 0;
				padding-top: 70px;
				z-index: 5000;
				max-width: none;
				min-width: 300px;
				width: 50%;
				height: 100%;
				background-color: #fff;
				-webkit-transition: all 0.2s;
				-moz-transition: all 0.2s;
				-ms-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
			}

				#header .hd-menu .gnb-wrap .gnb {
					display: block;
					overflow-y: scroll;
					padding: 0 0 80px;
					margin-left: 0;
					width: 100%;
					height: 100%;
					-ms-overflow-style: none;
					scrollbar-width: none;
					scroll-behavior: smooth;
				}

					#header .hd-menu .gnb-wrap .gnb::-webkit-scrollbar {
						display: none;
					}

					#header .hd-menu .gnb-wrap .gnb > li {
						display: block;
						padding: 0 !important;
						width: 100%;
						height: auto;
					}

						#header .hd-menu .gnb-wrap .gnb > li.open > a {
							color: #38b800;
						}

							#header .hd-menu .gnb-wrap .gnb > li.open > a:after {
								border-color: #38b800
							}
						/*        #header .hd-menu .gnb-wrap .gnb > li:not(:first-child) .depth > ul > li:hover > a,*/
						#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li:hover > a,
						#header .hd-menu .gnb-wrap .gnb > li .depth2 > li > a:hover {
							text-decoration: none;
						}

						#header .hd-menu .gnb-wrap .gnb > li > a {
							display: block;
							position: relative;
							padding: 22px;
							color: #666;
							font-size: 18px;
							text-align: left;
						}

							#header .hd-menu .gnb-wrap .gnb > li > a:after {
								content: "";
								position: absolute;
								right: 20px;
								top: 35px;
								width: 8px;
								height: 8px;
								border-left: 2px solid #999;
								border-top: 2px solid #999;
								-webkit-transition: all 0.3s;
								-moz-transition: all 0.3s;
								-ms-transition: all 0.3s;
								-o-transition: all 0.3s;
								transition: all 0.3s;
								-webkit-transform: rotate(225deg);
								-moz-transform: rotate(225deg);
								-ms-transform: rotate(225deg);
								-o-transform: rotate(225deg);
								transform: rotate(225deg);
								-webkit-transform-origin: 0 0;
								-moz-transform-origin: 0 0;
								-ms-transform-origin: 0 0;
								-o-transform-origin: 0 0;
								transform-origin: 0 0;
							}

						#header .hd-menu .gnb-wrap .gnb > li .depth:before,
						#header .hd-menu .gnb-wrap .gnb > li .depth:after {
							display: none !important;
						}

						#header .hd-menu .gnb-wrap .gnb > li .depth {
							opacity: 1;
							visibility: visible;
							display: none;
							position: static;
							padding: 10px 20px;
							background: #fafafa;
							margin-bottom: 10px;
						}

							#header .hd-menu .gnb-wrap .gnb > li .depth li a {
								padding: 7px 10px;
								text-align: left !important;
							}

							#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li > a {
								padding: 7px 10px;
								font-size: 15px;
								justify-content: start
							}

							#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li.on > a {
								color: #38b800;
							}

						#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li > a:after {
							position: absolute;
							right: 3px;
							top: 7px;
							margin: 0;
						}

						#header .hd-menu .gnb-wrap .gnb > li .depth2 {
							padding: 0.5em 0 2em;
						}

							#header .hd-menu .gnb-wrap .gnb > li .depth2 > li > a {
								font-size: 15px;
							}

							#header .hd-menu .gnb-wrap .gnb > li .depth2 > li.on > a {
								color: #38b800;
							}

						#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li > a > span:before {
							display: none !important;
						}

		#header.menu-open .hd-menu {
			opacity: 1;
			visibility: visible;
		}

			#header.menu-open .hd-menu .gnb-wrap {
				right: 0;
			}

		#header.menu-open .btn-menu {
			top: 8px;
			-webkit-transform: rotate(180deg);
			-moz-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
			-o-transform: rotate(180deg);
			transform: rotate(180deg);
			-webkit-transition: transform 0.2s ease;
			-moz-transition: transform 0.2s ease;
			-ms-transition: transform 0.2s ease;
			-o-transition: transform 0.2s ease;
			transition: transform 0.2s ease;
		}

			#header.menu-open .btn-menu:before {
				width: 8px;
				top: 0;
				right: 20px;
				-webkit-transform: rotate(-45deg) translateX(5px);
				-moz-transform: rotate(-45deg) translateX(5px);
				-ms-transform: rotate(-45deg) translateX(5px);
				-o-transform: rotate(-45deg) translateX(5px);
				transform: rotate(-45deg) translateX(5px);
				-webkit-transition: transform 0.2s ease;
				-moz-transition: transform 0.2s ease;
				-ms-transition: transform 0.2s ease;
				-o-transition: transform 0.2s ease;
				transition: transform 0.2s ease;
			}

			#header.menu-open .btn-menu:after {
				width: 8px;
				top: 0;
				right: 20px;
				-webkit-transform: rotate(45deg) translateX(5px);
				-moz-transform: rotate(45deg) translateX(5px);
				-ms-transform: rotate(45deg) translateX(5px);
				-o-transform: rotate(45deg) translateX(5px);
				transform: rotate(45deg) translateX(5px);
				-webkit-transition: transform 0.2s ease;
				-moz-transition: transform 0.2s ease;
				-ms-transition: transform 0.2s ease;
				-o-transition: transform 0.2s ease;
				transition: transform 0.2s ease;
			}

			#header.menu-open .btn-menu,
			#header.menu-open .btn-menu:before,
			#header.menu-open .btn-menu:after {
				background-color: #666 !important;
			}

		#header.menu-open .hd-info .hd-search .btn-search-open {
			background-image: url(../../ds/images/ico/ico-search-on.png) !important;
		}

		#header.menu-open .hd-info .hd-lang .btn-lang {
			background-image: url(../../ds/images/ico/ico-lang-on.png) !important;
		}

			#header.menu-open .hd-info .hd-lang .btn-lang:after {
				border-top: 5px solid #666 !important;
			}

		#header.menu-open .hd-logo a {
			background-image: url(../images/common/logo.png) !important;
		}

		#header.menu-open .hd-logo .hide {
			background-image: url('../images/common/logo-ko-cpn-m.png');
		}

		#header.on .hd-menu .gnb-wrap .gnb > li {
			width: auto !important;
		}

	#footer .ft-btm .ft-info {
		padding: 0;
	}

		#footer .ft-btm .ft-info .maxinner {
			flex-wrap: wrap;
			padding: 2em 0;
		}

			#footer .ft-btm .ft-info .maxinner .left {
				width: 100%;
			}

			#footer .ft-btm .ft-info .maxinner .right {
				margin-top: 1em;
				max-width: 240px;
				width: 100%;
			}

		#footer .ft-btm .ft-info .left ul {
			flex-wrap: wrap;
		}

			#footer .ft-btm .ft-info .left ul > li {
				padding: 0 20px 0 0 !important;
				margin: 10px;
				text-align: center;
			}

				#footer .ft-btm .ft-info .left ul > li:after {
					right: -5px;
				}

	#footer .ft-btm .ft-copy h2 a {
		width: 90px;
		background-size: 90px;
	}

	#footer .ft-btm .ft-copy p {
		margin-left: 2.5em;
	}

	#footer .ft-top {
		display: none;
	}

	#footer.open .ft-btm .ft-country {
		height: 182px;
	}
}

@media all and (max-width:767px) {
	html {
		font-size: 53%;
	}

	#header .hd-menu .gnb-wrap .gnb > li > a {
		padding: 15px 22px;
	}

		#header .hd-menu .gnb-wrap .gnb > li > a:after {
			top: 26px;
			right: 22px;
		}

	#header .hd-menu .gnb-wrap .gnb > li.open > a:after {
		top: 18px;
	}

	#header .hd-info .hd-lang .btn-lang {
		margin-left: 20px;
		margin-right: 15px;
	}

	#header .hd-info .hd-search .search-wrap form {
		height: 150px;
	}

	#header .hd-info .hd-search .search-wrap .btn-search-close {
		top: 150px;
		margin-top: -30px;
		width: 60px;
		height: 60px;
	}

	#header .hd-info .hd-search .search-wrap .search-form {
		padding-right: 60px;
		min-width: auto;
		margin: 0 5%;
		width: 90%;
		font-size: 1.8rem;
	}

	#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li > i {
		top: 10px;
	}

	#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li > a:after {
		top: 7px;
	}

	#footer .ft-top {
		display: none;
	}

	#footer .ft-btm .ft-info .left ul > li {
		padding-right: 12px !important;
		margin: 10px 3px;
	}

		#footer .ft-btm .ft-info .left ul > li > a.btn-company {
			padding-right: 20px;
		}

		#footer .ft-btm .ft-info .left ul > li:after {
			right: 0;
		}

	#footer .ft-btm .ft-copy .maxinner {
		padding: 2.5em 0;
	}

	#footer .ft-btm .ft-info .right .site-wrap ul li a {
		font-size: 1.5rem;
	}

	#footer .ft-btm .ft-country .maxinner > div {
		flex-wrap: wrap;
	}

	#footer .ft-btm .ft-country h2 {
		margin: 5px 0 7px;
		width: 100%;
		line-height: 1.438em;
	}

	#footer .ft-btm .ft-country ul {
		margin-left: -20px;
		width: 100%;
	}

		#footer .ft-btm .ft-country ul li {
			margin-left: 20px;
		}

	#footer.open .ft-btm .ft-country {
		padding: 3em 0;
		height: auto;
	}

}

@media all and (max-width:480px) {
	#header .hd-info .hd-search .search-wrap .search-form {
		min-width: auto;
	}

	.btn-viewmore:hover .arrow:after,
	.btn-viewmore:hover .arrow:before,
	.btn-viewmore .arrow svg {
		display: none;
	}
}

@media all and (max-width:370px) {
	#header .hd-info .hd-lang .btn-lang {
		padding-right: 33px;
		margin-left: 15px;
		margin-right: 12px;
	}
}

/* ------------------------------- */

/* ----- RESPONSIVE(+ADD EN) ----- */

#header .hd-info .hd-lang .btn-lang {
	margin-left: 20px;
}

#header .hd-info .hd-text {
	width: 216px;
	height: 25px;
	background-image: url('../../ds/images/common/logo-en-w.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	margin-left: 20px;
	margin-top: 2px
}

#header .hd-menu .gnb-wrap .gnb > li .depth:before {
	height: 360px;
}

/* #header.on {
    height: 520px;
}*/

#header.on .hd-info .hd-text {
	background-image: url('../../ds/images/common/logo-en.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}

#header.reverse .hd-info .hd-text {
	background-image: url('../../ds/images/common/logo-en.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}

#header .hd-logo .hide {
	width: 170px;
	height: 20px;
	background-image: url('../../ds/images/common/logo-en-w.png');
	/*    background-position-x: -42px;*/
}

#header.reverse .hd-logo .hide {
	background-image: url('../../ds/images/common/logo-en.png');
}

#header.menu-open .hd-logo .hide {
	background-image: url('../../ds/images/common/logo-en-w.png');
}

#header.on .hd-logo .hide {
	background-image: url('../../ds/images/common/logo-en.png');
}

@media all and (max-width:1850px) {
	/*
	.en #header .hd-info .hd-text {display: none;} 
	.en #header .hd-logo .hide { display: inline-block;}
    .en #header .hd-logo a {
        padding-left: 121px;
        background-size: 121px;
    }
    */
	.last-year {
		text-align: center;
	}
}

@media all and (max-width:1600px) {
	/*
	.en #header .hd-logo{top:32px}
	.en #header .hd-logo a {
		padding-left: 90px;
		width: auto;
		background-size: 90px;
		background-position: left top 2.5px;
		height: auto;
	}
	*/
}

@media all and (max-width:1240px) {

	.en #header .hd-logo {
		top: auto
	}

	#header .hd-logo .hide {
		margin-top: 2.5px;
		background-position-x: -52px !important
	}

	#pc_remove {
		display: inline;
	}
}

@media all and (max-width:360px) {
}

/* ------------------------------- */