
body{
	-webkit-text-size-adjust:none;
	text-decoration:none;
	font-family:"微軟正黑體", "Microsoft JhengHei",  Helvetica, Arial, sans-serif;
	font-size: 16px;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;

			
	}
	
	
/*========================== 版型設定 ============================*/
/*PC表頭尾*/
.PC .PC_LOGIN, .PC .FOOT_PC{ width:100%; display:block;}
.PC .FOOT_MOBILE{ display:none;}
/*PC表頭尾*/

/*消失區*/
.PC #header, .PC .FOOT_MOBILE { display:none;}
.MOBILE .PC_LOGIN, .MOBILE .FOOT_PC{ display:none;}

/*MOBILE表頭尾*/
.MOBILE #float_icon , .MOBILE #header, .MOBILE .FOOT_MOBILE{display:block;}
/*MOBILE表頭尾*/

/*MOBILE小字斷行*/
.MOBILE .T01_MB{display:block;}
/*MOBILE小字斷行*/

#float_icon .BACK_top{bottom:110px;}

/*========================== 版型設定 ============================*/

/*========================== 共用設定 ============================*/


#vip_friends .SPG_BTM_40{ padding:0px 0 40px 0;}/*下間內距*/
#vip_friends .SPG_BTM_10{ padding:0px 0 10px 0;}/*下間內距*/

#vip_friends .SPG_TOP{ padding:10px 0 0 0; }/*上間內距*/


.PC #vip_friends .SPG{ padding: 10px; }/*全格內距*/
.MOBILE #vip_friends .SPG{ padding: 2.5%;}/*全格內距*/
.PC #vip_friends .O_SPG, .MOBILE #vip_friends .O_SPG{margin: 0 0 10px 0;}
.PC #vip_friends .O_SPG02, .MOBILE #vip_friends .O_SPG02{margin: 0 0 5px 0;}

#vip_friends .No_BREAK{display: inline;}/*強制不換行*/

/*========================== 文字樣式 ============================*/
#vip_friends .pq_B{font-weight: 700;}
#vip_friends .pq_LINK1{color:#1a8dd4;}/*連結字*/
#vip_friends .pq_LINK1:hover{text-decoration: underline;}/*連結字*/

#vip_friends .pq_GRAY1{color:#333;}/*灰黑*/
#vip_friends .pq_GRAY2{color:#555;}/*灰黑*/
#vip_friends .pq_BLACK{color:#000;}/*黑*/
#vip_friends .pq_RED2{color:#f16969;}/*紅*/

#vip_friends .VF_T01_s{ /*=內文小字=20220606*/
    font-family: "微軟正黑體", "Microsoft JhengHei", "sans-serif", Helvetica, Arial;
    font-size: 1rem;
	line-height: 1.6rem;	
}

#vip_friends .VF_T01{ /*=內文=*/
    font-family: "微軟正黑體", "Microsoft JhengHei", "sans-serif", Helvetica, Arial;
	font-size: 1.1rem;
	line-height: 1.6rem;

}

#vip_friends .VF_T02{ /*=次標文=*/
    font-family: "微軟正黑體", "Microsoft JhengHei", "sans-serif", Helvetica, Arial;
    font-size: 1.2rem;
    line-height: 2rem;
}
.PC #vip_friends .VF_T03{ /*=標=*/
    font-family: "微軟正黑體", "Microsoft JhengHei", "sans-serif", Helvetica, Arial;
    font-size: 1.5rem;
    line-height: 2.3rem;
}

.MOBILE #vip_friends .VF_T03{ /*=標=*/
    font-family: "微軟正黑體", "Microsoft JhengHei", "sans-serif", Helvetica, Arial;
    font-size: 1.3rem;
    line-height: 2.3rem;
}

/*分類底色*/
#vip_friends .GR{/*家人*/
	background-color: #97d28e;
}
#vip_friends .PINK{/*兩性*/
	background-color: #f89c9c;
}
#vip_friends .OR{/*朋友*/
	background-color: #f59c6c;
}
#vip_friends .BLUE{/*職場*/
	background-color: #75a5d6;
}
#vip_friends .GY{/*灰色*/
	border-color: #dddddd;
}
#vip_friends .PURPLE{/*VIP紫色*/
	background-color: #dd7def;
}


#vip_friends p.T_C01{/*開創*/
	color: #ee746f;
}
#vip_friends p.T_C02{/*領導*/
	color: #79a3f2;
}
#vip_friends p.T_C03{/*支援*/
	color: #eeb251;
}
#vip_friends p.T_C04{/*合作*/
	color: #a6d070;
}

#vip_friends .P_C01{/*開創*/
	background-color: #ee746f;
}
#vip_friends .P_C02{/*領導*/
	background-color: #79a3f2;
}
#vip_friends .P_C03{/*支援*/
	background-color: #eeb251;
}
#vip_friends .P_C04{/*合作*/
	background-color: #a6d070;
}



/*========================== 共用設定 ============================*/

/*========================== 共用外框============================*/
#vip_friends{
	width: 100%;
    height: auto;
    overflow: hidden;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
	background: #f7f7f7;
	background-image: url(../images/x_pc_bg.png);/*=假圖用正式請刪除=*/
	background-repeat: no-repeat;
	background-position: center top;
	text-decoration: none;
	color: #333;	
	
}
	.PC #vip_friends{
		background-repeat: no-repeat;
		background-position: center top;
		background-image: url(../images/x_pc_bg.png);/*=假圖用正式請刪除=*/
		padding-bottom: 50px;
	}

	.MOBILE #vip_friends{
		width: 100%;
		background-repeat: no-repeat;
		background-position: center top;
		background-image: url(../images/x_mb_bg.png);/*=假圖用正式請刪除=*/
		background-size: 100% auto;
		margin-top: 45px;
		padding-bottom: 0px;
	}

.PC #vip_friends .BG_CONTENT{/*= 無需使用 */
	width: 900px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
	background-color: #fff;
	border-radius: 0px 0px 8px 8px;
	padding: 1.5rem;
	margin-top: 355px;
}
	.MOBILE #vip_friends .BG_CONTENT{/*= 無需使用 */
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 0px 0px 8px 8px;
		padding: 1rem;
		margin-top: 250px;
	}


/*========================== 共用外框============================*/

/*========================== 共用內容框架 ============================*/
#vip_friends .VF_CON{ /*滿版內容區塊*/
	width: 100%;
	height: auto;
    overflow: hidden;
	margin: 0 auto;
}

	#vip_friends .VF_CON_s{ /*滿版內容區塊*/
		width:95%;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
	}

	.PC #vip_friends .VF_CON_s02{ /*滿版內容區塊*/
		width:75%;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
	}
	.MONILE #vip_friends .VF_CON_s02{ /*滿版內容區塊*/
		width:100%;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
	}


#vip_friends .VF_CON02{ /*雙欄均分內容區塊*/
	width: 100%;
	height: auto;
    overflow: hidden;
	margin: 5px auto;
}
	#vip_friends .VF_CON02 ul{ /*雙欄均分內容區塊*/
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: wrap;
				
	}
	.PC #vip_friends .VF_CON02 ul li{ /*雙欄均分內容區塊*/
		width: 49.5%;
		margin-top: 10px;
				
	}
	#vip_friends .VF_CON02 ul li:nth-child(1){ /*雙欄均分內容區塊*/
		margin-top: 0px;			
	}
	#vip_friends .VF_CON02 ul li:nth-child(2){ /*雙欄均分內容區塊*/
		margin-top: 0px;
	}

		.MOBILE #vip_friends .VF_CON02 ul li{ /*雙欄均分內容區塊*/
			width: 100%;
			margin-top: 10px;
		}
		.MOBILE #vip_friends .VF_CON02 ul li:nth-child(1){ /*雙欄均分內容區塊*/
			margin-top: 0px;
		}



#vip_friends .VF_CON03{ /*雙欄不均分內容區塊*/
	width: 100%;
	height: auto;
    overflow: hidden;
	margin: 0 auto;
	-webkit-box-sizing:border-box;
}
	#vip_friends .VF_CON03 ul{ /*雙欄不均分內容區塊*/
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: wrap;		
	}

	#vip_friends .VF_CON03 ul li:nth-child(1){ /*雙欄不均分內容區塊*/
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;		
		width: calc(100% - 72%);
		padding-right: 1%;
		
	}
		.MOBILE #vip_friends .VF_CON03 ul li:nth-child(1){ /*雙欄不均分內容區塊*/
			display: block;
			width: 100%;
			padding-right: 0;
		}
	#vip_friends .VF_CON03 ul li:nth-child(2){ /*雙欄不均分內容區塊*/
		display: flex;
		flex-direction: column;
		width: 72%;	
	}
		.MOBILE #vip_friends .VF_CON03 ul li:nth-child(2){ /*雙欄不均分內容區塊*/
			display: block;
			width: 100%;
		}

		#vip_friends .VF_CON03 ul li:nth-child(2)>.VF_CON{ /*雙欄不均分內容區塊*/
			margin-top:10px;
		}
		.PC #vip_friends .VF_CON03 ul li:nth-child(2)>.VF_CON:nth-child(1){ /*雙欄不均分內容區塊*/
			margin-top:0;
		}




#vip_friends .VF_BR{/*基本線框*/
	border-style:solid;
	border-width:1px; 
	border-radius: 5px;
	-webkit-box-sizing:border-box;
	
}
	#vip_friends .BR_COR_P{/*紫色*/
		border-color: #e5b9f4;
	}
	#vip_friends .BR_COR_GY{/*灰色*/
		border-color: #dddddd;
	}
	#vip_friends .BR_COR_GR{/*綠色*/
		border-color: #8dce84;
	}
	#vip_friends .BR_COR_PINK{/*粉色*/
		border-color: #ecb3cc;
	}
	#vip_friends .BR_COR_BLUE{/*藍色*/
		border-color: #75a3d2;
	}
	#vip_friends .BR_COR_OR{/*橘色*/
		border-color: #eabea6;
	}
	#vip_friends .BR_COR_YE{/*黃色*/
		border-color: #ffddc4;
	}


/*BAR*/
#vip_friends .VF_BAR{/*內容基本樣式*/
	width: 100%;
	height: 40px;
	font-size: 1.2rem;
	color: #9300d7;
	line-height: 40px;
	text-align: center;
	background-color: #f8e8ff;
	font-weight:bold;
	border-radius:5px 5px 0 0; 
	
}


/*分類主BAR*/

.PC #vip_friends .VF_TIT{
	width: 100%;
	height: 91px;
	border-bottom:1px solid #e9bbff;
	margin-bottom: 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
	.MOBILE #vip_friends .VF_TIT{
		width: 100%;
		height: 130px;
		border-bottom:1px solid #e9bbff;
		margin-bottom: 30px;
		border-bottom:none;	
		border-bottom:1px solid #e9bbff;	
	}
#vip_friends .VF_TIT ul{
	width: 100%;
	height:90px;	
}
#vip_friends .VF_TIT li{
	float: left;
	}

.PC #vip_friends .VF_TIT li:nth-child(1){	
	width: 80px;
	height: 90px;
	position: relative;
}
	.MOBILE #vip_friends .VF_TIT li:nth-child(1){	
		width: 80px;
		height: 150px;
		position: relative;
	}

.PC #vip_friends .VF_TIT li:nth-child(1) img{
		display: block;
		width: 80px;
		height: auto;
		position: absolute;
		bottom:0px;
	}
	.MOBILE #vip_friends .VF_TIT li:nth-child(1) img{
		display: block;
		width: 80px;
		height: auto;
		position: absolute;
		top:20px;
	}

.PC #vip_friends .VF_TIT li:nth-child(2){/*20220602修改*/
	padding-top: 10px;
	padding-left: 5px;
	line-height: 100px;
	font-size: 1.8rem;
	color: #000;	
}
	.PC #vip_friends .VF_TIT li:nth-child(2) br{/*20220602修改*/
		display: none;	
	}
	.MOBILE #vip_friends .VF_TIT li:nth-child(2){
		width: calc(100% - 80px);			
		font-size: 1.5rem;
		color: #000;
		padding-top: 10px;
		padding-left: 10px;
		
	}
.PC #vip_friends .VF_TIT li:nth-child(3){
	width: 265px;
	height: 100px;	
	float: right;	
	position: relative;
	
}
	.MOBILE #vip_friends .VF_TIT li:nth-child(3){
		width: calc(100% - 80px);
		height: 80px;		
		padding-top: 5px;
		padding-left: 10px;
	}
.PC #vip_friends .VF_TIT .TIT_BT{
	width: 100%;
	position: absolute;
	right: 0px;
	bottom:20px;
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;	
}
	.MOBILE #vip_friends .VF_TIT .TIT_BT{
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: wrap;	
	}
.PC #vip_friends .VF_TIT .TIT_BT a{
	display:inline-block;
	width:49%;				
	text-align: center;
	padding:5px 5px;
}
	.MOBILE #vip_friends .VF_TIT .TIT_BT a{
		display:inline-block;
		width:49%;				
		text-align: center;
		padding:5px 5px;
	}

	.MOBILE #vip_friends .VF_TIT .TIT_BT a.ALL{
		display:inline-block;
		width:100%;				
		text-align: center;
		padding:5px 5px;
	}

#vip_friends .BT_ICON{
	display:inline-block;
	width:15px;
	height: 15px;
	background-size: 15px auto;
	margin-right: 3px;
	margin-bottom: -2px;
	background-position: top;		
}

#vip_friends .BT_ICON02{
	display:inline-block;
	width:18px;
	height: 18px;
	background-size: 18px auto;
	margin-right: 3px;
	margin-bottom: -3px;	
}

#vip_friends a.COlOR01:hover > .BT_ICON, #vip_friends a.COR01_ACTIVE > .BT_ICON{
	background-position: bottom;
}

	#vip_friends .BT_ICON01{
		background-image: url(../images/uitag/uitag_6.png);	
		}
	#vip_friends .BT_ICON02{
		background-image: url(../images/uitag/uitag_5.png);	
		}
	#vip_friends .BT_ICON03{
		background-image: url(../images/uitag/uitag_7.png);	
		}
	#vip_friends .BT_ICON04{
		background-image: url(../images/uitag/uitag_8.png);	
		}
	#vip_friends .BT_ICON05{
		background-image: url(../images/uitag/uitag_9.png);	
		}
	#vip_friends .BT_ICON06{
		background-image: url(../images/uitag/uitag_11-1.png);	
		}
	#vip_friends .BT_ICON07{
		background-image: url(../images/uitag/uitag_12-1.png);	
		}

	#vip_friends .BT_ICON08{
		background-image: url(../images/uitag/uitag_7_g.png);	
		}
	#vip_friends .BT_ICON09{
		background-image: url(../images/uitag/uitag_8_g.png);	
		}
	#vip_friends .BT_ICON10{
		background-image: url(../images/uitag/uitag_19.png);	
		}
	#vip_friends .BT_ICON11{
		background-image: url(../images/uitag/uitag_20.png);	
		}


/*下拉BAR*/
#vip_friends .VF_BAR_IN{/*內容基本樣式*/
	width: 100%;
	height: 45px;
	background-color: #f8e8ff;
	border-radius:5px;	
	position: relative;
}
#vip_friends .VF_BAR_IN p{/*內容基本樣式*/
	display: block;
	position: absolute;
	left: 10px;
	top:0;
	font-size: 1.2rem;
	font-weight:bold;
	color: #9300d7;
	line-height: 45px;
	text-align: left;
}
#vip_friends .VF_BAR_IN .BT_DR{/*內容基本樣式*/
	position: absolute;
	right: 0px;
	width: 45px;
	height: 45px;
}
#vip_friends .VF_BAR_IN .BT_DR a{/*內容基本樣式*/
	display: block;
	width: 100%;
	height: 45px;
	background-size: 20px 20px;
	background-position: center center;
	background-repeat: no-repeat;
	
}
#vip_friends .VF_BAR_IN .DR_01{/*內容基本樣式*/
	background-image: url(../images/uitag/uitag_15-2.png);
}
#vip_friends .VF_BAR_IN .DR_02{/*內容基本樣式*/
	background-image: url(../images/uitag/uitag_15-1.png);
}
#vip_friends .VF_BAR_IN .TIT_BT02{
	position: absolute;
	right: 10px;
	top:5px;
}
#vip_friends .VF_BAR_IN .TIT_BT02 a{
	display: block;
	text-align: center;
}


/*========================== IMP ============================*/
/*平板小於內容js縮放*/

@media screen and (max-width: 1000px) {
  .PC #vip_friends {
    width: 1000px !important;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
  }
 }
 /*========================== IMP ============================*/

 
/*========================== 按鈕 ============================*/
#vip_friends .VF_BT_s{
	display: inline;
	margin-left: 5px;
	margin-bottom: 5px;	
	}
	#vip_friends .VF_BT_s a{
		display:inline-block;
		width:auto;				
		text-align: center;				
		}
		#vip_friends .VF_BT_s .ARROW{
			display: inline-block;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 5px 0 5px 8px;
			border-color: transparent transparent transparent #1a8dd4;	
			margin-left: 3px;
			margin-bottom:1px;	
		}



#vip_friends .VF_BT{
	margin-top: 5px;	
	}
	.PC #vip_friends .VF_BT02{/*滿版用*/
		width: 40%;
		margin: 10px auto;	
		}
	.MPBILE #vip_friends .VF_BT02{/*滿版用*/
		width: 100%;
		margin: 10px auto;	
		}

	#vip_friends .VF_BT04{
		display: inline-block;
		height: 45px;
		margin: 0 5px;			
		}
		#vip_friends .VF_BT04 a{
			font-size: 1.3rem;
			padding:10px;
			border-radius: 5px;			
			}

	#vip_friends .VF_BT a{
		display: block;
		width:auto;				
		text-align: center;
		}


#vip_friends .VF_BT03{/*雙欄按鈕*/
	width: 100%;
	margin-top: 10px;	
	}
	.PC #vip_friends .VF_BT03 ul{/*雙欄按鈕*/
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: wrap;		
		}
		.MOBILE #vip_friends .VF_BT03 ul.MB{/*雙欄按鈕*/
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: space-between;
			flex-wrap: wrap;		
			}
	#vip_friends .VF_BT03 li{/*雙欄按鈕*/
		width: 50%;
				
		}

		.MOBILE #vip_friends .VF_BT03 ul.MB li{/*雙欄按鈕*/
			width: 49%;
			margin-top: 0;		
			}
	#vip_friends .VF_BT03 li a{/*雙欄按鈕*/
		display: block;
		width:95%;
		margin: 0 auto;			
		text-align: center;
		font-size: 1rem;
		padding:6px 5px;
		border-radius: 5px;			
		}
		.MOBILE #vip_friends .VF_BT03 ul.MB li a{/*雙欄按鈕*/
			display: block;
			width:100%;
			margin: 0 auto;			
			text-align: center;
			font-size: 1rem;
			padding:6px 5px;
			border-radius: 5px;			
			}



/*篩選按鈕*/
#vip_friends .FIL_BT{
	height: auto;
	overflow: hidden;
	margin-bottom: 10px;
	
}
	.PC #vip_friends .FIL_BT ul{
		width: auto;
	}
	.MOBILE #vip_friends .FIL_BT ul{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content:center; 

	}
	.PC #vip_friends .FIL_BT li{
		float: left;
		width: auto;
		margin-right: 6px;
	}
	
	.PC #vip_friends .FIL_BT .SEARCH{
		width: auto;
	}
	.MOBILE #vip_friends .FIL_BT li{
		float: left;		
		width: 32.5%;
	}
	.MOBILE #vip_friends .FIL_BT li:nth-child(4){
		display: none;
	}

	.MOBILE #vip_friends .FIL_BT .SEARCH{
		width: 100%;
		margin-top: 5px;
	}
	#vip_friends .FIL_BT a{
		display: block;
		text-align: center;
		font-size: 1rem;	
		border-radius: 5px;
	}



	#vip_friends .SEARCH input{
		height: 35px;
		
	}

	.PC #vip_friends .SEARCH ul{
		width:100%;		
	}
	.PC #vip_friends .SEARCH ul li{
		float: left;
		width: auto;
		margin-right: 2px;	
	}

	.MOBILE #vip_friends .SEARCH ul li{
		float: left;		
		
	}
	.MOBILE #vip_friends .SEARCH li:nth-child(1){
		width: calc(100% - 85px);
		padding-right: 5px;
	}

	.MOBILE #vip_friends .SEARCH li:nth-child(2){
		float: left;
		width: 50px;
		
	}
	.MOBILE #vip_friends .SEARCH li:nth-child(3){
		float: right;
		width: 35px;
	}
	#vip_friends .SEARCH .BT_X{	
		width: 35px;
		height: 35px;
		
	}

	#vip_friends .SEARCH .BT_X a{
		display: block;
		width:35px;
		height: 35px;
		text-indent: -9999px;
		background-image: url(../images/uitag/uitag_13-2.png);
		background-size: 25px 25px;
		background-position: center center;
		background-repeat: no-repeat;

			
	}



/*按鈕顏色*/
	#vip_friends a.COlOR01{
		color: #1a8dd4;
		background-color: #fff;
		border: 1px solid #1a8dd4;
		padding:5px 8px;
		font-size: 1rem;	
		border-radius: 5px;			
		}
		#vip_friends a.COR01_ACTIVE{
			padding:5px 8px;
			font-size: 1rem;	
			border-radius: 5px;
			border: 1px solid #1a8dd4;
			color: #fff;
			background-color: #1a8dd4;			
			}
		#vip_friends a.COlOR01:hover{
			color: #fff;
			background-color: #1a8dd4;		
		}
		#vip_friends a.COlOR01:hover >.ARROW{
			border-color: transparent transparent transparent #fff;	
		}

#vip_friends a.COlOR02{
		font-size: 1.3rem;
		padding:10px 12px;
		border-radius: 5px;	
		color: #fff;
		background-color: #9300d7;
		font-weight: bold;
		}

	#vip_friends a.COlOR02:hover{
		color: #fff;
		background-color: #af02ff;	
		}

#vip_friends a.COlOR03{
		background-color: #f5e1ff;
		color: #8d02d9;
		padding:8px 8px;
		font-size: 1.1rem;	
		border-radius: 5px;		
		}
		#vip_friends a.COlOR03:hover{
		background-color:#edc8ff;			
		}

#vip_friends .COlOR_G{
		color: #898989;
		background-color: #c5c5c5;
		border: 1px solid #c5c5c5;
		padding:5px 8px;
		font-size: 1rem;	
		border-radius: 5px;
		text-align: center;		
		}


/*========================== 特殊圖文樣式============================*/

/*名片樣式01*/
#vip_friends .NA_BOX{
	width: 100%;
	height:auto;
	overflow: hidden;
	
}
	.MOBILE #vip_friends .NA_BOX{
		width: 100%;
		height:auto;
		overflow: hidden;	
	}

#vip_friends .NA_BOX a{
	display: block;
	width: 100%;
	height:100px;
	border-radius:5px; 
	border: 1px solid #e5b9f4;
}
	.MOBILE #vip_friends .NA_BOX a{
		display: block;
		height:auto;
		overflow: hidden;
	}

	#vip_friends .NA_BOX a:hover{
		border: 1px solid #9300d7;
	}

	.PC #vip_friends .NA_BOX a.GY{
		border: 1px solid #bbbbbb;
		font-size: 1.4rem;
		height:100px;
		line-height: 100px;
		text-align: center;
		color: #666;
	}
	.MOBILE #vip_friends .NA_BOX a.GY{
		border: 1px solid #bbbbbb;
		font-size: 1.4rem;
		height:auto;
		overflow: hidden;
		text-align: center;
		color: #666;
		padding: 3% 0 5% 0;
	}


	#vip_friends .NA_BOX .ADD_ICON{
		display: inline-block;
		width: 45px;
		height:45px;
		border-radius:45px;
		padding: 10px;
		background-color: #eee;
		margin-bottom: -15px;
		margin-right: 5px;
		background-image: url(../images/uitag/uitag_5-2.png);
		background-size: 25px auto;
		background-position: center 10px;
		background-repeat: no-repeat;	
	}
	#vip_friends .NA_BOX a.GY:hover{
		color: #9300d7;
		border: 1px solid #af02ff;
	}
		#vip_friends .NA_BOX a.GY:hover>.ADD_ICON{
			background-color: #af02ff;
			background-position: center -47px;			
		}

#vip_friends .NA_BOX ul{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.PC #vip_friends .NA_BOX li{
	float: left;
	height:100px;
}
	.MOBILE #vip_friends .NA_BOX li{
		float: left;
		height: auto;
		overflow: hidden;
	}

.PC #vip_friends .NA_BOX li:nth-child(1){
	width: 60%;	
}
	.MOBILE #vip_friends .NA_BOX li:nth-child(1){
		width: 50%;	
	}

.PC #vip_friends .NA_BOX li:nth-child(2){
	width: 20%;	
}
	.MOBILE #vip_friends .NA_BOX li:nth-child(2){
		width: 25%;
		
	}

.PC #vip_friends .VF_CON02 ul li > .NA_BOX li:nth-child(3){
	width: 20%;
	margin-top: 0px;	
}
.MOBILE #vip_friends .VF_CON02 ul li > .NA_BOX li:nth-child(3){
	width: 25%;
	margin-top: 0px;	
}



/*名片樣式02內頁用*/
.PC #vip_friends .NA_BOX02{
	width: 100%;
	height:175px;
	margin: 0 auto;
	position: relative;
}
	.MOBILE #vip_friends .NA_BOX02{
		width: 100%;
		height:auto;
		margin: 0 auto;
		position: relative;
	}

/*名片樣式03內頁用*/
#vip_friends .NA_BOX03{
	width: 100%;
	height:120px;
	margin: 0 auto;
	position: relative;
	padding-bottom: 10px;
}
#vip_friends .NA_BOX03 a{
	display: block;
	color: #333;

}

	#vip_friends .ONLINE{
		border: 2px solid #9300d7;
	}
	#vip_friends .HOLINE:hover{
		border: 2px solid #9300d7;
	}

	.MOBILE #vip_friends .NA_BOX03{
		width: 100%;
		height:auto;
		margin: 0 auto;
		position: relative;
	}

#vip_friends .NAME_BR{/*稱謂*/
	width: 70px;
	height: 70px;
	border-radius:70px;
	line-height: 70px;
	color: #fff;
	text-align: center;
	font-size: 1.4em;
	margin-top: 10px;
}

#vip_friends .TRASH{/*垃圾桶按鈕*/
	position: absolute;
	width: 45px;
	height: 45px;
	right: 10px;
	top:0px;
}
	#vip_friends .TRASH a{
		display: block;
		width: 45px;
		height: 45px;
		text-indent: -9999px;
		background-image: url(../images/uitag/uitag_10-2.png);
		background-size: 20px 20px;
		background-position: right 3px center;
		background-repeat: no-repeat;	 
	}
	.PC #vip_friends .NA_BOX02 .VF_BT03{
		width: 95%;
		position: absolute;
		bottom:8px;
		left: 2.5%;
	}
	.PC #vip_friends .NA_BOX02 .VF_BT03 ul.MB a{
		width: 100%;
	}
	.MOBILE #vip_friends .NA_BOX02 .VF_BT03{
		width: 98%;
		margin-bottom: 10px;
	}


/*暱稱*/
#vip_friends .NAME_BG{/*首頁樣式*/
	height:100px;      
	position: relative;
	padding-top: 35px;
	padding-left: 20px;
	align-items: center;
	
}

	#vip_friends  ul.NAME_BG02{/*內頁樣式*/
		width: 95%;
		margin: 0 auto;
		padding-top: 40px;	
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-content:flex-start;
	}
	#vip_friends ul.NAME_BG02 li{/*內頁樣式*/
		align-items: center;

	}
	#vip_friends ul.NAME_BG02 li:nth-child(1){
		width:100%;	
	}


	

	#vip_friends  ul.NAME_BG04{/*內頁樣式*/
		width: 95%;
		margin: 0 auto;
		padding-top: 40px;	
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-content:flex-start;
	}

	#vip_friends ul.NAME_BG04 li{/*內頁樣式*/
		align-items: center;

	}
	#vip_friends ul.NAME_BG04 li:nth-child(1){
		width: 100%;
	}
	.MOBILE #vip_friends ul.NAME_BG04 li:nth-child(1){
		width: 100%;
	}



	#vip_friends .NAME01{/*大字樣式*/
		font-size: 1.5rem;
		line-height: 2rem;
		color: #000;
		align-items: center;
	}
	.PC #vip_friends .NAME01_2{/*大字樣式首頁用*/
		font-size: 1.4rem;
		line-height: 2.7rem;
		color: #000;
		align-items: center;
	}
		.MOBILE #vip_friends .NAME01_2{/*大字樣式首頁用*/
			font-size: 1.5rem;
			line-height: 2rem;
			color: #000;
			align-items: center;
		}
	#vip_friends .NAME02{/*小字樣式*/
		font-size: 1.2rem;
		color: #000; 
		line-height: 1.6rem;
	}

	#vip_friends .TAG_BG{/*20220606新增*/
		position: absolute;
		width: 100%;
		height: 25px;
		left: 0px;
		top:0px;
		border-radius:4px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-content:flex-start;
	}
	#vip_friends .TAG{/*20220606改寫*/
		width: 60px;
		height: 25px;
		border-radius:4px;
		margin-right: 2px;
		text-align: center;

	}
	#vip_friends .TAG p{
		color: #fff;
		line-height: 25px;
		font-size: 1rem;
		text-align: center;
	}
	#vip_friends .TAG .S_ICON{
		display: inline-block;
		width: 15px;
		height: 15px;	
		margin-right: 2px;
		margin-bottom: -2px;
		
	}
	#vip_friends .TAG .S_ICON img{
		display: block;
		width: 100%;
		height: auto;
	}

/*心情*/
#vip_friends .NA_BOX .MOOD_B{
	width: 100%;
	height: auto;
	overflow: hidden;
}

.PC #vip_friends .MD_PH{
	width: 45px;
	height: 45px;
	margin: 0 auto;
	margin-top: 20px;
}

	.MOBILE #vip_friends .MD_PH{
		width: 45px;
		height: 45px;
		margin: 0 auto;
		margin-top: 10px;
	}
#vip_friends .MD_PH img{
	display: block;
	width: 100%;
	height: auto;
}
#vip_friends .MD_TEXT{
	width: 100%;
	color: #666;
	line-height: 25px;
	font-size: 0.9rem;
	text-align: center;
}

/*心情內頁用*/
#vip_friends .MD_PH02{
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-bottom: -5px;
	margin-right: 5px;/*20220606*/
	margin-left: 5px;/*20220606*/
}
	#vip_friends .MD_PH02_2{
		display: block;
		width: 25px;
		height: 25px;
		/*20220606*/
		margin-left: 5px;/*20220606*/
		margin: 0 auto;
	}
#vip_friends .MD_PH02 img, #vip_friends .MD_PH02_2 img{
	display: block;
	width: 100%;
	height: auto;
}


/*性別內頁用20220610*/
#vip_friends .GENDER_PH01{
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: -4.5px;

}
#vip_friends .GENDER_PH01 img{
	display: block;
	width: 95%;
	height: auto;
	margin: 0 auto;
	margin-top: 2.5%;

}

/*按鈕*/
#vip_friends .NA_BOX .NA_BT{
	width: 100%;
	height: 100px;
	border-left:1px solid #e5b9f4;
	position: relative;
	
}


#vip_friends .NA_BOX .NA_BT .BT_S{
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius:60px;
	font-size: 1.1rem;
	line-height: 1.3rem;
	color: #fff;
	text-align: center;
	background-color: #9300d7;
	padding-top: 12px;
	left: 50%;
	top: 50%;
	margin-left: -30px;
	margin-top: -30px;
}



	.PC #vip_friends .NA_BOX a:hover>ul>li:nth-child(3)>.NA_BT>.BT_S{
		background-color: #af02ff;
	}

/*運勢星星*/
#vip_friends .STAR{
	display: inline-block;
	width: 23px;
	height: 23px;
	margin-bottom: -3px;
	margin-right: 3px;
}
#vip_friends .STAR img{
	display: block;
	width: 100%;
	height: auto;
}




/*壽星*/
#vip_friends .BR_DAY{
	width: 100%;	
	margin-top: 10px;	
} 

#vip_friends .BR_DAY ul{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
} 

.PC #vip_friends .BR_DAY li:nth-child(1){
	display: flex;
	width: 15%;
	font-size: 1.2rem;
	align-items: center;
	border-radius:5px 0 0 5px;
	text-align: center;
	text-indent: 10px;
	padding: 2%;	
} 
	.MOBILE #vip_friends .BR_DAY li:nth-child(1){
		width:100%;
		height: 40px;
		font-size: 1.2rem;
		line-height: 40px;
		border-radius:5px 5px 0 0;
		text-align: center;		
	} 

.PC #vip_friends .BR_DAY li:nth-child(2){	
	width: calc(100% - 15%);  
	color: #333;
	font-size: 1.1rem;
	padding: 2%;
		
} 
	.MOBILE #vip_friends .BR_DAY li:nth-child(2){	
		width: 100%;  
		color: #333;
		font-size: 1.1rem;
		padding: 2%;			
	} 

#vip_friends .BR_DAY .BRD01{	
	background-color: #f5e1ff;
	color: #8d02d9;
	
} 
#vip_friends .BR_DAY .BRD02{
	background-color: #ffddc4;
	color: #be5100;
	
}


/*圖文*/
#vip_friends .PH01{
	width: 100px;
	height: 100px;
	float: left;	
}
#vip_friends .PH01 img{
	display: block;
	width: 100%;
	height: auto;
}
#vip_friends .PH01_COM{	
	padding-top: 10px;
	margin-left: 110px;
}

/*四型圖文*/
.PC #vip_friends .PH02{
	width: 100px;
	height: auto;
	overflow: hidden;
	float: left;	
}
	.MOBILE #vip_friends .PH02{
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
	}
	.MOBILE #vip_friends .PH02>.PH01{
		float: none;
		width: 40%;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
		
	}
	.PC #vip_friends .PH02 p{
		text-align: center;	
	}
	.MOBILE #vip_friends .PH02 p{
		display: block;
		text-align: center;	
	}



	.PC #vip_friends .PH02_COM{	
		padding-top: 10px;
		margin-left: 110px;
	}
		.MOBILE #vip_friends .PH02_COM{
			width: 100%;
			height: auto;
			overflow: hidden;	
			padding-top: 10px;
			
		}
	#vip_friends .PH02_COM .VF_BT_s{
		float: right;
		margin: 12px 0 0 0;
	}

/*沒親友圖文*/
.PC #vip_friends .PH03{
	width: 200px;
	height: 200px;
	float: left;
	

}
	.MOBILE #vip_friends .PH03{
		width:50%;
		height: auto;		
		margin: 0 auto;
		
	}
	#vip_friends .PH03 img{
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto;
		border-radius:20px;

	}

.PC #vip_friends .PH03_COM{	
	padding-left: 20px;
	margin-left:200px;
}
	.PC #vip_friends .COM_TOP{	
		padding-top: 40px;
	}

	.MOBILE #vip_friends .PH03_COM{	
		width: 100%;
	}

	.MOBILE #vip_friends .COM_TOP{	
		padding-top: 0px;
	}

#vip_friends .VF_LIST{
	width:100%;
	height: auto;
	overflow: hidden;
	margin: 5px auto;
}
#vip_friends .VF_LIST ul{
	width: 100%;
}

#vip_friends .VF_LIST li{
	float: left;
	width: auto;
	margin-right: 30px;
	color: #9300d7;
	font-size: 1.3rem;
	line-height: 2rem;
	font-weight:bold; 
}

#vip_friends .VF_RADIUS{
	display: inline-block;
	width:7px;
	height: 7px;
	border-radius:7px;
	background-color: #9300d7;
	margin-bottom: 3px;
	margin-right: 5px;
}




/*圖表欄位*/
.PC #vip_friends .PIE{
	width: 200px;
	height: 200px;
	background-color: #eee;
	margin: 0 auto;
	margin-bottom: 10px;
	border-radius:999em; 

}
	.MOBILE #vip_friends .PIE{
		width: 200px;
		height: 200px;
		background-color: #eee;
		margin: 0 auto;
		margin-bottom: 10px;
		border-radius:999em;		
	}

	.PC #vip_friends .PIE_IN{
		padding:0;
	}

	.MOBILE #vip_friends .PIE_IN{
		padding: 0 0 0 22%;
	}


/*圖表list*/
#vip_friends .P_LIOCN{
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius:10px;
	margin-right: 5px;
	margin-bottom: 2px;
}


/*========================== 僅給pc用表格20220606============================*/


#vip_friends .CPCHART{
	width: 100%;
	height: auto;
	overflow: hidden;
	border-top: 1px solid #e5b9f4;
	border-left: 1px solid #e5b9f4;
	border-radius:5px; 
}

#vip_friends .CPCHART ul{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content:center;
}
.PC #vip_friends .CPCHART li{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content:center;
	align-items: center;
	height: auto;
	overflow: hidden;
	border-right:1px solid #e5b9f4;
	border-bottom:1px solid #e5b9f4;
	font-size: 1em;
	line-height: 1.2em;
	padding: 8px;
	text-align: center;
	
}
	.PC #vip_friends .CPCHART ul:nth-child(1) > li:nth-child(1){
		width: 24%;
		justify-content: center;
		text-align: center;
		align-content:center;
		align-items: center;		
	}

	.PC #vip_friends .CPCHART li:nth-child(1){
		width: 24%;
		text-align: left;
		align-items: flex-start;
		justify-content: flex-start;		
	}
	.PC #vip_friends .CPCHART li:nth-child(2){
		width: 10%;
	}
	.PC #vip_friends .CPCHART li:nth-child(3){
		width: 10%;
		margin-top: 0px;
	}
	.PC #vip_friends .CPCHART li:nth-child(4){
		width: 13%;
		margin: 0px;
	}
	.PC #vip_friends .CPCHART li:nth-child(5){
		width: 13%;
		margin: 0px;
	}
	.PC #vip_friends .CPCHART li:nth-child(6){
		width: 30%;
		margin: 0px;
	}

	.PC #vip_friends .CPCHART ul.DELEDE:nth-child(1) > li:nth-child(1){
		width: 40%;
		justify-content: center;
		text-align: center;
		align-content:center;
		align-items: center;		
	}

	.PC #vip_friends .CPCHART ul.DELEDE li:nth-child(1){
		width:40%;
		text-align: left;
		align-items: flex-start;
		justify-content: flex-start;		
	}
	.PC #vip_friends .CPCHART ul.DELEDE li:nth-child(2){
		width: 15%;
	}
	.PC #vip_friends .CPCHART ul.DELEDE li:nth-child(3){
		width: 15%;
		margin-top: 0px;
	}
	.PC #vip_friends .CPCHART ul.DELEDE li:nth-child(4){
		width: 15%;
		margin: 0px;
	}
	.PC #vip_friends .CPCHART ul.DELEDE li:nth-child(5){
		width: 15%;
		margin: 0px;
	}


#vip_friends .CPCHART .C_BG{
	background-color: #fcf7ff;

}

#vip_friends .TAG_BG02{
	width: 60px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-content:center; 
	margin: 0 auto;
}
#vip_friends .TAG_BG02 .TAG{
	margin: 2px 0;
}
.PC #vip_friends .CPCHART .CPC_BT_BG{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content:center;
}
.PC #vip_friends .CPCHART .CPC_BT:nth-child(1){
	width: 49%;
}
.PC #vip_friends .CPCHART .CPC_BT:nth-child(2){
	width: 24%;
}
.PC #vip_friends .CPCHART .CPC_BT:nth-child(3){
	width: 24%;
}

.PC #vip_friends .CPCHART .CPC_BT_BG02{
	width: 100%;
}
.PC #vip_friends .CPCHART .CPC_BT02{
	width: 60px;
	margin: 0 auto;
}

#vip_friends a.COlOR04{
	display: block;	
	color: #1a8dd4;
	background-color: #fff;
	border: 1px solid #1a8dd4;
	padding:5px 8px;
	font-size: 1rem;	
	border-radius: 5px;			
	}
	#vip_friends a.COR04_ACTIVE{
		padding:5px 8px;
		font-size: 1rem;	
		border-radius: 5px;
		border: 1px solid #1a8dd4;
		color: #fff;
		background-color: #1a8dd4;			
		}
	#vip_friends a.COlOR04:hover{
		color: #fff;
		background-color: #1a8dd4;		
	}

#vip_friends a.COlOR05{
	display: block;
	padding:5px 8px;
	font-size: 1rem;	
	border-radius: 5px;	
	background-color: #fff;
	border: 1px solid #9300d7;	
	color: #9300d7;	
	}

#vip_friends a.COlOR05:hover{
	color: #fff;
	background-color: #af02ff;	
	}

/*=========多重選取區塊新增=========*/

#vip_friends .allframe{
	width:25px;
    height: 25px;
	margin:0 auto;
	position: absolute;
	right: 5px;
	top:5px;
}

#vip_friends .check_group label{
    margin:0;
    }
    .MOBILE #vip_friends .check_group label{
        margin:0;
    }

/*label 預設內容*/
#vip_friends .check_group .case{
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-size: 1.2rem;
    padding-left:35px;
    padding-right:25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height:1.65rem;
}

/*將預設的核取方塊隱藏*/
#vip_friends .case input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/*添加自訂核取外框*/
#vip_friends .case .checkmark{
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: 5px;
	background-color: rgb(228, 228, 228);
	}


    /*滑鼠移過效果*/
    #vip_friends .case:hover input ~ .checkmark {
        background-color: #9300d7;
    }
    /*滑鼠已選到效果*/
    #vip_friends .case input:checked ~ .checkmark {
        background-color: #9300d7;
    }
    
    /*滑鼠移過效果*/
    #vip_friends .case:hover input ~ .checkmarkno {
        background-color: rgb(228, 228, 228);
    }
    /*滑鼠已選到效果*/
    #vip_friends .case input:checked ~ .checkmarkno {
        background-color: rgb(228, 228, 228);
    }    
    
    

/*若沒被選到隱藏*/
#vip_friends .case .checkmark:after {
    content: "";
    position: absolute;
	display: block;
}

/*顯示自訂勾選符號*/
#vip_friends .case input:checked ~ .checkmark:after {
    display: block;
}

#vip_friends .case .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*新寫置底浮水按鈕*/
#vip_friends-wrapper .FLOAT_BOTTOM{
	width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    background-image: url(../images/bt_bg.png);
    background-repeat: repeat-x repeat-y;
    z-index: 9999;
    padding: 10px 0 10px 0;
}

#vip_friends-wrapper .FLOAT_BOTTOM .BT_GROUP{
	width: 500px;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: 5px;
}
	.MOBILE #vip_friends-wrapper .FLOAT_BOTTOM .BT_GROUP{
		width: 95%;
	}

#vip_friends-wrapper .BT_GROUP ul{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
	}
#vip_friends-wrapper .BT_GROUP ul li{
    width:48%;
	}


#vip_friends-wrapper .BT_GROUP li a{
    display: block;
    width:100%;
    font-size:1.5rem;
    border-radius: 5px;
    box-sizing: border-box;
    line-height: 45px;
	text-align: center;
	padding: 5px;
    }
    .BT_GROUP .CONFIRM{
        color:#fff;
        background-color: #ef4848;
	}
	.BT_GROUP .CONFIRM:hover{
        background-color: #be1515;
    }
    .BT_GROUP .CANCEL{
        color: #333;
        background-color: #eee;
    }
    .BT_GROUP .CANCEL:hover{
        color:#fff;
        background-color: #666;
	}
	

#vip_friends-wrapper .FLOAT_BOTTOM p{
	font-size: 1rem;
	text-align: center;
	color:#fff;
}
#vip_friends-wrapper .FLOAT_BOTTOM .YELLOW{
	font-size: 1rem;
	text-align: center;
	color: #fffb00;
}
