html {
    background-color: #fff;
    color: #333;
    scroll-behavior: smooth;
}
.section1 {
    padding-top: 78px;
    box-sizing: border-box;
    background: url("/skins/screenunlock/imgs/webp/screen-unlock.webp")
        no-repeat center center;
}
.section1 .section1-body {
    padding-top: 70px;
    padding-bottom: 99px;
}
.section1 .section1-body.fr {
    padding-bottom: 20px;
}
.section1 .section1-body.de {
    padding-bottom: 50px;
}
.section1 .section1-body .left .section1-name {
    margin-bottom: 18px;
}
.section1 .section1-body .left .section1-name .product-tag {
    color: #ffffff;
    font-family: Microsoft YaHei UI;
    font-weight: 700;
    font-size: 12px;
    padding: 3px 16px;
    background: linear-gradient(
        90deg,
        #3f75ff 0%,
        #e45cff 55.29%,
        #7b00ff 100%
    );
    border-radius: 6px;
}
.section1 .section1-body .product-name {
    height: 36px;
    line-height: 36px;
}
.section1 .section1-body .left .section1 .section1-body-title {
    margin-top: 18px;
    margin-bottom: 18px;
    font-family: Microsoft YaHei UI;
    font-size: 30px;
    font-weight: 700;
    line-height: 47px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.section1 .section1-body .left .section1-title {
    font-size: 40px;
}
.section1 .section1-body .left ul {
    display: flex;
    flex-direction: column;
    gap: 17.5px;
}
.section1 .section1-body .left ul li {
    width: fit-content;
    position: relative;
    display: flex;
    align-items: center;
}
.section1 .section1-body .left ul li.label-tiktokmigrate::after {
    content: "NEW";
    position: absolute;
    font-size: 12px;
    z-index: 1;
    width: 38px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    top: -15px;
    right: -38px;
    border-radius: 32px 32px 32px 0;
    background: linear-gradient(85.26deg, #833cff 5.65%, #ff4545 98.42%);
}
.section1 .section1-body .left ul li span {
    margin-left: 8px;
    font-size: 15px;
    line-height: normal;
}
.section1 .section1-body .left .btns {
    margin-top: 47px;
    column-gap: 44px;
}
.section1 .section1-body .left .btns button {
    background-color: transparent;
    border: none;
}
.section1 .section1-body .left .btns button a {
    display: inline-block;
    border-radius: 14px;
    min-width: 228px;
    height: 61px;
    box-sizing: border-box;
    line-height: 61px;
    font-family: Microsoft YaHei UI;
    font-size: 20px;
    font-weight: 700;
}
.section1 .section1-body .left .btns button a.fr,
.section1 .section1-body .left .btns button a.de {
    width: 300px;
}

.section1 .section1-body .guide {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    margin: 35px auto 0 48px;
    transition: all 0.15s ease-in-out;
}
.section1 .section1-body .guide:hover {
    transform: scale(1.03);
}
.section1 .section1-body .guide::after {
    content: "";
    position: relative;
    width: 100%;
    height: 1px;
    left: 0;
    background: #333333;
}
.section2 {
    margin-top: 60px;
}
.section2 .section2-body {
    max-width: 1272px;
    margin: 0 auto;
}

.section2 .section2-body .section2-body-subtitle {
    margin-top: 26px;
    margin-bottom: 40px;
}
.section2 .section2-body .section2-body-support {
    flex-wrap: wrap;
    column-gap: 24px;
}
.section2 .section2-body .section2-body-support .left,
.section2 .section2-body .section2-body-support .right {
    width: 360px;
}
.section2 .section2-body .section2-body-support .center {
    min-width: 500px;
}

.section2 .section2-body .section2-body-support .support-item {
    background-color: #e5f0ff;
    min-height: 310px;
    width: 100%;
    border-radius: 24px;
}
.section2
    .section2-body
    .section2-body-support
    .support-item
    .support-item-name {
    height: 63px;
    line-height: 63px;
}
.section3 {
    margin-top: 80px;
}

.section3 .section3-body .left-scroll-container {
    width: 500px;
    height: 368px;
    overflow: hidden;
}
.section3 .section3-body .left-scroll-container img {
    width: 500px;
    height: 368px;
    transition: all 0.3s ease-in-out;
}
.section3 .section3-body .left-scroll-container p {
    padding: 16px;
    background-color: #dbebff;
    border-radius: 10px;
}
.section3 .section3-body .slider {
    position: relative;
    width: 5px;
    height: 368px;
    margin-left: 51px;
    margin-right: 44px;
    background-color: #0000002b;
    border-radius: 10px;
}
.section3 .section3-body .slider .slider-inner {
    height: calc(100% / 3);
    position: absolute;
    z-index: 1;
    left: 0;
    border-radius: 10px;
    top: 0;
    /* top: calc(100% / 3); */
    transition: all 0.3s ease-in-out;
}

.section3 .section3-body .steps {
    height: 368px;
    justify-content: space-between;
    gap: 71px;
}
.section3 .section3-body .steps li {
    cursor: pointer;
    padding: 16px;
    background-color: #dbebff;
    border-radius: 10px;
}
.section3 .section3-body .steps li:hover {
    color: #0080e3;
}
.section4 {
    margin-top: 87px;
    padding-bottom: 90px;
}
.section4 .section4-body .device-system {
    column-gap: 67px;
    margin-top: 60px;
}
.section4 .section4-body .device-system .device-system-item {
    display: flex;
    flex-direction: column;
    width: 476px;
    min-height: 280px;
    padding: 30px 27px;
    box-sizing: border-box;
    border-radius: 39px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.section4 .section4-body .device-system .device-system-item.device-item {
    background-color: #f3f5ff;
    background-image: url("/skins/screenunlock/imgs/webp/section4-device-bg.webp");
}
.section4 .section4-body .device-system .device-system-item.system-item {
    background-color: #f3fbff;
    background-image: url("/skins/screenunlock/imgs/webp/section4-system-bg.webp");
}

.section5 {
    padding: 60px 0;
    background-color: #fafafa;
}
.section5 .section5-body {
    padding: 0 90px;
}
.section5 .section5-body-container .question .question-title {
    min-height: 49px;
    display: flex;
    align-items: center;
    line-height: 28px;
    border-radius: 8px;
    padding-right: 16px;
    padding-left: 16px;
}
.section5
    .section5-body-container
    .question
    .question-arrow.svg-icon.svg-plus:hover {
    background-color: #0045ff;
}
.section5 .section5-body-container .question .icon-subtraction {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAXCAYAAAAP6L+eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFfSURBVHgBrZVNTsMwEIXfRJR1d7AMN+gNGqQmYskNKCcoN2iyZlNuUG7AEoVKhBOQG+Al7LLnZxg7jaDBTUo1T4odT+zPI8czQ+hTzCNpR2CEbkww8m6woqJrGXmtEQ9xiBm+cCUzhlvWGnkKvCNDQaYfHPNMPEo7gL4NMjzQcjs44bmD7iOSdTllP0MNqAdegyMOMcALNMQ4tT82cIMBHqElwrzuJhxJqwe2Eq8DgV5AW4RzexQjaIswPnAR1brN0wQIj3ZjmDdgmbeMwiQJCG5P5hz/czD5a7MeV+0ou7wWj4+xk8yr11xZj5+hfc6EMpBE8wRtsQUT7qAtxm19H2K2ARJBQzZf53QSrHfIoKVAcoXrrGw10IBbxn2d9DdDY8Jpk0T2gq4obYa+CjJ18KbG9ataQxe/jf6adyb5+dOVp3HHBhZ4gw8spOZV7Y+EPtVpNdyo0kApNa7sWvYNDVxrN/no/XwAAAAASUVORK5CYII=")
        no-repeat center center;
    background-size: cover;
}
.section5 .section5-body-container li {
    transform: scale(1); /* 初始状态 */
    height: fit-content;
    transition: all 0.5s 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 回弹效果 */
}

.section5 .section5-body-container .answer {
    position: relative;
    margin-left: 194px;
    width: auto;
    height: 0px;
    overflow: hidden;
}
.section5 .section5-body-container .answer.active {
    height: fit-content;
}

.section5 .section5-body-container .answer .answer-content {
    width: 890px;
    padding: 12px 16px;
    background-color: #eef2ff;
    border-radius: 16px;
    line-height: 36px;
    opacity: 0;
    transform: scale(0.9);
    filter: blur(8px);
    will-change: transform;
    transform-origin: 50% 50% 0px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 回弹效果 */
}
.section5 .section5-body-container .answer .answer-content.active {
    filter: blur(0px);
    opacity: 1;
    transform: none;
    transform-origin: 50% 50% 0px;
    will-change: transform;
}
.section5 .section5-body-container .answer ul {
    list-style: none; /* 移除默认的列表样式 */
    padding-left: 0; /* 移除默认的左边距 */
    counter-reset: li; /* 初始化计数器 */
}
.section5 .section5-body-container .answer ul li {
    position: relative;
    padding-left: 2em; /* 为文本部分添加左边距 */
    counter-increment: li; /* 自动递增编号 */
}
.section5 .section5-body-container .answer ul li::before {
    content: counter(li) ". "; /* 使用计数器生成编号 */
    position: absolute;
    left: 0;
    width: 2em; /* 确保编号部分宽度固定 */
    text-align: center; /* 右对齐编号 */
}

.section6 {
    padding-top: 80px;
    padding-bottom: 70px;
}
.section6 .section6-content .swiper-wrapper > div {
    margin-top: 60px;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 14px;
    width: calc((100% - 48px) / 3);
    height: 336px;
    background-color: #f4f5fa;
}
.section6 .section6-content .swiper-wrapper > div .reviews {
    line-height: 24px;
    hyphens: auto;
    /* text-align: justify; */
}
.section6 .section6-content .swiper-wrapper > div .user {
    /* margin-top: 42px; */
    margin-top: auto;
}
.section6 .section6-content .swiper-wrapper > div .user .avatar {
    width: 65px;
    height: 65px;
    margin-right: 11px;
    border-radius: 50%;
    background-color: #fff;
}
.section6
    .section6-content
    .swiper-wrapper
    > div
    .user
    .user-info
    .user-info-name {
    font-family: Microsoft YaHei UI;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 10px;
}
.section6 .section6-content .swiper-wrapper > div .user .user-info .svg-icon {
    background-color: #ffa346;
}
.section7 {
    position: relative;
    min-height: 392px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 70px;
}
.section7 .section7-bg {
    position: absolute;
    z-index: -1;
    width: 1862px;
    height: 392px;
    margin: 0 auto;
    top: 0;
    background-image: url("/skins/screenunlock/imgs/webp/section-down-num-bg.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 58px;
}
.section7 .section7-bg::after {
    position: absolute;
    content: "";
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 58px;
    background-color: #0000008a;
}
.section7 .subtitle {
    font-family: Microsoft YaHei UI;
    font-size: 30px;
    font-weight: 700;
    margin: 38.5px auto 40px auto;
    text-align: center;
}
.section7 .section7-body .btns a {
    min-width: 250px;
}
.section7 .section7-buy-btn {
    width: 228px;
    height: 61px;
    border-radius: 14px;
    box-sizing: border-box;
    line-height: 61px;
    font-family: Microsoft YaHei UI;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid #ffffff;
    background-color: #3282f9;
    color: #fff;
}
.section7 .nums-box {
    margin-top: 29px;
    font-size: 20px;
}
.section7 .nums-box .random-num {
    position: absolute;
    top: -10px;
    right: -4px;
    z-index: 1;
    font-size: 14px;
}
/* 手机 */
@media (max-width: 767.98px) {
    .section1 {
        padding-top: 60px;
    }
    .section1 .section1-body {
        flex-direction: column;
        align-items: center;
        padding-top: 30px;
    }
    .section1 .section1-body .guide {
        margin: 20px auto 28px auto;
    }
    .section1 .section1-body .left .btns {
        flex-direction: column;
        row-gap: 20px;
    }
    .section2 .section2-body .section2-body-support {
        row-gap: 24px;
    }
    .section2 .section2-body .section2-body-support .center {
        display: none;
    }

    .section3 .section3-body-content {
        flex-wrap: wrap;
    }
    .section3 .section3-body .left-scroll-container {
        width: 100%;
        height: fit-content;
    }
    .section3 .section3-body .left-scroll-container img {
        width: 100%;
        height: auto;
    }
    .section3 .section3-body .left-scroll-container p {
        display: inline-flex;
    }
    .section3 .section3-body .slider {
        display: none;
    }
    .section3 .section3-body .steps {
        display: none;
        height: auto;
        gap: 40px;
        padding: 28px 0;
    }
    .section4 {
        margin-top: 42px;
    }
    .section4 .section4-body .device-system {
        flex-direction: column;
        gap: 20px;
    }
    .section4 .section4-body .device-system .device-system-item {
        width: 100%;
    }
    .section5 .section5-body {
        padding: 0 12px;
    }
    .section5 .section5-body-container {
        margin-top: 20px;
    }
    .section5 .section5-body-container .question {
        column-gap: 8px;
    }
    .section5 .section5-body-container .question .question-title {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .section5 .section5-body-container .question .question-arrow {
        flex-shrink: 0;
        margin-left: auto;
    }
    .section5 .section5-body-container .answer {
        margin-left: 0;
        width: 100%;
    }
    .section5 .section5-body-container .answer .answer-content {
        width: 100%;
    }
    .section6 {
        padding-bottom: 30px;
    }
    .section6-content {
        padding: 0 12px 40px 12px !important;
        box-sizing: border-box;
    }
    .section6 .section6-content .swiper-wrapper {
        height: 280px;
        width: 100%;
        column-gap: 0;
    }
    .section6 .section6-content .swiper-wrapper > div {
        width: 100%;
        height: 260px;
        padding: 16px;
    }
    .section6 .section6-content .swiper-wrapper > div .reviews {
        font-size: 14px;
    }
    .section6 .section6-content .swiper-wrapper > div .user {
        margin-bottom: 12px;
    }
    .section6 .section6-content .swiper-wrapper > div .user .avatar {
        width: 48px;
        height: 48px;
    }
    .section6
        .section6-content
        .swiper-wrapper
        > div
        .user
        .user-info
        .user-info-name {
        font-size: 16px;
    }
    .section6
        .section6-content
        .swiper-wrapper
        > div
        .user
        .user-info
        .svg-icon {
        width: 14px;
        height: 14px;
    }

    .section6-content .swiper-pagination {
        display: flex;
    }
    .section6-content .swiper-pagination-bullet {
        background-color: #b8b8b8 !important;
    }
    .section6-content .swiper-pagination-bullet-active {
        width: 22px !important;
        background-color: #ff75bd !important;
        border-radius: 6px !important;
    }
    .section7 {
        padding: 45px 0 40px 0;
        background-size: cover;
        margin-bottom: 40px;
        box-sizing: border-box;
    }
    .section7 .section7-bg {
        width: 100%;
        height: 430px;
    }
    .section7 .subtitle {
        font-size: 20px;
    }
    .section7 .btns {
        flex-direction: column;
        row-gap: 30px;
    }
    .section7 .btns button {
        margin-right: 0;
    }
    .section7 .btns button a {
        width: 180px;
        height: 42px;
        line-height: 42px;
        font-size: 14px;
    }
}