/* 通用 css */

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans",
        "Noto Sans CJK", "Heiti SC", "Songti SC", "SimSun", "STHeiti", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    position: relative;
}

.place-holder {
    flex: 1;
}

.div-image {
    background-repeat: no-repeat;
    background-position: center;
}

/**************** 弹窗 ****************/

.dialog-container {
    display: none;
}

/**************** 整体背景 ****************/

.full-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.layer-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
    272.21% 141.42% at 100% 0%,
    rgba(225, 255, 180, 0.5) 0%,
    rgba(255, 254, 235, 0.05) 50%,
    rgba(255, 211, 201, 0.5) 100%
    );
    animation: gradientAnimation 5s infinite alternate;
    background-size: 150% 150%;
    z-index: -1;
}

.layer-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
    272.21% 141.42% at 0% 0%,
    rgba(199, 255, 219, 0.5) 0%,
    rgba(243, 248, 255, 0.05) 50%,
    rgba(244, 221, 255, 0.5) 100%
    );
    animation: gradientAnimation 5s infinite alternate;
    background-size: 150% 150%;
    z-index: -1;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.full-bg.layer-3 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.full-bg.layer-3 span {
    width: 300px;
    height: 300px;
    border-radius: 300px;
    backface-visibility: hidden;
    position: absolute;
    animation-name: moveAnimation;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes moveAnimation {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.full-bg.layer-3 span:nth-child(1) {
    color: #FFF7F4;
    top: 47%;
    left: 10%;
    animation-duration: 10.5s;
    animation-delay: -12.6s;
    transform-origin: 0vw -9vh;
    box-shadow: -40vmin 0 11.2034042917vmin currentColor;
}

.full-bg.layer-3 span:nth-child(2) {
    color: #ECFFFF;
    top: 33%;
    left: 45%;
    animation-duration: 13.2s;
    animation-delay: -15.6s;
    transform-origin: 14vw 17vh;
    box-shadow: 40vmin 0 10.2115006212vmin currentColor;
}

.full-bg.layer-3 span:nth-child(3) {
    color: #FFF2F5;
    top: 90%;
    left: 55%;
    animation-duration: 14.8s;
    animation-delay: -3.5s;
    transform-origin: -18vw 9vh;
    box-shadow: -40vmin 0 12.3544421218vmin currentColor;
}

.full-bg.layer-3 span:nth-child(4) {
    color: #F7FFE7;
    top: 7%;
    left: 88%;
    animation-duration: 15.4s;
    animation-delay: -2.6s;
    transform-origin: 21vw 14vh;
    box-shadow: -40vmin 0 5.9226682716vmin currentColor;
}

.full-bg.layer-3 span:nth-child(5) {
    color: #FFF8E7;
    top: 65%;
    left: 26%;
    animation-duration: 15.3s;
    animation-delay: -6s;
    transform-origin: 9vw -23vh;
    box-shadow: 40vmin 0 5.4289289226vmin currentColor;
}