/* ========================================
   响应式布局 - 移动端适配
   覆盖桌面端样式，适配平板和手机
   ======================================== */

/* ========== 平板端 (≤768px) ========== */
@media screen and (max-width: 768px) {

    /* ---- 全局容器 ---- */
    .container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    .container img {
        max-width: 100% !important;
    }

    .main {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    /* ---- 头部导航 ---- */
    .header {
        height: auto;
        min-height: 56px;
        position: fixed;
    }

    .header-flex {
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        padding: 8px 15px;
    }

    .header-flex .logobox .logo {
        height: 36px;
    }

    /* 移动端隐藏"返回旧版"菜单项 */
    .header-flex .nav .nav-li a[href*="excelapi.net"] {
        display: none;
    }

    /* 导航菜单 - 移动端允许换行，避免 overflow:hidden 裁切下拉菜单 */
    .header-flex .nav {
        order: 3;
        width: 100%;
        overflow: visible;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        padding: 4px 0;
        margin-top: 4px;
        border-top: 1px solid #f0f0f0;
    }

    .header-flex .nav .nav-li {
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        margin: 0 6px;
    }

    .header-flex .nav .nav-li > a {
        font-size: 13px;
    }

    /* 登录按钮区域保持在第一行 */
    .header-flex .nav:last-child {
        order: 2;
        width: auto;
        border-top: none;
        margin-top: 0;
        margin-left: auto;
        overflow-x: visible;
    }

    /* 用户信息区 - 简化显示 */
    .UserInfo {
        right: 0;
        margin-left: 0;
    }

    .Gold, .Ponits {
        display: none;
    }

    .ReCharge {
        margin-left: 8px;
        margin-top: 10px;
    }

    .ReCharge img {
        width: 20px;
        height: 20px;
    }

    .UsersInfo {
        font-size: 12px;
        margin-top: 12px;
    }

    .Menu img {
        width: 32px !important;
        height: 32px !important;
    }

    .loginbtn span {
        font-size: 20px;
        line-height: 40px;
    }

    .header-flex .user {
        width: auto;
        font-size: 12px;
    }

    /* ---- 搜索框 ---- */
    .search-box-container {
        width: 90% !important;
        max-width: 400px;
        margin-left: 0 !important;
        left: 5% !important;
        top: 20%;
        height: auto;
        min-height: 160px;
    }

    .search-box_top {
        font-size: 16px;
        padding: 16px 16px 5px 16px;
    }

    .search-box_input {
        padding: 0 16px;
        height: auto;
    }

    .search-box_input input {
        padding: 10px;
        font-size: 14px;
    }

    /* ---- 首页 Banner ---- */
    .banner {
        height: auto;
        max-height: none;
    }

    .banner .banner-content {
        height: auto;
        max-height: none;
        flex-direction: column;
        padding: 20px 15px 30px;
    }

    .banner .ban-text {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        text-align: center;
    }

    .banner .ban-text .ban-title {
        font-size: 28px;
    }

    .banner .ban-text .ban-title span {
        font-size: 16px !important;
    }

    .banner .ban-text .ban-title2 {
        font-size: 14px;
    }

    .banner .ban-img {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
    }

    .ban-img .fiximg {
        width: 200px;
        left: 0;
        position: relative;
    }

    .ban-img .moveimg1 {
        width: 80px !important;
        left: 30px !important;
        top: -10px !important;
    }

    .ban-img .moveimg2 {
        width: 70px !important;
        left: -20px !important;
        top: 0 !important;
    }

    .ban-img .moveimg3 {
        width: 120px !important;
        left: 50px !important;
        top: -10px !important;
    }

    /* ---- 首页简介卡片 ---- */
    .intro {
        padding: 40px 0;
    }

    .intro-title {
        padding-bottom: 40px;
    }

    .intro-title h1 {
        font-size: 32px;
    }

    .intro-title span {
        font-size: 14px;
        white-space: normal;
        display: block;
        padding: 0 10px;
    }

    .intro-list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .intro-list .intro-list-item {
        width: 100%;
        max-width: 380px;
        height: 300px;
    }

    .intro-list .in-li-itemtop img {
        width: 100%;
        height: auto;
        max-height: 180px;
        left: 0;
        bottom: 20px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .intro-list .in-li-itemtop .in-itemtop-title,
    .intro-list .in-li-itemdown .in-itemdown-title {
        font-size: 20px;
    }

    .intro-list .in-li-itemdown p {
        font-size: 14px;
        line-height: 24px;
    }

    /* ---- 业务板块 ---- */
    .business {
        padding: 40px 0;
    }

    .business-title {
        padding-bottom: 30px;
    }

    .business-title h1 {
        font-size: 28px;
    }

    .business-title span {
        font-size: 14px;
        white-space: normal;
        display: block;
        padding: 0 10px;
    }

    .industrycase .industrycase-list {
        flex-direction: column;
    }

    .industrycase .industrycase-list a {
        width: 100%;
        height: 200px;
        margin-top: 15px;
    }

    .industrycase .industrycase-list a:first-child {
        margin-top: 0;
    }

    .industrycase .industrycase-list a span {
        font-size: 18px;
        bottom: 40px;
        left: 20px;
    }

    .industrycase .industrycase-list a p {
        font-size: 13px;
        left: 20px;
    }

    .business .business-more {
        margin-top: 30px;
        width: 160px;
        height: 42px;
        line-height: 42px;
        font-size: 16px;
    }

    /* ---- 首页广告条 ---- */
    .advertisement {
        height: 150px;
        margin-top: 30px;
        background-size: cover;
    }

    /* ---- 合作伙伴 ---- */
    .cooperator {
        padding: 30px 15px;
    }

    .cooperator-title {
        font-size: 22px;
    }

    .cooperator-title .counter {
        width: auto;
        min-width: 100px;
    }

    /* ---- 底部 ---- */
    .footer {
        min-width: 0 !important;
        padding-top: 30px;
        padding-bottom: 80px;
    }

    .footer .container.f-no-b-start {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer .footer-left {
        width: auto;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer .footer-left .footer-logo {
        width: 80px;
    }

    .footer .footer-left .footerwx {
        width: 60px;
        height: 60px;
    }

    .footer .footer-right {
        width: 100% !important;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .footer .footer-right li {
        width: 45%;
        margin-bottom: 16px;
        text-align: center;
    }

    .footer .footer-right li .foo-r-list-title {
        font-size: 13px;
    }

    .footer .footer-right li a {
        font-size: 12px;
        line-height: 22px;
    }

    .footer-bot {
        margin-top: 20px;
        padding-bottom: 15px;
    }

    .footer-bot-text {
        font-size: 12px;
        line-height: 1.8;
    }

    /* ---- 底部固定条 ---- */
    .footerfix {
        height: 52px;
    }

    .footerfix .container {
        flex-direction: column;
        padding: 6px 15px;
    }

    .footerfix-text {
        font-size: 13px;
        line-height: 1.5;
    }

    .footerfix-text a {
        height: 30px;
        line-height: 30px;
        width: 80px;
        font-size: 12px;
        margin-left: 0.5rem;
        flex-shrink: 0;
    }

    /* ---- 右侧固定导航栏 - 移动端缩小 ---- */
    .rightposition {
        width: 40px;
        margin-top: -70px;
    }

    .rightposition li {
        height: 40px;
        width: 40px;
    }

    .right-list {
        width: 40px;
        height: 40px;
    }

    .right-icon {
        width: 22px;
        height: 22px;
        margin: 9px;
        background-size: 200px auto;
    }

    .right-text {
        display: none;
    }

    .r-listhov1:hover {
        width: 40px;
    }

    .right-img img {
        width: 120px !important;
    }

    .right-img-weixin {
        left: -130px;
        top: -40px;
    }

    .right-img-qq {
        left: -130px;
        top: -20px;
    }

    /* ---- 回到顶部 ---- */
    .rightfix {
        width: 36px;
        height: 36px;
        right: 10px;
        bottom: 80px;
        line-height: 36px;
    }

    .rightfix span {
        font-size: 36px;
    }

    /* ---- BasicPage / 内容页 ---- */
    .right_contain {
        width: 100% !important;
        float: none;
        padding: 15px;
        box-sizing: border-box;
    }

    .WebSideMenu {
        display: none;
    }

    .contain {
        width: 100% !important;
        float: none;
    }

    .AboutReading {
        display: none;
    }

    .card {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
        margin-top: 15px;
    }

    .formulalist-item {
        width: 100%;
        margin-bottom: 20px;
    }

    .formulalist-item-img {
        height: 180px;
    }

    /* ---- 侧边菜单(downmenu) - 移动端改为横向标签栏 ---- */
    ul.expmenu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border-bottom: 2px solid #e8e8e8;
        padding: 0;
        margin: 0 0 16px 0;
        font-size: 13px;
    }

    ul.expmenu::-webkit-scrollbar {
        display: none;
    }

    ul.expmenu > li {
        flex-shrink: 0;
        float: none;
    }

    ul.expmenu > li > div.menu-header {
        padding: 10px 14px;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        font-weight: 500;
        color: #666;
        height: auto;
        white-space: nowrap;
        font-size: 13px;
        cursor: pointer;
        background: transparent;
        text-shadow: none;
    }

    ul.expmenu > li > div.menu-header.active {
        color: #3370CC;
        border-bottom-color: #3370CC;
        font-weight: 600;
    }

    ul.expmenu > li > div.menu-header:hover {
        background: transparent;
        color: #3370CC;
    }

    ul.expmenu > li > div.menu-header > .arrow {
        display: none;
    }

    ul.expmenu > li > div.menu-header > .label {
        padding-left: 0;
        float: none;
        background: none;
    }

    .mainbox {
        flex-direction: column;
    }

    .main-content {
        width: 100%;
        max-width: 100%;
    }

    .SideMenu {
        font-size: 14px;
        height: auto;
        padding: 10px 12px;
    }

    /* ---- 禁用大屏hover动画(移动端无hover) ---- */
    .intro-list .intro-list-itembox:hover .in-li-itemtop {
        top: 0;
    }

    .intro-list .intro-list-itembox:hover .in-li-itemdown {
        top: 100%;
    }

    /* 移动端用active/click触发 */
    .intro-list .intro-list-itembox:active .in-li-itemtop {
        top: -100%;
    }

    .intro-list .intro-list-itembox:active .in-li-itemdown {
        top: 0;
    }

    /* ---- 工具/模板列表页 (CrossBorderTool / templatecase) ---- */
    .type1 .uli {
        width: 100% !important;
        height: auto;
        float: none;
    }

    .type1 a {
        margin-top: 8px;
        margin-right: 4px;
        padding: 0 10px;
        height: 26px;
        font-size: 12px;
        line-height: 26px;
    }

    .type1 .all-type {
        margin-left: 0;
        font-size: 12px;
    }

    .search {
        height: auto;
        line-height: normal;
        padding: 10px 0;
    }

    .search .sort {
        margin-top: 8px;
        margin-right: 8px;
        width: auto;
        padding: 0 10px;
        height: 28px;
        font-size: 12px;
        line-height: 28px;
    }

    .search .ai-input,
    #searchInput {
        float: none;
        width: 100% !important;
        max-width: 100%;
        margin-left: 0;
        margin-top: 10px;
        box-sizing: border-box;
    }

    .ailogo {
        float: none;
        margin: 10px auto;
        display: block;
        width: 120px;
        height: auto;
    }

    .templatelist-item {
        width: 48% !important;
        margin: 6px 1% !important;
        height: auto !important;
        min-height: 180px;
    }

    .templatelist-item-img {
        height: 120px;
    }

    .templatelist-item-img img {
        height: auto;
        max-height: 100px;
    }

    .temp-item-title {
        height: auto;
        min-height: 60px;
        padding: 10px;
    }

    .temp-msg {
        height: auto;
        max-height: 60px;
        font-size: 12px;
    }

    .temp-info {
        padding: 8px 5px 0 5px;
        height: auto;
        flex-wrap: wrap;
    }

    .temp-info-money,
    .temp-info-downcount {
        font-size: 10px;
        top: 2px;
    }

    .temp-info > .info {
        height: auto;
        margin-right: 0;
    }

    .temp-info > .info .info-use,
    .temp-info > .info .info-preview {
        padding: 4px 8px;
        font-size: 11px;
    }

    .pagination {
        margin-left: 0;
        width: 100%;
        margin-top: 30px;
    }

    .pagination a {
        padding: 3px 7px;
        font-size: 12px;
    }

    .search-container {
        padding: 0 10px;
    }

    #searchButton {
        margin-left: 10px;
        padding: 6px 12px;
        font-size: 12px;
    }

    /* ---- 全部服务/充值页 (AllService) ---- */
    .ReChargeContent {
        width: 100% !important;
        margin-top: 20px;
        min-height: 200px;
    }

    .Product-Content {
        margin: 15px;
    }

    .Product-Title {
        font-size: 22px;
        height: auto;
    }

    .Product-Title p {
        float: none;
        margin-top: 10px;
        font-size: 14px;
        display: inline-block;
    }

    #downloadModal {
        width: 90% !important;
        max-width: 350px;
        height: auto;
        min-height: 130px;
    }

    .form-check {
        width: 45%;
        margin-bottom: 10px;
    }

    /* ---- 二维码弹窗 ---- */
    #qrCodeModal {
        width: 90% !important;
        max-width: 330px;
    }

    /* ---- 分页 ---- */
    #Pagination div,
    #TempsPagination div {
        margin-right: 5px;
        font-size: 12px;
    }

    #Pagination button,
    #TempsPagination button {
        padding: 4px 8px;
        font-size: 12px;
    }

    /* ---- 用户中心 (UserSetting) ---- */
    .wallet-balance-title .balance-total {
        flex-direction: column;
        height: auto;
    }

    .wallet-balance-title .balance-total .balance-item {
        width: 100% !important;
        padding-top: 16px;
    }

    .wallet-balance-title .balance-total .balance-item .item-num {
        font-size: 24px;
        line-height: 32px;
    }

    .wallet-balance-title .btn-box {
        width: 80% !important;
    }

    .wallet-balance-title {
        height: auto !important;
    }

    #UpdatePwd form {
        width: 90% !important;
        max-width: 100% !important;
    }

    .verificationmodal {
        width: 90% !important;
        max-width: 360px;
        height: auto;
        min-height: 170px;
    }

    .phoneInputGroup {
        width: 100% !important;
        max-width: 290px;
    }

    .fromSubmit {
        width: 50% !important;
        min-width: 120px;
    }

    .avatar-wrapper {
        margin-left: 10px;
    }

    .changeAvatar {
        margin-left: 10px;
        margin-top: 40px;
        font-size: 11px;
    }

    .previewHeadModal {
        width: 80% !important;
        left: 10% !important;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .th, .td {
        padding: 8px 6px;
        font-size: 12px;
    }

    .details {
        padding: 15px;
    }

    .details h3 {
        font-size: 18px;
    }

    .Temp-Content {
        padding: 15px;
    }

    .Temp-Title {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .Temp-Title h4 {
        font-size: 16px;
    }

    .record-card {
        padding: 16px;
    }

    .card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-row {
        flex-wrap: wrap;
    }

    .card-label {
        width: 65px;
        font-size: 12px;
    }

    .card-value {
        font-size: 13px;
    }

    /* ---- 关于页面 (about) ---- */
    .contain {
        width: 90% !important;
        height: auto !important;
    }

    .contain p {
        font-size: 20px;
        padding-top: 20px;
    }

    .copyright_text img {
        width: 100% !important;
        max-width: 300px;
        height: auto !important;
        margin-left: 0 !important;
        display: block;
    }

    .loggif {
        width: 60% !important;
    }

    /* ---- 搜索容器 ---- */
    .search-container input {
        margin-left: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* ---- 标签切换 ---- */
    .wallet-coin .wallect-coin-list div.tab-switch ul.tab-switch-ul,
    .MyService-switch-ul {
        flex-wrap: wrap;
        gap: 4px;
    }

    .wallet-coin .wallect-coin-list div.tab-switch ul.tab-switch-ul li,
    .MyService-switch-ul li {
        margin-right: 15px;
        padding-bottom: 10px;
        font-size: 14px;
    }

    /* ---- 提交按钮 ---- */
    .submitRecharge {
        width: 80%;
        font-size: 14px;
    }
}

/* ========== 手机端 (≤480px) ========== */
@media screen and (max-width: 480px) {

    /* ---- 头部 ---- */
    .header-flex .logobox .logo {
        height: 28px;
    }

    .header-flex .nav .nav-li {
        font-size: 12px;
        margin: 0 6px;
        height: 36px;
        line-height: 36px;
    }

    .header-flex .nav .nav-li > a {
        font-size: 12px;
    }

    .loginbtn span {
        font-size: 18px;
    }

    .UsersInfo {
        font-size: 11px;
    }

    .Menu img {
        width: 28px !important;
        height: 28px !important;
    }

    .UserInfo p {
        font-size: 12px;
        line-height: 40px;
    }

    /* ---- Banner ---- */
    .banner .ban-text .ban-title {
        font-size: 22px;
    }

    .banner .ban-text .ban-title span {
        font-size: 14px !important;
    }

    .banner .ban-text .ban-title2 {
        font-size: 12px;
    }

    .ban-img .fiximg {
        width: 150px;
    }

    .ban-img .moveimg1 {
        width: 60px !important;
        left: 10px !important;
    }

    .ban-img .moveimg2 {
        width: 50px !important;
        left: -30px !important;
    }

    .ban-img .moveimg3 {
        width: 90px !important;
        left: 30px !important;
    }

    /* ---- 简介 ---- */
    .intro-title h1 {
        font-size: 24px;
    }

    .intro-list .intro-list-item {
        height: 260px;
    }

    .intro-list .in-li-itemtop {
        padding: 20px;
    }

    .intro-list .in-li-itemtop .in-itemtop-title {
        font-size: 18px;
    }

    .intro-list .in-li-itemdown {
        padding: 20px;
    }

    .intro-list .in-li-itemdown .in-itemdown-title {
        font-size: 18px;
    }

    .intro-list .in-li-itemdown p {
        font-size: 13px;
        line-height: 20px;
    }

    /* ---- 业务板块 ---- */
    .business-title h1 {
        font-size: 22px;
    }

    .industrycase .industrycase-list a {
        height: 160px;
    }

    .industrycase .industrycase-list a span {
        font-size: 16px;
        bottom: 30px;
    }

    .industrycase .industrycase-list a p {
        font-size: 11px;
    }

    .industrycase .industrycase-list a:hover span {
        bottom: 65px;
    }

    .industrycase .industrycase-list a:hover p {
        bottom: 30px;
    }

    /* ---- 合作伙伴 ---- */
    .cooperator-title {
        font-size: 18px;
    }

    /* ---- 底部 ---- */
    .footer .footer-right li {
        width: 50%;
        margin-bottom: 12px;
    }

    .footer .footer-right li .foo-r-list-title {
        font-size: 12px;
    }

    .footer .footer-right li a {
        font-size: 11px;
        line-height: 20px;
    }

    .footer-bot-text {
        font-size: 10px;
    }

    .footerfix-text {
        font-size: 11px;
    }

    .footerfix-text a {
        height: 26px;
        line-height: 26px;
        width: 64px;
        font-size: 11px;
    }

    /* ---- 右侧导航栏 - 进一步缩小 ---- */
    .rightposition {
        width: 34px;
        margin-top: -60px;
    }

    .rightposition li {
        height: 34px;
        width: 34px;
    }

    .right-list {
        width: 34px;
        height: 34px;
    }

    .right-icon {
        width: 18px;
        height: 18px;
        margin: 8px;
    }

    /* ---- 搜索框 ---- */
    .search-box-container {
        width: 94% !important;
        left: 3% !important;
        top: 15%;
    }

    /* ---- BasicPage ---- */
    .formulalist-item-img {
        height: 140px;
    }

    .temp-item-title {
        padding: 10px;
    }

    .temp-author {
        font-size: 14px;
    }

    .temp-info {
        padding: 8px 10px 10px 10px;
        height: auto;
        flex-direction: column;
        gap: 8px;
    }

    .temp-info > .info .info-use,
    .temp-info > .info .info-preview {
        padding: 2px 12px;
        font-size: 11px;
    }

    /* ---- 下拉菜单(移动端) ---- */
    .nav-li-list {
        left: 0;
        min-width: 120px;
    }

    .nav-li-list .nav-li-list-item a {
        width: auto;
        min-width: 120px;
        line-height: 40px;
        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* ---- 侧边菜单标签栏(小屏) ---- */
    ul.expmenu > li > div.menu-header {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* ---- 大字体内容 ---- */
    h2 {
        font-size: 18px;
    }

    .PageContent {
        font-size: 14px;
        line-height: 1.6;
    }

    .PageContent img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ---- 禁用页面动画(节省性能) ---- */
    .ban-img .fiximg,
    .ban-img .moveimg,
    .ban-img .moveimg1,
    .ban-img .moveimg2,
    .ban-img .moveimg3 {
        animation: none;
    }

    /* ---- 工具/模板列表 - 手机端双列变单列 ---- */
    .templatelist-item {
        width: 100% !important;
        margin: 8px 0 !important;
    }

    .templatelist-item-img {
        height: 100px;
    }

    .temp-info > .info .info-use,
    .temp-info > .info .info-preview {
        padding: 3px 6px;
        font-size: 10px;
    }

    /* ---- 类型筛选 ---- */
    .type1 a {
        padding: 0 8px;
        margin-right: 2px;
        font-size: 11px;
        height: 24px;
        line-height: 24px;
    }

    .search .sort {
        margin-right: 4px;
        padding: 0 8px;
        font-size: 11px;
        height: 26px;
        line-height: 26px;
    }

    /* ---- 充值 ---- */
    .ReChargeContent {
        margin-top: 10px;
    }

    .Product-Title {
        font-size: 18px;
    }

    .Product-Title p {
        font-size: 12px;
        padding: 8px 14px;
    }

    .Code_WeChat,
    .Code_AliPay {
        font-size: 14px;
        padding: 8px;
    }

    #amountDisplay {
        font-size: 20px;
    }

    /* ---- 服务选择 ---- */
    .service-section span {
        width: 100%;
        float: none;
        display: block;
        margin-bottom: 5px;
    }
}