*:focus-visible{outline-color:#FF00FF!important;}
.header {width : 100%; color : #fff;}
.header * {font-family: 'NanumSquareR'; font-size: 14px;}
/* .header *:focus {outline : none;} */
.header button {border : none; background : none; padding : 0; margin : 0; cursor: pointer;}
.header .wrap {width : 810px; padding : 0 20px; margin : 0 auto; }
.header .wrap:after{ content: ''; display: block; clear: both;}
.header .bgc_bk {background-color: #27272f;}
.header .bgc_darkGray {background-color: #363640;}
.header .right {float : right;}
.header .toolbars {padding : 10px 0;}
.header .toolbars .PC_Btn {display : inline-block; font-weight : bold; line-height : 30px; padding : 0 15px; color: #333; background : #ccc; border : none; border-radius : 5px;}
.header .toolbars .M_Btn {display: none; vertical-align: middle;}
.header .toolbars .rightMenuBtn.M_Btn {margin-top : 5px;}
.header .toolbars .finishInfo {display : inline-block; margin-left : 10px; line-height : 30px;}
.header .countdown {color : #FFD500;}
.header .playerInfo {padding : 15px 0;}
.header .playerInfo::after {display : block; content : ""; clear : both;}
.header .progressCnt {position : relative; display : inline-block; width : 48%; height : 40px; box-sizing : border-box;}
.header .videoProgress {float : left;}
.header .pageInfo {float : right;}
.header .progressCnt .right {line-height : 40px;}
.header .progressCnt .label {position : absolute; top : 0; left : 0; font-size : 18px;}
.header .progressCnt small {position : absolute; bottom : 0; left : 0; font-family : 'µ¸¿ò'; font-size : 11px; color : #aaa;}
.header .videoProgress .progress {position : relative; display : inline-block; width : 80px; height : 12px; background : #fff; border-radius : 6px; margin-right : 10px; vertical-align: middle;}
.header .videoProgress .progress .progressBar {position : absolute; display : inline-block; width : 60%;  height : 100%; background : #6DCDFF; border-radius: 6px;}
.header .videoProgress .percentage {font-size : 22px; color : #6DCDFF;}
.header .pageInfo ol {display : flex; margin : 0; padding : 0;}
.header .pageInfo li {display : inline-block; width : 24px; height: 24px; line-height: 22px; text-align : center; margin : 8px; border: 2px solid transparent; color : #787878;}
.header .pageInfo li.on {color : #6DCDFF; border : 2px solid #6DCDFF; border-radius : 14px;}

.header .menu {box-shadow : 0 4px 10px rgba(0,0,0,0.4); height: 100%; overflow-y: auto; transition : all .3s; position: relative;}
.menu .title {padding : 15px 20px; width: 360px; position: fixed; box-sizing: border-box;}
.menu.rightMenu .title { width: 320px; }
.menu .title h2 {display : inline-block; font-size: 20px; line-height : 30px;}
.menu .closeBtn {position: fixed; top: 10px; left: 300px; }
.menu.rightMenu .closeBtn { left: inherit; right: 10px; }
.menu li {background : #4E4E5B; border-bottom : 1px solid #27272f;}
.menu h4 {display : inline-block; font-size : 18px; line-height: 30px;}
.header .leftMenu {
  left: -100%;
  /* transform : translateX(-370px);
  -ms-transform : translateX(-370px);
  -webkit-transform : translateX(-370px);
  -moz-transform : translateX(-370px);
  -o-transform : translateX(-370px); */
  width : 360px;
  background: #363640;
  transition : all .3s;
}
.header .leftMenu .date {padding : 10px 20px; background: #363640;}
.header .leftMenu .date span {font-size : 12px;}
.header .leftMenu h4 {width : 65px;}
.header .leftMenu h5 {display : inline-block; width : 65px; font-size : 16px; line-height: 50px; font-weight : normal; margin-left : 20px;}
.header .leftMenu .classInfo .studyBtn {display : inline-block;  width : 90px; height: 50px; color : #fff; border : none;float:right;}
.header .leftMenu .classInfo .studyBtn::after {display : block; line-height: 50px;}
.header .leftMenu .uncompleted::after {content : "¹Ì¿Ï·á"; color : #aebdcd;}
.header .leftMenu .completion::after {content : "¿Ï·á"; color : #fff;}
.header .leftMenu .past .studyBtn::after {content : "º¹½ÀÇϱâ"; background : #727284;}
.header .leftMenu .ing .studyBtn::after {content : "ÇнÀÇϱâ"; background : #0388ee;}
.header .leftMenu .ing .date *,
.header .leftMenu .ing h5 {color : #6DCDFF;}
.header .leftMenu .future .classInfo {display : none;}
.header .rightMenu {float : right; width : 320px; background: #363640; overflow : hidden;}
.header .rightMenu .search {background: #363640; border : none;}
.header .rightMenu .search form {position : relative; height : 30px;}
.header .rightMenu .search form img {position : absolute; top : -5px;}
.header .rightMenu .search .naver {left : -7px;}
.header .rightMenu .search input {position : absolute; left : 23px; width : 215px; height : 28px; padding : 0 5px; margin : 0 10px; color : #fff; background : transparent; border : none; border-bottom : 1px solid #fff; border-radius: 0;}
.header .rightMenu .search .searchBtn img{right : -5px;}
.header .rightMenu li {padding : 10px 20px;}
.header .rightMenu li h4 {font-weight : normal;}
.header .rightMenu li .plusBtn {float : right; margin-top : -5px; margin-right : -8px;}

.timetables { margin-top: 69px; }
/* .header button:focus,
.hearder .searchBtn:focus,
.plusBtn:focus { outline: #006cd0 dashed 1px; } */

.header .nav {position: fixed; width: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; transition : left .3s; display: none}
.header .nav.on {
  left: 0;
  display: block;
  /* transform : translateX(0);
  -ms-transform : translateX(0);
  -webkit-transform : translateX(0);
  -moz-transform : translateX(0);
  -o-transform : translateX(0); */
}

.header .leftNav {
  left: -100%;
  /* transform : translateX(-100%);
  -ms-transform : translateX(-100%);
  -webkit-transform : translateX(-100%);
  -moz-transform : translateX(-100%);
  -o-transform : translateX(-100%); */
}
.header .rightNav {
  left: 100%;
  /* transform : translateX(100%);
  -ms-transform : translateX(100%);
  -webkit-transform : translateX(100%);
  -moz-transform : translateX(100%);
  -o-transform : translateX(100%); */
}
.header .nav.on .leftMenu {
  left: 0;
  /* transform : translateX(0);
  -ms-transform : translateX(0);
  -webkit-transform : translateX(0);
  -moz-transform : translateX(0);
  -o-transform : translateX(0); */
}
.overlay {display : none; position : fixed; top : 0; left : 0; width : 100%; height:  100%; background : rgba(0,0,0,.7); z-index: 998;}
.overlay.on {display : block;}

.alert {
  padding: 16px;
  line-height: 1.6;
  max-width: 540px;
  width: 90%;
  border: 1px solid transparent; border-radius: 4px;
  position: fixed; left: 50%; top: 50%; background-color: #fff; transform: translate(-50%); z-index: 999;
}
.alert.info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert.warning {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  color: #333;
  background-image: none;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  border-color: #ccc;
}

.btn.focus,
.btn:focus, .btn:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
  text-decoration: none;
}

.btn.ok {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.btn.ok.focus,
.btn.ok:focus, .btn.ok:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}



.buttons {
  margin-top: 20px;
}

.buttons .btn {margin-left: 5px;}
.buttons .btn:first-child {margin-left: 0;}
.text-right {text-align: right;}
.sr-only{position:absolute; display:block; width:1px;height:1px;overflow:hidden;padding:0;margin:-1px;border:0;clip:rect(0, 0, 0, 0);}


@media screen and (max-width: 812px) {
.header .wrap {width : 100%; box-sizing : border-box;}
.header .playerInfo {height : auto; padding : 10px 0;}
.header .videoProgress {float : none;}
.header .toolbars .PC_Btn {display : none;}
.header .toolbars .M_Btn {display : inline-block;}
.header .toolbars .finishInfo span {font-size : 12px;}
.header .progressCnt {height : 30px; line-height:  30px;}
.header .progressCnt .right {line-height : 30px;}
.header .progressCnt small {display : none;}
.header .videoProgress small {display : block; background : #363640; top : 0; right : 0; left : auto; z-index: 9; width: 200px; text-align: right;}
.header .progressCnt.active small {display: none !important;}
.header .pageInfo li {margin : 4px 6px;}
}

@media screen and (max-width: 600px) {
.header .progressCnt {width : 100%;}
.header .playerInfo {padding : 15px 0;}
.header .videoProgress {margin-bottom : 10px;}
.header .pageInfo {float : none;}
}

@media screen and (max-width: 360px) {
.header .toolbars .M_Btn {width: 24px;}
.header .leftMenu {width: 320px;}
.leftMenu > .title { width: 320px; }
.header .leftMenu h4 {width: 50px; font-size: 16px;}
.header .leftMenu .date span {font-size: 10px;}
.header .leftMenu h5 {width: 50px; font-size: 14px;}

}

/*20190225*/
#progress-container {
  position: relative;
}
.progress-complete {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, .6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
.progress-complete span {opacity: 1; font-size: 18px;}

 #sidebar-tools .menu li {
   position: relative;
   box-sizing: border-box;
   min-height: 40px;
}
 #sidebar-tools .menu .plusBtn {
  float: none;
  position: absolute;
  display: block;
  top: 6px;
  right: 20px;
  margin-top: 0;
}


.M_return {display : block; width: 100%; padding : 15px; text-align: center; background : #ff8d00; color : #fff;}