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

.exampleBtn{
    width: 135px;
    position:fixed;
    left:5px;
    bottom: 42px;
    display:block;
    z-index: 2;
}

.exampleBtn button{
    width:100%;
    height: 35px;
    margin: 0 0 5px 0;
    font-size:15px;
    background-color:#323232;
    border:0px;
    color:#c8c8c8;
    border-radius: 5px;
}



/* ----- MAIN ----- */

.rank{
    padding-top: 170px;
}

.content{
    width: 100%;
}

.box_1920{
    width:100%;
    background-color: #f7f7f7;
    padding: 10px 0;
    margin: 10px auto;
}

.box_1800{
    max-width: 1880px;
    width: 95%;
    padding: 10px 0;
    margin: 10px auto;
}

.box_1280{
    max-width: 1280px;
    width: 95%;
    margin: 10px auto;
    padding: 10px 0;
}

.box_1440{
    max-width: 1440px;
    width: 100%;
    margin: 20px auto;
}

.box_1125{
    max-width: 1125px;
    width: 95%;
    margin: 20px auto;
}

.single,.three_item,.two_item{
    margin: 0 10px;
    padding: 15px;
}

.single{
    width: calc( 100% - 20px );
    min-height: 50px;
    background-color: #ccc;
}

.three_item{
    width: calc( 100% / 3 - 20px );
    height: 250px;
    background-color: #ccc;
}

.two_item{
    width: calc( 100% / 2 - 20px );
    height: 250px;
    background-color: #ccc;
}

.title{
    width:100%
}

.title_box{
    width: 100%;
    position: relative;
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

.floatBox{
    position:absolute;
    right: -25px;
}

.float_ps{
    position: relative;
    display: flex;
    align-items: center;
    z-index: 8;
    top: -2px;
}

.data_area .float_ps{
    left: 4px;
}

.tit05 .float_ps{
    left: -3px;
    top: -5px;
}

.float_ps .icon{
    width: 18px;
    height: 18px;
    font-size: 14px;
    border-radius: 90px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculate_V .float_ps{
    margin:inherit;
    top: -9px;
    left: -8px;
}

.calDataTitle .float_ps{
     top: -5px;
}

.cal_title .float_ps{
    /* top: 10px; */
    left: 0px;
}

.float_txt,
.TagItem{
    width: 154px;
    position:absolute;
    top: -35px;
    background-color: rgb(76 76 76 / 90%);
    padding: 5px 10px;
    visibility: hidden;
    left: 20px;
    font-size: 14px;
    z-index: 11;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 22px;
    text-align: center;
}

.rate_cal .float_txt{
    width: 300px;
    text-align: left;
    top: -120px;
}

.TagItem{
    width: 170px;
    left:inherit;
    right:0;
    top:25px;
    text-align:left;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.strategy_winner .winner:nth-child(3) .TagItem,
.topThree .winner:nth-child(3) .TagItem{
    right: 0;
    left: inherit;
}

.strategy_winner .winner:nth-child(1) .TagItem,
.topThree .winner:nth-child(1) .TagItem{
    right: inherit;
    left: 0;
}

.calDataTitle .float_txt{
    width: 260px;
}

.float_ps:hover .float_txt,
.medal:hover .TagItem{
    visibility:visible
}

.hidden{
    visibility:hidden;
}

.body_hide{
    overflow-y:hidden;
    height: auto;
    overscroll-behavior: none;
}

.member_area{
    width: 100%;
    margin: 0 auto;
    justify-content: flex-start;
    position: relative;
    background-color:var(--lightGray);
}

.month .member_area,
.week .member_area{
    background-color: var(--mainRed);
    color:#fff;
    padding: 0 30px;
}

.week .member_area{
    background-color: var(--mainBlue);
}

.pinArea{
    width:100%;
    justify-content: flex-start;
    margin: 10px 0 2px 0;
}

.member_area ul{
    display:flex;
    flex-wrap:wrap;
    align-items: center;
}

.pinArea h1{
    font-size:24px;
    letter-spacing: 1px;
}

.pinBtn{
    width: 26px;
    height: 26px;
    cursor:pointer;
    margin-right: 10px;
}

.pinBtn li{
    display:contents
}

.rankInfData{
    width:100%;
    margin: 12px 0;
}

.rankInfData ul{
    width:33.333%;
    line-height: 26px;
}

.rankInfData ul li:nth-child(2){
    width:70%;
    height: 28px;
    background-color: #ff5362;
    border-radius:90px;
    margin-left: 5px;
}

.week .rankInfData ul li:nth-child(2){
    background-color: var(--middleBlue);
}

.historyBtn{
    width: 140px;
    height: 24px;
    position:absolute;
    right: 30px;
    top: 15px;
    border-radius: 11px;
    border: 0;
    font-size:16px;
    color: var(--mainRed);
    background-color: #fff;
    transition:all .3s
}

.week .historyBtn{
    color: var(--mainBlue);
}

.historyBtn img{
    width: 24px;
    filter: invert(22%) sepia(78%) saturate(5023%) hue-rotate(342deg) brightness(80%) contrast(135%);
}

.week .historyBtn img{
    width: 24px;
    filter: invert(17%) sepia(99%) saturate(4890%) hue-rotate(194deg) brightness(96%) contrast(101%);
}

.historyBtn:hover{
    transform:scale(0.95,0.95)
}

.strategy_box{
    width: 100%;
    margin: 0 0 20px 0;
    background-color: rgba(var(--hideBGC),1);
    padding: 5px 30px 15px 30px;
}

.week .strategy_box{
    background-color:var(--middleBlueBGC);
}

.strategy_box .title{
    text-align: left;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.strategyIcon{
    width:30px
}

.strategy_winner{
    width:100%;
    justify-content: space-between;
}

.bonus_show.show_inf{
    width: 100%;
    height: auto;
    display:flex;
    justify-content: flex-start;
    position: relative;
}

.bonus_show img{
    filter: brightness(0) saturate(100%) invert(32%) sepia(94%) saturate(1106%) hue-rotate(181deg) brightness(93%) contrast(83%);
}

.month .bonus_show img{
    filter: invert(25%) sepia(43%) saturate(6561%) hue-rotate(342deg) brightness(86%) contrast(95%);
}

.bonus_Box{
    border:2px solid var(--mainRed);
    margin-bottom:10px;
    line-height: 48px;
    color:#626262;
    background-color: #fff;
}

.week .bonus_Box{
    border:2px solid var(--mainBlue);
}

.history_list > .title{
    justify-content: flex-start;
}

.history_list{
    max-width: 830px;
    width: 98%;
    height: calc( 100% - 180px );
    overflow: hidden;
    overflow-y:scroll;
    padding-bottom: 10px;
    margin: 0 auto;
    padding: 0px 5px 0px 5px;
    z-index: 1;
    position: relative;
}

.history .light_content{
    height:100%;
}

.week.closeBtn01 img{
    filter: brightness(0) saturate(100%) invert(27%) sepia(88%) saturate(1506%) hue-rotate(185deg) brightness(92%) contrast(105%);
}

.history .light_content:after{
    width:100%;
    height:100%;
    content:'';
    display:block;
    background-image:url(../images/texture/background.svg);
    position: absolute;
    background-repeat:repeat;
    background-size: 330px;
    z-index:0;
    filter: brightness(0) saturate(100%) invert(93%) sepia(31%) saturate(4%) hue-rotate(132deg) brightness(107%) contrast(80%);
    top: 0;
    background-position: top;
}

.historyData{
    color:#fff;
    text-align:center;
    padding: 20px 0;
    margin-bottom: 28px;
    z-index: 1;
    position: relative;
}

.historyData .title{
    font-size:24px;
    line-height: 24px;
    margin-bottom: 5px;
}

.historyData .all_award{
    max-width:320px;
    width:90%;
    margin:0 auto;
    justify-content:space-between;
    border-bottom: 1px solid #fff;
    line-height: 45px;
}

.historyData .all_award img{
    width:30px;
    height:30px;
    margin-right: 5px;
}

.historyData .all_award span{
    font-size:30px;
    font-weight:900;
    letter-spacing: 1px;
}

.month .historyData{
    background-color:var(--mainRed)
}

.week .historyData{
    background-color:var(--mainBlue)
}

.bonus_detail{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align: center;
}

.month .bonusForm ul:nth-child(odd){
    background-color: #fdeff5;
}

.bonusForm ul:nth-child(odd){
    background-color:#eaf5fc
}

.bonusForm ul:nth-child(1){
    letter-spacing:2px;
    font-weight:600
}

.bonus_Box .hide_inf li{
    width:25%;
    height: 27px;
    font-size: 14px;
    line-height: 26px;
}

.bonus_detail .num{
    color:var(--mainRed)
}

.bonus_Box .hide_inf li:nth-child(1){
    padding-left:10%;
    position: relative;
}

.month .bonus_Box .hide_inf li{
    width: 50%;
}

.month .bonus_Box .hide_inf li:nth-child(1){
    padding-left:inherit;
}

.history_list .month,
.history_list .bonus,
.history_list > .title li{
    width: 50%;
    position: relative;
}

.history_list .bonus{
    font-size:14px
}

.history_list .bonus span{
    font-size:18px;
    font-weight:600;
    margin-left:10px;
    letter-spacing:1px
}

.history_list .bonus span.num{
    color:var(--mainRed);
}

.tag_list{
    width:100%
}

.swiper-slide-prev{
    opacity: 0 !important
}

.loginBtn{
    width: 100%;
    background-color: rgba(var(--hideBGC),1);
    padding: 15px 0 10px 0;
}

.week .loginBtn{
    background-color:var(--middleBlueBGC);
}

.loginBtn a{
    width:205px;
    height: 60px;
    background-color: var(--mainRed);
    color:#fff;
    border-radius: 90px;
    line-height: 56px;
    font-size: 20px;
    font-weight: 600;
    transition:all .3s;
}

.week .loginBtn a{
    background-color: var(--mainBlue);
}

.loginBtn a:hover{
    -webkit-animation: jello-horizontal 0.9s infinite both;
	animation: jello-horizontal 0.9s infinite both;
}

/* ---果凍動態效果--- */
@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
                transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
                transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
                transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
                transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
                transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}
@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
                transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
                transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
                transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
                transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
                transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}





/* ----- BANNER -----  */

.visualArea{
    height:555px;
    display:flex;
    justify-content: center;
    position:relative;
    background-color: #fed557;
    overflow: hidden;
}

.visualArea:after,
.visualArea:before{
    width: 50vw;
    max-width: 556px;
    height:100%;
    content:'';
    display:block;
    background-image:url(../images/texture/bgc_right.png);
    position: absolute;
    background-repeat:no-repeat;
    background-size: cover;
    z-index:0;
    right:0;
    bottom:0;
    left: inherit;
}

.visualArea:before{
    background-image:url(../images/texture/bgc_left.png);
    right:inherit;
    bottom:0;
    left:0
}

.mainVis{
    width: 1160px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    right: 0;
    top: 0;
}

.mainVis div,
.leftTexture img,
.rightTexture img,
.visual_E div img,
.vs_trophy img{
    position:absolute
}

.vs_trophy{
    max-width:678px;
    height: 100%;
    margin:0 auto;
    left: 0;
    right: 0;
    z-index: 0;
}

.leftTexture,
.rightTexture{
    width: 50%;
    height: 100%;
    left: -6%;
}

.rightTexture{
    left:inherit;
    right:0
}

.vs_rabbit{
    width:auto;
    z-index: 1;
    bottom: -12%;
    left: 6%;
}

.visual_E{
    width:auto;
    bottom: -3%;
    right: 4%;
}

.visual_E div{
    width:100%;
    height:100%;
    top: 0;
}

.visual_title{
    width:450px;
    height: auto;
    z-index: 1;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 56%;
}

.visual_title img{

}

@keyframes float{
    0% {
        transform:translateY(0px) rotate(0deg);
    }
    50% {
        transform:translateY(5px) rotate(0deg);
    }
    100% {
        transform:translateY(0px) rotate(0deg);
    }
}


.e_coin{
    width: 50%;
    height: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.e_coin div{
    position: absolute;
}

.blue_bgc{
    bottom: -40%;
    left: 0;
    right: 0;
    z-index: 0;
}

.ban_trophy{
    max-width: 360px;
    z-index: 3;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -55px;
}

.tag_2025{
    width: 98px;
    z-index: 3;
    top: 31%;
    left: 30%;
    margin: 0 auto;
}

.bgc_coin{
    width:auto;
    bottom: -18%;
    z-index: 2;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.star01,
.star02{
    width:auto;
    z-index:1;
    animation:shine 1.5s ease-in-out infinite both;
}

.star01{
    left:0;
    bottom: -12%;
}

.star02{
    right: -19%;
    top: 2%;
}

/*闪烁动画*/

@keyframes shine {
    10% {
        opacity:0
  }
    33% {
        opacity:100%
  }
    50% {
       opacity:70%
  }
    80% {
       opacity:100%
  }
    100% {
       opacity:50%
      }
}





/*進場動態*/

.bounceIn{
    -webkit-animation: bounce-in-fwd 1s both;
    animation: bounce-in-fwd 1s both;
}

@-webkit-keyframes bounce-in-fwd {
    0% {
        -webkit-transform: scale(0);
                transform: scale(0);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: scale(0.7);
                transform: scale(0.7);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: scale(0.84);
                transform: scale(0.84);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    89% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: scale(0.95);
                transform: scale(0.95);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
}
@keyframes bounce-in-fwd {
    0% {
        -webkit-transform: scale(0);
                transform: scale(0);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: scale(0.7);
                transform: scale(0.7);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: scale(0.84);
                transform: scale(0.84);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    89% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: scale(0.95);
                transform: scale(0.95);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
}


/*錢幣飛右邊動態*/

.coin01{
    width: auto;
    right: 0;
    top: 35%;
    -webkit-animation: pulsate-fwd 1.2s  ease-in-out infinite both;
    animation: pulsate-fwd 1.2s  ease-in-out infinite both;
}

@-webkit-keyframes pulsate-fwd {
    0% {

        -webkit-transform: translate3d(-90px, 100px, 90px);
                transform: translate3d(-90px, 100px, 90px)rotate(0.9turn);
                opacity:0;
    }
    25%{
        opacity:1
    }
    50% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(1.1turn);
    }
    100% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(1.1turn);
    }
}
@keyframes pulsate-fwd {
    0% {

        -webkit-transform: translate3d(-90px, 100px, 90px);
                transform: translate3d(-90px, 0px, 0px)rotate(0.8turn);
                opacity:0;
    }
    25%{
        opacity:1
    }
    50% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(1turn);
    }
    100% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(1turn);
    }
}

.mahjong{
    width:auto;
    top: 42%;
    left: 0;
    z-index: 1;
    -webkit-animation: pulsate-fwd2 1.2s  ease-in-out infinite both;
    animation: pulsate-fwd2 1.2s  ease-in-out infinite both;
    position: absolute;
}

@keyframes pulsate-fwd2 {
    0% {

        -webkit-transform: translate3d(-90px, 100px, 90px);
                transform: translate3d(100px, -60px, -100px)rotate(1.2turn);
                opacity:0;
    }
    25%{
        opacity:1
    }
    50% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(1turn);
    }
    100% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(1turn);
    }
}


/*錢幣飛左邊動態*/

.coin02{
    width:60px;
    top: 59%;
    left: 60px;
    /* -webkit-animation: flyRight 1.2s  ease-in-out infinite both; */
    animation: flyRight 1.2s  ease-in-out infinite both;
}

@-webkit-keyframes flyRight {
    0% {

        -webkit-transform: translate3d(90px, 100px, -90px);
                transform: translate3d(90px, 100px, -90px)rotate(-0.9turn);
                opacity:0;
    }
    25%{
        opacity:1
    }
    50% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(-1.1turn);
    }
    100% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(-1.1turn);
    }
}
@keyframes flyRight {
    0% {

        -webkit-transform: translate3d(90px, 100px, -90px);
                transform: translate3d(90px, 100px, -90px)rotate(-0.9turn);
                opacity:0;
    }
    25%{
        opacity:1
    }
    50% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(-1.1turn);
    }
    100% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(-1.1turn);
    }
}


/*錢幣往上飛動態*/

.coin03{
    width:60px;
    top: 180px;
    right: 23%;
    -webkit-animation: flyToTop 1.2s  ease-in-out infinite both;
    animation: flyToTop 1.2s  ease-in-out infinite both;
}

@-webkit-keyframes flyToTop {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes flyToTop {
    0% {

        -webkit-transform: translate3d(0px, 80px, 10px);
                transform: translate3d(0px, 80px, 10px)rotate(15deg);
                opacity:0;
    }
    25%{
        opacity:1
    }
    50% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(-20deg);
    }
    100% {
        -webkit-transform: scale(1);
                transform: translate3d(0px, 0px, 0px)rotate(-20deg);
    }
}

.cherry{
    width: auto;
    right: -9%;
    bottom: 15%;
    animation: float 3s infinite alternate-reverse both;
}

.watermelon{
    width:auto;
    right: 53%;
    bottom: 24%;
    animation: float 3s infinite alternate-reverse both;
}

.diamond{
    width:auto;
    bottom: 30%;
    left: 10%;
    animation: float 3s infinite alternate-reverse both;
}

.strawberry{
    width:auto;
    top: 35%;
    left: 21%;
    animation: float 3s infinite alternate-reverse both;
}




/* ----- SELECT ----- */

.hideStatu{
    display:none
}

.cover_inf{
    width: calc( 100% + 10px );
    height: calc( 100% + 10px );
    position:absolute;
    background-color: rgb(0 0 0 / 100%);
    z-index: 9;
    border-radius: 15px;
    margin: 0 auto;
    align-content: center;
    color: #fff;
    top: -5px;
    left: -5px;
    display: none;
}

.coverBox{
    height:100%
}

.week .cover_inf{
    border:3px solid var(--middleBlueBGC);
}

.month .cover_inf{
    border:3px solid rgba(var(--hideBGC),1)
}

.year .cover_inf{
    border:3px solid #8f82bc
}

.cover_inf a{
    color:#fff;
    padding: 10px 35px;
    font-size:26px;
    border-radius:90px;
    transition: all .3s;
}

.cover_inf a:hover{
    transform:scale(0.95,0.95)
}

.month .cover_inf a{
    background-color:var(--mainRed);
}

.week .cover_inf a{
    background-color:var(--mainBlue);
}

.index .cover_inf img,
.calCover img,
.rankCover img{
    width:95px
}

.strategyCover img{
    width:110px;
}

.cover_inf .txtArea{
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    letter-spacing: 1px;
    margin-left: 35px;
}

.rankCover .txtArea{
    width:100%;
    margin-left: 0;
    margin-top: 10px;
}

.calAreaBox .txtArea{
    width: 300px;
    margin-left:0
}

.strategyCover .txtArea{
    width:auto;
}

.cover_inf .txtArea p{
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    font-size: 30px;
}

.strategyCover .txtArea p{
    font-size:22px;
    line-height:40px;
}

.cover_inf h1{
    width: 100%;
    font-size:42px;
}

.cover_inf.rankCover h1{
    font-weight:600
}

.cover_inf h2{
    width: 100%;
    font-size:39px;
    line-height: 39px;
    margin-bottom: 15px;
}

.cover_inf h2 span{
    font-size:42px;
    font-weight:600;
    color:var(--yellow)
}

.cover_inf h3{
    font-size:30px
}

.cover_inf  span{
    font-weight:600
}

.cover_inf .txtArea p span{
    width: 150px;
    border-bottom: 1px solid #fff;
}

.mobileSelect{
    width: 100%;
    display:none;
    position: fixed;
    z-index: 3;
    top: 125px;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.select_box.monthMobile{
    border: 1px solid #ff6d8d;
}

.select_box.weekMobile{
    background-color:var(--middleBlueBGC);
}

.select_box.yearAcMobile{
    background-color: #8f82bc;
}

.mobileSelect > div{
    padding: 8px 0;
}

.select_content,
.select_box{
    margin: 0 auto;
    position: relative;
}

.select_box{
    display:flex;
    justify-content:center;
    align-items: center;
    background-color: rgba(var(--hideBGC),1);
    padding: 15px 0 10px 0;
}

.week .select_box{
    background-color:var(--middleBlueBGC);
}

.select_box select{
    width: 566px;
    height: 40px;
    border-radius: 5px;
    appearance: none;
    background: url('../images/icon/select_arrow.svg') 7% / 7% no-repeat;
    background-position: top 50% right 2px;
    transition: all .3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    padding: 0 10px;
    cursor: pointer;
    z-index: 3;
    position: relative;
    font-weight: inherit;
    color: #302f2f;
    margin: 0 5px;
    border: 1px solid #a30000;
    font-size: 18px;
}

.week .select_box select,
.weekMobile select{
    border: 1px solid #00a0e9;
    background: url('../images/icon/select_week_arrow.svg') 7% / 7% no-repeat;
    background-color: #ffffff;
    background-position: top 50% right 2px;
}

select:hover,
.week .select_box select:hover,
.year .select_box select:hover{
    background-position: top 2px right 2px;
}

.data_area{
    width:100%;
}

.show_inf{
    height: 50px;
}

.select_title{
    height:35px;
    background-color: var(--mainRed);
    color:#fff;
    font-size: 16px;
}

.week .select_title{
    background-color: var(--mainBlue);
}

.show_inf{
    height: 60px;
    position: relative;
    background-color: #fff;
}

.show_inf,
.select_title{
    justify-content: flex-start;
}

.select_title > div,
.show_inf > li{
    width: calc( 100% / 6 );
}

.data_area .tit01,
.data_area .inf01{
    width: 7%;
}

.data_area .tit02,
.data_area .inf02{
    width: 10%;
}

.data_area .tit03,
.data_area .inf03{
    width: 14%;
}

.data_area .show_inf .inf02,
.data_area .inf03{
    color:#404040;
}

.show_inf .inf04,
.select_title .tit04{
    width: 15%;
    justify-content: center;
}

.week .show_inf .inf03,
.week .select_title .tit03{
    width: 20%;
}

.score_area .inf04 img{
    width:25px;
    margin-bottom: 2px;
}

.show_inf .inf05,
.select_title .tit05,
.show_inf .inf06,
.select_title .tit06{
    width: 24%;
}

.week .show_inf .inf05,
.week .select_title .tit05,
.week .show_inf .inf06,
.week .select_title .tit06{
    width: 28%;
}

.select_title .tit05 > div{
    position: relative;
}

.select_title .tit04 p{
    width:auto
}

.select_title .tit04,
.select_title .tit05 >div{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}

.floatBox{
    top:5px;
}

.select_title .tit06{
    color:var(--yellow)
}

.show_inf .inf06{
    font-size:14px;
}

.show_inf .inf06 span{
    color:var(--priceRed);
    font-weight:600;
    font-size:18px;
}

.select_title .tit04 p,
.select_title .tit05 p,
.select_title .tit05 span{
    display:block;
}

.member_score{
    display:none;
    font-size: 18px;
    border-left: 1px solid var(--borderColor);
    border-right: 1px solid var(--borderColor);
    border-bottom: 1px solid var(--borderColor);
    position: relative;
}

.week .member_score{
    border-left: 1px solid var(--blueLine);
    border-right: 1px solid var(--blueLine);
    border-bottom: 1px solid var(--blueLine);
}

.hide_inf{
    height: 60px;
    background-color: rgba(var(--hideBGC),1);
    display: none;
    border-bottom: 1px solid var(--borderColor);
}

.week .hide_inf{
    background-color:var(--middleBlueBGC);
    border-bottom: 1px solid var(--blueLine);
}

.lightBox .hide_inf{
    height:auto
}

.lightBox .hide_inf{
    width: 95%;
    background-color:#fff;
    border:0px;
    margin: 0 auto;
    margin-bottom: 15px;
}

.hide_inf ul{
    height:100%;
}

.data_area .hide_inf .inf01,
.data_area .hide_inf .inf02{
    width:50%;
    align-items: center;
    margin: 0;
}

.data_area .hide_inf .inf02 .float_txt{
    width: 180px;
    left:-120px;
    top: -58px;
}

.data_area .float_txt{
    top:-30px
}

.tit05 .float_ps .float_txt{
    left: -50px;
}

.show_inf .show_arrow{
    width: 20px;
    height: 20px;
    transition:all .3s;
    position: absolute;
    right: 4%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;
}

.tran180{
    transform: rotate(180deg);
}

.winner_detail{
    width: calc( 100% - 150px );
    height: 100%;
    position:relative;
}

.awards,
.playersCollect,
.topThree_inf,
.topThree_inf02{
    width: 100%;
    text-align:left;
    justify-content:flex-start
}

.myRanking{
    width: 80%;
    height: 26px;
    position:absolute;
    top: -13px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--mainRed);
    color: #fff;
    letter-spacing: 3px;
    line-height: 25px;
}

.week .myRanking{
    background-color: var(--mainBlue);
}

.awards{
    text-align:center;
    background-color:var( --pink);
    padding: 17px 0 5px 0;
}

.awards span{
    margin:0 8px;
    color: var(--priceRed);
}

.week .awards span{
    color: #0000ff;
}

.week .awards{
    background-color:var( --lightBlue);
}

.topThree_inf,
.topThree_inf02{
    margin: 6px 0 0px 0;
}

.topThree_inf{
    color: #333333;
}

.topThree_inf .tit01,
.topThree_inf02 .tit01{
    font-size:14px;
}

.strategy_box .tit01{
    font-size:18px;
    letter-spacing:1px
}

.topThree_inf02 .bonus{
    font-size:14px;
    line-height: 24px;
    display: flex;
}

.topThree_inf02 .bonus p{
    font-size:22px;
    font-weight: 800;
    line-height: 20px;
    margin: 0 4px;
    color:var(--priceRed)
}

.P_value{
    margin: 0 0 0 4px;
}

.playersCollect{
    height: 32px;
    justify-content: space-between;
    padding-right: 5px;
}

.strategy_winner .playersCollect,
.strategy_winner .topThree_inf{
    width: 90%;
    margin: 0 auto;
}

.rankingBtn,
.upRanking,
.downRanking{
    width:80%;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    margin: 10px auto;
    background-color:var(--lightGray);
    line-height: 23px;
}

.medal{
    position:relative;
    cursor: pointer;
}

.medal span{
    width: 25px;
}

a.rankingBtn{
    font-size: 14px;
    transition:all .3s
}

a.rankingBtn img{
    width:17px;
    margin:0 5px
}

a.rankingBtn:hover{
    transform:scale(0.95,0.95)
}

.downRed{
    border-top: 8px solid var(--priceRed);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.upGreen{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #22ac38;

}

.winner .upGreen,
.winner .downRed{
    margin-right:5px
}

.owner .rankingBtn{
    color: #fff;
    background-color: var(--orange);
}

.week .owner .rankingBtn{
    background-color:#e4007f;
}


.trophy{
    width: 110px;
    z-index: 1;
    margin-left: 12px;
}

.topThree{
    width:100%;
    background-color: rgba(var(--hideBGC),1);
    padding: 0px 30px 20px 30px;
    justify-content: space-between;
}

.week .topThree{
    background-color:var(--middleBlueBGC);
}

.winner{
    width: calc( 33.333% - 11px );
    height: 103px;
    position:relative;
    align-items: center;
    justify-content: space-between;
    background-color: #f9d3e3;
    box-shadow: 0 4px 8px rgb(0 0 0 / 35%);
}

.week .winner{
    background-color: #fff;
}

.winner:nth-child(odd){
    margin: 12px 0 0 0;
}

.strategy_winner .winner{
    margin:0;
    height: auto;
    box-shadow: 0 4px 8px rgb(0 0 0 / 0%);
    background-color: #ffffff;
    overflow: inherit;
    border: 1px solid var(--mainRed);
}

.week .strategy_winner .winner{
    border: 1px solid var(--mainBlue);
}

.winner:before{
    content:'';
    width: 100%;
    height: 32px;
    display:block;
    position: absolute;
    top: 0;
    background-color: #fff;
}

.week .winner:before{
    background-color: rgba(var(--annYellow),1);
}

.strategy_winner .owner{
    border: 2px solid var(--mainRed);
}

.week .strategy_winner .owner{
    border: 2px solid var(--mainBlue);
}

.strategy_winner .winner:before{
    display:none
}

.winner .arrow{
    width: 22px;
    height: 22px;
    position:absolute;
    right: 4px;
    bottom: 4px;
    cursor: pointer;
    z-index: 2;
    /* transition: all .3s; */
    filter: invert(13%) sepia(9%) saturate(15%) hue-rotate(338deg) brightness(55%) contrast(83%);
}


.winnerInf{
    width: 100%;
    height: calc( 100% - 32px );
    position:absolute;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding-top: 5px;
    bottom: 0;
    visibility: hidden;
    right: -1px;
}

.winnerInf .hide_inf{
    width: 100%;
    height: auto;
    font-size: 14px;
    margin-bottom: 4px;
    z-index:1;
    border: none;
    display: flex;
    align-items: center;
    position: relative;
    background-color: transparent;
}

.winnerInf .hide_inf .inf{
    font-size:18px;
    margin:0 4px;
    position: relative;
    z-index: 0;
}

.winnerInf .float_txt{
    left: -70px;
    top: -30px;
}

.winnerInf .multipleTitle .float_txt{
    width:180px;
    left:-150px;
    top: -50px;
}

.winnerInf .hide_inf:nth-child(1) .float_txt{
    left: -77px;
}

.winnerInf:after{
    content:'';
    width: 196px;
    height: 51px;
    background-color:#fdeff5;
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
    padding: 10px 0px 10px 30px;
    position:absolute;
    bottom: 0;
    right: 1px;
    z-index:0
}

.week .winnerInf:after{
    background-color:#fffbc7;
}

.winnerInf.visible{
    visibility:visible;
}



/* ----- FIRSTTIME LOGIN ----- */

.firstTime_login{
    width: 100vw;
    height: 100vh;
    position:absolute;
    background-color: rgb(0 0 0 / 76%);
    z-index: 1111;
    top: 0;
}

.firstTime_login .hand{
    width:60px;
    display:flex;
}

.step01,
.step02,
.step03,
.step04{
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    align-content: center;
    text-align:center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 auto;
}

.stePosition{
    position:relative
}

.step02,
.step03,
.step04{
    visibility:hidden;
}

.firstTime_login .txtArea{
    color:#fff
}

.firstTime_login p{
    font-size:25px;
    font-weight:600;
    letter-spacing:1px;
    line-height: 35px;
}

.firstTime_login .yellowFont{
    color:var(--yellow)
}

.firstTime_login button{
    width:150px;
    color:#d72333;
    background-color:var(--yellow);
    padding: 2px 0;
    font-size: 17px;
    letter-spacing: 1px;
    border-radius: 90px;
    transition:all.3s;
    border: 0px;
    margin-top: 5px;
}

.firstTime_login button:hover{
    transform:scale(0.95,0.95)
}

.step{
    width: 33px;
    height:33px;
    background-color:#fff;
    color:var(--mainRed);
    font-size:26px;
    font-weight:600;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    border-radius: 90px;
    margin-bottom: 5px;
}

.step01 .hand{
    transform: rotate(125deg);
    animation-name: step01;
    animation-duration: .4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes step01 {
    from {
        transform:rotate(125deg)  translate(0);
    }

    to {
        transform:rotate(125deg)  translate(0px,-10px);
    }
}


.step01 .txtArea{
    margin-right: 0;
}

.step02 .exIcon{
    width: 77px;
    height: 27px;
    right: 30px;
    top: 39px;
    display: flex;
    margin-left: 20px;
}

.step02 .exIcon img{
    width:100%;
    /* height: auto; */
}

.step02 .hand{
    position:absolute;
    right: -16px;
    bottom: 5px;
    animation-name: otherStep;
    animation-duration: .4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.step03{
    margin:0 auto;
    display: flex;
}

.step03 .hand{
    position:absolute;
    left: 85px;
    bottom: -62px;
    right: 0;
    margin: 0 auto;
    animation-name: otherStep;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.step03 .exIcon{
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: 20px;
}



@keyframes otherStep {
    from {
        transform:rotate(-27deg)  translate(0);
    }

    to {
        transform:rotate(-27deg)  translate(0px,-10px);
    }
}
.step04 .hand{
    position:absolute;
    animation-name: otherStep;
    animation-duration: .4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    left: 32px;
    bottom: -70px;
}

.step04 .exIcon{
    width:auto;
    margin: 0 auto;
    margin-top: 15px;
}




/* ----- SLIDEBOX ----- */

.swiper-3d .swiper-slide-shadow{
    background: rgb(255 255 255 / 0%);
}

.swiper-button-next,
.swiper-button-prev{
    position:fixed;
    right: 15px;
    top: 140px;
    animation:scale linear infinite;
    animation-duration:1.5s;
    z-index: 3;
}

.swiper-button-prev{
    left:inherit
}

.swiper-button-next:before,
.swiper-button-prev:before{
    content:url('../images/icon/week.svg');
    width: 26px;
    height: 26px;
    display:block;
    margin-bottom: 4px;
}

.swiper-button-prev:before{
    content:url('../images/icon/month.svg');
}

.swiper-button-next.achBtn:before{
    content:url('../images/icon/year.svg');
}

.swiper-button-prev.achBtn:before{
    content:url('../images/icon/month_ach.svg');
}

.swiper-button-prev.achBtn,
.swiper-button-prev.rankBtn{
    background-color: #dd4654;
}

.swiper-button-next.rankBtn{
    background-color:var(--mainBlue)
}

.swiper-button-next.achBtn{
    background-color:#601986
}


.swiper-button-next:after{
    content:url('../images/icon/week_pc.png');
    font-size: 13px;
}

.swiper-button-prev:after{
    content:url('../images/icon/month_pc.png');
    font-size: 18px;
}

.swiper-button-next:after,
.swiper-button-prev:after{
    font-family: 'Noto Sans TC', sans-serif;
}


/* --- 左右按鈕動態 ---   */

@keyframes scale{
    0%{
        transform:scale(1,1)
    }
    50%{
        transform:scale(0.95,0.95)
    }
    100%{
        transform:scale(1,1)
    }
}


.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled{
    opacity:0
}

.slick-slide > div{
    display:flex;
    justify-content:center;
}

.slide_box{
    width: 100%;
    margin-top: 105px;
}

.slide_box .slick-next{
    right: 25px;
}

.slide_box .slick-prev{
    left: 25px;
}

.slide_box button{
    z-index: 1;
}

.slide_item{
    width: 100%;
    height: 400px;
    background-color: #ccc;
    text-align: center;
    line-height: 400px;
}

.slick-prev, .slick-next{
    position:fixed
}

.rankBoard{
    margin-top:-50px
}






/* ----- BTN ----- */

.page_nav{
    width: 100%;
    height: 50px;
    line-height: 50px;
    position:fixed;
    top: 55px;
    z-index: 2;
    text-align: center;
    background-color: #565656;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_nav a{
    width: 150px;
    height: 100%;
    color:#fff
}

.goTop{
    width: 74px;
    position: fixed;
    right: 15px;
    bottom: 2%;
    display: none;
    cursor: pointer;
    z-index: 1;
}

.goTop img{
    transition: all .3s;
}

.goTop:hover img{
    transform:translate(0,-5px);
}

.btn01{
    padding: 7px 15px;
    background-color: #646464;
    color: #fff;
    cursor: pointer;
}

.btn01:hover{
    background-color: #373737;
}

.more_btn{
    width: 127px;
    height: 35px;
    position:relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 20px auto 10px auto;
    background-color:var(--mainRed);
    border: 0px;
    color: #fff;
    transition:all .3s
}

.week .more_btn{
    background-color:var(--mainBlue);
}

.more_btn:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid white;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    margin:0 0 0 5px
}

.more_btn:hover{
    transform:scale(0.95,0.95)
}



/* ----- SUBS ----- */

.subs-content{
    width:80%;
    margin:0 auto
}

.subs-box{
    padding: 10px 0;
}

.subs-btn{
    height: 80px;
    line-height: 80px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    align-content: center;
}

.subs{
    padding: 10px;
}

.subs-btn span{
    width: 40px;
    height: 40px;
    background-color:#565656;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}





/* ----- TAB ----- */

#tab-box{
    padding: 0 20px;
}

.tab-btn{
    width: 100%;
    display:flex;
}

.tab-btn li{
    width:150px;
    height:40px;
    background-color:#646464;
    margin: 0 5px 0 0;
}

.tab-btn a{
    width:100%;
    height: 100%;
    color:#fff;
    display:flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.tab-btn li.active{
    background-color:rgb(26 21 21 / 90%);
}

.tab-txt{
    width: 100%;
    min-height: 200px;
    background-color: #f7f7f7;
    margin: 15px 0px;
    padding: 15px 20px;
}




/* ----- 小算盤 ----- */

.formula_box{
    border: 3px solid var(--mainRed);
    margin-bottom: 25px;
}

.week .formula_box{
    border: 3px solid var(--mainBlue);
}

.formula_box > div{
    width:100%
}

.active .openBtn{
    display:none;
}

.calBtnBox{
    justify-content:flex-end;
    margin: 5px 0 8px 0;
}

.cal_p{
    display:none
}

.coverBox .cal_p{
    display:flex;
    visibility: hidden;
}

.calculateBtn{
    padding: 0 15px;
    border-radius:90px;
    border:0px;
    transition:all .3s;
    display: none;
}

.calculateBtn:hover{
    transform:scale(0.95,0.95)
}

.month .calculateBtn{
    background-color: var(--orange);
    color:#fff
}

.week .calculateBtn{
    background-color: #e4007f;
    color:#fff
}

.open_cal,
.open_cal02{
    cursor:pointer;
    display: flex;
    justify-content: flex-end;
}

.open_cal > div,
.open_cal02 > div{
    background-color:#ff5362;
    color:#fff;
    padding: 0 7px 0 12px;
    border-radius:90px;
    transition:all .3s
}

.open_cal02 > div{
    background-color:#0068b7;
}

.open_cal02 .closeBtn02,
.open_cal .closeBtn{
    width: 27px;
    background-color:#898989;
    padding: 0;
    height: 27px;
    margin-left: 5px;
}

.open_cal > div:hover,
.open_cal02 > div:hover{
    transform:scale(0.95,0.95)
}

.cal_icon{
    width:22px;
    height:22px;
    border-radius:90px;
}

.cal_icon img{
    width:13px
}

.closeBtn,
.closeBtn02{
    display:none
}

.active .closeBtn,
.active .closeBtn02{
    display:flex;
}

.original_formula > div,
.calculate02 > div{
    width: 100%;
}

.calculate,
.finalRanking{
    height: 48px;
    padding: 5px 20px;
    justify-content: flex-start;
}

.calculate_V{
    width: 50%;
    height: 100%;
    position: relative;
}

.calculate01,
.calculate02,
.finalResults{
    border: 1px solid var(--mainRed);
}

.calculate01 .float_ps .icon,
.tit05 .float_ps .icon,
.rule .float_ps .icon,
.finalResults .cal_title .float_ps .icon{
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(139deg) brightness(150%) contrast(101%);
}

.cal_title .float_ps .icon{
    filter:inherit
}

.week .calculate01,
.week .calculate02,
.week .finalResults{
    border: 1px solid var(--mainBlue);
}

.calculate01 .calculate:nth-child(1){
    background-color: var(--mainRed);
    color: #fff;
}

.week .calculate01 .calculate:nth-child(1){
    background-color: var(--mainBlue);
}

.calculate01 .calculate_V{
    justify-content: flex-start;
}

.calculate01 .calculate:nth-child(1) .calculate_V{
    width: 43%;
}

.calculate01 .calculate:nth-child(2){
    background-color:#fff;
}

.calculate01 .calculate:nth-child(2) .formula_font{
    font-size:20px;
    margin-right: 10px;
}

.multiply,
.equal{
    font-size: 25px;
    font-weight: 900;
    line-height: 23px;
    margin: 10px 0 10px 0px;
}

.month .multiply,
.month .equal{
    color: #ff5362;
}

.week .multiply,
.week .equal{
    color: var(--mainBlue);
}

.plus{
    width: 13%;
    /* margin-right: 10px; */
    font-size: 24px;
}

.calculate_full{
    width: calc( 100% - 22px );
}

.calculate_V input,
.switch .num,
.switch02 .num{
    width: 88%;
    letter-spacing: 2px;
}

.original_formula{
    width:100%;
    background-color:var(--pink);
    padding: 10px 30px;
}

.week .original_formula{
    background-color:var(--lightBlueBGC);
}

.finalResults{
    width:100%;
    background-color: var(--mainRed);
    color: #fff;
}

.week .finalResults{
    background-color:var(--mainBlue)
}

.calculate02 .calculate{
    background-color:#fff
}

.calculate02 .calculate_V{
    width:100%
}

.calculate02 .calculate_V.d-flex{
    justify-content: flex-start;
}

.calculate_V.final{
    width:100%;
    position: relative;
    justify-content: flex-start;
}

.calculate_V .cal_title,
.finalRanking .cal_title{
    text-align:left;
    margin-right: 10px;
    margin-top: -22px;
    letter-spacing: 1px;
}

.calculate_V .cal_title{
    margin-top: 0px;
}

.num_p,
.finalResults .final_P{
    width: 100%;
    font-size: 28px;
    position: absolute;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--mainRed);
}

.week .num_p,
.week .final_P{
    color:var(--mainBlue)
}

.week .final_P{
    color:#fff
}

.switch,
.switch02{
    width: 100%;
    height: 100%;
    display:flex;
    align-items: center;
}

.calculate02 .switch,
.calculate02 .switch02{
    /* position:absolute; */
    margin-top: -26px;
}

.ps_txt,
.ps_txt02{
    position:absolute;
    right: 0;
    font-size: 14px;
}

.ps_txt span,
.ps_txt02 span{
    color: #ff0000;
    font-weight:600;
    margin: 0 2px;
}

.calculate01 .switch,
.calculate01 .switch02{
    width: 72%;
}

.calculate02 .switch .num,
.calculate02 .switch02 .num{
    width:100%;
    font-size: 28px;
    font-weight: 600;
    color: #ff0000;
    line-height: 28px;
}

.week .calculate02 .switch02 .num{
    color:var(--mainBlue)
}

.calculate02 .switch .num option,
.calculate02 .switch02 .num  option{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color:#4c4c4c;
    font-weight: normal;
    text-align: center;
}

.finalResults .cal_title{
    left:0
}

.finalRanking{
    justify-content:space-around;
    background-color: #fff;
    border: 1px solid var(--mainRed);
}

.week .finalRanking{
    background-color: #fff;
    border: 1px solid var(--mainBlue);
}

.finalRanking > div{
    width: 50%;
    justify-content:flex-start;
}

.finalData{
    color: var(--mainRed);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-left: 30px;
}

.week .finalData{
    color:#e4007f
}

.month .final_P{
    color: #fff;
}

.strategy_box .final_P{
    width: auto;
    font-size:18px;
    color: inherit;
    letter-spacing: inherit;
    position: relative;
    font-weight: inherit;
    margin: 0 5px;
}

.strategy_box .bonus{
    font-size: 24px;
    color: var(--priceRed);
    font-weight:600;
    letter-spacing: 1px;
    margin-left: 5px;
}

.finalRanking .cal_title{
    /* color:#fff; */
}

div.down_cal,
div.down_cal02{
    width:20px;
    transition: inherit;
    cursor: pointer;
    margin: 10px 0 0 0;
}

div.down_cal02 img{
    filter: invert(17%) sepia(99%) saturate(4890%) hue-rotate(194deg) brightness(96%) contrast(101%);
}

input.num{
    height: 100%;
    transition:all .3s;
    display: none;
    background-color: rgb(0 0 0 / 0%);
    border: 0px;
    border-bottom: 1px solid rgb(255 255 255 / 90%);
    text-align: center;
    border-radius: 0;
}

input.num{
    color:#ffffff
}

.month input.num::placeholder{
    color:#ff5362
}

.week input.num::placeholder{
    color:var(--middleBlue)
}

.switch select,
.switch02 select{
    width: 100%;
    display:none;
    height: 38px;
    border-radius: 5px;
    border: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 0px;
    cursor: pointer;
    z-index: 3;
    position: relative;
    font-weight: inherit;
    color: #302f2f;
    margin: 0 10px;
    transition: all .3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: center;
    background-size: 40px;
}

.switch select, .switch02 select{
    width: 88px !important;
    margin:0 auto;
    padding-left: 5px;
}

.switch select{
    background: url('../images/icon/monthArrow.svg')15px /15px no-repeat;
    background-position: top 50% right 0px;
}

.switch02 select{
    background: url('../images/icon/weekArrow.svg')15px /15px no-repeat;
    background-position: top 50% right 0px;
}

.switch.show input.num,
.switch.show select.num,
.switch02.show input.num,
.switch02.show select.num{
    display: block;
}

.switch.show span,
.switch02.show span{
    display: none;
}



/* ----- STICKYNAV -----  */

.activeNav.stickyAnn{
    height: 68px;
    top: 140px;
}

.activeNav{
    width: 100%;
    height: 55px;
    background-color: rgba(var(--annYellow),1);
    position: fixed;
    z-index: 3;
    top: 165px;
    transition: all .5s;
    align-content: flex-end;
    padding-bottom: 14px;
}

.activeNav .box_1125{
    margin:inherit;
    justify-content: space-evenly;
}

.navHeight{
    padding-top: 240px;
}

.nav-link{
    width: auto;
    background-color: #fff0;
    padding: 2px 15px;
    border-radius: 15px;
    font-size: 24px;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.activeNav img{
    width:22px;
    margin-right: 5px;
    filter: brightness(0) saturate(100%);
}

.nav-link.inactive{
    color:var(--inactiveNav);
    font-weight:600;
    background-color: #ffffff;
}



/* ----- RULE ----- */

 .rule .show_inf .float_txt{
    width:240px;
    text-align: left;
}

.ruleActivity{
    position:relative;
    background-color: #fed557;
    border: 2px solid #fee494;
}

.ruleActivity:after{
    width:100%;
    height:100%;
    content:'';
    display:block;
    background-image:url(../images/texture/background.svg);
    position: absolute;
    background-repeat:repeat;
    background-size: 375px;
    z-index:0
}

.rule h1,
.rule h2,
.rule h3,
.rule h4,
.rule .weekly,
.rule .monthly,
.itemDetail{
    width:100%;
    z-index: 1;
}

.rule h1{
    font-size:30px;
    font-weight:600;
    margin: 22px 0 10px 0;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rule h1 img{
    width:30px;
    height:30px;
    margin-right: 8px;
}

.rule h2{
    font-size:19px;
    font-weight:600;
    margin: 5px 0;
}

.rule h2 span{
    color:var(--mainRed);
    font-weight:bolder
}

.rule h3{
    font-size:19px;
    line-height: 30px;
}

.ruledata{
    background-color:#fff
}

.activityTime .weekly,
.activityTime .monthly{
    width:auto;
    height: 180px;
    background-color:#fff;
    margin: 0 7px;
    justify-content: space-between;
}

.activityTime .timeData{
    padding:0 55px;
    margin: 0 auto;
}

.activityTime .timeData p:nth-child(1){
    /* font-size:19px; */
}

.activityTime .weekly{
    border:2px solid var(--mainBlue);
}

.activityTime .monthly{
    border:2px solid var(--mainRed);
}

.activityTime .weekTitle,
.activityTime .monthTitle{
    width: 30px;
    display:flex;
    align-items:center;
    flex-wrap: wrap;
    align-content: center;
}

.activityTime h3{
    width:50px;
    height: 100%;
    padding: 10px;
    color:#fff;
    letter-spacing: 1px;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
}

.activityTime .weekly h3{
    background-color:var(--mainBlue);
}

.activityTime .monthly h3{
    background-color:var(--mainRed);
}

.activityTime .yellowFont{
    color:var(--yellow);
}

.activityTime .greenFont{
    color:#00ff00
}

.activityTime .grayFont{
    color:#bfbfbf
}

.activityTime img{
    width: 30px;
    margin-bottom: 4px;
}

.ruleBox{
    width: 97%;
    /* padding: 24px; */
    font-size: 24px;
    margin-top: 10px;
}

.ruleBox .weekly,
.ruleBox .monthly,
.gameBox{
    width: 100%;
    position:relative;
    padding: 12px 20px 20px 20px;
    background-color: #fff;
}



.ruleBox .weekly{
    background-color:#d3edfb;
    margin-bottom: 20px;
}

.ruleBox .monthly{
    background-color:#fdeff5;
    margin-bottom: 20px;
}

#ruleWeek,
#ruleMonth,
#ruleItem,
#scheduleWeek,
#scheduleMonth,
#schedule,
#bonus{
    position:absolute;
    top: -220px;
}

.ruleItem{
    width:100%;
    padding: 12px 20px 0 20px;
}

.ruleInf{
    width:100%;
    margin-top: 20px;
    background-color:#ffefbc;
    border-top: 2px solid #fee494;
    padding: 10px 0;
    z-index: 1;
}

.ruleInf .data{
    max-width: 540px;
    width: 96%;
    margin:0 auto;
    text-align: left;
}

.ruleInf .data div{
    justify-content:flex-start
}

.ruleInf span{
    color:var(--mainRed)
}

.rabbit,.panda{
    position:absolute;
    z-index: 2;
    bottom: 0;
}

.rabbit{
    width: auto;
    left: -15px;
}

.panda{
    right: -15px;
}

.activityTime{
    width: 100%;
    z-index:1;
    margin-top: 10px;
}

.formTitle{
    display:block;
    margin:0 0 10px 0;
    letter-spacing:1px
}

.weekly .formTitle div{
    color:var(--mainBlue);
    font-weight:600;
    margin-left: 8px;
    letter-spacing: 2px;
}

.pIcon{
    width:25px;
    height:25px;
    color:#fff;
    font-size:18px;
    border-radius: 5px;
    margin: 0 4px 0 2px;
    line-height:25px;
    padding-left: 4px;
    font-weight: 600;
}



.weekly .pIcon{
    background-color:var(--mainBlue);
}

.monthly .pIcon{
    background-color:var(--mainRed);
}

.tiny_pIcon{
    width:1.4em;
    height:1.4em;
    font-size:.7em;
    line-height:.9em;
    display:inline-flex;
    padding:2px;
    font-weight:inherit;
    justify-content:center;
    align-items:center;
    border-radius: 3px;
}

.calculate .tiny_pIcon{
    background-color: #000;
}


.monthly .formTitle div{
    color:var(--mainRed);
    font-weight:600;
    margin-left: 8px;
    letter-spacing: 2px;
}

.rule01,
.rule02,
.rule03{
    background-color:#fff
}

.rule01 > div:nth-child(1){
    color:#fff;
    letter-spacing: 5px;
    line-height: 40px;
}

.rule01 > div:nth-child(2){
    width: 95%;
    line-height:40px;
    /* margin: 0 auto; */
    position: relative;
}

.rule01 > div:nth-child(2) span{
    margin:0 25px;
}

.ruleWeek .rule01,
.ruleWeek .rule02,
.ruleWeek .rule03{
    border:1px solid var(--mainBlue);
    position: relative;
}

.ruleWeek .rule01 > div:nth-child(1),
.ruleWeek .rule02 > .show_inf{
    background-color:var(--mainBlue);
    color:#fff
}

.ruleMonth .rule01,
.ruleMonth .rule02,
.ruleMonth .rule03{
    border:1px solid var(--mainRed);
}

.ruleMonth .rule01 > div:nth-child(1),
.ruleMonth .rule02 > .show_inf{
    background-color:var(--mainRed);
    color:#fff
}

.rule .show_inf{
    height: inherit;
    justify-content:center;
    line-height: 50px;
}

.rule .show_inf li:nth-child(1){
    width: auto;
    letter-spacing:5px
}

.rule01 .equal{
    position:absolute;
    left:0
}

.rule .hide_inf{
    height: inherit;
    padding:20px;
    font-size:18px;
    color:var(--mainBlue);
    background-color:#fed557;
    border-bottom: 1px solid #ccc0;
}

.ruleMonth .hide_inf{
    color:var(--mainRed);
}

.rule ul.weekSignRule {
    height:auto
}

.weekSignRule .arrow{
    margin:0 28px
}

.rule03{
    line-height:45px;
    font-weight:900;
    letter-spacing:5px
}

.ruleWeek .rule03{
    color: #fff;
    background-color: var(--mainBlue);
}

.ruleWeek .rule03 .pIcon,
.ruleWeek .rule01 .pIcon{
    color: var(--mainBlue);
    background-color: #fff;
}

.ruleMonth .rule03 .pIcon,
.ruleMonth .rule01 .pIcon{
    color:var(--mainRed);
    background-color: #fff;
}

.ruleMonth .rule03{
    color: #fff;
    background-color: var(--mainRed);
}

.bluePs{
    color:#2810f3
}

.itemDetail{
    margin-bottom: 15px;
}

.ruleItem h1{
    margin-bottom:20px;
    margin: 0px 0 20px 0;
}

.itemDetail .show_inf{
    border: 1px solid #920783;
}

.gameBox .hide_inf{
    background-color:#e9e6f3;
    color:#000;
    line-height:28px;
    padding: 20px 0 20px 0;
}

.gameBox .hide_inf p{
    max-width: 644px;
    width:95%;
    margin:0 auto
}

.detail{
    margin-top:-20px;
    margin-bottom: 10px;
    background-color: #d0c3df;
    font-size: 14px;
    color: #6e3790;
}

.gameBox .show_inf li:nth-child(1){
    width: auto;
    letter-spacing: 4px;
    font-size:24px;
    color:#601986
}






/* ----- SCHEDULE -----  */


.schedule{
    position:relative;
    margin-bottom: 30px;
    background-color: #fff;
}

.schedule h1,
.schedule h3,
.schedule h4,
.bonusList{
    width:100%
}

.schedule h3{
    font-size:24px;
    margin:10px 0;
}

.schedule .weekly,
.schedule .monthly{
    width:100%;
}

.schedule .weekly{
    box-shadow: 5px 5px var(--mainBlue);
}

.schedule .monthly{
    box-shadow:5px 5px var(--mainRed)
}

.schedule .ps_txt{
    width: auto;
    position:relative;
    display: flex;
    justify-content: center;
    margin: 4px 0 6px 0;
}

.schedule .ps_txt p{
    color:#8957a1;
    background-color:#fff;
    padding:2px 10px
}

.schedule .sc_title{
    width: 100%;
    height: 52px;
}

.sc_title img{
    width:auto
}

.schedule h1:before{
    content: attr(data-storke);
    position: absolute;
    z-index: -1;
}

.schedule .weekly .sc_title{
    background-color:var(--middleBlueBGC)
}

.schedule .monthly .sc_title{
    background-color:#ff9c97
}

.schedule .scheduleData .sc_title,
.bonusData .sc_title{
    background-color:var(--middleYellow);
    height: auto;
    padding: 5px 0;
}

.schedule .weekly h1:before{
    -webkit-text-stroke: 6px #0068b7;
    text-stroke:3px #0068b7;
}

.schedule .topThree{
    background-color:#fff;
    padding: 26px 0 18px 0;
}

.schedule .trophy{
    width:auto;
    margin: 0;
}

.weekly .sc_winner:nth-child(even){
    margin:0 80px
}

.monthly .sc_winner:nth-child(even){
    margin:0 20px
}

.sc_winner .bonus{
    font-weight:600;
    font-size:48px;
    line-height: 48px;
    align-items: baseline;
}

.sc_winner .bonus span{
    font-size:24px;
}

.weekly .sc_winner .bonus,
.weekly .bonusList .bonus .tit02{
    color:#e4007f;
}

.monthly .sc_winner .bonus,
.monthly .bonusList .bonus .tit02{
    color:var(--mainRed);
}

.weekly .bonusList .bonus .tit02{
    font-weight:600
}

.schedule .show_inf{
    font-size:24px;
    line-height:57px
}

.schedule .weekly .show_inf{
    background-color: #ecf6fd;
    color:var(--mainBlue)
}

.schedule .monthly .show_inf{
    background-color: #fef8fb;
    color:var(--mainRed)
}

.schedule .weekly .show_inf img{
    filter: invert(17%) sepia(99%) saturate(4890%) hue-rotate(194deg) brightness(96%) contrast(101%);
}

.schedule .show_inf .show_arrow{
    position:relative;
    right: inherit;
}

.schedule .show_inf p{
    margin:0 10px 0 0
}

.showBtn{
    margin-right:10px
}

.hideBtn{
    display: none
}

.bonusList .hide_inf{
    max-width:930px;
    width: 95%;
    height:auto;
    background-color:#fff;
    border-bottom: 1px solid #fff0;
    margin: 0 auto;
    margin-bottom: 22px;
}

.bonusList .hide_inf ul{
    line-height:55px;
    font-size:24px;
    height: auto;
}

.bonusList .title{
    color:#fff;
}

.weekly .bonusList .title{
    background-color:var(--mainBlue)
}

.monthly .bonusList .title{
    background-color:var(--mainRed)
}

.weekly .bonusList .hide_inf ul{
    border-bottom: 1px solid var(--mainBlue);
    border-left: 1px solid var(--mainBlue);
    border-right: 1px solid var(--mainBlue);
}

.monthly .bonusList .hide_inf ul{
    border-bottom: 1px solid var(--mainRed);
    border-left: 1px solid var(--mainRed);
    border-right: 1px solid var(--mainRed);
}

.bonusList .bonus .tit01{
    color: #666666;
}

.weekly .bonusList .tit01{
    border-right: 1px solid var(--mainBlue);
}

.monthly .bonusList .tit01{
    border-right: 1px solid var(--mainRed);
}

.bonusList .hide_inf ul li{
    width:50%
}

.scheduleData,.bonusData{
    box-shadow:5px 5px var(--brown)
}

.scheduleData .week,
.scheduleData .month,
.dispatchTime{
    max-width: 930px;
    width: 95%;
    position: relative;
}

.scheduleData .week h2,
.scheduleData .month h2{
    font-size:30px;
    color: #333333;
}

.scheduleData h2 img{
    width:25px;
    height:25px;
    margin-right:5px;
    filter: brightness(0) saturate(100%) invert(22%) sepia(17%) saturate(4360%) hue-rotate(4deg) brightness(98%) contrast(95%);
}

.scheduleData .week{
    margin:25px 0 20px 0
}

.scheduleData .month{
    margin-bottom:30px
}

.scheduleData .week div{
    background-color:var(--middleYellow);
    font-size: 24px;
    line-height: 60px;
    position:relative;
}

.scheduleData .week div span{
    color:var(--brown);
}

.scheduleData .week div p{
    z-index: 1;
    position: relative;
    letter-spacing: 1px;
}

.scheduleData .week div:after,
.scheduleData .swiper:after,
.dispatchTime:after{
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    background-image: url(../images/texture/background.svg);
    position: absolute;
    background-repeat: repeat;
    background-size: 330px;
    z-index: 0;
    top: 0;
    background-position: 228px -238px;
}

.scheduleData .swiper{
    background-color:var(--middleYellow);
    padding:20px 0
}

.scheduleData .swiper-slide {
    width: 270px;
    height: 228px;
    border:1px solid var(--brown);
    background-color: #fff;
}

.scheduleData .swiper-slide-prev,
.scheduleData .swiper-slide-next{
    opacity: 1 !important;
    transition:all .3s
}

.scheduleData .swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left,rgb(0 0 0 / 15%),rgba(0,0,0,0));
}

.scheduleData .swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right,rgb(0 0 0 / 15%),rgba(0,0,0,0));
}

.scheduleData h3{
    background-color:var(--brown);
    color:#fff;
    font-size:34px;
    font-weight:600;
    margin: 0;
}

.scheduleData .swiper-slide.swiper-slide-fully-visible{
    opacity:1;
    transition:all .3s
}

.scheduleData .swiper-slide{
    opacity:0;
    transition:all .3s
}

.scheduleData .inf{
    height: calc( 100% - 50px );
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    align-content: center;
    font-size: 25px;
}

.scheduleData .inf p{
    width:100%
}

.scheduleData .inf span{
    color:#996c33
}

.scheduleData .swiper-button-next,
.scheduleData .swiper-button-prev{
    position:absolute
}

.scheduleData .swiper-button-prev{
    right:inherit;
    left: 15px;
}

.schedule .swiper-button-next,
.schedule .swiper-button-prev{
    top: 56%;
    z-index: 1;
}

.schedule .swiper-button-next:before,
.schedule .swiper-button-prev:before{
    display:none
}

.schedule .swiper-button-prev:after,
.schedule .swiper-button-next:after{
    font-size: 35px;
    font-weight: bold;
    color:var(--brown)
}

.schedule .swiper-button-prev:after{
    content: 'prev';
    font-family: swiper-icons;
}

.schedule .swiper-button-next:after{
    content: 'next';
    font-family: swiper-icons;
}

.dispatchTime{
    background-color: var(--middleYellow);
    margin:80px 50px;
}

.timeLine{
    width:100%;
    height: 270px;
    z-index: 1;
    position: relative;
    padding-bottom: 10px;
}

.timeLine .day{
    width: 23%;
    align-items: flex-end;
    height: 100%;
    position: relative;
}

.timeLine .day:after{
    content:'';
    width:100%;
    height:4px;
    position:absolute;
    background-color:#fff;
    bottom: 39px;
    z-index: 0;
}

.timeLine .bonus.day{
    width: 27%;
    position: relative;
}

.timeLine .data{
    width:84px;
    height:84px;
    line-height: 84px;
    background-color: var(--brown);
    border-radius: 90px;
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    z-index: 1;
}

.timeLine .bonus .data{
    color:#ffff00;
    border: 4px solid #fff;
    /* box-sizing: content-box; */
    position: relative;
    line-height: 74px;
}

.timeLine .data img{
    position:absolute;
    width: 130px;
    top: -14%;
    left: -25px;
    right: 0;
    margin: 0 auto;
    -webkit-animation: scale-in-center 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite both;
	animation: scale-in-center 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite both;

}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
                transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
    }
    @keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
                transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
}



.sec_inf{
    width:314px;
    position: absolute;
    top: -40px;
}

.sec_inf h3{
    margin: inherit;
    color:#fff;
    line-height: 43px;
    display:flex;
    align-items:center;
    justify-content:center
}

.sec_inf h3 img{
    width:25px;
    margin-right:5px
}

.sec_inf div{
    background-color:#fff;
    height:140px;
    color: #595959;
    line-height: 30px;
}

.sec_inf.week div{
    border:2px solid var(--mainBlue)
}

.sec_inf.month div{
    border:2px solid var(--mainRed)
}

.sec_inf.week{
    right:28%
}

.sec_inf.week:after,
.sec_inf.month:after{
    content:'';
    height: 10px;
    border-top: 16px solid #ffffff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    display: block;
    position: absolute;
    right: 45px;
    bottom: -22px;
    filter: drop-shadow(0px 3px 0px var(--mainBlue));
}

.sec_inf.month:after{
    left: 45px;
    right:inherit;
    filter: drop-shadow(0px 3px 0px var(--mainRed));
}

.sec_inf.month{
    left:28%
}

.sec_inf.week h3{
    background-color:var(--mainBlue)
}

.sec_inf.month h3{
    background-color:var(--mainRed)
}

.sec_inf.week span{
    color:#e4007f;
    font-weight:600
}

.sec_inf.month span{
    color:var(--mainRed);
    font-weight:600
}






/* ----- TAGEALL ----- */

.tagInfTxt{
    background-color: rgba(var(--hideBGC),1);
    text-align: center;
    padding: 18px 5px 0 5px;
}

.box_1125.achOutBox{
    margin-bottom:0
}

.tagWall{
    margin-bottom:10px
}

.tagWall .title.show_inf{
    justify-content:center;
    background-color: var(--middleYellow);
}

.tagWall .title.show_inf img{
    width:auto;
}

.tagWall .hide_inf{
    height:auto;
    background-color: #fff9b1;
    border-bottom:0px;
    padding: 20px 25px 0 25px;
    justify-content: space-between;
    overflow-x: scroll;
    display: flex;
}

.tagWall .tagArea{
    width: 240px;
    background-color: #fff;
    border: 2px solid #b28850;
    margin-bottom: 20px;
    margin: 0 5px 20px 5px;
}

.sec_tagWall .tagArea{
    width: 160px;
    margin-right:15px
}

.tagWall .tagInf{
    width: 100%;
    height: auto;
    background-color: #b28850;
    padding: 3px 0;
}

.sec_tagWall .tagInf{
    color:#fff;
}

.tagWall .tagInf li:nth-child(1){
    width:30px;
    height:30px;
    background-color:#fff;
    font-size:14px;
    line-height:30px;
    color: #b28850;
}

.tagWall .tagInf li:nth-child(2){
    font-size:14px;
    line-height: 18px;
    color: #fff;
    margin: 0 5px;
}

.tagWall .tagInf li:nth-child(3){
    color: var(--yellow);
    font-size: 28px;
    font-weight:600;
}

.tagWall .tagInf li:nth-child(3) span{
    font-size:17px;
    margin-left:4px
}

.tagWall .tagIcon{
    height: auto;
    margin-top: -13px;
    padding: 0 0 5px 0;
}

.tagWall .tagIcon img{
    width:auto;
      animation: ldx-coin-h 2s infinite linear
}
@keyframes ldx-coin-h {
    0% {
        animation-timing-function: cubic-bezier(0.5856,0.0703,0.4143,0.9297);
        transform: rotateY(0)
    }
    60% {
        transform: rotateY(1440deg)
    }
    100% {
        transform: rotateY(1440deg)
    }
}


.tagScroll{
    width: auto;
    height: auto;
    display:flex;
    flex-wrap: initial;
    align-items: center;
    justify-content: space-around;
}

.achievement .winner{
    height: 72px;
    overflow: inherit;
    margin: 28px 0 4px 0;
}

.achievement .top_value{
    height: calc( 100% - 32px );
    text-align: left;
    display:flex;
    align-items: center;
    letter-spacing: 2px;
}

.achievement .trophy{
    margin-top: -30px;
}

.achievement .winner_detail{
    width: calc( 100% - 140px );
}

.achievement .top_value span{
    margin:0 10px;
    font-size:24px;
    color:var(--mainRed);
    font-weight:600
}

.achievement .month .select_title{
    background-color:#ec6941
}

.achievement .year .select_title{
    background-color:#5f52a0
}

.achievement .data_area .tit01,
.achievement .data_area .inf01,
.achievement .data_area .tit02,
.achievement .data_area .inf02,
.achievement .data_area .tit03,
.achievement .data_area .inf03,
.achievement .data_area .tit04,
.achievement .data_area .inf04{
    width:calc( 25% - 20px )
}

.achievement .data_area .inf04{
    color:#ff0000;
    font-weight:600
}

.achievement .data_area .owner .inf01,
.achievement .data_area .owner .inf02{
    height: 100%;
    background-color: var(--mainRed);
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    position: relative;
    margin-left: 0;
}

.year .data_area .owner .inf01,
.year .data_area .owner .inf02{
    background-color: var(--yearDarkPurple)
}

.achievement .data_area .owner .inf02:after{
    content:'';
    display:block;
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 60px solid white;
    border-left: 60px solid transparent;
    bottom: 0;
}

.achievement .month .owner{
    border:3px solid #e4007f
}

.achievement .year .owner{
    border:3px solid var(--yearDarkPurple)
}

.achievement .score_area .hide_inf{
    height: 126px;
    height:auto;
    padding: 15px 4% 0 4%;
    background-color: #fadce9;
    flex-wrap: wrap;
    justify-content: flex-start;
    display:flex;
    position: relative;
}

.year .score_area .hide_inf{
    background-color:var(--yearLightPurple)
}

.achievement .score_area .tagArea{
    width: calc( 25% - 14px );
    height: 32px;
    margin-bottom: 15px;
    margin: 0 7px 15px 7px;
}

.achievement .score_area .tagIcon{
    width:25px;
    height:25px
}

.achievement .show_inf02 img{
    width: 20px;
}

.tagDropDown,
.tagDropDown .hide_inf02{
    width: calc( 100% - 25px );
    position:relative;
    justify-content: flex-end;
}

.tagDropDown .hide_inf02{
    width: calc( 100% - 15px );
    position: absolute;
    height:auto;
    background-color: #737373;
    top: 35px;
    z-index: 1;
    border-radius: 10px;
    color:#fff;
    overflow: hidden;
    font-size: 16px;
    line-height: 16px;
}

.tagDropDown .hide_inf02 li{
    padding:10px 0
}

.tagDropDown .hide_inf02 li:nth-child(odd){
    background-color:#a6a6a6
}

.tagDropDown .show_inf02{
    width: calc( 100% - 15px );
    height: 32px;
    justify-content: center;
    display: flex;
    border-radius: 90px;
    align-items: center;
    background-color: #fff;
}

.tagDropDown .show_inf > li:nth-child(1){

}

.tagDropDown .show_arrow02{
    position:absolute;
    right: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    cursor: pointer;
}

.year .select_box,
.year .topThree,
.year .tagInfTxt{
    background-color:#8f82bc
}

.year .select_box select,
.yearAcMobile select{
    border: 1px solid  var(--yearDarkPurple);
    background: url(../images/icon/select_arrow_year.svg) 7% / 7% no-repeat;
    background-color: #ffffff;
    background-position: top 50% right 2px;
    transition: all .3s;
}

.year label{
    color:#fff
}

.year .winner{
    background-color:var(--yearLightPurple)
}

.year .member_score{
    border-left: 1px solid var(--yearDarkPurple);
    border-right: 1px solid var(--yearDarkPurple);
    border-bottom: 1px solid var(--yearDarkPurple);
}

.swiper-button-next.achBtn:after{
    content:url('../images/icon/year_pc.png');
}






/* ----- media query  ----- */

@media(max-width:1280px){

    .visual_title{
        width:400px;
        bottom: 44px;
        /* left: 100px; */
    }

    .leftTexture{
        /* left: 0%; */
    }

    .swiper-button-next.rankBtn,
    .swiper-button-prev.rankBtn{
        /* right:5px; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        top: 164px;
    }


}


@media(max-width:1200px){

    .swiper-button-next.rankBtn,
    .swiper-button-prev.rankBtn{
        top:250px
    }

    .swiper-button-next:after{
        content:url('../images/icon/week_mb.png');
    }

    .swiper-button-prev:after{
        content:url('../images/icon/month_mb.png');
    }

    .swiper-button-next.achBtn:after{
        content:url('../images/icon/year_mb.png');
    }

    .topThree{
        padding: 20px 20px;
    }

    .strategy_box{
        padding: 20px 20px;
    }

    .visual_title{
        bottom: 70px;
    }

    .rightTexture,
    .leftTexture{
        width: 40%;
    }

    .coin02{
        left: 0%;
    }

    .winner:nth-child(odd){
        margin:0
    }

    .achievement .winner{
        margin: 15px 0 0 0;
    }

    .rank{
        padding-top: 178px;
    }

    .goTop{
        width:70px;
        bottom: 7%;
    }

    .original_formula{
        padding:10px 10px
    }

    .month .member_area,
    .week .member_area{
        padding:0 20px
    }

    .rabbit,
    .panda{
        width: 240px;
    }

    .step01 .pc{
        display:none
    }

    .step01 .mobile{
        width: 50px;
        display:block
    }

    .nav-link{
        font-size:18px;
        display: grid;
        border-radius: 5px;
        padding: 4px 20px;
    }

    .activeNav img{
        width: 15px;
        margin:0 auto
    }

    #ruleWeek, #ruleMonth, #ruleItem, #scheduleWeek, #scheduleMonth, #schedule, #bonus{
        top:-200px
    }

    .navHeight{
        padding-top: 200px;
    }

    .schedule.navHeight{
        margin: 0 0 10px 0;
    }

    .activeNav{
        top: 121px;
        height: 59px;
        padding-bottom: 11px;
    }

    .activeNav.stickyAnn{
        top: 114px;
        height: 57px;
        padding-bottom: 8px;
    }

    .sc_winner .bonus{
        font-size:35px;
        line-height: 25px;
    }

    .bonusList .hide_inf ul{
        font-size:18px;
        line-height: 40px;
    }

    .schedule .show_inf{
        font-size:18px;
        line-height: 45px;
        height: 45px;
    }

    .schedule .show_inf .show_arrow{
        width:18px
    }

    .scheduleData h3{
        font-size: 26px;
        line-height: 45px;
    }

    .scheduleData .inf{
        font-size:22px;
        padding: 20px 0;
    }

    .scheduleData .swiper-slide{
        height:auto;
        width: 200px;
    }

    .schedule .swiper-button-next{
        right: 15px !important;
    }

    .selectPc{
        display:none
    }

    .mobileSelect{
        display: block;
        background-color: #ccc0;
    }

    .mobileSelect.stickyAnn{
        top: 117px;
    }

    .tagWall .tagArea{
        width: 225px;
        height: 130px;
        margin: 0 5px 0px 5px;
    }

    .sec_tagWall .tagArea{
        width:160px;
        height:auto
    }

    .tagScroll{
        width:auto;
        height: 135px;
        flex-wrap: initial;
        margin-bottom: 20px;
    }

    .tagWall .tagIcon img{
        width: 60px;
    }

    .tagIcon{
        font-size:14px;
    }

    .tagWall .tagInf{
        height:55px
    }

    .sec_tagWall .tagInf{
        height:auto;
    }

    .tagWall .tagInf li:nth-child(3){
        width: auto;
        font-size: 23px;
    }

    .tagWall .hide_inf{
        display: flex;
    }

    .watermelon{
        right: inherit;
        left: 20%;
    }

}

@media(max-width:1100px){

    .vs_rabbit{
        width:100%;
    }

    .visual_E{
        width: 85%;
    }

    .winnerInf .hide_inf:nth-child(1) .float_txt{
        left: -95px;
        top: -37px;
    }

    .winnerInf .hide_inf:nth-child(2) .float_txt{
        left: -78px;
        top: -56px;
    }

    .e_coin{
        width:700px
    }

    .visualArea:after{
        /* background-size: 240px; */
        background-position: center;
    }

    .coin02{
        left: -5%;
    }

    .greencandy{
        top: 4%;
    }

    .winner{
        width: calc( 33.333% - 10px );
        height: 260px;
        justify-content: center;
        background-color: #f9d3e300;
        box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
    }

    .year .winner{
        background-color: #f9d3e300;
    }

    .achievement .winner{
        margin:0;
        height:auto
    }

    .week .winner{
        background-color: #fff;
    }

    .week .select_content .winner{
        background-color: #fff0;
    }

    .winner:nth-child(odd){
        margin:0
    }

    .winner_detail{
        width:100%;
        height: auto;
        background-color: #f9d3e3;
    }

    .week .winner_detail{
        background-color: #fed557;
    }

    .achievement .winner_detail{
        width:100%;
    }

    .achievement .year .winner_detail{
        background-color:var(--yearLightPurple)
    }

    .achievement .playersCollect{
        align-content:center
    }

    .trophy{
        margin: 0 0 5px 0;
    }

    .achievement .trophy{
        margin: 5px 0;
    }

    .achievement .topThree{
        padding: 15px 30px 30px 30px;
    }

    .achievement .top_value{
        letter-spacing: 0;
        display: block;
        text-align: center;
        margin: 5px 0;
    }

    .playersCollect{
        height: 52px;
        display: flex;
        text-align:center;
        background-color: #fff;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .medal{
        width:100%
    }

    .winnerInf{
        height: calc( 100% - 52px );
        bottom: 0;
    }

    .winnerInf.visible{
        bottom: 0;
        padding: 5px 0;
    }

    .winnerInf .hide_inf .inf{
        font-size: 16px;
    }

    .winnerInf:after{
        width: 100%;
        height: 100%;
        clip-path: none;
        padding: 0;
        left: -1px;
        bottom: 0;
    }

    .winner:before{
        display:none
    }

    .topThree_inf, .topThree_inf02{
        justify-content: center;
        display: block;
        text-align: center;
        margin: 7px 0 0 0;
        padding: 0px 0 5px 0;
    }

    .topThree_inf li, .topThree_inf02 li{
        margin: 3px 0 0 0;
        justify-content: center;
    }

    .winnerInf .hide_inf{
        justify-content:center;
        flex-wrap:wrap;
        align-items: center;
    }

    .winnerInf .hide_inf ul{
        height:inherit
    }

    .winnerInf .hide_inf div:nth-child(1){
        width:100%;
        z-index: 0;
    }

    .calculate .plus{
        width: 65px;
        margin-right: inherit;
    }

    .calculate01 .calculate:nth-child(1) .calculate_V{
        width: 45%;
    }

    .finalResults .calculate_V .cal_title{
        width:150px
    }

    .calculate01 .switch, .calculate01 .switch02{
        width: calc( 100% - 140px );
        justify-content: space-between;
    }

    .calculate_V input, .switch .num, .switch02 .num{
        width: calc( 100% - 32px );
    }

    .dispatchTime{
        margin: 65px 0px 30px 0;
    }

}

@media(max-width:1000px){

    .e_coin{
        width: 650px;
    }

    .coin02{
        left: -40px;
    }

    .strawberry{
        bottom: -22px;
    }

    .diamond{
        display:none
    }

    .rabbit,
    .panda{
        display:none
    }

    .sc_winner{
        width: calc( 33.3% - 50px );
    }

    .weekly .sc_winner:nth-child(even){
        margin: 0 15px;
    }

    .schedule .swiper-button-next, .schedule .swiper-button-prev{
        display:none
    }

    .timeLine .data{
        width:60px;
        height:60px;
        font-size:22px;
        line-height:60px
    }

    .timeLine .bonus .data{
        line-height:55px
    }

    .timeLine{
        height: 220px;
    }

    .sec_inf{
        width: 275px;
    }

    .sec_inf.month{
        left:23%
    }

    .sec_inf.week{
        right:23%
    }

    .sec_inf div{
        font-size: 16px;
        padding: 0 9px;
        line-height: 26px;
        height: 120px;
    }

    .timeLine .data img{
        width: 100px;
        left: -20px;
    }

    .achievement .score_area .tagArea{
        width: calc( 50% - 20px );
    }

}

@media(max-width:850px){

    .blueCherry{
        display:none
    }

    .calculate_V .cal_title{
        width: auto;
        margin-top: inherit;
    }

    .calculate, .finalRanking{
        min-height: 48px;
        height:auto
    }

    .calculate01 .switch, .calculate01 .switch02{
        width:100%
    }

    .calculate01 .calculate:nth-child(1) .calculate_V{
        width: 44%;
    }

    .calculate_V .float_ps{
        top:-5px;
    }

    .rate_cal .float_txt{
        left:-20px;
        top:-123px
    }

    .cherry{
        display:none
    }
}

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

    .visualArea{
        margin-top:40px;
        height: 500px;
    }

    .blue_bgc{
        width: auto;
        height: 90%;
        bottom: -3%;
        margin: 0 auto;
    }

    .bgc_coin{
        display:none
    }

    .e_coin{
        width:100%;
        right: inherit;
    }

    .coin02{
        left: 21%;
        top: inherit;
        bottom: 26%;
    }

    .coin03{
        display:none
    }

    .greencandy{
        display:none
    }

    .strawberry{
        width: 56px;
        left: -40px;
        bottom: 55px;
    }

    .blueseven{
        width:63px;
        right: 30px;
        bottom: inherit;
        top: -3%;
    }

    .chocolate{
        right: -18%;
        top: -29%;
    }

    .leftTexture{
        /* left: 19%; */
    }

    .rankBoard{
        margin-top: -42px;
    }

    .coin01{
        width:70px;
        right: 5%;
    }

    .redcandy{
        right: -40px;
        bottom: -2px;
    }

    .calculate_V input, .switch .num, .switch02 .num{
        width:calc( 100% - 50px );
    }

    .weekSignRule .days{
        width:120px;
    }

    .weekSignRule .arrow{
        width:20px;
        margin:0 10px
    }

    .schedule h3{
        font-size:20px;
    }



}


@media(max-width:768px){

    .select_box label{
        font-size: 16px;
    }


}


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

    .visualArea:after,
    .visualArea:before{
        display:none
    }

    .star01{
        left:-10%
    }

     .visual_title{
        max-width: 328px;
        width: 68%;
        right:0;
        left: 0;
        margin: 0 auto;
        top: 29%;
    }

     .tag_2025{
        width: 70px;
        left: 13%;
        top: 42%;
    }

    .ban_trophy{
        width: auto;
        height: 61%;
        bottom: -35px;
    }

     .vs_rabbit{
        width:auto;
        height:55%;
        left: 0;
        bottom: -7%;
    }

    .visual_E{
        width:auto;
        height:40%;
        bottom:0
    }

    .tagInfTxt{
        font-size:15px
    }

    .rule .float_ps{
        margin-left:5px
    }

    .float_txt{
        font-size: 12px;
        padding: 5px;
        line-height: 17px;
        top: -30px;
    }

    .TagItem{
        width: 150px;
        font-size:12px;
        letter-spacing:0;
    }

    .data_area .hide_inf .inf02 .float_txt{
        width: 150px;
        top: -47px;
    }

    .rule .float_txt{
        left: -70px;
    }

    .winnerInf .hide_inf:nth-child(1) .float_txt{
        left: -80px;
        top: -30px;
    }

    .winnerInf .hide_inf:nth-child(2) .float_txt{
        width: 130px;
        left: -90px;
        top: -48px;
    }

    .winnerInf .float_txt{
        top: -50px;
    }

    .rule .show_inf .float_txt{
        width:150px;
        top: -80px;
    }

    .calAreaBox .txtArea{
        width:200px;
        line-height: 25px;
    }

    .achievement .top_value span{
        font-size:18px
    }

    .member_score{
        font-size:13px
    }

    .achievement .show_inf{
        height:48px
    }

    .achievement .data_area .owner .inf02:after{
        border-bottom: 49px solid white;
        border-left: 22px solid transparent;
        right: -1px;
    }

    .topThree{
        padding:10px
    }

    .topThree,
    .achievement .topThree{
        padding:15px
    }

    .cover_inf{
        width:100%;
        height:100%;
        top: 0;
        left: 0;
        border-radius: 5px;
    }

    .week .cover_inf,
    .month .cover_inf,
    .year .cover_inf{
        border:0px
    }

    .rankCover .txtArea{
        display:block;
    }

    .cover_inf h1{
        width: auto;
        font-size:22px;
        line-height: 30px;
        margin-bottom: 5px;
    }

    .cover_inf h2{
        font-size: 22px;
        margin-bottom: 5px;
        line-height: 30px;
    }

    .cover_inf h3{
        width: auto;
        font-size:18px;
    }

    .cover_inf .txtArea p{
        font-size:16px;
    }

    .strategyCover .txtArea{
        width:100%;
        margin-left: 0;
    }

    .strategyCover .txtArea p{
        display:flex;
        justify-content:center;
        line-height: 35px;
    }

    .cover_inf h2 span{
        font-size:22px;
    }

    .cover_inf .txtArea p span{
        width:80px;
        margin:0 5px
    }

    .index .cover_inf img, .calCover img, .rankCover img{
        width:50px;
        margin-bottom:5px
    }

    .cover_inf a{
        font-size:15px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0 0 0;
        padding: 5px 10px;
    }

    .strategyCover img{
        width:56px;
        margin-bottom:10px
    }

    .box_1125{
        width: 100%;
    }

    .activeNav .box_1125{
        width:98%;
    }

    .rank{
        padding-top: 161px;
    }

    .historyBtn{
        right: 10px;
        top:10px
    }

    .calculate_V input, .switch .num, .switch02 .num{
        letter-spacing:inherit;
        width: calc( 100% - 30px );
    }

    .calculate .plus{
        width:auto;
        margin:0 10px
    }

    .calculate01 .switch,
    .calculate01 .switch02,
    .active .closeBtn,
    .active .closeBtn02,
    .openBtn,
    .openeBtn02,
    .cal_p,
    .pinArea h1,
    .calculateBtn{
        font-size: 16px;
    }

    .open_cal02 .closeBtn02, .open_cal .closeBtn{
        width: 25px;
        height: 25px;
    }

    .calculate_V .cal_title,
    .finalRanking .cal_title{
        font-size:14px
    }

    .rankInfData ul li:nth-child(1){
        font-size:15px
    }

    .finalResults .calculate_V .cal_title{
        width:auto
    }

    .finalResults .final_P{
        width: auto;
        position:relative
    }

    .coin02{
        width: 50px;
        left: 5%;
        bottom: 26%;
    }

    .chocolate{
        right: -13%;
    }

    .coin01{
        width: 60px;
        right: 6%;
        top: 48%;
    }

    @keyframes pulsate-fwd {
        0% {
            -webkit-transform: translate3d(-90px, 100px, 90px);
            transform: translate3d(-40px, 0px, 0px)rotate(0.8turn);
            opacity:0;
        }
        25%{
            opacity:1
        }
        50% {
            -webkit-transform: scale(1);
            transform: translate3d(0px, 0px, 0px)rotate(1turn);
        }
        100% {
            -webkit-transform: scale(1);
            transform: translate3d(0px, 0px, 0px)rotate(1turn);
        }
    }

    .mahjong{
        width:40px;
        top: 42%;
        left:2%
    }

    @keyframes pulsate-fwd2 {
        0% {

            -webkit-transform: translate3d(-90px, 100px, 90px);
                    transform: translate3d(50px, -20px, 0px)rotate(1.1turn);
                    opacity:0;
        }
        25%{
            opacity:1
        }
        50% {
            -webkit-transform: scale(1);
                    transform: translate3d(0px, 0px, 0px)rotate(1turn);
        }
        100% {
            -webkit-transform: scale(1);
                    transform: translate3d(0px, 0px, 0px)rotate(1turn);
        }
    }

    .loginBtn a{
        width:135px;
        height:39px;
        font-size: 14px;
        line-height: 39px;
    }

    .select_box select{
        width: calc( 100% - 76px );
        background-size: 38px;
        margin: 0 3px;
        font-size: 16px;
    }

    .winner{
        font-size:14px;
        width: calc( 33.333% - 5px );
    }

    .achievement .playersCollect{
        height:30px
    }

    .strategy_winner .owner{
        border: 1px solid var(--mainRed);
    }

    .topThree_inf02 .bonus p,
    .strategy_box .bonus{
        font-size: 20px;
        margin-left: 0;
        letter-spacing: 0;
    }

    .goTop{
        width:52px;
        right: 3px;
        bottom: 48px;
    }

    .visual_E{
        left: 3%;
    }

    .strategy_box .tit01{
        font-size:14px;
        letter-spacing: 0;
    }

    .strategy_box .final_P{
        font-size:14px;
        margin:2px 0;
    }

    a.rankingBtn img{
        width: 13px;
        margin: 0 2px 0 0;
    }

    .navHeight .activeNav a{
        padding: 5px 9px 0 9px;
    }

    .calculate01 .calculate:nth-child(1) .calculate_V{
        width: calc( 50% - 20px );
    }

    .calculate, .finalRanking{
        padding:5px 10px
    }

    .month .member_area, .week .member_area{
        padding:0 10px
    }

    .equal{
        margin: 4px 0;
    }

    .multiply{
        margin: 2px 0 4px 0;
    }

    .navHeight{
        padding-top: 170px;
    }

    .schedule.navHeight{
        padding-top: 160px;
    }

    .ruleActivity{
        width:95%;
        margin:0 auto
    }

    .ruleBox{
        width:100%
    }

    .schedule .weekly{
        box-shadow: 0px 5px var(--mainBlue);
    }

    .schedule .monthly{
        box-shadow:0px 5px var(--mainRed)
    }

    .scheduleData,.bonusData{
        box-shadow:0px 5px var(--brown)
    }

    .sec_inf{
        width:240px
    }

    .sec_inf div{
        font-size:14px;
        line-height:20px
    }

     .rate_cal .float_txt{
         top:-98px;
         left:-90px
     }


}

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

    .activityTime .timeData{
        padding: 0 10px;
        font-size: 16px;
    }

    .ruleInf p{
        text-align:center
    }

    .ruleInf .data div{
        justify-content:center;
        text-align:center
    }

    .activityTime .weekly, .activityTime .monthly{
        width: 160px;
        margin:0
    }

    .activityTime .weekly{
        margin-right:5px
    }

    .schedule h3{
        font-size: 15px;
        letter-spacing:0;
        margin: 12px 0 1px 0;
    }

    .sec_inf.month h3, .sec_inf.week h3{
        font-size:18px
    }

    .scheduleData h3{
        font-size: 20px;
        margin:0;
        line-height: 40px;
    }

    .sc_winner .bonus{
        font-size: 23px;
        line-height: 25px;
    }

    .sc_winner .bonus span{
        font-size:16px;
    }

     .sec_inf.month{
        left:2%
    }

    .sec_inf.week{
        right:2%
    }

    .sec_inf.month h3,
    .sec_inf.week h3{
        margin: 0;
    }

    .sec_inf.month:after{
        left: 24%;
    }

    .sec_inf.week:after{
        right:24%
    }

    .sec_inf{
        width: 163px;
    }
}



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

     .tag_2025{
        width: 60px;
        left: 11%;
        top: 46%;
    }

     .watermelon{
        width: 25px;
        right: inherit;
        left: 13%;
        bottom: 13%;
    }

    .vs_rabbit{
        left: -10px;
        height: 47%;
    }

    .visual_E{
        height: 36%;
    }

    .achievement .score_area .hide_inf{
        padding: 15px 2% 0 2%;
    }

    .achievement .score_area .tagArea{
        width: 50%;
        margin: 0 0 10px 0;
        padding-left: 5px;
    }

    .tagDropDown .show_inf02{
        width:95%
    }

    .tagDropDown .hide_inf02{
        width:95%;
        font-size:13px;
    }

    .num_p{
        padding-left: 30px;
    }

    .winnerInf .hide_inf:nth-child(1) .float_txt{
        width: 133px;
        left: -75px;
        top: -34px;
    }

    .calValue .float_txt{
        left: -125px;
    }

    .rate_cal .float_txt{
        left:-180px;
    }

    .float_ps .icon{
        width:15px;
        height:15px;
    }

    .more_btn{
        font-size:16px
    }

    .more_btn:after{
        border-top: 10px solid white;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
    }

    .select_title{
        height:53px;
        font-size: 13px;
    }

    .achievement .select_title{
        height:38px;
        font-size: 16px;
    }

    .data_area{
        font-size:13px
    }

    .data_area .tit01,
    .data_area .inf01{
        width: 15px;
    }

    .data_area .tit02,
    .data_area .inf02{
        width: 26px;
    }

    .data_area .tit03,
    .data_area .inf03,
    .week .show_inf .inf03, .week .select_title .tit03
    {
        width: 87px;
    }

    .show_inf .inf04,
    .select_title .tit04{
        width: 65px;
    }

    .show_inf .inf05,
    .select_title .tit05,
    .show_inf .inf06,
    .select_title .tit06{
        width: 24%;
        position: relative;
    }

    .show_inf .inf06,
    .select_title .tit06{
        width: 20%;
    }

    .show_inf .inf06 span{
        font-size:15px
    }

    .select_title .tit04 p{
        width: 100%;
    }

    .select_title .tit04,
    .select_title .tit05 >div{
        display:block
    }

    .achievement .data_area .tit04,
    .achievement .data_area .inf04{
        width: 30%;
    }

    .achievement .data_area .tit03, .achievement .data_area .inf03{
        width: 95px;
    }

    .show_inf li:last-child{
        right: 5px;
    }

    .topThree,
    .strategy_box{
        padding: 10px 10px 20px 10px;
    }

    .topThree_inf li, .topThree_inf02 li{
        line-height: 19px;
    }

    .topThree_inf02{
        margin-top: 0px;
        margin-bottom: 20px;
    }

    .strategy_box .title{
        margin-bottom: 20px;
    }

    .myRanking{
        letter-spacing:0
    }

    .winner .arrow,
    .show_inf .show_arrow,
    .achievement .show_inf02 img{
        width: 17px;
        height: 17px;
    }

    .winner .arrow{
        bottom: -3px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .winnerInf.visible {
        padding: 5px 0 18px 0;
    }

    .strategy_winner .topThree_inf{
        width:100%
    }

    .rankInfData ul li:nth-child(2){
        width:100%;
        margin:0;
        font-size: 16px;
    }

    .rankInfData ul{
        width:calc( 50%  - 10px )
    }

    .rankInfData ul:nth-child(1){
        width:100%
    }

    .rankInfData{
        justify-content: space-between;
    }

    .firstTime_login p{
        font-size:18px;
        line-height: 28px;
    }

    .firstTime_login button{
        font-size: 14px;
    }

    .step02 .txtArea{
        width:100%;
        order:1;
    }

    .step02 .hand{
        right: 34%;
        bottom: -50px;
    }

    .step02 .exIcon{
        order:2;
        margin: 20px 0 0 0;
    }

    .firstTime_login .hand{
        width:40px
    }

    .step03 .hand{
        bottom: -40px;
    }

    .step04 .hand{
        bottom: -40px;
        left:50px
    }

    .step03 .stePosition .txtArea{
        width: 100%;
        margin: 0 auto;
        position: relative;
    }

    .step03 .exIcon,
    .step04 .exIcon{
        width: 95%;
        position:relative;
    }

    @keyframes otherStep2 {
    from {
        transform:rotate(-180deg)  translate(0);
        }

        to {
            transform:rotate(-180deg)  translate(0px,-10px);
        }
    }

    .weekSignRule .days{
        width: 95px;
    }

    .weekSignRule .arrow{
        width:20px;
        margin:0 3px
    }

    .rule02 p,
    .rule03{
        font-size: 17px;
        letter-spacing: 0;
    }

    .rule .hide_inf{
        padding: 10px 5px;
    }

    .rule .hide_inf p{
        font-size: 15px;
    }

    .rule03,
    .rule01 > div:nth-child(1){
        letter-spacing:inherit
    }

    .gameBox .hide_inf{
        padding: 20px 0px;
        font-size: 16px;
    }

    .ruleBox .weekly, .ruleBox .monthly, .gameBox{
        padding:10px
    }

    .ruleItem{
        padding:10px 0
    }

    .gameBox .show_inf li:nth-child(1),
    .ruleBox{
        font-size:18px;

    }

    .rule .multiply{
        font-weight:inherit
    }

    .rule .show_inf{
        line-height:35px
    }

    .rule h1{
        font-size:24px
    }

    .rule .ruleActivity h1{
        font-size:30px
    }

    .rule h2{
        font-size: 15px;
        margin: 2px 0;
    }

    .rule h1 img{
        width:20px
    }

    .pIcon{
        width:20px;
        height:20px;
        font-size:15px;
        line-height: 20px;
        padding-left: 1px;
    }

    .tiny_pIcon{
        width:1.4em;
        height:1.4em;
        font-size:.8em;
        line-height:1.1em;
        padding:2px;
    }

    .sc_winner{
        width: calc( 33.3% - 20px );
    }

    .schedule .sc_title{
        height:40px;
    }

    .sc_title img,
    .tagWall .title.show_inf > img{
        height:33px
    }

    .scheduleData .week h2, .scheduleData .month h2{
        font-size:24px
    }

    .scheduleData .week div{
        font-size:18px;
    }

    .scheduleData .week div p{
        letter-spacing:0
    }

    .history_list .month{
        width:42%
    }

   .history_list .bonus{
         width:58%
    }

    .historyData .all_award span{
        font-size:18px;
    }

    .historyData .all_award{
        font-size:16px
    }

    .historyData .title{
        font-size: 18px;
    }

    .historyData .all_award img{
        width:20px;
    }

    .data_area .hide_inf .inf02 .float_txt{
        width: 120px;
        left: -125px;
    }

    .calDataTitle .float_txt{
        width: 200px;
    }

    .rule p.bluePs{
        font-size:13px;
        margin-top:5px
    }

}

@media(max-width:420px){
    .vs_rabbit{
        left: -20px;
        height: 40%;
    }

    .visual_E{
        height: 30%;
    }
}


@media(max-width:375px){

    .vs_rabbit{
        left: -35px;
        height: 45%;
    }

    .visual_E{
        height:34%;
    }

    .show_inf .inf04,
    .select_title .tit04{
        width: 50px;
    }

    .num_p, .finalResults .final_P{
        font-size:25px;
        letter-spacing:1px
    }

    .num_p{
        padding-left: 30px;
    }

    .show_inf .inf05, .select_title .tit05, .show_inf .inf06, .select_title .tit06{
        width:23%
    }

    .show_inf .inf06, .select_title .tit06{
        width:22%
    }


    .ruleInf{
        font-size: 16px;
    }

     .bonus_detail.currentState li:nth-child(1):before{
        left: 15%;
    }

    .achievement .data_area .tit01, .achievement .data_area .inf01{
        width: calc(25% - 5px);
    }

    .achievement .data_area .tit02, .achievement .data_area .inf02{
        width: calc(25% - 30px);
    }
}

@media(max-width:360px){

    .tag_2025{
        width: 50px;
        left: 7%;
        top: 52%;
    }

    .medal span{
        width:22px
    }

    .visualArea{
        height: 420px;
    }

    .visual_title{
        width: 250px;
        top: 35%;
    }

    .cherry{
        width:60px
    }

    .rankInfData{
        margin: 2px 0 5px 0;
    }

    .calBtnBox{
        margin: 3px 0 3px 0;
    }

    .step02 .exIcon{
        top: 38px;
    }

    .nav-link{
        font-size: 15px;
    }

    .activityTime .timeData p:nth-child(1){
        font-size: 17px;
    }

    .activityTime h3{
        width: auto;
        padding: 10px 2px;
    }

    .activityTime img{
        width:20px
    }

    .activeNav{
        top: 115px;
        padding-bottom: 8px;
    }

    .activeNav.stickyAnn{
        height: 52px;
    }

    .weekSignRule .days{
        width: 85px;
    }

    .scheduleData .week div{
        font-size:16px;
    }

    .bonusList .hide_inf ul{
        font-size:16px
    }
}

@media(max-width:330px){

    .ban_trophy{
        height: 61%;
        bottom: -20px;
    }

    .vs_rabbit{
        left:0;
    }

    .swiper-button-next.rankBtn,
    .swiper-button-prev.rankBtn{
        top:215px
    }

    .achievement .data_area .tit04, .achievement .data_area .inf04{
        width: 27%;
    }

    .winner .arrow{
        bottom: 5px;
    }

    .calculateBtn{
        padding:0 12px
    }

    .rank{
        padding-top: 136px;
    }

    .mobileSelect{
        top: 110px;
    }

    .mobileSelect.stickyAnn{
        top: 99px;
    }

    .calculate01 .switch, .calculate01 .switch02, .active .closeBtn, .active .closeBtn02, .openBtn, .openeBtn02, .cal_p,.calculateBtn{
        font-size:14px
    }

    .open_cal02 .closeBtn02, .open_cal .closeBtn{
        width: 23px;
        height: 23px;
        margin-left:3px
    }

    .cal_icon img{
        width:11px
    }

    .num_p, .finalResults .final_P,
    .finalData,
    .calculate02 .switch .num,
    .calculate02 .switch02 .num{
        font-size:20px;
    }

    .finalData{
        margin-left:0
    }

    .rankingBtn, .upRanking, .downRanking{
        width:96%;
        margin: 5px auto;
    }

    .topThree_inf02 .bonus p,
    .strategy_box .bonus{
        font-size: 17px;
        letter-spacing: 0;
    }

    .select_box select{
        height: 35px;
        font-size: 14px;
    }

    .mobileSelect > div{
        padding:5px 0
    }

    .data_area .tit01, .data_area .inf01{
        width: 13px;
        margin-left: 2px;
    }

    .data_area .tit02, .data_area .inf02{
        width: 26px;
    }

    .show_inf .inf05,
    .select_title .tit05,
    .show_inf .inf06,
    .select_title .tit06{
        width: 20%;
    }

    .show_inf .inf04,
    .select_title .tit04{
        width: 40px;
    }

    .score_area .inf04 img,
    .medal span{
        width:20px
    }

    .ruleInf{
        font-size: 14px;
    }

    .weekSignRule .days{
        width:70px;
    }

    .activityTime .timeData{
        padding:0 4px
    }

    .nav-link{
        font-size: 14px;
    }

    .sec_inf{
        width: 150px;
    }

    .schedule.navHeight{
        padding-top: 155px;
    }

    .visual_title{
        width: 210px;
        top: 33%;
    }

    .visualArea{
        height: 350px;
    }

    .activeNav{
        top: 100px;
        padding-bottom: 8px;
    }

    .activeNav.stickyAnn{
        top: 98px;
        height: 50px;
        padding-bottom: 8px;
    }

    .history_list .month{
        width:35%
    }

   .history_list .bonus{
        width:65%
    }

    .currentState div:nth-child(1):before{
        border: 20px solid;
        border-color: transparent transparent transparent #535353;
        border-width: 5px 0 5px 9px;
    }

    .bonus_Box .hide_inf li:nth-child(1){
        padding-left:5px
    }

    .bonus_detail.currentState li:nth-child(1):before{
        left: 5%;
    }
}