body {
  background-color: rgb(238,176,63);
  background-image: url("/www/assets/default/images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.top {
  position: fixed;
  top: 0px;
}

.my-player-wrapper {
  position: relative;
  width: 100%;
}

/* 标题样式 */
.playlist-title-container {
  background-color: #fff;
  background-image: radial-gradient(circle at 40% 35%, rgba(255,250,225,0.9) 0%, rgba(250,240,155,0.9) 100%);
}

.playlist-title-container .volume-title {
  display: inline-block;
  background-color: #b50;
  background-image: radial-gradient(circle at 40% 25%, rgba(255,255,155,0.2) 0%, rgba(255,255,255,0.1) 100%);
  color: #fff;
  margin-top: 2.5em;
  padding: 0.4em 1em;
  font-size: 12.5px;
  font-weight: normal;
  letter-spacing: 0.07em;
  border-radius: 2px;
}

.playlist-title-container .jp-title {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.07em;
  line-height: 1.7em;
  color: #a63;
  background: none;
  padding: 0.5em 2em 1.5em 2em;
  border: none !important;
  text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.1);
}

.jp-playlist {
  border: none;
  border-width: 0px;
}

.jp-video {
  border-width: 0px;
}

.player-container .jp-gui .jp-video-play {
  margin-top: 0px;
  height: 0px;
}

div.jp-type-playlist div.jp-playlist li {
  padding: 1em 1.5em;
  background-color: #fff;
  background-image: linear-gradient(to bottom, #ffffcc 0%, #ffffdd 50%, #fff7d3 100%);
  border-bottom: 1px solid rgba(200,200,200,0.2);
}

div.jp-type-playlist div.jp-playlist li a {
  color: #853;
}

div.jp-type-playlist div.jp-playlist li:hover a {
  color: #500;
}

div.jp-type-playlist div.jp-playlist li:hover {
  background-image: linear-gradient(to bottom,
    #ff5 0%,
    #fd5 50%, 
    #fb5 100%);
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
  color: #853;
  font-weight: bold;
}

div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
  padding: 1em 1.5em;
  background-image: linear-gradient(to bottom, rgba(255, 240, 155, 0.9) 0%, #ffc 50%, rgba(255, 240, 155, 0.9) 100%);
}

.playyd {
  padding: 2px 8px;
  background-color: rgba(255, 190, 100, 0.8);
  border-radius: 6px;
  color: #fff !important;
  margin-left: 10px;
  margin-right: 6px;
  float: right;
  font-size: 14px;
  letter-spacing: 0.1em;
}

@media (max-width:1210px) {

  .player-container { /* 20210218 change to relative positioning */
    position: relative;
    width: 100%;
    max-width: 800px;
    top: 0px;
  }

  .jp-playlist {
    margin-top: 0px; /* 20210218 change */
  }

  .playlist-title-container {
    display: block;
    border-top-width: 0px;
  }

  .widget-top-padding {
    display: none;
  }

  @media (max-width: 400px) {
    .jp-video-play-icon {
      display: none;
    }
  }

}


@media (min-width:1211px) {

  .jp-type-playlist {
    position: relative;
  }

  .player-container {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-width: 800px;
    overflow: hidden;
    top: 0px;
    /* x_margin = (windowWidth - 1210)*0.5 = windowWidth*0.5 - 605;
       left: 50% => windowWidth*0.5;
       margin-left: -605px; */
    left: 50%;
    margin-left: -605px;
    float: none;
  }

  .jp-playlist {
    position: absolute;
    top: 0px;
    width: 410px;
    /* x_margin = (windowWidth - 1210)*0.5 = windowWidth*0.5 - 605;
       right: 50% => windowWidth*0.5;
       margin-right: -605px; */
    right: 50%;
    margin-right: -605px;
    float: right;
    overflow: auto;
  }

  /* title piece */
  .playlist-title-container {
    display: flex;
    overflow: hidden;
  }

  .playlist-title-container > .volume-title {
    display: inline-block;
    margin: 6px 10px;
    white-space: nowrap;
  }

  .playlist-title-container > .jp-title {
    display: inline-block;
    padding: 8px 12px 8px 6px;
    font-weight: bold;
    color: #753;
    white-space: nowrap;
    overflow: hidden;
  }

  .jp-jplayer {
    min-height: 400px;
    background-color: #ed9;
  }

  .widget-top-padding {
    display: block;
  }

}

/* 2023-07-04: hide the playlist in the fullscreen mode */
.jp-state-full-screen .jp-playlist {
  display: none;
}

.hidden {
  display: none !important;
}

.background-animation-layer-type-1 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../images/poster-drop-animate2.png) repeat-x 0px 0px;
  background-size: cover;
  animation: posterDrop1 6000s linear infinite;
  z-index: -100;
}

@keyframes posterDrop1 {
  from { background-position: 0 0; }
  to { background-position: 4000% 0; }
}

.background-animation-layer-type-2 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../images/poster-drop-animate1.png) repeat-x 0px 0px;
  background-size: cover;
  animation: posterDrop2 8000s linear infinite;
  z-index: -100;
}

@keyframes posterDrop2 {
  from { background-position: 0 0; }
  to { background-position: 30000% 0; }
}