*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow: hidden;
}
#menu{
    position: absolute;
    text-align:center;
    z-index: 99;
    width:100%;
}
.btn {
    font-family:dotum;
    display:inline-block;
  position: relative;
  //bottom: 0;
  //left: 90%;
  padding: 2rem;
  font-size:18px;
  //color: #8ba3b9;
  color:white;
  text-align:center;
  text-decoration: none;
  //background: white;
  //border: solid #a8bacb;
  //border-width: 1px 1px 0;
  //transform: translateX(-50%);
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.overlay.show .bar {
  transform: scale(1, 1) translate3d(0, 0, 0);
  transform-origin: 0 0;
}
.overlay .bar {
  position: absolute;
  width: 10.1vw;
  background: #8ba3b9;
  top: 0;
  bottom: 0;
  transform: scale(0, 1) translate3d(0, 0, 0);
  transform-origin: 100% 100%;
  transition: transform 0.5s ease-in-out;
}
.overlay .bar:first-of-type {
  border-left: none;
}
.overlay .bar:nth-of-type(1) {
  left: 0vw;
  background: linear-gradient(to right, #8ba3b9 0%, #849bb0 100%);
  transition-delay: 0.05s;
}
.overlay .bar:nth-of-type(2) {
  left: 10vw;
  background: linear-gradient(to right, #849bb0 0%, #849bb0 100%);
  transition-delay: 0.1s;
}
.overlay .bar:nth-of-type(3) {
  left: 20vw;
  background: linear-gradient(to right, #849bb0 0%, #7d93a7 100%);
  transition-delay: 0.15s;
}
.overlay .bar:nth-of-type(4) {
  left: 30vw;
  background: linear-gradient(to right, #7d93a7 0%, #768b9d 100%);
  transition-delay: 0.2s;
}
.overlay .bar:nth-of-type(5) {
  left: 40vw;
  background: linear-gradient(to right, #768b9d 0%, #6f8294 100%);
  transition-delay: 0.25s;
}
.overlay .bar:nth-of-type(6) {
  left: 50vw;
  background: linear-gradient(to right, #6f8294 0%, #687a8b 100%);
  transition-delay: 0.3s;
}
.overlay .bar:nth-of-type(7) {
  left: 60vw;
  background: linear-gradient(to right, #687a8b 0%, #617282 100%);
  transition-delay: 0.35s;
}
.overlay .bar:nth-of-type(8) {
  left: 70vw;
  background: linear-gradient(to right, #617282 0%, #5a6a78 100%);
  transition-delay: 0.4s;
}
.overlay .bar:nth-of-type(9) {
  left: 80vw;
  background: linear-gradient(to right, #5a6a78 0%, #53626f 100%);
  transition-delay: 0.45s;
}
.overlay .bar:nth-of-type(10) {
  left: 90vw;
  background: linear-gradient(to right, #53626f 0%, #4c5a66 100%);
  transition-delay: 0.5s;
}