/* 设置根元素字体大小，基于屏幕宽度 */
html {
    font-size: calc(100vw / 375 * 10); /* 以375px宽度为基准，10px = 1rem */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    overflow: hidden;
    height: 100vh;
    background-color: #ff6b36;
}


/* 新增左上角图片容器样式 - 使用rem单位 */
.top-left-image {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    padding-top: 3rem;
    padding-left: 2rem;
    max-width: 40%;
    height: auto;
}

.top-left-image img {
    width: 100%;
    height: auto;
    max-width: 3.7rem; /* 相当于37px，适合小屏幕 */
}

/* 右上角图片容器 - 使用rem单位 */
.top-right-corner-image {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    padding-top: 3.5rem;
    padding-right: 2rem;
    max-width: 60%;
    height: auto;
}

.top-right-corner-image img {
    width: 100%;
    height: auto; 
}

/* 底部居中图片容器 - 使用rem单位 */
.bottom-center-image {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width:100%;
    padding-bottom: 8.5rem;
    text-align: center;
}

.bottom-center-image img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 4rem; /* 相当于40px，适合小屏幕 */
}

/* 手势图片动画效果 */
.bottom-hand-image {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    animation: rotateSlide 2s infinite ease-in-out;
}

.bottom-hand-image img {
    width: 3rem;
    height: auto;
}

@keyframes rotateSlide {
    0% {
        transform: translateX(-50%) rotate(0deg) translateY(0);
        opacity: 0.8;
    }
    50% {
        transform: translateX(-50%) rotate(90deg) translateY(-1rem);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) rotate(0deg) translateY(0);
        opacity: 0.8;
    }
}

/* 大屏幕设备调整 */
@media (min-width: 768px) {
/* 调整大屏幕上手势图片大小 */
.bottom-hand-image img {
    width: 4rem;
}
}

/* 大屏幕设备调整 */
@media (min-width: 768px) {
html {
    font-size: calc(100vw / 768 * 15); /* 大屏幕增加基准字体大小 */
}

.top-right-image img {
    max-width: 5rem; /* 大屏幕上稍微大一点 */
}

.top-left-image img {
    max-width: 5rem; /* 大屏幕上稍微大一点 */
}

.top-right-corner-image img {
    max-width: 5rem; /* 大屏幕上稍微大一点 */
}

.bottom-center-image img {
    max-height: 6rem; /* 大屏幕上增大尺寸 */
}
}

/* Swiper基础样式 */
.swiper-container {
width: 100%;
height: 100vh;
}
.swiper-slide {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#page1 {
background-color: #ff6b36;
}
#page2 {
background-color: #2e97ff;
}

#page3 {
    background-color:#FC671A;
}

#page4 {
    background-color:#2E97FF;
}

#page5 {
    background-color:#2E97FF;
}

#page6 {
    background-color:#FFFFFF;
}

#page7 {
    background-color:#FFFFFF;
}

#page8 {
    background-color:#6A2C3F;
}
#page9 {
    background-color:#FFFFFF;
}
#page10 {
    background-color:#FFFFFF;
}
#page11 {
    background-color:#6A2C3F;
}
#page12 {
    background-color:#FFFFFF;
}

.page-content {
text-align: center;
}

.swiper-slide:nth-child(1) {
    position: relative;
}

.swiper-slide:nth-child(1) img {
    position: absolute;
}

.swiper-slide:nth-child(1) .p1_1 {
    width: 100vw;
    height: auto;    
    top: 57.777vw;
    left: 0rem;   
    z-index: 1;
}

.swiper-slide:nth-child(1) .p1_2 {
    width: 8.241vw;
    height: auto;    
    top: 8.148vw;
    left: 5.185vw;
    z-index: 2;
}

.swiper-slide:nth-child(1) .p1_3 {
    width: 75.555vw;
    height: auto;    
    top: 26.667vw;
    left: 12.2225vw;
    z-index: 2;
}

.swiper-slide:nth-child(1) .p1_4 {
    width: 29.352vw;
    height: auto;    
    top: 11.111vw;
    left: 35.555vw;
    z-index: 2;
}

.swiper-slide:nth-child(1) .p1_5 {
    width: 44.259vw;
    height: auto;    
    top: 155.926vw;
    left: 27.8705vw;
    z-index: 2;
}

.swiper-slide:nth-child(2) {
    position: relative;
}

.swiper-slide:nth-child(2) img {
    position: absolute;
}

.swiper-slide:nth-child(2) .p2_1 {
    width: 100vw;
    height: auto;    
    top: 57.777vw;
    left: 0rem;   
    z-index: 1;
}

.swiper-slide:nth-child(2) .p2_2 {
    width: 8.241vw;
    height: auto;    
    top: 8.148vw;
    left: 5.185vw;
    z-index: 2;
}

.swiper-slide:nth-child(2) .p2_3 {
    width: 75.555vw;
    height: auto;    
    top: 26.667vw;
    left: 12.2225vw;
    z-index: 2;
}

.swiper-slide:nth-child(2) .p2_4 {
    width: 29.352vw;
    height: auto;    
    top: 11.111vw;
    left: 35.555vw;
    z-index: 2;
}

.swiper-slide:nth-child(2) .p2_5 {
    width: 44.259vw;
    height: auto;    
    top: 155.926vw;
    left: 27.8705vw;
    z-index: 2;
}


/* 第3页图片样式 */
.swiper-slide:nth-child(3) {
    position: relative;
}

.swiper-slide:nth-child(3) img {
    position: absolute;
}

/* 顶部图片 - 左侧滑入动画 */
.swiper-slide:nth-child(3) .p3_1 {
    max-width: 100%;
    height: auto;    
    top: 72.222vw;
    left: 0rem; 
    opacity: 0;  
    z-index: 1;
}

/* 中心图片 */
.swiper-slide:nth-child(3) .p3_2 {
    max-width: 100%;
    height: auto;    
    top: 46.148vw;
    left: -100%;
    z-index: 2;
}

/* 右侧标签 */
.swiper-slide:nth-child(3) .p3_3 {
    width: 44.26vw;
    height: auto;    
    top: 53.555vw;
    right: -44.26vw;
    z-index: 3;
}

/* 文字图片 */
.swiper-slide:nth-child(3) .p3_4 {
    width: 96.67vw;
    height: auto;     
    top: 127.259vw;
    left: 1.665vw;
    opacity: 0;
    z-index: 4;
}
/* 修复并完善的小变大动画 */
@keyframes makebigclass {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 应用动画的类 */
.makebigclass {
    animation: makebigclass 0.5s ease-out forwards;
}

/* 放大两倍后缩小为原来大小的动画 */
@keyframes zoomoutin {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}

/* 应用放大缩小动画的类 */
.zoomoutinclass {
    animation: zoomoutin 1s ease-out forwards;
}

/* 底部图片 */
.swiper-slide:nth-child(3) .p3_5 {
    max-width: 100%;
    height: auto; 
    top: 72.222vw;   
    /*top: 144.67vw;*/
    left: 0rem;
    opacity: 0;
    z-index: 1;
}

/* 第3页图片样式 */
.swiper-slide:nth-child(4) {
    position: relative;
}

.swiper-slide:nth-child(4) img {
    position: absolute;
}

.swiper-slide:nth-child(4) .p4_7 {
    width: 100vw;
    height: auto;     
    top: 0vw;
    left: 0vw;
    z-index: 1;
}

.swiper-slide:nth-child(4) .p4_1 {
    width: 25.648vw;
    height: auto;     
    top: 5.185vw;
    left: 4.444vw;
    z-index: 2;
}

.swiper-slide:nth-child(4) .p4_2 {
    width: 75.555vw;
    height: auto;     
    top: 32.407vw;
    left: 11.296vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(4) .p4_3 {
    width: 55.833vw;
    height: auto;     
    top: 51.667vw;
    left: 20.185vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(4) .p4_4 {
    width: 8.241vw;
    height: auto;     
    top: 7.407vw;
    right: 16.111vw;
    z-index: 2;
}

.swiper-slide:nth-child(4) .p4_5 {
    width: 29.629vw;
    height: auto;     
    top: 8.796vw;
    right: 28.889vw;
    z-index: 2;
}

.swiper-slide:nth-child(4) .p4_6 {
    width: 81.944vw;
    height: auto;     
    top: 68.704vw;
    left: -81.944vw;
    z-index: 2;
}

.swiper-slide:nth-child(4) .p4_8 {
    width: 41.759vw;
    height: auto;     
    top: 158.888vw;
    left: 51.852vw;
    display: none;
    z-index: 3;
}

/* 第3页图片样式 */
.swiper-slide:nth-child(5) {
    position: relative;
}

.swiper-slide:nth-child(5) img {
    position: absolute;
}

.swiper-slide:nth-child(5) .p5_3 {
    width: 100vw;
    height: auto;     
    top: 0vw;
    left: 0vw;
    z-index: 1;
}

.swiper-slide:nth-child(5) .p5_1 {
    width: 86.111vw;
    height: auto;     
    top: 52.963vw;
    left: -86.111vw;
    z-index: 2;
}

.swiper-slide:nth-child(5) .p5_2 {
    width: 91.667vw;
    height: auto;     
    top: 158.148vw;
    left: 4.1665vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(6) {
    position: relative;
}

.swiper-slide:nth-child(6) img {
    position: absolute;
}

.swiper-slide:nth-child(6) .p6_8 {
    width: 100vw;
    height: auto;     
    top: 0vw;
    left: 0vw;
    z-index: 1;
}

.swiper-slide:nth-child(6) .p6_1 {
    width: 25.648vw;
    height: auto;     
    top: 5.185vw;
    left: 4.629vw;
    z-index: 2;
}

.swiper-slide:nth-child(6) .p6_2 {
    width: 87.5vw;
    height: auto;     
    top: 33.703vw;
    left: 6.25vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(6) .p6_3 {
    width: 63.611vw;
    height: auto;     
    top: 50.555vw;
    left: 18.1945vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(6) .p6_4 {
    width: 8.241vw;
    height: auto;     
    top: 7.407vw;
    right: 16.111vw;
    z-index: 2;
}

.swiper-slide:nth-child(6) .p6_5 {
    width: 29.629vw;
    height: auto;     
    top: 8.796vw;
    right: 28.889vw;
    z-index: 2;
}

.swiper-slide:nth-child(6) .p6_6 {
    width: 84.722vw;
    height: auto;     
    top: 68.703vw;
    left: -84.722vw;
    z-index: 2;
}

.swiper-slide:nth-child(6) .p6_7 {
    width: 41.759vw;
    height: auto;     
    top: 158.889vw;
    right: 5.925vw;
    opacity: 0;
    z-index: 3;
}

.swiper-slide:nth-child(7) {
    position: relative;
}

.swiper-slide:nth-child(7) img {
    position: absolute;
}

.swiper-slide:nth-child(7) .p7_3 {
    width: 100vw;
    height: auto;     
    top: 0vw;
    left: 0vw;
    z-index: 1;
}

.swiper-slide:nth-child(7) .p7_1 {
    width: 91.667vw;
    height: auto;     
    top: 157.778vw;
    left: 4.1665vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(7) .p7_2 {
    width: 85vw;
    height: auto;     
    top: 54.444vw;
    left: -85vw;    
    z-index: 2;
}

.swiper-slide:nth-child(8) {
    position: relative;
}

.swiper-slide:nth-child(8) img {
    position: absolute;
}

.swiper-slide:nth-child(8) .p8_1 {
    width: 83.981vw;
    height: auto;     
    top: 157.037vw;
    left: 8.0095vw;
    z-index: 2;
}

.swiper-slide:nth-child(8) .p8_2 {
    width: 25.648vw;
    height: auto;     
    top: 5.185vw;
    left: 4.815vw;
    z-index: 2;
}

.swiper-slide:nth-child(8) .p8_3 {
    width: 64.629vw;
    height: auto;     
    top: 147.407vw;
    left: 17.6855vw;
    z-index: 2;
}

.swiper-slide:nth-child(8) .p8_4 {
    width: 86.204vw;
    height: auto;     
    top: 24.444vw;
    left: 6.898vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(8) .p8_5 {
    width: 8.241vw;
    height: auto;     
    top: 7.407vw;
    right: 16.111vw;
    z-index: 2;
}

.swiper-slide:nth-child(8) .p8_6 {
    width: 29.629vw;
    height: auto;     
    top: 8.796vw;
    right: 28.889vw;
    z-index: 2;
}

.swiper-slide:nth-child(8) .p8_7 {
    width: 45.833vw;
    height: auto;     
    top: 42.222vw;
    right: -45.833vw;
    z-index: 2;
}

.swiper-slide:nth-child(8) .p8_8 {
    width: 49.537vw;
    height: auto;     
    top: 76.667vw;
    right: -49.537vw;
    z-index: 3;    
}

.swiper-slide:nth-child(8) .p8_8b {
    width: 45.833vw;
    height: auto;     
    top: 111.111vw;
    right: -45.833vw;
    z-index: 2;
}

.swiper-slide:nth-child(8) .p8_9 {
    width: 45.833vw;
    height: auto;     
    top: 42.592vw;
    left: -45.833vw;
    z-index: 2;
}

.swiper-slide:nth-child(8) .p8_10 {
    width: 45.833vw;
    height: auto;     
    top: 93.704vw;
    left: -45.833vw;
    z-index: 2;
}

.swiper-slide:nth-child(9) {
    position: relative;
}

.swiper-slide:nth-child(9) img {
    position: absolute;
}

.swiper-slide:nth-child(9) .p9_5 {
    width: 100vw;
    height: auto;     
    top: 0vw;
    left: 0vw;
    z-index: 1;
}

.swiper-slide:nth-child(9) .p9_1 {
    width: 25.648vw;
    height: auto;     
    top: 5.555vw;
    left: 5.092vw;
    z-index: 2;
}

.swiper-slide:nth-child(9) .p9_2 {
    width: 20.555vw;
    height: auto;     
    top: 132.222vw;
    right: 2.963vw;
    z-index: 2;
}

.swiper-slide:nth-child(9) .p9_3 {
    width: 18.981vw;
    height: auto;     
    top: 132.222vw;
    left: 4.444vw;
    z-index: 2;
}

.swiper-slide:nth-child(9) .p9_4 {
    width: 8.241vw;
    height: auto;     
    top: 7.778vw;
    right: 16.111vw;
    z-index: 2;
}

.swiper-slide:nth-child(9) .p9_6 {
    width: 29.629vw;
    height: auto;     
    top: 8.518vw;
    right: 28.889vw;
    z-index: 2;
}

.swiper-slide:nth-child(9) .p9_7 {
    width: 87.778vw;
    height: auto;     
    top: 28.518vw;
    left: 6.111vw;
    opacity: 0;
    z-index: 3;
}

.swiper-slide:nth-child(9) .p9_8 {
    width: 81.852vw;
    height: auto;     
    top: 50.740vw;
    left: -81.852vw;
    z-index: 3;
}

.swiper-slide:nth-child(9) .p9_8b {
    width: 67.037vw;
    height: auto;     
    top: 61.851vw;
    right: -67.037vw;
    z-index: 4;
}

.swiper-slide:nth-child(9) .p9_8c {
    width: 100vw;
    height: auto;     
    top: 57.037vw;
    left: 0vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(9) .p9_8d {
    width: 74.629vw;
    height: auto;     
    top: 54.444vw;
    left: 12.592vw;
    display: none;
    z-index: 9;
}

.swiper-slide:nth-child(9) .p9_9 {
    width: 33.333vw;
    height: auto;     
    top: 110.370vw;
    right: 29.259vw;
    display: none;
    z-index: 10;
}

.swiper-slide:nth-child(9) .p9_10 {
    width: 38.889vw;
    height: auto;     
    top: 95.926vw;
    left: 7.407vw;
    display: none;
    z-index: 10;
}

.swiper-slide:nth-child(10) {
    position: relative;
}

.swiper-slide:nth-child(10) img {
    position: absolute;
}

.swiper-slide:nth-child(10) .p10_4 {
    width: 100vw;
    height: auto;     
    top: 0vw;
    left: 0vw;
    z-index: 1;
}

.swiper-slide:nth-child(10) .p10_1 {
    width: 25.648vw;
    height: auto;     
    top: 5.185vw;
    left: 4.815vw;
    z-index: 2;
}

.swiper-slide:nth-child(10) .p10_2 {
    width: 18.981vw;
    height: auto;     
    top: 132.592vw;
    left: 4.481vw;
    z-index: 2;
}

.swiper-slide:nth-child(10) .p10_3 {
    width: 8.241vw;
    height: auto;     
    top: 7.778vw;
    right: 16.111vw;
    z-index: 2;
}

.swiper-slide:nth-child(10) .p10_5 {
    width: 29.629vw;
    height: auto;     
    top: 8.796vw;
    right: 28.889vw;
    z-index: 2;
}

.swiper-slide:nth-child(10) .p10_6 {
    width: 87.778vw;
    height: auto;     
    top: 28.148vw;
    left: 6.111vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(10) .p10_7 {
    width: 20.555vw;
    height: auto;     
    top: 132.222vw;
    right: 3.704vw;
    z-index: 2;
}

.swiper-slide:nth-child(10) .p10_8 {
    width: 81.852vw;
    height: auto;     
    top: 50.741vw;
    left: -81.852vw;
    z-index: 3;
}

.swiper-slide:nth-child(10) .p10_8b {
    width: 67.037vw;
    height: auto;     
    top: 65.555vw;
    right: -67.037vw;
    z-index: 4;
}

.swiper-slide:nth-child(10) .p10_8c {
    width: 100vw;
    height: auto;     
    top: 57.037vw;
    left: 0vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(10) .p10_8d {
    width: 74.629vw;
    height: auto;     
    top: 54.444vw;
    left: 13.333vw;
    display: none;
    z-index: 9;
}

.swiper-slide:nth-child(10) .p10_9 {
    width: 42.685vw;
    height: auto;     
    top: 98.518vw;
    left: 5.185vw;
    display: none;
    z-index: 10;
}

.swiper-slide:nth-child(10) .p10_10 {
    width: 35.926vw;
    height: auto;     
    top: 104.815vw;
    right: 5.926vw;
    display: none;
    z-index: 10;
}

.swiper-slide:nth-child(11) {
    position: relative;
}

.swiper-slide:nth-child(11) img {
    position: absolute;
}

.swiper-slide:nth-child(11) .p11_1 {
    width: 25.648vw;
    height: auto;     
    top: 5.185vw;
    left: 4.444vw;
    z-index: 2;
}

.swiper-slide:nth-child(11) .p11_2 {
    width: 56.481vw;
    height: auto;     
    top: 23.704vw;
    left: 21.7595vw;
    opacity: 0;
    z-index: 2;
}

.swiper-slide:nth-child(11) .p11_3 {
    width: 8.241vw;
    height: auto;     
    top: 7.407vw;
    right: 16.111vw;
    z-index: 2;
}

.swiper-slide:nth-child(11) .p11_4 {
    width: 29.629vw;
    height: auto;     
    top: 8.889vw;
    right: 28.889vw;
    z-index: 2;
}

.swiper-slide:nth-child(11) .p11_5 {
    width: 90.741vw;
    height: auto;     
    top: 57.778vw;
    right: -90.741vw;
    z-index: 2;
}

.swiper-slide:nth-child(11) .p11_6 {
    width: 90.741vw;
    height: auto;     
    top: 82.222vw;
    left: -90.741vw;
    z-index: 2;
}

.swiper-slide:nth-child(11) .p11_7 {
    width: 90.741vw;
    height: auto;     
    top: 103.704vw;
    right: -90.741vw;
    z-index: 2;
}

.swiper-slide:nth-child(11) .p11_8 {
    width: 90.741vw;
    height: auto;     
    top: 128.518vw;
    left: -90.741vw;
    z-index: 2;
}

.swiper-slide:nth-child(11) .p11_9 {
    width: 90.741vw;
    height: auto;     
    top: 149.629vw;
    right: -90.741vw;
    z-index: 2;
}

.swiper-slide:nth-child(11) .p11_10 {
    width: 90.741vw;
    height: auto;     
    top: 36.667vw;
    left: -90.741vw;
    z-index: 2;
}

.swiper-slide:nth-child(12) {
    position: relative;
}

.swiper-slide:nth-child(12) img {
    position: absolute;
}

.swiper-slide:nth-child(12) .p12_12 {
    width: 100vw;
    height: auto;     
    top: 0vw;
    left: 0vw;
    z-index: 1;
}

.swiper-slide:nth-child(12) .p12_1 {
    width: 100vw;
    height: auto;     
    top: 0vw;
    left: 0vw;
    display: none;
    z-index: 2;
}

.swiper-slide:nth-child(12) .p12_2 {
    width: 25.648vw;
    height: auto;     
    top: 5.185vw;
    left: 5.555vw;
    z-index: 2;
}

.swiper-slide:nth-child(12) .p12_3 {
    width: 21.389vw;
    height: auto;     
    top: 154.815vw;
    left: 5.185vw;
    z-index: 2;
}

.swiper-slide:nth-child(12) .p12_4 {
    width: 27.129vw;
    height: auto;     
    top: 163.333vw;
    left: 12.963vw;
    z-index: 2;
}

.swiper-slide:nth-child(12) .p12_5 {
    width: 8.241vw;
    height: auto;     
    top: 7.776vw;
    right: 16.111vw;
    z-index: 2;
}

.swiper-slide:nth-child(12) .p12_6 {
    width: 10.463vw;
    height: auto;     
    top: 7.776vw;
    left: 5.555vw;
    display: none;
    z-index: 2;
}

.swiper-slide:nth-child(12) .p12_7 {
    width: 5.555vw;
    height: auto;     
    top: 162.222vw;
    left: 4.815vw;
    z-index: 2;
}

.swiper-slide:nth-child(12) .p12_8 {
    width: 45.926vw;
    height: auto;     
    top: 170.741vw;
    left: 4.815vw;
    z-index: 2;
}

.swiper-slide:nth-child(12) .p12_9 {
    width: 83.148vw;
    height: auto;     
    top: 28.518vw;
    left: 10vw;
    opacity: 0;
    z-index: 3;
}

.swiper-slide:nth-child(12) .p12_10 {
    width: 17.592vw;
    height: auto;     
    top: 156.296vw;
    right: 4.444vw;
    z-index: 3;
}

.swiper-slide:nth-child(12) .p12_11 {
    width: 90.741vw;
    height: auto;     
    top: 60.741vw;
    left: 4.6295vw;
    opacity: 0;
    z-index: 3;
}


.animation-container {
width: 100%;
min-height: 20rem;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

/* 响应式设计 - 小屏幕手机 */
@media (max-width: 375px) {
h1 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
}

p {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

.animation-container {
    max-width: 25rem;
    height: 16rem;
    margin: 1.5rem 0;
}

.btn {
    padding: 1rem 2.5rem;
    font-size: 1.4rem;
}
}

/* 响应式设计 - 大屏幕手机和小平板 */
@media (min-width: 768px) {
h1 {
    font-size: 3.2rem;
}

p {
    font-size: 1.8rem;
}

.animation-container {
    max-width: 40rem;
    height: 26rem;
}
}

.animation-container img {
max-width: 100%;
max-height: 100%;
}

.btn {
padding: 1.2rem 3rem;
font-size: 1.6rem;
background-color: #ff6b6b;
color: white;
border: none;
border-radius: 2.5rem;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn:hover {
background-color: #ff5252;
}

/* Swiper分页器样式 */
.swiper-pagination-bullet {
width: 0.8rem;
height: 0.8rem;
background-color: #ddd;
opacity: 1;
}

.swiper-pagination-bullet-active {
background-color: #ff6b6b;
width: 2rem;
border-radius: 0.4rem;
}

.swipe-hint {
position: fixed;
bottom: 10rem;
left: 0;
width: 100%;
text-align: center;
font-size: 1.4rem;
color: #999;
animation: bounce 2s infinite;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
}
40% {
    transform: translateY(-1rem);
}
60% {
    transform: translateY(-0.5rem);
}
}