/* ==================================================
	Typography
================================================== */
.sound-only {
	position: absolute;
	left: -999px;
	width: 0;
	height: 0;
	text-indent: -999px;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

/* ==================================================
	header
================================================== */
header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
}

header.on {
	border-bottom: 1px solid #000;
}

header .logo {
	position: relative;
	width: 15rem;
	height: var(--header-hei);
}

/*header.sitemap .logo a {
	position: fixed;
	z-index: 200;
	top: 19px;
}

header .logo .white {
	display: none;
}

header .logo .color {
	display: block;
}

.mheader.logo .white {
	display: block;
}

.mheader.logo .color {
	display: none;
}

header.index.active .logo .white,
header.index.on .logo .white {
	display: none;
}

header.index.active .logo .color,
header.index.on .logo .color {
	display: block;
}

header.sitemap .logo {
	display: none;
}*/

header>.hinner {
	width: 100%;
	padding: 0 5rem;
	position: relative;
	display: flex;
	justify-content: space-between;
	background-color: var(--color-white);
}

header.index>.hinner::after {
	position: absolute;
	bottom: 0;
	width: calc(100% - 10rem);
	height: 1px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(255, 255, 255, 0.2);
	content: '';
}

.gnbBox {
	/* display: flex;
	gap: 8rem;	 */
}

header .gnb-menu .depth01 {
	display: flex;

}

header.on .depth01>li {
	width: 24rem;
	transition: .5s;
}

header .depth01>li {
	width: 24rem;
	position: relative;
	transition: width .5s;
}

header .depth01>li>a {
	font-size: var(--rem-22);
	font-weight: var(--font-md);
	/* color: var(--color-white); */
	width: 100%;
	display: block;
	text-align: center;
	position: relative;
	height: var(--header-hei);
	line-height: var(--header-hei);
}

header.active .depth01>li>a,
header.on .depth01>li>a,
header.floating .depth01>li>a {
	color: var(--color-black);
}

body.eng header .depth01>li>a {
	font-size: 2rem;
}

header .depth01>li:hover>a {
	color: var(--brand-color-main);
}

header .depth01>li.active>a,
header .depth01>li.on>a {
	color: var(--brand-color-main);
}

header .depth01>li.on {
	background-color: var(--color-white);
}

header.on .depth01>li>a::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	content: '';
	width: 100%;
	height: 3px;
	background: linear-gradient(0.25turn, #185160, #abc11c);
	z-index: 50;
	transform: scale(0);
	transition: .5s;
}

header .depth01>li:hover>a::after {
	transform: scale(1);
}

header .depth02 {
	display: block;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	padding: 2.5rem 0;
	background-color: #fcfcfc;
	display: none;
}

header.on .depth02 {
	border-top: 1px solid #ddd;
}

header .depth01>li::before {
	width: 1px;
	height: calc(100% - var(--header-hei));
	position: absolute;
	content: '';
	background-color: #dddddd;
	left: 0;
	top: var(--header-hei);
}

/* header .depth01>li:nth-child(1)::before {
	width: 0;
} */
header .depth01>li:last-of-type::after {
	width: 1px;
	height: calc(100% - var(--header-hei));
	position: absolute;
	content: '';
	background-color: #dddddd;
	right: 0;
	top: var(--header-hei);
}

header .depth03 {
	display: none;
}

header .depth01>li.on .depth02 {
	background-color: var(--color-white);
}

header .depth02>li>a {
	padding: 1rem 0px 1rem 0;
	color: var(--color-gray);
	font-size: 1.8rem;
	display: inline-block;
}

header .depth02>li>a.more {
	position: relative;
	padding: 1.5rem 2.5rem 1.5rem 0;
}

header .depth02>li.on>a.more::after {
	content: url('../../lib/images/gnb/gnb-more-ico.svg');
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

header .depth02>li>a.more::after {
	content: url('../../lib/images/gnb/gnb-more-gray-ico.svg');
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

header .depth02>li.active>a,
header .depth02>li.on>a,
header .depth02>li:hover>a {
	color: var(--color-black);
	font-weight: var(--font-md);
}

header .depth03 {
	padding-bottom: 1.5rem;
}

header .depth03 li {
	margin-bottom: 1.5rem;
}

header .depth03 li:last-of-type {
	margin-bottom: 0;
}

header .depth03 li a {
	font-size: 1.7rem;
	color: var(--color-gray4);
	position: relative;
	display: inline-block;
}

header .depth03 li a:hover {
	color: var(--color-black);
}

header .depth03 li a::after {
	position: absolute;
	content: '';
	width: 0%;
	transition: .3s;
	height: 1px;
	background-color: var(--color-black);
	bottom: 0;
	left: 0;
}

header .depth03 li a:hover::after {
	width: 100%;
}

header .depth03 li a:hover {
	color: var(--color-black);
}

header::before {
	width: 100%;
	position: absolute;
	top: 0px;
	height: 0px;
	content: '';
	background-color: #fcfcfc;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	transition: 0s;
	z-index: -2;
}

header.on::before,
header.floating::before {
	height: 100%;
	transition: 0s;
}

header::after {
	width: 100%;
	height: 0.01rem;
	background-color: var(--color-gray2);
	position: absolute;
	content: '';
	top: var(--header-hei);
	left: 0;
	z-index: 2;
	box-shadow: none;
	transition: 0s;
}

header.active::after,
header.on::after {
	height: 0.01rem;
	transition: 0s;
	border-bottom: 1px solid #ddd;
}

/* 모바일CSS */
@media screen and (max-width:1920px) {

	header>.hinner {
		padding: 0 var(--spacing);
	}

	header.on .depth01>li {
		/* width: 20rem; */
	}
}

@media screen and (max-width:1660px) {
	header {
		/*display: flex;
		align-items: center;
		height: 10rem;*/
	}

	header.on .depth01>li {
		width: 18rem;
	}

	header .depth01>li {
		width: 18rem;
	}

	header .depth01>li>a {
		font-size: var(--rem-20);
		width: 100%;
		height: 10rem;
		box-sizing: border-box;
	}

	header .depth02>li>a {
		/* font-size: 1.6rem; */
	}

	header .depth03 li a {
		/* font-size: 1.6rem; */
	}
}

@media screen and (max-width:1280px) {

	header .depth01>li {
		width: 15rem;
	}

	header.on .depth01>li {
		width: 15rem;
	}

	header .depth02>li {
		padding: 0 0.5rem;
		box-sizing: border-box;
	}

	header .depth02>li>a.more {
		padding: 1rem 1.4rem 1rem 0;
	}
}

@media screen and (max-width:1024px) {
	header {
		display: flex;
		align-items: center;
		height: var(--header-hei);
		background: #fff;
	}

	header::after {
		display: none;
	}
}

/* ==================================================
	util-menu
================================================== */
header .util-menu {
	display: flex;
	align-items: center;
	gap: var(--rem-40);
	height: var(--header-hei);
}

header .util-menu>li {
	display: flex;
	justify-content: center;
	align-items: center;
}

header .lang-btn {
	position: relative;
	width: 7rem;
	height: 2.9rem;
}

/* S: svg class */
header .logo a {
	display: block;
	width: 100%;
	height: 100%;
}

header .logo i {
	display: block;
	width: 100%;
	height: 100%;
	content: url('../../lib/images/gnb/logo.svg');
	background-size: 100%;
}

header.on .logo i,
header.active .logo i,
header.floating .logo i {
	content: url('../../lib/images/gnb/logo.svg');
}

header.sitemap .logo i {
	content: url('../../lib/images/gnb/logo_w.svg?v=0907');
}

header .lang i {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	/*background: transparent url('../../lib/images/gnb/ico-lang.svg');
	background-size: cover;*/
	filter: invert(1);
}

header.sitemap .lang i,
header.lang i {
	filter: invert(1);
}

header.active .lang,
header.on .lang,
header.floating .lang {
	/* color: var(--color-black); */
}

header.active .lang i,
header.on .lang i,
header.floating .lang i {
	filter: invert(0);
}

header .lang-btn:active .lang:after {
	/*    content: "\e945";*/
}

header .sitemap-btn>a i {
	display: block;
	width: var(--rem-30);
	height: var(--rem-22);
	background: transparent url('../../lib/images/gnb/ico-sitemap-btn.svg') center no-repeat;
	background-size: 100%;
	/* filter: invert(1); */
}

header.on .sitemap-btn>a i,
header.active .sitemap-btn>a i,
header.floating .sitemap-btn>a i {
	filter: invert(0);
}

header.sitemap .sitemap-btn>a i {
	background: url('../../lib/images/gnb/ico-close.svg') center no-repeat;
	background-size: cover;
	filter: invert(0);
}

/* E: svg class */
header .lang {
	width: 100%;
	position: relative;
	cursor: pointer;
	/* display: flex;
	align-items: center; */
	font-weight: var(--font-md);
	/* color: var(--color-white); */
	font-size: var(--rem-18);
}

header button.lang {
	text-align: left;
	padding-bottom: 5px;
	border-bottom: solid 1px #000000;
	background-color: inherit;
}

header .lang::after {
	content: "\e942";
	position: absolute;
	right: 0;
	font-family: 'xeicon';
}

/*
.mheader.lang::after {
	content: url(../img/lang-more-white-ico.svg);
}

header.index.active .lang::after,
header.index.on .lang::after {
	content: url('../../lib/images/gnb/lang-more-ico.svg');
}

header .lang::before {
	position: absolute;
	content: '';
	display: block;
	width: 1px;
	height: 15px;
	background-color: #dddddd;
	right: -16px;
	top: 4px;
}*/

header .lang-menu {
	position: absolute;
	left: 50%;
	top: 3.5rem;
	width: 100%;
	transform: translateX(-50%);
	background-color: white;
	border: 1px solid #dddddd;
	border-radius: 5px;
	display: none;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	z-index: 400;
}

header .lang-menu li:first-of-type {
	border-bottom: 1px solid #dddddd;
}

header .lang-menu li a {
	display: block;
	color: #666666;
	font-weight: var(--font-md);
	font-size: var(--rem-16);
	text-align: center;
	padding: 1rem 0;
}

header .lang-menu li.on a {
	color: var(--color-black);
}

header .youtube {
	width: 3.2rem;
	height: var(--rem-30);
}

header .youtube img {
	display: block;
	width: 100%;
}

header .sitemap-btn {
	width: var(--rem-30);
	height: var(--rem-22);
	position: relative;
}

header .sitemap-btn>a {
	position: absolute;
	z-index: 505;
	top: 0;
}

header.sitemap-btn svg rect {
	fill: var(--color-white);
}

header.index.active .sitemap-btn svg rect,
header.index.on .sitemap-btn svg rect {
	fill: var(--color-black);
	transition: 0s 0s;
}

header .sitemap-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	background-color: rgba(0, 0, 0, .7);
	overflow-y: auto;
	z-index: 500;
	/* background: linear-gradient(0.25turn, #005BAC, #009944); */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	display: none;
}

header .sitemap-menu.on {
	display: block;
}

header .st_inner {
	width: 100%;
	max-width: 160rem;
	/* position: relative; */
	margin: 0 auto;
}

header .sitemap-title {
	font-size: 4.2rem;
	font-weight: bold;
	color: var(--color-white);
	padding-top: 3.4rem;
	line-height: normal;
}

header .sitemap-title span {
	color: var(--brand-color-sub);
}

header.sitemap .logo .white {
	display: block;
}

header .sitemap-menu li a {
	color: var(--color-white);
	display: inline-block;
}

header .sitemap-list {
	display: flex;
	justify-content: space-between;
	margin-top: 12rem;
	flex-direction: column;
	gap: 6rem;
}

header .sitemap-list>li {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

header .sitemap-list>li>a {
	font-size: 2.4rem;
	font-weight: bold;
	position: relative;
	width: 13%;
	height: fit-content;
	padding-left: 1.5rem;
	line-height: 1.2;
}

header .sitemap-list>li>a::after {
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	background-color: var(--color-white);
	width: 3px;
	height: 100%;
}

header .sitemap-depth02 {
	display: flex;
	width: calc(100% - 13%);
}

header .sitemap-depth02>li {
	width: 25%;
	padding-left: 1em;
}

header .sitemap-depth02>li>a {
	font-size: 2rem;
	font-weight: var(--font-md);
}

header .sitemap-depth03 {
	margin-top: 2.2rem;
	padding: 0 2.4rem;
	border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/*header .sitemap-list>li:first-of-type .sitemap-depth03 {
	height: 140px;
}*/

header .sitemap-depth03 li a {
	margin-bottom: 1.5rem;
	font-size: 1.8rem;
}

header .sitemap-depth03 li:last-of-type a {
	margin-bottom: 0;
}

header .sitemap-depth03 li a {
	opacity: .6;
	position: relative;
}

header .sitemap-depth03 li a::before {
	position: absolute;
	top: 0.8rem;
	left: -1rem;
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--color-white);
}

header .sitemap-depth03 li a:hover {
	opacity: 1;
}

/*header .sitemap-menu .priv {
	position: absolute;
	width: 100%;
	max-width: 160rem;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	z-index: -1;
}

header .sitemap-menu .privacy {
	display: flex;
	position: absolute;
	bottom: 4rem;
}

header .sitemap-menu .privacy a {
	color: var(--color-white);
	position: relative;
	opacity: .5;
}

header .sitemap-menu .privacy a:first-of-type {
	margin-right: 4rem;
	opacity: 1;
}

header .sitemap-menu .privacy a:first-of-type::after {
	content: '';
	width: 1px;
	height: 14px;
	background-color: var(--color-white);
	opacity: .3;
	position: absolute;
	right: -20.5px;
	top: 2px;
}*/

header .close {
	display: none;
}

header.sitemap .close {
	display: block;
	margin-top: 1rem;
}

header.sitemap .lines {
	display: none;
}

.btmmenu_etc {
	display: none;
}

/* 모바일CSS */
@media screen and (max-width:1660px) {
	header .st_inner {
		width: 96%;
	}

	/* header .logo i {
		width: 70%;
	} */

	/*header .sitemap-menu .priv {
		width: 100%;
		padding: 0 2rem;
	}

	header .sitemap-menu .privacy {
		right: 3rem;
	}*/

	header .sitemap-list>li>a {
		width: 15%;
	}

	header .sitemap-depth02 {
		/* width: calc(100% - 7%); */
	}

	header .sitemap-depth02>li>a {
		/* font-size: 1.6rem; */
	}

	header .sitemap-depth03 li a {
		font-size: 1.7rem;
	}

	header .sitemap-list>li>a {
		font-size: 2rem;
	}

	header .sitemap-depth02>li {
		/* width: 16.66666666666667%; */
		/* width: calc(16.66666666666667% - 1em); */
	}

	header .sitemap-depth02>li:nth-of-type(2) {
		/* width: 30%; */
		/* width: calc(30% - 1em); */
	}
}

@media screen and (max-width:1400px) {
	header .st_inner {
		width: 94%;
	}
}

@media screen and (max-width:1280px) {

	header button.lang {
		padding-bottom: 3px;
	}
}

@media screen and (max-width:1100px) {
	header .st_inner {
		width: 100%;
	}

	header .util-menu {
		gap: var(--rem-30);
	}

	header.sitemap .logo a {
		z-index: 202;
	}

	header .sitemap-menu {
		z-index: 100;
	}

	header .sitemap-list>li:first-of-type .sitemap-depth03 {
		height: auto;
	}

	header .sitemap-depth02>li:nth-of-type(5) {
		width: 100%;
	}

	header .logo {
		width: 12rem;
	}

	header .sitemap-btn {
		/* margin-left: 1.5rem; */
	}

	header .sitemap-title {
		display: none;
	}

	header.sitemap .logo {
		display: block;
		padding: 0;
		z-index: 101;
	}

	/* header.sitemap .logo a {
		top: 14px;
	} */

	header.sitemap .logo .color {
		display: none;
	}

	/* header.sitemap .logo .white */
	header.sitemap .logo>a {
		display: block;
	}

	header.sitemap .close {
		transform: scale(.8);
		margin-top: 0px;
	}


	header .sitemap-list>li>a {
		font-size: 1.9rem;
	}

	header .sitemap-depth02>li>a {
		/* font-size: 1.6rem; */
	}

	header .sitemap-list>li>a::after {
		display: none;
	}

	header .lang {
		z-index: 200;
		top: 1px;
	}

	header.sitemap .lang {
		color: var(--color-white);
		border-bottom: solid 1px #ffffff;
	}

	header .lang-btn {
		width: var(--rem-60);
	}

	header.sitemap .youtube a {
		display: block;
		width: 100%;
		height: 100%;
		z-index: 101;
		background: url('../../lib/images/gnb/youtube_w.png') center no-repeat;
		background-size: cover;
	}

	header.sitemap .youtube img {
		display: none;
	}

	header .lang::after {
		top: 50%;
		transform: translateY(-50%);
	}

	header.sitemap .lang::after {
		/* filter: invert(1); */
		/* content: url('../../lib/images/gnb/gnb-more-white-ico.svg'); */
	}

	header .gnb-menu .depth01 {
		display: none;
	}

	header>.inner {
		padding: 0.8rem 2rem;
	}

	header .lang-menu li a {
		/* padding: 0.6rem 0; */
	}

	header .sitemap-list {
		margin-top: var(--header-hei);
		gap: 0.5rem;
		position: relative;
	}

	header.sitemap .btmmenu_etc {
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: var(--spacing);
		z-index: 5000;
		background: var(--color-gray4);
		color: #ffffff;
	}

	header.sitemap .btmmenu_etc .link_list {
		display: flex;
		gap: 2rem;
		font-size: var(--rem-16);
	}

	header.sitemap .btmmenu_etc .copyright {
		padding-top: var(--rem-14);
		font-size: var(--rem-14);
		font-weight: var(--font-lg);
	}


	header .sitemap-list>li:first-of-type>a {
		margin-top: 2.5rem;
	}

	header .sitemap-list>li.on>a {
		background-color: var(--color-brand-main);
		color: var(--color-white);
		transform: translateX(1.5rem);
		z-index: 210;
		width: 13rem;
		border-radius: 5px;
	}

	header .sitemap-list.inner {
		padding: 0;
	}

	header .sitemap-list>li>a {
		padding-left: 0;
		color: var(--color-black);
		background-color: #F5F5F8;
		padding: 1.3rem 1rem 1.3rem 2rem;
		box-sizing: border-box;
		width: 11.5rem;
		/* font-size: 1.6rem; */
	}

	header .sitemap-depth02>li {
		width: 100%;
		height: 100%;
		background-color: var(--color-white);
		color: var(--color-black);
		box-sizing: border-box;
	}

	header .sitemap-depth02>li>a {
		font-size: var(--rem-18);
		color: #666;
		padding: 2rem 0px;
		margin: 0 2rem;
		border-bottom: 1px solid #ddd;
		width: calc(100% - 4rem);
		position: relative;
	}

	header .sitemap-depth02>li>a.on {
		color: var(--color-black);
	}

	header .sitemap-depth02>li>a.more::after {
		position: absolute;
		right: 0px;
		content: url('../../lib/images/gnb/gnb-mob-gray-ico.svg');

	}

	header .sitemap-depth02>li>a.more.on::after {
		content: url('../../lib/images/gnb/mob-more-ico.svg');
	}

	header .sitemap-depth02 {
		flex-direction: column;
		position: absolute;
		left: 13rem;
		top: 0;
		display: none;
	}

	header li.on .sitemap-depth02 {
		display: flex;
		z-index: 201;
		width: calc(100% - 13rem);
		padding: 1.5rem 0;
		max-height: calc(100vh - var(--header-hei) - 8rem);
		overflow-y: auto;
	}

	header .sitemap-depth03 {
		display: none;
		padding: 2rem 1.5rem;
		margin: 0 2rem;
		background-color: #F5F5F8;
		border-left: none;
		border-bottom: 1px solid #ddd;
	}

	header .sitemap-depth03 li a::before {
		display: none;
	}

	header .sitemap-depth03 li a {
		margin-bottom: 0.4rem;
		padding: 6px 0;
		line-height: 1.3;
		color: black;
		font-size: 1.7rem;
		display: block;
	}

	header .sitemap-list::after {
		position: absolute;
		left: 0;
		content: '';
		background-color: var(--color-white);
		width: 100%;
		height: calc(100vh - var(--header-hei) - 8rem);
		z-index: -2;
	}

	header .sitemap-list::before {
		position: absolute;
		left: 0;
		content: '';
		background-color: #F5F5F8;
		width: 12rem;
		height: calc(100vh - var(--header-hei) - 8rem);
		z-index: -1;
	}

	/*header .sitemap-menu .priv {
		display: none;
	}*/

}

@media screen and (min-width:1025px) and (max-height:1040px) {
	header.sitemap .logo a {
		width: 19rem;
	}

	header .sitemap-list {
		margin-top: 6rem;
		gap: 4rem;
	}

	/*header .sitemap-menu .privacy {
		bottom: 2rem;
		z-index: 10;
	}*/
}

@media screen and (max-width:480px) {

	header .logo {
		width: 10rem;
	}

	header .lang-btn {
		width: var(--rem-55);
	}

	header .util-menu {
		gap: var(--rem-24);
	}

	header .st_inner {
		width: 100%;
	}

	header .lang {
		font-size: var(--rem-17);
	}

	header .youtube {
		width: var(--rem-28);
		height: var(--rem-26);
	}
}

/* ==================================================
	Sub Bread Menu
================================================== */
.nav-sub-bread {}

.sub_bread_menu {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	height: 40px;
}

.sub_bread_menu:after {
	content: "";
	display: block;
	clear: both;
}

.sub_bread_menu>li {
	display: flex;
	align-items: center;
	position: relative;
	width: 30%;
	height: 100%;
	margin-left: 3.5rem;
}

.sub_bread_menu>li.depth1 {
	margin-left: 1.5rem;
}

/*.sub_bread_menu>li::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 69px;
	background-color: #e1e1e1;
}*/

.sub_bread_menu>li.firstHome {
	flex: 0 0 2rem;
	width: auto;
	justify-content: center;
	margin-left: 0;
}

.sub_bread_menu>li.firstHome img {
	width: 100%;
	max-width: 2rem;
}

.sub_bread_menu>li.firstHome>a {
	display: block;
	position: relative;
	font-size: 1.8rem;
	color: var(--brand-color-sub);
}

.sub_bread_menu>li:not(.firstHome) {
	/*flex: 0 0 17.5rem;*/
	width: 16rem;
	justify-content: left;
}

.sub_bread_menu>li.depth1 {
	width: 16rem;
}

.sub_bread_menu>li.depth2 {
	width: 16rem;
}

.sub_bread_menu>li.depth3 {
	width: 20rem;
}

.sub_bread_menu>li:not(.firstHome)>a {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 1.8rem;
	font-weight: var(--font-md);
	color: var(--brand-color-main);
}

/*.sub_bread_menu>li:last-child>a {
	color: var(--brand-color-sub);
}*/

.sub_bread_menu>li:not(.firstHome)>a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 14px;
	height: 10px;
	background: url('../../lib/images/gnb/arrow.svg');
	background-repeat: no-repeat;
	background-size: cover;
	transform: translateY(-50%);
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*.sub_bread_menu>li:last-child>a::after {
	background: url('../../lib/images/gnb/arrow_on.svg');
	background-repeat: no-repeat;
	background-size: cover;
}*/

.sub_bread_menu .menu-name {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sub_bread_menu>li>ul {
	position: absolute;
	width: 100%;
	top: 100%;
	background: #545454;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	transition: opacity 0.25s, visibility 0.25s;
	opacity: 0;
	visibility: hidden;
}

.sub_bread_menu>li.open>ul {
	opacity: 1;
	visibility: visible
}

.sub_bread_menu>li>ul>li>a {
	display: block;
	font-size: 1.6rem;
	text-align: left;
	color: #222;
	padding: 0 1.5rem;
	line-height: 40px;
	background-color: var(--color-white);
	transition: background-color 0.25s, color .25s, border .25s;
	border-bottom: 1px solid #eee;
}

.sub_bread_menu>li>ul>li:last-child>a {
	border-bottom: 0;
}

.sub_bread_menu>li>ul>li>a:hover,
.sub_bread_menu>li>ul>li.act>a {
	background: var(--brand-color-main);
	color: var(--color-white);
	border-color: var(--brand-color-main);
}

/* 모바일CSS */
@media screen and (max-width:800px) {
	.sub_bread_menu>li:not(.firstHome) {
		width: auto;
	}

	.sub_bread_menu>li.depth1 {
		width: 30%;
	}

	.sub_bread_menu>li.depth2 {
		width: 30%;
	}

	.sub_bread_menu>li.depth3 {
		width: 30%;
	}
}

/* ==================================================
	lnb
================================================== */
#subMenu {
	position: absolute;
	width: 100%;
	height: var(--sub-menu-hei);
	left: 0;
	bottom: 0;
	z-index: 100;
}

#subMenu .submenu_inner {
	text-align: center;
	width: 100%;
	height: var(--sub-menu-hei);
	/* background:var(--color-white);
	backdrop-filter: blur(5px); */

}

#lnb_con {
	/* position: relative; */
	max-width: var(--px-base);
	margin: 0px auto;
	top: -2.5rem;
}

#lnb_con .lnb {
	width: 90%;
	position: absolute;
	left: 50%;
	/* 가운데로 이동 */
	transform: translateX(-50%);
	/* 정확하게 가운데 정렬 */


}

#subMenu .submenu_inner ul {
	width: 100%;
	display: flex;
	gap: 1px;
	align-items: center;
	justify-content: center;
	margin: 0;
	box-sizing: border-box;
}

#subMenu .submenu_inner ul li {
	max-width: 22rem;
	flex-basis: 50rem;
	flex-shrink: 1;
	background-color: #fff;
}

#subMenu .submenu_inner ul .on {
	/* flex-shrink: 0.8; */
	transition: all 0.4s ease-in;
}

#subMenu .submenu_inner ul li>a {
	display: block;
	display: table;
	position: relative;
	width: 100%;
	height: var(--sub-menu-hei);
	line-height: var(--sub-menu-hei);
	font-size: var(--rem-18);
	font-weight: var(--font-rg);
	color: #7E7E7E;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

#subMenu .submenu_inner ul li a:hover {
	background-color: var(--color-brand-sub);
	color: var(--color-white);
	transition: background-color 0.4s ease;
}


#subMenu .submenu_inner ul li.on>a {
	width: 100%;
	background-color: var(--color-brand-sub);
	color: var(--color-white);
	font-weight: var(--font-sb);
}



#subMenu .submenu_inner ul li>a>span {
	display: table-row;
	vertical-align: middle;
	padding: 0 2.5rem;
}

@media screen and (max-width:667px) {

	#subMenu .submenu_inner ul {
		flex-wrap: wrap;
	}

	#lnb_con .lnb {
		width: 97%;
	}

	#subMenu .submenu_inner ul li {
		flex-basis: calc(25% - 1px);
		width: calc(25% - 1px);
	}
}

@media screen and (max-width:450px) {

	#subMenu .submenu_inner ul li>a {
		font-size: var(--rem-16);
		letter-spacing: -0.05em;
	}
}


/* ==================================================
	컨텐츠 서브메뉴
================================================== */
.cnb2 {
	width: 100%;
	max-width: var(--px-base);
	/*margin-right: auto;
	margin-left: auto;*/
	margin-bottom: var(--rem-60);
}

.cnb2 ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 1rem;
}

.cnb2 ul li {
	position: relative;
}

.cnb2 ul li:last-child {
	margin-right: 0;
}

.cnb2 ul li a {
	font-size: 1.8rem;
	font-weight: var(--font-rg);
	color: var(--color-gray5);
	display: inline-block;
	position: relative;
	text-align: center;
	width: 20rem;
	padding: 1.2rem 0;
	border: solid 1px var(--color-gray3);
	border-radius: 5rem;
}

.cnb2 ul li:hover a {
	color: var(--color-white);
	font-weight: var(--font-sb);
	border: solid 1px var(--color-brand-main);
	background-color: var(--color-brand-main);
	transition: all 0.3s ease-in-out;
}

.cnb2 ul li.on a {
	color: var(--color-white);
	font-weight: var(--font-sb);
	border: solid 1px var(--color-brand-main);
	background-color: var(--color-brand-main);
}


/* 애니메이션 */
.cnb_ani {
	opacity: 0;
	transform: translateY(30px);
}

.cnb_ani.active {
	opacity: 1;
	transform: translateX(0px);
	transition: 0.7s 0.6s;
}

/* 모바일CSS */
@media screen and (max-width:1380px) {
	.cnb2 {
		width: 100%;
		max-width: 800px;
		margin: 0 auto var(--rem-50);
	}

	.cnb2 ul {
		/* display: -ms-grid;
		display: grid;
		-ms-grid-columns: (1fr)[4];
		grid-template-columns: repeat(4, 1fr); */
		gap: 1rem 0.8rem;
		text-align: center;
	}

	.cnb2 ul.col2 {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
	}

	.cnb2 ul.col4 {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
	}

	.cnb2 ul li {
		margin-right: 0;
	}

	.cnb2 ul li.on:after {
		display: none;
	}

	.cnb2 ul li a {
		font-size: 2rem;
		letter-spacing: -0.05px;
	}

}

/* 화면 너비 800px 이하에서는 ul.col6 숨기고 select 보이기 */
@media (max-width: 800px) {

	.cnb2>ul {
		display: none !important;
	}

	.cnb2-select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block !important;
		width: 100% !important;
		padding: 1em !important;
		font-size: 1em !important;
		border-color: var(--color-gray3);
		border-radius: 3rem;
		background-color: #fff;
		transition: border-color .2s, box-shadow .2s, background-color .2s;
		cursor: pointer;
	}

	/* 마우스 올렸을 때 */
	.cnb2-select:hover {
		border-color: color-mix(in srgb, var(--color-brand-main) 50%, #fff);
		background-color: color-mix(in srgb, var(--color-brand-main) 6%, #fff);
	}

	/* 포커스(클릭/키보드 진입) 시 파란 아웃라인 대체 */
	.cnb2-select:focus,
	.cnb2-select:focus-visible {
		outline: none;
	}


	/* 옵션 목록(브라우저별 지원 다름) */
	.cnb2-select option {
		background-color: #fff;
		color: inherit;
		border-color: var(--color-gray3);
	}

	.cnb2-select option:hover {
		background-color: color-mix(in srgb, var(--color-brand-main) 15%, #fff);
		/* 지원되는 브라우저에서만 보임 */
	}

	.cnb2-select option:checked {
		background-color: color-mix(in srgb, var(--color-brand-main) 25%, #fff) !important;
		/* 현재 선택된 옵션 배경 */
		color: inherit;
	}

	/* (선택) 기본 화살표 숨기고 커스텀 아이콘 사용 */
	.cnb2-select {
		background-image:
			linear-gradient(45deg, transparent 50%, currentColor 50%),
			linear-gradient(135deg, currentColor 50%, transparent 50%),
			linear-gradient(to right, transparent, transparent);
		background-position:
			calc(100% - 1.2em) 50%,
			calc(100% - .8em) 50%,
			100% 0;
		background-size: .5em .5em, .5em .5em, 2.5em 100%;
		background-repeat: no-repeat;
	}


}

@media (min-width: 801px) {
	.cnb2-select {
		display: none !important;
	}
}

@media screen and (max-width:640px) {
	.cnb2 ul li a {
		font-size: 17px;
	}

	.cnb2 ul li.on a:after {
		background-color: var(--brand-color-sub);
		content: "";
		bottom: -1.2rem;
		left: 0;
		position: absolute;
		height: 0.3rem;
		width: 100%;
	}
}

@media screen and (max-width:450px) {
	.cnb2 ul {
		gap: 1rem;
	}

	.cnb2 ul li {
		padding-bottom: 0;
	}

	.cnb2 ul li a {
		width: 17rem;
		padding: 1rem;
		font-size: 15px;
		letter-spacing: -0.35px;
	}
}