:root {
    --main-color-1: #544E58;
    --main-color-2: #FF6659;
    --color1      : #598DFF;
    --color2      : #38909C;
    --color3      : #17AE61;
    --color4      : #44C35A;
    --color5      : #B3EC52;
    --color6      : #F4BA15;
    --color7      : #FFA959;
    --color8      : #CC99CC;
}

* {
    margin : 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width           : 100vw;
    height          : 100vh;
    background-image: linear-gradient(135deg, var(--color1), var(--color2), var(--color3), var(--color4), var(--color5), var(--color6), var(--color7), var(--color8), var(--color1));
    background-size : 400%;
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-direction  : column;
    font-family     : 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
    perspective     : 1000px;
    transform-style : preserve-3d;
    animation       : bg_change 5s linear infinite alternate;
}

@keyframes bg_change {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 100%;
    }
}

.container {
    position           : relative;
    width              : 350px;
    height             : 350px;
    /* background-color: #FF6659; */
}

.ball {
    position       : absolute;
    width          : 350px;
    height         : 350px;
    /* 居中 */
    display        : flex;
    justify-content: center;
    align-items    : center;
    /* 下级元素3d */
    transform-style: preserve-3d;
    /* 动画执行时间 */
    transition     : transform .8s ease-in-out;
}

.ball *,
.ball *::after,
.ball *::before {
    border-radius: 100%;
    /* box-shadow: inset 0 0 15px #F6F6F6; */
}

.ball_logo {
    position        : absolute;
    width           : 350px;
    height          : 350px;
    background-color: #FFF7F7;
    /* 居中 */
    display         : flex;
    justify-content : center;
    align-items     : center;
    /* 下级元素3d */
    transform-style : preserve-3d;
    /* 变换动画 */
    /* animation    : animate_ball_logo 1s ease-in-out infinite both alternate; */
}

.ball_logo .logo {
    position        : absolute;
    width           : 200px;
    height          : 200px;
    background-color: #FF665960;
    /* z轴位移 ball_logo 为起始位置 */
    transform       : translateZ(60px);
    /* 下级元素3d */
    transform-style : preserve-3d;
}

.ball_logo .logo::after,
.ball_logo .logo::before {
    position        : absolute;
    content         : '';
    background-color: inherit;
}

.ball_logo .logo::after {
    left     : -25px;
    right    : -25px;
    top      : -25px;
    bottom   : -25px;
    /* z轴位移 .ball_logo .logo为起始位置 */
    transform: translateZ(-20px);
}

.ball_logo .logo::before {
    left     : -50px;
    right    : -50px;
    top      : -50px;
    bottom   : -50px;
    /* z轴位移 .ball_logo .logo为起始位置 */
    transform: translateZ(-40px);
}

.ball_logo .logo img {
    width    : 100%;
    height   : 100%;
    /* z轴位移 .ball_logo .logo为起始位置 */
    transform: translateZ(40px) scale(0.5);
}


/* @keyframes animate_ball_logo {
    0% {
        transform: rotateY(-20deg);
    }
    100% {
        transform: rotateY(20deg);
    }
} */

.ball_qrcode {
    position        : absolute;
    width           : 350px;
    height          : 350px;
    background-color: #FFF7F7;
    /* 居中 */
    display         : flex;
    justify-content : center;
    align-items     : center;
    /* 下级元素3d */
    transform-style : preserve-3d;
    transform       : rotateY(180deg);
    /* 变换动画 */
    /* animation    : animate_ball_qrcode 1s ease-in-out infinite both alternate; */
}

.ball_qrcode .logo {
    position        : absolute;
    width           : 200px;
    height          : 200px;
    background-color: #FF665960;
    /* z轴位移 ball_qrcode为起始位置 */
    transform       : translateZ(60px);
    /* 下级元素3d */
    transform-style : preserve-3d;
}

.ball_qrcode .logo::after,
.ball_qrcode .logo::before {
    position        : absolute;
    content         : '';
    background-color: inherit;
}

.ball_qrcode .logo::after {
    left     : -25px;
    right    : -25px;
    top      : -25px;
    bottom   : -25px;
    /* z轴位移 .ball_qrcode .logo为起始位置 */
    transform: translateZ(-20px);
}

.ball_qrcode .logo::before {
    left     : -50px;
    right    : -50px;
    top      : -50px;
    bottom   : -50px;
    /* z轴位移 .ball_qrcode .logo为起始位置 */
    transform: translateZ(-40px);
}

.ball_qrcode .logo img {
    position : absolute;
    top      : 50%;
    left     : 50%;
    width    : 100%;
    height   : 100%;
    /* z轴位移 .ball_qrcode .logo为起始位置 */
    transform: translate(-50%, -50%) translateZ(40px) scale(0.8);
}


/* @keyframes animate_ball_qrcode {
    0% {
        transform: rotateY(160deg);
    }
    100% {
        transform: rotateY(200deg);
    }
} */


/* 备案信息 */

.beian {
    margin-top: 50px;
}

.beian a {
    text-decoration: none;
    color          : #FFF7F750;
    transition     : color .5s linear;
}

.beian a:hover {
    text-decoration: none;
    color          : #fff;
}


/* 泡泡 */

.bubbles {
    /* display: none; */
    position: absolute;
    width   : 100vw;
    height  : 100vh;
    overflow: hidden;
    z-index : -100;
}

.bubble {
    position        : absolute;
    width           : 40px;
    height          : 40px;
    background-color: #fff;
    bottom          : 0;
    opacity         : .6;
    border-radius   : 50%;
    animation       : flying 6s ease-in-out infinite;
}

.bubble:nth-child(3n+1) {
    left              : calc(90px * var(--i));
    width             : calc(3px * var(--i));
    height            : calc(3px * var(--i));
    animation-duration: calc(0.3s * var(--i));
}

.bubble:nth-child(3n+2) {
    left              : calc(50px * var(--i));
    width             : calc(4px * var(--i));
    height            : calc(4px * var(--i));
    animation-duration: calc(0.5s * var(--i));
}

.bubble:nth-child(3n+3) {
    left              : calc(20px * var(--i));
    width             : calc(2px * var(--i));
    height            : calc(2px * var(--i));
    animation-duration: calc(0.4s * var(--i));
}

@keyframes flying {
    0% {
        bottom   : -50px;
        transform: translateX(0px);
    }

    25% {
        transform: translateX(20px);
    }

    50% {
        transform: translateX(100px);
    }

    60% {
        transform: translateX(130px);
    }

    100% {
        bottom   : 900px;
        transform: translateX(-10px);
    }
}

.ad {
    position: fixed;
    width   : 728px;
    height  : 90px;
    top     : 0;
    right   : 0;
    z-index : 10000;
}