.reporting-items-list-container { background: #000000; padding-top: 1rem; padding-bottom: 1rem; }
.reporting-items-list-wrapper { max-width: 14rem; width: 100%; margin: 0 auto; }
.reporting-items-list-wrap { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.reporting-items-list-wrapper .item { width: 25%; padding: 4px; }
.reporting-items-list-wrapper .outer { width: 100%; }
.reporting-items-list-wrapper .inner { padding-bottom: 100%; position: relative; }
.reporting-items-list-wrapper .cont { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 4; border: 1px solid #4C4C4C; padding: 0.4rem; }
.reporting-items-list-wrapper .box { width: 100%; height: 100%; position: relative; overflow: hidden; }
.reporting-items-list-wrapper .img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s; }
.reporting-items-list-wrapper .mask { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 8; background: rgba(0, 0, 0, 0.5); color: #FFFFFF; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.4s; }
.reporting-items-list-wrapper .city { display: block;  padding: 0.13rem 0.21rem; font-size: 0.24rem; color: #EFC395; }
.reporting-items-list-wrapper .bot { display: flex; flex-direction: column; }
.reporting-items-list-wrapper .no { font-size: 0.48rem; opacity: 0; transition: all 0.6s; padding: 0 0.21rem; line-height: 0.9; }
.reporting-items-list-wrapper .names { display: flex; flex-direction: column; transition: all 0.6s; padding: 0.13rem 0.21rem; }
.reporting-items-list-wrapper .name { font-size: 0.24rem; line-height: 1.5; opacity: 0; transition: all 0.6s; }
.reporting-items-list-wrapper .subname { font-size: 0.16rem; line-height: 1.5; }
.reporting-items-list-wrapper .cont:hover .mask {  }
.reporting-items-list-wrapper .cont:hover .img { transform: scale(1.1); }
.reporting-items-list-wrapper .cont:hover .names { background: #000000; }
.reporting-items-list-wrapper .cont:hover .no { opacity: 1; }
.reporting-items-list-wrapper .cont:hover .name { opacity: 1; }

@media screen and (max-width: 992px) {
  .reporting-items-list-wrapper .item { width: 33.33333333%; }
}

@media screen and (max-width: 768px) {
  .reporting-items-list-container { padding-left: 0.1rem; padding-right: 0.1rem; }
  .reporting-items-list-wrapper .item { width: 50%; }
  .reporting-items-list-wrapper .no { display: none; }
  .reporting-items-list-wrapper .city { font-size: 0.35rem; }
  .reporting-items-list-wrapper .name { font-size: 0.32rem; display: none; }
  .reporting-items-list-wrapper .subname { font-size: 0.32rem; }
}