@charset "utf-8";

/*--------------------------------------------------- Çص弼Æà ----------------------------------------------------------------------------*/
.header_wrap { 
position:sticky; right:0; top:0; width:100%; z-index:9000; transition:0.4s; background: #fff; font-size: min(4vw,16px);
}

#header .containerV1 { display:flex; justify-content:space-between; align-items:center; }

.logo { font-size: 1em; }
.logo a { display: block; }


/* menu */
/*---------------------------------------- outer ---------------------------------------------*/
#h_menu .outer { display:flex; justify-content:flex-end;  }
#h_menu .outer > li { position:relative; } 
#h_menu .outer > li > a {
display:block; font-size:inherit; text-align:center; transition:0.4s; font-weight: 500;
height:5.5625em; line-height:5.5625em; color: #000; padding: 0 2em; position: relative;
}
#h_menu .outer > li > a:after {
content: ''; position: absolute; left: 50%; top: 50%; transform:translate(-50%,calc(-50% + 0.5em )); width: 0; height: 0.8em; background:rgba(163,29,64,0.05); opacity: 0;
transition:0.4s;
}
/*---------------------------------------- //outer ---------------------------------------------*/


/*---------------------------------------- inner ---------------------------------------------*/
#h_menu .outer > li > .inner {
position:absolute; right:0; z-index:1; width:100%; background:rgba( 255,255,255,0.8); padding:0.625em 0; visibility:hidden; opacity: 0; transition:0.2s;
}

#h_menu .outer > li > .inner > li > a  { display:block; transition:all 0.4s; padding:1em 0.625em; font-size:0.9em; text-align: center; line-height: 1.2; }
/*---------------------------------------- //inner ---------------------------------------------*/



/* hover */
#h_menu .outer > li:hover > a { color:var(--main-color); transform:translateY(-2px); }
#h_menu .outer > li:hover > a:after { opacity: 1; width: 80%; }
#h_menu .outer:hover > li > .inner { opacity: 1; visibility:visible; transition:0.5s; }
#h_menu .outer:hover > li:nth-child(1) > .inner { transition-delay:0s; }
#h_menu .outer:hover > li:nth-child(2) > .inner { transition-delay:0.1s; }
#h_menu .outer:hover > li:nth-child(3) > .inner { transition-delay:0.2s; }
#h_menu .outer:hover > li:nth-child(4) > .inner { transition-delay:0.3s; }
#h_menu .outer:hover > li:nth-child(5) > .inner { transition-delay:0.4s; }
#h_menu .outer > li > .inner > li > a:hover { color:var(--main-color); background:rgba(163,29,64,.05); } 


/* ½ºÅ©·Ñ ÇßÀ» ¶§ Çصå È¿°ú */
.header_wrap.scroll { box-shadow:0 0 10px rgba(0,0,0,0.2); }


/* ÆäÀÌÁö ¹× °Ô½ÃÆÇ À̵¿Çϸé ÇØ´ç ¸Þ´º ½ºÅ¸ÀÏ */
#h_menu .outer > li > a.on { color:var(--main-color); font-weight: bold; transform:translateY(-2px); } 
#h_menu .outer > li > a.on:after { opacity: 1; width: 80%; }









@media (max-width:991px) {
	.header_wrap { padding: 1em 0; }

	/* ¸ð¹ÙÀÏ ¿­±â ¹öÆ° */
	.header_wrap .open_btn { font-size:25px; cursor:pointer; color:#000;}


	/* menu */
	.menu_box { 
	background-color:var(--main-color); width: 20em; height: 100%; 
	position: fixed; right:0; top: 0; z-index:9999; margin-right:-20em; transition:margin-right 0.3s;
	}
	.menu_box_bg { position: absolute; right: 0; top: 0; z-index:8000; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); }
	#h_menu {
	width: 20em; height: 100%; overflow-x: hidden; overflow-y: auto; position: absolute;  top:0; 
	}

	/* ¸ð¹ÙÀϴݱâ¹öÆ° */
	.close_btn { width:50px; height:50px; margin-right:auto; margin-left:0; cursor:pointer; }
	.close_btn > i { display:block; color:#fff; text-align:center; line-height:50px; font-size:30px; }
	
	

	/*---------------------------------------- outer ---------------------------------------------*/
	#h_menu .outer { flex-wrap:wrap; padding:30px 0; border-top:1px solid rgba(255,255,255,.1); }
	#h_menu .outer > li { width:100%; margin-right: 0; padding: 0.2em 0.5em; }
	#h_menu .outer > li > a { 
	padding:12px 20px; font-weight:500; color:rgba(255,255,255,0.7); text-align:left; height:auto; line-height:1; border-bottom:1px solid rgba(255,255,255,.4);
	font-size: 16px; pointer-events:none;
	}
	#h_menu .outer > li > a:after { display: none; }
	/*---------------------------------------- //outer ---------------------------------------------*/

	/*---------------------------------------- inner ---------------------------------------------*/
	#h_menu .outer > li > .inner { 
	position:static; width:100%; padding:0; margin-left:30px; border-left:1px solid rgba(255,255,255,0.4); background:none; border-top:none; border-bottom: none;
	height: auto !important; display: none; opacity: 1; visibility:visible;
	}
	#h_menu .outer > li > .inner > li:last-child > a { border-bottom:none; }
	#h_menu .outer > li > .inner > li > a { padding:10px 0 10px 15px; font-size: 14px; position:relative; text-align:left; color:#fff; }
	#h_menu .outer > li > .inner > li > a:before { 
	content:''; position:absolute; left:-3px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:#fff; 
	}
	/*---------------------------------------- //inner ---------------------------------------------*/

	/* hover */
	#h_menu .outer > li:hover > a { color:#fff; transform:translateY(0); }
	#h_menu .outer:hover > li > .inner { display:none; } /* ¸ð¹ÙÀÏÀ϶§ inner ³ª¿À°Ô ÇÏ´Â ÈĹö È¿°ú X */
	#h_menu .outer > li > .inner > li > a:hover { color:#fff; background:none; } 


	/* ¸ð¹ÙÀϸ޴º¹Ú½º º¸ÀÌ°Ô Çϴ Ŭ·¡½º */
	.menu_box.inactive { margin-right:0; } 
	.menu_box.inactive .menu_box_bg { display: block !important; } 

	/* ¸ð¹ÙÀÏ¿¡¼­ outer li Ŭ¸¯ÇßÀ»¶§ inner ³ª¿À´Â È¿°ú */
	#h_menu .outer > li.on > a { border-bottom:1px solid transparent; transform:translateY(0); background: #fff; color: #000; border-radius:0.2em;  }
	#h_menu .outer > li.on .inner { display:block; }

	/* ÆäÀÌÁö ¹× °Ô½ÃÆÇ À̵¿Çϸé ÇØ´ç ¸Þ´º ½ºÅ¸ÀÏ */
	#h_menu .outer > li > a.on { color:#fff; background: #fff; color: #000; border-radius:0.2em;  } 
}
/*--------------------------------------------------- Çص弼Æà ³¡ ----------------------------------------------------------------------------*/





/* À妽º */

/* section */
#index .section { font-size: min(17.14vw,130px); overflow-x: hidden; }


/* section1 */
#index .section1 { padding: 0.76em 0 0.61em; }

/* section2 */
#index .section2 { padding: 1em 0 0.69em; }

/* section3 */
#index .section3 { padding: 0.53em 0; }