@charset "utf-8";

body 
{
	margin:0px;
	padding:0px;
	background-color:black;
	overflow-y:scroll;
}

.HIDDEN
{
	display: none;
}

.TRANSPARENT
{
	opacity: 0;
}

.BLACK
{
	background: rgba(0,0,0,0.7);
}

.WHITE
{
	background: rgba(255,255,255,1);
}

.BTN
{
	cursor: pointer;
}

.NO_MOUSE
{
	pointer-events:none;
}

.NO_SELECT
{
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
}

.wordwrap 
{ 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

/***************/

#wrapper 
{
	width:100%;
	height:100%;
	z-index:0;
}

#text
{
	position: fixed;
	width:100%;
	height:20px;
	left:0px;
	top:0px;

	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	line-height:20px;
	color:#000000;
	text-align:center;
	background:yellow; 
}

/***************/

#bg1
{
	width:100%;
	height:100%;
    background-repeat: no-repeat;
    background-position: 50% 0%; 
}
#bg2
{
	width:100%;
	height:100%;
    background-repeat: no-repeat;
    background-position: 50% 0%; 
}
#bg_black
{
	position:fixed;
	width:100%;
	height:100%;
}

#star1, #star2, #star3, #star4
{
	width:2000px;
	height:512x;
	left:50%;
	margin-left:-1000px;
	top:0px;
}

/***************/




/***********************************/
/***********************************/
/*            PRELOADER            */
/***********************************/
/***********************************/

#preloader_con
{
	position: fixed;	
	width:877px;
	height:83px;
	left:50%;
	margin-left:-438px;
	top:50%;
	margin-top: -41px;
	z-index:100000;
}

#l1
{
	width:877px;
	height:83px;
	left:0px;
	top:0px;
}

#l2_viewport
{
	width:0px;		/* 844 */
	height:5px;
	left:17px;
	top:57px;
	overflow: hidden;

	background-repeat: no-repeat;
    background-position: 0% 0%; 
}

#l2
{
	width:844px;
	height:5px;
	left:0px;
	top:0px;
}

#l3
{
	width:38px;
	height:18px;
	left:0px;
	top:51px;	
}

#preloader_text
{	
	width:100px;
	height:14px;
	left:50%;
	margin-left:-50px;
	top:50%;
	margin-top:-7px;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:14px;
	color:#999999;
	text-align:center;
}




/***********************************/
/***********************************/
/*              HEADER             */
/***********************************/
/***********************************/

#header_con
{
	position:fixed;
	width:100%;
	height:62px;
	background-image: url(../assets/h_bg.png);
    background-repeat: repeat-x;
}

#h1
{
	width:152px;
	height:54px;
	left:50%;
	margin-left:-500px;
	top:0px;
}

#h2
{
	width:18px;
	height:20px;
	left:50%;
	margin-left:466px;
	top:18px;
}

#nav_con
{
	width:240px;
	height:26px;
	left:50%;
	margin-left:215px;
	top:21px;
}

.nav_ul
{
	list-style: none; 
	font-size:14px;
	line-height:14px;
	color:#ffffff;
	font-weight: normal;
	text-align:center;
	vertical-align: top;
}

.header_l1, .header_l2
{	
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";	
	color:#ffffff;
	font-size:14px;
	line-height:14px;
	float:left;
	vertical-align: top;
}

.header_l2
{
	vertical-align: top;
}

.header_l1:hover
{
	color:#76b900;	
}

.header_l1 a:link, .header_l1 a:visited, .header_l1 a:active
{
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	color:#ffffff;	
	font-weight: normal;
	text-align:center;
	vertical-align: top;
	text-decoration: none;
	padding: 8px;
}

.header_l1 a:hover
{
	color:#76b900;
	font-weight: normal;
	text-align:center;
	vertical-align: top;
	text-decoration: none;
	padding: 8px;
}

.header_l1_lock
{
	color:#76b900;	
	pointer-events:none;
	float:left;
}

.header_l1_lock a:link, .header_l1_lock a:visited, .header_l1_lock a:active, .header_l1_lock a:hover
{
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	color:#76b900;
	font-weight: normal;
	text-align:center;
	vertical-align: top;
	text-decoration: none;
	padding: 8px;
}

#h3_con
{
	width:379px;
	height:140px;
	left:50%;
	margin-left: 116px;
	top:36px;
}
#h3, #h3_txt
{
	width:379px;
	height:140px;
	left:0px;
	top:0px;
}
#h3_txt
{
	margin-left: 30px;
	margin-top: 50px;
	margin-right: 50px;

	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	color:#999999;
	font-size:16px;
	line-height:20px;
	font-weight: normal;
	text-align:left;
}
.h3_w
{
	color: white;
	font-weight: bold;
	vertical-align: top;
}

#h3_area
{
	width:84px;
	height:34px;
	left:50%;
	margin-left:373px;
	top:11px;
}


/***********************************/
/***********************************/
/*              INDEX              */
/***********************************/
/***********************************/

#index_con
{
	width:1000px;
	left:50%;
	margin-left:-500px;
	top:0px;
}

#a1
{
	width:673px;
	height:674px;
	left:425px;
	top:75px;
}
#a1_sub
{
	width:673px;
	height:674px;
	left:0px;
	top:0px;
}

#a2
{
	width:445px;
	height:216px;
	left:16px;
	top:89px;
}

#a3
{
	width:566px;
	height:174px;
	left:34px;
	top:247px;
}

#a4_con
{
	width:250px;
	height:113px;
	left:295px;
	top:375px;
}
#a4, #a4r
{
	width:250px;
	height:113px;
	left:0px;
	top:0px;
}


#a5
{
	width:625px;
	height:58px;
	left:177px;
	top:622px;
}









/***********************************/
/***********************************/
/*               GAME              */
/***********************************/
/***********************************/

#game_con
{
	width:1000px;
	left:50%;
	margin-left:-500px;
	top:0px;
}

/*************** step 1   fans  ***********/

#step1_con
{	
	width:540px;
	height:280px;
	left:230px;
	top:220px;
	background:white;
}

#step1_txt
{
	width:400px;
	height:16px;
	left:20px;
	top:20px;

	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:16px;
	color:#588901;
	font-weight: normal;
	text-align:left;
}

#step1_sub
{
	width:500px;
	height:200px;
	left:20px;
	top:60px;
}

#step1_close
{
	width:25px;
	height:25px;
	right:20px;
	top:15px;
}






/*************** step 2   select ***********/

#step2_con
{	
	width:636px;
	height:563px;
	left:194px;
	top:70px;
}

#b0
{	
	width:636px;
	height:563px;
	left:0px;
	top:0px;
}

#b_black
{
	background:black;
}

#select_con > label, #file_con > label
{
	display: block;
	position: absolute;
	cursor: pointer;
}
#select_con > input, #file_con > input
{
    display: none;
}

#preview_con, #select_con, #webcam_con, #file_con, #qrcode_con, #b_black
{
	width:492px;
	height:492px;
	left:61px;
	top:17px;
}

#video_con
{
	width:492px;
	height:492px;
	left:0px;
	top:0px;	
	overflow: hidden;
}
#video1
{
	display:block;
	position: absolute;
	left:-87px;
	top:0px;
}

#preview_con
{
	overflow: hidden;
}
#preview_img
{
	display:block;
	position: absolute;
}

#b1
{
	width:451px;
	height:87px;
	left:20px;
	top:171px;	
}

#b2
{
	width:127px;
	height:31px;
	left:61px;
	top:281px;	
}
#b3_label
{
	width:127px;
	height:31px;
	left:168px;
	top:281px;
}
#b3
{
	width:127px;
	height:31px;
	left:0px;
	top:0px;	
}
#b4
{
	width:636px;
	height:31px;
	left:299px;
	top:281px;
}

#b5
{
	width:93px;
	height:93px;
	left:202px;
	top:385px;	
}
#b6, #b6_copy
{
	width:100px;
	height:31px;
	left:389px;
	top:511px;	
}
#b7
{
	width:100px;
	height:31px;
	left:0px;
	top:511px;	
}

#b8_label
{
	width:100px;
	height:31px;
	left:0px;
	top:511px;	
}
#b8
{
	width:100px;
	height:31px;
	left:0px;
	top:0px;	
}

#b9
{
	width:177px;
	height:204px;
	left:158px;
	top:139px;	
}

#b10, #b10_copy1, #b10_copy2
{
	width:80px;
	height:31px;
	left:205px;
	top:511px;	
}

/*************** step 3   edit ***********/

#step3_con
{	
	width:100%;
	left:0px;
	top:0px;
}

#canvas_source_con
{
	width:492px;
	height:492px;
	left:34px;
	top:89px;	
	overflow: hidden;
}

#c0_con
{
	left:561px;
	top:219px;
}
.c_text, .c_select
{
	display: block;
	position: absolute;
	background: #ffffff;

	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:16px;
	line-height:24px;	
	
	font-weight: normal;
	text-align: left;
	padding: 0px;
	margin:0px;
	vertical-align: middle;
	border:0px;
}
.c_text
{
	padding-left: 6px;
}
#c_default	
{	
	width:381px;	
	height:40px;
	left:0px;	
	top:0px;	
	color:#4f564a;
}
#c_self1, #c_self2		
{	
	width:375px;	
	height:24px;
	left:0px;	
	color:#8b8d89;
}
#c_self1	{	top:50px;	}
#c_self2	{	top:81px;	}

#c1_con
{
	left:34px;
	top:597px;	
}
#c1
{
	width:36px;
	height:31px;
	left:0px;
	top:0px;		
}
#c2
{
	width:34px;
	height:31px;
	left:36px;
	top:0px;	
}
#c3
{
	width:146px;
	height:30px;
	left:340px;
	top:2px;	
}


#c4_con
{
	width:382px;
	height:115px;
	left:561px;
	top:368px;	
}
#c4
{
	width:382px;
	height:115px;
	left:0px;
	top:0px;		
}

#c4_con > label
{
	display: block;
	position: absolute;
	cursor: pointer;
}
#c4_con > input[type=radio]
{
	display: none;
}
#c4_con > label:before 
{
	display: block;
	position: absolute;

	content: "";
	width: 19px;
	height: 19px;
	background-color: #6d7365;
}
#c4_con > label:before 
{
	border-radius: 8px;
}
#c4_con > input[type=radio]:checked + label:before 
{
    content: "\2022";
    color: #004831;
    font-size: 52px;
    text-align: center;
    line-height: 16px;
}
#c_right_label	{	left:7px;	top:58px;	}
#c_left_label	{	left:77px;	top:58px;	}
#c_no_label		{	left:150px;	top:58px;	}







#c5_con
{
	width:382px;
	height:53px;
	left:561px;
	top:526px;	
}
#c5
{
	width:382px;
	height:53px;
	left:0px;
	top:0px;		
}
#c6
{
	width:88px;
	height:25px;
	left:181px;
	top:14px;	
}
#c7
{
	width:88px;
	height:25px;
	left:289px;
	top:14px;	
}


/*************** step 4   complete ***********/

#step4_con
{	
	width:100%;
	left:0px;
	top:0px;
}

#canvas_display_con
{
	width:369px;
	height:369px;
	left:565px;
	top:172px;
}

#d1
{
	width:468px;
	height:216px;
	left:16px;
	top:157px;
}

#d2
{
	width:414px;
	height:139px;
	left:163px;
	top:301px;
}

#d3
{
	width:299px;
	height:235px;
	left:16px;
	top:420px;
}

#d4_con
{
	width:282px;
	height:113px;
	left:267px;
	top:411px;
}
#d4, #d4r
{
	width:282px;
	height:113px;
	left:0px;
	top:0px;
}



/*************** step 5   form ***********/

#step5_con
{	
	width:100%;
	left:0px;
	top:0px;
}

#e1_copy
{
	width:468px;
	height:216px;
	left:16px;
	top:157px;
}

#e2
{
	width:256px;
	height:84px;
	left:162px;
	top:335px;
}

#e3_copy
{
	width:299px;
	height:235px;
	left:16px;
	top:420px;
}

#form_con
{
	width:685px;
	height:553px;
	left:356px;
	top:79px;
}

#e0
{
	width:685px;
	height:553px;
	left:0px;
	top:0px;
}

#e4
{
	width:98px;
	height:31px;
	left:513px;
	top:457px;
}

#step5_close
{
	width:25px;
	height:25px;
	left:593px;
	top:66px;
}

#e_form > label
{
	display: block;
	position: absolute;
	cursor: pointer;
}
#e_form > input[type=radio]
{
	display: none;
}
#e_form > label:before 
{
	display: block;
	position: absolute;

	content: "";
	width: 19px;
	height: 19px;
	background-color: #6d7365;
}
#e_form > label:before 
{
	border-radius: 8px;
}
#e_form > input[type=radio]:checked + label:before 
{
    content: "\2022";
    color: #004831;
    font-size: 52px;
    text-align: center;
    line-height: 16px;
}

.e_text, .e_select
{
	display: block;
	position: absolute;
	height:26px;
	background: rgba(0,0,0,0.75);

	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:16px;
	line-height:22px;	
	color:#ffffff;
	font-weight: normal;
	text-align: left;
	margin:0px;
	vertical-align: middle;
	border:0px;
}
.e_select
{
	padding: 0px;
}
.e_text
{
	padding-left: 2px;
	padding-right: 2px;
}
.e_select option
{
	background: rgba(0,0,0,0.75);
}

.combo_arrow 
{
	display: block;
	position: absolute;
	width:11px;
	height:6px;
}

#e_lastname			{	width:94px;		left:149px;	top:80px;	}
#e_firstname		{	width:94px;		left:291px;	top:80px;	}
#e_female_label		{					left:456px;	top:82px;	}
#e_male_label		{					left:505px;	top:82px;	}
#e_city				{	width:101px;	left:175px;	top:115px;	}
#e_city_arrow		{					left:255px;	top:126px;	}
#e_phone			{	width:193px;	left:383px;	top:115px;	}
#e_email			{	width:401px;	left:175px;	top:149px;	}
#e_age1_label		{					left:162px;	top:185px;	}
#e_age2_label		{					left:277px;	top:185px;	}
#e_age3_label		{					left:380px;	top:185px;	}
#e_age4_label		{					left:483px;	top:185px;	}
#e_age5_label		{					left:162px;	top:216px;	}
#e_age6_label		{					left:265px;	top:216px;	}

#e_brand			{	width:127px;	left:249px;	top:261px;	}
#e_brand_arrow		{					left:357px;	top:272px;	}
#e_size				{	width:56px;		left:320px;	top:294px;	}
#e_size_arrow		{					left:357px;	top:305px;	}
#e_reason1_label	{					left:324px;	top:328px;	}
#e_reason2_label	{					left:386px;	top:328px;	}
#e_reason3_label	{					left:449px;	top:328px;	}
#e_reason4_label	{					left:512px;	top:328px;	}
#e_time1_label		{					left:88px;	top:392px;	}
#e_time2_label		{					left:192px;	top:392px;	}
#e_time3_label		{					left:304px;	top:392px;	}
#e_time4_label		{					left:426px;	top:392px;	}
#e_favorite			{	width:271px;	left:304px;	top:420px;	}






/***********************************/
/***********************************/
/*               RULE              */
/***********************************/
/***********************************/

#rule_con
{
	width:1000px;
	height:2500px;
	left:50%;
	margin-left:-500px;
	top:0px;
}

#ru_bg
{
	width:870px;
	height:2250px;
	left:65px;
	top:250px;
	background:rgba(0,0,0,0.85);
}
#ru1
{
	width:878px;
	height:483px;
	left:115px;
	top:0px;
}
#ru2_con
{
	width:914px;
	height:560px;
	left:44px;
	top:499px;
}
#ru2
{
	width:914px;
	height:560px;
	left:0px;
	top:0px;
}
#ru_sec1, #ru_sec2
{
	width:734px;
	left:133px;
}
#ru_sec1	{	top:320px;	}
#ru_sec2	{	top:1050px;	}

.ru_ul1
{
	list-style: disc;
	margin-left: 28px;
}
.ru_t1
{
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:15px;
	line-height:25px;	
	color:#999999;
	font-weight: normal;
	text-align: left;
}
.ru_t2
{
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:19px;
	line-height:25px;	
	color:#cccccc;
	font-weight: bold;
	text-align: left;
}
.ru_t3
{
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:15px;
	line-height:25px;	
	color:#76b900;
	font-weight: bold;
	text-align: left;
}


.pro_con
{
	width:220px;
	height:70px;
}
#pro1	{	left:40px;	top:435px;	}
#pro2	{	left:250px;	top:352px;	}
#pro3	{	left:430px;	top:440px;	}
#pro4	{	left:660px;	top:502px;	}

.pro_t1
{
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:12px;
	line-height:19px;	
	color:#ffffff;
	font-weight: bold;
}
.pro_t2
{
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:12px;
	line-height:19px;	
	color:#666666;
	font-weight: bold;
}
.pro_con a:link, .pro_con a:visited, .pro_con a:active
{
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:14px;
	line-height:20px;		
	color:#76b900;
	font-weight: bold;
	text-decoration: underline;
}

.pro_con a:hover
{
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU";
	font-size:14px;
	line-height:20px;	
	color:#448713;
	font-weight: normal;
}