.start_banner{
	text-align: center;
	position: relative;
	width: 100%;
	padding-bottom: 30%;
	background: rgb(159,214,201);
	background: -moz-linear-gradient(top, rgba(159,214,201,1) 0%, rgba(0,186,195,1) 100%);
	background: -webkit-linear-gradient(top, rgba(159,214,201,1) 0%,rgba(0,186,195,1) 100%);
	background: linear-gradient(to bottom, rgba(159,214,201,1) 0%,rgba(0,186,195,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9fd6c9', endColorstr='#00bac3',GradientType=0 );
	overflow: hidden;
}
.active_a_index_banner_bg_dolls{
	position: absolute;
	left: 37%;
	top:8%;
	width: 30%;
	padding-bottom: 23.84615%;
	background:url(active_a_index_banner_bg_dolls.png) center top no-repeat;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
	z-index: 3;
	animation:active_a_index_banner_bg_dolls 5s infinite linear;
	-webkit-animation:active_a_index_banner_bg_dolls 5s infinite linear;
}
.active_a_index_banner_bg_earth{
	position: absolute;
	top:-32%;
	width:100%;
	padding-bottom:100%;
	background:url(active_a_index_banner_bg_earth.png) center no-repeat;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	z-index: 2;
	animation:rotate_bg 60s infinite linear;
	-webkit-animation:rotate_bg 60s infinite linear;
}
.active_a_index_banner_bg_cloud{
	position: absolute;
	top:-32%;
	width:100%;
	padding-bottom:100%;
	background:url(active_a_index_banner_bg_cloud.png) center no-repeat;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	z-index: 1;
	animation:rotate_bg 90s infinite linear;
	-webkit-animation:rotate_bg 90s infinite linear;
}
@-webkit-keyframes rotate_bg {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(-360deg);
	}
}
@keyframes rotate_bg {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(-360deg);
	}
}
@-webkit-keyframes active_a_index_banner_bg_dolls{
  0%{top:8%;}
  50%{top:15%;}
}
@keyframes active_a_index_banner_bg_dolls{
  0%{top:8%;}
  50%{top:15%;}
}
@media screen and (max-width:1200px) {
	.start_banner{
		min-height: 360px;
	}
}
@media screen and (max-width:900px) {
	.start_banner{
		min-height: 300px;
	}
}
@media screen and (max-width:640px) {
	.active_a_index_banner_bg_dolls{
		left: 33%;
		width: 40%;
		padding-bottom: 47.6%;
	}
}
@media screen and (max-width:480px) {
	.start_banner{
		min-height: 260px;
	}
}
/***********/
.start_banner2{
	text-align: center;
	position: relative;
	width: 100%;
	padding-bottom: 30%;
background: rgb(76,191,211);
background: -moz-linear-gradient(top, rgba(76,191,211,1) 0%, rgba(29,103,153,1) 100%);
background: -webkit-linear-gradient(top, rgba(76,191,211,1) 0%,rgba(29,103,153,1) 100%);
background: linear-gradient(to bottom, rgba(76,191,211,1) 0%,rgba(29,103,153,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cbfd3', endColorstr='#1d6799',GradientType=0 );
	overflow: hidden;
}
.active_b_index_banner_bg_doll_1{
	position: absolute;
	left: 48%;
	top:16%;
	width: 30%;
	padding-bottom: 23.84615%;
	background:url(img_block_b_002.png) center top no-repeat;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
	z-index: 4;
/*	animation:active_b_index_banner_bg_doll_1 10s infinite ease-in-out;
	-webkit-animation:active_b_index_banner_bg_doll_1 10s infinite ease-in-out;*/
}
@-webkit-keyframes active_b_index_banner_bg_doll_1 {
	0%{left:40%;}
	50%{left:66%;}
	100%{left:40%;}
}
@keyframes active_b_index_banner_bg_doll_1 {
	0%{left:40%;}
	50%{left:66%;}
	100%{left:40%;}
}
.active_b_index_banner_bg_doll_2{
	position: absolute;
	left: 64%;
	top:8%;
	width: 30%;
	padding-bottom: 23.84615%;
	background:url(img_block_b_001.png) center top no-repeat;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
	z-index: 3;
/*	animation:active_b_index_banner_bg_doll_2 10s infinite ease-in-out;
	-webkit-animation:active_b_index_banner_bg_doll_2 10s infinite ease-in-out;*/
}
@-webkit-keyframes active_b_index_banner_bg_doll_2 {
	0%{left:66%;}
	50%{left:40%;}
	100%{left:66%;}
}
@keyframes active_b_index_banner_bg_doll_2 {
	0%{left:66%;}
	50%{left:40%;}
	100%{left:66%;}
}
.active_b_index_banner_bg_knowledge{
	position: absolute;
	left: 12%;
	top:12%;
	width: 30%;
	padding-bottom: 23.84615%;
	background:url(active_b_index_banner_bg_knowledge.png) center top no-repeat;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
	z-index: 2;
}
.active_b_index_banner_bg_wave{
	position: absolute;
	left:0%;
	top:10%;
	width: 300%;
	padding-bottom:20%;
	background:url(active_b_index_banner_bg_wave.png) repeat-x;
	background-position: 0% top;
	-moz-background-size: auto 100%; -webkit-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100% ;
	animation:active_b_index_banner_bg_wave 60s infinite linear;
	-webkit-animation:active_b_index_banner_bg_wave 60s infinite linear;
}
@-webkit-keyframes active_b_index_banner_bg_wave {
	0%{left:0%;}
	50%{left:-200%;}
	100%{left:0%;}
}
@keyframes active_b_index_banner_bg_wave {
	0%{left:0%;}
	50%{left:-200%;}
	100%{left:0%;}
}

@media screen and (max-width:1200px) {
	.start_banner2{
		min-height: 360px;
	}
}
@media screen and (max-width:1200px) {
	.start_banner2{
		min-height: 300px;
	}
	.active_b_index_banner_bg_knowledge{
		position: absolute;
		left: -5%;
		top:5%;
		width: 50%;
		padding-bottom: 50%;
	}
	.active_b_index_banner_bg_doll_1{
		top:2%;
		width: 45%;
		padding-bottom: 35.84615%;
	}
	.active_b_index_banner_bg_doll_2{
		top:2%;
		left:73%;
		width: 40%;
		padding-bottom: 30%;
	}
}
@media screen and (max-width:640px) {

}
@media screen and (max-width:480px) {
	.start_banner2{
		min-height: 260px;
	}
}
/**********************************************************************************************************************************/
.active_button {
	position: absolute;
	z-index: 9;
	bottom: 6%;
	left:calc(50% - 140px);
	font-size: 1.5em;
	text-align: center;
	display:inline-block;
	width: 280px;
	padding: 8px;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(41, 128, 171, 0.7);
	cursor: pointer;
	font-weight: bold;
	transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -webkit-border-radius:26px; -moz-border-radius:26px; border-radius:26px;
  -webkit-animation: attention 5s ease infinite;
          animation: attention 5s ease infinite;
}
.active_button .button_label{
	width: 100%;
	font-size: 0.85em;
	color: #FFFE01;
	display: block;
  transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: attention 2.5s ease infinite;
          animation: attention 2.5s ease infinite;
}
.active_button:hover{border: 2px solid #FF6600; background:#ff0066;}
@-webkit-keyframes attention {
  9% {
    -webkit-transform: none;
            transform: none;
  }
  12% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  16% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  20% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  24% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes attention {
  9% {
    -webkit-transform: none;
            transform: none;
  }
  12% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  16% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  20% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  24% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/******************************************************************************/
/*活動辦法*/
.area_active{
	clear:both;
	width:100%;
	padding:10px 0;
	overflow:hidden;
}
.area_active .column{
	clear:both;
	position:relative;
	width:100%;
	margin:0 auto;
	text-align:center;
	letter-spacing:-5px;
}
.area_active .column .box{
	display:inline-block;
	width:15%;
	max-width: 200px;
	padding:0 1%;
	margin:0 -1px 0 0;
	border-left:1px dashed #CCC;
	border-right:1px dashed #CCC;
	overflow:hidden;
	border-bottom:2px solid #FEFDFB;
}
.area_active .column .box.sel{
	border-bottom:2px solid #009bdb;
	background: #ececec;
}
.area_active .column .box .title{
	font-size:1.2em;
	font-weight: bold;
	margin:8px 0 8px 0;
	letter-spacing:0px;
}
.area_active .column .box .title a{
	color:#333;
}
.area_active .column .box .title a:hover,
.area_active .column .box.sel .title a{
	color:#009bdb;
}
.area_active .column .box .pic{
	width:100%;
}
.area_active .column .box .pic img{
	width:100%;
	-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
	overflow: hidden;
}
@media screen and (max-width:1200px) {
	.area_active .column .box{
		width:30%;
		max-width:none;
	}
}
@media screen and (max-width:680px) {
	.area_active .column{
		max-width:98%;
	}
	.area_active .column .box{
		width:50%;
		margin:0 -1px 10px 0;
	}
}

/******************************************************************************/
.active_rank_link{
	clear:both;
	text-align:center;
	margin:0 auto;
	padding:10px 0 0 0;
	width:100%;
	max-width:1000px;
}
.active_rank_link .rank_link_button{
	display:inline-block;
	padding:10px;
	width:300px;
	height:40px;
	background:#FF9;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	border-bottom:2px solid #FC0;
	transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
}
.active_rank_link .rank_link_button:hover{
	position:relative;
	top:2px;
	border-bottom:none;
	background:#Fc0;
}
.active_rank_link .rank_link_button a{
	position:relative;
	top:-13px;
	font-size:1.2em;
	font-weight: bold;
	color:#000;
}
.rank_link_button img{
	position:relative;
	top:8px;
	margin:0 8px 0 0;
}
/******************************************************************************/
.HTML_info_active{
	clear:both;
	width:100%;
	font-size: 1.1em;
	line-height: 1.5em;
	margin:0 0 20px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #ccc;
}
.HTML_info_active a{color:#009bdb;}
.HTML_info_active a:hover{border-bottom: 1px dashed #009bdb;}
.HTML_info_active .main_title_column{border-bottom: 0px dashed #CCCCCC;}
.HTML_info_active border,
.HTML_info_active border img,
.HTML_info_active img,
.HTML_info_active iframe{
	max-width:100% !important;
}
.HTML_info_active ol.f{
	counter-reset: section;  
	list-style-type: decimal;
	padding-inline-start: 25px;
}
.HTML_info_active ol>li{
	margin:0 0 12px 0px;
	list-style:decimal;
	border-bottom:1px dashed #ccc; 
}
.HTML_info_active h2{
	font-size:1.6em;
	color:#390;
}
.HTML_info_active th{
	text-align:center;
	color:#FFF;
	background:#669900;
}
/*lv sec*/
.ul_sec{
	counter-reset: section;  
}
.ul_sec .li_sec{
	list-style: none;
  position: relative;
}
.ul_sec > .li_sec:before {
 content: "(";
 position: absolute;
 left: -1.6em;
}
.ul_sec > .li_sec:after {
	counter-increment: section;   
	content: counter(section) ") ";
	letter-spacing: 2px;
	position: absolute;
	top:0;
	left:-1.2em;
}
/*lv third*/
.ul_third{
	counter-reset: section;  
}
.ul_third .li_third{
	list-style: none;
  position: relative;
  left: -2.5em;
  font-size:0.9em;
  border-bottom: 0px solid #666;
  list-style: none;
  color: #85440e;
}
/******************************************************************************/
/*option_column*/
.option_column{
	clear:both;
	width:100%;
	text-align:center;
	margin:20px 0 0 0;
}
/*button_joinnow*/
.button_joinnow{
	transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
	display:inline-block;
	width:160px;
	height:160px;
	background:url(button_join_0.png) no-repeat;
	background-size:160px;
	margin:0 auto;
	cursor:pointer;
}
.button_joinnow:hover{
	background:url(button_join_1.png) no-repeat;
	background-size:160px;
}
/*button_play*/
.button_play{
	transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
	display:inline-block;
	width:160px;
	height:160px;
	background:url(button_play_0.png) no-repeat;
	background-size:160px;
	margin:0 auto;
	cursor:pointer;
}
.button_play:hover{
	background:url(button_play_1.png) no-repeat;
	background-size:160px;
}
/*LOGIN*/
.button_login{
	width:100%;
	text-align:center;
	display:block;
	font-size:1.2em;
	margin:20px 0 0 0;
}
.button_login a{
	position:relative;
	transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
	color:#39c;
	border-bottom:1px dashed #39c;
	top:0;
}
.button_login a:hover{
	top:-2px;
}
/******************************************************************************/
/*rank*/
.rank_list{
	clear:both;
	padding:26px 0 0 0;
	width:100%;
}
.rank_list ul.tabs2 {
	width:100%;
	text-align:center;
	margin:0 auto 10px auto;
}
/*tab*/
.rank_list ul.tabs,
.rank_list ul.tabs2 {
	width:100%;
	text-align:center;
	margin:0 auto 10px auto;
}
.rank_list ul.tabs li,
.rank_list ul.tabs2 li {
	display:inline-block;
	line-height: 15px;
	font-size:1em;
	height:23px;
	margin:0 10px 0 10px;
}
.rank_list ul.tabs li a,
.rank_list ul.tabs2 li a {
	display: block;
	padding: 0 2px;
	color: #777;
	text-decoration: none;
}
.rank_list ul.tabs li a:hover,
.rank_list ul.tabs2 li a:hover{
	color:#222;
}
.rank_list ul.tabs li.active,
.rank_list ul.tabs2 li.active{
	color:#F00;
	font-size: 1.2em;
	/*background:url(icon_delta_down.png) no-repeat center bottom;*/
}
.rank_list ul.tabs li.active a,
.rank_list ul.tabs2 li.active a{
	color:#F00;
}
div.tab_container{
	clear: left;
	width:100%;
	max-width: 640px;
	text-align:left;
	padding:0;
	margin:0 auto;
}
div.tab_container .tab_info{
	padding:0;
	overflow:hidden;
}
div.tab_container .tab_info .box{
	clear:both;
	font-size:1em;
	line-height:39px;
	height:39px;
	margin:0px 20px 1px 60px;
}
div.tab_container .tab_info .box .member_name{
	float:left;
	width:36%;
	font-size: 1.2em;
	text-align:left;
}
div.tab_container .tab_info .box .info{
	float:right;
	width:60%;
	font-size: 1.2em;
}
div.tab_container .tab_info .box{
	clear:both;
	background:#dee6ea;
	line-height:45px;
	height:45px;
	width:100%;
	margin:0 auto 2px auto;
}
div.tab_container .tab_info .box1{
	background:url(icon_rank_a_1.png) no-repeat 5px 7px #ffe498;
}
div.tab_container .tab_info .box1b{
	background:url(icon_rank_b_1.png) no-repeat 5px 7px #ffe498;
}
div.tab_container .tab_info .box2{
	background:url(icon_rank_a_2.png) no-repeat 5px 7px #cccccc;
}
div.tab_container .tab_info .box2b{
	background:url(icon_rank_b_2.png) no-repeat 5px 7px #cccccc;
}
div.tab_container .tab_info .box3b{
	background:url(icon_rank_b_3.png) no-repeat 5px 7px #ffce9d;
}
div.tab_container .tab_info .box3{
	background:url(icon_rank_a_3.png) no-repeat 5px 7px #ffce9d;
}
div.tab_container .tab_info .box4{
	background:url(icon_rank_a_4.png) no-repeat 5px 7px #f4f4f4;
}
div.tab_container .tab_info .box4b{
	background:url(icon_rank_a_4.png) no-repeat 5px 7px #f4f4f4;
}
div.tab_container .tab_info .box5{
	background:url(icon_rank_a_5.png) no-repeat 5px 7px #f4f4f4;
}
div.tab_container .tab_info .box5b{
	background:url(icon_rank_a_5.png) no-repeat 5px 7px #f4f4f4;
}
div.tab_container .tab_info .box .member_name{
	float:left;
	width:25%;
	text-align:left;
	margin:0 0 0 45px;
}
.exam_scores_list p{
  margin-block-start: 0em;
  margin-block-end: 0em;
}
/******************************************************************************/
.stage_column{width: 100%; text-align: center;}
.stage_column .stage_box{
	position: relative;
	display: inline-block;
	width: 9.6%;
}
@media screen and (max-width:1200px) {
	.stage_column .stage_box{
		width: 13%;
	}
}
@media screen and (max-width:800px) {
	.stage_column .stage_box{
		width: 18%;
	}
}
.stage_column .stage_box a{
	display: block;
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	background: url(exam_stage_bg.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	-webkit-border-radius:20%;	-moz-border-radius:20%; border-radius:20%;
	border: 4px solid #ccc;
	text-align: center;
}
.stage_column .stage_box a.lock{
	background: url(exam_stage_bg_lock.png) center;
}
.stage_column .stage_box a .num{
	position:absolute;
	font-family: 'Sriracha', cursive;
	width: 100%;
	font-size: 2.2em;
	font-weight: bold;
	color: #fff;
	top:-6%;
}
.stage_column .stage_box a .num.color2{color: #FFCE03;}
@media screen and (max-width:800px) {
	.stage_column .stage_box a .num{
		font-size: 1.8em;
	}
}
@media screen and (max-width:500px) {
	.stage_column .stage_box a .num{
		font-size: 1.4em;
		top:-6%;
	}
}
@media screen and (max-width:380px) {
	.stage_column .stage_box a .num{
		top:-10%;
	}
}
.stage_column .stage_box a .icon_column{
	position:absolute;
	width: calc(100% + 0px);
	top:-4%;
}
.stage_column .stage_box a .icon_column .star_1_1{
	display: inline-block;
	background: url(icon_star_1_1.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	width: 100%;
	padding-bottom: 100%;;
}
.stage_column .stage_box a .icon_column .star_1_0{
	display: inline-block;
	background: url(icon_star_1_0.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	width: 100%;
	padding-bottom: 100%;
}
.stage_column .stage_box a .icon_column .star_2_1{
	display: inline-block;
	background: url(icon_star_2_1.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	width: 100%;
	padding-bottom: 100%;;
}
.stage_column .stage_box a .icon_column .star_2_0{
	display: inline-block;
	background: url(icon_star_2_0.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	width: 100%;
	padding-bottom: 100%;
}
.stage_column .stage_box a .icon_column .star_3_1{
	display: inline-block;
	background: url(icon_star_3_1.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	width: 100%;
	padding-bottom: 100%;;
}
.stage_column .stage_box a .icon_column .star_3_0{
	display: inline-block;
	background: url(icon_star_3_0.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	width: 100%;
	padding-bottom: 100%;
}
.stage_column .stage_box a .icon_column .lock{
	display: inline-block;
	background: url(icon_lock.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	width: 100%;
	padding-bottom: 100%;
}
.stage_column .stage_box a .icon_column .play{
	position: absolute;
	z-index: 2;
	display: inline-block;
	background: url(icon_play.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	width: 100%;
	padding-bottom: 100%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: attention2 1s ease infinite;
          animation: attention2 1s ease infinite;
}
@-webkit-keyframes attention2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes attention2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.stage_column .stage_box a .score{position: absolute; bottom:2px; width: 100%; color: #fff; font-size: 0.8em;}
.stage_column .stage_box a .score_only{
	position: absolute; top:40%; width: 100%; color: #fff; font-size: 1.2em; line-height: 1.4em;
	line-height: 1em;
	font-weight: bold;
}
.stage_column .stage_box a .score_only span.title{font-size: 0.86em;}
.stage_column .stage_box a .play2{
	position: absolute;
	right:12%;
	z-index: 2;
	display: inline-block;
	background: url(icon_play.png) center;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	width: 100%;
	padding-bottom: 100%;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: attention2 1s ease infinite;
          animation: attention2 1s ease infinite;
}
/******************************************************************************/
.exam_stage_title{color: #2a74c3; font-size: 1.2em; text-align: center;}
.exam_show_quest{
	background: #ececec;
	border: 1px solid #aaa;
	-webkit-border-radius:10px;	-moz-border-radius:10px; border-radius:10px;
	padding: 10px;
	margin: 0 0 10px 0;
	overflow: hidden;
}
.exam_button {
    width: 100%;
    text-align: center;
}
.form_button_quest{
	line-height:50px;
	font-size:1.3em;
	display:inline-block;
	background-color:#04848F;
	width:80%;
	max-width: 240px;
	color:#fff;
	border:none;
	margin:10px auto 0 auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-appearance:none;
}
.form_button_quest:hover{
	background-color:#31B6E9;
	color:#fff;
	cursor:pointer;
	position:relative;
}
/******************************************************************************/
/*exam_qa*/
.ans_correct{
	background: #00abff; 
	width: 20px; 
	height: 20px; 
	color: #fff; 
	font-weight: bold;
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	text-align: center;
	padding: 0 4px 0 5px;
	margin: 0 3px 0 0;
}
.ans_correct:after{
	content: "Ｏ";
}
.ans_wrong{
	background: #ff0074; 
	width: 20px; 
	height: 20px; 
	color: #fff; 
	font-weight: bold;
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	text-align: center;
	padding: 0 4px 0 5px;
	margin: 0 3px 0 0;
}
.ans_wrong:after{
	content: "Ｘ";
}
.column2{
  float:left;
	width:45%;
	margin: 0 4% 20px 0;
	overflow: hidden;
}
.column3{
  float:left;
	width:45%;
	margin: 0 4% 20px 0;
	overflow: hidden;
}
@media screen and (max-width:680px) {
	.column2{
		float:left;
		width:100%;
	}
	.column3{
		float:left;
		width:100%;
	}
}
.ans_sub_title{padding: 0; margin: 0; width: 100%; font-weight: bold;}
.radio_group{
	width: 100%;
	clear: both;
}
.exam_show_quest .exam_radio{
	vertical-align: top;
	position: relative;
	width: 30px;
	display: inline-block;
}
.exam_show_quest .exam_answer{
	vertical-align: top;
	position: relative;
	width: calc(100% - 40px);
	font-size: 1.2em;
	padding: 2px 2px 2px 0;
	display: inline-block;
}
.correct_sel{font-weight: bold; color:#0082ca;}
.memo_column{width: 100%; overflow: hidden; clear: both; float: left; padding: 6px; background: rgba(0,0,0,0.1);-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
/******************************************************************************/
/* 2091006 活動3 */
.table_time{background: #eee; text-align: center;}
.table_time tr td{line-height: 2.6em;}
.table_time tr:nth-child(odd){background: #ddd;}

/**********************************************************************************************************************************/
.start_banner3{
	text-align: center;
	position: relative;
	width: 100%;
	padding-bottom: 30%;
	background: #fef7ed;
	background: -moz-linear-gradient(top,  #fef7ed 1%, #fcddb3 100%);
	background: -webkit-linear-gradient(top,  #fef7ed 1%,#fcddb3 100%);
	background: linear-gradient(to bottom,  #fef7ed 1%,#fcddb3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef7ed', endColorstr='#fcddb3',GradientType=0 );
	overflow: hidden;
}
.active3_button {
	position: absolute;
	z-index: 9;
	bottom: 6%;
	left:calc(50% - 140px);
	font-size: 1.6em;
	text-align: center;
	display:inline-block;
	width: 280px;
	padding: 8px;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(41, 128, 171, 0.7);
	cursor: pointer;
	font-weight: bold;
	transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -webkit-border-radius:26px; -moz-border-radius:26px; border-radius:26px;
  -webkit-animation: attention 5s ease infinite;
          animation: attention 5s ease infinite;
}
.active3_button .button_label{
	width: 100%;
	font-size: 0.9em;
	color: #FFFE01;
	display: block;
  transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: attention 2.5s ease infinite;
          animation: attention 2.5s ease infinite;
}
.active3_button:hover{border: 2px solid #FF6600; background:#ff0066;}
@-webkit-keyframes attention {
  9% {
    -webkit-transform: none;
            transform: none;
  }
  12% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  16% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  20% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  24% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes attention {
  9% {
    -webkit-transform: none;
            transform: none;
  }
  12% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  16% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  20% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  24% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/**************/
.active3_button_column {
	position: absolute;
	left: 0;
	z-index: 9;
	bottom: 6%;
	font-size: 1.6em;
	text-align: center;
	display:inline-block;
	width: 100%;
	padding: 8px;
  color: #0d6965;
}
.active3_button_column .title{
	color: #fff;
	font-weight: bold;
	font-size:1.2em;
	display: block;
	clear: both;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.66);
	text-shadow: -3px 0 rgba(67, 130, 144, 0.66), 0 3px rgba(67, 130, 144, 0.66), 3px 0 rgba(67, 130, 144, 0.66), 0 -3px rgba(67, 130, 144, 0.66);
	margin: 0 0 10px 0;
}
.active3_button_sub {
	display: inline-block;
	font-size: 1em;
	text-align: center;
	display:inline-block;
	width: 200px;
	padding: 8px;
	margin: 0 0 5px 0;
  color: #FFFE01;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(41, 128, 171, 0.7);
	cursor: pointer;
	font-weight: bold;
	transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
  -webkit-animation: attention 5s ease infinite;
          animation: attention 5s ease infinite;
}
.active3_button_sub:hover{border: 2px solid #FF6600; background:#ff0066;}
/**************/
.active_c_index_banner_bg_group_back{
	position: absolute;
	left:23%;
	top:5%;
	width: 70%;
	padding-bottom: 30%;
	background:url(active_c_index_banner_bg_group_back.png) center top no-repeat;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
	z-index: 2;
	animation:active_c_back 10s infinite linear;
	-webkit-animation:active_c_back 10s infinite linear;
}
.active_c_index_banner_bg_group_front{
	position: absolute;
	right:8%;
	top:47%;
	width:40%;
	padding-bottom:15%;
	background:url(active_c_index_banner_bg_group_front.png) center no-repeat;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
	z-index: 4;
	animation:active_c_front 10s infinite ease;
	-webkit-animation:active_c_front 10s infinite ease;
}
.active_c_index_banner_bg_group_front2{
	position: absolute;
	left:14%;
	top:40%;
	width:25%;
	padding-bottom:17%;
	background:url(active_c_index_banner_bg_group_front2.png) center no-repeat;
	-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; background-size: contain;
	z-index: 4;
	animation:active_c_front_b 10s infinite ease;
	-webkit-animation:active_c_front_b 10s infinite ease;
}
.active_c_index_banner_bg_bottom{
	position: absolute;
	bottom:-17%;
	width:100%;
	padding-bottom:15%;
	background:url(active_c_index_banner_bg_bottom.png) center no-repeat;
	-moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;	background-size: cover;
	z-index: 3;
}
/*effect*/
@-webkit-keyframes active_c_back{
	0%{transform: rotate(0deg);}
	25%{transform: rotate(-3deg);}
	50%{transform: rotate(0deg);}
	75%{transform: rotate(3deg);}
	100%{transform: rotate(0deg);}
}
@keyframes active_c_back{
	0%{transform: rotate(0deg);}
	25%{transform: rotate(-3deg);}
	50%{transform: rotate(0deg);}
	75%{transform: rotate(3deg);}
	100%{transform: rotate(0deg);}
}

@-webkit-keyframes active_c_front{
  0%{top:47%;right:8%;}
  50%{top:47%;right:4%;}
}
@keyframes active_c_front{
  0%{top:47%;right:8%;}
  50%{top:47%;right:4%;}
}

@-webkit-keyframes active_c_front_b{
  0%{top:40%;left:14%;}
  50%{top:40%;left:19%;}
}
@keyframes active_c_front_b{
  0%{top:40%;left:14%;}
  50%{top:40%;left:19%;}
}

@media screen and (max-width:1200px) {
	.start_banner3{
		min-height: 360px;
	}
	.active_c_index_banner_bg_bottom{
		bottom:-12%;
	}
}
@media screen and (max-width:1100px) {
	.active_c_index_banner_bg_group_back{
		left: 2%;
		width: 90%;
		padding-bottom: 40%;
		animation: none !important;
		-webkit-animation: none !important;
	}

	.active_c_index_banner_bg_group_front{
		width:70%;
		padding-bottom:28%;
		right:-10%;
		top:18%;
		animation: none !important;
		-webkit-animation: none !important;
	}
	.active_c_index_banner_bg_group_front2{
		width: 36%;
		padding-bottom: 25%;
		left: 2%;
		top:25%;
		animation: none !important;
		-webkit-animation: none !important;
	}

}

@media screen and (max-width:1000px) {
	.active_c_index_banner_bg_group_front{
		top:28%;
	}
}

@media screen and (max-width:900px) {
	.start_banner3{
		min-height: 300px;
	}
	.active_c_index_banner_bg_bottom{
		display: none;
	}
	.active_c_index_banner_bg_group_front2{
		width:20%;
		padding-bottom:18%;
		left: 14%;
		top:50%;
		animation: none !important;
		-webkit-animation: none !important;
	}
}

@media screen and (max-width:800px) {
	.active_c_index_banner_bg_group_back{
		width: 100%;
		padding-bottom: 50%;
		top:15%;
		left: -12%;
	}
	.active_c_index_banner_bg_group_front{
		width:80%;
		padding-bottom:35%;
		right:-15%;
		top:20%;
	}
	.active_c_index_banner_bg_group_front2{
		width:20%;
		padding-bottom:18%;
		left: 4%;
		top:60%;
		animation: none !important;
		-webkit-animation: none !important;
	}
}
@media screen and (max-width:600px) {
	.start_banner3{
		min-height: 260px;
	}
	.active_c_index_banner_bg_group_back{
		width: 120%;
		padding-bottom: 80%;
		top:15%;
		left: -20%;
	}
	.active_c_index_banner_bg_group_front{
		width:100%;
		padding-bottom:40%;
		right:-25%;
		top:30%;
	}
}
@media screen and (max-width:480px) {
	.active_c_index_banner_bg_group_back{
		width: 200%;
		padding-bottom: 80%;
		top:10%;
		left: -55%;
		z-index: 6
	}
	.active_c_index_banner_bg_group_front{
		width:100%;
		padding-bottom:50%;
		right:-18%;
		top:20%;
	}
	.active_c_index_banner_bg_group_front2{
		display: none;
	}
}
/******************************************************************************/
/*20220310*/
.start_banner.start_banner_20220310a{
  background-image: url("active_top_bg.png");
  background-position: center;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
.start_banner2.start_banner_20220310b{
  background-image: url("active2_top_bg.png");
  background-position: center;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
@media screen and (max-width:440px) {
  .start_banner,
  .start_banner2{
    min-height: 220px;
  }
}
/******************************************************************************/
/*20220315*/
.exam_scores_list{
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3,1fr);
}
@media screen and (max-width:800px) {
  .exam_scores_list{
    grid-template-columns: repeat(2,1fr);
  }
}
@media screen and (max-width:560px) {
  .exam_scores_list{
    grid-template-columns: repeat(1,1fr);
  }
}
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/