.person {

  padding: 95px 0 215px;

  background: url('../images/back.png') center no-repeat;

  background-size: cover;

}



.my {

  display: flex;

  align-items: center;

  gap: 25px;

}



.perMg {

  width: 110px;

  height: 110px;

  background-color: #e5e5e5;

  border: solid 5px #ffffff;

  box-sizing: border-box;

  overflow: hidden;

  border-radius: 50%;

}



.perMg img {

  display: block;

  width: 100%;

}



.name h5 {

  font-size: 30px;

  letter-spacing: 0px;

  color: #ffffff;

}



.name h6 {

  font-size: 24px;

  font-weight: normal;

  font-stretch: normal;

  letter-spacing: 0px;

  color: #ffffff;

}



.perNav {

  background: #fff;

  box-sizing: border-box;

  border-radius: 10px;

  padding: 0 40px 45px;

  margin: -135px 0 60px;

  min-height: 800px;

}



.perNav li {

  border-bottom: 1px solid #e5e5e5;

}



.perNav a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 30px 0;

}



.perNav a>div {

  display: flex;

  align-items: center;

  gap: 30px;

}



.perNavMg {

  width: 50px;

  height: 50px;

  border-radius: 50%;

}



.perNavMg img {

  display: block;

  width: 100%;

}



.perNav h5 {

  font-size: 30px;

  font-weight: normal;

  font-stretch: normal;

  letter-spacing: 0px;

  color: #000000;

}





@media screen and (max-width:640px) {



  .person {

    padding: 45px 0 165px;

  }

  .my{
    gap: 15px;
  }



  .perMg {

    width: 66px;

    height: 66px;

    border-width: 3px;

  }



  .name h5 {

    font-size: 20px;

    letter-spacing: 1px;

  }



  .name h6 {

    margin: 5px 0 0;

    font-size: 16px;

  }



  .perNav {

    padding: 10px 20px 45px;

    margin: -120px 0 60px;

    min-height: 400px;

  }



  .perNav a {

    padding: 10px 5px;

  }



  .perNav a>div {

    gap: 12px;

  }



  .perNavMg {

    width: 30px;

    height: 30px;

  }



  .perNav h5 {

    font-size: 16px;

  }



  .perNav a>img {

    display: block;

    width: 10px;

  }



}