body,
html {
    margin: 0;
    padding: 0;
    background-color: #f4f6f9;
    height: 100%;

}

.mr-20 {
    margin-right: 20px;
}

.story-top-phone {
    display: none;
}

.banner_top {
    position: relative;
}

.topTitle {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
}

.topTitle1 {
    color: #111111;
    font-size: 60px;
    font-weight: bold;
    font-family: "思源宋体", SimSun, serif;
    /* font-family: "宋体", SimSun, serif;  */
}

.topTitle2 {
    color: #111111;
    font-size: 16px;
    font-weight: 400;
    margin-top: 40px;
}

.topBut {
    display: flex;

    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: bold;
    font-size: 13px;
    margin-top: 50px;
}

.topBut .but1 {
    background-color: #1C5CA6;
    color: #fff;
    width: 130px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 10px;

}

.topBut .but2 {
    width: 130px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #1C5CA6;
    color: #1C5CA6;
    text-align: center;

}

.flexCenter {
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

.story-tab-title {
    height: 70px;
    font-weight: bold;
    font-size: 13px;
    color: #000;
    position: relative;
    margin-bottom: 50px;
}

.story-tab-title .CASEtitleBoxFlex {
    display: flex;
    justify-content: center;
    /* height: 50px; */
    position: relative;
}

.story-tab-title .story-title-smallBox {
    border: 1px solid #d1d1d1;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
    font-size: 14px;
    font-family: AlibabaPuHuiTi, sans-serif;
    background-color: #fff;
    /* 默认背景白色 */
    color: #000;
    /* 默认文字黑色 */
    position: relative;
    /* 关键：为伪元素定位做准备 */
    cursor: pointer;
    /* 可点击提示 */
    transition: all 0.3s ease;
    /* 平滑过渡 */
}

/* active 状态样式 */
.story-tab-title .story-title-smallBox.active {
    background-color: #1c5ca6 !important;
    color: #fff !important;
}

/* 在 active 的 tab 下方添加一个小箭头（三角形） */
.story-tab-title .story-title-smallBox.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    /* 箭头在 tab 下方 */
    left: 50%;
    transform: translateX(-50%);
    /* 水平居中 */
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1c5ca6;
    /* 箭头颜色与背景一致 */
    z-index: 2;
}

/* ==================成功案例============== */
.case-box-pc {
    background-color: #fff;
    padding: 5px;
}

.case-box-phone {
    display: none;
}
 .case-title {
    /*display: flex;*/
    /*justify-content: space-between;*/
    padding: 0 10px;
    margin-top: 5px;
}

 .case-title-left {
    font-weight: bold;
    font-size: 16px;
    color: #111111;

      display: -webkit-box;
  -webkit-line-clamp: 1;        /* 限制显示3行 */
  -webkit-box-orient: vertical; /* 设置垂直排列 */
  overflow: hidden;
  text-overflow: ellipsis;
    
    
    
}
.case-camp{
    position: absolute;
    top: 12%;
    right: 0%;
    transform: translate(-20%, -50%);
    padding: 0 5px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
}
.case-title-box .case-text {
    font-size: 13px;
    color: #666666;
    padding: 0 10px;
    margin-top: 5px;

    /* 多行文本省略 (两行) */
    display: -webkit-box;
    /* 使用 WebKit 的 box 模型 */
    -webkit-line-clamp: 2;
    /* 限制为 2 行 */
    -webkit-box-orient: vertical;
    /* 垂直排列 */
    overflow: hidden;
    /* 超出隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    line-height: 1.4;
    /* 建议设置行高，控制两行高度 */
    max-height: 2.8em;
    /* 可选：根据 font-size 和 line-height 计算最大高度 */
}

.countryTime {
    display: flex;
    margin-top: 10px;
    font-size: 12px;
    padding: 0 10px;
    color: #111111;
}

.caseIcon {
    width: 12px;
    margin-right: 5px;
}

.read-story {
    height: 30px;
    text-align: center;
    border: 1px solid #1C5CA6;
    color: #1C5CA6;
    font-size: 12px;
    margin-top: 10px;
    margin: 15px 10px;
}

/* ==========================客户分享========================== */
.share-box {
    background-color: #F4F6F9;
    padding: 5px;
    border-bottom-left-radius: 50px;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
}

.review-card {
    background: #fff;
    padding: 16px;


}

/* 星级评分 */
.rating {
    display: flex; 
    gap: 4px;
    margin-bottom: 12px;
    color: #1C5CA6;
    font-size: 18px;
        height: 20px;
    /*background: aqua;*/
    display: flex;
    align-items: center;
}

.share-text {
    color: #111111;
        height: 150px;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    font-size: 12px;
}

/* 头像 */
.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 5px;
    padding: 1px;
    background-color: #fff;
}

/* 用户信息容器 */
.user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 10px 20px;
}

.user-details {
    flex: 1;
    /* margin-left: 10px; */
}

.name {
    font-weight: bold;
    font-size: 13px;
    color: #000;
}

.time {
    font-size: 11px;
    color: #999;
}

.yinhao {
    width: 40px;
}

/* =============分享================ */
.share-phone-Bg{
    display: none;
}
.share{
    width: 100%;
background-image: url('/images/story/shareBg.png');
background-size: 100% 100%;
padding: 20px;
position: relative;
}
.share-text-box{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.share-title {
    font-weight: bold;
    font-size: 28px;
    color: #111111;
}

.share-story-text {
    font-weight: 400;
    font-size: 14px;
    color: #111111;
    margin-top: 20px;
}

.editIcon {
    width: 15px;
    margin-top: -5px;
    margin-right: 5px;
}

.shareBut {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 45px;
    background-color: #1C5CA6;
    color: #fff;
    margin-top: 30px;
    font-size: 14px;
}

/* ====================留言==================== */
.liuyan-box {
    /* background-color: #E8EEF6; */
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    padding: 20px;
    border-radius: 4px;
    margin-top: -6px;
}
.story-container {
    width: 100% !important;
    margin: 0 auto;
    padding: 0 10px;
    /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 10px;
    gap: 20px; */



    margin: 20px auto; /* 剧中 */  
    columns: 6;/* 默认列数 */  
    column-gap: 30px;/* 列间距 */  

}

/* 瀑布流项 - 宽度使用百分比 */
.package-block-liuyan {
    transition: transform 0.3s ease;
    width: 100%;
  break-inside: avoid;
  margin-bottom: 30px;
}
  /* 加载提示 */
  .loading {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 14px;
}
.liuyanUser-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.liuyanavatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 5px;
    padding: 1px;
    background-color: #fff;
}

.liuyanText {
    font-weight: 400;
    font-size: 12px;
    color: #111111;
    margin-top: 10px;
}

.solid-line {
    border-top: 1px solid #d8d8d8;
    margin: 20px auto;
}

.liuyanTime {
    display: flex;
    justify-content: flex-end;
}

/* ======================== */

/*========================================当屏幕尺寸小于760px时===================================*/
@media (max-width: 767px) {
    .story-top-phone {
        display: block;
    }

    .story-top-pc {
        display: none;
    }

    .topTitle {
        position: absolute;
        top: 50%;
        left: 42%;
        transform: translate(-50%, -50%);
        width: 74%;
    }

    .topTitle1 {
        font-size: 30px;
    }

    .topTitle2 {
        font-size: 12px;
        margin-top: 20px;
    }

    .topBut {
        display: none;
    }

    /* =============成功案例================== */
    .story-tab-title .auto-container {
        display: flex;
        width: max-content;
        /* 不限制宽度 */
    }

    .story-tab-title {
        overflow-x: auto;
        white-space: nowrap;
        /* 确保内容不会换行 */
        margin-bottom: 20px;
    }

    .story-tab-title .story-title-smallBox {
        margin: 0 10px;
        width: 120px;
        height: 40px;
        font-size: 12px;
    }

    .story-title-smallBox {
        display: inline-block;
        padding: 10px 20px;
        margin-right: 5px;
        cursor: pointer;
        position: relative;
    }

    .story-tab-title::-webkit-scrollbar {
        display: none;
    }

    /* ==================成功案例============== */
    /*.case-box-phone {*/
    /*    display: block;*/
    /*    width: 95%;*/
    /*    margin: auto;*/
    /*}*/

    /*.case-box-pc {*/
    /*    display: none;*/
    /*}*/

    /*.case-box-phone .topImage {*/
    /*    width: 100% !important;*/
    /*    position: relative;*/
    /*}*/
 .case-box-pc .topImage {
        width: 100% !important;
        position: relative;
    }

/*    .case-title {*/
/*        position: absolute;*/
/*        top: 50%;*/
/*        left: 14px;*/
/*        transform: translateY(-50%);*/

/*    }*/

/*    .case-title-left {*/
/*        font-weight: bold;*/
/*        font-size: 14px;*/
/*        color: #111111;*/

        /* 单行文本省略 */
/*        white-space: nowrap;*/
        /* 不换行 */
/*        overflow: hidden;*/
        /* 超出隐藏 */
/*        text-overflow: ellipsis;*/
        /* 超出部分显示省略号 */
/*    }*/

/*    .case-camp {*/
/*        width: 60px;*/
/*        color: #fff;*/
/*        font-size: 12px;*/
/*        text-align: center;*/
/*        font-weight: lighter;*/
/*        margin-top: 5px;*/
/*                position: relative;*/
/*                        transform: translate(0, 0);*/
/*    }*/

/*    .case-title-box {*/
/*        background-color: #fff;*/
/*        padding: 15px 15px 30px 15px;*/
/*        box-shadow: 0px 0px 60px 0px #00000026;*/
/*    }*/
/*    .case-title-box  .case-text{*/
/*        font-size: 12px;*/
/*        color: #666666;*/
/*        padding: 0;*/
/*        margin-top: 0;*/
/*    }*/
/*    .countryTime{*/
/*        padding: 0;*/
/*        margin-top: 5px;*/
/*    }*/
/*    .read-story{*/
/*        width: 100px;*/
/*        margin: 10px 0 0 0;*/
/*line-height: 30px;*/
/*    }*/
    /* ======分享移民故事========= */
    .share-pc-Bg{
        display: none;
    }
    .share-phone-Bg{
        display: block;
    }
    
    .share{
        width: 100%;
    background-image: url('/images/story/share-phone-Bg.png');
    background-size: 100% 100%;
    padding: 20px;
    position: relative;
    }
.share-title {
    font-weight: bold;
    font-size: 18px;
    color: #111111;
}

.share-text {
    font-weight: 400;
    font-size: 12px;
    color: #111111;
    margin-top: 20px;
}
.share-text{
    margin-top: 10px;
}
.shareBut {

    width: 140px;
    height: 40px;

    margin-top: 10px;
}
/* ===========留言板= */

.story-container {
    width: 100% !important;
    margin: 0 auto;
    padding: 0 10px;
    margin: 20px auto;
    columns: 2;
    column-gap: 0px;
}
}