img{
	width: 100%;
	height: 100%;
}
#app{
	position: relative;
	font-size: 0;
	line-height: 1;
	box-sizing: border-box;
	overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
}
.page-bg {
	position: absolute;
	left: 0;
	top: 0;
	min-width: 100vw;
	min-height: 100%;
	background-image:url('../image/findpoint_left_bg.png');
	background-repeat:repeat;
	background-size: cover;
	z-index: -1;
}
.content-wrapper {
	display: -webkit-box;
	display:-ms-flexbox;
 	display:flex;
}
.content-left,
.content-right {
	display: inline-block;
}
.content-right {
	-webkit-box-flex: 1;
	-ms-flex: 1;
 	flex: 1;
 	/*overflow: hidden;*/
}
.content-left {
	-webkit-box-flex: 0 0 calc(100vw - 2.8rem);
	-ms-flex: 0 0 calc(100vw - 2.8rem);
 	flex: 0 0 calc(100vw - 2.8rem);
	width: calc(100vw - 2.8rem);
}

.user-info {
	position: absolute;
	top: 0.2rem;
	left: 0.266667rem;
}
.user-info .user-avatar {
	width: 1.333333rem;
	height: 1.333333rem;
	border-radius: 50%;
	border: 4px solid #fff;;
	background: rgba(255,255,255,0.6);
	/*margin-bottom: 0.2rem;*/
}
.user-info .user-name {
	font-size: 0.306667rem;
    color: #a74d99;
    text-align: center;
    /*height: 1.333333rem;*/
    display: inline-block;
    vertical-align: top;
    /*line-height: 1.333333rem;*/
    padding-left:0.266667rem;
    text-align: left;
    margin-top: 0.333333rem;
}
.user-info .user-name a{
	padding:0.08rem 0.16rem ;
	background:rgba(255,255,255,0.6);
	border-radius: 0.133333rem;
}
.person-image {
	
}
.person-image .person-bg {
	width: 100%;
	height: 100%;
}

.image-box {
	position: relative;
	width: 8.253333rem;
	height: 14.16rem;
	position: absolute;
	top: 1.833333rem;
	left: 50%;
	margin-left: -4.12rem;
}
.person-cat {
	position: absolute;
	left: 0.333333rem;
    bottom: 0.733333rem;
	width: 2.906667rem;
	height: 2.533333rem;
	z-index: 2;
}

.part-tab {
	position: absolute;
	top: 50%;
	margin-top:-6.6rem;
	left: 0.555555rem;	
}
.part-box {
	position: relative;
	width: 1.653333rem;
	height: 1.64rem;
	border-radius: 0.053333rem;
	text-align: center;
	margin-bottom: 0.8rem;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}

.part-bg {
	position: absolute;
	width: 1.466667rem;
	height: 1.466667rem;
	/*background-color: rgba(255, 255, 255, 0.85);*/
	/*border-radius: 50%;*/
	background-image:url('../image/part-bg.png');
	background-size: 100% 100%;
}
/*.part-box.active {
	position: relative;
	border: 1px solid #a74d99;
	border-top-left-radius: 0.053333rem;
	border-bottom-left-radius: 0.053333rem;
}*/

/*.part-box.active:before {
	position: absolute;
	content: "";
	top: -1px;
	left: 0;
	height: 0;
	width: 1.466667rem;
	border-top : 1px solid #a74d99;
}
.part-box.active:after {
	position: absolute;
	content: "";
	bottom: -1px;
	left: 0;
	height: 0;
	width: 1.466667rem;
	border-bottom: 1px solid #a74d99;
}  */      

.part-face {
	position: absolute;
	margin-bottom: 0.133333rem;
}
.part-face0 {
	width: 0.853333rem;
	height: 0.8rem;
	top: 0.206667rem;
	left: 50%;
	margin-left: -0.526667rem;
}

.part-face1 {
	width: 0.84rem;
	height: 0.72rem;
	top: 0.306667rem;
	left: 50%;
	margin-left: -0.526667rem;
}

.part-face2 {
	width: 0.76rem;
	height: 0.52rem;
    top: 0.366677rem;
	left: 50%;
	margin-left: -0.48rem;
}

.part-name {
	position: absolute;
	text-align: center;
	width: 1.413333rem;
	height: 0.493333rem;
	line-height: 0.493333rem;
	/*bottom: 0.106667rem;*/
	bottom: 0;
	left: 0;
	font-size: 0.333333rem;
	color: #a74d99;
	background-image:url('../image/find_titleshadow.png');
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.content-right {
	width: 2.8rem;
	min-height: 17.786667rem;
	background-color: rgba(255, 255, 255, 0.3);
	z-index: 2;
	margin-left: 10rem;
}
.person-bottom{
	position: absolute;
	left: 50%;
	margin-left: -4.573333rem;
    bottom: -1.8rem;
	width: 9.146667rem;
	height: 4.413333rem;
}
.part-arrow{
	height: 1.2rem;
    width: 0.653333rem;
    font-size: 0.6rem;
    text-align: center;
    line-height: 1.2rem;
    color:#a74d99;
    margin-left: -0.653333rem;
    background: #fff;
    background-image:url('../image/part-arrow.png');
    background-size: 100% 100%;
    visibility: hidden;
}
.content-right .part-item {
	width: 2.8rem;
	height: 1.066667rem;
	background-image:url('../image/findpoint_part_bg.png');
	background-repeat:no-repeat;
	background-size: 2.8rem 1.066667rem;
	color: #a74d99;
	margin: 0 auto;
	line-height: 1.066667rem;
	margin-bottom: 0.693333rem;
	font-size: 0.4rem;
	text-align: center;
	box-sizing: border-box;
}

.content-right .part-item:first-child {
	margin-top: 0.888888rem;
}

.bg-model .content {
	position: relative;
	margin: 0 auto;
	margin-top: 2.033333rem;
	width: 8.333333rem;
	background-color: #fff;
	padding: 0.4rem 0.1rem 0.8rem;
	border-radius: 0.266667rem;
	box-sizing: border-box;
	box-shadow: 0px 0px 0.093333rem rgba(217, 147, 249, 0.69);
}

.bg-model .content .left-bottom-img{
	position: absolute;
	left: -0.43rem;
    bottom: 0.16rem;
	width: 0.693333rem;
	height: 0.466667rem;
	background-image:url('../image/showpoint_lb_img.png');
	background-repeat:no-repeat;
	background-size: 0.693333rem 0.466667rem;
}
.bg-model .content .right-top-img{
	position: absolute;
	right: -0.75667rem;
    top: 2.4503333rem;
	width: 1.266667rem;
	height: 1.0rem;
	background-image:url('../image/showpoint_lb_img.png');
	background-repeat:no-repeat;
	background-size: 1.266667rem 1.0rem;
}
.bg-model .content .c-partname {
	box-sizing: border-box;
	width: 5.346667rem;
	height: 1.506667rem;
	background-image:url('../image/findpoint_part_modal_bg.png');
	background-repeat:no-repeat;
	background-size: 5.346667rem 1.506667rem;
	margin: 0 auto;
	font-size: 0.44rem;
	color: #9c5495;
	text-align: center;
	padding-top: 0.466667rem;
	margin-bottom: 0.933333rem;
}
.bg-model .content .c-partdesc{
	text-align: center;
}
.bg-model .desc {
	display: inline-block;
	box-sizing: border-box;
	width: 2.8rem;
	height: 1.066667rem;
	padding: 0.266667rem 0;
	text-align: center;
	border-radius: 0.133333rem;
	border: 0.053333rem solid #9c5495;
	font-size: 0.4rem;
	color: #9c5495;
	box-sizing: border-box;
}
.bg-model .desc.active {
	border: 0.053333rem solid #c276b6;
	background-color: #c276b6;
	color: #fff;
}
.item-odd {
	margin-right: 0.6rem;
	margin-bottom: 1.066667rem;
}
.part-touch{
	height: 100%;
    position: absolute;
    width: 5rem;
    left: 2rem;
}
.shoose-btn {
	box-sizing: border-box;
	width: 4.12rem;
	height: 1.413333rem;
	background-image:url('../image/findpoint_choose_btn.png');
	background-repeat:no-repeat;
	background-size: 4.12rem 1.413333rem;
	margin: 0 auto;
}
.dismiss-modal {
	box-sizing: border-box;
	width: 1.306667rem;
	height: 1.306667rem;
	background-image:url('../image/findpoint_dismiss.png');
	background-repeat:no-repeat;
	background-size: 1.306667rem 1.306667rem;
	margin: 0 auto;
}
.findlineman0{
	width: 2.666667rem;
	height: 0.213333rem;
	margin-top: 0.5333335rem;
	margin-left: 1.466667rem;
}
.findlineman1{
	width: 2.666667rem;
	height: 0.213333rem;
	margin-top: 0.5333335rem;
	margin-left: 1.466667rem;
}
.findlineman2{
	width: 2.213333rem;
	height: 0.213333rem;
	margin-top: 0.5333335rem;
	margin-left: 1.466667rem;
}

.findlinegirl0{
	width: 2.666667rem;
	height: 0.213333rem;
	margin-top: 0.5333335rem;
	margin-left: 1.466667rem;
}
.findlinegirl1{
	width: 2.666667rem;
	height: 0.213333rem;
	margin-top: 0.5333335rem;
	margin-left: 1.466667rem;
}
.findlinegirl2{
	width: 2.213333rem;
	height: 0.213333rem;
	margin-top: 0.5333335rem;
	margin-left: 1.466667rem;
}