body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height:100%;
  overflow-x: hidden;
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
  font-family: 'Noto Serif KR', serif;
  font-weight: 600;
}

.title{
  margin:20px 0;
}

.middle {
  margin-bottom: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}


#lyric{
  text-decoration: none;
  display: inline-block;
  margin:-2px;
  padding:15px 0;
  position: relative;
}

#lyric span{
  position: relative;
  opacity: 0; 
  animation: animateOverlay 1s ease-in-out forwards;
}

#lyric span:nth-child(4n+1){
  animation-delay: 0s;
}
#lyric span:nth-child(4n){
  animation-delay: 1s;
}
#lyric span:nth-child(4n+2){
  animation-delay: 2s;
}
#lyric span:nth-child(4n+3){
  animation-delay: 3s;
}


@keyframes animateOverlay {
  to{
    opacity: 1;
    top: 0;
  }
}


.box {
  height: 200px;
  width:100%;
  position:absolute;
  top:850px;
  left:0;
}
.wave {
  position: absolute;
  top: -200px;
  width: 100%;
  height: 200px;
  
  background: white;
  opacity: .2;
  animation: wave 5s cubic-bezier( 0.36, 0.2, 0.9, 0.53) infinite, swell 5s ease-in-out -3s infinite;
  transform: translate3d(0, 0, 0);
}

@media (max-width:700px){
  .wave{
    height:100px;
  }
  .middle{margin-bottom:200px;}
  .iframe{
    width:100px;
    height:50px;
  }
}

.wave:nth-of-type(2) {
  top: -200px;
  animation: wave 4s cubic-bezier( 0.36, 0.2, 0.83, 0.53) -.125s infinite, swell 3s ease-in-out -1.25s infinite;
  opacity: .3;
}

@keyframes wave {
  0% { transform: translateY(5%); }
  100% { transform: translateY(-5%); }
}
@keyframes swell {
  0%, 100% { transform: translate3d(0,-10px,0); }
  50% { transform: translate3d(0,10px,0); }
}

.mv {
  margin-top:5%;
  margin-bottom: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  overflow:hidden;
}
iframe{
  border-radius: 2%;
  width:500px; 
  height:350px;
  border-style: none;
}
iframe:hover{
  transform:scale(1.4);
  transition: transform .5s;
}



@media (max-width:600px){
  .mv{
    width:100%;
  }
  iframe{
    width:90%;
    transform:rotate(0deg);
    transition: transform .5s;
  }
  iframe:hover{
    width:130%;
    transform:rotate(90deg);
    transition: transform .5s;
  }
}