/* ====== 可辨識 - 焦點樣式  ====== */
/* 基本互動元素的焦點樣式 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
		outline: 0.125rem solid #23503f !important;
		outline-offset: 0.125rem !important;
}
/* Accordion 按鈕焦點樣式 */
.accordion-button:focus-visible {
		outline: 0.125rem solid #23503f !important;
		outline-offset: 0 !important;
		box-shadow: none !important;
}
/* 字體大小按鈕焦點樣式 */
.font-btn:focus-visible {
		outline: 0.125rem solid #23503f !important;
		outline-offset: 0 !important;
		box-shadow: 0 0 3px #23503f;
}
/* 底部導航和頂部導航的焦點樣式 */
.bot_nav.navbar-nav .nav-item .nav-link:focus-visible, .top_header .navbar-nav .nav-link:focus-visible {
		color: #ffffff !important;
		outline-offset: 0 !important;
		background-color: #32584C !important;
		outline: 0.0625rem solid #32584C !important;
}
/* 一般導航連結和品牌標誌的焦點樣式 */
.nav-link:focus-visible, .navbar-brand:focus-visible {
		color: #ffffff;
		outline-offset: 0 !important;
		background-color: #2a395a !important;
		outline: 0.0625rem solid #23503f !important;
}
/* Skip link 樣式 */
.skip-link {
		position: absolute;
		padding: 8px;
		background: #23503f;
		color: #fff;
		z-index: 9999;
		/* 預設隱藏 */
		transform: translateY(-100%);
		transition: transform 0.3s;
}
/* Skip link 焦點樣式 */
.skip-link:focus-visible {
		position: static;
		transform: translateY(0);
}
/* Logo 列表項目焦點樣式 */
#links .logo-list a:focus-visible .logo-block .pic {
		outline: 0.0625rem solid #0066cc !important;
		outline-offset: 0 !important;
}
/* 移除一般焦點時的外框 */ :focus {
		outline: none;
}
/* 支援減少動態效果的使用者 */
@media (prefers-reduced-motion: reduce) {
		.skip-link {
				transition: none;
		}
}
/* 高對比度模式支援 */
@media (prefers-contrast: more) {
		:focus-visible {
				outline-width: 0.25rem !important;
				outline-color: #000000 !important;
		}
}
/* ====== Captcha ====== */
#captcha-image {
		border-radius: 0.25rem;
		-webkit-box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
		box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
		width: 100%;
}
.refresh-captcha {
		color: #40725F
}
.refresh-captcha:hover {
		color: #8A4000;
}
@media (max-width: 30rem) {
		#captcha-image {
				height: 2.0625rem;
		}
}
/* ====== Form ====== */
label, .form-label {
		font-weight: bold;
		font-size: 1.125rem;
}
.form-check-label {
		font-weight: normal;
}
.form-check-input {
		width: 1.25em;
		height: 1.25em;
		margin-right: 0.5em;
}
.is_required::after {
		content: '*';
		font-size: 1.5em;
		line-height: 1;
		position: relative;
		color: #FF0004;
		font-weight: normal;
}
.form-control.is-valid, .was-validated .form-control:valid, .form-check-input.is-invalid, .was-validated .form-check-input:invalid, .form-check-input.is-valid, .was-validated .form-check-input:valid, .form-select.is-valid, .was-validated .form-select:valid, .form-select.is-invalid, .was-validated .form-select:invalid {
		border-width: 0.125rem;
}
.form-select, .form-control, .form-check-input {
		border-color: #5b5b5b;
}
.remark-text {
		font-size: 0.8125rem;
}
.w-ch {
		min-width: 4.375rem;
		font-weight: bold;
}
a.no_underline {
		text-decoration: none;
}
a.no_underline:hover {
		text-decoration: underline;
}
.sentbtn {
		min-width: 9.375rem;
}
.sentbtn_done:hover, .sentbtn:hover, .sentbtn_done:focus, .sentbtn:focus {
		background-color: #40725F;
		color: #fff;
}
.fancybox-close-small {
		position: absolute;
		width: 3.125rem;
		height: 3.125rem;
}
.fancybox-close-small:after, .fancybox-close-small, .fancybox-close-small:focus {
		outline: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		border: 0 !important;
}
.fancybox-close-small:after {
		content: "×";
		font-family: 'Noto Sans TC', sans-serif;
		position: absolute;
		top: 0.3125rem;
		right: 0.3125rem;
		width: 3.125rem;
		height: 3.125rem;
		line-height: 3.125rem;
		font-size: 2.5em;
		color: #888;
		font-weight: 300;
		text-align: center;
		border-radius: 100%;
		border: 0 !important;
		background-color: transparent;
		-webkit-transition: background-color 0.25s;
		-o-transition: background-color 0.25s;
		transition: background-color 0.25s;
}
input[type="checkbox"] {
		width: 1.25em;
		height: 1.25em;
}
.form-controll, .form-check-label {
		font-size: 1.125em;
		padding-left: 0.25rem;
}
.under-msg {
		margin: auto;
		position: fixed !important;
		text-align: center;
		bottom: 1rem;
		right: 1rem;
		left: auto;
		background-color: rgba(0, 0, 0, 0.75);
		color: #ffffff;
		padding: 1rem;
		min-width: 18.75rem;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		border: 0;
}
.under-msg.alert-success {
		background-color: rgba(9, 106, 70, 0.9);
}
.under-msg.alert-danger, .under-msg.alert-warning {
		background-color: rgba(220, 0, 0, 0.65);
}
.under-msg i {
		margin-right: 0.5rem;
}
.has-line {
		position: relative;
}
.has-line::after {
		content: '';
		position: absolute;
		bottom: 0;
		right: 1rem;
		width: calc(100% - 2rem);
		height: 0.0625rem;
		display: block;
		background-color: #fcdcfc;
}
.has-line .invalid-feedback {
		background-color: #dc3545;
		width: 0.9375rem;
		height: 0.9375rem;
		border-radius: 100%;
		left: -0.5rem;
		top: -0.5rem;
		position: absolute;
}
.btn-mode {
		position: relative;
		overflow: visible;
		min-width: 7.5rem;
		padding-left: 0.125rem !important;
		padding-right: 0.125rem !important;
		z-index: 2;
}
.btn-mode > input {
		position: absolute;
		font-size: 1rem;
		font-weight: bold;
		min-width: 7.5rem;
		padding-left: 0.125rem !important;
		padding-right: 0.125rem !important;
		opacity: 0;
		right: 0;
		top: 0;
}
.btn-primary {
		color: #320051;
		background-color: #fcdcfc;
		border-color: #fcdcfc;
}
.reg-board .form-control {
		padding: 0.75rem;
}
.custom-file-label {
		position: absolute;
		top: 0;
		width: calc(100% - 7.8125rem);
		height: 100%;
		right: 0;
		font-size: 1rem;
		padding-left: 1rem;
		overflow: hidden;
		background-color: transparent;
		border: 0;
		color: #fcdcfc;
}
.body-overlay.active {
		z-index: 1020;
		-webkit-transition: opacity 0.3s ease, width 0s;
		-o-transition: opacity 0.3s ease, width 0s;
		transition: opacity 0.3s ease, width 0s;
		opacity: 1;
		width: 100%;
		visibility: visible;
}
.body-overlay {
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: -1;
		pointer-events: none;
		-webkit-backface-visibility: hidden;
		-webkit-transition: opacity 0.3s ease;
		-o-transition: opacity 0.3s ease;
		transition: opacity 0.3s ease;
}
.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0);
}
.loading-overlay.active {
		z-index: 1021;
		-webkit-transition: opacity 0.3s ease, width 0s;
		-o-transition: opacity 0.3s ease, width 0s;
		transition: opacity 0.3s ease, width 0s;
		opacity: 1;
		width: 100%;
		visibility: visible;
}
.loading-overlay.stop {
		opacity: 0;
		z-index: -1;
		pointer-events: none;
		-webkit-backface-visibility: hidden;
		-webkit-transition: opacity 0.3s ease;
		-o-transition: opacity 0.3s ease;
		transition: opacity 0.3s ease;
}
.loading-overlay.stop .css3-spinner > div {
		-webkit-animation: none !important;
		animation: none !important;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
		border-width: 0.125rem;
}
#dialog-content .modal-header .btn-close, #dialog-content .modal-header .btn-close:focus {
		border: 0;
		outline: none;
		-webkit-box-shadow: none;
		box-shadow: none;
}
#dialog-content {
		margin: auto;
}
#dialog-content .modal-header {
		border: 0;
}
#dialog-content .modal-body h3 {
		text-align: center;
		line-height: 1.5;
}
#dialog-content .modal-body h5 {
		line-height: 1.75;
}
@media (min-width: 61.9375rem) {
		.form-check .form-check-input {
				position: relative;
				top: 0.0625rem;
		}
		.remark-text {
				font-size: 1rem;
		}
}
@media (min-width: 48rem) {
		.reg-board {
				max-width: 30rem;
				margin: auto;
				margin-top: 10rem;
		}
}
@media (max-width: 25rem) {
		.col-xs-12 {
				max-width: 100%;
				width: 100%;
		}
}
.css3-spinner {
		color: #0b5ed7;
		position: relative;
		z-index: auto;
		background-color: transparent;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
}
.contactpage .css3-spinner {
		color: #0b5ed7;
}
.contactpage .css3-spinner > div {
		background-color: #0b5ed7;
}
.css3-spinner > div {
		width: auto;
		height: 0.9375rem;
		gutters: 0;
		radius: 100%;
		margin: 0 0.3125rem;
		background-color: #0b5ed7;
		border-radius: 100%;
		display: inline-block;
		-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
		animation: bouncedelay 1.4s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
}
.css3-spinner > div > div {
		width: 0.9375rem;
		height: 0.9375rem;
		margin: 0 0.3125rem;
		border-radius: 100%;
}
.css3-spinner .css3-spinner-bounce1, .css3-spinner .css3-spinner-bounce2, .css3-spinner .css3-spinner-bounce3 {
		width: 0.9375rem;
		gutters: 0.1875rem;
}
.css3-spinner .css3-spinner-bounce1 {
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
}
.css3-spinner .css3-spinner-bounce2 {
		-webkit-animation-delay: -0.16s;
		animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
		0%, 80%, 100% {
				-webkit-transform: scale(0);
				transform: scale(0);
		}
		40% {
				-webkit-transform: scale(1);
				transform: scale(1);
		}
}
@keyframes bouncedelay {
		0%, 80%, 100% {
				-webkit-transform: scale(0);
				transform: scale(0);
		}
		40% {
				-webkit-transform: scale(1);
				transform: scale(1);
		}
}
.css3-spinner > .css3-spinner-flipper {
		width: 2rem;
		radius: 0;
		-webkit-animation: rotateplane 1.2s infinite ease-in-out;
		animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
		0% {
				-webkit-transform: perspective(7.5rem) rotateX(0deg) rotateY(0deg);
				transform: perspective(7.5rem) rotateX(0deg) rotateY(0deg);
		}
		50% {
				-webkit-transform: perspective(7.5rem) rotateX(-180.1deg) rotateY(0deg);
				transform: perspective(7.5rem) rotateX(-180.1deg) rotateY(0deg);
		}
		100% {
				-webkit-transform: perspective(7.5rem) rotateX(-180deg) rotateY(-179.9deg);
				transform: perspective(7.5rem) rotateX(-180deg) rotateY(-179.9deg);
		}
}
@keyframes rotateplane {
		0% {
				-webkit-transform: perspective(7.5rem) rotateX(0deg) rotateY(0deg);
				transform: perspective(7.5rem) rotateX(0deg) rotateY(0deg);
		}
		50% {
				-webkit-transform: perspective(7.5rem) rotateX(-180.1deg) rotateY(0deg);
				transform: perspective(7.5rem) rotateX(-180.1deg) rotateY(0deg);
		}
		100% {
				-webkit-transform: perspective(7.5rem) rotateX(-180deg) rotateY(-179.9deg);
				transform: perspective(7.5rem) rotateX(-180deg) rotateY(-179.9deg);
		}
}
.css3-spinner > .css3-spinner-double-bounce1, .css3-spinner > .css3-spinner-double-bounce2 {
		width: 2.5rem;
		radius: 50%;
		position: absolute;
		opacity: 0.6;
		-webkit-animation: cssspinnerbounce 2.0s infinite ease-in-out;
		animation: cssspinnerbounce 2.0s infinite ease-in-out;
}
.css3-spinner > .css3-spinner-double-bounce2 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
}
@-webkit-keyframes cssspinnerbounce {
		0%, 100% {
				-webkit-transform: scale(0);
				transform: scale(0);
		}
		50% {
				-webkit-transform: scale(1);
				transform: scale(1);
		}
}
@keyframes cssspinnerbounce {
		0%, 100% {
				-webkit-transform: scale(0);
				transform: scale(0);
		}
		50% {
				-webkit-transform: scale(1);
				transform: scale(1);
		}
}
@media (max-width: 74.99875rem) {}
@media (max-width: 61.99875rem) {
		.refresh-captcha, #appealform label, #appealform .form-label {
				font-size: 1rem;
		}
		#appealform .form-check-label, #appealform .form-check-label {
				font-size: 1rem;
		}
		#appealform .small, #appealform small {
				font-size: 0.8125rem;
		}
		.form-control::-webkit-input-placeholder {
				font-size: 0.8125rem;
		}
		.form-control::-moz-placeholder {
				font-size: 0.8125rem;
		}
		.form-control:-ms-input-placeholder {
				font-size: 0.8125rem;
		}
		.form-control::-ms-input-placeholder {
				font-size: 0.8125rem;
		}
		.form-control::placeholder {
				font-size: 0.8125rem;
		}
		::-webkit-input-placeholder { /* Chrome/Opera/Safari */
				font-size: 0.8125rem;
		}
		::-moz-placeholder { /* Firefox 19+ */
				font-size: 0.8125rem;
		}
		:-moz-placeholder { /* Firefox 18- */
				font-size: 0.8125rem;
		}
		a.no_underline {
				font-size: 0.85rem;
		}
}
@media (max-width: 47.99875rem) {
		#dialog-content h3 {
				font-size: 1.25rem;
		}
		#dialog-content h5 {
				font-size: 1.125rem;
		}
		#dialog-content p {
				font-size: 0.8125rem;
		}
		.refresh-captcha, #appealform label, #appealform .form-label {
				font-size: 0.825rem;
		}
		#appealform .form-check-label, #appealform .form-check-inline, #appealform .form-select, #appealform .form-control {
				font-size: 0.8125rem;
		}
		#appealform .small, #appealform small {
				font-size: 0.75rem;
		}
		.sentbtn_done, .sentbtn {
				font-size: 1.125rem;
		}
}
@media (max-width: 30rem) {
		#appealform .form-check-label {
				text-align: start;
				padding-left: 0;
		}
		a.no_underline {
				font-size: 0.8125rem;
		}
		.under-msg {
				font-size: 1rem;
				bottom: 1rem;
				left: 0;
				right: 0;
				padding: 1rem;
				min-width: inherit;
				max-width: 80%;
		}
		#dialog-content h3 {
				font-size: 1.125rem;
		}
		#dialog-content h5 {
				font-size: 1rem;
		}
		#dialog-content p {
				font-size: 0.8125rem;
		}
		.sentbtn_done, .sentbtn {
				font-size: 1rem;
		}
}