.art-item .itemimg a {
  padding-bottom: 63%
}

.thumb {
  position: relative;
  padding-top: 140%;
}

.playon a {
  color: #FFF!important;
  background: #1E90FF!important;
}

/* self-style */
.high-light {
  color: #0c0;
}
.box-page {
  display: flex;
  justify-content: center;
}

.page-list {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.page-list li a,
.page-list li span
{
  display: inline-block;
  height: 32px;
  line-height: 30px;
  text-align: center;
  padding: 0 10px;
  min-width: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.page-list li:not(:last-child){
  border-right: 1px solid #ddd;
}

.page-list .active{
  color: #33CC00!important;
}

.page-list .disabled {
  color: #d6d6d6;
}

.relative-words {
  display: flex;
  flex-wrap: wrap;
}

.relative-word-item {
  padding: 0 10px 10px 0 !important;
  margin: 0 !important;
}

.relative-word-item a {
  padding: 5px 10px;
  color: #555;
  line-height: 28px;
  background-color: #eee;
  border-radius: 4px;
  text-decoration: none;
}

.relative-word-item a:hover {
  background: #1e90ff;
  color: #fff;
}

.QA-list,.relative-words
{
  list-style: none;
  padding-left: 0;
}

.QA-item {
  display: block;
  float: none!important;
}

.discuss-item {
  float: none!important;
  display: flex;
}

.discuss-item:not(:last-child),
.QA-item:not(:last-child)
{
  margin-bottom: 10px;
}

.discuss-content {
  flex: 1;
}

.discuss-item .user{
  font-weight: bold;
}

.discuss-item .date {
  font-size: 12px;
  color: #ababab;
}

.discuss-thumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  margin-right: 10px;
}

.discuss-item p,
.QA-item p{
  margin: 0;
  line-height: 24px;
}

.play-box {
  position: relative;
  padding-top: 56%;
  margin-bottom: 10px;
}

.MacPlayer {
  position: absolute !important;
  top: 0;
  left: 0;
}

.art-detail .title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.art-detail .title,
.art-detail .info
{
  text-align: center;
}

.art-detail .info {
  font-size: 12px;
  color: #828282;
}

.art-detail-content img,
.art-detail-content iframe {
  max-width: 100%;
  margin-bottom: 10px;
}

.art-detail-content {
  overflow-x: hidden;
  padding: 0 10px;
  line-height: 30px;
}

.art-detail-content p {
  line-height: 30px;
}

.art-detail-head {
  text-align: center;
}

.art-detail-head .title {
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  margin: 10px;
}

.art-detail-head .info {
  margin: 15px 0;
  font-size: 12px;
}

.actor-detail-blurb {
  line-height: 26px;
  margin-bottom: 10px;
}

.actor-detail > div,
.actor-detail {
  display: flex;
  flex-wrap: wrap;
}

.actor-detail dl {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}

.actor-detail dt {
  font-weight: 700;
  color: rgba(0, 0, 0, .51);
  display: inline-block;
  width: 70px;
}

.actor-detail dd {
  width: calc(100% - 70px);
}

.actor-detail > p {
  line-height: 26px;
  width: 50%;
  margin: 0;
}

.relative-words,
.discuss-list,
.QA-list,
.links {
  padding: 0 10px;
}

.wi-play-list-box.active .wi-head-play-buttons a.wi-play-list-btn,
.wi-play-list-box.active .expand,
.wi-play-list-box .wi-play-list-content,
.wi-play-list-box .retract {
  display: none;
}

.wi-play-list-box .singletitle {
  margin-bottom: 0;
}

.wi-play-list-box.active .wi-play-list-content {
  margin-top: 10px;
}

.wi-play-list-box.active .wi-play-list-content,
.wi-play-list-box.active .retract,
.wi-play-list-box .expand {
  display: block;
}

.wi-play-list-box .wi-head-play-buttons {
  display: flex;
  justify-content: flex-end;
}

.wi-head-play-buttons .wi-play-list-btn {
  margin-left: 10px;
}

.wi-play-list-btn {
  display: block;
  min-width: 80px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  padding: 0 10px;
  white-space: nowrap;
  border: 1px solid #ddd;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 6px;
  color: #33CC00;
}

.wi-play-list-btn.active,
.wi-play-list-btn:hover {
  background-color: #33CC00;
  color: #fff;
}

.wi-play-list {
  display: flex;
  margin: 0 -5px;
  flex-wrap: wrap;
}

.wi-play-list li{
  padding: 5px;
  width: 12.5%;
  box-sizing: border-box;
}

.mobile-menu {
  display: none;
}

.mobile-menu ul {
  padding: 5px;
  overflow-x: auto;
  white-space: nowrap;
}

.mobile-menu li {
  display: inline-block;
  padding: 5px;
  position: relative;
}

.mobile-menu li a {
  font-size: 17px;
}

.mobile-menu .on::after {
  position: absolute;
  content: " ";
  width: 12px;
  height: 2px;
  background-color: #0c0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mobile-menu .on a {
  color: #0c0;
}

.wi-jump-link ,
.wi-jump-link a{
  color: #ff2a14 !important;
}

@media screen and (max-width: 1180px) {
  .mobile-menu {
    display: block;
  }
}

@media (max-width: 768px) {
  .actor-detail dl,
  .actor-detail > p {
    width: 100%;
  }
  
  .hidden-xs {
    display: none;
  }
  
  .visible-xs {
    display: inline-flex;
  }

  .wi-play-list li{
    width: 33.33%;
  }
}

.hide {
  display: none !important;
}


.ranktitle {
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    display: flex;
    align-items: center;
}
.ranktitle .rank{ 
	margin-right: 20px;
	height: 100%;
	padding-bottom: 10px;
}
.ranktitle .active{
	color: #0c0;
	border-bottom: #0c0 2px solid;
}


.choise{
  margin-bottom:10px ;
  width: 100%;
}

.choise li{
  font-size: 14px;
  margin:0 10px 20px;
  padding: 5px 10px;
  display: inline-block;
  width: auto;
  vertical-align: top
  
}
.choise .text span{
  color: #999;
}
.choise .active{
  background-color: #0c0;
  border-radius: 5px;
}
.choise .active a{
color: #fff;
}
@media screen and (max-width: 768px) {
  .choise li{
    font-size: 14px;
    padding: 5px 5px;
  }
  .choise{
  overflow: auto;
  white-space: nowrap;
  }
}