﻿@charset "utf-8";
/* CSS Document */

html, body{
	margin:0;
	height: auto;
	font-size: medium;
	font-family: "微軟正黑體";
	overflow-x:hidden;  /*........消除掉主主選單才能正常出現..............*/
		    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
	}

img{border:0}
table{font-family: "微軟正黑體"; 
	letter-spacing:1px;
	line-height: 135%;
	width:100%;
	table-layout:fixed;
	}
	table img{ max-width:100%; height:auto; }
	
.TableList{width:100%; background:#7cadff; border-spacing:1px; table-layout:auto;}
           .TableList td{padding:2px; text-align:center; background:#FFF; }
		   .TableList th{padding:2px; text-align:center; background:#3b77b8; color:#FFF;}
.TableListLeft{width:100%; background:#85dfff; border-spacing:1px; table-layout:auto;}
           .TableListLeft td{padding:2px; text-align:left; background:#FFF; }
		   .TableListLeft th{padding:2px; text-align:left; background:#096c8f; color:#FFF;}
		   
td{padding: 2px; text-align:left;}

hr{display: block;
   margin-top: 0.1em;
   margin-bottom: 0.1em;
   margin-left: auto;
   margin-right: auto;
   border-style: inset;
   border-width: 1px;}

a{color:#000;}
a:link{ color: #000; text-decoration:none;}
a:visited{color:#000; }
a:hover {
	text-decoration: none;
	outline:3px dashed #ffbf47;
}
a:focus {
	text-decoration: none;
	outline:3px dashed #ffbf47;
}

a.sr-only {
	float: left
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0
}
.sr-only-focusable:active, .sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto
}

input:focus {
    background-color: yellow;
}
text:focus {
    background-color: yellow;
}
textarea:focus {
    background-color: yellow;
}

input[type=text]{
	width:100%;
	border:1px solid #CCC;
	border-radius:6px;
	font-size:100%;
	vertical-align:middle;
	padding:2px;
	color:#666;}
	textarea {
		width:100%;
		border:1px solid #CCC;
		border-radius:6px;
		font-size:100%;
		vertical-align:middle;
		padding:2px;
		color:#666;}
	select{
		border:1px solid #CCC;
		border-radius:6px;
		font-size:100%;
		vertical-align:middle;
		padding:2px;
		color:#666;}
	input[type=password]{
		width:100%;
		border:1px solid #CCC;
		border-radius:6px;
		font-size:100%;
		vertical-align:middle;
		padding:2px;
		color:#666;}

h1{
    color:#0072dc;
    line-height:100%;
    margin:0;
    letter-spacing:2px;
    text-transform:capitalize;
    }

h2{ color:rgb(83,148,220);} 
h3{ color:rgb(83,148,220);} 

h5 a:link {color:#333;text-decoration: none;}
h5 a:visited {color:#333;} 
h5 a:hover {color:#333;text-decoration: underline;}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;}
	.video-container iframe,
	.video-container object,
	.video-container embed {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;}

/*p{ 
	font: 12px arial, helvetica, sans-serif;
	margin:0; 
	}*/

.Wapper{ 
	width:100%; 
	height:auto;
	max-width:1420px;
	margin:0 auto;
	padding:0;

/*	border:1px solid #099;
*/	}
	
.Header{
	width:100%;
	max-width:1250px;
	height:auto;
	margin:0 auto;
	padding:0;
	background:url(../images/hesdbg.jpg)
	}
	
.Logo{
	width:auto;
	height:auto;
	display:inline-block;
	}
	.Logo img{ width:390px; height:auto;}

.HeadRightBox{
	width:68%;
	height:auto;
	text-align:right;
	display:inline-block;
	vertical-align:top;
	}

.Blind{ width:auto; display:inline-block}

.HeadMenu{
	width:95%;
	list-style-type:none;
	text-align:right; 
	display:inline-block;
	margin:5px 0 20px 0;
	padding:15px 0;
	}
	.HeadMenu li{
		color: #fff; 
		margin:0 2px;
		display: inline-block; 
		} 
		.HeadMenu li a:link {color:#fff; text-decoration: none;}
		.HeadMenu li a:visited {color:#fff;} 
		.HeadMenu li a:hover {color: #F90 ;text-decoration: underline;}
		.HeadMenu li:after {content: "│"; display:inline; margin:0 0 0 10px;}
		.HeadMenu li:last-child{color: transparent; margin:0 ;}

.Temperature{ width:25%; color:#FFF; display: inline-block;}

.ChangeWordSize{
	width:24%;
	height:auto;
	margin:0;
	padding:1px;
	letter-spacing:2px;
	color:#FFF;
	display:inline-block;
	}
	.ChangeWordSize a{ border:#FFF 1px solid; text-align:center}
	.ChangeWordSize a:link{ color: #fff; text-decoration:none;}
	.ChangeWordSize a:visited{color:#FFF; }
	.ChangeWordSize a:hover{ color: #F30;}
	
.Search{
	width:38%;
	height:auto;
	text-align:center;
	margin:0 20px 0 0;
	display:inline-block;
	}
	.Search input{
		width:200px;
		background-color:#fff;
		border:1px solid #CCC;
		padding:3px;
		font-size:100%;
        vertical-align: top;
		}
.Search .SearchButton{
	background:rgb(20,91,159);
	color:#FFF;
	padding:4px;
	border-radius:5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	}
	.Search .SearchButton:link{ color: #fff; text-decoration:none; padding: 3px 5px; vertical-align: middle;  }
	.Search .SearchButton:visited{color:#fff; }
	.Search .SearchButton:hover{background:#fff; color:#000;}

.Search a{
	color:#000;
	padding:2px;
	}

.Search a:link{ color: #000; text-decoration:none;}
.Search a:visited{color:#000; }
.Search a:hover{color: #F00;}

.mainitem{
	width:100%;
	max-width:1250px;
	height:auto;
	text-align:center;
	margin:0 auto;
	background:#FFF;
	}
	
.HomePageContent{
	width:100%;
	max-width:1250px;
	height:auto;
	margin:0 auto;
	padding:0;
	}
.BlindContent{
	width:100%;
	text-align:left;
	margin:0 auto;
	display:inline-block}
	
.Horse{
	width:75%;
	height:auto;
	display:inline-block;
	text-align:right;
	}

/*.HomePageFlight{
	width:64%;
	height:auto;
	margin:0 8px 0 10px;
	display:inline-block;
	box-shadow: 3px 3px 5px rgba(20%,20%,20%,0.3);
	vertical-align:top;
	text-align:center;
	background:#FFF;
	border:#ff9e19 1px solid;
	}
	.HomePageFlight table{word-break:break-all; letter-spacing:0; line-height:100%; background:#D0E5F9; width:100%; border:0px; border-spacing:1px;}
	.HomePageFlight table th{ color:#2677CF; background:#FFF; padding:3px;}
	.HomePageFlight table td{ color:#5d5d5d; background:#FFF; padding:3px; text-align:center}*/
	
.HomePageNewsAndButton{
	width:32%;
	height:auto;
	display:inline-block;
	margin:0 0 0 20px;
	vertical-align:top;
/*	border:#ff9e19 1px solid;
*/	}
	
.HomePageNews{
	width:100%;
	height:auto;
	display:inline-block;
	vertical-align:top;
	}
	.HomePageNews div {
		width:90%;
		height:auto;
		padding:0;
		margin:0;
		margin-left:5px;
		color:red;
		font-weight:bold;
		}
	.HomePageNews ul {
		width:100%;
		height:auto;
		margin:4px auto;
		padding:0;
		list-style-type:none;
		}
    .HomePageNews ul li:last-child{ border:0; }/*可以讓最後一條虛線不見*/

	.HomePageNews ul li{
		color:#ffa300;
		padding:0 3px;
		border-bottom:1px dashed #CCC;
		}

	.HomePageNews ul li a{
		width:68%;
		display:inline-block;
		height: 1.2em;
		overflow:hidden;
/*		vertical-align:middle;
*/		color: #4d4d4d;
		padding:0;
		margin: 0 0 0 5px;
		text-decoration: none;
/*		text-overflow: -o-ellipsis-lastline;
*/		}

/*	.HomePageNews a{
		color: #4d4d4d;
		padding:0;
		margin: 0 0 3px 10px;
		text-decoration: none;
		}
*/	.HomePageNews a:hover {color:#ffa300;text-decoration: underline;}
	.HomePageNews span{color: #f97e07; margin:0 0 0 3px;}

.ThreeButton{
	width:100%;
	margin:15px auto auto auto;
	text-align:center;
	}
	.ThreeButton img{margin:3px; }
	.ThreeButton img:hover{-webkit-filter: saturate(1.8);}

/*.Thirteen{
	width:100%;
	height:auto;
	max-width:1250px;
	margin:30px auto auto auto;
	text-align:center;
	vertical-align: bottom;
	border:#366 1px solid;
	}
	.Thirteen a{ 
	width: 89px;
	height:140px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	}
	.Thirteen img{ width:90%; height:auto;}
	.Thirteen a:hover { width:9%; height:auto}*/

.HomePageBanner{
	width:100%;
	height:auto;
	margin:10px auto;
	background: #e9e7e7;
	text-align:center;
	}
	.HomePageBanner a{
		width:126px;
		height:auto;
		margin:17px auto 10px 16px;
		display:inline-block;
		}
		.HomePageBanner img:hover{-webkit-filter: saturate(1.8);}
		
.BannerButton {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 20px 4px;
    cursor: pointer;
	border-radius:10px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    }
	.BannerButton:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
	
.under{
	width:100%;
	max-width:1250px;
	margin:0;
	padding:0;
	}

.FooterBox{
	width:100%;
	height:auto;
	padding:10px;
	background:#ebfdc1;
	text-align:center;
	display:inline-block;
	}
	.FooterLine{ width:100%; height:4px; background: #d8f693; margin:3px auto; display:inline-block}
	.FooterBox ul{
		width:15%;
		text-align:left;
		margin:0 5px 0 0;
		display:inline-block;
		vertical-align:top;
		}
	.FooterBox ul li{margin:3px 0;}
	.FooterBox ul li a{color: #7a7979;}
	.FooterBox ul li a:hover{ color: #F60; text-decoration:underline;}
	.FooterBox .FooterFirst a{color:#3e9f40; font-weight:bold;}
	.FooterBox .FooterFirst a:hover{color: #F60; text-decoration:underline;}
	
.Inscription{
	width:100%;
	height:auto;
	padding:1px;
	}
	.InscriptionItem{
		width:80%;
		margin:0 auto 5px auto;
		text-align:center;}
	.InscriptionItem a{color:#33bd4c; margin:0 0 0 10px;}
	.InscriptionItem a:hover{color: #F60; }
	.InscriptionInfo{width:75%;	height:auto; margin:0 8px; display:inline-block;}
	.InscriptionInfo a{color:#1d832f;}
	.InscriptionInfo a:hover{color:#F60;}
	.Inscription span{ margin:0 30px 0 0; color: #666	}
	
.InscriptionRight{
	width:auto;
	height:auto;
	display:inline-block;
	vertical-align:top;
	text-align: center;
	}
.Path{
	width:100%;
	text-align:left;
	margin:0 0 5px 0;}
.content{
	width:100%;
	max-width:1250px;
	margin:0 auto;
	padding:0;
	opacity:1;
	}

.MainContentWapper{
	width:75%;
	margin:4px 0 0 15px;
	display:inline-block;
	vertical-align:top;}
.MainContent{ 
    width:100%;
	margin:15px 0 0 0;
	text-align:left;}
	.MainContent ul{list-style-type: square; margin:auto auto auto 18px;}
	.MainContent ol{list-style-type: decimal; margin:auto auto auto 18px;}

/*	.MainContent img{ height:auto; max-width:700px;}
*/	/*.MainContent span{ float:left;}*/
	.MainContent .MainContentDefpage img{ height:auto; max-width:700px;}
	
.ContentItemWapper{
	width:23%;
	margin:4px 0 0 0;
	display:inline-block;
	vertical-align:top;
	text-align:center;}

.title{
	width:100%;
	height:auto;
	margin:5px 0;
	padding:10px;
	text-align:left;
	/*直向漸層*/
	background-image: -webkit-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
background-image: -moz-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
background-image: -o-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
background-image: linear-gradient(to bottom, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
	border-top:#dbdbdb 1px solid;
	}
	.title img{ vertical-align:middle;}
	.title h2 {
		color:#000;
		display:inline-block;
	}
	.title span{
		vertical-align: middle;
		margin:0 0 0 5px;
		font-size:130%; font-weight: bold;
		display:inline-block;}
.MultiBar{ width:100%; text-align:right;}
    .MultiBar img{ display:inline-block; margin:0 0 0 3px;}
	
.RightItemTitle{
	width:100%;
	height:auto;
	margin:5px 0 0 0;;
	padding:10px;
	text-align:left;
	/*直向漸層*/
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff5e7+0,a6670f+20,a6670f+80,fff5e7+100 */
	background: #fff5e7; /* Old browsers */
	background: -moz-linear-gradient(top, #fff5e7 0%, #a6670f 20%, #a6670f 80%, #fff5e7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fff5e7 0%,#a6670f 20%,#a6670f 80%,#fff5e7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fff5e7 0%,#a6670f 20%,#a6670f 80%,#fff5e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff5e7', endColorstr='#fff5e7',GradientType=0 ); /* IE6-9 */
	border-top:#fabb65 1px solid;
	}
	.RightItemTitle span{
		color:#fff;
		vertical-align: middle;
		margin:0 0 0 5px;
		font-size:120%; font-weight: bold;}
.ContentItem ul{
	list-style-type: none;
	width:100%;
	padding:0 0 10px 0;
	margin:0 0 20px 0;
	text-align:left;
	border-bottom:1px #fabb65 solid;}
	.ContentItem ul li{
        padding:8px 0 6px 8px;
        border-bottom:1px solid #e1e1e1;}
	.ContentItem ul li:last-child{ border:0; }
	.ContentItem ul li a{ margin:0 0 0 5px;}
	.ContentItem ul li:hover{ background: #ffeed1;}
	.ContentItem ul li a:hover{ color: #000;}

.BulletinsSearch{ width:100%; height:auto; display:inline-block; text-align:center;}
                 .BulletinsSearch input[type=text]{ width:200px;}


.imageworkBox{
	text-align:center;}
.imagework{
	padding:2px;
	width:250px;
	display:inline-block;
	margin:10px 10px 0 10px;
	border:#CCC 1px solid;
	text-align:center;}
	.imagework img{width:50%;}

.BannerMore{text-align:center}
			.BannerMore a{ width:126px; height:auto; display: inline-block; margin:0 0 7px 7px}
			
.FlashNone{ display:inline-block;}


/*RWD*/
@media screen and (max-width: 1235px) {
.Logo{ width:100%; text-align:center;}
.HeadRightBox{ margin:0 auto; width:98%;}
.HeadMenu{width:95%; text-align:center; margin:0 auto;}
.TCS{ text-align:center;}
.HomePageFlight{width:98%; margin:0 0 0 5px;}
.HomePageNewsAndButton{width:98%; margin:10px 5px;}
.HomePageNews ul li a{width:85%;}
.Thirteen{height:220px;}
}

@media screen and (max-width: 1120px) {
.InscriptionInfo{width:98%;}
.InscriptionRight{width:98%;}
.ChangeWordSize{display: none;}
.Thirteen{height:auto;}
.HomePageNews ul li a{width:85%;}
.Thirteen a:hover { width:12%; height:auto}
}

@media screen and (max-width: 1000px) {
.ContentItemWapper{/*width:100%; margin:0;*/ display:none;}
.MainContentWapper{width:100%; margin:0;}
.ContentItem ul{padding:0 0 5px 0; margin:0; border-bottom:0px;}
}
.1111{ vertical-align:top}



@media screen and (max-width: 890px) {
.FooterBox ul{width:30%;}
.Blind{display: none}
.BlindContent{ display:none;}
.HomePageNews ul li a{width:81%;}
.Thirteen a:hover { width:12%; height:auto}
.Horse{display:none;}
.FooterBox{display:none;}
.FooterLine{display:none;}
.Search{display:none;}
.Temperature{display:none;}
.HomePageBanner{display:none;}
.FlashNone{ display:none;}

}

@media screen and (max-width: 785px) {
.Temperature{ width:35%;}
.Search{width:58%; }
.Thirteen a:hover { width:15%; height:auto}
.MultiBar{ display:none;}

}

@media screen and (max-width: 680px) {
.HomePageNews ul li a{width:70%;}
.Thirteen{height:auto;}
.Thirteen a:hover { width:17%; height:auto}
.TableList{word-break:break-all;}

}

@media screen and (max-width: 500px) {
.Thirteen a:hover { width:21%; height:auto}
}

@media screen and (max-width: 450px) {
.HomePageNews ul li a{width:60%;}
.FooterBox ul{width:40%;}
.Thirteen a:hover { width:25%; height:auto}
.BulletinsSearch{ display:none;}


}

@media screen and (max-width: 380px) {
.Logo img{ width:100%; height:auto;}
.Thirteen a:hover { width:30%; height:auto}

}