@charset "utf-8";
/* reset */
#ulizaplayerpc { position: relative; }
/* player set */
[class*="vjs-"]:before{font-family:'VideoJS'!important}
[class*="vjs-icon-"]:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  line-height: 52px;
  font-size: 26px;
}
.ulizahtml5 .vjs-duration-display,
.ulizahtml5 .vjs-current-time-display {
  line-height: 32px;
}
/* control bar */
.ulizahtml5 .vjs-control-bar {
  visibility: visible;
  opacity: 1;
  z-index: 55;
}
.ulizahtml5 .vjs-play-start-button {
  visibility: visible;
  opacity: 1;
  transition: none;
}

/* controler */
.ulizahtml5 .vjs-control:before {
  transition: .2s;
}
/* volume */
.ulizahtml5 .vjs-volume-menu-button {
  position: relative;z-index: 10;
}
.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
  width: auto;
  height: auto;
  transition: .4s;
}
.vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
  overflow: hidden;
  width: 3em;
  height: 6.6em;
  top: -58px;
}
.ulizahtml5 .vjs-volume-menu-button-vertical .vjs-menu-content {
  position: absolute;
  top: auto;
  bottom: 0;
  z-index: 0;
}
.ulizahtml5 .vjs-volume-menu-button-vertical .vjs-menu-content {
  top: 100%;
  bottom: auto;
  height: auto;
  width: auto;
  transition: .4s;
}
.ulizahtml5 .vjs-volume-menu-button-vertical:hover .vjs-menu-content {
  top: 0%;
}
.ulizahtml5 .vjs-volume-level {
  background: #00CCFF;
}
/* current time */
.ulizahtml5 .vjs-current-time {
}
/* seekbar */
.ulizahtml5 .vjs-progress-control.vjs-control {
  width: 100%;
  position: absolute;
  top: -18px;
  left: 0;
}
.vjs-time-divider {
  display: block;
}
.vjs-time-divider span {
  line-height: 32px;
  font-size: 10px;
  margin: 0 2px;
}
[class^="vjs-ad-"] .vjs-time-divider span {
  display: none;
}
/* play */
.ulizahtml5 .vjs-play-progress {
  background: #00CCFF;
}
/* replay */
.ulizahtml5 .vjs-replay-control::before {
  transform: rotateX(0deg);
}
.ulizahtml5 .vjs-replay-control:hover::before {
  transform: rotateX(-360deg);
}
/* player thumbnail border */
.vjs-preview-holder {
  background-color: rgba(28,28,28,0.9);
  border: 2px solid #000;
  border-radius: 2px;
}
/* key */
.ulizahtml5 .vjs-level-change{
  position: absolute;
  left: auto;
  right: 43px;
  width: 36px;
}
.ulizahtml5 .vjs-level-change::before {
  transition: .2s;
}
.ulizahtml5 .vjs-level-change:hover::before {
  transform: rotate(30deg);
}
/* fullscreen */
.ulizahtml5 .vjs-fullscreen-control {
  position: absolute;
  right: 7px;
  width: 36px;
}
.ulizahtml5 .vjs-fullscreen-control::before {
  font-size: 24px;
  line-height: 1.3;
}
.ulizahtml5 .vjs-fullscreen-control:hover::before {
  transform: scale(1.2);
}
/* playlist */
.player-playlist {
  position: absolute;
  top: 0;
  right: -17px;
  overflow-y: scroll;
  background: #1a1a1a;
  height: 100%;
  z-index: 10;
}
.player-playlist li {
  background: #222;
  width: 284px;
  height: 96px;
  padding: 12px;
  cursor: pointer;
}
.player-playlist li:hover {
  background: #525252;
}
.player-playlist li.active {
  background: #3a3a3a;
}
.player-playlist li::before {
  content: "image area";
  display: block;
  float: left;
  background: #000;
  width: 128px;
  line-height: 72px;
  text-align: center;
}
.player-playlist li::after {
  content: "text area text area ";
  display: block;
  float: right;
  background: #ccc;
  width: calc(100% - 136px);
  line-height: 72px;
  text-align: center;
}
.player-playlist li:nth-last-child(3),
.player-playlist li:nth-last-child(4) {
  opacity: .5;
}
.player-playlist li:nth-last-child(2) {
  opacity: .2;
}
.player-playlist li:last-child {
  opacity: .1;
}
/* user defined icon */
[class*="player-icon-"] { display: block; opacity: 0; background-color: rgba(17, 17, 17, 0.80); background-repeat: no-repeat; width: 36px; height: 36px; border-radius: 3px; transition: .2s; cursor: pointer; z-index: 1; }
[class*="player-icon-"]:hover { background-color: rgba(0, 153, 255, 0.9); }
.ulizahtml5.vjs-paused [class*="player-icon-"],
.ulizahtml5.vjs-user-active [class*="player-icon-"] { opacity: 1; }
/* player size custom icon */
#playerSizeCustom { position: absolute; }
[class*="player-icon-arow-"] { top: 24px; right: 24px; }
.player-icon-arow-wide { background-image: url(/douga_mv/common/svg/icon-arow-wide.svg); }
.player-icon-arow-narrow { background-image: url(/douga_mv/common/svg/icon-arow-narrow.svg); }
/* player size */
#ulizaplayerpc,
[class*="ulizaplayerhtml5_"] { width: 100%; height: 100%; }
.player-size-default #ulizaplayerpc,
.player-size-default [class*="ulizaplayerhtml5_"] { width: 640px; height: 360px; }
.player-size-wide #ulizaplayerpc,
.player-size-wide [class*="ulizaplayerhtml5_"] { width: 960px; height: 540px; }
#slides { position: relative; }
/* ad */
.ulizahtml5 .vjs-ad-player.vjs-ad-player { z-index: 10; }
/* player recommend */
.recommend_player_wrap {position: absolute;top: 0;background: #000;width: 100%;height: 100%;margin: 0;z-index: 50;}
.recommend_player {overflow: hidden;position: relative;top: 0;left: 0;right: 0;bottom: 0;margin: 7% auto;}
.recommend_player li{float:left;width: calc(100% / 4);}
.recommend_player li a{display:block;position:relative;overflow:hidden;background:#000;cursor:pointer}
.recommend_player li a img{width:100%}
.recommend_player li a:hover > img{opacity:0.3;transition:opacity 0.3s linear}
span.recommend_player_ttl{position:absolute;top:-100%;color:#eee;font-size:12px;line-height:1.4;margin:3px 5px}
.recommend_player li a:hover > span.recommend_player_ttl{top:0;transition:top 0.3s linear}
/* ripple */
.ripple {
  overflow: hidden;
  position: relative
}
.ripple__effect {
  width: 52px;
  height: 52px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  line-height: 52px;
  font-size: 16px;
  border-radius: 100%;
  pointer-events: none;
  transform: scale(1);
  opacity: 0;
  z-index: 10;
}
.ripple__effect.is-orange { background: #f1c40f }
.ripple__effect.is-blue { background: #4aa3df }
.ripple__effect.is-black { background: #888 }
.ripple__effect.is-black-inset { background: rgba(0, 0, 0, .5); }
.ripple__effect.is-show { animation: ripple .5s linear 2 normal forwards; }
@keyframes ripple {
  0% { opacity: .6 }
  to { opacity: 0; transform: scale(1.8) }
}