#demoCanvas {
  width: 100%;
  height: 100%;
}

.skip {
  display: none;
  position: absolute;
  top: .586207rem /* 17/29 */;
  right: .586207rem /* 17/29 */;
  height: 2.068966rem /* 60/29 */;
  width: 1.896552rem /* 55/29 */;
  background-image: url('../img/skip.png');
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: -1;
  visibility: hidden;
}

.openAnimeModals {
  display: none;
  position: absolute;
  top: .344828rem /* 10/29 */;
  right: 3.103448rem /* 90/29 */;
  height: 2.068966rem /* 60/29 */;
  width: 1.896552rem /* 55/29 */;
  background-image: url('../img/record.png');
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: -1;
  visibility: hidden;
}

.openRose {
  display: none;
  position: absolute;
  top: .344828rem /* 10/29 */;
  right: .62069rem /* 18/29 */;
  height: 2.068966rem /* 60/29 */;
  width: 1.896552rem /* 55/29 */;
  background-image: url('../img/gift.png');
  background-size: 100%;
  background-repeat: no-repeat;
  animation: shake 0.8s infinite;
  -webkit-animation: shake 0.8s infinite;
  z-index: -1;
  visibility: hidden;
}

@keyframes shake
{
  0% {
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    -moz-transform:rotate(15deg);
    -webkit-transform:rotate(15deg);
    -o-transform:rotate(15deg);
    transform: rotate(15deg);
  }
  80% {
    -moz-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    transform: rotate(-15deg);
  }
  100% {
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes shake /*Safari and Chrome*/
{
  0% {
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    -moz-transform:rotate(15deg);
    -webkit-transform:rotate(15deg);
    -o-transform:rotate(15deg);
    transform: rotate(15deg);
  }
  80% {
    -moz-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    transform: rotate(-15deg);
  }
  100% {
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform: rotate(0deg);
  }
}

.anime-page {
  width: 100%;
  height: 100%;
}

.anime-modal {
  color: #591309;
  background-size: 100%;
  background-repeat: no-repeat;
  font-weight: bold;
}

.anime-modal span {
  color: #ce1a01;
  font-size: .586207rem /* 17/29 */;
}

.anime-modal .info {
  font-size: .517241rem /* 15/29 */;
}

.anime-modal .modal-cancel {
  top: .275862rem /* 8/29 */;
  right: .689655rem /* 20/29 */;
}

.anime-modal .arrow {
  display: none;
  position: absolute;
  left: 12.586207rem /* 365/29 */;
  bottom: .689655rem /* 20/29 */;
  height: 1.275862rem /* 37/29 */;
  width: 1.37931rem /* 40/29 */;
  background-image: url('../img/arrow.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.anime-modal .left-arrow {
  bottom: .534483rem /* 15.5/29 */;
  animation: leftmove 2s infinite alternate;
  -webkit-animation: leftmove 2s infinite alternate;
}

.anime-modal .right-arrow {
  margin-bottom: -.034483rem /* 1/29 */;
  margin-left: 3.103448rem /* 90/29 */;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -o-transform: rotate(180deg); /* Opera */
  -moz-transform: rotate(180deg); /* Firefox */
  animation: rightmove 2s infinite alternate;
  -webkit-animation: rightmove 2s infinite alternate;
}

@keyframes leftmove
{
  from {
    left:12.586207rem /* 365/29 */;
  }
  to {
    left:12rem;
  }
}

@-webkit-keyframes leftmove /*Safari and Chrome*/
{
  from {
    left:12.586207rem /* 365/29 */;
  }
  to {
    left:12rem;
  }
}

@keyframes rightmove
{
  from {
    left:12.586207rem /* 365/29 */;
  }
  to {
    left:13rem;
  }
}

@-webkit-keyframes rightmove /*Safari and Chrome*/
{
  from {
    left:12.586207rem /* 365/29 */;
  }
  to {
    left:13rem;
  }
}

.anime-modal-1 .arrow {
  left: 5.517241rem /* 160/29 */;
}

.anime-modal-1 .right-arrow {
  animation: rightmove-1 2s infinite alternate;
  -webkit-animation: rightmove-1 2s infinite alternate;
}

@keyframes rightmove-1
{
  from {
    left:5.517241rem /* 365/29 */;
  }
  to {
    left:6rem;
  }
}

@-webkit-keyframes rightmove-1 /*Safari and Chrome*/
{
  from {
    left:5.517241rem /* 365/29 */;
  }
  to {
    left:6rem;
  }
}

.anime-modal-5 .arrow {
  left: 16.551724rem /* 480/29 */;
}

.anime-modal-5 .left-arrow {
  animation: leftmove-5 2s infinite alternate;
  -webkit-animation: leftmove-5 2s infinite alternate;
}

.anime-modal-5 .right-arrow {
  animation: rightmove-5 2s infinite alternate;
  -webkit-animation: rightmove-5 2s infinite alternate;
}

@keyframes leftmove-5
{
  from {
    left:16.551724rem /* 480/29 */;
  }
  to {
    left:16rem;
  }
}

@-webkit-keyframes leftmove-5 /*Safari and Chrome*/
{
  from {
    left:16.551724rem /* 480/29 */;
  }
  to {
    left:16rem;
  }
}

@keyframes rightmove-5
{
  from {
    left:16.551724rem /* 480/29 */;
  }
  to {
    left:17rem;
  }
}

@-webkit-keyframes rightmove-5 /*Safari and Chrome*/
{
  from {
    left:16.551724rem /* 480/29 */;
  }
  to {
    left:17rem;
  }
}

.anime-modal-6 .arrow {
  left: 10.689655rem /* 310/29 */;
}

.anime-modal-6 .left-arrow {
  animation: leftmove-6 2s infinite alternate;
  -webkit-animation: leftmove-6 2s infinite alternate;
}

@keyframes leftmove-6
{
  from {
    left:10.689655rem /* 310/29 */;
  }
  to {
    left:10rem;
  }
}

@-webkit-keyframes leftmove-6 /*Safari and Chrome*/
{
  from {
    left:10.689655rem /* 310/29 */;
  }
  to {
    left:10rem;
  }
}



.anime-modal .bg{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 22.413793rem /* 650/29 */;
  height: 12.068966rem /* 350/29 */;
  background-size: 100%;
  background-repeat: no-repeat;
  margin: auto;
}



.anime-modal-1 .bg{
  background-image: url('../anime/anime-modal-1.png');
}

.anime-modal-2 .bg{
  background-image: url('../anime/anime-modal-2.png');
}

.anime-modal-3 .bg{
  background-image: url('../anime/anime-modal-3.png');
}

.anime-modal-4 .bg{
  background-image: url('../anime/anime-modal-4.png');
}

.anime-modal-5 .bg{
  background-image: url('../anime/anime-modal-5.png');
}

.anime-modal-6 .bg{
  background-image: url('../anime/anime-modal-6.png');
}

.anime-modal-1 .info {
  top: 1.724138rem /* 50/29 */;
  left: -6.724138rem /* 195/29 */;
  width: 9.103448rem /* 264/29 */;
  height: 10.344828rem /* 300/29 */;
}

.anime-modal-1 .info .i-1 {
  width: 8.275862rem /* 240/29 */;
  margin-bottom: .758621rem /* 22/29 */;
  text-align: justify;
}

.anime-modal-1 .info .i-2 {
  margin-bottom: .758621rem /* 22/29 */;
}

.anime-modal-1 .info .i-3 {
  width: 8.965517rem /* 260/29 */;
  text-align: justify;
}

.anime-modal-2 .info {
  position: absolute;
  top: 1.551724rem /* 45/29 */;
  left: 8.689655rem /* 252/29 */;
  width: 11.37931rem /* 330/29 */;
  height: 10.344828rem /* 300/29 */;
  text-align: justify;
}

.anime-modal-2 .info .i-1 {
  margin-bottom: .689655rem /* 20/29 */;
}

.anime-modal-2 .info .i-2 {
  margin-bottom: .758621rem /* 22/29 */;
}

.anime-modal-2 .info .i-3 {
  margin-left: 2.206897rem /* 64/29 */;
  position: absolute;
  top: 4.137931rem /* 120/29 */;
}

.anime-modal-3 .info {
  position: absolute;
  top: 1.724138rem /* 50/29 */;
  left: 11.137931rem /* 323/29 */;
  width: 8.965517rem /* 260/29 */;
  height: 10.344828rem /* 300/29 */;
  text-align: justify;
}

.anime-modal-3 .info .i-1 {
  margin-bottom: .689655rem /* 20/29 */;
}

.anime-modal-3 .info .i-2 {
  margin-bottom: .758621rem /* 22/29 */;
}

.anime-modal-3 .info .i-3 {
  position: absolute;
  top: 4.482759rem /* 130/29 */;
}

.anime-modal-4 .info {
  position: absolute;
  top: 2.068966rem /* 60/29 */;
  left: 11.034483rem /* 320/29 */;
  width: 8.965517rem /* 260/29 */;
  height: 10.344828rem /* 300/29 */;
  text-align: justify;
}

.anime-modal-4 .info .i-1 {
  margin-bottom: .689655rem /* 20/29 */;
}

.anime-modal-4 .info .i-2 {
  position: absolute;
  top: 3.586207rem /* 104/29 */;
}

.anime-modal-5 .info {
  position: absolute;
  top: 2.172414rem /* 63/29 */;
  left: 8.172414rem /* 237/29 */;
  width: 11.62069rem /* 337/29 */;
  height: 10.344828rem /* 300/29 */;
}

.anime-modal-5 .info .i-1 {
  margin-bottom: .689655rem /* 20/29 */;
}

.anime-modal-5 .info .i-2 {
  margin-bottom: .758621rem /* 22/29 */;
}

.anime-modal-6 .info {
  position: absolute;
  top: 2.172414rem /* 63/29 */;
  left: 9.37931rem /* 272/29 */;
  width: 8.275862rem /* 240/29 */;
  height: 10.344828rem /* 300/29 */;
  text-align: justify;
}

.anime-modal-6 .info .i-1 {
  margin-bottom: .689655rem /* 20/29 */;
}

.anime-modal-6 .info .i-2 {
  margin-bottom: .758621rem /* 22/29 */;
}

.anime-modal-6 .modal-cancel {
  right: 2.241379rem /* 65/29 */;
}