<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>芳林</title>


  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"
    rel="stylesheet">
  <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css"
    rel="stylesheet">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">

  <!--[if IE]>
        <script type="text/javascript">
             var console = { log: function() {} };
        </script>
    <![endif]-->
</head>

<style>
  body {
    font-family: cursive;
    color: #333;
    color: rgba(0, 0, 0, 0.5);
    padding-top: 100px;
  }

  .wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    position: relative;
  }

  h1 {
    font-size: 6em;
  }
   
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
  }

  h2 {
    color: white;
    font-weight: 600;
    font-size: 48px;
    font-family: cursive;
    letter-spacing: 8px;
  }

  p {
    font-size: 2em;
  }

  .section {
    font-family: cursive；
  }

  #menu li {
    font-family: cursive;
    font-size: 18px;
    display: inline-block;
    margin: 10px;
    color: #000;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }

  #menu li.active {
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
  }

  #menu li a {
    text-decoration: none;
    color: blueviolet;
  }

  #menu li.active a:hover {
    color: #000;
  }

  #menu li:hover {
    background: rgba(255, 255, 255, 0.8);
  }

  #menu li a,
  #menu li.active a {
    padding: 9px 18px;
    display: block;
  }

  #menu li.active a {
    color: #fff;
  }

  #menu {
    position: fixed;
    bottom: 0;
    right: 0%;
    text-align: center;
    height: 10%;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin: 0;
  }

 

  /* ===================================================================
 * # home
 *
 * ------------------------------------------------------------------- */
  .s-home {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: relative;
    display: table;
  }

  .s-home::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.65;
    background-color: #000000;
  }



  /* ------------------------------------------------------------------- 
 * ## home content
 * ------------------------------------------------------------------- */
  .home-content {
    background: linear-gradient(rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.3)),
      url(/userUpload/images/10512106/guavabgw.jpg);

    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
  }


  .home-content h1 {
    padding-left: 18%;
    border: 1px solid white;
    font-family: cursive;
    font-weight: 500;
    font-size: 7rem;
    line-height: 2.1;
    margin-top: 0;
    color: #ffffff;
    background: rgba(255,255,255,.2);
    letter-spacing: 4px;
    top: -10rem;
    position: relative;
}
 

  .home-content h1 + p {
    font-family: cursive;
    font-size: 4rem;
    line-height: 1.421;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 1.2rem;
    padding-left: 35rem;
    position: relative;
    letter-spacing: 3.5px;
  }
  .home-content h1+p::before {
    content: "";
    display: block;
    width: 20rem;
    height: 4px;
    background-color: #cc4e14;
    position: absolute;
    left: 10rem;
    top: 1.2rem;
  }
 

  /* ------------------------------------------------------------------- 
 * ## home content RWD
 * ------------------------------------------------------------------- */
 @media (max-width: 768px) {

.home-content h1 {
  font-size: 4.5rem;
}

.home-content h1+p {
      font-size: 3rem;
      padding-left: 14rem;
    }
.home-content h1+p::before {
      width: 10rem;
      left: 30px;
    }

}





  

  /* ------------------------------------------------------------------- 
 * ## home scroll
 * ------------------------------------------------------------------- */
  .home-scroll {
    height: 5.8rem;
    position: absolute;
    right: 30%;
    bottom: 6.6rem;
  }

  .home-scroll__text {
    display: inline-block;
    font-family: cursive;
    font-size: 11px;
    line-height: 2.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    color: #ffffff;
    border-bottom: 1px solid transparent;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative;
    right: 7.5rem;
  }


  .home-scroll__icon {
    display: block;
    height: 3rem;
    width: 3rem;
    background-image: url(http://www.shejiye.com/uploadfile/icon/2017/0203/shejiyeiconzypo432cfcz.png);
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    border-radius: 50%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 0;
    right: 0;
  }

  .home-scroll:hover .home-scroll__text {
    border-bottom: 1px solid #ffffff;
  }

  /* About Us Section
--------------------------------*/
  .about {
    background: white;
    background-repeat: no-repeat;
    background-position: bottom center;
    color: black;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }

 

  .about {
    max-width: 100%;
  }

  .about .about-content {
    padding-top: 100px;
  }

  .about .about-content p {
    font-family: cursive;
    font-size: 25px;
    font-weight: 100;
    letter-spacing: 4px;
    margin-bottom: 20px;
    text-transform: capitalize;
    float: left;
    padding-left: 25%;
    text-align: left;
    position: relative;
    top: 3rem;
}




  /* product Section
--------------------------------*/
  .product {
    display: inline-block;
    width: 100%;
    height: 100vh;
    font-family: "微軟正黑體";
    background: url(/userUpload/images/10512106/guavabg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }


  .product .product-block {
    background: transparent;
    padding: 30px 20px;
    margin: 30px 20px;
    transition: all 0.5s ease-in-out 0s;
}
.product .product-block:hover {
    box-shadow: 0 0 35px rgba(0, 0, 0, .5);
    transition: all 0.5s ease-in-out 0s;
    background: #fff;
}
  .product .product-block h4 {
    margin-bottom: 20px;
  }

  /************button***************/
  button {
    color: black;
    border: 1px solid #338023;
    font-size: 25px;
    border-radius: 4px;
    transition: .6s;
    overflow: hidden;
  }

  button:focus {
    outline: none;

  }

  button::before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    width: 30px;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .5s;
    filter: blur(45px);
    text-decoration: none;

  }

  button::after {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .2);
    width: 30px;
    height: 100%;
    left: 30px;
    top: 0;
    opacity: 0;
    filter: blur(45px);
    text-decoration: none;

  }

  button:hover {
    background: #338033;
    cursor: pointer;
    text-decoration: none;

  }

  button:hover:before {
    transform: translateX(300px) skewX(-15deg);
    opacity: .6;
    transition: .7s;
    text-decoration: none;
  }

  /******scroll************/
  #fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: rgba(247, 159, 31, 1.0);
    font-size: 18px;
    font-family: "微軟正黑體";
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
    letter-spacing: 3px;
    font-weight: 600;
}

  #fp-nav ul li:hover a span,
  .fp-slidesNav ul li:hover a span {
    width: 10px;
    height: 10px;
    background: aqua;
    margin: -5px 0px 0px -5px;
  }

  #fp-nav ul li a span,
  .fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: blue;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }

  

  /* ourlife Section
--------------------------------*/

  .ourlife {
    width: 100%;
    height: 100vh;
    font-family: cursive;
    background: linear-gradient(rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)),
      url(/userUpload/images/10512106/environment.jpg);
    background-repeat: no-repeat;
    background-position: top center;

    background-size: cover;

  }


  .owl-dot.active>span {
    height: 10px !important;
    width: 10px !important;
  }

  .owl-theme .owl-dots .owl-dot span {
    height: 10px !important;
    width: 10px !important;
  }

  .owl-item img {
    cursor: pointer;
  }

  .owl-stage-outer {
    margin-bottom: 30px;
  }

  .owl-theme .owl-nav {
    display: none;
    margin-top: 10px;
  }

  .owl-theme .owl-dots .owl-dot.active span,
  .owl-theme .owl-dots .owl-dot:hover span {
    background: #71c55d;
  }

  .owl-theme .owl-dots .owl-dot span {
    background: #ddd;
  }

  .img-fluid {
    height: 100%;
    margin-bottom: 30px;
    width: 100%;
  }

  .separator {
    color: #ddd;
    font-family: cursive;
    font-size: 25px;
    font-weight: 300;
    margin-bottom: 30px;
    text-transform: capitalize;
    letter-spacing: 3px;
  }

  
  /* Contact Section
--------------------------------*/
  .conatct {

    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)),
      url(/userUpload/images/10512106/contact.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: -5;
  }

  .conatct .info {
    color: #222;
    text-align: left;
    padding-left: 5%;
    letter-spacing: 1px;
}

  .conatct .info i {
    font-size: 40px;
    color: white;
    float: left;
  }

  
  .conatct .info p {
      padding: 0 0 10px 25px;
      margin-bottom: 20px;
      line-height: 2rem;
      font-size: 18px;
      font-family: cursive;
      color: #ddd;
    }


  .conatct .info .email p {
    padding-top: 5px;
  }

  .conatct .social-links {
    padding-bottom: 50px;
    text-align: center;
  }

  .conatct .social-links a {
    font-size: 18px;
    display: inline-block;
    background: blue;
    color: #fff;
    line-height: 1;
    padding: 8px 0 8px 0;
    border-radius: 50%;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
  }

  .conatct .social-links a:hover {
    background: rgb(85, 161, 212);
    color: #fff;
  }

  .iframe-rwd {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;

  }

  .iframe-rwd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 50px;
  }



  /******************網頁修改*******************/

.navbar-default{

background: rgba(230,126,34,1.0);
font-family: cursive;
border-color: transparent;

}

a:focus, a:hover{
  color: yellowgreen;
  text-decoration: none;
}

.navbar-nav>li>a{
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 50px;
  font-size: 20px;
  text-transform: uppercase;
  position: relative;
}
  
.navbar-nav>li>a::before {
    content: '';
    width: 0px;
    height: 3px;
    background: chartreuse;
    position: absolute;
    top: 120%;
    right: 40px;
    transition: .5s;
    mix-blend-mode: multiply;
}

.navbar-nav>li>a::after {
    content: '';
    width: 0;
    height: 3px;
    background: #f0f;
    position: absolute;
    top: 120%;
    right: 10px;
    transition: .5s;
    mix-blend-mode: multiply;
}

.navbar-nav>li:hover a::before{
    width: 50%;
    transform: translateX(100%);
}

.navbar-nav>li:hover a::after{
    width: 50%;
    transform: translateX(-100%);
}
  
  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: transparent;
}

.navbar-fixed-top {
 top: 0;
 padding-left: 5rem;
}
  .container {
    padding-left: -15px;
    padding-right: -15px;
  }
  .col-md-12 {
    padding-right: 0px;
    padding-left: 0px;
  }

  .row {
    margin-right: 0px;
    margin-left: 0px;
  }

  .col-md-10 {
    width: 106%;
    margin-top: -105px;
  }

  .col-md-offset-1 {
    margin-left: -3%;
  }

  

  @media (max-width: 992px) {
    .col-md-offset-1 {
      margin-left: 0%;
    }
  }

  @media (max-width: 992px) {
    .col-md-10 {
      width: 100%;
      margin-top: -100px;
    }
  }

  .bgw {
    background-color: rgba(255, 255, 255, 0.0);
  }

  @media (max-width: 992px) {
    .col-md-10 {
      padding-right: 0px;
      padding-left: 0px;
    }

    .container-fluid {
      padding-right: 0px;
      padding-left: 0px;
    }
  }

  a {
    color: #00b894;
}
  html.fp-enabled,
  .fp-enabled body {
    margin: 0px;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding-top: 50px;
  }

  /*******RWD*********/

  @media (max-width: 992px) {

.about {
  height: 100%;
  font-size: 15px;
}
.ourlife {
  height: 100%;
}
.conatct {
  height: 100%;
}
}


@media (max-width: 768px) {
    #menu{
      width: 105%;
    }
    h2{
      font-size: 35px;
    }

    .about .about-content p{
      font-size: 24px;
      letter-spacing: 1px;
      margin-bottom: 20px;
      padding-left: 0%;
      top: -3rem;
    }

    button{
      font-size: 17px;
    }
    .conatct .info{
      padding-left: 0%;
    }
    .conatct .info i{
      font-size: 17px;
    }
    .conatct .info p{
      padding: 0 0 0 0px;
      margin-bottom: 0px;
    }
    .fp-enabled body {
    margin: -10px;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding-top: 50px;
  }
    
  }



</style>

<body>
  <div id="fullpage">
    <div class="section" id="section0">
        <div class="slide" id="slide1">

      <!-- home ================================================== -->
      <div class="s-home ">


        <div class="home-content">

          <div class="row " data-aos="fade-right">
            <h1>
              歡迎來到芳林芭樂農園
            </h1>

            <p>
              一生懸命 <br>
              自慢的芭樂，芳林
            </p>
          </div> 
          <ul id="menu">

            <li><a
                href="https://www.facebook.com/%E8%8A%B3%E6%9E%97-%E8%8A%AD%E6%A8%82%E8%BE%B2%E5%9C%92-297327576945814/">
                <i class="fab fa-facebook-f"></i>
                <span class="home-social-text">Facebook</span>
              </a></li>
            <li><a
                href="javascript: void(window.open(&apos;https://lineit.line.me/share/ui?url=&apos; .concat(encodeURIComponent(location.href)) ));"
                title="分享給 LINE 好友">
                <i class="fab fa-line"></i>
                <span class="home-social-text">line</span>
              </a></li>
            <li><a href="https://blog.xuite.net/kenny335a/twblog">
                <i class="fab fa-blogger"></i>
                <span class="home-social-text">blog</span>
              </a></li>
          </ul>
          <a href="#about" class="home-scroll smoothscroll"><span class="home-scroll__text">Scroll Down</span><i
              class=" home-scroll__icon"></i></a>
        </div> <!-- end home-content -->



      </div> <!-- end s-home -->

    </div>
    </div>
    <div class="section" id="section1">
        <div class="slide" id="slide2">
      <!--==========================
    About Us Section
  ============================-->
      <div class="container text-center about">
        <br> <br> <br> <br> <br>
        <h2 style="color:black; font-family: monospace">WELCOME</h2>
        <div class="about-content">
          <p class="separator" style="color:black;">

            一生懸命，自慢的芭樂—芳林<br>
            芳林․芭樂莊園所生產的芭樂<br>
            以對土地較友善的種植方式<br>
            嚴謹的管理及記錄生產過程<br>
            並讓它以最自然的方式自然生長<br>
            讓它擁有該有的原始風味<br>
            就像種給自己家人吃一樣<br>
            希望您也可以透過芳林<br>
            安心與健康的食用<br>
            這就是芳林給您最好的祝福<br>

          </p>
        </div>
        <br> <br> <br>
      </div>
    </div>
</div>

    <!--==========================
      product Section
      ============================-->
    <div class="section  text-center product" id="section2">
        <div class="slide" id="slide3">

      <br> <br> <br>
      <div class="container">
        <div class="section-title">
          <h2 style="color: black;">芭樂展現浪漫原味</h2>
          <br>
          <p class="separator" style="color: black;">“我的芭樂自然熟成，八、九分熟最好吃！”</p>
        </div>
      </div>
      <br>
      <div class="container">
        <div class="row">

          <div class="col-xs-4 col-md-6 col-lg-4">
            <div class="product-block">
              <img src="/userUpload/images/10512106/guava1.png" alt="img" class="img-fluid">
              <h4>芭樂</h4>
              <button type="button"><a href="http://www.lohasplus.com.tw/index.php?Act=925&SK=979&MK=925&PK=935">read
                  more</a></button>
            </div>
          </div>

          <div class="col-xs-4 col-md-6 col-lg-4">
            <div class="product-block">
              <img src="/userUpload/images/10512106/guava2.png" alt="img" class="img-fluid">
              <h4>禮盒</h4>
              <button type="button"><a href="http://www.lohasplus.com.tw/index.php?Act=925&SK=978&MK=925&PK=935">read
                  more</a></button>
            </div>
          </div>

          <div class="col-xs-4 col-md-6 col-lg-4">
            <div class="product-block">
              <img src="/userUpload/images/10512106/guava3.png" alt="img" class="img-fluid">
              <h4>超大禮盒</h4>
              <button type="button"><a href="http://www.lohasplus.com.tw/index.php?Act=925&SK=981&MK=925&PK=935">read
                  more</a></button>
            </div>
          </div>
        </div>
      </div>
</div>
      <br> <br> <br>


    </div>
    <!--==========================ourlife Section============================-->
    <div class="section text-center ourlife" id="section3">
        <div class="slide" id="slide4">

      <br> <br> <br>
      <div class="container ">
        <div class="section-title ">
          <h2>芳林生態</h2>
          <br>
          <p class="separator"> 大地的滋潤，讓芭樂香甜美味</p>
        </div>
      </div>
      <br>
      <div class="container">
        <div class="owl-carousel owl-theme">

          <div><img src="/userUpload/images/10512106/%E8%8D%89%E7%94%9F%E6%A0%BD%E5%9F%B9.png" alt="img"></div>
          <div><img src="/userUpload/images/10512106/%E9%99%A4%E8%8D%89%E5%B0%8F%E9%B4%A8.png" alt="img"></div>
          <div><img src="/userUpload/images/10512106/%E8%8A%AD%E6%A8%82%E5%9C%922.png" alt="img"></div>
          <div><img src="/userUpload/images/10512106/%E5%B2%A1%E5%B1%B1%E8%B6%85%E5%B3%B0%E5%AF%BA.png" alt="img"></div>

        </div>
      </div>
      <br> <br> <br> <br>
    </div>
    </div>
    <!--==========================
    Contact Section
  ============================-->
    <div class="section text-center conatct" id="section4">
        <div class="slide" id="slide5">

      <br> <br> <br>
      <div class="container  ">
        <div class="section-title ">
          <h2>聯絡我們</h2>
          <br>
          <p class="separator">聯絡資訊</p>
          <br> <br>
        </div>
      </div>

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

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

            <div class="info">
              <div>
                <i class="fa fa-user"></i>
                <p>&nbsp;&nbsp;&nbsp;鄭宗林</p>
              </div>

              <div>
                <i class="fa fa-mobile"></i>
                <p>&nbsp;&nbsp;&nbsp;0910-326-822</p>
              </div>
              <div>
                <i class="fab fa-line"></i>
                <p>&nbsp;&nbsp;&nbsp;kenny335a</p>
              </div>

              <div>
                <i class="fa fa-map-marker"> </i>
                <p>&nbsp;&nbsp;&nbsp;820高雄市岡山區嘉峰路600巷高鐵 橋下</p>
              </div>

              <div class="email">
                <i class="fa fa-envelope"></i>
                <p>&nbsp;&nbsp;&nbsp;kenny335a@
                  yahoo.com.tw</p>
              </div>

              <div>
                <i class="fa fa-phone"></i>
                <p>&nbsp;&nbsp;&nbsp;07-371-2376</p>
              </div>
              <div>
                <i class="fa fa-car"></i>
                <p>&nbsp;&nbsp;&nbsp;可前往岡山火車站轉乘計程車($200)或由農場主人接送</p>
              </div>

            </div>
            <div class="social-links">
              <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>&nbsp;&nbsp;
              <a href="#" class="instagram"><i class="fab fa-instagram"></i></a>&nbsp;&nbsp;
              <a href="#" class="google-plus"><i class="fab fa-google-plus-g"></i></a>&nbsp;&nbsp;
              
            </div>
            <br><br><br>


          </div>
          <div class="col-xs-4 col-lg-6 col-md-12">
              <div class="iframe-rwd">
                  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7354.3677329882885!2d120.316526!3d22.832686!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x51e50555d5e38def!2z6Iqz5p6X6Iqt5qiC5p6c5ZyS!5e0!3m2!1szh-TW!2stw!4v1554895992005!5m2!1szh-TW!2stw" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>
          </div>


        </div>
      </div>

</div>
      <!-- #contact -->
    </div>
  </div>
  <!-- Java Script
    ================================================== -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

  <script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/3.0.5/fullpage.js"></script>
  <script type="text/javascript">
    var myFullpage = new fullpage('#fullpage', {
      sectionsColor: ['white', 'transparent', 'transparent', 'transparent', 'transparent'],
      anchors: ['page', 'about', 'product', 'ourlife', 'contact'],
      navigation: true,
      navigationTooltips: ['回頂頁', '關於我們', '產品介紹', '芳林生態', '聯絡我們'],
      showActiveTooltip: true,
      scrollOverflow: true,
      menu: '#menu'
    });
  </script>

  // Init Owl Carousel
  <script>
    $('.owl-carousel').owlCarousel({
      items: 4,
      autoplay: true,
      loop: true,
      margin: 30,
      dots: true,
      responsiveClass: true,
      responsive: {

        320: { items: 1 },
        480: { items: 2 },
        600: { items: 2 },
        767: { items: 3 },
        768: { items: 3 },
        992: { items: 4 }
      }
    });

  </script>
  <script>
    AOS.init({
      duration: 1000,
    })
  </script>

</body>

</html>