.home-page {
	width: 1150px;
	margin: 0 auto;

	.slide-container {
		margin: 10px 0 0;
		img {
			display: block;
		}
	}

	.big-slide {
		position: relative;
		height: 450px;
		overflow: hidden;

		ul {
			position: relative;
			height: 100%;
		}

		&:hover {
			.slide-switch {
				display: block;
			}
		}

		li {
			display: none;
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;

			&:first-child {
				display: block;
			}
		}

		.slide-switch {
			display: none;
			/* @include opacity(0);
			@include transition-property(opacity);
			@include transition-duration(.2s);
			@include transition-timing-function(ease-in); */
			a {
				position: absolute;
				top: 50%;
				margin: -30px 0 0;
				width: 60px;
				height: 60px;
				line-height: 56px;
				text-align: center;
				z-index: 2;
				background: #fff;
				@include opacity(0.55);

				&.prev {
					left: 0;
				}

				&.next {
					right: 0;
				}

				&:hover{
					@include opacity(0.9);
				}
				
				.iconfont {
					font-size: 32px;
					color: #59585a;
				}
			}
		}
	}

	.small-slide {
		margin: 6px 0 0;
		padding: 0 0 0 2px;

		li {
			position: relative;
			float: left;
			margin: 0 0 0 6px;
			width: 138px;
			height: 54px;

			&:first-child {
				margin: 0;
			}

			&.focus {
				a {
					@include opacity(0);
				}
			}

			a {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				background: #000;
				@include opacity(0.3);
			}

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.new-report {
		img {
			display: block;
		}
		.report-list {
			float: left;
			width: 868px;
			li {
				float: left;
				margin: 0 8px 8px 0;
				width: 185px;
				height: 248px;
				overflow: hidden;
				&:first-child {
					margin-right: 7px;
					width: 282px;
					height: 504px;
				}
			}
		}
		
		.last-item {
			float: left;
			width: 282px;
			height: 504px;
			overflow: hidden;
		}
	}

	.img-brand {
		position: relative;
		width: 100%;
		height: 175px;
		overflow: hidden;

		&:hover {
			.img-brand-switch {
				display: block;
			}
		}
		ul {
			width: 1158px;
		}
		li {
			float: left;
			margin: 0 8px 0 0;
			width: 378px;
			height: 175px;
			line-height: 175px;
			overflow: hidden;
			font-size: 0;
			text-align: center; 

			img {
				max-width: 100%;
				max-height: 100%;
				vertical-align: middle;
			}
		}
		.img-brand-switch {
			display: none;
			a {
				position: absolute;
				top: 50%;
				margin: -20px 0 0;
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				z-index: 2;
				background: #fff;
				@include opacity(0.55);

				&.prev {
					left: 0;
				}
				&.next {
					right: 0;
				}
				&:hover {
					@include opacity(0.9);
				}
			}
		}
	}

	.logo-brand {
		ul {
			width: 1158px;
		}
		li {
			float: left;
			margin: 8px 8px 0 0;
			width: 185px;
			height: 86px;
			line-height: 86px;
			font-size: 0;
			text-align: center;
			img {
				max-width: 100%;
				max-height: 100%;
				vertical-align: middle;
			}
		}
		.logo-brand-switch {
			position: relative;
			background: image-url('index/logo-brand-line.png') no-repeat center center;
			line-height: normal;
			.iconfont {
				position: absolute;
				left: 50%;
				font-size: 32px;

				&.prev {
					top: 10px;
					
					margin: 0 0 0 -48px;
				}
				&.next {
					bottom: 12px;
					margin: 0 0 0 20px;
				}
			}
		}
		.brand-more {
			font-size: 16px;
			&:hover {
				text-decoration: underline;
			}
		}
	}

	.floor-header {
	    position: relative;
	    margin: 50px 0 30px;

	    .floor-title {
	        margin: 0 auto;
	        width: 298px;
	        height: 31px;
	        line-height: 31px;
	        border: 1px solid #000;
	        font-size: 16px;
	        text-align: center;
	    }

	    .header-navs {
	        position: absolute;
	        padding: 10px 0;
	        top: 0;
	        right: 0;
	        font-size: 14px;

	        li {
	            float: left;
	            padding: 1px 10px;
	            border-left: 1px solid #ccc;

	            &:first-child {
	                border-left: none;
	            }

	            &:hover {
	                text-decoration: underline;
	            }

	            a {
	                color: #333;
	            }
	        }
	    }
	}

	@media screen and (min-width: 1150px) {
	    .floor-header {
	        margin: 80px 0 40px;

	        .header-navs {
	            li {
	                padding: 1px 15px;
	            }
	        }
	    }
	}
}