.wrap img{
    width: auto;
    height: auto;
}
.swiper{
    width: 100%;
    height: 100vh;
   
    background: url(https://cbgccdn.thecover.cn/@/images/20240121/1705839763578047469.jpg) center center no-repeat;
    background-size: 100% 100%;
}
.swiper .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page{
    width: 100%;
    height: 100%;
}
.page.page-0{
     background: url(https://cbgccdn.thecover.cn/@/images/20240121/1705837711799029914.jpg) center center no-repeat;
    background-size: 100% 100%;
}
.page:not(.page-0){
    background: url(https://cbgccdn.thecover.cn/@/images/20240121/1705839651525091799.png) right 50% no-repeat;
    background-size: 12%;
}

#video{
    width: 100%;
}
img.page-0-title{
    display: block;
    margin: 10% auto;
    width: 80%;
}

img.page-0-main{
    display: block;
    margin: 10% auto; 
    width: 70%;
}

@keyframes arrow {
    50%{
        transform: translateY(10px);
    }
}
img.arrow{
    position: absolute;
    left: 46%;
    width: 8%;
    bottom: 3%;
    display: block;
    margin:  0 auto;
    animation: arrow 1.5s linear infinite;
}   
img.arrow.small{
    position: absolute;
    left: 46%;
    width: 8%;
    bottom: 3%;
    display: block;
    margin:  0 auto;
    animation: arrow 1.5s linear infinite;
}   


.page-1 .page-word{
    width: 80%;
    display: block;
    margin: 10vw auto;
}

.page-1 .acc.acc-1{
    position: absolute;
    bottom: 0;
    width: 100%;
}



.page:not(.page-1,.page.page-0){
    padding: 5%;
    box-sizing: border-box;
}
img.page-title{
    display: block;
    width: 90%;
    margin-bottom: 5%;
}
img.page-word{
    position: relative;
    display: block;
    width: 90%;
    z-index: 10;
}

.page.page-21 .acc{
    width: 60%;
    position: absolute;
    bottom: 10%;
    left: 20%;
    z-index: 0;
}

.page.page-22 .acc{
    width: 30%;
    position: absolute;
    right: 5%;
    bottom: 5%;
}

.page.page-23 .acc{
    width: 60%;
    position: absolute;
    right: 20%;
    bottom: 10%;
}
.page.page-24 .acc{
    width: 40%;
    position: absolute;
    right: 10%;
    bottom: 5%;
}
.page.page-25 .acc{
    width: 40%;
    position: absolute;
    right: 5%;
    bottom: 5%;
}
.page.page-26 .acc{
    width: 40%;
    position: absolute;
    right: 5%;
    bottom: 5%;
}
.page.page-27 .acc{
    width: 50%;
    position: absolute;
    left: 25%;
    bottom: 18%;
}

.page.page-28{
    padding: 30% 5% 0!important;
}
.page.page-28 .acc{
    width: 100%;
    margin-top: 5%;
}



.page .page-title{
    opacity: 0;
    transform: translateY(10px);
}
.page .page-word{
    opacity: 0;
    transform: translateY(10px);
}

.page .acc{
    opacity: 0;
    transform: translateY(10px);
}

.page .page-title,.page .page-word,.page .acc{
    transition: all linear .6s;
}

.page .page-title.in,.page .page-word.in,.page .acc.in{
    opacity: 1;
    transform: translateY(0);
}