@media (max-width: 1024px){
    .lg_container{
        display:none;
    }
    .header_detail{
        background-color: #fff;
        color: #fff;
        width: 100%;
        height:60px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        padding: 10px 20px;
        max-width: 467px;
        left: 50%;
        transform: translateX(-50%);
    }
    .body_container{
        padding:0 16px;
        position:relative;
    }
    .novel_book{
        margin-top: 70px;
        display:flex;
        justify-content: space-between;
    }
    .book_left{
        width: 30%;
    }
    .book_left img{
        width: 100%;
        max-height: 155px;
        border-radius: 5px;
    }
    .book_right{
        width:65%;
    }
    .book_right h3{
        margin:0;
        display: -webkit-box; /* 使用 WebKit 的盒模型 */
        -webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
        -webkit-line-clamp: 2; /* 设置最多显示的行数为 2 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
        word-wrap: break-word;
        line-height: 1.5em;
    }
    .about_author .name{
        font-size: 1.1em;
        display:inline-block;
        margin-left:5px;
        color:#6889F5;
    }
    .author{
        color:#9B9B9C;
    }
    .detail_tag{
        display:inlin-block;
        color:#fff;
        border-radius:8px;
        padding: 5px 10px;
        font-size:.8em;
        background-color:#3C66F4;
    }
    .size{
        /* margin-top:5px; */
        color:#9B9B9C;
    }
    .starts_content{
        padding:15px 20px;
        border-radius: 15px;
        background-color:#F6F7FC;
        margin-top:10px;
        display:flex;
        justify-content: space-between;
        font-weight: bold;
    }
    .starts_content p{
        margin-bottom:0;
        text-align:center;
    }
    .start_title{
        font-size: 1.1em;
        margin-top:0;
        height:24px;
        line-height:24px;
    }
    .blue_txt{
        color:#3C66F5;
        font-size:.8em;
    }
    .describe p{
        color:#9B9B9C;
        line-height: 1.5em;
        font-size:1.1em;
    }
    .tags_content{
        margin-top:30px;
        border-bottom:1px solid #EEEEEE;
    }
    .tags_content span{
        display:inline-block;
        color:#3C66F5;
        margin-right:10px;
        margin-bottom:15px;
    }
    .tags{
        display:flex;
        justify-content:spance-bettween;
        flex-wrap:wrap;
    }
    .right_collaplse{
        float:right;
        font-size:.8em;
        color:#737376 !important;
        font-weight:normal;
        display:flex !important;
        align-items:center;
    }
    .novel_content .novel_title{
        color:#9B9B9C;
    }
    .novel_content{
        position:relative;
        height:410px;
        overflow:hidden;
    }
    .content_text{
        line-height: 1.5em;
    }
    .button_container{
        position:absolute;
        bottom:0;
        left:0;
        top:0;
        width:100%;
        padding:10px 20px;
        text-align:center;
        background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
        display: flex; /* 使用 flexbox */  
        justify-content: center; /* 中间对齐 */  
        align-items: flex-end; /* 底部对齐 */  
    }
    .button_container .button{
        padding:15px 30px;
        font-size:1.1em;
        color:#fff;
        background-color:#3059E2;
        border-radius: 30px;
        display:inline-block;
    }
    .tags_mask,.chs_mask{  
        position: fixed;  
        top: 0;  
        left: 0;  
        right: 0;  
        bottom: 0;  
        background: rgba(0, 0, 0, .5);  
        z-index: 999;  
        display: none;  
        justify-content: center; /* Optional: if you want to center the content horizontally */  
    }  
    
    .tags_mask_content,.chs_mask_content {  
        position: absolute;  
        bottom: 60px; /* 将 bottom 设置为 0，以固定内容在底部 */  
        left: 0;  
        right: 0;  
        background-color: #fff;  
        padding: 20px;  
        border-top-left-radius: 20px;  
        border-top-right-radius: 20px;  
    }
    .bottom_collapse{
        text-align:center;
        margin-top:0;
    }
    .bottom_collapse span{
        display:inline-block;
        width:20%;
        text-align:center;
        border-radius: 20px;
        background-color:#F6F7FC;
    }
    .tag_items{
        border-bottom:1px solid #EEEEEE;
    }
    .tag_title{
        font-size:1.1em;
        margin-bottom:5px;
    }
    .likes{
        margin-top:5px;
        color:#757578;
    }
    .chs_title{
        font-size:.9em;
        color:#909092;
        margin:0;
    }
    .chs_items{
        margin-bottom:10px;
        padding:0 16px;
    }
    .chs_top{
        margin-bottom:5px;
        display:flex;
        width:100%;
    }
    .nums{
        display:inline-block;
        margin-right:15px;
        width:30px;
        text-align:center;
    }
    .update_time{
        padding-left:45px;
        margin-top:5px;
        font-size:.8em;
        color:#909092;
    }
    .chs_mask_content{
        max-height:600px;
        overflow:scroll;
        padding:0;
    
    }
    .chs_header{
        position:fixed;
        width:100%;
        background-color:#fff;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        padding:20px;
        padding-bottom:10px;
    }
    h2,h3,h4{
        font-weight:normal;
    }
    .about_author{
        margin-top:5px;
    }
    .body_container{
        padding-bottom:80px;
    }
    #nove_title{
        min-height:55px;
    }
    .right_collaplse #tag_num{
        margin-bottom:0;
        color:#757578;
    }
    #chs_item_list{
        margin-top: 140px; 
    }
    .nove_title{
        width:85%;
        overflow: hidden;
        display: inline-block;
        margin: 0 auto;
    }
    .empty_icon{
        display:inline-block;
    }
    .fill_icon{
        display:none;
    }
    .like_icon_active .empty_icon{
        display:none;
    }
    .like_icon_active .fill_icon{
        display:inline-block;
    }
    .fixed_right{
        position:fixed;
        right:0;
        /* top:0; */
        bottom:100px;
        width:50px;
        height:50px;
        background-color:#fff;
        z-index:999;
        display:flex;
        justify-content:center;
        align-items:center;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
    }
    #fill_icon{
        display:none;
    }
}
@media (min-width: 1025px){
    html{
        font-family: Roboto, sans-serif;
    }
    .body_container{
        display:none;
    }
    .fixed_right{
        display:none;
    }
    tab-bar{
        display:none;
    }
    .lg_container{
        width:100%;
        margin:0 auto;
        background-color:#1B1B1B;
    }
    .lg_header{
        width:100%;
        position:sticky;
        top:0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:18px 0;
        background-image:linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
        background-color: #131415;
        color: #FFFFFF;
        z-index:999;
    }
    .header_left{
        display: flex;
        flex: 1 1;
    }
    .header_content{
        width:1200px;
        margin:0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .header_right{
        display: flex;
        align-items: center;
    }
    #header_ul{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    ul,li{
        list-style: none;
    }
    .li_item{
        margin-left:28px;
    }
    .li_item:nth-child(1){
        margin:0;
    }
    .header_left a{
        text-decoration: none;
        color: #fff;
        font-weight:600;
        white-space: nowrap;
        cursor: pointer;
        /* font-size:18px; */
    }
    .header_left img{
        height:44px;
    }
    .login_btn{
        margin-left: 16px;
        padding: 9px 24px;
        color: #fff;
        font-size: 14px;
        line-height: 14px;
        text-align: center;
        background: #6b4cff;
        border: none;
        border-radius: 20px;
        cursor: pointer;
    }
    .novel_content{
        max-width:1080px;
        margin:24px auto;
        overflow:hidden;
        /* padding-bottom:60px; */
    }
    .novel_top{
        position:relative;
        margin-bottom:40px;
        padding:40px 0;
    }
    .novel_info{
        position: relative;
        display: flex;
    }
    .novel_img{
        width:240px;
        /* height:229px; */
        border-radius: 4px;
        overflow:hidden;
    }
    .novel_img img{
        width:100%;
        height:100%;
        border-radius: 6px;
        object-fit: fill;
        overflow: hidden;
        transition: transform .3s ease-in-out;
    }
    .novel_img img:hover{
        transform: scale(1.1);
    }
    .novel_txt_info{
        position: relative;
        flex: 1 1;
        padding-left: 28px;
    }
    .novel_title{
        max-width: 846px;
        margin: 0;
        font-weight: 600;
        font-size: 28px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        color:#fff;
    }
    .author_name{
        display: flex;
        align-items: center;
        margin: 8px 0 0 0;

    }
    .name_author{
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 14px;
        line-height: 28px;
        height:28px;
    }
    .T{
        display: inline-block;
        width: 28px;
        height: 28px;
        line-height: 28px;
        margin-right: 8px;
        overflow: hidden;
        border-radius: 50%;
        cursor: pointer;
        text-align: center;
        color:#fff;
        background-color: #AB47BC;
    }
    .novel_data{
        display:flex;
        margin-top: 10px;
        color:#fff;
    }
    .data_row:nth-child(1){
        margin-left:0;
    }
    .data_row{
        margin-left:28px;
    }
    .datas{
        font-weight: 500;
        font-size: 20px;
        line-height: 24px;
        margin-right:5px;
    }
    .gry_txt{
        color: var(--text-22207, rgba(255, 255, 255, .7));
        font-size: 12px;
        line-height: 14px;
        text-transform: uppercase;
    }
    .category_row{
        margin-top:10px;
    }
    .category_item{
        margin-bottom: 5px;
        margin-left: 8px;
        padding: 4px 8px;
        color: rgba(34, 34, 34, .7);
        font-size: 12px;
        line-height: 16px;
        background-color: rgba(34, 34, 34, .04);
        border-radius: 4px;
    }
    .category_item:nth-child(1){
        margin-left:0;
    }
    .bottom_btn{
        margin-top:28px;
        display: flex;
        align-items: center;
    }
    .bottom_btn .btn{
        box-sizing: border-box;
        padding: 0;
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        background-color: #6b4cff;
        border: 0;
        cursor: pointer;
        transition: background-color .3s linear, border-color .3s linear;
        padding: 12px 85px;
        border-radius: 24px;
    }
    .novel_desc_title{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 16px;
        padding: 8px;
        color:#fff;
        background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 50%);
        border-radius: 8px 0 0 8px;
    }
    .novel_desc_txt{
        color: rgba(255, 255, 255, .7);
        font-weight: 400;
        font-size: 16px;
        line-height: 200%;
        word-break: break-word;
        max-height: 230px;
        overflow: hidden;
    }
    #lg_result{
        user-select: none;
        pointer-events: none;
        color: rgba(255,255,255,.7);
        font-weight: 400;
        font-size: 18px;
        line-height: 160%;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .chs_num{
        margin-bottom: 32px;
        font-weight: 700;
        font-size: 24px;
        line-height: 130%;
        text-align: center;
        color:#fff;
    }
    .button_container{
        padding:10px 20px;
        text-align:center;
        /* background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)); */
        display: flex; /* 使用 flexbox */  
        justify-content: center; /* 中间对齐 */  
        align-items: flex-end; /* 底部对齐 */  
    }
    .button_container .button{
        display: inline-block;
        color: #fff;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        border-radius: 40px;
        box-sizing: border-box;
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        background-color: #6b4cff;
        border: 0;
        cursor: pointer;
        transition: background-color .3s linear, border-color .3s linear;
        padding: 9px 60px;
    }
    .category_ul{
        display:flex;
        justify-content:space-between;
    }
    .category_li{
        flex: 0 0 129px;
        width: 129px;
        cursor: pointer;
    }
    .img_content{
        width:100%;
        height:172px;
        overflow:hidden;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
    }
    .img_content img{
        width:100%;
        height:100%;
        object-fit: cover;
        transition: transform .3s ease-in-out;
    }
    .img_content img:hover{
        transform: scale(1.1);
    }
    .category_li h3{
        margin: 12px 0 4px;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        transition: color .3s ease-in-out;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        color:rgba(255, 255, 255, .7);
    }
    .category_li:hover h3{
        color: #6b4cff;
    }
    .footer{
        padding: 16px 0;
        margin-top:48px;
    }
    .footer a,.contact_us p,.abouts_us p{
        color: inherit;
        text-decoration: none;
        color: #222;
        font-weight:500;
        font-size: 12px;
        line-height: 14px;
        cursor: pointer;
    }
    .footer a:hover{
        color: #6b4cff;
        text-decoration: underline;
    }
    .footer_top{
        display: flex;
        justify-content: center;
    }
    .abouts_us{
        margin-right:100px;
    }
    .footer h3{
        color: rgba(34, 34, 34, .4);
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }
    .footer_middle {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
        font-size:28px;
    }
    .footer_middle img{
        width:30px;
        heigight:30px;
        margin-right:10px;
    }
    a{
        text-decoration: none;
        color: inherit;
    }
    .bottom_btn span{
        display: flex;
        width:40px;
        height:40px;
        border-radius: 50%;
        background-color: #6b4cff;
        justify-content: center;
        align-items: center;
        margin-left:16px;
        cursor: pointer;
    }
    #novel_fill_icon{
        display:none;
    }
    #detail_search{
        cursor: pointer;
    }
}