/* <!--                 模板馆专业苹果cms模板下载  www.iqmbg.com                  -->
<!-- 此模板仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。 --> */
@charset "utf-8";

body,
html {
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	font-family: "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
	font-size: 14px;
	line-height: 140%;
	color: #444444;
	background-color: #f0f0f0;
}

body:after {
	content: "";
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #29262d;
	background: -webkit-linear-gradient(top, #ffffff, #f0f0f0);
	background: -o-linear-gradient(top, #ffffff, #f0f0f0);
	background: -moz-linear-gradient(top, #ffffff, #f0f0f0);
	background: linear-gradient(top, #ffffff, #f0f0f0);
}

ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
tr {
	margin: 0;
	padding: 0;
	font-weight: normal
}

input,
select {
	font-size: 12px;
	vertical-align: middle;
	border: none;
}

ul,
li {
	list-style-type: none;
}

img {
	border: 0 none;
}

p {
	margin: 0 0 10px;
}



/* container */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

:after,
:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.container {
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
/* <!--                 模板馆专业苹果cms模板下载  www.iqmbg.com                  -->
<!-- 此模板仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。 --> */
.row {
	position: relative;
	margin-right: -15px;
	margin-left: -15px;
}

.container:before,
.container:after,
.row:before,
.row:after,
.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
	clear: both;
}

.nopc {
	display: none !important;
}

/* more */
h1 {
	font-size: 22px;
	line-height: 28px;
}

h2 {
	font-size: 20px;
	line-height: 26px;
}

h3 {
	font-size: 18px;
	line-height: 24px;
}

h4 {
	font-size: 16px;
	line-height: 22px;
}

h5 {
	font-size: 14px;
	line-height: 20px;
}

h6 {
	font-size: 12px;
	line-height: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	margin-top: 10px;
	margin-bottom: 10px
}

a,
button {
	text-decoration: none;
	color: #444444;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

button:hover {
	cursor: pointer;
}

a:focus,
a:hover,
a:active {
	text-decoration: none;
	color: #59d2fa;
}

.icon {
	font-size: 16px;
	vertical-align: -1px;
}

.font-16 {
	font-size: 16px;
}

.font-14 {
	font-size: 14px;
}

.font-12 {
	font-size: 12px;
}

.text-red {
	color: red;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.pull-right {
	float: right !important;
	color: #999999;
}

.pull-right1 {
	float: right !important;
	color: #999999;
	padding-top: 5px;
	padding-right: 10px;
}

.pull-right2 {
	float: right !important;
	color: #999999;
	padding-top: 5px;
}

.hide {
	display: none !important;
}

.text-overflow {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
}

.pic-text {
	display: block;
	border-radius: 0px 0px 7px 7px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 5px 10px;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));
	color: #FFFFFF;
}

.pic-text1 {
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 44px;
	padding: 12px;
	top: 8px;
	background: none;
	display: block;
	padding: 0px;
}

.pic-text1 b {
	background: rgba(0, 0, 0, .51);
	color: #c2c6d0;
	border-radius: 10px 0 0 10px;
	max-width: 75%;
	padding: 0 5px;
	line-height: 20px;
	font-size: 12px;
	display: inline-block !important;
	float: right;
	margin: 0;
}

.pic-tag {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 99;
	padding: 2px 8px;
	font-size: 12px;
	border-radius: 0 0 0 8px;
	background-color: #FF9900;
	color: #FFFFFF;
}

.stui-pannel {
	margin-bottom: 20px;
}

.stui-foot {
	margin-top: 30px;
	margin-bottom: 30px;
}

/* form */
input,
textarea {
	outline: medium none;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input.form-control,
input.btn {
	outline: 0px;
	-webkit-appearance: none;
}

input[type="checkbox"] {
	vertical-align: -2px;
}

.form-control {
	display: block;
	width: 100%;
	height: 35px;
	padding: 0 10px;
	font-size: 12px;
	line-height: 20px;
	border-radius: 4px;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

textarea.form-control {
	height: auto;
}

.hide,
.visible-lg,
.visible-md,
.visible-sm,
.visible-xs,
.visible-mi {
	display: none;
}

/* header */
.stui-header {
	margin: 30px 0 20px;
}

.stui-header__logo,
.stui-header__menu {
	float: left;
	margin-left: 10px;
}

.stui-header__logo .logo {
	display: block;
	width: 150px;
	height: 50px;
	background: url(../img/logo.png) no-repeat;
	background-position: 50% 50%;
	background-size: cover
}

.stui-header__menu {
	position: relative;
	margin-top: 15px;
	margin-left: 30px;
}

.stui-header__menu li {
	float: left;
	margin-right: 30px
}

.stui-header__menu li a {
	position: relative;
	font-size: 18px;
	color: #555555;
}

.stui-header__menu li a:hover,
.stui-header__menu li.active a {
	color: #59d2fa;
}

.stui-header__menu li.active a:before {
	content: " ";
	position: absolute;
	left: 30%;
	bottom: -10px;
	width: 40%;
	height: 3px;
	background-color: #59d2fa;
	border-radius: 2px;
}

.stui_header__user {
	float: right;
	margin-top: 15px;
	margin-right: 10px;
}

.stui_header__user>li {
	position: relative;
	float: left;
	padding-bottom: 10px;
	margin-left: 30px;
}
/* <!--                 模板馆专业苹果cms模板下载  www.iqmbg.com                  -->
<!-- 此模板仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。 --> */
.stui_header__user>li>a {
	color: #555555;
}

.stui_header__user>li>a:hover {
	color: #59d2fa;
}

.stui_header__user>li>a .iconfont {
	font-size: 22px;
}

.stui_header__user>li>span {
	font-size: 24px;
	color: #555555;
}

/* dropdown */
.dropdown {
	display: none;
	position: absolute;
	z-index: 999;
	top: 100%;
	padding: 15px;
	border-radius: 2px;
	background-color: #f0f0f0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dropdown:after {
	content: " ";
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top: -5px;
	right: 15px;
	background-color: #f0f0f0;
}

.dropdown.search {
	right: -10px;
}

.dropdown.search .item {
	position: relative;
	width: 200px;
}

.dropdown.search .item .form-control {
	background-color: #ffffff;
}

.dropdown.search .item .submit {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: none;
	border: 0;
	cursor: pointer;
}

.dropdown.search .item .submit .icon {
	font-size: 14px;
	color: #999999
}

.dropdown.search li {
	padding: 10px 5px;
	border-top: 1px solid #dfdfdf;
}

.dropdown.search li:first-child {
	border-top: 0;
}

.dropdown.search li a {
	display: block;
}

.dropdown.search li a:hover {
	color: #59d2fa;
}

.dropdown.search li a span {
	color: #999999;
}

.dropdown.type {
	right: -10px;
	width: 240px;
	padding: 15px 7px 7px 15px;
}

.dropdown.type li {
	float: left;
	width: 33.333333%;
	padding-right: 8px;
	padding-bottom: 8px;
}

.dropdown.type li a {
	display: block;
	padding: 5px 0;
	border-radius: 2px;
	background-color: #fff;
	font-size: 12px;
	text-align: center;
}

.dropdown.type li a:hover,
.dropdown.type li.active a {
	background-color: #59d2fa;
	color: #fff;
}

.dropdown.history {
	right: -10px;
	width: 240px;
}

.dropdown.history .head h5 {
	margin: 0;
	padding-bottom: 10px;
}

.dropdown.history .head a {
	color: #59d2fa;
}

.dropdown.history li a {
	display: block;
	padding: 8px 0;
	border-top: 1px solid #eee;
	color: #333;
}

.dropdown.history li a:hover {
	color: #59d2fa;
}

.dropdown.history li a span {
	color: #999;
}

/* screen */
.stui-screen {
	padding: 10px;
}

.stui-screen .head {
	padding: 15px;
	border-radius: 2px;
	background-color: #f7f7f7;
}

.stui-screen .head .text,
.stui-screen .head .all {
	color: #444;
}

.stui-screen .head a {
	color: #444;
}

.stui-screen .item {
	display: block;
}

.stui-screen .item ul {
	padding: 15px;
	border-bottom: 1px solid #f0f0f0;
}

.stui-screen .item ul li {
	float: left;
}

.stui-screen .item ul li a {
	display: inline-block;
	padding-left: 20px;
}

.stui-screen .item ul li a,
.stui-screen .item ul li span {
	color: #444;
}

.stui-screen .item ul li.active a,
.stui-screen .item ul li a:hover {
	color: #59d2fa;
}

/* list */
.stui-vodlist__head {
	margin-top: 30px;
	padding: 0 10px;
}

.stui-vodlist__head h2,
.stui-vodlist__head h2 a {
	color: #000000;
	font-weight: bold;
}

.stui-vodlist__head p {
	padding-left: 20px;
}

.stui-vodlist__head p a {
	display: inline-block;
	margin-right: 20px;
}

.stui-vodlist li {
	float: left;
	padding: 10px;
	width: 16.6666667%;
}

.stui-vodlist li.index {
	width: 33.333333%;
}

.stui-vodlist li.like {
	width: 50%;
	padding: 5px;
}

.stui-vodlist li.topic {
	width: 25%;
}

.stui-vodlist__thumb {
	display: block;
	position: relative;
	padding-top: 150%;
	border-radius: 5px;
	background: url(../img/load.gif) no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.stui-vodlist__thumb.active {
	padding-top: 60%;
	background: url(../img/load.gif) no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.stui-vodlist__thumb .play {
	display: none;
	position: absolute;
	top: 0;
	z-index: 1;
	border-radius: 7px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1) url(../img/play.png) center no-repeat;
}

.stui-vodlist__thumb:hover .play {
	display: block;
}

.stui-vodlist__detail {
	margin: 0;
	padding: 10px 0;
}

.stui-vodlist__detail .title {
	margin: 0;
}

.stui-vodlist__detail .title a {
	font-size: 14px;
	color: #282828;
	font-weight: 700;
}

.stui-vodlist__detail .title a:hover {
	color: #59d2fa;
}

.stui-vodlist__detail .text {
	margin-top: 3px;
	color: rgba(0, 0, 0, .4);

}

.stui-vodlist__detail.index {
	padding: 5px 10px;
}

.stui-vodlist__detail.index .title {
	margin: 10px 0;
	font-size: 16px;
	text-align: left;
}

.stui-vodlist__detail.index .title .score {
	font-size: 14px;
	color: #59d2fa;
}

.stui-vodlist__detail.index .title .iconfont {
	color: #59d2fa;
}

.stui-vodlist__detail.index .text {
	margin-bottom: 8px;
	padding-left: 20px;
}

/* content */
.stui-content {
	padding: 10px;
}

.stui-content__detail,
.stui-content__thumb,
.stui-content__side {
	display: table-cell;
	vertical-align: top
}

.stui-content__side p {
	padding: 0px 30px;
}

.stui-content__thumb .pic {
	display: block;
	width: 220px;
}

.stui-content__thumb .pic img {
	max-width: 100%;
}

.stui-content__side {
	width: 240px;
	padding-top: 80px;
	text-align: center;
	background-color: #ededed;
}

.stui-content__detail {
	padding: 20px;
	width: 100%;
	background-color: #f7f7f7;
}

.stui-content__detail .title {
	margin: 0 0 10px;
	font-size: 18px;
	color: #000000;
}

.stui-content__detail .data {
	margin-bottom: 10px;
}

.stui-content__detail .data2 {
	color: #888888;
}

.stui-content__detail .data3 {
	color: #59d2fa;
}

.stui-content__detail .data4 {
	font-size: 12px;
	color: #888888;
}

.stui-content__detail .desc {
	padding-left: 42px;
	line-height: 25px;
}

.stui-content__detail .desc .left {
	margin-left: -42px
}

.stui-content__detail .play-btn {
	padding-left: 42px;
	margin-top: 20px
}

.stui-content__detail .play-btn a {
	display: inline-block;
	padding: 8px 25px;
	margin-right: 5px;
	border-radius: 5px;
	background-color: #59d2fa;
	font-size: 14px;
	color: #fff;
}

/* player */
.stui-player {
	position: relative;
	z-index: 2;
	padding: 10px;
}

.stui-player__video {
	background-color: #000;
}

.stui-player__left {
	position: relative;
	float: left;
	width: 75%;
}

.stui-player__side {
	position: relative;
	float: left;
	width: 25%;
	background-color: #333333;
}

.stui-player__side .tab {
	padding: 15px;
	border-bottom: 1px solid #434145;
}

.stui-player__side .tab li {
	float: left;
	padding-right: 20px;
}

.stui-player__side .tab li a {
	position: relative;
	font-size: 16px;
	color: #757575;
}

.stui-player__side .tab li.active a:before {
	content: " ";
	position: absolute;
	left: 25%;
	bottom: -15px;
	width: 50%;
	height: 2px;
	background-color: #59d2fa;
}

.stui-player__side .tab li.active a {
	color: #59d2fa;
}

.stui-player__side .item {
	display: none;
	position: relative;
	padding: 15px 10px;
}

.stui-player__side .item.active {
	display: block;
}

.stui-player__side .item .head {
	position: relative;
	color: #757575;
	padding-bottom: 10px;
	padding-right: 5px;
	font-size: 15px;
}

.stui-player__side .item .head a {
	color: #757575;
}

.stui-player__side .item .head h3 {
	margin: 0;
	padding-left: 5px;
	font-size: 14px;
}

.stui-player__side .item .head .switch-line {
	margin-top: 5px;
}

.stui-player__side .item .tab-top {
	display: none;
	position: absolute;
	z-index: 999;
	top: 100%;
	right: 0;
	padding: 10px 25px;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.stui-player__side .item .tab-top:after {
	content: " ";
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top: -5px;
	right: 15px;
	background-color: #fff;
}

.stui-player__side .item .tab-top li {
	line-height: 35px;
	border-bottom: 1px solid #eee;
	text-align: center;
}

.stui-player__side .item .tab-top li:last-child {
	border-bottom: 0;
}

.stui-player__side .item .tab-top li a {
	font-size: 14px;
}

.stui-player__side .item .tab-top li a:hover {
	color: #59d2fa;
}

.stui-player__side .cont {
	display: none;
}

.stui-player__side .cont.active {
	display: block;
}

.stui-player__detail {
	padding: 20px;
	background-color: #1c1b1e;
}

.stui-player__detail .title {
	margin: 0 0 10px;
	font-size: 18px;
	color: #fff;
}

.stui-player__detail .title a {
	color: #fff;
}

.stui-player__detail .more {
	float: right;
	padding-top: 10px;
}

.stui-player__detail .more a {
	display: inline-block;
	padding: 6px 15px;
	margin-left: 10px;
	border-radius: 2px;
	background-color: #252527;
	color: #999;
}

.stui-player__detail .more a:hover {
	color: #59d2fa;
}

.stui-player__detail .data {
	font-size: 14px;
	color: #888888;
}

.stui-player__detail .data a {
	color: #888888;
}

.stui-player__detail .data2 {
	font-size: 14px;
	color: #888888;
}

.stui-player__detail .data-more {
	padding-top: 10px;
	color: #888888;
}

.stui-player__detail .data-more a {
	color: #888888;
}

/* playlist */
.stui-play__list li {
	float: left;
	width: 33.333333%;
	padding: 5px;
}

.stui-play__list li.down {
	float: none;
	width: 100%;
}

.stui-play__list li a {
	display: block;
	padding: 10px 5px 10px 5px;
	border-radius: 5px;
	text-align: center;
	background-color: #1c1b1e;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	color: #757575;
}

.stui-play__list li a:hover {
	color: #59d2fa;
}

.stui-play__list li a:visited {
	color: #444444;
}

.stui-play__list li.active a {
	background-color: #59d2fa;
	color: #fff;
}

/*.stui-content__playlist{ padding-right: 10px;}*/
.stui-content__playlist li {
	float: left;
	width: 10%;
	margin: 0;
	padding: 0 5px;
	margin-bottom: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
}

.stui-content__playlist li a {
	display: block;
	width: auto;
	text-align: center;
	padding: 10px 5px;
	background-color: #ededed;
	color: #555555;
	border-radius: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
}

.stui-content__playlist li.active a {
	background-color: #59d2fa;
	color: #ffffff;
}

.stui-content__playlist li a:hover {
	color: #59d2fa;
}

.stui-content__playlist li a:visited {
	color: #c5c5c5;
}

/* .stui-content__playlist li.active a,.stui-content__playlist li a:hover{ background-color: #59d2fa; color: #ffffff;} */


/* down */
.stui-content__down {
	padding-right: 10px;
}

.stui-content__down li {
	margin: 10px 0px 0px 10px;
	height: 40px;
	background-color: #f1f1f1;
	border-radius: 5px;
}

.stui-content__down li span {
	display: inline-block;
}

.down1 {
	width: 30%;
	line-height: 40px;
	text-align: center;
	background-color: #e9e9e9;
	border-radius: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
}

.down1 a {
	color: #666666;
	line-height: 40px;
}

.down1 a:hover {
	color: #59d2fa;
}

.down2 {
	width: 70%;
	line-height: 40px;
	padding: 0 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
}

.down2 a {
	color: #666666;
	line-height: 40px;
}

.down2 a:hover {
	color: #59d2fa;
}


/* page */
.stui-page__item {
	margin: 20px 0 20px;
}

.stui-page__item li {
	display: inline-block;
	padding: 0 5px;
}

.stui-page__item li a {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 4px;
	background-color: #e8e8e8;
	color: #666;
}

.stui-page__item li.active a,
.stui-page__item li.active span {
	background-color: #59d2fa;
	color: #ffffff;
}

.stui-page__item li a:hover {
	color: #59d2fa;
}

.stui-page__item li.num {
	display: none;
}

.stui-page__all a {
	position: absolute;
	top: 50%;
	margin-top: -40px;
	display: block;
	width: 80px;
	height: 80px;
	text-align: center;
	line-height: 80px;
}

.stui-page__all a .iconfont {
	font-size: 50px;
	color: #444444;
}

.stui-page__all a:hover .iconfont {
	color: #59d2fa;
}

.stui-page__all a.left {
	left: 0;
}

.stui-page__all a.right {
	right: 0;
}

/* link */
.stui-link__text {
	margin: 30px 10px;
}

.stui-link__text li {
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 10px;
}

/* embed */
.embed-responsive {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0;
	height: 0
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0
}

.embed-responsive-16by9 {
	padding-bottom: 56.25%
}

.embed-responsive-4by3 {
	padding-bottom: 75%
}

/* gbook */
.stui-gbook {
	padding: 10px;
}

.stui-gbook-form {
	padding-bottom: 20px;
}

.stui-gbook-form .form-control {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.stui-gbook-form textarea.form-control {
	height: auto;
}

.stui-gbook-form li {
	margin-top: 15px;
}

.stui-gbook-form li:first-child {
	margin-top: 0;
}

.stui-gbook-form li .submit {
	padding: 0 25px;
	height: 35px;
	line-height: 35px;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	background-color: #59d2fa;
	color: #fff;
}

.stui-gbook__item {
	padding: 10px 0;
	border-top: 1px dotted #ddd;
}

.stui-gbook__item .name {
	color: #757575;
}

.stui-gbook__item .cont {
	position: relative;
	margin: 10px 0;
	padding: 20px;
	border-radius: 2px;
	background-color: #f0f0f0;
}

.stui-gbook__item .cont:before {
	content: " ";
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-width: 1px 1px 0 0;
	position: absolute;
	top: -5px;
	left: 10px;
	border-style: solid;
	background-color: #f0f0f0;
	border-color: #f0f0f0;
}

.stui-gbook__item .cont p {
	margin: 10px 0 0;
}

@media (min-width:768px) {
	.container {
		width: 750px
	}
}

@media (min-width:992px) {
	.container {
		width: 920px
	}
}

@media (min-width:1200px) {
	.container {
		width: 1170px
	}
}

@media (max-width:1200px) {

	.stui-page__all,
	.stui-content__side {
		display: none;
	}

	.stui-vodlist__detail.index .title {
		margin: 8px 0;
		font-size: 16px;
		text-align: left;
	}

	.stui-vodlist__detail.index .text {
		margin-bottom: 0px;
		padding-left: 20px;
	}

	.stui-header__menu {
		display: none;
	}
}

@media (max-width:1024px) {

	/* header */
	.stui-header {
		margin-top: 20px;
	}

	.stui-header__menu {
		display: none;
	}

	/* screen */
	.stui-screen .item ul {
		width: 100%;
		width: 100%;
		white-space: nowrap;
		overflow-y: hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.stui-screen .item ul::-webkit-scrollbar {
		display: none;
	}

	.stui-screen .item ul li {
		float: none;
		display: inline-block;
		margin-bottom: 0;
	}

	.stui-screen .item ul li a {
		padding-left: 10px;
	}

	/* list */
	.stui-vodlist li {
		width: 25%;
	}

	.stui-vodlist li.index {
		width: 50%;
	}

	.stui-vodlist li.topic {
		width: 50%;
	}

	.stui-vodlist li.like {
		width: 25%;
		padding: 5px;
	}

	.stui-vodlist__detail.index .title {
		margin: 10px 0;
		font-size: 16px;
		text-align: left;
	}

	.stui-vodlist__detail.index .text {
		margin-bottom: 5px;
		padding-left: 20px;
	}


	/* player */
	.stui-player__left {
		float: none;
		width: 100%;
	}

	.stui-player__side {
		float: none;
		width: 100%;
		background-color: #f2f2f2;
	}

	.stui-player__side .tab {
		padding: 15px;
		border-bottom: 1px solid #dfdfdf;
	}

	.stui-player__side .tab li {
		float: left;
		padding-right: 20px;
	}

	.stui-player__side .tab li a {
		position: relative;
		font-size: 16px;
		color: #444;
	}

	.stui-player__side .tab li.active a:before {
		content: " ";
		position: absolute;
		left: 25%;
		bottom: -15px;
		width: 50%;
		height: 2px;
		background-color: #59d2fa;
	}

	.stui-player__side .tab li.active a {
		color: #59d2fa;
	}

	.stui-player__detail .more a.menu-switch {
		display: none;
	}

	.stui-player__detail .title {
		margin: 0 0 5px;
	}


	/* palylist */
	.stui-play__list li {
		width: 33.33%;
	}

	.stui-play__list li.down {
		float: none;
		width: 100%;
	}

	.stui-play__list li a {
		display: block;
		padding: 15px 5px 15px 5px;
		border-radius: 5px;
		text-align: center;
		background-color: #e5e5e5;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
		color: #444;
	}

	.stui-play__list li a:hover {
		color: #59d2fa;
	}

	.stui-play__list li a:visited {
		color: #c5c5c5;
	}

	.stui-play__list li.active a {
		background-color: #59d2fa;
		color: #fff;
	}

	.stui-content__playlist {
		padding-right: 10px;
	}

	.stui-content__playlist li {
		width: 33.33%;
		margin: 0;
		padding-top: 10px;
		padding-left: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
	}

	.stui-content__playlist li a {
		display: block;
		width: auto;
		text-align: center;
		padding: 15px 5px 15px 5px;
	}

	/* down */
	.stui-content__down {
		padding-right: 10px;
	}

	.stui-content__down li {
		margin: 10px 0px 0px 10px;
		height: 50px;
		background-color: #f1f1f1;
		border-radius: 5px;
	}

	.stui-content__down li span {
		display: inline-block;
	}

	.down1 {
		width: 33.33%;
		line-height: 50px;
		text-align: center;
		background-color: #e9e9e9;
		border-radius: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
	}

	.down1 a {
		color: #666666;
		line-height: 50px;
	}

	.down1 a:hover {
		color: #59d2fa;
	}

	.down2 {
		width: 66.66%;
		line-height: 50px;
		padding: 0 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
	}

	.down2 a {
		color: #666666;
		line-height: 50px;
	}

	.down2 a:hover {
		color: #59d2fa;
	}

	/* link */
	/*.stui-link__text {*/
	/*	display: none;*/
	/*}*/

	.hidden-ps {
		display: none !important;
	}
}

@media (max-width:767px) {

	/* more */
	.stui-pannel__bd {
		padding: 0 5px;
	}

	.play-bg {
		display: none;
	}

	.stui-foot {
		margin-top: 30px;
	}

	/* header */
	.stui-header {
		margin-bottom: 10px;
	}

	.stui-header__logo .logo {
		width: 127px;
		height: 30px;
		background: url(../img/logo.png) no-repeat;
		background-position: 50% 50%;
		background-size: cover
	}

	.stui_header__user {
		float: right;
		margin-top: 5px;
		margin-right: 10px;
	}

	.stui_header__user>li {
		position: relative;
		float: left;
		padding-bottom: 10px;
		margin-left: 15px;
	}

	.stui_header__user>li>a .iconfont {
		font-size: 22px;
	}

	.stui_header__user>li>span {
		font-size: 18px;
		color: #555555;
	}

	/* screen */
	.stui-screen {
		padding: 5px;
	}

	.stui-screen .head {
		padding: 15px 10px 15px 10px;
	}

	.stui-screen .head .all {
		display: none;
	}

	.stui-screen .item ul {
		padding: 15px 10px 15px 10px;
	}

	/* list */
	.stui-vodlist li {
		padding: 5px;
		width: 33.333333%;
	}

	.stui-vodlist li.index {
		width: 100%;
	}

	.stui-vodlist li.like {
		width: 33.333333%;
	}

	.stui-vodlist__thumb.active {
		padding-top: 50%;
	}

	.stui-vodlist__detail {
		padding: 5px 10px;
	}

	.stui-vodlist__detail .title {
		font-size: 12px;
	}

	/*.stui-vodlist__detail.index .title{ margin-bottom: 5px;}*/
	.stui-vodlist__detail.index .title {
		margin: 5px 0;
		font-size: 16px;
		text-align: left;
	}

	.stui-vodlist__detail.index .text {
		margin-bottom: 5px;
		padding-left: 20px;
	}

	.stui-vodlist__head p {
		display: none;
	}

	.stui-vodlist__thumb .play {
		display: none;
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
	}

	/* content */
	.stui-content {
		padding: 0 5px;
	}

	.stui-content__detail,
	.stui-content__thumb {
		display: block;
	}

	.stui-content__thumb {
		position: absolute;
		top: 15px;
		right: 20px;
	}

	.stui-content__thumb .pic {
		display: block;
		width: 120px;
	}

	.stui-content__thumb .pic img {
		max-width: 100%;
		border-radius: 2px;
	}

	.stui-content__detail {
		padding: 20px 10px;
	}

	.stui-content__detail .title {
		margin: 0 0 20px;
	}

	/* player */
	.stui-player {
		padding: 0 5px;
	}

	.stui-player__detail {
		padding: 10px;
		background-color: #f7f7f7;
	}

	.stui-player__detail .title {
		margin: 0 0 10px;
		font-size: 18px;
		color: #000;
	}

	.stui-player__detail .title a {
		color: #000;
	}

	.stui-player__detail .more {
		float: none;
		margin: -10px -10px 10px -10px;
		padding-bottom: 10px;
		text-align: center;
		background-color: #2d2d2d;
	}

	.stui-player__detail .more a {
		margin-left: 0;
		margin-right: 10px;
	}

	.stui-player__detail .more a {
		display: inline-block;
		padding: 6px 15px;
		margin-left: 0px;
		border-radius: 2px;
		background-color: #3f3f3f;
		color: #999999;
	}

	.stui-player__detail .more a:hover {
		color: #59d2fa;
	}

	.stui-player__side {
		float: none;
		width: 100%;
		background-color: #f2f2f2;
	}

	.stui-player__side .tab {
		padding: 15px;
		border-bottom: 1px solid #dfdfdf;
	}

	.stui-player__side .tab li {
		float: left;
		padding-right: 20px;
	}

	.stui-player__side .tab li a {
		position: relative;
		font-size: 16px;
		color: #444;
	}

	.stui-player__side .tab li.active a:before {
		content: " ";
		position: absolute;
		left: 25%;
		bottom: -15px;
		width: 50%;
		height: 2px;
		background-color: #59d2fa;
	}

	.stui-player__side .tab li.active a {
		color: #59d2fa;
	}

	/* playlist */
	.stui-play__list li {
		width: 33.33%;
	}

	.stui-play__list li.down {
		float: none;
		width: 100%;
	}

	.stui-play__list li a {
		display: block;
		padding: 15px 5px 15px 5px;
		border-radius: 5px;
		text-align: center;
		background-color: #e5e5e5;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
		color: #444;
	}

	.stui-play__list li a:hover {
		color: #59d2fa;
	}

	.stui-play__list li a:visited {
		color: #c5c5c5;
	}

	.stui-play__list li.active a {
		background-color: #59d2fa;
		color: #fff;
	}

	.stui-content__playlist {
		padding-right: 10px;
	}

	.stui-content__playlist li {
		width: 33.33%;
		margin: 0;
		padding-top: 10px;
		padding-left: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
	}

	.stui-content__playlist li a {
		display: block;
		width: auto;
		text-align: center;
		padding: 15px 5px 15px 5px;
	}

	/* down */
	.stui-content__down {
		padding-right: 10px;
	}

	.stui-content__down li {
		margin: 10px 0px 0px 10px;
		height: 50px;
		background-color: #f1f1f1;
		border-radius: 5px;
	}

	.stui-content__down li span {
		display: inline-block;
	}

	.down1 {
		width: 33.33%;
		line-height: 50px;
		text-align: center;
		background-color: #e9e9e9;
		border-radius: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
	}

	.down1 a {
		color: #666666;
		line-height: 50px;
	}

	.down1 a:hover {
		color: #59d2fa;
	}

	.down2 {
		width: 66.66%;
		line-height: 50px;
		padding: 0 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
	}

	.down2 a {
		color: #666666;
		line-height: 50px;
	}

	.down2 a:hover {
		color: #59d2fa;
	}

	/* page */
	.stui-page__item li {
		display: block;
		float: left;
		width: 20%;
		margin: 0;
		padding: 0;
	}

	.stui-page__item li.num {
		display: block;
	}

	.stui-page__item li a {
		padding: 10px 15px;
	}

	/* link */
	.stui-link__text {
    margin: 10px 0px 0 10px;
	}

	.hide,
	.visible-lg,
	.visible-md,
	.visible-sm,
	.visible-xs,
	.visible-mi {
		display: block;
	}

	/* gbook */
	.stui-gbook {
		padding: 10px;
	}

	.stui-gbook__item .cont {
		padding: 10px;
	}

	.hidden-xs {
		display: none !important;
	}

	.hidden-ps {
		display: block !important;
	}

	.nopc {
		display: block !important;
	}
}





.split-line {
	display: inline-block;
	margin-left: 12px;
	margin-right: 12px;
	width: 1px;
	height: 14px;
	vertical-align: -2px;
}

.top-line,
.top-line-dot,
.bottom-line,
.bottom-line-dot {
	position: relative;
}

.top-line:before,
.top-line-dot:before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	width: 100%;
	height: 1px;
}

.bottom-line:after,
.bottom-line-dot:before {
	content: " ";
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 1px;
}

/* btn */
.btn {
	display: inline-block;
	padding: 6px 30px;
	font-size: 12px;
	border-radius: 4px;
}

.btn .icon {
	font-size: 12px;
}

.btn-min {
	padding: 4px 15px;
}

.btn-lg {
	padding: 12px 30px;
}

.btn-block {
	display: block;
	width: 100%;
	text-align: center;
}

.btn.disabled {
	cursor: not-allowed;
}

/* pannel-head */
.stui-pannel__head {
	position: relative;
	height: 30px;
}

.stui-pannel__head.active {
	height: 40px;
}

.stui-pannel__head .title {
	float: left;
	margin: 0;
	padding-right: 10px;
	line-height: 24px;
	font-weight: 700;
}

.stui-pannel__head .title img {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	vertical-align: -5px;
}

.stui-pannel__head .more {
	line-height: 30px;
}


.bottomplay {
	position: relative;
	min-height: 20px;
	padding: 10px 0 10px 0;
}



.more1 {
	color: rgba(0, 0, 0, .68);
	font-size: 14px;
	display: inline-block;
}

em {
	color: #59d2fa;
	font-style: normal;
}

/* banner */
.stui-banner__item {
	position: relative;
	display: block;
	width: 100%;
}

.stui-banner .flickity-page-dots {
	bottom: 30px;
}

.flickity-prev-next-button.next {
	right: 0;
}

.flickity-prev-next-button.previous {
	left: 0;
}

.stui-banner__pic {
	display: block;
	position: relative;
}


/* flickity */
.flickity-enabled {
	position: relative;
}

.flickity-enabled:focus {
	outline: 0
}

.flickity-viewport {
	overflow: hidden;
	position: relative;
	height: 100%
}

.flickity-slider {
	position: absolute;
	width: 100%;
	height: 100%
}

.flickity-viewport.is-pointer-down {
	cursor: -webkit-grabbing;
	cursor: grabbing
}

.flickity-prev-next-button {
	position: absolute;
	top: 50%;
	width: 30px;
	height: 60px;
	border: none;
	background-color: rgba(0, 0, 0, .6);
	cursor: pointer;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}

.flickity-prev-next-button.previous {
	left: 10px;
	border-radius: 0 10px 10px 0
}

.flickity-prev-next-button.next {
	right: 10px;
	border-radius: 10px 0 0 10px
}

.flickity-prev-next-button:disabled {
	opacity: 0;
	cursor: auto
}

.flickity-prev-next-button svg {
	position: absolute;
	left: 20%;
	top: 20%;
	width: 60%;
	height: 60%
}

.flickity-prev-next-button .arrow {
	fill: #fff
}

.flickity-prev-next-button.no-svg {
	color: #fff;
	font-size: 18px
}

.flickity-page-dots {
	position: absolute;
	width: 100%;
	bottom: 20px;
	left: 0;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	line-height: 1
}

.flickity-page-dots .dot {
	display: inline-block;
	width: 15px;
	height: 3px;
	margin: 0 5px;
	background: #59d2fa;
	opacity: .25;
	cursor: pointer
}

.flickity-page-dots .dot.is-selected {
	opacity: 1
}

.flickity-page {
	padding-bottom: 15px;
	overflow: hidden;
}

.flickity-page .flickity-page-dots {
	bottom: 0;
}

.detail-more {
	color: #ff658d;
}

.sc {
	background-image: linear-gradient(-45deg, #ffab9c, #ff658d);
}

.lh40 {
	line-height: 35px !important;
	flex: 1;
	display: block;
}

.stui-content__playlist {
	margin-top: 5px;
}

.dpplay {
	display: flex;
	white-space: nowrap;
	overflow-y: auto;
	height: 100% !important;
}

@media(min-width:767px) {
	.dpplay {
		display: block;
	}
}


.fixed_right_bar {
	position: fixed;
	bottom: 120px;
	right: 1%;
	z-index: 100
}



.fixed_right_bar .dbicon {
	color: #fff;
	display: block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	font-size: 16px;
	text-align: center;
	border-radius: 50%;
	overflow: hidden;
	margin-top: 10px;
	position: relative;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer
}


.stui-player__side .item .tab-top li.active a {
	font-size: 14px;
	color: #59d2fa;
}



.jbnotice {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin-top: -65px;
}

.jbnotice h3,
.jbnotice h5 {
	color: #fff;
	font-size: 16px;
}

.mb20 {
	margin-bottom: 20px;
}

.text-center {
	text-align: center;
}

.btn-blue {
	background-color: #4fb1f7;
	background: linear-gradient(to right, #4fb1f7 0, #6bb8ee 100%);
}
.btn-blue:hover,.btn-yellows:hover{
    color: #fff!important;
}
.btnjb {
	display: inline-block;
	padding: 8px 30px;
	font-size: 12px;
	color: #fff;
	border-radius: 5px;
	margin: 0 10px;
}

.btn-yellows {
	background-color: #ff9900;
	background-image: linear-gradient(-45deg, #ffab9c, #ff658d);
}

.btnmxone:hover {
	color: #fff;
}








@media(max-width:767px){
    .wdetail{
        width: 82%!important;
    }
}



@media(max-width:680px){
    .wdetail{
        width: 79%!important;
    }
}



@media(max-width:580px){
    .wdetail{
        width: 70%!important;
    }
}

@media(max-width:480px){
    .wdetail{
        width: 60%!important;
    }
}

@media(max-width:320px){
    .wdetail{
        width: 55%!important;
    }
}