@charset "utf-8";
@import url('point.css');

/* 공통 컬러 */
.game-stake-type, .pop-box.game-stake {
    --title-color: #496580;
    --main-blue: #5168ff;
    --blue-grey: #97a1c8;
    --bd-box: #bfcdf0;
    --bd-box-point: #79a4ff; 
    --bg-pop-box: #ebf2fa;
    --bg-pop-content: #d9e2ec;
    --bd-pop-content: #c3ccd6;
    --pop-color-grey: #71869c;
    --color-light-red: #fd0404;
}

.text-blue {
    color: var(--main-blue);
}
.text-black {
    color: var(--text-black-title);
}

/* 아이콘 */
.icon-game-token {
    width: 40px;
    height: 40px;
    background: url(../images/game-stake/ico-game-token.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-game-token-sm {
    width: 32px;
    height: 32px;
    background: url(../images/game-stake/ico-game-token-sm.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-game-token-pop {
    width: 30px;
    height: 30px;
    background: url(../images/game-stake/ico-game-token-pop.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-game-token-pop-sm {
    width: 24px;
    height: 24px;
    background: url(../images/game-stake/ico-game-token-pop-sm.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-cloud-coin {
    width: 36px;
    height: 36px;
    background: url(../images/game-stake/ico-cloud-coin.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-cloud-coin-sm {
    width: 24px;
    height: 24px;
    background: url(../images/game-stake/ico-cloud-coin-sm.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-boost-symbol {
    width: 16px;
    height: 16px;
    background: url(../images/game-stake/ico-boost.svg) 0 0 no-repeat;
}
.icon-clock-white {
    width: 32px;
    height: 32px;
    background: url(../images/game-stake/ico-clock-white.svg) 0 0 no-repeat;
}
.icon-clock-red {
    width: 36px;
    height: 36px;
    background: url(../images/game-stake/ico-clock.svg) 0 0 no-repeat;
}
.icon-clock-red-light {
    width: 36px;
    height: 36px;
    background: url(../images/game-stake/ico-clock-light.svg) 0 0 no-repeat;
}
.icon-pop-alert {
    width: 24px;
    height: 24px;
    background: url(../images/game-stake/ico-pop-alert.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-pop-info {
    width: 24px;
    height: 24px;
    background: url(../images/game-stake/ico-pop-info.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-pop-arrow {
    width: 16px;
    height: 16px;
    background: url(../images/game-stake/ico-pop-arrow.svg) 0 0 no-repeat;
}
.icon-pop-arrow-down {
    width: 18px;
    height: 18px;
    background: url(../images/game-stake/ico-arrow-down.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-check-done {
    width: 32px;
    height: 32px;
    background: url(../images/game-stake/ico-check-done.svg) 0 0 no-repeat;
}
.icon-loading-blue {
    width: 30px;
    height: 30px;
    background: url(../images/game-stake/ico-loading-blue.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-loading-white {
    width: 30px;
    height: 30px;
    background: url(../images/game-stake/ico-loading-white.png) 0 0 no-repeat;
    background-size: contain;
}
.icon-loading-grey {
    width: 30px;
    height: 30px;
    background: url(../images/game-stake/ico-loading-grey.png) 0 0 no-repeat;
    background-size: contain;
}

/* 버튼 */
.btn-blue {
    width: 252px;
    background: linear-gradient(180deg, #79A4FF 0%, #5168FF 100%);
}
.btn-grey {
    width: 152px;
    background: linear-gradient(0deg, #97A1C8 0%, #BFCDF0 100%);
}
.btn-blue, .btn-grey {
    overflow: hidden;
    position: relative;
    display: block;
    height: 44px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 22px;
}
.btn-blue > span, .btn-grey > span {
    position: relative;
    z-index: 1;
}
.btn-blue.disabled, .btn-blue:disabled,
.btn-grey.disabled, .btn-grey:disabled {
    opacity: 50%;
    pointer-events: none;
}
.btn-blue:hover::after, .btn-blue:active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #79A4FF 0%, #5168FF 100%);
    opacity: .6;
    mix-blend-mode: multiply;
}
.btn-grey:hover::after, .btn-grey:active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, #97A1C8 0%, #BFCDF0 100%);
    opacity: .6;
    mix-blend-mode: multiply;
}
.btn-stake {
    width: 100%;
    margin-bottom: 20px;
    transition: all 0.2s linear;
}
.btn-grey + .btn-grey {
    margin-left: 20px;
}
.btn-common {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 22px;
    transition: all 0.2s linear;
}
.btn-line {
    color: var(--pop-color-grey);
    border: 2px solid var(--pop-color-grey);
    transition: all 0.2s linear;
}
.btn-line:hover {
    color: var(--blue-grey);
    border-color: var(--blue-grey);
}
.btn-line:active {
    color: var(--text-black-title);
    border-color: var(--text-black-title);
}
.btn-line:disabled, .btn-line.disabled {
    color: rgba(113, 134, 156, .5);
    border-color: rgba(113, 134, 156, .5);
    pointer-events: none;
}
.btn-color {
    color: #fff;
    background-color: var(--pop-color-grey);
    transition: all 0.2s linear;
}
.btn-color:hover {
    background-color: var(--blue-grey);
}
.btn-color:active {
    background-color: var(--text-black-title);
}
.btn-color:disabled, .btn-color.disabled {
    background-color: rgba(113, 134, 156, .5);
    pointer-events: none;
}
.btn-pop-small {
    width: 80px;
    height: 22px;
    font-size: 13px;
    border-radius: 11px;
}

/* 상단탭 */
.header-wrap.stake-type {
    background: transparent;
}
.header-wrap .main-tab {
    display: flex;
    gap: 22px;
}
.header-wrap .main-tab .tab-item {
    position: relative;
}
.header-wrap .main-tab .tab-link {
    display: block;
    padding: 10px 11px;
    color: #71869c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}
.header-wrap .main-tab .tab-item.on .tab-link {
    color: #1a1717;
}
.header-wrap .main-tab .tab-item:hover .tab-link {
    color:#97a1c8;
}
.header-wrap .main-tab .tab-item:active > .tab-link {
    color:#1a1717;
}
.header-wrap .main-tab .tab-item:hover .sub-tab {
    display: block;
}
.header-wrap .sub-tab {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 0;
    background: rgba(191, 205, 240, .8);
    border-radius: 8px;
    text-align: center;
}
.header-wrap .sub-tab .tab-item + .tab-item {
    margin-top: 10px;
}
.header-wrap .sub-tab .tab-link {
    padding: 3px 15px;
    font-size: 13px;
}
.header-wrap .sub-tab .tab-item:hover > .tab-link,
.header-wrap .sub-tab .tab-item.on > .tab-link {
    color: #1a1717;
}
.header-wrap.stake-type .header-sns-menu .btn-header-sns-nav {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}
.header-wrap.stake-type .header-sns-menu .btn-header-sns-nav+.btn-header-sns-nav {
    margin-left: 19px;
}
.header-wrap.stake-type .header-sns-menu .btn-header-sns-nav:hover svg {
    fill: #97a1c8
}
.header-wrap.stake-type .header-sns-menu .btn-header-sns-nav:active svg {
    fill: #1a1717
}
.header-wrap.stake-type .header-btn-wrap .btn-connect,
.header-wrap.stake-type .header-btn-wrap .connect-txt,
.header-wrap.stake-type .header-btn-wrap .disconnect-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 115px;
    height: 32px;
    margin-left: 28px;
    padding: 0;
    font-size: 11px;
    line-height: 1.3;
}
.header-wrap.stake-type .header-btn-wrap .btn-connect:hover {
    background-color: #97a1c8;
}
.header-wrap.stake-type .header-btn-wrap .btn-connect:active {
    background-color: #1a1717;
}
.header-wrap.stake-type .header-btn-wrap .btn-connect {
    background-color: #71869c;
}
/* .header-wrap.stake-type .header-btn-wrap .connect-txt,
.header-wrap.stake-type .header-btn-wrap .disconnect-txt {
    width: 115px;
    height: 32px;
    font-size: 11px;
    line-height: 1.3;
} */

/* 메인페이지 */
.game-stake-type {
    background: url(../images/game-stake/img-main-bg.jpg) 50% 50% no-repeat;
    background-size: cover;
}
.game-stake-type .main-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 166px;
}
.game-stake-type .main-content .game-token-img {
    position: absolute;
    top: 228px;
    left: calc(50% - 390px);
    width: 112px;
    height: 112px;
    background: url(../images/game-stake/img-game-token-type2.png) 0 0 no-repeat;
    background-size: contain;
}
.game-stake-type .main-wrap .box {
    position:  relative;
    width: 840px;
    padding: 44px;
    background: rgba(255, 255, 255, .4);
    border: 1px solid var(--bd-box);
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: none;
    backdrop-filter: blur(8px);
    text-align: center;
}
.game-stake-type .box + .box {
    margin-top: 40px;
}
.game-stake-type .box.split-type {
    display: flex;
    padding: 44px 0;
}
.game-stake-type .box.cloud-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-color: var(--bd-box-point);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) -1.49%, rgba(121, 164, 255, 0.4) 100%);
}
.game-stake-type .box.cloud-type::before {
    content: '';
    position: absolute;
    bottom: 88px;
    right: 112px;
    width: 150px;
    height: 102px;
    background: url(../images/game-stake/img-cloud-coin-type3.png) 0 0 no-repeat;
    background-size: contain;
}
.game-stake-type .main-wrap .content-title {
    padding-bottom: 70px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.game-stake-type .box .box-title {
    margin-bottom: auto;
    color: var(--title-color);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}
.game-stake-type .box .total-box {
    margin-top: 15px;
}
.game-stake-type .box .total-box .total-num {
    color: var(--text-black-title);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.3;
}
.game-stake-type .box .token-img {
    position: absolute;
    top: 48px;
    right: 48px;
    width: 180px;
    height: 180px;
    background: url(../images/game-stake/img-game-token-type1.png) 0 0 no-repeat;
    background-size: contain;
}
.game-stake-type .box .left-side,
.game-stake-type .box .right-side {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 50%;
    box-sizing: border-box;
}
.game-stake-type .box .left-side {
    padding: 0 47px 0 48px;
}
.game-stake-type .box .left-side::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 100%;
    background: var(--bd-box);
}
.game-stake-type .box .left-side .amount-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
.game-stake-type .box .left-side .text-num {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
}
.game-stake-type .box .left-side .amount-locked-game {
    margin-top: 8px;
    font-size: 0;
}
.game-stake-type .box .left-side .amount-locked-game dt,
.game-stake-type .box .left-side .amount-locked-game dd {
    display: inline-block;
    color: var(--blue-grey);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    vertical-align: top;
}
.game-stake-type .box .left-side .amount-locked-game dd {
    margin-left: 10px;
    font-weight: 600;
}
.game-stake-type .box .left-side .btn-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 44px;
}
.game-stake-type .box .right-side {
    padding: 0 48px 0 47px;
}
.game-stake-type .box .right-side .boost-box {
    position: relative;
    overflow: hidden;
    width: 170px;
    height: 107px;
    margin: 20px 0 30px;
    background: #cad5f3;
    border-radius: 10px;
}
.game-stake-type .box .right-side .boost-box video {
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(.8);
}
.game-stake-type .box .right-side .info-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--blue-grey);
    font-size: 18px;
    font-weight: 500;
}
.game-stake-type .box .right-side .amount-coin {
    display: flex;
    align-items: center;
    color: var(--main-blue);
}
.game-stake-type .box .right-side .icon-cloud-coin-sm {
    margin-right: 10px;
}
.game-stake-type .box .right-side .info-box strong {
    font-weight: 600;
}
.game-stake-type .box .right-side .boost-info-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}
.game-stake-type .box .right-side .gauge-box {
    position: relative;
    overflow: hidden;
    width: 252px;
    height: 44px;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--bd-box);
    border-radius: 8px;
    box-sizing: border-box;
}
.game-stake-type .box .right-side .gauge-back {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bd-box);
    border-radius: 6px;
}
.game-stake-type .box .right-side .gauge-bar {
    position: absolute;
    top: 3px;
    left: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(0deg, #5F6F99 0%, #A0AAD1 100%);
    border-radius: 6px;
}
.game-stake-type .box .right-side .gauge-bar.next::after{
    content: '';
    position: absolute;
    top: 0;
    right: -11px;
    width: 14px;
    height: 36px;
    background: linear-gradient(0deg, #5F6F99 0%, #A0AAD1 100%);
    opacity: 50%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    animation: gauge 3s ease-in-out infinite;
}
.game-stake-type .box .right-side .current-boost {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 44px;
    border-radius: 6px;
    background: rgba(151, 161, 200, .8);
}
.game-stake-type .box .right-side .current-boost .boost-text {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.game-stake-type .box .right-side .current-boost .day-text {
    color: #d8d6ff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.game-stake-type img {
    display: block;
    width: 100%;
}
.game-stake-type .box.cloud-type .box-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.game-stake-type .box.cloud-type .img-cloud-coin {
    width: 160px;
    height: 160px; 
    margin: 25px 0;
}
.game-stake-type .box.cloud-type .coin-num {
    color: var(--main-blue);
    font-size: 36px;
    font-weight: 600;
}
.game-stake-type .img-cloud-buggy {
    position: absolute;
    bottom: 0;
    left: 80px;
    width: 239px;
    height: 280px;
}
.game-stake-type .boost-banner {
    position: absolute;
    top: 44px;
    right: 48px;
}
.boost-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 112px;
    height: 28px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    background: linear-gradient(0deg, #5F6F99 0%, #A0AAD1 100%);
}
.boost-banner.no-boost .icon-boost-symbol {
    display: none;
}
.boost-banner.step2 {
    background: linear-gradient(0deg, #3E5CAE 0%, #95A5E2 100%);
}
.boost-banner.step3 {
    background: linear-gradient(0deg, #1F47B8 0%, #7B91E9 100%);
}
.boost-banner.step4 {
    background: linear-gradient(0deg, #6E01CE 0%, #E251FF 100%);
}

.game-stake-type .time-banner {
    position: fixed;
    top: 120px;
    right: 40px;
    width: 234px;
    height: 112px;
    padding: 16px;
    color: #fff;
    background: var(--text-error);
    border-radius: 8px;
    box-sizing: border-box;
    text-align: center;
    z-index: 100;
    animation: time-banner 3s ease-in-out infinite;
}
.game-stake-type .time-banner .info-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}
.game-stake-type .time-banner .time-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 24px;
    font-weight: 600;
}

@keyframes time-banner {
    20% {
        background: var(--color-light-red);
    }
    50% {
        background: var(--text-error);
    }
    80% {
        background: var(--color-light-red);
    }
}

@keyframes gauge {
    20% {
        opacity: 0;
    }
    50% {
        opacity: 50%;
    }
    80% {
        opacity: 0;
    }
}

/* 팝업 */
.pop-box.game-stake {
    background: var(--bg-pop-box);
    box-sizing: border-box;
}
.open-pop {
    width: 360px;
    height: 404px;
    padding: 44px 32px 36px;
}
.open-pop .pop-title {
    padding: 0;
    color: var(--text-black-title);
    font-size: 24px;
    font-weight: 600;
}
.open-pop .pop-content {
    height: 140px;
    margin: auto 0;
    border: 1px solid var(--bd-pop-content);
    background: var(--bg-pop-content);
    border-radius: 8px;
}
.open-pop .pop-content .open-info {
    color: var(--text-black-title);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.open-pop .pop-content .time-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--text-error);
    animation: time 1s linear infinite;
}
.open-pop .pop-content .time-box .time-text {
    font-size: 40px;
    font-weight: 600;
}
.open-pop .pop-content .time-box .icon-clock-red {
    animation: clock 1s linear infinite;
}
.open-pop .btn-connect {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 184px;
    height: 44px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background-color: var(--pop-color-grey);
    border-radius: 22px;
    transition: all 0.2s linear;
}
.open-pop .btn-connect:hover {
    background-color: var(--blue-grey);
}
.open-pop .btn-connect:active {
    background-color: var(--text-black-title);
}

@keyframes time {
    to {
        color: var(--color-light-red);
    }
}
@keyframes clock {
    to {
        background-image: url(../images/game-stake/ico-clock-light.svg);
    }
}

.pop-box.common-size {
    width: 452px;
    height: auto;
    /* min-height: 396px; */
    padding: 44px 36px 36px;
}
.pop-box.scroll-type {
    padding: 44px 24px 36px 36px;
}
.stake-pop {
    width: 100%;
    margin: 32px 0 36px;
}
.pop-box.scroll-type .stake-pop {
    overflow-y: auto;
    max-height: 400px;
    padding-right: 12px;
}
.stake-pop .stake-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stake-pop .header-title {
    color: var(--title-color);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
}
.stake-pop .stake-header .stake-info {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--pop-color-grey);
    font-size: 13px;
    font-weight: 500;
}
.stake-pop .stake-header .stake-info strong {
    color: var(--main-blue);
    font-weight: 600;
}
.stake-pop .stake-body {
    position: relative;
    height: 104px;
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 30px;
    box-sizing: border-box;
    background: var(--bg-pop-content);
    border: 1px solid var(--bd-pop-content);
    border-radius: 8px;
}
.stake-pop .stake-body.unstake {
    height: 80px;
    margin-top: 0;
}
.stake-pop .stake-body.unstake .amount-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}
.stake-pop .stake-body.unstake .amount-box .box-num {
    color: var(--text-black-title);
    font-size: 22px;
    font-weight: 600;
}
.stake-pop .stake-body.unstake + .history-wrap {
    margin-top: -6px;
}
.stake-pop .min-text {
    position: absolute;
    top: 12px;
    left: 14px;
    color: var(--pop-color-grey);
    font-size: 13px;
    font-weight: 500;
}
.stake-pop  .game-balance {
    color: var(--pop-color-grey);
    font-size: 13px;
    font-weight: 500;
}
.stake-pop  .game-balance dt, .stake-pop  .game-balance dd {
    display: inline-block;
    vertical-align: top;
}
.stake-pop  .game-balance dd {
    padding-left: 4px;
    font-weight: 600;
}
.stake-pop .stake-body .input-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
}
.stake-pop .stake-body .input-box .input-item {
    background-color: transparent;
    border: none;
    width: auto;
    padding: 0;
    font-size: 22px;
    font-weight: 600;
    text-overflow: initial;
}
.stake-pop .stake-body .choice-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.stake-pop .stake-body .choice-box .choice-item {
    display: block;
    width: 50px;
    height: 18px;
    color: var(--pop-color-grey);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    border-radius: 9px;
    border: 1px solid var(--pop-color-grey);
}
.stake-pop .stake-body .choice-box .choice-item:hover {
    color: var(--blue-grey);
    border-color: var(--blue-grey);
}
.stake-pop .stake-body .choice-box input[type="radio"] {
    display: none;
}
.stake-pop .stake-body .choice-box input[type="radio"]:checked + .choice-item {
    color: #fff;
    background-color: var(--pop-color-grey);
}
.stake-pop .stake-footer {
    padding-top: 32px;
    border-top: 1px solid var(--bd-pop-content);
}
.stake-pop .stake-footer .cloud-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stake-pop .stake-footer .cloud-item + .cloud-item {
    margin-top: 18px;
}
.stake-pop .stake-footer .cloud-item .item-title {
    color: var(--title-color);
    font-size: 16px;
    font-weight: 600;
}
.stake-pop .stake-footer .cloud-item .item-text {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--main-blue);
    font-size: 18px;
    font-weight: 500;
}
.stake-pop .stake-footer .cloud-item .item-text strong {
    font-weight: 600;
}
.stake-pop.no-item .stake-footer {
    opacity: 50%;
}
.stake-pop  .boost-reset-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    background: var(--bg-pop-content);
    border: 1px solid var(--text-error);
    border-radius: 8px;
}
.stake-pop .boost-reset-box .change-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}
.stake-pop .boost-reset-box .change-box .icon-pop-arrow-down {
    transform: rotate(-90deg);
}
.pop-info-text {
    margin-top: 6px;
    color: var(--pop-color-grey);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.stake-pop .pop-info-text.alert {
    color: var(--text-error);
}
.stake-pop .history-wrap {
    overflow: hidden;
    margin-top: 24px;
    background: var(--bg-pop-content);
    border: 1px solid var(--bd-pop-content);
    border-radius: 8px;
    transition: all 0.2s linear;
}
.stake-pop .history-wrap .btn-history {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    color: var(--pop-color-grey);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s linear;
}
.stake-pop .history-wrap:hover {
    border-color: var(--pop-color-grey);
}
.stake-pop .history-wrap:hover .btn-history {
    color: var(--title-color);
}
.stake-pop .history-wrap .btn-history:hover .icon-pop-arrow-down {
    background-image: url(../images/game-stake/ico-arrow-down-hover.png);
}
.stake-pop .history-wrap .btn-history.close .icon-pop-arrow-down {
    animation: arrowUp .3s linear forwards;
}
.stake-pop .history-wrap .btn-history.open .icon-pop-arrow-down {
    animation: arrowDown .3s linear forwards;
}
.stake-pop .history-wrap .btn-history.open ~ .history-list {
    display: block;
}
.stake-pop .history-wrap .history-list {
    display: none;
    padding: 0 18px;
}
.stake-pop .history-list .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    border-top: 1px solid var(--bd-pop-content);
    box-sizing: border-box;
}
.stake-pop .history-list .list-item .amount-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.stake-pop .history-list .list-item .box-num {
    color: var(--text-black-title);
    font-size: 16px;
    font-weight: 600;
}
.stake-pop .history-list .list-item .btn-box {
    overflow: hidden;
    display: block;
    margin: 0;
}
.stake-pop .history-list .list-item .btn-box .btn-pop-small {
    float: right;
}
.stake-pop .history-list .list-item .btn-box .info-text {
    display: inline-block;
    margin-top: 0;
    margin-right: 13px;
    color: var(--pop-color-grey);
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
    vertical-align: top;
}
@keyframes arrowDown {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-180deg);
    }
}
@keyframes arrowUp {
    from {
        transform: rotate(-180deg);
    }
    to {
        transform: rotate(0);
    }
}
.pop-box.game-stake .btn-box {
    display: flex;
    gap: 20px;
}
.pop-box.game-stake .btn-box .state {
    display: none;
}
.pop-box.game-stake .btn-box .loading .text {
    display: none;
}
.pop-box.game-stake .btn-box .loading .state {
    display: flex;
}
.pop-box.game-stake .open-banner {
    width: 100%;
    height: 57px;
    padding: 7px 0 8px;
    margin-top: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    background: var(--text-error);
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
    animation: time-banner 3s ease-in-out infinite;
}
.pop-box.game-stake .open-banner strong {
    font-weight: 700;
}
.pop-box .stake-token {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 80px;
    margin: 32px 0;
    background: var(--bg-pop-content);
    border: 1px solid var(--bd-pop-content);
    border-radius: 8px;
    box-sizing: border-box;
}
.pop-box .stake-token.unstake-type {
    height: 72px;
    gap: 4px;
    margin: 0;
}
.pop-box .stake-token + .stake-token {
    margin-top: 12px;
}
.pop-box .stake-token .token-title {
    color: var(--pop-color-grey);
    font-size: 13px;
    font-weight: 600;
}
.pop-box .stake-token .token-title em {
    font-weight: 500;
}
.pop-box .stake-token .token-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-black-title);
    font-size: 22px;
    font-weight: 600;
}
.pop-box .state-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 24px;
    margin-bottom: 62px;
    box-sizing: border-box;
}
.pop-box .state-box .state-item {
    position: relative;
    display: flex;
    align-items: center;
}
.pop-box .state-box .state-item.ing .state-img {
    background: url(../images/game-stake/ico-loading-blue.png) 0 0 no-repeat;
    background-size: contain;
    border: none;
    animation: rotate1 1s linear infinite;
}
.pop-box .state-box .state-item.done .state-img {
    background: url(../images/game-stake/ico-check-done.png) 0 0 no-repeat;
    background-size: contain;
    border: none;
}
.pop-box .state-box .state-item.ing .state-text,
.pop-box .state-box .state-item.done .state-text {
    color: var(--main-blue);
}
.pop-box .state-box .state-item .state-img {
    display: block;
    width: 32px;
    height: 32px;
    background: var(--bg-pop-content);
    border: 1px solid var(--bd-pop-content);
    border-radius: 50%;
    box-sizing: border-box;
}
.pop-box .state-box .state-item .state-text {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--title-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.pop-box .state-box .state-item.dot-type {
    gap: 10px;
}
.pop-box .state-box .state-item.dot-type.done .dot {
    background: var(--main-blue);
}
.pop-box .state-box .state-item .dot {
    width: 6px;
    height: 6px;
    background: var(--pop-color-grey);
    border-radius: 50%;
}
.pop-box .pop-info-box {
    margin-bottom: 28px;
}

@keyframes rotate1 { 
    0%{ 
        transform:rotate(0deg); 
    } 
    100%{ 
        transform:rotate(360deg);  
    }
}

.game-stake .pop-content.unstake-type {
    padding: 26px;
    margin: 32px auto 35px;
    background: var(--bg-pop-content);
    border: 1px solid var(--bd-pop-content);
    border-radius: 8px;
    box-sizing: border-box;
}
.game-stake .pop-content.unstake-type .pop-info-text {
    margin-top: 11px;
    color: var(--title-color);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}
.game-stake .pop-content.unstake-type .boost-banner {
    width: 124px;
    height: 31px;
    font-size: 16px;
}
.game-stake .pop-content .unlock-info-text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    width: 100%;
    margin: 31px auto 36px;
    color: var(--title-color);
    font-size: 18px;
    font-weight: 600;
    background: var(--bg-pop-content);
    border: 1px solid var(--bd-pop-content);
    border-radius: 8px;
}
.game-stake .unstake-box {
    width: 100%;
    margin: 32px 0 16px;
}
.game-stake .unstake-box + .pop-info-text {
    margin: 0 auto 16px;
}
.game-stake .unstake-box + .pop-info-text.unlock-type {
    margin: 6px auto 24px;
}

.unlock-choice-list {
    margin-top: 10px;
}
.unlock-choice-list .list-item + .list-item {
    margin-top: 11px;
}
.unlock-choice-list input[type="radio"] {
    display: none;
}
.unlock-choice-list input[type="radio"]:checked + label.choice-item {
    border-color: var(--title-color);
}
.unlock-choice-list input[type="radio"]:checked + label.choice-item .check-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--title-color);
    border-radius: 50%;
}
.unlock-choice-list .choice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 59px;
    padding: 11px 20px;
    background: var(--bg-pop-content);
    border: 1px solid var(--bd-pop-content);
    border-radius: 8px;
    box-sizing: border-box;
}
.unlock-choice-list .choice-item:hover {
    border-color: var(--pop-color-grey);
}
.unlock-choice-list .choice-item .left-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--text-black-title);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
.unlock-choice-list .choice-item .left-box .sub-text {
    color: var(--main-blue);
    font-size: 12px;
}
.unlock-choice-list .choice-item .right-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.unlock-choice-list .choice-item .right-box .info-text {
    margin-top: 0;
    color: var(--pop-color-grey);
    font-size: 13px;
}
.unlock-choice-list .choice-item .right-box .num-text {
    font-size: 14px;
    font-weight: 600;
}
.unlock-choice-list .choice-item .check-box {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bd-pop-content);
}