@charset "utf-8";

/* basestyle 
----------------------------------------------------------------------------*/
body,html{
    width: 100%; height: 100%;
    font-family: Arial, Segoe UI, Helvetica, '微軟正黑體', Microsoft JhengHei, Apple LiGothic, '蘋果儷中黑';
    font-size: 50px;
    background-color: #f5f5f5;
    line-height: 1.5;
}
body{ overflow-y: scroll;}
.wrapper{
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
	overflow: hidden;
}
.container{ width: calc(100% - 60px); max-width: 1170px; margin: auto; padding-left: 30px; padding-right: 30px;}


/* basic set
-----------------------------------------------------------------------------*/
p{ font-size: 0.36rem; line-height: 2.1111;}

/* header
------------------------------------------------------------------------------*/
header{
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 999;
	-webkit-transition: all 0.3s ease 0.25s;
	transition: all 0.3s ease 0.25s;
}
header.down{
	background-color: rgba(255,255,255,0.7);
}
header .container > .flexBox{
	padding-top: 0.55rem;
	padding-bottom: 0.6rem;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
h1{
	font-size: 0;
	color: transparent;
	text-indent: -9999px;
	width: 7rem; max-width: 350px;
}
nav{
	font-size: 0.4rem;
	line-height: 2;
	width: calc(100% - 7.5rem);
}
ul.flexBox{
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
nav li{
	margin-left: 0.4rem;
	border: 1px solid #000000;
	border-radius: 7px;
}
nav li a{
	color: #000000;
	width: 3rem;
	text-align: center;
}
nav li a:hover{
	color: #ffffff;
	background-color: #000000;
}
nav li a.active, nav li a.active:hover{
	color: #ffffff;
	background-color: #000000;
}


/* footer
--------------------------------------------------------------*/
footer{
	background-color: #535353;
	font-size: 0.36rem;
	line-height: 1.75;	
	color: #ffffff;
	text-align: center;
	padding: 1rem 0;
}