:root {
    --gray-3: #333;
    --gray-6: #666;
    --gray-9: #999;
    --gray-c: #ccc;
    --gray-d: #ddd;
    --gray-e: #eee;
    --gray-f5: #f5f5f5;
    --gray-fa: #fafafa;
    --gray-f9fafe: #f9fafe;
    --blue: #0c7bc2;
    --blue-2: #2ba6e1;
    --blue-3: #3bbbfa;
    --blue-4: #b7e1f4;
    --red: #e50112;
    --black: #1a1a1a;
    --black-2: #2f2f2f;
    --black-3: #3a3a3a;
    --green: #009944;

    --size-0: 10px;
    --size-1: 12px;
    --size-2: 14px;
    --size-3: 16px;
    --size-4: 18px;
    --size-5: 20px;
    --size-6: 22px;
    --size-7: 24px;
    --size-8: 26px;
    --size-9: 28px;
    --size-10: 30px;
    --size-11: 32px;
    --size-12: 34px;
    --size-13: 36px;
    --size-14: 38px;
    --size-15: 40px;
    --size-16: 42px;
    --size-17: 44px;
    --size-18: 46px;
    --size-19: 48px;
    --size-20: 50px;
    --size-21: 52px;
    --size-22: 54px;
    --size-23: 56px;
    --size-24: 58px;
    --size-25: 60px;
    --size-26: 62px;
    --size-27: 64px;
    --size-28: 66px;
    --size-29: 68px;
    --size-30: 70px;
    --size-31: 72px;
    --size-32: 74px;
    --size-33: 76px;
    --size-34: 78px;
    --size-35: 80px;
    --size-36: 82px;
    --size-37: 84px;
    --size-38: 86px;
    --size-39: 88px;
    --size-40: 90px;
    --size-41: 92px;
    --size-42: 94px;
    --size-43: 96px;
    --size-44: 98px;
    --size-45: 100px;
}

* {
    box-sizing: border-box;
    outline: none;
}

body,
p {
    margin: 0;
}
body {
    font-size: var(--size-2);
    color: var(--gray-3);
    font-family: '微软雅黑';
}
img {
    max-width: 100%;
    max-height: 100%;
}
button {
    border: none;
}
ul {
    list-style: none;
}
a,
a:hover,
a:active,
a.visited {
    color: inherit;
    text-decoration: none;
}

.flex {
    display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.position-horizontal {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.position-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.position-fixed {
    position: fixed;
}

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

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ellipsis-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.self-horizontal {
    transform: translateX(-50%);
}

.self-vertical {
    transform: translateY(-50%);
}

.self-center {
    transform: translate(-50%,-50%);
}

.obj-cover {
    object-fit: cover;
}

.obj-contain {
    object-fit: contain;
}

.round {
    border-radius: 50%;
}

.no-break {
    word-break: keep-all;
    white-space:nowrap;
}

.break {
    word-break: break-all;
}