@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);  /*ΆΒΕι‘]«δ·½ΆΒΕι*/
@import url('bureau.css');
@import url('icons.css');
@import url('padding.css');
@import url('form.css');

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}





body {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: #333333;
	background-color: #EEEEEE;
	line-height: 1.7;
	font-family: Arial, "Microsoft JhengHei UI", "Microsoft JhengHei", "HeiTi TC", sans-serif;
}


img{behavior: url(../js/iepngfix.htc);} 





#container { width: 90% \9 }
@media only screen and (min-width: 200px) { 
#container { width: 96% ;font-size: 13px;}

.padding{
	padding: 10px;
}

}
@media only screen and (min-width: 900px) { 
#container { width: 94% ; font-size: 13px;}


.padding{
	padding:15px;
}

}

@media only screen and (min-width: 1300px) { 
    #container { width: 85%;font-size: 14px; }

.padding{
	padding: 20px;
}

}
@media only screen and (min-width: 1500px) { 
#container { width: 80%;font-size: 15px;}
	
.padding{
	padding-top: 40px;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
}
	

}






/* Header */
#container {
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;

}



#header {
	width: 100%;
	padding-bottom: 10px;
	text-align: left;
	float: left;
}
#top {
	width: 100%;
	text-align: left;
	float: left;

}

#logo{
	height: 100px;
	width: 220px;
	float: left;
}
#logo-text01{
	height: 15px;
	width: 270px;
	float: left;
	color: #777;
	text-align: center;
	padding-top: 35px;
	letter-spacing: 1px;
	font-weight:bold;
}
#logo-text02{
	height: 45px;
	width: 220px;
	float: left;
	font-size: 22px;
	font-weight: bolder;
	text-align: center;
	color: #777;
	padding-top: 0px;
	padding-bottom: 10px;
	letter-spacing: 1px;
}




#banner{
	height: 90px;
	width: 740px;
	float: left;
	text-align: right;
	letter-spacing: 1px;
	padding-top: 10px;
	padding-right: 10px;
}



#menu  {
	width: 100%;
	float: left;
	height: 45px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 8px;
	background-image: linear-gradient(to top, #006D73 0%, #008E95 100%);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	-o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);


}
#menu ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	display:flex;

}
#menu ul li {
	margin: 0px;
	list-style-type: none;
	flex: 1;


}
#menu ul li a {
	text-decoration: none;
	padding: 10px;
	display: block;
	color: rgba(255,255,255,0.8);
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
}
#menu ul li a:hover {
	color: #FFFFFF;
	height: 25px;


}
#menu ul li a.current{
	color: #FFFFFF;


}







#menu2  {
	width: 100%;
	float: left;
	height: 45px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 8px;
	background-image: linear-gradient(to top, #3B5998 0%, #5678BE 100%);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	-o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);


}
#menu2 ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	display:flex;

}
#menu2 ul li {
	margin: 0px;
	list-style-type: none;
	flex: 1;


}
#menu2 ul li a {
	text-decoration: none;
	padding: 10px;
	display: block;
	color: rgba(255,255,255,0.8);
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
}
#menu2 ul li a:hover {
	color: #FFFFFF;
	height: 25px;


}
#menu2 ul li a.current{
	color: #FFFFFF;


}








#search {
	height: 37px;
	width: 270px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	float: left;

}

#search input{
	height: 25px;
	border: 0px solid #FFFFFF;
	background-image: url(../images/search-bg.jpg);
	background-repeat: repeat;
	background-position: center center;
	width: 170px;
	padding-top: 10px;
	float: left;
	padding-left: 20px;
	padding-bottom: 2px;
	color: #4073C6;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;


}




/* content */


#content{
	width: 100%;
	float: left;
	border-radius: 8px;
	overflow: hidden;
	background: #FFFFFF;
	background-image: linear-gradient(to top, #EEEEEE 0%, #FFFFFF 100%);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	-o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.13);
	 min-height: 450px;
	 margin-top: 20px;
	 padding: 20px;
}


h3{
	font-size: 20px;
	text-align: center;
	width: 100%;
	color: #000;
	margin: 0px;
	padding: 0px;
}

h3:after {
    display: inline-block;
    margin: 0 0 8px 20px;
    height: 1px;
    content: " ";
    text-shadow: none;
    background-color: #999;
    width: calc(50% - 60px);
}
h3:before {
    display: inline-block;
    margin: 0 20px 8px 0;
    height: 1px;
    content: " ";
    text-shadow: none;
    background-color: #999;
    width: calc(50% - 60px);
}






#left{
	width: 20%;
	float: left;
	margin: 0px;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;


}







#submenu{
	float: left;
	width: 100%;
	text-align: left;
	margin: 0px;
	letter-spacing: 1px;
	color: #666666;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}

#submenu div{
	float: left;
	margin: 0px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #548A14;
	font-size: 20px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
#submenu ul{
	list-style-type: none;
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
}


#submenu ul li{
	width: 100%;
	float: left;
	margin: 0px;
	font-weight: bold;
	color: #000000;
	font-size: 18px;
	line-height: 40px;

}
#submenu ul li a{
	float: left;
	text-decoration: none;
	color: #333333;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 20px;
	font-size: 15px;
	font-weight: normal;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #E6E6E6;
	background-image: url(../images/menu-T.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	line-height: 25px;
}
#submenu ul li a:hover,#submenu ul li a:active{
	float: left;
	color: #000000;

}

#submenu ul li a.current{
	font-weight: bold;
	color: #E17A64;



}









#main{
	margin: 0px;
	float: left;
	width: 100%;

}
h1{
	font-size: 24px;
	margin: 0px;
	font-weight: normal;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
}

h3{
	font-size: 18px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 30px;
	margin-bottom: 0px;
	margin-left: 0px;
	letter-spacing: 1px;

}
h4{
	font-size: 15px;
	margin: 0px;
	padding: 0px;
}

#main div{
	padding-top: 5px;
	padding-bottom: 5px;

}




#main-menu{
	width: 720px;
	height: 20px;
	letter-spacing: 1px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}

#main-menu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	float: left;
	height: 21px;
	width: 715px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #4073C6;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #4073C6;

}
#main-menu ul li {
	float: left;
	list-style-type: none;
	text-align: center;
	margin: 0px;
	padding: 0px;
	width: auto;

}
#main-menu ul li a:link,#main-menu ul li a:visited{
	color: #0066CC;
	text-decoration: none;
	height: 15px;
	width: auto;
	padding-top: 5px;
	float: left;
	background-color: #ECF0F3;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #4073C6;
	border-right-color: #4073C6;
	padding-right: 20px;
	padding-left: 20px;

}

#main-menu ul li a:hover {
	text-decoration: none;
	float: left;
	font-weight: bold;
	background-color: #FFFFFF;

}


#main-menu ul li a.current {
	text-decoration: none;
	font-weight: bold;
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-color: #4073C6;
	border-right-color: #4073C6;
	border-bottom-color: #FFFFFF;

}













/* footer */

#footer {
	width: 100%;
	text-align: center;
	line-height: 1.5;
	padding-top: 30px;
	padding-bottom: 30px;
	float: left;
}





#page {
	TEXT-ALIGN: center;
	width: 100%!important;
	letter-spacing: 1px;
	margin: 0px;
	padding-top: 10px;
	font-weight: bolder;
	padding-bottom: 10px;
}
#page a {
	PADDING-RIGHT: 3px;
	PADDING-LEFT: 3px;
	PADDING-BOTTOM: 3px;
	PADDING-TOP: 2px;
	TEXT-DECORATION: none;
	letter-spacing: 1px;
	font-weight: bold;
}
#page a:hover {
	COLOR: #0B9F9F;
}
#page a:active {
}
#page span.current {
	PADDING-RIGHT: 5px;
	PADDING-LEFT: 5px;
	FONT-WEIGHT: bold;
	PADDING-BOTTOM: 2px;
	COLOR: #669900;
	MARGIN-RIGHT: 2px;
	PADDING-TOP: 2px;
	font-size: 16px;
}
#page-focus{
	float: left;
	width: 120px;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 2px;
	height: 20px;
	padding-top: 10px;
}






.left-icon{
	float: left;
	margin-top: -12px;
	margin-right: 8px;
}
.color-1{
	color: #2E7990;
	font-weight: bold;

}
.color-2{
	color: #DA8025;


}

.color-3{	color: #FF3300;}

.font-15{
	font-size: 15px;
}
.font-18{
	font-size: 18px;
}

/* signin */
#login{
	height: 300px;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 120px;




}
#signin{
	background-image: url(../images/signin-bg.jpg);
	background-repeat: no-repeat;
	padding-left: 220px;
	padding-top: 20px;
	padding-bottom: 10px;
	color: #1C2835;
	width: 380px;
	height: 190px;



}
#signin h3{
	font-size: 30px;
	color: #2D455F;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;



}
#signin div{
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;




}
#signin input{
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #003333;



}






.leftimg {
	float: left;
	border: none;
	margin-right: 30px;
}
.rightimg {
	float: right;
	border: none;
	clip:  rect(auto,auto,auto,auto);
}






.list{
	background-image: url(../images/line.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	padding-top: 5px;
	padding-bottom: 5px;
	float: left;
	width: 720px;
	font-size: 13px;
	line-height: 1.5;
}
.ps{
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #D56F51;
	color: #D56F51;

}

















.datatable {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 5px;

}

.datatable th {
	color: #333333;
	background-color:#CCCCCC;
	text-align:center;
	border: 1px solid #CCCCCC;
	font-weight: bold;
	padding: 8px;
	letter-spacing: 1px;


}
.datatable td {
	color: #333333;
	text-align: left;
	background-color: #FFFFFF;
	border: 1px solid #DDD;
	padding: 8px;

}

.datatable tr.altrow  {	background-color: #DFDFE1;}


.datatable-table {
	border-collapse: collapse;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.datatable-table td {
	height: 20px;
	color: #333333;
	text-align: left;
	background-color: #FFFFFF;
	padding: 10px;
	font-size: 13px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}




/*end table*/








.print{
	text-align: right;
}



legend{

	color: #FFFFFF;
	font-weight: bold;
	background-color: #1864C0;
	letter-spacing: 1px;
	padding-top: 4px;
	padding-right: 15px;
	padding-bottom: 4px;
	padding-left: 15px;
	border-radius:4px;
	margin-left: 5px;
}
fieldset{
	border: 1px solid #1864C0;
	margin-top: 10px;
	margin-bottom: 20px;
	border-radius:4px;
	background-color: #FFFFFF;
	padding: 20px;
}











.box {
	overflow-x: auto;
	width: 100%;
	background: #FFFFFF;
	border-radius: 0px 0px 7px 7px;
	background: #FFFFFF;
	-moz-box-shadow: inset 0 15px 15px -15px rgba(255, 255, 255, .1), 0 0 20px rgba(0, 0, 0, .1);
	-webkit-box-shadow: inset 0 15px 15px -15px rgba(255, 255, 255, .1), 0 0 20px rgba(0, 0, 0, .1);
	box-shadow: inset 0 15px 15px -15px rgba(255, 255, 255, .1), 0 0 20px rgba(0, 0, 0, .1);
	padding: 10px;


}


.btn-signup{
	padding:4px;
	background-color: #008E95;
	color: #ffffff;
	border-radius:15px;
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s linear, box-shadow 0.15s linear;
	margin-bottom: 10px;
	display: block;
	width: 170px;
}

.btn-signup:hover{
	color: #ffffff;
	box-shadow: 0 8px 0px rgba(0, 0, 0, 0);
	transform: translateY(2px);

}