/***
 @author ----- ningwenjing 
 @design ----- liuwei 
 @time   ----- 2017-07-25
***/
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;}ol,ul,input{margin:0; padding:0;}body,button,input,select,textarea{font:12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;outline:none;}ul,ol{list-style:none;}a{text-decoration:none;outline:0 none;color:#000;}img{border:0;}table{border-collapse:collapse;border-spacing:0;}
body{background: url(../img/bg.jpg) center top no-repeat #0a0a1e;overflow: hidden;}
.wrap{width: 1106px;margin: 0 auto;padding: 86px 0 0;box-sizing: border-box;}
.code:before,.code:after,.wrap h1,.line{background: url(../img/spr-main.png) no-repeat;}
.wrap h1{width: 700px;height: 160px;line-height: 100;overflow: hidden;margin: 0 auto;}
.code{background-position: 0 -210px;width: 390px;height: 390px;margin: 30px auto 0;box-sizing: border-box;position: relative}
.code:before,.code:after{width: 62px;height: 100%;position: absolute;content: '';top: 0;}
.code:before{left: 0;background-position: 0 -210px;}
.code:after{right: 0;background-position: -330px -210px;}

.code-box{border: solid 1px #fff;box-shadow: 0 0 5px 3px rgba(255,0,0,.35),0 0 5px 3px rgba(255,0,0,.35) inset;padding: 5px;box-sizing: border-box;position: absolute;top: 26px;left: 30px;}
.line{width: 370px;height: 45px;background-position: 0 -160px;position: absolute;left: 10px;top: 0;opacity: 0;}

.main-box{display: flex;justify-content: space-between;color: #af717b;font-size: 14px;margin-top:15px;}
.main-box .des{border-top: solid 1px #a06c68;background: rgba(89,120,255,.06);height: 214px;padding: 0 25px 0 36px;box-sizing: border-box;}
.main-box h2{color: #e68f9e;font-size: 16px;height: 40px;line-height: 40px;margin: 0 0 3px;}
.step{width: 655px;}
.step-pic{height: 122px;}
.step-list ul{display: flex;}
.step-list li{text-align: center;width: 68px;margin: 0 43px 0 0;line-height: 38px;white-space: nowrap;}
.step-list li:nth-child(4){width: 246px;margin: 0;}
.rule{width: 400px;}
.rule-list li{list-style: decimal;margin: 0 0 0 16px;}
.rule-list li a{color: #fff;}

@media only screen and (min-width: 1006px) and (max-width:1106px) , only screen and (min-height: 781px) and (max-height: 884px){
     body{background-size: cover;}
    .wrap{width: 1006px;padding: 50px 0 0;}
    .code{margin-top: -20px;}
    .wrap h1,.code{transform: scale(.85)}
    .main-box{margin-top: -10px;}
    .main-box .des{padding: 0 15px 0 25px;height: 220px;}
    .step-list li{width: 53px;margin: 0 40px 0 0;}
    .step-list li:nth-child(4){width: 214px;}
    .step{width: 545px;}
    .step-pic{zoom:.85}
    .rule{width: 408px;}
}

@media only screen and (min-width: 931px) and (max-width:1006px) , only screen and (min-height: 601px) and (max-height: 780px){	
    body{background-size: cover;}
    .wrap{width: 930px;padding: 50px 0 0;}
    .code{margin-top: -80px;}
    .wrap h1{margin-top: -30px;}
    .wrap h1,.code{transform: scale(.6)}
    .main-box{margin-top: -60px;font-size: 12px;}
    .main-box .des{padding: 0 15px 0 25px;height: 190px;}
    .step-list li{width: 48px;margin: 0 30px 0 0;}
    .step-list li:nth-child(4){width: 175px;}
    .step{width: 510px;}
    .step-pic{zoom:.7}
    .rule{width: 375px;}

}

@media only screen and (max-width:930px) , only screen and (max-height: 600px){
     body{background-size: cover;}
    .wrap{width: 740px;padding: 30px 0 0;}
    .code{margin-top: -110px;}
    .wrap h1{margin-top: -30px;}
    .wrap h1,.code{transform: scale(.6)}
    .main-box{margin-top: -60px;font-size: 12px;}
    .main-box .des{padding: 0 10px 0 15px;height: 190px;}
    .step-list li{width: 43px;margin: 0 25px 0 0;}
    .step-list li:nth-child(4){width: 190px;}
    .step{width: 393px;}
    .step-pic{zoom:.6}
    .rule{width: 317px;}
}

/* CSS3 Animation */
  .code{animation: fadeIn .2s .4s both;}
@keyframes fadeIn{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
 .code:before{animation: move1 .7s .6s both;}
@keyframes move1{
    0%{transform: translateX(120px);}
    100%{transform: translateX(0);}
}
.code:after{animation: move2 .7s .6s both;}
@keyframes move2{
    0%{transform: translateX(-120px);}
    100%{transform: translateX(0);}
}   
 .code-box{animation: box .7s .6s both;} 
@keyframes box{
    0%{clip: rect(0 165px 340px 165px);opacity: 0}
    100%{clip: rect(0 330px 340px 0px);opacity: 1}
}
.line.ani{animation: line 1.2s 1.4s both;}
@keyframes line{
    0%{transform: translateY(0);opacity: 0}
    10%{opacity: 1;}
    50%{transform: translateY(350px);opacity: 1}
    90%{opacity: 1}
    100%{transform: translateY(0);opacity: 0;}
}

.line.ani1{animation: line1 4.2s 3s infinite both;}
@keyframes line1{
    0%{transform: translateY(0);opacity: 0}
    2%{opacity: 1;}
    15%{transform: translateY(350px);opacity: 1}
    28%{opacity: 1}
    30%,100%{transform: translateY(0);opacity: 0;}
}

.code-box img{animation: fadeIn2 .7s .6s both;}
@keyframes fadeIn2{
    0%{opacity: 0;}
    65%{opacity: .5}
    100%{opacity: 1;}
}