html, body {
	width: 100%;
	height: 100%;
	background: url("../images/bg.jpg");
	background-size: cover;
}
.box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.brand_div {
	width:800px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	height: calc(100% - 80px);
	padding: 40px 200px;
}
.brand_div .title{
	font-size:48px;
	color:#111;
	font-weight:bold;
	padding:40px 0 40px 0;
	min-width:590px;
}
.brand_list_wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex: 1;
}
.brand_list:hover{
	cursor:pointer;
}
.brand_list:hover .brand_info{
	background:url(../images/brow.png) no-repeat 92%, -webkit-linear-gradient(271deg, #F1D7BD, #EBCCAD, #ECCDAE, #EBCCAD, #F2D9C0);
	background:url(../images/brow.png) no-repeat 92%, -o-linear-gradient(271deg, #F1D7BD, #EBCCAD, #ECCDAE, #EBCCAD, #F2D9C0);
	background:url(../images/brow.png) no-repeat 92%, linear-gradient(1deg, #F1D7BD, #EBCCAD, #ECCDAE, #EBCCAD, #F2D9C0);
	color:#111;
}
.brand_list {
	display: flex;
	align-items: center;
	justify-content:space-between;
	width: 100%;
	height: 100%;
	max-height:180px;
	border:2px solid #111;
	background:#fff;
	border-radius:3px;
	margin-bottom:40px;
}
.brand_logo {
	width:320px;
	text-align: center;
	height: 100%;
}
.brand_logo img {
	height: 100%;
}
.brand_list .brand_info{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border-left:2px solid #111;
	color:#fff;
	height:100%;
	width:480px;
	display: flex;
	align-items: center;
	background:url(../images/wrow.png) no-repeat 92% #111;
	transition-duration: .6s;
}
.brand_list .brand_info h2{
	font-size: 36px;
	font-weight:normal;
	padding-left:30px;
}
.img_div {
	display: flex;
	flex: 1;
	background: url("../images/img_bg.jpg");
	background-size: cover;
	height: 100%;
}