/* __F156_PC_FRAME__ 电脑宽屏打开: 中间保持手机竖版(750px) + 两侧紫色背景与浮动光圈特效。
   只在屏幕宽度 > 800px 时生效, 手机/平板竖屏完全不受影响。回滚 = 删掉 index.html 里引用本文件的那行和 pc-bubbles 那段。 */
.pc-bubbles { display: none; }

@media screen and (min-width: 801px) {
    html { background: #241447; }
    body {
        background: radial-gradient(ellipse at 50% 35%, #4b2e7c 0%, #36215f 45%, #231446 100%) fixed;
        min-height: 100vh;
    }

    /* 中间竖版内容列 */
    #asd_body {
        position: relative;
        z-index: 1;
        width: 750px;
        margin: 0 auto;
        min-height: 100vh;
        background: #291959;
        box-shadow: 0 0 48px rgba(0, 0, 0, .5);
        overflow: hidden;
    }

    /* 顶部固定条收进中间列 */
    .top {
        width: 750px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    /* 联系客服挂件贴中间列右边缘(不给父级加 transform, 以免 fixed 定位失效) */
    .btn1 a.qq-bottom { right: calc(50% - 375px); }

    /* 两侧光圈特效层 */
    .pc-bubbles {
        display: block;
        position: fixed;
        left: 0; top: 0; right: 0; bottom: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }
    .pc-bubbles i {
        position: absolute;
        display: block;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .16), rgba(210, 180, 255, .07) 60%, rgba(255, 255, 255, .03));
        -webkit-animation: f156float 16s ease-in-out infinite;
        animation: f156float 16s ease-in-out infinite;
    }
    .pc-bubbles i:nth-child(1)  { width: 220px; height: 220px; left: 6%;  top: 8%;  animation-duration: 18s; }
    .pc-bubbles i:nth-child(2)  { width: 120px; height: 120px; left: 22%; top: 26%; animation-duration: 13s; animation-delay: -4s; }
    .pc-bubbles i:nth-child(3)  { width: 260px; height: 260px; left: 2%;  top: 52%; animation-duration: 20s; animation-delay: -8s; }
    .pc-bubbles i:nth-child(4)  { width: 70px;  height: 70px;  left: 18%; top: 70%; animation-duration: 11s; animation-delay: -2s; }
    .pc-bubbles i:nth-child(5)  { width: 150px; height: 150px; left: 12%; top: 84%; animation-duration: 15s; animation-delay: -6s; }
    .pc-bubbles i:nth-child(6)  { width: 40px;  height: 40px;  left: 27%; top: 12%; animation-duration: 9s;  animation-delay: -3s; }
    .pc-bubbles i:nth-child(7)  { width: 26px;  height: 26px;  left: 4%;  top: 38%; animation-duration: 10s; animation-delay: -5s; }
    .pc-bubbles i:nth-child(8)  { width: 240px; height: 240px; right: 5%;  top: 4%;  animation-duration: 19s; animation-delay: -7s; }
    .pc-bubbles i:nth-child(9)  { width: 130px; height: 130px; right: 21%; top: 30%; animation-duration: 14s; animation-delay: -1s; }
    .pc-bubbles i:nth-child(10) { width: 280px; height: 280px; right: 1%;  top: 48%; animation-duration: 21s; animation-delay: -9s; }
    .pc-bubbles i:nth-child(11) { width: 80px;  height: 80px;  right: 17%; top: 66%; animation-duration: 12s; animation-delay: -4s; }
    .pc-bubbles i:nth-child(12) { width: 170px; height: 170px; right: 10%; top: 80%; animation-duration: 17s; animation-delay: -10s; }
    .pc-bubbles i:nth-child(13) { width: 44px;  height: 44px;  right: 28%; top: 16%; animation-duration: 9s;  animation-delay: -6s; }
    .pc-bubbles i:nth-child(14) { width: 30px;  height: 30px;  right: 3%;  top: 36%; animation-duration: 11s; animation-delay: -2s; }
}

@-webkit-keyframes f156float {
    0%, 100% { -webkit-transform: translate(0, 0) scale(1); opacity: .85; }
    50%      { -webkit-transform: translate(12px, -34px) scale(1.06); opacity: 1; }
}
@keyframes f156float {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .85; }
    50%      { transform: translate(12px, -34px) scale(1.06); opacity: 1; }
}