@charset "utf-8";

body.main {
	background: #eff7fd;
}


/************ header ************/
.header {
	display: flex;
	flex-direction: column;
	z-index: 60;
	position: relative
}

.header .logo {
	width: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-right: 1px solid #6397c7;
}

.header .logo a {
	display: inline-block;
	max-width: 160px;
	width: 100%;
	height: 19px;
	background: url('../images/logo02.svg') no-repeat 0 0 / 100%;
	text-indent: -9999px;
}

.header .top_menu {
	display: flex;
	background: #397ebd;
	border-bottom: 1px solid #5e8cb7;
	align-items: center;
}

.header .top_menu .right_top {
	display: flex;
	flex-grow: 1;
	padding: 10px 15px;
	/* background: #fff; */
	align-items: center;
}

.header .b_tit {
	font-size: 20px;
	font-weight: 600;
	color: #ffffff;
	padding-left: 15px;
}

.header .member_wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-grow: 1;
}

.header .member_wrap>a {
	position: relative;
	padding-right: 10px;
	margin-right: 10px;
	color: #ffffff;
}

.header .member_wrap>a:after {
	content: '';
	width: 1px;
	height: 10px;
	background: #6397c7;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -5px;
}

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

.header .member_wrap .member_inner p span {
	margin-right: 7px;
	color: #d5ebff;
}

.header .member_wrap .member_inner strong {
	color: #ffffff;
}

.header .member_wrap .member_inner .time_wrap {
	margin-left: 10px;
	padding-left: 10px;
	position: relative;
	display: flex;
	align-items: center;
}

.header .member_wrap .member_inner .time_wrap:before {
	content: '';
	width: 1px;
	height: 12px;
	background: #699dcd;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -6px;
}

.header .member_wrap .member_inner .time_wrap span {
	display: block;
	position: relative;
	padding-left: 25px;
	margin-right: 5px;
	color: #fff;
}

.header .member_wrap .member_inner .time_wrap span:before {
	content: '';
	width: 20px;
	height: 20px;
	background: url('../images/icon_time.svg') no-repeat 0 0 / 100%;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -10px;
}

.header .member_wrap .member_inner .time_wrap button {
	padding: 3px 15px 4px;
	font-size: 13px;
	background: none;
	border: 1px solid #77addd;
	border-radius: 30px;
	color: #fff;
}

.icon_box {
	display: flex;
	gap: 5px;
	margin-left: 5px;
}

.icon_box a {
	display: flex;
	width: 32px;
	height: 32px;
	background: #20598d;
	border-radius: 100%;
	justify-content: center;
	align-items: center;
	position: relative;
}

.icon_box a span {
	display: inline-block;
	width: 18px;
	height: 18px;
	text-indent: -9999px;
}

.icon_box .home_icon span {
	background: url('../images/icon_home.svg') no-repeat 0 0 / 100%;
}

.icon_box .home_ntf span {
	background: url('../images/icon_ntf.svg') no-repeat 0 0 / 100%;
}

.icon_box .home_mp span {
	background: url('../images/icon_mp.svg') no-repeat 0 0 / 100%;
}

.icon_box a .number {
	display: block;
	width: 15px;
	height: 15px;
	background: #DB0000;
	border-radius: 100%;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 13px;
	position: absolute;
	top: 0;
	right: -5px;
}

.m_menu {
	display: none;
}

/* 기존 CSS와 충돌을 해결한 마이페이지 드롭다운 */
.mypage-wrap {
	position: relative;
}

/* 메뉴 컨테이너 */
.mypage-dropdown {
	position: absolute;
	top: 42px;
	right: -15px;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	width: 180px;
	z-index: 100;
}

/* 메뉴 항목 컨테이너 */
.mypage-item {
	border-bottom: 1px solid #f0f0f0;
}

.mypage-item:last-child {
	border-bottom: none;
}

/* 메뉴 항목 링크 - icon_box a 스타일 재정의 */
.mypage-dropdown .mypage-item a {
	display: block;
	width: 100%;
	height: auto;
	background: transparent;
	border-radius: 0;
	justify-content: flex-start;
	align-items: center;
	padding: 12px 15px;
	color: #333;
	font-size: 14px;
	text-align: left;
}

/* 링크 hover 상태 */
.mypage-dropdown .mypage-item a:hover {
	background-color: #f5f8fc;
	color: #397ebd;
}

/* 화살표 */
.mypage-dropdown:before {
	content: '';
	position: absolute;
	top: -8px;
	right: 22px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #ffffff;
}

/* 기존 아이콘 숨김 처리 */
.mypage-dropdown .mypage-item a span {
	display: none;
}

/** GNB **/
.menu_bg {
	width: 100%;
	height: 0;
	position: absolute;
	background-color: #2f6da7;
	top: 110px;
	display: none;
	left: 0;
	z-index: 2;
	border-top: 1px solid #5e8cb7;
}

/** GNB 배경 오버레이 **/
.gnb-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.35);
	z-index: 50;
	pointer-events: auto;
}

.gnb {
	background: #2f6da7;
	position: relative;
	z-index: 60;
}

.gnb ul {
	display: flex;
	justify-content: center;
}

.gnb ul li {
	color: #fff;
	font-weight: 600;
	position: relative;
	margin-right: -1px
}

.gnb ul>li>a {
	color: #fff;
	font-weight: 600;
	padding: 15px 50px;
	display: block;
	font-size: 16px;
}

.gnb ul li ul {
	position: absolute;
	top: 54px;
	left: 0;
	display: none;
	z-index: 100;
	border-right: 1px solid #5e8cb7;
	border-left: 1px solid #5e8cb7;
	border-top: 3px solid #fff;
	border-bottom: 1px solid #fff;
	width: 100%;
	padding: 15px 0;
	background: #2f6da7;
}

.gnb ul li ul li a {
	padding: 7px 5px;
	text-align: center;
	font-weight: 300;
	font-size: 14px;
}

/** 메가 메뉴 **/
.gnb-mega {
	display: none;
	flex-direction: row !important;
	justify-content: flex-start !important;
	align-items: stretch;
	position: absolute;
	top: 54px;
	left: 0;
	z-index: 100;
	border: 1px solid #5e8cb7;
	border-top: 3px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 0 !important;
	min-width: 200px;
	width: max-content;
	background: #2f6da7;
}

.gnb-mega .mega-col {
	flex: 1;
	min-width: 150px;
	padding: 12px 0 15px;
	border-left: 1px solid #4a8bc4;
	display: flex;
	flex-direction: column;
}

.gnb-mega .mega-col:first-child {
	border-left: none;
}

.gnb-mega .mega-header {
	display: block;
	padding: 4px 20px 8px;
	font-size: 12px;
	font-weight: 600;
	color: #a8d4ff;
	letter-spacing: 0.5px;
	white-space: nowrap;
	border-bottom: 1px solid #4a8bc4;
	margin-bottom: 4px;
}

.gnb-mega .mega-col ul {
	display: flex !important;
	flex-direction: column !important;
	position: static !important;
	padding: 0 !important;
	border: none !important;
	width: auto !important;
}

.gnb-mega .mega-col ul li a {
	padding: 6px 20px !important;
	text-align: left !important;
	font-weight: 300;
	font-size: 14px;
	white-space: nowrap;
}

.gnb ul li a:hover,
.gnb ul li a.active {
	color: #ffca4d;
}

/**  본문 **/
.contents_layout {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 사이드바가 있는 레이아웃에서는 화면에 맞춰 내부 스크롤 */
.contents_layout:has(> .contents) {
	height: 100vh;
	overflow: hidden;
}

.contents {
	display: flex;
	flex: 1;
	min-height: 0;
}

.contents .left_wrap {
	width: 240px;
	position: relative;
	flex-shrink: 0;
	height: 100%; /* 부모(contents) 높이에 꽉 차도록 변경 */
	overflow: hidden;
	transition: width 0.3s ease;
}

.contents .left_wrap:after {
	content: '';
	width: 1px;
	height: 100%;
	background: #e5e5e5;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.contents .left_wrap .btn_lnb {
	width: 35px;
	height: 35px;
	border: 1px solid #b6cee3;
	border-radius: 100%;
	display: inline-block;
	text-indent: -9999px;
	position: absolute;
	top: 14px;
	right: 10px;
	background: #fff url('../images/lnb_btn_close.png') no-repeat center;
	text-align: left;
}

.contents .left_wrap .btn_lnb.open {
	background: #fff url('../images/lnb_btn_open.png') no-repeat center;
}

.contents .left_wrap.close {
	width: 53px;
}

.contents .left_wrap.close .lnb_wrap {
	opacity: 0;
	pointer-events: none;
}

.contents .right_wrap {
	flex-grow: 1;
	min-width: 0;
	position: relative;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

/** LNB **/
.search_box {
	position: relative;
	margin: 0 15px 15px;
}

.search_box input[type="text"] {
	border-radius: 30px;
	width: 100%;
	border: 1px solid #009688;
}

.search_box .search_icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url('../images/icon_search.svg') no-repeat 0 0 / 100%;
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -9px;
	text-indent: -9999px;
}

.lnb_wrap {
	opacity: 1;
	transition: opacity 0.3s ease;
}

.lnb_wrap .sub_menu_title {
	padding: 20px 15px;
	font-size: 20px;
	background: #dfeefb;
	color: #2f6da7;
}

.lnb_wrap ul li a {
	color: #000000;
	font-size: 15px;
}

.lnb_wrap>ul>li>a {
	padding: 10px 15px;
	display: block;
	white-space: nowrap;
}

.lnb_wrap>ul>li>a>span {
	position: relative;
	padding-left: 18px;
}

.lnb_wrap>ul>li>a>span:before {
	content: '';
	width: 11px;
	height: 11px;
	background: url('../images/bl_lnb.png') no-repeat 0 0;
	position: absolute;
	top: 6px;
	left: 0;
}

.lnb_wrap ul li ul {
	display: none;
	background: #e4efef;
	padding: 15px 0 15px 21px;
}

.lnb_wrap ul li ul li {
	position: relative;
}

.lnb_wrap ul li ul li:before {
	content: '';
	width: 1px;
	height: 100%;
	background: #d1d1d1;
	position: absolute;
	top: 0;
	left: 0;
}

.lnb_wrap ul li ul li a {
	font-size: 14px;
	color: #333333;
	padding: 4px 5px 4px 15px;
	display: block;
}

.lnb_wrap>ul>li.on>a,
.lnb_wrap>ul>li>a:hover {
	background: #2f6da7;
	font-weight: 600;
	color: #fff;
}

.lnb_wrap>ul>li>a:hover {
	background: #397ebd;
}

.lnb_wrap>ul>li.on>a>span:before,
.lnb_wrap>ul>li>a:hover>span:before {
	background-position: 0 bottom;
}

.lnb_wrap ul li.on ul {
	display: block;
}

.lnb_wrap ul li.on ul li a.on,
.lnb_wrap ul li.on ul li a:hover {
	color: #009688;
	font-weight: 600;
}

.lnb_wrap ul li.on ul li a.on span,
.lnb_wrap ul li.on ul li a:hover span {
	position: relative;
}

.lnb_wrap ul li.on ul li a.on span:before,
.lnb_wrap ul li.on ul li a:hover span:before {
	content: '';
	width: 1px;
	height: 100%;
	background: #009688;
	position: absolute;
	top: 0;
	left: -15px;
}

/*
.sub_menu01, .sub_menu02, .sub_menu03, .sub_menu04, .sub_menu05, .sub_menu06, .sub_menu07 {display:none}
*/
/** tab-menu **/
.location_wrap {
	background: #fff;
}

/**  Location**/
.location {
	padding: 20px 40px;
}

.location ul {
	display: flex;
}

.location ul li {
	display: flex;
	align-items: center;
	position: relative;
}

.location ul li+li {
	padding: 0 15px;
}

.location ul li+li:after {
	content: '';
	width: 5px;
	height: 8px;
	background: url('../images/location_arrow.png') no-repeat center;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -4px;
}

.location ul li.home a {
	display: inline-block;
	width: 15px;
	height: 12px;
	background: url('../images/icon_location_home.png') no-repeat center;
}

.location ul li.home a span {
	display: inline-block;
	text-indent: -9999px;
}

.location ul li:last-child {
	font-weight: bold;
}

.location ul li:last-child:after {
	content: none
}

.main .location {
	border-bottom: 1px solid #e5e5e5;
}

/** title **/
h3.stit {
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 800;
	color: #212121;
}

h4.sstit {
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 800;
	color: #212121;
	padding-left: 10px;
	position: relative
}

h4.sstit:before {
	content: '';
	width: 3px;
	height: 14px;
	background: #2f6da7;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -6px;
}

h5.ssstit {
	font-size: 16px;
	margin-bottom: 10px;
	color: #165fa3
}

/* 메인 */
.main_contents {
	flex: 1
}

/* 2025.05.27 수정 */
/**  서브 **/
.sub_cont_wrap {
	padding: 40px 40px 40px;
}

/* footer */
.footer {
	margin-top: auto;
	background: #f1f1f1;
	color: #666666;
	text-align: center;
	padding: 20px 0;
}

/* 2025.05.27 수정 */
.footer.main {
	background: #fff;
}

/* 2025.05.27 수정 */
.footer #copy-text {
	margin-left: 10px;
}

@media screen and (max-width: 1110px) {
	.header .logo {
		width: 150px;
	}

	.header .logo a {
		max-width: 130px;
		height: 16px;
	}

	.header .b_tit {
		padding-left: 0;
		font-size: 17px;
	}

	.header .top_menu .right_top {
		padding: 10px 8px;
	}
}

@media screen and (max-width: 1024px) {
	.gnb ul>li>a {
		padding: 15px 40px;
	}
}

@media screen and (max-width: 940px) {
	.header {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		position: relative;
	}

	.header .top_menu {
		width: 100%;
		padding: 10px 15px 9px;
		align-items: flex-start;
		flex-direction: column;
		position: relative;
	}

	.header .logo {
		width: 108px;
		margin-right: 0;
		border-right: 0;
	}

	.header .logo a {
		height: 14px;
	}

	.header .top_menu .right_top {
		padding: 0;
	}

	.header .b_tit {
		font-size: 17px;
		line-height: 22px;
		padding-left: 0;
	}

	.header h1 a {
		width: 104px;
		height: 13px;
		background: url(../images/logo.svg) no-repeat 0 0 / 100%;
	}

	.header h2 {
		font-size: 17px;
		line-height: 22px;
	}

	.header .member_wrap .member_inner {
		display: none;
		z-index: 4;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		border-bottom: 1px solid #568abb;
		padding: 15px 10px;
		background: #397ebd;
		flex-wrap: wrap;
	}

	.header .member_wrap .member_inner p {
		font-size: 14px;
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 10px;
	}

	.header .member_wrap .member_inner p strong {
		order: 1;
		font-size: 15px;
	}

	.header .member_wrap .member_inner p span {
		order: 2;
	}

	.header .member_wrap .member_inner .time_wrap {
		padding-left: 0;
		margin-left: 0;
		flex-grow: 1;
	}

	.header .member_wrap .member_inner .time_wrap:before {
		content: none
	}

	.icon_box {
		position: absolute;
		top: 50%;
		right: 50px;
		margin-top: -16px;
	}

	.m_menu {
		display: block;
		position: absolute;
		top: 50%;
		right: 15px;
		width: 22px;
		height: 17px;
		margin-top: -9px;
		text-indent: -9999px;
		background: url(../images/m_menu.png) no-repeat 0 0;
		z-index: 5;
	}

	.m_menu.close {
		background: url(../images/btn_lnb_close.png) no-repeat right 1px;
	}

	.menu_bg {
		display: none;
	}

	.gnb {
		display: none;
		width: 100%;
		z-index: 2;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		padding-top: 113px;
	}

	.gnb ul {
		flex-direction: column;
	}

	.gnb ul>li>a {
		padding: 12px 15px;
	}

	.gnb ul>li>a:hover {
		color: #fff
	}

	.gnb ul>li.on>a {
		color: #ffca4d;
		background: #0c477f
	}

	.gnb ul>li>a span {
		position: relative;
		padding-left: 20px;
	}

	.gnb ul>li>a span:before {
		content: '';
		width: 11px;
		height: 11px;
		background: url(../images/bl_gnb.png) no-repeat 0 0;
		position: absolute;
		top: 7px;
		left: 0;
	}

	.gnb ul>li.on>a span:before {
		background-position: 0 -11px;
	}

	.gnb ul li ul {
		position: relative;
		top: auto;
		padding: 20px 30px;
		background: #195389;
		border: 0;
	}

	.gnb ul li ul li {
		position: relative;
	}

	.gnb ul li ul li:before {
		content: '';
		width: 1px;
		height: 100%;
		background: #2c669b;
		position: absolute;
		top: 0;
		left: 0;
	}

	.gnb ul li ul li a {
		padding: 7px 0;
		text-align: left;
	}

	.gnb ul li ul li a.on {
		color: #ffca4d;
	}

	.gnb ul li ul li a span {
		position: relative;
	}

	.gnb ul li ul li a span:before {
		content: none;
	}

	.gnb ul li ul li a.on span:before {
		content: '';
		width: 1px;
		height: 100%;
		background: #ffca4d;
		position: absolute;
		top: 0;
		left: 0;
	}

	/* 모바일 메가 메뉴 */
	.gnb-mega {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		flex-direction: column !important;
		border: 0 !important;
		width: 100% !important;
		background: #195389 !important;
		padding: 10px 0 !important;
	}

	.gnb-mega .mega-col {
		border-left: none;
		padding: 5px 0;
		min-width: auto;
	}

	.gnb-mega .mega-header {
		padding: 4px 30px 6px;
		color: #7fb8e8;
		font-size: 11px;
		border-bottom: 1px solid #2c669b;
	}

	.gnb-mega .mega-col ul {
		padding: 0 15px !important;
	}

	.gnb-mega .mega-col ul li a {
		padding: 7px 30px !important;
	}

	.location {
		padding: 12px 10px;
	}

	/* lnb */

	.left_wrap {
		display: none;
	}

	.contents_layout {
		/* Reinforce the flex settings for mobile */
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		justify-content: space-between;
	}

	.sub_cont_wrap {
		padding: 15px 15px 50px;
		flex: 1
	}


}

@media screen and (max-width: 640px) {
	.location ul li {
		font-size: 14px;
		letter-spacing: -1px;
	}

	.location ul li+li {
		padding: 0 10px;
	}

	h3.stit {
		font-size: 18px;
	}

	.footer {
		padding: 10px 0;
		font-size: 14px;
	}
}

@media screen and (max-width: 388px) {
	.footer #copy-text {
		margin-left: 0;
		display: block;
	}
}

@media screen and (max-width: 360px) {
	body {
		min-width: 360px;
	}
}