* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: linear-gradient(to bottom, #75a7f7, #bed6f2);
    font-family: "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

.page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 750px;
    height: 100%;
    max-height: 1334px;
    margin: 0 auto;
    overflow: hidden;
    background: url("../images/yongli-bg.jpg") center top / cover no-repeat;
}

.content {
    position: relative;
    flex: none;
    width: min(100%, calc(100vh * 750 / 1334));
    aspect-ratio: 750 / 1334;
}

.item {
    position: absolute;
    display: block;
    margin: 0;
}

.item img {
    display: block;
    width: 100%;
}

.logo {
    top: calc(92 / 1334 * 100%);
    left: 50%;
    width: calc(640 / 750 * 100%);
    transform: translateX(-50%);
}

.logo img {
    object-fit: contain;
}

.main-image {
    top: calc(380 / 1334 * 100%);
    left: 50%;
    width: calc(605 / 750 * 100%);
    transform: translateX(-50%);
    animation: pulse 2.5s linear 1.35s infinite;
}

.title-h2 {
    top: calc(878 / 1334 * 100%);
    left: 50%;
    width: calc(650 / 750 * 100%);
    color: #ff3b2f;
    font-family: "YouYuan", "STYuanti-SC-Bold", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: clamp(1.2rem, 3.5vh, 2.5rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-align: center;
    text-shadow:
        0 2px 0 #fff,
        1px 0 0 #fff,
        -1px 0 0 #fff,
        0 4px 5px rgb(134 20 20 / 45%);
    transform: translateX(-50%);
}

.title-h2 span,
.title-h2 small {
    display: block;
    white-space: nowrap;
}

.title-h2 small {
    margin-top: 0.08em;
    font-size: 1.15em;
}

.title-h2 strong {
    color: #ff8a00;
    font-size: 1.12em;
}

.actions {
    position: absolute;
    top: calc(1062 / 1334 * 100%);
    left: 50%;
    width: calc(630 / 750 * 100%);
    transform: translateX(-50%);
}

.image-button {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    width: calc(309 / 630 * 100%);
    aspect-ratio: 309 / 76;
    border: 1px solid rgb(255 255 255 / 40%);
    border-radius: clamp(1.95rem, 2.95vh, 2.95rem);
    box-shadow:
        inset 0 2px 3px rgb(255 255 255 / 35%),
        0 4px 8px rgb(66 89 185 / 28%);
    color: #fff;
    cursor: pointer;
    font-size: clamp(0.9rem, 2.45vh, 1.55rem);
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 1px 2px rgb(34 62 159 / 65%);
    transition: filter 0.2s, transform 0.2s;
}

.image-button:hover {
    filter: brightness(1.1);
}

.image-button:active {
    transform: scale(0.94);
}

.service-button {
    left: 0;
    background: linear-gradient(100deg, #9256f3, #886df8);
}

.download-button {
    right: 0;
    background: linear-gradient(100deg, #378bf5, #4b79f3);
}

.button-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.8em;
    height: 1.8em;
    border: 2px solid rgb(255 255 255 / 65%);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(20 62 161 / 35%);
    font-size: 0.8em;
    line-height: 1;
}

.login-icon {
    background: linear-gradient(145deg, #3dd9ab, #12a981);
}

.app-icon {
    border-color: rgb(255 255 255 / 85%);
    background: rgb(255 255 255 / 92%);
}

.app-icon img {
    display: block;
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.footer-info {
    position: absolute;
    top: calc(1221 / 1334 * 100%);
    width: 100%;
    text-align: center;
}

.tip {
    margin: 0;
    color: #777;
    font-size: clamp(0.7rem, 1.5vh, 0.95rem);
}

.site-stats {
    display: inline-block;
    margin-top: 0.45em;
    color: #6682a7;
    font-size: clamp(0.62rem, 1.25vh, 0.8rem);
    text-decoration: none;
}

.site-stats:hover {
    color: #3e65a0;
    text-decoration: underline;
}

@keyframes pulse {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(0.975);
    }
}

@media (min-width: 1081px) {
    .page {
        background: none;
    }

    .content {
        background: url("../images/yongli-bg.jpg") center top / 100% auto no-repeat;
    }
}