/* ===== Dragon Raja: ReRise - RPG  Pre-Registration Landing Page ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }

/* 页面容器 */
.page-wrap {
    width: 7.5rem;
    height: 16.2rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: #0a0a0a;
}

/* ===== 全屏背景轮播 ===== */
.bg-swiper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}
.bg-swiper .swiper-slide {
    width: 100%; height: 100%;
}
.bg-swiper .swiper-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.swiper-lazy { opacity: 0; transition: opacity .5s ease; }
.swiper-lazy-loaded { opacity: 1; }
.swiper-lazy-preloader {
    width: 36px; height: 36px;
    position: absolute; left: 50%; top: 50%;
    margin: -18px 0 0 -18px; z-index: 10;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: rgba(255,255,255,.8);
    border-radius: 50%;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* Swiper 箭头 (使用自定义图片) */
.bg-swiper .swiper-button-prev,
.bg-swiper .swiper-button-next {
    width: 0.6rem;
    height: 0.6rem;
    background-image: url('../img/common/arrow_g.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 0;
    top: 35%; /* 放在上半部分 */
}
/* 去掉自带的箭头字体图标 */
.bg-swiper .swiper-button-prev::after,
.bg-swiper .swiper-button-next::after {
    display: none;
}
.bg-swiper .swiper-button-prev {
    left: 0.1rem;
}
.bg-swiper .swiper-button-next {
    right: 0.1rem;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); /* 右边箭头水平翻转 180 度 */
}

/* ===== 覆盖层 (所有UI元素) ===== */
.overlay { display: none; }

/* 顶部固定栏 */
.top-banner {
    position: fixed;
    top: 0; left: 50%;
    margin-left: -3.75rem;
    width: 7.5rem; 
    height: 1rem;
    z-index: 10;
}
.top-bg {
    width: 7.5rem; height: 1rem;
}
.top-btn {
    position: absolute;
    right: 0.2rem; top: 0.16rem;
    width: 1.91rem; height: 0.68rem;
    display: block;
}
.top-btn img { width: 100%; height: 100%; }

/* 底部固定区 */
.bottom-fixed {
    position: absolute;
    bottom: 0.7rem; left: 0;
    width: 7.5rem;
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.center-btn {
    display: inline-block;
    height: 1.2rem;
    margin-bottom: 0.36rem;
}
.center-btn img {
    height: 100%;
    width: auto;
}
.bottom-title {
    width: 7.19rem; height: auto;
    margin-bottom: 0.2rem;
}
.page-wrap.P02 .center-btn{
    height: 1.3rem;
    margin-bottom: 0.1rem;
}
.page-wrap.P02 .bottom-fixed{
    bottom: 0.3rem;
}
.page-wrap.P02 .bottom-bar{
    width: 7.39rem;
    height: auto;
}
.page-wrap.P03 .bottom-title{
    width: 3.2rem;
}
.page-wrap.P03 .center-btn{
    margin-bottom: 0.26rem;
}
.page-wrap.P02 .bottom-title{
   width: 3.33rem;
   margin-bottom: 0.1rem;
}
.page-wrap.P01 .bottom-fixed{
    top: 10rem;
    bottom: unset;
}
.bottom-bar {
    width: 7.5rem; height: 1.74rem;
}
.P02 .top-bg,
.P06 .top-bg,
.P07 .top-bg{
    height: 0.92rem;
}
.P02 .top-btn,
.P06 .top-btn{
    top: 0.12rem;
}
.P07 .top-btn{
    top: 0.18rem;
}
.P06 .center-btn,
.P07 .center-btn{
    margin-bottom: 0.14rem;
}
.P06 .bottom-bar,
.P07 .bottom-bar{
    width: 7.31rem;
    height: auto;
}
/* ===== 缩放呼吸动效 ===== */
.pulse-anim {
    -webkit-animation: pulse 1.5s ease-in-out infinite;
    animation: pulse 1.5s ease-in-out infinite;
}
@-webkit-keyframes pulse {
    0%   { -webkit-transform: scale(1); transform: scale(1); }
    50%  { -webkit-transform: scale(1.05); transform: scale(1.05); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes pulse {
    0%   { -webkit-transform: scale(1); transform: scale(1); }
    50%  { -webkit-transform: scale(1.05); transform: scale(1.05); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}
.page-wrap.P04{
    height: auto;
    overflow: hidden;
}
.page-wrap.P04 .top-bg{
    height: 1.2rem;
}
.page-wrap.P04 .top-btn{
    width: 2.33rem;
    height: 0.74rem;
    top: 0.23rem;
}
.page-wrap.P04 .bottom-fixed{
   top: 13.66rem;
   bottom:unset;
}
.bg1{
    width: 7.5rem;
    height: 15.23rem;
}