.main-content {
  padding: 1.15rem 2.8rem;
  background: #f5f5f5;
}
.main-content .mc-item {
  display: none;
}
.main-content .select {
  display: block;
}
.main-content .image-list {
  flex-wrap: wrap;
}
.main-content .image-list .item {
  width: calc((100% - 1.2rem) / 4);
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
  position: relative;
}
.main-content .image-list .item .mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: rgba(72, 83, 94, 0.8);
  opacity: 0;
  transition: opacity 0.3s;
}
.main-content .image-list .item .mask .border {
  margin: 6px 7px;
  border: solid 1px rgba(255, 255, 255, 0.5);
  width: calc(100% - 14px);
  height: calc(100% - 12px);
}
.main-content .image-list .item .mask .border .check-icon {
  width: 0.43rem;
  margin: auto;
  transform: translateY(10px);
  transition: transform 0.3s;
}
.main-content .image-list .item .mask:hover {
  opacity: 1;
}
.main-content .image-list .item .mask:hover .check-icon {
  transform: translateY(0);
}
.main-content .image-list .item:nth-of-type(4n) {
  margin-right: 0;
}


@media only screen and (max-width: 768px) {
  .main-content {
    padding: 36px 20px;
  }

  .main-content .image-list .item {
    width: calc(50% - 10px);
    margin-bottom: 20px;
    margin-right: 20px;
  }

  .main-content .image-list .item:nth-of-type(even) {
    margin-right: 0;
  }
}