<!DOCTYPE html>
<html lang="zh-TW">

<head>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

    <!--Google Fonts APIS-->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" id="font-awesome-css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css" media="screen">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">

    <!-- Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">

    <link href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float">
    <!-- Scroll-reaveal -->
    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>    
	
    <!-- Google web fonts, https://design.google.com/icons/ -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    <style type="text/css">

/*iphone 6/7/8 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  .navbar-nav .open .dropdown-menu ul li:hover {
    color: #ddd !important; }
  li:hover .dropdown-menu {
    display: none; } }

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: relative;
    float: left;
    width: auto;
    margin-top: 0;
    background-color: #fff;
    border: 0;
    -webkit-box-shadow: none;
    left: 7em;
    box-shadow: 2px 2px 2px 2px #ddd;
    top: 0em; }
  li:hover .dropdown-menu {
    display: none; } }

/* end iphone design */

.bgw {
  background-color: transparent; }

a[id=link-drop]:target ~ #link-drop {
  transform: translateY(-200px); }

/* navbar */
.d-b {
  display: inline-block;
  overflow: hidden; }

.navbar {
  transition: all 0.6s ease-out; }

.navbar-default .navbar-brand {
  color: saddlebrown;
  font-weight: bold; }

.navbar, .navbar-default, .navbar-brand, .dropdown-menu > li > a {
  font-weight: bold; }

.navbar-default .navbar-brand:hover {
  color: brown;
  font-weight: bold; }

.padding{
  background: rgba(255,255,255,0.8)
}

section {
  margin: 0;
  padding: 0;
  position: relative; }

.dropdown-menu {
  background: white;
  position: absolute;
  top: 100%;
  opacity: 1; }

.dropdown-menu li:hover {
  visibility: visible; }

li:hover .dropdown-menu {
  display: block; }

.dropdown-menu > li {
  -ms-font-size: 14px; }

/* Input */
/* 在你輸入文字時，他會有提示效果幫我們貼上空白，而空白會變黃色，因此這可以讓空白從黃色改成白色*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-animation: autofill 0s forwards;
  animation: autofill 0s forwards; }

@keyframes autofill {
  100% {
    background: #fff;
    color: inherit; } }

@-webkit-keyframes autofill {
  100% {
    background: #fff;
    color: inherit; } }

input[type="search"] {
  border-bottom: 1px solid #fff !important;
  border-radius: 15px 15px 0 0 !important; }

/* end Input */
footer {
  background-color: rgba(255, 255, 255, 0.8); }

.back-to-top {
  background: none;
  margin: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 70px;
  height: 70px;
  z-index: 100;
  display: none;
  text-decoration: none;
  color: #fff;
  background-color: transparent; }

.back-to-top i {
  font-size: 60px; }

.back-to-top:hover, .back-to-top:focus {
  color: #ff4a4a; }

#toTop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  display: none; }

#toTop {
  font-family: 標楷體;
  font-size: 15px;
  opacity: 0.9;
  background-color: #ff4a4a !important;
  border: none;
  letter-spacing: 0.09em; }

.btn-default {
  background-color: transparent; }

.btn-default:hover, .btn-default:focus {
  background-color: transparent; }

.move-btn {
  position: relative;
  left: -15em;
  top: 3px;
  height: 32px;
  background-color: transparent !important;
  padding: 4px 10px 1px 12px !important; }

.form-inline-add {
  position: relative;
  left: -30px;
  top: 4.4em;
  float: right; }

.i-search {
  color: #919191;
  top: 3px;
  left: -8px;
  font-size: 16px; }

.search-word {
  position: relative;
  top: -2px;
  padding-left: 2px;
  letter-spacing: 0.08em;
  font-size: 15px; 
}

/* buttons */
.btn-4 {
  position: relative;
  float: right;
  top: 4.6em;
  left: -3.54em;
  z-index: 1000; 
  border-radius: 5px !important;
}

.btn-rounded {
  -webkit-border-radius: 10em;
  border-radius: 10em; }

.waves-effect {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 1; }

/* buttons / end */
div {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out; }

.load {
  opacity: 1; }

/* dung chung */
body {
  background-size: cover !important; }

.intro-text{
  color: #fff;
  border:none;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.d-b {
  display: block;
  overflow: hidden; }

/* End dung chung */
/* Navbar */
/* End Navbar */

/* section */
.padding {
  padding-top: 4em;
  padding-bottom: 3em; }

.b-c {
  background-color: rgba(255, 255, 255, 0.8); }

.no-pb{
  padding: 0 !important;
  border: none !important;
}

.card-p{
  top: 142px;
  right: 56em;
}

.card-p2{
  top: -20em;
  left: 28em;
}

@media only screen
and (min-device-width: 373px)
and (max-device-width: 677px){
  .card-p{
    top: 0;
    right: 0;
  }

  .card-p2{
    top: 0;
    left: 0;
  }
}

.input-width{
   width: 15.3em !important;
   padding-left: 30px !important;
}

/* End Section */

/* search button position */
@media only screen 
and (min-device-width: 375px)
and (max-device-width: 677px){
  .btn-search-position{
    top: 1em;
    left: 17em;
    position: absolute;
  }

  .form-inline-add{
    top: 1.5em;
    left: 3em;
    position: absolute;
  }

  .input-width{
    width: 12.3em !important;
    padding-left: 20px !important;
  }



}

/* search button position */

/* w3 css */
* {
  box-sizing: border-box; }

/* center website */
/* Center website */
.main {
  max-width: 1000px;
  margin: auto; }

h1 {
  font-size: 50px;
  word-break: break-all; }

.row1 {
  margin: 10px -16px; }

/* Add padding BETWEEN each column */
.row1
.row1 >
.column {
  padding: 8px; }

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  display: none;
  /* Hide all elements by default */ }

/* Clear floats after rows */
.row1:after {
  content: "";
  display: table;
  clear: both; }

/* Content */
.content {
  display: block;
  background-color: white;
  padding: 10px; }

/* The "show" class is added to the filtered elements */
.show {
  display: block; }

/* Style the buttons */
.btn-w {
  border: none;
  border-radius:5px;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
  box-shadow: 2px 2px 2px 2px #ddd; }

.btn-w:hover {
  background-color: lightyellow; }

.btn-w.active {
  background-color: #666;
  color: white; }

/* w3 end css */

/* padding and card-block */
.p-3{
  padding: 3px;
  padding-left: 10px;
}

.card-block{
  display: block;
}
/* padding */

/* sign title */

.sign-title{
  position: relative;
  font-weight: 100;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffa100 !important;
  font-size: 2em;
  margin-bottom: 50px;
  text-align: center;
}

.sign-title::before,
.sign-title::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc((80% - 300px) / 2);
  height: 2px;
  background: rgba(255, 255, 255, 0.9); 
  }

.sign-title::before {
left: 0; }

.sing-title::after {
right: 0; }

/* sign title */

/* sign border */
.border-b{
  background-size: cover;
  border: none;
  border-radius: 3px;
  font-size: 18px;
  padding: 15px;
  font-weight: bold;
  background: rgba(0,0,0,.1);
}

.border-b > p{
  color: #5d5d5d;
}

/* sign border */

/* sign input */
.border-transparent{
  border-left: 1px solid black;
  padding-right: 30px;
  background: transparent;
  left: -1em;
  padding-left: 30px;
}

.border-transparent .h4{
  font-size: 30px !important;
  font-weight: bold !important;
}

.border-transparent label{
  font-size: 15px !important;
  font-weight: bold !important;
}

.md-form .form-control{
  padding: 0.3rem 15px .55rem !important;
}

.md-form .prefix{
  top: 1.rem;
}

.md-form{
  margin-bottom: 2.5rem !important;
}

.md-form .prefix~input, .md-form .prefix~textarea{
    width: -webkit-calc(150% - 2.5rem);
    width: calc(150% - 2.5rem) !important;
}

.md-form input[type=date]:focus:not([readonly])+label, 
.md-form input[type=datetime-local]:focus:not([readonly])+label, 
.md-form input[type=email]:focus:not([readonly])+label, 
.md-form input[type=number]:focus:not([readonly])+label, 
.md-form input[type=password]:focus:not([readonly])+label, 
.md-form input[type=search-md]:focus:not([readonly])+label, 
.md-form input[type=search]:focus:not([readonly])+label, 
.md-form input[type=tel]:focus:not([readonly])+label, 
.md-form input[type=text]:focus:not([readonly])+label, 
.md-form input[type=time]:focus:not([readonly])+label, 
.md-form input[type=url]:focus:not([readonly])+label, 
.md-form textarea.md-textarea:focus:not([readonly])+label{
  color: #000 !important;
}
/* sign input */

/* sign button position */
.btn-position{
   top: 0em;
   left: -3em;
   z-index: 1;
}

/* sign button position */

.btn-font{
   letter-spacing: 0.1em;
   font-size: 13px;
}

@media only screen 
and (min-device-width: 360px)
and (max-device-width: 640px)
{

   .btn-search-position{
     top: 4em;
     left: -16px;
   }

   .input-width{
     width: 12.3em !important;
     padding: left 15px !important;
   }   

   .form-inline-add{
     top: 4em;
     left: -30px;
   }

   .padding{
     display: inline-block;
     top: -3em;
     transition:transform 1.5s cubic-bezier(0.2, 0.2, 0.1, 1) 0s, opacity 1.5s cubic-bezier(0.2, 0.2, 0.1, 1) 0s !important;
     padding-top: 8em !important;
   }
}


    </style>

</head>

<body>


    <!--Btn search-->
    <button type="button" class="btn btn-4 btn-danger btn-rounded waves-effect btn-search-position" data-toggle="collapse" data-target="#hidden-search">
        <i class="glyphicon glyphicon-search">
            <span class="search-word">
                搜尋
            </span>
        </i>
    </button>

    <!--Hidden Search-->
    <div id="hidden-search" class="collapse">
        <form class="form-inline form-inline-add" method="GET" action="#" style="z-index: 1">
            <div class="form-group row" id="search">
                <input type="search" name="search" id="search-product" class="form-control input-width" 
                placeholder="搜尋我們的資料與產品">
                <a href="#" class="move-btn">
                    <i class="glyphicon glyphicon-search i-search"></i>
                </a>
            </div>
        </form>
    </div>

    <section class="padding">
        <div class="container bgw">
            <div class="row">
                <div class="col-md-12 col-sm-6 d-b" style="padding: 10px">
                    <div id="myBtnContainer">
                        
                        <button class="btn-w" onclick="filterSelection('image')"> 體驗圖片</button>
                        <button class="btn-w" onclick="filterSelection('video')"> 體驗影片</button>
                        <button class="btn-w" onclick="filterSelection('sign')"> 線上報名</button>
                    </div>
                            
                    <!-- Portfolio Gallery Grid -->
                    <div class="row1">

                        <!--First Colum-->
                        <div class="col-md-4 col-sm-8">
                            <div class="column image">
                                <!--Card-->
                                <div class="card mr-auto">

                                    <!--Card image-->
                                    <div id="card" class="view overlay hm-white-slight">
                                        <button type="button" class="no-pb waves-light waves-button" data-toggle="modal" data-target="#image-1">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/78.jpg" class="img-fluid" alt="">

                                            <a href="#">
                                                <div class="mask"></div>
                                            </a>
                                        </button>
                                    </div>
                                    <!--/.Card image-->

                                    <!--Card content-->
                                    <div class="card-block p-3">
                                        <!--Title-->
                                        <h4 class="card-title">採茶的經驗</h4>
                                        <!--Text-->
                                        <p class="card-text"><b>我們採取綠色好機茶葉</b></p>
                                        <button type="button" class="btn btn-elegant" data-toggle="modal" data-target="#image-1">
                                            看圖片
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/. First column-->

                        <!--Second column-->
                        <div class="col-md-4 col-sm-8">
                            <div class="column image">

                                <!--Card-->
                                <div class="card mr-auto">

                                    <!--Card image-->
                                    <div id="card" class="view overlay hm-white-slight">
                                        <button type="button" class="no-pb waves-light waves-button" data-toggle="modal" data-target="#image-2">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/12.jpg" class="img-fluid" alt="">

                                            <a href="#">
                                                <div class="mask"></div>
                                            </a>
                                        </button>
                                    </div>

                                    <!--Card title-->
                                    <div class="card-block p-3">
                                        <h4 class="card-title">我們的笑容。</h4>
                                        <p class="card-text"><b>愛茶愛世界。</b></p>
                                        <button type="button" class="btn btn-elegant" data-toggle="modal" data-target="#image-2">
                                            看圖片
                                        </button>
                                    </div>
                                </div>
                                <!--/. Card-->
                            </div>
                        </div>
                        <!--/. Second column-->

                        <!--third column-->
                        <div class="col-md-4 col-sm-8">
                            <div class="column image">

                                <!--Card-->
                                <div class="card mr-auto">

                                    <!--Card image-->
                                    <div class="view overlay hm-white-slight">
                                        <button type="button" class="no-pb waves-light waves-button" data-toggle="modal" data-target="#image-3">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/125.jpg" class="img-fluid" alt="">

                                            <a href="#">
                                                <div class="mask"></div>
                                            </a>
                                        </button>
                                    </div>

                                    <!--Card title-->
                                    <div class="card-block p-3">
                                        <h4 class="card-title">體驗茶園</h4>
                                        <b class="card-text"><b>家訪有機茶園真的不簡單。</b></p>
                                        <button type="button" class="btn btn-elegant" data-toggle="modal" data-target="#image-3">
                                            看圖片
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!--/. Third column-->

                        <!--Four column-->
                        <div class="col-md-4 col-sm-8 card-p">
                            <div class="column image">

                                <div class="card mr-auto">

                                    <div class="view overlay hm-white-slight">
                                        <button type="button" class="no-pb waves-light waves-button" data-toggle="modal" data-target="#image-4">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/66.jpg" class="img-fluid" alt="">

                                            <a href="#">
                                                <div class="mask"></div>
                                            </a>
                                        </button>
                                    </div>

                                    <!--Card content-->
                                    <div class="card-block p-3">
                                        <!--Title-->
                                        <h4 class="card-title">燦爛在太陽下，閃光美少女的笑容</h4>
                                        <!--Text-->
                                        <p class="card-text"><b>就是這種感覺，可展出女人的魅力。</b></p>
                                        <button type="button" class="btn btn-elegant" data-toggle="modal" data-target="#image-4">
                                            看圖片
                                        </button>
                                    </div>
                                        
                                </div>
                            </div>
                        </div>
                        <!--./ Four column-->

                        
                        <!--Five column-->
                        <div class="col-md-4 col-sm-8 card-p2">
                            <div class="column image">
                                <div class="card mr-auto">

                                    <!--Card image-->
                                    <div class="view overlay hm-white-slight">
                                        <button type="button" class="no-pb waves-button waves-light" data-toggle="modal" data-target="#image-5">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/147.JPG" class="img-fluid" alt="">
                                        
                                            <a href="#">
                                                <div class="mask"></div>
                                            </a>
                                        </button>
                                    </div>

                                    <div class="card-block p-3">
                                        <h4 class="card-title">甜點</h4>
                                        <p class="card-text"><b>依從葉茶為主而製作出美味白色的甜點</b></p>
                                        <button type="button" class="btn btn-elegant" data-toggle="modal" data-target="#image-5">
                                            看圖片
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--./ five column-->
                        
                        <!--six column-->
                        <div class="col-md-4 col-sm-8 card-p2">
                            <div class="column image">
                                <div class="card mr-auto">

                                    <!--Card image-->
                                    <div class="view overlay hm-white-slight">
                                        <button type="button" class="no-pb waves-light waves-button" data-toggle="modal" data-target="#image-6">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/150.jpg" alt="end-travel" class="img-fluid">
                                        
                                            <a href="#">
                                                <div class="mask"></div>
                                            </a>
                                        </button>
                                    </div>

                                    <!--Card title-->
                                    <div class="card-block p-3">
                                        <h4 class="card-title">最後笑容的時刻</h4>
                                        <b class="card-text"><b>雖然準備結束旅程了，但我們還想再更多體驗不會結束。</b></p>
                                        <button type="button" class="btn btn-elegant" data-toggle="modal" data-target="#image-6">
                                            看圖片
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/. six column-->

                        <!--video column-->

                        <!--First Column-->
                        <div class = "col-md-4 col-sm-8">
                            <div class="column video">
                                <div class="card mr-auto">
                                    
                                    <!--Image video-->
                                    <div class="view overlay hm-white-slight">

                                        <button type="button" class="no-pb waves-light waves-block waves-effect waves-button" data-toggle="modal" data-target="#video1">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/%E5%B0%8F%E7%B6%A0%E8%91%89%E7%A6%AA.jpg" class = "img-fluid">

                                            <a href="#">
                                                <div class="mask"></div>
                                            </a>
                                        </button>
                                    </div>

                                    <!--Title-->
                                    <div class="card-block p-3">
                                        <h4 class="card-title">台灣佳芳有機茶園茶園體驗一</h4>
                                        <button class="btn btn-amber" data-toggle="modal" data-target="#video1" style="font-size: 15px">
                                            點 擊 看 影 片
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/. First column-->

                        <!--Second Column-->
                        <div class = "col-md-4 col-sm-8">
                            <div class="column video">
                                <div class="card mr-auto">
                                    
                                    <!--Image video-->
                                    <div class="view overlay hm-white-slight">

                                        <button type="button" class="no-pb waves-light waves-block waves-effect waves-button" data-toggle="modal" data-target="#video2">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/6.jpg" class = "img-fluid">

                                            <a href="#">
                                                <div class="mask"></div>
                                            </a>
                                        </button>
                                    </div>

                                    <!--Title-->
                                    <div class="card-block p-3">
                                        <h4 class="card-title">台灣佳芳有機茶園茶園體驗二</h4>
                                        <button class="btn btn-amber" data-toggle="modal" data-target="#video2" style="font-size: 15px">
                                            點 擊 看 影 片
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/. Second column-->

                        <!--Third Column-->
                        <div class = "col-md-4 col-sm-8">
                            <div class="column video">
                                <div class="card mr-auto">
                                    
                                    <!--Image video-->
                                    <div class="view overlay hm-white-slight">

                                        <button type="button" class="no-pb waves-light waves-block waves-effect waves-button" data-toggle="modal" data-target="#video3">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/1.jpg" class = "img-fluid">

                                            <a href="#">
                                                <div class="mask"></div>
                                            </a>
                                        </button>
                                    </div>

                                    <!--Title-->
                                    <div class="card-block p-3">
                                        <h4 class="card-title">台灣佳芳有機茶園開放露營</h4>
                                        <button class="btn btn-amber" data-toggle="modal" data-target="#video3" style="font-size: 15px">
                                            點 擊 看 影 片
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/. Second column-->

                        <!--/. video column-->

                        <!--Sign join-->
                        <div class = "col-md-7 col-sm-8">
                            <div class="column sign">
                                <section>
                                    <div class="col-md-10">
                                        <div class="border-b">
                                            <h4 class="sign-title">
                                                家訪有機茶園體驗活動
                                            </h4>

                                            <p> 1. 深度旅遊、採茶體驗、茶園生態管理、喝現打綠茶汁以上體驗活動</p>
                                            <p> 每人費：150 TWD。

                                            <hr>

                                            <p>2. 如要增加翡翠包製作及(翡翠)紅茶蛋捲 各項 DIY 題體驗、單項各加材料費 50 TWD。</p>

                                            <hr>

                                            <p>3. 天然綠茶清潔劑製作。</p>
                                            <p>費用 1 人加 50 元 TWD。</p>

                                            <hr>

                                            <p>15 天預約 10 人以上接受報名</p>
                                            <p>體驗活動時間：全年</p>
                                            <p>第 1 體驗 活動時間 2：00</p>
                                            <p>地 2 體驗 活動時間 1：30</p>

                                            <hr>

                                            <p> 1 + 2 + 3 約 3 到 4小時。
                                        </div>

                                    </div>
                                </section>
                            </div>
                        </div>

                        <!--Input data-->
                        <div class="col-md-5 col-sm-8">
                            <div class="column sign">
                                <div class="border-transparent">
                                    <form class="form-horizontal" action="#" method="get">
                                        <p class="h4 text-center mb-4" style="margin-bottom: 30px">報名體驗</p>

                                        <!--Material input-->
                                        <div class="md-form">
                                            <i class="fa fa-envelope prefix grey-text"></i>
                                            <input type="email" id="email" class="form-control">
                                            <label for="email">請輸入您的電子郵件</label>
                                        </div>

                                        <div class="md-form">
                                            <i class="fa fa-user prefix grey-text"></i>
                                            <input type="text" id="name" class="form-control">
                                            <label for="name">請輸入您的名字</label>
                                        </div>

                                         <div class="md-form">
                                            <i class="fa fa-user prefix grey-text"></i>
                                            <input type="text" id="name" class="form-control">
                                            <label for="name">聯絡人</label>
                                        </div>

                                        <div class="md-form">
                                            <i class="fa fa-user prefix grey-text"></i>
                                            <input type="text" id="sign-num" class="form-control">
                                            <label for="sign-num">請輸入報名人數</label>
                                        </div>

                                        <div class="md-form">
                                            <i class="fa fa-phone prefix grey-text"></i>
                                            <input type="text" id="phone" class="form-control">
                                            <label for="phone">請輸入您的手機號碼</label>
                                        </div>

                                        <div class="md-form">
                                            <i class="fa fa-calendar prefix grey-text"></i>
                                            <input type="text" id="calendar" class="form-control">
                                            <label for="calendar">請輸入報名日期</label>
                                        </div>

                                         <div class="md-form">
                                            <i class="fa fa-comment prefix grey-text" aria-hidden="true"></i>
                                            <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
                                            <label for="message">備註</label>
                                        </div>

                                        <div class="text-center mt-4">
                                            <button class="btn btn-outline-secondary btn-position" type="submit">
                                                送件
                                                <i class="fa fa-paper-plane ml-2"></i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!--./ Sign join-->

                    <!-- END GRID -->
                    </div>
                        
                    <!-- END MAIN -->
                </div>                
            </div>
        </div>
    </section>

    <!--Modal image 1-->
    <div id="image-1" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/close-18dp.png" class="img-fluid">
                    </button>
                </div>

                <div class="modal-body">
                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/78.jpg" class="img-fluid" alt="">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light-green waves-effect waves-light btn-font" data-dismiss="modal">
                        關閉
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--End modal I/1-->

    <!--Modal image 2-->
    <div id="image-2" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/close-18dp.png" class="img-fluid">
                    </button>
                </div>

                <div class="modal-body">
                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/12.jpg" class="img-fluid" alt="">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light-green waves-effect waves-light btn-font" data-dismiss="modal">
                        關閉
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--End modal I/2-->
    
    <!--Modal image 3-->
    <div id="image-3" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/close-18dp.png" class="img-fluid">
                    </button>
                </div>

                <div class="modal-body">
                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/125.jpg" class="img-fluid" alt="">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light-green waves-effect waves-light btn-font" data-dismiss="modal">
                        關閉
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--End modal I/3-->

    <!--Modal image 4-->
    <div id="image-4" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="../img/1x/close-18dp.png" class="img-fluid">
                    </button>
                </div>

                <div class="modal-body">
                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/66.jpg" class="img-fluid" alt="">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light-green waves-effect waves-light btn-font" data-dismiss="modal">
                        關閉
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--End modal I/4-->

    <!--Modal image 5-->
    <div id="image-5" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/close-18dp.png" class="img-fluid">
                    </button>
                </div>

                <div class="modal-body">
                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/147.JPG" class="img-fluid" alt="">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light-green waves-effect waves-light btn-font" data-dismiss="modal">
                        關閉
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--End modal I/5-->

    <!--Modal image 6-->
    <div id="image-6" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/close-18dp.png" class="img-fluid">
                    </button>
                </div>

                <div class="modal-body">
                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/150.jpg" class="img-fluid" alt="">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light-green waves-effect waves-light btn-font" data-dismiss="modal">
                        關閉
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--End modal I/6-->
        
    <!--./Image modal-->

    <!-- Video 1 modal-->
    <div id="video1" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!--modal-content-->
            <div class="modal-content" style="width: 170%; height: 50rem; right: 200px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/close-18dp.png" alt="close">
                    </button>
                    <h4 class="modal-title">台灣佳芳有機茶園茶園體驗一</h4>
                </div>

                <div class="modal-body">
                    <iframe src="https://www.youtube.com/embed/IOD9aaB7RF0" style="width: 70.5em; height: 30em;" frameborder="0" allow="autoplay; encrypted-media"></iframe>
                </div>

                <div class = "modal-footer">

                    <h4 class="modal-title" style="text-align: left;">
                        提醒：點擊影片而暫停，然後關閉影片 - 可按交叉符號在頭上或關閉按鈕在腳下。
                    </h4>

                    <button type="button" class="btn btn-light-green waves-effect waves-light btn-font" data-dismiss="modal" style="margin-left: 38em">
                        關閉
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Video 2 modal-->
    <div id="video2" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!--modal-content-->
            <div class="modal-content" style="width: 170%; height: 50rem; right: 200px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/close-18dp.png" alt="close">
                    </button>
                    <h4 class="modal-title">台灣佳芳有機茶園茶園體驗二</h4>
                </div>

                <div class="modal-body">
                    <iframe src="https://www.youtube.com/embed/aowGYLw1jcA" style="width: 70.5em; height: 30em;" frameborder="0" allow="autoplay; encrypted-media"></iframe>
                </div>

                <div class = "modal-footer">

                    <h4 class="modal-title" style="text-align: left;">
                        提醒：點擊影片而暫停，然後關閉影片 - 可按交叉符號在頭上或關閉按鈕在腳下。
                    </h4>

                    <button type="button" class="btn btn-light-green waves-effect waves-light btn-font" data-dismiss="modal" style="margin-left: 38em">
                        關閉
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Video 3 modal-->
    <div id="video3" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!--modal-content-->
            <div class="modal-content" style="width: 170%; height: 50rem; right: 200px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <img src="http://ecloud.ewang.com.tw/userUpload/images/%E4%BD%B3%E8%8A%B3/close-18dp.png" alt="close">
                    </button>
                    <h4 class="modal-title">台灣佳芳有機茶園開放露營</h4>
                </div>

                <div class="modal-body">
                    <iframe src="https://www.youtube.com/embed/F-GCfmqeSZU" style="width: 70.5em; height: 30em;" frameborder="0" allow="autoplay; encrypted-media"></iframe>
                </div>

                <div class = "modal-footer">

                    <h4 class="modal-title" style="text-align: left;">
                        提醒：點擊影片而暫停，然後關閉影片 - 可按交叉符號在頭上或關閉按鈕在腳下。
                    </h4>

                    <button type="button" class="btn btn-light-green waves-effect waves-light btn-font" data-dismiss="modal" style="margin-left: 38em">
                        關閉
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/js/mdb.min.js"></script>    

    <!--smooth scrolling-->
    <script type="text/javascript">
        $(function(){
            //smooth scrolling
            $('a[href*="#"]:not([href="#"])').click(function(){
                if(location.pathmame.replace(/^\//,'') == this.pathmame.replace(/^\//,'') && 
                location.hostname == this.hostname){
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');


                    if(target.length){
                        $('html, body').animate({
                            scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        });
    </script>

    <!--revealOnScroll-->
    <script type="text/javaScript">
        $(function() {

            var $window           = $(window),
                win_height_padded = $window.height() * 1.1,
                isTouch           = Modernizr.touch;

            if (isTouch) { $('.reveal-on-scroll').addClass('animated'); }

            $window.on('scroll', revealOnScroll);

            function revealOnScroll() {
            var scrolled = $window.scrollTop(),
                win_height_padded = $window.height() * 1.1;

            // Showed...
            $(".reveal-on-scroll:not(.animated)").each(function () {
                var $this     = $(this),
                    offsetTop = $this.offset().top;

                if (scrolled + win_height_padded > offsetTop) {
                if ($this.data('timeout')) {
                    window.setTimeout(function(){
                    $this.addClass('animated ' + $this.data('animation'));
                    }, parseInt($this.data('timeout'),10));
                } else {
                    $this.addClass('animated ' + $this.data('animation'));
                }
                }
            });
            // Hidden...
            $(".reveal-on-scroll.animated").each(function (index) {
                var $this     = $(this),
                    offsetTop = $this.offset().top;
                if (scrolled + win_height_padded < offsetTop) {
                $(this).removeClass('animated zoomInUp zoomIn slideInLeft slideInRight  zoomIn pulseIn  pulse')
                }
            });
            }
        });
        //reveal-on-scroll();

    </script>

    <!-- Script to Activate the Carousel -->
    <script type="text/javaScript">
		$('.carousel').carousel({
		    interval: 5000 //changes the speed
		})
		
		$(function() {
			
			$("div").addClass("load");

		});
		
    </script>

    <!--Scroll-->
    <script type="text/javascript">
        //Turns Navbar to transparent background if user scrolled.
       /* function checkNavPosition() {
            var startYp = $('.navbar').height() * 0.2;
            if ($(window).scrollTop() > startYp) {
                $('.navbar').removeClass("AtTop");
            }
            else {
                $('.navbar').addClass("AtTop");
            }
        }
        //scroll smooth
        var anchor = document.querySelector('a[href="#link-drop"]')
        var target = document.getElementById('link-drop')
        anchor.addEventListener('click', function (e) {
        if (window.scrollTo) {
            e.preventDefault()
            window.scrollTo({'behavior': 'smooth', 'top': target.offsetTop})
        }
        })
        //Only activate function after rendering.
        if ($('.navbar').length > 0) {
            $(window).on("scroll load resize", function () { checkNavPosition(); });
        }

        // jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('.scroll').bind('click', function (event) {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html,body').animate({
                            scrollTop: target.offset().top
                        }, 800);
                        return false;
                    }
                }
            });
        });*/
    </script>

    <!--Shipping arrow-->
  <!--<div id="ak-top"><i class="fa fa-reply"></i></div>
    <script type="text/javascript">
        (function(){
            if (
                document.getElementById("shipping_option") !== null && 
                typeof document.getElementById("shipping_option") !== "undefined"
            ) {
                if (window.addEventListener) {
                    window.addEventListener('DOMContentLoaded', initPaymentMethod, false);
                } else {
                    window.attachEvent('onload', initPaymentMethod);
                }
            }
        })();
        function initPaymentMethod() {
            var e = document.getElementById("shipping_option");
            var shipping = e.options[e.selectedIndex].value;
            var payment = document.getElementsByName('payment_method');
            
            if (
                shipping == "HILIFE_Collection" ||
                shipping == "FAMI_Collection" ||
                shipping == "UNIMART_Collection"
            ) {
                var i;
            
                for (i = 0; i< payment.length; i++) {
                    if (payment[i].id != 'payment_method_ecpay_shipping_pay') {
                        payment[i].style.display="none";

                        checkclass = document.getElementsByClassName("wc_payment_method " + payment[i].id).length;

                        if (checkclass == 0) {
                            var x = document.getElementsByClassName(payment[i].id);
                            x[0].style.display = "none";
                        } else {
                            var x = document.getElementsByClassName("wc_payment_method " + payment[i].id);
                            x[0].style.display = "none";
                        }
                    } else {
                        checkclass = document.getElementsByClassName("wc_payment_method " + payment[i].id).length;

                        if (checkclass == 0) {
                            var x = document.getElementsByClassName(payment[i].id);
                            x[0].style.display = "";
                        } else {
                            var x = document.getElementsByClassName("wc_payment_method " + payment[i].id);
                            x[0].style.display = "";
                        }
                    }
                }
                document.getElementById('payment_method_ecpay').checked = false;
                document.getElementById('payment_method_ecpay_shipping_pay').checked = true;
                document.getElementById('payment_method_ecpay_shipping_pay').style.display = '';
            } else {
                var i;
                for (i = 0; i< payment.length; i++) {
                    if (payment[i].id != 'payment_method_ecpay_shipping_pay') {
                        payment[i].style.display=""; 

                        checkclass = document.getElementsByClassName("wc_payment_method " + payment[i].id).length;

                        if (checkclass == 0) {
                            var x = document.getElementsByClassName(payment[i].id);
                            x[0].style.display = "";
                        } else {
                            var x = document.getElementsByClassName("wc_payment_method " + payment[i].id);
                            x[0].style.display = "";
                        }
                    } else {
                        checkclass = document.getElementsByClassName("wc_payment_method " + payment[i].id).length;

                        if (checkclass == 0) {
                            var x = document.getElementsByClassName(payment[i].id);
                            x[0].style.display = "none";
                        } else {
                            var x = document.getElementsByClassName("wc_payment_method " + payment[i].id);
                            x[0].style.display = "none";
                        }

                        document.getElementById('payment_method_ecpay').checked = true;
                        document.getElementById('payment_method_ecpay_shipping_pay').checked = false;
                        document.getElementById('payment_method_ecpay_shipping_pay').style.display = "none";
                    }
                }
            }
        }
    </script>-->

    <!--image js-->
    <script type="text/javascript">
        filterSelection('image')
        function filterSelection(c) {
        var x, i;
        x = document.getElementsByClassName('column');
        if (c == "all") c = "";
        for (i = 0; i < x.length; i++) {
            w3RemoveClass(x[i], 'show');
            if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
        }
        }

        function w3AddClass(element, name) {
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
            if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
        }
        }

        function w3RemoveClass(element, name) {
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
            while (arr1.indexOf(arr2[i]) > -1) {
            arr1.splice(arr1.indexOf(arr2[i]), 1);     
            }
        }
        element.className = arr1.join(" ");
        }


        // Add active class to the current button (highlight it)
        var btnContainer = document.getElementById("myBtnContainer");
        var btns = btnContainer.getElementsByClassName("btn");
        for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function(){
            var current = document.getElementsByClassName("active");
            current[0].className = current[0].className.replace(" active", "");
            this.className += " active";
        });
    }    
    </script>

    <!--Add class "load"-->
    <script type="text/javascript">
        $(function() {
    
            $("div").addClass("load");

        });
    </script>

    <!-- Script to Activate the Carousel -->
    <script type="text/javaScript">
        $('.carousel').carousel({
            interval: 5000 //changes the speed
        })
        
        $(function() {
            
            $("div").addClass("load");

        });
        
    </script>

    <!--back to top-->
    <script type="text/javascript">
        $(document).ready(function(){
            $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span>回到最上頁</div>');
                $(window).scroll(function () {
                    if ($(this).scrollTop() != 0) {
                        $('#toTop').fadeIn();
                    } else {
                        $('#toTop').fadeOut();
                    }
                }); 
            $('#toTop').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 600);
                return false;
            });
        });
    </script>

    <script type="text/javascript">
        window.sr = ScrollReveal();
        sr.reveal('.btn-4',{
            duration: 2000,
            origin:'bottom',
            mobile: true,
        }); 
        
        sr.reveal('.padding',{
            duration: 1500,
            origin:'left',
            mobile: true,
        });    

    </script>

</body>

</html>

