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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>- 關於佳芳 - 臺東大學樂活產業創新平台2017</title>

    <link rel="stylesheet" media="screen" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    <link rel="stylesheet" media="screen" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css.map">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css.map">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot">

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

    <link href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <link href='http://fonts.googleapis.com/css?family=Roboto:100&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

    <script type="text/javaScript" LANGUAGE="JavaScript">

        // Nannette Thacker http://www.shiningstar.net function confirmSubmit() { var agree=confirm("確定要繼續？"); if (agree) return
        true ; else return false ; } // -->

    </script>

    <!-- Google web fonts, https://design.google.com/icons/ -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style type="text/css">

* {
  box-sizing: border-box; }

@media only screen and (min-device-width: 373px) and (max-device-width: 667px) {
  .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    top: 35px; } }

body {
  background-size: cover; }

.container-fluid > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

div {
  line-height: 1.8; }

.bgw {
  background: rgba(255, 255, 255, 0.8); }

.ic {
  display: inline; }

.nav > li {
  font-size: 20px;
  font-weight: 500; }

.border-card {
  border: none;
  border-radius: 3px;
  padding: 15px !important; }

.fs {
  font-size: 23px; }

.fsp {
  font-size: 17px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

.scrollspy {
  height: 200px; }

/* border-title */
.border-title {
  position: relative;
  font-weight: 100;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 2em;
  margin-bottom: 30px;
  text-align: center;
  color: #000 !important; }

.border-title::before,
.border-title::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc((60%-300px)/2);
  height: 2px;
  background: rgba(0, 0, 0, 0.8); }

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

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

/* border-title 2*/
.border-title-2 {
  position: relative;
  font-weight: 100;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 2em;
  margin-bottom: 30px;
  text-align: center;
  color: #000 !important; }

.border-title-2::before,
.border-title-2::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc((30%-300px)/2);
  height: 2px;
  background: rgba(0, 0, 0, 0.8); }

.border-title-2::before {
  left: 0; }

.border-title-2::after {
  right: 0; }

@media only screen and (min-device-width: 373px) and (max-device-width: 667px) {
  .border-title::before,
  .border-title::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc((0%-300px)/2);
    height: 2px;
    background: rgba(0, 0, 0, 0.8); } }

/* border-title */
/* border-text */
.border-text {
  margin-bottom: 20px; }

.border-text > p {
  font-weight: 200;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  letter-spacing: .09em; }

.border-pane {
  margin-top: 30px;
  margin-bottom: 30px;
  border: none;
  border-radius: 5px;
  background: rgba(228, 227, 227, 0.959);
  overflow-wrap: break-word; }

/* border-text */
/* border-content */
.border-content {
  padding: 10px;
  font-size: 15px; }

/* border-content */
h3 {
  font-size: 18px; }

h2, h3 {
  line-height: 1.3;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  clear: both;
  color: #141414;
  margin-bottom: 15px; }

/* image center */
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 37.5em; }

/* image center */
/* media-border */
.media-border {
  background: #fff;
  border: none;
  padding: 10px;
  margin-top: 15px;
  margin-bottom: 15px; }

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

/* video box heading */
#box-video {
  position: relative;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-width: 100%; }

.box-content {
  position: relative;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  margin-bottom: 15px; }

#box-btn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer; }
  #box-btn:hover {
    background: #ddd;
    color: black; }

/* video box heading */
/* video modals fixing */
.video-modals-f {
  position: relative;
  width: 100%;
  height: 27rem;
  top: 0; }

.h-27rem {
  height: 27rem; }

.modals-border-size {
  width: 170%;
  height: 33rem;
  right: 200px;
  transform: translate(-5%, 50%); }

.modals-body-fs {
  width: 103.2%;
  left: -16px;
  top: -16px; }

/* video modals fixing */
/* fixing modals icon */
.fixing-icon {
  font-size: 23px !important;
  float: left;
  position: relative;
  left: -7px;
  top: 1px; }

.icon-circle {
  border-radius: 50%; }

/* fixing modals icon */
.card .card-image {
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.card {
  margin-top: 10px;
  position: relative;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.modal-content{
  transform: translateY(30%) !important;
}

.btn-border {
  background: white !important;
  border: 1px solid white !important;
  color: black !important;
  width: 36px;
  border-radius: 50% !important;
  right: 3.3em;
  top: -1.6em
}

#navPrev,
#navNext {
  position: absolute;
  color: lightgray;
  font-size: 2em;
  top: 5em;
}

.navPrev-right {
  right: 2em;
}

.navNext-left {
  left: 2em;
}

#navPrev:hover,
#navNext:hover {
  color: red;
}

#navPrev[disabled],
#navNext[disabled] {
  color: #cdcdcd;
  cursor: default;
}

/* txt-title */

.txt-title{
  position: relative;
  font-weight: 100;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

.txt-title::before,
.txt-title::after{
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(50%);
  height: 2px;
  width: calc((45%-300px)/2);
  background: darkgray;
}

.txt-title::before{left: 0}
.txt-title::after{right: 0}

/* txt-title */

.list-move{
  position: relative;;
  left: 9em;
}

.list-move-1{
  position: relative;;
  left: 10em;
}

@media only screen 
and (min-device-width: 375px)
and (max-device-width: 667px){
  .list-move{
    position: relative;;
    left: 0;
  }

  .list-move-1{
    left: 0;
  }
}


/*iphone 6/7/8 */

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

  .embed-responsive{
    position: relative;
    display: block;
    height: 200px;
    padding: 0;
    overflow: hidden;
  }

  .embed-responsive-21by9::before{
    padding-top: 0% !important;
  }
}

*{
  box-sizing: border-box;
}

/* mdboostrap b? sung */
.navbar {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  font-weight: 300
}

.navbar .breadcrumb {
  margin: 0;
  padding: .3rem 0 0 1rem;
  background-color: inherit;
  font-size: 15px;
  font-weight: 300
}

.navbar .navbar-toggler {
  outline: 0;
  border-width: 0
}

.navbar .nav-item .nav-link {
  display: block
}

.navbar .nav-item .nav-link.disabled:active {
  pointer-events: none
}

.navbar .nav-item .nav-link .fa {
  padding-right: 3px;
  padding-left: 3px
}

@media (max-width:992px) {
  .navbar .container {
    width: 100%
  }
  .navbar .container .navbar-toggler-right {
    right: 0
  }
  .navbar .nav-item .nav-link {
    padding-right: 6px;
    padding-left: 6px
  }
}

.navbar .dropdown-menu {
  position: absolute !important;
  margin-top: 0
}

.navbar .dropdown-menu a {
  padding: 10px;
  font-size: .9375rem;
  font-weight: 300;
  color: #000 !important
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden
}

.embed-responsive-fixing{
  position: relative;
  top: 30px;
  display: block;
  height: 750px;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: ""
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%
}

.embed-responsive-16by9::before {
  padding-top: 56.25%
}

.embed-responsive-4by3::before {
  padding-top: 75%
}

.embed-responsive-1by1::before {
  padding-top: 100%
}

.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important
}

.justify-content-center {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important
}

.md-form {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem
}

.md-form input[type=email],
.md-form input[type=password],
.md-form input[type=search],
.md-form input[type=text] {
  -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
  -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #ced4da;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  background-color: transparent
}

.md-form input[type=email]:focus:not([readonly]),
.md-form input[type=password]:focus:not([readonly]),
.md-form input[type=search]:focus:not([readonly]),
.md-form input[type=text]:focus:not([readonly]) {
  -webkit-box-shadow: 0 1px 0 0 #4285f4;
  box-shadow: 0 1px 0 0 #4285f4;
  border-bottom: 1px solid #4285f4
}

.md-form input[type=email]:focus:not([readonly])+label,
.md-form input[type=number]:focus:not([readonly])+label,
.md-form input[type=password]:focus:not([readonly])+label,
.md-form input[type=search]:focus:not([readonly])+label,
.md-form input[type=text]:focus:not([readonly])+label {
  color: #4285f4
}

.md-form input[type=email]+label:after,
.md-form input[type=number]+label:after,
.md-form input[type=password]+label:after,
.md-form input[type=search]+label:after,
.md-form input[type=text]+label:after {
  content: "";
  position: absolute;
  top: 65px;
  display: block;
  opacity: 0;
  -webkit-transition: .2s opacity ease-out, .2s color ease-out;
  -o-transition: .2s opacity ease-out, .2s color ease-out;
  transition: .2s opacity ease-out, .2s color ease-out
}

.md-form input[type=email].valid,
.md-form input[type=email]:focus.valid,
.md-form input[type=password].valid,
.md-form input[type=password]:focus.valid,
.md-form input[type=search].valid,
.md-form input[type=search]:focus.valid,
.md-form input[type=text].valid,
.md-form input[type=text]:focus.valid {
  border-bottom: 1px solid #00c851;
  -webkit-box-shadow: 0 1px 0 0 #00c851;
  box-shadow: 0 1px 0 0 #00c851
}

.md-form input[type=email].valid+label:after,
.md-form input[type=email]:focus.valid+label:after,
.md-form input[type=password].valid+label:after,
.md-form input[type=password]:focus.valid+label:after,
.md-form input[type=search].valid+label:after,
.md-form input[type=search]:focus.valid+label:after,
.md-form input[type=text].valid+label:after,
.md-form input[type=text]:focus.valid+label:after {
  content: attr(data-success);
  color: #00c851;
  opacity: 1
}

.md-form input[type=email].invalid,
.md-form input[type=email]:focus.invalid,
.md-form input[type=password].invalid,
.md-form input[type=password]:focus.invalid,
.md-form input[type=search].invalid,
.md-form input[type=search]:focus.invalid,
.md-form input[type=text].invalid,
.md-form input[type=text]:focus.invalid {
  border-bottom: 1px solid #f44336;
  -webkit-box-shadow: 0 1px 0 0 #f44336;
  box-shadow: 0 1px 0 0 #f44336
}

.md-form input[type=email].invalid+label:after,
.md-form input[type=email]:focus.invalid+label:after,
.md-form input[type=password].invalid+label:after,
.md-form input[type=password]:focus.invalid+label:after,
.md-form input[type=search].invalid+label:after,
.md-form input[type=search]:focus.invalid+label:after,
.md-form input[type=text].invalid+label:after,
.md-form input[type=text]:focus.invalid+label:after {
  content: attr(data-error);
  color: #f44336;
  opacity: 1
}

.md-form .form-control {
  margin: 0 0 .5rem;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding: .3rem 0 .55rem;
  background-image: none;
  background-color: transparent
}

.md-form .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: 0 0
}

.md-form .form-control:disabled,
.md-form .form-control[readonly] {
  border-bottom: 1px solid #bdbdbd;
  background-color: transparent
}

.md-form label {
  font-size: 1rem
}

.md-form label.active {
  font-size: .8rem;
  -webkit-transform: translateY(-140%);
  -ms-transform: translateY(-140%);
  transform: translateY(-140%)
}

.md-form label {
  position: absolute;
  top: .65rem;
  left: 0;
  -webkit-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  transition: .2s ease-out;
  cursor: text;
  color: #757575
}

.md-form .prefix {
  position: absolute;
  -webkit-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s
}

.fade {
  opacity: 0;
  transition: opacity .15s linear
}

.fade.show {
  opacity: 1
}

.collapse {
  display: none
}

.collapse {
  display: none
}

.collapse.show {
  display: block
}

.dropdown,
.dropup {
  position: relative
}

.dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent
}

.dropdown-toggle:empty::after {
  margin-left: 0
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: .25rem
}

.dropdown-divider {
  height: 0;
  margin: .5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  background-color: transparent
}

.dropdown-menu.show {
  display: block
}

.dropdown-header {
  display: block;
  padding: .5rem 1.5rem;
  margin-bottom: 0;
  font-size: .875rem;
  color: #6c757d;
  white-space: nowrap
}

@media (min-width: 768px) {
  col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

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

.d-none {
  display: none !important
}

.d-inline {
  display: inline !important
}

.d-inline-block {
  display: inline-block !important
}

.d-block {
  display: block !important
}

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

@media (min-width:768px) {
  .d-md-none {
    display: none !important
  }
  .d-md-inline {
    display: inline !important
  }
  .d-md-inline-block {
    display: inline-block !important
  }
  .d-md-block {
    display: block !important
  }
  .d-md-table {
    display: table !important
  }
  .d-md-table-row {
    display: table-row !important
  }
  .d-md-table-cell {
    display: table-cell !important
  }
  .d-md-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important
  }
  .d-md-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important
  }
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  -webkit-clip-path: none;
  clip-path: none
}

.w-25 {
  width: 25% !important
}

.w-50 {
  width: 50% !important
}

.w-75 {
  width: 75% !important
}

.w-100 {
  width: 100% !important
}

.h-25 {
  height: 25% !important
}

.h-50 {
  height: 50% !important
}

.h-75 {
  height: 75% !important
}

.h-100 {
  height: 100% !important
}

.mw-100 {
  max-width: 100% !important
}

.mh-100 {
  max-height: 100% !important
}

.m-0 {
  margin: 0 !important
}

.mt-0,
.my-0 {
  margin-top: 0 !important
}

.mr-0,
.mx-0 {
  margin-right: 0 !important
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important
}

.ml-0,
.mx-0 {
  margin-left: 0 !important
}

.m-1 {
  margin: .25rem !important
}

.mt-1,
.my-1 {
  margin-top: .25rem !important
}

.mr-1,
.mx-1 {
  margin-right: .25rem !important
}

.mb-1,
.my-1 {
  margin-bottom: .25rem !important
}

.ml-1,
.mx-1 {
  margin-left: .25rem !important
}

.m-2 {
  margin: .5rem !important
}

.mt-2,
.my-2 {
  margin-top: .5rem !important
}

.mr-2,
.mx-2 {
  margin-right: .5rem !important
}

.mb-2,
.my-2 {
  margin-bottom: .5rem !important
}

.ml-2,
.mx-2 {
  margin-left: .5rem !important
}

.m-3 {
  margin: 1rem !important
}

.mt-3,
.my-3 {
  margin-top: 1rem !important
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important
}

.m-4 {
  margin: 1.5rem !important
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important
}

.m-5 {
  margin: 3rem !important
}

.mt-5,
.my-5 {
  margin-top: 3rem !important
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important
}

.p-0 {
  padding: 0 !important
}

.p-1 {
  padding: .25rem !important
}

.p-2 {
  padding: .5rem !important
}

.p-3 {
  padding: 1rem !important
}

.p-4 {
  padding: 1.5rem !important
}

.p-5 {
  padding: 3rem !important
}

.m-auto {
  margin: auto !important
}

.mr-auto,
.mx-auto {
  margin-right: auto !important
}

.btn-floating .btn-sm {
  width: 36.15385px;
  height: 36.15385px;
}

@media (min-width:768px) {
  .flex-md-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important
  }
  .flex-md-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important
  }

.btn[class*=btn-outline-].btn-md {
  padding-top: .58rem;
  padding-bottom: .58rem;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn.btn-md {
  padding: .7rem 1.6rem;
  font-size: 1rem !important;
}

.modal-footer>:not(:first-child) {
  margin-left: .25rem;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5
}

.close:focus,
.close:hover {
  color: #000;
  text-decoration: none;
  opacity: .75
}

.close:not(:disabled):not(.disabled) {
  cursor: pointer
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none
}

.modal-open {
  overflow: hidden
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: .5rem;
  pointer-events: none
}

.modal.fade .modal-dialog {
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
  transform: translate(0, -25%)
}

.modal.show .modal-dialog {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.modal-dialog-centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - (.5rem * 2))
}

.modal-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
  transform: translateY(35%);
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000
}

.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem
}

.modal-header .close {
  padding: 1rem;
  margin: -1rem -1rem -1rem auto
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5
}

.modal-body {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem
}

.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #e9ecef
}

.modal-footer>:not(:first-child) {
  margin-left: .25rem
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll
}

@media (min-width:576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto
  }
  .modal-dialog-centered {
    min-height: calc(100% - (1.75rem * 2))
  }
  .modal-sm {
    max-width: 300px
  }
}

@media (min-width:992px) {
  .modal-lg {
    max-width: 800px
  }
}

.btn-floating {
  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
  width: 47px;
  height: 47px;
  position: relative;
  z-index: 1;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  margin: 10px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-floating i {
  display: inline-block;
  width: inherit;
  text-align: center;
  color: #fff;
}

.btn-floating.btn-sm i{
  font-size: .96154rem;
  line-height: 36.15385px;
}

.btn-group-sm>.btn,
.btn-sm {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

.btn-fb {
  background-color: #3b5998 !important;
  color: #fff !important;
}

.btn-tw{
  background-color: #55acee!important;
  color: #fff!important;
}

.btn-gplus{
  background-color: #dd4b39!important;
  color: #fff!important;
}

.btn-ins{
  background-color: #2e5e86!important;
    color: #fff!important;
}

.btn-group-sm>.btn+.dropdown-toggle-split,
.btn-sm+.dropdown-toggle-split {
  padding-right: .375rem;
  padding-left: .375rem
}

.btn-group-toggle>.btn,
.btn-group-toggle>.btn-group>.btn {
  margin-bottom: 0
}

.btn-group-toggle>.btn input[type=checkbox],
.btn-group-toggle>.btn input[type=radio],
.btn-group-toggle>.btn-group>.btn input[type=checkbox],
.btn-group-toggle>.btn-group>.btn input[type=radio] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none
}

.input-group {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%
}

/* mdboostrap b? sung */

/* end iphone design */

body {
  overflow: visible !important;
}

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

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

/* navbar */

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

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

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

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

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

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

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

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

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

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

/* Input */

/* 在你輸入文字時，他會有提示效果幫我們貼上空白，而空白會變黃色，因此這可以讓空白從黃色改成白色*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-animation: autofill 0s forwards;
  animation: autofill 0s forwards;
}

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

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

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

/* end Input */

footer {
  background-color: rgba(255, 255, 255, 0.8);
}

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

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

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

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

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

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

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

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

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

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

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

/* buttons */

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

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

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

/* buttons / end */

.modal div {
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

div {
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.load {
  opacity: 1 !important;
}

</style>


</head>

<body>


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

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

    <div class="container-fluid" style="background: rgba(255,255,255,.6)">
        <div class="row bgw">
            <div class="col-md-12 col-sm-8">
                <ul class="nav nav-tabs" style="padding: 15px;">
                    <li class="active">
                        <a href="#brand-story" data-toggle="tab">品牌故事</a>
                    </li>

                    <li>
                        <a href="#farm-master" data-toggle="tab">農場主人</a>
                    </li>

                    <li>
                        <a href="#media" data-toggle="tab">媒體報導</a>
                    </li>

                    <li>
                        <a href="#medals" data-toggle="tab">獲獎事蹟</a>
                    </li>
                </ul>

                <div class="tab-content">

                    <!--Brand story-->
                    <div id="brand-story" class="tab-pane fade in active">

                        <div class="border-title">
                            <h2>品牌故事 Brand Story</h2>
                        </div>

                        <div class="col-md-7 col-sm-8">
                            <div class="border-pane">

                                <div class="view zoom overlay">
                                    <a href="#" class="waves-button waves-effect" style="padding: 0">
                                        <img src="http://ecloud.ewang.com.tw/userUpload/images/brandstory-1.jpg" class="img-fluid img-gradient-overlay z-depth-1" alt="">
                                    </a>
                                </div>

                                <div class="border-content">

                                    <div class="border-text">
                                        <h3>
                                            <strong>栽種有機茶，突破困境，建國百年女神農『陳麗雪』</strong>
                                        </h3>

                                        <hr style="background: #535353; height: 1px;">

                                        <p>
                                            陳麗雪帶著堅毅的表情說「不改變，就是被淘汰」。身為媳婦，卻毅然將家族茶園轉型有機栽種，面臨親友的質?與經濟壓力，不是一般人所能承受，但陳麗雪卻是硬生生的挺了過來。當別人還不認識有機，對有機不能認可時，她卻堅持做到底，為的是「家」，還有那長期支持他們的死忠顧客。
                                            而這一路的跌撞辛苦，最終有了回報，民國100年陳麗雪獲選為建國百年女神龍，「佳芳有機茶園 」，再度打響名號。
                                        </p>
                                    </div>

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

                        <div class="col-md-5 col-sm-8">
                            <div class="border-pane">

                                <div class="view zoom overlay">
                                    <a href="#" class="waves-button waves-effect" style="padding: 0">
                                        <img src="http://ecloud.ewang.com.tw/userUpload/images/sale-3.jpg" class="img-fluid img-gradient-overlay z-depth-1" alt="">
                                    </a>
                                </div>

                                <div class="border-content">
                                    <div class="border-text">
                                        <h3>
                                            <strong>栽種有機茶，突破困境，建國百年女神農『陳麗雪』</strong>
                                        </h3>

                                        <hr style="background: #535353; height: 1px;">

                                        <p>
                                            陳麗雪帶著堅毅的表情說「不改變，就是被淘汰」。身為媳婦，卻毅然將家族茶園轉型有機栽種，面臨親友的質?與經濟壓力，不是一般人所能承受，但陳麗雪卻是硬生生的挺了過來。當別人還不認識有機，對有機不能認可時，她卻堅持做到底，為的是「家」，還有那長期支持他們的死忠顧客。
                                            而這一路的跌撞辛苦，最終有了回報，民國100年陳麗雪獲選為建國百年女神龍，「佳芳有機茶園 」，再度打響名號。
                                        </p>
                                    </div>

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

                        <div class="col-md-12 col-sm-8">
                            <div class="col-md-5 col-sm-8">
                                <div class="border-pane view zoom overlay" style="background: rgba(240, 239, 239, 0.952)">

                                    <div class="border-content">

                                        <div class="border-text">
                                            <h2 style="text-align: center">
                                                <strong>嫁為茶農婦，投入夫家製茶事業</strong>
                                            </h2>
                                            <hr style="background: #535353; height: 1px;">
                                            <p>
                                                遠遠望去，層層山巒與茶園交織出一幅翠綠的自然景緻!!令人難以理解的是，佳芳有機茶園竟是這唯一僅存的茶園。 時間回到民國38年，配合政府政策，這曾種植著大片牧草供繁殖牛吃，沒想到，2、3年後卻發現牛無法生產，政府只好放棄該計畫，此時，只得將牧草全都砍掉，沒想到卻遇大水來襲，造成大量土石流失。這時，水土保持局前來關心，發現這裏的地質、氣候適合種茶，對水土保持也很有幫助，於是，以低價提供台茶十二號茶苗給農民栽植，還設立茶改場台東分場輔導茶農製茶。
                                                民國77年，嫁為台東媳婦的陳麗雪，也投入了夫家製茶事業，當時正值黃金期，「茶做了就馬上有人收走。」陳麗雪回憶著說，全盛時期，茶園超過十公頃，年營收達六百萬元。
                                                </p>
                                        </div>

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

                            <div class="col-md-7 col-sm-8">
                                <div class="border-pane view zoom overlay" style="background: rgba(240, 239, 239, 0.952)">

                                    <div class="border-content">

                                        <div class="border-text">
                                            <h2 style="text-align: center">
                                                <strong>市場衝擊，轉型有機尋出路</strong>
                                            </h2>
                                            <hr style="background: #535353; height: 1px;">
                                            <p>
                                                沒想到，當全台經濟起飛時期，卻是陳麗雪面對挑戰的開始。那時阿里山、梨山等高山茶受到消費者喜愛，加上政府開放進口茶，低海拔的茶葉泛人問津，面臨市場淘汰的命運，農民只得紛紛轉型栽種其他作物，而陳麗雪夫家的製茶事業也無法倖免。 「究竟要怎麼做，才能不被市場淘汰?」苦思出路的陳麗雪，先轉型做零售，「批發商都倒了，只能靠自己」，那時，零售量不如批發，茶園面積只得從十公傾，一直減到三公傾，但靠著陳麗雪的用心推廣，還是累積了三、五百位的長期客源。直到去上了「有機」課程，終於讓陳麗雪尋找到扭轉危機的曙光。
                                                「究竟要不要轉型有機?? 」，在了解有機種植對健康、生態有益後，陳麗雪想著：「在我們最慘的時候，親朋好友依然支持我們的茶，我們理當要回饋照顧他們的健康才是。」就是這想法，給了陳麗雪勇氣，取得先生同意下，她多次與親友溝通，卻都遭到反對，只是陳麗雪依然堅持著，最後家族親友勉強同意試種一年有機，沒想到，那年收成慘趺，讓親友們毅然放棄有機，轉回慣型農法。
                                                當時的陳麗雪並不想放棄，最後只得分家，各自栽種，在先生的支持下，夫婦倆獨自打理著有機茶園。 熬過黑暗期，有機茶園漸露曙光 「開始種有機的那一、二年，每株茶樹看起來就像生病一樣，亳無生氣，完全沒有抵抗力，更別談收成了」陳麗雪回想著說。當時，只能給予有機肥，以人工抓蟲、除草，提升茶樹的抵抗力，讓土地恢復地力。「記得那年兒子還好小，但沒有收入，卻還得把錢投入購買有機肥、機具等，只好每天都煮粥給他吃，根本沒錢買奶粉。」陳麗雪帶著一絲虧欠地說。
                                                幸好，第三年茶樹恢復了健康，加上茶改場的協助，部分改種具有強韌生命力、抗病菌強，且含氧量高的台灣原生種「清心大冇」，並輔以深層海洋水灌溉，終於開始有了那麼一點回收。接著，陳麗雪將茶園中的茶樹陸續換植為新品種，現今有金萱、清心大冇等，而自然生態也慢慢形成，小綠葉蟬、蜘蛛、螳蚓、飄蟲都陸續出現在茶園中。
                                                「草也是很要的，不可以太早把草砍光。」陳麗雪笑著說。原來有次在收成前十幾天左右，擔心採茶工人不好採，便先把茶樹周邊的草都砍盡，沒想到，到了採茶前幾天，卻發現茶葉變的好醜，詢問了茶改場才知，原來草可以分攤草食性昆蟲的啃食，若是太早把草砍光，那麼昆蟲只能吃茶葉了。有過這次經驗，現今，都是在採茶前二日，才會進行除草。
                                                </p>
                                        </div>

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

                        <div class="col-md-12 col-sm-8">
                            <hr style="background: #535353; height: 1px;">
                        </div>

                        <div class="col-md-12 col-sm-8">
                            <div class="border-pane">
                                <div class="row border-content">

                                    <div class="col-md-7 col-sm-6">
                                        <div class="view zoom overlay">
                                            <a href="#" class="waves-button waves-effect">
                                                <img src="http://ecloud.ewang.com.tw/userUpload/images/brandstory-2.jpg" class="img-fluid img-gradient-overlay z-depth-1-half center" alt="">
                                            </a>
                                        </div>
                                    </div>

                                    <div class="col-md-5 col-sm-6">
                                        <div class="border-text">
                                            <h2>
                                                <strong>結合休閒觀光，讓「茶園」變的好好玩</strong>
                                            </h2>

                                            <hr style="background: #535353; height: 1px;">

                                            <p>
                                                民國99年，陳麗雪將五甲的有機茶園規劃成體驗區，帶領遊客在茶園中體驗採茶，觀察茶園生態，甚至還研發茶品DIY，每年絞盡腦汁推陳出新，就是要讓遊客玩的盡興。像是將採下的茶葉，經過清洗後，以果汁機打成綠茶汁，加入梅子、蜂蜜微調，便是好喝又解喝的養生飲品；麵粉中加入綠茶汁，便是翡翠包DIY的外皮；或是麵粉、蛋白、奶油再調入紅烏龍茶和成麵糊，便可體驗蛋捲製作，「每每那煎蛋捲的香氣四溢，總讓客人忍不住要自己動手做一條品嚐。」陳麗雪開心地說，再配上現場沖泡的茶飲，任誰都是帶著滿足而愉快的心情離開。
                                                推動茶園體驗已有四年，如今陳麗雪想帶領著鄰居以「一戶一特色」來推動社區有機村，讓年輕人有回鄉工作的意願，讓老一輩有傳承教導的機會，這是她未來努力想完成的夢。
                                            </p>
                                        </div>
                                    </div>

                                </div>

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

                    <!--Master Farm-->
                    <div id="farm-master" class="tab-pane fade">

                        <div class="border-title">
                            農場主人 About Me
                        </div>

                        <div class="col-md-5 col-sm-8">

                            <div class="col-md-12 col-sm-8">
                                <div class="border-pane">


                                    <div class="border-content">
                                        <div class="border-text">
                                            <h3>
                                                <strong>陳麗雪女士</strong>
                                            </h3>

                                            <hr style="background: #535353; height: 1px;">

                                            <p>
                                                臺東縣卑南鄉陳麗雪女士為專業茶農，具有學習與創新的精神，積極參與各項合作研發，並配合政府政策推行廠農合作、落實產銷履歷及安全用藥，推展優質安全茶業，開發茶葉新產品。經營有機茶園，作為推廣有機農業的示範，進而帶動明峰村朝向有機生態村發展。參加各種茶葉展示及有機農夫市集活動，行銷臺東茶葉，提高知名度，開拓茶葉多元行銷通路。推廣休閒農業，結合初鹿休閒農業區，朝向觀光茶園發展。
                                            </p>
                                        </div>
                                    </div>


                                    <div class="view zoom overlay">
                                        <a href="#" class="waves-button waves-effect" style="padding: 0">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/about-3.jpg" class="img-fluid img-gradient-overlay z-depth-1 center-block" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 col-sm-8">
                                <div class="row border-pane">
                                    <div class="border-content">
                                        <div class="border-text">
                                            <h3>
                                                <strong>女神農堅持有機茶</strong>
                                            </h3>

                                            <hr style="background: #535353; height: 1px;">

                                            <p>
                                                陳麗雪有機是留給後代的財富 2011年以堅持種植有機茶，獲行政院農委會頒發神農獎的陳麗雪，從1998年開始學種有機茶。為了種有機茶，陳麗雪夫妻倆必須打零工維持家計，10多年辛苦走來，終於受到肯定。陳麗雪說，如果能重來一次，她還是會堅持走有機農業，留給下一代一個清淨的家園。
                                                陳麗雪娘家在高雄，20多年前嫁到臺東，開始跟著先生和公公種茶，當時雖然辛苦但是收入還算穩定，陳麗雪說，茶葉採收後要經過36小時加工成品，這段加工的時間，可以說是不眠不休來完成，遇到產季時，整整一星期無法上床睡覺是常有的事，只能和先生輪流坐在椅子上瞇一下眼，雖然辛苦但是有固定的盤商收購，價格合理，所以生活還算穩定。
                                                1990年代起，茶葉市場開始走下坡，盤商不再上門收購，通路中斷後，有一段時間，陳麗雪要把茶葉帶回高雄娘家，跑茶行甚至挨家挨戶去推銷，茶行因為市場競爭激烈，往往把價格壓到幾乎沒有利潤，而且只收最好的極品部份，其他就全部被打回票。這樣臺東、高雄往返奔波苦撐，當時市場卻開始流行高海拔茶葉，大量傾銷的進口茶更讓中低價位的茶品難以招架，讓陳麗雪體認一定要做改變。
                                            </p>

                                        </div>
                                    </div>

                                    <div class="view zoom overlay">
                                        <a href="#" class="waves-button waves-effect">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/about-1.jpg" class="img-fluid img-gradient-overlay center-block" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="col-md-7 col-sm-8">
                            <div class="row border-pane">

                                <div class="col-md-6 col-sm-6">
                                    <div class="view zoom overlay">
                                        <a href="#" class="waves-button waves-effect" style="padding: 0; margin-top: 35px;">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/about-2.jpg" class="img-fluid img-gradient-overlay z-depth-1 center-block" alt="">
                                        </a>
                                    </div>

                                    <div class="border-content">
                                        <div class="border-text">
                                            <h3>
                                                <strong>小農行銷出頭天</strong>
                                            </h3>

                                            <hr style="background: #535353; height: 1px;">

                                            <p>
                                                一路走來，陳麗雪對茶園的經營更有心得，為了更有效管理，選擇種植生命力強韌的臺灣特有種「青心烏龍」，研發不團揉、不發酵的加工技術，推出有機冷泡綠茶，不斷研發紅烏龍、梅子綠茶、香草花茶等新產品，迎合茶飲料市場需求，成功打開新的通路。 陳麗雪的經營理念，多來自臺東大學的指導，茶園的工作雖然忙碌，陳麗雪還是報名就讀臺東大學綠色產業科技學系，當時已經40出頭，是全班最年長的學生，她笑稱同學有的比她孩子還小，陳麗雪表示，有了學理的啟示，讓她了解管理的重要。嫁到臺東來投入農業經營，從只知道辛苦的付出勞力，到慢慢摸索體會，再加上教授的指導，讓陳麗雪獲益良多。為了改善茶農們普遍老化，不擅長行銷的缺憾，陳麗雪想出「廠農合作」計畫，由「佳芳茶園」以保證價格收購茶菁，統整雇工採收、加工、包裝的製茶流程，不但創造社區就業機會，茶農也有固定收益，茶廠有優質的茶菁製茶，消費者可以安心喝好茶，一舉數得。
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-sm-8">
                                    <div class="border-content">
                                        <div class="border-text">
                                            <h3>
                                                <strong>沒農藥的茶給蟲吃</strong>
                                            </h3>

                                            <hr style="background: #535353; height: 1px;">

                                            <p>
                                                「我們茶園海拔不夠，環境不允許，只有走有機這條路」，認真思考後，陳麗雪開始斷用農藥，種了一輩子茶的公公第1個反對，他說：「不用農藥是種給蟲子吃的嗎？」 兩年過去幾乎沒有收成的茶園，讓家裡斷了生計，夫妻只好出去打零工，陳麗雪回憶當時老三才1歲多，好幾次沒有錢買奶粉，堅持到第3年，先生在茶園鋤草時覺得不一樣了，回家拉著陳麗雪到園子裡，果然土壤因為休養充足變的鬆軟有彈性，小瓢蟲、螳螂、蜘蛛......許多昆蟲又活過來，茶樹的嫩芽顯得綠油油，整個茶園一片生機盎然，陳麗雪證明自己的決定是對的。
                                                當時認證的概念還未普及，不過有機茶已經慢慢在市場推展開來，但要怎麼說明自己種的是有機茶，又怎麼證明不是隨便講講？陳麗雪說，當時不只花了7,000元去做農藥殘留檢驗，後來還到中興大學參加有機農業研習後，才有了申請有機茶園認證的行動。歷經10年的努力堅持，陳麗雪的「佳芳茶園」從2008年起申請茶葉生產履歷認證，2009年通過認證，而且在2008到2010年連續3年，都通過多重農藥殘留分析檢驗合格，經「
                                                慈心有機農業發展基金會」驗證有機茶園。
                                            </p>
                                        </div>
                                    </div>

                                    <div class="border-content">
                                        <div class="border-text">
                                            <h3>
                                                <strong>有機只是農民的義務</strong>
                                            </h3>

                                            <hr style="background: #535353; height: 1px;">

                                            <p>
                                                問陳麗雪如果再重來一次，還會選擇種有機茶嗎？她很堅定的說「會」！從事有機農業越久，越能體認愛這片土地的重要，陳麗雪說，長期大量使用農藥，使得土壤嚴重的汙染，各種重金屬沉積在我們生活的這片土地，我們吃下這些污染的農作物，身體當然不好，陳麗雪說，政府民間都已經建立環境保護的觀念，雖然有點晚但是大家一起積極的行動，還是能讓被污染的土地再活起來，她甚至強調要把有機農業的觀念，向下紮根放進教材裡，讓小朋友從小建立愛土地的觀念。
                                                得獎表示獲得肯定，但是陳麗雪謙虛的說，只是盡一個農民的義務，希望把有機農業成功的推廣出去，讓下一代生活的環境更健康更優質。
                                            </p>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="col-md-7 col-sm-8">
                            <div class="row border-pane">
                                <div class="col-md-7 col-sm-8">
                                    <div class="view zoom overlay">
                                        <a href="#" class="waves-button waves-effect" style="margin-top: 25px;">
                                            <img src="http://ecloud.ewang.com.tw/userUpload/images/about-4.jpg" class="img-fluid img-gradient-overlay center-block" alt="">
                                        </a>
                                    </div>
                                </div>

                                <div class="col-md-5 col-sm-8">
                                    <h2>
                                        <strong>陳 麗 雪 學 經 歷</strong>
                                    </h2>

                                    <hr style="background: #535353; height: 1px;">

                                    <p>學歷：</p>
                                    <ul class="circle">
                                        <li>嘉義縣後塘國小</li>
                                        <li>嘉義縣鹿草國中</li>
                                        <li>私立高雄國際商工商科畢業</li>
                                        <li>台東大學綠色產業學士班</li>
                                    </ul>

                                    <p>經歷：</p>
                                    <ul class="circle">
                                        <li>茶園經營管理30年</li>
                                        <li>茶葉市場行銷28年</li>
                                        <li>茶葉產銷班班長5年</li>
                                        <li>有機驗證13年</li>
                                        <li>茶葉生產履歷驗證6年</li>
                                        <li>廠農合作負責人</li>
                                        <li>有機協會創會理事長</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!--Media-->
                    <div id="media" class="tab-pane fade">
                        <div class="col-md-4 col-sm-12">
                            <div class="media-border">

                                <div class="view zoom overlay">
                                    <a href="#" class="waves-block waves-effect" style="margin: auto; left: 38%; border-radius: 45%">
                                        <img src="http://ecloud.ewang.com.tw/userUpload/images/chen-100x100.jpg" class="img-fluid img-circle img-gradient-overlay" alt="">
                                    </a>
                                </div>

                                <div class="border-content">
                                    <div class="border-text" style="text-align: center">
                                        <h4>
                                            <i>陳麗雪女士</i>
                                            </h5>

                                            <h5>經營願景</h5>

                                            <p>
                                                秉持「安全」、「永續」理念，並配合政府政策施行生產履歷、有機栽培，作為推廣有機農業的示範。推廣休閒農業，行銷臺東茶葉，結合初鹿休閒農業區，朝向觀光茶園發展。
                                            </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--Amzing-->
                        <div class="col-md-8 col-sm-12" style="margin-top: 15px; margin-bottom: 15px;">
                            <div class="w3-content w3-display-container">
                                <div class="mySlides w3-display-container w3-animate-opacity">
                                    <button class="no-pb waves-block waves-effect" data-toggle="modal" data-target="#amazing-image-1">
                                        <img src="http://ecloud.ewang.com.tw/userUpload/images/media_slider-2.jpg" class="w-100">
                                    </button>
                                </div>

                                <div class="mySlides w3-display-container w3-animate-opacity">
                                    <button class="no-pb waves-block waves-effect" data-toggle="modal" data-target="#amazing-image-2">
                                        <img src="http://ecloud.ewang.com.tw/userUpload/images/media_slider-e1520004074858.jpg" class="w-100">
                                    </button>
                                </div>
                            </div>

                            <button class="w3-button w3-grey w3-display-left" onclick="plusDivs(-1)" style="z-index: 1;">&#10094;</button>
                            <button class="w3-button w3-grey w3-display-right" onclick="plusDivs(1)" style="z-index: 1;">&#10095;</button>
                        </div>

                        <div class="col-md-12 col-sm-12">
                            <div class="border-content">
                                <div class="border-title">
                                    <h1>媒體影片 Media Video</h1>
                                </div>
                            </div>

                            <!--Big video-->
                            <div class="col-md-12 col-sm-6">
                                <div class="d-block w-100">
                                    <div class="view overlay">
                                        <button class="waves-button waves-effect waves-light no-pb" data-toggle="modal" data-target="#video-1">
                                            <div class="embed-responsive-fixing embed-responsive-21by9">
                                                <video class="text-center embed-responsive-item" autoplay muted loop id="box-video" src="https://www.youtube.com/embed/-3Wl5b7aYm0"
                                                    type="video/mp4"></video>
                                            </div>
                                        </button>

                                        <!-- box heading content-->
                                        <div class="box-content">
                                            <h1>【台灣真善美】堅持有機夢的"傻夫妻"</h1>
                                            <p style="font-size: 1.3em; letter-spacing: 0.1em;">
                                                來看一對茶農夫婦，憑著一