/* 移动端适配样式 */

/* 移动端媒体查询 */
@media screen and (max-width: 768px) {
    /* 基础重置 */
    html, body {
        font-size: 14px !important;
        line-height: 1.6 !important;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* 头部导航适配 */
    .header {
        height: 60px !important;
    }

    #header {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
        height: 60px !important;
        flex-wrap: nowrap !important;
    }

    .header-left {
        margin-left: 0 !important;
        flex: 0 0 auto !important;
    }

    .header-left img {
        width: 32px !important;
        height: 32px !important;
        margin-right: 8px !important;
    }

    .header-left span {
        font-size: 18px !important;
    }

    .header-menu {
        display: flex !important;
        flex: 1 !important;
        justify-content: center !important;
        margin-left: 0 !important;
    }

    .header-menu li {
        margin: 0 8px !important;
        font-size: 13px !important;
    }

    .charge {
        margin-right: 0 !important;
        width: auto !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
        height: 32px !important;
        line-height: 30px !important;
    }

    .charge span,
    .charge img {
        display: none !important;
    }

    /* 首页轮播内容 */
    .swiper-container {
        height: 100vh !important;
        width: 100% !important;
    }

    .swiper-slide {
        height: 100vh !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .swiper-slide-first {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .main-content {
        padding: 80px 20px 60px !important;
        text-align: center !important;
        width: 100% !important;
        background-color: rgba(0,0,0,0.3) !important;
    }

    .main-content .meetyou {
        width: 70% !important;
        max-width: 300px !important;
        height: auto !important;
        margin: 0 auto 20px !important;
    }

    .main-content p {
        font-size: 18px !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
    }

    .main-content .downloads {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
        margin: 40px 0 !important;
        padding: 0 !important;
    }

    .main-content .downloads .down-item {
        width: 200px !important;
        height: 50px !important;
        margin: 0 !important;
    }

    .main-content .downloads .down-item img:not(.qrcode) {
        width: 100% !important;
        height: 100% !important;
    }

    .video-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important;
    }

    .video-wrapper .yuwan-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .slide-down {
        position: absolute !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 30px !important;
        height: 30px !important;
    }

    .slide-down img {
        width: 100% !important;
        height: 100% !important;
    }

    /* 隐藏分页器 */
    .swiper-container-vertical>.swiper-pagination-bullets {
        display: none !important;
    }

    /* 功能介绍区块 */
    .yuwan-common {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 60px 20px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .yuwan-common-odd {
        flex-direction: column !important;
        padding: 60px 20px !important;
    }

    .yuwan-left {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 2 !important;
    }

    .yuwan-right {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        margin: 0 auto 30px !important;
        padding: 0 !important;
        order: 1 !important;
    }

    .yuwan-left .ywtitle-circle {
        width: 50px !important;
        height: 50px !important;
        top: -30px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .yuwan-left .ywtitle-img {
        width: auto !important;
        max-width: 70% !important;
        height: auto !important;
        margin: 0 auto 20px !important;
    }

    .yuwan-left p,
    .yuwan-left .yuwan-icd {
        font-size: 15px !important;
        line-height: 1.8 !important;
        margin: 12px auto !important;
        text-align: center !important;
        max-width: 90% !important;
    }

    .yuwan-right .yuwan-phone-img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .yuwan-right .yuwanc,
    .yuwan-right .yuwan-c1,
    .yuwan-right .yuwan-c2,
    .yuwan-right .yuwan-c3,
    .yuwan-right .yuwan-rc1,
    .yuwan-right .yuwan-rc2,
    .yuwan-right .yuwan-rc3 {
        display: none !important;
    }

    /* 页脚适配 */
    footer {
        height: auto !important;
        padding: 40px 0 20px !important;
    }

    .footer-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    .footer-title {
        margin: 0 auto 30px !important;
        text-align: center !important;
    }

    .footer-title-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .footer-title-wrapper img {
        width: 40px !important;
        height: 40px !important;
        margin-right: 12px !important;
    }

    .footer-title-wrapper span {
        font-size: 20px !important;
    }

    .footer-middle {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }

    .footer-download {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 30px !important;
        margin-bottom: 30px !important;
        width: 100% !important;
    }

    .download-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .download-item .download-type {
        width: 140px !important;
        height: 50px !important;
        margin-bottom: 10px !important;
    }

    .download-item span {
        font-size: 14px !important;
    }

    .footer-contact {
        width: 100% !important;
        text-align: center !important;
    }

    .footer-contact h6 {
        font-size: 18px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .footer-contact .business,
    .footer-contact .tel {
        font-size: 14px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .other-contact {
        display: flex !important;
        justify-content: center !important;
        gap: 25px !important;
        margin-bottom: 40px !important;
    }

    .wechat,
    .sinablog {
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
    }

    .other-contact-img {
        width: 100% !important;
        height: 100% !important;
    }

    .footer-wrapper p {
        font-size: 11px !important;
        line-height: 1.6 !important;
        margin: 8px 0 !important;
        padding: 0 10px !important;
        text-align: center !important;
    }

    .police {
        width: 14px !important;
        height: 14px !important;
        margin-right: 3px !important;
    }

    /* 关于页面适配 */
    .section {
        margin-top: 60px !important;
        padding: 20px !important;
        width: 100% !important;
    }

    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .content-title {
        font-size: 24px !important;
        margin: 30px 0 20px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .about-yuwan {
        font-size: 14px !important;
        line-height: 1.8 !important;
        text-align: justify !important;
        padding: 0 15px !important;
        margin: 30px auto 60px !important;
        max-width: 100% !important;
    }

    .values-title {
        font-size: 22px !important;
        margin: 40px 0 30px !important;
        text-align: center !important;
    }

    .values-main {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        padding: 0 20px !important;
        margin: 30px auto 60px !important;
    }

    .values-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .values-item img {
        width: 100% !important;
        height: auto !important;
    }

    .welfare-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 20px !important;
        margin: 30px auto 60px !important;
    }

    .welfare-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px 10px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .welfare-item img {
        width: 50px !important;
        height: 50px !important;
        margin: 0 0 10px 0 !important;
    }

    .welfare-item span {
        font-size: 12px !important;
        text-align: center !important;
    }

    .contact-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 30px auto 60px !important;
    }

    .contact-left {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 0 30px 0 !important;
        padding: 0 20px !important;
    }

    .contact-left img {
        width: 100% !important;
        height: auto !important;
    }

    .contact-right {
        width: 100% !important;
        padding: 0 20px !important;
    }

    .contact-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 0 !important;
        margin-bottom: 25px !important;
    }

    .contact-item img {
        width: 35px !important;
        height: 35px !important;
        margin: 0 15px 0 0 !important;
        flex-shrink: 0 !important;
    }

    .contact-info {
        text-align: left !important;
        flex: 1 !important;
        margin: 0 !important;
    }

    .contact-info .info-title {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        text-align: left !important;
    }

    .contact-info .info-content {
        font-size: 13px !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }

    /* 隐藏悬浮元素 */
    .qrcode,
    .download-code,
    .other-contact-dialog {
        display: none !important;
    }
}

/* 超小屏幕适配 */
@media screen and (max-width: 375px) {
    body {
        font-size: 13px !important;
    }

    #header {
        padding: 0 10px !important;
    }

    .header-left img {
        width: 28px !important;
        height: 28px !important;
    }

    .header-left span {
        font-size: 16px !important;
    }

    .header-menu li {
        margin: 0 6px !important;
        font-size: 12px !important;
    }

    .charge {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    .main-content p {
        font-size: 16px !important;
    }

    .main-content .downloads .down-item {
        width: 180px !important;
    }

    .yuwan-left p,
    .yuwan-left .yuwan-icd {
        font-size: 14px !important;
    }

    .content-title {
        font-size: 22px !important;
    }

    .about-yuwan {
        font-size: 13px !important;
    }

    .values-main {
        gap: 15px !important;
    }

    .welfare-wrapper {
        gap: 12px !important;
    }

    .welfare-item {
        padding: 15px 8px !important;
    }

    .welfare-item img {
        width: 45px !important;
        height: 45px !important;
    }

    .welfare-item span {
        font-size: 11px !important;
    }

    .footer-download {
        gap: 20px !important;
    }

    .download-item .download-type {
        width: 120px !important;
        height: 45px !important;
    }

    .download-item span {
        font-size: 13px !important;
    }

    /* 加入我们页面适配 */
    .join-banner {
        height: 300px !important;
        margin-top: 60px !important;
    }

    .join-banner-content h1 {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }

    .join-banner-content p {
        font-size: 15px !important;
        padding: 0 20px !important;
    }

    .positions-section {
        padding: 40px 15px !important;
    }

    .positions-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .position-card {
        padding: 25px 20px !important;
    }

    .position-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .position-salary {
        margin: 10px 0 !important;
    }

    .position-title {
        font-size: 20px !important;
    }

    .contact-methods {
        flex-direction: column !important;
        gap: 25px !important;
    }

    /* 充值页面适配 */
    .charge-banner {
        height: 280px !important;
        margin-top: 60px !important;
    }

    .charge-banner-content h1 {
        font-size: 32px !important;
    }

    .charge-banner-content p {
        font-size: 15px !important;
        padding: 0 20px !important;
    }

    .charge-content {
        padding: 40px 15px !important;
    }

    .yuwan-packages {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .package-card {
        padding: 20px 15px !important;
    }

    .package-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }

    .package-amount {
        font-size: 18px !important;
    }

    .package-price {
        font-size: 20px !important;
    }

    .package-bonus {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    .vip-packages {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .vip-card {
        padding: 30px 20px !important;
    }

    .vip-card.popular {
        transform: scale(1) !important;
    }

    .vip-name {
        font-size: 22px !important;
    }

    .vip-price {
        font-size: 28px !important;
    }

    .payment-methods {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .payment-method {
        padding: 20px !important;
    }

    .payment-icon {
        font-size: 36px !important;
    }

    .notice-section {
        margin-top: 40px !important;
        padding: 20px !important;
    }

    .notice-title {
        font-size: 16px !important;
    }

    .notice-list li {
        font-size: 13px !important;
    }
}