@charset "UTF-8";

body,
html {
    margin: 0;
    padding: 0;
    background: #262626
}

a,
b,
button,
canvas,
code,
dd,
div,
dl,
dt,
em,
form,
h1,
h2,
h3,
h4,
i,
iframe,
img,
input,
li,
ol,
option,
p,
pre,
select,
span,
strong,
table,
tbody,
textarea,
thead,
ul,
video,
xmp {
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    outline: 0;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

audio,
dd,
dl,
dt,
ol,
p,
ul,
video {
    display: block;
    border: 0
}

img {
    display: block;
    border: 0;
    -webkit-user-drag: none
}

a {
    text-decoration: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer
}

a:hover {
    text-decoration: none
}

li {
    display: block;
    list-style: none
}

textarea {
    resize: none;
    outline: 0;
    font-family: inherit
}

input,
textarea {
    outline: 0;
    font-size: .12rem;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important
}

::-webkit-scrollbar {
    width: .06rem;
    height: .08rem;
    background: #acacac
}

::-webkit-scrollbar-thumb {
    background: #464646;
    width: .08rem;
    border-radius: .08rem
}

::-webkit-input-placeholder {
    color: #afafb6 !important
}

::-moz-placeholder {
    color: #afafb6 !important
}

::-ms-input-placeholder {
    color: #afafb6 !important
}

input[disabled] {
    background: rgba(184, 184, 184, .5);
    color: #9a9a9a;
}

.clear {
    height: 1%;
}

.clear:after {
    content: '.';
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.hidden {
    visibility: hidden !important
}

.overhidden {
    overflow: hidden !important
}

.payoverhidden {
    overflow: hidden !important
}

.null {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -999px
}

#simple-text-prompt {
    position: fixed;
    width: 100%;
    top: 3.19rem;
    text-align: center;
    z-index: 999
}

#simple-text-prompt .message {
    display: inline-block;
    padding: 0 .6rem;
    line-height: .6rem;
    color: #fff;
    font-size: .26rem;
    text-align: center;
    background-color: rgba(0, 0, 0, .95);
    border-radius: .3rem
}

.u-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    z-index: 900
}

.popup-normal {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 7.65rem;
    height: 7.15rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/bg.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box
}

.popup-normal .close-btn {
    position: absolute;
    width: .54rem;
    height: .54rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/close-btn.png) no-repeat;
    background-size: 100% 100%;
    right: .2rem;
    top: .2rem
}

.popup-normal .popup-title {
    font-size: .6rem;
    color: #f1f1f1;
    line-height: 1.1rem;
    text-align: center;
    border-bottom: .03rem solid #838383;
    margin: 0 .8rem .2rem;
    padding: .4rem 0 0;
    font-weight: 700
}

.popup-normal .scroll-panel {
    overflow-x: hidden;
    overflow-y: auto
}

.guide-popup .title-panel {
    position: relative;
    font-size: .6rem;
    color: #f1f1f1;
    line-height: 1.1rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 0 .2rem;
    padding: .4rem 0 0
}

.guide-popup .title-panel::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: .03rem;
    background: #838383;
    width: 6rem
}

.guide-popup .scroll-panel {
    height: 5rem;
    margin: 0 .4rem;
    padding: 0 .4rem;
    font-size: .22rem;
    color: #f1f1f1;
    line-height: 1.5
}

.switch-role-popup {
    width: 7.59rem;
    height: 8.97rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/bg-1.png) no-repeat;
    background-size: 100% 100%;
    padding: 1.64rem 0 0
}

.switch-role-popup .close-btn {
    top: .28rem;
    right: .32rem
}

.switch-role-popup .title-panel {
    position: relative;
    font-size: .7rem;
    color: #141414;
    font-weight: 400;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: .9rem;
    margin: 0 .1rem .2rem
}

.switch-role-popup .title-panel::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: .03rem;
    background: #141414;
    width: 5.9rem
}

.switch-role-popup .scroll-panel {
    height: 4.2rem;
    margin: 0 .56rem .36rem
}

.switch-role-popup .scroll-panel .item-panel {
    width: 5.4rem;
    height: 1rem;
    color: #141414;
    font-size: .24rem;
    background: #ebebeb;
    border-radius: .1rem;
    box-sizing: border-box;
    padding: 0 0 0 .24rem;
    margin: 0 auto .2rem;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.switch-role-popup .scroll-panel .item-panel dt {
    margin: 0 0 .05rem
}

.switch-role-popup .scroll-panel .item-panel.on {
    background: #6bdae9
}

.switch-role-popup .btn-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 6.05rem;
    margin: 0 auto
}

.switch-role-popup .btn-panel .btn {
    width: 2.97rem;
    height: .79rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: .42rem;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.switch-role-popup .btn-panel .btn.cancel {
    color: #ddd;
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/btn-1.png)
}

.switch-role-popup .btn-panel .btn.cancel:active {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/btn-2.png)
}

.switch-role-popup .btn-panel .btn.confirm {
    color: #4a6063;
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/btn-3.png)
}

.switch-role-popup .btn-panel .btn.confirm:active {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/btn-4.png)
}

.no-role-popup {
    width: 7.59rem;
    height: 6.97rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/bg-2.png) no-repeat;
    background-size: 100% 100%;
    padding: 1.64rem 0 0
}

.no-role-popup .close-btn {
    top: .28rem;
    right: .32rem
}

.no-role-popup .title-panel {
    position: relative;
    font-size: .7rem;
    color: #141414;
    font-weight: 400;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: .9rem;
    margin: 0 .1rem .3rem
}

.no-role-popup .title-panel::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: .03rem;
    background: #141414;
    width: 5.9rem
}

.no-role-popup .tips-panel {
    margin: 0 .2rem;
    line-height: 1.4;
    font-size: .4rem;
    color: #141414;
    text-align: center;
    height: 1.5rem
}

.no-role-popup .btn {
    display: block;
    width: 2.97rem;
    height: .79rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: .42rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #ddd;
    margin: 0 auto;
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/btn-1.png)
}

.no-role-popup .btn:active {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/popup/btn-2.png)
}

.iwplay-checkout-modal {
    font-family: ALIBABAPUHUITI, "PingFang SC", PingFang-SC-Regular, BlinkMacSystemFont, "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0, 0, 0, .5);
    z-index: 666
}

.iwplay-checkout-modal .payment-input-panel dl {
    border-radius: .08rem;
    background: #f2f5f7;
    padding: .12rem .16rem;
    box-sizing: border-box;
    border: .01rem solid transparent
}

.iwplay-checkout-modal .payment-input-panel dl dt {
    font-size: .18rem;
    color: #868686;
    line-height: .24rem;
    margin: 0 0 .08rem
}

.iwplay-checkout-modal .payment-input-panel dl dd {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.iwplay-checkout-modal .payment-input-panel dl dd input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 1px;
    height: .34rem;
    border: 0;
    background: 0 0;
    font-size: .2rem;
    color: #000;
    font-weight: 600
}

.iwplay-checkout-modal .payment-input-panel dl dd input::-webkit-input-placeholder {
    color: #868686;
    font-weight: 300
}

.iwplay-checkout-modal .payment-input-panel dl dd input::-moz-placeholder {
    color: #868686;
    font-weight: 300
}

.iwplay-checkout-modal .payment-input-panel dl dd input:-ms-input-placeholder {
    color: #868686;
    font-weight: 300
}

.iwplay-checkout-modal .payment-input-panel dl dd input::placeholder {
    color: #868686;
    font-weight: 300
}

.iwplay-checkout-modal .payment-input-panel .message {
    line-height: .3rem;
    font-size: .16rem;
    color: #ff3c3c;
    min-height: .3rem
}

.iwplay-checkout-modal .payment-input-panel.focus dl {
    border-color: #000
}

.iwplay-checkout-modal .payment-input-panel.error dl {
    border-color: #ff3c3c
}

.iwplay-checkout-modal .payment-input-panel.error dl dd input {
    color: #ff3c3c
}

.iwplay-checkout-modal .payment-input-panel[data-input=expiry-time] dl dd::after {
    content: '';
    width: .36rem;
    height: .24rem;
    margin: 0 0 0 .05rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/static/checkout/images/icon-4.png) no-repeat;
    background-size: 100% 100%
}

.iwplay-checkout-modal .payment-input-panel[data-input=cvv-cvc] dl dd::after {
    content: '';
    width: .36rem;
    height: .24rem;
    margin: 0 0 0 .05rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/static/checkout/images/icon-5.png) no-repeat;
    background-size: 100% 100%
}

.iwplay-checkout-modal .checkout-dialog {
    position: relative;
    width: 14rem;
    height: 8rem;
    background: #fff;
    border-radius: .12rem;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.iwplay-checkout-modal .checkout-header {
    position: relative;
    width: 100%;
    height: 1.16rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/static/checkout/images/title-bg.png) no-repeat;
    background-size: 100% 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 .2rem 0 .8rem;
    box-sizing: border-box;
    margin: 0 0 .16rem;
    z-index: 30;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.iwplay-checkout-modal .checkout-header .checkout-title {
    font-size: .5rem;
    color: #212121;
    line-height: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.iwplay-checkout-modal .checkout-header .checkout-title::after {
    content: '';
    width: .7rem;
    height: .22rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/static/checkout/images/title-icon.png) no-repeat;
    background-size: 100%;
    margin: 0 0 0 .2rem
}

.iwplay-checkout-modal .checkout-header .checkout-close {
    width: .5rem;
    height: .5rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/static/checkout/images/close-btn.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    display: block;
    font-size: 0
}

.iwplay-checkout-modal .checkout-body {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 .4rem .24rem .24rem;
    box-sizing: border-box
}

.iwplay-checkout-modal .checkout-left {
    width: 8rem;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.iwplay-checkout-modal .checkout-left .checkout-section-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
    margin: 0 0 .2rem;
    font-size: .2rem;
    color: #000;
    font-weight: 600
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
    padding: 0 .12rem 0 0;
    border-radius: .16rem;
    background: #eef1f4;
    padding: .2rem .24rem;
    box-sizing: border-box
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-item {
    background: #fff;
    border-radius: .12rem;
    margin: 0 0 .12rem;
    border: .01rem solid transparent;
    box-sizing: border-box
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-item:last-child {
    margin: 0
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-item .checkout-method-label {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: .6rem;
    padding: 0 .4rem;
    cursor: pointer;
    margin: 0;
    width: 100%;
    box-sizing: border-box
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-item .checkout-method-radio {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: .24rem;
    height: .24rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/static/checkout/images/icon-2.png) no-repeat;
    background-size: 100% 100%;
    border: 0;
    margin: 0 .16rem 0 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    cursor: pointer
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-item .checkout-method-radio:checked {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/static/checkout/images/icon-3.png)
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-item .checkout-method-text {
    font-size: .2rem;
    font-weight: 600;
    color: #000;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-item:has(.checkout-method-radio:checked) {
    border-color: #b9bec4
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-category {
    background: #fff;
    border-radius: .12rem;
    margin: 0 0 .12rem;
    border: .01rem solid transparent;
    box-sizing: border-box;
    overflow: hidden
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-category:last-child {
    margin: 0
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-category .checkout-method-category-header .checkout-method-category-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: .6rem;
    padding: 0 .4rem;
    width: 100%;
    background: 0 0;
    border: 0;
    cursor: pointer;
    font-size: .2rem;
    font-weight: 600;
    color: #000;
    text-align: left;
    box-sizing: border-box
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-category .checkout-method-category-header .checkout-method-category-btn .payment-category-name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-category .checkout-method-category-header .checkout-method-category-btn .checkout-method-chevron {
    width: .2rem;
    height: .2rem;
    border-right: .02rem solid #000;
    border-bottom: .02rem solid #000;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    display: inline-block;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-category .checkout-method-category-header .checkout-method-category-btn[aria-expanded=true] .checkout-method-chevron {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-category .checkout-method-collapse .checkout-method-items {
    padding: 0 .24rem .12rem
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-category .checkout-method-collapse .checkout-method-item {
    border-radius: .08rem
}

.iwplay-checkout-modal .checkout-left .checkout-methods-list .checkout-method-category:has(.checkout-method-radio:checked) {
    border-color: #b9bec4
}

.iwplay-checkout-modal .checkout-right {
    padding: .42rem 0 0;
    width: 4.96rem;
    box-sizing: border-box;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.iwplay-checkout-modal .checkout-right .checkout-section-title {
    font-size: .24rem;
    color: #000;
    font-weight: 600;
    line-height: .4rem;
    padding: 0 0 .1rem;
    border-bottom: .01rem solid #e1e4e6;
    margin: 0 0 .16rem
}

.iwplay-checkout-modal .checkout-right .checkout-product-detail {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: start;
    -ms-flex-align: start;
    align-items: start;
    margin: 0 0 .16rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.iwplay-checkout-modal .checkout-right .checkout-product-detail .checkout-product-img {
    width: .8rem;
    height: .8rem;
    object-fit: contain;
    margin: 0 .16rem 0 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.iwplay-checkout-modal .checkout-right .checkout-product-detail .checkout-product-meta {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.iwplay-checkout-modal .checkout-right .checkout-product-detail .checkout-product-meta .checkout-product-name {
    font-size: .2rem;
    color: #000;
    font-weight: 600;
    line-height: 1.4;
    margin-top: .14rem
}

.iwplay-checkout-modal .checkout-right .checkout-product-detail .checkout-product-meta .checkout-product-price {
    font-size: .2rem;
    color: #75757d;
    line-height: 1.4
}

.iwplay-checkout-modal .checkout-right .checkout-total {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: .3rem;
    font-weight: 600;
    color: #000;
    line-height: 1;
    border-top: .01rem solid #e1e4e6;
    padding: .16rem 0 .16rem
}

.iwplay-checkout-modal .checkout-right .checkout-total strong {
    color: #ef463d
}

.iwplay-checkout-modal .checkout-right .checkout-submit-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: .8rem;
    background: #1fbcbb;
    border-radius: .16rem;
    font-size: .28rem;
    color: #fff;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    margin: 0 0 .12rem;
    font-family: inherit
}

.iwplay-checkout-modal .checkout-right .checkout-submit-btn:hover {
    background: #1aabaa
}

.iwplay-checkout-modal .checkout-right .checkout-submit-btn:active {
    background: #169999
}

.iwplay-checkout-modal .checkout-right .checkout-submit-btn.disabled {
    opacity: .5;
    cursor: default
}

.iwplay-checkout-modal .checkout-right .checkout-tips {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: .16rem;
    color: #868686;
    line-height: .8rem
}

.iwplay-checkout-modal .checkout-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .85);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 99;
    border-radius: .12rem
}

.iwplay-checkout-modal .checkout-loading::after {
    content: '';
    width: .6rem;
    height: .6rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/static/checkout/images/loading.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation: checkoutSpin 1.5s linear infinite;
    animation: checkoutSpin 1.5s linear infinite
}

.iwplay-checkout-modal .checkout-product-meta p {
    margin-bottom: 0
}

@-webkit-keyframes checkoutSpin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes checkoutSpin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.office-header-board {
    height: 1.18rem;
    background: #1d1d1d
}

.office-header-board .fixed-panel {
    position: fixed;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    height: 1.18rem;
    background: #1d1d1d;
    z-index: 20;
    box-sizing: border-box;
    padding: 0 .32rem 0 1.75rem
}

.office-header-board .fixed-panel .logo {
    width: .99rem;
    height: .89rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/logo.png) no-repeat;
    background-size: 100% 100%;
    cursor: default
}

.office-header-board .fixed-panel .right-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.office-header-board .fixed-panel .right-panel .base-btn {
    width: .69rem;
    height: .69rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 0 0 .2rem;
    cursor: pointer
}

.office-header-board .fixed-panel .right-panel .base-btn:first-child {
    margin: 0
}

.office-header-board .fixed-panel .right-panel .base-btn.desktop {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/header/desktop-icon.png)
}

.office-header-board .fixed-panel .right-panel .base-btn.desktop:hover {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/header/desktop-icon-hover.png)
}

.office-header-board .fixed-panel .right-panel .base-btn.rule {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/header/rule-icon.png)
}

.office-header-board .fixed-panel .right-panel .base-btn.rule:hover {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/header/rule-icon-hover.png)
}

.office-header-board .fixed-panel .right-panel .base-btn.lang {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/header/lang-icon.png)
}

.office-header-board .fixed-panel .right-panel .base-btn.lang:hover {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/header/lang-icon-hover.png)
}

.office-header-board .fixed-panel .right-panel .base-btn.user {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/header/user-icon.png)
}

.office-header-board .fixed-panel .right-panel .base-btn.user:hover {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/header/user-icon-hover.png)
}

.office-header-board .fixed-panel .right-panel .base-btn.user {
    position: relative
}

.office-header-board .fixed-panel .right-panel .base-btn.user .user-panel {
    display: none;
    position: absolute;
    right: -.24rem;
    top: 100%;
    -webkit-transform: translateY(.36rem);
    -ms-transform: translateY(.36rem);
    transform: translateY(.36rem);
    width: 3rem;
    height: 1rem;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .8);
    border-radius: .15rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.office-header-board .fixed-panel .right-panel .base-btn.user .user-panel::before {
    content: '';
    position: absolute;
    right: .42rem;
    top: -.24rem;
    display: block;
    width: 0;
    height: 0;
    border-width: .14rem;
    border-style: dashed dashed solid;
    border-color: transparent transparent #000;
    opacity: .8
}

.office-header-board .fixed-panel .right-panel .base-btn.user .user-panel p {
    white-space: nowrap;
    line-height: 1;
    font-size: .2rem;
    color: #aaa;
    margin: 0 0 .1rem;
    text-align: center
}

.office-header-board .fixed-panel .right-panel .base-btn.user .user-panel .btn {
    min-width: .98rem;
    height: .3rem;
    background: #4fe5fb;
    border-radius: .3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .24rem;
    color: #1d1d1d;
    padding: 0 .1rem;
    box-sizing: border-box;
    margin: 0 auto
}

.office-header-board .fixed-panel .right-panel .base-btn.user.focus .user-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.office-header-board .fixed-panel .right-panel .base-btn.lang {
    position: relative
}

.office-header-board .fixed-panel .right-panel .base-btn.lang .lang-panel {
    display: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, .24rem);
    -ms-transform: translate(-50%, .24rem);
    transform: translate(-50%, .24rem);
    top: 100%;
    width: 1.5rem;
    background: rgba(0, 0, 0, .8);
    border-radius: .15rem;
    padding: .1rem
}

.office-header-board .fixed-panel .right-panel .base-btn.lang .lang-panel .btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: .32rem;
    font-size: .2rem;
    color: #bfbfbf;
    border-bottom: .01rem solid rgba(255, 255, 255, .2);
    font-family: "Microsoft YaHei", Arial, sans-serif, "PingFang SC", PingFang-SC-Regular, BlinkMacSystemFont, "Helvetica Neue", STHeiti, Tahoma, Simsun
}

.office-header-board .fixed-panel .right-panel .base-btn.lang .lang-panel .btn:last-child {
    border: 0
}

.office-header-board .fixed-panel .right-panel .base-btn.lang .lang-panel .btn.on {
    color: #4fe5fb
}

.office-header-board .fixed-panel .right-panel .base-btn.lang.focus .lang-panel {
    display: block
}

.office-slogan-board {
    margin: 0 auto;
    width: 100%;
    height: 5.7rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top
}

.office-content-board {
    position: relative;
    /* height: 28.96rem; */
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/bg.jpg) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: .35rem 0 .5rem
}

.office-content-board .base-title-panel {
    position: relative;
    height: 1.47rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/base-title-bg.png) no-repeat;
    background-size: 100% 100%;
    z-index: 10;
    padding: 0 0 0 1rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .45rem;
    color: #212121;
    font-weight: 700
}

.office-content-board .base-title-panel .title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.office-content-board .base-title-panel .title span {
    line-height: 1;
    margin: 0 .15rem 0 0
}

.office-content-board .base-title-panel .title .icon {
    width: .27rem;
    height: .27rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/icon-3.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 .03rem .02rem 0
}

.office-content-board .login-btn {
    width: 2.89rem;
    height: .94rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/btn-1.png) no-repeat;
    background-size: 100% 100%;
    font-size: .31rem;
    color: #f8f8f8;
    font-weight: 700
}

.office-content-board .login-btn:hover {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/btn-1-hover.png)
}

.office-content-board .office-user-panel {
    position: absolute;
    left: 50%;
    top: -1.25rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 18rem;
    height: 1.4rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/user-bg.png) no-repeat;
    background-size: 100% 100%
}

.office-content-board .office-user-panel .unlogin-panel {
    display: none;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

.office-content-board .office-user-panel .login-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding: 0 .6rem 0 1rem
}

.office-content-board .office-user-panel .login-panel::before {
    content: '';
    width: .81rem;
    height: .81rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/icon-1.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 .4rem 0 0
}

.office-content-board .office-user-panel .login-panel .info-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 1px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .26rem;
    color: #6e6e6e
}

.office-content-board .office-user-panel .login-panel .info-panel::before {
    content: '';
    width: .04rem;
    height: .75rem;
    background: #bbb;
    border-radius: .04rem;
    margin: 0 .54rem 0 0
}

.office-content-board .office-user-panel .login-panel .info-panel .rolename {
    margin: 0 .5rem 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.office-content-board .office-user-panel .login-panel .info-panel .rolename::after {
    content: '';
    width: .02rem;
    height: .4rem;
    background: #bbb;
    border-radius: .04rem;
    margin: 0 0 0 .5rem
}

.office-content-board .office-user-panel .login-panel .info-panel .roleid {
    margin: 0 .5rem 0 0
}

.office-content-board .office-user-panel .login-panel .info-panel .servername {
    border: .02rem solid #e5e5e5;
    border-radius: .08rem;
    height: .54rem;
    background: #fafafa;
    padding: 0 .2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1
}

.office-content-board .office-user-panel .login-panel .switch-btn {
    width: 2.42rem;
    height: .8rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/btn-2.png) no-repeat;
    background-size: 100% 100%;
    font-size: .26rem;
    color: #212121;
    font-weight: 700
}

.office-content-board .office-user-panel .login-panel .switch-btn:hover {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/btn-2-hover.png)
}

.office-content-board .office-user-panel.unlogin .unlogin-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.office-content-board .office-user-panel.unlogin .login-panel {
    display: none
}

.office-content-board .office-banner-panel {
    width: 18rem;
    box-sizing: border-box;
    margin: 0 auto .3rem;
    border-radius: .1rem;
    overflow: hidden
}

.office-content-board .office-banner-panel .swiper-panel {
    position: relative;
    width: 100%;
    height: 3.94rem;
    margin: -1.3rem 0 0;
    overflow: hidden
}

.office-content-board .office-banner-panel .swiper-panel .swiper-slide {
    width: 100%;
    height: 100%
}

.office-content-board .office-banner-panel .swiper-panel .swiper-slide img {
    width: 100%;
    height: 100%
}

.office-content-board .office-banner-panel .swiper-panel .swiper-pagination {
    z-index: 10;
    top: 2.5rem;
    right: .3rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.office-content-board .office-banner-panel .swiper-panel .swiper-pagination .swiper-pagination-bullet {
    width: .18rem;
    height: .3rem;
    border-radius: .06rem;
    background: #b9b9b9;
    opacity: 1;
    margin: 0 auto .15rem
}

.office-content-board .office-banner-panel .swiper-panel .swiper-pagination .swiper-pagination-bullet:last-child {
    margin-bottom: 0
}

.office-content-board .office-banner-panel .swiper-panel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    height: .6rem;
    background: #4fe5fb
}

.office-content-board .office-recharge-panel {
    width: 18rem;
    height: 21.17rem;
    margin: 0 auto;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/recharge-bg.png) #dfdfdf no-repeat;
    background-size: 100% 100%;
    border-radius: .1rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.office-content-board .office-recharge-panel .base-title-panel {
    margin-bottom: 1.1rem
}

.office-content-board .office-recharge-panel .unlock-panel,
.office-content-board .office-recharge-panel .weihu-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .36rem;
    color: #2e2e2e;
    font-weight: 700;
    padding: .4rem .2rem;
    text-align: center
}

.office-content-board .office-recharge-panel .unlock-panel::after,
.office-content-board .office-recharge-panel .weihu-panel::after {
    content: '';
    display: block;
    width: 5.57rem;
    height: 3.45rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/icon-person.png) no-repeat center top;
    background-size: 100% auto;
    margin: .84rem 0 0
}

.office-content-board .office-recharge-panel .nav-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 .34rem 1.8rem
}

.office-content-board .office-recharge-panel .nav-panel .btn {
    min-width: 2.42rem;
    width: auto;
    height: .8rem;
    white-space: nowrap;
    padding: 0 0.2rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/btn-3.png) center center no-repeat;
    background-size: 2.36rem .74rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .3rem;
    color: #fff;
    font-weight: 700;
    margin: 0 .26rem 0 0;
    line-height: 1;
    text-align: center
}

.office-content-board .office-recharge-panel .nav-panel .btn:last-child {
    margin: 0
}

.office-content-board .office-recharge-panel .nav-panel .btn.on {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/btn-2.png);
    color: #313131
}

.office-content-board .office-recharge-panel .list-panel {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 .1rem .2rem 1rem;
    padding: .1rem 0 0 .8rem;
    box-sizing: border-box
}

.office-content-board .office-recharge-panel .list-panel .item-panel {
    float: left;
    margin: 0 .5rem .3rem 0;
    width: 3.21rem;
    height: 4.35rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/card-bg.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    position: relative;
    padding: .5rem 0 0
}

.office-content-board .office-recharge-panel .list-panel .item-panel .tips-btn {
    position: absolute;
    right: .36rem;
    top: .62rem;
    width: .32rem;
    height: .32rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/icon-4.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1
}

.office-content-board .office-recharge-panel .list-panel .item-panel .product-panel {
    position: relative;
    width: 2.7rem;
    height: 2.8rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-sizing: border-box;
    padding: .1rem;
    margin: 0 auto .2rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/product-bg.png) no-repeat;
    background-size: 100% 100%
}

.office-content-board .office-recharge-panel .list-panel .item-panel .product-panel img {
    max-width: 100%;
    max-height: 100%
}

.office-content-board .office-recharge-panel .list-panel .item-panel .product-panel .name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 2.2rem;
    background: #232323;
    border: .02rem solid #525252;
    border-radius: .2rem;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: .3rem;
    font-size: .22rem;
    color: #fff;
    box-sizing: border-box;
    padding: .08rem .1rem;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.1
}

.office-content-board .office-recharge-panel .list-panel .item-panel .buy-btn {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 2.04rem;
    height: .56rem;
    background: #f4f4f4;
    border-radius: .2rem;
    padding: 0 .2rem;
    box-sizing: border-box;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #1d1d1d;
    font-size: .32rem;
    line-height: 1
}

.office-content-board .office-recharge-panel .list-panel .item-panel .buy-btn:hover {
    background: #4fe5fb
}

.office-content-board .office-recharge-panel .list-panel .item-panel .bonus,
.office-content-board .office-recharge-panel .list-panel .item-panel .double {
    position: absolute;
    left: 0;
    top: -.1rem;
    height: .44rem;
    border-radius: .16rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 .12rem;
    font-size: .26rem;
    box-sizing: border-box
}

.office-content-board .office-recharge-panel .list-panel .item-panel .bonus img,
.office-content-board .office-recharge-panel .list-panel .item-panel .double img {
    max-width: .35rem;
    max-height: 100%;
    margin: 0 .12rem 0 0
}

.office-content-board .office-recharge-panel .list-panel .item-panel .bonus .amount,
.office-content-board .office-recharge-panel .list-panel .item-panel .double .amount {
    margin: 0 0 0 .1rem
}

.office-content-board .office-recharge-panel .list-panel .item-panel .bonus.bonus,
.office-content-board .office-recharge-panel .list-panel .item-panel .double.bonus {
    background: #4fe5fb;
    color: #292929
}

.office-content-board .office-recharge-panel .list-panel .item-panel .bonus.double,
.office-content-board .office-recharge-panel .list-panel .item-panel .double.double {
    background: #fb4f77;
    color: #fff
}

.office-content-board .office-recharge-panel .list-panel .item-panel .bonus span,
.office-content-board .office-recharge-panel .list-panel .item-panel .double span {
    white-space: nowrap
}

.office-content-board .office-recharge-panel .panel-footer {
    padding: 0 1.8rem .4rem
}

.office-content-board .office-recharge-panel .panel-footer .remind-panel {
    margin: 0 0 .8rem
}

.office-content-board .office-recharge-panel .panel-footer .remind-panel .remind-title {
    line-height: 1;
    font-size: .36rem;
    color: #212121;
    margin: 0 0 .2rem
}

.office-content-board .office-recharge-panel .panel-footer .remind-panel .remind-content {
    font-size: .24rem;
    color: #212121;
    line-height: .3rem
}

.office-content-board .office-recharge-panel .panel-footer .email-panel {
    text-align: center;
    line-height: 1;
    font-size: .24rem;
    color: #212121
}

.office-content-board .office-recharge-panel .panel-footer .email-panel a {
    color: #004cbd
}

.office-content-board .office-recharge-panel .unlogin-panel {
    display: none;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px
}

.office-content-board .office-recharge-panel .unlogin-panel .login-btn {
    margin: 0 auto .5rem
}

.office-content-board .office-recharge-panel .unlogin-panel .tips-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .26rem;
    color: #2e2e2e;
    text-align: center;
    line-height: .32rem
}

.office-content-board .office-recharge-panel .unlogin-panel .tips-panel::before {
    content: '';
    width: .48rem;
    height: .6rem;
    background: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/icon-6.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 .2rem 0 0
}

.office-content-board .office-recharge-panel.unlogin {
    background-image: url(https://images1.iwplay.com.tw/image/nte/charge/images/ui/recharge-bg-unlogin.png)
}

.office-content-board .office-recharge-panel.unlogin .base-title-panel {
    margin-bottom: 1.4rem
}

.office-content-board .office-recharge-panel.unlogin .unlogin-panel {
    display: block
}

.office-content-board .office-recharge-panel.unlogin .list-panel,
.office-content-board .office-recharge-panel.unlogin .nav-panel {
    display: none
}

/* Footer */
.footer { position: relative; padding: 0.25rem 0; color: #fff; font-size: 0.135rem; text-align: center; letter-spacing: 0.0002rem; background: #282a2c; }
.footer .container { max-width: 100%;}
.footer .copyright, .footer .grading { vertical-align: middle;}
.footer .copyright { display: inline-flex; align-items: center; }
.footer .company { display: inline-flex; vertical-align: middle; align-items: center; }
.footer img { vertical-align: baseline; }
.footer p, .footer .grading, .footer .grading img, .footer ul { display: inline-block; }
.footer .company a, .footer .grading, .footer p, .footer ul { margin-left: 0.1rem; }
.footer a:hover { color: #63edec;}
.footer p, .footer ul { text-align: left; line-height: 1.5; opacity: .6; margin-bottom: 0;}
.footer p a { color: #fff;}

@media screen and (max-width: 769px) {
  .footer { padding: 0.35rem 0; font-size: 0.3rem; }
  .footer img {height: 30%; transform: scale(0.7);}
  .footer .copyright { display: flex; flex-direction: column; align-items: center; margin-bottom: 0.15rem; }
  .footer .company { display: inline-flex; align-items: center; margin-bottom: 0.15rem; }
  .footer p { text-align: center; }
  .footer p, .footer .grading { margin: 0 auto; }
  .footer .container { display: flex; flex-direction: column; align-items: center;}
  .footer .grading{display: flex; flex-direction: row; align-items: center;}
}