
<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 (max-width: 812px) {
    .navbar-nav .open .dropdown-menu ul li:hover {
      color: #ddd !important; }
    li:hover .dropdown-menu {
      display: none; } 
    .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; }.row1{margin: 10px -70px !important}.card{margin: 10px 40px !important} }
  
  /* end iphone design */
  .size{width:170%;height: auto;right:200px}
  @media(max-width:812px){.box-iframe{width: 100%!important; height: 350px !important}.size{width: 100%!important;height:600px!important;right:0!important}}
  .box-iframe{width: 100%;height:550px}
  .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 (max-width: 812px){
    .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 (max-width: 812px){
    .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 (max-width: 812px)
  {
  
     .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;
     }
  }
  
  .modal-title{font-size: 23px;text-align: center;}
  * {
      text-transform: capitalize;
      letter-spacing: 0.1em;
  }
  
  .box-1 {
      display: block;
      margin-bottom: 2em;
      padding-left: 20px;
      padding-right: 20px;
  }
  
  .box-title {
      padding-left: 30px !important;
      color: rgba(255, 255, 255, 0.918)
  }
  
  .box-title-right{
      float: right;
      padding-right: 30px;
      color: rgba(250, 250, 250, 0.918)
  }
  
  .box-fill-black{
      display: block;
      padding: 10px;
      background: rgba(0,0,0,.8);
      overflow: hidden;
      margin-bottom: 25px;
  }
  
  .box-title-center{
      text-align: center;
      color: rgba(250, 250, 250, 0.918)
  }
  
  .box-color {
      background: rgba(0, 0, 0, .75)
  }
  
  .box-text {
      font-size: 20px;
      color: rgb(197, 197, 197);
  }
  
  .bt-23p{
      font-size: 23px;
      color: rgb(197, 197, 197)
  }
  
  .card{
      border-radius: 5px !important;
  }
  
  
  
  .box-iframe{
      border-radius: 10px !important;
      padding: 0;
      margin: 0;
      background: transparent !important;
  }
  
  .box-reveal{
      padding-top: 1em;
      letter-spacing: 0.1em;
      color: #000;
  }
  
  .box-btn{
      padding: 10px !important;
      margin-bottom: 10px !important;
      margin: 15px !important;
      font-size: 23px !important;
      opacity: 1;
      height: auto !important;
      transition: opacity .5s ease-in-out !important;
  }
  
  .box-btn:hover, .box-btn:focus{
      opacity: .5;
  }
  
  .box-board {
      position: relative;
      padding-left: 15px;
      color: rgb(236, 236, 236)
  }
  
  .btn{font-size: 23px !important}
  
  .box-board::after {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 45%;
      height: 2px;
      background: rgba(170, 170, 170, 0.486)
  }
  
  .box-board::before {
      left: 0
  }
  
  .box-board::after {
      right: 0
  }
  
  .box-board-1 {
      position: relative;
      padding-left: 15px;
      text-align: right;
      float: right;
      color: rgb(236, 236, 236)
  }
  
  .box-board-1::before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 2px;
      width: calc((15%-300px)/1);
      background: rgba(202, 202, 202, 0.575)
  }
  
  .box-board-1::before {
      left: -170px
  }
  
  .box-board-center {
      position: relative;
      text-align: center;
      padding-left: 15px;
      color: rgb(236, 236, 236)
  }
  
  .box-board-center::before,
  .box-board-center::after {
      content: '';
      position: absolute;
      height: 2px;
      width: calc((50%-200px)/2);
      top: 50%;
      transform: translateY(-50%);
      background: rgba(170, 170, 170, .8);
  }
  
  .box-board-center::before {
      left: 0
  }
  
  .box-board-center::after {
      right: 0
  }
  
  .img-fluid {
      padding: 15px;
  }
  
  .img-center {
      width: 40em;
      transform: translateX(50%);
  }
  
  .board-text {
      font-size: 25px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: rgb(236, 236, 236)
  }
  
  .card-text, .card-title{font-size: 20px !important}
  
  .box-share{
      font-size: 24px;
      font-family: 標楷體;
      color: rgba(216, 216, 216, 0.815)
  }
  
  .box-img-center{
      display: block;
      text-align: center;
  }
  
  .box-frame-size{
      width: 500px !important;
      height: 300px !important;
  }
  
  .p1{padding: 10px}.p2{padding: 20px}.p3{padding: 30px}.p4{padding: 40px}.p5{padding: 50px}
  .p1-l{padding-left: 10px}.p2-l{padding-left: 20px}.p3-l{padding-left: 30px}.p4-l{padding-left: 40px}.p5-l{padding-left: 50px}
  .p1-r{padding-right: 10px}.p2-r{padding-right: 20px}.p3-r{padding-right: 30px}.p4-r{padding-right: 40px}.p5-r{padding-right: 50px}
  .p1-t{padding-top: 10px}.p2-t{padding-top: 20px}.p3-t{padding-top: 30px}.p4-t{padding-top: 40px}.p5-t{padding-top: 50px}
  .p1-b{padding-bottom: 10px}.p2-b{padding-bottom: 20px}.p3-b{padding-bottom: 30px}.p4-b{padding-bottom: 40px}.p5-b{padding-bottom: 50px}
  
  .box-container{
      display: block;
      position: relative;
  }
  
  .box-absolute{
      position: absolute;
      display: inline-block;
      background: rgba(0,0,0,.8);
      color: #fff;
      font-weight: 300;
      z-index: 100;
      padding: 10px;
      font-size: 20px;
      letter-spacing: 0.1em;
      top: 1em
  }
  
  .box-list{
      list-style-type: none !important;
      float: left;
      display: block;
      padding: 0; padding-inline-start: 0; padding-inline-end: 0;
      margin: 0; margin-block-start: 0; margin-block-start: 0;
  }
  
  .box-list li{padding-bottom: 10px; color: #fff}
  
  video{
      transition: opacity .5s ease-in-out;
      backface-visibility: hidden
  }
  
  video:hover .box-hid{
      opacity: .3s;
  }
  
  .box-hid{
      display: block;
      position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      text-align: center;
      opacity: 0;
      transition: opacity .5s ease-in-out;
      z-index: 1;
  }
  
  video .box-hid:focus, video .box-hid:hover{
      background: rgba(0, 0, 0, .75);
      opacity: 1;
      color: #fff
  }
  
  /* btn-search */
  
  input[type=search]{
      width: 130px;
      float: right;
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 16px;
      background: white;
      padding: 12px 20px 12px 40px;
      -webkit-transition: width .4s ease-in-out;
      transition: width .4s ease-in-out;
      z-index: 1000;
      border: 2px solid transparent;
      border-image-source: url("../img/test-border.png")
  }
  
  .positive-form{
      margin-top: 5em;
      margin-right: 2em;
  }
  
  input[type=search]:focus{
      width: 30%;
      border: 3px soild transparent !important;
      border-image: url('../img/test-border.png') 30 stretch
  }
  
  /* Galaxy Prime design */
  
  @media
    only screen and (-webkit-min-device-pixel-ratio: 3),
    only screen and (   min--moz-device-pixel-ratio: 3),
    only screen and (     -o-min-device-pixel-ratio: 3/1),
    only screen and (        min-device-pixel-ratio: 3),
    only screen and (                min-resolution: 401dpi),
    only screen and (                min-resolution: 3dppx) { 
      .box-absolute{
          position: relative !important;
          background: rgba(0,0,0,.9) !important;
          top: 0
      }
  }
  
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px){
      .box-absolute{
          position: relative !important;
          background: rgba(0,0,0,.9) !important;
          top: 0
      }
  }
  
  
  * {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      opacity: 1 !important
  }
  
  .modal-backdrop{background: rgba(0,0,0,.5) !important}
  
  .navbar .dropdown-menu a{font-size: 18px !important}
  .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{font-size: 23px !important}
  
  .model-pc {
      display: block;
  }
  
  .btn {
      font-size: 20px !important;
      margin-bottom: 30px !important;
  }
  
  li:hover .dropdown-menu {
      display: block;
  }
  
  .p-top {
      padding: 10%
  }
  
  @media (max-width: 812px) {
      .title1 {
          width: 100% !important
      }
  
      .navbar-collapse .mr-auto {
          padding-left: 30px !important
      }
  
      .collapse.in {
          display: flex !important;
          flex-wrap: wrap-reverse !important
      }
  
      .navbar .dropdown-menu a{font-size: 16px !important}
  
      .dropdown-menu {
          display: none !important;
      }
  
      .open .dropdown-menu {
          display: block !important;
          background: rgba(226, 226, 226, 0.897) !important;
      }
  
      .p-top {padding-top: 30% !important}
  
      .navbar .dropdown-menu a {
          font-size: 20px !important
      }
  
      .navbar-default .navbar-nav>li::after {
          content: '';
          height: 2px !important;
          width: 0 !important;
          transform: scaleX(0) !important;
          transition: transform .3s ease-in-out !important;
          background: black !important;
      }
  
      .navbar-default .navbar-nav>li:hover::after {
          width: 50% !important;
          transform: scaleX(1) !important;
      }
  
      .model-mobile {
          transform: translateY(0) !important
      }
  
      .img-hover {
          width: 23em !important
      }
  }
  
  
  
      </style>
  
  </head>
  
  <body>
      <section class="padding model-pc model-mobile">
          <div class="container-fluid bgw">
              <div class="row">
                  <div class="col-md-12 col-sm-6 d-b" style="padding: 40px">
                      <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">
  <div class="row">
                          <!--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://www.lohasplus.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://www.lohasplus.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://www.lohasplus.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--></div><div class="row">
  
                          <!--Four column-->
                          <div class="col-md-4 col-sm-8">
                              <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://www.lohasplus.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">
                              <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://www.lohasplus.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">
                              <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://www.lohasplus.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--></div>
  
                          <!--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://www.lohasplus.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://www.lohasplus.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://www.lohasplus.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> 每人費：200 TWD。
  
                                              <hr>
  
                                              <p>2. 如要增加翡翠包製作及(翡翠) 各項 DIY 題體驗、單項各加材料費 50 TWD。</p>
  
                                              <hr>

  					      <p>3. 綠豆涼糕製作。</p>
                                              <p>4. 天然綠茶清潔劑製作。</p>
                                              <p>(3)+(4) -> 費用 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://www.lohasplus.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://www.lohasplus.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://www.lohasplus.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://www.lohasplus.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://www.lohasplus.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://www.lohasplus.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="http://www.lohasplus.com.tw/userUpload/images/close-18dp.png" class="img-fluid">
                      </button>
                  </div>
  
                  <div class="modal-body">
                      <img src="http://www.lohasplus.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://www.lohasplus.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://www.lohasplus.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://www.lohasplus.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://www.lohasplus.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 size">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                          <img src="http://www.lohasplus.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 class="box-iframe" src="https://www.youtube.com/embed/IOD9aaB7RF0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></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 size">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                          <img src="http://www.lohasplus.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 class="box-iframe" src="https://www.youtube.com/embed/aowGYLw1jcA" allowfullscreen 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 size">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                          <img src="http://www.lohasplus.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 class="box-iframe" src="https://www.youtube.com/embed/F-GCfmqeSZU" allowfullscreen 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>
  
      <!--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>
  
  