@CHARSET "UTF-8";

html, body {
	/**height: 100%;*/
	background-color: #ffffff;
}

body {
	margin: 0;
	padding: 0;
	/**overflow: hidden;*/
}

.FingerCursor {
	cursor: url('images/fingerM.cur'), url('images/fingerM.gif'), pointer;
}

.AnimationSetZ0 {
	position: absolute;
	display: block;
	/**background-color: black;
	background-image: url('../images/background.png');
	background-repeat: no-repeat;
	background-size: cover;*/
	z-index: 999;
}

.AnimationSetZ1 {
	position: absolute;
	display: block;
	/**background-color: black;
	background-image: url('../images/background.png');
	background-repeat: no-repeat;
	background-size: cover;*/
	z-index: 996;
}

.AnimationSetZ2 {
	position: absolute;
	display: block;
	/**background-color: black;
	background-image: url('../images/background.png');
	background-repeat: no-repeat;
	background-size: cover;*/
	z-index: 995;
}

.BlockLayer {
	position: absolute;
	display: block;
	background-color: black;
	background-image: url('../images/LoadBG.png');
	background-repeat: no-repeat;
	background-size: cover;
	width: 800px;
	height: 600px;
	display:flex;
    align-items:center;
	justify-content:center;
	z-index: 995;
}

.TypeWordDiv, .KeyInObjDiv{
	position: relative;
	z-index: 990;
}

.QusObjDiv{
	position: absolute;
	z-index: 990;
}

.tf_KeyIn, .KeyInData {
	position: absolute;
	background: transparent;
	border: none;
}

input:focus, textarea:focus {
	outline-offset: 0px !important;
	outline: none !important;
}

.Q_ShowEng, .KeyInData, .A_ShowEng {
	width: 560px;
	height: 170px;
    visibility: hidden;
	overflow-y: hidden;
	font-size :17px;
	font-family : Verdana;
}

.KeyInClone {
	visibility: hidden;
	position: absolute;
	font-size :17px;
	font-family : Verdana;
}
.CloneWorp {
    white-space: wrap;
   	width: 560px;
   	overflow-y: hidden;
}
.CloneNoWorp {
    white-space: nowrap;
	width: auto;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

textarea { resize: none; }
span { white-space: pre-wrap;}

.errors {
  color: red;
}

.content span {
  outline: none;
  font-size :17px;
  font-family : Verdana;
  background: transparent;
}

.correct {
  color: #0000FF;
}

.article_p {
    margin-block-start: 0px;
    margin-block-end: 0px;
}

/** progress animate */
pattern #progressMove {
	transform: translateY(0%);
	color: #505050;
	animation: progressBar 2s steps(100, end) forwards;
}

@keyframes progressBar {
	to {
		transform: translateY(-100%);
	}
}

.progress-container {
	display: inline-block;
	position: relative;
	counter-reset: progress;
}

.counter::after {
	width: 100%;
	color: black;
	content: attr(data-percent) "%";
}

.progress-container span {
	font-family: BankGothic Md BT;
	color: #FFFF99;
	font-size: 26px;
	line-height: 26px;
	height: 26px;
	font-weight: bold;
}