.ellipsis-5 {
  display: -webkit-box;          /* 必须使用弹性盒子布局 */
  -webkit-box-orient: vertical;  /* 垂直方向排列内容 */
  -webkit-line-clamp: 5;         /* 限制显示行数 */
  overflow: hidden;              /* 隐藏溢出内容 */
  line-height: 1.5;              /* 建议设置行高（根据实际设计调整） */
  max-height: calc(1.5em * 5);  /* 可选：通过行高*行数限制高度（避免容器被撑开） */
}
.ellipsis-2 {
  display: -webkit-box;          /* 必须使用弹性盒子布局 */
  -webkit-box-orient: vertical;  /* 垂直方向排列内容 */
  -webkit-line-clamp: 2;         /* 限制显示行数 */
  overflow: hidden;              /* 隐藏溢出内容 */
  line-height: 1.5;              /* 建议设置行高（根据实际设计调整） */
  max-height: calc(1.5em * 2);  /* 可选：通过行高*行数限制高度（避免容器被撑开） */
}
.ellipsis-1 {
  display: -webkit-box;          /* 必须使用弹性盒子布局 */
  -webkit-box-orient: vertical;  /* 垂直方向排列内容 */
  -webkit-line-clamp: 1;         /* 限制显示行数 */
  overflow: hidden;              /* 隐藏溢出内容 */
  line-height: 1.5;              /* 建议设置行高（根据实际设计调整） */
  max-height: calc(1.5em * 1);  /* 可选：通过行高*行数限制高度（避免容器被撑开） */
}
    .animated{
        animation-duration: 2s !important;
    }
        #content-container {
        background-color: #f9f9f9;
        background-image: url('/assets/img/Rectangle_12.png');
        background-size: cover; 
        background-attachment: fixed;
        background-repeat: no-repeat;
        height: calc(100vh - 100px); /* 视口高度 - 顶部标题/底部间距，确保有足够高度 */
        padding: 20px 0; /* 上下留空隙，避免贴边 */
    }
    
    
    .scroll-module-row {
        width: 100%;
        max-height: 500px; /* 限制最大高度，避免大屏太高 */
        min-height: 370px; /* 限制最小高度，避免小屏太矮 */
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        box-sizing: border-box;
    }
    
    
    

    .main-content{
        padding-bottom:0;
    }
    /* --- 1. 顶部大标题样式 (对应图二) --- */
.channel-title {
    width: 100%;
    text-align: center;
    margin: 30px auto 0px;
    position: relative;
}

.channel-title h1 {
    /* 使用 Flex 让图片和文字居中重叠 */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 70px; /* 根据线条图片高度调整 */
    margin: 0;
    color: #3e3e3e; /* 深灰色文字 */
    font-size: 32px;
    font-weight: bold;
    font-family: "华文宋体", "Songti SC", serif; 
}

/* 线条背景图片 */
.channel-title h1 .line-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* 线条宽度 */
    max-width: 800px;
    height: 100%;
    background: url('/assets/img/title-line.png') no-repeat center center;
    background-size: contain;
    z-index: 1;
}

/* 文字层级要在线条之上 */
.channel-title h1 .text-content {
    position: relative;
    z-index: 2;
/* 如果线条穿过文字，可以用背景色遮挡，或者留空 */
    padding: 0 20px;
    /* 如果设计图线条中间是断开的，就不需要 background-color */
}

/* --- 2. 卷轴标题样式 (对应图一/图三) --- */
/* === 卷轴通用样式 === */
/* === 卷轴核心样式 (修复版) === */
.scroll-header {
    /* 强制内容横向排列，覆盖父级的 vertical-rl */
    writing-mode: horizontal-tb !important; 
    -webkit-writing-mode: horizontal-tb !important;
    
    width: 100%;
    /* 限制最大宽度，防止在某些容器里撑得太宽 */
    max-width: 400px; 

    
    /* 背景图设置 */
    background: url('/assets/img/scroll-bg.png') no-repeat center center;
    background-size: 100% 100%;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px; /* 避开卷轴两头 */
    box-sizing: border-box;
    
    /* 防止在 flex 父级中被压缩 */
    flex-shrink: 0;
    margin-bottom: 20px;
    z-index: 10; /* 提高层级 */
    position: relative;
}

/* 卷轴上的文字 */
.scroll-header .scroll-title {
    font-family: "华文行楷", "STXingkai", "KaiTi", "楷体", serif;
    font-size: 30px;
    color: #2c2c2c;
    font-weight: normal;
    letter-spacing: 0px; /* 重置竖排可能带来的间距 */
    line-height: 90px;   /* 垂直居中 */
}

/* 右侧菱形图标组 */
.scroll-header .diamond-group {
    display: flex;
    flex-direction: row; /* 强制横向 */
    gap: 8px;
}

.diamond-box {
    width: 26px;
    height: 26px;
    border: 2px solid #8B4513;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.diamond-box span {
    transform: rotate(-45deg);
    font-size: 12px;
    color: #8B4513;
    font-weight: bold;
    /* 强制文字不换行 */
    white-space: nowrap; 
}

/* 移动端适配：缩小卷轴和文字 */
@media (max-width: 768px) {
    .scroll-header {
        height: 80px;
        padding: 0 25px;
    }
    .scroll-header .scroll-title {
        font-size: 24px;
    }
    .diamond-box {
        width: 20px;
        height: 20px;
    }
    .diamond-box span {
        font-size: 10px;
    }
}

/* 移动端适配 */

    .Odd-content{
        width:25%;
        justify-content: flex-end;
    }


    .Odd {
        width: 72%;
        height: 470px;
        margin-right: 3%;
    }
    .Odd  img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .Odd-content p,.Even-content p{
        width: 180px;
         writing-mode: vertical-rl;     /* 垂直排列，从右向左 */
        line-height: 2;               /* 调整行间距 */
        height: 470px;
        color: #8A8A8A ;
        font-size: 16px;
        font-weight: 500;
    }
    .Odd-content h3,.Odd-content h4,.Odd-content div,.Even-content h3,.Even-content h4,.Even-content div{
        writing-mode: vertical-rl;
        
    }
    .Odd-content h3,.Odd-content div,.Even-content h3,.Even-content div{
        letter-spacing: 4px;
    }
    
    .Odd-content h3,.Even-content h3{
        height: 470px;
        margin: 0 12px 0 25px;
        padding: 0;
         color: #333333;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
    }
     .Odd-content h4,.Even-content h4{
         height: 470px;
         margin:4px 0 0 13px;
        padding: 0;
         color: #B2B2B2;
         font-size: 20px;
        line-height:40px;
    }
    .Odd-content div ,.Even-content div{
        width: 48px;
        height: 177px;
        font-size: 24px;
        line-height:48px;
        text-align: center;
        color: #FFFFFF;
        background-image: url('/assets/img/Group 1000006742@3x.png');
        background-size: 100% 100%;
    }
    .more{
        width:100%;
        text-align:center;
    }
    .more img{
        width:170px;height:40px;
        margin-top: 45px;
    }
    /*.sd-online{*/
    /*    display: inline-block;*/
    /*    position: absolute;*/
    /*     bottom: 6%;*/
    /*    left: 24%;*/
    /*}*/
    .Even>div{
        display: flex;
        flex-direction: column;
        /*margin-right: 20px;*/
    }
    .book,.video{
        margin-right: 20px;
    }
    .Even .image a img{
        width: 100%;
        height: 380px;
        object-fit: cover;
    }
    .Even span:nth-child(2){
        /*margin: 12px 0;*/
        color: #333333;
        font-size: 18px;
            /*font-weight: 600;*/
    }
    .Even span:nth-child(3){
         /*margin: 12px 0;*/
        color:#8A8A8A;
        font-size: 16px;
    }
    #third{
        flex-wrap: wrap;
        /*flex-wrap: nowrap;*/
        /*justify-content: center;*/
    }
    #third .Even{
        display: flex;
        background: #fff;
        padding: 20px 40px;
        transition: width 1s ease-in-out; /* 关键：过渡动画 */
        /*position: relative;*/
    }
   .book{
       flex: 0 0 auto; 
        flex-direction: row!important;
        transition: width 1s ease-in-out; /* 关键：过渡动画 */
        width: auto;
   }
   .book>div>div{
       color: #333333;
       font-size: 24px;
       margin-bottom: 24px;
   }
   .book>div>span{
       width: 50%;
       overflow: hidden;
       color: #777777 ;
       font-size: 16px;
       display: inline-block;
       margin-bottom: 10px;
       
   }
   .book img{
       width: auto!important;
       height: 360px;
   }
   .book p{
       color: #777;
       margin: 0;
       padding: 0;
   }
   .arrow{
       display: flex;
       flex-direction: row!important;
       position: absolute;
        bottom: -6%;
        left: 64%;
   }
   .arrow img{
       width: 50px!important;
       height: 50px!important;
   }
    .book>div{
        /*display: none;*/
        padding: 0;
        width: 0px;
        opacity: 0;
        visibility: hidden;
        overflow: hidden; /* 防止内容溢出 */
}
 .act{
     /*display: block;*/
        padding: 0 40px!important;
        opacity: 1!important;
        visibility: visible!important;
        width: 406px!important; /* 宽度收缩到0 */
        
 }
 .right-part{
     width: 406px;
     height: 355px;
      transition: 
    opacity 0.5s ease,
    width 0.5s ease,
    visibility 0.5s ease; /* 同步过渡 */
 }
 .Even .video{
     width: 552px;
     height: 406px;
     position: relative;
 }
 .Even .video a{
     width: 100%;
     height: 100%;
 }
 .Even .video a img{
     width: 100%;
     height: 100%;
 }
 .video-content p{
     width: auto;
 }
 .icon{
     width: 40px!important;
     height: 40px!important;
     position: absolute;
     left: 48%;
     top: 46%;
 }
  .Odd-content p, .Even-content p{
        width: 190px;
        display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    }
    .Even-content p{
        -webkit-line-clamp: 4;
        height: 450px;
        width: 130px;
    }
    .Odd-content h4, .Even-content h4,.Odd-content h3, .Even-content h3{
        height: auto;
    }
    .first h4,.first h3{
          height: 470px;
    }
    /*.more img {*/
    /*    margin: 0px;*/
    /*}*/
 
 @media screen and (max-width: 1700px) {
    .Even .image a img{
        width: 250px;
    }
    .Even .image span{
        width: 250px!important;
    }
    #third .Even{
        padding: 10px 20px;
    }
    .act{
        width: 280px!important;
    }

    .book>img{
        width: 220px!important;
    }
    .Odd-content p, .Even-content p{
        width: 130px;
        display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    }
    .Even-content p{
        -webkit-line-clamp: 3;
        height: 430px;
        width: 100px;
    }
    
    .bar-title-right {
    font-size: 26px;
    font-weight: normal;
    color: #000;
    right: 0px; /* 新增或修改这一行 */
}
 }
 /* 正确定义PingFang SC Medium字体 */
@font-face {
  font-family: 'PingFangSC-Medium';  /* 推荐使用标准命名格式 */
  src: url('/assets/fonts/PingFangMedium.ttf') format('truetype'); /* 修正路径和格式声明 */
  font-weight: 500;  /* Medium字重通常对应500 */
  font-style: normal;
  font-display: swap; /* 添加字体加载策略 */
}

/* 全局应用到body和主要文本元素 */
.main-content
{
  font-family: "PingFangSC-Medium";
}  

@media screen and (min-width: 2520px) {
  .scroll-text{
      font-size: 120px!important;
  }
  .scroll-diamond{
      width: 105px!important;
      height: 105px!important;
  }
  .scroll-diamond span{
      font-size: 65px !important;
  }
  .scroll-module-row{
      width: 100%!important;
  }
  .channel-title h1{
      height: 100px!important;
  }
  .channel-title h1 .text-content{
      font-size: 60px!important;
  }
}



/*.channel {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    justify-content: space-between;*/
/*    margin: 140px 0;*/
/*    gap: 20px;*/
/*}*/

/* 第四模块 视频部分 */
/*.channel .video-content {*/
/*    flex: 0 0 40%;*/
/*    box-sizing: border-box;*/
/*}*/

/*.channel .Even {*/
/*    flex: 0 0 58%;*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 15px;*/
/*    box-sizing: border-box;*/
/*}*/

/* 第一模块 */
/*.Odd {*/
/*    flex: 0 0 30%;*/
/*    box-sizing: border-box;*/
/*}*/
/*.Odd-content {*/
/*    flex: 0 0 70%;*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/* 第二模块 */
/*.Even-content {*/
/*    flex: 0 0 35%;*/
/*    box-sizing: border-box;*/
/*}*/
/*.Even {*/
/*    flex: 0 0 63%;*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 15px;*/
/*    box-sizing: border-box;*/
/*}*/

/* 图书模块 */
/*#third .Even {*/
/*    flex: 0 0 60%;*/
/*    box-sizing: border-box;*/
/*    padding: 20px;*/
/*}*/
/*#third .Even-content {*/
/*    flex: 0 0 38%;*/
/*    box-sizing: border-box;*/
/*}*/

/* 小屏适配 */
/*@media screen and (max-width: 1200px) {*/
/*    .Odd, .Odd-content,*/
/*    .Even, .Even-content,*/
/*    .video-content,*/
/*    #third .Even,*/
/*    #third .Even-content {*/
/*        flex: 0 0 100%;*/
/*        max-width: 100%;*/
/*    }*/

/*    .channel {*/
/*        margin: 60px 0;*/
/*    }*/

/*    .Even .video {*/
/*        width: 100% !important;*/
/*        height: auto !important;*/
/*    }*/

/*    .Odd-content p,*/
/*    .Even-content p {*/
/*        writing-mode: horizontal-tb;*/
/*        height: auto;*/
/*        padding: 10px 0;*/
/*    }*/

/*    .Odd-content h3,*/
/*    .Even-content h3 {*/
/*        height: auto;*/
/*        writing-mode: horizontal-tb;*/
/*        margin: 10px 0;*/
/*    }*/

/*    .Odd-content div,*/
/*    .Even-content div {*/
/*        height: auto;*/
/*        writing-mode: horizontal-tb;*/
/*        margin-top: 10px;*/
/*    }*/
/*}*/