/* 正常環境下 */
.MainArea {
	clear: both;
	padding: 0px;
	margin: auto;
	width: 100%;
	max-width: 982px;
	background-color: white;
}
.MainArea:before,
.MainArea:after { content:""; display:table; }
.MainArea:after { clear:both;}
.MainArea { zoom:1; /* For IE 6/7 */ }

.Area {
	display: block;
	float: left;
	margin: 5px 0 5px 5px;
}

.Col2 { margin: 0; width: 50%; text-align: center }
.Col2_Left, .Col3_Left { width: 185px }
.Col2_Right .Col3_Middle { margin: 0 5px 0 0; }
.Col2_Right .Col3_Right { margin: 0; }

.ADBanner { width: 100%; max-width: 550px }
.QProc { white-space: nowrap }
.ShowWhenSmall { display: none }
header .OrangeButton, header .GrayButton { padding: 0.2em 1em; text-align: center }
.QAImageTable { width: 550px }
.QAImageTable { line-height: 1px } /* 修正在圖片只有一行時，會造成圖片間有空白 */

@media screen and (max-width: 1001px) and (min-width: 745px) {
	.MainArea .Col3_Middle { width: calc(100% - 200px) }
	.MainArea .Col3_Right img { width: calc(33% - 10px) }
	.MainArea .Col3_Right .NewBlockStyle { display: block }
}

@media screen and (min-width: 1002px) {
	.Col2_Right { width: calc(100% - 200px) }
	.Col3_Left { position: relative; left: -557px; }
	.Col3_Middle, .Col2_Right .Col2_Left { position: relative; width: 552px; left: 190px; }
	.Col3_Right, .Col2_Right .Col2_Right { position: relative; width: 225px }
	.ShowIfSmallScreen { display: none }
	.JinseBanner { width: 32.5% }
}

@media screen and (max-width: 1001px) {
	.ShowIfSmallScreen { display: block }
	.HideWhenMiddle { display: none }
	.ADBanner { width: 100%; width: calc(100% - 2px); max-width: initial }
	.QProc { display: none }
	header .OrangeButton, header .GrayButton { padding: initial; display: inline-block; text-align: center; margin-top: 3px; font-size: 150%; width: 32% }
	/*header .OrangeButton, header .GrayButton { font-size: 150%; width: 32%; display: inline-block }*/
	.JinseBanner { width: 100% }
	.MainArea .Col2_Right, .MainArea .Col3_Right { width: calc(100% - 10px) }
	.MainArea .Col3_Right .NewBlockStyle img { width: initial }
	.QAImageTable { width: 100% }
	.QAImageTable img { width: 100% }
}

@media screen and (max-width: 744px) {
	.HideWhenSmall { display: none }
	.ShowWhenSmall { display: initial }
	.FullWhenSmall { width: calc(100% - 10px); display: block }
	.Col2 { width: 100% }
	.MainArea .Area.Col3_Left, .MainArea .Area.Col2_Left { display: block; width: calc(100% - 10px) }
	/*.MainArea .Area.Col3_Left img { width: 98% }*/
	.MainArea .Area.Col3_Middle/*, .MainArea .Area.Col2_Right*/ { width: calc(100% - 10px) }
	.MainArea .Col3_Right img { width: 100% }
	div.gvQuestionList > div > table > tbody > tr > th:not(:first-child), div.gvQuestionList > div > table > tbody > tr > td:not(:first-child) { display: none }
}