/*!
 * Copyright 2016-2018 http://v.shoutu.cn
 * Email 726662013@qq.com,admin@shoutu.cn
 */
@charset "utf-8";







/* pannel */

.stui-pannel__head{ padding: 0 0px; margin-bottom: 10px; line-height: 25px;}
.stui-pannel__head .title{ display: inline-block; margin: 0; }
.stui-pannel__head .tab{ display: inline-block;}


/* playlist */
.stui-content__playlist{ position: relative; padding: 10px 0 0 0px;}
.stui-content__playlist.overflow{ height: 170px; overflow-y: scroll;}
.stui-content__playlist li{float:left; width: 12.5%; padding-bottom: 10px; padding-right: 10px;}
.stui-content__playlist li a{display: block; position: relative; padding:5px 10px; text-align: center; border: 1px solid #eee; border-radius:5px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.stui-content__playlist.nonum li{ width: auto;}
.stui-content__playlist.nonum li a{ padding:5px 20px;}
.stui-content__intro{ padding: 0 10px; color: #999;}
.stui-content__intro a{ color: #999;}
.stui-content__downlist{ position: relative;}
.stui-content__downlist li{ border-top:1px dotted #eee; padding: 10px 0;}
.stui-content__downlist li:last-child{ padding-bottom: 0;}

/* player */
.stui-player__video{ background-color: #000;}
.stui-player__detail .set{ float: right;}
.stui-player__detail .set .cut{ display: inline-block; margin-top: 5px; margin-right: 10px; width: 90px;  height: 32px; line-height: 30px; text-align: center; font-size: 14px; border: 1px solid #eee; border-radius: 4px;}
.stui-player__detail .set .cut.app{ display: none;}



@media (min-width: 1200px){	
	.visible-lg { display: block !important;}
	.hidden-lg {display: none !important;}		
}

@media (max-width: 1199px) and (min-width: 992px){
	.visible-md { display: block !important;}
	.hidden-md {display: none!important;}
}

@media (max-width: 991px) and (min-width: 768px){	
	.visible-sm{ display: block !important;}
	.hidden-sm {display: none !important;}	
}

@media (max-width: 1023px){
	body{ padding-top: 20px;}
	.container{ width: 100%; padding-left: 35px; padding-right: 35px;}	
	.stui-pannel-left,.stui-pannel-side{ float: none; width: 100%;}
	
	/* header */
	.stui-header__logo{ margin-right: 10px;}
	.stui-header__search{ width: 220px; margin-left: 0;}
	.stui-header__user > li{ margin-left: 20px;}
	.stui-header__user > li:hover .dropdown{ display: none;}
	
	/* screen */
	.stui-screen__list{ display: block; margin: 0 5px; padding:12px 0; overflow:hidden; white-space: nowrap;}
	.stui-screen__list.top{ padding-top: 5px;}
	.stui-screen__list:before{ -webkit-transform-origin: 0 100%;transform-origin: 0 100%; -webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.stui-screen__list li{ float: none; display: inline-block;}
	.stui-screen__list li span{ margin: 0; padding: 2px;}
	.stui-screen__list li a,.stui-screen__list.letter-list li a,.stui-screen__list.letter-list li.active a{ display: inline-block; margin: 0 0 0 8px; padding: 2px 5px; white-space:nowrap}
	
	/* vodlist */
	.stui-vodlist__item{ width: 25%;}
	.stui-vodlist__item.active{ width: 50%;}
	
	/* content */
	.stui-content__detail{ width: 100%;}
	.stui-content__playlist li{ width: 16.6666667%;}
	
	/* flickity */
	.flickity-item{ width: 80%;}
}

@media (max-width:767px){
	.visible-xs { display: block !important;}
	.hidden-xs {display: none!important;}
	body{ padding-top: 100px;}
    .container{ width: 100%; padding-left: 15px; padding-right: 15px;}
    .row{ border: 0; border-radius: 0;}
    .col-pd{ padding: 5px;}
    
    /* header */
    .stui-header__top{position:fixed;top:0;z-index:999;width:100%;height:60px; border-radius: 0; background-size: 390px !important;}
	.stui-header__hd{ height: 60px; padding: 0 10px;}
    .stui-header__logo{ width: 127px; margin: 15px 0 0; padding: 0;}
    .stui-header__logo .logo{width: 127px; height:30px;background:url(../img/logo_min.png) no-repeat;background-position:50% 50%;background-size:cover}
    .stui-header__search{ float: none; width: auto; margin: 5px 0 0; padding: 0; position: absolute; top: 10px; right: 80px; left: 147px;}
    .stui-header__search .form-control{ height: 30px; line-height: 30px; border-radius: 5px; padding:6px 40px 6px 10px; border: 0;}
    .stui-header__search .submit{ top: 0; right: 0; width: 30px; height: 30px;}   
	.stui-header__user > li{ padding: 18px 0 10px; margin-left: 10px;}
	.stui-header__user > li > span{ width: 24px; height: 24px; background-size: 24px !important;}
	.stui-header__user > li .dropdown{ right: 0;}	
	.stui-header__user > li .dropdown:before{ right: 7px;}
	.stui-header__user .dropdown.history li:before{ -webkit-transform-origin: 0 100%;transform-origin: 0 100%; -webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.stui-header__menu{ position:relative; margin: 0;}
	.stui-header__menu:before,.stui-header__menu:after{ display: none;}
	.stui-header__menu ul { height: 40px; display: -webkit-box; display: -webkit-flex; display: flex;}
	.stui-header__menu li{ display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; text-align: center;}
	.stui-header__menu li a{ display: block; padding: 0; line-height: 40px; font-size: 14px;}
	
	/* pannel */
	.stui-pannel{  margin-bottom: 10px; padding:5px 5px 10px;}
	.stui-pannel:before{ -webkit-transform-origin: 0 100%;transform-origin: 0 100%; -webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.stui-pannel:after{ width: 10px;}
	.stui-pannel__head{ padding: 0 5px; margin-bottom: 5px;}
	.stui-pannel__head .title{ font-size: 16px;}
	.stui-pannel__nav{ padding-bottom: 10px;}
	.stui-pannel__head .tab{ float: right;}
	.stui-pannel__head .tabs{ float: none; text-align: center; padding-bottom: 10px;}
	.stui-pannel__head .tabs li{ float: none; display: inline-block; margin: 0 5px;}
	
	/* vodlist */
	.stui-vodlist__item{ width: 33.333333%; padding: 5px;}
	.stui-vodlist__item.active{ width: 100%;}
	
	/* content */
	.stui-content__thumb .pic{ width: 120px;}
	.stui-content__detail{ padding: 0 0 0 15px;}
	.stui-content__detail .data{ margin-bottom: 5px;}
	.stui-content__detail .playbtn{ margin-top: 10px; padding: 0;}
	.stui-content__detail .playbtn a{ height: 28px; line-height: 28px;}
	.stui-content__detail .playbtn a.active{ width: 90px;}
	.stui-content__playlist{ padding: 5px 0 0 5px;}
	.stui-content__playlist li{ width: 33.333333%;}
	.stui-content__playlist li a{ font-size: 12px;}
	
	/* player */
	.stui-player__detail .set{ float: none; padding: 10px; background-color: #f5f5f5; text-align: center;}
	.stui-player__detail .set .cut{ margin-top: 0; background-color: #fff;}
	.stui-player__detail .set .cut.app{ display: inline-block;}
	
	/* flickity */
	.flickity{ padding:0 5px;}
	.flickity-item{ width: 100%; padding:5px 0;}
	.flickity-item.is-selected a .title{ padding: 5px; font-size: 12px;}
	.flickity-prev-next-button{ width: 20px; height: 35px;}
	.flickity-prev-next-button.previous{left:5px;border-radius:0 5px 5px 0}
	.flickity-prev-next-button.next{right:5px;border-radius:5px 0 0 5px}
	.flickity-prev-next-button svg{ top: 30%; left: 30%; width: 40%; height: 40%;}
	
	/* link */
	.stui-link__text li{ margin-right: 10px; margin-bottom: 5px;}
	
	/* page */
	.stui-page li{float:left; width:20%;margin:0; padding:0 5px 0 5px}
	.stui-page li a,.stui-page__box li .num{display: block; padding:5px 0; text-align:center}
	.stui-page li.page-item{ float: none; display: none; width: auto; margin-bottom: 5px;}
	.stui-page li.page-item.disabled,.stui-page li.page-item:first-child,.stui-page li.page-item:last-child{ display: inline-block;}
	.stui-page li.page-item a{ padding: 5px 15px;}
	.stui-page-text a,.stui-page-text em,.stui-page-text span{ margin: 0 5px;}
	.stui-page-text a.pagelink_b{ display: none;}
	
	/* fixed */
	.top-fixed-down{margin-top:-60px}
	.top-fixed-up{ margin-top: 0 !important;}
	.top-fixed{ -webkit-transition:.5s; -o-transition:.5s; -moz-transition:.5s; -ms-transition:.5s; transition:.5s;}
	@keyframes fade-in {0% {opacity: 0;}40% {opacity: 0;}100% {opacity: 1;}}  
	@-webkit-keyframes fade-in { 0% {opacity: 0;}  40% {opacity: 0;}100% {opacity: 1;}} 
	
	/* share */
	.stui-mobile__shere{ padding: 0 5px 10px;}
	.stui-mobile__shere a{ display: block; padding: 10px; text-align: center; border-radius: 4px;}
	.mobile-share{ position: fixed; z-index: 999; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; animation: fade-in; animation-duration: .5s; -webkit-animation:fade-in .5s;}
	.share-weixin{ background: url(../img/share_weixin.png) rgba(0, 0, 0, .8) no-repeat; background-position: right top 10px; background-size: 80%;}
	.share-other{ background: url(../img/share_other.png) rgba(0, 0, 0, .8) no-repeat; background-position: center bottom 10px; background-size: 80%;}
}