@charset "UTF-8";

#hd,
#ft {
	flex-shrink: 0
}

.container {
	position: relative;
	width: 100%;
	max-width: 1260px;
	padding-left: 30px;
	padding-right: 30px;
}

.container-fluid {
	max-width: none
}

/* Header */
#hd {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 100;
	background: #ffffff;
	border-bottom: 1px solid #cccccc;
	transition: background-color 0s ease-out, border 0s ease-out;
	/*box-shadow: inset 0px -1px 0 0 rgba(0, 0, 0, .15);*/
}

#hd>.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	box-shadow: inset 0px -1px 0 0 rgb(255, 255, 255, .2);
}

#hd .nav-item {
	position: relative;
	/*font-size: 1rem;*/
	letter-spacing: 0em
}

#hd .nav-item>a {
	/*display: block;*/
	height: 100%;
	font-size: 18px;
	/*font-size: 1.167rem*/
}

.depth {
	display: none;
	padding: .722rem 0;
}

.depth a {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -0.05em;
}

.depth a:hover,
.depth a:focus {
	color: #004D9A
}

.depth3 {
	font-size: .889rem;
	padding-bottom: .7222rem;
	color: #777777
}

.depth a.active {
	font-weight: 700
}

/*.hd-logo { width: 9.5rem; height: 2.1rem}가운데 정렬*/
.hd-logo {
	position: absolute;
	left: 0px;
	width: 140px;
	height: 30px;
}

.hd-logo>a {
	display: block;
	width: 100%;
	height: 100%;
	background: url('../images/include/logo.svg') no-repeat center;
	background-size: 75%;
}

.util {
	position: absolute;
	top: 49px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	/*color: #666;*/
	font-size: 24px;
}

.util a.icon {
	margin-left: 15px;
}

.util .split {
	border-left-color: #ccc
}

.split {
	font-style: normal;
	margin: 0 .5em
}

.split:empty {
	display: inline-block;
	margin: 0px 15px;
	height: .667rem;
	border-left: 1px solid;
	vertical-align: middle;
	color: transparent;
}

/*PC레프트메뉴*/
#lnbWrap_p {
	display: block;
	float: left;
	width: 240px;
	border-bottom: 0px solid #02649b;
}

.lnbWrap_m {
	display: none
}

.lnbTitle {
	display: flex;
	align-items: center;
	padding: 0px 0px 0px 15px;
	height: 80px;
	color: #ffffff;
	font-size: 24px;
	font-weight: 600;
	line-height: 30px;
	margin-bottom: 10px;
	border-radius: 8px;
	background: url('../images/include/bg_lnb_tit.png') no-repeat center;
	/*background: linear-gradient(120deg, #004D9A 59.41%, #004D9A 72.75%, #0060bc 72.75%, #0060bc 108.66%);*/
}

/*2deps 메뉴 */
.lnb {
	width: 100%;
	margin-bottom: 0px;
	background: #fff;
	border: 1px solid #d3d3d3;
	border-radius: 8px;
}

.lnb>li {
	position: relative;
	width: 100%;
	vertical-align: middle;
	/*letter-spacing:-0.05em;*/
	border-bottom: 1px solid #d3d3d3;
	box-sizing: border-box;
}

.lnb>li>a {
	display: block;
	width: 100%;
	height: 40px;
	padding: 0px 15px;
	font-size: 16px;
	font-weight: 600;
	line-height: 38px;
	box-sizing: border-box;
	word-break: keep-all;
	/*text-decoration:none*/
}

.lnb>li>a:visited {}

.lnb>li>a:hover {
	font-weight: 600;
	color: #004D9A;
	background: url('../images/include/lnb_arrow_left.svg') no-repeat 95% 50%;
}

/*오버시 모든메뉴 백그라운드 설정*/
.lnb>li>a.on {
	color: #004D9A;
	font-weight: 600;
	background: url('../images/include/lnb_arrow_left_on.svg') no-repeat 95% 50%;
}

/*고정 2deps메뉴*/
.lnb>li>a.on2:hover {
	background:
}

.lnb>li:last-child {
	border-bottom: 0px solid #d3d3d3;
}

/*탑 SNS 링크 */
.hd-sns {
	position: absolute;
	right: 80px;
}

.hd-sns a {
	margin-left: 5px;
}

.hd-sns a:first-child {
	margin-left: 0px;
}

.fa-brands,
.fab {
	font-size: 28px;
}

/*투자증권 바로가기*/
a.go_invest {
	position: absolute;
    right: 80px;
    padding: 0px 25px 0px 13px;
    font-size: 14px;
    font-weight: 500;
    color: #004D9A;
    line-height: 27px;
    border-radius: 100px;
	background: #deefff url('../images/include/icon_ar_bl.svg') no-repeat right 10px center;
}

/*상단 sns 아이콘*/
.sns_svg {
	position: relative;
	top: -1px;
	width: 25px;
	height: 25px;
}

/* ◆◆◆◆◆◆◆◆◆◆ 1280px~1600px ◆◆◆◆◆◆◆◆◆◆ */
@media only screen and (min-width:1280px) and (max-width:1600px) {
	.depth {
		font-size: 13px;
		letter-spacing: -0.12em
	}

	/*서브메뉴*/
}


/* ◆◆◆◆◆◆◆◆◆◆ 1280px이상 ◆◆◆◆◆◆◆◆◆◆ */
@media (min-width: 1280px) {

	/* header */
	#hd {
		position: relative;
		position: fixed;
		text-align: center
	}

	#hd .navbar-nav {
		height: 80px;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		border: 0px solid red
	}

	#hd .nav-item {
		/*width:10rem;*/
		width: 12vw;
	}

	#hd .nav-item>a {
		font-weight: 600;
		line-height: 101px
			/*line-height: 80px*/
	}

	#hd .nav-item>a:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 2px solid #004D9A;
		transform: scaleX(0);
		transition: transform .3s
	}

	#hd .on>a:before,
	#hd .active>a:before {
		transform: scaleX(1)
	}



	/*서브메뉴높이*/
	.hd-logo {
		position: absolute;
		left: 100px;
		top: 50%;
		transform: translateY(-50%)
	}

	.hd-logo>a {
		display: block;
		width: 100%;
		height: 100%;
		background: url('../images/include/logo.svg') no-repeat center;
		background-size: 100%;
	}

	.btn-depth {
		display: none
	}

	#gnb {
		display: inline-block !important;
		vertical-align: top;
		margin-right: 0
			/*margin-right: 2.5rem*/
	}



	.depth li {
		width: 100%;
		margin: 8px 0px;
		padding-left: 8px;
		font-size: 15px;
		background: url('../images/include/dot_menu1.svg') no-repeat left 10px;
	}

	ul.sub li {
		width: 100%;
		padding-left: 8px;
		background: url('../images/include/dot_menu2.svg') no-repeat left 12px;
	}

	ul.sub li a {
		width: 100%;
		padding: 4px 0px;
		color:#666666;
		letter-spacing: -0.03em;
		white-space: normal;
	}

	

	/*.depth li a { display:flex; width:100%;  }*/
	.on .depth {
		background: #F3F9FE;
	}

	.util {
		right: 190px;
	}

	#hd.open .depth {
		display: block !important
	}

	.gnb-util {
		display: none
	}

	/*모바일 상단 유저아이콘*/
	.m_top_user {
		display: none
	}

/*+++++ 20260223 gnb높이 자동 조절 시작 +++++*/
/* ===== 기본 구조 ===== */
#header {
    position: relative;
}

#gnb {
    position: relative;
}

/* ===== 서브메뉴 ===== */
.depth {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 25px 15px 25px 15px; /* 아래 패딩 제거 */
    text-align: left;
    border-left: 1px solid rgba(0,0,0,.08);
    display: none;
    z-index: 20;
}

/* ===== 화이트 배경 레이어 ===== */
#gnb::before {
    content: '';
    position: absolute;
    top: 91px; /* 헤더 높이 */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw; /* 화면 전체 가로 */
    height: 0;
    background: #fff;
    box-shadow: 0 5px 5px rgba(0,0,0,.05);
    /* transition: height .3s ease; */
    z-index: 10;
}

/* 열렸을 때 */
#gnb.force-open::before {
    height: var(--submenu-height);
}
/*+++++ 20260223 gnb높이 자동 조절 끝 +++++*/   

}



/*=====헤더=====*/
.pc_header {
	position: fixed;
	top: 0px;
	width: 100%;
	display: block;
	background: #ffffff;
	z-index: 11
}

/*pc헤더*/
.mo_header {
	display: none;
}

/*mo헤더*/



/* GNB Mobile :: 1차 */
#gnbM #navigation>li {
	border-bottom: 1px solid rgb(0, 0, 0, .15);
}

#gnbM #navigation>li>a {
	position: relative;
	display: block;
	padding: 15px;
	/*color:#fff;*/
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
}

#gnbM #navigation>li.active>a {
	color: #004D9A;
	font-weight: 500;
	border-bottom: 1px solid rgb(0, 0, 0, .15);
}

#gnbM #navigation>li.has-2dep>a {}

#gnbM #navigation>li.has-2dep.active>a {}

#gnbM #navigation>li .gnb-icon {
	position: absolute;
	top: 55%;
	right: 10px;
	margin-top: -14px;
}

#gnbM #navigation>li .gnb-icon i {
	font-size: 24px;
}

/* GNB Mobile :: 2차 */
#gnbM #navigation>li .gnb-2dep {
	display: none;
	padding: 0px 0;
	background: #ffffff;
	/*box-shadow:inset 0px 3px 9px rgba(0, 0, 0, .3);*/
}

#gnbM #navigation>li .gnb-2dep>li {}

#gnbM #navigation>li .gnb-2dep>li>a {
	display: block;
	padding: 0px 15px;
	font-size: 15px;
	line-height: 42px;
	border-bottom: 1px solid rgb(0, 0, 0, .07);
	text-decoration: none;
	background: rgb(242, 244, 247, .4)
		/*opacity:0.7;filter:Alpha(opacity=70);*/
}

#gnbM #navigation>li .gnb-2dep>li>a.last {
	border-bottom: 0px solid #edeff2 !important;
}

#gnbM #navigation>li .gnb-2dep>li.active>a {
	opacity: 1.0;
	filter: Alpha(opacity=100);
}

/* GNB Mobile :: 3차 */
#gnbM #navigation>li .gnb-2dep>li>.gnb-3dep {
	display: none;
	padding: 10px 20px;
	background: #aaa;
	box-shadow: inset 0px 3px 9px rgba(0, 0, 0, .3);
}

#gnbM #navigation>li .gnb-2dep>li>.gnb-3dep>li>a {
	display: block;
	padding: 8px 0;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
}

#gnbM #navigation>li .gnb-2dep>li>.gnb-3dep>li>a:before {
	display: inline-block;
	content: "-";
	margin-right: 5px;
}


/*PC 서브메뉴*/
.middleArea_line {
	position: absolute;
	bottom: 0px;
	width: 100%;
	border-top: 0px solid #dde1e6;
	border-bottom: 0px solid #dde1e6;
	/*background: rgb(0, 0, 0, .3);*/
}

.m_middleArea_line {
	display: none;
}

.middleArea {
	margin: 0 auto;
	width: 1280px;
	margin-bottom: 0px;
}

#sideMenu {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 60px;
	background: rgb(255, 255, 255, .6);
	border: 0px solid red;
	z-index: 1;
}

.side-menu-inner-box {
	width: 1400px;
	height: 60px;
	border: 0px solid blue;
}

#sideMenu.fixed .side-menu-inner-box {
	position: fixed;
	right: 0px;
	left: 0px;
	z-index: 1000;
	width: auto;
	border-bottom: 1px solid #dde1e6;
}

.sub-menu-list-con {
	display: flex;
	justify-content: center;
	height: 100%;
	margin: 0 !important;
}

.sub-menu-list-con .swiper-wrapper {
	display: flex;
	justify-content: center;
	/*width: 1280px;*/
	text-align: center;
}

/*.sub-menu-list-con .swiper-slide { position: relative; top: 1px; width:180px;display:inline-block; margin:0px 0px; padding:0px 0px; text-align:center;  font-weight:500; }*/
.sub-menu-list-con .swiper-slide {
	/*flex: 1 1;*/
	flex: 1;
	position: relative;
	top: 0px;
	/*width:200px;*/
	display: inline-block;
	margin-left: 0px;
	padding: 0px 0px;
	text-align: center;
	font-weight: 500;
	line-height: 1.2;

}

.sub-menu-list-con .swiper-slide:first-child {
	margin-left: 0px;
}

.sub-menu-list-con .swiper-slide a {
	display: flex;
	align-items: center;
	justify-content: center;
	/*display:block;*/
	position: relative;
	top: 0px;
	height: 60px;
	padding: 0px 0px;
	font-size: 22px;
	font-weight: 500;
	background: transparent;
	border-radius: 0px 0px 0px 0px;
	border-bottom: 4px solid transparent;
	transition: all 0.2s;
}

/*.sub-menu-list-con .swiper-slide a:hover { background:rgb(0, 0, 0, 0.4); }*/
.sub-menu-list-con .swiper-slide a:hover {
	color: #004D9A;
	background: rgb(255, 255, 255, 0);
}

.sub-menu-list-con .swiper-slide.active a,
.sub-menu-list-con .swiper-slide.on a {
	color: #004D9A;
	background: rgb(255, 255, 255, 0);
	border-bottom: 4px solid #004D9A;
}

a.narrow {
	letter-spacing: -0.14em
}

/*PC상단 중메뉴 가로 flex 적용(Task 역량교육 페이지 /sub/education/education_04.asp)*/
.sub-menu-list-con-small {
	display: flex;
	justify-content: center;
	height: 100%;
	margin: 0 !important;
}

.sub-menu-list-con-small .swiper-wrapper {
	display: flex;
	justify-content: center;
	width: 1280px;
	text-align: center;
	/*display:block;*/
}

.sub-menu-list-con-small .swiper-slide {
	/*flex: 1 1;*/
	position: relative;
	top: 1px;
	width: auto;
	/*width:142px;*/
	display: inline-block;
	margin: 0px 23px;
	padding: 0px 0px;
	text-align: center;
	font-weight: 500;
	line-height: 1.2;
	/*letter-spacing: -0.08em;*/
}

.sub-menu-list-con-small .swiper-slide a {
	display: flex;
	align-items: center;
	justify-content: center;
	/*display:block;*/
	position: relative;
	top: 0px;
	height: 60px;
	font-size: 17px;
	font-weight: 500;
	padding: 0px 0px;
	border-bottom: 3px solid transparent;
	transition: all 0.2s;
}

.sub-menu-list-con-small .swiper-slide a:hover {
	/*color:#2C428A;*/
	border-bottom: 3px solid #bdc5ce;
}

.sub-menu-list-con-small .swiper-slide.active a,
.sub-menu-list-con-small .swiper-slide.on a {
	/*font-weight:600;*/
	color: #004D9A;
	border-bottom-color: #004D9A;
}

/*서브메뉴 좌우로 보더 펼쳐짐(사용안함)*/
.sub_menu_wrap ul {
	display: flex;
	/*background: #00b3d3; */
	height: 61px;
	padding: 0px 0px 0px 0px;
}

.sub_menu_wrap ul li {
	flex: 1 1;
	display: inline-block;
	width: auto;
	padding: 0px 0px 0px 0px;
	text-align: center;
}

.sub_menu_wrap ul li a {
	display: block;
	font-size: 17px;
	/*color: #fff;*/
	font-weight: 500;
	width: auto;
	text-decoration: none;
	line-height: 58px;
}

.sub_menu_wrap ul li a:after {
	display: block;
	content: '';
	border-bottom: solid 3px #222222;
	transform: scaleX(0);
	/*크기를 0으로 줌으로써 평상시엔 밑줄 없음*/
	transition: transform 250ms ease-in-out;
	/*변형 방식*/
	transition: all 0.0s;
}

.sub_menu_wrap ul li a:hover:after {
	transform: scaleX(1);
	/*a 속성에 hover시 기존 크기로*/
}

.sub_menu_wrap ul li a.on:after {
	border-bottom: solid 3px #2C428A;
}

.sub_menu_wrap ul li.on {
	border-bottom: solid 3px #2C428A;
}

.sub_menu_wrap ul li.on a.on {
	color: #2C428A;
}




/* ◆◆◆◆◆◆◆◆◆◆ 모바일부터태블릿0px~1280px이하 ◆◆◆◆◆◆◆◆◆◆*/
@media only screen and (min-width:0px) and (max-width:1280px) {

	/* header */
	#hd>.container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60px;
	}

	.util {
		position: absolute;
		left: 30px
	}

	.util>*:not(.lang) {
		display: none
	}

	.util .lang {
		border: 1px solid #cecece;
		border-radius: 2rem;
		padding: .25em 1em
	}

	.nav-open {
		overflow: hidden
	}

	.nav-open #wrap {
		position: fixed;
		left: 0;
		right: 0
	}

	.js-mn {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 120;
		width: 60px;
		height: 60px;
		background: none;
		border: 0;
		font-size: 0;
		line-height: 0;
		text-indent: -999em;
		color: inherit;
		outline: 0 !important
	}

	.js-mn>span,
	.js-mn:after,
	.js-mn:before {
		content: "";
		position: absolute;
		left: calc((100% - 28px) / 2);
		top: 50%;
		width: 24px;
		border-top: 2px solid;
		margin-top: -1.5px;
		transition: transform .3s, opacity .3s;
		z-index: 100
	}

	.js-mn:before {
		margin-top: -8.5px;
		transform-origin: top right
	}

	.js-mn:after {
		margin-top: 5.5px;
		transform-origin: bottom right
	}

	.gnb-open .js-mn {
		color: #000
	}

	.gnb-open .js-mn:before {
		transform: rotate(-45deg);
		margin: -8px 0 0 -2px;
		color: #494949;
	}

	.gnb-open .js-mn>span {
		opacity: 0
	}

	.gnb-open .js-mn:after {
		transform: rotate(45deg);
		margin: 8px 0 0 -2px;
		color: #494949;
	}

	#gnb {
		overflow: hidden;
		overflow-y: auto;
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 110;
		width: 100%;
		max-width: 270px;
		background: #fff;
		transition: transform .2s ease-out;
		color: #222;
		transform: translateX(100%)
	}

	.gnb-open #gnb {
		transform: translateX(0)
	}

	.dim {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: rgba(0, 0, 0, .6);
		opacity: 0;
	}

	.gnb-open .dim {
		opacity: 1
	}

	.gnb-util {
		display: flex;
		align-items: center;
		height: 60px;
		line-height: 60px;
		padding: 0px 20px;
		background: #ffffff;
		letter-spacing: -0.05em;
	}

	.gnb-util a {
		margin-right: 0px;
		font-size: 15px;
		color: #ffffff;
	}

	.gnb-util a:hover {
		color: #ffffff;
	}

	.split:empty {
		position: relative;
		top: 1px;
		display: inline-block;
		margin: 0px 10px;
		height: 13px;
		border-left: 1px solid;
		vertical-align: middle;
		color: rgb(255, 255, 255, .5);
	}

	#hd .navbar-nav {
		overflow-y: auto;
		height: calc(100% - 80px);
		border-top: 1px solid #e7e7e7
	}

	#hd .nav-item {
		border-bottom: 1px solid #e7e7e7
	}

	#hd .nav-item>a {
		height: auto;
		padding: 0px 20px;
		line-height: 60px;
		font-size: 17px;
		font-weight: 500;
	}

	.btn-depth {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background: url('../images/include/sub_dropdown_grey.svg') no-repeat center right 1.429rem/.786rem auto;
		border: 0;
		font-size: 0;
		color: transparent;
		transition: none
	}

	.depth {
		background: #f7f7f7;
		border-top: 1px solid #e7e7e7;
		padding: 10px 20px;
	}

	.depth a {
		display: block;
		font-size: 15px;
		line-height: 38px;
		letter-spacing: 0;
	}

	.open>a {
		color: #004D9A;
		font-weight: 700
	}

	.open>.btn-depth {
		transform: scaleY(-1)
	}

	.depth3 {
		margin-left: 0rem
	}

	.mo_menu_title {
		/*display: none;*/
		/*color: #004D9A;*/
		font-weight: 600;
		font-size: 17px;
	}

	/*모바일 상단 유저아이콘*/
	.m_top_user {
		position: absolute;
		right: 50px;
		top: 16px;
	}

	.m_top_user a i {
		margin-right: 10px;
		font-size: 26px;
	}


	/*=====헤더=====*/
	.pc_header {
		display: none
	}

	/*pc헤더*/
	.mo_header {
		display: block;
	}

	/*mo헤더*/

	.m_header_wrap {
		position: fixed;
		top: 0px;
		/*position: relative;*/
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px;
		width: 100%;
		height: 60px;
		background: #ffffff;
		border-bottom: 1px solid #D4D4D4;
		z-index: 25
	}

	/*PC 서브메뉴*/

	.m_middleArea_line {
		display: block;
	}


	/*모바일 서브메뉴*/

	.lotation {
		display: none
	}

	.mcon_location_wrap {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100%;
	}

	.mcon_location_box {
		float: left;
		width: 100%;
		position: relative;
	}

	.mcon_location {
		/*position:fixed;	top:59px;*/
		width: 100%;
		background: #004D9A;
		z-index: 1;
	}

	.mcon_location .m_submenu .title a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		height: 49px;
		/*padding: 0px 45px;*/
		font-size: 18px;
		color: #ffffff;
		font-weight: 600;
		text-align: center;
	}

	.mcon_location .m_submenu .title a img {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 20px;
		top: 15px;
	}

	.mcon_location .m_submenu_list {
		display: none;
		position: absolute;
		left: 0;
		top: 52px;
		width: 100%;
		z-index: 21;
	}

	.mcon_location .m_submenu_list li a {
		display: block;
		line-height: 49px;
		padding: 0px;
		font-size: 16px;
		text-align: center;
		background: #ffffff;
		border-bottom: 1px solid #dde1e6;
	}

	.mcon_location .m_submenu_list li a:hover {
		/*color:#19a5ee;*/
	}

	.hd-sns {
		position: absolute;
		right: 65px;
	}

/*투자증권 바로가기*/
a.go_invest {
	position: absolute;
	right: 60px;
	padding: 0px 20px 0px 10px;
	font-size: 12px;
    line-height: 23px;
	background-position: right 8px center;
	background-size: 7px;
}

}

/* ◆◆◆◆◆◆◆◆◆◆ 모바일 1280px이하 ◆◆◆◆◆◆◆◆◆◆*/
@media only screen and (max-width:1280px) {
	.middleArea_line {
		display: none;
	}

	#lnbWrap_p {
		display: none;
	}

	.lnbWrap_m {
		display: block;
	}

	ul.sub li a {
		width: 100%;
		padding: 8px 0px 8px 8px;
		color:#666666;
		letter-spacing: 0em;
		line-height: 1;
		background: url('../images/include/dot_menu2.svg') no-repeat left 15px;
		white-space: normal;
	}

}