@font-face {
    font-family: "Douyin Sans";
    src: url('../font/DouyinSansBold.ttf'), url("../font/DouyinSansBold.otf");
}

body {
    margin: 0;
    position: absolute;
    width: 100vw;
    overflow-x: hidden;
}

.page * {
    box-sizing: border-box;
    margin: 0;
}

.page a {
    text-decoration: none;
}

.page ul,
.page ol {
    list-style: none;
}

body>.page {
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    font-family: "Douyin Sans";
    white-space: nowrap;

}

.page div {
    position: absolute;
}

.page>div {
    position: relative;
}

/** head */
.head {
    background-image: url("../images/head@2x.png");
    background-size: 100%;
    background-repeat: no-repeat;
    top: 0;
    width: 100vw;
    height: 36.197916666666664vw;
    padding-left: 18.385416666666668vw;
    padding-top: 7.34375vw;
}

.head>h1 {
    width: 21.197916666666668vw;
    height: 4.010416666666667vw;
    line-height: 4.010416666666667vw;
    color: #ffffff;
    text-align: left;
    font-size: 3.3333333333333335vw;
    font-weight: 700;
    font-family: "Douyin Sans";
    text-shadow: 0 0.20833333333333334vw 0.3125vw #e23100;
}

.head>h2 {
    width: 32.291666666666664vw;
    height: 3.0208333333333335vw;
    color: #ffffff;
    text-align: left;
    font-size: 2.5vw;
    font-weight: 700;
    font-family: "Douyin Sans";
    text-shadow: 0 0.20833333333333334vw 0.3125vw #e23100;
    margin-top: 0.3645833333333333vw;
}

.head>h3,
.head>h4 {
    width: 18.072916666666668vw;
    height: 2.8125vw;
    border-radius: 1.5104166666666667vw;
    border: 0.10416666666666667vw solid #ffffffbd;
    color: #ffffff;
    text-align: left;
    font-size: 1.4583333333333333vw;
    font-weight: 700;
    font-family: "Douyin Sans";
    text-shadow: 0 0.10416666666666667vw 0.20833333333333334vw #e23100;
    padding: 0.46875vw 1.09375vw;
    margin-top: 0.5208333333333334vw;
}

.head>h4 {
    width: 23.072916666666668vw;
    margin-top: 0.7291666666666666vw;
}

.head>a {
    width: 10.208333333333334vw;
    height: 3.1770833333333335vw;
    border-radius: 2.03125vw;
    background: #ffffff;
    color: #fb7701;
    text-align: left;
    font-size: 1.4583333333333333vw;
    font-weight: 600;
    font-family: "MiSans";
    padding: 0.625vw 2.1875vw;
    margin-top: 3.4375vw;
    display: block;
}

/** head END */
/** reason */
.reason {
    width: 100vw;
    overflow: hidden;
    padding: 6.614583333333333vw 49.84375vw;
}

.reason>img {
    position: absolute;
    width: 49.010416666666664vw;
    height: 49.010416666666664vw;
    top: 0.5208333333333334vw;
    left: 4.114583333333333vw;
}

.reason>h1,
.reason>h2 {
    height: 2.9166666666666665vw;
    color: #000000;
    text-align: left;
    font-size: 2.1875vw;
    font-weight: 600;
    font-family: "MiSans";
    margin-left: 3.28125vw;
    position: relative;
}

.reason>h2 {
    height: 3.3333333333333335vw;
    font-size: 2.5vw;
    margin-bottom: 1.875vw;
}

.reason>h2>span {
    color: #fb7701;
}

.reason>div {
    padding-top: 2.6041666666666665vw;
    position: relative;
}

.reason>div>img {
    position: absolute;
    width: 9.791666666666666vw;
    height: 9.791666666666666vw;
}

.reason>div>h1,
.reason>div>h2,
.reason>div>h3 {
    margin-left: 9.479166666666666vw;
}

.reason>div>h1 {
    height: 4.427083333333333vw;
    color: #fb770147;
    font-size: 3.3333333333333335vw;
    font-weight: 600;
    font-family: "MiSans";
    margin-top: -0.8333333333333334vw;
    margin-bottom: -1.875vw;
}

.reason>div>h2 {
    height: 2.1875vw;
    color: #0b0b0b;
    font-size: 1.6666666666666667vw;
    font-weight: 600;
    font-family: "MiSans";
}

.reason>div>h3 {
    color: #0b0b0b;
    text-align: left;
    font-size: 1.25vw;
    font-weight: 400;
    font-family: "MiSans";
    margin-top: 0.625vw;
    line-height: 2.2916666666666665vw;
}

/** reason END */
/** business */
.business {
    width: 100vw;
    height: 39.375vw;
    background: #f3f6fa;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.business>h1 {
    width: 100vw;
    height: 2.9166666666666665vw;
    margin-top: 4.166666666666667vw;
    color: #fb7701;
    text-align: center;
    font-size: 2.1875vw;
    font-weight: 600;
    font-family: "MiSans";
}

.business>h2 {
    width: 100vw;
    height: 3.3333333333333335vw;
    margin-top: 0.4166666666666667vw;
    color: #000000;
    text-align: center;
    font-size: 2.5vw;
    font-weight: 600;
    font-family: "MiSans";
    margin-bottom: 1.7708333333333333vw;
}

.business>div {
    width: 62.604166666666664vw;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}

.business .item {
    position: relative;
    display: flex;
    align-items: center;
    width: 30.625vw;
    background: #fff;
    box-shadow: 0.20833333333333334vw 0.20833333333333334vw 0.20833333333333334vw 0 #e2310014;
    margin: 0.625vw 0;
    height: 7.552083333333333vw;
    border-radius: 0.8333333333333334vw;
}

.business .item img {
    width: 6.5625vw;
    height: 6.5625vw;
    margin: 1.0416666666666667vw;
}

.business .item span {
    color: #3d3d3d;
    text-align: left;
    font-size: 1.25vw;
    font-weight: 500;
    font-family: "MiSans";
    line-height: 2.2395833333333335vw;
    margin-left: 0.5208333333333334vw;
}

.business a {
    border-radius: 1.6666666666666667vw;
    background: #fb7701;
    color: #ffffff;
    text-align: left;
    font-size: 1.25vw;
    font-weight: 600;
    font-family: "MiSans";
    padding: 0.8333333333333334vw 2.0833333333333335vw;
    margin-top: 1.6666666666666667vw;
}

/** business END*/
/** customer */
.customer {
    width: 100vw;
    height: 40vw;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.customer>h1 {
    color: #fb7701;
    text-align: center;
    font-size: 2.1875vw;
    font-weight: 600;
    font-family: "MiSans";
    margin-top: 4.010416666666667vw;
}

.customer>h2 {
    color: #000000;
    text-align: center;
    font-size: 2.5vw;
    font-weight: 600;
    font-family: "MiSans";
    margin-top: 0.625vw;
}

.customer input {
    display: none;
}

.customer ul {
    width: 24.6875vw;
    height: 2.9166666666666665vw;
    border-radius: 1.6666666666666667vw;
    border: 0.052083333333333336vw solid #fb7701;
    background: #ffffff;
    margin-top: 2.34375vw;
    display: flex;
    justify-content: space-between;
    padding: 0.10416666666666667vw;
}

.customer li {
    color: #3d3d3d;
    font-size: 1.0416666666666667vw;
    font-weight: 500;
    font-family: "MiSans";
    width: 50%;
}

.customer label {
    cursor: pointer;
}

.customer span {
    transition: color 0.2s;
    color: #000;
    position: relative;
    z-index: 10;
    line-height: 2.6041666666666665vw;
    display: block;
    width: 100%;
    text-align: center;
}

.customer .slider {
    position: relative;
    width: 100%;
    height: 2.6041666666666665vw;
    border-radius: 1.71875vw;
    background: #fb7701;
    margin: -2.6041666666666665vw 0;
    left: 100%;
    transition: left 0.2s;
}

.customer input:checked+span {
    color: #fff;
}

.customer input:checked+span+div {
    display: flex;
}

.customer input:checked+span+div+div {
    left: 0;
}

.customer .customerList {
    display: none;
    position: absolute;
    margin-top: 1.875vw;
    margin-left: 18.229166666666668vw;
    margin-right: 18.229166666666668vw;
    left: 0;
    width: 63.541666666666664vw;
    flex-wrap: wrap;
}

.customer .customerList>a {
    width: 14.84375vw;
    height: 3.75vw;
    border-radius: 2.0833333333333335vw;
    border: 0.10416666666666667vw solid #dfdfdf;
    background: #ffffff;
    margin: 0.4166666666666667vw 0.5208333333333334vw;
    background-size: auto 2.5vw;
    background-repeat: no-repeat;
    background-position: center;
    color: #3d3d3d;
    text-align: center;
    font-size: 1.0416666666666667vw;
    font-weight: 500;
    font-family: "MiSans";
    line-height: 3.75vw;
}

/** customer END*/