/*热点排行 and 热词排行*/

.clearfix {
	overflow: auto; 
	zoom: 1;
}

.clearfix:after {
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}

.hotspots_box,
.hotwords_box {
	width: 50%;
	float: left;
}

.hotspots_box {
	ul {
		margin-top: 30px;

		li {
			margin: 20px 20px 20px 6px;
			white-space: nowrap;

			.num {
				display: inline-block;
				width: 14px;
			    height: 14px;
			    border-radius: 2px;
			    color: #fff;
			    text-align: center;
			    font-size: 12px;
			    background: #608fce;
			    margin-right: 16px;
			    margin-top: 2px;
			    float: left;
			}

			.text {
				color: #333;
				font-size: 14px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				float: left;
				width: 60%;

				&:hover {
					color: #4da5d8;
				}
			}

			.date {
				color: #999;
				font-size: 14px;
				margin-left: 40px;
				float: right;
			}

			.first {
				background: #f86262;
			}

			.second {
				background: #fe8f4b;
			}

			.third {
				background: #4dbac0;
			}


			&.no_data {
				color: #d7d7d7;
				text-align: center;
				padding: 10px 0;
				margin: 100px 0;
				width: 100%;
				cursor: default;
			}
		}
	}
}

.hotwords_box {

	.no_data {
		color: #d7d7d7;
		text-align: center;
		padding: 10px 0;
		margin: 100px 0;
		width: 100%;
		cursor: default;
	}
	
	.hotwords_data_box {
		width: 385px;
		height: 331px;
		margin: 30px auto 0;
		position: relative;
		
		a {
			display: block;
			color: #fff;
			text-align: center;
			border-radius: 50%;

			span {
				display: block;

				&.txt_btom {
					overflow: hidden;
					white-space:nowrap; 
					text-overflow: clip;
					text-overflow: ellipsis;
				}
			}
		}

		.hotwords_rank01 {
			width: 108px;
			height: 108px;
			background: #ea5755;
			position: absolute;
			top: 55px;
			left: 120px;

			span {
				font-size: 16px;
				line-height: 26px;

				&.txt_top {
					margin-top: 28px;
				}
			}

			&:hover {
				background: #e64b49;
			}
		}

		.hotwords_rank02 {
			width: 96px;
			height: 96px;
			background: #f8b551;
			position: absolute;
			top: 6px;
			right: 45px;

			span {
				font-size: 16px;
				line-height: 26px;

				&.txt_top {
					margin-top: 22px;
				}
			}

			&:hover {
				background: #eda73f;
			}
		}

		.hotwords_rank03 {
			width: 88px;
			height: 88px;
			background: #4dc0e4;
			position: absolute;
			top: 132px;
			left: 0px;

			span {
				font-size: 16px;
				line-height: 26px;
				
				&.txt_top {
					margin-top: 18px;
				}
			}

			&:hover {
				background: #37b4db;
			}
		}

		.hotwords_rank04 {
			width: 80px;
			height: 80px;
			background: #516274;
			position: absolute;
			left: 179px;
			bottom: 0px;

			span {
				font-size: 16px;
				line-height: 26px;
				
				&.txt_top {
					margin-top: 14px;
				}
			}

			&:hover {
				background: #46586b;
			}
		}

		.hotwords_rank05 {
			width: 72px;
			height: 72px;
			background: #25a48d;
			position: absolute;
			top: 154px;
			right: 78px;

			span {
				font-size: 14px;
				line-height: 22px;
				
				&.txt_top {
					margin-top: 14px;
				}
			}

			&:hover {
				background: #1f9a83;
			}
		}

		.hotwords_rank06 {
			width: 66px;
			height: 66px;
			background: #ffa675;
			position: absolute;
			top: 3px;
			left: 53px;

			span {
				font-size: 14px;
				line-height: 22px;
				
				&.txt_top {
					margin-top: 11px;
				}
			}

			&:hover {
				background: #f28e56;
			}
		}

		.hotwords_rank07 {
			width: 60px;
			height: 60px;
			background: #2a52a3;
			position: absolute;
			top: 126px;
			right: 0px;

			span {
				font-size: 12px;
				line-height: 20px;
				
				&.txt_top {
					margin-top: 10px;
				}
			}

			&:hover {
				background: #1f4590;
			}
		}

		.hotwords_rank08 {
			width: 54px;
			height: 54px;
			background: #6173e5;
			position: absolute;
			left: 68px;
			bottom: 11px;

			span {
				font-size: 12px;
				line-height: 20px;
				
				&.txt_top {
					margin-top: 7px;
				}
			}

			&:hover {
				background: #4b5fda;
			}
		}

		.hotwords_rank09 {
			width: 48px;
			height: 48px;
			background: #a5b1da;
			position: absolute;
			bottom: 27px;
			right: 37px;

			span {
				font-size: 12px;
				line-height: 16px;
				
				&.txt_top {
					margin-top: 8px;
				}
			}

			&:hover {
				background: #8b99c8;
			}
		}

		.hotwords_rank10 {
			width: 46px;
			height: 46px;
			background: #608fce;
			position: absolute;
			bottom: 89px;
			left: 146px;

			span {
				font-size: 12px;
				line-height: 16px;

				&.txt_top {
					margin-top: 7px;
				}
			}

			&:hover {
				background: #5583c1;
			}
		}
	}

	.hotwords_bg {
		background: url('../../images/comold/hotwords_bg.png') no-repeat center top;
	}
}


@media screen and (min-width:1800px){
	.hotspots_box {
		ul {
			li {
				.text {
					width: 70%;
				}
			}
		}
	}
}