body{
	
	text-align:center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 49% 30%,40% -70%;
	background-image:url("img/tree.png"),url("img/sky.png");
	background-size:8% 9%,80% 50%;
	overflow:hidden;
}
#content{
	position: absolute;
	overflow:hidden;
	text-align:center;
	left:29%;
	top:0%;
	background-image:url("img/contentbg.png");
	background-size:900px 700px;
	height:700px;
	width:900px;
	display:none;
	animation-name: showblock;
	animation-duration:1.1s;
	font-family:"agencyfb";
	background-repeat: no-repeat;
	z-index:100;
}

ul{
	list-style-type: none;
	font-size:20px;
}
.button{
	text-align:center;
	position:absolute;
	bottom:7%;
	left:24.5%;
	width:50%;
	font-family:"agencyfb";
    font-size: 50px;
}
.buttonon:hover{
	cursor: pointer;
}
table{
	width:100%;
	background-image:url('img/line.png');
	background-size:100% 10%;
	background-repeat: no-repeat;
	background-position: 30% 70%;
}
td{
	width:20%;
	text-align:center;
}
.content_top{
	margin:2%;
}
#title{
	font-size:80px;
}
#text{
	font-size:50px;
	margin-right:130px;
	color:white;
}
/*左邊雲層*/
.cloudleft09{
	position:absolute;
	width:15%;
	height:15%;
	top:20%;
	left:10%;
	z-index:1;
	animation-name: cloudleft09;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudleft09 {
     0% {left:25%;}
	 30%{left:25%;}
     100% {left:10%;}
}

.cloudleft08{
	position:absolute;
	width:15%;
	height:5%;
	top:30%;
	left:15%;
	z-index:2;
	animation-name: cloudleft08;
	animation-duration:6s;
	animation-delay:2s;

}
@keyframes cloudleft08 {
     0% {left:25%;}
	 35%{left:25%;}
     100% {left:15%;}
}
.cloudleft07{
	position:absolute;
	width:18%;
	height:25%;
	top:23%;
	left:10%;
	z-index:3;
	animation-name: cloudleft07;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudleft07 {
	0% {left:25%;}
	35%{left:25%;}
    100% {left:10%;}
}

.cloudleft06{
	position:absolute;
	width:30%;
	height:22%;
	top:31%;
	left:0%;
	z-index:4;
	animation-name: cloudleft06;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudleft06 {
     0% {left:15%;}
	 42%{left:15%;}
     100% {left:0%;}
}
.cloudleft05{
	position:absolute;
	width:23%;
	height:23%;
	top:45%;
	left:0%;
	z-index:5;
	animation-name: cloudleft05;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudleft05 {
     0% {left:22%;}
	 40%{left:22%;}
     100% {left:0%;}
}
.cloudleft04{
	position:absolute;
	width:34.5%;
	height:30%;
	top:50%;
	left:-11.5%;
	z-index:6;
	animation-name: cloudleft04;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudleft04 {
     0% {left:25%;}
	 30%{left:25%;}
     100% {left:-11.5%;}
}
.cloudleft03{
	position:absolute;
	width:30%;
	height:30%;
	top:60%;
	left:-10%;
	z-index:7;
	animation-name: cloudleft03;
	animation-duration:6s;
	animation-delay:2s;
}

@keyframes cloudleft03 {
    0% {left:23%;}
	30%{left:23%;}
    100% {left:-10%;}
}
.cloudleft02{
	position:absolute;
	width:20%;
	height:20%;
	top:70%;
	left:0%;
	z-index:8;
	animation-name: cloudleft02;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudleft02 {
    0% {left:20%;}
	35%{left:20%;}
    100% {left:0%;}
}
.cloudleft01{
	position:absolute;
	width:30%;
	height:20%;
	top:85%;
	left:-3%;
	z-index:9;
	animation-name: cloudleft01;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudleft01 {
    0% {left:20%;}
	25%{left:20%;}
    100% {left:-3%;}
}
/*右邊雲層*/
.cloudright09{
	position:absolute;
	width:12%;
	height:20%;
	top:20%;
	right:20%;
	z-index:1;
	animation-name: cloudright09;
	animation-duration:6s;
	animation-delay:2s;

}
@keyframes cloudright09 {
	0% {right:35%;}
	30% {right:35%;}
    100% {right:20%;}
}

.cloudright08{
	position:absolute;
	width:17%;
	height:30%;
	top:10%;
	right:10%;
	z-index:2;
	animation-name: cloudright08;
	animation-duration:6s;
	animation-delay:2s;

}
@keyframes cloudright08 {
    0% {right:26%;}
	35% {right:26%;}
    100% {right:10%;}
}
.cloudright07{
	position:absolute;
	width:27%;
	height:10%;
	top:30%;
	right:10%;
	z-index:3;
	animation-name: cloudright07;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudright07 {
    0%  {right:20%;}
	35%  {right:20%;}
    100% {right:10%;}
}
.cloudright06{
	position:absolute;
	width:27%;
	height:35%;
	top:10%;
	right:0%;
	z-index:4;
	animation-name: cloudright06;
	animation-duration:6s;
	animation-delay:2s;

}
@keyframes cloudright06 {
    0% {right:15%;}
	42% {right:15%;}
    100% {right:0%;}
}
.cloudright05{
	position:absolute;
	width:27%;
	height:30%;
	top:30%;
	right:3%;
	z-index:5;
	animation-name: cloudright05;
	animation-duration:6s;
	animation-delay:2s;

}
@keyframes cloudright05 {
    0% {right:20%;}
	40% {right:20%;}
    100% {right:3%;}
}
.cloudright04{
	position:absolute;
	width:20%;
	height:20%;
	top:45%;
	right:10%;
	z-index:6;
	animation-name: cloudright04;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudright04 {
    0%{right:28%;}
	30%{right:28%;}
    100% {right:10%;}
}

.cloudright03{
	position:absolute;
	width:40%;
	height:30%;
	top:43%;
	right:-10%;
	z-index:7;
	animation-name: cloudright03;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudright03 {
    0%  {right:20%;}
	30%  {right:20%;}
    100% {right:-10%;}
}
.cloudright02{
	position:absolute;
	width:20%;
	height:20%;
	top:65%;
	right:4%;
	z-index:8;
	animation-name: cloudright02;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudright02 {
    0% {right:21%;}
	35% {right:21%;}
    100% {right:4%;}
}
.cloudright01{
	position:absolute;
	width:26%;
	height:26%;
	top:77.5%;
	right:1.5%;
	z-index:8;
	animation-name: cloudright01;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes cloudright01 {
    0% {right:20%;}
	25%{right:20%;}
    100% {right:1.5%;}
    animation-delay:2s;
}

/*開場*/
.r1{
	position:absolute;
	width:100%;
	height:100%;
	left:90%;
	top:40%;
	z-index:50;
	animation-name: r1;
	animation-duration:4s;
	animation-delay:2s;
}
@keyframes r1 {
    0%  {left:25%;}
	200%  {left:25%;}
	100% {left:90%;}
}
.l2{
	position:absolute;
	width:100%;
	height:100%;
	left:-80%;
	top:20%;
	z-index:49;
	animation-name: l2;
	animation-duration:4s;
	animation-delay:2s;
}
@keyframes l2 {
    0% {left:-30%;}
	20% {left:-30%;}
    100% {left:-80%;}
}
.m3{
	position:absolute;
	width:100;
	height:30%;
	left:28%;
	top:30%;
	z-index:47;
}
.r5{
	position:absolute;
	width:100%;
	height:120%;
	left:80%;
	top:15%;
	z-index:46;
	animation-name: r5;
	animation-duration:5s;
	animation-delay:2s;
}
@keyframes r5 {
    0% {left:20%;}
	20% {left:20%;}
    100% {left:80%;}
}
.l6{
	position:absolute;
	width:100%;
	height:120%;
	left:-100%;
	top:-30%;
	z-index:45;
	animation-name: l6;
	animation-duration:5s;
	animation-delay:2s;
}
@keyframes l6 {
    0% {left:-40%;}
	20% {left:-40%;}
    100% {left:-100%;}
}
.r7{
	position:absolute;
	width:100%;
	height:140%;
	left:70%;
	top:-10%;
	z-index:44;
	animation-name: r7;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes r7 {
    0% {left:10%;}
	30% {left:10%;}
    100% {left:70%;}
}
.l8{
	position:absolute;
	width:100%;
	height:140%;
	left:-100%;
	top:20%;
	z-index:43;
	animation-name: l8;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes l8{
    0% {left:-30%;}
	30%{left:-30%;}
    100% {left:-100%;}
}
.l9{
	position:absolute;
	width:100%;
	height:140%;
	left:-85%;
	top:-28%;
	z-index:42;
	animation-name: l9;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes l9{
    0% {left:-25%;}
	30% {left:-25%;}
    100% {left:-85%;}
}
.l10{
	position:absolute;
	width:100%;
	height:140%;
	left:-100%;
	top:-45%;
	z-index:41;
	animation-name: l10;
	animation-duration:6s;
	animation-delay:2s;
}
@keyframes l10{
    0% {left:0%;}
	30% {left:0%;}
    100% {left:-100%;}
}

/*天空雲*/
.sky{
	position:absolute;
	top:-30%;
	left:10%;
	z-index:0;
	width:80%;/*70*40*/
	height:50%;

}



/*字體*/
@font-face {
    font-family: "agencyfb";
    src: url("font/ufonts.com_agency-fb.ttf");
}
/*動畫*/
	/*content*/
@keyframes showblock {
    from  {height:0px;}
    to {height:700px;}
}
@keyframes unshowblock {
	0% {width:900px;height:550px;}
    30%  {width:900px;height:2px;}
	100%   {width:0px;height:2px;}
    
}
	/*雲層*/
/*@keyframes cloud{
    from  {left:30%;;}
    to {left:-10%;}
}
*/
/*loading*/
#loadingleft{
	z-index: 100;
	background-color:black;
    color: #fff;
    position: absolute;
	left:-50%;
	top:0;
    width: 50%;
    height: 100%;
    text-align: center;
	animation-name: unshowloadleft;
	animation-duration:6s;
}
#loadingright{
	z-index: 100;
	background-color:black;
    color: #fff;
    position: absolute;
	left:100%;
	top:0;
    width: 50%;
    height: 100%;
    text-align: center;
	animation-name: unshowloadright;
	animation-duration:6s;

}
@keyframes unshowloadright {
    0% {left:50%;}
	50%{left:50%;}
    100% {left:100%;}
}
@keyframes unshowloadleft{
    0%  {left:0%;}
	50%  {left:0%;}
    100% {left:-50%;}
}