.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;

    }

  }

}



.advantage{

  ul{

    display: grid;

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

    text-align: center;

    gap: 0.58rem;

    padding-bottom: 4rem;

    li{

      display: flex;

      flex-direction: column;

      // justify-content: center;

      align-items: center;

      background-color: #ffffff;

      border: solid 0.042rem #eeeeee;

      padding: 2.3rem;

      .box{

        width: 4.167rem;

        height: 4.167rem;

        background-color: #0671b9;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        img{

          height: 1.75rem;

        }

      }

      p{

        font-size: 0.667rem;

        font-weight: normal;

        font-stretch: normal;

        line-height: 1rem;

        letter-spacing: 0rem;

        color: #666666;
 	overflow: hidden;
   	 text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 4; /* 限制显示四行 */
    	-webkit-box-orient: vertical;

      }

      h3{

        font-size: 1rem;

        margin: 1rem 0;

        text{

          color: #0671b9;

        }

      }

    }

  }

}

.sea-box{

  display: flex;

  align-items: center;

  gap: 3rem;

  height: 18rem;

  &.reverse{

    flex-direction: row-reverse;

  }

  >div{

    flex: 1;

  }

  .img-box{

    height: 100%;

    width: 100%;

    overflow: hidden;

    img{

      height: 100%;

      width: 100%;

      object-fit: cover;

    }

  }

  p{

    font-size: 0.667rem;

    font-weight: normal;

    font-stretch: normal;

    line-height: 1rem;

    letter-spacing: 0rem;

    color: #666666;

  }

  .section-title{

    text-align: start;

    &::after{

      margin-left: 0;

    }

    p{

      color: #000;

    }

  }

}



.advantage-extend{

  ul{

    display: grid;

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

    text-align: center;

    gap: 0.58rem;

    li{

      display: flex;

      flex-direction: column;

      // justify-content: center;

      align-items: center;

      background-color: #ffffff;

      border: solid 0.042rem #eeeeee;

      padding: 2.3rem;

      padding-bottom: 4rem;

      .box{

        width: 4.167rem;

        height: 4.167rem;

        background-color: #0671b9;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        img{

          height: 1.75rem;

        }

      }

      p{

        font-size: 0.667rem;

        font-weight: normal;

        font-stretch: normal;

        line-height: 1rem;

        letter-spacing: 0rem;

        white-space: pre-line;

        color: #666666;

      }

      h3{

        font-size: 1rem;

        margin: 1rem 0;

        text{

          color: #0671b9;

        }

      }

    }

  }

}

@media (max-width: 992px) {

  .contact .grid{

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

  }

  .advantage ul{

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

    padding-bottom: 2rem;

  }

  .advantage-extend{

    ul{

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

    }

  }

  .sea-box{

    flex-direction: column;

    height: unset;

    &.reverse{

      flex-direction: column-reverse;

    }

  }

}