/* reset css S */
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
/* reset css E */

body {
    margin: 0;
    font-size: 16px;
    font-family: PingFang SC,HarmonyOS_Medium,Helvetica Neue,Microsoft YaHei,sans-serif;
}

::-webkit-scrollbar {
    background-color: none;
    height: 8px;
    width: 8px
}
::-webkit-scrollbar-track {
    background-color: #ebeff5;
    border-radius: 4px
}
::-webkit-scrollbar-thumb {
    background-color: #a2acb4;
    border-radius: 4px
}

.banner {
    position: relative;
    padding: 9.75em 0 14.375em;
    background: url(../images/bg-1.png) no-repeat center;
    background-size: cover;
}
.logo {
    --img-w: 646;
    --h: 531;
    --app-w: 40.375em;
    width: var(--app-w);
    aspect-ratio: 646/531;
    margin: 0 auto;
    background: url(../images/logo.png) no-repeat center;
    background-size: contain;
}

.section-1 {
    padding: 3.75em 0;
    background: url(../images/bg-2.png) no-repeat center;
    background-size: cover;
}
.section-1-main {
    box-sizing: border-box;
    width: 75em;
    max-width: 94%;
    margin: 0 auto;
    padding: 1.375em 11.25em 3.75em;
    background-color: rgba(4, 18, 46, .6);
    border-radius: 2.875em;
}
.core-message-main {
    --img-w: 647;
    --h: 200;
    --app-w: 40.4375em;
    width: var(--app-w);
    max-width: 100%;
    aspect-ratio: 647/200;
    margin-bottom: 2.5em;
    background: url(../images/core-message.png) no-repeat center;
    background-size: contain;
}
.about-us-main {
    display: grid;
    justify-items: flex-end;
}
.about-us-title {
    --img-w: 280;
    --h: 82;
    --app-w: 17.5em;
    width: var(--app-w);
    aspect-ratio: 280/82;
    margin-bottom: 1.875em;
    background: url(../images/about-us-title.png) no-repeat center;
    background-size: contain;
}
.about-us-main p {
    width: 100%;
    text-align: left;
    font-weight: bold;
    font-size: 1.125em;
    color: #ffff91;
}

.section-2 {
    padding: 4em 0;
    background-color: #b7ecec;
}
.email-main {
    display: grid;
    justify-items: center;
    gap: 0.25em;
}
.email-main a {
    font-size: 1.875em;
    font-weight: bold;
    color: #1f2b41;
}
.email-main a:hover {
    text-decoration: underline;
}
.deco {
    --img-w: 76;
    --h: 89;
    --app-w: 4.75em;
    width: var(--app-w);
    aspect-ratio: 76/89;
    background: url(../images/email-deco.png) no-repeat center;
    background-size: contain;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5em 0;
    background-color: #2a2a2a;
}
.logo-white {
    --img-w: 134;
    --h: 117;
    --app-w: 8.375em;
    width: var(--app-w);
    aspect-ratio: 134/117;
    margin-right: 1.875em;
    background: url(../images/logo-white.png) no-repeat center;
    background-size: contain;
}
.copyright-info p {
    font-size: 1.125em;
    color: #fff;
    font-weight: bold;
}

@supports not (aspect-ratio: 1) {
    .logo, .core-message-main, .about-us-title, .deco, .logo-white {
        height: calc(var(--app-w) * var(--h) / var(--img-w));
    }
}

@media (max-width: 1040px) {
    .section-1-main {
        padding: 3em;
    }
}

@media (max-width: 900px) {
    .banner {
        padding: 8em 0 10em;
    }
    .logo {
        --app-w: 18em;
    }

    .section-1 {
        padding: 2em 0;
    }
    .section-1-main {
        padding: 2em 1em;
    }
    .about-us-title {
        --app-w: 9.5em;
    }
    .about-us-main p {
        font-size: .875em;
    }

    .section-2 {
        padding: 2em 0;
    }
    .deco {
        --app-w: 3em;
    }
    .email-main a {
        font-size: .875em;
    }

    .footer {
        padding: 2em 0;
    }
    .logo-white {
        --app-w: 5em;
        margin-right: 1em;
    }
    .copyright-info p {
        font-size: .875em;
    }
}