:root {
      --gold: #bda677;
      --light-gold: #c8b68f;
    }

    .logo,
    .nav-menu .nav-item a:before,
    .dropdown-menu {
      background-color: #bda677;
    }

    .dropdown-item:hover {
      background-color: #ffc107;
    }

    body {
      line-height: 1.8;
      background-color: #f5f5f5;
    }

    .by-btn {
      border-radius: 1.75rem;
      background-color: #c8b68f;
      color: #FFF;
      text-align: center;
      padding: .5rem 3rem;
      width: 12rem;
      display: block;transition: .35s;
    }
    .by-btn:hover{color:#FFF;background-color:#000}
.container{max-width: 1560px;}
    .bg-light {
      background-color: #FFF !important;
    }

    h2 {
      font-size: 3rem;
    }

    h3 {
      font-size: 1.55rem;
    }

    .section {
      padding: 60px 0;
      background-color: #f9f9f9;
      line-height: 1.8;
    }

    @media (max-width:575px) {
      h2 {
        font-size: 2.25rem;
      }

      h3 {
        font-size: 1.35rem;
      }

      .section {
        padding: 50px 0;
      }
    }

    .title-main {
      color: #c8b68f;
    }

    .title-sub {
      font-size: 18px;
      color: #666;
    }

    /* 第一块：通栏大图 */

    .hero-banner {
      max-height: 900px;
      background: url(/images/baoyi/banner-hero.jpg) no-repeat center center;
      background-size: cover;
      padding: 15rem 0;
      position: relative;
    }

    .hero-banner h2 {
      color: #FFF;font-size: 4rem;
    }

    .hero-banner h3 {
      color: #FFF;line-height: 1.5;font-size: 1.85rem;
    }

    .hero-banner .ct {
      background-color: #c8b68f;
      position: absolute;
      right: 0;
      bottom: 0;
      border-radius: 30px 0 0 0;
      color: #FFF;
      font-size: 3.75rem;
    }

    .hero-banner .ct span {
      font-size: 1rem;
    }

    @media (max-width:575px) {
      .hero-banner .ct {
        font-size: 1.75rem;
      }

      .hero-banner {
        padding: 5rem 0;
      }

      .hero-banner h1 {
        font-size: 2.25rem;
      }
    }

    /* 第二块标题 */

    .s2 {
      border-bottom: 5px solid #d4c199;
    }

    .bi-boxes {
      border-radius: 5rem;
      background-color: #FFF;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .35s;
    }

    .bi-boxes:hover {
      background-color: #c8b68f;
      color: #FFF
    }

    .bi-boxes h5 {
      margin-bottom: 0;
    }

    .bi {
      width: 35px;
      height: 35px;
      margin-right: 1rem;
    }

    .bi-boxes-1 {
      background: url(/images/baoyi/icon_2_1.png);
      background-size: cover;
    }

    .bi-boxes-2 {
      background: url(/images/baoyi/icon_2_2.png);
      background-size: cover;
    }

    .bi-boxes-3 {
      background: url(/images/baoyi/icon_2_3.png);
      background-size: cover;
    }

    .bi-boxes:hover .bi-boxes-1 {
      background: url(/images/baoyi/icon_2_1_hover.png);
      background-size: cover;
    }

    .bi-boxes:hover .bi-boxes-2 {
      background: url(/images/baoyi/icon_2_2_hover.png);
      background-size: cover;
    }

    .bi-boxes:hover .bi-boxes-3 {
      background: url(/images/baoyi/icon_2_3_hover.png);
      background-size: cover;
    }

    /* 第三块 4列数据竖线 */

    .data-item {
      position: relative;
    }

    .data-item:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 10%;
      height: 80%;
      width: 1px;
      background: #ddd;
    }

    .data-item h2 {
      color: #c8b68f;
    }

    .data-item h2 span {
      vertical-align: top;
      font-size: 1rem;
    }

    /* 第四块按钮样式 */

    /* 基础容器：服务专属化 - 独立命名空间，避免样式污染 */

    .custom-service-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* 预算更清晰 - 固定3列，等宽分配 */
      gap: 24px;
      /* 工艺更高标 - 统一的视觉呼吸感 */
      padding: 40px 0;
      /* 上下留白，提升层级感 */
      max-width: 1200px;
      /* 限制最大宽度，保证可读性 */
      margin: 0 auto;
      /* 居中布局 */
    }

    /* 卡片单元：个性化 - 支持灵活的内容结构 */

    .service-card {
      border: 1px solid var(--gold);
      color: var(--gold);
      border-radius: 60px;
      padding: 10px 20px;
      background: #fff;
      font-size: 18px;
      transition: all 0.3s;
    }

    .service-card:first-child,
    .service-card:hover {
      color: #fff;
      background: linear-gradient(to right, #e7d9c1, var(--gold));
    }

    /* 响应式：预算更清晰 - 在不同设备上的资源分配 */

    @media (max-width: 1024px) {
      .custom-service-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 平板自适应为2列 */
      }
    }

    @media (max-width: 640px) {
      .custom-service-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;
      }

      .service-card {
        padding: 12px 24px;
      }
    }

    .advantage-btn {
      border: 1px solid var(--gold);
      color: var(--gold);
      border-radius: 50px;
      padding: 10px 20px;
      background: #fff;
      transition: all 0.3s;
    }

    .advantage-btn.active,
    .advantage-btn:hover {
      color: #fff;
      background: linear-gradient(to right, #fff, var(--gold));
    }

    /* 第五块径向渐变背景 */

    .radial-bg {
      background: linear-gradient(135deg, #f9f9f9, #c8c0ae);
    }

    /* 品质按钮 */

    .btn-quality {
      border-radius: 60px;
      color: #fff;
      border: none;
      padding: 12px 50px;
      background: linear-gradient(to right, #dfd3b5, var(--gold));
    }

    /* 第六块图片hover切换 */

    .img-hover-wrap {
      position: relative;
      cursor: pointer;
      flex: 0 1 auto;
      min-width: 0;
      /* 防止内容溢出 */
    }

    .img-hover-wrap:first-child {
      flex: 1 1 auto;
      min-width: 0;
    }

    @media (max-width: 1025px) {
      .flex-4 .d-flex {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
      }

      .flex-4 .img-hover-wrap:nth-child(1) {
        width: 60%;
      }

      .flex-4 .img-hover-wrap:nth-child(2) {
        width: 40%;
      }

      /* 第二行：第3、4个各50% */
      .flex-4 .img-hover-wrap:nth-child(3),
      .flex-4 .img-hover-wrap:nth-child(4) {
        width: 50%;
      }
    }

    @media (max-width: 768px) {
      .flex-4 .d-flex {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
      }

      .flex-4 .img-hover-wrap {
        width: 100% !important;
      }
    }

    /* 第七块轮播图渐变 */

    .bg-light-gold {
      background-color: #c8b68f;
    }

    .core-team {
      height: 600px;
    }

    .team-img-wrap {
      position: relative;
      height: 100%;
      overflow: visible;
    }

    .team-img-wrap .item {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease;
      /* 渐变过渡 */
    }

    .team-img-wrap .item.active {
      opacity: 1;
    }

    .carousel-caption-custom {
      position: absolute;
      right: -200px;
      /* 伸出图片右侧 */
      bottom: 40px;
      /* 距离底部 */
      z-index: 99;
      /* 确保覆盖右侧金色背景 */
      color: #fff;
      pointer-events: none;
      background: url(/images/baoyi/line_team.png) no-repeat top;
      padding-top: 25px;
      background-size: 100% auto;
      width: 300px;
      text-align: right;
      padding-right: 40px;
    }

    /* 标题同步显示动画 */

    .team-img-wrap .item:nth-child(1) .carousel-caption-custom {
      animation: fade 12s infinite 0s;
    }

    .team-img-wrap .item:nth-child(2) .carousel-caption-custom {
      animation: fade 12s infinite 4s;
    }

    .team-img-wrap .item:nth-child(3) .carousel-caption-custom {
      animation: fade 12s infinite 8s;
    }

    .team-img-wrap img {
      position: absolute;
      animation: fade 12s infinite;
      opacity: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .team-img-wrap img:nth-child(1) {
      animation-delay: 0s;
      opacity: 1;
    }

    .team-img-wrap img:nth-child(2) {
      animation-delay: 4s;
    }

    .team-img-wrap img:nth-child(3) {
      animation-delay: 8s;
    }

    @media (max-width:768px) {
      .core-team {
        flex-wrap: wrap !important;
        height: auto !important;
      }

      .core-team .team-img-wrap,
      .core-team .team-text {
        width: 100% !important;
      }

      .team-img-wrap {
        height: 450px;
      }

      .carousel-caption-custom {
        display: none;
      }
    }

    @keyframes fade {
      0% {
        opacity: 0
      }

      20% {
        opacity: 1
      }

      40% {
        opacity: 1
      }

      60% {
        opacity: 0
      }
    }

    /***更多作品案例***/

    .anli-row {
      display: flex;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .anli-item {
      flex: auto;
      display: flex;
      flex-direction: column;
    }

    .anli-item img {
      width: 100%;
      object-fit: cover;
      /* 图片不变形裁切 */
      margin-bottom: 0.75rem;
      margin-top: auto;
    }

    .anli-item h6 {
      margin-top: auto;
      /* 关键：让文字自动下沉，图片底部对齐 */
      text-align: center;
    }

    .anli-img-box {
      width: 100%;
      display: flex;
      align-items: flex-end;
      /* 核心：图片底部对齐 */
      justify-content: center;
      flex-grow: 1;
    }

    @media (max-width:768px) {
      .anli-row {
        flex-direction: column;
      }
    }

    /**工艺体系**/

    .gy1 {
      background: url(/images/baoyi/gy_1.jpg) no-repeat;
      width: 40%;
      padding: 4.5rem 3rem;
      background-size: cover;
    }

    .gy2 {
      background: url(/images/baoyi/gy_2.jpg) no-repeat;
      width: 30%;
      padding: 4.5rem 3rem;
      background-size: cover;
    }

    .gy3 {
      background: url(/images/baoyi/gy_3.jpg) no-repeat;
      width: 30%;
      padding: 4.5rem 3rem;
      background-size: cover;
    }

    @media (max-width:768px) {
      .gy {
        flex-direction: column;
      }

      .gy1,
      .gy2,
      .gy3 {
        width: 100%;
      }

      .gy1 {
        padding: 4rem 2rem;
      }
    }

    .tech-btn-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* 固定2列 */
      gap: 5px;
      /* 按钮间距 15px */
    }

    .tech-btn {
      background: rgba(255, 255, 255, 0.35);
      border-radius: 10px;
      padding: 20px;
      color: #fff;
      margin: 6px;
      text-align: center;
    }

    .tech-btn.active {
      background-color: #c8b68f;
    }

    /**************************/

    .images {
      position: relative;
      padding-top: 100%;
      margin-bottom: 1rem;
    }

    .images img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
    }

    .sd p {
      text-align: left;
      font-size: 13px;
      color: #999;
      width: 90%;
      margin: 0 auto;
    }


    /* 父容器：默认电脑端 5列均分 */

    .flex-5-col {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      /* 对应 gap-3 */
    }

    .flex-5-col .images {
      padding-top: 66%;
    }

    /* 电脑端（≥768px）：5列平均宽度 */

    @media (min-width: 768px) {
      .flex-5-col .flex-box {
        flex: 1;
        min-width: 0;
      }
    }

    /* 手机端（＜768px）：1列独占一行 */

    @media (max-width: 767px) {
      .flex-5-col .flex-box {
        width: 100%;
      }
    }

    .fz14 {
      font-size: 14px;
    }