.viewItem01Common {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.mod {
  width: 100vw;
  height: 210vw;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 210vw;
  background-color: #ffffff;
  background-image: url(./images/bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.banner {
  position: relative;
  width: 48.85vw;
  height: 27.5vw;
  margin-top: 20vw;
  border: 4px solid #151233;
  background: #000;
}

.banner video {
  width: 100%;
  height: 100%;
}

.desc {
  position: relative;
  overflow: hidden;
  height: 1.15vw;
  max-width: 99.38vw;
  margin-top: 1.51vw;
  font-size: 1.15vw;
  line-height: 1.15vw;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05vw;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.summary {
  position: relative;
  overflow: hidden;
  height: 1.15vw;
  max-width: 99.38vw;
  margin-top: 1.15vw;
  font-size: 1.15vw;
  line-height: 1.15vw;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05vw;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.detail {
  position: relative;
  overflow: hidden;
  height: 1.2vw;
  max-width: 99.38vw;
  margin-top: 1.15vw;
  font-size: 1.15vw;
  line-height: 1.15vw;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05vw;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.book {
  position: relative;
  overflow: hidden;
  height: 1.15vw;
  max-width: 99.38vw;
  margin-top: 1.09vw;
  font-size: 1.15vw;
  line-height: 1.15vw;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05vw;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 15vw;
  margin: 0 0 2vw;
}

.viewItem0 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 1.41vw;
}

.viewItem0 a {
  display: inline-block;
  position: relative;
  width: 16.46vw;
  height: 7.03vw;
  background: url(./images/choose1.png) no-repeat center top;
  background-size: 16.46vw 7.03vw;
}

.viewItem0 .now {
  background: url(./images/img_1.png) no-repeat center top;
  background-size: 16.46vw 7.03vw;
}

.cover {
  position: relative;
  width: 27.34vw;
  height: 24.95vw;
  margin-top: 2.76vw;
  margin-right: 1.77vw;
}

.viewItem1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.viewItem1 a {
  position: relative;
  display: inline-block;
  width: 16.46vw;
  height: 7.03vw;
  margin-left: 3.23vw;
  background: url(./images/img_3.png) no-repeat center top;
  background-size: 16.46vw 7.03vw;
  margin-top: -9vw;
}

.viewItem1 .now {
  background: url(./images/choose2.png) no-repeat center top;
  background-size: 16.46vw 7.03vw;
}

.banner1 {
  position: relative;
  width: 27.34vw;
  height: 25.42vw;
  margin-top: 4.43vw;
}

.body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.73vw;
}

.viewItem01 {
  height: 24.53vw;
}

.cover1 {
  width: 26.98vw;
  height: 23.44vw;
  margin-right: 1.77vw;
}

.banner2 {
  width: 26.98vw;
  height: 24.48vw;
}

.viewItem11 {
  height: 25vw;
  margin-top: 0.31vw;
}

.cover2 {
  width: 26.98vw;
  height: 23.75vw;
  margin-right: 1.77vw;
}

.banner3 {
  width: 26.98vw;
  height: 24.95vw;
}

.viewItem2 {
  height: 25.42vw;
  margin-top: -0.05vw;
}

.cover3 {
  width: 26.98vw;
  height: 23.02vw;
  margin-right: 1.77vw;
}

.banner4 {
  width: 26.98vw;
  height: 25.36vw;
}

.item {
  position: relative;
  width: 19.79vw;
  height: 21.93vw;
  margin-top: 2.4vw;
}