@charset "UTF-8";

header{ background: #FFFFFF; color: #262626; }
.gnb{ text-align: center; overflow: hidden; }
.gnb li{ float: left; }
.gnb li a{ display: block; position: relative; padding: 10px 0 10px 15px; font-size: 12px; line-height: 1em; text-align: center;}
.gnb li a:hover{ color: #e2353f; }
.gnb img{ width: auto; }

.web nav .container{ display:flex; align-items:center; justify-content:space-between; gap:clamp(32px,4vw,78px); width:min(1680px,calc(100% - 64px)); max-width:none; min-height:120px; padding:0; }
.top_logo{ float:none; width:clamp(210px,16vw,270px); flex:0 0 clamp(210px,16vw,270px); margin-top:0; text-align:left; }
.top_logo a{ display:flex; align-items:center; height:96px; padding:0; }
.top_logo img{ display:block; width:auto; height:auto; max-width:100%; max-height:78px; object-fit:contain; }
.site-brand-link{ text-decoration:none; }
.site-brand-text{ display:inline-flex; align-items:center; max-width:100%; color:#222; font-size:19px; font-weight:700; line-height:1.35; word-break:keep-all; }
.logo-fallback{ display:none; }
.mobile-brand-text{ max-width:230px; color:#fff; font-size:15px; line-height:30px; }
.menu-brand-text{ max-width:240px; color:#fff; font-size:18px; justify-content:center; }

nav{ border-bottom: 3px solid #000000;}
nav .menu { float:none; display:flex; align-items:stretch; justify-content:space-between; gap:clamp(14px,1.65vw,34px); flex:1 1 auto; width:auto; max-width:none; min-width:0; margin:0; padding:0; }
nav .menu > li{ float:none; position:relative; flex:1 1 auto; width:auto; min-width:max-content; font-size:clamp(16px,1.08vw,20px); font-weight:600; }
nav .menu > li > a{ display:flex; align-items:center; justify-content:center; position:relative; min-height:96px; padding:0 clamp(2px,.3vw,7px); text-align:center; line-height:1.25; }
nav .menu > li > a span{ display:block; white-space:nowrap; }
nav .menu > li:hover > a { color: #e2353f; }
nav .menu > li:nth-child(1) > a span{ border-left: 0; }

/*서브메뉴*/
nav .menu .sub_menu{ font-size:12pt;font-weight:500;display: none; position: absolute; left: 0; top: 96px; z-index: 30; width: 100%; text-align: left; border-top: 3px solid #1C1C1C; background: rgba( 255,255,255,0.8 ); }
nav .menu > li:hover .sub_menu{ display: block; height: auto; padding:10px 0 15px 0; }
nav .menu .sub_menu a { display: block; padding: 5px 15px 0 15px; color: #3f3f3e; }
nav .menu .sub_menu a:hover{ color: #e2353f; }
nav .menu > li:nth-last-child(-n+2) .sub_menu{ left:auto; right:0; }

@media (min-width:992px) and (max-width:1399px) {
	.web nav .container{ gap:clamp(18px,2.6vw,38px); width:calc(100% - 40px); }
	.top_logo{ width:clamp(190px,18vw,235px); flex-basis:clamp(190px,18vw,235px); }
	.top_logo img{ max-width:100%; max-height:70px; }
	nav .menu{ gap:clamp(6px,1vw,14px); }
	nav .menu > li{ font-size:clamp(14px,1.25vw,17px); }
	nav .menu > li > a{ padding:0 2px; }
}

/*모바일메뉴*/
.mob_nav{ position: fixed; width: 100%; height: 50px; top: 0; z-index: 999; border-bottom:1px solid #ababab; background: #303030; }

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

#menu .close { width: 50px; height: 50px; padding: 15px; position: absolute; right: 0px; top: 0px; cursor: pointer; color: #fff; opacity:1; }/*닫기 버튼*/

#menu { width:min(88vw,420px); height: 100%; background: #4a413b; overflow-x:hidden; overflow-y:auto;
		position: fixed; top: 0px; left: -100%; z-index: 999999; 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{ min-height:70px; padding: 10px 55px; text-align: center; background: #3e352e; }
#menu .menu_log img{ width: auto; max-width:190px; height:auto; max-height:50px; object-fit:contain; }
#menu .login { padding: 15px 10px; overflow: hidden; }
#menu .login a{ display: block; text-align: center; line-height: 34px; border-radius: 5px; background: #6c594d; }

#nav-left > li > div { position: relative; min-height:52px; padding: 15px 52px 15px 20px; font-size: 16px; line-height:22px; border-bottom: 1px solid #615c58; cursor:pointer; }
/*#nav-left > li > div:hover { color: #ef4147; border-bottom: 1px solid #e9e9e9; background: #e9e9e9; }*/
#nav-left .open_menu div:after { content: "\e914"; position: absolute; right: 15px; font-family: 'xeicon'; width: 16px; height: 16px; line-height: 15px; text-align: center; }

#nav-left .open_menu.open > div{ color: #fff; }
#nav-left .open_menu.open > div:after { content: "\e91b"; font-family: 'xeicon'; }

/* .nav .open > a, .nav .open>a:focus, .nav .open>a:hover{ color: #fff; border-bottom: 1px solid #fd8a8a; background-color: #fa4b4b; } */

/* 모바일 서브 */
#nav-left > li > ul{display: none;}
#nav-left > .open_menu > ul{ display: none; border-bottom: 1px solid #615c58; background: #322c28; }
#nav-left > .open_menu > ul > li > a{ display:block; position:relative; min-height:46px; padding:12px 20px 12px 38px; font-size:15px; line-height:22px; }
#menu.open { left: 0px; }

.page_cover { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.4); z-index: 99999; display: none; }
.page_cover.open { display: block; }

@media (max-width:520px) {
	#menu{ width:90vw; }
	#menu .menu_log{ min-height:68px; padding:9px 52px; }
	#nav-left > li > div{ padding-left:17px; font-size:15px; }
	#nav-left > .open_menu > ul > li > a{ padding-left:32px; font-size:14px; }
}

footer{ padding: 20px 0; font-size: 12px; color: #9d9d9c; background: #575756; }
footer .container{ width:min(1600px, calc(100% - 48px)); max-width:none; }
footer img{ width: auto; }
footer .foot_logo{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding: 1rem 0; border-bottom: 1px solid #9d9d9c; }
footer .footer-brand{ display:flex; align-items:center; flex:0 0 300px; min-width:0; }
footer .footer-brand img{ display:block; width:auto; max-width:270px; height:auto; max-height:70px; object-fit:contain; }
footer .footer-brand-text{ display:inline-flex; align-items:center; max-width:270px; color:#444; font-size:18px; font-weight:700; line-height:1.35; word-break:keep-all; }
footer .footer-banner-list{ display:flex; flex:1 1 auto; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:clamp(8px, 1.2vw, 22px); min-width:0; overflow:hidden; }
footer .footer-banner-item{ display:inline-flex; flex:1 1 0; align-items:center; justify-content:center; min-width:0; line-height:0; }
footer .footer-banner-list img{ display:block; width:auto; height:auto; max-width:100%; max-height:clamp(34px, 3.2vw, 58px); object-fit:contain; }
footer .com{ padding: 0.7rem 0 0 0; }

footer .top { display: none; position: absolute; top: 0; right: 5px; width: 50px; height: 50px; line-height: 1em; padding: 9px 0; font-size: 14px; text-align: center; color: #fff; border-radius: 30px; background: #3e352e; }
@media (max-width:991px) {
	footer .container{ width:calc(100% - 24px); }
	footer .foot_logo{ gap:14px; }
	footer .footer-brand{ flex:0 1 170px; }
	footer .footer-brand img{ max-width:170px; max-height:50px; }
	footer .footer-brand-text{ max-width:170px; font-size:14px; }
	footer .footer-banner-list{ gap:8px; }
	footer .footer-banner-list img{ max-height:34px; }
	footer .top { display: block; padding: 12px 0; font-size: 12px; }
}
@media (max-width:520px) {
	footer .foot_logo{ gap:8px; }
	footer .footer-brand{ flex:0 1 92px; }
	footer .footer-brand img{ max-width:92px; max-height:34px; }
	footer .footer-brand-text{ max-width:92px; font-size:11px; }
	footer .footer-banner-list{ gap:5px; }
	footer .footer-banner-list img{ max-height:24px; }
}