html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.button {
	
button {background-color: #00a7d0}
button:hover {background-color: #ff7701}
}




.satic-area {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../img/poster-about.jpg) no-repeat center;
  background-size: cover;
}

.dynamic-area1   {
  position:relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/poster-drop-animate2.png) repeat-x 0px 0px;
  background-size: cover;
  animation: posterDrop1 6000s linear infinite;
}
.dynamic-area1 a{ position:absolute;top: 61%;left: 51%;transform: translate(-50%, -50%);}
.t2{ display:none}
.dynamic-area1 a:hover .t1{ display:none}
.dynamic-area1 a:hover .t2{ display:block; margin-top:-4px;}

@keyframes posterDrop1 {
  from { background-position: 0 0; }
  to { background-position: 4000% 0; }
}

.dynamic-area2   {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/poster-drop-animate1.png) repeat-x 0px 0px;
  background-size: cover;
  animation: posterDrop2 8000s linear infinite;
}

@keyframes posterDrop2 {
  from { background-position: 0 0; }
  to { background-position: 30000% 0; }
}