* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;

    user-select: none;

    -webkit-tap-highlight-color: transparent;
}

svg > text {
    font-family: 宋体, Arial, Helvetica, sans-serif;
}

header {
    height: 8%;

    background: #f8f8f8;

    display: flex;
    justify-content: center;
}

.headerContainer {
    width: 96%;
    height: 100%;

    position: relative;
}

.container {
    height: 84%;
}

.symmetry {
    width: 100%;
    height: 84%;

    position: absolute;
}

.circle {
    width: 100%;
    height: 84%;

    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;
}

.constraint {
    width: 76%;
    height: 76%;
}

.about {
    width: 100%;
    height: 100%;

    position: fixed;
    top: 0;
    z-index: 1024;

    display: none;
}

footer {
    height: 8%;

    display: flex;
    justify-content: center;
}

.footerContainer {
    width: 96%;
    height: 100%;

    overflow: hidden
}

@media (max-width: 1240px) {
    header {
        height: 6%;
    }

    .container {
        height: 88%;
    }

    .symmetry {
        height: 88%;
    }

    .circle {
        height: 88%;
    }

    footer {
        height: 6%;
    }
}