.product_section {


  .feature_box {
    height: 527px;
    width: 100%;
    position: relative;


    .row {
      display: flex;
      align-items: center;
    }

    .kv {

      top: 0;
      bottom: 0;
      position: absolute;
      display: flex;
      margin-left: auto;
      justify-content: center;
      align-items: center;

      img {
        max-width: 453px;
        width: 60vw;
      }

    }

    .col {
      text-align: center;
    }

    .box {
      text-align: center;
      position: absolute;
      height: 300px;
      width: 300px;

      h3 {
        padding-top: 0.5rem;
        color: #3B5D7F;
        padding-bottom: 0.5rem;
      }

      p {
        color: #3B5D7F;
      }
    }

    .one {
      top: 0;
      left: 0;

    }

    .two {
      right: 0;
      top: 0;


    }

    .three {
      bottom: 0;
      left: 0;


    }

    .four {
      bottom: 0;
      right: 0;


    }

    .icon {
      margin: auto;
      aspect-ratio: 1;
      width: 38px;
      height: 38px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .icon_one {
      background-image: url("../images/product/icon01.png");

    }

    .icon_two {
      background-image: url("../images/product/icon01.png");

    }
  }

  .grid-item:hover {
    transform: scale(1.2); /* 放大 1.2 倍 */
  }
  .grid-item.f_1 {
    height: 159px;
    img{
      height: 59px;
    }
  }
  .grid-item.f_2{
    margin-left: 20px;
    height: 139px;
    img{
      height: 67px;
    }
  }
  .grid-item.f_3{
    height: 159px;
    img{
      height: 67px;

    }
  }
  .grid-item.f_4{
    margin-left:  20px;
    margin-right:  -20px;
    height: 176px;
    img{
      height: 78px;
    }
  }
  .grid-item.f_5{
    /*margin-left:  10px;*/
    /*margin-right:  10px;*/
    height: 178px;
    img{
      height: 80px;
    }
  }
  .grid-item.f_6{
    margin-left: 10px;
    width: 210px;
    height: 139px;
    img{
      height: 63px;
    }
  }
  .grid-item.f_7{
    /*margin-left: -8rem;*/
    /*margin-right: 8rem;*/
    height: 189px;
    img{
      height: 85px;
    }
  }
  .grid-item.f_8{
    margin-left:  20px;
    margin-right:  -20px;
    width: 205px;
    height: 171px;
    img{
      height: 65px;
    }
  }
  .grid-item.f_9{
    width: 179px;
    height: 148px;
    img{
      height: 97px;
    }
  }
  .grid-item.f_10{
    width: 217px;
    height: 181px;
    img{
      height: 97px;
    }
  }
  .grid-item.f_11{
    width: 194px;
    height: 159px;
    img{
      height: 94px;
    }
  }
  .grid-item.f_12{
    width: 150px;
    height: 150px;
    img{
      height: 57px;
    }
  }

  .feature_box2 {

    .grid {
      column-count: 3;
      column-gap: 20px;
      max-width: 732px;
      margin: 0 auto;
    }

    .grid-item {
      break-inside: avoid;
      background-color: #F1F1F1;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: transform 0.3s ease;

      h3 {
        margin-top: 0.5rem;
        color: #3B5D7F;
        margin-bottom: 0;
      }


    }

    .grid-item img {

      max-width: 200px;

    }
    .s_1 {
      padding: 0;
      background-color: #f8f8f8;
      height: 26px;
    }
    .s_2 {
      background-color: #f8f8f8;
      height: 50px;
    }




  }

  .feature_box3 {
    height: 900px;
    width: 100%;
    position: relative;


    .row {
      display: flex;
      align-items: center;
      position: relative;
    }

    .kv {

      top: 0;
      bottom: 0;

      display: flex;
      margin-left: auto;
      justify-content: center;
      align-items: center;

      img {
        max-width: 453px;
        width: 60vw;
      }

    }

    .col {
      text-align: center;
    }

    .box {
      text-align: center;
      position: absolute;
      height: 300px;
      width: 300px;

      h3 {

        padding-top: 0.5rem;
        color: #3B5D7F;
        padding-bottom: 0.5rem;
      }

      p {
        color: #3B5D7F;
      }
    }

    .one {
      top: 0;
      left: 0;

    }

    .two {
      right: 0;
      top: 0;


    }

    .three {
      bottom: 0;
      left: 0;


    }

    .four {
      bottom: 0;
      right: 0;


    }

    .icon {
      margin: auto;
      aspect-ratio: 1;
      width: 100%;
      max-width: 38px;
      height: 100%;
      max-height: 38px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .icon_one {
      background-image: url("../images/product/icon01.png");

    }

    .icon_two {
      background-image: url("../images/product/icon01.png");

    }
  }

   .sub_title_outline{
     margin-top: 2rem;
     font-weight: normal;
     color: #3B5D7F;
     padding: 0.5rem 1rem;
   }
}
@media (max-width: 1200px) {
  .product_section {


    .feature_box {
      height: unset;

      .kv{
        position: relative;
      }


      .box {
        text-align: center;
        position: relative;
        height: unset;
        width: 100%;


        h3 {

          padding-left: 1rem;
          padding-top: 0;
          margin: 0;
        }

        p {
          padding-left: 52px;
          text-align: left;
          margin-bottom: 1rem;
        }

        div:nth-child(1) {
          display: flex;

        }
      }


      .icon {
        margin: unset;

      }

    }

    .feature_box2 {
      .grid {
        column-count: 2;
      }
      .grid-item {
        aspect-ratio: 1;
        margin-bottom: 0;
      }
      .grid-item.long {
        aspect-ratio: 3/2;
      }
    }

    .feature_box3 {
      height: unset;

      .kv{
        position: relative;
      }


      .box {
        text-align: center;
        position: relative;
        height: unset;
        width: 100%;


        h3 {
          padding-left: 1rem;
          padding-top: 0;
          margin: 0;
        }

        p {
          padding-left: 52px;
          text-align: left;
          margin-bottom: 1rem;
        }

        div:nth-child(1) {
          display: flex;

        }
      }


      .icon {
        margin: unset;

      }

    }

    .grid-item.f_1 {
      height: 100%;
      img{
        height: 59px;
      }
    }
    .grid-item.f_2{
      margin-left: 0;
      height: 100%;
      img{
        max-width: 107px;
      }
    }
    .grid-item.f_3{
      height: 100%;
      img{
        height: 67px;

      }
    }
    .grid-item.f_4{
      margin-left:  0;
      margin-right:  0;
      height: 100%;
      img{
        height: 78px;
      }
    }
    .grid-item.f_5{
      margin-left:  0;
      margin-right:  0;
      height: 100%;
      img{
        height: 63px;
      }
    }
    .grid-item.f_6{
      margin-left:  0;
      width: 100%;
      height: 100%;
      img{
        height: 65px;
      }
    }
    .grid-item.f_7{
      margin-left: 0;
      margin-right: 0;
      height: 100%;
      img{
        height: 85px;
      }
    }
    .grid-item.f_8{
      margin-left: 0;
      width: 100%;
      height: 100%;
      img{
        height: 65px;
      }
    }
    .grid-item.f_9{
      width: 100%;
      height: 100%;
      img{
        height: 97px;
      }
    }
    .grid-item.f_10{
      width: 100%;
      height: 100%;
      img{
        height: 94px;
      }
    }
    .grid-item.f_11{
      width: 100%;
      height: 100%;
      img{
        height: 52px;
      }
    }
    .grid-item.f_12{
      width: 100%;
      height: 100%;
      img{
        height: 43px;
      }
    }

  }
}