@import "design-tokens.less";

.page-solution {
    font-family: 'Gotham-book';
    overflow: hidden;
    background: @home-bg;
    box-sizing: border-box;

    .banner {
      position: relative;
      width: 100%;
      min-height: 53rem;
      height: auto;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      display: flex;
      flex-direction: column;
      
      box-sizing: border-box;

      .banner-text {
        .home-section-shell();
        width: 100%;
        max-width: @layout-max;
        padding: 0;
        box-sizing: border-box;

        .title,
        .desc {
          max-width: 56rem;
        }

        .title {
          font-size: @inner-hero-title-desktop;
          line-height: 1.15;
          letter-spacing: -0.02em;
          color: #fff;
        }

        .desc {
          color: rgba(255, 255, 255, 0.95);
          font-size: @inner-hero-desc-desktop;
          line-height: 1.6;
          letter-spacing: -0.01em;
          margin-top: 1.2rem;
          max-width: 52rem;
        }
      }
    }

    .content {
      .home-section-shell();
      padding-top: @inner-section-gap-desktop;
      padding-bottom: 6.4rem;
      padding-left: 0;
      padding-right: 0;
    }
    .title-1 {
      color: #000;
      font-size: 3.2rem;
      line-height: 1.2;
      letter-spacing: -0.02em;
      width: 100%;
      max-width: 100%;
      text-align: center;
      margin-bottom: 4rem;
    }

    .state-card-list {
      gap: 2rem;
    }

    .state-card {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      aspect-ratio: 383.2 / 386.4;
      height: auto;
    }

    .grid-2 {
      background: #fff;
      border-radius: @radius-home-card;
      box-shadow: @shadow-home-card;
      border: 1px solid rgba(15, 23, 42, 0.06);
      padding-top: 7.04rem;
      padding-bottom: 1.92rem;
      margin-top: 6.88rem;
      .title-text {
        color: #000;
        font-size: 3.2rem;
        line-height: 1.2;
        letter-spacing: -1px;
        text-align: center;
        width: 100%;
      }
      .quotes {
        width: 100%;
        max-width: 113.12rem;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-between;
        margin-top: 4rem;
        margin-bottom: 12rem;
        .swiper {
          overflow: hidden;
        }
        .swiper-slide {
          margin-right: 2.4rem;
        }
        .quote-1 {
          width: 22.72rem;
          height: 28.4rem;
        }
        .quote-2 {
          width: 37.68rem;
          height: 28.4rem;
        }
        .quote-3 {
          width: 22.72rem;
          height: 28.4rem;
        }
        .quote-4 {
          width: 22.72rem;
          height: 28.4rem;
        }
      }
      .charts {
        margin-top: 7.2rem;
        margin-bottom: 8.8rem;
        .chart-1 {
          width: 37.6rem;
          height: 30.64rem;
        }
        .chart-2 {
          width: 37.6rem;
          height: 30.64rem;
        }
        .chart-text {
          text-align: center;
          color: #898989;
          font-size: 1.28rem;
          line-height: 1.2;
          letter-spacing: -0.4px;
          bottom: 30.96rem;
          width: 37.6rem;
        }
        .separator {
          width: 1px;
          height: 27.6rem;
          background: #BDBDBD;
          margin-left: 7.92rem;
          margin-right: 7.92rem;
        }
      }
      .note {
        color: #898989;
        font-size: 1.12rem;
        line-height: 1.8;
        letter-spacing: -0.35px;
        text-align: center;
      }
    }
    .grid-3 {
      margin-top: 12rem;
      .title-text {
        width: 100%;
        text-align: center;
        color: #000;
        font-size: 3.2rem;
        line-height: 1.2;
      }
      .desc-text {
        margin-top: 2.4rem;
        margin-bottom: 5.44rem;
        text-align: center;
        color: #000;
        font-size: 1.76rem;
        line-height: 1.2;
        letter-spacing: -0.5px;
      }
      .swiper {
        overflow: hidden;
        .swiper-slide {
          width: 63.2rem;
          height: 37.28rem;
          position: relative;
          margin-left: 1.28rem;
          margin-right: 1.28rem;
        }
      }
    }

    .grid-4 {
      margin-top: 12rem;
      .title-text {
        color: #000;
        font-size: 3.2rem;
        line-height: 1.2;
        letter-spacing: -1px;
        text-align: center;
      }
      .desc-text {
        color: #000;
        font-size: 1.76rem;
        line-height: 1.2;
        letter-spacing: -0.55px;
        text-align: center;
        margin-top: 2.4rem;
        margin-bottom: 5.44rem;
      }
      .ac-container {
        width: 100%;
        height: auto;
        min-height: 72.32rem;
        border-radius: @radius-home-card;
        background: #fff;
        box-shadow: @shadow-home-card;
        border: 1px solid rgba(15, 23, 42, 0.06);
        box-sizing: border-box;
        .ac-img {
          width: 112.8rem;
          height: 44.32rem;
          margin-left: 3.52rem;
        }
        .icon-list {
          width: 112.8rem;
          height: 21.84rem;
          margin-top: 2.4rem;
          margin-left: 3.52rem;
          .icon-card {
            width: 36.24rem;
            height: 21.84rem;
            background: rgb(246, 246, 246);
            border-radius: 0.8rem;
            padding-top: 13.92rem;
            position: relative;
            .icon-img {
              left: 50%;
              transform: translateX(-50%);
            }
            .icon-img-1 {
              width: 5.28rem;
              height: 5.6rem;
              top: 4.72rem;
            }
            .icon-img-2 {
              width: 5.28rem;
              height: 5.28rem;
              top: 4.96rem;
            }
            .icon-img-3 {
              width: 4.48rem;
              height: 5.28rem;
              top: 4.96rem;
            }
            .icon-text {
              width: 100%;
              text-align: center;
              color: #000;
              font-size: 1.92rem;
              line-height: 1.2;
              letter-spacing: -0.75px;
            }
          }
        }
      }
    }

    .grid-5 {
      width: 100%;
      max-width: 104.64rem;
      margin-left: auto;
      margin-right: auto;
      margin-top: @inner-section-gap-desktop;
      .title-text {
        color: #000;
        font-size: 4.8rem;
        line-height: 1.2;
        margin-bottom: 2.24rem;
      }
      .desc-text {
        color: #000;
        font-size: 2.24rem;
        line-height: 1.2;
        .blue-text {
          color: #0092d8;
        }
      }
      .row-text {
        width: 12.8rem;
        font-size: 4.16rem;
        line-height: 1.2;
        letter-spacing: -0.03px;
      }
      .line-text {
        color: #000;
        font-size: 1.76rem;
        line-height: 1.2;
        top: 1.92rem;
        left: 0;
      }
      .row-1 {
        margin-top: 4.8rem;
        .row-1-line {
          background: #0092d8;
          width: 87.04rem;
          height: 1.12rem;
        }
        .row-text {
          color: #0092d8;
        }
      }
      .row-2 {
        margin-top: 4.8rem;
        .row-2-line {
          width: 65.2rem;
          height: 1.12rem;
          background: #bdbdbd;
        }
        .row-text {
          color: #bdbdbd;
        }
      }
    }
    .grid-6 {
      background: #fff;
      padding-top: 7.2rem;
      padding-bottom: 3.84rem;
      border-radius: @radius-home-card;
      box-shadow: @shadow-home-card;
      border: 1px solid rgba(15, 23, 42, 0.06);
      margin-top: @inner-section-gap-desktop;
      .title-text {
        color: #000;
        font-size: 3.2rem;
        line-height: 1.2;
        letter-spacing: -1px;
        width: 100%;
        text-align: center;
      }
      .sub-title {
        color: #686868;
        font-size: 3.2rem;
        line-height: 1.2;
        letter-spacing: -1px;
        margin-top: 1.92rem;
        width: 100%;
        text-align: center;
      }

      .map-container {
        width: 105.68rem;
        height: 29.6rem;
        margin-top: 25.28rem;
        margin-left: 4rem;
        .line-1 {
          width: 54.88rem;
          height: 7.84rem;
          left: -0.24rem;
          bottom: 31.36rem;
        }
        .line-2 {
          width: 79.68rem;
          height: 7.6rem;
          left: 32.56rem;
          bottom: 40.88rem;
        }
        .line-3 {
          width: 31.6rem;
          height: 6.32rem;
          left: 63.36rem;
          bottom: 28.24rem;
        }
        .line-4 {
          width: 40.72rem;
          height: 6.8rem;
          left: 5.36rem;
          bottom: 18.8rem;
        }
        .line-5 {
          width: 30.72rem;
          height: 6.8rem;
          left: 55.44rem;
          bottom: 17.76rem;
        }
      }

      .devices {
        width: 113.04rem;
        height: 44.72rem;
        margin-top: 6.4rem;
        margin-left: auto;
        margin-right: auto;
        background: #F7F7F7;
        border-radius: 1.2rem;
        padding-top: 5.6rem;
        .title-text {
          width: 100%;
          text-align: center;
          color: #686868;
          font-size: 3.2rem;
          line-height: 1.2;
          letter-spacing: -1px;
        }
        .device-1 {
          width: 30.48rem;
          height: 19.28rem;
          left: 4.4rem;
          top: 14.32rem;
        }
        .device-2 {
          width: 28.96rem;
          height: 19.28rem;
          left: 42.08rem;
          top: 14.32rem;
        }
        .device-3 {
          width: 25.84rem;
          height: 19.28rem;
          left: 79.6rem;
          top: 14.32rem;
        }
        .device-text {
          width: 100%;
          left: 50%;
          transform: translateX(-50%);
          top: 21.44rem;
          color: #000;
          font-size: 2.24rem;
          line-height: 1;
          letter-spacing: -0.02px;
          text-align: center;
        }
      }
      .solutions {
        margin-top: 6.4rem;
        .title-text {
          margin-bottom: 5.6rem;
          color: #686868;
        }
        .solution-row-2 {
          margin-top: 1.92rem;
        }
        .solution-row {
          width: 113.12rem;
          margin-left: 3.44rem;
          margin-right: 3.44rem;
          display: flex;
          justify-content: space-between;
          .solution-card {
            position: relative;
            .hover-img {
              opacity: 0;
              transition: opacity 0.3s ease;
            }
            &:hover {
              .hover-img {
                opacity: 1;
              }
            }
            .solution-base {
              padding-top: 18.8rem;
              .solution-text {
                position: relative;
                color: #000;
                font-size: 1.76rem;
                line-height: 1.27;
                letter-spacing: -0.03px;
              }
            }
          }
          .solution-card-1 {
            width: 55.2rem;
            height: 26.4rem;
            .solution-base {
              padding-top: 0;
              padding-left: 32.96rem;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
          .solution-card-2 {
            width: 55.36rem;
            height: 26.4rem;
            .solution-base {
              padding-top: 0;
              padding-left: 36.4rem;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
          .solution-card-3 {
            width: 26.4rem;
            height: 26.4rem;
          }
          .solution-card-4 {
            width: 26.4rem;
            height: 26.4rem;
          }
          .solution-card-5 {
            width: 26.4rem;
            height: 26.4rem;
          }
          .solution-card-6 {
            width: 26.4rem;
            height: 26.4rem;
          }
        }
      }
    }
    .icon-img-inner-1, .icon-img-inner-3 {
      animation: icon-1 3s infinite;
    }
    .icon-img-inner-2 {
      animation: icon-2 3s infinite;
    }
}

@media screen and (max-width: @bp-mobile) {
  .page-solution {
    .content {
      width: 38.2rem;
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
    .banner {
      height: 55rem;
      margin-bottom: 19.1rem;
      align-items: center;

      .banner-text {
        position: absolute;
        left: 0;
        right: 0;
        width: calc(100% - 3.2rem);
        max-width: 38.2rem;
        margin-left: auto;
        margin-right: auto;
        transform: none;
        bottom: -19.1rem;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.55);
        padding: 4.4rem 1.6rem 1.6rem;

        .title {
          width: 100%;
          max-width: 100%;
          margin-left: auto;
          margin-right: auto;
          font-size: 3rem;
          letter-spacing: -0.04em;
          text-align: center;
          line-height: 1.3;
          color: #fff;
        }

        .desc {
          width: 100%;
          max-width: 34.8rem;
          margin-left: auto;
          margin-right: auto;
          color: #fff;
          text-align: center;
          font-size: 1.4rem;
          margin-top: 2.4rem;
          letter-spacing: 0;
          line-height: 1.45;
        }
      }
    }
    .title-1 {
      margin-bottom: 2.5rem;
      font-size: 2rem;
      width: 30rem;
      margin-left: auto;
      margin-right: auto;
    }
    .state-card-list {
      flex-direction: column;
    }
    .state-card {
      width: 38.2rem;
    }
    .state-card-1 {
      height: 33.5rem;
      margin-bottom: 2rem;
    }
    .state-card-2 {
      height: 33.5rem;
      margin-bottom: 2rem;
    }
    .state-card-3 {
      height: 33.5rem;
    }
    .grid-2 {
      margin-top: 5rem;
      padding-top: 3rem;
      padding-bottom: 2rem;
      .title-text {
        font-size: 2rem;
        line-height: 1.3;
        letter-spacing: -1px;
        width: 32.5rem;
        margin-left: auto;
        margin-right: auto;
      }
      .quotes {
        width: 38.2rem;
        margin-top: 2.1rem;
        margin-bottom: 5rem;
        .swiper-slide {
          margin-right: 0;
          margin-left: 1.6rem;
        }
        .quote-1 {
          width: 28.2rem;
          height: 26rem;
          border-radius: 0.6rem;
          overflow: hidden;
        }
        .quote-2 {
          width: 28.2rem;
          height: 26rem;
          border-radius: 0.6rem;
          overflow: hidden;
        }
        .quote-3 {
          width: 28.3rem;
          height: 26rem;
          border-radius: 0.6rem;
          overflow: hidden;
        }
        .quote-4 {
          width: 28.3rem;
          height: 26rem;
          border-radius: 0.6rem;
          overflow: hidden;
        }
      }
      .charts {
        flex-direction: column;
        align-items: center;
        margin-top: 7.4rem;
        margin-bottom: 4rem;
        .chart-1 {
          width: 33.1rem;
          height: 27.6rem;
        }
        .chart-2 {
          width: 32.9rem;
          height: 27.2rem;
          margin-top: 8.8rem;
        }
        .chart-text {
          font-size: 1.4rem;
          letter-spacing: -0.35px;
          width: 25rem;
          left: 50%;
          transform: translateX(-50%);
          bottom: 28.6rem;
          line-height: 1.4;
        }
      }
      .note {
        font-size: 1rem;
        width: 32.8rem;
        margin-left: auto;
        margin-right: auto;
      }
    }
    .grid-3 {
      margin-top: 5rem;
      .title-text {
        font-size: 2rem;
        line-height: 1.4;
        letter-spacing: -1px;
      }
      .desc-text {
        margin-top: 0.8rem;
        margin-bottom: 3.6rem;
        font-size: 1.4rem;
        line-height: 1.3;
        width: 36rem;
        margin-left: auto;
        margin-right: auto;
      }
      .swiper {
        width: 41.4rem;
        margin-left: -1.6rem;
        .swiper-slide {
          width: 33rem;
          height: 19.5rem;
          margin-left: 1.2rem;
          margin-right: 1.2rem;
        }
      }
    }
    .grid-4 {
      margin-top: 6rem;
      .title-text {
        font-size: 2rem;
        line-height: 1.3;
      }
      .desc-text {
        font-size: 1.4rem;
        line-height: 1.3;
        margin-top: 1rem;
        margin-bottom: 3rem;
        width: 32rem;
        margin-left: auto;
        margin-right: auto;
      }
      .ac-container {
        height: 39.8rem;
        border-radius: 0.6rem;
        padding-top: 0.3rem;
        .ac-img {
          width: 35.9rem;
          height: 16.1rem;
          margin-left: 1.1rem;
        }
        .icon-list {
          width: 34.7rem;
          margin-left: 1.8rem;
          margin-top: 2.5rem;
          .icon-card {
            width: 10.9rem;
            height: 18.4rem;
            border-radius: 0.6rem;
            padding-top: 9rem;
            .icon-img-1 {
              width: 3.1100000000000003rem;
              height: 3.3rem;
              top: 2.9rem;
            }
            .icon-img-2 {
              width: 3.3rem;
              height: 3.3rem;
              top: 2.9rem;
            }
            .icon-img-3 {
              width: 2.8rem;
              height: 3.3rem;
              top: 2.9rem;
            }
            .icon-text {
              font-size: 1.4rem;
              letter-spacing: -0.2px;
              line-height: 1.3;
              padding-left: 0.6rem;
              padding-right: 0.6rem;
            }
          }
        }
      }
    }
    .grid-5 {
      width: 37.3rem;
      margin-top: 5.3rem;
      .title-text {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 1rem;
      }
      .desc-text {
        font-size: 1.4rem;
        line-height: 1.4;
      }
      .row-text {
        font-size: 1.6rem;
        width: 4rem;
      }
      .line-text {
        font-size: 1.1rem;
        line-height: 1.2;
        letter-spacing: -0.02px;
        top: 1.2rem;
      }
      .row-1 {
        margin-top: 4.3rem;
        .row-1-line {
          width: 32.3rem;
          height: 0.5rem;
          border-radius: 0.6rem;
        }
      }
      .row-2 {
        margin-top: 4.5rem;
        .row-2-line {
          width: 24.2rem;
          height: 0.5rem;
          border-radius: 0.6rem;
        }
      }
    }
    .grid-6 {
      margin-top: 7rem;
      padding-top: 4.4rem;
      padding-bottom: 2.4rem;
      border-radius: 0.6rem;
      overflow: hidden;
      .mo-row-1 {
        margin-top: 4rem;
      }
      .mo-row-2 {
        margin-top: 17.7rem;
      }
      .mo-row-3 {
        margin-top: 16.5rem;
      }
      .mo-card-img {
        object-fit: contain;
      }
      .mo-card-img-1 {
        width: 11.3rem;
        height: 15.9rem;
        left: 0.6rem;
        top: 3.3rem;
      }
      .mo-card-img-2 {
        width: 13.8rem;
        height: 13.6rem;
        top: 3.2rem;
        left: 13.1rem;
      }
      .mo-card-img-3 {
        width: 10.5rem;
        height: 12.1rem;
        left: 26.1rem;
        top: 3.4rem;
      }
      .mo-card-img-4 {
        width: 11.3rem;
        height: 16rem;
        left: 0.6rem;
        top: 3.2rem;
      }
      .mo-card-img-5 {
        width: 10.5rem;
        height: 12.1rem;
        left: 12.1rem;
        top: 3.4rem;
      }
      .mo-card-img-6 {
        width: 22.8rem;
        height: 6.5rem;
        left: 1.5rem;
        top: 2.2rem;
      }
      .mo-title {
        color: #0092D8;
        font-size: 1.4rem;
        line-height: 1.2;
        padding-left: 2.4rem;
        padding-right: 2.4rem;
      }
      .title-text {
        font-size: 2rem;
        line-height: 1.3;
        letter-spacing: -0.5px;
        width: 26rem;
        margin-left: auto;
        margin-right: auto;
      }
      .sub-title {
        font-size: 1.4rem;
        line-height: 1.3;
        letter-spacing: -0.35px;
        margin-top: 0.9rem;
      }
      .map-container {
        margin-top: 9.7rem;
        width: 100%;
        height: 37.5rem;
        margin-left: 1.8rem;
      }
      .devices {
        width: 34.6rem;
        height: 68.3rem;
        border-radius: 0.6rem;
        margin-top: 5rem;
        padding-top: 4rem;
        .title-text {
          font-size: 2rem;
          line-height: 1.3;
          letter-spacing: 0;
          margin-bottom: 3.2rem;
        }
        .device-text {
          position: relative;
          width: 100%;
          text-align: center;
          font-size: 1.4rem;
          letter-spacing: 0;
          margin-top: 2rem;
          top: 0;
        }
        .device-1 {
          position: relative;
          width: 26.65rem;
          margin-left: 4rem;
          height: auto;
          left: 0;
          top: 0;
          .device-1-img {
            width: 100%;
            height: 10.2rem;
          }
          .device-text {
            margin-top: 0.4rem;
          }
        }
        .device-2 {
          position: relative;
          width: 22.45rem;
          margin-left: 5.4rem;
          margin-top: 3rem;
          height: auto;
          left: 0;
          top: 0;
          .device-2-img {
            width: 100%;
            height: 9.8rem;
          }
        }
        .device-3 {
          position: relative;
          width: 21.35rem;
          margin-left: 6.3rem;
          margin-top: 4.4rem;
          height: auto;
          left: 0;
          top: 0;
          .device-3-img {
            width: 100%;
            height: 13.5rem;
          }
        }
      }
      .solutions {
        margin-top: 4rem;
        .title-text {
          width: 32rem;
          color: #000;
          margin-bottom: 5rem;
        }
        .solution-row {
          display: none;
        }
        .solution-mo {
          padding-left: 1.3rem;
          .solution-text {
            position: relative;
            color: #333;
            font-size: 1.6rem;
            line-height: 1.4;
          }
          .solution-1 {
            width: 36.45rem;
            height: 27rem;
          }
          .solution-text-1 {
            width: 36.45rem;
            text-align: center;
            margin-top: 3rem;
          }
          .solution-2 {
            margin-top: 4rem;
            width: 35.75rem;
            height: 20.5rem;
          }
          .solution-text-2 {
            width: 35.75rem;
            text-align: center;
          }
          .solution-3 {
            margin-top: 4rem;
            width: 34.65rem;
            height: 34.4rem;
          }
          .solution-text-3 {
            margin-top: -5.4rem;
            margin-left: 15.5rem;
          }
          .solution-4 {
            width: 34.6rem;
            height: 44.5rem;
            margin-top: 4rem;
          }
          .solution-text-4 {
            width: 34.6rem;
            text-align: center;
            margin-top: 2rem;
          }
          .solution-5 {
            margin-top: 4rem;
            width: 34.7rem;
            height: 23.2rem;
          }
          .solution-text-5 {
            width: 34.7rem;
            text-align: center;
            margin-top: 2rem;
          }
          .solution-6 {
            width: 34.6rem;
            height: 29rem;
            margin-top: 4rem;
          }
          .solution-text-6 {
            margin-top: -5rem;
            margin-left: 13.5rem;
          }
        }
      }
    }
  }
}

@keyframes icon-1 {
  0% {
    transform: translateY(-10px)
  }
  50% {
    transform: translateY(10px)
  }
  100% {
    transform: translateY(-10px)
  }
}
@keyframes icon-2 {
  0% {
    transform: translateY(10px)
  }
  50% {
    transform: translateY(-10px)
  }
  100% {
    transform: translateY(10px)
  }
}

@import "solution-page.less";