.edu-container {
	width: 88%;
	margin: 22px auto;
}


.page-title > h1 {
	font-size: var(--font-size-3);
	text-align: center;
}


.page-title > p {
	text-align: center;
	font-size: var(--font-size-2);
}


.edu-list-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 auto;
}


.edu-list-table thead {
	background-color: #006eb5;
	color: rgba(255, 255, 255, 1);
}


.edu-list-table th,
.edu-list-table td {
	padding: 8px;
	border-bottom: 1px solid rgba(88, 88, 88, 0.2);
}


.edu-list-table td {
	padding: 22px 8px;
	font-size: var(--font-size-2);
}


.edu-is-open {
	padding: 8px;
	border-radius: 8px;
}


.edu-list:hover {
	background-color: rgba(222, 222, 222, 1);
	cursor: pointer;
}


.my-class-room-btn-box {
	margin: 8px auto;
	text-align: right;
}


.my-class-room {
	padding: 8px;
	border-radius: 8px;
	display: inline-block;
	color: #222222;
	font-size: var(--font-size-2);
}


.my-edu-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: center;
	margin: 88px 0;
}


.my-edu-box {
	border: 1px solid rgba(88, 88, 88, 0.2);
	padding: 22px;
	width: 50%;
	border-radius: 8px;
	backdrop-filter: blur(8px);
	background-color: aliceblue;
	box-shadow: 0px 0px 8px 2px rgba(88, 88, 88, 0.2);
}


.my-edu-box:hover {
	cursor: pointer;
	-webkit-animation: heartbeat 1.5s ease-in-out both;
	animation: heartbeat 1.5s ease-in-out both;
}


.my-edu-box-2 {
	margin: 22px 0;
}


.my-edu-box-2 * {
	font-size: var(--font-size-2);
}


.my-edu-box-2 > label {
	font-weight: 800;
}


.edu-detail-summary-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 80%;
	margin: 0 auto;
}


@-webkit-keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}


@keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}


.video-js.vjs-fluid {
	/*height: 100% !important;*/
}


.edu-video-wrapper {
	display: grid;
	grid-template-columns: auto 1fr;
	width: 80%;
	margin: 0 auto;
	/*justify-content: space-between;*/
}


.edu-video {
	margin: 0 auto;
}


.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
	opacity: 1;
}


.vjs-progress-control {
	/*pointer-events: none !important;*/
}


.edu-part-box {
	background-color: #218838;
	padding: 8px 22px;
}


.edu-part-box > h2 {
	font-size: var(--font-size-3);
}


.edu-part-box * {
	color: rgba(255, 255, 255, 1);
}


.edu-video-list {
	padding: 8px 0;
	display: block;
	font-size: var(--font-size-2);
}


#certificateNoticeBox {
	width: fit-content;
	margin: 88px auto;
	text-align: center;
}


.certificate-notice {
	margin: 22px 0;
}


#certificate2 {
	text-decoration: underline;
}


#goCertificateLink {
	font-size: var(--font-size-3);
	padding: 8px 22px;
	background-color: #26874e;
	color: rgba(255, 255, 255, 1);
	border-radius: 22px;
	margin: 22px 0;
	display: inline-block;
}
