#vodScreen {
  position: absolute;
  left: 0rem;
  top: 0rem;
  width: 192rem;
  height: 108rem;
  overflow: hidden;
  z-index: 50;
  background-image: -webkit-linear-gradient(top, #000000 0%, #141414 30%, #3c3c3c 75%, #757575 100%);
  background-image:    -moz-linear-gradient(top, #000000 0%, #141414 30%, #3c3c3c 75%, #757575 100%);
  background-image:         linear-gradient(top, #000000 0%, #141414 30%, #3c3c3c 75%, #757575 100%);
  font-size: 3.2rem;
  color: rgb(210, 210, 210);
  display: flex;
  display: -webkit-flex;
}

#vodLeftFrame {
  display: flex;
  display: -webkit-flex;
  width: 76.8rem;
  height: 100%;
  -webkit-flex-direction: column;
  flex-direction: column;
}

#vodRightFrame {
  display: flex;
  display: -webkit-flex;
  width: 115.2rem;
  background-color: rgb(0, 0, 0); /* base */
  -webkit-flex-direction: column;
  flex-direction: column;
  z-index: 2;
}

#vodCurtain {
  display: flex;
  display: -webkit-flex;
  position: absolute;
  width: 115.2rem;
  height: 100%;
  right: 0rem;
  top: 0rem;
  z-index: 3;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

#vodCircle {
  width: 10rem;
  height: 10rem;
}

.vodBlankArea {
  width: 100%;
  height: 10rem;
}

#vodDetailWrap {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  height: 98rem;
  -webkit-justify-content: center;
  justify-content: center;
}

#vodDetailArea {
  display: flex;
  display: -webkit-flex;
  width: 105.2rem;
  height: 98rem;
  -webkit-flex-direction: column;
  flex-direction: column;
}

#vodDetailTop {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  height: auto;
  max-height: 16rem;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}

#vodDetailMid {
  width: 100%;
  height: 23rem;
}

#vodDetailButtom {
  width: 100%;
  height: 59rem;
}

#vodTitle {
  font-size: 4.4rem;
  line-height: 1.2;
  width: 100%;
  height: auto;
  white-space: pre-wrap;
  overflow: hidden;
  max-height: 11rem;
}

#vodSmallStringArea {
  display: flex;
  display: -webkit-flex;
  line-height: 1.5;
  font-size: 3.2rem;
  width: 100%;
  height: auto;
  overflow: hidden;
  max-height: 5rem;
}

#vodColOneArea {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  display: block;
}

#vodColOneArea.releaseDisable {
  display: none;
}

#vodColOneArea > div,
#vodColTwoArea > div {
  display: flex;
  display: -webkit-flex;
}

#vodLabelRelease,
#vodLabelDuration {
  white-space: pre-wrap;
}

#vodRelease,
#vodDuration {
  white-space: pre-wrap;
}

#vodSpritRelease,
#vodSpritDuration {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  white-space: pre-wrap;
}

#vodColTwoArea {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding-left: 5rem;
  display: block;
}

#vodColTwoArea.releaseDisable {
  padding-left: 0;
}

#vodColTwoArea.durationDisable {
  display: none;
}

#vodImgArea {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  height: 50rem;
  -webkit-justify-content: center;
  justify-content: center;
}

#vodImgWrap {
  display: none;
  width: 66.8rem;
  height: 100%;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: flex-start;
  -webkit-align-items: flex-start;
}

#vodImgWrap.enable {
  display: flex;
  display: -webkit-flex;
}

#vodImg {
  width: auto;
  height: 100%;
  border-style: solid;
  border-width: 0.2rem;
  border-color: rgb(136,136,136);
  display: none;
}

#vodImg.ImgSizeChange {
  width: 100%;
  height: auto;
}

#vodImgWrap.enable > #vodImg {
  display: block;
}

#vodSelectAreaWrap {
  width: 100%;
  height: 48rem;
}

#vodPrvListArea {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  -webkit-align-items: center;
}

.vodPrvList {
  width: 30rem;
  height: 17rem;
  border-style: solid;
  border-width: 0.2rem;
  border-color: rgb(136,136,136);
}

#vodPrvListArea.vodList0 {
  -webkit-justify-content: center;
  justify-content: center;
}

#vodPrvListArea.vodList1 {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

#vodPrvListArea.vodList2 {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.vodPrvLogoArea {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  height: 8.5rem;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.vodPrvLogoWrap {
  height: 6.0rem;
  width: 25.6rem;
}

.vodPrvLogoWrap.logoImg {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}


.vodPrvLogo {
  width: auto;
  height: 100%;
  display: none;
}

.vodPrvLogo.enable {
  display: block;
}
.vodPrvLogoWrap.vodString > div {
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  line-height: 6rem;
  text-align: center;
  height: auto;
}

.vodButtonArea {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  height: 8.5rem;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.vodButtonWrap {
  display: flex;
  display: -webkit-flex;
  height: 4.7rem;
  width: 24.1rem;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border-style: solid;
  border-width: 0 0.2rem 0.2rem 0;
  border-color: rgb(136,136,136);
  background-color: rgb(34, 34, 34);
  opacity: 1;
  font-size: 2.7rem;
}

.vodButtonWrap.vodDisable {
  opacity: 0.3;
}

#vodSynopsis {
  width: 100%;
  height: 95%;
}
