/* =====================================================================
   VIP 会员区视觉层（.xerhuyw-mall，首页 footer-nav 上方区块）
   职责：只写视觉属性（背景/圆角/卡片层级/hover 动效），布局属性归
   layout-flex.css §13（Grid 五等分 + 响应式）。
   素材：skin/images/vip/（004~008.jpg 卡底、00X_2.png 图标、xerhu-vip.jpg 区背景）
   ===================================================================== */

/* ---------- 区块底：绿色（与详情页 vipinfo-page 绿底一致，替代原灰白 logo 墙 xerhu-vip.jpg） ---------- */
.xerhuyw-mall {
    position: relative;
    background: linear-gradient(135deg, #33c765 0%, #29ae5f 100%);
    border-radius: 16px;
}

/* ---------- 标题组：白字（绿底上），字号用 cqw 随容器缩放 ---------- */
.xerhuyw-title {
    text-align: center;
    padding: 24px 0;
}
.xerhuyw-title h2 {
    font-size: 3cqw;
    line-height: 1.4;
    letter-spacing: 4px;
    color: #fff;
}
.xerhuyw-title p {
    margin: 8px 0 0;
    font-size: 1.5cqw;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.9);
}

/* ---------- 卡片（几何归 layout-flex §13，这里只管视觉；整卡悬停上浮） ---------- */
.xerhuyw-app-card {
    position: relative;
    overflow: hidden;
    background-color: #999;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* 底图层：绝对定位铺满卡（缺失会导致 bg 进文档流把 top/bottom 区推移） */
.xerhuyw-app-card-bg {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/* 卡片底图铺满盒内（object-fit 刚性，不随图尺寸漂移） */
.xerhuyw-app-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 卡片 = 两层结构（与 31603 一致）：bg 底图层 + top/bottom 内容层，无额外暗层 */
.xerhuyw-app-card-top {
    position: relative;
    z-index: 2;
    height: 50%;
}
/* 图标（% 定位随卡缩放），字体/位置全随卡 */
.xerhuyw-app-card-top .icon {
    position: absolute;
    left: 0;
    right: 0;
    top: 20.8%;
    transition: top 0.2s;
}
.xerhuyw-app-card-top .icon img {
    display: block;
    margin: 0 auto;
}
/* 名称：常驻，hover 上移补位（cqw 字号随卡缩放） */
.xerhuyw-app-card-top h3 {
    position: absolute;
    left: 0;
    right: 0;
    top: 37.2%;
    font-size: 1.667cqw;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: top 0.2s;
}
.xerhuyw-app-card-top h3:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 0;
    height: 4px;
    margin: 8px auto;
    background-color: #f66f6a;
    transition: width 0.2s 0.2s;
}
/* 价格：常显（用户诉求：一直呈现），压在彩色区底部（波线附近），白字 */
.xerhuyw-app-card-top .price {
    position: absolute;
    left: 18%;
    right: 18%;
    top: 48%;
    margin: 0 auto;
    font-size: 2.917cqw;
    font-weight: bold;
    line-height: 1.2;
    color: #fff;
    opacity: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.xerhuyw-app-card-top .price span {
    font-size: 1.5cqw;
    vertical-align: top;
    margin-right: 2px;
}
/* 下半区：白色半透底 + 深字（用户诉求：白底清晰，图1 观感），字体随容器缩 */
.xerhuyw-app-card-bottom {
    position: relative;
    z-index: 2;
    height: 50%;
    padding: 8% 7% 0;
    font-size: 1.167cqw;
    line-height: 1.7;
    color: #333;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
}
.xerhuyw-app-card-bottom ul,
.xerhuyw-app-card-bottom li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.xerhuyw-app-card-bottom li {
    position: relative;
    text-align: left;
    padding-left: 1.4em;
    margin-bottom: 0.833cqw;
}
.xerhuyw-app-card-bottom li:last-child {
    margin-bottom: 0;
}
.xerhuyw-app-card-bottom li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #29ae5f;
    font-weight: bold;
}
.xerhuyw-app-card-bottom li b {
    color: #111;
}

/* ---------- hover 动效 ---------- */
/* 整卡上浮（用户诉求：悬停整个窗体上浮动） */
.xerhuyw-app-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}
/* 卡内底图轻微放大（原 31603 效果保留） */
.xerhuyw-app-card:hover .xerhuyw-app-card-bg img {
    transform: scale(1.05);
}
.xerhuyw-app-card-bg img {
    transition: transform 0.2s;
}
/* hover 时图标/名称上移补位；价格常显保持不动 */
.xerhuyw-app-card:hover .xerhuyw-app-card-top .icon {
    top: 2.1%;
}
.xerhuyw-app-card:hover .xerhuyw-app-card-top h3 {
    top: 18.1%;
}
.xerhuyw-app-card:hover .xerhuyw-app-card-top h3:before {
    width: 68px;
}

/* ============================================================
   §VIP-DETAIL 详情页视觉层（focusbox/权益卡/slogan/价格卡/FAQ）
   几何约束见 layout-flex.css §14；本页头挂 fontawesome.css + vip.css
   ============================================================ */
/* ============================================================
   vip.css（详情页视觉层）§A 首屏 focusbox + 权益卡 + slogan
   几何约束见 layout-flex.css §14；本节只管视觉。
   移植自 31603-1 站，float 版式一律改 Flex/Grid
   ============================================================ */
body.page-vip { background: #fff; }
.page-vip .site-main { padding-bottom: 40px; }

/* ---------- 首屏 focusbox（顶部大横幅） ---------- */
.page-vip .focusbox {
    position: relative;
    padding: 60px 20px;
    background: #f6f6f6 url(../images/vip/bg_banner_svip_bd6d90c.png) center center / cover no-repeat;
    color: #eee;
    text-align: center;
}
.page-vip .focusbox .nbvip-title {
    font-size: 42px;
    color: #f9c117;
    font-weight: 700;
    margin: 0 0 24px;
    line-height: 1.2;
}
.page-vip .focusbox .focusbox-title {
    margin: 0;
    color: #fff;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 2px;
}
.page-vip .focusbox .pagination {
    margin: 24px 0 0;
}
.page-vip .focusbox .btn-lag {
    display: inline-block;
    padding: 8px 46px;
    font-size: 16px;
    border-radius: 6px;
    color: #fff;
}

/* ---------- focusbox 底部 5 张权益卡（float → Grid 五等分） ---------- */
.page-vip .excerpts-wrapper {
    margin: 24px auto 0;
    max-width: 1200px;
}
.page-vip .excerpts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.page-vip .excerpt {
    background: #fff;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s, transform 0.3s;
}
.page-vip .excerpt:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.page-vip .excerpt .tool-img {
    height: 106px;
    margin-bottom: 8px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-vip .excerpt .tool-img img {
    height: 106px;
    width: auto;
    transition: transform 0.4s;
}
.page-vip .excerpt:hover .tool-img img {
    transform: scale(1.22) rotate(13deg);
}
.page-vip .excerpt h2 {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    margin: 4px 0 0;
}
.page-vip .excerpt h2 a {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* ---------- 六大权益 slogan（float → Flex 双行） ---------- */
.page-vip .schbg-white {
    background: #fff;
    overflow: hidden;
    padding-bottom: 30px;
}
.page-vip .module-line {
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
.page-vip .module-line .text {
    font-size: 26px;
    color: #4c4c4c;
    margin: 0 10px;
    display: inline-block;
}
.page-vip .vip-slogan {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1300px;
    margin: 40px auto 0;
    padding: 20px 40px;
    background: #fff;
    border-radius: 5px;
    gap: 20px 40px;
}
.page-vip .vip-slogan-box {
    display: flex;
    align-items: center;
    width: 380px;
}
.page-vip .vip-slogan-box i {
    width: 100px;
    height: 100px;
    line-height: 100px;
    flex: 0 0 100px;
    background: linear-gradient(90deg, #ed1c24 0, #fb8f02 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 45px;
    text-align: center;
}
.page-vip .vip-slogan-text {
    font-size: 14px;
    color: #898989;
}
.page-vip .vip-slogan-text p {
    margin: 0;
}
.page-vip .vip-slogan-text p:first-child {
    font-size: 18px;
    color: #575959;
    margin-bottom: 4px;
}

/* ---------- 价格卡片区 vipinfo-page（背景图 + 绿色蒙版 + 顶部小舌） ---------- */
.page-vip .vipinfo-page {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 48px;
}
.page-vip .vipinfo-page:before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background-color: #29ae5f;
    opacity: 0.88;
    transition: opacity 1s;
}
.page-vip .vipinfo-page .tongue {
    display: inline-block;
    position: absolute;
    top: -1px;
    left: 50%;
    z-index: 1;
    width: 138px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #8492a6;
    transform: rotate(180deg) translateX(50%);
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='35' viewBox='0 0 138 35'%3E%3Cpath fill='%23FFF' d='M 3.15027 34.4375C 1.74207 34.6025 0.68396 34.7266 0 35L 68.9982 35C 68.9982 35 68.9998 28.6387 69 19.5132C 69 20.7261 69.0001 21.8892 69.0001 22.9956L 69.0018 35L 138 35C 137.316 34.7266 136.258 34.6025 134.85 34.4375C 131.11 33.9995 124.903 33.2729 116.678 28.6875C 111.015 25.3901 106.523 20.9771 102.07 16.6025C 93.5474 8.23096 85.1685 -1.97984e-15 69.0018 3.55056e-31C 69.0006 5.271 69 10.4292 69 15.0952C 69 10.4287 68.9994 5.27148 68.9982 3.55056e-31C 52.8314 1.97986e-15 44.4526 8.23096 35.9302 16.6025C 31.4772 20.9771 26.985 25.3901 21.3221 28.6875C 13.0974 33.2729 6.88965 33.9995 3.15027 34.4375Z'/%3E%3C/svg%3E");
    animation: vip-tongue-float 2s ease infinite;
}
.page-vip .vipinfo-page .tongue:hover {
    animation-play-state: paused;
}
@keyframes vip-tongue-float {
    0%, 100% { transform: rotate(180deg) translateX(50%) translateY(0); }
    50% { transform: rotate(180deg) translateX(50%) translateY(4px); }
}

.page-vip .vipinfo-page .container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.page-vip .vipinfo-page .schtext-center {
    padding-top: 48px;
    text-align: center;
}
.page-vip .vipinfo-page .text-uppercase {
    text-transform: uppercase;
    color: #fff;
    font-size: 16px;
    letter-spacing: 3px;
}
.page-vip .vipinfo-page .schtext-white {
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    margin: 8px 0 0;
}

/* ---------- 5 张价格卡：float → Grid 五等分 ---------- */
.page-vip .home-vip-mod .row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 30px -6px 0;
}
.page-vip .card.ent-base {
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    margin: 6px;
    transition: all 0.3s ease-out;
}
.page-vip .card.ent-base:hover {
    transform: translate(0, -10px);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
}
.page-vip .card .header {
    position: relative;
    border-radius: 6px 6px 0 0;
    height: 228px;
    color: #fff;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    z-index: 1;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.page-vip .card .version {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 150px;
}
.page-vip .card .version img {
    width: 100%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.page-vip .card .price-year {
    margin: 12px 0 15px;
    font-weight: 400;
    display: flex;
    align-items: baseline;
}
.page-vip .card .price-year .dollar {
    font-size: 18px;
    font-weight: 300;
    margin-right: 2px;
}
.page-vip .card .price-year .price {
    font-size: 30px;
    letter-spacing: 1.5px;
    font-weight: 700;
}
.page-vip .card .pricing-deco {
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    z-index: 0;
}
.page-vip .card .pricing-deco svg {
    display: block;
    width: 100%;
    height: 60px;
}
.page-vip .card .pricing-deco .deco-layer {
    transition: transform 0.5s;
}
.page-vip .card:hover .pricing-deco .deco-layer--1 {
    transform: translate3d(15px, 0, 0);
}
.page-vip .card:hover .pricing-deco .deco-layer--2 {
    transform: translate3d(-15px, 0, 0);
}
.page-vip .card .content {
    position: relative;
    flex: 1;
    padding: 14px 12px;
    font-size: 13px;
}
.page-vip .card .content .desc {
    position: relative;
    padding-left: 34px;
    margin-bottom: 14px;
    color: rgba(62, 62, 62, 0.8);
    line-height: 1.5;
}
.page-vip .card .content .desc:last-child {
    margin-bottom: 0;
}
.page-vip .card .content .desc:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 14px;
    width: 9px;
    height: 9px;
    border: 2px solid #3e3e3e;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
    opacity: 0.6;
}
.page-vip .card .content .desc strong.font-scheng {
    color: #3e3e3e;
    font-weight: 700;
}

/* ---------- 价格卡「点击开通」按钮（绿色渐变，全站按钮规范） ---------- */
.page-vip .card .user-login-btn {
    position: relative;
    z-index: 2;
    display: block;
    width: 160px;
    max-width: 90%;
    margin: 6px auto 14px;
    padding: 8px 0;
    border: 0;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    background-color: #29ae5f;
    background-image: linear-gradient(135deg, #3ada7d 10%, #29ae5f 100%);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0);
    transition: box-shadow 0.3s, transform 0.3s;
}
.page-vip .card .user-login-btn:hover {
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

/* ---------- FAQ 常见问题 ---------- */
.page-vip .info-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}
.page-vip .user-usermeta-vip {
    position: relative;
    width: 100%;
    padding-top: 50px;
}
.page-vip .vip-row .vip-item .sc {
    margin: 0 auto;
    padding-top: 50px;
}
.page-vip .vip-row .vip-item .sc-hd strong {
    display: block;
    color: #001529;
    font-weight: 700;
    font-size: 22px;
    line-height: 34px;
}
.page-vip .vip-row .vip-item .sc-hd span {
    display: block;
    color: #999;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1;
    margin-top: 2px;
}
.page-vip .vip-row .vip-item .sc-bd {
    background: #fff;
    border-radius: 8px;
    padding: 10px 30px;
    margin-top: 20px;
}
.page-vip .vip-row .vip-item .faq-list {
    text-align: left;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-vip .vip-row .vip-item .faq-list .item {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ebebeb;
    cursor: pointer;
}
.page-vip .vip-row .vip-item .faq-list .item:last-child {
    border-bottom: 0;
}
.page-vip .vip-row .vip-item .faq-list .item .hd {
    position: relative;
    color: #001529;
    font-size: 15px;
}
.page-vip .vip-row .vip-item .faq-list .item .hd strong {
    font-weight: 600;
}
.page-vip .vip-row .vip-item .faq-list .item .bd {
    display: none;
    padding-top: 10px;
    color: #666;
    font-size: 14px;
    line-height: 1.8;
}
.page-vip .vip-row .vip-item .faq-list .item.active .bd {
    display: block;
}
.page-vip .vip-row .vip-item .faq-list .item .hd:after {
    position: absolute;
    top: 4px;
    right: 20px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #cacaca;
    border-right: 2px solid #cacaca;
    content: "";
    transition: transform 0.3s;
    transform: rotate(45deg);
}
.page-vip .vip-row .vip-item .faq-list .item.active .hd:after {
    transform: rotate(135deg);
}

/* ---------- 全站绿色按钮规范（与首页 VIP 区 / 登录弹窗一致） ---------- */
.page-vip .btn-lag.change-color-lv {
    background-color: #29ae5f;
    background-image: linear-gradient(135deg, #3ada7d 10%, #29ae5f 100%);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0);
    color: #fff;
    text-decoration: none;
}

/* ---------- 响应式：中屏两列 / 手机单列 ---------- */
@media (max-width: 992px) {
    .page-vip .excerpts {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-vip .home-vip-mod .row {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-vip .vip-slogan-box {
        width: 100%;
    }
}
@media (max-width: 576px) {
    .page-vip .focusbox {
        padding: 40px 15px;
    }
    .page-vip .focusbox .nbvip-title {
        font-size: 26px;
    }
    .page-vip .focusbox .focusbox-title {
        font-size: 16px;
        letter-spacing: 1px;
    }
    .page-vip .excerpts {
        grid-template-columns: 1fr;
    }
    .page-vip .home-vip-mod .row {
        grid-template-columns: 1fr;
    }
    .page-vip .module-line .text {
        font-size: 20px;
    }
    .page-vip .vip-slogan {
        padding: 15px;
        gap: 12px;
    }
    .page-vip .vip-slogan-box i {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        line-height: 64px;
        font-size: 30px;
    }
    .page-vip .vip-slogan-text p:first-child {
        font-size: 15px;
    }
}