<html lang="zh-TW">

    <head>

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


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

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

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

        <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， 翼王資訊社建置維護">
        <meta name="author" content="">

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


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

	<style type="text/css">

		@charset "UTF-8";


body{
  background-size: cover;
}

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


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

.navbar, .navbar-default, .navbar-brand, .dropdown-menu>li>a{ font-weight: 100 !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: 1.5em;
  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 { 
  transform: translateY(-30%);
  font-size: 1.5em; }

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

.btn2 {
  transform: translateY(-20%);
  font-size: 1.5em; }

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

.btn3 {
  position: absolute !important;
  top: 1.3em;
  left: 23em;
  font-size: 1.2em !important; }

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

/* End buttons */
.img-1 {
  position: relative;
  top: 1em;
  left: -3em;
  border-radius: 2%;
  width: 23em; }

.img-1:hover {
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px); }

.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((75% - 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 */

@charset "UTF-8";
/*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;
}


/* end iphone design */

body {
  overflow: visible !important;
}

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

.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 {
	transform: translateY(-255%) translateX(20%);
}

.i-search {
  color: #919191;
  transform: translateX(17%);
  font-size: 16px;
}

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

/* buttons */

.btn-4 {
  float: right; 
  z-index: 1000;
  transform: translateY(-80%);
  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;
}
	

	</style>

    </head>

    <body onload ="auto_title()">


        <button type="button" class="btn btn-4 btn-danger btn-rounded" 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>

        <!--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: 10em;">
                        <center>
                            <a href="http://ecloud.ewang.com.tw/index.php?Act=120">
                                <img id="img-moving" src="userUpload/20180513logo.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: 15px;color: #fff">
                                <b style="font-size: 20px; 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 btn-rounded waves-effect">閱讀全文</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: block; 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="../html/about-2.html" class="btn btn2 btn-outline-danger btn-rounded waves-effect">閱讀全文</a>                    
                                </div>

                                <div class="col-md-6 col-sm-4">
                                    <a href="#">
                                        <img class="img-1" 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="row" style="display: block">
                                <div class="col-md-6 col-sm-6">
                                    <img id="img-2" class="img-2" src="http://www.taiwan-tea.net/wp-content/uploads/2018/02/brand-1.jpg">
                                </div>

                                <div class="title1-area col-md-6 col-sm-6" style="border-radius: 2%;width: 40em; left: -.5em;top: -1em">
                                    <div class="col-sm-12">
                                        <b class="small-title" style="letter-spacing: 0.5em">獲獎事蹟</b>
                                        <p class="content-in-block" style="width: 32em">
                                            <p>膺選89年優秀茶葉產製技術改良農戶</p>
                                            <p>膺選90年模範勞工</p>
                                            <p>榮獲99年台東縣農會優秀有機農業經營農戶</p>
                                            <p>台東縣農會99年度創新農業經營管理獎</p>
                                            <p>榮獲民國99年國家品質保證 金牌獎...</p>
                                        </p>
                                    </div>
                                    <a href="../html/About-us.html#medals" class="btn btn3 btn-outline-danger waves-effect">
                                        閱讀全文
                                    </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">產品介紹 Product Introduction</h4>

                        <!--product tea-1 -->
                        <div class="col-md-3 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/%E5%8F%B0%E7%81%A3%E5%86%B7%E6%B3%A1%E7%B6%A0%E8%8C%B6%E8%8C%B6%E5%8C%85.jpg" class="img-fluid img-responsive">
                                    </button>
                                </div>

                                <div class="box-content">
                                    <div class="box-small-title">
                                        天然稜堡綠茶茶包
                                    </div>

                                    <div class="box-text">
                                        <p>
                                            單盒 / 30 包裝
                                        </p>

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

                                    <button type="button" class="btn btn-rounded btn-light-green waves-effect waves-light btn-md ml-4" onclick="product_1()" style="letter-spacing: 0.1em">
                                        詳細資料
                                    </button>

                                    <button type="button" class="btn btn-rounded btn-brown" data-toggle="modal" data-target="#tea-1" style="letter-spacing: 0.1em">立即購買</button>
                                </div>
                            </div>
                        </div>

                        <!--product tea-2 -->
                        <div class="col-md-3 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/%E5%8F%B0%E6%9D%B1%E6%9C%89%E6%A9%9F%E7%B4%85%E7%83%8F%E9%BE%8D.jpg" class="img-fluid img-responsive">
                                    </button>
                                </div>

                                <div class="box-content">
                                    <div class="box-small-title">
                                        台灣有機紅烏龍
                                    </div>

                                    <div class="box-text">
                                        <p>
                                            壹罐150公克±5公克 
                                        </p>

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

                                    <button type="button" class="btn btn-rounded btn-light-green waves-effect waves-light btn-md ml-4" onclick="product_2()" style="letter-spacing: 0.1em">
                                        詳細資料
                                    </button>

                                    <button type="button" class="btn btn-rounded btn-brown" data-toggle="modal" data-target="#tea-2" style="letter-spacing: 0.1em">立即購買</button>

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

                        <!--product tea-3 -->
                        <div class="col-md-3 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_3()">
                                        <img src="http://ecloud.ewang.com.tw/userUpload/images/1%E8%9C%9C%E9%A6%99%E7%B4%85%E8%8C%B6%E5%8C%85.jpg" class="img-fluid img-responsive">
                                    </button>
                                </div>

                                <div class="box-content">
                                    <div class="box-small-title">
                                        蜜香紅茶有機茶
                                    </div>

                                    <div class="box-text">
                                        <p>
                                            75公克±5公克 
                                        </p>

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

                                    <button type="button" class="btn btn-rounded btn-light-green waves-effect waves-light btn-md ml-4" onclick="product_3()" style="letter-spacing: 0.1em">
                                        詳細資料
                                    </button>

                                    <button type="button" class="btn btn-rounded btn-brown" data-toggle="modal" data-target="#tea-3" style="letter-spacing: 0.1em">立即購買</button>

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

                        <!--product tea-4-->
                        <div class="col-md-3 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/%E7%B4%85%E7%8E%89%E7%B4%85%E7%83%8F%E9%BE%8D.jpg" class="img-fluid img-responsive" style="height: 13.2em; width: 101%;">
                                    </button>
                                </div>

                                <div class="box-content">
                                    <div class="box-small-title">
                                        紅玉紅烏龍
                                    </div>

                                    <div class="box-text">
                                        <p>
                                            壹罐150公克±5公克 
                                        </p>

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

                                    <button type="button" class="btn btn-rounded btn-light-green waves-effect waves-light btn-md ml-4" onclick="product_4()" style="letter-spacing: 0.1em">
                                        詳細資料
                                    </button>

                                    <button type="button" class="btn btn-rounded btn-brown" data-toggle="modal" data-target="#tea-4" style="letter-spacing: 0.1em">立即購買</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" style="top: 0">

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

                        <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>
                    </div>

                    <form action="#" method="POST">
                        <div class="modal-body mx-3">
                            <div class="text-center view overlay zoom">
                                <img id="tea-1" src="http://ecloud.ewang.com.tw/userUpload/images/%E5%8F%B0%E7%81%A3%E5%86%B7%E6%B3%A1%E7%B6%A0%E8%8C%B6%E8%8C%B6%E5%8C%85.jpg" class="img-fluid img-responsive z-depth-1-half" style="opacity: 1 !important; transform: translateY(-10%) !important">
                            </div>
                            
                            <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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" for="tea-address">請輸入您的地址</label>
                            </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" style="top: -22em">

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

                        <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>
                    </div>

                    <form action="#" method="POST">
                        <div class="modal-body mx-3">
                            <div class="text-center view overlay zoom">
                                <img id="tea-1" src="http://ecloud.ewang.com.tw/userUpload/images/%E5%8F%B0%E6%9D%B1%E6%9C%89%E6%A9%9F%E7%B4%85%E7%83%8F%E9%BE%8D.jpg" class="img-fluid img-responsive z-depth-1-half" style="opacity: 1 !important; transform: translateY(-10%) !important">
                            </div>
                            
                            <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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" for="tea-address">請輸入您的地址</label>
                            </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 3-->
        <div id="tea-3" 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" style="top: -22em">

                    <!--Modal header-->
                    <div class="modal-header text-center">
                        <h4 class="modal-title w-100 font-weight-bold">您所選購買品名：蜜香紅茶有機茶</h4>

                        <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>
                    </div>

                    <form action="#" method="POST">
                        <div class="modal-body mx-3">
                            <div class="text-center view overlay zoom">
                                <img id="tea-1" src="http://ecloud.ewang.com.tw/userUpload/images/1%E8%9C%9C%E9%A6%99%E7%B4%85%E8%8C%B6%E5%8C%85.jpg" class="img-fluid img-responsive z-depth-1-half" style="opacity: 1 !important; transform: translateY(-10%) !important">
                            </div>
                            
                            <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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" for="tea-address">請輸入您的地址</label>
                            </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" style="top: -22em">

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

                        <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>
                    </div>

                    <form action="#" method="POST">
                        <div class="modal-body mx-3">
                            <div class="text-center view overlay zoom">
                                <img id="tea-1" src="http://ecloud.ewang.com.tw/userUpload/images/%E7%B4%85%E7%8E%89%E7%B4%85%E7%83%8F%E9%BE%8D.jpg" class="img-fluid img-responsive z-depth-1-half" style="opacity: 1 !important; transform: translateY(-10%) !important">
                            </div>
                            
                            <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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" 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 data-error="錯誤-wrong" data-success="正確-correct" for="tea-address">請輸入您的地址</label>
                            </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>

        <!--Block 4-->
        <section id="link-drop" class="scroll-4" style="padding-bottom: 15px;">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-8 product-box">

                        <h4 class="box-title" style="margin-bottom: 25px;">佳芳茶園有關資料</h4>

                        <!--Pic 1-->
                        <div class="col-md-6 col-sm-4">
                            <div class="view zoom overlay">
                                <button class="no-pb waves-effect waves-light waves-button" data-toggle="modal" data-target="#image-1">
                                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E6%8A%95%E5%BD%B1%E7%89%873(1).JPG" class="img-fluid img-responsive z-depth-1-half">
                                </button>
                            </div>
                        </div>

                        <!--Pic 2-->
                        <div class="col-md-6 col-sm-4">
                            <div class="view zoom overlay">
                                <button type="button" class="no-pb btn waves-effect waves-light waves-button" data-toggle="modal" data-target="#image-2">
                                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E6%8A%95%E5%BD%B1%E7%89%873(1).JPG" class="img-fluid img-responsive z-depth-1-half">
                                </button>
                            </div>
                        </div>

                        <div class="col-md-12 col-sm-8" style="transform: translateX(7%)">
                            <div class="view zoom overlay">
                                <button class="no-pb waves-effect waves-light waves-block">
                                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E6%8A%95%E5%BD%B1%E7%89%878.JPG" class="img-fluid img-responsive waves-block waves-light z-depth-1-half">
                                </button>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-4" style="margin-bottom: 3em;">
                            <div class="view zoom overlay">
                                <button class="no-pb btn waves-button waves-light waves-effect" data-toggle="modal" data-target="#image-3">
                                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E6%8A%95%E5%BD%B1%E7%89%876(1).JPG" class="img-fluid img-responsive z-depth-1-half">
                                </button>
                            </div>
                        </div>
                        
                        <div class="col-md-6 col-sm-4">
                            <div class="view zoom overlay">
                                <button class="btn waves-light waves-effect waves-button">
                                    <img src="http://ecloud.ewang.com.tw/userUpload/images/%E6%8A%95%E5%BD%B1%E7%89%879.JPG" class="img-fluid img-responsive z-depth-1-half">
                                </button>
                            </div>
                        </div>

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

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
            
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!--Modernizr -2.7.2 cdn-->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        

        <!--Turns Navbar to transparent background if user scrolled.-->
        <script type="text/javascript">
            //Turns Navbar to transparent background if user scrolled.
            function checkNavPosition() {
                var startYp = $('.navbar').height() * 0.2;
                if ($(window).scrollTop() > startYp) {
                    $('.navbar').removeClass("AtTop");
                }
                else {
                    $('.navbar').addClass("AtTop");
                }
            }
            //scroll smooth
            var anchor = document.querySelector('a[href="#link-drop"]')
            var target = document.getElementById('link-drop')
            anchor.addEventListener('click', function (e) {
            if (window.scrollTo) {
                e.preventDefault()
                window.scrollTo({'behavior': 'smooth', 'top': target.offsetTop})
            }
            })
            //Only activate function after rendering.
            if ($('.navbar').length > 0) {
                $(window).on("scroll load resize", function () { checkNavPosition(); });
            }

            // jQuery for page scrolling feature - requires jQuery Easing plugin
            $(function () {
                $('.scroll').bind('click', function (event) {
                    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                        if (target.length) {
                            $('html,body').animate({
                                scrollTop: target.offset().top
                            }, 800);
                            return false;
                        }
                    }
                });
            });
        </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");

            });
            
        </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');
            }

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

        </script>

    </body>

</html>