* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page-myFriends {
  width: 100%;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 10px;
  background-color: #ffb6ce;
  /*
  .ly{
      .ly_img_box{
        display: flex;
        flex-direction: column;
        width: 30%;
        gap: 10px;
        img{
          width: 100%;
        } 
      }
    }
  */
}
.page-myFriends .ly {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  background-color: #fff06a;
  gap: 10px;
  padding: 10px;
}
.page-myFriends .ly p {
  width: 60%;
  height: 520px;
  color: #fff;
  background-color: #000;
  border-radius: 20px;
  padding: 10px;
}
.page-myFriends .ly .ly_img_box {
  display: flex;
  flex-direction: column;
  width: 30%;
  gap: 5px;
}
.page-myFriends .ly .ly_img_box img {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.page-myFriends .ly .ly_img_box img:hover {
  transform: scale(1.05);
}
.page-myFriends .lnn {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  background-color: #e1fffa;
  gap: 10px;
  padding: 10px;
}
.page-myFriends .lnn p {
  width: 60%;
  height: 520px;
  color: #fff;
  background-color: #000;
  border-radius: 20px;
  padding: 10px;
}
.page-myFriends .lnn .lnn_img_box {
  display: flex;
  flex-direction: column;
  width: 30%;
  gap: 10px;
}
.page-myFriends .lnn .lnn_img_box img {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.page-myFriends .lnn .lnn_img_box img:hover {
  transform: scale(1.05);
}
.page-myFriends .htx {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  background-color: #fff06a;
  gap: 10px;
  padding: 10px;
}
.page-myFriends .htx p {
  width: 60%;
  height: 520px;
  color: #fff;
  background-color: #000;
  border-radius: 20px;
  padding: 10px;
}
.page-myFriends .htx .htx_img_box {
  display: flex;
  flex-direction: column;
  width: 30%;
  gap: 10px;
}
.page-myFriends .htx .htx_img_box img {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.page-myFriends .htx .htx_img_box img:hover {
  transform: scale(1.05);
}
.page-myFriends .wjj {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  background-color: #fc7e99;
  gap: 10px;
  padding: 10px;
}
.page-myFriends .wjj p {
  width: 60%;
  height: 520px;
  color: #fff;
  background-color: #000;
  border-radius: 20px;
  padding: 10px;
}
.page-myFriends .wjj .wjj_img_box {
  display: flex;
  flex-direction: column;
  width: 30%;
  gap: 10px;
}
.page-myFriends .wjj .wjj_img_box img {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.page-myFriends .wjj .wjj_img_box img:hover {
  transform: scale(1.05);
}