@import '/css/head.spe.css';

.banner { position: relative; overflow: hidden; width: 100%; background: url(/images/our-brands/banner.jpg) center no-repeat; background-size: cover; user-select:none;}
.banner .auto-box {height:650px;position:relative;}
.banner .auto-box > div { position: absolute; top:50%;margin-top:-80px;left:50%;margin-left:20vw; color: #fff; text-shadow: rgba(0,0,0,0.8) 3px 3px 3px; }
.banner .auto-box > div > h6 {font-family: 'Wulkan Display Italic'; font-size: 56px;font-style:italic; line-height: 2em; position: relative; font-weight:400;}

.out-brands { background: #fff; }
.out-brands .items { display: flex; justify-content: space-between; flex-wrap: wrap; }
.out-brands .item { width: 48%; display: flex; justify-content: space-between; margin-top: 1%; margin-bottom: 1%; }
.out-brands .img { overflow: hidden; width: 40%; border-radius:15px;overflow:hidden;}
.out-brands .img img { display: base; width: 100%; }
.out-brands .txt { padding: 0 20px; width: 58%; font-size: 16px; line-height: 1.6em; font-weight: 300; }

@media only screen and (max-width:1640px)
{
	.banner .auto-box {height: 41vw;min-height:240px;}
	.banner .auto-box > div {margin-top:-5vw;margin-left:12.2vw;}
	.banner .auto-box > div > h6 {font-size:3.5vw;}
}

@media only screen and (max-width:1366px) {
	.out-brands .item {display:block;width:32%;}
	.out-brands .img { width:100%; }
	.out-brands .txt { width:100%; padding:0;}
}
@media only screen and (max-width:768px) {
	.out-brands .item {display:block;width:48%;}
	.out-brands .img { width:100%; }
	.out-brands .txt { width:100%; padding:0;}
}

@media only screen and (max-width:560px) {
	.banner .auto-box > div > h6 {font-size:22px;}

	.out-brands {padding-bottom:30px;}
	.out-brands .item {display:block;width:100%;margin:15px 0;}
}