#char {
  position: relative;
  height: 100%;
  display: flex;
}


#char>nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 8vw 3.2vw;
}
#char>nav > img {
  width: 8vw;
  height: 8vw;
  position: relative;
  left: -3.2vw;
  filter: grayscale(100%);
  transition: filter 0.2s, transform 0.2s;
  animation: scale-in 0.5s;
}
#char>nav > img.sn {
  left: 3.2vw;
}
#char>nav > img:hover {
  transform: scale(1.1);
}
#char>nav > img.active {
  filter: none;
  transform: scale(1.1);
}


#char>live {
  width: 48vw;
  height: 100%;
  overflow: hidden;
  animation: fade-in 0.5s;
  background-image: url(/res/char/0/b.png), url(/res/char/b.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#char>live > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  animation: scale-in 0.5s;
}


#char>det {
  width: 24vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: fade-in 0.5s;
}
#char>det > img {
  height: 12vw;
}
#char>det > p {
  line-height: 1.9vw;
  font-size: 1.1vw;
  color: #ba9;
  white-space: pre-wrap;
  font-family: sans, sans-serif;
  margin: 0;
  height: 8vw;
  display: flex;
  align-items: center;
}
#char>det > div {
  display: flex;
  width: 100%;
  align-items: center;
  height: 8vw;
  padding-bottom: 8vw;
}
#char>det > div > img {
  height: 2.4vw;
  margin-right: 3.2vw;
  transition: filter 0.2s;
}
#char>det > div > img:hover {
  filter: opacity(0.5);
}




@media screen and (orientation: portrait) {
#char {
  width: 100%;
}


#char>nav {
  position: absolute;
  bottom: 10vh;
  z-index: 1;
  flex-direction: row;
  padding: 0;
  width: 100%;
  justify-content: space-around;
}
#char>nav > img {
  width: 10vh;
  height: 10vh;
  left: unset;
  top: -3vh;
}
#char>nav > img.sn {
  left: unset;
  top: 3vh;
}


#char>live {
  z-index: 0;
  position: absolute;
  width: 100%;
  left: 20vw;
  height: 80vh;
  mask-image: linear-gradient(180deg, #000f 0%, #000f 60%, #0000 90%);
  -webkit-mask-image: linear-gradient(180deg, #000f 0%, #000f 60%, #0000 90%);
}
#char>live > img {
  object-position: center;
}


#char>det {
  z-index: 1;
  position: absolute;
  bottom: 24vh;
  width: calc(100% - 6vh);
  height: 70vh;
  left: 3vh;
  display: block;
}
#char>det > img {
  height: 20vh;
}
#char>det > p {
  line-height: 3vh;
  font-size: 2vh;
  height: 10vh;
  padding-top: 25vh;
}
#char>det > div {
  height: 12vh;
}
#char>det > div > img {
  height: 5vh;
  margin-right: 5vh;
}
#char>det > div > img:last-child {
  height: 8vh;
}
}