.main {
            background-color: #f7f8fc;
             
        }
        .list{ padding-bottom: 40px;}
       .list h1 {
            font-size: 32px;
            color: #1a2440;
            padding-top: 5px;
            padding-bottom: 12px;
            font-weight: 700;
        }
        .guide-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
     .list .guide-card {transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      grid-template-columns: 1fr 120px;
        }
         .guide-card { 
            display: grid;
            grid-template-columns: 1fr 180px;
         /* align-items: center; */
            position: relative;
            overflow: hidden;
        }

        .card-detail-btn { z-index: 11;
            position: absolute;
            right: 20px;
            bottom: 20px;
            background-color: #2477EF;
            color: #fff;
            border: none;
            border-radius: 8px 0 8px 0;
            padding: 5px 16px;
            font-size:14px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.24s ease;
        }
        .list  .guide-card:hover .card-detail-btn {
            opacity: 1;
        }
      .list .guide-card:hover {
    transform: translateY(-2px);
    border-color: #d6dfec;
    box-shadow: 0 14px 28px rgba(15, 40, 80, .1);
}
        .guide-info{ padding: 20px 0 20px 20px;}
        .guide-info h2 {
            font-size: 20px;
            color:#17223b;
            margin-bottom:12px;
        }
        .guide-info i{ display: inline-block;}
        .feature-item {
            display:flex; 
            gap:4px;
            font-size:14px;
            color:#33394e;
            margin-bottom:6px;
        }
      .list  .feature-item span{text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;/*--行数--*/}
        .feature-item svg {
            margin-top: 3px;
            width:14px; max-width: 14px; min-width: 14px;
            height:14px;
            fill:#e6a23c;
        }
        .tag-wrap {
            margin:12px 0 8px;
            display:flex;
            flex-wrap:wrap;
            gap:6px;
        }
        .tag {

            background:#f0f2f8;
            color:#444b66;
            font-size:12px;
            padding:3px 8px;
            border-radius:4px;
        }
        .card-desc {
            font-size:12px;
            color:#acafb9;
            line-height:1.5;
        }
        .avatar-area { margin-left: auto;
            display:flex;
            justify-content:center;
            align-items:last baseline; z-index: 10;
        }
        .avatar-placeholder {
            width: 100px;
            height:160px;
            background-color:#e8ebf2;
            border-radius:8px;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        /* Pad */
        @media (max-width:1024px) {
            .main{ padding: 0 20px;}
            .guide-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .list h1 {
                font-size:26px;
            }
        }
       
 .i_pai{ position: relative; top: 2px; display:block; background-repeat:no-repeat;background-image: url(../images/ky_cy/dyap_15.svg); background-size: contain; width: 14px; height: 14px; margin-right: 4px; min-width:14px;   } 

.guide-info > .i_pai{ position: absolute; top: auto; right: 10px; bottom:10px; width: 60px; height:60px; z-index: 20;}
           .list .guide-card:hover .guide-info > .i_pai{   right: 60px;}

 .i_pai.pai_1{ background-image:url(../images/ky_cy/dyap_07.svg);}
 .i_pai.pai_2{ background-image: url(../images/ky_cy/dyap_14.svg);}
 .i_pai.pai_3{ background-image: url(../images/ky_cy/dyap_16.svg);}
 .i_pai.strat{ background-image: url(../images/ky_cy/icon.svg);}

 .tw .i_pai.pai_2{ background-image: url(../images/ky_cy/tw/dyap_14.svg);}
 .tw .i_pai.pai_3{ background-image: url(../images/ky_cy/tw/dyap_16.svg);}
  .daoyouanpai tr:nth-of-type(even) th,.daoyouanpai tr:nth-of-type(even) td{ background-color:#fbfbfb  }




   /* 容器：固定右下角 */
        .float-wrap {
            position: absolute;
            right: 40px;
            bottom: 40px;
        }
        .glass-box-1, .glass-box-2 ,.i_pai{transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;}

        /* 第一个：旋转45°，普通毛玻璃 */
        .glass-box-1 {
            position: absolute;
            right: -140px;
            bottom: -140px;
            width: 180px;
            height: 180px;
            transform: rotate(55deg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            background: rgba(255,255,255,0.25);
            border: 1px solid rgba(255,255,255,0.35);
            border-radius: 26px;
            z-index: 10;
        }

        /* 第二个：旋转50°，蓝色调，0.5透明度毛玻璃 */
        .glass-box-2 {
            position: absolute;
            right: -40px;
            bottom: -180px;
            width: 180px;
            height: 180px;
            transform: rotate(60deg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            background: rgba(53, 103, 203, 0.6);
            border: 1px solid rgba(156, 232, 255, 0.4);
            border-radius: 26px;
            z-index: 9;
        }
    .list .guide-card:hover .glass-box-1 {
            position: absolute;
            right: -170px;
            bottom: -160px;
              transform: rotate(30deg);
   }
          .list .guide-card:hover .glass-box-2{
            transform: rotate(70deg);
            position: absolute; 
            right: -20px; height: 300px;
            bottom: -240px;
         }
.main_cy .glass-box-2 {
            transform: rotate(130deg);
            position: absolute; 
            right: -130px; width: 120px; height:520px; 
            top: -320px;
         }
         .glass-box-1 {
            transform: rotate(40deg);
    position: absolute;
    right: -180px;
    bottom: -180px;
    width:200px;height: 320px;
         }
        /* 移动端缩小位置和尺寸 */
        @media (max-width: 640px) {
            .float-wrap {
                right: -20px;
                bottom: -20px;
            }
            .glass-box-1,
            .glass-box-2 {
                width: 120px;
                height: 120px;
            }
            .glass-box-1 {
                right: -40px;
                bottom: -70px;
            }
            .glass-box-2 {
                right: -10px;
                bottom: -40px;
            }
        }
        .sub_nav{ background: #f7f8fc;}




         /* Mobile */
        @media (max-width:640px) {
            .guide-grid {
                grid-template-columns: 1fr;
            }
            .guide-card {
                grid-template-columns: 1fr 90px;
               
            }
            .avatar-placeholder {
                width:80px;
                height:130px;
            }
           .list h1 {
                font-size:22px;
            }
            .main {
                padding: 12px 20px;
            }
         .guide-info > .i_pai{ top: 0; bottom: auto;}
        }



        /* 详情页 */
        .guide-grid2{ width: 100%;}
        .container{max-width:900px;margin:0 auto  ;background:#fff;border-radius:16px;box-shadow:0 8px 25px rgba(0,0,0,.08);overflow:hidden;}
.main_cy{  padding-bottom: 40px;}
/* PC 左右布局 */
/* .header{display:grid;grid-template-columns:1fr 220px;gap:30px;padding:35px;} */
.guide-info h2{font-size:24px;color:#111;margin-bottom:10px;}
.feature-item span{display:flex;gap:8px;font-size:15px;color:#444;margin-bottom:8px;}
.header{  border-radius: 20px; border: 2px solid #fff;   background: linear-gradient( -40deg, rgba(0, 0, 0, 0.08) 0%, transparent 60%); margin-bottom: 20px;}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.tag{background:#f0f2f8;color:#333;font-size:13px;padding:4px 12px;border-radius:6px;}
.avatar{width:100%;height:260px;object-fit:cover;border-radius:12px;}

.main2{padding:0 35px 40px;}
.section{margin-bottom:30px;}
.section h2{font-size:18px;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:12px;color:#222;}
.section h2::before{ display: inline-block; height:18px;content: ""; border-left: 4px solid rgba(53, 103, 203, 1); margin-right: 8px; vertical-align: middle; position: relative; top: -2px;}
.section p{font-size:15px;line-height:1.8;color:#555;margin-bottom:10px;}
.main_cy .guide-info{ padding: 20px 40px;}
/* 手机上下布局 */
@media (max-width:640px){
    .guide-info h2{ font-size: 18px;}
    .main_cy{ padding: 0 !important;}
    .main_cy{ padding: 0 20px;}
    .main_cy .guide-info{ padding: 20px 0 20px 20px;}
    .avatar{height:240px;max-width:260px;margin:0 auto;display:block;}
    .info{margin-top:20px;}
   .main2{padding:0 20px 20px;}
    .guide-card{    align-items: flex-end;}
    .main_cy .glass-box-2{ bottom: -420px; top: auto;}
    .main_cy .guide-info h2{ font-size: 24px;}
}

/* 评价 */
.pingjialist{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.pingjialist .item{
    display:flex;
    gap:12px;
}
.pingjialist .avatar{
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:50%;
    background:#e5e7eb;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    background-size:26px;
    background-repeat:no-repeat;
    background-position:center;
}
.pingjialist .bubble{
    background:#f3f4f6;
    padding:14px 16px;
    border-radius:12px;
    border-top-left-radius:4px;
    font-size:15px;
    line-height:1.7;
    color:#444;
}




/* 弹窗遮罩 */
.sj_mask {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.65);
    z-index: 999;
}
/* 弹窗外层盒子 */
.sj_list {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 960px;
    max-height: 88vh;
    background: #fff;
    z-index: 1000;
    border-radius: 6px;
    overflow: hidden;
}
/* 关闭按钮 */
.sj_list .close-btn {
    text-align: right;
    padding: 12px 16px;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    user-select: none;
}
/* 内容滚动区域 */
.sj_listin {
    padding: 0 24px 24px;
    max-height: calc(88vh - 60px);
    overflow-y: auto;
}
.loading {
    padding: 60px 0;
    text-align: center;
    color: #888;
}
@media (max-width:640px){
.sj_list{ border-radius: 6px 6px 0 0;left: 0; right: 0; bottom: 0; top: auto;    transform: translate(0, 0); width: auto;}
.sj_listin{ padding: 0;}
}

      .h1__t{ display: flex; align-items: center; justify-content: space-between;}
       .h1__t .on_r{ color: #2477EF;  }
       @media (max-width:640px){
       .h1__t h1{ padding-bottom: 5px;}
       .h1__t{ flex-direction: column; justify-content: flex-start;  align-items: flex-start;}
        .h1__t .on_r{  padding-bottom: 12px ;}
       }