<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;}
		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%;
				right: 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;
		}
		.image-rounded
		{
			border-radius: 10%;
		}
/**************************************************/
		.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;
		}
		.PD_0{
			padding:0;
		}
		
		.value_block{
					min-height:100vh;
					background-repeat: no-repeat;
					background-attachment: inherit;
					background-position: center;
					background-size: cover;
		
		
		}
		.vb_filter{
			height:100%;
			background: linear-gradient(180deg,rgba(0,0,0,0) -14%,rgba(0,0,0,0) 71%);
			position:absolute;
			top:0;
			left:0;
		}
		
		.vb_outer{
			opacity:0;
			height:100%;
			position:absolute;
			top:0;
			left:0;
		}
		.vb_outer:hover{
			-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/37.jpg);
			
		}
		
		.value_block5{
			background-image: url(/userUpload/images/tmp/15.jpg);
			
		}
		
		.value_block6{
			background-image: url(/userUpload/images/tmp/07.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/38.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;
			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: table-cell;
			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: vertical-lr
		}

		.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: #9f673f;
			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/gkelogo.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.25) 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;
				
			}
		}
		@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;}
			}
		@media (min-width: 768px) and (max-width: 1200px) {
		
		.area{width: 100%;}
		.boxtop{
			width:54%;
			left:23%;
		}
		.boxtop a {font-size: 30px;}
		}
		@media screen and (min-width: 1400px) {
			
			.boxtop a {font-size: 30px;}
		
		}
		
		
			
		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%;
				
				

		}
		.imageshow4{
				width: 0%;
				height: 0%;
				background: linear-gradient(180deg,rgba(160,160,160,0) 20%,rgba(0,0,0,0.8) 115%);
				position: absolute;
				top:50%;
				left:50%;	
				text-align: center;
				font-size: 1em;
				transition: 0.7s ease;
				overflow: hidden;
				opacity:0.1;
						}	
		.animation2:hover .image-transform {
				transform:rotate(5deg);
				overflow:hidden;
						}				
						
		.animation2:hover .imageshow4 {
				width: 100%; 
				height: 100%;
				top:0;
				left:0;
				opacity:1;
						}
		.animation2:hover div.storya2 {
			border: 0px solid rgba(66,66,37,0.4);

						}				
		
		.animation2:hover .content{opacity:1;-webkit-filter:brightness(.5) blur(3px);}

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

		
</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="" 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;">
								東大綠色知識經濟創新平台</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="#bk1" >何謂綠色知識經濟</a></li>
		
									<li class="revealOnScroll" data-animation="pulse">
										<a href="#bk2">成果轉化教學</a></li>
										
									<li class="revealOnScroll" data-animation="pulse">
										<a href="#bk3">領域專家資料庫</a></li>
									<li class="revealOnScroll" data-animation="pulse">
										<a href="#bk4">綠色知識經濟產業資料庫</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/00.jpg);    background-attachment: initial;height:111vh;">
				
					
				
					
				</div>
				
				<div class="item" style="height:111vh;background-image:url(/userUpload/images/tmp/00.jpg);background-attachment: initial;">
					
				</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-->
	
	
	
	<!-- 計畫緣起 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">
					About Lohas Industry Innovation</h4>
				<h2 class="bigtitle revealOnScroll " data-animation="zoomIn" style="letter-spacing: 1.25rem;font-weight: normal;color:#555;">
					國立臺東大學執行教育部107年高教深耕計畫</h2>
				<p>【樂活產業】計畫概述</p>
			</div>
			<hr class="style1 revealOnScroll" data-animation="pulse" />
			<!-- <div class="p1">
				<img class="p1 revealOnScroll" data-animation="zoomIn" src="/userUpload/images/02-3.png" /></div> -->
			<div class="COL6 storya" style="z-index:2;">
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/30.jpg" />
				<b class="img_info">107年高教深耕計畫</b>
			</div>
			<!--text-box-->
			<div class="text COL6 " >
				<p class="revealOnScroll" data-animation="pulse">
					臺東地區發展樂活產業具有莫大的潛力，本校積極投入臺東地區樂活產業的分類與資料庫的建置，並配合經濟部4G寬頻應用軟體創新創業園區發展計畫，結合產官學資源，積極推動TTMaker台東創客園區。本計畫將進一步結合本校師生與區域學園（臺東地區高中職），匯聚對臺東地區樂活產業創新有熱誠的教師與學子，形成樂活產業專業社群，參與樂活產業創新加值研發與服務，促進臺東地區樂活產業產學聯盟的發展，提升本校學用合一與產學合作的教學研究能量，使本校成為足以支持臺東地區樂活產業生態系統永續發展與創新加值的區域整合中心。
 。
				</p>
				
			</div>
			<!--text-box-->
			
			
			
		</div>
		
	<!-- NO .1 召集人 -->
		<div class="COL12 clearfix area">
		<!--text-box-->
			<div class="text COL6 " >
			<h2>計畫召集人</h2>
				<p class="revealOnScroll" data-animation="pulse">
					國立臺東大學謝明哲副教授
				</p>
				<p>
				• 圖書資訊館館長<br>
				• 綠色知識經濟產業創新成果轉化、校園示範點專題創作召集人<br>
				</p>
		
			</div>
			
			<div class="storya COL6 " >
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/boss1.jpg" />
				<b class="img_info">國立臺東大學謝明哲副教授</b>
			</div>
			
			
			
			<!--text-box-->
		</div>
	<!-- NO .1 召集人 --> 	
	
	
	<!-- NO .2 召集人 -->
		<div class="COL12 clearfix area">
		<!--text-box-->
		
			<div class="storya COL6 " >
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/boss2.jpg 
				" />
				<b class="img_info">國立臺東大學陳宜檉副教授</b>
			</div>
			
			<div class="text COL6 " >
			<h2>計畫召集人</h2>
				<p class="revealOnScroll" data-animation="pulse">
					國立臺東大學陳宜檉副教授
				</p>
				<p>
				• 資管系主任<br>
				• 綠色知識經濟產業三創跨域成果轉化召集人<br>
				</p>
		
			</div>
			
			
			<!--text-box-->
		</div>
	<!-- NO .2 召集人 --> 	
	
	
	
	
	
	
	<div class="COL12 clearfix area">
		<div class="title1area">
				<h4 class="img1 smalltitle revealOnScroll" data-animation="zoomInUp">
					About Lohas Industry Innovation</h4>
				<h2 class="bigtitle revealOnScroll " data-animation="zoomIn" style="letter-spacing: 1.25rem;font-weight: normal;color:#555;">
					國立臺東大學綠色國際大學推動委員會&白皮書</h2>
				<p>106年6月15日本校行政會議修正通過「國立臺東大學綠色國際大學推動委員會設置要點」<br>
				106年9月29日本校綠色國際大學推動委員會審議通過「國立臺東大學綠色國際大學白皮書」；107年12月6日修訂通過 。
				</p>
		</div>
	</div>
	
	<!-- NO .1 召集人 -->
		<div class="COL12 clearfix area">
		<!--text-box-->
			<div class="text COL6 " >
			<h2>國立臺東大學邁向綠色國際大學三階段發展架構</h2>
				<p class="revealOnScroll" data-animation="pulse">
					願景：2010迄今
				</p>
				<p>
				• 教育卓越、關懷社會<br>
				• 深耕研究、邁向國際<br>
				</p>
		
			</div>
			
			<div class="storya COL6 " >
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/fut01.PNG" />
				<b class="img_info">國立臺東大學邁向綠色國際大學三階段發展架構</b>
			</div>
			
			
			
			<!--text-box-->
		</div>
	<!-- NO .1 召集人 --> 	
	
	
	<div class="COL12 clearfix area">
		<div class="title1area">
				<h4 class="img1 smalltitle revealOnScroll" data-animation="zoomInUp">
					About Lohas Industry Innovation</h4>
				<h2 class="bigtitle revealOnScroll " data-animation="zoomIn" style="letter-spacing: 1.25rem;font-weight: normal;color:#555;">
					願景：教育卓越、關懷社會、深耕研究、邁向國際</h2>
				<p>本校成為一所以「智慧、健康、永續、美學」為內涵的綠色國際大學</p>
				
				<p>校園優質卓越，教育博雅專精，致力於深耕支持綠色知識經濟產業發展的教學與科技研發，
					培育嚴以律己、宏觀創新，並能取法山海智慧、學用合一的新世代人才。</p>

				<p>所有教職員工生亦皆能身體力行，從教學、研究、行政、服務、和日常生活中，體現「智慧、健康、永續、美學」校園文化，並能影響社區、社會、國家，乃至國際，成就未來地球樂活智慧。</p>

		</div>
	</div>
	
	
	<!-- NO .2 召集人 -->
		<div class="COL12 clearfix area">
		<!--text-box-->
		
			<div class="storya COL6 " >
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/fut02.PNG 
				" />
				<b class="img_info">綠色國際大學內涵</b>
			</div>
			
			<div class="storya COL6 " >
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/fut03.PNG 
				" />
				<b class="img_info">2018深耕計畫：發展學校特色</b>
			</div>
			
			
			<!--text-box-->
		</div>
	<!-- NO .2 召集人 --> 	
	
	
	
	
	
	
	
	
	
	<div id="bk1"  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>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		<div id="bk2" class="COL12 clearfix area">
			<div class="title1area">
					<h4 class="img1 smalltitle revealOnScroll" data-animation="zoomInUp">
						Achievement transformation teaching</h4>
					<h2 class="bigtitle revealOnScroll " data-animation="zoomIn" style="letter-spacing: 1.25rem;font-weight: normal;color:#555;">
						成果轉化教學</h2>
					<hr>
					<h2>宗旨</h2>
					<p>本校執行108年度高教深耕計畫「A5-2-3建構三創跨域學習與創新教學環境」、「B-2-1統整綠色知識經濟產業教研能量」</p>
						<p>鼓勵師生投入三創跨域暨綠色知識經濟創新成果轉化，協助在地產業發展、轉型，建立智慧健康城鄉、新農業、智慧產銷、及循環經濟等成功案例</p>
					<p>藉由評選統整性課程具潛力之作品或研究成果，提供經費鼓勵指導教授及學生組成三創團隊進行成果轉化（包括論文發表）及創業育成，並發展成果轉化及創業育成教材，以利增廣認知及優化技能</p>
					

			</div>
		</div>
		
		<div class="COL12 clearfix area">
		<!--text-box-->
			<div class="text COL6 " >
			<H2>臺東擁有許多具有樂活產業特色的微型企業(Micro-Enterprise)，</h2>
				<p class="revealOnScroll" data-animation="pulse">
				<br>
				• 自然農業、<br>
				• 有機農業、<br>
				• 文化創意產業、<br>
				• 綠色旅遊、<br>
				• 特色民宿、以及<br>
				• 智慧居家照護等。<br>
				</p>
				<H2>這些微型企業經由持續的輔導創新</H2><br>
				• 善用綠色設計、綠色供應鏈、清潔生產、
				綠色消費及綠色回收來達成循環經濟，<br>
				• 皆能成為支持健康永續生活型態(LOHAS)
				的產業，<br>
				• 以適可而止、合作分享、持續創新的務實
				態度來滿足消費者在消費時對家人健康和
				環境責任的考量。<br>
				</p>
				
			</div>
			<div class="COL12 clearfix" style="z-index:2;">
				
				<div class="COL6 storya" style="z-index:2;">
					<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/35.png" />
					<b class="img_info">綠色知識經濟創新教學模式</b>
				</div>
				
				<div class="COL6 storya" style="z-index:2;">
					<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/36.png" />
					<b class="img_info">專題創作及創業群組營造模式</b>
				</div>
			</div>
			
			<!--text-box-->
		</div>
		<div class="COL12 clearfix area">	
			<div class="COL6 storya" style="z-index:2;">
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/37.png" />
				<b class="img_info">循環經濟生態系之建立</b>
			</div>
			<!--text-box-->
			<div class="text COL6 " >
				<p class="revealOnScroll" data-animation="pulse">
					協助微型產業進行樂活產業、綠色知識經濟創新的方法：
				</p>
				<p class="revealOnScroll" data-animation="pulse">
					1. 統整循環經濟核心價值<br>
					2. 協助微型產業專注於樂活產業技術研發與綠色
					知識經濟創新<br>
					3. <a href="index.php">提供微型產業客製化虛擬商店</a><br>
					4. 協助微型產業建立商業智慧與精準行銷機制
					5. 提供消費者智慧合購、節省運費、及LOHAS社
					群支持<br>
					6. 滿足消費者對健康和環境責任的消費考量<br>
					7. 協助消費者實現健康永續的智慧居家生活<br>
				</p>
				
			</div>
			<!--text-box-->
		</div>	
		
		<div class="COL12 clearfix area">	
			<div class="COL6 storya" style="z-index:2;">
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/31.jpg" />
				<b class="img_info">107年高教深耕計畫成果展</b>
			</div>
			<!--text-box-->
			<div class="COL6 storya" style="z-index:2;">
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/35.jpg" />
				<b class="img_info">參與學生之課程研習情形-智慧核心與健康簡諧率</b>
			</div>
			<!--text-box-->
		</div>	
		
		<div class="COL12 clearfix area">	
			<div class="COL6 storya" style="z-index:2;">
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/33.jpg" />
				<b class="img_info">炳碩企業參訪</b>
			</div>
			<!--text-box-->
			<div class="COL6 storya" style="z-index:2;">
				<img class="image-full revealOnScroll" data-animation="pulse" src="/userUpload/images/tmp/34.jpg" />
				<b class="img_info">1027銘泉農場參訪</b>
			</div>
			<!--text-box-->
		</div>	
	</div><!-- 計畫緣起 STORY-->
	
	
	
	<!--何謂綠色知識經濟-->
	<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/gkelogo.png'>
						</div>
					<div class='banner_content'>
												
						<p class='animated fadeIn' style='animation-duration: 2s;'>
							綠色知識經濟產業創新
						</p>
						<h2 class='animated fadeIn' style='animation-duration: 3s;'>「成果轉化案例」</h2>
						<p>鼓勵師生投入三創跨域暨綠色知識經濟創新成果轉化，協助在地產業發展、轉型，建立智慧健康城鄉、新農業、智慧產銷、及循環經濟等成功案例</p>
						</div>
											
					</div>
					<!--content_container-->
					 <div class="block0 clearfix"></div> 
				
					
				</div>
			
			<!--item -->
				<div class="item" style="height:100vh;background-image:url(/userUpload/images/tmp/09.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/gkelogo.png'>
						</div>
					<div class='banner_content'>
												
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						「成果轉化案例」
							
						</p>
						<h2 class='animated fadeIn' style='animation-duration: 3s;'><a style="color:#ffc310;" href>九鳥陶燒</a></h2>
						<hr>
						<p class='animated fadeIn' style='animation-duration: 3s;'>九鳥陶燒工作室融合了「排灣族」和日本「志野燒」陶藝文化，不同的燒窯方式和創作特色，進行文化的交織，創作出具獨特性陶藝品。</p>
						</div>
											
					</div>
					<!--content_container-->
					<div class="block0 clearfix"></div>  
				</div>
			<!--item -->
				
						<!--item -->
				<div class="item" style="height:100vh;background-image:url(/userUpload/images/tmp/40.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/gkelogo.png'>
						</div>
					<div class='banner_content'>
												
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						「成果轉化案例」
							
						</p>
						<h2 class='animated fadeIn' style='animation-duration: 3s;'><a style="color:#ffc310;" href>艾蘭哥爾</a></h2>
						<hr>
						<p class='animated fadeIn' style='animation-duration: 3s;'>台灣，一個美麗的島嶼，有著「福爾摩莎」的美名，早在16世紀時葡萄牙人就給了台東一個美麗的稱號-ALANGER。我們是一群ALANGER﹝艾蘭哥爾﹞的子女，想要做自己，期望愛喝咖啡的你也能享受這風味特殊且健康無負擔的咖啡。</p>
						</div>
											
					</div>
					<!--content_container-->
					<div class="block0 clearfix"></div>  
				</div>
			<!--item -->
				
			<!--item -->
				<div class="item" style="height:100vh;background-image:url(/userUpload/images/tmp/39.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/gkelogo.png'>
						</div>
					<div class='banner_content'>
												
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						<p class='animated fadeIn' style='animation-duration: 2s;'>
						「成果轉化案例」
							
						</p>
						<h2 class='animated fadeIn' style='animation-duration: 3s;'><a style="color:#ffc310;" href>銘泉生態休閒農業</a></h2>
						<hr>
						<p class='animated fadeIn' style='animation-duration: 3s;'>追著風、賞著景，奔馳在沿山公路上，霎那，視野豁然開朗，無邊無際的鳳梨田眼前一展而開，就是進入銘泉的天然路標， 廣達20餘公頃的田園，交織台灣版的拾穗，此時，就得放慢速度，進入慢食、慢活、慢遊的銘泉生態農場。</p>
						</div>
											
					</div>
					<!--content_container-->
					<div class="block0 clearfix"></div>  
				</div>
			<!--item -->
				
			</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>
	<!-- end -->
	
	
	
	
	
	
	
	
	
	
		
	
	
		
<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 class="COL12 clearfix "style="">	
					
				<div class="COL6 clearfix " >
					<img style="" class="image-full revealOnScroll image-transform" data-animation="zoomIn" src="/userUpload/images/exb.jpg" /></div>
				
				<div class="COL6 clearfix " >
					
				</div>
				</div>
				<div class="iframe-rwd COL12map">
						<div class="iframe-rwd">
						
					
						
						
						</div>
					</div>
				<div class="text COL12 clearfix revealOnScroll"style="background-color:#fff;color:black;min-height:370px;text-align:center;padding:4em 2em;" data-animation="pulse">
					<div class="COL12 title1area clearfix" style="background-color:white;border-bottom:1px #000 dashed;" >	
					

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