@charset "UTF-8";
/*------------------------------------*\
    $ui
\*------------------------------------*/
/*------------------------------------*\
    $项目颜色相关
\*------------------------------------*/
/*------------------------------------*\
    $页头
\*------------------------------------*/
html,
body {
  height: 100%;
  overflow: hidden;
}

.xxx {
  width: 200px;
  height: 15px;
  left: calc(50% - 100px);
  top: 50%;
  position: absolute;
  color: #dbdbda;
}

.xxx span {
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #a19f9f !important;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  animation: load1 3s cubic-bezier(0.12, 0.75, 1, 0.48) infinite;
  -webkit-animation: load1 3s cubic-bezier(0.12, 0.75, 1, 0.48) infinite;
}

.xxx span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.xxx span:nth-of-type(2) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}

.xxx span:nth-of-type(3) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

@-webkit-keyframes load1 {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@keyframes load1 {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

.header {
  line-height: 1.5em;
  position: relative;
}

.header li {
  width: 100px !important;
}

.header .offcanvas-start {
  width: 180px !important;
}

.header .form-control {
  height: 30px !important;
}

.header label {
  font-size: 12px !important;
  top: -8px !important;
}

.header img {
  width: 50px;
}

.header .bar-btn {
  font-size: 12px;
  height: 30px;
  line-height: 48px;
  outline: none;
  border: none;
  background-color: #f8f9fa;
}

#list {
  position: absolute;
  width: 100%;
  list-style: none;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 3px 1px rgba(45, 45, 45, 0.3);
          box-shadow: 0 3px 3px 1px rgba(45, 45, 45, 0.3);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 7;
}

#list li {
  position: relative;
  left: -20px;
  width: 100% !important;
  margin: 10px 0;
  padding: 5px;
  opacity: .6;
}

#list li a {
  text-decoration: none;
  color: black;
}

#list li a:hover {
  color: red;
}

#list li:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

#list .b-link {
  float: right;
}

span.badge {
  position: absolute;
  right: 10px;
  top: 10px;
}

#bug ul {
  list-style: none;
  position: relative;
  padding: 0;
}

img {
  position: relative;
  width: 2em;
  top: -5px !important;
}

.offcanvas-start {
  width: 180px !important;
}

.offcanvas-start .btn-close {
  position: absolute;
  right: 10px;
  top: 5px;
}

button img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

#login-bar {
  height: 200px;
}

#login-bar .loginout {
  position: absolute;
  top: calc(100% + 10px);
  left: calc(50% - 40px);
  width: 80px;
  padding: 6px 5px !important;
  font-size: 14px;
}

#login-bar > .login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  top: 20px;
}

#login-bar > .login .row {
  margin-top: 20px;
}

#login-bar > .login .infor {
  position: relative;
  background-color: #fff;
  width: 200px;
  height: 70px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  top: 40px;
  left: 30px;
  -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

#login-bar > .login .infor .t1 {
  position: absolute;
  height: 60px;
  width: 60px;
  padding: 0;
  border-radius: 50%;
  left: 70px;
  top: -30px;
}

#login-bar > .login .infor .t1 img {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

#login-bar > .login .infor .t2 {
  width: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#login-bar > .login .infor .t2 .nameid {
  font-size: 12px;
}

#login-bar .wyy {
  position: absolute;
  left: 250px;
  top: 75px;
  font-size: 12px;
  color: rgba(45, 45, 45, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#login-bar .wyy div {
  background-color: #fff;
  min-width: 100px;
  text-align: center;
  min-height: 50px;
  margin: 0 5px;
  -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#login-bar .wyy p {
  background-color: #fff;
  min-width: 100px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  margin: 0 5px;
  -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  position: absolute;
  top: -60px;
  left: 120px;
  width: 100%;
  background: #2d2d2d;
  color: whitesmoke;
  height: 50px;
  line-height: 40px;
  margin-right: 15px;
  position: relative;
  border: 5px solid #c9c5c5;
  padding: 0 3px;
  margin-left: 4px;
}

#login-bar .wyy p:after, #login-bar .wyy p:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#login-bar .wyy p:after {
  border-color: rgba(137, 184, 214, 0);
  border-left-color: #2d2d2d;
  border-width: 10px;
  margin-top: -10px;
}

#login-bar .wyy p:before {
  border-color: rgba(194, 225, 245, 0);
  border-left-color: #c9c5c5;
  border-width: 16px;
  margin-top: -16px;
}

#login-bar .notlogin {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.player {
  position: fixed;
  bottom: 0;
  left: 0;
  color: white;
}

.player .row {
  background-color: #575757;
  height: 80px;
}

.player .lrics {
  position: relative;
  z-index: 5;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  padding: 5px 0;
  color: rgba(45, 45, 45, 0.753);
  background-color: #f5f3f2;
  border: 2px solid #eae5e3;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  padding: 0 3px;
  margin-left: 4px;
}

.player .lrics:after, .player .lrics:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.player .lrics:after {
  border-color: rgba(137, 184, 214, 0);
  border-bottom-color: #f5f3f2;
  border-width: 6px;
  margin-left: -6px;
}

.player .lrics:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #eae5e3;
  border-width: 9px;
  margin-left: -9px;
}

.player .lrics .progress {
  position: absolute;
  height: 100%;
  width: 0;
  left: 0;
  top: 0;
  background-color: #7c7c6d8c;
  transition: width .3s linear;
  -webkit-transition: width .3s linear;
  -moz-transition: width .3s linear;
  -ms-transition: width .3s linear;
  -o-transition: width .3s linear;
}

.player .lrics .now {
  left: 15px;
  position: absolute;
  z-index: 4;
}

.player .allTime {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 5px;
}

.player .row .port {
  border-radius: 100px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.player .row .port i {
  position: relative;
  top: -20px;
}

.player .row .port img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.player .row .port img.active {
  width: 70px;
  height: 70px;
  transform: rotate(3600deg);
  -webkit-transform: rotate(3600deg);
  -moz-transform: rotate(3600deg);
  -ms-transform: rotate(3600deg);
  -o-transform: rotate(3600deg);
  transition: all 360s linear;
  -webkit-transition: all 360s linear;
  -moz-transition: all 360s linear;
  -ms-transition: all 360s linear;
  -o-transition: all 360s linear;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
}

section.detail {
  position: relative;
  top: -8px;
  font-size: 12px;
}

section.detail span {
  color: #b8b5b5;
}

section.detail span:nth-of-type(1) {
  font-size: 15px;
  color: #fafafa;
  text-shadow: -1px -2px 3px rgba(17, 17, 17, 0.712);
}

.trl .iconfont {
  display: inline-block;
  font-size: 1.5em;
  line-height: 30px;
  opacity: .5;
}

.trl .iconfont:hover {
  opacity: 1;
}

.opreate {
  position: relative;
}

.opreate i {
  position: relative;
}

.opreate i:hover {
  opacity: 1;
}

.opreate i .count.badge {
  position: absolute;
  width: 20px;
  height: 20px;
  left: -15px;
  font-size: 12px;
  display: inline-block;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  top: -10px;
}

.opreate i.list:hover .meun {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.opreate i.active {
  opacity: 1;
}

.opreate .meun {
  display: none;
  position: absolute;
  top: -300px;
  right: -95px;
  border: none;
  z-index: 100000;
  font-size: 12px;
  padding: 0 3px;
  margin-left: 4px;
}

.opreate .meun:after, .opreate .meun:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.opreate .meun:after {
  border-color: rgba(137, 184, 214, 0);
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}

.opreate .meun:before {
  border-color: rgba(194, 225, 245, 0);
  border-top-color: rgba(0, 0, 0, 0.2);
  border-width: 11px;
  margin-left: -11px;
}

.opreate .meun .list-group {
  height: 300px;
  background-color: #fff;
  overflow: scroll;
}

.opreate .meun .list-group::-webkit-scrollbar {
  display: none;
}

.opreate .meun li {
  width: 200px;
  text-align: start;
}

.opreate .meun li span {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.opreate .meun li.on {
  background-color: #e9e6e6 !important;
  color: #5f5e5e !important;
}

.opreate input {
  -webkit-appearance: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  height: 5px;
  background-color: #fff;
  outline: none;
}

.opreate input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background-color: #5e5b5b;
  border: 1px solid white;
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
}

.opreate input::-webkit-slider-thumb:hover {
  width: 18px;
  height: 18px;
}

#player-fill {
  height: calc(100% - 115px);
  max-height: 820px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 10000;
}

#player-fill .row {
  overflow: scroll;
}

#player-fill .row::-webkit-scrollbar {
  display: none;
}

#player-fill .row .col-md-8.card {
  height: 100%;
}

#player-fill .row .col-md-8.card img {
  height: 100%;
  opacity: .3;
}

#player-fill .row .col-md-8.card .lrics2 .words {
  height: 250px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 40% 39% 9% 10% / 38% 33% 0% 0%;
  -webkit-border-radius: 40% 39% 9% 10% / 38% 33% 0% 0%;
  -moz-border-radius: 40% 39% 9% 10% / 38% 33% 0% 0%;
  -ms-border-radius: 40% 39% 9% 10% / 38% 33% 0% 0%;
  -o-border-radius: 40% 39% 9% 10% / 38% 33% 0% 0%;
}

#player-fill .row .col-md-8.card .lrics2 p.l1 {
  font-size: 12px;
  opacity: .3;
}

#player-fill .row .col-md-8.card .lrics2 p.l2 {
  font-size: 14px;
  opacity: .5;
}

#player-fill .row .col-md-8.card .lrics2 p.l3 {
  font-size: 16px;
  opacity: 1;
  color: #d64b4b;
}

#player-fill .row .col-md-8.card .lrics2 p.l4 {
  font-size: 14px;
  opacity: .5;
}

#player-fill .row .col-md-8.card .lrics2 p.l5 {
  font-size: 12px;
  opacity: .3;
}

#player-fill .row .col-md-8.card .lrics2 p {
  font-family: 楷体;
  margin-top: 20px;
  color: #d17070;
}

#player-fill .row .col-md-4 {
  height: 100%;
  overflow: scroll;
}

#player-fill .row .col-md-4::-webkit-scrollbar {
  display: none;
}

#player-fill .row .col-md-4 .nav li {
  font-size: 12px;
  line-height: 30px;
}

#player-fill .row .col-md-4 .nav li span.active {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

#player-fill .row .col-md-4 .list-group {
  margin-top: 5px;
  display: none;
}

#player-fill .row .col-md-4 .list-group li {
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  font-size: 12px;
}

#player-fill .row .col-md-4 .list-group.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#player-fill .row .col-md-4 section {
  text-align: center;
  font-size: 12px !important;
}

.main {
  width: 100%;
  height: 100%;
}

.main .row {
  height: 100%;
}

.main::-webkit-scrollbar {
  display: none;
}

.main h4 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  height: 50px;
}

.main .s3 {
  height: calc(100% - 250px) !important;
  overflow: scroll;
}

.main .s3::-webkit-scrollbar {
  display: none;
}

.main .s3 .td {
  top: 20px;
  position: relative;
  font-size: 12px;
}

.main .s3 .td .song {
  margin: 0 3px;
}

.main .s3 .td .res {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.main .s3 .td .icon-add {
  top: 0px;
  position: absolute;
  display: inline-block;
  font-size: 15px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -ms-transition: all .1s linear;
  -o-transition: all .1s linear;
}

.main .s3 .td .icon-add:hover {
  font-size: 20px;
  color: #1f9215;
  top: -2px;
}

.main .s2 {
  -webkit-box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 0;
}

.main .s2 > button {
  width: 150px;
  height: 30px;
  line-height: 15px;
  position: absolute;
  top: 50%;
  left: calc(50% - 75px);
  opacity: .7;
}

.main .s2 > button:hover {
  opacity: 1;
}

.main .s2 .tt {
  position: relative;
  top: -3px;
  left: -10px;
  height: 500px !important;
  width: 100%;
  font-size: 12px;
}

.main .s0 {
  overflow: auto;
  height: calc(100% - 250px) !important;
  -webkit-box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.2);
  padding: 10px 0;
}

.main .s0::-webkit-scrollbar {
  display: none;
}

.main .s0 li {
  position: relative;
  width: 100px;
  height: 150px;
  margin: 10px 10px;
  word-wrap: break-word;
  opacity: .7;
  z-index: 6;
  -webkit-box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  transition: all .3s linear;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
}

.main .s0 li:hover {
  opacity: 1;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}

.main .s0 li img {
  position: absolute;
  width: 100%;
  z-index: -1;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.main .s0 li .port {
  width: 100px;
  height: 100px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.main .s0 li .port .infor {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.8);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
}

.main .s0 li p {
  font-size: 12px;
  line-height: 18px;
  padding: 0 5px;
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
}

.load2 {
  width: 200px;
  height: 15px;
  left: calc(50% - 100px);
  top: 50%;
  position: absolute;
  color: #dbdbda;
}

.load2 span {
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #a19f9f !important;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  animation: load1 3s cubic-bezier(0.12, 0.75, 1, 0.48) infinite;
  -webkit-animation: load1 3s cubic-bezier(0.12, 0.75, 1, 0.48) infinite;
}

.load2 span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.load2 span:nth-of-type(2) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.load2 span:nth-of-type(3) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.load2 span:nth-of-type(4) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

@keyframes load1 {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

.waiting {
  display: none;
}

.nowMv {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 26px;
  font-size: 12px;
  background: #7c7a7a;
  color: whitesmoke;
  text-align: center;
  left: 100px;
  top: 60px;
  z-index: 200;
  border: 2px solid #b8b5b5;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.nowMv.active {
  position: absolute;
  left: 100px;
  top: 60px;
  animation: spark 1s ease-in infinite;
  -webkit-animation: spark 1s ease-in infinite;
}

@-webkit-keyframes spark {
  0% {
    -webkit-box-shadow: 0 0 5px 3px rgba(180, 178, 178, 0.87);
            box-shadow: 0 0 5px 3px rgba(180, 178, 178, 0.87);
  }
  50% {
    -webkit-box-shadow: 0 0 5px 3px rgba(207, 206, 206, 0.87), 0 0 10px 5px rgba(175, 157, 157, 0.87);
            box-shadow: 0 0 5px 3px rgba(207, 206, 206, 0.87), 0 0 10px 5px rgba(175, 157, 157, 0.87);
  }
  100% {
    -webkit-box-shadow: 0 0 5px 3px rgba(189, 186, 186, 0.87);
            box-shadow: 0 0 5px 3px rgba(189, 186, 186, 0.87);
  }
}

@keyframes spark {
  0% {
    -webkit-box-shadow: 0 0 5px 3px rgba(180, 178, 178, 0.87);
            box-shadow: 0 0 5px 3px rgba(180, 178, 178, 0.87);
  }
  50% {
    -webkit-box-shadow: 0 0 5px 3px rgba(207, 206, 206, 0.87), 0 0 10px 5px rgba(175, 157, 157, 0.87);
            box-shadow: 0 0 5px 3px rgba(207, 206, 206, 0.87), 0 0 10px 5px rgba(175, 157, 157, 0.87);
  }
  100% {
    -webkit-box-shadow: 0 0 5px 3px rgba(189, 186, 186, 0.87);
            box-shadow: 0 0 5px 3px rgba(189, 186, 186, 0.87);
  }
}

ul.similar,
ul.mv {
  position: relative;
  height: 210px;
  overflow: scroll;
}

ul.similar::-webkit-scrollbar,
ul.mv::-webkit-scrollbar {
  display: none;
}

ul.similar li,
ul.mv li {
  height: 30px;
  opacity: .5;
}

ul.similar li:hover,
ul.mv li:hover {
  background-color: #fff;
}

ul.similar li img,
ul.mv li img {
  margin-left: 10px;
  margin-top: 6px;
}

ul.similar li span,
ul.mv li span {
  display: inline-block;
  width: 70%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

ul.similar li:hover,
ul.mv li:hover {
  opacity: 1;
}

ul.mv-player li {
  height: 60px;
}

#mvplayer {
  width: 100% !important;
  height: calc(100% - 120px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#mvplayer video {
  -o-object-fit: contain;
     object-fit: contain;
  width: 75%;
  height: 100%;
  outline: none;
  -webkit-box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.5);
  border-radius: 2%;
  margin: 5px;
  -webkit-border-radius: 2%;
  -moz-border-radius: 2%;
  -ms-border-radius: 2%;
  -o-border-radius: 2%;
}

#mvplayer .mv-player {
  overflow: scroll;
  height: 100%;
  font-size: 12px;
  text-align: center;
  -webkit-box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.5);
}

#mvplayer .mv-player::-webkit-scrollbar {
  display: none;
}

#mvplayer .mv-player img {
  width: 100%;
  height: 70%;
  -o-object-fit: contain;
     object-fit: contain;
}

#mvplayer .mv-player li {
  height: 160px;
  margin-top: 5px;
  overflow: hidden;
  color: #615c5c;
  border-bottom: 1px solid lightgrey;
  background-color: whitesmoke;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  opacity: .7;
}

#mvplayer .mv-player li:hover {
  opacity: 1;
}

.power > .more {
  position: relative;
  z-index: 5;
  z-index: 100;
}

.power > .more div {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  background-color: #fff;
}

.power > .more .baike-1 {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

.power > .more .baike-1 ul {
  width: 100%;
  height: 300px;
  background-color: #f8f9fa;
  overflow: scroll;
}

.power > .more .baike-1 ul::-webkit-scrollbar {
  display: none;
}

.power > .more .baike-1 span,
.power > .more .baike-1 a {
  color: #701c20dc;
}

.power > .more .baike-1 .title {
  width: 100%;
  height: 100px;
  background-color: #f8f9fa;
  opacity: .8;
  position: relative;
}

.power > .more .baike-1 .title h4 {
  background-color: #f8f9fa;
  color: #8d8989;
  padding: 4px 0;
  text-shadow: 0 4px 3px #a09999;
  opacity: 1;
}

.power > .more .baike-1 .title .singerPic {
  position: absolute;
  left: 10px;
  margin-top: 10px;
  height: 80px;
  width: 80px;
  -webkit-box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.603);
          box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.603);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.power > .more .baike-1 .cont {
  width: 100%;
  height: calc(100% - 110px);
  padding: 0 10px;
  overflow: scroll;
}

.power > .more .baike-1 .cont::-webkit-scrollbar {
  display: none;
}

#more {
  position: absolute;
  width: 100%;
  height: 400px;
  top: 100%;
  background-color: #f8f9fa;
  z-index: 5;
  overflow: scroll;
  -webkit-box-shadow: 0 5px 6px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 5px 6px 2px rgba(0, 0, 0, 0.3);
}

#more::-webkit-scrollbar {
  display: none;
}

.nav.nav-justified {
  position: relative;
  z-index: 5;
}

.nav.nav-justified .comment {
  position: absolute;
  width: 100%;
  height: 440px;
  top: 100%;
  background-color: #f8f9fa;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-top-right-radius: none;
  overflow: scroll;
}

.nav.nav-justified .comment::-webkit-scrollbar {
  display: none;
}

.nav.nav-justified .comment ol {
  list-style-type: none;
  width: 100%;
}

.nav.nav-justified .comment ol li {
  position: relative;
  left: -30px;
  padding: 5px 0;
  font-size: 12px;
  line-height: 18px !important;
  height: 120px;
  vertical-align: middle;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav.nav-justified .comment ol li img {
  float: left;
  height: 100px;
  width: 100px;
  top: 5px !important;
}

.nav.nav-justified .comment ol li .sp {
  position: relative;
  top: 5px;
  left: 4px;
  height: 70px;
  overflow: hidden;
}

.nav.nav-justified .comment ol li .sp .speaker {
  color: cornflowerblue;
  margin-right: 5px;
}

.nav.nav-justified .comment ol li .tim {
  color: #b0b0b0;
}

.nav.nav-justified .comment ol li i {
  font-size: 12px;
}

.nav.nav-justified .nav-item .active {
  background-color: #f8f9fa;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.poolopen {
  position: absolute !important;
  top: 30px !important;
  left: 85px;
}

#musicPool {
  position: absolute;
  bottom: 120px;
  width: 100%;
  height: 400px;
  background-color: #f8f9fa;
  -webkit-box-shadow: 0 -3px 6px 2px rgba(45, 45, 45, 0.3);
          box-shadow: 0 -3px 6px 2px rgba(45, 45, 45, 0.3);
  border-bottom: none;
  z-index: 6;
}

#musicPool > span {
  position: absolute;
  z-index: 6;
  top: 6px;
}

#musicPool > span.poolclose {
  right: 6px;
}

#musicPool > span.poolup {
  right: 100px;
}

#musicPool > span.pooldown {
  right: 50px;
}

#musicPool h5 {
  position: absolute;
  width: 100%;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

#musicPool .tt {
  position: relative;
  top: 40px;
  height: 350px !important;
  overflow: scroll;
}

#musicPool .tt::-webkit-scrollbar {
  display: none;
}

#musicPool table th {
  font-size: 14px;
}

#musicPool table td {
  position: relative;
  font-size: 12px;
}

#musicPool table td .song {
  margin: 0 3px;
}

#musicPool table td .res {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

#musicPool table td .icon-add {
  top: 0px;
  position: absolute;
  display: inline-block;
  font-size: 15px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -ms-transition: all .1s linear;
  -o-transition: all .1s linear;
}

#musicPool table td .icon-add:hover {
  font-size: 20px;
  color: #1f9215;
  top: -2px;
}

.offcanvas-body {
  padding: 0 !important;
  overflow: hidden;
}

.offcanvas-header {
  width: 170px;
  font-size: 12px;
  margin-left: 5px;
}

.offcanvas-header li.port,
.offcanvas-header li.port a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: transparent;
}

.offcanvas-header li {
  background-color: #f8f9fa;
  margin: 5px 0;
  width: 100%;
  padding: 3px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.offcanvas-header li p,
.offcanvas-header li a {
  position: relative;
  width: 120px;
  padding: 0 3px;
  word-break: break-all;
  color: #928d8d;
}

.offcanvas-header li p span,
.offcanvas-header li a span {
  display: inline-block;
  color: #df4040;
  line-height: 15px;
  position: relative;
  top: 8px;
  text-align: center;
  width: 100%;
}

.main_bar {
  position: relative;
  float: left;
  background-color: #b8b8b8 !important;
  width: 150px !important;
  height: 100%;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px 2px rgba(134, 133, 133, 0.3);
          box-shadow: 0 0 5px 2px rgba(134, 133, 133, 0.3);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.main_bar ul {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  left: -5px;
}

.main_bar li {
  width: 100%;
  margin-top: 5px;
  opacity: .8;
  text-align: center;
}

.main_bar li span {
  margin: 0 auto;
  padding: 0 20px;
}

.main_bar li span:hover,
.main_bar li span.active {
  opacity: 1;
  background-color: #cf4848;
  color: white;
}

.main_bar button {
  background-color: #f8f9fa !important;
  width: 100% !important;
}

.main_bar .collapse {
  position: relative;
}

.main_cont {
  position: relative;
  float: left;
  width: calc(100% - 200px) !important;
  margin-left: 10px;
}

.main_cont .tt {
  width: 100%;
  height: 500px;
}

.main_cont thead {
  -webkit-box-shadow: 0 0 5px 2px rgba(134, 133, 133, 0.3);
          box-shadow: 0 0 5px 2px rgba(134, 133, 133, 0.3);
  position: absolute;
  width: 100%;
}

.main_cont thead th {
  text-align: center;
}

.main_cont thead th:nth-of-type(1) {
  min-width: 50px;
}

.main_cont thead th:nth-of-type(2) {
  max-width: 450px;
}

.main_cont thead th:nth-of-type(3) {
  width: 100px;
}

.main_cont tbody {
  height: 500px;
  width: 100%;
  position: absolute;
  top: 45px;
  overflow: scroll;
}

.main_cont tbody::-webkit-scrollbar {
  display: none;
}

.main_cont tbody td {
  top: 20px;
  position: relative;
  font-size: 12px;
}

.main_cont tbody td .song {
  margin: 0 3px;
}

.main_cont tbody td .res {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.main_cont tbody td .icon-add {
  top: 0px;
  position: absolute;
  display: inline-block;
  font-size: 15px;
  transition: all .1s linear;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -ms-transition: all .1s linear;
  -o-transition: all .1s linear;
}

.main_cont tbody td .icon-add:hover {
  font-size: 20px;
  color: #1f9215;
  top: -2px;
}

th {
  text-align: center !important;
}

td {
  line-height: auto;
}

tr {
  display: line-box;
  padding: auto 0;
}

/*------------------------------------*\
    多媒体查询
\*------------------------------------*/
@media only screen and (max-width: 1024px) {
  /*e1024*/
}

@media only screen and (max-width: 960px) {
  /*e960*/
}

@media only screen and (max-width: 768px) {
  /*e768*/
}

@media only screen and (max-width: 640px) {
  /*e640*/
}

@media only screen and (max-width: 470px) {
  /*e470*/
}

@media only screen and (max-width: 320px) {
  /*e320*/
}