@charset "utf-8";

.blackbarnew {
top:0;
left:0;
width:100%;
height:30px;
padding:0 10px;
background-color:#000;
position:fixed;
z-index:999;
overflow:hidden
}

.yeslogo {
font-size:12px;
color:#fff;
line-height:30px;
letter-spacing:2px;
float:left
}

.yeslogo i {
margin-right:8px;
float:left
}

.yeslogo i img {
width:10px;
margin-top:10px
}

.yesgogo {
font-size:12px;
color:#fff;
line-height:30px;
letter-spacing:2px;
float:right
}

.yesyes {
font-size:15px;
color:#fff;
font-weight:700;
line-height:30px;
letter-spacing:1px;
margin-right:4px
}

body {
background-color:#fff
}

.bg {
background-image:url(../img/bg.jpg);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
overflow:hidden;
position:fixed;
z-index:-1;
top:30px;
right:0;
bottom:0;
left:0
}

.foctop {
width:100%;
position:relative;
overflow:hidden;
margin-top:30px
}

.bf {
max-width:800px;
margin:0 auto -16px;
position:relative;
text-align:center
}

.bf img {
max-width:800px;
top:-16px;
}

.bf {
position:relative;
z-index:99
}

.page {
max-width:800px;
margin:0 auto;
padding:20px 24px;
position:relative;
z-index:888;
background-color:#fffeef;
border-radius:8px;
margin-bottom:40px;
border:0 solid #666;
max-height: 800px;
overflow: hidden;
}



@media screen and (max-width: 980px) {
.page {
width:calc(100%);
border-radius:0;
margin-bottom:0;
border:0 solid #666
}

.foctop {
width:100%
}

.bg {
bottom:auto;
height:60vh
}

.bf {
margin:0 auto -3px
}
}

@media screen and (max-width: 736px) {
.page {
padding:20px 16px 90px;
margin-bottom: 72px;
}

.foctop {
height:288px
}

.bf img {
top:-8px
}
}

@media screen and (max-width: 320px) {
.bf img {
top:-0
}
}

.share {
width:40px;
position:absolute;
top:12px;
right:8px;
z-index:888
}

.share > ul > li {
margin-bottom:4px
}

.share > ul > li:nth-child(2) {
display:none
}

.share > ul > li:last-child {
margin-bottom:0
}

@media screen and (max-width: 980px) {
.share > ul > li:nth-child(2) {
display:block
}

.share {
width:44px
}
}

@media screen and (max-width: 736px) {
.share {
width:32px
}
}

.ro01 {
position:absolute;
top:12em;
left:2em;
z-index:0;
max-width:500px;
transition:all .3s
}

.ro02 {
position:absolute;
top:12em;
right:2em;
z-index:0;
max-width:500px;
transition:all .3s
}

@media screen and (max-width: 1680px) {
.ro01 {
top:12em;
left:0;
z-index:0;
max-width:380px
}

.ro02 {
top:12em;
right:0;
z-index:0;
max-width:380px
}
}

@media screen and (max-width: 1280px) {
.ro01 {
top:8em;
left:-1em;
z-index:0;
max-width:340px
}

.ro02 {
top:8em;
right:0;
z-index:0;
max-width:340px
}
}

@media screen and (max-width: 1024px) {
.ro01 {
top:8em;
left:-7em;
z-index:0;
max-width:340px
}

.ro02 {
top:8em;
right:-6em;
z-index:0;
max-width:340px
}
}

@media screen and (max-width: 980px) {
.ro01 {
top:2em;
left:-.2em;
z-index:0;
max-width:190px;
display: none;
}

.ro02 {
top:2em;
right:-.2em;
z-index:0;
max-width:190px;
display: none;
}
}



@media screen and (max-width: 736px) {
.ro01 {
top:auto;
bottom:-2.1em;
left:1.5em;
z-index:0;
max-width:140px;
display: block;
}

.ro02 {
top:auto;
bottom:-2em;
right:1.5em;
z-index:0;
max-width:140px;
display: block;
}
}

.cbg {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:0;
background-image:url(../img/bg.png);
background-repeat:no-repeat;
background-position:center bottom;
background-size:cover;
overflow:hidden
}





@media screen and (max-width: 980px) {
.cbg {
position:absolute;
bottom:auto;
right:auto
}
}

@media screen and (max-width: 736px) {
.cbg {
background-size:120%
}
}

.canvas-holder {
display:block;
width:100%;
height:100%;
position:relative;
z-index:2
}

.phone {
float:left;
opacity:0;
display:none
}

.tablet {
float:left;
opacity:0;
display:none
}

.small-desktop {
float:left;
opacity:0;
display:none
}

.large-desktop {
float:left;
opacity:0;
display:none
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
.phone {
float:none
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.tablet {
float:none
}
}

@media only screen and (min-width: 1025px) and (max-width: 1600px) {
.small-desktop {
float:none
}
}

@media only screen and (min-width: 1601px) {
.large-desktop {
float:none
}
}

canvas {
width:100%;
height:100%;
display:block
}

#info {
display:none
}

.box01 {
width:100%;
position:relative;
z-index:888;
margin-bottom:20px
}

.gogo {
width:100%;
max-width: 280px;
height:48px;
line-height:48px;
text-align:center;
background-color:#9702ff;
border-radius:8px;
margin:0 auto;
cursor:pointer;
transition:all .3s
}

.gogo p {
color:#fff;
font-size:28px;
font-weight:700
}

.gogo:hover {
background-color:#8200dc
}



@media screen and (max-width: 736px) {

.gogo {max-width: 300px;}

}


.box02 {
width:100%;
margin-bottom:30px
}

.box02 > h1 {
font-size:20px;
font-weight:700;
color:#ff018a;
margin-bottom:12px;
}

.box02 > h2 {
font-size:16px;
color:#333;
margin-bottom:12px;
line-height: 1.5;
}

.box02 table {
width:100%;
line-height:1.5;
margin-bottom:20px
}

.box02 tr {
border-bottom:1px solid #999
}

.box02 tr:nth-child(1) td {
font-size:16px;
color:#666
}

.box02 td {
font-size:16px;
padding:8px 0
}

.box02 td:nth-child(1) {
text-align:left
}

.box02 td:nth-child(2) {
color:#ff4e1a;
padding:8px
}

.box02 td:nth-child(3) {
white-space:nowrap;
color:#22ac39
}

.box03 {
width:100%;
margin-bottom: 32px;
}

.box03 > h1 {
font-size:20px;
font-weight:700;
color:#ff018a;
margin-bottom:12px
}

.box03 > p {
font-size:16px;
color:#333;
margin-bottom:12px;
line-height: 1.5;
}

.box03 > ul {
padding-left:24px
}

.box03 > ul > li {
margin-bottom:8px;
font-size:16px;
line-height:1.5;
list-style:decimal
}

.box03 > ul > li:last-child {
margin-bottom:0
}

.mob {
display:none
}

.web {
display:block
}

@media screen and (max-width: 980px) {
.web {
display:none
}

.mob {
display:block
}
}

@media screen and (max-width: 736px) {
.fx {
width:100%;
position:fixed;
z-index:999;
bottom:0;
left:0;
padding:12px 0;
background-color:rgba(255,247,150,0.5)
}
}

.popup {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background-color:rgba(0,0,0,0.8);
display:none
}

.popbox {
position:absolute;
top:20%;
left:50%;
width:300px;
text-align:center;
padding:24px 16px 10px;
margin:0 0 0 -150px;
background-color:#fff
}

.popbox h1 {
font-size:24px;
margin-bottom:0
}

.close {
width:40px;
height:40px;
position:absolute;
top:0;
right:0;
z-index:99;
background-color:#666;
cursor:pointer
}

@media screen and (max-width: 980px) {
.popup {
display:none
}
}

.red {
font-size:22px;
color:#FF4D50
}

.m01 {
width:100%;
padding:12px 16px;
border-radius:6px;
background-color:#fff;
margin-bottom:20px;
border:2px solid #ff018a;
position: relative;
}

.m01 ul {
overflow:hidden
}

.m01 ul li {
float:left;
line-height:36px
}

.m01 ul li:nth-child(1) {
width:84px;
vertical-align:bottom;
font-size:16px;
color: #666;
}

.m01 ul li:nth-child(2) {
width:calc(100% - 84px);
font-size:34px;
font-weight: bold;
color:#ff018a
}




.copy{width: 80px; 
	height: 32px; 
	line-height: 32px; 
	text-align: center; 
	border-radius: 6px; 
	font-size: 16px; color: #fff; 
	background-color: #ff018a; 
	position: absolute; right: 14px; top:14px; z-index: 8; cursor: pointer;}


.wbg {
background-color:#eee;
margin-bottom:30px
}

.wbg ul li:nth-child(2) {
color:#666
}


.red2{color: #D00003;}




@media screen and (max-width: 736px) {
.m01 ul li:nth-child(2) {
font-size:32px;
}

.copy{width: 72px; 
	height: 32px; 
	line-height: 32px; 
	font-size: 14px;
	}


}



@media screen and (max-width: 320px) {
.copy{width: 60px; 
	height: 32px; 
	line-height: 32px; 
	font-size: 12px;
	right: 8px; top:14px;}

.m01 ul li:nth-child(2) {
font-size:30px;
}

}



#lucky2{display: none;}




.more{width: 100%; height: 80px; line-height: 110px; position: absolute; left: 0; bottom: 0;
 z-index: 88; background-image: url(../img/more.png); background-position: center; background-repeat: no-repeat; background-size: cover;
text-align: center; overflow: hidden; cursor: pointer; font-size: 16px;}


.pageopen{max-height: none; }


@media screen and (max-width: 736px) {

.pageopen{max-height: none; margin-bottom: 0; }
}