@charset "UTF-8";

header { position:fixed; z-index: 999; width:100%; color: var(--white); background: rgb(2 25 77 / 50%); }
	header .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }
	header .nav::before, header .nav::after {display: none;}

	header.rol { background: var(--black); }
	header.rol .gnb, header.rol .mob_top_ban { display: none; }
	header.rol nav .sub_bg { top: 100px; }
	@media (max-width:991px) {
		header { border-bottom: none; }
	}

/*상단메뉴*/
header.on { background: var(--BL-2C); }
nav .top_logo { display: block; }
	nav .top_logo img { width: auto; }

nav .menu { display: flex; justify-content: flex-end; align-items: center; }
	nav .menu > li { position: relative; }
	nav .menu > li > a { display: block; position: relative; padding: 40px 25px; font-size: 20px; text-align: center; line-height: 1em; font-weight: 600; }

/*서브메뉴*/
nav .menu .sub_menu { visibility: hidden; position: absolute; left: 0; top: 100px; z-index: 30; width: 100%; text-align: center; opacity: 0; }
	nav:hover .sub_menu { visibility: visible; opacity: 1; }
	nav .menu .sub_menu a { position: relative; display: block; padding: 5px 0; font-size: 1.1em; white-space: nowrap; }
	nav .menu .sub_menu a:hover { color: var(--YL-FF); }

/* 로그인메뉴 */
nav .login_top { display: flex; gap: 10px; margin-left: auto; }
	nav .login_top li a { display: block; padding: 2px 10px; }
	nav .login_top li a span { animation: blink-effect 1.5s step-end infinite; }
	/* nav .login_top li:hover a { color: var(--BL-2C); background: var(--white); } */
	nav .login_top li:nth-child(1) a { font-weight: 800; border: 0; border-radius: 50px;
		background: -webkit-gradient(linear, left top, right top, color-stop(0, #172edc), color-stop(1, #b65b5a));
		background: -moz-linear-gradient(left, #172edc 0%, #b65b5a 100%);
		background: -webkit-linear-gradient(left,  #172edc 0%, #b65b5a 100%);
		background: -o-linear-gradient(left,  #172edc 0%, #b65b5a 100%);
		background: -ms-linear-gradient(left,  #172edc 0%, #b65b5a 100%);
		background: linear-gradient(left,  #172edc 0%, #b65b5a 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#172edc', endColorstr='#b65b5a', gradientType=1); }
		nav .login_top .bg.on a { color: var(--white); background: var(--BL-00) }

@keyframes blink-effect {
	50% {
		opacity: 0;
	}
}

/* 메뉴배경 */
nav .sub_bg { position: absolute; left: 0; top: 100px; display: none; width: 100%; padding: 0 0 40px 0; background: var(--BL-2C); }
	nav .sub_bg ul { display: flex; justify-content: space-between; }
	nav .sub_bg img { width: auto; }
nav .sub_bg.on { display: block; }

/*모바일메뉴*/
.mob_top_ban { text-align: center; background: var(--PU-4D); height: 30px; padding: 5px 0; }
.mob_top_ban img { width: auto; margin: 0 auto; }

.mob_nav { position: fixed; width: 100%; height: 50px; top: 0; z-index: 999; background: rgb(2 25 77 / 50%); }
header.rol .mob_nav { top: 0; background: var(--black); }

html.open { overflow: hidden; } /*메뉴가 열렸을때 본문이 스크롤 되지 않는다.*/
.mob_nav img{ width: auto; height: 30px; }
.mob_nav .mob_logo{ display: block; padding: 10px; }
.mob_btn { position: absolute; right: 0px; top: 0px; z-index: 1; width: 50px; height: 50px; background: url("../../img/common/mob_top.png") -50px 0 no-repeat; }/*메뉴 버튼*/

#menu { width: 100%; height: 100%; color: var(--white); padding-bottom: 30px; font-weight: 600; background: var(--BL-2C);
		position: fixed; top: 0px; right: -100%; z-index: 999999;
		overflow-y: scroll;
		transition: All 0.2s ease; -webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease; } /*메뉴 영역*/

#menu .menu_log{ display: flex; justify-content: space-between; align-items: center; padding: 14px 0 14px 20px; }
#menu .menu_log img{ width: auto; height: 30px; }
#menu .close { width: 50px; height: 50px; padding: 15px; color: var(--white); text-shadow: none; cursor: pointer; opacity: 1; }/*닫기 버튼*/

#nav-left > li > div { position: relative; padding: 16px 10px; font-size: 1.5em; border-bottom: 1px solid var(--white); }
#nav-left .open_menu div:after { content: "\e944"; position: absolute; right: 15px; font-family: 'xeicon'; }

#nav-left .open_menu.open > div{ border: 0; }
#nav-left .open_menu.open > div:after { content: "\e941"; font-family: 'xeicon'; }

/* 모바일 서브 */
#nav-left > li > ul{ display: none; }
	#nav-left > .open_menu > ul{ display: none; padding: 0 10px; color: var(--BL-2C); background: var(--white); }
	#nav-left > .open_menu > ul > li > a { display: block; position: relative; padding: 15px 0; font-size: 1.5em; border-bottom: 1px solid var(--BL-2C); }
	#nav-left > .open_menu > ul > li:last-child > a { border: 0; }
	#menu.open { right: 0px; }

.page_cover { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: var(--BK-OP-04); z-index: 99999; display: none; }
.page_cover.open { display: block; }

/* 모바일 로그인 */
#menu .mob_login { display: flex; align-items: center; gap: 10px; padding: 20px 10px; }
#menu .mob_login a { display: block; padding: 7px 20px; font-size: 1.3em; border: 1px solid var(--white); }

#menu .mob_ban { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
	#menu .mob_ban li { width: 50%; }

/* 하단 */
footer img {width: auto;}

footer .lnk { padding: 30px 0; }
	footer .lnk ul { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px 0; }
	footer .lnk li { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
	footer .lnk p { font-size: 1.5em; font-weight: 500; }
		
footer .info_wrap { padding: 50px 0; font-size: 1.1em; color: var(--BK-A9); border-top: 1px solid var(--BK-D1); }
	footer .info_wrap ul { display: flex; align-items: flex-start; gap: 0 60px; line-height: 1.5em; }
	footer .info_wrap ul li:nth-child(1) { width: 300px; }
	footer .info_wrap ul li:nth-child(3) { margin-left: auto; }
	footer .info_wrap .copy { display: block; padding: 0 0 0 0; font-size: 14px; font-weight: 700; }

footer .info_wrap .lang { position: relative; }
	footer .info_wrap .lang p { position: relative; width: 174px; height: 48px; line-height: 48px; padding: 0 20px; border: 1px solid var(--BK-A9); cursor: pointer; }
	footer .info_wrap .lang p:after { content:"\e930"; position: absolute; right: 20px; font-family: xeicon; }
	footer .info_wrap .lang a { display: none; width: 174px; height: 48px; line-height: 48px; padding: 0 20px; position: absolute; border: 1px solid var(--BK-A9); border-top: 0; background: var(--white); }
	footer .info_wrap .lang a:hover { color: var(--BK-A9); }
	footer .info_wrap .lang .on:after { transform: rotate(180deg); }

footer .top { display: none; position: absolute; bottom: 10px; right: 10px; width: 50px; line-height: 1em; font-size: 14px; text-align: center; }
@media (max-width:991px) {
	footer .lnk { padding: 15px 0; }
		footer .lnk p { width: 100%; text-align: center; }
		footer .lnk li { justify-content: center; gap: 10px; width: 100%; }
		footer .lnk a { width: calc(25% - 10px); }

	footer .info_wrap { padding: 25px 0 }
		footer .info_wrap ul { flex-wrap: wrap; gap: 20px; }
		footer .info_wrap ul li:nth-child(1) { width: auto; order: 3; }
		footer .info_wrap ul li:nth-child(2) { width: auto; order: 2; }
		footer .info_wrap ul li:nth-child(3) { width: 100%; order: 1; }

		footer .top { bottom: 50px; }
}
@media (max-width:767px) {
	footer .info_wrap .lang p,
	footer .info_wrap .lang a { width:100%; }
}