body {
    margin: 0;
	padding: 0;
    
}
nav{
	display: flex;
    
    align-items: center;
	
	color: DarkGray;
	background-color: white;
	text-shadow: 2px 2px 16px #0e8dbc;
}

.header {
  	font-size:min(max(8vw,1em ),1.5em);	
	
}

.MyImg{
	top:-0.5em; position: relative;
	height: min(max(60px,4vw),2em);
}

.border{
    border: 1px solid red;
}

.footer{
	z-index: 99;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
	
	position: fixed;
	bottom: 0px;
	height:4em;
	
    color: white;
    
    font-weight: bold;
    font-size:min(max(1.5vw,0.5pt ),0.5em);

	width: 100%;
	
	color: #FFFFFF;
	background: #0e8dbc;
	text-shadow: 0 1px 0 #CCCCCC, 0 1px 0 #c9c9c9, 0 1px 0 #bbb, 0 1px 0 #b9b9b9, 0 1px 0 #aaa, 0 1px 1px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.form_field{
	box-sizing: content-box;
	margin: 0;
	width: 98%;
	font-size: 2em;
	
}

form{
	font-weight: bold;
	width: 100%;
}

.avatar{
	width: 100%;
}

.myfs{
	font-size: 1em;
}
.formTitle{
	font-size: 1em;
}
.TRow1{
	background-color: #cce6ff;
}

.TRow2{
	background-color: white;
}
.ATRow1{
	background-color: #fcf7ca;
}

.ATRow2{
	background-color: white;
}

.mybtn {
  border: none;
  font-family: 'Lato';
  font-size: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  padding: 5px 5px;
  display: inline-block;
  margin: 1px 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.RiverGreen {
	background-color : #e6fffa;
}

.font1{
	font-family: 'Noto Sans TC', sans-serif;
}

.ZeroMAndP{
	margin: 0; 
	padding: 0;
	
}

.Shadow1{
	text-shadow: 2px 2px 16px #0e8dbc;
}
.card{
	/*background-color: lightgray;*/
	 text-shadow: 1px 0px #000000;
	 box-shadow: 2px 2px 8px gray;
}

.HalfOpacity{
	--bs-bg-opacity: 0.3;
}



.thumb-post img {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 250px;
  margin-bottom: 1rem;
}

.myfs05{
	font-size: 1em;
	font-weight: bold;
}

.myans{
	text-decoration: underline;
}
#eLearningForm{
	font-size: 1em;
}

#eLearningForm input{
	width: 100%;
}

.MyVideo:hover{
	opacity: 1;
	transition: opacity 0.5s linear;
	z-index: 10;
}

.MyVideo{
	opacity:0; 
	transition: opacity 0.5s linear;
	z-index: 10;
	position:absolute; width: 100%; height: 100%; top:0; left:0;
}
.thumb-post{
	/*border: 1px solid red;*/
	
}

.PlayIcon{
	/*border: 1px solid red;*/
	
	position:absolute; 
	
	width: 1em; 
	
	opacity: 0.5;
	
	top: 0;
	left: 0;
	z-index:5;
}
.PlayIcon img{
	/*border: 1px solid red;*/
	
	width: 1em; 
	
}

.myFormTitle {
	width: 100%;
}
form{
	width: calc(100%);
	padding: 1em 1em;
	border: 1px solid gray;
	
}
.bborder{
	border: 1px solid blue;
}