<?php include '_header.php'; ?>
<style>
.bg-black {
background-color: black;
}
</style>
<div style="z-index: 9;">
<div class="menu-item">
<div style="display: grid; margin-bottom: 80px;" class="for-only-md">
<img class="m-auto" src="assets/img/th1x.png?v=2" width="140">
</div>
<div style="display: grid; margin-top: 25px;" class="item-left">
<img class="m-auto" src="assets/img/th_table.png?v=2" width="140">
<span class="text-white mt-2" style="font-size: 16px;">TOUCH TABLE</span>
<div class="details-left">
New Solution for your presentation
</div>
</div>
<div style="display: grid; margin-top: 25px;" class="item-left">
<img class="m-auto" src="assets/img/edu.png?v=2" width="180">
<span class="text-white mt-2" style="font-size: 16px;">KIOSK</span>
<div class="details-left">
Self Service Solution
</div>
</div>
<div style="display: grid; margin-top: 25px;" class="item-left">
<img class="m-auto" src="assets/img/plugfire.png?v=2" width="180">
<span class="text-white mt-2" style="font-size: 16px;">LED SCREEN</span>
<div class="details-left">
High resolution&brightness for indoor and outdoor
</div>
</div>
<div style="display: grid; margin-top: 25px;" class="item-left">
<img class="m-auto" src="assets/img/hand_cog.png?v=2" width="180">
<span class="text-white mt-2" style="font-size: 16px;">SOFTWARE</span>
<div class="details-left">
Make your business easier
</div>
</div>
</div>
<div class="position-absolute gpbanner">
<img class="imgsoho" src="assets/img/thouchsolution_main.png?v=2">
</div>
<!-- <img class="stv" src="assets/img/stv.jpg" class="w-100"> -->
<div style="max-height: 598px; overflow: hidden;" class="video-height-mb">
<video autoplay muted loop id="myVideo">
<?php $sql_banner = mysqli_query($dbc, "SELECT * FROM video_banner ORDER BY created_at DESC limit 0 , 1");
$rbanner = mysqli_fetch_assoc($sql_banner); ?>
<source src="Admin/files/<?= $rbanner['video'] ?>" type="video/mp4">
</video>
</div>
</div>
<style media="screen">
.owl-dot {
border: 0 !important;
outline: none !important;
}
</style>
<div class="container p-0 mt-2 position-relative ">
<div class="img-trump pb-5 " id="hilight_project" style="z-index: 10; background: black;">
<div class="row m-0 justify-content-center bg-black">
<div class="form-inline w-100 position-relative bg-black" style=" padding: 15px; box-shadow: 0 8px 8px -7px black; ">
<h3 class="vb_font hilight_project text-white text-right mr-auto">HILIGHT PROJECT</h3>
</div>
<div class="col-12 text-right">
<a href="hilight.php" class="badge badge-wnt">More..</a>
</div>
<div class="owl-carousel product-hilight-slide bg-black" style="">
<?php
$i = 0;
$query_product = mysqli_query($dbc, "SELECT * FROM product order by created_at desc limit 17");
while ($result = mysqli_fetch_assoc($query_product)) { ?>
<div class="item product-hilight position-relative">
<a class="a-h" href="hilight_details.php?id=<?= $result['id'] ?>">
<img class="img-bg" src="Admin/uploads/<?= $result['picture'] ?>">
</a>
<p class="mt-3 mb-0" style="color : #e58c30; font-size: 19px; background: none;"><?= $result['product'] ?></p>
<div class="text-white details-item mb-0"><?= $result['details'] ?></div>
</div>
<?php } ?>
</div>
</div>
</div>
<!-- จบ hilight_project -->
<div class="col-lg-12 mt-5 mb-3 text-right bg-black">
<h1 class="vb_font hilight_project text-right text-white mr-auto" style="font-weight: 400;; ">PRODUCT</h1>
</div>
<?php
$sql_product1 = mysqli_query($dbc, "SELECT * FROM product_type WHERE id = 1");
$p1 = mysqli_fetch_assoc($sql_product1);
$sql_product2 = mysqli_query($dbc, "SELECT * FROM product_type WHERE id = 2");
$p2 = mysqli_fetch_assoc($sql_product2);
$sql_product3 = mysqli_query($dbc, "SELECT * FROM product_type WHERE id = 3");
$p3 = mysqli_fetch_assoc($sql_product3);
$sql_product4 = mysqli_query($dbc, "SELECT * FROM product_type WHERE id = 4");
$p4 = mysqli_fetch_assoc($sql_product4);
$sql_product5 = mysqli_query($dbc, "SELECT * FROM product_type WHERE id = 5");
$p5 = mysqli_fetch_assoc($sql_product5);
$sql_product6 = mysqli_query($dbc, "SELECT * FROM product_type WHERE id = 6");
$p6 = mysqli_fetch_assoc($sql_product6);
?>
<div class="MultiCarousel for-only-sm p-0 responsive-min-height" data-items="2,3,5,6" data-slide="2" id="MultiCarousel" data-interval="1000" style="z-index: 2 ;">
<div class="MultiCarousel-inner">
<div class="item">
<a href="product_group.php?group=<?= $p1['id'] ?>&name=<?= $p1['name'] ?>&page=1">
<div style="" class="text-center p-0 mx-0 mb-0 h-100">
<img class="m-auto w-100" src="Admin/uploads/<?= $p1['picture'] ?>">
<p class="vb_font text-pd-sm"><img class="m-auto" src="assets/img/th_table.png?v=2" style="width: 150px;"><?= $p1['name'] ?></p>
</div>
</a>
</div>
<div class="item">
<a href="product_group.php?group=<?= $p2['id'] ?>&name=<?= $p2['name'] ?>&page=1">
<div class="text-center p-0 mx-0 mb-0 h-100">
<img class="m-auto w-100" src="Admin/uploads/<?= $p2['picture'] ?>">
<p class="vb_font text-pd-sm" style="top: -166px !important;"><img class="m-auto" src="assets/img/edu.png?v=2" style="width: 200px; "><?= $p2['name'] ?></p>
</div>
</a>
</div>
<div class="item">
<a href="product_group.php?group=<?= $p3['id'] ?>&name=<?= $p3['name'] ?>&page=1">
<div class="text-center p-0 mx-0 mb-0 h-100">
<img class="m-auto w-100" src="Admin/uploads/<?= $p3['picture'] ?>">
<p class="vb_font text-pd-sm" style="top: -186px !important;"><img class="m-auto" src="assets/img/stand.png?v=2" style="width: 54px; filter: brightness(0) invert(1);">
<?= $p3['name'] ?></p>
</div>
</a>
</div>
<div class="item">
<a href="product_group.php?group=<?= $p4['id'] ?>&name=<?= $p4['name'] ?>&page=1">
<div class="text-center p-0 mx-0 mb-0 h-100">
<img class="m-auto w-100" src="Admin/uploads/<?= $p4['picture'] ?>">
<p class="vb_font text-pd-sm" style="top: -164px !important;"><img class="m-auto" src="assets/img/media_player.png?v=2" style="width: 80px; "><?= $p4['name'] ?></p>
</div>
</a>
</div>
<div class="item">
<a href="product_group.php?group=<?= $p5['id'] ?>&name=<?= $p5['name'] ?>&page=1">
<div class="text-center p-0 mx-0 mb-0 h-100">
<img class="m-auto w-100" src="Admin/uploads/<?= $p5['picture'] ?>">
<p class="vb_font text-pd-sm" style="top: -164px !important;"><img class="m-auto" src="assets/img/edu_atm.png?v=3" style="width: 80px; "><?= $p5['name'] ?></p>
</div>
</a>
</div>
<div class="item">
<a href="product_group.php?group=<?= $p6['id'] ?>&name=<?= $p6['name'] ?>&page=1">
<div class="text-center p-0 mx-0 mb-0">
<img class="m-auto w-100" src="Admin/uploads/<?= $p6['picture'] ?>">
<p class="vb_font text-pd-sm" style="top: -164px !important;"><img class="m-auto" src="assets/img/plugfire.png?v=2" style="width: 190px; "><?= $p6['name'] ?></p>
</div>
</a>
</div>
</div>
<button class="leftLst product-leftLst" style="z-index: 1;"><img src="assets/img/arrow-left.png"></button>
<button class="rightLst product-rightLst" style="z-index: 1;"><img src="assets/img/arrow-right.png"></button>
</div>
<style>
.where_1 {
background: url('Admin/uploads/<?= $p1['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.where_2 {
background: url('Admin/uploads/<?= $p2['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.where_3 {
background: url('Admin/uploads/<?= $p3['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.where_4 {
background: url('Admin/uploads/<?= $p4['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.where_5 {
background: url('Admin/uploads/<?= $p5['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.where_6 {
background: url('Admin/uploads/<?= $p6['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#client a:hover {
text-decoration: none;
}
.x1 {}
.x1::after {
content: "";
position: absolute;
width: 300px;
height: 430px;
background-image: url('Admin/uploads/<?= $p1['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
top: -65px;
z-index: 1;
transform: skewX(9deg);
left: -50px;
}
.x2 {}
.x2::after {
content: "";
position: absolute;
width: 300px;
height: 430px;
background-image: url('Admin/uploads/<?= $p2['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
top: -65px;
z-index: 1;
transform: skewX(9deg);
left: -50px;
}
.x3 {}
.x3::after {
content: "";
position: absolute;
width: 273px;
height: 419px;
background-image: url('Admin/uploads/<?= $p3['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
top: -65px;
z-index: 1;
transform: skewX(9deg);
left: -50px;
}
.x4 {}
.x4::after {
content: "";
position: absolute;
width: 300px;
height: 430px;
background-image: url('Admin/uploads/<?= $p4['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
top: -65px;
z-index: 1;
transform: rotate(-8deg);
left: -50px;
}
.x5 {}
.x5::after {
content: "";
position: absolute;
width: 300px;
height: 430px;
background-image: url('Admin/uploads/<?= $p5['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
top: -65px;
z-index: 1;
transform: skewX(9deg);
left: -50px;
}
.x6 {}
.x6::after {
content: "";
position: absolute;
width: 273px;
height: 419px;
background-image: url('Admin/uploads/<?= $p6['picture'] ?>');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
top: -65px;
z-index: 1;
transform: skewX(9deg);
left: -50px;
}
</style>
<div class="form-inline justify-content-start for-only-md position-relative w-100" style="overflow: hidden;">
<table>
<tbody>
<tr>
<td>
<a href="product_group.php?group=<?= $p1['id'] ?>&name=<?= $p1['name'] ?>&page=1">
<div class="form-inline m-1">
<div style="" onmouseover="hover1()" class="img-tranx1 x1">
<div style="display: grid; margin-top: 145px; margin-left: 29px; z-index: 3; position: relative;" class="text-center">
<img class="m-auto" src="assets/img/th_table.png?v=2" style="width: 170px;">
<span class="text-row vb_font" style=""><?= $p1['name'] ?></span>
</div>
</div>
</div>
</a>
</td>
<td>
<a href="product_group.php?group=<?= $p2['id'] ?>&name=<?= $p2['name'] ?>&page=1">
<div class="form-inline m-1">
<div style="" class=" img-tranx1 x2">
<div style="display: grid; margin-top: 130px; margin-left: -13px; z-index: 3; position: relative;" class="text-center">
<img class="m-auto" src="assets/img/edu.png?v=2" style="width: 220px; ">
<span class="text-row vb_font" style=""><?= $p2['name'] ?></span>
</div>
</div>
</div>
</a>
</td>
<td>
<a href="product_group.php?group=<?= $p3['id'] ?>&name=<?= $p3['name'] ?>&page=1">
<div class="form-inline m-1">
<div class=" img-tranx1 x3">
<div style="display: grid; margin-top: 118px; z-index: 3; position: relative;" class="text-center">
<img class="m-auto" src="assets/img/stand.png?v=2" style="width: 54px; filter: brightness(0) invert(1);">
<span class="text-row vb_font" style=""><?= $p3['name'] ?></span>
</div>
</div>
</div>
</a>
</td>
<td>
<a href="product_group.php?group=<?= $p4['id'] ?>&name=<?= $p4['name'] ?>&page=1">
<div class="form-inline m-1">
<div style="" class=" img-tranx1 x4">
<div style="display: grid; margin-top: 138px; z-index: 3; position: relative;" class="text-center">
<img class="m-auto" src="assets/img/media_player.png?v=2" style="width: 80px; ">
<span class="text-row vb_font" style=""><?= $p4['name'] ?></span>
</div>
</div>
</div>
</a>
</td>
<td>
<a href="product_group.php?group=<?= $p5['id'] ?>&name=<?= $p5['name'] ?>&page=1">
<div class="form-inline m-1">
<div style="" class=" img-tranx1 x5">
<div style="display: grid; margin-top: 138px; z-index: 3; position: relative;" class="text-center">
<img class="m-auto" src="assets/img/edu_atm.png?v=3" style="width: 80px; ">
<span class="text-row vb_font" style=""><?= $p5['name'] ?></span>
</div>
</div>
</div>
</a>
</td>
<td>
<a href="product_group.php?group=<?= $p6['id'] ?>&name=<?= $p6['name'] ?>&page=1">
<div class="form-inline m-1">
<div style="" class=" img-tranx1 x6">
<div style="display: grid; margin-top: 138px; z-index: 3; position: relative;" class="text-center">
<img class="m-auto" src="assets/img/plugfire.png?v=2" style="width: 190px; ">
<span class="text-row vb_font" style=""><?= $p6['name'] ?></span>
</div>
</div>
</div>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- จบ Product -->
<style>
.cl-slide {
width: 130px;
height: 65px;
margin: 16px;
}
.item-logo {
margin: 25px;
}
.carousel-indicators {
width: 100%;
left: 85px;
}
</style>
<div class="col-12 p-0 mt-md-5 position-relative " id="client" style="z-index: 1 ;">
<h1 class=" text-right hilight_project vb_font text-white mr-3 " style="font-weight: 600; ">CLIENT</h1>
</div>
<div class="col-12 p-0 position-relative bg-black">
<div class="row justify-content-center m-0">
<div id="carousel" class="carousel for-only-md slide this-first-slide" data-ride="carousel">
<div class="carousel-inner" style="height: 500px;">
<?php
$item = 1;
$client_c_active = 0;
$client_c_dot = 0;
$iclose = 0;
$query_product = mysqli_query($dbc, "SELECT * FROM logo WHERE type = 1 order by created_at asc");
$cnt = mysqli_num_rows($query_product);
while ($result = mysqli_fetch_assoc($query_product)) {
$iclose++;
if ($item == 1) { ?>
<div class="carousel-item <?= $client_c_active == 0 ? 'active' : '' ?>">
<div class="col-sm-12 col-lg-9 m-auto">
<div class="d-none d-lg-block pt-3">
<?php } ?>
<img src="Admin/uploads/<?= $result['picture'] ?>" class="cl-slide">
<?php if ($item == 20 || $item == $cnt) {
$item = 1;
$client_c_dot++;
?>
</div>
</div>
</div>
<?php
} else {
if ($item >= $cnt) {
$client_c_dot++;
}
$item++;
$client_c_active++;
}
}
if ($iclose == $cnt) { ?>
</div>
<!-- <ol class="carousel-indicators">
<?php
for ($i = 0; $i < $client_c_dot; $i++) { ?>
<li data-target="#carousel" data-slide-to="<?= $i ?>" class="<?= $i == 0 ? 'active' : '' ?>"></li>
<?php } ?>
</ol> -->
</div>
</div>
<?php } ?>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<img src="assets/img/preimg.png?v=<?= time() ?>" width="50">
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<img src="assets/img/nextimg.png?v=<?= time() ?>" width="50">
</a>
</div>
<div class="for-only-sm">
<div class="MultiCarousel d-none logo-slide p-0" data-items="4,3,5,6" data-slide="1" id="MultiCarousel-client" data-interval="1000">
<div class="MultiCarousel-inner">
<?php
$query_product = mysqli_query($dbc, "SELECT * FROM logo WHERE type = 1 order by created_at asc");
while ($result = mysqli_fetch_assoc($query_product)) { ?>
<div class="item mr-0 ml-1">
<img src="Admin/uploads/<?= $result['picture'] ?>" class="m-auto" width="80%">
</div>
<?php } ?>
</div>
<button class="btn btn-primary parter-btn leftLst"><</button>
<button class="btn btn-primary parter-btn rightLst">></button>
</div>
<div class="slide-parter">
<?php
$query_product = mysqli_query($dbc, "SELECT * FROM logo WHERE type = 1 order by created_at desc");
while ($result = mysqli_fetch_assoc($query_product)) { ?>
<div class="item mr-0 ml-1">
<img src="Admin/uploads/<?= $result['picture'] ?>" class="m-auto" width="80%">
</div>
<?php } ?>
</div>
<div class="g-arrow mt-n3">
<button class="slick-arrow prev-slick ">
<img src="assets/img/arrow-left.png" class="w-100">
</button>
<button class="slick-arrow next-slick">
<img src="assets/img/arrow-right.png" class="w-100">
</button>
</div>
</div>
</div>
<!-- ปิด CLIENT -->
<div class="container">
<div class="col-12 mt-5 p-0 position-relative bg-black">
<div class="row justify-content-center m-0">
<h1 class="text-left vb_font hilight_project text-white ml-3 mb-3" style="font-size: 45px; font-weight: 600; margin-right: auto; ">PARTNER</h1>
<div id="carouselBot" class="carousel for-only-md slide" data-ride="carouselBot">
<div class="carousel-inner pb-5">
<?php
$item = 1;
$total_loop = 1;
$partner_c_active = 0;
$partner_dot = 0;
$query_product = mysqli_query($dbc, "SELECT * FROM logo WHERE type = 2 order by created_at asc ");
$cnt = mysqli_num_rows($query_product);
while ($result = mysqli_fetch_assoc($query_product)) {
if ($item == 1) { ?>
<div class="carousel-item <?= $partner_c_active == 0 ? 'active' : '' ?>">
<div class="col-sm-12 col-lg-10 m-auto">
<div class="d-none d-lg-block pt-3" style="height: 210px; text-align: center;">
<?php } ?>
<img src="Admin/uploads/<?= $result['picture'] ?>" class="cl-slide">
<?php if ($item == 10 || $item == $cnt || $total_loop == $cnt) {
?>
</div>
</div>
</div>
<?php
$item = 0;
}
if ($item > $cnt) {
$partner_dot++;
}
$total_loop++;
$item++;
$partner_c_active++;
}
?>
</div>
<ol class="carousel-indicators">
<?php
for ($i = 0; $i < $partner_dot; $i++) { ?>
<li data-target="#carouselBot" data-slide-to="<?= $i ?>" class="<?= $i == 0 ? 'active' : '' ?>"></li>
<?php } ?>
</ol>
<a class="carousel-control-prev" style="bottom: 94px;" href="#carouselBot" role="button" data-slide="prev">
<img src="assets/img/preimg.png?v=<?= time() ?>" width="50">
</a>
<a class="carousel-control-next" style="bottom: 94px;" href="#carouselBot" role="button" data-slide="next">
<img src="assets/img/nextimg.png?v=<?= time() ?>" width="50">
</a>
</div>
</div>
</div>
<div class="for-only-sm">
<div class="slide-parter-2">
<?php
$query_product = mysqli_query($dbc, "SELECT * FROM logo WHERE type = 2 order by created_at desc");
while ($result = mysqli_fetch_assoc($query_product)) { ?>
<div class="item mr-0 ml-1">
<img src="Admin/uploads/<?= $result['picture'] ?>" class="m-auto" width="80%">
</div>
<?php } ?>
</div>
<div class="g-arrow">
<button class="slick-arrow prev-slick-2 ">
<img src="assets/img/arrow-left.png" class="w-100">
</button>
<button class="slick-arrow next-slick-2">
<img src="assets/img/arrow-right.png" class="w-100">
</button>
</div>
</div>
<!-- ปิด partner -->
<div class="about col-12 mt-5 p-0 w-100">
<div class="row m-0">
<div class="col-sm-12 col-lg-6 p-0">
<img src="assets/img/ab1.png?v=4" width="100%">
<div class="row mt-1 ml-0 mr-0">
<div class="col-4 img-ab1 pr-0 pl-0">
<img src="about/3.png" width="98%">
</div>
<div class="col-4 pr-0 pl-0">
<img src="about/2.png" width="98%">
</div>
<div class="col-4 pr-0 pl-0">
<img src="about/1.png" width="98%">
</div>
<div class="col-6 pr-0 mt-1 pl-0">
<img src="about/4.png" width="98%">
</div>
<div class="col-6 pr-0 mt-1 pl-0">
<img src="about/5.png" width="98%">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 about" id="about">
<h1><strong class="vb_font hilight_project text-white" style=" letter-spacing: 8px;">ABOUT</strong></h1>
<span class="" style="color:#cfcfcf;">
Over 24 years, we have engrossed in creating and improving our products, until we are now able to provide you a wide range of screen which are unlimited-size LED Screen, many sizes of Touch Monitors,
Stand and Kiosk Digital and we also have Digital Signage Media Player, Digital Signage Sensor, ELO, and OPS provided. <br><br>
As well, we are developing hardware and software to provide the most a convenient way for your project with modern design which we always make it meet customer’s needs.
<br><br>All of these, we bring together the high technology with specialist staffs to create high-quality works that are always on the standard.
</span><br>
</div>
</div>
</div>
<div id="contact" class="about col-12 ">
<div class=" text-left ">
<h2><strong class="vb_font hilight_project text-white">CONTACT</strong></h2>
</div>
<div class="row m-0">
<div class="col-md-5 pl-0 text-white">
<span>Athens Communication Co.,Ltd<br>48/54-55 Soi Sukhonthasawat 38.<br>Lat Phrao District, Bankok Thailand 10230</span>
<div class="form-inline">
<i class="fa fa-envelope mr-2"></i> : <span>info@thaisoho.com</span>
</div>
<div class="form-inline">
<i class="fa fa-phone-square-alt mr-2"></i> : <span>02-578-3170</span>
</div>
<div class="form-inline">
<i class="fab fa-facebook mr-2"></i> : <span>Athens Communication Co.,Ltd</span>
</div>
<div class="form-inline">
<i class="fab fa-line mr-2"></i><a target="_blank" class="text-white" href="http://line.me/ti/p/thaisoho">Line : thaisoho</a>
</div>
<div class="form-inline">
<i class="fab fa-youtube mr-2"></i><a target="_blank" class="text-white" href="https://www.youtube.com/@athenscommunicationco.ltd.450"> Athens Communication Co., Ltd.</a>
</div>
<form id="contact_form" class="mt-2">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="form-control-contact" id="basic-addon1">Name :</span>
</div>
<input type="text" class="form-control-contact pl-3" placeholder="" name="name">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="form-control-contact" id="basic-addon1">Email :</span>
</div>
<input type="text" class="form-control-contact pl-3" placeholder="" name="email" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="form-control-contact" id="basic-addon1">Subject :</span>
</div>
<input type="text" class="form-control-contact pl-3" placeholder="" name="subject">
</div>
<div class="form-inline">
<div class="input-group mb-3" style="width: 75%;">
<div class="input-group-prepend">
<span class="form-control-contact">Content :</span>
</div>
<input type="text" class="form-control-contact" name="content">
</div>
<button type="submit" class="text-white send sending">SEND</button>
</div>
</form>
</div>
<div class="col-md-7">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3874.0856910578586!2d100.62720921534749!3d13.833892799111668!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29da6aafa5471%3A0x41500110c3f81624!2z4Lia4Lij4Li04Lip4Lix4LiXIOC5gOC4reC5gOC4mOC4meC4quC5jCDguITguK3guKHguKHguLTguKfguJnguLTguYDguITguIrguLHguYjguJkg4LiI4Liz4LiB4Lix4LiU!5e0!3m2!1sth!2sth!4v1613621144789!5m2!1sth!2sth" width="100%" height="350" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</div>
</div> <!-- ปิด Container -->
<?php include '_footer.php'; ?>
<!-- <script src="assets/js/jssor.slider-28.0.0.min.js" type="text/javascript"></script>
<script src="assets/vendors/jquery.min.js"></script>
<script src="assets/owlcarousel/owl.carousel.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
$('#contact_form').on('submit', function(e) {
e.preventDefault();
var formdata = $(this).serialize();
$('.sending').prop('disabled', true);
$.post('Admin/main.php?ACT=send_mail', formdata, function(data) {
if (data.success) {
swal('Massage !!', 'Email sent successfully.', 'success').then(function() {
location.reload()
})
} else {
alert('Sorry, There was a problem sending email.');
}
}, 'json');
});
$(document).ready(function() {
$('.product-sm').slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 2,
// prevArrow: $('.prev-slick'),
// nextArrow: $('.next-slick'),
});
$('.slide-parter').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
prevArrow: $('.prev-slick'),
nextArrow: $('.next-slick'),
});
$('.slide-parter-2').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
prevArrow: $('.prev-slick-2'),
nextArrow: $('.next-slick-2'),
});
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function() {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function() {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function() {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
} else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
} else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
} else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({
'transform': 'translateX(0px)',
'width': itemWidth * itemNumbers
});
$(this).find(itemClass).each(function() {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el + ' ' + rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el + ' ' + leftBtn).addClass("over");
}
} else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el + ' ' + leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el + ' ' + rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).parent().attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
margin: 30,
responsiveClass: true,
responsive: {
0: {
items: 2
},
600: {
items: 2
},
1000: {
items: 4
}
}
});
});
$(".openDetails_1")
.mouseenter(function() {
$('.d1').fadeTo(100, 1);
})
.mouseleave(function() {
$('.d1').fadeTo(100, 0);
});
$(".openDetails_2")
.mouseenter(function() {
$('.d2').fadeTo(100, 1);
})
.mouseleave(function() {
$('.d2').fadeTo(100, 0);
});
$(".openDetails_3")
.mouseenter(function() {
$('.d3').fadeTo(100, 1);
})
.mouseleave(function() {
$('.d3').fadeTo(100, 0);
});
$(".openDetails_4")
.mouseenter(function() {
$('.d4').fadeTo(100, 1);
})
.mouseleave(function() {
$('.d4').fadeTo(100, 0);
});
$(".item-left").hover(function() {
$(this).addClass("item-left-active"); //Add the active class to the area is hovered
}, function() {
$(this).removeClass("item-left-active");
});
$(".x1").hover(function() {
$(".x1 .text-row").addClass("t1-active"); //Add the active class to the area is hovered
}, function() {
$(".x1 .text-row").removeClass("t1-active");
});
$(".x2").hover(function() {
$(".x2 .text-row").addClass("t1-active"); //Add the active class to the area is hovered
}, function() {
$(".x2 .text-row").removeClass("t1-active");
});
$(".x3").hover(function() {
$(".x3 .text-row").addClass("t1-active"); //Add the active class to the area is hovered
}, function() {
$(".x3 .text-row").removeClass("t1-active");
});
$(".x4").hover(function() {
$(".x4 .text-row").addClass("t1-active"); //Add the active class to the area is hovered
}, function() {
$(".x4 .text-row").removeClass("t1-active");
});
$(".x5").hover(function() {
$(".x5 .text-row").addClass("t1-active"); //Add the active class to the area is hovered
}, function() {
$(".x5 .text-row").removeClass("t1-active");
});
$(".x6").hover(function() {
$(".x6 .text-row").addClass("t1-active"); //Add the active class to the area is hovered
}, function() {
$(".x6 .text-row").removeClass("t1-active");
});
</script> -->
</body>
</html>