* {
  margin: 0;
  padding: 0
}

:focus {
  outline: none
}

::selection {
  background: #3ec3d5;
  color: #fff
}

::-moz-selection {
  background: #3ec3d5;
  color: #fff
}

body {
  -webkit-tap-highlight-color: transparent;
  background: #f1f2f3;
  font-family: open sans;
  font-weight: 100;
  font-size: 100%;
  margin: 0;
  padding: 0
}

#t_wrapper {
  position: relative;
  width:100%;
  margin: 0 auto;
  height: 100%;
  /* background: #fff; */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden
}

#t_cover {
  position: relative;
  float: left;
  width: 445px;
  height: 447px;
  overflow: hidden;
  margin-top: 0px;
  margin-left: 25px;
  border-radius: 100%;
  margin-top: 20px;
}

#t_cover img {
  position: relative;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

#t_cover img {
  -webkit-animation: coveroin .75s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: coveroin .75s;
  -moz-animation-fill-mode: forwards;
  -mos-animation: coveroin .75s;
  -mos-animation-fill-mode: forwards;
  -o-animation: coveroin .75s;
  -o-animation-fill-mode: forwards;
  animation: coveroin .75s;
  animation-fill-mode: forwards
}

#t_top {
  position: absolute;
  left: 49% !important;
  top: 531px;
  transform: translateX(-50%);
}
@media (max-width: 1165px){
#t_top {
    position: absolute;
    left: 49% !important;
    top: 485px;
    transform: translateX(-50%);
}
}
#t_title_info {
  position: relative;
  color: #555;
  font-size: 14px;
  text-align: center;
  line-height: .67em;
  white-space: nowrap;
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text
}

.artist {
  font-weight: 400
}

#t_middle {
  /* position: relative; */
  height: 1.25em;
  /* margin: 0 1.25em 0 13.75em; */
  width: 430px;
  position: absolute;
  top: 70%;
  left: 70px;
}

#play {
  /* position: relative; */
  width: 1.25em;
  height: 1.25em;
  float: left;
  color: #555;
  cursor: pointer;
  position: absolute;
  left: 166px;
  top: 165px;
}


#pause {
  /* position: relative; */
  width: 1.25em;
  height: 1.25em;
  float: left;
  color: #555;
  cursor: pointer;
  position: absolute;
  left: 166px;
  top: 165px;
}

#pause:hover {
  color: #3ec3d5
}

#pause:before {
  position: absolute;
  margin-top: -.074em;
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  background-image: url(../images/bf2.png);
}

.visible {
  display: block
}

.hidden {
  display: none
}

#t_progress {
  position: relative;
  margin: 0 1.25em;
  width: -webkit-calc(100% - 7.5em);
  width: -moz-calc(100% - 7.5em);
  width: -mos-calc(100% - 7.5em);
  width: -o-calccalc(100% - 7.5em);
  width: calc(100% - 7.5em);
  height: 2px;
  float: left;
  background: rgb(211,211,211);
  cursor: pointer
}

.ui-slider-horizontal {}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0
}
.ui-slider-range {
  top: 0px;
  height: 100%;
  background-color: rgb(170,33,150);
  position: relative;
}
.ui-slider-horizontal .ui-slider-range:before{
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 100%;
  position: absolute;
  /* background: linear-gradient(to left,rgb(),rgb(),rgb ()); */
  background:radial-gradient(center,ellipse,sandybrown,orangered)

}


#current {
  position: absolute;
  right: 281px;
  top: 0px;
  color: #000;
  z-index: 0;
}

#duration {
  position: absolute;
  right: 10px;
  top: 0px;
  color: #000;
  z-index: 0
}

#error {
  position: absolute;
  color: #333;
  z-index: 5;
  left: 50%;
  top: -27px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%)
}

#prev {
  /* position: relative; */
  width: 1.25em;
  height: 1.25em;
  float: left;
  color: #555;
  cursor: pointer;
  position: absolute;
  left: 90px;
  top: 175px;
}


#next {
  /* position: relative; */
  width: 1.25em;
  height: 1.25em;
  float: left;
  margin-left: 1.25em;
  color: #555;
  cursor: pointer;
  position: absolute;
  left: 225px;
  top: 175px;
}



#t_bottom {
  position: relative;
  /* height: 5.625em; */
  margin: 0 1.25em 0 13.75em
}

#range {
  position: absolute;
  bottom: -663px;
  right: 360px;
}


#val {
  position: absolute;
  display: block;
  top: -2.188em;
  width: 2.188em;
  height: 1.3em;
  text-align: center;
  border: 1px solid #3ec3d5;
  box-sizing: border-box;
  background: #3ec3d5;
  color: #fff
}

#val:after {
  position: absolute;
  content: "";
  bottom: -.68em;
  right: -.068em;
  width: 0;
  height: 0;
  border-top: .625em solid #3ec3d5;
  border-left: .625em solid transparent
}

#rangeVal {
  position: absolute;
  top: 13px;
  left: 35px;
  width: 6.25em;
  height: .3125em;
  background: #555;
  cursor: pointer;
}

#range .ui-slider-handle {
  position: absolute;
  width: .75em;
  height: .75em;
  border-radius: 100%;
  top: -.175em;
  background: #555
}

.noselectpls {
  position: absolute;
  bottom: 2em;
  left: 50%;
  cursor: pointer;
  color: #555;
  -webkit-animation: heyopenpls 2s ease infinite;
  -moz-animation: heyopenpls 2s ease infinite;
  -mos-animation: heyopenpls 2s ease infinite;
  -o-animation: heyopenpls 2s ease infinite;
  animation: heyopenpls 2s ease infinite
}

.noselectpls:hover {
  color: #3ec3d5
}

.noselectpls:before {
  content: "\f107";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 900;
  font-size: 2.25em;
  position: absolute;
  -webkit-animation: plshowbtndwn .5s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: plshowbtndwn .5s;
  -moz-animation-fill-mode: forwards;
  -mos-animation: plshowbtndwn .5s;
  -mos-animation-fill-mode: forwards;
  -o-animation: plshowbtndwn .5s;
  -o-animation-fill-mode: forwards;
  animation: plshowbtndwn .5s;
  animation-fill-mode: forwards
}

.selectpls {
  color: #3ec3d5;
  position: absolute;
  bottom: 2em;
  left: 50%;
  cursor: pointer
}

.selectpls:before {
  content: "\f107";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 900;
  font-size: 2.25em;
  position: absolute;
  -webkit-animation: plshowbtnup .5s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: plshowbtnup .5s;
  -moz-animation-fill-mode: forwards;
  -mos-animation: plshowbtnup .5s;
  -mos-animation-fill-mode: forwards;
  -o-animation: plshowbtnup .5s;
  -o-animation-fill-mode: forwards;
  animation: plshowbtnup .5s;
  animation-fill-mode: forwards
}

.music{
  width: 1200px;
  height: 135px;
  margin: 0 auto;
  position: relative;
  margin-top: 70px;
  margin-bottom: 145px;
}

#playlist{
  position: absolute;
  bottom: 195px;
  right: 0;
}

.lb {
  position: absolute;
  right: -275px;
  top: 3px;
}
.sj{
  position: absolute;
  top: -26px;
  right: 42px;
}



@-webkit-keyframes heyopenpls {

  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0)
  }

  40% {
    -webkit-transform: translateY(-1.25em)
  }

  60% {
    -webkit-transform: translateY(-.75em)
  }
}

@-moz-keyframes heyopenpls {

  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0)
  }

  40% {
    -moz-transform: translateY(-1.25em)
  }

  60% {
    -moz-transform: translateY(-.75em)
  }
}

@-mos-keyframes heyopenpls {

  0%,
  20%,
  50%,
  80%,
  100% {
    -mos-transform: translateY(0)
  }

  40% {
    -mos-transform: translateY(-1.25em)
  }

  60% {
    -mos-transform: translateY(-.75em)
  }
}

@-o-keyframes heyopenpls {

  0%,
  20%,
  50%,
  80%,
  100% {
    -o-transform: translateY(0)
  }

  40% {
    -o-transform: translateY(-1.25em)
  }

  60% {
    -o-transform: translateY(-.75em)
  }
}

@keyframes heyopenpls {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0)
  }

  40% {
    transform: translateY(-1.25em)
  }

  60% {
    transform: translateY(-.75em)
  }
}

@-webkit-keyframes plshowbtnup {
  0% {
    -webkit-transform: rotate(0deg)
  }

  100% {
    -webkit-transform: rotate(180deg)
  }
}

@-moz-keyframes plshowbtnup {
  0% {
    -moz-transform: rotate(0deg)
  }

  100% {
    -moz-transform: rotate(180deg)
  }
}

@-mos-keyframes plshowbtnup {
  0% {
    -mos-transform: rotate(0deg)
  }

  100% {
    -mos-transform: rotate(180deg)
  }
}

@-o-keyframes plshowbtnup {
  0% {
    -o-transform: rotate(0deg)
  }

  100% {
    -o-transform: rotate(180deg)
  }
}

@keyframes plshowbtnup {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(180deg)
  }
}

@-webkit-keyframes plshowbtndwn {
  0% {
    -webkit-transform: rotate(180deg)
  }

  100% {
    -webkit-transform: rotate(360deg)
  }
}

@-moz-keyframes plshowbtndwn {
  0% {
    -moz-transform: rotate(180deg)
  }

  100% {
    -moz-transform: rotate(360deg)
  }
}

@-mos-keyframes plshowbtndwn {
  0% {
    -mos-transform: rotate(180deg)
  }

  100% {
    -mos-transform: rotate(360deg)
  }
}

@-o-keyframes plshowbtndwn {
  0% {
    -o-transform: rotate(180deg)
  }

  100% {
    -o-transform: rotate(360deg)
  }
}

@keyframes plshowbtndwn {
  0% {
    transform: rotate(180deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@-webkit-keyframes coveroin {
  0% {
    -webkit-transform: translate(-50%, -150%)
  }

  100% {
    -webkit-transform: translate(-50%, -50%)
  }
}

@-moz-keyframes coveroin {
  0% {
    -moz-transform: translate(-50%, -150%)
  }

  100% {
    -moz-transform: translate(-50%, -50%)
  }
}

@-mos-keyframes coveroin {
  0% {
    -mos-transform: translate(-50%, -150%)
  }

  100% {
    -mos-transform: translate(-50%, -50%)
  }
}

@-o-keyframes coveroin {
  0% {
    -o-transform: translate(-50%, -150%)
  }

  100% {
    -o-transform: translate(-50%, -50%)
  }
}

@keyframes coveroin {
  0% {
    transform: translate(-50%, -150%)
  }

  100% {
    transform: translate(-50%, -50%)
  }
}

#playlist {
  background: rgb(151,34,149);
  color: #fff;
  width: 270px;
  margin: 0 auto;
  display: none;
  
}

#playlist ul {
  margin-left: 2.15em
}

#playlist li {
  height: 2.5em;
  padding-left: .75em;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  position: relative;
  white-space: nowrap
}

#playlist li:hover {
  background: rgba(255, 255, 255, .25)
}

#playlist a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  line-height: 2.5em;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis
}

.active {
  /* background: rgba(255, 255, 255, .25); */
  list-style-type: none
}

#playlist .active:before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url(../images/ttz.png);
  background-repeat: no-repeat;
  background-size: contain;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  font-size: 1.15em;
  position: absolute;
  left: -25px;
  top: 12px
}



@media(max-width:1165px){


  .content .leftContent .music {
      height: 670px;
  }
  #range {
      position: absolute;
      bottom: -592px;
      right: 349px;
  }
  #t_middle {
      position: absolute;
      top: 77%;
      left: 70px;
  }
  #prev {
      top: 115px;
  }
  #next {
      top: 115px;
  }
  #play,#pause {
      top: 110px;
  }
}




@media(max-width:640px){
  #t_cover{
    width: 366px;
    height: 366px;
    margin: 0 auto;
    margin-left: 13%;
}
#range {
  right: 303px;
}
.content .leftContent {
  height: 490px;
}
.content .leftContent .music {
height: 533px;
}
#rangeVal {
top: 14px;
}
#range {
bottom: -474px;
}
#t_top {
  position: absolute;
  left: 66px;
  top: 381px;
}
#playlist {
  position: absolute;
  bottom: 100px;
  right: 0;
}
#next{
top: 85px;
}
#prev{
top: 85px;
}
#play, #pause{
top: 75px;
}

#t_cover{
width: 100%;
margin-left: 0;
/* height: 310px; */
}
#t_middle{
width: 100%;
left: 0;
}
#t_progress{
width: 100%;
}
#duration {
right: 26px;
}
#current{
right: 302px;
}
#range {
right: 260px;
}
.rightContent {
margin-top: 305px;
}
}
@media(max-width:414px){
#t_cover{
  width: 100%;
  margin-left: 0;
  height: 330px;
}
#t_middle{
  width: 100%;
  left: 0;
}
#t_progress{
  width: 100%;
}
#duration {
  right: 26px;
}
#current{
  right: 302px;
}
#range {
  right: 260px;
}
.rightContent {
margin-top: 305px;
}
}

@media(max-width:375px){
#range {
  right: 240px;
}
.lb {
  position: absolute;
  right: -255px;
  top: 6px;
}
#current {
  right: 268px;
}
#t_cover {
  width: 100%;
  margin-left: 0;
  height: 300px;
}
#pause{
  position: absolute;
  left: 160px;
  top: 80px;
}
}