@charset "utf-8";

#main {
    float: none;
    width: 100%;
    font-size: 14px;
}

#fanunContents{
}

#fanfunHeader{
	position: relative;
	width: 1000px;
	height: 628px;
	margin: 0 auto;
}


#fanfunHeader .intro{
	position: absolute;
	top: 410px;
	left: 250px;
	text-align: center;
	line-height: 1.8;
}

.colorFont{
	color: #ff0659;
	font-weight: bold;
}

.smallFont{
	font-size: 12px;
}


#fanfunInner{
	background-color: #ffffff;
	border: 6px solid #f41d8a;
	width: auto;
}

.sectionNav{
	width: 918px;
	margin: 40px auto;
	position: relative;
}

.sectionNavTtl{
}

.sectionNav li{
	float: left;
}
.sectionNav ul{
	width: 840px;
	top: 187px;
	left: 42px;
	position: absolute;
}

.sectionNav li{
	float: left;
	width: 160px;
	float: left;
	margin: 0 10px 10px 0;
}

.sectionNav li:nth-child(5n){
	margin: 0 0 10px 0;
}



/************  section style     *****************/
.sectionTtl{
	margin: 0 auto 50px;
}

.sectionStyle{
	clear: both;
	margin: 0 auto 70px;
}


.sectionInner{
	width: 890px;
	margin: 0 auto;
}

/************  rank top*****************/

.rankingTop{
	margin: 0 auto 20px;
}

.no_1{
	background: url(../img/bg_no1.jpg) no-repeat left top;
	width: 401px;
	height: 533px;
	padding: 14px 10px;
	float: left;
	overflow: hidden;
}

.no_1 a{
	display: block;
}

.no_1 .imgBox{
	height: 533px;
	position: relative;
	overflow: hidden;
}

.imgBox{
	position: relative;
	overflow: hidden;
}

.imgBox img{
	width: 100%;
}


.rankingTopList{
	float: right;
	width: 444px;
}

.rankingTopList li{
	width: 203px;
	height: 271px;
	overflow: hidden;
	border: 3px solid #ffbfd4;
	border-radius: 2px;
	float: left;
	margin: 0 24px 8px 0;
}

.rankingTopList li:nth-child(even){
	margin: 0 0 8px 0;
}



/************  rankingMiddleList *****************/

.rankingMiddleList{
	margin: 0 auto 15px;
}

.rankingMiddleList li img{
	max-width: 100%;
}

.rankingMiddleList li{
	float: left;
	width: 164px;
	height: 219px;
	overflow: hidden;
	margin: 0 15px 0 0;
	font-size: 12px;
}

.rankingMiddleList li:last-child{
	margin: 0 ;
}

/************  rankingBottomList *****************/

.rankingBottomList li{
	background-color: #fff9b5;
	width: 165px;
	height: 93px;
	overflow: hidden;
	float: left;
	margin: 0 13px 13px 0;
	font-size: 12px;
}

.rankingBottomList li:last-child{
	margin: 0 0 13px 0;
}

.rankingBottomList li a{
	color: #000000;
}

.rankingBottomList li .imgBox{
	width: 70px;
	float: left;
}

.rankingBottomList li .imgBox img{
	width: 100%;
}

.profileBox{
	width: 85px;
	padding: 5px;
	float: left;
	text-align: center;
}

.profileBox .fontColor{
	font-weight: bolder;
	color: #ff1664;
}


/************  caption     *****************/

.caption {
	background: rgba(140, 122, 128, 0.8);
	color:#ffffff;
	height: 100%;
	left: 0;
	opacity: 1;
	position: absolute;
	bottom: -89%;
	transition: all 0.3s ease 0s;
	-webkit-transition: .3s;
	width: 100%;
	z-index: 3;
	text-align: center;
}


.no_1 .caption {
	width: 373px!important;
	height: 513px!important;
	padding: 10px 14px;
	bottom: -90%;
}

.rankingMiddleList  .caption {
	bottom: -76%;
}


.rankingMiddleList .caption{
	padding: 0;
}


.imgBox:hover .caption{
	bottom: 0;
	left: 0;
	transition: all 0.3s ease 0s;
}



/************  companionNm     *****************/

.companionNm{
	display: block;
	text-align: center;
	font-weight: bold;
	padding: 5px 0;
	color: #ffbdbd;
}

.no_1 .companionNm{
	color: #fff71d;
	font-size: 20px;
}

.no_2 .companionNm{
	color: #5adeff;
	font-size: 16px;
}

.rankingMiddleList .companionNm{
	color: #ffffff;
}


.nameBox .companionNm{
	float: left;
	padding-left: 5px;
	text-align: left;
	width: 127px;
	font-size: 10px;
}



.size{
	display: block;
	padding-bottom: 10px;
	text-align: center;
}

.iconList{
	text-align: center;
	margin: 0 auto 5px;
	width: 220px;
}

.iconList li{
	float: left;
	margin: 0 5px 0 0;
}


.profileList{
	padding-top: 30px;
}

.profileList dl{
	width: 100%;
	line-height: 40px;
	border-bottom: 1px solid #ffffff;
}

.profileList dl:first-child{
	border-top: 1px solid #ffffff;
}

.profileList dt,.profileList dd{
	float: left;
}

.profileList dt{
	width: 30%;
	text-align: center;
	clear: both;
}

.profileBtn {
    display: block;
    margin: 0 auto;
    padding-top: 10px;
    text-align: center;
    width: 96%;
}

.no_1 .profileBtn{
	padding-top: 30px;
}

.itemTxt{
	border-top: 1px solid #ffffff;
	padding-top: 5px;
	display: block;
	clear: both;
	width: 96%;
	margin: 0 auto 5px;
	font-size: 12px;
}

.itemTxt:last-child{
	border-top: none;
}


.rankingMiddleList .itemTxt{
	width: 96%;
	margin: 0 auto;

}


.bolder{
	font-weight: bold;
}


.nameBox{
	height: 50px;
}

.rank{
	background-color: #b567da;
	text-align: center;
	width: 32px;
	font-size: 16px;
	float: left;
	padding:12px 0;
}




/************  section 1     *****************/