#brandshop {
	height: 120px; padding: 20px;
	background-image: url('/img/br_bg.jpg');
	background-size: cover;
	text-align: center;
	margin: 0 0 20px;
}
#brandshop .container { padding: 8px; background-color: #fff; display: inline-block; }
#brandshop .container dl { height: 74px; padding: 15px 50px 13px; border: 1px solid #aaa; }
#brandshop .container dt { font-size: 40px; font-weight: 600; color: #666; text-align: center; margin-bottom: 6px; }
#brandshop .container dd { font-size: 14px; font-weight: 400; color: #777; text-align: center;}

#brandsearch { display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; padding: 50px 0; margin: 0 0 20px; }
#brandsearch dl.searchbox { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin: 0 0 30px; }
#brandsearch dl.searchbox dt { font-size: 1.5em; font-weight: 700; }
#brandsearch dl.searchbox dd { border: 1px solid #555;  }
#brandsearch dl.searchbox dd input { padding: 10px; width: 320px; box-sizing: border-box; border: 0; outline: 0; }
#brandsearch dl.searchbox dd button { font-size: 2em; color: #555; margin: 0 10px 0 0; }
#brandsearch ul.tab { display: flex; justify-content: start; align-items: center; margin: 0 0 10px; }
#brandsearch ul.tab li { display: flex; justify-content: center; align-items: center; border: 1px solid #aaa; margin-right: -1px; }
#brandsearch ul.tab li a { padding: 5px 10px; }
#brandsearch ul.tab li.active a { background: gray; color: white; }
#brandsearch div.tabcontent ul { display: flex; justify-content: start; align-items: center; gap: 6px; }
#brandsearch div.tabcontent li { padding: 5px; color: white; background: gray; cursor: pointer; }
#brandsearch div.tabcontent li:hover { color: yellow; text-decoration: underline; }
#brandsearch div.tabcontent li.active { background: red; font-weight: 700; }

#brandlist ul { display: flex; justify-content: start; align-items: center; gap: 20px 10px; flex-wrap: wrap; margin: 0 0 30px; }
#brandlist li { width: calc(100% / 7 - 10px); box-sizing: border-box; border: 1px solid #ddd; padding: 10px; display: flex; justify-content: center; align-items: start; }
#brandlist li a {
	display: flex; justify-content: center; align-items: start; flex-direction: column;
	background: url('/img/br_view_bg.png') no-repeat right top;
}
#brandlist li span.logo {
	height: 40px; display: flex; justify-content: center; align-items: center; margin: 0 0 5px;
}
#brandlist li span.logo img { max-width: 128px; height: 40px; }
#brandlist li span.name { display: block; width: 100%; text-align: center; font-weight: 700; }