/**
 *
 * Apply your custom CSS here
 *
*/

* {margin:0;padding:0; border: 0 none; position: relative;}
*, *:before, *:after {box-sizing: inherit;}
body {
	font-size:0.9vw;
	font-family: '微軟正黑體';
	color:#434343;
}
html{
  box-sizing: border-box;
  background: #FFFFFF;
  font-size: 1rem;
  color: #e6eff0;
  font-family: Roboto Slab;
}
a:hover {
	text-decoration: none;
}
.mainMenufnt {
	color:#ffffff;
}
.mainMenuRight div:nth-child(1n) {
	padding-top:0px;
}
.mainMenuRight div:nth-child(2n) {
	padding-top:15px;
}
.mainMenuRight div:nth-child(3n) {
	padding-top:15px;
}
.mainMenuRight div:nth-child(4n) {
	padding-top:15px;
}
.mainMenuRight font {
	cursor:pointer;
	color:rgba(255,255,255,1);
	transition: .3s;
}
.mainMenuRight font:hover {
	cursor:pointer;
	color:rgba(255,255,255,0.6);
	transition: .3s;
}
.outFrameTop .mainMenuLeft {
	background-color: #ffffff;
	float:left;
	margin-bottom:1px;
}
.outFrameTop .mainMenuRight {
	float:left;
	margin-bottom:1px;
}
.outFrameTop .mainMenuRight img {
	width:100%;
	height:auto;
}
#ListHead tr th p {
	padding:0px;
	margin:0px;
}
h1 {
  font-weight: normal;
  font-variant: small-caps;
  text-align: center;
}
.downleft {
	float:left;
	width:86%;
}
.downright {
	/*float:left;
	width:12%;*/
}
.downright button {
	margin-left:2px;
	width:100%;
	background-color: transparent;
	padding-top:10px;
	padding-bottom:10px;
	background-image:url(../images/download.png);
	background-position: center center; 
	background-repeat: no-repeat; 
	background-size: 15px auto;
}
.copyrightFrame {
	float:left;
	width:100%;
	padding-top:7px;
	padding-bottom:10px;
	background-color:#204a8e;
}
.copyrightFrame font {
	font-size:15px;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif'; 
	color:#ffffff
}
table * {height: auto; min-height: none;} /* fixed ie9 & <*/
table {
  background: #FFFFFF;
  table-layout: fixed;
/*  margin: 1rem auto;*/
  width: 100%;
  border-collapse: collapse;
  border-left: 1px solid #a0a0a0;
  border-right: 1px solid #a0a0a0;
  border-top: 0 none;
}
thead {
  background: #404858;
  text-align: center;
  z-index: 2;
}
thead tr {
/*  padding-right: 20px;*/
  z-index: 2;
	color:#ffffff;
}
th {
  border-right: 0px solid #a0a0a0;
  padding: .8rem 0.4rem;
  font-size: 0.9vw;
  font-weight: normal;
  font-variant: small-caps;
}
tbody {
  display: block;
/*  height: calc(50vh - 1px);*/
/*  min-height: calc(200px + 1 px);*/
  /*use calc for fixed ie9 & <*/
/*  overflow-Y: scroll;*/
  color: #434343;
}
tr {
  display: block;
  overflow: hidden;
}
tbody tr:nth-child(odd) {
  background-color: rgba(0,0,0,.05);
}
th, td {
/*  width: 15%;*/
  float:left;
}
td {
  padding: .4rem 0.4rem;
  border-right: 0px solid #a0a0a0;
  border-bottom: 0px solid #a0a0a0;
}
td:nth-child(2n) {color: #434343;}
[data-campo='中文名稱'] {
/*  width: 15%;*/
}  
th:last-child, td:last-child {
/*  width: 15%;*/
  border-right: 0 none;
}
.pageFrame .PageActive {
	background-color:#204a8e;
}
.pageFrame .PageActive font {
	color:#ffffff;
}
.outFrameTop {
	width:100%;
	margin-left:0%;
	margin-right:0%;
}
.outFrameTop div {
	padding-left:0px;
	padding-right:0px;
}
.outFrame {
	width:84%;
	margin-left:8%;
	margin-right:8%;
}
.outFrame div {
	padding-left:0px;
	padding-right:0px;
}
.fntCol {
	color:#FD0206;
}
.extraSkip {
	padding-top:15px;
	padding-bottom:15px;
}
.mainbg {
	width:100%;
	background-image: url(../images/mainbg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}
.maincover {
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
}
.topBars {
	width:100%;
	height:3px;
	background-color: #204a8e;
	position: absolute;
	z-index: 1000;
	margin-top:-81px;
}

.pageFrame {
	width:100%;
	padding-top:20px;
	padding-bottom:35px;
	height:100px;
	float:left;
	position: relative;
	z-index: 999;
}

.blueBars {
	width:100%;
	height:4px;
	background-color:#204a8e;
	float:left;
	margin-bottom:10px;
	margin-top:10px;
}

/*RWD選單*/
/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}
/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    float: left;
    margin-right: 0px;
}
/*Style for menu links*/
li a {
    display:block;
    width:100%;
    text-align: center;
    color: #fff;
    background: transparent;
    text-decoration: none;
	background-color: #204a8e;
    text-decoration: none;
}
/*Hover state for top level links*/
/*li:hover a {
    background: #19c589;
}*/
/*Style for dropdown links*/
li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #204a8e;
    color: #fff;
    text-decoration: none;
}
/*Hide dropdown links until they are needed*/
li ul {
    display: none;
}
/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
    text-decoration: none;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background:transparent;
    text-align: center;
    padding: 10px 0;
    display: none;
	text-align: right;
	padding-right:15px;
}
.show-menu font {
	font-size:32px;
	color:#204a8e;
}
.show-menu font:hover {
	font-size:32px;
	color:#204a8e;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
	padding-top:0px;
	background-color: #204a8e;
	width:100%;
}
.pagelistBt font {
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size:14px;
	color:#204a8e;
	line-height: 0px;
}
.pagelistBt {
	padding:0px;
	padding-top:7px;
	width:30px;
	height:39px;
	border:1px;
	border-style:solid;
	border-color:#cdcdcd;
	background-color:#ffffff;
	text-align: center;
	float:left;
	margin:1px;
	cursor: pointer;
	transition: .3s;
}
.pagelistBt:hover {
	border-color:#204a8e;
	cursor: pointer;
	transition: .3s;
}
.pageBt {
	padding:0px;
	padding-top:7px;
	width:30px;
	height:39px;
	background-color:#204a8e;
	text-align: center;
	float:left;
	margin:1px;
	cursor: pointer;
	transition: .3s;
}
.pageBt:hover {
	background-color:#000;
	cursor: pointer;
	transition: .3s;
}
.pageBt font {
	font-family: '標楷體';
	font-size:12px;
	color:#ffffff;
	line-height: 0px;
}
/*Responsive Styles*/
@media screen and (max-width : 768px){
/*tr {
  display: block;
  overflow: hidden;
}
th, td 
  float:left;
}*/
	input[type=checkbox]:checked ~ #menu{
		padding-top:20px;
		
	}
	#menu a {
		padding-left:5px;
		padding-right:5px
	}
    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
		margin-top:-5px;
    }
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
		padding:0px;
		margin:0px;
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
		padding-top:0px;
		padding-bottom:10px;
		margin-top:-5px;
		margin-bottom:0px;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}
/*RWD選單*/
@media (min-width:1366px) and (max-width:1920px){
	
	footer div {
		padding-top:20px;
		padding-bottom:20px;
	}
	#menu {
		border:0px;
		border-style:solid;
		border-color:rgba(255,255,255,0.25);
		float:left;
	}
	.mainbg {
		height:485px;
	}
	.mainMenufnt {
		font-size:18px;
	}
	.topBars {
		display:none;
	}
	.mainMenuRight ul li:first-child {
		padding-top:1.5%;
	}
	.mainMenuRight ul li {
		padding-top:3.1%;
		list-style: none;
		width:25%;
		text-align: center;
		float: left;
	}
	.topMenus {
		position: relative;
		z-index: 999;
		float:left;
		width:100%;
	}
	.logoSize {
		margin-top:15px;
		width:60%;
		height:auto;
	}
	.outFrameTop .mainMenuLeft {
		width:30%;
		height:90px;
	}
	.outFrameTop .mainMenuRight {
		width:70%;
		height:90px;
		background-color: #204a8e;
	}
}
@media (min-width:1024px) and (max-width:1366px){
	footer div {
		padding-top:18px;
		padding-bottom:18px;
	}
	#menu {
		border:0px;
		border-style:solid;
		border-color:rgba(255,255,255,0.25);
		float:left;
	}
	.mainbg {
		height:365px;
	}
	.mainMenufnt {
		font-size:15px;
	}
	.topBars {
		display:none;
	}
	.mainMenuRight ul li:first-child {
		padding-top:2.5%;
	}
	.mainMenuRight ul li {
		padding-top:4%;
		list-style: none;
		width:25%;
		text-align: center;
		float: left;
	}
	.topMenus {
		position: relative;
		z-index: 999;
		float:left;
		width:100%;
	}
	.logoSize {
		margin-top:15px;
		width:70%;
		height:auto;
	}
	.outFrameTop .mainMenuLeft {
		width:30%;
		height:86px;
	}
	.outFrameTop .mainMenuRight {
		width:70%;
		height:86px;
		background-color: #204a8e;
	}
	.outFrame {
		width:92%;
		margin-left:4%;
		margin-right:4%;
	}
}
@media (min-width:768px) and (max-width:1024px){
/*	.mainbg {
		height:400px;
	}*/
	#menu {
		border:0px;
		border-style:solid;
		border-color:rgba(255,255,255,0.25);
		float:left;
	}
	.mainMenufnt {
		font-size:14px;
	}
	.topBars {
		display:"";
	}
	.mainMenuRight ul li:first-child {
		padding-top:7px;
	}
	.mainMenuRight ul li {
		padding-top:5%;
		list-style: none;
		width:25%;
		text-align: center;
		float: left;
	}
	.topMenus {
		position: relative;
		z-index: 999;
		float:left;
		width:100%;
		margin-top:0px;
	}
	.logoSize {
		margin-top:22px;
		width:190px;
		height:auto;
	}
	.outFrameTop .mainMenuLeft {
		width:26%;
		height:80px;
	}
	.outFrameTop .mainMenuRight {
		width:74%;
		height:80px;
		background-color:#204a8e;
	}
	.outFrame {
		width:92%;
		margin-left:4%;
		margin-right:4%;
	}
}
@media only screen and (max-width:768px) {
	footer div {
		padding-top:5px;
		padding-bottom:5px;
	}
	#menu {
		border:5px;
		border-style:solid;
		border-color:rgba(255,255,255,0.25);
		float:left;
	}
/*	.mainbg {
		height:400px;
	}*/
	.mainMenufnt {
		font-size:14px;
	}
	.mainMenuRight ul li a {
		text-align: right;
	}
	#menu a {
		padding-right:15px;
		padding-left:15px;
		padding-top:4px;
		padding-bottom:4px;
	}
	br{
		display:none;
	}
	.topBars {
		display:"";
	}
	.topMenus {
		position:absolute;
		z-index: 999;
		width:100%;
		margin-top:-81px;
	}
	.logoSize {
		margin-top:15px;
		width:200px;
		height:auto;
	}
	.outFrameTop .mainMenuLeft {
		width:50%;
		height:80px;
	}
	.outFrameTop .mainMenuRight {
		width:50%;
		height:80px;
		background-color:transparent;
	}
.outFrame {
	width:94%;
	margin-left:3%;
	margin-right:3%;
}
  table {
    border-top: 1px solid ;
  }
  thead {display: none;}
  tbody {
    height: auto;
/*    max-height: 55vh;*/
  }
  tr {
    border-bottom: 1px solid rgba(0,0,0,.35);
  }
  tbody tr:nth-child(odd) {background: #FFFFFF;}
  tbody tr:nth-child(even) {background:#cad5ed;}
  td {
    display: block;
    width: 100%;
    min-width: 100%;
    padding: .4rem .5rem .4rem 40%;
    border-right: 0 none;
	  font-family: '微軟正黑體';
	  font-size:10px;
  }
  td:before {
    content: attr(data-campo);
    background: rgba(0,0,0,.07);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 37%;
    padding-left: .5rem;
    font-family: monospace;
    font-size: 100%;
	  padding-top:1.2%;
    font-variant: small-caps;
    line-height: 1.8;
  }
  tbody td:last-child {
    text-align: left;
    padding-left: 40%;
  }
	tbody td {
		
	  font-size:13px;
	}
  td:nth-child(even) {
    background: rgba(0,0,0,.04);
  }
}
a {color: #404858}