body {
	font-family: "Droid Sans", Roboto, Arial, sans-serif,;
	background: #000;
	font-size: 0.24rem;
	color: #ffddac;
	padding: 0;
	margin: 0;
}

p{
	margin: 0;
	padding: 0;
	}
	
a{
	color: #ffddac;
	text-decoration: none;
}



.on_left{
	float: left !important;
}
.on_right{
	float: right !important;
}

.on_center{
	margin: 0.2rem auto !important;
}

.t_center{
	text-align: center !important;
}





.t_left{
	text-align: left !important;
}

	
.t_green3{
    color: #66FF00 !important}
	
	
.t_purple{
    color: #FF00FF !important}
	
	
	
/*头部内容卡*/
	
.card_con {
	width: 90%;
	background: linear-gradient(
    to top left,
    #0575E6,
    #5cb811 40%,
    #00dd58 65%,
    #057ee6 100%);
	padding: 2%;
	border-radius: 0.3rem;
	flex-direction: column;
	margin: 3%;
	height: auto;
	text-align: center;
}	
.card_con h1{
	color: #FFF;
	font-size: 0.5rem;
	line-height: 0.7rem;
	margin: 0;
	padding: 0;
    text-shadow: 0 0 0.01rem #fff, 0 0 0.02rem #fff, 0 0 0.03rem #fff, 0 0 0.02rem #74ff77, 0 0 0.04rem #74ff77, 0 0 0.06rem #74ff77, 0 0 0.08rem #74ff77, 0 0 0.1rem #74ff77;
	text-stroke: 1px #f00;
}
.card_con h2{
	font-size: 0.36rem;
	line-height: 0.4rem;
	margin: 0 0 0.1rem 0;
	padding: 0;}
	
	
.card_con h3,.popup h2{
	font-family: "Oswald_Bold";
	font-size: 0.5rem;
	line-height: 0.6rem;
	margin: 0 0 0.1rem 0;
	padding: 0;
	background-image: linear-gradient(#fbeabd 30%, #ffc600 55%, #e4a900 55%, #fff476 90%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;}
	
.card_con p{
	color: #FFF;
	line-height: 0.4rem;
}
.card_con ul{
	height: auto;
	background-color: #333;
	border-radius: 0.3rem;
	padding: 3%;
	margin: 0;
	border: 2px solid #00dd58;
}

.card_con ul li{
	height: auto;
	border-radius: 0.25rem;
	padding: 0.05rem 0.2rem 0.05rem 0.1rem;
	margin: 0.2rem 0 0 0;
	color: #77d42a;
	display: inline-block;
	border: 2px solid #77d42a;
}


.card_con_results{
	text-decoration: underline;
	float: right;
	margin: -0.55rem 0 0 0;
	position: relative;
	z-index: 10;
	color: #FFF;
}




	
/*头部内容卡end*/

/*滚动信息end*/
.winner_scroll{
	width: 100%;
	margin: 0;
	padding: 2% 0;
	overflow: hidden;
	background-color: #2d3e50;	
	
}

.winner_scroll p{
	color: #FFF;
	text-align: left;
	display: inline-block;
	margin: 0 0.1rem;
	float: left;
	white-space: nowrap;
}

/*滚动信息end*/


/*弹出信息*/
.popup_info{
	width: 86%;
	padding: 2%;
	border: 0.02rem solid #ceb45f;
	border-radius:0.16rem;
	box-shadow: 0 0 0.1rem #ffddac, 0 0 0.2rem #ffddac , 0 0 0.3rem #ffddac;
	margin: 5%;
	background-color: #000;	
}

.popup_info h1{
	text-align: center;
	font-size: 0.36rem;
	line-height: 0.48rem;
}


.popup_info h2{
	color: #FFF;
	font-size: 0.30rem;
	text-align: center;
	line-height: 0.4rem;
	font-weight: normal;
}

/*弹出信息end*/













.winnerBox{
    max-width:40rem;
    padding:30px;
    margin: 0;

}



/* 大转盘样式 */
.turnplate_box {
	width: 100%;
	background-size: 100% 100%;
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	background-color: #5cb811;
	background-image: radial-gradient(#0b5100 60.5%, #0f7000 61%, #5cb811 65.2%, #0f7000 65.3%, #0f7000 66%, #5cb811 66.2%, #0f7000 70%);

}


.turnplate_box::before{
	content: "";
	width: 92%;
	height: 92%;
	position: absolute;
	margin: -1.4%;
	padding: 0;
	border-radius: 50%;
	border: 0.4rem dotted #ace624;
	display: block;
	filter: blur(0.06rem);
	z-index: 1;
	animation-name: breath;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes breath {
	from {
		opacity: 1;
	}

	to {
		opacity: 0.2;
	}
}

.turnplate_box::after{
	content: "";
	width: 88.5%;
	height: 88.5%;
	position: absolute;
	margin: -99% 0 0 1.4%;
	padding: 0;
	border-radius: 50%;
	border: 0.3rem dotted #e4ffc9;
	display: block;
	z-index: 1;
	animation-name: light;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}




@keyframes light {
	from {
		filter: blur(0.05rem);
	}

	to {
		filter: blur(0.02rem);
	}
}

.turnplate_box span::after {
	content: "";
	width: 80%;
	height: 80%;
	position: absolute;
	margin: -93% 0 0 7%;
	padding: 0;
	border-radius: 50%;
	border: 0.2rem solid #000;
	display: block;
	opacity: 0.2;
	z-index: 1;
}


.turnplate_box canvas {
    margin: 7.5%;
    width: calc(100% - 15%);
    height: calc(100% - 15%);
    /*position: absolute;*/
    border-radius: 50%;
    z-index: 10;
    flex-shrink: 0;
}




#myCanvas {
    background-color: white;
    border-radius: 100%;
    /*transition: transform 6s;*/
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    overflow: hidden;
}





.turnplatw_btn {
	width: 30%;
	height: 30%;
	left: 35%;
	top: 35%;
	border-radius: 100%;
	position: absolute;
	cursor: pointer;
	outline: none;
	z-index: 40;
	border-radius: 50%;
	background:linear-gradient(to bottom, #5cb811 5%, #268a16 100%);
	background-color:#5cb811;
	padding: 0.25rem;
	box-shadow: 0 0.05rem 0 #caefab inset, 0 -0.06rem 0.02rem #426d04 inset, 0 0 0 0.1rem rgba(0,0,0,0.3);	

}



.turnplatw_btn::after {
	content: "";
	position: relative;
	display: inline-block;
	margin: -150% 0 0 0;
	border-style: solid;
	border-width: 0 0.35rem 0.7rem 0.35rem;
	border-color: transparent transparent #5cb811 transparent;
	z-index: 40;
}

.turnplatw_btn::before{
	content: "";
	position: relative;
	display: inline-block;
	margin: -63% 0 0 0;
	border-style: solid;
	border-width: 0 0.4rem 0.8rem 0.4rem;
	border-color: transparent transparent rgba(0,0,0,0.3) transparent;
	z-index: -10;
}

.inner {
	font-family: "Oswald_Bold";
	font-size: 0.5rem;
	line-height: 1.5rem;
	text-align: center;
	color: #fff;
	font-weight: bold;
  text-shadow: 0 0 0.08rem rgba(0, 0, 0, 0.8),0 0 0.02rem rgba(0, 0, 0, 0.8);
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:linear-gradient(to bottom, #268a16 5%, #5cb811 100%);
  background-color: #268a16;
  display: block;
}





/* 大转盘样式end */






/*提示文案 */

.prompt{
	text-align: center;
	width: 100%;
}

.prompt p{
	color: #fff;
	font-size: 0.3rem;
	text-align: center;
	text-shadow: 0 0 0.01rem #fff, 0 0 0.02rem #fff, 0 0 0.04rem #ceb45f, 0 0 0.06rem #ceb45f, 0 0 0.08rem #ceb45f, 0 0 0.1rem #ceb45f, 0 0 0.2rem #ffddac, 0 0 0.3rem #ffddac, 0 0 0.4rem #ffddac, 0 0 0.5rem #ffddac;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0.05rem;
	display: inline;
	}

/*提示文案end*/


/*按钮*/

.button01 {
	font-size: 0.48rem;
	margin: 0.5rem auto 0.5rem auto;
	cursor: pointer;
	touch-action: manipulation;
	position: relative;
    border: 1px solid #51822d;
	border-radius: 0.8rem;
	padding: 0.4rem 1rem;
	background-color: #42830e;
	background-image: radial-gradient(75% 50% at 50% 0, #bdff56, transparent), radial-gradient(75% 35% at 50% 80%, #8ad56a, transparent);
	box-shadow: inset 0 -2px 4px 1px rgb(112 170 74 / 60%), inset 0 -4px 4px 1px #9bdf72, inset 0 0 2px 1px rgba(255, 255, 255, 0.2), 0 1px 4px 1px rgb(97 145 56 / 20%), 0 2px 4px 1px rgba(0, 0, 0, 0.5), 0 0 1rem rgb(0 0 0);
	color: #fff;
	text-shadow: 0 0.03rem 0.01rem #5f822d;
	transition-property: border-color,transform,background-color;
	transition-duration: .2s;
	display: block;
}

.button01::after {
    content: "";
    position: absolute;
    top: 0.01rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.8rem;
    width: 80%;
    height: 40%;
    background-image: linear-gradient(to bottom,#77d42a,transparent);
    opacity: .75
}

.button01:hover {
    transform: scale(1.04)
}

.button01:active {
    transform: scale(1);
}




.card_btn1,.card_btn2,.share_btn {
	font-size: 0.3rem;
	line-height: 0.8rem;
	text-align: center;
	width: 80%;
	margin: 0.2rem auto 0 auto;
	border-radius: 0.12rem;
	font-weight: 800;
}


.card_btn1 {
    color:#306108;
	border:0.02rem solid #268a16;
    box-shadow:inset 0px 0.05rem 0px 0px #caefab,inset 0px -0.05rem 0px 0px  #268a16;
	background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
	background-color:#77d42a;
	text-shadow:0 0.02rem 0px #aade7c;
}

.card_btn2 {
    color:#6d7673;
	text-shadow:0px 0.02rem 0px #bec3c7;
	border:0.02rem solid #6d7673;
	background:linear-gradient(to bottom, #bec3c7 5%, #95a5a5 100%);
	background-color:#95a5a5;
}

.share_btn {
	font-size: 0.4rem;
	line-height: 1rem;
    color:#00559e;
	border:0.02rem solid #266aac;
    box-shadow:inset 0px 0.05rem 0px 0px #70b6f3,inset 0px -0.05rem 0px 0px  #266aac;
	background:linear-gradient(to bottom, #46a1ef 5%, #057ee6 100%);
	background-color:#057ee6;
	text-shadow:0px 0.02rem 0px #70b6f3;
}
.join_btn {
	font-size: 0.24rem;
	line-height: 0.5rem;
	text-align: center;
	width: 80%;
	margin: 0.2rem auto;
	border-radius: 0.12rem;
	border: 0.02rem solid #ffddac;
}


/*按钮end*/

/*列表*/

.task_box{
	width: 90%;
	margin: 0;
	padding: 5%;
	background-color: rgba(0,63,128, 1);
    background: linear-gradient(to bottom, rgba(0,0,0, 0), rgba(0,0,0, 0.6) 10%, #000 50%, #000 95%);}
	


/*中奖*/
.winning_list{	width: 100%;
	margin: 0;
	padding: 0;}
	
.winning_list li{
	width: 94%;
	border-radius: 0.16rem;
	background-color: #324559;
	margin: 0 0 0.1rem 0;
	padding: 3%;
	height: auto;
	display: inline-block;
}

.winning_list li p:nth-child(1){
	float: left;
}
.winning_list li p:nth-child(2){
	font-family: "Oswald_Bold";
	margin-left: 0.1rem;
	float: right;
}
.winning_list li p:nth-child(3){
	float: right;
}
/*中奖end*/











/*表格*/

.winner_table, .winner_table table{margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;

}

.winner_table table th{
	font-weight: bold;
	color: #ceb45f;
	text-align: center;
	padding: 0.15rem 0.08rem;
	background-color: #000 !important;
}

.winner_table table tr:nth-child(odd){
	background-color: #2d3e50;
}
.winner_table table tr:nth-child(even){
	background-color: #324559;
}
.winner_table table td{
	color: #fff;
	text-align: center;
	font-weight: normal;
	padding: 0.15rem 0.08rem;
}

.winner_table table td:nth-child(1){
    font-size: 0.18rem;
}


/*表格END*/





/*弹窗*/

.popup_box{
	width: 85%;
	height: auto;
	margin: 1rem auto;
	padding: 0;
	border: solid 4px transparent;
	border-radius: 0.16rem;
	background-color: #000;
	background-image: linear-gradient(#000, #000),
    linear-gradient(130deg, #dfc572 0%, #916c38 50%, #825c2d 50.1%, #aa884a 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	text-align: center;
	overflow: hidden;
}

.popup{
	width:90%;
	height: auto;
	border-radius: 12px;
	display: block;
	padding: 5%;
	margin: 0 auto;
}

.popup h1{
	font-size: 0.3rem;
	line-height: 0.4rem;
	margin: 0.1rem 0;
	font-weight: normal;
}


.popup p{
	line-height: 0.32rem;
	margin: 0;
	color: #FFF;
}

.popup_close{
	height: 0.8rem;
	width: 0.8rem;
	border-radius: 50%;
	background-color: #000;
	border: solid 4px transparent;
	background-image: linear-gradient(#000, #000),
    linear-gradient(130deg, #dfc572 0%, #916c38 50%, #825c2d 50.1%, #aa884a 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	margin-top: -0.4rem;
	text-align: center;
	position: absolute;
	display: block;
	z-index: 2;
	margin-left: 78%;
}
.popup_close span{
	display: inline-block;
	width: 0.6rem;
	height: 0.08rem;
	background-color: #aa884a;
	background-image: linear-gradient(130deg, #dfc572 0%, #916c38 50%, #825c2d 50.1%, #aa884a 100%);
	transform: rotate(45deg);
	margin-top: 0.355rem;
    }

.popup_close span::after {
        content: '';
        display: block;
        width: 0.6rem;
        height: 0.08rem;
        background-color: #aa884a;
	background-image: linear-gradient(130deg, #dfc572 0%, #916c38 50%, #825c2d 50.1%, #aa884a 100%);
        transform: rotate(-90deg);
}


/*弹窗END*/

/*引导*/


.hint{
	width: 70%;
	padding: 3% 5%;
	margin: -6rem 10% 0 10%;
	border-radius: 0.18rem;
	border: 0.02rem solid #ceb45f;
	border-radius: 0.16rem;
	box-shadow: 0 0 0.1rem #ffddac, 0 0 0.2rem #ffddac, 0 0 0.3rem #ffddac;
	background-color: #000;
	z-index: 40;
	position: absolute;
}






.hint:before {
	content: "";
	position: absolute;
	margin-top: 0.95rem;
	margin-left: -0.4rem;
	left: 50%;
	border: 0.4rem solid transparent;
	border-top: 0.4rem solid #000;
	z-index: 2;

		}

.hint:after {
			content: "";
			position: absolute;
			margin-top:0.23rem;
			margin-left: -0.405rem;
			left: 50%;
			border: 0.41rem solid transparent;
			border-top: 0.41rem solid #ffddac;
			z-index: 1;
		}

.hint p{
	line-height: 0.40rem;
	margin: 0;
	padding: 0;
	text-align: center;
}



.hand{
	margin: -3.6rem 0 0 50%;
	height: auto;
	width: 0.8rem;
	position: absolute;
	z-index: 40;
	left: -0.4rem;
}
/*引导END*/


/*背景动画*/
.boxbg {
	position: absolute;
	inset: 0;
  --c: 0.08rem;
	background-color: #000;
	background-image: radial-gradient(
      circle at 50% 50%,
      #0000 0.02rem,
      #000 0 var(--c),
      #0000 var(--c)
    ),
    radial-gradient(
      circle at 50% 50%,
      #0000 0.02rem,
      #000 0 var(--c),
      #0000 var(--c)
    ),
    radial-gradient(circle at 50% 50%, #f00, #f000 60%),
    radial-gradient(circle at 50% 50%, #ff0, #ff00 60%),
    radial-gradient(circle at 50% 50%, #0f0, #0f00 60%),
    radial-gradient(ellipse at 50% 50%, #00f, #00f0 60%);
	background-size:
    0.13rem 0.22rem,
    0.13rem 0.22rem,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 0.22rem;
  --p: 0px 0px, 0.06rem 0.11rem;
	background-position:
    var(--p),
    0% 0%,
    0% 0%,
    0% 0rem;
	animation:
    wee 40s linear infinite,
    filt 6s linear infinite;
	height: 220vw;
	z-index: -1;
}

@keyframes filt {
  0% {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
  
}

@keyframes wee {
  0% {
    background-position:
      var(--p),
      800% 400%,
      1000% -400%,
      -1200% -600%,
      400% 0.42rem;
  }
  to {
    background-position:
      var(--p),
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%;
  }
}
/*背景动画End*/