@charset "utf-8";
/* CSS Document */
#future1 {
	position: relative;
	width: 400px;
	height: 400px;
}
@media (max-width:768px) {
#future1 {
	position: relative;
	width: 310px;
	height: 310px;
}
}
#future1 .a01 {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/a01.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: a01 1s;
	animation: a01 1s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
 @-webkit-keyframes a01 {
from {
 background-position: 0 -150px;
 opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes a01 {
from {
background-position: 0 -150px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future1 .a02 {
	border-radius: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/a02.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: a02 0.75s;
	animation: a02 0.5s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes a02 {
from {
background-position: 0 0;
opacity:1;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes a02 {
from {
background-position: 0 0;
opacity:1;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future1 .a03 {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/a03.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: a03 0.8s;
	animation: a03 0.8s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes a03 {
from {
background-position: 80px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes a03 {
from {
background-position: 80px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future1 .a04 {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/a04.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: a04 1s;
	animation: a04 1s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes a04 {
from {
background-position: -100px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes a04 {
from {
background-position: -100px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
/* 動畫2 */
#future2 {
	position: relative;
	width: 400px;
	height: 400px;
}
@media (max-width:768px) {
#future2 {
	position: relative;
	width: 310px;
	height: 310px;
}
}
#future2 .bbg {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/bbg.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: bbg 0.75s;
	animation: bbg 0.75s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes bbg {
from {
background-position: 0 0;
opacity:1;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes bbg {
from {
background-position: 0 0;
opacity:1;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future2 .b01 {
	border-radius: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/b01.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: b01 0.6s;
	animation: b01 0.6s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
 @-webkit-keyframes b01 {
from {
background-position: 0 -80px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes b01 {
from {
background-position: 0 -80px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future2 .b02 {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/b02.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: b02 0.8s;
	animation: b02 0.8s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes b02 {
from {
background-position:-60px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes b02 {
from {
background-position:-60px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future2 .b03 {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/b03.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: b03 1s ease-in-out;
	animation: b03 1s ease-in-out;
}
@-webkit-keyframes b03 {
from {
background-position:-100px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes b03 {
from {
background-position:-100px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future2 .b04 {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/b04.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: b04 1.2s ease-in-out;
	animation: b04 1.2s ease-in-out;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes b04 {
from {
background-position: 100px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
@keyframes b04 {
from {
background-position:100px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
/* 動畫3 */
#future3 {
	position: relative;
	width: 400px;
	height: 400px;
}
@media (max-width:768px) {
#future3 {
	position: relative;
	width: 310px;
	height: 310px;
}
}
#future3 .cbg {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/cbg.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: cbg 0.75s;
	animation: cbg 0.75s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes cbg {
from {
background-position: 0 0;
opacity:1;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes bbg {
from {
background-position: 0 0;
opacity:1;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future3 .c01 {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/c01.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: c01 0.8s;
	animation: c01 0.8s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
 @-webkit-keyframes c01 {
from {
background-position: 0 100px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes c01 {
from {
background-position: 0 100px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future3 .c02 {
	border-radius: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/c02.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: c02 1s;
	animation: c02 1s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes c02 {
from {
background-position: 0 -80px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes c02 {
from {
background-position: 0 -80px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
/* 動畫5 */
#future5 {
	position: relative;
	width: 400px;
	height: 400px;
}
@media (max-width:768px) {
#future5 {
	position: relative;
	width: 310px;
	height: 310px;
}
}
#future5 .ebg {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/ebg.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: ebg 0.75s;
	animation: ebg 0.75s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes ebg {
from {
background-position: 0 0;
opacity:1;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes ebg {
from {
background-position: 0 0;
opacity:1;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future5 .e01 {
	border-radius: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/e01.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: e01 0.6s;
	animation: e01 0.6s;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
 @-webkit-keyframes e01 {
from {
background-position: 0 -30px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes e01 {
from {
background-position: 0 -30px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future5 .e02 {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/e02.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: e02 1s ease-in-out;
	animation: e02 1s ease-in-out;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes e02 {
from {
background-position:0 -80px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes e02 {
from {
background-position:0 -80px;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
#future5 .e03 {
	border-radius: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/e03.png) top center no-repeat;
	background-size: cover;
	-webkit-animation: e03 1s ease-in-out;
	animation: e03 1s ease-in-out;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes e03 {
from {
background-position:-80px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}
 @keyframes e03 {
from {
background-position:-80px 0;
opacity:0;
}
to {
	background-position: 0 0;
	opacity: 1;
}
}