@charset "utf-8";
#Center {
	position: relative;
}
#Center .guide_title {
	position: absolute;
	left: 0;
	top: 0;
}

/*----------------------------------------------------------------------*/
/* KeyVisual */
#KeyVisual { border:10px solid #fff; box-shadow: #00000033 0 0 3px; max-width:1440px; margin:60px auto; box-sizing:border-box; }
#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 #2a8000; box-sizing:border-box; 
	}
.index_slider_list img { display:block; width:100%; }

/* owl-carousel */
.index_slider_list .owl-nav > div {
	position:absolute; top:50%; border:1px solid #dbb107; background-color:rgba(255,255,255,0.6); 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 { background-color:#fff; 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:#000; }
.index_slider_list .owl-nav .disabled { display:none; }

@media screen and (max-width: 767px) {
.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: 768px) {
.index_slider_list .owl-nav > div { margin-top:-24px; width:48px; height:48px; }
.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; bottom:-30px; width:100%; text-align:center; line-height:0; }
.index_slider_list .owl-dots .owl-dot { 
	display:inline-block; background-color:#ccc; width:12px; height:12px; margin:0 5px; border-radius:50%; 
	}
.index_slider_list .owl-dots .owl-dot.active, .index_slider_list .owl-dots .owl-dot:hover { 
	background-color:#06c806;
	}

/* noscript */
#KeyVisual.noscript { border:0; box-shadow:none; max-width:none; }
#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; }

.return_form_noscript { margin:20px 0; text-align:center; position:relative; }
.return_form_noscript a { 
	display:inline-block; background-color:#666; width:180px; line-height:58px;
	text-align:center; color:#fff; font-weight:bold; text-decoration:none; position:relative; 
	}
.return_form_noscript a:hover, .return_form_noscript a:focus { background-color:#333; box-shadow:0 0 20px rgba(0,0,0,0.3); }


/* 首頁共用樣式 */
.index_content {
	max-width: 1440px;
	box-sizing: border-box;
	margin: auto;
}
.index_content img {
	width: auto;
	height: auto;
	max-width: 100%;
}
.index_title {
	margin-bottom: 30px;
}
.index_title h2 {
	font-size: 1.5rem;
	font-weight: 400;
	color: #000;
	letter-spacing: 2px;
	text-align: center;
	position: relative;
}
.index_title h2::after {
	content: "";
	width: 60px;
	height: 2px;
	background-color: #06c806;
	margin-left: -30px;
	position: absolute;
	bottom: -5px;
	left: 50%;
}
.index_row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}
.index_row > div {
	padding: 0 15px;
}
.index_row > div > div {
	padding: 30px;
	box-sizing: border-box;
}
.index_box_shadows {
	box-shadow: #00000033 0 0 3px;
}
/* news list */
.news_list ul li {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
.news_list ul li:last-of-type {
	border-bottom: none;
}
.news_list ul li a.news_title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	color: #666;
	text-decoration: none;
	padding-right: 45px;
}
.news_list ul li a.news_title:hover, .news_list ul li a.news_title:focus {
	color: #077207;
}
.news_list ul li span.news_date {
	flex: 0 0 auto;
	width: auto;
	color: #2a8000;
	font-family: "Montserrat", sans-serif;
	font-size:0.875rem;
}

.more {
	text-align: right;
}
.more a {
	color: #999;
	text-transform: uppercase;
	text-decoration: none;
}
.more a:hover,
.more a:focus {
	color: #077207;
}
.more a span {
	padding-right: 12px;
	position: relative;
}
.more a span::before {
	content: "";
	width: 7px;
	height: 9px;
	background-image: url(../images/btn_more_01.svg);
	background-size: 7px 9px;
	background-position: 50% 50%;
	position: absolute;
	top: 8px;
	left: 0;
}
.more a.rss {
	color: #f60;
	text-transform: uppercase;
	text-decoration: none;
	margin-right: 15px;
}
.more a.rss:hover,
.more a.rss:focus {
	color: #077207;
}
.more a.rss span {
	padding-right: 12px;
	position: relative;
}
.more a.rss span::before {
	content: "";
	width: 12px;
	height: 12px;
	background-image: url(../images/btn_rss.svg);
	background-size: 12px 12px;
	background-position: 50% 50%;
	position: absolute;
	top: 7px;
	left: -5px;
}

/* 首頁-常用服務 */
#index_function {
	background-color: #fff;
	margin-bottom: 30px;
	padding: 30px;
}
ul.service_links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
ul.service_links li {
	flex: 0 0 25%;
	width: 25%;
	text-align: center;
	margin-bottom: 15px;
	box-sizing: border-box;
}
@media screen and (max-width: 991px) {
	ul.service_links {
		padding: 0 30px;
	}
	ul.service_links li {
		flex: 0 0 33.3333333%;
		width: 33.3333333%;
		text-align: left;
	}
}
@media screen and (max-width: 880px) {
	ul.service_links li {
		flex: 0 0 50%;
		width: 50%;
		text-align: left;
	}
}
@media screen and (max-width: 540px) {
	ul.service_links {
		padding: 0 50px;
	}
	ul.service_links li {
		flex: 0 0 100%;
		width: 100%;
	}
}
/* 首頁-服務消息 */
#index_service {
	margin-bottom: 30px;
}
#index_service .index_row {
	align-items: stretch;
}
#index_service .index_row > div {
	flex-basis: 0;
	flex-grow: 1;
	box-sizing: border-box;
}
#index_service .index_row > div.col_left {
	flex: 0 0 65%;
	max-width: 65%;
}
#index_service .index_row > div.col_right {
	flex: 0 0 35%;
	max-width: 35%;
}
#index_service .index_row > div > div {
	height: 100%;
	background-color: #fff;
}

/* 新聞廣場 & 台電影音網-*/
#index_news_video {
	margin-bottom: 30px;
}
#index_news_video .index_row {
	align-items: stretch;
}
#index_news_video .index_row > div.col_left,
#index_news_video .index_row > div.col_right {
	flex: 0 0 50%;
	max-width: 50%;
	box-sizing: border-box;
}
#index_news_video .index_row > div > div {
	height: 100%;
	background-color: #fff;
}
#index_news_video .index_video .media_box {
	max-width: 480px;
	margin: 0 auto 10px auto;
}
#index_news_video .index_video .more {
	text-align: center;
}

/* 首頁-相關連結 */
#index_links {
	margin-bottom: 30px;
}
#index_links .index_links {
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
#index_links .index_links .index_row {
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}
#index_links .index_links .index_title {
	width: 20%;
	flex: 0 0 20%;
	justify-self: flex-end;
	margin-bottom: 0;
	box-sizing: border-box;
}
#index_links .index_links .btn_items {
	width: 80%;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 0 0 80%;
}
#index_links .index_links .btn_items .btn_links {
	width: auto;
	box-sizing: border-box;
	padding: 15px;
	flex: 0 0 auto;
}
#index_links .index_links .btn_items .btn_links img {
	width: auto;
	height: auto;
	max-width: 100%;
}
@media screen and (max-width: 1379px) {
	#index_links .index_links .btn_items .btn_links {
		width: 33.3333%;
		flex: 0 0 33.3333%;
	}
}
@media screen and (max-width: 991px) {
	#index_links .index_links .index_title {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 30px;
		padding-right: 0;
	}
	#index_links .index_links .btn_items {
		width: 100%;
		flex: 0 0 100%;
	}
	#index_links .index_links .btn_items .btn_links {
		width: 33.3333%;
		flex: 0 0 33.3333%;
	}
}
@media screen and (max-width: 768px) {
	#index_links .index_links .btn_items .btn_links {
		width: 50%;
		flex: 0 0 50%;
	}
}
@media screen and (max-width: 565px) {
	#index_links .index_links .btn_items .btn_links {
		width: 100%;
		text-align: center;
		flex: 0 0 100%;
	}
}
/* 首頁-自訂區塊 */
#index_block .index_row {
	align-items: stretch;
}
#index_block .index_row .cols {
	flex: 0 0 33.333333333333%;
	max-width: 33.333333333333%;
	box-sizing: border-box;
	margin-bottom: 30px;
}
#index_block .items {
	height: 100%;
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
#index_block .items h3 {
	font-size: 1.35rem;
	font-weight: 400;
	color: #2a8000;
	line-height: 1.5;
	margin-bottom: 15px;
}
#index_block .items p {
	color: #666;
	letter-spacing: 1px;
	margin-top: 0;
}

#introPage {
	max-width: 1440px;
	background-color: #fff;
	box-shadow: #00000033 0 0 3px;
	margin: 60px auto 0;
	box-sizing: border-box;
	padding: 50px;
}
table.branch {
	width: 1340px;
}
table.branch caption {
	font-size: 1.25rem;
	text-align: left;
	margin-bottom: 20px;
}
table.branch caption span {
	border-left: 5px solid #2a8000;
	margin-right: 10px;
}
table.branch th {
	background: #2a8000;
	color: #fff;
}
table.branch th,
table.branch td {
	border: 1px solid #ccc;
	padding: 15px;
	box-sizing: border-box;
}
table.branch th {
	font-weight: 400;
}

/* RWD */
/* width_narrow */
@media screen and (max-width: 768px) {
	.index_content {
		padding-right: 8px;
		padding-left: 8px;
	}
	#index_function {
		margin-right: 8px;
		margin-left: 8px;
		padding-right: 8px;
		padding-left: 8px;
	}
	#index_links .index_links {
		padding-right: 15px;
		padding-left: 15px;
	}
	#index_links .index_links,
	#index_block .items,
	.index_row {
		margin-right: 0;
		margin-left: 0;
	}
	.index_row > div {
		padding-right: 0;
		padding-left: 0;
	}
	.index_row > div > div {
		padding: 15px;
	}
	#index_news_video .index_row > div.col_left,
	#index_news_video .index_row > div.col_right,
	#index_block .index_row .cols {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 30px;
	}
	#index_news_video .index_row > div.col_right {
		margin-bottom: 0;
	}
	/* news */
	.news_list ul li {
		flex-direction: column;
	}
	.news_list ul li a.news_title {
		-webkit-line-clamp: 2;
		padding-right: 0;
	}
}

/* width_wide */
@media screen and (max-width: 991px) {
	/* 常用服務 */
	ul.service_links li {
		margin-bottom: 30px;
	}
	ul.service_links li:last-of-type {
		margin-bottom: 0;
	}
	/* 服務消息 */
	#index_service .index_row > div.col_left {
		margin-bottom: 30px;
	}
	#index_service .index_row > div.col_left,
	#index_service .index_row > div.col_right {
		flex: 0 0 100%;
		max-width: 100%;
	}
	/* 相關連結 */
	#index_links .index_links .index_row {
		align-items: start;
	}
	#index_block .items {
		padding: 15px;
	}
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
	#index_service .index_row > div.col_left,
	#index_service .index_row > div.col_right {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* width_desktop */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	#index_service .index_row > div.col_left {
		flex: 0 0 60%;
		max-width: 60%;
	}
	#index_service .index_row > div.col_right {
		flex: 0 0 40%;
		max-width: 40%;
	}
}

@media screen and (min-width: 769px) and (max-width: 1440px) {
	#KeyVisual,
	#index_function {
		margin-right: 30px;
		margin-left: 30px;
	}
	.index_content {
		padding-right: 30px;
		padding-left: 30px;
	}
}
