body{  background: linear-gradient(to bottom, #F7EBDA, #ffffff);
}html, body {
   
    font-family: "Microsoft YaHei",Arial;
    -webkit-font-smoothing: antialiased;
    
}
@font-face {
  font-family: D-DIN-Bold;
  font-weight: bold;
  src: url('/static/css/vip/D-DIN-Bold.eot'), url('/static/css/vip/D-DIN-Bold.otf') format('opentype');
}

        .container_vip {
            width: 1220px;
          
            border-radius: 12px;
          
            overflow: hidden;
            display: flex;
            flex-direction: column;
			margin:40px auto 20px;
        }

        /* --- 顶部 Header (使用您提供的背景图) --- */
 .container_vip .header {
    width: 100%;
    height: 72px;
    background-image: url('/static/image/viptop.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
        
        /* 隐藏Header内的文字，仅作SEO用途，因为文字已在图片中 */
        .container_vip .header-text-hidden {
            visibility: hidden; 
            height: 100%;
        }

        /* --- 主体内容 --- */
        .main-body {
            display: flex;
            padding: 20px 30px 30px 30px;
            gap: 20px;background:#fff
        }

        /* 左侧区域 */
        .left-section {
            flex: 1;
        }

        /* 右侧侧边栏 */
        .right-sidebar {
            width: 300px;
            padding-left: 20px;
           background:#FAFAFA;
            display: flex;
            flex-direction: column;
            align-items: center;border-radius:12px
        }

        /* --- 价格卡片网格 --- */
        .container_vip .price-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 15px;
        }

        .container_vip .price-card {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            height: 140px;
            display: flex;
            flex-direction: column;
            
            align-items: center;
            position: relative;
            cursor: pointer;
            transition: all 0.2s;padding-top:12px
        }

        /* 选中状态 */
        .price-card.active {
       
    border-color: rgba(208,100,17,.5);
    background: linear-gradient(0deg, rgba(244, 188, 113, 0.12) 2%, rgba(244, 188, 113, 0.24) 100%),#fff;

            box-shadow: 0 0 0 1px #dcb882 inset;color: #533A23;
        }

        /* 买2送1 红色角标 */
        .promo-tag {
     position: absolute;
    height: 18px;
    line-height: 18px;
    border-radius: 6px 0px 0px 0px;
    background: linear-gradient(270deg, #F04040 0%, #FF6060 99%);
    color: #fff;
    font-size: 13px;
    padding-left: 6px;
    top: -6px;
    left: -2px;
        }
        /* 角标折角效果 */
        .promo-tag::after {
        content: " ";
    background: url(/static/image/angle_right-881e7622.png);
    width: 7px;
    height: 18px;
    background-size: 7px 18px;
    position: absolute;
    right: -7px;
        }

       .container_vip  .card-title {
            font-size: 18px;
            font-weight: bold;
            color: #333333;
            
        }
		  .container_vip  .active .card-title {
            
            color: #633410;
            
        }
		

       .container_vip  .card-price {
            color: #ea3d3d; font-size: 32px;
    font-weight: bold;
    font-family: D-DIN-Bold;
        }
        
        .container_vip .card-price span { font-size: 14px; }

       .container_vip  .card-daily {
            font-size: 13px;
            color: #666;
            margin-top: 5px;
        }
     .container_vip  .card-daily span{
           
            color: #ea3d3d;
           
        }
       .container_vip  .save-badge {
        
            font-size: 14px;
            padding: 2px 8px;
           width:100%;
		   position:absolute;bottom:0;height:40px;text-align:center;padding-top:8px;border-bottom-left-radius: 8px;
  /* 单独设置右下角圆角 */
  border-bottom-right-radius: 8px;
  background-color: #f8f8f8;
    color: #666 ;line-height:24px
            
        }
		  .container_vip .active .save-badge {
     background: #ffe6c4;
    color: #633410;
            
        }
		


        /* --- 倒计时条 --- */
      .container_vip   .countdown-bar {
          
            text-align: center;
            padding: 6px;
            border-radius: 4px;
            font-size: 14px;
            margin-bottom: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;background: linear-gradient(270deg, rgba(240, 64, 64, 0.09) 0%, rgba(240, 64, 64, 0.06) 100%); color: #6a1010;display:none
        }

       .container_vip  .time-box {
            background: #d44d44;
            color: white;
            padding: 1px 4px;
            border-radius: 2px;
            font-weight: bold;
        }

        /* --- 底部权益区域 (Grid布局) --- */
        .bottom-features {
            display: flex;
            gap: 15px;
            height: 240px;
        }

        /* 特权对比图 (左下) */
        .feature-box-left {
            flex: 0 0 40%;
            background: #fffcf7; /* 浅米色背景 */
            border-radius: 8px;
            padding: 20px;
            position: relative;
            border: 1px solid #f7efe0;
        }

        .section-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        /* 模拟3D圆柱 */
        .chart-container {
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            height: 140px;
            padding-bottom: 20px;
        }

        .cylinder {
            width: 50px;
            position: relative;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 12px;
            border-radius: 8px 8px 0 0;
        }

        /* 蓝色基础圆柱 */
        .cyl-blue {
            height: 40px;
            background: linear-gradient(to bottom, #dbe6f4, #bfd4ed);
            color: #6a8bad;
            border: 1px solid #bcd3ee;
            border-bottom: none;
        }
        /* 顶部椭圆 */
        .cyl-blue::before {
            content: '';
            position: absolute;
            top: -8px; left: -1px; right: -1px;
            height: 16px;
            background: #eef5fc;
            border: 1px solid #bcd3ee;
            border-radius: 50%;
            z-index: 2;
        }
        /* 底部虚影模拟 */
        .cyl-blue::after {
            content: '';
            position: absolute;
            bottom: -5px; left: 0; right: 0;
            height: 10px;
            background: #bfd4ed;
            border-radius: 50%;
            z-index: 1;
        }

        /* 金色VIP圆柱 */
        .cyl-gold {
            height: 110px;
            background: linear-gradient(to right, #e8ceaa, #dcb882, #e8ceaa);
            color: #8c6a38;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(220, 184, 130, 0.4);
        }
        /* 金色顶部椭圆 */
        .cyl-gold::before {
            content: '';
            position: absolute;
            top: -8px; left: 0; width: 100%;
            height: 16px;
            background: #f3e2c6;
            border-radius: 50%;
        }

        .vs-text {
            color: #ccc;
            font-style: italic;
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 20px;
        }

        .chart-labels {
            position: absolute;
            right: 20px;
            top: 50px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-size: 13px;
            color: #8c6a38;
            text-align: right;
        }
        .chart-labels div { font-weight: bold; }

        /* 资料包区域 (右下) */
        .feature-box-right {
            flex: 1;
            background: #fffcf7;
            border-radius: 8px;
            padding: 15px;
            border: 1px solid #f7efe0;
        }

        .resource-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 14px;
            color: #555;
        }
        .hot-icon {
            background: #ff5e00;
            color: #fff;
            padding: 0 4px;
            font-style: italic;
            font-weight: bold;
            font-size: 12px;
            border-radius: 2px;
        }

        .resource-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .res-item {
            background: #fff;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 70px;
        }
        
        .res-title {
            font-weight: bold;
            font-size: 13px;
            color: #333;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .res-tags {
            font-size: 10px;
            color: #8c6a38;
            display: flex;
            gap: 5px;
        }
        .tag-check::before { content: '☑ '; }

        /* --- 右侧边栏内容 --- */
       .right-sidebar .final-price {
            margin-top: 14px;
            font-size: 32px;
            color: #ea3d3d;
            color: #f04040;
    font-family: D-DIN-Bold;
    font-size: 32px;
    font-weight: bold;
    line-height: 32px;
        }
        .final-price span { font-size: 14px; }
        
        .price-sub {
            background: linear-gradient(270deg, #E65143 0%, #FF7C5C 100%);
            color: #fff;
            font-size: 12px;
            padding: 2px 4px;
            border-radius: 4px;
            vertical-align: middle;
            margin-left: 5px;   box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.15),  /* 主投影，增加层次感 */
        0 2px 4px rgba(210, 135, 106, 0.3), /* 暖色辅助阴影，贴合渐变色调 */
        inset 0 1px 0 rgba(255, 255, 255, 0.4); /* 内阴影，模拟高光，更立体 */
        }

       .container_vip  .expire-date {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px; margin-top: 5px;
        }

       .container_vip  .qr-section {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .container_vip .qr-box {
            width: 150px;
            height: 150px;
            border: 1px solid #eee;
            padding: 5px;
            margin: 5px auto;
        }
       .container_vip  .qr-box img { width: 100%; height: 100%; }

        .container_vip .secure-text {
            color: #4a90e2;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

.container_vip   .info-list {
    font-size: 12px;
    color: #333;
    line-height: 1.8;
    width: 100%;
    margin-top: 24px;
}
.container_vip   .info-list a{
   color: #333;
   text-decoration:none
}.container_vip   .info-list a:hover{
   color: #128bed;
   text-decoration:underline
}

       .container_vip  .gift-btn {
            margin-top: 20px;
            background: #fff9ed;
            border: 1px solid #dcb882;
            color: #8c6a38;
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
       .container_vip  .gift-btn span {
            background: #dcb882;
            color: #fff;
            font-size: 10px;
            padding: 0 2px;
            margin-right: 2px;
        }
		
		
		     .container_ff {
           
            display: flex;
            gap: 25px;
			border-radius:8px;
			background: linear-gradient(to right, #FAFAFA, #FAF4E9);
			padding-top:12px;padding-left:24px;padding-right:16px
        }

      

        .main-title {
            font-size: 18px;
            font-weight: 800;
            color: #5d4037;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        
        .main-title span.highlight {
            font-size: 24px;
            
        }
		.container_ff .highlight{color:#7E4E2B !important;font-size:28px;font-weight:800}

        .main-title span.sub {
            font-size: 13px;
            font-weight: 500;
            color: #4E331B;
            margin-left: 5px;
        }

        .content-wrap {
            display: flex;
            align-items: flex-end;
            gap: 5px;
        }

        /* 3D 图表 */
        .chart-box {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            width: 200px;
            height: 229px;
            padding-bottom: 25px;
            position: relative;
        }

        .cylinder {
            width: 65px;
            position: relative;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 12px;
            border-radius: 10px 10px 0 0;
        }

        /* 虚线普通会员柱子 */
        .cyl-normal {
            height: 60px;
            background: linear-gradient(to bottom, #dbe6f4, #bfd4ed);
            color: #6a8bad;
            border: 1px solid #bcd3ee;
            border-bottom: none;
        }
        .cyl-normal::before {
            content: '';
            position: absolute;
            top: -10px; left: -1px; right: -1px;
            height: 20px;
            background: #eef5fc;
            border: 1px solid #bcd3ee;
            border-radius: 50%;
            z-index: 2;
        }
        /* 上半部分虚线 */
        .cyl-dashed {
            position: absolute;
            bottom: 60px;
            left: -1px; right: -1px;
            height: 100px;
            border: 1px dashed #ccc;
            border-bottom: none;
            border-radius: 10px 10px 0 0;
            z-index: 0;
        }
        .cyl-dashed::before {
            content: '';
            position: absolute;
            top: -10px; left: -1px; right: -1px;
            height: 20px;
            border: 1px dashed #ccc;
            border-radius: 50%;
        }

        /* 金色VIP柱子 */
        .cyl-vip {
            height: 140px;
            background: linear-gradient(to right, #e8ceaa, #dcb882, #e8ceaa);
            color: #8c6a38;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(220, 184, 130, 0.4);
        }
        .cyl-vip::before {
            content: '';
            position: absolute;
            top: -10px; left: 0; width: 100%;
            height: 20px;
            background: #f3e2c6;
            border-radius: 50%;
        }
        .cyl-vip .vip-base {
            position: absolute;
            bottom: 5px;
            width: 100%;
            font-weight: normal;
            color: rgba(140, 106, 56, 0.7);
        }

        .vs-text {
            color: #ccc;
            font-style: italic;
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .chart-label {
            position: absolute;
            bottom: -5px;
            width: 100%;
            color: #666;
            font-weight: bold;
            font-size: 14px;
        }

        /* 菜单列表 */
        .menu-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;margin-bottom:61px
        }
.right-section .content-panel img{width:100%;height:100%}
        .menu-item {
            background-color: #f8eee1;
            color: #5d4037;
            padding: 6px 0;
            text-align: center;
            border-radius: 6px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .menu-item.active {
           background: linear-gradient(to right, #f7e7d3 0%, #f5dfbf 50%,#f4d3a8 100% );
           
       
        }

        /* ========== 右侧区域 ========== */
       .right-section {
    flex: 1;
    border: 1px solid #fff;
    border-radius: 12px;
    position: relative;
    height: 258px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-top: 5px;
}

        /* 动态小箭头 */
        .arrow-indicator {
            position: absolute;
            left: -8px;
            width: 14px;
            height: 14px;
            background: #fff;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(45deg);
            transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        /* 切换内容面板 */
        .content-panel {
            display: none;
            height: 100%;
           
            animation: fadeIn 0.4s ease;z-index: 99;
    position: relative;
        }
        .content-panel.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateX(5px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* 内容面板顶部 Header */
        .panel-header {
            background: #fff9ef;
            padding: 15px 20px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            border: 1px solid #faeedd;
        }
        
        .panel-title {
            font-size: 16px;
            font-weight: bold;
            color: #5d4037;
        }
        .panel-title span {
            color: #ea564c;
            font-size: 22px;
            margin: 0 5px;
        }

        .hot-tag {
            background: linear-gradient(45deg, #ff8a00, #ff3d00);
            color: #fff;
            font-style: italic;
            font-weight: bold;
            padding: 2px 8px;
            border-radius: 12px 12px 12px 0;
            font-size: 12px;
            margin-left: 10px;
            transform: scale(0.9);
        }

        /* 网格卡片 */
        .card-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .resource-card {
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            padding: 15px;
            background: #fff;
            transition: transform 0.2s;
        }
        .resource-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        }

        .card-title {
            display: flex;
            align-items: center;
            font-size: 15px;
            font-weight: bold;
            color: #333;
        
            gap: 8px;
        }

        .icon-circle {
            width: 32px;
            height: 32px;
            background: #fdf5e8;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #d5b585;
            font-size: 16px;
        }

        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .feature-tag {
            font-size: 11px;
            color: #5d4037;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .feature-tag::before {
            content: '✔';
            display: inline-block;
            background: #d5b585;
            color: #fff;
            font-size: 8px;
            padding: 1px;
            border-radius: 2px;
            line-height: 1;
        }
.right-sidebar .pay-qrcode {
    width: 172px;
    height: 210px;
    position: relative;
}

.right-sidebar .pay-qrcode .app-payment-all {
    width: 100%;
    height: 100%;
    background-size: 100%;
    padding: 6px 10px;  background-image: url(//qcc-static.qcc.com/qcc/pc-web/prod-26.02.134/images/payqrcodek_vip-c1c432be.png);
}.right-sidebar .pay-qrcode .app-payment-all.vip {
    background-image: url(/static/image/payqrcodek_vip-c1c432be.png);
}

.right-sidebar .pay-qrcode .app-payment-all .support-desc {
    text-align: center;
    color: #666;
    font-size: 12px;
   
}.right-sidebar .pay-qrcode .app-payment-all .support-desc .sp-icon {
    width: 14px;
    height: 14px;
    vertical-align: sub;
}.right-sidebar .pay-qrcode .app-payment-all .pay-box {
    width: 152px;
    height: 152px;
    position: relative;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
	margin-top:2px
}.right-sidebar .pay-qrcode .app-payment-all .pay-box .pay-scan-wrap {
    position: relative;
    overflow: hidden;
    padding: 4px 6px;
}.right-sidebar .pay-qrcode .app-payment-all .pay-box .pay-scan-wrap>canvas {
    display: block;
}.right-sidebar .pay-qrcode .app-payment-all .pay-box .mask {
    position: absolute;
    background: hsla(0,0%,100%,.9);
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
    padding-top: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(4px);
    cursor: pointer;font-size:14px
}.m-t-xs {
    margin-top: 5px;
}.right-sidebar .pay-qrcode .app-payment-all .pay-box .mask button {
    width: 80px;
    font-weight: bold;
    border-radius: 4px;
}

.right-sidebar .pay-qrcode .app-payment-all .pay-box .mask button:hover {
   background:#3A6AB9
} 
.qccd-btn > i, .qccd-btn > span {
    display: inline-block;
    transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    pointer-events: none;
}.qccd-btn-primary {
    color: #fff;
    background-color: #128bed;
    border-color: #128bed;
}.qccd-btn-sm {
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 2px;
} .pay-qrcode .app-payment-all .foot-txt {
    text-align: center;
    margin-top: -1px;
    position: relative;
}.pay-qrcode .app-payment-all .dbuy-tag {
    padding: 2px 6px;
    background: rgba(18,139,237,.0784);
    color: #128bed;
    border-radius: 4px;
    font-size: 12px;
    line-height: 14px;
    display: inline-block;
   
} .pay-qrcode .app-payment-all .dbuy-tag .sp-icon {
    width: 14px;
    height: 14px;
    vertical-align: sub;
}