html {width: 100%;-webkit-text-size-adjust:none;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);height: 100%;}
body {width: 100%;height: 100%;font-size: 16px; color: #fff;line-height: 24px;background: #fff;min-height: 100%;font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;}
* {margin: 0;padding: 0;border: 0;}
ul,ul li,ol,li {list-style: none outside none;}
img {vertical-align: middle;border: none;width: 100%;}
i {font: inherit;}
input,select,option {vertical-align: middle;border-radius: 0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}
input[type="text"],input[type="button"],input[type="submit"],input[type="reset"] {-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}
.fl {float: left;display: inline;}
.fr {float: right;display: inline;}
h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}
select::-ms-expand { display: none; }
a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a:hover {text-decoration: none;outline: none;}
.clear {clear: both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {zoom: 1;display: block;_height: 1px;clear: both;}
#particles1{
    position: absolute;left: 0;top: 0;width: 100%;height: 100%;    
}
#particles1 canvas{
    opacity: 0.55;
}
#particles2{
    position: absolute;right: 0;bottom: 0;width: 40%;height: 100%;z-index: 9;
}
.body-bg{
    background:#060506 url('../images/bg-01.jpg') no-repeat center center;background-size:cover;overflow: hidden;
}
.earth-01{
    background: url('../images/img-01.png') no-repeat;width: 309px;height: 306px;position: fixed;left: -100px;top: 100px;background-size:cover;z-index: 9;pointer-events:none;
}
.earth-02{
    background: url('../images/img-02.png') no-repeat;width: 726px;height: 743px;position: fixed;right: 0px;bottom: 0px;background-size:cover;z-index: 8;pointer-events:none;
}
.content-box{
    position: absolute;left: 17%;top: 50%;transform: translateY(-50%);overflow: hidden;width: 704px;pointer-events:none;
}
.content-box .code-box{
    width: 248px;height: 248px;background: #fff;border-radius: 20px;display: flex;justify-content: center;align-items: center;float: left;
}
.content-box .code-box .erwm{
    width: 220px;height: 220px;
}
.content-box .slogan-box{
    width: 408px;float: right;
}
.content-box .slogan-box p{
    background: url('../images/img-03.png') no-repeat;background-size:cover;
}
.content-box .slogan-box .logo{
    height: 61px;
}
.content-box .slogan-box .slogan-01{
    background-position: 0 -61px;height: 72px;
}
.content-box .slogan-box .slogan-02{
    height: 60px;background-position: 0 -133px;
}
.content-box .slogan-box .slogan-03{
    height: 33px;background-position: 0 -193px;
}
.content-box .slogan-box .slogan-04{
    height: 23px;background-position: 0 -226px;
}
@media screen and (max-width: 999px) {
    .earth-01{
        width: 209px;height: 206px;
    }
    .earth-02{
        width: 426px;height: 443px;
    }
    .content-box{
        transform:scale(0.8) translateY(-50%);
        -webkit-transform:scale(0.8) translateY(-50%);
        left: 11%;
    }
}
@media only screen and (min-width: 1000px) {
    .earth-01{
        width: 209px;height: 206px;
    }
    .earth-02{
        width: 426px;height: 443px;
    }
    .content-box{
        transform:scale(0.8) translateY(-50%);
        -webkit-transform:scale(0.8) translateY(-50%);
        left: 11%;
    }
} 
@media only screen and (min-width: 1500px) {
    .earth-01{
        width: 209px;height: 206px;
    }
    .earth-02{
         width: 526px;height: 543px;
    }
    .content-box{
        transform:scale(0.9) translateY(-50%);
        -webkit-transform:scale(0.9) translateY(-50%);
        left: 14%;
    }
} 

@media only screen and (min-width: 1600px) {
    .earth-01{
       width: 283px;height: 280px;
    }
    .earth-02{
        width: 686px;height: 703px;
    }
    .content-box{
        transform:scale(0.9) translateY(-50%);
        -webkit-transform:scale(0.9) translateY(-50%);
        left: 17%;
    }
}
@media only screen and (min-width: 2000px) {
    .earth-01{
       width: 309px;height: 306px;
    }
    .earth-02{
        width: 726px;height: 743px;
    }
    .content-box{
        transform:scale(1) translateY(-50%);
        -webkit-transform:scale(1) translateY(-50%);
        left: 17%;
    }
}
.star {
    display:block;width:5px;height:5px;border-radius:50%;background:#FFF;position:absolute;
    transform-origin:100% 0;
    -webkit-transform-origin:100% 0;
    animation:star-ani 10s linear infinite;
    -webkit-animation:star-ani 10s linear infinite;
    box-shadow:0 0 5px 5px rgba(255,255,255,.3);opacity:0;
}
.star:after {
    content:'';display:block;top:0px;left:4px;border:0px solid #fff;
    border-width:0px 90px 2px 90px;border-color:transparent transparent transparent rgba(255,255,255,.3);
    transform:rotate(-45deg) translate3d(1px,3px,0);
    -webkit-transform:rotate(-45deg) translate3d(1px,3px,0);
    box-shadow:0 0 1px 0 rgba(255,255,255,.1);
    transform-origin:0% 100%;
    -webkit-transform-origin:0% 100%;
}
@keyframes star-ani {
    0% {
        opacity:1;
        transform:translate3d(0,0,0);
    }
    100% {
        opacity:1;
        transform:translate3d(-2200px,2280px,0);
    }
}
@-webkit-keyframes star-ani {
    0% {
        opacity:1;
        -webkit-transform:translate3d(0,0,0);
    }
    100% {
        opacity:1;
        -webkit-transform:translate3d(-2200px,2280px,0);
    }
}