/**/
:root {
  --header-pcH: 10.4rem;
  --header-mobileH: 7.6rem;
}
@keyframes headerFix {
	0% {
		top: -10.5rem;
	}
	100% {
		top: 0;
	}
}
@keyframes gnbBg {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*공통*/
html {
  font-size: 10px;
}
.wrap{
	font-family: 'Pretendard';
	font-size: 1.8rem;
}
.innerframe-1920{
	max-width:192rem;
	width:100%;
	margin:auto;
}
.innerframe-1720{
	max-width:172rem;
	width:100%;
	margin:auto;
	padding: 0 5rem;
}
.innerframe-1620{
	max-width:162rem;
	width:100%;
	margin:auto;
}
.innerframe-1500{
	max-width:150rem;
	width:100%;
	margin:auto;
	padding: 0 5rem;
}
.innerframe-1400{
	max-width:140rem;
	width:100%;
	margin:auto;
}
.innerframe-1000{
	max-width:100rem;
	width:100%;
	margin:auto;
}
.font-blind {
	font-size: 0;
	color: transparent;
}
.btn-new-link img {
	margin-top:0.3rem;
	margin-left: 0.5rem;
	width: 1.5rem;
	height: 1.5rem;
}
.font-0{
	font-size:0;
	line-height:0;
}
/*공통 - pc-block*/
.pc-show{
	display:block
}
.m-show{
	display:none;
}
/* 공통 - 간격 */
.m-auto {
	margin: 0 auto !important;
}
.w-max {
	width: max-content !important;
}
.w-min {
	width: min-content !important;
}
.w-100 {
	width: 100% !important;
}
.va-t {
	vertical-align: top !important;
}
.va-m {
	vertical-align: middle !important;
}
.va-b {
	vertical-align: bottom !important;
}
.txt-l {
	text-align: left !important;
}
.txt-r {
	text-align: right !important;
}
.txt-c {
	text-align: center !important;
}
.pb-0 {
	padding-bottom: 0 !important;
}
.pt-0 {
	padding-top: 0 !important;
}
.pt-24 {
	padding-top: 2.4rem !important;
}
.pb-24 {
	padding-bottom: 2.4rem !important;
}
.mt-0 {
	margin-top: 0 !important;
}
.mt-5 {
	margin-top: 0.5rem !important;
}
.mt-10 {
	margin-top: 1rem !important;
}
.mt-15 {
	margin-top: 1.5rem !important;
}
.mt-20 {
	margin-top: 2rem !important;
}
.mt-30 {
	margin-top: 3rem !important;
}
.mt-40 {
	margin-top: 4rem !important;
}
.mt-50 {
	margin-top: 5rem !important;
}
.mt-60 {
	margin-top: 6rem !important;
}
.mb-0 {
	margin-bottom: 0 !important;
}
.mb-10 {
	margin-bottom: 1rem !important;
}
.mb-20 {
	margin-bottom: 2rem !important;
}
.mb-30 {
	margin-bottom: 3rem !important;
}
.mb-40 {
	margin-bottom: 4rem !important;
}
.mb-50 {
	margin-bottom: 5rem !important;
}
.mb-60 {
	margin-bottom: 6rem !important;
}
.mb-70 {
	margin-bottom: 7rem !important;
}
.mb-80 {
	margin-bottom: 8rem !important;
}
/* 컬러 값 */
.bg-blue {
	background-color: #34368A !important;
} 
.bg-lilac {
	background-color: #9469F1 !important;
} 
.bg-sky {
	background-color: #3295DD !important;
} 
.bg-sky02 {
	background-color: #009BDE !important;
} 
.bg-yellow {
	background-color: #FED600 !important;
}
.bg-purple {
	background-color: #A668E4 !important;
}
.bg-cian{
	background-color: #1A9C8F !important;
}
.bg-lightgreen{
	background-color: #36A522 !important;
}
.bg-lightpurple{
	background-color: #4145DC !important;
}
.bg-orange {
	background-color: #DC7500;
}
.c-white {
	color: #ffffff !important;
}
.c-blue {
	color: #34368A !important;
}
.c-yellow {
	color: #FED600 !important;
}
.c-red {
	color: #FF2323 !important;
}
.c-black {
	color: #666666 !important;
}
.c-black02 {
	color: #222222 !important;
}
/* 폰트 사이즈 */
.fs-14 {
	font-size:1.4rem !important;
}
.fs-16 {
	font-size:1.6rem !important;
}
.fs-18 {
	font-size:1.8rem !important;
}
.fs-20 {
	font-size:2rem !important;
}
.fs-22 {
	font-size:2.2rem !important;
}
.fs-24 {
	font-size:2.4rem !important;
}
.fs-26 {
	font-size:2.6rem !important;
}
.fs-28 {
	font-size:2.8rem !important;
}
.fs-30 {
	font-size:3rem !important;
}
/* 폰트 굵기 */
.fw-300 {
	font-weight: 300 !important;
}
.fw-400 {
	font-weight: 400 !important;
}
.fw-500 {
	font-weight: 500 !important;
}
.fw-600 {
	font-weight: 600 !important;
}
.fw-700 {
	font-weight: 700 !important;
}
.fw-800 {
	font-weight: 800 !important;
}
.fw-900 {
	font-weight: 900 !important;
}
/* 라벨 */
.label-wrap {
	display: flex;
	align-items: center;
}
.label-type01 {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	min-width: max-content;
	height: 3.5rem;
	font-size: 1.6rem;
	font-weight: 600;    
	line-height: 2rem;
	color: #fff;
	text-align: center;
	border-radius: 6rem;
}
.label-type02 {
	display: inline-block;
	padding: 0.4rem 0.7rem;
	min-width: 2.4rem;
	min-height: 2.4rem;
	font-size: 1.6rem;
	font-weight: 600;
	color: #fff;
	line-height: 100%;
	text-align: center;
	border-radius: 100%;
}
.label-type03 {
	display: inline-block;
	padding: 0.4rem 1rem;
	min-width: max-content;
	height: 2.7rem;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.9rem;
	border-radius: 0.4rem;
	color: #FFFFFF;
}
.label-type01 + .txt01 {
	margin-left: 1rem;
}
.label-type02 + .label-type02  {
	margin-left: 0.6rem;
}
/* 공통 - flex */
.dp-block {
	display: block !important;
}
.dp-flex {
	display: flex !important;
}
.fd-r {
	flex-direction: row;
}
.fd-c {
	flex-direction: column;
}
.ai-b {
	align-items: baseline;
}
.ai-s {
	align-items: flex-start !important;
}
.ai-e {
	align-items: flex-end !important;
}
.ai-c {
	align-items: center !important;
}   
.jc-s {
	justify-content:flex-start !important;
}
.jc-c {
	justify-content:center !important;
}
.jc-e {
	justify-content:flex-end !important;
}
.jc-bw {
	justify-content:space-between !important;
}
.jc-sa {
	justify-content: space-around !important;
}
.flex-right{
	justify-content:flex-end !important;
}
.mg-auto  {
	margin: 0 auto;
}
.mg-0 {
	margin: 0 !important;
}
/*팝업*/
#popup{
	height:0;
	position:relative;
	z-index:27;
}
body.on {
	overflow: hidden;
}
.popup-wrap {
	display:none;
	position:fixed;
	top:0;left:0;
	width: 100%;
	height:100%;
	background: rgba(0, 0, 0, 0.60);
	z-index: 30;
}
.popup-wrap2 {
	display:none;
	position:fixed;
	top:0;left:0;
	width: 100%;
	height:100%;
	background: rgba(0, 0, 0, 0.60);
	z-index: 30;
}
.popup {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	overflow:hidden;
	width:calc(100% - 4rem);
	border-radius: 0.6rem;
	background:#fff;
	box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.20);
}
.popup.size-m {
	max-width:74rem;
}
.pop-head {
	padding:2rem 2.4rem;
	min-height:6.5rem;
	color: #FFF;
	font-weight: 500;
	line-height: 1;
	background: #34368A;
}
.pop-body{
	padding:4rem 4rem 6rem;
}
.popup-wrap .pop-cont {
	overflow: auto;
}
.pop-cont .p-tit{
	margin-bottom:2rem;
	color: #222;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 130%;
}
.pop-cont::-webkit-scrollbar {
	width: 0.3rem;
	height: 0.3rem;
}
.pop-cont::-webkit-scrollbar-thumb {
	background-color: #999999;
	border-radius: 0.4rem;
	background-clip: padding-box;
}
.pop-cont::-webkit-scrollbar-track {
	background: transperant;
}
.p-btn-wrap {
	display:flex;
	justify-content:center;
	gap:1rem;
	margin-top:4rem;
	padding-top:4rem;
	border-top: 0.1rem solid rgba(0, 0, 0, 0.10);
}
.p-btn-wrap.single .p-btn {
	min-width:16.7rem;
}
.p-btn-wrap.double .p-btn {
	width: calc((100% - 1rem) / 2);
}
.p-btn {
	padding:2.4rem 0;
	font-weight: 600;
	text-align: center;
	line-height: 100%;
	border-radius: 0.4rem;
}
.p-btn.white{
	color: #222;
	border: 1px solid #222;
	background: #fff;
}
.p-btn.blue{
	color:#fff;
	background: #34368A; 
}
.p-btn-close{
	position:absolute;
	top: 0;
    right: 0;
    height: 6.5rem;
    width: 6.5rem;
	z-index: 10;
}
.p-btn-close > img {
	width: 1.6rem;
	height: auto;
}
/*팝업 - 홈페이지 이용 관련 건의*/
.popup-wrap.homepage .email{
	display:block;
	margin-top:2rem;
}
/* 헤더 */
.wrap > header {
	position: relative;
	background-color: #34368A;
	z-index: 26;
}
.wrap > header > .gnb-bg {
	display: none;
	position:absolute;
	top: 100%;
	left: 0;;
	width: 100%;
	overflow: hidden;
	background: #fff;
	border-bottom: 0.1rem solid #d9d9d9; 
	z-index: 25;
}
.wrap > header > .gnb-bg::after {
	content:"";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	right: 0;
	animation: gnbBg 1s;
}
.wrap > header.fixed {
	position: fixed;
	top: 0;
	width: 100%; 
	background-color: #34368A;
	animation: headerFix 0.3s ;
}
.header-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	margin: 0 auto;
	padding: 0 5rem;
	max-width: 170rem;
	width: 100%;
	height: var(--header-pcH);
}
.main-logo > a {
	display: block;
	width: 18rem;
	height: auto;
}
.main-logo img {
	width: 100%;
	height: 100%;
}
.gnb {
	margin: 0 auto;    
}
.gnb.hide {
	display: none;
}
.gnb-depth1 {
	display: flex;
	justify-content: space-between;	
}
.gnb-depth1 > li {
	position: relative;
}
.gnb-depth1 > li > a {
	display: flex;
	align-items: center;    
	justify-content: center;
	position: relative;
	padding: 0 3rem;
	width: 19rem;
	height: var(--header-pcH);
	font-weight: 600;
	font-size: 2.1rem;
	line-height: 2.4rem;
	color: #fff;
	word-break: keep-all;
	text-align: center;
}
.gnb-depth1 > li > a.active {
    background: #2E2F5F;;
	color: #fff;
}
.gnb-depth1 > li > a::after {
	content: "";
	display: block;
	position: absolute;
	left: 3rem;
	top: calc(100% - 2rem);
	width: 0;
	height: 0.3rem;
	background: #22AC39;
	transition: width 0.3s linear;
}
.gnb-depth1 > li > a.active::after {
	width: calc(100% - 6rem);
}
.gnb-depth2 {
	display: none;
    position: absolute;
    width: 100%;
    z-index: 26;
}
.gnb-depth2 > li {
	padding: 1.1rem 3rem 1.1rem 3rem;
	font-size: 1.6rem;
	font-weight: 500;
	color: #666666;    
}
.gnb-depth2 > li:first-child {
	padding: 1.8rem 3rem 1.1rem 3rem;
}
.gnb-depth2 > li > a {
	display: block;
	word-break: keep-all;
}
.gnb-depth2.active {
	display: block;
    background: #2E2F5F;
}
.gnb-depth2.active > li > a:not(.n-win) {
	color: #fff;
	transition: color 0.3s linear;
}
.gnb-depth2.active > li > a:not(.n-win):hover {
	color: #22AC39;
}
.gnb + .side-menu {
	display: flex;
	align-items: center;
    justify-content: flex-end;
	opacity: 1;
	transition: opacity 0.2s linear;
}
.gnb + .side-menu > li + li {
	margin-left: 2.5rem;
}
/* 모바일 메뉴 (공통이라 반응형 때문에 css 여기에 두었습니다) */
.m-lang-select {
	display: none;
}
.menu-mobile {
	display:none;
}
.menu-mobile input {
	display: block;
	width: 40px;
	height: 32px;
	position: absolute;
	cursor: pointer;
	opacity: 0;
	z-index: 2;
}
.menu-mobile span {
	display: block;
	width: 3rem;
	height: 0.3rem;
	margin-bottom: 0.6rem;
	position: relative;
	background: #fff;
	border-radius: 3px;
	z-index: 1;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
		background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
		opacity 0.55s ease;
}

.menu-mobile span:first-child {
	transform-origin: 0% 0%;
}
.menu-mobile span:nth-last-child(2){
	margin-bottom: 0;
	transform-origin: 0% 100%;
}
.menu-mobile input:checked ~ span {
	opacity: 1;
	transform: rotate(45deg) translate(-0.2rem, 0.2rem);
	background: #232323;
}
.menu-mobile input:checked ~ span:nth-last-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}
.menu-mobile input:checked ~ .m-menu-list {
	transform-origin: 0% 0%;
	transform: translate(-100% , 0);
}
.menu-mobile input:checked ~ span:nth-last-child(2) {
	transform: rotate(-45deg) translate(0, -0.3rem);
}
.m-menu-list {
	position: fixed;
	top: 0;    
	left: 100%;    
	padding: 7rem 5rem 2rem;
	width: 100%;
	height: 100vh;
	background: #fff;
	transform: none;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.m-menu-list > .mobile-menu {
	padding-right: 1rem;
	height: calc(100% - 15rem);
	overflow: auto;
}
.m-menu-list > .mobile-menu::-webkit-scrollbar {
	width: 0.3rem;
}
.m-menu-list > .mobile-menu::-webkit-scrollbar-thumb {
	background-color: #999999;
	border-radius: 0.4rem;
	background-clip: padding-box;
}
.m-menu-list > .mobile-menu::-webkit-scrollbar-track {
	background: transperant;
}
.m-menu-list > .mobile-menu > li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.m-menu-list > .mobile-menu > li > a {
	display: flex;
	justify-content: space-between;    
	align-items: center;
	flex-wrap: wrap;
	padding: 2.4rem 0;
	width: 100%;
	font-size: 2.7rem;
	font-weight: 700;
	line-height: 130%;
}
.m-menu-dep2 {
	display: none;
	width: 100%;
}


.m-menu-dep2 > li > a {
	display: block;
	width: 100%;
	/*width: fit-content; */
	padding: 1.5rem 2rem 1.5rem 0;
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 130%;
	color: #666;
	padding-left: 20px;
}
.m-menu-dep2 > li:last-child > a {
	padding-bottom: 4rem;
}
.m-menu-dep2 > li > a:hover {
	color: #34368A;
}
.m-btn-open{
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	right: 0;
}

.m-btn-open:before, .m-btn-open:after{
	content: "";
	position: absolute;
	background-color: black;
	transition: transform 0.25s ease-out;
}
.m-menu-bottom {
	display: flex;
	align-items: center;
	gap: 1rem;
	position: absolute;
	bottom: 5rem;    
	left: 5rem;
	right: 5rem;    
	height: max-content;
	background: #fff;
}
.m-menu-bottom > a {
	flex: 1;
	padding: 1.8rem 0;
	height: 6.4rem;
	color: #222;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 130%;
	text-align: center;
	border-radius: 0.4rem;
	border: 1px solid #222;
}
.m-menu-dep2 > li > a.n-win {
	background-position: right top 2rem;
}

/* vertical line */
.m-btn-open:before{
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	margin-left: -1px;
}

/* horizontal line */
.m-btn-open:after{
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
}

.m-menu-list > .mobile-menu > li > a:hover .m-btn-open{
	cursor: pointer;
}
.m-menu-list > .mobile-menu > li > a.on .m-btn-open{
	cursor: pointer;
}
.m-menu-list > .mobile-menu > li > a.on .m-btn-open::before{ 
	transform: rotate(90deg); 
}
.m-menu-list > .mobile-menu > li > a.on .m-btn-open::after{ 
	transform: rotate(180deg); 
}

/*푸터*/
footer{
	background: #1B273E;
	color: #FFF
}
.footer-t{
	padding:4.5rem 0;
	border-bottom:0.1rem solid #d9d9d9;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.9rem;
	letter-spacing: -0.02em;
}
.footer-t .innerframe-1620{
	display:flex;
}
.footer-b .innerframe-1720{
	display:flex;
	justify-content:space-between;
	padding-top:8rem;
	padding-bottom:10.9rem;
}
.f-logo{
	max-width:24rem;
	height:6.8rem;
	object-fit: contain;
}
@media (max-width: 1795px){
	/* 헤더 */
	.gnb-depth2 > li {
		padding: 1.1rem 2rem 1.1rem 2rem;
	}
	.gnb-depth2 > li:first-child {
		padding: 1.8rem 2rem 1.1rem 2rem;
	}
	.gnb-depth1 > li > a {
		padding: 0 2rem;
		width: 15rem;
		font-size: 1.8rem;
	}
	.gnb-depth1 > li > a::after {
		left: 2rem;
	}
	.gnb-depth1 > li > a.active::after {
		width: calc(100% - 4rem);
	}
}
@media (max-width: 1620px){
	/* 푸터 */
	footer .innerframe-1620{
		padding-left:2rem;
		padding-right:2rem;
	}
}
@media (max-width: 1560px){
	/* 헤더 */
	.header-wrap > .side-menu,
	.header-wrap > .search-wrap {
		display: none;
	}
}
@media (max-width: 1500px){
	.t-scroll, .m-scroll {    
		position: relative;
    	overflow: auto;
	}
	.m-scroll > .wrap-grouptb{
		width:150rem;
	}
}
@media (max-width: 1370px) {
}
@media (max-width: 1270px){
}
@media (max-width: 1190px){
	.footer-b .innerframe-1720{
		flex-direction:column;
	}
}
@media (max-width: 1020px){
	.m-scroll > *,
	.t-scroll > table {
		width: 100rem;
	}
}
@media (max-width: 840px){
}
@media (max-width: 768px){
	/* 헤더 */
	.header-wrap {
		padding: 0 2rem;
		height: var(--header-mobileH);
	}
	.main-logo > a {    
		width: 12.5rem;
		min-width: auto;
		height: auto;
	}
	/* 모바일 메뉴 */
	.m-menu-list {
		padding: 14rem 2rem 2rem;
	}
	.m-menu-list > .mobile-menu {
		height: calc(100% - 5rem);
	}
	.m-menu-bottom {   
		top:7rem;
		left: 2rem;
		right: 2rem;
	}
	/*팝업*/
	.pop-head{
		min-height:5rem;
		font-size:1.6rem;
	}
	.pop-body{
		padding:4rem 2rem 6rem;
	}
	.pop-body .p-tit{
		font-size: 2rem;
	}
	.pop-body .pop-cont{
		max-height: 30vh;
		overflow:auto;
		font-size:1.6rem;
	}
	.p-btn-wrap .p-btn {
		font-size: 1.6rem;
	}
	.p-btn-wrap.single .p-btn{
		width:100%;
	
	}.p-btn-close {    
		top: 0.5rem;
		height: 5rem;
		width: 5rem;
	}
	.p-btn-close > img {
		width:1.4rem;
	}
	/*공통 - pc-block*/
	.pc-show{
		display:none;
	}
	.m-show{
		display:block;
	}
	.innerframe-1720{
		padding: 0 2rem;
		max-width: 100%;
	}
	.innerframe-1500{
		padding: 0 2rem;
		max-width: 100%;
	}
	/* 테이블 공통 */
	table > thead th,
	table > thead td,
	table > tbody th,
	table > tbody td {
		font-size: 1.6rem;
	}
	/* 테이블 주석 */
	.t-scroll + .list-dot, 
	table + .list-dot {
		margin-top: 2rem;
	}
	.tbl-desc {
		font-size: 1.8rem;
	}
	/* 푸터 footer */
	.footer-t{
		position:relative;
		padding:0rem 0 1rem;
		font-size: 1.3rem;
		line-height: 150%;
		border-bottom:unset;
	}
	.footer-t::before{
		content:"";
		display:inline-block;
		position:absolute;
		bottom:0;
		left:50%;
		width:calc(100% - 4rem);
		height:0.1rem;
		transform:translateX(-50%);
		background:rgb(255,255,255,0.1);
	}
	.footer-b .innerframe-1720{
		padding:4rem 2rem 7.3rem;
	}
	.f-logo{
		max-width:16rem;
		height:auto;
	}
}
@media (max-width: 560px){
}
@media (max-width: 500px){
}
@media (max-width: 450px){
}
@media (max-width: 430px){	
}