@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/** ======================= 
Reset 
======================= **/
a, a:hover {
		text-decoration: none;
		-webkit-transition: all .1s ease;
		-o-transition: all .1s ease;
		transition: all .1s ease;
}
a:focus, select:focus, input:focus, textarea:focus, button:focus, optgroup:focus {
		outline: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
}
.navbar-toggler:focus {
		outline: none;
		-webkit-box-shadow: none;
		box-shadow: none;
}
.card.reset, .card.reset .card-footer, .card.reset .card-header {
		border: 0;
		background-color: transparent;
}
/** ======================= 
Basic 
======================= **/
body {
		font-family: Microsoft JhengHei, '微軟正黑體', 'Barlow', Helvetica, Arial, sans-serif;
		font-weight: 500;
		line-height: 1.5;
		font-size: 1rem;
}
.no, .no.large {
		font-family: Arial, sans-serif;
}
.no.large {
		font-size: 150%;
		line-height: 1;
}
.text-red {
		color: #cc0000;
}
/** ======================= 
List
======================= **/
.listt-tw {
		list-style-type: cjk-ideographic;
}
/** ======================= 
Sapce 
======================= **/
.wide {
		max-width: 100%;
}
@media (min-width: 2540px) {
		.wide {
				max-width: 2540px;
		}
}
/** ======================= 
Nav
======================= **/
nav.navbar .navbar-brand {
		width: 220px;
		height: auto;
		z-index: 2;
		padding: 0;
		margin: 0;
		line-height: 1;
}
nav.navbar {
		background-color: transparent;
}
nav.navbar > .wide {
		padding: 1.5rem 2rem;
}
nav.navbar.show {
		background-color: RGBA(0, 0, 0, .85)
}
nav.navbar.show > .wide {
		padding: 1rem 2rem;
}
nav.navbar.show .navbar-brand {
		width: 158px;
}
nav.navbar, nav.navbar > .wide, nav.navbar .navbar-brand, nav.navbar.show, nav.navbar.show > .wide, nav.navbar.show .navbar-brand {
		-webkit-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
}
@media (min-width: 2540px) {
		nav.navbar > .wide {
				padding: 2rem 3rem;
		}
		nav.navbar.show > .wide {
				padding: 1.25rem 3rem;
		}
}
@media (max-width: 1199px) {
		nav.navbar .navbar-brand {
				width: 160px;
		}
}
@media (max-width: 991px) {
		nav.navbar .navbar-brand {
				width: 120px;
		}
		nav.navbar > .wide {
				padding: .75rem 1rem;
		}
		nav.navbar.show .navbar-brand {
				width: 100px;
		}
		nav.navbar.show > .wide {
				padding: .5rem 1rem;
		}
}
/** ======================= 
Navbar Toggler
======================= **/
.toggler-block {
		height: 30px;
}
.navbar-toggler {
		position: relative;
		width: 30px;
		height: 30px;
		padding: 0;
		z-index: 2;
		cursor: pointer;
}
.navbar-toggler .menu-bar {
		display: inline-block;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		max-width: 90%;
		height: 2px;
		background-color: #cccccc;
}
.navbar-toggler.open .menu-bar, .navbar-toggler .menu-bar {
		-webkit-transition: all .2s linear;
		-o-transition: all .2s linear;
		transition: all .2s linear;
		-webkit-transform-origin: center;
		-ms-transform-origin: center;
		transform-origin: center;
}
.navbar-toggler .menu-bar-top {
		-webkit-transform: translate(0px, -8px);
		-ms-transform: translate(0px, -8px);
		transform: translate(0px, -8px);
}
.navbar-toggler .menu-bar-bottom {
		-webkit-transform: translate(0px, 8px);
		-ms-transform: translate(0px, 8px);
		transform: translate(0px, 8px);
}
.navbar-toggler .menu-bar-middle {
		opacity: 1;
		-webkit-transition: all .1s linear;
		-o-transition: all .1s linear;
		transition: all .1s linear;
}
.navbar-toggler.open .menu-bar-top {
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
}
.navbar-toggler.open .menu-bar-middle {
		opacity: 0;
		-webkit-transition: all .1s linear;
		-o-transition: all .1s linear;
		transition: all .1s linear;
}
.navbar-toggler.open .menu-bar-bottom {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
}
/** ======================= 
Bootstrap offcanvas-navbar 
======================= **/
@media (max-width: 991px) {
		.offcanvas-collapse {
				position: fixed;
				top: 0;
				bottom: 0;
				left: 100%;
				width: 40%;
				padding-top: 6rem;
				padding-right: 1rem;
				padding-left: 1rem;
				overflow-y: auto;
				visibility: hidden;
				background-color: #343a40;
				-webkit-transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
				transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
				-o-transition: transform .3s ease-in-out, visibility .3s ease-in-out;
				transition: transform .3s ease-in-out, visibility .3s ease-in-out;
				transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
		}
		.offcanvas-collapse.open {
				visibility: visible;
				-webkit-transform: translateX(-100%);
				-ms-transform: translateX(-100%);
				transform: translateX(-100%);
		}
}
@media (max-width: 576px) {
		.offcanvas-collapse {
				width: 100%;
		}
}