*{
  text-decoration: none;
}

html{
	scroll-behavior:smooth;
  }
  
a{
  color: rgb(0, 0, 255);
  /* font-weight: bold; */
}
		
.link1{
	width:100%;
	margin:0px;
	padding:0px;
	background-color:#FFD7C4;
	text-align:center;
  }

  .linkblue{
    color: blue;
  }
	
	
.grid-container {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 30% 70%;
  background-color: transparent;
  padding: 0px 10px;
}

.grid-container2 {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns:100%;
  background-color: transparent;
  padding: 0px 10px;
}

 .grid-item {
  background-color:#FFFFCC;
  border: 0.1px solid #909090;
  padding: 5px;
  font-size: 16px;
  text-align: start;
  margin:0px;
}	

.grid-item2 {
  background-color:#BBFFDD;
  border: 0.1px solid #909090;
  padding: 5px;
  font-size: 16px;
  text-align: start;
  margin:0px;
}	

.grid-item22 {
  background-color:#BBFFDD;
  border: 0.1px solid rgba(0,0,0,0.0);
  padding: 5px;
  font-size: 16px;
  text-align: start;
  margin:0px;
}

.grid-item3 {
  background-color:#909090;
  border: 0.1px solid #909090;
  padding: 5px;
  font-size: 16px;
  text-align: start;
  margin:0px;
}	

.grid-item4 {
  background-color:#FFDBCA;
  border: 0.1px solid #909090;
  padding: 5px;
  font-size: 16px;
  text-align: start;
  margin:0px;
}

img{
  display: block;
}

ul{
  margin: 0px;
  list-style-type: none;
}






.grid-container3 {
  display: grid;
  /* padding-right: 3%; */
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 90% 10%;
  background-color: transparent;    
  cursor: pointer;
} 

.griditem2{   
  justify-self: right;
  align-self: center;    
  width:16px;
  height:16px;
  background-image: url(pic/left-chevron-w2.png);
  background-size: cover;
  background-repeat: no-repeat;
  transition: .5s ease-out;
  background-position: right;
  margin-right: 5px;
}

.griditem3{   
  justify-self: right;
  align-self: center; 
  width:16px;
  height:16px;
  background-image: url(pic/right-chevron-2.png);
  background-size: cover;
  background-repeat: no-repeat;
  transition: .5s ease-out;
  background-position: right;
  margin-right: 5px;
}

/* .a2:hover .griditem2{   
  justify-self: right;
  align-self: center; 
  width:16px;
  height:16px;
  background-image: url(pic/left-chevron-w2.png);
  background-size: cover;
  background-repeat: no-repeat;
  transition: .5s ease-out;
  background-position: right;
  margin-right: 5px;
} */













	
	
body{
  
  /* พื้นหลังเวป */
  background-image: linear-gradient(rgb(255, 255, 255),rgb(137, 204, 255));
  /* background-image: linear-gradient(rgb(255, 255, 255),rgb(118, 255, 148)); */
  /* background-image: url(pic/1123-2.jpg); */
  background-repeat: repeat;
	margin:0px;
  overflow:visible;
  margin-left: 5%;
  margin-right: 5%;
  }
  
  footer{
    background: rgba(255, 255, 255, 0.9);
  }

nav{
	float:left;
	padding: 0px 0px 0px 0px;
	
	}
nav ul{
	list-style:none;
	}
nav ul li{
	
	/*width:25%;
	text-align:center;
	/*display:table;
	
	padding: 7px;*/
	font-size: 16px; /*Font Menu*/
  }
  
.manu{width:26%;
	text-align:start;
    float:left;
    height: 100%;
  /* margin-top:10px; */
  /* background-color: #fff; */
  
  }
  
  
.main{
	/* margin-left:10px; */
	width:74%;
	text-align:left;
	float:left;
	/* margin-top:10px; */
  font-size: 16px;
  /* background-color: #fff; */
  }
  
.homep1{
		margin-left:5%;
		margin-right:5%;
	}


/*.active{
	color:#000;
	text-decoration:underline;
	}
a:hover{
	color:#000;
	text-decoration:underline;
	}*/
	
/*พื้นหลังเมนู*/
nav.vertical{
  position:relative;
  background:#594408;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
  /* margin: 0px; */
  padding: 0px;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}



/* ALL A */
nav.vertical a{
  display:block;
  color:#FFF;
  text-decoration:none;
  padding:10px 15px;
  transition:0.5s;
}

/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#EBD8A1;
  font-size:17px;
  color:#000;
}

/* INNER UL HIDE */
nav.vertical ul ul{
 background:rgba(255,174,0,0.30);
  padding-left:20px;
  transition: max-height 0.8s ease-out;
  max-height:0;
  overflow:hidden;
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  max-height:500px;
  transition: max-height 0.8s ease-in;
}

.select{
	  background:#F4EACF;
  /*background:rgba(0,0,0,0.0);*/
  font-size:17px;
  color:#000;
	}



.foot1{
	background:#333;
	font-size:16px;
	color:#fff;
	width:100%;
	text-align:center;
	overflow:hidden;
	/*margin-left:10px;
	margin-right:10px;*/

    }

		
		
/*-------------------   Back To TOP  ----------------------------------*/			
		

		
	#button {
  
  display:inline-block;
  background-color: transparent;
  width: 50px;
  height: 50px;
  text-align: center;
  position: fixed;
  bottom: 5%;
  right: 5%;
  font-size:100%;
  color:#FFFFFF;
  background-image:url(uparrow.png);
  background-size:cover;
  background-color:transparent;
  
 /* transition: background-color .3s, 
    opacity .5s, visibility .5s;
  /*opacity: 0;*/
  
 /* visibility:inherit;
  z-index: 10;*/
  text-decoration:none;
  /* line-height:40px; */
}

#button::after {
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  /* line-height: 50px; */
  color: #fff;
}
#button:hover {
  cursor: pointer;
 background-image:url(uparrow2.png);
 background-size:cover;
}
#button:active {
  background-color: transparent;
}
#button.show {
  opacity: 1;
  visibility: visible;
}	


		
/*@media (min-width: 500px) {
  #button {
    margin: 30px;
	
  }
}		*/

/*@media (min-height: 300px) {
  #button {
    margin: 30px;
	background-color: #00FF8C;
	/*visibility: visible;
	
  }
}		*/

/******* เมนูสลับ *********/
.menu2{
  padding: 0px;
  margin: 0px;
 
}
.menu2 ul, 
   .menu2 input 
   {     
     
      transition: max-height 0.7s ease-out;
      max-height:0;
      overflow: hidden;
   }

   .menu2 .closer ,
   .menu2 input:checked ~ .opener
   {
      display: none;
   }
   
   .menu2 input:checked ~ ul
   {      
      max-height:1400px;
      transition: max-height 0.8s ease-in;
   }

   .menu2 input:checked ~ .closer
   {
      display: block;
   }

   input[type="radio"]{
      display: none;
  }
   
 /****** สีหัวข้อ ******/ 



.menu2 .ulhl{
    /* background-image: linear-gradient(rgb(255, 252, 241),rgb(255, 238, 163)); */
    /* background:#80610c; */
    /* background:#594408; */
    background-image: linear-gradient(#694d00,#4e3900);
    color: white;
    padding-bottom: 10px;
    padding-right: 10px;

    /*ช่องว่างบนล่างเมนู*/
    /* border-top: 0.1px solid white;
    border-bottom: 0.1px solid white; */
    /* margin: 10px 10px 0px 10px; */
    margin-bottom: 1px;

    z-index: 10;
    
}

li .lihl{
    background:rgb(136, 97, 14);
    /* background: rgb(255, 205, 205); */
    margin-right: 0px;
    color: #FFF;
    padding: 10px;
 }


.ulindex{
    z-index: 10;
}

.select1{
 
  /*background:rgba(0,0,0,0.0);*/
  font-size:16px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  text-align: left;
  padding: 10px;
  cursor: pointer;
}

.select1 img{
    padding-top: 5px;
    padding-right: 20px;
}

.menu2 li ul li{
   text-align: left;
   padding: 5px;
}

.menu2 li ul li a{
  
   font-size: 16px;
   color: #333;
   text-decoration: none;
}

.underline1{
    font-weight: normal;
    font-size: 18px;
    /* text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red; */
}

.ulmenu{
  margin-left: 10px;
  /* margin-top: 10px; */
  color: white;
  text-decoration: none;
  padding: 0px;
}

label{
  text-emphasis: none;
  text-decoration: none;
}

/*ก่อนแสดง*/

ul li.ulhl:hover {
  background:#EBD8A1;
  transition: all .5s;
}

ul li.ulhl:hover > .opener .grid-container3 .griditem2{
  background-image: url(pic/arrowdown1.png);
}

ul li.ulhl:hover > .opener .select1{
  /* font-size:17px; */
  color:#000;
  font-size: 17px;
  transition: all 0.5s;
}

/*หลังแสดง*/
ul li.ulhl .closer .select1{
  /* font-size:17px; */
  color:#000;
  font-size: 17px;
}

li .lihl:hover{
  /* z-index: 999; */
  background:rgba(255, 255, 255, 0.6);
  /* background:rgb(255, 250, 237); */
  color: #000;
  /* font-size: 17px; */
  transition: all 0.5s;
  
}

.closer{
  color: #000;
  background:#EBD8A1;
  font-size: 17px;
}

.select2 li{
  cursor: no-drop;
  background:#F4EACF;
  /*background:rgba(0,0,0,0.0);*/
  font-size:17px;
  padding: 10px;
  color:#000;
  margin-bottom: 1px;
  /*ช่องว่างบนล่างเมนู*/
  /* border-top: 0.1px solid white;
  border-bottom: 0.1px solid white; */

}

.ulmenu a li.lihl{
  padding: 10px;
}



.select3 li{
  /* background:#594408; */
  background-image: linear-gradient(#694d00,#4e3900);
  /* background-image: linear-gradient(#522f00,#3b2200); */
  font-size: 16px;
  padding: 10px;
  color: white;
  margin-bottom: 1px;
  /*ช่องว่างบนล่างเมนู*/
  /* border-top: 0.1px solid white;
  border-bottom: 0.1px solid white; */
}

.select3:hover > li{
  background:#EBD8A1;
  font-size: 17px;
  color: #000;
  transition: all 0.5s;
}


/*เมนูที่เลือกปุัจจุบัน*/

.ulhl.select4{
  background:#F4EACF;
  /*background:rgba(0,0,0,0.0);*/
}

.ulhl.select4 .grid-container3 .select1{
  font-size:17px;
  color:#000;
}

.ulhl.select4 .grid-container3 .griditem2{
  background-image: url(pic/arrowdown1.png);
}

.ulhl.select4 a li.lihl.s4{
  font-size:17px;
  color:#000;
  background:rgba(255, 255, 255, 0.6);
  cursor: no-drop;
}


@media only screen and (max-width: 600px) {
	#button {
    width: 35px;
    height: 35px;
  }
}

	/*-----------------------------------------------------------------------------------*/	
	
@media all and (min-device-width : 0px) and (max-device-width : 768px) {


  
  body{
    margin-left: 0%;
    margin-right: 0%;
  }
  
	.vertical{
		width:100%;
		}
	
	.manu{width:inherit;
	text-align:center;
	
    float:none;
	margin-top:0px;
  }
  
	
	.homep1{
		margin-left:10px;
		margin-right:10px;
		}
		
	
.main{
	margin-left:0px;
	width:100%;
	text-align:left;
	float:left;
	margin-top:0px;
	font-size: 16px;
  }
  
  .select1{
  text-align: center;
  }

  a.select2 li{
    padding-right: 13%;
  }

  a.select3 li{
    padding-right: 13%;
  }

  .menu2 .ulhl{
    border: none;
  }

  .select1 li{
    border: none;
  }
  
  .select2 li{
    border: none;
  }

  .select3 li{
    border: none;
  }


  }	

@media all and (min-width : 1281px) and (max-width : 3000px){
  body{
    margin-left: 10%;
    margin-right: 10%;
  }
}

@media all and (min-width : 0px) and (max-width : 768px){
  body{
    margin-left: 0%;
    margin-right: 0%;
  }

	.vertical{
		width:100%;
		}
	
	.manu{width:inherit;
	  text-align:center;
    float:none;
	  margin-top:0px;
  }

  
	
	.homep1{
		margin-left:10px;
		margin-right:10px;
		}
		
.main{
	margin-left:0px;
	width:100%;
	text-align:left;
	float:left;
	margin-top:0px;
	font-size: 16px;
  }
  
  .select1{
    text-align: center;
    }
  
    a.select2 li{
      padding-right: 13%;
    }
  
    a.select3 li{
      padding-right: 13%;
    }

  .menu2 .ulhl{
    border: none;
  }

  .select1 li{
    border: none;
  }
  
  .select2 li{
    border: none;
  }

  .select3 li{
    border: none;
  }

	}