@charset "big5";

/* --------------------------------------
 * jquery-quiz v0.0.1
 * -------------------------------------- */
.Area_quizbox { position:relative;display:table;width:740px; height:256px;top:220px;left:-10px; margin:0 auto; overflow:hidden;}
.Area_quiz { display:block;position: relative; width:600px; height:auto; padding-top:0px; overflow:hidden; margin:0 auto; text-align: center ;color:#FFFFFF;  vertical-align:middle; display:table-cell; } 
.Area_quiz #quiz-results, .Area_quiz .question { font-size: 1.2em; font-weight:bold; color: #dec48a; }
.Area_quiz #quiz-gameover-screen, .Area_quiz .question { font-size: 1.2em; font-weight:1; color: #C8C8C8; }
@media screen and (max-width:767px){
	.Area_quizbox { position:relative;top:0vw;left:0vw;display:block;width:100%;height:auto;margin:0 auto;overflow:hidden;background-image:url(mo_qabg01.png?t=1750152923489); background-repeat:repeat-y; background-size:100%;}
	.Area_quiz { display:block;  width:85%; padding-top:0px;  overflow:hidden; margin:0 auto; text-align: center ; } 
.Area_quiz #quiz-results, .Area_quiz .question { font-size: 1.2em; font-weight:bold; }

		}
		
.Area_quiz .quiz-container { padding: 1em;  max-width: 100%; margin: 1em auto;}

/*����*/
.Area_quiz .answers { list-style: none; padding: 0; }
.Area_quiz .answers a { display: block; padding: .5em 1em; margin-bottom: .5em;font-size: 1.2em;  font-weight:bold; color:#333; background: #fff; border-radius: 10px;}
.Area_quiz .answers a.correct {  position: relative; color: #fff; background: #090;}
.Area_quiz .answers a.incorrect {  position: relative; color: #fff; background: #c00;}
.Area_quiz .answers ul{ background: #1880b5; }

/*���׹��*/
.answers a.correct:before, .answers a.incorrect:before {  display:block; position:absolute; top:0; left:.5em; width:1.5em; height:1.5em; font:bold 1.5em/1.5em "Century Gothic"; color:#FFF;}
.answers a.correct:before { content:'O'; }
.answers a.incorrect:before { content:'X'; }
#quiz-gameover-response p{font-size: 1.2em;  font-weight:bold; }

/*���s*/
.Area_quiz  a { text-decoration: none; }
.Area_quiz p a { padding: .5em 1em; background: #333; color: #fff; border-radius: 10px;}
#quiz-buttons #quiz-next-btn, #quiz-buttons #quiz-finish-btn { background: #fff;  color: #333;}
#quiz-buttons a, #quiz-controls, .quiz-container .quiz-button{ padding: .5em 1em;  /*background: #333;*/  color: #fff; border-radius: 10px;}
#quiz-buttons a, .quiz-container .quiz-button .quiz-start{ display: inline-block;}

.quiz-start{ padding: 1.5em 4em; vertical-align:middle; display:table-cell;  background: repeating-linear-gradient(90deg, rgb(145, 124, 73) -1%, rgb(187, 155, 79) 101%);  color: #fff; border-radius: 10px; font-size:28px; text-align:center;  font-family:"�L�n������","Microsoft JhengHei",Helvetica;}
.quiz-start:hover {  background: #000;}
@media screen and (max-width:767px){
.quiz-start{ padding: .5em 2em;}
.quiz-start:hover {  background: #000;}
}
/*����ܱ��*/
.quiz-results-state #quiz-controls {  background: none;  padding: 0;}


/*���׿��~���ʵe*/
.answer a.hint { background: #090; }
.incorrect { -webkit-animation-name: tada;
                     animation-name: tada;
            -webkit-animation-duration: 1s;
                    animation-duration: 1s;}
					
					
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,  20%,  40%,  60%,  80%{
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform:  rotate3d(0, 0, 1, -3deg);
  }

  30%,  50%,  70%,  90% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,  20%,  40%,  60%,  80%{
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform:  rotate3d(0, 0, 1, -3deg);
  }

  30%,  50%,  70%,  90% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}