:root {
  --theme-color: #ff6300;
  --btn-height: 0.45rem;
  --space: 0.11rem;
  --space2: 0.2rem;
  --small-space: 0.18rem;
  --medium-space: 0.24rem;
  --large-space: 0.36rem;
  --radius: 0.04rem;
  --medium-radius: 0.08rem;
  --large-radius: 0.16rem;
  --border-width: 0.014rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  color: #323233;
  font-size: 14px;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC",
    "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  background-color: #f5f5f5;
}
a,
input,
button {
  color: inherit;
  outline: none;
  border: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
}
::selection {
  background: #83c9e5;
}
::-moz-selection {
  background-color: #83c9e5;
}
section {
  margin: var(--space2);
  border-radius: 0.08rem;
  background-color: #fff;
}
@keyframes rolled {
  30% {
    left: 0%;
  }
  100% {
    left: 200%;
  }
}

.top-bg {
  font-size: 0;
  /* background-image: linear-gradient(to bottom, #b0ddfc, #0c9df9); */
  background-image: url("../images/bg-img.jpg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 600vw auto;
}
body.c-0 .top-bg{ background-position-x: 0; }
body.c-1 .top-bg{ background-position-x: -100vw; }
body.c-2 .top-bg{ background-position-x: -200vw; }
body.c-3 .top-bg{ background-position-x: -300vw; }
body.c-4 .top-bg{ background-position-x: -400vw; }
body.c-5 .top-bg{ background-position-x: -500vw; }
.top-bg .container {
  padding: var(--medium-space);
  padding-bottom: 0;
}
.top-bg .container img {
  width: 100%;
  border-radius: var(--large-radius) var(--large-radius) 0 0;
  border: .04rem solid rgba(255, 255, 255, 0.5);
  border-bottom: none;
}
.keys-main {
  margin: 0 var(--medium-space) 0.12rem;
  background-color: transparent;
}
.keys-main .keys {
  text-align: center;
  padding: var(--space) 0;
  border-radius: 0 0 var(--large-radius) var(--large-radius);
  background-color: #fff;
}
.keys-main .keys .text {
  font-size: 0.16rem;
  font-weight: 500;
}
.keys-main .keys .tips {
  color: #666;
  margin-top: var(--space);
}
.keys-main .btn-copy {
  color: #fff;
  font-size: 0.18rem;
  letter-spacing: 0.02rem;
  text-indent: -0.02rem;
  overflow: hidden;
  width: 100%;
  height: var(--btn-height);
  margin-top: var(--space);
  border-radius: 0.24rem;
  background-image: linear-gradient(to right, #b0ddfc, #0c9df9);
  position: relative;
  transition: all .8s;
}

body.c-0 .keys-main .btn-copy { background-image: linear-gradient(to right, #b0ddfc, #0c9df9); }
body.c-1 .keys-main .btn-copy { background-image: linear-gradient(to right, #41c8f2, #2882f4); }
body.c-2 .keys-main .btn-copy { background-image: linear-gradient(to right, #fd7a79, #fd596d); }
body.c-3 .keys-main .btn-copy { background-image: linear-gradient(to right, #ff8e3c, #ff6401); }
body.c-4 .keys-main .btn-copy { background-image: linear-gradient(to right, #fcd193, #f09b38); }
body.c-5 .keys-main .btn-copy { background-image: linear-gradient(to right, #ecb7ff, #fb84ff); }
.keys-main .btn-copy::after {
  content: "";
  display: block;
  width: 50%;
  height: 200%;
  background-image: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.3)
  );
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(-140%, -50%) rotate(10deg);
  animation: rolled 3s 1s ease both infinite;
}
.maps {
  padding: 0.14rem 0.12rem 0.14rem;
  margin-top: 0;
}
.map-list {
  display: flex;
}
.map-list:not(:first-child) {
  margin-top: var(--space);
}
.map-list .item {
  width: 25%;
  text-align: center;
}
.map-list .item img {
 *\\ width: 0.4rem;
  height: 0.4rem;
}
.map-list .item .text {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.08rem;
}
.map-list .item .text1 {
  font-size: 0.12rem;
  color:#e3bc80;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.08rem;
}
.notice {
  padding: 0.06rem 0;
}
.notice .title-bar {
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
}
.notice .title-bar::before,
.notice .title-bar::after {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .01rem;
  background-color: rgba(0, 0, 0, 0.2);
}
.notice .title-bar .title {
  color: #444;
  font-size: 0.16rem;
  font-weight: 400;
  text-align: center;
  margin: 0 var(--space);
}
.notice .content {
  padding: var(--space) var(--small-space);
}
.notice .content p {
  color: #444;
  line-height: 1.4;
  margin-bottom: var(--space);
}
.notice .content p .red {
  color: #ff4949;
}

.success-notify {
  color: #fff;
  font-size: 0.16rem;
  overflow: hidden;
  align-items: center;
  display: flex;
  height: var(--large-space);
  padding: var(--medium-space) var(--small-space);
  margin: var(--large-space) var(--medium-space);
  border-radius: var(--large-radius);
  background-color: #13ce66;
  box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-300%);
  transition: height 0.3s;
}
.success-notify.error {
  background-color: #ff4949;
}

:root {
  --animate-duration: 1s;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(
      0.215,
      0.61,
      0.355,
      1
    );
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(
      0.215,
      0.61,
      0.355,
      1
    );
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.success-notify.show {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
.loading {
  align-items: center;
  justify-content: center;
  display: none;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
}
.loading.show {
  display: flex;
}
.loading .box {
  flex-direction: column;
  align-items: center;
  display: flex;
  padding: .2rem .24rem;
  border-radius: .16rem;
  background-color: #000;
}
.loading .box svg {
  fill: currentColor;
  color: #fff;
  animation: spin 2s linear infinite;
}
.loading .box .title {
  color: #fff;
  font-size: .15rem;
  margin-top: .1rem;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}