nav {
    font-family: SourceHanSansCN-Bold;
    font-size: 20px;
    position: absolute;
    left: 50%;
    top: 2em;
    -WEBKIT-TAP-HIGHLIGHT-COLOR: RGBA(255, 255, 255, 0);
}
ul {
    list-style: none;
}
li {
    float: left;
    margin-right: 2em;
}
/*a, a:visited {
    color: #aaa;
    text-decoration: none;
}
a.active, a:hover {
    color: #fff;
    text-decoration: none;
}*/
* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.one {
    background: url(../images/bg1.jpg) center no-repeat;
}
.two {
    background: url(../images/bg2.jpg) center no-repeat;
}
.three {
    background: url(../images/bg3.jpg) center no-repeat;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}
#icon, #leaf, #ruler, .logo, .two-word, .white {
    opacity: 0;
}
.white {
    color: #fff;
}
p {
    font-size: 17px;
    font-family: SourceHanSansCN-Regular;
}
@media screen and (min-width:1500px) {
    #logo, #one-p {
    margin-top: 1em;
}
#logo {
    margin-bottom: 7em;
}
#one-p {
    margin-left: 1em;
}
.one-title {
    position: relative;
    opacity: 0;
    top: 0;
}
#icon {
    width: 120px;
    margin-top: 4em;
    margin-bottom: 10em;
    margin-left: 5em;
}
}
@media screen and (min-width:1024px) and (max-width:1499px) {
    .container {
    width: 970px;
}
#logo {
    margin-top: 1em;
    margin-bottom: 5em;
}
#one-p {
    margin-top: .5em;
    margin-left: 1em;
}
.one-title {
    position: relative;
    float: right;
    opacity: 0;
    margin-right: 1em;
}
#icon {
    width: 120px;
    margin-top: 3.5em;
    margin-bottom: 15em;
    margin-left: 5em;
}
}
@media screen and (min-width:376px) and (max-width:1023px) {
    #logo, #one-p {
    margin-top: 1em;
}
#icon, .one-title {
    display: none;
}
#logo {
    margin-bottom: 5em;
}
#one-p {
    margin-left: 1em;
}
}
@media screen and (max-width:767px) {
    nav {
    left: 60%}
}
@media screen and (max-width:375px) {
    .one-title {
    display: none;
}
.white {
    margin-top: 3em;
    margin-bottom: 2em;
    width: 80%}
p {
    font-size: 17px;
}
#logo {
    width: 40%}
#icon {
    width: 100px;
    margin-bottom: 5em;
}
}
.two-title {
    margin-bottom: 3em;
}
.two-word {
    color: #363636;
    margin-top: 25em;
}
@media screen and (min-width:1500px) {
    #leaf, #ruler {
    position: absolute;
}
#ruler {
    top: -1em;
    right: 22em;
}
#leaf {
    top: 11em;
    right: 31em;
}
}
@media screen and (min-width:1025px) and (max-width:1499px) {
    #leaf, #ruler {
    position: absolute;
}
#ruler {
    top: -1em;
    right: 5em;
}
#leaf {
    top: 11em;
    right: 14em;
}
}
@media screen and (min-width:376px) and (max-width:1024px) {
    #leaf, #ruler {
    position: absolute;
}
#ruler {
    top: -1em;
    right: -4em;
}
#leaf {
    top: 7em;
    right: 2em;
}
}
@media screen and (max-width:376px) {
    #leaf, #ruler {
    position: absolute;
}
#ruler {
    top: -1em;
    right: -4em;
}
#leaf {
    width: 40%;
    top: 6em;
    right: 2em;
}
.two-title {
    width: 30%}
.two-word {
    margin-top: 20em;
}
}
#unlock-area {
    margin: 0 auto;
    width: 80%;
    max-width: 900px;
}
@media screen and (max-width:376px) {
    #unlock-area {
    width: 85%}
}