.personal-details{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 20rem / $pxConvertRem;
	background-color:#fff;
	border-bottom:1px solid #e0e0e0;
	ul{
		width: 95%;
		height: auto;
		overflow: hidden;
		float:right;
		li{
			&:first-of-type{
				height: 100rem / $pxConvertRem;
				line-height:100rem / $pxConvertRem;
			}
			height: 80rem / $pxConvertRem;
			border-bottom: 1px solid #e0e0e0;
				
			.user-avatar {
				width: 100%;
				height: 100%;
			    background-image: image-url("me/index/user-avatar.png");
			    background-size: 100%;
			}

			>span{
				&:first-of-type{
					color: #444;
				}
				width: 42%;
				height: 100%;
				line-height:80rem / $pxConvertRem;
				font-size: 48em / $pxConvertRem;
				margin-right: 8%;
				float: left;
				text-overflow:ellipsis; 
				white-space:nowrap; 
				overflow:hidden;
				.head-portrait{
					width:90rem / $pxConvertRem;
					height: 90rem / $pxConvertRem;
					overflow: hidden;
					float: right;
					border-radius:50%;
					border:1px solid #eee;
				}
				.grade{
					width: 100%;
					height: 100%;
					overflow: hidden;
					display: block;
					position: relative;
					i{
						width:72rem / $pxConvertRem;
						height: 32rem / $pxConvertRem;
						overflow: hidden;
						display: block;
						position: absolute;
						right: 40rem / $pxConvertRem;
						top:50%;
						@include transform(translateY(-50%));
					}
					span{
						color: #b0b0b0;
					}
				}
				.vip-3 {
            		@include rem-sprite($vip, vip-3); 
        		}

        		.vip-2 {
            		@include rem-sprite($vip, vip-2);
        		}

        		.vip-1 {
            		@include rem-sprite($vip, vip-1);
        		}
				&:last-of-type{
					color: #b0b0b0;
					text-align: right;
				}
			}
			&:last-of-type{
				border-bottom:none;
			}	
		} 
	}
}