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


    .dot1 {
		    position: absolute;
		    left: 50%;
		    top: 25px;
		    margin-left: -240px;
		    opacity: 0;
		    width: 480px;
		    height: 480px;
		    transform: rotate(225deg);
		    animation-name: loading;
			-webkit-animation-name: loading;
			zmox-animation-name: loading;
		    animation-iteration-count: 1;
			-webkit-animation-iteration-count: 1;
			-moz-iteration-count: 1;
		    animation-duration: 1.8s;
			-webkit-animation-duration: 1.8s;
			-moz-animation-duration: 1.8s;
		}
    .dot:after { content : ""; position : absolute; }
	@keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0);}
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); 
			   }
        60% { transform : rotate(815deg);   opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0);   }
        75% {  transform : rotate(965deg);  animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }
    @-webkit-keyframes loading {
        0% { -webkit-transform : rotate(225deg); opacity : 1; -webkit-animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { -webkit-transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { -webkit-transform : rotate(455deg); -webkit-animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { -webkit-transform : rotate(690deg); -webkit-animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { -webkit-transform : rotate(815deg); opacity : 1; -webkit-animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { -webkit-transform : rotate(965deg); -webkit-animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }
	
    @-moz-keyframes loading {
        0% { -moz-transform : rotate(225deg); opacity : 1; -moz-animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { -moz-transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { -moz-transform : rotate(455deg); -moz-animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { -moz-transform : rotate(690deg); -moz-animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { -moz-transform : rotate(815deg); opacity : 1; -moz-animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { -moz-transform : rotate(965deg); -moz-animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }
	
	
	    .dot2 {
		    position: absolute;
		    left: 50%;
		    top: 25px;
		    margin-left: -240px;
		    opacity: 0;
		    width: 480px;
		    height: 480px;
		    transform: rotate(225deg);
		    animation-name: loading;
			-webkit-animation-name: loading;
			-moz-animation-name: loading;
		    animation-iteration-count: 1;
			-webkit-animation-iteration-count: 1;
			-moz-animation-iteration-count: 1;
		    animation-duration: 1.8s;
			-webkit-animation-duration: 1.8s;
			-moz-animation-duration: 1.8s;
			animation-delay : 0.8s;
			-webkit-animation-delay : 0.8s;
			-moz-animation-delay : 0.8s;
		}
    .dot:after { content : ""; position : absolute; }
    @keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }
	
    @-webkit-keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }
	
    @-moz-keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }
	
	
	.dot3 {
		    position: absolute;
		    left: 50%;
		    top: 25px;
		    margin-left: -240px;
		    opacity: 0;
		    width: 480px;
		    height: 480px;
		    transform: rotate(225deg);
		    animation-name: loading;
			-webkit-animation-name: loading;
			-moz-animation-name: loading;
		    animation-iteration-count: 1;
		    -webkit-animation-iteration-count: 1;
		    -moz-animation-iteration-count: 1;
			animation-duration: 1.8s;
			-webkit-animation-duration: 1.8s;
			-moz-animation-duration: 1.8s;
			animation-delay : 1.6s;
			-webkit-animation-delay : 1.6s;
			-moz-animation-delay : 1.6s;
		}
    .dot:after { content : ""; position : absolute; }
    @keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }
    @-webkit-keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }
    @-moz-keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }
	
	
	
	.dot4 {
		    position: absolute;
		    left: 50%;
		    top: 25px;
		    margin-left: -240px;
		    opacity: 0;
		    width: 480px;
		    height: 480px;
		    transform: rotate(225deg);
		    animation-name: loading;
			-webkit-animation-name: loading;
			-moz-animation-name: loading;
		    animation-iteration-count: 1;
			-webkit-animation-name: loading;
			-moz-animation-name: loading;
		    animation-duration: 1.8s;
			-webkit-animation-duration: 1.8s;
			-moz-animation-duration: 1.8s;
			animation-delay : 2.4s;
			-webkit-animation-delay : 2.4s;
			-moz-animation-delay : 2.4s;
		}
    .dot:after { content : ""; position : absolute; }
    @keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }

    @-webkit-keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }

    @-moz-keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg);/* animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0);*/ }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }



/*    .dot {
		    position: absolute;
		    left: 50%;
		    top: 25px;
		    margin-left: -240px;
		    opacity: 0;
		    width: 480px;
		    height: 480px;
		    transform: rotate(225deg);
		    animation-name: loading;
		    animation-iteration-count: 1;
		    animation-duration: 2s;
		}
    .dot:after { content : ""; position : absolute; }
    .dot:nth-child(2) { animation-delay : 2s; }
    .dot:nth-child(3) { animation-delay : 4s; }
    .dot:nth-child(4) { animation-delay : 6s; }
    .dot:nth-child(5) { animation-delay : 8s; }
    @keyframes loading {
        0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        8% { transform : rotate(345deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
        40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
        60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
        76% { opacity : 0; }
        100% { opacity : 0; }
    }*/
	
	
	
/*==================================================================================
             gern			 
=====================================================================================*/

.g-ani01{
	opacity:0;
    filter:alpha(opacity=0);
	/*動態*/
	animation-name: g-animate1;
	-webkit-animation-name: g-animate1; /*动画名称*/
	-moz-animation-name: g-animate1; /*动画名称*/
	animation-duration: 3s;
	-webkit-animation-duration: 3s; /*动画持续时间*/
	-moz-animation-duration: 3s; /*动画持续时间*/
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1; /*动画次数*/
	-moz-animation-iteration-count: 1; /*动画次数*/
	animation-delay: 0s;
	-webkit-animation-delay: 0s; /*延迟时间*/
	-moz-animation-delay: 0s; /*延迟时间*/
		}
	@keyframes g-animate1 {
	0% {
	opacity: 1; 	
    filter:alpha(opacity=100);
	}
	30% {
	opacity: 1; 	
    filter:alpha(opacity=100);
	}
	100% {
	opacity: 0;
	}
}

	@-webkit-keyframes g-animate1 {
	0% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	30% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	100% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
}

	@-moz-keyframes g-animate1 {
	0% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	30% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	100% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
}

.g-ani02{
	opacity:0;
    filter:alpha(opacity=0);
	/*動態*/
	animation-name: g-animate2;
	-webkit-animation-name: g-animate2; /*动画名称*/
	-moz-animation-name: g-animate2; /*动画名称*/
	animation-duration: 3s;
	-webkit-animation-duration: 3s; /*动画持续时间*/
	-moz-animation-duration: 3s; /*动画持续时间*/
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1; /*动画次数*/
	-moz-animation-iteration-count: 1; /*动画次数*/
	animation-delay: 0s;
	-webkit-animation-delay: 0s; /*延迟时间*/
	-moz-animation-delay: 0s; /*延迟时间*/
		}
	@keyframes g-animate2 {
	0% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	60% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	100% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
}

	@-webkit-keyframes g-animate2 {
	0% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	60% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	100% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
}

	@-moz-keyframes g-animate2 {
	0% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	60% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	100% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
}



.g-ani03{
	opacity:0;
    filter:alpha(opacity=0);
	/*動態*/
	animation-name: g-animate3;
	-webkit-animation-name: g-animate3; /*动画名称*/
	-moz-animation-name: g-animate3; /*动画名称*/
	animation-duration: 3s;
	-webkit-animation-duration: 3s; /*动画持续时间*/
	-moz-animation-duration: 3s; /*动画持续时间*/
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1; /*动画次数*/
	-moz-animation-iteration-count: 1; /*动画次数*/
	animation-delay: 0s;
	-webkit-animation-delay: 0s; /*延迟时间*/
	-moz-animation-delay: 0s; /*延迟时间*/
		}
	@keyframes g-animate3 {
	0% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	90% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	100% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
}

	@-webkit-keyframes g-animate3 {
	0% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	90% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	100% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
}

	@-moz-keyframes g-animate3 {
	0% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	90% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
	100% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
}


/*-------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------*/

.gern2{
    width: 600px;
    height: 570px;
    position: absolute;
    right: 0;
    top: 0;
	/*動態*/
	animation-name: g-animate55;
	-webkit-animation-name: g-animate55; /*动画名称*/
	-moz-animation-name: g-animate55; /*动画名称*/
	animation-duration: 4.2s;
	-webkit-animation-duration: 4.2s; /*动画持续时间*/
	-moz-animation-duration: 4.2s; /*动画持续时间*/
	animation-iteration-count: 1; 
	-webkit-animation-iteration-count: 1; /*动画次数*/
	-moz-animation-iteration-count: 1; /*动画次数*/
	animation-delay: 0s;
	-webkit-animation-delay: 0s; /*延迟时间*/
	-moz-animation-delay: 0s; /*延迟时间*/
		}
	@keyframes g-animate55 {
	0% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
	99% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
	100% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
}
	@-webkit-keyframes g-animate55 {
	0% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
	99% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
	100% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
}

	@-moz-keyframes g-animate55 {
	0% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
	99% {
	opacity: 0;
    filter:alpha(opacity=0);
	}
	100% {
	opacity: 1;
    filter:alpha(opacity=100);
	}
}