@charset "utf-8";

/* CSS Document */
* {
    box-sizing: border-box;
}

html, body{font-family:Arial, Helvetica, sans-serif,"微軟正黑體"; font-size:16px; padding:0; margin:0; height:100%;}
a{text-decoration:none;}
p{line-height:180%;}
img{width:100%; height: auto;}

li{margin-bottom: 5px;}

.pagecenter{width:50%; height:auto; position:relative; margin:auto auto; margin-top:40px;}

#top{width:100%; height:50px; background:#398d18; color:#fff; position:fixed; top:0; z-index:100;}
.topimg{width:100%; height:auto; overflow:hidden; background:#FFF;}

.menu{width:85%; height:40px; position:relative; margin:0 0; display:inline;}
/*#page1,#page2,#page3,#page4,#page5,#page6,#page7,#page8,#page9,#page12{padding-top:0; padding-bottom:0; width:90%; height:auto; float:left;}*/
.menu ul{margin:0; padding:0;}
.menu ul li{list-style:none; display:inline;}
.menu ul li a{height:auto; color:#fff; display:inline-block; width:8.5%; line-height:50px; text-align:center; margin:0; padding:0;}
.menu ul li a:hover{background:#666;}
.menubtn{display:none;}

#bottominfo{ display:block; width:100%; height:auto; text-align:left; background:#398d18; /*float:left;*/ text-align:center; padding:5px 0 5px 0;}
#bottominfo img{width:auto; height:auto;}

.frameblock{width:40%;height:auto; padding:1%; margin:3%; border:1px solid#ccc; display:inline-block; left:0; background:#fff;}
.frameblock p{line-height:130%;}

h1{color:#333; font-weight:normal;}
.red{color:#f00;}
.info ul li{line-height:200%;margin-left:2em;}

a.btn:link, a.btn:visited{display:block; border-radius:5px; width:80%; height:auto; line-height:300%; background:#66D0D0; color:#fff; text-align:center; margin:10%;}
a.btn:hover,  .btn:active{background:#666;}
a.btn2:link, a.btn2:visited{display:block; border-radius:5px; width:50%; height:auto; line-height:300%; background:#060; color:#fff; text-align:center; margin:0 25% 0 25%;}
a.btn2:hover,  .btn2:active{background:#666;}

/*pop up*/
#dialog{
 /* 非IE瀏覽用設定，使其長寬都延展至100% */
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
margin:0px;
background-color:#000000;
z-index:1;
text-align:center;
}
*html #dialog{position:absolute;}/*IE舊瀏覽器用，設定絕對定位*/

#msg, #msg2{   /*訊息區塊，背景設為白色，使用絕對定位*/
position:fixed;
top:0px;
left:0px;
background-color:#FFFFFF;
width:92%;
height:92%;
margin:2%;
padding:2%;
z-index:101;
overflow-x:hidden;
}
#msg ul, #msg2 ul{margin:0; padding:0; line-height:160%; font-weight:bold;}
#msg ul li, #msg2 ul li{margin-left:40px; font-weight:normal; color:#333;}
#msg ul li ul li, #msg2 ul li ul li{margin-left:20px; font-weight:normal; color:#333;}



/****************************************************************************************************************************************************************************************/
/*【輸入form】*/
.tab{ display:table; width:90%; height:auto; margin-top:10px; margin-bottom:0; margin-left:auto; margin-right:auto; overflow:hidden;}
.tab img{width:auto;}
.tabtitle{ width:20%; height:auto; font:0.875rem Arial,"微軟正黑體","Microsoft JhengHei",sans-serif; color:#222; line-height:20px; text-align:right; padding-right:15px;}
.tabbox{ width:80%; height:auto;}
.formstandard{ width:55%; font-size:0.875rem; font-family:Arial,"微軟正黑體","Microsoft JhengHei",sans-serif; color:#222; border:solid #ccc 1px; padding-top:7px; padding-bottom:7px; padding-left:7px; padding-right:7px; margin-top:3px; margin-bottom:3px; margin-left:0; margin-right:0;}
.formshort{ width:35%; font-size:0.875rem; font-family:Arial,"微軟正黑體","Microsoft JhengHei",sans-serif; color:#222; border:solid #ccc 1px; padding-top:7px; padding-bottom:7px; padding-left:7px; padding-right:7px; margin-top:3px; margin-bottom:3px; margin-left:0; margin-right:0;}
.formlong{ width:100%; font-size:0.875rem; font-family:Arial,"微軟正黑體","Microsoft JhengHei",sans-serif; color:#222; border:solid #ccc 1px; padding-top:7px; padding-bottom:7px; padding-left:7px; padding-right:7px; margin-top:3px; margin-bottom:3px; margin-left:0; margin-right:0;}

/*【按鍵button】*/
.button{ display:block; width:auto; height:auto; padding-top:10px; padding-bottom:10px; padding-left:30px; padding-right:30px; margin-left:auto; margin-right:auto; overflow:hidden; clear:both;}
.button ul{ text-align:right;}
.button li{ display:inline-block;}
.button li a{ display:block;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,dddddd+100 */
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-8 */
font-weight:bold; font-size:0.813rem; font-family:Arial,"微軟正黑體","Microsoft JhengHei",sans-serif; color:#222; text-align:center; border:solid #ccc 1px; border-radius:3px; padding-left:12px; padding-right:12px; margin-left:5px;}
.button li a:hover, .button li.on a{ color:#ff3000; text-decoration:none;}


/****************************************************************************************************************************************************************************************/
/*【footer】*/
.pagecenter.footer{
	border-top: solid 1px #398d18;
	width: 100%;
	padding-top: 80px;
	padding-bottom: 50px; }
.footerLimit{
	max-width: calc(50% + 20px);
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto; }
.footer .footerTitle{
	color: #222;
	font-size: 30px;
	font-weight: bold;
	line-height: 30px;
	margin-top: 0;
	margin-bottom: 0; }
.footer .infoTitle{
	color: #268426;
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
	padding-left: 15px;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	position: relative; }
	.footer .infoTitle:before{
		content: '';
		display: block;
		width: 2px;
		height: 90%;
		position: absolute;
		top: 0;
		left: 0;
		background: #47b136; }
.footerInfoGroup{
	display: flex;
	flex-wrap: wrap;
	margin-top: 0px;
	margin-bottom: 30px; }
	.footerInfoGroup .footerInfo{
		max-width: calc(100% / 3);
		width: 100%;
		margin-top: 20px; }
		.footer .footerInfo p{
			margin-top: 0;
			margin-bottom: 0;
			font-size: 16px;
			line-height: 24px; }
		.footer .footerInfo .placeName{
			color: #444;
			font-weight: bold; }
		.footer .footerInfo .info{
			font-size: 14px;
			color: #2b770d; }
	.footerInfoGroup .des{
		color: #444;
		font-size: 14px;
		margin-top: 0;
		margin-bottom: 0;
		margin-top: 20px; }
		.footerInfoGroup .des a{
			color: #37b937; }
.footerLinks{
	display: flex;
	justify-content: center; }
.footerLinks .linkItem{
	width: 35px;
	height: 35px; }
	.footerLinks .linkItem:nth-child(n+2){
		margin-left: 20px; }
	.footerLinks .linkItem a{
		display: block; }
	.footerLinks .linkItem img{
		display: block;
		width: 100%; }

/*for mobile*/
@media only screen and (max-width: 1366px){
.frameblock-m{width:100%;height:auto; padding:1%; margin:1%; border:1px solid#ccc; display:inline-block; left:0; background:#fff;}
.pagecenter-m{width:70%; height:auto; position:relative; margin:auto auto;margin-top:40px;}
.footerLimit{
	max-width: calc(70% + 20px);
}
@media only screen and (max-width: 1024px){
.menu{width:100%; height:auto; display:none;}
.menubtn{display:block; border:1px solid #fff; line-height:200%; width:20%; margin-top:5px; margin-left:5px; margin-bottom:10px; text-align:center;}
.menu ul li{display:block;}
.menu ul li a{width:50%; background:#393;}
.frameblock-m{width:47%;height:auto; padding:1%; margin:1%; border:1px solid#ccc; display:inline-block; left:0; background:#fff;}
.pagecenter-m{width:95%; height:auto; position:relative; margin:auto auto;margin-top:40px;}
.footerLimit{
	max-width: calc(95% + 20px);

}
@media only screen and (max-width: 768px){
.frameblock-m{width:100%;height:auto; padding:1%; margin:1%; border:1px solid#ccc; display:inline-block; left:0; background:#fff;}
.pagecenter-m{width:95%; height:auto; position:relative; margin:auto auto;margin-top:40px;}
.topimg-m{margin-top:50px; width:100%; height:auto; overflow:hidden; background:#FFF;}


.pagecenter.footer{
	text-align: center; }
.footer .infoTitle{
	display: none; }
.footerInfoGroup{
	margin-top: 0;}
	.footerInfoGroup .footerInfo{
		max-width: 400px;
		margin-left: auto;
		margin-right: auto; }
		.footerInfoGroup .footerInfo:nth-child(n+2){
			margin-top: 20px; }
}

@media only screen and (max-width: 480px){
	.footer .footerTitle{
		font-size: 26px;
		line-height: 26px;
}
@media (max-width: 420px) {
.pagecenter {
    width: 100%;
    height: auto;
    position: relative;
    margin: auto auto;
    margin-top: 40px;
    padding: 40px;
}
img {
    width: 100% !important;
}
}