@charset "utf-8";
html, body {width:100%; overflow:hidden;}

@font-face{
   font-family:NanumBarunGothic;
   src:url(NanumBarunGothic.eot);
   src:local(*),url(NanumBarunGothic.woff) format('woff')
}
@font-face{font-family:NanumBarunGothic;font-style:normal;font-weight:normal;src:url(../font/NanumBarunGothic.eot);src:local(※),url(../font/NanumBarunGothic.woff) format(woff)}
@font-face{font-family:NanumBarunGothic;font-style:normal;font-weight:bold;src:url(../font/NanumBarunGothic.eot);src:local(※),url(../font/NanumBarunGothic.woff) format(woff)}
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

/* 테블릿과 테스크탑 */
@media all and (min-width:769px){
	body,input,textarea,select,button,table{font-family:NanumBarunGothic, '나눔고딕','돋움',dotum,AppleGothic,serif}
	@font-face{font-family:NanumBarunGothic;font-style:normal;font-weight:normal;src:url(../font/NanumBarunGothic.eot);src:local(※),url(../font/NanumBarunGothic.woff) format(woff)}
	@font-face{font-family:NanumBarunGothicBold;font-style:normal;font-weight:bold;src:url(../font/NanumBarunGothicBold.eot);src:local(※),url(../font/NanumBarunGothicBold.woff) format(woff)}
}


/*reset*/
html, body, div, span, a, img,dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, p, address, pre, cite, iframe,form, fieldset, input, textarea, select, label, table, caption, th, tr, td, button { margin:0; padding:0;}
ul,ol,li {list-style-type:none !important;}
table, th, td{ border-collapse:collapse; }
table caption { font-size:0; line-height:0; text-indent:-9999px; font-size:0;}
legend { width:0; height:0; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; visibility:hidden; }
img {border:0; vertical-align:middle;max-width:100%;}
h1, h2, h3, h4, h5, h6, p {text-align:inherit;}
button{ cursor:pointer;}
input,select,button{vertical-align:middle;}

/* 폰트관련 */
html {font-size:62.5%;} 
body {/*font-family:NBG, '맑은 고딕', 돋움, Dotum; */font-size:14px; line-height:1.6; word-break:break-all; background-color:#5d6164;}

h1   {font-size:20px;} 
h2   {font-size:18px;}
h3   {font-size:17px; } 
h4   {font-size:18px; } 
h5   {font-size:16px; } 
h6   {font-size:14px; }

/*font-color*/
.fc_white {color:#fff !important;}
.fc_black {color:#000 !important;}
.fc_blue {color:#0084ff !important;}
.fc_blue2 {color:#3d63c4 !important;}
.fc_red {color:#ed145b !important;}
.fc_orange {color:#f26522 !important;}
.point {color:#22917f; font-family:NanumBarunGothic;}

/*텍스트정렬*/
.ta_c {text-align:center !important;}
.ta_l {text-align:left !important;}
.ta_r {text-align:right !important;}


/* float */
.fl_l {float:left;}
.fl_r {float:right;}

/* on/off */
.on {display:inline-block;}
.off {display:none;}

/* overflow */
.overflow_h {overflow:hidden;}

/* 라운드 */
.radius_s {-webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; border-radius:3px;}
.radius_m {-webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;}
.radius_l {-webkit-border-radius:8px; -moz-border-radius:8px; -o-border-radius:8px; border-radius:8px;}

/* shadow */
.shadow {-webkit-box-shadow:3px 3px 10px 3px rgba(0,0,0,0.2); -moz-box-shadow:3px 3px 10px 3px rgba(0,0,0,0.2); box-shadow:3px 3px 10px 3px rgba(0,0,0,0.2);}


/*스크롤 스타일*/
.scroll {scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-DarkShadow-Color: #efefef; scrollbar-Highlight-Color: #efefef; scrollbar-Shadow-Color: #efefef}
/* Chrome, Safari용 스크롤 바 */
.scroll::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
.scroll::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background-color:#efefef}
.scroll::-webkit-scrollbar-track {background: #ddd; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
.scroll::-webkit-scrollbar-thumb {height:50px; width:50px; background-color:#333; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}


#header {height:50px; line-height:50px; background-color:#2a2a2a; overflow:hidden;}
#header h1 {float:left; margin-left:10px; font-size:20px; color:#abb9ff; line-height:50px; font-weight:normal;}
#header a.btn_back {display:inline-block; width:20px; height:50px; font-size:0; text-indent:-1000px; vertical-align:middle; background:url('../images/btn_back.svg') no-repeat center center;}
#header .leclist_link {float:right; position:relative;}
#header span.chap_num {display:inline-block; vertical-align:middle; padding:0 5px; height:22px; line-height:22px; color:#fff; font-size:14px; font-weight:normal; background-color:#576aca;}
#header strong.chap_name {display:inline-block; font-weight:normal; vertical-align:middle;}

/*학습목차 보기*/
.btn_leclist_show {display:inline-block; margin-left:10px; width:50px; height:50px; font-size:0; text-indent:-1000px; background:url('../images/btn_list.png') #161616 no-repeat center center; position:absolute; top:0; right:0;}

/* 목차 스타일 */
#chapter_onclick_function {}
#chap_list {display:none; width:300px; /*height:669px;*/ position:fixed; top:0; right:0; z-index:1000;}
#chap_list .title {padding:0 20px; height:50px; background-color:#7b84aa; position:relative;}
#chap_list .title strong {font-weight:normal; line-height:50px; color:#fff; font-size:22px;}
#chap_list .title a {position:absolute; top:10px; right:20px;}

ol.page-list {padding:0; margin:0; width:100%; height:100%; overflow-y:auto;}
ol.page-list > li {padding:1em 1em; margin:0; cursor:pointer; font-size:14px; color:#fff; font-weight:normal; border-bottom:solid 1px #686c70;}
ol.page-list > li:hover {background-color:rgba(0,0,0,0.2);}
span.depth2 {padding-left:10px;}
span.blank {color:#999999;}

#wrap {margin:0 auto; width:100%; position:relative;}
#contents {margin:0 auto; width:1010px; position:relative;}

/*#video {background-image: url(../images/vod_bg.png);}*/
/*#player1 {width:100% !important; height:300px !important;} /*동영상 높이 설정 */*/
#videoView{background-color:#CCC;}
/*#videoControls{width:330px; height:21px;}*/

#videoBtn{
	float:left;
	}
#volBtn{
	float:right;
	padding-top : 3px;
	}
#videoInfo{
	float:left;
	width : 100px;
	padding : 5px 0px 0px 93px;
	}

/* 배속 부분 width값 보정 */
.vjs-speed-button {/*display:none !important;*/} /*첫강의 수강시 배속버튼 hidden, 복습시에 show*/
.vjs-speed-text {width:50px !important;}
.vjs-default-skin .vjs-speed-button div {width:100% !important;}
.vjs-default-skin .vjs-speed-button div span {display:inline-block; width:100% !important;}

/* 이어보기 선택 팝업 */
.modal_continue {display:table; width:100%; height:600px; background:rgba(0,0,0,0.8); position:absolute; top:0; left:0; z-index:1000;}
.modal_continue .continue_middlebox {display:table-cell; vertical-align:middle; text-align:center;}
.modal_continue .continue_middlebox .ment {color:#fff; font-size:16px;}
.modal_continue .continue_middlebox .continue_control {padding:15px;}
.modal_continue .continue_middlebox .continue_control a {display:inline-block; margin:0 5px; padding:0 20px; height:40px; line-height:40px; color:#fff; font-size:16px; text-decoration:none;}
.modal_continue .continue_middlebox .continue_control a:hover {opacity:0.8;}
.modal_continue .continue_middlebox .continue_control a.btn_start {background-color:#238ac4;}
.modal_continue .continue_middlebox .continue_control a.btn_continue {background-color:#7b57c3;}

/* 하단 과정명 및 로고 */
.lect_info {height:39px; line-height:40px; font-size:16px; text-align:center; border-bottom:solid 1px #fff; background:url('../images/footer_bg.png') repeat-x; overflow:hidden;}
.logo {float:left; margin-left:10px;}
.lect_name {float:right; margin-right:10px; color:#666666;}

/************************************************************************************
responsive web design area 
************************************************************************************/

/* Desktop */
@media screen and (min-width:769px) {
	a.btn_back {display:none !important;}
	ol.page-list {height:100%; background-color:rgba(74,79,84,0.95); overflow-y:auto;}
	#contents {display:table;}
	#video {display:table-cell; vertical-align:middle;}
}

/* Mobile 및 Tablet */
@media screen and (max-width:768px) {
	#header h1 {float:none; display:block; line-height:40px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
	#contents {width:100%;}
	#player1 {width:100% !important; height:230px !important;} /*동영상 높이 설정 */

	/* 목차 스타일 */
	#chap_list {display:block !important; width:100%; position:fixed; top:280px;}
	#chap_list .title {display:none;}

	ol.page-list {padding:0; margin:0; width:100%; background-color:rgba(74,79,84,0.95); overflow-y:auto;}
	ol.page-list > li {padding:1em; margin:0; cursor:pointer; font-size:14px; color:#fff; font-weight:normal !important; border-bottom:solid 1px #565b5f;}
	ol.page-list > li:hover {background-color:rgba(0,0,0,0.2);}

	.lect_info {display:none;}
}