@charset "utf-8";
/* 簡單流變媒體
   注意: 流變媒體要求您必須移除 HTML 中媒體的高度和寬度屬性
   http://www.alistapart.com/articles/fluid-images/ 
*/

/* Background pattern from Toptal Subtle Patterns */

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {
	width:100%;
}
body, main, footer{ font-family: "微軟正黑體", "Arial", sans-serif; overflow:hidden;}

.article10-bg{ background:url(../images/bg10.png) repeat;}

div{ text-align: justify;　text-justify: inter-ideograph;　-ms-text-justify: inter-ideograph; /*IE9*/　-moz-text-align-last:justify; /*Firefox*/　-webkit-text-align-last:justify; /*Chrome*/}

a:active, a:visited, a:hover { outline: 0; text-decoration:none;}


/* 行動版面: 480px 以下。 */

.gridContainer { margin-left: auto;	margin-right: auto;	width: 100%; padding:0;}
.LayoutDiv1 { clear: both; float: left;	margin-left: 0;	width: 100%; display: block; background-color:#FFF;}

.ph_brstyle{ display:inline;}

.article10{ float:left; width:90%; margin:0; padding:0 5%; background-color:#FFF;}
	.article10 h1{ float:left; width:100%; margin:20px 0 5px; padding:0 0 20px; text-align:center; font-size:1.6em; font-weight:bold; color:#212121; border-bottom:1px #DDD solid;}
	.article10-box1{ float:left; width:100%; margin:0 0 80px;}
		.article10-box1 p{ float:left; width:100%; font-size:1.05em; letter-spacing:1px; line-height:1.45em; color:#666; text-indent:15px;}
		.article10-box1 span{ float:left; width:100%; margin:15px 0; text-align: center;}
		.article10-box1 h2{ float: left; width: 100%; margin: 50px 0 15px; text-align: center; font-size: 1.35em; line-height: 1.5em; font-weight:bold; color:#333;}
		
		
.magazine-report, .more-articles{ float:left; width:94%; margin:0; padding:50px 3%;}
.magazine-report{ background-color:#F3F3F3;}		
.more-articles{ border-top:1px #DEDEDE dashed;}
	.magazine-report h3, .more-articles h3{ float:left; width:100%; margin:10px 0; font-size:1.5em; font-weight:bold; color:#212121;}
	.magazine-report hr, .more-articles hr{ float:left; width:75px; height:3px; margin:0 0 15px; background-color:#c8c8c8;}
	.magazine-report p, .more-articles p{ float:left; width:90%; margin:6px 5%; padding:5px; font-size:1.1em; color:#4f91f4;}
	.more-articles p{border-bottom:1px #DEDEDE solid;}
	.magazine-report a, .more-articles a:visited{ color:#4f91f4; text-decoration:underline;}
	.magazine-report a:hover{ color:#ec8132; text-decoration:none;}
	.more-articles a, .more-articles a:visited{ color:#4f91f4; text-decoration:none;}
	.more-articles a:hover{ color:#ec8132; text-decoration:underline;}


.article-menu{ float: left; width: 96%; margin: 30px 2%; padding: 20px; box-sizing: border-box; border: 2px #DADADA solid; background-color: #d3dfcf; border-radius: 10px;}
	.article-menu-title{ float: left; width: 100%; margin: 0; text-align: center; font-size: 1.65em; font-weight: bolder; letter-spacing: 8px; color: #333;}
	.article-menu hr{ float: left; width: 60px; height: 2px; margin: 8px 0 15px calc(50% - 35px); background-color: #FFF; border: none;}
	.article-menu p{ float: left; width: 100%; margin: 8px 0; padding-left: 25px; box-sizing: border-box; position: relative; font-size: 1.05em; letter-spacing: 1px; text-indent: 0; color: #666; cursor: pointer;}
	.article-menu p:hover{ text-decoration: underline;}
	.article-menu p::before{ content: '●'; position: absolute; top: 0; left: 0;}
		
		
		
/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */

@media only screen and (min-width: 481px) {
.gridContainer { width: 96%; padding:0 2%;}
.LayoutDiv1 { clear: both; float: left;	margin-left: 0; width: 100%; display: block; background-color:#FFF;}

.ph_brstyle{ display: inline;}

.article10{ float:left; width:80%; margin:0; padding:0 10%; background-color:#FFF;}
	.article10 h1{ float:left; width:100%; margin:30px 0 20px; padding:0 0 30px; text-align:center; font-size:2.2em; font-weight:bold; color:#212121; border-bottom:1px #DDD solid;}
	.article10-box1{ float:left; width:100%; margin:0 0 80px;}
		.article10-box1 p{ float:left; width:100%; font-size:1.15em; letter-spacing:1px; line-height:1.5em; color:#666; text-indent:35px;}
		.article10-box1 span{ float:left; width:100%; margin:20px 0; text-align: center;}
		.article10-box1 h2{ float: left; width: 100%; margin: 60px 0 20px; text-align: center; font-size: 1.65em; font-weight:bold; color:#333;}
		

		
.magazine-report, .more-articles{ float:left; width:80%; margin:0; padding:50px 10%;}
.magazine-report{ background-color:#F3F3F3;}		
.more-articles{ border-top:1px #DEDEDE dashed;}
	.magazine-report h3, .more-articles h3{ float:left; width:100%; margin:10px 0; font-size:1.5em; font-weight:bold; color:#212121;}
	.magazine-report hr, .more-articles hr{ float:left; width:90px; height:5px; margin:0 0 20px; background-color:#c8c8c8;}
	.magazine-report p, .more-articles p{ float:left; width:90%; margin:6px 5%; padding:5px; font-size:1.2em; color:#4f91f4;}
	.more-articles p{border-bottom:1px #DEDEDE solid;}
	.magazine-report a, .more-articles a:visited{ color:#4f91f4; text-decoration:underline;}
	.magazine-report a:hover{ color:#ec8132; text-decoration:none;}
	.more-articles a, .more-articles a:visited{ color:#4f91f4; text-decoration:none;}
	.more-articles a:hover{ color:#ec8132; text-decoration:underline;}	


.article-menu{ float: left; width: 96%; margin: 40px 2%; padding: 40px; box-sizing: border-box; border: 2px #DADADA solid; background-color: #d3dfcf; border-radius: 10px;}
	.article-menu-title{ float: left; width: 100%; margin: 0; text-align: center; font-size: 1.8em; font-weight: bolder; letter-spacing: 8px; color: #333;}
	.article-menu hr{ float: left; width: 80px; height: 3px; margin: 10px calc(50% - 40px) 20px; background-color: #FFF; border: none;}
	.article-menu p{ float: left; width: 100%; margin: 10px 0; padding-left: 30px; box-sizing: border-box; position: relative; font-size: 1.15em; letter-spacing: 1px; text-indent: 0; color: #666; cursor: pointer; }
	.article-menu p:hover{ text-decoration: underline;}
	.article-menu p::before{ content: '●'; position: absolute; top: 0; left: 0;}
}

/* 桌面版面: 769px 到 1024px。樣式繼承自: 行動版面和表格版面。 */

@media only screen and (min-width: 769px) {
.gridContainer { width: 90%;  padding:0 5%;	margin: auto;}
.LayoutDiv1 { clear: both; float: left;	margin-left: 0;	width: 100%; display: block; background-color:#FFF;}

.ph_brstyle{ display:none;}

.article10{ float:left; width:80%; margin:0; padding:0 10%; background-color:#FFF;}
	.article10 h1{ float:left; width:100%; margin:50px 0 30px; padding:0 0 50px; text-align:center; font-size:2.8em; font-weight:bold; color:#212121; border-bottom:1px #DDD solid;}
	.article10-box1{ float:left; width:100%; margin:0 0 80px;}
		.article10-box1 p{ float:left; width:100%; font-size:1.25em; letter-spacing:1px; line-height:1.55em; color:#666; text-indent:35px;}
		.article10-box1 span{ float:left; width:100%; margin:30px 0; text-align: center;}
		.article10-box1 h2{ float: left; width: 100%; margin: 80px 0 30px; text-align: center; font-size: 2.2em; font-weight:bold; color:#333;}
		
		
		
.magazine-report, .more-articles{ float:left; width:80%; margin:0; padding:80px 10%;}
.magazine-report{ background-color:#F3F3F3;}		
.more-articles{ border-top:1px #DEDEDE dashed;}
	.magazine-report h3, .more-articles h3{ float:left; width:100%; margin:10px 0; font-size:1.8em; font-weight:bold; color:#212121;}
	.magazine-report hr, .more-articles hr{ float:left; width:90px; height:5px; margin:0 0 20px; background-color:#c8c8c8;}
	.magazine-report p, .more-articles p{ float:left; width:90%; margin:6px 5%; padding:5px; font-size:1.3em; color:#4f91f4;}
	.more-articles p{border-bottom:1px #DEDEDE solid;}
	.magazine-report a, .more-articles a:visited{ color:#4f91f4; text-decoration:underline;}
	.magazine-report a:hover{ color:#ec8132; text-decoration:none;}
	.more-articles a, .more-articles a:visited{ color:#4f91f4; text-decoration:none;}
	.more-articles a:hover{ color:#ec8132; text-decoration:underline;}


.article-menu{ float: left; width: 90%; margin: 50px 5%; padding: 50px; box-sizing: border-box; border: 2px #DADADA solid; background-color: #d3dfcf; border-radius: 10px;}
	.article-menu-title{ float: left; width: 100%; margin: 0; text-align: center; font-size: 2.2em; font-weight: bolder; letter-spacing: 8px; color: #333;}
	.article-menu hr{ float: left; width: 80px; height: 3px; margin: 10px calc(50% - 40px) 20px; background-color: #FFF; border: none;}
	.article-menu p{ float: left; width: 100%; margin: 10px 0; padding-left: 30px; box-sizing: border-box; position: relative; font-size: 1.35em; letter-spacing: 1px; text-indent: 0; color: #666; cursor: pointer; }
	.article-menu p:hover{ text-decoration: underline;}
	.article-menu p::before{ content: '●'; position: absolute; top: 0; left: 0;}
}


/* 桌面版面:1025px 到最大 1100px。樣式繼承自: 行動版面和表格版面。 */

@media only screen and (min-width: 1025px) {
.gridContainer { width: 90%; max-width: 1100px; padding:0 5%; margin: auto;}
.LayoutDiv1 { clear: both; float: left;	margin-left: 0;	width: 100%; display: block; background-color:#FFF;}

.ph_brstyle{ display:none;}

.article10{ float:left; width:80%; margin:0; padding:0 10%; background-color:#FFF;}
	.article10 h1{ float:left; width:100%; margin:50px 0 30px; padding:0 0 50px; text-align:center; font-size:2.8em; font-weight:bold; color:#212121; border-bottom:1px #DDD solid;}
	.article10-box1{ float:left; width:100%; margin:0 0 80px;}
		.article10-box1 p{ float:left; width:100%; font-size:1.25em; letter-spacing:1px; line-height:1.55em; color:#666; text-indent:35px;}
		.article10-box1 span{ float:left; width:100%; margin:30px 0; text-align: center;}
		.article10-box1 h2{ float: left; width: 100%; margin: 80px 0 30px; text-align: center; font-size: 2.2em; font-weight:bold; color:#333;}
		
		
		
.magazine-report, .more-articles{ float:left; width:46%; margin:0;}
.magazine-report{ background-color:#F3F3F3; padding:80px 2% 200px;}		
.more-articles{ border-top:1px #DEDEDE dashed; padding:80px 2%;}
	.magazine-report h3, .more-articles h3{ float:left; width:100%; margin:10px 0; font-size:1.8em; font-weight:bold; color:#212121;}
	.magazine-report hr, .more-articles hr{ float:left; width:90px; height:5px; margin:0 0 20px; background-color:#c8c8c8;}
	.magazine-report p, .more-articles p{ float:left; width:90%; margin:6px 5%; padding:5px; font-size:1.3em; color:#4f91f4;}
	.more-articles p{border-bottom:1px #DEDEDE solid;}
	.magazine-report a, .more-articles a:visited{ color:#4f91f4; text-decoration:underline;}
	.magazine-report a:hover{ color:#ec8132; text-decoration:none;}
	.more-articles a, .more-articles a:visited{ color:#4f91f4; text-decoration:none;}
	.more-articles a:hover{ color:#ec8132; text-decoration:underline;}


.article-menu{ float: left; width: 90%; margin: 50px 5%; padding: 50px; box-sizing: border-box; border: 2px #DADADA solid; background-color: #d3dfcf; border-radius: 10px;}
	.article-menu-title{ float: left; width: 100%; margin: 0; text-align: center; font-size: 2.2em; font-weight: bolder; letter-spacing: 8px; color: #333;}
	.article-menu hr{ float: left; width: 80px; height: 3px; margin: 10px calc(50% - 40px) 20px; background-color: #FFF; border: none;}
	.article-menu p{ float: left; width: 100%; margin: 10px 0 ; padding-left: 30px; box-sizing: border-box; position: relative; font-size: 1.35em; letter-spacing: 1px; text-indent: 0; color: #666; cursor: pointer; }
	.article-menu p:hover{ text-decoration: underline;}
	.article-menu p::before{ content: '●'; position: absolute; top: 0; left: 0;}
}