@charset "UTF-8";
/*
 * OFweek直播 共用样式
*/

/* reset */
body, div, p, h1, h2, h3, h4, h5, h6, ul, li, ol, input, textarea{ padding: 0; margin: 0; transition: all 0.25s; }
body{ font: normal 14px/1.5 "PingFang SC","Lantinghei SC","Helvetica Neue",Helvetica,Arial,"Microsoft YaHei"; background-color: #fff; -webkit-font-smoothing: antialiased; }
img{ vertical-align: top; border: 0; transition: all 0.25s; }
ul, ol{ list-style-type: none; }
a:link, a:visited{ text-decoration: none; transition: all 0.25s; }
a:hover{ text-decoration: underline; }

/* common */
.clear:after{ overflow: hidden; display: block; height: 0; clear: both; content: 'x'; }
.clear{ *zoom: 1; }
.fl{ float: left; }
.fr{ float: right; }
/* margin */
.mt5{ margin-top: 5px; }
.mt10{ margin-top: 10px; }
.mt15{ margin-top: 15px; }
.mt20{ margin-top: 20px; }
.mt25{ margin-top: 25px; }
.mt30{ margin-top: 30px; }
.mr5{ margin-right: 5px; }
.mr10{ margin-right: 10px; }
.mr15{ margin-right: 15px; }
.mr20{ margin-right: 20px; }
.mr25{ margin-right: 25px; }
.mr30{ margin-right: 30px; }
.ml5{ margin-left: 5px; }
.ml10{ margin-left: 10px; }
.ml15{ margin-left: 15px; }
.ml20{ margin-left: 20px; }
.ml25{ margin-left: 25px; }
.ml30{ margin-left: 30px; }
/* background */
.bg-gray{ background-color: #F2F2F2; }
/* placehold */
.em1{ padding: 0 .5em; }
.em2{ padding: 0 1em; }

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */
	-khtml-user-select: none; /* Konqueror */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
    not supported by any browser */
}

.loading{ animation: rotate 3s linear infinite; }

.animated { animation-duration: 1s; animation-fill-mode: both; }

/* layout */
.layout-width{ position: relative; width: 1200px; margin-left: auto; margin-right: auto; }

/* layout-top-bar */
.layout-top-bar{ overflow: hidden; height: 30px; line-height: 30px; color: #8C8C8C; background-color: #F9F9F9; }
.layout-top-bar a:link, .layout-top-bar a:visited{ font-size: 12px; color: #8C8C8C; }
.layout-top-bar a:hover{ color: #666; }
.layout-top-bar .username{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; *display: inline; *zoom: 1; max-width: 190px; vertical-align: top; }
.layout-top-bar .username:link, .layout-top-bar .username:visited{ color: #0076FF; }
.layout-top-bar .username:hover{ text-decoration: underline; }
.index-link .icon{ height: 16px; margin: 7px 5px 0 0; }
.layout-top-bar .cut-line{ color: #ddd; }

/* layout-header */
.layout-header{ position: relative; z-index: 99; height: 68px; line-height: 68px; box-shadow: 0 1px 3px 0 #d7d7d7; }
.logo img{ margin: 9px 50px 0 0; }
/*nav*/
.nav{ float: left; }
.nav a:link, .nav a:visited{ color: #8B8B8B; }
.nav a:hover{ color: #353B42; text-decoration: none; }
.nav li{ position: relative; float: left; padding: 0 .5em; margin-right: 35px; font-size: 16px; }
.nav li.active a{ color: #353B42; }
.nav li.active:after{ position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; content: ' '; background-color: #353B42; }
/*join-live*/
.join-live{ position: relative; overflow: hidden; float: right; width: 170px; height: 100%; text-align: center; font-size: 16px; color: #fff; background-color: #0083FF; background-image: linear-gradient(90deg, #0083FF 0%, #1B68C3 100%); cursor: pointer; }
.join-live img{ height: 29px; margin: 18px 7px 0 0; }
.join-live:hover{ opacity: .75; text-decoration: none; }

/* live-item */
.live-item{ width: 264px; }
.live-item .hd{ box-sizing: border-box; position: relative; height: 175px; font-size: 0; text-align: center; border: 1px solid #ccc; }
.live-item .hd a{ overflow: hidden; display: block; width: 100%; height: 100%; }
.live-item .hd img, .live-item .hd a:after{ display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
.live-item .hd img{ width: 100%; height: 100%; transition: all .5s ease; }
.live-item .hd a:after{ overflow: hidden; width: 0; height: 100%; content: '.'; }
.live-item .hd .float-layer{ box-sizing: border-box; position: absolute; left: 0; bottom: 0; width: 100%; padding: 8px 10px; font-size: 14px; text-align: left; line-height: 1.6; color: #fff; background: #000; background: rgba(0,0,0,0.65); }
.live-item .hd:hover a img{ transform: scale(1.2,1.2); }
.live-item .bd{ overflow: hidden; margin-top: 5px; }
.live-item .bd .title a:link, .live-item .bd .title a:visited{ color: #000; }
.live-item .bd .title a:hover{ color: #cc0000; text-decoration: none; }
.live-item .fd{ position: relative; height: 32px; margin-top: 10px; line-height: 32px; }
.live-item .fd .text{ width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #919191; }
.live-item .fd .time{ padding-left: 18px; background: url(../img/icon_clock.png) left center no-repeat; }
.live-item .fd .btn{ position: absolute; right: 0; top: 0; width: 90px; height: 30px; text-align: center; line-height: 30px; border-radius: 2px; }
.live-item .fd .btn:link, .live-item .fd .btn:visited{ color: #0076FF; border: 1px solid #0076FF; background-color: #fff; }
.live-item .fd .btn:hover{ color: #fff; background: #0076FF; text-decoration: none; }
.live-item .fd .btn-success:link, .live-item .fd .btn-success:visited{ color: #fff; border: 1px solid #adadad; background-color: #adadad; cursor: default; }
.live-item .fd .btn-success:hover{ color: #fff; background: #adadad; text-decoration: none; }

/* tag-vip */
.tag-vip{ position: relative; overflow: hidden; display: inline-block; height: 20px; padding: 0 .5em; margin-right: 5px; font-weight: normal; font-size: 14px; vertical-align: top; color: #fff; background-color: #F5A623; }
.tag-vip img{ width: auto !important; height: 100% !important; vertical-align: top !important; }
.tag-vip:before{
	content: ""; position: absolute; width: 50px; height: 100%; top: 0; left: 150%;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
	transform: skewX(-30deg);
	animation: inLeft 3s linear infinite;
}

/* tag-live */
.tag-live{ position: absolute; top: 10px; right: 10px; z-index: 9; height: 26px; padding: 0 10px 0 25px; font-size: 14px; line-height: 26px; color: #fff; background: #000; background: rgba(0,0,0,0.65); border-radius: 2px; }
.tag-live:before{ position: absolute; left: 10px; top: 9px; width: 8px; height: 8px; content: ' '; background-color: #FF3E3E; border-radius: 4px; animation: red-dot-blinking 2s linear infinite; }
@keyframes red-dot-blinking
{
	60% { background: #FF3E3E; }
	61% { background: transparent; }
	100% { background: transparent; }
}

/* layout-right-bar */
.layout-right-bar{ position: fixed; right: 0; bottom: 140px; z-index: 99999; }
.tool-btn{ position: relative; display: block; width: 60px; height: 60px; margin: 20px 0 0; text-align: center; background: #ccc; border-radius: 4px; }
.tool-btn a{ display: block; width: 100%; height: 100%; }
.tool-btn a:hover{ color: #fff; text-decoration: none; }
.tool-btn img{ margin-top: 17px; }
.tool-btn .tips{ position: absolute; right: -500px; top: 15px; z-index: -1; padding: 6px 10px; white-space: nowrap; line-height: 18px; color: #fff; background-color: #515151; border-radius: 2px; transition: all 0.4s; }
.tool-btn:hover .tips{ right: 75px; }
.tool-btn .tips:after{ position: absolute; right: -11px; top: 9px; content: ' '; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: transparent transparent transparent #515151; }
.back-top{ display: none; }

/* layout-footer */
.layout-footer{ font-size: 12px; text-align: center; border-top: solid 1px #ddd; }
.layout-footer a:link, .layout-footer a:visited{ color: #333; }

.footer-links{ float: left; padding: 26px 0 0 0; line-height: 24px; }
.copyright{ float: left; padding: 26px 120px 26px 50px; line-height: 24px; color: #666; background: url("//live.ofweek.com/static/web/img/110.gif") right center no-repeat; }
.layout-footer p{ margin-left: 0; }
.foot-wrap{ display: inline-block; *display: inline; *zoom: 1; }

/* join-live */
.join-live-shadow{ display: none; opacity: 0; position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.jls-dialog{ position: absolute; left: 50%; top: 50%; width: 390px; height: 450px; margin: -200px 0 0 -195px; border-top: 3px solid #108EE9; background: url(../img/join_live_bg.png) right bottom no-repeat #fff; animation-duration: 0.5s }
.jls-title{ margin-top: 20px; text-align: center; font-size: 18px; color: #353B42; }
.jls-close{ position: absolute; right: 0; top: -30px; cursor: pointer; }
.jls-close:hover{ transform: rotate(90deg); }
.jls-form{ margin: 0 60px; }
.form-item{ margin: 10px 0 0; }
.form-item .hd{ line-height: 30px; }
.form-item label{ margin-right: 10px; color: #353B42; }
.item-error{ color: #cc0000; }
.form-input{ box-sizing: border-box; width: 100%; height: 34px; padding: 5px 10px; border: 1px solid #EBEBEB; outline: none; }
.form-input:focus{ border-color: #999; }
.form-submit{ display: block; width: 100%; height: 40px; color: #fff; border: 0; background: #108EE9; border-radius: 2px; outline: none; cursor: pointer; }
.form-submit:hover{ opacity: .85; }
.jls-fd{ margin: 20px 60px 0; }
.jls-contact{ line-height: 35px; color: #ABABAB; }
.jls-success{ position: fixed; left: 50%; top: 50%; z-index: 9999; width: 450px; height: 80px; margin: -40px 0 0 -275px; text-indent: 30px; font-size: 16px; text-align: center; line-height: 80px; background: url(../img/right_fill.png) 55px center no-repeat #fff; box-shadow: 0 6px 16px 0 #c9c9c9; border-radius: 6px; }

/* 自定义laydate日期颜色 */
.laydate-theme-color td.layui-this{ background-color: #999 !important; }
.laydate-theme-color td.laydate-selected{ background-color: #eee !important; }

/* animate */
@keyframes rotate
{
	from { transform: rotate(0); }
	to { transform: rotate(360deg); }
}

@keyframes inLeft
{
	0%{ left: -100%; }
	20%{ left: 150%; }
	100%{ left: 150%; }
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}

@keyframes fadeOut {
	0% {
		opacity: 1
	}
	100% {
		display: none;
		opacity: 0
	}
}

.fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
		transform: translateX(-20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}
}

.fadeInLeft {
	display: block;
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft
}

@keyframes fadeOutLeft {
	0% {
		display: block;
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}
	100% {
		display: none;
		opacity: 0;
		-webkit-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
		transform: translateX(-20px)
	}
}

.fadeOutLeft {
	-webkit-animation-name: fadeOutLeft;
	animation-name: fadeOutLeft
}

@keyframes fadeInUp {
	0% {
		display: block;
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		transform: translateY(20px)
	}
	100% {
		display: block;
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0)
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp
}

@keyframes fadeOutDown {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0)
	}
	100% {
		display: none;
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		transform: translateY(20px)
	}
}

.fadeOutDown {
	-webkit-animation-name: fadeOutDown;
	animation-name: fadeOutDown
}

@keyframes slideInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		transform: translateY(20px)
	}

	100% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0)
	}
}

.slideInUp {
	-webkit-animation-name: slideInUp;
	animation-name: slideInUp
}