.event-roborock{
  margin: 0 auto;
  background: #FFF;
}

.event-roborock a{
  display: block;
}
.event-roborock img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.event-roborock .btns{
  display: flex;
  position: absolute;
}
.event-roborock .btns button{
  width: 50%;
  height: 100%;
}

.event-roborock .section-prod-img ul li,
.event-roborock .section-prod-video ul li{
  position: relative;
}

.event-roborock .section-prod-video ul{
  display: flex;
  flex-direction: column;
  background-color: #f2f2f2;
}
.event-roborock .section-prod-video ul li video{
  object-fit: cover;
  position: absolute;
  top: 0;
}

.event-roborock .section-prod-img{
  position: relative;
}
.event-roborock .section-prod-img ul{
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
}
.event-roborock .section-prod-img ul li a{
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}


/* PC */ 
@media (min-width: 1160px) {
  main{
    padding-top: 0;
  }
  .event-roborock{
    max-width: 1160px;
    padding-top: 90px;
  }
  
  .event-roborock .section-prod-video ul{
    padding: 0 0 100px;
    row-gap: 80px;
  }
  .event-roborock .section-prod-video ul li video{
    height: 334px;
  }
  .event-roborock .section-prod-video ul li:nth-child(odd) video{
    width: 600px;
    border-radius: 160px 0 0 160px;
    right: 0;
  }
  .event-roborock .section-prod-video ul li:nth-child(2) video{
    width: 620px;
    border-radius: 0 0 162px 0;
    left: 0;
  }
  .event-roborock .section-prod-video ul li .btns{
    width: 414px;
    height: 59px;
    top: 275px;
  }
  .event-roborock .section-prod-video ul li:nth-child(odd) .btns{
    left: 71px;
  }
  .event-roborock .section-prod-video ul li:nth-child(even) .btns{
    left: 676px;
  }
  
  .event-roborock .section-prod-img ul{
    bottom: 0;
  }
  .event-roborock .section-prod-img ul li a{
    width: 1038px;
    height: 360px;
    left: calc(50% + 4px);
  }
  .event-roborock .section-prod-img ul li .btns{
    width: 388px;
    height: 59px;
    top: 221px;
    right: 166px;
  }
  .event-roborock .section-prod-img ul li:nth-child(2) .btns{
    top: 227px;
  }

  .section-prod-list .prod-list-container{
    padding: 50px 0;
  }
}


/* MO */
@media (max-width: 1159px) {
  .event-roborock{
    max-width: 720px;
    min-width: 280px;
  }

  .event-roborock .section-prod-video ul{
    padding: 0 0 13.88889%;
    row-gap: 12.5vw;
  }
  .event-roborock .section-prod-video ul li a{
    width: 100%;
    height: 91.64836%;
    position: absolute;
    top: 0;
  }
  .event-roborock .section-prod-video ul li video{
    width: 94.44445%;
    height: 50.35972%;
  }
  .event-roborock .section-prod-video ul li:nth-child(1) video{
    border-radius: min(22.22223vw, 160px) 0 0 0;
    right: 0;
  }
  .event-roborock .section-prod-video ul li:nth-child(2) video{
    border-radius: 0 999px 999px 0;
    left: 0;
  }
  .event-roborock .section-prod-video ul li:nth-child(3) video{
    border-radius: 0 0 0 min(22.22223vw, 160px);
    right: 0;
  }
  .event-roborock .section-prod-video ul li .btns{
    width: 73.88889%;
    height: 8.35165%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .event-roborock .section-prod-img ul{
    bottom: 0.81274%;
  }
  .event-roborock .section-prod-img ul li a{
    width: 87.22223%;
    height: 78.69566%;
    left: 50%;
  }
  .event-roborock .section-prod-img ul li .btns{
    width: 74.58334%;
    height: 9.56522%;
    top: 78.69566%;
    left: 9.86112%;
  }

  .section-prod-list .prod-list-container{
    padding: min(9.72223vw, 70px) 5.55556% min(16.66667vw, 120px);
  }

  .event-share{
    margin: 80px 0;
  }
}