<div id="aboutBox" class="workframe">
	<div class="aboutImg" data-aos="fade-right"><a class="photo" href="<?# aboutLink ?>" title="<?# indexAboutLinkT ?>" style="background-image:url(<?# aboutImage ?>);"><img src="/images/33/img-aboutPhoto.png" alt="<?# indexAboutLinkT ?>" /></a></div>
	<div class="info" data-aos="fade-left">
		<h4 class="stitle"><?# indexAboutTitle2 ?></h4>
		<h2 class="title"><?# indexAboutTitle1 ?></h2>
		<p class="text-clamp arts"><?# aboutIntroduction ?></p>
		<p class="more"<?# indexAboutLinkStyle ?>><a href="<?# aboutLink ?>" title="<?# indexAboutLinkT ?>"><span><?# indexAboutLinkT ?></span><i class="fa fa-long-arrow-right"></i></a></p>
		<?# GoogleSearch ?>
	</div>
</div>
<div id="customBox">
	<div class="workframe">
		<div class="listBox row" data-aos="fade-down">
			<h4 class="stitle">Company</h4>
			<ul>
				<php:repeater id="listC">
				<template>
				<li>
					<h3><?# CustomTitle ?></h3>
					<article><?# CustomContent ?></article>
				</li>
				</template>
				</php:repeater>
			</ul>
			<div class="btn">
				<a id="prevBtn" href="javascript:void(0);" title="PREV"><i class="fas fa-long-arrow-alt-left"></i><span>PREV</span></a>
				<a id="nextBtn" href="javascript:void(0);" title="NEXT"><i class="fas fa-long-arrow-alt-right"></i><span>NEXT</span></a>
			</div>
		</div>
		<div class="youtubeBox row" data-aos="fade-up"><?# youtubeHTML ?><img src="/images/33/img-youtubeBg.png" /><font class="playBtn"><i class="fas fa-caret-right"></i></font></div>
	</div>
	<div class="contact"><a href="<?# htLink6 ?>" title="contact us"><font>contact us</font><i class="fas fa-long-arrow-alt-left"></i></a></div>
</div>
<script>
	$(function(){
		$('#customBox .listBox ul').slick({
			dots: false,
			infinite: true,
			speed: 500,
			autoplay: true,
			prevArrow:$("#prevBtn"),
			nextArrow:$("#nextBtn")
		});
	});
</script>