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

<head>


    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.16/css/mdb.min.css" rel="stylesheet">    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.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">

    <style>
        * {text-transform: capitalize;letter-spacing: 0.1em;line-height: 1.7;-webkit-font-smoothing: antialiased;}*, ::after, ::before{box-sizing: border-box;-webkit-box-sizing: border-box}::selection{background: #ebf2e3;}:focus{outline: -webkit-focus-ring-color auto 5px;}.box-1 {display: block;margin-bottom: 2em;padding-left: 20px;padding-right: 20px;overflow: hidden;}.ul-title-list-center{font-size: 40px;-webkit-text-fill-color: lightcoral;padding: 15px 0 0 70px;}.box-list-column{column-count: 2;column-gap: 100px;font-size: 23px;padding: 2% !important; list-style: circle}.box-list-column li{list-style: circle}
        @media (max-width: 812px){.col-md-10{padding-left: 2px !important; padding-right: 2px !important}.box-list-column{column-count: 1; column-gap: 0px; font-size: 20px !important}.ul-title-list-center{padding: 0 !important}}
        .no-js .owl-carousel, .owl-carousel.owl-loaded{padding: 2%}.box-title{position: relative;font-weight: 100;color: rgba(255, 255, 255, 0.918);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-color {background: rgba(0, 0, 0, .75)}.box-text {font-size: 20px !important;color: rgb(197, 197, 197);}.bt-23p{font-size: 23px;color: rgb(197, 197, 197)}.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-list{list-style-type: none !important;float: left;color: #fff;display: block;padding: 0; padding-inline-start: 0; padding-inline-end: 0;margin: 0; margin-block-start: 0; margin-block-start: 0;}.box-content{padding-left: 15px;padding-right: 15px;padding-bottom: 70px;}.no-pb{padding: 0;border: none;}.box-content{margin-top: 10%;}.box-text-color{fill: lightgreen; -webkit-text-fill-color: lightgreen}@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 (max-width: 812px){.box-absolute{position: relative !important;background: rgba(0,0,0,.9) !important;top: 0}}
    </style>

    <style>
    .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;}body {background-size: cover;overflow: visible !important;}.bgw {background-color: transparent;}.navbar {transition: all 0.6s ease-out;}.navbar-default .navbar-brand {color: saddlebrown;font-weight: bold;}.navbar,.navbar-default,.navbar-brand,.dropdown-menu>li>a {font-weight: 500 !important;}.navbar-default .navbar-brand:hover {color: brown;font-weight: bold;}section {margin: 0;padding: 0;position: relative;}.dropdown-menu {background: white;position: absolute;top: 100%;opacity: 1;}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active {-webkit-animation: autofill 0s forwards;animation: autofill 0s forwards;}@keyframes autofill {100% {background: #fff;color: inherit;}}@-webkit-keyframes autofill {100% {background: #fff;color: inherit;}}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;}.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;}.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 !important;}.navbar-default .navbar-nav>li::after{content: '';height: 2px !important;width: 0 !important;transform: scaleX(0) !important;transition: transform .3s ease-in-out !important;background: black !important;}.navbar-default .navbar-nav>li:hover::after{width: 100px;transform: scaleX(1) !important;}.navbar-default .navbar-nav>li {display: block !important;color: #000 !important;text-decoration: none !important;}
.row1 > .column {padding: 0 8px;}.row1:after {content: "";display: table;clear: both;}.column {float: left;width: 100%;}.column-1{float: left;width: 25%}.box-left{display: inline-flex;float: left}.modal {display: none;position: fixed;z-index: 1;padding-top: 50px;left: 0;top: 0;width: 100%;height: auto;overflow: auto;background-color: rgba(0,0,0,.8);}.modal-content {position: relative;background-color: transparent;margin: auto;padding: 0;width: 28%;max-width: 1200px;top: 15%}.close:hover,.close:focus {color: #fff;text-decoration: none;cursor: pointer;}.mySlides {display: none;}.cursor {cursor: pointer;}.prev,.next {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -50px;color: white !important;font-weight: bold;font-size: 20px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;-webkit-user-select: none;}.next {right: 0;border-radius: 3px 0 0 3px;}.prev:hover,.next:hover {background-color: rgba(0, 0, 0, 0.8);}.numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 13px; background: rgba(0,0,0,.5)}img{margin-bottom: -4px;}.demo {opacity: 0.6;}.close{transform: translateY(100%);font-size: 40px; opacity: .5 !important}.active,.demo:hover {opacity: 1;}img.hover-shadow {transition: 0.3s;}.hover-shadow:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
    @media (max-width: 812px){.modal-content{width: 88% !important; top: 23% !important}.navbar .dropdown-menu a{font-size: 15px}}
.navbar .dropdown-menu a{font-size: 18px}
.row1 > .column {padding: 0 8px;}.row1:after {content: "";display: table;clear: both;}.column {float: left;width: 100%;}.column-1{float: left;width: 25%}.box-left{display: inline-flex;float: left}.modal {display: none;position: fixed;z-index: 1;padding-top: 50px;left: 0;top: 0;width: 100%;height: auto;overflow: auto;background-color: rgba(0,0,0,.8);}.modal-content {position: relative;background-color: transparent;margin: auto;padding: 0;width: 28%;max-width: 1200px;top: 15%}.close:hover,.close:focus {color: #fff;text-decoration: none;cursor: pointer;}.mySlides {display: none;}.cursor {cursor: pointer;}.prev,.next {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;margin-top: -50px;color: white !important;font-weight: bold;font-size: 20px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;-webkit-user-select: none;}.next {right: 0;border-radius: 3px 0 0 3px;}.prev:hover,.next:hover {background-color: rgba(0, 0, 0, 0.8);}.numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 10px; background: rgba(0,0,0,.5)}img{margin-bottom: -4px;}.demo {opacity: 0.6;}.close{transform: translateY(100%);font-size: 40px; opacity: .5 !important}.active,.demo:hover {opacity: 1;}img.hover-shadow {transition: 0.3s;}.hover-shadow:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
    @media (max-width: 812px){.modal-content{width: 88% !important; top: 23% !important}.navbar .dropdown-menu a{font-size: 15px}.navbar-nav .open .dropdown-menu{background: #fff !important; margin-bottom: 8px !important}}
.navbar .dropdown-menu a{font-size: 18px}.navbar .dropdown-menu a:hover{font-size: 23px}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{font-size: 45px;background: transparent !important; float: left}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot span{color: #fff}
.owl-nav {transform: translateX(50%)}
</style>


</head>

<body>

    <section>
        <div class="container-fluid">

            <div class="row mrb-5">
                <div class="col-md-12">
                    <div class="col-md-4">
                        <div class="fix-model">
                            <img src="http://www.lohasplus.com.tw/userUpload/images/4-fix.jpg" alt="reward" class="img-100 img-fluid img-responsive">
                        </div>
                    </div>

                    <div class="col-md-8 mr-top-10">
                        <div class="box-1 box-color p-top-6">
                            <div class="box-content">
                                <div class="box-title box-text-color" style="padding-left: 0">
                                    <h1>品牌建立</h1>
                                </div>

                                <div class="box-text">
                                    佳芳茶園以產銷班為組織，配合廠農合作，申請註冊商標，自創品牌共用行銷以台東茶，有機茶、綠茶、紅茶、紅烏龍行銷全國。
                                </div>
                            </div>

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

            <div class="row">
                <div class="col-md-11 col-md-offset-1">
                    <div class="box-1 box-color">
                        <div class="ul-title-list-center">獲獎事蹟</div>
                        <ul class="box-list box-list-column">
                            <li>膺選89年優秀茶葉產製技術改良農戶</li>
                            <li>膺選90年模範勞工</li>
                            <li>榮獲99年台東縣農會優秀有機農業經營農戶</li>
                            <li>台東縣農會99年度創新農業經營管理獎</li>
                            <li>榮獲民國99年國家品質保證 金牌獎</li>
                            <li>榮獲民國100年兩岸百大傑出企業家</li>
                            <li>104年通過『生產』『加工』雙有機認證</li>
                            <li>榮獲104台灣第一品牌榮獲</li>
                            <li>榮獲104茶莊亮點</li>
                            <li>榮獲104衛生工廠四星級</li>
                            <li>榮獲105-107年台東好物嚴選標章</li>
                            <li>榮獲台東縣工商策進會102年「冠軍王」</li>
                            <li>榮獲民國100年十大神農獎</li>
                            <li>當選100年創會有機協會理事長</li>
                            <li>榮獲民國101年海峽兩岸金質獎</li>
                            <li>榮獲民國102年茶葉比賽 金牌獎</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="box-1 box-color">

                        <div class="owl-carousel row1">
                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-1.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(1)">
                                </a>
                            </div>

                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/about-2.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(2)">
                                </a>
                            </div>       

                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-10.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(3)">
                                </a>
                            </div>              

                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-2.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(4)">
                                </a>
                            </div>                                
                                
                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-3.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(5)">
                                </a>
                            </div>                                                         
                                
                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-4-1.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(7)">
                                </a>
                            </div>                            
                            
                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-5.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(8)">
                                </a>
                            </div>

                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-6.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(9)">
                                </a>
                            </div>

                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-7.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(10)">
                                </a>
                            </div>

                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-8-1.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(11)">
                                </a>
                            </div>

                            <div class="view overlay column">
                                <a href="#1" class="waves-light waves-effect">
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-9.jpg" alt="" class="img-responsive hover-shadow cursor" onclick="openModal();currentSlide(12)">
                                </a>
                            </div>
                        </div>

                        <div id="myModal" class="modal">
                            
                            <div class="modal-content">
                          	<span class="close cursor" onclick="closeModal()">&times;</span>
                                <div class="mySlides">
                                    <div class="numbertext">1 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-1.jpg" style="width:100%">
                                </div>
                          
                                <div class="mySlides">
                                    <div class="numbertext">2 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/about-2.jpg" style="width:100%">
                                </div>
                          
                                <div class="mySlides">
                                    <div class="numbertext">3 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-10.jpg" style="width:100%">
                                </div>
                                
                                <div class="mySlides">
                                    <div class="numbertext">4 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-2.jpg" style="width:100%">
                                </div>

                                <div class="mySlides">
                                    <div class="numbertext">5 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-3.jpg" style="width:100%">
                                </div>

                                <div class="mySlides">
                                    <div class="numbertext">6 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-4-1.jpg" style="width:100%">
                                </div>

                                <div class="mySlides">
                                    <div class="numbertext">7 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-5.jpg" style="width:100%">
                                </div>

                                <div class="mySlides">
                                    <div class="numbertext">8 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-6.jpg" style="width:100%">
                                </div>

                                <div class="mySlides">
                                    <div class="numbertext">9 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-7.jpg" style="width:100%">
                                </div>

                                <div class="mySlides">
                                    <div class="numbertext">10 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-8-1.jpg" style="width:100%">
                                </div>

                                <div class="mySlides">
                                    <div class="numbertext">11 / 11</div>
                                    <img src="http://www.lohasplus.com.tw/userUpload/images/award-9.jpg" style="width:100%">
                                </div>
                              
                                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                                <a class="next" onclick="plusSlides(1)">&#10095;</a>
                            
                                <div class="caption-container">
                                    <p id="caption"></p>
                                </div>
                          
                                <div class="box-left">
                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-1.jpg" style="width:100%" onclick="currentSlide(1)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/about-2.jpg" style="width:100%" onclick="currentSlide(2)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-10.jpg" style="width:100%" onclick="currentSlide(3)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-2.jpg" style="width:100%" onclick="currentSlide(4)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-3.jpg" style="width:100%" onclick="currentSlide(5)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-4-1.jpg" style="width:100%" onclick="currentSlide(6)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-5.jpg" style="width:100%" onclick="currentSlide(7)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-6.jpg" style="width:100%" onclick="currentSlide(8)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-7.jpg" style="width:100%" onclick="currentSlide(9)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-8-1.jpg" style="width:100%" onclick="currentSlide(10)">
                                    </div>

                                    <div class="column-1">
                                        <img class="demo cursor" src="http://www.lohasplus.com.tw/userUpload/images/award-9.jpg" style="width:100%" onclick="currentSlide(11)">
                                    </div>
                                </div>

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

            <div class="row">
                <div class="col-md-11 col-md-offset-1">
                    <div class="box-1 box-color">
                        <div class="ul-title-list-center">重要訓練資歷</div>
                        <ul class="box-list box-list-column">
                            <li>茶園經營管理30年</li>
                            <li>茶葉市場行銷28年</li>
                            <li>茶葉產銷班班長5年</li>
                            <li>有機驗證13年</li>
                            <li>茶葉生產履歷驗證6年</li>
                            <li>茶葉生產履歷驗證6年</li>
                            <li>廠農合作負責人</li>
                            <li>有機農業經營管理研習班 40 小時結業</li>
                            <li>有機協會創會理事長</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

    </section>
    

    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script>
    $(document).ready(function(){
        $(".owl-carousel").owlCarousel();
    });

    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        autoHeight: true,
        autoplay:true,
        items: 4,
        autoplayTimeout:5000,
        autoplayHoverPause:true,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
                nav:true
            },
            600:{
                items:3,
                nav:false
            },
            1000:{
                items:5,
                nav:true,
                loop:false
            }
        }
});

        function openModal() {
          document.getElementById('myModal').style.display = "block";
        }
        
        function closeModal() {
          document.getElementById('myModal').style.display = "none";
        }
        
        var slideIndex = 1;
        showSlides(slideIndex);
        
        function plusSlides(n) {
          showSlides(slideIndex += n);
        }
        
        function currentSlide(n) {
          showSlides(slideIndex = n);
        }
        
        function showSlides(n) {
          var i;
          var slides = document.getElementsByClassName("mySlides");
          var dots = document.getElementsByClassName("demo");
          var captionText = document.getElementById("caption");
          if (n > slides.length) {slideIndex = 1}
          if (n < 1) {slideIndex = slides.length}
          for (i = 0; i < slides.length; i++) {
              slides[i].style.display = "none";
          }
          for (i = 0; i < dots.length; i++) {
              dots[i].className = dots[i].className.replace(" active", "");
          }
          slides[slideIndex-1].style.display = "block";
          dots[slideIndex-1].className += " active";
          captionText.innerHTML = dots[slideIndex-1].alt;
        }

    </script>

</body>

</html>