@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
}

.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
}

@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
}

.foctop {
height:320px
}

.bf img {
top:-15px
}
}

@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
}

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

@media screen and (max-width: 736px) {
.ro01 {
top:auto;
bottom:.4em;
left:2em;
z-index:0;
max-width:130px
}

.ro02 {
top:auto;
bottom:.4em;
right:2em;
z-index:0;
max-width:130px
}
}

.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:280px;
height:48px;
line-height:48px;
text-align:center;
background-color:#00a1e9;
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:#006ebb
}

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

.box02 > h1 {
font-size:24px;
font-weight:700;
color:#ec5397;
margin-bottom:16px
}

.box02 > h2 {
font-size:20px;
color:#333;
margin-bottom:20px
}

.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:24px;
font-weight:700;
color:#ec5397;
margin-bottom:16px
}

.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:#ffedf5;
margin-bottom:20px;
border:2px solid #ccc
}

.m01 ul {
overflow:hidden
}

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

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

.m01 ul li:nth-child(2) {
width:calc(100% - 70px);
font-size:26px;
color:#22ac39
}

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

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


.red2{color: #D00003;}