/* 모바일 메뉴 CSS */

@media all and (max-width: 1023px) {
	[class*='scroll'] .top-wrap  {position:fixed;z-index:200;left:0;top:0;width:100%;background-color:white;}
	.scroll-down .top-wrap {transform: translateY(-200%);}
	.scroll-up .top-wrap {transform: translateY(0);}

	/* Menu Icon Start */
	.spinner-master { display: flex; flex-direction: column; justify-content: space-between; width: 3rem; height: 3rem;	cursor: pointer; margin: 0.3rem 0 0 0; padding: 0.6rem; }
	.spinner-master .bar { width: 100%; height: 4px; background: #016af9; transition: 0.3s; }
	.spinner-master.active .bar:nth-child(1) { transform: rotate(45deg) translate(10px, 10px); }
	.spinner-master.active .bar:nth-child(2) { opacity: 0; }
	.spinner-master.active .bar:nth-child(3) { transform: rotate(-45deg) translate(9px, -9px); }	
	/* Menu Icon End */

	/* Common Menu Start */
	#usm-menu-wrap-id.mobile-active { clear:both; z-index: 100; position: relative; }
	#usm-menu-wrap-id.mobile-active > ul { display: block; width: 100%; }
	#usm-menu-wrap-id.mobile-active .depth2-nme { display: none; }
	#usm-menu-wrap-id.mobile-active .depth2  { display: none; }
	[class*='scroll'] #usm-menu-wrap-id.mobile-active > ul {margin-top:20px;}
	/* Common Menu End */
	
	/* First Menu Start*/
	#usm-menu-wrap-id > ul { display:none; }
	#usm-menu-wrap-id > ul.active { display:block; }
	#usm-menu-wrap-id > ul > li.active > a { border-bottom: 2px solid #008184; font-weight: bold; } 
	#usm-menu-wrap-id > ul > li > a { width: 100%; box-sizing: border-box; font-size: 2.3rem; padding: 1.5rem; display: block; border-bottom: 1px solid #ccc; background-color: #ffffff; }
	#usm-menu-wrap-id > ul > li > a:after { content: '\254B'; display: inline-block; vertical-align: middle; float: right; margin: -0.4rem 0 0 0; }
	#usm-menu-wrap-id > ul > li.active > a:after { content: '\2501'; display: inline-block; vertical-align: middle; float: right; }
	/* First Menu End */
	
	/* Second Menu Start */
	#usm-menu-wrap-id > ul > li > .depth2 > ul { display: block;  background-color: #ffffff;}
	#usm-menu-wrap-id > ul > li > .depth2 > ul.active { display: block; }
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > a { width: calc(100% - 2rem); margin: 0 1rem; padding: 1.5rem; font-size: 2rem; color:#000000; border-bottom: 1px dashed #ccc; box-sizing: border-box; }
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > a.active { font-weight:bold;	}
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > a:has(+ ul) { border: none; }
	#usm-menu-wrap-id > ul > li.active > .depth2 {display:block;}
	/* Second Menu End */

	/* Third Menu Start */
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > ul { width: calc(100% - 2rem); margin: 0 1rem; border: 1px solid #ccc; background-color: #f5f5f5; border-radius: 0.5rem; box-sizing: border-box; padding: 1rem 0; }
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > ul.active { display: block; }
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > ul > li > a { width: 100%; box-sizing: border-box; padding: 0.5rem 2rem; font-size: 1.8rem; color: #000000; }
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > ul > li > a:before { content: '\2022'; display: inline-block; vertical-align: baseline; font-size: 2rem; color: #505050; margin: 0 0.5rem 0 0; }
	/* Third Menu End */

	/* Fourth Menu Start */
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > ul > li > ul { display: block; width: calc(100% - 2rem); margin: 0 1rem 1.5rem 1rem; background-color: #ffffff; box-sizing: border-box; padding: 1rem 0; }
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > ul.active ul, li { display: block; }
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > ul > li > ul > li > a { width: 100%; box-sizing: border-box; padding: 0.5rem 2rem; font-size: 1.6rem; color: #000000; }
	#usm-menu-wrap-id > ul > li > .depth2 > ul > li > ul > li > ul > li > a:before { content: '\2022'; display: inline-block; vertical-align: baseline; font-size: 1.7rem; color: #505050; margin: 0 0.5rem 0 0; }
	/* Fourth Menu End */
}