.slotwrapper {
    overflow: hidden;
    display: inline-block;
    border: 1px solid #000;
    height: 300px;
    max-height: 50vw;
}
.slotwrapper ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    float: left;
    padding-top: 50px;
}
.slotwrapper ul {
    width: 200px;
    height:200px;
    font-size: 200px;
    line-height: 200px;
    text-align: center;
}
.slotwrapper ul li img {
    vertical-align: top;
    height: 100%;
    width: 100%;
}
.slotwrapper ul li {
    line-height: unset;
    width: 30vw;
    height: 30vw;
    max-width: 200px;
    max-height: 200px;
}

.slotwrapper {
    width: 100%;
}
.slotwrapper ul {
    width: 33%;
}
.wrap4 ul {
    width: 25%;
}
.wrap12 ul {
    width: 8.3333%;
}
.wrap28 ul {
    width: 3.5714%;
}

@media screen and (max-width: 450px) {
  .mobi_transform {
    transform: scale(0.75);
  }
}