@charset "UTF-8";
/* CSS Document */

.btn {
	position: relative;
	width: 100%;
	max-width: 400px;
	height: 131px;
	display: block;
	margin-top: 40px;
	overflow: hidden;
	margin-right: auto;
	margin-left: auto;
}
.btn .btn_scale {
	position: absolute;
	left: 50%;
	bottom: 0px;
	width: 300px;
	height: 131px;
	margin-left: -150px;
	z-index: 1;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	animation-name: btnanime;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	-webkit-animation-name: btnanime;
	-webkit-animation-duration: 1.2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-name: btnanime;
	-moz-animation-duration: 1.2s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-o-animation-name: btnanime;
	-o-animation-duration: 1.2s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: alternate;
	-ms-animation-name: btnanime;
	-ms-animation-duration: 1.2s;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: alternate;
}
@keyframes btnanime {
0% {
transform:scale(1);
}
100% {
transform:scale(1.1);
}
}
@-webkit-keyframes btnanime {
0% {
-webkit-transform:scale(1);
}
100% {
-webkit-transform:scale(1.1);
}
}
@-moz-keyframes btnanime {
0% {
-moz-transform:scale(1);
}
100% {
-moz-transform:scale(1.1);
}
}
@-o-keyframes btnanime {
0% {
-o-transform:scale(1);
}
100% {
-o-transform:scale(1.1);
}
}
@-ms-keyframes btnanime {
0% {
-ms-transform:scale(1);
}
100% {
-ms-transform:scale(1.1);
}
}
.btn .rotate {
	position: absolute;
	left: 50%;
	bottom: 0px;
	width: 300px;
	height: 131px;
	margin-left: -150px;
	z-index: 1;
	animation-name: rotate;
	animation-duration: 3s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-direction: normal;
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-moz-animation-name: rotate;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
}
@keyframes rotate {
 0% {
transform: rotateY(0deg);
}
 14% {
transform: rotateY(-180deg);
}
 28% {
transform: rotateY(60deg);
}
 35% {
transform: rotateY(-30deg);
}
 38.5% {
transform: rotateY(0deg);
}
 42% {
transform: rotateY(0deg);
}
 100% {
transform: rotateY(0deg);
}
}
@-webkit-keyframes rotate {
 0% {
-webkit-transform: rotateY(0deg);
}
 14% {
-webkit-transform: rotateY(-180deg);
}
 28% {
-webkit-transform: rotateY(60deg);
}
 35% {
-webkit-transform: rotateY(-30deg);
}
 38.5% {
-webkit-transform: rotateY(0deg);
}
 42% {
-webkit-transform: rotateY(0deg);
}
 100% {
-webkit-transform: rotateY(0deg);
}
}
@-moz-keyframes rotate {
 0% {
-moz-transform: rotateY(0deg);
}
 14% {
-moz-transform: rotateY(-180deg);
}
 28% {
-moz-transform: rotateY(60deg);
}
 35% {
-moz-transform: rotateY(-30deg);
}
 38.5% {
-moz-transform: rotateY(0deg);
}
 42% {
-moz-transform: rotateY(0deg);
}
 100% {
-moz-transform: rotateY(0deg);
}
}
.btn .arrow {
	position: absolute;
	z-index: 2;
	width: 80px;
	height: 80px;
	animation-name: arwanime;
	animation-duration: 0.6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	-webkit-animation-name: arwanime;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-name: arwanime;
	-moz-animation-duration: 0.6s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-o-animation-name: arwanime;
	-o-animation-duration: 0.6s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: alternate;
	-ms-animation-name: arwanime;
	-ms-animation-duration: 0.6s;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: alternate;
}
@keyframes arwanime {
0% {
top: 35px;
left: -30px;
}
100% {
top: 35px;
left: 5px;
}
}
@-webkit-keyframes arwanime {
0% {
top: 35px;
left: -30px;
}
100% {
top: 35px;
left: 5px;
}
}
@-moz-keyframes arwanime {
0% {
top: 35px;
left: -30px;
}
100% {
top: 35px;
left: 5px;
}
}
@-o-keyframes arwanime {
0% {
top: 35px;
left: -30px;
}
100% {
top: 35px;
left: 5px;
}
}
@-ms-keyframes arwanime {
0% {
top: 35px;
left: -30px;
}
100% {
top: 35px;
left: 5px;
}
}
.blink {
	animation-name: blinkanime;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	-webkit-animation-name: blinkanime;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-name: blinkanime;
	-moz-animation-duration: 0.5s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-o-animation-name: blinkanime;
	-o-animation-duration: 0.5s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: alternate;
	-ms-animation-name: blinkanime;
	-ms-animation-duration: 0.5s;
	-ms-animation-timing-function: linear;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: alternate;
}
@keyframes blinkanime {
0% {
color: #FF4848;
}
70% {
color: #FF4848;
}
71% {
color: #fff;
}
100% {
color: #fff;
}
}
@-webkit-keyframes blinkanime {
0% {
color: #FF4848;
}
70% {
color: #FF4848;
}
71% {
color: #fff;
}
100% {
color: #fff;
}
}
@-moz-keyframes blinkanime {
0% {
color: #FF4848;
}
70% {
color: #FF4848;
}
71% {
color: #fff;
}
100% {
color: #fff;
}
}
@-o-keyframes blinkanime {
0% {
color: #FF4848;
}
70% {
color: #FF4848;
}
71% {
color: #fff;
}
100% {
color: #fff;
}
}
@-ms-keyframes blinkanime {
0% {
color: #FF4848;
}
70% {
color: #FF4848;
}
71% {
color: #fff;
}
100% {
color: #fff;
}
}
