﻿.model-list { width: 100%; margin-bottom: 15px; overflow: hidden; }
	.model-list ul { padding: 0; margin: 0; list-style: none; width: 100%; }
		.model-list ul li { padding: 0; margin: 0 1% 10px 0; width: 19.2%; height: auto; float: left; }
			.model-list ul li:nth-child(5n) { margin: 0; }
			.model-list ul li a { color: #444; text-decoration: none; display: block; width: 100%; overflow: hidden; position: relative; }
				.model-list ul li a .image { display: block; width: 100%; height: 150px; overflow: hidden; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #808080; box-sizing:border-box;}
					.model-list ul li a .image img { width: 100%; height: auto; display: block; }
				.model-list ul li a .title { display: block; width: 100%; background-color: #025277; color: #fff; z-index: 20; line-height: 1.4em; padding: 10px 0; font-size: 14px; font-weight: bold; text-align: center; }
					.model-list ul li a .title .brandLogo { float:left; }
				.model-list ul li a .title .brandLogo img {width: auto; max-height: 20px; margin: 0 0 0 5px;}
				.model-list ul li a:hover .image { transition-duration: 0.1s; -webkit-transition-duration: 0.1s; opacity: 1.0; filter: alpha(opacity=100); }
				.model-list ul li a .campaign { position: absolute; top: 10px; left: 10px; background: #feb739; color: #fff; font-size: 14px; font-weight: bold; padding: 2.5px 15px; }

@media screen and (max-width: 1000px) {
	.model-list ul li { padding: 0; margin: 0 1% 10px 0; width: 24%; height: auto; float: left; }
		.model-list ul li:nth-child(5n) { margin: 0 1% 10px 0; }
		.model-list ul li a .image { display: block; width: 100%; height: 120px; overflow: hidden; }
}

@media screen and (max-width: 640px) {
	.model-list { width: 94%; padding: 3% 3% 0 3%; }
		.model-list ul { width: 100%; }
			.model-list ul li { margin: 0 1% 3% 0; width: 49%; }
}