@charset "utf-8";

@font-face {
    font-family:'NanumGothic';
    src: url('NanumGothic.eot');
    src: url('NanumGothic.eot?#iefix') format('embedded-opentype'),
         url('NanumGothic.woff') format('woff'),
         url('NanumGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* CSS Document */
*{margin:0; padding:0; font-family:"나눔고딕",NanumGothic,AppleGothic,"돋움",dotum,"굴림",gulim;}
body{margin:0; padding:0; color:#111; overflow-y: auto; overflow-x: hidden; font-size:12px;}
/* Element/tag selectors */
ul, ol, dl{padding:0; margin:0; list-style:none;}
a img{border:none;}
a:link{color:#111; text-decoration:none;}
a:visited{color:#111; text-decoration:none;}
a:hover, a:active, a:focus{text-decoration: none;}
.hidden{display:none;}

/* layout */
#wrap{width:980px; height:680px; background-image:url(../image/background.jpg); margin:0 auto; position:relative; display:none;}

/* 상단 header 정보 */
#header{width:100%; height:70px;}
#header h1{float:left; margin:18px 0 0 15px; font-weight:bold; color:#fff; font-size:24px; letter-spacing:-0.1em;}/* 과목명 */
#header h2{width:370px; float:left; margin:14px 0 0 15px; color:#fff; font-size:14px; letter-spacing:-0.1em; overflow:hidden; height:39px;}/* 주차명 */
#header h2 .lesson{display:block; margin-top:5px;}/* 차시명 */
#header .btn{float:right; margin:15px 15px 0;}
#header .btn li{float:left; margin:0 5px;}
#header .btn li a{width:39px; height:36px; display:block;}
#header .btn .btn01{background-image:url(../image/top_btn01.png);}
#header .btn .btn01:hover{background-image:url(../image/top_btn01_on.png);}
#header .btn .btn02{background-image:url(../image/top_btn02.png);}
#header .btn .btn02:hover{background-image:url(../image/top_btn02_on.png);}
#header .btn .btn03{background-image:url(../image/top_btn03.png);}
#header .btn .btn03:hover{background-image:url(../image/top_btn03_on.png);}
#header .btn .btn04{background-image:url(../image/top_btn04.png);}
#header .btn .btn04:hover{background-image:url(../image/top_btn04_on.png);}
#header .btn .btn05{background-image:url(../image/top_btn05.png);}
#header .btn .btn05:hover{background-image:url(../image/top_btn05_on.png);}
#header .btn .btn06{background-image:url(../image/top_btn06.png);}
#header .btn .btn06:hover{background-image:url(../image/top_btn06_on.png);}
#header .btn .btn07{background-image:url(../image/top_btn07.png);}
#header .btn .btn07:hover{background-image:url(../image/top_btn07_on.png);}

/* 목차 메뉴 */
#gnb{width:125px; left:10px; top:90px; position:absolute; text-align:center;}
#gnb ul{font-size:13px; font-weight:bold;}
#gnb ul li{padding:5px 10px; margin:5px 0; display:block; border:1px solid #555; background-color:#fff;}
#gnb ul li a{width:105px; display:block;}
#gnb ul li:hover{background-color:#cbf8f5;}
#gnb ul li.sub{font-size:11px; font-weight:normal; margin-top:-6px;}
#gnb ul li.sub a{color:#111;}
#gnb ul li.on{background-color:#111;}
#gnb ul li.on a{color:#fff;}

/* 페이지 이동 메뉴 */
#snb{right:20px; top:644px; position:absolute;}
#snb ul li{float:left;}
#snb ul .page_prev{background-image:url(../image/page_arr_perv.png); width:27px; height:24px; display:block; cursor:pointer;}
#snb ul .page_next{background-image:url(../image/page_arr_next.png); width:27px; height:24px; display:block; cursor:pointer;}
#snb ul .page_now{background-image:url(../image/page_arr_now.png); width:80px; height:21px; text-align:center; font-weight:bold; padding-top:3px; font-size:13px; color:#fff;}
/* 다음페이지 이동 아이콘 */
.info_next{width:51px; height:42px; background:url(../image/inf_page_next.png) no-repeat right bottom; position:absolute; right:3px; bottom:27px;}

/* 프로그레스바 */
.progress_bar{left:20px; top:650px; position:absolute;}
.progress_bar ul{float:left;}
.progress_bar ul li{float:left;}
.progress_bar ul .progress_bg01{width:7px; height:13px; background:url(../image/progress_bg01.png) no-repeat left top;}
.progress_bar ul .progress_bg02{width:300px; height:13px; background:url(../image/progress_bg02.png) repeat-x left top; cursor:pointer;}
.progress_bar ul .progress_bg03{width:7px; height:13px; background:url(../image/progress_bg03.png) no-repeat left top;}
.progress_bar .time_loading{margin-top:3px; width:300px; height:13px; background:url(../image/progress_loading.gif) repeat-x left top;}
.progress_bar .time_on{margin-top:3px; width:150px; height:13px; background:url(../image/progress_on.gif) repeat-x left top;}
.progress_bar .icon{margin:-17px 0 0 -5px; width:15px; height:14px;  background:url(../image/progress_icon.png) no-repeat center bottom; z-index:1; position:relative; }
/* 영상컨트롤 시작 정지 버튼 */
.action{float:left;}
.action a{width:25px; height:16px; margin-top:-2px; display:block; cursor:pointer;}
.action a.play{background:url(../image/mov_ic_play.png) no-repeat left center;}
.action a.pause{background:url(../image/mov_ic_pause.png) no-repeat left center;}
/* 영상 컨트롤러 > 시간 */
.time_info{float:left; margin:-2px 0 0 10px; font-size:12px; color:#fff; font-weight:bold;}
/* 영상컨트롤러 > 볼륨컨트롤 */
.volume{float:left; width:100px; margin-left:25px;}
.volume a{height:15px; margin-top:-3px; display:block;}
.volume a.on{background:url(../image/mov_ic_volume.png) no-repeat left center;}
.volume a.off{background:url(../image/mov_ic_volume_off.png) no-repeat left center;}
.volume p{width:105px; height:17px; margin:-15px 0 0 25px; display:block; cursor:pointer;}
.v_graph0{background:url(../image/mov_vomule.png) no-repeat left bottom;}
.v_graph1{background:url(../image/mov_vomule.png) no-repeat left -51px;}
.v_graph2{background:url(../image/mov_vomule.png) no-repeat left -34px;}
.v_graph3{background:url(../image/mov_vomule.png) no-repeat left -17px;}
.v_graph4{background:url(../image/mov_vomule.png) no-repeat left top;}
/* 검색 */
.search{width:187px; left:600px; top:-5px; position:absolute;}
.search input{border:1px solid #333; background-color:#fff; border-radius:10px; width:150px; height:20px; padding-left:10px;}
.search a.search_icon{float:right; background:url(../image/search_icon.png) no-repeat right top; width:17px; height:16px; margin:2px;}

/* 컨텐츠 영역 */
#container{height:560px; margin:0 auto;}
#container .content{width:830px; margin:0 auto; float:right; letter-spacing:-0.1em; margin-top:40px;}