{include file="common/header"}

    <style>
        html,
        body,
        p,
        div {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            width: 100%;
            height: 100vh;
            background: url({$imag}/static/picture/404_bg.jpg) no-repeat;
            background-size: 100% 100vh;
            background-position: center;
        }
        .footerContainer{
            display: none;
        }

        .base {
            display: flex;
            width: 1200px;
            height: 100vh;
            margin: 0 auto;
            padding-top: 130px;
        }

        .base_left {
            width: 738px;
            height: 535px;
        }

        .base_right {
            width: 432px;
        }

        .base_right .icons {
            position: relative;
            width: 147px;
            height: 122px;
            margin-left: 330px;
        }

        .base_right .icons .icon3 {
            position: absolute;
            top: 0;
            left: 0;
            width: 142px;
            height: 88px;
            animation: step3 1s infinite;
        }

        @keyframes step3 {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        .base_right .icons .icon2 {
            position: absolute;
            top: 35px;
            left: 10px;
            width: 101px;
            height: 64px;
            animation: step2 1s infinite 0.5s;
        }

        @keyframes step2 {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.2;
            }
            100% {
                opacity: 1;
            }
        }

        .base_right .icons .icon1 {
            position: absolute;
            top: 66px;
            left: 18px;
            width: 55px;
            height: 37px;
            animation: step1 1s infinite;
        }

        @keyframes step1 {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        .base_right p {
            font-size: 20px;
            font-weight: bold;
            line-height: 36px;
            color: #fafbfd;
            margin-top: 60px;
            text-align: center;
        }

        .base_right p span {
            font-size: 24px;
        }

        .base_right .back {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: #fafbfd;
            font-size: 20px;
            margin-top: 42px;
            margin-right: 46px;
        }

        .base_right .back a {
            width: 143px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            background-color: #ffffff;
            border-radius: 26px;
            color: #476bff;
            font-size: 20px;
            text-decoration: none;
            margin-left: 18px;
        }

        .back i {
            font-style: normal;
        }
    </style>
    <style type="text/css">#_copy {
        align-items: center;
        background: #4494d5;
        border-radius: 3px;
        color: #fff;
        cursor: pointer;
        display: flex;
        font-size: 13px;
        height: 30px;
        justify-content: center;
        position: absolute;
        width: 60px;
        z-index: 1000
    }

    #select-tooltip, #sfModal, .modal-backdrop, div[id^=reader-helper] {
        display: none !important
    }

    .modal-open {
        overflow: auto !important
    }

    ._sf_adjust_body {
        padding-right: 0 !important
    }

    .super_copy_btns_div {
        position: fixed;
        width: 154px;
        left: 10px;
        top: 45%;
        background: #e7f1ff;
        border: 2px solid #4595d5;
        font-weight: 600;
        border-radius: 2px;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        z-index: 5000
    }

    .super_copy_btns_logo {
        width: 100%;
        background: #4595d5;
        text-align: center;
        font-size: 12px;
        color: #e7f1ff;
        line-height: 30px;
        height: 30px
    }

    .super_copy_btns_btn {
        display: block;
        width: 128px;
        height: 28px;
        background: #7f5711;
        border-radius: 4px;
        color: #fff;
        font-size: 12px;
        border: 0;
        outline: 0;
        margin: 8px auto;
        font-weight: 700;
        cursor: pointer;
        opacity: .9
    }

    .super_copy_btns_btn:hover {
        opacity: .8
    }

    .super_copy_btns_btn:active {
        opacity: 1
    }</style>
    <style data-id="immersive-translate-input-injected-css">.immersive-translate-input {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 2147483647;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .immersive-translate-input-loading {
        --loading-color: #f78fb6;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: block;
        margin: 12px auto;
        position: relative;
        color: white;
        left: -100px;
        box-sizing: border-box;
        animation: immersiveTranslateShadowRolling 1.5s linear infinite;
    }

    @keyframes immersiveTranslateShadowRolling {
        0% {
            box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
        }

        12% {
            box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
        }

        25% {
            box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
        }

        36% {
            box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color), 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
        }

        50% {
            box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color), 110px 0 var(--loading-color), 100px 0 var(--loading-color);
        }

        62% {
            box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color), 120px 0 var(--loading-color), 110px 0 var(--loading-color);
        }

        75% {
            box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color), 120px 0 var(--loading-color);
        }

        87% {
            box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color);
        }

        100% {
            box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
        }
    }


    .immersive-translate-search-recomend {
        border: 1px solid #dadce0;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        position: relative;
        font-size: 16px;
    }

    .immersive-translate-search-enhancement-en-title {
        color: #4d5156;
    }

    /* dark */
    @media (prefers-color-scheme: dark) {
        .immersive-translate-search-recomend {
            border: 1px solid #3c4043;
        }

        .immersive-translate-close-action svg {
            fill: #bdc1c6;
        }

        .immersive-translate-search-enhancement-en-title {
            color: #bdc1c6;
        }
    }


    .immersive-translate-search-settings {
        position: absolute;
        top: 16px;
        right: 16px;
        cursor: pointer;
    }


    .immersive-translate-search-title {
    }

    .immersive-translate-search-title-wrapper {
    }

    .immersive-translate-search-time {
        font-size: 12px;
        margin: 4px 0 24px;
        color: #70757a;
    }

    .immersive-translate-expand-items {
        display: none;
    }

    .immersive-translate-search-more {
        margin-top: 16px;
        font-size: 14px;
    }

    .immersive-translate-modal {
        display: none;
        position: fixed;
        z-index: 1000000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
        font-size: 15px;
    }

    .immersive-translate-modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        border-radius: 10px;
        width: 80%;
        max-width: 500px;
        font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
        "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
    }

    .immersive-translate-modal-title {
        font-size: 1.3rem;
        font-weight: 500;
        margin-bottom: 20px;
        color: hsl(205, 20%, 32%);
    }

    .immersive-translate-modal-body {
        color: hsl(205, 20%, 32%)
    }

    .immersive-translate-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .immersive-translate-close:hover,
    .immersive-translate-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .immersive-translate-modal-footer {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .immersive-translate-btn {
        width: fit-content;
        color: #fff;
        background-color: #ea4c89;
        border: none;
        font-size: 14px;
        margin: 5px;
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 5px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .immersive-translate-cancel-btn {
        /* gray color */
        background-color: rgb(89, 107, 120);
    }

    .immersive-translate-btn:hover {
        background-color: #f082ac;
    }

    .immersive-translate-cancel-btn:hover {
        background-color: hsl(205, 20%, 32%);
    }


    .immersive-translate-btn svg {
        margin-right: 5px;
    }

    .immersive-translate-link {
        cursor: pointer;
        user-select: none;
        -webkit-user-drag: none;
        text-decoration: none;
        color: #007bff;
        -webkit-tap-highlight-color: rgba(0, 0, 0, .1);
    }

    .immersive-translate-primary-link {
        cursor: pointer;
        user-select: none;
        -webkit-user-drag: none;
        text-decoration: none;
        color: #ea4c89;
        -webkit-tap-highlight-color: rgba(0, 0, 0, .1);
    }

    .immersive-translate-modal input[type="radio"] {
        margin: 0 6px;
        cursor: pointer;
    }

    .immersive-translate-modal label {
        cursor: pointer;
    }

    .immersive-translate-close-action {
        position: absolute;
        top: 2px;
        right: 0px;
        cursor: pointer;
    }
    </style>
<style>
    @media (max-width: 768px) {
        .base {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100vh;
            padding-top: 0;
        }

        .base_left {
            display: none;
        }

        .base_right {
            width: 100%;
            text-align: center;
        }

        .base_right .icons {
            display: none;
        }

        .base_right img{
            width:70%;
        }

        .base_right p {
            font-size: 16px;
            line-height: 30px;
            color: #fafbfd;
            margin-top: 60px;
            text-align: center;
        }

        .base_right p span {
            font-size: 24px;
        }

        .base_right .back {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            margin-top: 42px;
            flex-direction: column;
            gap: 20px;
        }

        .base_right .back a {
            width: 143px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            background-color: rgb(0 86 255);
            border-radius: 4px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            text-decoration: none;
            margin-left: 0px;
        }

        .back i {
            font-style: normal;
        }

    }
</style>
<script defer src="/bt-stats.js?site=23346a71-6fee-4479-acbc-f19a1ac961d5&version1"></script></head>
<body>
<div class="base">
    <img src="{$imag}/static/picture/404_new.png" alt="" class="base_left">
    <div class="base_right">
        <div class="icons">
            <img src="{$imag}/static/picture/404_icon3.png" alt=""
                 class="icon3">
            <img src="{$imag}/static/picture/404_icon2.png" alt=""
                 class="icon2">
            <img src="{$imag}/static/picture/404_icon1.png" alt=""
                 class="icon1">
        </div>
        <img src="{$imag}/static/picture/404_num.png" alt="">
        <p>啊哦，糟糕，您访问的页面找不到了<br>
        </p>
        <div class="back">
            <span><i id="back-time">10</i>秒后自动跳转首页</span>
            <a href="/">返回首页</a>
        </div>
    </div>
</div>
<script>
    var num = 10;
    setInterval(function () {
        if (num < 1) {
            num = 0;
            location.href = "/";
        } else {
            num--;
        }
        document.getElementById("back-time").innerHTML = num;
    }, 1000);
</script>
{include file="common/footer"}