/* center*/
.center {
    margin: auto;
    width: 90%;
    border: 0px solid black;
    padding: 0px;
}

/*table tr no border*/
table,th, td, tr  {
    border: 0px solid black;
    border-collapse: collapse;
}


table.size1{
	width:146;
	/*height:618;*/
	height:548;
	border: 0px solid black;
    border-collapse: collapse;
	background-color: #FFFFFF;
}


td.size1{
	border: 0px solid black;
	/*width: 1024;*/
	height: 110;
	/*height: 103;*/
	/*background-color:hotpink;*/
	
	/*background: #FFFFFF; /* For browsers that do not support gradients */
	/*background: -webkit-linear-gradient(#FFFFFF, #FF82C1); /* For Safari 5.1 to 6.0 */
	/*background: -o-linear-gradient(#FFFFFF, #FF82C1); /* For Opera 11.1 to 12.0 */
	/*background: -moz-linear-gradient(#FFFFFF, #FF82C1); /* For Firefox 3.6 to 15 */
	/*background: linear-gradient(#FFFFFF, #FF82C1); /* Standard syntax (must be last) */
	/*ffacd6*/
	/*#40B4E5*/
	background: #ffacd6; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#ffacd6, #FFFFFF); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#ffacd6, #FFFFFF); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#ffacd6, #FFFFFF); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#ffacd6, #FFFFFF); /* Standard syntax (must be last) */

}

td.size2{
/*	border: 1px solid black; */
	border: 1px solid grey;
	width: 146;
	/*height: 103;*/
	height: 110;	
	background-color: #FFFFFF
}
td.size2A{
/*	border: 1px solid black; */
	border: 1px solid grey;
	width: 183;
	/*height: 103;*/
	height: 110;	
	background-color: #FFFFFF
}

td.size3{
/*	border: 1px solid black; */
	border: 1px solid grey;
	background-color: #FFFFFF
	
}

	
	
tr.size0{
	border: 0px solid black;
	/*width: 183;*/
	height: 618;
	height: 110;
	background-color: #FFFFFF
}

tr.size1{
	border: 0px solid black;
	width: 146;
	/*height: 618;*/
	height: 548;
	background-color: #FFFFFF
}

tr.size2{
	border: 0px solid black;
	padding: 0 0 0 10 px;
}


/* griednt color */
		#grad1 {
			/*height: 200px;*/
			background: #D76496; /* For browsers that do not support gradients */
			background: -webkit-linear-gradient(#D76496, #FEA9A9); /* For Safari 5.1 to 6.0 */
			background: -o-linear-gradient(#D76496, #FEA9A9); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient#D76496, #FEA9A9); /* For Firefox 3.6 to 15 */
			background: linear-gradient(#D76496, #FEA9A9); /* Standard syntax (must be last) */
		}


/*background color & font*/
body {
    /*background-color: Hotpink;*/
	/*background-color: #DEBAC6;*/
	background-image: url("images/454.jpg");
	background-size:cover
    /*background-color: rgba(240, 240, 240, 0.8);*/
	/*#7A7D99 #ECEBBD #DEBAC6*/
	/*background-color: rgba(255, 187, 217, 0.8);*/
	
	/*font color copy from MOE statistics*/
	margin: 10px;
	padding: 0px;
	font-family:微軟正黑體, Verdana, Geneva, sans-serif;
	text-align: center;
    color:  #963555 ;
    font-size: 11pt;
}

/* footnote of the webpage */
.footer
{
		margin-top: 10px;
		font-size: 10pt;
}

img.map, map area{
    outline: none;
	/*outline: inline;*/
}

img.fit {
width: 100%;
height: 100%;
}
/* link color */
a{
    color: #4A708B;
	text-decoration:none
}

a.txt{
    color: white;
	text-decoration:none
}

.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: 100%;
}

.overlay1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  /*background-color: #008CBA;*/
  background-color: #0099E5;  
}

.container:hover .overlay1 {
  opacity: 1;
}

.overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #FF8080;
}

.container:hover .overlay2 {
  opacity: 1;
}

.overlay3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008080;
}

.container:hover .overlay3 {
  opacity: 1;
}
.overlay4 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  /*background-color: #008CBA;*/
  /*background-color: #6d5b97;  深紫*/
  background-color: #9b86be;  
  
}

.container:hover .overlay4 {
  opacity: 1;
}
.text {
  color: white;
  font-size: 20px;
  position: relative;
  top: 53px; 
  left: 71.5px;  
  text-align: center;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.textA {
  color: white;
  font-size: 20px;
  position: relative;
  top: 53px; 
  left: 91.5px;  
  text-align: center;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}


.overlay_up{
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay_up{
  bottom: 0;
  height: 100%;
}

.overlay_right {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay_right {
  width: 100%;
  left: 0;
}

.overlay_down {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay_down {
  height: 100%;
}


.overlay_left {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay_left {
  width: 100%;
}