@charset "utf-8";
/*******************************************************************************
 * Version 1.0 Release 2016.01.15;
 * Copyright 2016, "lucre"<lucrecia@titan-tech.com.tw>. All rights reserved.
 ******************************************************************************/
/*Content Start*/
.Content {
	 padding:2.75em 0 0;/*44px/16px 0 0*/
}
.Content > .Section {
	padding:1.5em 0;/*24px/16px 0*/
}
.Content > .Section > div {
	padding:1.875em 3.125%;/*30px/16px 10px/320px*100*/
}
.Content > .Section > div > h2 {
	font-size:1.25em;/*20px/16px*/
	margin:0 0 0.8em;/*0 0 16px/20px*/
}
.Section > div > ul > li > div,
.Section.Article > div > ul > li {
	background:#fff;
	border:1px solid #d8e1e5;
	box-shadow: 1px 1px 3px rgba(69,90,100,0.2);
	padding:1.125em 6.25%;/*18px/16px 20px/320px*100*/
	margin:1.25em 0;/*20px/16px 0*/
	position: relative;
}
.Section > div > ul > li > div > strong {
	display:block;
	font-size:1.25em;/*20ox/16px*/
	margin: 0 0 8px;
}
.Section > div > ul > li > div > em {
	display: block;
	color:#ff6666;
	font-style:normal;
}
.Section > div > ul > li > div > span {
	display: block;
}
.Section > div > ul > li > div > .Deco {
	display: block;
	background:url("../../images/blogclass/icon_global.svg?t=20160115v1") no-repeat;
	background-size:500px 500px;
	width:50px;
	height:50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.25em;/*20px/16px*/
	font-weight:bold;
	color:#fff;
	text-align: center;
    padding: 2px 0;
    position: absolute;
    z-index: 1;
    top: -1px;
    right: 20px;
}
.Section > div > ul > li > .Ok > .Deco {
	background-position:-100px 0;
}
.Section > div > ul > li > .Ng > .Deco {
	background-position:-150px 0;
}

	/*Section Banner Start*/
.Section.Banner {
	background:#ffed76;
	padding:0;
}
.Section.Banner > div {
	padding:0;
}
.Section.Banner > div > h1 {
	display:none;
}
.Section.Banner > div > .PhoneBanner {}
.Section.Banner > div > .PhoneBanner > img {}
.Section.Banner > div > .WebBanner {
	display: none;
}
.Section.Banner > div > .WebBanner > img {}
	/*Section Banner End*/

	/*Section Writing Start*/
.Section.Writing,
.Section.WebTraffic {
	background:#f5f8fa;
}
.Section.Writing > div {}
.Section.Writing > div > h2 {}
.Section.Writing > div > ul {}
.Section.Writing > div > ul > li {}
.Section.Writing > div > ul > li > div {}
.Section.Writing > div > ul > li > div > strong {}
.Section.Writing > div > ul > li > div > em {}
.Section.Writing > div > ul > li > div > p {}
.Section.Writing > div > ul > li > div > .Deco {}
.Section.Writing > div > ul > li > .Ok {}
.Section.Writing > div > ul > li > .Ok > strong {}
.Section.Writing > div > ul > li > .Ok > em {}
.Section.Writing > div > ul > li > .Ok > p {}
.Section.Writing > div > ul > li > .Ok > .Deco {}
.Section.Writing > div > ul > li > .Ng {}
.Section.Writing > div > ul > li > .Ng > strong {}
.Section.Writing > div > ul > li > .Ng > em {}
.Section.Writing > div > ul > li > .Ng > p {}
.Section.Writing > div > ul > li > .Ng > .Deco {}
	/*Section Writing End*/

	/*Section Photo Start*/
.Section.Photo {}
.Section.Photo > div {}
.Section.Photo > div > h2 {}
.Section.Photo > div > ul {}
.Section.Photo > div > ul > li {}
.Section.Photo > div > ul > li > div {
	padding: 10px;
}
.Section.Photo > div > ul > li > div > img {}
.Section.Photo > div > ul > li > .Ok {}
.Section.Photo > div > ul > li > .Ok > img {}
.Section.Photo > div > ul > li > .Ng {}
.Section.Photo > div > ul > li > .Ng > img {}
	/*Section Photo End*/

	/*Section WebTraffic Start*/
.Section.WebTraffic {}
.Section.WebTraffic > div {}
.Section.WebTraffic > div > h2 {}
.Section.WebTraffic > div > ul {}
.Section.WebTraffic > div > ul > li {}
.Section.WebTraffic > div > ul > li > div {}
.Section.WebTraffic > div > ul > li > div > strong {}
.Section.WebTraffic > div > ul > li > div > em {}
.Section.WebTraffic > div > ul > li > div > em > p {}
.Section.WebTraffic > div > ul > li > div > em > .Deco {}
.Section.WebTraffic > div > ul > li > .Ok {}
.Section.WebTraffic > div > ul > li > .Ok > strong {}
.Section.WebTraffic > div > ul > li > .Ok > em {}
.Section.WebTraffic > div > ul > li > .Ok > p {}
.Section.WebTraffic > div > ul > li > .Ok > .Deco {}
.Section.WebTraffic > div > ul > li > .Ng {}
.Section.WebTraffic > div > ul > li > .Ng > strong {}
.Section.WebTraffic > div > ul > li > .Ng > .Deco {}
	/*Section WebTraffic End*/

	/*Section Article Start*/
.Section.Article {}
.Section.Article > div {}
.Section.Article > div > h2 {}
.Section.Article > div > ul {}
.Section.Article > div > ul > li {}
.Section.Article > div > ul > li > div {
	border:none;
	box-shadow:none;
	margin:0;
	padding:0;
}
.Section.Article > div > ul > li > .Photo {}
.Section.Article > div > ul > li > .Photo > a {}
.Section.Article > div > ul > li > .Photo > a > img {}
.Section.Article > div > ul > li > .Info {}
.Section.Article > div > ul > li > .Info > h3 {
	margin:1em 0 0;/*16px/16px 0 0*/
}
.Section.Article > div > ul > li > .Info > h3 > a {
	font-size:1.25em;/*20px/16px*/
	color:#555;
	line-height:1.5;/*30px/20px*/
}
.Section.Article > div > ul > li > .Info > div {
	margin: 0 0 1.25em;/*0 0 20px/16px*/
}
.Section.Article > div > ul > li > .Info > div > span {}
.Section.Article > div > ul > li > .Info > div > .Tag {
	font-size:0.875em;/*14px/16px*/
	width:40px;
	height:20px;
	background:#607d8b;
	border-radius:3px;
	color:#fff;
	padding:4px 12px;
	letter-spacing:2px;
}
.Section.Article > div > ul > li > .Info > div > .Date {
	display:none;
}
.Section.Article > div > ul > li > .Info > div > em {
	font-size:0.875em;/*14px/16px*/
	color:#ff6666;
	font-style:normal;
	margin: 0 0 0 6px;
}
.Section.Article > div > ul > li > .Info > p {
	display: none;
}
.Section.Article > div > ul > li > .Info > a {
	background: #45c8ab;
	color:#fff;
	font-size:1.125em;/*18px/16px*/
	padding:8px 4.375%;/*8px 14px/320px*100*/
	display: block;
	border-radius:8px;
	text-align: center;
}
.Section.Article > div > ul > li > .Info > a:hover,
.Section.Article > div > ul > li > .Info > a:active {
	text-decoration:none;
	background:#4ad9ba;
}
	/*Section Article End*/
/*Content End*/

/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	/*Content Start*/
	.Content > .Section {
		padding:2.875em 0;/*46px/16px 0*/
	}
	.Content > .Section > div {
		padding:1.875em 3.90625%;/*30px/16px 30px/768px*100*/
	}
	.Section > div > ul {
		margin: -0.75em 0;/*-12px/16px 0*/
	}
	.Section > div > ul > li {
		margin: 1.25em -2.7%;/*20px/16px -16px/768px*100*/
		text-align: center;
	}
	.Section > div > ul > li > div {
    	width: 46%;
    	display: inline-block;
    	vertical-align: top;
    	margin: 0 10px;
    	text-align: left;
    	padding: 1.125em 2.604166666%;/*1.125em 20px/768px*100*/
	}
		/*Section Banner Start*/
	.Section.Banner {
		padding:0;
	}
	.Section.Banner > div {
		padding: 0 3.90625% 0;
	}
	.Section.Banner > div > .PhoneBanner {
		display: none;
	}
	.Section.Banner > div > .WebBanner {
		display: block;
	}
		/*Section Banner End*/

		/*Section Writing Start*/
		/*Section Writing End*/

		/*Section Photo Start*/
		/*Section Photo End*/

		/*Section WebTraffic Start*/
		/*Section WebTraffic End*/

		/*Section Article Start*/
	.Section.Article > div {
		padding:1.875em 3.90625% 4.375em;/*30px/16px 30px/768px*100 70px/16px*/
	}
	.Section.Article > div > ul > li {
		padding:20px;
		position: relative;
	}
	.Section.Article > div > ul > li:after {
		content:" ";
		display: block;
		clear:both;
		height:0;
		line-height:0;
	}
	.Section.Article > div > ul > li > div {
		width:auto;
		background:none;
	}
	.Section.Article > div > ul > li > .Photo {
    	width:210px;
    	float:left;
	}
	.Section.Article > div > ul > li > .Info {
		display: block;
    	max-width: 100%;
    	padding-left:225px;
    	position:static;
	}
	.Section.Article > div > ul > li > .Info > h3 {
		margin: 3px 0 0;
		white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
	}
	.Section.Article > div > ul > li > .Info > div {
		margin: 0 0 8px;
	}
	.Section.Article > div > ul > li > .Info > div > .Date {
		display: inline-block;
    	color: #ff6666;
    	font-size:0.875em;/*14px/16px*/
	}
	.Section.Article > div > ul > li > .Info > p {
		display: block;
    	max-height:88px;
    	overflow: hidden;
    	color: #555;
	}
	.Section.Article > div > ul > li > .Info > a {
		padding: 3px;
		width: 192px;
    	height: 38px;
    	position: absolute;
    	z-index: 1;
    	bottom: 19px;
    	left: 246px;
	}
		/*Section Article End*/
	/*Content End*/
}

/*如果使用者之視窗寬度>=1024px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1024px) {
	/*Content Start*/
	.Content {
		padding: 6.5em 0 0;
	}
	.Content > .Section {
		padding:5.625em 0;/*90px/16px 0*/
	}
	.Content > .Section > div {
		max-width:940px;
		margin:0 auto;
		padding:1.875em 0;
	}
		/*Section Banner Start*/
	.Section.Banner {
		padding:0;
	}
	.Section.Banner > div {
		padding:0;
	}
		/*Section Banner End*/

		/*Section Writing Start*/
		/*Section Writing End*/

		/*Section Photo Start*/
		/*Section Photo End*/

		/*Section WebTraffic Start*/
		/*Section WebTraffic End*/

		/*Section Article Start*/
	.Section.Article > div > ul > li {
		padding:0.875em 1.3671875%;/*14px/16px 14px/1024px*100 */
	}
	.Section.Article > div > ul > li > .Photo {
		width: 24%;
    	margin: 0 1.3671875% 0 0;/*0 14px/1024px*100 0 0*/
	}
	.Section.Article > div > ul > li > .Info {
		margin: 0 0 10px;
		padding-left:236px;
	}
	.Section.Article > div > ul > li > .Info > p {
		margin: 0 0 0.875em;/*0 0 14px/16px*/
	}
		/*Section Article End*/
	/*Content End*/
}