@charset "UTF-8";

/* common */
html,body{
	margin:0;
	font-size:10px;
	text-align:left;
	height:100%;
	overflow: hidden;
	font-family:Arial,微軟正黑體,"sans-serif"	
}
body{
	font-size:2.2rem;
	background-color: black;
	font-weight: bolder;
/*	color:white;*/
}
a,a:visited,a:hover{
	text-decoration: none;
}
iframe{width:100%;height:100%;}

th{
	text-align: center;
	border-bottom: 1px double #DBDBDB;
}
td,th{
	padding:5px 0;
}

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

   section / tab page 

***********************/
section{height:100%;overflow:hidden !important;}
/*section:nth-child(1){
	position: relative;		
	top:10%;
}*/
section:nth-child(2){
	position: relative;		
	top:100%;
	overflow:hidden;
}
section:nth-child(3){
	position: relative;	
	top:200%;
	overflow:hidden;
}
section:nth-child(4){
	position: relative;	
	top:300%;
	overflow:hidden;
}
section:nth-child(5){
	position: relative;	
	top:400%;
	overflow:hidden;
}
section:nth-child(6){
	position: relative;	
	top:500%;
	overflow:hidden;
}
/* enroll page's section */
#g_enroll #list,#t_enroll #list,#s_enroll #list{
	height:90%; 	
}
#g_enroll #enroll,#t_enroll #enroll,#s_enroll #enroll{
	height:95%;
}

/*#enroll_personal_ga,#enroll_personal_tr,#enroll_personal_pk{
	position: relative;
	top:-1%;
}*/

/*#enroll_inner_ga:before,#enroll_inner_tr:before,
#enroll_inner_pk:before{
	display: block;
	content:"";
	height:1%;
}
*/


/* swiper-content (id) */
#enroll_ga,#enroll_tr,#enroll_pk{
	overflow: hidden;
}
#game_ga,#game_tr,#game_pk
{
	overflow: hidden;
}

/*#game0,#game1,#game2,#game3,#game4{
	overflow: hidden;
		height:100%;
}*/


/* header */
header{
	display:flex;
	flex-wrap:nowrap;
	width:100%;
	font-size:2.6rem;
	height:6%;
	text-align: center;
	background-color:#131D0D;
	color:#ffcc00;
	position: fixed;
	top:0;							
}
.header{width:10%;align-self: center;}
.header i{width:100%;}
#head_title{width:40%;}
#head_game{
/*	font-family:'Bowlby One SC', cursive;*/
	color:#C7C7C7;
}
/*#head_game.active{
	color:#57FF93;
}*/

.btn_personal:before{
content:"\f406\00a0 個人";display:block;width:100%;height:32px; font-family:"Font Awesome 5 Free";font-size:22px;color:#F4BD3E;font-weight:900;
}
.btn_group:before{
content:"\f0c0\00a0 群組";display:block;width:100%;height:32px; font-family:"Font Awesome 5 Free";font-size:22px;color:#F4BD3E;font-weight:900;	
}

.btn_group2:before{
content:"\f0c0\00a0 增加報名人數";display:block;width:100%;height:32px; font-family:"Font Awesome 5 Free";font-size:22px;color:#F4BD3E;font-weight:900;}
.go_to_play2:before{
content:"\f251\00a0 進入賽場";display:block;width:100%;height:32px; font-family:"Font Awesome 5 Free";font-size:22px;color:#F4BD3E;font-weight:900;}


main{
	height:94%;
	padding:8px;
	background-color:black;
	color:white;
}
#contest_p main{padding:0;}
input[value="確定"]{
	font-size:20px;
	background-color: #35ADFF;
	color:white;
	border:none;
	border-radius: 5px;
	padding:5px;		
	margin: 20px auto;
}

/* spinner */
.spinner1,
.spinner1:after {
	display:inline-block;
  border-radius: 50%;
  width: 5em;
  height: 5em;
}
.spinner1 {
  margin: 10px;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner2 {
  width: 36px;
  height: 36px;
	/*background: radial-gradient(circle, rgba(197,243,201,1) 0%, rgba(23,244,93,1) 100%);*/
	background-color:#72F59E;
  display:flex;
  align-content: center;
  align-self: center;
  margin-left:8px;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}



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

1.報名

*******************************************************/
/* enroll - list */
.list_item:hover{color:yellow;}
#enroll_list_tr table,#enroll_list_pk table{text-align: left;width:100%;}
#enroll_list_tr th, #enroll_list_pk th{text-align: justify;}
#enroll_list_tr td:nth-child(-n+2),#enroll_list_pk td:nth-child(-n+2){width:39%;}
#enroll_list_tr td:last-child,#enroll_list_pk td:last-child{width:16%;}
/* 點擊競賽名稱後出現資訊視窗 */
.contest_info{display:flex;width:98%;border-collapse:collapse;justify-content:center;margin:auto;}
.contest_info tbody{max-width:80%;margin:0.2em 10%;}
/*.contest_info tbody tr{width:100vw !important;margin:1em auto;}*/
.contest_info tr td{border:1px solid #ffffff;padding:6px;}
.contest_info tr td:nth-child(1){max-width:50%;}
.contest_info tr td:nth-child(2){max-width:50%;}

/* enroll */

#enroll tr{margin-top: 20px;}
#enroll button,.go-to-enroll,.go-to-enroll_1,
.enroll_personal_btn,.usr_id_chk,
.btn_chk_g,.btn_cancel{
		font-size:20px;
		background-color: #35ADFF;
		color:white;
		border:none;
		border-radius: 5px;
		padding:5px;
		margin-top: 5px;
}

.enroll_again{
	background-color:#F8A1F7; 
}
.enroll_finish{
	position:relative;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
}
.enroll_finish button{
	display:flex;
	justify-content: center;
	width:90%;
	/*height:100%;*/
	margin:20px auto;
	padding:10px;
}

.back-to-enroll,.go_to_play{
		font-size:20px;
		background-color: #77ACFF;
		color:white;
		border:none;
		border-radius: 5px;
		padding:5px;
		margin-top: 5px;
}
.usr_id_chk,.gp_enroll,.enroll_personal_btn,.back-to-enroll{
	width:160px;
	text-align: justify-all;
}

/* personal/group button */

.go-to-enroll_2{display:none;}
.go-to-enroll_2 button{
		display:flex;
		flex:1;
		font-size:22px;
		background-color: transparent;
		color:#F4BD3E;
		margin-right:5px;
		float:left;	
}


.gp_add,.gp_enroll{
		font-size:20px;
		background-color:#bdbdbd;
		color:white;
		border:none;
		border-radius: 5px;
		padding:5px;
		margin-top: 5px;	
}
.gp_enroll[data-toggle="modal"]{
		background-color: #35ADFF;
}
/* container */
.container{
	display:inline-block;
	width:100%;
	padding-top:10px;
	padding-bottom:5px;
	margin:auto;
	height:100%;
	overflow:auto;
}
#contest .container{
	text-align: center;
}
.list_container{
	padding-top:10px;
	padding-bottom:5px;
	margin:auto;
	text-align: center;
	height:77%;
	overflow:auto;	
}
.game_ques_0{height:88%;}
#game0{overflow-y: auto;}
.ques1,.ques2,.ques3{text-align: left;width:100%;}
/*.ques1{margin-top:30px;}.ques2{margin-top:55px;}*/.ques3{margin-top:10px;}
.game_sol p,.game_wait p,.game_final p{text-align:left !important;}

.contest_item{display:flex;margin:20px;justify-content:space-around;}
.contest_item div{min-width:30%;}

#enroll_ga table, #enroll_tr table, #enroll_pk table{
	width:100%;
}

.enroll_personal, #enroll_group{
	width:100%;
	height:100%;
}
#enroll_personal{height:100%;padding-top:40px;overflow: auto;}
#enroll_personal button{margin-top:20px;}
.enroll_note1,.enroll_note1_open{margin-top:15px;color:#F9316A;}
.enroll_note1::before{content:"重要注意事項\00a0\f13a"; font-family:"Font Awesome 5 Free";font-size:22px;display:inline-block;font-weight: 900;}
.enroll_note1_open::before{content:"重要注意事項\00a0\f057"; font-family:"Font Awesome 5 Free";font-size:22px;display:inline-block;font-weight: 900;}

.enroll_note222{font-size:22px;text-align: left;display:none;border:1px solid #F9316A;padding:5px;}
.enroll_note2 p:nth-child(2){color:#F9316A;font-size:20px;}




/* enroll by group accounts */
.add_ids{margin:30px auto;display:flex;justify-content:center;}
.add_ids>span{margin:auto 25px;}
.people{font-size:30px;display:inline-block;/*width:80px;*/text-align: center;}
.incre::before{content: "\f0fe";color:#F8A1F7;}
.decre::before{content: "\f146";color:#7DF996;}
.decre::before,.incre::before{font-family:"Font Awesome 5 Free";font-size:30px;font-weight:900;}
.ticket_qt,.tickets_consume{color:red;}
.participant_list1{text-align: center;color:#686868;font-size:20px;}
/*.participant_list1:before,.participant_list1:after{
	display: inline-block;
	content: "";
	vertical-align: middle;
	height:1px;
	width:250px;
	background-color: #686868;
	margin:0 8px;
}*/
.participant_list1:before,.participant_list1:after
{
	display: inline-block;
	content: "";
	vertical-align: middle;
	height:1px;
	background-color: #686868;
	width:100%;margin:auto 0;
}
.participant_list2{display:flex;width:100%;justify-content:space-between;flex-wrap:wrap;}
.participant_list2>p{display:inline-block;width:33%;text-align:left;}
.confirm_btn{display:flex;width:100%;justify-content: space-around;}
.confirm_btn button{width:120px;border:none;}
.confirm_cancel{background-color:#7DF996;} .confirm_ok{background-color:#F8A1F7;}



.enroll_gp_tab{height:100%;position:relative; margin-top:10px;}
#enroll_group h3 {margin-top: 0;}
.gp_participant1{height:65%;}
.gp_participant1 p{text-align:left;font-size: 18px;} .gp_participant1 p:nth-child(3){color:#F9316A;}
#gp_participant2,.gp_participant3{height:100%;overflow: auto;}
#enroll_group input[type="password"],input[type="text"],input[type="password"]
{
	width:100%;
	height:50px;
	color:black;
	margin: 25px auto;
	border: none;
	border-radius: 10px;
}
#gp_participant2 p{
	width:100%;
	display:flex;
	padding:0 10px;
	justify-content: space-between;
}
.main_id{
	border: 1px solid white;
	border-radius: 10px;
	line-height: 46px;
}
#gp_participant2 p>span{
display: flex;
width:30%;
justify-content: flex-end;
}
.participant_heart1,.participant_heart2{cursor:pointer;}
#gp_participant2 p>span>span{cursor:pointer;}
.participant_heart1,.participant_heart2,.participant_heart1_1,.participant_heart2_1{background-color: transparent!important;}
.participant_heart1:before,.participant_heart1_1:before{content:"\f004";font-family:"Font Awesome 5 Free";display:inline-block;font-weight:900;font-size:28px;color:#ffb9dc;margin-left:25px;margin:2px 15px;}
.participant_heart2:before,.participant_heart2_1:before{content:"\f004";font-family:"Font Awesome 5 Free";display:inline-block;font-weight:900;font-size:28px;color:rgba(180,180,180,0.8); margin-left:25px;margin:2px 15px;}
.participant_delete:before{content:"\f2ed";font-family:"Font Awesome 5 Free";display:inline-block;font-weight:900;font-size:28px;color:#87FCC5;margin-left:25px;margin:2px 15px;}
.gp_add{background-color: transparent !important;}
.gp_add:before{content:"\f067";font-family:"Font Awesome 5 Free";display:inline-block;font-weight:900;font-size:42px;color:#07B484;}


.gp_participant3 div{width:90%;margin:10px auto;display:flex;justify-content:space-between;}
.gp_participant3 div:nth-child(2) span:before{content:"";display: inline-block;font-size: 42px;}
.gp_participant3 div input{display:inline-block;width:80%;margin-top: 0;}
.gp_participant3 div:last-child button{width:30%;padding:5px;margin:20px auto;}
.modal-dialog li:hover {color:#1392E0;cursor:pointer;}

#enroll_finish_tr table:after,#enroll_finish_pk table:after{
	display:block;
	content: "";
	height:50px;
}



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

2.(1)競賽 - 定時集合

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

/* 2.1 模式1(交易獲利) */

/* 2.2 模式2+3(答題) */
#contest {
	font-size: 24px;
}
#contest .container{flex-direction:column;}
.time_now{color:#73FFBA;}
.game_list p:first-child{text-align: center;margin-top:15px;}
/*.game_list table{border-spacing:2px !important;border-collapse: separate; }*/
.game_list table,.game_list tr{width:100%;}
.game_list table th,.game_list table td{/*width:40%;margin:10px;*/}
.game_list table,.game_list tr{width:100%;}
.game_list table td{align-self: center;align-items:center;padding:auto;}
.game_list tr{display:flex;margin-bottom:8px;}
.game_list table td:first-child,.game_list table th:first-child{width:40%;}
.game_list table td:nth-child(2),.game_list table th:nth-child(2){width:60%;}
.game_list table td:nth-child(2){padding:5px;}
/*.game_list tr:not(:first-child) td:not(:first-child){color:yellow;}*/

.time_now{font-size:20px;}
.time_now span{font-size:28px;}
.game_countdown,.game_countdown{
display:flex;
justify-content:center;
align-items:center;
width:95%;
min-height:70px;
margin:0 auto;
z-index: 500;
}

.game_title{
	font-size: 25px;
}
.game_entrance{
background-color:#E02B58;
color:#ffffff;
letter-spacing: 1px;
}
.countdown_available2{font-size:20px;display:flex;z-index:500;}

.game_entrance,.game_ongoing{
display: flex;
width:95%;
cursor:pointer;
font-size:20px;
border:none;
border-radius:5px;
justify-content:center;
align-self:center;align-items: center;
}
.game_entrance{height:72px;}


.game_ongoing1 .game_entrance{
background-color:#57BC8E;
color:#ffffff;
padding-top: 6px; padding-bottom: 6px;
}

.game_ongoing2 .game_entrance{
background-color:#57BC8E;
color:#ffffff;
}

.game_end .game_entrance{
	background-color: #81C9F9;
	color:#FFFFFF;		
}

.game_countdown a,.game_entrance a,.game_end a,.game_per a{
	display:flex;width:100%;color:#549175;align-self:center;align-items:center;justify-content:center;
}
.game_per a,.game_per a:visited{text-decoration:none;color:#ffffff;}

.game_ongoing a{color:#ffffff;}
.game_end,.game_end2{
	display:flex;
	width:95%;
	cursor:pointer;
	font-size:20px;
	border:none;
	border-radius:5px;
	justify-content:center !important;
/*	height:72px;*/
	background-color: #81C9F9;
	color:#FFFFFF;
	/*line-height:30px;*/
}


/*.game_ongoing button{
	background-color:#E55AA4;
	border:none;
}*/

.game_end,.game_end2{
/*	width:95%;*/
	display: flex;
	flex-direction:column;
	justify-content: center;
	text-align: center;
	align-content: center;
	align-items:center;
	align-self: center;
	margin:auto;
	min-height:60px;
	padding:auto;
}

.game_end.countdown_available{
	background:none;
	display: flex;
	flex-direction:column;
	justify-content: center;
	text-align: center;
	align-content:0 !important;	
}
/*.game_end p{
	background-color: #81C9F9;
	border-radius:5px;
	font-size: 22px;
	margin-top: 0;
}*/
.game_end a,.game_end a:visited,.game_end a:hover,.game_end a:active{
	color:white;
	width:100%;
}


.countdownclock{display:flex;justify-content:center;align-items: flex-end;margin-bottom:30px;}
.clock{width:60%;margin:0;}
.countdownclock audio{display:flex;width:40%; }

#play_1{background-color: transparent;border: none;margin:8px 10px;}
#play_1:before{content:"\f6a9";} #play_1.active:before{content:"\f027";}
#play_1:before,#play_1.active:before{
		display:block;
		font-family:"Font Awesome 5 Free";
		font-size:32px;color:#C3C1C1;
		font-weight:900;
		background-color: transparent;	
}


/* 作答區.game_ques (.ques1競賽資訊、 .ques2題目、 .ques3作答) */
.game_ques{
	display: flex;
	flex-direction: column;
	width:100%;
}
/* ques1 */
.ques1{display:none; width:100%; flex-wrap: wrap;justify-content:space-between;align-items: baseline;font-size:22px;}
.ques1>p{width:100%;}
.ques1>div{text-align:center;}.ques1>div:not(:first-child){width:37.5%;}
.ques1>div:first-child{text-align:left;width:26%;}.ques1>div:last-child{text-align:right;width:36%;}

/*.ques1>div:nth-child(odd){width:50%;}
.ques1>div:nth-child(even){width:50%;}*/



/* 作答頁面-「競賽資訊(ques1)與題目內容(ques2)固定 */
.ques2{display: flex;align-content: flex-start;}
.ques2_content{font-size:26px;}
.ques_top{width:100%;height:24%;overflow:hidden;position: absolute;top:0;}
.ques_top.fixed{position:fixed;top:21%;left:0;display:none;flex-direction:column;justify-content:flex-start;}
/* ques2 */
.ques2_content{background-color:#2C2C31;}
.ques3{position:relative;top:38%;height:58%;/*margin:auto 3px;*/}
/*作答頁面*/
.ques2_heading,.ques3_heading{text-align: center;color:#686868;font-size:16px;}
.ques2_heading:before,.ques2_heading:after,
.ques3_heading:before,.ques3_heading:after{
	display: inline-block;
	content: "";
	vertical-align: middle;
	height:1px;
	width:360px;
	background-color: #686868;
	margin:0 8px;
}
.opt_all{border: 1px solid white;}
.opt_all_y,.opt_all_n{
	background-color:#66b4d9;
	border-radius:6px;
}
.opt_all_y.selected,.opt_all_n.selected{font-weight: bold;background-color:red;}
.opt_y.selected,.opt_n.selected{font-weight: bold; box-shadow: 2px 2px 1px 1px rgba(182,187,214,0.3)  inset;}

.opt_all_y.selected2,.opt_all_n.selected2{font-weight: bold;background-color:red;}
.opt_y.selected2,.opt_n.selected2{color:red; font-weight: bold;}


.select_single>div{margin:5px 0;width:100vw;z-index:200;}
.select_single>div>p{margin-bottom:0;padding:3px;line-height:50px;}
.select_single>div:nth-child(even){
	background:linear-gradient(45deg, rgba(131,131,131,0.3) 0%, rgba(89,111,138,0.3) 100%);
}
.select_single>div:hover{background:linear-gradient(45deg, rgba(131,131,131,1) 0%, rgba(89,111,138,1) 100%);}
.select_all,.select_single,.select_all>div,.select_single>div{display:flex;width:100%;flex-wrap: wrap;justify-content:space-between;}
.select_single>div p:first-child,.select_all>div p:first-child{width:50%;}
.select_single>div p:not(:first-child),.select_all>div p:not(:first-child){width:24%;text-align: center;}
.select_single>div p:not(:first-child){border:1px solid rgba(89,111,138,0.3);}
.select_single>div:hover .opt_y,.select_single>div:hover .opt_n{border:1px solid rgba(131,131,131,0.8);}

/* 等待頁面 */
/* 等待頁面-顯示題目標的行情 */
.quote{
	height:17%;
	width:100%;
	position:fixed;
	display:none;
	right:0;
	top:6%;
	flex-wrap:wrap;
	z-index:500;
	color:white;
	background: linear-gradient(90deg, rgba(40,39,43,1) 0%, rgba(88,88,99,1) 50%, rgba(40,39,43,1) 100%);
	font-size: 18px !important;
}
.quote_per{
	height:100px;
	width:100%;
	position:relative;
	display:flex;
	right:0;
	top:0%;
	flex-wrap:wrap;
	z-index:500;
	color:white;
	background: linear-gradient(90deg, rgba(40,39,43,1) 0%, rgba(88,88,99,1) 50%, rgba(40,39,43,1) 100%);
	font-size: 18px !important;
}
.wait0{width:100%;display:flex;border-bottom:1px solid #999999;flex-wrap:wrap; }
.wait0_1,.wait0_1 p {width:100%;display: block;}
.wait0_1 p span:first-child{display:inline-block;width:48%;}.wait0_1 p span:not(first-child){display:inline-block;width:26%;}
.wait0_2{width:48%;}
.wait0_2 p:nth-child(1){/*font-family:"新細明體"*/;font-weight: lighter;color: #FFFFFF;	margin-bottom: 0;} 
.wait0_2 p:nth-child(2){
	display:flex;
	justify-content:space-between;
	margin-bottom:0;
	color:#999999;
	font-family: "Arial";
}
.wait0_2 p:nth-child(2) span{font-size:16px;}
.wait0_3,.wait0_4{width:26%;}
.wait0_1 span:first-child,.wait0_2 span:first-child,.w_date{padding-left:5px;} 
.wait{width:100%;margin-top:15%;z-index: 500;}



.wait2{display:flex;width:100%;flex-wrap:wrap;text-align:left;}
.wait2 p{width:100%;display:inline-block;}
.wait2 p:nth-child(even){background:linear-gradient(45deg, rgba(131,131,131,0.3) 0%, rgba(89,111,138,0.3) 100%);}
.wait2 p span:first-child{width:30%;display:inline-block;}
.wait2 p span:last-child{width:70%;display:inline-block;}
.wait3{display:flex;text-align: left;width:100%;align-items: center;} .wait3 span {display:inline-block;text-align: left;}

/* 等待頁面 end */


/* 解答頁面 */
.ans_correct,.ans_incorrect{width:100%;display:flex;flex-wrap:wrap;}
.ans_correct p,.ans_incorrect p{display:inline-block;width:100%;}
.ans_correct span,.ans_incorrect span{display:inline-block;width:20%;}

.typewriter1,.typewriter2,.typewriter3{display: inline-block;width:10px;}
.sol2,.sol3,.sol3_2,.sol4{text-align: left;}

/* 結果頁面(final round) */
.final_span2{display:flex;width:100%;flex-wrap:wrap;}
.final_span2>span{display:inline-block;width:25%;}


/*預備刪除*/
#message,#message2{overflow:hidden;color:white;}
#str2_1{height:86%;overflow:auto;padding:5px;border:1px solid #C2C2C2;}
#str2_id p,#str2_nop p{margin-bottom:0;}
#str2_txt1{color:#FAE277;}
/*.str2_id,#str2_nop{width:50%;}*/#str2_nop{float:left;}
.str2_ans{
	font-size:20px;
	width:100%;
	height:8%;
	position: fixed;
	bottom:8%;
	display:flex;
	justify-content:space-around;
	margin:10px auto;
	align-items: center;
}
.btn_modal{
	font-size:20px;
	width:90%;
	height:8%;
	position: fixed;
	bottom:0%;
	display:flex;
	justify-content:center;
	margin:10px 5%;
	align-items: center;
	color:white;
	background-color: #F65F8D;
	border:none;
	border-radius:5px;
}
.str2_ans .selected_opt{color:#FB53B6;border:1px solid #FB53B6;padding:5px;}
.str2_ans p{color:#35ADFF;padding:5px;font-size:26px;cursor: pointer;margin-bottom:0;} 
.str2_ans p:hover{border:1px solid #FB53B6;padding:5px;}
.str2_ans button{
	font-size:20px;
	background-color: #35ADFF;
	color:white;
	border:none;
	border-radius:5px;
	padding:5px;
}
.str2_ans_g,.str2_ans_all{
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.str2_ans_all{
	padding:15px;
	border-bottom: 1px solid #C6C6C6;
	margin-bottom:0;
}
.str2_ans_g{font-size:36px;padding:5px 15px;}

.str2_ans_g p:first-child,.str2_ans_all p:first-child{
	width:60%;margin-bottom: 0;
}
.str2_ans_g p:not(:first-child){margin:0 10px;}
.str2_ans_all p:not(:first-child){margin:0 5px;}

.str2_ans_g:nth-of-type(odd){
	background-color:#585858;
	color:white;
}
.str2_ans_g{padding-top:5px;}

.all_y,.all_n,.str2_opt_g{cursor: pointer;}
.str2_ans_g:hover{background-color:#7BB8FE;}
.str2_opt_g.active{
	color:#F41919;
	font-weight: bold;
}
.all_y,.all_n{border: 1px solid white;padding:5px;}
.all_y.active,.all_n.active{
	color:#F41919;
	font-weight: 900;
	border: 1px solid #F41919;	
}
#exampleModalLong2_sec{color:red;}
/*預備刪除*/



/* 20190411 revise */
.g_ans{
	font-size:20px;
	width:100%;
	height:43.5%;
	position: fixed;
	bottom:0%;
	padding-bottom:20px;
	justify-content:center;
	margin:10px 0;
/*	align-items: center;*/
	color:white;
/*	background-color: #4F4F4F;*/
	border:none;
	border-radius:5px;
	overflow: auto;
}

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

2.(2)競賽 - 時段區間(積分賽) #contest_p

*******************************************************/
/*.game_per .game_entrance{padding-top:6px; padding-bottom:6px;}*/
/* 比賽開始但尚未進場 */
.game_per_t .game_entrance{
	
/*	background-color:#57BC8E;
	background-color:#E02B58;*/
	padding-top:6px; padding-bottom:6px;
}
#contest_p main a,#contest_p main a:visited{color:#ffffff;}
#contest_p div{flex-direction:column;}
.flex1 span{display:flex;justify-content:space-around;}
.flex55,.flex23,.flex31{display:flex;justify-content:space-around;}
.flex55>p,.flex55>span,.flex55>button{display:flex;flex:1;margin:6px;justify-content:flex-start;align-self:center;}
.flex23>p:first-child,.flex23>span:first-child,.flex23>button:first-child{display:flex;flex:2;margin:6px;justify-content:flex-start;align-self:center;}
.flex23>p:last-child,.flex23>span:last-child,.flex23>button:last-child{display:flex;flex:3;margin:6px;justify-content:flex-start;align-self:center;}
.flex31>p:first-child,.flex31>span:first-child,.flex31>button:first-child{display:flex;flex:3;margin:6px;justify-content:flex-start;align-self:center;}
.flex31>p:last-child,.flex31>span:last-child,.flex31>button:last-child{display:flex;flex:1;margin:6px;justify-content:flex-start;align-self:center;}
.countdown{color:yellow;font-size:2em;}
.countdown2{color:yellow;font-size:1.2em;}
.qbody{justify-content:flex-start;padding:3px;}
#ans_y,#ans_n{display:flex;justify-content:center;color:#ffffff;font-size:1.3em;border:1px solid #D8D8D8;}
#ans_y.sel,#ans_n.sel{background-color:rgba(113,113,133,0.8);}
#ans_y.act,#ans_n.act{color:red;font-weight:bold;}
/*sec5 - 競賽結果*/
#contest_p #sec5 div{margin:16px auto;}
#contest_p #sec51{
	left:0;
	width:100%;
	height:50px;
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:1.1em;
}
#contest_p #sec51 + div,#contest_p #sec51 + p{
	margin-top:60px;"
}
#contest_p #sec51:before,#contest_p #sec51:after{
	display:inline-block;
	position: relative;
	top:-25px;
	content: "";
	width:calc((100% - 5em)/2);
	height:50px;
	border-bottom:#ffffff 2px solid;
	margin:0 5px;	
}
#contest_p .final_1 p,#contest_p .final_2 p,#contest_p .final_3 p{justify-content:space-around;}

/******************************************************
2.(2)競賽 - 時段區間(積分賽) END
*******************************************************/
/* revise bootstrap modal window */
#exampleModalLong2 .modal-header{
	display:flex !important;
	width:100%;
	padding:3px;
	margin:auto;
	justify-content: space-between;
}
#exampleModalLong2 .modal-title,#exampleModalLong2 .close{margin:auto 10px;} 
#exampleModalLong2_close{
	font-size: 42px !important;
	color:red !important;	
	background-color: transparent !important;
}
#exampleModalLong2 .modal-body{
	padding:0 !important;
}
.close{opacity:1 !important;}


/******************************************************
4.規則
*******************************************************/
.rule button{background-color:transparent;border: none;}
.rule{width:100vw;}
.rule1{padding-left:5px;float:left;display:block;width:90%;text-align:left;font-size:26px;font-weight:bold;margin:0;color:#c8e1e6;} 
.rule2{float:left;width:8%;font-size:16px;height:38px;color:#c8e1e6;}
.rule3{padding-left:5px;padding-right:10px;float:left;width:98%; text-align:left;display:none;font-size: 22px;color:white;}
.rule3 span{font-size:22px !important;}
.rule1,.rule2{margin-bottom:10px;}.rule3{margin-bottom:20px;}
.rule2::before{content:"\f13a"; font-family:"Font Awesome 5 Free";font-size:30px;display:inline-block;font-weight: 900;}
.rule2_invisible{float:left;width:8%;font-size:16px;height:38px;}
.rule2_invisible::before{float:left;content:"\f139";display:block;width:100%;height:38px; font-family:"Font Awesome 5 Free";font-size:30px;color:#ffb3db;font-weight:900;}  


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

4.成績

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

.tb_score,.tb_score2{width:100%;}
.td_score a,.td_score a:visited,.td_score a:hover{
	display:inline-block;
	width:100%;
	color:#ffffff;
	text-decoration-line: none;
	text-align:center;
}
.tb_score tr:first-child{
	border-bottom:1px solid #ffffff;
}
.tb_score tr td{line-height:60px;padding:0 3px;}.tb_score2 tr td{line-height:50px;padding:0 3px;}
.tb_score tr:nth-child(odd):not(:first-child),
.tb_score2 tr:nth-child(odd):not(:first-child):not(.grade){
	background:linear-gradient(45deg, rgba(131,131,131,0.3) 0%, rgba(89,111,138,0.3) 100%);
}
.tb_score tr td:first-child{width:60%;}.tb_score tr td:nth-child(2){width:40%;}

.tb_score2 tr td:first-child{width:24%;}
.tb_score2 tr td:nth-child(2){width:16%;}
.tb_score2 tr td:nth-child(3){width:60%;}
.tb_score2 th{text-align:left;font-size:20px;}

.score_win,.score_win_6,.score_win_71,.score_win_72,.score_win_73,.score_win_7n{
	display:inline-block;
	width:100%;
	color:#F9F273;
}
/* 奪冠-勝出 */
.score_win:before{
content:"\f521";display:block;width:100%;height:28px; font-family:"Font Awesome 5 Free";font-size:22px;color:#F9F273;font-weight:900;	
}
/* 達標-勝出 */
/*.score_win_6{background-color:#000000;}*/

.score_win_6:before{
/*content:"\f5a2";*/content:"\f005";display:block;width:100%;height:28px;font-family:"Font Awesome 5 Free";font-size:22px;color:#F9F273;font-weight:900;
}
/* 積分排名-名次 */
.score_win_71:before{
content:"\f005\f005\f005";display:block;width:100%;height:28px; font-family:"Font Awesome 5 Free";font-size:22px;color:#F9F273;font-weight:900;
}
.score_win_72:before{
content:"\f005\f005";display:block;width:100%;height:28px; font-family:"Font Awesome 5 Free";font-size:22px;color:#F9F273;font-weight:900;	
}
.score_win_73:before{
content:"\f005";display:block;width:100%;height:28px; font-family:"Font Awesome 5 Free";font-size:22px;color:#F9F273;font-weight:900;	
}
.score_win_7n:before{
content:"\f005";display:block;width:100%;height:28px; font-family:"Font Awesome 5 Free";font-size:22px;color:#E0E0E0;font-weight:900;	
}
/* footer */
footer{
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-around;
	width:100%;
	height:8%;
	z-index: 500;
	position: fixed;
	bottom:0;
	background-color: white;
}

footer a{
	width:30%;
	height:70%;
	margin:auto;
	text-align: center;
	font-weight: bold;	
	color:black;
	display: flex;
	justify-content: space-around;
	align-items: center;	
}

.footer_active,.footer_active:hover{
	background-color: #1175b3;
	color:white;
	border-radius:20px;
}

/***********************
	連線燈號
************************/
.red_light {
	color:#FF0000;
	cursor: pointer;
}
.green_light {
	color:#00bb00;
}

@media(max-width: 767px){
body{border:none;font-size:2.2rem;}
main{background-color: black;color:white;}
footer a{
	height:76%;	
	line-height:33px;
}

.container{display:flex;padding-left:5px;padding-right:5px;}
.footer_active,.footer_active:hover{
	border-radius:8px;
}
/*#enroll_personal_ga,#enroll_personal_tr,#enroll_personal_pk{
	top:0%;
}*/
#enroll_personal{height:100%;padding-top:30px;overflow: auto;}
.go-to-enroll_2 button{
	width:80%;
	margin-top:10px;
}

.participant_list2>p{width:50%;color:#77acff;font-size: 20px;}

/* 競賽列表 */
.list_container{height:80%;}
.countdown_available{height:56px !important;}
.game_entrance{height:100%;width:100%;padding-top:6px; padding-bottom:6px;}
.game_end,.game_end2{width:100%;}




/* 作答頁面-「競賽資訊(ques1)與題目內容(ques2)固定 */
.ques_top{height:35%;}
.ques_top.fixed{top:21%;height:30%;}
/*.ques2{position: relative;top:20%;height:200px;}*/
.ques3{
	top:54.5%;
	height:45%;
	margin-top:0;
	background: rgba(13,46,70,0.6);
	padding-left: 0;padding-right: 0;
}

/*#game1 .ques_top{height:48%;}
#game1 .ques_top.fixed{top:4%;height:48%;}
#game1 .ques3{top:4%;height:52%;margin-top:0;}*/

/*作答頁面*/
.ques2_heading:before,.ques2_heading:after,
.ques3_heading:before,.ques3_heading:after
{
	width:50px;
}
/*等待頁面*/
.wait{margin-top:30%;}
.participant_list1:before,.participant_list1:after
{
	width:100%;margin:auto 0;
}
/* 解答頁面 */
.ans_correct span,.ans_incorrect span{width:30%;}
/* 結果頁面(final round) */
.final_span2>span{width:50%;}

.rule{padding-top:20px;}
.rule1{width:75%;font-size:26px;} .rule2{width:25%;font-size:16px;} 
.rule2_invisible{width:25%;font-size:16px;}
.rule3{font-size:20px;}

}



@media(max-width: 376px){
.participant_list2>p{font-size: 19px;}
}

@media(max-width: 321px){

.participant_list2>p{font-size: 19px;}
}



/*  不同高度 */
@media(max-height: 824px){
	.quote{height:14%;}
}
/* iphone X */
@media(max-height: 813px){
	.quote{height:14%;}
}
/* iphone 6/7/8 plus */
@media(max-height: 737px){
	.quote{height:17%;}
}

/* iphone 6/7/8 */
@media(max-height: 669px){
	.quote{height:17%;}
}