@charset "UTF-8";
/* responsive_wide_top_menu.css 시작*/

/*구글 번역*/
#google_translate_element{width:115px;display:inline-block; height:35px; line-height:35px}
#google_translate_element a, #google_translate_element a span{color:#fff !important;  height:35px !important;}
#google_translate_element a:hover, #google_translate_element a:hover span{color:#fff !important;}
#goog-gt-tt {display:none !important;}
.goog-te-gadget-simple{padding:0px !important; border:0px !important; background-color: transparent !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-te-gadget-icon {background-image:url('//gtranslate.net/flags/gt_logo_19x19.gif') !important;background-position:0 0 !important; border-radius:100px}

.me_eng{display:none;}

@media all and (min-width:1199px){
	#gnb_open{display:none}
	#user_menu, #user_btn, .btn_gnb_op{display:none}

	#hd_inside .logo {
		position: relative !important; /* 순서를 매기기 위해 필수 */
		z-index: 10000 !important;     /* 배경막(999)보다 훨씬 높은 숫자로 설정 */
	}

	#hd {position: relative; z-index: 10000;}
	#hd:after {content:''; position:absolute; width:100%; background:#fff; z-index:999; left:0; height:0; transition: all 300ms;}
	.hd_menu_on::after {border-bottom:1px solid #ddd; margin-top:0px; border-top:1px solid #ddd; height:var(--hd_menu_bg_h, 170px) !important;} /* 높이는 JS(responsive_top_wide_menu.js)가 소메뉴 개수에 맞춰 --hd_menu_bg_h 로 계산 */
	/* 1. 기본 상태: 서브메뉴 시작 위치를 아래로 밈 */
	#gnb .gnb_2dul {
		top: 82px !important; /* 대메뉴 글자 높이만큼 아래로 내림 (수치 조절 필요) */
		left: 0;
		width: 100%;
		z-index: -1; /* 글자보다 뒤로 가게, 하지만 배경보다는 앞으로 */
	}

	#hd.hd_scrolled.hd_menu_on::after {
		top: 70px;
		 margin-top:35px;
		/* ▼ 여기도 JS와 동일하거나 더 큰 숫자로 변경하세요 (예: 350px) */
		height: var(--hd_menu_bg_h, 250px) !important;
		border-bottom: 1px solid #ddd;
	}
	/* 2. 스크롤 내렸을 때: 헤더가 얇아지므로 서브메뉴도 위로 붙임 */
	#hd.hd_scrolled #gnb .gnb_2dul {
		top: 50px !important; /* 스크롤 됐을 때 헤더 높이에 맞춤 */
	}

	/* (옵션) 혹시 서브메뉴가 대메뉴 글자를 가리면 z-index 조정 */
	.gnb_1da {
		position: relative;
		z-index: 10; /* 대메뉴 글자가 제일 위에 오도록 */
		background: transparent; /* 배경 투명하게 */
	}

	#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
	#hd_wrap {width:100%;text-align:center;background:#fff;}
	#hd_wrapper {position:relative;margin:0 auto;width:100%;zoom:1;background:#fff}
	#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:"";background:#fff}


	#hd_inside{width:100%;max-width:var(--site_width);margin: 0 auto; position:relative;}
	#res_hd_inside{display:none}
	#hd_inside .logo {float:left;display:inline-block;margin:20px auto;text-align:left}


	.hd_sch_wr{position:absolute;top:25px;left:50%;width:430px;margin-left:-215px;}
	#hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
	#hd_sch{;border:2px solid #556ada;background:#fff;border-radius:5px;overflow:hidden}
	#hd_sch #sch_stx {padding-left:10px;height:40px;width:376px;border:0;;border-right:0;float:left;font-size:13px}
	#hd_sch #sch_submit {height:40px;border:0;background:#fff;color:#253dbe;width:50px;float:left;cursor:pointer;font-size:18px}


	#sbn_side{position:absolute;top:20px;right:0}

	#tnb {background:#faa61a;height:35px;color:#fff; padding:0 20px} /* Top tnb color, border-bottom 필요시 추가 */
	#tnb h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
	#tnb ul {margin:0 0px;zoom:1; text-align:right; }
	#tnb ul:after {display:block;visibility:hidden;clear:both;content:""}
	#tnb li {display:inline-block;margin-bottom:-1px; font-size:13px;}
	#tnb li:last-child a{padding-right:0;}
	#tnb a {display:inline-block;padding:0 5px;color:#fff;line-height:35px}
	#tnb a:hover{color:#FFF !important;}
	#tnb .tnb_left{float:left}
	#tnb .tnb_left a{padding:0 14px}
	#tnb .tnb_cart{border-right:1px solid #ddd;}
	#tnb .tnb_community{border-right:1px solid #ddd}
	#tnb .tnb_community i{font-size:15px}
	#tnb .tnb_community{background:#e7e7e7;font-weight:bold;}
	#tnb .tnb_community:focus, #tnb .tnb_community:hover {color:#333;border-bottom:0}
	#tnb .tnb_community a{color:#253dbe;border-bottom:1px solid #e7e7e7}

	#hd_qnb{float:right;margin-top:20px}
	#hd_qnb:after {display:block;visibility:hidden;clear:both;content:""}
	#hd_qnb li{float:left;font-size:13px;line-height:15px;position:relative;text-align:center;margin:0 10px}
	#hd_qnb li span {display:block;margin-top:5px;font-size:13px}
	#hd_qnb li a{display:block}
	#hd_qnb li i{display:inline-block;width:40px;line-height:40px;border-radius:25px;background:#fff;text-align:center;margin:0;color:#fff}
	#hd_qnb .visit .visit-num{display:inline-block;line-height:18px;padding:0 5px;border-radius:10px;background:#f04e00;color:#fff;font-size:10px;position:absolute;top:0;right:0}
	#hd_qnb li .fa-question{background:#e83a5f;font-size:20px}
	#hd_qnb li .fa-question:hover{background:#e41b45}
	#hd_qnb li .fa-comments{background:#82c13f;font-size:16px}
	#hd_qnb li .fa-comments:hover{background:#5aa708}
	#hd_qnb li .fa-users{background:#f0ba00;font-size:15px}
	#hd_qnb li .fa-users:hover{background:#f06f00}
	#hd_qnb li .fa-history{background:#8522c4;font-size:15px}
	#hd_qnb li .fa-history:hover{background:#6700a9}

	.logo img{max-width:400px;max-height:60px}


	/* 메인메뉴 */
	#gnb{float:right;position:relative; font-family:'Noto Sans KR', malgun gothic, sans-serif;margin:25px auto; overflow:hidden; transition:all 300ms; position:Absolute; z-index:1000; right:0;}
	#gnb h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
	#gnb .gnb_wrap{margin:0 auto;position:relative;text-align:center;width:100% }
	#gnb #gnb_1dul {padding: 0;zoom:1;margin:0 auto; display: flex; gap: 7vw;}
	/*#gnb ul:after {display:block;visibility:hidden;clear:both;content:"";}*/
	/*#gnb .gnb_1dli{float:left; position:relative;border-right:0px;text-align:left;border-collapse:collapse; margin:0 35px; } 2023-07-20 수정*/
	#gnb .gnb_1dli{float:left; position:relative;border-right:0px;text-align:left;border-collapse:collapse; }
/*	구글 번역 외국어 메뉴 폰트 사이즈 조절*/
	#gnb .gnb_1dli font{font-size:15px}
	.gnb_1da{font-weight:bold}
	#gnb_close {display:none}

	/* #gnb .gnb_1dli:first-child{margin-left:0px} */
	/*#gnb .gnb_1dli:hover{*/
	/*-webkit-transition: background-color 2s ease-out;*/
	/*-moz-transition: background-color 0.3s ease-out;*/
	/*-o-transition: background-color 0.3s ease-out;*/
	/*transition: background-color 0.3s ease-out;}*/

	.gnb_1dli .bg{width:10px;height:10px;overflow:hidden;text-indent:-999px;display:none !important;}
	.gnb_1da, .gnb_1da_on {display:block;text-decoration:none; line-height:50px; font-size:20px;text-align:left; font-weight:bold}


	.gnb_2dli{ }
	.gnb_2dul {position:absolute;top:100px;min-width: 75px;padding: 0; left:0;width:100%}

	/* 메뉴에 호버하면 하단메뉴 나타남, line-height 값으로 높이조정 */
	.gnb_2da {display:block; padding:5px 0px; line-height:20px; color:#333; text-align:left;  text-decoration:none; font-size:17px;font-weight:normal}
	a.gnb_2da:hover{-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
	.gnb_1dli_air .gnb_2da {}
	.gnb_1dli_on .gnb_2da {}
	.gnb_2da:focus, .gnb_2da:hover {}


	/* 소메뉴 페이드인: 배경(#hd::after)이 펼쳐진 뒤 글씨가 나타나도록 (2026-09-03) */
	#gnb .gnb_2dul {opacity:0; visibility:hidden; transition: opacity 120ms ease, visibility 0s linear 120ms;}
	.hd_menu_on #gnb .gnb_2dul {opacity:1; visibility:visible; transition: opacity 300ms ease 180ms, visibility 0s linear 0s;}

	.gnb_1dli_over .gnb_2dul {display:block;}
	.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff}
	.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:170%;color:#fff}
	.gnb_wrap .gnb_empty a{color:#474747;text-decoration:underline}
	.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a{color:#474747}

	#gnb .gnb_menu_btn{background:#f7971d;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px}
	#gnb .gnb_close_btn{background:#f7971d;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:-50px;left:50%; margin-left:-550px;}
	#gnb .gnb_mnal{padding:0}

	#gnb_all{display:none;position:absolute;width:100%;z-index:99; min-width:var(--site_width);}
	#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
	#gnb_all .gnb_al_ul{background:#fff;border:1px solid #ddd;padding:20px; width:var(--site_width); margin:0 auto;
		-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		-moz-box-shadow:  0 2px 5px rgba(0,0,0,0.2);
		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}
	#gnb_all .gnb_al_li{background:#fff;float:left;min-width:20%;padding:5px }
	#gnb_all .gnb_al_li .gnb_al_a{font-size:13px;padding:10px;display:block;position:relative;margin-bottom:10px;background: #eff1f9;border-bottom: 1px solid #dee2f1;font-weight: bold;color:#243071}
	#gnb_all .gnb_al_li li {padding-left:10px;line-height:170%}
	#gnb_all .gnb_al_li li i{color:#9ca6cc}
	#gnb_all .gnb_al_li li a{color:#474747}

}

/*Responsive 370, 480, 768, 992, 1160*/
@media all and (max-width:1190px){
	.hd_area{width:100% !important}
	#gnb {display:none;background:#fff;position:fixed;top:0;right:0;z-index:99999;height:100%;overflow-y:auto;width:100%;max-width:420px;border-right: 1px solid #000;box-shadow: 18px 8px 100px #868686;}
	/* 상단 레이아웃 끝 */

	#gnb a {display:block;}
	.gnb_1dli{position:relative;line-height:50px;}
	.gnb_1dli button{position:absolute;top:0;right:0;border:0;width:50px;height:50px;overflow:hidden;background:url("../img/mobile/gnb_bg.png") no-repeat 50% 50%;text-indent:-9999px}
	.gnb_1dli button.btn_gnb_cl{background:url("../img/mobile/gnb_bg2.png") no-repeat 50% 50%}
	.gnb_1da {padding:0px 20px;border-bottom:1px solid #cacaca;font-size:16px}
	.gnb_2dul {display:none;}
	.gnb_2dli{background:#fafafa}
	.gnb_2da {border-bottom:1px dotted #cacaca;background:url("../img/btn_next.gif") no-repeat 21px 22px;padding-left:30px;color:#444;font-size:14px;}
	#gnb_close {display:block;margin:0;height:50px;width:100%;border:0;background:url("../img/mobile/btn_close.png") no-repeat right 50% #222222;background-size:25px;text-indent:-999999999px;overflow:hidden}
	#hd_inside, #hd_inside .logo{display:none}
	#res_hd_inside{display:block}
}



#gnb [class~=gnb_wrap] > ul > li > a > span {
	/*display: block;*/
	margin: 30px auto 0;
	background: #0072bc;
	width: 0px;
	height: 3px;
	border-radius:50px;
	transition: 0.5s all ease;
	-webkit-transition: 0.5s all ease;
	-moz-transition: 0.5s all ease;
	-ms-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;
}

/*#gnb [class~=gnb_wrap] > ul > li[class~=gnb_1dli_on] > a > span {*/
/*	display: block;*/
/*	background: linear-gradient(to right, var(--theme-color), var(--theme-color2));*/
/*	width: 100%;*/
/*}*/










/*dd*/
/* --- 스크롤 시 상단 고정 및 스타일 축소 (추가된 코드) --- */
@media all and (min-width:1199px){
	/* 스크롤 시 헤더 고정 컨테이너 */
	/*
	#hd.hd_scrolled {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		animation: hd_slide_down 0.3s ease-out; /* 부드럽게 내려오는 효과 */
	}
	*/

	/* 스크롤 시 배경 및 그림자 */
	#hd.hd_scrolled #hd_wrapper {
		box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 그림자 효과 */
		border-bottom: 1px solid #eee;
	}

	/* 상단 검색바 및 우측 배너 숨김 (깔끔함을 위해) */
	#hd.hd_scrolled .hd_sch_wr,
	#hd.hd_scrolled #sbn_side {
		display: none !important;
	}

	/* 로고 크기 및 여백 축소 */
	#hd.hd_scrolled #hd_inside .logo {
		margin: 15px auto; /* 30px -> 5px로 축소 */
	}
	#hd.hd_scrolled #hd_inside .logo img {
		max-height: 40px; /* 로고 높이 축소 (기본 60px -> 40px) */
		transition: all 0.3s ease;
	}

	/* 메인 메뉴 위치 조정 */
	#hd.hd_scrolled #gnb {
		margin: 10px auto; /* 35px -> 10px로 축소 */
		right: 0;
	}

	/* 스크롤 상태에서 메뉴에 마우스 올렸을 때 배경 높이 조정 */
	#hd.hd_scrolled.hd_menu_on::after {
		top: 0; /* 배경 위치 보정 */
		height: 240px; /* 전체 높이 조정 (기본보다 조금 작게) */
		border-bottom: 1px solid #ddd;
	}

	/* 스크롤 시 GNB 호버 높이 조정 (JS와 연동) */
	#hd.hd_scrolled #gnb.scrolled_hover {
		height: var(--gnb_open_h, 240px) !important;
	}
}

/* 헤더가 고정될 때 부드럽게 나타나는 애니메이션 */
@keyframes hd_slide_down {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(0); }
}


/* 호버 트랜지션을 부드럽게 (닫힐 때는 소메뉴 글씨가 먼저 사라진 뒤 120ms 지연 후 접힘 - 2026-09-03) */
#gnb {
	transition: height 300ms ease 120ms;
}
#hd.hd_menu_on #gnb {
	transition-delay: 0s;
}

#hd::after {
	transition: height 300ms ease 120ms, border 0s;
}
#hd.hd_menu_on::after {
	transition-delay: 0s;
}

/* responsive_wide_top_menu.css 끝 */