@charset "utf-8";

/* ||||||||||||||||||||||||||||| lesson |||||||||||||||||||||||||| */

/* general */

@media (max-width: 767.9px) {
html .content.app-content { padding:40px!important; }
.card-body { padding:32px; }
}

@media (max-width: 512px) {
html .content.app-content { padding:6.25vw!important; }
.card-body { padding:6.25vw; }
}

@media (max-width: 320px) {
html .content.app-content { padding:20px!important; }
.card-body { padding:20px; }
}

/* Character learn page */

@media (max-width: 767.9px) {
.character_pic_card { width:87.5vw; min-width:280px; max-width:448px; height:106.25vw; min-height:340px; max-height:544px; margin-left:auto; margin-right:auto; margin-bottom:32px; }
.character_pic_card .card-footer { padding:0px 32px 32px 32px; min-height:auto; }	
.sentence.content_tc { font-size:22.4px; }
.sentence.content_en { font-size:22.4px; }
.sentence:not(:last-child) { margin-bottom:20.8px; }
.character_card { width:87.5vw; min-width:280px; max-width:448px; height:50vw; min-height:160px; max-height:256px; margin-left:auto; margin-right:auto; margin-bottom:32px; }
.character_card:last-child { margin-bottom:0px; }
.character_card .card-footer { padding:14.4px; }
.character_image_tc img { width:62.5vw!important; min-width:200px!important; max-width:320px!important; height:62.5vw!important; min-height:200px!important; max-height:320px!important; }
.character_tc { font-size:89.6px; }
.character_en { font-size:48px; }
.audio_buttons .btn { font-size:22.4px; height:8.125vw; min-height:26px; max-height:41.6px; line-height:22.4px; padding:8px 12.8px; }
.audio_buttons .btn:not(:last-child) { margin-right:12.8px; }
.audio_buttons .btn img { width:5vw; min-width:16px; max-width:25.6px; }
}

@media (max-width: 512px) {
.character_pic_card { margin-bottom:6.25vw; }
.character_pic_card .card-footer { padding:0px 6.25vw 6.25vw 6.25vw; }
.sentence.content_tc { font-size:4.375vw; }
.sentence.content_en { font-size:4.375vw; }
.sentence:not(:last-child) { margin-bottom:4.0625vw; }
.character_card { margin-bottom:6.25vw; }
.character_card:last-child { margin-bottom:0px; }
.character_card .card-footer { padding:2.8125vw; }
.character_tc { font-size:17.5vw; }
.character_en { font-size:9.375vw; }
.audio_buttons .btn { font-size:4.375vw; line-height:4.375vw; padding:1.5625vw 2.5vw; }
.audio_buttons .btn:not(:last-child) { margin-right:2.5vw; }
}

@media (max-width: 320px) {
.character_pic_card { margin-bottom:20px; }
.character_pic_card .card-footer { padding:0px 20px 20px 20px; }
.sentence.content_tc { font-size:14px; }
.sentence.content_en { font-size:14px; }
.sentence:not(:last-child) { margin-bottom:13px; }
.character_card { margin-bottom:20px; }
.character_card:last-child { margin-bottom:0px; }
.character_card .card-footer { padding:9px; }
.character_tc { font-size:56px; }
.character_en { font-size:30px; }
.audio_buttons .btn { font-size:14px; line-height:14px; padding:5px 8px; }
.audio_buttons .btn:not(:last-child) { margin-right:8px; }
}

/* Word learn page */

@media (max-width: 767.9px) {
.word_image_tc img { width:62.5vw; /*min-width:200px!important;*/ max-width:320px!important; height:auto; /*min-height:200px!important;*/ max-height:320px!important; }
}

/* Draw stroke page */

@media (max-width: 767.9px) {
.stroke_card { width:87.5vw; min-width:280px; max-width:448px; height:106.25vw; min-height:340px; max-height:544px; margin-left:auto; margin-right:auto; margin-bottom:32px; }
.stroke_card .card-header { height:12.5vw; min-height:40px; max-height:64px; padding:22.4px 22.4px 0px 22.4px; }
.stroke_card .card-content { height:80.3125vw; min-height:257px; max-height:411.2px; }
.stroke_card .card-footer { display:table; height:13.4375vw; min-height:43px; max-height:68.8px; padding:0px 32px 16px 32px; }
.stroke_image img { width:75vw; min-width:240px; max-width:384px; }
.stroke_buttons a:not(:last-child) { margin-right:12.8px; }
.stroke_buttons a img { width:10vw; min-width:32px; max-width:51.2px; }
.stroke_card .card_footer_text { font-size:20.8px; }
.stroke_board { text-align:center; display: table-cell; vertical-align: middle; }
.stroke_draw_area { width:75vw; min-width:240px; max-width:384px; height:75vw; min-height:240px; max-height:384px; }
}

@media (max-width: 512px) {
.stroke_card { margin-bottom:6.25vw; }
.col-12:last-child .stroke_card { margin-bottom:0px; }
.stroke_card .card-header { padding:4.375vw 4.375vw 0vw 4.375vw; }
.stroke_card .card-footer { padding:0vw 6.25vw 3.125vw 6.25vw; }
.stroke_buttons a:not(:last-child) { margin-right:2.5vw; }
.stroke_card .card_footer_text { font-size:4.0625vw; }
}

@media (max-width: 320px) {
.stroke_card { margin-bottom:20px; }
.col-12:last-child .stroke_card { margin-bottom:0px; }
.stroke_card .card-header { padding:14px 14px 0px 14px; }
.stroke_card .card-footer { padding:0px 20px 10px 20px; }
.stroke_buttons a:not(:last-child) { margin-right:8px; }
.stroke_card .card_footer_text { font-size:13px; }
}

/* Character explain page */

@media (max-width: 767.9px) {
.character_explain_card { width:87.5vw; min-width:280px; max-width:448px; height:inherit; min-height:inherit; max-height:inherit; margin-left:auto; margin-right:auto; margin-bottom:0px; }
.character_explain_card .card-content { height:inherit; }
.character_explain_card .explain_card_left { height:68.75vw; min-height:220px; max-height:352px; }	
.character_explain_card .explain_card_right { height:68.75vw; min-height:220px; max-height:352px; }	
.character_tc_big { font-size:256px!important; }
.character_explain_card .card-footer { padding:0px 32px 32px 32px; min-height:auto; }	
}

@media (max-width: 512px) {
.character_tc_big { font-size:50vw!important; }
.character_explain_card .card-footer { padding:0px 6.25vw 6.25vw 6.25vw; }	
}

@media (max-width: 320px) {
.character_tc_big { font-size:160px!important; }
.character_explain_card .card-footer { padding:0px 20px 20px 20px; }	
}

/* Choice page */

@media (max-width: 767.9px) {
.question_card { width:87.5vw; min-width:280px; max-width:448px; height:87.5vw; min-height:280px; max-height:448px; margin-left:auto; margin-right:auto; margin-bottom:32px; }
.question_card .card-header { height:12.5vw; min-height:40px; max-height:64px; padding:22.4px 22.4px 0px 22.4px; }
.question_card .card-content { height:61.5625vw; min-height:197px; max-height:315.2px; }
.question_card .card-footer { height:13.4375vw; min-height:43px; max-height:68.8px; padding:0px 32px 16px 32px; }
.choice_card { width:87.5vw; min-width:280px; max-width:448px; height:37.5vw; min-height:120px; max-height:192px; margin-left:auto; margin-right:auto; margin-bottom:32px; border-width:6.4px; }
.choice_card:last-child { margin-bottom:0px; }
.choice_card .audio_buttons a { margin-top:12.8px; margin-right:12.8px; }
.character_en_big { font-size:72px; }
.choice_card .card-body img { height:31.25vw!important; min-height:100px!important; max-height:160px!important; width:31.25vw!important; min-width:100px!important; max-width:160px!important; }

@media (max-width: 512px) {
.question_card { margin-bottom:6.25vw; }
.question_card .card-header { padding:4.375vw 4.375vw 0vw 4.375vw; }
.question_card .card-footer { padding:0vw 6.25vw 3.125vw 6.25vw; }
.choice_card { margin-bottom:6.25vw; border-width:1.25vw; }
.choice_card .audio_buttons a { margin-top:2.5vw; margin-right:2.5vw; }
.character_en_big { font-size:14.0625vw; }
}

@media (max-width: 320px) {
.question_card { margin-bottom:20px; }
.question_card .card-header { padding:14px 14px 0px 14px; }
.question_card .card-footer { padding:0px 20px 10px 20px; }
.choice_card { margin-bottom:20px; border-width:4px; }
.choice_card .audio_buttons a { margin-top:8px; margin-right:8px; }
.character_en_big { font-size:45px; }
}

/* Match page */

@media (max-width: 767.9px) {
.btn_match_clear { top:3.2px; margin-left:8px; }
.match_group { width:87.5vw; min-width:280px; max-width:448px; margin-left:auto; margin-right:auto; }
.match_card { /*width:40.625vw; min-width:130px; max-width:208px;*/ height:40.625vw; min-height:130px; max-height:208px; margin-bottom:32px; border-width:6.4px; }
.exercise_match .row .col-12:last-child .match_card { margin-bottom:0px; }
.match_card .card-body img { height:20vw; min-height:160px; max-height:200px; width:auto; min-width:inherit; max-width:inherit; }
.match_card .card-body .character_tc img { height:14.0625vw; min-height:45px; max-height:72px; width:auto; }
.match_card .character_tc { font-size:48px; padding-top:20px; }
.match_card .character_en { font-size:32px; }
.col-md-3 .match_card .card-body .character_tc img { height:14.0625vw; min-height:45px; max-height:72px; width:auto; }
.col-md-3 .match_card .character_tc { font-size:48px; padding-top:20px; }
.col-md-3 .match_card .character_en { font-size:32px; }
.match_card .audio_buttons a { margin-top:12.8px; margin-right:12.8px; }
}

@media (max-width: 512px) {
.btn_match_clear { top:0.625vw; margin-left:1.5625vw; }
.match_card { margin-bottom:6.25vw; border-width:1.25vw; }
.exercise_match .row .col-12:last-child .match_card { margin-bottom:0px; }
.match_card .character_tc { font-size:9.375vw; padding-top:3.9vw; }
.match_card .character_en { font-size:6.25vw; }
.col-md-3 .match_card .character_tc { font-size:9.375vw; padding-top:3.9vw; }
.col-md-3 .match_card .character_en { font-size:6.25vw; }
.match_card .audio_buttons a { margin-top:2.5vw; margin-right:2.5vw; }
}

@media (max-width: 320px) {
.btn_match_clear { top:2px; margin-left:5px; }
.match_card { margin-bottom:20px; border-width:4px; }
.exercise_match .row .col-12:last-child .match_card { margin-bottom:0px; }
.match_card .character_tc { font-size:30px; padding-top:12.5px; }
.match_card .character_en { font-size:20px; }
.col-md-3 .match_card .character_tc { font-size:30px; padding-top:12.5px; }
.col-md-3 .match_card .character_en { font-size:20px;  }
.match_card .audio_buttons a { margin-top:8px; margin-right:8px; }
}

/* Sentence card */

@media (max-width: 767.9px) {
.sentence_card { width:87.5vw; min-width:280px; max-width:448px; height:inherit; min-height:inherit; max-height:inherit; margin-left:auto; margin-right:auto; margin-bottom:0px; }
.sentence_card .card-content .card-body { display:block; }
.sentence_card .sentence_card_left { display:block; height:75vw; min-height:240px; max-height:384px; overflow:hidden; margin-bottom:32px; }
.sentence_card .sentence_card_left .sentence_img { height:75vw; min-height:240px; max-height:384px; display:flex; overflow:hidden; position: relative; justify-content: center; align-items: center; }
.sentence_card .sentence_card_left .sentence_img img { height: auto; flex-shrink:0; min-width:100%; min-height:100%; max-width:400px; object-fit: cover; width:100% !important;}
.sentence_card .sentence_card_right { height:inherit; min-height:inherit; max-height:inherit; }
.sentence_tc_big { font-size:48px; line-height:57.6px; }
.sentence_en_big { font-size:32px; line-height:38.4px; }
}

@media (max-width: 512px) {
.sentence_card .sentence_card_left { margin-bottom:6.25vw; }
.sentence_tc_big { font-size:9.375vw; line-height:11.25vw; }
.sentence_en_big { font-size:6.25vw; line-height:7.5vw; }
}

@media (max-width: 320px) { 
.sentence_card .sentence_card_left { margin-bottom:20px; }
.sentence_tc_big { font-size:30px; line-height:36px; }
.sentence_en_big { font-size:20px; line-height:24px; }
}

/* Straw Signup */

@media (max-width: 767.9px) {
.straw_signup { width:87.5vw; min-width:280px; max-width:448px; height:inherit; min-height:inherit; max-height:inherit; margin-left:auto; margin-right:auto; margin-bottom:0px; }
.straw_signup .straw_boy { text-align: center; display: table-cell; vertical-align: middle; }
.straw_signup .straw_boy img { width:19vw; min-width:120px; max-width:192px; height:auto; }
.straw_signup .straw_signup_content { padding-top:32px; }
.straw_signup .straw_signup_content .straw_signup_title { font-size:35.2px; line-height:44.8px; text-align:center; }
.straw_signup .straw_signup_content .straw_signup_button { position:relative; padding-top:32px; }
.straw_signup .straw_signup_content .straw_signup_button button { margin-bottom:20px; }
}

@media (max-width: 512px) {
.straw_signup .straw_signup_content { padding-top:6.25vw; }
.straw_signup .straw_signup_content .straw_signup_title { font-size:6.875vw; line-height:8.75vw; }
.straw_signup .straw_signup_content .straw_signup_button { padding-top:6.25vw; }
.straw_signup .straw_signup_content .straw_signup_button button { margin-bottom:5vw; }
}

@media (max-width: 320px) { 
.straw_signup .straw_signup_content { padding-top:20px; }
.straw_signup .straw_signup_content .straw_signup_title { font-size:22px; line-height:28px; }
.straw_signup .straw_signup_content .straw_signup_button { padding-top:20px; }
.straw_signup .straw_signup_content .straw_signup_button button { margin-bottom:16px; }
}


/* others */

@media (max-width: 767.9px) {
.word_box.fittext :not(.text) { top:0px; }
}

@media (max-width: 512px) {
.word_box.fittext :not(.text) { top:0vw; }
}

@media (max-width: 320px) {
.word_box.fittext :not(.text) { top:0px; }
}





@media (max-width: 767.9px) {
}

@media (max-width: 512px) {
}

@media (max-width: 320px) {
}





/*.straw_promo { background-size:auto 86%; background-position: right 16px bottom 16px; }*/