.index-content-1 {
    width: 100%;
    display: inline-block;
    margin-top: 44px;
    position: relative;
}

.index-content-1-bgimg {
    width: 100%;
    height: auto;
    display: block;
}

.index-content-1-text {
    position: absolute;
    /* 设置为绝对定位，相对于 .background-container 定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.index-bg1-logo {
    width: 100%;
    text-align: center;

}


.index-bg1-logo img {
    width: 60%;
}


.index-bg1-logo2 {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.index-bg1-logo2 img {
    width: 60%;
}


.index-title {
    width: 302px;
    text-align: center;
    line-height: 23px;
    font-size: 13px;
    color: #FEFEFE;
    margin: 0 auto;
    margin-top: 10px;
    /* position: absolute;
    left: 50%;
    bottom: 143px;
    transform: translateX(-50%); */
}

.join-us {
    margin-top: 20px;
    text-align: center;
    padding: 10px 0;
}

.join-us-btn {
    width: 104px;
    margin: 0 auto;
    /* position: absolute;
    left: 50%;
    top: 335px;
    transform: translateX(-50%); */
}

/* .num-item:nth-of-type(2n){
    margin-right: 0px;
}
.num-item>span:nth-of-type(1) {
    font-weight: bold;
    font-size: 22px;
    color: #000000;
    margin-bottom: 6px;
    text-decoration-style: none;
    text-decoration-line: none;
    pointer-events: none;
}

.num-item>span:nth-of-type(2) {
    font-size: 12px;
    color: #595765;
} */



/* 第二个 */

.index-content-2 {
    width: 100%;
    display: inline-block;
    position: relative;
}

.index-content-2-bgimg {
    width: 100%;
    height: auto;
    display: block;
}

.index-content-2-wrap {
    position: absolute;
    /* 设置为绝对定位，相对于 .background-container 定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}



.nums-wrap {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -40px;
    z-index: 13;
}

.num-item-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.num-item {
    width: 160px;
    height: 74px;
    margin-bottom: 16px;
    font-family: dinBold;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(29.5px);
    backdrop-filter: blur(29.5px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.intro-content {
    padding: 5px 20px 0;
}

.title {
    display: flex;
    align-items: baseline;
}

.title-text {
    font-weight: bold;
    font-size: 22px;
    color: #FD2B54;
}

.title-text:nth-of-type(2) {
    color: #100D24;
    margin: 0 8px;


}

.line {
    width: 26px;
    height: 4px;
    background: #100D24;
}

.intro-text {
    font-weight: 400;
    font-size: 15px;
    color: #4C4864;
    color: #4C4864;
    line-height: 22px;
    margin-top: 5px;
}

/* --------------------------index-content-3 */
.index-content-3 {
    width: 100%;
    height: 472px;
    background: url(../image/index-bg-3.png) no-repeat;
    background-size: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 20px;
}

.form-index-input {
    margin-top: -14px;
}

.swiper-title {
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
    margin: 32px 0 52px;
}

.swiper-wrap {
    width: 335px;
    position: relative;
    z-index: 111;
}

.swiper-item {
    width: 187px;
    height: 262px;
    border-radius: 15px;
    position: relative;
    display: none;
}

.swiper-item-hide {
    animation: swiper-hide 1s;
}

@keyframes swiper-hide {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;

    }
}

.swiper-img {
    width: 187px;
    height: 262px;
    border-radius: 18px;
    position: absolute;
    animation: swiper-img-animate 1.5s;
}



.top-img {
    width: 117px;
    position: absolute;
    top: -30px;
    right: -66px;
    z-index: 99;
    animation: top-img-animate 1s;
}

@keyframes top-img-animate {
    0% {

        transform: scale(0);
    }

    100% {

        transform: scale(1);

    }
}

.swiper-item .bottom-img {
    position: absolute;
    z-index: 99;
    animation: top-img-animate 1s;
}

.swiper-item:nth-of-type(1) .bottom-img {
    width: 47px;
    height: 51px;
    bottom: -25px;
    left: -19px;
}

.swiper-item:nth-of-type(2) .bottom-img {
    width: 57px;
    height: 64px;
    bottom: -32px;
    left: -19px;
}

.swiper-item:nth-of-type(3) .bottom-img {
    width: 70px;
    height: 84px;
    bottom: -32px;
    left: -19px;
}

.swiper-item:nth-of-type(4) .bottom-img {
    width: 77px;
    height: 100px;
    bottom: -49px;
    left: -19px;
}

.swiper-item:nth-of-type(5) .bottom-img {
    width: 75px;
    height: 109px;
    bottom: -36px;
    left: -19px;
}

.swiper-content {
    width: 220px;
    height: 300px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 13px 46px 0px #9CCAFF;
    border-radius: 16px;
    border: 2px solid #FFFFFF;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    animation: swiper-img-animate 1.5s;
}

.content-title {
    width: 73px;
    font-weight: 600;
    font-size: 18px;
    margin-top: 92px;
    margin-right: 60px;
    margin-bottom: 26px;
    position: relative;
    animation: swiper-img-animate 1.5s;
}

.content-title::after {
    content: "";
    width: 67px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 10px;
    background: url(../image/title-bg.png) no-repeat;
    background-size: 100% 100%;
    z-index: -1;
}

.content-text {
    width: 10em;
    height: 100%;
    margin-right: 10px;
    font-size: 12px;
    color: #100D24;
    line-height: 20px;
    background: url(../image/swiper-text-bg.png) no-repeat left top;
    background-size: 80px;
}

.dot-wrap {
    position: absolute;
    left: 50%;
    bottom: -50px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.dot-wrap>div {
    width: 8px;
    height: 8px;
    background: #FFFFFF;
    border-radius: 50%;
    margin: 0 4px;
}

.dot-wrap>.active {
    width: 13px;
    background: #FD2B54;
    border-radius: 46px;

}

@keyframes swiper-img-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;

    }
}

/* --------------------------*/