@extends('style.master')

@section('page_title','首頁')

@section('page_style')
<link href="{{ url('/css/index.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('nav_about_active','active')  <!-- 關於我們 -->
@section('nav_outsourcing_active','')  <!-- 人資委外 -->
@section('nav_news_active','')         <!-- 最新資訊 -->
@section('nav_contact_active','')      <!-- 聯絡我們 -->
@section('nav_group_active','')        <!-- 才庫事業群 -->

@section('page_content')

			<!-- REVOLUTION SLIDER -->
			<div class="slider fullwidthbanner-container roundedcorners">
				<!--
					Navigation Styles:
					
						data-navigationStyle="" theme default navigation
						
						data-navigationStyle="preview1"
						data-navigationStyle="preview2"
						data-navigationStyle="preview3"
						data-navigationStyle="preview4"
						
					Bottom Shadows
						data-shadow="1"
						data-shadow="2"
						data-shadow="3"
						
					Slider Height (do not use on fullscreen mode)
						data-height="300"
						data-height="350"
						data-height="400"
						data-height="450"
						data-height="500"
						data-height="550"
						data-height="600"
						data-height="650"
						data-height="700"
						data-height="750"
						data-height="800"
				-->


				<div class="fullwidthbanner" data-height="500" data-shadow="0" data-navigationStyle="preview2">
					
					<ul class="hide">

						<!-- SLIDE data-transition:{random,fade} -->
						<li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off" data-title="Banner">

							<img src="assets/images/1x1.png" data-lazyload="images/index/banner_1.png" alt="" data-bgposition="center center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="110" />

						</li>

						<!-- SLIDE data-transition:{random,fade} -->
						<li data-transition="random" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off" data-title="Banner">

							<img src="assets/images/1x1.png" data-lazyload="images/index/banner_1.png" alt="" data-bgposition="center center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="110" />

						</li>

					</ul>

					<div class="tp-bannertimer"><!-- progress bar --></div>
				</div>
				
			</div>
			<!-- /REVOLUTION SLIDER -->

			<!-- NEWS Carousel -->
			<section id="news_carousel">
				<div class="container">

					<header class="text-center margin-bottom-40">
						<div class="header2">
							<h2 class="weight-300"><strong>L</strong>atest <strong>N</strong>ews</h2>
						</div>
						<div class="header5">
							<h5>人才智庫．嶄新服務．創新價值．超越三十</h5>
							<div class="bubble">最新資訊</div>
						</div>
					</header>
					<!-- 
						controlls-over		= navigation buttons over the image 
						buttons-autohide 	= navigation buttons visible on mouse hover only
						
						data-plugin-options:
							"singleItem": true
							"autoPlay": true (or ms. eg: 4000)
							"navigation": true
							"pagination": true
							"items": "4"

						owl-carousel item paddings
							.owl-padding-0
							.owl-padding-3
							.owl-padding-6
							.owl-padding-10
							.owl-padding-15
							.owl-padding-20
					-->
					<div class="text-center">
						<div class="owl-carousel owl-padding-10 buttons-autohide controlls-over" data-plugin-options='{"singleItem": false, "items":"4", "autoPlay": 4000, "navigation": true, "pagination": false}'>
							<!-- news item -->	
							<div class="img-hover">
								<a href="#">
									<img class="img-responsive" src="assets/images/demo/451x300/24-min.jpg" alt="">
								</a>

								<ul class="text-left size-14 list-inline list-separator margin-top-20 margin-bottom-0">
									<li>
										<i class="fa fa-link"></i>
										人資專欄
									</li>
								</ul>

								<h3 class="text-left margin-top-0"><a href="blog-single-default.html">一步一腳印的工作說明書建置</a></h3>

								<p class="text-left">
									在上一篇「那不是我的工作」中，提到建置工作說明書在選、訓、留、用等人力資源功能上的運用。我們瞭解到工作說明書在人力資源管理上是重要基石，
								</p>
							</div>
							<!-- /news item -->
							<!-- news item -->	
							<div class="img-hover">
								<a href="#">
									<img class="img-responsive" src="assets/images/demo/451x300/17-min.jpg" alt="">
								</a>

								<ul class="text-left size-14 list-inline list-separator margin-top-20 margin-bottom-0">
									<li>
										<i class="fa fa-link"></i>
										公關．新聞
									</li>
								</ul>

								<h3 class="text-left margin-top-0"><a href="blog-single-default.html">領導部屬的倚天劍與屠龍刀</a></h3>
								
								<p class="text-left">
									在逾七十年的領導研究的浪潮中，轉換型領導與交易型領導所引發的學術討論與實務應用已經持續二十年頭，堪稱是當今的領導顯學。
								</p>
							</div>
							<!-- /news item -->
							<!-- news item -->	
							<div class="img-hover">
								<a href="#">
									<img class="img-responsive" src="assets/images/demo/451x300/30-min.jpg" alt="">
								</a>

								<ul class="text-left size-14 list-inline list-separator margin-top-20 margin-bottom-0">
									<li>
										<i class="fa fa-link"></i>
										人資專欄
									</li>
								</ul>

								<h3 class="text-left margin-top-0"><a href="blog-single-default.html">把握三原則，提升溝通效率！</a></h3>
								
								<p class="text-left">
									在溝通過程中，主要涉及的是傳遞訊息者與接收訊息者。而成功溝通的定義即為：傳遞訊息者有效將溝通內容確實讓接收訊息者正確理解。
								</p>
							</div>
							<!-- /news item -->
							<!-- news item -->	
							<div class="img-hover">
								<a href="#">
									<img class="img-responsive" src="assets/images/demo/451x300/24-min.jpg" alt="">
								</a>

								<ul class="text-left size-14 list-inline list-separator margin-top-20 margin-bottom-0">
									<li>
										<i class="fa fa-link"></i>
										公關新聞
									</li>
								</ul>

								<h3 class="text-left margin-top-0"><a href="blog-single-default.html">一步一腳印的工作說明書建置</a></h3>
								
								<p class="text-left">
									在上一篇「那不是我的工作」中，提到建置工作說明書在選、訓、留、用等人力資源功能上的運用。我們瞭解到工作說明書在人力資源管理上是重要基石，
								</p>
							</div>
							<!-- /news item -->
							<!-- news item -->	
							<div class="img-hover">
								<a href="#">
									<img class="img-responsive" src="assets/images/demo/451x300/17-min.jpg" alt="">
								</a>

								<ul class="text-left size-14 list-inline list-separator margin-top-20 margin-bottom-0">
									<li>
										<i class="fa fa-link"></i>
										公關．新聞
									</li>
								</ul>

								<h3 class="text-left margin-top-0"><a href="blog-single-default.html">領導部屬的倚天劍與屠龍刀</a></h3>
								
								<p class="text-left">
									在逾七十年的領導研究的浪潮中，轉換型領導與交易型領導所引發的學術討論與實務應用已經持續二十年頭，堪稱是當今的領導顯學。
								</p>
							</div>
							<!-- /news item -->
							<!-- news item -->	
							<div class="img-hover">
								<a href="#">
									<img class="img-responsive" src="assets/images/demo/451x300/30-min.jpg" alt="">
								</a>

								<ul class="text-left size-14 list-inline list-separator margin-top-20 margin-bottom-0">
									<li>
										<i class="fa fa-link"></i>
										人資專欄
									</li>
								</ul>

								<h3 class="text-left margin-top-0"><a href="blog-single-default.html">把握三原則，提升溝通效率！</a></h3>
								
								<p class="text-left">
									在溝通過程中，主要涉及的是傳遞訊息者與接收訊息者。而成功溝通的定義即為：傳遞訊息者有效將溝通內容確實讓接收訊息者正確理解。
								</p>
							</div>
							<!-- /news item -->
						</div>
					</div>
				</div>
			</section>
			<!-- /NEWS Carousel -->
			
			<!-- Brand Spirit -->
			<section id="Brand_Spirit">
				<div class="container">
					
					<header class="text-center margin-bottom-40">
						<div class="header2">
							<h2 class="weight-300"><strong>B</strong>rand <strong>S</strong>pirit</h2>
						</div>
						<div class="header5">
							<h5>人才智庫．嶄新服務．創新價值．超越三十</h5>
							<div class="bubble">品牌精神</div>
						</div>
					</header>
				
					<div class="row">

						<div class="col-lg-6" style="clear:left">

							<div class="embed-responsive embed-responsive-16by9 box-shadow-1">
							<iframe width="560" height="315" src="https://www.youtube.com/embed/qN3To2qsG0I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
							</div>

						</div>

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

							<p class="slogan"><strong>核心</strong>競爭力的</p>
							<p class="slogan">價值戰略<strong>夥伴</strong></p>
							<p class="slogan-2">人才智庫．嶄新服務．創新價值．超越三十</p>
							<p class="content">隨著產業升級與市場快速變動，21世紀企業發展方向逐漸聚焦在永續經營與人力資源管理上，當企業面臨高度外部競爭時，策略的擬定與落實，是提升企業價值的重要關鍵，企業必須制訂完善的發展計畫、具備卓越的內部資源整合能力，才得以達成目標。</p>
							<img src="images/index/brand-spirit-1.jpg" alt="">
							<img src="images/index/brand-spirit-2.jpg" alt="">
							<img src="images/index/brand-spirit-3.jpg" alt="">

						</div>

					</div>
					
				</div>
			</section>
			<!-- /Brand_spirit -->

			<!-- HR Seminar -->
			<section id="HR_Seminar">
				<div class="container">
					
					<header class="text-center margin-bottom-40">
						<div class="header2">
							<h2 class="weight-300"><strong>H</strong>R <strong>S</strong>eminar</h2>
						</div>
						<div class="header5">
							<h5>人才智庫．嶄新服務．創新價值．超越三十</h5>
							<div class="bubble">人資研習營</div>
						</div>
					</header>
				
					<div class="row">

						<div class="col-lg-8" style="clear:left">

							<img src="images/index/seminar-1.png" class="img-responsive">

						</div>

						<div class="col-lg-4 Seminar_form">

							<h3>免費獲得講座/專欄資訊</h3>
							
							<!--
								MESSAGES
								
									How it works?
									The form data is posted to php/contact.php where the fields are verified!
									php.contact.php will redirect back here and will add a hash to the end of the URL:
										#alert_success 		= email sent
										#alert_failed		= email not sent - internal server error (404 error or SMTP problem)
										#alert_mandatory	= email not sent - required fields empty
										Hashes are handled by assets/js/contact.js

									Form data: required to be an array. Example:
										contact[email][required]  WHERE: [email] = field name, [required] = only if this field is required (PHP will check this)
										Also, add `required` to input fields if is a mandatory field. 
										Example: <input required type="email" value="" class="form-control" name="contact[email][required]">

									PLEASE NOTE: IF YOU WANT TO ADD OR REMOVE FIELDS (EXCEPT CAPTCHA), JUST EDIT THE HTML CODE, NO NEED TO EDIT php/contact.php or javascript
												ALL FIELDS ARE DETECTED DINAMICALY BY THE PHP

									WARNING! Do not change the `email` and `name`!
												contact[name][required] 	- should stay as it is because PHP is using it for AddReplyTo (phpmailer)
												contact[email][required] 	- should stay as it is because PHP is using it for AddReplyTo (phpmailer)
							-->

							<!-- Alert Success -->
							<div id="alert_success" class="alert alert-success margin-bottom-30">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<strong>Thank You!</strong> Your message successfully sent!
							</div>
							<!-- /Alert Success -->

							<!-- Alert Failed -->
							<div id="alert_failed" class="alert alert-danger margin-bottom-30">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<strong>[SMTP] Error!</strong> Internal server error!
							</div>
							<!-- /Alert Failed -->

							<!-- Alert Mandatory -->
							<div id="alert_mandatory" class="alert alert-danger margin-bottom-30">
								<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
								<strong>Sorry!</strong> You need to complete all mandatory (*) fields!
							</div>
							<!-- /Alert Mandatory -->

							<form action="php/contact.php" method="post" enctype="multipart/form-data">
								<fieldset>
									<input type="hidden" name="action" value="contact_send" />

									<div class="row">
										<div class="form-group">
											<div class="col-md-12">
												<input required type="text" value="" class="form-control" name="contact[name][required]" id="contact:name" placeholder="學員姓名">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="form-group">
											<div class="col-md-4">
												<input type="radio" name="gender" id="boy" value="男" style="display:none"><label for="boy" class="radio_label">男</label>
												<input type="radio" name="gender" id="girl" value="女" style="display:none"><label for="girl" class="radio_label">女</label>
											</div>
											<div class="col-md-8">
												<input required type="text" value="" class="form-control" name="contact[company][required]" id="contact:company" placeholder="企業名稱">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="form-group">
											<div class="col-md-12">
												<input required type="email" value="" class="form-control" name="contact[email][required]" id="contact:email" placeholder="E-mail">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="form-group">
											<div class="col-md-12">
											<input type="text" value="" class="form-control" name="contact[phone]" id="contact:phone" placeholder="手機">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="form-group">
											<div class="col-md-12 center">
												<label class="checkbox">
													<input type="checkbox" name="agreen" id="agreen">
													<i></i> 我已閱讀並同意接受
												</label>
												<br>
												<a href="#">會員服務使用條款</a> |
												<a href="#">個資保護聲明</a>
											</div>
										</div>
									</div>

								</fieldset>

								<div class="row">
									<div class="col-md-12 center">
										<button type="submit" class="btn btn-lg btn-primary">立即報名</button>
									</div>
								</div>
							</form>

						</div>

					</div>
					
				</div>
			</section>
			<!-- /HR Seminar -->

			<!-- Client List -->
			<section id="Client_List">
				<div class="container">

					<header class="text-center margin-bottom-40">
						<div class="header2">
							<h2 class="weight-300"><strong>O</strong>ur <strong>C</strong>lients</h2>
						</div>
						<div class="header5">
							<h5>人才智庫．嶄新服務．創新價值．超越三十</h5>
							<div class="bubble">我們的客戶</div>
						</div>
					</header>

					<div class="text-center">
						<div class="owl-carousel owl-padding-3 buttons-autohide controlls-over" data-plugin-options='{"singleItem": false, "items": "1", "autoPlay": true, "navigation": true, "pagination": false}'>
							<a>
								<p>金融業</p>
								<img class="img-responsive" src="images/index/client-1.png" alt="">
							</a>
							<a>
								<p>服務業</p>
								<img class="img-responsive" src="images/index/client-1.png" alt="">
							</a>
						</div>
					</div>
				</div>
			</section>
			<!-- /Client List -->