@charset "utf-8";

/* CSS Document */
/*------------------------------------------------------------
選單 navbar 強制變更
------------------------------------------------------------*/
.offcanvas {
	--bs-offcanvas-width: 220px !important;
}

.offcanvas-header {
	/*background-color: rgba(233,233,233,0.87) !important;*/
	height: 66px;
}

.offcanvas-header .btn-close {
	padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * 1.5);
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") no-repeat center/1.25rem auto;
}

.offcanvas.show,
.offcanvas.showing {
	/*background-color: rgba(233,233,233,0.87) !important;*/
}

.offcanvas-body {
	padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
	padding-left: calc(var(--bs-offcanvas-padding-x) * 1);
}



@media screen and (max-width: 768px) {
	.nav-link {
		/*font-size: 1.5rem;*/
	}
}

/*.navbar-nav .dropdown:hover .dropdown-menu{
	display: block;
}*/

.dropdown-menu,
.dropdown-menu.show {
	background-color: rgba(255, 255, 255, 1) !important;
	opacity: 0.95;
	min-width: 150px;
	width: auto;
	/*margin-top: 0.2rem;*/
}

/*.offcanvas.showing .dropdown-menu.show */

@media screen and (max-width: 768px) {

	.dropdown-menu,
	.dropdown-menu.show {
		/*background-color: rgba(255,255,255,0.00) !important;*/
	}
}

.dropdown:hover .dropdown-menu {
	display: block;
}


.dropdown-menu .dropdown-item {
	padding: calc(var(--bs-dropdown-item-padding-y)*.6) calc(var(--bs-dropdown-item-padding-x)*.5) !important;
}

.dropdown-menu .dropdown-item:hover {
	padding: calc(var(--bs-dropdown-item-padding-y)*.6 - var(--bs-cjcu-obvious-border-width)) calc(var(--bs-dropdown-item-padding-x)*.5 - var(--bs-cjcu-obvious-border-width)) !important;
}


.navbar a,
.navbar a:focus {
	color: var(--bs-dark) !important;
}

.navbar a i,
.navbar a:focus i {
	/*font-size: 1rem;*/
	line-height: 0;
	margin-left: 5px;
}

.nav-link:hover,
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
	font-weight: 600;
	border-radius: 5px;
	page-break-after: 0.2rem;
	color: var(--bs-dark);
}

.show.nav-item li:hover>a {
	font-weight: 600;
	border-radius: 5px;
	page-break-after: 0.2rem;
	color: var(--bs-dark);
	background-color: rgba(255, 255, 255, 0.00);
}

.show.nav-item li:hover>a:hover {
	background-color: var(--bs-cjcu-obvious-bg-color);
	border: var(--bs-cjcu-obvious-border-color) var(--bs-cjcu-obvious-border-width) var(--bs-cjcu-obvious-border-style)
}

.show.nav-item li:hover>img:hover {
	background-color: var(--bs-cjcu-obvious-bg-color);
	border: var(--bs-cjcu-obvious-border-color) var(--bs-cjcu-obvious-border-width) var(--bs-cjcu-obvious-border-style)
}

.navbar .dropdown ul li {
	min-width: 100px;
}

.navbar .dropdown ul a {
	/*
		padding: 10px 20px;
		font-size: 1.25rem;
		text-transform: none;
		font-weight: 400;
		*/
	font-weight: 600;
	color: var(--bs-dark) !important;
}


.navbar-expand-lg .navbar-nav .nav-link {
	padding: calc(var(--bs-gutter-x) * .1) calc(var(--bs-gutter-x) * .2);
}

@media (min-width: 992px) {
	.navbar-expand-lg .navbar-nav .nav-link {
		padding: calc(var(--bs-gutter-x) * .1) calc(var(--bs-gutter-x) * .2);
	}
}

.menu_dark.navbar a,
.menu_dark.navbar a:focus {
	color: var(--bs-dark) !important;
}

.menu_dark.navbar a i,
.menu_dark.navbar a:focus i {
	/*font-size: 1rem !important;*/
	line-height: 0 !important;
	margin-left: 5px !important;
}

.menu_dark.navbar a:hover,
.menu_dark.navbar .active,
.menu_dark.navbar .active:focus,
.menu_dark.navbar li:hover>a {
	font-weight: 600 !important;
	border-radius: 5px !important;
	page-break-after: 0.2rem !important;
	color: #151515 !important;
	background-color: rgba(200, 200, 200, 0.45) !important;

}

.navbar-toggler {
	padding: 2px 8px !important;
	/*border: 0em solid!important;*/
	margin: 10px 0px;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.2rem
}

.navbar-toggler-icon {
	width: 1.5em;
	height: 1.5em;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(048, 048, 048, 0.4)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important
}

.border-light {
	border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
	--bs-border-opacity: .7;
}