.fast{

  display: grid;

  grid-template-columns: repeat(2,1fr);

  gap: 0.833rem;

  padding-bottom: 4.4rem;

  .item{

    display: flex;

    border: solid 0.042rem #e5e5e5;

    >div{

      flex: 1;

    }

    img{

      height: 100%;

      width: 100%;

      object-fit: fill;

      transition: transform .3s ease;

    }

    .desc{

      padding: 2rem;

      display: flex;

      flex-direction: column;

      justify-content: center;

      h4{

        font-weight: normal;

        font-size: 1rem;

        padding-bottom: .6rem;

      }

      p{

        font-size: 0.667rem;

        font-weight: normal;

        font-stretch: normal;

        line-height: 1rem;

        letter-spacing: 0rem;

        color: #666666;

      }

    }

    

    &:hover{

      img{

        transform: scale(1.06);

      }

    }

  }

}

.advantage{

  display: flex;

  align-items: center;

  gap: 4rem;

  .advantages{

    width: 36%;

    padding: 1rem 0;

    li{

      padding: 1.2rem 0;

    }

    h4{

      font-family: HarmonyOS_Sans_SC;

      font-size: 1rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1rem;

      letter-spacing: 0rem;

      color: #000000;

      padding-bottom: 1.2rem;

    }

    p{

      font-family: HarmonyOS_Sans_SC;

      font-size: 0.667rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1rem;

      letter-spacing: 0rem;

      color: #666666;

    }

  }



}

.why-grid{

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 0.583rem;

  .reason{

    text-align: center;

    background-color: #ffffff;

    padding:2.5rem 1.8rem;

    transition: all .3s ease;

    cursor: pointer;

    .iconfont{

      display: block;

      color: #0671b9;

      font-size: 2rem;

      margin: 1rem 0;

      transition: all .3s ease;

    }

    h3{

      padding: 1.25rem 0;

      margin: 0;

      font-size: 1rem;

      text-align: center;

      transition: all .3s ease;

      color: #010101;

    }

    p{

      margin: 0;

      font-size: 0.667rem;

      line-height: 1rem;

      color: #666666;

      transition: all .3s ease;

    }

    

    &:hover{

      background-color: #0671b9;

      .iconfont,

      h3,

      p{

        color: #fff;

      }

    }

  }

}

.service{

  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 1.2rem;

  .item{

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #ffffff;

	  border: solid 0.042rem #eeee;

    padding: 2.25rem;

    text-align: center;

    &:hover{

      border-color: #0671b9;

    }

    .box{

      width: 3.75rem;

      height: 3.75rem;

      background-color: #0671b9;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      margin-bottom: 1.65rem;

      img{

        height: 1.708rem;

      }

    }

    h3{

      font-size: 1rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1rem;

      letter-spacing: 0rem;

      color: #000000;

      padding-bottom: 0.7rem;

    }

    p{

      font-size: 0.667rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1rem;

      letter-spacing: 0rem;

      color: #666666;

    }

  }

}

.map{

  display: flex;

  justify-content: space-between;

  height: 28.333rem;

  .card{

    margin-top: 5rem;

    width: 12.917rem;

    border-radius: 0.417rem;

    background-color: #ffffff1c;

    border: solid 0.042rem #ffffff1c;

    padding: 1.5rem;

    h4{

      font-size: 1rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1rem;

      letter-spacing: 0rem;

      color: #ffffff;

      margin: 10px 0;

    }

    span{

      display: block;

         padding:0 1rem;

      margin: 10px 0;

      height: 1.25rem;

      line-height: 1.25rem;

      text-align: center;

      background-color: #0671b9;

      border-radius: 0.604rem;

      font-size: 0.667rem;

      color: #fff;

    }

    p{

      font-size: 0.667rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1.25rem;

      letter-spacing: 0rem;

      white-space: pre-line;

      color: #ffffff;

    }

  }

  .map-center{

    font-size: 0.75rem;

    line-height: 1rem;

    color: #e5e5e5;

    text-align: center;

    margin-top: -1rem;

    h3{

      font-size: 1.5rem;

      line-height: 1.5rem;

      padding-bottom: 1rem;

      color: #fff;

    }

  }

}



.company{

  display: grid;

  grid-template-columns: repeat(6,1fr);

  gap: 0.667rem;

  >div{

	    border: solid 0.042rem #eeeeee;

      padding: .5rem;

      &:hover{

        img{

          transform: scale(1.06);

        }

      }

      img{

        transition:transform .3s ease;

        max-width: 100%;

      }

  }

}

.contact{

  .grid{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 0.9rem;

    padding-bottom: 0.9rem;

  }

  .label{

    font-size: 0.667rem;

    font-weight: normal;

    font-stretch: normal;

    line-height: 1rem;

    letter-spacing: 0rem;

    color: #000000;

  }

  .require::after{

    content: "*";

    color: #ff0000;

  }

  input{

    height: 2.083rem;

    box-sizing: border-box;

    padding:  0 0.6rem;	

    background-color: #ffffff;

    border: solid 1px #e5e5e5;

    font-size: 0.667rem;

    color: #000;

    width: 100%;

    box-sizing: border-box;

    &::placeholder {

      font-size: 0.667rem;

      color: #ffffff;

    }

    &:focus,

    &:hover{

      outline: unset;

      border-color: #fff;

    }

  }

  button{

    display: block;

    margin: 2rem auto;

    width: 7.5rem;

    height: 2.083rem;

    font-size: 0.667rem;

    color: #fff;

    background-color: #0671b9;

  }

  textarea{

    width: 100%;

    display: block;

    padding: 0.6rem;

    box-sizing: border-box;

    background-color: #ffffff;

    border: solid 1px #e5e5e5;

    min-height: 6.25rem;

    &:focus,

    &:hover{

      outline: unset;

      border-color: #fff;

    }

  }

}



@media (max-width: 992px) {

  .contact .grid{

    grid-template-columns: repeat(1,1fr);

  }

  .company{

    grid-template-columns: repeat(3,1fr);

  }

  .map{

    height: unset;

    gap: 1rem;

    .map-center{

      display: none;

    }

    .card{

      margin-top: 0;

      background-color: #0671b9ae;

      span{

        background-color: #fff;

        color: #0671b9;

      }

    }

  }

  .why-grid{

    grid-template-columns: repeat(2,1fr);

  }

  .search form button{

    width: unset;

    padding: 0 1rem;

    white-space: nowrap;

  }

  .fast{

    grid-template-columns: repeat(1,1fr);

    & .item:nth-child(odd){

      flex-direction: row-reverse;

    }

  }

  .service{

    grid-template-columns: repeat(2,1fr);

  }

  .advantage{

    flex-direction: column;

    gap: 0;

    .img-box{

      width: 100%;

      img{

        display: block;

        width: 100%;

        height: unset;

      }

    }

    .advantages{

      width: 100%;

    }

  }

}