body * {
    box-sizing: border-box;
    /* flex-shrink: 0 */
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

a {
    color: #fff;
    text-decoration: none
}

@media screen and (min-width:700px) {
    html {
        display: flex;
        justify-content: center
    }
}

body {
    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei
}

button {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: 0;
    background-color: transparent
}

img {
    width: 100%;
    height: 100%
}

button:active {
    opacity: .6
}

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

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

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

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

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

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

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

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

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

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

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