@font-face {
  font-family: "ekkamai";
  src: url("../font/ekkamai.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "nithan";
  src: url("../font/nithan.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "bangna";
  src: url("../font/bangna.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "prajad";
  src: url("../font/prajad.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "sarabun";
  src: url("../font/sarabun.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "supermarket";
  src: url("../font/supermarket.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.th_content {
  font-family: prajad, sarabun, ekkamai !important;
  letter-spacing: 0.05em !important;
  /* font-size: 18px; */
  /* text-align: justify; */
}
.th_header {
  font-family: supermarket, prajad, sarabun, ekkamai !important;
  letter-spacing: 0.12em !important;
  /* font-size: 30px; */
  /* font-weight: bolder; */
}
.th_icon {
  font-family: prajad, sarabun, ekkamai !important;
  letter-spacing: 0.05em !important;
  font-size: 15px;
  font-weight: bolder;
}

.geosat_anim{
  -webkit-animation: color-change 4s linear forwards;
  -moz-animation: color-change 4s linear forwards;
  -o-animation: color-change 4s linear forwards;
  -ms-animation: color-change 4s linear forwards;
  animation: color-change 4s linear forwards;
}

[v-cloak] {display: none;}

@-webkit-keyframes color-change {
  0% { color:#000000; }
  20% { color: #212121; }
  40% { color: #424242; }
  60% { color: #616161; }
  80% { color:#BDBDBD; }
  100% { color: #FFFFFF; }
}
@-moz-keyframes color-change {
  0% { color:#000000; }
  20% { color: #212121; }
  40% { color: #424242; }
  60% { color: #616161; }
  80% { color:#BDBDBD; }
  100% { color: #FFFFFF; }
}
@-ms-keyframes color-change {
  0% { color:#000000; }
  20% { color: #212121; }
  40% { color: #424242; }
  60% { color: #616161; }
  80% { color:#BDBDBD; }
  100% { color: #FFFFFF; }
}
@-o-keyframes color-change {
  0% { color:#000000; }
  20% { color: #212121; }
  40% { color: #424242; }
  60% { color: #616161; }
  80% { color:#BDBDBD; }
  100% { color: #FFFFFF; }
}
@keyframes color-change {
  0% { color:#000000; }
  20% { color: #212121; }
  40% { color: #424242; }
  60% { color: #616161; }
  80% { color:#BDBDBD; }
  100% { color: #FFFFFF; }
}

.gradientBg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
	background-size: 400% 400%;
	-webkit-animation: gradBg 10s ease infinite;
	        animation: gradBg 10s ease infinite;
}
@-webkit-keyframes gradBg {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes gradBg {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.white {color: #faf9f7;}
.black {
  color: #000000;
}