@import url('s768/index.css');
@import url('./index-animate.css');

#index-main .index-item[data-anchor='home'] {
  position: relative;

  .index-desc-box {
    position: absolute;
    top: 270px;
    margin-left: 270px;
    color: #fefefe;

    .index-desc {
      white-space: nowrap;

      &:nth-child(1) {
        font-size: 36px;
        margin-bottom: 58px;
      }
      &:nth-child(2) {
        font-size: 70px;
        margin-bottom: 40px;
      }
      &:nth-child(3) {
        font-size: 32px;
      }
    }
  }
}

#index-main .index-item[data-anchor='about_us'] {
  background-image: url('../images/home/jsbj.jpg');
  background-color: #ffffff;
  background-size: contain;
  background-position: 0 bottom;
  background-repeat: repeat-x;

  .index-item-main {
    gap: 60px;
  }

  img {
    width: 550px;
    height: 556px;
  }

  .index-content {
    flex-grow: 1;
    color: #000000;
    position: relative;

    p {
      margin: 18px 0;
      line-height: 1.5;
      font-size: 16px;
    }

    .index-content-header {
      display: flex;
      justify-content: space-between;
    }

    .index-content-title {
      font-weight: bold;
      display: flex;
      flex-direction: column;
      gap: 30px;

      .index-content-title-text {
        font-size: 36px;
      }

      .index-content-title-tag {
        font-size: 20px;

        display: flex;
        gap: 30px;
      }
    }

    .index-tag2 {
      display: flex;
      gap: 32px;
      user-select: none;

      .index-tag-item {
        position: relative;
        width: 100px;
        height: 100px;
        overflow: hidden;
        display: flex;
        justify-content: center;

        img {
          width: 100px;
          height: 100px;
        }

        span {
          font-size: 14px;
          position: absolute;
          top: 70%;
        }
      }
    }

    .index-content-main {
      margin-top: 80px;

      .index-content-extra {
        margin-top: 80px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }
    }

    .index-content-counter-box {
      --color: #00705c;
      display: flex;
      gap: 145px;
      position: relative;

      /* border-bottom: 1px solid #dad7d0; */

      .index-content-counter {
        display: flex;
        gap: 10px;

        .index-counter-content {
          color: var(--color);
          font-size: 57px;
          width: 57px;
          border-bottom: 2px solid #bfbcb5;
        }

        .index-counter-label {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 10px 0;
          color: #000000;

          .index-counter-desc {
            font-size: 14px;
          }

          .index-counter-unit {
            font-size: 17px;
          }
        }
      }
    }

    .index-content-counter-box::after {
      content: '';
      display: block;
      width: 100%;
      position: absolute;
      bottom: 1px;
      border-bottom: 1px solid #dad7d0;
    }
  }
}

#index-main .index-item[data-anchor='product_center'] {
  background-image: url('../images/home/cpbj.jpg');
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .index-item-main {
    flex-direction: column;
    justify-content: center;
    gap: 36px;

    /* .product-content-box {
      width: 100%;
    } */

    .prod-hbar {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .prod-title {
        font-size: 42px;
        color: #000000;
        padding-left: 5px;
      }
    }

    .index-item-main-content {
      display: flex;
      gap: 70px;
    }

    .prod-cover {
      display: flex;
      flex-direction: column;

      gap: 36px;

      .prod-img {
        position: relative;
        padding-right: 15px;

        .prod-img-bb-box {
          position: absolute;
          top: 20px;
          right: 0;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .prod-img-banben {
          width: 174px;
          height: 73px;
          display: flex;
          justify-content: center;
          align-items: center;

          .prod-img-banben-label {
            color: #ffffff;
            font-size: 32px;
            position: relative;
            top: -4px;
          }

          &[data-type='1'] {
            background-image: url('../images/home/banben1.png');
            background-size: cover;
          }
        }

        & > .prod-img-wrapper {
          width: 840px;
          height: 470px;
          background-color: #ffffff;
          border-radius: 10px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }

    .index-content {
      height: 560px;
      flex-grow: 1;
      overflow: hidden;

      .index-content-nav {
        color: #999999;
        font-size: 24px;
        display: flex;
        justify-content: flex-end;
        gap: 110px;

        .index-content-nav-tab {
          border-bottom: 5px solid transparent;
        }

        .is-active {
          color: #222222;
          border-bottom-color: #4ab344;
        }
      }

      .index-content-header {
        color: #000000;
        font-size: 50px;
        white-space: nowrap;
      }

      .index-content-main {
        color: #000000;
        p {
          margin: 10px 0;
          line-height: 1.5;
          font-size: 18px;
        }

        & > div:first-child {
          max-height: 320px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .index-content-extra {
          margin-top: 32px;
        }
      }
    }

    .product-tabs-box {
      width: 100%;
      display: flex;
      gap: 16px;

      .product-tabs-prev,
      .product-tabs-next {
        height: 100%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.025);
        border-radius: 5px;

        svg {
          fill: #4ab344;
          height: 32px;
        }
      }
    }

    .product-tabs {
      --h: 110px;
      --w: 300px;
      height: var(--h);
      width: calc(100% - 96px);
      /* display: flex;
      flex-wrap: nowrap;
      overflow: hidden; */
      position: relative;

      .product-tabs-pane {
        width: var(--w);
        height: var(--h);
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #000000;
        border-radius: 10px;
        background-color: #ffffff;
        overflow: hidden;
        user-select: none;
        padding: 0 10px;

        cursor: pointer;

        /* margin-right: 24px; */

        &.is-active {
          color: #ffffff;
          background-color: #4ab344;
        }
      }

      /* & > .product-tabs-pane:last-child {
        margin-right: 0;
      } */
    }
  }
}

#index-main .index-item[data-anchor='success_cases'] {
  .case-box {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;

    .case-item-wrapper {
      margin: 8px;

      .case-item {
        min-width: 380px;
        max-width: 387px;
        height: 355px;
        border-radius: 10px;
        background-color: #a9d7dc;

        color: #ffffff;
        font-size: 24px;
        overflow: hidden;
        position: relative;

        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .case-item-title {
          position: absolute;
          bottom: 0;
          padding: 8px;
        }
      }
    }

    .case-item-wrapper:has(.case-item.item-desc) {
      grid-column: 1 / span 2;

      .case-item {
        width: unset;
        max-width: unset;
        background: none;

        color: #000000;

        .case-item-title {
          font-size: 44px;
          font-weight: bold;
          position: static;
        }

        .case-item-content {
          width: 500px;
          font-size: 24px;

          p {
            line-height: 1.5;
          }
        }

        .index-content-extra {
          margin-top: 42px;
        }
      }
    }
  }
}

#index-main .index-item[data-anchor='news_updates'] {
  background-image: url('../images/home/xwbg.jpg');
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .index-item-main {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    .index-content-header {
      display: flex;
      justify-content: space-between;

      .index-content-title {
        font-size: 44px;
        color: #333333;
      }
    }

    .index-content-nav {
      color: #999999;
      display: flex;
      gap: 90px;
      font-size: 24px;
      margin-top: 72px;

      .index-content-nav-tab {
        border-bottom: 5px solid transparent;
        cursor: pointer;
      }

      .is-active {
        color: #222222;
        border-bottom-color: #4ab344;
      }
    }

    .news-item-box {
      margin-top: 54px;
      display: grid;
      gap: 54px;
      grid-template-columns: repeat(4, 1fr);
      position: relative;

      .news-item {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .news-item-img {
          border-radius: 10px;
          aspect-ratio: 840 / 470;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .news-item-date {
          font-size: 20px;
          color: #00705c;
        }

        .news-item-desc {
          font-size: 20px;
          color: #222222;
          line-height: 1.5;
          height: 60px;
          overflow: hidden;
          text-overflow: ellipsis;

          a {
            color: #222222;
            text-decoration: none;
          }
        }
      }
    }

    .news-item-box2 {
      margin-top: 54px;
      position: relative;

      .news-item-row {
        position: absolute;
        top: 0;
        width: 100%;
      }

      .news-item {
        display: flex;
        flex-direction: column;
        width: calc(25% - 25px);
        margin-right: 25px;
        gap: 20px;
        position: absolute;

        .news-item-img {
          border-radius: 10px;
          aspect-ratio: 840 / 470;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .news-item-date {
          font-size: 20px;
          color: #00705c;
        }

        .news-item-desc {
          font-size: 20px;
          color: #222222;
          line-height: 1.5;
          height: 60px;
          overflow: hidden;
          text-overflow: ellipsis;

          a {
            color: #222222;
            text-decoration: none;
          }
        }
      }
    }
  }
}

#index-main .index-item[data-anchor='market'] {
  background-image: url('../images/home/scbj.jpg');
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .index-item-main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;

    .index-content-header {
      display: flex;
      justify-content: space-between;

      .index-content-title {
        font-size: 42px;
        color: #000000;
        font-weight: bold;
      }
    }

    .market-content {
      align-self: stretch;
      display: flex;
      gap: 42px;

      .market-map {
        img {
          width: 888px;
          object-fit: cover;
        }
      }

      .market-item-box {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 50px;

        .market-item {
          display: flex;
          align-items: center;
          gap: 42px;

          .market-item-icon {
            img {
              width: 50px;
              height: 50px;
            }
          }

          .market-item-desc {
            font-size: 24px;
            color: #333333;
            font-weight: bold;
          }
        }
      }
    }
  }
}