/* Header */
#header {
	cursor: default;
	height: 79px;
	width: 100%;
	background-color: #ffffff;
}

#header.index {background: inherit;}

#header .inner {
	position: relative;
}
.logo_top{display: inline-block; margin:15px 0 0 115px;}
#header .logo {
    display: inline-block;
    width: 94px;
    min-height: 52px;
    margin-right: 0px;
    padding: 0px;
    background-image: url(../images/logo_fc.png?a=3);
    transition: all 0.2s;
    background-repeat: no-repeat;
    background-size: 96px auto;
}
#header .logo:hover {
	opacity:70%;
}
.logo_upep {
	display: inline-block;
	width: 148px;
	height: 32px;
	margin-right: 20px;
	margin-bottom: 10px;
	padding: 0px;
	background-image: url(../images/logo_upep.png);
	transition: all 0.2s;
	background-repeat: no-repeat;
}
.logo_upep:hover {
	opacity:70%;
}

/* user_area */
.user_area{
	float:right;
    margin-top: 20px;
	margin-right:128px;
}

.acc_type.teacher {
  background-color: #63ccc7;
  color: #fff;
  border-radius: 5px;
  padding: 0px 8px;
}

.user_box {
	background-image: url(../images/user.jpg);
	width: 39px;
	height: 39px;
	padding: 0px;
	display: block;
	margin-top: 0px;
	margin-right: 5px;
	border-radius: 20px;
	float: right;
	border: 3px solid rgba(255,255,255,1);
	background-repeat: no-repeat;
	background-position: center center;
}
.user_box:hover {
	opacity:70%;
}

.lang_area{
	float:right;
	margin-top:8px;
	margin-right:10px;
}
.btn_lang{
	padding: 1px 10px;
	color:#C9C9C9;
	font-family:cssFontOpenSansHKBold;
	font-size:16px;
}
.btn_lang.high{
	cursor:default;
	color:#FFFFFF;
	background-color: #00C1DE;
}

div#lbl_user_id{float:right;margin:8px 15px 0 0;display:block;}
a#btn_member_setting{float:right;padding-left:25px;margin:8px 10px 0 0;width:78px;height:18px;background-image:url(../images/setting.png);background-position:0 1px;background-repeat:no-repeat;display:block;}
a#btn_logout{float:right;padding-left:25px;margin:8px 10px 0 0;width:78px;height:18px;background-image:url(../images/logout.png);background-position:0 1px;background-repeat:no-repeat;display:block;}

/* user_area */

@media only screen and (max-width: 986px) {
	.logo_top{margin-left:10px;}
	.user_area{margin-right:10px;}
	.user_box{display:none;}
	div#lbl_user_id{display:none;}
} 
@media only screen and (max-width: 896px) {
	.logo_top{margin-left:10px;}
	.user_area{margin-right:10px;}
	.user_box{display:none;}
	div#lbl_user_id{display:none;}
} 
@media only screen and (max-width: 812px) { 
	.logo_top{margin-left:10px;}
	.user_area{margin-right:10px;}
	.user_box{display:none;}
	div#lbl_user_id{display:none;}
}
@media only screen and (max-width: 768px){ 
	.logo_top{margin-left:10px;}
	.user_area{margin-right:10px;}
	.user_box{display:none;}
	div#lbl_user_id{display:none;}
}

@media screen and (max-width: 667px){
	.logo_top{margin-left:10px;}
	.user_area{margin-right:10px;}
	.user_box{display:none;}
	div#lbl_user_id{display:none;}
	a#btn_member_setting{display:none;}
	a#btn_logout{display:none;}
}
@media screen and (max-width: 430px){
	.logo_top{margin-left:10px;}
	.user_area{margin-right:10px;}
	.user_box{display:none;}
	div#lbl_user_id{display:none;}
	a#btn_member_setting{display:none;}
	a#btn_logout{display:none;}
}
@media screen and (max-width: 390px){
	.logo_top{margin-left:10px;}
	.user_area{margin-right:10px;}
	.user_box{display:none;}
	div#lbl_user_id{display:none;}
	a#btn_member_setting{display:none;}
	a#btn_logout{display:none;}
}
@media screen and (max-width: 375px){
	.logo_top{margin-left:0;}
	.user_area{margin-right:0;}
	.user_box{display:none;}
	div#lbl_user_id{display:none;}
	a#btn_member_setting{display:none;}
	a#btn_logout{display:none;}
}