<section id="productBox">
	<div class="bg"<?# productStyle ?>></div>
	<div class="info">
		<h2 class="title"><?# indexPTitle ?></h2>
		<div class="more"<?# indexAboutLinkStyle ?>><a href="<?# indexPMLink ?>" title="<?# indexPMLinkTitle ?>"><font><?# indexPMLinkTitle ?></font><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.99 15.97" class="arrow"><path d="M26.38 6.45h-.01L19.6 0l-1.61 1.53 5.73 5.46H0v2h23.71l-5.72 5.45 1.61 1.53 8.39-7.98z"></path></svg></a></div>
		<ul>
			<php:repeater id="listP">
			<template>
			<li>
				<a href="<?# link ?>" title="<?# ProductName ?>"></a>
				<div class="img"><img src="<?# IconImage ?>" alt="<?# ProductName ?>" /></div>
				<div class="info">
					<div class="price"<?# sellStyle ?>><font<?# priceStyle ?>>特價 <?# Price ?></font><font class="old"<?# oldPriceStyle ?>>原價 <?# OldPrice ?></font></div>
					<h3 class="text-clamp"><?# ProductName ?></h3>
					<article class="text-clamp"><?# Introduction ?></article>
				</div>
			</li>
			</template>
			</php:repeater>
		</ul>
	</div>
</section>
<script>
	$(function(){
		$('#productBox ul').slick({
			autoplay: true,
			arrows: false,
			infinite: true,
			speed: 300,
			slidesToShow: 3,
			slidesToScroll: 1,
			responsive: [{
				breakpoint: 1025,
				settings: { slidesToShow: 2 }
			},{
				breakpoint: 641,
				settings: { slidesToShow: 1 }
			}]
		});
	});
</script>