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

html {
    height: 100%;
}


body{
	min-height: 100%;
	margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
	background: linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
    background: -moz-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
    background: -webkit-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
    background: -o-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
	font-family: "微軟正黑體",Microsoft JhengHei,"新細明體","PMingLiU","標楷體",DFKai-SB,sans-serif;
	width: 100%;
	color: #ffffff;
    top: 0;
		  }



@font-face{
	font-family: aqua_p;
    src: local("aqua_pfont"),
         url("../font/aqua_p.woff2"),
         url("../font/aqua_p.woff"),
         url("../font/aqua_p.ttf"),
	     url("../font/aqua_p.eot");
}

@media only screen and (min-width: 1025px){
#bg_all{
	width:100%;
	height: 100%;
	background: url(../images/bg_all.png) repeat;
	position: fixed;
	display: block;
	margin: 0;
    padding: 0;
    border: 0;
	bottom: 0;
	top: 0;
	overflow-y: scroll;
}

#header{
width: 100%;
height: 60px;
background:#024267;
position:fixed;
z-index: 999;
top: 0;
left: 0;
display: block;
}
.center {
    width: 350px;
	margin: 0 auto;
}
.logo{
width: 50%;
float: left;
margin: 5% 0 0 25%;
/* cursor: pointer; */

	}
.logo img{
	width: 100%;
	display: block;
	float: none;
}


#wrap{
height: 100%;
position:relative;
margin-top: 0px;
width: 100%;
}
.content{
max-width: 680px;
height: 100%;
background: linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
background: -moz-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
background: -webkit-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
background: -o-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
position: relative;
z-index: 2;
display: block;
margin: 0 auto;

}

.content_bg{
    width:100%;
	background: url(../images/bg_main.png) repeat;
	position: relative;
	display: block;
	margin: 0;
    padding: 0;
    border: 0;
	height: 100%;
	padding-top: 0;

}


#moon_index{
	width: 100%;
	display: block;
	position: relative;
	background: url(../images/bg_moon.png) no-repeat;
	background-size: cover;
	padding-top: 13%;
}

.moon_title{
	width:100%;
	display: block;
	position: relative;
	text-align: center;
}

.moon_title img{
	width:100%;
	display: block;
	float: none;
}

.section_block{
    width:100%;
	display: block;
	position: relative;
	text-align: center;
	}
.section{
	width:23%;
	display: inline-block;
	position: relative;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
	cursor: pointer;
}

.section img{
	width:100%;
	display: block;
	float: none;

}

.font_block{
	width: 100%;
	display: block;
	position: absolute;
	padding-top: 172%;


}

.font01{
	font-family: aqua_p;
	color: #000000;
	font-size: 18px;
	display: block;
	position: relative;
	text-align: center;
    padding-left: 8%;
}

.font02{
	font-family: aqua_p;
	color: #fd2374;
	font-size: 25px;
	display: block;
	position: relative;
	text-align: center;
	padding-left: 5%;

	letter-spacing:-4px;
}

#footer{
	width: 100%;
	display:block;
	position: relative;
	padding-top: 10px;

}

.copyright{
	width: 90%;
	display: block;
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding-top: 15px;
	font-size: 14px;
	line-height: 18px;
	font-family: "微軟正黑體",Microsoft JhengHei,"新細明體","PMingLiU","標楷體",DFKai-SB,sans-serif;
	}

}

@media screen and (min-width: 768px) and (max-width: 1024px){
#bg_all{
	width:100%;
	height: 100%;
	background: url(../images/bg_all.png) repeat;
	position: relative;
	display: block;
	margin: 0;
    padding: 0;
    border: 0;
	bottom: 0;
	top: 0;
	overflow-y: scroll;
}

#header{
width: 100%;
height: 60px;
background:#024267;
position:fixed;
z-index: 999;
top: 0;
left: 0;
display: block;
}
.center {
    width: 350px;
	margin: 0 auto;
}
.logo{
width: 50%;
float: left;
margin: 5% 0 0 25%;
cursor: pointer;

	}
.logo img{
	width: 100%;
	display: block;
	float: none;
}


#wrap{
height: 100%;
position:relative;
margin-top: 0px;
width: 100%;
}
.content{
max-width: 100%;
height: 100%;
background: linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
background: -moz-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
background: -webkit-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
background: -o-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
position: relative;
z-index: 2;
display: block;
margin: 0 auto;

}

.content_bg{
    width:100%;
	background: url(../images/bg_main.png) repeat;
	position: relative;
	display: block;
	margin: 0;
    padding: 0;
    border: 0;
	height: 100%;
	padding-top: 0;

}


#moon_index{
	width: 100%;
	display: block;
	position: relative;
	background: url(../images/bg_moon.png) no-repeat;
	background-size: cover;
	padding-top: 13%;
}

.moon_title{
	width:100%;
	display: block;
	position: relative;
	text-align: center;
}

.moon_title img{
	width:100%;
	display: block;
	float: none;
}

.section_block{
    width:100%;
	display: block;
	position: relative;
	text-align: center;
	}
.section{
	width:23%;
	display: inline-block;
	position: relative;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
	cursor: pointer;
}

.section img{
	width:100%;
	display: block;
	float: none;

}

.font_block{
	width: 100%;
	display: block;
	position: absolute;
	padding-top: 173%;


}

.font01{
	font-family: aqua_p;
	color: #000000;
	font-size: 22px;
	display: block;
	position: relative;
	text-align: center;
    padding-left: 8%;
}

.font02{
	font-family: aqua_p;
	color: #fd2374;
	font-size: 34px;
	display: block;
	position: relative;
	text-align: center;
	padding-left: 5%;

	letter-spacing:-4px;
}

#footer{
	width: 100%;
	display:block;
	position: relative;
	padding-top: 10px;

}

.copyright{
	width: 90%;
	display: block;
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding-top: 15px;
	font-size: 14px;
	line-height: 18px;
	font-family: "微軟正黑體",Microsoft JhengHei,"新細明體","PMingLiU","標楷體",DFKai-SB,sans-serif;
	}

}

@media only screen and (max-width: 767px) {
#bg_all{
	width:100%;
	height: 100%;
	background: url(../images/bg_all.png) repeat;
	position: relative;
	display: block;
	margin: 0;
    padding: 0;
    border: 0;
	bottom: 0;
	top: 0;
	overflow-y: scroll;
}

#header{
width: 100%;
height: 60px;
background:#024267;
position:fixed;
z-index: 999;
top: 0;
left: 0;
display: block;
}
.center {
    width: 350px;
	margin: 0 auto;
}
.logo{
width: 50%;
float: left;
margin: 5% 0 0 25%;
cursor: pointer;

	}
.logo img{
	width: 100%;
	display: block;
	float: none;
}


#wrap{
height: 100%;
position:relative;
margin-top: 0px;
width: 100%;
}
.content{
max-width: 100%;
height: 100%;
background: linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
background: -moz-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
background: -webkit-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
background: -o-linear-gradient(270deg, rgba(2, 74, 116, 1)53%, rgba(29, 103, 146, 1)77%);
position: relative;
z-index: 2;
display: block;
margin: 0 auto;

}

.content_bg{
    width:100%;
	background: url(../images/bg_main.png) repeat;
	position: relative;
	display: block;
	margin: 0;
    padding: 0;
    border: 0;
	height: 100%;
	padding-top: 0;

}


#moon_index{
	width: 100%;
	display: block;
	position: relative;
	background: url(../images/bg_moon.png) no-repeat;
	background-size: cover;
	padding-top: 21%;
}

.moon_title{
	width:100%;
	display: block;
	position: relative;
	text-align: center;
}

.moon_title img{
	width:100%;
	display: block;
	float: none;
}

.section_block{
    width:100%;
	display: block;
	position: relative;
	text-align: center;
	}
.section{
	width:35%;
	display: inline-block;
	position: relative;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
	cursor: pointer;
}

.section img{
	width:100%;
	display: block;
	float: none;

}

.font_block{
	width: 100%;
	display: block;
	position: absolute;
	padding-top: 175%;


}

.font01{
	font-family: aqua_p;
	color: #000000;
	font-size: 10px;
	display: block;
	position: relative;
	text-align: center;
    padding-left: 8%;
}

.font02{
	font-family: aqua_p;
	color: #fd2374;
	font-size: 20px;
	display: block;
	position: relative;
	text-align: center;
	padding-left: 5%;

	letter-spacing:-2px;
}

#footer{
	width: 100%;
	display:block;
	position: relative;
	padding-top: 10px;

}

.copyright{
	width: 90%;
	display: block;
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding-top: 15px;
	font-size: 14px;
	line-height: 18px;
	font-family: "微軟正黑體",Microsoft JhengHei,"新細明體","PMingLiU","標楷體",DFKai-SB,sans-serif;
	}

}