.common_range_class{padding: 0 5px 0px 5px;}  
.common_range_class .range_title{width: 70%;text-align: left;}
.common_range_class .expand_icon{width: 28%;text-align: right;}
#practise-content {background: #fbfbfb;border-width: 1px;border-top-width: 0;border-radius: 2px;padding: 1em;position:relative;clear:both;margin:0;      }
#by-topics{margin: 0;border: #777 1px solid;padding: 0;border-radius: 5px;margin-bottom: 5px;width:90%;margin-left:auto;margin-right:auto;   }
table{font-size: 14px;}
.voc_eng_results{font-size: 15px;}
.voc_sub_title {border-bottom: 1px solid #CCC;}
.sub_header_sign{background: #777;}
.sub_header_title{background: #777;width: 96%;float: left;}
.sub_header{ margin: 10px;border: #777 1px solid;border-radius: 5px;}
.voc_sub_child_list_title,.voc_child_header{cursor: pointer;}
.top_header,.voc_header{background:#777;display:block;width:100%;margin:0px 0px;cursor: pointer;padding-left:10px;}
.voc_topics_title{display:inline-block;width:94%;}
.voc_topics_expand{display:inline-block;width:4%;font-weight: bold;text-align:left;color:#dd4b39;}
.expand_collapse{text-align:center;color:#fff;font-weight: bold;}
.voc_body{margin:10px;border:#777 1px solid;border-radius: 5px;}
/*.voc_child_header{background: #777}*/
.voc_child_body{background: #c1c1c1;margin:5px;border-radius: 5px;}
.voc_sub_child_list{background: #777;}
.play-content-header{padding:0.1em 0.5em;background: #888;}
.play-header-left{display:inline-block;width:80%;vertical-align:top;margin-right:0;text-align:left;}
.play-header-right{display:inline-block;width:18%;vertical-align:top;margin-left:0;text-align:right;}
.play-header-var-color{color:#e9df1c;}
.voc_table{border:#ccc 1px solid;margin-top: 10px;}
th,td{border:none;text-align:center;}
.voc_ch_header{width:12%;}
.voc_stroke_header{width:6%;text-align:center;}
.voc_pinyin_header{width:18%;}
.voc_sound_header{width:6%;}
.voc_eng_header{width:45%;}
.voc_practice{position: relative;}
.voc_topics_div.voc_sub_child_list.voc_sub_child_list1.level3_child {border-bottom: 1px solid #CCC;}
.zoom_in_font,.zoom_out_font{cursor: pointer;}
ul.show_link {padding: 0px;margin: 0px;}
.practice_text {width: 100%;background: #c8cdc8;float: left;border-radius: 5px;margin-top: 5px;}
.show_product_link {z-index: 1000;position: absolute;width: 170px;background: #ccc;border: 1px solid #AAA;font-size: 12px;transition: width 2s;overflow: hidden;top: 48px;left: -38px;display:none;}
.show_product_link ul li {list-style: none;border-bottom: 1px solid #aaa;cursor: pointer;}
.show_product_link ul li:hover{background:#888888;color: #fff;}
.show_product_link ul li a{text-decoration: none;}
.show_product_link ul li:hover{display: block;color:green;}
.voc_practice:hover .Show_product{display: block;-webkit-transition-timing-function: linear;}
.voc_practice:hover .practice_text{background:#ccc;}
.voc_practice:hover .Delta_icon{border-style: solid dashed solid dashed;border-color: #888888 transparent #999 transparent;border-width: 0px 10px 10px;}
.voc_list_body_right{height:auto;width:69%;vertical-align: top;float: right;}
.voc_topics_div.voc_child_header.voc_child_header1 {border-bottom: 1px solid #CCC;}
#topic_body,#level_body,#lesson_body,#hskw_body,.level2_child,.voc_parent_header_collapse,.voc_child_header_collapse,.voc_body,.Show_product,.sub_header{display: none;}
.div#voc-list-body-left {float: left;}
.voc_first_child_header{background: #777;width: 96%;float: left;padding-left: 5px;}
.level2_parent{background: #777;}
.Delta_icon {float: right;border-style: solid dashed;border-color: #888888 transparent;border-width: 10px 10px 0;margin-top: 10px;margin-right: 0px;}
.me_pinyin_sound {cursor: pointer;height: 36px;width: 36px;cursor: pointer;}
span.loc_image{float: left;padding-left: 5%;}
.selected_topicis{display: inline-block;}
.selected_range{display: inline-block;}
td.voc_eng_results.pc_translation {height: 55px;}
.loading_image{ margin-left: 25%;margin-top:5%;}

/*voc_image_page extra css*/
.image_contain{float: left;height:300px;width: 200px;border: 1px solid;margin: 0 5px 5px 0;padding: 0;border-radius: 6px;}
.image_header_left,.image_header_right,.image_char_right,.image_char_left{float: left;}
.image_header_right,image_char_right{width: 20%;}
.image_header_left,.image_char_left{width: 80%;text-align: center;}
.image_header {background: #e8e8cd;height: 30px;font-weight: bold;font-size: 16px;}
.image_data {height: 185px;display: flex;justify-content: center;width: 100%;background: #d0d0d0;align-items: center;}
.image_char {height: 40px;background: #e9e9e9;font-size: 13px;}
.image_eng_data {height: 48px;background: #777;text-align: center;font-weight: bold;line-height: 1.5em;display: flex;justify-content: center;align-items: center;}
.image_pinyin_sound{  cursor: pointer;height: 30px;width: 30px;cursor: pointer;}
.image_main_cointainer {min-height: 320px;width: 100%;border: 1px solid #888888;border-top: 0px;overflow: hidden;padding-bottom: 10px;}
.image_main_cointain{width: 100%;border: 1px solid #888888;border-top: 0px;display: flow-root;}
.image_end_block {height: auto;width: 100%;border:1px solid #888888;border-top:none;display: flow-root;}
.image_contain{float: left;height:306px;width: 200px;border: 1px #777777 solid;margin-left: 8px;margin-top: 8px;padding: 0;border-radius: 3px 3px 5px 5px;}
@media screen and (max-width: 1199px) {
    .voc_ch_header{width:14%;font-size: 14px;}
    .voc_stroke_header{width:7%;text-align:center;}
    .voc_pinyin_header{width:18%;font-size: 14px;}
    .voc_sound_header{width:7%;}
    .voc_eng_header{width:38%;font-size: 14px;}
    .voc_eng_results{font-size:15px;}
    .Delta_icon{margin-right:2px;margin-top: 5px;}
    .show_product_link{left: -60px;}
}
@media screen and (max-width: 1023px) {
    #content{padding:0;}
    #practise-content{padding:10px 5px;}
    #by-topics{width:100%;}
    .voc_eng_header {width: 100%;}
    .voc_topics_div{font-size:14px;}
    .sub_header_title{width:90%;float: left;}
    .voc_topics_title{display:block;float:left;text-align: left;width:90%;}
    .voc_topics_expand{width:10%;text-align:center;}
    /*.play-pinyin-caligraphy{height:50%;}*/
    .voc_ch_header{width:14%;font-size: 14px;}
    .voc_stroke_header{width:7%;text-align:center;}
    .voc_pinyin_header{width:18%;font-size: 14px;}
    .voc_sound_header{width:7%;}
    .voc_eng_header{width:38%;font-size: 14px;}
    .voc_eng_results{font-size:11px;}
    .Delta_icon{margin-right:2px;margin-top: 5px;}
    .show_product_link{left: -75px;}
    .voc_practice:hover .Show_product{display: none;-webkit-transition-timing-function: linear;}
}
@media screen and (max-width: 735px) {
    .selected_range{ margin-left:20px;}
    td.voc_eng_results.pc_translation {display: none;}
    .voc_eng_header{display: none;} 
    #content{padding:0 1em;}
    #practise-content{padding:1em 0 0 0;margin:0;}
    .voc_list_body_left_mobile{width:100%;}
    #by-topics{width:100%;}
    .voc_body{margin-left:8px;margin-right:8px;border:#0c0 1px solid;}
    .voc_child_body{margin-left:8px;margin-right:8px;border:#b00 1px solid;}
    /*.play-pinyin-caligraphy{height:50%;}*/
    .voc_ch_header{width:25%;}
    .voc_stroke_header{width:8%;text-align:center;}
    .voc_pinyin_header{width:30%;}
    .voc_sound_header{width:8%;}
    .voc_eng_results{font-size:11px;}
    .practice_text{width: 90%;margin-top: 5px;float: right;}
    .Delta_icon{border-width: 8px 8px 0;   margin-top: 10px;margin-right: 5px;}
    .voc_practice:hover .Delta_icon{border-width: 0px 8px 8px;}
    .show_product_link{left: 10px;top: 48px;width: 95%;font-size: 11px;}
    .mobile_translation td{width:100%;}
    .voc_eng_header{display:none;}
    .mobile_translation {color: #0b0bb3; font-style: italic;}
    tr.mobile_translation th, tr.mobile_translation td { border-top: 1px dashed #9b9b9e; border-bottom: 1px solid #dcd0d0;}
    /*.image_main_cointainer {height:auto;display:inline-block;}*/
}
@media screen and (max-width: 567px) {
    #content{padding:0 8px;}
    #practise-content{padding:1em 0 0 0;margin:0;}
    .voc_list_body_left_mobile{width:100%;}
    #by-topics{width:100%;}
    .voc_body{margin-left:3px;margin-right:3px;border:#0c0 1px solid;}
    .voc_child_body{margin-left:3px;margin-right:3px;border:#b00 1px solid;}
    td{padding-left:2px;padding-right:1px;}
    /*.play-pinyin-caligraphy{height:20%;}*/
    .voc_ch_header{width:25%;}
    .voc_stroke_header{width:10%;text-align:center;}
    .voc_pinyin_header{width:30%;}
    .voc_sound_header{width:10%;}
    .voc_eng_results{font-size:11px;}
    .practice_text { margin-right: 0;line-height: 2.5em;border-radius: 5px;font-size: 11px;width: 80%;float: right;}
    .Delta_icon{border-width: 8px 8px 0;   margin-top: 10px;margin-right: 2px;}
    .voc_practice:hover .Delta_icon{border-width: 0px 8px 8px;}
   .show_product_link {left: -22px;top: 48px;font-size: 10px;width: 140px;}
    .voc_list_body_right{display: none;}
    .me_pinyin_sound{max-width: 65%;vertical-align: middle;}
    .play-caligraphy-popup-inner{height: 300px;width: 310px;}
    .strokePrev {top: 125px;}
    .strokeNext {top: 85px;}
    .zoom_out_font,.zoom_in_font{float: left;width: 50%;height: 25px;}
    .zoom_in_out_container{font-size: 12px;height: 25px;}
    .voc_table{margin-top: 0px;}
    .pinyinStroke {margin-left: 0px;}
}
@media screen and (min-width: 736px) {
    tr.mobile_translation {display: none;}
    table{font-size: 18px;}
    table td {border-bottom: 1px solid #b6b2b2;}
    .practice_text { margin-right: 0;line-height: 2.5em;border-radius: 5px;font-size: 11px;}
    .Delta_icon {margin-top: 10px;}
     .voc_ch_header{width:14%;font-size: 12px;}
    .voc_stroke_header{width:7%;text-align:center;}
    .voc_pinyin_header{width:18%;font-size: 12px;}
    .voc_sound_header{width:7%;}
    .voc_eng_header{width:38%;font-size: 12px;}
    .voc_table { margin-top: 0px; }
    .pinyinStroke {margin-left: 20px;}
    .play-caligraphy-popup-inner {width: 332px;height: 300px;}
}
@media screen and (max-width: 467px){
 .zoom_in_out_container {font-size: 9px;}
 .voc_ch_header{font-size: 11px;}
 .voc_pinyin_header {font-size: 12px;}
 .selected_range {margin-left: 0px;}
 .play-caligraphy-popup-inner {height: 280px;width: 300px;}
 .show_product_link {left: -57px;top: 48px;font-size: 10px;width: 140px;}
}
@media screen and (max-width: 449px){  .image_contain{margin-left:20%;}}