* {
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track {
    background-color: #f4f4f4;
}

::-webkit-scrollbar-thumb {
    background-color: #dadada;
    border-radius: 10px;
}

.box-view {
    width: 100%;
    max-width: 450px;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    overflow: hidden;
}
.box-btn {
    width: 100%;
    max-width: 450px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
}

.box-content {
    width: 100%;
    height: calc(100vh - 70px);
    overflow-x: hidden;
}

.display-none {
    display: none;
}

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

.view-column {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.view-left {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.view-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.hr {
    width: 100%;
    height: 1px;
}

/* 行高 */
.lh-0 {
    line-height: 0;
}

.lh-1 {
    line-height: 1;
}

.lh-2 {
    line-height: 2;
}

/* 宽度 VW */
.wbvh100 {
    width: 100vw;
}

/* 高度 VH */
.hbvh100 {
    height: 100vh;
}

/* 宽度百分比 */
.wb25 {
    width: 20%;
}
.wb30 {
    width: 30%;
}
.wb50 {
    width: 50%;
}
.wb70 {
    width: 70%;
}
.wb100 {
    width: 100%;
}

/* 宽度减像素 */
.wb-5 {
    width: calc(100% - 5px);
}

.wb-10 {
    width: calc(100% - 10px);
}

.wb-15 {
    width: calc(100% - 15px);
}

.wb-20 {
    width: calc(100% - 20px);
}

.wb-25 {
    width: calc(100% - 25px);
}

.wb-30 {
    width: calc(100% - 30px);
}

.wb-35 {
    width: calc(100% - 35px);
}

.wb-40 {
    width: calc(100% - 40px);
}

.wb-50 {
    width: calc(100% - 50px);
}

.wb-60 {
    width: calc(100% - 60px);
}

.wb-70 {
    width: calc(100% - 70px);
}

.wb-80 {
    width: calc(100% - 80px);
}

.wb-90 {
    width: calc(100% - 90px);
}

.wb-100 {
    width: calc(100% - 100px);
}

/* 像素宽度 */
.wbpx10 {
    width: 10px;
}

.wbpx20 {
    width: 20px;
}

.wbpx30 {
    width: 30px;
}

.wbpx40 {
    width: 40px;
}

.wbpx50 {
    width: 50px;
}

.wbpx60 {
    width: 60px;
}

.wbpx70 {
    width: 70px;
}

.wbpx80 {
    width: 80px;
}

.wbpx90 {
    width: 90px;
}

.wbpx100 {
    width: 100px;
}

/* 高度百分比 */
.hb25 {
    height: 20%;
}

.hb50 {
    height: 50%;
}

.hb100 {
    height: 100%;
}

/* 像素高度 */
.hbpx10 {
    height: 10px;
}

.hbpx20 {
    height: 20px;
}

.hbpx30 {
    height: 30px;
}

.hbpx40 {
    height: 40px;
}

.hbpx42 {
    height: 42px;
}

.hbpx45 {
    height: 45px;
}

.hbpx50 {
    height: 50px;
}

.hbpx60 {
    height: 60px;
}

.hbpx70 {
    height: 70px;
}

.hbpx80 {
    height: 80px;
}

.hbpx90 {
    height: 90px;
}

.hbpx100 {
    height: 100px;
}

.hbpx200 {
    height: 200px;
}

/* 外边距 */
.margin0 {
    margin: 0;
}

.margin5 {
    margin: 5px;
}

.margin10 {
    margin: 10px;
}

.margin15 {
    margin: 15px;
}

.margin20 {
    margin: 20px;
}

.marginT0 {
    margin-top: 0;
}

.marginT5 {
    margin-top: 5px;
}

.marginT10 {
    margin-top: 10px;
}

.marginT15 {
    margin-top: 15px;
}

.marginT20 {
    margin-top: 20px;
}

.marginT50 {
    margin-top: 50px;
}

.marginT100 {
    margin-top: 100px;
}

.marginB0 {
    margin-bottom: 0;
}

.marginB5 {
    margin-bottom: 5px;
}

.marginB10 {
    margin-bottom: 10px;
}

.marginB15 {
    margin-bottom: 15px;
}

.marginB20 {
    margin-bottom: 20px;
}

.marginB50 {
    margin-bottom: 50px;
}

.marginB100 {
    margin-bottom: 100px;
}

.marginL0 {
    margin-left: 0;
}

.marginL5 {
    margin-left: 5px;
}

.marginL10 {
    margin-left: 10px;
}

.marginL15 {
    margin-left: 15px;
}

.marginL20 {
    margin-left: 20px;
}

.marginL50 {
    margin-left: 50px;
}

.marginL100 {
    margin-left: 100px;
}

.marginR0 {
    margin-right: 0;
}

.marginR5 {
    margin-right: 5px;
}

.marginR10 {
    margin-right: 10px;
}

.marginR15 {
    margin-right: 15px;
}

.marginR20 {
    margin-right: 20px;
}

.marginR50 {
    margin-right: 50px;
}

.marginR100 {
    margin-right: 100px;
}

/* 内边距 */
.padding0 {
    padding: 0;
}

.padding5 {
    padding: 5px;
}

.padding10 {
    padding: 10px;
}

.padding15 {
    padding: 15px;
}

.padding20 {
    padding: 20px;
}

.paddingT0 {
    padding-top: 0px;
}

.paddingT5 {
    padding-top: 5px;
}

.paddingT10 {
    padding-top: 10px;
}

.paddingT15 {
    padding-top: 15px;
}

.paddingT20 {
    padding-top: 20px;
}

.paddingT50 {
    padding-top: 50px;
}

.paddingT60 {
    padding-top: 60px;
}

.paddingB0 {
    padding-bottom: 0px;
}

.paddingB5 {
    padding-bottom: 5px;
}

.paddingB10 {
    padding-bottom: 10px;
}

.paddingB15 {
    padding-bottom: 15px;
}

.paddingB20 {
    padding-bottom: 20px;
}

.paddingL0 {
    padding-left: 0px;
}

.paddingL5 {
    padding-left: 5px;
}

.paddingL10 {
    padding-left: 10px;
}

.paddingL15 {
    padding-left: 15px;
}

.paddingL20 {
    padding-left: 20px;
}

.paddingR0 {
    padding-right: 0px;
}

.paddingR5 {
    padding-right: 5px;
}

.paddingR10 {
    padding-right: 10px;
}

.paddingR15 {
    padding-right: 15px;
}

.paddingR20 {
    padding-right: 20px;
}

/* 定位类型 */
.positionR {
    position: relative;
}

.positionA {
    position: absolute;
}

.positionF {
    position: fixed;
}

/* 定位头部边距 */
.top0 {
    top: 0;
}

.top5 {
    top: 5px;
}

.top10 {
    top: 10px;
}

.top15 {
    top: 15px;
}

.top20 {
    top: 20px;
}

/* 定位底部边距 */
.bottom0 {
    bottom: 0;
}

.bottom5 {
    bottom: 5px;
}

.bottom10 {
    bottom: 10px;
}

.bottom15 {
    bottom: 15px;
}

.bottom20 {
    bottom: 20px;
}

/* 定位左边距 */
.left0 {
    left: 0;
}

.left5 {
    left: 5px;
}

.left10 {
    left: 10px;
}

.left15 {
    left: 15px;
}

.left20 {
    left: 20px;
}

/* 定位右边距 */
.right0 {
    right: 0;
}

.right5 {
    right: 5px;
}

.right10 {
    right: 10px;
}

.right15 {
    right: 15px;
}

.right20 {
    right: 20px;
}

/* 显示层数 */
.index1 {
    z-index: 1;
}

.index2 {
    z-index: 2;
}

.index3 {
    z-index: 3;
}

.index4 {
    z-index: 4;
}

.index5 {
    z-index: 5;
}

.index6 {
    z-index: 6;
}

.index7 {
    z-index: 7;
}

.index8 {
    z-index: 8;
}

.index9 {
    z-index: 9;
}

.index10 {
    z-index: 10;
}

/* 字体加粗 */
.font-bold {
    font-weight: bold;
}

/* 字体大小 */
.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

.font22 {
    font-size: 22px;
}

.font24 {
    font-size: 24px;
}

.font26 {
    font-size: 26px;
}

.font28 {
    font-size: 28px;
}

.font30 {
    font-size: 30px;
}

.font32 {
    font-size: 32px;
}

.font34 {
    font-size: 34px;
}

.font36 {
    font-size: 36px;
}

/* 文本对齐 */
.text-center {
    text-align: center;
}

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

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

/* 字体颜色 */
.color-blue {
    color: rgba(37, 99, 235, 1);
}

.color-red {
    color: rgba(221, 84, 84, 1);
}

.color-green {
    color: rgba(22, 163, 74, 1);
}

.color-yellow {
    color: rgba(202, 138, 4, 1);
}

.color-yellow1 {
    color: #faa320;
}

.color-grey {
    color: rgba(107, 114, 128, 1);
}

.color-grey1 {
    color: rgb(187, 187, 187);
}

.color-black {
    color: rgba(0, 0, 0, 1);
}

.color-purple {
    color: rgba(168, 85, 247, 1);
}

.color-pink {
    color: rgba(255, 0, 170, 1);
}

.color-white {
    color: rgba(255, 255, 255, 1);
}

/* 字体间距 */
.letter-spacing-1 {
    letter-spacing: 1px;
}

.letter-spacing-2 {
    letter-spacing: 2px;
}

.letter-spacing-3 {
    letter-spacing: 3px;
}

.letter-spacing-4 {
    letter-spacing: 4px;
}

.letter-spacing-5 {
    letter-spacing: 5px;
}

.letter-spacing-6 {
    letter-spacing: 6px;
}

.letter-spacing-7 {
    letter-spacing: 7px;
}

.letter-spacing-8 {
    letter-spacing: 8px;
}

.letter-spacing-9 {
    letter-spacing: 9px;
}

.letter-spacing-10 {
    letter-spacing: 10px;
}

/* 背景颜色1 */
.bg-blue {
    background-color: rgba(37, 99, 235, 1);
}

.bg-red {
    background-color: rgba(221, 84, 84, 1);
}

.bg-green {
    background-color: rgba(22, 163, 74, 1);
}

.bg-yellow {
    background-color: rgba(202, 138, 4, 1);
}

.bg-grey {
    background-color: rgba(107, 114, 128, 1);
}

.bg-black {
    background-color: rgba(0, 0, 0, 1);
}

.bg-purple {
    background-color: rgba(168, 85, 247, 1);
}

.bg-pink {
    background-color: rgba(255, 0, 170, 1);
}

.bg-white {
    background-color: rgba(255, 255, 255, 1);
}

/* 背景颜色 + 透明度 0.1 */
.bg-blue-1 {
    background-color: rgba(37, 99, 235, 0.1);
}

.bg-red-1 {
    background-color: rgba(221, 84, 84, 0.1);
}

.bg-green-1 {
    background-color: rgba(22, 163, 74, 0.1);
}

.bg-yellow-1 {
    background-color: rgba(202, 138, 4, 0.1);
}

.bg-grey-1 {
    background-color: rgba(107, 114, 128, 0.1);
}

.bg-black-1 {
    background-color: rgba(0, 0, 0, 0.1);
}

.bg-purple-1 {
    background-color: rgba(168, 85, 247, 0.1);
}

.bg-pink-1 {
    background-color: rgba(255, 0, 170, 0.1);
}

.bg-white-1 {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 背景颜色 + 透明度 0.2 */
.bg-blue-2 {
    background-color: rgba(37, 99, 235, 0.2);
}

.bg-red-2 {
    background-color: rgba(221, 84, 84, 0.2);
}

.bg-green-2 {
    background-color: rgba(22, 163, 74, 0.2);
}

.bg-yellow-2 {
    background-color: rgba(202, 138, 4, 0.2);
}

.bg-grey-2 {
    background-color: rgba(107, 114, 128, 0.2);
}

.bg-black-2 {
    background-color: rgba(0, 0, 0, 0.2);
}

.bg-purple-2 {
    background-color: rgba(168, 85, 247, 0.2);
}

.bg-pink-2 {
    background-color: rgba(255, 0, 170, 0.2);
}

.bg-white-2 {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 背景颜色 + 透明度 0.3 */
.bg-blue-3 {
    background-color: rgba(37, 99, 235, 0.3);
}

.bg-red-3 {
    background-color: rgba(221, 84, 84, 0.3);
}

.bg-green-3 {
    background-color: rgba(22, 163, 74, 0.3);
}

.bg-yellow-3 {
    background-color: rgba(202, 138, 4, 0.3);
}

.bg-grey-3 {
    background-color: rgba(107, 114, 128, 0.3);
}

.bg-black-3 {
    background-color: rgba(0, 0, 0, 0.3);
}

.bg-purple-3 {
    background-color: rgba(168, 85, 247, 0.3);
}

.bg-pink-3 {
    background-color: rgba(255, 0, 170, 0.3);
}

.bg-white-3 {
    background-color: rgba(255, 255, 255, 0.3);
}

/* 背景颜色 + 透明度 0.4 */
.bg-blue-4 {
    background-color: rgba(37, 99, 235, 0.4);
}

.bg-red-4 {
    background-color: rgba(221, 84, 84, 0.4);
}

.bg-green-4 {
    background-color: rgba(22, 163, 74, 0.4);
}

.bg-yellow-4 {
    background-color: rgba(202, 138, 4, 0.4);
}

.bg-grey-4 {
    background-color: rgba(107, 114, 128, 0.4);
}

.bg-black-4 {
    background-color: rgba(0, 0, 0, 0.4);
}

.bg-purple-4 {
    background-color: rgba(168, 85, 247, 0.4);
}

.bg-pink-4 {
    background-color: rgba(255, 0, 170, 0.4);
}

.bg-white-4 {
    background-color: rgba(255, 255, 255, 0.4);
}

/* 背景颜色 + 透明度 0.5 */
.bg-blue-5 {
    background-color: rgba(37, 99, 235, 0.5);
}

.bg-red-5 {
    background-color: rgba(221, 84, 84, 0.5);
}

.bg-green-5 {
    background-color: rgba(22, 163, 74, 0.5);
}

.bg-yellow-5 {
    background-color: rgba(202, 138, 4, 0.5);
}

.bg-grey-5 {
    background-color: rgba(107, 114, 128, 0.5);
}

.bg-black-5 {
    background-color: rgba(0, 0, 0, 0.5);
}

.bg-purple-5 {
    background-color: rgba(168, 85, 247, 0.5);
}

.bg-pink-5 {
    background-color: rgba(255, 0, 170, 0.5);
}

.bg-white-5 {
    background-color: rgba(255, 255, 255, 0.5);
}

/* 背景颜色 + 透明度 0.6 */
.bg-blue-6 {
    background-color: rgba(37, 99, 235, 0.6);
}

.bg-red-6 {
    background-color: rgba(221, 84, 84, 0.6);
}

.bg-green-6 {
    background-color: rgba(22, 163, 74, 0.6);
}

.bg-yellow-6 {
    background-color: rgba(202, 138, 4, 0.6);
}

.bg-grey-6 {
    background-color: rgba(107, 114, 128, 0.6);
}

.bg-black-6 {
    background-color: rgba(0, 0, 0, 0.6);
}

.bg-purple-6 {
    background-color: rgba(168, 85, 247, 0.6);
}

.bg-pink-6 {
    background-color: rgba(255, 0, 170, 0.6);
}

.bg-white-6 {
    background-color: rgba(255, 255, 255, 0.6);
}

/* 背景颜色 + 透明度 0.7 */
.bg-blue-7 {
    background-color: rgba(37, 99, 235, 0.7);
}

.bg-red-7 {
    background-color: rgba(221, 84, 84, 0.7);
}

.bg-green-7 {
    background-color: rgba(22, 163, 74, 0.7);
}

.bg-yellow-7 {
    background-color: rgba(202, 138, 4, 0.7);
}

.bg-grey-7 {
    background-color: rgba(107, 114, 128, 0.7);
}

.bg-black-7 {
    background-color: rgba(0, 0, 0, 0.7);
}

.bg-purple-7 {
    background-color: rgba(168, 85, 247, 0.7);
}

.bg-pink-7 {
    background-color: rgba(255, 0, 170, 0.7);
}

.bg-white-7 {
    background-color: rgba(255, 255, 255, 0.7);
}

/* 背景颜色 + 透明度 0.8 */
.bg-blue-8 {
    background-color: rgba(37, 99, 235, 0.8);
}

.bg-red-8 {
    background-color: rgba(221, 84, 84, 0.8);
}

.bg-green-8 {
    background-color: rgba(22, 163, 74, 0.8);
}

.bg-yellow-8 {
    background-color: rgba(202, 138, 4, 0.8);
}

.bg-grey-8 {
    background-color: rgba(107, 114, 128, 0.8);
}

.bg-black-8 {
    background-color: rgba(0, 0, 0, 0.8);
}

.bg-purple-8 {
    background-color: rgba(168, 85, 247, 0.8);
}

.bg-pink-8 {
    background-color: rgba(255, 0, 170, 0.8);
}

.bg-white-8 {
    background-color: rgba(255, 255, 255, 0.8);
}

/* 背景颜色 + 透明度 0.9 */
.bg-blue-9 {
    background-color: rgba(37, 99, 235, 0.9);
}

.bg-red-9 {
    background-color: rgba(221, 84, 84, 0.9);
}

.bg-green-9 {
    background-color: rgba(22, 163, 74, 0.9);
}

.bg-yellow-9 {
    background-color: rgba(202, 138, 4, 0.9);
}

.bg-grey-9 {
    background-color: rgba(107, 114, 128, 0.9);
}

.bg-black-9 {
    background-color: rgba(0, 0, 0, 0.9);
}

.bg-purple-9 {
    background-color: rgba(168, 85, 247, 0.9);
}

.bg-pink-9 {
    background-color: rgba(255, 0, 170, 0.9);
}

.bg-white-9 {
    background-color: rgba(255, 255, 255, 0.9);
}

/* 边框圆角 */
.bk-r5 {
    border-radius: 5px;
}

.bk-r10 {
    border-radius: 10px;
}

.bk-r15 {
    border-radius: 15px;
}

.bkr20 {
    border-radius: 20px;
}

.bk-r25 {
    border-radius: 25px;
}

.bk-r30 {
    border-radius: 30px;
}

.bk-r35 {
    border-radius: 35px;
}

.bk-r40 {
    border-radius: 40px;
}

.bk-r45 {
    border-radius: 45px;
}

.bk-r50 {
    border-radius: 50px;
}

.bk-rb50 {
    border-radius: 50%;
}

/* 边框实线 */
.bk-s1 {
    border: 1px solid;
}

.bk-s2 {
    border: 2px solid;
}

.bk-l-s10 {
    border-left: 10px solid;
}

/* 边框虚线 */
.bk-d1 {
    border: 1px dashed;
}

.bk-d2 {
    border: 2px dashed;
}

/* 底部边框 */
.bk-bottom-s1 {
    border-bottom: 1px solid #ddd;
}

/* 边框颜色 */
.bk-c-white0 {
    border-color: rgba(255, 255, 255, 0);
}

.bk-c-white {
    border-color: rgba(255, 255, 255, 1);
}

.bk-c-white-5 {
    border-color: rgba(255, 255, 255, 0.5);
}

.bk-c-black {
    border-color: rgba(0, 0, 0, 1);
}

.bk-c-black-5 {
    border-color: rgba(0, 0, 0, 0.5);
}

.bk-c-red {
    border-color: rgb(221, 84, 84);
}

.bk-c-red-5 {
    border-color: rgba(221, 84, 84, 0.5);
}

.bk-c-blue {
    border-color: rgba(37, 99, 235, 1);
}

.bk-c-blue1 {
    border-color: #10aeff;
}

.bk-c-blue-5 {
    border-color: rgba(37, 99, 235, 0.5);
}

.bk-c-green {
    border-color: rgba(22, 163, 74, 1);
}

.bk-c-green1 {
    border-color: #1afa29;
}

.bk-c-green-5 {
    border-color: rgba(22, 163, 74, 0.5);
}

.bk-c-yellow {
    border-color: rgba(202, 138, 4, 1);
}

.bk-c-yellow-5 {
    border-color: rgba(202, 138, 4, 0.5);
}

.bk-c-grey {
    border-color: rgba(107, 114, 128, 1);
}

.bk-c-grey-5 {
    border-color: rgba(107, 114, 128, 0.5);
}

.bk-c-purple {
    border-color: rgba(168, 85, 247, 1);
}

.bk-c-purple-5 {
    border-color: rgba(168, 85, 247, 0.5);
}

.bk-c-pink {
    border-color: rgba(255, 0, 170, 1);
}

.bk-c-pink-5 {
    border-color: rgba(255, 0, 170, 0.5);
}

/* 外壳阴影 */
.box-shadow1 {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

/* 聚焦显示样式 */
.iFocus {
    border: 1px solid rgba(107, 114, 128, 0.5);
}

.iFocus:hover {
    border: 1px solid rgba(37, 99, 235, 1);
}

/* 分割线 */
.divide {
    width: calc(100% - 40px);
    margin: 20px 20px 10px 20px;
    height: 1px;
    background-color: #e2e2e2;
}

/* 文本删除线 */
.text-del {
    text-decoration: line-through;
}

.carousel {
    width: 100%;
    overflow: hidden;
}

.swiper-wrapper .swiper-slide .carousel-image {
    width: 100%;
    height: 100%;
}

.swiper-button-next,
.swiper-button-prev {
    color: #e0e0e0;
    --swiper-navigation-size: 34px;
}

.swiper-pagination .swiper-pagination-bullet {
    --swiper-theme-color: #e68484;
}
.pointer {
    cursor: pointer;
}
.spinner{
    width: 70%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}
.spinner button{
    width: 30px;
    height: 32px;
    padding: 0px 10px;
    color: #6d6d6d;
    background: #fff;
    font-size: 14px;
    border: 1px solid #eee;
    border-radius: 5px;
}
.spinner input {
    width: 50px;
    height: 30px;
    text-align: center;
    border: 1px solid #eee;
    font-size: 14px;
}
.form-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 80px);
}
.form-box input{
    width: 100%;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 0px 15px;
}
.form-box input:focus{
    border: 1px solid rgba(37, 99, 235, 1) !important;
}