<!doctype html>
<html>

<head> <meta name="keywords" content="keywords_temp" />
<meta name="description" content="description_temp" />

    <meta charset="utf-8">
    <title>成都蛟龙港</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            background: #2f8d99;
            overflow-x: hidden;
            color: #fff;
            font-family: 微软雅黑,Microsoft Yahei ,Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.231;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        .box404 {
            width: 980px;
            width: 460px;
            padding-left: 520px;
            height: 540px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -490px;
            margin-top: -270px;
            background: url(/static/images/404.png) left bottom no-repeat;
            overflow: hidden;
        }

        .logot {
            height: 220px;
        }

        .logot span {
            display: block;
        }

        .logot span:nth-child(1) {
            font-size: 30px;
            line-height: 50px;
        }

        .logot span:nth-child(2) {
            font-size: 16px;
            line-height: 30px;
        }

        .logot a:hover {
            text-decoration: underline;
        }

        .cont {
            height: 250px;
        }

        .cont span {
            display: block;
        }

        .cont span:nth-child(1) {
            font-size: 70px;
            line-height: 90px;
        }

        .cont span:nth-child(2) {
            font-size: 28px;
            line-height: 40px;
            margin-bottom: 20px;
        }

        .cont span:nth-child(3) {
            font-size: 16px;
            line-height: 30px;
        }

        .btn a {
            display: block;
            height: 40px;
            padding: 0 30px;
            border: 1px solid #fff;
            border-radius: 3px;
            font-size: 16px;
            line-height: 40px;
            float: left;
            margin-right: 15px;
        }

        .btn a:hover {
            background: #fff;
            color: #2f8d99;
        }

        @media screen and (max-width: 500px) {
            .box404 {
                width: 100%;
                height: 100vh;
                padding-left: 0;
                position: absolute;
                left: 0;
                top: 0;
                margin-left: 0;
                margin-top: 0;
                background: url(/static/images/404.png) center 40px no-repeat;
                background-size: 50vw;
            }

            .logot {
                height: 100px;
                margin-top: calc(50vw + 80px);
                text-align: center;            }

            .logot span:nth-child(1) {
                font-size: 0.75em;
                line-height: 200%;
            }

            .logot span:nth-child(2) {
                font-size: 0.75em;
                line-height: 100%;
            }

            .cont {
                height: auto;
                overflow: hidden;
                text-align: center;
            }

            .cont span:nth-child(1) {
                font-size: 2.5em;
                line-height: 120%;
            }

            .cont span:nth-child(2) {
                font-size: 0.75em;
                line-height: 200%;
                margin-bottom: 0;
            }

            .cont span:nth-child(3) {
                font-size: 0.75em;
                line-height: 200%;
                margin-bottom: 50px;
            }

            .btn {
                width: 100%;
                height: auto;
                text-align: center;
                overflow: hidden;
            }
            .btn a {
                display: inline-block;
                height: 35px;
                padding: 0 20px;
                border: 1px solid #fff;
                border-radius: 3px;
                font-size: 0.8em;
                line-height: 35px;
                margin: 0 5px;
                float:none;
            }

            .btn a:hover {
                background: #fff;
                color: #2f8d99;
            }
        }
    </style>
</head>

<body>
    <div class="box404">
        <div class="logot">
            <span>成都蛟龙港</span>
            <span><a href="//n34r.com">n34r.com</a></span>
        </div>
        <div class="cont">
            <span>SORRY!</span>
            <span>您访问的页面杯具了！</span>
            <span>真不巧，您访问的页面不存在，请联系管理员或重新访问！</span>
        </div>
        <div class="btn">
            <a href="/">返回首页</a>
            <a href="javascript:history.go(-1)">返回前一页</a>
        </div>
    </div>
</body>

</html>