/*.nav-main .container a#all-list,
.nav-main .container a.admin.link{
	display:none;
}*/
a {
	color: inherit;
}

input {
	padding: 7px 15px;
	border-radius: 0px;
}

.main-page input[type="text"],
.main-page input[type="number"] {
	width: 250px;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
#register {
	max-width: 400px;
}

/*nav bar*/
.nav-main {
	background: #000;
	height: 70px;
	color: #fff;
	line-height: 70px;
}

.nav-main .container {
	margin: auto;
	font-size: 18px;
}

.nav-main .container a {
	display: inline-block;
	margin-right: 30px;
	padding: 0 10px;
}

.nav-main .container a.admin-hide {
	display: none;
}

.nav-main .container .logout,
.nav-main .container .username {
	float: right;
}

/*login page*/
.login-card .error-msg {
	display: none;
	color: red;
	font-weight: bold;
	margin-bottom: 15px;
}

.login-card #login_game {
	padding: 10px 25px !important;
}

.login-page .login-card .brand-wrapper img {
	width: auto;
}

/*register page*/
.register-page .login-card-description {
	display: inline-block;
}

.register-page .login {
	display: inline-block;
	margin-left: 130px;
	/*color:#4B0082;*/
}

.register-page .login+p {
	margin-bottom: 10px;
}

.register-page .login:hover {
	color: #4B0082;
}

.register-page .form-control{
	height: auto;
	/* vertical-align: sub; */
	/* padding-left: 12px; */
	/* padding-block-start: 12px; */
}

/*main page*/
.main-container {
	background: #ede7f6;
	min-height: 600px;
}

.main-container .container {
	width: auto;
	margin: auto;
}

.main-page .container .form {
	width: 70%;
	padding: 50px 20px;
}

.star {
	color: red;
}

.error-msg,
.password-error-msg {
	display: none;
}

.error-msg.show,
.password-error-msg.show {
	display: inline-block;
	color: red;
}

.main-page .container h1,
.admin-page .container h1,
.user-info-page h1 {
	padding: 30px 0;
	font-size: 32px;
}

.main-page .container .form h1+p {
	padding: 10px 0;
}

.main-page .container .form .item {
	width: 100%;
	padding: 30px;
	margin: 10px auto;
	background: #fff;
	border-radius: 8px;
}

.main-page .container .form .item .question {
	margin-bottom: 20px;
}

.main-page .container .form #trade_form_submit {
	margin: 20px 0;
	padding: 10px 30px;
	cursor: pointer;
}

.main-page .container .form #trade_form_submit:hover {
	color: #fff;
	background: #4B0082;
}

/*thank you page*/
.thankyou-page .container {
	text-align: center;
}

.thankyou-page .container h2 {
	font-size: 32px;
	padding-top: 100px;
	padding-bottom: 60px;
}

.thankyou-page .container a {
	font-size: 18px;
	padding: 8px 15px;
	text-decoration: underline;
}

.thankyou-page .container a:hover {
	background: #4B0082;
	color: #fff;
}

/*single transaction page*/
.transaction-page {
	padding-top: 50px;
	padding-bottom: 50px;
}

.transaction-page .container {
	padding-left: 15px;
	padding-right: 15px;
}

.transaction-page .container h1 {
	font-size: 32px;
	padding: 30px 0;
}

.transaction-page .container table {
	border: 1px solid #000;
	border-collapse: collapse;
	width: 100%;
}

.transaction-page .container table th {
	padding: 15px 7px;
	font-weight: bold;
	border: 1px solid #000;
}

.transaction-page .container table td {
	border: 1px solid #000;
	text-align: center;
}

.transaction-page .container {
	/* margin-top:50px; */
	margin-bottom: 50px;
}

/*all transaction page*/
.transaction-page .datepicker {
	margin: 15px 0;
}

.transaction-page .datepicker p {
	margin-bottom: 10px;
}

.transaction-page .datepicker .select-stockorder,
.transaction-page .datepicker .select-stockgame,
.transaction-page .datepicker .select-approvegame,
.transaction-page .datepicker .select-listgame,
.transaction-page .datepicker .select-chartscale,
.transaction-page .datepicker button {
	padding: 5px 20px;
	border-radius: 5px;
	cursor: pointer;
	background: transparent;
	margin-left: 10px;
}

.transaction-page .datepicker button:hover {
	color: white;
	background: rgb(75, 0, 130);
}


/*admin page*/
/*error styling*/

.error label {
	color: #c33;
	font-weight: bold;

}

.error-message {
	display: none;
}

.error .error-message {
	display: inline;
	padding-left: 1em;
	font-size: 0.9em;
	font-weight: normal;
	font-style: italic;
	color: #c55;
}




#wrapper {
	max-width: 600px;
	margin: 0 auto;
	padding: 1em 0;
}

/*h1 {
	margin: 1.5em 0;
}*/
.admin-page .container h1 {
	padding: 60px 0;
}

.admin-page .wrapper {
	width: auto;
	padding-bottom: 100px;
}

.admin-page .required_sign {
	margin-bottom: 15px;
}

.admin-page .required_sign span {
	color: red;
}

.admin-page p.item {
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	display: inline-block;
	position: relative;
}

.admin-page p.item.game {
	margin-left: 40px;
}

.admin-page p.item .error-msg.show {
	position: absolute;
	left: 0;
	bottom: -20px;
}

.admin-page p.item select,
.admin-page textarea {
	padding: 8px 20px;
	border-radius: 5px;
}

.admin-page label:first-child {
	display: inline-block;
	width: 7em;
}

.admin-page fieldset {
	margin-bottom: 2em;
	border: 1px solid #999;
	border-radius: 5px;
	padding: 12px;
}

.admin-page legend {
	padding: 0 0.8em;
	font-weight: bold;
	color: #666;
}

.admin-page button {
	margin: 10px 0 10px 20px;
	padding: 7px 20px;
	cursor: pointer;
	background: transparent;
	border-radius: 5px;
	display: inline-block;
}

.admin-page button.ml0 {
	margin-left: 0;
}


.admin-page input,
.admin-page select,
.admin-page textarea {
	min-width: 200px;
	box-sizing: content-box;
}


.admin-page button:hover {
	color: #fff;
	background: #4B0082;
}



.admin-page input[type=submit] {
	display: inline-block;
	padding: 0.8em 1.4em;
	border: none;
	border-radius: 10px;
	background-color: #393;
	color: #fff;
	font-size: 1em;
}

.admin-page input[type=text] {
	font-size: 1em;
}

.admin-page .item.block {
	display: block;
}

.admin-page .red {
	color: red;
}

.admin-page .green {
	color: green;
}

.admin-page table,
.admin-page table th,
.admin-page table td {
	border: 2px solid #888;
	padding: 5px;
}

.admin-page .checkbox {
	text-align: left;
	min-width: 0;
}

.popup-wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	background: white;
	text-align: center;
	padding: 20px;
	border-radius: 8px;
	box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
	transform: translate(-50%, -50%);
}

.popup-wrapper p {
	padding: 20px 0;
	font-size: 32px;
	margin-bottom: 20px;
	margin-top: 30px;
}

.popup.success .popup-wrapper p {
	color: green;
}

.popup.fail .popup-wrapper p {
	color: red;
}

.popup.warning .popup-wrapper p {
	color: darkorange;
}

.popup-wrapper button {
	margin: 10px 0;
	padding: 7px 20px;
	cursor: pointer;
	/* background: transparent; */
	border-radius: 5px;
	display: inline-block;
}

.popup-wrapper button:hover {
	color: #fff;
	background: #4B0082;
}

.popup .overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ede7f6;
	opacity: 0.6;
}

.CountDownTimer {
	position: fixed;
	right: 5px;
	bottom: 5px;
	width: auto;
	height: auto;
	background: #ede7f6;
	color: #c33;
	opacity: 0.5;
}

.admin-page .popup,
.main-page .popup,
.popup.submitted,
.popup.logoutwarning,
.popup.idlewarning {
	display: none;
}

.main-page .popup.fail .popup-wrapper p {
	line-height: 1.3;
	font-size: 24px;
	padding-top: 0;
}

.dataTables_wrapper .dataTables_filter,
.transaction-page #transaction_filter {
	margin-bottom: 10px;
	float: left !important;
	padding-right: 10px;
}

.mobile-menu-wrapper {
	display: none;
	width: 50px;
}

.nav-main .show {
	display: block !important;
}

.nav-main .container a.target {
	background-color: #4B0082;
}

@media (max-width:1050px) {
	.nav-main {
		position: relative;
	}

	.nav-main .container {
		display: none;
		position: absolute;
		top: 70px;
		background: white;
		color: black;
		width: 100%;
		padding-bottom: 10px;
		z-index: 99;
	}

	.nav-main .container a {
		display: block !important;
		margin-right: 0;
		padding-left: 15px;
	}

	.nav-main .container a.admin-hide {
		display: none !important;
	}

	.nav-main .container a:hover {
		background: #4B0082;
		color: white;
	}

	.nav-main .container .logout {
		float: none;
	}

	.nav-main .container #user-name {
		display: none !important;
	}

	.nav-main .container a.target {
		color: white;
	}

	.mobile-menu-wrapper {
		display: block;
		width: 40px;
		cursor: pointer;
		float: right;
		margin-right: 50px;
		padding-top: 10px;

	}

	.mobile-menu {
		width: 100%;
		/*float:right;
		margin-right:50px;*/
	}

}

/* user info page */
.user-info-page {
	padding-top: 50px;
	padding-bottom: 50px;
}

.user-info-page table {
	margin-top: 15px;
}

.user-info-page table td {
	padding: 15px;
}

.all-userinfo-page .container table th {
	padding: 15px 7px;
}

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

	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter {
		float: none;
		text-align: left !important;
	}
}

@media (max-width:496px) {
	.hasDatepicker {
		margin-top: 10px;
	}
}

@media (max-width:350px) {
	.main-page #amount {
		width: 200px;
	}
}

@media (max-width:945px) {
	.admin-page p.item.game {
		margin-left: 0px;
	}
}

@media (max-width:1120px) {
	.admin-page button {
		margin-left: 0;
	}
}

#user-table {
	display: none;
}

.all-userinfo-page h1+p {
	margin-top: 20px;
}

.search-wrapper {
	margin: 20px 0;
	display: flex;
}

.search-wrapper .item {
	padding-right: 10px;
}


#user-info-submit {
	/*margin: 10px 0 10px 0px;*/
	padding: 7px 20px;
	cursor: pointer;
	background: transparent;
	border-radius: 5px;
}

.all-transaction-page table#transaction,
.trade-approve-page table#transaction {
	display: none;
}

.trade-approve-page .datepicker input,
.all-transaction-page .datepicker input {
	margin-bottom: 10px;
}

.trade-approve-page table#transaction .btn {
	cursor: pointer;
	border-radius: 5px;
	padding: 5px 10px;
	border: none;
	box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
}

.trade-approve-page table#transaction .pass.btn {
	background: #D0F0C0;
}

.trade-approve-page table#transaction .reject.btn {
	background: #FA8072;
}

.trade-approve-page table#transaction .btn-wrapper {
	padding: 10px 2px;
}


.trade-approve-page table#transaction th.btn-wrapper .btn:first-of-type {
	margin-bottom: 7px;
}

.trade-approve-page table#transaction .btn-wrapper .btn {
	display: block;
	margin: auto;
}

.trade-approve-page table#transaction td.btn-wrapper .btn:first-of-type {
	margin-bottom: 10px;
}

.trade-approve-page .rejected {
	background: #FA8072;
}

.dataTable tr.odd {
	background-color: #FAFAFA;
}

.dataTable tr.even {
	background-color: #ede7f6;
}

.dataTable thead tr {
	background-color: #ede7f6;
}

.spinner {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 60px;
	width: 60px;
	margin: 0px auto;
	-webkit-animation: rotation .6s infinite linear;
	-moz-animation: rotation .6s infinite linear;
	-o-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left: 6px solid rgba(0, 174, 239, .15);
	border-right: 6px solid rgba(0, 174, 239, .15);
	border-bottom: 6px solid rgba(0, 174, 239, .15);
	border-top: 6px solid rgba(0, 174, 239, .8);
	border-radius: 100%;
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(359deg);
	}
}

@-moz-keyframes rotation {
	from {
		-moz-transform: rotate(0deg);
	}

	to {
		-moz-transform: rotate(359deg);
	}
}

@-o-keyframes rotation {
	from {
		-o-transform: rotate(0deg);
	}

	to {
		-o-transform: rotate(359deg);
	}
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}

.all-transaction-page .statisticsDiv,
.all-stockorder-page .statisticsDiv {
	background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
	margin-bottom: 50px;
	padding: 10px;
}

.all-stockorder-page .statisticsChartDiv,
.all-transaction-page .statisticsChartDiv {
	position: relative;
	height: 50vh;
	width: auto;
}

/* Style the tab */
.dd .tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.dd .tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
}

/* Change background color of buttons on hover */
.dd .tab button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.dd .tab button.active {
	background-color: #ccc;
}

/* Style the tab content */
.dd .tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}


/* .dd #pageImage1{ */
/* src: url(/assets/images/Pageheadshake2-211001.png); */
/* background-image: url(/assets/images/Pageheadshake2-211001.png); */

/* min-width: 100%; */

/* min-height: 100%; */

/* } */


/*entry page*/
.error-msg {
	display: none;
	color: red;
	font-weight: bold;
	margin-bottom: 15px;
}

.scrollbar {
	/* margin-left: 30px; */
	float: left;
	/* height: 300px; */
	height: 80vh;
	/* width: 65px; */
	width: 100%;
	background: #fff;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.force-overflow {
	min-height: 450px;
}

.scrollbar-primary::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #4285F4;
}

.scrollbar-danger::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

.scrollbar-danger::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

.scrollbar-danger::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #ff3547;
}

.scrollbar-warning::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

.scrollbar-warning::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

.scrollbar-warning::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #FF8800;
}

.scrollbar-success::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

.scrollbar-success::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

.scrollbar-success::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #00C851;
}

.scrollbar-info::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

.scrollbar-info::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

.scrollbar-info::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #33b5e5;
}

.scrollbar-default::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

.scrollbar-default::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

.scrollbar-default::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #2BBBAD;
}

.scrollbar-secondary::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

.scrollbar-secondary::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

.scrollbar-secondary::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #aa66cc;
}

.footer {
	background-color: #FFCBB3;
}
#nav-fee ul.nav {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	background-color: #fff;
}
#nav-fee.nav-trail ul.nav {
	border-bottom: 4px solid #318A07;
}
#nav-fee.nav-trail ul.nav li a{
	background-color: #EEFDEA;
}
#nav-fee.nav-trail ul.nav li a#nav-trail-tab{
	background-color: #318A07;
	color: #fff;
}
#nav-fee.nav-month ul.nav {
	border-bottom: 4px solid #078A63;
}
#nav-fee.nav-month ul.nav li a{
	background-color: #E8F7F3;
}
#nav-fee.nav-month ul.nav li a#nav-month-tab{
	background-color: #078A63;
	color: #fff;
}
#nav-fee.nav-year ul.nav {
	border-bottom: 4px solid #075A8A;
}
#nav-fee.nav-year ul.nav li a{
	background-color: #e8f2f8;
}
#nav-fee.nav-year ul.nav li a#nav-year-tab{
	background-color: #075A8A;
	color: #fff;
}

ul.nav li {
	width: 33%;
}
div.nav-trail #nav-trail,
div.nav-month #nav-month,
div.nav-year #nav-year{
	/* height: auto; */
	max-height: initial;
}
div.nav-trail #nav-month,
div.nav-trail #nav-year,
div.nav-month #nav-trail,
div.nav-month #nav-year,
div.nav-year #nav-trail,
div.nav-year #nav-month{
	max-height: 0vh;
	display: none;
}

ul.nav li a {
	display: block;
	background-color: #EEFDEA;
	border-radius: 16px 16px 0 0;
	color: #588C3F;
	font-size: 22px;
	padding: 14px 0;
	text-align: center;
	text-decoration: none;
}


.liTrail.active a {
	background-color: #318A07;
	color: #588C3F;
}

.liMonth.active a {
	background-color: #078A63;
	color: #588C3F;
}

.liYear.active a {
	background-color: #075A8A;
	color: #588C3F;
}


.liTrail.active a  li a {
	background-color: #EEFDEA;
	border-bottom-color: #318A07;
	/* border-bottom: 4px solid #318A07; */
}

ul.nav-trail li a:hover {
	background-color: #e6fce0;
}

ul.nav-month li a {
	background-color: #E8F7F3;
	border-bottom-color: #078a63;
	/* border-bottom: 4px solid #078a63; */
}

ul.nav-month li a:hover {
	background-color: #d7f1ea;
}

ul.nav-year li a {
	background-color: #e8f2f8;
	border-bottom-color: #075a8a;
	/* border-bottom: 4px solid #075a8a; */
}

ul.nav-year li a:hover {
	background-color: #afd1e6;
}

ul.nav li.active a {
	color: #fff;
}

ul.nav li.active.liTrail a {
	background-color: #318A07;
}

ul.nav li.active.liMonth a {
	background-color: #078a63;
}

ul.nav li.active.liYear a {
	background-color: #075a8a;
}

.nav-trail caption,
.nav-trail th{
	background-color: #318A07 !important;
	color: #fff !important;
}
.nav-trail th{
	width: 25%;
}
.nav-trail td{
	background-color: #EEFDEA !important;
	color: #318A07 !important;
}

.nav-month caption,
.nav-month th{
	background-color: #078a63 !important;
	color: #fff !important;
}
.nav-month th{
	width:25%;
}
.nav-month td{
	background-color: #E8F7F3 !important;
	color: #078a63 !important;
}
.nav-year caption,
.nav-year th{
	background-color: #075a8a !important;
	color: #fff !important;
}
.nav-year th{
	width:25%;
}
.nav-year td{
	background-color: #e8f2f8 !important;
	color: #075a8a !important;
}
.tab-pane td {
	border-width: 1px;
}

.tab-fee-content tbody{
	/* border-radius: 0 0 16px 16px;
	background-color: #ccc; */
}

.partner caption{
	border-bottom: 1px solid #CCC;
}
.partner td{
	/* width: 255px; */
	/* height: 80px; */
	/* vertical-align: middle; */
	/* border-radius: 16px; */
	/* border: #ccc; */
	/* border-width: 1px; */
	/* width: auto; */
	/* height: auto; */
	/* aspect-ratio: auto; */
	/* justify-content: end; */
	/* height: 100px; */
	/* object-fit: cover; */
}

.partner td a img,
.partner_body img{
	width: 260px;
	height: 10vh;
	/* height: max-content; */
	/* aspect-ratio: 2.5; */
	/* aspect-ratio: ; */
	/* padding: initial; */
	object-fit: scale-down;
}
#nav-fee-tabContent tr{
	vertical-align: middle;
}
#nav-fee-tabContent .recordQuery{
	height: 3.1em;
}
#nav-fee-tabContent .remark{
	height: 4.3em;
}

.antifraud_body img.ih100{
	height: 100px;
}
.antifraud_body img.ih200{
	height: 200px;
}

.announcement img.ih32{
	height: 32px;
}

#statrate{
	background-color: #6f42c120;
	padding: 10px;
	border-radius: 20px;
}

#statrate .title {
	color: #6f42c1;
}

#statrateUptime {
	font-size: 0.5rem;
}

.game-support {
	background: linear-gradient(to right, rgb(71, 72, 156), rgb(164, 65, 145));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: left;
	margin-bottom: 1rem;
}

.viewport {
	width: 100%;
}

del {
	color: red;
	/* 紅色 */
}

/* 將背景樣式應用到包含左右兩個統計區塊的 row */
.row.d-flex.align-items-stretch.g-2#statistics-section {
	background-color: #f0e6f6;
	/* 設定淺紫色背景，請根據需要調整顏色 */
	padding: 15px;
	/* 保持內邊距，控制內容與背景的距離 */
	border-radius: 2rem;
	/* 使用您手動設定的圓角 */
}

/* 確保右邊區塊內部的小單元格沒有會覆蓋父容器背景的背景 */
#statrate-counts .col-md-6 {
	background-color: transparent !important;
}

/* 將右側統計區塊內容垂直置中 */
#statrate-counts {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 為左側統計區塊添加右邊框作為垂直分隔線 */
#statrate-rates {
	border-right: 1px dashed #ccc;
	/* 灰色的虛線邊框，您可以根據喜好調整樣式和顏色 */
	padding-right: 15px;
	/* 增加右邊內邊距，讓內容與分隔線有間隔 */
}

/* 調整右側統計區塊的左邊內邊距，與左側邊框的內邊距對應 */
#statrate-counts {
	padding-left: 15px;
	/* 增加左邊內邊距 */
}

.statistics-container {
	padding-left: 0 !important;
	/* 移除左右內邊距 */
	padding-right: 0 !important;
	/* 移除左右內邊距 */
	max-width: 1200px;
	/* 設定最大寬度，已根據您手動修改的值調整 */
	margin: auto;
	/* 水平置中 */
}

.title {
	background: linear-gradient(to bottom, #6f42c1, #9b59b6);
	/* 紫色漸層 */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	/* 標準屬性 */
}

.title1 {
	background: linear-gradient(to bottom, #f03d3d, #ffd000);
	/* 紫色漸層 */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	/* 標準屬性 */
	font-size: 4.5rem;
	font-weight: bold;
}
.title2 {
	background: linear-gradient(to bottom,  #f5e614,#cf0000fb);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/* for Firefox */
	color: transparent;
}
.navbar-nav .nav-link {
	font-weight: bold;
	font-size: 1rem;
	color: #003366;
	/* 自訂深藍色，可依需求修改 */
}
.navbar-nav {
	margin-left: 0 !important;
	    	/* 去掉中間過大空白 */
}
.navbar-nav .nav-item {
	margin-left: 50px;
	/* 控制項目之間的間距 */
}
.dropdown-icon {
	font-size: 0.9rem;
	margin-left: 4px;
	color: #005BAC;
	/* 小 V 的顏色，可自訂 */
}
.navbar-nav .dropdown-toggle::after {
	display: none;
	/* 移除 Bootstrap 預設箭頭 */
}
.gsupei-service img {
		max-width: 100%;
		height: auto;
}
.gsupei-service .shadow-box {
	padding: 10px;
	border: 1px solid #eee;
	background: #fff;
	border-radius: 8px;
	margin-bottom: 15px;
	transition: transform 0.3s;
}
footer a {
	text-decoration: none;
}
/* ===== 熱門商家：桌機 3 欄、手機條列（1 欄）===== */
.boxes-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-top: 10px;
	gap: 16px;
}
@media (max-width: 400px) {
	/* < lg：手機/平板 改單欄 */
	.boxes-container {
		grid-template-columns: 1fr;
	}
}
.box {
	display: flex;
	align-items: center;/* 垂直置中 */
	gap: 20px;/* 圖片與文字間距，可自行調整 */
	position: relative;
	flex: 0 0 auto;
	width: 420px;
	padding: 20px;
	background:
		linear-gradient(white, white) padding-box,
		linear-gradient(to right, #6f42c1, #9b59b6) border-box;
	border-radius: 15px;
	text-align: right;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	flex-shrink: 0;/* 不要縮放 */
	border: 5px solid transparent;
}
.box-logo {
	width: 150px;
	height: 150px;
	object-fit: contain;
	border-radius: 8px;
	margin-right: 20px;
	background-color: #fff;
	max-width: none;
	flex-shrink: 0;
}
.box-left {
	display: flex;
	align-items: center;
	gap: 30px;/* 圖片與標題的間距，可自行調整 */
	flex-shrink: 0;
}
.box-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.header-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.box-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.box-header h2 {
	color: #b23c9a;
	font-size: 2em;
	margin: 0;
	font-weight: bold;
}
.box img {
	width: 100px;
	margin-bottom: 10px;
}
.box h2 {
	margin: 5px 0;
	color: #d43ea5;
}
.box p {
	font-size: 14px;
	color: #333;
}
.bear-service-text {
	color: #b23c9a;
	/* 你想要的顏色，可自訂 */
	text-align: center;
	/* 置中 */
	font-size: 3em;
	/* 字體大小可調整 */
	line-height: 2;
	/* 行距可調整 */
	margin: 0;
	padding: 0;
}
.cool-service-text {
	color: #b23c9a;
	/* 你想要的顏色，可自訂 */
	text-align: center;
	/* 置中 */
	font-size: 3em;
	/* 字體大小可調整 */
	line-height: 2;
	/* 行距可調整 */
	margin: 0;
	padding: 0;
}
.dragon-service-text {
	color: #b23c9a;
	/* 你想要的顏色，可自訂 */
	text-align: center;
	/* 置中 */
	font-size: 3em;
	/* 字體大小可調整 */
	line-height: 2;
	/* 行距可調整 */
	margin: 0;
	padding: 0;
}
.icon-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-left: 10px;
	align-items: center;
}
.icon-link {
	display: inline-flex;
	/* 保證是 inline 且可以控制圓形 */
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: transparent;
	padding: 0;
}
.icon-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: transparent;
	box-shadow: 0 0 2px #ccc;
	display: block;
}

.icon-img:hover {
	box-shadow: 0 0 8px #b23c9a;
}
.company-info {
	margin-top: 0px;
	font-size: 14px;
	text-align: center;
	color: #666;
	border-top: 1px solid #ddd;
	padding-top: 10px;
}
.back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 40px;
	height: 40px;
	background-color: #ffffff;
	color: #003366;
	border: none;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	display: none;
	/* 預設不顯示 */
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	z-index: 9999;/* ★ 重點 */
}
.back-to-top:hover {
	background-color: #f0f0f0;
}
@keyframes flipIn {
	from {
		transform: rotateX(90deg);
		opacity: 0;
	}
	to {
		transform: rotateX(0);
		opacity: 1;
	}
}
.flip-in {
	animation: flipIn 1.2s ease-out;
}
/* ===== 輪播：保持比例不變形 ===== */
.carousel-inner {
	overflow: hidden;
}
.carousel-item {
	aspect-ratio: 21 / 9;
}
/* 桌機：21:9 */
@media (max-width: 767.98px) {
	.carousel-item {
		aspect-ratio: 16 / 9;
	}
	/* 手機：4:3 */
}
.carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#desktopNav {
	display: none;
}
#mobileNav {
	display: block;
}
@media (min-width: 1200px) {
	#desktopNav {
		display: block;
	}
#mobileNav {
	display: none;
	}
}
/* 手機是 16:9、桌機是 21:9 的比例盒 */
.hero-ratio {
	--bs-aspect-ratio: 56.25%;
}
@media (min-width: 992px) {
	.hero-ratio {
		--bs-aspect-ratio: 48%;
	}
	/* 21:9 = 9/21*100 */
}
.hero-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* 等比例縮到盒內 */
	object-position: center;
	background: #fff;
	/* 想白邊就改 #fff */
}
/* footer單色背景 */
:root {
	--soft-orange: #FCD5CE;
	/* 你要的底色，可改 */
}
/* 也給個 fallback，萬一變數失效仍會顯示顏色 */
footer.site-footer.bg-soft-orange {
	background-color: var(--soft-orange, #FCD5CE) !important;
}
/* 預設一個高度，避免 FOUC，再用 JS 覆蓋 */
:root {
	--header-h: 64px;
}
body {
	padding-top: var(--header-h);
}
/* 高過內容 */
.header-shadow {
	background: #f5f5f5;
}