@charset "UTF-8";
.blue { color: #00aaee; }

.bg-blue { background-color: #00aaee; }

.gray { color: #b9bcc7; }

.bg-gray { background-color: #b9bcc7; }

.red { color: #fc4444; }

.bg-red { background-color: #fc4444; }

.orange { color: #ff7802; }

.bg-orange { background-color: #ff7802; }

html { font-family: "微软雅黑", "Hiragino Sans GB", "Hiragino Sans GB W3", "宋体", Helvetica, Arial, sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, footer, header, nav, section { display: block; }

figcaption, figure, main { display: block; }

figure { margin: 1em 40px; }

hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; }

pre { font-family: monospace,monospace; font-size: 1em; }

a { color: #333; background-color: transparent; -webkit-text-decoration-skip: objects; -webkit-tap-highlight-color: transparent; text-decoration: none; }

a:active, a:hover, a:focus { color: #cf3f11; text-decoration: none; outline-width: 0; }

abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }

b, strong { font-weight: inherit; }

b, strong { font-weight: bolder; }

code, kbd, samp { font-family: monospace,monospace; font-size: 1em; }

dfn { font-style: italic; }

mark { background-color: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

audio, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

img { width: auto; max-width: 100%; width: 100%; -ms-interpolation-mode: bicubic; border-style: none; }

svg:not(:root) { overflow: hidden; }

button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }

button, input { overflow: visible; }

button, select { text-transform: none; }

button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; cursor: pointer; }

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { border: 1px solid #cf3f11; }

legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; /* 3 */ white-space: normal; }

progress { display: inline-block; vertical-align: baseline; }

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

details, menu { display: block; }

summary { display: list-item; }

canvas { display: inline-block; }

template { display: none; }

[hidden] { display: none; }

table { border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: inherit; }

body { font-size: 0.24rem; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, audio, canvas, progress, video, body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, a, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea { margin: 0; padding: 0; font-weight: normal; font-style: normal; font-family: inherit; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { color: #333; background: #000; }

ul, li, ol { list-style: none; line-height: normal; }

i, address, cite, dfn, em, var { font-style: normal; }

input[type=date] { outline: none; border: none; -webkit-appearance: none; }

.page1, .page2, .page3, .wrap { width: 6.4rem; margin-left: auto; margin-right: auto; }

.bnav, .bnav3, .alert, .overly { width: 6.4rem; position: fixed; left: 50%; margin-left: -3.2rem; z-index: 999; }

.bnav, .bnav3, .cf { *zoom: 1; }

.bnav:before, .bnav3:before, .bnav:after, .bnav3:after, .cf:before, .cf:after { content: ""; display: table; }

.bnav:after, .bnav3:after, .cf:after { clear: both; }

input[type=text], input[type=password], input[type=submit], select, textarea { border: #333 1px solid; outline: none; }

input[type=text]:hover, input[type=password]:hover, input[type=submit]:hover, select:hover, textarea:hover, input[type=text]:focus, input[type=password]:focus, input[type=submit]:focus, select:focus, textarea:focus { border-color: #cf3f11; }

.show { display: block !important; }

.hide { display: none !important; }

.h98 { width: 100%; height: 0.98rem; }

.bg { background-color: #f6f6f6; }

.btn { line-height: .6rem; padding: 0 .2rem; border-radius: .1rem; border: #cf3f11 1px solid; text-align: center; background-color: #cf3f11; color: #fff; }

.btn:hover { opacity: .8; color: #fff; }

.btn.btn-blue { background-color: #00aaee; border-color: #00aaee; }

.btn.btn-gray { background-color: #b9bcc7; border-color: #b9bcc7; }

.btn.btn-red { background-color: #fc4444; border-color: #fc4444; }

.btn.btn-orange { background-color: #ff7802; border-color: #ff7802; }

input[type=text], input[type=password], input[type=submit], select { border: #eee 1px solid; height: .6rem; border-radius: .1rem; width: 100%; }

input[type=text]:focus, input[type=password]:focus, input[type=submit]:focus, select:focus { border-color: #cf3f11; }

input[type=text], input[type=password] { padding: 0 .1rem; }

input[type=submit] { background-color: #cf3f11; text-align: center; width: 100%; }

textarea { height: auto; min-height: 1.2rem; border: #eee 1px solid; border-radius: .1rem; padding: .1rem; width: 100%; }

.bnav { bottom: 0; height: .98rem; font-size: .32rem; background: url("images/ft.png") left top no-repeat; background-size: 100% 100%; }

.bnav a { color: #333; }

.bnav li { width: 25%; float: left; text-align: center; height: 100%; padding-top: 0.05rem; font-weight: normal; font-size: 0.24rem; }

.bnav li img { width: 0.67rem; height: 0.5rem; margin-left: auto; margin-right: auto; display: block; }

.bnav li.on a { color: #cf3f11 !important; }

.bnav li:nth-child(1) a, .bnav li:nth-child(3) a { color: #fff; }

.bnav li:nth-child(2) { padding-right: .3rem; }

.bnav li:nth-child(4) { padding-left: .4rem; }

.bnav3 { bottom: 0; height: .98rem; font-size: .32rem; background-color: #000; background-size: 100% 100%; }

.bnav3 a { color: #fcd925; font-size: .2rem; }

.bnav3 li { width: 25%; float: left; text-align: center; height: 100%; padding-top: 1px; font-weight: normal; font-size: 0.24rem; }

.bnav3 li img { width: 0.56rem; height: 0.56rem; margin-left: auto; margin-right: auto; display: block; }

.alert { display: none; top: 0; z-index: 1000; height: 100%; background-color: rgba(0, 0, 0, 0.5); }

.alert .box { position: absolute; left: 50%; top: 50%; border-radius: .1rem; background-color: #fff; }

.alert .btn-sure { width: 2.1rem; height: .7rem; background: url("images/btn-sure.png") left top no-repeat; background-size: 100% 100%; position: absolute; left: 50%; margin-left: -1.05rem; bottom: .3rem; }

.overly { display: none; top: 0; height: 100%; background-color: rgba(0, 0, 0, 0.5); }

.alert-msg .box { width: 5.3rem; height: 6rem; margin-left: -2.65rem; margin-top: -3rem; background: url("images/alert1.png") center center no-repeat; background-size: 100% 100%; padding-top: 1rem; }

.alert-msg .box h3 { text-align: center; color: #fff; font-weight: bold; font-size: .5rem; color: #fff; }

.alert-yuanbao .box { width: 5.3rem; height: 6rem; margin-left: -2.65rem; margin-top: -3rem; background: url("images/alert2.png") center center no-repeat; background-size: 100% 100%; padding-top: .8rem; }

.alert-yuanbao .box h3 { text-align: center; color: #fff; font-weight: bold; font-size: .45rem; color: #fff; }

.alert-yuanbao .tips { margin-top: 1rem; color: #fff; font-size: .27rem; line-height: .5rem; width: 100%; text-align: center; padding: 0 .2rem; }

.alert-yuanbao .btn-sure { bottom: .5rem; }

.alert-ok .box, .alert-fail .box { width: 5.3rem; height: 5.7rem; margin-left: -2.65rem; margin-top: -2.85rem; background: url("images/alert3.png") center center no-repeat; background-size: 100% 100%; padding-top: 1.2rem; }

.alert-ok .box h3, .alert-fail .box h3 { text-align: center; color: #fff; font-weight: bold; font-size: .5rem; color: #fff; }

.alert-ok .tips, .alert-fail .tips { margin-top: 1.3rem; color: #fff; font-size: .27rem; line-height: .5rem; width: 100%; text-align: center; padding: 0 .2rem; }

.alert-ok .btn-sure, .alert-fail .btn-sure { bottom: .3rem; }

.alert-yuanbao2 .box { width: 5.6rem; height: 5.4rem; margin-left: -2.8rem; margin-top: -2.7rem; background: url("images/alert4.png") center center no-repeat; background-size: 100% 100%; padding-top: 1.2rem; }

.alert-yuanbao2 .number { text-align: center; color: #ec4d35; font-size: .45rem; padding-left: .1rem; }

.alert-yuanbao2 .btn-sure { bottom: .3rem; width: 2.7rem; height: .7rem; margin-left: -1.35rem; background-image: url(images/btn-sure2.png); }

.alert-friends-list .box { width: 5.85rem; height: 8.77rem; margin-left: -2.925rem; margin-top: -4.385rem; background: url("images/alert5.png") center center no-repeat; background-size: 100% 100%; padding-top: 1.3rem; }

.alert-friends-list .close { width: .69rem; height: .63rem; background: url("images/close2.png") center center no-repeat; background-size: 100% 100%; position: absolute; right: 0; top: 0; }

.alert-friends-list .list { width: 100%; height: 6rem; overflow-y: scroll; overflow-x: hidden; padding: 0 .2rem; font-size: .24rem; line-height: .4rem; }

.alert-friends-list .btn-sure { width: 4.33rem; height: 1.1rem; background-image: url(images/btn4.png); margin-left: -2.165rem; }

.alert-qiandao .box { width: 5.3rem; height: 6rem; margin-left: -2.65rem; margin-top: -3rem; background: url("images/alert2.png") center center no-repeat; background-size: 100% 100%; padding-top: 1.1rem; }

.alert-qiandao .box h3 { text-align: center; color: #fff; font-weight: bold; font-size: .45rem; color: #fff; }

.alert-qiandao .tips { margin-top: 1rem; color: #fff; font-size: .27rem; line-height: .5rem; width: 100%; text-align: center; padding: 0 .2rem; }

.alert-qiandao .btn-sure { bottom: .5rem; }

@-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; } }

@keyframes flash { 0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; } }

.flash { -webkit-animation: flash 1.5s linear infinite; animation: flash 1.5s linear infinite; }

.upDown { -webkit-animation: upDown 2s linear infinite; animation: upDown 2s linear infinite; }

@keyframes upDown { from { -webkit-transform: translateY(0px); transform: translateY(0px); }
  50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
  to { -webkit-transform: translateY(0px); transform: translateY(0px); } }

@-webkit-keyframes upDown { from { -webkit-transform: translateY(0px); transform: translateY(0px); }
  50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
  to { -webkit-transform: translateY(0px); transform: translateY(0px); } }

@-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% { -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

@keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% { -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

.bounce { -webkit-animation: bounce 1.2s linear infinite; animation: bounce 1.2s linear infinite; }

/* ----------------------------------------------------------------------main-------------------------------------------------------------------- */
.page1 { height: 100%; position: relative; }

.page1 .percent { position: absolute; left: .5rem; color: #fff; font-size: .2rem; line-height: .25rem; }

.page1 .percent .con { display: inline-block; width: 1.61rem; height: .25rem; background: url("images/percent1.png") left top no-repeat; background-size: 100% 100%; padding: 1px; position: relative; top: .05rem; }

.page1 .percent span { position: absolute; left: 0; top: 0; background: url("images/percent2.png") left top repeat-x; background-size: 1px .25rem; height: .25rem; border: transparent 1px solid; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; }

.page1 .percent1 { top: .8rem; }

.page1 .percent2 { top: 1.2rem; }

.page1 .btn-intro { width: 1.1rem; height: .53rem; background: url("images/btn1.png") left top no-repeat; background-size: 100% 100%; position: absolute; right: .5rem; top: .8rem; line-height: .53rem; text-align: center; color: #fff; z-index: 9; }

.page1 .btn1, .page1 .btn2 { width: 1.06rem; height: .43rem; background: url("images/btn2.png") center top no-repeat; background-size: 100% 100%; position: absolute; right: .5rem; color: #fff; text-align: center; line-height: .43rem; z-index: 9; }

.page1 .btn1 { top: 1.5rem; }

.page1 .btn2 { top: 2.1rem; background-image: url(images/btn3.png); padding-right: .2rem; }

.page1 .btn-friend { width: .9rem; position: absolute; right: .55rem; top: 2.7rem; z-index: 9; }

.page1 .btn-grow { background: url("images/arrow.png") left center no-repeat; background-size: .22rem .19rem; padding-left: .3rem; color: #fff; position: absolute; right: .5rem; top: 65%; margin-top: -.4rem; }

.page1 .box { width: 100%; padding-top: 3rem; position: absolute; bottom: .98rem; width: 100%; height: 6.03rem; overflow: hidden; }

.page1 .box > img { display: block; position: absolute; left: 0; top: 0; }

.page1 .water { position: absolute; left: .5rem; z-index: 9; top: 0; width: 1.72rem; height: 2.22rem; }

.page1 .water > img { position: absolute; left: 0; top: 0; }

.page1 .txt { position: absolute; color: #cf3f11; left: 35%; top: 72%; }

.page1 .water1 { -webkit-animation: flash 1.5s linear infinite; animation: flash 1.5s linear infinite; }

.page1 .jinbi { -webkit-animation: flash 1.5s linear infinite; animation: flash 1.5s linear infinite; }

.page1 .yuanbao { -webkit-animation: flash 2.5s linear infinite; animation: flash 2.5s linear infinite; }

.page1 .jinbi2, .page1 .yuanbao2 { opacity: 0; }

.page2 { background: url("images/bg2.jpg") center top no-repeat; background-size: 100% 100%; }

.page2 .logo { position: absolute; left: .5rem; top: .5rem; width: 1.46rem; }

.page2 .box { position: absolute; width: 4rem; height: 3.5rem; left: 50%; margin-left: -2rem; top: 50%; margin-top: -1.75rem; background-color: rgba(95, 95, 95, 0.8); }

.page2 .box ul { padding: .1rem .2rem; }

.page2 .box li { padding-left: 4em; position: relative; line-height: .6rem; margin: .15rem 0; }

.page2 .box span { position: absolute; left: 0; color: #fff; }

.page2 .box .e2 { margin-right: 1em; }

.page2 .box input[type=text], .page2 .box input[type=password] { width: 100%; height: .6rem; line-height: .6rem; border-radius: .6rem; border: none; background-color: rgba(23, 41, 43, 0.5); padding: 0 .3rem; color: #fff; }

.page2 .box .li4 { line-height: .3rem; color: #fff; }

.page2 .box input[type=checkbox] { position: relative; top: 2px; margin-left: .1rem; }

.page2 .box .btn-forget { color: #fff; float: right; margin-right: .1rem; }

.page2 .operate { background-color: rgba(47, 47, 47, 0.8); width: 100%; position: absolute; bottom: 0; left: 0; height: .6rem; padding-top: .11rem; }

.page2 .operate img { width: 1.47rem; display: block; margin: 0 auto; }

.page2 .forget-box { height: 4.4rem; margin-top: -2.2rem; }

.page2 .forget-box .yzm { line-height: .3rem; color: #fff; }

.page2 .forget-box .yzm a { color: #fff; margin-left: .3rem; }

.page2 .forget-box .yzm .disabled { opacity: .8; }

.page2 .forget-box .li6 span { left: -.5em; }

.page3 { height: 10.25rem; position: relative; background: url("images/bg3.png") center top no-repeat #000; background-size: 100% 100%; }

.page3 .percent { position: absolute; left: .5rem; color: #fff; font-size: .2rem; line-height: .25rem; }

.page3 .percent .con { display: inline-block; width: 1.61rem; height: .25rem; background: url("images/percent1.png") left top no-repeat; background-size: 100% 100%; padding: 1px; position: relative; top: .05rem; }

.page3 .percent span { position: absolute; left: 0; top: 0; background: url("images/percent2.png") left top repeat-x; background-size: 1px .25rem; height: .25rem; border: transparent 1px solid; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; height: .23rem; }

.page3 .percent1 { top: .8rem; }

.page3 .percent2 { top: 1.2rem; }

.page3 .percent3 { top: 1.6rem; }

.page3 .btn-friend { width: .9rem; position: absolute; right: .55rem; top: .8rem; z-index: 9; }

.page3 .star { position: absolute; left: 0; top: 0; width: 100%; height: 3.74rem; }

.page3 .star img { position: absolute; left: 0; top: 0; }

.page3 .star .star2 { -webkit-animation: flash 1.5s linear infinite; animation: flash 1.5s linear infinite; }

.page3 .star .star3 { -webkit-animation: flash 2.5s linear infinite; animation: flash 2.5s linear infinite; }

.page3 .box { width: 6.4rem; height: 6.65rem; position: absolute; bottom: 0; }

.page3 .tree { position: absolute; }

.page3 .tree img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.page3 .tree i { width: .53rem; height: .53rem; background: url("images/number.png") center center no-repeat; background-size: 100% 100%; line-height: .53rem; text-align: center; font-size: .2rem; position: absolute; right: -.45rem; top: -.2rem; }

.page3 .tree .num6 { top: -.35rem; }

.page3 .tree .num7 { left: -.45rem; right: auto; }

.page3 .tree .num11, .page3 .tree .num13 { top: .35rem; right: -.3rem; }

.page3 .tree .num12, .page3 .tree .num14, .page3 .tree .num15 { top: -.35rem; }

.page3 .tree .t2 { display: none; }

.page3 .tree.on .t1 { display: none; }

.page3 .tree.on .t2 { display: block; }

.page3 .tree1 { width: .52rem; height: .68rem; left: 3.55rem; top: .29rem; }

.page3 .tree2 { width: .64rem; height: .61rem; left: 1.6rem; top: 1rem; }

.page3 .tree3 { width: .43rem; height: .69rem; left: 2.86rem; top: 1.14rem; }

.page3 .tree4 { width: .63rem; height: .63rem; left: .33rem; top: 1.97rem; }

.page3 .tree5 { width: .64rem; height: .64rem; left: 3.26rem; top: 1.87rem; }

.page3 .tree6 { width: .61rem; height: .62rem; left: 5.36rem; top: 1.17rem; }

.page3 .tree7 { width: .66rem; height: .68rem; left: 5.68rem; top: 2.5rem; }

.page3 .tree8 { width: .7rem; height: .67rem; left: 1.2rem; top: 2.6rem; }

.page3 .tree9 { width: .54rem; height: .76rem; left: .12rem; top: 3.38rem; }

.page3 .tree10 { width: .66rem; height: .77rem; left: 2.4rem; top: 3.4rem; }

.page3 .tree11 { width: .64rem; height: .68rem; left: 3.8rem; top: 3.1rem; }

.page3 .tree12 { width: .68rem; height: .73rem; left: 5.36rem; top: 4.72rem; }

.page3 .tree13 { width: .7rem; height: .69rem; left: 1.35rem; top: 4.15rem; }

.page3 .tree14 { width: .53rem; height: .69rem; left: .1rem; top: 5.14rem; }

.page3 .tree15 { width: .7rem; height: .68rem; left: 1.17rem; top: 5.72rem; }