*{
  margin: 0;
  padding: 0;
}

#comic-container{
  max-width: 1200px;
  width: 100%;
  margin: auto;
  text-align: center;
  position: relative;
}

#comic-container #slide-view-area{
  width: 1140px;
  margin: auto;
  overflow: hidden;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(5%, rgba(0,0,0,0)), color-stop(30%, rgba(0, 0, 0, 1)), color-stop(70%, rgba(0,0,0,1)), color-stop(95%, rgba(0,0,0,0)));
}

#comic-container #slide-view-area #slide-container{
  display: flex;
  width: calc(570px * 12);
}

#comic-container #slide-view-area #slide-container .slide{
  display: block;
  width: 570px;
  overflow: hidden;
}

  #comic-container #slide-view-area #slide-container .slide img{
    width: 570px;
    margin: auto;
  }

#comic-container #slide-view-area #slide-container .slide.extra{
  width: 285px;
}

#comic-container #nav-container .nav{
  position: absolute;
  top: calc(50% - 46px);
  cursor: pointer;
}

#comic-container #nav-container .nav.prev{
  left: 0;
}

#comic-container #nav-container .nav.next{
  right: 0;
}

@media (max-width: 400px), (orientation:portrait)  {
  #comic-container{
    max-width: 320px;
  }

  #comic-container #slide-view-area{
    width: 300px;
    -webkit-mask-image: none;
  }

  #comic-container #slide-view-area #slide-container{
    display: flex;
    width: calc(300px * 11);
  }

  #comic-container #slide-view-area #slide-container .slide{
    width: 300px;
  }

  #comic-container #slide-view-area #slide-container .slide.extra{
    width: 0;
  }

  #comic-container #slide-view-area #slide-container .slide img{
    width: 300px;
  }

  #comic-container #nav-container .nav{
    top: calc(50% - 20px);
  }

  #comic-container #nav-container .nav img{
    width: 20px;
  }
}