@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);

@font-face {
    font-family:'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
@font-face{
  font-family:'KG-Neatly-Printed';
    src:url('../font/KG-Neatly-Printed.ttf.woff') format('woff'),
    url('../font/KG-Neatly-Printed.ttf.svg#KG-Neatly-Printed') format('svg'),
    url('../font/KG-Neatly-Printed.ttf.eot'),
    url('../font/KG-Neatly-Printed.eot?#iefix') format('embedded-opentype'); 
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
}

html,body{height:100%;}
*{margin:0; padding:0; box-sizing:border-box; image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; -ms-interpolation-mode:nearest-neighbor;}
li{list-style:none;}
a{text-decoration:none;}
input, textarea, select{outline:none; border:0; font-family:'yg-jalnan';}
body{font-size:14px; font-family:'yg-jalnan'; line-height:1; color:#333; font-weight:300; background-position:center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; background-color:#fff;}
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;}
.ellipsis{overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
.pt_100{padding-top:100px;}

.font_nsr{font-family:'NanumSquareRound';}

/******* 버튼 모음 ********/
.text_left{text-align:left;}
.text_center{text-align:center;}
.text_right{text-align:right;}
.btn{display:inline-block; text-align:center;}

.btn_green{display:inline-block; background:url(../images/btn_green.png) no-repeat; width:195px; height:61px; line-height:60px; font-size:26px; color:#fff; font-weight:500;}
.btn_red{display:inline-block; background:url(../images/btn_red.png) no-repeat; width:204px; height:60px; line-height:59px; font-size:24px; color:#fff; font-weight:500;}
.btn_blue{display:inline-block; background:url(../images/btn_blue.png) no-repeat; width:204px; height:60px; line-height:59px; font-size:24px; color:#fff; font-weight:500; text-align:center;}
.btn_brown{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#a86b3f; color:#fff; font-size:24px; font-weight:400; border-radius:8px;}

.btn_violet{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#6566ba; color:#fff; font-size:20px; font-weight:400; border-radius:8px; transition:0.3s;}
.btn_violet:hover{background-color:#441985;}

.btn_purple{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#674b89; color:#fff; font-size:20px; font-weight:400; border-radius:8px; transition:0.3s;}
.btn_purple:hover{background-color:#441985;}

.btn_gray{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#aaa; color:#fff; font-size:20px; font-weight:400; border-radius:8px; transition:0.3s;}
.btn_gray:hover{background-color:#666;}

.btn_sky{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#779dff; color:#fff; font-size:21px; font-weight:400; border-radius:8px; transition:0.3s;}
.btn_sky:hover{background-color:#cda0f2;}

.btn_orange{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#e05b00; color:#fff; font-size:24px; font-weight:400; border-radius:8px;}


/** 체크박스 **/
.check_input{display:none;}
.check_label{cursor:pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.check_label .check_bullet{width:20px; height:20px; background-color:#fff; margin-right:7px;}
.check_input:checked + .check_bullet{background-image:url(../images/input_check_gray.png); background-size:100%;}

/** 라디오박스 **/
.radio_input{display:none;}
.radio_label{cursor:pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.radio_label .radio_bullet{width:20px; height:20px; border-radius:50%; border:1px solid #b5b5b5; background-color:#fff; margin-right:6px; }
.radio_input:checked + .radio_bullet{background-image:url(../images/input_check_gray.png); background-repeat:no-repeat; background-position:center; background-size:100%;}


/** 퀴즈 공통 **/
.font_kg{font-family:'KG-Neatly-Printed'; font-weight:700;}

.activity_q{text-align:center; line-height:1.2; padding:0 3% 4px 3%; color:#2f194b; font-size:16px; display:block; width:100%; min-width:300px; position:relative; z-index:10;}
.activity_q.font_kg{font-size:24px;}
.activity_popup_passage.font_kg{font-size:21px; line-height:0.9;}

.activity_popup_passage_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin:0 auto 10px auto; width:100%; height:30px; border-radius:10px; padding:0 2%; background-color:rgba(255,255,255,0.6); position:relative; z-index:10;}
.activity_popup_passage_wrap.opacity{background-color:rgba(255,255,255,0); opacity:1;}
.activity_popup_passage_icon{width:30px; height:100%; background-repeat:no-repeat; background-position:50%; background-size:75%;}
.activity_popup_passage{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%; width:calc(100% - 80px); padding-left:2%; color:#2f194b; font-size:15px; line-height:1.1; opacity:0; transition:1s;}
.activity_popup_passage.show{opacity:1;}

.activity_btn_wrap{position:fixed; right:3%; bottom:2.5%; z-index:10000; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:44px;}
.activity_next_img{height:36px; margin-left:10px;}
.activity_sound_img{height:44px;}

.activity_timer{width:54px; height:54px; position:absolute; right:1.2%; top:2%; background-image:url(../images/timer.png); background-repeat:no-repeat; background-size:cover; z-index:100;}
.activity_timer_progress{position:absolute; left:23.5%; top:28.5%; width:53%; height:53%; border-radius:50%; transition:0.1s; 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; font-size:10px; font-family:'NanumSquareRound'; font-weight:700; color:#fff; text-shadow:0 0 1px rgba(0,0,0,0.3);}
.activity_counter{font-size:12px; color:#000; text-shadow:1px 1px 1px rgba(255,255,255,0.3);}

.activity_timer_2{width:54px; height:54px; position:absolute; right:1.2%; top:2%; background-image:url(../images/timer_2.png); background-repeat:no-repeat; background-size:cover; z-index:100;}
.activity_timer_progress_2{position:absolute; left:24.9%; top:30.8%; width:50.4%; height:50.4%; border-radius:50%; transition:0.1s;}
.activity_timer_hands{display:block; width:100%;}
.activity_timer_hands.run{transform:rotate(359deg);}
.activity_center{position:absolute; left:0; top:0; width:100%;}
.activity_counter_2{position:absolute; left:0; top:0; width:100%; height:100%; 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; font-size:10px; font-family:'NanumSquareRound'; font-weight:700; font-size:13px; color:#000; text-shadow:1px 1px 1px rgba(255,255,255,0.3); padding-top:2px;}

.activity_result{background-color:rgba(0,0,0,0.7); position:fixed; left:0; top:0; width:100%; height:100%; 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; z-index:2000;}
.activity_result_img{width:25%; max-width:475px;}

.activity_13_area .activity_popup_passage_wrap, .activity_14_area .activity_popup_passage_wrap{width:83%; margin:0 auto 5px auto;}

@media all and (min-width:640px){  
    .activity_q{line-height:1.1; padding:0 3% 15px 3%; font-size:19px;}
    .activity_q.font_kg{font-size:28px;}
    .activity_popup_passage.font_kg{font-size:23px;}
    
    .activity_popup_passage_wrap{height:36px;}
    .activity_popup_passage_icon{width:36px;}
    .activity_popup_passage{width:calc(100% - 88px); font-size:15px;}
    
    .activity_timer, .activity_timer_2{width:70px; height:70px; right:2%; top:2%;}
    .activity_timer_progress{font-size:11px;}
    .activity_counter, .activity_counter_2{font-size:13px;}
    
    .activity_btn_wrap{height:54px;}
    .activity_next_img{height:42px;}
    .activity_sound_img{height:54px;}
}
@media all and (min-width:768px){    
    .activity_q{font-size:22px; padding-bottom:20px;}
    .activity_q.font_kg{font-size:31px;}
    .activity_popup_passage.font_kg{font-size:26px;}
    
    .activity_popup_passage_wrap{height:40px;}
    .activity_popup_passage_icon{width:40px;}
    .activity_popup_passage{width:calc(100% - 96px); font-size:14px;}
    
    .activity_timer, .activity_timer_2{width:80px; height:80px;}
    .activity_timer_progress{font-size:12px;}
    .activity_counter, .activity_counter_2{font-size:14px; padding-top:3px;}
}
@media all and (min-width:960px){
    .activity_q{font-size:25px; padding-bottom:25px;}
    .activity_q.font_kg{font-size:36px;}
    .activity_popup_passage.font_kg{font-size:30px;}
    
    .activity_popup_passage_wrap{height:50px;}
    .activity_popup_passage_icon{width:50px;}
    .activity_popup_passage{width:calc(100% - 108px); font-size:21px;}
    
    .activity_timer, .activity_timer_2{width:90px; height:90px;}
    .activity_timer_progress{font-size:13px;}
    .activity_counter, .activity_counter_2{font-size:15px;}
    
    .activity_next{right:4%; bottom:5%;}
    
    .activity_btn_wrap{height:66px;}
    .activity_next_img{height:54px; margin-left:15px;}
    .activity_sound_img{height:66px;}
}
@media all and (min-width:1024px){
    .activity_q{font-size:28px;}
    .activity_q.font_kg{font-size:39px;}
    .activity_popup_passage.font_kg{font-size:33px;}
    .quiz_q small{font-size:17px;}
    
    .activity_popup_passage_wrap{margin-bottom:15px; height:56px;}
    .activity_popup_passage_icon{width:56px;}
    .activity_popup_passage{width:calc(100% - 120px); font-size:23px; line-height:1.2;}
    
    .activity_13_area .activity_popup_passage_wrap, .activity_14_area .activity_popup_passage_wrap{margin:0 auto 15px auto;}
    
    .activity_timer, .activity_timer_2{width:100px; height:100px;}
    .activity_timer_progress{font-size:14px;}
    .activity_counter, .activity_counter_2{font-size:16px; padding-top:4px;}
}
@media all and (min-width:1140px){
    .activity_q{font-size:30px; padding-bottom:30px;}
    .activity_q.font_kg{font-size:42px;}
    .activity_popup_passage.font_kg{font-size:34px;}
    
    .activity_popup_passage_wrap{height:60px;}
    .activity_popup_passage_icon{width:60px;}
    .activity_popup_passage{width:calc(100% - 128px); font-size:25px;}
    
    .activity_timer, .activity_timer_2{width:110px; height:110px;}
    .activity_timer_progress{font-size:15px;}
    .activity_counter, .activity_counter_2{font-size:17px;}
}
@media all and (min-width:1280px){
    .activity_q{font-size:32px; padding-bottom:35px;}
    .activity_q.font_kg{font-size:44px;}
    .activity_popup_passage.font_kg{font-size:39px;}
    
    .activity_popup_passage_wrap{height:68px; margin:0 auto 20px auto;}
    .activity_popup_passage_icon{width:68px;}
    .activity_popup_passage{width:calc(100% - 144px); font-size:28px;}
    
    .activity_timer, .activity_timer_2{width:140px; height:140px; right:3%; top:3%;}
    .activity_timer_progress{font-size:17px;}
    .activity_counter, .activity_counter_2{font-size:18px; padding-top:5px;}
    
    .activity_next{right:4%; bottom:5%;}
    .activity_btn_wrap{height:82px;}
    .activity_next_img{height:60px; margin-left:20px;}
    .activity_sound_img{height:82px;}
}
@media all and (min-width:1440px){
    .activity_q{font-size:36px; padding-bottom:40px;}
    .activity_q.font_kg{font-size:50px;}
    .activity_popup_passage.font_kg{font-size:43px;}
    
    .activity_popup_passage_wrap{height:72px; margin:0 auto 25px auto;}
    .activity_popup_passage_icon{width:72px;}
    .activity_popup_passage{width:calc(100% - 156px); font-size:29px;} 
    
    .activity_timer, .activity_timer_2{width:150px; height:150px;}
    .activity_timer_progress{font-size:18px;}
    .activity_counter, .activity_counter_2{font-size:19px;}
    
    .activity_13_area .activity_popup_passage_wrap, .activity_14_area .activity_popup_passage_wrap{margin:0 auto 20px auto;}
}


/** 가이드 **/
.activity_guide_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%;}
.activity_guide_area{width:100%;}
.activity_guide_box{width:70%; margin:0 auto; padding-top:39.375%; background-repeat:no-repeat; background-size:cover; position:relative;}
.activity_guide_video{position:absolute; left:0; top:0; width:100%; height:100%; border:0;}

/** 액티비티 1 - 알파벳 그리기 **/
.activity_1_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%;}
.activity_1_area{width:85%; padding-top:49.5%; position:relative;}
.activity_1_area .activity_q{position:absolute; width:100%; left:0; top:0;}
.activity_1_area .activity_popup_passage_wrap{position:absolute; width:100%; left:0; top:0; z-index:10000;}

/** 커서 변경 **/
.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:0; top:50%; margin-top:-113px; width:47px; background-color:rgba(255,255,255,0.95); text-align:left; z-index:11000; border-radius:0 12px 12px 0; padding:3px 0;}
.draw_wrap > span{display:inline-block; margin:0 0.3%; width:30px; height:30px; background-repeat:no-repeat; background-size:cover; cursor:pointer; transition:0.3s;}
.draw_tool_wrap{}
.draw_tool_wrap > span{display:block; background-repeat:no-repeat; background-size:100%; margin:10px auto; position:relative; cursor:pointer; transition:0.3s; width:25px; height:25px;}

span.draw_back, span.draw_for{}

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

.draw_size_wrap{width:30px; border-radius:12px; 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:rgba(0,0,0,0.45); margin:32% 0; cursor:pointer; transition:0.2s;}
.draw_size_wrap > span.active{background-color:rgba(0,0,0,0.9);}
.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:32px; padding-left:6px; border-radius:12px; 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;}

.draw_btn{background-image:url(../images/draw.png);}
.draw_btn:hover{background-image:url(../images/draw_on.png);}
.draw_btn.on{background-image:url(../images/draw_on.png);}


.draw_back{background-image:url(../images/draw_tool_back.png);}
.draw_for{background-image:url(../images/draw_tool_for.png);}

.draw_back:hover{background-image:url(../images/draw_tool_back_on.png);}
.draw_for:hover{background-image:url(../images/draw_tool_for_on.png);}

.draw_tool_wrap{background-image:url(../images/tool_bg.png);}
.draw_tool_1{background-image:url(../images/draw_tool_1.png);}
.draw_tool_2{background-image:url(../images/draw_tool_2.png);}
.draw_tool_3{background-image:url(../images/draw_tool_3.png);}
.draw_tool_4{background-image:url(../images/draw_tool_4.png);}

.draw_tool_1:hover{background-image:url(../images/draw_tool_1_on.png);}
.draw_tool_2:hover{background-image:url(../images/draw_tool_2_on.png);}
.draw_tool_3:hover{background-image:url(../images/draw_tool_3_on.png);}
.draw_tool_4:hover{background-image:url(../images/draw_tool_4_on.png);}
.draw_tool_1.active{background-image:url(../images/draw_tool_1_on.png);}
.draw_tool_2.active{background-image:url(../images/draw_tool_2_on.png);}
.draw_tool_3.active{background-image:url(../images/draw_tool_3_on.png);}
.draw_tool_4.active{background-image:url(../images/draw_tool_4_on.png);}

.draw_option{background-color:rgba(255,255,255,0.65);}
.draw_size_wrap{background-color:rgba(255,255,255,0.9);}

@media all and (min-width:640px){  
    .draw_wrap{margin-top:-135px; width:52px; padding:5px 0;}
    .draw_wrap > span{width:40px; height:40px;}
    .draw_tool_wrap > span{width:32px; height:32px;}
    
    .draw_option{left:43px; top:-15px; width:70px; height:170px; border-radius:15px;}
    .draw_size_wrap{width:34px; border-radius:15px;}
    .draw_color_wrap{width:36px; padding-left:8px; border-radius:15px;}
}

@media all and (min-width:768px){    
    .draw_wrap{margin-top:-162px; width:64px;}
    .draw_tool_wrap > span{width:38px; height:38px; margin:12px auto;}
    
    .draw_option{left:52px;}
}
@media all and (min-width:960px){    
    .draw_wrap{margin-top:-186px; width:70px;}
    .draw_tool_wrap > span{width:42px; height:42px; margin:15px auto;}
    
    .draw_option{left:57px;}
}
@media all and (min-width:1024px){    
    .draw_wrap{margin-top:-195px; width:76px;}
    .draw_tool_wrap > span{margin:18px auto;}
    .draw_option{left:60px;}
}
@media all and (min-width:1280px){    

}

/** 액티비티 2 - 연결하기 **/
.activity_2_wrap{display:flex; justify-content:center; align-items:center; height:100%;}
.activity_2_area{position:relative;}
.activity_2_container{display:flex; justify-content:center;}
.activity_2_box{width:500px;}
.activity_2_view_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; justify-content:space-around; height:65px;}

.activity_2_box.four{width:407px;}
.activity_2_box.six{width:407px;}
.activity_2_box.eight{width:407px;}

.activity_2_view_wrap .activity_2_view:first-child{margin-left:0;}
.activity_2_view_wrap .activity_2_view:last-child{margin-right:0;}
.activity_2_view{width:65px; height:65px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; position:relative; border-radius:10px; cursor:pointer; background-color:;}
.activity_2_view.click{border:2px solid rgba(75,197,246,0.8); background-color:rgba(255,255,255,0.7);}
.activity_2_point{position:absolute; left:50%; width:12px; height:12px; margin-left:-6px; background-color:#4bc5f6; border-radius:50%; border:2px solid #fff;}
.activity_2_point.bottom{bottom:-6px;}
.activity_2_point.top{top:-6px;}
.activity_2_line{height:40px;}

.activity_2_view_wrap.ratio_4_3 .activity_2_view{width:87px;}

.activity_2_box.ten .activity_2_view_wrap{height:63px;}
.activity_2_box.ten .activity_2_view{width:63px; height:63px;}
.activity_2_box.ten .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:84px;}

.activity_2_label{position:absolute; left:0; width:100%;}
.activity_2_label.top{top:11%;}
.activity_2_label.bottom{bottom:11%;}
.activity_2_input{display:none;}
.activity_2_bullet{display:block; margin:0 auto; width:20px; height:20px; border:1px solid rgba(0,0,0,0.25); background-color:rgba(255,255,255,0.85); border-radius:5px;}
.activity_2_input:checked + .activity_2_bullet{background:url(../images/input_check_purple.png) no-repeat; background-size:cover;  background-color:rgba(255,255,255,0.85);}

.activity_2_shake{-moz-animation-duration:0.3s; -webkit-animation-duration:0.3s; animation-duration:0.3s; -moz-animation-name:activity_2_shake; -webkit-animation-name:activity_2_shake; animation-name:activity_2_shake; -moz-animation-iteration-count:1; -webkit-animation-iteration-count:1; animation-iteration-count:1; -moz-animation-direction:alternate; -webkit-animation-direction:alternate; animation-direction:alternate;}


.activity_ios_btn{position:fixed; left:4%; bottom:5%; background:url(../images/ios_speaker.png) no-repeat center; background-size:cover;  background-color:#ddd; width:43px; height:43px;  border-radius:30px; box-shadow:0 5px 8px 5px rgba(56,68,93,0.15); transition:0.3s; 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;}
.activity_ios_btn:hover{background-color:rgba(187,158,109,0.9);}


@keyframes activity_2_shake{
    15%{left:-0.5%; top:-0.5%;}
    30%{left:0.5%; top:0.5%;}
    45%{left:-0.5%; top:0.5%;}
    60%{left:0.5%; top:-0.5%;}
    75%{left:-0.5%; top:-0.5%;}
    90%{left:0.5%; top:0.5%;}
    100%{left:0.5%; top:-0.5%;}
}

@media all and (min-width:640px){    
    .activity_2_box{width:620px;}
    .activity_2_view_wrap{height:100px;}
    .activity_2_view{width:100px; height:100px;}
    .activity_2_line{height:50px;}
    
    .activity_2_box.four{width:380px;}
    .activity_2_box.six{width:460px;}
    .activity_2_box.eight{width:623px;}
    
    .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:133px;}
    
    .activity_2_box.ten .activity_2_view_wrap{height:81px;}
    .activity_2_box.ten .activity_2_view{width:81px; height:81px;}
    .activity_2_box.ten .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:108px;}
    
    .activity_2_bullet{width:22px; height:22px;}
}
@media all and (min-width:768px){    
    .activity_2_box{width:740px;}
    .activity_2_view_wrap{height:120px;}
    .activity_2_view{width:120px; height:120px;}
    .activity_2_line{height:60px;}
    
    .activity_2_box.four{width:400px;}
    .activity_2_box.six{width:540px;}
    .activity_2_box.eight{width:730px;}
    
    .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:160px;}
    
    .activity_2_box.ten .activity_2_view_wrap{height:99px;}
    .activity_2_box.ten .activity_2_view{width:99px; height:99px;}
    .activity_2_box.ten .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:132px;}    
    
    .activity_2_bullet{width:24px; height:24px;}
}
@media all and (min-width:960px){    
    .activity_2_box{width:860px;}
    .activity_2_view_wrap{height:150px;}
    .activity_2_view{width:150px; height:150px;}
    .activity_2_view.click{border-width:3px;}
    .activity_2_line{height:100px;}
    
    .activity_2_box.four{width:440px;}
    .activity_2_box.six{width:660px;}
    .activity_2_box.eight{width:890px;}
    
    .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:200px;}
    
    .activity_2_box.ten .activity_2_view_wrap{height:117px;}
    .activity_2_box.ten .activity_2_view{width:117px; height:117px;}
    .activity_2_box.ten .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:156px;} 
    
    .activity_2_point{width:14px; height:14px; margin-left:-7px;}
    .activity_2_point.bottom{bottom:-7px;}
    .activity_2_point.top{top:-7px;}

	.activity_ios_btn{width:50px; height:50px;}
    
    .activity_2_bullet{width:26px; height:26px;}
}
@media all and (min-width:1024px){    
    .activity_2_box{width:940px;}
    .activity_2_view_wrap{height:160px;}
    .activity_2_view{width:160px; height:160px;}
    .activity_2_view.click{border-width:4px;}
    .activity_2_line{height:110px;}
    
    .activity_2_box.four{width:480px;}
    .activity_2_box.six{width:700px;}
    .activity_2_box.eight{width:943px;}
    
    .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:213px;}
    
    .activity_2_box.ten .activity_2_view_wrap{height:129px;}
    .activity_2_box.ten .activity_2_view{width:129px; height:129px;}
    .activity_2_box.ten .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:172px;} 
    
    .activity_2_bullet{width:28px; height:28px;}
}
@media all and (min-width:1140px){    
    .activity_2_box{width:1020px;}
    .activity_2_view_wrap{height:170px;}
    .activity_2_view{width:170px; height:170px;}
    .activity_2_line{height:120px;}
    
    .activity_2_box.four{width:530px;}
    .activity_2_box.six{width:740px;}
    .activity_2_box.eight{width:997px;}
    
    .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:227px;}
    
    .activity_2_box.ten .activity_2_view_wrap{height:141px;}
    .activity_2_box.ten .activity_2_view{width:141px; height:141px;}
    .activity_2_box.ten .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:188px;} 
    
    .activity_2_bullet{width:30px; height:30px;}
}
@media all and (min-width:1280px){    
    .activity_2_box{width:1140px;}
    .activity_2_view_wrap{height:180px;}
    .activity_2_view{width:180px; height:180px;}
    .activity_2_line{height:140px;}
    
    .activity_2_box.four{width:590px;}
    .activity_2_box.six{width:780px;}
    .activity_2_box.eight{width:1050px;}
    
    .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:240px;}
    
    .activity_2_box.ten .activity_2_view_wrap{height:159px;}
    .activity_2_box.ten .activity_2_view{width:159px; height:159px;}
    .activity_2_box.ten .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:212px;} 
    
    .activity_2_point{width:19px; height:19px; margin-left:-9.5px;}
    .activity_2_point.bottom{bottom:-10px;}
    .activity_2_point.top{top:-10px;}
    
    .activity_2_bullet{width:32px; height:32px; border-width:2px; border-radius:8px;}
}
@media all and (min-width:1440px){    
    .activity_2_box{width:1280px;}
    .activity_2_view_wrap{height:200px;}
    .activity_2_view{width:200px; height:200px;}
    .activity_2_line{height:170px;}
    
    .activity_2_box.four{width:610px;}
    .activity_2_box.six{width:860px;}
    .activity_2_box.eight{width:1157px;}
    
    .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:267px;}
    
    .activity_2_box.ten .activity_2_view_wrap{height:180px;}
    .activity_2_box.ten .activity_2_view{width:180px; height:180px;}
    .activity_2_box.ten .activity_2_view_wrap.ratio_4_3 .activity_2_view{width:240px;} 
    
    .activity_2_bullet{width:34px; height:34px;}
}

/** 액티비티 3 - 짝지 맞추기 **/
.activity_3_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%;}
.activity_3_box{width:400px;}
.activity_3_view_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.activity_3_view{width:56px; height:56px; background-position:center; background-repeat:no-repeat; background-size:cover; position:relative; border-radius:10px; background-color:rgba(255,255,255,0.95); cursor:pointer; margin:5px; transition:0.2s; overflow:hidden;}
.activity_3_view_wrap .activity_3_view:first-child{margin-left:0;}
.activity_3_view_wrap .activity_3_view:last-child{margin-right:0;}
.activity_3_view:before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; transition:0.2s; opacity:0.55;}
.activity_3_view.one:before{background-color:#4bc5f6;}
.activity_3_view.two:before{background-color:#da3f2a;}
.activity_3_view.three:before{background-color:#fff200;}
.activity_3_view.four:before{background-color:#00a651;}
.activity_3_view.five:before{background-color:#2e3192;}

.activity_3_box.height_450 .activity_3_view{width:56px; height:84px;}

.activity_3_label{position:absolute; left:0; width:100%;}
.activity_3_label.top{top:8%;}
.activity_3_label.bottom{bottom:8%;}
.activity_3_input{display:none;}
.activity_3_bullet{display:block; margin:0 auto; width:20px; height:20px; border:1px solid rgba(0,0,0,0.25); background-color:rgba(255,255,255,0.85); border-radius:5px;}
.activity_3_input:checked + .activity_3_bullet{background:url(../images/input_check_purple.png) no-repeat; background-size:cover;  background-color:rgba(255,255,255,0.85);}

.activity_3_shake{-moz-animation-duration:0.3s; -webkit-animation-duration:0.3s; animation-duration:0.3s; -moz-animation-name:activity_2_shake; -webkit-animation-name:activity_2_shake; animation-name:activity_2_shake; -moz-animation-iteration-count:1; -webkit-animation-iteration-count:1; animation-iteration-count:1; -moz-animation-direction:alternate; -webkit-animation-direction:alternate; animation-direction:alternate;}
@keyframes activity_3_shake{
    15%{left:-0.5%; top:-0.5%;}
    30%{left:0.5%; top:0.5%;}
    45%{left:-0.5%; top:0.5%;}
    60%{left:0.5%; top:-0.5%;}
    75%{left:-0.5%; top:-0.5%;}
    90%{left:0.5%; top:0.5%;}
    100%{left:0.5%; top:-0.5%;}
}

@media all and (min-width:640px){  
    .activity_3_box{width:600px;}
    
    .activity_3_view{width:84px; height:84px;}
    
    .activity_3_box.height_450 .activity_3_view{width:84px; height:126px;}
    
    .activity_3_bullet{width:22px; height:22px;}
}
@media all and (min-width:768px){    
    .activity_3_box{width:680px;}
    .activity_3_view{width:104px; height:104px;}
    
    .activity_3_box.height_450 .activity_3_view{width:104px; height:156px;}
    
    .activity_3_bullet{width:24px; height:24px;}
}
@media all and (min-width:960px){    
    .activity_3_box{width:850px;}
    .activity_3_view{width:130px; height:130px; margin:10px;}
    
    .activity_3_box.height_450 .activity_3_view{width:130px; height:195px;}
    
    .activity_3_bullet{width:26px; height:26px;}
}
@media all and (min-width:1024px){    
    .activity_3_box{width:950px;}
    .activity_3_view{width:140px; height:140px;}
    
    .activity_3_box.height_450 .activity_3_view{width:140px; height:210px;}
    
    .activity_3_bullet{width:28px; height:28px;}
}
@media all and (min-width:1140px){    
    .activity_3_box{width:975px;}
    .activity_3_view{width:150px; height:150px;}
    
    .activity_3_box.height_450 .activity_3_view{width:150px; height:225px;}
    
    .activity_3_bullet{width:30px; height:30px;}
}
@media all and (min-width:1280px){    
    .activity_3_box{width:1080px;}
    .activity_3_view{width:170px; height:170px;}
    
    .activity_3_box.height_450 .activity_3_view{width:170px; height:255px;}
    
    .activity_3_bullet{width:32px; height:32px; border-width:2px; border-radius:8px;}
}
@media all and (min-width:1440px){    
    .activity_3_box{width:1280px;}
    .activity_3_view{width:190px; height:190px;}
    
    .activity_3_box.height_450 .activity_3_view{width:190px; height:285px;}
    
    .activity_3_bullet{width:34px; height:34px;}
}

/** 액티비티 4 - 카드 맞추기 **/
.activity_4_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%;}
.activity_4_box{width:400px;}

@media all and (min-width:768px){    
    .activity_4_box{width:600px;}
}
@media all and (min-width:768px){    
    .activity_4_box{width:680px;}
}
@media all and (min-width:960px){    
    .activity_4_box{width:800px;}

}
@media all and (min-width:1024px){    
    .activity_4_box{width:840px;}

}
@media all and (min-width:1280px){    
    .activity_4_box{width:1080px;}

}
@media all and (min-width:1440px){    
    .activity_4_box{width:1280px;}

}

/** 액티비티 5 - 보드 **/
.activity_5_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%;}
.activity_5_area{width:400px;}

.activity_5_passage_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.activity_5_passage_area{width:182px; height:109.2px; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:20px; margin:5px; position:relative;}
.activity_5_passage_area:first-child{margin-left:0;}
.activity_5_passage_area:last-child{margin-right:0;}
.activity_5_passage{position:absolute; left:0; right:0; width:100%; height:100%; opacity:0;}

.activity_5_view_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; height:60px; width:100%;}
.activity_5_view{width:54px; height:54px; margin:4px; border-radius:10px;}

.activity_5_view.small{width:42px; height:42px;}

@media all and (min-width:640px){    
    .activity_5_area{width:530px;}
    .activity_5_passage_area{width:260px; height:156px;}
    .activity_5_view_wrap{height:88px;}
    .activity_5_view{width:80px; height:80px;}
    
    .activity_5_view.small{width:60px; height:60px;}
}
@media all and (min-width:768px){    
    .activity_5_area{width:650px;}
    .activity_5_passage_area{width:320px; height:192px;}
    .activity_5_view_wrap{height:110px;}
    .activity_5_view{width:100px; height:100px;}
    
    .activity_5_view.small{width:74px; height:74px;}
}
@media all and (min-width:960px){    
    .activity_5_area{width:770px;}
    .activity_5_passage_area{width:380px; height:228px;}
    .activity_5_view_wrap{height:132px;}
    .activity_5_view{width:120px; height:120px;}
    
    .activity_5_view.small{width:90px; height:90px;}
}
@media all and (min-width:1024px){    
    .activity_5_area{width:820px;}
    .activity_5_passage_area{width:400px; height:240px; margin:10px;}
    .activity_5_view{margin:8px;}
}
@media all and (min-width:1140px){    
    .activity_5_area{width:940px;}
    .activity_5_passage_area{width:460px; height:276px;}
    .activity_5_view_wrap{height:154px;}
    .activity_5_view{width:140px; height:140px;}
    
    .activity_5_view.small{width:110px; height:110px;}
}
@media all and (min-width:1280px){    
    .activity_5_area{width:1000px;}
    .activity_5_passage_area{width:490px; height:294px;}
    .activity_5_view_wrap{height:165px;}
    .activity_5_view{width:150px; height:150px;}
    
    .activity_5_view.small{width:116px; height:116px;}
}
@media all and (min-width:1440px){    
    .activity_5_area{width:1060px;}
    .activity_5_passage_area{width:520px; height:312px;}
    .activity_5_view_wrap{height:176px;}
    .activity_5_view{width:160px; height:160px;}
    
    .activity_5_view.small{width:122px; height:122px;}
}
@media all and (min-width:1680px){    
    .activity_5_area{width:1220px;}
    .activity_5_passage_area{width:600px; height:360px;}
    
    .activity_5_view_wrap{height:210px;}
    .activity_5_view{width:187px; height:187px;}
    
    .activity_5_view_area.small .activity_5_view{width:140px; height:140px;}
}

/** 액티비티 6 - 동영상 **/
.activity_6_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%;}
.activity_6_area{width:70%;}
.activity_6_box{padding-top:56.25%; position:relative; margin:0 auto 0 auto;}
.activity_6_video{position:absolute; left:0; top:0; width:100%; height:100%; border:0;}

@media all and (min-width:768px){   

}
@media all and (min-width:960px){  

}
@media all and (min-width:1024px){  
    .activity_6_area{width:72%;}
}
@media all and (min-width:1140px){  

}
@media all and (min-width:1280px){  

}
@media all and (min-width:1440px){  

}
@media all and (min-width:1680px){  
    .activity_6_area{width:72%;}
}

/** 액티비티 7 - 단어 찾기 **/
.activity_7_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%;}
.activity_7_area{width:75%; max-width:1090px;}
.activity_7_list{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.activity_7_list li{width:31%; padding-top:13.64%; position:relative; background-image:url(../images/card_word.png); background-repeat:no-repeat; background-size:cover; margin:1.75% 0; cursor:pointer;}
.activity_7_word{position:absolute; left:0; top:0; width:100%; height:100%; 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; color:#333; font-size:17px;}
.activity_7_word.font_kg{font-size:22px;}

@media all and (min-width:640px){   
    .activity_7_word{font-size:20px;}
    .activity_7_word.font_kg{font-size:29px;}
}
@media all and (min-width:768px){   
    .activity_7_word{font-size:23px;}
    .activity_7_word.font_kg{font-size:34px;}
}
@media all and (min-width:960px){  
    .activity_7_word{font-size:29px;}
    .activity_7_word.font_kg{font-size:40px;}
}
@media all and (min-width:1024px){  
    .activity_7_word{font-size:31px;}
    .activity_7_word.font_kg{font-size:42px;}
}
@media all and (min-width:1140px){  

}
@media all and (min-width:1280px){  
    .activity_7_word{font-size:35px;}
    .activity_7_word.font_kg{font-size:49px;}
    .activity_7_list li{width:284px; height:125px; padding:0; margin:2% 0;}
}
@media all and (min-width:1440px){  

}
@media all and (min-width:1680px){  
    .activity_6_area{width:72%;}
}

/** 액티비티 8 - 녹음하기 **/
.activity_8_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%;}
.activity_8_area{width:100%;}
.activity_8_img{display:block; width:38%; max-width:200px; margin:5px auto;}
.activity_8_img.width_900{width:68%; max-width:none;}
.activity_8_img.width_1200{width:54%; max-width:none;}

.activity_8_area .activity_popup_passage_wrap{width:90%; max-width:1080px;}

.quiz_8_sound_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.quiz_8_sound_btn{width:52px; height:52px; cursor:pointer;}

.quiz_8_bar_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; padding:0 0 0 40px;}
.quiz_8_bar_bg{height:4px; background-color:#fff; width:160px; position:relative; border-radius:4px; overflow:hidden;}
.quiz_8_bar{position:absolute; left:0; top:0; height:100%; background-color:#385723; transition:1s;}
.quiz_8_bar_sec{color:#333; padding-left:10px; font-size:12px; width:55px;}

.quiz_8_bar_wrap.no_sec{padding:0;}
.quiz_8_bar_wrap.no_sec .quiz_8_bar_sec{display:none;}

@media all and (min-width:640px){ 
    .quiz_8_bar_bg{width:240px;}
    
    .quiz_8_sound_btn{width:80px; height:80px}
}
@media all and (min-width:768px){ 
    .activity_8_img.width_1200{width:56%;}
    
    .quiz_8_bar_bg{width:270px;}
    
    .quiz_8_sound_btn{width:90px; height:90px}
}
@media all and (min-width:960px){ 
    .activity_8_img{width:44%; margin:10px auto;}
    .activity_8_img.width_1200{width:57%;}
    
    .quiz_8_sound_btn{width:100px; height:100px;}
    
    .quiz_8_bar_wrap{padding:5px 0 0 42px;}
    .quiz_8_bar_bg{width:300px;}
    .quiz_8_bar_sec{font-size:13px; width:60px;}
    
    .quiz_8_bar_wrap.no_sec{padding:5px 0 0 0;}
}
@media all and (min-width:1024px){ 
    .activity_8_img.width_1200{width:58%;}
    
    .quiz_8_sound_btn{width:110px; height:110px}
    
    .quiz_8_bar_bg{width:330px;}
}
@media all and (min-width:1280px){ 
    .activity_8_img{margin:-5px auto 15px auto; max-width:350px;}
    .activity_8_img.width_900{width:900px;}
    .activity_8_img.width_1200{width:61%; max-width:1200px;}
    
    .quiz_8_sound_btn{width:135px; height:135px;}
    
    .quiz_8_bar_wrap{padding:10px 0 0 45px;}
    .quiz_8_bar_bg{width:410px;}
    .quiz_8_bar_sec{font-size:14px; width:65px;}
    
    .quiz_8_bar_wrap.no_sec{padding:10px 0 0 0;}
}
@media all and (min-width:1440px){ 
    .activity_8_img{margin:-5px auto 20px auto;}
    
    .quiz_8_bar_wrap{padding:15px 0 0 45px;}
    .quiz_8_bar_bg{width:450px;}
    
    .quiz_8_bar_wrap.no_sec{padding:15px 0 0 0;}
}

/** 액티비티 9 - 스펠링 **/
.activity_9_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%;}
.activity_9_area{width:100%;}
.activity_9_img{display:block; width:31%; max-width:180px; margin:-10px auto 10px auto;}

.activity_9_area .activity_popup_passage_wrap{width:90%; max-width:1164px;}

.activity_9_num_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; width:74%; margin:0 auto 5px auto; color:#333; font-weight:500; max-width:1180px; font-size:12px;}
.activity_9_num_wrap li{width:10%;}
.activity_9_num_area{width:55%; padding-top:55%; position:relative; margin:0 auto;}
.activity_9_num{position:absolute; left:0; top:0; width:100%; height:100%; 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; background-color:#fff; box-shadow:inset 0 0 4px 2px rgba(0,0,0,0.15);}

.activity_9_num_area.opacity{opacity:0.45;}

.activity_9_card_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; width:74%; margin:0 auto; color:#2f194b; max-width:1180px;}
.activity_9_card_wrap li{width:10%; position:relative; cursor:pointer; perspective:100rem;}
.activity_9_card_wrap li.opacity{opacity:0.45;}

.activity_9_card_area{width:85%; padding-top:117.5%; position:relative; margin:0 auto; box-shadow:0 2px 4px 2px rgba(0,0,0,0.15); -webkit-backface-visibility:hidden; -webkit-transform:translate3d(0,0,0); -webkit-perspective:0; -webkit-transition:1s; backface-visibility:hidden; /*뒷면 숨기기*/ visibility:visible; transition:1s; 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;}
.front_9{transform:rotateY(0deg); background-repeat:no-repeat; background-size:cover;} 
.back_9{position:absolute; left:0; top:0; right:0; background:url(../images/word_back.jpg) no-repeat; background-size:cover; transform: rotateY(-180deg);} 
.front_rotate_9{transform:rotateY(180deg);}
.back_rotate_9{transform:rotateY(0deg);/*y축을 기준으로 0도 까지회전*/ }

.activity_9_card{position:absolute; left:0; top:0; width:100%; height:100%; 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; font-size:17px;}
.activity_9_card.font_kg{font-size:21px;}

.activity_9_wrong{-moz-animation-duration:0.3s; -webkit-animation-duration:0.3s; animation-duration:0.3s; -moz-animation-name:activity_9_wrong; -webkit-animation-name:activity_9_wrong; animation-name:activity_9_wrong; -moz-animation-iteration-count:1; -webkit-animation-iteration-count:1; animation-iteration-count:1; -moz-animation-direction:alternate; -webkit-animation-direction:alternate; animation-direction:alternate;}
@keyframes activity_9_wrong{
    15%{left:-1%; top:-1%;}
    30%{left:1%; top:1%;}
    45%{left:-1%; top:1%;}
    60%{left:1%; top:-1%;}
    75%{left:-1%; top:-1%;}
    90%{left:1%; top:1%;}
    100%{left:0%; top:0%;}
}


.quiz_9_sound_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; margin-top:10px;}
.quiz_9_sound_btn{width:50px; height:50px; cursor:pointer;}

@media all and (min-width:640px){ 
    .activity_9_num_wrap{font-size:14px;}
    
    .quiz_9_sound_btn{width:65px; height:65px;}
    
    .activity_9_card{font-size:24px;}
    .activity_9_card.font_kg{font-size:28px;}
}
@media all and (min-width:768px){ 
    .quiz_9_sound_btn{width:75px; height:75px;}
    
    .activity_9_card{font-size:27px;}
    .activity_9_card.font_kg{font-size:35px;}
}
@media all and (min-width:960px){ 
    .activity_9_img{width:42%; margin:-10px auto 15px auto;}
    
    .activity_9_num_wrap{width:80%; margin-bottom:10px; font-size:16px;}
    .activity_9_card_wrap{width:80%;}
    .activity_9_card{font-size:35px;}
    .activity_9_card.font_kg{font-size:44px;}
    
    .quiz_9_sound_wrap{margin-top:15px;}
    .quiz_9_sound_btn{width:90px; height:90px;}
}
@media all and (min-width:1024px){ 
    .activity_9_num_wrap{width:81%;}
    .activity_9_card_wrap{width:81%;} 
    .activity_9_card{font-size:39px;}
    .activity_9_card.font_kg{font-size:46px;}
    
    .quiz_9_sound_btn{width:100px; height:100px;}
}
@media all and (min-width:1280px){ 
    .activity_9_img{margin:-10px auto 25px auto; max-width:300px;}
    
    .activity_9_num_wrap{width:90%; margin-bottom:15px; font-size:21px;}
    .activity_9_num_area{width:50%; padding-top:50%;}
    .activity_9_card_wrap{width:90%;}
    .activity_9_card{font-size:48px;}
    .activity_9_card.font_kg{font-size:60px;}
    
    .quiz_9_sound_wrap{margin-top:25px;}
    .quiz_9_sound_btn{width:135px; height:135px;}
}
@media all and (min-width:1440px){ 
    .activity_9_img{margin:-10px auto 35px auto;}
    
    .quiz_9_sound_wrap{margin-top:35px;}
}

/** 액티비티 10 - 두더지 **/
.activity_10_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%;}

.activity_10_area{width:100%;}
.activity_10_area .activity_popup_passage_wrap{width:70%; max-width:1010px;}

.activity_10_box{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0 auto 0 auto; width:74%; max-width:1080px;}
.click_mallet{cursor:url(../images/mallet_on.cur), auto;}
.activity_10_box li{width:31%; max-width:280px; position:relative; transition:0.3s;}
.activity_10_box img{width:100%; position:relative; transition:0.1s; margin:0 auto;}
.activity_10_word{position:absolute; left:1%; right:1%; top:58.5%; bottom:10.55%; 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; color:#000; font-size:13px; transition:0.1s;}
.activity_10_word.img{width:100%; position:absolute; top:55%; left:0; right:0; bottom:auto; padding-top:33.33%; background-repeat:no-repeat; background-position:50%; background-size:contain; border-radius:6px;}
.activity_10_word.font_kg{font-size:18.5px;}

.mole_up_wrap{display:none; position:relative;}
.mole_right, .mole_wrong{display:none;}

.activity_10_score{position:absolute; left:2%; top:4%; width:72px; height:38.9px; background:url(../images/mole_score.png) no-repeat; background-size:cover; 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; color:#000; font-size:16px; padding-top:0.1%;}

@media all and (min-width:640px){     
    .activity_10_word{font-size:15px;}
    .activity_10_word.font_kg{font-size:23px;}
}
@media all and (min-width:768px){ 
    .activity_10_box{width:60%;}
    
    .activity_10_word{font-size:18px;}
    .activity_10_word.font_kg{font-size:26px;}
}
@media all and (min-width:960px){ 
    .activity_10_box{width:78%;}
    .activity_10_box li{width:30%; margin:0 0;}
    .activity_10_word{font-size:21px;}
    .activity_10_word.img{top:58%;}
    .activity_10_word.font_kg{font-size:30px;}
}
@media all and (min-width:1024px){ 
    .activity_10_word{font-size:23px;}
    .activity_10_word.font_kg{font-size:32px;}
}
@media all and (min-width:1280px){ 
    .activity_10_box{width:72%;}
    .activity_10_box li{width:29.5%; margin:5px 0;}
    .activity_10_word{font-size:28px;}
    .activity_10_word.font_kg{font-size:36px;}
}
@media all and (min-width:1440px){ 
    .activity_10_box{width:80%;}
}

/** 액티비티 18 - 두더지 이미지 **/
.activity_18_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%;}

.activity_18_area{width:100%; position:relative;}
.activity_18_area .activity_popup_passage_wrap{width:68%; max-width:1070px;}

.activity_18_box{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0 auto 0 auto; width:68%; max-width:1070px;}
.click_mallet{cursor:url(../images/mallet_on.cur), auto;}
.activity_18_box li{width:28%; max-width:270px; position:relative; transition:0.3s;}
.activity_18_box img{width:100%; position:relative; transition:0.1s; margin:0 auto;}

.activity_18_img{position:absolute; background-repeat:no-repeat; background-position:50%; background-size:cover; border-radius:6px;}
.activity_18_box.rate_1_1 .activity_18_img{top:58%; left:30%; width:40%; padding-top:40%;}
.activity_18_box.rate_5_3 .activity_18_img{top:58%; left:16%; width:68%; padding-top:40.8%;}

.mole_up_wrap{display:none; position:relative;}
.mole_right, .mole_wrong{display:none;}
img.mole_hand{position:absolute; left:0; top:0; z-index:50;}

.activity_18_score{position:absolute; left:2%; top:4%; width:72px; height:38.9px; background:url(../images/mole_score.png) no-repeat; background-size:cover; 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; color:#000; font-size:16px; padding-top:0.1%;}

.activity_18_heart_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; margin-bottom:4px;}
.activity_18_heart_area{background-color:#f5ffde; border-radius:12px; padding:4px; box-shadow:4px 4px 0 0 rgba(0,0,0,0.3);}
.activity_18_heart_box{display:-webkit-box; display:-ms-flexbox; display:flex; border:1px dashed #8fbf7d; border-radius:8px; padding:3px;}
.activity_18_heart{width:26px; margin:0 4px;}

.activity_18_heart_wrap.height{position:absolute; left:3%; top:50%; transform:translateY(-50%); display:block;}
.activity_18_heart_wrap.height .activity_18_heart_box{flex-direction:column-reverse;}
.activity_18_heart_wrap.height .activity_18_heart{display:block; margin:2px 0;}

@media all and (min-width:640px){     
    .activity_18_heart{width:32px;}
}
@media all and (min-width:768px){ 
    .activity_18_box{width:60%;}
    .activity_18_heart{width:34px;}
}
@media all and (min-width:960px){ 
    .activity_18_box{width:72%;}
    .activity_18_box li{width:30%; margin:0 0;}
    .activity_18_heart_area{box-shadow:6px 6px 0 0 rgba(0,0,0,0.3);}
    .activity_18_heart{width:46px;}
    
    .activity_18_heart_wrap.height .activity_18_heart{margin:4px 4px;}
}
@media all and (min-width:1024px){ 

}
@media all and (min-width:1280px){ 
    .activity_18_box{width:72%;}
    .activity_18_box li{width:270px; margin:5px 0;}
    .activity_18_heart_wrap{margin-bottom:6px;}
    .activity_18_heart_box{border-width:2px; padding:4px 5px;}
    .activity_18_heart{width:52px;}
    
    .activity_18_heart_wrap.height .activity_18_heart_box{padding:6px 5px;}
}
@media all and (min-width:1440px){ 
    .activity_18_box{width:66%;}
    .activity_18_heart{width:60px;}
}
@media all and (min-width:1680px){ 
    .activity_18_heart_box{padding:5px 10px;}
    .activity_18_heart_wrap.height .activity_18_heart_box{padding:8px 6px;}
    .activity_18_heart{width:69px;}
}

/** 액티비티 11 - 이미지 찾기 **/
.activity_11_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%;}
.activity_11_area{width:;}

.activity_11_area .activity_popup_passage_wrap{width:100%; max-width:1030px;}

.activity_11_card_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;  margin:0 auto; webkit-box-lines:multiple; -moz-box-lines:multiple; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.activity_11_card_wrap li{width:56px; height:56px; margin:5px; position:relative; cursor:pointer; perspective:100rem;}
.activity_11_card_wrap li.opacity{opacity:0.45;}

.activity_11_card_wrap.ten{width:330px;}
.activity_11_card_wrap.eight{width:264px;}
.activity_11_card_wrap.six{width:198px;}
.activity_11_card_wrap.four{width:132px;}

.activity_11_card_wrap.height_450 li{width:56px; height:84px;}

.activity_11_card_wrap.height_450 .activity_11_card_area{padding-top:150%;}

.activity_11_card_area{width:100%; padding-top:100%; position:relative; margin:0 auto; box-shadow:0 2px 4px 2px rgba(0,0,0,0.15); -webkit-backface-visibility:hidden; -webkit-transform:translate3d(0,0,0); -webkit-perspective:0; -webkit-transition:1s; backface-visibility:hidden; /*뒷면 숨기기*/ visibility:visible; transition:1s; 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; border-radius:10px;}
.front{transform:rotateY(0deg); background-repeat:no-repeat; background-position:50%; background-size:cover; background-color:#fff;} 
.back{position:absolute; left:0; top:0; right:0; background-position:50%; background-size:cover; transform: rotateY(-180deg);} 
.front_rotate{transform:rotateY(180deg);}
.back_rotate{transform:rotateY(0deg);/*y축을 기준으로 0도 까지회전*/ }

.activity_11_card{position:absolute; left:0; top:0; width:100%; height:100%; 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; font-size:17px;}

.activity_11_wrong{-moz-animation-duration:0.3s; -webkit-animation-duration:0.3s; animation-duration:0.3s; -moz-animation-name:activity_11_wrong; -webkit-animation-name:activity_11_wrong; animation-name:activity_11_wrong; -moz-animation-iteration-count:1; -webkit-animation-iteration-count:1; animation-iteration-count:1; -moz-animation-direction:alternate; -webkit-animation-direction:alternate; animation-direction:alternate;}
@keyframes activity_11_wrong{
    15%{left:-1%; top:-1%;}
    30%{left:1%; top:1%;}
    45%{left:-1%; top:1%;}
    60%{left:1%; top:-1%;}
    75%{left:-1%; top:-1%;}
    90%{left:1%; top:1%;}
    100%{left:0%; top:0%;}
}

@media all and (min-width:640px){ 
    .activity_11_card_wrap li{width:84px; height:84px;}
    
    .activity_11_card_wrap.ten{width:470px;}
    .activity_11_card_wrap.eight{width:376px;}
    .activity_11_card_wrap.six{width:282px;}
    .activity_11_card_wrap.four{width:188px;}
    
    .activity_11_card_wrap.height_450 li{width:84px; height:126px;}
}
@media all and (min-width:768px){ 
    .activity_11_card_wrap li{width:104px; height:104px;}
    
    .activity_11_card_wrap.ten{width:570px;}
    .activity_11_card_wrap.eight{width:456px;}   
    .activity_11_card_wrap.six{width:342px;}
    .activity_11_card_wrap.four{width:228px;}
    
    .activity_11_card_wrap.height_450 li{width:104px; height:156px;}
}
@media all and (min-width:960px){ 
    .activity_11_card_wrap li{width:130px; height:130px; margin:10px;}
    
    .activity_11_card_wrap.ten{width:750px;}
    .activity_11_card_wrap.eight{width:600px;}
    .activity_11_card_wrap.six{width:450px;}
    .activity_11_card_wrap.four{width:300px;}
    
    .activity_11_card_wrap.height_450 li{width:130px; height:195px;}
}
@media all and (min-width:1024px){ 
    .activity_11_card_wrap li{width:140px; height:140px;}
    
    .activity_11_card_wrap.ten{width:800px;}
    .activity_11_card_wrap.eight{width:640px;}
    .activity_11_card_wrap.six{width:480px;}
    .activity_11_card_wrap.four{width:320px;}
    
    .activity_11_card_wrap.height_450 li{width:140px; height:210px;}
}
@media all and (min-width:1140px){
    .activity_11_card_wrap li{width:150px; height:150px; perspective:170px;}
    
    .activity_11_card_wrap.ten{width:850px;}
    .activity_11_card_wrap.eight{width:680px;}
    .activity_11_card_wrap.six{width:510px;}
    .activity_11_card_wrap.four{width:340px;}
    
    .activity_11_card_wrap.height_450 li{width:150px; height:225px;}
}
@media all and (min-width:1280px){
    .activity_11_card_wrap li{width:170px; height:170px;}
    
    .activity_11_card_wrap.ten{width:950px;}
    .activity_11_card_wrap.eight{width:760px;}
    .activity_11_card_wrap.six{width:570px;}
    .activity_11_card_wrap.four{width:380px;}
    
    .activity_11_card_wrap.height_450 li{width:170px; height:255px;}
}
@media all and (min-width:1440px){
    .activity_11_card_wrap li{width:190px; height:190px; perspective:210px;}
    
    .activity_11_card_wrap.ten{width:1150px;}
    .activity_11_card_wrap.eight{width:840px;}
    .activity_11_card_wrap.six{width:630px;}
    .activity_11_card_wrap.four{width:420px;}
    
    .activity_11_card_wrap.height_450 li{width:190px; height:285px;}
}

/** 액티비티 12 - 보드 모으기 2 **/
.activity_12_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%;}
.activity_12_area{width:400px;}

.activity_12_passage_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;  -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:5px 0;}
.activity_12_passage_area{width:182px; height:109.2px; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:20px; margin:5px; 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;}
.activity_12_passage_box{display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; align-content:center; width:100%; height:100%; position:relative;}
.activity_12_passage{width:76px; height:19px; margin:4px; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:5px; cursor:pointer;}
.activity_12_passage_area.click{border:2px solid rgba(75,197,246,0.8); background-color:rgba(255,255,255,0.7);}

.activity_12_passage_wrap.one .activity_12_passage_area{width:380px; height:114px;}
.activity_12_passage_wrap.one.width_2400_500 .activity_12_passage_area{width:380px; height:158px;} 

.activity_12_passage_wrap.one .activity_12_passage_box{width:;}
.activity_12_passage_wrap.one .activity_12_passage{width:100px; height:25px;}

.activity_12_passage_wrap.three .activity_12_passage{width:50px; height:12.5px;}
.activity_12_passage_wrap.three .activity_12_passage_area{width:120px; height:108px;}

.activity_12_sound_wrap{position:relative; width:100%; z-index:9999; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; background-color:#ff0;}
.activity_12_sound_area{width:185px; position:relative; margin:0 5px;}
.activity_12_sound{position:absolute; top:-41px; right:0; cursor:pointer; width:36px;}

.activity_12_sound_wrap.one .activity_12_sound_area{width:380px;}
.activity_12_sound_wrap.three .activity_12_sound_area{width:120px;}

.activity_12_sound_wrap.one .activity_12_sound_area:nth-child(2), .activity_12_sound_wrap.one .activity_12_sound_area:nth-child(3){display:none;}
.activity_12_sound_wrap.two .activity_12_sound_area:nth-child(2){display:none;}

.activity_12_view_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0 auto; height:40px; margin-top:-5px;}
.activity_12_view_wrap.four{width:260px;}
.activity_12_view_wrap.four, .activity_12_view_wrap.five, .activity_12_view_wrap.six{height:80px;}
.activity_12_view{width:120px; height:30px; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:5px; margin:5px; cursor:pointer; position:relative; transition:0.2s;}
.activity_12_view.click{border:2px solid rgba(75,197,246,0.8); background-color:rgba(255,255,255,0.7);}

.activity_12_passage_wrap.square .activity_12_passage_box{width:;}
.activity_12_passage_wrap.square .activity_12_passage{width:45px; height:45px;}
.activity_12_passage_wrap.square.three .activity_12_passage{width:30px; height:30px;}

.activity_12_view_wrap.square{height:64px;}
.activity_12_view_wrap.square.four{width:auto;}
.activity_12_view_wrap.square .activity_12_view{width:54px; height:54px;}

.activity_12_passage_wrap .activity_12_passage_box.two .activity_12_passage{width:112px; height:28px;}
.activity_12_passage_wrap.square .activity_12_passage_box.two .activity_12_passage{width:50px; height:50px;}

.activity_12_shake{-moz-animation-duration:0.3s; -webkit-animation-duration:0.3s; animation-duration:0.3s; -moz-animation-name:activity_12_shake; -webkit-animation-name:activity_12_shake; animation-name:activity_12_shake; -moz-animation-iteration-count:1; -webkit-animation-iteration-count:1; animation-iteration-count:1; -moz-animation-direction:alternate; -webkit-animation-direction:alternate; animation-direction:alternate; }
@keyframes activity_12_shake{
    15%{left:-0.5%; top:-0.5%;}
    30%{left:0.5%; top:0.5%;}
    45%{left:-0.5%; top:0.5%;}
    60%{left:0.5%; top:-0.5%;}
    75%{left:-0.5%; top:-0.5%;}
    90%{left:0.5%; top:0.5%;}
    100%{left:0.5%; top:-0.5%;}
}

@media all and (min-width:640px){    
    .activity_12_area{width:540px;}
    .activity_12_passage_area{width:260px; height:156px;}
    
    .activity_12_passage_wrap.one .activity_12_passage_area{width:480px; height:144px;}
    .activity_12_passage_wrap.one.width_2400_500 .activity_12_passage_area{width:480px; height:200px;} 
    
    .activity_12_passage_wrap.three .activity_12_passage_area{width:170px; height:153px;}
    
    .activity_12_passage{width:108px; height:27px; margin:5px;}
    .activity_12_passage_wrap.one .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.one .activity_12_passage{width:140px; height:35px;}
    .activity_12_passage_wrap.three .activity_12_passage{width:70px; height:17.5px;}
    
    .activity_12_sound{width:48px; top:-53px;}
    .activity_12_sound_area{width:260px;}    
    .activity_12_sound_wrap.one .activity_12_sound_area{width:480px;}
    .activity_12_sound_wrap.three .activity_12_sound_area{width:170px;}
    
    .activity_12_view_wrap{height:50px;}
    .activity_12_view_wrap.four{width:360px;}
    .activity_12_view_wrap.four, .activity_12_view_wrap.five, .activity_12_view_wrap.six{height:100px;}
    .activity_12_view{width:160px; height:40px;}
    
    .activity_12_passage_wrap.square .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.square .activity_12_passage{width:62px; height:62px;}  
    .activity_12_passage_wrap.square.three .activity_12_passage{width:45px; height:45px;}    

    .activity_12_view_wrap.square{height:90px;}
    .activity_12_view_wrap.square.four{width:auto;}
    .activity_12_view_wrap.square .activity_12_view{width:80px; height:80px;}
    
    .activity_12_passage_wrap .activity_12_passage_box.two .activity_12_passage{width:158px; height:39.5px;}
    .activity_12_passage_wrap.square .activity_12_passage_box.two .activity_12_passage{width:75px; height:75px;}
}
@media all and (min-width:768px){    
    .activity_12_area{width:660px;}
    .activity_12_passage_area{width:320px; height:192px;}   
    
    .activity_12_passage_wrap.three .activity_12_passage_area{width:210px; height:189px;}
    
    .activity_12_passage{width:136px; height:34px;}
    .activity_12_passage_wrap.one .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.one .activity_12_passage{width:180px; height:45px;}
    .activity_12_passage_wrap.three .activity_12_passage{width:86px; height:21.5px;}
    
    .activity_12_sound{width:56px; top:-61px;}
    .activity_12_sound_area{width:320px;}    
    .activity_12_sound_wrap.one .activity_12_sound_area{width:480px;}
    .activity_12_sound_wrap.three .activity_12_sound_area{width:210px;}   
    
    .activity_12_view_wrap{height:55px;}
    .activity_12_view_wrap.four{width:440px;}
    .activity_12_view_wrap.four, .activity_12_view_wrap.five, .activity_12_view_wrap.six{height:110px;}
    .activity_12_view{width:180px; height:45px;}
    
    .activity_12_passage_wrap.square .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.square .activity_12_passage{width:78px; height:78px;}  
    .activity_12_passage_wrap.square.three .activity_12_passage{width:55px; height:55px;}
    
    .activity_12_view_wrap.square{height:110px;}
    .activity_12_view_wrap.square.four{width:auto;}
    .activity_12_view_wrap.square .activity_12_view{width:100px; height:100px;}
    
    .activity_12_passage_wrap .activity_12_passage_box.two .activity_12_passage{width:198px; height:49.5px;}
    .activity_12_passage_wrap.square .activity_12_passage_box.two .activity_12_passage{width:95px; height:95px;}
}
@media all and (min-width:960px){    
    .activity_12_area{width:780px;}
    .activity_12_passage_area{width:380px; height:228px;}
    
    .activity_12_passage_wrap.one .activity_12_passage_area{width:770px; height:231px;}
    .activity_12_passage_wrap.one.width_2400_500 .activity_12_passage_area{width:770px; height:321px;} 
    
    .activity_12_passage_wrap.three .activity_12_passage_area{width:250px; height:225px;}
    
    .activity_12_passage{width:164px; height:41px;}
    .activity_12_passage_wrap.one .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.one .activity_12_passage{width:220px; height:55px;}
    .activity_12_passage_wrap.three .activity_12_passage{width:104px; height:26px;}
    
    .activity_12_sound{width:62px; top:-67px;}
    .activity_12_sound_area{width:380px;}   
    .activity_12_sound_wrap.one .activity_12_sound_area{width:770px;}
    .activity_12_sound_wrap.three .activity_12_sound_area{width:250px;}   
    
    .activity_12_view_wrap{height:74px;}
    .activity_12_view_wrap.four{width:520px;}
    .activity_12_view_wrap.four, .activity_12_view_wrap.five, .activity_12_view_wrap.six{height:148px;}
    .activity_12_view{width:250px; height:62.5px; border-radius:10px;}
    
    .activity_12_view.click{border-width:3px;}
    
    .activity_12_passage_wrap.square .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.square .activity_12_passage{width:95px; height:95px;}   
    .activity_12_passage_wrap.square.three .activity_12_passage{width:65px; height:65px;}
    
    .activity_12_view_wrap.square{height:130px;}
    .activity_12_view_wrap.square.four{width:auto;}
    .activity_12_view_wrap.square .activity_12_view{width:120px; height:120px;}
    
    .activity_12_passage_wrap .activity_12_passage_box.two .activity_12_passage{width:238px; height:59.5px;}
    .activity_12_passage_wrap.square .activity_12_passage_box.two .activity_12_passage{width:115px; height:115px;}
}
@media all and (min-width:1024px){    
    .activity_12_area{width:840px;}
    .activity_12_passage_area{width:400px; height:240px; margin:10px;}  
    
    .activity_12_passage_wrap.one .activity_12_passage_area{width:790px; height:237px;}
    .activity_12_passage_wrap.one.width_2400_500 .activity_12_passage_area{width:790px; height:329px;} 
    
    .activity_12_sound_area{margin:0 10px;}
    .activity_12_sound{top:-72px;}
    .activity_12_sound_wrap.one .activity_12_sound_area{width:790px;}
    
    .activity_12_view_wrap{height:84px;}
    .activity_12_view_wrap.four{width:540px;}
    .activity_12_view_wrap.four, .activity_12_view_wrap.five, .activity_12_view_wrap.six{height:168px;}
    .activity_12_view{margin:10px;}
    
    .activity_12_view.click{border-width:4px;}
    
    .activity_12_view_wrap.square{height:140px;}
    .activity_12_view_wrap.square.four{width:auto;}
}
@media all and (min-width:1140px){    
    .activity_12_area{width:960px;}
    .activity_12_passage_area{width:460px; height:276px;}
    
    .activity_12_passage_wrap.one .activity_12_passage_area{width:900px; height:270px;}
    .activity_12_passage_wrap.one.width_2400_500 .activity_12_passage_area{width:900px; height:375px;} 
    
    .activity_12_passage_wrap.three .activity_12_passage_area{width:300px; height:270px;}
    
    .activity_12_passage{width:196px; height:49px; margin:6px;}
    .activity_12_passage_wrap.one .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.one .activity_12_passage{width:260px; height:65px;}
    .activity_12_passage_wrap.three .activity_12_passage{width:130px; height:32.5px;}
    
    .activity_12_sound{width:70px; top:-80px;}
    .activity_12_sound_area{width:460px;}    
    .activity_12_sound_wrap.one .activity_12_sound_area{width:900px;}
    .activity_12_sound_wrap.three .activity_12_sound_area{width:300px;}    
        
    .activity_12_view_wrap{height:90px;}
    .activity_12_view_wrap.four{width:640px;}
    .activity_12_view_wrap.four, .activity_12_view_wrap.five, .activity_12_view_wrap.six{height:180px;}
    .activity_12_view{width:280px; height:70px;}
    
    .activity_12_passage_wrap.square .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.square .activity_12_passage{width:115px; height:115px;}   
    .activity_12_passage_wrap.square.three .activity_12_passage{width:80px; height:80px;}
    
    .activity_12_view_wrap.square{height:160px;}
    .activity_12_view_wrap.square.four{width:auto;}
    .activity_12_view_wrap.square .activity_12_view{width:140px; height:140px;}
    
    .activity_12_passage_wrap .activity_12_passage_box.two .activity_12_passage{width:288px; height:72px;}
    .activity_12_passage_wrap.square .activity_12_passage_box.two .activity_12_passage{width:135px; height:135px;}
}
@media all and (min-width:1280px){    
    .activity_12_area{width:1020px;}
    .activity_12_passage_area{width:490px; height:294px;}
    
    .activity_12_passage_wrap.one .activity_12_passage_area{width:940px; height:282px;}
    .activity_12_passage_wrap.one.width_2400_500 .activity_12_passage_area{width:940px; height:392px;} 
    
    .activity_12_passage_wrap.three .activity_12_passage_area{width:320px; height:288px;}
    
    .activity_12_passage{width:216px; height:54px;}
    .activity_12_passage_wrap.one .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.one .activity_12_passage{width:280px; height:70px;}
    .activity_12_passage_wrap.three .activity_12_passage{width:136px; height:34px;}
    
    .activity_12_sound{width:74px; top:-84px;}
    .activity_12_sound_area{width:490px;} 
    .activity_12_sound_wrap.one .activity_12_sound_area{width:940px;}
    .activity_12_sound_wrap.three .activity_12_sound_area{width:320px;} 
    
    .activity_12_view_wrap{height:95px;}
    .activity_12_view_wrap.four{width:680px;}
    .activity_12_view_wrap.four, .activity_12_view_wrap.five, .activity_12_view_wrap.six{height:190px;}
    .activity_12_view{width:300px; height:75px;}
    
    .activity_12_passage_wrap.square .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.square .activity_12_passage{width:125px; height:125px;}   
    .activity_12_passage_wrap.square.three .activity_12_passage{width:85px; height:85px;}
    
    .activity_12_view_wrap.square{height:170px;}
    .activity_12_view_wrap.square.four{width:auto;}
    .activity_12_view_wrap.square .activity_12_view{width:150px; height:150px;}
    
    .activity_12_passage_wrap .activity_12_passage_box.two .activity_12_passage{width:308px; height:77px;}
    .activity_12_passage_wrap.square .activity_12_passage_box.two .activity_12_passage{width:145px; height:145px;}
}
@media all and (min-width:1440px){        
    .activity_12_area{width:1080px;}
    .activity_12_passage_area{width:520px; height:312px;}
    
    .activity_12_passage_wrap.one .activity_12_passage_area{width:1000px; height:300px;}
    .activity_12_passage_wrap.one.width_2400_500 .activity_12_passage_area{width:1000px; height:417px;} 
    
    .activity_12_passage_wrap.three .activity_12_passage_area{width:340px; height:306px;}
    
    .activity_12_passage{width:228px; height:57px;}
    .activity_12_passage_wrap.one .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.one .activity_12_passage{width:300px; height:75px;}
    .activity_12_passage_wrap.three .activity_12_passage{width:144px; height:36px;}
    
    .activity_12_sound{width:80px; top:-90px;}
    .activity_12_sound_area{width:520px;}  
    .activity_12_sound_wrap.one .activity_12_sound_area{width:1000px;}
    .activity_12_sound_wrap.three .activity_12_sound_area{width:340px;} 
    
    .activity_12_view_wrap{height:100px;}
    .activity_12_view_wrap.four{width:720px;}
    .activity_12_view_wrap.four, .activity_12_view_wrap.five, .activity_12_view_wrap.six{height:200px;}
    .activity_12_view{width:320px; height:80px;}
    
    .activity_12_passage_wrap.square .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.square .activity_12_passage{width:130px; height:130px;}   
    .activity_12_passage_wrap.square.three .activity_12_passage{width:90px; height:90px;}
    
    .activity_12_view_wrap.square{height:180px;}
    .activity_12_view_wrap.square.four{width:auto;}
    .activity_12_view_wrap.square .activity_12_view{width:160px; height:160px;}
    
    .activity_12_passage_wrap .activity_12_passage_box.two .activity_12_passage{width:328px; height:82px;}
    .activity_12_passage_wrap.square .activity_12_passage_box.two .activity_12_passage{width:155px; height:155px;}
}
@media all and (min-width:1680px){    
    .activity_12_area{width:1260px;}
    .activity_12_passage_area{width:600px; height:360px;}
    
    .activity_12_passage_wrap.one .activity_12_passage_area{width:1180px; height:354px;}
    .activity_12_passage_wrap.one.width_2400_500 .activity_12_passage_area{width:1180px; height:492px;} 
    
    .activity_12_passage_wrap.three .activity_12_passage_area{width:400px; height:360px;}
    
    .activity_12_passage{width:260px; height:65px; margin:8px;}
    .activity_12_passage_wrap.one .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.one .activity_12_passage{width:320px; height:80px;}
    .activity_12_passage_wrap.three .activity_12_passage{width:164px; height:41px;}
    
    .activity_12_sound{width:85px; top:-95px;}
    .activity_12_sound_area{width:600px;}    
    .activity_12_sound_wrap.one .activity_12_sound_area{width:1180px; margin:0 auto;}
    .activity_12_sound_wrap.three .activity_12_sound_area{width:400px;} 
    
    .activity_12_view_wrap{height:115px;}
    .activity_12_view_wrap.four{width:840px;}
    .activity_12_view_wrap.four, .activity_12_view_wrap.five, .activity_12_view_wrap.six{height:230px;}
    .activity_12_view{width:380px; height:95px;}
    
    .activity_12_passage_wrap.square .activity_12_passage_box{width:;}
    .activity_12_passage_wrap.square .activity_12_passage{width:150px; height:150px;} 
    .activity_12_passage_wrap.square.three .activity_12_passage{width:100px; height:100px;}
    
    .activity_12_view_wrap.square{height:207px;}
    .activity_12_view_wrap.square.four{width:auto;}
    .activity_12_view_wrap.square .activity_12_view{width:187px; height:187px;}
    
    .activity_12_passage_wrap .activity_12_passage_box.two .activity_12_passage{width:384px; height:96px;}
    .activity_12_passage_wrap.square .activity_12_passage_box.two .activity_12_passage{width:182px; height:182px;}
}    

/** 액티비티 24 - 보드 모으기 3 **/
.activity_24_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%;}
.activity_24_area{width:400px;}

.activity_24_passage_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;  -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:5px 0;}
.activity_24_passage_area{width:182px; height:109.2px; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:20px; margin:5px; position:relative;}
.activity_24_passage{position:absolute; width:100%; height:100%; left:0; top:0; opacity:0;}

.activity_24_passage_wrap.one .activity_24_passage_area{width:380px; height:114px;}
.activity_24_passage_wrap.one.width_1200_500 .activity_24_passage_area{width:380px; height:158px;} 

.activity_24_passage_wrap.three .activity_24_passage_area{width:120px; height:108px;}

.activity_24_sound_wrap{position:relative; width:100%; z-index:9999; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.activity_24_sound_area{width:185px; position:relative; margin:0 5px;}
.activity_24_sound{position:absolute; top:-41px; right:0; cursor:pointer; width:36px;}

.activity_24_sound_wrap.one .activity_24_sound_area{width:380px;}
.activity_24_sound_wrap.three .activity_24_sound_area{width:120px;}

.activity_24_sound_wrap.one .activity_24_sound_area:nth-child(2), .activity_24_sound_wrap.one .activity_24_sound_area:nth-child(3){display:none;}
.activity_24_sound_wrap.two .activity_24_sound_area:nth-child(2){display:none;}

.activity_24_view_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0 auto; height:40px; margin-top:-5px;}
.activity_24_view_wrap.four{width:260px;}
.activity_24_view_wrap.four, .activity_24_view_wrap.five, .activity_24_view_wrap.six{height:80px;}
.activity_24_view{width:120px; height:30px; border-radius:5px; margin:5px;}

.activity_24_view_wrap.small .activity_24_view{width:80px; height:20px;}
.activity_24_view_wrap.square.small .activity_24_view{width:42px; height:44px;}

.activity_24_view_wrap.square{height:64px;}
.activity_24_view_wrap.square.four{width:auto;}
.activity_24_view_wrap.square .activity_24_view{width:54px; height:54px;}

@media all and (min-width:640px){    
    .activity_24_area{width:540px;}
    .activity_24_passage_area{width:260px; height:156px;}
    
    .activity_24_passage_wrap.one .activity_24_passage_area{width:480px; height:144px;}
    .activity_24_passage_wrap.one.width_1200_500 .activity_24_passage_area{width:480px; height:200px;} 
    
    .activity_24_passage_wrap.three .activity_24_passage_area{width:170px; height:153px;}
    
    
    .activity_24_sound{width:48px; top:-53px;}
    .activity_24_sound_area{width:260px;}    
    .activity_24_sound_wrap.one .activity_24_sound_area{width:480px;}
    .activity_24_sound_wrap.three .activity_24_sound_area{width:170px;}
    
    .activity_24_view_wrap{height:50px;}
    .activity_24_view_wrap.four{width:360px;}
    .activity_24_view_wrap.four, .activity_24_view_wrap.five, .activity_24_view_wrap.six{height:100px;}
    .activity_24_view{width:160px; height:40px;}
    
    .activity_24_view_wrap.small .activity_24_view{width:112px; height:28px;}
    .activity_24_view_wrap.square.small .activity_24_view{width:56px; height:56px;}

    .activity_24_view_wrap.square{height:90px;}
    .activity_24_view_wrap.square.four{width:auto;}
    .activity_24_view_wrap.square .activity_24_view{width:80px; height:80px;}
}
@media all and (min-width:768px){    
    .activity_24_area{width:660px;}
    .activity_24_passage_area{width:320px; height:192px;}   
    
    .activity_24_passage_wrap.three .activity_24_passage_area{width:210px; height:189px;}
    
    .activity_24_sound{width:56px; top:-61px;}
    .activity_24_sound_area{width:320px;}    
    .activity_24_sound_wrap.one .activity_24_sound_area{width:480px;}
    .activity_24_sound_wrap.three .activity_24_sound_area{width:210px;}   
    
    .activity_24_view_wrap{height:55px;}
    .activity_24_view_wrap.four{width:440px;}
    .activity_24_view_wrap.four, .activity_24_view_wrap.five, .activity_24_view_wrap.six{height:110px;}
    .activity_24_view{width:180px; height:45px;}
    
    .activity_24_view_wrap.small .activity_24_view{width:132px; height:33px;}
    .activity_24_view_wrap.square.small .activity_24_view{width:70px; height:70px;}
    
    .activity_24_view_wrap.square{height:110px;}
    .activity_24_view_wrap.square.four{width:auto;}
    .activity_24_view_wrap.square .activity_24_view{width:100px; height:100px;}
}
@media all and (min-width:960px){    
    .activity_24_area{width:780px;}
    .activity_24_passage_area{width:380px; height:228px;}
    
    .activity_24_passage_wrap.one .activity_24_passage_area{width:770px; height:231px;}
    .activity_24_passage_wrap.one.width_1200_500 .activity_24_passage_area{width:770px; height:321px;} 
    
    .activity_24_passage_wrap.three .activity_24_passage_area{width:250px; height:225px;}
    
    .activity_24_sound{width:62px; top:-67px;}
    .activity_24_sound_area{width:380px;}   
    .activity_24_sound_wrap.one .activity_24_sound_area{width:770px;}
    .activity_24_sound_wrap.three .activity_24_sound_area{width:250px;}   
    
    .activity_24_view_wrap{height:74px;}
    .activity_24_view_wrap.four{width:520px;}
    .activity_24_view_wrap.four, .activity_24_view_wrap.five, .activity_24_view_wrap.six{height:148px;}
    .activity_24_view{width:250px; height:62.5px; border-radius:10px;}
    
    .activity_24_view_wrap.small .activity_24_view{width:168px; height:42px;}
    .activity_24_view_wrap.square.small .activity_24_view{width:90px; height:90px;}
    
    .activity_24_view_wrap.square{height:130px;}
    .activity_24_view_wrap.square.four{width:auto;}
    .activity_24_view_wrap.square .activity_24_view{width:120px; height:120px;}
}
@media all and (min-width:1024px){    
    .activity_24_area{width:840px;}
    .activity_24_passage_area{width:400px; height:240px; margin:10px;}  
    
    .activity_24_passage_wrap.one .activity_24_passage_area{width:790px; height:237px;}
    .activity_24_passage_wrap.one.width_1200_500 .activity_24_passage_area{width:790px; height:329px;} 
    
    .activity_24_sound_area{margin:0 10px;}
    .activity_24_sound{top:-72px;}
    .activity_24_sound_wrap.one .activity_24_sound_area{width:790px;}
    
    .activity_24_view_wrap{height:84px;}
    .activity_24_view_wrap.four{width:540px;}
    .activity_24_view_wrap.four, .activity_24_view_wrap.five, .activity_24_view_wrap.six{height:168px;}
    .activity_24_view{margin:10px;}
    
    .activity_24_view.click{border-width:4px;}
    
    .activity_24_view_wrap.square{height:140px;}
    .activity_24_view_wrap.square.four{width:auto;}
}
@media all and (min-width:1140px){    
    .activity_24_area{width:960px;}
    .activity_24_passage_area{width:460px; height:276px;}
    
    .activity_24_passage_wrap.one .activity_24_passage_area{width:900px; height:270px;}
    .activity_24_passage_wrap.one.width_1200_500 .activity_24_passage_area{width:900px; height:375px;} 
    
    .activity_24_passage_wrap.three .activity_24_passage_area{width:300px; height:270px;}
    
    .activity_24_sound{width:70px; top:-80px;}
    .activity_24_sound_area{width:460px;}    
    .activity_24_sound_wrap.one .activity_24_sound_area{width:900px;}
    .activity_24_sound_wrap.three .activity_24_sound_area{width:300px;}    
        
    .activity_24_view_wrap{height:90px;}
    .activity_24_view_wrap.four{width:640px;}
    .activity_24_view_wrap.four, .activity_24_view_wrap.five, .activity_24_view_wrap.six{height:180px;}
    .activity_24_view{width:280px; height:70px;}
    
    .activity_24_view_wrap.small .activity_24_view{width:200px; height:50px;}
    .activity_24_view_wrap.square.small .activity_24_view{width:110px; height:110px;}
    
    .activity_24_view_wrap.square{height:160px;}
    .activity_24_view_wrap.square.four{width:auto;}
    .activity_24_view_wrap.square .activity_24_view{width:140px; height:140px;}
}
@media all and (min-width:1280px){    
    .activity_24_area{width:1020px;}
    .activity_24_passage_area{width:490px; height:294px;}
    
    .activity_24_passage_wrap.one .activity_24_passage_area{width:940px; height:282px;}
    .activity_24_passage_wrap.one.width_1200_500 .activity_24_passage_area{width:940px; height:392px;} 
    
    .activity_24_passage_wrap.three .activity_24_passage_area{width:320px; height:288px;}
    
    .activity_24_sound{width:74px; top:-84px;}
    .activity_24_sound_area{width:490px;} 
    .activity_24_sound_wrap.one .activity_24_sound_area{width:940px;}
    .activity_24_sound_wrap.three .activity_24_sound_area{width:320px;} 
    
    .activity_24_view_wrap{height:95px;}
    .activity_24_view_wrap.four{width:680px;}
    .activity_24_view_wrap.four, .activity_24_view_wrap.five, .activity_24_view_wrap.six{height:190px;}
    .activity_24_view{width:300px; height:75px;}
    
    .activity_24_view_wrap.small .activity_24_view{width:212px; height:53px;}
    .activity_24_view_wrap.square.small .activity_24_view{width:116px; height:116px;}
    
    .activity_24_view_wrap.square{height:170px;}
    .activity_24_view_wrap.square.four{width:auto;}
    .activity_24_view_wrap.square .activity_24_view{width:150px; height:150px;}
}
@media all and (min-width:1440px){        
    .activity_24_area{width:1080px;}
    .activity_24_passage_area{width:520px; height:312px;}
    
    .activity_24_passage_wrap.one .activity_24_passage_area{width:1000px; height:300px;}
    .activity_24_passage_wrap.one.width_1200_500 .activity_24_passage_area{width:1000px; height:417px;} 
    
    .activity_24_passage_wrap.three .activity_24_passage_area{width:340px; height:306px;}
    
    .activity_24_sound{width:80px; top:-90px;}
    .activity_24_sound_area{width:520px;}  
    .activity_24_sound_wrap.one .activity_24_sound_area{width:1000px;}
    .activity_24_sound_wrap.three .activity_24_sound_area{width:340px;} 
    
    .activity_24_view_wrap{height:100px;}
    .activity_24_view_wrap.four{width:720px;}
    .activity_24_view_wrap.four, .activity_24_view_wrap.five, .activity_24_view_wrap.six{height:200px;}
    .activity_24_view{width:320px; height:80px;}
    
    .activity_24_view_wrap.small .activity_24_view{width:224px; height:56px;}
    .activity_24_view_wrap.square.small .activity_24_view{width:120px; height:120px;}
    
    .activity_24_view_wrap.square{height:180px;}
    .activity_24_view_wrap.square.four{width:auto;}
    .activity_24_view_wrap.square .activity_24_view{width:160px; height:160px;}
}
@media all and (min-width:1680px){    
    .activity_24_area{width:1260px;}
    .activity_24_passage_area{width:600px; height:360px;}
    
    .activity_24_passage_wrap.one .activity_24_passage_area{width:1180px; height:354px;}
    .activity_24_passage_wrap.one.width_1200_500 .activity_24_passage_area{width:1180px; height:492px;} 
    
    .activity_24_passage_wrap.three .activity_24_passage_area{width:400px; height:360px;}
    
    .activity_24_sound{width:85px; top:-95px;}
    .activity_24_sound_area{width:600px;}    
    .activity_24_sound_wrap.one .activity_24_sound_area{width:1180px; margin:0 auto;}
    .activity_24_sound_wrap.three .activity_24_sound_area{width:400px;} 
    
    .activity_24_view_wrap{height:115px;}
    .activity_24_view_wrap.four{width:840px;}
    .activity_24_view_wrap.four, .activity_24_view_wrap.five, .activity_24_view_wrap.six{height:230px;}
    .activity_24_view{width:380px; height:95px;}   
    
    .activity_24_view_wrap.small .activity_24_view{width:256px; height:64px;}
    .activity_24_view_wrap.square.small .activity_24_view{width:130px; height:130px;}

    .activity_24_view_wrap.square{height:207px;}
    .activity_24_view_wrap.square.four{width:auto;}
    .activity_24_view_wrap.square .activity_24_view{width:187px; height:187px;}
}

.opacity{opacity:0.55;}

/** 액티비티 15-1. - 녹음하기 2 **/
.activity_15_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%;}
.activity_15_area{width:100%;}

.activity_15_passage_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; margin:0 auto;}
.activity_15_passage_area{width:23%; padding-top:23%; margin:10px 10px 5px 10px; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:10px; position:relative; box-shadow:0 2px 4px 2px rgba(0,0,0,0.15); background-color:#fff;}

.activity_15_passage_sound_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; height:44px; margin:0 auto;}
.activity_15_passage_sound_wrap li{width:23%; margin:0 10px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.activity_15_passage_sound_area{width:44px; height:44px; background-repeat:no-repeat; background-position:center; background-size:cover; }

.activity_15_passage_wrap.square_450, .activity_15_passage_wrap.square_3_2, .activity_15_passage_wrap.square_4_3{width:76%;}
.activity_15_passage_wrap.square_1000_500{width:48%;}
.activity_15_passage_wrap.square_300{width:84%;}
.activity_15_passage_wrap.square_2_3{width:80%;}

.activity_15_passage_wrap.square_1000_500 .activity_15_passage_area{width:100%; padding-top:50%;}
.activity_15_passage_wrap.square_450 .activity_15_passage_area{width:32%; padding-top:32%;}
.activity_15_passage_wrap.square_300 .activity_15_passage_area{width:18%; padding-top:18%;}
.activity_15_passage_wrap.square_3_2 .activity_15_passage_area{width:32%; padding-top:21.33%;}
.activity_15_passage_wrap.square_2_3 .activity_15_passage_area{width:18%; padding-top:27%;}
.activity_15_passage_wrap.square_4_3 .activity_15_passage_area{width:32%; padding-top:24%;}

.activity_15_passage_sound_wrap.square_450, .activity_15_passage_sound_wrap.square_3_2, .activity_15_passage_sound_wrap.square_4_3{width:76%;}
.activity_15_passage_sound_wrap.square_1000_400{width:50%;}
.activity_15_passage_sound_wrap.square_300{width:80%;}
.activity_15_passage_sound_wrap.square_2_3{width:76%;}

.activity_15_passage_sound_wrap.square_450 li, .activity_15_passage_sound_wrap.square_3_2 li, .activity_15_passage_sound_wrap.square_4_3 li{width:32%;}
.activity_15_passage_sound_wrap.square_1200_500 li{width:100%;}
.activity_15_passage_sound_wrap.square_300 li{width:19%;}
.activity_15_passage_sound_wrap.square_2_3 li{width:19%;}

.activity_15_sound_container{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; padding-top:5px;}

.activity_15_sound_wrap{display:-webkit-box; display:-ms-flexbox; display:flex;}
.activity_15_sound_btn{width:54px; height:54px; cursor:pointer;}
.activity_15_sound_btn.again{margin-left:-54px;}

.activity_15_bar_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; padding:0 0 0 10px;}
.activity_15_bar_bg{height:4px; background-color:#fff; width:120px; position:relative;  border-radius:4px; overflow:hidden;}
.activity_15_bar{position:absolute; left:0; top:0; height:100%; background-color:#385723; transition:1s;}
.activity_15_bar_sec{color:#333; padding-left:10px; font-size:12px; width:55px;}

.activity_15_bar_wrap.no_sec .activity_15_bar_sec{display:none;}

@media all and (min-width:640px){ 
    .activity_15_passage_sound_wrap{height:50px;}
    .activity_15_passage_sound_area{width:50px; height:50px;}    
    
    .activity_15_bar_bg{width:180px;}
    
    .activity_15_sound_btn{width:78px; height:78px}
    .activity_15_sound_btn.again{margin-left:-78px;}
}
@media all and (min-width:768px){  
    .activity_15_passage_sound_wrap{height:58px;}
    .activity_15_passage_sound_area{width:58px; height:58px;}        
    
    .activity_15_sound_container{padding-top:10px;}
    .activity_15_bar_bg{width:220px;}
    
    .activity_15_sound_btn{width:90px; height:90px}
    .activity_15_sound_btn.again{margin-left:-90px;}
}
@media all and (min-width:960px){ 
    .activity_15_passage_area{margin:15px 15px 5px 15px;}
    
    .activity_15_passage_sound_wrap li{margin:0 15px;} 
    .activity_15_passage_sound_wrap{height:70px;}
    .activity_15_passage_sound_area{width:70px; height:70px;}      
        
    .activity_15_sound_btn{width:102px; height:102px;}
    .activity_15_sound_btn.again{margin-left:-102px;}
    
    .activity_15_bar_bg{width:250px;}
    .activity_15_bar_sec{font-size:13px; width:60px;}
}
@media all and (min-width:1024px){   
    .activity_15_passage_sound_wrap{height:74px;}
    .activity_15_passage_sound_area{width:74px; height:74px;}     
    
    .activity_15_sound_container{padding-top:15px;}  
    .activity_15_sound_btn{width:110px; height:110px}
    .activity_15_sound_btn.again{margin-left:-110px;}
    
    .activity_15_bar_bg{width:270px;}
}
@media all and (min-width:1140px){ 
 
}
@media all and (min-width:1280px){    
    .activity_15_passage_area{width:21%; padding-top:21%;}
    
    .activity_15_passage_sound_wrap li{width:21%;}
    .activity_15_passage_sound_wrap{height:82px;}
    .activity_15_passage_sound_area{width:82px; height:82px;}  
    
    .activity_15_sound_btn{width:135px; height:135px;}
    .activity_15_sound_btn.again{margin-left:-135px;}
    
    .activity_15_bar_wrap{padding:0 0 0 15px;}
    .activity_15_bar_bg{width:300px;}
    .activity_15_bar_sec{font-size:14px; width:65px;}
}
@media all and (min-width:1440px){   
    .activity_15_passage_sound_wrap{height:90px;}
    .activity_15_passage_sound_area{width:90px; height:90px;} 
    
    .activity_15_sound_container{padding-top:25px;} 
    .activity_15_passage_sound{width:70px;}   
    
    .activity_15_bar_bg{width:350px;}
}

/** 액티비티 15-2. - 녹음하기 2 **/
.activity_15_card_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; margin:0 auto;}
.activity_15_card_wrap li{width:23%; margin:10px 10px 5px 10px; position:relative; cursor:pointer; perspective:100rem;}

.activity_15_card_area{width:100%; padding-top:100%; position:relative; box-shadow:0 2px 4px 2px rgba(0,0,0,0.15); -webkit-backface-visibility:hidden; -webkit-transform:translate3d(0,0,0); -webkit-perspective:0; -webkit-transition:1s; backface-visibility:hidden; /*뒷면 숨기기*/ visibility:visible; transition:1s; 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; border-radius:10px;}
.back_15{transform:rotateY(0deg); background-repeat:no-repeat; background-position:50%; background-size:cover; background-color:#fff;} 
.front_15{position:absolute; left:0; top:0; right:0; background-position:50%; background-size:cover; transform: rotateY(-180deg); box-shadow:0 0 5px 4px rgba(0,166,81,0.6); } 
.back_rotate_15{transform:rotateY(180deg);}
.front_rotate_15{transform:rotateY(0deg);/*y축을 기준으로 0도 까지회전*/}

.activity_15_card_sound_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; height:44px; margin:0 auto;}
.activity_15_card_sound_wrap li{width:23%; margin:0 10px; position:relative; cursor:pointer; perspective:100rem;}
.activity_15_card_sound_area{width:44px; height:44px; position:relative; margin:0 auto; -webkit-backface-visibility:hidden; -webkit-transform:translate3d(0,0,0); -webkit-perspective:0; -webkit-transition:1s; backface-visibility:hidden; /*뒷면 숨기기*/ visibility:visible; transition:1s; 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;}
.activity_15_card_sound_area.back{transform:rotateY(0deg); background-repeat:no-repeat; background-position:50%; background-size:cover; background-color:transparent;} 
.activity_15_card_sound_area.front{position:absolute; left:0; top:0; right:0; background-position:50%; background-size:cover; transform: rotateY(-180deg); box-shadow:none; background-color:transparent;} 
.activity_15_card_sound_area.back_rotate{transform:rotateY(180deg);}
.activity_15_card_sound_area.front_rotate{transform:rotateY(0deg);/*y축을 기준으로 0도 까지회전*/}

.activity_15_card_wrap.square_450, .activity_15_card_wrap.square_3_2, .activity_15_card_wrap.square_4_3{width:76%;}
.activity_15_card_wrap.square_1000_500{width:48%;}
.activity_15_card_wrap.square_300{width:84%;}
.activity_15_card_wrap.square_2_3{width:82%;}

.activity_15_card_wrap.square_450 li, .activity_15_card_wrap.square_3_2 li, .activity_15_card_wrap.square_4_3 li{width:32%;}
.activity_15_card_wrap.square_1000_500 li{width:100%;}
.activity_15_card_wrap.square_300 li, .activity_15_card_wrap.square_2_3 li{width:19%;}
 
.activity_15_card_wrap.square_1000_500 .activity_15_card_area{padding-top:50%;}
.activity_15_card_wrap.square_450 .activity_15_card_area{padding-top:100%;}
.activity_15_card_wrap.square_300 .activity_15_card_area{padding-top:100%;}
.activity_15_card_wrap.square_3_2 .activity_15_card_area{padding-top:66.7%;}
.activity_15_card_wrap.square_2_3 .activity_15_card_area{padding-top:150%;}
.activity_15_card_wrap.square_4_3 .activity_15_card_area{padding-top:75%;}

.activity_15_card_sound_wrap.square_450, .activity_15_card_sound_wrap.square_3_2, .activity_15_card_sound_wrap.square_4_3{width:76%;}
.activity_15_card_sound_wrap.square_1000_500{width:48%;}
.activity_15_card_sound_wrap.square_300{width:80%;}
.activity_15_card_sound_wrap.square_2_3{width:76%;}

.activity_15_card_sound_wrap.square_450 li, .activity_15_card_sound_wrap.square_3_2 li, .activity_15_card_sound_wrap.square_4_3 li{width:32%;}
.activity_15_card_sound_wrap.square_1000_500 li{width:100%;}
.activity_15_card_sound_wrap.square_300 li{width:19%;}
.activity_15_card_sound_wrap.square_2_3 li{width:19%;}

.activity_15_card{position:absolute; left:0; top:0; width:100%; height:100%; 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; font-size:17px;}

/**
.activity_15_wrong{-moz-animation-duration:0.3s; -webkit-animation-duration:0.3s; animation-duration:0.3s; -moz-animation-name:activity_15_wrong; -webkit-animation-name:activity_15_wrong; animation-name:activity_15_wrong; -moz-animation-iteration-count:1; -webkit-animation-iteration-count:1; animation-iteration-count:1; -moz-animation-direction:alternate; -webkit-animation-direction:alternate; animation-direction:alternate;}
@keyframes activity_15_wrong{
    15%{left:-1%; top:-1%;}
    30%{left:1%; top:1%;}
    45%{left:-1%; top:1%;}
    60%{left:1%; top:-1%;}
    75%{left:-1%; top:-1%;}
    90%{left:1%; top:1%;}
    100%{left:0%; top:0%;}
}
**/

@media all and (min-width:640px){     
    .activity_15_card_sound_wrap{height:50px;}
    .activity_15_card_sound_area{width:50px; height:50px;}
}
@media all and (min-width:768px){     
    .activity_15_card_sound_wrap{height:58px;}
    .activity_15_card_sound_area{width:58px; height:58px;}
}
@media all and (min-width:960px){ 
    .activity_15_card_wrap li{margin:15px 15px 5px 15px;}
    .activity_15_card_sound_wrap li{margin:0 15px;}
    
    .activity_15_card_sound_wrap{height:70px;}
    .activity_15_card_sound_area{width:70px; height:70px;}
}
@media all and (min-width:1024px){     
    .activity_15_card_sound_wrap{height:74px;}
    .activity_15_card_sound_area{width:74px; height:74px;}   
}
@media all and (min-width:1140px){ 

}
@media all and (min-width:1280px){     
    .front_15{box-shadow:0 0 7px 6px rgba(0,166,81,0.7);} 
    
    .activity_15_card_sound_wrap{height:82px;}
    .activity_15_card_sound_area{width:82px; height:82px;}   
}
@media all and (min-width:1440px){     
    .activity_15_card_sound_wrap{height:90px;}
    .activity_15_card_sound_area{width:90px; height:90px;}   
}

/** 액티비티 16. - 정답 맞추기 **/
.activity_16_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%;}

/** 액티비티 16 - 좌우 유형 **/
.activity_16_box.width{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin:0 auto;}
.activity_16_passage_area{background-repeat:no-repeat; background-position:50%; background-size:cover; background-color:rgba(255,255,255,0.8); border-radius:10px; margin:0; padding:0; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; position:relative;}
.activity_16_passage{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0;}

.activity_16_view_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; align-content:space-between;}
.activity_16_view_wrap .activity_16_view{border-radius:10px; background-color:;}

.activity_16_box.width .activity_16_passage_area{width:195px; height:195px;}

.activity_16_box.width.two{width:295px;}
.activity_16_box.width.two .activity_16_view_wrap{width:95px;}

.activity_16_box.width.two.size_200_200{width:272px;} 
.activity_16_box.width.two.size_200_200 .activity_16_view_wrap{width:65px;}

.activity_16_box.width.four.size_200_200{width:345px;} 
.activity_16_box.width.four.size_200_200 .activity_16_view_wrap{width:140px;}

.activity_16_box.width.two.size_200_200 .activity_16_view, .activity_16_box.width.four.size_200_200 .activity_16_view{width:65px; height:65px;}

.activity_16_box.width.four{width:395px;}
.activity_16_box.width.four .activity_16_view_wrap{width:195px;}

.activity_16_box.width.two .activity_16_view, .activity_16_box.width.four .activity_16_view{width:95px; height:95px;}

.activity_16_box.width.three{width:261px;}
.activity_16_box.width.three .activity_16_view_wrap{width:61.66px;}

.activity_16_box.width.six{width:332px;}
.activity_16_box.width.six .activity_16_view_wrap{width:129px;}

.activity_16_box.width.nine{width:404px;}
.activity_16_box.width.nine .activity_16_view_wrap{width:196px;}
.activity_16_box.width .activity_16_view{width:61.66px; height:61.66px;}

/** 액티비티 16 - 상하 유형 **/
.activity_16_box.height{width:375px; margin:0 auto;}
.activity_16_box.height .activity_16_passage_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin-bottom:1.76%;}
.activity_16_box.height_1200_400 .activity_16_passage_area{width:100%; height:125px;}
.activity_16_box.height_600_400 .activity_16_passage_area{width:49.2%; height:123px;}
.activity_16_box.height_400_400 .activity_16_passage_area{width:32.1%; height:120.38px;}

.activity_16_passage_inner{position:absolute; left:0; top:0; width:100%; height:100%;}

.activity_16_box.height .activity_16_view_wrap{-webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; height:57px;}
.activity_16_box.height .activity_16_view{width:15.2%; height:100%; margin:0 0.88%;}
.activity_16_box.height .activity_16_view:first-child{margin-left:0;}
.activity_16_box.height .activity_16_view:last-child{margin-right:0;}

@media all and (min-width:640px){     
    .activity_16_box.width .activity_16_passage_area{width:245px; height:245px;}
    
    .activity_16_box.width.two{width:370px;}
    .activity_16_box.width.two .activity_16_view_wrap{width:120px;}
    
    .activity_16_box.width.two.size_200_200{width:337px;} 
    .activity_16_box.width.two.size_200_200 .activity_16_view_wrap{width:82px;}
    
    .activity_16_box.width.four.size_200_200{width:429px;} 
    .activity_16_box.width.four.size_200_200 .activity_16_view_wrap{width:174px;}
    
    .activity_16_box.width.two.size_200_200 .activity_16_view, .activity_16_box.width.four.size_200_200 .activity_16_view{width:82px; height:82px;}
    
    .activity_16_box.width.four{width:495px;}
    .activity_16_box.width.four .activity_16_view_wrap{width:245px;}
    
    .activity_16_box.width.two .activity_16_view, .activity_16_box.width.four .activity_16_view{width:120px; height:120px;}
    
    .activity_16_box.width.three{width:328px;}
    .activity_16_box.width.three .activity_16_view_wrap{width:78.33px;}
    
    .activity_16_box.width.six{width:420px;}
    .activity_16_box.width.six .activity_16_view_wrap{width:162px;}
    
    .activity_16_box.width.nine{width:500px;}
    .activity_16_box.width.nine .activity_16_view_wrap{width:245px;}
    
    .activity_16_box.width .activity_16_view{width:78.33px; height:78.33px;}
    
    /** 액티비티 16 - 상하 유형 **/
    .activity_16_box.height{width:532px;}
    
    .activity_16_box.height_1200_400 .activity_16_passage_area{height:177.33px;}
    .activity_16_box.height_600_400 .activity_16_passage_area{height:174.5px;}
    .activity_16_box.height_400_400 .activity_16_passage_area{height:170.77px;}
    
    .activity_16_box.height .activity_16_view_wrap{height:81px;}
}
@media all and (min-width:768px){     
    .activity_16_box.width .activity_16_passage_area{width:295px; height:295px;}
    
    .activity_16_box.width.two{width:445px;}
    .activity_16_box.width.two .activity_16_view_wrap{width:145px;}
    
    .activity_16_box.width.two.size_200_200{width:403.33px;} 
    .activity_16_box.width.two.size_200_200 .activity_16_view_wrap{width:98.33px;}
    .activity_16_box.width.two.size_200_200 .activity_16_view, .activity_16_box.width.four.size_200_200 .activity_16_view{width:98.33px; height:98.33px;}
    
    .activity_16_box.width.four.size_200_200{width:511.66px;} 
    .activity_16_box.width.four.size_200_200 .activity_16_view_wrap{width:206.66px;}
    
    .activity_16_box.width.four{width:595px;}
    .activity_16_box.width.four .activity_16_view_wrap{width:295px;}
    
    .activity_16_box.width.two .activity_16_view, .activity_16_box.width.four .activity_16_view{width:145px; height:145px;}
    
    .activity_16_box.width.three{width:395px;}
    .activity_16_box.width.three .activity_16_view_wrap{width:95px;}
    
    .activity_16_box.width.six{width:500px;}
    .activity_16_box.width.six .activity_16_view_wrap{width:195px;}

    .activity_16_box.width.nine{width:600px;}
    .activity_16_box.width.nine .activity_16_view_wrap{width:295px;}
    
    .activity_16_box.width .activity_16_view{width:95px; height:95px;}
    
    /** 액티비티 16 - 상하 유형 **/
    .activity_16_box.height{width:650px;}
    .activity_16_box.height_1200_400 .activity_16_passage_area{height:216.67px;}
    .activity_16_box.height_600_400 .activity_16_passage_area{height:213.2px;}
    .activity_16_box.height_400_400 .activity_16_passage_area{height:208.65px;}
    
    .activity_16_box.height .activity_16_view_wrap{height:99px;}
}
@media all and (min-width:960px){     
    .activity_16_box.width .activity_16_passage_area{width:365px; height:365px;}
    
    .activity_16_box.width.two{width:550px;}
    .activity_16_box.width.two .activity_16_view_wrap{width:180px;}
    
    .activity_16_box.width.two.size_200_200{width:502px;} 
    .activity_16_box.width.two.size_200_200 .activity_16_view_wrap{width:122px;}
    .activity_16_box.width.two.size_200_200 .activity_16_view, .activity_16_box.width.four.size_200_200 .activity_16_view{width:122px; height:122px;}
    
    .activity_16_box.width.four.size_200_200{width:629px;} 
    .activity_16_box.width.four.size_200_200 .activity_16_view_wrap{width:254px;}
    
    .activity_16_box.width.four{width:735px;}
    .activity_16_box.width.four .activity_16_view_wrap{width:365px;}
    
    .activity_16_box.width.two .activity_16_view, .activity_16_box.width.four .activity_16_view{width:180px; height:180px;}
    
    .activity_16_box.width.three{width:488px;}
    .activity_16_box.width.three .activity_16_view_wrap{width:118.33px;}
    
    .activity_16_box.width.six{width:620px;}
    .activity_16_box.width.six .activity_16_view_wrap{width:242px;}
    
    .activity_16_box.width.nine{width:750px;}
    .activity_16_box.width.nine .activity_16_view_wrap{width:365px;}
    
    .activity_16_box.width .activity_16_view{width:118.33px; height:118.33px;}
    
    /** 액티비티 16 - 상하 유형 **/
    .activity_16_box.height{width:729px;}
    .activity_16_box.height_1200_400 .activity_16_passage_area{height:243px;}
    .activity_16_box.height_600_400 .activity_16_passage_area{height:239.11px;}
    .activity_16_box.height_400_400 .activity_16_passage_area{height:234.01px;}
    
    .activity_16_box.height .activity_16_view_wrap{height:111px;}
}
@media all and (min-width:1024px){     
    .activity_16_box.width .activity_16_passage_area{width:400px; height:400px;}
    
    .activity_16_box.width.two{width:605px;}
    .activity_16_box.width.two .activity_16_view_wrap{width:195px;}
    
    .activity_16_box.width.two.size_200_200{width:548px;} 
    .activity_16_box.width.two.size_200_200 .activity_16_view_wrap{width:133px;}
    .activity_16_box.width.two.size_200_200 .activity_16_view, .activity_16_box.width.four.size_200_200 .activity_16_view{width:133px; height:133px;}
    
    .activity_16_box.width.four.size_200_200{width:696px;} 
    .activity_16_box.width.four.size_200_200 .activity_16_view_wrap{width:281px;}
    
    .activity_16_box.width.four{width:810px;}
    .activity_16_box.width.four .activity_16_view_wrap{width:400px;}
    
    .activity_16_box.width.two .activity_16_view, .activity_16_box.width.four .activity_16_view{width:195px; height:195px;}
    
    .activity_16_box.width.three{width:537px;}
    .activity_16_box.width.three .activity_16_view_wrap{width:126.66px;}
    
    .activity_16_box.width.six{width:680px;}
    .activity_16_box.width.six .activity_16_view_wrap{width:263px;}

    .activity_16_box.width.nine{width:820px;}
    .activity_16_box.width.nine .activity_16_view_wrap{width:400px;}
    
    .activity_16_box.width .activity_16_view{width:126.66px; height:126.66px;}
    
    /** 액티비티 16 - 상하 유형 **/
    .activity_16_box.height{width:820px;}
    .activity_16_box.height_1200_400 .activity_16_passage_area{height:277.33px;}
    .activity_16_box.height_600_400 .activity_16_passage_area{height:268.96px;}
    .activity_16_box.height_400_400 .activity_16_passage_area{height:263.22px;}
    
    .activity_16_box.height .activity_16_view_wrap{height:126px;}
}
@media all and (min-width:1140px){     
    .activity_16_box.width .activity_16_passage_area{width:440px; height:440px;}
    
    .activity_16_box.width.two{width:665px;}
    .activity_16_box.width.two .activity_16_view_wrap{width:215px;}
    
    .activity_16_box.width.two.size_200_200{width:607px;} 
    .activity_16_box.width.two.size_200_200 .activity_16_view_wrap{width:147px;}
    .activity_16_box.width.two.size_200_200 .activity_16_view, .activity_16_box.width.four.size_200_200 .activity_16_view{width:147px; height:147px;}
    
    .activity_16_box.width.four.size_200_200{width:774px;} 
    .activity_16_box.width.four.size_200_200 .activity_16_view_wrap{width:314px;}
    
    .activity_16_box.width.four{width:890px;}
    .activity_16_box.width.four .activity_16_view_wrap{width:440px;}
    
    .activity_16_box.width.two .activity_16_view, .activity_16_box.width.four .activity_16_view{width:215px; height:215px;}
    
    .activity_16_box.width.three{width:590px;}
    .activity_16_box.width.three .activity_16_view_wrap{width:140px;}
    
    .activity_16_box.width.six{width:750px;}
    .activity_16_box.width.six .activity_16_view_wrap{width:290px;}

    .activity_16_box.width.nine{width:900px;}
    .activity_16_box.width.nine .activity_16_view_wrap{width:440px;}

    .activity_16_box.width .activity_16_view{width:140px; height:140px;}
    
    /** 액티비티 16 - 상하 유형 **/
    .activity_16_box.height{width:940px;}
    .activity_16_box.height_1200_400 .activity_16_passage_area{height:313.33px;}
    .activity_16_box.height_600_400 .activity_16_passage_area{height:308.32px;}
    .activity_16_box.height_400_400 .activity_16_passage_area{height:301.74px;}
    
    .activity_16_box.height .activity_16_view_wrap{height:143px;}
}
@media all and (min-width:1280px){     
    .activity_16_box.width .activity_16_passage_area{width:490px; height:490px;}
    
    .activity_16_box.width.two{width:740px;}
    .activity_16_box.width.two .activity_16_view_wrap{width:240px;}
    
    .activity_16_box.width.two.size_200_200{width:673px;} 
    .activity_16_box.width.two.size_200_200 .activity_16_view_wrap{width:163px;}
    .activity_16_box.width.two.size_200_200 .activity_16_view, .activity_16_box.width.four.size_200_200 .activity_16_view{width:163px; height:163px;}
    
    .activity_16_box.width.four.size_200_200{width:856px;} 
    .activity_16_box.width.four.size_200_200 .activity_16_view_wrap{width:346px;}
    
    .activity_16_box.width.four{width:990px;}
    .activity_16_box.width.four .activity_16_view_wrap{width:490px;}
    
    .activity_16_box.width.two .activity_16_view, .activity_16_box.width.four .activity_16_view{width:240px; height:240px;}
    
    .activity_16_box.width.three{width:657px;}
    .activity_16_box.width.three .activity_16_view_wrap{width:156.66px;}
    
    .activity_16_box.width.six{width:830px;}
    .activity_16_box.width.six .activity_16_view_wrap{width:323px;}

    .activity_16_box.width.nine{width:1000px;}
    .activity_16_box.width.nine .activity_16_view_wrap{width:490px;}
    
    .activity_16_box.width .activity_16_view{width:156.66px; height:156.66px;}
    
    /** 액티비티 16 - 상하 유형 **/
    .activity_16_box.height{width:999px;}
    .activity_16_box.height_1200_400 .activity_16_passage_area{height:333px;}
    .activity_16_box.height_600_400 .activity_16_passage_area{height:327.67px;}
    .activity_16_box.height_400_400 .activity_16_passage_area{height:320.68px;}
    
    .activity_16_box.height .activity_16_view_wrap{height:152px;}
}
@media all and (min-width:1440px){     
    .activity_16_area .activity_popup_passage_wrap{margin-bottom:20px;}
    
    .activity_16_box.width .activity_16_passage_area{width:550px; height:550px;}
    
    .activity_16_box.width.two{width:825px;}
    .activity_16_box.width.two .activity_16_view_wrap{width:265px;}
    
    .activity_16_box.width.two.size_200_200{width:753px;} 
    .activity_16_box.width.two.size_200_200 .activity_16_view_wrap{width:183px;}
    .activity_16_box.width.two.size_200_200 .activity_16_view, .activity_16_box.width.four.size_200_200 .activity_16_view{width:183px; height:183px;}
    
    .activity_16_box.width.four.size_200_200{width:956px;} 
    .activity_16_box.width.four.size_200_200 .activity_16_view_wrap{width:386px;}
    
    .activity_16_box.width.four{width:1120px;}
    .activity_16_box.width.four .activity_16_view_wrap{width:550px;}
    
    .activity_16_box.width.two .activity_16_view, .activity_16_box.width.four .activity_16_view{width:265px; height:265px;}
    
    .activity_16_box.width.three{width:740px;}
    .activity_16_box.width.three .activity_16_view_wrap{width:170px;}
    
    .activity_16_box.width.six{width:940px;}
    .activity_16_box.width.six .activity_16_view_wrap{width:360px;}

    .activity_16_box.width.nine{width:1130px;}
    .activity_16_box.width.nine .activity_16_view_wrap{width:550px;}
    
    .activity_16_box.width .activity_16_view{width:170px; height:170px;}
    
    /** 액티비티 16 - 상하 유형 **/
    .activity_16_box.height{width:1059px;}
    .activity_16_box.height_1200_400 .activity_16_passage_area{height:353px;}
    .activity_16_box.height_600_400 .activity_16_passage_area{height:347.35px;}
    .activity_16_box.height_400_400 .activity_16_passage_area{height:339.94px;}
    
    .activity_16_box.height .activity_16_view_wrap{height:161px;}
}
@media all and (min-width:1680px){     
    .activity_16_box.width .activity_16_passage_area{width:630px; height:630px;}
    
    .activity_16_box.width.two{width:955px;}
    .activity_16_box.width.two .activity_16_view_wrap{width:305px;}
    
    .activity_16_box.width.two.size_200_200{width:860px;} 
    .activity_16_box.width.two.size_200_200 .activity_16_view_wrap{width:210px;}
    .activity_16_box.width.two.size_200_200 .activity_16_view, .activity_16_box.width.four.size_200_200 .activity_16_view{width:210px; height:210px;}
    
    .activity_16_box.width.four.size_200_200{width:1090px;} 
    .activity_16_box.width.four.size_200_200 .activity_16_view_wrap{width:440px;}
    
    .activity_16_box.width.four{width:1280px;}
    .activity_16_box.width.four .activity_16_view_wrap{width:630px;}
    
    .activity_16_box.width.two .activity_16_view, .activity_16_box.width.four .activity_16_view{width:305px; height:305px;}
    
    .activity_16_box.width.three{width:847px;}
    .activity_16_box.width.three .activity_16_view_wrap{width:196.66px;}
    
    .activity_16_box.width.six{width:1070px;}
    .activity_16_box.width.six .activity_16_view_wrap{width:413px;}

    .activity_16_box.width.nine{width:1290px;}
    .activity_16_box.width.nine .activity_16_view_wrap{width:630px;}
    
    .activity_16_box.width .activity_16_view{width:196.66px; height:196.66px;}
    
    /** 액티비티 16 - 상하 유형 **/
    .activity_16_box.height{width:1221px;}
    .activity_16_box.height_1200_400 .activity_16_passage_area{height:407px;}
    .activity_16_box.height_600_400 .activity_16_passage_area{height:400.49px;}
    .activity_16_box.height_400_400 .activity_16_passage_area{height:391.94px;}
    
    .activity_16_box.height .activity_16_view_wrap{height:186px;}
}

/** 액티비티 17. - 정답 맞추기 **/
.activity_17_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%;}

.activity_17_area .activity_popup_passage_wrap{margin-bottom:10px;}

.activity_17_box{display:-webkit-box; display:-ms-flexbox; display:flex;}
.activity_17_passage{width:160px; height:160px; border-radius:10px; background-repeat:no-repeat; background-position:50%; background-size:cover; margin-right:10px;}
.activity_17_view{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.activity_17_view li{width:75px; height:75px; border-radius:10px; background-repeat:no-repeat; background-position:50%; background-size:cover; margin-bottom:10px; isplay:-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; position:relative; cursor:pointer;}
.activity_17_view_inner{position:absolute; left:0; right:0; width:100%; height:100%; z-index:10;}
.activity_17_confirm{width:76%; max-width:196px; position:relative; z-index:30;}
.activity_17_sound{position:absolute; bottom:3%; right:3%; width:40%; z-index:20;}

.activity_17_view.four{width:160px;}
.activity_17_view.four li:nth-child(2) ~ li{margin-bottom:0;}
.activity_17_view.six{width:245px;}
.activity_17_view.six li:nth-child(3) ~ li{margin-bottom:0;}
.activity_17_view.eight{width:330px;}
.activity_17_view.eight li:nth-child(4) ~ li{margin-bottom:0;}

/** 좌측 제시문 없을 경우 **/
.activity_17_box.view .activity_17_passage{display:none;}
.activity_17_box.view .activity_17_view{margin:0 auto;}
.activity_17_box.view .activity_17_view li{width:90px; height:90px;}

.activity_17_box.view .activity_17_view.four{width:190px;}
.activity_17_box.view .activity_17_view.six{width:290px;}
.activity_17_box.view .activity_17_view.eight{width:390px;}

@media all and (min-width:640px){ 
    .activity_17_passage{width:190px; height:190px;}
    .activity_17_view li{width:90px; height:90px;}

    .activity_17_view.four{width:190px;}
    .activity_17_view.six{width:290px;}
    .activity_17_view.eight{width:390px;}
    
    /** 좌측 제시문 없을 경우 **/
    .activity_17_box.view .activity_17_view li{width:110px; height:110px;}
    .activity_17_box.view .activity_17_view.four{width:230px;}
    .activity_17_box.view .activity_17_view.six{width:350px;}
    .activity_17_box.view .activity_17_view.eight{width:470px;}
}
@media all and (min-width:768px){ 
    .activity_17_passage{width:220px; height:220px;}
    .activity_17_view li{width:105px; height:105px;}

    .activity_17_view.four{width:220px;}
    .activity_17_view.six{width:335px;}
    .activity_17_view.eight{width:450px;}
    
    /** 좌측 제시문 없을 경우 **/
    .activity_17_box.view .activity_17_view li{width:140px; height:140px;}
    .activity_17_box.view .activity_17_view.four{width:290px;}
    .activity_17_box.view .activity_17_view.six{width:440px;}
    .activity_17_box.view .activity_17_view.eight{width:590px;}
}
@media all and (min-width:960px){ 
    .activity_17_passage{width:270px; height:270px;}
    .activity_17_view li{width:130px; height:130px;}

    .activity_17_view.four{width:270px;}
    .activity_17_view.six{width:410px;}
    .activity_17_view.eight{width:550px;}
    
    /** 좌측 제시문 없을 경우 **/
    .activity_17_box.view .activity_17_view li{width:160px; height:160px;}
    .activity_17_box.view .activity_17_view.four{width:330px;}
    .activity_17_box.view .activity_17_view.six{width:500px;}
    .activity_17_box.view .activity_17_view.eight{width:670px;}
}
@media all and (min-width:1024px){ 
    .activity_17_area .activity_popup_passage_wrap{margin-bottom:15px;}
    
    .activity_17_passage{width:275px; height:275px; margin-right:15px;}
    .activity_17_view li{margin-bottom:15px;}

    .activity_17_view.four{width:275px;}
    .activity_17_view.six{width:420px;}
    .activity_17_view.eight{width:565px;}
    
    /** 좌측 제시문 없을 경우 **/
    .activity_17_box.view .activity_17_view.four{width:335px;}
    .activity_17_box.view .activity_17_view.six{width:510px;}
    .activity_17_box.view .activity_17_view.eight{width:685px;}
}
@media all and (min-width:1140px){ 
    .activity_17_passage{width:315px; height:315px;}
    .activity_17_view li{width:150px; height:150px;}

    .activity_17_view.four{width:315px;}
    .activity_17_view.six{width:480px;}
    .activity_17_view.eight{width:645px;}
    
    /** 좌측 제시문 없을 경우 **/
    .activity_17_box.view .activity_17_view li{width:190px; height:190px;}
    .activity_17_box.view .activity_17_view.four{width:395px;}
    .activity_17_box.view .activity_17_view.six{width:600px;}
    .activity_17_box.view .activity_17_view.eight{width:805px;}
}
@media all and (min-width:1280px){ 
    .activity_17_passage{width:335px; height:335px;}
    .activity_17_view li{width:160px; height:160px;}

    .activity_17_view.four{width:335px;}
    .activity_17_view.six{width:510px;}
    .activity_17_view.eight{width:685px;}
    
    /** 좌측 제시문 없을 경우 **/
    .activity_17_box.view .activity_17_view li{width:210px; height:210px;}
    .activity_17_box.view .activity_17_view.four{width:435px;}
    .activity_17_box.view .activity_17_view.six{width:660px;}
    .activity_17_box.view .activity_17_view.eight{width:885px;}
}
@media all and (min-width:1440px){ 
    .activity_17_area .activity_popup_passage_wrap{margin-bottom:20px;}
    
    .activity_17_passage{width:380px; height:380px; margin-right:20px;}
    .activity_17_view li{width:180px; height:180px; margin-bottom:20px;}

    .activity_17_view.four{width:380px;}
    .activity_17_view.six{width:580px;}
    .activity_17_view.eight{width:780px;}
    
    /** 좌측 제시문 없을 경우 **/
    .activity_17_box.view .activity_17_view li{width:230px; height:230px;}
    .activity_17_box.view .activity_17_view.four{width:480px;}
    .activity_17_box.view .activity_17_view.six{width:730px;}
    .activity_17_box.view .activity_17_view.eight{width:980px;}
}
@media all and (min-width:1680px){ 
    .activity_17_passage{width:420px; height:420px;}
    .activity_17_view li{width:200px; height:200px;}

    .activity_17_view.four{width:420px;}
    .activity_17_view.six{width:640px;}
    .activity_17_view.eight{width:860px;}
    
    /** 좌측 제시문 없을 경우 **/
    .activity_17_box.view .activity_17_view li{width:250px; height:250px;}
    .activity_17_box.view .activity_17_view.four{width:520px;}
    .activity_17_box.view .activity_17_view.six{width:790px;}
    .activity_17_box.view .activity_17_view.eight{width:1060px;}
}

/** 액티비티 19 - 떨어지기 **/
.activity_19_drag_wrap{height:60px; background-color:#; position:absolute; bottom:0; left:10%; right:10%; z-index:10;}
.activity_19_drag{width:60px; height:100%; cursor:e-resize; background-repeat:no-repeat; background-position:50%; background-size:cover; position:absolute; top:0; left:calc(50% - 30px);}
.activity_19_select{position:absolute; background-repeat:no-repeat; background-position:50%; background-size:cover; border-radius:6px;}
.activity_19_select.rate_1_1{width:40%; padding-top:40%; left:30%; top:40%;}
.activity_19_select.rate_5_3{width:50%; padding-top:30%; left:25%; top:45%;}
.activity_19_select.rate_2_3{width:36%; padding-top:54%; left:32%; top:26%;}
.activity_19_select.right{box-shadow:0 0 4px 3px rgba(0,200,0,0.8);}
.activity_19_select.wrong{box-shadow:0 0 4px 3px rgba(255,0,0,0.75);}

.activity_19_wrap{height:100%; width:80%; margin:0 auto; position:relative; padding:3% 3% 0 3%;}
.activity_19_wrap .activity_q{width:100%; position:relative; z-index:100;}
.activity_19_wrap .activity_popup_passage_wrap{position:relative; z-index:100;}

.activity_19_img{position:absolute; top:-100%; z-index:10; width:12%; transition:;}
.activity_19_img.fall{top:105%;}

.activity_19_star_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; position:absolute; left:2%; top:5%; z-index:100;}
.activity_19_star_area{background-color:#f5ffde; border-radius:12px; padding:4px; box-shadow:4px 4px 0 0 rgba(0,0,0,0.3);}
.activity_19_star_box{display:-webkit-box; display:-ms-flexbox; display:flex; border:1px dashed #8fbf7d; border-radius:8px; padding:3px;}
.activity_19_star{width:26px; margin:0 4px;}

.activity_19_star_wrap.height{position:absolute; left:3%; top:50%; transform:translateY(-50%); display:block;}
.activity_19_star_wrap.height .activity_19_star_box{flex-direction:column-reverse;}
.activity_19_star_wrap.height .activity_19_star{display:block; margin:2px 0;}
    
@media all and (min-width:640px){ 
    .activity_19_drag_wrap{height:80px;}
    .activity_19_drag{width:80px; left:calc(50% - 40px);}

    .activity_19_star{width:32px;}
}
@media all and (min-width:768px){
    .activity_19_star{width:34px;}
}
@media all and (min-width:960px){ 
    .activity_19_drag_wrap{height:120px;}
    .activity_19_drag{width:120px; left:calc(50% - 60px);}

    .activity_19_star_wrap{top:4.5%;}
    .activity_19_star_area{box-shadow:6px 6px 0 0 rgba(0,0,0,0.3);}
    .activity_19_star{width:44px;}
    
    .activity_19_star_wrap.height .activity_19_star{margin:4px 4px;}
}
@media all and (min-width:1280px){ 
    .activity_19_wrap{padding:3% 4% 0 4%;}
    
    .activity_19_drag_wrap{height:150px;}
    .activity_19_drag{width:150px; left:calc(50% - 75px);}

    .activity_19_star_wrap{top:5%; left:4%;}
    .activity_19_star_box{border-width:2px; padding:4px 5px;}
    .activity_19_star{width:52px;}
    
    .activity_19_star_wrap.height .activity_19_star_box{padding:6px 5px;}
}
@media all and (min-width:1440px){ 
    .activity_19_drag_wrap{height:160px;}
    .activity_19_drag{width:160px; left:calc(50% - 80px);}

    .activity_19_star{width:60px;}
}
@media all and (min-width:1680px){ 
    .activity_19_drag_wrap{height:170px;}
    .activity_19_drag{width:170px; left:calc(50% - 85px);}

    .activity_19_star_box{padding:5px 10px;}
    .activity_19_star{width:64px;}
    
    .activity_19_star_wrap.height .activity_19_star_box{padding:8px 6px;}
}

/** 액티비티 21 - 퍼즐 **/
.activity_21_wrap{height:100%; 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;}
.activity_21_area{max-width:1300px; width:78%;}    
.activity_21_box{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}

.activity_21_left{background-repeat:no-repeat; background-position:center; background-size:cover;}
.activity_21_left, .activity_21_right{width:48%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;  -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.activity_21_box img{width:50%;}
.activity_21_box.nine img{width:33.33%;}
    
@media all and (min-width:768px){
    .activity_21_area{width:72%;}
}
@media all and (min-width:960px){
    .activity_21_area{width:84%;}
    .activity_21_left, .activity_21_right{width:47%;}
}

/** 액티비티 22 - 퍼즐 **/
.activity_22_wrap{height:100%; 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;}
.activity_22_area{max-width:1300px; width:78%;}    
.activity_22_box{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}

.activity_22_left{background-repeat:no-repeat; background-position:center;}
.activity_22_left, .activity_22_right{width:50%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;  -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.activity_22_box img{width:50%; position:relative;}
.activity_22_box.nine img{width:33.33%;}

.activity_22_box.four .activity_22_left{background-size:59.5%;}
.activity_22_box.four .activity_22_left img:nth-child(1), .activity_22_box.four .activity_22_left img:nth-child(2){bottom:-10%;}
.activity_22_box.four .activity_22_left img:nth-child(3), .activity_22_box.four .activity_22_left img:nth-child(4){top:-10%;}
.activity_22_box.four .activity_22_left img:nth-child(2n){left:-10%;}
.activity_22_box.four .activity_22_left img:nth-child(2n-1){right:-10%;}

.activity_22_box.nine .activity_22_left{background-size:59.5%;}
.activity_22_box.nine .activity_22_left img:nth-child(1), .activity_22_box.nine .activity_22_left img:nth-child(2), .activity_22_box.nine .activity_22_left img:nth-child(3){bottom:-13.5%;}
.activity_22_box.nine .activity_22_left img:nth-child(7), .activity_22_box.nine .activity_22_left img:nth-child(8), .activity_22_box.nine .activity_22_left img:nth-child(9){top:-13.5%;}
.activity_22_box.nine .activity_22_left img:nth-child(3n){left:-13.5%;}
.activity_22_box.nine .activity_22_left img:nth-child(3n+1){right:-13.5%;}
    
@media all and (min-width:768px){
    .activity_22_area{width:72%;}
}
@media all and (min-width:960px){
    .activity_22_area{width:84%;}
}

.puzzle_result{background-color:rgba(0,0,0,0.7); position:fixed; left:0; top:0; width:100%; height:100%; z-index:2000; display:none;}
.puzzle_result_inner{width:100%; height:100%; 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;}
.activity_result_img{width:25%; max-width:400px;}

/** 액티비티 시작 페이지  goonglee **/
.start_1_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%; padding-top:4%;}
.start_1_area{width:100%;}
.start_1_text{font-weight:900; font-size:36px; text-align:center; line-height:1.7; margin-bottom:10%; width:100%;}

@media all and (min-width:640px){ 
    .activity_10_score{width:90px; height:48.6px; font-size:18px;}
}
@media all and (min-width:768px){ 
    .activity_10_score{width:100px; height:54px; font-size:20px;}
}
@media all and (min-width:960px){
    .start_1_text{font-size:42px;}
    
    .activity_10_score{width:120px; height:64.8px; font-size:24px;}
}
@media all and (min-width:1024px){
    .start_1_text{font-size:48px;}
}
@media all and (min-width:1080px){
    .start_1_text{font-size:54px;}
    
    .activity_10_score{width:140px; height:75.6px; font-size:29px;}
}
@media all and (min-width:1280px){
    .start_1_text{font-size:62px;}
    
    .activity_10_score{width:174px; height:94px; font-size:42px;}
}

.check_title{position:absolute; left:40px; top:1px; height:45px; border-left:1px solid #d5d5d5; padding:28px 0 0 10px; color:#414141; font-size:16px;}
.check_btn_wrap{padding-top:30px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.check_btn{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; width:120px; height:40px; border-radius:30px; text-align:center; background-color:#000; color:#bb9e6d; font-size:15px; font-weight:700; box-shadow:0 8px 10px 5px rgba(56,68,93,0.15);}

.check_btn.start{width:150px; height:50px; font-size:18px; border-radius:40px;}

@media all and (min-width:960px){
    .check_title{left:52px; height:55px; padding:35px 0 0 10px;}
    
    .check_btn_wrap{padding-top:40px;}
    .check_btn{width:140px; height:50px; font-size:16px;}
    
    .check_btn.start{width:180px; height:60px; font-size:24px;}
}
@media all and (min-width:1080px){
    .check_title{left:63px; height:67px; padding:50px 0 0 12px;}
    
    .check_btn_wrap{padding-top:45px;}
    
    .check_btn.start{width:220px; height:68px; font-size:30px;}
}
/** 액티비티 시작 페이지  goonglee **/

/** IOS 재생 **/
.quiz_cover{position:fixed; left:0; top:0; width:100%; height:100%; z-index:90000; display:none; background-color:rgba(0,0,0,0.3);}

.ios_player_cover{position:fixed; left:0; top:0; width:100%; height:100%; z-index:100000; height:100%; background-color:rgba(0,0,0,0.3); display:none;}
.ios_player_cover_inner{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; width:100%; height:100%;}
.ios_speaker_btn{width:70px; height:70px; border-radius:50%; background-color:rgba(0,0,0,0.99); transition:0.2s;}
.ios_speaker_btn:hover{background-color:rgba(255,255,255,0.55);}

@media all and (min-width:960px){
    .ios_speaker_btn{width:90px; height:90px;}
}

@media all and (min-width:1080px){
    .ios_speaker_btn{width:110px; height:110px;}
}
@media all and (min-width:1280px){
    .ios_speaker_btn{width:140px; height:140px;}
}