@charset "UTF-8";
/* CSS Document */
/*all*/
a img, :link img, :visited img {border:0;cursor:pointer;}
body, div, dl, dt, dd, pre, form, fieldset, input, table, th, td, embed, object, p {padding:0;margin:0;}
:focus {outline:0;}
:link,:visited {text-decoration:none;}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
table {border-collapse:collapse;border-spacing:0;} 
html {overflow-y:scroll; height:100%;}

body {
	background-color: #fbfaf7;
	color: #231f20;
	font: 14px "微軟正黑體", Verdana, Geneva, sans-serif;
	line-height: 1.35em;
	text-align: left;
	background-image: url(../img/page-bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
a:link, a:visited {color:#157AB7;}
a:hover, a:active {color:#E29018;}

h1, h2, h3 {margin:0;padding:0;} h1 {font-size:2em;} h2 {font-size:1.75em;line-height: 1.3;} h3 {font-size: 1.2em;line-height: 1.8;}
hr {border:0; 	border-bottom: 1px solid #e4e4e4;	margin:10px 0;	width:100%; }

.bold {font-weight:bold;}
.clearfix {clear:both;}
.left {display:inline;float:left;}
.right {display:inline;float:right;}
.center {text-align:center;}

#skelet {
	width: 100%;
	height: 630px;
	margin: -315px auto 0px auto;
	position: absolute;
	top: 50%;
	padding:0;
}
#skelet-page {
	width: 100%;
	min-height: 700px;
	margin: 0px auto 0px auto;
	position: relative;
	top: 0;
	overflow:hidden;
}
#skeleton {width:990px; overflow:hidden; margin:0px auto 0px auto; z-index:10;}
#skeleton-menu {width:100%; height:60px; margin:0px auto 0px auto; background-color:#143c84; position:relative;
-moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
}
/*header*/
.headerindex {width: 990px; margin:0px auto 0px auto; position: absolute; top:0px;}
.headerpage {width: 990px; margin:0px auto 0px auto; padding:0; }
.logo {float:right; margin-top:63px;}
.logoport {float:right; margin-top:63px; position:fixed;}




.menu_home {
	padding: 0px;
	float: left;
	margin: 0px;
	list-style: none;
	background-image: url(../img/menu-bg.png);
	background-repeat: no-repeat;
	background-position: 235px 18px;
}
.menu_home li {	float:left;	padding:30px 30px 0 10px;height:30px; cursor:pointer; 	display: inline-block;}
.menu_home li:hover, .menu_home li:active, .menu_home li.active {	}
.menu_home li:first-child { padding: 0 5px 0 0; margin-top: 0px; background-image: none; height: 136px;}
.menu_home li:last-child { padding-left: 11px; padding-right: 35px; margin-top: -3px; background-image: none;}
.menu_home li a {	font-size: 0.9em;	font-weight: bold; font-style:italic;	color:#ffffff;	/* line-height: 70px; */ font-family:"微軟正黑體", Verdana, Geneva, sans-serif;}
.menu_home li a:hover, .menu_home li a:active, .menu_home li a.active {color: #fc0;}
.menu_home li a i { display: block; width:40px; height:40px; margin-top: 11px; line-height:55px; float: left; cursor:pointer; background-repeat: no-repeat; background-position: left top; }
.menu_home li a:hover i {
	transform: scale(1.08);
	-webkit-transform: scale(1.08);
	-moz-transform: scale(1.08);
	-o-transform: scale(1.08);
	-ms-transform: scale(1.08);
	text-decoration: none;
}
.menu_home li a i.secret, .menu_home li a.active i.secret {
	background-image: url(../images/menuicon1.png);
}
.menu_home li a i.point4, .menu_home li a.active i.point4 {
	background-image: url(../images/menuicon2.png);
}
.menu_home li a i.fb, .menu_home li a.active i.fb {
	background-image: url(../images/menuicon3.png);
}
.menu_home li a i.home {
	background-image: url(../images/menuicon4.png);
}
.fbshare { position: absolute; top: 10px; right: 0px;}



/*middle*/
.mid_wrap {width:1048px;overflow:hidden;margin:0px auto 0px auto; min-height:925px;}
.middle {	width:960px;	overflow:hidden;	margin-left:44px;}
#parallax { position: absolute; 	padding-top: 0px;overflow:hidden;	width:100%; 	height:610px; }
.middle_folio {	width:960px;	overflow:hidden;	display:block;	margin:66px auto 80px auto;}
#parallaxa { position:relative; 	padding-top: 80px; overflow:hidden;	width:100%; 	height:900px;}
.main-btngo { 
	/*height: 66px;
	width: 188px;*/
	cursor:pointer;
}
.main-btngo:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	/*padding-top:2px;*/
}
.tips_warp {
	width:775px;
	margin:10px auto;
	color:#666;
}

.story_warp {
	width:960px;
	margin:0 auto;
	padding:30px 100px;
	*padding:30px 100px;
	padding-top:29px\9; /* all ie */
	padding-bottom:29px\9; /* all ie */
	padding-left:99px\9; /* all ie */
	padding-right:99px\9; /* all ie */
	background-image: url(../images/type-paper.png);
	background-repeat: no-repeat;
	background-position: center top;
	overflow:hidden;
	/* position: relative; */
}
.story_warp .pic {
	float:left;
	width:250px;
	margin-right:30px;
	margin-left:20px;
}
.story_warp h3 {
	width:100%;
	margin:20px;
	line-height:1.4;
}
.story_warp p {
	margin-top:80px;
	padding:0 30px;
	line-height:1.8;
	color:#333;
	text-align:justify;
	height:900px;
	overflow:scroll;
}
.white { color:#fff;}
.red {
	color: #D30202;
}
.wb {
	font-weight:bolder;
}
.note {
	width:378px;
	height:430px
	margin:0 auto;
	background-image: url(../images/note.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.typeinfo { list-style:none; width: 80%; margin: 120px auto 0 auto;}
.typeinfo li { margin:5px 0; }

/*footer*/
.footer_home {
	width: 100%;
	height: 66px;
	position: absolute;
	bottom: 0;
	background-image: url(../img/footer_bg.png);
	background-repeat: repeat-x;
	background-position: center top;
	z-index: 10;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.footer {
	width: 990px;
	height: 40px;
	margin: 17px auto 0;
	z-index:10;
	list-style:none;
}
.footer li {
	float:left;
}
*#stop-motion-animation > div{
 width:45px;
 height:80px;
 white-space:nowrap;
 overflow:hidden;
 -webkit-animation-name:ani,ani-1;
 -webkit-animation-duration:0.8s,20s;
 -webkit-animation-timing-function:steps(5),ease;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-direction:normal,alternate;
 -webkit-animation-play-state:running;
 animation-name:ani,ani-1;
 animation-duration:0.8s,20s;
 animation-timing-function:steps(5),ease;
 animation-iteration-count:infinite;
 animation-direction:normal,alternate;
 animation-play-state:running;
}
*#stop-motion-animation > div:hover{
 -webkit-animation-play-state:running;
 animation-play-state:running;
}
*#stop-motion-animation > div img{
 vertical-align:middle;
}
@-webkit-keyframes ani{
 100%{
  text-indent:-225px;
 }
}
@-webkit-keyframes ani-1{
}
@keyframes ani{
 100%{
  text-indent:-225px;
 }
}
@keyframes ani-1{
}


.ytbtn { cursor:pointer;}
.ytbtn:hover { opacity: 0.65; filter: alpha(opacity=65);}
.stbtn { cursor:pointer;
	-ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
    transform: scale(1,1);
}
.stbtn:hover {
	-ms-transform: scale(0.98,0.98); /* IE 9 */
    -webkit-transform: scale(0.98,0.98); /* Chrome, Safari, Opera */
    transform: scale(0.98,0.98);
	}