/*-----------------------------------------*/
/***********公用样式**************/
/*-----------------------------------------*/
.clear-both::after {
	clear:both;
	content:".";
	display:block;
	visibility:hidden;
	height:0;
}
.lf {
	float:left;
}
.rt {
	float:right;
}
.transition {
	-webkit-transition:all .5s ease;
	-o-transition:all .5s ease;
	-moz-transition:all .5s ease;
	transition:all .5s ease;
}
.transform-scale {
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}
.hover-transform-scale {
	-webkit-transform:scale(1.05);
	-moz-transform:scale(1.05);
	-ms-transform:scale(1.05);
	transform:scale(1.05);
}
.ellipsis {
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	vertical-align:middle;
}
.text-ban {
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	-khtml-user-select:none;
	user-select:none;
}
.track-list {
	scrollbar-face-color:#c7c7c7;
	scrollbar-highlight-color:#c7c7c7;
	scrollbar-3dlight-color:#c7c7c7;
	scrollbar-darkshadow-color:#c7c7c7;
	scrollbar-Shadow-color:#c7c7c7;
	scrollbar-arrow-color:#c7c7c7;
	scrollbar-track-color:#ebebeb;
}
.track-list::-webkit-scrollbar {
	width:7px;
	height:9px;
}
.track-list::-webkit-scrollbar-button:end:increment,.track-list::-webkit-scrollbar-button:start:decrement {
	display:block;
	height:0;
	background-color:transparent;
}
.track-list::-webkit-scrollbar-track-piece {
	-webkit-border-radius:0;
	-webkit-border-bottom-right-radius:4px;
	-webkit-border-bottom-left-radius:4px;
	background:#ebebeb;
}
.track-list::-webkit-scrollbar-thumb:vertical {
	height:50px;
	background-color:rgba(0,0,0,0.4);
	-webkit-border-radius:4px;
}
.track-list::-webkit-scrollbar-thumb:horizontal {
	width:50px;
	background-color:rgba(0,0,0,0.2);
	-webkit-border-radius:4px;
}
/*-----------------------------------------*/
/***********元素样式**************/
/*-----------------------------------------*/
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
	color:#fff;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	background:#eff3f5;
	background:-webkit-linear-gradient(left,#f6ad36,#cf5a5d);
	/* Safari 5.1 - 6.0 */
    background:-o-linear-gradient(right,#f6ad36,#cf5a5d);
	/* Opera 11.1 - 12.0 */
    background:-moz-linear-gradient(right,#f6ad36,#cf5a5d);
	/* Firefox 3.6 - 15 */
    background:linear-gradient(to right,#f6ad36,#cf5a5d);
	/* 标准的语法 */
}
/** 清除内外边距 **/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	margin:0;
	padding:0;
}
/* 重设 HTML5 标签,IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1;
}
/* 要注意表单元素并不继承父级 font 的问题 */
input,select,textarea {
	font-size:100%;
}
/* 去掉各 table cell 的边距并让其边重合 */
table {
	border-collapse:collapse;
	border-spacing:0;
}
/* IE bug fixed:th 不继承 text-align */
th {
	text-align:inherit;
}
/* 去除默认边框 */
fieldset,img {
	border:0;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
	display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
	border:0;
	font-variant:normal;
}
/* 一致的 del 样式 */
del {
	text-decoration:line-through;
}
i {
	font-style:normal;
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:500;
}
/* 对齐是排版最重要的因素,别让什么都居中 */
caption,th {
	text-align:left;
}
/* 来自yahoo,让标题都自定义,适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:500;
}
h1 {
	font-size:24px;
}
h2 {
	font-size:16px;
}
h3,h4,h5,h6 {
	font-size:14px;
}
/* 解决ie下重复最后字符 */
q:before,q:after {
	content:'';
}
/* 统一上标和下标 */
sub,sup {
	position:relative;
	font-size:75%;
	line-height:0;
	vertical-align:baseline;
}
sup {
	top:-0.5em;
}
sub {
	bottom:-0.25em;
}
/* 默认不显示下划线，保持页面简洁 */
ins,a {
	text-decoration:none;
}
/** 设置默认字体 **/
body,button,input,select,textarea {
	font:14px helvetica neue,arial,hiragino sans gb,microsoft yahei,sans-serif;
}
address,cite,dfn,em,var {
	font-style:normal;
}
/* 将斜体扶正 */
code,kbd,pre,samp {
	font-family:courier new,courier,monospace;
}
/* 统一等宽字体 */
small {
	font-size:12px;
}
/* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul,ol {
	list-style:none;
}
/** 重置文本格式元素 **/
a {
	text-decoration:none;
	cursor:pointer;
	color:#333;
	-webkit-transition:all .5s ease;
	-o-transition:all .5s ease;
	-moz-transition:all .5s ease;
	transition:all .5s ease;
}
a:hover {
	color:#9ebee7;
}
/** 清除选中状态蓝色边框 **/
a,img,input,select,textarea {
	outline:none;
	border:none;
}
/** 定义布局方式 **/
* {
	box-sizing:border-box;
}
input[type=submit] {
	-webkit-appearance:none;
}
/**************************/
/********页面样式***********/
/**************************/
html,body {
	width:100%;
	height:100%;
	overflow:hidden;
}
body {
	min-width:1000px;
	margin:0 auto;
	background-size:100% auto;
}
.begin-btn {
	position:fixed;
	bottom:50px;
	left:50%;
	width:240px;
	margin-left:-120px;
	height:40px;
	line-height:40px;
	font-size:16px;
	font-weight:bold;
	border-radius:5px;
	color:#fff;
	background-color:#e4393c;
	box-shadow:2px 3px 8px rgba(0,0,0,0.8);
	text-align:center;
}
.begin-btn:hover {
	color:#fff;
}
.luckyDraw {
	position:fixed;
	top:50%;
	left:50%;
	width:600px;
	height:428px;
	margin-top:-214px;
	margin-left:-300px;
	border-radius:5px;
	background-color:#fff;
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	overflow:hidden;
	z-index:9999;
}
.luckyDraw .title {
	height:50px;
	line-height:50px;
	font-size:18px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	background:#eff3f5;
	background:-webkit-linear-gradient(left,#f6ad36,#cf5a5d);
	/* Safari 5.1 - 6.0 */
    background:-o-linear-gradient(right,#f6ad36,#cf5a5d);
	/* Opera 11.1 - 12.0 */
    background:-moz-linear-gradient(right,#f6ad36,#cf5a5d);
	/* Firefox 3.6 - 15 */
    background:linear-gradient(to right,#f6ad36,#cf5a5d);
	/* 标准的语法 */
    position:relative;
}
.luckyDraw .title a {
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:50px;
	height:50px;
	font-size:12px;
	color:#fff;
}
.luckyDraw .draw {
	position:relative;
	height:200px;
	font-size:40px;
	font-weight:bold;
	text-align:center;
	color:#e4393c;
}
.luckyDraw .draw > div {
	position:absolute;
	top:30px;
	bottom:30px;
	line-height:140px;
	width:100%;
}
.luckyDraw .speed {
	width:100%;
	padding-top:40px;
	line-height:20px;
	font-size:14px;
	color:#333;
	text-align:center;
}
.luckyDraw .speed span {
	font-size:16px;
	font-weight:bold;
}
.luckyDraw .speed .cover {
	display:inline-block;
	width:240px;
	margin:0 10px;
	vertical-align:top;
	position:relative;
}
.luckyDraw .speed em {
	position:absolute;
	bottom:-20px;
	width:50px;
	margin-left:-25px;
}
.luckyDraw .speed input {
	width:100%;
}
.luckyDraw .btn-box {
	text-align:center;
}
.luckyDraw .btn-box a {
	display:inline-block;
	width:180px;
	height:40px;
	margin:0 20px;
	font-size:16px;
	font-weight:bold;
	line-height:40px;
	border-radius:3px;
	color:#fff;
	background-color:#e4393c;
}
/**********************************/
/**以下代码结合vue transition的name使用**/
/**********************************/

/**数字变化的动画**/
.out-in-enter {
	-webkit-transform:translateY(30px);
	-moz-transform:translateY(30px);
	-ms-transform:translateY(30px);
	-o-transform:translateY(30px);
	transform:translateY(30px);
	opacity:0;
}
.out-in-leave-to {
	-webkit-transform:translateY(-30px);
	-moz-transform:translateY(-30px);
	-ms-transform:translateY(-30px);
	-o-transform:translateY(-30px);
	transform:translateY(-30px);
	opacity:0;
}
.out-in-enter-active,.out-in-leave-active {
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;
}
/**弹框出现隐藏的动画**/
.bounce-enter-active {
	animation:bounce-in .5s;
}
.bounce-leave-active {
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
	transition:all .5s;
}
.bounce-leave-to {
	opacity:0;
	height:0;
}
@keyframes bounce-in {
	0% {
	transform:translateX(9%);
}
16.6% {
	transform:translateX(-9%);
}
33.33% {
	transform:translateX(6%);
}
50% {
	transform:translateX(-6%);
}
66.6% {
	transform:translateX(3%);
}
83.33% {
	transform:translateX(-3%);
}
100% {
	transform:translateX(0);
}
}