@charset "utf-8";

@font-face {
     font-family: 'BRRA_R';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_seven@1.2/BRRA_R.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
            

*{font-size:16px;}
html{font-family: 'BRRA_R','Nanum Gothic', sans-serif;background:#9bd5ff;}
.content{max-width:1280px;width:100%;margin:0 auto;text-align:center;}
.footer{text-align:center;color:#425e70;width:100%;overflow:hidden;font-family:'Nanum Gothic', sans-serif;}
.footer p{padding:45px 0;}
img{vertical-align:top;}
*:focus { outline: none; }

/*헤더*/
.header{width:100%;height:140px;background:url(../../img/header_bg.png) no-repeat bottom #23408f;background-size:cover;}
.main_header{text-align:center;}
.main_header img{margin-top:20px;width:100%;max-width:267px;}

/*서브헤더*/
.sub_header{position:relative;text-align:center;}
.sub_header .home{position:absolute;top:50%;margin-top:-35px;left:30px;display:inline-block;}
.sub_header .nav_open{display:none;position:absolute;top:50%;margin-top:-35px;right:30px;display:inline-block;}
.sub_header .s_logo{width:130px;margin-top:7px;} 
.sub_header span{color:#fff;line-height:140px;font-size:3.750em;display:inline-block;margin-left:10px;}
.sub_header .open{display:none;}

/*1.레벨선택*/
.book_wrap{text-align:center;font-size:0;width:100%;max-width:720px;margin:0 auto;margin-top:170px;}
.book_wrap a{display:inline-block;margin-bottom:35px;}
.book_wrap a:nth-child(2), .book_wrap a:nth-child(5){margin:0 45px;}
.book_wrap a:nth-child(4), .book_wrap a:nth-child(5), .book_wrap a:nth-child(6){margin-bottom:0;}
.book_wrap img{width:100%;max-width:210px;border:1px solid #fff;box-sizing:border-box;}
.mo_tsong{display:none;}

/*타이틀송 레이어팝업(PC)*/
.popup_wrap {width:100%;max-width:800px;position:absolute;z-index:9999; display:none;}
#mask {width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.7) repeat; top:0; left:0; z-index:999; display:none;}
.popup_con button {position:absolute;top:0;right:-45px;border:none;background:none;}
.popup_con button img{width:35px;}
.popup_con .vid{width:100%;margin:0 auto;position:relative;padding-bottom:56.3%;text-align:left;}
.popup_con .vid iframe{position:absolute;width:100%;height:100%;}
.popup_con .vodlist{max-width:800px;width:100%;margin:0 auto;margin-top:0;}


/*2.유닛선택*/
body.unit .unit_tit{cursor:default;}
.con_wrap{width:100%;margin-top:80px;background:#d7eeff;position:relative;}
.unit_box{width:100%;max-width:560px;margin:0 auto;padding:56px 0;position:relative;}
.unit_box a span{font-family: 'Heebo', sans-serif;font-weight:500;font-size:26px;}
.unit_box a{display:inline-block;margin-bottom:25px;}
.unit_box a span{display:inline-block;color:#fff;font-size:26px;height:65px;line-height:65px;text-align:center;border-radius:10px;}
.unit_top, .unit_bottom, .unit_list{font-size:0;}
.unit_top a, .unit_bottom a{width:48%;box-sizing:border-box;}
.unit_top a span, .unit_bottom a span{width:100%;background:#00b69a;}
.unit_top a:first-child, .unit_bottom a:first-child{margin-right:4%;}
.unit_list a{width:30.6667%;box-sizing:border-box;margin-right:4%;}
.unit_list a span{width:100%;background:#fdba12;}
.unit_list a.review{margin-right:0;}
.unit_bottom a{margin-bottom:0;}

.sub_link{position:absolute;right:50%;margin-right:-450px;margin-top:136px;z-index:1;}
.sub_link a{display:block;height:auto;line-height:normal;width:135px;}
.sub_link a:last-child{margin-top:20px;}
.sub_link img{width:100%;}
.content .sub_link{position:absolute;margin-right:-520px;margin-top:0;}
.content .sub_link a:last-child{margin-top:0;}

/*210114 ebook추가*/
.sub_link_rt a:last-child{margin:0 0;}
.sub_link_rt a:nth-child(2){margin:10px 0;}

.unit_list .on{background:url(../../img/ico_chk_y.png) no-repeat 5px 5px #fdba12;background-size:20px;}
.unit_top .on, .unit_bottom .on{background:url(../../img/ico_chk_g.png) no-repeat 5px 5px #00b69a;background-size:20px;}
.con_wrap .character{position:absolute;bottom:0;left:50%;margin-left:-534px;}


/*tab*/
ul.tabs {max-width:1080px;width:100%;box-sizing:border-box;margin:0 auto;font-size:0;margin-bottom:3%;overflow:hidden;}
ul.tabs li {width:50%;position:relative;display:inline-block;cursor:pointer;box-sizing:border-box;text-indent:-99999px;height:82px;}
ul.tabs li a{display:block;width:100%;height:70px;}
ul.tabs li:nth-child(1) a{background:url(../../img/tab_audio2.jpg) no-repeat top center #f9f9f9;background-size:cover;}
ul.tabs li:nth-child(1).active a{background:url(../../img/tab_audio_on2.jpg) no-repeat top center #fdba13;background-size:cover;}
ul.tabs li:nth-child(2) a{background:url(../../img/tab_video2.jpg) no-repeat top center #f9f9f9;background-size:cover;}
ul.tabs li:nth-child(2).active a{background:url(../../img/tab_video_on2.jpg) no-repeat top center #fdba13;background-size:cover;}
ul.tabs li:nth-child(1).active a:after, ul.tabs li:nth-child(2).active a:after{content:'';display:inline-block;width:25px;height:12px;position:absolute;bottom:0;left:50%;margin-left:-12px;background:url(../../img/tab_arrow.png) no-repeat;background-size:cover;}
ul.tabs li.only{width:100%;}
ul.tabs li.only a{background-size:contain !important;}



.tab_wrap{width:100%;max-width:1080px;margin:0 auto;padding-bottom:56px;position:relative;}
/*ul.tabs li a{display:block;height:100%;}*/
.tab_container {max-width:1080px;width:100%;background:#fff;box-sizing:border-box;padding:50px 40px;margin:0 auto;overflow:hidden;height:auto;/*min-height:560px;*/}
.tab_container .tab_content ul {width:100%;text-align:left;margin-bottom:25px;}
.tab_container #tab1 ul:last-child{border-bottom:none;}
.tab_wrap .character2{position:absolute;bottom:-3px;right:20px;}

/*audio*/
body.audio{position:relative;}
.con_wrap h4{padding:70px 0 56px;font-size:3.125em;text-align:center;color:#333;font-weight:normal;}
.playlist{margin-top:50px;font-family: 'Heebo', sans-serif;font-weight:500;}
.playlist dl{display:table;margin-bottom:15px;}
.playlist dt{display:table-cell;padding-right:40px;vertical-align:top;}
.playlist dt p{display:inline-block;width:160px;height:50px;background:#00b69a;color:#fff;border-radius:10px;box-sizing:border-box;line-height:50px;font-size:27px;text-align:center;padding:0 0;}
.playlist dd{display:table-cell;vertical-align:top;font-size:0;}
.playlist dd div{display:inline-block;}
.playlist dd div a{width:auto;background:#f0f0f0;color:#999;text-align:center;display:inline-block;border-radius:10px;vertical-align:top;margin-right:20px;position:relative;margin-bottom:15px;height:50px;line-height:50px;padding:0 15px;font-family: 'Heebo', sans-serif;font-weight:500;font-size:26px;}
.playlist dd div.active a{border:4px solid #00b69a;background:#fff;color:#00b69a;line-height:46px;padding:0 11px;height:42px;line-height:42px;}

/*video*/
.vid{width:83%;margin:0 auto;position:relative;padding-bottom:46.7%;text-align:left;}
.vid iframe{position:absolute;width:100%;height:100%;}
.vodlist{max-width:800px;width:100%;margin:0 auto;margin-top:40px;}

.link_box{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}

/*sidebar*/
.side_nav{display:none;height: 100%;width:360px;position: fixed;z-index: 9999;top: 0;right: 0;overflow-x: hidden;box-sizing:border-box;font-family: 'Heebo', sans-serif;}
.side_wrap{position:absolute;width:320px;right:0;background:#f5fcff;min-height:100%;}
.nav_open{display:none;}
.nav_close{display:none;}
.nav .btn_wrap{margin-bottom:15px;}
.nav .btn_wrap a{display:block;margin-bottom:10px;height:48px;line-height:48px;border-bottom:none !important;}
.nav .btn_wrap a span{display:block;padding-left:10px;box-sizing:border-box;font-size:1.344em;color:#fff;position:relative;}

.nav .btn_wrap a.resource span:before{display:inline-block;content:'';width:30px;height:18px;background:url(../../img/ico_download.png) no-repeat 0 0;background-size:contain;margin-right:10px;vertical-align:middle;}
.nav .btn_wrap a.game span:before{display:inline-block;content:'';width:30px;height:18px;background:url(../../img/ico_game.png) no-repeat 0 0;background-size:contain;margin-right:10px;vertical-align:middle;}
.nav .btn_wrap a.resource span{box-sizing:border-box;background:#e9306b;margin:20px 20px 10px;}
.nav .btn_wrap a.game span{background:#ff5e48;margin:0 20px 10px;}
.nav .btn_wrap a.resource span.on{background:url(../../img/ico_chk_p.png) no-repeat right #e9306b;background-size:35px;color:#fff;margin:20px 0 10px;padding-left:30px;}
.nav .btn_wrap a.game span.on{background:url(../../img/ico_chk_o.png) no-repeat right #ff5e48;background-size:35px;color:#fff;margin:0 0 10px;padding-left:30px;}

.side_nav .nav_close{position:fixed;top:0;right:320px;border-bottom:none;}
.side_nav .nav_close img{width:40px;}
.nav a{display:block;height:45px;line-height:44px;border-bottom:1px solid #ddd;box-sizing:border-box;}
.nav a:last-child{border-bottom:none;}
.nav a span{display:block;padding-left:20px;box-sizing:border-box;font-size:1.344em;color:#555;}
.nav a:hover{color:#555;}
.nav a span.on{background:url(../../img/ico_chk_b.png) no-repeat right #23408f;color:#fff;background-size:33px;}



/*sidebar 수정 220520*/
/*.side_nav{display:none;}*/
.nav_open{display:inline-block;}
.tog{display:block;}
.nav_close{display:block;}
.side_nav{overflow-y:auto;}
.nav .btn_wrap{margin-bottom:0;}




/*210114 ebook추가*/
.nav_new .btn_wrap_new a{height:45px;line-height:45px;}
.nav_new .btn_wrap_new a.ebook span:before{display:inline-block;content:'';width:40px;height:31px;background:url(../../img/ico_ebook.png) no-repeat -3px 0;background-size:contain;vertical-align:middle;}
.nav_new .btn_wrap_new a.ebook span{box-sizing:border-box;background:#7d56c4;margin:0 20px 10px;}
.nav_new .btn_wrap_new a.ebook span.on{background:url(../../img/ico_chk_ebook.png) no-repeat right #7d56c4;background-size:35px;color:#fff;margin:0 0 10px;padding-left:30px;}




/*resource download*/
.down_wrap{font-size:0;text-align:center;padding:30px 0 90px;}
.down_wrap .down_box{display:inline-block;width:220px;height:160px;border:1px solid #ddd;box-sizing:border-box;text-align:center;background:#fdf7fb;font-family: 'Heebo', sans-serif;vertical-align:top;}
.down_box p{width:100%;height:55px;line-height:55px;background:#e9306b;color:#fff;text-align:center;font-size:1.875rem;position:relative;}
.down_box img{margin-top:20px;}
.down_box:nth-child(1){display:block;margin:0 auto;margin-bottom:40px;}
.down_box:nth-child(2){margin-right:50px;}
.con_wrap .character3{position:absolute;bottom:0;left:50%;margin-left:-546px;}
.down_box p > span{position:absolute;bottom:-10px;left:50%;margin-left:-10px;line-height:normal;}

/*games*/
.game_wrap{font-size:0;text-align:center;padding:30px 0 80px;width:100%;max-width:610px;margin:0 auto;}
.game_wrap .game_box{display:inline-block;width:280px;/*height:165px;*/border:1px solid #ddd;box-sizing:border-box;text-align:center;background:#fdf7fb;margin-bottom:40px;font-family: 'Heebo', sans-serif;vertical-align:top;}
.game_box p{width:100%;height:55px;line-height:55px;background:#ff614c;color:#fff;text-align:center;font-size:1.875rem;position:relative;}
.game_box a{display:block;color:#555;width:100%;height:55px;line-height:55px;border-bottom:1px solid #ddd;font-size:1.875rem;}
.game_box a:last-child{border-bottom:none;}
.game_box a:hover{color:#555;}
.game_wrap .game_box:nth-child(2n-1){margin-right:50px;}
.con_wrap .character4{position:absolute;bottom:0;left:50%;margin-left:-530px;}
.game_box p > span{position:absolute;bottom:-23px;left:50%;margin-left:-10px;line-height:normal;} 

/*ie 10+용*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    
}


@media screen and (max-width: 1024px){/*PC 작은 모니터*/
    
    /*header*/
    .sub_header .open{display:inline-block;position:absolute;top:0;right:0;}
    .sub_header .nav_open{display:inline-block;}
    
    /*tab*/
    .tab_wrap{width:92%;}
    
    /*video*/
    .vid{width:100%;padding-bottom:50%;}
    .vodlist{max-width:1024px;}
    
    /*sidebar*/
    /*.side_nav{display:none;}
    .nav_open{display:inline-block;}
    .tog{display:block;}
    .nav_close{display:block;}
    .side_nav{overflow-y:auto;}
    .nav .btn_wrap{margin-bottom:0;}*/
    
    .content .sub_link{display:none;}
    .mo_tsong{display:block;}
    .mo_tsong a{width:250px;height:50px;border-radius:10px;margin:30px auto 0;margin-right:0 !important;display:inline-block;text-align:center;}
    .mo_tsong a img{width:100%;}
    
    
    
}

@media screen and (max-width: 768px) {/*테블릿 사이즈*/
    
    /*main header*/
    .main_header{height:100px;}
    .main_header img{width:170px;}
    
    .con_wrap h4{font-size:2.188em;padding:50px 0;letter-spacing:-0.4px;}
    
    /*1. 레벨선택*/
    .book_wrap{margin-top:120px;}
    .book_wrap a:nth-child(2), .book_wrap a:nth-child(5){margin:0 0;}
    .book_wrap a:nth-child(1), .book_wrap a:nth-child(3), .book_wrap a:nth-child(5){margin-right:0;}
    .book_wrap a{width:32%;}
    .book_wrap a:nth-child(2), .book_wrap a:nth-child(5){margin-left:2%;margin-right:2%;}
    
    /*서브헤더*/
    .sub_header{height:70px;}
    .sub_header .home img, .sub_header .nav_open img{width:35px;}
    .sub_header .home{margin-top:-18px;left:15px;}
    .sub_header .nav_open{margin-top:-18px;right:15px;}
    .sub_header .s_logo{width:65px;margin-top:3px;} 
    .sub_header span{margin-left:0;line-height:70px;font-size:1.875em;}
    
    /*2.유닛선택*/
    .con_wrap{margin-top:0;}
    .sub_link{position:relative;top:0;right:0;text-align:center;max-width:560px;margin:0 auto;padding:30px 0;}
    .content .sub_link{margin-right:0;}
    .content .sub_link a{width:80%;}
    .sub_link a{display:inline-block;height:auto;line-height:normal;width:32%;}
    .sub_link a:first-child{margin-right:15px;}
    .con_wrap .character{display:none;}
    
    /*210114 ebook추가*/
    .sub_link_rt a:first-child{margin-right:0;}
    .sub_link_rt a{width:28%;}
    .sub_link_rt a:nth-child(2){margin:0 15px;}

    /*tab*/
    ul.tabs li{/*padding-bottom:7.5%;*/height:70px;}
    ul.tabs li a{height:58px;}
    .tab_container{padding:30px 20px;}
    .tab_wrap .character2 img{width:120px;}
    
    .popup_con .vid{width:85%;}
    .popup_con button{bottom:-60px;top:auto;left:50%;margin-left:-25px;/*background:#23408f;*/padding:10px;border-radius:50px;width:50px;height:50px;box-sizing:border-box;}
    .popup_con button img{width:30px;}
    
    .nav .btn_wrap a.game{margin-bottom:20px;}
    .nav_new .btn_wrap_new a.game{margin-bottom:10px;}
    
    .con_wrap .character3, .con_wrap .character4{display:none;}

    .game_wrap{width:85%;margin:0 auto;padding:0 0 50px;}
    .game_wrap .game_box{width:45%;}
    .game_wrap .game_box:nth-child(2n-1){margin-right:5%;}
    

    
}

@media screen and (max-width: 640px){/*모바일~테블릿 사이즈*/
    #tab2 .vodlist{margin-top:30px;}
    
    /*audio*/
    .playlist dl{border-bottom:1px dashed #ccc;display:block;}
    .playlist dl:last-child{border-bottom:none;margin-bottom:0;}
    .playlist dt{display:block;margin:20px 0;}
    .playlist dt p{width:auto;height:auto;border:none;display:block;text-align:left;line-height:100%;margin-bottom:20px;background:none;color:#00b69a;}
    .playlist dd{display:inline-block;margin-bottom:30px;}
    .tab_container .tab_content ul{margin-bottom:30px;}
    .tab_container #tab1 ul:last-child{margin-bottom:0;}
    
    .down_wrap{width:85%;margin:0 auto;padding:0 0 50px;}
    .down_wrap .down_box{width:32%;}
    .down_box:nth-child(1){display:inline-block;margin:0 0;margin-bottom:0;}
    .down_box:nth-child(2){margin:0 2%;}

    
    
}

@media screen and (max-width: 480px){/*모바일 사이즈*/
    .footer p{padding:25px 0;}
    .footer span{display:block;}
    .sub_link a{width:40%;}
    
    /*210114 ebook추가*/
    .sub_link_rt a{width:30%;}
    .sub_link_rt a:nth-child(2){margin:0 5px;}
    
    .main_header{height:110px;}
    .main_header img{width:180px;}
    .con_wrap h4{font-size:2em;}
    
    /*1.레벨선택*/
    .book_wrap{margin-top:120px;}
    .book_wrap a:nth-child(2), .book_wrap a:nth-child(5){margin:0 0;}
    .book_wrap a{width:44%;margin-bottom:20px;}
    .book_wrap a:nth-child(2n-1){margin-right:4%;}
    
    /*2.유닛선택*/
    .unit_box{width:92%;padding:40px 0;}
    .unit_box a{margin-bottom:15px;}
    .unit_box a span{font-size:1.688rem;height:65px;line-height:65px;letter-spacing:-0.4px;}
    .unit_list a{width:30.5%;margin-right:2.5%;}
    .unit_list a.review{margin-right:0;width:33.5%;}
    .unit_list .on{background-position:3px 3px;background-size:17px;}
    .unit_top .on, .unit_bottom .on{background-position:3px 3px;background-size:17px;}
    .unit_bottom a{margin-bottom:0;}
    .unit_top a, .unit_bottom a{width:48.5%;}
    .unit_top a:first-child, .unit_bottom a:first-child{margin-right:2.5%;}
    .unit_top a span, .unit_bottom a span{letter-spacing:-0.8px;}
    
    ul.tabs li{height:55px;}
    ul.tabs li a{height:43px;}
    ul.tabs li:nth-child(1).active a:after, ul.tabs li:nth-child(2).active a:after{width:20px;height:10px;bottom:2px;}
    
    /*3_audio*/
    ul.tabs li{width:50%;}
    .playlist{margin-top:30px;}
    .playlist dd{margin-bottom:10px;}
    .tab_container .tab_content ul{padding-bottom:10px;}
    .playlist dd div a{font-size:1.438rem;margin-right:10px;}
    .playlist dt p{font-size:1.75rem;}
    
    .side_wrap{width:270px;}
    .side_nav .nav_close{right:270px;}
    .nav a span{font-size:1.3em;}
    .nav .btn_wrap a span{font-size:1.3em;}
    .nav .btn_wrap a.resource span{margin:20px 10px 10px;letter-spacing:-0.5px;}
    .nav .btn_wrap a.game span{margin:0 10px 20px;}
    .nav .btn_wrap a.resource span.on, .nav .btn_wrap a.game span.on{padding-left:20px;}
    .nav .btn_wrap a.resource span:before, .nav .btn_wrap a.game span:before{width:24px;height:14px;margin-right:5px;}
    
    /*210114 ebook추가*/
    .nav_new .btn_wrap_new a.ebook span.on{padding-left:20px;}
    .nav_new .btn_wrap_new a.ebook span{margin:0 10px 20px;}
    .nav_new .btn_wrap_new a.ebook span:before{width:31px;}
    
    /*resource download*/
    .down_wrap{width:70%;margin:0 auto;padding:0 0 20px;}
    .down_wrap .down_box{width:100%;margin-bottom:20px;}
    .down_box:nth-child(2){margin:0 0 20px 0;}
    .down_box p{font-size:1.688rem;}
    
    /*games*/
    .game_wrap{width:70%;marign:0 auto;padding:0 0 20px;}
    .game_wrap .game_box{width:100%;margin-bottom:20px;}
    .game_box a:last-child{border-bottom:none;}
    .game_wrap .game_box:nth-child(2n-1){margin-right:0;}
    .game_box p, .game_box a{font-size:1.688rem;}
    

}
@media screen and (max-width: 320px){/*모바일 iPhone5*/
    .playlist dt{font-size:22px;}
    .playlist dd{font-size:20px;/*height:45px;*/line-height:39px;border-radius:10px;padding:0 5px;}
    .playlist dd a{font-size:20px;}

    
    ul.tabs{height:40px;}
    ul.tabs li{height:40px;}
    ul.tabs li a{height:28px;}
    

}


@media (max-width: 820px) and (orientation: landscape) {
    .main_header img{width:25%;max-width:none;}
    .con_wrap h4{font-size:2.188em;}
    
    /*서브헤더*/
    .sub_header{height:70px;}
    .sub_header .home img, .sub_header .nav_open img{width:35px;}
    .sub_header .home{margin-top:-18px;left:15px;}
    .sub_header .nav_open{margin-top:-18px;right:15px;}
    .sub_header .s_logo{width:65px;margin-top:3px;} 
    .sub_header span{margin-left:0;line-height:70px;font-size:1.875em;}
    
    /*1.레벨선택*/
    .book_wrap{margin-top:100px;}
    .book_wrap a{width:25%;}
    .book_wrap a:nth-child(2), .book_wrap a:nth-child(5){margin:0 35px;}
    
    /*2.유닛선택*/
    .con_wrap{margin-top:0;}
    .sub_link{position:relative;top:0;right:0;text-align:center;max-width:560px;margin:0 auto;padding:30px 0;}
    .sub_link a{display:inline-block;height:auto;line-height:normal;width:30%;}
    .sub_link a:first-child{margin-right:15px;}
    .content .sub_link{margin-right:0;}
    .content .sub_link a{width:80%;}
    
    .con_wrap .character{display:none;}
    
    .side_nav .nav_close{right:320px;}
    .nav .btn_wrap a.game{margin-bottom:20px;}
    .nav_new .btn_wrap_new a.game{margin-bottom:10px;}
    
    .popup_con .vid{width:60%;padding-bottom:30.3%;}
    .popup_con button{bottom:-60px;top:auto;left:50%;margin-left:-25px;/*background:#23408f;*/padding:10px;border-radius:50px;width:50px;height:50px;box-sizing:border-box;}
    .popup_con button img{width:30px;}
    
    /*resource download*/
    .con_wrap .character3{display:none;}
    .down_wrap{width:85%;margin:0 auto;padding:0 0 50px;}
    .down_wrap .down_box{width:32%;}
    .down_box:nth-child(1){display:inline-block;margin:0 0;margin-bottom:0;}
    .down_box:nth-child(2){margin:0 2%;}
    
    .con_wrap .character4{display:none;}
    .game_wrap{width:85%;margin:0 auto;padding:0 0 50px;}

    
    /*210114 ebook추가*/
    .sub_link_rt a:first-child{margin-right:0;}
    .sub_link_rt a{width:28%;}
    .sub_link_rt a:nth-child(2){margin:0 15px;}
    
    
}