/**
 * common
 */

.hidden {
	display: none !important;
}
.bul-list {
	margin: 15px 0 40px 28px;
	margin: 0.9375rem 0 2.5rem 1.75rem;
}
.bul-list li {
	position: relative;
	padding-left: 10px;
	padding-left: 0.625rem;
	color: #fff;
	line-height: 1.8;
}
.bul-list li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	top: 0.6875rem;
	width: 3px;
	width: 0.1875rem;
	height: 3px;
	height: 0.1875rem;
	border-radius: 1px;
	border-radius: 0.0625rem;
	background-color: #fff;
}
.buttons {
	text-align: center;
}
.button {
	margin: 20px 5px 0;
	margin: 1.25rem 0.3125rem 0;
	padding: 7px 50px;
	padding: 0.4375rem 3.125rem;
	font-size: 18px;
	font-size: 1.125rem;
	border-radius: 18px;
	border-radius: 1.125rem;
	color: #fff;
}
.round-box {
	height: 25%;
	padding: 20px;
	padding: 1.25rem;
	font-size: 14px;
	font-size: 0.875rem;
	color: #fff;
	overflow-y: auto;
	border: 0;
	box-sizing: border-box;
	-webkit-border-radius: 4px;
	-webkit-border-radius: 0.25rem;
	-moz-border-radius: 4px;
	-moz-border-radius: 0.25rem;
	border-radius: 4px;
	border-radius: 0.25rem;
	background-color: #1a242d;
	-webkit-box-shadow: 1px 1px rgba(255, 255, 255, .14), inset 1px 1px 4px rgba(0, 0, 0, .34);
	-webkit-box-shadow: 0.0625rem 0.0625rem rgba(255, 255, 255, .14), inset 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, .34);
	-moz-box-shadow: 1px 1px rgba(255, 255, 255, .14), inset 1px 1px 4px rgba(0, 0, 0, .34);
	-moz-box-shadow: 0.0625rem 0.0625rem rgba(255, 255, 255, .14), inset 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, .34);
	box-shadow: 1px 1px rgba(255, 255, 255, .14), inset 1px 1px 4px rgba(0, 0, 0, .34);
	box-shadow: 0.0625rem 0.0625rem rgba(255, 255, 255, .14), inset 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, .34);
}

/**
 * tab
 */

.tab {
	float: left;
	width: 19.75%;
	height: 100%;
	border-radius: 18px 0 0 18px;
	border-radius: 1.125rem 0 0 1.125rem;
	overflow: hidden;
	background-color: #2b3946;
}
.tab button {
	display: block;
	width: 100%;
	padding: 25px 10px 25px 30px;
	padding: 1.5625rem 0.625rem 1.5625rem 1.875rem;
	font-size: 18px;
	font-size: 1.125rem;
	/* word-break: keep-all; */
	box-sizing: border-box;
	border-bottom: 1px solid #28323a;
	border-bottom: 0.0625rem solid #28323a;
}
.tab .current button {
	box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0.125rem 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.2);
}
.tab-contents {
	float: right;
	width: 80.25%;
	height: 100%;
	padding: 30px 50px;
	padding: 1.875rem 3.125rem;
	box-sizing: border-box;
	border-radius: 0 18px 18px 0;
	border-radius: 0 1.125rem 1.125rem 0;
	background-color: #1a242d;
	background-image: url('../images/bg-content-shadow.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}
.tab-content {
	display: none;
}
.tab-content.current {
	overflow: auto;
	display: block;
	height: 100%;
}

/**
 * layer
 */

.layer-wrap {
	display: none;
}
.layer-wrap.show {
	display: block;
}
.layer-wrap .close {
	position: absolute;
	top: 20px;
	top: 1.25rem;
	right: 20px;
	right: 1.25rem;
	width: 23px;
	width: 1.4375rem;
	height: 23px;
	height: 1.4375rem;
	font: 0/0 a;
	background: url('../images/icon-close.png') no-repeat;
	background-size: contain;
}
.layer-wrap.professor {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 5;
	width: 67%;
	overflow-y: auto;
	padding-top: 18px;
	padding-top: 1.125rem;
	border-radius: 18px 0 0 18px;
	border-radius: 1.125rem 0 0 1.125rem;
	background-color: #2b3946;
	background-image: url('../images/bg-layer-shadow.png');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
}
.layer-wrap.professor dt {
	width: 122px;
	width: 7.625rem;
	padding: 6px 0;
	padding: 0.375rem 0;
	text-align: center;
	font-size: 18px;
	font-size: 1.125rem;
	color: #fff;
	box-shadow: 2px -2px 6px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0.125rem -0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
}
.show-professor-profile .content .name,
.show-professor-profile .content .profile {
/*.show-professor-profile .btn.start {*/
	display: none;
}

/**
 * intro
 */
[data-page="intro"] #header,
[data-page="intro"] #footer {
	display: none;
}
[data-page="intro"] #content .wrapper {
	overflow: visible;
}
.intro .header {
	position: relative;
	float: left;
	width: 67%;
	height: 100%;
}
.intro .header h1 {
	display: inline-block;
	margin-top: 85px;
	margin-top: 5.3125rem;
	padding: 6px 28px;
	padding: 0.375rem 1.75rem;
	text-align: center;
	font-size: 18px;
	font-size: 1.125rem;
	color: #fff;
	border-left: 1px solid #656565;
	border-left: 0.0625rem solid #656565;
	border-top: 1px solid #656565;
	border-top: 0.0625rem solid #656565;
	background-color: #1f1f1f;
	box-shadow: 2px -2px 6px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0.125rem -0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
}
.intro .header h2 {
	display: table;
	padding: 12px 28px;
	padding: 0.75rem 1.75rem;
	text-align: center;
	font-size: 30px;
	font-size: 1.875rem;
	font-weight: 700;
	color: #fff;
	box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0.125rem 0 0.375rem 0 rgba(0, 0, 0, 0.3);
}
.intro .header h3 {
	padding: 20px 30px;
	padding: 1.25rem 1.875rem;
	text-align: left;
	font-size: 18px;
	font-size: 1.125rem;
	color: #fff;
}
.intro .header .btn {
	position: absolute;
	right: 0;
	bottom: 10%;
	z-index: 6;
	width: 150px;
	width: 9.375rem;
	height: 150px;
	height: 9.375rem;
	margin-right: -75px;
	margin-right: -4.6875rem;
	text-align: center;
	font-size: 15px;
	font-size: 0.9375rem;
	color: #fff;
	border: 4px solid #fff;
	border: 0.25rem solid #fff;
	border-radius: 50%;
	box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0.125rem 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.3);
}
.intro .header .btn span {
	display: block;
	font-size: 40px;
	font-size: 2.5rem;
	line-height: 1;
}
.intro .header .btn span:after {
	content: '';
	display: block;
	width: 57px;
	width: 3.5625rem;
	height: 8px;
	height: 0.5rem;
	margin: 15px auto 0;
	margin: 0.9375rem auto 0;
	background: url('../images/icon-arrow-start.png') no-repeat;
}
.intro .content {
	float: right;
	box-sizing: border-box;
	width: 33%;
	height: 100%;
	padding: 30px 20px;
	padding: 1.875rem 1.25rem;
	border-radius: 0 18px 18px 0;
	border-radius: 0 1.125rem 1.125rem 0;
	box-sizing: border-box;
	background-image: url('../images/bg-intro-pattern.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;
}
.intro .profile {
	position: relative;
	z-index: 1;
}
.intro .profile .btn:after {
	content: '';
	display: inline-block;
	width: 12px;
	width: 0.75rem;
	height: 7px;
	height: 0.4375rem;
	margin-top: -2px;
	margin-top: -0.125rem;
	margin-left: 3px;
	margin-left: 0.1875rem;
	vertical-align: middle;
	background-image: url('../images/icon-arrow-profile.png');
	background-repeat: no-repeat;
}
[data-page="intro"] .photo {
	text-align: right;
	position: absolute;
	/*right: -66px;*/
	right: -66px;
	right: -4.125rem;
	bottom: -66px;
	bottom: -4.125rem;
	top: -84px;
	top: -5.25rem;
}
[data-page="intro"] .photo:after {
	content: '';
	vertical-align: bottom;
	display: inline-block;
	height: 100%;
}
[data-page="intro"] .photo img {
	vertical-align: bottom;
	max-height: 70%;
}

/**
 * term
 */

.term {}
.tab-content.current ~ .desc {
	display: none;
}

/**
 * objectives
 */

.objectives {
	padding-top: 18px;
	padding-top: 1.125rem;
}
.objectives dt {
	width: 122px;
	width: 7.625rem;
	padding: 6px 0;
	padding: 0.375rem 0;
	text-align: center;
	font-size: 18px;
	font-size: 1.125rem;
	color: #fff;
	box-shadow: 2px -2px 6px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0.125rem -0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
}

/**
 * exercise
 */

.exercise {
	padding-top: 18px;
	padding-top: 1.125rem;
}
.exercise .exercise-item {
	position: relative;
	margin-bottom: 30px;
	margin-bottom: 1.875rem;
}
.exercise .exercise-item:after {
	content: '';
	display: table;
	clear: both;
}
.exercise .exercise-item.disabled {
	opacity: 0.5;
}
.exercise .exercise-item.disabled:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.exercise .tit {
	position: relative;
	float: left;
	width: 15%;
	max-width: 120px;
	max-width: 7.5rem;
	padding: 6px 0;
	padding: 0.375rem 0;
	text-align: center;
	font-size: 18px;
	font-size: 1.125rem;
	color: #fff;
	font-weight: normal;
	box-shadow: 2px -2px 6px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0.125rem -0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
}
.exercise .tit:before {
	content: '';
	position: absolute;
	right: -14px;
	right: -0.875rem;
	top: -1px;
	top: -0.0625rem;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 40px 14px 0 0;
	border-width: 2.5rem 0.875rem 0 0;
}
.exercise .tit:after {
	content: '';
	position: absolute;
	right: -13px;
	right: -0.8125rem;
	top: 0;
	z-index: 1;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 40px 13px 0 0;
	border-width: 2.5rem 0.8125rem 0 0;
}
.exercise dl {
	float: left;
	width: 85%;
	padding-left: 30px;
	padding-left: 1.875rem;
	box-sizing: border-box;
}
.exercise dl dt {
	position: relative;
	margin-top: 8px;
	margin-top: 0.5rem;
	margin-bottom: 20px;
	margin-bottom: 1.25rem;
	font-size: 18px;
	font-size: 1.125rem;
	color: #fff;
}
.exercise dl dt:after {
	content: '';
	pointer-events: none;
	position: absolute;
	left: -35px;
	left: -2.1875rem;
	top: -20px;
	top: -1.25rem;
	z-index: 1;
	width: 100px;
	width: 6.25rem;
	height: 70px;
	height: 4.375rem;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.exercise .success dl dt:after {
	background-image: url('../images/success.png');
}
.exercise .failed dl dt:after {
	background-image: url('../images/failed.png');
}
.exercise ul li {
	vertical-align: top;
	display: inline-block;
	margin-left: 40px;
	margin-left: 2.5rem;
	line-height: 1.8;
}
.exercise ul li:first-child {
	margin-left: 0;
}
.exercise .multiple ul li {
	box-sizing: border-box;
	width: 50%;
	margin-left: 0;
	padding-right: 15px;
	padding-right: 0.9375rem;
}
.exercise ul input[type="radio"] {
	display: none;
}
.exercise ul input[type="radio"]:checked+span:after {
	content: '';
	position: absolute;
	left: 2px;
	left: 0.125rem;
	top: -13px;
	top: -0.8125rem;
	width: 13px;
	width: 0.8125rem;
	height: 18px;
	height: 1.125rem;
	background: url('../images/icon-radio-current.png') no-repeat;
	background-size: contain;
}
.exercise ul span {
	position: relative;
	display: inline-block;
	width: 15px;
	width: 0.9375rem;
	height: 14px;
	height: 0.875rem;
	margin-top: -3px;
	margin-top: -0.1875rem;
	vertical-align: middle;
	text-align: center;
	line-height: 1;
	font-size: 12px;
	font-size: 0.75rem;
	color: #fff;
	border-radius: 50%;
	border: 1px solid #fff;
	border: 0.0625rem solid #fff;
}
.exercise .answer {
	display: none;
}
.show-answer.exercise .answer {
	display: block;
}
.exercise .confirm {
	margin-bottom: 20px;
	margin-bottom: 1.25rem;
	text-align: center;
	font-size: 14px;
	font-size: 0.875rem;
}

/**
 * 학습정리
 */

.theorem {}
.theorem .utils {
	font-size: 13px;
	font-size: 0.8125rem;
	position: absolute;
	top: 30px;
	top: 1.875rem;
	right: 50px;
	right: 3.125rem;
}
.theorem .utils button {
	background-repeat: no-repeat;
	background-position: 0 50%;
}
.theorem .utils button:before {
	content: '';
	vertical-align: middle;
	display: inline-block;
	width: 20px;
	width: 1.25rem;
	height: 20px;
	height: 1.25rem;
	margin-right: 7px;
	margin-right: 0.4375rem;
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: contain;
}
.theorem .utils .reference:before {
	background-image: url('../images/icon-reference.png');
}
.theorem .utils .reference{display: none;}
.theorem .utils .print {
	position: relative;
	margin-left: 22px;
	margin-left: 1.375rem;
}
.theorem .utils .print:before {
	background-image: url('../images/icon-print.png');
}
/*
.theorem .utils .print:after {
	content: '';
	position: absolute;
	top: 2px;
	top: 0.125rem;
	left: -22px;
	left: -1.375rem;
	display: block;
	width: 1px;
	width: 0.0625rem;
	height: 15px;
	height: 0.9375rem;
	margin: 0 10px;
	margin: 0 0.625rem;
	border-left: 1px solid #363636;
	border-left: 0.0625rem solid #363636;
	background-color: #000;
}
*/
.theorem .tab:after {
	content: '각 탭을 클릭해 보세요.';
	color: #aaa;
	font-size: 14px;
	font-size: 0.875rem;
	word-wrap: break-word;
	word-break: keep-all;
	position: absolute;
	bottom: 20px;
	bottom: 1.25rem;
	left: 0;
	box-sizing: border-box;
	width: 19.75%;
	padding: 0 25px;
	padding: 0 1.5625rem;
}
.is-touch .theorem .tab:after {
	content: '각 탭을 터치해보세요.';
}
.theorem .tab-contents {
	padding-right: 20px;
	padding-right: 1.25rem;
	padding-top: 60px;
	padding-top: 3.75rem;
}
.theorem .tab-content {
	font-size: 14px;
	font-size: 0.875rem;
}
.theorem .tab-content .title {
	font-size: 18px;
	font-size: 1.125rem;
	position: relative;
	margin-bottom: 50px;
	margin-bottom: 3.125rem;
}
.theorem .tab-content .title:after {
	content: '';
	position: absolute;
	top: 44px;
	top: 2.75rem;
	left: 0;
	display: block;
	width: 12px;
	width: 0.75rem;
	height: 1px;
	height: 0.0625rem;
	background-color: #fff;
}
.theorem .tab-content .sub-title {
	font-size: 16px;
	font-size: 1rem;
	margin-bottom: 18px;
	margin-bottom: 1.125rem;
}
.theorem .tab-content ul {
	margin-bottom: 30px;
	margin-bottom: 1.875rem;
}
.theorem .tab-content li {
	position: relative;
	margin-bottom: 10px;
	margin-bottom: 0.625rem;
	padding-left: 10px;
	padding-left: 0.625rem;
}
.theorem .tab-content li:after {
	content: '';
	position: absolute;
	top: 8px;
	top: 0.5rem;
	left: 0;
	display: block;
	width: 3px;
	width: 0.1875rem;
	height: 3px;
	height: 0.1875rem;
	border-radius: 50%;
	background-color: #fff;
}
.theorem .tab-content table {
	margin-bottom: 30px;
	margin-bottom: 1.875rem;
}
.theorem .tab-content th,
.theorem .tab-content td {
	padding: 5px;
	padding: 0.3125rem;
	border: 1px solid #ccc;
	border: 0.0625rem solid #ccc;
}
.layer-reference {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 18px;
	border-radius: 1.125rem;
	background-color: #1a242d;
}
.layer-reference .title {
	width: 122px;
	width: 7.625rem;
	margin-top: 18px;
	margin-top: 1.125rem;
	padding: 6px 0;
	padding: 0.375rem 0;
	text-align: center;
	font-size: 18px;
	font-size: 1.125rem;
	color: #fff;
	box-shadow: 2px -2px 6px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0.125rem -0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
}
.layer-reference .content {
	padding: 12px 30px;
	padding: 0.75rem 1.875rem;
}
.layer-reference .content li {
	position: relative;
	margin-bottom: 10px;
	margin-bottom: 0.625rem;
	padding-left: 10px;
	padding-left: 0.625rem;
}
.layer-reference .content li:after {
	content: '';
	position: absolute;
	top: 8px;
	top: 0.5rem;
	left: 0;
	display: block;
	width: 3px;
	width: 0.1875rem;
	height: 3px;
	height: 0.1875rem;
	border-radius: 50%;
	background-color: #fff;
}

/**
 * opinion
 */

.opinion {
	padding-top: 18px;
	padding-top: 1.125rem;
}
.opinion .title {
	display: inline-block;
	padding: 10px 30px;
	padding: 0.625rem 1.875rem;
	font-size: 18px;
	font-size: 1.125rem;
}
.opinion .form {
	padding: 20px 30px;
	padding: 1.25rem 1.875rem;
}
.opinion textarea {
	width: 100%;
	height: 148px;
	height: 9.25rem;
	resize: none;
}

/**
 * check
 */
#content .wrapper.check {
	overflow-y: hidden;
}
.check {
	padding-top: 18px;
	padding-top: 1.125rem;
}
.check .title {
	display: inline-block;
	padding: 10px 30px;
	padding: 0.625rem 1.875rem;
	font-size: 18px;
	font-size: 1.125rem;
}
.user-opinion {
	height: 35%;
	margin: 20px 30px 10px;
	margin: 1.25rem 1.875rem 0.625rem;
}
.professor-think {
	height: 35%;
	box-sizing: border-box;
}
.professor-think .photo {
	pointer-events: none;
	text-align: right;
	position: absolute;
	right: 50px;
	right: 3.125rem;
	bottom: 0;
}
.professor-think .photo:after {
	content: '';
	vertical-align: bottom;
	display: inline-block;
	height: 90%;
}
.professor-think .photo img {
	vertical-align: bottom;
	max-height: 180px;
	max-height:11.25rem;
}
.professor-think .think {
	height: 100%;
	margin: 0 30px;
	margin: 0 1.875rem;
	padding-right: 30%;
}

/**
 * exercise
 */

.answer {
	margin-top: 30px;
	margin-top: 1.875rem;
}
.answer .row {
	display: table;
	margin-bottom: 5px;
	margin-bottom: 0.3125rem;
}
.answer .row span {
	display: table-cell;
}
.answer .row .title {
	min-width: 40px;
	min-width: 2.5rem;
}
.answer .row .index {
	position: relative;
	display: inline-block;
	width: 15px;
	width: 0.9375rem;
	height: 14px;
	height: 0.875rem;
	margin-top: -3px;
	margin-top: -0.1875rem;
	vertical-align: middle;
	text-align: center;
	line-height: 1;
	font-size: 12px;
	font-size: 0.75rem;
	color: #fff;
	border-radius: 50%;
	border: 1px solid #fff;
	border: 0.0625rem solid #fff;
}

/**
 * next : 다음 안내
 */

.next-lecture {
	padding-bottom: 150px;
	padding-bottom: 9.375rem;
}
.next-lecture .list {
	box-sizing: border-box;
	overflow: auto;
	height: 100%;
	padding: 18px 30px;
	padding: 1.125rem 1.875rem;
}
.next-lecture ul {
	margin: 0 -10px;
	margin: 0 -0.625rem;
}
.next-lecture ul:after {
	content: '';
	display: block;
	clear: both;
}
.next-lecture ul li {
	vertical-align: top;
	display: inline-block;
	width: 33.33333%;
	min-height: 70px;
	min-height: 4.375rem;
	padding: 7px 10px;
	padding: 0.4375rem 0.625rem;
	box-sizing: border-box;
}
.next-lecture ul li .inner {
	display: table;
	width: 100%;
}
.next-lecture ul li .num {
	display: table-cell;
	width: 51px;
	width: 3.1875rem;
	line-height: 56px;
	line-height: 3.5rem;
	text-align: center;
	font-size: 18px;
	font-size: 1.125rem;
	background-color: #1a242d;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .13);
	-webkit-box-shadow: 0 0 0.625rem rgba(0, 0, 0, .13);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .13);
	-moz-box-shadow: 0 0 0.625rem rgba(0, 0, 0, .13);
	box-shadow: 0 0 10px rgba(0, 0, 0, .13);
	box-shadow: 0 0 0.625rem rgba(0, 0, 0, .13);
}
.next-lecture ul li .title {
	display: table-cell;
	padding: 3px 15px;
	padding: 0.1875rem 0.9375rem;
	vertical-align: middle;
	background-color: #1a242d;
	-webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .34);
	-webkit-box-shadow: inset 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, .34);
	-moz-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .34);
	-moz-box-shadow: inset 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, .34);
	box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .34);
	box-shadow: inset 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, .34);
}
.next-lecture .next {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 105px;
	height: 6.5625rem;
	padding: 25px 0 0;
	padding: 1.5625rem 0 0;
	text-align: center;
	border-radius: 0 0 18px 18px;
	border-radius: 0 0 1.125rem 1.125rem;
	background-color: #1a242d;
	-webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .34);
	-webkit-box-shadow: inset 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, .34);
	-moz-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .34);
	-moz-box-shadow: inset 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, .34);
	box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .34);
	box-shadow: inset 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, .34);
}
.next-lecture .next:before {
	content: '';
	display: inline-block;
	width: 80px;
	width: 5rem;
	height: 80px;
	height: 5rem;
	margin-right: 30px;
	margin-right: 1.875rem;
	background-image: url('../images/icon-next-lecture.png');
	background-size: contain;
	vertical-align: middle;
}
.next-lecture .next span {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}
.next-lecture .next strong {
	font-size: 22px;
	font-size: 1.375rem;
}

/**
 * player
 */

.video-js {
	position: static !important;
	background-color: transparent;
}
.video-js .vjs-tech {
	width: 0;
	height: 0;
	border-radius: 18px;
	border-radius: 1.125rem;
}
[data-page="lecture"] .video-js .vjs-tech,
[data-page="orientation"] .video-js .vjs-tech {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 84px 86px 66px 86px;
	padding: 5.25rem 5.375rem 4.125rem 5.375rem;
}
.video-js .vjs-control-bar {
	position: static;
	height: 46px;
	height: 2.875rem;
	opacity: 1 !important;
	background-color: transparent;
}
.video-js .vjs-time-control {
	color: #fff;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 46px;
	line-height: 2.875rem;
	display: inherit;
	padding: 0;
}
.video-js .vjs-time-divider {
	min-width: auto;
}
.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu-content {
	bottom: 31px;
	bottom: 1.9375rem;
}
.video-js .vjs-control-bar .vjs-current-time {
	padding-left: 20px;
	padding-left: 1.25rem;
}
.video-js .vjs-control-bar .vjs-duration {
	padding-right: 20px;
	padding-right: 1.25rem;
	border-right: 1px solid #363636;
	border-right: 0.0625rem solid #363636;
}
.video-js .vjs-control-bar .vjs-play-control {
	border-left: 1px solid #000;
	border-left: 0.0625rem solid #000;
	border-right: 1px solid #363636;
	border-right: 0.0625rem solid #363636;
}
.video-js .vjs-control-bar .vjs-volume-menu-button {
	border-left: 1px solid #000;
	border-left: 0.0625rem solid #000;
	border-right: 1px solid #363636;
	border-right: 0.0625rem solid #363636;
}
.video-js .vjs-control:before {
	line-height: 2.67;
}
.video-js .vjs-progress-control {
	width: auto;
	min-width: 0;
	padding-left: 20px;
	padding-left: 1.25rem;
}
.video-js .vjs-big-play-button,
.video-js .vjs-mouse-display:after,
.video-js .vjs-play-progress:after,
.video-js .vjs-time-tooltip {
	display: none;
}
.video-js .time-lists .time {
	position: absolute;
	bottom: 6px;
	bottom: 0.375rem;
	width: 6px;
	width: 0.375rem;
	height: 6px;
	height: 0.375rem;
	margin-left: -3px;
	margin-left: -0.1875rem;
	background-color: #fff;
}
.video-js .time-lists .time:after {
	content: '';
	position: absolute;
	bottom: -3px;
	bottom: -0.1875rem;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -3px;
	margin-left: -0.1875rem;
	border-style: solid;
	border-width: 3px 3px 0 3px;
	border-width: 0.1875rem 0.1875rem 0 0.1875rem;
	border-color: #fff transparent transparent transparent;
}
.video-js .time-lists .time span {
	display: none;
	font-size: 12px;
	font-size: 0.75rem;
	white-space: nowrap;
	position: absolute;
	bottom: 12px;
	bottom: 0.75rem;
	left: 0;
	padding: 5px;
	padding: 0.3125rem;
	background-color: #222;
	transform: translateX(-50%);
}
.video-js .time-lists .time:hover span,
.video-js .time-lists .time.active span {
	display: none;
}
/*
.video-js .vjs-fullscreen-control {
	display: none;
}
.video-js .vjs-control-bar .vjs-volume-menu-button {
	border-right: 0;
}
.vjs-fullscreen .vjs-control-bar {
	display: none;
}
*/

/* 전체화면 추가*/
.video-js .vjs-fullscreen-control {
	display: none;
	width: 50px;
	width: 3.125rem;
	border-left: 1px solid #000;
	border-left: 0.0625rem solid #000;
	border-right: 1px solid #363636;
	border-right: 0.0625rem solid #363636;
}
[data-page="orientation"] .video-js .vjs-fullscreen-control,
[data-page="lecture"] .video-js .vjs-fullscreen-control,
[data-page="practice"] .video-js .vjs-fullscreen-control {
	display: block;
	/* display: none;*/
}
.video-js .vjs-control-bar .vjs-volume-menu-button {
	/*border-right: 0;*/
}
.vjs-fullscreen .vjs-control-bar {
	display: none;
}
[data-page="orientation"] #content .wrapper,
[data-page="lecture"] #content .wrapper,
[data-page="practice"] #content .wrapper {
	background-color: transparent;
	background: transparent;
}
/* 자막 추가*/
.vjs-text-track-display{
	bottom:5em !important;
}

.vjs-text-track-display>div>div{
	font-size:19px !important;
}
.vjs-text-track-display>div>div>div{background-color: rgb(0, 0, 0, .7) !important;padding: 2px 10px; box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, .3);}

/* 빠른배속 추가*/
.video-js .vjs-playback-rate {
	display: none;
	width: 50px;
	width: 3.125rem;
}
.video-js .vjs-playback-rate .vjs-playback-rate-value{
	line-height: 48px;
	line-height: 3rem;
	font-size: .85rem;
	border-left: 1px solid #000;
	border-left: 0.0625rem solid #000;
	border-right: 1px solid #363636;
	border-right: 0.0625rem solid #363636;
}
[data-page="orientation"] .video-js .vjs-playback-rate,
[data-page="lecture"] .video-js .vjs-playback-rate,
[data-page="practice"] .video-js .vjs-playback-rate {
	display: block !important;
	/* display: none;*/
}
.video-js .vjs-playback-rate .vjs-menu .vjs-menu-content{
	bottom: 32px;
	bottom: 2rem;
}