body,h1,h2,h3,h4,h5,h6,li,p,ul {
    margin: 0;
    padding: 0
}

body,html {
    font-family: PingFangSC-Regular
}

#app {
    height: 100%
}

.f-row {
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row
}

.f-col,.f-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-direction: normal
}

.f-col {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column
}

.f-justify-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-justify-content: flex-start
}

.f-justify-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-justify-content: flex-end
}

.f-justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center
}

.f-justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-justify-content: space-between
}

.f-justify-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-justify-content: space-around
}

.f-align-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-align-items: flex-start
}

.f-align-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-align-items: flex-end
}

.f-align-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center
}

.f-align-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-align-items: baseline
}

.f-align-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-items: stretch
}

.f-wrap-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap
}

.f-wrap-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap
}

.f-wrap-reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    -webkit-flex-wrap: wrap-reverse
}

.f-cover {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex: 1
}

.f-align-self-start {
    -ms-flex-item-align: start;
    align-self: flex-start;
    -webkit-align-self: flex-start
}

.f-align-self-end {
    -ms-flex-item-align: end;
    align-self: flex-end;
    -webkit-align-self: flex-end
}

.f-align-self-center {
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-align-self: center
}

.f-align-self-baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline;
    -webkit-align-self: baseline
}

.f-align-self-stretch {
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -webkit-align-self: stretch
}

.text-align-l {
    text-align: left
}

.text-align-c {
    text-align: center
}

.text-align-r {
    text-align: right
}

.border-1px {
    position: relative
}

.border-1px:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: #e1e1e1;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.scale-right-enter-active,.scale-right-leave-active {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    -webkit-transition: transform .3s;
    transform-origin: right;
    -webkit-transform-origin: right
}

.scale-right-enter,.scale-right-leave-active {
    transform: scaleX(0);
    -webkit-transform: scaleX(0)
}

.from-right-enter-active,.from-right-leave-active {
    transition: all .3s;
    -webkit-transition: all .3s
}

.from-right-enter,.from-right-leave-active {
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0)
}

.from-bottom-enter-active,.from-bottom-leave-active {
    transition: all .3s;
    -webkit-transition: all .3s
}

.from-bottom-enter,.from-bottom-leave-active {
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0)
}

.from-right-bottom-enter-active,.from-right-bottom-leave-active {
    transition: all .3s;
    -webkit-transition: all .3s
}

.from-right-bottom-enter,.from-right-bottom-leave-active {
    -webkit-transform: translate3d(100%,100%,0);
    transform: translate3d(100%,100%,0)
}

img {
    content: normal!important
}

.container,body,html {
    height: 100%
}

.container {
    font-size: 0;
    position: relative
}

.container .tips-c {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: rgba(0,0,0,.8)
}

.container .tips-c img {
    width: 100%
}

.container .display-none {
    display: none
}

.container .content {
    display: block
}

.container .content .logo {
    padding-top: 29.63vw;
    padding-bottom: 22.407vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
    content: "viewport-units-buggyfill; padding-top: 29.63vw; padding-bottom: 22.407vw"
}

.container .content .logo.sjc {
    padding-bottom: 22.407vw;
    background: linear-gradient(180deg,#feffd4,#fff);
    content: "viewport-units-buggyfill; padding-bottom: 22.407vw"
}

.container .content .logo.eie {
    padding: 28.519vw 0 58.889vw;
    content: "viewport-units-buggyfill; padding: 28.519vw 0 58.889vw"
}

.container .content .logo img {
    width: 25.556vw;
    height: 34.444vw;
    content: "viewport-units-buggyfill; width: 25.556vw; height: 34.444vw"
}

.container .content .logo img.logo-tp {
    width: 22.407vw;
    height: 22.407vw;
    content: "viewport-units-buggyfill; width: 22.407vw; height: 22.407vw"
}

.container .content .logo img.v5 {
    width: 23.981vw;
    height: 23.981vw;
    content: "viewport-units-buggyfill; width: 23.981vw; height: 23.981vw"
}

.container .content .logo .more-v1 {
    width: 25.556vw;
    height: 42.13vw;
    content: "viewport-units-buggyfill; width: 25.556vw; height: 42.13vw"
}

.container .content .desc {
    margin-bottom: 2.778vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    content: "viewport-units-buggyfill; margin-bottom: 2.778vw"
}

.container .content .desc.sjc {
    margin-top: 0
}

.container .content .desc img {
    width: 40.556vw;
    height: 5.556vw;
    content: "viewport-units-buggyfill; width: 40.556vw; height: 5.556vw"
}

.container .content .desc-v5 .safe {
    width: 3.426vw;
    height: 4.259vw;
    margin-right: 1.296vw;
    content: "viewport-units-buggyfill; width: 3.426vw; height: 4.259vw; margin-right: 1.296vw"
}

.container .content .desc-v5 .ad {
    width: 4.259vw;
    height: 4.259vw;
    margin-left: 10.37vw;
    margin-right: 1.296vw;
    content: "viewport-units-buggyfill; width: 4.259vw; height: 4.259vw; margin-left: 10.37vw; margin-right: 1.296vw"
}

.container .content .desc-v5 span {
    font-size: 3.148vw;
    color: #666770;
    line-height: 4.537vw;
    content: "viewport-units-buggyfill; font-size: 3.148vw; line-height: 4.537vw"
}

.container .content .version {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 2.685vw;
    color: #999;
    content: "viewport-units-buggyfill; font-size: 2.685vw"
}

.container .content .version span {
    padding-right: 1.852vw;
    content: "viewport-units-buggyfill; padding-right: 1.852vw"
}

.container .content .version-top {
    margin-top: 2.778vw;
    content: "viewport-units-buggyfill; margin-top: 2.778vw"
}

.container .content .version-top .v-txt {
    margin-bottom: .926vw;
    content: "viewport-units-buggyfill; margin-bottom: 0.926vw"
}

.container .content .version-top .v-txt .title-v5 {
    font-size: 3.704vw;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #313338;
    line-height: 5.37vw;
    content: "viewport-units-buggyfill; font-size: 3.704vw; line-height: 5.37vw"
}

.container .content .version-top .v-txt .v-v5 {
    font-size: 3.704vw;
    font-family: Rubik-Medium,Rubik;
    font-weight: 500;
    color: #313338;
    line-height: 4.537vw;
    content: "viewport-units-buggyfill; font-size: 3.704vw; line-height: 4.537vw"
}

.container .content .version-foot {
    font-size: 2.593vw;
    content: "viewport-units-buggyfill; font-size: 2.593vw"
}

.container .content .version-foot.v5 {
    margin-top: -5.185vw;
    content: "viewport-units-buggyfill; margin-top: -5.185vw"
}

.container .content .btn {
    z-index: 91;
    margin-top: 5.556vw;
    margin-bottom: 4.815vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    content: "viewport-units-buggyfill; margin-top: 5.556vw; margin-bottom: 4.815vw"
}

.container .content .btn img {
    width: 74.63vw;
    height: 14.907vw;
    content: "viewport-units-buggyfill; width: 74.63vw; height: 14.907vw"
}

.container .content .btn.v4 img {
    width: 53.333vw;
    height: 13.333vw;
    content: "viewport-units-buggyfill; width: 53.333vw; height: 13.333vw"
}

.container .content .btn.v5 {
    margin: 0
}

.container .content .btn.v5 img {
    width: 79.444vw;
    height: 27.222vw;
    content: "viewport-units-buggyfill; width: 79.444vw; height: 27.222vw"
}

.container .bg-d {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1
}

.container .bg-d img {
    width: 82.685vw;
    height: 48.796vw;
    content: "viewport-units-buggyfill; width: 82.685vw; height: 48.796vw"
}

.container .bg-d.sjc {
    left: 0
}

.container .bg-d.sjc img {
    width: 100vw;
    height: 58.981vw;
    content: "viewport-units-buggyfill; width: 100vw; height: 58.981vw"
}

.container .sdj {
    position: absolute;
    bottom: 2.222vw;
    left: 0;
    right: 0;
    padding: .926vw 2.778vw;
    font-size: 2.593vw;
    color: #666;
    line-height: 5.37vw;
    text-align: center;
    content: "viewport-units-buggyfill; bottom: 2.222vw; padding: 0.926vw 2.778vw; font-size: 2.593vw; line-height: 5.37vw"
}

.fixed {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.7);
    z-index: 2022
}

.fixed .footer {
    position: absolute;
    right: 9.259vw;
    bottom: 4.259vw;
    width: 63.981vw;
    height: 17.593vw;
    content: "viewport-units-buggyfill; right: 9.259vw; bottom: 4.259vw; width: 63.981vw; height: 17.593vw"
}

.fixed .footer .pop {
    display: block;
    width: 63.981vw;
    height: 17.593vw;
    content: "viewport-units-buggyfill; width: 63.981vw; height: 17.593vw"
}

.fixed .footer .hand {
    position: absolute;
    right: 0;
    top: -.741vw;
    width: 22.685vw;
    height: 19.444vw;
    animation: a .6s linear infinite;
    -webkit-animation: a .6s linear infinite;
    content: "viewport-units-buggyfill; top: -0.741vw; width: 22.685vw; height: 19.444vw"
}

@keyframes a {
    0% {
        top: -8px
    }

    50% {
        top: 12px
    }

    to {
        top: -8px
    }
}

@-webkit-keyframes a {
    0% {
        top: -8px
    }

    50% {
        top: 12px
    }

    to {
        top: -8px
    }
}

.show {
    display: block
}

.hidden {
    display: none
}

/* 弹窗背景遮罩样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* 弹窗容器样式 */
.modal {
    text-align: center;
    height: auto;
    width: 80%;
    padding-top: 35%;
    padding-bottom: 1%;
    background-color: transparent;
    border-radius: 8px;
    border: none;
    box-shadow: none;
    background-image:
            url("../img/invite/img_v3_02ou_962a6210.png"),
            url("../img/invite/img_v3_02ou_0d7096a7.png"),
            url("../img/invite/img_v3_02ou_2cac0755.png");
    background-size: 100% 35%, 95% 70%, 97% 70%;
    background-position: top center, bottom 3vw center, bottom center;
    background-repeat: no-repeat;
    overflow: visible;
    position: relative;
}


/* 弹窗内容样式 */
.modal-content {
    width: 65vw;
    text-align: left;
    font-size: 4vw;
    line-height: 8vw; /* 文字行高保持不变 */

    /* 背景图高度 = 行高（8vw），确保与文字行高匹配 */
    background-size: 100% 8vw;
    background-image: url('../img/invite/img_v3_02ou_d67a4dcf.png');
    background-position: center top; /* 从内容区域顶部开始排列 */
    background-repeat: repeat-y;

    /* 核心调整：增大上下内边距，明确区分间距 */
    padding: 2vw 3vw; /* 上下内边距2vw（间距的核心来源），左右3vw */
    background-clip: content-box; /* 背景图仅在内容区显示（排除内边距） */
    background-origin: content-box; /* 背景图从内容区顶部开始定位 */


    display: inline-block;
    transform: translateY(-4vw);
    margin-left: auto;
    margin-right: auto;
}

/* 关闭按钮样式 */
.close-btn {
    position: absolute;
    top: 14%;
    right: -4%;
}


.close-btn img {
    width: 40%; /* 图片宽度 */
    height: 40%; /* 图片高度，与宽度一致保持比例 */
}

.tip {
    position: absolute;
    top: 20%;
    left: 1%;
}


.tip img {
    width: 60%; /* 图片宽度 */
    height: 60%; /* 图片高度，与宽度一致保持比例 */
}

/* 参与按钮样式 */
.modal-btn {
    display: block;
    width: 50%;
    height: 20%;
    margin: 0 auto 20px auto;
    border-radius: 4px;
}

.modal-btn:hover {
    background-color: #e0e0e0;
}

.download-btn-img {
    /* 根据需要调整宽度和高度 */
    width: 25vw;  /* 示例宽度 */
    height: 13vw;
}

.download-btn-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.download-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000000; /* 黑色文字 */
    font-size: 4.5vw; /* 明确字体大小（可调整） */
    z-index: 1; /* 确保文字在图片上方 */
    pointer-events: none; /* 避免文字遮挡点击事件 */
}