@import "common.css";

/* 导航栏容�?*/
.navbar {
    display: flex;
    background-color: #303030;
    padding: 0;
    width: 100%;
    margin-top: 64px;
}

/* 导航项样�?*/
.nav-item {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    position: relative;
}

/* 选中状�?- 上品团队 */
.nav-item.active {
    background-color: #00C08B; /* 绿色背景 */
}

.nav-item.active span {
    color: #fff; /* 保持文字为白�?*/
}

/* 响应式调�?*/
@media (max-width: 768px) {
    .nav-item {
        font-size: 16px;
        padding: 12px 0;
    }
}

@media (max-width: 480px) {
    .nav-item {
        font-size: 14px;
        padding: 10px 0;
    }
}

.imagelist{overflow:hidden; background:; padding: 40px 0;}
.imagelist .list-box{margin: 0 auto;}
.imagelist .list-box ul{display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0;}
.imagelist .list-box ul li{float: none; width: 100%; break-inside: avoid; margin-bottom: 0; list-style: none;}
.imagelist .list-box ul li.waterfall-item{break-inside: avoid; margin-bottom: 20px;box-sizing: border-box; padding: 12px;}
.imagelist .list-box ul li a{display:block; transition:.6s; position:relative; overflow:hidden; border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: #fff;}
.imagelist .list-box ul li a span{display:block; overflow:hidden;}
.imagelist .list-box ul li a span img{display:block; width:100%; height: auto; transition:.6s; object-fit: cover;}
.imagelist .list-box ul li a:hover span img{transform:scale(1.05);}
.imagelist .list-box ul li a h4{position:absolute; bottom:0; left:0; right:0; z-index:2; background:#00C08B; color:#fff; padding:16px 12px; text-align:center; font-size:15px; transform:translateY(100%); transition:.3s; opacity: 0;}
.imagelist .list-box ul li a:hover h4{transform:translateY(0); opacity: 1;}
.imagelist .list-box ul li a h5{position:absolute; bottom:0; top:10px; left:0; right:0; z-index:2; background:#00C08B; color:#fff; padding:16px 12px; text-align:center; font-size:8px; transform:translateY(100%); transition:.3s; opacity: 0;}
.imagelist .list-box ul li a:hover h5{transform:translateY(0); opacity: 1;}

@media(min-width:1200px){
.imagelist{padding:40px 0;}
.imagelist .list-box ul li.waterfall-item{margin-bottom: 24px;width: 25%;}
}

@media(min-width:992px) and (max-width:1199px){
.imagelist{padding:30px 0;}
.imagelist .list-box ul li.waterfall-item{width: 33.33%;}
}

@media(min-width:768px) and (max-width:991px){
.imagelist{padding:25px 0;}
.imagelist .list-box ul li.waterfall-item{width: 50%;}
}

@media(max-width:767px){
.imagelist{padding:20px 0;}
.imagelist .list-box ul li.waterfall-item{width: 100%;}
.imagelist .list-box ul li a h4{font-size:14px; padding:12px 10px;}
}

/* @meida max-width 768 > 991 */

/* 案例 H5 样式 */
@media screen and (max-width: 768px) {
  /* 导航栏 */
  .navbar {
    margin-top: 0;
    flex-wrap: wrap;
  }

  .navbar .nav-item {
    flex: 0 1 25%;
  }

  /* 列表 */
  .imagelist .list-box ul li.waterfall-item {
    margin-bottom: 0;
  }
  .imagelist .list-box ul li a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }

  .imagelist .list-box ul li a h4 {
    position: relative;
    transform: none;
    opacity: 1;
  }
}