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

/*
height  height:width ratio = 9/16 = .5625
max-height   desktop:100vh  mobile:90vh
max-width   16/9 = 1.778 >>> desktop:177.8vh mobile:160
*/

.container{
	/* responsive
	width: 100%;
	height: 100%;
    position: absolute;
    top:0;bottom:0; 
    left:0;right:0; 
	*/


	/* fixed */
	width: 100vw; 
    height: 56.25vw; 
    max-height: 100vh; 
    max-width: 177.8vh; 
    margin: auto;
    position: absolute;
    top:0;bottom:0; 
    left:0;right:0; 
	background:#fff;
	box-shadow:0px 0px 15px #ccc;
	
}
.overlay{
	display:none;
	background:rgba(255,255,255,.9);
}

#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;
}

#qcAudioBox {
	display: none;
	position: absolute;
	bottom:50px;
	left: 0px;
	width: 100%;
	text-align: center;
}

#qcAudioBox audio {
	min-width: 50%;
	
}
#qcAudioBoxClose{
	display: inline-block;
	width:52px;
	height:52px;
	background:url('../assets/btnclose.svg') no-repeat;
	background-size: 100%;
	cursor:pointer;
}


/*

QC PAGER BOX

*/
#qcPagerBoxContainer{
	position: absolute;
	top: calc(50% - 112px);
	left: calc(50% - 224px);
	width: 234px;
	height: 223px;
	background:url("../assets/pagerbox.svg") no-repeat;
}
#qcPagerBoxClose{
	position: absolute;
	top: 0;
	right:0;
	cursor:pointer;
	width:59px;
	height:59px;
	background:url("../assets/input_close.svg") no-repeat;
}
#qcPagerBoxOk{
	position: absolute;
	right: 30px;
	bottom:-5px;
	cursor:pointer;
	width:53px;
	height:58px;
	background:url("../assets/btnok.svg") no-repeat;
}
#qcPagerBoxInput{
	position: absolute;
	left: 78px;
	top: 108px;
	width:70px;
	height:35px;
	font-size:22px;
	border:none;
	text-align: center;
}
#qcPagerBoxInput:focus{
	outline: none; 
}


#qcInputBoxBox{
	position: absolute;
	top: calc(50% - 112px);
	left: calc(50% - 224px);
	width: 497px;
	height: 223px;
	background:url("../assets/tr_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/tr_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;
}

#qcStoryBox{

}
#qcStoryBoxFrame{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: none;
}
#qcStoryBoxClose{
	width:40px;
	height:40px;
	background:url('../assets/btnclose.svg') no-repeat;
	background-size: 100%;
	position:absolute;
	right:10px;
	top:10px;
	cursor:pointer;
}

#videoChecker{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}

/* 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: 80vh;
		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) {
	
}