body {
    background: #555 url("../file/castle.jpg") no-repeat;
    background-size: 1200px 800px;
    background-position: -50px 0px;
}

.title{
	position: absolute;
	height: 400px;
}

.hidetitle{
	position: absolute;
	height: 400px;
	visibility: hidden;
}

.thanks{
	position: absolute;
	height: 600px;
	top: 320px;
	left: 267px;
	visibility: hidden;
}

.showthanks{
	position: absolute;
	height: 600px;
	top: 320px;
	left: 267px;
}

.wingL{
	position: absolute;
	height: 100px;
	top: 420px;
	left: 367px;
	/*background-image: url(../file/wingL.svg);*/
}

.wingLswing{
	position: absolute;
	top: 100px;
	left: -135px;
	-webkit-animation-name: wingLswingRotate;
    -moz-animation-name: wingRswingRotate;
    -ms-animation-name: wingRswingRotate;
    -o-animation-name: wingRswingRotate;
    animation-name: wingLswingRotate;
    animation: wingLswingRotate 1.5s infinite;
    -webkit-animation: wingLswingRotate 1.5s infinite;
	/*background-image: url(../file/wingL.svg);*/
}

.wingR{
	position: absolute;
	height: 100px;
	top: 420px;
	left: 630px;
	/*background-image: url(../file/wingR.svg);*/
}

.wingRswing{
	position: absolute;
	/*height: 550px;*/
	top: 100px;
	left: 630px;

    -webkit-animation-name: wingRswingRotate;
    -moz-animation-name: wingRswingRotate;
    -ms-animation-name: wingRswingRotate;
    -o-animation-name: wingRswingRotate;
    animation-name: wingRswingRotate;
    animation: wingRswingRotate 1.5s infinite;
    -webkit-animation: wingRswingRotate 1.5s infinite;
	/*background-image: url(../file/wingR.svg);*/
}

.mainbody{
	position: absolute;
	height: 800px;
}

#canvas{
	position: absolute;
	top: 0px;
}


@-moz-keyframes wingLswingRotate {
  0% {
    -moz-transfmozrm-mozrigin: right bmozttmozm;
    -moz-transfmozrm: rmoztate(-35deg) scale(0.8);
  }

  50% {
  	-moz-transfmozrm-mozrigin: right bmozttmozm;
    -moz-transfmozrm: rmoztate(10deg) scale(1.2);
  }

  100% {
    -moz-transfmozrm-mozrigin: right bmozttmozm;
    -moz-transfmozrm: rmoztate(-35deg) scale(0.8);
  }
}
@-webkit-keyframes wingLswingRotate {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-35deg) scale(0.8);
  }

  50% {
  	-webkit-transform-origin: right bottom;
    -webkit-transform: rotate(10deg) scale(1.2);
  }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-35deg) scale(0.8);
  }
}
@-o-keyframes wingLswingRotate {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(-35deg) scale(0.8);
  }

  50% {
  	-o-transform-origin: right bottom;
    -o-transform: rotate(10deg) scale(1.2);
  }

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(-35deg) scale(0.8);
  }
}
@-ms-keyframes wingLswingRotate {
  0% {
    -ms-transform-origin: right bottom;
    -ms-transform: rotate(-35deg) scale(0.8);
  }

  50% {
  	-ms-transform-origin: right bottom;
    -ms-transform: rotate(10deg) scale(1.2);
  }

  100% {
    -ms-transform-origin: right bottom;
    -ms-transform: rotate(-35deg) scale(0.8);
  }
}
@keyframes wingLswingRotate {
  0% {
    transform-origin: right bottom;
    transform: rotate(-35deg) scale(0.8);
  }

  50% {
  	transform-origin: right bottom;
    transform: rotate(10deg) scale(1.2);
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(-35deg) scale(0.8);
  }
}


@-moz-keyframes wingRswingRotate {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(35deg) scale(0.8);
  }

  50% {
    -moz-transform: rotate(-10deg) scale(1.2);
  }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(35deg) scale(0.8);
  }
}
@-webkit-keyframes wingRswingRotate {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(35deg) scale(0.8);
  }

  50% {
    -webkit-transform: rotate(-10deg) scale(1.2);
  }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(35deg) scale(0.8);
  }
}
@-o-keyframes wingRswingRotate {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(35deg) scale(0.8);
  }

  50% {
    -o-transform: rotate(-10deg) scale(1.2);
  }

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(35deg) scale(0.8);
  }
}
@-ms-keyframes wingRswingRotate {
  0% {
    -ms-transform-origin: left bottom;
    -ms-transform: rotate(35deg) scale(0.8);
  }

  50% {
    -ms-transform: rotate(-10deg) scale(1.2);
  }

  100% {
    -ms-transform-origin: left bottom;
    -ms-transform: rotate(35deg) scale(0.8);
  }
}
@keyframes wingRswingRotate {
  0% {
    transform-origin: left bottom;
    transform: rotate(35deg) scale(0.8);
  }

  50% {
    transform: rotate(-10deg) scale(1.2);
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(35deg) scale(0.8);
  }
}