body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, figure, section, legend, textarea, p, blockquote, th, td, input, select, textarea, button {
    margin: 0;
    padding: 0
}

html {
    /* scroll-behavior: smooth; */
    width: 100%;
    /* font-family: Arial, '微软雅黑', '宋体', sans-serif; */
}

body {
    background-color: #e6eaeb;
}

.container {
    width: 100%;
    box-sizing: border-box;
}

.circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 99%;
    width: 192px;
    height: 192px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.circle_process {
    position: absolute;
    width: 239px;
    height: 240px;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ddd;
    border-radius: 99%;
}

    .circle_process .wrapper {
        width: 120px;
        height: 240px;
        position: absolute;
        top: 0;
        overflow: hidden;
    }

    .circle_process .right {
        right: 0;
    }

    .circle_process .left {
        left: -0px;
    }

    .circle_process .circle {
        width: 193px;
        height: 193px;
        border: 24px solid transparent;
        border-radius: 50%;
        position: absolute;
        top: 0;
        transform: rotate(-135deg);
    }

    /* --------   origin class -------- */
    .circle_process .rightcircle {
        border-top: 24px solid rgb(74, 176, 247);
        border-right: 24px solid rgb(74, 176, 247);
        right: 0;
        -webkit-animation: circle_right 1s linear forwards;
    }

    .circle_process .leftcircle {
        border-bottom: 24px solid rgb(74, 176, 247);
        border-left: 24px solid rgb(74, 176, 247);
        left: 0;
        -webkit-animation: circle_left 1s linear forwards;
    }

@-webkit-keyframes circle_right {
    0% {
        -webkit-transform: rotate(-135deg);
    }

    50%,100% {
        -webkit-transform: rotate(45deg);
    }
}

@-webkit-keyframes circle_left {
    0%,50% {
        -webkit-transform: rotate(-135deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
    }
}
/* --------   origin class -------- */

/* ------------- start for template one three jump -----------*/

.circle_process .rightcircle_template_one_total_3_step_1 {
    border-top: 24px solid rgb(74, 176, 247);
    border-right: 24px solid rgb(74, 176, 247);
    right: 0;
    -webkit-animation: circle_right_template_one_total_3_step_1 .5s linear forwards;
}

.circle_process .leftcircle_total_3_step_1 {
    border-bottom: 24px solid rgb(74, 176, 247);
    border-left: 24px solid rgb(74, 176, 247);
    left: 0;
    /*-webkit-animation: circle_left_template_one_total_3_step_1 .3s linear forwards;*/
}

@-webkit-keyframes circle_right_template_one_total_3_step_1 {
    0% {
        -webkit-transform: rotate(-135deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes circle_left_template_one_total_3_step_1 {
    0%,33.33% {
        -webkit-transform: rotate(-135deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

.circle_process .rightcircle_template_one_total_3_step_2 {
    border-top: 24px solid rgb(74, 176, 247);
    border-right: 24px solid rgb(74, 176, 247);
    right: 0;
    -webkit-animation: circle_right_template_one_total_3_step_2 .5s linear forwards;
}

.circle_process .leftcircle_template_one_total_3_step_2 {
    border-bottom: 24px solid rgb(74, 176, 247);
    border-left: 24px solid rgb(74, 176, 247);
    left: 0;
    -webkit-animation: circle_left_template_one_total_3_step_2 .5s linear forwards;
    -webkit-animation-delay: 0.5s;
}

@-webkit-keyframes circle_right_template_one_total_3_step_2 {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
    }
}

@-webkit-keyframes circle_left_template_one_total_3_step_2 {
    0% {
        -webkit-transform: rotate(-135deg);
    }

    100% {
        -webkit-transform: rotate(-90deg);
    }
}

.circle_process .rightcircle_template_one_total_3_step_3 {
    border-top: 24px solid rgb(74, 176, 247);
    border-right: 24px solid rgb(74, 176, 247);
    right: 0;
    -webkit-transform: rotate(45deg);
}

.circle_process .leftcircle_template_one_total_3_step_3 {
    border-bottom: 24px solid rgb(74, 176, 247);
    border-left: 24px solid rgb(74, 176, 247);
    left: 0;
    -webkit-animation: circle_left_template_one_total_3_step_3 1s linear forwards;
}

@-webkit-keyframes circle_right_template_one_total_3_step_3 {
    0% {
        -webkit-transform: rotate(45deg);
    }

    50%,100% {
        -webkit-transform: rotate(45deg);
    }
}

@-webkit-keyframes circle_left_template_one_total_3_step_3 {
    0% {
        -webkit-transform: rotate(-90deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
    }
}

/* ------------- end for template one three jump -----------*/

.main-box {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    width: 120%;
    max-width: 720px;
    min-width: 540px;
    text-align: center;
    -webkit-box-shadow: 0 0 15px #a3a3a3;
    -moz-box-shadow: 0 0 15px #a3a3a3;
    box-shadow: 0 0 15px #a3a3a3;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 200px;
    padding-bottom: 24px;
}

.text1 {
    font-size: 28px;
    margin-bottom: 0px;
    margin-top: 29px;
}

.text2 {
    margin-top: 17px;
    margin-bottom: 24px;
    font-size: 18px;
    color: rgb(123, 123, 123);
}

#go-btn {
    display: block;
    /* padding: 30px 0; */
    visibility: hidden;
    opacity: 0;
    transition: opacity .1s ease-in-out;
}

    #go-btn.show {
        visibility: visible;
        opacity: 1;
    }

.go-btn {
    width: 60%;
    border-radius: 10px;
    font-size: 20px;
    line-height: 55px;
    height: 55px;
    color: #fff;
    background-color: rgb(74, 176, 247);
    margin: 14px auto 35px auto;
}

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

    .lock-warp img {
        width: 40px;
        height: 40px;
    }

.lock-text {
    text-align: left;
    border-left: 1px solid rgb(238, 238, 238);
    padding-left: 5px;
    margin-left: 5px;
    color: #7b7f87;
}

.second {
    height: 80px;
    font-size: 68px;
    color: #000;
    animation: fade .1s linear 0s forwards;

}

.link_wrapper {
    display: none;
    visibility: hidden;
    opacity: 0;
    width: 60%;
    border-radius: 10px;
    font-size: 20px;
    height: 55px;
    margin: 14px auto 35px auto;
    transition: opacity .1s ease-in-out;
}

    .link_wrapper.show {
        background-color: rgb(74, 176, 247);
        visibility: visible;
        opacity: 1;
    }

    .link_wrapper.showTempltaeTwoBtn {
        background-color: rgb(74, 176, 247);
        visibility: visible;
        opacity: 1;
    }

    .link_wrapper a {
        width: 100%;
        height: 100%;
        display: block;
        color: white;
        line-height: 55px;
    }

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

a {
    text-decoration: none
}

@property --progress {
    syntax: "<number>";
    inherits: false;
    /* initial-value: 0; */
}

@keyframes progress-animation {
    from {
        --progress: 0;
    }

    to {
        --progress: 100;
    }
}

.backup_box {
    display: flex;
    justify-content: center;
    font-size: 24px;
    color: #64748b;
}

.backup_box_wrapper {
    margin-top: 16px;
    margin-left: 16px;
    width: 100%;
    border: 1px solid lightgray;
    max-width: 960px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    background-color: #d4d7d9;
}

.backup_box_header {
    padding: 30px 20px 20px 20px;
    text-align: center;
}

.backup_box_header_title {
    font-size: 40px;
    position: relative;
    font-weight: 900;
}

    .backup_box_header_title::after {
        content: "";
        position: absolute;
        bottom: 45%;
        width: 50px;
        height: 4px;
        background-color: #64748b;
        transform: translate(10px, 0%);
    }

    .backup_box_header_title::before {
        content: "";
        position: absolute;
        bottom: 45%;
        width: 50px;
        height: 4px;
        background-color: #64748b;
        transform: translate(-60px, 0%);
    }

.backup_box_header_discription {
    margin-top: 16px;
    font-size: 16px;
}

.backup_box_content {
    overflow: auto;
    font-size: 16px;
    padding: 0px 20px 20px 0px;
}

    .backup_box_content li {
        display: flex;
        margin: 10px;
    }

    .backup_box_content .backup_box_content_time {
        padding: 10px 20px;
        border: 1px solid #64748b;
        background-color: white;
        color: green;
        display: flex;
        align-items: center;
        font-weight: 600;
        border-radius: 5px;
        min-width: 25px;
        justify-content: center;
    }

    .backup_box_content .backup_box_content_icon {
        display: flex;
        align-items: center;
        margin: 0 5px;
    }

    .backup_box_content .backup_box_content_domain {
        padding: 10px 20px;
        border: 1px solid #64748b;
        background-color: white;
        width: 100%;
        overflow: auto;
        display: flex;
        align-items: center;
        min-width: 30px;
        border-radius: 5px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .backup_box_content .backup_box_content_btn {
        box-sizing: border-box;
        min-width: 120px;
        width: 120px;
        border-radius: 5px;
    }

.backup_box_content_btn a {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.backup_box_content .backup_box_content_btn.enter {
    background-color: rgb(74, 176, 247);
}

.backup_box_content .backup_box_content_btn.copy {
    padding: 10px 20px;
    text-align: center;
    color: white;
    background-color: #e15a26;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 24px;
}

    .backup_box_content .backup_box_content_btn.copy:hover {
        cursor: pointer;
    }

a:-webkit-any-link:active {
    /* color: green; */
}

.backup_box a:-webkit-any-link {
    color: white;
}