html, body {
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
	overflow: hidden;
	background:#fff;
}

.container{
	width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    max-height: 100vh; /* desktop:100vh  mobile:90vh*/
    max-width: 177.8vh; /* 16/9 = 1.778 >>> desktop:177.8vh mobile:160*/ 
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
	background:#fff;
	box-shadow:0px 0px 15px #ccc;
}
.overlay{
	display:none;
	background:rgba(255,255,255,.8);
}

#qcVideoBox video {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	background:#000;
	box-shadow:1px 1px 15px #ccc;
}
#qcVideoBoxClose{
	width:60px;
	height:60px;
	background:url('../assets/btnclose.svg') no-repeat;
	position:absolute;
	right:8%;
	top:6%;
	cursor:pointer;
}


#qcInputBoxBox{
	position: absolute;
	top: calc(50% - 112px);
	left: calc(50% - 224px);
	width: 497px;
	height: 223px;
	background:url("../assets/de_input_box.svg") no-repeat;
}
#qcInputBoxBtnClose{
	position: absolute;
	top: 0;
	right:0;
	cursor:pointer;
	width:59px;
	height:59px;
	background:url("../assets/input_close.svg") no-repeat;
}
#qcInputBoxBtnOk{
	position: absolute;
	left: 295px;
	bottom:-5px;
	cursor:pointer;
	width:126px;
	height:58px;
	background:url("../assets/de_input_ok.svg") no-repeat;
}
#qcInputBoxText{
	position: absolute;
	left: 78px;
	top: 108px;
	width:330px;
	height:35px;
	font-size:22px;
	border:none;
}
#qcInputBoxText:focus{
	outline: none; 
}

#qcLearnBox{
	
}
#qcLearnContent{
	margin:5% auto;
	width: 75%;
	height: 75%;
	background:#fff;
	box-shadow:1px 1px 15px #ccc;
	padding:50px;
	font-family:Arial;
	overflow:auto;
}
#qcLearnContent table{
	
	width:100%;
	text-align:left;
}
#qcLearnContent table tr{
	
	
}
#qcLearnContent table td,
#qcLearnContent table th{
	border-bottom:solid 1px #ccc;
	padding:5px;
}
#qcLearnContent .cellCorrect{
	background:#469d2e;
	color:#fff;
	text-align:center;
	padding:3px;
}
#qcLearnContent .cellWrong{
	background:#ab0f30;
	color:#fff;
	text-align:center;
	padding:3px;
}

.tablePercent{
	position:relative;
	width:100px;
	height:30px;
	background:#eee;
	border:solid 1px #ccc;
}
.tablePercent .tablePercentBar{
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:0px;
	background:#68d75d;
}
.tablePercent .tablePercentText{
	position:absolute;
	left:7px;
	top:7px;
	color:#000;
	font-size:14px;
}

#qcLearnBoxClose{
	width:60px;
	height:60px;
	background:url('../assets/btnclose.svg') no-repeat;
	position:absolute;
	right:7%;
	top:5%;
	cursor:pointer;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
	.container{
		max-height: 90vh;
		max-width: 160vh;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
}