@charset "utf-8";

/* @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); */
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}

/* CSS Document */
*{margin:0; padding:0; font-family:'Noto Sans KR', sans-serif;}
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;}
.blind{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}

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

/* 상단 header 정보 */
#header{width:100%; height:70px;}
#header:after{content:"";display:block;clear:both;visibility:hidden;}
#header h1{float:left; height:50px; margin:16px 0 0 20px; font-weight:bold; color:#fff; font-size:24px; letter-spacing:-1px;}/* 과목명 */
#header .titlearea{float:left; width:325px; margin:12px 0 0 20px; color:#fff; letter-spacing:-1px; overflow:hidden;}
#header .titlearea h2{font-weight:normal; font-size:14px; white-space:nowrap; overflow:hidden;}/* 주차명 */
#header .titlearea h3{margin-top:3px; font-weight:normal; font-size:14px; white-space:nowrap; overflow:hidden; white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}/* 차시명 */
#header .titlearea span{background-color:#36589d; margin-right:5px; display:inline-block; text-align:center; width:65px; height:20px; line-height:18px; border-radius:20px;}
#header .btn{float:right; position:relative; top:15px; right:20px;}
#header .btn li{display:inline-block; vertical-align:top; text-align:center; width:44px; height:24px;}
#header .btn .btn01{background:url(../image/top_btn01.png) no-repeat center top;}
#header .btn .btn02{background:url(../image/top_btn02.png) no-repeat center top;}
#header .btn .btn02 span{font-weight:bold; letter-spacing:-0.5px; color:#ec4c38; position:absolute; top:0; text-align:center; width:29px;}
#header .btn .btn03{background:url(../image/top_btn03.png) no-repeat center top;}
#header .btn .btn04{background:url(../image/top_btn04.png) no-repeat center top;}
#header .btn .btn05{background:url(../image/top_btn05.png) no-repeat center top; display:none;}
#header .btn .btn06{background:url(../image/top_btn06.png) no-repeat center top;}
#header .btn .btn07{background:url(../image/top_btn07.png) no-repeat center top;}
#header .btn .btn08{background:url(../image/top_btn08.png) no-repeat center top;}
#header .btn .btn09{background:url(../image/top_btn09.png) no-repeat center top;}
#header .btn li a{font-size:11px; color:#fff; height:22px; display:inline-block; padding-top:24px; position:relative}

/* 목차 메뉴 */
#gnb{position:relative; z-index:1;}
#gnb ul{position:absolute; width:135px; top:0; left:10px; font-size:13px; font-weight:bold; letter-spacing:-1px;}
#gnb ul li{padding:4px 5px 4px 10px; display:block; background-color:#d8e0e6;}
#gnb ul li a{display:block;}
#gnb ul li.sub{font-weight:normal; background-color:#fff; border-bottom:1px solid #e2e2e2;}
#gnb ul li.sub a{color:#555;}
#gnb ul li.on{}
#gnb ul li.on a{color:#284ed0;}

#gnb2020{position:relative; z-index:1;}
#gnb2020 ul{position:absolute; width:135px; top:-1px; left:10px; font-size:13px; letter-spacing:-1px;}
#gnb2020 ul li{display:block; background-color:#fff;}
#gnb2020 ul li a{display:block; color:#555; border-top:1px solid #e2e2e2; padding:4px 5px 4px 0; margin-left:10px;}
#gnb2020 ul li a.on{color:#284ed0; font-weight:500;}
#gnb2020 ul li.top{background-color:#d8e0e6; font-weight:bold; margin-top:1px;}
#gnb2020 ul li.top a{color:#000; border-top:none; }
#gnb2020 ul li.top a.on{background-color:#092d59; color:#fff; padding-left:10px; margin-left:0;}

/* 하단 영역 */
#bottom{position:absolute; height:50px; width:85%; right:0; bottom:0;}
#bottom:after{content:"";display:block;clear:both;visibility:hidden;}

/* 프로그레스바 */
#bottom .progress_bar{float:left; width:84%; padding-top:18px;}
#bottom .progress_bar:after{content:"";display:block;clear:both;visibility:hidden;}
#bottom .progress_bar .progress_bg{float:left; width:185px; height:3px; background:url(../image/progress_bg.png) repeat-x left top; position:relative; top:5px; cursor:pointer;}
#bottom .progress_bar .time_loading{width:185px; height:3px; background:url(../image/progress_loading.png) repeat-x left top; position:absolute;}
#bottom .progress_bar .time_on{width:185px; height:3px; background:url(../image/progress_on.png) repeat-x left top; position:absolute;}
#bottom .progress_bar .icon{width:10px; height:10px; background:url(../image/progress_icon.png) no-repeat center center; position:relative; top:-3px;}
/* 영상컨트롤 시작 정지 버튼 */
#bottom .progress_bar .action{float:left; width:25px; margin-left:40px;}
#bottom .progress_bar .action a{width:12px; height:13px; display:block; cursor:pointer;}
#bottom .progress_bar .action a.play{background:url(../image/mov_ic_play.png) no-repeat left center;}
#bottom .progress_bar .action a.pause{background:url(../image/mov_ic_pause.png) no-repeat left center;}
/* 영상 컨트롤러 > 시간 */
#bottom .progress_bar .time_info{float:left; width:92px; font-size:12px; color:#fff; text-align:right; margin-top:-3px;}
/* 영상컨트롤러 > 볼륨컨트롤 */
#bottom .progress_bar .volume{float:left; width:120px; margin-left:20px;}
#bottom .progress_bar .volume a{width:22px; height:13px; display:inline-block;}
#bottom .progress_bar .volume a.on{background:url(../image/mov_ic_volume.png) no-repeat left center;}
#bottom .progress_bar .volume a.off{background:url(../image/mov_ic_volume_off.png) no-repeat left center;}
#bottom .progress_bar .volume p{width:65px; height:14px; display:inline-block; cursor:pointer;}
#bottom .progress_bar .v_graph0{background:url(../image/mov_vomule.png) no-repeat left bottom;}
#bottom .progress_bar .v_graph1{background:url(../image/mov_vomule.png) no-repeat left -36px;}
#bottom .progress_bar .v_graph2{background:url(../image/mov_vomule.png) no-repeat left -24px;}
#bottom .progress_bar .v_graph3{background:url(../image/mov_vomule.png) no-repeat left -12px;}
#bottom .progress_bar .v_graph4{background:url(../image/mov_vomule.png) no-repeat left top;}
/* 검색 */
#bottom .progress_bar .search{float:left; width:200px; display:block; position:relative; top:-7px;}
#bottom .progress_bar .search select{border:1px solid #20202d; background-color:#fff; width:65px; height:28px; font-size:12px;}
#bottom .progress_bar .search input{border:1px solid #20202d; background-color:#fff; width:90px; height:26px; font-size:12px; padding:0 5px; margin-left:-4px;}
#bottom .progress_bar .search a.search_icon{float:right; background:#fff url(../image/search_icon.png) no-repeat left center; width:30px; height:26px; position:relative; top:1px; left:-5px;}

/* 페이지 이동 메뉴 */
#snb{float:left; width:16%; position:relative;}
#snb ul{margin-top:12px;}
#snb ul:after{content:"";display:block;clear:both;visibility:hidden;}
#snb ul li{float:left;}
#snb ul .page_prev{background:url(../image/page_arr_perv.png)no-repeat left center; width:18px; height:26px; display:block; cursor:pointer;}
#snb ul .page_next{background:url(../image/page_arr_next.png)no-repeat center center; width:18px; height:26px; display:block; cursor:pointer;}
#snb ul .page_now{background:url(../image/page_arr_now.png)no-repeat right center; width:54px; height:23px; text-align:center; padding-top:3px; font-size:12px; color:#fff;}
/* 다음페이지 이동 아이콘 */
.info_next{width:68px; height:77px; background:url(../image/inf_page_next.png) no-repeat left bottom; position:absolute; top:-55px; right:20px; z-index:9;}

/* 컨텐츠 영역 */
#container{height:560px; position:relative;}
#container .content{width:835px; height:560px; position:absolute; top:0; right:0; letter-spacing:-1px; box-shadow:-5px 0 10px 1px rgba(0,0,0,0.1); z-index:2; overflow:hidden;}