body {
	  margin: 0;
	  font-family: 'Sarabun';
	}

	input[type=text] {
	  width: 65%;
	  font-size: 16px;
	  height: 36px;
	  padding: 5px;
	  margin: 8px;
	  display: inline-block;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	}
	button {
		height: 36px;
		vertical-align: middle;
		background-color: #78E3FD;
		border: 1px solid #D1F5FF;
		border-radius: 5px;
	}

	input[type=button] {
	  border: none;
	  padding: 6px 6px;
	  text-decoration: none;
	  margin: 4px 2px;
	}

	.top_navbar {
	  overflow: hidden;
	  background-color: white;
	  position: fixed;
	  top: 0;
	  width: 100%;
	  z-index: 1;
	}

	.top_navbar a {
	  float: left;
	  display: block;
	  color: black;
	  text-align: center;
	  padding: 5px 5px;
	  text-decoration: none;
	  font-size: 32px;
	  z-index: 1;
	}
	.bottom_navbar {
	  overflow: hidden;
	  background-color: white;
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  z-index: 1;
	}

	.bottom_navbar a {
	  float: left;
	  display: block;
	  color: rgb(77,77,77);
	  align: center;
	  text-align: center;
	  padding: 2px 2px;
	  text-decoration: none;
	  font-size: 11px;
	  width: 97px; // 120px
	  word-wrap:break-word;
	  z-index: 1;
	}

	.bottom_navbar a:hover {
	  background: #f1f1f1;
	  color: black;
	}

	.bottom_navbar a.active {
	  color: #0099FF;
	  border-bottom: 2px solid #0099FF;
	}
	.menu_wrap {
	  width: 97px; // 115px
	  height: 60px;
	  padding-left: 2px;
	}
	.menu_wrap .symb {
	  width: 95px; // 110px
	  height: 30px;
	  font-size: 30px;
	  padding-bottom: 3px;
	}
	
	.blankbox {
	  display: block;
	  width: 100%;
	  position: relative;
	  white-space:wrap; 
	  padding: 7px;
	  height: 60px;
	  margin: 2px;
	}
	.blankbox .title1 {
	  float: left;
	  font-style: bold;
	  font-size: 0.9em;
	//	  border: 1px solid #C2C2C2;
	  width: 78%;
	  height: 22px;
	  overflow:hidden; 
	  white-space:wrap; 
	  text-overflow: ellipsis;
	}
	.blankbox .subtitle1 {
	  float: right;
	  top: 5px;
	  font-size: 0.8em;
	//	  border: 1px solid #C2C2C2;
	  color: rgb(77,77,77);
	  height: 22px;
	  overflow:hidden; 
	  white-space:wrap; 
	  text-overflow: ellipsis;
	  width: 18%;
	  text-align: right;
	}
	
	.databox {
	  flex: 23%;
	  max-width: 23%;
	  position: relative;
	  padding: 7px;
	  border: 1px solid #5F5F5F;
	  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
	  border-radius: 15px 15px 0px 0px;
	  background-color: #F3F8F2; //#EEF8FF; //#F7FFFF;
	  margin-top: 8px;
	  margin-left: auto;
	  margin-right: auto;
	}
	@media (max-width: 1360px) {
		.databox {
		  flex: 31%;
		  max-width: 31%;
		  position: relative;
		  padding: 7px;
		  border: 1px solid #5F5F5F;
		  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
		  border-radius: 15px 15px 0px 0px;
		  background-color: #F3F8F2; 
		  margin-top: 8px;
		  margin-left: auto;
		  margin-right: auto;
		}
	}
	@media (max-width: 1024px) {
		.databox {
		  flex: 47%;
		  max-width: 47%;
		  position: relative;
		  padding: 7px;
		  border: 1px solid #5F5F5F;
		  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
		  border-radius: 15px 15px 0px 0px;
		  background-color: #F3F8F2; 
		  margin-top: 8px;
		  margin-left: auto;
		  margin-right: auto;
		}
	}
	@media (max-width: 800px) {
		.databox {
		  flex: 97%;
		  max-width: 95%;
		  position: relative;
		  padding: 7px;
		  border: 1px solid #5F5F5F;
		  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
		  border-radius: 15px 15px 0px 0px;
		  background-color: #F3F8F2; 
		  margin-top: 8px;
		  margin-left: auto;
		  margin-right: auto;
		}
	}
	.databox .title1 {
	//  float: left;
	  padding-top: 5px;
	  font-style: bold;
	  font-size: 1.2em;
	  border-bottom: 1px solid #C2C2C2;
	  width: 100%;
	  height: 36px;
	  overflow:hidden; 
	  white-space:nowrap; 
	  text-overflow: ellipsis;
	  text-align: center;
	  vertical-align: sub;
	}
	.databox .subtitle_l {
	  float: left;
	  top: 5px;
	  font-size: 0.8em;
	  color: rgb(77,77,77);
	  height: 22px;
	  overflow:hidden; 
	  white-space:nowrap; 
	  text-align: left;
	  text-overflow: ellipsis;
	  width: 65%;
	}
	.databox .subtitle_r {
	  float: right;
	  top: 5px;
	  font-size: 0.8em;
	  color: rgb(77,77,77);
	  height: 22px;
	  overflow:hidden; 
	  white-space:nowrap; 
	  text-align: right;
	  text-overflow: ellipsis;
	  width: 35%;
	}
	.databox .detail1 {
	  float: left;
	  font-size: 1em;
	  width: 100%;
	  color: rgb(77,77,77);
	  white-space:wrap; 
	}
	.databox a {
	  float: left;
	  font-size: 0.8em;
	  color: black;
	  border: 1px solid #5F5F5F;
	  border-radius: 5px;
	  padding: 5px;
	  margin: 2px;
	  text-decoration: none;
	}
	.menu_wrap {
	  width: 85px;
	  height: 60px;
	  padding-left: 2px;
	}
	.menu_wrap .symb {
	  width: 80px;
	  height: 30px;
	  font-size: 30px;
	  padding-bottom: 3px;
	}

	.main {
	  display: flex;
	  flex-wrap: wrap;
	  padding: 0px;
	  margin-bottom: 1.5em;
	  position: relative;
	  top: 50px;
	}