/* ----- FONTS ----- */
.fs-14{
  font-size: 0.87rem;
  font-weight: 400;
}

.fs-18{
  font-size: 1.125rem;
  font-weight: 600;
}

.fs-24{
  font-size: 24px;
  font-weight: 600;
}

.fs-28{
  font-size: 1.75rem;
  font-weight: 600;
}

.center_txt{
  text-align: center;
  margin: 0 auto;
}

/* ----- GPTOP ----- */

.go-top{
  width: 70px;
  right: 4px;
  display: none;
  opacity: 1;
  cursor: pointer;
  transition:all .2s
}

.go-top:hover::before{
  opacity:1;
}

.go-top:hover{
  transform:translateY(-3px);
}

@media screen and (max-width:1200px){
  .go-top{
    width: 45px;
  }
}


/* ----- BOX ----- */
.content_box.box-1440{
  display: flex;
  flex-wrap: wrap;
  z-index: 0;
  justify-content: space-between;
  margin: 50px auto 45px auto;
  color: var(--mainDark);
  font-weight: 600;
}

.content{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.w-1200,
.w-768,
.w-450{
  display: none;
}

nav{
  display: grid;
  grid-template-columns: repeat(3, 350px);
  place-content: center;
  font-size: 1.25rem;
}

.nav-btn{
  width: 100%;
  background-color: var(--dark);
  line-height: 60px;
  position: relative;
  z-index: 1;
}

.nav-btn::after{
  content:'';
  width:100%;
  height: 6px;
  display: block;
  background: var(--green-gradient);
}

.nav-btn.sticky{
  top: 136px;
  position:sticky
}

nav a{
  width: auto;
  color: var(--light);
  text-align: center;
  transition: all .2s;
  line-height: 60px;
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav a:hover,
nav a:active{
  color:var(--lightGreen);
}

nav a::before,
nav a::after,
.buttom-nav-wrap > a::before,
.buttom-nav-wrap > a::after{
  position:absolute;
  transition:all .2s;
}

nav a::before,
.buttom-nav-wrap > a::before{
  content:url('../images/icon/nav-btn-n.webp');

}

.buttom-nav-wrap > a::before{
  transform:scale(.8)
}

nav a::after,
.buttom-nav-wrap > a::after{
  content:url('../images/icon/nav-btn-h.webp');
  opacity:0
}

nav a:hover::after{
  opacity:1
}

nav a:hover::before{
  opacity:0
}

.marquee-box{
  width: 100dvw;
  /* height: 60px; */
  background-color: var(--header);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1rem;
  z-index: 1;
}

.marquee-box.sticky{
  top: 84px;
  position: sticky;
}

@media screen and (max-width:1200px){
  .marquee-box{
    padding: 0 24px 10px 24px;
  }

  .marquee-box.sticky{
    top: 60px;
  }
}

.marquee{
  background-color: var(--light);
}

.marquee-area{
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #9f9f9f;
  background-color: var(--light);
  border-radius: 20px;
  margin: 0 auto;
}

.marquee-area .icon{
  width: 30px;
  margin: 0 10px 0 1.25rem;
}

.marquee {
  width: calc( 100% - 76px );
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  line-height: 34px;
  cursor: pointer;
}

.marquee .m-slide {
  width: auto;
  display: inline-block;
  padding: 0 1rem;
}

.marquee,
.marquee .m-slide {
  font-size: 15px;
  -webkit-text-size-adjust: none;
}

.m-slide span:not(.date){
  color:var(--mainRed)
}

@media screen and (max-width:1200px){

  .marquee{
    width: calc( 100% - 60px );
  }

  .marquee,
  .marquee .m-slide{
    font-size:14px
  }

  .marquee-area .icon{
    width:23px;
    margin: 0 10px;
  }
}



/* ----- BODY ----- */

.left-area{
  width: 46%;
}

.left-area > .member-inf{
  background-color:var(--lightGray);
  border-radius:1rem;
}

.right-area{
  width: calc( 54% - 20px );
  min-height: 100vh;
  background-color:var(--lightGray);
  border-radius:1rem;
}

@media screen and (max-width:1200px){
  .right-area{
    width: 97dvw;
    margin:0 auto
  }

  .index .left-area{
    width:95dvw;
    margin:0 auto;
    overflow:hidden;
  }

  .index .left-area.pc{
    display:none
  }
}

.left-area > .member-inf,
.right-area{
  padding: 0.75rem 1rem;
}

.member-inf{
  margin-bottom:1rem
}

@media screen and (max-width:1200px){
  .member-inf{
    margin:initial
  }

  .left-area > .member-inf,
  .right-area{
    padding:6px;
  }
}

.banner-area{
  min-height: auto;
}

.right-area .content_box{
  padding:1.25rem 2.25rem;
  background-color: var(--light);
  border-radius: 6px;
  filter: drop-shadow(0px 3px 4px rgb(150 150 150 / 16%));
  padding-bottom: 2rem;
}

.hover-remark{
  display:flex;
  justify-content:flex-end;
  margin-bottom: 0.75rem;
}

.hover-content{
  display:flex;
  cursor:pointer;
  position:relative
}

@media screen and (max-width:1200px){
  .question{
    width:15px
  }

  .hover-remark{
    margin-bottom:5px;
    margin-right: 5px;
  }
}

.hover-content .text{
  width: max-content;
  display:none;
  position:absolute;
  right: 25px;
  background: rgb(0 0 0 / 60%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 0.5rem 0.5rem 0 0.5rem;
  z-index: 5;
  border-radius: 5px;
  font-size: 0.75rem;
}

.hover-content:hover .text,
.hover-remark.active .text{
  display:inline;
}

.hover-content:hover .question{
  transform:scale(0.95);
}

.hover-content ul{
  display:flex;
  align-items:flex-start;
  margin-bottom: 0.5rem;
}

.hover-content ul li{
  color: #fff;
}

.hover-content ul li:nth-child(1){
  background-color:var(--lightGreen);
  border-radius:10px;
  color:var(--mainDrak);
  padding:0px 5px;
  margin-right:4px
}

.monthly .hover-content ul li:nth-child(1){
  background-color:var(--lightPurple);
}

.member-box{
  padding: 20px 14px;
  border: 2px solid var(--lightGreen);
  border-radius: 0.625rem;
  background-color: var(--more-lightgreen);
  position:relative;
  z-index:1;
  box-shadow: 7px 7px 0px var(--mainDark);
}

.monthly .member-box{
  border: 2px solid var(--borderPurple);
  background-color: var(--more-lightpurple);
}

.member.d-flex{
  align-items: flex-start;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--mainDark);
  margin-bottom: 1.875rem;
  display: grid;
  grid-template-columns: 96px 1fr 90px;
}

.headshot{
  position:relative;
  overflow: hidden;
}

@media screen and (max-width:1200px){
  .member-box{
    width: calc( 100% - 7px );
    padding:10px
  }

  .member.d-flex{
    grid-template-columns: 1fr 90px;
    margin-bottom: 1rem;
  }

  .member .headshot{
    display:none
  }
}

.shan {
  position:absolute;
  -webkit-animation:changeImg 3s ease 0s;
  -o-animation:changeImg 3s ease 0s;
  animation:changeImg 3s ease 0s infinite;
  top:0;
  width:50%;
  height:100%;
  content:"";
  background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 100%);
  transform:skewX(-45deg);
}

.member-box .member-id{
  margin-left: 2.25rem;
  position: relative;
}

@media screen and (max-width:1200px){
  .member-box .member-id{
    margin: 15px 0 0 0;
    font-size:12px;
  }
}

.member-box .member-id::after{
  content:'ACCOUNT';
  font-weight:900;
  font-size: 46px;
  color: #edf9d0;
  position:absolute;
  left: 1.875rem;
  z-index: 0;
  bottom: -10px;
}

.monthly .member-box .member-id::after{
  color: var(--lightPurple);
}

.member-box .id-inf{
  display:flex;
  color:var(--mainRed);
  z-index: 1;
  position: relative;
}

@media screen and (max-width:1200px){
  .member-box .id-inf{
    margin-left:22px;
    font-size:12px;
  }
}

.id-number{
  margin-left:6px
}

.board-title{
  font-size: 1.375rem;
  display: flex;
  align-items: center;
  z-index: 1;
  position: relative;
  font-weight: 600;
  line-height: 26px;
}

.pin-btn{
  width: 14px;
  display:block;
  margin-right: 8px;
  cursor: pointer;
}

.pin-btn img{
  filter: drop-shadow(0px 1px 0px #e6c814);
}

.pin{
  display:none ;
}

.pin-btn:hover{
  transform: scale(1.2);
}

.top-area .member-id{
  text-align:left
}

.member-score{
  display: grid;
  grid-template-columns: 70px 1.5fr 0.5fr;
  gap: 50px;
}

@media screen and (max-width:1440px){
  .member-score{
    grid-template-columns: 70px 1.5fr 1fr;
  }
}

@media screen and (max-width:1200px){
  .member-score{
    grid-template-columns: 100px 5fr 2fr;
  }
}

@media screen and (max-width:767px){
  .member-score{
    grid-template-columns: 70px 5fr 2fr;
    gap: 8px;
  }
}

@media screen and (max-width:410px){
  .member-score{
    grid-template-columns: 70px 5fr 4fr;
    gap: 5px;
  }
}

.member-score .ranking::before{
  content:'我的排名';
}

.member-score .week-p::before{
  content:'金鱼P值'
}

.member-score .monthly-p::before{
  content:'最终夺金P值'
}

.member-score .bonus::before{
  content:'奖金';
  text-align: left;
}

.member-score .ranking::before,
.member-score .week-p::before,
.member-score .bonus::before,
.member-score .monthly-p::before{
  font-weight:600;
}

.ranking{
  width: 100%;
  text-align: center;
}

.week-p,
.top-area .bonus,
.monthly-p{
  text-align:left;
}

.red-inf{
  color: var(--mainRed)
}

.member-score p{
  font-size:1.375rem;
  font-weight: bold;
  margin-top: 2px;
}

@media screen and (max-width:320px){
  .member-score p{
    font-size:20px;
  }
}

.bonus .d-flex{
  justify-content:space-between;
  align-items: end;
}

.bonus .d-flex span{
  line-height: 28px;
}

.select-group{
  padding:5px 0px
}

.select-wrap{
  width: 100%;
  position:relative;
  margin:0 auto;
  display: grid;
  grid-template-columns: auto 290px;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  z-index: 4;
  font-size:0.875rem
}

.select-box{
  position:relative;
  width:100%;
  font-size:0.875rem;
}

@media screen and (max-width:1300px){
  .select-wrap{
    gap: 5px;
  }
}

@media screen and (max-width:1200px){
  .select-wrap{
    position:fixed;
    top: 106px;
    left:0;
    right:0;
    z-index:50;
    grid-template-columns: 60px 80%;
    padding: 8px;
    justify-content: center;
    gap: 2px;
  }

  .week .select-wrap{
    background-color:var(--lightGreen)
  }

  .monthly .select-wrap{
    background-color:#9f5fff;
  }

  .monthly .select-wrap label{
    color:#fff
  }
}

.select-toggle{
  cursor:pointer;
  padding: 4px 16px;
  border:1px solid var(--mainDark);
  border-radius: 30px;
  background:#fff;
  position:relative;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
}

.select-toggle:after{
  content:url('../images/icon/down-arrow.webp');
  display:block;
  transition:all .2s
}

@media screen and (max-width:1200px){
  .select-toggle{
    text-align:center;
    justify-content: center;
    padding: 4px 8px;
    font-size: 13px;
  }

  .select-toggle:after{
    position:absolute;
    right:6px
  }
}

.select-toggle:hover:after{
  transform:scale(0.95);
  opacity:.8
}

.select-menu{
  width: 290px;
  display:none;
  position:absolute;
  right:0;
  top: 36px;
  background:var(--weekSelect);
  max-height:260px;
  overflow:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  z-index: 2;
  border-radius:5px
}

@media screen and (max-width:1200px){
  .select-menu{
    width:100%;
    left:0;
    top: 47px;
    border-radius: 0px;
  }
}

.select-menu::-webkit-scrollbar{
  width: 4px;
  height: 4px;
}

.select-group-title{
  position:sticky;
  top:0;
  background:var(--weekSelect);
  font-size:0.875rem;
  padding:6px 12px;
}

.select-item{
  width: calc( 100% - 10px );
  padding: 5px 12px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight: 400;
  margin: 0 auto;
  border-radius: 5px;
  text-align: center;
}

@media screen and (max-width:1200px){
  .select-group-title{
    padding: 2px 30px;
  }

  .select-item{
    padding: 8px 12px;
  }
}

.select-item:hover{
  background:rgb(from var(--selectGreen) r g b / 30%);
}

.monthly .select-item:hover{
  background:rgb(from var(--lightPurple) r g b / 30%);
}

.select-item.selected{
  background:var(--selectGreen);
}

.monthly .select-item.selected{
  background:var(--lightPurple);
}

.select-content{
  margin-top:-10px;
}

.content-panel{
  display:none;
}

@media screen and (max-width:767px){
  .select-content .content-panel{
    font-size: 14px;
  }
}

.content-panel.active{
  display:flex;
  flex-wrap: wrap;
}

.member-inf.content-panel.active{
  display:block
}

.member-mobile .member-inf{
  width: 98%;
  margin: 0 auto;
}

.title-area{
  display: grid;
  grid-template-columns: 6fr 9fr;
  align-items: center;
}

@media screen and (max-width:1440px){
  .title-area{
    grid-template-columns: 4fr 9fr;
  }
}

@media screen and (max-width:1200px){
  .title-area{
    grid-template-columns:1fr;
  }
}

.title-area > p{
  font-size:1.375rem;
  position: relative;
  align-items: center;
  display: flex;
  flex-wrap:wrap
}

.title-area > p span{
  z-index:1;
  position: relative;
}

.sub-label{
  font-size:1rem;
  margin-left:-5px
}

.monthly .title-area > p span{
  color:#fff;
  text-shadow: 1px 2px 2px #5522a2;
}

.title-area > p::after{
  content:'RANKING';
  font-weight:900;
  font-size:2.87rem;
  color:#deff8d;
  position:absolute;
  left: 3px;
  z-index: 0;
  bottom: -10px;
}

.monthly .title-area > p::after{
  color:#a56aff;
}

.top-area{
  padding: 20px 20px 35px 20px;
  background: linear-gradient(135deg,  #cbfc2e 15%,#e7ffab 60%,#eef0f3 100%);
  border-radius:10px;
  border:2px solid var(--lightGreen)
}

@media screen and (max-width:1300px){
  .top-area{
    padding: 20px 10px 35px 16px;
  }
}


.monthly .top-area{
  border:2px solid var(--borderPurple);
  background: linear-gradient(135deg,  #9854ff 25%,#d8afff 60%,#eff6ff 100%);
}

.top3-box{
  margin-top:1.25rem;
  justify-content: center;
  display:none;
  flex-wrap: wrap;
  align-items: flex-end;
}

.top3-box.active{
  display:flex
}

@media (max-width: 1440px) {
  .top3-box,
  .top3-box.active{
    display:none;
  }
}

.top3-inf{
  width: 188px;
  height: 97px;
  position: relative;
  /* background: #fff; */
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 7px 9px rgb(from var(--mainDark) r g b / 40%);
}

.list.main-member .list-normal{
  background:#ffe7f0;
  font-weight: 800;
}

.list.main-member .board-ranking:not(.mobile.main-member .board-ranking){
  background-color:#fff;
  width: 33px;
  height: 33px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:90px
}

@media screen and (max-width:340px){
  .list.main-member .list-normal{
    background:#ffe7f0;
    font-weight: initial;
  }

  .list.main-member .board-ranking:not(.mobile.main-member .board-ranking){
    width: 25px;
    height: 25px;
  }
}

.top3-inf.main-member{
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(180deg, #ffd8e7 20%, #fff8fb 70%), linear-gradient(-19deg, #ff74ad 0%,#fa3459 30%, #ffcceb 100%);
}

.top3-inf.main-member .top3-hover-effect{
  border: 0px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(180deg, #ffd8e7 20%, #fff8fb 70%), linear-gradient(-19deg, #ff74ad 0%,#fa3459 30%, #ffcceb 100%);
}

.crown{
  position: absolute;
  right:-1px;
  top: -18px;
  z-index: 0;
}

.top3-hover-effect{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  margin-top: -30px;
  display: flex;
  align-content: flex-end;
  align-items: end;
  border-radius: 10px;
  z-index: 1;
  background-color: #fff;
}

.top3-normal,
.top3-hover{
  width: 100%;
  position:absolute;
  top: 37px;
  padding:0 0 0px 1.6rem;
  transition:all .2s ease-in-out
}

.top3-hover{
  height: 100%;
  opacity:0;
  padding-top: 37px;
  top:100%;
  border-radius: 8px;
  overflow: hidden;
  color:#fff;
  transform: translateY(0px);
  background:var(--top3-inf);
  z-index: 0;
}

.top3-inf:hover .top3-hover{
  transform: translateY(-100%);
  opacity:1
}

.top3-inf:hover .top3-normal{
  opacity:0
}

.top3-inf:hover .top3-hover{
  opacity:1
}

.top3-inf div p{
  width: 100%;
  /* display:flex; */
  font-size: 0.875rem;
  line-height: 21px;
  vertical-align: bottom;
}

.top3-inf .member-id{
  width: 92%;
  line-height:30px;
  text-align: center;
  justify-content: center;
  padding-left: 1.125rem;

}

.select-content .top1::before,
.select-content .top2::before,
.select-content .top3::before{
  content:url('../images/icon/top1.webp');
  top: -14px;
  left: -8px;
  position:absolute;
  z-index: 3;
  transform: rotatex(10deg);
  animation: rotateAngle 3s linear infinite;
  filter: drop-shadow(3px 5px 4px rgb(11 11 11 / 22%));
}

.select-content .mobile.top1::before,
.select-content .mobile.top2::before,
.select-content .mobile.top3::before{
  content:initial
}

.board-ranking img{
  width: 30px;
  animation: rotateAngle 1.5s linear infinite;
}

.select-content .top2::before{
  content:url('../images/icon/top2.webp');
}

.select-content .top3::before{
  content:url('../images/icon/top3.webp');
}

.top3-inf .id-inf{
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.top1{
  order:2;
  margin: 10px 18px 25px 18px;
}

@media (max-width: 1440px) {
  .mobile.top1 {
    margin:initial;
  }

  .mobile.list{
    display: block;
  }
}

.top2{
  order:1
}

.top3{
  order:3
}

.top3-inf .member-id{
  border-radius: 16px;
}

.top1 .member-id{
  background: var(--top1);
}

.mobile.top1 .list-normal{
  background:linear-gradient(to right, #fde4a0 0%, #ffffff 40%);
  border:1px solid #fff6cc
}

.top2 .member-id{
  background: var(--top2);
}

.mobile.top2 .list-normal{
  background:linear-gradient(to right, #c9cee4 0%, #ffffff 40%);
  border:1px solid #dee4f1
}

.top3 .member-id{
  background: var(--top3);
}

.mobile.top3 .list-normal{
  background:linear-gradient(to right, #f7d3ba 0%, #ffffff 40%);
  border:1px solid #f7e5d9
}

.mobile.main-member .list-normal{
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #ffd8e7 0%, #ffffff 40%), linear-gradient(119deg, #ff93b4, #fa3459 100%);
  font-weight: 800;
}

@media (max-width: 340px) {
  .mobile.main-member .list-normal{
    font-weight: initial;
  }
}

.mobile.main-member .member-id::before{
  content:url('../images/icon/crown-mobile.webp');
  position:absolute;
}

.mobile.main-member .goldfish-p{
  color:var(--mainRed)
}


@media (max-width: 1440px) {
  .mobile .member-id{
    background: initial;
  }
}

.top3-inf div p.bonus{
  font-size:1.25rem;
  color: var(--mainRed);
}

.top3-inf div p.days{
  font-size:1rem;
  color:var(--lightGreen)
}

.monthly .top3-inf div p.days{
  color:#d7beff
}

.top-area .goldfish-p::before,
.top-area .total-p::before{
  content:'金鱼P值';
  font-size:0.75rem;
  margin-right: 10px;
}

.top-area .bonus::before,
.top-area .bonus::after,
.top-area .days::before{
  content:'奖金';
  font-size:0.875rem;
  line-height: 1.5rem;
  margin-right: 10px;
  color:var(--mainDark)
}

.top-area .monthly-p::before{
  content:'最终夺金P值';
  font-size:0.75rem;
  margin-right: 10px;
}

.top-area .bonus::after{
  content:'元';
  margin-left: 10px;
}

.top-area .total-p::before{
  content:'积分';
  color:#fff
}

.top-area .days::before{
  content:'签到天(倍)数';
  color:#fff
}

.form-title{
  background: var(--mainDark);
  color: #fff;
  border-radius: 10px 10px 0 0;
  line-height: 30px;
  padding: 0 10px;
}

.form-title,
.list-normal{
  width:100%;
  display: grid;
  grid-template-columns: 1.5fr 2.2fr 2.5fr 3fr .8fr;
  text-align: center;
  place-items: center;
}

.list{
  padding: 0px 10px 4px 10px;
  position: relative;
  cursor:pointer
}

@media screen and (max-width:1200px){
  .list{
    padding: 0px 4px 4px 4px;
  }

  .form-title{
    padding:0 4px
  }
}

@media screen and (max-width:767px){
  .form-title,
  .list-normal{
    grid-template-columns: 1.2fr 2.6fr 2.6fr 3fr 24px;
  }
}

@media screen and (max-width:410px){
  .form-title,
  .list-normal{
    grid-template-columns: 1.2fr 3fr 2.7fr 2.2fr 24px;
  }
}

@media screen and (max-width:330px){
  .form-title,
  .list-normal{
    grid-template-columns: 1.2fr 3fr 2.7fr 2.2fr 17px;
  }
}

.board-list-box .form-title .bonus{
  color:var(--lightGreen)
}

.monthly .board-list-box .form-title .bonus{
  color:#d2b6ff
}

.list-content{
  width:100%;
  background:#fff;
  padding: 12px 0;
  border-radius: 10px;
}

.list-normal{
  background:var(--list-background);
  border-radius:20px;
  line-height:40px;
  cursor:pointer
}

@media screen and (max-width:430px){
  .list-content .list-normal{
    font-weight: 500;
  }
}

.list-normal::after,
.top3-hover-effect::after{
  content:url('../images/icon/information.webp');
  display:block;
}

@media screen and (max-width:330px){
  .list-normal::after,
  .top3-hover-effect::after{
    transform:scale(0.8)
  }
}

.top3-hover-effect::before{
  content:url('../images/icon/information-light.webp');
}

.top3-hover-effect::after,
.top3-hover-effect::before{
  position: absolute;
  right: 6px;
  bottom: 6px;
}

.top3-hover-effect::before{
  opacity: 0;
  z-index: 2;
}

.top3-inf:hover .top3-hover-effect::before{
  opacity:1
}

.top3-inf:hover .top3-hover-effect::after{
  opacity:0
}

.list .bonus{
  color:var(--mainRed);
}

@media screen and (max-width:1440px){
  .list .bonus{
    font-weight: 800;
  }
}

@media screen and (max-width:340px){
  .list .bonus{
    font-weight:initial;
  }
}

.list .bonus::after{
  content:'元';
  font-size:0.87rem;
  margin-left:10px;
  font-weight: initial;
}

@media screen and (max-width:1440px){
  .list .bonus::after{
    font-size:12px;
  }
}

.list-hover{
  width: calc( 100% - 20px );
  position:absolute;
  top: 0;
  border-radius: 20px;
  line-height: 40px;
  display: flex;
  justify-content: center;
  background:linear-gradient(to top, rgb(60 60 60 / 90%) 15%,rgb(130 130 130 / 90%) 100%);
  color: #fff;
  opacity: 0;
  visibility:hidden;
  transition:all .1s
}

@media screen and (max-width:1200px){
  .list-hover{
    width: calc( 100% - 8px );
  }
}

@media screen and (max-width:767px){
  .list .bonus::after{
    margin-left: 2px;
  }
}

.list:hover .list-hover,
.list.active .list-hover{
  opacity:1;
  visibility:visible
}

.list .total-p::before,
.list .days::before{
  content:'积分 : ';
  font-size:0.87rem;
  margin-left:10px;
}

.list .days::before{
  content:'签到天(倍)数 : ';
  color: #fff;
}

.list-hover p {
  margin:0 1.6rem
}

@media screen and (max-width:1440px){
  .monthly .list.mobile .days{
    color:#d2b6ff;
    font-size:16px
  }

  .week .list.mobile .days{
    color:var(--lightGreen);
    font-size:16px
  }
}

@media screen and (max-width:767px){
  .list-hover p{
    /* width: 50%; */
    text-align: center;
    margin: initial;
  }

  .list-hover p:last-child{
    margin: 0 0 0 10px;
  }

  .list .days::before,
  .list .total-p::before{
    margin:initial
  }
}

button.history-list{
  font-size:0.875rem;
  border:0;
  background-color:#cccccc00;
  font-weight:600;
  color:#606060;
  border-bottom:1px solid;
  z-index: 1;
}

.calculator-box{
  width: 100%;
  display: inline-flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

.show-area,
.hide-area{
  width:100%;
  display:none;
  padding: 0 1.18rem;
}

.show-area.show,
.hide-area.show{
  display:grid;
}

.show-area{
  grid-template-columns: 4fr 106px 5fr;
  grid-template-rows: auto 46px auto;
  align-items: start;
}

.hide-area{
  background-color:var(--hide-area-bac);
  border-radius:1.25rem;
  padding: 1.25rem 1.18rem 1.25rem 1rem;
  align-items: start;
}

.monthly .hide-area{
  padding:1.25rem 2.5rem 1.25rem 1.18rem
}

@media screen and (max-width:1440px){
  .hide-area,
  .monthly .hide-area{
    padding: 14px 12px 14px 0;
  }
}

@media screen and (max-width:1200px){
  .hide-area,
  .monthly .hide-area{
    border-radius:10px;
    padding: 10px;
  }
}

@media screen and (max-width:340px){
  .hide-area,
  .monthly .hide-area{
    padding: 10px 5px;
  }
}

.hide-row-01,
.hide-row-02{
  display:grid;
}

.monthly .hide-row-02{
  grid-template-columns: 43px 3fr 1fr;
  grid-template-rows: auto 46px;
  margin-top: 1rem;
}

.hide-area input::placeholder{
  color:#d1d1d1
}

.hide-area input,
.num-select{
  border: 1px solid var(--input-border);
  color:#a9a9a9;
  box-shadow: inset 0 3px 4px #ccc;
}

.calculator-box .hide-area .num{
  color:var(--darkRed)
}

.calculator-box .hide-area input.num{
  color:var(--mainDark);
}

.hide-row-01{
  grid-template-columns: 1.5fr 1fr;
}

.monthly .hide-row-01{
  grid-template-columns: 4fr 2.3fr;
}

.hide-row-01 li{
  display:grid;
}

.hide-row-01 .valid{
  grid-template-columns: 43px auto 67px;
  grid-template-rows: auto 46px;
}

.monthly .hide-row-01 .valid{
  grid-template-columns: 43px 3fr 72px;
}

.monthly-rate{
  /* grid-template-columns: 2.5fr 34px; */
  grid-template-rows: auto 46px;
}

@media screen and (max-width:1200px){
  .calculator-box{
    margin-top: 16px;
  }

  .show-area{
    padding: 0 14px;
    grid-template-columns: 2fr 72px 2fr;
  }

  .monthly .hide-row-01 .valid {
    grid-template-columns: 43px 3fr 60px;
  }

  .hide-row-01 .valid{
    grid-template-rows: auto 36px;
    grid-template-columns: 1fr 50px;
  }

  .monthly-rate{
    grid-template-columns: 3fr 26px;
    grid-template-rows: auto 36px;
  }

  .monthly .hide-row-02{
    grid-template-columns: 22px 3fr 1.5fr;
    grid-template-rows: 1fr 36px;
  }

  .monthly .hide-row-01{
    grid-template-columns: 3fr 2fr;
  }

  .hide-row-01{
    grid-template-columns: 3fr 1.8fr 1fr;
  }
}

.week .hide-row-01 .valid{
  grid-column:1/4;
}

.hide-row-01 .valid p{
  grid-column: 2 / 3;
}

.week .hide-row-01{
  row-gap: 10px;
}

@media screen and (max-width:1200px){

  .week .hide-row-01 .valid p{
    grid-column: 1 / 4;
  }

  .week .hide-row-01{
    row-gap: 10px;
  }
}

@media screen and (max-width:410px){
  .monthly .hide-row-02{
    grid-template-columns: 22px 3fr 2fr;
  }

  .monthly .hide-row-01 .valid {
    grid-template-columns: 43px 3fr 52px;
  }
}


.hide-row-01 .total-p .num{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background-color:#eeeeee;
}

.hide-row-01 .valid input{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.monthly .hide-row-01 .valid p{
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.monthly .hide-row-01 .valid input{
  /* grid-row: 2 / 3; */
  /* grid-column: 2 / 3; */
}

@media screen and (max-width:1200px){
  .monthly .hide-row-01 .valid p,.hide-row-01 .valid input{
    grid-column: 1 / 3;
  }
}

.monthly-rate input{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.hide-row-01 .valid .formula,
.monthly-rate .formula{
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  align-self: center;
  padding-left: 6px;
  font-size: 1.375rem;
  font-weight: 800;
}

.monthly-rate .formula{
  padding-left: 4px;
  grid-column: 2 / 3;
}

@media screen and (max-width:1200px){
  .hide-row-01 .valid .formula,
  .monthly-rate .formula{
    font-size:16px;
    padding-left:2px
  }
}

.monthly .hide-row-01 .valid .formula{
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  text-align:center;
  padding:initial
}

.monthly .hide-row-02 .symbol-equal{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  font-size: 37px;
  text-align: center;
  align-self: center;
}

.monthly .hide-row-02 .total-p{
  display:grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 46px;
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

.monthly .hide-row-02 .multiple-box{
  grid-row: 1 / 3;
  grid-column: 3 / 4;
  display: grid;
  grid-template-columns: 1fr 24px;
  grid-template-rows: auto 46px;
}

@media (max-width: 1200px) {
  .monthly .hide-row-02 .total-p{
    grid-template-columns: auto 36px;
  }

  .monthly .hide-row-02 .total-p{
    grid-template-rows: auto 36px;
  }

  .monthly .hide-row-02 .multiple-box{
    grid-template-rows: auto 36px;
  }
}

.monthly .total-p .num{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.monthly .total-p .symbol-mul{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.hide-row-01 .total-p{
  grid-column: 1 / 2;
  grid-template-columns: 43px 4fr 32px;
  grid-template-rows: auto 46px;
}

.hide-row-01 .total-p p{
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

.hide-row-01 .total-p  .symbol-equal{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  justify-self: center;
  align-self: center;
  font-size: 37px;
  font-weight: 600;
}

@media (max-width: 1200px){
  .hide-row-01 .total-p  .symbol-equal{
    font-size:22px;
    justify-self: baseline
  }

  .hide-row-01 .total-p{
    grid-template-columns: 22px 4fr 32px;
  }
}

.hide-row-01 .total-p .symbol-mul{
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  justify-self: center;
  align-self: center;
  font-size: 1.375rem;
}

.hide-row-01 .multiple-box{
  grid-template-columns: auto 20px;
  grid-template-rows: auto 46px;
}

.hide-row-01 .multiple-box p{
  grid-column: 1 / 3;
}

.hide-row-01 .unit{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  align-self: self-end;
}

.final-result{
  display:grid;
  grid-template-rows: auto 46px;
  grid-template-columns: 43px auto 26px;
  margin-top: 1.125rem;
}

.monthly .final-result{
  grid-template-columns: 43px auto 0;
}

.final-result .symbol-equal{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  justify-self: center;
  align-self: center;
  font-size: 37px;
}

.final-result .result-box{
  grid-row: 1 / 3;
  grid-column: 2 /3;
  display:grid;
  grid-template-rows: auto 46px;
}

.final-result .result-box > div{
  display:grid;
  height: 100%;
  grid-template-columns: 2fr 1.2fr 1.2fr;
  padding-left:26px;
}

.monthly .final-result .result-box > div{
  padding-left:2.8rem;
}

.result-num{
  background-color:#eeeeee;
  border-radius:5px;
  font-size:1.375rem;
  color:var(--darkRed);
  border:1px solid #ffffff;
  font-weight: 800;
}

.result-num div{
  align-self:center;
}

.calculator-box button{
  margin: 0 1.2rem 1rem 0;
  font-size:0.875rem;
  padding:2px 9px;
  background-color:var(--mainDark);
  color:#fff;
  border-radius:5px;
  border:0px;
  border:1px solid var(--mainDark);
  transition:all .2s;
}

@media screen and (max-width:1200px){
  .monthly .hide-row-02 .symbol-equal,
  .final-result .symbol-equal{
    font-size: 22px;
    font-weight: 600;
    justify-self: baseline;
  }

  .final-result .result-box,
  .hide-row-01 .total-p,
  .hide-row-01 .multiple-box,
  .monthly .final-result{
    grid-template-rows: 1fr 36px;
  }

  .monthly .final-result{
    grid-template-columns: 22px auto 0;
  }

  .result-num{
    font-size: 16px;
  }

  .final-result{
    grid-template-columns: 22px auto 0;
  }
}

.week .hide-row-01 .multiple-box{
  grid-column: 2/4;
}

@media screen and (max-width:767px){
  .monthly .final-result .result-box > div{
    padding-left: 1rem;
  }

  .hide-row-01 .total-p .symbol-equal{
    font-weight: 600;
  }
}

@media screen and (max-width:410px){
  .calculator-box button{
    margin: 0 1.2rem 8px  0;
  }
}

@media screen and (max-width:330px){
  .calculator-box button{
    margin: 0 1.2rem 8px  0;
  }

  .monthly .final-result .result-box > div{
    padding-left:10px;
  }

  .final-result .result-box > div{
    grid-template-columns: 2.2fr 1.2fr 1.5fr;
  }
}

.calculator-box button:hover{
  transform:scale(0.95)
}

.week .calculator-box button.show,
.week .calculator-box button:hover{
  background-color:#384900;
  border:1px solid #ceff29
}

.monthly .calculator-box button.show,
.monthly .calculator-box button:hover{
  background-color:#603d99;
  border:1px solid #9554ff
}

.calculator-box .num{
  width: 100%;
  color:var(--mainRed);
  font-size: 1.375rem;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
  place-content: center;
  display: grid;
  line-height: 46px;
  padding: 0 5px;
}

@media screen and (max-width:1200px){
  .calculator-box .num{
    line-height: 36px;
    font-size: 16px;
    padding: 0 2px;
  }
}

.calculator-box .content{
  flex-wrap:wrap;
  align-items:center
}

.show-area .multiple-box,
.show-area .goldfish-p,
.show-area .monthly-p{
  display:grid;
  grid-template-rows: auto 46px auto;
  align-content:start;
}

.show-area .total-p{
  display:grid;
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  align-content:start;
  grid-template-columns: auto auto 2.3rem;
  grid-template-rows: auto 46px auto;
}

.show-area .multiple-box{
  grid-row: 1 / 4;
  grid-column: 2 / 3;
}

.multiple-box p{
  grid-column: 1 / 3;
}

.show-area .goldfish-p,
.show-area .monthly-p{
  grid-row: 1 / 3;
  grid-column: 3 / 4;
  grid-template-columns: 2.3rem auto;
}

.symbol-mul{
  justify-self: center;
  align-self: center;
  font-size:22px;
  font-weight: 800;
}

@media screen and (max-width:1200px){
  .symbol-mul,
  .hide-row-01 .total-p .symbol-mul{
    font-size:16px;
  }
}

.show-area .goldfish-p .symbol-mul,
.show-area .monthly-p .symbol-mul{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.show-area .goldfish-p p,
.show-area .monthly-p p{
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

.show-area .goldfish-p .num,
.show-area .monthly-p .num{
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.show-area .total-p .num{
  grid-row: 2 / 3;
  grid-column: 1 / 3;
}

.show-area .total-p .symbol-mul{
  grid-row: 2 / 2;
  grid-column: 3 / 4;
}

.show-area .symbol-equal{
  grid-row: 2 / 3;
  grid-column: 4 / 5;
  justify-self: center;
  align-self: center;
  font-size:var(--symbol);
  font-weight: bold;
}

@media screen and (max-width:1200px){

  .show-area .multiple-box,
  .show-area .goldfish-p,
  .show-area .monthly-p{
    grid-template-rows: auto 36px auto;
  }

  .show-area .total-p{

    grid-template-rows: auto 36px auto;
  }

  .show-area .multiple-box{
    grid-column: 2 / 3;
  }
}

@media screen and (max-width:410px){
  .show-area{
    grid-template-rows: repeat(2, auto);
  }

  .show-area .total-p{
    grid-column: 1 / 3;
    grid-row:1 / 2;
    grid-template-columns: auto auto 24px;
  }

  .show-area .multiple-box{
    grid-column: 3 / 4;
    grid-row: 1/ 2;
  }

  .show-area .goldfish-p,
  .show-area .monthly-p{
    grid-column: 1 / 4;
    grid-row:2 / 3;
    grid-template-columns: 24px auto;
  }

  .show-area{
    padding: 0 4px;
  }
}

.row-num{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  grid-column: 1 / 3;
}

.calculator-box p{
  margin-bottom:4px;
}

.unit{
  margin-left:6px
}

.monthly .hide-row-02 .multiple-box .unit{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  align-self: self-end;
}

.hint{
  font-size:12px;
  line-height: 1rem;
  margin-top: 4px;
  grid-column: 1 / 3;
}

.hint span{
  color:var(--mainRed);
  font-size:1rem;
  margin: 0 2px;
}

@media screen and (max-width:767px){
  .hint span{
    font-size:14px
  }
}

.row-num-select{
  position:relative;
  display:inline-block;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.num-select{
  width: 100%;
  height: 100%;
  display:inline-flex;
  border-radius:5px;
  overflow:hidden;
  cursor:pointer;
  background: #fff;
  font-size: 1.375rem;
}

@media screen and (max-width:1200px){
  .num-select{
    font-size: 16px;
  }
}

.num-select-value {
  width: calc( 100% - 23px );
  text-align: center;
  color: #a9a9a9;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.num-native-wrap{
  position:relative;
  height:100%;
  background-color: #fff;
  border-radius: 5px;
  display:none
}

@media (pointer: coarse) and (max-width: 768px){
  .num-native-wrap{ display:block; }
  .num-select, .num-select-list{ display:none !important; }
}

.num-native-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width:100%;
  height: 100%;
  padding-right: 23px;
  background: #ffffff00;
  border-radius: 5px;
  font-size: 18px;
  text-align: center;
  z-index: 1;
  position: relative;
  text-align-last: center;
  color: #a9a9a9;
  border: 1px solid var(--input-border);
  box-shadow: inset 0 3px 4px #ccc;
}

.num-arrow-wrap{
  width: 23px;
  height: 100%;
  background: #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.num-native-select option{
  text-align: center;
  text-align-last: center;
}

.num-arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #444;
}

.num-native-arrow::before{
  content:'';
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #444;
  display:block
}

.num-native-arrow{
  width: 23px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}



.row-num-select.is-open .num-arrow {
  border-top: none;
  border-bottom: 7px solid #444;
}

.num-select-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -2px;
  padding: 1px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  list-style: none;
  display: none;
  overflow:hidden
}

.num-option {
  padding: 3px 10px;
  text-align: center;
  cursor: pointer;
  font-size:1.125rem;
  font-weight:500;
  border-radius: 5px;
}

.num-option:hover{
  background:rgb(from var(--selectGreen) r g b / 30%);
}

.num-option.is-selected {
  background:rgb(from var(--selectGreen) r g b / 68%);
}

.monthly .num-option:hover{
  background:rgb(from var(--selectPurple) r g b / 30%);
}

.monthly .num-option.is-selected {
  background:rgb(from var(--selectPurple) r g b / 68%);
}

a.ticker,
a.ticker .ticker-viewport,
a.ticker .ticker-list{
  background-color: #f5ffd4;
}

.ticker,
.ticker-viewport,
.ticker-list{
  background-color: #d1d1d1;
}

.ticker {
  position: relative;
  width: 100%;
  height: 46px;
  color: #222;
  border-radius: 25px;
  overflow:hidden;
  display: flex;
  align-items: center;
  padding-left: 5px;
  border: 1px solid #fff;
}

a.ticker {
  cursor: pointer;
}

.ticker-viewport {
  width:calc( 100% - 125px );
  position: relative;
  height: 36px;
  overflow: hidden;
  font-weight: 400;
  font-size: 0.938rem;
}

.ticker::before,
.ticker-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
}

.ticker::before{
  left: 0px;
  background: linear-gradient(90deg, #d1d1d1 60%, #f5ffd400);
}

a.ticker::before {
  background: linear-gradient(90deg, #f5ffd4 60%, #f5ffd400);
}

.ticker-viewport::after {
  right: -5px;
  background: linear-gradient(270deg, #d1d1d1 60%, #f5ffd400);
}

a.ticker .ticker-viewport::after {
  right: -5px;
  background: linear-gradient(270deg, #f5ffd4 60%, #f5ffd400);
}

.monthly a.ticker::before {
  left: 0px;
  background: linear-gradient(90deg, #f1e6ff 60%, #f5ffd400);
}

.monthly a.ticker .ticker-viewport::after {
  right: -5px;
  background: linear-gradient(270deg, #f1e6ff 60%, #f5ffd400);
}

.ticker-list {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.monthly a.ticker,
.monthly a.ticker .ticker-viewport,
.monthly a.ticker .ticker-list{
  background-color: #f1e6ff
}

.ticker-item {
  display: flex;
  align-items: center;
  height:36px;
  padding: 0 20px;
  white-space: nowrap;
  color:#3c3c3c
}

.t-text {
  display: inline-block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.ranking-btn{
  width:125px;
  text-align:center;
  height:100%;
  border-radius: 30px;
  line-height: 40px;
  background:#7a7a7a;
  color: #b8b8b8;
  border:2px solid #9fcd0a00;
}

a.ticker .ranking-btn{
  background:var(--mainDark);
  color:var(--lightGreen);
  border:2px solid #9fcd0a00;
}

.monthly a.ticker .ranking-btn{
  color:#fff
}

a.ticker:hover .ranking-btn{
  background:#ceff29;
  border:2px solid #9fcd0a;
  color:var(--mainDark);
  transform:scale(.98);
  box-shadow: inset 0px 3px 7px rgb(0 0 0 / 17%);
}

.monthly a.ticker:hover  .ranking-btn{
  background:#9554ff;
  border:2px solid #cea9f4;
  color:#fff
}

.ticker-box{
  padding: 0 1.18rem;
  margin: 1rem 0 0.75rem 0;
}

.t-text span{
  color:var(--mainRed)
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 0 0;
}

.pagination-ellipsis{
  width: 21px;
  height: 21px;
  display: flex;
  line-height: 14px;
  justify-content: center;
}

.arrow-left{
  transform: rotate(180deg);
}

.pagination-page{
  width: 21px;
  height: 21px;
  border-radius:30px;
  background: var(--mainDark);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 19px;
}

.monthly .pagination-page.active,
.monthly .pagination-page:hover{
  color: #d2b6ff;
}

.week .pagination-page.active,
.week .pagination-page:hover{
  color: #c9f928;
}

.is-disabled {
  opacity:.3
}

.pagination .ellipsis {
  color: var(--mainDark);
}

.pagination-status{
  position: fixed;
  left: 1rem;
  bottom: 25dvh;
  z-index: 1;
}

.pagination-status span{
  width: auto;
  background: #cdcdcd;
  padding: 10px 15px;
  border-radius: 90px;
  color: #797979;
  opacity: .3;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.pagination-status span:hover,
.pagination-status span.active{
  opacity:1
}

@media screen and (max-width:1200px){
  .ticker,
  .ticker-viewport{
    font-size:12px
  }

  .ticker {
    height:36px;
  }

  .ranking-btn{
    line-height:30px;
    width: 90px;
  }

  .ticker-viewport {
    width:calc( 100% - 90px );
  }
}

@media screen and (max-width:1200px){
  .ticker-box{
    padding: 0
  }
}


/* ----- lightbox ----- */

.status-vs{
  position:relative;
  margin-bottom: 8px;
}

.status-vs .coin{
  -webkit-animation: pulsate-fwd 2s ease-in-out infinite both;
  animation: pulsate-fwd 1s ease-in-out infinite both;
  position: absolute;
  left:0;
}

#not-started-yet .status-vs{
  width: 95%;
  /* min-height: 80%; */
  margin-bottom: -65px;
}

#not-started-yet .status-vs .coin{
  position:relative
}

.lightbox-status:hover{
  opacity:1
}

.gesture-button{
  width:130px;
  position:absolute;
  left:1rem;
  display:flex;
  flex-wrap:wrap;
  font-size:14px;
}

.gesture-button span{
  width:100%;
  padding:12px 10px;
  text-align:center;
  background-color: #d1ff81;
  border-radius:90px;
  margin:4px 0;
  opacity:.2;
  cursor:pointer
}

.gesture-button span:hover,
.gesture-button span.active{
  opacity:1
}

.closeBtn01{
  width: 30px;
  height: 30px;
  text-align: center;
  position:absolute;
  top: -35px;
  right:0;
  color: rgb(26 21 21 / 90%);
  background-color: rgb(255 255 255 / 100%);
  line-height: 30px;
  border-radius: 90px;
  cursor:pointer
}

.modal {
  width: clamp(300px, 95dvw, 1280px);
  height: auto;
  text-align: center;
  position: relative;
  flex-wrap: wrap;
  background-color: #000;
  border-radius: 20px;
  padding: 10px 16px 34px 16px;
  -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@media screen and (max-width:767px){
  .modal {
    padding: 10px 5px 16px 5px;
  }
}

.lightbox.status .modal{
  max-width:412px;
  width:90dvw;
  height:auto;
  background: #fff;
  padding: initial;
  display: none;
}

.bounce-in{
  -webkit-animation: bounce-in-fwd 1.1s both;
  animation: bounce-in-fwd .8s both;
}

.wobble{
  -webkit-animation: wobble-hor-bottom 0.8s both;
  animation: wobble-hor-bottom 0.8s both;
}

.lightbox.status .modal.active{
  display:block
}

#lightbox-step .modal{
  width:auto;
  width: 500px;
  background:initial;
  padding: initial;
  animation:none;
}

@media screen and (max-width:767px){
  #lightbox-step .modal{

  }
}

.lightbox-open{
  height: 100dvh;
  overflow: hidden;
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0px;
  width: 100dvw;
  height: 100dvh;
  display:none;
  justify-content: center;
  align-items: center;
  z-index: 6;
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
  visibility: hidden;
}

.lightbox-show{
  height: 100dvh;
  overflow: hidden;
}

.lightbox-content{
  width: 100%;
  height: 75vh;
  border-radius: 5px;
  background-color: #f4f4f4;
  padding-top: 2rem;
  position: relative;
  overflow: hidden;
}

#lightbox-step .modal .lightbox-content{
  height:auto;
  background-color: initial;
  padding: initial;
  overflow: initial;
}

#lightbox-step .step{
  display:none;
  transition:initial;
  transform: initial;
  cursor: pointer;
}

#lightbox-step .step img{
  width:auto;
  margin:0 auto
}

#lightbox-step .step img.mobile{
  max-width: 338px;
  width: 80dvw;
}

#lightbox-step .step.active{
  display:flex;
  position: relative;
}

#lightbox-step .step::before{
  content:'';
  position:absolute;
  width: 80px;
  height: 71px;
  background-size: contain;
  background-image: url('../images/icon/hand.webp');
  background-repeat:no-repeat
}

#lightbox-step .step01::before{
  animation: finger .3s infinite alternate;
  bottom: 10%;
  left: 10%;
}

#lightbox-step .step02::before{
  animation: finger02 .3s infinite alternate;
  top:-25px;
  right: 150px;
}

#lightbox-step .step03::before{
  animation: finger03 .3s infinite alternate;
  top:25%;
  left: -8%;
}

#lightbox-step .step::after{
  content:'';
  position:absolute;
  animation: rotate-e 1s infinite alternate;
  right: -62px;
  width: 230px;
  height: 266px;
  background: url('../images/icon/step-e.webp');
  background-repeat:no-repeat;
  background-size: contain;
}

@media screen and (max-width:1200px){
  #lightbox-step .step::after{
    width: 180px;
    right: 4%;
    top: 9%;
  }

  #lightbox-step .step::before{
    width: 75px;
  }

  #lightbox-step .step01::before{
    left: 11%;
  }

  #lightbox-step .step02::before{
    right: 138px;
    top: -37px;
  }

  #lightbox-step .step03::before{
    top: 35%;
    left: 7%;
  }
}

@media screen and (max-width:767px){

  #lightbox-step .step03::before{
    top: 35%;
    left: 7%;
  }
}

@media screen and (max-width:500px){

  #lightbox-step .step::after{
    width:35%;
    top: 19%;
    right: 2%;
  }

  #lightbox-step .step::before{
    width: 17%;
  }

  #lightbox-step .step01::before{
    left: 6%;
    bottom: 10%;
  }

  #lightbox-step .step02::before{
    right: 22%;
    top: -13%;
  }

  #lightbox-step .step03::before{
    top: 34%;
    left: 0%;
  }
}

.status .lightbox-content{
  /* min-height:386px; */
  height:auto;
  padding: 0 1rem 1rem 1rem;
  background: #fff;
  border-radius: 20px;
  overflow: initial;
}

#public-status .lightbox-content{
  padding: 1rem 1rem 1.5rem 1rem;
}

.lightbox-content p.remark{
  position:absolute;
  right:10px
}

.lightbox-content.schedule,
.lightbox-content.rule{
  padding-top: 3.7rem;
}

.lightbox-content .content{
  max-width: 906px;
  width: 92%;
  height: calc(100% - 60px);
  overflow-y: scroll;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  /* padding-right: 1rem; */
}

@media screen and (max-width:1200px){
  .lightbox-content p.remark{
    width:100%;
    position:relative;
    text-align:right;
    color:#696969;
    font-size: 12px;
  }

  .lightbox-content.schedule,
  .lightbox-content.rule{
    padding: 16px 0 16px 0px;
  }

  .lightbox-content{
    padding: 16px 0 0px 0px;
  }

  #lightbox-marquee .lightbox-content .content{
    width: 98%;
  }
}

.status .content{
  width: 100%;
  justify-content:center;
  margin-bottom: 3rem;
  height: auto;
  overflow: initial;
  padding: initial;
}

.status .content p:not(.bonus-data){
  width: 100%;
  display: block;
  font-size: 1.5rem;
  font-weight:700;
}

.status .bonus-data{
  color:var(--lightRed);
  font-size:3.375rem;
  font-weight:800;
  line-height: 3.375rem;
  padding: 0 8px;
}

#before-ranking-100 .content p,
#after-ranking-51 .content p:not(.gray-inf){
  font-size:1.75rem
}

#no-data .bonus-data{
  padding: 0 2px;
}

.status .content p.gray-inf{
  color:#6d6d6d;
  font-weight:400;
}

#before-ranking-100 p.gray-inf{
  font-size:1.375rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
}

.gray-inf span{
  font-weight:800;
  margin-left:4px
}

#before-ranking-100 p.gray-inf span{
  color:initial
}

#before-ranking-100 p.gray-inf span span{
  color:var(--lightRed);
  margin:0 0.625rem;
  font-size:2rem
}

.status .content p.normal-inf{
  font-weight:400
}

#not-started-yet p.normal-inf{
  font-size:1.375rem
}

#public-status .normal-inf{
  font-size:1.375rem;
  font-weight:normal
}

#public-status .red-inf{
  color: var(--lightRed);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 2px;
}

@media screen and (max-width:767px){
  .status .bonus-data{
    font-size:38px;
    padding: 0 2px;
  }

  .status .content p:not(.bonus-data),
  #before-ranking-100 .content p,
  #after-ranking-51 .content p:not(.gray-inf),
  #public-status .red-inf{
    font-size:20px;
  }

  .status .content p.gray-inf,
  #before-ranking-100 p.gray-inf{
    font-size:16px;
    margin-bottom: 0;
    line-height: 26px;
  }

  #before-ranking-100 p.gray-inf span span{
    font-size:26px;
    margin: 0 4px;
  }

  #not-started-yet p.normal-inf,
  .status .content p.normal-inf,
  #public-status .normal-inf{
    font-size: 16px;
  }

  #not-started-yet .status-vs{
    width: 95%;
    margin-bottom: -55px;
  }
}

.lightbox-content.schedule .content,
.lightbox-content.rule .content{
  max-width: 950px;
  height: calc(100% - 30px);
  align-content: flex-start;
}

@media screen and (max-width:1200px){
  .lightbox-content.schedule .content,
  .lightbox-content.rule .content{
    height: 100%;
    padding: 0 4px 0 6px;
    width: 97%;
  }

  .gray-inf span{
    margin:initial
  }
}

.lightbox-content::after{
  content:'';
  background-image: url("../images/lightbox/lightbox-bg.webp");
  background-size: cover;
  position: absolute;
  background-position: center center;
  background-attachment: scroll;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
  z-index: 0;
}

#lightbox-step .lightbox-content::after{
  content:none
}

.status .lightbox-content::after{
  content:initial
}

.lightbox.active,
.no-bg-close.active .modal{
  display: flex;
  opacity: 1;
  visibility: visible;
}

.lightbox .closeBtn{
  background-color: initial;
  border: 0;
  position:absolute;
  right:0;
  z-index:1;
  top: 0;
  transition:all .2s
}

#entrance-inf.lightbox button.closeBtn{
  width: fit-content;
}

@media screen and (max-width:1200px){
  .lightbox button.closeBtn{
    width:28px;
    right:5px;
  }
}

.login-mobile-box .closeBtn{
  width: 99px;
  left:0;
  top: -57px;
  margin: 0 auto;
}

.lightbox.status .closeBtn{
  right:28px;
  top:18px;
}

.lightbox .closeBtn:hover:not(.status .content-close .closeBtn),
.step-box .step:hover{
  transform:scale(0.95)
}

.closeBtn img{
  pointer-events:none
}

.content-close{
  position: absolute;
  transition: all .2s;
  min-width: 161px;
  width: fit-content;
  top: initial;
  right: 0;
  left: 0;
  bottom: -10px;
  padding: 0.75rem 1rem;
  margin: 0 auto;
  background-color: #000;
  border: 3px solid transparent;
  border-radius: 19px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #94ff00, #ffff00);
  box-shadow: inset 0px 0px 5px #12ff00,0 8px 10px rgb(0 0 0 / 27%)
}

.status .lightbox-content p.closeBtn,
#go-to-schedule p{
  font-weight: 600;
  font-size: 1.375rem;
  background: linear-gradient(to right, #c1ff6c, #f0ff6d);
  background: -webkit-linear-gradient(to right,#c1ff6c, #f0ff6d);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  right: initial;
  top: initial;
}

.status .lightbox-content .content-close:hover{
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #959595, #fff);
  box-shadow: inset 0px 0px 8px rgb(18 255 0 / 0%),0 8px 10px rgb(0 0 0 / 27%);
  transform:scale(0.95)
}

.status .lightbox-content .content-close:hover p,
#go-to-schedule:hover p{
  background: linear-gradient(to right, #ffffff, #ffffff);
  background: -webkit-linear-gradient(to right,#ffffff, #ffffff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.lightbox-top-area{
  width: 100%;
  position:relative;
  margin-bottom: 10px;
}

.lightbox-top-area .title:not(.status .title){
  width: fit-content;
  height: 54px;
  font-size:1.375rem;
  position: relative;
  margin: 0 auto;
}

@media screen and (max-width:1200px){
  .lightbox-top-area .title:not(.status .title){
    height: 35px;
    font-size: 16px;
  }
}

.lightbox-top-area .title::after{
  position: absolute;
  top: 0;
  left:0
}

#lightbox-marquee .lightbox-top-area .title::after{
  content:url('../images/lightbox/news.webp');
}

#lightbox-schedule .lightbox-top-area .title::after{
  content:url('../images/lightbox/schedule.webp');
}

#lightbox-rule .lightbox-top-area .title::after{
  content:url('../images/lightbox/rule.webp');
}

@media (max-width: 1200px) {
  #lightbox-marquee .lightbox-top-area .title::after,
  #lightbox-schedule .lightbox-top-area .title::after,
  #lightbox-rule .lightbox-top-area .title::after{
    display:none;
  }
}

.lightbox-top-area .title p{
  background-color:var(--lightGreen);
  border-radius: 30px;
  /* line-height: 54px; */
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 500;
  position: relative;
  z-index: 1;
  box-shadow: 2px 0 20px #000;
  justify-content: center;
}

#system-exception .title p{
  background-color:#000;
  color:#fff
}

.status .title p{
  border-radius: 20px 20px 0 0;
  box-shadow:initial;
  line-height:60px;
  font-size:1.5rem;
  font-weight:600;
}

.lightbox-top-area .title p::before,
.lightbox-top-area .title p::after{
  content:url('../images/icon/black-star.webp');
  display:block;
  margin: 0 1rem;
}

.status .title p::before,
.status .title p::after{
  content:none
}

.history .lightbox-top-area .title p{
  background-color:initial;
  color:var(--lightGreen);
  font-size:1.5rem
}

.history.monthly .lightbox-top-area .title p{
  color:#deccff;
}

#lightbox-marquee .lightbox-content li{
  line-height: 27px;
  list-style-type: disc;
  list-style-position: inside;
  text-align: left;
  padding: 1.2rem 2.5rem;
  display: flex;
}

@media screen and (max-width:1200px){
  #lightbox-marquee .lightbox-content li{
    padding: 5px 0;
    line-height: 24px;
    margin: 0 0 4px 0;
  }

  .history .lightbox-top-area .title p{
    font-size:16px;
  }

  .lightbox-top-area .title p::before,
  .lightbox-top-area .title p::after{
    transform: scale(0.7);
    margin: 0 5px;
  }
}



#lightbox-marquee .disc{
  font-size:18px
}

#lightbox-marquee .lightbox-content li:nth-child(odd){
  background-color:rgb(202 202 202 / 42%)
}

#lightbox-marquee .lightbox-content li span{
  font-weight:600
}

#lightbox-marquee .swiper-pagination{
  top: initial;
  bottom: initial;
  margin: 1rem 0;
  font-weight: 500;
}

#lightbox-marquee .swiper-pagination span{
  width: 30px;
  height: 30px;
  line-height: 28px;
  margin: 0 2px !important;
}

.swiper-pagination-bullet{
  background: rgb(99 99 99 / 0%);
  opacity:1;
}

#banner .swiper-pagination-bullet{
  width:9px;
  height:9px;
  background: rgb(255 255 255 / 35%);
  opacity:1;
}

.swiper-pagination-bullet-active{
  background-color:var(--lightGreen);
  color: #000;
  border-radius: 35px;
  transform: scale(1);
  opacity: 1;
}

#banner .swiper-pagination-bullet-active{
  background-color:#f5f5f7;
}

.swiper-slide{
  padding: 0 10px;
}

@media screen and (max-width:1200px){
  #banner{
    display:none
  }
}

#banner .swiper-slide{
  padding:initial;
}

#banner .swiper-slide img{
  transition:all .3s
}

#banner .swiper-slide:hover img{
  transform:scale(1.02)
}

#banner .swiper{
  border-radius:1rem;
  overflow:hidden
}

#banner .swiper-pagination{
  width: fit-content;
  margin:0 auto;
  background:rgb(0 0 0 / 40%);
  left: 0;
  right: 0;
  padding: 5px;
  border-radius: 20px;
}

.bg-area{
  position:absolute;
  width:100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  z-index: 0;
}

.bg-area picture{
  position:absolute
}

.left-arrow{
  top: 54px;
  left: 0;
}

.right-arrow{
  width:127px;
  right:-1%;
  bottom:10%
}

#lightbox-marquee .right-arrow{
  opacity:.5;
}

@media screen and (max-width:1200px){
  .right-arrow,
  .left-arrow{
    display:none
  }
}

.circle01{
  left: 0;
  top: 0;
}

.circle02{
  bottom: 0;
  right: 0;
}

#lightbox-marquee .circle01{
  left:-18%;
  top:-35%;
  width:45%;
}

.history .circle01{
  left: -30%;
  top:-30%
}

#lightbox-marquee .circle02{
  bottom:-70%;
  width:55%;
}

.schedule-row,
.rule-row{
  width:100%;
  text-align: left;
  margin: 0 0 1.25rem 0;
}

.schedule-row .top3{
  max-width: 496px;
  width: 85%;
  order:1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin-top: 1rem;
}

.schedule-row .top3 li:nth-child(2){
  margin-bottom:12px
}

.schedule-row .item,
.rule-row .item{
  display: block;
  padding-left: 3.75rem;
  font-size: 1.25rem;
  line-height: 2.25rem;
  margin: 1.25rem 0 0 0;
}

@media screen and (max-width:1200px){
  .schedule-row .item,
  .rule-row .item{
    padding-left:14px;
    margin: 10px 0 0 0;
    font-size:14px;
    line-height:24px
  }

  .schedule-row .item p,
  .rule-row .item p{
    width:100%
  }
}

.schedule-row .item li,
.rule-row .item li{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  margin-bottom: 5px;
}

.schedule-row .item li p:first-child,
.rule-row .item li p:first-child{
  font-weight:600;
  margin-right:1.25rem
}

.schedule-row .title,
.rule-row .title{
  width: 100%;
  font-size:1.375rem;
  font-weight:600;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
}

@media (max-width: 1200px) {
  .schedule-row .title,
  .rule-row .title{
    font-size:15px;
    align-items: center;
  }

  .schedule-row .title p,
  .rule-row .title p:not(.rule-row .monthly .title p){
    background:#000;
    color: #fff;
    padding: 2px 12px;
    border-radius: 5px;
    font-size: 16px;
  }

  .title p span{
    display:none
  }

  .schedule-row .item li p:first-child,
  .rule-row .item li p:first-child{
    margin-right: 14px;
    font-size: 15px;
    font-weight: 800;
  }
}

.rule-row .title span{
  font-weight: initial;
  font-size: 1.25rem;
}

.schedule-row > .title::before,
.rule-row > .title::before{
  content:url('../images/icon/rule-star.webp');
  margin-right:5px
}

@media (max-width: 1200px) {
  .schedule-row > .title::before,
  .rule-row > .title::before{
    margin-right:-1rem;
    z-index:1
  }

  .rule-row .title span{
    font-size:14px;
    margin-left: 8px;
  }
}

.schedule-row .item span{
  position:relative
}

.schedule-row .item span::after{
  content:'';
  position:absolute;
  height:55%;
  width:100%;
  background-color:#ffd2f5;
  left:0;
  bottom:0;
  z-index:-1
}

.schedule-row .weekly,
.schedule-row .monthly{
  display:flex;
  width: calc( 100% - 5rem );
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  margin: 1.5rem auto;
  border: 1px solid #000;
  border-radius: 1.2rem;
  overflow: hidden;
  position: relative;
  background: linear-gradient(to top, #c3fd2d -20%, #ffffff 87%);
}

@media (max-width: 1200px) {
  .schedule-row .weekly,
  .schedule-row .monthly{
    width:100%
  }
}

.schedule-row .monthly{
  background: linear-gradient(to top, #cdafff 10%, #ffffff 90%);
  margin: 1.8rem auto 0 auto;
}

.schedule-row .weekly::after,
.schedule-row .monthly::after{
  content:'';
  position: absolute;
  background-image:url('../images/lightbox/rule-bg.webp');
  background-size: cover;
  background-size: 408px auto;
  width: 100%;
  height: 50%;
  bottom: -5px;
  z-index: 0;
  mix-blend-mode: overlay;
  opacity:.5
}

.schedule-row .monthly::after{
  opacity:.2
}

.schedule-row .weekly .title,
.schedule-row .monthly .title{
  justify-content:center;
  background-color: #000;
  color:var(--lightGreen);
  border-radius:1rem 1rem 0 0;
  line-height:2.8rem;
}

@media (max-width: 1200px) {
  .schedule-row .weekly .title,
  .schedule-row .monthly .title{
    line-height:25px;
  }
}

.schedule-row .monthly .title{
  color:#ddcaff;
}

.ranking-award{
  max-width: 496px;
  width: 92%;
  display:flex;
  border-radius: 1rem;
  background-color: #fff;
  overflow: hidden;
  margin: 10px 0 1.5rem 0;
  z-index: 1;
  order: 2;
  box-shadow: 4px 4px 0px #000;
}

.ranking-award ul li{
  display:flex;
}

.ranking-award ul li p{
  width: 46%;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2.25rem;
  display:flex;
  align-items:center;
  justify-content: center;
}

.ranking-award ul li p:first-child{
  width: 54%;
}

@media screen and (max-width:1200px){
  .ranking-award ul li p{
    font-size:14px
  }

  .ranking-award ul li p{
    line-height: 24px;
  }

  .ranking-award ul li p{
    width: 31%;
  }

  .ranking-award ul li p:first-child{
    width: 69%;
  }
}

.ranking-award ul li:not(:first-child):not(:last-child){
  border-bottom: 1px solid #ccc;
}

.weekly .ranking-award ul li:first-child{
  background-color:#c1fd01;
}

.monthly .ranking-award ul li:first-child{
  background-color:var(--lightboxPurple);
  color:#fff;
}

.weekly .ranking-award ul li:first-child p:not(:first-child){
  color:initial
}

.monthly .ranking-award ul li:first-child p:not(:first-child){
  color:#fff
}

.ranking-award ul li p:not(:first-child){
  color:var(--lightRed);
}

.rule-row .weekly,
.rule-row .monthly{
  width: 90%;
  text-align:center;
  justify-content:center;
  margin: 0 auto 2.5rem auto;
}

@media (max-width: 1200px) {
  .rule-row .weekly,
  .rule-row .monthly{
    width:100%;
    margin: 0 auto 30px auto;
  }
}

.rule-row .monthly{
  margin: 0 auto;
}

.rule-row .weekly .title,
.rule-row .monthly .title{
  justify-content:center;
  font-size: 1.25rem;
  margin-bottom: 0.875rem;
}

@media (max-width: 1200px) {
  .rule-row .weekly .title,
  .rule-row .monthly .title{
    font-size: 14px;
    margin: 10px 0;
  }
}

.rule-row .weekly .title span,
.rule-row .monthly .title span{
  color:var(--lightRed);
  font-weight:600;
  margin-left: 8px;
}

.rule-row .form{
  font-weight:600;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #000;
}

.method-title{
  line-height:2.87rem;
  font-size: 1.375rem;
  display: flex;
  justify-content: center;
  color:#fff;
  background-color:#000;
  font-weight: 600;
}

.method-box{
  padding: 5px 0 0 0px;
}

.method-box picture{
  display:flex;
  align-items:center;
  padding-top: 2px;
  margin: 0 5px;
}

.weekly .method-title span{
  color:var(--lightGreen)
}

.monthly .method-title span{
  color:#c1abff
}

.method-box li:first-child{
  width: calc( 100% - 10px );
  display:flex;
  line-height: 3rem;
  justify-content:center;
  font-size: 1.375rem;
  background-color: rgb(from var(--lightboxGreen) r g b / 60%);
  border-radius: 5px;
  box-shadow: inset 0 3px 5px rgb(0 0 0 / 50%);
  align-items: center;
  margin: 0 auto;
}

.monthly .method-box li:first-child{
  background-color: rgb(from var(--lightboxbgPurple) r g b / 80%);
}

.calc-rules{
  width: 95%;
  display: flex;
  margin: 12px auto;
  font-weight: 700;
  justify-content: center;
  flex-wrap: wrap;
  font-size:1.25rem;
}

.monthly .calc-rules{
  width:100%
}

.calc-rules > div:first-child{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.calc-rules > div:first-child > div{
  display: grid;
  align-items: center;
  grid-auto-rows: 46px;
  gap: 8px;
}

.calc-rules > div:first-child > div:first-child{
  grid-template-columns: 1fr auto;
}

.calc-rules > div:first-child > div:last-child{
  grid-template-columns: auto 1fr auto;
}

.monthly .calc-rules > div:first-child{
  gap: 0;
}

.monthly .calc-rules > div > div{
  grid-auto-rows: 46px;
  gap: 0;
}

.monthly .calc-rules > div > div:first-child{
  grid-template-columns: 4fr 85px 2fr 50px;
}

.monthly .calc-rules > div > div:last-child{
  grid-template-columns: repeat(3, auto);
  gap: 5px;
}

.calc-rules span{
  width: 100%;
  height: 100%;
  align-content: center;
  border-radius: 5px;
  padding: 0px 20px;
}

@media screen and (max-width:1200px){

  .calc-rules > div:first-child{
    width:calc( 100% - 10px );
  }

  .method-title{
    font-size:15px;
    line-height:26px;
  }

  .method-box li:first-child{
    font-size:15px;
    line-height: 35px;
  }

  .calc-rules{
    font-size: 14px;
    width: 100%;
    margin: 12px 0 0px 0;
    row-gap: 11px;
  }

  .method-box picture{
    height: 29px;
    width: auto;
  }

  .method-box picture img{
    width:auto;
    height:100%
  }

  .monthly .calc-rules > div:first-child{
    width: calc( 100% - 10px );
    row-gap: 8px;
  }

  .calc-rules span{
    padding: 0px 5px;
  }

  .monthly .calc-rules > div > div,
  .calc-rules > div:first-child > div{
    grid-auto-rows: 30px;
  }

  .monthly .calc-rules > div > div:last-child p{
    text-align: right;
  }

  .monthly .calc-rules > div > div:last-child p:last-child{
    text-align: left;
  }

  .monthly .calc-rules > div > div:first-child{
    grid-template-columns: 4fr 50px 2fr 24px;
  }

}

@media screen and (max-width:767px){
  .monthly .calc-rules > div > div:last-child{
    grid-row:2/3;
    gap: 10px;
  }

  .calc-rules{
    padding:initial
  }
}

@media screen and (max-width:330px){
  .monthly .calc-rules > div > div{
    gap:0
  }
}


.weekly .calc-rules span{
  background:var(--lightGreen);
}

.monthly .calc-rules span{
  background:var(--lightboxPurple);
  color:#fff;
  padding: 0 1rem;
  position:relative
}

@media screen and (max-width:330px){
  .monthly .calc-rules span{
    padding: 0 6px;
  }
}

.valid-bet::before{
  content:url(../images/lightbox/pop.webp);
  position:absolute;
  right:-1rem;
  top:-80%;
  animation: pop .8s infinite ease-in-out alternate;
  transition:all .2s
}

@media screen and (max-width:1200px){
  .valid-bet::before{
    content:url(../images/lightbox/pop-mobile.webp);
    top: -30px;
    right: initial;
    left: -13%;
  }
}

.calc-rules .symbol{
  font-size:2.3rem;
  margin-right:10px
}

.calc-rules .result{
  color:var(--lightRed);
  font-size: 1.375rem;
}

.calc-rules .result-box{
  display:flex;
  align-items:center;
  height: 46px;
  margin-left: 10px;
  line-height: 45px;
}

.monthly .calc-rules .result-box{
  margin-left:5px
}

@media screen and (max-width:1200px){
  .calc-rules .result-box{
    width: 100%;
    justify-content: center;
    background-color:#ffe9ee;
    height: 36px;
    margin: initial;
  }

  .calc-rules .symbol{
    font-size:28px;
  }

  .calc-rules .result{
    font-size:15px;
  }

  .monthly .calc-rules .result-box{
    margin-left:initial
  }
}

button.learn-more{
  border:0px;
  background-color:initial;
  transition:all .2s;
  margin: 10px 0 5px 0;
}

.learn-more p{
  background-color:#000;
  color:#fff;
  border-radius:15px;
  padding:0 20px;
  font-size:14px;
  line-height: 20px;
  margin-bottom: 5px;
}

.learn-more::after{
  content:url('../images/icon/more-arrow.webp');
  display: flex;
  justify-content:center;
  transform: translate(0px,0px);
  animation: learn-more .5s infinite ease-in-out alternate;
  transition:all .2s
}

.learn-more:hover{
  transform: scale(.95);
}

button.learn-more.show{
  opacity:.5
}

button.learn-more.show::after{
  transform:rotate(180deg)
}

.form-detail{
  display:none;
  font-weight: 600;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #000;
  margin-bottom: 1rem;
}

.weekly-game,
.monthly-game{
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #000;
}

.form-detail ul{
  display:grid;
  grid-template-columns: 116px repeat(5, auto);
  align-items:center;
}

@media screen and (max-width:1200px){

}

.form-detail ul:nth-child(2){
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.form-detail ul:nth-child(3){
  grid-auto-rows: 60px;
  font-size: 1.125rem;
}

.form-detail ul li:first-child{
  width: 100%;
  height: 100%;
  background-color: var(--lightboxGreen);
  border-right: 1px solid;
}

.monthly .form-detail ul li:first-child{
  background-color: var(--lightboxbgPurple);
}

.form-detail ul li{
  align-content: center;
  height: 100%;
}

.form-row-1{
  font-size: 1.125rem;
  grid-auto-rows: minmax(68px, auto);
}

.form-row-1 li:first-child,
.form-row-2 li:first-child,
.form-row-3 li:first-child{
  grid-column:1/2;
  font-size: 1.125rem;
}

.form-row-1 li:nth-child(2){
  grid-column:2/3;
  font-weight: 400;
}

.monthly .form-row-1 li:nth-child(2) p{
  height:50%;
  align-content: center;
}

.monthly .form-row-1 li:nth-child(2) p:first-child{
  border-bottom:1px solid
}

.form-row-1 li:nth-child(3){
  grid-column:3/4;
  border-left: 1px solid;
  border-right: 1px solid;
  background-color: var(--lightboxGreen);
}

.form-row-1 li:nth-child(4){
  grid-column: 4/6;
  font-weight: 400;
}

.monthly .form-row-1 li:nth-child(3){
  background-color: var(--lightboxbgPurple);
}

.form-row-2{
  grid-auto-rows:minmax(170px,auto)
}

.form-row-2 li:first-child span{
  background-color:#000;
  color:#fff;
  width:35px;
  height:35px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 90px;
}

.form-row-2 li:last-child,
.form-row-3 li:last-child{
  grid-column:2/7;
  font-weight: 400;
}

.form-row-2 li:nth-child(2) > p{
  font-size:1.125rem;
}

.monthly .form-row-2 li:nth-child(2) > p{
  margin: 0 0 1.125rem 0;
}

.form-row-2 li:nth-child(2) > span{
  margin: 0.125rem 0 1rem 0;
  display: block;
  color:#f70034
}

@media screen and (max-width:1200px){
  .form-detail ul li:first-child,
  .monthly .form-detail ul li:first-child,
  .form-detail ul li{
    font-size:13px
  }

  .form-row-2 li:nth-child(2) > p{
    font-size:13px;
    margin-bottom: 0px;
  }

  .monthly .form-row-2 li:nth-child(2) > p,
  .form-row-2 li:nth-child(2) > span{
    font-size:13px;
    margin-bottom: 10px;
  }


  .form-detail ul,
  .form-detail ul:nth-child(3){
    grid-auto-rows: minmax(48px, auto);
    grid-template-columns: 75px repeat(5, auto);
  }

  .form-row-1 li:nth-child(2),
  .form-row-1 li:nth-child(4){
    grid-column:2/7
  }

  .form-row-1 li:nth-child(1),
  .form-row-1 li:nth-child(2){
    border-bottom:1px solid
  }

  .form-row-1 li:nth-child(3){
    grid-column: 1/2;
    border-left:0
  }

  .form-row-2 li:last-child{
    padding:10px
  }

  .form-row-2 li:first-child span{
    width:20px;
    height:20px
  }
}

.weekly-bonus div{
  width: 75%;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(4,1fr);
  margin: 0 auto;
  grid-auto-rows: 36px;
}

.weekly-bonus div:last-child{
  border-bottom:1px solid ;
}

.weekly-bonus div:first-child{
  background-color:#d5d5d5
}

.weekly-bonus div p{
  width:100%;
  height:100%;
  border-top:1px solid;
  border-left:1px solid;
  align-content: center;
}

.weekly-bonus div p:first-child{
  font-weight:600
}

.weekly-bonus div p:last-child{
  border-right:1px solid
}

.weekly-bonus div span{
  font-size:12px
}

.designated{
  font-size:1.125rem
}

.weekly .designated{
  background:var(--lightboxGreen);
  padding:1rem 0
}

.monthly .designated{
  background:var(--lightboxbgPurple);
  padding:2rem 1rem
}

@media screen and (max-width:1200px){
  .designated{
    font-size:14px;
  }

  .monthly .designated{
    padding: 18px 5px;
  }

  .weekly-bonus div{
    width:100%;
    grid-auto-rows: auto;
  }

  .weekly-bonus div span{
    display:block
  }
}

.rule-row .monthly .title p{
  width:100%;
  line-height: 2rem;
}

@media screen and (max-width:1200px){
  .rule-row .monthly .title p{
    line-height: 24px;
  }
}

.monthly .designated div{
  background-color:#fff;
  border-radius:1rem;
  padding: 1rem;
  position:relative
}

.monthly .designated div:not(:last-child){
  margin-bottom: 2rem;
}

.monthly .designated div > p{
  padding: 0 4rem;
  font-size: 1rem;
}

@media screen and (max-width:1200px){
  .monthly .designated div > p{
    padding: 0 1rem;
    font-size:13px;
    line-height:20px
  }
}

.monthly .designated div span{
  position:absolute;
  margin:0 auto;
  left: 0;
  right: 0;
  top: -1rem;
  font-weight: 600;
  font-size: 1.25rem;
}

.monthly .designated div span p{
  position:relative;
  z-index:1;
}

@media screen and (max-width:1200px){
  .monthly .designated div span{
    font-size:14px;
    top: -10px;
  }
}

.monthly .designated div span p::before{
  content: attr(data-storke);
  position: absolute;
  color: transparent;
  -webkit-text-stroke: 3px #ffffff;
  z-index: -1;
}

.history .lightbox-content{
  padding:initial;
}

.total-bonus{
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:1;
  position: relative;
  background-color: #ceff29;
  overflow: hidden;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.history.weekly .total-bonus{
  background-image: url(../images/lightbox/green-coin.webp);
  background-size: cover;
}

.history.monthly .total-bonus{
  background-image: url(../images/lightbox/purple-coin.webp);
  background-color: #7a41d7;
  color: #fff;
}

.total-bonus > div{
  max-width: 364px;
  width: 90%;
  position:relative;
  margin: 0 auto;
  flex-wrap: wrap;
  border-bottom: 1px solid;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -5px;
}

.total-bonus > div > div{
  display:flex;
  align-items: flex-end;
  margin-bottom: 8px;
  margin-left: -8px;
}

.total-bonus div span{
  font-size:1.125rem;
  display: flex;
  align-items: baseline;
  margin-left: 4px;
  font-weight: 600;
  letter-spacing: 1px;
}

.weekly .total-bonus div div::before{
  content:url('../images/lightbox/week-bonus.webp');
}

.monthly .total-bonus div div::before{
  content:url('../images/lightbox/month-bonus.webp')
}

@media screen and (max-width:1200px){
  .total-bonus div span{
    font-size:14px;
    letter-spacing:initial
  }

  .weekly .total-bonus div div::before,
  .monthly .total-bonus div div::before{
    transform:scale(0.8)
  }
}

@media screen and (max-width:330px){
  .total-bonus div span{
    margin-left: -2px;
  }
}

.history .lightbox-content .content{
  height: calc( 100% - 9rem );
  margin-top: 1.5rem;
  padding-right: 10px;
  align-items: flex-start;
  align-content: flex-start;
}

.total-bonus p{
  font-size:1.875rem;
  font-weight:600;
  margin-bottom: 4px;
  letter-spacing: 2px;
}

@media screen and (max-width:1200px){
  .total-bonus p{
    font-size:25px;
    letter-spacing: initial
  }

  .history .lightbox-content .content{
    padding-right: 2px;
    width: 95%;
    margin-top: 12px;
    height: calc(100% - 118px);
  }
}

@media screen and (max-width:330px){
  .total-bonus p{
    font-size:24px;
  }
}

.history .list-item{
  width:100%;
  height: fit-content;
  display: block;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

.history .list-item ul{
  width: 100%;
  display: grid;
  grid-auto-rows: minmax(60px,auto);
  align-items: center;
}

.history .list-item ul:first-child{
  grid-template-columns: repeat(12, 1fr);
}

.history .list-item ul:first-child::after{
  content:url('../images/icon/history-arrow.webp');
  grid-column: 12 / 13;
  transition:all .2s;
  justify-self: center;
}

.history .list-item ul.show:first-child::after{
  transform:rotate(180deg)
}

@media screen and (max-width:1200px){
  .history .list-item ul:first-child::after{
    transform:scale(0.8) translateX(-2px)
  }

  .history .list-item ul.show:first-child::after{
    transform:scale(0.8)rotate(180deg) translateX(2px)
  }
}

.history ul.list-row-2{
  display: none;
  height: fit-content;
}

.history ul.list-row-2 li{
  width:100%;
  height: 29px;
  line-height: 29px;
  display:flex;
  justify-content: center;
}

.history ul.list-row-2 li p{
  width:25%
}

.list-row-1{
  grid-template-columns:repeat(2,auto)
}

.list-row-1 .red-inf{
  font-size:1.375rem;
  font-weight:700;
  color:var(--lightRed);
  align-items: baseline;
  display: flex;
  justify-content: center;
}

.red-inf.null-value{
  color:initial
}

.list-row-1 .red-inf::before{
  content:'总奖金';
  color:initial;
  font-size:1rem;
  font-weight:initial;
  justify-self: flex-start;
  margin-right: 1rem;
}

@media screen and (max-width:1200px){
  .list-row-1 .red-inf{
    font-size:20px;
  }

  .list-row-1 .red-inf::before{
    font-size:12px;
    margin-right:5px;
  }

  .history ul.list-row-2{
    font-size:13px
  }
}

.list-row-1 li:first-child{
  font-weight:700;
  font-size:1.25rem;
  grid-column: 1/7;
}

.list-row-1 li:last-child{
  grid-column: 8/11;
  display: grid;
  grid-template-columns: 65px 3fr;
  justify-items: self-start;
}

@media screen and (max-width:1200px){
  .list-row-1 li:first-child{
    grid-column: 1/5;
    font-size:18px
  }

  .list-row-1 li:last-child{
    grid-column: 8/11;
    justify-self:flex-start;
    grid-template-columns: 45px 3fr;
  }
}

@media screen and (max-width:410px){
  .list-row-1 li:last-child{
    grid-column: 7/10;
  }
}

@media screen and (max-width:330px){
  .list-row-1 li:last-child{
    grid-column: 6/10;
  }
}


.list-row-2{
  display:none
}

.list-title{
  background-color:#000;
  font-weight: 600;
}

.weekly .list-title{
  color:var(--lightGreen)
}

.monthly .list-title{
  color:#d8c0ff
}

.history.monthly ul.list-row-2 li{
  display:grid;
  grid-template-columns: repeat(6,1fr);
}

.history ul.list-row-2 li:nth-child(odd):not(:first-child){
  background-color:var(--lightboxGreen)
}

.history.monthly ul.list-row-2 li:not(:first-child){
  background-color:#ede3ff
}

.history.monthly ul.list-row-2 li p:first-child{
  width: auto;
  grid-column: 1/4;
}

.history.monthly ul.list-row-2 li p:last-child{
  width:fit-content;
  grid-column: 4/6;
  justify-self: center;
}

.login-vs{
  max-width: 618px;
  width: 95%;
  max-height: 648px;
  height: auto;
  background-image:url('../images/icon/color-bubble.webp');
  background-repeat:repeat-x;
  animation: animatedBackground 10s linear infinite;
  position:relative;
  display: grid;
  grid-template-columns: repeat(9,1fr);
  grid-template-rows: repeat(9, minmax(0, 1fr));
  z-index: 0;
  inset: 0;
  align-items: self-start;
  margin: 0 auto 1.875rem auto;
  aspect-ratio: 1 / 1
}

.login-vs::before,
.login-vs::after{
  content:'';
  height:60px;
  background:linear-gradient(to bottom, #ffffff 60%, #ffffff00);
  grid-column: 1/10;
  grid-row: 1/3;
}

.login-vs::after{
  background:linear-gradient(to top, #ffffff 60%, #ffffff00);
  grid-row: 9/10;
  align-self: end;
}

.e-ip{
  grid-column: 3/7;
  grid-row: 2/8;
  z-index: 5;
  transform: translate(-28px, -6px);
  -webkit-animation: slide-in-elliptic-bottom-fwd 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-elliptic-bottom-fwd 3s cubic-bezier(0.250, 0.460, 0.450, 0.940)both;
}

.login-vs > *{
  object-fit: contain;
  height: 100%;
}

.float-item {
  --base-transform: translate(0, 0);
  --float-distance: 5px;
  animation: float 2s ease-in-out infinite;
}

.login-vs a{
  z-index: 6;
  grid-row: 6/10;
  grid-column: 1/10;
  display: block;
}

.trophy{
  max-width: 316px;
  grid-column: 4/9;
  grid-row: 2/7;
  transform: translate(32px, -1px);
  z-index: 2;
  -webkit-animation: slide-in-elliptic-bottom-fwd 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-elliptic-bottom-fwd 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@media screen and (max-width:767px){
  .trophy{
    transform:translateX(5%)
  }
}

.gift{
  max-width: 100px;
  grid-column: 2/4;
  grid-row: 1/3;
  z-index: 2;
  align-items: center;
}

@media screen and (max-width:767px){
  .gift{
    transform:translateX(-20px)
  }
}

.shark{
  grid-column: 1/3;
  grid-row: 5/7;
  z-index: 4;
  --base-transform: translate(12px, -40px);
  --float-distance: -3px;
}

.tiger{
  grid-column: 8/10;
  grid-row: 3/6;
  z-index: 5;
  --base-transform: translate(-12px, -13px);
  --float-distance: -3px;
}

.watermelon{
  max-width: 60px;
  grid-column:1/2;
  grid-row: 8/9;
}

.logo-3d{
  max-width: 190px;
  grid-column: 3/6;
  grid-row: 1/3;
  z-index: 1;
  --base-transform: translate(0px, 0px);
  --float-distance: 2px;
}

.index-bg{
  grid-column: 1/10;
  grid-row: 1/10;
  align-items: center;
  z-index: 0;
  transform: translate(-2px, -8px);
}

.coins{
  grid-column: 1/11;
  grid-row: 1/11;
  z-index: 3;
  --base-transform: translate(13px, -9px);
  --float-distance: -3px;
}

@media screen and (max-width:767px){
  .coins{
    --base-transform: translate(0, 0) scale(1.1);
  }
}

.coins02{
  max-width: 61px;
  grid-column: 7 / 9;
  grid-row: 3/ 5;
  z-index: 5;
  animation:flip-in-diag-2-tl ease-out 1s infinite;
}

@media screen and (max-width:767px){
  .coins02{
    grid-row: 4/ 5;
  }
}

.coins03{
  max-width:83px;
  grid-column: 6 /8;
  grid-row: 2/ 3;
  z-index: 5;
  animation: flip-in-diag-1-tr ease-out 1s infinite;
}

.cherry{
  grid-column: 8/9;
  grid-row: 6/7;
  z-index: 5;
  transform: translate(-21px, 18px);
}

.color-bubble2{
  max-width: 247px;
  grid-column: 6/10;
  grid-row: 1/7;
  z-index: 5;
  justify-self: flex-end;
  transform: translate(-17px, -8px);
}

.login-vs .login-btn {
  width:100%;
  height: 42px;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(8,1fr);
  grid-template-rows: repeat(2,1fr);
}

.login-h{
  opacity: 0;
  z-index: 2;
  background-image: linear-gradient(90deg, #b1ff29 0%,#fdfe44 20%, #b1ff29 100%);
}

.login-n{
  background: rgb(0 0 0 / 90%);
  z-index:0;
}

.login-vs .login-btn div{
  max-width: 316px;
  display:flex;
  padding: 8px;
  justify-content: center;
  border-radius: 90px;
  grid-column: 3/7;
  grid-row: 1/2;
  z-index: 1;
}

.login-vs .login-btn div img{
  max-width: 165px;
  width: 80%;
}

.login-vs a:hover .login-n{
  opacity:0
}

.login-vs a:hover .login-h{
  opacity:1;
}

@media screen and (max-width:1200px){
  .login-n{
    display:none
  }

  .login-h{
    opacity:1
  }
}


.logo-mask{
  position: relative;
  mask-image: url(../images/icon/ranking-logo.webp);
  -webkit-mask-size: cover;
  mask-size: cover;
  margin-bottom: 5px;
  transition:all .2s;
  /* -webkit-animation: slide-in-elliptic-bottom-fwd 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-in-elliptic-bottom-fwd 3s cubic-bezier(0.250, 0.460, 0.450, 0.940)both; */
}

.login-vs a:hover .logo-mask{
  transform:scale(1.05);
  margin-bottom: 10px;
}

.logo-mask .shan{
  -webkit-animation:changeImg 3s ease 0s;
  -o-animation:changeImg 3s ease 0s;
  animation:changeImg 2s cubic-bezier(0.53, -0.13, 1, 0.15) 0s infinite ;
  background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .8) 70%, rgba(255, 255, 255, 0) 100%);
}

.login-vs div.login-arrow-bg{
  max-width: 100%;
  z-index:0;
  grid-column: 1/9;
  grid-row: 1/3;
}

.login-vs div.login-arrow-bg img{
  max-width: fit-content;
  width:100%
}

.login-vs .arrow{
  max-width: 105px;
  width: fit-content;
  grid-column: 6/8;
  grid-row: 1/3;
  z-index:1;
  transform: translate(11px, 7px);
  position: relative;
  transition:all .2s
}

@media screen and (max-width:1200px){
  .login-vs .arrow{
    max-width:80px;
    transform: translate(30px, 7px);
  }
}

.arrow-h{
  display:none
}

.login-vs a:hover .arrow-n{
  opacity:0;
  display:none
}

.login-vs a:hover .arrow-h{
  opacity:1;
  display:block
}

.login-vs a:hover .arrow{
  transform:rotate(-30deg)  translate(15px, 7px);
}

@media screen and (max-width:1200px){
  .arrow-h{
    opacity: 1;
    display:block
  }

  .arrow-n{
    opacity:0;
    display:none
  }
}


.buttom-nav-wrap{
  width:100dvw;
  height: 66px;
  position:fixed;
  bottom:6px;
  background-color: #000;
  z-index: 3;
  color: #fff;
  display:none;
  justify-content: center;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 -2px 5px rgb(0 0 0 / 43%);
}

@media screen and (max-width:1200px){
  .buttom-nav-wrap{
    display:flex;
  }
}

.buttom-nav-wrap::after{
  content:'';
  width:100%;
  height: 6px;
  display: block;
  background: var(--green-gradient);
  position: fixed;
  bottom: 0;
}

.buttom-nav-wrap > *{
  width: 25%;
  cursor:pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.member-entrance{
  display: flex;
  flex-wrap: wrap;
  transform: translateY(-35px);
  justify-content: center;
  text-align: center;
  filter: drop-shadow(0px -1px 2px rgba(0, 0, 0, 0.43));
  z-index: 1;
}

.member-entrance p{
  width:100%
}

.member-entrance img{
  width:75px;
}

.member-mobile.lightbox{
  height: calc(100dvh - 60px);
  align-items: flex-end;
  z-index: 2;
  display:none
}

@media screen and (max-width:1200px){
  .member-mobile.lightbox.active{
    display:flex
  }
}

.login-mobile-box{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background:linear-gradient(-150deg , #c5fc66 -10%, #f5f5f7 70%);
  padding: 2rem 0;
  border-radius: 15px 15px 0 0;
  -webkit-animation: swing-in-bottom-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
  animation: swing-in-bottom-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
  position:relative
}

#entrance-inf .login-mobile-box{
  padding: 24px 0 36px 0;
}

@media screen and (max-width:3767px){
  #entrance-inf .login-mobile-box{
    padding: 10px 0 36px 0;
  }
}

.entrance-inf-bg{
  width: 100%;
  height: 100%;
  position:absolute;
  right: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
  display: grid;
  justify-content: center;
  border-radius: 15px 15px 0 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
}


.entrance-inf-bg .login-bg-m{
  grid-column: 2/7;
  grid-row: 1/4;
  transform: scale(1.2);
}

.entrance-inf-bg .left-icon{
  grid-column: 1/2;
  grid-row: 3/5;
  /* transform: scale(1.2); */
}

.entrance-inf-bg .right-icon{
  grid-column: 6/7;
  grid-row: 2/4;
}

.member-mobile.lightbox .content{
  /* width:98%; */
  max-height: calc( 100dvh - 300px);
  overflow:hidden scroll;
  margin-bottom: 18px;
  border-radius: 15px;
  z-index: 1;
}

@media screen and (max-width:320px){
  .member-mobile.lightbox .content{
    max-height: calc( 100dvh - 260px);
  }
}

.member-mobile.lightbox > div > p{
  width:100%;
  text-align: center;
  margin-bottom: 1rem;
}

.login-mobile-box.month,
.login-mobile-box.week{
  padding: 10px 5px 10px 5px;
  background:var( --lightGray);
}

.login-mobile{
  width: max-content;
  background-color: #95959526;
  padding: 12px 2rem;
  display: grid;
  row-gap: 10px;
  border-radius: 1rem;
  margin: 22px auto 0 auto;
}

#entrance-inf .content > p{
  width:100%;
  text-align:center;
  color: #6d6d6d;
  font-weight: 600;
  margin-top: 10px;
}

.login-mobile a{
  width: 260px;
  background-color: #fff;
  color: #000;
  padding: 13px;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  margin: 0 auto;
}

.login-mobile a.login-btn{
  background: linear-gradient(90deg, #b1ff29 0%,#fdfe44 15%, #b1ff29 60%);
  background-position: left right;
  animation: slidebg 2s linear infinite alternate;
}

.login-mobile a p{
  margin-left:5px;
  font-size:17px;
}