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

/* 2020/4/1 Multilevel Menu by Ant */

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu>.dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;	/* Original = -6px */
	margin-left: -5px;	/* Original = -1px */
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px;
	border-radius: 0 6px 6px 6px;
}

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

.dropdown-submenu>a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #ccc;
	margin-top: 5px;
	margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
	border-left-color: #fff;
}

.dropdown-submenu.pull-left {
	float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
	left: -100%;
	margin-left: 10px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;
}	  

/* ----------------------------------------------------- */


/* 2020/4/1 Product Title by Ant */

.my-title {
	font-size: 40px;
	font-weight: bold;
	text-shadow: 2px 2px 0 #333333;
}

.my-title a {
	color: #FFFFFF;
	text-decoration-line:none;
}

.my-title-xs {
	font-size: 25px;
	font-weight: bold;
	text-shadow: 2px 2px 0 #333333;
}

.my-title-xs a {
	color: #FFFFFF;
	text-decoration-line:none;
}

.my-title2 {
	font-size: 35px;
	font-weight: bold;
	text-shadow: 2px 2px 0 #333333;
}

.my-title2 a {
	color: #FFFFFF;
	text-decoration-line:none;
}

.my-title2-xs {
	font-size: 23px;
	font-weight: bold;
	text-shadow: 2px 2px 0 #333333;
}

.my-title2-xs a {
	color: #FFFFFF;
	text-decoration-line:none;
}

.my-subtitle {
	font-size: 30px;
	font-weight: bold;
	text-shadow: 2px 2px 0 #333333;
}

.my-subtitle a {
	color: #FFFFFF;
	text-decoration-line:none;
}

.my-subtitle-xs {
	font-size: 20px;
	font-weight: bold;
	text-shadow: 2px 2px 0 #333333;
}

.my-subtitle-xs a {
	color: #FFFFFF;
	text-decoration-line:none;
}

/* ----------------------------------------------------- */

/* 2020/4/14 company contact information by Ant */

.my-company-title {
/*	font-size: 15px;*/
	font-size: 17px;
	
	font-weight: bold;
	font-family: "微軟正黑體";
	color: white;
}

.my-company-title-big {
	font-size: 25px;
	font-weight: bold;
	font-family: "微軟正黑體";
	color: white;
}

.my-company-address {
/*	font-size: 10px;*/
	font-size: 12px;
	
	font-family: "微軟正黑體";
	color: #CCCCCC;
}

.my-company-tel {
/*	font-size: 10px;*/
	font-size: 12px;
	
	font-family: "微軟正黑體";
	color: #999999;
}

.my-company-email a {
	font-size: 10px;
	font-family: "微軟正黑體";
	color: #CCCCCC;
}

.my-other-link a {
	font-size: 15px;
	font-weight: bold;
	font-family: "微軟正黑體";
	color: #CCCCCC;
}

/* ----------------------------------------------------- */

/* 2020/4/14 homepage category by Ant */

.my-homepage-category {
	font-size: 25px;
	font-family: "微軟正黑體";
	
	/* font-weight: 700; */ /* 字體加粗，等同於 bold */
	font-weight: 900; /* 字體加粗，700 等同於 bold */
}

.my-font {
	font-family: "微軟正黑體";
/*	font-size: 16px;*/
}

.my-font-menu {
	font-family: "微軟正黑體";
	font-size: 15px;
}

.my-font-menu-english {
	font-family: "微軟正黑體";
	font-size: 15px;
}

.my-homepage-info {
	font-size: 20px;
	font-family: "微軟正黑體";
	color: #BBBBBB;
}

/* ----------------------------------------------------- */

/* style for others */

.my-content {
	font-weight: bold;
	font-size: 20px;
	font-family: "微軟正黑體";
	color: green;
}

.my-container-image {
	float: left;
	margin-right: 5px;	
}

.my-background{
  position: relative;
  font-family: "微軟正黑體";
}

.my-info
{
  position: absolute;
  top: 30%;
  left: 0;
  display: inline-block;
  padding: 20px 50px 20px 30px;
  background: rgba(0,0,0,.4);
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.my-about-name {
	margin-top: 200px;
	margin-bottom: 10px;
	margin-left: 20px;
	font-size: 30px;
	color: #FFFFFF;
	font-family: "微軟正黑體";
	font-weight: 800;
}

.my-about-image {
	float :right;
	margin-left: 5px;
	margin-bottom: 20px;
}

.my-about-title {
	font-family: "微軟正黑體";
	font-weight: 800;
}

.my-switchLan {
	margin-right: 5px;
}

/* ----------------------------------------------------- */

/* Custom for bootstrap */

/* 表格 */
.my-table {
	table-layout: fixed;
}

/* 編號欄位 */
.my-td-sn {
	width: 4em;
	text-align: center;
}

/* 下載欄位 */
.my-td-download {
	width: 7em;
	text-align: center;
}

/* 日期欄位 */
.my-td-date {
	width: 8em;
	text-align: center;
	vertical-align: middle !important;
}

/* 頂部共用區 */
.my-top {
	background-color:#161745;
}

/* 底部共用區 */
.my-bottom {
	background-color:#161745;
}

.my-picture {
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

.my-picture2 {
	margin: auto;
	margin-top: 1rem;
}

.my-carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px; 	/* 預設值=20px */
  /* top: 30px; */
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.my-carousel-caption-xs {
  position: absolute;
  right: 15%;
  bottom: 13px; 	/* 預設值=20px */
  /* top: 30px; */
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

/* 使下拉選單在滑鼠經過時顯示 */
.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* 避免由於變更顯示狀態而產生位移 */
}

/* 確保下拉選單在正確的位置顯示 */
.navbar-nav .dropdown .dropdown-menu {
    top: 100%;
    left: 0;
    right: auto;
}

.nav-link {
    font-weight: normal !important; /* 强制字体为正常粗细 */
}

.nav-link:focus,
.nav-link:active {
    font-weight: normal !important; /* 强制点击和获得焦点时字体为正常粗细 */
    outline: none !important; /* 强制移除点击后的轮廓线（如果有） */
}

/* 設定 nav-link 初始字體顏色 */
.nav-link-menu {
    color: #fff !important;
    transition: color 0.2s ease;
}

/* 當滑鼠懸停在連結上時，游標變成手指 */
.nav-link:hover {
	text-decoration: underline; /* 懸停時添加底線 */
	text-underline-offset: 4px; /* 調整底線與文字的距離，可以根據需要修改 */
	text-decoration-thickness: 2px; /* 調整底線的粗細，2px 是一個例子，可以根據需要調整 */
    cursor: pointer; /* 懸停時游標變成手指 */
	transition: background-color 0.2s ease; /* 添加過渡效果，使顏色變化更平滑 */
}

/* 下拉選單的背景顏色 */
.dropdown-menu {
    background-color: #E1E4EF;
	border-color: #AAAAAA;
	/* font-size: 16px; */
}

.dropdown-menu-english {
    background-color: #E1E4EF;
	border-color: #AAAAAA;
	font-size: 14px;
}

/* 懸停時背景顏色變得更深 */
.dropdown-item:hover {
 	background-color: #C5CBDF;
	transition: background-color 0.2s ease; /* 添加過渡效果，使顏色變化更平滑 */
}

/* 添加CSS樣式來圓弧化圖片四角 */
.rounded-corners-1 {
    border-radius: 10px;
}
.rounded-corners-2 {
    border-radius: 15px;
}
.rounded-corners-3 {
    border-radius: 20px;
}

.custom-shadow:hover {
    /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); */ /* 懸停時加深陰影 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 懸停時加深陰影 */
}

/* 自定義重陰影效果並添加圓角 */
.custom-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 陰影效果 */
    transition: box-shadow 0.3s ease; /* 過渡效果 */
    padding: 15px; /* 卡片內邊距 */
    box-sizing: border-box; /* 確保 padding 不影響卡片總寬度 */
	background-color: #FFFFFF;                /* 背景顏色 */
    border-radius: 15px; /* 卡片邊框的圓角效果 */
	flex: 1; /* 使卡片容器填滿剩餘空間 */
    margin-top: 1vw;

	/*    margin-bottom: 2vw;*/
    margin-bottom: 2vw;
	
    margin-left: 0.3vw;
	margin-right: 0.3vw;
}

/* 呼吸效果動畫，只改變邊框顏色 */
@keyframes breathing-border {
    0% {
        outline-color: rgba(0, 0, 0, 0.2);   /* 初始邊框顏色，較淺 */
    }
    50% {
        outline-color: rgba(0, 0, 0, 0.8);   /* 中間變深 */
    }
    100% {
        outline-color: rgba(0, 0, 0, 0.2);   /* 邊框顏色回到初始狀態 */
    }
}

/* 滑鼠懸停效果 */
.custom-shadow-quality:hover {
    animation: breathing-border 4s ease-in-out infinite; /* 呼吸效果的動畫，週期變為10秒 */
}

.custom-shadow-quality {
    border: 1px solid transparent;            /* 初始邊框設置為透明 */
    outline: 2px solid rgba(0, 0, 0, 0.2);    /* 預設邊框顏色較淺 */
    transition: outline-color 2s ease-in-out; /* 平滑顏色變化，增加過渡時間 */
    padding: 15px;                            /* 卡片內邊距 */
    box-sizing: border-box;                   /* 確保 padding 不影響卡片總寬度 */
    border-radius: 5px;                      /* 卡片邊框的圓角效果 */
    background-color: #ECF8EE;                /* 背景顏色 */
    flex: 1;                                  /* 使卡片容器填滿剩餘空間 */
    margin-top: 1vw;
    margin-bottom: 2vw;
    margin-left: 0.3vw;
    margin-right: 0.3vw;
}

/* 確保連結在懸停時字體樣式不變 */
.custom-shadow-quality a {
    text-decoration: none; /* 移除預設底線 */
    color: inherit; /* 繼承父元素的顏色 */
    font-weight: inherit; /* 繼承父元素的字重 */
}

.custom-shadow-quality a:hover {
    text-decoration: none; /* 確保懸停時不添加底線 */
    color: inherit; /* 確保懸停時字體顏色不變 */
    font-weight: inherit; /* 確保懸停時字體粗細不變 */
}

/* 圖片的內邊距與圓角效果 */
.img-padding {
    padding: 0; /* 移除圖片周圍的內邊距 */
    background-color: white; /* 確保圖片周圍背景顏色一致 */
    display: block; /* 確保圖片為區塊元素 */
    border-radius: 5px; /* 確保圖片和卡片邊框的圓角效果一致 */
	margin-bottom: 0.5rem; /* 減少圖片與文字內容之間的間距 */
}

/* 圖片的內邊距與圓角效果 */
.img-padding2 {
    padding: 0; /* 移除圖片周圍的內邊距 */
    background-color: white; /* 確保圖片周圍背景顏色一致 */
    display: block; /* 確保圖片為區塊元素 */
    border-radius: 5px; /* 確保圖片和卡片邊框的圓角效果一致 */
	margin-bottom: -0.7rem; /* 減少圖片與文字內容之間的間距 */
}

/* 圖片的圓角效果 */
.rounded-corners-2 {
    border-radius: 20px;
}

/* 確保連結在懸停時字體樣式不變 */
.custom-shadow a {
    text-decoration: none; /* 移除預設底線 */
    color: inherit; /* 繼承父元素的顏色 */
    font-weight: inherit; /* 繼承父元素的字重 */
}

.custom-shadow a:hover {
    text-decoration: none; /* 確保懸停時不添加底線 */
    color: inherit; /* 確保懸停時字體顏色不變 */
    font-weight: inherit; /* 確保懸停時字體粗細不變 */
}

/* 確保每個卡片容器的高度一致 */
.d-flex > .col-md-4 {
    display: flex;
    flex-direction: column;
}

.custom-container-product {
    padding-left: 5%;   /* 左邊保留3%空白 */
    padding-right: 5%;  /* 右邊保留3%空白 */
    box-sizing: border-box; /* 確保 padding 不影響總寬度 */
    max-width: 100%;    /* 確保容器不會超過100%的寬度 */
    overflow-x: hidden; /* 確保不會有橫向滾動條 */
}

.custom-container {
    padding-top: 63px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin: 0 auto !important;

	/* max-width: 1920px !important; */
	max-width: 100%; /* 避免超過屏幕寬度 */
	
	overflow-x: hidden; /* 隱藏橫向滾動 */
}

/* 固定選單在頁面頂部 */
.navbar.my-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.custom-hr {
    border: 0;                /* 移除預設邊框 */
    height: 4px;              /* 設定粗細 */
    background-color: #333;    /* 設定顏色 */
    margin-top: 20px;          /* 可選：設定與上方內容的間距 */
    margin-bottom: 20px;       /* 可選：設定與下方內容的間距 */
}

.text-box-outline {
    font-size: 25px;                        /* 字體大小 */
    font-weight: bold;                      /* 字體粗細 */
    color: #18BC9C;                         /* 文字顏色 */
    padding: 10px 20px;                     /* 文字與外框的內邊距 */
    
    border-top: 3px solid #C7D4E0;          /* 僅有上方的外框 */
    border-left: 3px solid #C7D4E0;         /* 左側的外框 */
    border-right: 3px solid #C7D4E0;        /* 右側的外框 */
    
    display: inline-block;                  /* 保證外框緊貼文字內容 */
    margin-right: 0px;                      /* 取消右邊額外間距 */
    margin-bottom: 20px;
    border-radius: 10px 10px 0 0;           /* 圓角效果，只針對上方的兩個角 */
    font-family: 'Arial', sans-serif;       /* 字體樣式 */
    position: relative;                     /* 讓偽元素相對於此元素定位 */
}

.text-box-outline::after {
    content: "";                            /* 空內容 */
    position: absolute;                     /* 絕對定位 */
    bottom: 0;                              /* 放在元素的底部 */
    left: 100%;                             /* 從右邊外框開始 */
	
    /* width: calc(100vw - 100% - 50px); */      /* 計算從外框到屏幕右邊的距離，適應畫面寬度 */
    width: calc(95vw - 100% - 50px);       /* 計算從外框到屏幕右邊的距離，適應畫面寬度 */
    
    height: 3px;                            /* 直線的厚度 */
    background: linear-gradient(to right, #C7D4E0, rgba(199, 212, 224, 0)); /* 從顏色漸變到透明 */
}

.d-flex {
    display: flex;
}

.flex-fill {
    flex: 1;
}

.custom-body {
    background-color: #FFFFFF;
	margin-left: 5%;
	margin-right: 5%;
}

body {
    padding-top: 63px; /* 根據選單高度調整間距，這裡假設選單高度是 70px */

	/* background-color: #f0f0f0; */ /* 設定網頁的背景顏色，這裡設為淡灰色 */
    background-color: #FFFFFF; /* 設定網頁的背景顏色，這裡設為淡灰色 */
	
    margin: 0;                /* 移除默認的 margin 以確保背景顏色覆蓋整個網頁 */
    padding: 0;               /* 移除默認的 padding */
    font-family: Arial, sans-serif; /* 設定全站字體 */
	
	/* 讓網頁右側一定出現卷軸 */
	overflow-y: scroll;
}

/* ----------------------------------------------------- */