@charset "utf-8";
html, body {width:100%; height: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}
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-size:14px; line-height:1.6; word-break:break-all; background-color:#fff;}

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; background-color:#2a2a2a; /*overflow:hidden;*/}
#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 h1 {margin-left:10px;/* height:50px;*/ line-height:50px; font-size:20px; color:#b7a0e4; font-weight:normal;}
#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:#8b70bf;}
#header strong.chap_name {display:inline-block; vertical-align:middle; font-weight:normal;}

#wrap {margin:0 auto; width:100%; height:790px; background-color:#3d3a3f; position:relative;}
#contents {padding-left:400px; position:relative;}
#left {float:left; width:400px; margin-left:-400px; background-color:#3d3a3f;}
#right {float:right: width:100%; background-color:#fff;}
iframe#page {width:100%;}
#page_menu {height:43px; background-color:#fff; border-top:solid 1px #ccc; box-sizing:border-box; overflow:hidden;}
#page_menu .left {float:left; padding-left:20px; padding-top:5px; width:60%; text-align:left; box-sizing:border-box; overflow:hidden;}
#page_menu .right {float:right; padding-right:20px; line-height:37px;}
#page_menu input {cursor:pointer;}

/* 과정명 */
#page_menu .left .letname {font-size:16px; font-weight:600; line-height:1.2;}

/* 학습목차 버튼 */
a.btn_leclist_show {float:left; display:inline-block; width:40px; height:50px; text-align:center;}
a.btn_leclist_show .h_line {display:inline-block; width:40px; height:50px; vertical-align:middle;}
a.btn_leclist_show .h_line span {display:block; width:30px; height:6px; border-bottom:solid 2px #000;}
a.btn_leclist_show .title {display:none; /*display:inline-block; */line-height:32px; float:left; color:#333; vertical-align:middle;}

/* 보기모드 선택 */
.view_control {float:left; padding-top:4px; margin-left:10px;}
a.btn_view_doc {} /* 교안만 보기 */
a.btn_view_total {} /* 교안+영상 보기 */

/*#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;}

/* 목차 스타일 */
#chap_list {}
#chapter_onclick_function{}

ol.page-list {padding:0; margin:0; width:100% !important; height:415px; overflow-y:auto;}
ol.page-list > li {padding:0.5em; margin:0; cursor:pointer; font-size:14px; border-bottom:solid 1px #4a474c;}
ol.page-list > li:hover {background-color:rgba(0,0,0,0.2);}
span.depth2 {padding-left:10px;}
span.depth3 {padding-left:25px;}
span.blank {color:#999999;}

/* 이어보기 선택 팝업 */
.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;}



/************************************************************************************
responsive web design area 
************************************************************************************/
@media screen and (min-width:769px) {
	#wrap {width:100%;}
	a.btn_back {display:none !important;}

	#chap_list {display:block !important;}
	#chap_list .title{display:none;}
	
	#right {height:740px;}
	iframe#page {height:690px;}

	#page_menu .left .btn_leclist_show {display:none;}
	#page_menu .left .view_control {display:none;}
}

@media screen and (max-width:768px) {
	#wrap {width:100%; height:100%;}
	#header {position:fixed; top:0; left:0; width:100%; z-index:100;}
	#header h1 {display:block; line-height:40px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
	a.btn_back {display:inline-block;}
	#contents {padding-left:0; width:100%;}

	#left {float:none; margin-left:0; width:100%; background-color:#55504a; position:fixed; top:50px; left:0; z-index:100;}
	#player1 {width:100% !important; height:250px !important;} /*동영상 높이 설정 */

	#right {float:none; padding:300px 0 50px; width:100%; height:100%; background-color:#fff; position:fixed; top:0; left:0; z-index:99; box-sizing:border-box;}
	.video_hidden #video {position:absolute; top:-500px;}
	.video_hidden #right {padding:50px 0 50px;}

	#chap_list {display:none; width:100%; height:100%; position:fixed; top:0; left:0; z-index:1000;}
	#chap_list .title {padding:0 20px; height:50px; background-color:#7a7395; position:relative;}
	#chap_list .title strong {font-weight:normal; line-height:50px; color:#fff; font-size:22px;}
	#chap_list .title a {position:absolute; top:7px; right:10px;}
	#chapter_onclick_function {background-color:rgba(54,63,64,0.95); overflow-y:auto;}
	ol.page-list {padding:0; margin:0; width:100% !important; height:515px; overflow-y:auto;}
	ol.page-list > li {padding:1em; margin:0; cursor:pointer; font-size:14px; font-weight:normal; border-bottom:solid 1px #3d3f3e;}
	ol.page-list > li:hover {background-color:rgba(0,0,0,0.2);}

	iframe#page {width:100%; height:100%; box-sizing:border-box;}
	#page_menu {width:100%; border-top:solid 1px #ccc; position:fixed; left:0; bottom:0;}
	#page_menu .left .btn_leclist_show {display:block;}
	#page_menu .left .view_control {display:block;}
	#page_menu .left .letname {display:none;}

	.pg_contents {padding:30px; margin-bottom:50px !important;}
	.contents_in {padding:20px;}
}