<style type="text/css">
@charset "utf-8";html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
						}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
	display:block;
	}
blockquote, q{
	quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{
	content:'';content:none;
	}
*{-webkit-text-size-adjust:none;}
a{text-decoration:none;}
em{font-style:normal;}
fieldset, img{border:0;}
ol, ul{list-style:none;}
abbr, acronym{border:0;}
.CLEAR{clear:both;height:0;font-size:0px;line-height:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
* html .clearfix{height:1%;}
*:first-child + html .clearfix{min-height:1%;}
/*******************************carousel-fade*******************/
.carousel-fade .carousel-inner .item {
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,  
.carousel-fade .carousel-inner .active.left,  
.carousel-fade .carousel-inner .active.right {
   opacity: 0;
}
.carousel-fade .carousel-inner .active,  
.carousel-fade .carousel-inner .next.left,  
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,  
.carousel-fade .carousel-inner .prev,  
.carousel-fade .carousel-inner .active.left,  
.carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}
/**********************************************************************/
.container-fluid {
			width: -webkit-fill-available;
			padding-right: 15px;
			padding-left: 15px;
			margin-right: auto;
			margin-left: auto;
		}
	#carousel01{display:none;}
	

	body{
			
		
		
		}
		* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	}
	h1, h2, h3, h4, h5, h6 {
		font-weight: 300;
		line-height: 1.5;
		margin: 0 0 1rem 0;
	}
	 p{
		text-transform: uppercase;
		font-size: 1.21rem;
		font-weight: 400;
		margin: 0 0 .25rem 0;
		padding: 0 0 .75rem 0;
		letter-spacing: .25rem;
		color: rgba(0,0,0,0.65);
	}
	.content{
				
				background-color: rgba(255, 255, 255, 0);
				padding:30px;
		}
	/*************************navbar***********************/
		
		body > div:nth-child(1){	margin: 0;}
		
		div.navbar.navbar-default.load {
		right: 0;
		left: 0;
		z-index: 1030;
		position: fixed;
		top: 0;
		z-index:9999;}
		
	.navbar-default {
			
			opacity:0;
			height:auto;
			background-color: rgba(0, 0, 0,0);
			border-color: rgba(0, 0, 0,0);
			transition: all 0.5s ease;
		 
			}
			
	.navbar-default .navbar-nav>li>a {
			color:rgba(255,255,255,1);
			font-size:18px;
			border-bottom:0px solid #FFF ;
			
		}
	.navbar-default .navbar-nav>li>a:hover{
			color:rgba(255,255,255,1);
			background-color:#c00;
			font-size:18px;
			border-bottom:2px solid #000;
			
		}
		.navbar-default2 {
			font-size:16px;
			color:black;
			height:auto;
			background-color: rgba(255, 255, 255,1);
			border-color: rgba(0, 0, 0,0.4);
			box-shadow: 0 2px 5px rgba(126, 126, 126, 0.68);
			opacity:1;
			}
		
		.navbar-default2 .navbar-nav>li>a {
			color:rgba(0,0,0,1);
			
		}
		
/****************************************************/		
		.row {
			display: -ms-flexbox;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			
			margin-right: -12px;
			margin-left: -12px;
		}

		div.col-md-12.load{
			margin:0;
			padding-right: 0;
			padding-left: 0;
				}
		.bgw{background-color:rgba(255,255,255,0);}
			container-fluid{
			margin-top:5px;
		}
		
		
		body > div.container-fluid.bgw.load > footer > div{padding: 1.2em;}
		footer {
			
			color: #000;
			/* background-color: rgba(0, 0, 0,0); */
			}
/************body*****************/
	
		*{font-family: cwTeXFangSong, 'Playfair Display', serif;word-wrap: break-word;
    word-break: break-all;}
		body{
		
			background:#fff;
			position: relative;
			padding: 0;}
		
		div {
				display: block;
			}
		.btn{display: block;}

		.BDBOX {
		  -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
				  box-sizing: border-box;
				}
		
		.clearfix2 {
			  overflow: auto;
			}
		.clearfix:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		
		.p1{
			    position: absolute;
				top: 32%;
				left: 0px;
				z-index:0;
				}
		h2,h3,h4{text-align: center;}
		.smalltitle{ 
			
			color: rgba(255, 255, 255, 0.65);
			position: relative;
			text-transform: uppercase;
			font-size: 1rem;
			font-weight: 300;
			margin: 0;
			padding-bottom: 1.75rem;
			letter-spacing: .25rem;
			text-align: center;
		}
		h2 {
			font-family: 'cwTeXFangSong';
			margin-bottom: 30px;
			padding-top: 0;
			color: #000;
			text-align: center;
		}
		.text{
			line-height:3;
		}
		.mainarea {
			position:relative;
			padding: 0;
			margin-top: -100px;
			background: #FFF;
			}
		.image-full
		{
			display: block;
			width: 100%;
			margin: 0 0 0 0;
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
			-webkit-transition: all 1s ease;
			-moz-transition: all 1s ease;
			-o-transition: all 1s ease;
			transition: all 1s ease;
		}
		.image-rounded
		{
			border-radius: 10%;
		}
		a.img_a {padding:2rem 0 0 0;}
/**************************************************/
		.COL4{
			width: 25%;
			float: left;
			min-height: 30%;
		}
		.COL3{
			width:33.33%;
			float:left;
			padding:0;
			position: relative;
		}
		.COL12{
			width:100%;
			padding:2em;
			
			
		}
		.COL6{
			width:50%;
			float:left;
			padding:2em;
			
		}
		.COL75{
			width:75%;
			float:left;
			padding:2em;
			
		}
		.COL25{
			width:25%;
			float:left;
			padding:0em;
			
		}
		.clearfix:after {
			  content: ".";
			  display: block;
			  height: 0;
			  clear: both;
			  visibility: hidden;
		}
		/*******************標題美化*************/
				.title1area {
						width: 100%;
						height: auto;
						text-align: center;
						padding: 60px 0 0 0;
						overflow: inherit;
						box-sizing: border-box;
						background-color: rgba(0,0,0,0);
					}
				
				.title1area .smalltitle {
				
						color: #e7b623;
						margin-bottom: 5px;
						font-weight: 100;
						letter-spacing: .06em;
						font-size: 22px;
						
					}
				.title1area .bigtitle {
						position: relative;
						font-weight: 100;
						letter-spacing: .06em;
						text-transform: uppercase;
						color:#ffa100;
						font-size: 1.5em;
						margin-bottom: 50px;
					}		
				
		/***********blockarea***************/
		.block{

				width:100%;
				position:relative;
				float:left;
		}
		.bk_outer{
		   
		}
		
		.PD_0{
			padding:0;
		}
		
		.value_block{
			padding:0;
					min-height:50vh;
					background-repeat: no-repeat;
					background-attachment: inherit;
					background-position: center;
					background-size: cover;
		
		
		}
		.click_me_outer{
			position:absolute;
			top:0;
			left:0;
			width: 100%;
			height: 100%;
		}
		.click_me{
			position: absolute;
			top: calc(40%);
			left: 50%;
			transform: translateX(-50%);
			transform: translate();
			width: 5rem;
			height: 5rem;
			margin: auto;
		}
		.click_me_a{
			padding: 1rem;
			display: inline-block;
			color: #f5f5f5;
			background-color: rgba(255, 255, 255, 0);
			border: 0.65px rgba(255, 255, 255, 0.35) solid;
			margin: 0;
			height: 100%;
			width: 100%;
			font-size: 3rem;
			border-radius: 100%;
		
		}
		.click_me a{
			display: inline-block;
			color: rgba(255,255,255,0.25);
			font-size: 3rem;
			
		}
		
		.vb_outer{
			opacity:1;
			min-height:50vh;
			position:relative;
			 background: linear-gradient(-31deg,rgba(0,0,0,0) 55%,#000 90%);
			top:0;
			left:0;
		}
		.vb_outer p{
			
			color:#fff;
		}
		.vb_content{
			border-top: #999 1px solid;
		}
		.vb_content h2{
			opacity:0;
			padding-top: 10vh;
			font-size: 2.1rem;
			color: #fff;
		}

		
		
		.vb_outer:hover{
			-webkit-animation: display_in 0.5s 1;

			    background: linear-gradient(-31deg,rgba(0,0,0,0.65) 55%,#ffffff 90%);
			
		}
		.vb_outer:hover  > .top_p p{
			color:#000;
			-webkit-animation: display_in 0.3s 1;
		}
		
		
		.vb_outer:hover  > .click_me_outer{
			-webkit-animation: display_in 0.1s 1;
			opacity:0;
		}
		.vb_outer:hover  > .vb_content h2{
			-webkit-animation: display_in 0.5s 1;
			opacity:1;
		}
		
		
		
		
		@-webkit-keyframes display_in{
		  0%{
			opacity:0;
		  }
		 
		  100%{
			opacity:1;
		  }
		}
		
		.value_block1{
			background-image: url(/userUpload/images/tmp/03.gif);
			
		}
		
		.value_block2{
			background-image: url(/userUpload/images/tmp/38.jpg);
			
		}
		
		.value_block3{
			background-image: url(/userUpload/images/tmp/02.jpg);
			
		}
		
		.value_block4{
			background-image: url(/userUpload/images/tmp/51.jpg);
			
		}
		
		.value_block5{
			background-image: url(/userUpload/images/tmp/15.jpg);
			
		}
		
		.value_block6{
			background-image: url(/userUpload/images/tmp/37.jpg);
			
		}
	
		.block0	{
				
				height:100vh;
				width:100%;
				position:absolute;
				top:0;
				left:0;
				
				background: linear-gradient(180deg,rgba(0,0,0,0) -14%,rgba(0,0,0,0) 71%);
				}
		.block01	{
				
				height:100vh;
				width:100%;
				position:absolute;
				top:0;
				left:0;
				
				background: linear-gradient(360deg,rgba(0,0,0,0) -14%,rgba(0,0,0,0.1) 71%);
				}
		.block1 {
				clear: both;
				background-color:rgba(255,255,255,1);
				
				z-index:50;
				height:111vh;
		}
		.block1 .box {
				float: left;
				margin-left: 12%;
				width: 410px;
				background: rgba(0,0,0,0.6);
				padding: 150px 30px 60px 30px;
		}
		.block2 {
				clear: both;
				position:relative;
				
				background-position: center;
				background-size: cover;
				z-index:20;
		}
		.block2 .box {
				float: right;
				margin-right: 12%;
				width: 410px;
				background: rgba(0,0,0,0.7);
				padding: 150px 30px 60px 30px;
		}
		
		.block1 .text, .block2 .text {
				margin-top: 30px;
				font-size: 15px;
				font-family: "微軟正黑體", "新細明體", sans-serif;
				color: #FFF;
				line-height: 1.8;
			}
		.block1 .btn a:hover, .block2 .btn a:hover {
				border: 1px solid #a27c48;
				background: #a27c48;
				color: #FFF;
			}
		.block1 .btn a, .block2 .btn a {
				display: inline-block;
				padding: 10px 15px;
				border: 1px solid #FFF;
				font-size: 12px;
				color: #FFF;
				text-transform: uppercase;
			}
		.block3 {
				    position: relative;
					padding: 5em 0 0 0;
					color: white;
					background-image: url(/userUpload/images/tmp/50.jpg);
					background-repeat: no-repeat;
					background-attachment: fixed;
					background-position: center;
					background-size: cover;
		}
		.block3 h2{color:#ffbe00;font-size:2.5em;}
		
		.block3 h2:after{
			content: "";
			display: block;
			margin: 10px 0;
			width: 100%;
			height: 2px;
			border-bottom: 4px double #fff;
		}
		b{
			text-align:center;
			font-weight: 400;
		}
		

		
		/*******************STORYAREA****************************/

		.STORY {	
				position:relative;
				clear: both;
				background: url('/userUpload/images/tmp/00_bk.jpg');
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: bottom;
				background-size: cover;
				padding:  0;
				
			}
		#story h2{
			font-size:2.25em;
			}
		.storya{
			
			display: inline-block;
			float: left;
			box-sizing: border-box;
			padding: 12px;
			border: 1px solid rgba(66,66,37,0.4);
		
		}
		.storya2{
			
			display: inline-block;
			float: left;
			box-sizing: border-box;
			padding: 12px;
			overflow: hidden;
			border: 1px solid #999;
		
		}
		
		
		div.STORY > div.COL12.clearfix2 > div.text.COL6{
		
				border-bottom: 1px dashed #ae1d49;
				padding: 0.5em;
		}
		
		body > div.STORY > div.COL4{
				;
				background-color:#e9ecef;
				padding: 20px 0;}
		
		/*******************banner********************/
		.item{
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			height: 100vh;
		}
		.carousel-caption{
			padding:30% 20% 7% 20%;
			
		}
		.carousel-caption h3{font-size:5em;}
		.carousel-caption p{font-size:1.8em;}
		
		
		.boxtop{
			position: absolute;
			width: 40%;
			height:auto;
			background-color:rgba(255,255,255,0.75);
			display: block;
			padding: 25px 35px;
			border: 0px solid #FFF;
			font-size: 18px;
			color: #000;
			text-transform: capitalize;
			top: 0.75%;
			left: 30%;
			z-index: 100;
			font-family: 'cwTeXYen', serif;
			line-height: 1.2;
			text-align:center;
		}
		.boxtop h4{
			color: rgba(255, 138, 138, 0.68);
			margin-bottom: 5px;
			font-weight: 100;
			letter-spacing: .06em;
			font-size: 22px;
		}
		.boxtop h2{
			position: relative;
			font-weight: 100;
			letter-spacing: .06em;
			text-transform: uppercase;
			color: #000;
			font-size: 2.5em;
			
		}
		.boxtop h2:before {
			content: '';
			position: absolute;
			z-index: -1;
			width: 100%;
			margin: auto;
			display: inline-block;
			height: auto;
			/*background: url(/userUpload/images/tmp/logo_sm.png) no-repeat;*/
		}
		
		
		.boxtop h2:after{
			content: "";
			display: block;
			margin: 10px 0;
			width: 100%;
			height: 2px;
			border-bottom: 4px double rgba(0,0,0,0.09);
			
		
		}
		.boxtop nav{padding-top:0px;}
		.boxtop nav{    display: inline-block;}
		.boxtop ul li:first-child {
			border-right: 1px dashed rgba(165, 165, 165, 0.8);
				}
		.boxtop li{
			
			border-right: 1px dashed rgba(165, 165, 165, 0.8);
			min-width:10%;
			position: relative;
			display: inline-block;
			padding: 10px 7px;
		}
		.imga{
			position: absolute;
			top: 0;
			z-index: 9;
			left: 7%;
			width: 85%;
		}
		
		.boxtop a{
			position: relative;
			
			font-size: 24px;
			color: #333;
			letter-spacing: 2px;
			min-height: 190px;
			text-align: left;
			text-decoration: none;
			-webkit-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			writing-mode: tb-rl;
		}

		.boxtop li:hover  {
			color:#000;
			background: linear-gradient(180deg,rgba(56, 167, 67, 0.5) -14%,rgba(219, 128, 43, 0.68) 91%);
			text-decoration: none;
		
  
 
		}
		
		.boxtop li:hover a {
			color: #fff;
			
			text-decoration: none;
			
		}
		
		@-webkit-keyframes boxtop{
		  0%{
			background-color:rgba(0,0,0,0);
		  }
		 
		  100%{
			background: linear-gradient(180deg,rgba(0,0,0,0) -14%,rgba(160,0,0,0.68) 91%);
		  }
		}
		
		
		
		.navbar-default .navbar-nav>li>a:hover{
			color:rgba(255,255,255,1);
			background: linear-gradient(180deg,rgba(0,0,0,0.2) 10%,#000 93%);
			font-size:18px;
			border-bottom:0px solid #000;
			
		}
		
		
		.navbar-default .navbar-nav>li>a:hover::after{
			content: "";
			display:inline;
			position: absolute;
			top: 0;
			left: 0;
			width: 90%;
			height: 87%;
			margin: 5% 5% 5% 5%;
			border: 1px solid #fff;
			-webkit-animation: nava 0.5s 1;
		}
		
		@-webkit-keyframes nava{
		  0%{
			top:50%;
			left:50%;
			width:0;
			height:0;
		  }
		 
		  100%{
			top:0;
			left:0;
			width:90%;
			height:87%;
		  }
		}

		
		
		
		.boxa{
		  position:absolute; 
		  top:590px;
		  left:50%;
		  z-index:100;
		}
		.scroll:after{
			position: absolute;
			    position: absolute;
				top: 23%;
				LEFT: 51%;
				transform: translateX(-50%) rotate(-45deg);
				content: 'scroll down';
				z-index: 3;
				
				color: #f5f5f5;
	
		}
		
		.scroll{
			position: fixed;
			z-index: 999;
			top: 80%;
			bottom: 50%;
			left: 50%;
			transform: translateX(-50%);
			border: 1px solid #FFF;
			font-size: 12px;
			color: #FFF;
			text-transform: capitalize;
			width: 80px;
			height: 80px;
			background-color:rgba(0,0,0,0.65);
			border-radius: 2px;
			transform: translateX(-50%) rotate(45deg);
			-webkit-animation: boxa 1.8s infinite;
		}

		@-webkit-keyframes boxa{
		  0%{
			top:80%;
		  }
		  20%{
			border-radius:2px;
		  }
		  50%{
			top:85%; 
			border-bottom-right-radius:25px;
		  }
		  80%{
			border-radius:2px;
		  }
		  100%{
			top:80%;
		  }
		}
		
		.area{width: 1200px;
			margin: 0 auto;}
			
		h4.img1:before {
			content: '';
			position: relative;
			z-index: 99;
			width: 80px;
			margin:auto;
			height: 91px;
			display: inline-block;
			background: url(/userUpload/images/tmp/logo_sm.png) no-repeat;
		}
		
			.btn {
				width:100%;
				display: inline-block;
				padding: 6px 12px;
				margin-bottom: 3%;
				font-size: 14px;
				font-weight: 400;
				line-height: 1.42857143;
				text-align: center;
				white-space: nowrap;
				vertical-align: middle;
				-ms-touch-action: manipulation;
				touch-action: manipulation;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				background-image: none;
				border: 1px solid transparent;
				border-radius: 4px;
			}
		a.btn_color2 {
				
				display: inline-block;
				padding : 30px 4%;
				border: 1px solid #000;
				font-size: 15px;
				border: 1px solid rgba(255,255,255,.15);
				background-color:rgba(0,0,0,0);
				color: #fff;
				border-radius: 0px;
				text-decoration:none;
				box-shadow: 0 2px 5px rgba(126, 126, 126, 0.68);
				font-size: 18px;
			}
		a.btn_color2:hover{
				background-color:rgba(0,0,0,0);
				
		}
		a.btn_color2:hover{border: 1px solid #fff;
		border-radius: 0px;
		}
		
		/*****************************************/
		.content_container {
		position: relative;
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,0.8) 115%);
		z-index:100;
		}
		
		.banner_content {
			position: absolute;
			display: inline-block;
			vertical-align: middle;
			z-index: 1;
			margin: auto;
			top: 50%;
			left: 50%;
			transform: translateX(-50%);
		}
		.banner_content p {
			color: rgba(255, 255, 255, 0.65);
			position: relative;
			text-transform: uppercase;
			font-size: 1rem;
			font-weight: 300;
			margin: 0;
			padding-bottom: 1.75rem;
			letter-spacing: .25rem;
			text-align: center;
		}
		
		.banner_content h2 {
			font-size: 2.5rem;
			margin-bottom: 0;
			color: #FFF;
			font-weight: 300;
			text-align: center;
		}
		.banner_content p {
			color: rgba(255, 255, 255, 0.65);
			position: relative;
			text-transform: uppercase;
			font-size: 1rem;
			font-weight: 300;
			margin: 0;
			padding-bottom: 1.75rem;
			letter-spacing: .25rem;
			text-align: center;
		}
		.block3 h2.bigtitle{
			font-size: 2.95em;
		}
		.imageshow2 p{
				font-size: 2.8em;
			}
		#map h4{
					font-size: 2.5em;
		}
		.go_up_outer {
			z-index: 3;
			position: fixed;
			right: 5%;
			bottom: 8%;
			color: #FFF;
			text-align: center;
			text-decoration: none;
			padding: 0;
			opacity: 0;
		}
		.go_up {
			width: 5rem;
			height: 5rem;
			display: block;
		}
		
		.go_up a {
			display: inline-block;
			color: #000;
			background-color: rgba(255, 255, 255, 0.65);
			border: 0.85px #b3b3b3 solid;
			margin: 0;
			padding: 0;
			height: 100%;
			width: 100%;
			font-size: 3rem;
			border-radius: 100%;
		}
		.go_up span {
			display: block;
			margin: auto;
			padding: 1rem;
			height: 100%;
			width: 100%;
		}
		.go_up_outer b {
			color: #ffa100;
		}
		/****************************************/
		.row {
			margin:0 !important;
			
		}
		.col-md-offset-1 {
			margin-left: 0 !important;
		}
		.col-md-10 {
			width: 100% !important;
			padding: 0;
		}
		.container-fluid {
			width: -webkit-fill-available;
			padding : 0 !important;
			margin : 0 !important;
		}

		@media screen and (max-width: 480px){
			
			
			
			#story h2{
				font-size:1.25em;
			}
			
			.block3 h2.bigtitle{
				font-size: 1.25em;
			}
			.imageshow2 p{
				font-size: 1.25em;
			}
			
			.boxtop{
				border: 1px solid rgba(255, 255, 255, 0.3);
			}
			.block1 .box, .block2 .box ,.COL6,.COL3,.COL75,.COL25 ,.mainarea {
				width: 100%;
				margin: 0;
				line-height:2;
							}
			.COL25{ padding:2em;}
			.COL4{ padding:15px;}
			.COL12{ padding:15px;}
			.boxtop h4{font-size: 7px;}
			.boxtop h2{font-size: 1.8em;}
			.boxtop nav{display:none;}
			.carousel-caption h3{display:none;}
			.p1{display:none;}
			.area{width: 100%;}
			
			h4.img1:before {
				display:none;
				
				}
			#story .title1area{
				padding-top: 140px;
				}
			.block3 h4.img1:before{
				top:-200%;
				}
			.banner_content{
				top:20%;
				padding: 15px;
				width: -webkit-fill-available;
			}
			.banner_content h2{
				font-size:2em;
				
			}
			
			
				
			#map h4{
					font-size: 1.25em;
			}
				
				
			}
		@media screen and (min-width: 481px) and (max-width: 639px){
		.area,.COL75,.COL25{width: 100%;}
		
			.COL3{
				width: 50%;
				margin: 0;
				line-height:2;
							}
			.banner_content{
				top:23%;
			}
			.banner_content h2{
				font-size:2em;
				
			}
			
			.vb_outer{
				padding:0.75rem;
			}
		}
		@media screen and (max-width: 640px){.boxtop nav{display:none;}
		
		}
		@media screen and (min-width: 640px) and (max-width: 767px) {
		.COL6{	width: 100%;
				margin: 0;
				line-height:2;}
		.area,.COL75,.COL25{width: 100%;}
			.COL12{ padding:20px;}
			.area{width: 100%;}
			.STORY div.COL4 {
				float: none;
				padding: 10px;
				width: 100%;
			}
			.navbar-default {opacity:1;}
			}
			.vb_outer{
				padding:0.75rem;
			}
		@media (min-width: 768px) and (max-width: 1200px) {
		
			.area{width: 100%;}
			.boxtop{
				width:54%;
				left:23%;
			}
			.boxtop a {font-size: 30px;}
			.vb_outer{
					padding:0.75rem;
				}
			.vb_content h2 {
				padding-top: 6vh;
				font-size: 1.5rem;
				
			}
		}
		@media screen and (min-width: 1400px) {
			
			.boxtop a {font-size: 30px;}
			.vb_outer{
					padding:1.5rem;
				}
		}
		
		
			
		body > div.STORY > div.COL4{
				
				background-color:#e9ecef;
				}
		body > div > div.STORY > div{ padding:20px; }
			}
		/***************************活動資訊圖文介紹hover效果***************************/							
		
		
		/***************************活動資訊圖文介紹hover效果***************************/			
		
		
		
		.animation2 {
				position: relative;
				height:100%;	
				background-repeat: no-repeat;
				background-size:cover;
				display: inline;
					}
		
		
		.animation2 a{color:white;}
		.imageshow2{
				color:#fff;
				width: 0px;
				height: 0px;
				background: rgba(0,0,0,0);
				position: absolute;
				border: 0px solid #fff;			
				top:50%;
				left:50%;
				padding: 0.5em 0.8em ;			
				text-align: center;
				font-size: 1em;
				transition: 0.5s ease;
				overflow: hidden;
				opacity:0;
						}
						
		.animation2:hover .imageshow2 {
				width: calc((100% - 10%) ); 
				height: calc(100% - 10%);
				top:5%;
				left:5%;
				border: 1px solid #fff;	
				opacity:1;
						}
		.imageshow2  .btn{
			
			right: 0;
			top: 50%;
				
				

		}
		
		.img_a:hover img{
			cursor: pointer;
			-moz-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-o-transform: scale(1.1);
			transform: scale(1.1);
		}
		
		.animation2:hover div.storya2 {
			border: 0px solid rgba(66,66,37,0.4);

						}				
	
		

		
		
		.iframe-rwd {
							position: relative;
							padding-bottom: 40%;
							padding-top: 0;
							height: 0;
							overflow: hidden;
						}
	.iframe-rwd iframe {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
						}
		 h4	{
						font-size:1.8em;
						font-weight: 800;
		 }
		 
		  
		
		@keyframes setup{
		  0% {
			opacity: 0;
		  }
		  75% {
			opacity: 1;
			transform: none;
		  }
		  100% {
			opacity: 1;
			transform: rotateZ(5deg);
		  }
		}
		@keyframes dance{
		  0% {
			transform: rotateZ(5deg);
		  }
		  50% {
			transform: rotateZ(-5deg);
		  }
		  100% {
			transform: rotateZ(5deg);
		  }
		}
		
		b.img_info{
			text-align:center;
		}
	
		
	
		@font-face {
		  font-family: 'cwTeXYen';
		  font-style: normal;
		  font-weight: 500;
		  src: url(css/fonts/cwTeXYen-zhonly.eot);
		  src: url(css/fonts/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),
			   url(css/fonts/cwTeXYen-zhonly.woff2) format('woff2'),
			   url(css/fonts/cwTeXYen-zhonly.woff) format('woff'),
			   url(css/fonts/cwTeXYen-zhonly.ttf) format('truetype');
		}
		@font-face {
		  font-family: 'Noto Sans TC';
		  font-style: normal;
		  font-weight: 100;
		  src: url(css/fonts/NotoSansTC-Thin.woff2) format('woff2'),
			   url(css/fonts/NotoSansTC-Thin.woff) format('woff'),
			   url(css/fonts/NotoSansTC-Thin.otf) format('opentype');
		}

		@font-face {
		  font-family: 'KouzanBrushFont';
		  font-style: normal;
		  font-weight: 100;
		  src: url(css/fonts/KouzanBrushFont.ttf) format('truetype');
		}
		
		.banner_img_b{
			position:absolute;
			bottom:10%;
			left:75%;
			
		}
		
		.banner_img_b p {color: silver; }

		
</style>
	<link href="https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css" rel="stylesheet" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" />
	<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>

<div class="mainarea">

	<div class="go_up_outer" style="opacity: 1; transition: opacity 0.89s ease-in 0s; display: inline;">
			<div class="go_up"><a href="#"><span class="glyphicon glyphicon-menu-up"></span></a></div>
			<b>go top</b>
	</div>
	
	<div class="scroll">
		</div>
	
	
	<div id="bk1" class="block1 clearfix">
		<!--blockarea-->
		<div class="boxa">
			&nbsp;</div>
		<!--boxtop-->
					<div class="boxtop">
						
						
						
						<div class="title1area0 title1area clearfix"style="padding:0;">
							<h4 class="img1 smalltitle revealOnScroll" data-animation="pulse" style="color:#888;padding-bottom:0;">		
								</h4>
							<h2 class=" revealOnScroll" data-animation="zoomIn" style="letter-spacing: .08em;font-weight: normal; color:#000;">
								LOHAS+ <br>樂活家</h2>
							<nav class="clearfix">
								<ul class="topA  clearfix">
									<li class="revealOnScroll" data-animation="pulse">
										<a href="#story">價值主張</a></li>
									<li class="revealOnScroll" data-animation="pulse">
										<a href="?Act=1038&MK=1038&PK=1041">共創樂活</a></li>
		
									<li class="revealOnScroll" data-animation="pulse">
										<a href="#bk3">樂活產業地圖</a></li>
										
									<li class="revealOnScroll" data-animation="pulse">
										<a href="#bk4">LOHAS+商城</a></li>
									<li class="revealOnScroll" data-animation="pulse">
										<a href="#bk5">樂活家</a></li>
								
									
								</ul>
							</nav>
						</div>
						
					</div>
					<!--boxtop-->	
		<!-- carousel -->
		<div class="carousel slide carousel-fade " data-ride="carousel" id="myCarousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li class="active" data-slide-to="0" data-target="#myCarousel">
					&nbsp;</li>
				<li data-slide-to="1" data-target="#myCarousel">
					&nbsp;</li>
				
			</ol>
			
			<div class="carousel-inner ">
				<div class="item active" style="background-image:url(/userUpload/images/tmp/09.jpg);    background-attachment: fixed;height:111vh;">
				
					
					<div class="banner_img_b dark">
						<p>九鳥陶燒</p>
					</div>
				</div>
				
				<div class="item" style="height:111vh;background-image:url(/userUpload/images/tmp/15.jpg);background-attachment: fixed;">
					<div class="banner_img_b white">
						<p>庭翊民宿一隅</p>
					</div>
				</div>
				
				
				
			</div>
			<!-- Wrapper for slides -->
			<!-- Left and right controls --><!-- <a class="left carousel-control" href="#myCarousel" data-slide="prev"> --><!-- <span class="glyphicon glyphicon-chevron-left"></span> --><!-- <span class="sr-only">Previous</span> --><!-- </a> --><!-- <a class="right carousel-control" href="#myCarousel" data-slide="next"> --><!-- <span class="glyphicon glyphicon-chevron-right"></span> --><!-- <span class="sr-only">Next</span> --><!-- </a> -->
		</div><!-- carousel -->
		<!--box end-->
		
	</div>
	<!--blockarea end-->
	<div class="block1 clearfix" >
		<div class="carousel slide carousel-fade " data-ride="carousel" id="myCarousel2">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li class="active" data-slide-to="0" data-target="#myCarousel2">
					&nbsp;</li>
				<li data-slide-to="1" data-target="#myCarousel2">
					&nbsp;</li>
			
			</ol>
			
			<div class="carousel-inner ">
				<div class="item active" style="background-image:url(/userUpload/images/tmp/03.gif);    background-attachment: fixed;height:100vh;">
				
					<!--content_container-->
					<div class='content_container cleafix'>
						<div class='g-m-3'> 
							<!--<img style='position:absolute;top:5%;left: 5%; width:20%;' src='/userUpload/images/tmp/logo.png'>-->
						</div>
					<div class='banner_content'>
												
						<p class='animated fadeIn' style='animation-duration: 2s;'>
							綠色知識經濟產業創新
						</p>
						<h2 class='animated fadeIn' style='animation-duration: 3s;'>「何謂樂活產業 LOHAS Industry？」</h2>
						</div>
											
					</div>
					<!--content_container-->
					 <div class="block0 clearfix"></div> 
				
					
				</div>
				
				<div class="item" style="height:100vh;background-image:url(/userUpload/images/tmp/28.jpg);background-attachment: fixed;">
					<!--content_container-->
					<div class='content_container cleafix'>
						<div class='g-m-3'> 
							<!--<img style='position:absolute;top:5%;left: 5%; width:20%;' src='/userUpload/images/tmp/logo.png'>-->
						</div>
					<div class='banner_content'>
												
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						「何謂樂活產業 LOHAS Industry？」
							
						</p>
						<h2 class='animated fadeIn' style='animation-duration: 3s;'>適可而止、合作分享、持續創新的務實態度。</h2>
						<hr>
						<h2 class='animated fadeIn' style='animation-duration: 3s;'>支持健康永續生活型態的產業。</h2>
						</div>
											
					</div>
					<!--content_container-->
					<div class="block0 clearfix"></div>  
				</div>
				
				<div class="item" style="height:100vh;background-image:url(/userUpload/images/tmp/01.jpg);background-attachment: fixed;">
					<!--content_container-->
					<div class='content_container cleafix'>
						<div class='g-m-3'> 
							<!--<img style='position:absolute;top:5%;left: 5%; width:20%;' src='/userUpload/images/tmp/logo.png'>-->
						</div>
					<div class='banner_content'>
												
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						「何謂樂活產業 LOHAS Industry？」
							
						</p>
						<h2 class='animated fadeIn' style='animation-duration: 3s;'>滿足消費者在做消費決策時，對自己與家人健康和環境責任的考量。</h2>
						
						</div>
											
					</div>
					<!--content_container-->
					<div class="block0 clearfix"></div>  
				</div>
				
				<div class="item" style="height:100vh;background-image:url(/userUpload/images/tmp/36.jpg);background-attachment: fixed;">
					<!--content_container-->
					<div class='content_container cleafix'>
						<div class='g-m-3'> 
							<!--<img style='position:absolute;top:5%;left: 5%; width:20%;' src='/userUpload/images/tmp/logo.png'>-->
						</div>
					<div class='banner_content'>
												
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						「何謂樂活產業 LOHAS Industry？」
							
						</p>
						
						<h2 class='animated fadeIn' style='animation-duration: 3s;'>善用綠色設計、綠色供應鏈、清潔生產、綠色消費及綠色回收來達成循環經濟。</h2>
						</div>
											
					</div>
					<!--content_container-->
					<div class="block0 clearfix"></div>  
				</div>
				
			</div>
				
				
			<!-- Wrapper for slides -->
			<!-- Left and right controls --><a class="left carousel-control" href="#myCarousel2" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a><a class="right carousel-control" href="#myCarousel2" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
		</div><!-- carousel -->
	</div>
	
	
	
	
	<!--STORY-->
	<div  id="story"class="STORY">
		<div class="p1 load"style="    right: 5%;top: 73%;-webkit-animation: setup 2.5s ease-out, dance 1.5s 2.2s cubic-bezier(0, .8, .5, 1.5) 1;">
						<img style="width: 220px;"class="p1 revealOnScroll animated zoomIn" data-animation="zoomIn" src="/userUpload/images/tmp/16.png"></div>
		
		
		<div class="COL12 clearfix area">
			<div class="title1area">
				<h4 class="img1 smalltitle revealOnScroll" data-animation="zoomInUp">
					Six Major Claims Of Social Enterprise Value</h4>
				<h2 class="bigtitle revealOnScroll " data-animation="zoomIn" style="letter-spacing: 1.25rem;font-weight: normal;color:#555;">
					LOHAS+社會企業價值六大主張</h2>
				<p>【樂活產業】</p>
			</div>
			<hr class="style1 revealOnScroll" data-animation="pulse" />
		
		</div>
		
		
	</div>
	<!-- value_declare -->
	<div  id="value_declare" class="block">
		
		<div class="COL12  clearfix PD_0 bk_outer">
		
			<div class="COL3 clearfix PD_0 value_block  value_block1">
				
				<div class="COL12 clearfix vb_outer revealOnScroll" data-animation="zoomIn" >
				<div class="click_me_outer cleafix">
					<div class="click_me cleafix">
						<div class="click_me_a cleafix"><a href="###"><span class="glyphicon glyphicon-resize-full"></span></a></div>
					</div>
				</div>
				
					<div class="top_p cleafix">
						<p>LOHAS+ 主張 NO.1</p>                      
					</div>
					<div class="vb_content cleafix " >
						<h2>提供消費者智慧合購、節省運費、及LOHAS社群支持</h2>
								                                      
					</div>
					
				</div>
			</div><!-- value_declare -->
			
			<div class="COL3 clearfix PD_0 value_block  value_block2 revealOnScroll" data-animation="zoomInUp">
				
				<div class="COL12  clearfix vb_outer revealOnScroll" data-animation="zoomIn">
				<div class="click_me_outer cleafix">
					<div class="click_me cleafix">
						<div class="click_me_a cleafix"><a href="###"><span class="glyphicon glyphicon-resize-full"></span></a></div>
					</div>
				</div>
				
					<div class="top_p cleafix">
						<p>LOHAS+主張 NO.2</p>
								                                      
					</div>
					<div class="vb_content cleafix">
						<h2>滿足消費者對健康和環境責任的消費考量</h2>
								                                      
					</div>
				</div>
			</div><!-- value_declare -->
			
			<div class="COL3 clearfix PD_0 value_block  value_block3 revealOnScroll" data-animation="zoomInUp">
				
				<div class="COL12 clearfix vb_outer revealOnScroll" data-animation="zoomIn">
				<div class="click_me_outer cleafix">
					<div class="click_me cleafix">
						<div class="click_me_a cleafix"><a href="###"><span class="glyphicon glyphicon-resize-full"></span></a></div>
					</div>
				</div>
				
					<div class="top_p cleafix">
						<p>LOHAS+主張 NO.3</p>
					</div>
					<div class="vb_content cleafix">
				
						<h2>協助消費者實現健康永續的智慧居家生活</h2>
								                                      
					</div>
					
				</div>
			</div><!-- value_declare -->
			
		</div>
		
		<div class="COL12  clearfix PD_0 bk_outer">
		
			<div class="COL3 clearfix PD_0 value_block  value_block4 revealOnScroll" data-animation="zoomInUp">
				
				<div class="COL12 clearfix vb_outer revealOnScroll" data-animation="zoomIn">
				<div class="click_me_outer cleafix">
					<div class="click_me cleafix">
						<div class="click_me_a cleafix"><a href="###"><span class="glyphicon glyphicon-resize-full"></span></a></div>
					</div>
				</div>
				
				<div class="top_p cleafix">
					<p>LOHAS+主張 NO.4</p>                                
				</div>
				<div class="vb_content cleafix">
				
						<h2>提供微型產業客製化虛擬商店、特色虛擬商城</h2>
								                                      
				</div>
	
								
				</div>
			</div><!-- value_declare -->
			
			<div class="COL3 clearfix PD_0 value_block  value_block5 revealOnScroll" data-animation="zoomInUp">
				
				<div class="COL12  clearfix vb_outer revealOnScroll" data-animation="zoomIn">
				<div class="click_me_outer cleafix">
					<div class="click_me cleafix">
						<div class="click_me_a cleafix"><a href="###"><span class="glyphicon glyphicon-resize-full"></span></a></div>
					</div>
				</div>
				
					<div class="top_p cleafix">
						<p>LOHAS+主張 NO.5</p>
					</div>
					
					<div class="vb_content cleafix">
				
						<h2>協助微型產業建立商業智慧與精準行銷機制</h2>
								                                      
					</div>
				</div>
			</div><!-- value_declare -->
			
			<div class="COL3 clearfix PD_0 value_block  value_block6 revealOnScroll" data-animation="zoomInUp">
				
				<div class="COL12 clearfix vb_outer revealOnScroll" data-animation="zoomIn">
				<div class="click_me_outer cleafix">
					<div class="click_me cleafix">
						<div class="click_me_a cleafix"><a href="###"><span class="glyphicon glyphicon-resize-full"></span></a></div>
					</div>
				</div>
				
					<div class="top_p cleafix">
						<p>LOHAS+主張 NO.6</p>        
					</div>
					
					<div class="vb_content cleafix">
				
						<h2>協助微型產業專注永續價值鏈創新<br>、朝向綠色知識經濟發展</h2>
								                                      
					</div>
					

				</div>
			</div><!-- value_declare -->
			
		</div>
		
		
	</div><!-- value_declare -->
	<div  class="STORY">
	
		<div class="COL12  clearfix ">
			<p>部分內容節錄國立臺東大學執行教育部107年高教深耕計畫</p>
			<p></p>
		</div>
	</div>
	
	
	
	
	
	<div id="bk2"  class="block1 clearfix"  style="height:100vh;">
		<div class="carousel slide carousel-fade " data-ride="carousel" id="myCarousel3">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li class="active" data-slide-to="0" data-target="#myCarousel3">
					&nbsp;</li>
				
			
			</ol>
			
			<div class="carousel-inner ">
				<div class="item active" style="background-image:url(/userUpload/images/tmp/38.jpg);    background-attachment: fixed;height:100vh;">
				
					<!--content_container-->
					<div class='content_container cleafix'>
						<div class='g-m-3'> 
							<img style='position:absolute;top:5%;left: 5%; width:3%;' src='/userUpload/images/tmp/logo.png'>
						</div>
					<div class='banner_content'>
												
						<p class='animated fadeIn dp_n_s' style='animation-duration: 2s;'>應用綠色知識(Green Knowledge)、人
							性因素(Human Factors)、和智慧型資
							訊系統(Intelligent Information
							Systems)的整合創新來發展樂活產業和
							循環經濟，以增進人類健康和永續的生
							活型態。</p>
						<h2 class='animated fadeIn' style='animation-duration: 3s;'>「何謂綠色知識經濟創新？」</h2>
						</div>
											
					</div>
					<!--content_container-->
					 <div class="block0 clearfix"></div> 
				
					
				</div>
				
				
				
				
			</div>
				
				
			<!-- Wrapper for slides -->
			<!-- Left and right controls --><!-- <a class="left carousel-control" href="#myCarousel" data-slide="prev"> --><!-- <span class="glyphicon glyphicon-chevron-left"></span> --><!-- <span class="sr-only">Previous</span> --><!-- </a> --><!-- <a class="right carousel-control" href="#myCarousel" data-slide="next"> --><!-- <span class="glyphicon glyphicon-chevron-right"></span> --><!-- <span class="sr-only">Next</span> --><!-- </a> -->
		</div><!-- carousel -->
	</div>
	
	
	<!--STORY-->
	<div  id="bk3 "class="STORY">
		<div class="p1 load"style="    ">
						<img style="width: 220px;"class="p1 revealOnScroll animated zoomIn" data-animation="zoomIn" src="/userUpload/images/tmp/16.png"></div>
		
		
		<div class="COL12 clearfix area">
			<div class="title1area">
				<h4 class="img1 smalltitle " data-animation="zoomInUp">
					Lohas Industry Series</h4>
				<h2 class="bigtitle  "  style="letter-spacing: 1.25rem;font-weight: normal;color:#555;">
					樂活產業種類</h2>
				<p></p>
			</div>
			<hr class="style1 " data-animation="pulse" />
		
		</div>
		
		<div class="COL12 clearfix area">
		
		
			<div class="COL4 clearfix PD_0 cate_block  ">

				<div class="g-m-12  cleafix">
					<p>文化創意產業</p>        
				</div>
					
				<div class="storya2 cate_img_a_outer cleafix">
				
					<a class="g-m-12 img_a" href="#cate_1">
					<img   class="image-full " src="/userUpload/images/tmp/54.jpg" /></a>
				</div>
	
			</div>
			
			
			<div class="COL4 clearfix PD_0 cate_block  ">

				<div class="g-m-12  cleafix">
					<p>有機農業</p>        
				</div>
					
				<div class="storya2 cate_img_a_outer cleafix">
				
					<a class="g-m-12 img_a" href="#cate_2">
					<img   class="image-full " src="/userUpload/images/tmp/52.jpg" /></a>
				</div>
	
			</div>
			
			<div class="COL4 clearfix PD_0 cate_block  ">

				<div class="g-m-12  cleafix">
					<p>特色旅遊</p>        
				</div>
					
				<div class="storya2 cate_img_a_outer cleafix">
				
					<a class="g-m-12 img_a" href="#cate_1">
					<img   class="image-full " src="/userUpload/images/tmp/53.jpg" /></a>
				</div>
	
			</div>
			
			<div class="COL4 clearfix PD_0 cate_block  ">

				<div class="g-m-12  cleafix">
					<p>智慧生活</p>        
				</div>
					
				<div class="storya2 cate_img_a_outer cleafix">
				
					<a class="g-m-12 img_a" href="#cate_1">
					<img   class="image-full " src="/userUpload/images/tmp/55.jpg" /></a>
				</div>
	
			</div>
			
			
		</div>
		
		
		<div class="COL12 clearfix area">
		
			
		</div>
		
	</div>
	
	
	<!--STORY-->
	<div  class="block3 clearfix">
		<div class="COL12 clearfix area" style="background: linear-gradient(180deg,rgba(23,23,20,0.87) 20%,rgba(0,0,0,0.8) 115%);">
		
			<div class="title1area">
				<h4 class="img1 smalltitle revealOnScroll" data-animation="zoomInUp">
					Lohas industries</h4>
				<h2 class="bigtitle revealOnScroll " data-animation="zoomIn" style="    letter-spacing: 1.25rem;
																						font-weight: normal;
																						
																						color: #ffde60;">
					平台上的樂活產業們</h2>
				<p style="color:#fff;">
				建立樂活產業創新教學及產學合作實績典範，包括九鳥陶燒、墨仙堂、艾蘭哥爾咖啡、佳芳茶園、潔拭拖、庭翊民宿、灶咖、銘泉生態農場、芳林芭樂、及荖濃家營農場等數十家
				</p>
			</div>
		
			<div id ="cate_1" class="COL12 float_l clearfix "style="margin-top:0%;">	
			<div class="text COL6 " >
				<p  style="color:#ff8300;font-size:1.8em;" class="revealOnScroll" data-animation="pulse">
					九鳥陶燒-文化創意產業 
				</p>
				<p  style="color:#ff7500;font-size:1em;" class="revealOnScroll" data-animation="pulse">
					Cultural and creative industries
				</p>
				<p  style="color:#fff" class="revealOnScroll" data-animation="pulse">
					九鳥陶燒工作室融合了「排灣族」和日本「志野燒」陶藝文化，不同的燒窯方式和創作特色，進行文化的交織，創作出具獨特性陶藝品。
					</p>
				
			</div>	
				
				
			<div  class="COL6 revealOnScroll animation2" data-animation="pulse">
				
			<div class="storya2" style="z-index:2;">
				<a class="g-m-12 img_a" href="?Act=45"><img  class="image-full" src="/userUpload/images/tmp/08.jpg" />
				</a>
			</div>
			
									
			</div>
			</div>
			<!--text-box-->
			
			
				
			<div class="COL12 float_l clearfix "style="margin-top:6%;">	
			<div   class="COL6 revealOnScroll animation2" data-animation="pulse">
				
			<div class="storya2" style="z-index:2;">
				<a class="g-m-12 img_a" href="?Act=104">
				<img   class="image-full " src="/userUpload/images/tmp/19.jpg" /></a></div>
									
			</div>
			
			<div class="text COL6 "style="" >
				<p  style="color:#ff8300;font-size:1.8em;" class="revealOnScroll" data-animation="pulse">
					墨仙堂-文化創意產業
				</p>
				<p  style="color:#ff7500;font-size:1em;" class="revealOnScroll" data-animation="pulse">
					Cultural and creative industries
				</p>
				<p  style="color:#fff" class="revealOnScroll" data-animation="pulse">
					一切都從春江三月試新茶開始，一個清爽的午後，一個瓷器與書畫的邂逅，一直延續千年詞意與書畫的慧命…讓文人雅士能賞畫、讀詩亦能品茶。
				</p>
			</div>	
			</div>
			
			
			<!--text-box-->
			
			
			<div id ="cate_2" class="COL12 float_l clearfix "style="margin-top:6%;">	
			
			<div class="text COL6 "style="" >
				<p  style="color:#ff8300;font-size:1.8em;" class="revealOnScroll" data-animation="pulse">
					銘泉生態休閒農業-有機農業
				</p>
				<p  style="color:#ff7500;font-size:1em;" class="revealOnScroll" data-animation="pulse">
					organic agriculture
				</p>
				<p  style="color:#fff" class="revealOnScroll" data-animation="pulse">
					追著風、賞著景，奔馳在沿山公路上，霎那，視野豁然開朗，無邊無際的鳳梨田眼前一展而開，就是進入銘泉的天然路標， 廣達20餘公頃的田園，交織台灣版的拾穗，此時，就得放慢速度，進入慢食、慢活、慢遊的銘泉生態農場。
				</p>
				
			</div>	
			
			<div   class="COL6 revealOnScroll animation2" data-animation="pulse">
			<div class="storya2" style="z-index:2;">
				<a class="g-m-12 img_a" href="?Act=125">
				<img   class="image-full" src="/userUpload/images/tmp/39.jpg" /></a></div>
									
			</div>
			</div><!--text-box-->
		
			<div class="COL12 float_l clearfix "style="margin-top:6%;">	
			<div   class="COL6 revealOnScroll animation2" data-animation="pulse">
				
			<div class="storya2" style="z-index:2;">
				<a class="g-m-12 img_a" href="?Act=122">
				<img  class="image-full "  src="/userUpload/images/tmp/40.jpg" /></a></div>
			</div>
			
			<div class="text COL6 "style="" >
				<p  style="color:#ff8300;font-size:1.8em;" class="revealOnScroll" data-animation="pulse">
					艾蘭哥爾咖啡-有機農業
				</p>
				<p  style="color:#ff7500;font-size:1em;" class="revealOnScroll" data-animation="pulse">
					organic agriculture
				</p>
				<p  style="color:#fff" class="revealOnScroll" data-animation="pulse">
					台灣，一個美麗的島嶼，有著「福爾摩莎」的美名，早在16世紀時葡萄牙人就給了台東一個美麗的稱號-ALANGER。我們是一群ALANGER﹝艾蘭哥爾﹞的子女，想要做自己，期望愛喝咖啡的你也能享受這風味特殊且健康無負擔的咖啡。
				</p>
			</div>	
			</div><!--text-box-->
			
			
			
			<div class="COL12 float_l clearfix "style="margin-top:6%;">	
			
			<div class="text COL6 "style="" >
				<p  style="color:#ff8300;font-size:1.8em;" class="revealOnScroll" data-animation="pulse">
					台灣佳芳有機茶園-有機農業
				</p>
				<p  style="color:#ff7500;font-size:1em;" class="revealOnScroll" data-animation="pulse">
				organic agriculture
				</p>
				<p  style="color:#fff" class="revealOnScroll" data-animation="pulse">
					栽種有機茶，突破困境，

				建國百年女神農 佳芳茶園 『陳麗雪』 陳麗雪帶著堅毅的表情說「不改變，就是被淘汰」。身為媳婦，卻毅然將家族茶園轉型有機栽種，面臨親友的質欵與經濟壓力， 不是一般人所能承受，...
				</p>
				
			</div>	
			
			<div   class="COL6 revealOnScroll animation2" data-animation="pulse">
			<div class="storya2" style="z-index:2;">
				<a class="g-m-12 img_a" href="?Act=120">
				<img  class="image-full"  src="/userUpload/images/tmp/41.gif" /></a></div>
			</div>
			</div><!--text-box-->
			
			
			<div class="COL12 float_l clearfix "style="margin-top:6%;">	
			<div   class="COL6 revealOnScroll animation2" data-animation="pulse">
				
			<div class="storya2" style="z-index:2;">
				<a class="g-m-12 img_a" href="?Act=1014">
				<img   class="image-full "  src="/userUpload/images/tmp/42.jpg" /></a></div>
			
			</div>
			
			<div class="text COL6 "style="" >
				<p  style="color:#ff8300;font-size:1.8em;" class="revealOnScroll" data-animation="pulse">
					荖濃家營農場-有機農業
				</p>
				<p  style="color:#ff7500;font-size:1em;" class="revealOnScroll" data-animation="pulse">
					organic agriculture
				</p>
				<p  style="color:#fff" class="revealOnScroll" data-animation="pulse">
					荖濃家營農場，位於高雄市六龜區田營的蓮霧故鄉，是個佔地一公頃的農地，好幾年來一直堅持有機耕種，每年定期作無農藥殘留檢驗，產品不僅有占地兩分的玉女、澄蜜番茄，還有芭樂，以及銷至國外的金煌芒果。於2016年打造成一片能與民眾互動的快樂農場， ，海拔高度約355公尺，是一個適合親子露營的場地
				</p>
			</div>	
			</div><!--text-box-->
			
			
			
			
			
			<div class="COL12 float_l clearfix "style="margin-top:6%;">	
			
			<div class="text COL6 "style="" >
				<p  style="color:#ff8300;font-size:1.8em;" class="revealOnScroll" data-animation="pulse">
					芳林芭樂莊園-有機農業
				</p>
				<p  style="color:#ff7500;font-size:1em;" class="revealOnScroll" data-animation="pulse">
				organic agriculture
				</p>
				<p  style="color:#fff" class="revealOnScroll" data-animation="pulse">
					芳林芭樂莊園所生產的芭樂，鄭宗林以對土地較友善的種植方式，嚴謹的管理及記錄生產過程，並讓它以最自然的方式自然生長，讓它擁有該有的原始風味，就像眾給自己家人吃一樣，希望您也可以透過芳林，安心與健康的食用，這就是芳林給您最好的祝福。
				</p>
				
			</div>	
			
			<div   class="COL6 revealOnScroll animation2" data-animation="pulse">
			<div class="storya2" style="z-index:2;">
				<a class="g-m-12 img_a" href="?Act=925">
				<img  class="image-full "  src="/userUpload/images/tmp/43.jpg" />
				</a></div>
									
			</div>
			</div><!--text-box-->
			
			
			<div class="COL12 float_l clearfix "style="margin-top:6%;">	
			<div   class="COL6 revealOnScroll animation2" data-animation="pulse">
				
			<div class="storya2" style="z-index:2;">
				<a class="g-m-12 img_a" href="?Act=1139">
				<img   class="image-full "  src="/userUpload/images/tmp/44.jpg" />
				</a></div>
									
			</div>
			
			<div class="text COL6 "style="" >
				<p  style="color:#ff8300;font-size:1.8em;" class="revealOnScroll" data-animation="pulse">
					東軒坊-有機農業
				</p>
				<p  style="color:#ff7500;font-size:1em;" class="revealOnScroll" data-animation="pulse">
					organic agriculture
				</p>
				<p  style="color:#fff" class="revealOnScroll" data-animation="pulse">
					來自清淨無汙染的台東,生長在優質米的故鄉關山東軒坊位於關山鎮德高里一個聞名全國的良質米產地,小球自行返鄉清農，曾做過行銷，原生植物園助理等.....。
				</p>
			</div>	
			</div><!--text-box-->
			
			
			<div class="COL12 float_l clearfix "style="margin-top:6%;">	
			
			<div class="text COL6 " >
				<p  style="color:#ff8300;font-size:1.8em;" class="revealOnScroll" data-animation="pulse">
					‵Avuwan灶咖計畫-有機農業
				</p>
				<p  style="color:#ff7500;font-size:1em;" class="revealOnScroll" data-animation="pulse">
				organic agriculture
				</p>
				<p  style="color:#fff" class="revealOnScroll" data-animation="pulse">
					芳林芭樂莊園所生產的芭樂，鄭宗林以對土地較友善的種植方式，嚴謹的管理及記錄生產過程，並讓它以最自然的方式自然生長，讓它擁有該有的原始風味，就像眾給自己家人吃一樣，希望您也可以透過芳林，安心與健康的食用，這就是芳林給您最好的祝福。
				</p>
				
			</div>	
			
			<div   class="COL6 revealOnScroll animation2" data-animation="pulse">
			<div class="storya2" style="z-index:2;">
				<a class="g-m-12 img_a" href="?Act=254">
					<img  class="image-full "  src="/userUpload/images/tmp/45.jpg" /></a></div>
			
			</div>
			</div><!--text-box-->
		
		
		</div><!--div-box-->
		
	</div>
		
	
	
		
<div class="GOODNEWS "><!--STORY-->
		
		
		<div id="map" class=" clearfix" style="background-color:#fff;">

			
				<div class="COL12 title1area clearfix" style="background-color:white;" >
				
                <h4 class="smalltitle revealOnScroll" data-animation="pulse"style="color:black;"> Exhibition information and traffic location</h4>
                <h4 class="bigtitle revealOnScroll" data-animation="pulse">展覽資訊與交通位置</h4>
				
				
				</div>
				
		</div>
	
</div>			


<script type="text/javascript">

</script><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script><script type="text/javascript">

$(document).ready(function(){
$("div h2.text-center").hide();

$("div hr").hide();


$("div hr.style1").show();
$("div hr.style3").show();

$('div.collapse.navbar-collapse.load > ul:nth-child(2) > li:nth-child(3) > a').attr('target','_self');


});


$(function(){
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop > 70){
            $(' body > div.navbar.navbar-default.load').addClass('navbar-default2');
			$('a.navbar-brand').addClass('nav000');
			$('a.navbar-brand').removeClass('navbar-brand');
			$(".boxa").css({"opacity": "0", "-webkit-transition": "opacity 1s ease-in"});
			
			$(".imga").css({"opacity": "0", "-webkit-transition": "opacity 0.89s ease-in"});
			$(".scroll").css({"opacity": "0", "-webkit-transition": "opacity 0.89s ease-in"});
			$(".go_up_outer").css({"opacity": "1", "-webkit-transition": "opacity 0.89s ease-in"});
			
			
        }else{
            $(' body > div.navbar.navbar-default.load').removeClass('navbar-default2');
			$(' a.nav000').addClass('navbar-brand');
			$('a.navbar-brand').removeClass('nav000');
			$(".boxa").css({"opacity": "1", "-webkit-transition": "opacity 1s ease-in"});
			
			$(".imga").css({"opacity": "1", "-webkit-transition": "opacity 0.89s ease-in"});
			$(".scroll").css({"opacity": "1", "-webkit-transition": "opacity 0.89s ease-in"});
			$(".go_up_outer").css({"opacity": "0", "-webkit-transition": "opacity 0.89s ease-in"});
			
        }
    });
});

$(function() {

  var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;

  if (isTouch) { $('.revealOnScroll').addClass('animated'); }

  $window.on('scroll', revealOnScroll);

  function revealOnScroll() {
    var scrolled = $window.scrollTop(),
        win_height_padded = $window.height() * 1.1;

    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
      var $this     = $(this),
          offsetTop = $this.offset().top;

      if (scrolled + win_height_padded > offsetTop) {
        if ($this.data('timeout')) {
          window.setTimeout(function(){
            $this.addClass('animated ' + $this.data('animation'));
          }, parseInt($this.data('timeout'),10));
        } else {
          $this.addClass('animated ' + $this.data('animation'));
        }
      }
    });
    // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
      var $this     = $(this),
          offsetTop = $this.offset().top;
      if (scrolled + win_height_padded < offsetTop) {
        $(this).removeClass('animated pulse zoomIn slideInLeft slideInRight  zoomIn pulseIn  pulse')
      }
    });
  }

  revealOnScroll();
});</script>
