
/*** header nav : start *********************************/

div.header-nav 						{position:relative;min-height:50px;}

/*div.header-nav 						{z-index:999;}
*/



div.header-nav:before 				{content:"";position:absolute;left:0px;top:0px;width:100%;height:100%;
	background:#ffffff;
}
div.header-nav 						{border-bottom:1px #D8DEEB solid;}


div.header-nav>.main_panel			{overflow:visible;}

	.sc_header_nav_box {position:relative;}
	
	
	
	
	.sc_header_nav_box .sc_menu {}
	.sc_header_nav_box .sc_menu_list {}
	.sc_header_nav_box .sc_menu_list_root {display:inline-flex;flex-wrap:wrap;align-items:center;}

	/*height:50px;*/
	.sc_header_nav_box .sc_menu .sc_menu_item					{display:flex;}

	.sc_header_nav_box .sc_menu .sc_menu_item .sc_menu_name 	{display:block;max-height:100%;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

	/*height:100%;*/
	.sc_header_nav_box .sc_menu .sc_menu_btn 	{display:flex;align-items:center;width:100%;z-index:1;}
	.sc_header_nav_box .sc_menu .sc_menu_btn 	{position:relative;}
	.sc_header_nav_box .sc_menu .sc_menu_btn 	{padding:5px 15px;}
	.sc_header_nav_box .sc_menu .sc_submenu	
							{}
	/*** submenu level-1 position ***/
	.sc_header_nav_box .sc_menu .sc_submenu							{position:absolute;top:100%;}
		/*** submenu level-2 position ***/
		.sc_header_nav_box .sc_menu .sc_submenu .sc_submenu			{position:absolute;top:0%;left:0%;}


	/*** !!! table : width : 100% : and parent = 69.69px (sample), final table width will be 69px, so set width 130% will make better look ***/
	.sc_header_nav_box .sc_menu .sc_submenu>.sc_submenu_container		{display:table;width:130%;}
	.sc_header_nav_box .sc_menu .sc_submenu .sc_menu_list				{display:table-cell;vertical-align:middle;}
	.sc_header_nav_box .sc_menu .sc_submenu .sc_menu_item .sc_menu_btn 	{display:table;}
	.sc_header_nav_box .sc_menu .sc_submenu .sc_menu_item .sc_menu_name {display:table-cell;vertical-align:middle;}
	
	/*** level-2 ***/
	.sc_header_nav_box .sc_menu .sc_submenu .sc_submenu>.sc_submenu_container {width:100%;}

	.sc_header_nav_box .sc_menu .sc_menu_item>.sc_menu_btn				{background:#ffffff;}
	.sc_header_nav_box .sc_menu .sc_menu_item:hover>.sc_menu_btn		{background:#1261FF;color:#ffffff;}



	/*** level - 1+ ***/
	.sc_header_nav_box .sc_menu .sc_menu_item .sc_submenu				{display:none;}
	.sc_header_nav_box .sc_menu .sc_menu_item:hover .sc_submenu			{display:block;}
	/*** level - 2+ ***/
	.sc_header_nav_box .sc_menu .sc_submenu .sc_menu_item .sc_submenu	{display:none;}
	.sc_header_nav_box .sc_menu .sc_submenu .sc_menu_item .sc_submenu	{display:block;}
	/*** level - 3+ ***/
	.sc_header_nav_box .sc_menu .sc_submenu .sc_submenu .sc_menu_item .sc_submenu	{display:none;}


	/*** transition style : start >>>>>>>>>>>>>>>>>>>>>>>>>> ***/
		/*** matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) ***/
		
		/*** level - 1+ submenu transition ***/
		
		.sc_header_nav_box .sc_menu .sc_menu_item .sc_submenu 									{transition:all 0.5s ease;		display:block; }
		.sc_header_nav_box .sc_menu .sc_menu_item .sc_submenu>.sc_submenu_container 			{transition:all 0.5s ease;}
		
		.sc_header_nav_box .sc_menu .sc_menu_item 							{overflow:hidden;}
		.sc_header_nav_box .sc_menu .sc_menu_item:hover 					{overflow:visible;}
		.sc_header_nav_box .sc_menu .sc_menu_item .sc_submenu 				{opacity:0.5;}
		.sc_header_nav_box .sc_menu .sc_menu_item:hover>.sc_submenu			{opacity:1;	}
		
		.sc_header_nav_box .sc_menu .sc_menu_item .sc_submenu 				{
			transform: scale(1) translate(0%, 0%);		}
		.sc_header_nav_box .sc_menu .sc_menu_item:hover>.sc_submenu			{
			transform: scale(1) translate(0%, 0%);		}
			
			/*** level - 2+ submenu transition ***/
			.sc_header_nav_box .sc_menu .sc_submenu .sc_menu_item .sc_submenu 									{transform: none;}
			.sc_header_nav_box .sc_menu .sc_submenu .sc_menu_item .sc_submenu>.sc_submenu_container 			{transform: scale(1) translate(0%, -100%);	margin-left:100%; }
			
			.sc_header_nav_box .sc_menu .sc_submenu .sc_menu_item:hover .sc_submenu>.sc_submenu_container		{
				transform: scale(1) translate(0%, 0%);	margin-left:100%; 
			}

		
	/*** transition style : end <<<<<<<<<<<<<<<<<<<<<<<<<<< ***/



/*** header nav : end *********************************/





/*** hamburger : start **************************************************/
	.sc_menu_hamburger 			{display:block;width: 60px;position: relative;padding:0px;padding-top:5px;}
	.sc_menu_hamburger 			{background:none;border:1px #F3F4F5 solid;}
	.sc_menu_hamburger:hover 	{transition:all 0.5s ease;}
	.sc_menu_hamburger:focus 	{transition:all 0.5s ease;}
	.sc_menu_hamburger>span		{display:block;position:relative;width:60px;height:45px;}
	.sc_menu_hamburger>span		{transform:scale(.6);}

	.sc_menu_hamburger>span:before,
	.sc_menu_hamburger>span:after	{content:'';display:block;}


	.sc_menu_hamburger>span:before,
	.sc_menu_hamburger>span:after,
	.sc_menu_hamburger>span>i {
		
		display: block;
		position: absolute;
		height: 9px;
		width: 100%;
		background: #000000;
		border-radius: 9px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		
		-webkit-transition: 	.2s ease-in-out;
		-moz-transition: 		.2s ease-in-out;
		-o-transition: 			.2s ease-in-out;
		transition: 			.2s ease-in-out;
		
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;

	}

	.sc_menu_hamburger>span:before,
	.sc_menu_hamburger>span:after,
	.sc_menu_hamburger>span>i {background:#ffffff;}

	.sc_menu_hamburger>span:before,
	.sc_menu_hamburger>span:after,
	.sc_menu_hamburger>span>i {height:3px;}


	.sc_menu_hamburger>span>i 		{top: 18px;	}
	.sc_menu_hamburger>span:before 	{top: 0px;	}
	.sc_menu_hamburger>span:after 	{top: 36px;	}


	.sc_menu_hamburger.is-active {}
	.sc_menu_hamburger.is-active>span>i
	{width: 0%;opacity: 0;}


	.sc_menu_hamburger.is-active>span:before	
	{
		top: -3px;left: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
		
	.sc_menu_hamburger.is-active>span:after 	
	{
		top: 39px;left: 8px;
		 -webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
/*** hamburger : end **************************************************/

	/*** hamburger bar color **************************************************/
	.sc_menu_hamburger>span:before,
	.sc_menu_hamburger>span:after,
	.sc_menu_hamburger>span>i {background:#ffffff;}
	
	/*** hamburger bar border color **************************************************/
	.sc_menu_hamburger 			{background:#000000;border:0px;}
	
	/*** hamburger hover over style **************************************************/
	.sc_menu_hamburger:hover 	{background:#000000;}
	
