* {
    box-sizing: border-box
}

#app,
body,
html {
    height: 100%;
    min-width: 320px;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #999
}

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

.page {
    width: 100%;
    height: 100%
}

.page .top {
    display: flex;
    align-items: center;
    width: 100%;
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
    text-align: center
}

.page .top .top-wrapper {
    margin: 0 auto;
    padding: 64px 0
}

.page .top .logo {
    width: 320px;
    display: block;
    margin-bottom: 48px
}

.page .top .link-button {
    display: flex;
    padding: 0 16px;
    margin: 0 auto 68px;
    background: #2c5bd8;
    border-color: #2c5bd8;
    color: #fff;
    line-height: 48px;
    border: 0;
    outline: 0;
    align-items: center;
    font-size: 16px;
    cursor: pointer
}

.page .top .link-button .badge {
    width: 16px
}

.page .top .link-button:hover {
    opacity: .8
}

.page .top .cube-pc {
    margin: 0 auto;
    width: 240px;
    height: 240px;
}

.page .bottom {
    padding: 34px 54px;
    width: 100%;
    min-width: 1200px;
    margin: 0 auto
}

.page .bottom .logo {
    width: 122px;
    display: block;
    margin-bottom: 16px
}

.page .bottom .content {
    display: flex
}

.page .bottom .content .text-container {
    padding-bottom: 8px;
    display: flex;
    align-items: center
}

.page .bottom .content .badge {
    width: 16px;
    height: 16px
}

@media screen and (min-width:900px) {
    .page {
        display: grid;
        grid-template-rows: 1fr 100px
    }

    .top {
        min-height: 800px;
        background-image: url(../img/background-pc.jpg)
    }

    .top .cube .cube-pc {
        width: 200px;
        height: 200px;
    }

    .bottom .content {
        justify-content: space-between
    }
}

@media screen and (max-width:900px) {
    .page .top {
        background-image: url(../img/background.jpg);
        height: 620px;
        align-items: unset
    }

    .page .top .logo {
        width: 280px;
        margin-bottom: 36px
    }

    .page .top .link-button {
        margin-bottom: 54px
    }

    .page .top .cube {
        height: 30vh;
        max-height: 146px
    }

    .page .bottom {
        width: 100%;
        padding: 54px 16px;
        min-width: 320px;
        font-weight: 400;
        color: #999
    }

    .page .bottom .logo {
        display: none !important
    }

    .page .bottom .content {
        display: block;
        text-align: center
    }

    .page .bottom .content .right {
        position: relative;
        padding-top: 8px
    }

    .page .bottom .content .right:after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #dadfe6;
        position: absolute;
        top: 0;
        left: 0;
        transform: scaleY(.5)
    }

    .page .bottom .content .text-container {
        display: block
    }

    .page .bottom .content .text-container .location-label {
        display: none
    }
}