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

.model_header { position:relative; margin:0 auto; width:1080px; }
	.model_header .edit_btn { display:inline-block; position:absolute; top:20px; right:0; padding:5px 20px; font-size:15px; color:#FFF; background-color:#E62019; }
	.model_header #createalbum { top: 70px; right: 105px; z-index: 2;}
	.model_header #createvideo { top: 70px; right: 0; z-index: 2;}
		.model_header .category .item_box { text-align:center; }
			.model_header .category .item_box .item { display:inline-block; padding:18px 35px 16px 35px; font-size:16px; color:#7C7E80; cursor:pointer; }
			.model_header .category .item_box .item.current { border-bottom:2px solid #E62019; color:#E62019; }
	.model_header .tool { position:relative; margin:16px 0 22px 0; text-align:center; }
		.model_header .tool .search_back { position:absolute; top:5px; left:0; }
			.model_header .tool .search_back a { font-size:16px; color:#E62019; }
			.model_header .tool .search_back img { margin-right:15px; vertical-align:middle; }
		.model_header .tool .mode { display:inline-block; margin:5px 55px 0 0; width:108px; vertical-align:middle; text-align:right; }
			.model_header .tool .mode .rank_link { margin-right:10px; }
			.model_header .tool .mode .divider { display:inline-block; margin-right:10px; width:1px; height:19px; background-image:url('../../image/model/template/divider.png'); background-position:center; background-size:100%; background-repeat:no-repeat; }
			.model_header .tool .mode .vote_link {}
		.model_header .tool .search_box { position:relative; display:inline-block; vertical-align:middle; }
			.model_header .tool .search_box input { padding:0 5px; width:440px; height:30px; font-size:12px; }
			.model_header .tool .search_box .search_icon { position:absolute; top:9px; right:9px; cursor:pointer; }
		.model_header .tool .order { display:inline-block; position:relative; margin:2px 0 0 55px; width:108px; vertical-align:middle; cursor:pointer; }
			.model_header .tool .order img { margin:0 4px; vertical-align:middle; }
			.model_header .tool .order .sort { border:1px solid #B4B4B4; padding:5px; font-size:12px; color:#B4B4B4; }
			.model_header .tool .order .other { display:none; position:absolute; bottom:-29px; left:0; right:0; border:1px solid #B4B4B4; border-top:0; padding:5px; }
				.model_header .tool .order .other > span { margin-left:10px; font-size:12px; color:#B4B4B4; }

.loader {
	width: 100%;
	position: relative;
	
}
.loading-dots {
	font-size: 72px;
	text-align: center;
	margin-top: -40px;
}

@keyframes blink {
		/**
			* At the start of the animation the dot
			* has an opacity of .2
			*/
		0% {
			opacity: .2;
		}
		/**
			* At 20% the dot is fully visible and
			* then fades out slowly
			*/
		20% {
			opacity: 1;
		}
		/**
			* Until it reaches an opacity of .2 and
			* the animation can start again
			*/
		100% {
			opacity: .2;
		}
}

.loading-dots span {
		/**
			* Use the blink animation, which is defined above
			*/
		animation-name: blink;
		/**
			* The animation should take 1.4 seconds
			*/
		animation-duration: 0.5s;
		/**
			* It will repeat itself forever
			*/
		animation-iteration-count: infinite;
		/**
			* This makes sure that the starting style (opacity: .2)
			* of the animation is applied before the animation starts.
			* Otherwise we would see a short flash or would have
			* to set the default styling of the dots to the same
			* as the animation. Same applies for the ending styles.
			*/
		animation-fill-mode: both;
}

.loading-dots span:nth-child(2) {
		/**
			* Starts the animation of the third dot
			* with a delay of .2s, otherwise all dots
			* would animate at the same time
			*/
		animation-delay: .1s;
}

.loading-dots span:nth-child(3) {
		/**
			* Starts the animation of the third dot
			* with a delay of .4s, otherwise all dots
			* would animate at the same time
			*/
		animation-delay: .2s;
}