/* IP省份按钮样式 */
.btn-geo-province {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 8rem;
  max-width: 16rem;
  overflow: hidden;
  height: 2.2rem;
  background-size: 300% 300%;
  cursor: pointer;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),
    linear-gradient(137.48deg, #ffdb3b 10%, #fe53bb 45%, #8f51ea 67%, #0044ff 87%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  position: relative;
  vertical-align: middle;
  text-decoration: none;
  flex-shrink: 0;
}
.btn-geo-province #container-stars-geo {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}
.btn-geo-province #geoProvinceText {
  z-index: 2;
  font-size: 11px;
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: 0 0 4px white;
  white-space: nowrap;
  padding: 0 8px;
}
.btn-geo-province #glow-geo {
  position: absolute;
  display: flex;
  width: 100%;
  pointer-events: none;
}
.btn-geo-province .circle-geo {
  width: 100%;
  height: 20px;
  filter: blur(1.5rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}
.btn-geo-province .circle-geo:nth-of-type(1) { background: rgba(254, 83, 186, 0.636); }
.btn-geo-province .circle-geo:nth-of-type(2) { background: rgba(142, 81, 234, 0.704); }
.btn-geo-province:hover #container-stars-geo { z-index: 1; background-color: #212121; }
.btn-geo-province:hover { transform: scale(1.08); }
.btn-geo-province:active { border: double 4px #fe53bb; background-origin: border-box; background-clip: content-box, border-box; animation: none; }
.btn-geo-province:active .circle-geo { background: #fe53bb; }
.btn-geo-province #stars-geo { position: relative; background: transparent; width: 200rem; height: 200rem; }
.btn-geo-province #stars-geo::after {
  content: ""; position: absolute; top: -10rem; left: -100rem; width: 100%; height: 100%;
  animation: animStarRotate 90s linear infinite;
  background-image: radial-gradient(#ffffff 1px, transparent 1%); background-size: 50px 50px;
}
.btn-geo-province #stars-geo::before {
  content: ""; position: absolute; top: 0; left: -50%; width: 170%; height: 500%;
  animation: animStar 60s linear infinite;
  background-image: radial-gradient(#ffffff 1px, transparent 1%); background-size: 50px 50px; opacity: 0.5;
}
@keyframes animStar { from { transform: translateY(0); } to { transform: translateY(-135rem); } }
@keyframes animStarRotate { from { transform: rotate(360deg); } to { transform: rotate(0); } }
@keyframes gradient_301 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes pulse_3011 { 0% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } 100% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }

@media (max-width: 768px) {
  .btn-geo-province { height: 2rem; min-width: 7rem; }
  .btn-geo-province #geoProvinceText { font-size: 10px; letter-spacing: 1px; }
}