.albumPart{
  width: 100%;
  display: flex;
  gap: 70px;
  overflow: hidden;
}
.album{
  width: 350px;
  text-align: center;
}
.onn{
  margin:-2% 7% 0 1%;
}
.album.onn img{
  width: 480px;
  height: 480px;
} 
.album:not(.onn){
  opacity: 0.5;
}
.album:not(.onn){
  font-size: 50px;
}
.album:not(.onn) p,
.album:not(.onn) span{
  display: none;
}
.album img{
  width: 320px;
  height: 320px;
}
.album .title{
  font-size: 30px;
  font-weight: bold;
  color: #222;
  margin-top: 60px;
}
.album .name{
  font-size: 22px;
  font-weight: bold;
  color: #222;
}
.album .date{
  font-size: 16px;
  color: #555;
}

/*album css*/
section{
  margin: 100px 0 200px 0;
}
.slide{
  width: 100%;
  height: 500px;
  /* overflow: hidden; */
  position: relative;
}

.slide .imgGroup{
  width: 3200px;
  display: flex;
  position: absolute;
  left: calc(50% - 210px);
  transition: margin 0.5s;
  text-align: center;
}

.imgGroup>li>a{
  width: 320px;
  height: 500px;
  padding: 0 100px;
  box-sizing: border-box;
  opacity: 0.2;
  transition: 0.3s;
}


.imgGroup>li>a>h3 {
  font-size: 30px;
  color: #555;
  margin-top: 20px;
  margin-left: 80px;
}

.imgGroup .title,
.imgGroup .date {
  font-size: 16px;
  color: #666;
  display: none;
  margin-left: 80px;
}

.imgGroup>li>a>img {
  width: 320px;
  height: 320px;
  transition: all 0.3 ease-in-out;
}


.imgGroup>li.on a{
  opacity: 1;
  transform: scale(1.4);
}
.imgGroup>li.on img{
  transform: scale(1.4);
  margin-bottom: 50px;
}
.imgGroup>li.on .name,
.imgGroup>li.on .date,
.imgGroup>li.on .title{
  display: block;
}

.prev,
.next {
  font-size: 50px;
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  left: 50%;
  color: #222;
}

.prev {
  margin-left: -225px;
}

.next {
  margin-left: 295px;
}
/*hover*/
.prev:hover,.next:hover{
color: #f2a4b9;
}