@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:#333333; 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:#42413C; text-decoration:none;}
a:visited{color:#6E6C64; 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:60px;}
#header h1{float:left; margin:15px 0 0 20px; font-weight:bold; color:#f2655b; font-size:23px; letter-spacing:-0.1em;}/* 과목명 */
#header h2{width:370px; float:left; margin:10px 0 0 15px; color:#111; font-size:14px; letter-spacing:-0.1em;}/* 주차명 */
#header h2 .lesson{display:block; margin-top:5px;}/* 차시명 */
#header .btn{float:right; margin:2px 2px 0 0; height:20px;}
#header .btn li{float:left; width:64px; height:54px; margin:0 1px;}
#header .btn li a{width:64px; height:54px; display:block;}
#header .btn .btn00{background-image:url(../image/top_btn00.gif);}
#header .btn .btn00:hover{background-image:url(../image/top_btn00_on.gif);}
#header .btn .btn01{background-image:url(../image/top_btn01.gif);}
#header .btn .btn01:hover{background-image:url(../image/top_btn01_on.gif);}
#header .btn .btn02{background-image:url(../image/top_btn02.gif);}
#header .btn .btn02:hover{background-image:url(../image/top_btn02_on.gif);}
#header .btn .btn03{background-image:url(../image/top_btn03.gif);}
#header .btn .btn03:hover{background-image:url(../image/top_btn03_on.gif);}
#header .btn .btn04{background-image:url(../image/top_btn04.gif);}
#header .btn .btn04:hover{background-image:url(../image/top_btn04_on.gif);}
#header .btn .btn05{background-image:url(../image/top_btn05.gif);}
#header .btn .btn05:hover{background-image:url(../image/top_btn05_on.gif);}

/* 목차 메뉴 */
#gnb{width:125px; height:494px; padding:20px 10px; background-color:#fcc277; left:0px; top:58px; position:absolute;}
#gnb ul{font-size:13px; font-weight:bold;}
#gnb ul li{padding:7px 15px; display:block; border-bottom:1px solid #111;}
#gnb ul li a{color:#111; width:100px; display:block;}
#gnb ul li:hover{background:url(../image/blt02.png) no-repeat left 9px;}
#gnb ul li.on{background:url(../image/blt02.png) no-repeat left 9px;}
#gnb ul li.sub{font-size:12px; border-bottom:1px dotted #794705;}
#gnb ul li.sub a{color:#794705;}
#gnb ul li.sub:hover{border-bottom:1px solid #111;}

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

/* 프로그레스바 */
.progress_bar{left:20px; top:654px; position:absolute;}
.progress_bar ul{float:left;}
.progress_bar ul li{float:left;}
.progress_bar ul .progress_bg01{width:7px; height:15px; background:url(../image/progress_bg01.png) no-repeat left top;}
.progress_bar ul .progress_bg02{width:300px; height:15px; background:url(../image/progress_bg02.png) repeat-x left top; cursor:pointer;}
.progress_bar ul .progress_bg03{width:7px; height:15px; background:url(../image/progress_bg03.png) no-repeat left top;}
.progress_bar .time_loading{margin-top:3px; width:300px; height:15px; background:url(../image/progress_loading.gif) repeat-x left top;}
.progress_bar .time_on{margin-top:3px; width:150px; height:15px; background:url(../image/progress_on.gif) repeat-x left top;}
.progress_bar .icon{margin:-35px 0 0 -10px; width:35px; height:30px;  background:url(../image/progress_icon.png) no-repeat center bottom; z-index:1; position:relative; }
/* 영상컨트롤 시작 정지 버튼 */
.action{float:left;}
.action a{width:25px; height:15px; 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:13px; color:#fff; font-weight:bold;}
/* 영상컨트롤러 > 볼륨컨트롤 */
.volume{float:left; width:100px; margin-left:25px;}
.volume a{height:16px; 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 23px; 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{float:left; width:170px; margin:-5px 0 0 45px; display:block; cursor:pointer;}
.search input{float:left; border:1px solid #493c25; background-color:#fff; width:140px; height:20px; padding-left:2px;}
.search a.search_icon{float:right; background:url(../image/search_icon.png) no-repeat right top; width:24px; height:24px;}

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

/* 버튼 */
.btn_blue{background-color:#5faee3; border:0; color:#fff; font-size:14px; width:105px; height:30px; font-weight:bold; cursor:pointer;}