@charset "utf-8";
/* CSS Document */
html {
    font-family: arial;
    font-size: 62.5%;
}

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #f0f1f5;
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
    color: #FFFFFF;
}

ul {
    list-style: none;
}

.wrepper {
    width: 100%;
    background-color: #f0f1f5;
    background-image: url("/images/bg.png");
}

    .wrepper::after {
        content: '-';
        color: transparent;
        display: block;
        font-size: 16px;
        margin-top: 240px;
    }

    .wrepper .box .logo-box {
        width: 100%;
        text-align: center;
    }

        .wrepper .box .logo-box .logo {
            margin-top: 140px;
            display: inline-block;
        }

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

        .wrepper .box .text-box .text {
            margin-top: 38px;
        }

    .wrepper .box .button-box {
        text-align: center;
    }

    .wrepper .box .button {
        width: 500px;
        height: 90px;
        display: inline-block;
        background-color: #ffda64;
        border-radius: 10px;
        text-align: center;
        margin: auto;
        margin-top: 40px;
        font-size: 40px;
        font-weight: 200;
        line-height: 90px;
        color: #352f1e;
    }

        .wrepper .box .button:hover {
            background-color: #ff6278;
            color: #FFFFFF;
        }

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

    .wrepper {
        width: 100%;
        background-color: #f0f1f5;
        background-image: url("/images/bg.png");
        background-position: center;
        background-size: 350%;
    }

        .wrepper::after {
            content: '-';
            color: transparent;
            display: block;
            font-size: 16px;
            margin-top: 50%;
        }

        .wrepper .box .logo-box {
            text-align: center;
        }

            .wrepper .box .logo-box .logo {
                width: 30%;
                margin-top: 35%;
                display: inline-block;
            }

        .wrepper .box .text-box {
            text-align: center;
        }

            .wrepper .box .text-box .text {
                width: 80%;
                margin-top: 10%;
            }

        .wrepper .box .button-box {
            text-align: center;
        }

        .wrepper .box .button {
            width: 76%;
            height: 60px;
            display: inline-block;
            background-color: #ffda64;
            border-radius: 10px;
            text-align: center;
            margin: auto;
            margin-top: 40px;
            font-size: 2.8rem;
            font-weight: 100;
            line-height: 60px;
            color: #352f1e;
        }

            .wrepper .box .button:hover {
                background-color: #ff6278;
                color: #FFFFFF;
            }
}