.class-row{
  position:relative;
  z-index:20;
  width:94.27vw;
  margin-left:auto;
  margin-right:auto;
  margin-top: -20.5vw;
  background-color:#ffffff;
  border-radius: 1.56vw;
  padding-top:2.55vw;
  padding-bottom:3.44vw;
  display:flex;
  justify-content:center;
}
.class-row-unit{
  width:14.56vw;
  height:18.28vw;
  transition:0.5s;
  flex:none;
  margin-left:1.04vw;
  background-position:center top 12vw;
  background-size:auto 9.58vw;
  box-sizing:border-box;
  padding-top:4.11vw;
  padding-left:1vw;
  padding-right:1vw;
  background-repeat:no-repeat;
  border-radius: 0.42vw;
}
.class-row-unit:nth-child(1){
  margin-left:0;
  background-size:auto 13.33vw;
}
.class-row-unit:nth-child(3){
  background-size:auto 8.75vw;
}
.class-row-unit:nth-child(5){
  background-size:auto 9.38vw;
}
.class-row-unit-title{
  color: #ffffff;
  font-size: 1.8vw;
  line-height: 2.5vw;
  text-align:center;
  display: block;
}
@media (min-width:1099px){
  .class-row-unit:hover{
    background-position:center top 8.04vw;
  }
}
@media (max-width:767px){
  .class-row{
    width:calc( 100vw - 1.87vw - 1.87vw);
    padding-top:4.53vw;
    padding-bottom:4.93vw;
    padding-left:1.87vw;
    padding-right:1.87vw;
    overflow-x:auto;
    margin-top:-21.5vw;
    justify-content: flex-start;
  }
  .class-row-unit{
    width: 20vw;
    height: 26.67vw;
    border-radius: 1.07vw;
    padding-top:3.5vw;
    background-position: center top 18vw;
  }
  .class-row-unit-title{
    font-size: 4.27vw;
    line-height: 5vw;
  }
  .class-row-unit{
    background-size: auto 12.8vw;
  }
  .class-row-unit:nth-child(1){
    background-size: auto 15.04vw;
  }
  .class-row-unit:nth-child(3){
    background-size: 100% auto;
  }
  .class-row-unit:nth-child(4){
    background-size: auto 14.27vw;
  }
  .class-row-unit:nth-child(5){
    background-size: auto 11.33vw;
  }
}