<?

if (!isset($_SESSION)) {

session_start();

}


header('Cache-Control: max-age=31536000, must-revalidate');

header("Content-Security-Policy: frame-ancestors 'self' https://*.zerolimit.tw");

// header("Content-Security-Policy: frame-ancestors 'self' https://zerolimit.tw");

header("Content-Security-Policy: frame-ancestors 'self' https://www.googleapis.com");

// header("Content-Security-Policy: default-src 'self' https://*.zerolimit.tw");

// header("Content-Security-Policy: default-src 'self' https://zerolimit.tw");

//header("Content-Security-Policy: default-src 'self'");

//header("Content-Security-Policy: img-src https: 'self'");

header("Content-Security-Policy: frame-src 'self' *.youtube.com");

//header("Content-Security-Policy: script-src 'unsafe-inline'");

// header("Content-Security-Policy-Report-Only: default-src *; img-src https:; frame-src 'none'; script-src 'unsafe-inline'; report-uri https://www.zerolimit.tw");

header("Content-Security-Policy-Report-Only: default-src *; img-src https:; frame-src 'none'; script-src 'unsafe-inline'; report-uri https://*.zerolimit.tw");



error_reporting(E_ALL & ~E_NOTICE);

ini_set('display_errors', 'off');

include('config/KEY_SESSION.php');

include('config/SYS_Function.php');

if (count($_REQUEST) > 0) {

foreach ($_REQUEST as $k => $v) {

$v = str_replace("'", "\'", $v);

$$k = $v;

}

}


if ($_SERVER['HTTP_HOST'] != 'zerolimit.tw') {

$checktogo = "top.location.href='https://www.zerolimit.tw/index.php';";

echo "<script Language='JavaScript'>";

//echo "alert('" . $_SERVER['HTTP_HOST'] . "');";

echo $checktogo;

echo "</script>";

}


$LoginUserID = $_COOKIE["LoginUserID"];

$LoginUserPW = $_COOKIE["LoginUserPW"];

$admin_acc = $LoginUserID; //GetMIDInfo('admin',$LoginUserID,'admin_acc','admin_acc') ;

$admin_pwd = $LoginUserPW; //GetMIDInfo('admin',$LoginUserID,'admin_acc','admin_pwd') ;


$rememberMtel = $_COOKIE["rememberMtel"];

if ($rememberMtel == '1') {

$checked = 'checked="checked"';


$_SESSION["SYS"]["admin_id"] = $_COOKIE["admin_id"];

$_SESSION["SYS"]["LoginUserID"] = $_COOKIE["LoginUserID"];

$_SESSION["SYS"]["UserID"] = $UserID = $_COOKIE["LoginUserID"];

$_SESSION["SYS"]["Chiname"] = $_COOKIE["Chiname"];

$_SESSION["SYS"]["MYLevel"] = ''; //中文名

$_SESSION["SYS"]["Department_Unit"] = $_COOKIE["Department_Unit"];

$_SESSION["SYS"]["admin_power"] = $_COOKIE["admin_power"];

} else {

$checked = '';

}


$_SESSION["local_Logo"] = '/images/lgc2.png';

$_SESSION["local_Logo2"] = '/images/lgI2.png';


$CONNstr1 = "SELECT * FROM Cooperation WHERE showyn = '1' ORDER BY L_Sort DESC ";

$Result1 = mysqli_query($CONSQL, $CONNstr1);

$row1 = $Result1->fetch_array(MYSQLI_ASSOC);

$sn1 = mysqli_affected_rows($CONSQL);


?>


<!DOCTYPE html>

<html class="side-header-overlay-full-screen">


<head>


<!-- Basic -->

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">


<title><?= $_SESSION["System_Title"]; ?></title>


<meta name="keywords" content="ZeroLimit" />

<meta name="description" content="我們是由一群富有經驗與熱忱的團隊, 致力於開發、建置專屬資訊系統,配合公司成長,維護與擴充系統功能。無論是初次建置,或是改善現有資訊相關系統,我們將竭誠為您量身定作最合適的方案。We are a group of experienced and enthusiastic team, dedicated to the development and construction of exclusive information systems, in line with the company's growth, maintenance and expansion of system functions. Whether it is the initial construction or the improvement of the existing information-related system, we will wholeheartedly tailor the most suitable solution for you.">

<meta name="author" content="ZeroLimit.tw">


<!-- Favicon -->

<link rel="shortcut icon" href="<?= $_SESSION["local_Logo"]; ?>" type="image/x-icon" />

<link rel="apple-touch-icon" href="<?= $_SESSION["local_Logo"]; ?>">


<meta name="apple-mobile-web-app-title" content="<?= $_SESSION["System_Title"]; ?>">

<meta name="msapplication-TileImage" content="<?= $_SESSION["local_Logo"]; ?>">


<!-- Mobile Metas -->

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">


<!-- Web Fonts -->

<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700,800%7CMontserrat:300,400,600,700" rel="stylesheet" type="text/css">


<!-- Vendor CSS -->

<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css">

<link rel="stylesheet" href="vendor/animate/animate.min.css">

<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.min.css">

<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">

<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">

<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.min.css">


<!-- Theme CSS -->

<link rel="stylesheet" href="css/theme.css">

<link rel="stylesheet" href="css/theme-elements.css">

<link rel="stylesheet" href="css/theme-blog.css">

<link rel="stylesheet" href="css/theme-shop.css">


<!-- Current Page CSS -->

<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css">

<link rel="stylesheet" href="vendor/rs-plugin/css/layers.css">

<link rel="stylesheet" href="vendor/rs-plugin/css/navigation.css">


<!-- Demo CSS -->

<link rel="stylesheet" href="css/demos/demo-architecture-interior.css">


<!-- Skin CSS -->

<link rel="stylesheet" href="css/skins/skin-architecture-interior.css">


<!-- Theme Custom CSS -->

<link rel="stylesheet" href="css/custom.css">


<!-- Head Libs -->

<script src="vendor/modernizr/modernizr.min.js"></script>


</head>

<style>

.icon-bg:hover::before {

color: #FEA45A;

}


.circle {

border-radius: 50%;

width: 85px;

height: 85px;

background-color: #00d500;

color: #FFFFFF;

}


.circle4 {

border-radius: 5%;

width: 170px;

height: 170px;

background: -webkit-linear-gradient(7deg, rgb(148, 12, 60), rgb(59, 25, 44));

background: linear-gradient(7deg, rgb(148, 12, 60), rgb(59, 25, 44));

color: #FFFFFF;

}


.hideit {

display: none;

}


video {

transform: translateX(-50%) translateY(-50%);

top: 50%;

left: 50%;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

position: absolute;

}

</style>


<script>



</script>


<body data-target="#header" data-spy="scroll" data-offset="100">

<div style="position:fixed;bottom:170px;right:30px;text-align:right;z-index:2;padding:15px 0px;" class="hideit animated bounceOutDown" id="showC">

<div class="circle4" style="text-align:center;padding:5px">

<a href="tel:+886923456758" class="">

電話諮詢 Call Us.<br>

<font style="color:gre#FFFFFF;font-size:1.2em">+886 9 234567 58</font>

</a>

<br>

<a onclick="ShowLine()" style="cursor:pointer">

<div style="width:150px;height:95px;background-color: #FFFFFF;margin:5px;padding:10px;">

<img src="img/LINEAT.jpg" style="width:80px;">

</div>

</a>

</div>

</div>


<div style="position:fixed;bottom:70px;right:30px;text-align:right;z-index:2;padding:15px 0px;cursor:pointer;display:none" id="CButton">

<div class="circle" style="text-align:center;padding:3px 0px 0px 0px;;" onclick="showCFtn()">

<i class=" icon-bg icon-menu-2" style="font-size:0.8em"></i>

</div>

</div>


<div class="body" onclick="CloseCFtn();">

<div class="sticky-wrapper sticky-wrapper-transparent sticky-wrapper-effect-1 sticky-wrapper-effect-1-dark sticky-wrapper-border-bottom" data-plugin-sticky data-plugin-options="{'minWidth': 0, 'stickyStartEffectAt': 100, 'padding': {'top': 0}}">


<div class="sticky-body">




<div style="position:absolute; z-index:-1; width:100%; height:100%;background:url('img/SBG.jpg') left top no-repeat;background-size: cover;opacity: 0.1;">

</div>

<div class="container container-xl">

<div class="row justify-content-between align-items-center">

<div class="col-auto" style="padding-top:0px;">

<div class="py-4" style="padding-top:0px;">

<a href="login.php" style="padding:0px 0px 0px 0px;">

<div style="position:absolute; z-index:2;margin-top:-25px; padding-top:0px;">


<img alt="Porto" width="100" height="100" src="<?=$_SESSION["local_Logo2"]?>">


</div>

</a>

</div>

</div>

<div class="col-auto text-right d-flex align-items-center justify-content-end">

<!-- <a href="tel:+1234567890" class="text-color-light font-weight-bold text-decoration-none d-none d-sm-block mr-2">CALL US NOW! <span class="font-weight-light">1-800-123-4567</span></a>

<ul class="social-icons social-icons-clean social-icons-icon-light d-none d-md-inline-block mx-4">

<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>

<li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li>

<li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>

</ul>-->

<button class="hamburguer-btn hamburguer-btn-light" data-set-active="false">

<span class="hamburguer">

<span></span>

<span></span>

<span></span>

</span>

</button>

</div>

</div>

</div>

</div>

</div>


<header id="header" class="side-header-overlay-full-screen side-header-hide" data-plugin-options="{'stickyEnabled': false}">


<button class="hamburguer-btn hamburguer-btn-light hamburguer-btn-side-header hamburguer-btn-side-header-overlay active" data-set-active="false">

<span class="close">

<span></span>

<span></span>

</span>

</button>


<div class="header-body d-flex h-100">


<div style="position:absolute; z-index:-1; width:100%; height:100%;background:url('img/SBG.jpg') left top no-repeat;background-size: cover;opacity: 0.2;">

</div>

<div class="header-column flex-row flex-lg-column justify-content-center h-100">

<div class="header-container container d-flex h-100">

<div class="header-row header-row-side-header flex-row h-100 pb-5">

<div class="side-header-scrollable scrollable colored-slider h-50" data-plugin-scrollable>

<div class="scrollable-content">

<div class="header-nav header-nav-light-text header-nav-links header-nav-links-side-header header-nav-links-vertical header-nav-links-vertical-expand header-nav-click-to-open align-self-start">

<div class="header-nav-main header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-4 header-nav-main-sub-effect-1">

<nav>

<ul class="nav nav-pills" id="mainNav">

<li class="dropdown">

<a class="dropdown-item active" data-hash data-hash-offset="95" href="#home">Home</a>

</li>

<li class="dropdown">

<a class="dropdown-item" data-hash data-hash-offset="95" href="#whoweare">Who We Are</a>

</li>

<li class="dropdown">

<a class="dropdown-item" data-hash data-hash-offset="95" href="#ourservices">Our Services</a>

</li>


<!-- <li class="dropdown">

<a class="dropdown-item" data-hash data-hash-offset="95" href="#ourprojects">Our Projects</a>

</li>

<li class="dropdown">

<a class="dropdown-item" data-hash data-hash-offset="95" href="#whyhireus">Why Hire Us</a>

</li>

<li class="dropdown">

<a class="dropdown-item" data-hash data-hash-offset="95" href="#ourblog">Our Blog</a>

</li>

<li class="dropdown">

<a class="dropdown-item" data-hash data-hash-offset="95" href="#ourteam">Our Team</a>

</li> -->

<li class="dropdown">

<a class="dropdown-item" data-hash data-hash-offset="95" href="#contactus">Contact Us</a>

</li>

</ul>

</nav>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</header>


<div role="main" class="main">



<div class="slider-container rev_slider_wrapper" style="height: 100vh;" id="home">


<div id="revolutionSlider" class="slider rev_slider" data-version="5.4.8" data-plugin-revolution-slider data-plugin-options="{'sliderLayout': 'fullscreen', 'delay': 9000, 'gridwidth': 1630, 'gridheight': 800, 'responsiveLevels': [4096,1200,992,500], 'parallax': { 'type': 'mouse', 'origo': 'enterpoint', 'speed': 1000, 'levels': [2,3,4,5,6,7,8,9,12,50], 'disable_onmobile': 'on' }}">

<img src="img/SBG.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" style="z-index:2">


<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">

<source src="img/World1992.mp4" type="video/mp4">

</video>


<ul>

<li class="slide-overlay" data-transition="fade">


<div class="tp-caption rs-parallaxlevel-4" data-frames='[{"from":"opacity:0;","speed":300,"to":"opacity:1;","delay":500,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"o:0;","ease":"Power2.easeInOut"}]' data-x="center" data-hoffset="['-150','-150','-150','-150']" data-y="center" data-voffset="['-20','-20','-20','-20']" data-width="['430','430','630','830]" data-height="['330','330','530','730']">

<svg class="custom-square-1 custom-transition-1 custom-mobile-square-thickness" width="100%" height="100%">

<rect width="100%" height="100%" fill="none" stroke-width="40" stroke="#000" />

</svg>

</div>


<h1 class="tp-caption font-weight-bold text-color-light ws-normal rs-parallaxlevel-3" data-frames='[{"from":"opacity:0;y:[50%];","speed":2000,"to":"opacity:1;","delay":800,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"o:0;","ease":"Power2.easeInOut"}]' data-x="center" data-hoffset="['0','0','30','30']" data-y="center" data-voffset="['-55','-55','-85','-120']" data-width="['580','580','780','1000']" data-fontsize="['66','66','86','120']" data-lineheight="['72','72','90','125']">提供專業客制化服務</h1>


<div class="tp-caption font-weight-light text-color-light ls-0 rs-parallaxlevel-4" data-frames='[{"from":"opacity:0;y:[50%]","speed":2000,"to":"opacity:0.7;","delay":1200,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"o:0;","ease":"Power2.easeInOut"}]' data-x="center" data-hoffset="['-181','-181','-152','-181']" data-y="center" data-voffset="['45','45','45','65']" data-fontsize="['16','16','32','45']" data-lineheight="['20','20','40','50']">

為您量身建置、維護、擴充<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

最佳方案.

</div>


<a class="tp-caption d-inline-flex align-items-center btn btn-dark font-weight-bold rounded ls-0 rs-parallaxlevel-2" data-hash data-hash-offset="95" href="#whoweare" data-frames='[{"delay":1600,"speed":2000,"frame":"0","from":"x:-50%;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]' data-x="['center','center','center','center']" data-hoffset="['-5','-5','25','45']" data-y="center" data-voffset="['125','125','210','275']" data-paddingtop="['20','20','30','40']" data-paddingbottom="['20','20','30','40']" data-paddingleft="['68','68','68','95']" data-paddingright="['15','15','15','25']" data-fontsize="['16','16','23','45']" data-lineheight="['20','20','26','50']">WHO WE ARE <i class="fas fa-arrow-right ml-4 pl-3 mr-2 text-4"></i></a>


</li>

<!-- <li class="slide-overlay" data-transition="fade">

<img src="img/demos/architecture-interior/slides/slide-2.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg">


<h2 class="tp-caption text-center font-weight-bold text-color-light ws-normal rs-parallaxlevel-3" data-frames='[{"from":"opacity:0;y:[50%];","speed":2000,"to":"opacity:1;","delay":800,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"o:0;","ease":"Power2.easeInOut"}]' data-x="center" data-hoffset="['0','0','30','30']" data-y="center" data-voffset="['-55','-55','-85','-120']" data-width="['580','580','780','1000']" data-fontsize="['66','66','86','120']" data-lineheight="['72','72','90','125']">The Power of Design to make a Better World</h2>


<a class="tp-caption d-inline-flex align-items-center btn btn-dark font-weight-bold rounded ls-0 rs-parallaxlevel-2" data-hash data-hash-offset="95" href="#contactus" data-frames='[{"delay":1600,"speed":2000,"frame":"0","from":"x:-50%;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]' data-x="['center','center','center','center']" data-hoffset="['-5','-5','25','45']" data-y="center" data-voffset="['125','125','210','275']" data-paddingtop="['20','20','30','40']" data-paddingbottom="['20','20','30','40']" data-paddingleft="['68','68','68','95']" data-paddingright="['15','15','15','25']" data-fontsize="['16','16','23','45']" data-lineheight="['20','20','26','50']">CONTACT US <i class="fas fa-arrow-right ml-4 pl-3 mr-2 text-4"></i></a>


</li> -->


</ul>


</div>

</div>

<div style="float:right;z-index:2">

Video by <a href="https://pixabay.com/users/javlemus-12694742/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=video&amp;utm_content=24216">Javier Lemus</a> from <a href="https://pixabay.com//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=video&amp;utm_content=24216">Pixabay</a>

</div>

<section class="section section-height-5 bg-light border-0 m-0" id="whoweare">

<div class="container container-xl">

<div class="row align-items-center">

<div class="col-lg-5 mb-5 mb-lg-0">

<div class="overflow-hidden">

<span class="d-block text-color-primary custom-font-secondary font-weight-semibold appear-animation" data-appear-animation="maskUp" style="font-size:1.2em">WHO WE ARE</span>

</div>

<div class="overflow-hidden mb-">

<h5 class="text-color-dark font-weight-extra-bold text-10 negative-ls-1 line-height-3 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">

我們是由一群富有經驗與熱忱的團隊<br><br>

</h5>

</div>

<p class="text-4 line-height-9 pr-5 pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">

致力於開發、建置專屬資訊系統,配合公司成長,維護與擴充系統功能。無論是初次建置,或是改善現有資訊相關系統,我們將竭誠為您量身定作最合適的方案。

</p>

<!-- <a href="demo-architecture-interior-who-we-are.html" class="btn btn-dark btn-outline font-weight-extra-bold text-3 px-5 py-3 border-width-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">MORE</a> -->

</div>

<div class="col-lg-7 col-md-12 col-sm-12 col-xs-12">

<div class="row">


<!--

<div class="col-6 col-xl-4 order-1">

<img src="img/demos/architecture-interior/others/others-1.jpg" class="img-fluid appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="3000" alt="" />

</div>

-->




<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 " style="text-align:center;">

<div style="background-color: #45ce42;border-radius: 50%;height:200px;width:200px;padding-top:30px;margin:auto">

<img src=" img/demos/it-services/icons/backup-data-server.svg" class="img-fluid" width="100" alt="" data-icon="" data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary pb-1 mb-1'}" style="opacity: 1;">

<h4 class="font-weight-bold text-6" style="color:#FFFFFF">雲端服務</h4>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 order-1" style="text-align:center;">

<div style="background-color: #45ce42;border-radius: 50%;height:200px;width:200px;padding-top:30px;margin:auto">

<img src="img/demos/it-services/icons/remove-monitor-access.svg" class="img-fluid" width="100" alt="" data-icon="" data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary pb-1 mb-1'}" style="opacity: 1;">

<h4 class="font-weight-bold text-6 mb-3" style="color:#FFFFFF">技術支援</h4>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 order-1" style="text-align:center;">

<div style="background-color: #45ce42;border-radius: 50%;height:200px;width:200px;padding-top:30px;margin:auto">

<img src="img/demos/it-services/icons/password-lock-secure.svg" class="img-fluid" width="100" alt="" data-icon="" data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary pb-1 mb-1'}" style="opacity: 1;">

<h4 class="font-weight-bold text-6 mb-3" style="color:#FFFFFF">資訊安全</h4>

</div>

</div>

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 order-1" style="text-align:center;">

<div style="background-color: #45ce42;border-radius: 50%;height:200px;width:200px;padding-top:30px;margin:auto">

<img src="img/demos/it-services/icons/floppy-disk-memory.svg" class="img-fluid" width="100" alt="" data-icon="" data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary pb-1 mb-1'}" style="opacity: 1;">

<h4 class=" font-weight-bold text-6 mb-3" style="color:#FFFFFF">軟體開發</h4>

</div>

</div>

<!-- <div class="col-12 col-xl-4 order-3 order-xl-2">


<div class="h-100 d-flex align-items-center position-relative px-4 py-4 py-xl-0 mt-4 mt-xl-0">

<svg class="custom-square-1 custom-square-top-right z-index-0" width="80" height="80">

<rect class="lineProgressFrom appear-animation" data-appear-animation="lineProgressTo" data-appear-animation-duration="3s" width="80" height="80" fill="none" stroke-width="13" stroke="#000" />

</svg>

<svg class="custom-square-1 custom-square-1-no-pos z-index-0" width="100%" height="100%">

<rect class="lineProgressAndFillFrom appear-animation" data-appear-animation="lineProgressAndFillTo" data-appear-animation-duration="3s" width="100%" height="100%" fill="none" stroke-width="13" stroke="#000" />

</svg>

<p class="text-color-light line-height-9 text-center text-4 z-index-1 custom-responsive-text-size-1 mb-0 px-2">

各類資訊系統、如企業形像、校園網站、活動報名、串接第三方金流、整合LINE@服務、新聞網站、多層次會員管理系統、商用系統等相關中大型專案</p>

</div>

</div> -->

<!-- <div class="col-6 col-xl-4 order-2 order-xl-3">

<img src="img/demos/architecture-interior/others/others-2.jpg" class="img-fluid appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="3000" alt="" />

</div> -->

</div>

</div>

</div>

</div>

</section>


<section class="section section-height-4 bg-quaternary border-0 m-0 appear-animation" data-appear-animation="fadeIn" id="ourservices" style="padding-top:0px;">

<div style="position:absolute; z-index:-1; width:100%; height:80%;background:url('img/SBG.jpg') left top no-repeat;background-size: cover;opacity: 0.2;">

</div>

<div class="container container-xl" style="padding-top:50px;">

<div class="row">

<div class="col text-center">

<div class="overflow-hidden">

<span class="d-block text-color-primary custom-font-secondary font-weight-semibold appear-animation" data-appear-animation="maskUp">WHAT WE DO</span>

</div>

<div class="overflow-hidden mb-4">

<h2 class="text-color-light font-weight-bold mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">Our Services</h2>

</div>

</div>

</div>

<div class="featured-boxes featured-boxes-style-4 custom-featured-boxes-style-1">

<div class="row mb-2">

<div class="col-md-6 col-xl-3">

<a href="ajax/Home-Project-detail.php" class="text-decoration-none simple-ajax-popup">

<div class="featured-box featured-box-primary featured-box-effect-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">

<div class="box-content" style="min-height:380px;">

<svg class="mb-3" enable-background="new 0 0 24 24" height="88px" version="1.1" viewBox="0 0 24 24" width="88px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g>

<path d="M18,11h-5v5h5V11z M15,15h-1v-3h1V15z M17,15h-1v-3h1V15z" />

<path d="M23,22h-1v-9.2l0.3,0.3c0.4,0.4,1,0.4,1.4,0l0,0c0.4-0.4,0.4-1,0-1.4L12,0L7,5V3c0.6,0,1-0.4,1-1V1c0-0.6-0.4-1-1-1H3 C2.4,0,2,0.4,2,1v1c0,0.6,0.4,1,1,1v6l-2.7,2.7c-0.4,0.4-0.4,1,0,1.4l0,0c0.4,0.4,1,0.4,1.4,0L2,12.8V22H1c-0.6,0-1,0.4-1,1v1h24 v-1C24,22.4,23.6,22,23,22z M12,2.8l8,8V22h-9v-8H6v8H4V10.8L12,2.8z M10,19v3H7v-7h3v3H9v1H10z M4,8V3h2v3L4,8z M3,1h4v1H3V1z" />

</g>

</svg>

<h3 class="font-weight-bold text-color-light text-5 text-capitalize ls-0 my-3">個人或小型專案</h3>

<p class="font-weight-light text-color-light opacity-5 mb-0">形象網站、一頁式活動網站、活動報名網站、串接第三方服務、整合LINE@服務、PWA相關整合開發專案。</p>

</div>

</div>

</a>

</div>


<div class="col-md-6 col-xl-3">

<a href="ajax/Project-detail.php" class="text-decoration-none simple-ajax-popup">

<div class="featured-box featured-box-primary featured-box-effect-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">

<div class="box-content" style="min-height:380px;">

<svg class="mb-3" enable-background="new 0 0 24 24" height="88px" version="1.1" viewBox="0 0 24 24" width="88px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g>

<path d="M23,10h-5V1c0-0.6-0.4-1-1-1H7C6.4,0,6,0.4,6,1v9H1c-0.6,0-1,0.4-1,1v13h24V11C24,10.4,23.6,10,23,10z M2,22V12h4v10H2z M8,22V11V2h8v9v11H8z M18,22V12h4v10H18z" />

<rect height="2" width="1" x="4" y="13" />

<rect height="2" width="1" x="4" y="16" />

<rect height="2" width="1" x="19" y="13" />

<rect height="2" width="1" x="19" y="16" />

<rect height="2" width="1" x="10" y="4" />

<rect height="2" width="1" x="10" y="7" />

<rect height="2" width="1" x="10" y="10" />

<rect height="2" width="1" x="10" y="13" />

<rect height="2" width="1" x="10" y="16" />

<rect height="2" width="1" x="13" y="4" />

<rect height="2" width="1" x="13" y="7" />

<rect height="2" width="1" x="13" y="10" />

<rect height="2" width="1" x="13" y="13" />

<rect height="2" width="1" x="13" y="16" />

</g>

</svg>

<h3 class="font-weight-bold text-color-light text-5 text-capitalize ls-0 my-3">中大型專案</h3>

<p class="font-weight-light text-color-light opacity-5 mb-0">各類資訊系統、多層次會員管理系統、會員獎金計算系統、補教業管理系統、商用系統等。 </p>

</div>

</div>

</a>

</div>



<div class="col-md-6 col-xl-3">

<a href="ajax/Company-detail.php" class="text-decoration-none simple-ajax-popup">

<div class="featured-box featured-box-primary featured-box-effect-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">

<div class="box-content" style="min-height:380px;">

<i class="mb-3 icon-bg icon-menu-1"></i>



<h3 class="font-weight-bold text-color-light text-5 text-capitalize ls-0 my-3">企業管理系統</h3>

<p class="font-weight-light text-color-light opacity-5 mb-0">公司內部管理相關系統、電子簽核、進銷存系統、盤點掃碼系統、出勤管理系統…等各式整合方案。 </p>

</div>

</div>

</a>

</div>


<div class="col-md-6 col-xl-3">

<a href="ajax/Customized-detail.php" class="text-decoration-none simple-ajax-popup">

<div class="featured-box featured-box-primary featured-box-effect-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900">

<div class="box-content" style="min-height:380px;">

<i class="icon-bg icon-menu-2"></i>

<h3 class="font-weight-bold text-color-light text-5 text-capitalize ls-0 my-3">特殊客制化</h3>

<p class="font-weight-light text-color-light opacity-5 mb-0">電力監控整合系統、校園推播系統、各類廣告整合叫號系統、飯店旅館影音系統、影音直播、叫車系統…等。</p>

</div>

</div>

</a>

</div>


</div>

</div>

<div class="row">

<div class="col text-center">

<a data-hash data-hash-offset="95" href="#contactus" class="btn btn-dark btn-outline custom-btn-color-1 font-weight-extra-bold text-color-light text-3 px-5 py-3 border-width-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">CONTACT US</a>

</div>

</div>

</div>

</section>









<section id="demos" class="section section-no-border section-light position-relative z-index-1 pt-0 m-0">

<div class="container">

<div class="row align-items-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250" data-appear-animation-duration="750">

<div class="col-lg-8 offset-lg-2 text-center">

<ul class="list list-unstyled d-flex justify-content-center text-primary font-weight-semibold positive-ls-2 flex-column flex-md-row text-4 mb-4">


</ul>


<p class="d-flex align-items-center justify-content-center font-weight-bold text-color-dark text-8 negative-ls-1 pb-2 mb-5 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="600">

<span class="highlighted-word highlighted-word-animation-1 highlighted-word-animation-1-2 highlighted-word-animation-1-2-dark highlighted-word-animation-1 highlighted-word-animation-1-no-rotate alternative-font-4 font-weight-extra-bold line-height-1 text-9 mr-3">

+

</span>

相關合作作品

</p>

<p class="text-4 mb-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750">

團隊相關合作作品 . 關於企業系統展示部份,關系到保密細則,或後續維運介面已有調整,故以示意方示呈現僅供參考,有任何問題請不吝與我們聯繫與指教。

<!-- <br><br><b>合作配合開發包括:</b>音樂季活動網站、NEC電子報系統、IPTV相關系統、新聞網站、傑晟進銷存系統、陳師傅油品工作坊、消費聯合會、台灣酵力、來客雲端電商平台、黃金海岸會員系統、美特康回購系統、威堡寬帶、金廈聯網、欣奕創意行銷、東蘊生技、電視台直播系統、大學管理學院網站、全富開發、水機銷售管理系統、佰二歲整合行銷、校園無聲廣播系統、台灣發展研究院環境科技研究所、益態水購物平台、托運管理系統、家教媒合管理系統、多層次管理系統…。 -->

</p>

</div>

</div>

</div>

<div class="container-fluid" id="demos">

<!-- <div class="text-center mb-5 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="400" data-appear-animation-duration="750">

<ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center mb-0" data-sort-id="portfolio" data-option-key="filter" data-plugin-options="{'layoutMode': 'masonry', 'filter': '*', 'useHash': false}">

<li class="nav-item active" data-option-value="*"><a class="nav-link custom-nav-link active" href="#">Show All</a></li>

<li class="nav-item" data-option-value=".new"><a class="nav-link custom-nav-link" href="#">NEW</a></li>

<li class="nav-item" data-option-value=".classic"><a class="nav-link custom-nav-link" href="#">Classic</a></li>

<li class="nav-item" data-option-value=".shop"><a class="nav-link custom-nav-link" href="#">Shop</a></li>

<li class="nav-item" data-option-value=".onepage"><a class="nav-link custom-nav-link" href="#">One Page</a></li>

<li class="nav-item" data-option-value=".business"><a class="nav-link custom-nav-link" href="#">Business</a></li>

<li class="nav-item" data-option-value=".blog"><a class="nav-link custom-nav-link" href="#">Blog</a></li>

<li class="nav-item mr-2" data-option-value=".portfolio"><a class="nav-link custom-nav-link" href="#">Portfolio</a></li>

</ul>

</div> -->

<div class="row portfolio-list sort-destination overflow-visible" data-sort-id="portfolio">


<?

if ($sn1 >= 1) {

for ($L = 1; $L <= $sn1; $L++) {

extract($row1);

$PIMGS = $L_Pic;

$PIMGS01str = explode("!#!", $PIMGS);

$PIMGS01strs = explode(";", $PIMGS01str[1]);

$MDimgID = 'MD_Img' . $ii;

$MDstrID = 'MDstrID' . $ii;

$MDurlID = 'MDurlID' . $ii;

$MDtxtID = 'MDtxtID' . $ii;

$$MDimgID = $PIMGS01strs[0]; //圖檔

$$MDstrID = $PIMGS01strs[1]; //標題

$$MDurlID = $PIMGS01strs[2]; //連結

$$MDtxtID = $PIMGS01strs[3]; //說明

$L_BG = 'FFFFFF';

?>

<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item classic">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center" style="background-color:#<?= $L_BG; ?>">

<a href="index-classic.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="<?= $$MDimgID; ?>" style="width:350px;height:259px" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3"><?= $L_Title; ?></h5>

</div>

</div>

</div>


<?

$row1 = $Result1->fetch_array(MYSQLI_ASSOC);

}

}

?>

<!--

<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item classic">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="index-classic-color.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-classic-color.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Classic Color</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item classic">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="index-classic-light.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-classic-light.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Classic Light</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item business">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-construction.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-construction.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Construction</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item business new">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center portfolio-item-new">

<a href="demo-construction-2.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-construction-2.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Construction 2</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item business">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-business-consulting.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-business-consulting.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Business Consulting</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item business new">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center portfolio-item-new">

<a href="demo-business-consulting-2.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-business-consulting-2.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Business Consulting 2</h5>

</div>

</div>

</div>



<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item shop">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-product-landing.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-product-landing.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Product Landing</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item business">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-coffee.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-coffee.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Coffee Shop</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item business">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-sass.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-sass.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">SASS</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item business">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-law-firm.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-law-firm.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Law Firm</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item creative">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-app-landing.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-app-landing.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">App Landing</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item portfolio creative">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-resume.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-resume.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">CV - Portfolio - Resume</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item business">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-hotel.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-hotel.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Hotel</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item business">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-real-estate.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-real-estate.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Real Estate</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item creative business">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-event.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-event.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Event</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item onepage creative business">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-band.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-band.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Band</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item onepage creative">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-one-page-agency.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-one-page-agency.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">One Page Agency</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item portfolio">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-photography.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-photography.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Photography</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item creative">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="demo-wedding.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-wedding.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Wedding</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item classic">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="feature-layout-boxed.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-boxed.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">Boxed</h5>

</div>

</div>

</div>


<div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5 isotope-item classic">

<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" data-appear-animation-duration="750">

<div class="portfolio-item hover-effect-1 text-center">

<a href="feature-layout-rtl.html">

<span class="thumb-info thumb-info-no-zoom thumb-info-no-overlay thumb-info-no-bg">

<span class="thumb-info-wrapper thumb-info-wrapper-demos m-0">

<img src="img/lazy.png" data-plugin-lazyload data-plugin-options="{'threshold': 500, 'effect':'fadeIn'}" data-original="img/previews/preview-rtl.jpg" width="350" height="259" class="img-fluid" alt="">

</span>

</span>

</a>

<h5 class="text-color-dark text-capitalize mt-3">RTL</h5>

</div>

</div>

</div>


-->


</div>

</div>

</section>














<section class="section section-height-4 border-0 m-0" id="contactus">

<div class="container container-xl">

<div class="row mb-5">

<div class="col text-center">


<h2 class="text-color-primary font-weight-bold mb-3">Contact Us<br><span class="text-color-dark ">與我們聯絡</span></h2>


</div>

</div>

<div class="row justify-content-center">

<div class="col-lg-12 col-md-2 col-sm-12 col-xs-12 "></div>

<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 order-2 order-xl-1 mb-4 mb-lg-0">

<div class=" custom-card-style-1 h-100">

<div class="card-body">

<a href="#" class="text-decoration-none">

<img src="<?=$_SESSION["local_Logo"]?>" class="img-fluid pb-2 mt-3 mb-4" width="188" alt="Demo Architecture & Interior Design" />

</a>

<h3 class="text-color-primary font-weight-bold text-transform-none text-8 line-height-1 pr-5 mb-4">

<font style="color:green">燦隆有限公司</font>

</h3>

<ul class="list list-icons list-icons-sm">

<li class="text-color-dark font-weight-light">

<i class="fas fa-angle-right custom-text-color-dark-1"></i> <strong class="font-weight-normal">統一編號:</strong>

<font style="color:green">54238662</font>

</li>


<li class="text-color-dark font-weight-light">

<i class="fas fa-angle-right custom-text-color-dark-1"></i> <strong class="font-weight-normal">Email:</strong>

<a href="mailto:mail@service@zerolimit.tw" class="link-hover-style-1 ml-1" style="color:green">service@zerolimit.tw</a>

</li>

<li class="text-color-dark font-weight-light">

<i class="fas fa-angle-right custom-text-color-dark-1"></i>

<strong class="font-weight-normal">聯絡電話:</strong>

<a href="tel:+886923456758" class="link-hover-style-1 ml-1">

<font style="color:green">+886 9 234567 58</font>

</a>

</li>


</ul>

</div>

</div>

</div>


<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 order-3">

<div class="card custom-card-style-1 h-100">

<div class="card-body ">


<form name="sentToF" id="sentToF">

<input type="hidden" id="RTOKEN" name="RTOKEN" value="<?= $RTOKEN; ?>">

<div class="row">

<div class="col-md-6">

<label for="QA_Name">名字:</label>

<input type="text" class="form-control" name="QA_Name" id="QA_Name" placeholder="請填寫姓名">

</div>

<div class="col-md-6">

<label for="QA_TEL">聯絡電話:</label>

<input type="text" class="form-control" name="QA_TEL" id="QA_TEL" placeholder="請填寫聯絡電話:">

</div>

</div>


<div class="form-group">

<label for="QA_MAIL">Email:</label>

<input name="QA_MAIL" id="QA_MAIL" type="email" class="form-control" placeholder="請填寫Email" required>

</div>

<div class="form-group">

<label for="QA_Content">內容:</label>

<textarea class="form-control" name="QA_Content" id="QA_Content" rows="5" placeholder="請填寫內容資訊"></textarea>

</div>



<div class="form-group">

<label for="Vcode">驗證碼:</label>

<div class="row">


<div id="passwordHelpInline" class="text-muted col-md-3" onclick="reloadcode()">

<img src="Verification.php" id="Vimg" style="border: 1px solid #333;padding:2px 10px; background: #fff;">

<br><a class="button-reload" style="color:#000000;">換一張</a>

</div>

<div class="col-md-6">

<input type="text" id="Vcode" name="Vcode" class="form-control" aria-describedby="passwordHelpInline" placeholder="請填寫左方驗證碼">

</div>


<div class="col-md-3">

<button type="button" class="submitbtn" onclick="SendQA()" style="color: #000; border: 1px solid #000;;display: block;text-align: center;">確認發送</button>

</div>

</div>

</div>

<!-- <div class="form-group" style="padding-top:10px;">

<a href="#" class="btn-style-1 mt-5 submitbtn" onclick="SendQA()" style="color: #000; border: 1px solid #000;padding: 5px 8px;display: block;text-align: center;">發送信息</a>

</div> -->

</form>


</div>

</div>

</div>

</div>

</div>

</section>


</div>




<footer id="footer" class="bg-quaternary border-width-1 custom-border-color-grey py-3 mt-0" style="position:fixed;bottom:0px;width:100%;

background: -webkit-linear-gradient(7deg, rgb(148, 12, 60), rgb(59, 25, 44));

background: linear-gradient(7deg, rgb(148, 12, 60), rgb(59, 25, 44));

">

<div class="container container-xl">

<div class="row justify-content-between">

<div class="col-auto">

<!--

<ul class="social-icons social-icons-clean social-icons-icon-light">

<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>

<li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li>

<li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>

</ul>

-->

</div>

<div class="col-auto text-right">

<p class="text-color-light font-weight-light opacity-8 mb-0">Copyrights © 2022 All Rights Reserved by Zerolimit Ltd.</p>

</div>

</div>

</div>

</footer>


</div>




<!-- Vendor -->

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

<script src="vendor/jquery/jquery.min.js"></script>

<script src="vendor/jquery.appear/jquery.appear.min.js"></script>

<script src="vendor/jquery.easing/jquery.easing.min.js"></script>

<script src="vendor/jquery.cookie/jquery.cookie.min.js"></script>

<script src="vendor/popper/umd/popper.min.js"></script>

<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

<script src="vendor/common/common.min.js"></script>

<script src="vendor/jquery.validation/jquery.validate.min.js"></script>

<script src="vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>

<script src="vendor/jquery.gmap/jquery.gmap.min.js"></script>

<script src="vendor/jquery.lazyload/jquery.lazyload.min.js"></script>

<script src="vendor/isotope/jquery.isotope.min.js"></script>

<script src="vendor/owl.carousel/owl.carousel.min.js"></script>

<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<script src="vendor/vide/jquery.vide.min.js"></script>

<script src="vendor/vivus/vivus.min.js"></script>

<script src="vendor/nanoscroller/jquery.nanoscroller.min.js"></script>


<!-- Theme Base, Components and Settings -->

<script src="js/theme.js"></script>


<!-- Current Page Vendor and Views -->

<script src="vendor/rs-plugin/js/jquery.themepunch.tools.min.js"></script>

<script src="vendor/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>


<!-- Current Page Vendor and Views -->

<script src="js/views/view.contact.js"></script>


<!-- Demo -->

<script src="js/demos/demo-architecture-interior.js"></script>


<!-- Theme Custom -->

<script src="js/custom.js"></script>


<!-- Theme Initialization Files -->

<script src="js/theme.init.js"></script>



<link rel="stylesheet" href="assets/themes/alertify.core.css" />

<link rel="stylesheet" href="assets/themes/alertify.default.css" id="toggleCSS" />

<script src="assets/lib/alertify.min.js"></script>


<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


<!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information.

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-12345678-1', 'auto');

ga('send', 'pageview');

</script>

-->



</body>


</html>


<script>

function SendQA() {

$(".submitbtn").hide();

var QA_TEL = $("#QA_TEL").val();

var QA_MAIL = $("#QA_MAIL").val();

if (QA_TEL == '' && QA_MAIL == '') {

top.alertify.error("請務必留下其中一種聯絡方式,電話或E-MAIL,謝謝。");

} else {

$.ajax({

url: "Msg4US.php",

type: "POST",

dataType: "text",

data: $('#sentToF').serialize(),

success: function(msg) {

var thismsg = msg;

console.log(thismsg);

//alert(thismsg);

switch (thismsg) {

case '1':

top.alertify.alert("完成留言,我們將盡快回覆您。謝謝");

document.getElementById("sentToF").reset();

reloadcode();

//setTimeout("location.reload()", 1500);

$(".submitbtn").fadeIn(1000);

break;

case '2':

top.alertify.error("驗證碼錯誤");

$(".submitbtn").fadeIn(1000);

break;

default:

top.alertify.error("失敗");

$(".submitbtn").fadeIn(1000);

break;

}


}

});

}

}


function reloadcode() {

$("#Vimg").hide();

var dateTime = Date.now();

var t = Math.floor(dateTime / 1000);

$("#Vimg").attr("src", "Verification.php?t=" + t);

$("#Vimg").fadeIn(1000);

}


function showCFtn() {

if ($("#showC").hasClass('bounceOutDown') || $("#showC").hasClass('hideit')) {

$("#showC").removeClass('hideit');

$("#showC").addClass(' bounceInUp');

$("#showC").removeClass('bounceOutDown');

} else {

$("#showC").addClass(' bounceOutDown');

$("#showC").removeClass(' bounceInUp');

//$("#showC").addClass('hideit');

}

}


function CloseCFtn() {

$("#showC").addClass(' bounceOutDown');

$("#showC").removeClass(' bounceInUp');

}




function ShowLine() {

$.fancybox.open({

maxHeight: 550,

width: '400',

href: 'ShowLine.php?RTOKEN=<?= $RTOKEN; ?>',

type: 'iframe',

padding: 2

});

}



window.onload = function() {

if (window.top != window.self) window.top.location = window.self.location;

//alert(window.top+' != '+window.self);

}


window.addEventListener("scroll", function(event) {

var H = $(this).scrollTop();

if (H == 0) {

$("#CButton").fadeOut(1000);

CloseCFtn();

} else {

$("#CButton").fadeIn(2000);

}


});

</script>

<? //}

?>