@media (max-width: 768px) {
    html.mobile-layout,
    html.mobile-layout body {
        overflow-x: hidden;
    }

    body.mobile-layout {
        min-width: 0 !important;
        font-size: 14px;
    }

    body.mobile-layout img {
        max-width: 100%;
        height: auto;
    }

    body.mobile-layout .main-container,
    body.mobile-layout .container2,
    body.mobile-layout .container3,
    body.mobile-layout .container4,
    body.mobile-layout .container5 {
        width: auto !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        box-sizing: border-box;
    }

    body.mobile-layout .container3,
    body.mobile-layout .container5 {
        padding-left: 0 !important;
    }

    body.mobile-layout .container5,
    body.mobile-layout .user_left,
    body.mobile-layout .user_right,
    body.mobile-layout .user_menu {
        height: auto !important;
        min-height: 0 !important;
    }

    body.mobile-layout .content_wrapper {
        overflow: hidden;
    }

    body.mobile-layout .inner_content {
        padding-top: 20px;
        padding-bottom: 30px;
    }

    body.mobile-layout .page_title {
        margin: 24px 12px;
        font-size: 26px;
        line-height: 1.5;
    }

    body.mobile-layout .panel,
    body.mobile-layout .user_panel,
    body.mobile-layout .user_panel0 {
        padding: 14px !important;
    }

    body.mobile-layout header.main-container {
        width: auto !important;
        margin: 0 12px !important;
        padding: 12px 0;
        flex-wrap: wrap;
    }

    body.mobile-layout .sy_logo,
    body.mobile-layout .sy_logo2,
    body.mobile-layout .sy_sep {
        flex: 0 0 auto;
    }

    body.mobile-layout header .nav,
    body.mobile-layout .user_header .nav,
    body.mobile-layout .user_info,
    body.mobile-layout .user_menu,
    body.mobile-layout .doc_menu {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        white-space: nowrap;
    }

    body.mobile-layout header .nav::-webkit-scrollbar,
    body.mobile-layout .user_header .nav::-webkit-scrollbar,
    body.mobile-layout .user_info::-webkit-scrollbar,
    body.mobile-layout .user_menu::-webkit-scrollbar,
    body.mobile-layout .doc_menu::-webkit-scrollbar {
        display: none;
    }

    body.mobile-layout header .nav {
        order: 3;
        width: 100%;
        margin: 10px 0 0 !important;
        display: flex;
    }

    body.mobile-layout header .nav li {
        flex: 0 0 auto;
        padding: 0 12px 8px 0;
    }

    body.mobile-layout header .log_reg {
        flex-grow: 0;
        margin-left: auto;
    }

    body.mobile-layout .banner {
        height: auto;
        min-height: 180px;
        background-position: center center;
        padding: 30px 0;
    }

    body.mobile-layout .banner h1 {
        font-size: 28px;
        line-height: 1.4;
    }

    body.mobile-layout .banner h2 {
        font-size: 14px;
        line-height: 1.7;
        margin-top: 10px;
    }

    body.mobile-layout .page_info {
        position: static;
        padding: 20px 16px;
    }

    body.mobile-layout .page_info p {
        line-height: 1.7;
    }

    body.mobile-layout .doc_left,
    body.mobile-layout .doc_right,
    body.mobile-layout .user_left,
    body.mobile-layout .user_right {
        float: none;
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.mobile-layout .doc_left,
    body.mobile-layout .user_left {
        margin-bottom: 12px;
    }

    body.mobile-layout .doc_menu {
        width: 100%;
        display: flex;
        gap: 8px;
        padding: 10px;
        box-sizing: border-box;
    }

    body.mobile-layout .doc_menu li {
        flex: 0 0 auto;
        margin: 0;
    }

    body.mobile-layout .doc_menu li.doc_menu_title,
    body.mobile-layout .doc_menu_sep {
        display: none !important;
    }

    body.mobile-layout .doc_menu li,
    body.mobile-layout .doc_menu li a {
        height: auto;
        line-height: 1.2;
    }

    body.mobile-layout .doc_menu li a {
        margin: 0;
        padding: 10px 12px;
        border-radius: 6px;
        border: 1px solid #ddd;
        background-color: #fff;
        white-space: nowrap;
    }

    body.mobile-layout .doc_right {
        min-height: 0;
        padding: 14px;
    }

    body.mobile-layout .doc_right .doc_h1 {
        font-size: 22px;
        line-height: 1.5;
    }

    body.mobile-layout .doc_right h2 {
        font-size: 18px;
        line-height: 1.5;
        margin: 24px 0 12px;
    }

    body.mobile-layout .doc_right h3,
    body.mobile-layout .doc_right .stage,
    body.mobile-layout .doc_right p {
        line-height: 1.8;
    }

    body.mobile-layout .user_header {
        display: block;
        padding: 12px;
    }

    body.mobile-layout .user_logo {
        margin-left: 0;
        margin-bottom: 10px;
        width: 230px;
        height: 24px;
    }

    body.mobile-layout .user_header .nav {
        margin-left: 0;
        display: flex;
        padding-bottom: 6px;
    }

    body.mobile-layout .user_header .nav li {
        flex: 0 0 auto;
        margin-right: 12px;
    }

    body.mobile-layout .user_info {
        margin-left: 0;
        margin-top: 8px;
        display: flex;
    }

    body.mobile-layout .user_info li {
        flex: 0 0 auto;
        border-left: 0;
        margin-right: 12px;
        padding: 0 12px 0 0;
    }

    body.mobile-layout .user_menu {
        width: 100%;
        min-height: 0;
        display: flex;
        gap: 8px;
        padding: 10px;
        box-sizing: border-box;
        border-right: 0;
        box-shadow: none;
    }

    body.mobile-layout .user_menu li {
        flex: 0 0 auto;
        margin: 0;
    }

    body.mobile-layout .user_menu li,
    body.mobile-layout .user_menu li a {
        height: auto;
        line-height: 1.2;
    }

    body.mobile-layout .user_menu li a {
        margin: 0;
        padding: 10px 12px;
        border-radius: 6px;
        border: 1px solid #e6edf5;
        background-color: #fff;
        text-indent: 0;
        white-space: nowrap;
        font-size: 15px;
        font-weight: 600;
    }

    body.mobile-layout .user-icon {
        width: 16px;
        height: 16px;
        margin-left: 0;
        margin-right: 6px;
    }

    body.mobile-layout .user_right {
        padding: 0;
        font-size: 14px;
    }

    body.mobile-layout .user_right h1 {
        font-size: 20px;
        padding-top: 14px;
        padding-bottom: 12px;
        line-height: 1.5;
    }

    body.mobile-layout .user_right h2 {
        font-size: 16px;
        line-height: 1.6;
    }

    body.mobile-layout .user_right .pure-u-1-2,
    body.mobile-layout .user_right .pure-u-1-3,
    body.mobile-layout .user_right .pure-u-2-3,
    body.mobile-layout .user_right .pure-u-1-4,
    body.mobile-layout .user_right .pure-u-3-4 {
        width: 100%;
    }

    body.mobile-layout .user_right .mr10,
    body.mobile-layout .user_right .ml10 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.mobile-layout .user_right .user_panel {
        margin-bottom: 12px;
    }

    body.mobile-layout .user_right .user_panel .pure-u {
        width: 100%;
    }

    body.mobile-layout .user_money,
    body.mobile-layout .money {
        font-size: 24px;
        line-height: 1.4;
    }

    body.mobile-layout .user_rec_holder {
        padding-left: 0;
    }

    body.mobile-layout .user_circle {
        float: none;
        margin-left: 0;
        margin-bottom: 12px;
        width: 56px;
        height: 56px;
        font-size: 18px;
        border-radius: 28px;
    }

    body.mobile-layout .user_rec_holder_middle {
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #eef2f6;
        border-bottom: 1px solid #eef2f6;
        height: auto;
        min-height: 0;
        padding: 14px 0;
        margin: 8px 0;
    }

    body.mobile-layout .acc {
        font-size: 24px;
        line-height: 1.4;
    }

    body.mobile-layout .correct,
    body.mobile-layout .error {
        font-size: 18px;
    }

    body.mobile-layout #chart {
        height: 240px !important;
    }

    body.mobile-layout .user_form_line {
        display: block;
        margin-top: 14px;
    }

    body.mobile-layout .rc_form_left {
        display: block;
        width: 100% !important;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        color: #44566c;
        text-align: left !important;
    }

    body.mobile-layout .user_input,
    body.mobile-layout .w80,
    body.mobile-layout .w150,
    body.mobile-layout .w250 {
        width: 100% !important;
        max-width: 100%;
    }

    body.mobile-layout .user_btn,
    body.mobile-layout .user_btn_blue,
    body.mobile-layout .pay_btn,
    body.mobile-layout .layui-btn {
        width: auto !important;
        min-width: 104px;
        max-width: 100%;
        min-height: 44px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        margin-left: auto;
        margin-right: auto;
    }

    body.mobile-layout .user_btn_blue,
    body.mobile-layout .pay_btn,
    body.mobile-layout .layui-btn.layui-btn-normal {
        box-shadow: 0 10px 22px rgba(9, 137, 238, 0.18);
    }

    body.mobile-layout .user_btn {
        box-shadow: 0 8px 18px rgba(31, 45, 61, 0.08);
    }

    body.mobile-layout .user_form_line .pure-u > .user_btn,
    body.mobile-layout .user_form_line .pure-u > .user_btn_blue,
    body.mobile-layout .user_form_line .pure-u > .pay_btn,
    body.mobile-layout .user_form_line .pure-u > .layui-btn {
        margin-top: 10px;
    }

    body.mobile-layout .user_input,
    body.mobile-layout input.user_input,
    body.mobile-layout textarea.user_input,
    body.mobile-layout .money-diy {
        min-height: 48px;
        padding: 12px 14px;
        border: 1px solid #d7e2ee;
        border-radius: 12px;
        background: #f7faff;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 24px;
        color: #1f2d3d;
        transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
        -webkit-appearance: none;
        appearance: none;
    }

    body.mobile-layout .user_input::placeholder,
    body.mobile-layout .money-diy::placeholder {
        color: #91a0b2;
        font-size: 15px;
    }

    body.mobile-layout .user_input:focus,
    body.mobile-layout .money-diy:focus,
    body.mobile-layout .user_input:hover,
    body.mobile-layout .money-diy:hover {
        border-color: #4a9ef6;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(74, 158, 246, 0.12);
        outline: none;
    }

    body.mobile-layout .user_input[disabled],
    body.mobile-layout .user_input[readonly] {
        color: #7c8b9d;
        background: #eef3f8;
        opacity: 1;
    }

    body.mobile-layout .volume-container {
        display: block;
    }

    body.mobile-layout .volume-left,
    body.mobile-layout .volume-right {
        width: 100% !important;
        padding: 14px !important;
        border-right: 0 !important;
        box-sizing: border-box;
    }

    body.mobile-layout .volume-left {
        border-bottom: 1px solid #eee;
    }

    body.mobile-layout .product-title-label,
    body.mobile-layout .product-title-txt {
        width: 100% !important;
        display: block;
    }

    body.mobile-layout .product-title-txt {
        margin-top: 4px;
    }

    body.mobile-layout .login_bg,
    body.mobile-layout .reg_bg {
        min-height: 100vh;
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-position: center center;
    }

    body.mobile-layout .login_bg::before,
    body.mobile-layout .reg_bg::before {
        content: '';
        position: fixed;
        inset: 0;
        background: linear-gradient(180deg, rgba(10, 86, 191, 0.2), rgba(9, 137, 238, 0.45));
        pointer-events: none;
    }

    body.mobile-layout .login_bg .footer_simple,
    body.mobile-layout .reg_bg .footer_simple {
        position: relative;
        z-index: 1;
        color: rgba(255, 255, 255, 0.88);
        padding: 12px 0 18px;
        background: transparent;
    }

    body.mobile-layout .l_panel {
        position: relative;
        z-index: 1;
        width: calc(100% - 32px) !important;
        margin: 20px 16px 12px;
        padding: 24px 18px !important;
        top: 0 !important;
        border: 0;
        border-radius: 18px;
        box-shadow: 0 18px 48px rgba(0, 38, 92, 0.18);
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
    }

    body.mobile-layout .l_title {
        height: auto;
        margin-bottom: 20px;
    }

    body.mobile-layout .l_logo {
        width: 132px;
        height: 42px;
        margin-bottom: 12px;
    }

    body.mobile-layout .l_title_txt {
        font-size: 24px;
        font-weight: 600;
        line-height: 1.4;
        color: #1f2d3d;
        margin-top: 0;
    }

    body.mobile-layout .l_input_wrapper {
        margin-bottom: 14px;
    }

    body.mobile-layout .l_input,
    body.mobile-layout .l_input_simple {
        min-height: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
        border-radius: 12px;
        border-color: #dbe5f0;
        background-color: #f7faff;
        font-size: 15px;
    }

    body.mobile-layout .l_input::placeholder,
    body.mobile-layout .l_input_simple::placeholder {
        font-size: 16px;
        color: #8a97a6;
    }

    body.mobile-layout .l_input {
        padding-left: 42px;
    }

    body.mobile-layout .l_input_phone,
    body.mobile-layout .l_input_pwd {
        width: 18px;
        height: 18px;
        top: 15px;
        left: 14px;
    }

    body.mobile-layout .l_panel label {
        display: block;
        width: 100% !important;
        height: auto;
        line-height: 1.5;
        text-align: left;
        padding: 0 0 6px;
        font-size: 14px;
        color: #4b5b6b;
    }

    body.mobile-layout .l_panel label .required {
        height: auto;
        line-height: inherit;
        font-size: 14px;
    }

    body.mobile-layout .l_panel .pure-u-1-4,
    body.mobile-layout .l_panel .pure-u-3-4,
    body.mobile-layout .l_panel .pure-u-2-3,
    body.mobile-layout .l_panel .pure-u-1-3 {
        width: 100%;
    }

    body.mobile-layout #captchaImg {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 48px;
        object-fit: contain;
        border-radius: 12px;
        margin-top: 10px;
    }

    body.mobile-layout .l_links {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.6;
    }

    body.mobile-layout .l_links .fl,
    body.mobile-layout .l_links .fr {
        float: none;
    }

    body.mobile-layout .l_links .clear {
        display: none;
    }

    body.mobile-layout .l_tip,
    body.mobile-layout .has_account {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.7;
        text-align: center !important;
        color: #5f6f82;
    }

    body.mobile-layout .l_panel .layui-btn.layui-btn-normal,
    body.mobile-layout #userRegBtn {
        height: 48px !important;
        line-height: 48px !important;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        margin-top: 6px;
        box-shadow: 0 10px 24px rgba(9, 137, 238, 0.24);
    }

    body.mobile-layout .agree_tip {
        line-height: 22px;
    }

    body.mobile-layout .sy_footer .main-container {
        width: auto !important;
        padding: 0 12px;
    }

    body.mobile-layout .sy_footer_line1,
    body.mobile-layout .sy_footer_line2 {
        display: block;
    }

    body.mobile-layout .sy_footer_part1,
    body.mobile-layout .sy_footer_part2,
    body.mobile-layout .sy_footer_part3 {
        float: none;
        width: 100%;
        margin: 0 0 14px 0;
    }

    body.mobile-layout .sy_footer_line2 {
        padding-bottom: 14px;
    }

    body.mobile-layout .sy_footer_line2 span {
        display: block;
        margin-bottom: 8px;
    }

    body.mobile-layout .livechat-girl {
        transform: scale(0.82);
        transform-origin: right bottom;
        right: 0 !important;
        bottom: 12px !important;
    }

    body.mobile-layout .mobile-table-wrap,
    body.mobile-layout .mobile-pre-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.mobile-layout .layui-table-view {
        overflow-x: auto;
    }

    body.mobile-layout .tj_table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    body.mobile-layout .main-container,
    body.mobile-layout .container2,
    body.mobile-layout .container3,
    body.mobile-layout .container4,
    body.mobile-layout .container5 {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    body.mobile-layout .banner h1 {
        font-size: 24px;
    }

    body.mobile-layout .banner h2 {
        font-size: 13px;
    }

    body.mobile-layout .page_title {
        font-size: 22px;
        margin: 20px 10px;
    }

    body.mobile-layout .l_panel {
        width: calc(100% - 20px) !important;
        margin: 16px 10px 10px;
        padding: 22px 14px !important;
        border-radius: 16px;
    }
}