@media only screen and (max-width: 700px) and (max-height: 700px){
.topnav li a {
  font-size: 100%;
  padding: 6px;
}
.topnav {
  right: 80px;
}
/*  .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;
  }
  .logo_menu{
    display: inline;
    width: 80px;
    margin-left: 20%;
  }
  .close_menu{
    display: none;
    text-align: center;
    width: 100%;
    font-size: 300%;
    position: static;
    color: white;
    text-decoration: none;

  }
  .topnav li a.click {
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    cursor: default;
    border-top: 3px solid #000000;
    border-bottom: 1px solid #000000;
  }
  .topnav li a:hover {
    background: rgba(0, 0, 0, 0);
    font-size: 26px;
    transition: 0;
  }*/
  .for_pc{
  display: none;
  }
  .for_mobile{
  display: inline;
  }
}


  @media only screen and (max-width : 450px) and (max-height: 800px){
  .device{
    content: 'mobile';
  }
  .mode{
    content: 'vertical';
  }
  div#logo{
  height: 10%;
  }

  img.background_img{
  position: fixed;
  display: inline;
  height: 100%;
  width: auto;
  right: 0;
  }
  video.vdo_background {
    width: auto;
    display: none;
  }
  #icon_img {
    width: 100%;
  }
  #icon_img:hover{
    width: 120%;
    transition: 0.5s;
  }
  video.map_vdo {
  width: 90%;
  height: auto;
  top : 40%;
  }

  #map{
    top:100px;
  }
  div.play_vdo_board{
  text-align: center;
  top: 80px;
  left: 40%;
  width : 20%;
  position: fixed;
  padding: 0;
  display: inline;
  height: auto;
  }
  img#play_vdo_board{
  width: 100%;
  }
  .content#board {
    top : 180px;
  }
  video.about_video{
    width: 100%;
  }
  div.about_video{
  display: none;
  top: 180px;
  width: 100%;
  left: auto;
  position: fixed;
  padding: 0%;
  }
  div.play_vdo_about{
  text-align: center;
  width : 20%;
  top : 70%;
  position: fixed;
  padding: 0;
  margin:0;
  display: inline;
  left : 40%;
  }
  div.about_content{
    width: 96%;
    padding: 0 2% 0 2%;
    top : 100px;
    position: fixed;
    float: left;
    left: 2%;
  }
  #home{
    width: 96%;
    font-size: 100%;
    left: 2%;
  }
  #home h1{
   font-size: 150%;
  }
  video#board_vdo {
    width: 100%;
  }
  div#board_vdo{
    top: 20%;
    width: 100%;
    left: 0%;
  }
  div.board_info{
    width: 50%;
    float: left;
    text-align: center;
    height: 200px;
  }
  .board_name {
    font-size: 100%;
  }
  .board_description {
    width: 96%;
    left: 2%;
    font-size: 100%;
  }
  div.board_info img{
    width: 100%;
  }
  #job{
    top: 0%;
    width: 100%;
    padding: 0;
    height: 100%;
    margin : 0;
    left: auto;
    margin-top: 90px;
    background: rgba(0, 0, 0, 0);
    height: 450px;
    overflow-y: hidden;
  }
  .pls_click {
    width: 100%;
  }
  div#job_video{
  margin-top: 3px;
  height: 150px;

  }
  .pls_click {
  font-size: 14px;
  }
  .job_list{
    width: 50%;
    margin: 0;
    height: auto;
  }
  .all_job{
    height: 300px;
  }
  .map_button{
    width: 100%;
  }
  .address_logo{
  display: none;

  }
iframe#about_video{
height: 300px;
}
iframe#board_video{
height: 300px;
}
  .social{
    top: 70%;
    position: fixed;
    text-align: center;
    width: 100%;
    display: inherit;
    left: 0;
  }
  .social img{
  width: 10%;
  }
  .map_slider{
    margin-left: 60%;
  }
  img#logo{
    height: 100%;
  }

  .map_img{
  width: 80%;
  left: 10%;
  position: fixed;
  top: 20%;
  }
  #map div{
  font-size: 150%;
  width: 100%;
  margin :  0;
  left: 0%;
  }

}
@media only screen  and (max-width : 800px) and (max-height: 450px){
  .device{
    content: 'mobile';
  }
  .mode{
    content: 'horizon';
  }
  div#logo{
  height: 15%;
  }
  video.vdo_background {
    width: auto;
    display: none;
  }
   #icon_img {
    width: 100%;
  }
  #icon_img:hover{
    width: 120%;
    transition: 0.5s;
  }
  img.background_img{
  position: fixed;
  display: inline;
  height: auto;
  width: 100%;
  right: 0;
  }
  video.vdo_background {
    height: 100%;
    display: none;
  }
  div#job_video{
  margin-top: 0%;
  height: 120px
  }
  #job{
  left: 15%;
  background: rgba(0, 0, 0, 0);
  width: 70%;
  overflow-y: hidden;
  margin: 0;
  height: auto;
  top: 80px;
  }
  .job_list{
  height: 130px;
  font-size: 100%;
  width: 50%;
  }
  .pls_click {
    margin-bottom: 3%;
    font-size: 150%;
  }
  #map{
    padding-bottom: 5%;
    left: 12.5%;
    width: 75%;
    padding: 0 0 5% 0;
    position: fixed;
    top: 80px;
    height: 250px;
    overflow-y: scroll;
  }
  #contact{
    margin-top: 80px;
  }
  .address{
  display: none;
  }
  div#board_vdo {
    width: 70%;
    top: 15%;
  }
  img.board_img{
    height: 70%;
  }
  div.board_info{
    width: 50%;
    float: left;
    height: 200px;
    text-align: center;
  }
  .board_name {
    font-size: 100%;
  }
  #board_content{
    overflow-y: scroll;
    height: 150px;
    width: 80%;
    padding: 0 2% 0 2%;
    top : 70px;
    position: fixed;
    float: left;
    overflow-x: hidden;
    left: 10%;
  }
.board_description {
  font-size: 100%;
  left: 15%;
  width: 70%;
}
  div.play_vdo_board{
  text-align: center;
  height: 60px;
  bottom: auto;
  width : 10%;
  top : 12%;
  position: fixed;
  padding: 0;
  display: inline;

  }
  img#play_vdo_board{
  width: 100%;
  }
  div.about_video{
  display: none;
  top: 80px;
  width: 70%;
  left: 15%;
  position: fixed;
  padding: 0%;
  }
  video#about_video{
  width: 100%;
  height: auto;
  }
  div.play_vdo_about{
  text-align: center;
  height: 60px;
  left: 45%;
  width : 10%;
  top: auto;
  bottom : 7%;
  position: fixed;
  padding: 0;
  display: inline;
  }
  img#play_vdo_about{
    width: 100%;
  }
  iframe#about_video{
  height: 180px;
  }
  iframe#board_video{
  height: 180px;
  }
  div.about_content{
    width: 96%;
    padding: 0 2% 0 2%;
    top : 70px;
    position: fixed;
    float: left;
    left: 2%;
  }
  .topnav {
    overflow-y: scroll;

  }
  #home{
    position: fixed;
    width: 96%;
    left: 2%;
    padding: 2%;
    top: 85px;
  }
  #home h1{
   font-size: 150%;
  }
  .map_img{
  width: 70%;
  left: 15%;
  position: fixed;
  top: 5%;
  }
  #map div{
  font-size: 150%;
  }
  .all_job {
    height: 100px;
  }
}
@media only screen and (max-height: 350px)  {
  #home{
    font-size: 18px;
  }
}

@media only screen and (max-width : 500px) and (max-height: 700px){
   #board_content{
    overflow-y: scroll;
    height: 250px;
  }
}