@import url('fontStyle.css');
@import url('table.css');
*{
	font-family : styleF3, verdana, helvetica, sans-serif; 
	font-size:1em;
	
}
html {
  scroll-behavior: smooth;
}
body{
		width:99%;
		margin:0;
		padding:0;
		font-size: 1em;
		color: #000000;
		
		background: rgb(92,82,255) ;
		background: linear-gradient(180deg, rgba(92,82,255,1) 0%, rgba(167,167,255,1) 15%, rgba(255,255,255,0) 50%) ;
		background: url("../IMG/banner.jpg") no-repeat fixed center;
		backdrop-filter: blur(5px);
		
	}
::-webkit-scrollbar {
 width: 8px; /* กำหนดความกว้างของ scroll */
}
::-webkit-scrollbar-track {
 background: red; /* สีพื้นหลัง scroll */
}
::-webkit-scrollbar-thumb {
 background-color: green; /* กำหนดสีของแถบเลื่อน scroll */
 border-radius: 20px; /* กำหนดความโค้งมนของแถบเลื่อน scroll */
 border: 2px solid red; /* กำหนดกรอบเพื่อเว้นระยะรอบแถบเลื่อน scroll */
}
@media only screen and (max-width: 500px) {
	body {
		width: max-width;
		border:0px solid red;
		font-size: 0.6em;
	}
	
	.icon{
		width:1em;
		height:1em;
	}
	img{
		zoom: 0.5;
	}
}
#div_header{
	width:98%;
	height:60px;
	border:0px solid red;
	display:block;
	
}
	#div_header #div_menu{
		float:right;
	}
#div_container{
	width:100%;
	padding:1px;
	margin-top:2px;
	
	border:0px solid BLUE;
	float:left;
}
	#div_container #div_left{
		width:99%;
		border:0px solid #000000;
		border-radius:5px;
		display:block;
	}
	#div_container #div_main{
		width:99%;
		border:0px solid #000AFA;
		border-radius:5px;
		margin-left:2px;
		float:left;
		background-color: rgba(255, 255, 255, 0.4);
		backdrop-filter: blur(5px);
		opacity:0.9;
		padding-bottom:10px;
		padding-left:2px;
		display:block;
	}
#div_footer{
	
	position: fixed;
	
	
	top: 0;
	right:0;
	font-size:0.9em;
	width:400px;
	color:#FFFFFF;
	border:0px solid red;
	padding-right:20px;
	
	z-index:3;
}

<!-- DROPDOWN MENU  -->

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  
	box-shadow: 1px 7px 24px -7px #276873;
	background:linear-gradient(to bottom, #599bb3 15%, #408c99 80%);
	background-color:#599bb3;
	border-radius:21px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	font-weight:bold;
	padding:19px 23px;
	text-decoration:none;
	text-shadow:0px 0px 0px #3d768a;
}
	.dropdown .alink{
		text-decoration: none;
		color:#FFFFFF;
	}
.dropdown-content {
  display: none;
  position: absolute;
  margin-top:18px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius:5px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  font-size:0.6em;
  font-weight:normal;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #599bb3;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #599bb3;color: red;} 
.dropdown:hover .alink{color:red;}


<!-- SUB MENU  -->

.dropbtn1 {
  background: rgb(92,82,255);
 
  color: white;
  border: none;
}

.dropdown1 {
  position: relative;
  display: inline-block;
  min-width: 160px;
  margin-top:5px;
	box-shadow: 1px 7px 24px -7px #276873;
	background: rgb(92,82,255);
	background: linear-gradient(180deg, rgba(92,82,255,1) 0%, rgba(167,167,255,1) 23%, rgba(255,255,255,0.4) 75%, rgba(255,255,255,0) 95%);
	
	border-radius:10px 10px 0px 0px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:0.8em;
	font-weight:bold;
	padding:10px 23px;
	text-decoration:none;
	text-shadow:0px 0px 0px #3d768a;
}
	.dropdown1 .alink1{
		text-decoration: none;
		 
		color:BLUE;
	}
.dropdown-content1 {
  display: none;
  position: absolute;
  margin-left:70px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius:5px;
  z-index: 1;
}

.dropdown-content1 a {
  color: black;
  font-size:0.9em;
 
  font-weight:normal;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content1 a:hover {background-color: #599bb3;}

.dropdown1:hover .dropdown-content1 {display: block;}

.dropdown1:hover .dropbtn1 {color: red;border-radius:5px;} 
.dropdown1:hover .alink1{color:red;}

.a1{
	background-color:#FFFFFF;
}

<!-- DROPDOWN MENU MOBILE  -->

.dropbtnM {
  background-color: #FFFFFF;
  color: #FFFFFF;
  
  font-size: 0.8em;
  border: none;
}

.dropdownM {
	position: relative;
	display: inline-block;
  
	
	cursor:pointer;

}
	.dropdownM .alinkM{
		text-decoration: none;
		color:#000000;
	}
.dropdown-contentM {
  display: none;
  position: absolute;
  margin-top:1px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius:5px;
  z-index: 1;
}

.dropdown-contentM a {
  color: #000000;
  font-size:0.9em;
  font-weight:normal;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-contentM a:hover {background-color: #599bb3;color:#FFFFFF;}

.dropdownM:hover .dropdown-contentM {display: block;}

.dropdownM:hover .dropbtnM {background-color: #599bb3;} 

<!-- SUB MENU Mobile -->

.dropbtn12 {
  background: rgb(92,82,255);
  
  color: white;
  border: none;
}

.dropdown12 {
  position: relative;
  display: inline-block;
  
  
	box-shadow: 1px 7px 24px -7px #276873;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 20%,rgba(255,255,255,0.5) 80%, rgba(255,255,255,1) 90%);
	
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:0.8em;
	font-weight:bold;
	padding:5px 10px;
	text-decoration:none;
	text-shadow:0px 0px 0px #3d768a;
}
	.dropdown12 .alink12{
		text-decoration: none;
		color:BLUE;
	}
.dropdown-content12 {
  display: none;
  position: absolute;
  margin-left:10px;
  margin-top:5px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius:5px;
  z-index: 1;
}

.dropdown-content12 a {
  color: #FFFFFF;
  font-size:1em;
  font-weight:normal;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content12 a:hover {background-color: #599bb3;}

.dropdown12:hover .dropdown-content12 {display: block;}

.dropdown12:hover .dropbtn12 {color: red;border-radius:5px;} 
.dropdown12:hover .alink12{color:red;}