@charset "utf-8";
/* CSS Document */

html { overflow-y : scroll; }
/* 기본 CSS*/
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; font-size: 12px; }
ul,li{ list-style:none; margin:0; padding:0;}
/*label, input, select{ vertical-align: middle; }7에서 정렬오류*/
textarea, select,input {  font-family:'맑은 고딕', 'Malgun Gothic', '나눔 고딕', 'Nanum Gothic', 'dotum'; font-size:12px; }
input { margin: 0; padding: 0; border-radius: 0; }
table{border-collapse:collapse;}
input[type=text], input[type=password], input[type=submit], input[type=image] { -webkit-appearance: none;  }
button { border-radius: 0; font-size: 1em; -webkit-appearance: none;  }
table, tr, td, div { font-size: 12px; }
p { margin: 0; padding:0; word-break: break-all;  }
dl,dt,dd{ margin:0; padding:0;}
pre { overflow-x: scroll;  }
a:link, a:visited { text-decoration: none;  }
a:hover, a:focus, a:active { text-decoration: none;  }
.float_r{ float:right}
.float_l{ float:left}
.text_c{ text-align:center}
.text_r{ text-align:right}
.mat10{ margin-top:10px}
.mat20{ margin-top:20px}
.clear_b{ clear:both}

a.rollover img { border:0; display:inline; }
a.rollover img.over { display:none; }
a.rollover img.click { display:none; }
a.rollover:hover { border:0 }
a.rollover:hover img { display:none; }
a.rollover:hover img.over { display:inline; }
A.img { display:inline; border:0; }
img{ border:0;}


/* Layout CSS */
body {  margin: 0; padding: 0; border: 0; font-family:'맑은 고딕', 'Malgun Gothic', '나눔 고딕', 'Nanum Gothic', 'dotum'; font-size:12px; line-height:18px}
.bg{ background:url(../img/common/bg.jpg) top center repeat-y;}
.wrap { width : 1000px; margin : 0 auto;  position:relative ;}

footer {padding:10px 0 ;clear:both; display:block}
footer p.copy{font-size:11px; color:#fff; font-weight:bold; text-align:center; clear:both;}

/*로그인*/
.login_box{ position:absolute;width:638px; height:546px; top:50%; left:50%; margin-top:-273px; margin-left:-319px;  }
.login_box h1{ text-align:center}
.login_bg{width:532px; height:284px; background:url(../img/login/bg.png) no-repeat;  margin:0 auto; margin-top:50px; margin-bottom:20px}
.login_bg:after { height: 0px; clear: both; display: block; visibility: hidden; content: "."; }
.login_bg .img{ margin-left:-43px; margin-top:40px; z-index:2; float:left; position:absolute }
.login_bg fieldset { width: 292px; position: absolute; margin-left: 130px; margin-top: 57px; float:left; z-index:10}
.login_bg fieldset .join { margin: 24px 0 0 0; display: block }
.login_bg fieldset .join dl { width: 292px; }
.login_bg fieldset .join dt { text-align: right; width: 181px; float: left; padding-right:10px; padding-top:5px }
.login_bg fieldset .join dd { float: left; width: 101px }
.login_bg fieldset legend { display: none }
.login_bg fieldset dl { position: relative; clear: both; display: block }
.login_bg fieldset dl:after { height: 0px; clear: both; display: block; visibility: hidden; content: "."; }
.login_bg fieldset dl.login dt { width: 80px; font-weight: bold; float: left; text-align: left; padding-top:5px }
.login_bg fieldset dl.login dt img{*padding-top:5px}
.login_bg fieldset dl dd { width: 136px; margin-bottom: 5px; float: left; }
.login_bg fieldset dl dd input { border: 1px solid #CCC; width: 125px; height: 25px; padding: 0 5px; line-height:25px }
.login_bg fieldset .submit { top: 0px; width: 67px; right: 0px; line-height: 0; font-size: 0px; position: absolute; }

/*main*/
header.main{ height:200px;}
header.main h1{ position:absolute;  width:518px; left:50%; margin-left:-259px; top:48px;}
header.main .school_area{float:left; width:230px;}
header.main .school_area .school{ width:201px; height:57px; background:url(../img/main/school_bg.png); line-height:50px; font-weight:bold; font-size:14px; letter-spacing:-2px; text-align:center}
header.main .school_area .school .name{font-size:21px; color:#0074d0}
header.main .school_area .count{ position:relative; background:url(../img/main/count_bg.png) no-repeat; width:93px; height:29px; margin-top:10px; padding-left:100px; margin-left:5px;  text-align:right; font-weight:bold; }
header.main .school_area .count .nums{ position:absolute; right:40px; top:4px}
header.main .school_area .coment{font-size:11px; letter-spacing:-1px; color:#FFF; margin-left:5px; margin-top:2px; font-weight:bold}
header.main .school_area .count span.btn{ right:0; top:0; }

header.main .btn_area{float:right; margin-top:17px;}

.main_contents{position:relative; height:610px}

.btn_data{float:right; margin-top:-60px}
.coment2{position:absolute; right:60px; top:450px}
.book{  position:absolute}
.level1,.level2{background:url(../img/main/book_line1.png) no-repeat bottom; width:487px; height:264px;}
.level3{background:url(../img/main/book_line2.png) no-repeat bottom; width:647px;height:264px; }

.level1{ left:10px; top:6px}
.level2{ right:10px; top:76px; }
.level3{ left:29px; top:340px; }
.level3 ul{ margin-left:25px !important}

.book h2{ padding:0; margin:0; text-align:center}
.book ul{ margin-top:20px; margin-left:17px;}
.book ul li{ float:left; margin-left:10px; position:relative; width:137px;}
li a span.icon{/*position:absolute; z-index:200; width:26px; height:25px; background:url(../img/main/over_icon.png) top; left:100px; top:130px; display:block*/}
li a:hover span.icon{/*background:url(../img/main/over_icon.png) bottom;*/}
li a:hover img{opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity = 100);filter:alpha(opacity = 100); margin-left:-1px; margin-top:2px; }


/*list*/
header.list{ background:url(../img/list/top_bg.gif) repeat-x; height:90px}
header.list .wrap p.btn_home{ position:absolute; float:left; margin-top:17px}
header.list .wrap h1{ text-align:center;}
.list_container{ background:url(../img/list/contents_bg.gif) repeat-y; min-height:700px; margin-top:20px; float:left; width:100%;}

.list_container section.left h2{ margin-top:30px; margin-bottom:10px; padding:0; }
.list_container section.left{float:left;width:191px; padding-left:31px; text-align:left}
.list_container section.left p.book{width:159px; height:233px; background: url(../img/list/book_bg.png) no-repeat; position:relative}
.link_btn{ margin-bottom:30px}
.list_container section.left p.book img{width:116px; height:159px; margin-top:55px; margin-left:24px;}
.btn_ebook{width:163px; height:47px; background:url(../img/list/btn_ebook.png) no-repeat; letter-spacing:-1px}
.btn_ebook a{ display: block; color:#f6ee1a; font-size:15px; font-weight:bold; text-align:center; padding:11px 0;}
.btn_ebook a span{text-shadow:1px 1px 3px #333;}

.list_container section.contents{ width:721px; float:left; margin-left:30px; padding-bottom:30px}

.tit_bar{height:66px; background:url(../img/list/book_name_bar.png) no-repeat; margin-top:28px; color:#fff; line-height:45px; font-size:17px;}
.level{ width:122px; display: inline-block; text-align:center; color:#ffc208; text-shadow:1px 1px 3px #333; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif}
.tit_bar strong.level span.num{ font-size:18px;}
.tit_bar strong.book_tit{ text-indent:20px; display:inline-block;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif}
.tit_bar strong.kor{ font-size:14px;}


/*table 공통*/
.tbl_type,.tbl_type th,.tbl_type td{border:0;}
.tbl_type{ border-bottom:1px solid #dcdcdc;font-size:13px;text-align:center;border-collapse:collapse; position:relative; background:#fff; width:100%; border-bottom:2px solid #398cd0}
.tbl_type caption{display:none}
.tbl_type th{padding:7px 0 9px 0;border-top:1px solid #398cd0;border-right:1px solid #398cd0;border-left:1px solid #398cd0;color:#666;font-size:12px;font-weight:bold; color:#fff; background:url(../img/list/table_bg.gif) repeat-x; position:relative; line-height:16px}
.tbl_type th span.vline{  position:absolute; top:18px; right:0; background:url(../img/list/table_vline.gif) no-repeat right; width:2px; height:14px; display:inline-block;}
.tbl_type tr.bg{background:#fff8ce;}
.tbl_type td.bg{background:#fff8ce;}
.tbl_type td{padding:12px 10px ;border:1px solid #398cd0; min-height:22px }
 .tbl_type td.left{ text-align:left}
.left{ text-align:left; font-weight:bold}
.point{ font-size:14px; color:#000}


/*teacher_login*/
.teacher_login h1{ margin-top:32px; margin-bottom:40px; text-align:center}
.teacher_login .yellowbg fieldset{  margin-left:57px; width:268px; }  
.teacher_login .yellowbg{width:391px; height:163px; background:url(../img/teacher/login_bg.gif) no-repeat; margin:0 auto;}
.teacher_login .yellowbg .tit{font-size:17px; font-weight:bold; color:#333; text-align:center; letter-spacing:-2px; line-height:36px; margin-bottom:40px}  
.teacher_login dl { position: relative; clear: both; display: block }
.teacher_login dl dt { width: 60px; font-weight: bold; float: left; text-align: left; padding-top:3px; }
.teacher_login dl dd { width: 136px; margin-bottom: 5px; float: left; }
.teacher_login dl dd input { border: 1px solid #CCC; width: 125px; height: 25px; padding: 0 5px; line-height:25px }
.teacher_login .submit { top: 0px; width: 67px; right: 0px; line-height: 0; font-size: 0px; position: absolute; }

/*로그인팝업레이어*/
.layer_pop{display:none;position:fixed;_position:absolute;top:0;left:0;z-index:10020;width:100%;height:100%;}
.layer_pop.open{display:block}
.layer_pop .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;filter:alpha(opacity=50)}
.layer_pop #showh{position:absolute;top:50%;left:50%;width:580px; height:428px;margin:-214px 0 0 -290px;padding:0px;border:0px solid #f9df00;background:#fff;color:#767676;white-space:normal; }
.layer_pop #showh.g_showh .g_showh,.layer_pop #showh.o_showh .o_showh{display:block; }
.layer_pop #showh .close{ display:blok; font-size:40px; overflow:visible;position:absolute;top:0;right:10px;width:25px;height:25px;padding:10px
;border:0;background:transparent;font-family: Verdana, Geneva, sans-serif;color:#666;text-align:center;text-decoration:none !important;cursor:pointer; }

.teacher_data{background:#FFF; width:493px;  margin:0 auto; margin-top:40px; padding:45px;}
.teacher_data h2{margin-bottom:26px; float:left}
.teacher_data span.btn{float:right; margin-top:-10px}

/*제품문의팝업레이어*/
.layer_pop2{ display:none;position:fixed;_position:absolute;top:0;left:0;z-index:10020;width:100%;height:100%;}
.layer_pop2.open{display:block}
.layer_pop2 .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;filter:alpha(opacity=50)}
.layer_pop2 #showh2{position:absolute;top:50%;left:50%;width:480px; height:300px;margin:-150px 0 0 -240px;padding:0px;border:0px solid #f9df00;background:#fff;color:#767676;white-space:normal; border-radius:20px }
.layer_pop2 #showh2.g_showh .g_showh,.layer_pop2 #showh2.o_showh .o_showh{display:block; }
.layer_pop2 #showh2 .close{ display:blok; font-size:40px; overflow:visible;position:absolute;top:0;right:10px;width:25px;height:25px;padding:20px
;border:0;background:transparent;font-family: Verdana, Geneva, sans-serif;color:#666;text-align:center;text-decoration:none !important;cursor:pointer; }

/*카운터 상세 팝업*/
.count_view{height:505px; width:94%; padding:3%;}
.count_view h2{ text-align:center; margin:0 0 15px 0; font-size:20px }
.count_view h2 strong{ color:#03C}
.count_view h2 span{ font-size:15px}
.count_view .search{padding:15px 0 10px 0; text-align:left; border:1px solid #398cd0; background:#FFF; padding-left:45px; height:52px}
.count_view .search select{ margin-bottom:5px;}
.count_view .search span.btn{ background:#666; border:1px solid #999; color:#fff;  padding:0 10px; width:30px; text-align:center; height:20px;display:inline-block;}
.count_view .btn_po{float:left; margin-left:5px; margin-top:15px}
.count_view .search span.btn a{ color:#fff; display:inline-block}
.count_view .today{ margin:5px; float:right; color:#F00; font-weight:boldl; font-size:14px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding-right:10px}

/*카운터테이블*/
.tbl_count,.tbl_count th,.tbl_count td{border:0;}
.tbl_count{ border-bottom:1px solid #dcdcdc;font-size:13px;text-align:center;border-collapse:collapse; position:relative; background:#fff; width:100%; border-bottom:2px solid #398cd0}
.tbl_count th{padding:12px 0 12px 0;border-top:1px solid #398cd0;border-right:1px solid #398cd0;border-left:1px solid #398cd0;color:#666;font-size:12px;font-weight:bold; color:#fff; background:url(../img/list/table_bg.gif) repeat-x; position:relative; line-height:16px}
.tbl_count th.line_r{ border-right:1px solid #c6eaff}
.tbl_count tr.bg{background:#fff8ce;}
.tbl_count td.bg{background:#fff8ce;}
.tbl_count td{padding:12px 10px ;border:1px solid #398cd0;  }






.qna_area h2{ margin-top:32px; margin-bottom:20px; padding-bottom:20px; text-align:center; font-size:25px; letter-spacing:-2px; color:#333; border-bottom:1px solid #CCC}
.qna_area .infos{ font-size:18px; padding:20px 0 20px 60px; color:#333}
.qna_area .infos p.name{ color:#039; font-size:22px; margin-bottom:20px; letter-spacing:-2px; font-weight:bold}
.qna_area .infos p { line-height:30px}

.member{background:#FFF; width:600px;  margin:0 auto; margin-top:40px; padding:45px;}
.member h2{ font-size:14px; margin:10px 0 10px 0; background:url(../img/join/h2_icon.gif) no-repeat 0 3px; padding-left:20px;}

.id_box{width:380px; margin:10px}
.id_box h2{ font-size:14px; margin:10px 0 10px 0; background:url(../img/join/h2_icon.gif) no-repeat 0 3px; padding-left:20px;}
.id_box input.line{ border:1px solid #ccc; height:22px}
.id_box strong.point{ color:#06C}
.id_box .search_area{ padding:20px 55px; background:#F6F6F6; margin:0 auto}
.id_box .search_result{ padding:20px;}

.agree p { margin-bottom: 10px; }
.agree p.point1{ font-size:14px; color:#C76A03; font-weight: bold;} 
.agree p.point2 { font-weight: bold;margin-bottom:0; font-size:13px;color:#C76A03}
.join_form input{ border:1px solid #CCC; padding:2px}
.join_form select{border:1px solid #CCC; padding:1px}
.join_form table{ margin:0; padding:0; width:100%; border-top:2px solid #1699dc; border-bottom:1px solid #1699dc;}
.join_form tr, .join_form td{ margin:0; padding:0;}
.join_form table th{ text-align:left;background:#f7f7f7}
.join_form table th,.join_form table td{ border-top:1px solid #CCC; padding:6px;}
.con_box{overflow-y:scroll; height:200px; border:1px solid #CCC; padding:10px}



/*플레이어*/

.video_bg{ background:none}
.video_area{width:700px; margin:0 auto}
.video_area .tit_b{/*background:url(../img/view/book_name_bar.png) center; height:50px; margin:0px 0; line-height:45px; font-size:15px; color:#fff; text-indent:30px; display:block;*/ background:#32323b; padding: 12px 10px 8px 10px; text-align:center; height:26px}
.video_area .tit_b .close{ float:right;}
.video_area .mv_area{width:700px;  background:#000}
.video_area .play_bar{float:left; background:url(../img/view/bar_bg.gif) repeat-x; width:698px; height:41px; border:1px solid #3a3941}
.video_area .play_bar .left_a{ width:130px; float:left;}
.video_area .play_bar .left_a a{  width:38px}
.video_area .play_bar .center_a{float:left; width:420px;  text-alig:left; font-size:12px; }
.video_area .play_bar .center_a p{ margin:0; padding:10px 0 0 0 ; color:#fff; float:left}
.video_area .play_bar .center_a p.time_area{ float:right}
.video_area .play_bar .center_a p span.po_text{color:#fff; font-weight:bold}
.video_area .play_bar .right_a{float:right; width:120px; }
.video_area .play_bar .right_a p.screen{ float:right; width:38px}
.video_area .play_bar .right_a p.sound{ width:80px; float:left; height:15px; margin-top:12px; position:relative; }
.video_area .play_bar .right_a p.sound .s_img{ float:left; margin:0 5px 0 0 ; vertical-align:top}
.video_area .play_bar .right_a p.sound .s_bar{ width:50px;  background:url(../img/view/s_bar_bg.gif) repeat-x center; display:inline-block; height:15px; position:relative}
.video_area .play_bar .right_a p.sound .s_bar img{ position:absolute; top:1px}
.video_area .play_sr{ height:6px; width:100%; background:#19191d;z-index:10; float:left; display:none}
.video_area .play_sr .round{position:absolute; z-index:10000; margin-top:-10px;display:none}
.video_area .play_sr .stream{ width:100%; display:block; height:4px; font-size:0;background:#F00; margin:1px 0;display:none}
.video_area .time_text{color:#C60}



.audio_bg{ background:none}
.audio_area{width:470px; margin:0 auto}
.audio_area .tit_b{/*background:url(../img/view/book_name_bar.png) center; height:50px; margin:0px 0; line-height:45px; font-size:15px; color:#fff; text-indent:30px; display:block;*/ background:#32323b;  padding: 12px 10px 8px 10px; text-align:center; height:26px; position:relative}
.audio_area .tit_b .close{ float:right; right:10px; position: absolute; top:15px}
.audio_area .bookimg_area{ height:200px; width:100%; text-align:center; margin:0 auto; padding-top:17px; padding-bottom:5px; background:#48484f }
.audio_area .bookimg_area .bo_name{ color:#FFF; margin-top:5px; background:#48484f}
/*.audio_area .play_bar{float:left; background:url(../img/view/bar_bg.gif) repeat-x; width:468px; height:41px; border:1px solid #3a3941}
.audio_area .play_bar .left_a{ width:130px; float:left }
.audio_area .play_bar .left_a a{ width:38px}
.audio_area .play_bar .center_a{float:left; width:250px;  text-alig:left; font-size:12px; border:1px solid #0C6; letter-spacing:-0px}
.audio_area .play_bar .center_a p{ margin:0; padding:10px 0 0 0 ; color:#fff; float:left}
.audio_area .play_bar .center_a p.time_area{ float:right}
.audio_area .play_bar .center_a p span.po_text{color:#fff; font-weight:bold}
.audio_area .play_bar .right_a{float:right; width:80px;  }
.audio_area .play_bar .right_a p.sound{ width:80px; float:left; height:15px; margin-top:12px; position:relative; }
.audio_area .play_bar .right_a p.sound .s_img{ float:left; margin:0 5px 0 0 ; vertical-align:top}
.audio_area .play_bar .right_a p.sound .s_bar{ width:50px;  background:url(../img/view/s_bar_bg.gif) repeat-x center; display:inline-block; height:15px; position:relative}
.audio_area .play_bar .right_a p.sound .s_bar img{ position:absolute; top:1px}

.audio_area .play_sr{ height:6px; width:100%; background:#19191d;z-index:10; float:left;font-size:0; display:none}
.audio_area .play_sr .round{position:absolute; z-index:10000; margin-top:-10px; display:none}
.audio_area .play_sr .stream{ width:100%; display:block; height:4px; font-size:0;background:#F00; margin:1px 0;  display:none}
.audio_area .time_text{color:#C60}*/



/*게시판*/
.board_container{ background:#fff; min-height:600px; margin-top:20px; float:left; width:90%; padding:5%}
.board_container:after{height: 0px; clear: both; display: block; visibility: hidden; content: "."; }
.board_container h2{ font-size:25px; letter-spacing:-2px; margin-bottom:20px}