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

.gear01 {
    -webkit-animation: spin 20s linear infinite;
    -moz-animation: spin 20s linear infinite;
    -ms-animation: spin 20s linear infinite;
    -o-animation: spin 20s linear infinite;
    animation: spin 20s linear infinite;
}
.gear02 {
    -webkit-animation: spin_b 20s linear infinite;
    -moz-animation: spin_b 20s linear infinite;
    -ms-animation: spin_b 20s linear infinite;
    -o-animation: spin_b 20s linear infinite;
    animation: spin_b 20s linear infinite;
}
.gear03 {
    -webkit-animation: spin 12.5s linear infinite;
    -moz-animation: spin 12.5s linear infinite;
    -ms-animation: spin 12.5s linear infinite;
    -o-animation: spin 12.5s linear infinite;
    animation: spin 12.5s linear infinite;
}
.gear04 {
    -webkit-animation: spin_b 12.5s linear infinite;
    -moz-animation: spin_b 12.5s linear infinite;
    -ms-animation: spin_b 12.5s linear infinite;
    -o-animation: spin_b 12.5s linear infinite;
    animation: spin_b 12.5s linear infinite;
}

/*-----------------------------------------------*/
@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

/*-----------------------------------------------*/
@-webkit-keyframes spin_b {
    0% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes spin_b {
    0% {-moz-transform: rotate(360deg);}
    100% {-moz-transform: rotate(0deg);}
}
@-ms-keyframes spin_b {
    0% {-ms-transform: rotate(360deg);}
    100% {-ms-transform: rotate(0deg);}
}
@-o-keyframes spin_b {
    0% {-o-transform: rotate(360deg);}
    100% {-o-transform: rotate(0deg);}
}
@keyframes spin_b {
    0% {transform: rotate(360deg);}
    100% {transform: rotate(0deg);}
}

/*-----------------------------------------------*/
/* gear animetion
/*-----------------------------------------------*/
span.top-scroll-poti .top-scroll::before {
    -webkit-animation: updown 1s ease-in-out infinite alternate;
    -moz-animation: updown 1s ease-in-out infinite alternate;
    -ms-animation: updown 1s ease-in-out infinite alternate;
    -o-animation: updown 1s ease-in-out infinite alternate;
    animation: updown 1s ease-in-out infinite alternate;
}

/*-----------------------------------------------*/
@-webkit-keyframes updown {
    0% { transform:translateY(-10px); }
   50% { transform:translateY(  0px); }
  100% { transform:translateY( -9px); }
}
@-moz-keyframes updown {
    0% { transform:translateY(-10px); }
   50% { transform:translateY(  0px); }
  100% { transform:translateY( -9px); }
}
@-ms-keyframes updown {
    0% { transform:translateY(-10px); }
   50% { transform:translateY(  0px); }
  100% { transform:translateY( -9px); }
}
@-o-keyframes updown {
    0% { transform:translateY(-10px); }
   50% { transform:translateY(  0px); }
  100% { transform:translateY( -9px); }
}
@keyframes updown {
    0% { transform:translateY(-10px); }
   50% { transform:translateY(  0px); }
  100% { transform:translateY( -9px); }
}


/*-----------------------------------------------*/
/* keyword animetion
/*-----------------------------------------------*/
.keyword:nth-child(odd) {
    -webkit-animation: vertical 5s ease-in-out infinite alternate;
    -moz-animation: vertical 5s ease-in-out infinite alternate;
    -ms-animation: vertical 5s ease-in-out infinite alternate;
    -o-animation: vertical 5s ease-in-out infinite alternate;
    animation: vertical 5s ease-in-out infinite alternate;
}
.keyword:nth-child(even) {
    -webkit-animation: vertical2 3s ease-in-out infinite alternate;
    -moz-animation: vertical2 3s ease-in-out infinite alternate;
    -ms-animation: vertical2 3s ease-in-out infinite alternate;
    -o-animation: vertical2 3s ease-in-out infinite alternate;
    animation: vertical2 3s ease-in-out infinite alternate;
}
.keyword p:nth-child(odd) {
    -webkit-animation: horizontal 5s ease-in-out infinite alternate;
    -moz-animation: horizontal 5s ease-in-out infinite alternate;
    -ms-animation: horizontal 5s ease-in-out infinite alternate;
    -o-animation: horizontal 5s ease-in-out infinite alternate;
    animation: horizontal 5s ease-in-out infinite alternate;
}
.keyword p:nth-child(even) {
    -webkit-animation: horizontal2 3s ease-in-out infinite alternate;
    -moz-animation: horizontal2 3s ease-in-out infinite alternate;
    -ms-animation: horizontal2 3s ease-in-out infinite alternate;
    -o-animation: horizontal2 3s ease-in-out infinite alternate;
    animation: horizontal2 3s ease-in-out infinite alternate;
}
.keyword.key-01,.keyword.key-06 {
    -webkit-animation-duration: 1.9s;
    -moz-animation-duration: 1.9s;
    -ms-animation-duration: 1.9s;
    -o-animation-duration: 1.9s;
    animation-duration: 1.9s;
}
.keyword.key-02,.keyword.key-05 {
    -webkit-animation-duration: 2.3s;
    -moz-animation-duration: 2.3s;
    -ms-animation-duration: 2.3s;
    -o-animation-duration: 2.3s;
    animation-duration: 2.3s;
}
.keyword.key-03,.keyword.key-04 {
    -webkit-animation-duration: 2.8s;
    -moz-animation-duration: 2.8s;
    -ms-animation-duration: 2.8s;
    -o-animation-duration: 2.8s;
    animation-duration: 2.8s;
}
/*-----------------------------------------------*/
@keyframes horizontal {
    0% { transform:translateX( -3px); }
   50% { transform:translateX(  0px); }
  100% { transform:translateX( -3px); }
}
@keyframes horizontal2 {
    0% { transform:translateX(  3px); }
   50% { transform:translateX(  0px); }
  100% { transform:translateX(  3px); }
}
@keyframes vertical {
    0% { transform:translateY( -10px); }
   50% { transform:translateY(   0px); }
  100% { transform:translateY( -10px); }
}
@keyframes vertical2 {
    0% { transform:translateY( 10px); }
   50% { transform:translateY(  0px); }
  100% { transform:translateY( 10px); }
}