@font-face {
    font-display: block;
    font-family: zpix;
    font-style: normal;
    font-weight: 400;
    src: url(/wp-content/themes/qielin/images/lin/14273d9cab46a90dab32.woff2) format("woff2"), url(/wp-content/themes/qielin/images/lin/54d8b0e6c27274e352b7.woff) format("woff")
}

@font-face {
    font-display: block;
    font-family: departure-mono;
    font-style: normal;
    font-weight: 400;
    src: url(/wp-content/themes/qielin/images/lin/a0535e12d577abfe8d8b.woff2) format("woff2"), url(/wp-content/themes/qielin/images/lin/8074fd6d550354dd1481.woff) format("woff")
}

* {
    box-sizing: border-box;
    margin: 0;
    padding:0
}

body, html {
    cursor: url(/wp-content/themes/qielin/images/lin/7117585f88ea9d460008.svg) 0 0, default;
    height:calc(var(--vh, 1vh) * 100)
}

body, html {
    overflow:hidden
}

body {
    --font-size: 6rem;
    background-color: #000;
    box-sizing: border-box;
    color: #fff;
    font-family: zpix, -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, PingFang SC, Microsoft YaHei, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    font-size: var(--font-size);
    margin: 0;
    padding:0
}

a {
    color: inherit;
    cursor: pointer;
    text-decoration:none
}

::-webkit-scrollbar {
    height: 2px;
    width:2px
}

::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 100%, .2);
    border-radius: 99px;
    height:2px
}

@media (max-width: 1200px) {
    ::-webkit-scrollbar {
        height: 0;
        width:0
    }

    ::-webkit-scrollbar-thumb {
        height:0
    }
}

::-webkit-scrollbar-track {
    margin-bottom: 48px;
    margin-top:48px
}

.divider {
    background-color: #000;
    height: 4px;
    width:100%
}

.code-light {
    color: #000;
    opacity:.6
}

.smile-eyes {
    font-family: Arial, Helvetica, sans-serif;
    line-height:.8
}

.hover-effect {
    color: #eeede6;
    display: inline-block;
    overflow: hidden;
    position: relative;
    transition:color .3s ease
}

.hover-effect:after {
    background-color: transparent;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    transform: translateY(100%);
    transition: transform .3s ease, background-color .3s ease;
    width: 100%;
    z-index:0
}

.hover-effect:hover {
    color:#000
}

.hover-effect:hover:after {
    background-color: #fff;
    transform:translateY(0)
}

.hover-effect span {
    position: relative;
    z-index:1
}

.noise {
    background-image: url(/wp-content/themes/qielin/images/lin/b66bd43e90d97b1d1851.gif);
    background-repeat: repeat;
    background-size: 400px 400px;
    bottom: 0;
    left: 0;
    opacity: .1;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index:999999
}

.border-wrapper {
    box-sizing: border-box;
    transition: background-color .5s linear;
    z-index:-2
}

.border-override, .border-wrapper {
    background-color: #000;
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top:0
}

.border-override {
    transition: background-color .5s ease;
    z-index:-1
}

.border-override.show {
    background-color: #b22222;
    transition:background-color 1s ease
}

.scrollable-container {
    background-color: #070707;
    border-radius: 32px;
    bottom: 20px;
    filter: blur(30px);
    height: calc(var(--vh, 1vh) * 100 - 40px);
    left: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    right: 20px;
    scrollbar-color: hsla(0, 0%, 100%, .2);
    scrollbar-width: 2px;
    top: 20px;
    transition: filter 1s ease;
    width: calc(100vw - 40px);
    z-index:0
}

@media (max-width: 900px) {
    .scrollable-container {
        bottom: 10px;
        height: calc(var(--vh, 1vh) * 100 - 20px);
        left: 10px;
        right: 10px;
        top: 10px;
        width:calc(100vw - 20px)
    }
}

.scrollable-container.loaded {
    filter: none;
    transition:filter 1s ease
}

.loading {
    background-color: #070707;
    bottom: 0;
    left: 0;
    opacity: 1;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index:99999
}

.loading.loaded {
    background-color:transparent
}

.loading .text {
    bottom: 0;
    left: 0;
    opacity: 1;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index:2
}

.loading.loaded .text {
    opacity: 0;
    transition:opacity .5s ease
}

.loading .text:after {
    align-items: center;
    animation: loadingDots 1s steps(8) infinite, loadingGlow 2s infinite alternate;
    animation-delay: 1.5s;
    bottom: 0;
    color: #fff;
    content: "";
    display: flex;
    font-family: departure-mono;
    font-size: min(5vmin, 22px);
    font-weight: 700;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    text-shadow: 0 0 10px hsla(0, 0%, 100%, .4), 0 0 20px hsla(0, 0%, 100%, .2), 0 0 30px hsla(0, 0%, 100%, .1);
    top: 0;
    width:100%
}

@keyframes loadingDots {
    0% {
        content: ".[>_______]"
    }

    12.5% {
        content: ".[_>______]"
    }

    25% {
        content: "‧[__>_____]"
    }

    37.5% {
        content: "‧[___>____]"
    }

    50% {
        content: ".[____>___]"
    }

    62.5% {
        content: ".[_____>__]"
    }

    75% {
        content: "‧[______>_]"
    }

    87.5% {
        content: "‧[_______>]"
    }

    to {
        content: ".[________]"
    }
}

@keyframes loadingGlow {
    0% {
        text-shadow:0 0 5px hsla(0, 0%, 100%, .1)
    }

    to {
        text-shadow:0 0 20px hsla(0, 0%, 100%, .4)
    }
}

.loading .container {
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    left: 0;
    opacity: 1;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index:1
}

.loading .container .box {
    background-color: #070707;
    opacity:1
}

.loading.loaded .container .box {
    animation:boxFadeOut 1s forwards
}

@keyframes boxFadeOut {
    to {
        opacity:0
    }
}

.marquee-container {
    display: flex;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    width:100%
}

.marquee-content {
    align-items: center;
    display: flex;
    justify-content:center
}

main .top-container {
    display: grid;
    grid-template-columns: 38.2% 61.8%;
    height: auto;
    min-height:calc(100vh - 40px)
}

@media (max-width: 1680px) {
    main .top-container {
        grid-template-columns:50% 50%
    }
}

@media (max-width: 900px) {
    main .top-container {
        display: flex;
        flex-direction:column
    }
}

main .top-container .title-container {
    background-color: #b22222;
    border-radius: 32px;
    border-bottom-left-radius: 0;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: space-between;
    padding-bottom: 80px;
    padding-left: 80px;
    padding-right: 80px;
    transition:border-radius .3s linear
}

@media (max-width: 900px) {
    main .top-container .title-container {
        min-height: calc(var(--vh) * 100 - 20px);
        padding-bottom: 10vw;
        padding-left: 10vw;
        padding-right:10vw
    }
}

main .top-container .title-container .title {
    color: #eff5d9;
    font-size: 120px;
    font-weight: 700;
    padding-top:80px
}

@media (max-width: 1200px) {
    main .top-container .title-container .title {
        font-size:80px
    }
}

@media (max-width: 900px) {
    main .top-container .title-container .title {
        font-size: 17vw;
        padding-top:10vw
    }
}

main .top-container .title-container .desc {
    color: rgba(0, 0, 0, .8);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 48px;
    margin-top:48px
}

@media (max-width: 1200px) {
    main .top-container .title-container .desc {
        font-size: 18px;
        margin-bottom: 64px;
        margin-top:32px
    }
}

@media (max-width: 900px) {
    main .top-container .title-container .desc {
        font-size: 4vw;
        margin-bottom: 20vw;
        margin-top:10vw
    }
}
    
main .top-container .title-container .desc .emoji {
    color: #000;
    position:relative
}

main .top-container .title-container .link {
    color: rgba(0, 0, 0, .8);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 48px;
    margin-top:48px
}

@media (max-width: 1200px) {
    main .top-container .title-container .link {
        font-size: 18px;
        margin-bottom: 64px;
        margin-top:32px
    }
}

@media (max-width: 900px) {
    main .top-container .title-container .link {
        font-size: 4vw;
        margin-bottom: 20vw;
        margin-top:10vw
    }
}

main .top-container .title-container .link a {
    transition:color .3s ease
}

main .top-container .title-container .link a:hover {
    color: #eff5d9;
    transition:color .3s ease
}

main .top-container .title-container .smile {
    color: #eff5d9;
    font-size: 120px;
    font-weight:700
}

@media (max-width: 1200px) {
    main .top-container .title-container .smile {
        font-size:80px
    }
}

@media (max-width: 900px) {
    main .top-container .title-container .smile {
        font-size:17vw
    }
}

main .top-container .composition-container {
    height: auto;
    overflow: hidden;
    position:relative
}

@media (max-width: 900px) {
    main .top-container .composition-container {
        height: 480px;
        margin-top:100px
    }
}

main .top-container .composition-container .title {
    color: #eeede6;
    display: flex;
    font-size: 120px;
    font-weight: 400;
    justify-content: center;
    padding-top:80px
}

@media (max-width: 1200px) {
    main .top-container .composition-container .title {
        font-size:80px
    }
}

@media (max-width: 900px) {
    main .top-container .composition-container .title {
        font-size: calc(32px + 8vmin);
        padding-top:10vw
    }
}

main .top-container .composition-container .composition-wrapper {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top:0
}

@media (max-width: 900px) {
    main .top-container .composition-container .composition-wrapper {
        height:480px
    }
}

main .top-container .composition-container .composition-wrapper .composition-box {
    align-items: center;
    border-radius: calc(100px + 2vw);
    color: #fff;
    cursor: grab;
    display: flex;
    filter: blur(8px);
    font-size: calc(32px + 1vw);
    justify-content: center;
    line-height: 1;
    opacity: 0;
    padding: calc(10px + 1.2vw) calc(10px + 2.4vw);
    pointer-events: none;
    position: absolute;
    transform: translateZ(0);
    transition: opacity .8s ease, filter .8s ease;
    user-select:none
}

main .top-container .composition-container .composition-wrapper .emoji {
    background-color: transparent;
    border-radius: 100%;
    height: 54px;
    padding: 0 !important;
    width:54px
}

@media (max-width: 1200px) {
    main .top-container .composition-container .composition-wrapper .composition-box {
        font-size: calc(12px + 1.5vw);
        padding:calc(10px + 1.5vw) calc(10px + 3vw)
    }

    main .top-container .composition-container .composition-wrapper .emoji {
        height: 24px;
        width:24px
    }
}

@media (max-width: 900px) {
    main .top-container .composition-container .composition-wrapper .composition-box {
        font-size: calc(12px + 2vw);
        padding:calc(10px + 2vw) calc(10px + 4vw)
    }

    main .top-container .composition-container .composition-wrapper .emoji {
        height: 24px;
        width:24px
    }
}

main .work-container {
    padding-bottom: 40px;
    padding-top: 200px;
    position: relative;
    user-select:none
}

@media (max-width: 900px) {
    main .work-container {
        padding-top:100px
    }
}

main .work-container .work-title {
    display: flex;
    justify-content: center;
    margin-bottom:400px
}

main .work-container .work-title .marquee-container {
    background-color: #0c0c0c;
    padding-bottom: 48px;
    padding-top: 48px;
    transform:rotate(-1.236deg)
}

main .work-container .work-title .marquee-container:before {
    background: linear-gradient(90deg, #070707, rgba(7, 7, 7, 0));
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    user-select: none;
    width: 20vw;
    z-index:1
}

main .work-container .work-title .marquee-container:after {
    background: linear-gradient(-90deg, #070707, rgba(7, 7, 7, 0));
    content: "";
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    user-select: none;
    width: 20vw;
    z-index:1
}

main .work-container .work-title .marquee-container .marquee-content {
    color: #eeede6;
    font-size: 120px;
    font-weight: 400;
    padding-right:80px
}

@media (max-width: 900px) {
    main .work-container .work-title .marquee-container .marquee-content {
        font-size: calc(32px + 8vmin);
        padding-right:8vw
    }
}

main .work-container .work-title .marquee-container .marquee-content .en {
    font-weight:400
}

main .work-container .work-title .marquee-container .marquee-content img {
    border-radius: 999px;
    height: 120px;
    margin-left: 80px;
    margin-right: 90px;
    opacity:.8
}

@media (max-width: 900px) {
    main .work-container .work-title .marquee-container .marquee-content img {
        height: calc(32px + 8vmin);
        margin-left: 8vw;
        margin-right:8.5vw
    }
}

main .work-container .work-item-container {
    overflow: hidden;
    transform: translate(0) translateZ(0);
    width:100%
}

main .work-container .work-item-container .work-swiper-container {
    overflow:visible
}

main .work-container .work-item-container .swiper-slide {
    transform: translate(0) translateZ(0);
    width:fit-content
}

main .work-container .work-item-container .work-item {
    display: flex;
    filter: none;
    flex-direction: column;
    height: 550px;
    justify-content: space-between;
    margin: 5vmin;
    opacity: 1;
    transform: translate(0) translateZ(0);
    transition: opacity .35s ease, filter .35s ease;
    width:400px
}

@media (max-width: 480px) {
    main .work-container .work-item-container .work-item {
        height: 110vw;
        width:80vw
    }
}

main .work-container .work-item-container .work-item .work-item-image {
    height: 100%;
    overflow: hidden;
    position: relative;
    width:100%
}

main .work-container .work-item-container .work-item .work-item-image img {
    display: block;
    pointer-events: none;
    position: relative;
    user-select:none
}

main .work-container .work-item-container .work-item .work-item-image .image-override {
    background: rgba(0, 0, 0, .2);
    height: calc(100% + 20px);
    left: -10px;
    position: absolute;
    top: -10px;
    width:calc(100% + 20px)
}

main .work-container .work-item-container .work-item .data-cursor-show-container {
    display: none;
    pointer-events: none;
    user-select:none
}

main .work-container .work-item-container .work-item .work-item-main {
    align-items: start;
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    left: 0;
    padding: 20px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width:100%
}

@media (max-width: 480px) {
    main .work-container .work-item-container .work-item .work-item-main {
        padding:14px
    }
}

main .work-container .work-item-container .work-item .work-item-main .work-item-link {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 28px;
    font-weight: 400;
    justify-content: space-between;
    pointer-events: all;
    text-align: center;
    width:100%
}

main .work-container .work-item-container .work-item .work-item-main .work-item-link .item-link {
    background-color: #000;
    display: flex;
    padding: 6px;
    width:fit-content
}

main .work-container .work-item-container .work-item .work-item-main .work-item-link a {
    align-items: center;
    display: flex;
    justify-content:center
}

main .work-container .work-item-container .work-item .work-item-main .work-item-link .icon {
    color: #fff;
    height: 32px;
    margin: 6px;
    width:32px
}

main .work-container .work-item-container .work-item .work-item-main .work-item-link .go-icon {
    background-color: #000;
    padding: 6px;
    width:fit-content
}

main .work-container .work-item-container .work-item .work-item-main .work-item-link .go-icon .icon {
    padding:4px
}

main .work-container .work-item-container .work-item .work-item-main .work-item-content {
    pointer-events:all
}

main .work-container .work-item-container .work-item .work-item-main .work-item-content .work-item-title {
    background-color: #000;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    padding: 10px 14px;
    width:fit-content
}

@media (max-width: 480px) {
    main .work-container .work-item-container .work-item .work-item-main .work-item-content .work-item-title {
        font-size:5vw
    }
}

main .work-container .work-item-container .work-item .work-item-main .work-item-content .work-item-role {
    align-items: center;
    background-color: #000;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 16px;
    position: relative;
    text-align: center;
    width:fit-content
}

@media (max-width: 480px) {
    main .work-container .work-item-container .work-item .work-item-main .work-item-content .work-item-role {
        font-size: 12px;
        padding:6px 14px
    }
}

main .work-container .work-item-container .work-item .work-item-main .work-item-content .work-item-desc {
    background-color: #000;
    color: hsla(0, 0%, 100%, .9);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    overflow: hidden;
    padding: 12px 14px;
    text-overflow: ellipsis;
    white-space: normal;
    width:fit-content
}

@media (max-width: 480px) {
    main .work-container .work-item-container .work-item .work-item-main .work-item-content .work-item-desc {
        font-size: 12px;
        font-weight: 400;
        line-height:1.4
    }
}

main .work-container .work-item-container .tool {
    display: flex;
    justify-content: end;
    margin-right: 40px;
    margin-top: 40px;
    user-select:none
}

@media (max-width: 900px) {
    main .work-container .work-item-container .tool {
        margin-right:20px
    }
}

.tool-button-next, main .work-container .work-item-container .tool .tool-button-prev {
    align-items: center;
    border: 4px dotted #fff;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    height: 48px;
    justify-content: center;
    margin: 6px 16px;
    opacity: 1;
    position: relative;
    transition: opacity .5s ease;
    width:48px
}

@media (max-width: 900px) {
    .tool-button-next, main .work-container .work-item-container .tool .tool-button-prev {
        margin:0 12px
    }
}

main .work-container .work-item-container .tool .icon {
    height: 20px;
    width:20px
}

main .work-container .work-item-container .tool .swiper-button-disabled {
    cursor: no-drop;
    opacity: .2;
    transition:opacity .5s ease
}

.work-cursor {
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity .3s, color .4s;
    user-select: none;
    z-index:999
}

.work-cursor.-hidden {
    transform:scale(0)
}

.work-cursor-media-box {
    filter: blur(20px);
    height: 100%;
    left: -50%;
    opacity: 0;
    padding: 1px;
    pointer-events: none;
    position: relative;
    top: 0;
    transform: scale(0) translateZ(0);
    transition: transform .35s ease, opacity .35s ease, filter .35s ease;
    user-select: none;
    width:100%
}

.work-cursor.-media .work-cursor-media-box {
    filter: none;
    opacity: 1;
    transform: scale(1);
    transition:transform .35s ease, opacity .35s ease, filter .35s ease
}

main .like-container {
    user-select:none
}

main .like-container .like-title {
    display: grid;
    justify-content: center;
    padding:40px 40px 0
}

main .like-container .like-title .en {
    color: hsla(53, 19%, 92%, .2);
    font-size: 42px;
    font-weight:400
}

main .like-container .like-title .zh {
    color: #eeede6;
    font-size: 96px;
    font-weight:400
}

@media (max-width: 900px) {
    main .like-container .like-title .en {
        font-size:calc(20px + 2vmin)
    }

    main .like-container .like-title .zh {
        font-size:calc(48px + 4vmin)
    }
}

main .like-container .like-wrapper {
    height: 100vh;
    margin-top: calc(10vmax + 330px);
    position:relative
}

main .like-container .like-wrapper .trail-image {
    background-color: #333;
    filter: blur(6px) brightness(50%);
    opacity: .8;
    pointer-events: none;
    position: absolute;
    scale: 0;
    transform: translate(-50%, -50%) translateZ(0);
    transition: opacity .5s ease, filter .5s ease;
    user-select: none;
    z-index:2
}

main .like-container .like-wrapper .trail-image:last-child {
    animation: fadeIn 2s ease forwards;
    filter: none;
    opacity: 1;
    transition:opacity .5s ease, filter .5s ease
}

@keyframes fadeIn {
    0% {
        opacity:0
    }

    to {
        opacity:1
    }
}

footer .main-container {
    align-items: center;
    display: grid;
    grid-template-columns: 50% 50%;
    padding:20vmax 10vmin 20px
}

@media (max-width: 900px) {
    footer .main-container {
        grid-template-columns:100%
    }
}

footer .main-container .link-container .gap {
    height:60px
}

footer .main-container .link-container .link-title {
    color: #eeede6;
    margin-bottom:20px
}

footer .main-container .link-container .link-title .en {
    color: hsla(53, 19%, 92%, .2);
    font-size: calc(18px + 1vw);
    font-weight:400
}

footer .main-container .link-container .link-title .zh {
    color: #eeede6;
    font-size: calc(48px + 2vw);
    font-weight: 700;
    margin-top:.8vw
}

footer .main-container .link-container .link {
    display: flex;
    flex-direction:column
}

footer .main-container .link-container .link a {
    font-size: calc(14px + 1vw);
    font-weight: 400;
    margin-bottom: 6px;
    margin-top: 6px;
    padding: calc(3px + .5vw) calc(6px + .5vw);
    width:fit-content
}

footer .main-container .circle-container {
    align-items: center;
    display: grid;
    display: flex;
    grid-template-rows: 100%;
    height: 600px;
    justify-content:center
}

@media (max-width: 900px) {
    footer .main-container .circle-container {
        height:300px
    }
}

footer .main-container .circle-container span {
    font-size: 64px;
    font-weight:700
}

@media (max-width: 900px) {
    footer .main-container .circle-container span {
        font-size:36px
    }
}

footer .copyright-container {
    justify-content: space-between;
    margin:80px 20px 20px
}

footer .copyright-container, footer .copyright-container .avatar {
    align-items: end;
    display:flex
}

footer .copyright-container .avatar img {
    border-radius: 100%;
    height: 40px;
    width:40px
}

footer .copyright-container .copyright {
    bottom: -6px;
    color: hsla(0, 0%, 100%, .5);
    font-size: 10px;
    font-weight: 400;
    position: relative;
    text-align:end
}

footer .copyright-container .copyright div {
    display: block;
    margin-bottom:6px
}

footer .copyright-container .copyright .koko {
    color: #eff5d9;
    margin-bottom:14px
}

.circle-container {
    user-select:none
}

.circle-container .circle-text {
    left: -10px;
    position: relative;
    z-index:1
}

.circle-container .circle-text span {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1
}


.nav-container {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.05);
    padding: 10px 0 10px 15px;
    border-radius: 12px;
    gap: 15px; /* 控制项与项之间的间距 */
}

.nav-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #eff5d9;
    text-decoration: none;
    min-width: 41px; /* 控制每个项的最小宽度 */
}

.logo-icon {
    border-radius: 50%;
    background: #F2F2F2; 
    padding: 1px;
    margin-bottom: 5px; /* 图标与文字的间距 */
}

.nav-icon {
    padding: 1px;
    margin-bottom: 5px; /* 图标与文字的间距 */
    filter: brightness(0) invert(0); /* 使图标变为白色 */
}

.icon-text {
    font-size: 14px;
    line-height: 1;
    color: rgba(0, 0, 0, .8);
}

.widget-top { /* 背景星点 */
	position: absolute;
	width: 100%;
	height: 512px;
	background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
	background-size: 8px 8px;
	mask-image: radial-gradient(at center, #fff, transparent 72%);
	-webkit-mask-image: radial-gradient(at center, #fff, transparent 72%);
	opacity: 0.4;
	z-index: -1;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%)
}


.logo-slogan-container {
    display: inline-block; /* 保持容器紧凑 */
}

.logo-title {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中（可选） */
}

.logo-icon {
    /* 可以添加其他logo样式 */
    flex-shrink: 0; /* 防止logo被压缩 */
}