/* 通用重置与基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
    background-color: #fff;
    color: #333;
    line-height: 1.6;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: #333;
}

img {
    max-width: 100%;
    display: block;
    border-radius: .5rem;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: .25rem;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 布局容器 */
.container {
    width: 100%;
    /* max-width: 112.5rem; */
    margin: 0 auto;
}


/* 头部区域 */
.header {
    margin-top: 3.75rem;
    width: 100%;
    /* height: 65.8125rem; */
    text-align: center;
    position: relative;
    /* background: url(../imge/index/banner.png) no-repeat; */
    background-size: 100% 100%;
    color: #fff;
    overflow: hidden;
}


.containerdownload {
    position: absolute;
    bottom: .625rem;
    right: 1.625rem;
    display: flex;
    /* height: 5rem; */
    width: 21%;
}

.containerdownload .download-btn {
    position: relative;
    background-color: #353940;
    color: #fff;
    width: 100%;
    height: 4.375rem;
    border-radius: 1.25rem;
    overflow: hidden;
    font-size: 1.125rem;
}



.containerdownload .download-btn span {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.containerdownload .download-btn:nth-child(1) {
    left: 1rem;
}

.containerdownload .download-btn .line {
    position: absolute;
    z-index: 999;
    border-radius: 1.25rem;
    display: none;
}

.containerdownload .download-btn .lineone {
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    /* 加上渐变效果，方可形成拖尾效果 */
    background: linear-gradient(90deg, transparent, #fff);
    animation: animate1 4s linear infinite;
}

/* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
@keyframes animate1 {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

.containerdownload .download-btn .linetow {
    top: -100%;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #fff);
    animation: animate2 4s linear infinite;
    /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
    animation-delay: 1s;
}

@keyframes animate2 {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

.containerdownload .download-btn .linethere {
    bottom: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(270deg, transparent, #fff);
    animation: animate3 4s linear infinite;
    animation-delay: 2s;
}

@keyframes animate3 {
    0% {
        right: -100%;
        height: 3px;
    }

    50%,
    100% {
        height: 2px;
        right: 100%;
    }
}

.containerdownload .download-btn .linefour {
    bottom: -100%;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #fff);
    animation: animate4 4s linear infinite;
    animation-delay: 3s;
}

@keyframes animate4 {
    0% {
        bottom: -100%;
    }

    50%,
    100% {
        bottom: 100%;
    }
}

/* 新闻资讯 */
.news .newsbox {
    width: 100%;
    box-sizing: border-box;
    /* padding: 0 6.25rem; */
}

.news .newsbox .newsboxone {
    margin-top: 5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news .newsbox .newsboxone .newsitem {
    width: 31%;
    background: #F6F6FB;
    border-radius: 2.1875rem;
    padding: 1.875rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

.news .newsbox .newsboxone .newsitem div:nth-child(1) {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 700;
    font-size: 1.625rem;
    color: #333333;
    text-align: left;
    padding-left: .75rem
}

.news .newsbox .newsboxone .newsitem div:nth-child(2) {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 1rem;
    color: #676C76;
    text-align: left;
    padding-left: .75rem;
    margin-top: .7rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news .newsbox .newsboxone .newsitem div:nth-child(3) {
    width: 100%;
    /* height: 11.5625rem; */
    margin-top: 2rem;


}

.news .newsbox .newsboxone .newsitem div:nth-child(3) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.news .newsbox .newsboxtow {
    margin-top: 1.625rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news .newsbox .newsboxtow .newsitem {
    width: 48%;
    height: 12.5rem;
    background: #F6F6FB;
    border-radius: 2.1875rem;
    padding: 0 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news .newsbox .newsboxtow .newsitem .newsitemtow_one {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.news .newsbox .newsboxtow .newsitem .newsitemtow_one div:nth-child(1) {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 700;
    font-size: 1.625rem;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news .newsbox .newsboxtow .newsitem .newsitemtow_one div:nth-child(2) {
    margin-top: .9375rem;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 1rem;
    color: #676C76;
    text-align: left;
}

.news .newsbox .newsboxtow .newsitem .imgbox {
    width: 11.25rem;
    /* height: 12.5rem; */
    object-fit: contain;
}

.news .newsbox .newsboxtow .newsitem .imgbox img {
    width: 100%;
    height: 100%;
}

/* 附近人 */
.nearby .nearbybox {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    /* flex-wrap: wrap; */
    align-items: center;
    /* padding-right: 15rem; */
}

.nearby .nearbybox img {
    width: 53.3125rem;
    height: 44.4375rem;
}

.nearby .nearbybox .nearbyboxringe {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 5.625rem 17.25rem;
}

.nearby .nearbybox .nearbyboxringe .nearbyboxringeitem {
    width: 14.6875rem;
    height: 16.25rem;
    background: #F6F6FB;
    border-radius: 1.875rem;
    display: flex;
    /* justify-content: center; */
    align-items: flex-start;
    flex-direction: column;
}

.nearby .nearbybox .nearbyboxringe .nearbyboxringeitem p {
    margin-left: 1.875rem;
    padding: 1.875rem 0 0 1.875rem;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 700;
    font-size: 1.5rem;
    color: #171717;
}


/* 功能模块通用样式 */
.section {
    padding: 0 0 6.25rem 0;
    text-align: center;
    background: sectionbanner.png;
}

.section-header {
    max-width: 75rem;
    margin: 0 auto .375rem;
}

.section h2 {
    font-size: 2.2rem;
    margin-bottom: 1.25rem;
    color: #222;
}

.section p {
    color: #666;
}

.card-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.875rem;
}

.card {
    background-color: #fff;
    border-radius: .75rem;
    padding: 1.875rem;
    width: 18.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .1875rem;
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 .9375rem 2.1875rem rgba(0, 0, 0, 0.1);
}

.card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    width: 3.75rem;
    height: 3.75rem;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1.25rem;
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: .9375rem;
    color: #222;
}

.card p {
    font-size: 0.95rem;
    color: #666;
}

/* 社交圈子模块 */
.social-circle {
    background-color: #f9f9f9;
}

.social-circle .card {
    width: 13.75rem;
    padding: .9375rem;
    border-radius: .625rem;
}

.social-circle .card img {
    height: 150px;
    object-fit: cover;
    margin-bottom: 10px;
}

.social-circle .card p {
    font-weight: 500;
}

/* 新闻资讯模块 */
.news .card {
    width: calc(33.333% - 30px);
    text-align: left;
}

.news .card img {
    height: 180px;
    object-fit: cover;
    margin-bottom: 20px;
}

.news .card h3 {
    font-size: 1.1rem;
}

.news .card p {
    margin-top: 10px;
}

/* 附近的人模块 */
.nearby .card {
    width: 250px;
}

.nearby .card img {
    width: 100px;
    height: 100px;
    /* object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #6a11cb; */
}

/* 用户故事模块 */
.user-story {
    background: linear-gradient(135deg, #f3f3ff 0%, #f0f8ff 100%);
}

.user-story .card {
    background-color: white;
    border-radius: 15px;
    text-align: left;
}

.user-story .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.user-story .card-header img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 15px;
}

.user-story .card-header h4 {
    font-size: 1.1rem;
}

.user-story .card-header p {
    font-size: 0.85rem;
    color: #888;
}

/* 底部区域 */
.footer {
    background-color: #222;
    color: #fff;
    padding: 80px 0 40px;
}

.footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.footer h3 {
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
    color: #fff;
}

.footer p {
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.footer-links a {
    color: #aaa;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #fff;
}

.footer-social {
    display: flex;
    align-items: center;
}

.footer-social a {
    width: 2.1875rem;
    height: 2.1875rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s;
}

.footer-social a:hover {
    background-color: #6a11cb;
    transform: translateY(-3px);
}

.footer-bottom {
    margin-top: 3.75rem;
    text-align: center;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 0.8rem;
    color: #888;
}

.footer-section .download-btn {
    width: 12.875rem;
    height: 4.125rem;
    background: #333333;
    border-radius: 15px 15px 15px 15px;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 1rem;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-section .download-btn:nth-child(2) {
    margin-left: 1.25rem;
}


/* 动画效果 */
@keyframes fadeUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 手机的佛光 */
.phone-container {
    margin-top: 8.25rem;
    position: relative;
    padding: 0 15rem;

}

.phone-containerone {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* flex-wrap: wrap; */
}

.phone-containerone .phone-img {
    position: relative;
    /* left: 15.5625rem; */
    object-fit: cover;
    z-index: 99;
    width: 39.25rem;
    min-width: 39rem;
    height: 39.25rem
        /* left: 50%; */
        /* transform: translate(-90%, 0); */
}



.phone-containerone .phone-img::after {
    content: '';
    position: absolute;
    width: 39.25rem;
    height: 39.25rem;
    top: 0;
    left: 0;
    border-radius: 50%;
    animation: donghua 3s infinite;
}

.phone-containerone .phone-img::before {
    content: '';
    position: absolute;
    width: 30.25rem;
    height: 30.25rem;
    top: 10%;
    left: 10%;
    border-radius: 50%;
    border-radius: 50%;

    animation: donghua 3s infinite;
}

/* @media (min-width: 769px), */
@media (max-width: 769px),
(max-device-pixel-ratio: 1.5) {

    .phone-containerone .phone-img::after {
        display: none;
    }

    .phone-containerone .phone-img::before {
        display: none;
    }
}


@keyframes donghua {
    /* 0% {
        transform: scale(0.60);
        border: .0625rem solid #ccc;
    }

    60% {
        transform: scale(1);
        border: .0625rem solid #ccc;

    }

    100% {
        transform: scale(0.60);
        border: .0625rem solid #ccc;
    } */

    0% {
        transform: scale(0.60);
        background: radial-gradient(circle at 50% 0%,
                rgba(204, 204, 204, 0.3) 0%,
                rgba(203, 202, 202, 0) 70%);
        filter: blur(2px);
    }

    60% {
        transform: scale(1);
        background: radial-gradient(circle at 50% 0%,
                rgba(204, 204, 204, 0.3) 0%,
                rgba(203, 202, 202, 0) 70%);

        filter: blur(1px);


    }

    100% {
        transform: scale(0.60);
        background: radial-gradient(circle at 50% 0%,
                rgba(204, 204, 204, 0.3) 0%,
                rgba(203, 202, 202, 0) 70%);
        filter: blur(2px);

    }
}

.phone-containerone .phone-containeronebox {
    /* margin-top: 11rem;
    position: absolute;
    left: 55%;
    transform: translate(-10%, -50%); */
    margin: 2.75rem 4.375rem 0rem 4.375rem;
    z-index: 99;
}

.phone-containerone .phone-containeronebox .phone-containeroneboxone {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 900;
    font-size: 2.5rem;
    color: #09090A;
    text-align: left;
}

.phone-containerone .phone-containeronebox .phone-containeroneboxtow {
    margin-top: 1.25rem;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 1.125rem;
    color: #676C76;
    text-align: left;
}

.phone-containerone .phone-containeronebox .phone-containeroneboxthere {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 40.5rem;
    margin-top: 1rem;
}

.phone-containerone .phone-containeronebox .phone-containeroneboxthere .phone-containeroneboxthereitem {
    padding-left: .625rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 16.125rem;
    height: 3.9375rem;
    border-radius: 2.6875rem;
    background: rgba(246, 246, 251, 0.4);
    margin-top: 2.0625rem;

}

.phone-containerone .phone-containeronebox .phone-containeroneboxthere .phone-containeroneboxthereitem .img {
    width: 3.0625rem;
    height: 3.0625rem;
    background: #F6F6FB;
    border-radius: 2.6875rem;
}

.phone-containerone .phone-containeronebox .phone-containeroneboxthere .phone-containeroneboxthereitem span {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 1rem;
    color: #333333;
    margin-left: 1.875rem;
    text-align: center;
}

.phone-containerofour {
    position: relative;
    margin: auto;
    margin-top: -12rem;
    width: 100%;
    height: 22.4375rem;
    background: url('../imge/index/containerofour.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding: 0 2.75rem;
    justify-content: space-between;
    align-items: end;
    /* flex-wrap: wrap; */
    padding-bottom: 2.5rem;
}

.phone-containerofour::after {
    content: "";
    flex: auto;
}

@media (max-width: 769px),
(min-device-pixel-ratio: 1.5) {
    /* .phone-containerofour {
        margin-top: 2rem !important;

    } */
}

.phone-containerofour .phone-containerofouritem {
    width: 10%;
    height: 3.5625rem;
    background: #FFFFFF;
    border-radius: 2.5rem;
    line-height: 3.5625rem;
    text-align: center;
    margin: 0 2.5rem;
}

/* .arc {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
    animation: scaleAndGlow 3s infinite ease-in-out;
}

.phone-containerone .phone-img .arc1 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top: 1px solid #ccc;
    animation-delay: 1s;
}

.arc2 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    animation-delay: 1s;
}

.arc3 {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    animation-delay: 1s;
} */

@keyframes scaleAndGlow {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
        border-width: 2px;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.6;
        border-width: 2px;

    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
        border-width: 2px;

    }
}

/* 群聊 */
.groupchat {
    margin-top: 9.4375rem;
    position: relative;
    width: 100%;
    /* height: 44.4063rem; */
    display: flex;
    justify-content: space-between;
    /* flex-wrap: wrap; */
    padding: 0 15rem 0 15rem;
    align-items: center;
}

@media (max-width: 769px),
(min-device-pixel-ratio: 1.5) {

    .groupchat {
        justify-content: center;
    }


    .phone-containerone .phone-img::after {
        display: none;
    }

    .phone-containerone .phone-img::before {
        display: none;

    }
}

.groupchat::after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 0;
    width: 96%;
    height: 100%;
    background: url(../imge/index/sectionbannerbeijng.png) no-repeat;
    background-size: 100% 100%;
}

.groupchat .phone-containeronebox {
    /* position: absolute;
    left: 12.5%;
    top: 6.5rem; */
    /* margin-left: 50%; */
    z-index: 99;

}

.groupchat .phone-containeronebox .phone-containeroneboxone {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 900;
    font-size: 2.5rem;
    color: #09090A;
    text-align: left;
}

.groupchat .phone-containeronebox .phone-containeroneboxtow {
    margin-top: 1.25rem;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 1.125rem;
    color: #676C76;
    text-align: left;
}

.groupchat .phone-containeronebox .phone-containeroneboxthere {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* width: 37.5rem; */
    margin-top: 5.25rem;
}

.groupchat .phone-containeronebox .phone-containeroneboxthere .phone-containeroneboxthereitem {
    padding-left: .625rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 16.125rem;
    height: 3.9375rem;
    border-radius: 2.6875rem;
    background: #fff;
    margin-top: 2.0625rem;
}

.groupchat .phone-containeronebox .phone-containeroneboxthere .phone-containeroneboxthereitem .img {
    width: 3.0625rem;
    height: 3.0625rem;
    background: #F6F6FB;
    border-radius: 2.6875rem;
}

.groupchat .phone-containeronebox .phone-containeroneboxthere .phone-containeroneboxthereitem span {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 1rem;
    color: #333333;
    margin-left: 1.875rem;
    text-align: center;
}

.guildgroupimghe {
    animation: guildgroupimgheanimation 3s infinite ease-in-out;
    z-index: 10;
    width: 11.37662338vw;
    height: 6.44155844vw;
    background-image: url(https://qq-web.cdn-go.cn/im.qq.com_new/b33b2709/img/guild-1.45f490cc.png);
}

@keyframes guildgroupimgheanimation {
    0% {
        transform: translateZ(0);
    }

    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }
}

/* 社会圈子 */

.socializebanner {
    width: 100%;
    /* background: url(../imge/index/socializebanner.png) no-repeat; */
    /* background-size: 100% 100%; */
    overflow: hidden;
    position: relative;
}

.socializebanner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    background: url(../imge/index/socializebanner.png) no-repeat;
    background-size: contain;
    overflow: hidden;
    height: 100%;
}

.socializebanner .grid-item {
    transform: translate(0, 0);
    opacity: 1;
}

.socializebanner:not(.scatter) .grid-item {
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* 用户故事 */

.stories {
    width: 100%;
    margin: 0 auto;
    /* display: flex;
    justify-content: flex-start; */
    /* overflow: hidden; */
    background: url(../imge/index/storiesbanner.png) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 3.125rem;
    overflow: visible;
    /* 父元素不要设置overflow:hidden，否则会遮挡滚动 */
}

.mone {
    width: 100%;
    /* display: flex;
    justify-content: flex-start; */
    /* overflow: hidden; */
    background: url(../imge/index/storiesbanner.png) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 3.125rem;
    overflow: visible;
    /* 父元素不要设置overflow:hidden，否则会遮挡滚动 */
}

/* 容器样式：确保横向滚动基础功能 */
.mone .moneswiper-container {
    margin-top: 1.25rem;
    width: 100%;
    display: flex;
    /* 子元素横向排列 */
    justify-content: flex-start;
    /* 从左侧开始排列，避免居中导致滚动空间不足 */
    overflow-x: auto;
    /* 超出宽度时显示横向滚动条 */
    overflow-y: hidden;
    /* 隐藏纵向滚动条（避免内容高度异常时出现） */
    padding: 0 0.5rem 1rem;
    /* 底部预留空间，避免滚动条遮挡内容 */
    scrollbar-width: thin;
    /* 滚动条样式优化（细一些） */
    /* 完全隐藏滚动条的样式 */
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* 隐藏WebKit浏览器（Chrome、Safari等）的滚动条 */
.mone .moneswiper-container::-webkit-scrollbar {
    display: none;
    /* Chrome、Safari等 */
}

/* 单个面板样式：防止压缩+添加间距 */
.mone .moneswiper-container .moneswiperslide {
    width: 19rem;
    height: 14.9375rem;
    background: #FFFFFF;
    border-radius: 1.5rem;
    padding: 0.625rem 1.25rem;
    margin-right: 1rem;
    /* 面板之间的间距，避免拥挤 */
    flex-shrink: 0;
    /* 关键：禁止面板被压缩，保证宽度固定 */
}

/* 可选：滚动条样式美化（不影响功能，仅优化视觉） */
.mone .moneswiper-container::-webkit-scrollbar {
    height: 6px;
    /* 横向滚动条高度 */
}

.mone .moneswiper-container::-webkit-scrollbar-thumb {
    background-color: #ddd;
    /* 滚动条颜色 */
    border-radius: 3px;
    /* 滚动条圆角 */
}

.mone .moneswiper-container::-webkit-scrollbar-track {
    background-color: transparent;
    /* 滚动条轨道透明 */
}

.mone .moneswiper-container .moneswiperslide h3 {
    margin-top: 1.25rem;
    color: #333;
    font-size: .9375rem;
    padding-top: 0;
    text-align: center;
}

.mone .moneswiper-container .moneswiperslide p {
    padding-top: .625rem;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: .75rem;
    color: #7A7C80;
    text-align: left;
}

.stories .storiesonbox {
    text-indent: 10px;
    width: 20.375rem;
    height: 22.3125rem;
    background: #FFFFFF;
    border-radius: 1.875rem;
    text-align: left;
    margin: 0 2.25rem;
}

.stories h3 {
    color: #333;
    font-size: .9375rem;
    padding-top: 1.875rem;
}

.stories .storiesonbox img {
    display: none;
    width: 20.375rem;
    height: 9.375rem;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: all .6s ease-out;
}


/* 容器样式 */
.stories .swiper-container {
    margin-top: 8.3125rem;
    width: 100%;
    padding-bottom: 4.9375rem;
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    align-items: flex-end;
    overflow-x: auto;
    /* 保留水平滚动 */
    scroll-behavior: smooth;
    /* 配合JS滚动，增强平滑感 */
    /* 新增：避免内边距影响滚动计算 */
    padding-bottom: 4.375rem;
}

.stories .swiper-container::-webkit-scrollbar {
    display: none;
}

/* 包装器样式：添加边距并居中 */
.stories .swiper-wrapper {
    display: flex;
    margin: 0 auto;
    padding: 0 1rem;
    /* 减少左右内边距，避免边缘元素被内边距挤压 */
    gap: 1.5rem;
    justify-content: flex-start;
    height: 25.25rem;
    align-items: end;
}

/* 非激活面板样式 */
.stories .swiper-slide {
    width: 20.375rem;
    height: 22.3125rem;
    background: #FFFFFF;
    border-radius: 1.875rem;
    padding: 0 1.25rem;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
}

.stories .swiper-slide h3 {
    color: #333;
    font-size: 1.5rem;
    padding-top: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 9.375rem;
    font-weight: 600;
}

.stories .swiper-slide p {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 1.25rem;
    color: #7A7C80;
    /* max-height: 4rem; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.stories .swiper-slide img {
    display: none;
}

/* 激活面板样式 */
.stories .swiper-slide.on {
    width: 60.625rem;
    height: 25.25rem;
    /* box-shadow: 0 4px 1.25rem rgba(0, 0, 0, 0.1); */
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    padding: 0 2.5rem;
}

.stories .swiper-slide.on h3 {
    max-width: 12.5rem;
    font-size: 1.5rem;
    padding-top: 0;
    margin-bottom: 1rem;
}

.stories .swiper-slide.on p {
    max-height: none;
    -webkit-line-clamp: unset;
    margin-top: 0;
    line-height: 1.6;
    max-width: 30rem;
}

.stories .swiper-slide.on img {
    display: block;
    width: 25.1875rem;
    height: 22.875rem;
    margin-left: 2.5rem;
    object-fit: cover;
    border-radius: 1.25rem;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

/* 移动端 */
.moveHeader {
    position: relative;
    margin-top: 1.75rem;
}

.moveHeader img {
    position: relative;
    width: 90%;
    height: 30rem;
    margin: 0 auto;
}

.moveclasshP {
    margin-top: 3.125rem;
    width: 100%;
    padding: 0 .9375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.moveclasshP h1 {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 700;
    font-size: 1.5625rem;
    color: #1A1A1A;
    text-align: center;
}

.moveclasshP p {
    margin-top: .9375rem;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: .875rem;
    color: #676C76;
    text-align: center;
}

.moveclasshP .moveFeaturesdiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.moveclasshP .moveFeaturesdiv .moveFeaturesdivitem {
    margin-top: 1.1875rem;
    width: 48%;
    padding: .3125rem;
    height: 2.5rem;
    border-radius: 1.6875rem;
    background: rgba(246, 246, 251, 0.4);
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /* 浅灰色半透明背景 */
}

.moveclasshP .moveFeaturesdiv .moveFeaturesdivitem img {
    width: 1.875rem;
    height: 1.875rem;
}

.moveclasshP .moveFeaturesdiv .moveFeaturesdivitem p {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
    text-align: center;
    margin: 0;
    margin-left: .9375rem;
}

/* 畅聊 */
.moveFeatures .moveFeaturesdiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.moveFeatures .moveFeaturesdiv .moveFeaturesdivitem {
    margin-top: 1.1875rem;
    width: 48%;
    padding: .3125rem;
    height: 2.5rem;
    border-radius: 1.6875rem;
    background: rgba(246, 246, 251, 0.4);
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /* 浅灰色半透明背景 */
}

.moveFeatures .moveFeaturesdiv .moveFeaturesdivitem img {
    width: 1.875rem;
    height: 1.875rem;
}

.moveFeatures .moveFeaturesdiv .moveFeaturesdivitem p {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
    text-align: center;
    margin: 0;
    margin-left: .9375rem;
}


.moveFeatures .imgecontainerxaioxong {
    width: auto;
    padding-top: 1.25rem;
    background: url(../imge/index/containerofour.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    margin-top: -3rem;
    padding: 2.75rem .625rem 1.25rem .625rem;
}

.imgecontainerxaioxong::after {
    content: '';
    flex: auto;
}

.imgecontainerxaioxong .imgecontainerxaioxongfouritem {
    /* margin-left: .9375rem; */
    width: 4.3125rem;
    height: 1.75rem;
    background: #FFFFFF;
    border-radius: 1.125rem;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 500;
    font-size: .875rem;
    color: #353940;
    line-height: 1.75rem;
    text-align: center;
    margin: 0 .625rem;
    margin-top: .75rem;

}

.moveNews .moveNewsdiv {
    width: auto;
    margin-top: 1.4375rem;
    background: #F6F6FB;
    border-radius: 1.6875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.4375rem 1.125rem;
}

.moveNews .moveNewsdiv h2 {
    padding-left: .8125rem;
    width: 100%;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 700;
    font-size: 20px;
    color: #333333;
    text-align: left;
}

.moveNews .moveNewsdiv p {
    margin-top: 0;
    padding-left: .8125rem;
    width: 100%;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    font-size: .8125rem;
    color: #676C76;
    text-align: left;

}

.moveNews .moveNewsdiv img {
    margin-top: 1.25rem;
}

.moveNews .moveNewsdiv .moveNewsdivone {
    margin-left: .9375rem;
    max-width: 20rem;
}

.moveNearby .moveNearbybox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;

}

.moveNearby .moveNearbybox .moveNearbyboxitem {
    margin-top: 1.25rem;
    width: 45%;
    height: 13.375rem;
    background: #F6F6FB;
    border-radius: 1.3125rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* padding: 0 1.3125rem; */
}

.moveNearby .moveNearbybox .moveNearbyboxitem .moveNearbyboxitemtext {
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 700;
    font-size: 1.0625rem;
    color: #171717;
    padding: 1.3125rem 0 0 1.3125rem;
}

.moveNearby .moveNearbybox .moveNearbyboxitem img {
    object-fit: contain;
    margin: 0 auto;
    width: auto;
}

.moveCircles .swiper-container {
    width: 100%;
    height: auto;
    margin-top: 4.6875rem;
}

.moveCircles .swiper-container .moveCirclesImg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.moveCircles .swiper-container .moveCirclesImg::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../imge/index/socializebanner.png) no-repeat;
    background-size: contain;
}


.moveCircles .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* height: 200px; */

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition-property: all;
}

.moveCircles .swiper-slide img {
    width: 100%;
    height: 100%;
}

@media (max-width: 769px),
(min-device-pixel-ratio: 1.5) {
    .containerdownload .download-btn {
        width: 14.9375rem;
        font-size: .75rem;
    }

    .header,
    .phone-container,
    .features,
    .groupchat {
        display: none;
    }
}

/* 大于768px并且不是高分辨率屏幕显示 */
/* @media (min-width: 769px), */
@media (min-width: 769px),
(max-device-pixel-ratio: 1.5) {

    .moveCircles,
    .moveHeader,
    .moveGroupchat,
    .moveFeatures,
    .moveNearby,
    .mone,
    .monelange,
    .moveNews {
        display: none;
    }
}