@charset "UTF-8";

@media only screen and (max-width: 640px) {

header {
  width: 93%;
  margin: 0 auto;
}

header #headerArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  overflow: hidden;
}

header #headerArea div.fl {
  width: 60%;
}

header #headerArea div.fl img {
  width: 100%;
  height: auto;
}

header #headerArea div.fr {
  display: flex;
  width: 60%;
}

header #headerArea div.fr a {
  width: 40%;
  height: 40%;
  margin: 0 2%;
}


header #headerArea div.fr img {
  width: 100%;
  height: auto;
  margin: 0 2%;
}

header #headerArea div.flex {
  display: flex;
  justify-content: space-around;
  width: 60%;
  float: right;
}
}

/*FOR Drawer*/
#overlay {
width: 100%;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background: rgba(0,0,0,.7);
z-index: 100;
display: none;
}
#drawer-menu {
width: 60%;
height: 100vh;
background: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 200;
transform: translateX(200%);
transition: all 0.3s ease 0s;
}
#drawer-menu.open {
  transform: translateX(70%);
}
  #drawer-menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
#drawer-menu li {
  border-bottom: 1px solid #ccc;
}

#drawer-menu li a {
  display: block;
  padding: 15px;
}