* {
	font-family: Arial, "微軟正黑體";
	font-size: 16px;
}

html {
	height: 100%;
}
body {
	min-height: 100%;   /* min-height 讓 body 可隨內容撐高，height:100% 會鎖死高度 */
	font-family: Arial, "微軟正黑體";
	font-size: 16px;
	padding-bottom: 72px; /* 防止內容被 fixed-bottom footer 遮住 */
}

img {
	border: 0px;
}

ul {
	list-style-type: none;
}

/* 頁頭 頁身區塊*/
#wrap {
	min-height: 100%;
	height: auto;
	margin: 0 auto -50px;
	padding: 0 0 60px;
}

.row {
	margin-left: 0px;
	margin-right: 0px;
}

.container-full {
	margin: 0 auto;
	width: 100%;
}

/* 單頭 */
#headerDiv {
	height: 80px;
	background-color: #0469BC;
	color: #ffffff;
	line-height: 80px;
	text-align: center;
}

/* 頁尾 wrapper — include_footer.php 已移至 </body> 前統一引入，
   此 wrapper div 現為空元素，直接隱藏 */
#footerDiv {
	display: none;
}

/* 底部固定導覽列 */
.app-bottom-nav {
	background-color: #282828 !important;
	border-top: 2px solid #444444;
}

.button01 {
	width: 90px;
	height: 90px;
	text-align: center;
	display: inline-block;
	margin: 3px 8px;
}

.button01:hover {
	background: #ACA573;
}

.button {
	text-align: center;
	background: #000000;
	color: #ffffff;
	padding: 8px 20px;
	border: 0px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

.ftlimitDiv {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 15px;
	line-height: 15px;
	text-align: center;
}

#imgDiv {
	text-align: center;
	margin-bottom: 10px;
	background-color: #383838;
	padding: 0px;
}

#mainImg {
	height: 100px;
	background: url(../images/pic01.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.spDiv {
	height: 60px;
	width: 100%;
}

.ui-dialog-contain {
	width: 92.5%;
	max-width: 500px;
	margin: 10% auto 15px auto;
	padding: 0;
	position: relative;
	top: -15px;
}

.imgDiv {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ui-content {
	font-family: Arial, "微軟正黑體";
	font-size: 16px;
	line-height: 22px;
}

.voteStyle01 li {
	margin-left: -15px;
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 20px;
}

.errorAlert {
	display: inline-block;
	color: #FD0000;
	text-align: left;
}

.fcDiv {
	line-height: 30px;
}

.fcDiv ul {
	list-style-type: disc;
	margin-left: 0px;
}

.fcDiv img {
	max-width: 100%;
	height: auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 2px solid #949494;
}

.tb02 {
	min-width: 300px;
	max-width: 600px;
	margin: 0 auto;
}

.tb02 th,
.tb02 td {
	padding: 5px;
	text-align: center;
}

.tb02 th {
	background: #C3E5E8;
}

.tb03 {
	min-width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.tb03 th,
.tb03 td {
	padding: 2px;
	text-align: center;
	border: 1px solid #AEAEAE;
}

.tb03 th {
	background: #C3E5E8;
}

/* 已下為後台 */
.mainDiv {
	padding: 20px;
	width: 100%;
	text-align: center;
}

.tb01 {
	margin: 0 auto;
}

.tb01 td {
	text-align: right;
	padding: 6px;
}

.tb01 th {
	text-align: center;
}

.tb01a {
	border: 1px;
	width: 100%;
}

.tb01a th,
.tb01a td {
	border: 1px;
	padding: 3px;
}

.tb01a th {
	background: #b6c8d8;
}

.cntCir {
	position: absolute;
	margin: -5px 0 0 -5px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	background: #FF0000;
	color: #FFFFFF;
	font-family: Arial;
	font-size: 10px;
	min-width: 26px;
	max-height: 26px;
	line-height: 26px;
	text-align: center;
}

.sCoreBox {
	width: 100%;
	padding: 6px;
	background: #A1DAE4;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.tilteF01 {
	font-size: 26px;
	font-weight: bold;
	color: #1C6FAF;
}

.tilteF02 {
	font-size: 20px;
	font-weight: bold;
	color: #FF4D00;
}

#ui-id-1,
#ui-id-2,
#ui-id-3,
#ui-id-4,
#ui-id-5,
#ui-id-6,
#ui-id-7,
#ui-id-8,
#ui-id-9,
#ui-id-10,
#ui-id-11,
#ui-id-12,
#ui-id-13,
#ui-id-14,
#ui-id-15,
#ui-id-16,
#ui-id-17,
#ui-id-18,
#ui-id-19,
#ui-id-20 {
	font-size: 16px;
}

.scoreDiv {
	width: 60px;
	height: 60px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-size: 30px;
	line-height: 60px;
	text-align: center;
	background-color: #E0204F;
	color: #FFFFFF;
	display: inline-block;
}

div#abgne_marquee {
	position: relative;
	overflow: hidden;
	/* 超出範圍的部份要隱藏 */
	width: 100%;
	max-width: 415px;
	height: 30px;
	border: 1px solid #ccc;
	margin: 0 auto;
}

div#abgne_marquee ul,
div#abgne_marquee li {
	margin: 0;
	padding: 0;
	list-style: none;
}

div#abgne_marquee ul {
	position: absolute;
	left: 30px;
	/* 往後推個 30px */
}

div#abgne_marquee ul li a {
	display: block;
	overflow: hidden;
	/* 超出範圍的部份要隱藏 */
	font-size: 14px;
	height: 30px;
	line-height: 18px;
	text-decoration: none;
}

div#abgne_marquee div.marquee_btn {
	position: absolute;
	cursor: pointer;
}

div#abgne_marquee div#marquee_next_btn {
	left: 5px;
}

div#abgne_marquee div#marquee_prev_btn {
	right: 5px;
}

.studyBtn {
	display: inline-block;
	width: 100%;
	background: #f77d2c;
	color: #ffffff;
	padding: 20px;
	text-align: center;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
}

.ansBtn {
	display: inline-block;
	width: 100%;
	background: #ddf5a6;
	color: #000000;
	padding: 20px;
	text-align: center;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
}

.goStudy {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	background: #f77d2c;
	color: #ffffff;
	border-radius: 30px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.goStudyF {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	background: #976747;
	color: #ffffff;
	border-radius: 30px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.classDiv {
	display: inline-block;
	width: 48%;
	background: #ffd667;
	padding: 10px;
	margin: 6px 0;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
}

.comicDiv {
	width: 100%;
	text-align: center;
	background: #00B2B2;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	padding: 6px;
}

.comicDiv img {
	width: 100%;
	max-width: 450px;
}

.ansImg {
	animation: shake 0.2s;
	animation-iteration-count: infinite;
}

.mk01 {
	padding: 10px;
	background: rgb(223, 218, 183);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin: 3px 0;
}

.mkTitle {
	font-size: 16px;
	font-weight: bold;
	padding: 6px;
	color: #4b402a;
	background: rgb(255, 255, 255);
	display: inline-block;
	width: 100%;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.mk02 {
	padding: 6px;
	width: 100%;
	background: rgb(238, 235, 202);
	display: inline-block;
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

.mk03 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: bolder;
	color: #ff7839;
}

.mk04 {
	font-size: 12px;
	color: #444255;
	float: right;
}

@keyframes shake {
	0% {
		transform: translate(0px, 0px) rotate(0deg);
	}

	25% {
		transform: translate(0px, 5px) rotate(0deg);
	}

	50% {
		transform: translate(0px, 0px) rotate(0deg);
	}

	75% {
		transform: translate(0px, 5px) rotate(0deg);
	}

	100% {
		transform: translate(0px, 0px) rotate(0deg);
	}
}

.ansImg1 {
	animation: shake1 0.2s;
	animation-iteration-count: infinite;
}

@keyframes shake1 {
	0% {
		transform: translate(0px, 0px) rotate(0deg);
	}

	25% {
		transform: translate(5px, 0px) rotate(0deg);
	}

	50% {
		transform: translate(0px, 0px) rotate(0deg);
	}

	75% {
		transform: translate(5px, 0px) rotate(0deg);
	}

	100% {
		transform: translate(0px, 0px) rotate(0deg);
	}
}

.font01 {
	font-size: 12px;
	color: #3d748a;
}

/* Customize the label (the radioBtn) */
.radioBtn {
	display: inline-block;
	position: relative;
	padding-left: 20px;
	padding-right: 10px;
	margin: 4px 0;
	cursor: pointer;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.radioBtn input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.radioBtnCM {
	position: absolute;
	top: 2px;
	left: 0;
	height: 16px;
	width: 16px;
	background-color: #eee;
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radioBtn:hover input~.radioBtnCM {
	background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radioBtn input:checked~.radioBtnCM {
	background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radioBtnCM:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioBtn input:checked~.radioBtnCM:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.radioBtn .radioBtnCM:after {
	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* Customize the label (the chkBox) */
.chkBox {
	display: inline-block;
	position: relative;
	padding-left: 20px;
	margin-right: 10px;
	margin: 3px 0;
	cursor: pointer;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.chkBox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.chkBoxCM {
	position: absolute;
	top: 2px;
	left: 0;
	height: 16px;
	width: 16px;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
.chkBox:hover input~.chkBoxCM {
	background-color: rgb(190, 22, 22);
}

/* When the checkbox is checked, add a blue background */
.chkBox input:checked~.chkBoxCM {
	background-color: #13cc3b;
}

/* Create the checkmark/indicator (hidden when not checked) */
.chkBoxCM:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.chkBox input:checked~.chkBoxCM:after {
	display: inline-block;
}

/* 打勾 */
.chkBox .chkBoxCM:after {
	left: 5px;
	top: 2px;
	width: 10px;
	height: 10px;
	border: solid rgb(223, 36, 36);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

::-webkit-input-placeholder {
	/*Webkit browsers*/
	color: #c7c7c7;
}

::-moz-placeholder {
	/*Mozilla Firefox*/
	color: #c7c7c7;
	opacity: 1;
}

::-ms-input-placeholder {
	/*Internet Explorer 10+*/
	color: #c7c7c7;
}

.titleF03 {
	font-size: 16px;
	color: #0011ff;
}

.titleF04 {
	font-size: 20px;
	color: #ffffff;
	background-color: #0037ad;
	width: 100%;
	padding: 6px;
	margin: 6px auto;
}

/* *********************
    自製checkbox開始
********************* */
.custom {
	/* 主外框 */
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	cursor: pointer;
	border: 2px solid #01790d;
	border-radius: 5px;
	-moz-transition: background-color 0.2s ease-in;
	-webkit-transition: background-color 0.2s ease-in;
	-o-transition: background-color 0.2s ease-in;
	transition: background-color 0.2s ease-in;
}

.custom::before,
.custom::after {
	/* 上面的打勾 */
	content: "";
	position: absolute;
	width: 5px;
	background-color: white;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
	-o-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
	opacity: 0;
}

.custom::before {
	/* 打勾左邊的線 */
	height: 11px;
	top: 13px;
	left: 7px;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.custom::after {
	/* 打勾右邊的線 */
	height: 16px;
	top: 6px;
	left: 16px;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.custom:checked+.custom {
	/* 當check時 按鈕顏色改變 */
	background-color: #10bd2a;
}

.custom:checked+.custom::before,
.custom:checked+.custom::after {
	/* 當check時 打勾消失 */
	opacity: 1;
}

.custom {
	display: none;
}
.RAF_S select{
	/* display: none !important; */
	font-size: 20px;
}
/* *********************
    自製checkbox結束
********************* */

/* ============================================================
   Phase-1 utility classes  — inline style= 轉換對應 CSS
   (Bootstrap 5 已內建的項目不重複定義)
   ============================================================ */

/* 背景色 */
.bg-gray-eap       { background-color: #B5B5B5 !important; }
.bg-yellow-eap     { background-color: #FFFF00 !important; }
.bg-brand-eap      { background-color: #0469BC !important; }

/* 文字色 */
.text-black-eap    { color: #000000 !important; }

/* 高度 */
.ht-100px          { height: 100px; }

/* display */
.dib-eap           { display: inline-block; }
.db-eap            { display: block; }

/* vertical-align */
.valign-top-eap    { vertical-align: top; }
.valign-mid-eap    { vertical-align: middle; }

/* cursor */
.cursor-pointer-eap { cursor: pointer; }

/* 字級 */
.fs-xs-eap         { font-size: 12px; }
.fs-sm-eap         { font-size: 14px; }

/* spacing (補 Bootstrap 換算差距) */
.p-2-eap           { padding: 10px; }
.p-1-eap           { padding: 5px; }
.p-3-eap           { padding: 20px; }

/* 複合樣式 — compound style patterns (5+ 次出現) */
.bg-yellow-red-eap  { background: #ffff00; color: #ff0000; }
.row-expand-eap     { width: 100%; background: #ededed; cursor: pointer; }
.tar-m3-eap         { text-align: right; margin: 3px; }
.tal-m3-eap         { text-align: left;  margin: 3px; }
.fs-xs-red-eap      { font-size: 12px; color: #ff0000; }
.groove-input-eap   { border: 2px #000 groove; font-size: 16px; width: 35%; }
.fs-xs-w130-eap     { font-size: 12px; width: 130px; }
.red-lg-eap         { color: #ff0000; font-size: 20px; }
.text-navy-eap      { color: #111a92; }
.w20-p5-eap         { width: 20%; padding: 5px; }
.p-lg-txt-eap       { padding: 5px; font-size: 24px; line-height: 30px; }
.img-responsive-eap { max-width: 100%; border: 0; margin: 0 auto; }
.bg-light-eap       { background: #f5f5f5; }
.bg-topaz-eap       { background: #fcf358; }
.clear-wb-xs-eap    { clear: both; word-break: break-all; font-size: 12px; }
.list-outdent-eap   { margin-left: -20px; }
.ht-40px-eap        { height: 40px; }

/* Phase 1c — additional utility classes */
.fs-11px-eap        { font-size: 11px; }
.fs-07rem-eap       { font-size: 0.7rem; }
.fs-18px-eap        { font-size: 18px; }
.fs-6pt-eap         { font-size: 6pt; }
.w45-eap            { width: 45%; }
.w48-eap            { width: 48%; }
.w50px-eap          { width: 50px; }
.w70-eap            { width: 70%; }
.w80px-eap          { width: 80px; }
.w100px-eap         { width: 100px; }
.w220px-eap         { width: 220px; }
.w250px-eap         { width: 250px; }
.mt20-gray-eap      { margin-top: 20px; background: #bbbbbb; }
.widget-box-eap     { min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto; }
.w100-purple-eap    { width: 100%; background: #7373B9; }
.word-cell-eap      { width: 80px; border: solid windowtext 1pt; text-align: center; }
.word-cell-b-eap    { border: solid windowtext 1pt; text-align: center; }
.inp-highlight-eap  { font-size: 18px; border: 3px #FFAC55 solid; background-color: #FFFFFF; }
.w100-scroll-eap    { width: 100%; overflow: auto; text-align: center; }
.bg-cream-eap       { background: #FDF3D2; }
.center-dot-eap     { margin: -15px calc(100% / 2 - 18px); }
.right-dot-eap      { margin: -15px calc(100% - 80px); }

/* Phase 2 — dynamic style patterns */
.float-timer-eap    { position: fixed; top: 80px; z-index: 99; }
/* Progress bar (voteShow.php) */
.prog-track-eap     { height: 16px; width: 200px; background: #c0c0c0; }
.prog-bar-eap       { height: 16px; background: #f95e5e; font-size: 12px; color: #ffffff; line-height: 16px; }
.prog-native-eap    { width: 200px; height: 16px; vertical-align: middle; }
.prog-count-eap     { display: inline-block; margin-left: 6px; font-size: 12px; }

/* Phase 1d — cleanup utilities */
.clr-eap            { clear: both; }
.fs24-lh30-eap      { font-size: 24px; line-height: 30px; }
.groove-border-eap  { border: 2px #000 groove; }
.icon-20-eap        { width: 20px; height: 20px; }
.fs-20px-eap        { font-size: 20px; }
.mt-20px-eap        { margin-top: 20px; }
.w60px-eap          { width: 60px; }
.tar-fs20-eap       { text-align: right; font-size: 20px; }
.w20-eap            { width: 20%; }
.h30-w100-tc-eap    { height: 30px; width: 100%; text-align: center; }
.dib-w20-eap        { display: inline-block; width: 20%; }
.bg-silver-eap      { background: #c0c0c0; }
.fs16-red-eap       { font-size: 16px; color: #ff0000; }
.ml-n40-eap         { margin-left: -40px; }
.highlight-btn-eap  { font-weight: bolder; background: #0040ff; color: #ffffff; padding: 3px; }
.widget-sm-eap      { min-width: 350px; height: 400px; max-width: 25%; margin: 0 auto; text-align: center; }
.w30-eap            { width: 30%; }
.w40-eap            { width: 40%; }
.fs-13px-eap        { font-size: 13px; }
.text-brand-eap     { color: #0469BC; }
.bg-f0-eap          { background: #f0f0f0; }
.dtc-eap            { display: table-cell; }
.dt-eap             { display: table; }

/* Phase 1f — mop-up: remaining 2+ occurrence patterns */
.text-primary-eap   { color: #0000ff; }
.text-navy2-eap     { color: #2b24ff; }
.fs-red-bold-eap    { color: #ff0000; font-weight: bold; }
.fs18-red-eap       { color: #ff0000; font-size: 18px; }
.fs9-red-tal-eap    { color: #ff0000; font-size: 9px; text-align: left; }
.bg-737-eap         { background-color: #737373; }
.bg-E28-eap         { background-color: #E28A01; }
.bg-brand-white-eap { background-color: #0469BC; color: #ffffff; }
.w100-orange-eap    { width: 100%; background: #D94600; }
.card-white-eap     { background: #ffffff; padding: 10px; margin-top: 10px; width: 98%; margin: 4px auto; }
.w600px-eap         { width: 600px; }
.w1000px-eap        { width: 1000px; }
.w98-eap            { width: 98%; }
.w49-eap            { width: 49%; }
.w15-eap            { width: 15%; }
.w150px-eap         { width: 150px; }
.w100-max420-eap    { width: 100%; max-width: 420px; }
.mw-800px-eap       { max-width: 800px; }
.mw450-eap          { max-width: 450px; width: 100%; margin: 0 auto; }
.mw200-h200-eap     { max-width: 200px; height: 200px; }
.mw100-h200-eap     { max-width: 100%; height: 200px; }
.dib-w70-eap        { display: inline-block; width: 70%; }
.dib-w25-eap        { display: inline-block; width: 25%; }
.w100-auto-eap      { width: 100%; overflow: auto; }
.full-frame-eap     { width: 100%; height: 100%; border: 0; z-index: 1; }
.mb-2px-eap         { margin-bottom: 2px; }
.mb2-noclick-eap    { margin-bottom: 2px; cursor: default; }
.m4-red-eap         { margin: 4px 0; color: #ff0000; }
.w49-fr-brown-eap   { width: 49%; float: right; background: #a56d05; }
.rel-full-eap       { position: relative; width: 100%; height: 100%; }
.abs-fill-eap       { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.abs-center-icon-eap { position: absolute; left: calc((100% - 40px)/2); top: calc(50% - 40px); width: 40px; height: 40px; }
.fixed-110-eap      { position: fixed; top: 110px; z-index: 99; }
.w100-tc-f8-eap     { width: 100%; text-align: center; background: #f8f7e9; }
.tal-mx-p2-eap      { text-align: left; margin: 0 auto; padding: 10px; }
.clear-wb-eap       { clear: both; word-break: break-all; }
.fs-16pt-eap        { font-size: 16pt; }
.red-w98-eap        { color: #ff1a1a; width: 98%; }
.widget-m340-eap    { min-width: 340px; height: 400px; max-width: 100%; margin: 0 auto; text-align: center; }
.widget-m350-eap    { min-width: 350px; height: 400px; max-width: 100%; margin: 0 auto; text-align: center; }
.widget-m400-eap    { min-width: 400px; height: 400px; max-width: 100%; margin: 0 auto; text-align: center; }
.widget-m400-sm-eap { min-width: 400px; height: 400px; max-width: 25%;  margin: 0 auto; text-align: center; }
.flex-wrap-scroll-eap { display: flex; justify-content: left; flex-wrap: wrap; width: 100%; overflow: auto; text-align: center; }
/* further 1-occurrence utilities */
.red-yw-bold-eap     { color: #ff0000; background: #ffff00; font-weight: bold; }
.alert-banner-eap    { background: #ff0000; color: #ffffff; padding: 10px; line-height: 32px; font-size: 20px; }
.hero-blue-eap       { font-size: 40px; color: #1900ff; }
.mw100-red-lg-eap    { max-width: 100%; color: #ff0000; font-size: 20px; }
.fs-sm-red-eap       { font-size: 14px; color: #ff0000; }
.bg-red-eap          { background: #ff0a0a; }
.alert-cell-eap      { color: #ff0a0a; text-align: left; white-space: normal; background-color: #f6f6f6; }
.p-red-banner-eap    { padding: 10px; background: #ff0000; color: #ffffff; text-align: left; }
.bg-amber-eap        { background-color: #FFC845; }
.w45vw-eap           { width: 45vw; }
.w70px-eap           { width: 70px; }
.w85px-eap           { width: 85px; }
.w62px-eap           { width: 62px; }
.w86px-eap           { width: 86px; }
.w8-eap              { width: 8%; }
.w80-eap             { width: 80%; }
.w110px-eap          { width: 110px; }
.w120px-eap          { width: 120px; }
.w150px-eap          { width: 150px; }
.w300px-eap          { width: 300px; }
.w1000px-eap         { width: 1000px; }
.w1200px-eap         { width: 1200px; }
.w1300px-eap         { width: 1300px; }
.w100px-salmon-eap   { width: 100px; background: #FFC78E; }
.p-12px-eap          { padding: 12px; }
.mt-6px-eap          { margin-top: 6px; }
.h300-auto-eap       { height: 300px; overflow: auto; }
.h200px-eap          { height: 200px; }
.w100-h20-gray-eap   { width: 100%; height: 20px; background: #ebebeb; }
.border-collapse-eap { border-collapse: collapse; }
.pt15-40vw-fl-eap    { padding-top: 15px; width: 40vw; float: left; text-align: left; }
.border-red2-p3-eap  { border: 2px solid #f00000; padding: 3px; }
.border-gray-mw100-eap { border: 1px solid #A2A2A2; max-width: 100%; }
.border-white2-full-eap { border: 2px solid #ffffff; width: 100%; height: 100%; }
.tc-fs25-eap         { text-align: center; font-size: 25px; }
.tc-fs36-eap         { text-align: center; font-size: 36px; }
.tc-fs20-eap         { text-align: center; font-size: 20px; }
.clr-wbr-tr20-eap    { clear: both; word-break: break-all; text-align: right; font-size: 20px; }
.icon-fab-eap        { width: 39px; height: 39px; z-index: 999; top: 40%; left: 0.1em; }
.toast-hidden-eap    { position: fixed; min-width: 100px; max-width: 500px; height: 10px; display: none; }
.print-title-eap     { color: #1D30B0; font-size: 20px; line-height: 35px; text-align: center;
                       font-family: '微軟正黑體', '新細明體', Arial, Helvetica, sans-serif; }

/* Phase 1e — single-quoted style=' ' patterns */
.border-black-eap   { border: 1px solid black; }
.w500-bc-eap        { width: 500px; border-collapse: collapse; }
.w500-bk-eap        { width: 500px; border: 1px solid black; }
.w100px-bk-eap      { width: 100px; border: 1px solid black; }
.ls-sq-eap          { list-style-type: square; margin-left: -10px; }
.w200px-eap         { width: 200px; }
.fs-16px-eap        { font-size: 16px; }
.fs-15px-eap        { font-size: 15px; }
.dialog-card-eap    { max-width: 600px; }
.study-btn-half     { width: 49%; display: inline-block; }
.study-btn-alt      { width: 49%; float: right; background: #a56d05; }
.disc-list-eap      { list-style-type: disc; margin-left: -2px; }

.app-router01 {
	text-align:center;padding:2rem;color:#888;
}
.app-router02 {
	padding:1rem;color:red;
}
.dspNone {
	display:none;
}
.divOption {
	padding: 4px;
}