<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta charset="gbk">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="webkit" name="renderer" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>404</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="favicon.png">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/css.css">
    <style>
        /* latin */
        @font-face {
            font-family: 'Wallpoet';
            font-style: normal;
            font-weight: 400;
            src: url(/fonts/f0X10em2_8RnXVVdUObp58Q.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        
        body {
            height: 100vh;
        }

        h1.header-w3ls {
            text-align: center;
            font-size: 2.5em;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #ffffff;
            padding: 0.5em 0 0.3em;
        }

        .agileits-content {
            text-align: center;
            float: left;
            width: 56%;
            background: url('/images/404-back.png') center no-repeat;
            background-size: cover;
            height: 100%;
        }

        .agileits-content h2 {
            font-family: 'Wallpoet', cursive;
            color: #000;
            font-size: 9.5em;
        }

        .agileits-content h2 span {
            color: #fff;
        }

        .w3layouts-right {
            float: left;
            width: 44%;
            background: #f2f2f2;
            background-size: cover;
            height: 100%;
        }

        .w3layouts-right h3 {
            color: var(--css-color);
            font-size: 2.5em;
            text-transform: capitalize;
        }

        .w3layouts-right h4 {
            text-transform: capitalize;
            margin: 1.5em 0 1em;
            color: #000;
            font-size: 1.2em;
        }

        .w3ls-text a {
            color: #000;
        }

        .w3ls-text a {
            color: var(--css-color);
        }

        .clearfix {
            clear: both;
        }

        .agileits-content h4 {
            font-size: 2em;
            text-align: left;
            margin: 3em 0 0 10em;
            text-transform: capitalize;
            color: var(--css-color);
        }

        p.copyright {
            margin: 4em 0 0;
        }

        p.copyright a {
            color: #000;
        }

        p.copyright a:hover {
            color: var(--css-color);
        }

        /*-- background effects --*/

        /* Header */

        .w3layouts-bg {
            background: var(--css-color);
            height: 100%;
        }

        @media screen and (max-width: 1024px) {

            .w3layouts-bg {
                flex-direction: column;
            }

            .agileits-content,
            .w3layouts-right {
                width: 100%;
                height: 50%;
            }
        }

        @media screen and (max-width: 1024px) {
            .agileits-content h2 {
                font-size: 8.5em;
            }
        }

        @media screen and (max-width: 800px) {
            .agileits-content h2 {
                font-size: 7.5em;
            }
        }

        @media screen and (max-width: 667px) {
            .agileits-content h2 {
                font-size: 7em;
            }
        }

        @media screen and (max-width: 600px) {
            h1.header-w3ls {
                font-size: 2.3em;
            }
        }

        @media screen and (max-width: 568px) {
            .w3layouts-right h4 {
                font-size: 1.1em;
            }

            .agileits-content h2 {
                font-size: 6em;
            }

            .w3layouts-right h3 {
                font-size: 2.3em;
            }
        }

        @media screen and (max-width: 480px) {
            .agileits-content h2 {
                font-size: 5em;
            }
        }

        @media screen and (max-width: 414px) {
            h1.header-w3ls {
                font-size: 2.1em;
            }

            .agileits-content h2 {
                font-size: 4.5em;
            }

            .w3layouts-right h3 {
                font-size: 2.2em;
                margin: 0;
            }

            .w3layouts-right h4 {
                font-size: 1.1em;
                margin: 1em 0 1em;
            }

            .w3ls-text {
                padding: 2em;
            }
        }

        @media screen and (max-width: 384px) {
            .w3layouts-right h3 {
                font-size: 2em;
            }

            h1.header-w3ls {
                font-size: 1.8em;
            }

            .w3layouts-right h4 {
                font-size: 1em;
            }

            .w3ls-text {
                padding: 2em 1em 0 1.5em;
            }
        }

        @media screen and (max-width: 375px) {
            .w3layouts-right h3 {
                font-size: 1.8em;
            }

            .w3layouts-right h4 {
                font-size: 1em;
            }

            p {
                font-size: 0.9em;
            }

            .agileits-content h2 {
                font-size: 4em;
            }

            .w3ls-text {
                padding: 2em 0.8em 2em 1.5em;
            }
        }

        @media screen and (max-width: 320px) {
            h1.header-w3ls {
                font-size: 1.7em;
            }

            .w3ls-text {
                padding: 3em 0.8em 2em 1.5em;
            }

        }
    </style>
    <!-- /css files -->
</head>

<body>
    <div class="w3layouts-bg d-flex justify-content-center align-items-center">
        <div class="agileits-content d-flex justify-content-center align-items-center">
            <h2>
                <span>4</span>
                <span>0</span>
                <span>4</span>
            </h2>
        </div>
        <div class="w3layouts-right d-flex justify-content-center align-items-center">
            <div class="w3ls-text">
                <h3>�ܱ�Ǹ��</h3>
                <h4 class="w3-agileits2">զ���£�ҳ�治������</h4>
                <p>��
                    <a href="/index.aspx">������ҳ</a> �����ʼ�
                    <a href="mailto:juyou@jyjykj.cn">juyou@jyjykj.cn</a> ��ϵ����</p>

            </div>

        </div>
        <div class="clearfix"></div>
    </div>
</body>

</html>