.des_bg1{
  width: 100%;
  height: 644px;
  background: url(../../img/des/des_top_bg.jpg) no-repeat center center;
  background-size: cover;
  position: absolute;
  z-index: 3;
  top: 500px;
  left: 0;
}

.des_title_font{font-size: 36px; color:#008fe1;}

.des_pro_li{height: 540px; position: relative;}
/* 目的地卡片图片：统一比例，避免参差不齐（适用于 destination/index(2).html 这类 3 列卡片） */
.des_pro_li .col-md-12.np{position: relative; overflow: hidden;}
.des_pro_li .col-md-12.np > img{
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 368 / 249;
}
@supports not (aspect-ratio: 1 / 1) {
  .des_pro_li .col-md-12.np > img{
    height: 249px;
  }
}
.des_pro_img_font{
  width: 100%;
  padding: 20px 10px;
  font-size: 1.125rem;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0) 100%);
}

.des_bg2{width: 100%; background: url(../../img/des/des_bg2.png) no-repeat top; padding-bottom:20px;}

.travel_list{justify-content:space-around; align-items: flex-start;margin: -10px; /* 抵消子元素的外边距 */}
.travel_li{border: 1px solid #d1d1d1;box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.2), 0 4px 8px -2px rgba(0, 0, 0, 0.15);border-radius: 0.5rem;transition: transform 0.3s ease;flex: 0 0 calc(33% - 20px); /* 一行显示4个，减去左右边距 */margin: 10px 10px 30px 10px; height: 31.25rem;overflow: hidden; /* 防止内容溢出影响布局 */}
.travel_li a{text-decoration: none;}
.travel_li:hover {transform: scale(1.05);}
.travel_li img {width: calc(100% - 12px); /* 减去左右外边距的宽度 */height: 18rem;object-fit: cover;margin: 6px;}
.travel_li_title {font-size: 1.25rem;line-height: 1.75rem; white-space: nowrap; /* 禁止换行 */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 超出部分显示省略号 */width: calc(100% - 1rem); /* 设置宽度，减去一些内边距 */padding: 0 0.5rem; /* 增加内边距 */}
.travel_li_des{color: #9c1c1c;flex-wrap: nowrap;}
.travel_li .flexbox_baseline{
  flex-wrap: nowrap; /* 不换行：让符号与描述始终在同一行 */
  align-items: baseline;
}
.travel_li_symbol{width: 7px; height: 7px; background-color: #202020;}
.travel_li_simple_txt{
    /* 单行省略号（配合 flex 布局使用） */
    flex: 1 1 auto;
    min-width: 0; /* 关键：让 flex 子项允许收缩，省略号才会生效 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.view_detail_btn{width:11rem;border: #ad182e solid 1px; margin:.5rem auto; padding: 0 1.5rem; font-size: 1.25rem; color: #ad182e;}

.travel_des_title {color:#900101;font-size: 1.256rem;line-height: 1.75rem; white-space: nowrap; /* 禁止换行 */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 超出部分显示省略号 */width: calc(100% - 1rem); /* 设置宽度，减去一些内边距 */padding: 0.5rem; /* 增加内边距 */ text-align: center;}
.flexbox_travel_des{display: flex; align-items: center; padding: 5px 10px;}
.travel_des_simple_txt{
  width: calc(100% - 5px);
  overflow: hidden; /* 溢出内容隐藏 */

  /* 以下为多行省略号的标准写法（主流浏览器支持） */
  display: -webkit-box; /* 弹性盒子模型（WebKit 内核） */
  -webkit-box-orient: vertical; /* 子元素垂直排列 */
  -webkit-line-clamp: 3; /* 限制最多显示 3 行 */
  line-clamp: 3; /* 标准属性（用于兼容性提示） */
  text-overflow: ellipsis; /* 溢出部分显示省略号（需配合 overflow: hidden） */
}

/*目的地*/
.des_li{
  transition: transform 0.3s ease;
  /* 一行显示4个，减去左右边距 */
  flex: 0 0 calc(25% - 20px);
  margin: 10px;
  height: 19.625rem;
  overflow: hidden; /* 防止内容溢出影响布局 */
}
.des_li a{text-decoration: none; position: relative;}
.des_li:hover {transform: scale(1.05);}
.des_li img {width: 100%; /* 减去左右外边距的宽度 */height: 19.625rem;object-fit: cover; position: relative; z-index: 5;}
.des_li_title {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  font-size: 2.5rem;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  width: 100%;
  min-height: 9.375rem;
  background: url("../../img/index/des_bottom_title_bg.png") no-repeat;
  background-size: cover;
  /* 添加以下样式实现水平和垂直居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-end; /* 垂直居中 */
  color:#fff;
  padding-bottom: 20px;
  opacity: 0;
}

.des_card{background: url(../../img/des/des_card_bg.png) no-repeat top; border-radius: 20px; margin:30px 0 80px 15px; padding:50px; display: flex; align-items: center; background-size: cover;width:96%;}
.des_card_title{font-size: 1.575rem; color: #0056ca; margin-bottom: 10px;}
.des_symboll_btn_box{width: 225px; height: 48px; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #0056ca; margin: 0 auto;}



@media (max-width: 1200px) {

}

@media (max-width: 991px) {
  .des_li_title{opacity: 1;}
}

/* 移动端控制按钮调整 */
@media (max-width: 767px) {
  .travel_li {flex: 0 0 calc(50% - 20px); /* 小屏幕一行显示2个 */}
}
@media (max-width: 480px) {
  .travel_li {flex: 0 0 calc(100% - 20px); /* 超小屏幕一行显示1个 */}
}