.app_section {

  h1 {
    text-align: left;
  }

  h2 {
    margin-top: 2rem;
    text-align: center;
  }

  .kv_info {
    display: flex;
    align-items: center;

    h3 {
      text-align: left;
      font-size: 1.875rem;
    }

    h1 {
      font-size: 3.125rem;
    }

    h2 {

      text-align: left;
    }

  }

  .point_card {

    aspect-ratio: 693/455;
    max-width: 455px;
    width: 100%;
    height: 100%;
    background-color: #85c1e9; /* 當背景圖片淡出時的背景顏色 */
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 防止超出邊界 */
    position: relative; /* 為了讓背景圖片作為偽元素定位 */

    .text-box {
      height: 100px;
      display: flex;
      align-items: center;

      z-index: 2;
      position: absolute; /* 使用 absolute 來配合 top 定位 */
      text-align: center;
      color: white;
      transform-origin: center;
      /*transform: scale(1) translate(0%, 50%); !* 初始狀態文字較大並居中 *!*/
      transition: transform 0.5s ease; /* 文字縮小及移動動畫 */
    }

    h2 {
      margin: 0;
    }

    .description {
      padding: 0 3rem;
      font-size: 1rem;
      color: white;
      opacity: 0; /* 初始隱藏內文字 */
      transition: opacity 0.5s ease; /* 顯示內文字的動畫 */
      position: absolute;
      top: 50%;
      text-align: left;
      width: 100%;
    }


  }

  .point_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 0;
  }

  .point_card.g1::before {
    background-image: url("../images/app/q1.png");
  }

  .point_card.g2::before {
    background-image: url("../images/app/q2.png");
  }

  .point_card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(45, 94, 143, 0.6);
    transition: background-color 0.5s ease;
    z-index: 1;
  }

  .point_card:hover::before {
    opacity: 0;
  }

  .point_card:hover::after {
    opacity: 0;
  }

  .point_card:hover {
    background-image: none;
    background-color: #E3F3F2;
  }

  .point_card:hover .text-box {
    transform: translate(0%, -100%) scale(1);
    color: black;
  }

  .point_card:hover .description {
    opacity: 1;
    color: black;
  }

}

.app_function_section {

  .app_function_grid {
    padding-right: 1rem;
  }

  .grid {
    column-count: 2;
    column-gap: 3rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: 3rem;
  }

  .grid-item {

    break-inside: avoid;
    margin-top: 3rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.3s ease;

    .app_function {
      text-align: left;
      padding: 2rem;
      border-radius: 2vw;
      aspect-ratio: 300 / 355;

      .icon {
        display: flex;
        justify-content: end;

      }

      img {

        padding-top: 0;
        max-height: 80px;
        max-width: 80px;
      }

      h3 {
        padding-top: 3rem;
        color: #1E2F40;

      }

      p {
        color: #1E2F40;

      }


    }

  }


  .offset_top {
    margin-top: 3rem;
  }

  .color_1 {
    background-color: rgba(255, 236, 181, 0.6);
  }

  .color_2 {
    background-color: rgba(213, 239, 238, 0.6);
  }


}

.app_function_phone {
  height: 866px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  background-image: url('../images/app/app_mockup.png');
}

.app_ex_footer {

  .app_section_footer {
    height: 1100px;
    background-color: #F1F1F1;
    border-radius: 10vw 0 0 0;
    margin-left: 17vw;

    .app_footer_info {
      padding-top: 8rem;

    }
    .app_footer_info .qrcode{
      max-width: 160px;

    }

    h3 {
      color: #2A5C8D;
      line-height: 2rem;
    }

    .phone_mockup {
      height: 100%;
      overflow: hidden;
      padding-top: 13rem;
      max-width: 584px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: bottom;
      background-image: url('../images/app/app_mockup_footer.png?v01');

    }
  }


  #footer {
    margin-top: -22rem;
  }

}
@media (max-width: 1200px) {
  .app_function_section {

    .grid {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 3rem;
    }


  }


}
@media (max-width: 992px) {
  .app_section {

    h2 {
      margin-top: 1rem;

    }


    .kv_info {
      display: flex;
      justify-content: center;
      align-items: center;

      h3 {
        text-align: left;
        font-size: 1.875rem;
      }

      h1 {
        font-size: 3.125rem;
        line-height: 4rem;
      }

    }


    .point_card {
      aspect-ratio: 328/370;
      border-radius: 5vw;
      .text-box {

      }

      h2 {

      }

      .description {
        padding: 0 1rem;

      }

    }
    .point_card.g1::before {
      background-image: url("../images/app/q1_m.png");
    }

    .point_card.g2::before {
      background-image: url("../images/app/q2_m.png");
    }
  }


  .app_function_section {

    .app_function_grid {
      padding-right: unset;
    }

    .grid {
      padding: 0 3rem;
      column-count: 2;
      column-gap: 3rem;
      max-width: unset;
      margin-left: auto;
      margin-right: auto;
    }


    .offset_top {
      margin-top: 0rem;
    }

    .app_function_phone {
      height: 60vh;
      max-height: 588px;
      background-size: cover;

    }


  }


  .app_ex_footer {

    .app_section_footer {
      height: 1100px;
      border-radius: 0;
      margin-left: 0;

      .app_footer_info {
        padding-top: 2rem;

        .single_logo{
          margin-left: auto;
          margin-right: auto;
        }

      }

      h3 {
        text-align: center;
        line-height: 2rem;
      }


    }


  }
}

@media (max-width: 768px) {
  .app_function_section {
    .grid {
      column-count: 1;
    }
    .grid-item {
      .app_function {
        margin-bottom: 2rem;
        border-radius: 6vw;
      }
    }



  }

  .app_ex_footer {

    .app_section_footer {


      .phone_mockup {
        aspect-ratio: 351 / 616;
        height: 86%;
        padding-top: 0;
        max-width: 100%;
        margin: auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        background-image: url('../images/app/app_mockup2_footer.png?v02');

      }
    }


  }
}