/* --- 核心变量定义 (方便自适应调整) --- */
 :root {
    /* 原始尺寸 (大于1400px屏幕) */
    --acard-w: 20.8854vw;
    --acard-h: 24.3750vw;
    --aoverlap-x: -2.0833vw;  /* 图片左右重叠量 */
    --aside-drop: 2.0833vw;   /* 两侧图片下沉高度 */
    --ahover-lift: -1.0417vw; /* 悬停上浮距离 */
    --acontainer-max-w: 62.5vw;
    --acontainer-h: 31.25vw;
}

/* 适配中等屏幕 (如 1366x768 笔记本) - 整体缩小约 20% */
@media (max-width: 1300px) {
    :root {
        --acard-w: 16.6667vw;
        --acard-h: 19.4792vw;
        --aoverlap-x: -1.6667vw;
        --aside-drop: 1.6667vw;
        --ahover-lift: -0.8333vw;
        --acontainer-max-w: 50vw;
        --acontainer-h: 26.0417vw;
    }
}

/* 适配较小屏幕 (如 1024px iPad 横屏或老式显示器) - 整体缩小约 35% */
@media (max-width: 1000px) {
    :root {
        --acard-w: 13.5417vw;
        --acard-h: 15.8333vw;
        --aoverlap-x: -1.3542vw;
        --aside-drop: 1.3542vw;
        --ahover-lift: -0.6771vw;
        --acontainer-max-w: 40.6250vw;
        --acontainer-h: 20.8333vw;
    }
}



.banner img{
    width: 100%;
}
.hqd-brand-section{
    width: 100.000vw;
    height: 45.000vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #FD5000;
    /* 初始状态：背景透明 */
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

/* 背景动画：当进入视口时，背景淡入 */
.hqd-brand-section.animate-bg {
    opacity: 1;
}

.hqd-brand-section2{
    width: 100.000vw;
    height: 45.000vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* 使用linear-gradient加rgba实现背景透明叠加 */
    background: linear-gradient(rgba(253,255,255, 0.4), rgba(253,255,255, 0.4)), url('../images/activity/banner2.png') no-repeat center center;
    background-size: 100% 100%;
    /* 初始状态：背景透明 */
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

/* 背景动画：当进入视口时，背景淡入 */
.hqd-brand-section2.animate-bg {
    opacity: 1;
}

.hqd-brand-section2-text {
    position: relative;
    width: 62.500vw;
    height: 31.250vw;
    padding: 4.688vw 3.542vw;
    flex-shrink: 0;
    border-radius: 2.083vw;
    /* box-shadow: 0 0.625vw 1.771vw 0 rgba(13, 10, 44, 0.08); */
    color: #1a1a1a;
    font-size: 2.083vw;
    font-weight: 400;
    line-height: 150%;
    background-color: #FFF;
    z-index: 2;
    text-align: left;
    box-shadow: 0 0 1.3021vw rgba(255, 255, 255, 0.9);
    background: linear-gradient(83.51deg, #FF8114 3.86%, #FF3333 90.08%);
    /* 初始状态：色块隐藏（缩放为0） */
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease-out;
}

/* 色块动画：当背景动画完成后，色块出现 */
.hqd-brand-section2.animate-bg .hqd-brand-section2-text {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

.activity-text-realy2{
    color:#fff;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 文字动画：当色块动画完成后，文字依次出现 */
.hqd-brand-section2-text.animate-text .activity-text-realy2 {
    opacity: 1;
    transform: translateY(0);
}

/* 为每行文字设置不同的延迟时间，实现依次显示 */
/* 使用 nth-of-type 而不是 nth-child，因为每个span后面都有<br>标签 */
.hqd-brand-section2-text.animate-text span.activity-text-realy2:nth-of-type(1) {
    transition-delay: 0.1s;
}

.hqd-brand-section2-text.animate-text span.activity-text-realy2:nth-of-type(2) {
    transition-delay: 0.2s;
}

.hqd-brand-section2-text.animate-text span.activity-text-realy2:nth-of-type(3) {
    transition-delay: 0.3s;
}

.hqd-brand-section2-text.animate-text span.activity-text-realy2:nth-of-type(4) {
    transition-delay: 0.4s;
}

.hqd-brand-section2-text.animate-text span.activity-text-realy2:nth-of-type(5) {
    transition-delay: 0.5s;
}

.hqd-brand-section2-text.animate-text span.activity-text-realy2:nth-of-type(6) {
    transition-delay: 0.6s;
}

.hqd-brand-section2-text.animate-text span.activity-text-realy2:nth-of-type(7) {
    transition-delay: 0.7s;
}

/* .hqd-brand-section2-text{
    width: 100.000vw;
    height: 45.000vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #FD5000;
} */


.hqd-brand-section-bg img{
    position: absolute;
    z-index: 1;
}



.activity-hero{
    position: relative;
    overflow: hidden;
}
.activity-hero-inner{
    position: relative;
    width: 100%;
    max-width: 1905px;
    margin: 0 auto;
    padding-top: 40%; /* 794/1905 的宽高比，作为后备方案 */
    aspect-ratio: 1905 / 794; /* 保持视频宽高比 */
    max-height: 760px;
    overflow: hidden;
}
.activity-hero-placeholder{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: cover;
    transition: opacity 0.5s ease-in;
}
.activity-hero-bg{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    object-fit: cover;
    transition: opacity 0.5s ease-in;
}
.activity-hero-bg.loaded{
    opacity: 1;
}
.activity-hero-inner.video-loaded .activity-hero-placeholder{
    display: none;
}
.activity-hero-video-mobile{
    display: none;
}
.activity-hero-video-desktop{
    display: block;
}
.activity-hero-play{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background: none;
    cursor: pointer;
    z-index: 10;
}
.activity-hero-inner.playing .activity-hero-play{
    display: none;
}


.hqd-brand-section-text {
    position: relative;
    width: 62.500vw;
    height: 31.250vw;
    padding: 4.688vw 3.542vw;
    flex-shrink: 0;
    border-radius: 2.083vw;
    /* box-shadow: 0 0.625vw 1.771vw 0 rgba(13, 10, 44, 0.08); */
    color: #1a1a1a;
    font-size: 2.083vw;
    font-weight: 400;
    line-height: 150%;
    background-color: #FFF;
    z-index: 2;
    text-align: left;
    box-shadow: 0 0 1.3021vw rgba(255, 255, 255, 0.9);
    /* 初始状态：色块隐藏（缩放为0） */
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease-out;
}

/* 色块动画：当背景动画完成后，色块出现 */
.hqd-brand-section.animate-bg .hqd-brand-section-text {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

.activity-text-realy{
    /* color: rgba(253, 80, 0, 1); */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    display: inline-block;
}

/* 文字动画：当色块动画完成后，文字从上到下依次淡入出现 */
.hqd-brand-section-text.animate-text span.activity-text-realy {
    opacity: 1;
    transform: translateY(0);
}

/* 为每行文字设置不同的延迟时间，实现依次显示 */
/* 使用 nth-of-type 而不是 nth-child，因为每个span后面都有<br>标签 */
.hqd-brand-section-text.animate-text span.activity-text-realy:nth-of-type(1) {
    transition-delay: 0.1s;
}

.hqd-brand-section-text.animate-text span.activity-text-realy:nth-of-type(2) {
    transition-delay: 0.2s;
}

.hqd-brand-section-text.animate-text span.activity-text-realy:nth-of-type(3) {
    transition-delay: 0.3s;
}

.hqd-brand-section-text.animate-text span.activity-text-realy:nth-of-type(4) {
    transition-delay: 0.4s;
}

.hqd-brand-section-text.animate-text span.activity-text-realy:nth-of-type(5) {
    transition-delay: 0.5s;
}

.hqd-brand-section-text.animate-text span.activity-text-realy:nth-of-type(6) {
    transition-delay: 0.6s;
}

.hqd-brand-section-text.animate-text span.activity-text-realy:nth-of-type(7) {
    transition-delay: 0.7s;
}




.hqd-brand-section-bg .bg-pic1{
    width: 5.713vw;
    top: 6.875vw;
    left: 9.375vw;
}
.hqd-brand-section-bg .bg-pic2{
    width: 5.2604vw;
    transform: rotate(-24.311deg);
    bottom: 1.354vw;
    left: 5.938vw;
}
.hqd-brand-section-bg .bg-pic3{
    width: 5.7292vw;
    top: 2.969vw;
    right: 7.187vw;
}
.hqd-brand-section-bg .bg-pic4{
    width: 13.125vw;
    transform: rotate(31.713deg);
    top: 8.646vw;
    right: 3.229vw;
}
.hqd-brand-section-bg .bg-pic5{
    width: 7.187vw;
    top: 30.417vw;
    right: 9.792vw;
}

.flow-desc-text{
    font-size: 6.1458vw;
    font-weight: 900;
    line-height: 150%;
}
.flow-desc-section{
    position: relative;
    width: 100%;
    height: 48.125vw;
    /* padding-top: 9.375vw;
    padding-left: 17.083vw; */
}
.rabbit{
    position: absolute;
    top: 6.823vw;
    left: 7.646vw;
    width: 10.729vw;
    height: 10.729vw;
}
.rabbit .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 7.396vw;
}
.rabbit .bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
}
.so-text{
    position: absolute;
    top: 9.375vw;
    left: 20.083vw;
}
.yf-text{
    position: absolute;
    top: 9.375vw;
    right: 20.469vw;
}
.instagram-icon{
    position: absolute;
    top: 9.688vw;
    right: 13.479vw;
    width: 7.083vw;
}
.camera{
    position: absolute;
    top: 19.573vw;
    left: 15.25vw;
    width: 8.750vw;
}
.hqd-text{
    position: absolute;
    top: 18.698vw;
    left: 25.542vw;
}
.symbol{
    position: absolute;
    top: 19.115vw;
    left: 39vw;
    width: 9.271vw;
}
.activity-moment-text{
    position: absolute;
    top: 18.594vw;
    right: 26.062vw;
}
.arrow{
    position: absolute;
    top: 22.708vw;
    right: 12.344vw;
    width: 10.104vw;
}
.win-text{
    position: absolute;
    top: 28.073vw;
    left: 21.969vw;
}
.gifts{
    position: absolute;
    top: 28.021vw;
    right: 21.458vw;
    width: 17.8646vw;
    height: 8.5417vw;
}

.cup{
    position: absolute;
    top: 37.760vw;
    right: 4.479vw;
    width: 9.740vw;
    height: 9.740vw;
}
.cup .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 7.812vw;
}
.cup .bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.how-to-enter-section{
    margin: 0 auto;
    width: 62.500vw;    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 12.042vw;
    position: relative;
}
.how-to-enter-title{
    font-size: 1.875vw;
    font-weight: 500;
    line-height: 150%; /* 2.812vw */
    margin-top: 0;
    margin-bottom: 0.729vw;
}
.how-to-enter-content{
    gap: 1.250vw;
    display: flex;
    flex-direction: column;
}
.how-to-enter-item-content-text{
    font-size: 1.042vw;
    font-weight: 400;
    line-height: 1.667vw;
    width: 17.708vw;
}
.how-to-enter-item-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 21.875vw;
}
.how-to-enter-item-icon{
    width: 1.250vw;
    height: 1.250vw;
    background: url('../images/activity/go-grey.svg') no-repeat center center;
    background-size: 100% 100%;
}
.active .how-to-enter-item-icon,.how-to-enter-item:hover .how-to-enter-item-icon{
    background: url('../images/activity/go.svg') no-repeat center center;
    background-size: 100% 100%;
}

.how-to-enter-item{
    display: flex;
    padding: 1.250vw 2.500vw;
    align-items: center;
    gap: 1.458vw;
    border-radius: 1.250vw;
    background: #F7F7F7;
    width: 30.417vw;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.how-to-enter-item-number{
    width: 2.083vw;
    height: 2.083vw;
    border: 0.104vw solid #adadad;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 1.042vw;
}
.how-to-enter-item-number-text{
    color: #ADADAD;
    font-family: Poppins;
    font-size: 0.938vw;
    font-weight: 600;
    line-height: 150%;
}

.how-to-enter-item-phone-section{
    background: url('../images/activity/super-symbol.svg') no-repeat center center;
    background-size: 100% 100%;
    width: 26.042vw;
    height: 26.042vw;    
    margin-top: 5.833vw;
    position: relative;
}

.how-to-enter-item-phone-img{
    /* background: url('phone1.png') no-repeat center center;
    background-size: 100% 100%; */
    width: 18.802vw;
    height: 35.417vw;
    position: absolute;
    left: 53%;
    top: -4.271vw;
    transform: translateX(-50%);
    transition: all 0.3s ease-in-out;
}

/* 手机截图效果层 */
.phone-screenshot-overlay {
    position: absolute;
    left: 50%;
    top: 1.729vw;
    width: 15vw;
    /* height: 35.417vw; */
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-screenshot-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    pointer-events: none;
    z-index: 11;
}

.phone-screenshot-flash.active {
    animation: screenshotFlash 0.3s ease-out;
}

@keyframes screenshotFlash {
    0% {
        background: rgba(255, 255, 255, 0);
    }
    50% {
        background: rgba(255, 255, 255, 0.8);
    }
    100% {
        background: rgba(255, 255, 255, 0);
    }
}

.phone-screenshot-img {
    width: 70%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    z-index: 12;
    position: relative;
}

.phone-screenshot-img.active {
    opacity: 1;
    transform: scale(1);
}

.phone-screenshot-img.fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}
.how-to-enter-item-phone-img:hover{
    transform: translateX(-50%) scale(1.2);
}

.how-to-enter-item.active,.how-to-enter-item:hover{
    background: #FD5000;
}

.active .how-to-enter-item-number,.how-to-enter-item:hover .how-to-enter-item-number{
    border-color: #fff;
    background: #fff;
}
.active .how-to-enter-item-number-text,.how-to-enter-item:hover .how-to-enter-item-number-text{
    color: #FD5000;
}

.active .how-to-enter-item-content-text,.how-to-enter-item:hover .how-to-enter-item-content-text{
    color: #fff;
}

.how-to-enter-item-note{
    color: #000;
    font-size: 0.833vw;
    font-weight: 400;
    line-height: 150%;
    margin-top: 0.677vw;
    margin-bottom: 0;
}

.share-now-btn{
    position: absolute;
    bottom: -9.458vw;
    left: 50%;
    transform: translateX(-50%);
}
.share-now-btn-text{
    width: 14.167vw;
    height: 4.659vw;
    color: #fff;
    font-size: 1.667vw;
    font-weight: 700;
    line-height: 150%; 
    background: url('../images/activity/btn-bg.jpg') no-repeat center center;
    background-size: 100% 100%;
    border:none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.share-now-btn-text:hover{
    transform: scale(1.05);
}

.share-now-btn-text:active{
    transform: scale(0.98);
}

.start-lucky-draw-btn-text{
    width: 14.167vw;
    height: 4.659vw;
    color: #fff;
    font-size: 1.667vw;
    font-weight: 700;
    line-height: 150%; 
    background: url('../images/activity/btn-bg.jpg') no-repeat center center;
    background-size: 100% 100%;
    border:none;
    cursor: pointer;
}

.pawfy-section-content-text-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pawfy-button{
    margin-top:4.01vw;
}

.fill-out-button{
    margin-top:4.01vw;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============================================
   Poster Section - Redesigned (简洁版)
   ============================================ */

/* 外层容器 */
.poster-section {
    width: 100%;
    margin: 4.167vw 0;
    overflow: visible;
}

/* 包裹层（包含箭头和卡片容器） */
.poster-wrapper {
    max-width: 77vw;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
}

/* 卡片容器的外层包装 - 用于裁剪多余卡片 */
.poster-container {
    width: 100%;
    /* 精确计算：
       基础内容：3×20.0448vw + 2×2vw = 64.1344vw
       track左padding：3vw
       track右padding：3vw
       总计需要：64.1344vw + 3vw + 3vw = 70.1344vw，向上取整到70.5vw */
    max-width: 70.5vw;
    position: relative;
    overflow: hidden; /* 隐藏超出的卡片 */
    box-sizing: content-box; /* 确保padding不影响max-width */
    /* 只保留上下padding，避免放大时被裁剪 */
    padding: 2.5vw 0; /* 只保留上下padding */
    margin: -2.5vw 0; /* 只保留上下负margin，保持垂直位置不变 */
}

/* 卡片轨道 - 实际卡片容器 */
.poster-track {
    display: flex;
    gap: 2vw;
    transition: transform 0.4s ease;
    cursor: grab;
    user-select: none;
    /* 左右padding为hover放大留出空间 */
    padding: 0 2vw; /* 左右各3vw，足够容纳1.08倍放大效果 */
}

.poster-track:active {
    cursor: grabbing;
}

.poster-track.dragging {
    cursor: grabbing;
}


/* 单个卡片 */
.poster-card {
    flex: 0 0 20.0448vw; /* 使用精确宽度 */
    width: 20.0448vw;
    height: 25.0521vw;
    background: #FFF;
    border-radius: 1.5vw;
    overflow: visible;
    transition: transform 0.3s ease;
}

/* PC端hover放大 - 只在非拖动时 */
.poster-track:not(.dragging) .poster-card:hover {
    transform: scale(1.08);
    z-index: 10;
    position: relative;
}

/* 图片区域 */
.poster-image {
    width: 100%;
    height: 25.0521vw; /* 匹配卡片精确高度 */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1.5vw;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1vw;
}

/* 按钮容器 */
.poster-buttons {
    display: flex;
    gap: 0.8vw;
    align-items: center;
    justify-content: center;
}

/* Save按钮 */
.poster-buttons .btn-save {
    width: 8.75vw;
    height: 2.865vw;
    padding: 0.5vw 1vw;
    background: url('../images/activity/btn-bg.jpg') no-repeat center center;
    background-size: 100% 100%;
    color: #FFF;
    font-size: 0.833vw;
    font-weight: 700;
    line-height: 1.5;
    border: none;
    border-radius: 1.3vw;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.poster-buttons .btn-save:hover {
    transform: translateY(-2px);
}

/* Share按钮 */
.poster-buttons .btn-share {
    width: 6.354vw;
    height: 2.865vw;
    padding: 0.8vw 2vw;
    background: #F7F7F7;
    color: #1A1A1A;
    font-size: 0.833vw;
    font-weight: 700;
    line-height: 1.5;
    border: 2px solid #FFF;
    border-radius: 2vw;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.625vw 1.771vw rgba(13, 10, 44, 0.08);
}

.poster-buttons .btn-share:hover {
    background: #E8E8E8;
    transform: translateY(-2px);
}

/* 导航箭头 */
.poster-nav-btn {
    flex-shrink: 0;
    width: 2.5vw;
    height: 2.5vw;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}

.poster-arrow-btn{
    flex-shrink: 0;
    width: 2.5vw;
    height: 2.5vw;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}

.poster-nav-btn:hover {
    opacity: 0.7;
}

.poster-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.poster-nav-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 右箭头旋转 */
.poster-next img {
    transform: rotate(180deg);
}



.picture-box-center-content-buttomline{
    width:100%;
    height:3px;
    display:flex;
    position:absolute;
    bottom:0;
    left:0;
    background:#fff;
}


/* ============================================
   移动端样式 (<=768px)
   ============================================ */
@media (max-width: 768px) {
    .poster-wrapper {
        gap: 4vw;
        padding: 0; /* 移动端移除左右padding */
        max-width: 100%; /* 使用全宽 */
    }
    
    .poster-container {
        max-width: 65.0667vw; /* 移动端只显示一张图片 */
        overflow: hidden; /* 移动端隐藏多余卡片 */
        padding: 0; /* 移动端不需要padding */
        margin: 0; /* 移动端不需要负margin */
    }
    
    .poster-track {
        gap: 2vw;
        padding: 0; /* 移动端不需要左右padding */
    }
    
    .poster-card {
        flex: 0 0 65.0667vw;
        width: 65.0667vw; /* 移动端固定宽度 */
        height: 93.3333vw; /* 移动端固定高度 */
        border-radius: 5vw;
    }
    
    /* 移动端禁用hover放大 */
    .poster-track:not(.dragging) .poster-card:hover {
        transform: none;
    }
    
    .poster-image {
        height: 93.3333vw; /* 匹配卡片高度 */
        border-radius: 5vw;
        padding: 3vw;
    }
    
    .poster-buttons {
        gap: 2.5vw;
    }
    
    .poster-buttons .btn-save {
        width: 28vw;
        height: 9vw;
        font-size: 3.2vw;
        border-radius: 4vw;
    }
    
    .poster-buttons .btn-share {
        width: 22.0667vw;
        /* padding: 2.5vw 6.5vw; */
        font-size: 3.2vw;
        border-radius: 6.5vw;
        height:9vw;
        display:flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .poster-nav-btn {
        width: 6vw;
        height: 6vw;
    }
    
    /* 调整箭头位置，避免遮挡图片 */
    .poster-prev {
        margin-right: 2vw;
    }
    
    .poster-next {
        margin-left: 2vw;
    }
}

.pawfy-section{
    width: 100%;
    margin: 8vw 0 5vw 0;
    padding: 0 6.875vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background: #F7F7F7; */
    /* border-radius: 1.667vw; */
}

.pawfy-section-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* position: relative; */
}

.pawfy-section-content-text-title{
    font-size:3.333vw;
    line-height: 120%;
    font-weight: 700;
}

.pawfy-section-content-text-button{
    margin-top: 1.042vw;
}

.pawfy-text-mobile{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sock{
    position: absolute;
    top: -2.604vw;
    left: 9.1146vw;
    width: 10.729vw;
    height: 10.729vw;
}
.sock .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 7.396vw;
}
.sock .bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
}

.smm{
    position: absolute;
    top: 6.510vw;
    right: 8.333vw;
    width: 9.740vw;
    height: 9.740vw;
}

.smm .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 7.812vw;
}
.smm .bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.coverflow-container {
    width: min(72.9688vw, 1401px); /* 72.9688vw of 1920px */
    margin: min(5.7292vw, 110px) auto;
    margin-left: min(9.3750vw, 180px);
    margin-right: min(9.3750vw, 180px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: min(78.125vw, 1500px);
}

.coverflow-container-pc {
    width: min(72.9688vw, 1401px); /* 72.9688vw of 1920px */
    margin: 1.5vw auto 0;
    margin-left: min(9.3750vw, 180px);
    margin-right: min(9.3750vw, 180px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: min(78.125vw, 1500px);
}

.poster-pc-arrow-left {
    position: absolute;
    left: -2.7%;
    top: 50%;
    transform: translateY(-50%);
}

.poster-pc-arrow-right {
    position: absolute;
    right: -2.7%;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
}

.coverflow-pc{
    display:block;
}

/* 移动端显示，PC端隐藏 */
.coverflow-mobile {
    display: block;
}

/* PC端轮播容器 */
/* PC端隐藏移动端 coverflow，移动端显示 */
@media (min-width: 769px) {
    .coverflow-mobile {
        display: none !important;
    }
}
  
  .coverflow {
    position: relative;
    width: 100%;
    height: min(15.625vw, 300px);
  }
  
  .cf-card {
    width: min(20.8854vw, 401px);
    height: min(24.3750vw, 468px);
    border-radius: min(1.6667vw, 32px);
    overflow: hidden;
    position: absolute;
    top: min(0.521vw, 10px);
    left: calc(50% - min(10.4167vw, 200px));
    transition: all 0.55s cubic-bezier(.25,1.5,.5,1);
    box-shadow: 0 min(0.625vw, 12px) min(1.771vw, 34px) 0 rgba(13, 10, 44, 0.08);
  }
  
  .cf-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .cf-nav-btn {
    position: absolute;
    width: 2.500vw;
    height: 2.500vw;
    border: none;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.146vw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    transition: 0.25s;
  }
  
  .cf-prev { left: -3.125vw; }
  .cf-next { right: -3.125vw; }
  
  .cf-nav-btn:hover {
    background: white;
    box-shadow: 0 0.208vw 0.625vw rgba(0,0,0,.15);
  }
  

  .fill-out-section{
    display: flex;
    flex-direction: column;
    padding: 6.2500vw 19.7917vw 7.2917vw 19.7917vw;
    background: rgba(247, 247, 247, 1);
  }

  .fill-out-section-cotent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60.4688vw;
    
  }
  .fill-out-section-part1{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .fill-out-section-part3{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .green-heart{
    position: absolute;
    width:7.9687vw;
    height: 9.0182vw;
    top: -2.083vw;
    left: 12%;
  }

  .orange-line{
    position: absolute;
    width:6.7708vw;
    height: 4.7917vw;
    top: 2.604vw;
    right: 15%;
  }

  .fill-out-part-text{
    font-size: 7.2917vw;
    font-weight: 900;
    line-height: 120%;
}



.fill-out-section-part2{
    transform: translateX(8%);
}

.to-get-an-text{
    transform: translateX(12%);
}

.black-arrow-box{
    position: absolute;
    top:2.344vw;
    left: 20%;
}

.gift-box-box{
    position: absolute;
    top: 2.083vw;
    right: -5%;
}

.fill-out-section-part4{
    transform: translateX(-9.5%);
}

.lssf-section{
    padding:8.3333vw 10.7813vw 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.lssf-section-part1{
    display: flex;
    position: relative;
}

.lssf-section-text{
    font-size:5vw;
    font-weight:700;
}

.somethingFresh{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top:55%;
    left:15.5%;
}

.flower-icon-box{
    width: 11.3542vw;
    height: 11.3542vw;
    transform: translateX(120%);
}

.picture-box{
    margin-top:9.3750vw;
    width: 100%;
    overflow: visible;
}

.picture-box-container{
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
}

.left1-img-box{
    width:12.5vw;
    height: 15.2vw;
}

.left2-img-box{
    width:14.8vw;
    height: 14.8vw;
}

.right2-img-box{
    width:14.8vw;
    height: 14.8vw;
}

.right1-img-box{
    width:12.5vw;
    height: 15.2vw;
}

.picture-box-left-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
}

.picture-box-center-content{
    display: flex;
    position: relative;
    width:31.6667vw;
    height: 56.25vw;
    overflow: hidden;
    /* border-radius: 1.667vw; */
    flex-shrink: 0;
    border:2px solid #fff;
    /* 内边框模拟：用inset box-shadow 生成内边框 */
    box-shadow: inset 0 0 0 2px #F9F9F9;
}


.picture-box-center-content video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border:2px solid #fff;
}

.picture-box-right-content{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: 1.5vw;
}


.picture-box-part1{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:3.1250vw;
}

.picture-box-part2{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap:3.1250vw;
}

/* 图片项基础样式 */
.picture-item {
    position: relative;
    overflow: hidden;
    border-radius: 1.5vw;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* hover时稍微放大 */
.picture-item:hover {
    transform: scale(1.05);
}

.picture-box-left-content,
.picture-box-right-content {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

/* 图片项样式 - 去掉3D效果 */
.picture-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1.5vw;
}

.faq-info-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10.417vw 0 4.062vw 0;
    padding:0 10.208vw;
}

.faq-title-content{
    width:16.667vw;
    height:6.042vw;
    border-radius:31.250vw;
    /* background: #FD5000; */
    background: rgba(26, 26, 26, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.250vw;
}

.faq-title-text{
    font-family: Roboto;
    font-weight: 700;
    font-style: Bold;
    font-size: 3.333vw;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #FFF;
}

.orange-arrow-box{
    width: 4.010vw;
    height: 4.010vw;
    opacity: 1;
}

.faq-info-content{
    margin-top:4.062vw;
    width: 100%;
    background: url('/wp-content/themes/hqd/assets/images/activity/faq.png') no-repeat center center;
    background-size: 100% 100%;
    /* width: 79.635vw; */
    height: auto;
    border-radius: 3.333vw;
}

.faq-info-content-title{
    font-weight: 700;
    font-size: 3.333vw;
    width:100%;
    text-align: center;
    color: #FFF;
    margin-top:3.333vw;
}

.faq-info-content-icon-box{
    position:relative;
    width:100%;
}

.smile-face-icon{
    position: absolute;
    top: -4.948vw;
    right: 2.604vw;
    width: 7.812vw;
    height: 7.812vw;
}

.faq-info-content-item-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 1.042vw;
    gap: 0;
    margin-bottom: 0;
    width: 55.729vw;
}

.faq-info-content-item-box-list{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.042vw;
}

.faq-info-content-item-answer{
    background:#FFF;
    width:100%;
    max-height: 0;
    overflow: hidden;
    border-radius: 0 0 0.833vw 0.833vw;
    padding: 0.9375vw 8.229vw 0 9.323vw;
    margin-top: 0;
    opacity: 0;
    transition: max-height 0.15s ease-in, 
                padding 0.15s ease-in, 
                opacity 0.1s ease-in;
    font-size: 1.458vw;
    font-weight: 400;
    color: #FD5000;
    line-height: 1.5;
    box-sizing: border-box;
}

.faq-info-content-item-box.active .faq-info-content-item-answer{
    max-height: 52.083vw;
    padding: 1.042vw 8.229vw 1.042vw 9.323vw;
    margin-top: 0;
    opacity: 1;
    transition: max-height 0.2s ease-out, 
                padding 0.2s ease-out, 
                opacity 0.15s ease-out;
}

.faq-info-content-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFF;
    border-radius:0.833vw;
    width:55.729vw;
    height: 4.167vw;
    cursor: pointer;
    transition: background 0.15s ease-out, border-radius 0.2s ease-out;
}

.faq-info-content-item:hover{
    background: #F8F8F8;
}

.faq-info-content-item-box.active .faq-info-content-item{
    border-radius: 0.833vw 0.833vw 0 0;
}

.faq-info-content-item-number{
    font-size:2.917vw;
    font-weight: 500;
    margin-left: 1.094vw;
    color:#1A1A1A;
    opacity:0.6;
    flex-shrink: 0;
    transition: color 0.2s ease-out, opacity 0.2s ease-out;
}

.faq-info-content-item-box.active .faq-info-content-item-number{
    color: #FD5000;
    opacity: 1;
}

.faq-info-content-item-icon{
    width:2.292vw;
    height:2.292vw;
    margin-right: 0.781vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-info-content-item-icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.15s ease-in;
}

.faq-info-content-item-box.active .faq-info-content-item-icon img{
    transform: rotate(180deg);
    transition: transform 0.2s ease-out;
}

.faq-info-content-item-text{
    font-size:1.667vw;
    font-weight:400;
    color:#1A1A1A;
    opacity:0.6;
    flex: 1;
    margin-left: 6.510vw;
}

.faq-info-content-item-tips-box{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:1.667vw 0 6.354vw 0;
}

.faq-info-content-item-tips{
    width:55.729vw;
    color: #fff;
    text-align: center;
    font-size: 1.250vw;
    font-style: normal;
    font-weight: 400;
    opacity: 0.6;
}
.faq-info-star-box{
    width:100%;
    position: relative;
}

.star1-icon{
    position: absolute;
    top: -9.635vw;
    left: 2.865vw;
    width: 4.688vw;
    height: 4.688vw;
}

.star2-icon{
    position: absolute;
    top: 0;
    right: 2.812vw;
    width:7.448vw;
    height:7.448vw;
}

.black-arrow-icon{
    width:4.5833vw;
    height:4.5833vw;
}

.gift-box-icon{
    width:10.1563vw;
    height:10.6771vw;
}

.flower-icon-icon{
    width: 11.3542vw;
    height: 11.3542vw;
}

.orange-arrow-icon{
    width:4.0104vw;
    height:4.0104vw;
}

.pawfy-section-content-text-title-mobile{
    display: none;
}


/* ==========================================
   PC大屏幕自适应优化 (1920px+)
   ========================================== */
@media (min-width: 1920px) {
    /* 限制内容最大宽度，在大屏幕上居中显示 */
    .hqd-brand-section {
        max-width: 1920px;
        margin: 0 auto;
        height: 45vw; /* 45vw of 1920px */
        position: relative;
    }
    
    .hqd-brand-section-bg .bg-pic1 {
        width: 5.7292vw;
        top: 6.8750vw;
        left: 9.3750vw;
    }
    
    .hqd-brand-section-bg .bg-pic2 {
        width: 5.2604vw;
        bottom: 5.0521vw;
        left: 9.6354vw;
    }
    
    .hqd-brand-section-bg .bg-pic3 {
        width: 5.7292vw;
        top: 2.9688vw;
        right: 9.6771vw;
    }
    
    .hqd-brand-section-bg .bg-pic4 {
        width: 13.1250vw;
        top: 6.0417vw;
        right: 2.708vw;
    }
    
    .hqd-brand-section-bg .bg-pic5 {
        width: 4.8958vw;
        top: 30.4167vw;
        right: 9.7917vw;
    }
    
    .hqd-brand-section-text {
        max-width: 1200px; /* 62.5vw of 1920px */
        max-height: 600px; /* 31.25vw of 1920px */
        font-size: 40px; /* 2.083vw of 1920px */
        padding: 90px 68px;
        border-radius: 40px;
    }
    
    .flow-desc-section {
        max-width: 1920px;
        margin: 0 auto;
        height: 924px; /* 48.125vw of 1920px */
        position: relative;
    }
    
    
    .rabbit {
        top: 6.823vw;
        left: 6.646vw;
        width: 10.729vw;
        height: 10.729vw;
    }
    
    .rabbit .inner {
        width: 7.3958vw;
    }
    
    .so-text {
        top: 9.3750vw;
        left: 20.6250vw;
    }
    
    .yf-text {
        top: 9.3750vw;
        right: 21.0938vw;
    }
    
    .instagram-icon {
        top: 9.6875vw;
        right: 12.1354vw;
        width: 7.0833vw;
    }
    
    .camera {
        top: 20.5729vw;
        left: 16.3542vw;
        width: 8.75vw;
    }
    
    .hqd-text {
        top: 18.6979vw;
        left: 26.5104vw;
    }
    
    .symbol {
        top: 19.1146vw;
        left: 40.9375vw;
        width: 9.2708vw;
    }
    
    .activity-moment-text {
        top:18.5938vw;
        right: 24.0625vw;
    }
    
    .arrow {
        top: 22.7083vw;
        right: 12.3438vw;
        width: 10.1042vw;
    }
    
    .win-text {
        top: 28.0729vw;
        left: 21.8229vw;
    }
    
    .gifts {
        top: 28.0208vw;
        right: 21.4583vw;
    }
    
    .cup {
        top: 37.7604vw;
        right: 7.1979vw;
        width: 9.7396vw;
        height: 9.7396vw;
    }
    
    .cup .inner {
        width: 7.8125vw;
    }
    
    .how-to-enter-section {
        max-width: 1200px; /* 62.5vw of 1920px */
        margin: 0 auto 12.5vw;
    }
    
    .how-to-enter-title {
        font-size: 36px; /* 1.875vw of 1920px */
    }
    
    .how-to-enter-item-content-text {
        font-size: 20px; /* 1.042vw of 1920px */
        line-height: 32px;
        width: 340px;
    }
    
    .how-to-enter-item {
        width: 584px; /* 30.417vw of 1920px */
        padding: 24px 48px;
        border-radius: 24px;
    }
    
    .how-to-enter-item-number {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
    
    .how-to-enter-item-number-text {
        font-size: 18px;
    }
    
    .how-to-enter-item-note {
        font-size: 16px;
    }
    
    .share-now-btn-text {
        width: 272px;
        height: 89px;
        font-size: 32px;
    }

    .start-lucky-draw-btn-text {
        width: 183px;
        height: 60px;
        font-size: 20px;
        border-radius:50px;
    }
    
    .pawfy-section {
        max-width: 1920px;
        margin: 5.6771vw auto 0;
        padding: 0 6.8750vw;
    }
    
    .pawfy-section-content-text-title {
        font-size: 64px;
    }
    
    .coverflow-container {
        max-width: 1401px; /* 72.9688vw of 1920px */
        margin: 110px 180px;
        perspective: 1500px;
    }

    .coverflow-container-pc {
        max-width: 1401px; /* 72.9688vw of 1920px */
        margin: 40px 180px 20px;
        perspective: 1500px;
    }
    
    .coverflow {
        height: 300px;
    }
    
    .cf-card {
        width: 401px;
        height: 468px;
        border-radius: 32px;
        left: calc(50% - 200px);
    }
    
    .fill-out-section {
        max-width: 1920px;
        margin: 0 auto;
        padding: 120px 380px 140px;
    }
    
    .fill-out-section-cotent {
        max-width: 1161px;
    }
    
    .fill-out-part-text {
        font-size: 140px;
    }
    
    .lssf-section {
        max-width: 1920px;
        margin: 0 auto;
        padding: 160px 207px;
    }
    
    .lssf-section-text {
        font-size: 96px;
    }
    
    .faq-info-section {
        max-width: 1920px;
        margin: 0 auto 78px;
        padding: 0 196px;
    }
    
    .faq-title-content {
        width: 320px;
        height: 116px;
        border-radius: 600px;
    }
    
    .faq-title-text {
        font-size: 64px;
    }
    
    .faq-info-content-title {
        font-size: 64px;
        margin-top: 64px;
    }
    
    .faq-info-content-item-box {
        width: 1070px;
    }
    
    .faq-info-content-item {
        width: 1070px;
        height: 80px;
        border-radius: 16px;
    }
    
    .faq-info-content-item-number {
        font-size: 56px;
    }
    
    .faq-info-content-item-text {
        font-size: 32px;
    }
    
    .faq-info-content-item-answer {
        font-size: 28px;
        padding: 18px 158px 0 179px;
    }
    
    .faq-info-content-item-box.active .faq-info-content-item-answer {
        padding: 18px 158px 20px 179px;
        max-height: 1000px;
    }
    
    .faq-info-content-item-tips {
        width: 1070px;
        font-size: 24px;
    }
    
    .how-to-enter-item-content {
        width: 420px;
    }
    
    .how-to-enter-item-icon {
        width: 24px;
        height: 24px;
    }
    
    .how-to-enter-item-phone-section {
        width: 500px;
        height: 500px;
        margin-top: 112px;
    }
    
    .how-to-enter-item-phone-img {
        width: 361px;
        height: 680px;
        top: -82px;
    }
    
    .share-now-btn {
        bottom: -9.6354vw;
    }
    
    .pawfy-button {
        margin-top: 77px;
    }

    .fill-out-button{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 77px;
    }
    
    .sock {
        top: -50px;
        left: 9.1146vw;
        width: 206px;
        height: 206px;
    }
    
    .sock .inner {
        width: 142px;
    }
    
    .smm {
        top: 125px;
        right: 8.3333vw;
        width: 187px;
        height: 187px;
    }
    
    .smm .inner {
        width: 150px;
    }
    
    .green-heart {
        width: 153px;
        height: 173px;
        top: -40px;
    }
    
    .orange-line {
        width: 130px;
        height: 92px;
        top: 50px;
    }
    
    .black-arrow-box {
        top: 45px;
    }
    
    .black-arrow-box img {
        width: auto;
        height: auto;
    }
    
    .gift-box-box {
        top: 40px;
    }
    
    .gift-box-box img {
        width: auto;
        height: auto;
    }
    
    .flower-icon-box {
        width: 218px;
        height: 218px;
    }
    
    .smile-face-icon {
        top: -95px;
        right: 50px;
        width: 150px;
        height: 150px;
    }
    
    .star1-icon {
        top: -185px;
        left: 55px;
        width: 90px;
        height: 90px;
    }
    
    .star2-icon {
        top: 0;
        right: 54px;
        width: 143px;
        height: 143px;
    }
    
    .picture-item-part1 {
        width: 327px;
        height: 398px;
        --s: 327px;
        --depth: 327px;
    }
    
    .picture-item-part2 {
        width: 728px;
        height: 557px;
        --s: 728px;
        --depth: 557px;
    }
    
    .picture-item-part3 {
        width: 388px;
        height: 398px;
        --s: 388px;
        --depth: 388px;
    }
    
    .picture-item-part4 {
        width: 615px;
        height: 462px;
        --s: 615px;
        --depth: 462px;
        transform: translateY(80px);
    }
    
    .picture-box {
        margin-top: 180px;
    }
    
    .picture-box-part1,
    .picture-box-part2 {
        gap: 60px;
    }
    
    .orange-arrow-box {
        width: 77px;
        height: 77px;
    }
    
    .orange-arrow-box img {
        width: 100%;
        height: 100%;
    }
}

/* ==========================================
   超大屏幕优化 (2560px+)
   ========================================== */
@media (min-width: 2560px) {
    .hqd-brand-section,
    .flow-desc-section,
    .poster-generator-section,
    .pawfy-section,
    .fill-out-section,
    .lssf-section,
    .faq-info-section {
        max-width: 2560px;
    }
}

/* ==========================================
   移动端适配 (768px及以下)
   ========================================== */
@media (max-width: 768px) {

    /* Hero Section Mobile */
    .activity-hero {
        height: 147.2vw;
        position: relative;
    }

    .activity-hero-inner {
        height: 100%;
        padding-top: 0;
        aspect-ratio: auto;
        max-height: none;
    }
    
    .activity-hero-placeholder {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .activity-hero-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .activity-hero-video-desktop {
        display: none;
    }
    .activity-hero-video-mobile {
        display: block;
    }

    .activity-hero-play {
        width: 19.2vw;
        height: 19.2vw;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
    }

    .activity-hero-play svg {
        width: 100%;
        height: 100%;
    }

    
    /* hqd-brand-section 移动端样式 */
    .hqd-brand-section {
        width: 100%;
        height: auto;
        /* min-height: 392px; */
        padding: 24px 16px;
        background: #FD5000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* 移动端隐藏所有背景图片 */
    .hqd-brand-section-bg {
        display: none;
    }
    
    .hqd-brand-section-bg img {
        display: none;
    }
    
    /* 移动端文本容器样式 */
    .hqd-brand-section-text {
        width: 100%;
        /* max-width: 343px; */
        height: auto;
        /* min-height: 360px; */
        padding: 20px 16px;
        border-radius: 15.4375px;
        background-color: #FFFFFF;
        box-shadow: 0px 4.631250381469727px 13.121875762939453px 0px rgba(13, 10, 44, 0.08);
        color: #1a1a1a;
        font-size: 18px;
        font-weight: 400;
        line-height: 150%;
        text-align: left;
        z-index: 2;
        position: relative;
        box-sizing: border-box;
    }
    
    .hqd-brand-section-text .activity-text-realy {
        display: inline;
        margin-bottom: 0;
    }
    
    /* 移动端隐藏br标签，让文字自然衔接 */
    .hqd-brand-section-text br {
        display: none;
    }
    
    /* 确保文本在移动端正确换行，文字自然流动 */
    .hqd-brand-section-text span {
        display: inline;
    }
    
    /* How to Enter Section 移动端样式 */
    .how-to-enter-section {
        width: 100%;
        /* max-width: 375px; */
        margin: 0 auto;
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* margin-bottom: 40px; */
        position: relative;
    }
    
    .how-to-enter-section-content {
        width: 100%;
        /* max-width: 343px; */
        display: contents; /* 让子元素直接参与父容器的flex布局 */
    }
    
    .how-to-enter-title {
        font-size: 20px;
        font-weight: 500;
        line-height: 150%;
        text-align: center;
        margin-top: 0;
        margin-bottom: 16px;
        order: 1;
        width: 100%;
        /* max-width: 343px; */
    }
    
    .how-to-enter-content {
        gap: 16px;
        display: flex;
        flex-direction: column;
        width: 100%;
        /* max-width: 343px; */
        order: 3;
        margin-top: 0;
    }
    
    .how-to-enter-item-note {
        display: none; /* 移动端隐藏说明文字 */
    }
    
    .how-to-enter-item {
        display: flex;
        padding: 16px 24px;
        align-items: center;
        gap: 16px;
        border-radius: 14.095887184143066px;
        width: 100%;
        /* max-width: 343px; */
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        box-sizing: border-box;
    }
    
    /* 第一个步骤项 - 激活状态样式 */
    .how-to-enter-item.active {
        background: #FD5000;
        min-height: 56px;
        height: auto;
    }
    
    /* 非激活状态的步骤项 */
    .how-to-enter-item:not(.active) {
        background: #F7F7F7;
        min-height: auto;
        height: auto;
    }
    
    .how-to-enter-item-number {
        width: 24px;
        height: 24px;
        border: 1.1746572256088257px solid #ADADAD;
        text-align: center;
        align-items: center;
        display: flex;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    /* 激活状态的数字圆圈 */
    .how-to-enter-item.active .how-to-enter-item-number {
        border-color: #FFFFFF;
        background: #FFFFFF;
        border: none;
    }
    
    .how-to-enter-item-number-text {
        color: #ADADAD;
        font-family: Poppins;
        font-size: 12px;
        font-weight: 600;
        line-height: 150%;
    }
    
    /* 激活状态的数字文字 */
    .how-to-enter-item.active .how-to-enter-item-number-text {
        color: #FD5000;
    }
    
    .how-to-enter-item-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        gap: 32px;
    }
    
    .how-to-enter-item-content-text {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.1746572653452556em;
        flex: 1;
        width: auto;
    }
    
    /* 激活状态的文字颜色 */
    .how-to-enter-item.active .how-to-enter-item-content-text {
        color: #FFFFFF;
        font-weight: 700;
    }
    
    /* 非激活状态的文字颜色 */
    .how-to-enter-item:not(.active) .how-to-enter-item-content-text {
        color: rgba(0, 0, 0, 0.7);
    }
    
    .how-to-enter-item-icon {
        width: 14px;
        height: 14px;
        background: url('../images/activity/go-grey.svg') no-repeat center center;
        background-size: 100% 100%;
        flex-shrink: 0;
    }
    
    .how-to-enter-item.active .how-to-enter-item-icon {
        background: url('../images/activity/go.svg') no-repeat center center;
        background-size: 100% 100%;
    }
    
    
    .how-to-enter-item:not(.active):hover .how-to-enter-item-number {
        border-color: #ADADAD;
        background: transparent;
    }
    
    .how-to-enter-item:not(.active):hover .how-to-enter-item-number-text {
        color: #ADADAD;
    }
    
    .how-to-enter-item:not(.active):hover .how-to-enter-item-content-text {
        color: rgba(0, 0, 0, 0.7);
    }
    
    /* 移动端显示并调整手机图片 */
    .how-to-enter-item-phone-section {
        display: block;
        order: 2;
        width: 200px;
        height: 200px;
        max-width: 343px;
        margin: 24px 0 40px 0;
        background: url('../images/activity/super-symbol.svg') no-repeat center center;
        background-size: contain;
        position: relative;
        flex-shrink: 0;
    }
    
    .how-to-enter-item-phone-img {
        width: 135px;
        height: auto;
        position: absolute;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -50%);
        transition: all 0.3s ease-in-out;
    }
    
    .how-to-enter-item-phone-img:hover {
        transform: translate(-50%, -50%) scale(1);
    }
    
    .how-to-enter-item-note {
        color: #000;
        font-size: 12px;
        font-weight: 400;
        line-height: 150%;
        margin-top: 16px;
        margin-bottom: 0;
        text-align: left;
    }
    
    .how-to-enter-item-note br {
        display: block;
    }
    
    /* Share Now 按钮移动端样式 */
    .share-now-btn {
        position: static;
        margin: 32px 0;
        transform: none;
        width: 100%;
        max-width: 343px;
        display: flex;
        justify-content: center;
        order: 5;
    }
    
    .share-now-btn-text {
        width: 145.97px;
        height: 48px;
        font-size: 16px;
        font-weight: 700;
        line-height: 150%;
    }

    .start-lucky-draw-btn-text {
        width: 145.97px;
        height: 48px;
        font-size: 16px;
        font-weight: 700;
        line-height: 150%;
        border-radius: 50px;
        margin:0 3px;
    }

    .pawfy-section-content-text-title{
        display: none;
    }

    .pawfy-section-content-text-title-mobile{
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size:24px;
        line-height: 150%;
        font-weight: 500;
    }

    .lssf-section-text{
        font-size:8.5333vw;
        font-weight:700;
    }

    .lssf-section {
        padding: 19.5vw 9.066vw 0;
        display: flex;
        flex-direction: column;
    }

    .somethingFresh{
        width: 100%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 100%;
        left: -0.5%;
    }

    .step1-tips{
        padding:0 34px;
    }

    /* Coverflow Container 移动端样式 */
    .coverflow-container {
        width: 100%;
        margin: 40px auto;
        margin-left: 0;
        margin-right: 0;
        padding: 0 16px;
        perspective: 800px;
    }
    
    /* 移动端显示 coverflow，隐藏PC端轮播 */
    .coverflow-mobile {
        display: block !important;
    }

    .coverflow-pc {
        display: none !important;
    }

    .coverflow {
        height: 230px; /* 基于中心图片高度 */
    }

    .cf-card {
        width: 198px; /* 中心图片宽度 */
        height: 230px; /* 中心图片高度 */
        border-radius: 16px;
        left: calc(50% - 99px); /* 198px / 2 = 99px */
        top: 0;
        box-shadow: 0px 6px 17px 0px rgba(13, 10, 44, 0.08);
    }

    /* 移动端隐藏导航按钮 */
    .cf-nav-btn {
        display: none;
    }

    .pawfy-section{
        width: 100%;
        margin: 3.966vw 0 44px 0;
        padding: 5vw 0;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    

    .flower-icon-box {
        position: absolute;
        width: 19.2vw;
        height: 19.2vw;
        top: -225%;
        right: 22%;
    }

    .flower-icon-icon{
        width: 19.2vw;
        height: 19.2vw;
    }
    
    .picture-box {
        margin-top: 18.2vw;
    }

    .faq-title-content{
        width:25.8667vw;
        height:10.133vw;
        border-radius:31.250vw;
        background: #FD5000;background: rgba(26, 26, 26, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.250vw;
    }


    .faq-title-text {
        font-size: 5.3333vw;
    }

    .orange-arrow-box{
        width:6.4vw;
        height:6.4vw;
    }
    

    .orange-arrow-icon{
        width:6.4vw;
        height:6.4vw;
    }

    .faq-info-content{
        margin-top: 40px;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 20px 0 0;
        background: url('/wp-content/themes/hqd/assets/images/activity/faq.png') no-repeat center center;
        background-size: 100% 100%;
        border-radius: 24px;
        position: relative;
        /* min-height: 439px; */
    }

    .faq-info-content-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        color: #FFFFFF;
        margin-top: 0;
        margin-bottom: 0;
        text-transform: uppercase;
    }

    .faq-info-content-icon-box {
        position: relative;
        width: 100%;
    }

    .smile-face-icon {
        position: absolute;
        top: -20px;
        right: 16px;
        width: 34.4px;
        height: 34.94px;
    }

    .faq-info-content-item-box-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
        padding: 0 16px;
    }

    .faq-info-content-item-box {
        width: 100%;
        /* max-width: 343px; */
        display: flex;
        flex-direction: column;
        margin-top: 0;
        margin-bottom: 0;
    }

    .faq-info-content-item {
        width: 100%;
        height: 24px;
        background: #FFFFFF;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .faq-info-content-item:hover {
        background: #FFFFFF;
    }

    .faq-info-content-item-box.active .faq-info-content-item {
        border-radius: 4px 4px 0 0;
    }

    .faq-info-content-item-number {
        font-size: 14px;
        font-weight: 500;
        margin-left: 5px;
        margin-right: 5px;
        color: #1A1A1A;
        opacity: 1;
        flex-shrink: 0;
        transition: color 0.2s ease, opacity 0.2s ease;
    }

    .faq-info-content-item-box.active .faq-info-content-item-number {
        color: #1A1A1A;
        opacity: 1;
    }

    .faq-info-content-item-text {
        font-size: 14px;
        font-weight: 400;
        color: #1A1A1A;
        opacity: 1;
        flex: 1;
        margin-left: 0;
        line-height: 1.5;
        padding: 4px 0;
    }

    .faq-info-content-item-box.active .faq-info-content-item-text {
        color: #1A1A1A;
        opacity: 1;
    }

    .faq-info-content-item-icon {
        width: 14px;
        height: 14px;
        margin-right: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .faq-info-content-item-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.2s ease;
    }

    .faq-info-content-item-box.active .faq-info-content-item-icon img {
        transform: rotate(180deg);
    }

    .faq-info-content-item-answer {
        background: #FFFFFF;
        width: 100%;
        /* 移动端默认全部展开 */
        max-height: 500px;
        overflow: visible;
        border-radius: 0 0 4px 4px;
        padding: 9px;
        margin-top: 0;
        opacity: 1;
        transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.15s ease-out;
        font-size: 14px;
        font-weight: 400;
        color: #1A1A1A;
        line-height: 1.5;
        box-sizing: border-box;
    }

    .faq-info-content-item-box.active .faq-info-content-item-answer {
        max-height: 500px;
        padding: 9px;
        opacity: 1;
    }
    
    /* 移动端禁用点击交互 */
    .faq-info-content-item {
        pointer-events: none;
        cursor: default;
    }
    
    .faq-info-content-item-icon {
        pointer-events: none;
        cursor: default;
    }

    .faq-info-star-box {
        width: 100%;
        position: relative;
        height: 60px;
        margin-top: 20px;
    }

    .star1-icon {
        position: absolute;
        top: 0;
        right: 40px;
        left:auto;
        width: 43.7px;
        height: 43.7px;
    }

    .star2-icon {
        position: absolute;
        top: 10px;
        left: 32px;
        right: auto;
        width: 27.5px;
        height: 27.5px;
    }

    .faq-info-content-item-tips-box {
        display: none; /* 移动端隐藏说明文字 */
    }

    .faq-info-section{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 14.66vw 0 4.062vw 0;
        padding:0 0;
    }


    .rabbit{
        position: absolute;
        top: 3.823vw;
        left: 6.646vw;
        width: 10.729vw;
        height: 10.729vw;
    }

    .camera{
        position: absolute;
        top: 20.573vw;
        left: 14.25vw;
        width: 8.750vw;
    }

    .instagram-icon{
        position: absolute;
        top: 9.688vw;
        right: 11.479vw;
        width: 7.083vw;
    }

    .sock {
        position: absolute;
        top: 1.396vw;
        left: 9.1146vw;
        width: 10.729vw;
        height: 10.729vw;
    }

    @keyframes float1 {
        0%, 100% {
            transform: translateY(0px) rotate(0deg);
        }
        50% {
            transform: translateY(-4vw) rotate(5deg);
        }
      }

      @keyframes float2 {
        0%, 100% {
            transform: translateY(0px) rotate(0deg);
        }
        50% {
            transform: translateY(-5.333vw) rotate(-5deg);
        }
      }

      @keyframes float3 {
        0%, 100% {
            transform: translateY(0px) rotate(0deg);
        }
        50% {
            transform: translateY(5.333vw) rotate(5deg);
        }
      }

      @keyframes float4 {
        0%, 100% {
            transform: translateY(0px) rotate(0deg);
        }
        50% {
            transform: translateY(-4vw) rotate(-5deg);
        }
      }

    .flow-desc-section {
        position: relative;
        width: 100%;
        height: 48.125vw;
        margin-top:6.6667vw;
    }
}

/* Upload to Draw Modal Styles */
.upload-draw-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

/* 统一提示弹窗样式 */
.modal-toast {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-toast.active {
    display: flex;
}

.modal-toast-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.modal-toast-content {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 8px 16px;
    max-width: 31.2500vw;
    width: 90%;
    box-shadow: 0px 13.07px 37.02px 0px rgba(13, 10, 44, 0.15);
    animation: toastSlideIn 0.3s ease-out;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.modal-toast-content:hover {
    transform: scale(1.02);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-toast-message {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #1A1A1A;
    text-align: center;
    margin: 0;
}

.upload-draw-modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.modal-step {
    position: relative;
    z-index: 1;
    display: none;
}

.modal-step.active {
    display: block;
}

.modal-content {
    position: relative;
    /* width: 34.3750vw; */
    background: linear-gradient(57deg, rgba(255, 129, 20, 1) 2%, rgba(255, 187, 143, 1) 50%, rgba(253, 80, 0, 1) 100%);
    border-radius: 1.6667vw;
    padding: 4.1667vw;
    box-shadow: 0px 13.07px 37.02px 0px rgba(13, 10, 44, 0.08);
}

.modal-close {
    position: absolute;
    top: 1.0417vw;
    right: 1.0417vw;
    width: 1.5625vw;
    height: 1.5625vw;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.modal-close img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}

.form-field {
    position: relative;
}

.form-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #1A1A1A;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    width: 95px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.required-asterisk {
    color: #FF0000;
}

.form-input {
    width: 100%;
    height: 40px;
    padding: 11px 16px;
    padding-left: 121px;
    background: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #1A1A1A;
    box-sizing: border-box;
    text-indent: 0;
}

.form-input::placeholder {
    color: #1A1A1A;
}

.form-field select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 6L1 11' stroke='%233A3A3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    padding-left: 121px;
}

.modal-hint {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    text-align: center;
    margin: 0 0 24px 0;
    padding: 0 52px;
}

.modal-btn-confirm,
.modal-btn-upload {
    width: auto;
    padding: 8px 40px;
    background: #F7F7F7;
    border: 2.18px solid #FFFFFF;
    border-radius: 40px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: #1A1A1A;
    cursor: pointer;
    box-shadow: 0px 13.07px 37.02px 0px rgba(13, 10, 44, 0.08);
    transition: all 0.3s ease;
    margin: 0 auto;
    display: block;
}

.modal-btn-confirm:hover,
.modal-btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0px 15px 40px 0px rgba(13, 10, 44, 0.12);
}

.modal-btn-upload:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-error-message {
    margin-top: 16px;
    padding: 8px 16px;
    background: #F7F7F7;
    border: 2.18px solid #FFFFFF;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #1A1A1A;
    text-align: center;
    box-shadow: 0px 13.07px 37.02px 0px rgba(13, 10, 44, 0.08);
}

/* Upload Area Styles */
.modal-upload-hint {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF;
    /* text-align: center; */
    margin: 16px 0 24px 0;
    padding: 0 52px;
}

.modal-upload-area {
    width: 220px;
    height: 220px;
    margin: 0 auto 24px;
    border: 4px solid #FFFFFF;
    border-radius: 8px;
    background: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.upload-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.upload-preview {
    position: relative;
    width: 100%;
    height: 100%;
}

.upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.remove-image {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 1.25vw;
    height: 1.25vw;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lucky Draw Styles */
.modal-lucky-draw {
    /* padding: 4.1667vw 6.7708vw; */
    padding: 4.1667vw 0;
}

.lucky-draw-title {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;
    margin: 0 0 40px 0;
}

.lucky-draw-title-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
}

/* 装饰图片区域 */
.lucky-draw-decoration-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.lucky-draw-decoration-box img {
    position: absolute;
    width: auto;
    height: auto;
}

/* 左上角 - cd1.png */
.lucky-draw-decoration-box img:nth-child(1) {
    top: 78px;
    left: 52px;
    width:2.6563vw;
    height:3.8021vw;
    animation: decorationFloat1 6s ease-in-out infinite;
}

/* 右上角 - cd2.png */
.lucky-draw-decoration-box img:nth-child(2) {
    top: 80px;
    right: 31px;
    width:6.7708vw;
    height:2.7083vw;
    animation: decorationFloat2 5s ease-in-out infinite;
}

/* 右下角 - cd3.png */
.lucky-draw-decoration-box img:nth-child(3) {
    bottom: 172px;
    right: 96px;
    width:3.8021vw;
    height: 2.2917vw;
    animation: decorationFloat3 6s ease-in-out infinite;
}

/* 左下角 - cd4.png */
.lucky-draw-decoration-box img:nth-child(4) {
    bottom: 119px;
    left: 122px;
    width:2.1354vw;
    height:2.7083vw;
    animation: decorationFloat4 5.5s ease-in-out infinite;
}


.winner-decoration-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.winner-decoration-box img {
    position: absolute;
    width: auto;
    height: auto;
}


/* 左上角 - cd1.png */
.winner-decoration-box img:nth-child(1) {
    top: 5.0521vw;
    left: 2.3958vw;
    width:2.6563vw;
    height:3.8021vw;
    animation: decorationFloat1 6s ease-in-out infinite;
}

/* 右上角 - cd2.png */
.winner-decoration-box img:nth-child(2) {
    top: 5.0521vw;
    right: 3.9375vw;
    width:0.6771vw;
    height:1.1979vw;
    animation: decorationFloat2 5s ease-in-out infinite;
}

/* 右下角 - cd3.png */
.winner-decoration-box img:nth-child(3) {
    bottom: 7.3958vw;
    right: 2.0833vw;
    width:3.8021vw;
    height: 2.2917vw;
    animation: decorationFloat3 6s ease-in-out infinite;
}





/* 泡泡浮动动画效果 */
/* 泡泡浮动动画效果 - 更柔和的浮动，带有轻微缩放 */
@keyframes decorationFloat1 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-12px) translateX(8px) rotate(3deg) scale(1.05);
    }
    50% {
        transform: translateY(-8px) translateX(-6px) rotate(-2deg) scale(0.98);
    }
    75% {
        transform: translateY(-15px) translateX(4px) rotate(2deg) scale(1.02);
    }
}

@keyframes decorationFloat2 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-10px) translateX(-6px) rotate(-3deg) scale(1.03);
    }
    50% {
        transform: translateY(-14px) translateX(5px) rotate(2deg) scale(0.97);
    }
    75% {
        transform: translateY(-6px) translateX(-2px) rotate(-1deg) scale(1.01);
    }
}

@keyframes decorationFloat3 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(10px) translateX(-6px) rotate(-3deg) scale(1.04);
    }
    50% {
        transform: translateY(14px) translateX(5px) rotate(2deg) scale(0.96);
    }
    75% {
        transform: translateY(6px) translateX(-2px) rotate(-1deg) scale(1.02);
    }
}

@keyframes decorationFloat4 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(12px) translateX(8px) rotate(3deg) scale(1.05);
    }
    50% {
        transform: translateY(8px) translateX(-6px) rotate(-2deg) scale(0.98);
    }
    75% {
        transform: translateY(15px) translateX(4px) rotate(2deg) scale(1.02);
    }
}

/* Lucky Draw Coverflow Styles */
.lucky-draw-coverflow-container {
    /* width: 35.7396vw; */
    width: 100%;
    margin: 0 auto 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 600px;
    height: 225px;
    overflow: hidden;
}

.lucky-draw-coverflow {
    position: relative;
    width: 100%;
    height: 100%;
}

.lucky-draw-cf-card {
    width: 178px;
    height: 208px;
    border-radius: 8px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.55s cubic-bezier(.25,1.5,.5,1);
    box-shadow: 0px 3.43px 9.70px 0px rgba(13, 10, 44, 0.08);
    
}

.lucky-draw-cf-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border:2px solid #fff; */
}

.lucky-draw-start-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.lucky-draw-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius:26.92px;
}

.lucky-draw-start .start-lucky-draw-btn-text {
    position: relative;
}

.start-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: #1A1A1A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 900;
    color: #FFFFFF;
    text-transform: uppercase;
    z-index: 10;
    pointer-events: none;
}

/* Winner Modal Styles */
.modal-winner {
    width: 415px;
    padding: 40px;
    text-align: center;
}

.winner-icon {
    width: 197px;
    height: 230px;
    margin: 0 auto 30px;
}

.winner-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.winner-title {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 20px 0;
}

.winner-message {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7292vw;
    font-weight: 400;
    line-height: 1.5;
    text-transform: lowercase;
    color: #FFFFFF;
    margin: 0 0 30px 0;
}

.winner-prize {
    margin-top: 1.0417vw;
}

.winner-prize .card-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9375vw;
    font-weight: 700;
    line-height: 1.5;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.6250vw 1.25vw;
    border-radius: 0.4167vw;
    display: inline-block;
}

/* Thanks Modal Styles */
.modal-thanks {
    width: 21.6146vw;
    padding: 2.0833;
    text-align: center;
}

.thanks-icon {
    width: 8.6458vw;
    height: 8.6458vw;
    margin: 0 auto 1.5625vw;
}

.thanks-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thanks-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5625vw;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 1.0417vw 0;
}

.thanks-message {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7292vw;
    font-weight: 400;
    line-height: 1.5;
    /* text-transform: lowercase; */
    color: #FFFFFF;
    margin: 0;
}

.step1-tips{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 150%;
    margin-bottom: 40px;
}


/* Responsive adjustments for PC */
@media (max-width: 768px) {

    .modal-close {
        width: 6.4vw;
        height: 6.4vw;
        top:3.2vw;
        right:3.2vw;
    }

    .form-field {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .form-label {
        width: auto;
        max-width: 95px; /* 增加宽度以适应可能更大的文字 */
        font-size: 12px;
    }

    .form-input {
        padding-left: 110px; /* 增加左内边距以适应更宽的标签 */
        font-size: 16px; /* 最小16px避免移动端自动放大 */
        height: 48px; /* 增加高度以适应更大的字体 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-field select.form-input {
        padding-left: 110px; /* 与普通输入框保持一致 */
        padding-right: 35px;
        max-width: 100%;
        width: 100%;
        height: 48px; /* 增加高度以适应更大的字体 */
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        font-size: 16px; /* 最小16px避免移动端自动放大 */
    }

    .form-field select.form-input option {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .modal-upload-hint {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: #FFFFFF;
        /* text-align: center; */
        margin: 16px 0 24px 0;
        padding: 0;
    }

    .modal-content {
        width: 90%;
        /* max-width: 500px; */
        padding: 52px 20px;
        border-radius:16px;
    }

    .modal-lucky-draw {
        padding: 24.2667vw 0 10.6667vw 0 !important;
    }
    
    .lucky-draw-decoration-box img:nth-child(1) {
        top: 7.7333vw;
        left: 7.7333vw;
        width:8.2667vw;
        height:11.7333vw;
        animation: decorationFloat1 6s ease-in-out infinite;
    }
    
    /* 右上角 - cd2.png */
    .lucky-draw-decoration-box img:nth-child(2) {
        top:13.3333vw;
        right: 4vw;
        width:21.8667vw;
        height:8.8vw;
        animation: decorationFloat2 5s ease-in-out infinite;
    }
    
    .lucky-draw-decoration-box img:nth-child(3) {
        bottom: 26.1333vw;
        right: 5px;
        width:19.4667vw;
        height:11.7333vw;
    }
    
    .lucky-draw-decoration-box img:nth-child(4) {
        bottom: 26.9333vw;
        left: 1px;
        width:10.9333vw;
        height:13.8667vw;
    }
    
    .lucky-draw-coverflow-container {
        height: 56.8vw;
        perspective: 500px;
        width: 100%;
        margin: 0 auto 40px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    .lucky-draw-cf-card {
        width: 47.4320vw;
        height: 55.2vw;
        border-radius: 8px;
    }

    .modal-toast-content {
        padding: 8px 16px;
        max-width: 320px;
    }

    .modal-toast-message {
        font-size: 14px;
    }

    .winner-message {
        font-size: 3.7333vw;
    }

    /* 谢谢参与弹窗移动端适配 */
    .modal-thanks {
        /* width由JS通过inline style控制，这里只设置padding */
        padding: 40px 20px;
        box-sizing: border-box;
    }

    .thanks-icon {
        width: 34.6667vw;
        height: 34.6667vw;
        margin: 0 auto 6.4vw;
    }

    .thanks-title {
        font-size: 6.4vw;
        margin: 0 0 4.2667vw 0;
    }


    .thanks-message {
        font-size: 3.7333vw;
        line-height: 1.5;
    }

    .winner-decoration-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }
    
    .winner-decoration-box img {
        position: absolute;
        width: auto;
        height: auto;
    }
    
    
    /* 左上角 - cd1.png */
    .winner-decoration-box img:nth-child(1) {
        top: 25.8667vw;
        left: 2.4vw;
        width:11.2000vw;
        height:16vw;
        animation: decorationFloat1 6s ease-in-out infinite;
    }
    
    /* 右上角 - cd2.png */
    .winner-decoration-box img:nth-child(2) {
        top: 25.8667vw;
        right: 10.2933vw;
        width:3.4667vw;
        height:6.1333vw;
        animation: decorationFloat2 5s ease-in-out infinite;
    }
    
    /* 右下角 - cd3.png */
    .winner-decoration-box img:nth-child(3) {
        bottom: 37.6000vw;
        right: 0.667vw;
        width:14.2667vw;
        height: 8.5333vw;
        animation: decorationFloat3 6s ease-in-out infinite;
    }
    
}

/* 漂浮动效样式 */
.random-floating1{
    animation: float1 6s ease-in-out infinite;
  }
  @keyframes float1 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-1.0417vw) rotate(5deg);
    }
  }
  .random-floating2{
    animation: float2 5s ease-in-out infinite;
  }
  @keyframes float2 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-0.7813vw) rotate(-5deg);
    }
  }
  .random-floating3{
    animation: float3 6s ease-in-out infinite;
  }
  @keyframes float3 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(0.7813vw) rotate(5deg);
    }
  }
  .random-floating4{
    animation: float4 5s ease-in-out infinite;
  }
  @keyframes float4 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-1.0417vw) rotate(-5deg);
    }
  }

/* 花朵图标顺时针旋转动画 */
@keyframes rotateClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.flower-icon-box img {
    animation: rotateClockwise 15s linear infinite;
}

.plus-icon{
    width:33px;
    height:33px;
}

/* 视频底部文字样式 */
.activity-hero-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
    padding: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* margin-bottom:16vw; */
}

.activity-hero-text-line1,
.activity-hero-text-line2,
.activity-hero-text-line3 {
    color: #fff;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
    margin: 0;
    line-height: 1.4;
}

.activity-hero-text-line1 {
    font-size: 3.75vw;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 0.83vw;
    color: rgba(26, 26, 26, 1);
}

.activity-hero-text-line2 {
    font-size: 2.0833vw;
    font-weight: 500;
    line-height: 100%;
    margin-bottom: 0.5vw;
    color: rgba(26, 26, 26, 1);
}

.activity-hero-text-line3 {
    font-size: 1.25vw;
    font-weight: 500;
    line-height: 100%;
    color: rgba(26, 26, 26, 1);
    margin-bottom: 2.7604vw;
}

/* 波浪文字效果 */
.wave-text {
    display: block;
}

.wave-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: waveIn 0.6s ease-out forwards;
}

/* 保留空格的宽度 */
.wave-text .char.space {
    width: 0.3em;
}

@keyframes waveIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.8);
    }
    50% {
        transform: translateY(-10px) scale(1.15);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .activity-hero-text {
        padding: 15px;
        margin-bottom:16vw;
    }
    
    .activity-hero-text-line1 {
        font-size: 6vw;
        margin-bottom: 2vw;
    }
    
    .activity-hero-text-line2 {
        font-size: 5vw;
        margin-bottom: 2vw;
    }
    
    .activity-hero-text-line3 {
        font-size: 4vw;
    }
}


/* 轮播总容器 */
.activity-carousel-container {
    position: relative;
    width: 100%; /* 改为100%以支持自适应 */
    max-width: var(--acontainer-max-w); /* 限制最大宽度 */
    height: var(--acontainer-h); 
    overflow: hidden;
    padding-top: 50px;
    /* 居中显示 */
    margin: 0 auto;
}

/* 页面轨道，用于左右滑动切换 */
.activity-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 单个页面（包含3张图的组） */
.activity-carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* 图片卡片公共样式 */
.activity-card {
    /* 使用变量 */
    width: var(--acard-w);
    height: var(--acard-h);
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 1.6667vw;
    /* box-shadow: 0 10px 20px rgba(0,0,0,0.2); */
    transition: transform 0.4s ease, z-index 0s 0.1s;
    cursor: pointer;
    
    /* 定义 CSS 变量，方便 hover 时继承 */
    --base-rotate: 0deg;
    --base-scale: 1;
    --base-translate-y: 0px;
    
    /* 应用基础变换 */
    transform: translateY(var(--base-translate-y)) rotate(var(--base-rotate)) scale(var(--base-scale));
}

/* --- 布局核心逻辑 --- */

/* 中间图片 */
.activity-card.activity-center {
    z-index: 10;
    /* 使用变量控制重叠 */
    margin-left: var(--aoverlap-x);
    margin-right: var(--aoverlap-x);
    
    --base-rotate: 0deg;
    --base-scale: 1;
    --base-translate-y: 0px;
}

/* 左边图片 */
.activity-card.activity-left {
    z-index: 5;
    /* 使用变量控制下沉 */
    margin-top: var(--aside-drop); 
    
    --base-rotate: -15deg;
    --base-scale: 0.85;
    --base-translate-y: 0px;
}

/* 右边图片 */
.activity-card.activity-right {
    z-index: 5;
    margin-top: var(--aside-drop);
    
    --base-rotate: 15deg;
    --base-scale: 0.85;
    --base-translate-y: 0px;
}

/* --- 悬停效果 --- */
.activity-card:hover {
    z-index: 20;
    /* 使用变量控制上浮距离 */
    transform: translateY(calc(var(--base-translate-y) + var(--ahover-lift))) rotate(var(--base-rotate)) scale(calc(var(--base-scale) * 1.1));
    /* box-shadow: 0 20px 40px rgba(0,0,0,0.3); */
}


/* --- 切换按钮 --- */
.activity-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.activity-nav-btn:hover {
    background: rgba(0,0,0,0.8);
}

.activity-nav-btn.prev { left: 20px; }
.activity-nav-btn.next { right: 20px; }

.activity-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ========================================
   移动端 Picture Box 样式
   ======================================== */

/* 默认PC端显示，移动端隐藏 */
.picture-box-pc {
    display: block;
}

.picture-box-mobile {
    display: none;
}

/* 移动端布局 (屏幕宽度 < 768px) */
@media (max-width: 767px) {
    /* 隐藏PC端3D立方体 */
    .picture-box-pc {
        display: none;
    }
    
    /* 显示移动端布局 */
    .picture-box-mobile {
        display: block;
        margin-top: 9.375vw;
        width: 100%;
        padding: 0;
    }
    
    .picture-box-mobile-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    /* 移动端视频样式 */
    .mobile-video-wrapper {
        width: 61.333vw;
        height: 109.066vw;
        margin: 4vw auto 0;
        overflow: hidden;
        border-radius: 2vw;
        border: 2px solid #fff;
        /* 内边框实现：用box-shadow模拟内边框效果 */
        box-shadow: inset 0 0 0 2px #F9F9F9;
    }
    
    .mobile-video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* 移动端图片容器 */
    .mobile-images-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5.866vw;
        margin-top: 8vw;
        width: 100%;
    }
    
    /* 移动端图片 */
    .mobile-img-box {
        width: 37.866vw;
        height: 46.133vw;
        overflow: hidden;
        border-radius: 2vw;
    }
    
    .mobile-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}