body,
html { height: 100%; }

a,
a:hover { outline: 0; }

.footer,
.header { z-index: 99; }

.clearfix:after,
.page_1 .page_bg:before { content: ""; }

html { +overflow: hidden; }

body { position: relative; width: 100%; }

.header,
.wrap,
.wrapper { position: absolute; top: 0; }

body,
dd,
div,
dl,
dt,
h1,
h2,
h3,
h4,
input,
li,
ol,
p,
table,
ul { margin: 0; padding: 0; }

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

.footer,
.header,
.wrap,
.wrapper { width: 100%; left: 0; }

li { list-style: none; vertical-align: bottom; }

em,
i { font-style: normal; }

a { text-decoration: none; }

a:hover { text-decoration: underline; }

.btn_download:hover,
.header .nav_box a:hover { text-decoration: none; }

img { border: 0; }

.hidden { display: none; }

.hide_txt { text-indent: -9999em; font-size: 0; line-height: 0; }

.clearfix:after { display: block; visibility: hidden; clear: both; height: 0; }

.clearfix { zoom: 1; }

.wrap { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, sans-serif; font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "微软雅黑", tahoma, arial, simsun, "宋体"; }

.wrap,
.wrapper { height: 100%; background: #000; overflow: hidden; }


@media only screen and (min-height:1024px) {
    .header .head { padding: 100px; }
}

@media only screen and (min-height:900px) and (max-height:1024px) {
    .header .head { padding: 50px; }
}

@media only screen and (min-height:768px) and (max-height:900px) {
    .header .head { padding: 30px; }
}

@media only screen and (max-height:768px) {
    .header .head { padding: -10px; }
}

@media only screen and (max-height:700px) {
    .header .head { position: relative; top: -100px; }
    .page_wp { display: none; }
    .btns_wp { bottom:30px !important }
    .btns_wp .JS-btn-download {z-index:999 !important }
}

.header .logo_box { float: left; }

.header .logo_link img { display: block; }

.header .nav_box { float: right; position: relative; }

.header .nav_box li { float: left; padding: 0 10px; }

.header .nav_box a { font-size: 16px; color: #fff; line-height: 50px; padding: 0 6px; display: block; }

.header .nav_box .ic_line { position: absolute; height: 2px; background: #fff; bottom: 6px; width: 40px; transition: left .2s, width .2s; -webkit-transition: left .2s, width .2s; display: none; }

.page,
.page_wp { top: 0; height: 100%; }

.footer { position: absolute; bottom: 12px; }

.page_wp,
.page_wp .txt_box { width: 100%; z-index: 5; position: absolute; }

.footer .foot { text-align: center; font-size: 14px; color: #4c4c4c; }

.page_wp { left: 0; }

.page { position: absolute; left: -9999px; width: 100%; }

.page_wp .show { left: 0; }

.page_wp .txt_box { bottom: 140px; left: 0; color: #fff; opacity: 0; transition: opacity .8s; -webkit-transition: opacity .8s; }

.page_wp .show .txt_box { opacity: 1; text-align: center; }

.page_wp .txt_box h2 { text-align: center; font-size: 36px; font-weight: lighter; line-height: 40px; }

.page_wp .txt_brief { font-size: 14px; line-height: 24px; width: 800px; margin: 10px auto 0; font-weight: lighter; }

.page_wp .img_box { position: absolute; width: 1920px; height: 1080px; top: 50%; left: 50%; margin: -540px 0 0 -960px; z-index: 3; }

.page_wp .img_box img { display: block; width: 100%; height: 100%; }

.css3 .page_wp .img_box { display: none; }

.page_1.hide { left: 0; }

.page_1.hide .txt_box { left: -9999px; }

.page_1 .page_bg { position: absolute; top: 50%; left: 50%; width: 2500px; height: 1600px; margin: -800px 0 0 -1250px; transform-origin: center 708px; -webkit-transform-origin: center 708px; }

.page_1 .page_bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(img/page1_bg.jpg) center center no-repeat; transform-origin: center 708px; -webkit-transform-origin: center 708px; }

.page_4 .light_wp { position: absolute; width: 1000px; height: 460px; top: 50%; left: 15%; margin-top: -230px; }

.page_4 .light_box { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: scale(.8); -webkit-transform: scale(.8); }

.page_4 .light_1 { position: absolute; bottom: 50%; left: 0; width: 476px; height: 72px; margin-bottom: -18px; background: url(img/light_2.png); }

.page_4 .light_2,
.page_4 .light_3,
.page_4 .light_4 { position: absolute; width: 476px; height: 72px; background: url(img/light_1.png); transform: scale(.8); -webkit-transform: scale(.8); }

.page_4 .light_2 { top: 0; left: 260px; }

.page_4 .light_3 { bottom: 0; left: 190px; }

.page_4 .light_4 { top: 50%; margin-top: -18px; right: 0; }

.page_4 .light_5 { position: absolute; width: 1920px; height: 1080px; bottom: 50%; margin-bottom: -523px; left: -923px; background: url(img/light_3.png); transform: scale(.8); -webkit-transform: scale(.8); }

.page_4 .meteor_box { position: absolute; width: 576px; height: 401px; top: 0; left: 0; background: url(img/light_4.png); }

.star_wp { position: absolute; width: 100%; height: 100%; top: 0; left: -9999px; }

.star_wp.show { left: 0; }

.star_wp .star_bg { position: absolute; top: 50%; left: 50%; width: 2400px; height: 2000px; margin: -1000px 0 0 -1200px; background: url(img/page3_bg.jpg) center center no-repeat; transform-origin: center center; -webkit-transform-origin: center center; }

.star_wp .star_box { position: absolute; top: 50%; left: 50%; width: 1740px; height: 1356px; margin: -678px 0 0 -870px; background: url(img/star.png) center center no-repeat; transform-origin: center center; -webkit-transform-origin: center center; }

#canvas { position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; }

.btn_control,
.btns_wp { z-index: 20; position: absolute; }

.btn_control { top: 50%; right: 50px; margin-top: -42px; }

.btn_control a { display: block; background: url(img/btn_spr.png) -14px -52px no-repeat; width: 9px; height: 9px; margin: 0 0 12px; }

.btn_control a.cur,
.btn_control a:hover { background-position: 0 -52px; }

.btns_wp { width: 100%; bottom: 70px; }

.btn_download { display: block; margin: 26px auto 0; width: 195px; height: 38px; text-align: center; line-height: 38px; border: 2px solid #fff; font-size: 18px; color: #fff; }

.sys_footer { color: #524d45 !important; min-width: 1000px; font-family: Arial, "\65B0\5B8B\4F53"; position: absolute; bottom: 40px; }

.foot .links a,
.foot a { color: #524d45; }

.page_1.show .page_bg { animation: p1bg_effect1 300s both infinite linear, opc_effect .5s both linear; -webkit-animation: p1bg_effect1 300s both infinite linear, opc_effect .5s both linear; }

@keyframes p1bg_effect1 {
    0% { transform: rotate(0) scale(1); }
    100% { transform: rotate(-360deg) scale(4); }
}

@-webkit-keyframes p1bg_effect1 {
    0% { -webkit-transform: rotate(0) scale(1); }
    100% { -webkit-transform: rotate(-360deg) scale(4); }
}

.page_1.hide .page_bg:before { animation: p1bg_effect2 .4s both linear; -webkit-animation: p1bg_effect2 .4s both linear; }

@keyframes p1bg_effect2 {
    0% { transform: rotate(0) scale(1); opacity: 1; }
    100% { transform: rotate(-100deg) scale(4); opacity: 0; }
}

@-webkit-keyframes p1bg_effect2 {
    0% { -webkit-transform: rotate(0) scale(1); opacity: 1; }
    100% { -webkit-transform: rotate(-100deg) scale(4); opacity: 0; }
}

.star_wp.show .star_bg { animation: opc_effect 2s both linear, p3bg_effect 30s both linear; -webkit-animation: opc_effect 2s both linear, p3bg_effect 30s both linear; }

@keyframes p3bg_effect {
    0% { transform: rotate(0) scale(1); }
    100% { transform: rotate(10deg) scale(1.2); }
}

@-webkit-keyframes p3bg_effect {
    0% { -webkit-transform: rotate(0) scale(1); }
    100% { -webkit-transform: rotate(10deg) scale(1.2); }
}

.star_wp.show .star_box { animation: p3star_effect 20s both linear; -webkit-animation: p3star_effect 20s both linear; }

@keyframes p3star_effect {
    0% { transform: scale(0); }
    100% { transform: scale(.98); }
}

@-webkit-keyframes p3star_effect {
    0% { -webkit-transform: scale(0); }
    100% { -webkit-transform: scale(.98); }
}

.page_4.show .light_wp { animation: p4light_effect 10s both linear infinite; -webkit-animation: p4light_effect 10s both linear infinite; }

@keyframes p4light_effect {
    0% { transform: translate(5000px, 0); }
    10%, 50% { transform: translate(0, 0); }
    100%, 60% { transform: translate(-5000px, 0); }
}

@-webkit-keyframes p4light_effect {
    0% { -webkit-transform: translate(5000px, 0); }
    10%, 50% { -webkit-transform: translate(0, 0); }
    100%, 60% { -webkit-transform: translate(-5000px, 0); }
}

.page_4.show .light_1,
.page_4.show .light_3 { animation: p4light13_effect 10s both linear infinite; -webkit-animation: p4light13_effect 10s both linear infinite; }

@keyframes p4light13_effect {
    0%, 10% { transform: translate(0, 0); }
    100%, 50% { transform: translate(-50px, 0); }
}

@-webkit-keyframes p4light13_effect {
    0%, 10% { -webkit-transform: translate(0, 0); }
    100%, 50% { -webkit-transform: translate(-50px, 0); }
}

.page_4.show .light_2,
.page_4.show .light_4 { animation: p4light24_effect 10s both linear infinite; -webkit-animation: p4light24_effect 10s both linear infinite; }

@keyframes p4light24_effect {
    0%, 10% { transform: translate(0, 0); }
    100%, 50% { transform: translate(-100px, 0); }
}

@-webkit-keyframes p4light24_effect {
    0%, 10% { -webkit-transform: translate(0, 0); }
    100%, 50% { -webkit-transform: translate(-100px, 0); }
}

.page_4.show .light_5 { animation: p4light5_effect 10s both linear infinite; -webkit-animation: p4light5_effect 10s both linear infinite; }

@keyframes p4light5_effect {
    0%, 10% { transform: translate(0, 0); opacity: 0; }
    16%, 28% { opacity: 1; }
    22%, 34% { opacity: 0; }
    100%, 50% { transform: translate(-50px, 0); opacity: 0; }
}

@-webkit-keyframes p4light5_effect {
    0%, 10% { -webkit-transform: translate(0, 0); opacity: 0; }
    16%, 28% { opacity: 1; }
    22%, 34% { opacity: 0; }
    100%, 50% { -webkit-transform: translate(-50px, 0); opacity: 0; }
}

.page_4.show .meteor_box { animation: p4meteor_effect 10s both linear infinite; -webkit-animation: p4meteor_effect 10s both linear infinite; }

@keyframes p4meteor_effect {
    0%, 65% { transform: translate(-1000px, 1000px); }
    100%, 80% { transform: translate(1000px, -1000px); }
}

@-webkit-keyframes p4meteor_effect {
    0%, 65% { -webkit-transform: translate(-1000px, 1000px); }
    100%, 80% { -webkit-transform: translate(1000px, -1000px); }
}

@keyframes opc_effect {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes opc_effect {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.scale_box { transform-origin: center center; -webkit-transform-origin: center center; }

@media only screen and (min-width:1600px) {
    .scale_box { transform: scale(1); -webkit-transform: scale(1); }
}

@media only screen and (min-width:1024px) and (max-width:1599px) {
    .scale_box { transform: scale(.875); -webkit-transform: scale(.875); }
}

@media only screen and (max-width:1023px) {
    .scale_box { transform: scale(.7); -webkit-transform: scale(.7); }
}

.loginContainer { margin: 0 auto; max-width: 400px; min-height: 400px; /* text-align: center; */ /* position: relative; */ /* left: 40%; */ /* top: 200px; */ border: 1px solid #fff; border-radius: 1px; background: rgba(255, 255, 255, 0.2); }

.panel { border-radius: 2px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); margin-bottom: 10px; }
.box { position: absolute; z-index: 9; margin: 0 auto; top: 50%; left: 50%; -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.box-head { }
.box-head h1 { text-align: center; color: #fff; }
.box-footer { padding: 20px; text-align: center; color: #8e8e8e; }


/* Let's get this party started */
::-webkit-scrollbar { width: 12px; }

/* Track */
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3); -webkit-border-radius: 10px; border-radius: 10px; }

/* Handle */
::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,255,255,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }