/* Css Reset */
html {color:#333; background:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {margin:0; padding:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
audio, canvas, video {display:inline-block; *display:inline; *zoom:1;}
body, button, input, select, textarea {font:12px/1.5 "Microsoft Yahei", "\5B8B\4F53", sans-serif, tahoma, arial;}
input, select, textarea {font-size:100%;}
table {border-collapse:collapse; border-spacing:0;}
th {text-align:inherit;}
fieldset, img {border:0;}
iframe {display:block;}
abbr, acronym {border:0; font-variant:normal;}
del {text-decoration:line-through;}
address, caption, cite, code, dfn, em, th, var {font-style:normal; font-weight:500;}
ol, ul {list-style:none;}
caption, th {text-align:left;}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:500;}
q:before, q:after {content:'';}
sub, sup {font-size:75%; line-height:0;	position:relative; vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
a {color:#333;}
a:hover {color:#000; text-decoration:underline;}
ins, a {text-decoration:none;}
.fn-clear:after {visibility:hidden; display:block; font-size:0;	content:" "; clear:both; height:0;}
.fn-clear {zoom:1; /* for IE6 IE7 */}
.fn-hide {display:none;}
.fn-left, .fn-right {display:inline;}
.fn-left {float:left;}
.fn-right {float:right;}
input.placeholder {color: #ccc;}

input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}


/* 从下往上缓冲显示 */
@-webkit-keyframes bottomFadeIn{0%{opacity:0;	-webkit-transform:translateY(40px);}100%{opacity:1;	-webkit-transform:translateY(0);}}
@-moz-keyframes bottomFadeIn{0%{opacity:0; -moz-transform:translateY(40px);}100%{opacity:1; -moz-transform:translateY(0);}}
@keyframes bottomFadeIn{0%{opacity:0;	transform:translateY(40px);}100%{opacity:1; transform:translateY(0);}}

/* 摆动 */
@-moz-keyframes swing{0%{transform:translate3d(0,-8px,0)}100%{transform:translate3d(0,8px,0)}}
@-webkit-keyframes swing{0%{transform:translate3d(0,-8px,0)}100%{transform:translate3d(0,8px,0)}}
@keyframes swing{0%{transform:translate3d(0,-8px,0)}100%{transform:translate3d(0,8px,0)}}


/* 图标库 */
.sidebar .step li s, .container .step.s1 .icons s, .container .step .login dl s, .container .step.s3 .server label s, .container .step.s4 .modules li s {background: url('../images/icons.png?v=1') no-repeat;}

/* 页面背景 */
html, body {height: 100%; overflow: hidden;}
html {background-color: #0077cc; background: -webkit-radial-gradient(#0099ff, #0066cc); background: -o-radial-gradient(#0099ff, #0066cc); background: -moz-radial-gradient(#0099ff, #0066cc); background: radial-gradient(#0099ff, #0066cc);}

/* 背景canvas */
#particles-js {position: absolute; left: 0; top: 0; right: 0; bottom: 10px; z-index: -1;}

.wrap {display: none; position: relative; width: 1000px; height: 600px; margin: 0 auto; border: 1px solid #0061ae; border-radius: 5px; background-color: #fff; box-shadow: 0 0 50px 8px rgba(0,0,0,.15); -webkit-animation: bottomFadeIn .5s ease-out; -moz-animation: bottomFadeIn .5s ease-out; animation: bottomFadeIn .5s ease-out;}

/* 左侧 */
.sidebar {float: left; position: relative; width: 150px; height: 600px; overflow: hidden; background-color: #1672d4; border: 1px solid #0061ae; border-right: 0; margin: -1px 0 0 -1px; border-radius: 5px 0 0 5px;}
.sidebar .st {height: 30px; text-align: center;}
.sidebar .st s {display: inline-block; width: 10px; height: 10px; background: #1255a0; border-radius: 50%; margin: 10px 4px;}
.sidebar .st .s1 {filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;}
.sidebar .st .s2 {filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6;}
.sidebar .st .s3 {filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
.sidebar .st .s4 {filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4;}
.sidebar .st .s5 {filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3;}
.sidebar .st .s6 {filter:alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2;}
.sidebar .step {position: relative; z-index: 2;}
.sidebar .step li {height: 87px; text-align: center; color: #a1c6ee; padding-top: 8px; font-size: 14px;}
.sidebar .step li s {width: 57px; height: 57px; display: block; margin: 0 auto;}
.sidebar .step li.s2 s {background-position: -58px 0;}
.sidebar .step li.s3 s {background-position: -116px 0;}
.sidebar .step li.s4 s {background-position: -174px 0;}
.sidebar .step li.s5 s {background-position: -232px 0;}
.sidebar .step li.s6 s {background-position: -290px 0;}
.sidebar .sbg {position: absolute; z-index: 1; left: 0; right: 0; height: 95px; background-color: #12529a; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out;}
.sidebar.step1 .sbg {top: 30px;}
.sidebar.step2 .sbg {top: 125px;}
.sidebar.step3 .sbg {top: 220px;}
.sidebar.step4 .sbg {top: 315px;}
.sidebar.step5 .sbg {top: 410px;}
.sidebar.step6 .sbg {top: 505px;}

/* 内容 */
.container {float: right; width: 850px; height: 600px; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;	-webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px;}
.container .logo {height: 60px; display: block; text-align: center; margin: 38px 0 25px;}
.container .logo a {display: inline-block; font-size: 36px;}
.container .logo s {width: 100px; height: 60px; display: inline-block; background: url('../images/logo.png') no-repeat; vertical-align: middle; margin-right: 10px;}

/* 默认缩起效果 */
.container .step {position: absolute; left: 0; top: 123px; width: 850px; height: 477px; background: #fff; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; transition: all .5s ease-out; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(35deg); -moz-transform: rotateX(35deg); transform: rotateX(35deg);}

/* 离开 */
.container .step.scale, .container .step.s1.scale, .container .step.s2.scale, .container .step.s3.scale, .container .step.s4.scale, .container .step.s5.scale {-webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: rotateX(-35deg) scale(.8); -moz-transform: rotateX(-35deg) scale(.8); transform: rotateX(-35deg) scale(.8);}

/* 出现 */
.container .step.unscale {-webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg);}

/* 右下角图形 */
.container .step .s1_icon {position: absolute; z-index: 1; right: -140px; bottom: 10px; width: 420px; height: 354px; background: url('../images/s1_icon.png') no-repeat; -webkit-animation: swing 1.5s linear 0s infinite alternate; -moz-animation: swing 1.5s linear 0s infinite alternate; animation: swing 1.5s linear 0s infinite alternate;}
.container .step .s2_icon {position: absolute; z-index: 1; right: -235px; bottom: -15px; width: 444px; height: 318px; background: url('../images/s2_icon.png') no-repeat; -webkit-animation: swing 1.5s linear 0s infinite alternate; -moz-animation: swing 1.5s linear 0s infinite alternate; animation: swing 1.5s linear 0s infinite alternate;}
.container .step .s3_icon {position: absolute; z-index: 1; right: -120px; bottom: 0; width: 399px; height: 355px; background: url('../images/s3_icon.png') no-repeat; -webkit-animation: swing 1.5s linear 0s infinite alternate; -moz-animation: swing 1.5s linear 0s infinite alternate; animation: swing 1.5s linear 0s infinite alternate;}
.container .step .s4_icon {position: absolute; z-index: 1; right: -220px; bottom: 0; width: 490px; height: 319px; background: url('../images/s4_icon.png') no-repeat; -webkit-animation: swing 1.5s linear 0s infinite alternate; -moz-animation: swing 1.5s linear 0s infinite alternate; animation: swing 1.5s linear 0s infinite alternate;}
.container .step .s5_icon {position: absolute; z-index: 1; right: -80px; bottom: 10px; width: 284px; height: 301px; background: url('../images/s5_icon.png') no-repeat; -webkit-animation: swing 1.5s linear 0s infinite alternate; -moz-animation: swing 1.5s linear 0s infinite alternate; animation: swing 1.5s linear 0s infinite alternate;}

/* 继续按钮 */
.container .go-btn {display: block; width: 70px; height: 70px; margin: 20px auto 0; text-align: center; line-height: 70px; font-size: 16px; color: #000; border: 1px solid #ccc; border-radius: 50%; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; outline: 0;}
.container .go-btn:hover {font-size: 20px; background-color: #f5f5f5;}

/* 第一步：登录 */
.container .step.s1 {-webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg);}
.container .step.s1 .icons s {position: absolute; width: 45px; height: 45px; overflow: hidden;}
.container .step.s1 .icons .i1 {background-position: 0 -58px; left: 215px; top: -40px;}
.container .step.s1 .icons .i2 {background-position: -46px -58px; left: 190px; top: 40px;}
.container .step.s1 .icons .i3 {background-position: -92px -58px; left: 120px; top: 70px;}
.container .step.s1 .icons .i4 {background-position: -138px -58px; left: 260px; top: 40px;}
.container .step.s1 .icons .i5 {background-position: -184px -58px; left: 170px; top: 160px;}
.container .step.s1 .icons .i6 {background-position: -230px -58px; left: 350px; top: 60px;}
.container .step.s1 .icons .i7 {background-position: -276px -58px; left: 500px; top: 40px;}
.container .step.s1 .icons .i8 {background-position: 0 -104px; left: 590px; top: 55px;}
.container .step.s1 .icons .i9 {background-position: -46px -104px; left: 625px; top: 20px;}
.container .step.s1 .icons .i10 {background-position: -92px -104px; left: 730px; top: 120px;}
.container .step.s1 .icons .i11 {background-position: -138px -104px; left: 800px; top: 60px;}
.container .step .login {position: relative; z-index: 2; width: 380px; display: block; margin: 0 auto; padding-top: 75px;}
.container .step .login dl {position: relative; width: 378px; height: 48px; border: 1px solid #d9d9d9; background: #fff; margin-bottom: 25px; border-radius: 5px; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out;}
.container .step .login dl.focus {border-color: rgba(82,168,236,0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);}
.container .step .login dt {float: left; width: 48px; height: 48px; overflow: hidden;}
.container .step .login dt s {width: 24px; height: 27px; display: block; margin: 10px auto; vertical-align: middle;}
.container .step .login .uname dt s {background-position: -184px -104px;}
.container .step .login .upawd dt s {background-position: -210px -104px;}
.container .step .login dd {position: relative; overflow: hidden;}
.container .step .login dd input {width: 100%; height: 48px; border: none; outline: 0; line-height: 48px; border-radius: 5px; font-size: 16px;}
#login {width: 100%; height: 50px; border: 0; text-align: center; font-size: 18px; color: #fff; cursor: pointer; outline: 0; background: #0088e9; border-radius: 5px;}
.container .step .login .uname dd s {position: absolute; right: 13px; top: 13px; width: 21px; height: 21px; background-position: -235px -107px; cursor: pointer;}
.container .step .login .upawd dd s {position: absolute; display: block!important; display: none; right: 13px; top: 18px; width: 20px; height: 12px; background-position: -240px -135px; cursor: pointer; font-size: 0; text-indent: -999em;}
.container .step .login .upawd dd s.show {background-position: -218px -135px;}
.container .step.s1 .tips {padding: 35px 215px 35px 40px; color: #999; line-height: 1.8em;}
.container .step.s1 .tips strong {color: #f00;}
.container .step.s1 .tips a {color: #1672d4;}


/* 第二步：协议 */
.container .step.s2 {display: none;}
.container .step.s2 .protocol {position: relative; z-index: 2; padding: 0 50px;}
.container .step.s2 .protocol .content {height: 360px; overflow-y: auto; font-size: 14px; color: #666; line-height: 1.8em;}
.mCustomScrollBox {margin-right: 15px;}


/* 第三步：环境检测 */
.container .step.s3 {display: none;}
.container .step.s3 .server {position: relative; z-index: 2; font-size: 14px; padding: 0 50px;}
.container .step.s3 .server h3 {font-weight: 700; line-height: 30px;}
.container .step.s3 .server dl {padding: 3px 0;}
.container .step.s3 .server dt {float: left; width: 140px; text-align: right;}
.container .step.s3 .server dd {position: relative; overflow: hidden;}
.container .step.s3 .server dl.inline {padding: 0 0 0 45px;}
.container .step.s3 .server dl.inline dt {width: 0;}
.container .step.s3 .server dl.inline label s {margin-right: 0;}
.container .step.s3 .server label {display: inline-block; margin-right: 15px; line-height: 30px;}
.container .step.s3 .server label s {display: inline-block; width: 16px; height: 16px; vertical-align: middle; margin: 0px 10px 4px 3px; background-position: -184px -133px;}
.container .step.s3 .server label s.err {background-position: -201px -133px;}
.container .step.s3 .go-btn {margin-top: 10px;}


/* 第四步：网站配置 */
.container .step.s4 {display: none; width: 750px; padding: 0 50px;}
.container .step.s4 h3 {font-size: 15px; color: #006acb;}
.container .step.s4 h3 small {margin-left: 10px;}
.container .step.s4 h3 a {margin-right: 30px; color: #f00;}
.container .step.s4 ul {padding: 15px 0 10px; position: relative; z-index: 2;}
/* .container .step.s4 .modules {padding-left: 16px;} */
.container .step.s4 .modules li.load {float: none; width: 730px; height: 65px; line-height: 65px; margin: 0 auto; text-align: center; font-size: 14px;}
.container .step.s4 .modules li {float: left; width: 92px; height: 16px; margin-bottom: 10px; font-size: 14px; color: #666; cursor: pointer;}
.container .step.s4 .modules li s {display: inline-block; width: 15px; height: 16px; vertical-align: middle; margin-right: 5px; background-position: -258px -110px;}
.container .step.s4 .modules li:hover s {background-position: -275px -110px;}
.container .step.s4 .modules li.curr s {background-position: -292px -110px;}
.container .step.s4 .forms {width: 110%;}
.container .step.s4 .forms li {float: left; width: 255px; height: 30px; line-height: 30px; margin-bottom: 16px;}
.container .step.s4 .forms li span {display: inline-block; width: 80px; text-align: right;}
.container .step.s4 .forms li input {display: inline-block; width: 140px; height: 28px; line-height: 28px; margin-left: 3px; border: 1px solid #d9d9d9; border-radius: 5px; padding: 0 5px; outline: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out;}
.container .step.s4 .forms li input:focus {border-color: rgba(82,168,236,0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);}
.container .step.s4 .go-btn {margin-top: 10px;}


/* 第五步：在线云安装 */
.container .step.s5 {display: none; width: 750px; padding: 0 50px;}
.container .step.s5 .process {position: relative; height: 85%;}
.container .step.s5 .process s {position: absolute; z-index: 1; width: 2px; top: 0; left: 10px; bottom: 0; background-color: #1672d4;}
.container .step.s5 .process dl {position: relative; z-index: 2; padding: 20px 0 5px;}
.container .step.s5 .process dt {float: left; width: 20px; height: 20px; background: #1672d4; border-radius: 50%; margin-top: 7px; transition: all .3s linear;}
.container .step.s5 .process dd {float: left; position: relative; padding: 5px 45px 5px 10px; line-height: 1.5em; font-size: 16px; color: #fff; margin-left: 25px; border-radius: 5px; background: #1672d4; transition: all .3s linear;}
.container .step.s5 .process dd i {position: absolute; left: -12px; top: 8px; width: 0; height: 0; border-top: 9px solid transparent; border-right: 12px solid #1672d4; border-bottom: 9px solid transparent; transition: all .3s linear;}
.container .step.s5 .process dd s {position: absolute; left: auto; right: 12px; top: 8px; width: 22px; height: 17px; background: url('../images/loading.gif') no-repeat center center;}
.container .step.s5 .process dl.err dt, .container .step.s5 .process dl.err dd {background: #f00;}
.container .step.s5 .process dl.err dd i {border-right-color: #f00;}
.container .step.s5 .process dl.err dd s {background: url('../images/error.png') no-repeat center center;}
.container .step.s5 .process dl.success dt, .container .step.s5 .process dl.success dd {background: #a0e257;}
.container .step.s5 .process dl.success dd i {border-right-color: #a0e257;}
.container .step.s5 .process dl.success dd s {background: url('../images/success.png') no-repeat center center;}
.container .step.s5 .retry {margin-left: 15px;}
.container .step.s5 .retry a {color: #fff;}


/* 第六步：安装成功 */
.container .step.s6 {display: none; padding: 0 50px; width: 750px;}
.container .step.s6 .head {position: relative; height: 260px; margin-top: 20px;}
.container .step.s6 .head .p1 {position: absolute; width: 184px; height: 144px; left: 15px; top: 70px; background: url('../images/s5_p1.png');}
.container .step.s6 .head .p2 {position: absolute; width: 195px; height: 72px; left: 220px; top: 10px; background: url('../images/s5_p2.png');}
.container .step.s6 .head .p3 {position: absolute; width: 90px; height: 90px; left: 377px; top: 80px; background: url('../images/s5_p3.png');}
.container .step.s6 .head .t1 {position: absolute; left: 350px; top: 195px; font-size: 24px; color: #67ca7c;}
.container .step.s6 .head .t2 {position: absolute; right: 15px; top: 80px; width: 100px; height: 50px; text-align: center; line-height: 50px; font-size: 16px; color: #fff; background-color: #2993ff; border-radius: 5px;}
.container .step.s6 .head .t3 {position: absolute; right: 15px; top: 160px; width: 100px; height: 50px; text-align: center; line-height: 50px; font-size: 16px; color: #fff; background-color: #67ca7c; border-radius: 5px;}
.container .step.s6 .foot {padding: 10px 20px; background: #eff0f2; font-size: 16px; line-height: 2em; margin-top: 30px;}
.container .step.s6 .foot a {color: #0081e2; text-decoration: underline;}
.container .step.s6 .foot p .split {display: inline-block; width: 30px;}