html, body {
    margin: 0;
    background-color: #003b61;
    -webkit-tap-highlight-color: transparent;
}

.container {
    max-width: 640px;
    text-align: center;
    margin: auto;
}

.full-width {
    width: 100%;
}

.header {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    max-width: 640px;
}

.header-placeholder {
    padding-top: 14.8%;
}

.main {
    position: relative;
}

.bg{
    vertical-align: middle;
}

.btns {
    position: absolute;
    width: 100%;
    top: 30%;
    display: flex;
    justify-content: space-evenly;
}

/*闪烁动画*/
@keyframes flashing{
    0% { scale: 1; }
    50% { scale: 1.2; }
    100% { scale: 1; }
}
/* 添加兼容性前缀 */
@-webkit-keyframes flashing {
    0% { scale: 1; }
    50% { scale: 1.2; }
    100% { scale: 1; }
}
@-moz-keyframes flashing {
    0% { scale: 1; }
    50% { scale: 1.2; }
    100% { scale: 1; }
}
@-ms-keyframes flashing {
    0% { scale: 1; }
    50% { scale: 1.2; }
    100% { scale: 1; }
}
@-o-keyframes flashing {
    0% { scale: 1; }
    50% { scale: 1.2; }
    100% { scale: 1; }
}
.flashing {
    animation: flashing 0.5s linear infinite;
    -webkit-animation: flashing 0.5s linear infinite;
    -moz-animation: flashing 0.5s linear infinite;
    -ms-animation: flashing 0.5s linear infinite;
    -o-animation: flashing 0.5s linear infinite;
}

.btns .btn {
    width: 40%;
    transition: 150ms;
}
.btns .btn:active {
    transform: scale(1.1);
    filter: brightness(1.1);
}
@media screen and (min-width: 640px) {
    /* hover在移动端不会恢复，只在大屏幕加 */
    .btns .btn:hover {
        transform: scale(1.1);
    }
}