@charset "UTF-8";
.con { -webkit-box-sizing: border-box; box-sizing: border-box; width: 11rem; max-width: 100%; margin-left: auto; margin-right: auto; }

.header { position: absolute; top: 0; right: 0; left: 0; z-index: 99; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.header-con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; position: relative; height: 1.65rem; padding-left: .3rem; padding-bottom: .5rem; }
.header-con::after {
    content: '';
    position: absolute;
    left: -0.9rem;
    right: -0.9rem;
    bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .75);
    }
.logo { display: block; width: 2.12rem; height: .6rem; background: url('../images/logo.png') center no-repeat; background-image: -webkit-image-set(url('../images/logo.png') 1x, url('../images/logo@2x.png') 2x); background-image: image-set(url('../images/logo.png') 1x, url('../images/logo@2x.png') 2x); -webkit-background-size: 100% auto; background-size: 100% auto; text-indent: -999em; }

.nav-toggle { position: absolute; top: 0; left: 0; bottom: 0; z-index: 9; display: none; width: 1.1rem; overflow: hidden; text-indent: -999em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: auto; }
.nav-toggle::before,
.nav-toggle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: .44rem;
    height: 0;
    border-bottom: .04rem solid #fff;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    }
.nav-toggle::before { top: -0.12rem; height: .12rem; border-top: .04rem solid #fff; }
.nav-toggle::after { bottom: -0.36rem; }
.nav-toggle:active { opacity: .75; -webkit-transform: scale3d(.975,.975,.975); transform: scale3d(.975,.975,.975); }
.nav-toggle.active::before { top: 0; height: 0; border-top: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.nav-toggle.active::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.nav-item { display: block; margin-left: .65rem; text-align: center; font-size: .2rem; line-height: 1.2; color: #fff; -webkit-transition: color .2s; -o-transition: color .2s; transition: color .2s; }
.nav-item:hover,
.nav-item:active { color: var(--primary); }
.nav-item > strong,
.nav-item > em { display: block; font-style: normal; white-space: nowrap; }
.nav-item > em { font-size: .14rem; }

.footer { height: .62rem; padding-bottom: var(--safe-bottom); line-height: .62rem; color: #fff; font-size: .16rem; background-color: var(--primary); }

.back-top { position: fixed; right: .3rem; bottom: 1rem; z-index: 199; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: .64rem; height: .64rem; color: rgba(255, 255, 255, .75); font-size: .2rem; line-height: 1.2; text-align: center; background-color: rgba(254, 163, 11, .85); -webkit-backdrop-filter: saturate(180%) blur(.2rem); backdrop-filter: saturate(180%) blur(.2rem); -webkit-animation: fadeInUp .3s; animation: fadeInUp .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transition: color .3s; -o-transition: color .3s; transition: color .3s; overflow: hidden; }
.back-top::before {
    content: '';
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: .2rem;
    height: .2rem;
    margin-top: .06rem;
    margin-bottom: -.05rem;
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: border-color .3s, -webkit-transform .3s;
    transition: border-color .3s, -webkit-transform .3s;
    -o-transition: transform .3s, border-color .3s;
    transition: transform .3s, border-color .3s;
    transition: transform .3s, border-color .3s, -webkit-transform .3s;
    }
.back-top:hover,
.back-top:active { color: #fff; }
.back-top:hover::before { -webkit-transform: rotate(45deg) scale3d(1.1,1.1,1.1); transform: rotate(45deg) scale3d(1.1,1.1,1.1); }
.back-top.active { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

@-webkit-keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); }
    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); }
    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@media only screen and (max-width: 1680px) {
    html { font-size: 90px; }
}

@media only screen and (max-width: 1444px) {
    html { font-size: 80px; }
}

@media only screen and (max-width: 1200px) {
    html { font-size: 70px; }
}

@media only screen and (max-width: 1000px) {
    html { font-size: 60px; }
}

/* 手机端适配 */
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
    body { width: 100%; overflow-x: hidden; -webkit-touch-callout: none; }
    .header { position: -webkit-sticky; position: sticky; background-color: rgba(254, 163, 11, .85); }
    .header::before {
        content: '';
        position: absolute;
        top: -1px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        -webkit-backdrop-filter: saturate(180%) blur(.2rem);
                backdrop-filter: saturate(180%) blur(.2rem);
        }
    .header-con { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: .9rem; padding: 0; }
    .header-con::after { display: none; }
    .logo { width: 100%; height: .48rem; margin-left: auto; margin-right: auto; -webkit-background-size: auto 100%; background-size: auto 100%; }

    .nav-toggle { display: block; }
    .nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: fixed; top: .89rem; right: -1px; bottom: -1px; left: -1px; z-index: 99; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; background-color: rgba(254, 163, 11, .75); -webkit-backdrop-filter: saturate(180%) blur(.2rem); backdrop-filter: saturate(180%) blur(.2rem); opacity: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, -webkit-transform .3s; -o-transition: transform .3s, opacity .3s; transition: transform .3s, opacity .3s; transition: transform .3s, opacity .3s, -webkit-transform .3s; -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; }
    .nav.active { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); }
    .nav-item { margin-left: 0; margin-top: 1rem; font-size: .36rem; opacity: 0; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; }
    .nav-item:first-of-type { margin-top: 0; }
    .nav.active > .nav-item { -webkit-transition-delay: .35s; -o-transition-delay: .35s; transition-delay: .35s; opacity: 1; }
    .nav-item > em { font-size: .28rem; }
    .nav-item:hover,
    .nav-item:active { color: rgba(255,255,255,.75); }

    .body { overflow-x: hidden; }

    .footer { height: .8rem; line-height: .8rem; font-size: .26rem; text-align: center; }

    .back-top.active { display: none; }

    @supports not ((position: -webkit-sticky) or (position: sticky)) {
        body::before { padding-top: .9rem; }
        .header { position: fixed; background-color: rgba(254, 163, 11, 1);  }
        .nav { background-color: rgba(254, 163, 11, .9); }
    }
}