@charset "UTF-8";

/* [유지] 기존 상단 tnb 스타일 및 헤더 스타일 */
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#tnb {background:#faa61a;height:35px;color:#fff;}
#tnb h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#tnb ul {margin:0 auto;zoom:1; text-align:right; max-width:var(--site_width);}
#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}
.gnb_1dli .bg{display:inline-block;width:10px;height:10px;overflow:hidden;text-indent:-999px;display:none;}

/* PC 버전 (1200px 이상) */
@media all and (min-width:1199px){
	/* 모바일 요소 숨김 */
	#gnb_open, #user_menu, #user_btn, .btn_gnb_op, #res_hd_inside {display:none}

	/* -------------------------------------------
	   1. 배경 애니메이션 (버벅임 방지 최적화)
	------------------------------------------- */
	#hd {
		position: relative;
		z-index: 10000;
		background: #fff;
		box-shadow: 0 0 10px rgba(0,0,0,0.05);
	}

	#hd:after {
		content:'';
		position:absolute;
		width:100%;
		background:#fff;
		z-index:999;
		left:0;
		top: 100%;
		height: 0;

		/* 부드러운 가속도 설정 (cubic-bezier) */
		transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		/* 렌더링 최적화 */
		will-change: height;
	}

	/* 메뉴 활성화 시 배경 내려옴 */
	.hd_menu_on::after {
		border-top:1px solid #eee;
		border-bottom:1px solid #ddd;
		/* JS에서 미리 계산해둔 높이값 적용 */
		height: var(--menu-height, 300px) !important;
		box-shadow: 0 10px 15px rgba(0,0,0,0.1);
	}

	/* -------------------------------------------
	   2. 레이아웃
	------------------------------------------- */
	#hd_wrap {width:100%; text-align:center; background:#fff;}
	#hd_wrapper {position:relative; margin:0 auto; width:100%; background:#fff}

	#hd_inside {
		width:100%;
		max-width:var(--site_width);
		margin: 0 auto;
		position:relative;
		height: 105px;
	}

	#hd_inside .logo {
		float:left;
		height: 105px;
		display:flex;
		align-items:center;
		padding:15px 0;
	}
	.logo img {max-width:440px; max-height:73px}

	/* -------------------------------------------
	   3. GNB 메뉴 (배경과 속도 동기화)
	------------------------------------------- */
	#gnb {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1000;
		height: 105px;
		overflow: hidden; /* 글자 넘침 숨김 */
		background: transparent;
		padding:15px 0;

		/* 배경(#hd:after)과 완전히 똑같은 속도/가속도 적용 */
		transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	/* 활성화 시 GNB 높이 증가 */
	#hd.hd_menu_on #gnb {
		height: calc(105px + var(--menu-height, 300px)) !important;
	}

	#gnb ul { list-style: none; padding: 0; margin: 0; }
	#gnb_1dul { display: flex; height: 73px;  gap: 5vw;}

	.gnb_1dli {
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0px;
	}

	.gnb_1da, .gnb_1da_on  {
		font-size:clamp(1.1rem, 1.5vw, 1.3rem);
		font-weight: bold;
		text-decoration: none;
		display: block;
		line-height: 73px;
	}
	.gnb_1da:hover, .gnb_1da.on { color: var(--theme-color2) !important;; }


	/* -------------------------------------------
	   ★ 핵심: 글자 나타나는 타이밍 조절
	------------------------------------------- */
	.gnb_2dul {
		display: block;
		position: absolute;
		top: 105px;
		left: 0;
		width: 100%;
		text-align: center;
		padding-top: 20px;

		/* 평소 상태: 투명하고 안보임 */
		opacity: 0;
		visibility: hidden;

		/* 사라질 때는 0.2초만에 휙 사라짐 (딜레이 없음) */
		transition: opacity 0.2s ease-out;
	}

	/* 메뉴 활성화 상태 */
	#hd.hd_menu_on .gnb_2dul {
		opacity: 1;
		visibility: visible;

		/* 나타날 때 설정: */
		/* 1. 0.15초 기다림 (배경이 절반쯤 내려올 때까지 대기) */
		/* 2. 그 후 0.3초 동안 천천히 나타나기 */
		transition: opacity 0.3s ease-in;
		transition-delay: 0.15s;
	}

	.gnb_2dli {display: block; padding: 5px 0; width:100%; text-align:left;}
	.gnb_2da {font-size: 1.0rem; color: #666; text-decoration: none; transition: color 0.2s; width:100%; display:block; text-align:left; }
	.gnb_2da:hover { color: #0072bc; font-weight: bold; }

	#gnb [class~=gnb_wrap] > ul > li > a > span {
		display: block;
		margin: 15px 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;
		position: absolute;
		bottom: -19px;
	}

	#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%;
	}
}

/* 모바일용 (변경 없음) */
@media all and (max-width:1190px){
	#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;}
	#hd_inside, #hd_inside .logo { display:none; }
	#res_hd_inside { display:block; }

	#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}
}