@charset "utf-8";@import url(../../lib/layui/css/layui.css);
@font-face {
  /* 自定义字体名称（后续使用） */
  font-family: 'PingFang';
  /* 字体文件路径（按优先级排列） */
  src: url('../fonts/PingFang Medium 2.ttf') format('truetype');
  /* 可选：字体粗细/样式 */
  font-weight: normal;
  font-style: normal;
  /* 可选：跨域加载字体时启用 */
  font-display: swap;
}
*{margin:0;padding:0;font-family:"PingFang","Helvetica Neue",Helvetica,Arial,sans-serif}
a{text-decoration:none}
html,body{
  margin: 0;padding: 0;
  background-color: #F2F2F2;
}

.zhaogang{
  background-color: #ff0000;
}

.card-detail-lists{
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.card-detail-lists{
  left: 0;
  /*padding: 50px 50px 0;*/
}
.card-detail-lists>div {
  position: relative;
  width: 400px;
  height: 380px;
  overflow: hidden;
  margin: 0 5px 5px 0;
}

.card-detail-lists>div img{
  transition: all .4s ease;
  display: block;
  width: 100%;
}

.card-detail-lists>div .cont{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 150px 50px 0;
  background: rgba(31, 35, 41, .4);
}

.card-detail-lists>div .cont h2{
  font-size: 26px;
  color: #fff;
}

.card-detail-lists>div .cont p{
  margin-top: 10px;
  line-height: 24px;
  font-size: 16px;
  color: hsla(0, 0%, 100%, .9);
}

.card-detail-lists>div .cont button{
  padding: 10px 20px;
  border: 1px solid hsla(0, 0%, 100%, .6);
  border-radius: 21px;
  background: none;
  cursor: pointer;
  position: absolute;
  bottom: 50px;
  font-size: 16px;
  color: hsla(0, 0%, 100%, .9);
}

.build-in-animate {
  transform: scale(1) translateY(0);
  opacity: 1;
  transition: opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}




/* 给.cont元素添加hover背景效果 */
.cont {
  /* 先给基础样式（可选，保证hover生效） */
  transition: background 0.3s ease; /* 过渡动画，体验更流畅 */
  padding: 10px; /* 可选，增加内边距让背景更明显 */
}

.cont:hover {
  background: #4279FB;
}

/* 若.cont是嵌套在其他元素内，需确保样式优先级足够，可补充父级选择器 */
.card-detail-lists > div > .cont:hover {
  background: #4279FB;
}


{
  overflow: hidden
}

.slide {
  width: 1000px;
  height: 400px;
  overflow: hidden
}

.slide {
  margin: 65px auto 80px
}

.slide li {
  position: relative;
  width: 280px;
  overflow: hidden;
  transition: width .3s ease-in-out
}

.slide li {
  float: left
}


.slide li.current {
  width: 400px;
  transition: width .3s ease-in-out
}

.slide li.current>div {
  background: rgba(51,112,255,.9)
}

.slide li.current>div {
  padding: 0 80px 0 40px
}

.slide li.current>div {
}

.slide li.current>div h2 {
  margin-top: 150px;
}

.slide li.current>div h2 {
  margin-left: 0
}

.slide li.current>div h2 {
  margin-right: 0
}

.slide li.current>div p {
  position: relative;
  opacity: 1
}

.slide li.current>div p:first-of-type:before {
  content: "";
  position: absolute;
  top: -25px;
  width: 23px;
  height: 4px
}

.slide li.current>div p:first-of-type:before {
  background: #fff
}

.slide li.current>div p:first-of-type:before {
  left: 0
}

.slide li.current>div p:first-of-type:before {
  right: 0
}

.slide li>div {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%
}

.slide li>div {
  background: rgba(31,35,41,.4)
}

.slide li>div {
  left: 0
}

.slide li>div {
  right: 0
}

.slide li>div h2 {
  width: 150px;
  transition: margin-top .3s ease-in-out;
  font-size: 26px;
  color: #fff;
  font-weight: 700
}

.slide li>div h2 {
  transition-delay: .1s;
  margin-top: 333px
}

.slide li>div h2 {
  /*margin: 0 0 30px 35px*/
  padding-top: 30px;
  text-align: center;
  width: 100%;
}

.slide li>div h2 {
  margin: 0 35px 30px 0
}

.slide li>div p {
  transition: opacity .3s ease-in-out;
  opacity: 0;
  font-size: 14px;
  color: hsla(0,0%,100%,.9);
  line-height: 24px
}

.slide li>div p {
  transition-delay: .2s
}

.clearfix {
  *zoom:1
}

.clearfix:after,.clearfix:before {
  content: "";
  display: table
}

.clearfix:after {
  clear: both
}

img {
  vertical-align: middle
}

.slide.clearfix {
  /* 保留clearfix的清除浮动特性 */
  overflow: hidden;
  /* 采用flex布局让li横向排列 */
  display: flex;
  /* 让所有li拉伸至容器高度一致 */
  align-items: stretch;
  /* li之间的间距，可根据设计调整 */
  /* 宽度自适应父容器 */
  width: 100%;
  /* 可选：添加最小高度，避免内容过少时高度过矮 */
  min-height: 300px;
  box-sizing: border-box;
}

/* 统一图片样式，避免图片尺寸差异导致高度不一致 */
.slide.clearfix li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 12px;
  border-radius: 4px;
}