<!DOCTYPE html>
<html lang="zh-TW">
<head>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

    <style type="text/css">
        * {text-transform: capitalize;letter-spacing: 0.1em;line-height: 1.7;-webkit-font-smoothing: antialiased; opacity: 1!important}
        *, ::after, ::before{box-sizing: border-box;-webkit-box-sizing: border-box;}::selection{background: #ebf2e3;}:focus{outline: -webkit-focus-ring-color auto 5px;}
        .box-1 {display: block;margin-bottom: 2em;padding-left: 20px;padding-right: 20px;}@media(max-width: 812px){.box-1{padding-left: 20px !important;padding-right: 20px !important;}.box-board::after{content:'';width: 0 !important}.box-board-1::after{content:'';width:0 !important}.box-board-center::after,.box-board-center::before{content:'';width:0 !important}}
        .box-block-icons{display: block;position: relative;right: 20px;padding: 15px;}
        .box-button:hover{display: inline-block;transition: .1s ease-in-out;transition-property: color, background-color, background-position, border-color, box-shadow;font-weight: 400;letter-spacing: .2px;border-image-slice: 3 !important;border-image-width: 3px !important;border-image-repeat: round !important;background: border-box;border: 1px solid #D8522C;background-color: transparent;
        border-image-source:  url('http://www.lohasplus.com.tw/userUpload/images/border-background.png');}
        .box-button:after{content: '';display: block;width: 0;top: 0;transition: top .5s ease-in-out;}
        .box-list-icons{display: inline-flex;list-style: none}.box-title {padding-left: 30px !important;color: rgba(255, 255, 255, 0.918)}
        .box-title-center{text-align: center;color: rgba(250, 250, 250, 0.918)}
        .box-color {background: rgba(0, 0, 0, .75)}.box-text { font-size: 20px; color: rgb(197, 197, 197);}.bt-23p{font-size: 23px;color: rgb(197, 197, 197)}
        .card{border-radius: 5px !important;}.box-iframe{border-radius: 10px !important;padding: 0;margin: 0;background: transparent !important;}
        .box-reveal{padding-top: 1em;letter-spacing: 0.1em;color: #000;}
	.navbar .dropdown-menu a{font-size: 18px !important}
        .box-board {position: relative;padding-left: 15px;color: rgb(236, 236, 236)}
        .box-board::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 45%;
            height: 2px;
            background: rgba(170, 170, 170, 0.486)
        }
        .box-board::before {left: 0}.box-board::after {right: 0}
        .box-board-1 { position: relative;padding-left: 15px;text-align: right;float: right;color: rgb(236, 236, 236)}
        .box-board-1::before {content: '';position: absolute;top: 50%;transform: translateY(-50%);height: 2px;width: calc((15%-300px)/1);background: rgba(202, 202, 202, 0.575)}
        .box-board-1::before {left: -170px}.box-board-center {position: relative;text-align: center;padding-left: 15px;color: rgb(236, 236, 236)}
        .box-board-center::before,.box-board-center::after {content: '';position: absolute;height: 2px;width: calc((50%-200px)/2);top: 50%;transform: translateY(-50%);background: rgba(170, 170, 170, .8);}
        .box-board-center::before {left: 0}.box-board-center::after {right: 0}.img-fluid {padding: 15px;}.img-center {width: 40em;transform: translateX(50%);}.board-text {font-size: 25px;font-weight: 500;letter-spacing: 0.1em;color: rgb(236, 236, 236)}.box-share{font-size: 24px;font-family: 標楷體;color: rgba(216, 216, 216, 0.815)}.box-img-center{display: block;text-align: center;}.box-frame-size{width: 500px !important;height: 300px !important;}.p1{padding: 10px}.p2{padding: 20px}.p3{padding: 30px}.p4{padding: 40px}.p5{padding: 50px}.p1-l{padding-left: 10px}.p2-l{padding-left: 20px}.p3-l{padding-left: 30px}.p4-l{padding-left: 40px}.p5-l{padding-left: 50px}.p1-r{padding-right: 10px}.p2-r{padding-right: 20px}.p3-r{padding-right: 30px}.p4-r{padding-right: 40px}.p5-r{padding-right: 50px}.p1-t{padding-top: 10px}.p2-t{padding-top: 20px}.p3-t{padding-top: 30px}.p4-t{padding-top: 40px}.p5-t{padding-top: 50px}.p1-b{padding-bottom: 10px}.p2-b{padding-bottom: 20px}.p3-b{padding-bottom: 30px}.p4-b{padding-bottom: 40px}.p5-b{padding-bottom: 50px}.box-container{display: block;position: relative;}.box-absolute{position: absolute;display: inline-block;background: rgba(0,0,0,.8);color: #fff;font-weight: 300;z-index: 100;padding: 10px;font-size: 20px;letter-spacing: 0.1em;top: 1em}.box-list{list-style-type: none !important;float: left;display: block;padding: 0; padding-inline-start: 0; padding-inline-end: 0;margin: 0; margin-block-start: 0; margin-block-start: 0;}
        .box-list li{padding-bottom: 10px; color: #fff}video{transition: opacity .5s ease-in-out;backface-visibility: hidden}.box-hid{display: block;position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);text-align: center;opacity: 0;transition: opacity .5s ease-in-out;z-index: 1;}.box-content{margin-top: 10%;}.fix-model{margin-top: 10%;}
        @media only screen and (-webkit-min-device-pixel-ratio: 3),only screen and (   min--moz-device-pixel-ratio: 3),only screen and (     -o-min-device-pixel-ratio: 3/1),only screen and (        min-device-pixel-ratio: 3),only screen and (                min-resolution: 401dpi),only screen and (                min-resolution: 3dppx) { .box-absolute{position: relative !important;background: rgba(0,0,0,.9) !important;top: 0}}
        .navbar-nav>li>a::after{content: '';display: block;border-bottom: 2px solid #959595;height: 1px;transform: scaleX(0) !important;transition: transform .3s ease-in-out;}.navbar-nav>li>a:focus::after, .navbar-nav>li>a:hover::after{transform: scaleX(1) !important;}/* end iphone design */body {background-size: cover;overflow: visible !important;}.bgw {background-color: transparent;}
        a[id=link-drop]:target~#link-drop {transition: all .5s ease-in-out;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: 500 !important;}.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;}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;}}/* 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;}
        .form-inline-add {position: relative;left: -30px;top: 4.4em;float: right;}
        /* buttons */
        .btn-rounded {-webkit-border-radius: 5px;border-radius: 5px;}
        .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: 0;-webkit-transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-ms-transition: opacity 1s ease-in-out;-o-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;}
        ul, li, video, .load {opacity: 1 !important;}
        .navbar-default .navbar-nav>li::after{content: '';height: 2px !important;width: 0 !important;transform: scaleX(0) !important;transition: transform .3s ease-in-out !important;background: black !important;}
        .navbar-default .navbar-nav>li:hover::after{width: 100px;transform: scaleX(1) !important;}
        .navbar-default .navbar-nav>li {display: block !important;color: #000 !important;text-decoration: none !important;}.change-position{transform: translateX(-15%)}
	@media (max-width: 812px){.navbar-nav .open .dropdown-menu{background: white !important; font-size: 17px !important}.change-position{transform: translateX(0%) !important}*{padding-left: 2px !important;padding-right:2px !important}.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{padding-left: 32px !important; padding-right: 125px !important; .col-md-10{padding-left: 0 !important; padding-right: 0 !important}}}.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{font-size: 23px !important}

    </style>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" />
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" type="text/css" />

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

    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.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 src='https://www.google.com/recaptcha/api.js'></script>

    <script 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">

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

<body>
    <section class ="change-position" style="padding-top: 5em">
        <div class="container">
            <div class="box-1 box-color">
                <div class="row">
                    <h1 class="box-board">品牌故事 Brand Story</h1>
                </div>

                <div class="row">
                    <div class="col-md-6 col-sm-6">                      
                        <div class="view overlay">
                            <a href="#" class="waves-effect waves-light" style="padding: 0">
                                <img src="http://www.lohasplus.com.tw/userUpload/images/brandstory-1.jpg" class="img-fluid img-gradient-overlay z-depth-1" alt="">
                            </a>
                        </div>
                    </div>

                    <div class="col-md-6 col-sm-6">
                        <div class="box-text">
                            <p style="font-size: 20px; color: rgb(236,236,236)">
                                栽種有機茶，突破困境，建國百年女神農『陳麗雪』
                            </p>

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

            <div class="box-1 box-color">
                <div class="row">

                    <h1 class="box-title" style="float: right">
                        冷泡綠茶重新出發，紅烏龍打響名號
                    </h1>

                    <div class="col-md-6 col-sm-6">
                        <div class="box-text">

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

                    <div class="col-md-6 col-sm-6">
                        <a href="#" class="waves-effect waves-light" style="padding: 0">
                            <img src="http://www.lohasplus.com.tw/userUpload/images/sale-3.jpg" class="img-fluid img-gradient-overlay z-depth-1" alt="">
                        </a>
                    </div>
		    <div class="col-md-12"><div class="box-content"><div class="box-text"><p>「這冷泡綠茶，含有豐富的兒茶素、葉綠素、茶多酚及茶酵素，對人體保健相當有益處」陳麗雪自從推出冷泡綠茶後，逢人就會開心地分享，有機栽種的茶葉的好處，不僅對人體保健，也不用擔心會有農藥殘留的問題。而被「小綠葉蟬」吸吮過的茶葉，則可製成蜜香紅香。民國97年，陳麗雪運用茶改場台東分場技術，以清心大冇製成紅烏龍，並代表台東到台北參展，徹底改變有機茶不好喝的刻板印象，從此打響名。現今，最大有機通路商里仁也是客戶之一。</p></div></div></div>


                </div>
            </div>

            <div class="box-1 box-color">
                <div class="row">
                    <h1 class="box-board">嫁為茶農婦，投入夫家製茶事業</h1>

                    <div class="col-md-6 col-sm-6">
                        <div class="view overlay">
                            <a href="#" class="waves-light waves-effect" style="padding: 0">
                                <img src="http://www.lohasplus.com.tw/userUpload/images/brand-2.jpg" class="img-fluid img-responsive z-depth-1" alt="" />
                            </a>
                        </div>
                    </div>

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

            <div class="box-1 box-color">
                <div class="row">
                    <h1 class="box-board-center">市場衝擊，轉型有機尋出路</h1>

                    <div class="col-md-12 col-sm-12">
                        <div class="view overlay">
                            <a href="#" class="waves-effect" style="padding: 0">
                                <img src="http://www.lohasplus.com.tw/userUpload/images/04(2).jpg" class="img-fluid img-responsive z-depth-1" alt="">
                            </a>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="box-text">
                            <p>
                                沒想到，當全台經濟起飛時期，卻是陳麗雪面對挑戰的開始。那時阿里山、梨山等高山茶受到消費者喜愛，加上政府開放進口茶，低海拔的茶葉泛人問津，面臨市場淘汰的命運，農民只得紛紛轉型栽種其他作物，而陳麗雪夫家的製茶事業也無法倖免。 「究竟要怎麼做，才能不被市場淘汰?」苦思出路的陳麗雪，先轉型做零售，「批發商都倒了，只能靠自己」，那時，零售量不如批發，茶園面積只得從十公傾，一直減到三公傾，但靠著陳麗雪的用心推廣，還是累積了三、五百位的長期客源。直到去上了「有機」課程，終於讓陳麗雪尋找到扭轉危機的曙光。
                                「究竟要不要轉型有機?? 」，在了解有機種植對健康、生態有益後，陳麗雪想著：「在我們最慘的時候，親朋好友依然支持我們的茶，我們理當要回饋照顧他們的健康才是。」就是這想法，給了陳麗雪勇氣，取得先生同意下，她多次與親友溝通，卻都遭到反對，只是陳麗雪依然堅持著，最後家族親友勉強同意試種一年有機，沒想到，那年收成慘趺，讓親友們毅然放棄有機，轉回慣型農法。
                                當時的陳麗雪並不想放棄，最後只得分家，各自栽種，在先生的支持下，夫婦倆獨自打理著有機茶園。 熬過黑暗期，有機茶園漸露
                            </p>
                        </div>
                    </div>

                    <div class="col-md-6 col-sm-6">
                        <div class="box-text">
                            <p>
                                曙光 「開始種有機的那一、二年，每株茶樹看起來就像生病一樣，亳無生氣，完全沒有抵抗力，更別談收成了」陳麗雪回想著說。當時，只能給予有機肥，以人工抓蟲、除草，提升茶樹的抵抗力，讓土地恢復地力。「記得那年兒子還好小，但沒有收入，卻還得把錢投入購買有機肥、機具等，只好每天都煮粥給他吃，根本沒錢買奶粉。」陳麗雪帶著一絲虧欠地說。
                                幸好，第三年茶樹恢復了健康，加上茶改場的協助，部分改種具有強韌生命力、抗病菌強，且含氧量高的台灣原生種「清心大冇」，並輔以深層海洋水灌溉，終於開始有了那麼一點回收。接著，陳麗雪將茶園中的茶樹陸續換植為新品種，現今有金萱、清心大冇等，而自然生態也慢慢形成，小綠葉蟬、蜘蛛、螳蚓、飄蟲都陸續出現在茶園中。
                                「草也是很要的，不可以太早把草砍光。」陳麗雪笑著說。原來有次在收成前十幾天左右，擔心採茶工人不好採，便先把茶樹周邊的草都砍盡，沒想到，到了採茶前幾天，卻發現茶葉變的好醜，詢問了茶改場才知，原來草可以分攤草食性昆蟲的啃食，若是太早把草砍光，那麼昆蟲只能吃茶葉了。有過這次經驗，現今，都是在採茶前二日，才會進行除草。
                            </p>
                        </div>
                    </div>
                </div>

            </div>

            <div class="box-1 box-color">
                <div class="row">

                    <div class="col-md-6 col-sm-6">
                        <div class="view overlay">
                            <a href="#" class="waves-effect">
                                <img src="http://www.lohasplus.com.tw/userUpload/images/66.jpg" class="img-fluid img-responsive z-depth-1" alt="" />
                            </a>
                        </div>
                    </div>

                    <div class="col-md-6 col-sm-6">

                        <h3 class="board-text">結合休閒觀光，讓「茶園」變的好好玩</h3>

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

    <!--back to top-->
    <script type="text/javascript">
        $(document).ready(function(){
            $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span>回到最上頁</div>');
                $(window).scroll(function () {
                    if ($(this).scrollTop() != 0) {
                        $('#toTop').fadeIn();
                    } else {
                        $('#toTop').fadeOut();
                    }
                }); 
            $('#toTop').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 600);
                return false;
            });
        });
    </script>

    <!--Add class "load"-->
    <script type="text/javascript">
        $(function() {
    
            $("div").addClass("load");

        });
    </script>

    <!-- Script to Activate the Carousel -->
    <script type="text/javaScript">
        $('.carousel').carousel({
            interval: 5000 //changes the speed
        })
        
        $(function() {
            
            $("div").addClass("load");

        });
        
    </script>
</body>
</html>