.layui-header {
    .layui-nav .layui-nav-item {
        a {
            font-size: .875rem;
        }
    }
    .layui-layout-left-fix {
        margin-left: 50px;
        float: left;
    }
    .layui-header-logo {
        position: relative;
        float: left;
        display: flex;
        margin-left: 50px;
        vertical-align: middle;
        line-height: 60px;
        height: 60px;
        align-items: center;
        justify-content: center;
        img {
            height: 32px;
        }
    }
    .mobile-show {
        .layui-icon-search {
            font-size: 20px;
            color: #fff;
        }
    }
    .nav-right {
        position: relative;
        float: left;
        display: flex;
        margin-top: 0;
        margin-right: 15px;
        list-style: none;
        vertical-align: middle;
        line-height: 60px;
        height: 60px;
        align-items: center;
        justify-content: center;
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
        }
        .vip {
            position: absolute;
            bottom: 6px;
            right: -5px;
            width: 18px;
            height: 18px;
        }
        .login {
            color: #ccc;
            &:hover {
                color: #fff;
            }
        }
        .search-box {
            width: 9rem;
            text-align: center;
            margin: 0 auto;
            .layui-input {
                border-radius:18px;
                background-color: rgba(48,62,85,0.8);
                color: #fff;
                border: none;
                &:focus {
                    background-color: rgba(255, 255, 255,0.8);
                    color: #000;
                }
                &:focus::-webkit-input-placeholder {
                    color: #000;
                }
            }
            .layui-input::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 0.8);
            }
            .layui-icon-search {
                color: #fff;
            }
            &:focus-within {
                .layui-icon-search {
                    color: #000;
                }
            }
        }

    }
    .mobile-menu-btn {
        margin-top: 18px;
        margin-left: 10px;
        width: 30px;
        height: 30px;
        i {
            font-size: 24px;
            color: #fff;
        }
        img {
            width: 100%;
            height: 100%;
        }
    }
    .mobile-menu {
        margin-top: 12px;
        width: 240px !important;
        padding-bottom: 24px;
        .layui-nav-item {
            a {
                display: block;
                width: 100%;
            }
        }
    }
}

.content-main {
    margin-top: 65px;
    .bill {
        margin: 20px auto;
    }
    .search-box {
        text-align: center;
        margin: 0 auto;
        line-height: 48px;
        .layui-input {
            background-color: transparent;
            border-radius:24px;
            height: 48px;
            line-height: 48px;
            padding-left: 45px;
        }
        .layui-input-suffix {
            line-height: 48px!important;
        }
        .layui-input-prefix {
            width: 45px;
        }
    }
    .rank-badge {
        color: #8a92a9;
        margin: 0 auto;
        font-size: 13px;
        text-align: center;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        cursor: pointer;
        .item {
            margin-right: 15px;
            display: inline-block;
        }
        .layui-badge-rim {
            border-radius: 19px;
            padding: .5rem 1rem;
            margin: 0 8px;
            background-color: rgba(242,247,255,1);
            border-color: rgba(200,200,200,.6);
        }
    }
}

.flow-list {
    overflow: auto;
    .flow-list-card {
        .flow-list-image {
            position: relative;
            display: block; /* 更改为 block 以便可以设置 padding-top */
            width: 100%;
            padding-top: 80%; /* 创建一个方形 */
            background-color: transparent; /* 可选，为面板添加背景颜色 */
            transition: ease .3s;
            /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);*/
            img {
                position: absolute; /* 绝对定位以填充父容器 */
                border-radius: 20px;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover; /* 更改为 cover 以确保图片覆盖整个容器 */
            }
            .flow-list-overlay {
                position: absolute;
                border-radius: 20px;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(50, 55, 60, 0.5);
                display: none;
                z-index: 10;
                align-items: center;
                justify-content: center;
                text-align: center;
                .flow-list-overlay-header {
                    position: absolute;
                    top: 5px;
                    right: 15px;
                }
                .flow-list-overlay-view i {
                    font-size: 28px;
                    font-weight: 500;
                }
            }
            &:hover {
                -webkit-transform: scale(1.03);
                transform: scale(1.03);
                .flow-list-overlay {
                    display: flex; /* 使用 flex 布局以更好地控制对齐 */
                    color: rgba(255, 255, 255, .8);
                    font-weight: bold;
                }
            }
        }

        .flow-list-title {
            display: block;
            position: relative;
            height: 38px;
            line-height: 38px;
            font-size: 15px;
            padding: 0 5px;
            .title {
                white-space: nowrap; /* 防止文字换行 */
                overflow: hidden; /* 隐藏溢出的内容 */
                text-overflow: ellipsis; /* 显示省略号 */
                box-sizing: border-box; /* 包含padding和border在内的总宽度和高度 */
                float: left;
                width: calc(100% - 50px);
            }
            .title-full {
                white-space: nowrap; /* 防止文字换行 */
                overflow: hidden; /* 隐藏溢出的内容 */
                text-overflow: ellipsis; /* 显示省略号 */
                box-sizing: border-box; /* 包含padding和border在内的总宽度和高度 */
                float: left;
                width: 100%;
            }
            .price {
                float: right;
                width: 45px
            }

        }
    }

}

.footer {
    margin: 25px;
    text-align: center;
    align-content: center;
    align-items: center;
    .footer-logo {
        img {
            width: 10rem;
        }
    }
    .footer-title {
        display: block;
        width: 100%;
        margin-top: 1rem;
    }
}
.login-iframe {
    border-radius: 30px;
    .layui-layer-content {
        iframe {
            border-radius: 30px;
        }
    }
}

.table-list {
    text-align: center;
    border: 1px solid #ddd;
    height: 35px;
    line-height: 35px;
    .table-list-show {
        border-right: 1px solid #ddd;
        height: 35px;
        line-height: 35px;
    }
}


.vip-main {
    margin-top: 70px;
    transition: ease .3s;
    .recharge-item {
        padding: 10px;
        .recharge-panel {
            padding: 15px 30px;

            &:hover {
                color: #fff;
                background-color: rgba(147,110,254,1);
                .recharge-btn {
                    button {
                        background-color: #fff;
                    }
                }
            }
        }
    }
}
.recharge-panel {
    background-color: #fff;
}
.recharge-title {
    font-size: 18px;
    font-weight: bold;
}
.recharge-subtitle {
    font-style: italic;
    word-break: break-all;
}
.recharge-amount {
    font-size: 42px;
    font-weight: bold;
}
.recharge-feature {
    font-size: 16px;
    font-weight: bold;
    white-space: pre-line;
    word-break: break-all;
}
.recharge-btn {
    text-align: center;
    font-weight: bold;
}
.buy-dialog {
    width: 760px;
    height: 480px;
    border-radius: 30px;
    margin: 0 auto;
    .layui-layer-close2 {
        top: 0;
        right: 0;
        color: black;
        border: 0;
        background-color: transparent;
        &:hover {
            background-color: transparent;
        }
    }
    .buy-div {
        .qrcode-box {
            text-align: center;
            .qrcode-amount {
                margin: 10px auto;
                width: 200px;
                font-size: 28px;
                line-height: 32px;
                font-weight: bold;
                color: #ffffff;
                background-color: #333333;
            }
            .qrcode {
                width: 170px;
                height: 170px;
                margin: 0 auto;
                padding: 15px;
                border: 1px solid #333333;
                border-radius: 15px;
                img {
                    width: 170px;
                    height: 170px;
                    margin: 0 auto;
                }
            }
            .pay-method {
                .layui-btn+.layui-btn {
                    margin-left: 0!important;
                }
                .wxpay {
                    border-top-left-radius: 20px;
                    border-bottom-left-radius: 20px;
                }
                .alipay {
                    border-top-right-radius: 20px;
                    border-bottom-right-radius: 20px;
                }
                .active {
                    border: none;
                    color: #fff;
                    background-color: #16baaa;
                }
            }
        }
        .buy-bill {
            text-align: center;
            .bill-content {
                width: 100%;
            }

        }
    }
}

.buy-div {
    .recharge-item {
        padding: 10px;
        .recharge-panel {
            padding: 0 30px;
        }
    }
}

.buy-dialog-mobile {
    border-radius: 10px;
    margin: 0 auto;
    .buy-div {
        margin: 15px 35px;
    }
}