html {
    background: url('/images/index/background.jpg') no-repeat center;
    background-size: cover;
}

body {
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 1440px) {
    /*-------------------------------------------*/
    /*border*/
    .page_border_top {
        height: 10px;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: #dc7b00
    }

    .page_border_bottom {
        height: 10px;
        width: 100%;
        bottom: 0;
        left: 0;
        position: absolute;
        background-color: #dc7b00
    }

    .page_border_left {
        width: 10px;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: #dc7b00
    }

    .page_border_right {
        width: 10px;
        height: 100%;
        top: 0;
        right: 0;
        position: absolute;
        background-color: #dc7b00
    }
    /*border*/
    /*-------------------------------------------*/

    .page_index{
        overflow:hidden;
    } 
    .page_index > .title {
        position: absolute;
        left: 50%;
        margin-left: -338px;
        top: 100px;
    }

        .page_index > .product > img {
            position: absolute;
            left: 50%;
            margin-left: -318px;
            top: 38vh;
            z-index: 600;
            transition-duration: 0.2s;
        }

        .page_index > .product > a {
            position: absolute;
            width: 188px;
            height: 188px;
            left: 50%;
            margin-left: -208px;
            top: 37vh;
            z-index: 800;
        }

        .page_index > .project > img {
            position: absolute;
            left: 50%;
            margin-left: -68px;
            top: 49vh;
            z-index: 700;
            transition-duration: 0.1s;
        }

        .page_index > .project > a {
            position: absolute;
            width: 188px;
            height: 188px;
            top: 47vh;
            left: 50%;
            margin-left: -35px;
            z-index: 888;
        }

    .page_index > .copyright {
        position: absolute;
        bottom: 30px;
        left: 50px;
        color: #fefefe;
        font-size: 16px;
        font-weight: 500;
    }

        .page_index > .beian_gxb > a {
            position: absolute;
            bottom: 30px;
            right: 50px;
            color: #fefefe;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
        }

        .page_index > .beian_ga > a{
            position: absolute;
            bottom: 30px;
            right: 240px;
            color: #fefefe;
            font-size: 16px;
            font-weight: 500;
            text-decoration:none;
        }
        .page_index > .beian_ga > a > img {
            position: absolute;
            top: 1px;
            left: -25px;
        }
}


@media screen and (min-width: 736px) and (max-width: 1440px) {
    /*-------------------------------------------*/
    /*border*/
    .page_border_top {
        height: 10px;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: #dc7b00
    }

    .page_border_bottom {
        height: 10px;
        width: 100%;
        bottom: 0;
        left: 0;
        position: absolute;
        background-color: #dc7b00
    }

    .page_border_left {
        width: 10px;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: #dc7b00
    }

    .page_border_right {
        width: 10px;
        height: 100%;
        top: 0;
        right: 0;
        position: absolute;
        background-color: #dc7b00
    }
    /*border*/
    /*-------------------------------------------*/
    .page_index > .title {
        position: absolute;
        left: 50%;
        margin-left: -338px;
        top: 6vh;
    }


    .page_index > .product > img {
        position: absolute;
        left: 50%;
        margin-left: -288px;
        top: 30vh;
        z-index: 600;
        transition-duration: 0.5s;
    }

    .page_index > .product > a {
        position: absolute;
        width: 188px;
        height: 188px;
        left: 50%;
        margin-left: -208px;
        top: 41vh;
        z-index: 800;
    }

    .page_index > .project > img {
        position: absolute;
        left: 50%;
        margin-left: -88px;
        top: 40vh;
        z-index: 700;
        transition-duration: 0.2s;
    }

    .page_index > .project > a {
        position: absolute;
        width: 188px;
        height: 188px;
        top: 52vh;
        left: 50%;
        margin-left: -35px;
        z-index: 888;
    }


    .page_index > .copyright {
        position: absolute;
        bottom: 30px;
        left: 50px;
        color: #fefefe;
        font-size: 16px;
        font-weight: 500;
    }

    .page_index > .beian_gxb > a{
        position: absolute;
        bottom: 30px;
        right: 50px;
        color: #fefefe;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
    }

    .page_index > .beian_ga > a {
        position: absolute;
        bottom: 30px;
        right: 240px;
        color: #fefefe;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
    }

        .page_index > .beian_ga > a > img {
            position: absolute;
            top: 1px;
            left: -25px;
        }
}


@media screen and (max-width: 736px) {
    /*-------------------------------------------*/
    /*border*/
    .page_border_top {
        height: 5px;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: #dc7b00
    }

    .page_border_bottom {
        height: 5px;
        width: 100%;
        bottom: 0;
        left: 0;
        position: absolute;
        background-color: #dc7b00
    }

    .page_border_left {
        width: 5px;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-color: #dc7b00
    }

    .page_border_right {
        width: 5px;
        height: 100%;
        top: 0;
        right: 0;
        position: absolute;
        background-color: #dc7b00
    }
    /*border*/
    /*-------------------------------------------*/

    .page_index > .title {
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        top: 10%;
    }

    .page_index > .product > img {
        position: absolute;
        left: 15%;
        top: 30%;
        width: 60vw;
        z-index: 600
    }

    .page_index > .product > a {
        position: absolute;
        left: 30%;
        top: 35%;
        width: 30vw;
        height: 30vw;
        z-index: 800
    }

    .page_index > .project > img {
        position: absolute;
        left: 31%;
        top: 43%;
        width: 60vw;
        z-index: 700
    }

    .page_index > .project > a {
        position: absolute;
        left: 40%;
        top: 49%;
        width: 30vw;
        height: 30vw;
        z-index: 888
    }

    .page_index > .copyright {
        position: absolute;
        width: 100%;
        bottom: 60px;
        left: 0;
        color: #fefefe;
        font-size: 13px;
        font-weight: 100;
        text-align: center;
        line-height: 25px;
    }

    .page_index > .beian_gxb > a {
        position: absolute;
        width: 100%;
        bottom: 40px;
        left: 0;
        color: #fefefe;
        font-size: 12px;
        line-height: 25px;
        font-weight: 100;
        text-align: center;
        text-decoration: none;
    }

    .page_index > .beian_ga > a {
        position: absolute;
        width: 100%;
        bottom: 20px;
        left: 0;
        color: #fefefe;
        font-size: 12px;
        line-height: 25px;
        font-weight: 100;
        text-align: center;
        text-decoration: none;
    }

        .page_index > .beian_ga > a > img {
            height:13px;
            width:auto;
            margin-bottom: -2px;
        }
}