@media screen and (max-width: 600px) {
    .lg_container{
        display:none;
    }
    body {
        margin: 0 auto;
        padding: 0;
        background-color: #fff;
        color: #333;
        font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
        padding-bottom: env(safe-area-inset-bottom);
    }
    a {
        color: inherit;
        text-decoration: none;
    }
    .container {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }
    .header {
        position: relative;
        padding: 15px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
    .header .icon {
        position: absolute;
        top: 15px;
        width: 24px;
        height: 24px;
        fill: #000;
        cursor: pointer;
    }
    .header .icon.left {
        left: 15px;
    }
    .header .icon.right {
        right: 60px;
    }
    .header .icon.right + .icon.right {
        right: 15px;
    }
    .empty-list {
        text-align: center;
        padding: 50px 20px;
        color: #888;
    }
    .empty-list button {
        background-color: #fd0252;
        color: #fff;
        border: none;
        border-radius: 25px;
        padding: 15px 30px;
        font-size: 16px;
        cursor: pointer;
        margin-top: 20px;
    }
    .list {
        padding: 10px;
    }
    .list-item {
        display: flex;
        border-radius: 8px;
        margin-bottom: 10px;
        padding:0 10px;
        align-items: center;
    }
    .list-item img {
        width: 80px;
        height: 120px;
        border-radius: 8px;
        margin-right: 10px;
    }
    .list-item .info {
        flex: 1;
    }
    .list-item .info .title {
        font-size: 16px;
        margin-bottom: 0px;
    }
    .list-item .info .status {
        font-size: 14px;
        color: #888;
        margin: 10px 0;
    }
    .list-item .info .category {
        font-size: 14px;
        color: #fff;
        background-color: #333335;
        border-radius: 30px;
        display: inline-block;
        text-align: center;
        padding:4px 6px;
        margin-right: 10px;
        font-size:.7rem;
    }
    
    .delete-icon{
        position: absolute;
        right:40px;
        /* top:50%;    */
        width:25px;
        height:25px;
    }
    .login_container .login_box{
        background-color: rgba(28,28,30,1);
        padding:10px 50px;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    .login_container .login_box .login_title{
        font-size:1.1rem;
        text-align:center;
        width:100%;
        margin:10px auto 30px auto;
        color:#fd0252;
        padding-top:1rem;
    }
    .login_container .login_box .login-button{
        width:11.75rem;
        height:2.5rem;
        line-height:2.5rem;
        border-radius:5px;
        margin:0 auto;
        color:#fff;
        text-align:center;
        display:flex;
        border:none;
        cursor:pointer;
        border:1px solid #3d3d3d;
        align-items:center;
        justify-content:flex-start;
        font-size:.9rem;
        margin-bottom:15px;
        padding:0 7px;
    }
    .login-button svg{
        margin-right:10px;
    }
    .login_box .close_box{
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .login-button-hidden{
        display:none;
    }
    .login-button-show{
        display:block;
    }
    
    .login_container{
        position: fixed; /* 使用绝对定位 */
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        display:none;
    }
    .container_show{
        display: flex !important; /* 显示时使用flex布局 */
    }
    .container_hidden{
        display: none !important; /* 显示时使用flex布局 */
    }
    .bind_method{
        width: 80%;
        display: flex;
        margin-bottom:20px;
        align-items: center;
        justify-content: space-around
    }
}

@media screen and (min-width: 1205px) {
    .container {
        display:none;
    }
    body {
        margin: 0 auto;
        padding: 0;
        background-color: #fff;
        color: #333;
        font-family: Roboto, sans-serif;
        padding-bottom: env(safe-area-inset-bottom);
    }
    tab-bar{
        display:none;
    }
    .lg_container{
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        min-height: 100vh;
    }
    .lg_header{
        display:block;
        width:100%;
        max-width:100% !important;
        position: sticky;
        top: 0;
        z-index: 999;
        background-color: #fff;
        padding:0;
        height:80px;
    }
    .header_content{
        height:100%;
        margin:0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        max-width: 1200px;
        margin: 0 auto;
        background-color: #fff;
    }
    .header_left{
        display: flex;
        align-items: center;
        flex: 1 1;
    }
    .novel_title{
        color: #222;
        font-weight:600;
        font-size: 16px;
        line-height: 24px;
        margin-right:5px;
    }
    .novel_title_content #novel_num,.novel_pro{
        color: rgba(34, 34, 34, .7);
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
    }
    .check_chs{
        display:flex;
        jusify-content:flex-end;
        flex-wrap:nowrap;
    }
    .header_img{
        width:32px;
        height:32px;
        border-radius:50%;
        overflow:hidden;
        margin:0 12px;
        cursor:pointer;
    }
    .header_img img{
        width:100%;
        height:100%;
    }
    .library{
        margin-right:12px;
        cursor:pointer;
    }
    #my_list_content{
        width:100%;
        padding:20px 0;
        border-top:1px solid #eee;
        margin-top:48px;
    }
    ul,li{
        list-style:none;
    }
    #list_ul{
        display: grid;
        grid-column-gap: 33.6px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        box-sizing: border-box;
        background-color: #fff;
    }
    .img_content{
        height:229px;
        overflow:hidden;
        position:relative;
        border-radius:8px;
        cursor:pointer;
    }
    .img_content:hover img{
        transform: scale(1.1);

    }
    .img_content img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition: all 0.3s ease-in-out;
    }
    li{
        position: relative;
        display: flex;
        flex: none;
        flex-direction: column;
        flex-grow: 0;
        box-sizing: border-box;
        width: 172px;
        height: 285px;
        margin-top: 40px;
        overflow: hidden;
    }
    a{
        text-decoration:none;
        color:#333;
    }
    .bookName{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
        margin-top: 16px;
        overflow: hidden;
        color: #222;
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
        cursor: pointer;
    }
    .delete-icon{
        position: absolute;
        right: 10px;
        top: 10px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        z-index: 999;
    }
}