@-webkit-keyframes rose1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -700px 0;
  }
}

@keyframes rose1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -700px 0;
  }
}

@-webkit-keyframes rose2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -400px 0;
  }
}

@keyframes rose2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -400px 0;
  }
}

@-webkit-keyframes rose3 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -350px 0;
  }
}

@keyframes rose3 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -350px 0;
  }
}

@-webkit-keyframes rose4 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200px 0;
  }
}

@keyframes rose4 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200px 0;
  }
}

.rose-wrap {
  width: 100%;
  position: absolute;
  top: 0px;
  left: -50px;
}

.rose01 {
  position: absolute;
  display: inline-block;
  width: 100px;
  padding-top: 100px;
  background: url(../images/roses/rose_01.png) no-repeat left center;
}

@media screen and (max-width: 750px) {
  .rose01 {
    width: 50px;
    padding-top: 50px;
  }
}

.rose02 {
  position: absolute;
  display: inline-block;
  width: 100px;
  padding-top: 100px;
  background: url(../images/roses/rose_02.png) no-repeat left center;
}

@media screen and (max-width: 750px) {
  .rose02 {
    width: 50px;
    padding-top: 50px;
  }
}

.rose03 {
  position: absolute;
  display: inline-block;
  width: 100px;
  padding-top: 100px;
  background: url(../images/roses/rose_03.png) no-repeat left center;
}

@media screen and (max-width: 750px) {
  .rose03 {
    width: 50px;
    padding-top: 50px;
  }
}

.rose05 {
  position: absolute;
  display: inline-block;
  width: 100px;
  padding-top: 100px;
  background: url(../images/roses/rose_05.png) no-repeat left center;
  background-size: 100%;
}

@media screen and (max-width: 750px) {
  .rose05 {
    background-size: 100%;
    width: 50px;
    padding-top: 50px;
  }
}

.rose06 {
  position: absolute;
  display: inline-block;
  width: 100px;
  padding-top: 100px;
  background: url(../images/roses/rose_06.png) no-repeat left center;
  background-size: 100%;
}

@media screen and (max-width: 750px) {
  .rose06 {
    background-size: 100%;
    width: 50px;
    padding-top: 50px;
  }
}

.rose07 {
  position: absolute;
  display: inline-block;
  width: 100px;
  padding-top: 100px;
  background: url(../images/roses/rose_07.png) no-repeat left center;
  background-size: 100%;
}

@media screen and (max-width: 750px) {
  .rose07 {
    background-size: 100%;
    width: 50px;
    padding-top: 50px;
  }
}

.rose08 {
  position: absolute;
  display: inline-block;
  width: 100px;
  padding-top: 100px;
  background: url(../images/roses/rose_08.png) no-repeat left center;
  background-size: 100%;
}

@media screen and (max-width: 750px) {
  .rose08 {
    background-size: 100%;
    width: 50px;
    padding-top: 50px;
  }
}

.rose01, .rose02, .rose03 {
  -webkit-animation: rose1 0.8s steps(7, start) infinite;
  animation: rose1 0.8s steps(7, start) infinite;
  background-size: 800px 100px;
}

@media screen and (max-width: 750px) {
  .rose01, .rose02, .rose03 {
    -webkit-animation: rose3 0.8s steps(7, start) infinite;
    animation: rose3 0.8s steps(7, start) infinite;
    background-size: 400px 50px;
  }
}

.rose04 {
  position: absolute;
  display: inline-block;
  width: 80px;
  padding-top: 80px;
  background: url(../images/roses/rose_04.png) no-repeat left center;
  -webkit-animation: rose2 0.8s steps(5, start) infinite;
  animation: rose2 0.8s steps(5, start) infinite;
  background-size: 480px 80px;
}

@media screen and (max-width: 750px) {
  .rose04 {
    width: 40px;
    padding-top: 40px;
    -webkit-animation: rose4 0.8s steps(5, start) infinite;
    animation: rose4 0.8s steps(5, start) infinite;
    background-size: 240px 40px;
  }
}

.rose09 {
  position: absolute;
  display: inline-block;
  width: 80px;
  padding-top: 80px;
  background: url(../images/roses/rose_09.png) no-repeat left center;
  background-size: 100%;
}

@media screen and (max-width: 750px) {
  .rose09 {
    background-size: 100%;
    width: 40px;
    padding-top: 40px;
  }
}

.type01 {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.type02 {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8;
}

.type03 {
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.7;
}

.type04 {
  -webkit-transform: scale(0.4);
  -ms-transform: scale(0.4);
  transform: scale(0.4);
  opacity: 0.6;
}