@charset "utf-8";
/* CSS Document */
.body_bg{background-color: #6d96ce; background-image: url(../images/skin_16/bg_logo.png); background-position: 2% 98%; background-repeat: no-repeat; background-attachment: fixed; background-size: 12%;}

/** 그리기 도구 **/
.draw_btn{background-image:url(../images/skin_16/draw.png);}
.draw_btn:hover{background-image:url(../images/skin_16/draw_on.png);}
.draw_btn.on{background-image:url(../images/skin_16/draw_on.png);}

.draw_back{background-image:url(../images/skin_16/draw_back.png);}
.draw_back:hover{background-image:url(../images/skin_16/draw_back_on.png);}

.draw_for{background-image:url(../images/skin_16/draw_for.png);}
.draw_for:hover{background-image:url(../images/skin_16/draw_for_on.png);}

.draw_tool_wrap{background-color:rgba(255,255,255,0.5); border-radius:15px; height:268px; padding-top:5px;}
.draw_tool_wrap > span{width:40px; margin:0 auto 4px auto; background-position:center; background-size:90%;}
.draw_tool_1{background-image:url(../images/skin_16/tool_pencil.png); height:40px;}
.draw_tool_2{background-image:url(../images/skin_16/tool_marker.png); height:40px;}
.draw_tool_3{background-image:url(../images/skin_16/tool_eraser.png); height:40px;}
.draw_tool_4{background-image:url(../images/skin_16/tool_remove.png); height:40px;}
.draw_tool_1:hover{background-image:url(../images/skin_16/tool_pencil_on.png);}
.draw_tool_2:hover{background-image:url(../images/skin_16/tool_marker_on.png);}
.draw_tool_3:hover{background-image:url(../images/skin_16/tool_eraser_on.png);}
.draw_tool_4:hover{background-image:url(../images/skin_16/tool_remove_on.png);}
.draw_tool_1.active{background-image:url(../images/skin_16/tool_pencil_on.png);}
.draw_tool_2.active{background-image:url(../images/skin_16/tool_marker_on.png);}
.draw_tool_3.active{background-image:url(../images/skin_16/tool_eraser_on.png);}
.draw_tool_4.active{background-image:url(../images/skin_16/tool_remove_on.png);}

.draw_option{left:50px; top:0; background-color:rgba(255,255,255,0.5);}
.draw_size_wrap{background-color:rgba(255,255,255,0);}
.draw_size_wrap > span.active{background-color:#395173;}

@media all and (min-width:960px){
    .draw_tool_wrap{width:60px; height:328px;}
    .draw_tool_wrap > span{margin:0 auto 5px auto; width:48px;}
    .draw_tool_1{height:48px;}
    .draw_tool_2{height:48px;}
    .draw_tool_3{height:48px;}
    .draw_tool_4{height:48px;}
    span.draw_back, span.draw_for{width:48px; height:48px;}
    
    .draw_option{left:60px;}
}
@media all and (min-width:1024px){    
    .draw_tool_wrap{left:6px; width:64px; height:352px;}
    .draw_tool_wrap > span{margin:0 auto 5px auto; width:52px;}
    .draw_tool_1{height:52px;}
    .draw_tool_2{height:52px;}
    .draw_tool_3{height:52px;}
    .draw_tool_4{height:52px;}
    span.draw_back, span.draw_for{width:52px; height:52px; margin:0 auto 5px auto;}
    
    .draw_option{left:64px;}
}
@media all and (min-width:1280px){    
    .draw_tool_wrap{width:80px; height:402px;}
    .draw_tool_wrap > span{margin:0 auto 5px auto; width:60px;}
    .draw_tool_1{height:60px;}
    .draw_tool_2{height:60px;}
    .draw_tool_3{height:60px;}
    .draw_tool_4{width:60px; height:60px;}
    span.draw_back, span.draw_for{width:60px; height:60px; margin:0 auto 5px auto;}
    
    .draw_option{left:75px;}
}

/** 이전/다음 버튼 **/
#bb-nav-prev{background-image:url(../images/skin_16/arrow_prev.png);}
#bb-nav-next{background-image:url(../images/skin_16/arrow_next.png);}
#bb-nav-prev:hover{background-image:url(../images/skin_16/arrow_prev_on.png);}
#bb-nav-next:hover{background-image:url(../images/skin_16/arrow_next_on.png);}

/** 사운드 플레이어 **/
.sound_stop{background-image:url(../images/skin_16/sound_stop.png);}
.sound_play{background-image:url(../images/skin_16/sound_play.png);}
.sound_reload{background-image:url(../images/skin_16/sound_reload.png);}
.sound_stop:hover{background-image:url(../images/skin_16/sound_stop_on.png);}
.sound_play:hover{background-image:url(../images/skin_16/sound_play_on.png);}
.sound_reload:hover{background-image:url(../images/skin_16/sound_reload_on.png);}
/* .sound_bar_wrap{background-color:#dae5f5;}
.sound_bar{background-color:#f0193f;} */

/** 이북 네비게이션 **/
li.ebook_bgm{background-image:url(../images/skin_16/btn_bgm.png); position:relative; display:none;}
li.ebook_bgm.mute{background-image:url(../images/skin_16/btn_bgm_off.png);}

li.ebook_save{background-image:url(../images/skin_16/btn_save.png); display:none;}
li.ebook_pdf{background-image:url(../images/skin_16/btn_pdf.png); display:none;}
.ebook_page{background-image:url(../images/skin_16/btn_page.png);}
li.ebook_full{background-image:url(../images/skin_16/btn_full.png);}
li.ebook_full.fit{background-image:url(../images/skin_16/btn_fit.png);}
.ebook_close{background-image:url(../images/skin_16/btn_close.png);}

@media all and (min-width:1440px){
    li.ebook_bgm:hover{background-image:url(../images/skin_16/btn_bgm_on.png);}
}
li.ebook_bgm.mute:hover{background-image:url(../images/skin_16/btn_bgm_off.png);}

li.ebook_save:hover{background-image:url(../images/skin_16/btn_save_on.png);}
li.ebook_pdf:hover{background-image:url(../images/skin_16/btn_pdf_on.png);}
.ebook_page:hover{background-image:url(../images/skin_16/btn_page_on.png);}
li.ebook_full:hover{background-image:url(../images/skin_16/btn_full_on.png);}
li.ebook_full.fit:hover{background-image:url(../images/skin_16/btn_fit_on.png);}
.ebook_close:hover{background-image:url(../images/skin_16/btn_close_on.png);}

/* BGM 관련 */
.bgm_volume_wrap{background-color:rgba(255,255,255,0.7);}
.rangeslider{background-color:#fff;}
.rangeslider__fill{background:#6d96ce;}
.rangeslider__handle{background:#2c4c77;}

/** 페이지 번호 **/
.page_wrap{background-image:url(../images/skin_16/navigation_bg.png); color:#2c4c77;}
.page_input{color:#dae5f5; background-color:#2c4c77; border-radius:30px; font-weight:600;}
.page_move{width:64px; height:64px; background-size:64px;}
.page_move.prev{background-image:url(../images/skin_16/navigation_prev.png); top:0; left:25px;}
.page_move.next{background-image:url(../images/skin_16/navigation_next.png); top:0; right:25px;}
.page_move.prev:hover{background-image:url(../images/skin_16/navigation_prev_on.png);}
.page_move.next:hover{background-image:url(../images/skin_16/navigation_next_on.png);}

/** 녹음하기  **/
.record_wrap{/* background-color:rgba(227,214,243,0.8); border-radius:50px; */ padding:0 5px;}
.record_wrap th{color:#2c4c77;}
.record{background-image:url(../images/skin_16/record.png);}
.record_ing{background-image:url(../images/skin_16/record_ing.webp);}
.record_re{background-image:url(../images/skin_16/record_re.png);}
.record_stop{background-image:url(../images/skin_16/record_stop.png);}
.record_play{background-image:url(../images/skin_16/record_play.png);}
.record:hover{background-image:url(../images/skin_16/record_on.png);}
.record_re:hover{background-image:url(../images/skin_16/record_re_on.png);}
.record_stop:hover{background-image:url(../images/skin_16/record_stop_on.png);}
.record_play:hover{background-image:url(../images/skin_16/record_play_on.png);}

/** 리스트 **/
.ebook_list li:hover .ebook_list_page{background-color:#6d96ce; color:#fff; opacity:0.9;}
.ebook_list li:hover .ebook_list_img{border:1px solid #6d96ce; opacity:0.9;}

.ebook_list .active .ebook_list_page{background-color:#6d96ce; color:#fff;}
.ebook_list .active .ebook_list_img{border:1px solid #6d96ce;}
.ebook_list .active .ebook_list_video{border:1px solid #6d96ce;}

.ebook_paging a:hover{color:#6d96ce; opacity:0.8;}
.ebook_paging .active{color:#6d96ce;}

/** 팝업 - 녹음하기 **/
.popup_record_save_btn{background-color:#6d96ce; border-radius:10px;}
.popup_record_close_btn{background-color:#7d7d7d; border-radius:10px;}

@media all and (min-width:768px){
    /** 녹음하기 **/
    .record_wrap{bottom:2.6%; right:0.5%;}
    .record_area{height:40px;}
    .record_area a{width:40px; height:40px;}
}
@media all and (min-width:962px){
    /** 녹음하기 **/
    .record_wrap{padding:0 5px;}
    .record_area{height:42px;}
    .record_area a{width:42px; height:42px;}
}
@media all and (min-width:1024px){
    /** 녹음하기 **/
    .record_wrap{bottom:2.4%;}
    .record_area{height:48px;}
    .record_area a{width:48px; height:48px;}
}
@media all and (min-width:1280px){
    /** 녹음하기 **/
    .record_wrap{bottom:2%; right:1%; padding:4px 10px;}
    .record_area{height:60px;}
    .record_area a{width:60px; height:60px;}
}
@media all and (min-width:1440px){
    .record_wrap{bottom:23px; right:1%; padding:4px 12px;}
    .record_area{height:62px;}
    .record_area a{width:62px; height:62px;}
}