@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

.verticle_center    		{ position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; display: table;}
.verticle_center p  		{ display: table-cell; vertical-align: middle; text-align: center; word-break: break-all;}
.poz_center         		{ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}
.full               		{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;}
.full_x             		{ position: relative; width: 100%; left: 0px; top: 0px;}

/*wrap*/
.wrapper 					{ position: relative; width: 100%; overflow-x: hidden; background: #E26464; }
.wrapper p 					{ line-height: 1.6; color: #fff; }
.wrapper p.fontnormal		{ font-size: 125%; }
.wrapper p.fontsmall		{ font-size: 100%; }
.content					{ position: relative; width: 100%; }
.content_fixed				{ position: relative; width: 100%; /*max-width: 1366px;*/ margin: 0 auto;  }

html,body 		 			{ position: relative; width: 100%; height: 100%; min-height: 560px; font-size: 100%;}
img 						{ width: 100%; }
footer 						{ position: relative; background-color: #1a1a1a; }
footer .footer_wrap p		{ color: #fff; text-align: center; }
.footer_wrap				{ position: relative; width: 100%; max-width: 1366px; margin: 0% auto; padding: 5% 0; }
.footerlogo 				{ position: relative; width: 12%; margin: 0 auto 4% auto; }
.copyright					{ position: relative; margin: 0 auto 2% auto; }
.policy 					{ position: relative; }
.brpc 						{ display: block; }
.brmo 						{ display: none; }
.fontgray 					{ color: #787878; font-size: 50%; }
.fontblue 					{ color: #ffd961; }
.fontbold 					{ font-weight: 700; }
.btn_p 						{ color: #000; }
.clear 						{ display: block; clear: both; content: '';}


/*nav*/
nav 							{ position: absolute; width: 100%; top: 0; z-index: 9;}
nav a 							{ display: block; }
.nav_wrap 						{ position: relative; width: 100%; max-width: 1366px; margin: 2% auto 0 auto; }
.top-header-left  				{ float: left; margin-left: 2%; }
.top-header-right 				{ float: right; margin-right: 2%; }
.nav_wrap:after 				{ position: relative; display: block; content: ""; clear: both; }
.snsbtn_wrap 					{ width: 20%; margin-top: 0.5%; }
.snsbtn 						{ position: relative; display: inline-block; width: 49%; }
.snsbtn a img 					{ display: inline-block; width: 20%; vertical-align: middle; fill: #fff; }
.snsbtn a p 					{ display: inline-block; font-size: 100%; vertical-align: middle; margin-left: 5%; }
.logo 							{ width: 10%; }

/*section*/
section 						{ position: relative; }
.section_a 						{ position: relative; width: 100%; height: 100vh; min-height: 560px;
									/*background-image: url("../images/bg_index.jpg");*/ background-position: center center; background-size: cover; }
.text_inner 					{ position: relative; width: 64%; margin: 0 auto; }
.section01 						{ position: absolute; width: 100%; max-width: 1366px; top: 50%; left: 50%;
									transform: translate(-50%,-50%);
 									-webkit-transform: translate(-50% ,-50%); }
.section01 .title				{ position: relative; width: 100%; margin: 0% auto 0% auto; float: left; }
.section01 .title p 			{ font-size: 250%; text-align: center; font-weight: bold; }

.section01 .subtitle:nth-of-type(1)			{ position: relative; width: 60%; margin: 10% auto 2% auto; }
.section01 .subtitle:nth-of-type(3) 		{ position: relative; width: 52%; margin: 0 auto; }

.section01 .subtitle h3 		{ font-size: 200%; text-align: center; font-family: "Noto Sans TC"; font-weight: 700; letter-spacing: 0.2rem; line-height: 1.6;}
.section01 .subtitle .subtext 	{ font-size: 150%; }
.section01 .indexbtn 			{ position: relative; width: 50%; margin: 0 auto; }
.btn_scroll 					{ position: relative; width: 28%; margin: 0 2%; padding-top: 13%; display: inline-block;
									background-repeat: no-repeat; background-size: contain; background-position: center; 
									cursor: pointer; }								
.btnleft						{ background-image: url("../images/index_btn1_pc.png"); }
.btnmid							{ background-image: url("../images/index_btn2_pc.png"); }
.btnright						{ background-image: url("../images/index_btn3_pc.png"); }
.eventbg 						{ position: absolute; width: 79.5%; top: 0; left: 0; }
.event01 .eventbg 				{ margin: 0% 0 0 10%;
									-moz-transform:scaleX(-1);
									-webkit-transform:scaleX(-1);
									-o-transform:scaleX(-1);
									transform:scaleX(-1); }
.event02 .eventbg 				{ margin: 7% 0 0 10%; }
.arrowicon 						{ position: absolute; width: 1.5%; bottom: 0; left: 50%;
									transform: translateX(-50%);
 									-webkit-transform: translateX(-50%);
 									margin: 0 0 5% 0%; animation: imgFloat 1s infinite;}
.badge 							{ position: absolute; width: 25%; top: 0; right: 0; margin: 16% -6% 0 0; }
.ttlimg_badge					{ position: relative; width: 100%; top: 0; left: 0; display: block; }
.ttlimg_pc						{ display: block; }
.ttlimg_m 						{ display: none; }
.proimg_pc						{ display: block; }
.proimg_m 						{ display: none; }
.ruleimg_pc 					{ display: block; }
.ruleimg_m 						{ display: none; }
.linkpc 						{ display: block; }
.linkm 							{ display: none; }
.display_pc						{ display: block; }
.display_m						{ display: none; }



/*event01*/
.section_b									{ position: relative; width: 100%;
												/*background: linear-gradient(rgba(0,0,0,1) 0%, rgba(16,25,33,1) 18%, rgba(44,58,66,1) 100%);*/ }
.section_b_wrap 							{ position: relative; width: 100%; max-width: 1366px; margin: 0 auto;}
.section_b_inner 							{ position: relative; width: 75%; margin: 0 auto; }

.section_ttl 								{ display: block; margin: 0 auto 4% auto; }
.event01 .section_ttl 						{ width: 39%; }
.app-video .section_ttl						{ width: 20%; margin-top: 10%; }
.eventrule .section_ttl						{ width: 40%; }

.eventkv > .eventkvbox:nth-child(2) 		{ margin-left: 6%; }
.eventkvbox 								{ position: relative; /*float: left;*/ display: inline-block; vertical-align: middle;}
.eventtext 									{ width: 44%; z-index: 99; }
.eventtext_wrap p 							{ font-size: 125%; }
.eventtext_wrap > p:nth-child(2) 			{ font-size: 760%; line-height: 1.2; }
.eventnum p 								{ position: relative; font-size: 200%;}
.event01 .eventnum .ttlbg 					{ width: 24%; padding-top: 5%; margin: 6% 0 0 0%; }
.event02 .eventnum .ttlbg 					{ width: 24%; padding-top: 5%; margin: 6% 0 0 76%; }
.section02 .subtext		 					{ width: 80%; font-size: 150%; text-align: center;
												font-family: "Noto Sans TC";
												font-weight: 500;
												line-height: 1.6;
												margin: 0 auto 6% auto;
												color: #fff;
											}
.section02 .subtext:nth-child(1)			{ margin-bottom: 6%; }
.eventstep_01 								{}
.eventstep_01 .stepimg 						{ width: 80%; margin: 0 auto; }
.eventstep_01 .steptext						{ width: 80%; margin: 0 auto 0 auto; text-align: center; }
.eventstep_02 								{}
.eventstep_02 .stepimg 						{ width: 80%; margin: 0 auto; }
.textbox 									{ position: relative; width: 100%; margin-bottom: 15%; }
.steptext .textbox p						{ font-weight: 500; letter-spacing: 0.2em; }
.eventtext_wrap 							{ position: relative; /*margin-top: 38%;*/}
.eventimg									{ width: 47%; }
.eventimg img:nth-child(2)  				{ position: absolute; top: 0; left: 0;}
.stepbox 									{ position: relative; float: left; width: 47%; margin: 0 1.5%; }
.stepbox p 									{ font-size: 125%; }
.stepbox .fontsmall							{ font-size: 100%; }
.stepbox .fontlarge 						{ font-size: 150%; }
.stepbox .stepnum							{ position: relative; width: 100%; text-align: center;
												top: 0; left: 50%; font-size: 100%; line-height: 1.6;
												/*font-weight: 700;*/
 												/*margin-top: 5%; */
 												transform: translateX(-50%);
 												-webkit-transform: translateX(-50%);
 												word-break: break-all;
 											}
.stepbox .stepdate							{ position: absolute; width: 100%; text-align: center;
												bottom: 0; left: 50%; font-size: 200%; line-height: 1;
 												margin-bottom: 5%; 
 												transform: translateX(-50%);
 												-webkit-transform: translateX(-50%);
 											}
.stepbox .stepnum span 						{ font-size: 80%; }
.stepbox_wrap 								{ width: 100%; margin: 0 auto; }
.stepimg 									{ width: 100%; margin: 0 auto 0% auto; }
.app_icon 									{ width: 80%; margin: 0 auto 0% auto; padding-bottom: 8.5%; display: block; cursor: pointer; }
.eventbtn 									{ width: 40%; border: solid 2px #000; margin: 0 auto; border-radius: 10em;
												cursor: pointer;
												background-color: #ffd961;
												transition: background-color 0.5s ease;
												-webkit-box-shadow: 0.5em 0.5em rgba(0%,0%,0%,1);
												box-shadow: 0.5em 0.5em rgba(0%,0%,0%,1);
											}
.eventbtn p 								{ font-size: 125%; text-align: center; padding: 8% 0; color: #7c2334; }
.linkbox 									{ margin: 4% 0 8% 0; }
.linkbox_wrap 								{ width: 50%; margin: 0 auto; padding: 2% 0; border-radius: 1em; background-color: #d85252; }
.linkbox .event02info 						{ margin-bottom: 2%; }
.copybox 									{ position: relative; width: 85%; background-color: #434343; margin: 0 auto 2% auto; /*padding: 2% 0;*/ }
.copybox .copytext 							{ margin-left: 4%; }
.copybox .copybtn 							{ position: absolute; width: 27%; top: 50%; right: 0; margin: 0 2% 0 0;
 												transform: translateY(-50%);
 												-webkit-transform: translateY(-50%);
 											}
.copybox p 									{ color: #fff; padding: 4% 0; }
.copybox .eventbtn 							{ background-color: #fff; border: solid 2px #000; box-shadow: none; border-radius: 0; }
.copybox .eventbtn p 						{ color: #000; }
.browsericon 								{ position: relative; width: 70%; margin: 4% auto 4% auto; }
.browsericon .stepbox 						{ width: 25%; margin: 0 4% 0 4%; }
.eventinfo 									{ position: relative; width: 100%; }
.eventinfo p 								{ color: #ecc140; text-align: center; }

.event02 .stepbox 							{ width: 25%; }
.event02 .eventtext p 						{ text-align: right; }
.ethcoin 									{ width: 48%; margin: 10% 0 0 22%; animation: imgFloat 4s infinite; }
.event02info p 								{ text-align: center; font-size: 125%; }
.eventbtn:hover								{ background-color: #fff; }
.eventbtn p:hover							{ color: #333333; }

.event03 .eventtext_wrap > p:nth-child(2) 	{ font-size: 450%; line-height: 1.2; }
.event03 .eventnum .ttlbg 				  	{ width: 24%; padding-top: 5%; margin: 6% 0 0 0%; }
.event03 .stepbox 						  	{ width: 33%; }
.event03 .eventbg			   			  	{ margin: 0% 0 0 10%;
											  -moz-transform:scaleX(-1);
											  -webkit-transform:scaleX(-1);
											  -o-transform:scaleX(-1);
											  transform:scaleX(-1);
											}

/*rule*/
.ttlbg 										{ position: absolute; width: 10%; padding-top: 2%; top: 0; left: 0;
												background-color: #a60000; margin: 1.5% 0 0 4%; }
.section_b_inner .eventrulettl 				{ position: relative; width: 100%; margin-bottom: 4%; }
.eventrule .font_s 							{ font-size: 80%; }
.eventrule .img_info 						{ width: 96%; margin: 0 auto; }
.event03rule .ttlbg	   						{ width: 19%; }
.event04rule .ttlbg	   						{ width: 23%; }
.eventrulettl p 							{ position: relative; font-size: 200%; text-align: center;}
.eventrulebox .ttl p 						{ position: relative; display: block; font-size: 125%; }
.eventrulebox .listbox 						{ margin: 3% 0 1% 3%; }
.eventrulebox .listbox p					{ font-size: 100%; text-align: left; }
.eventrulebox .listbox_wrap 				{ position: relative; width: 49%; float: left; }
.eventrulebox .listbox_wrap:nth-child(2)  	{ border-left: solid 1px #fff; }
.award_ttl 									{ float: left; width: 30%; margin-left: 5%; }
.award_li									{ float: left; width: 60%; margin-left: 4%; }
.eventrule .gray 							{ color: #787878; }
.eventrule ul 								{ width: 90%; margin: 0 auto; }
.eventrule ul li 							{ color: #fff; list-style: decimal; line-height: 1.6; margin-bottom: 2%; font-size: 125%;}
.event02rule ul li 							{ color: #fff;}
.eventruletext 								{ position: relative; width: 100%; float: left; margin-bottom: 10%; }
.event03rule .stepbox 						{ width: 21%; margin: 0 2%;}
.eventrule .contact_text 					{ width: 100%; margin-bottom: 2%;}
.eventrule .contact_text li					{ margin-left: 3%; margin-bottom: 0; list-style-type: disc; color: #fff; }
.eventrule .contact_text p 					{ font-size: 125%; }
.eventrule a								{ color: #fff; text-decoration: underline;}
.rulettlimg 								{ position: relative; width: 31%; }
.totopbtn 									{ position: relative; width: 75%; margin: 0 auto 0 auto; padding-bottom: 6%; }
.totopbtn_wrap								{ position: relative; width: 8%; padding: 2.5% 0; border: solid 2px #fff;
												margin: 0 auto; border-radius: 100em; cursor: pointer;
												background-color: rgba( 0, 0, 0, 0 ); 
												transition: background-color 0.5s ease ;
											}
.totopbtn_wrap:hover						{ background-color: #ffd961; }							
.totopbtn_wrap p 							{ text-align: center; font-size: 125%; }
.light 										{ color: #ffd961; }
.bonuslist 									{ margin-bottom: 5%; }
.schedule									{ margin-bottom: 5%; }
.schedule p 								{ width: 80%; margin: 0 auto; display: block; text-align: center; }
.footerbg 									{ position: absolute; bottom: 0; left: 0; width: 100%;
												margin: 0 auto; padding: 6% 0;
												background-image: url("../images/bg_footer.jpg");
												background-size: cover; 
											}

@media (max-width: 1080px)	{
	.snsbtn_wrap 								{ width: 10%; }
	.snsbtn a .textpc 							{ display: none; }
	.snsbtn a img 								{ width: 100%; }
	.snsbtn 									{ width: 30%; margin-left: 15%; }
	.text_inner 								{ position: relative; width: 80%; margin: 0 auto; }
	.section01 .subtitle:nth-of-type(1)			{ position: relative; width: 67%; margin: 10% auto 8% auto; }
	.section01 .subtitle:nth-of-type(3) 		{ position: relative; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) 	{

	/*nav*/
	.nav_wrap 									{ margin: 5% auto 0 auto  }
	.logo 										{ width: 24%; }
	.top-header-left  							{ margin-left: 4%; }
	.top-header-right 							{ margin-right: 4%; }
	.snsbtn_wrap 								{ width: 23%; }

	.proimg_pc									{ display: none; }
	.proimg_m 									{ display: block; } 
	.ttlimg_pc									{ display: none; }
	.ttlimg_m 									{ display: block; }
	.ruleimg_pc 								{ display: none; }
	.ruleimg_m 									{ display: block; }								
	.brpc 										{ display: none; }
	.brmo 										{ display: block; }
	.linkpc  									{ display: none; }
	.linkm 										{ display: block; }
	.display_pc									{ display: none; }
	.display_m									{ display: block; }

	.section01 .title p 						{ font-size: 6vw; }
	.text_inner 								{ position: relative; width: 90%; margin: 0 auto; }


	.section01 .title							{ position: relative; width: 100%; float: initial; }
	.section01 .subtitle h3 					{ font-size: 3.7vw; }
	.section01 .indexbtn 						{ position: relative; width: 100%;}
	.btnleft									{ background-image: url("../images/index_btn1_mo.png"); }
	.btnright									{ background-image: url("../images/index_btn2_mo.png"); }
	.btn_scroll 								{ width: 100%; margin: 0 auto 4% auto; }
	.wavebg_up 									{ width: 100%; top: 0; left: 0; margin: -10% 0 0 -30%;}
	.wavebg_down								{ width: 50%; bottom: 0; right: 0; margin: 0 0 0 0; }
	.arrowicon 									{ width: 4%; }
	.copyright 									{ width: 90%; }
	footer p 									{ color: #fff; font-size: 3.5vw; }
	.footerlogo 								{ width: 33%; margin: 0 auto 8% auto;}
	.footer_wrap 								{ padding: 10% 0; }
	.badge 										{ width: 50%; top: 0; right: 0; margin: 12% -24% 0 0; }

	.eventtext_wrap p 							{ font-size: 3.5vw; }
	.eventnum p 								{ position: relative; font-size: 4vw; }
	.eventtext_wrap > p:nth-child(2) 			{ font-size: 16vw; }
	.section_b_inner 							{ position: relative; width: 90%; }
	.eventkvbox 								{ position: absolute; display: block; vertical-align: middle; }
	.eventkv 									{ position: relative; padding-bottom: 100%; }
	.event01kv .eventimg						{ width: 72%; top: 0; right: 0; margin: 0 0 0 0; }
	.event01kv .eventtext						{ width: 54%; bottom: 0; left: 0; margin: 0 0 0 0%; }
	.event02kv .eventimg						{ width: 65%; top: 0; left: 0; margin: 0 0 0 0; }
	.event02kv .eventtext						{ width: 70%; bottom: 0; right: 0; margin: 0 0 0 0%; }
	.stepbox .stepnum							{ font-size: 3.5vw; }
	.stepbox 									{ margin-bottom: 8%; }
	.stepbox p 									{ font-size: 3.5vw; }
	.event02info p 								{ font-size: 3.5vw; }
	.section02 .subtext		 					{ font-size: 3.5vw; width: 90%; }
	.eventinfo p 								{ font-size: 3.5vw; }
	
	.eventbtn 									{ width: 80%; }
	.eventbtn p 								{ padding: 4% 0; font-size: 3.5vw; }
	.copybox 									{ width: 90%; }
	.copybox .eventbtn 							{ width: 30%; }
	.copybox .copytext 							{ font-size: 3.5vw; }
	.browsericon 								{ width: 84%; margin: 4% auto; }
	.browsericon .stepbox 						{ width: 25%; margin: 0 4% 0 4%; }

	.eventstep_01 .steptext						{ width: 100%; }
	.eventstep_01 .stepimg 						{ width: 100%; }

	.stepbox .fontlarge 						{ font-size: 5vw; }
	.stepbox .fontsmall 						{ font-size: 2vw; }

	.linkbox 									{ margin: 8% 0 16% 0; }
	.linkbox_wrap 								{ width: 90%; }

	.ttlbg 										{ width: 14%; margin: 1.5% 0 0 6%; padding-top: 3% }
	.eventruletext 								{ width: 100%; margin-bottom: 14%; }
	.eventrulettl p 							{ font-size: 5vw; }
	.eventrulebox .ttl p 						{ font-size: 3.5vw; }
	.eventrule ul 								{ width: 90%; }
	.eventrule ul li 							{ font-size: 3.5vw; }
	.eventrule .contact_text li					{ margin-left: 6%; }
	.eventruletext:nth-child(1) 				{ box-shadow: none; }
	.totopbtn_wrap p 							{ font-size: 3.5vw; }
	.totopbtn_wrap								{ width: 17%; padding: 5% 0; border: solid 2px #fff; }
	.event03rule .stepbox 						{ width: 42%; margin: 0 4%; }
	.eventrulebox .listbox p 					{ font-size: 3.5vw; }
	.eventrulebox .listbox_wrap 				{ width: 100%; margin-bottom: 6%; }
	.eventrulebox .listbox_wrap:nth-child(2)  	{ border-left: none; }
	.award_li									{ width: 100%; margin-top: 4%;}
	.event03rule .ttlbg	   						{ width: 30%; }
	.event04rule .ttlbg	   						{ width: 40%; }
	.eventrule .contact_text p 					{ font-size: 3.5vw; }
	.rulettlimg 								{ width: 66%; }

	.eventrule .font_s 							{ font-size: 3vw; }


	.event01 .section_ttl 						{ width: 70%; }
	.app-video .section_ttl						{ width: 35.5%; margin-top: 10%; }
	.eventrule .section_ttl						{ width: 70%; }
	.event03 .eventtext_wrap > p:nth-child(2) 	{ font-size: 680%; line-height: 1.2; }

	/*coinbox*/
	.coinbox 									{ position: relative; width: 68%; margin: 0 auto 5% auto; padding: 15% 0; padding: 12% 0 18% 0; float: initial; }
	.acextoken 									{  }
	.bitcoin 									{ width: 66%; }
	.coinbox_mask 								{ top: 0; margin-top: 27.5%; }
}


/*---loading---*/
#loading                    { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background: #1a1a1a; z-index: 100;}
#loading_line               { position: absolute; width: 0%;
                              height: 2px;
                              left: 0px;
                              top: 0px;
                              background: #5cd3d3;
                              -moz-transition: width 1s ease 0s;
                              -o-transition: width 1s ease 0s;
                              -webkit-transition: width 1s ease;
                              -webkit-transition-delay: 0s;
                              transition: width 1s ease 0s; }
#loading_pic                { position: absolute;
                              width: 200px;
                              height: 200px;
                              left: 0px;
                              top: 0px;
                              right: 0px;
                              bottom: 0px;
                              margin: auto;}
#loading_pic img            { position: absolute;
							  width: 100%;
                              left: 0px;
                              right: 0px;
                              top: 0px;
                              bottom: 0px;
                              margin: auto;
                          	  animation: imgOp 3s infinite;
                          	}


/*---------------------lightbox---------------------*/
.lightbox                             { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none; z-index: 100; pointer-events: none;}
.lightbox img                         { width: 100%; }
.lightbox::before                     { position: fixed; width: 100%; height: 100%; content:''; background-color: rgba(0,0,0,0.4);}							
.lightbox_wrap                        { position: relative; width: 100%; max-width: 640px; height: 100%; margin: 0 auto; /*background-color: red;*/}    
.lightbox p                           { color: #000; }
.popup 								  { position: absolute; bottom: 0; left: 50%;
										border-radius: 10em; 
										margin-bottom: 5%;
										background: #fff;
										padding: 2% 4% 2% 4%;
										transform: translateX(-50%); -webkit-transform: translateX(-50%); }
@media (max-width: 640px) 	{
	.lightbox p { font-size: 3.5vw; }
}										


/*---------------------video---------------------*/
.video-outer 						{ position: relative; width: 70%; margin: 0 auto; }
.video-outer .video-inner 			{ position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.25%;}
.video-outer .video-inner iframe 	{ position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.player 							{ display: block; }

@media (max-width: 640px) 	{
	.video-outer 						{ position: relative; width: 90%; margin: 0 auto; }
}