/*menu_002 start*/

.header {
	position: fixed;
	z-index: 5;
	width: 100%;
	top: 2rem;
}

	.logo { position: absolute; left: 2rem;}
	.logo img {	max-width: 40px;}

	#body-menu { position: absolute; background-color: #fff; border: 1px solid #4c6c77; top: 60px; left: 2rem; width: 40px; height: 40px; z-index: 5; cursor: pointer;}
	#body-menu .list { padding: .56rem 0; width: 1.5em; position: absolute; left: .45rem;}
		#body-menu .list li { position: relative; height: .15em; margin-bottom: .4rem; background: #4c6c77;}
	
	.index-logo { display: none; position: absolute; right: 0; padding-right: 2rem; padding-bottom: .5rem; border-bottom: 1px solid #4c6c77;}
		.index-logo.max { display: block;  top: 2rem;}
		
	.top-nav{ display: none; position: absolute; top: 60px; left: 72px;}
		#navbar { min-width: 420px; background-color: rgba(0,0,0,.95); line-height: 1.4; padding: 1.5rem 2rem;}
		.top-nav .list-row { display: inline-block; vertical-align: top;}
		.top-nav .list-row.rows { border: none; margin-left: 2rem;}
			.top-nav .list-row> li{ margin-bottom: 2rem;}
			.top-nav .list-row> li:last-child { margin: 0;}
			.top-nav .list-row> li> a{ display: block; color: #fff; margin-bottom: .5rem; border-bottom: 1px solid #c2c3c4;}
			.top-nav ul li a:hover, .top-nav ul li a.active, .top-nav ul li a.current{
				color: #f1d388;
			}
			
			.top-nav ol { min-height: 90px;}
			.top-nav ol a { font-size: .9em; color: #c2c3c4;}
			
			.top-nav .subname { font-size: .7em; color: #fff; padding-left: .5rem; transform-origin: left; transform: scale(.8,1);}
		
		.nav-con { color: #4c6c77; margin-bottom: 2rem; font-weight: bold;}
			.nav-con span { font-size: .8rem; color: #fff; padding-left: .5rem; transform-origin: left; transform: scale(.8,1);}
			
		.nav-link { margin-top: 3rem;}
			.nav-link a { display: inline-block; margin-right: .5rem;}
	

.dropdown-toggle { position: relative; }
	.dropdown-menu { position: absolute; display: none; background: #171A21; padding: 5px 0; margin: 2px 0 0; font-size: 14px; border-radius: 0 0  4px 4px;
	  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
			  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	}
	.dropdown-menu .subspan{ display: none; color: #fff; padding-right: 5px;}
		.dropdown-menu > li { float: none !important;}
		.dropdown-menu > li > a { padding: 3px 15px; line-height: 2; color: #fff;}
		.dropdown-menu > li > a:hover,
		.dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background: none;}
		

/*-- responsive-start-here --*/
@media (max-width: 1023px){
	.header { top: 0; padding: 1rem; background-color: #fff;}
		.logo { position: relative; left: 1rem; display: inline-block;}
		#body-menu { left: unset; right: 2rem; top: 1rem;}
		.index-logo { display: block; padding: 0; border: none; top: 1.8rem; left: 5.5rem; right: unset; }
			.index-logo.max { display: none;}
		
		.top-nav { top: unset; margin-top: 1rem; left: 0; width: 100%;}
			.top-nav ol { min-height: 180px;}
			.top-nav .list-row> li> a { font-size: 1.4rem;}
			.top-nav ol a { font-size: 1.3rem; line-height: 2; color: #c2c3c4;}
		
		.nav-con { display: none;}
		
		
	body.sm { overflow: hidden;}
	.header.sm { height: 100%; overflow-y: auto;}
}
@media (max-width: 768px){
	.logo { left: 0;}
		.index-logo { left: 4.5rem;} 
	#body-menu { right: 1rem;}
}
@media (max-width: 730px){
	.index-logo { left: 4rem; top: 1.5rem; }
		.logo img { max-width: 30px;}
	#body-menu  { width: 30px; height: 30px;}
		#body-menu .list { left: 0.15rem; padding: .25rem 0;}
		
		.top-nav .list-row { display: block; border: none;}
		.top-nav .list-row.rows { margin-left: 0; margin-top: 2rem;}
			
		.top-nav ol { min-height: auto;}
		
	#navbar { min-width: auto;}

}
/*menu_002 end*/