@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{ width:100%; height:100%; font-family:"微軟正黑體",Arial, Helvetica,sans-serif; text-size-adjust:none; font-size:15px;}
body{  background-color:#ecc93c;}


.head{
	width: 100%;
	height: 820px;
	background-color: #142341;
	background-size: cover;
	overflow: hidden;
}
.head .main{
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	height: auto;
	position: relative;
	display: block;
}

.main .title{
	position: absolute;
	top:0;
	left:0;
	z-index: 888;
	animation-name: slidedown;
    animation-duration: 1s;
}

.main .mouse{
	position: absolute;
	top:400px;
	left:237px;
	z-index: 888;
}

.bg{
	top: 0;
	left: -500px;
	width: 100%;
	max-width: 1920px;
	height: auto;
	position: absolute;
	z-index: 111;
}

/*動畫*/

@keyframes slidedown{
    0%{
        top:-20%;
    }
    25%{
        top: 10%;
    }
	50%{
		top:0;
	}
	75%{
		top:5%;
	}
	100%{
		top:0;
	}
}

.head .twinkle{
	width: 100%;
	left: -460px;
	max-width: 1920px;
	position: relative;
	z-index: 111;
	animation:twinkle01 2s linear infinite ;
}
/*閃爍*/
@keyframes twinkle01 {
	0% {
		opacity: 1.0;
		}
	50% {
		opacity: 0;
		}
	100% {
		opacity: 1.0;
		}
}

/*底圖藍雲飄入*/
.head .cloud-1{
	position:absolute;
	top: 0;
	left: -460px;
	width: 100%;
	height: 100%;
	animation:zoomin01 2s linear ;
	z-index: 222;
}
@keyframes zoomin01{
	from {transform: translateX(-20%);opacity: 0;}
	to {transform: translateX(0);opacity: 1;}
}

.head .cloud-2{
	position:absolute;
	top: 0;
	right: 460px;
	width: 100%;
	height: 100%;
	animation:zoomin02 2s linear;
	animation-delay:0.5s;
	animation-fill-mode: forwards;
	transform: translateX(20%);
	opacity: 0;
	z-index: 222;
}
@keyframes zoomin02{
	from {transform: translateX(20%);opacity: 0;}
	to {transform: translateX(0);opacity: 1;}
}

.head .cloud-3{
	position:absolute;
	top: 0;
	left: -300px;
	width: 100%;
	height: 100%;
	animation:zoomin03 2s linear;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	transform: translateX(-20%);
	opacity: 0;
	z-index: 222;
}
@keyframes zoomin03{
	from {transform: translateX(-20%);opacity: 0;}
	to {transform: translateX(0);opacity: 1;}
}


/*花*/
.head .flower-1{
	top: -200px;
	left: -180px;
	width: 111px;
	position: relative;
	z-index: 555;	
	animation:Spin01 3.5s infinite linear;
}

.head .flower-2{
	top: -400px;
	left: -100px;
	width: 87px;
	position: relative;
	z-index: 555;
	animation:Spin01 4.5s infinite linear;	
}
@keyframes Spin01{
    0% {
        transform: rotate(0deg);
    }
	100% {
		transform: rotate(360deg);
	}
}

/*金雲*/
.head .goldcloud{
	top: -600px;
	left: 450px;
	width: 155px;
	height: 89px;
	position: relative;
	z-index: 555;
	animation:slideloop 2s infinite alternate;	
}
@keyframes slideloop{
	0% {transform: translateX(20%);}
	100% {transform: translateX(-20%);}
}


/* == 志系班址 == */
.footer{ clear:both; width:100%;  background-color:#ecc93c;position: relative;z-index: 999;display: block;}
.footer-con{ margin:0 auto; padding:30px 0; width:100%; max-width:1200px; height: 120px; text-align: center; font-size: 1rem; }
.footer-con a{ color: #000; text-decoration: none;
}




/* == 手機板區 == */
@media screen and ( max-width:768px ){
	
	.head{
	background-image: url("../img/mobile.gif");
	width: 100%;
	height: auto;
	padding-bottom: 177.75% ;
	background-size: cover;
	overflow: hidden;
}
	.head .main{
	display: none;
}
	.footer-con{ margin:0 auto; padding:20px 20px; width:100%; max-width:1200px; height: 120px; text-align: center; font-size: 0.7rem; }
}