@charset "utf-8";
/* CSS Document */

html, body{
	padding:0;
	margin:0;
	font-family:微軟正黑體,Arial;
	/*font-size:1rem;*/
	color:#333333;
	height:100%;
}

img {
	border:0;
}

#mainwrapper{
	min-height:100%;
}

#pagecontent {
	/*
	padding-top:30px;
	padding-bottom:30px;
	*/
	padding: 30px;
	margin-bottom:30px;
}

#pagecontent2 {
	padding-top:30px;
	padding-bottom:30px;
	margin-bottom:30px;
}

#footer{
	border-top:1px solid #d5d5d5;
	background:#f1f1f1;
	/*font-size:1rem;*/
	color:#2d2d2d;
	height:auto;
	margin-top: -50px;
}

.clear{
	clear:both;
	margin:10px;
}

.float-left{float:left;}
.float-right{float:right;}

/*
h1{font-size:1.8rem;font-weight:bold;color:#000;}
h2{font-size:1.5rem;font-weight:bold;color:#f8931f;}
*/
.font-bold{font-weight:700;}
.font-red{color:#ed1b24;}
.font-orange{color:#f8931f;}
.font-blue{color:#007bff;}

a{color:#017dc5;}

/*----------------navigation-------------------*/
/*
#navigation .nav-link{
	margin-right:50px;
}

#navigation .last{
	margin: 0;
}
*/

#navigation li a, #navigation li a:visited{
	color:#017dc5;
	text-decoration:none;
	font-weight:bold;
}

#navigation li a:hover, #navigation li a.active{
	color:#f8931f;
	text-decoration:none;
}

/*menu 滑鼠自動展開，不太好用，因為並無實際點擊，移開後就會關閉，也不會將已點擊後展開的部分也關閉，且在小介面的使用感覺也很差*/
/*
#navigation .dropdown:hover > .dropdown-menu {
	display: block;
}
*/

.offcanvas-custom-width {
  	width: calc(100vw - 40px); /* 例如左右各留20px空間 */
  	max-width: 300px;
}

/*----------------mainbanner-------------------*/
#mainbanner .carousel-indicators{
	margin-bottom: -20px;
}

@media (min-width: 768px) {
	#mainbanner .carousel-indicators{
		margin-bottom: 0;
	}
}

#mainbanner .carousel-indicators button {
    width: 10px;
	height: 10px;
	border-radius: 100%;
	margin:0 20px 20px 0;
}
/*
#mainbanner .carousel-indicators [data-bs-target]:hover {
    border:3px solid #333333;
}

#mainbanner .carousel-indicators [data-bs-target]{
    background-color:#000000;
}
*/
#mainbanner .carousel-indicators [data-bs-target].active{
    background-color:#ff0000;
}

#mainbanner .carousel-control-prev-icon,
#mainbanner .carousel-control-next-icon {
	width: 4rem;
	height: 4rem;
}

/*----------------marquee-------------------*/
#marquee a, #marquee a:visited{
	text-decoration:none;
	/*font-size:1.1rem;*/
	color:#333;
}

#marquee a:hover{
	text-decoration:underline;
	/*font-size:1.1rem;*/
	color:#e1912b;
}

#marquee .carousel-item-next:not(.carousel-item-start),
#marquee .active.carousel-item-end {
	transform: translateY(100%);
}

#marquee .carousel-item-prev:not(.carousel-item-end),
#marquee .active.carousel-item-start {
	transform: translateY(-100%);
}

/*----------------pagetabs-------------------*/
#pagetabs .nav-tabs {
	border-bottom: 1px solid #017dc5;
}

#pagetabs .nav-tabs .nav-item  {
	padding: 0 0 0 5px;
}


#pagetabs .nav-tabs .nav-link {
	background: #017dc5;
	color: #ffffff;
	border-bottom: 1px solid #017dc5;
	padding: 2px 10px 2px 10px;
	font-weight:bold;
}

#pagetabs .nav-tabs .nav-link.active,
#pagetabs .nav-tabs .nav-link:hover {
	background: #f8931f;
	color: #000000;
}

/*----------------table-------------------*/
.table_sn{
	border-right:1px solid #017dc5;
	border-top:1px solid #017dc5;
	word-wrap: break-word;
	word-break: break-all;
}

.table_sn td, .table_sn th{
	border-left:1px solid #017dc5;
	border-bottom:1px solid #017dc5;
	padding:3px;
}

.table_sn th{
	background:#dbeaf9;
}

/*bootstrap grid table*/
.grid-row {
	border-left: 1px solid #017dc5;
}

.grid-header {
  	border-right: 1px solid #017dc5;
  	border-bottom: 1px solid #017dc5;
  	padding:3px;
	display: flex !important;
	align-items: center !important;
	
	justify-content: center !important;
	font-weight:bold;
	background:#dbeaf9;
}

.grid-cell {
  	border-right: 1px solid #017dc5;
  	border-bottom: 1px solid #017dc5;
  	padding:3px;
	display: flex !important;
	align-items: center !important;
	
	word-wrap: break-word;
	word-break: break-all;
}

.grid-row:first-child {
 	border-top: 1px solid #017dc5;
	border-left: 1px solid #017dc5;
}

/*----------------ratio-------------------*/
.ratio-map {
	aspect-ratio: 4 / 3; /* 基本比例 */
}

.ratio-width-50 {
	width: 100%;
}

@media (min-width: 768px) {
	.ratio-map {
		aspect-ratio: 21/ 9; /* 在較大螢幕上改變比例 */
	}
	
	.ratio-width-50 {
		width: 50%;
	}
}

/*----------------animate-------------------*/
.card-header-bg {
	background: linear-gradient(90deg, #6dd5ed 0%, #2193b0 100%);
	color: #fff;
}

/* 按鈕與 active 樣式 */
.list-group-item.active {
	background: linear-gradient(90deg, #2193b0 0%, #6dd5ed 100%);
	border: none;
	color: #fff;
	font-weight: bold;
	letter-spacing: 1px;
}

/* hover 效果 */
#card_group.list-group-item:not(.active):hover {
	background: #f0f8ff;
	transition: background 0.2s;
}

.item-focus {
	box-shadow: 0 4px 16px rgba(33,147,176,0.08);
	transition: transform 0.2s, box-shadow 0.2s;
}
.item-focus:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 8px 32px rgba(33,147,176,0.32);
}

.my-delay-02s { animation-delay: 0.2s !important; }
.my-delay-04s { animation-delay: 0.4s !important; }
.my-delay-06s { animation-delay: 0.6s !important; }
.my-delay-08s { animation-delay: 0.8s !important; }

/* menu的動畫效果速度似乎與bootstrap有衝突，會變成極快，強制改回animate.css設定的1s */
.dropdown-menu.animate__animated {
  	animation-duration: 1s !important;
}