@charset "utf-8";
/*******************************************************************************
 * Version 1.0 Release 2016.01.15;
 * Copyright 2016, "lucre"<lucrecia@titan-tech.com.tw>. All rights reserved.
 ******************************************************************************/
.Wrap {
	position: relative;
}
/*頁首*/
.Header {
	width: 100%;
	height: 44px;
	position:fixed;
	top:0;
	left: 0;
	right: 0;
	z-index:1000;
	background: #fff;
	border-bottom: 1px solid #cfd8dc;
}
/*頁首 - Logo*/
.Header .Logo {
	width: 108px;
	height: 24px;
	overflow: hidden;
	position: relative;
	z-index: 0;
	margin:11px auto 6px;
}
.Header .Logo > a {
	background: url("../../images/blogclass/logo.svg?t=20151230v01") no-repeat 0 center;
	background-size: 108px 24px;
	width: 108px;
	height: 24px;
	margin: 0 auto;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
/*頁首-選單列*/
.NavBarBox {
	width: 44px;
	height: 44px;
	float: left;
	position: relative;
	top: -44px;
	z-index: 0;
}
/*漢堡線*/
.Hamburg {
	background: transparent;
	cursor: pointer;
	position: absolute;
	right: 0;
}
.Hamburg span {
	display: block;
	width: 18px;
    height: 2px;
    margin: 0 0 3px;
    background: #cfd8dc;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.Hamburg:hover span,
.Hamburg:active span {
	background:#45c8ab;
}
.Hamburg.Active span {
	background: #45c8ab;
	display: block;
}
.Hamburg.Active span.Top {
	-webkit-transform: rotate(400deg) translate(2px, 5px);
	transform: rotate(400deg) translate(2px, 5px);
}
.Hamburg.Active span.Middle {
	opacity: 0;
}
.Hamburg.Active span.Bottom {
	-webkit-transform: rotate(-400deg) translate(2px, -5px);
	transform: rotate(-400deg) translate(2px, -5px);
}
.NavBarBox > a.BtnNav {
	width: 44px;
	height: 44px;
	display: block;
	padding: 19px 13px;
}
.NavBarBox > a.BtnNav > i {
	margin: 11px;
}
.NavBarBox > .NavBar {
	background: #607d8b;
	height: 100%;
	position: fixed;
	top: 44px;
	right: 0;
	left: 0;
	bottom: 0;
	visibility: hidden;
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-o-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
	opacity: 0;
	padding-top:33px;
}
.NavBarBox > .NavBar > li > a {
	color: #cfd8dc;
	text-decoration: none;
	line-height: 1.4;
	display: block;
	padding: 0.6875em 1em;/*11px/16px 16px/16px*/
}
.NavBarBox > .NavBar > li > a:hover, .NavBarBox > .NavBar > li > a:active {
	background: #4f6773;
}
.NavBarBox > .NavBar > li > a > i {
	margin: -4px 1.125em 0 0;/*0 18px/16px 0 0*/
}
.NavBarBox > a.BtnNav.Active + ul.NavBar {
	visibility: visible;
	opacity: 1;
}
/*頁尾*/
.Footer {
	background: #455a64;
	color: #8196a1;
	font-size: 0.875em;/*14px/16px*/
	line-height: 1.667;
	padding: 0.9375em;/*15px/16px*/
	width: 100%;
	height: 10.92857142857143em;/*153px/14px*/
	bottom: 0;
	left: 0;
	right: 0;
}
.Footer a {
	color: #8196a1;
	text-decoration: underline;
}
.Footer a[href^="tel"] {
	text-decoration: none;
}
.Footer > div {
	margin: 6px 0;
}
.GoTopBox {
	width:55px;
	height:55px;
	position:fixed;
	right:20px;/*10px/16px*/
	bottom:20px;/*11px/16px*/
	z-index:10;
}
.GoTopBox > a > i {
	margin: 14px;
}
/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	.Main {
		margin: 0 0 1.875em;/*0 0 30px/16px*/
	}
	/*頁尾*/
	.Footer {
		height: 5.857142857142857em;/*82px/14px*/
	}
	.Footer .Copyright > br {
		display: none;
	}
	.Footer .Service > div {
		display: inline-block;
		margin: 0 5px 0 0;
	}
}
/*如果使用者之視窗寬度>=1024px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1024px) {
	/**/
	.Inner {
		max-width: 940px;
		margin: 0 auto;
	}
	/*頁首*/
	.Header {
		height: 55px;
	}
	.Header > .Inner {
		margin: 12px auto;
	}
	.Header > .Inner:after {
		content: " ";
		display: block;
		clear: both;
		line-height: 0;
		height: 0;
		visibility: hidden;
	}
	.Header .Logo {
		width: auto;
		background: transparent;
		border:none;
		margin: 0 0 0 1.46484375%;/*0 0 0 15px/1024px*100*/
		position: static;
		float: left;
		height: 33px;
		width: 390px;
	}
	.Header .Logo > a {
		background:url("../../images/blogclass/logo_big.svg?t=20170810v1") no-repeat 0 0;
		background-size: 390px 33px;
		width: 390px;
		height: 33px;
		margin: 0;
	}
	/*導覽列*/
	.NavBarBox {
		background: #455a64;
		width: 100%;
		height: 50px;
		position: absolute;
		top: 55px;
		right: 0;
		left: 0;
	}
	.NavBarBox > a.BtnNav {
		display: none;
	}
	.NavBarBox > .NavBar {
		width: 940px;
		margin: 0 auto;
		visibility: visible;
		position: static;
		background: transparent;
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
		opacity: 1;
		padding-top:0;
	}
	.NavBarBox > a.BtnNav.Active + ul.NavBar {
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
	}
	.NavBarBox > .NavBar > li {
		height: 50px;
		display: inline-block;
		vertical-align: middle;
		margin: 0 12px 0 0;
	}
	.NavBarBox > .NavBar > li:nth-child(2) {
		margin-left:1.3671875%;/*14px/1024px*100*/
	}
	.NavBarBox > .NavBar > li > a {
		padding: 0.875em 1.25em;/*14px/16px 20px/16px*/
		color: #fff;
	}
	.NavBarBox > .NavBar > li > a:hover, .NavBarBox > .NavBar > li > a:active, .NavBarBox > .NavBar > li.Current > a {
		background: transparent;
		color: #f6ab00;
	}
	.NavBarBox > .NavBar > li.Current {
		border-bottom: 4px solid #f6ab00;
	}
	.NavBarBox > .NavBar > li > a > i {
		display: none;
	}
	/*頁尾*/
	.Footer > .Inner {
		margin: 6px auto;
	}
}