/*
 * =====================================================
 * 页面公共样式、主体样式
 * =====================================================
 */

/*初始化类*/
@charset "UTF-8";

html {
	font-family: "微软雅黑", Tahoma, Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
	background: #ffffff;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	padding: 0;
	line-height: normal;
	-webkit-overflow-scrolling: touch;
	font-size: 0.28rem;
}

.show {
	opacity: 1;
}

img {
	border: 0;
	display: block;
}

*:focus {
	outline: medium;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: block;
}

a {
	background: transparent;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

h1 {
	font-size: 0.28rem;
	color: #333333;
}

ol,
ul,
li {
	list-style: outside none none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a:active {
	color: none;
}

a {
	color: #808080;
}

select,
textarea,
input,
button {
	display: block;
	border-radius: 0.10rem;
	width: 100%;
	color: #666666;
	margin: 0.20rem 0;
	border: 1px solid #ececec;
	font-size: 0.28rem;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-appearance: none !important;
}

input,
textarea {
	padding: 0.20rem;
}

/*主样式*/
.music {
	width: 0.60rem;
	height: 0.60rem;
	position: absolute;
	top: 0.44rem;
	right: 2rem;
	background: url(https://start20190601.oss-cn-qingdao.aliyuncs.com/hongbao/huaxia/20220518/images/music.png) no-repeat center center;
	background-size: 1.20rem 0.60rem;
	-webkit-background-size: 1.20rem 0.60rem;
	z-index: 10;
	-webkit-user-select: none;
}

.music-play {
	background-position: 0 0;
}

.music-pause {
	background-position: -0.60rem 0;
}

.hidden {
	visibility: hidden;
	opacity: 0;
}

.content {
	width: 7.50rem;
	height: 13.34rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6.67rem 0 0 -3.75rem;
	z-index: 1;
	overflow: hidden;
}

[v-cloak] {
	display: none;
}

.mask {
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	flex-direction: column;
	-webkit-flex-direction: column;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 1000;
}
.wmask{
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	flex-direction: column;
	-webkit-flex-direction: column;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 1000;
}
.btn:active {
	transform: scale(0.95);
	-webkit-transform: scale(0.95);
}

.page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.pull-left {
	float: left !important;
}

.pull-right {
	float: right !important;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: ' ';
}

.clearfix:after {
	clear: both;
}

.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ellipsis2 {
	display: -webkit-box;
	overflow: hidden;
	white-space: normal !important;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ellipsis3 {
	display: -webkit-box;
	overflow: hidden;
	white-space: normal !important;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.dcenter {
	margin-left: auto;
	margin-right: auto;
}

.icon {
	display: inline-block;
}

/*解决移动端1px边框变粗样式*/
.border-t,
.border-b,
.border-l,
.border-r,
.border-tb,
.border {
	position: relative;
}

.header:after,
.border-t:after,
.border-b:after,
.border-l:after,
.border-r:after,
.border-tb:after,
.border:after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(1);
	pointer-events: none;
}

.header:after {
	border-bottom: 1px solid #8c8c8c;
}

.border-l:after {
	border-left: 1px solid #c8c7cc;
}

.border-r:after {
	border-right: 1px solid #c8c7cc;
}

.border-t:after {
	border-top: 1px solid #c8c7cc;
}

.border-b:after {
	border-bottom: 1px solid #ededed;
}

.border-tb:after {
	border-top: 1px solid #c8c7cc;
	border-bottom: 1px solid #c8c7cc;
}

.border:after {
	border: 1px solid #c8c7cc;
}

.border.border-radius:after {
	border-radius: 6px;
}

@media screen and (-webkit-min-device-pixel-ratio:1.5) {

	.header:after,
	.border-t:after,
	.border-b:after,
	.border-l:after,
	.border-r:after,
	.border-tb:after,
	.border:after {
		right: -100%;
		bottom: -100%;
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
	}
}

::-webkit-input-placeholder {
	color: rgb(218, 218, 218);
	font-size: 0.28rem;
}

::-moz-placeholder {
	color: rgb(218, 218, 218);
	font-size: 0.28rem;
}

::-moz-placeholder {
	color: rgb(218, 218, 218);
	font-size: 0.28rem;
}

:-ms-input-placeholder {
	color: rgb(218, 218, 218);
	font-size: 0.28rem;
}

/*开关*/
.switch {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	width: 1rem;
	height: 0.5rem;
	border: 1px solid #DFDFDF;
	outline: 0;
	border-radius: 0.05rem;
	box-sizing: border-box;
	background: #cccccc;
	padding: 1px;
}

.switch:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 0.46rem;
	border-radius: 0.05rem;
	background-color: #FDFDFD;
	-webkit-transition: -webkit-transform .3s;
	transition: -webkit-transform .3s;
	transition: transform .3s;
	transition: transform .3s, -webkit-transform .3s;
}

.switch:after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 0.46rem;
	border-radius: 0.05rem;
	background-color: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	-webkit-transition: -webkit-transform .3s;
	transition: -webkit-transform .3s;
	transition: transform .3s;
	transition: transform .3s, -webkit-transform .3s;
}

.switch:checked {
	border-color: #fa3445;
	background-color: #fa3445;
}

.switch:checked:before {
	-webkit-transform: scale(0);
	transform: scale(0);
}

.switch:checked:after {
	-webkit-transform: translateX(0.48rem);
	transform: translateX(0.48rem);
}

/***********animation************/
.rotate360 {
	animation: rotate360 10s infinite linear;
	-webkit-animation: rotate360 10s infinite linear;
}

@-webkit-keyframes rotate360 {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}

@keyframes rotate360 {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}

/***********loading************/
.loadingbox {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

.loadings {
	width: 100px;
	height: 100px;
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 999;
	border-radius: 10px;
	margin: -50px 0 0 -50px;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	flex-direction: column;
	-webkit-flex-direction: column;
	color: #ffffff;
}

.weui-loading {
	width: 60px;
	height: 60px;
	display: inline-block;
	vertical-align: middle;
	-webkit-animation: weuiLoading 1s steps(12, end) infinite;
	animation: weuiLoading 1s steps(12, end) infinite;
	background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
	background-size: 100%;
}

.weui-loading.weui-loading_transparent,
.weui-btn_loading.weui-btn_primary .weui-loading,
.weui-btn_loading.weui-btn_warn .weui-loading {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
}

@-webkit-keyframes weuiLoading {
	0% {
		transform: rotate3d(0, 0, 1, 0deg);
	}

	100% {
		transform: rotate3d(0, 0, 1, 360deg);
	}
}

@keyframes weuiLoading {
	0% {
		transform: rotate3d(0, 0, 1, 0deg);
	}

	100% {
		transform: rotate3d(0, 0, 1, 360deg);
	}
}

/*loading*/
.loading{
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 0.48rem;
	padding: 0 0 50px 0;
}

.loadText{
	font-size: 20px;
	position: absolute;
}
.sk-chase {
  width: 80px;
  height: 80px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}
 
.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}
 
.sk-chase-dot:before {
  content: '';
  display: block;
  width: 15%;
  height: 15%;
  background-color: #e21818;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}
 
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
 
@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}
 
@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}
 
@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}