<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>芳林芭樂農園</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.0/pace.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

  
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script src="https://www.ruan-jian.com/ajax/libs/jquery-placeholder/2.1.2/jquery.placeholder.js"></script>
  <script src="https://www.ruan-jian.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
  <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
  <script src="https://unpkg.com/imagesloaded@3.2.0/imagesloaded.pkgd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
  <script src="https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe.min.js"></script>
  <script src="https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script>   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<style>

.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;
}
}



body {
    font-family: "微軟正黑體";
    font-size: 1.7rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1.765;
    color: gray;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;

}



p{
  margin-bottom: 3rem;
    font-size: 22px;
    font-family: "微軟正黑體";
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* ------------------------------------------------------------------- 
 * ## links
 * ------------------------------------------------------------------- */
a {
    text-decoration: none;
    line-height: inherit;
}

a img {
    border: none;
}

/* ===================================================================
 * # slick slider
 * http://kenwheeler.github.io/slick/
 * ------------------------------------------------------------------- */
 .slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}





/* ===================================================================
 * # reusable and common theme styles
 *
 * ------------------------------------------------------------------- */


.light-gray {
  background-color: #f1f1f1;
}


/* ------------------------------------------------------------------- 
 * ## display headings
 * ------------------------------------------------------------------- */
.display-1 {
  font-family: "微軟正黑體";
  font-size: 6rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000000;
  letter-spacing: -0.03rem;
  margin-top: 0;
  margin-bottom: 4.8rem;
}
.display-1--light {
  color: #ffffff;
}

.subhead {
    font-family: "微軟正黑體";
    font-size: 3.6rem;
    line-height: 1.3125;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    color: brown;
    margin-top: 0;
    margin-bottom: 2.1rem;
}
.subhead::before {
  content: "/ ";
}

/* ------------------------------------------------------------------- 
 * responsive:
 * display headings
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1400px) {
  .display-1 {
    font-size: 5.6rem;
  }
}
@media only screen and (max-width: 1200px) {
  .display-1 {
    font-size: 5.2rem;
  }
}
@media only screen and (max-width: 950px) {
  .display-1 {
    font-size: 4.6rem;
  }
}
@media only screen and (max-width: 800px) {
  .display-1 {
    font-size: 4.2rem;
    margin-bottom: 4.2rem;
  }

  .subhead {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 700px) {
  .display-1 {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 600px) {
  .display-1 {
    font-size: 3.6rem;
  }
}
@media only screen and (max-width: 500px) {
  .display-1 {
    font-size: 3.3rem;
  }

  .subhead {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 400px) {
  .display-1 {
    font-size: 3rem;
  }
}


/* ===================================================================
 * # header styles
 *
 * ------------------------------------------------------------------- */
.s-header {
  z-index: 500;
  width: 100%;
  height: 96px;
  background-color: transparent;
  position: absolute;
  top: 24px;
}

/* ------------------------------------------------------------------- 
 * ## main navigation 
 * ------------------------------------------------------------------- */
.header-nav {
  z-index: 900;
  font-family:  "微軟正黑體";
  font-size: 2rem;
  line-height: 1.846;
  padding: 3.6rem 3rem 3.6rem 3.6rem;
  height: 100%;
  width: 280px;
  background: #0c0c0c;
  color: rgba(255, 255, 255, 0.25);
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: translateZ(0);
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  visibility: hidden;
}
.header-nav a,
.header-nav a:visited {
  color: rgba(255, 255, 255, 0.5);
}
.header-nav a:hover,
.header-nav a:focus,
.header-nav a:active {
  color: white;
}
.header-nav h3 {
  font-family: "微軟正黑體";
  font-size: 22px;
  line-height: 1.363;
  text-transform: uppercase;
  letter-spacing: 0.25rem;
  margin-bottom: 4.8rem;
  margin-top: 0.9rem;
  color: #cc147f;
}
.header-nav p {
  margin-bottom: 2.7rem;
}

.header-nav__content {
  background: #0c0c0c;
  position: relative;
  left: 50px;
  opacity: 0;
  visibility: hidden;
}

.header-nav__list {
  font-family:  "微軟正黑體";
  font-size: 2rem;
  margin: 3.6rem 0 3rem 0;
  padding: 0 0 1.8rem 0;
  list-style: none;
  counter-reset: ctr;
}
.header-nav__list li {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  line-height: 4.8rem;
  position: relative;
}
.header-nav__list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.header-nav__list a {
  display: block;
  color: #ffffff;
  position: relative;
  padding-left: 3.5rem;
}
.header-nav__list a::before {
  content: counter(ctr, decimal-leading-zero) ".";
  counter-increment: ctr;
  font-family:  "微軟正黑體";
  font-size: 20px;
  color: rgba(255, 255, 255, 0.25);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: absolute;
  left: 3px;
  top: 0;
}
.header-nav__list a:hover::before {
  color: #cc147f;
}

.header-nav__social {
  list-style: none;
  display: inline-block;
  font-size: 1.8rem;
  margin: 0;
}
.header-nav__social li {
  display: inline-block;
  margin-right: 12px;
  padding-left: 0;
  font-size:22px
}
.header-nav__social li a {
  color: rgba(85, 206, 49, 0.5);
}
.header-nav__social li a:hover,
.header-nav__social li a:focus {
  color: white;
}
.header-nav__social li:last-child {
  margin: 0;
}

.header-nav__close {
  z-index: 800;
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 30px;
  border-radius: 3px;
  position: absolute;
  top: 36px;
  right: 30px;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
.header-nav__close span::before,
.header-nav__close span::after {
  content: "";
  display: block;
  height: 2px;
  width: 12px;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 9px;
  margin-top: -1px;
}
.header-nav__close span::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.header-nav__close span::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* menu is open
 * ----------------------------------------------- */
.menu-is-open .header-nav {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
  -webkit-overflow-scrolling: touch;
}
.menu-is-open .header-nav .header-nav__content {
  opacity: 1;
  visibility: visible;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  left: 0;
}


/* ------------------------------------------------------------------- 
 * ## mobile menu toggle 
 * ------------------------------------------------------------------- */
.header-menu-toggle {
  position: fixed;
  right: 110px;
  top: 42px;
  width: 48px;
  height: 45px;
  line-height: 45px;
  font-family: "微軟正黑體";
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.4rem;
  color: #ffffff;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.header-menu-toggle::before {
  display: inline-block;
  content: "Menu";
  height: 45px;
  left: auto;
  text-align: right;
  padding-left: 15px;
  padding-right: 10px;
  position: absolute;
  top: 0;
  right: 100%;
}
.header-menu-toggle.opaque {
  background-color: #000000;
}
.header-menu-toggle.opaque::before {
  display: none;
}
.header-menu-toggle:hover,
.header-menu-toggle:focus,
.header-menu-toggle:active {
  color: #cc147f;
}

.header-menu-icon {
  display: block;
  width: 26px;
  height: 2px;
  margin-top: -1px;
  right: auto;
  bottom: auto;
  background-color: white;
  position: absolute;
  left: 11px;
  top: 50%;
}
.header-menu-icon::before,
.header-menu-icon::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  left: 0;
}
.header-menu-icon::before {
  top: -9px;
}
.header-menu-icon::after {
  bottom: -9px;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * header
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1600px) {
  .header-logo {
    left: 60px;
  }

  .header-menu-toggle {
    right: 60px;
  }
}
@media only screen and (max-width: 800px) {
  .header-logo {
    left: 40px;
  }

  .header-menu-toggle {
    right: 40px;
  }
}
@media only screen and (max-width: 600px) {
  .s-header {
    height: 90px;
    top: 12px;
  }

  .header-logo {
    left: 30px;
  }
  .header-logo img {
    width: 180px;
    height: 34px;
  }

  .header-menu-toggle {
    right: 25px;
    top: 30px;
  }
}
@media only screen and (max-width: 500px) {
  .header-menu-toggle::before {
    display: none;
  }
}
@media only screen and (max-width: 400px) {
  .s-header {
    top: 6px;
  }

  .header-logo {
    left: 25px;
  }
  .header-logo img img {
    width: 141px;
    height: 27px;
  }

  .header-menu-toggle {
    top: 24px;
    right: 20px;
  }
}


/* ===================================================================
 * # home
 *
 * ------------------------------------------------------------------- */
.s-home {
  width: 100%;
  height: 100%;
  min-height: 786px;
  background-color: transparent;
  position: relative;
  display: table;
}
.s-home .shadow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background: linear-gradient(to right, black 0%, black 20%, transparent 100%);
}
.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.4),
    rgba(0,0,0,0.3)
  ),
   url(images/guavabgw.jpg);
   background-attachment: fixed; 
   background-repeat:no-repeat;
   background-position: center top; 
  background-size: cover;
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  padding-bottom: 15.6rem;
  overflow: hidden;
  position: relative;
}
.home-content h1 {
  font-family: "微軟正黑體";
  font-size: 7rem;
  line-height: 1.1;
  margin-top: 0;
  color: #ffffff;
}
.home-content h1 + p {
  font-family: "微軟正黑體";
  font-size: 3.8rem;
  line-height: 1.421;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2.4rem;
  padding-left: 10rem;
  position: relative;
}
.home-content h1 + p::before {
  content: "";
  display: block;
  width: 6.5rem;
  height: 1px;
  background-color: #cc4e14;
  position: absolute;
  left: 6px;
  top: 2.7rem;
}

.home-content__main {
  padding-top: 15rem;
  padding-right: 20rem;
  position: relative;
}


/* ------------------------------------------------------------------- 
 * ## home sidelinks
 * ------------------------------------------------------------------- */
.home-sidelinks {
  list-style: none;
  font-family: "微軟正黑體";
  font-size: 1.4rem;
  line-height: 1.714;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  margin: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 0;
}
.home-sidelinks li {
  display: block;
  padding: 0;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: relative;
}
.home-sidelinks li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.home-sidelinks li::before {
  content: "";
  display: block;
  height: 6px;
  width: 6px;
  background-color: #cc147f;
  border-radius: 50%;
  position: absolute;
  top: 3rem;
  left: 2rem;
}
.home-sidelinks a {
  display: block;
  padding: 2.1rem 15rem 2.1rem 4rem;
  color: #ffffff;
}
.home-sidelinks span {
  display: block;
  font-family:"微軟正黑體";
  font-size: 1.5rem;
  line-height: 1.6rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: none;
  letter-spacing: 0;
}
.home-sidelinks li:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}


/* ------------------------------------------------------------------- 
 * ## home scroll
 * ------------------------------------------------------------------- */
.home-scroll {
  height: 4.8rem;
  position: absolute;
  right: 110px;
  bottom: 6.6rem;
}
.home-scroll__text {
  display: inline-block;
  font-family: "微軟正黑體";
  font-size: 11px;
  line-height: 4.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: 4.8rem;
  width: 4.8rem;
  background-color: #ffffff;
  background-image: url(images/icons/icon-arrow-down.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 10px 15px;
  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;
}

.no-svg .home-scroll__icon {
  background-image: url(images/icons/png/icon-arrow-down.png);
}


/* ------------------------------------------------------------------- 
 * ## home scroll
 * ------------------------------------------------------------------- */
.home-social {
  list-style: none;
  font-size: 14px;
  line-height: 4.8rem;
  margin: 0;
  color: #ffffff;
  position: absolute;
  bottom: 6.6rem;
  left: 110px;
}
.home-social a {
  color: #ffffff;
  border-bottom: 1px solid transparent;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.home-social a:hover {
  border-bottom: 1px solid #ffffff;
}
.home-social i {
  display: none;
}
.home-social .home-social-title {
  font-family: "微軟正黑體";
  padding-right: 4rem;
  margin-right: 0.8rem;
  position: relative;
}
.home-social .home-social-title::after {
  display: block;
  content: "";
  width: 2.4rem;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  right: 0;
  top: 50%;
}
.home-social li {
  display: inline-block;
  position: relative;
  margin-right: 0.6rem;
}
.home-social li a {
  display: block;
}
.home-social li:last-child {
  margin-right: 0;
}

/* animate .home-content__main
 * ------------------------------------------------------------------- */
html.cl-preload .home-content__main {
  opacity: 0;
}

html.cl-loaded .home-content__main {
  animation-duration: 2s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

html.no-csstransitions .home-content__main {
  opacity: 1;
}


/* ------------------------------------------------------------------- 
 * ## home animations
 * ------------------------------------------------------------------- */
/* fade in */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 150%, 0);
    -ms-transform: translate3d(0, 150%, 0);
    transform: translate3d(0, 150%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 150%, 0);
    -ms-transform: translate3d(0, 150%, 0);
    transform: translate3d(0, 150%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* fade out */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -150%, 0);
    -ms-transform: translate3d(0, -150%, 0);
    transform: translate3d(0, -150%, 0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -150%, 0);
    -ms-transform: translate3d(0, -150%, 0);
    transform: translate3d(0, -150%, 0);
  }
}

/* ------------------------------------------------------------------- 
 * responsive:
 * home
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1600px) {
  .home-content h1 {
    font-size: 8.8rem;
  }
  .home-content h1 + p {
    font-size: 3.6rem;
  }

  .home-content__main {
    padding-top: 18rem;
  }

  .home-sidelinks {
    font-size: 1.3rem;
  }

  .home-scroll {
    right: 60px;
  }

  .home-social {
    left: 60px;
  }
}
@media only screen and (max-width: 1500px) {
  .home-content h1 {
    font-size: 8.6rem;
  }

  .home-content__main {
    max-width: 1100px;
  }
}
@media only screen and (max-width: 1400px) {
  .home-content h1 {
    font-size: 7.8rem;
  }
  .home-content h1 + p {
    font-size: 3rem;
  }
  .home-content h1 + p::before {
    top: 2.4rem;
  }

  .home-content__main {
    max-width: 1000px;
  }

  .home-sidelinks a {
    padding: 2.1rem 12rem 2.1rem 4rem;
  }
}
@media only screen and (max-width: 1200px) {
  .home-content h1 {
    font-size: 7.2rem;
  }
  .home-content h1 + p {
    font-size: 2.4rem;
    padding-right: 2rem;
    padding-left: 8rem;
  }
  .home-content h1 + p::before {
    width: 5.5rem;
    top: 1.8rem;
  }
  .home-content br {
    display: none;
  }

  .home-content__main {
    max-width: 850px;
  }

  .home-sidelinks a {
    padding: 1.8rem 6rem 1.8rem 4rem;
  }
}
@media only screen and (max-width: 1000px) {
  .home-content__main {
    max-width: 650px;
    padding-right: 0;
  }

  .home-sidelinks {
    display: none;
  }
}
@media only screen and (max-width: 900px) {
  .home-content h1 {
    font-size: 7rem;
  }
}
@media only screen and (max-width: 800px) {
  .home-content h1 {
    font-size: 6.5rem;
  }

  .home-content__main {
    max-width: 580px;
  }

  .home-scroll {
    right: 40px;
  }
  .home-scroll__text {
    display: none;
  }

  .home-social {
    left: 40px;
  }
}
@media only screen and (max-width: 700px) {
  .home-content h1 {
    font-size: 5.5rem;
  }
  .home-content h1 + p {
    font-size: 2.2rem;
    padding-right: 0;
  }
  .home-content h1 + p::before {
    top: 1.6rem;
  }

  .home-content__main {
    max-width: 480px;
  }
}
@media only screen and (max-width: 600px) {
  .home-content h1 {
    font-size: 5.4rem;
  }
  .home-content h1 + p {
    padding-top: 3rem;
    padding-left: 0;
  }
  .home-content h1 + p::before {
    left: 0;
    top: 0;
  }

  .home-content__main {
    width: auto;
    padding-left: 35px;
    padding-right: 35px;
  }

  .home-social {
    left: 30px;
    bottom: 6rem;
    bottom: 6rem;
  }
  .home-social i {
    display: inline;
  }
  .home-social .home-social-text {
    display: none;
  }

  .home-scroll {
    right: 30px;
    bottom: 6rem;
  }
  .home-scroll__icon {
    height: 4.2rem;
    width: 4.2rem;
  }
}
@media only screen and (max-width: 500px) {
  .home-content h1 {
    font-size: 5rem;
  }
  .home-content h1 + p {
    padding-top: 2.8rem;
  }

  .s-home {
    min-height: 642px;
  }
}
@media only screen and (max-width: 450px) {
  .home-content h1 {
    font-size: 4.6rem;
  }
  .home-content h1 + p {
    padding-top: 2.4rem;
  }
}
@media only screen and (max-width: 400px) {
  .s-home {
    min-height: 630px;
  }

  .home-content h1 {
    font-size: 4.2rem;
  }
  .home-content h1 + p {
    padding-top: 2.1rem;
  }

  .home-content__main {
    padding-left: 25px;
    padding-right: 25px;
  }

  .home-social {
    font-size: 13px;
    left: 25px;
  }
  .home-social .home-social-title {
    padding-right: 0.6rem;
  }
  .home-social .home-social-title::after {
    display: none;
  }

  .home-scroll {
    right: 25px;
  }
}



/* ===================================================================
 * # about
 *
 * ------------------------------------------------------------------- */
.s-about {
  padding-top: 18rem;
  padding-bottom: 18rem;
  background-color: #ffffff;
  position: relative;
}


/* ------------------------------------------------------------------- 
 * ## about process
 * ------------------------------------------------------------------- */
.process {
  margin-top: 4.2rem;
  position: relative;
}
.process__vline-left,
.process__vline-right {
  display: block;
  width: 1px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15);
  position: absolute;
}
.process__vline-left {
  top: 0;
  left: calc(20px + 24px);
}
.process__vline-right {
  top: 0;
  left: calc(50% + 20px + 24px);
}
.process h4 {
  font-family: "微軟正黑體";
  font-size: 2.8rem;
  line-height: 1.5;
  margin-top: 0;
  position: relative;
}
.process__col {
  position: relative;
  min-height: 24.6rem;
}
.process__col::before {
  content: attr(data-item);
  display: block;
  font-family: "微軟正黑體";
  font-size: 2.1rem;
  text-align: center;
  color: #ffffff;
  background-color: #26bfb5;
  height: 48px;
  width: 48px;
  line-height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 0 18px #ffffff;
  position: absolute;
  left: 20px;
  top: 0;
}
.process__text {
  margin-left: 7.5rem;
  padding-right: 30px;
}


/* ------------------------------------------------------------------- 
 * responsive:
 * about
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {
  .s-about {
    padding-top: 15rem;
    padding-bottom: 15rem;
  }

  .process__vline-left {
    left: calc(15px + 22px);
  }
  .process__vline-right {
    left: calc(50% + 15px + 22px);
  }
  .process h4 {
    font-size: 2.6rem;
  }
  .process__col::before {
    height: 45px;
    width: 45px;
    line-height: 45px;
    font-size: 1.8rem;
    left: 15px;
  }
  .process__text {
    margin-left: 6.8rem;
    padding-right: 0;
  }
}
@media only screen and (max-width: 800px) {
  .s-about {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }

  .process {
    margin-top: 3rem;
  }
  .process__vline-right {
    display: none;
  }
  .process__col {
    min-height: 0;
  }
  .process__col::before {
    top: -3px;
  }
}
@media only screen and (max-width: 600px) {
  .process__vline-left {
    left: calc(10px + 22px);
  }
  .process__col::before {
    top: -3px;
    left: 10px;
  }
  .process h4 {
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 400px) {
  .s-about {
    padding-top: 9.6rem;
  }

  .process h4 {
    font-size: 2.2rem;
    padding-left: 5.4rem;
    margin-bottom: 1.8rem;
  }
  .process__vline-left {
    display: none;
  }
  .process__col {
    margin-bottom: 4.2rem;
  }
  .process__col::before {
    height: 36px;
    width: 36px;
    line-height: 36px;
    font-size: 1.6rem;
    top: -3px;
    left: 0;
  }
  .process__text {
    margin-left: 0;
  }
}



/* ===================================================================
 * # services
 *
 * ------------------------------------------------------------------- */
.s-services {
  padding-top: 18rem;
  padding-bottom: 18rem;
  color: #555555;
  position: relative;
}


/* ------------------------------------------------------------------- 
 * ## services list
 * ------------------------------------------------------------------- */
.services-list {
  margin-top: 6rem;
}
.services-list .service-item {
  margin-bottom: 1.5rem;
}
.services-list .service-item h3 {
  margin-top: 0;
  margin-bottom: 1.8rem;
}
.services-list .service-icon {
  color: #26bfb5;
  font-size: 4.8rem;
}


/* ------------------------------------------------------------------- 
 * responsive:
 * services
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {
  .s-services {
    padding-top: 15rem;
    padding-bottom: 15rem;
  }

  .services-list [class*="col-"]:nth-child(2n + 1) {
    padding-right: 30px;
  }
  .services-list [class*="col-"]:nth-child(2n + 2) {
    padding-left: 30px;
  }
}
@media only screen and (max-width: 800px) {
  .s-services {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }

  .services-list {
    margin-top: 3rem;
  }
  .services-list .service-icon {
    font-size: 4.5rem;
  }
  .services-list [class*="col-"]:nth-child(n) {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 600px) {
  .services-list [class*="col-"]:nth-child(n) {
    padding: 0 10px;
  }
}
@media only screen and (max-width: 400px) {
  .s-services {
    padding-top: 9.6rem;
  }

  .services-list [class*="col-"]:nth-child(n) {
    padding: 0;
  }
}


/* ===================================================================
 * # works
 *
 * ------------------------------------------------------------------- */
.s-works {
  background: #ffffff;
  padding: 18rem 0 24rem;
  position: relative;
}



/* ===================================================================
 * # testimonials
 *
 * ------------------------------------------------------------------- */
.testimonials-header {
  text-align: center;
  margin-top: 7.2rem;
}

.testimonials {
  font-size: 1.8rem;
  line-height: 2;
  margin-top: 4.2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
}

.testimonials__slider {
  position: relative;
}
.testimonials__slider .slick-slide {
  outline: none;
}
.testimonials__slider .slick-dots {
  display: block;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 3rem 0 0 0;
  text-align: center;
  position: absolute;
  top: 100%;
  left: 0;
}
.testimonials__slider .slick-dots li {
  display: inline-block;
  width: 27px;
  height: 27px;
  margin: 0;
  padding: 9px;
  cursor: pointer;
}
.testimonials__slider .slick-dots li button {
  display: block;
  width: 10px;
  height: 10px;
  line-height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
.testimonials__slider .slick-dots li button:hover,
.testimonials__slider .slick-dots li button:focus {
  outline: none;
}
.testimonials__slider .slick-dots li.slick-active button,
.testimonials__slider .slick-dots li:hover button {
  background: #000000;
}

.testimonials__slide {
  position: relative;
  padding-top: 4.5rem;
  padding-left: 12rem;
  padding-right: 3rem;
}
.testimonials__slide::before {
  content: "";
  display: block;
  width: 1px;
  height: 3.9rem;
  position: absolute;
  left: calc(7.8rem / 2);
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.testimonials__avatar {
  width: 7.8rem;
  height: 7.8rem;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 4.8rem;
  outline: none;
}

.testimonials__author {
  margin-top: 0rem;
  font-family: "metropolis-bold", sans-serif;
  font-size: 1.8rem;
  line-height: 1.5;
  color: #000000;
}
.testimonials__author span {
  display: block;
  font-family: "metropolis-regular", sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: rgba(85, 85, 85, 0.7);
  text-transform: none;
  letter-spacing: 0;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * testimonials
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1100px) {
  .testimonials {
    font-size: 1.7rem;
  }

  .testimonials__slide {
    padding-left: 9.5rem;
  }
  .testimonials__slide::before {
    left: calc(6.6rem / 2);
  }

  .testimonials__avatar {
    width: 6.6rem;
    height: 6.6rem;
  }
}
@media only screen and (max-width: 600px) {
  .testimonials-header h1 {
    font-size: 2.7rem;
  }

  .testimonials {
    margin-top: 3rem;
  }

  .testimonials__slide {
    padding: 13.2rem 0 0;
    text-align: center;
  }
  .testimonials__slide::before {
    left: 50%;
  }

  .testimonials__avatar {
    left: 50%;
    margin-left: -3.3rem;
  }
}



/* ===================================================================
 * # stats 
 *
 * ------------------------------------------------------------------- */
.s-stats {
  padding-top: 4.2rem;
  padding-bottom: 4.2rem;
  background-color: #050505;
  background-image: url(../images/stats-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  position: relative;
}
.s-stats::before {
  display: block;
  content: "";
  background-color: #050505;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.stats {
  text-align: center;
}
.stats__col {
  margin: 5.4rem 0;
  padding: 0 2rem;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.stats__count {
  font-family: "metropolis-light", sans-serif;
  font-size: 9.2rem;
  line-height: 1;
  color: #ffffff;
  padding-bottom: 1.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.stats__count::after {
  display: block;
  content: "";
  height: 1px;
  width: 100px;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
}
.stats h5 {
  font-family: "metropolis-regular", sans-serif;
  font-size: 1.8rem;
  line-height: 1.333;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 1.8rem;
  position: relative;
}


/* ------------------------------------------------------------------- 
 * responsive:
 * stats
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {
  .stats {
    max-width: 900px;
  }
  .stats__col {
    margin: 3rem 0;
  }
  .stats__count {
    font-size: 9rem;
  }
}
@media only screen and (max-width: 600px) {
  .stats__count {
    font-size: 8.4rem;
  }
}
@media only screen and (max-width: 400px) {
  .s-stats {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .stats__count {
    font-size: 8.2rem;
  }
}



/* ===================================================================
 * # contact 
 *
 * ------------------------------------------------------------------- */
.s-contact {
  padding-top: 20rem;
  padding-bottom: 10.2rem;
 background:linear-gradient(
    rgba(0,0,0,0.3),
    rgba(0,0,0,0.4)
  ),
   url(images/contact.jpg);
   background-attachment: fixed; 
   background-repeat:no-repeat;
   background-position: center; 
  background-size: cover;
  color: rgba(255, 255, 255, 0.3);
  position: relative;
}
.s-contact a {
  color: #ffffff;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
.s-contact a:hover,
.s-contact a:focus {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-main {
  margin-top: 14.4rem;
  margin-bottom: 4.8rem;
}

.contact-email {
  display: inline-block;
  font-family: "metropolis-light", sans-serif;
  font-size: 5.4rem;
  line-height: 1.222;
  color: #ffffff;
  padding-top: 3.6rem;
  position: relative;
}
.contact-email::before {
  content: "";
  display: block;
  height: 1px;
  width: 60px;
  background-color: #cc147f;
  position: absolute;
  top: 0;
  left: 0;
}

.contact-number {
  font-family: "metropolis-light", sans-serif;
  font-size: 3rem;
  line-height: 1.7;
  display: block;
}

.contact-address {
  font-family: "metropolis-regular", sans-serif;
  font-size: 2.8rem;
  line-height: 1.607;
  margin-top: 2.4rem;
}


/* ------------------------------------------------------------------- 
 * ## contact social
 * ------------------------------------------------------------------- */
.contact-social {
  list-style: none;
  display: inline-block;
  margin: 0 0 0 0.3rem;
  font-size: 3rem;
}
.contact-social li {
  margin-right: 15px;
  padding-left: 0;
  display: inline-block;
}
.contact-social li a {
  color: rgba(255, 255, 255, 0.3);
  border: none !important;
}
.contact-social li a:hover,
.contact-social li a:focus {
  color: #ffffff;
}
.contact-social li:last-child {
  margin: 0;
}



/* ------------------------------------------------------------------- 
 * ## go to top
 * ------------------------------------------------------------------- */
.cl-go-top {
  z-index: 600;
  position: absolute;
  bottom: 10.8rem;
  right: 105px;
}
.cl-go-top a {
  text-decoration: none;
  border: 0 none;
  display: block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  background: black;
  color: white;
  text-align: center;
  text-transform: uppercase;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.cl-go-top a i {
  font-size: 21px;
  line-height: inherit;
}
.cl-go-top a:hover,
.cl-go-top a:focus {
  background-color: #ffffff;
  color: #000000;
}
.cl-go-top::before {
  content: "";
  display: block;
  width: 1px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  top: -115px;
  left: 50%;
}
.cl-go-top::after {
  content: "back to top";
  display: inline-block;
  width: 120px;
  font-size: 1.2rem;
  line-height: 30px;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  color: rgba(255, 255, 255, 0.15);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
  position: absolute;
  left: calc(30px + 15px);
  top: -165px;
}

.menu-is-open .cl-go-top {
  display: none;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * contact
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1600px) {
  .cl-go-top {
    right: 55px;
  }
}
@media only screen and (max-width: 1200px) {
  .s-contact {
    padding-top: 15rem;
  }

  .contact-main {
    margin-top: 13.2rem;
  }

  .contact-email {
    font-size: 5rem;
  }

  .contact-number {
    font-size: 2.6rem;
  }

  .contact-address {
    font-size: 2.4rem;
  }

  .contact-social {
    font-size: 2.8rem;
  }

  .cl-copyright {
    margin-top: 3rem;
  }
}
@media only screen and (max-width: 1000px) {
  .contact-email {
    font-size: 4.2rem;
  }

  .contact-number {
    font-size: 2.4rem;
  }

  .contact-address {
    font-size: 2.1rem;
  }

  .contact-social {
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 800px) {
  .s-contact {
    padding-top: 12rem;
    padding-bottom: 9rem;
  }

  .contact-secondary,
  .cl-copyright {
    padding-right: 7.8rem;
  }

  .contact-secondary {
    margin-bottom: 1.5rem;
  }

  .contact-email {
    font-size: 3.6rem;
  }

  .contact-number {
    font-size: 2rem;
  }

  .contact-address {
    font-size: 2rem;
  }

  .cl-go-top {
    right: 35px;
    bottom: 9rem;
  }
  .cl-go-top a {
    height: 48px;
    width: 48px;
    line-height: 48px;
  }
  .cl-go-top a i {
    font-size: 18px;
  }
  .cl-go-top::after {
    font-size: 1.1rem;
    left: calc(24px + 15px);
  }
}
@media only screen and (max-width: 600px) {
  .s-contact {
    padding-bottom: 6rem;
  }

  .contact-main {
    margin-top: 12rem;
  }

  .contact-email {
    font-size: 3rem;
  }

  .contact-number {
    font-size: 1.8rem;
  }

  .contact-address {
    font-size: 1.8rem;
  }

  .contact-social {
    font-size: 2rem;
  }

  .cl-go-top {
    right: 25px;
    bottom: 7.2rem;
  }
}
@media only screen and (max-width: 480px) {
  .contact-subscribe {
    margin-top: 3rem;
  }

  .mc-form input[type="email"],
  .mc-form label {
    text-align: center;
  }
  .mc-form input[type="email"] {
    padding: 1.2rem 20px 1.2rem;
  }
  .mc-form input[type="submit"] {
    position: static;
    width: 100%;
    margin-bottom: 1.8rem;
  }

  .cl-copyright {
    margin-top: 0;
  }
}
@media only screen and (max-width: 400px) {
  .s-contact {
    padding-top: 9.6rem;
    padding-bottom: 3rem;
  }

  .contact-main {
    margin-top: 9.6rem;
  }

  .contact-secondary {
    padding: 0;
  }

  .contact-email {
    font-size: 2.4rem;
  }

  .contact-number {
    font-size: 1.6rem;
  }

  .cl-copyright {
    margin-top: 9rem;
    padding: 0;
    text-align: center;
  }

  .cl-copyright span {
    font-size: 14px;
  }
  .cl-copyright span::after {
    display: none;
  }

  .cl-go-top {
    bottom: 12rem;
    right: 50%;
    margin-right: -24px;
  }
  .cl-go-top::before,
  .cl-go-top::after {
    display: none;
  }
}

/*# sourceMappingURL=main.css.map */


</style>
</head>

<body id="top">

    <!-- header
    ================================================== -->
    <header class="s-header">

       

        <nav class="header-nav">

            <a href="#0" class="header-nav__close" title="close"><span>Close</span></a>

            <div class="header-nav__content">
                <h3>導引欄</h3>
                
                <ul class="header-nav__list">
                    <li class="current"><a class="smoothscroll"  href="#home" title="home">回首頁</a></li>
                    <li><a class="smoothscroll"  href="#about" title="about">關於我們</a></li>
                    <li><a class="smoothscroll"  href="#works" title="works">產品介紹</a></li>
                    <li><a class="smoothscroll"  href="#contact" title="contact">聯絡我們</a></li>
                </ul>
    
                <p>社群媒體</p>
    
                <ul class="header-nav__social">
                    <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"></i></a>
                    </li>
                    <li>
                        <a href="https://blog.xuite.net/kenny335a/twblog"><i class="fab fa-blogger"></i></a>
                    </li>
                    <li>
                        <a href="#0"><i class="fab fa-line"></i></a>
                    </li>
                </ul>

            </div> <!-- end header-nav__content -->

        </nav> <!-- end header-nav -->

        <a class="header-menu-toggle" href="#0">
            <span class="header-menu-icon"></span>
        </a>

    </header> <!-- end s-header -->


    <!-- home
    ================================================== -->
    <section id="home" class="s-home " data-parallax="scroll" data-image-src="images/hero-bg.jpg" data-natural-width=3000 data-natural-height=2000 data-position-y=top>

        <div class="shadow-overlay"></div>

        <div class="home-content">

            <div class="row home-content__main">
                <h1>
               歡迎來到芳林芭樂農園
                </h1>

                <p>
                    一生懸命，自慢的芭樂 <br>
                    芳林
                </p>
            </div> <!-- end home-content__main -->

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

        <ul class="home-sidelinks">
            <li><a class="smoothscroll" href="#about">關於我們<span>about us</span></a></li>
            <li><a class="smoothscroll" href="#services">產品介紹<span>our product</span></a></li>
            <li><a  class="smoothscroll" href="#contact">聯絡我們<span>contact us</span></a></li>
        </ul> <!-- end home-sidelinks -->

        <ul class="home-social">
            <li class="home-social-title">關注我們</li>
            <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> <!-- end home-social -->

        <a href="#about" class="home-scroll smoothscroll">
            <span class="home-scroll__text">Scroll Down</span>
            <span class="home-scroll__icon"></span>
        </a> <!-- end home-scroll -->

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


    <!-- about
    ================================================== -->
    <section id='about' class="s-about">

        <div class="row section-header" data-aos="fade-up">
            <div class="col-full">
                <h3 class="subhead">關於我們</h3>
                <h1 class="display-1">WELCOME</h1>
            </div>
        </div> <!-- end section-header -->

        <div class="row" data-aos="fade-up">
            <div class="col-full">
                <p class="lead">
                    芳林․芭樂莊園所生產的芭樂，以對土地較友善的種植方式，<br>
                    嚴謹的管理及記錄生產過程，並讓它以最自然的方式自然生長，<br>
                    讓它擁有該有的原始風味，就像種給自己家人吃一樣，<br>
                    希望您也可以透過芳林，安心與健康的食用，這就是芳林給您最好的祝福。
                </p>
            </div>
        </div> <!-- end about-desc -->

        <div class="row">
                
            <div class="about-process process block-1-2 block-tab-full">

                <div class="process__vline-left"></div>
                <div class="process__vline-right"></div>

                <div class="col-block process__col" data-item="1" data-aos="fade-up">
                    <div class="process__text">
                        <h4>天然無毒的栽培方式</h4>

                        <p>
                        草生栽培
                        </p>
                    </div>
                </div>
                <div class="col-block process__col" data-item="2" data-aos="fade-up">
                    <div class="process__text">
                        <h4>產銷履歷把關</h4>

                        <p>
                        證明
                        </p>
                    </div>
                </div>
                <div class="col-block process__col" data-item="3" data-aos="fade-up">
                    <div class="process__text">
                        <h4>老闆的經驗</h4>

                        <p>
                         為何要來栽種芭樂
                        </p>
                    </div>
                </div>
                <div class="col-block process__col" data-item="4" data-aos="fade-up">
                    <div class="process__text">
                        <h4>珍珠芭樂的香甜介紹</h4>

                        <p>
                        芭樂的好吃
                        </p>
                    </div>
                </div>

            </div> <!-- end process -->

        </div> <!-- end about-stats -->

    </section> <!-- end s-about -->


    <!-- services
    ================================================== -->
    <section id='services' class="s-services light-gray">

        <div class="row section-header" data-aos="fade-up">
            <div class="col-full">
                <h3 class="subhead">草生栽培</h3>
                <h1 class="display-1">We have everything you need to launch and grow a successful digital business.</h1>
            </div>
        </div> <!-- end section-header -->

        <div class="row" data-aos="fade-up">
            <div class="col-full">
                <p class="lead">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. 
                </p>
            </div>
        </div> <!-- end about-desc -->

        <div class="row services-list block-1-3 block-m-1-2 block-tab-full">

            <div class="col-block service-item " data-aos="fade-up">
                <div class="service-icon service-icon--brand-identity">
                    <i class="icon-tv"></i>
                </div>
                <div class="service-text">
                    <h3 class="h4">Brand Identity</h3>
                    <p>Nemo cupiditate ab quibusdam quaerat impedit magni. Earum suscipit ipsum laudantium. 
                    Quo delectus est. Maiores voluptas ab sit natus veritatis ut. Debitis nulla cumque veritatis.
                    Sunt suscipit voluptas ipsa in tempora esse soluta sint.
                    </p>
                </div>
            </div>

            <div class="col-block service-item" data-aos="fade-up">
                <div class="service-icon  service-icon--illustration">
                    <i class="icon-group"></i>
                </div>
                <div class="service-text">
                    <h3 class="h4">Illustration</h3>
                    <p>Nemo cupiditate ab quibusdam quaerat impedit magni. Earum suscipit ipsum laudantium. 
                    Quo delectus est. Maiores voluptas ab sit natus veritatis ut. Debitis nulla cumque veritatis.
                    Sunt suscipit voluptas ipsa in tempora esse soluta sint.
                    </p>
                </div>
            </div>

            <div class="col-block service-item" data-aos="fade-up">
                <div class="service-icon  service-icon--web-design">
                    <i class="icon-earth"></i>
                </div>  
                <div class="service-text">
                    <h3 class="h4">Web Design</h3>
                    <p>Nemo cupiditate ab quibusdam quaerat impedit magni. Earum suscipit ipsum laudantium. 
                    Quo delectus est. Maiores voluptas ab sit natus veritatis ut. Debitis nulla cumque veritatis.
                    Sunt suscipit voluptas ipsa in tempora esse soluta sint.
                    </p>
                </div>
            </div>


        </div> <!-- end services-list -->

    </section> <!-- end s-services -->


    <!-- works
    ================================================== -->
    <section id='works' class="s-works">
                
        <div class="row section-header" data-aos="fade-up">
            <div class="col-full">
                <h3 class="subhead">芳林生態</h3>
                <h1 class="display-1">大地的滋潤，讓芭樂香甜美味</h1>
            </div>
        </div> <!-- end section-header -->

     











        <div class="testimonials-wrap" data-aos="fade-up">

            <div class="row">
                <div class="col-full testimonials-header">
                    <h2 class="h1">What Clients Are Saying.</h2>
                </div>
            </div>

            <div class="row testimonials">

                <div class="col-full testimonials__slider">

                    <div class="testimonials__slide">
                        <img src="images/avatars/user-01.jpg" alt="Author image" class="testimonials__avatar">
                        <p>Qui ipsam temporibus quisquam velMaiores eos cumque distinctio nam accusantium ipsum. 
                        Laudantium quia consequatur molestias delectus culpa facere hic dolores aperiam. Accusantium quos qui praesentium corpori.</p>
                        <div class="testimonials__author">
                            Tim Cook
                            <span>CEO, Apple</span>
                        </div>
                    </div> <!-- end testimonials__slide -->

                    <div class="testimonials__slide">
                        <img src="images/avatars/user-05.jpg" alt="Author image" class="testimonials__avatar">
                        <p>Excepturi nam cupiditate culpa doloremque deleniti repellat. Veniam quos repellat voluptas animi adipisci.
                        Nisi eaque consequatur. Quasi voluptas eius distinctio. Atque eos maxime. Qui ipsam temporibus quisquam vel.</p>
                        <div class="testimonials__author">
                            Sundar Pichai
                            <span>CEO, Google</span>
                        </div>
                    </div> <!-- end testimonials__slide -->

                    <div class="testimonials__slide">
                        <img src="images/avatars/user-02.jpg" alt="Author image" class="testimonials__avatar">
                        <p>Repellat dignissimos libero. Qui sed at corrupti expedita voluptas odit. Nihil ea quia nesciunt. Ducimus aut sed ipsam.  
                        Autem eaque officia cum exercitationem sunt voluptatum accusamus. Quasi voluptas eius distinctio.</p>
                        <div class="testimonials__author">
                            Satya Nadella
                            <span>CEO, Microsoft</span>
                        </div>
                    </div> <!-- end testimonials__slide -->
                    
                </div> <!-- end testimonials__slider -->

            </div> <!-- end testimonials -->

        </div> <!-- end testimonials-wrap -->

    </section> <!-- end s-works -->


   

    <!-- contact
    ================================================== -->
    <section id="contact" class="s-contact">

        <div class="row section-header" data-aos="fade-up">
            <div class="col-full">
                <h3 class="subhead subhead--light">聯絡我們</h3>
                <h1 class="display-1 display-1--light">聯絡資訊及交通路徑</h1>
            </div>
        </div> <!-- end section-header -->

        <div class="row">

            <div class="col-full contact-main" data-aos="fade-up">
                <p>
                        <span class="contact-number">鄭宗林</span>
                <a href="mailto:#0" class="contact-email">kenny335a@ yahoo.com.tw</a>
                <span class="contact-number">07-371-2376</span>
                <span class="contact-number">0910-326-822</span>
                <span class="contact-number">可前往岡山火車站轉乘計程車($200)或由農場主人接送</span>
                </p>
            </div> <!-- end contact-main -->

        </div> <!-- end row -->

        <div class="row">

            <div class="col-five tab-full contact-secondary" data-aos="fade-up">
                <h3 class="subhead subhead--light">地址</h3>

                <p class="contact-address">
                    820高雄市岡山區嘉峰路600巷高鐵 橋下
                </p>
            </div> <!-- end contact-secondary -->

            <div class="col-five tab-full contact-secondary" data-aos="fade-up">
                <h3 class="subhead subhead--light">追蹤我們</h3>

                <ul class="contact-social">
                    <li>
                        <a href="#0"><i class="fab fa-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#0"><i class="fab fa-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#0"><i class="fab fa-instagram"></i></a>
                    </li>
                </ul> <!-- end contact-social -->

            </div> <!-- end contact-secondary -->

        </div> <!-- end row -->

        <div class="cl-go-top">
            <a class="smoothscroll" title="Back to Top" href="#top"><i class="fas fa-arrow-up" aria-hidden="true"></i></a>
        </div>

    </section> <!-- end s-contact -->



 


    <!-- Java Script
    ================================================== -->
    
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://www.ruan-jian.com/ajax/libs/jquery-placeholder/2.1.2/jquery.placeholder.js"></script>
    <script src="https://www.ruan-jian.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
    <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@3.2.0/imagesloaded.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
    <script src="https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe.min.js"></script>
    <script src="https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script>   
     <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  


    
    <script type="text/javascript">
    
    (function($) {

"use strict";

var cfg = {
    scrollDuration : 800, // smoothscroll duration
    mailChimpURL   : 'https://facebook.us8.list-manage.com/subscribe/post?u=cdb7b577e41181934ed6a6a44&amp;id=e6957d85dc'   
},

$WIN = $(window);
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);


/* Preloader
* -------------------------------------------------- */
var clPreloader = function() {
    
    $("html").addClass('cl-preload');

    $WIN.on('load', function() {

        //force page scroll position to top at page refresh
        // $('html, body').animate({ scrollTop: 0 }, 'normal');

        // will first fade out the loading animation 
        $("#loader").fadeOut("slow", function() {
            // will fade out the whole DIV that covers the website.
            $("#preloader").delay(300).fadeOut("slow");
        }); 
        
        // for hero content animations 
        $("html").removeClass('cl-preload');
        $("html").addClass('cl-loaded');
    
    });
};


/* Menu on Scrolldown
* ------------------------------------------------------ */
var clMenuOnScrolldown = function() {
    
    var menuTrigger = $('.header-menu-toggle');

    $WIN.on('scroll', function() {

        if ($WIN.scrollTop() > 150) {
            menuTrigger.addClass('opaque');
        }
        else {
            menuTrigger.removeClass('opaque');
        }

    });
};


/* OffCanvas Menu
* ------------------------------------------------------ */
var clOffCanvas = function() {

    var menuTrigger     = $('.header-menu-toggle'),
        nav             = $('.header-nav'),
        closeButton     = nav.find('.header-nav__close'),
        siteBody        = $('body'),
        mainContents    = $('section, footer');

    // open-close menu by clicking on the menu icon
    menuTrigger.on('click', function(e){
        e.preventDefault();
        siteBody.toggleClass('menu-is-open');
    });

    // close menu by clicking the close button
    closeButton.on('click', function(e){
        e.preventDefault();
        menuTrigger.trigger('click');
    });

    // close menu clicking outside the menu itself
    siteBody.on('click', function(e){
        if( !$(e.target).is('.header-nav, .header-nav__content, .header-menu-toggle, .header-menu-toggle span') ) {
            siteBody.removeClass('menu-is-open');
        }
    });

};


/* photoswipe
* ----------------------------------------------------- */
var clPhotoswipe = function() {
    var items = [],
        $pswp = $('.pswp')[0],
        $folioItems = $('.item-folio');

    // get items
    $folioItems.each( function(i) {

        var $folio = $(this),
            $thumbLink =  $folio.find('.thumb-link'),
            $title = $folio.find('.item-folio__title'),
            $caption = $folio.find('.item-folio__caption'),
            $titleText = '<h4>' + $.trim($title.html()) + '</h4>',
            $captionText = $.trim($caption.html()),
            $href = $thumbLink.attr('href'),
            $size = $thumbLink.data('size').split('x'),
            $width  = $size[0],
            $height = $size[1];
    
        var item = {
            src  : $href,
            w    : $width,
            h    : $height
        }

        if ($caption.length > 0) {
            item.title = $.trim($titleText + $captionText);
        }

        items.push(item);
    });

    // bind click event
    $folioItems.each(function(i) {

        $(this).on('click', function(e) {
            e.preventDefault();
            var options = {
                index: i,
                showHideOpacity: true
            }

            // initialize PhotoSwipe
            var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
            lightBox.init();
        });

    });
};


/* Stat Counter
* ------------------------------------------------------ */
var clStatCount = function() {
    
    var statSection = $(".s-stats"),
        stats = $(".stats__count");

    statSection.waypoint({

        handler: function(direction) {

            if (direction === "down") {

                stats.each(function () {
                    var $this = $(this);

                    $({ Counter: 0 }).animate({ Counter: $this.text() }, {
                        duration: 4000,
                        easing: 'swing',
                        step: function (curValue) {
                            $this.text(Math.ceil(curValue));
                        }
                    });
                });

            } 

            // trigger once only
            this.destroy();

        },

        offset: "90%"

    });
};





/* slick slider
 * ------------------------------------------------------ */
var clSlickSlider = function() {
    
    $('.testimonials__slider').slick({
        arrows: false,
        dots: true,
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        pauseOnFocus: false,
        autoplaySpeed: 1500,
        responsive: [
            {
                breakpoint: 900,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
};


/* Smooth Scrolling
* ------------------------------------------------------ */
var clSmoothScroll = function() {
    
    $('.smoothscroll').on('click', function (e) {
        var target = this.hash,
        $target    = $(target);
        
            e.preventDefault();
            e.stopPropagation();

     