.productList{ display: flex; flex-direction: column; gap: 28px; }
	.productList .card{ display: flex; gap: 36px; padding: 28px 30px; background: #ffffff; border: 1px solid #eeeeee; }
	.productList .card:hover{ border-color: rgba(0,102,204,.25); box-shadow: 0 8px 20px rgba(0,0,0,0.03); }
	.productList .pic{ width: 300px; flex-shrink: 0; display: block; }
	.productList .pic img{ width: 100%; height: auto; aspect-ratio: 300/185; object-fit: cover; border: 1px solid #eeeeee; background: #fafafa; }
	.productList .info{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
	.productList .name{ margin: 0 0 10px; font-size: 16px; font-weight: 600; color: #104c9a; line-height: 1.5; }
	.productList .desc{ margin: 0 0 0px; font-size: 12px; color: #666666; line-height: 1.9; }
	.productList .btns{ align-self: flex-end; margin-top: auto; }
	.productList .more{ margin-top: auto; margin-left:30px; align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: #0066cc; font-weight: 500; }
	.productList .more:hover{ color: #004ea3; }
	.productList .arrow{ font-size: 12px; }

@media (max-width: 1200px) {
	.bannerBox img{ min-height:42vw; }
}
@media (max-width: 1024px) {
	.main, .breadcrumbWrap{ padding-left: 16px; padding-right: 16px; }
	.productList .card{ flex-direction: column; padding: 22px 18px; gap: 16px; }
	.productList .pic{ width: 100%; max-width: 520px; }
	.productList .more{ align-self: flex-start; }
}
@media (max-width: 640px) {
	.productList .pic{ max-width: 100%; }
}