@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Noto+Sans+KR:100,300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap');
@font-face {
    font-family: 'NoonnuBasicGothicRegular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noon-2410@1.0/NoonnuBasicGothicRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'TtangsBudaeJjigae';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/TtangsBudaeJjigae.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	display: flex; align-items: center; justify-content: center;
	width: 100vw; height: 100vh;
	background-color: black;
	background-size: cover;
	margin: 0;
	padding: 0;
	overflow: hidden;
}



/* 강의창 크기 --------------------------------------- */
.wrapper {
	position: absolute;
	width: 1170px; height: 658px;
	transform-origin: center center;
	overflow: hidden;
}



/* 차시명 --------------------------------------- */
#courseTitle {
	position: absolute;
	top: 10px; left: 10px;
	width: calc(100% - 5px);
	font: bold 16px 'Noto Sans KR', sans-serif;
	color: black;
	line-height: 20px;
	z-index: 10;

}
.courseName {
	position: relative;
	top: 0px;
	float: right;
	width: 326px; height: 113px;
	background: url("../images/img_courseName.png");
	opacity: 1.0;
}
.chasiNum {
	float: left;
	padding: 5px 10px 5px 10px;
	background-color: white;
	opacity: 1.0;
}
.chasiName {
	float: left;
	padding: 5px 10px 5px 10px;
	background-color: white;
	opacity: 0.5;
}



/* 북마크 --------------------------------------- */
#courseBookmark {
	position: absolute;
	top: 50px; right: 10px;
	display: flex; align-items: flex-start; flex-direction: column;
	z-index: 10;
}
.bookmarkOn {
	position: absolute;
	right: 0px;
	width: 40px; height: 30px;
	background: url("../images/btn_bookmark_on.png");
	cursor: pointer;
}
.bookmarkOff {
	position: absolute;
	right: 0px;
	width: 40px; height: 30px;
	background: url("../images/btn_bookmark_off.png");
	cursor: pointer;
}
#bookmarkItem {
	position: relative;
	top: 30px; right: 4px;
	display: none;
	line-height: 20px;
	background-color: black;
	border-right: 3px solid white;
	border-bottom: 3px solid white;
	border-radius: 10px 0px 10px 10px;
	margin: -1px 0px 0px 6px;
	-webkit-animation: fade-in-fwd .5s cubic-bezier(.39,.575,.565,0.1) both;
	animation: fade-in-fwd .5s cubic-bezier(.39,.575,.565,0.1) both;
	opacity: 0.8;
}
#bookmarkItem ul {
	font-size: 0;
	padding: 5px 10px 5px 10px;
}
#bookmarkItem ul li {
	list-style-position: inside;
	font: 500 12px 'Noto Sans KR', sans-serif;
	color: white;
	padding: 0px 15px 0px 5px;
	margin: 5px 0px;
	cursor: pointer;
	opacity: 0.5;
}
#bookmarkItem ul li:hover {
	color: black;
	background-color: white;
	border-radius: 0px 10px 10px 0px;
}



/* 인덱스 --------------------------------------- */
#menuBox {
	position: absolute;
	bottom: 100px; right: 0px;
	display: flex; justify-content: space-evenly; align-items: center;
	width: 200px; height: 30px;
	background-color: #ff2b2b;
	background-color: rgba(43, 51, 63, 0.7);
	z-index: 10;
	cursor: pointer;
}
.menuIndex {
	font: bold 14px 'Noto Sans KR', sans-serif;
	color: white;
}
.menuIndex:hover {
	color: #fff600;
}



/* 메뉴 --------------------------------------- 
#courseMenu {
	width: 230px; height: auto;
	position: absolute;
	bottom: 100px; left: -231px;
	opacity: 1;
	z-index: 20;
}
.menuItem {
	display: block;
	width: 100%; height: 114px;
	cursor: pointer;
	line-height: 0px;
}
.menu1 {
	background: url("../images/index_1_off.png");
}
.menu1:hover {
	background: url("../images/index_1_on.png");
}
.menu1s {
	background: url("../images/index_1_on.png");
	cursor: default;
}
.menu2 {
	background: url("../images/index_2_off.png");
}
.menu2:hover {
	background: url("../images/index_2_on.png");
}
.menu2s {
	background: url("../images/index_2_on.png");
	cursor: default;
}
.menu3 {
	background: url("../images/index_3_off.png");
}
.menu3:hover {
	background: url("../images/index_3_on.png");
}
.menu3s {
	background: url("../images/index_3_on.png");
	cursor: default;
}
.menu4 {
	background: url("../images/index_4_off.png");
}
.menu4:hover {
	background: url("../images/index_4_on.png");
}
.menu4s {
	background: url("../images/index_4_on.png");
	cursor: default;
}
.menu5 {
	background: url("../images/index_5_off.png");
}
.menu5:hover {
	background: url("../images/index_5_on.png");
}
.menu5s {
	background: url("../images/index_5_on.png");
	cursor: default;
}
.menu6 {
	background: url("../images/index_6_off.png");
}
.menu6:hover {
	background: url("../images/index_6_on.png");
}
.menu6s {
	background: url("../images/index_6_on.png");
	cursor: default;
}
.menu7 {
	background: url("../images/index_7_off.png");
}
.menu7:hover {
	background: url("../images/index_7_on.png");
}
.menu7s {
	background: url("../images/index_7_on.png");
	cursor: default;
}
인덱스메뉴 아래 배경색 지정 
.menuBottom {
	height: 45px;
	background-color: #000000; 
	opacity: 0.80;
}
#fileDownHiddenFrame {
	display: none;
}*/

/* 아래업 메뉴 --------------------------------------- */
#courseMenu {
	display: flex; justify-content: center; align-items: center; flex-grow: 1;
	width: 100%; height: 170px;
	position: absolute;
	bottom: -170px; left: 0px;
	opacity: 1;
	z-index: 20;
}
.menuItem {
	display: flex; justify-content: center;
	width: 100%; height: 100%;
	font: normal 25px 'NoonnuBasicGothicRegular', sans-serif;
	color: #171717;
	background-color: white;
	opacity: 0.95;
	cursor: pointer;
	border-right: 1px solid #eeeeee;
}
.menuItem:hover {
	color: white;
	background-color: #6691ff;
}
.menuItemS {
	color: white;
	background-color: #6691ff;
	cursor: default;
}
.menuText {
	position: relative;
	top: 35px;
}
#fileDownHiddenFrame {
	display: none;
}


/* 페이지 이동 안내 --------------------------------------- */
#btnStartPlay {
	position: absolute;
	bottom: 33px; left: 5px;
	width: 217px; height: 36px;
	background: url("../images/btn_playStart.png");
	z-index: 20;
}
#btnNext {
	display: none;
	position: absolute;
	bottom: 33px; right: 25px;
	width: 73px; height: 30px;
	background: url("../images/btn_nextPage.png");
	z-index: 20;
}

.NavigationL {
	position: absolute;
	top: 240px; left: 10px;
	width: 48px; height: 89px;
	background: url("../images/btn_prev_navi_on.png");
	cursor: pointer;
	z-index: 10;
}
.NavigationL:hover {
	background: url("../images/btn_prev_navi_off.png");
}
.NavigationR {
	position: absolute;
	top: 240px; right: 10px;
	width: 48px; height: 89px;
	background: url("../images/btn_next_navi_on.png");
	cursor: pointer;
	z-index: 10;
}
.NavigationR:hover {
	background: url("../images/btn_next_navi_off.png");
}
.quizNavi {
	visibility: hidden;
}


/* 자료 다운로드 --------------------------------------- */
.btnDownload {
	position: absolute;
	bottom: 1px; left: 350px;
	width: 89px; height: 20px;

	background-repeat: no-repeat;
	background-position: center center;
	margin: 4px 0px 4px 197px;

}
.btnDownload:hover {

	background-repeat: no-repeat;
	background-position: center center;
}
.btnNoDownload {
	width: 89px; height: 20px;
	margin: 4px 0px 4px 60px;
}

.btnTextPageDownload {
	position: absolute;
	top: 70px; right: 20px;
	width: 162px; height: 40px;
	background: url("../images/btn_download_top_off.png");
	z-index: 10;
	cursor: pointer;
}
.btnTextPageDownload:hover {
	background: url("../images/btn_download_top_on.png");
}


/* 자막 --------------------------------------- */
#subtitleBox {
	display: none;
	position: absolute;
	bottom: 45px; left: 0px;
	width: 100%; height: 100px;
	box-sizing: border-box;
	font: 500 14px 'Noto Sans KR', sans-serif;
	color: white;
	line-height: 24px;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 10px;
	overflow-y: scroll;
	word-wrap: break-word;
	z-index: 20;
}


/* 강의 안내 --------------------------------------- */
#courseMap {
	display: none;
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	font: 14px 'Noto Sans KR', sans-serif;
	color : #333333;
	background: url("../images/bg_help.jpg");
	z-index: 50;
}

#btnGuideClose {
	position: absolute;
	top: 10px; right: 10px;
	width: 36px; height: 36px;
	background: url("../images/btn_x.png");
	cursor: pointer;
	z-index: 10;
}

.helpMenuWrap {
	display: flex;
	align-items: center; justify-content: center;
	position: relative;
	width: 100%; height: 130px;
}
.btnHelp {
	width: 230px; height: 42px;
	color: white;
	font: 500 24px 'Noto Sans KR', sans-serif;
	text-align: center;
	line-height: 42px;
	background-color: #c0bdbd;
	margin: 0px 2px;
	cursor: pointer;
}
.btnHelp:hover {
	font: 700 24px 'Noto Sans KR', sans-serif;
	line-height: 41px;
	background-color: black;
}
.btnHelpS {
	width: 230px; height: 42px;
	color: white;
	font: 700 24px 'Noto Sans KR', sans-serif;
	text-align: center;
	line-height: 41px;
	background-color: black;
	margin: 0px 2px;
}
.helpContentsWrap {
	display: flex;
	align-items: center; flex-direction: column; flex-wrap: wrap;
	position: relative;
	width: 1100px; height: 500px;
	margin: 0 auto;
	overflow-x: auto;
}
.helpChasiName {
	display: inline-block;
	width: 460px; height: auto;
	font: 16px 'Noto Sans KR', sans-serif;
	color : #333;
	text-indent: -33px;
	margin: 10px 33px;
}
.helpChasiNameS {
	display: inline-block;
	width: 460px; height: auto;
	font: 700 16px 'Noto Sans KR', sans-serif;
	color : #f3412f;
	text-indent: -33px;
	margin: 10px 33px;
}
.helpChasiNameBar {
	font: 700 16px 'Noto Sans KR', sans-serif;
	color: #afafaf;
	margin: 0px 3px;
}

.teacherIntroduceBox {
	display: flex;
	align-items: center; flex-wrap: wrap;
	position: relative;
	width: 1100px; height: 480px;
	margin: 0 auto;
}
.teacherIMG {
	position: relative;
	left: 250px;
	width: 194px; height: 290px;
	border-radius: 15px;
	border: 1px solid gray;
	box-shadow: 3px 3px 3px 3px gray;
}
.teacherTEXT {
	position: relative;
	left: 300px;
}
.teacherName {
	font: 700 24px 'Noto Sans KR', sans-serif;
	margin-bottom: 20px;
}
.teacherIntroduce {
	font: 500 14px 'Noto Sans KR', sans-serif;
}

.bgGuide {
	position: relative;
	width: 1098px; height: 500px;
	background: url("../images/img_player.png");
	margin: 0 auto;
}



/* TEXT page --------------------------------------- */
.textPageWrap {
	position: absolute;
	top: 70px; left: 140px;
	width: 1000px; height: 500px;
}
tt {
	display: flex; align-items: center; flex-wrap: wrap;
	position: relative;
	font: 700 32px 'Noto Sans KR', sans-serif;
	color: white;
}
t0 {
	display: flex; align-items: center; flex-wrap: wrap;
	position: relative;
	font: 400 16px 'Noto Sans KR', sans-serif;
}
t1 {
	display: inline-flex; align-items: center; flex-wrap: wrap;
	position: relative;
	left: 70px;
	font: 700 20px 'Noto Sans KR', sans-serif;
	color: white;
	background-color: black;
	padding: 5px 20px;
	margin: 40px 0px 5px 0px;
}
t2 {
	display: flex; align-items: center; flex-wrap: wrap;
	position: relative;
	left: 90px;
	font: 500 18px 'Noto Sans KR', sans-serif;
	margin: 10px 0px;
}
t3 {
	display: flex; align-items: center; flex-wrap: wrap;
	position: relative;
	left: 110px;
	font: 400 16px 'Noto Sans KR', sans-serif;
	color: white;
	margin-top: 5px;
}

.textPageEndWrap {
	position: absolute;
	top: 200px; left: 140px;
	width: 560px;
}
te {
	display: flex; align-items: center; flex-wrap: wrap;
	position: relative;
	font: 400 24px 'Noto Sans KR', sans-serif;
	margin-bottom: 10px;
}
tn {
	display: flex; align-items: center; flex-wrap: wrap;
	position: relative;
	font: 700 70px 'Noto Sans KR', sans-serif;
	color: yellow;
	background-color: black;
	padding: 0px 25px;
	margin-bottom: -20px;
}
ti {
	display: flex; align-items: center; flex-wrap: wrap;
	position: relative;
	font: 500 32px 'Noto Sans KR', sans-serif;
	color: white;
	background-color: black;
	padding: 10px 25px;
}

cy {
	color: yellow;
	margin: 0px 5px;
}
cr {
	color: red;
	margin: 0px 5px;
}



/* Quiz page --------------------------------------- */
.quizWrap {
	position: relative;
	top: 55px; right: 0px;
	width: 1050px; height: 380px;
	margin: 0 auto;
}
.quizWrapBlur {
	filter: blur(0px);
	transition-duration: 0.5s;
}
.quizWrapNomal {
	filter: blur(0px);
	transition-duration: 0.3s;
}


/*.quizWrap {
	position: relative;
	top: 55px;
	right: 0px;
	width:  100%;
	height:  100%;
	margin: 0 auto;
	background-color: rgba(0, 0, 0, 0); /* 검정 배경 색상과 투명도를 설정합니다. 
	transition-duration: 0.5s;
}
.quizWrapBlur {
	background-color: rgba(0, 0, 0, 0.5); /* 투명 배경으로 변경합니다. 
	transition-duration: 0.5s;
}
.quizWrapNormal {
	background-color: rgba(0, 0, 0, 0.5); /* 다시 검정 배경 색상과 투명도를 설정합니다. 
	transition-duration: 0.3s;
}*/


.quizNo {
	padding: 35px 0px 0px 60px;
	font: bold 30px 'TtangsBudaeJjigae', sans-serif;
	margin: 0 auto;
}
.quizText {
	padding: 10px 0px 20px 60px;
	font: 25px 'Noto Sans KR', sans-serif;
	margin: 0 auto;
}
.quizOX {
	position: relative;
	width: 461px; height: 167px;
	background: url("../images/img_quiz_ox.png");
	margin: 0 auto;
}
.quizRadioWrap {
	position: relative;
	top: 20px;
	width: 350px; height: 37px;
	margin: 0 auto;
}
#quizO {
	float: left;
	margin-left: 8px;
}
#quizX {
	float: right;
	margin-right: 8px;
}
.quizRadioBtn {
	width: 37px; height: 37px;
	background: url("../images/radio_quiz_check_off.png");
	cursor: pointer;
}
.quizRadioBtn:hover {
	background: url("../images/radio_quiz_check_on.png");
}

.bogiWrap {
	display: flex; flex-direction: row-reverse;
	position: relative;
	right: 0px;
	width: 1000px; height: auto;
	margin: 0px 0px 10px 60px;
}
.bogiNo {
	width: 32px; height: 32px;
	border-radius: 32px;
	border: 1px solid black;
	font: 20px 'Noto Sans KR', sans-serif;
	line-height: 24px;
	text-align: center;
	margin: 5px 10px 0px 0px;
	cursor: pointer;
}
.bogiNo:hover {
	background-color: #3051fe;
	color: white;
}
.bogiText {
	width: 950px;
	font: 20px 'Noto Sans KR', sans-serif;
	text-align: left;
	padding-top: 5px;
	cursor: pointer;
}
.bogiText:hover + .bogiNo {
	background-color: #3051fe;
	color: white;
}

.inputBox {
	position: relative;
	display: inline-block;
	margin-left: 100px;
}
.inputBox input {
	position: relative;
	width: 500px; height: 60px;
	font: 500 20px 'Noto Sans KR', sans-serif;
	line-height: 60px;
	background-color: transparent;
	padding-left: 10px;
	border: none;
	border-bottom: 5px solid black;
	border-radius: 5px;
	outline: none;
}
.inputBox button {
	position: relative;
	top: 4px;
	width: 100px; height: 60px;
	font: 400 20px 'Noto Sans KR', sans-serif;
	line-height: 60px;
	background-color: transparent;
	border: none;
	border-bottom: 5px solid black;
	border-radius: 5px;
	cursor: pointer;
}
.inputBox button:hover {
	font: 700 24px 'Noto Sans KR', sans-serif;
	line-height: 57px;
}

.quizJungdap {
	display: none;
	position: absolute;
	top: 150px; right: 380px;
	width: 400px; height: 314px;
}
.btnQuizResult {
	position: absolute;
	width: 157px; height: 41px;
	left: 480px; bottom: 100px;
	background: url("../images/btn_quiz_retry.png");
	cursor: pointer;
}

.quizNextBtn {
	position: absolute;
	width: 157px; height: 41px;
	left: 1000px; bottom: 200px;
	cursor: pointer;
}
.quizExplain {
	display: none;
	align-items: center;
	position: absolute;
	bottom: 30px;
	width: 1170px; height: 180px;
	background: url("../images/bg_quiz_explain.png");
}
.quizRightWrong {
	position: relative;
	width: 150px;
	font: bold 100px 'Outfit', sans-serif;
	text-align: center;
	margin: 30px 0px 0px 30px;
	color: #ffffff;
}
.quizExplainText {
	position: relative;
	width: 918px; height: 100px;
	font: 24px 'Noto Sans KR', sans-serif;
	padding: 0px 20px;
	margin: 45px 0px 0px 60px;
	overflow-y: auto;
}

.dapCheckWrap {
	display: flex; align-items: center; justify-content: center;
	position: absolute;
	width: 650px; height: 180px;
	left: 254px; bottom: 170px;
}
.dapCheckOX {
	width: 100%;
	text-align: center;
}
#player__controls__lock {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999 !important;
}