.bg-bubbles{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
.bg-bubbles li{position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 25s infinite;animation: square 25s infinite;-webkit-transition-timing-function: linear;transition-timing-function: linear;}
.bg-bubbles li:nth-child(1){left: 10%;}
.bg-bubbles li:nth-child(2){left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;animation-duration: 17s;}
.bg-bubbles li:nth-child(3){left: 25%;-webkit-animation-delay: 4s;animation-delay: 4s;}
.bg-bubbles li:nth-child(4){left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25);}
.bg-bubbles li:nth-child(5){left: 70%;}
.bg-bubbles li:nth-child(6){left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);}
.bg-bubbles li:nth-child(7){left: 32%;width: 160px;height: 160px;-webkit-animation-delay: 7s;animation-delay: 7s;}
.bg-bubbles li:nth-child(8){left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 15s;animation-delay: 15s;-webkit-animation-duration: 40s;animation-duration: 40s;}
.bg-bubbles li:nth-child(9){left: 25%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 40s;animation-duration: 40s;background-color: rgba(255, 255, 255, 0.3);}
.bg-bubbles li:nth-child(10){left: 90%;width: 160px;height: 160px;-webkit-animation-delay: 11s;animation-delay: 11s;}
@-webkit-keyframes square{0%{-webkit-transform: translateY(0);transform: translateY(0);}
100%{-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}}
@keyframes square{0%{-webkit-transform: translateY(0);transform: translateY(0);}
100%{-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}}

.theme-white .btn-login { background: #2ecc71;}
.theme-white .btn-login:hover { background: #23b862; }
.theme-white .login-sidebox { background: -webkit-gradient(linear, left bottom, left top, from(#23b862), to(#2ecc71)); background: linear-gradient(0deg, #23b862 0%,#2ecc71 100%); color: #fff;}

.theme-blue-gradient .btn-login { background: #1ABC9C;}
.theme-blue-gradient .btn-login:hover { background: #14a689; }
.theme-blue-gradient .login-sidebox { background: -webkit-gradient(linear, left bottom, left top, from(#14a689), to(#1ABC9C)); background: linear-gradient(0deg, #14a689 0%,#1ABC9C 100%); color: #fff;}

.theme-greenSea .btn-login { background: #6ff3ad;}
.theme-greenSea .btn-login:hover { background: #bdeae1; }
.theme-greenSea .login-sidebox { background: -webkit-gradient(linear, left bottom, left top, from(#bdeae1), to(#6ff3ad)); background: linear-gradient(0deg, #bdeae1 0%,#6ff3ad 100%); color: #fff;}

.theme-amethyst .btn-login { background: #dec0eb;}
.theme-amethyst .btn-login:hover { background: #c892df; }
.theme-amethyst .login-sidebox { background: -webkit-gradient(linear, left bottom, left top, from(#dec0eb), to(#c892df)); background: linear-gradient(0deg, #dec0eb 0%,#c892df 100%); color: #fff;}

.theme-blue .btn-login { background: #1890ff;}
.theme-blue .btn-login:hover { background: #52ACFF; }
.theme-blue .login-sidebox { background: -webkit-gradient(linear, left bottom, left top, from(#52ACFF), to(#1890ff)); background: linear-gradient(0deg, #52ACFF 0%,#1890ff 100%); color: #fff;}

.theme-red .btn-login { background: #f4786e;}
.theme-red .btn-login:hover { background: #ebc4c0; }
.theme-red .login-sidebox { background: -webkit-gradient(linear, left bottom, left top, from(#ebc4c0), to(#f4786e)); background: linear-gradient(0deg, #ebc4c0 0%,#f4786e 100%); color: #fff;}

.theme-whbl .btn-login { background: #1ABC9C;}
.theme-whbl .btn-login:hover { background: #67cebb; }
.theme-whbl .login-sidebox { background: -webkit-gradient(linear, left bottom, left top, from(#e7ebee), to(#1ABC9C)); background: linear-gradient(0deg, #e7ebee 0%,#1ABC9C 100%); color: #fff;}

.theme-brown .btn-login { background: #8E5749;}
.theme-brown .btn-login:hover { background: #14a689; }
.theme-brown .login-sidebox { background: -webkit-gradient(linear, left bottom, left top, from(#fbdfc6), to(#8E5749)); background: linear-gradient(0deg, #fbdfc6 0%,#8E5749 100%); color: #fff;}

.theme-rose .btn-login { background: #C41E3A;}
.theme-rose .btn-login:hover { background: #8B1528; }
.theme-rose .login-sidebox { background: -webkit-gradient(linear, left bottom, left top, from(#8B1528), to(#C41E3A)); background: linear-gradient(0deg, #8B1528 0%,#C41E3A 100%); color: #fff;}

.login-list img { filter: grayscale(100%); transition: filter 0.3s ease;}
.login-list img:hover { filter: grayscale(0%); /* 悬停时恢复彩色 */}