* { margin: 0px; padding: 0px; }
	#QuizBox { position: absolute; }
	#controlBoxQuiz { height:55px; padding:17px 10px 0px 7px; background:rgba(0,0,0,0.4); display: inline-block; position:relative; top:-70px; }
	/*#controlBoxQuiz { height: 45px; padding: 0px 10px; background: rgba(0,0,0,0.4); display: none; position: relative; top: -45px; }¿ø·¡ ÄÚµå*/
	#controlBox { height: 75px; position: absolute; padding: 0px 10px; background: rgba(0,0,0,0.4); }
	#positionBox { width: 100%; }
	#position_bar { float: left; height: 20px; background: url('../img/point_bg.png'); width: calc(100% - 115px); }
	#divCurrentTime { float: right; width: 110px; color: #ffffff; font-weight: bold; text-align: right; }
	#positionPoint { position: absolute; left: 10px; opacity: 1;}
	.buttonBox { margin-top: 5px; }
	.buttonBoxLeft { float: left; }
	.buttonBoxRight {
		float: right;
		display: flex;
		align-items: center;
	}
	.buttonBoxMiddle { float: left; margin-left: 40px; color: #ffffff; }
	.buttonBoxMiddle .chapterName { position: relative; top: 10px; font-size: 18px; font-weight: bold; display: inline-block; }
	.buttonBoxMiddle .studyTime { position: relative; top: 8px; font-size: 18px; font-weight: bold; margin-left: 40px; display: inline-block; }
	.controlBoxBtn { margin-left: 20px; cursor: pointer; }
	.buttonBoxLeft .controlBoxBtn:first-child { margin-left: 0px; }
	.buttonBoxRight .controlBoxBtn:first-child { margin-left: 0px; }
	.btn { border: 1px solid #888888; margin-left: 5px; }
	.btn:first-child { margin-left: 0px; }
	.pageInfo { color: #ffffff; font-size: 20px; font-weight: bold; }
	
	#indexBox { color: #ffffff; position: absolute; width: 470px; overflow-y: scroll; background: rgba(0,0,0,0.6); display: none; border-radius: 10px 10px 0px 0px; }
	#indexBox > div { margin: 10px; }
	#indexBox p { line-height: 150%; font-size: 16px; font-weight: bold; }
	#indexBox ul { margin-top: 10px; }
	#indexBox ul > li { text-indent: 35px; line-height: 150%; font-size: 14px; font-weight: bold; padding: 5px 0px; }
	#indexBox ul > li > span { cursor: pointer; }

	#scriptBox { color: #ffffff; position: absolute; width: 560px; overflow-y: scroll; background: rgba(0,0,0,0.6); display: none; border-radius: 10px 10px 0px 0px; }
	#scriptBox > div { margin: 10px; }
	#scriptBox p { line-height: 180%; font-size: 16px; font-weight: bold; }
	
	#videoPlayMask { position: absolute; background: rgba(0,0,0, 0.1); z-index: 99; text-align: center; display: none; }
	#videoPlayMask img { position: absolute; cursor: pointer; }
	
	#controlBoxQuiz controlBoxBtn { margin-left: 0px; }

	.buttonBoxLeft {
		float: left;
		display: flex;
		align-items: center;
	}
	
	#volumeArea {
		position: absolute;
		width: 27px; 
		height: 140px;
		display: none;
		z-index: 200;
	}
	
	#volumeArea .volumeBox {
		width: 27px; 
		height: 100px;
		background: #262626;
		border-radius: 5px;
		position: relative;
		top: 0;
	}

	.volumeBg {
		width: 7px;
		height: 80px;
		position: relative;
		top: 10px;
		left: 10px;
		background: #E50914;
		overflow: hidden;
	}
	
	.volumeBar {
		width: 7px;
		height: 80px;
		position: relative;
		top: 40px;
		left: 0px;
		background: #5b5b5b;
	}
	
	.volumeContainer {
		height: 80px;
		position: relative;
		top: -70px;
	}
	
	#volumePoint {
		cursor: pointer;
		width: 20px;
		position: relative;
		left: 4px;
		top: 10px;
	}

	video::-internal-media-controls-download-button { display:none; }

	@media screen and (max-width: 450px) {
		.buttonBoxMiddle { display: none; }
	}

	@media screen and (max-width: 650px) {
		.buttonBoxMiddle { margin-left: 0px; }
		.buttonBoxMiddle .chapterName { display: none; }
		.buttonBoxMiddle .studyTime { top: -2px; font-size: 16px; margin-left: 0px; }
	}

	@media screen and (max-width: 1024px) {
		.controlBoxBtn {
			margin-left: 5px;
			height: 28px;
		}
		.buttonBoxMiddle { margin-left: 0px; }
		.buttonBoxMiddle .chapterName { top: 3px; font-size: 16px; margin-left: 10px; }
		.buttonBoxMiddle .studyTime { top: 3px; font-size: 16px; margin-left: 10px; }
	}