html {
    font-size: calc(100vw / 390);
}


/* 容器样式 */

.app {
    margin: 0 auto;
    background-color: #eeeeee;
    min-height: 100vh;
    /*
    有下部导航条时，才需要
    padding-bottom: 65rem;*/
    /* overflow-x: hidden; */
}
.app-nav{
    padding-bottom: 65rem;
}


/* 移动端：保持适配 */

@media (max-width: 430px) {
    .app {
        width: 100%;
        /* 占满整个视口宽度 */
        /* 使用适配后的基础字体 */
    }
}

button {
    border: 0;
    background-color: transparent;
}


/* PC端：固定宽度 */

@media (min-width: 430px) {
    html {
        font-size: 1.1px;
        /* PC端恢复到默认字体大小 */
    }
    .app {
        width: 430px;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

input {
    border: 0;
    outline: none;
    background-color: #fafafa;
}

a {
    text-decoration: none;
    color: #606060;
    cursor: pointer;
}

select {
    color: #606060;
    outline: none;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #fafafa;
}

textarea {
    outline: none;
    border: 0;
    width: 100%;
    height: 100%;
    resize: none;
    background-color: #fafafa;
}

* {
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.self-baseline {
    align-self: baseline;
}

.self-stretch {
    align-self: stretch;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.grow {
    flex-grow: 1;
}

.grow-0 {
    flex-grow: 0;
}

.shrink {
    flex-shrink: 1;
}

.shrink-0 {
    flex-shrink: 0;
}

.relative {
    position: relative;
}

.ml-2 {
    margin-left: 2rem;
}

.mt-2 {
    margin-top: 2rem;
}

.ml-4 {
    margin-left: 4rem;
}

.mt-4 {
    margin-top: 4rem;
}

.ml-6 {
    margin-left: 6rem;
}

.mt-6 {
    margin-top: 6rem;
}

.ml-8 {
    margin-left: 8rem;
}

.mt-8 {
    margin-top: 8rem;
}

.ml-10 {
    margin-left: 10rem;
}

.mt-10 {
    margin-top: 10rem;
}

.ml-12 {
    margin-left: 12rem;
}

.mt-12 {
    margin-top: 12rem;
}

.ml-14 {
    margin-left: 14rem;
}

.mt-14 {
    margin-top: 14rem;
}

.ml-16 {
    margin-left: 16rem;
}

.mt-16 {
    margin-top: 16rem;
}

.ml-18 {
    margin-left: 18rem;
}

.mt-18 {
    margin-top: 18rem;
}

.ml-20 {
    margin-left: 20rem;
}

.mt-20 {
    margin-top: 20rem;
}

.ml-22 {
    margin-left: 22rem;
}

.mt-22 {
    margin-top: 22rem;
}

.ml-24 {
    margin-left: 24rem;
}

.mt-24 {
    margin-top: 24rem;
}

.ml-26 {
    margin-left: 26rem;
}

.mt-26 {
    margin-top: 26rem;
}

.ml-28 {
    margin-left: 28rem;
}

.mt-28 {
    margin-top: 28rem;
}

.ml-30 {
    margin-left: 30rem;
}

.mt-30 {
    margin-top: 30rem;
}

.ml-32 {
    margin-left: 32rem;
}

.mt-32 {
    margin-top: 32rem;
}

.ml-34 {
    margin-left: 34rem;
}

.mt-34 {
    margin-top: 34rem;
}

.ml-36 {
    margin-left: 36rem;
}

.mt-36 {
    margin-top: 36rem;
}

.ml-38 {
    margin-left: 38rem;
}

.mt-38 {
    margin-top: 38rem;
}

.ml-40 {
    margin-left: 40rem;
}

.mt-40 {
    margin-top: 40rem;
}

.ml-42 {
    margin-left: 42rem;
}

.mt-42 {
    margin-top: 42rem;
}

.ml-44 {
    margin-left: 44rem;
}

.mt-44 {
    margin-top: 44rem;
}

.ml-46 {
    margin-left: 46rem;
}

.mt-46 {
    margin-top: 46rem;
}

.ml-48 {
    margin-left: 48rem;
}

.mt-48 {
    margin-top: 48rem;
}

.ml-50 {
    margin-left: 50rem;
}

.mt-50 {
    margin-top: 50rem;
}

.ml-52 {
    margin-left: 52rem;
}

.mt-52 {
    margin-top: 52rem;
}

.ml-54 {
    margin-left: 54rem;
}

.mt-54 {
    margin-top: 54rem;
}

.ml-56 {
    margin-left: 56rem;
}

.mt-56 {
    margin-top: 56rem;
}

.ml-58 {
    margin-left: 58rem;
}

.mt-58 {
    margin-top: 58rem;
}

.ml-60 {
    margin-left: 60rem;
}

.mt-60 {
    margin-top: 60rem;
}

.ml-62 {
    margin-left: 62rem;
}

.mt-62 {
    margin-top: 62rem;
}

.ml-64 {
    margin-left: 64rem;
}

.mt-64 {
    margin-top: 64rem;
}

.ml-66 {
    margin-left: 66rem;
}

.mt-66 {
    margin-top: 66rem;
}

.ml-68 {
    margin-left: 68rem;
}

.mt-68 {
    margin-top: 68rem;
}

.ml-70 {
    margin-left: 70rem;
}

.mt-70 {
    margin-top: 70rem;
}

.ml-72 {
    margin-left: 72rem;
}

.mt-72 {
    margin-top: 72rem;
}

.ml-74 {
    margin-left: 74rem;
}

.mt-74 {
    margin-top: 74rem;
}

.ml-76 {
    margin-left: 76rem;
}

.mt-76 {
    margin-top: 76rem;
}

.ml-78 {
    margin-left: 78rem;
}

.mt-78 {
    margin-top: 78rem;
}

.ml-80 {
    margin-left: 80rem;
}

.mt-80 {
    margin-top: 80rem;
}

.ml-82 {
    margin-left: 82rem;
}

.mt-82 {
    margin-top: 82rem;
}

.ml-84 {
    margin-left: 84rem;
}

.mt-84 {
    margin-top: 84rem;
}

.ml-86 {
    margin-left: 86rem;
}

.mt-86 {
    margin-top: 86rem;
}

.ml-88 {
    margin-left: 88rem;
}

.mt-88 {
    margin-top: 88rem;
}

.ml-90 {
    margin-left: 90rem;
}

.mt-90 {
    margin-top: 90rem;
}

.ml-92 {
    margin-left: 92rem;
}

.mt-92 {
    margin-top: 92rem;
}

.ml-94 {
    margin-left: 94rem;
}

.mt-94 {
    margin-top: 94rem;
}

.ml-96 {
    margin-left: 96rem;
}

.mt-96 {
    margin-top: 96rem;
}

.ml-98 {
    margin-left: 98rem;
}

.mt-98 {
    margin-top: 98rem;
}

.ml-100 {
    margin-left: 100rem;
}

.mt-100 {
    margin-top: 100rem;
}

/* 星星容器 */
.mystar{
    width: 80rem;
    height: 15rem;
    background-size: contain;
    background-repeat: no-repeat;  /* 防止背景图重复 */
    background-position: center;  /* 背景图居中显示 */
    display: inline-block;
}
.mystar-0{background-image: url("../images/mystar/star-0.png");}
.mystar-1{background-image: url("../images/mystar/star-1.png");}
.mystar-2{background-image: url("../images/mystar/star-2.png");}
.mystar-3{background-image: url("../images/mystar/star-3.png");}
.mystar-4{background-image: url("../images/mystar/star-4.png");}
.mystar-5{background-image: url("../images/mystar/star-5.png");}
.mystar-0-5{background-image: url("../images/mystar/star-0.5.png");}
.mystar-1-5{background-image: url("../images/mystar/star-1.5.png");}
.mystar-2-5{background-image: url("../images/mystar/star-2.5.png");}
.mystar-3-5{background-image: url("../images/mystar/star-3.5.png");}
.mystar-4-5{background-image: url("../images/mystar/star-4.5.png");}