body{
	width: 100%;
	box-sizing: border-box;
	background-color: #f5f5f5;
}
.header-box{
	position: fixed;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	background: #f50000;
	z-index: 30;
}
.header-title{
	display: block;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: calc(14px * 3.5);
}

.taber-box{
	display: block;
	width: 100%;
	overflow: hidden;
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 30;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
	padding: 0;
}
.taber-btn{
	float: left;
	width: calc(100% / 5);
}
.taber-icon{
	display: block;
	width: calc(14px * 2);
	height: calc(14px * 2);
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}
.taber-icon .icon0,.taber-icon .icon1{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}
.taber-icon .icon0,.taber-btn.active .taber-icon .icon1{
	opacity: 1;
}
.taber-icon .icon1,.taber-btn.active .taber-icon .icon0{
	opacity: 0;
}
.taber-text{
	display: block;
	width: 100%;
	text-align: center;
	line-height: calc(14px * 2);
	font-size: 12px;
	color: #999;
}
.taber-btn.active .taber-text{
	color: #f50000;
}



.user-box{
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
	padding-bottom: 2em;
}
.user-bg-box{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100% - 3em);
	overflow: hidden;
	z-index: 1;
}
.user-bg-box img{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}
.user{
	display: table;
	margin: 0 auto;
	padding: 5em 0 0;
	position: relative;
	z-index: 10;
}
.user-header{
	width: calc(14px * 4);
	height: calc(14px * 4);
	margin: 0 auto 0.5em;
	border-radius: 50%;
	overflow: hidden;
	background-size: cover;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.user-name,.user-id{
	display: block;
	width: 100%;
	overflow: hidden;
	text-align: center;
	line-height: calc(14px * 2);
	color: #fff;
}
.user-data{
	display: block;
	width: calc(100% - 2em);
	margin: 0 auto;
	background-color: #fff;
	border-radius: 0.5em;
	overflow: hidden;
	position: relative;
	z-index: 20;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	box-sizing: border-box;
	padding: 1em;
}
.user-data-item{
	display: block;
	width: calc(100% / 2);
	float: left;
	box-sizing: border-box;
}
.user-data-item+.user-data-item{
	border-left: 1px solid #efefef;
}
.user-data-item-title,.user-data-item-value{
	line-height: calc(14px * 1.5);
	text-align: center;
}
.user-data-item-value{
	color: #999;
}

.funciton-list{
	display: block;
	width: calc(100% - 2em);
	margin: 0 auto 2em;
	background-color: #fff;
	border-radius: 0.5em;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	box-sizing: border-box;
	padding: 0 1em;
}
.function-item{
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	padding: 0 2em 0 2.5em;
}
.function-item+.function-item{
	border-top: 1px solid #efefef;
}
.function-icon,.funciton-more{
	position: absolute;
	left: 0;
	top: 0;
	width: calc(14px * 2);
	height: calc(14px * 4);
}
.function-icon img,.funciton-more img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
}
.function-text{
	width: 100%;
	line-height: calc(14px * 4);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.funciton-more{
	right: 0;
	left: unset;
}
.funciton-more img{
	width: 60%;
}