html {
    font-family: Tahoma,-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
    font-size: 100vw
}

@media screen and (min-width: 540px) {
    html {
        font-size:540px
    }
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    html {
        font-size:1080px
    }
}

body,html {
    height: 100%;
    width: 100%
}

body {
    background: #aeb3b6;
    font-size: 16px;
    margin: auto;
    max-width: 540px;
    overflow: hidden
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    body {
        max-width:none
    }
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.load-container {
    background: #fcf5eb;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999
}

.load-container>.load-bar-back,.load-container>.load-bar-front {
    border-radius: 8px;
    bottom: 0;
    height: 16px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 75%
}

.load-container>.load-bar-back {
    background: #eccc9b
}

.load-container>.load-bar-front {
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: left center;
    background: #d71517;
    transform: scaleX(0);
    transform-origin: left center
}

.load-container>.load-hint {
    -webkit-transform: translateY(100%);
    bottom: 0;
    color: #d71517;
    height: 1.5em;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transform: translateY(100%)
}

body,html {
    overflow: hidden
}

.page,.wrapper {
    position: relative
}

.wrapper {
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s
}

/*.page-1 {
    background: url(8bfd122fc6df373a6d9e63746a4fa89d.png) top .056rem left .05333rem/.22533rem no-repeat,url(e80a7e7b0986f279517723d598a70d34.png) 0 100%/.33333rem no-repeat,url(5ef61c8b5bbcf1f2fd23333fe6750236.png) 100% 0/.352rem no-repeat,url(e0482524b38230452ba25a446fdef8c5.png)
}*/

@media screen and (min-width: 900px) and (max-width:1100px) {
    .page-1 {
        display:none
    }
}

.page-1>div {
    /*-webkit-transform: translateY(-50%);*/
    position: absolute;
    top: 0%;
    
/*    transform: translateY(-50%)*/
}

.page-1 .key3 {
    -webkit-animation: key2 1s 3s backwards;
    animation: key2 1s 3s backwards;
    bottom: -.05067rem;
    left: .21067rem;
    position: absolute;
    width: .576rem
}

.page-1 .key2 {
    -webkit-animation: key2 2s backwards;
    animation: key2 2s backwards;
    display: block;
    margin: .2rem auto auto .03467rem;
    width: .792rem
}

.page-1 .key1 {
    -webkit-animation: key1 1s 1s backwards;
    animation: key1 1s 1s backwards;
    left: .06rem;
    position: absolute;
    top: 0.45rem;
    width: .88rem
}

@-webkit-keyframes key1 {
    0% {
        -webkit-transform: scale(1);
        opacity: 0;
        transform: scale(1)
    }

    75% {
        -webkit-transform: scale(1.2);
        opacity: 1;
        transform: scale(1.2)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes key1 {
    0% {
        -webkit-transform: scale(1);
        opacity: 0;
        transform: scale(1)
    }

    75% {
        -webkit-transform: scale(1.2);
        opacity: 1;
        transform: scale(1.2)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes key2 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes key2 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.main-container {
    -webkit-flex-direction: column;
    -webkit-justify-content: space-between;
    /*background: url(4dedbba97f35bf54d826d20603970820.jpg),url(e0482524b38230452ba25a446fdef8c5.png);*/
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between
}

@media screen and (min-width: 900px) and (max-width:1100px) {
   /* .main-container {
        background:url(4dedbba97f35bf54d826d20603970820.jpg) 50%/100% 100% no-repeat,url(e0482524b38230452ba25a446fdef8c5.png)
    }*/
}

.main-container>#header,.main-container>#nav {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto
}

.main-container>#main {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto
}

#header .title {
    display: block;
    width: 94%;
    margin: 0rem 0 0 .03067rem;
    /*width: .87867rem*/
}

#main {
    margin-left: .03067rem
}

#main,#main>.viewpoint {
    display: -webkit-flex;
    display: flex
}

#main>.viewpoint {
    -webkit-align-items: flex-start;
    -webkit-flex: 0 0 0.42667rem;
    -webkit-flex-direction: column;
    align-items: flex-start;
    flex: 0 0 0.42667rem;
    flex-direction: column
}

#main>.intro {
    -webkit-flex: 0 0 0.50667rem;
    flex: 0 0 0.50667rem
}

#main .title {
    -webkit-flex: 0 0 3.5em;
    color: #505050;
    flex: 0 0 3.5em;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    #main .title {
        font-size:28px
    }
}

#main .content {
    -webkit-flex: 0 1 0.62rem;
    color: #4f4f4f;
    flex: 0 1 0.62rem;
    font-size: 13px;
    line-height: 1.5;
    overflow: hidden;
    padding-right: 1em;
    position: relative;
    text-align: justify
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    #main .content {
        font-size:24px
    }
}

#main .content>div:first-child {
    height: 100%;
    margin-right: -50px;
    overflow-y: scroll;
    padding-right: calc(50px + 1em);
    width: 100%
}

#main .content .z-scroller_bar {
    background: #9ea2a6;
    border-radius: 10px;
    height: 70%;
    position: absolute;
    right: 2px;
    top: 0;
    width: 4px
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    #main .content .z-scroller_bar {
        width:8px
    }
}

#main .content .z-scroller_thumb {
    background: #636161;
    border-radius: 10px;
    left: 0;
    position: absolute;
    top: 0;
    width: 4px
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    #main .content .z-scroller_thumb {
        width:8px
    }
}

#main .content .z-scroller_thumb>img {
    display: none;
    height: 100%;
    width: 100%
}

#main .username {
    color: #c30b2d;
    font-size: 18px;
    font-weight: 600;
    line-height: 1
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    #main .username {
        font-size:32px
    }
}

#main .company,#main .position {
    color: #3e3e3e;
    font-size: 12px;
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    #main .company,#main .position {
        font-size:24px
    }
}

#main .company {
    font-weight: 700;
    max-height: 3em
}

#main .intro {
    -webkit-flex-direction: column;
    /*background: url(34bc6b3bc2b118bad46346b95e024094.png) 0 100%/.504rem no-repeat;*/
    display: -webkit-flex;
    display: flex;
    flex-direction: column
}

#main .intro>p {
    margin: 0 0 0 .04667rem;
    padding-right: 1em
}

#main .intro .username {
    margin-bottom: .016rem
}

#main .avatar {
    -webkit-align-self: center;
    -webkit-flex: 0 1 auto;
    align-self: center;
    flex: 0 1 auto;
    /*margin-top: 0.1rem;*/
    position: relative
}

#main .avatar>img.user_big {
    display: block;
    width: 54%;
    margin-left: .0933rem;
    margin-bottom: 0.02rem;
}
#main .avatar>img.user_big1 {
    display: block;
    width: 70%;
    margin-left: .05333rem
}

#main .generate-btn {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    bottom: -.12rem;
    left: 0;
    margin: auto;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    width: .34rem
}

#main .generate-btn>img {
    display: block;
    width: 100%;
    margin-left:-0.02rem;
}

.locatbar {
    background: #3e3e3e;
    height: .00933rem;
    margin-top: .06rem;
    position: relative;
    width: 100%;
    z-index: 9
}

.locatbar>.bg {
    bottom: 0;
    position: absolute;
    width: 100%
}

.locatbar>.locater {
    background: url(e556d7ebef6a66a8a197dc5660ebc073.png) 50%/100% no-repeat;
    box-sizing: border-box;
    color: #b80224;
    font-size: 12px;
    font-weight: 700;
    height: .084rem;
    left: .01333rem;
    padding: .01333rem .01333rem 0 0;
    position: absolute;
    text-align: right;
    top: -.04667rem;
    width: .056rem
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    .locatbar>.locater {
        font-size:28px
    }
}

#nav {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    transition: scrollleft 1s;
    width: 100%
}

#nav .users {
    display: -webkit-flex;
    display: flex;
    float: left
}

#nav li {
    background: #56585c url(cb526733ec116a8fa6ddec57d6103ff8.png) bottom/auto .29467rem no-repeat;
    height: .33333rem;
    overflow: hidden;
    position: relative;
    width: .27333rem
}

#nav li.active:after {
    background: none
}

#nav li:after {
    background: rgba(0,0,0,.6);
    content: "";
    height: 100%
}

#nav li:after,#nav p {
    position: absolute;
    width: 100%
}

#nav p {
    background: url(33941cfca278e6930e2574b7c7c072f3.png) 50%/100% no-repeat;
    bottom: 0;
    color: #fff;
    font-size: 12px;
    height: .124rem;
    line-height: .124rem;
    margin: 0;
    text-align: center
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    #nav p {
        font-size:28px
    }
}

#nav:after {
    clear: both;
    content: "";
    display: block
}

#index {
    font-size: 12px;
    position: absolute;
    right: 0;
    top: .15333rem;
    width: 1.5em;
    z-index: 8888
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    #index {
        font-size:24px
    }
}

#index li {
    color: #b3b3b3;
    line-height: 2;
    position: relative;
    font-size: 14px;
    z-index: 9999
}

#index li.active {
    color: #b80224;
    font-size: 16px
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    #index li.active {
        font-size:26px
    }
}

#index li:after {
    content: "-";
    position: absolute;
    right: 0
}

.dialog {
    background: rgba(0,0,0,.7);
    bottom: 0;
    display: none;
    padding: .04rem 0 .052rem;
    top: 0;
    z-index: 999
}

.dialog,.dialog>div {
    left: 0;
    position: absolute;
    right: 0
}

.dialog>div {
    -webkit-transform: translateY(-50%);
    margin: auto;
    top: 50%;
    transform: translateY(-50%)
}

.dialog img {
    display: block
}

.dialog .dialog-close {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    display: block;
    margin: auto .06667rem auto auto;
    outline: none;
    padding: 0;
    width: .048rem
}

.dialog .dialog-close>img {
    width: 100%
}

.dialog .poster {
    height: 1.368rem;
    margin: auto;
    width: .76933rem
}

.dialog .bottom-img {
    color: #fff;
    font-size: 12px;
    line-height: 2;
    margin: auto;
    text-align: center
}

@media screen and (min-width: 900px) and (max-width:1100px) {
    .dialog .bottom-img {
        font-size:32px
    }
}

.music-btn {
  float: right;
  background: url('./on.png') no-repeat;
  background-size: 100% 100%;
  width: 34px;
  height: 34px;
  position: absolute;
  top: 1%;
  left: 6%;
  z-index: 100;
}
.music-switch {
  animation: around 5s;
  -webkit-animation: around 5s infinite linear ;
}
@keyframes around {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes around {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}