/*========================
 header
========================*/
#header {position:relative; width:100%;}

#header .inner{background:#FFF;margin:5px 0; overflow:hidden;}
#header .inner h1{margin:0;font-size:12px;}
#header .inner h1 .u_name{float:right; font-size:14px; color:#FFF;margin-right:10px;} 

#header .inner img{height:32px; padding:5px; margin:0 10px;}

#header .inner_l2{
	/*background-color:#000349;*/
	background-color:#201D16;
	padding:5px 0;
	position:relative;
	overflow:hidden;
}

#header .inner_l2 .tp_menu_ul{
	position:relative;
	z-index:3;
}
#header .inner_l2 .tp_menu_ul .tp_menu_a{
	/*color:#000349;*/
	color:#FFF;
	cursor: pointer;
}

#header .inner_l2:hover .tp_menu_ul .tp_menu_a{
	/*color:#11f0f9;*/
	color:#FFF;
	cursor: pointer;
}

#header .inner_l2 .tp_menu_ul .tp_menu_a{
	transition: all 0.8s linear 0s;
}

/*=======================
�@head menu
========================*/
/*-- Mobile Menu --*/
#onMobMenu {
	width:30px; height:30px; line-height:30px;
	margin:15px 5px; padding:0; float:left;
	background:#033; color:#FFF; 
}


#onMobMenu span{
	text-align : center;
	font-size  : 24px;
	line-height: 24px;
	padding    : 0 1px;
}

/*xs sm*/
@media screen and (max-width:992px){
	
	.tp_menu_pc{
		display:none;
	}
	
	#tpMenuMob{
		width     :100%; height:100%; cursor:pointer;
		position  :fixed; top:0; left:0; z-index:101;
		padding   :0;
		opacity   :0.4;
		visibility:hidden;
		transform :translateX(-200px);
		transition: all 0.8s ease 0s;
		-webkit-transition: all 0.8s ease 0s;
	}

	#tpMenuMob .inner{
		width:200px; height:100%;
		background:rgba(50,50,50,0.7);
	}
	
	#tpMenuMob .inner .u_menu_area{
		width:100%;height:100%;
		padding:100px 10px; overflow:auto;
	}
	
	.tp_menu-head{
		padding:10px 10px;
		margin:0;
		font-size:16px;
		color:#000349;
		background:#11f0f9;
	}
	
	.tp_menu_ul {width:100%;}
	.tp_menu_ul .tp_menu_a{text-decoration:none; color:#FFF;}
	.tp_menu_ul li{
		height:39px; line-height:39px; padding:0 8px; 
		border-bottom:1px solid #888;
		opacity:0.8;
	}
	
	.tp_menu_ul li:hover{
		opacity:1;
	}
	
	
	/*--- animation ---*/
	#tpMenuMob.isOpen {
		opacity   :1;
		visibility:visible;
		transform:translateX(0);
	}
}

/*md lg*/
@media screen and (min-width:992px){
	
	.tp_menu_pc {display:block;}
	#tpMenuMob{display:none;}
	
	.tp_menu_ul {margin:0 20px;}
	.tp_menu_ul .tp_menu_a{text-decoration:none; color:#161f30; font-size:14px;}
	.tp_menu_ul .tp_menu_a:hover{color:#acabab; text-decoration:underline;}
	.tp_menu_ul li{
		display:inline-block;
		margin-left:20px;
	}
}



/*========================
 content 
========================*/
#content #content_inner{width:100%; margin:0 auto;}

.login_area   {max-width:400px; margin:0 auto;}
.login_area h2{border-bottom:1px solid #E4E4E4;}


/*-- Top Navidation --*/
#tbInvite,#tbHome{
	visibility:hidden;
	opacity:0;
	width  :0;
	height :0;
	float  :left;
	transform:translateX(200px);
}

#tbInvite.onShow,#tbHome.onShow{
	visibility: visible;
	opacity   :1;
	width     :100%;
	height    :auto;
	float     :left;
	transform :translateX(0);
	transition:opacity 0.8s ease,transform 0.8s ease;
}


/*-- Nabigation --*/
.my_nav   {text-align:center;}
.my_nav a {font-size:10px;}

.my_nav li{padding:10px 0; color:#666; background:#F9F9F9;}
.my_nav li:hover{background:#F4F4F4;}
.my_nav li.bdr{border-left:1px solid #F4F4F4;}
.my_nav li i{font-size:20px;}

.my_nav li.activate{background:#099; color:#FFF;}


/*========================
 footer
========================*/
#footer  {position:absolute; bottom:0; width:100%; text-align:center;padding:5px 0;background:#222;}
#footer p{color:#FFF;}

#footer.on_tp_ar{
	position:absolute; bottom:0; width:100%; padding:0 0 5px 0;text-align:center;background:#222;
}