
<p>
        
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></p>

<p>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" rel="stylesheet" />
</p>

<p>
	<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
	<style type="text/css">
.nav-tabs {
    border-bottom: 1px solid gray;
    padding-left: 35%;
}

        .nav-tabs>li>a {
    margin-right: 3px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    font-size: 48px;
}

        .nav-tabs>li.active>a,
        .nav-tabs>li.active>a:focus,
        .nav-tabs>li.active>a:hover {
            color: blue;
            cursor: default;
            background-color: #fff;
            border: 1px solid #ddd;
            font-size: 20px;
            border-bottom-color: transparent;
            font-family: cursive;
        }
       
        hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 0px solid #eee;
}


        body {
            overflow-x: hidden;
            font-family: cursive;
            font-size: 20px;
            color: white;
           }

        footer {
            font-size: 14px;
            color: white;
            background: brown;
            overflow: hidden;

        }

        h2 {
            color: black;
            font-size: 40px;
            font-family: cursive;
        }

.navbar-default .navbar-nav>li>a {
    color: #fff;
}

        .navbar-fixed-top {
            border-radius: 0;
            background: brown;
        }

           .navbar-default {

            background: rgba(230, 126, 34, 1.0);
            font-family: cursive;
            border-color: transparent;
            color: white;

        }

        .navbar-nav>li>a {
            padding-top: 0px;
            padding-bottom: 0px;
            line-height: 50px;
            font-size: 20px;
            text-transform: uppercase;
            position: relative;
        }

        .navbar-nav>li>a::before {
            content: '';
            width: 0px;
            height: 3px;
            background: chartreuse;
            position: absolute;
            top: 120%;
            right: 40px;
            transition: .5s;
            mix-blend-mode: multiply;
        }

        .navbar-nav>li>a::after {
            content: '';
            width: 0;
            height: 3px;
            background: #f0f;
            position: absolute;
            top: 120%;
            right: 10px;
            transition: .5s;
            mix-blend-mode: multiply;
        }

        .navbar-nav>li:hover a::before {
            width: 50%;
            transform: translateX(100%);
        }

        .navbar-nav>li:hover a::after {
            width: 50%;
            transform: translateX(-100%);
        }

        .navbar-default .navbar-nav>.active>a,
        .navbar-default .navbar-nav>.active>a:focus,
        .navbar-default .navbar-nav>.active>a:hover {
          background-image: -webkit-linear-gradient(top,transparent 0,transparent 100%);
            color: #fff;
            background-color: transparent;
        }


       .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: black;
    cursor: default;
    background-color: rgba(255,255,255,.4);
    border: 1px solid transparent;
    font-size: 48px;
    border-bottom-color: transparent;
    font-family: cursive;
}

        .videoWrapper {
            position: relative;
            padding-bottom: 60%;

        }

        .videoWrapper iframe {
            position: absolute;
            width: 100%;
            height: 100%;
        }


        @media (min-width: 992px) {
            .col-md-offset-1 {
                margin-left: 0%;
            }
        }

        @media (min-width: 992px) {
            .col-md-10 {
                width: 100%;
                margin-top: -105px;
            }
        }

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

        @media (max-width:768px){

    padding-left:15%;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 10px 20px;
    margin-bottom: -1px;
    background-color: rgb(255,255,255,.7);
    border: 1px solid black;
}




	</style>
</p>
<div class="container">
	<div class="col-md-12 col-sm-12 col-xs-12 text-center">
		<h2>
			感謝各大媒體支持</h2>
		<p style="color:black;">
			THANK FOR SUPPORT</p>
	</div>
</div>
<div style=" margin-top: 15px;
    margin-bottom: 18px;
     border: 4px solid transparent;
    border-radius: 4px;
    padding: 15px;
    background: rgba(255,255,255,.6);">
	<ul class="nav nav-tabs">
		<li class="active">
			<a data-toggle="tab" href="#home">平面報導</a></li>
		<li>
			<a data-toggle="tab" href="#menu1">影音報導</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane fade in active" id="home">
			<div class="container">
				<p style="text-align:center">
					<span style="font-size:25px; color: black;">flat coverage</span></p>
				<hr />
				<br />
				<div class="list-group">
					<a class="list-group-item" href="http://www.kaofarmers.tw/content/farmer_profile?id=42"><i class="fas fa-photo-video"></i>型農大聯盟</a> <a class="list-group-item" href="https://www.kaofarmers.tw/content/news_detail?id=9 "><i class="fas fa-photo-video"></i>草生果園裡的珍珠芭樂 2015-12-20</a> <a class="list-group-item" href="#"><i class="fas fa-photo-video"></i>Third item</a> <a class="list-group-item" href="#"><i class="fas fa-photo-video"></i>Third item</a> <a class="list-group-item" href="#"><i class="fas fa-photo-video"></i>Third item</a> <a class="list-group-item" href="#"><i class="fas fa-photo-video"></i>Third item</a> <a class="list-group-item" href="#"><i class="fas fa-photo-video"></i>Third item</a> <a class="list-group-item" href="#"><i class="fas fa-photo-video"></i>Third item</a> <a class="list-group-item" href="#"><i class="fas fa-photo-video"></i>Third item</a> <a class="list-group-item" href="#"><i class="fas fa-photo-video"></i>Third item</a></div>
			</div>
		</div>
		<div class="tab-pane fade" id="menu1">
			<div class="container">
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12 ">
						<p style="text-align: center; ">
							<span style="font-size:25px; color:black;">Audio and video coverage</span></p>
					</div>
					<hr />
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<div class="videoWrapper">
								<iframe allowfullscreen="" frameborder="0" height="349" src="https://www.youtube.com/embed/WPqw0D4aSv4" width="560"></iframe></div>
						</div>
						<div class="col-md-12 col-sm-12 col-xs-12">
							<h3>
								<br />
								<span style="color:black;">芳林芭樂宣傳片</span><br />
								<br />
								&nbsp;</h3>
						</div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<div class="videoWrapper">
								<iframe allowfullscreen="" frameborder="0" height="349" src="" width="560"></iframe></div>
						</div>
						<div class="col-md-12 col-sm-12 col-xs-12">
							<h3>
								<br />
								<span style="color:#000000;">待上傳</span><br />
								<br />
								&nbsp;</h3>
						</div>
					</div>
					<div class="col-md-4 col-sm-12 col-xs-12">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<div class="videoWrapper">
								<iframe allowfullscreen="" frameborder="0" height="349" src="" width="560"></iframe></div>
						</div>
						<div class="col-md-12 col-sm-12 col-xs-12">
							<h3>
								<br />
								<span style="color:#000000;">待上傳</span><br />
								<br />
								&nbsp;</h3>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
