@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800&display=swap&subset=korean');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

html,body{height:100%;}
*{margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
li{list-style:none;}
a{text-decoration:none;}
img{image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; -ms-interpolation-mode:nearest-neighbor;}
input, textarea, select{outline:none; border:0; font-family:'Noto Sans KR', sans-serif;}
body{font-size:14px; font-family:'Noto Sans KR', sans-serif; line-height:1; color:#333; font-weight:400;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{color:transparent;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder{color:transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{color:transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{color:transparent;}

.draw_wrap, .nav, .sound_player, .nav_ebook, .page_wrap, .record_wrap{z-index:1100;}

/** 커서 변경 **/
.pencil{cursor:url(../images/pencil.cur), auto;}
.marker{cursor:url(../images/marker.cur), auto;}
.eraser{cursor:url(../images/eraser.cur), auto;}

/** 그리기 도구 **/
.draw_wrap{position:fixed; left:1%; top:1%; width:30%; text-align:left; z-index:1200;}
.draw_wrap > span{display:inline-block; margin:0 0.3%; width:40px; height:40px; background-repeat:no-repeat; background-size:cover; cursor:pointer; transition:0.3s;}
.draw_tool_wrap{position:absolute; left:0; top:46px; background-repeat:no-repeat; background-size:cover; width:50px; height:268px; padding-top:20px; border-radius:50px; display:none;}
.draw_tool_wrap > span{display:block; background-repeat:no-repeat; background-size:100%; margin-bottom:14px; position:relative; cursor:pointer; transition:0.3s;}
.draw_tool_1{height:19px;}
.draw_tool_2{height:21px;}
.draw_tool_3{height:24px;}
.draw_tool_4{width:40px; height:35px; margin:0 auto;}
span.draw_back, span.draw_for{width:40px; height:40px; margin:0 auto 4px auto;}

.draw_option_wrap{display:none;}
.draw_option{position:absolute; left:60px; top:-15px; border-radius:15px; display:-webkit-box; display:-ms-flexbox; display:flex; overflow:hidden; width:70px; height:170px;}
.draw_option.eraser{width:30px;}

.draw_size_wrap{width:34px; border-radius:15px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -moz-box-orient:vertical; -ms-flex-direction:column; -webkit-flex-direction:column; flex-direction:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center;}
.draw_size_wrap > span{border-radius:50%; background-color:#fff; margin:32% 0; cursor:pointer; transition:0.2s;}
.draw_size_wrap > span.active{background-color:#000;}
.draw_size_1{width:5px; height:5px;}
.draw_size_2{width:10px; height:10px;}
.draw_size_3{width:15px; height:15px;}
.draw_size_4{width:20px; height:20px;}

.draw_color_wrap{width:36px; padding-left:8px; border-radius:15px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -moz-box-orient:vertical; -ms-flex-direction:column; -webkit-flex-direction:column; flex-direction:column; -webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center;}
.draw_color_wrap > span{width:12px; height:13%; cursor:pointer; transition:0.2s;}
.draw_color_wrap > span.active{width:20px;}

/** 이전/다음 버튼 **/
.nav{position:absolute; top:50%; width:55px; height:62px; margin-top:-31px; background-repeat:no-repeat; background-size:cover;}
#bb-nav-prev{left:0; cursor:pointer; transition:0.3s;}
#bb-nav-next{right:0; cursor:pointer; transition:0.3s;}

/** 이북 네비게이션 **/
.nav_ebook{position:fixed; top:1%; right:1%; text-align:right; width:300px;}
.nav_ebook a{display:block; height:100%;}
.nav_ebook li{display:inline-block; width:40px; height:40px; margin:0 0.3%; background-repeat:no-repeat; background-size:cover; cursor:pointer; transition:0.3s;}
li.ebook_pdf{display:none;}
li.ebook_full{display:none;}

/** 페이지 번호 **/
.page_wrap{position:fixed; top:2%; width:360px; height:64px; background-repeat:no-repeat; background-size:100%; left:50%; margin-left:-180px; display:none;}
.page_move{position:absolute; width:64px; height:100%; top:0; background-repeat:no-repeat; background-size:100%; transition:0.3s;}
.page_move.prev{left:0;}
.page_move.next{right:0;}
.page_area{text-align:center; padding-top:18px; font-size:16px;}
.page_input{width:80px; height:28px; background-color:#fff; text-align:center; font-size:16px;}

/** 사운드 플레이어 **/
.sound_player{position:fixed; bottom:1.6%; width:100%; text-align:center;}
.sound_player li{display:inline-block; width:40px; height:40px; margin:0 0.3%; background-repeat:no-repeat; background-size:cover; cursor:pointer; transition:0.3s;}
.sound_bar_wrap{position:absolute; width:128px; height:2px; bottom:-2px; left:50%; margin-left:-64px; border-radius:10px;}
.sound_bar{position:absolute; left:0; top:0; height:100%; border-radius:10px; transition:0.1s;}

/** 녹음하기 **/
.record_wrap{position:absolute; bottom:1.6%; right:0.5%;}
.record_area{height:40px;}
.record_area th{font-weight:400; display:none;}
.record_area a{background-repeat:no-repeat; background-size:100%; display:block; width:40px; height:40px; transition:0.3s;}

@media all and (min-width:768px){
    /** 그리기 도구 **/
    .draw_wrap > span{width:50px; height:50px;}
    
    .draw_tool_wrap{top:58px;}
    
    /** 이전/다음 버튼 **/
    .nav{width:64px; height:72px; margin-top:-36px;}
    
    /** 사운드 플레이어 **/
    .sound_player{width:100%;}
    .sound_player li{width:50px; height:50px; margin:0 0.2%;}
    .sound_bar_wrap{width:154px; margin-left:-77px;}
    
    /** 이북 네비게이션 **/
    .nav_ebook li{width:50px; height:50px; margin:0 0.2%;}
    
    /** 녹음하기 **/
    .record_area{height:50px;}
    .record_area a{width:50px; height:50px;}
    
    li.ebook_full{display:inline-block;}
}

@media all and (min-width:960px){
    /** 그리기 도구 **/
    .draw_wrap{top:1.2%;}
    .draw_wrap > span{width:52px; height:52px;}
    
    .draw_tool_wrap{top:60px; width:60px; height:321px; padding-top:27px;}
    .draw_tool_wrap > span{margin-bottom:16px;}
    .draw_tool_1{height:23px;}
    .draw_tool_2{height:25px;}
    .draw_tool_3{height:29px;}
    .draw_tool_4{width:48px; height:43px;}
    span.draw_back, span.draw_for{width:44px; height:44px; margin:0 auto 5px auto;}
    
    .draw_option{left:70px; top:-15px; width:80px; height:210px;}
    .draw_option.eraser{width:40px;}

    .draw_size_wrap{width:40px;}
    .draw_size_wrap > span{margin:28% 0;}
    .draw_size_1{width:5px; height:5px;}
    .draw_size_2{width:10px; height:10px;}
    .draw_size_3{width:20px; height:20px;}
    .draw_size_4{width:30px; height:30px;}

    .draw_color_wrap{width:40px; padding-left:7px;}
    .draw_color_wrap > span{width:15px; height:13%;}
    .draw_color_wrap > span.active{width:26px;}
    
    /** 이전/다음 버튼 **/
    .nav{width:71px; height:80px; margin-top:-40px;}
    
    /** 사운드 플레이어 **/
    .sound_player li{width:52px; height:52px; margin:0 0.2%;}
    .sound_bar_wrap{width:160px; margin-left:-80px;}
    
    /** 이북 네비게이션 **/
    .nav_ebook{top:1.2%; right:1%;}
    .nav_ebook li{width:52px; height:52px; margin:0 0.2%;}

    /** 녹음하기 .record_area th{display:table-cell;} **/
    .record_area{height:52px;}
    
    .record_area a{width:52px; height:52px;}       
}

@media all and (min-width:1024px){
    /** 그리기 도구 **/
    .draw_wrap{top:1.2%;}
    .draw_wrap > span{width:58px; height:58px;}
    
    .draw_tool_wrap{top:65px; left:6px; width:64px; height:342px; padding-top:26px;}
    .draw_tool_wrap > span{margin-bottom:17px;}
    .draw_tool_1{height:25px;}
    .draw_tool_2{height:26px;}
    .draw_tool_3{height:31px;}
    .draw_tool_4{width:52px; height:45px;}
    span.draw_back, span.draw_for{width:52px; height:52px; margin:0 auto 5px auto;}
    
    .draw_option{left:74px;}
    
    /** 이전/다음 버튼 **/
    .nav{width:80px; height:90px; margin-top:-45px;}
    
    /** 사운드 플레이어 **/
    .sound_player li{width:58px; height:58px; margin:0 0.2%;}
    .sound_bar_wrap{width:180px; margin-left:-90px;}
    
    /** 이북 네비게이션 **/
    .nav_ebook{top:1.2%; right:1%; width:330px;}
    .nav_ebook li{width:58px; height:58px; margin:0 0.2%;}
    
    /** 녹음하기 **/
    .record_area{height:58px;}
    .record_area a{width:58px; height:58px;}       
}
@media all and (min-width:1080px){
    
}
@media all and (min-width:1280px){
    /** 그리기 도구 **/
    .draw_wrap{top:1.2%; left:1.2%;}
    .draw_wrap > span{width:80px; height:80px;}
    
    .draw_tool_wrap{top:90px; width:80px; height:428px; padding-top:33px;}
    .draw_tool_wrap > span{margin-bottom:21px;}
    .draw_tool_1{height:31px;}
    .draw_tool_2{height:33px;}
    .draw_tool_3{height:38px;}
    .draw_tool_4{width:66px; height:60px;}
    span.draw_back, span.draw_for{width:64px; height:64px; margin:0 auto 5px auto;}
    
    .draw_option{left:90px;}
    
    /** 이전/다음 버튼 **/
    .nav{width:88px; height:99px; margin-top:-50px;}
    
    /** 사운드 플레이어 **/
    .sound_player{top:auto; bottom:1.2%;}
    .sound_player li{width:80px; height:80px; margin:0 0.3%;}
    .sound_bar_wrap{width:248px; margin-left:-124px;}
    
    /** 이북 네비게이션 **/
    .nav_ebook{top:1.6%; right:1%; width:450px;}
    .nav_ebook li{width:70px; height:70px; margin:0 0.1%;}
    li.ebook_pdf{display:inline-block;}
    
    
    /** 페이지 번호 **/
    .page_wrap{display:block;}
    
    /** 녹음하기 **/
    .record_wrap{left:auto; top:auto; bottom:1%; right:1%;}
    .record_area{height:80px;}
    .record_area th{font-size:18px; padding-right:8px;}
    .record_area a{width:80px; height:80px; margin:0 3px;}
}

@media all and (min-width:1440px){
    /** 그리기 도구 **/
    .draw_wrap{top:20px;}
    .draw_wrap > span{width:80px; height:80px; margin:0 6px;}
    
    /** 이전/다음 버튼 **/
    .nav{width:128px; height:144px; margin-top:-72px;}
    
    /** 사운드 플레이어 **/
    .sound_player{bottom:20px;}
    .sound_player li{width:80px; height:80px; margin:0 4px;}
    .sound_bar_wrap{bottom:-4px;}
    
    /** 이북 네비게이션 **/
    .nav_ebook{top:20px; right:1%; width:500px;}
    .nav_ebook li{width:74px; height:74px; margin:0 2px;}
    
    /** 페이지 번호 **/
    .page_wrap{top:26px;}
    
    /** 녹음하기 **/
    .record_wrap{bottom:10px; padding:10px 10px 10px 20px; border-radius:100px;}
    .record_area{height:80px;}
    .record_area th{font-size:18px;}
    .record_area a{width:80px; height:80px;}
}

/** 이북 리스트 **/
.ebook_list_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}
.ebook_list_wrap{margin:0 auto;}
.ebook_list{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; margin:0 auto;}
.ebook_list li{width:18%; margin:1.25%;}
.ebook_list li:nth-child(5n-4){margin-left:0;}
.ebook_list li:nth-child(5n){margin-right:0;}
.ebook_list_page{display:block; width:26px; height:26px; line-height:25px; border-radius:5px; text-align:center; background-color:#979797; color:#fff; margin:0 auto 8px auto; transition:0.3s;}
.ebook_list_img{display:block; width:100%; border:1px solid #cccccc; transition:0.3s;}
.ebook_list_video{position:relative; background-color:rgba(0,0,0,0.3); padding-top:56.25%;}
.ebook_list_video_img{width:100%; display:none; opacity:0;}
.ebook_list_video_img.play{position:absolute; left:0; top:10%;}
.ebook_list_video_play{position:absolute; width:28px; left:50%; top:50%; margin:-14px 0 0 -14px;}

.ebook_paging{display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:row; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; padding:5px 0; width:100%;}
.ebook_paging span, .ebook_paging a{color:#555; font-size:15px; padding:0 7px; transition:0.3s;}
.ebook_paging img{opacity:0.5; margin:0 4px -3px 4px;}


/** 양면 1:1일 경우 **/
.ebook_list_wrap.double_1_1{width:330px;}

/** 양면 4:3일 경우 **/
.ebook_list_wrap.double_4_3{width:330px;}

/** 양면 3:4일 경우 **/
.ebook_list_wrap.double_3_4{width:330px;}

/** 양면 16:9일 경우 **/
.ebook_list_wrap.double_16_9{width:330px;}

/** 양면 9:16일 경우 **/
.ebook_list_wrap.double_9_16{width:330px;}

/** 양면 20:21일 경우 **/
.ebook_list_wrap.double_20_21{width:330px;}

/** 단면 2:1일 경우 **/
.ebook_list_wrap.single_2_1{width:330px;}

/** 단면 8:3일 경우 **/
.ebook_list_wrap.single_8_3{width:330px;}

/** 단면 6:4일 경우 **/
.ebook_list_wrap.single_6_4{width:330px;}

/** 단면 32:9일 경우 **/
.ebook_list_wrap.single_32_9{width:330px;}

/** 단면 18:16일 경우 **/
.ebook_list_wrap.single_18_16{width:330px;}

/** 단면 17:10일 경우 **/
.ebook_list_wrap.single_17_10{width:330px;}

@media all and (min-width:640px){     
    /** 양면 1:1일 경우 **/
    .ebook_list_wrap.double_1_1{width:560px;}

    /** 양면 4:3일 경우 **/
    .ebook_list_wrap.double_4_3{width:580px;}

    /** 양면 3:4일 경우 **/
    .ebook_list_wrap.double_3_4{width:440px;}

    /** 양면 16:9일 경우 **/
    .ebook_list_wrap.double_16_9{width:590px;}

    /** 양면 9:16일 경우 **/
    .ebook_list_wrap.double_9_16{width:350px;}

    /** 양면 20:21일 경우 **/
    .ebook_list_wrap.double_20_21{width:550px;}

    /** 단면 2:1일 경우 **/
    .ebook_list_wrap.single_2_1{width:590px;}

    /** 단면 8:3일 경우 **/
    .ebook_list_wrap.single_8_3{width:590px;}

    /** 단면 6:4일 경우 **/
    .ebook_list_wrap.single_6_4{width:580px;}

    /** 단면 32:9일 경우 **/
    .ebook_list_wrap.single_32_9{width:600px;}

    /** 단면 18:16일 경우 **/
    .ebook_list_wrap.single_18_16{width:570px;}

    /** 단면 17:10일 경우 **/
    .ebook_list_wrap.single_17_10{width:580px;}
}


@media all and (min-width:768px){    
    .ebook_list_video_play{width:36px; margin:-18px 0 0 -18px;}
    
    /** 양면 1:1일 경우 **/
    .ebook_list_wrap.double_1_1{width:690px;}

    /** 양면 4:3일 경우 **/
    .ebook_list_wrap.double_4_3{width:700px;}

    /** 양면 3:4일 경우 **/
    .ebook_list_wrap.double_3_4{width:560px;}

    /** 양면 16:9일 경우 **/
    .ebook_list_wrap.double_16_9{width:700px;}

    /** 양면 9:16일 경우 **/
    .ebook_list_wrap.double_9_16{width:440px;}
    
    /** 양면 20:21일 경우 **/
    .ebook_list_wrap.double_20_21{width:680px;}

    /** 단면 2:1일 경우 **/
    .ebook_list_wrap.single_2_1{width:700px;}

    /** 단면 8:3일 경우 **/
    .ebook_list_wrap.single_8_3{width:700px;}

    /** 단면 6:4일 경우 **/
    .ebook_list_wrap.single_6_4{width:690px;}

    /** 단면 32:9일 경우 **/
    .ebook_list_wrap.single_32_9{width:720px;}

    /** 단면 18:16일 경우 **/
    .ebook_list_wrap.single_18_16{width:700px;}
    
    /** 단면 17:10일 경우 **/
    .ebook_list_wrap.single_17_10{width:690px;}
    
    .ebook_paging{padding:8px 0;}
    .ebook_paging span, .ebook_paging a{font-size:16px;}
}

@media all and (min-width:960px){   
    .ebook_list_page{width:32px; height:32px; line-height:31px; margin:0 auto 10px auto; font-size:18px;}
    .ebook_list_video_play{width:40px; margin:-20px 0 0 -20px;}
    
    /** 양면 1:1일 경우 **/
    .ebook_list_wrap.double_1_1{width:840px;}

    /** 양면 4:3일 경우 **/
    .ebook_list_wrap.double_4_3{width:860px;}

    /** 양면 3:4일 경우 **/
    .ebook_list_wrap.double_3_4{width:680px;}

    /** 양면 16:9일 경우 **/
    .ebook_list_wrap.double_16_9{width:850px;}

    /** 양면 9:16일 경우 **/
    .ebook_list_wrap.double_9_16{width:550px;}
    
    /** 양면 20:21일 경우 **/
    .ebook_list_wrap.double_20_21{width:820px;}

    /** 단면 2:1일 경우 **/
    .ebook_list_wrap.single_2_1{width:850px;}

    /** 단면 8:3일 경우 **/
    .ebook_list_wrap.single_8_3{width:850px;}

    /** 단면 6:4일 경우 **/
    .ebook_list_wrap.single_6_4{width:840px;}

    /** 단면 32:9일 경우 **/
    .ebook_list_wrap.single_32_9{width:870px;}

    /** 단면 18:16일 경우 **/
    .ebook_list_wrap.single_18_16{width:850px;}
    
    /** 단면 17:10일 경우 **/
    .ebook_list_wrap.single_17_10{width:840px;}
    
    .ebook_paging{padding:10px 0;}
    .ebook_paging span, .ebook_paging a{font-size:17px; padding:0 10px;}
    .ebook_paging img{margin:0 5px -3px 5px;}
}

@media all and (min-width:1024px){
    .ebook_list_video_play{width:42px; margin:-21px 0 0 -21px;}
    
    /** 양면 1:1일 경우 **/
    .ebook_list_wrap.double_1_1{width:900px;}

    /** 양면 4:3일 경우 **/
    .ebook_list_wrap.double_4_3{width:910px;}

    /** 양면 3:4일 경우 **/
    .ebook_list_wrap.double_3_4{width:780px;}

    /** 양면 16:9일 경우 **/
    .ebook_list_wrap.double_16_9{width:910px;}

    /** 양면 9:16일 경우 **/
    .ebook_list_wrap.double_9_16{width:600px;}
    
    /** 양면 20:21일 경우 **/
    .ebook_list_wrap.double_20_21{width:870px;}

    /** 단면 2:1일 경우 **/
    .ebook_list_wrap.single_2_1{width:910px;}

    /** 단면 8:3일 경우 **/
    .ebook_list_wrap.single_8_3{width:910px;}

    /** 단면 6:4일 경우 **/
    .ebook_list_wrap.single_6_4{width:900px;}

    /** 단면 32:9일 경우 **/
    .ebook_list_wrap.single_32_9{width:930px;}

    /** 단면 18:16일 경우 **/
    .ebook_list_wrap.single_18_16{width:910px;}   
    
    /** 단면 17:10일 경우 **/
    .ebook_list_wrap.single_17_10{width:900px;}
    
    .ebook_paging{padding:12px 0;}    
}

@media all and (min-width:1200px){
    .ebook_list_page{width:40px; height:40px; line-height:39px; margin:0 auto 12px auto; font-size:19px;}
    .ebook_list_video_play{width:52px; margin:-26px 0 0 -26px;}
    
    /** 양면 1:1일 경우 **/
    .ebook_list_wrap.double_1_1{width:1080px;}

    /** 양면 4:3일 경우 **/
    .ebook_list_wrap.double_4_3{width:1100px;}

    /** 양면 3:4일 경우 **/
    .ebook_list_wrap.double_3_4{width:960px;}

    /** 양면 16:9일 경우 **/
    .ebook_list_wrap.double_16_9{width:1140px;}

    /** 양면 9:16일 경우 **/
    .ebook_list_wrap.double_9_16{width:740px;}
    
    /** 양면 20:21일 경우 **/
    .ebook_list_wrap.double_20_21{width:1050px;}

    /** 단면 2:1일 경우 **/
    .ebook_list_wrap.single_2_1{width:1140px;}

    /** 단면 8:3일 경우 **/
    .ebook_list_wrap.single_8_3{width:1140px;}

    /** 단면 6:4일 경우 **/
    .ebook_list_wrap.single_6_4{width:1100px;}

    /** 단면 32:9일 경우 **/
    .ebook_list_wrap.single_32_9{width:1160px;}

    /** 단면 18:16일 경우 **/
    .ebook_list_wrap.single_18_16{width:1090px;}   
    
    /** 단면 17:10일 경우 **/
    .ebook_list_wrap.single_17_10{width:1120px;}
    
    .ebook_paging{padding:15px 0;}
    .ebook_paging span, .ebook_paging a{font-size:18px; padding:0 12px;}
    .ebook_paging img{margin:0 6px -3px 6px;}
}

/** 유뷰트/아이프레임 **/
.ebook_video_iframe{position:absolute; border:0; left:50%; top:50%; width:480px; height:270px; margin:-135px 0 0 -240px; border:0;}
.ebook_video_wrap{background-color:rgba(0,0,0,0); box-shadow:none;}

@media all and (min-width:640px){
    .ebook_video_iframe{width:640px; height:360px; margin:-180px 0 0 -320px;}   
}
@media all and (min-width:768px){
    .ebook_video_iframe{width:768px; height:432px; margin:-216px 0 0 -384px;}   
}
@media all and (min-width:960px){
    .ebook_video_iframe{width:962px; height:541px; margin:-270.5px 0 0 -481px;}   
}
@media all and (min-width:1080px){
    .ebook_video_iframe{width:1080px; height:608px; margin:-304px 0 0 -540px;}   
}
@media all and (min-width:1280px){
    .ebook_video_iframe{width:1200px; height:675px; margin:-337.5px 0 0 -600px;}   
}
@media all and (min-width:1440px){
    .ebook_video_iframe{width:1280px; height:720px; margin:-360px 0 0 -640px;}   
}
@media all and (min-width:1680px){
    .ebook_video_iframe{width:1440px; height:810px; margin:-405px 0 0 -720px;}   
}
@media all and (min-width:1706px){
    .ebook_video_iframe{width:1706px; height:960px; margin:-480px 0 0 -853px;}   
}

/** 팝업 - 녹음하기 **/
.popup_record_bg{position:fixed; background-color:rgba(0,0,0,0.7); left:0; top:0; right:0; bottom:0; z-index:1100;}
.popup_record_wrap{position:absolute; left:50%; top:50%; width:450px; height:269px; margin:-135px 0 0 -225px; background-repeat:no-repeat; background-size:100%;}
.popup_close{position:absolute; right:3.3%; top:4.5%; cursor:pointer;}
.popup_record_area{width:100%; height:100%; border-spacing:0;}
.popup_record_area th{height:45%; color:#666; font-size:25px; line-height:1.3; font-weight:400;}
.popup_record_area td{text-align:center;}
.popup_record_btns{margin-bottom:20px;}
.popup_record_btns a{background-repeat:no-repeat; background-size:100%; display:inline-block; font-weight:600; font-size:20px; margin:0 1%; transition:0.3s;}
.popup_record_save_btn{height:52px; line-height:51px; width:155px;}
.popup_record_close_btn{height:52px; line-height:51px; width:125px;}
.popup_record_text{color:#666; font-size:15px;}

.popup_record_wrap{background-image:url(../images/popup_record.png);}
.popup_record_save_btn{color:#fff;}
.popup_record_close_btn{color:#fff;}

@media all and (min-width:960px){
    .popup_record_wrap{width:620px; height:370px; margin:-185px 0 0 -310px;}
    .popup_record_area th{font-size:35px; line-height:1.3;}
    .popup_record_btns{margin-bottom:35px;}
    .popup_record_btns a{font-size:25px; margin:0 1%;}
    .popup_record_save_btn{height:71px; line-height:70px; width:212px;}
    .popup_record_close_btn{height:71px; line-height:70px; width:172px;}
    .popup_record_text{font-size:16px;}
}

/* BGM 관련 */
.bgm_volume_container{display:none;}
.bgm_volume_wrap{position:absolute; top:110%; left:calc(50% - 60px); width:120px; border-radius:50px; height:24px;}
.rangeslider, .rangeslider__fill{display:block; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
.rangeslider{position:relative; display:block;}
.rangeslider--horizontal{height:8px; width:90%; left:5%; top:8px;}
.rangeslider--disabled{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity:0.4;}
.rangeslider__fill{position: absolute;}
.rangeslider--horizontal .rangeslider__fill{top:0; bottom:0; border-radius:10px; width:100%;}
.no_handle .rangeslider__handle{display:none;}
.rangeslider__handle{cursor:pointer; width:16px; height:16px; position:absolute; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
.rangeslider--horizontal .rangeslider__handle{top:-4px; touch-action:pan-y; -ms-touch-action:pan-y;}
input[type="range"]:focus + .rangeslider .rangeslider__handle{-moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);}

@media all and (min-width:768px){
    .bgm_volume_wrap{left:calc(50% - 70px); width:140px; height:26px;}
    .rangeslider--horizontal{height:10px; top:8px;}
    .rangeslider__handle{width:18px; height:18px;}
    .rangeslider--horizontal .rangeslider__handle{top:-4px;}
}
@media all and (min-width:1024px){
    .bgm_volume_wrap{left:calc(50% - 75px); width:150px;}
}
@media all and (min-width:1280px){
    .bgm_volume_wrap{left:calc(50% - 80px); width:160px;}
}
@media all and (min-width:1440px){
    .bgm_volume_wrap{left:calc(50% - 90px); width:180px;}
}