.loading{
  width: 100%;
}
img.background_img {
  display: none;
}

  body{
    padding: 0;
    margin: 0;
    font-family: 'Athiti', sans-serif;
    background-color: white;
    color:white;
    overflow-y: hidden;
  }
  video.vdo_background {
  position: fixed;
  bottom: 0%;
  left: 50%;
  width: 100%;
  height: auto;
  min-width: auto;
  min-height: auto;
  z-index: -1;
  transform: translateX(-50%) translateY(0%);
  background-size: cover;
  margin: auto;
  display: inline;
  }
#black_screen{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
  display: none;
  top: 0%;
}
  div.play_vdo_board{
    top: 18%;
    position: fixed;
    text-align: center;
    width: auto;
    height: 160px;
    width: 10%;
    left: 45%;
  }
  video#board_vdo {
      width: 100%;
  }
  div#board_vdo{
    position: fixed;
    width: 70%;
    left: 15%;
    top: 10%;
  }
  video.map_vdo {
  position: fixed;
  transform: translateX(-50%) translateY(-50%);
  display: none;
  left: 50%;
  top: 50%;
  width: 70%;
  }
  .contact_img{
  padding: 2px;
  }
  .topnav {
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    display: none;
    position: absolute;
    right: 100px;
    background: rgba(0, 0, 0, 0.3);
    top: 2%;
    height: auto;
    min-height: auto;
    border-radius: 10px 10px 10px 10px;
   -moz-border-radius: 10px 10px 10px 10px;
   -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
  }
  .topnav li {float: left;}
  .topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
    font-size: 150%;
    transition: 0.5s;
  }
  .topnav li a:hover {
    background: rgba(0, 0, 0, 0.5);
    font-size: 200%;
    transition: 0.5s;
  }
  .topnav li a.click {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    cursor: default;
  }
  .logo_menu{
    display: none;
  }
  .icon {
    float: right;
    display: inline-block;
    right:  2%;
    top: 2%;
    position: fixed;
    display: none;
  }
  #icon_img{
    width: 100%;
    transition: 0.5s;
  }
  #icon_img:hover{
    width: 120%;
    transition: 0.5s;
  }
  .spin{
    animation-name: spin;
    animation-duration: 500ms;
  }
  .spinlong{
    animation-name: spinlong;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.000, 0.945, 0.280, 0.750);
    -webkit-animation-timing-function: cubic-bezier(0.000, 0.945, 0.280, 0.750);
  }

  @-webkit-keyframes spin {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
  }
  @keyframes spin {
      from {
          transform:rotate(0deg);
      }
      to {
          transform:rotate(360deg);
      }
  }
  @-webkit-keyframes spinlong {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
  }
  @keyframes spinlong {
      from {
          transform:rotate(0deg);
      }
      to {
          transform:rotate(360deg);
      }
  }
  .close_menu{
    display: none;
  }

.content{
  top: 20%;
}
#home{
  padding: 2%;
  left: 35%;
  width: 30%;
  color: white;
  font-size: 20px;
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
}
#home h1{
  width: 100%;
  text-align: center;
}
#welcome_content{
  text-align: center;

}
div#logo{
  top: 2%;
  display: inline;
  left:2%;
  position: fixed;
  display: none;
  height: 8%;
}
.content#board{
  position: fixed;
  top: 27%;
  color: white;
  padding: 0;
  left: 2%;
}
.board_description{
  font-size: 16px;
  padding: 2%;
  text-align: left;
  left: 25%;
  width: 50%;
  background: rgba(0,0,0,0.5);
  display: none;
  position: fixed;
  bottom: 5%;
  font-size: 120%;
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
}
iframe#about_video{
height: 550px;
}
iframe#board_video{
height: 550px;
}
.blod_name{
  font-weight: bold;
}
img#logo{
  height: 100%;
}
img#logo:hover{
 cursor: pointer;
}
.blur{
  -webkit-filter: blur(9px); /* Safari 6.0 - 9.0 */
    filter: blur(9px);
}
.board_name{
  font-size: 150%;
}
#play_vdo{
  position: fixed;
  top: 10%;
  left: 47%;
  width : 5%;
}
#play_vdo:hover{
  cursor:pointer;
}
.address{
  text-align: center;
  position: initial;
}
#contact{
  width: 100%;
  color:white;
  text-align: center;
  position: fixed;
  top: 10%;
}
#map div{
  background: rgba(0,0,0,0.5);
  padding: 2%;
  width: 90%;
  border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
font-size: 200%;
color: white;
margin-left : 5%;
}
div.director_class{
  display: none;
}
.map_button{
  margin-top: 3%;
  width:90%;
  transition: 0.2s;
}
.map_button:hover{
  cursor: pointer;
  width: 100%;
  transition: 0.2s;
}
.close_menu:hover{
  color: #333;
}
#page{
  text-align: center;
}
#about a {
    background: #fff;
    text-indent: -9999px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
#about a:hover {
    background: #111;
}
#about a.click {
    background: #111;
}
video#about_video{
  width: 100%;
}
div.about_video{
  left: 15%;
  top: 10%;
  position: fixed;
  display: none;
  width: 70%;
}
div.play_vdo_about{
  position: fixed;
  left: 45%;
  width: 10%;
  cursor: pointer;
  top:  60%;
  }
div.play_vdo_about img{
  width: 100%;

}
div.about_content{
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top :20%;
  color:white;
  text-align: center;
  padding: 2%;
  width: 50%;
  left:   25%;
  font-size: 150%;
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
}
.job_list{
  width: 46%;
  display: inline;
  float: left;
  height: 250px;
  margin: 0% 0 0% 0;
  text-align: center;
  font-size: 120%;
}
#job{
  top: 2%;
  width: 35%;
  left: 15%;
  position: fixed;
  padding: 0;
}
.all_job{
  height: 600px;
  overflow-y: auto;
  overflow-x: hidden;

}
.all_job::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.all_job::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.all_job::-webkit-scrollbar-thumb {
  background: rgba(144,144,144,0.3);
  border: 0px inset #ffffff;
  border-radius: 100px;
}
.all_job::-webkit-scrollbar-thumb:active {
  background: #000000;
}
.all_job::-webkit-scrollbar-thumb:active {
  background: #000000;
}
.all_job:::-webkit-scrollbar-corner {
  background: transparent;
}
div#job_video{
  margin-top: 0;
  width: 100%;
  display: inline;
  float: left;
  height: 190px;
  text-align: center;

}
div.board_info{
  width: 24%;
  float: left;
  margin: 0 ;
  padding : 0;
}
img.board_img{
  width: 100%;
}
div#job_video img{
  height: 100%;
}
video.job_vdo{
  height: 100%;
}
video.job_vdo:hover{
  cursor: pointer;
}
a{
  color:white;
}
.GoogleMap{
  width: 45px;
  height: 45px;
}
a:hover{
  color:white;
  text-decoration: none;
}
.about_tab,.content,div#board_vdo{
  display: none;
}
#about_tab1{
  display: inline;
}
.change_language{
  bottom: 2%;
  left: 2%;
  position: fixed;
  width: 40px;
  height: 40px;
}
.volume_control{
  bottom: 2%;
  left: 7%;
  position: fixed;
  width: 40px;
  height: 40px;
  display: none;
}
img.language{
  width: 100%;
}
img.language:hover{
  cursor: pointer;
}
#en_on{
  display: none;
}
#th_off{
  display: none;
}
#music_off{
display: none;
width: 100%;
cursor: pointer;
}
#music_on{
width: 100%;
cursor: pointer;
}
.social{
  display: inline-flex;
}
#play_vdo_board{
cursor: pointer;
height: 100%;
}
.map_img{
display: none;
}
#loading{
position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: auto;
  min-height: auto;
  height: auto;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  margin: auto;
}
.pls_click{
padding: 2%;
margin: 0 0 10% 0 ;
font-size: 26px;
background: rgba(0,0,0,0.2);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
text-align: center;
width: 100%;
}
.close_map{
color: white;
font-size: 38px;
position: fixed;
cursor: pointer;
display: none;
top: 70%;
left: 70%;
}
.for_pc{
display: inline;
}
.for_mobile{
display: none;
}
/*@media only screen and (max-width:1599px) and (max-height:700px){
video.vdo_background {
  width: 100%;
  height: auto;
}
}*/
@media only screen and (max-aspect-ratio: 1600/901){
  video.vdo_background {
  width: auto;
  height: 100%;
  }
}
@media only screen and (min-width:1440px) and (min-height: 810px)  {
/*video.vdo_background {
  width: auto;
  height: 120%;
}*/
.job_list{
  height: 300px;
}
div#job_video{
  height: 250px;
}
.close_map{
  top: 75%;
}
}
}
@media only screen and (min-width:1801px) and (min-height: 901px)  {
.job_list{
  height: 350px;
}
div#job_video{
  height: 300px;
}
.close_map{
  top: 80%;
}

}
}