@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

body{
	margin: 0; padding: 0;
	width: 100%;
	background-color: #747474;
	position: relative;
	overflow-x: hidden;
}
body > div{ box-sizing: border-box; }
div, span{ margin: 0; padding: 0; }


/* LECTURE */
div#lecture{
	margin: 5px 0; padding: 0;
	height: 55px;
	background-color: #eeeeee;
	border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
	position: relative;
	overflow: hidden;
}
div#lecture div#lecture_process{
	background-color: #ffbf1f;
	position: absolute; top: 0; bottom: 0;
}
div#lecture div#lecture_title{
	height: 30px;
	color: #000; font-size: 18px; font-weight: bold; line-height: 30px;
	white-space: nowrap;
	position: absolute; top: 5px; right: 0; left: 0;
	overflow: hidden;
}
div#lecture div#lecture_title span{
	display: inline-block;
	position: absolute; top: 0;
}
div#lecture div#lecture_title span:nth-child(1){
	width: calc(100% - 120px);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	left: 10px;
}
div#lecture div#lecture_title span:nth-child(2){
	width: 90px;
	text-align: right; text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	right: 10px;
}
div#lecture div#lecture_process_time, div#lecture div#lecture_total_time{
	height: 15px;
	font-size: 16px; line-height: 15px;
	position: absolute; bottom: 5px;
}
div#lecture div#lecture_process_time{ left: 10px; }
div#lecture div#lecture_process_time span{ text-align: center; display: inline-block; }
div#lecture div#lecture_process_time span:nth-child(1){ width: 70px; text-align: left; }
div#lecture div#lecture_process_time span:nth-child(2){ width: 10px; color: #aaa; }
div#lecture div#lecture_process_time span:nth-child(3){ width: 70px; text-align: left; }
div#lecture div#lecture_total_time{ right: 10px; }


/* frameSection */
div#frameSection{ margin: 0; }
div#frameSection iframe#contentsFrame{ width: 100%; }


/* button_list  */
div#button_list{ text-align: center; display: inline-block; }
div#button_list a{ margin: 0 10px; color: #fff; font-size: 60px; display: inline-block; }


/* LECTURE_LIST */
div#lecture_list{ margin-top: 10px; text-align: center; }
div#lecture_list a{ margin: 5px; display: inline-block; }
div#lecture_list a .circular{ width: 60px; height: 60px; display: inline-block; position: relative; }
div#lecture_list a:not(:first-child) .circular{ margin-left: 5px; }
div#lecture_list a .circular .text{
	width: 50px; height: 50px;
	color: #ccc; font-size: 1.6rem; font-weight: bold; text-align: center; line-height: 50px;
	background: linear-gradient(to right, #898989, #696969);
	border-radius: 100%;
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	z-index: 6;
	box-shadow:1px 1px 20px 3px rgba(0,0, 0, 0.3);
}
div#lecture_list a .circular.done .text{
	color: #747474;
	background: linear-gradient(120deg, #dfeddb, #acbffa);
}
div#lecture_list a .circular.on .text{
	color: #fff;
	background: linear-gradient(120deg, #f5d068, #fe6baf);
}
div#lecture_list a .circular .circle{}
div#lecture_list a .circular .circle .bar{
	width: 100%; height: 100%;
	background: #ddd;
	-webkit-border-radius: 100%;
	clip: rect(0px, 60px, 60px, 30px);
	position: absolute;
}
div#lecture_list a .circular .circle .bar .progress{
	width: 100%; height: 100%;
	/*background: #54ecff;*/
	background: #FFBD3A;
	-webkit-border-radius: 100%;
	clip: rect(0px, 30px, 60px, 0px);
	position: absolute;
}
div#lecture_list a .circular .circle .left .progress{ z-index: 1; }
div#lecture_list a .circular .circle .right{ transform: rotate(180deg); z-index:3; }
div#lecture_list a .circular.done .circle .bar .progress{
	background: rgba(0, 0, 255, 0.3);
}


@media (orientation: portrait) {
	div#frameSection{ width: 100%; display: block; }

	div#button_list{ margin-top: 10px; width: 100%; height: 60px; display: block; }
	div#button_list a{ margin: 0 10px; text-align: center; display: inline-block; }
}

@media (orientation: landscape) {
	div#frameSection{ width: 60%; display: inline-block; }

	div#button_list{
		margin-top: 0; width: 38%;
		position: absolute; top: 60px; right: 0;
	}
	div#button_list a{ margin: 0; text-align: right; display: block; position: absolute; }
	div#button_list a:nth-child(2){ top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 40px)); }
	div#button_list a:nth-child(1){ top: 50%; left: 50%; transform: translate(calc(-50% - 50px), calc(-50% + 40px)); }
	div#button_list a:nth-child(3){ top: 50%; left: 50%; transform: translate(calc(-50% + 50px), calc(-50% + 40px)); }
}