<link href="/css/40/product.css" rel="stylesheet">
<section class="pos_rel" id="product_area">
	<div class="pos_abs bg_box white"<?# productStyle ?>></div>
	<div class="pos_rel">
		<div class="row col_offset_12 title_box">
            <p class="talign_center txt_primary_5 sub_title"><?# indexPTitle ?></p>
            <h2 class="talign_center txt_secondary_5 area_title">產品</h2>
		</div>
		<div class="list_box">
			<ul class="nowrap_box" id="product_list">
				<php:repeater id="listP">
				<template>
				<li>
					<div class="pos_rel row shadow">
						<img class="bgBox" style="background-image: url(<?# IconImage ?>);" src="/images/40/img-productPhoto.png" alt="<?# ProductName ?>" />
						<div class="pos_abs bg_white_5 nowrap_box info_box">
                            <div class="row col_md_offset_8 d_md_inblock left_box">
                                <h3 class="txt_clamp txt_secondary_5"><?# ProductName ?></h3>
                                <article class="txt_clamp"><?# Introduction ?></article>
                            </div>
                            <div class="row col_md_offset_4 d_md_inblock right_box"<?# sellStyle ?>>
                                <p class="d_md_block d_inblock talign_md_right price"<?# priceStyle ?>><span class="d_inblock txt_primary_5 txt_num">&#36;</span><font class="d_inblock txt_primary_5 txt_num"><?# Price ?></font></p>
                                <p class="d_md_block d_inblock talign_md_right old"<?# oldPriceStyle ?>><span class="d_inblock txt_info_6 txt_num">&#36;</span><font class="d_inblock txt_info_6 txt_num"><?# OldPrice ?></font></p>
                            </div>
						</div>
						<a class="pos_abs d_block atag_item" href="<?# link ?>" title="<?# ProductName ?>"></a>
					</div>
				</li>
				</template>
				</php:repeater>
			</ul>
		</div>
	</div>
</section>
<script>
	$(function(){
		$('#product_area .list_box ul').slick({
			centerPadding: '0',
			autoplay: true,
			dots: false,
			arrows: false,
			infinite: true,
			centerMode: true,
			variableWidth: true,
			speed: 500,
			slidesToScroll: 1,
			responsive: [{
				breakpoint: 451,
				settings: { centerMode: false,variableWidth: false,slidesToShow: 1 }
			}]
		});
	});
</script>