@charset "utf-8";

/* 로고와 대메뉴 */
#header																			{ position: relative;height:360px;--sizenav:76px; background:#e7f3ff url("/resource/estimate/images/top_left.png?ver=250730") no-repeat left bottom  / auto 325px; box-sizing: border-box; overflow: hidden;}
#header:after																	{position:absolute; content: ''; height: 289px; width: 537px; bottom: 0; right: 0; z-index:1; display: block; background:url("/resource/estimate/images/top_right.png?ver=250730") no-repeat bottom right  / 100%;}

/*gnb*/
#gnavi																				{ position:fixed;z-index:99999;width:1480px;background: var(--color-white);border-radius: 5em;top: 1.5em;left:0;right: 0;margin: 0 auto;box-shadow: 10px 10px 10px rgba(2,76,145,.1);transition:var(--trans-ani);}
#header.active #gnavi                                                           {width:100%;border-radius:0;top:0;}
#gnavi .h_logo																	{width:310px;height:var(--sizenav);}
#gnavi .h_logo a																{width:100%;height:100%;display:block;background:url("/resource/estimate/images/img_logo_estimate.png") no-repeat center / 100% ;}
#gnavi .inner																	{display: flex;width:94%;max-width:1480px;margin:0 auto;height: var(--sizenav);justify-content: space-between;transition:var(--trans-ani);}
#header.active #gnavi .inner													{width:100%;}
#header #gnavibox																{display:flex;gap:40px;}
#gnavi .gnavi																	{ position:relative;display: inline-block;position:relative;}
#gnavi .gnavi > a																{position:relative; display:block; text-align:center; font-size:18px; font-weight:400; height:var(--sizenav); padding: 0 28px;line-height: var(--sizenav); color:var(--color-base);}
#gnavi .gnavi > a::before													{ position:absolute; display:block; content:''; width:0%; height:3px; background:var(--color-point); bottom:0px; left:50%; transform:translate(-50%, 0%); transition: width 0.2s ease-in-out;}
#gnavi .gnavi > a:hover::before												{ width:100%;}
#gnavi .gnavi > a:hover														{ color:var(--color-point);}
#gnavi .gnavi > a[target="_blank"]::after	                            {content:"";display:inline-block;vertical-align:middle;width: 13px;height: 12px;margin-top: -2.5px;margin-left:5px;transition:var(--trans-ani);background: url(/resource/estimate/images/icon_blank.svg) no-repeat 50% 50% / auto 12px;}
#gnavi .btns																	{display: flex;gap: .5em;align-items: center;}
#gnavi .btns > a																{display: inline-block;line-height: 1;border-radius: 5px;font-size: 15px;border-radius: 1em;border: 1px solid var(--color-point);background: var(--color-white);color: var(--color-point); padding: .5em 1em;}
#gnavi .btns > a[target="_blank"]::after	                            { content:""; display:inline-block; vertical-align:middle; width:11px; height:10px; filter:invert(15%) sepia(90%) saturate(2307%) hue-rotate(195deg) brightness(103%) contrast(98%); margin-top:-1px;margin-left:5px;transition:var(--trans-ani); background:url(/resource/estimate/images/icon_blank.svg) no-repeat 50% 50% / auto 10px; }
#gnavi .btns > a.btn_login														{background:var(--color-point);color:var(--color-white); }
#gnavi .btns > .sitemap															{display:none;}


/*비주얼*/
#header .ly_center																{height:calc(100% - var(--sizenav) - 1.5em);margin-top: calc(var(--sizenav) + 1.5em);}
#header .text																		{position:relative;flex-flow: column; display: flex; height: 100%; align-items: center;justify-content: center;z-index:5;}
#header .text .logo																{margin-bottom:30px;width:128px;}
#header .text .logo img														{width:100%;}
#header .text .title															{font-size:42px;font-family:'PAPERLOGY',sans-serif;font-weight:500;color:#2e2e2e;letter-spacing:-0.025em;line-height:1;}
#header .text .title strong													{font-weight:700;color:var(--color-point);}

@media all and (max-width: 1600px) {
	#header																	{background-size:auto 258px;}
	#header:after															{width: 460px;height: 248px;}
}

@media all and (max-width: 1500px) {
	#gnavi																			{width:96%;}
	#gnavi .inner																{max-width: inherit;}
  	#header.active #gnavi .inner													{width:90%;}
}

@media all and (max-width: 1400px) {
	#header																	{height:340px;}
	#header:after															{right: -2%;}
}



@media all and (max-width: 1280px) {
	#header																		{--sizenav:70px;background-position: left -8% bottom;}
	#header:after																{right: -12.5%;}
	
	/*gnb*/
	#gnavi																			{top:1em;}
	#gnavi .h_logo																{width:274px;}
  	#header #gnavibox															{gap:30px;}
	#gnavi .gnavi > a														{font-size:17px;padding:0 20px;}

	/*비주얼*/
	#header .ly_center														 {height: calc(100% - var(--sizenav) - 1em);margin-top: calc(var(--sizenav) + 1em);}
	#header .text .logo															{margin-bottom:20px;width:120px;}
	#header .text .title														{font-size:38px;}
}

@media all and (max-width: 1080px) {
	#header 																		{background-size: auto 240px;background-position: left -12% bottom;}
	#header:after 																{width: 440px;height: 186px;right:-14.5%;}
}

@media all and (max-width: 1023px) {
	#header																			{--sizenav:60px;height:320px;background-position: left -15% bottom;}
 	#header:after																	{width: 420px;height: 178px;}

	/*gnb*/
	#gnavi .gnb																		{display:none;}
  	#gnavi .btns > .sitemap															{ position:relative; display:block;  }
	#gnavi .btns > .sitemap .sitemap_open									{display:block;  width:20px; height:20px; background:url(/resource/camping/images/common/icon_sitemap.svg) no-repeat 100% 50% / 18px 19px;}
	
	/*모바일 메뉴*/
	#gnavi .sitemap_wrap														{ position:fixed; width:100%; height:100vh; right:0; top:0; opacity:0; visibility:hidden; z-index:-1; 
																			transition:all 0.3s  0.3s; overflow:hidden; background: rgba(0, 0, 0, .8);backdrop-filter: blur(10px);}
	#gnavi .sitemap_wrap .sitemap_box										{position: absolute;display: inherit;width: 280px;height: 100%;right: 0;top: 0;overflow-y: auto;background:var(--color-white);border-radius: 0;transform: inherit;padding: 0;}
	#gnavi .sitemap_wrap .sitemap_box .mob_gnb_control						{ display:none; background:var(--color-point); height:60px; color:var(--color-white);padding:0 7% }
	#gnavi .sitemap_wrap .sitemap_box .mob_gnb_control a.city			{display:none;}
	#gnavi .sitemap_wrap .sitemap_box .gnb_list								{ position:relative; top:inherit; left:inherit; height:auto; overflow:hidden; margin-top:60px; border-top:1px solid rgba(0,0,0,0.1); display:block ; }
	#gnavi .sitemap_wrap .sitemap_box .gnb_list>li.gnavi 						{ width:100%; position:relative; transform:scaleX(1); transform-origin:right top; transition-property:transform;border-bottom:1px solid rgba(0,0,0,0.1); }
	#gnavi .sitemap_wrap .sitemap_box .gnb_list>li.gnavi >a					{ font-size:1rem;  font-weight:700;height:48px; line-height:48px; padding:0 7%;color:var(--color-base); transition:all .2s ease;height:auto;text-align:left;}
	#gnavi .sitemap_wrap .sitemap_box .gnb_list>li.gnavi >a::before		{display:none;}
 	 #gnavi .sitemap_wrap .sitemap_box .gnb_list>li.gnavi >a[target='_blank']::after{ content:""; display:inline-block; opacity:.8; transition:all .4s; margin-left:4px; vertical-align:middle; width:14px; height:14px; 
																						background:url(/resource/estimate/images/icon_blank.svg) no-repeat 50% 50% / auto 14px; margin-top:-3px; }
	#gnavi .sitemap_wrap.open													{ opacity:1.0; visibility:visible; z-index:99999; transition:all 0.4s 0s; }
	#gnavi .sitemap_wrap.open .sitemap_box .gnb_list>li:after 					{ width:0; }
	
	#gnavi .sitemap_wrap .sitemap_close										{ position:absolute; width:60px; height:60px; right:0; top:0; opacity:0; background:var(--color-point); transition:all .2s ease; }
	#gnavi .sitemap_wrap .sitemap_close::before								{ position:absolute; width:2px; height:30px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); content:''; background:var(--color-white); }
	#gnavi .sitemap_wrap .sitemap_close::after									{ position:absolute; width:2px; height:30px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-45deg); content:''; background:var(--color-white);}
	#gnavi .sitemap_wrap.open .sitemap_close									{ opacity:1;  }

	/*비주얼*/
	#header .text .logo																	{width:110px;margin-bottom:15px;}
	#header .text .title																{font-size:35px;}
}

@media all and (max-width: 868px) {
	#header																			{height:280px;background-size: auto 210px;background-position: left -30% bottom;}
	#header:after																	{width: 350px;height: 148px;right:-20%;}
}

@media all and (max-width: 767px) {
	#header																			{height:240px;background:#e7f3ff url("/resource/estimate/images/bg_top_m.png") no-repeat center bottom  / 100%;}
	#header:after																	{display:none;}
  	
	/*gnb*/
	#gnavi .h_logo																	{width:233px;}
	#gnavi .btns																	{gap:.25em;}
  	#gnavi .btns > a																{font-size:14px;padding:.375em .75em;}
	#gnavi .gnavi > a																{font-size:18px; padding: 0 10px; margin: 0 0px; ;}
  

	/*비주얼*/
	#header .text .title															{font-size:30px;}
	#header .text .logo 														{width: 100px;margin-bottom: 10px;}
}

@media all and (max-width: 480px) {
	#header																			{height:200px;}
	
	/*gnb*/
	#gnavi																			{width:100%;border-radius:0;top:0;}
	#gnavi .btns																	{gap:.25em;}
	#gnavi .inner .btns > a.city											{display:none;}

	/*모바일 메뉴*/
	#gnavi .sitemap_wrap .sitemap_box .mob_gnb_control	{ display:flex; align-items:center; }
	#gnavi .sitemap_wrap .sitemap_box .mob_gnb_control a.city{display: inline-block;line-height:60px;font-size: 15px;color:var(--color-white);}
    #gnavi .sitemap_wrap .sitemap_box .mob_gnb_control a[target="_blank"]::after{ content:""; display:inline-block; vertical-align:middle; width:11px; height:10px; filter:invert(1); margin-top:-1px;margin-left:5px;transition:var(--trans-ani); background:url(/resource/estimate/images/icon_blank.svg) no-repeat 50% 50% / auto 10px; }
	#gnavi .sitemap_wrap .sitemap_box .gnb_list							{margin-top:0;}
	#gnavi .gnavi > a															{font-size:16px; padding: 0 5px; margin: 0 0px;}

	/*비주얼*/
	#header .ly_center															{height:calc(100% - var(--sizenav));margin-top:var(--sizenav);}
	#header .text .title															{font-size:24px;}
	#header .text .logo 														{width: 88px;}
}

@media all and (max-width: 368px) {
	#header																				{height:180px;}
	
	/*gnb*/
  	#gnavi .h_logo																	{width: calc(100% - 87px);max-width: 160px;}
 	#gnavi .h_logo a																{background:url("/resource/estimate/images/img_logo_estimate_m.png") no-repeat center / 100% ;}
  	#gnavi .btns																	{min-width:87px}
  	#gnavi .btns > a 																{padding: .375em .5em;}

	/*비주얼*/
	#header .text .title																{font-size:20px;}
	#header .text .logo 															{width: 76px;}
}