@charset "utf-8";
/* CSS Document */
#Center { background:url(../images/index_bg02.jpg) repeat center center; }

/*----------------------------------------------------------------------*/
/* KeyVisual */
#KeyVisual {  }
#KeyVisual > div {  }
.index_slider_list a { display:block; max-width:100%; overflow:hidden; position:relative; }
.index_slider_list a:hover, .index_slider_list a:focus { opacity:0.8; }
.index_slider_list a:focus::after { 
	content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:4px dashed #c8171f; box-sizing:border-box; 
	}
.index_slider_list img { display:block; width:100%; }

/* owl-carousel */
.index_slider_list .owl-nav > div {
	position:absolute; top:50%; background-color:#fff; text-indent:-999px; z-index:9999; overflow:hidden;
	border-radius:50%; box-shadow:0 0 20px rgba(0,0,0,0.4); transition:all 0.3s ease;
	}
	.index_slider_list .owl-nav > div:hover { box-shadow:0 0 20px rgba(0,0,0,0.6); }
.index_slider_list .owl-nav > div::after { 
	content:''; display:block; position:absolute; top:50%; border-left:2px solid #333; border-top:2px solid #333; 
	}
	.index_slider_list .owl-nav .owl-prev::after { left:50%; transform:rotate(-45deg); }
	.index_slider_list .owl-nav .owl-next::after { right:50%; transform:rotate(135deg); }
.index_slider_list .owl-nav > div:hover::after { border-color:#1fa3d9; }
.index_slider_list .owl-nav .disabled { display:none; }

@media screen and (max-width:639px) {
.index_slider_list .owl-nav > div { margin-top:-18px; width:36px; height:36px; }
.index_slider_list .owl-nav .owl-prev { left:5px; }
.index_slider_list .owl-nav .owl-next { right:5px; }
.index_slider_list .owl-nav > div::after { width:10px; height:10px; margin-top:-5px; }
.index_slider_list .owl-nav .owl-prev::after { margin-left:-3px; }
.index_slider_list .owl-nav .owl-next::after { margin-right:-3px; }
}
@media screen and (min-width:640px) and (max-width:1359px) {
.index_slider_list .owl-nav > div { margin-top:-20px; width:40px; height:40px; }
.index_slider_list .owl-nav .owl-prev { left:10px; }
.index_slider_list .owl-nav .owl-next { right:10px; }
.index_slider_list .owl-nav > div::after { width:12px; height:12px; margin-top:-6px; }
.index_slider_list .owl-nav .owl-prev::after { margin-left:-4px; }
.index_slider_list .owl-nav .owl-next::after { margin-right:-4px; }
}
@media screen and (min-width:1360px) {
.index_slider_list .owl-nav > div { margin-top:-27px; width:54px; height:54px; }
.index_slider_list .owl-nav .owl-prev { left:10px; }
.index_slider_list .owl-nav .owl-next { right:10px; }
.index_slider_list .owl-nav > div::after { width:12px; height:12px; margin-top:-6px; }
.index_slider_list .owl-nav .owl-prev::after { margin-left:-4px; }
.index_slider_list .owl-nav .owl-next::after { margin-right:-4px; }
}

.index_slider_list .owl-dots { position:absolute; left:0; width:100%; text-align:center; line-height:0; }
.index_slider_list .owl-dots .owl-dot { 
	display:inline-block; background-color:#003c5a; width:18px; margin:0 5px; 
	-webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    transition:all 0.3s ease;
	}
.index_slider_list .owl-dots .owl-dot.active { 
	width:35px; 
	}
.index_slider_list .owl-dots .owl-dot.active, .index_slider_list .owl-dots .owl-dot:hover { 
	background-color:#fff;
    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
    box-shadow:0 0 20px rgba(0, 0, 0, 0.2);
	}
@media screen and (max-width:639px) {
.index_slider_list .owl-dots { bottom:5px; }
.index_slider_list .owl-dots .owl-dot { height:8px; border-radius:4px; }
}
@media screen and (min-width:640px) {
.index_slider_list .owl-dots { bottom:10px; }
.index_slider_list .owl-dots .owl-dot { height:12px; border-radius:6px; }
}

/* noscript */
#KeyVisual.noscript > div { max-width:960px; margin:0 auto; }
#KeyVisual.noscript .index_slider_list li { margin:10px 0; }
#KeyVisual.noscript + .return_form_noscript { padding-bottom:40px; }


/*----------------------------------------------------------------------*/
/* 標題共用樣式 */
.IndexTitle { text-align:center; }
.IndexTitle h2 { line-height:150%; font-weight:700; }

.IndexMoreBtn { text-align:center; }
.IndexMoreBtn a {
    height:50px; line-height:50px; letter-spacing:.1em; text-decoration:none; font-family:"Noto Sans TC"; font-weight:400; display:inline-block; padding:0 1.865em;
	-webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;
    -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;
}
.IndexMoreBtn a:before { content:""; display:inline-block; vertical-align:middle; background:url(../images/icon_search.png) no-repeat; width:15px; height:15px; margin-right:5px; margin-top:-2px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; }


/*----------------------------------------------------------------------*/
/* 首頁第一區 */
.IndexArea01 { position:relative; }
.IndexArea01:before { content:""; position:absolute; left:0; width:100%; background:url(../images/index_bg01.jpg) center; }
.IndexArea01 .IndexMoreBtn { position:relative; }
.IndexArea01 .IndexMoreBtn a {
    background-color:#25507b; color:#fff; margin-bottom:5px; margin-right:3px;
	-webkit-box-shadow:3px 5px 0 rgba(0,60,90,0.2);
	-moz-box-shadow:3px 5px 0 rgba(0,60,90,0.2);
	box-shadow:3px 5px 0 rgba(0,60,90,0.2);
}
.IndexArea01 .IndexMoreBtn a:hover, .IndexArea01 .IndexMoreBtn a:focus { 
	margin-bottom:0; margin-right:0; margin-top:5px; margin-left:3px; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; 
	}


/*----------------------------------------------------------------------*/
/* 智農新聞 */
.IndexNews .IndexTitle h2 { color:#25507b; font-size:2.8125rem; letter-spacing:.15em; text-align:center; margin-bottom:20px; }
.IndexNews .IndexTitle h2:before { content:""; background:url(../images/icon_index_news.png) no-repeat; width:82px; height:75px; display:inline-block; vertical-align:bottom; margin-right:10px; }
.IndexNews .IndexTitle h2 span { display:inline-block; vertical-align:bottom; line-height:1; }

.IndexNewsList { display:flex; flex-wrap:wrap; }
.IndexNewsList:after { content:""; clear:both; display:block; }
.IndexNewsList .item { padding-left:14px; padding-right:14px; box-sizing:border-box; width:100%; max-width:440px; margin:10px auto 30px; }
.IndexNewsList .item > div { padding:0 22px 70px; position:relative; height:100%; box-sizing:border-box; }
.IndexNewsList .item > div:before { content:""; position:absolute; top:10%; left:0; z-index:1; width:100%; height:90%; background:#fff; }
.IndexNewsList .img, .IndexNewsList .cont, .IndexNewsList .info { position:relative; z-index:2; }
.IndexNewsList .img { overflow:hidden; }
.IndexNewsList .img > div {	padding-bottom:66.67%; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.IndexNewsList .img:hover > div { transform:scale(1.05); }
.IndexNewsList .cont { line-height:175%; }
.IndexNewsList .title { padding:20px 0 8px; font-family:"Noto Sans TC"; font-size:1.25rem; font-weight:400; text-decoration:none; color:#333; }
.IndexNewsList .desc { color:#666; max-height:5.25em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.IndexNewsList .info { position:absolute; bottom:0; left:0; padding:20px 22px; width:100%; box-sizing:border-box; }
.IndexNewsList .info > div { background:#007aac; width:100%; color:#fff; font-size:0.875rem; height:35px; line-height:35px; }
.IndexNewsList .info > div:hover { background:rgba(30,164,211,.9); }
.IndexNewsList .info .date { padding-left:20px; }
.IndexNewsList .info a.more { float:right; color:#fff; font-weight:700; letter-spacing:.1em; text-decoration:none; position:relative; padding:0 18px; }
.IndexNewsList .info a.more:before { content:""; position:absolute; left:0; top:20%; background:#fff; width:1px; height:60%; }
.IndexNewsList .info a.more:focus { outline:4px dashed #25507b; }
.IndexNewsList .item > div, .IndexNewsList .img > div, .IndexNewsList .info > div {	
	-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;
}
.IndexNewsList .item > div:hover { 
	transform:translateY(-5px);
	-moz-box-shadow:0 15px 10px -10px rgba(31, 31, 31, 0.3);
	-webkit-box-shadow:0 15px 10px -10px rgba(31, 31, 31, 0.3);
	box-shadow:0 15px 10px -10px rgba(31, 31, 31, 0.3);
}


/*----------------------------------------------------------------------*/
/* 活動課程 */
.IndexEvents { padding-bottom:80px; position:relative; }

.IndexEventsTable { position:absolute; right:0; top:25px; width:75%; display:none; }
.IndexEventsTable table {
    background:#fff; font-size:1.25rem; width:100%; color:#444;
	-webkit-box-shadow:0 8px 25px rgba(0,0,0,0.1);
	-moz-box-shadow:0 8px 25px rgba(0,0,0,0.1);
	box-shadow:0 8px 25px rgba(0,0,0,0.1);
}
.IndexEventsTable th, .IndexEventsTable td { padding:12px 1em; line-height:125%; }
.IndexEventsTable th { color:#333; border-bottom:2px solid #94b5d4; white-space:nowrap; }
.IndexEventsTable td.date { text-align:center; }
.IndexEventsTable .date { width:10%; white-space:nowrap; }
.IndexEventsTable td.title a { display:inline-block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:#444; text-decoration:none; }
.IndexEventsTable td.title { width:90%; }

.IndexEventsList {
    font-family:"Noto Sans TC";
    background:#fff; font-size:0; color:#444;
	-webkit-box-shadow:0 8px 25px rgba(0,0,0,0.1);
	-moz-box-shadow:0 8px 25px rgba(0,0,0,0.1);
	box-shadow:0 8px 25px rgba(0,0,0,0.1);
}
.IndexEventsList .item { display:flex;}
.IndexEventsList .item > div { padding:12px 1em; line-height:125%; }
.IndexEventsList .date { text-align:center; white-space:nowrap; flex:1 0 auto;}
.IndexEventsList .title { text-align:left; flex:1 1 auto;}
.IndexEventsList .th > div { text-align:center; color:#333; border-bottom:2px solid #94b5d4; }
.IndexEventsList .title a { color:#444; text-decoration:none; }
.IndexEventsList .title a:hover, .IndexEventsList .title a:focus { color:#116eca; }
.IndexEventsList .item:nth-child(2n+3) { background:#e5edf6; }


/*----------------------------------------------------------------------*/
/* 推動現況與實例-圖像牆 */
.IndexArticle { padding:80px 0; }
.IndexArticle .IndexTitle h2 { color:#25507b; font-size:2.8125rem; letter-spacing:.15em; text-align:center; margin-bottom:20px; }
.IndexArticle .IndexTitle h2:before { content:""; background:url(../images/icon_index04.png) no-repeat; width:82px; height:75px; display:inline-block; vertical-align:bottom; margin-right:10px; }
.IndexArticle .IndexTitle h2 span { display:inline-block; vertical-align:bottom; line-height:1; }

.IndexArticle .IndexMoreBtn a {
    background-color:#25507b; color:#fff; margin-bottom:5px; margin-right:3px;
	-webkit-box-shadow:3px 5px 0 rgba(0,60,90,0.2);
	-moz-box-shadow:3px 5px 0 rgba(0,60,90,0.2);
	box-shadow:3px 5px 0 rgba(0,60,90,0.2);
}
.IndexArticle .IndexMoreBtn a:hover, .IndexArticle .IndexMoreBtn a:focus { 
	margin-bottom:0; margin-right:0; margin-top:5px; margin-left:3px; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; 
	}


.IndexArticleList { padding-top:15px; padding-bottom:25px; }
.IndexArticleList > div { position:relative; }
.IndexArticleList:after { content:""; clear:both; display:block; }
.IndexArticleList .item { box-sizing:border-box; position:relative; }
.IndexArticleList .item > div { width:100%; height:100%; box-sizing:border-box; }
.IndexArticleList .item a { display:block; width:100%; height:100%; box-sizing:border-box; overflow:hidden; position:relative; text-decoration:none; }
.IndexArticleList .item a::after { content:''; display:block; clear:both; }
.IndexArticleList .img { background-size:cover; background-repeat:no-repeat; background-position:center center; position:relative; }

.IndexArticleList .title { font-family:"Noto Sans TC"; line-height:135%; box-sizing:border-box; }

/* hover效果 */
.IndexArticleList .cont, 
.IndexArticleList .img { 
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	transition:all 0.3s ease;
	}
.IndexArticleList .item a:hover .img, .IndexArticleList .item a:focus .img { transform:scale(1.03); }


/*----------------------------------------------------------------------*/
/* 快速連結 */
.IndexLinks { padding:30px 0; background:url(../images/index_bg01.jpg) center; }
.IndexLinksList { position:relative; }
.IndexLinksList:after { content:""; display:block; clear:both; }
.IndexLinksList .item { padding:15px; }
.IndexLinksList .item > div {
    padding:3px; position:relative; box-sizing:border-box; background:#fff;
	-webkit-box-shadow:0 0 15px rgba(0,0,0,0.1);
	-moz-box-shadow:0 0 15px rgba(0,0,0,0.1);
	box-shadow:0 0 15px rgba(0,0,0,0.1);
    -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;
}
.IndexLinksList .item > div:hover {
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.3);
	box-shadow:0 0 20px rgba(0,0,0,0.3);
    
}
.IndexLinksList .img > div { padding-bottom:66.67%; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.IndexLinksList .img a { display:block; width:100%; height:100%; position:absolute; top:0; left:0; text-indent:-10000px; }

/* owl-carousel */
.IndexLinksList .owl-nav > div {
	position:absolute; top:50%; background-color:#4d4d4d; text-indent:-999px; z-index:9999; overflow:hidden;
	border-radius:50%; box-shadow:0 0 20px rgba(0,0,0,0.4); transition:all 0.3s ease;
	}
	.IndexLinksList .owl-nav > div:hover { background-color:#25507b; box-shadow:0 0 20px rgba(0,0,0,0.6); }
.IndexLinksList .owl-nav > div::after { 
	content:''; display:block; position:absolute; top:50%; border-left:2px solid #fff; border-top:2px solid #fff; 
	}
	.IndexLinksList .owl-nav .owl-prev::after { left:50%; transform:rotate(-45deg); }
	.IndexLinksList .owl-nav .owl-next::after { right:50%; transform:rotate(135deg); }
.IndexLinksList .owl-nav .disabled { display:none; }

@media screen and (max-width:767px) {
.IndexLinksList .owl-nav > div { margin-top:-18px; width:36px; height:36px; }
.IndexLinksList .owl-nav .owl-prev { left:5px; }
.IndexLinksList .owl-nav .owl-next { right:5px; }
.IndexLinksList .owl-nav > div::after { width:10px; height:10px; margin-top:-5px; }
.IndexLinksList .owl-nav .owl-prev::after { margin-left:-3px; }
.IndexLinksList .owl-nav .owl-next::after { margin-right:-3px; }
}
@media screen and (min-width:768px) {
.IndexLinksList .owl-nav > div { margin-top:-22px; width:44px; height:44px; }
.IndexLinksList .owl-nav .owl-prev { left:-5px; }
.IndexLinksList .owl-nav .owl-next { right:-5px; }
.IndexLinksList .owl-nav > div::after { width:12px; height:12px; margin-top:-6px; }
.IndexLinksList .owl-nav .owl-prev::after { margin-left:-4px; }
.IndexLinksList .owl-nav .owl-next::after { margin-right:-4px; }
}