@charset "utf-8";
/***********************************************************************
 @ filename         : QA.css
 @ author           : twin lin
 @ description      : 基本版型
 @ media            : screen
 @ modified         : 2015-6-19
**********************************************************************/
/************basic************/
body {margin:0; padding:0; background:#FFF; color:#FFF; text-align:center;}
html, body {
	color: #000;
	font-size:100%;
	font-family:Microsoft JhengHei, Arial, Helvetica, sans-serif, PMingLiU, "微軟正黑體","黑體";
	text-align: justify;
}
a {
	color: #313131;
	text-decoration: none;
}
a:hover {
	color: #313131;
	text-decoration: none;
}
/* 黑幕 */
div.black_face{
width:100%;
height:100%;
position:fixed;
background:#000;
filter:alpha(opacity=80);/* for IE */
opacity:.8;
-webkit-opacity:.8;
-moz-opacity:.8;
-o-opacity:.8;
}
/* 底 */
div.QA_back{
	width:640px;
	/*position: fixed;*/
	position: absolute;
	top:0;
	left:50%;
	margin-left:-320px;
}

div.fb_log{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
}
a.btn_fb_login{
	width: 257px;
	height: 65px;
	background: url(../images/QA/btn_fb_login.png) 0 0 no-repeat;
	top: 825px;
	left: 190px;
	}

a.btn_fb_out{
	display:none;
	width: 150px;
	height: 38px;
	background: url(../images/QA/btn_fb_out.png) 0 0 no-repeat;
	top: 40px;
	right: 430px;
	}

/**** 測驗步驟 ****/
div.Question_page{
	width:100%;
	height:990px;
	background:url(../images/QA/Q_bg.png) 0 0 no-repeat;
}
/* 開始頁 */

div.QA_start{
	width:100%;
	height:100%;
	background:url(../images/QA/QA_start.png) 0 105px no-repeat;
}
div.Question_page a.btn_start{
	width: 470px;
	height: 150px;
	background: url(../images/QA/btn_start.png) no-repeat 0 0;
	top: 665px;
	right: 75px;
	}

/* 問題頁 */
div.Q_num{
	width: 270px;
	height: 50px;
	position: absolute;
	top: 455px;
	right: 187px;
	z-index: 100;
	}
span.num{
	margin-left:68px;
	display:block;
	width:135px;
	height:43px;
	background:#a6907a;
	border-radius: 50px;
	-moz-border-radius: 50px; /* 老的 Firefox */	
	color:#FFF;
	text-align: center;
	letter-spacing:0.3em;
	font-size:35px;
	font-weight:200;
	padding-top:7px;
	}
a.arr_left{
	width: 50px;
	height: 50px;
	background: url(../images/QA/arr_left.png) no-repeat 0 0;
	top: 0;
	left: 0;
	}
a.arr_left:hover{
	background: url(../images/QA/arr_left_hover.png) no-repeat 0 0;
	}
a.arr_right{
	width: 50px;
	height: 50px;
	background: url(../images/QA/arr_right.png) no-repeat 0 0;
	top: 0;
	right: 0;
	}
a.arr_right:hover{
	background: url(../images/QA/arr_right_hover.png) no-repeat 0 0;
	}
/* 圖片 */
div.Question_pic{
	position: absolute;
	top: 10px;
	left: 0;
	width:640px;
	height:470px;	
}
img.QA_pic{
	position: absolute;
	top: 0;
	left: 0;
	}
/* 題目 */
i.radio_icon {
  float: left;
  display: inline;
  width: 30px;
  height: 30px;
  background: url(../images/QA/radio_btn.png) 0 0 no-repeat;
  margin-top: 5px;
  margin-left: 5px;
/*  border:1px solid #000;*/
}
.selected  i.radio_icon{
	background-position:0  100%;
}

ul.Q_chooose{
	position: absolute;
	top: 65px;
	left: 70px;
	}
ul.Q_ch_5{
	left:10px;
	}
ul.Q_ch_6{
	top: 135px;
	left:40px;
	}
ul.Q_chooose li{
	display: block;
	padding: 4px 7px 6px 4px;
	font-size:175%;
	letter-spacing:0.1em;
}
ul.Q_chooose li span{
  float: left;
  display: block;
  margin-left:8px;
}
ul.Q_chooose li a{
	display:block;
	padding: 4px 10px 6px;
	zoom:1; /*IE6, IE7*/
}
 /*clear float*/
ul.Q_chooose li a:before, ul.Q_chooose li a:after {
	  content: "";
	  display: table;
  }
ul.Q_chooose li a:after {
	  clear: both;
  }



ul.Q_chooose li a:hover{
	background:#83d839;
	border-radius: 10px;
	-moz-border-radius: 10px; /* 老的 Firefox */	
	filter:alpha(opacity=70);/* for IE */
	opacity:.7;
	-webkit-opacity:.7;
	-moz-opacity:.7;
	-o-opacity:.7;
}
div.Question_page ul.Q_chooose li input{
	width:30px;
	height:30px;
	vertical-align:middle;
	margin-right:10px;
	visibility:hidden;
}

div.Question_frame{
	width: 600px;
	height: 500px;
	position: absolute;
	top: 520px;
	left: 20px;
	/*border:1px solid #000;*/
	overflow: hidden;
		
}
div.Question_list{
	width:3840px;
	height:415px;
	position: absolute;
	z-index: 99;
	left: 0;
}
div.Question_list div.QA_t{
	width:600px;
	height:415px;
	float:left;
	position:relative;
/*	border:1px solid #000;*/	
	}
div.Question_list div.Q_t1{
	background:url(../images/QA/Q1_an.png) no-repeat -20px 0;		
	}
div.Question_list div.Q_t2{
	background:url(../images/QA/Q2_an.png) no-repeat -20px 0;		
	}
div.Question_list div.Q_t3{
	background:url(../images/QA/Q3_an.png) no-repeat -20px 0;		
	}
div.Question_list div.Q_t4{
	background:url(../images/QA/Q4_an.png) no-repeat -20px 0;		
	}
div.Question_list div.Q_t5{
	background:url(../images/QA/Q5_an.png) no-repeat -20px 0;		
	}
div.Question_list div.Q_t6{
	background:url(../images/QA/Q6_an.png) no-repeat -20px 0;		
	}

 /*clear float*/
  .clear:before, .clear:after {
	  content: "";
	  display: table;
  }
  .clear:after {
	  clear: both;
  }
  .clear {
	  zoom:1; /*IE6, IE7*/
  }


/* 分析按鈕 */
a.btn_screen {
	width: 430px;
	height: 130px;
	background: url(../images/QA/btn_screen.png) no-repeat 0 0;
	top: 380px;
	right: 93px;
    }

/* 結果頁 */
div.Question_page_end{
	width:100%;
	height:1345px;
	background:url(../images/QA/Q_en_bg.png) 0 0 no-repeat;
}
div.Question_page_end div.A_t{
	width:640px;
	height:1345px;
	position: absolute;
	top:0;
	}
div.Question_page_end img.A_pic{
	position: absolute;
	top:120px;	
	}
/* 菜單上 */
div.menu_show_top{
	width: 600px;
	height: 210px;
	position: absolute;
	top: 720px;
	left: 30px;
	}
div.menu_show_top img{
	position:absolute;
	top:0;
	left:0;
}
div.menu_show_top h3{
	color: #b48753;
	letter-spacing: 0.1em;
	font-size: 27px;
	font-weight: 500;
	position: absolute;
	top: 5px;
	left: 225px;
}
div.menu_show_top p{
	text-align: left;
	width: 350px;
	color: #2b2b2b;
	letter-spacing: 0.1em;
	position: absolute;
	top: 44px;
	left: 225px;
	font-size: 150%;
}
/* 分享按鈕 */
a.btn_share_top {
	width: 245px;
	height: 70px;
	background: url(../images/QA/btn_share.png) no-repeat 0 0;
	top: 141px;
	right: 129px;
    }
/* 菜單下 */
div.menu_show_down{
	width: 600px;
	height: 210px;
	position: absolute;
	bottom: 183px;
	left: 10px;
	}
div.menu_show_down img{
	position:absolute;
	top:0;
	right:0;
}
div.menu_show_down h3{
	color: #b48753;
	letter-spacing: 0.1em;
	font-size: 27px;
	font-weight: 500;
	position: absolute;
	top: 5px;
	right: 225px;
}
div.menu_show_down p{
	text-align: right;
	width: 350px;
	color: #2b2b2b;
	letter-spacing: 0.1em;
	position: absolute;
	top: 45px;
	right: 225px;
	font-size: 150%;
}

div.menu_show_top h3 a,div.menu_show_down h3 a{
	color:#b48753;
}
div.menu_show_top h3 a:hover,div.menu_show_down h3 a:hover{
	color: #BF996F;
}

/* 分享按鈕 */
a.btn_share_down {
	width: 245px;
	height: 70px;
	background: url(../images/QA/btn_share.png) no-repeat 0 0;
	top: 141px;
	right: 223px;
    }

/* 重玩按鈕 */
a.btn_again {
	width: 264px;
	height: 115px;
	background: url(../images/QA/btn_again.png) no-repeat 0 0;
	top: 1181px;
	right: 189px;
    }


/**** 關閉按鈕 ****/
/*a.btn_close {
	width: 105px;
	height: 125px;
	background: url(../images/QA/btn_close.png) no-repeat 0 0;
	top: 25px;
	right: 45px;
    }*/

/**** 按鈕reset ****/
a.btn_reset {
	position: absolute;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	z-index: 9999;
	text-indent:-200em;
	overflow:hidden;
    }