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

body {
    font-family: sans-serif;
    overflow-x: hidden;
    height: 100vh;
    scroll-behavior: smooth;
}

/* 防止滚动的类 */
body.no-scroll {
    overflow: hidden;
}

/* 固定背景层 - 粉色，在最底层 */
.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/beijing.jpg);
    z-index: -1; /* 确保在最底层 */
}

/* 滚动容器 */
.scroll-container {
    width: 100%;
    height: 200vh;
    position: relative;
}

/* 单个页面 */
.page {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 1.0417vw; /* 20px → 1.0417vw */
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    overflow: hidden;
}

/* 第一个页面 */
.page-1 {
    transform: translateY(0);
    z-index: 2;
}

/* 第二个页面 */
.page-2 {
    transform: translateY(100vh);
    z-index: 1;
}

/* 滚动时的页面变换 */
.scrolled .page-1 {
    transform: translateY(-100vh);
}

.scrolled .page-2 {
    transform: translateY(0);
}

/* 网页内容区域 */
.webpage-frame {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* 红色盒子 */
.red-box {
    position: absolute;
    background-color: #e74c3c;
    border-radius: 0.3125vw; /* 6px → 0.3125vw */
    z-index: 1;
}

/* 蓝色盒子 */
.blue-box {
    position: absolute;
    background-color: #3498db;
    border-radius: 0.3125vw; /* 6px → 0.3125vw */
    z-index: 2;
}

/* 黑色小盒子 */
.small-box {
    position: absolute;
    background-color: #333;
    border-radius: 0.2083vw; /* 4px → 0.2083vw */
}

/* 页面1的盒子布局 */
.page-1 .red-box {
    width: 16.6667vw; /* 320px → 16.6667vw */
    height: 15.625vw; /* 300px → 15.625vw */
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
}

.page-1 .blue-box {
    width: 14.5833vw; /* 280px → 14.5833vw */
    height: 13.0208vw; /* 250px → 13.0208vw */
    left: 25%;
    top: 50%;
    transform: translateY(-50%);
    animation: pulse-1 4s infinite ease-in-out;
}

/* 页面1的黑色小盒子 */
.page-1 .small-box:nth-child(1) {
    width: 6.25vw ; /* 120px → 6.25vw */
    height: 5.2083vw; /* 100px → 5.2083vw */
    top: 2%;
    left: 0%;
    background: url(../img/12.jpg) no-repeat center;
    background-size: cover;
}

.page-1 .small-box:nth-child(2) {
    width: 18.125vw !important; /* 348px → 18.125vw */
    height: 8.4896vw !important; /* 163px → 8.4896vw */
    top: 72%;
    right: -0.0521vw; /* -1px → -0.0521vw */
    background: url(../img/2.png) no-repeat center;
    background-size: cover;
}

.page-1 .small-box:nth-child(3) {
    width: 19.2188vw !important; /* 369px → 19.2188vw */
    height: 5.4688vw !important; /* 105px → 5.4688vw */
    bottom: 86%;
    left: 19%;
    background: url(../img/1.png) no-repeat center;
    background-size: contain;
}

.page-1 .small-box:nth-child(4) {
    width: 13.0208vw !important; /* 250px → 13.0208vw */
    height: 2.3438vw !important; /* 45px → 2.3438vw */
    bottom: 3%;
    right: 15%;
    background: #0A71F4;
    border-radius: 2.6042vw; /* 50px → 2.6042vw */
    font-size: 1.0417vw; /* 20px → 1.0417vw (2rem → 基于20px设计) */
    text-align: center;
    cursor: pointer;
    line-height: 2.3438vw; /* 45px → 2.3438vw */
    color: white;
    font-weight: bold;
}

.page-1 .small-box:nth-child(5) {
    width: 5.7292vw; /* 110px → 5.7292vw */
    height: 4.6875vw; /* 90px → 4.6875vw */
    top: 40%;
    right: 20%;
}

/* 页面2的盒子布局 */
.page-2 .red-box {
    width: 14.5833vw; /* 280px → 14.5833vw */
    height: 13.0208vw; /* 250px → 13.0208vw */
    right: 25%;
    top: 50%;
    transform: translateY(-50%);
}

.page-2 .blue-box {
    width: 16.6667vw; /* 320px → 16.6667vw */
    height: 15.625vw; /* 300px → 15.625vw */
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    animation: pulse-2 3.5s infinite ease-in-out;
}

/* 页面2的黑色小盒子 */
.page-2 .small-box:nth-child(1) {
    width: 6.25vw !important; /* 120px → 6.25vw */
    height: 5.2083vw; /* 100px → 5.2083vw */
    top: 2%;
    left: 0%;
    background: url(../img/12.jpg) no-repeat center;
    background-size: cover;
}

.page-2 .small-box:nth-child(2) {
    width: 19.2188vw !important; /* 369px → 19.2188vw */
    height: 5.625vw !important; /* 108px → 5.625vw */
    bottom: 86%;
    left: 25%;
    background: url(../img/2.jpg) no-repeat center;
    background-size: cover;
}

.page-2 .small-box:nth-child(3) {
    width: 13.0208vw !important; /* 250px → 13.0208vw */
    height: 2.6042vw !important; /* 50px → 2.6042vw */
    bottom: 4%;
    left: 15%;
    background: #0A71F4;
    border-radius: 2.6042vw; /* 50px → 2.6042vw */
    font-size: 1.0417vw; /* 20px → 1.0417vw (2rem → 基于20px设计) */
    text-align: center;
    cursor: pointer;
    line-height: 2.6042vw; /* 50px → 2.6042vw */
    color: white;
    font-weight: bold;
}

.page-2 .small-box:nth-child(4) {
    width: 7.2917vw; /* 140px → 7.2917vw */
    height: 6.25vw; /* 120px → 6.25vw */
    bottom: 15%;
    right: 15%;
}

.page-2 .small-box:nth-child(5) {
    width: 5.2083vw; /* 100px → 5.2083vw */
    height: 5.2083vw; /* 100px → 5.2083vw */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -150%);
}

/* 蓝色盒子缩放动画 */
@keyframes pulse-1 {
    0% {
        transform: translateY(-50%) scale(1);
    }
    25% {
        transform: translateY(-50%) scale(1.05);
    }
    50% {
        transform: translateY(-50%) scale(1);
    }
    75% {
        transform: translateY(-50%) scale(0.95);
    }
    100% {
        transform: translateY(-50%) scale(1);
    }
}

@keyframes pulse-2 {
    0% {
        transform: translateY(-50%) scale(1);
    }
    30% {
        transform: translateY(-50%) scale(1.08);
    }
    60% {
        transform: translateY(-50%) scale(0.92);
    }
    100% {
        transform: translateY(-50%) scale(1);
    }
}

/* 页面指示器 - 固定在右侧中间位置 */
.page-indicator {
    position: fixed;
    right: 1.0417vw; /* 20px → 1.0417vw */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7813vw; /* 15px → 0.7813vw */
}

.indicator-dot {
    width: 0.7292vw; /* 14px → 0.7292vw */
    height: 0.7292vw; /* 14px → 0.7292vw */
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    border: 0.1042vw solid rgba(255, 255, 255, 0.8); /* 2px → 0.1042vw */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.1042vw 0.2604vw rgba(0, 0, 0, 0.2); /* 0 2px 5px */
}

.indicator-dot.active {
    background-color: #3498db;
    transform: scale(1.3);
    border-color: #fff;
    box-shadow: 0 0 0.5208vw rgba(52, 152, 219, 0.5); /* 0 0 10px */
}

.indicator-dot:nth-child(2).active {
    background-color: #e74c3c;
    box-shadow: 0 0 0.5208vw rgba(231, 76, 60, 0.5); /* 0 0 10px */
}

.indicator-dot:hover {
    transform: scale(1.2);
    background-color: rgba(52, 152, 219, 0.6);
}

.indicator-dot:nth-child(2):hover {
    background-color: rgba(231, 76, 60, 0.6);
}

/* 滚动提示 */
.scroll-hint {
    position: fixed;
    bottom: 1.0417vw; /* 20px → 1.0417vw */
    left: 50%;
    transform: translateX(-50%);
    color: #666;
    font-size: 0.7292vw; /* 14px → 0.7292vw */
    z-index: 100;
    animation: fade-in-out 2s infinite;
    opacity: 0.7;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.4167vw 0.8333vw; /* 8px 16px → 0.4167vw 0.8333vw */
    border-radius: 1.0417vw; /* 20px → 1.0417vw */
    box-shadow: 0 0.1042vw 0.5208vw rgba(0, 0, 0, 0.1); /* 0 2px 10px */
}

@keyframes fade-in-out {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@media (max-width: 2560px) {
    .page {
        padding: 0.5208vw; /* 10px → 0.5208vw */
    }
    
    .page-1 .red-box {
                width: 34.625vw;
                height: 24.4792vw;
                left: 12%;
                background: url(../img/2.webp) no-repeat center;
                background-size: contain;
    }
    
    .page-1 .blue-box {
        width: 40.7604vw;
                height: 47.875vw;
                left: 5%;
                background: url(../img/1.jpg) no-repeat center;
                background-size: contain;
    }
    
    .page-2 .red-box {
        width: 7.2917vw; /* 140px → 7.2917vw */
        height: 6.7708vw; /* 130px → 6.7708vw */
        right: 20%;
    }
    
    .page-2 .blue-box {
        width: 23.6458vw;
                height: 35.7292vw;
                right: 81%;
                top: 54%;
                background: url(../img/11.jpg) no-repeat center;
                background-size: contain;
    }
    
   .page-1 .small-box:nth-child(1) {
                width: 13.0833vw !important;
                height: 5.0833vw !important;
 /* 40px → 2.0833vw */
    }
	.page-1 .small-box:nth-child(2){
		        width: 56.125vw !important;
		        height: 27.4896vw !important;
		        top: 5%;
		        right: 3.9479vw;
		        background: url(../img/2.png) no-repeat center;
		        background-size: cover;
	}
	.page-1 .small-box:nth-child(4){
		width: 29.0208vw !important;
		    height: 9.3438vw !important;
		    bottom: 8%;
		    right: 15%;
		    background: #0A71F4;
		    border-radius: 5.6042vw;
		    font-size: 3.0417vw;
		    text-align: center;
		    cursor: pointer;
		    line-height: 8.3438vw;
		    color: white;
		    font-weight: bold;
	}
	.page-1 .small-box:nth-child(3){
		display: none;
	}
    .page-2 .small-box:nth-child(1){
		    width: 13.0833vw !important;
		    height: 5.0833vw !important;
	}
	
	.page-2 .small-box:nth-child(2){
		display: none;
	}
	.page-2 .small-box:nth-child(3){
		width: 25.0208vw !important;
		        height: 3.6042vw !important;
		        bottom: 4%;
		        left: 38%;
		        background: #0A71F4;
		        border-radius: 2.6042vw;
		        font-size: 2.0417vw;
		        text-align: center;
		        cursor: pointer;
		        line-height: 3.6042vw;
		        color: white;
		        font-weight: bold;
	}
    .page-2 .small-box:nth-child(4) {
        display: none;
    }
    
    .page-indicator {
        right: 0.5208vw; /* 10px → 0.5208vw */
        gap: 0.625vw; /* 12px → 0.625vw */
    }
    
    .indicator-dot {
        width: 0.5208vw; /* 10px → 0.5208vw */
        height: 0.5208vw; /* 10px → 0.5208vw */
    }
	.carousel-container{
		position: absolute;
		    width: 100% !important;
		    top: 50% !important;
		    left: 0 !important;
		    transform: translateY(-50%) !important;
		    z-index: 1 !important;
			margin-top: 2% !important;
			
	}
	.carousel{
	position: relative !important;
	        width: 100% !important;
	        height: 13.25vw !important;
	        overflow: hidden !important;
	        margin: 0.5208vw 0 !important;
	}
}

@media (max-width: 430px) {
    .page {
        padding: 0.5208vw; /* 10px → 0.5208vw */
    }
    
	.no{
		display: none !important;
	}
	
    .page-1 .red-box {
            width: 76.625vw;
                    height: 120.4792vw;
                    left: 12%;
                    background: url(../img/2.webp) no-repeat center;
                    background-size: contain;
    }
    
    .page-1 .blue-box {
             width: 87.7604vw;
             height: 157.875vw;
             left: 5%;
             background: url(../img/1.jpg) no-repeat center;
             background-size: contain;
    }
    
    .page-2 .red-box {
        width: 7.2917vw; /* 140px → 7.2917vw */
        height: 6.7708vw; /* 130px → 6.7708vw */
        right: 20%;
    }
    
    .page-2 .blue-box {
             width: 262px;
             height: 590px;
             right: 43%;
             top: 54%;
             background: url(../img/11.jpg) no-repeat center;
             background-size: contain;
    }
    
   .page-1 .small-box:nth-child(1) {
                       width: 31.0833vw !important;
                       height: 10.0833vw !important;
 /* 40px → 2.0833vw */
    }
	.page-1 .small-box:nth-child(2){
		  width: 90.125vw !important;
		          height: 41.4896vw !important;
		          top: 72%;
		          right: 2.9479vw;
		          background: url(../img/2.png) no-repeat center;
		          background-size: cover;
	}
	.page-1 .small-box:nth-child(4){
		width: 250px !important;
		    height: 45px !important;
		    bottom: 3%;
		    right: 20%;
		    background: #0A71F4;
		    border-radius: 50px;
		    font-size: 2rem;
		    text-align: center;
		    cursor: pointer;
		    line-height: 45px;
		    color: white;
		    font-weight: bold;
	}
	.page-1 .small-box:nth-child(3){
	width: 88.2188vw !important;
	        height: 38.4688vw !important;
	        bottom: 84%;
	        left: 19%;
	        display: block;
	        background: url(../img/1.png) no-repeat center;
	        background-size: contain;
			
	}
    .page-2 .small-box:nth-child(1){
		        width: 31.0833vw !important;
		        height: 10.0833vw !important;
	}
	
	.page-2 .small-box:nth-child(2){
		display: block;
		width: 369px !important;
		    height: 108px !important;
		    bottom: 88%;
		    left: 25%;
		    background: url(../img/2.jpg) no-repeat center;
		    background-size: cover;
	}
	.page-2 .small-box:nth-child(3){
	width: 250px !important;
	    height: 50px !important;
	    bottom: 4%;
	    left: 20%;
	    background: #0A71F4;
	    border-radius: 50px;
	    font-size: 2rem;
	    text-align: center;
	    cursor: pointer;
	    line-height: 50px;
	    color: white;
	    font-weight: bold;
	}
    .page-2 .small-box:nth-child(4) {
        display: none;
    }
    
    .page-indicator {
        right: 0.5208vw; /* 10px → 0.5208vw */
        gap: 0.625vw; /* 12px → 0.625vw */
    }
    
    .indicator-dot {
       width: 2.5208vw;
       height: 2.5208vw; /* 10px → 0.5208vw */
    }
	.indicator-dot.active {
	    background-color: #3498db;
	    transform: scale(1.3);
	    border-color: #fff;
	    box-shadow: 0 0 2.5208vw rgba(52, 152, 219, 0.5);
	}
	.carousel-container{
		position: absolute;
		    width: 100% !important;
		    top: 50% !important;
		    left: 0 !important;
		    transform: translateY(-50%) !important;
		    z-index: 1 !important;
			margin-top: -15% !important;
			
	}
	.carousel{
	position: relative !important;
	        width: 100% !important;
	        height: 73.25vw !important;
	        overflow: hidden !important;
	        margin: 3.5208vw 0 !important;
	}
}



/* 响应式调整 */

@media (max-width: 390px) {
    .page {
        padding: 0.5208vw; /* 10px → 0.5208vw */
    }
    
	.no{
		display: none !important;
	}
	
    .page-1 .red-box {
            width: 76.625vw;
                    height: 120.4792vw;
                    left: 12%;
                    background: url(../img/2.webp) no-repeat center;
                    background-size: contain;
    }
    
    .page-1 .blue-box {
             width: 87.7604vw;
             height: 157.875vw;
             left: 5%;
             background: url(../img/1.jpg) no-repeat center;
             background-size: contain;
    }
    
    .page-2 .red-box {
        width: 7.2917vw; /* 140px → 7.2917vw */
        height: 6.7708vw; /* 130px → 6.7708vw */
        right: 20%;
    }
    
    .page-2 .blue-box {
             width: 262px;
             height: 590px;
             right: 33%;
             top: 54%;
             background: url(../img/11.jpg) no-repeat center;
             background-size: contain;
    }
    
   .page-1 .small-box:nth-child(1) {
                       width: 31.0833vw !important;
                       height: 10.0833vw !important;
 /* 40px → 2.0833vw */
    }
	.page-1 .small-box:nth-child(2){
		  width: 90.125vw !important;
		          height: 41.4896vw !important;
		          top: 72%;
		          right: 2.9479vw;
		          background: url(../img/2.png) no-repeat center;
		          background-size: cover;
	}
	.page-1 .small-box:nth-child(4){
		width: 250px !important;
		    height: 45px !important;
		    bottom: 3%;
		    right: 15%;
		    background: #0A71F4;
		    border-radius: 50px;
		    font-size: 2rem;
		    text-align: center;
		    cursor: pointer;
		    line-height: 45px;
		    color: white;
		    font-weight: bold;
	}
	.page-1 .small-box:nth-child(3){
	width: 88.2188vw !important;
	        height: 38.4688vw !important;
	        bottom: 84%;
	        left: 19%;
	        display: block;
	        background: url(../img/1.png) no-repeat center;
	        background-size: contain;
			
	}
    .page-2 .small-box:nth-child(1){
		        width: 31.0833vw !important;
		        height: 10.0833vw !important;
	}
	
	.page-2 .small-box:nth-child(2){
		display: block;
		width: 369px !important;
		    height: 108px !important;
		    bottom: 86%;
		    left: 25%;
		    background: url(../img/2.jpg) no-repeat center;
		    background-size: cover;
	}
	.page-2 .small-box:nth-child(3){
	width: 250px !important;
	    height: 50px !important;
	    bottom: 4%;
	    left: 15%;
	    background: #0A71F4;
	    border-radius: 50px;
	    font-size: 2rem;
	    text-align: center;
	    cursor: pointer;
	    line-height: 50px;
	    color: white;
	    font-weight: bold;
	}
    .page-2 .small-box:nth-child(4) {
        display: none;
    }
    
    .page-indicator {
        right: 0.5208vw; /* 10px → 0.5208vw */
        gap: 0.625vw; /* 12px → 0.625vw */
    }
    
    .indicator-dot {
       width: 2.5208vw;
       height: 2.5208vw; /* 10px → 0.5208vw */
    }
	.indicator-dot.active {
	    background-color: #3498db;
	    transform: scale(1.3);
	    border-color: #fff;
	    box-shadow: 0 0 2.5208vw rgba(52, 152, 219, 0.5);
	}
	.carousel-container{
		position: absolute;
		    width: 100% !important;
		    top: 50% !important;
		    left: 0 !important;
		    transform: translateY(-50%) !important;
		    z-index: 1 !important;
			margin-top: -15% !important;
			
	}
	.carousel{
	position: relative !important;
	        width: 100% !important;
	        height: 73.25vw !important;
	        overflow: hidden !important;
	        margin: 3.5208vw 0 !important;
	}
}

@media (max-width: 376px) {
    .page {
        padding: 0.5208vw; /* 10px → 0.5208vw */
    }
    
	.no{
		display: none !important;
	}
	
    .page-1 .red-box {
            width: 76.625vw;
                    height: 120.4792vw;
                    left: 12%;
                    background: url(../img/2.webp) no-repeat center;
                    background-size: contain;
    }
    
    .page-1 .blue-box {
               width: 71.7604vw;
        height: 157.875vw;
        left: 16%;
        background: url(../img/1.jpg) no-repeat center;
        background-size: contain;
    }
    
    .page-2 .red-box {
        width: 7.2917vw; /* 140px → 7.2917vw */
        height: 6.7708vw; /* 130px → 6.7708vw */
        right: 20%;
    }
    
    .page-2 .blue-box {
             width: 262px;
             height: 590px;
             right: 33%;
             top: 54%;
             background: url(../img/11.jpg) no-repeat center;
             background-size: contain;
    }
    
   .page-1 .small-box:nth-child(1) {
                       width: 31.0833vw !important;
                       height: 10.0833vw !important;
 /* 40px → 2.0833vw */
    }
	.page-1 .small-box:nth-child(2){
		        width: 74.125vw !important;
        height: 41.4896vw !important;
        top: 69%;
        right: 7.9479vw;
        background: url(../img/2.png) no-repeat center;
        background-size: contain;
	}
	.page-1 .small-box:nth-child(4){
		width: 250px !important;
		    height: 45px !important;
		    bottom: 3%;
		    right: 15%;
		    background: #0A71F4;
		    border-radius: 50px;
		    font-size: 2rem;
		    text-align: center;
		    cursor: pointer;
		    line-height: 45px;
		    color: white;
		    font-weight: bold;
	}
	.page-1 .small-box:nth-child(3){
	            width: 88.2188vw
331.115px
 !important;
        height: 38.4688vw !important;
        bottom: 80%;
        left: 22%;
        display: block;
        background: url(../img/1.png) no-repeat center;
        background-size: contain;
	}
    .page-2 .small-box:nth-child(1){
		        width: 31.0833vw !important;
		        height: 10.0833vw !important;
	}
	
	.page-2 .small-box:nth-child(2){
		display: block;
		width: 369px !important;
		    height: 108px !important;
		    bottom: 86%;
		    left: 25%;
		    background: url(../img/2.jpg) no-repeat center;
		    background-size: cover;
	}
	.page-2 .small-box:nth-child(3){
	width: 250px !important;
	    height: 50px !important;
	    bottom: 4%;
	    left: 15%;
	    background: #0A71F4;
	    border-radius: 50px;
	    font-size: 2rem;
	    text-align: center;
	    cursor: pointer;
	    line-height: 50px;
	    color: white;
	    font-weight: bold;
	}
    .page-2 .small-box:nth-child(4) {
        display: none;
    }
    
    .page-indicator {
        right: 0.5208vw; /* 10px → 0.5208vw */
        gap: 0.625vw; /* 12px → 0.625vw */
    }
    
    .indicator-dot {
       width: 2.5208vw;
       height: 2.5208vw; /* 10px → 0.5208vw */
    }
	.indicator-dot.active {
	    background-color: #3498db;
	    transform: scale(1.3);
	    border-color: #fff;
	    box-shadow: 0 0 2.5208vw rgba(52, 152, 219, 0.5);
	}
	.carousel-container{
		position: absolute;
		    width: 100% !important;
		    top: 50% !important;
		    left: 0 !important;
		    transform: translateY(-50%) !important;
		    z-index: 1 !important;
			margin-top: -15% !important;
			
	}
	.carousel{
	position: relative !important;
	        width: 100% !important;
	        height: 55.25vw !important;
	        overflow: hidden !important;
	        margin: 3.5208vw 0 !important;
	}
}


/* 轮播图容器 */
.carousel-container {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1; /* 在蓝色盒子下方 */
	margin-top: 17%;
}

/* 单个轮播图 */
.carousel {
    position: relative;
    width: 100%;
    height: 6.25vw; /* 120px → 6.25vw */
    overflow: hidden;
    margin: 0.5208vw 0; /* 10px → 0.5208vw */
}

/* 上面的轮播图 */
.top-carousel {
    margin-bottom: 1.0417vw; /* 20px → 1.0417vw */
}

/* 下面的轮播图 */
.bottom-carousel {
    margin-top: 1.0417vw; /* 20px → 1.0417vw */
}

/* 轮播轨道 */
.carousel-track {
    position: absolute;
    display: flex;
    width: 400%; /* 4张图片 * 100% */
    height: 100%;
}

/* 轮播项 */
.carousel-item {
    width: 25%; /* 100% / 4张图片 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25vw; /* 24px → 1.25vw */
    font-weight: bold;
}

/* 轮播图项背景色 - 模拟4张图片 */
.carousel-item:nth-child(1) {
    background-color: #1abc9c;
}

.carousel-item:nth-child(2) {
    background-color: #2ecc71;
}

.carousel-item:nth-child(3) {
    background-color: #9b59b6;
}

.carousel-item:nth-child(4) {
    background-color: #f1c40f;
}

/* 上面的轮播图动画 - 从右向左 */
.top-carousel .carousel-track {
    animation: scroll-right-to-left 20s linear infinite;
}

@keyframes scroll-right-to-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* 移动一半（4张图片） */
    }
}

/* 下面的轮播图动画 - 从左向右 */
.bottom-carousel .carousel-track {
    animation: scroll-left-to-right 20s linear infinite;
}

@keyframes scroll-left-to-right {
    0% {
        transform: translateX(-50%); /* 从一半开始 */
    }
    100% {
        transform: translateX(0);
    }
}








/* 弹窗样式 - 已修改为透明 */
#fullscreenOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* 完全透明 */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 弹窗提示文字 */
.overlay-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1.0417vw 2.0833vw; /* 20px 40px → 1.0417vw 2.0833vw */
    border-radius: 0.5208vw; /* 10px → 0.5208vw */
    font-size: 1.25vw; /* 24px → 1.25vw */
    text-align: center;
    animation: pulse-hint 2s infinite;
    pointer-events: none;
    z-index: 10000;
}

@keyframes pulse-hint {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        background-color: rgba(0, 0, 0, 0.7);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        background-color: rgba(52, 152, 219, 0.8);
    }
}