﻿  body {
    margin: 0;
    height: 100vh;
    background-image: url('/bgcolor/BG24.jpg');
    background-size: fill; /* contain; cover;*/
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

 .content {
    width:  auto;
    height: inherit;
  }
/*///////////////////////////////////////////////////////////////////////////*/
  html, body {
    height: 100%;
    margin: 2px 38px;
  }

/* 電腦用樣式 */
@media screen and (min-width: 1024px) {
  html, body {
    height: 100%;
    margin: 2px 120px;
  }
}

/* 手機用樣式 */
@media screen and (max-width: 767px) {
  html, body {
    height: 100%;
    margin: 2px 38px;
  }
}
	div#menu-secondary ul {
		/* the links in the menu are structured as an unordered list */
		margin							: 0;
		padding						: 3pt;
		border							: none;
		float								: right;
	} 
	div#menu-secondary li {
	display							: block;
	margin							: 0;
	border							: none;
	float								: left;
	overflow						: visible;
	background-color			: #E9E8E7;
	border-left					: 1px solid #7C8A8D;
	z-index							: 100;
	padding: 3pt;
	}

	div#menu-secondary a:link {
		color							: #000000;
		text-decoration			: none;
	}
	
	div#menu-secondary a:visited {
		color							: #000000;
		text-decoration			: none;
	}
	
/* DIV menu - 改拉吧底色在這改the main menu bar */

	div#menu{
	background					: #0000FF;
	width							: 100%;
	height							: 12pt;
	margin							: 0;
	padding						: 0;
	border: 1px solid #000000;

	}
	
	/* Hyperlink styles for the main menu elements */
		div#menu a:visited {
			color							: #FEFBF4;
			text-decoration			: none;
		}
		div#menu a:link {
			color							: #FEFBF4;
			text-decoration			: none;
		}
		
	/* styles for the large unordered list that is the main menu可調整主選單位置 */		
		ul#mainmenu {
			margin							: 0 0 0 1px;
			padding						: 0;
			font-weight					: normal;
		} 
		li.mainmenuitem {
	display							: block;
	border							: none;
	width							: auto;
	float								: left;
	overflow						: visible;
	margin							: 0;
	padding-top: 3px;
	padding-right: 5px;
	padding-left: 5px;



		}

		/* li.active styles - the tab for currently selected pages */
			li.active {
				background					: #FFFFFF;
			}
			li.active a:link {
				color							: #000000 !important;
			}
			li.active a:visited {
				color							: #000000 !important;
			}
		
		/* li.hover styles - the appearance of the tab when it is hovered over */
			li.hover {
	background	 				: #66CCFF;
	border: 0;

			}
			li.hover a:link {
				color							: #181863 !important;
			}
			li.hover a:visited {
				color							: #181863 !important;
			}
			
			
	/* submenu - the cascading menus可調整次選單上下左右位置 */
		ul.submenu{
	display							: none;
	position						: absolute;
	background					: #FEFBF4;
	border							: 1px solid #7C8A8D;
	padding						: 0em;
	list-style						: none;
	font-weight					: normal;
	width							: 100px;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-left: -48px;
	margin-top: 16px;
	overflow: visible;



		}
		ul.submenu a{
			display							: block;
			height							: 12px;
			margin							: 0;
			padding						: 3px 0.5em 0px;
			border							: 1px solid #FEFBF4;
		}

		li.submenuitem{
	margin							: 0em;
	padding							: 0em;

		}
		
		
		
		
		li.submenuitem a:link {
			color							: #181863 !important;
		}
		li.submenuitem a:visited {
			color							: #181863 !important;
		}
		ul.subsubmenu{
			list-style						: none;
			margin							: 0em 0em 0em 0em;
			padding						: 0em;
		}
		li.subsubmenuitem{
			margin							: 0em;
			padding						: 0em;
		}
		ul.submenu a:hover , ul.submenu a:focus {
			background-color			: #66CCFF; /* 次選單光棒顏色 */
			border-left					: 1px solid #FFFFFF;
			border-right					: 1px solid #FFFFFF;
		}


li,table {
	font-size: 10pt;
}

/*///////////////////////////////////////////////////////////////////////////*/
.circle {
  width: 100px; /* 設置圖片框的寬度 */
  height: 100px; /* 設置圖片框的高度 */
  border-radius: 50%; /* 將邊框半徑設置為50%，使其呈現圓形 */
  overflow: hidden; /* 裁剪圖片以適應圓形邊框 */
  background-color:red; /* 指定圓形圖框的背景顏色 */
  }

.circle img {
  width: 99%; /* 圖片寬度填滿圓形邊框 */
  height: 99%; /* 圖片高度填滿圓形邊框 */
  object-fit: cover; /* 根據需要裁剪和縮放圖片 */
}

#my-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.a01 {color: #ffffff;
}
.a06 {
        font-size: 14px;
        color: #ff9900;
        font-family: "黑体";
        font-weight: bold;
}

/*///////////////////////////////////////////////////////////////////////////*/
/* 在加載時將網頁調整為當前視窗大小
   window.resizeTo(window.innerWidth, window.innerHeight);
*/
      .image-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #ccc;
        padding: 10px;
        width: 300px;
        text-align: center;
        margin-top: 20px;
      }

  img {
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
  }

  #imageName {
    display: block;
    margin-top: 10px;
  }

  .slide-container {
    position: relative;
    border: 1px solid #ccc;
    padding: 10px;
    width: 300px;
    text-align: center;
    margin-top: 20px;
  }

  .slide-control {
    position: absolute;
    top: 50%;
    width: 100%;
  }

  .slide-control button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    margin: 0 5px;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    transition: background-color 0.3s ease;
  }

  .slide-control button:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .slide-control button:first-child {
    left: 0;
  }

  .slide-control button:last-child {
    right: 0;
  }

/*///////////////////////////////////////////////////////////////////////////*/

.container {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}

/*///////////////////////////////////////////////////////////////////////////*/
#dot0, #dot1, #dot2, #dot3, #dot4, #dot5, #dot6 {
  transition: left 0.1s linear, top 0.1s linear;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  visibility: visible;
}