@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
	--color6: #F4FBFF;
}

html,
body {
	background-color: var(--color9);
	color-scheme: dark;
	color: var(--color14);
}

.bg-white {
	background: var(--color9) !important;
}

.dark.mobile,
.light {
	display: none !important;
}

.dark {
	display: block !important;
}

/*focus style Access Key*/
a,
a:hover,
.nav-link:hover,
.nav-link:focus {
	color: var(--color6);
}

a:focus,
a:focus-visible,
button:focus,
button:focus-visible {
	outline: 2px dashed #ffa833 !important;
	color: var(--color6);
}

.theme-controls button,
.font-size-controls button {
	color: black;
}

footer {
	background-color: var(--color10);
}

footer ul li:nth-child(1) {
	background: url(../images/dark/icon-phone.svg) 20px 10px no-repeat var(--color9);
	background-size: 40px;
	padding-top: 12px;
}

footer ul li:nth-child(2) {
	background: url(../images/dark/icon-mail.svg) 20px 10px no-repeat var(--color9);
	background-size: 40px;
	padding-top: 20px;
}

footer ul li:nth-child(3) {
	background: url(../images/dark/icon-pop.svg) 20px 10px no-repeat var(--color9);
	background-size: 40px;
	padding-top: 12px;
}

.sitemap {
	background: url(../images/dark/banner6.png) top center no-repeat;
}

.pro {
	background: url(../images/dark/banner3.png) top center no-repeat;
}

.policy {
	background: url(../images/dark/banner5.png) top center no-repeat;
}

.about {
	background: url(../images/dark/banner2.png) top center no-repeat;
}

.service-list {
	background: url(../images/dark/banner1.png) top center no-repeat;
}

.service {
	background: url(../images/dark/banner4.png) top center no-repeat;
}

.banner {
	padding-top: 500px;
	background-size: auto 400px;
}

.service-list ul li div {
	background: var(--color9);
}

.service-list ul li:hover div {
	background: var(--color8);
}

.service-list ul li:hover div::before {
	border-left: 2px dashed #B5B5B6;
}

.play-mp3,
.play-mp3.playing {
	background-color: var(--color8);
}

.gotop,
.gotop:focus {
	color: black;
}

h2.title {
	background: var(--color10);
}

.bread,
.bread a {
	color: var(--color6);
}

.btn-primary {
	background-color: var(--color8);
	border-color: var(--color8);
}

.form-select,
.btn-outline-primary {
	border-color: var(--color1);
}

.bt-round {
	background: var(--color8);
}

.bt-pdf {
	background: url(../images/dark/pdf.svg) left center no-repeat;
	background-size: 35px;
}

.bt-pdf:hover {
	color: #5cc5e5;
}

.form-select {
	background: url(../images/dark/arrow2.svg) no-repeat var(--color9);
	background-size: 25px;
	background-position-x: calc(100% - 10px);
	background-position-y: 50%;
}

.locate a {
	color: #5cc5e5;
}

.locate span.add::before {
	filter: invert(47%) sepia(55%) saturate(7106%) hue-rotate(171deg) brightness(99%) contrast(101%);
}

.about .pic {
	opacity: .7;
}

.box {
	background: none;
	border: 1px solid var(--color13);
}

ul li::marker {
	color: var(--color2);
}

.key {
	color: black;
}

.sitemap-links ul li {
	background: var(--color10);
}

.sitemap-links ul li::before,
.sitemap-links ul li::after,
.sitemap-links ul li:first-child::before {
	background: var(--color2);
}

.text-blue {
	color: var(--color1);
}

@media only screen and (min-width: 0) and (max-width: 87.5em) {
	.nav-menu {
		background-color: var(--color9);
	}
}

@media only screen and (min-width: 0) and (max-width: 82.5em) {
	.banner {
		padding-top: 350px;
		background-size: auto 300px;
	}

	.banner.service-list {
		padding-top: 300px;
	}
}

@media only screen and (min-width: 0) and (max-width: 68.75em) {

	footer ul li:nth-child(1),
	footer ul li:nth-child(2),
	footer ul li:nth-child(3) {
		background-size: 30px;
		background-position: 15px 15px;
	}
}

@media only screen and (min-width: 0em) and (max-width: 47.9em) {
	.banner {
		padding-top: 250px;
		background-size: auto 200px;
	}

	.banner.service-list {
		padding-top: 200px;
	}

	.dark.pc {
		display: none !important;
	}

	.dark.mobile {
		display: block !important;
	}
}