.B1CardM { position: absolute; top: 0; left: 0; z-index: 40; background-size: 100% 100%; width: 100%; height: 100%; background-color: rgba(28, 21, 12, 0.70); backdrop-filter: blur(10px); :global { .B1Cback { z-index: 10; position: absolute; top: 20px; right: 20px; } .swiper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; height: auto; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0); } .swiper-slide { color: #fff; padding: 8% 8%; .slideBac { pointer-events: none; position: absolute; z-index: 3; top: 0%; left: 0%; width: 100%; height: 100%; background-size: 100% 100%; } p { padding: 0 14%; position: absolute; left: 0; bottom: 10%; width: 100%; color: #fff; line-height: 18px; overflow-y: auto; letter-spacing: 2px; max-height: 30%; } &>img { width: 100%; height: calc(100% - 170px); } } // .swiper-slide-active {} .B1Cname { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); z-index: 10; color: var(--themeColor2); font-size: 24px; letter-spacing: 2px; font-weight: 700; } .B1Cbtn { position: absolute; bottom: 30px; left: 50%; z-index: 10; transform: translateX(-50%); width: 200px; height: 50px; &>img { width: 100%; height: 100%; object-fit: fill; } &>div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: var(--themeColor); letter-spacing: 2px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: 700; &>p { font-size: 24px; position: relative; top: 4px; } } } } }