@charset "utf-8";
/* CSS Document */
*{ 
	box-sizing: border-box;
	border:0;
	font: 15px Arial, Helvetica, sans-serif, 微軟正黑體;
	/*line-height:18px;*/
	margin:0;
	padding:0;
	outline:0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}
header, section, footer { overflow:hidden; margin:0 auto;}
a{transition: all 0.3s ease-in-out 0s; color:inherit;}

address,caption,cite,code,dfn,em,th,var {font-weight: normal;font-style: normal;}
a,a:hover,img,div,input,background,li{text-decoration: none;outline: none;list-style: none;  /* for Firefox */border:none; hlbr:expression(this.onFocus=this.blur()); /* for IE */}

button { font-size:10px; text-transform:uppercase;}

img { max-width:100%; width:100%; height:auto;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*-----------------------------------------------------*/
header { width:100%; padding:1% 0 0;}
#logo { float:left; margin: 0 0 1% 2%;}
#logo a {}
#logo img { width:91px; display:inline-block; vertical-align:bottom; margin-right:10px;}
#logo p { display:inline-block; vertical-align:bottom;}
#logo p span { font-size:xx-large; font-weight:bold; text-transform:uppercase; line-height:37px; display:block;color: #036;}

header .btn-box { width:25%; float:right;margin: 2% 2% 0 0;}
#lang {  float: right; width: 100%; position:relative; z-index: 3;}
#lang a { padding: 0 6px; float: right;font-weight:bold; font-size:small;}
#lang li:nth-child(2) a, #lang li:nth-child(3) a { border-right:2px solid #F00;}
#lang a:hover { color:#F00; }



/*--search--*/
.search2 {
	position: relative;
	background: none;
	padding: 11px;
	margin:10px 0;
	border: 1px solid #A8A8A8;
	float: right;
    width: 100%;
}
.search2 input[type="text"] {
	outline: none;
	color: #555;
	background: none;
	font-size: 15px;
	border: none;
	width: 79.33%;
}
.search2 input[type="submit"] {
	background: url('../images/sprit-1.png') no-repeat 6px 6px #c4c4c4;
	padding: 11px 22px;
	border: none;
	cursor: pointer;
	position: absolute;
	outline: none;
	top: 0px;
	right: 0px;
}


/*Menu mobile first CSS*/
body{ -webkit-animation: bugfix infinite 1s; }

/*This fixes a chrome/webkit bug for older Android Browsers */
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } 

/*Required functional CSS don't change this bit
CSS styles are at the end! */

.mainMenu {
	display:block;
	position:relative;
	width:100%;
	margin:0;
	padding:0;
	float:left;
	}
	
#toggleMenu { 
	display: none;
	}

#toggleMenu:checked ~ ul {  
	max-height:100%; /*Make page height*/ 
	opacity:1;
	}
	
.mainMenu > ul {
	width:100%;
	margin:0;
	padding:0 2%;
	list-style:none;
	float:left;
    overflow-y: hidden;
	max-height:0;
	background: #036;
	}

.mainMenu li {
	margin:0;
	padding:0;
	white-space:nowrap;
	display:block;
	width:100%;
	float:left;
	}
	
.mainMenu a, .mainMenu a:visited {
	display:block;
	width:100%; /*required to make whole element clickable*/
	}

label.menuTitle {
	margin:0;
	display:block;
	cursor:pointer;
	background:url('../images/menu.png') center 50% no-repeat;
	background-size: 25px 20px; /*Make same size as your menu.png*/
	}


/*--footer--*/
footer {box-shadow: 0px -1px 10px #ccc;}
footer img { 
	float: left;
    width: 130px;
    margin-left: 5%;
}
footer ul { float: left; color: #FFF;    margin: 20px 0 0 20px;}
footer ul li {  line-height: 30px; color:#256BB1;}
footer ul li span { font-size:smaller; font-weight:bold; margin-right: 10px; color:#000;}
.copyright {
    text-align: center;
    clear: both;
    padding: 10px;
    color: #FFF;
	background-color: #036;
}
footer .seo { float:right; text-align:right; margin:20px 20px 0 0;}
footer .seo a { display:block; color:#256BB1; line-height:30px; text-transform:capitalize;}
footer ul li a:hover, footer .seo a:hover { text-decoration:underline; color:#FFF;}


@media screen and (min-width:768px) {
	label.menuTitle {
		display:none;
		}
	
	.mainMenu ul { 
		display:block!important;
		border:0;
		overflow:visible;
		max-height:100%!important; 
		}	

	.mainMenu ul li {
		width:auto; 
		display:inline; 
		border:0; 
		}
}


/*Menu Styling CSS - change the below to suit your site!*/
.mainMenu {text-align: center; width:100%;background: #071230;}

.mainMenu li {}

.mainMenu a, .mainMenu a:visited {
	color:#FFF;
	text-decoration:none;
	width:100%; /*Use 100% and box-sizing if not supporting ie7*/
	padding:5px 3%;
	background: none;
	font-size:medium;
    text-transform: uppercase;
	}
	
label.menuTitle {
	font-size:20px;
	width:100%;  /*Use 100% and box-sizing if not supporting ie7*/
	padding:20px 0;
	}
	
@media screen and (min-width:768px) {

	.mainMenu li {
		border:0;
		}
	
	.mainMenu a:hover  {
		color:#036;
		background-color:#ccc;
		}

	.mainMenu a, .mainMenu a:visited {
		padding:15px 25px;
		}
}

@media screen and (max-width:960px) {
	#logo p span { font-size: x-large; line-height:normal;}
	footer .seo { text-align: center; width: 100%; clear: both; margin:0 auto;}
	footer .seo a {  display: inline-block; border-right: 2px solid #F00; padding-right: 6px; }
	footer .seo a:last-child { border-right:none;}
}

@media screen and (max-width:760px) {
	#logo p { display:none;}
	header .btn-box { width: 60%;}
	.mainMenu a, .mainMenu a:visited { padding: 12px 0; font-size: large; border-bottom: 1px dotted #071230;}
	.mainMenu a:hover { background-color:rgba(0, 0, 0, 0.5); color:#2E53B9;}
	.mainMenu > ul { padding:0;}
	footer img { width:80px;}
}

@media screen and (max-width:560px) {
}

@media screen and (max-width:360px) {
	#logo { float: none; margin: 0 auto; text-align: center;}
	header .btn-box {
		width: 100%;
    	float: none;
    	padding: 3% 5%;
    	clear: both;
    	margin: 0;
	}
	#lang { padding-right:18%;}
}