@media only screen and (max-height:1024px)
and (max-width:768px)
and (min-height:801px)
and (min-width:601px)  {
.device{
content: 'tablet';
}
video.vdo_background{
width: auto;
left: 47%;
height: 100%;
display: none;
}
img.background_img{
  position: fixed;
  display: inline;
  height: 100%;
  width: auto;
  right: 0;
  }
#home{
width:96%;
left: 2%;
}
div.about_video{
display:none;
top:30%;
width:100%;
left:auto;
position:fixed;
padding:0% 2% 0% 2%;
text-align:center;
display: inline;
}
iframe#about_video {
height: 500px;
}
iframe#board_video {
height: 500px;
}
video#about_video{
width:100%;
height:auto;
}
img#play_vdo_about{
width:100%;
}
div.about_content{
width:96%;
padding:0 2% 0 2%;
top : 13%;
position:fixed;
float:left;
left: 2%;
}
div.board_info{
width: 50%;
height: 350px;
}
div.play_vdo_about{
width: 20%;
top: 50%;
left: 40%;
}
.content#board{
top:10%;
left: 10%;
width: 80%;
}
div.address {
position: fixed;
top: auto;
bottom: 0%;
height: auto;
margin:0;
width: 100%;
padding-bottom:2%;
}
div.address_logo img{
width: 20%
}
div.social img{
height: 25px;
}
div.play_vdo_board{
text-align: center;
top: 3%;
width: 10%;
left: 40%;

}
.board_description {
left: 15%;
width: 70%;
}
#board_content{
margin-top: 1%;
}
div#board_vdo {
left: 10%;
width: 80%;
}
.board_info{
width: 50%;
float: left;
}
.map_button{
width: 100%;
}
#map{
left: 0;
width: 100%;
padding: 0 2.5% 5% 2.5%;
margin: 0;
position: fixed;
top: 120px;
}
video.map_vdo{
width: 80%;
}
#map div {
margin: 0;
width: 100%;
}
.pls_click{
width: 100%;
}
div#job{
width: 100%;
left: 0%;
top: 12%;
}
div#job_video {
height: 290px;
}
.all_job{
height: 500px;
overflow-y: auto;
}
.job_list{
width: 50%;
left: 0;
margin: 0 0 0 0;
height: 360px;
}
.volume_control {
left: 9%;
display: none;
}

}
@media only screen
and (max-height:768px)
and (max-width:1024px)
and (min-width:801px)
and (min-height:601px) {
.device{
content: 'tablet';
}
.mode{
content: 'h';
}
img#logo {
  height: 100%;
}
.volume_control {
left: 9%;
display: none;
}
video.vdo_background {
height: 100%;
width: auto;
left: 55%;
display: none;
}
img.background_img{
  position: fixed;
  display: inline;
  height: 100%;
  width: 100%;
  }
#home{
width:60%;
left: 20%;
}
.board_info{
width: 25%;
float: left;
}
#board_content{
margin-top: 1%;
}
div.about_content{
font-size: 160%;
}
div.board_name{
font-size: 110%;
}
div#board_vdo {
left: 10%;
width: 80%;
}
div.play_vdo_board{
top: 18%;
left: 40%;
width: 20%;
}
div.about_video{
width: 80%;
left: 10%;
height:
}
iframe#about_video {
height: 500px;
}
iframe#board_video {
height: 500px;
}
div.play_vdo_about{
top: 70%;
}
video#about_video{
width:100%;
height:auto;
display: inline;
}
div#contact{
position: fixed;
top: 15%
}
div.address{
width: 50%;
float: left;
}
div#map{
width: 50%;
float: left;
}
video.map_vdo{
width: 60%;
}
div#job_video{
height: 190px;
}
div#job{
width: 40%;
left: 30%;
top: 10%;
}
.pls_click{
width: 100%;
}
.job_list{
width: 50%;
left: 0;
margin: 0 0 0% 0;
height: 210px;
}
.all_job{
height: 500px;
overflow-y: auto;
}
/*.topnav {
    margin:0;
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255, 1);
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.5s;
    -webkit-transition:  0.5s;
    -moz-transition:  0.5s;
    -o-transition: 0.5s;
    display: inline;
  }
   .topnav li {
    position: relative;
    top: 10%;
    width: 100%;
    text-align: left;
  }

  .topnav li a {
    text-decoration: none;
    font-size: 26px;
    color: black;
    display: block; 
    text-align: left;
    padding: 0% 0% 2% 20%;
  }
  .topnav li.icon {
    display: inline;
  }*/
}