<html lang="zh-TW">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="keywords" content="國立臺東大學, 東大, 樂活產業創新平台" />
        <meta name="description" content="臺東大學樂活產業創新平台2017， 翼王資訊社建置維護 佳芳茶園">

        <script src="../js/search_info.js"></script>

        <title>- 首頁 - 臺東大學樂活產業創新平台2017</title>

        <!-- Bootstrap Core CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <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">

        <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/animate.css/3.7.0/animate.min.css">


        <!-- Scroll-reaveal -->
        <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>    

        <!-- 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'>


        <!-- 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>

<style type="text/css">

* {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 23px;
}

.box-1 {
    display: block;
    margin-bottom: 2em;
    padding-left: 20px;
    padding-right: 20px;
}

.box-title {
    padding-left: 30px !important;
    color: rgba(255, 255, 255, 0.918)
}

.box-title-right{
    float: right;
    padding-right: 30px;
    color: rgba(250, 250, 250, 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;
}

.box-btn{
    padding: 10px !important;
    margin-bottom: 10px !important;
    margin: 15px !important;
    font-size: 23px !important;
    opacity: 1;
    height: auto !important;
    transition: opacity .5s ease-in-out !important;
}

.box-btn:hover, .box-btn:focus{
    opacity: .5;
}

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

video:hover .box-hid{
    opacity: .3s;
}

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

video .box-hid:focus, video .box-hid:hover{
    background: rgba(0, 0, 0, .75);
    opacity: 1;
    color: #fff
}

/* btn-search */

input[type=search]{
    width: 130px;
    float: right;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 16px;
    background: white;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
    z-index: 1000;
    border: 2px solid transparent;
    border-image-source: url("../img/test-border.png")
}

.positive-form{
    margin-right: -3em;
}

input[type=search]:focus{
    width: 30%;
    border: 3px soild transparent !important;
    border-image: url('../img/test-border.png') 30 stretch;
    border-radius: 6px 0px 0px;
}

/* Galaxy Prime design */

@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
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px){
    .box-absolute{
        position: relative !important;
        background: rgba(0,0,0,.9) !important;
        top: 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;
}

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

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

/* 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;
  }
}

/* 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;
  z-index: 1;
}

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

.load {
  opacity: 1;
}

.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: inline-block !important;
  color: #000 !important;
  text-decoration: none !important;
}

/*.navbar-default .navbar-nav>li:focus, .navbar-default .navbar-nav>li:hover{
  border-bottom: 1px solid black;
  background: rgba(230, 230, 230,0.5);
  top: -5px;
}
*/

.opacity{
  opacity: 1 !important;
}

p, .search-word{
  font-size: 20px;
}

.btn{
  font-size: 14px !important;
}


.no-hover{
  background: transparent !important;
  border-bottom: none !important;
  top: 0 !important;
}

/* block area */
.title1-area {
  padding: 50px; }

.title1 {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-weight: bold;
  padding-left: 0em;
  width: 18em;
  padding: 5px 0 7px 0;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.4pc;
  font-family: 標楷體; }

.title1-area {
  height: auto;
  text-align: center;
  padding: 60px 0 0 0;
  overflow: hidden;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.7); }

.title1-area .small-title {
  color: #e7b623;
  margin-bottom: 5px;
  font-weight: 100;
  letter-spacing: .06em;
  font-size: 22px; }

.title1-area .big-title {
  position: relative;
  font-weight: 100;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffa100 !important;
  font-size: 2em;
  margin-bottom: 50px; }

.title1-area .big-title::before,
.title1-area .big-title::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc((100% - 300px) / 2);
  height: 2px;
  background: rgba(255, 255, 255, 0.9); 
  }

.title1-area .big-title::before {
  left: 0; }

.title1-area .big-title::after {
  right: 0; }

.title1-area p {
  color: #fff;
  font-size: 23px;
  font-family: 標楷體;
  padding: 0 61px;
  text-align: left; }

.block2 {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  min-height: 300px;
  background-color: #fff; }

/* End block area */
/* search */
.form-inline-add {
  position: relative;
  left: -30px;
  top: 4.6em;
  float: right; }

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

/* end search */
/* buttons */
.btn1 {
  position: relative;
  left: 20em;
  top: -11em;
  font-size: 23px !important;
  z-index: 0;
 }

.btn1:hover, .btn1:focus {
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.8); }

.btn2 {
  position: relative;
  left: -6.5em;
  top: 0;
  font-size: 23px !important; }

.btn2:hover, .btn2:focus {
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.8); }

.btn3 {
  position: relative;
  top: -19em;
  left: 7em;
  font-size: 23px !important; }

.btn3:hover,
.btn3:focus {
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.8); }

/* End buttons */

.img-hover{
  position: relative;
  width: 20em;
  transform: translateY(0%);
  transition: transform .8s ease-in;
}

.top{
  top: -1em;
}

.img-hover:focus, .img-hover:hover{
  transform: translateY(-5%);
}

.img-2 {
  width: 33em;
  border-radius: 5%;
  margin-bottom: 2em; }

/* End image */

.modal-title{
  letter-spacing: 0.2em;
  font-weight: 200;
}


label{
  letter-spacing: 0.1em;
  font-size: 15px !important;
}

/* block 3 box */
.product-box{
  background: rgba(255, 255, 255, 0.8);
  margin-top: 15px;
  margin-bottom: 25px;
  border:none;
}

.box-content
{
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}
/* block 3 box */

.no-pb{
  padding: 0;
  border: none;
}

/* box-title */
.box-title{
  position: relative;
  font-weight: 100;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  font-size: 2em;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

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

.box-title::before{ left: 0;}
.box-title::after{ right: 0;}

.box-small-title, .box-text{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 5px 0;
  font-size: 1.2em;
}
/* box-title */

.box-fill-black{
    display: block;
    padding: 10px;
    background: rgba(0,0,0,.8);
    overflow: hidden;
    margin-bottom: -25px;
}


</style>


    <body onload ="auto_title()">

        <!--btn-->
        <div class="container-fluid">
            <div class="row" style="opacity: 1;">
                <form class="positive-form" action="#" method="POST">
                    <input type="search" name="search" placeholder="搜尋" style="text-transform: capitalize">
                </form>
            </div>
        </div>

        <!--Big logo-->
        <section style="padding-bottom: 30em;">
            <div class="container-fluid load" style="margin-left: 10px; margin-right: 10px;">
                <div class="row">
                    <div class="col-md-12" style="padding-top: 5em">
                        <center>
                            <a href="../html/homepage.html">
                                <img id="img-moving" src="http://ecloud.ewang.com.tw/userUpload/images/fix-logo.png" class="center-logo hoverable img-mobile">
                            </a>
                            <h1 id="auto-title" class="title1">
                                
                            </h1>

                            <a type="button" class="btn btn-rounded btn-danger scroll" href="#link-drop" style="letter-spacing: 0.1em; font-size: 15px;">
                                <img height="28" width="28" src="https://www.thrivingparish.org/wp-content/uploads/2018/01/white-down-arrow-png-2.png">
                                請按我看下面內容
                            </a>
                        </center>
                    </div>
                </div>
        </section>

        <!--Block 1-->
        <section id="link-drop" class="scroll-1" style="padding-bottom: 15px;">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="title1-area">
                            <h4 class="big-title">
                                品牌介紹
                            </h4>

                            <p class="animated zoomIn" data-animation="zoomIn" style="font-size: 20px;color: #fff">
                                <b style="font-size: 23px; margin-bottom: 10px;letter-spacing: 0.5em">栽種有機茶，突破困境</b>，<br><br>
                                <p class="content-in-block">
                                    建國百年女神農 佳芳茶園 『陳麗雪』
                                
                                陳麗雪帶著堅毅的表情說「不改變，就是被淘汰」。身為媳婦，卻毅然將家族茶園轉型有機栽種，面臨親友的質?與經濟壓力，
                                不是一般人所能承受，
                                但陳麗雪卻是硬生生的挺了過來。當別人還不認識有機，對有機不能認可時，她卻堅持做到底，為的是「家」，還有...
                                </p>
                            </p>
                            <a href="../html/About-us.html#brand-story" id="brand-story" class="btn btn1 btn-outline-danger waves-effect waves-light">閱讀全文</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!--Block 2-->
        <section id="link-drop" class="scroll-2" style="padding-bottom: 15px;">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="title1-area" style="overflow: hidden;">
                            <!--我的故事-->
                            <div class="row" style="display: inline; height: 32em">
                                <h4 class="big-title">
                                    主人故事
                                </h4>

                                <div class="col-md-6 col-sm-4" style="display: block;">
                                    <p class="animated zoomIn" data-animation="zoomIn" style="font-size: 15px;color: #fff">
                                        <p class="content-in-block">
                                            臺東縣卑南鄉陳麗雪女士為專業茶農，
                                            具有學習與創新的精神，積極參與各項合作研發，並配合政府政策推行廠農合作、
                                            落實產銷履歷及安全用藥，推展優質安全茶業，開發茶葉新產品。經營有機茶園，
                                            作為推廣有機農業的示範，進而帶動明峰村朝向有機生態村發展。
                                            參加各種茶葉展示及有機農夫市集活動，行銷臺東茶葉，提高知名度，
                                            開拓茶葉多元行銷通路。推廣休閒農業，結合初鹿休閒農業區，朝向觀光茶園發展。                         
                                        </p>
                                    </p>
                                    <a href="http://ecloud.ewang.com.tw/userUpload/images/about-3(1).jpg" class="btn btn2 btn-outline-danger waves-effect waves-light">閱讀全文</a>                    
                                </div>

                                <div class="col-md-6 col-sm-4">
                                    <a href="#">
                                        <img class="img-hover" src="http://ecloud.ewang.com.tw/userUpload/images/about-3(1).jpg">
                                    </a>
                                </div>
                            </div>

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

        <section>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="title1-area" style="overflow: hidden">

                            <h4 class="big-title">
                                獲獎事蹟
                            </h4>


                            <div class="col-md-12">
                                <div class="col-md-6">
                                    <div class="view overlay">
                                        <img src="http://www.taiwan-tea.net/wp-content/uploads/2018/02/brand-1.jpg" alt="" class="img-fluid img-responsive waves-effect waves-light img-hover">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="box-fill-black">
                                        <div class="box-title-center">
                                            <h2 style="color: rgba(248, 178, 113, 0.918)">獲獎事蹟</h2>
                                        </div>

                                        <div class="box-text">
                                            <p>膺選89年優秀茶葉產製技術改良農戶</p>
                                            <p>膺選90年模範勞工</p>
                                            <p>榮獲99年台東縣農會優秀有機農業經營農戶</p>
                                            <p>台東縣農會99年度創新農業經營管理獎</p>
                                            <p>榮獲民國99年國家品質保證 金牌獎...</p>
                                        </div>
                                    </div>

                                    <a href="../html/about-4.html" class="btn btn3 btn-outline-danger waves-effect waves-light">閱讀全文</a>
                                </div>
                            </div>

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

        <!--Block 3-->
        <section id="link-drop" class="scroll-3" style="padding-bottom: 15px;">
            <div class="row">
                <div class="container product-box">
                    <div class="col-md-12 col-sm-8">
                        <h4 class="box-title" style="color: #000">產品介紹 Product Introduction</h4>

                        <!--product tea-1 -->
                        <div class="col-md-4 col-sm-6">
                            <div class="view overlay product-box z-depth-1-half">
                                <div class="view overlay">
                                    <button type="button" class="no-pb waves-effect waves-light" onclick="product_1()">
                                        <img src="http://ecloud.ewang.com.tw/userUpload/images/台灣冷泡綠茶茶包.jpg" class="img-fluid img-responsive">
                                    </button>
                                </div>

                                <div class="box-content">
                                    <div class="box-small-title" style="color: #000; font-size: 23px">
                                        天然稜堡綠茶茶包
                                    </div>

                                    <div class="box-text" style="color: #000">
                                        <p>
                                            單盒 / 30 包裝
                                        </p>

                                        <p style="background: red; color: #fff;">售價 $350</p>
                                    </div>

                                    <button type="button" class="btn btn-light-green waves-effect waves-light" onclick="product_1()" style="letter-spacing: 0.1em; font-size: 23px !important;">
                                        詳細資料
                                    </button>

                                    <button type="button" class="btn btn-brown waves-effect waves-light" data-toggle="modal" data-target="#tea-1" style="letter-spacing: 0.1em; font-size: 23px !important">立即購買</button>
                                </div>
                            </div>
                        </div>

                        <!--product tea-2 -->
                        <div class="col-md-4 col-sm-6">
                            <div class="view overlay product-box z-depth-1-half">
                                <div class="view overlay">
                                    <button type="button" class="no-pb waves-effect waves-light" onclick="product_2()">
                                        <img src="http://ecloud.ewang.com.tw/userUpload/images/台東有機紅烏龍.jpg" class="img-fluid img-responsive">
                                    </button>
                                </div>

                                <div class="box-content">
                                    <div class="box-small-title" style="font-size: 23px">
                                        台灣有機紅烏龍
                                    </div>

                                    <div class="box-text" style="font-size: 23px; color: #000">
                                        <p>
                                            壹罐150公克±5公克 
                                        </p>

                                        <p style="background: red; color: #fff;">售價 $450</p>
                                    </div>

                                    <button type="button" class="btn btn-light-green waves-effect waves-light" onclick="product_2()" style="letter-spacing: 0.1em; font-size: 23px !important">
                                        詳細資料
                                    </button>

                                    <button type="button" class="btn btn-brown waves-effect waves-light" data-toggle="modal" data-target="#tea-2" style="letter-spacing: 0.1em; font-size: 23px !important">立即購買</button>

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

                        <!--product tea-4-->
                        <div class="col-md-4 col-sm-6">
                            <div class="view overlay product-box z-depth-1-half">
                                <div class="view overlay">
                                    <button type="button" class="no-pb waves-effect waves-light" onclick="product_4()">
                                        <img src="http://ecloud.ewang.com.tw/userUpload/images/紅玉紅烏龍.jpg" class="img-fluid img-responsive" style="height: 11.4em; width: 101%;">
                                    </button>
                                </div>

                                <div class="box-content">
                                    <div class="box-small-title" style=" font-size: 23px !important">
                                        紅玉紅烏龍
                                    </div>

                                    <div class="box-text" style=" font-size: 23px !important; color: #000">
                                        <p>
                                            壹罐150公克±5公克 
                                        </p>

                                        <p style="background: red; color: #fff;">售價$650</p>
                                    </div>

                                    <button type="button" class="btn btn-light-green waves-effect waves-light" onclick="product_4()" style="letter-spacing: 0.1em; font-size: 23px !important; opacity: 1 !important">
                                        詳細資料
                                    </button>

                                    <button type="button" class="btn btn-brown waves-effect waves-light" data-toggle="modal" data-target="#tea-4" style="letter-spacing: 0.1em; font-size: 23px !important; opacity: 1 !important">立即購買</button>

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

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

        <!--modal 1-->
        <div id="tea-1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="tea-product-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <!--Modal header-->
                    <div class="modal-header text-center">
                        <button type="button" class="close" data-dismiss="modal" aria-label="close" style="opacity: 1 !important; transform: translateY(-10%) !important">
                            <span aria-hidden="true">&times;</span>
                        </button>

                        <h4 id="tea-1" class="modal-title w-100 font-weight-bold">您所選購買品名：天然稜堡綠茶茶包</h4>
                    </div>

                    <form action="#sell.php" method="POST">
                        <div class="modal-body mx-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="text-center view overlay zoom">
                                        <img id="tea-1" src="http://ecloud.ewang.com.tw/userUpload/images/台灣冷泡綠茶茶包.jpg" class="img-fluid img-responsive z-depth-1-half" style="opacity: 1 !important; transform: translateY(-10%) !important">
                                    </div>
                                </div>
                                    
                                <div class="col-md-6">
                                    <div class="md-form mb-5">
                                        <i class="fa fa-user-alt prefix grey-text"></i>
                                        <input type="text" id="tea-username" class="form-control validated">
                                        <label for="tea-username">請輸入您的名字</label>
                                    </div>

                                    <div class="md-form mb-5">
                                        <i class="fa fa-phone prefix grey-text"></i>
                                        <input type="text" id="tea-phone-number" class="form-control validated">
                                        <label for="tea-phone-number">電話或手機號碼</label>
                                    </div>

                                    <div class="md-form mb-5">
                                        <i class="fa fa-envelope prefix grey-text"></i>
                                        <input type="email" id="tea-user-email" class="form-control validate">
                                        <label for="tea-user-email">請輸入您的電子郵件</label>
                                    </div>

                                    <div class="md-form mb-4">
                                        <i class="fa fa-map prefix grey-text"></i>
                                        <input type="text" id="tea-address" class="form-control validate">
                                        <label  for="tea-address">請輸入您的地址</label>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="modal-footer d-flex justify-content-center">
                            <button id="tea-1" type="submit" class="btn btn-cyan btn-rounded waves-effect waves-light" style="opacity: 1 !important; transform: translateY(-10%) !important">送件
                            <i class="fa fa-paper-plane ml-1"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--modal 2-->
        <div id="tea-2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="tea-product-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <!--Modal header-->
                    <div class="modal-header text-center">
                        <button type="button" class="close" data-dismiss="modal" aria-label="close" style="opacity: 1 !important; transform: translateY(-10%) !important">
                            <span aria-hidden="true">&times;</span>
                        </button>

                        <h4 class="modal-title w-100 font-weight-bold">您所選購買品名：台灣有機紅烏龍</h4>

                    </div>

                    <form action="#" method="POST">
                        <div class="modal-body mx-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="text-center view overlay zoom">
                                        <img id="tea-1" src="http://ecloud.ewang.com.tw/userUpload/images/台東有機紅烏龍.jpg" class="img-fluid img-responsive z-depth-1-half" style="opacity: 1 !important; transform: translateY(-10%) !important">
                                    </div>
                                </div>
                                    
                                <div class="col-md-6">
                                    <div class="md-form mb-5">
                                        <i class="fa fa-user prefix grey-text"></i>
                                        <input type="text" id="tea-username" class="form-control validated">
                                        <label  for="tea-username">請輸入您的名字</label>
                                    </div>

                                    <div class="md-form mb-5">
                                        <i class="fa fa-phone prefix grey-text"></i>
                                        <input type="text" id="tea-phone-number" class="form-control validated">
                                        <label  for="tea-phone-number">電話或手機號碼</label>
                                    </div>

                                    <div class="md-form mb-5">
                                        <i class="fa fa-envelope prefix grey-text"></i>
                                        <input type="email" id="tea-user-email" class="form-control validate">
                                        <label  for="tea-user-email">請輸入您的電子郵件</label>
                                    </div>

                                    <div class="md-form mb-4">
                                        <i class="fa fa-map prefix grey-text"></i>
                                        <input type="text" id="tea-address" class="form-control validate">
                                        <label  for="tea-address">請輸入您的地址</label>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="modal-footer d-flex justify-content-center">
                            <button id="tea-1" type="submit" class="btn btn-cyan btn-rounded waves-effect waves-light" style="opacity: 1 !important; transform: translateY(-10%) !important">送件
                            <i class="fa fa-paper-plane ml-1"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--modal 4-->
        <div id="tea-4" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="tea-product-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <!--Modal header-->
                    <div class="modal-header text-center">
                        <button type="button" class="close opacity" data-dismiss="modal" aria-label="close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                        <h4 class="modal-title w-100 font-weight-bold">您所選購買品名：紅玉紅烏龍</h4>

                    </div>

                    <form action="#sell.php" method="POST">
                        <div class="modal-body mx-3">
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="text-center view overlay zoom">
                                        <img id="tea-1" src="http://ecloud.ewang.com.tw/userUpload/images/紅玉紅烏龍.jpg" class="img-fluid img-responsive z-depth-1-half" style="opacity: 1 !important">
                                    </div>
                                </div>
                                
                                <div class="col-md-7">
                                    <div class="md-form mb-5">
                                        <i class="fa fa-user-alt prefix grey-text"></i>
                                        <input type="text" id="tea-username" class="form-control validated">
                                        <label  for="tea-username">請輸入您的名字</label>
                                    </div>

                                    <div class="md-form mb-5">
                                        <i class="fa fa-phone prefix grey-text"></i>
                                        <input type="text" id="tea-phone-number" class="form-control validated">
                                        <label  for="tea-phone-number">電話或手機號碼</label>
                                    </div>

                                    <div class="md-form mb-5">
                                        <i class="fa fa-envelope prefix grey-text"></i>
                                        <input type="email" id="tea-user-email" class="form-control validate">
                                        <label  for="tea-user-email">請輸入您的電子郵件</label>
                                    </div>

                                    <div class="md-form mb-4">
                                        <i class="fa fa-map prefix grey-text"></i>
                                        <input type="text" id="tea-address" class="form-control validate">
                                        <label  for="tea-address">請輸入您的地址</label>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="modal-footer d-flex justify-content-center">
                            <button id="tea-1" type="submit" class="btn btn-cyan btn-rounded waves-effect waves-light" style="opacity: 1 !important; transform: translateY(-10%) !important">送件
                            <i class="fa fa-paper-plane ml-1"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
            
        <!-- Bootstrap tooltips -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
        <!-- MDB core JavaScript -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/js/mdb.min.js"></script>        
        
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>        <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-hover-dropdown/2.2.1/bootstrap-hover-dropdown.min.js"></script>-->

        <!--Greenstock Cools-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenLite.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineLite.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineMax.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/easing/EasePack.min.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>

        <!--scroll-->
        <script type="text/javascript">
            window.sr = ScrollReveal();
            sr.reveal('.nav',{
                duration: 2000,
                origin:'left',
                mobile: true,
            });

            sr.reveal('img',{
                duration: 2500,
                origin:'bottom',
                mobile: true,
                useDelay: 'always'
            });

            sr.reveal('#img-moving',{
                duration: 2500,
                origin:'bottom',
                mobile: true,
                useDelay: 'always'
            });

            sr.reveal('.title1',{
                duration: 3000,
                origin:'bottom',
                mobile: true,
                useDelay: 'always',
                reset: true
            });

            sr.reveal('.scroll-1',{
                duration: 2000,
                origin:'left',
                mobile: true,
                useDelay: 'always',
                reset: true
            });

            sr.reveal('button',{
                duration: 1500,
                origin:'bottom',
                mobile: true,
                useDelay: 'always',
                reset: true
            });

            sr.reveal('.scroll-2',{
                duration: 2000,
                origin:'right',
                mobile: true,
                useDelay: 'always',
                reset: true
            });

            sr.reveal('.scroll',{
                duration: 2000,
                origin: 'bottom',
                mobile: false,
                useDelay: 'always',
                reset: true
            });
        </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");

            });

            TweenLite.to("#img-moving", 2.5, { ease: Back.easeOut.config(1.7), y: -30 });        
        </script>

        <script type="text/javascript">
            function product_1(){
                window.open('http://ecloud.ewang.com.tw/index.php?Act=120&SK=822&MK=335&PK=813');
            }

            function product_2(){
                window.open('http://ecloud.ewang.com.tw/index.php?Act=120&SK=817&MK=335&PK=811');
            }

            function product_3(){
                window.open('http://ecloud.ewang.com.tw/index.php?Act=120&SK=819&MK=335&PK=811');
            }

            function product_4(){
                window.open('http://ecloud.ewang.com.tw/index.php?Act=120&SK=818&MK=335&PK=811');
            }

            var i = 0;
            var title = "大自然給我最好的禮物";
            var speed = 310;

            function auto_title(){
                if(i < title.length){
                    document.getElementById('auto-title').innerHTML += title.charAt(i);
                    i++;
                    setTimeout(auto_title, speed);
                }
            }
        </script>

    </body>

</html>