@media (min-width: 766px) and (max-width: 1024px){
    :root {
        --danmu_row_height: 50px;
        --jindu_img_width: 64px;
    }
    #container  {
        width: 90%;
    }
    body {
        font-size: 14px;
    }
    .top_tip > img {
        width: 28px;
    }
    .top_tip_wrapper .top_tip_group {
        line-height: 22px;
    }

    #danmu_config_block{
        top: 60%;
    }
    .danmu_one_cfg {
        margin-top: 6px;
        font-size: 14px;
    }
    .change_wish_btn img{
        height: 18px;
    }
    .send_btn_block {
        margin-top: 12px;
    }
    .send_btn_block div:first-child{
        margin-bottom: 2px;
    }
    .caret {
        border: 4px solid;
        border-color:  #ffffff transparent transparent transparent;
        margin-top: 8px;
    }

    #danmu_diaplay_block .danmu_row {
        margin: 4px 0;
    }
    .danmu {
        min-height: 16px;
    }
    #danmu_wrapper{
        margin: 0 auto;
    }

    .jindutiao {
        max-resolution: 40px auto 80px;
    }

    .step_desc_block{
        top: -18px;
    }
    .task_list {
        width: 100%;
    }

    .task_tip{
        font-size: 20px;
        padding: 0;
        padding-top: 10px;
    }
    .task_tip > span{
        font-size: 14px;
    }
    .task_tip img {
        width: 24px;
    }
    .rank_row.rank_title{
        font-size: 20px;
    }

    #rank_wrapper .rank_list {
        padding: 10px;
    }
    .rank_row.rank_title{
        font-size: 14px;
        padding: 10px 0;
    }

    .rank_item{
        font-size: 12px;
        padding: 2px 12px;
        padding-left: 4px;
        margin-bottom: 10px;
    }
    .rank_item:first-child {
        font-size: 18px;
        padding: 8px 10px;
    }
    .rank_item:first-child .rank_img{
        width: 36px;
        left: 28px;
    }
    .rank_item:nth-child(2){
        font-size: 16px;
        padding: 6px 10px;
    }
    .rank_item:nth-child(2) .rank_img{
        width: 32px;
        top: -6px;
        left: 30px;
    }
    .rank_item:nth-child(3){
        font-size: 14px;
        padding: 4px 10px;
    }
    .rank_item:nth-child(3) .rank_img{
        width: 22px;
        left: 34px;
    }
    .rank_row div:nth-child(4){
        width: 14%;
        padding-right: 10px;
    }
    .rank_index{
        font-size: 16px;
        width: 34px;
    }
    .redbag{
        width: 20px;
        top: -2px;
        right: 60px;
    }
    .redbag_num {
        font-size: 12px !important;
    }


}

@media (min-width: 640px) and (max-width: 766px) {
    :root {
        --danmu_row_height: 30px;
    }
    #container  {
        width: 100%;
    }
    .top_tip > img {
        width: 24px;
    }
}

@media (max-width: 640px) {

    :root {
        --danmu_row_height: 32px;
        --jindu_img_width: 28px;
        --danmu_bg_height: 420px;
    }
    body {
        font-size: 12px;
    }
    #container  {
        width: 100%;
    }

    .top_tip {
        line-height: 16px;
    }
    .top_tip > img {
        width: 24px;
    }
    .top_tip_wrapper {
        margin-top: 0;
    }
    .top_tip_wrapper > img {
        height: 200px;
    }
    .top_tip_wrapper .top_tip_group {
        line-height: 16px;
        width: 88%;
    }
    .act_date_range{
        margin-top: 16px;
    }
    #danmu_config_block{
        top: calc(var(--danmu_bg_height) * 0.45 + 10%)
    }
    .danmu_one_cfg {
        margin-top: 6px;
        font-size: 12px;
    }
    .change_wish_btn{
        top: -28px;
        left: 60px;
    }
    .change_wish_btn img{
        height: 18px;
    }
    .send_btn_block {
        margin-top: 10px;
    }
    .send_btn_block div:first-child{
        margin-bottom: 2px;
    }
    .caret {
        border: 4px solid;
        border-color:  #ffffff transparent transparent transparent;
    }
    .danmu_bg{
        height: var(--danmu_bg_height);
    }
    #danmu_diaplay_block {
        height: calc(var(--danmu_bg_height) * 0.45);
    }
    .danmu_one_cfg > div:first-child {
        margin-right: 10px;
    }

    #danmu_diaplay_block .danmu_row {
        margin: 4px 0;
    }
    .danmu {
        min-height: 18px;
    }
    #danmu_wrapper{
        margin: 0 auto;
        margin-top: -18px;
        height: var(--danmu_bg_height);
    }

    #task_wrapper, #rank_wrapper {
        padding: 0 7%;
    }
    .danmu_default{
        line-height: max(calc(var(--danmu_row_height) - 18px), 18px);
    }

    #main_wrapper{
        padding-bottom: 20px;
    }

    .nav_wrapper{
        font-size: 18px;
        height: 50px;
    }

    .task_process_wrapper{
        padding-left: 10px
    }
    .task_tip{
        font-size: 14px;
        padding: 0;
        padding-top: 10px;
        line-height: 30px;
    }
    .task_tip > span{
        font-size: 10px;
    }
    .task_block_border {
        margin: 20px 0 0;
    }
    .task_tip img {
        width: 24px;
    }
    .block_title {
        padding: 0 20px;
        font-size: 16px;
        top: -12px;
    }

    .wish_cfg{
        display: block;
    }
    .wish_cfg .wish_block{
        margin-top: 12px;
        width: 100%;
    }
    .send_wish_num_text{
        margin: 0;
    }
    .jindutiao{
        width: 100%;
        margin: 20px auto 50px;
    }
    .step_block {
        height: 12px;
    }
    .step_desc_block{
        top: -8px;
        font-size: 8px;
        line-height: 12px;
    }

    .task_list {
        width: 100%;
        margin: 20px auto;
    }
    .task_block_border .task_block {
        margin: 10px 0;
        padding: 2px;
        padding-left: 22px;
    }

    #rank_wrapper .rank_list {
        padding: 10px;
        padding-top: 20px;
    }

    .rank_row.rank_title{
        margin-top: 10px;
        font-size: 14px;
        padding: 10px;
    }

    .rank_item{
        font-size: 12px;
        padding: 2px 12px;
        padding-left: 4px;
        margin-bottom: 10px;
    }
    .rank_item:first-child {
        font-size: 15px;
        padding: 5px 10px;
        padding-left: 4px;
    }
    .rank_item:first-child .rank_img{
        width: 26px;
        top: -4px;
        left: 10px;
    }
    .rank_item:nth-child(2){
        font-size: 14px;
        padding: 4px 10px;
        padding-left: 4px;
    }
    .rank_item:nth-child(2) .rank_img{
        width: 20px;
        top: 0;
        left: 12px;
    }
    .rank_item:nth-child(3){
        font-size: 13px;
        padding: 3px 10px;
        padding-left: 4px;
    }
    .rank_item:nth-child(3) .rank_img{
        width: 18px;
        left: 14px;
    }
    .rank_index{
        font-size: 16px;
        width: 34px;
    }
    .redbag{
        width: 20px;
        top: -2px;
        right: 50px;
    }
    .rank_item:first-child .redbag{
        top: 0;
    }
    .redbag_num {
        font-size: 12px !important;
    }
}