html, body {
    font-family: 'Microsoft Yahei',Helvetica,Arial,sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Microsoft Yahei',Helvetica,Arial,sans-serif !important;
}
.background-img {color:#fff}
.background-img {background: url("../img/background-img@2x.jpg") no-repeat scroll center / cover;}
#unsupported { border: 1px solid yellow; color: black; background-color: #FFFFAD; padding: 2em; margin: 1em; display: inline-block; }
#stars       { display: block; margin: auto;}
canvas {position:absolute;top:0;left:0;z-index:-1}
.link {float:right;}
.link a {display:block;margin-top:10px;font-size:14px}
.link a:hover {text-decoration:none}
.link a.btn-link {background-color:#00a0e9;color:#fff;border-radius:4px}
.link a.btn-link:hover {background:#0090d2}
.link a.btn-link:link {text-decoration:none}
.header {padding-top:200px}
.header .section {text-align:center}
.header .section .sub-title {font-size:40px;margin-top:20px;color:#00a0e9;}
.header .section .intro {font-size:32px;margin-top:30px}
.header .section .intro span {color:#e83918;font-size:14px;}
.header .section .intro a {font-size:14px;color:#e83918;border-bottom:1px solid #e83918;text-decoration:none;margin:0 10px;cursor:pointer}
.header .section .intro a:hover {color:#c83216}
.header .section .sub-intro {margin-top:30px;font-size:15px;}
.header .section .support {margin-top:30px}
.header .section .support span {font-weight:bold;font-size:18px}
.header .section .support div:nth-child(1),
.header .section .support div:nth-child(2) {border-right:2px solid #fff}
.header .section .info {margin-top:30px;font-size:15px;line-height:1.6}
.header .section .info p {text-align:left;margin-bottom:20px}
.header .section .info .special {margin-top:30px}
.header .section .info .special p {text-align:center;margin-top:20px;font-weight:bold}
.header .rocket {background:url(../img/rocket.png) no-repeat scroll left top / cover;}
.body .title {font-size:36px;text-align:center}
.body h4 {text-align:center;font-size:20px;margin-top:50px;padding-bottom:15px}
.body h5 {font-weight:bold}
.body p {font-weight:400;margin-bottom:5px;padding-left:14px;position:relative}
.body p:before {content: ".";font-family: "iconfont";font-weight: bold;position: absolute;top: -18px;left: 0;font-size:28px}
.body .duty {margin-top:24px}
.body .require {margin-top:40px}
.footer {margin:70px 0;font-size:20px}
.footer .email {color:#00a0e9;font-weight:bold}
.footer a {margin-left:20px;box-shadow:0 3px #582551;}
.footer .eric-photo {position:relative;margin:auto}
.footer .eric-photo .ball {position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;animation:ball 30s infinite linear}
.footer .eric .eric-intr {margin-top:100px;font-size:14px}
.footer .eric .eric-intr h4 {font-size:22px;margin-bottom:20px}
.footer .eric .eric-intr h5 {font-size:18px}
.photo {margin-top:80px}
.photo .title {font-size:32px;margin-bottom:-100px;text-align:center}
@media (max-width:991px) {
    .header .title {width:250px}
    .body {margin-top:70px}
    .footer {font-size:14px}
    .footer .right {text-align:right;margin-top:-10px}
    .photo .title {font-size:24px;margin-bottom:-40px;}
    .footer .eric .eric-intr {padding-left:50px}
}
@media (max-width:767px) {
    .header .title {width:210px}
    .header .section .sub-title {font-size:25px}
    .header .section .support span {font-size:16px}
    .header .section .intro a {margin-left:-80px}
    .header .section .intro,
    .body .title {font-size:22px}
    .body h4 {font-size:18px}
    .footer .right {text-align:left;margin-top:20px}
    .footer .eric {margin-top:140px}
    .footer .eric .eric-intr {text-align:center;padding-left:0}
    .photo .title {font-size:18px;margin-bottom:-20px}
}
@media (max-width:800px) {
    .background-img {background: url("../img/background-img-sm.jpg") no-repeat scroll center / cover}
}
@media (max-width:389px) {
    .header .section .support div {min-height:80px}
    .footer a {margin:30px auto;display:block}
}
@media (min-width:427px) {
    .footer .eric-photo {width:367px}
    .footer .eric-photo .ball {top:93px;left:30px;-webkit-animation:ball 20s infinite linear;-moz-animation:ball 20s infinite linear;animation:ball 20s infinite linear}
    @-webkit-keyframes ball {
        0%{top:93px;left:30px;z-index:1}
        8%{top:105px;left:1px}
        11%{top:120px;left:-5px}
        14%{top:130px;left:-4px}
        21%{top:147px;left:6px}
        33%{top:176px;left:43px}
        37%{top:187px;left:60px}
        41%{top:200px;left:86px}
        47%{top:225px;left:154px;}
        52%{top:234px;left:188px}
        60%{top:243px;left:240px}
        64%{top:245px;left:288px}
        68%{top:243px;left:315px}
        70%{top:231px;left:348px}
        72%{top:226px;left:354px}
        75%{top:220px;left:358px}
        78%{top:200px;left:355px;z-index:1}
        80%{top:178px;left:340px;z-index:-1}
        100%{top:93px;left:40px;z-index:-1}
    }
    @-moz-keyframes ball {
        0%{top:93px;left:30px;z-index:1}
        8%{top:105px;left:1px}
        11%{top:120px;left:-5px}
        14%{top:130px;left:-4px}
        21%{top:147px;left:6px}
        33%{top:176px;left:43px}
        37%{top:187px;left:60px}
        41%{top:200px;left:86px}
        47%{top:225px;left:154px;}
        52%{top:234px;left:188px}
        60%{top:243px;left:240px}
        64%{top:245px;left:288px}
        68%{top:243px;left:315px}
        70%{top:231px;left:348px}
        75%{top:226px;left:354px}
        76%{top:220px;left:358px}
        78%{top:200px;left:355px;z-index:1}
        80%{top:178px;left:340px;z-index:-1}
        100%{top:93px;left:40px;z-index:-1}
    }
    @keyframes ball {
        0%{top:93px;left:30px;z-index:1}
        8%{top:105px;left:1px}
        11%{top:120px;left:-5px}
        14%{top:130px;left:-4px}
        21%{top:147px;left:6px}
        33%{top:176px;left:43px}
        37%{top:187px;left:60px}
        41%{top:200px;left:86px}
        47%{top:225px;left:154px;}
        52%{top:234px;left:188px}
        60%{top:243px;left:240px}
        64%{top:245px;left:288px}
        68%{top:243px;left:315px}
        70%{top:231px;left:348px}
        75%{top:226px;left:354px}
        76%{top:220px;left:358px}
        78%{top:200px;left:355px;z-index:1}
        80%{top:178px;left:340px;z-index:-1}
        100%{top:93px;left:40px;z-index:-1}
    }
}
@media (max-width:426px) {
    .footer .eric-photo {width:300px}
    .footer .eric-photo .ball {top:75px;left:20px;-webkit-animation:ball 20s infinite linear;-moz-animation:ball 20s infinite linear;animation:ball 20s infinite linear}
    @-moz-keyframes ball {
        0%{top:75px;left:20px;z-index:1}
        8%{top:85px;left:-4px}
        15%{top:100px;left:-4px}
        20%{top:110px;left:-2px}
        23%{top:120px;left:3px}
        30%{top:135px;left:23px}
        35%{top:147px;left:43px}
        40%{top:157px;left:60px}
        45%{top:170px;left:86px}
        54%{top:190px;left:150px}
        60%{top:195px;left:188px}
        65%{top:199px;left:220px}
        69%{top:195px;left:270px}
        70%{top:192px;left:275px}
        74%{top:188px;left:283px}
        78%{top:178px;left:290px}
        80%{top:172px;left:292px}
        85%{top:160px;left:287px;z-index:1}
        90%{top:148px;left:278px;z-index:-1}
        100%{top:75px;left:40px;z-index:-1}
    }
    @-webkit-keyframes ball {
        0%{top:75px;left:20px;z-index:1}
        8%{top:85px;left:-4px}
        15%{top:100px;left:-4px}
        20%{top:110px;left:-2px}
        23%{top:120px;left:3px}
        30%{top:135px;left:23px}
        35%{top:147px;left:43px}
        40%{top:157px;left:60px}
        45%{top:170px;left:86px}
        54%{top:190px;left:150px}
        60%{top:195px;left:188px}
        65%{top:199px;left:220px}
        69%{top:195px;left:270px}
        70%{top:192px;left:275px}
        74%{top:188px;left:283px}
        78%{top:178px;left:290px}
        80%{top:172px;left:292px}
        85%{top:160px;left:287px;z-index:1}
        90%{top:148px;left:278px;z-index:-1}
        100%{top:75px;left:40px;z-index:-1}
    }
    @keyframes ball {
        0%{top:75px;left:20px;z-index:1}
        8%{top:85px;left:-4px}
        15%{top:100px;left:-4px}
        20%{top:110px;left:-2px}
        23%{top:120px;left:3px}
        30%{top:135px;left:23px}
        35%{top:147px;left:43px}
        40%{top:157px;left:60px}
        45%{top:170px;left:86px}
        54%{top:190px;left:150px}
        60%{top:195px;left:188px}
        65%{top:199px;left:220px}
        69%{top:195px;left:270px}
        70%{top:192px;left:275px}
        74%{top:188px;left:283px}
        78%{top:178px;left:290px}
        80%{top:172px;left:292px}
        85%{top:160px;left:287px;z-index:1}
        90%{top:148px;left:278px;z-index:-1}
        100%{top:75px;left:40px;z-index:-1}
    }
}
@media (min-width:767px) {
    .header .section .intro div {margin-left:-91px;display:inline-block}
    .footer .eric {margin-top:200px}
}
@media (min-width:992px) {
    .link a {margin-top:10px;margin-right:40px}
    .header .title {width:310px}
    .header .section .intro {letter-spacing:14px}
    .header .section .sub-title {text-align:justify;text-align-last:justify;}
    .header .section .sub-intro {text-align:justify;text-align-last:justify;}
    .header .rocket {height:780px;margin-top:-30px;padding-right:0}
    .body {margin-top:100px}
    .footer .right {text-align:right;margin-top:-3px}
    .footer .eric .eric-intr h4 {margin-left:-22px}
}
@media (min-width:1200px){
    .link a {margin-top:10px;margin-right:80px}
    .header .section {padding:0 50px}
    .header .section .intro {letter-spacing:12px}
    .header .rocket {height:808px;margin-top:-30px}
    .container {width:1080px}
}
@-webkit-keyframes shake {
    0% {
        -webkit-transform:translate(0,-2px);
    }
    50% {
        -webkit-transform:translate(0,2px);
    }
    100% {
        -webkit-transform:translate(0,-2px);
    }
}
@keyframes shake {
    0% {
        transform:translate(0,-2px);
        -moz-transform:translate(0,-2px);
    }
    50% {
        transform:translate(0,2px);
        -moz-transform:translate(0,2px);
    }
    100% {
        transform:translate(0,-2px);
        -moz-transform:translate(0,-2px);
    }
}
.shake {position:relative}
.shake i{display:inline-block;position:absolute;top:0;font-style:normal}
.shake i:nth-child(1){left:0;-webkit-animation:shake 1s 0.1s infinite;animation:shake 1s 0.1s infinite}
.shake i:nth-child(2){left:15px;-webkit-animation:shake 1s 0.3s infinite;animation:shake 1s 0.3s infinite;}
.shake i:nth-child(3){left:30px;-webkit-animation:shake 1s 0.5s infinite;animation:shake 1s 0.5s infinite;}
.shake i:nth-child(4){left:45px;-webkit-animation:shake 1s 0.1s infinite;animation:shake 1s 0.7s infinite}
.shake i:nth-child(5){left:62px;-webkit-animation:shake 1s 0.3s infinite;animation:shake 1s 0.9s infinite;}
.shake i:nth-child(6){left:73px;-webkit-animation:shake 1s 0.5s infinite;animation:shake 1s 1.1s infinite;}
.shake i:nth-child(7){left:85px;-webkit-animation:shake 1s 0.5s infinite;animation:shake 1s 1.3s infinite;}

@-webkit-keyframes btn {
    0% {
        -webkit-transform:scaleY(1);
    }
    50% {
        -webkit-transform:scaleY(0.7);
    }
    100% {
        -webkit-transform:scaleY(1);
    }
}
@keyframes btn {
    0% {
        transform:scaleY(1);
    }
    50% {
        transform:scaleY(0.7);
    }
    100% {
        transform:scaleY(1);
    }
}
.btn-join i{font-style:normal;display:inline-block}
.btn-join i:nth-child(1){-webkit-animation:btn 1s 0.1s infinite;animation:btn 1s 0.1s infinite;}
.btn-join i:nth-child(2){-webkit-animation:btn 1s 0.2s infinite;animation:btn 1s 0.2s infinite;}
.btn-join i:nth-child(3){-webkit-animation:btn 1s 0.3s infinite;animation:btn 1s 0.3s infinite;}
.btn-join i:nth-child(4){-webkit-animation:btn 1s 0.4s infinite;animation:btn 1s 0.4s infinite;}

.video-box {display:none;width:800px;position:fixed;left:50%;top:150px;margin-left:-400px;z-index:100;border:5px solid rgba(255, 255, 255, 0.6)}
.video-box.loading {display:block;top:-500px;z-index:-100;}
.video-box .close {position: absolute;top:-30px;right:-25px;color:#FFF;opacity:0.6;font-size:30px;font-family:serif}