/* ############## 공통 ############## */
	header { position:sticky; top:0; width:100%; z-index:90; user-select: none; --bg:rgba(0, 0, 0, 0.4); --color:#fff; --scrollbg:#fff; --scrollcolor:#000; }
	body[slide-index='4'] header { --color:#fff; }
	header nav { position:absolute; width:100%; max-height:100px; display:flex; justify-content:center; overflow:hidden; transition: all 0.2s; background:var(--bg); color:var(--color); }
	body[slide-index='4'] header nav { --bg:rgba(0, 0, 0, 0.3); }
	
	header nav > .wrap { width:100%; max-width:1280px; display:flex; }
	header nav > .wrap > div { display:flex; align-items:center; }
	header nav > .wrap > div.logo { max-height:100px; display:flex; align-items:center; transition: all 0.2s; }
	header nav > .wrap > div.info { max-height:100px; display:flex; align-items:center; gap:15px; transition: all 0.2s; }
	header nav > .wrap > div.info button { color:inherit; }

	header nav > .wrap > div.menu { flex:1; display:flex; justify-content:flex-end; padding-right:60px; }
	
	header nav > .wrap > div.menu > ul { height:100%; display:flex; justify-content:center; align-items:center; gap:20px; }
	header nav > .wrap > div.menu > ul > li { position:relative; height:100%; }
	header nav > .wrap > div.menu dl { margin-bottom:20px; }
	header nav > .wrap > div.menu dt { height:100px; display:flex; justify-content:center; align-items:center; font-size:16px; font-weight:Medium; padding:0 10px; transition: all 0.2s; }
	header nav > .wrap > div.menu dt:nth-child(1) { width:130px; }
	
	header nav > .wrap > div.menu dd { height:30px; display:none; justify-content:center; font-size:13px; font-weight:normal; }
	header nav > .wrap > div.menu dt:hover { color:var(--sunbursi-orange); }
	header nav > .wrap > div.menu dd:hover { color:var(--sunbursi-orange); }
	header nav dt a { position:relative; }
	header nav dt a > i.spark { position:absolute; border:1px solid #ff6600; background:#ff6600; border-radius:3px; pointer-events: none; top:50%; left:50%; }
	header nav dt a > i.spark:nth-child(even) { background:transparent; }
	@keyframes spatksanimation { 0% { opacity : 1; transform:translate(0, 0); }  100% { opacity : 0; transform:translate(var(--x), var(--y)) rotate( 360deg ); }}

	header nav .logo > a  { display:flex; align-items:center; }
	header nav .logo > a > img { height:65px; transition:all 0.3s ease; }
	header nav .logo > a .logo-name { margin-left:-10px; font-family: "Nanum Pen Script", cursive; font-size:45px; transition:all 0.3s ease; }
	header nav:not(.nohover):hover { max-height:1000px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background:var(--scrollbg); color:var(--scrollcolor); }
	header nav:not(.nohover):hover > .wrap > div.menu dd { display:flex; }
	header nav:not(.nohover):hover .ic-hamberg > i { background:var(--scrollcolor); }


	header:has(nav.on) { --bg:#fff; --color:#000; }
	header nav.on { max-height:60px; background:var(--scrollbg); color:var(--scrollcolor); box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.1); }
	header nav:not(.nohover).on:hover { max-height:1000px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background:var(--scrollbg); color:var(--scrollcolor); }
	header nav:not(.nohover).on:hover > .wrap > div.menu dd { display:flex; }
	header nav.on .logo img { height:45px; }
	header nav.on .logo > a .logo-name { font-size:25px; }
	header nav.on > .wrap > div.logo { max-height:60px; }
	header nav.on > .wrap > div.info { max-height:60px; }
	header nav.on > .wrap > div.menu dt { height:60px; }

	header nav:not(.nohover).on:hover .logo img { height:65px; }
	header nav:not(.nohover).on:hover .logo > a .logo-name { font-size:40px; }
	header nav:not(.nohover).on:hover > .wrap > div.logo { max-height:100px; }
	header nav:not(.nohover).on:hover > .wrap > div.info { max-height:100px; }
	header nav:not(.nohover).on:hover > .wrap > div.menu dt { height:100px; }

	#sidebarMenu { position:fixed; right:-300px; top:0; width:300px; height:100vh; background:#fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); transition: right 0.3s ease; z-index:90; }
	#sidebarMenu.on { right:0; }
	#sidebarMenu .header { display:flex; align-items:center; justify-content:space-between; }
	#sidebarMenu .header .ic-close { width:20px; height:20px; }
	
	#sidebarMenu nav { position:relative; width:100%; height:100%; padding:30px; }
	#sidebarMenu nav > button { position:absolute; right:20px; top:20px; }
	#sidebarMenu nav ul { margin-top:40px; display:grid; gap:10px; }
	#sidebarMenu nav ul > li { max-height:35px; overflow:hidden; transition: max-height 0.5s; }
	#sidebarMenu nav ul > li.on { max-height:1000px; }
	#sidebarMenu nav ul > li dt { height:35px; }
	#sidebarMenu nav ul > li dd { height:35px; padding-left:40px; }
	
	#sidebarMenu nav ul > li a { position:relative; display:flex; align-items:center; gap:10px; height:100%; }
	#sidebarMenu nav ul > li a i { position:absolute; right:13px; top:50%; width:6px; height:6px; transform:rotate(45deg) translateY(-50%); border:1px solid transparent; border-color: #909090 #909090 transparent transparent; }
	#sidebarMenu nav ul > li dd a { font-size:13px; }

	aside.on { right:0; }

	@media screen  and  (max-width : 1280px) {
		/* ####################### nav #############################*/
		
		header nav { max-height:60px; padding:0 20px; }
		header nav { box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background:var(--scrollbg); color:var(--scrollcolor); }
		header nav > .wrap > div.logo { max-height:60px; }
		header nav > .wrap > div.logo > a > img { height:45px; }
		header nav > .wrap > div.logo > a .logo-name { font-size:20px; }
		header nav .ic-hamberg > i { background:var(--scrollcolor); }
		
		header nav > .wrap > div.info { max-height:60px; }
		header nav > .wrap > div.menu dt { height:60px; }
		header nav > .wrap > div.menu dd { display:flex; }
		/* ####################### nav end #############################*/
	}

	@media screen  and  (max-width : 1025px) {
		header nav > .wrap { justify-content:space-between; }
		header nav > .wrap > div { height:60px; }
		header nav > .wrap > div.menu { display:none; }
	}


	main { position:relative; width:100%; min-height:100vh; }

	.jw-mainscrollbar { position:fixed; top:0; right:0; width:15px; height:calc(100%); z-index:90; cursor:pointer; opacity:0.3; transition: opacity 0.2s; }
	.jw-mainscrollbar .scrollbar { position:absolute; background:#adadad; width:6px; border-radius:4px; top:5px; left:50%; transform:translateX(-50%); cursor: grab; user-select: none;}
	.jw-mainscrollbar .scrollbar:active { cursor: grabbing; }
	.jw-mainscrollbar:hover { opacity:1; }
	.jw-mainscrollbar.on { opacity:1; }

	footer { position:relative; padding-bottom:60px; display:flex; justify-content:center; background:#F4F4F4; }
	footer .container { width:100%; max-width:1280px; }
	footer .group1 { height:100px; display:flex; justify-content:space-between; }
	footer .footlogo { display:flex; align-items:center; gap:10px; filter: grayscale(100%); }
	footer .footlogo > img { height:40px;  }
	footer .footlogo .logo-name { margin-left:-20px; font-family: "Nanum Pen Script", cursive; font-size:25px; }
	footer #terms { display:flex; align-items:center; gap:20px; }
	footer #terms a { font-size:16px; }
	footer .group2 { display:flex; justify-content:space-between; }
	footer .group2 .group-consult { display:flex; align-items:center; gap:20px; }
	footer .group2 .group-consult i { width:100px; height:100px; border-radius:50%; background:#EEEEEE; font-size:16px; }
	footer .group2 .group-consult div > p:nth-child(1) { font-size:24px; }

	@media screen  and  (max-width : 1280px) {
		footer .container { padding:0 20px; }
	}

	@media screen  and  (max-width : 900px) {
		footer .group1 { height:auto; flex-direction:column; }
		footer .group2 { margin-top:20px; height:auto; flex-direction:column; }
		
		footer .footlogo { margin-top:20px; }
		footer #terms { width:100%; margin-top:20px; flex-wrap:wrap; }
	}

/* ############## 공통 end ############## */