@charset "utf-8";

.logo{top: 19px;}
.logo strong:not(#footer .logo strong){
	width: 260px;
}

@media (max-width: 1024px) {
    .logo {
		top: 11px;
	}
}

@media (max-width: 768px) {
    .logo {
		top: 8px;
	}
}

@media (max-width: 568px) {
	.logo {
		top: 3px;
	}
}
/**
공통 레이아웃
*/
/*
서브 레이아웃
*/
#container_sub {
	overflow: hidden;
	position: relative;
	width: 100%;
}

#container_sub:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 220px;
	background: #eef6ee url(../images/kr/common/subvisual.png) no-repeat;
	background-size: cover;
	content: '';
}

#subContent {
	margin: 0 auto;
	padding: 0 0 20em 0;
	position: relative;
	max-width: 1400px;
	box-sizing: border-box;
}

#subContent:after {
	display: block;
	clear: both;
	content: '';
}

/*
서브 레이아웃
*/
#container_sub{ overflow:hidden;position:relative; width:100%;}
#container_sub:before{display: block;position: absolute;top: 0;left: 0;width: 100%;height: 80px;background: #e7eaf1a3;background-size: cover;content: '';}
#subContent{margin:0 auto;padding: 0 0 10em 0;position:relative;max-width: 1650px;box-sizing:border-box;}
#subContent:after{ display:block; clear:both;content:'';}
#subContent #content{padding-right: 0;padding-left: 3rem;position: relative;width: calc(100% - 20.6%);float:right;float: left;}
@media screen and (max-width: 1500px){
	#subContent #content{margin: 0 auto;padding-right: 0;padding-left: 2.125rem;width: calc(100% - 22.1%);}
}

/* 서브메뉴 */
.location {padding: 0;font-size: 22px;}
.location span:before{display: none;}
.location strong{color: #3F58D4;}
.util_wrap { position: initial; }

.btn_copy{ margin: 0; box-shadow: 0 0 10px rgba(130, 101, 20, 0.4);width: 38px; height: 38px; background-position: -52px 11px;}
#submenu{padding: 145px 0 0 10px;position:relative;z-index:1;width: 16.6%;float:left;}
#submenu .sm_tit{display:flex;align-content: center;justify-content:center;flex-wrap: wrap;margin: 0 0 15px;overflow:hidden;position:relative;width:100%;height: 180px;background: linear-gradient(90deg, #3a4eb3 0%, #3876b1 100%);background-size: cover;color:#fff;text-align:center;border-radius:4px;}
#submenu .sm_tit h2{vertical-align:middle;font-size: 30px;font-weight: 800;line-height:110%;}
#submenu .sm_tit p {margin: 20px 0 0;font-family: 'gmarket';font-size: 11px;font-weight: 800;line-height: 1.6;text-transform: uppercase;letter-spacing: 0.05em;opacity: 0.3;}
#submenu .depth2 > li{ margin:0 0 10px;line-height:0;}
#submenu .depth2 > li > a{display:flex;align-items:center;padding: 0 50px 0 30px;position:relative;height:55px;line-height:120%;color:#666;text-decoration:none;border-radius:5px;/* border:1px solid #ddd; */}
#submenu .depth2 > li > a:after{position:absolute;top:50%;right:26px;width:20px;height:4px;background: url(/images/kr/common/ico_snb.png) no-repeat 0 100%;content:'';transform:translateY(-50%);}
#submenu .depth2 > li:hover > a,
#submenu .depth2 > li > a:hover,
#submenu .depth2 > li > a:focus,
#submenu .depth2 > li > a:active,
#submenu .depth2 > li.current_on > a{position:relative;font-weight: 700;color: #32a296;/* border-color: #32a296; *//* box-shadow: 0 0 13px 0 rgba(49,162,150,.2); */}
#submenu .depth2 > li.current_on .hasUl{border-radius:5px 5px 0 0;}
#submenu .depth2 > li:hover > a:after,
#submenu .depth2 > li.current_on > a:after,
#submenu .depth2 > li > a:hover:after{height:20px; background-position:0 0;}

#submenu .depth2 li ul {display:none;margin: 8px 0 0;padding: 11px 10px 10px 30px;background: linear-gradient(to right, #f3f8eb 20%, #e6f4f3 100%);border-radius: 5px;}
#submenu .depth2 > li > a[target="_blank"]:before{width:10px; height:10px; background:url(/images/common/ico_blank.png) no-repeat;}

#submenu .depth2 li ul li a{display:block;padding: 0.5em 0 0.5em 15px;position:relative;line-height:100%;color: #777;}
#submenu .depth2 li ul li a:before{display:block;position:absolute;top:13px;left:0;width: 5px;height: 5px;background:#ababab;content:'';border-radius: 1px;}
#submenu .depth2 li ul li a:hover,
#submenu .depth2 li ul li a:focus,
#submenu .depth2 li ul li a:active,
#submenu .depth2 li ul li.current_on a{font-weight: 600;color: #333;}
#submenu .depth2 li ul li a:hover:before,
#submenu .depth2 li ul li a:focus:before,
#submenu .depth2 li ul li.current_on a:before{background: #32a296;}
#submenu .depth2 li ul li a[target="_blank"]:after{ display:block; margin:-5px 0 0 0; position:absolute; top:50%; right:10px; width:10px; height:10px; vertical-align:middle; background:url(/images/common/ico_blank.png) no-repeat;content:'';}

#sub_default{padding:146px 0 0 0; line-height:170%;}
@media all and (max-width:1430px) {
	#subContent{padding:0 15px 10em;}
}
@media all and (max-width:1280px) {
	#subContent #content{padding-left: 34px;width: 79%;}
	#submenu{width:19%;}
}
@media all and (max-width:1024px) {
	#container_sub:before,
	#container_sub:after{display:none;}
	#subContent{ margin:0 auto; padding:0 0 7em;width:100%;}
	#subContent #content{padding-left: 0;width:100%;}
	#sub_default{padding:30px 15px 0;}
}
@media all and (max-width:768px) {
	#sub_default{padding:25px 10px 0;}
}
@media all and (max-width:380px) {
	#sub_default{padding:22px 10px 0;}
}

#submenu .sm_tit h2 {
	vertical-align: middle;
	font-size: 30px;
	font-weight: 800;
	line-height: 110%;
}

#submenu .sm_tit p {
	margin: 20px 0 0;
	font-family: 'gmarket';
	font-size: 11px;
	font-weight: 800;
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.3;
}

#submenu .depth2{
	border: 1px solid #ddd;
}

#submenu .depth2>li {
	margin: 0;
	line-height: 0;
}

#submenu .depth2>li>a {
	display: flex;
	align-items: center;
	padding: 0 50px 0 30px;
	border: none;
	border-bottom: 1px dashed #ddd;
	position: relative;
	height: 46px;
	line-height: 1;
	color: #666;
	text-decoration: none;
	border-radius: 5px;
	transition: .3s;
}

#submenu .depth2>li:last-child > a{
	border-bottom:none
}

#submenu .depth2>li>a:after {
	position: absolute;
	top: 50%;
	right: 26px;
	width: 20px;
	height: 4px;
	background: url(../images/kr/common/ico_snb.png) no-repeat 0 100%;
	content: '';
	transform: translateY(-50%);
}

#submenu .depth2>li:hover>a,
#submenu .depth2>li>a:hover,
#submenu .depth2>li>a:focus,
#submenu .depth2>li>a:active,
#submenu .depth2>li.current_on>a {
	border: none;
	border-bottom: 1px dashed #ddd;
	box-shadow: none;
	position: relative;
	font-weight: 700;
	color: #3876b1;
	transition: .3s;
}

#submenu .depth2>li:last-child>a:hover{
	border-bottom: none;
}

#submenu .depth2>li.current_on .hasUl {
	border-radius: 5px 5px 0 0;
}

#submenu .depth2>li:hover>a:after,
#submenu .depth2>li.current_on>a:after,
#submenu .depth2>li>a:hover:after {
	height: 20px;
	background-position: 0 0;
}

#submenu .depth2 li ul {
	display: none;
	margin: 8px 0 0;
	padding: 11px 10px 10px 30px;
	background: linear-gradient(to right, #f3f8eb 20%, #e6f4f3 100%);
	border-radius: 5px;
}

#submenu .depth2>li>a[target="_blank"]:before {
	width: 10px;
	height: 10px;
	background: url(../images/common/ico_blank.png) no-repeat;
}

#submenu .depth2 li ul li a {
	display: block;
	padding: 0.5em 20px 0.5em 15px;
	position: relative;
	line-height: 100%;
	color: #777;
}

#submenu .depth2 li ul li a:before {
	display: block;
	position: absolute;
	top: 13px;
	left: 0;
	width: 5px;
	height: 5px;
	background: #ababab;
	content: '';
	border-radius: 1px;
}

#submenu .depth2 li ul li a:hover,
#submenu .depth2 li ul li a:focus,
#submenu .depth2 li ul li a:active,
#submenu .depth2 li ul li.current_on a {
	font-weight: 600;
	color: #333;
}

#submenu .depth2 li ul li a:hover:before,
#submenu .depth2 li ul li a:focus:before,
#submenu .depth2 li ul li.current_on a:before {
	background: #32a296;
}

#submenu .depth2 li ul li a[target="_blank"]:after {
	display: block;
	margin: -5px 0 0 0;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 10px;
	height: 10px;
	vertical-align: middle;
	background: url(../images/common/ico_blank.png) no-repeat;
	content: '';
}

#sub_default {
	padding: 90px 0 0 0;
	line-height: 170%;
}

@media all and (max-width:1430px) {
	#subContent {
		padding: 0 15px 10em;
	}
}

@media all and (max-width:1280px) {
	#subContent #content {
		width: 76%;
	}

	#submenu {
		width: 19%;
	}
}

@media all and (max-width:1024px) {

	#container_sub:before,
	#container_sub:after {
		display: none;
	}

	#subContent {
		margin: 0 auto;
		padding: 0 0 7em;
		width: 100%;
	}

	#subContent #content {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	#sub_default {
		padding: 30px 15px 0;
	}
}

@media all and (max-width:768px) {
	#sub_default {
		padding: 25px 10px 0;
	}
}

@media all and (max-width:380px) {
	#sub_default {
		padding: 22px 10px 0;
	}
}

/* 문서정보 */
#pageInfo {
	padding: 26px 0px 0 0;
	position: relative;
	left: -13%;
	width: 100%;
	box-sizing: border-box;
}

#pageTitle {
	text-align: center;
}

#pageTitle h3 {
	display: none;
	padding: 0;
	position: relative;
	font-size: 30px;
	font-weight: 700;
	line-height: 110%;
}

@media all and (max-width:1024px) {
	#pageInfo {
		padding: 18px 15px 15px 18px;
		left: 0;
		height: auto;
		background: #e7eaf1a3;
		background-size: cover;
	}

	#pageTitle h3 {
		padding: 0;
		font-size: 26px;
		letter-spacing: -2px;
	}

	.location span{
		font-size: 20px;
	}
}

@media all and (max-width:768px) {
	#pageInfo {
		padding: 10px 10px 12px 10px;
	}

	#pageTitle h3 {
		font-size: 23px;
		letter-spacing: -1.5px;
	}

	.location span{
		font-size: 18px;
	}
}

@media all and (max-width:568px) {
	#pageTitle {
		text-align: left;
	}

	#pageTitle h3 {
		font-size: 20px;
	}
}

#sns { top: 78px;right: 39%;}

@media all and (max-width:1580px) {
    #sns {right: 42%;}
}

@media all and (max-width:1440px) {
    #sns {right: 16px;}
}

@media all and (max-width:1024px) {
    #sns {top: 60px;}
}

@media screen and (max-width: 768px) {
	#sns {top: 60px;}
}

@media screen and (max-width: 568px) {
	#sns {top: 0px;}
	.btn_copy{width: 30px; height: 30px; background-position: -56px 7px;}
}

@media screen and (max-width: 1024px) {
	#fontSize{
		padding-inline: 16px;
		width: calc(100% - 32px);
	}
}