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

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#000;
}
html,body{
	width:100%;
	height:100%;
}
#container{
	width:100%;
	height:100%;
	opacity:0;
}
.btnOver{
	cursor:pointer;
}
.width750{
	width:750px;
	position:relative;
	margin:auto;
	height:100%;
	
}

#cut1{
	width:100%;
	height:100%;
	overflow:hidden;
	background-color:#0e172a;
}
#cut2{
	width:100%;
	height:1110px;
	overflow:hidden;
}
.posiR{
	position:relative;
	width:100%;
	height:100%;
}
.fl{
	float:left;
}
.center{
	text-align:center;
}
.cutbg{
	position:absolute;
	width:100%;
	height:100%;
}
.cutbg>img{
	position:absolute;
}
#c1_1{
	width:478px;
	height:202px;
	position:absolute;
	right:10px;
	top:95px;
}
#c1_2{
	width:147px;
	height:439px;
	position:absolute;
	bottom:0;
	left:0;
}
#c1_3{
	width:213px;
	height:419px;
	position:absolute;
	bottom:0;
	left:147px;
}
#c1_4{
	width:390px;
	height:419px;
	position:absolute;
	bottom:0;
	left:360px;
	background-image:url(images/0604005_04.png);
	
}
#arrowAnimate{
	width:60px;
	height:60px;
	background-image:url(images/0604007.png);
	border:2px solid #fffc00;
	position:absolute;
	border-radius:120px;
	overflow:hidden;
	right:20px;
	bottom:28px;
}
#arrowAnimate_body{
	width:60px;
	height:120px;
	background-image:url(images/arrow.png);
	position:absolute;
	top:-60px;
	animation-name: arrowAnimate_body;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	animation-iteration-count:infinite ;
/* Safari and Chrome: */
	-webkit-animation-name: arrowAnimate_body;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration-count:infinite ;
}
@keyframes arrowAnimate_body
{
0%   {
	top:-60px;
	}
	90%   {
	top:0px;
	}
100% {
	top:0px;
	}

}
@-webkit-keyframes arrowAnimate_body 
{
0%   {
	top:-60px;
	}
	90%   {
	top:0px;
	}
100% {
	top:0px;
	}

}
.pixelbg{
	position:absolute;
	top:0;
	left:0;
	background-image:url(images/0604006.png);
	width:100%;
	height:100%;
}
#step1{
	position:absolute;
	width:100%;
	text-align:center;
	height:385px;
	top:0;
	bottom:0;
	margin:auto;
}
#step2{
	position:absolute;
	width:100%;
	text-align:center;
	height:447px;
	top:0;
	bottom:0;
	margin:auto;
}
#step3{
	position:absolute;
	width:100%;
	text-align:center;
	height:783px;
	top:0;
	bottom:0;
	margin:auto;
}
#step4{
	position:absolute;
	width:100%;
	text-align:center;
	height:577px;
	top:0;
	bottom:0;
	margin:auto;
}
#step5{
	position:absolute;
	width:100%;
	
	
}
.wid100{
	width:100%;
}
.ib{
	display:inline-block;
}
#s1_1{
	width:100%;
	text-align:center;
	display:inline-block;
}
#s1_2{
	width:100%;
	text-align:center;
	display:inline-block;
	margin-top:50px;
	
}
.mt50{
	margin-top:50px;
}
.mt10{
	margin-top:10px;
}
.mt20{
	margin-top:20px;
}
.mt30{
	margin-top:30px;
}
.mt40{
	margin-top:40px;
}
ul{
	padding:0;
	margin:0;
	list-style:none;
}
#menushow li{
	width:750px;
	height:127px;
}
a img{
	border:0;
}
#menushow a:hover{
	opacity:0;
}
#player{
	position:absolute;
	width:750px;
	height:100%;
	top:0;
	left:0;
	display:none;
}
#ball{
	position:absolute;
	right: -125px;
    bottom: -280px;
}
#rotateBall{
	animation-name: ball;
	animation-duration: 40s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-iteration-count:infinite ;


/* Safari and Chrome: */
	-webkit-animation-name: ball;
	-webkit-animation-duration: 40s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration-count:infinite ;

}
@keyframes ball
{
0%   {
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
	}
	
100% {
	-ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
	}

}
@-webkit-keyframes ball 
{
0%   {
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
	}
	
100% {
	-ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
	}

}


#s3_3 li{
	width:580px;
	height:128px;
	display:inline-block;
	margin-bottom:10px;
}
.qabg{
	position:absolute;
	top:0;
	left:0;
}
.qaRight{
	position:absolute;
	top:0;
	left:0;
}
.qaContent{
	position:absolute;
	top:0;
	left:171px;
}
.qabg{
	opacity:0.5;
}
.qaRight{
	opacity:0;
}
.qaTarget .qabg{
	opacity:1;
}
.qaTarget .qaRight{
	opacity:1;
}
#s5_3{
	width:551px;
	height:686px;
}
#s5_5{
	width:551px;
	height:263px;
}
.inputDiv{
	width:426px;
	height:92px;
	display:block;
	margin-bottom:21px;
}
.textClass{
	width:426px;
	height:92px;
	background-color:#FFF;
	border:none;
	border-radius:5px;
	font-size:24px;
	color:#000;
	font-family:"微軟正黑體";
}
.selectStyle{
	width:210px;
	height:92px;
	background-color:#FFF;
	border:none;
	border-radius:5px;
	font-size:24px;
	color:#000;
	font-family:"微軟正黑體";
	float:left;
}
.size40{
	font-size:40px;
	color:#FFF;
	font-family:"微軟正黑體";
}
.radioClass{
	-webkit-transform: scale(3, 3);
	-moz-transform:    scale(3, 3);
	-ms-transform:     scale(3, 3);
	-o-transform:      scale(3, 3);
	transform:         scale(3, 3);
	margin-top:25px;
	margin-right:35px;
	-webkit-transform-origin:0% 0%; 
	transform-origin:0% 0%; 
	
}
.checkClass{
	-webkit-transform: scale(3, 3);
	-moz-transform:    scale(3, 3);
	-ms-transform:     scale(3, 3);
	-o-transform:      scale(3, 3);
	transform:         scale(3, 3);
	margin-right:35px;
	-webkit-transform-origin:0% 0%; 
	transform-origin:0% 0%; 
}
.sexDiv{
	margin-top:14px;
	margin-right:25px;
}
#s5_4{
	width:199px;
	height:263px;
}

#wrongScreen{
	width:100%;
	height:100%;
	background-color:#000;
	position:fixed;
	top:0;
	left:0;
	display:none;
}
#menubtn{
	position:fixed;
	
	width:750px;
	left:0;
	right:0;
	top:0;
	margin:auto;
	text-align:right;
}
#mbtn{
	cursor:pointer;
}
#rightmenuContent{
	position: fixed;
    width: 750px;
    height: 100%;
	top:0;
	display:none;
}
#rightmenuContent_bg{
	width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
	background-image:url(images/0606001.png);
}
#rightmenuContent_show{
	width: 100%;
    position: absolute;
    top: 100px;
   
    margin: auto;
	text-align:center;
	font-family:"微軟正黑體";
}
#rightmenuContent_show a{
	text-decoration:none;
	color:#FFF;
	font-size:36px;
	display:block;
}
#rightmenuContent_show li{
	width: 100%;
    text-align: center;
    padding-top: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid #FFF;
}
#rightmenuContent_show a:last-child li {
    border: none;
}

#loading{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:65px;
	height:65px;
}