    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC|Noto+Serif+TC" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<style>
* {
  line-height: 1.5;
  letter-spacing: 0.2rem;
}

.left-20 {
  position: relative;
  left: 20%;
}

.left-10 {
  position: relative;
  left: 10%;
}



.display-1 {
  font-size: 90px;
}

.display-2 {
  font-size: 60px;
}

.display-3 {
  font-size: 40px;
}

.display-4 {
  font-size: 32px;
}

.px-auto {
  padding-left: auto;
  padding-right: auto;
}

.pt-5 {
  padding-top: 5rem;
}

.pb-5 {
  padding-bottom: 5rem;
}

.pr-5 {
  padding-right: 5rem;
}

.pl-5 {
  padding-left: 5rem;
}

.pr-4 {
  padding-right: 4rem;
}

.pl-4 {
  padding-left: 4rem;
}

.pt-4 {
  padding-top: 4rem;
}

.pb-4 {
  padding-bottom: 4rem;
}

.pt-3 {
  padding-top: 3rem;
}

.pb-3 {
  padding-bottom: 3rem;
}

.pr-3 {
  padding-right: 3rem;
}

.pl-3 {
  padding-left: 3rem;
}

.pt-2 {
  padding-top: 2rem;
}

.pb-2 {
  padding-bottom: 2rem;
}

.pr-2 {
  padding-right: 2rem;
}

.pl-2 {
  padding-left: 2rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-5 {
  margin-top: 5rem;
}

.mb-5 {
  margin-bottom: 5rem;
}

.mr-5 {
  margin-right: 5rem;
}

.ml-5 {
  margin-left: 5rem;
}

/*.mt-4 {
  margin-top: 4rem;
}*/

.mb-4 {
  margin-bottom: 4rem;
}

.ml-4 {
  margin-left: 4rem;
}

.mr-4 {
  margin-right: 4rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mr-3 {
  margin-right: 3rem;
}

.ml-3 {
  margin-left: 3rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 2rem;
}

.mr-2 {
  margin-right: 2rem;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-white {
  color: #fff;
}

.text-primary {
  color: #2e86de;
}

.text-light-primary {
  color: #54a0ff;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix {
  clear: both;
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-75 {
  width: 75%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.bg-primary {
  background-color: #2e86de;
}

.bg-primary-light {
  background-color: #54a0ff;
}

.bg-danger {
  background-color: #ee5253;
}

.bg-danger-light {
  background-color: #ff6b6b;
}

.bg-warning {
  background-color: #ff9f43;
}

.bg-warning-light {
  background-color: #feca57;
}

.text-14 {
  font-size: 14px;
}

.text-15 {
  font-size: 15px;
}

.text-16 {
  font-size: 16px;
}

.text-18 {
  font-size: 18px;
}

.text-20 {
  font-size: 20px;
}

.text-23 {
  font-size: 23px;
}

.text-25 {
  font-size: 25px;
}

.indent-30 {
  text-indent: 30px;
}

.indent-25 {
  text-indent: 25px;
}

.indent-20 {
  text-indent: 20px;
}

p.text-18 {
  text-indent: 20px;
  font-size: 18px;
}

img.shadow-filter {
  -webkit-filter: drop-shadow(5px 10px 0.5rem rgba(0, 0, 0, 0.5));
          filter: drop-shadow(5px 10px 0.5rem rgba(0, 0, 0, 0.5));
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
}

img.shadow-filter:hover {
  -webkit-filter: drop-shadow(5px 10px 1rem rgba(0, 0, 0, 0.5));
          filter: drop-shadow(5px 10px 1rem rgba(0, 0, 0, 0.5));
}

img.shadow-filter-light {
  -webkit-filter: drop-shadow(5px 10px 0.5rem rgba(255, 255, 255, 0.5));
          filter: drop-shadow(5px 10px 0.5rem rgba(255, 255, 255, 0.5));
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
}

img.shadow-filter-light:hover {
  -webkit-filter: drop-shadow(5px 10px 1rem rgba(255, 255, 255, 0.8));
          filter: drop-shadow(5px 10px 1rem rgba(255, 255, 255, 0.8));
}

.section {
  padding-left: 40px;
  padding-right: 40px;
}

.uk-lightbox.uk-open {
  display: block;
  opacity: 1;
  z-index: 10000;
}

.section.s1 {
  background: url(userUpload/images/佳芳/brand/logo-transparent-1.png) center center;
  background-size: cover;
}

.section.s2 {
  background: url(userUpload/images/佳芳/brand/canva-1.png) center center;
  background-size: cover;
}

.section.s3 {
  background: url(http://www.lohasplus.com.tw/userUpload/20180718%E5%B0%8F%E7%B6%A0%E8%91%89%E7%A6%AA.jpg) center center;
  background-size: cover;
}

.section.s4 {
  background: url(userUpload/images/佳芳/brand/44.jpg) right;
  background-size: cover;
}

.section.s5 {
  background: url(userUpload/images/佳芳/brand/31.jpeg) center center;
  background-size: cover;
}

.section.s6 {
  background: url(userUpload/images/佳芳/brand/45.jpg) center center;
  background-size: cover;
}

.section.s7 {
  background: url(userUpload/images/佳芳/brand/46.jpg) center center;
  background-size: cover;
}

ul.navbar-nav li {
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

ul.navbar-nav li a {
  font-size: 18px;
}

ul.navbar-nav li img {
  max-width: 100% !important;
  width: 75% !important;
}

ul.navbar-right li.dropdown ul.dropdown-menu li {
  margin-left: 0rem;
}

ul.navbar-right li.dropdown ul.dropdown-menu li a:hover, ul.navbar-right li.dropdown ul.dropdown-menu li a:focus {
  background: #54a0ff !important;
}

span {
  background: #576574 !important;
}

.card {
  border: 1px solid transparent;
  margin-left: 5rem;
  border-radius: 5px;
  width: 38rem;
  background: #ecf0f1;
}

.card .card-body {
  padding: 15px;
}

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

#photo1:hover {
  -webkit-transform: rotate(0deg) !important;
          transform: rotate(0deg) !important;
}

#photo2:hover {
  -webkit-transform: rotate(0deg) !important;
          transform: rotate(0deg) !important;
}

span {
  background: #fff !important;
}

h2.intro-text.text-center {
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    height: 0;
    margin: 0 !important;
}

.navbar-default { 
    border-color: #101010 !important;
    background-color: #222 !important
}

.col-md-offset-1 {margin-left: 0 !important}
.col-md-10 {width: 100% !important}

.container {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
}

.navbar-default .navbar-nav>li>a {color: #fff !important}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a {
   color: #fff !important;
   background-color: #080808 !important;
}

.bg-half-dark {
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

@media (min-width: 550px)
.container {
    width: 100% !important;
}

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: flex !important;
}

@media (max-width: 812px) {
  #photo1 {
    left: 10%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@media (max-width: 900px) {
  hr {margin: 0 0 -20px 0;}

  #photo1 {
    left: 0%;
    -webkit-transform: rotate(0deg) !important;
            transform: rotate(0deg) !important;
  }
  #photo2 {
    left: 0%;
    -webkit-transform: rotate(5deg) !important;
            transform: rotate(5deg) !important;
  }
  .navbar-brand img {
    position: relative;
    top: -3rem;
  }
  .display-1, .display-3 {
    font-size: 32px;
    position: relative;
    top: 2rem;
  }
  .display-5 {
    font-size: 32px;
    position: relative;
    top: 3rem;
  }
  .s1 .mt-5 {
    margin-top: 0;
  }
  .s1 .textBox .pr-3, .s1 .textBox .pl-3, .s1 .textBox .pl-5, .s1 .textBox .pr-5, .s2 .textBox .pr-3, .s2 .textBox .pl-3, .s2 .textBox .pl-5, .s2 .textBox .pr-5, .s3 .textBox .pr-3, .s3 .textBox .pl-3, .s3 .textBox .pl-5, .s3 .textBox .pr-5, .s4 .textBox .pr-3, .s4 .textBox .pl-3, .s4 .textBox .pl-5, .s4 .textBox .pr-5, .s5 .textBox .pr-3, .s5 .textBox .pl-3, .s5 .textBox .pl-5, .s5 .textBox .pr-5, .s6 .textBox .pr-3, .s6 .textBox .pl-3, .s6 .textBox .pl-5, .s6 .textBox .pr-5, .s7 .textBox .pr-3, .s7 .textBox .pl-3, .s7 .textBox .pl-5, .s7 .textBox .pr-5 {
    padding-left: 5px;
    padding-right: 5px;
  }
  .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 5px !important;
    margin-top: 30px !important;
  }

  .textBox {position: relative; left: -5%;padding-left: 5px;padding-right: 20px;}
  .display-4 {position: relative; left: 15%}
}

@media (min-width: 1336px) {
   ul.navbar-nav li {
     margin-left: 0rem !important;
     margin-right: 0.5rem !important;
  }
}
/*# sourceMappingURL=main-3.css.map */
</style>

    <div id="fullPage" uk-lightbox="animation: fade">

        <script>
            if($(window).width() < 1024){ $('#fullPage').removeAttr('id'); }
        </script>

        <div class="section s1 fp-auto-height-responsive">
            <div class="container-fluid">
                <div class="row bg-half-dark pt-4 pb-4">

                    <div class="col-sm-6 text-white">
                        <h1 class="display-1 pl-2 text-white">品牌故事</h1>
                        <div class="textBox mt-5">
                            <h4 id="title1" class="display-4 pl-5 text-white"></h4>
                            <p class="text-monospace text-18 mt-3 pl-3 pr-3">
                                陳麗雪帶著堅毅的表情說「不改變，就是被淘汰」。身為媳婦，卻毅然將家族茶園轉型有機栽種，面臨親友的質欵與經濟壓力，
                                不是一般人所能承受，但陳麗雪卻是硬生生的挺了過來。當別人還不認識有機，對有機不能認可時，她卻堅持做到底，為的是「家」，
                                還有那長期支持他們的死忠顧客。 而這一路的跌撞辛苦，最終有了回報，民國100年陳麗雪獲選為建國百年女神龍，「佳芳有機茶園 」，
                                再度打響名號。
                            </p>

                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="d-block img" uk-grid>
                            <a class="uk-inline" href="https://www.taiwan-tea.net/wp-content/uploads/2018/02/brand-4.jpg">
                                <img id="photo1" src="https://www.taiwan-tea.net/wp-content/uploads/2018/02/brand-4.jpg" alt="" 
                                class="img-fluid img-thumbnail left-20 shadow-filter-light img-transparent">
                            </a>
                        </div>
                    </div>

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

        <div class="section s2 fp-auto-height-responsive">
            <div class="container-fluid">
                <div class="row bg-half-dark pt-4 pb-4">
                    <div class="col-sm-6">
                        <div class="d-block img" uk-grid>
                            <a class="uk-inline" href="/userUpload/images/佳芳/brand/6.png">
                                <img id="photo2" src="/userUpload/images/佳芳/brand/6.png" alt="" 
                                class="img-fluid img-thumbnail shadow-filter-light img-transparent">
                            </a>
                        </div>
                    </div>


                    <div class="col-sm-6 text-white">
                        <h1 class="display-3 text-white">冷泡綠茶重新出發，紅烏龍打響名號</h1>
                        <div class="textBox">

                            <p class="text-monospace text-20 indent-25 pl-5 pr-5 mt-3">
                                面對新品種的「清心大冇」一開始摸不清特性，陳麗雪將採下來的茶葉按原來製程作成烏龍茶，卻發現極難入口，
                                根本無法推出市場，只得再度向茶改場請求緩助，幸而得到了冷泡茶技術，採了近十公斤的茶葉，陳麗雪試著製成冷泡綠茶，沒想到竟大受歡迎，為佳芳有機茶園開闢了一條新的康莊大道。
                            </p>

                            <p class="text-monospace text-20 indent-25 pl-5 pr-5 mt-3">
                                「這冷泡綠茶，含有豐富的兒茶素、葉綠素、茶多酚及茶酵素，對人體保健相當有益處」陳麗雪自從推出冷泡綠茶後，
                                逢人就會開心地分享，有機栽種的茶葉的好處，不僅對人體保健，也不用擔心會有農藥殘留的問題。而被「小綠葉蟬」吸吮過的茶葉，
                                則可製成蜜香紅香。民國97年，陳麗雪運用茶改場台東分場技術，以清心大冇製成紅烏龍，並代表台東到台北參展，
                                徹底改變有機茶不好喝的刻板印象，從此打響名。現今，最大有機通路商里仁也是客戶之一。                            
                            </p>
                        </div>
                    </div>

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

        <div class="section s3 fp-auto-height-responsive">
            <div class="container-fluid">
                <div class="row bg-half-dark pt-4 pb-4">

                    <div class="col-sm-6 text-white">
                        <h1 class="display-5 pl-2 text-white">嫁為茶農婦，投入夫家製茶事業</h1>
                        <div class="textBox mt-5">
                            <p class="text-monospace text-18 mt-3 pl-3 pr-3">
                                遠遠望去，層層山巒與茶園交織出一幅翠綠的自然景緻!!令人難以理解的是，佳芳有機茶園竟是這唯一僅存的茶園。
                                 時間回到民國38年，配合政府政策，這曾種植著大片牧草供繁殖牛吃，沒想到，2、3年後卻發現牛無法生產，政府只好放棄該計畫，
                                 此時，只得將牧草全都砍掉，沒想到卻遇大水來襲，造成大量土石流失。這時，水土保持局前來關心，發現這裏的地質、氣候適合種茶，
                                 對水土保持也很有幫助，於是，以低價提供台茶十二號茶苗給農民栽植，還設立茶改場台東分場輔導茶農製茶。
                            </p>

                            <p class="text-monospace text-18 mt-3 pl-3 pr-3">
                                民國77年，嫁為台東媳婦的陳麗雪，也投入了夫家製茶事業，當時正值黃金期，「茶做了就馬上有人收走。」陳麗雪回憶著說，
                                全盛時期，茶園超過十公頃，年營收達六百萬元。                            
                            </p>


                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="d-block img" uk-grid>
                            <a class="uk-inline" href="/userUpload/images/佳芳/brand/43.jpg">
                                <img src="/userUpload/images/佳芳/brand/43.jpg" alt="" 
                                class="img-fluid img-thumbnail shadow-filter-light">
                            </a>
                        </div>
                    </div>

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

        <div class="section s4 fp-auto-height-responsive">
            <div class="container-fluid">
                <div class="row bg-half-dark pt-4 pb-4">
                    <div class="col-sm-6">
                        <div class="d-block img" uk-grid>
                            <a class="uk-inline" href="/userUpload/images/佳芳/brand/30.jpeg">
                                <img id="photo4" src="/userUpload/images/佳芳/brand/30.jpeg" alt="" 
                                class="img-fluid img-thumbnail shadow-filter-light">
                            </a>
                        </div>

                        <div class="d-block text-white text-16 textBox">


                            <p class="text-monospace indent-25 pl-5 pr-5 mt-3">
                                「記得那年兒子還好小，但沒有收入，卻還得把錢投入購買有機肥、機具等，只好每天都煮粥給他吃，根本沒錢買奶粉。」
                                陳麗雪帶著一絲虧欠地說。 幸好，第三年茶樹恢復了健康，加上茶改場的協助，部分改種具有強韌生命力、抗病菌強，
                                且含氧量高的台灣原生種「清心大冇」，並輔以深層海洋水灌溉，終於開始有了那麼一點回收。                            
                            </p>

                        </div>
                    </div>


                    <div class="col-sm-6 text-white">
                        <h1 class="display-3 text-white mt-5">市場衝擊，轉型有機尋出路</h1>
                        <div class="textBox text-16">

                            <p class="text-monospace indent-25 pl-5 pr-5 mt-3">
                                沒想到，當全台經濟起飛時期，卻是陳麗雪面對挑戰的開始。那時阿里山、梨山等高山茶受到消費者喜愛，
                                加上政府開放進口茶，低海拔的茶葉泛人問津，面臨市場淘汰的命運，農民只得紛紛轉型栽種其他作物，
                                而陳麗雪夫家的製茶事業也無法倖免。 「究竟要怎麼做，才能不被市場淘汰?」苦思出路的陳麗雪，先轉型做零售，
                                「批發商都倒了，只能靠自己」，那時，零售量不如批發，茶園面積只得從十公傾，一直減到三公傾，但靠著陳麗雪的用心推廣，
                                還是累積了三、五百位的長期客源。直到去上了「有機」課程，終於讓陳麗雪尋找到扭轉危機的曙光。 
                            </p>

                            <p class="text-monospace indent-25 pl-5 pr-5 mt-3">
                                「究竟要不要轉型有機?? 」，
                                在了解有機種植對健康、生態有益後，陳麗雪想著：「在我們最慘的時候，親朋好友依然支持我們的茶，
                                我們理當要回饋照顧他們的健康才是。」就是這想法，給了陳麗雪勇氣，取得先生同意下，她多次與親友溝通，卻都遭到反對，
                                只是陳麗雪依然堅持著，最後家族親友勉強同意試種一年有機，沒想到，那年收成慘趺，讓親友們毅然放棄有機，轉回慣型農法。
                            </p>

                        </div>
                    </div>

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

        <div class="section s7 fp-auto-height-responsive">
            <div class="container-fluid">
                <div class="row bg-half-dark pt-4 pb-4">
                    <div class="col-sm-6">
                        <div class="d-block img" uk-grid>
                            <a class="uk-inline" href="/userUpload/images/佳芳/brand/30.jpeg">
                                <img id="photo7" src="/userUpload/images/佳芳/brand/30.jpeg" alt="" 
                                class="img-fluid img-thumbnail shadow-filter-light">
                            </a>
                        </div>
                        

                        <div class="d-block text-white text-16 textBox">

                            <p class="text-monospace indent-25 pl-5 pr-5 mt-5">
                                原來有次在收成前十幾天左右，
                                擔心採茶工人不好採，便先把茶樹周邊的草都砍盡，沒想到，到了採茶前幾天，卻發現茶葉變的好醜，詢問了茶改場才知，
                                原來草可以分攤草食性昆蟲的啃食，若是太早把草砍光，那麼昆蟲只能吃茶葉了。
                            </p>

                            <p class="text-monospace indent-25 pl-5 pr-5 mt-3">
                                有過這次經驗，現今，都是在採茶前二日，才會進行除草。                            
                            </p>

                        </div>
                    </div>


                    <div class="col-sm-6 text-white">
                        <h1 class="display-3 text-white mt-5">市場衝擊，轉型有機尋出路</h1>
                        <div class="textBox text-16">
                            <p class="text-monospace indent-25 pl-5 pr-5 mt-3">
                                當時的陳麗雪並不想放棄，最後只得分家，各自栽種，在先生的支持下，夫婦倆獨自打理著有機茶園。 熬過黑暗期，有機茶園漸露
                                曙光 「開始種有機的那一、二年，每株茶樹看起來就像生病一樣，亳無生氣，完全沒有抵抗力，更別談收成了」陳麗雪回想著說。當時，
                                只能給予有機肥，以人工抓蟲、除草，提升茶樹的抵抗力，讓土地恢復地力。                            
                            </p>

                            <p class="text-monospace indent-25 pl-5 pr-5 mt-3">
                                「記得那年兒子還好小，但沒有收入，卻還得把錢投入購買有機肥、機具等，只好每天都煮粥給他吃，根本沒錢買奶粉。」
                                陳麗雪帶著一絲虧欠地說。 幸好，第三年茶樹恢復了健康，加上茶改場的協助，部分改種具有強韌生命力、抗病菌強，
                                且含氧量高的台灣原生種「清心大冇」，並輔以深層海洋水灌溉，終於開始有了那麼一點回收。                            
                            </p>

                            <p class="text-monospace indent-25 pl-5 pr-5 mt-3">
                                接著，陳麗雪將茶園中的茶樹陸續換植為新品種，現今有金萱、清心大冇等，而自然生態也慢慢形成，小綠葉蟬、蜘蛛、螳蚓、
                                飄蟲都陸續出現在茶園中。 「草也是很要的，不可以太早把草砍光。」陳麗雪笑著說。                            
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    
        <div class="section s5 fp-auto-height-responsive">
            <div class="container-fluid">
                <div class="row bg-half-dark pt-4 pb-4">
                    <div class="col-sm-6">
                        <div class="d-block img" uk-grid>
                            <a class="uk-inline" href="/userUpload/images/佳芳/brand/9.jpeg">
                                <img id="photo5" src="/userUpload/images/佳芳/brand/9.jpeg" alt="" 
                                class="img-fluid img-thumbnail shadow-filter-light">
                            </a>
                        </div>
                    </div>


                    <div class="col-sm-6 text-white">
                        <h1 class="display-3 text-white">結合休閒觀光，讓「茶園」變的好好玩</h1>
                        <div class="textBox">

                            <p class="text-monospace text-20 indent-25 pl-5 pr-5 mt-3">
                                民國99年，陳麗雪將五甲的有機茶園規劃成體驗區， 帶領遊客在茶園中體驗採茶，觀察茶園生態，甚至還研發茶品DIY， 
                                每年絞盡腦汁推陳出新，就是要讓遊客玩的盡興。像是將採下的茶葉，經過清洗後， 以果汁機打成綠茶汁，加入梅子、蜂蜜微調，
                                便是好喝又解喝的養生飲品；麵粉中加入綠茶汁， 便是翡翠包DIY的外皮；或是麵粉、蛋白、奶油再調入紅烏龍茶和成麵糊，
                                便可體驗蛋捲製作， 「每每那煎蛋捲的香氣四溢，總讓客人忍不住要自己動手做一條品嚐。」                            
                            </p>

                            <p class="text-monospace text-20 indent-25 pl-5 pr-5 mt-3">
                                陳麗雪開心地說，再配上現場沖泡的茶飲， 任誰都是帶著滿足而愉快的心情離開。 推動茶園體驗已有四年，
                                如今陳麗雪想帶領著鄰居以「一戶一特色」來推動社區有機村， 讓年輕人有回鄉工作的意願，讓老一輩有傳承教導的機會，
                                這是她未來努力想完成的夢。                            
                            </p>
                        </div>
                    </div>

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

        <div class="section s6 fp-auto-height-responsive">
            <div class="container-fluid">
                <div class="row bg-half-dark pt-4 pb-4">

                    <div class="col-sm-6 text-white">
                        <h1 class="display-3 text-white">結合休閒觀光，讓「茶園」變的好好玩 (續)</h1>
                        <div class="textBox">

                            <p class="text-monospace text-20 indent-25 pl-5 pr-5 mt-3">
                                陳麗雪開心地說，再配上現場沖泡的茶飲， 任誰都是帶著滿足而愉快的心情離開。 推動茶園體驗已有四年，
                                如今陳麗雪想帶領著鄰居以「一戶一特色」來推動社區有機村， 讓年輕人有回鄉工作的意願，讓老一輩有傳承教導的機會，
                                這是她未來努力想完成的夢。                            
                            </p>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="d-block img" uk-grid>
                            <a class="uk-inline" href="/userUpload/images/佳芳/brand/9.jpeg">
                                <img id="photo2" src="/userUpload/images/佳芳/brand/9.jpeg" alt="" 
                                class="img-fluid img-thumbnail shadow-filter-light">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js"></script>
    <!-- Fullpape js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/vendors/scrolloverflow.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/vendors/easings.min.js"></script>
    <script src="https://kit.fontawesome.com/480b90f7d2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    
<script type="text/javascript">
        new fullpage('#fullPage', {
            //option
            autoScrolling: true,
            navigation: true,
            slidesNavigation: true,
            css3: true,
            scrollingSpeed: 1000
        });

	$("div.collapse ul.nav.navbar-nav:nth-child(2n)").addClass("mt-4");

        //GSAP 
        TweenMax.to ("#photo1", 2, {
            delay: .2,
            x: -80,
            opacity: 1,
            ease: Expo.ease,
            rotation: 17
        });

        TweenMax.to ("#photo2", 2, {
            delay: .2,
            x: 20,
            opacity: 1,
            ease: Expo.ease,
            rotation: -7
        });

        TweenMax.to(".textBox", 2, {
            delay: .6,
            x: 30,
            opacity: 1,
            ease: Expo.ease
        });

        TweenMax.from(".display-1", 2, {
            delay: 1.6,
            x: -30,
            opacity: 0,
            ease: Expo.ease
        });

        TweenMax.from(".img-class", 2, {
            delay: 1.6,
            y: 20,
            opacity: 0,
            ease: Expo.ease
        });

        TweenMax.staggerFrom("ul.navbar-nav li", 2, {
            delay: 1,
            y: 20,
            opacity: 0,
            ease: Expo.ease
        }, 0.1);
</script>