@charset "utf-8";

/*
 * PC Basic
 */

#mobilebar, #drawer, header > div { display: none; }

/* ----------------------------- main wrapper */

#wrapper {
	position:relative;
}

/* ----------------------------- header */

header {
	width: 100%;
	color: #fff;
	background: rgba(0,0,0,.7);
	box-shadow: 0px 1px 3px rgba(0,0,0,.5);
	padding: 16px 0;
	margin: 0 0 3px;
	position:fixed;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 12px 0;
}

/* mobilebar */
/* hide */

/* headbar */
#headbar {
	display: table;
	width: 960px;
	margin: 0 auto;
}
#headbar > h1,
#headbar > div {
	display: table-cell;
	vertical-align: middle;
}
#headbar > h1 {
	font-size: 2.0rem;
}
#headbar h1 span.telnum {
	font-family: "王漢宗細黑體繁";
}
#headbar > h1 img {
	height: 1.6rem;
	width: auto;
	margin: 0 .25em 0;
	vertical-align: initial;
}
#headbar > h1 img + span.telnum{
	font-size: 2.2rem;
}
#headbar h1 span:not(.telnum) {
	font-size: 1.6rem;
	font-family: "王漢宗細黑體繁";
	margin: 0 0 0 1em;
}

#headbar > div {
	text-align: right;
}
#headbar > div a {
	display: inline-block;
	background: rgba(255,255,255,.2);
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	vertical-align: middle;
	padding: 4px 8px;
	cursor: pointer;
	-webkit-border-radius: 4px;
    border-radius: 4px;
}
#headbar > div a i {
	display: inline-block;
	color: #fff;
	font-size: 2.0rem;
	line-height: 1;
	margin: 0 0.25em 0 0;
	vertical-align: middle;
}

/* ----------------------------- visual */

#visual { color:#fff; }

/* logo mark */
#visual img.logo {
	display: inline-block;
	width: 180px;
	height: auto;
	margin: 0 0 20px;
}

#visual.underlayer h1 {
	width: 960px;
	font-size: 3.2rem;
	text-align: center;
	margin: 0 auto;
}

/* underlayer for body */
#visual.underlayer {
	padding: 180px 0 120px;
}

/* ----------------------------- banner */

.banner {
	width: 100%;
	background: #fff;
	padding: 32px 0;
}
.breadcrumb + .banner {
	padding: 0 0 24px;
}
.banner ul {
	width: 980px;
	text-align: center;
	letter-spacing: -0.4em;
	margin: 0 auto;
}
.banner li {
	display: inline-block;
	letter-spacing: normal;
	padding: 5px;
}
.banner a {
	display: inline-block;
}
.banner img {
	width: auto;
	height: auto;
}

/* ----------------------------- breadcrumb */

.crumb {
	width: 100%;
	background: #fff;
	padding: 24px 0;
}
.crumb ul {
	width: 960px;
	margin: 0 auto;
}
.crumb li {
	display: inline-block;
	font-size: 1.2rem;
	color:#778899;
}
.crumb li:not(.current):after {
	content: ">";
	margin: 0 10px;
}
.crumb li a {
	color:#778899;
}

/* ----------------------------- main */


/* ----------------------------- footer */

footer {
	color: #fff;
	background: #3f3f3f;
	padding: 24px 0 32px;
	text-align: center; 
}
footer aside {
	font-size: 1.2rem;
	margin: 12px 0 0;
}