.diary {
  display: flex;
  justify-content: center;
  align-items: center;
}
.diary .item {
  position: relative;
  text-align: center;
  margin: 1rem;
  overflow: hidden;
  border: 1rem solid #bdbdbd;
}
.diary .item img {
  display: table;
}
.diary .item .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgba(0,0,0,0.6);
}
.diary .item .mask h2 {
  color: #fff;
  font-weight: 500;
}
.diary .item .mask h2:hover {
  color: #fff;
}
.diary .item:nth-child(1) .mask {
  transform: translate(0, -50rem);
  transition: all 0.2s 0.2s ease-in-out;
}
.diary .item:nth-child(2) .mask {
  transform: translate(0, 50rem);
  transition: all 0.2s 0.2s ease-in-out;
}
.diary .item:nth-child(3) .mask {
  transform: translate(-40rem, 0);
  transition: all 0.2s 0.2s ease-in-out;
}
.diary .item:nth-child(4) .mask {
  transform: translate(40rem, 0);
  transition: all 0.2s 0.2s ease-in-out;
}
.diary .item:hover {
  border: 10px solid #888;
}
.diary .item:hover .mask {
  transition-delay: 0s;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
#jsi-flying-fish-container {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30rem;
}
.diary-wrapper .chapter-list {
  display: flex;
  flex-wrap: wrap;
}
.diary-wrapper .chapter-list .diary-item {
  width: 200px;
  border: 1px #cdcdcd dashed;
  padding: 4px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.diary-wrapper .chapter-list .diary-item:hover {
  border: 1px #2af dashed;
  cursor: pointer;
}
.diary-wrapper .chapter-list .diary-item .diary-name {
  font-size: 14px;
  font-weight: 700;
}
.diary-wrapper .chapter-list .diary-item .diary-remarks {
  color: #b7b7b7;
  word-break: break-all;
}
@media (max-width: 768px) {
  .diary-wrapper .chapter-list {
    justify-content: center;
  }
  .diary-wrapper .chapter-list .diary-item {
    width: 150px;
  }
}