:root {
    --baseWidth: 375;
    --baseHeight: 832;
    --bottomHeight: 182;
    --base-max-width: 767px;
    --step1Top: 26;
    --guide1_2Top: 122;
    --leftPx: 25;
    --stepImgW: 0.8;
    --stepImgW2: 0.829;

    --topMargin1: 205;
    --topMargin2: 450;
    --topMargin3: 740;
}

/* 适配大屏手机（414px宽度，如iPhone 13 Pro Max） */
@media screen and (min-width: 414px) and (max-width: 767px) {
    :root {
        --baseWidth: 414;
        --baseHeight: 926;
        /* 414*1.97≈926 */
        --step1Top: 29;
        /* 26*(414/375)=28.848≈29 */
        --leftPx: 28;
        /* 25*(414/375)=27.6≈28 */
        --topMargin1: 226;
        /* 205*(414/375)=226.08≈226 */
        --topMargin2: 498;
        /* 450*(414/375)=496.8≈498 */
        --topMargin3: 818;
        /* 740*(414/375)=818.88≈818 */
    }
}


.content {
    background-image: url("../img/bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .content {
        background-size: contain;
        width: auto;
        aspect-ratio: 1/1.97;
    }
}

.index-div {
    display: none;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.index-div.active {
    display: flex;
}

.logo {
    height: calc((80/var(--baseHeight))*100%);
    object-fit: contain;
    display: flex;
    align-self: center;
    background-position: center;
}

.people {
    margin-top: calc((10/var(--baseHeight))*100%);
    width: 98%;
    overflow: hidden;
    object-fit: contain;
    margin-left: 2%;
    background-position: center;
}

.bottom-rect {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-direction: column;
}

.bottom-rect img {
    width: 70%;
    object-fit: contain;
    overflow: hidden;
}

.download-button {
    width: 80%;
    object-fit: contain;
    overflow: hidden;
    animation: breathe 1s infinite;
}

.iv-ogpa {
    width: 50%;
    object-fit: contain;
}


.backdrop {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    /* align-items: center; */
    height: 100%;
    width: 100%;
    background-image: url('../img/bg_2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-sizing: border-box;
}

.backdrop.active {
    display: flex;
}

.backdrop-first {
    margin-top: calc((15/var(--baseHeight))*100%);
    width: calc((191/var(--baseWidth))*100%);
    /* aspect-ratio: 191/43; */
    object-fit: cover;
    align-self: center;
}



.backdrop-second {
    width: 85%;
    object-fit: contain;
    margin-top: calc((36/var(--baseHeight))*100%);
}

.backdrop-tip {
    width: 100%;
    height: auto;
    bottom: 0;
    object-fit: cover;
    position: absolute;
}


.div_video {
    margin-top: calc((34/var(--baseHeight))*100%);
    /* aspect-ratio: 1/1; */
    position: relative;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    width: 100%;
}

.video {
    width: 100%;
    /* 视频容器宽度 */
    /* 最大宽度为 100% */
    height: auto;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); */
    /* 圆角 */
    overflow: hidden;
    /* 避免内容溢出 */
}

.alpha_cls {
    opacity: 0;
    /* transform: translateY(20px); */
    transition: opacity 0.5s, transform 0.5s;
}

/* 显示状态 */
.alpha_cls.show {
    opacity: 1;
    /* transform: translateY(0); */
}


@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

#icCancle {
    position: absolute;
    right: 0;
    top: 0;
    margin: 15px;
    width: 1.5rem;
    object-fit: contain;
}

.rectGuide {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    top: calc((var(--step1Top)/var(--baseHeight))*100%);
}

.stepImg1 {
    position: relative;
    width: calc(var(--stepImgW)*100%);
    object-fit: cover;
    aspect-ratio: 300/156;
    left: calc((var(--leftPx)/var(--baseWidth))*100%);
}

.stepImg2 {
    position: relative;
    width: calc(var(--stepImgW2)*100%);
    object-fit: cover;
    aspect-ratio: 311/126;
    left: calc((51/var(--baseWidth))*100%);
}

.stepImg3 {
    position: relative;
    width: calc(var(--stepImgW)*100%);
    object-fit: cover;
    aspect-ratio: 300/156;
    left: calc((25/var(--baseWidth))*100%);
}

#guide1_2 {
    position: absolute;
    z-index: 10;
    width: calc((51/var(--baseWidth))*100%);
    aspect-ratio: 51/86;
    object-fit: contain;
    top: calc((205/var(--baseHeight))*100%);
    left: calc((25/var(--baseWidth))*100%);
    /* 新增：强制高度（避免aspect-ratio适配偏差） */
    /* height: calc((86/var(--baseHeight))*100%); */
}

#guide2_3 {
    position: absolute;
    z-index: 11;
    width: calc((51/var(--baseWidth))*100%);
    aspect-ratio: 51/86;
    object-fit: contain;
    margin-top: calc((186/var(--baseHeight))*100%);
    /* top: calc(((205 + 86 + 40)/var(--baseHeight))*100%); */
    /* top: calc(460/var(--baseHeight)*100%); */
    right: calc((24/var(--baseWidth))*100%);
    /* height: calc((86/var(--baseHeight))*100%); */
}

#img_figer {
    position: absolute;
    opacity: 0;
}

#img_figer.show {
    opacity: 1;
}

#img_figer.hide {
    opacity: 1;
}

.figer {
    position: absolute;
    height: calc((99/var(--baseHeight))*100%);
    object-fit: cover;
    z-index: 11;
    animation: swing 0.6s infinite;
}

.figerPos0 {
    top: calc((var(--topMargin1)/var(--baseHeight))*100%);
    right: calc((30/var(--baseWidth))*100%);
}

.figerPos1 {
    /* top: 0; */
    top: calc((var(--topMargin2)/var(--baseHeight))*100%);
    right: calc((3/var(--baseWidth))*100%);
    ;
}

.figerPos2 {
    top: calc((var(--topMargin3)/var(--baseHeight))*100%);
    right: calc((45/var(--baseWidth))*100%);
}



@keyframes swing {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

.divBottom {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 5px;
    background-color: #27144B;
}

.btmItem {
    position: relative;
    width: 80%;
    object-fit: contain;
}

.btmItem1 {
    position: relative;
    width: 60%;
    object-fit: contain;
}