@charset "utf-8";
/*******************************************************************************
 * Version 1.0 Release 20151230;
 * Copyright 2015, "keri"<keri@dotmore.com.tw>. All rights reserved.
 ******************************************************************************/
.Wrap {
	position: relative;
	min-height: 100%;
}
/*頁首*/
.Header {
	width: 100%;
	height: 44px;
	background: #45c8ab;
	position:fixed;
	top:0;
	left: 0;
	right: 0;
	z-index:1000;
}
.Inner {
	height: 44px;
}
/*頁首 - Logo*/
.Header .Logo {
	width: 100%;
	height: 44px;
	background: #45c8ab;
	border-bottom: 1px solid #cfd8dc;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.Header .Logo > a {
	background: url("../images/logo.svg?t=20170810v01") no-repeat 0 center;
	background-size: 315px 30px;
	width: 148px;
	height: 44px;
	margin: 0 auto;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
/*頁首-前往BloggerAds按鈕*/
.Header .GoTo {
	width: 38px;
	height: 44px;
	position: absolute;
	top: 0;
	right: 2.375em;/*38px/16px*/
	z-index: 0;
}
.Header .GoTo > a {
	display: block;
	width: 38px;
	height: 44px;
	text-decoration: none;
}
.Header .GoTo > a > i {
	margin: 10px 6px;
}
.Header .GoTo > a > span {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width: 0;
	height: 0;
}
/*頁首-選單列*/
.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: #fff;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.Hamburg.Active span {
	background: #455a64;
}
.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;
	padding: 16px 13px;
	display: block;
}
.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;
}
.NavBarBox > .NavBar > li > a {
	color: #fff;
	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;
}
/*頁首 - 搜尋吧*/
.SearchBarBox {
	clear: both;
	position: relative;
	top: -44px;
}
.SearchBarBox > a.BtnSearch {
	width: 38px;
	height: 44px;
	position: absolute;
	top: -44px;
	right: 0;
}
.SearchBarBox > a > i {
	margin: 11px 10px 11px 6px;
}
.SearchBarBox > .SearchBar {
	width: 100%;
	position: fixed;
	top: -170px;
	z-index: -1;
}

.SearchBarBox > .SearchBar form {
	text-align: center;
	background: #fff;
	padding: 0.625em;/*10px/16px*/
	border: 1px solid #d8e1e5;
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
}
.SearchBarBox > .SearchBar form > input[type=search] {
	margin: 0 0 0.625em;/*0 0 10px/16px*/
}
.SearchBarBox > .SearchBar form > button.BtnClear {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: -1;
}
.SearchBarBox > .SearchBar form > button.BtnClear.Active {
	z-index: 1;
}
.SearchBarBox > a.BtnSearch.Active + .SearchBar {
	/*-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;*/
	top: 44px;
}
.SearchBarBox > a.BtnSearch.Active + .SearchBar:after {
	content: " ";
	display: block;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: -1;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5);
}
.SearchBarBox > .SearchBar form > button > i.IconSearch {
	background: none;
	text-indent: 0;
	font-style: normal;
	width: auto;
	height: auto;
}
/*內容*/
.Content {
	padding: 3.6875em 0.625em 0.9375em;/*59px/16px 10px/16px 15px/16px*/
	padding-bottom: 9.5625em;/*153px/16px*/
}
/*左側區塊*/
.Main {
	margin: 0 0 1.25em;/*0 0 20px/16px*/
}
/*GoogleAds廣告*/
.GoogleAdsBox, .GoogleAdsBox2 {
	margin: 0 auto;
}
.Main .GoogleAdsBox {
	width: 300px;
	background: none;
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	margin: 0 auto 1em;
	text-align: center;
}
.Content > .GoogleAdsBox {
	max-width: 728px;
}
.Content > .GoogleAdsBox2 {
	width: 320px;
	position: relative;
	top: -0.9375em;
	left: 50%;
	margin-left: -160px;
}
.GoogleAdsBox3 {
	margin: 0 -0.625em;
}
.GoogleAdsBox3 > div {
	width: 300px;
	margin: 0 auto 1.25em;/*0 0 20px/16px*/
}
.Breadcrumb {
	display: none;
}
/*標籤*/
.TagBox {
	display: none;
}
.Img > a {
	display: block;
	position: relative;
	overflow: hidden;
	background: #fff;
}
.Img > a > img {
	background:  #fafafa url("../images/watermark.svg?t=20151230v01") center center no-repeat;
	background-size: cover;
	border-bottom: 1px solid #d8e1e5;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	max-width: 100%;
	margin: auto;
}
.Img > a:after {
	content: "";
	display: block;
	padding-top: 75%;
}
/*文章相關*/
.Info > h2 {
	font-size: 1.375em;/*22px/16px*/
	color: #455a64;
	line-height: 1.364;/*30/22*/
	margin: 0 0 10px;
}
.Info > h2 a {
	color: #455a64;
	display: block;
	text-decoration: none;
	overflow: hidden;
}
.Info > h2 a:hover, .Info > h2 a:active {
	text-decoration: underline;
}
.Info > .EditorInfo {
	position: relative;
}
.Info > .EditorInfo:after {
	content: " ";
	display: block;
	clear: both;
	line-height: 0;
	height: 0;
	visibility: hidden;
}
.Info > .EditorInfo > div {
	font-size: 0.875em;/*14px/16px*/
	color: #a8afb2;
}
.Info > .EditorInfo > div > i {
	margin: 0 1px 0 0;
}
.Info > .EditorInfo > .Date, .Info > .EditorInfo > .FbLike {
	width: 48%;
	margin: 0 0 8px;
	overflow: hidden;
}
.Info > .EditorInfo > .Date {
	float: left;
	max-height: 18px;
	overflow: hidden;
}
.Info > .EditorInfo > .FbLike {
	float: right;
	text-align: right;
	padding: 0 7px 0 0;
}
.Info > .EditorInfo > .FbLike iframe html {
	float: right;
}
.Info > .EditorInfo > .Author {
	clear: both;
	max-height: 18px;
	overflow: hidden;
	display: none;
}
/*列表 start*/
.PostList {
	margin: 0 0 1.25em;/*0 0 20px/16px*/
}
.PostList > li {
	background: #fff;
	border: 1px solid #d8e1e5;
	-webkit-box-shadow: 0px 1px 3px rgba(69,90,100,0.2);
	-moz-box-shadow: 0px 1px 3px rgba(69,90,100,0.2);
	box-shadow: 0px 1px 3px rgba(69,90,100,0.2);
	margin: 0 0 1em;/*0 0 16px/16px*/
	position: relative;
}
.PostList > li:hover > .Img > a img, .PostList > li:active > .Img > a img {
	opacity: 0.85;
	-moz-opacity: 0.85;
	-khtml-opacity: 0.85;
	filter: alpha(opacity=85);
}
.PostList > li > .Info {
	padding: 0.9375em;/*15px/16px*/
}
.PostList > li > .Info > .Desc {
	display: none;
}
/*頁數列*/
.Pagination {
	display: none;
}
/*右側區塊*/
.Sidebar {
	display: none;
}
/*頁尾*/
.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*/
	position: absolute;
	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: 10%;/*10px/16px*/
	bottom:5%;/*11px/16px*/
	z-index: 999;
}
.GoTopBox > a > i {
	margin: 11px;
}
/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	/*頁首 - Logo*/
	.Header .Logo > a {
		background-size: 357px 34px;
		width: 172px;
	}
	/*頁首 - 搜尋Bar*/
	.SearchBarBox > .SearchBar form {
		padding: 1.25em 1.875em;/*20px/16px 30px/16px*/
	}
	.SearchBarBox > .SearchBar form > button.BtnClear {
		top: 22px;
		right: 32px;
	}
	/*內容*/
	.Content {
		padding: 4.625em 1.875em 1.875em;/*74px/16px 30px/16px 30px/16px*/
		padding-bottom: 5.125em;/*82px/16px*/
	}
	.Main {
		margin: 0 0 1.875em;/*0 0 30px/16px*/
	}
	/*GoogleAdsBox*/
	.GoogleAdsBox {
		margin: 0 auto 1.875em;/*0 auto 30px/16px*/
	}
	.Content > .GoogleAdsBox {
		width: 728px;
		margin-top: -1.875em;
	}
	.Main .GoogleAdsBox {
		padding: 0;
		background: none;
		border: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		margin: 1.875em auto 0;
	}
	.GoogleAdsBox3 > div {
		display: inline-block;
		vertical-align: top;
		margin: 0 -4px 0 0;
	}

	/*文章列表*/
	.PostList {
		margin: -1.875em 0 1.875em;/*-30px/16px 0 30px/16px*/
	}
	.PostList > li {
		background: transparent;
		border: none;
		-webkit-box-shadow: initial;
		-moz-box-shadow: initial;
		box-shadow: initial;
		padding: 1.875em 0;/*30px/16px*/
		margin: 0;
		border-bottom: 1px solid #cfd8dc;
	}
	.PostList > li > .Img {
		width: 39.267%;
		float: left;
	}
	.PostList > li > .Info {
		margin: 0 0 0 39.267%;
		padding: 0 0 0 1.25em;/*0 0 0 20px/16px*/
	}
	.PostList > li > .Info > .Desc {
		display: block;
		line-height: 1.5;
		color: #869197;
		max-height: 48px;
		margin: 0 0 1.25em;/*0 0 20px/16px*/
		overflow: hidden;
	}
	.PostList > li > .Info > .EditorInfo {
		position: absolute;
		bottom: 30px;
		right: 0px;
		left: 39.267%;
		padding: 0 0 0 20px;
	}
	.PostList > li:after {
		content: " ";
		display: block;
		clear: both;
		line-height: 0;
		height: 0;
	}
	/*頁尾*/
	.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, .Content {
		max-width: 960px;
		margin: 0 auto;
	}
	/*頁首*/
	.Header {
		height: 55px;
	}
	.Header > .Inner {
		margin: 6px auto 5px;
	}
	.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 15px;
		position: static;
		float: left;
	}
	.Header .Logo > a {
		background-size: 462px 44px;
		width: 462px;
		height: 44px;
		margin: 0;
	}
	.Header .GoTo, .Header .GoTo > a, .Header .GoTo > a > span {
		width: auto;
	}
	.Header .GoTo {
		position: static;
		float: right;
		margin: 0 10px 0 0;
	}
	.Header .GoTo > a {
		color: #fff;
		text-decoration: none;
		padding: 5px;
	}
	.Header .GoTo > a:hover, .Header .GoTo > a:active {
		color: #455a64;
	}
	.Header .GoTo > a > i {
		margin: 5px;
	}
	.Header .GoTo > a > span {
		display: inline-block;
		text-indent: initial;
		white-space: initial;
		overflow: initial;
	}
	/*導覽列*/
	.NavBarBox {
		background: #455a64;
		width: 100%;
		height: 50px;
		position: absolute;
		top: 55px;
		right: 0;
		left: 0;
	}
	.NavBarBox > a.BtnNav {
		display: none;
	}
	.NavBarBox > .NavBar {
		width: 960px;
		margin: 0 auto;
		visibility: visible;
		position: static;
		background: transparent;
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
		opacity: 1;
	}
	.NavBarBox > .NavBar > li {
		height: 50px;
		display: inline-block;
		vertical-align: middle;
		margin: 0 -4px 0 0;
	}
	.NavBarBox > .NavBar > li:first-child {
		display: none;
	}
	.NavBarBox > .NavBar > li:nth-child(2) {
		margin-left: 14px;
	}
	.NavBarBox > .NavBar > li > a {
		padding: 0.875em 1.25em;/*14px/16px 20px/16px*/
	}
	.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;
	}
	/*搜尋Bar*/
	.SearchBarBox {
		float: right;
		width: 210px;
		margin: 8px 10px 8px 0;
		top: 5px;
	}
	.SearchBarBox > a.BtnSearch {
		display: none;
	}
	.SearchBarBox > .SearchBar {
		position: relative;
		z-index: 1;
		top: 0;
	}
	.SearchBarBox > a.BtnSearch.Active + .SearchBar {
		/*-webkit-transition: none;
		-moz-transition: none;
		transition: none;*/
		top: 0;
	}
	.SearchBarBox > .SearchBar form {
		text-align:left;
		background: transparent;
		padding: 0;
		border: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	.SearchBarBox > .SearchBar form > input[type=search] {
		padding: 5px 4em 5px 10px;/*5 64px/16px 5 5*/
		margin: 0;
		width: 210px;
		height: 34px;
	}
	.SearchBarBox > .SearchBar form > input[type=search]:hover, .SearchBarBox > .SearchBar form > input[type=search]:focus {
		background: #f3f4f6;
	}
	.SearchBar form > button.BtnM {
		width: 38px;
		height: 34px;
		position: absolute;
		right: 0;
	}
	.SearchBar form > button:hover.BtnM, .SearchBar form > button:active.BtnM {
		background: none;
	}
	.SearchBarBox > .SearchBar form > button.BtnClear, .SearchBar form > button.BtnM {
		background: transparent;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		top: 0;
	}
	.SearchBarBox > .SearchBar form > button.BtnClear {
		padding: 0;
		width: 22px;
		height: 34px;
		right: 38px;
	}
	.SearchBar form > button.BtnM > i {
		background-position: -44px -22px;
		margin: -4px 1px 0;
	}
	.SearchBarBox > a.BtnSearch.Active + .SearchBar:after {
		display: none;
	}
	.SearchBarBox > .SearchBar form > button > i.IconSearch {
		background: url("../images/icon/icon_global.svg?t=20151230v01") no-repeat -44px -22px;
		background-size: 220px 220px;
		width: 22px;
		height: 22px;
		margin: -4px 1px 0;
		text-indent: -999999px;
	}
	/*內容*/
	.Content {
		padding: 6.5625em 0.625em 5.125em;/*105px/16px 10px/16px 82px/16px*/
	}
	.Content:after {
		content: " ";
		display: block;
		clear: both;
		line-height: 0;
		height: 0;
		visibility: hidden;
	}
	.Breadcrumb {
		display: block;
		margin: 1.428571428571429em 0 1.714285714285714em;/*20px/14px 0 24px/14px*/
		position: relative;
		z-index: 1;
	}
	.Main {
		float: left;
		background: transparent;
		width: 600px;
		margin: 0 2.5em 3.75em 0;/*0 40px/16px 60px/16px 0*/
	}
	.Content > .GoogleAdsBox {
		margin: 0 auto;
	}
	.GoogleAdsBox3 {
		width: 600px;
		margin: 0 0 1.25em;/*0 0 20px/16px*/
	}
	.Info > h2 a {
		max-height: 90px;
		overflow: hidden;
	}
	/*文章列表*/
	.PostList {
		margin: -2.5em 0 2.5em;/*-40px/16px 0 40px/16px*/
	}
	.PostList > li {
		padding: 2.5em 0;/*40px/16px*/
	}
	.PostList > li > .Img {
		width: 45%;
	}
	.PostList > li > .Info {
		margin: 0 0 0 45%;
		padding: 0 0 0 1.25em;/*0 0 0 20px/16px*/
	}
	.PostList > li > .Info > .Desc {
		margin: 0 0 1em;/*0 0 20px/16px*/
	}
	.PostList > li > .Info > .EditorInfo {
		bottom: 40px;
		left: 45%;
		padding: 0 0 0 20px;
	}
	.PostList > li:after {
		content: " ";
		display: block;
		clear: both;
		line-height: 0;
		height: 0;
	}
	/*頁碼*/
	.Pagination {
		display: block;
	}
	.Sidebar {
		display: block;
		float: right;
		width: 300px;
		margin: 0 0 3.75em;/*0 0 60px/16px*/
	}
	.Sidebar > .GoogleAdsBox {
		width:300px;
		margin:0 auto 1.75em;/*0 0 40px/16px*/
	}
	.Sidebar > .Box {
		margin: 0 0 1.75em;/*0 0 28px/16px*/
	}
	.Sidebar > .Box > .Title {
		font-size: 1.25em;/*20px/16px*/
		color: #455a64;
		margin: 0 0 0.6em;/*0 0 12px/20px*/
	}
	/*廣告區*/
	.Sidebar > .Box.ADBox > .Title {
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		height: 0;
		margin: 0;
	}
	.Ad {
		border: 1px solid #d8e1e6;
	}
	.ADBox > .Ad > a {
		display: block;
	}
	/*本周推薦*/
	.Recomm {
		position: relative;
	}
	.Recomm > .List {
		background: #fff;
		padding: 0.625em 1.25em;/*10px/16px 20px/16px*/
		-webkit-box-shadow: 0px 1px 3px rgba(69,90,100,0.2);
		-moz-box-shadow: 0px 1px 3px rgba(69,90,100,0.2);
		box-shadow: 0px 1px 3px rgba(69,90,100,0.2);
	}
	.Recomm > .List > li {
		padding: 10px 0;
	}
	.Recomm > .List > li:after {
		content: " ";
		display: block;
		clear: both;
		line-height: 0;
		height: 0;
	}
	.Recomm > .List > li > .Img {
		width: 100px;
		height: 75px;
		float: left;
	}
	.Recomm > .List > li:hover > .Img > a img, .Recomm > .List > li:active > .Img > a img {
		opacity: 0.85;
		-moz-opacity: 0.85;
		-khtml-opacity: 0.85;
		filter: alpha(opacity=85);
	}
	.Recomm > .List > li > .Info {
		font-size: 0.875em;/*14px/16px*/
		margin: 0 0 0 115px;
		line-height: 1.43;
	}
	.Recomm > .List > li > .Info > .Date {
		color: #a8afb2;
		margin: .0 0 10px;
	}
	.Recomm > .List > li > .Info > h4 a {
		color: #455a64;
		max-height: 37px;
		overflow: hidden;
		display: block;
	}
	.Recomm > .List > li > .Info > h4 a:hover, .Recomm > .List > li > .Info > h4 a:active {
		text-decoration: underline;
	}
	.More {
		position: absolute;
		top: 0;
		right: 0;
	}
	.More > a {
		font-size: 0.75em;/*12px/16px*/
		color: #455a64;
		text-decoration: underline;
	}
	.More > a:hover, .More > a:active {
		color: #45c8ab;
	}
	/*粉絲團外掛*/
	.FBBox > .Title {
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		height: 0;
	}
	/*頁尾*/
	.Footer > .Inner {
		margin: 6px auto;
	}
}