@charset "UTF-8";
.alert-wrap {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:13
}
.congratulations .alert-container .alert-body .alert-content {
  font-size:2.5rem;
  font-weight:bolder
}
.alert-container {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  width:80%;
  height:100%;
  z-index:3;
  pointer-events:none;
  flex-direction:column
}
@media (min-width: 576px) {
  .alert-container {
    width:480px
  }
}
.alert-container .alert-top {
  pointer-events:visible;
  position:relative;
  padding-bottom:15.6695156695%;
  width:100%;
  background-repeat:no-repeat;
  background-size:100% auto;
  z-index:1
}
.alert-container .alert-top .alert-title-img {
  position:absolute;
  top:0;
  left:0;
  padding-bottom:15.6695156695%;
  width:100%;
  background-repeat:no-repeat;
  background-size:100% auto
}
.alert-container .alert-body {
  position:relative;
  margin-top:-1px;
  padding:30px 1px 1px;
  width:100%;
  font-size:1.25rem;
  text-align:center;
  line-height:2.2rem;
  color:var(--alert-text);
  background-repeat:no-repeat;
  background-size:100% 100%;
  z-index:2;
  pointer-events:visible
}
.alert-container .alert-body .highlight {
  font-weight:bolder;
  color:var(--alert-text-highlight)!important
}
.alert-container .alert-body .alert-content {
  padding:0 5%;
  transform:translateY(-10px)
}
.alert-container .alert-body .alert-content .award-title {
  margin-bottom:1rem;
  font-size:1.5rem;
  color:var(--alert-text)
}
.alert-container .alert-body .alert-content .award-amount {
  margin-bottom:1rem;
  font-size:2.5rem;
  color:var(--alert-text-highlight)
}
.alert-container .alert-body .alert-content .award-account {
  font-size:1rem;
  font-weight:700;
  color:var(--alert-text)
}
.alert-container .alert-body .alert-content .prepare-hint {
  font-size:.85rem;
  font-weight:700;
  line-height:1.85;
  color:var(--alert-text)
}
.alert-container .alert-body .alert-buttons {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-top:1rem
}
.alert-container .alert-body .alert-buttons .default-btn {
  position:relative;
  margin-right:.5rem;
  margin-left:.5rem;
  padding-bottom:55.5984555985px;
  width:150px;
  background-size:100% auto;
  border-radius:5rem;
  cursor:pointer;
  pointer-events:visible
}
.alert-container .alert-body .alert-buttons .default-btn.extra-margin-top-for-label {
  margin-top:1.6rem
}
.alert-container .alert-body .alert-buttons .default-btn:only-child .text {
  padding:.2rem 3rem
}
.alert-container .alert-body .alert-buttons .default-btn:hover {
  transform:translate(-1px,-1px);
  box-shadow:1px 1px #00000080
}
.alert-container .alert-body .alert-buttons .default-btn:active {
  transform:translate(1px,1px);
  box-shadow:none
}
.alert-container .alert-body .alert-buttons .default-btn .label {
  position:absolute;
  top:0;
  left:4%;
  padding-bottom:36.9393939394%;
  width:92%;
  background-repeat:no-repeat;
  background-size:100% auto;
  transform:translateY(-80%)
}
.alert-container .alert-body .alert-buttons .default-btn .label .label-text {
  position:absolute;
  top:2px;
  left:0;
  width:100%;
  font-size:1.1rem;
  font-weight:bolder;
  text-align:center;
  color:var(--alert-btn-label)
}
.alert-container .alert-body .alert-buttons .default-btn .text {
  position:absolute;
  top:50%;
  left:50%;
  font-size:1.4rem;
  font-weight:bolder;
  white-space:nowrap;
  color:var(--alert-btn);
  transform:translate(-50%,-50%);
  pointer-events:none
}
.alert-container .alert-body .alert-hint {
  margin-top:1rem;
  margin-bottom:-1rem
}
.alert-container .alert-body-game {
  pointer-events:visible;
  width:100%;
  background-size:100% 100%
}
.alert-container .alert-body-game .game-hint {
  margin:1rem 0;
  font-size:.75rem;
  text-align:center;
  color:var(--alert-award-game-hint);
  letter-spacing:.1rem
}
.alert-container .alert-body-game .game-container {
  display:flex;
  justify-content:center;
  margin:0 auto 1.55rem;
  width:78%
}
.alert-container .alert-body-game .game-container .game {
  position:relative;
  margin:0 1.1666%;
  width:31%
}
.alert-container .alert-body-game .game-container .game .image {
  padding-bottom:100%;
  width:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:90% auto;
  filter:drop-shadow(0 10px 10px #000)
}
.alert-container .alert-body-game .game-container .game .btn {
  position:relative;
  padding-bottom:32%;
  width:100%;
  background-size:100% 100%;
  cursor:pointer;
  pointer-events:visible
}
.alert-container .alert-body-game .game-container .game .btn:hover {
  transform:translate(-1px,-1px)
}
.alert-container .alert-body-game .game-container .game .btn .text {
  position:absolute;
  top:50%;
  left:50%;
  font-size:.9rem;
  white-space:nowrap;
  color:var(--alert-award-game-btn);
  z-index:1;
  transform:translate(-50%,-50%)
}
.alert-container .alert-body-game .game-container .game .pointer {
  position:absolute;
  right:-.5rem;
  bottom:-.5rem;
  padding-bottom:26%;
  width:25%;
  background-size:100% auto;
  pointer-events:none;
  animation:pointer-animate-b2d6d98e 1.2s linear infinite
}
@keyframes pointer-animate-b2d6d98e {
  0% {
    transform:translateY(0) rotate(0)
  }
  20% {
    transform:translateY(3px) rotate(-15deg)
  }
  30% {
    transform:translateY(0) rotate(0)
  }
  40% {
    transform:translateY(3px) rotate(-15deg)
  }
  50% {
    transform:translateY(0) rotate(0)
  }
  to {
    transform:translateY(0) rotate(0)
  }
}
.alert-container .alert-bottom {
  position:relative;
  margin-top:-5px;
  padding-bottom:15.6695156695%;
  width:100%;
  background-repeat:no-repeat;
  background-size:100% auto;
  z-index:1;
  pointer-events:visible
}
.alert-container .alert-bottom .leave-btn {
  position:absolute;
  top:15px;
  left:39.75%;
  padding-bottom:6.0063694268%;
  width:20.5%;
  background-size:100% auto;
  cursor:pointer
}
.alert-container .alert-bottom .leave-btn:hover {
  transform:translate(-1px,-1px)
}
.alert-container .award-deco {
  transform:translate(-50%,-50%);
  position:absolute;
  top:50%;
  left:50%;
  padding-bottom:26.2335216573rem;
  width:35rem;
  background-size:100% auto;
  z-index:3;
  pointer-events:none
}
@media (min-width: 576px) {
  .alert-container .award-deco {
    padding-bottom:27.7325800377rem;
    width:37rem
  }
}
.light {
  position:fixed;
  top:50%;
  left:50%;
  padding-bottom:583.6048879837px;
  width:550px;
  background-repeat:no-repeat;
  background-size:100% auto;
  opacity:.3;
  z-index:2;
  transform:translate(-50%,-50%);
  animation:sparkle-b2d6d98e 6s .5s linear infinite;
  pointer-events:none
}
@media (min-width: 576px) {
  .light {
    padding-bottom:689.7148676171px;
    width:650px
  }
}
@keyframes sparkle-b2d6d98e {
  0% {
    opacity:.3
  }
  50% {
    opacity:1
  }
  to {
    opacity:.3
  }
}
.mask {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:#000000a6;
  z-index:1
}
.loading-wrap {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#00000080;
  z-index:13
}
.loading-wrap .loading-img {
  width:80px;
  height:80px;
  background-repeat:no-repeat;
  background-size:100% 100%
}
.fade-enter-active,
.fade-leave-active {
  transition:opacity .5s ease
}
.fade-enter-from,
.fade-leave-to {
  opacity:0
}
.warning-wrap {
  display:none
}
@media (width: 480px) and (orientation: landscape) {
  .warning-wrap {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color:#fff;
    z-index:14
  }
  .warning-icon {
    margin-bottom:10px
  }
  .warning-icon img {
    display:block;
    opacity:0;
    animation:mobile-rotation-animation-31f42df1 3s linear infinite
  }
  .warning-text {
    font-size:1em;
    text-align:center;
    line-height:1.6;
    color:#b7b7b7;
    transform:scale(.7)
  }
}
@keyframes mobile-rotation-animation-31f42df1 {
  0% {
    transform:rotate(0);
    opacity:0
  }
  10% {
    transform:rotate(0);
    opacity:1
  }
  50% {
    transform:rotate(-90deg)
  }
  90% {
    opacity:1
  }
  to {
    transform:rotate(-90deg);
    opacity:0
  }
}
svg {
  margin-right:5px;
  width:22px;
  height:22px
}
svg .cls-1 {
  fill:var(--header-btn-anchor-text)
}
svg {
  margin-right:5px;
  width:22px;
  height:22px
}
svg .st0 {
  fill:var(--header-btn-alert-text)
}
svg {
  margin-right:5px;
  width:22px;
  height:22px
}
svg .st0 {
  fill:var(--header-btn-alert-text)
}
.shared-rule {
  position:relative;
  margin-top:4rem;
  width:100%;
  border:2px solid var(--rule-border);
  z-index:2;
  box-sizing:border-box
}
.shared-rule * {
  user-select:text
}
.shared-rule .highlight {
  color:var(--rule-highlight)!important
}
.shared-rule .rule-head {
  position:absolute;
  top:-4rem;
  left:50%;
  display:flex;
  justify-content:center;
  width:89%;
  border:2px solid var(--rule-border);
  z-index:2;
  transform:translate(-50%)
}
.shared-rule .rule-head .title {
  position:relative;
  width:25%;
  background-color:var(--rule-bg-second);
  border-right:2px solid var(--rule-border);
  box-sizing:border-box
}
.shared-rule .rule-head .title .content {
  position:absolute;
  top:50%;
  left:50%;
  padding-bottom:55.7692307692px;
  width:50px;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:100% auto;
  transform:translate(-50%,-50%)
}
.shared-rule .rule-head .condition-wrap {
  padding:5% 1rem;
  width:75%;
  background-color:var(--rule-bg-first)
}
.shared-rule .rule-head .condition-wrap .condition-container {
  display:flex;
  margin:1% 0;
  width:100%;
  font-size:.8rem;
  white-space:nowrap
}
@media (min-width: 576px) {
  .shared-rule .rule-head .condition-wrap .condition-container {
    font-size:.9rem
  }
}
.shared-rule .rule-head .condition-wrap .condition-container .headline {
  margin-right:.2rem;
  color:var(--rule-text)
}
.shared-rule .rule-head .condition-wrap .condition-container .condition {
  color:var(--rule-highlight)
}
.shared-rule .rule-body {
  position:relative;
  display:flex;
  width:100%;
  font-weight:700;
  color:var(--rule-text);
  z-index:1;
  flex-wrap:wrap
}
.shared-rule .rule-body .title-wrap {
  display:flex;
  align-items:center;
  margin-top:.1rem
}
.shared-rule .rule-body .title-wrap .icon {
  margin-right:.5rem;
  width:1.75rem;
  height:1.75rem;
  background-position:left top;
  background-repeat:no-repeat;
  background-size:auto 100%
}
.shared-rule .rule-body .title-wrap .text {
  font-size:1.4rem
}
.shared-rule .rule-body .reward-step {
  margin:0 auto;
  padding:3.5rem 6% 1.5rem;
  width:100%;
  background-color:var(--rule-bg-first)
}
.shared-rule .rule-body .reward-step .text {
  margin:.5rem 0 .7rem;
  line-height:1.5rem
}
.shared-rule .rule-body .reward-step .step-container {
  display:flex;
  align-items:center
}
.shared-rule .rule-body .reward-step .step-container .step-one,
.shared-rule .rule-body .reward-step .step-container .step-two {
  width:45.75%;
  text-align:center;
  border:2px solid var(--rule-step-border)
}
.shared-rule .rule-body .reward-step .step-container .step-one .title,
.shared-rule .rule-body .reward-step .step-container .step-two .title {
  padding:.5rem 0;
  color:var(--rule-step-title);
  background-color:var(--rule-step-border)
}
.shared-rule .rule-body .reward-step .step-container .step-one .content,
.shared-rule .rule-body .reward-step .step-container .step-two .content {
  position:relative;
  padding-bottom:55.3156146179%;
  width:100%;
  background-size:100% auto
}
.shared-rule .rule-body .reward-step .step-container .step-one .content .text,
.shared-rule .rule-body .reward-step .step-container .step-two .content .text {
  position:absolute;
  top:-.5rem;
  left:50%;
  white-space:nowrap;
  transform:translate(-50%)
}
.shared-rule .rule-body .reward-step .step-container .arrow {
  margin:0 2%;
  padding-bottom:5.7162162162%;
  width:4.5%;
  background-repeat:no-repeat;
  background-size:100% auto
}
.shared-rule .rule-body .reward-amount {
  padding:0 6%;
  padding-top:1rem;
  width:100%;
  background-color:var(--rule-bg-second)
}
.shared-rule .rule-body .reward-amount .text {
  margin:.5rem 0 .7rem;
  text-align:left;
  line-height:1.5rem
}
.shared-rule .rule-body .reward-amount .group-container {
  margin:5% 0;
  width:100%
}
.shared-rule .rule-body .reward-amount .group-container .group {
  display:inline-block;
  margin:1.5%;
  padding:1.6% 4%;
  font-size:1.1rem;
  text-align:center;
  white-space:nowrap;
  color:var(--rule-reward-title);
  background:rgba(213,40,41,.3);
  border:2px solid var(--rule-reward-border);
  border-radius:5rem;
  cursor:pointer
}
.shared-rule .rule-body .reward-amount .group-container .group:hover {
  transform:translate(-1px,1px)
}
.shared-rule .rule-body .reward-amount .group-container .group.selected {
  background:var(--rule-reward-border)
}
.shared-rule .rule-body .reward-amount .table-title-container {
  position:relative;
  width:100%
}
.shared-rule .rule-body .reward-amount .table-title-container .table-title-text {
  overflow:hidden;
  padding:2.5% 5%;
  max-width:479px;
  font-size:1.4rem;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--rule-reward-title);
  background-color:var(--rule-reward-border);
  border-radius:1.5rem 1.5rem 0 0
}
.shared-rule .rule-body .reward-amount .table-title-container .table-title-text.blank-title {
  padding:3% 0
}
.shared-rule .rule-body .reward-amount .table-title-container:hover {
  cursor:pointer
}
.shared-rule .rule-body .reward-amount .table-title-container:hover .tooltip {
  display:block
}
.shared-rule .rule-body .reward-amount .table-title-container .tooltip {
  position:absolute;
  top:55%;
  left:55%;
  display:none;
  padding:1%;
  max-width:50%;
  background-color:#ffffffb3
}
.shared-rule .rule-body .reward-amount .table {
  text-align:center;
  color:var(--rule-reward-text);
  border-right:2px solid var(--rule-reward-border);
  border-bottom:2px solid var(--rule-reward-border);
  border-left:2px solid var(--rule-reward-border)
}
.shared-rule .rule-body .reward-amount .table .bottom-container {
  display:flex;
  width:100%;
  height:100%
}
.shared-rule .rule-body .reward-amount .table .bottom-container .reward-highlight {
  color:var(--rule-reward-highlight)
}
.shared-rule .rule-body .reward-amount .table .bottom-container .left {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:50%;
  background-color:var(--rule-reward-bg-left);
  flex-direction:column
}
.shared-rule .rule-body .reward-amount .table .bottom-container .left.only-one-condition {
  padding:1rem 0
}
.shared-rule .rule-body .reward-amount .table .bottom-container .left .threshold-title {
  display:inline;
  letter-spacing:.05rem;
  margin:0 0 5% .05rem;
  padding:.5rem 7%;
  color:var(--rule-reward-level-text);
  background-color:var(--rule-reward-level-bg);
  border-radius:1rem
}
.shared-rule .rule-body .reward-amount .table .bottom-container .left .max-amount-title {
  margin-bottom:3%;
  margin-left:.3rem;
  font-size:1.1rem;
  font-weight:400;
  text-align:center;
  letter-spacing:.3rem
}
.shared-rule .rule-body .reward-amount .table .bottom-container .left .max-amount {
  width:100%;
  font-size:1.5rem;
  text-align:center
}
.shared-rule .rule-body .reward-amount .table .bottom-container .right {
  width:50%;
  background-color:var(--rule-reward-bg-right)
}
.shared-rule .rule-body .reward-amount .table .bottom-container .right .right-title {
  margin-top:5%;
  margin-left:.3rem;
  font-size:1.1rem;
  font-weight:400;
  letter-spacing:.3rem
}
.shared-rule .rule-body .reward-amount .table .bottom-container .right .split-line {
  margin:5% auto;
  width:80%;
  height:2px;
  background-color:var(--rule-reward-border)
}
.shared-rule .rule-body .reward-amount .table .bottom-container .right .condition-container {
  display:flex;
  margin: 7% 0 3% 0%;
  width: 100%;
  align-content: flex-start;
  flex-direction: column;
}
.shared-rule .rule-body .reward-amount .table .bottom-container .right .condition-container .condition-title {
  width: 100%;
  font-weight: 400;
  /*! letter-spacing: 5px; */
  text-align: center;
  font-size: 13px;
}
.shared-rule .rule-body .reward-amount .table .bottom-container .right .condition-container .amount {
  /*! width:70%; */
  text-align: center;
  padding-top: 10px;
  font-size: 13px;
}
.shared-rule .rule-body .reward-amount .table-bottom {
  margin-bottom:1.7rem;
  padding:3% 0;
  background-color:var(--rule-reward-border);
  border-radius:0 0 1.5rem 1.5rem
}
.shared-rule .rule-body .deco-2 {
  position:absolute;
  top:10rem;
  left:-3rem;
  padding-bottom:5rem;
  width:5rem;
  background-repeat:no-repeat;
  background-size:100% auto
}
.shared-rule .rule-body .cumulative {
  padding:1rem 6%;
  width:100%;
  background-color:var(--rule-bg-first)
}
.shared-rule .rule-body .cumulative .cumulative-wrap .cumulative-container {
  overflow:hidden;
  margin-bottom:1rem;
  border:2px solid var(--rule-cumulative-border);
  border-radius:1rem
}
.shared-rule .rule-body .cumulative .cumulative-wrap .cumulative-container:first-child {
  margin:1rem 0
}
.shared-rule .rule-body .cumulative .cumulative-wrap .cumulative-container .title {
  padding:1.2rem 0;
  font-size:1.3rem;
  text-align:center;
  background-color:var(--rule-cumulative-bg-title);
  letter-spacing:.1rem
}
@media (min-width: 576px) {
  .shared-rule .rule-body .cumulative .cumulative-wrap .cumulative-container .title {
    font-size:1.5rem
  }
}
.shared-rule .rule-body .cumulative .cumulative-wrap .cumulative-container .split-line {
  height:1px;
  background-color:var(--rule-cumulative-border)
}
.shared-rule .rule-body .cumulative .cumulative-wrap .cumulative-container .detail-container {
  display:flex;
  align-items:center;
  padding:1rem 0;
  background-color:var(--rule-cumulative-bg-content)
}
.shared-rule .rule-body .cumulative .cumulative-wrap .cumulative-container .detail-container .icon {
  position:relative;
  width:20%;
  height:3rem;
  background-position:center;
  background-repeat:no-repeat;
  background-size:3rem auto
}
.shared-rule .rule-body .cumulative .cumulative-wrap .cumulative-container .detail-container .detail {
  padding-right:1%;
  width:80%;
  font-size:.95rem;
  font-weight:lighter;
  line-height:1.5rem;
  letter-spacing:.05rem
}
@media (min-width: 576px) {
  .shared-rule .rule-body .cumulative .cumulative-wrap .cumulative-container .detail-container .detail {
    font-size:1rem
  }
}
.shared-rule .rule-body .cumulative .deco-3 {
  position:absolute;
  top:33rem;
  right:-2rem;
  padding-bottom:5rem;
  width:5rem;
  background-size:100% auto
}
.shared-rule .rule-body .note {
  padding:1rem 2% 1rem 6%;
  width:100%;
  background-color:var(--rule-bg-second)
}
.shared-rule .rule-body .note .contents {
  display:flex;
  margin-top:1rem;
  width:100%;
  flex-direction:column
}
.shared-rule .rule-body .note .contents .content {
  display:flex;
  margin-bottom:.5rem;
  font-size:.875rem;
  line-height:1.2rem
}
.shared-rule .rule-body .note .contents .content:before {
  display:block;
  margin-right:1rem;
  content:"\25ce"
}
.shared-rule .rule-body .note .deco-4 {
  position:absolute;
  bottom:17rem;
  left:-2rem;
  padding-bottom:5rem;
  width:5rem;
  background-size:100% auto
}
.shared-rule .deco-1 {
  position:absolute;
  top:-4.5rem;
  right:-1rem;
  padding-bottom:5rem;
  width:5rem;
  background-repeat:no-repeat;
  background-size:100% auto;
  z-index:3
}
.shared-game {
  position:relative;
  display:flex;
  margin:0 auto .5rem;
  padding:1rem 4%;
  width:100%;
  color:var(--rule-text);
  background:var(--game-bg);
  border:2px solid var(--game-border);
  border-radius:1rem;
  z-index:2;
  box-sizing:border-box;
  flex-wrap:wrap
}
.shared-game .title {
  margin:.5rem 0 1.3rem;
  width:100%;
  height:1.9rem;
  background-position:left top;
  background-repeat:no-repeat;
  background-size:auto 100%
}
.shared-game .game-wrap {
  overflow:hidden;
  margin-bottom:3%;
  width:100%;
  border:2px solid var(--game-table);
  border-radius:1rem
}
.shared-game .game-wrap .hall-container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 1rem;
  height:1.58rem;
  background-color:var(--game-table)
}
.shared-game .game-wrap .hall-container .name {
  width:50%;
  font-size:1.4rem;
  font-weight:bolder;
  white-space:nowrap;
  color:var(--game-hall-name)
}
.shared-game .game-wrap .hall-container .btn {
  position:relative;
  padding:.4rem .8rem;
  font-size:1rem;
  font-weight:bolder;
  color:var(--game-table);
  background-color:var(--game-hall-btn-bg);
  border-radius:2rem
}
.shared-game .game-wrap .category-container {
  margin:3% 0 5%;
  padding:0 0 0 .86rem;
  width:100%;
  font-size:.9rem;
  line-height:1.2rem;
  color:var(--game-category)
}
.record-container {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  padding-top:50px;
  width:80%;
  min-width:384px;
  z-index:2;
  flex-direction:column
}
@media (min-width: 576px) {
  .record-container {
    width:480px
  }
}
.record-container .record-top,
.record-container .record-bottom {
  position:relative;
  padding-bottom:15.6695156695%;
  width:100%;
  background-repeat:no-repeat;
  background-size:100% auto;
  z-index:2
}
.record-container .record-top {
  margin-top:30px
}
.record-container .record-bottom {
  margin-top:-1px
}
.record-container .record-title {
  position:absolute;
  top:0;
  left:0;
  padding-bottom:22.792022792%;
  width:100%;
  transform:translateY(-68%);
  background-repeat:no-repeat;
  background-size:100% 100%
}
.record-container .record-body {
  position:relative;
  margin-top:-10px;
  width:100%;
  font-size:1.25rem;
  text-align:center;
  line-height:2.2rem;
  color:#fff;
  background-repeat:no-repeat;
  background-size:100% 100%;
  z-index:3
}
.record-container .record-body .amount-title {
  font-size:1.2rem;
  font-weight:bolder;
  color:var(--recode-title)
}
.record-container .record-body .amount-text {
  margin:5px auto 20px;
  padding:.2rem 1.6rem;
  width:240px;
  font-size:1.5rem;
  font-weight:bolder;
  color:var(--record-title-text);
  background-color:var(--record-title-bg);
  border:2px solid var(--record-title-border);
  border-radius:2rem
}
.record-container .record-body .log-table {
  overflow:hidden;
  margin:0 auto 10px;
  width:90%;
  max-width:360px;
  border:2px solid var(--record-table-border);
  border-radius:12px
}
.record-container .record-body .log-table .log-table-head {
  background-color:var(--record-table-title-bg);
  border-bottom:1px solid var(--record-table-border)
}
.record-container .record-body .log-table .log-table-body .col-12 {
  width:50%;
  font-size:1.1rem;
  color:var(--record-table-text)
}
.record-container .record-body .log-table .d-flex {
  display:flex;
  color:var(--record-table-title);
  flex-wrap:wrap
}
.record-container .record-body .log-table .d-flex.table-rows:nth-child(odd) {
  background-color:var(--record-table-bg-odd)
}
.record-container .record-body .log-table .d-flex.table-rows:nth-child(even) {
  background-color:var(--record-table-bg-even)
}
.record-container .record-body .log-table .d-flex:not(:last-child) {
  border-bottom:1px solid var(--record-table-border)
}
.record-container .record-body .log-table .d-flex .col-12 {
  padding:.3rem 0;
  width:50%;
  font-weight:bolder
}
.record-container .record-body .log-table .d-flex .col-12:not(:last-child) {
  border-right:1px solid var(--record-table-border)
}
.record-container .record-body .record-coin {
  position:absolute;
  width:60px;
  height:60px;
  background-repeat:no-repeat;
  background-size:100% 100%
}
.record-container .record-body .record-coin.idx-1 {
  top:50%;
  left:-50px
}
.record-container .record-body .record-coin.idx-2 {
  top:12%;
  left:-30px
}
.record-container .record-body .record-coin.idx-3 {
  top:-60px;
  right:15%
}
.record-container .record-body .record-coin.idx-4 {
  top:28%;
  right:-70px
}
.record-container .record-body .record-coin.idx-5 {
  right:5%;
  bottom:-50px
}
.record-buttons {
  display:flex;
  justify-content:center;
  margin-top:1rem
}
.default-btn {
  position:relative;
  margin:0 .25rem;
  padding:4px 4px 55.5984555985px;
  width:150px;
  background-repeat:no-repeat;
  background-size:100% 100%;
  border-radius:5rem
}
.default-btn .text {
  position:absolute;
  top:50%;
  left:50%;
  font-size:1.4rem;
  font-weight:bolder;
  white-space:nowrap;
  color:var(--record-btn-null);
  transform:translate(-50%,-50%);
  pointer-events:none
}
.default-btn:not(.null) {
  cursor:pointer
}
.default-btn:not(.null) .text {
  color:var(--record-btn-active)
}
.default-btn:not(.null):hover {
  box-shadow:1px 1px #000000a6;
  transform:translate(-1px,-1px)
}
.default-btn:not(.null):active {
  box-shadow:none;
  transform:translate(0)
}
.light {
  position:absolute;
  top:50%;
  left:49%;
  padding-bottom:636.6598778004px;
  width:600px;
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:.3;
  z-index:1;
  transform:translate(-50%,-50%);
  animation:sparkle-2aaed488 6s .5s linear infinite;
  pointer-events:none
}
@media (min-width: 576px) {
  .light {
    padding-bottom:742.7698574338px;
    width:700px
  }
}
@keyframes sparkle-2aaed488 {
  0% {
    opacity:.3
  }
  50% {
    opacity:1
  }
  to {
    opacity:.3
  }
}
.cls-2 {
  fill:var(--cancel-btn-line)
}
.cls-1 {
  fill:var(--cancel-btn-bg)
}
.cover-wrap {
  position:absolute;
  top:0;
  left:0;
  overflow-x:hidden;
  overflow-y:auto;
  width:100%;
  height:100vh;
  background-color:#000000a6;
  z-index:12;
  scroll-behavior:smooth
}
.cover-wrap::-webkit-scrollbar {
  display:none
}
.cover-container {
  position:absolute;
  padding:50px 5% 150px;
  width:100%;
  z-index:1
}
.cover-cancel-btn {
  position:fixed;
  top:1.5rem;
  right:calc(5% - 25px);
  width:50px;
  height:50px;
  background-position:left top;
  background-repeat:no-repeat;
  background-size:100% auto;
  z-index:3;
  cursor:pointer
}
.cover-cancel-btn:hover {
  background-position:left bottom
}
.cover-cancel-btn.uc {
  position:fixed;
  top:5%;
  right:2%;
  margin-top:0;
  margin-bottom:0;
  margin-left:0
}
.header {
  position:fixed;
  top:0;
  left:50%;
  transform:translate(-50%);
  max-width:576px;
  height:50px;
  background-color:var(--header-bg);
  z-index:10;
  box-shadow:0 0 20px #000;
  box-sizing:border-box
}
.header~* {
  padding-top:50px
}
.header .border-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--header-border)
}
.header .header-container {
  display:flex;
  margin:0 auto;
  padding-right:10px;
  padding-left:10px;
  width:100%;
  min-width:480px;
  box-sizing:border-box
}
@media (min-width: 576px) {
  .header .header-container {
    width:576px
  }
}
.header .header-container .logo-container {
  width:192.935px;
  height:47px;
  background-position:left center;
  background-repeat:no-repeat;
  background-size:auto 100%
}
.header .header-container .navigators {
  display:flex;
  align-items:center;
  margin-left:auto;
  height:47px
}
.header .header-container .navigators .nav {
  display:flex;
  align-items:center;
  margin:0 6px;
  padding:4px 8px;
  font-size:15px;
  white-space:nowrap;
  color:var(--header-btn-alert-text);
  background-color:var(--header-btn-alert-bg);
  border:2px solid var(--header-btn-alert-border);
  border-radius:50px;
  cursor:pointer;
  box-sizing:border-box
}
.header .header-container .navigators .nav:hover {
  background-color:var(--header-btn-alert-bg-hover)
}
.header .header-container .navigators .nav.highlight {
  color:var(--header-btn-anchor-text);
  background-color:var(--header-btn-anchor-bg);
  border:2px solid var(--header-btn-anchor-border)
}
.header .header-container .navigators .nav.highlight:hover {
  background-color:var(--header-btn-anchor-bg-hover)
}