.adspcConfirmCon {
    font-size: 0
}

.adspcConfirmCon iframe {
    height: 116px
}

.video-wrap {
    cursor: pointer;
    position: relative;
    background-color: rgba(7,7,7,.3);
    background-image: url(../img/pic_video_bg.efc18cad.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 184px;
    width: 100%;
    border-radius: 3px
}

.video-wrap.fullscreen {
    background: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 3;
    font-size: 0
}

.video-wrap.fullscreen.mobile {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.video-wrap.fullscreen.pc {
    cursor: auto;
    top: -webkit-calc(50% - 200px);
    top: calc(50% - 200px);
    left: -webkit-calc(50% - 359px);
    left: calc(50% - 359px);
    width: 718px;
    height: 400px;
    border: 1px solid hsla(0,0%,100%,.3);
    border-radius: 8px;
    overflow: hidden
}

.video-wrap.fullscreen.pc:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.3)),to(rgba(0,0,0,.15)));
    background: linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.15));
    z-index: -1
}

.video-wrap.fullscreen.pc video {
    height: 100%
}

.video-wrap.fullscreen.pc video::-webkit-media-controls-fullscreen-button {
    display: none
}

.video-wrap.fullscreen .icon {
    position: absolute;
    z-index: 3
}

.video-wrap.fullscreen .icon.icon_back_24_white {
    top: 36px;
    left: 16px
}

.video-wrap.fullscreen .icon.icon-close-video-pc {
    right: 0;
    top: 0
}

.video-wrap.fullscreen video {
    width: 100%;
    height: -webkit-calc(100% - 76px);
    height: calc(100% - 76px)
}

.video-wrap video {
    display: block;
    width: 100%;
    height: 100%
}

.video-wrap .video-play {
    position: absolute;
    top: -webkit-calc(50% - 20px);
    top: calc(50% - 20px);
    left: -webkit-calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    z-index: 2;
    background: url(../img/video-play.754fad2a.png) no-repeat;
    background-size: 100%
}

.video-wrap .video-play:hover {
    background: url(../img/video-play-hover.605563dc.png) no-repeat;
    background-size: 100%
}

.video-wrap .sound {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 77px;
    height: 24px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(26,26,26,.65);
    border-radius: 0 8px 0 3px;
    z-index: 2
}

.video-wrap .sound .line {
    margin: 0 8px;
    height: 8px;
    width: 1px;
    background: #b4c0c9;
    border-radius: .5px
}

.video-wrap .sound .icon-box {
    padding: 4px
}

.video-wrap .cover,.video-wrap .sound .icon-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.video-wrap .cover {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    border-radius: 3px;
    overflow: hidden
}

.video-wrap .cover img {
    margin: 0 auto;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.icon-pause {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_pause.730f8521.png)
}

.icon-pause:hover {
    background-image: url(../img/icon_pause_hover.01bf1537.png)
}

.icon-sound-off {
    width: 14px;
    height: 14px;
    background-image: url(../img/btn_sound_off_nor.7ea39f4e.png)
}

.icon-sound-off:hover {
    background-image: url(../img/icon_sound_on_hover.51c73490.png)
}

.icon-sound-on {
    width: 14px;
    height: 14px;
    background-image: url(../img/btn_sound_on_nor.d4cc21cf.png)
}

.icon-sound-on:hover {
    background-image: url(../img/btn_sound_on_hover.e0828bc6.png)
}

.icon_back_24_white {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_back_24_white.27d0028c.png)
}

.icon-close-video-pc {
    width: 30px;
    height: 30px;
    background-image: url(../img/close-video-pc.6a4f00f9.png)
}

.icon-close-video-pc:hover {
    background-image: url(../img/close-video-pc-hover.58e4651c.png)
}

.offi_account_wrap {
    padding-bottom: 24px
}

.offi_account_wrap .offi_video {
    width: 100%;
    display: block
}

.offi_account_wrap .videoOpacity {
    display: none
}

.offi_account_wrap .offi_tip_p {
    margin: 16px;
    font-size: 12px;
    line-height: 18px;
    color: #b4c0c9
}

.offi_account_wrap .offi_tip_box {
    margin: 0 16px 24px;
    box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.04);
    background: -webkit-gradient(linear,left top,right top,color-stop(.04%,rgba(239,198,120,.2)),to(rgba(239,198,120,0))),#304051;
    background: linear-gradient(90deg,rgba(239,198,120,.2) .04%,rgba(239,198,120,0)),#304051;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 40px;
    border-radius: 8px;
    padding-left: 64px;
    position: relative
}

.offi_account_wrap .offi_tip_box img {
    width: 80px;
    height: 48px;
    position: absolute;
    left: -24px;
    bottom: 0
}

.offi_account_wrap .offi_tip_box p {
    font-weight: 700;
    font-size: 12px;
    margin-right: 4px;
    color: hsla(0,0%,100%,.7)
}

.offi_account_wrap .offi_tip_box p:last-child {
    margin: 0;
    color: #f6de86
}

.offi_account_wrap .offi_task_con {
    background-color: #28333d;
    box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.02);
    padding: 12px 16px 16px;
    position: relative;
    margin: 0 16px 16px;
    border-radius: 8px
}

.offi_account_wrap .offi_task_con:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 56px;
    height: 56px;
    background: url(../img/pic_cp_watermark_56@2x.e109682b.png) no-repeat;
    background-size: 100% 100%;
    opacity: .3
}

.offi_account_wrap .offi_task_con button {
    margin-top: 12px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background-color: rgba(180,192,201,.1);
    width: 88px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    color: rgba(180,192,201,.3)
}

.offi_account_wrap .offi_task_con .offi_task_dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: rgba(3,196,126,.08);
    border-radius: 50%;
    top: 20px;
    left: -16px
}

.offi_account_wrap .offi_task_con .offi_task_line_bot,.offi_account_wrap .offi_task_con .offi_task_line_top {
    width: 2px;
    position: absolute;
    left: -13px;
    border-radius: 4px;
    background-color: rgba(3,196,126,.08);
    height: 18px;
    top: 0
}

.offi_account_wrap .offi_task_con .offi_task_line_bot {
    height: -webkit-calc(100% - 14px);
    height: calc(100% - 14px);
    top: 30px
}

.offi_account_wrap .offi_task_con.active {
    background: -webkit-gradient(linear,left top,right top,from(rgba(3,196,126,.2)),to(rgba(3,196,126,0))),#28333d;
    background: linear-gradient(90deg,rgba(3,196,126,.2),rgba(3,196,126,0)),#28333d
}

.offi_account_wrap .offi_task_con.active:before {
    opacity: 1
}

.offi_account_wrap .offi_task_con.active button {
    background: var(--03-c-47-e,#03c47e);
    box-shadow: 0 2px 30px 0 rgba(7,171,127,.3);
    color: #fff
}

.offi_account_wrap .offi_task_con .complete.offi_task_line_bot,.offi_account_wrap .offi_task_con .complete.offi_task_line_top {
    background-color: rgba(3,196,126,.3)
}

.offi_account_wrap .offi_task_con .complete.offi_task_dot {
    background-color: #03c47e
}

.offi_account_wrap .offi_task_follow {
    min-height: 80px
}

.offi_account_wrap .offi_task_con_title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px
}

.offi_account_wrap .offi_task_con_desc {
    font-size: 12px;
    color: hsla(0,0%,100%,.3);
    margin-bottom: 4px
}

.offi_account_wrap .offi_task_con_desc span {
    font-weight: 700;
    font-size: 12px;
    margin: 0 4px;
    color: hsla(0,0%,100%,.7)
}

.offi_account_wrap .offi_task_exa {
    border-radius: 4px;
    width: 100%;
    margin-top: 12px;
    position: relative
}

.offi_account_wrap .offi_task_exa img {
    max-width: 100%;
    max-height: 311px;
    margin: 0 auto;
    border-radius: 4px;
    display: block
}

.offi_account_wrap .offi_task_code {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid rgba(3,196,126,.08);
    box-sizing: border-box;
    position: absolute;
    right: 12px;
    top: 12px;
    background: #fff url(../img/QR_code_of_official_account.356398e1.png) 50% no-repeat;
    background-size: 72px 72px
}

.offiaccount_confirm .cofirm-cont {
    padding: 0;
    width: 375px;
    height: 536px;
    overflow-y: scroll;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    background-color: #1e2831
}

.offiaccount_confirm .cofirm-cont::-webkit-scrollbar {
    width: 4px
}

.offiaccount_confirm .cofirm-head {
    height: 62px;
    background: url(../img/pic_PC_popup_title_pkg.c137f8fa.png) no-repeat;
    background-size: 100% 100%
}

.guideWxFollow,.guideWxNotice {
    width: 100%;
    margin: 0 28px;
    min-width: 320px!important
}

.guideWxFollow .cofirm-head,.guideWxNotice .cofirm-head {
    background: #28333d;
    border-radius: 8px 8px 0 0
}

.guideWxFollow .cofirm-head h2,.guideWxNotice .cofirm-head h2 {
    padding: 24px 0 16px;
    font-weight: 700;
    font-size: 16px!important
}

.guideWxFollow div.cofirm-cont,.guideWxNotice div.cofirm-cont {
    padding: 0 24px 16px;
    border-radius: 0 0 8px 8px
}

.guideWxFollow div.cofirm-cont img,.guideWxNotice div.cofirm-cont img {
    max-width: 100%;
    max-height: 272px;
    margin: 0 auto 24px;
    border-radius: 8px;
    display: block
}

.guideWxFollow .cofirm-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.guideWxFollow .cofirm-btns.double a {
    margin-left: 0!important;
    margin-right: 0!important
}

.guideWxFollow .cofirm-btns a.g-Btn-white {
    margin: 0;
    border: 0;
    height: auto;
    padding: 0;
    line-height: inherit
}

.guideWxFollow .cofirm-btns a.g-Btn-green2 {
    margin: 0 0 16px 0;
    box-shadow: 0 2px 24px 0 rgba(7,171,127,.3)
}

.wx_award_confirm {
    margin: 0 27px
}

.wx_award_confirm.cofirm {
    max-height: 90%;
    overflow-y: scroll;
    padding-top: 27px
}

.wx_award_confirm.cofirm::-webkit-scrollbar {
    display: none
}

.wx_award_confirm .cloud_icon {
    width: 56px;
    height: 56px;
    background: url(../img/icon_succuess.04b00a20.png) no-repeat;
    margin: 0 auto 8px;
    background-size: 100%
}

.wx_award_confirm .wx_award_head {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0
}

.wx_award_confirm .cofirm-cont {
    padding: 0 0 16px;
    border-radius: 8px;
    background-color: #1e2831
}

.wx_award_confirm .cofirm-cont h2 {
    color: #03c47e;
    font-size: 16px;
    font-weight: 700;
    text-align: center
}

.wx_award_confirm .cofirm-cont p {
    margin-bottom: 24px;
    font-size: 14px;
    color: hsla(0,0%,100%,.9);
    text-align: center;
    padding: 0 24px
}

.wx_award_confirm .cofirm-cont .title {
    color: #8b969f;
    margin-bottom: 8px
}

.wx_award_confirm .cofirm-cont img {
    width: -webkit-calc(100% - 48px);
    width: calc(100% - 48px);
    margin: 0 24px;
    display: block
}

.wx_award_confirm .cofirm-cont .wx_award_bg {
    width: 100%;
    margin: 0 0 16px
}

.wx_award_confirm .cofirm-btns {
    display: block;
    margin: 0 24px 0
}

.wx_award_confirm .cofirm-btns button {
    border: 0;
    display: block;
    width: 100%;
    font-size: 14px;
    color: #8b969f;
    font-weight: 700;
    margin-top: 16px;
    background: none;
    font-weight: 400
}

.wx_award_confirm .cofirm-btns .g-Btn {
    background: #03c47e;
    box-shadow: 0 2px 24px 0 rgba(7,171,127,.3);
    margin-top: 24px;
    color: #fff;
    font-weight: 700
}

.wx_auz_confirm {
    border-radius: 8px;
    margin: 0 28px;
    min-width: 320px!important
}

.wx_auz_confirm .cofirm-cont {
    padding: 24px 0 0;
    background: #1e2831 url(../img/pic_bkg_popup_gift.0ea5a83e.png) top no-repeat;
    background-size: 100%;
    border-radius: 8px
}

.wx_auz_confirm .icon-close {
    left: 50%!important;
    top: auto!important;
    bottom: -52px;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_close_grey_36.317aeba7.png);
    background-size: 100% 100%
}

.wx_auz_confirm .cofirm-msg {
    color: hsla(0,0%,100%,.9);
    margin: 0 0 24px;
    padding: 0 24px;
    text-align: center
}

.wx_auz_confirm .cofirm-msg img {
    display: block;
    max-width: 100%;
    margin: 24px auto 0
}

.wx_auz_confirm .cofirm-btns .subscribe-btn {
    width: 100%;
    margin: 0 24px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #03c47e;
    color: #fff;
    font-size: 14px;
    font-weight: 700
}

.wx_auz_confirm #share-success-sub-wrap,.wx_auz_confirm .cofirm-btns .subscribe-btn {
    border-radius: 24px;
    box-shadow: 0 2px 24px 0 rgba(7,171,127,.3)
}

.wx_auz_confirm .subscribe-btn-box {
    width: 100%;
    padding: 0 24px 24px
}

.wx_auz_confirm .subscribe-btn-box .subscribe-btn {
    margin: 0
}

.wx_auz_confirm .confirm-extra-desc {
    margin-top: 24px;
    background: rgba(180,192,201,.1);
    box-shadow: inset 0 .5px 0 0 rgba(180,192,201,.04);
    padding: 4px 8px 8px;
    color: rgba(180,192,201,.6);
    font-size: 12px;
    border-radius: 0 0 8px 8px
}

.wx_auz_confirm .confirm-extra-tip {
    color: #8b969f;
    padding: 0 24px 24px;
    text-align: center
}

.guideWxEmpower {
    width: 100%;
    height: 100%
}

.guideWxEmpower img {
    max-width: 100%;
    max-height: 264px;
    margin: 0 auto;
    display: block
}

.roomprivilegehistory li {
    padding: 24px 16px
}

.roomprivilegehistory .icon_roomcard {
    width: 44px;
    height: 44px
}

.roomprivilegehistory .history-time {
    margin-top: 2px
}

.roomprivilegehistory .history-con:before {
    background-color: #2f3c47
}

.roomprivilegehistory .history-name {
    font-size: 14px;
    font-weight: 700
}

.roomprivilegehistory .history-price {
    font-size: 14px
}

.roomprivilegehistory .history-time {
    font-size: 12px
}

.liveprivilege-confirm.cofirm {
    width: 600px;
    max-width: 600px
}

.liveprivilege-confirm.cofirm .roomprivilegehistory {
    height: 464px;
    overflow-y: auto
}

.clipper-container[data-v-81043fe6] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    line-height: 0;
    background-color: #000
}

.clipper-container .clipper-part[data-v-81043fe6] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    bottom: 61px;
    z-index: 102
}

.clipper-container .clipper-part .pCanvas-container[data-v-81043fe6] {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border: 2px solid #fff
}

.clipper-container .action-bar[data-v-81043fe6] {
    box-sizing: content-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    top: auto;
    z-index: 103;
    height: 60px;
    line-height: 60px;
    border-top: 1px solid hsla(0,0%,100%,.3)
}

.clipper-container .action-bar button[data-v-81043fe6] {
    display: block;
    padding: 0 15px;
    line-height: 60px;
    font-size: 16px;
    color: #fff;
    background: none;
    border: none;
    outline: 0
}

.clipper-container .action-bar button.btn-cancel[data-v-81043fe6] {
    float: left
}

.clipper-container .action-bar button.btn-ok[data-v-81043fe6] {
    float: right
}

.clipper-container .mask[data-v-81043fe6] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    z-index: 101;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    background-color: #000;
    opacity: 0
}

.clipper-container .mask.opacity[data-v-81043fe6] {
    opacity: .8
}

.clipper-container .gesture-mask[data-v-81043fe6] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    bottom: 61px;
    z-index: 103
}

.confirmPersonalRecommend .cofirm-cont .cofirm-msg {
    max-height: 80vw;
    overflow-y: auto
}

.personal_recommend_box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 15px 0 13px;
    border-bottom: 1px solid #2f3c47
}

.personal_recommend_box>div {
    margin-right: 8px
}

.personal_recommend_box>div p {
    color: #b4c0c9;
    font-size: 14px
}

.personal_recommend_box>div span {
    display: block;
    color: #8b969f;
    font-size: 12px
}

.personal_recommend_box>div a {
    display: block;
    text-decoration: underline;
    cursor: pointer
}

.confirmPersonalRecommend .cofirm-cont {
    padding: 32px 32px 24px;
    max-width: 344px;
    box-sizing: border-box
}

.confirmPersonalRecommend .cofirm-cont h2 {
    font-weight: 700;
    text-align: center
}

.confirmPersonalRecommend .cofirm-cont .cofirm-msg {
    padding: 16px 0 24px;
    color: #b4c0c9
}

.confirmPersonalRecommend .cofirm-cont .g-Btn {
    width: 100%;
    margin: 0
}

.c-mine-user-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 12px
}

.c-mine-user-info .user-avatar {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    cursor: pointer
}

.c-mine-user-info .user-info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    margin-left: 8px
}

.c-mine-user-info .user-name {
    max-width: 100%;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer
}

.c-mine-user-info .user-name p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    line-height: 25px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.c-mine-user-info .user-name i {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.c-mine-user-info .icon-user-info-edit {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_me_edit_20.bbb6a63e.png)
}

.c-mine-user-info .user-sign {
    line-height: 1;
    margin-top: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.c-mine-user-info .user-sign i {
    width: 14px!important;
    height: 14px!important
}

.c-mine-user-info .user-sign .icon-tag-vip,.c-mine-user-info .user-sign .icon_grade_lv1,.c-mine-user-info .user-sign .icon_grade_lv2,.c-mine-user-info .user-sign .icon_grade_lv3,.c-mine-user-info .user-sign .icon_grade_lv4,.c-mine-user-info .user-sign .icon_grade_lv5,.c-mine-user-info .user-sign .icon_grade_lv6,.c-mine-user-info .user-sign .icon_grade_lv7,.c-mine-user-info .user-sign .icon_grade_lv8,.c-mine-user-info .user-sign .icon_grade_lv9,.c-mine-user-info .user-sign .icon_grade_lv10 {
    width: 36px!important;
    height: 16px!important
}

.c-mine-user-info .user-account {
    margin-top: 6px
}

.c-mine-user-info .user-account ul,.c-mine-user-info .user-account ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.c-mine-user-info .user-account ul li {
    position: relative
}

.c-mine-user-info .user-account ul li+li {
    margin-left: 6px
}

.c-mine-user-info .user-account ul li.has-new:after {
    content: "";
    position: absolute;
    top: 2px;
    right: -5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid #304051;
    background-color: #e35043
}

.c-mine-user-info .user-account ul li strong {
    color: #b4c0c9;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px
}

.c-mine-user-info .user-account ul li span {
    color: #8b969f;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    margin-left: 2px
}

.c-mine-user-info .user_room_privilege {
    border-radius: 8px;
    background: hsla(0,0%,100%,.05);
    padding: 1px;
    display: inline-block;
    border: 1px solid transparent;
    cursor: pointer
}

.c-mine-user-info .user_room_privilege.user_room_privilege_pc:hover {
    border-color: hsla(0,0%,100%,.08)
}

.c-mine-user-info .user_room_privilege>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.c-mine-user-info .user_room_privilege .icon_right_8 {
    margin-right: 2px;
    width: 12px!important;
    height: 12px!important
}

.c-mine-user-info .user_room_privilege span {
    font-size: 12px;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    display: block;
    color: #b4c0c9;
    -webkit-transform-origin: left;
    transform-origin: left
}

.c-mine-user-info .user_room_privilege .icon_arrow_right_grey {
    margin-left: -16px;
    width: 10px!important;
    height: 10px!important
}

.c-mine-vip-info ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.c-mine-vip-info ul.single-column li {
    background: -webkit-gradient(linear,left top,right top,from(rgba(3,196,126,.2)),to(rgba(3,196,126,0))),url(../img/pic_bkg_pattern.07d2154b.png),#304051;
    background: linear-gradient(90deg,rgba(3,196,126,.2),rgba(3,196,126,0)),url(../img/pic_bkg_pattern.07d2154b.png),#304051;
    background-size: 100% 100%,auto 100%,100%,100%;
    background-position: 100%;
    background-repeat: no-repeat
}

.c-mine-vip-info li {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.02);
    background: -webkit-gradient(linear,left top,right top,from(rgba(3,196,126,.2)),to(rgba(3,196,126,0))),#304051;
    background: linear-gradient(90deg,rgba(3,196,126,.2),rgba(3,196,126,0)),#304051;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch
}

.c-mine-vip-info li+li {
    margin-left: 8px
}

.c-mine-vip-info .has-tag {
    width: -webkit-calc(100% - 58px);
    width: calc(100% - 58px)
}

.c-mine-vip-info .title {
    color: #fff;
    font-weight: 700;
    line-height: 20px;
    font-size: 14px
}

.c-mine-vip-info .title span {
    margin-left: 2px;
    margin-right: 2px;
    font-size: 10px;
    font-weight: 500;
    color: #b4c0c9
}

.c-mine-vip-info .subtitle {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 3px
}

.c-mine-vip-info .subtitle>i {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.c-mine-vip-info .subtitle>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.c-mine-vip-info .subtitle .desc {
    margin-top: 0
}

.c-mine-vip-info .desc {
    margin-top: 3px;
    color: #b4c0c9;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px
}

.c-mine-vip-info .tag {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 2;
    border-radius: 0 7px;
    background: rgba(3,196,126,.3);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 3px 6px;
    cursor: pointer
}

.c-mine-vip-info .tag span {
    color: #fff;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    line-height: normal
}

.c-mine-vip-info .icon-vip-info-arrow {
    width: 6px;
    height: 6px;
    background-image: url(../img/icon_arrow_grey_6.53a608a2.png)
}

.c-mine-vip-info .icon-vip-info-time {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_time.60f1ef6d.png)
}

.c-mine-vip-info .icon-vip-info-vip {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_vip.5e571c8e.png)
}

.vipcard-confirm .cofirm-head {
    background: #28333d
}

.vipcard-confirm .cofirm-head h2 {
    padding-top: 32px;
    padding-bottom: 16px
}

.vipcard-confirm .cofirm-cont {
    padding: 0 20px 40px 20px
}

.vipcard-confirm .cofirm-btns {
    margin-top: 32px
}

.vipcard-confirm ul li {
    height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid #2f3c47
}

.vipcard-confirm ul li .col-left {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-right: 10px;
    line-height: 20px
}

.vipcard-confirm ul li .col-left p:last-child {
    font-size: 12px;
    color: #8b969f
}

.vipcard-confirm ul li .col-left p:first-child {
    font-size: 14px;
    color: #fff
}

.vipcard-confirm ul li .col-right {
    font-size: 14px;
    color: #03c47e
}

.vipcard-confirm .desc {
    margin-top: 16px;
    line-height: 24px;
    font-size: 14px;
    color: #8b969f
}

.vipcard {
    height: 194px;
    border-radius: 8px;
    background-color: #39605a;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.vipcard.pc .vipcard-bottom {
    background-size: 342px 180px
}

.vipcard.other .vipcard-top .vipcard-tab:first-child {
    padding-top: 8px;
    font-size: 14px
}

.vipcard.other .vipcard-top .vipcard-tab:last-child {
    padding-top: 0;
    font-size: 16px
}

.vipcard.other .vipcard-bottom:before {
    left: auto;
    right: 0;
    background-position: 100% 0
}

.vipcard.other .vipcard-bottom:after {
    left: auto;
    right: 50%;
    margin-left: 0;
    margin-right: -2px;
    border-top-left-radius: 0;
    border-top-right-radius: 28px;
    border-left: 14px solid transparent;
    border-right: 0
}

.vipcard .vipcard-top {
    position: relative;
    z-index: 2;
    height: 40px;
    margin-top: -6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.vipcard .vipcard-top .vipcard-tab {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer
}

.vipcard .vipcard-top .vipcard-tab:last-child {
    padding-top: 6px;
    font-size: 14px
}

.vipcard .vipcard-top .vipcard-tag {
    font-size: 12px;
    border-radius: 8px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    margin-top: 2px
}

.vipcard .vipcard-bottom {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    border-radius: 0 0 8px 8px;
    background-image: url(../img/pic_webcard_month_selected.723c888e.jpg);
    background-color: #3da37e;
    background-position: 100% 100%;
    background-size: -webkit-calc(100vw - 32px) 180px;
    background-size: calc(100vw - 32px) 180px
}

.vipcard .vipcard-bottom:before {
    content: "";
    position: absolute;
    top: -39px;
    left: 0;
    z-index: 1;
    height: 40px;
    width: 50%;
    border-radius: 8px 8px 0 0;
    background: inherit;
    background-position: 0 0
}

.vipcard .vipcard-bottom:after {
    content: "";
    position: absolute;
    top: -39px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -2px;
    border-top-left-radius: 28px;
    border-bottom: 40px solid #3da37e;
    border-right: 14px solid transparent
}

.vipcard .vipcard-main {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.vipcard .vipcard-bar {
    height: 32px;
    background: -webkit-gradient(linear,right top,left top,color-stop(.04%,rgba(255,212,131,.95)),to(rgba(249,234,193,.95)));
    background: linear-gradient(270deg,rgba(255,212,131,.95) .04%,rgba(249,234,193,.95));
    border-radius: 0 0 8px 8px;
    font-size: 12px;
    color: #fff
}

.vipcard .vipcard-body {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding-left: 16px
}

.vipcard .vipcard-body .icon_ME_arrow_small {
    position: absolute;
    top: 50%;
    left: 168px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.vipcard .vipcard-double-vip {
    cursor: pointer
}

.vipcard .vipcard-double-vip .vipcard-vip {
    font-size: 14px
}

.vipcard .vipcard-double-vip .vipcard-vip i {
    width: 20px;
    height: 20px
}

.vipcard .vipcard-double-vip .vipcard-vip span {
    font-size: 14px
}

.vipcard .vipcard-double-vip .vipcard-datecheck,.vipcard .vipcard-double-vip .vipcard-viptips {
    margin-top: 2px
}

.vipcard .vipcard-feature {
    max-width: 210px;
    margin-bottom: -14px;
    font-size: 0
}

.vipcard .vipcard-feature li {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 14px;
    line-height: 14px;
    font-size: 12px;
    color: #fff
}

.vipcard .vipcard-feature li:nth-child(2n) {
    margin-right: 0
}

.vipcard .vipcard-feature li i,.vipcard .vipcard-feature li span {
    vertical-align: middle
}

.vipcard .vipcard-feature li i {
    margin-right: 5px
}

.vipcard .vipcard-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-right: 16px
}

.vipcard .vipcard-btn.timeover a {
    padding: 9px 22px
}

.vipcard .vipcard-btn a {
    display: block;
    min-width: 64px;
    line-height: 18px;
    padding: 11px 22px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 7px hsla(0,0%,100%,.3);
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    color: #379c77
}

.vipcard .vipcard-btn span {
    margin-top: 4px;
    font-weight: 400;
    font-size: 12px;
    color: #d8ece5
}

.vipcard .vipcard-vip {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 14px;
    color: #fff
}

.vipcard .vipcard-vip span {
    font-size: 14px
}

.vipcard .vipcard-vip i {
    margin-right: 2px;
    margin-top: 1px
}

.vipcard .vipcard-vip .unit {
    font-weight: 400
}

.vipcard .vipcard-pc-vip {
    margin: 4px 0 2px
}

.vipcard .vipcard-pc-vip span {
    display: block
}

.vipcard .vipcard-pc-vip span i {
    font-size: 12px;
    font-style: normal
}

.vipcard .vipcard-pc-vip .icon {
    margin: -2px 2px 0 0
}

.vipcard .vipcard-pc-vip span:last-child {
    color: hsla(0,0%,100%,.7);
    font-size: 12px;
    margin-top: 2px
}

.vipcard .vipcard-vip-wrap {
    margin-bottom: 4px
}

.vipcard .vipcard-vip-wrap:last-child {
    margin-bottom: 0
}

.vipcard .vipcard-viptips {
    margin-top: 2px;
    line-height: 17px;
    font-size: 12px;
    color: hsla(0,0%,100%,.7);
    border-radius: 4px;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(37,119,92,.2)),to(rgba(16,66,47,.2)));
    background: linear-gradient(180deg,rgba(37,119,92,.2),rgba(16,66,47,.2));
    padding: 1px 8px
}

.vipcard .vipcard-viptips.viptimeover {
    opacity: .5
}

.vipcard .vipcard-viptips span {
    display: inline-block;
    line-height: 1;
    padding: 3px;
    margin-right: -5px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    background: #e54e3d;
    border-radius: 4px;
    font-weight: lighter;
    font-size: 12px;
    color: #fff
}

.vipcard .vipcard-datecheck {
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(37,119,92,.2)),to(rgba(16,66,47,.2)));
    background-image: linear-gradient(180deg,rgba(37,119,92,.2),rgba(16,66,47,.2));
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 12px;
    color: hsla(0,0%,100%,.75)
}

.vipcard .vipcard-datecheck,.vipcard .vipcard-datepicker {
    border-radius: 4px;
    line-height: 24px;
    padding: 0 16px;
    cursor: pointer
}

.vipcard .vipcard-datepicker {
    display: inline-block;
    background-image: linear-gradient(172deg,#efdcb3,#e7c68e);
    margin-top: 2px;
    color: #2d3d4c;
    font-weight: 700;
    font-size: 14px
}

.vipcard .experience-vip {
    width: 100%;
    margin-right: 15px;
    margin-bottom: 4px
}

.vipcard .experience-vip:last-child {
    margin-bottom: 0
}

.vipcard .experience-vip .experience-vip-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    font-size: 14px
}

.vipcard .experience-vip .experience-vip-tips {
    margin: 1px 0 4px 0;
    font-size: 12px;
    color: hsla(0,0%,100%,.7)
}

.vipcard .experience-vip .experience-vip-feature {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(37,119,92,.2)),to(rgba(16,66,47,.2)));
    background: linear-gradient(180deg,rgba(37,119,92,.2),rgba(16,66,47,.2));
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    width: 196px;
    height: 50px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    text-align: center;
    padding: 6px;
    box-sizing: border-box
}

.vipcard .experience-vip .experience-vip-feature li {
    width: 25%;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.vipcard .experience-vip .experience-vip-feature li .icon {
    margin: 0 auto;
    display: block
}

.vipcard .experience-vip .experience-vip-feature li span {
    margin: 3.5px auto 0 auto;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 12px;
    zoom:.67;line-height: 14px;
    color: hsla(0,0%,100%,.7)
}

@media only screen and (max-width: 370px) {
    .vipcard .vipcard-vip .unit {
        display:none
    }

    .vipcard .vipcard-vip span {
        font-size: 14px!important
    }

    .vipcard .vipcard-btn a {
        min-width: 50px;
        padding: 10px 14px;
        font-size: 12px!important
    }

    .vipcard .vipcard-feature li {
        margin-right: 10px;
        margin-bottom: 10px
    }
}

@media only screen and (max-width: 768px) {
    .vipcard.pc .vipcard-bottom {
        background-size:-webkit-calc(77.29469vw - 40px) 180px;
        background-size: calc(77.29469vw - 40px) 180px
    }
}

@media only screen and (max-width: 414px) {
    .vipcard.pc .vipcard-bottom {
        background-size:280px 300px
    }
}

.mobile-vipcard-confirm .cofirm-head {
    line-height: 54px;
    background: #28333d
}

.mobile-vipcard-confirm .cofirm-head h2 {
    padding: 0;
    font-size: 16px!important;
    color: #fff
}

.mobile-vipcard-confirm .cofirm-head .icon-close {
    top: 50%!important;
    right: 16px!important;
    -webkit-transform: translateY(-50%)!important;
    transform: translateY(-50%)!important;
    background-image: url(../img/icon_payment_close@2x.6f58189b.png)!important;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: 50%
}

.mobile-vipcard-confirm .cofirm-cont {
    padding: 0 16px 16px 16px
}

.mobile-vipcard-confirm .cofirm-cont ul li {
    background: rgba(30,40,49,.5);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 8px
}

.mobile-vipcard-confirm .cofirm-cont ul li:last-child {
    margin-bottom: 0
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-top,.mobile-vipcard-confirm .cofirm-cont ul li .status-top .status-left {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-top .status-left {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-top .status-left .icon {
    width: 24px;
    height: 24px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-top .status-left span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 4px;
    font-size: 14px;
    color: #f7fafc
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-top .status-right {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-top .status-right .icon {
    width: 22px;
    height: 22px
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-top .status-right span {
    font-size: 12px
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-top .status-right span.status-warning {
    color: #e68c26
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-top .status-right span.status-success {
    color: #03c47e
}

.mobile-vipcard-confirm .cofirm-cont ul li .status-bottom {
    margin-top: 2px;
    line-height: 18px;
    font-size: 12px;
    color: #8b969f
}

.mobile-vipcard-confirm .mobile-vipcard-status .scroll-wrap {
    max-height: 226px;
    overflow: auto
}

.c-vipcard-pay-tips {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px
}

.c-vipcard-pay-tips .icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    margin-right: 4px
}

.c-vipcard-pay-tips .text {
    position: relative;
    height: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    color: #664a1a;
    font-size: 12px;
    font-weight: 400
}

.c-vipcard-pay-tips .text>div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.c-vipcard-pay-tips .slide-top-enter-active,.c-vipcard-pay-tips .slide-top-leave-active {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.c-vipcard-pay-tips .slide-top-enter {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.c-vipcard-pay-tips .slide-top-leave-to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.c-vipcard-pay-tips .slide-top-enter-to,.c-vipcard-pay-tips .slide-top-leave {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.checkin_new_content {
    padding-bottom: 1px
}

.checkin_new_content .checkin_new_award {
    margin: 0 16px;
    border-radius: 12px;
    background: rgba(30,40,49,.8);
    box-shadow: inset 0 0 16px 0 #1e2831;
    -webkit-backdrop-filter: blur(2.7px);
    backdrop-filter: blur(2.7px);
    padding: 8px 0;
    position: relative
}

.checkin_new_content .checkin_new_award .swiper-container {
    padding-top: 3px
}

.checkin_new_content .checkin_new_award .swiper-slide {
    margin-right: 2px;
    width: 72px
}

.checkin_new_content .checkin_new_award .swiper-slide:first-child {
    margin-left: 8px
}

.checkin_new_content .checkin_new_award .swiper-slide:last-child {
    margin-right: 8px
}

.checkin_new_content .checkin_new_award .specialStyle .swiper-slide:last-child {
    margin-right: 80px
}

.checkin_new_content .checkin_new_award .checkin_new_award_img {
    border-radius: 8px;
    width: 100%;
    height: 72px;
    box-sizing: border-box;
    background-image: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.2)),to(rgba(249,234,193,0)));
    background-image: linear-gradient(180deg,hsla(0,0%,100%,.2),rgba(249,234,193,0));
    padding: 1px
}

.checkin_new_content .checkin_new_award .checkin_new_award_img>div {
    background: #28333d;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    padding-top: 14px;
    box-sizing: border-box
}

.checkin_new_content .checkin_new_award .checkin_new_award_img>div img {
    width: 36px;
    display: block;
    margin: 0 auto;
    position: relative
}

.checkin_new_content .checkin_new_award .checkin_new_award_img.checkin_new_award_super {
    background-color: #fbeab0
}

.checkin_new_content .checkin_new_award .checkin_new_award_img.checkin_new_award_super .checkin_new_choosegame {
    border-left-color: #fbeab0;
    border-right-color: #fbeab0;
    border-bottom-color: #fbeab0
}

.checkin_new_content .checkin_new_award .checkin_new_choosegame {
    width: -webkit-calc(100% + 2px);
    width: calc(100% + 2px);
    height: 20px;
    box-sizing: border-box;
    position: absolute;
    left: -1px;
    bottom: -1px;
    border: 1px solid #03c47e;
    background-color: #03c47e;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    border-radius: 0 0 8px 8px;
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

.checkin_new_content .checkin_new_award .checkin_new_choosegame .icon {
    width: 8px;
    height: 8px;
    margin-top: -2px
}

.checkin_new_content .checkin_new_award .checkin_new_choosegame.disabled {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,.9)),to(rgba(77,98,117,.9)));
    background: linear-gradient(180deg,rgba(40,51,61,.9),rgba(77,98,117,.9));
    border-color: hsla(0,0%,100%,.1);
    color: #b4c0c9;
    cursor: default
}

.checkin_new_content .checkin_new_award .icon_help {
    margin-top: -2px;
    margin-left: 2px;
    width: 12px;
    height: 12px
}

.checkin_new_content .checkin_new_award p {
    font-size: 12px;
    color: #b4c0c9;
    font-weight: 700;
    position: relative
}

.checkin_new_content .checkin_new_award .checkin_new_award_super_color {
    color: #f9eac1
}

.checkin_new_content .checkin_new_award .checkin_new_award_super_color i {
    background-image: url(../img/icon_questions_16_yellow.03ceb50a.png)
}

.checkin_new_content .checkin_new_award .checkin_new_award_name p {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 36px
}

.checkin_new_content .checkin_new_award .checkin_new_award_name p span {
    -webkit-transform: scale(.92);
    transform: scale(.92);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.checkin_new_content .checkin_new_award_vip {
    border-radius: 8px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(249,234,193,.5)),to(rgba(249,234,193,0)));
    background-image: linear-gradient(180deg,rgba(249,234,193,.5),rgba(249,234,193,0));
    padding: 1px
}

.checkin_new_content .checkin_new_award_vip:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/pic_bd_bg_vip.238ed405.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 1
}

.checkin_new_content .checkin_new_award_vip>div {
    border-radius: 8px;
    padding: 8px 0;
    background: #28333d;
    position: relative
}

.checkin_new_content .checkin_new_award_vip>div:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 8px;
    background: radial-gradient(137.24% 65.99% at 10.32% 0,rgba(248,233,192,.15) 0,transparent 100%),-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.2)));
    background: radial-gradient(137.24% 65.99% at 10.32% 0,rgba(248,233,192,.15) 0,transparent 100%),linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.2))
}

.checkin_new_content .checkin_new_award_vip .checkin_new_vip_header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 8px 9px 8px;
    position: relative
}

.checkin_new_content .checkin_new_award_vip .icon_questions_16_yellow {
    width: 12px;
    height: 12px;
    margin-left: 4px
}

.checkin_new_content .checkin_new_award_vip .checkin_new_vip_icon {
    width: 35px;
    height: 20px;
    background-image: url(../img/icon_vip_all.e1bbfea3.png);
    background-size: 100% 100%
}

.checkin_new_content .checkin_new_award_vip .checkin_lock_bottom {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #f9eac1;
    background-color: rgba(249,234,193,.2);
    background-position: 50%;
    background-image: url(../img/icon_lock_10.7451a297.png);
    background-size: 14px 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    z-index: 1
}

.checkin_new_content .checkin_new_award_vip .title {
    margin: 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #f9eac1
}

.checkin_new_content .checkin_new_award_vip button {
    width: 56px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 0;
    padding: 0;
    border-radius: 16px;
    background: -webkit-gradient(linear,right top,left top,color-stop(.04%,#efc678),to(#f9eac1));
    background: linear-gradient(270deg,#efc678 .04%,#f9eac1);
    color: #171b1e;
    font-weight: 500;
    font-size: 12px
}

.checkin_new_content .checkin_new_award_vip .checkin_new_award_img {
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(249,234,193,.5)),to(rgba(249,234,193,0)));
    background-image: linear-gradient(180deg,rgba(249,234,193,.5),rgba(249,234,193,0))
}

.checkin_new_content .checkin_new_award_vip .checkin_new_award_img>div:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 8px;
    background: -webkit-gradient(linear,left top,left bottom,from(#4d6275),to(#28333d));
    background: linear-gradient(180deg,#4d6275,#28333d)
}

.checkin_new_content .checkin_new_award_vip .checkin_new_award_img .checkin_new_novip:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 8px;
    background: rgba(0,0,0,.6)
}

.checkin_new_content .checkin_new_shadow:after,.checkin_new_content .checkin_new_shadow:before {
    content: "";
    left: 0;
    bottom: 8px;
    width: 8px;
    height: -webkit-calc(100% - 16px);
    height: calc(100% - 16px);
    position: absolute;
    z-index: 2;
    background-image: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(30,40,49,.8)),to(rgba(43,46,46,0)));
    background-image: linear-gradient(90deg,rgba(30,40,49,.8),rgba(43,46,46,0))
}

.checkin_new_content .checkin_new_shadow:after {
    left: auto;
    right: 0;
    background-image: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(43,46,46,0)),to(rgba(30,40,49,.8)));
    background-image: linear-gradient(90deg,rgba(43,46,46,0),rgba(30,40,49,.8))
}

.checkin_new_content .checkin_new_Bar {
    width: 100%;
    height: 56px;
    position: relative
}

.checkin_new_content .checkin_new_Bar .swiper-container {
    height: 100%;
    padding-top: 0
}

.checkin_new_content .checkin_new_Bar .day {
    position: absolute;
    right: -1px;
    top: 21px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #28333d;
    font-weight: 700;
    font-size: 12px;
    border-radius: 50%;
    border: .5px solid hsla(0,0%,100%,.5);
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,247,187,.5)),to(rgba(255,237,134,.5))),hsla(0,0%,100%,.2);
    background: linear-gradient(180deg,rgba(255,247,187,.5),rgba(255,237,134,.5)),hsla(0,0%,100%,.2)
}

.checkin_new_content .checkin_new_Bar .day.checked,.checkin_new_content .checkin_new_Bar .day.on {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,247,187,.9)),to(rgba(255,237,134,.9)));
    background: linear-gradient(180deg,rgba(255,247,187,.9),rgba(255,237,134,.9))
}

.checkin_new_content .checkin_new_Bar .day.checked {
    font-size: 0
}

.checkin_new_content .checkin_new_Bar .day.checked:after {
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/icon_tick_10.42da6fff.png);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: 50%
}

.checkin_new_content .checkin_new_Bar .checkin_new_bar_bg,.checkin_new_content .checkin_new_Bar .checkin_new_bar_bg_light {
    position: absolute;
    top: 24px;
    left: 10px;
    width: 60px;
    height: 8px;
    border-radius: 4px;
    border: .5px solid hsla(0,0%,100%,.1);
    background: rgba(30,40,49,.6);
    box-shadow: inset 0 0 4px 0 #1e2831
}

.checkin_new_content .checkin_new_Bar .checkin_new_bar_bg.checkin_new_bar_bg_light,.checkin_new_content .checkin_new_Bar .checkin_new_bar_bg_light.checkin_new_bar_bg_light {
    background: -webkit-gradient(linear,left bottom,left top,from(#f7ce43),to(#fffae9));
    background: linear-gradient(0deg,#f7ce43,#fffae9);
    border: 0;
    box-shadow: none;
    opacity: 0
}

.checkin_new_content .checkin_new_Bar .checkin_new_bar_bg.checkin_new_bar_bg_light.on,.checkin_new_content .checkin_new_Bar .checkin_new_bar_bg_light.checkin_new_bar_bg_light.on {
    opacity: 1
}

.checkin_new_content .checkin_new_Bar .swiper-slide {
    position: relative;
    width: 30px;
    padding-top: 13px;
    margin-right: 30px;
    cursor: pointer
}

.checkin_new_content .checkin_new_Bar .swiper-slide i {
    width: 25px;
    height: 25px;
    position: relative
}

.checkin_new_content .checkin_new_Bar .swiper-slide:first-child {
    margin-left: 25px
}

.checkin_new_content .checkin_new_Bar .swiper-slide:first-child .checkin_new_bar_bg {
    left: -10px;
    width: 80px
}

.checkin_new_content .checkin_new_Bar .swiper-slide:first-child .checkin_new_bar_bg_light {
    left: -10px;
    width: 20px
}

.checkin_new_content .checkin_new_Bar .swiper-slide:first-child .checkin_new_bar_bg_light.daySecond {
    width: 80px
}

.checkin_new_content .checkin_new_Bar .swiper-slide:last-child {
    margin-right: 25px
}

.checkin_new_content .checkin_new_Bar .swiper-slide:last-child .checkin_new_bar_bg {
    width: 27px
}

.checkin_new_content .checkin_new_Bar .swiper-slide:last-child .checkin_new_bar_bg_light {
    width: 28px
}

.checkin_new_content .checkin_new_Bar .checkin_new_bar_arrow_left,.checkin_new_content .checkin_new_Bar .checkin_new_bar_arrow_right {
    width: 18px;
    height: 18px;
    border-radius: 4px 0 0 4px;
    background-color: rgba(0,0,0,.75);
    position: absolute;
    left: 0;
    top: 18px;
    z-index: 2;
    background-image: url(../img/icon_arrow_unfold_10_hover.efac943e.png);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    border-radius: 0 0 4px 4px
}

.checkin_new_content .checkin_new_Bar .checkin_new_bar_arrow_left.hide,.checkin_new_content .checkin_new_Bar .checkin_new_bar_arrow_right.hide {
    opacity: 0
}

.checkin_new_content .checkin_new_Bar .checkin_new_bar_arrow_right {
    left: auto;
    right: 0;
    border-radius: 0 0 4px 4px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.checkin_new_content .g-Btn.checkin_new_btn {
    width: 108px;
    margin: 16px auto;
    display: block;
    font-size: 14px
}

.checkin_new_content .g-Btn.checkin_new_btn.disabled {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    color: #b4c0c9;
    font-weight: 700;
    border-top-color: #3e4851;
    border-bottom-color: #5b6d7e
}

.checkin_new_content .g-Btn.checkin_new_btn.sign_ads {
    margin-left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    padding: 0;
    display: inline-block
}

.checkin_new_content .g-Btn.checkin_new_btn span {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    display: block
}

.checkin_new_content .g-Btn.checkin_new_btn i {
    font-weight: 400;
    font-style: normal
}

.checkin_new_content .g-Btn.checkin_new_btn .desc_line {
    width: 1px;
    height: 10px;
    display: inline-block;
    margin: 0 4px;
    background-color: hsla(0,0%,100%,.2);
    vertical-align: middle
}

.checkin_new_content .checkin_new_super_float {
    width: 88px;
    position: absolute;
    right: -17px;
    top: -5px;
    height: -webkit-calc(100% + 7px);
    height: calc(100% + 7px);
    border-radius: 8px 0 0 8px;
    background: rgba(0,0,0,.75);
    padding: 19px 8px 0;
    box-sizing: border-box;
    z-index: 3;
    cursor: pointer
}

.checkin_new_content .checkin_new_super_date,.checkin_new_content .checkin_new_super_head {
    width: 100%;
    height: 13px;
    line-height: 13px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 7px 7px 0 0;
    background: -webkit-gradient(linear,right top,left top,color-stop(.04%,#efc678),to(#f9eac1));
    background: linear-gradient(270deg,#efc678 .04%,#f9eac1);
    color: #453e32;
    z-index: 1
}

.checkin_new_content .checkin_new_super_date span,.checkin_new_content .checkin_new_super_head span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    width: 120%;
    margin-left: -10%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.checkin_new_content .checkin_new_super_date:after,.checkin_new_content .checkin_new_super_date:before,.checkin_new_content .checkin_new_super_head:after,.checkin_new_content .checkin_new_super_head:before {
    content: "";
    position: absolute;
    left: -8px;
    top: -9px;
    width: 22px;
    height: 22px;
    background-image: url(../img/icon_star.02b37e9c.png);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.checkin_new_content .checkin_new_super_date:after,.checkin_new_content .checkin_new_super_head:after {
    left: auto;
    top: 2px;
    right: -9px
}

.checkin_new_content .checkin_new_super_date {
    min-width: 70px;
    top: 36px;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    border-radius: 4px
}

.checkin-group-pc .checkin_new_bar_arrow_left:hover,.checkin-group-pc .checkin_new_bar_arrow_right:hover,.checkin-group-pc .checkin_new_super_float:hover {
    background-color: #000
}

.checkin-group-pc .checkin_new_content .checkin_new_Bar .day:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,247,187,.9)),to(rgba(255,237,134,.9)));
    background: linear-gradient(180deg,rgba(255,247,187,.9),rgba(255,237,134,.9))
}

.page-canceluser[data-v-08feba01] {
    font-weight: 400!important;
    color: #b4c0c9;
    line-height: 1.8
}

.page-canceluser a[data-v-08feba01] {
    display: block;
    width: 100%;
    margin: 16px auto 0
}

.page-canceluser a[data-v-08feba01]:last-child {
    margin-top: 8px
}

.page-canceluser.page-canceluser-mobile[data-v-08feba01] {
    padding: 30px 20px;
    padding-left: -webkit-calc(20px + env(safe-area-inset-left));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: -webkit-calc(20px + env(safe-area-inset-right));
    padding-right: calc(20px + env(safe-area-inset-right))
}

.nav-resource[data-v-baa63312] {
    display: inline-block;
    vertical-align: middle
}

.nav-resource.me[data-v-baa63312] {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.nav-resource.me .item .icon[data-v-baa63312] {
    width: 24px;
    height: 24px
}

.nav-resource.me .item a[data-v-baa63312] {
    text-decoration: none
}

.nav-resource.pc .nav-userinfo-item[data-v-baa63312],.nav-resource.pc[data-v-baa63312] {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.nav-resource.pc .nav-userinfo-item[data-v-baa63312] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-left: 32px;
    background: hsla(0,0%,100%,.14);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.nav-resource.pc .nav-userinfo-item[data-v-baa63312]:hover {
    background: hsla(0,0%,100%,.2)
}

.nav-resource.pc .icon[data-v-baa63312] {
    width: 24px;
    height: 24px
}

.nav-resource .nav-btn[data-v-baa63312] {
    background: transparent;
    margin-left: 16px;
    margin-right: 0;
    width: 24px;
    height: 24px
}

.nav-resource .nav-btn .icon[data-v-baa63312] {
    width: 100%;
    height: 100%
}

.confirm-queue-welfare {
    margin: 0 28px;
    background: url(../img/bg.9f7894c9.png) no-repeat;
    background-size: 100% 100%;
    padding: 43px;
    height: 368px;
    width: 320px;
    box-sizing: border-box;
    position: relative
}

.confirm-queue-welfare .confirm-queue-welfare-m {
    height: auto;
    width: auto
}

.confirm-queue-welfare .exit_btn {
    position: absolute;
    top: 130px;
    right: 8px;
    border-radius: 16px;
    border: 3px solid #fedf96;
    background: #fff;
    color: #461414;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    cursor: pointer
}

.confirm-queue-welfare .handle {
    width: 42px;
    height: 50px;
    background: url(../img/handle.b14e76da.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 130px;
    right: 43px
}

.confirm-queue-welfare .title {
    color: #4f2727;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-top: 72%
}

.confirm-queue-welfare .title span {
    color: #d43c0c
}

.confirm-queue-welfare .desc {
    font-size: 14px;
    color: #461414;
    margin-top: 10px;
    text-align: center
}

.confirm-queue-welfare .desc span {
    color: #d43c0c
}

.confirm-queue-welfare .btn {
    width: 100%;
    height: 30px;
    margin-top: 20px;
    border: 3px solid #fff;
    border-bottom-width: 2px;
    border-radius: 20px;
    background: -webkit-gradient(linear,left top,right top,color-stop(60%,#8aecf7),to(#fdb5fa));
    background: linear-gradient(90deg,#8aecf7 60%,#fdb5fa);
    background-size: 100% 100%;
    overflow: hidden;
    cursor: pointer;
    position: relative
}

.confirm-queue-welfare .btn p {
    line-height: 30px;
    color: #173b4a;
    font-size: 14px;
    text-align: center;
    font-weight: 700;
    position: relative;
    z-index: 1
}

.confirm-queue-welfare .btn.queue {
    background-image: url(../img/btn_bg.7734c218.png)
}

.confirm-queue-welfare .btn .progress {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: #fff;
    right: 0;
    top: 0;
    bottom: 0
}

.confirm-queue-welfare .btn.success {
    background: -webkit-gradient(linear,left top,right top,color-stop(60%,#8aecf7),to(#fdb5fa));
    background: linear-gradient(90deg,#8aecf7 60%,#fdb5fa)
}

.confirm-queue-welfare .close {
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    bottom: -56px;
    cursor: pointer
}

.confirm-queue-welfare .close i {
    width: 36px;
    height: 36px
}

.queue_confirm_wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    background: -webkit-gradient(linear,left top,left bottom,from(#304051),color-stop(100.97%,#1e2831));
    background: linear-gradient(180deg,#304051,#1e2831 100.97%);
    padding: 44px 0 0;
    box-sizing: border-box
}

.queue_confirm_wrap .queue_back,.queue_confirm_wrap .queue_eara {
    width: 72px;
    height: 28px;
    line-height: 28px;
    border-radius: 16px;
    background: rgba(3,196,126,.1);
    cursor: pointer;
    color: #03c47e;
    font-size: 12px;
    text-align: center;
    position: absolute;
    left: 16px;
    top: 16px
}

.queue_confirm_wrap .queue_eara {
    width: auto;
    padding: 0 12px
}

.queue_confirm_wrap .queue_eara i {
    width: 1px;
    height: 10px;
    display: inline-block;
    margin: 0 4px;
    border-radius: 1px;
    background: rgba(3,196,126,.16)
}

.queue_confirm_wrap .queue_back {
    background: rgba(180,192,201,.1);
    color: #b4c0c9;
    left: auto;
    right: 16px
}

.queue_confirm_wrap .icon-live-empty {
    display: block;
    margin: 0 auto 15px
}

.queue_confirm_wrap .queue_ball_box {
    width: 138px;
    height: 138px;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 5px
}

.queue_confirm_wrap .queue_ball_box:before {
    width: 100%;
    height: 100%;
    content: "";
    background: url(../img/pic_game_loading_nor_138.60cffd92.png) no-repeat;
    background-size: 100% 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
    position: absolute
}

.queue_confirm_wrap .queue_ball_box.gold {
    background-image: url(../img/pic_game_loading_vip_138.d687aad3.png)
}

.queue_confirm_wrap .queue_ball_box .queue_time_left {
    position: absolute;
    right: 0;
    bottom: 40px;
    border-radius: 4px 4px 4px 0;
    background-color: #1e2831;
    z-index: 1;
    height: 14px;
    line-height: 14px
}

.queue_confirm_wrap .queue_ball_box .queue_time_left span {
    color: #03c47e;
    font-size: 12px;
    display: block;
    -webkit-transform: scale(.75);
    transform: scale(.75)
}

.queue_confirm_wrap .queue_ball_box .queue_ball {
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid hsla(0,0%,100%,.04);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative
}

.queue_confirm_wrap .queue_ball_box .queue_ball_game {
    width: 100%;
    height: 100%;
    position: relative
}

.queue_confirm_wrap .queue_ball_box .queue_ball_game img {
    width: 100%;
    height: 100%
}

.queue_confirm_wrap .queue_ball_box .queue_ball_game:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.8)
}

.queue_confirm_wrap .queue_ball_box .queue_peo {
    font-size: 14px;
    color: hsla(0,0%,100%,.7);
    position: absolute;
    top: 17px;
    left: 0;
    width: 100%;
    text-align: center
}

.queue_confirm_wrap .queue_ball_box .queue_peo span {
    font-weight: 700;
    font-size: 24px;
    color: #fff
}

.queue_confirm_wrap .queue_ball_box .queue_time {
    color: hsla(0,0%,100%,.7);
    position: absolute;
    top: 50px;
    font-size: 12px;
    left: 0;
    width: 100%;
    text-align: center
}

.queue_confirm_wrap .queue_ball_box .queue_time span {
    font-weight: 700;
    color: #fff
}

.queue_confirm_wrap .queue_ball_box .queque_speed {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: url(../img/pic_game_accelerate_bd_nor.20dafd69.png) 50% no-repeat;
    background-size: auto 100%;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    padding-top: 8px;
    box-sizing: border-box;
    cursor: pointer
}

.queue_confirm_wrap .queue_ball_box .queque_speed .icon {
    margin-top: -2px
}

.queue_confirm_wrap .queue_desc {
    font-size: 14px;
    color: #fff;
    text-align: center;
    margin: 8px 16px 0
}

.queue_confirm_wrap .queue_desc_vip p:first-child {
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
    text-align: center;
    background: var(--vip,linear-gradient(270deg,#efc678 .04%,#f9eac1));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.queue_confirm_wrap .queue_desc_vip .queue_desc {
    margin-top: 4px
}

.queue_confirm_wrap .queue_desc_speed p:first-child {
    color: #03c47e;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px
}

.queue_confirm_wrap .queue_btns {
    margin: 24px 16px 24px;
    height: 64px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.queue_confirm_wrap .queue_btns .queue_btn_vip,.queue_confirm_wrap .queue_btns .queue_btn_wait {
    width: 60%;
    border-radius: 12px;
    background: -webkit-gradient(linear,right top,left top,color-stop(.04%,#efc678),to(#f9eac1));
    background: linear-gradient(270deg,#efc678 .04%,#f9eac1);
    box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.2);
    position: relative;
    padding: 12px 0 0 12px;
    cursor: pointer
}

.queue_confirm_wrap .queue_btns .queue_btn_vip:before,.queue_confirm_wrap .queue_btns .queue_btn_wait:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../img/pic_pattern_left_nor.fee28148.png) no-repeat;
    background-size: auto 100%;
    left: 0;
    top: 0;
    pointer-events: none
}

.queue_confirm_wrap .queue_btns .queue_btn_vip:after,.queue_confirm_wrap .queue_btns .queue_btn_wait:after {
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/pic_pattern_right_vip_phone.e29d068e.png) no-repeat;
    background-size: auto 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    background-position: 100% 100%;
    pointer-events: none
}

.queue_confirm_wrap .queue_btns .queue_btn_vip p:first-child,.queue_confirm_wrap .queue_btns .queue_btn_wait p:first-child {
    font-size: 16px;
    color: #453e32;
    font-weight: 700
}

.queue_confirm_wrap .queue_btns .queue_btn_vip p:first-child .icon,.queue_confirm_wrap .queue_btns .queue_btn_wait p:first-child .icon {
    margin-top: -6px;
    width: 12px;
    height: 12px;
    opacity: .5
}

.queue_confirm_wrap .queue_btns .queue_btn_vip p:nth-child(2),.queue_confirm_wrap .queue_btns .queue_btn_wait p:nth-child(2) {
    font-size: 12px;
    color: #453e32;
    margin-top: 2px
}

.queue_confirm_wrap .queue_btns .queue_btn_vip p:nth-child(2) span,.queue_confirm_wrap .queue_btns .queue_btn_wait p:nth-child(2) span {
    font-weight: 700
}

.queue_confirm_wrap .queue_btns .queue_btn_vip .queue_coupon,.queue_confirm_wrap .queue_btns .queue_btn_wait .queue_coupon {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    padding: 0 12px;
    border-radius: 10px 10px 10px 0;
    border: 1px solid hsla(0,0%,100%,.2);
    background: linear-gradient(93deg,#ffa786,#f97269);
    position: absolute;
    left: 0;
    top: -10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box
}

.queue_confirm_wrap .queue_btns .queue_btn_wait {
    width: -webkit-calc(40% - 8px);
    width: calc(40% - 8px);
    margin-left: 8px;
    background: -webkit-gradient(linear,right top,left top,from(#17dc94),to(#03c47e));
    background: linear-gradient(270deg,#17dc94,#03c47e)
}

.queue_confirm_wrap .queue_btns .queue_btn_wait:after {
    background-image: url(../img/pic_pattern_right_playtogether.8b9ec12b.png)
}

.queue_confirm_wrap .queue_btns .queue_btn_wait p:first-child,.queue_confirm_wrap .queue_btns .queue_btn_wait p:nth-child(2) {
    color: #fff
}

.queue_confirm_wrap .queue_btns .queue_btn_vip_pc:after {
    background-image: url(../img/pic_pattern_right_vip_pc.e8817ec8.png)
}

.queue_confirm_wrap .queue_btns.queue_btns_single {
    height: 48px
}

.queue_confirm_wrap .queue_btns.queue_btns_single>div {
    width: 100%;
    padding: 3px 0 4px;
    text-align: center
}

.queue_confirm_wrap .queue_tips {
    margin-top: 24px;
    width: 100%;
    height: 32px;
    line-height: 32px;
    background: rgba(3,196,126,.1);
    font-size: 12px;
    color: #03c47e;
    text-align: center
}

.queue_confirm_wrap .queue_tips .icon {
    margin: -2px 2px 0 0
}

.queue_confirm_wrap .queue_ball_box_normal .queque_speed,.queue_confirm_wrap .queue_ball_box_normal .queue_time_left {
    display: none
}

.queue_confirm_wrap .queue_ball_box_normal .queue_peo {
    top: 37px
}

.queue_confirm_wrap .queue_ball_box_normal .queue_time {
    top: 71px
}

.queue_confirm_wrap .queue_ball_box_vip:before {
    background-image: url(../img/pic_game_loading_vip_138.d687aad3.png)
}

.queue_confirm_wrap .queue_ball_box_vip .queue_peo span,.queue_confirm_wrap .queue_ball_box_vip .queue_time span {
    color: #f9e7aa
}

.queue_confirm_shade_pc {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.queue_confirm_shade_pc .queue_confirm_wrap {
    width: 375px;
    border-radius: 16px;
    position: relative
}

.queue_confirm_shade_pc .queue_confirm_wrap .queue_tips {
    border-radius: 0 0 16px 16px
}

.queue_confirm_shade_pc .queue_confirm_wrap .queue_btn_vip:hover {
    background: -webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,.7)),color-stop(.01%,hsla(0,0%,100%,.5)),to(hsla(0,0%,100%,0))),-webkit-gradient(linear,right top,left top,color-stop(.04%,#efc678),to(#f9eac1));
    background: linear-gradient(0deg,hsla(0,0%,100%,.7),hsla(0,0%,100%,.5) .01%,hsla(0,0%,100%,0)),linear-gradient(270deg,#efc678 .04%,#f9eac1)
}

.queue_confirm_shade_pc .queue_confirm_wrap .queue_btn_wait:hover {
    background: -webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,.7)),color-stop(.01%,hsla(0,0%,100%,.5)),to(hsla(0,0%,100%,0))),-webkit-gradient(linear,left top,right top,from(#17dc94),to(#03c47e));
    background: linear-gradient(0deg,hsla(0,0%,100%,.7),hsla(0,0%,100%,.5) .01%,hsla(0,0%,100%,0)),linear-gradient(90deg,#17dc94,#03c47e)
}

.queue_confirm_shade_pc .queue_confirm_wrap .queue_eara:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(3,196,126,.1)),to(rgba(3,196,126,.3)));
    background: linear-gradient(180deg,rgba(3,196,126,.1),rgba(3,196,126,.3))
}

.queue_confirm_shade_pc .queue_confirm_wrap .queue_back:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(180,192,201,.1)),to(rgba(180,192,201,.3)));
    background: linear-gradient(180deg,rgba(180,192,201,.1),rgba(180,192,201,.3))
}

.queue_confirm_shade_pc .queue_confirm_wrap .queque_speed:hover {
    background-image: url(../img/pic_game_accelerate_bd_hor.ba50673e.png)
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.fs_confirm_copy {
    color: #b4c0c9;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    background: #28333d;
    border-radius: 4px;
    padding-bottom: 16px
}

.fs_confirm_copy .cofirm-cont {
    background-image: url(../img/pic_bkg_pattern.7fc39951.png);
    background-repeat: no-repeat;
    background-position: 16px 0;
    background-size: 110px 68px;
    padding: 24px 0 16px;
    color: #b4c0c9
}

.fs_confirm_copy .cofirm-msg {
    padding: 0 16px 24px;
    color: #b4c0c9
}

.fs_confirm_copy .green {
    color: #03c47e
}

.fs_confirm_copy p {
    margin-bottom: 10px
}

.fs_confirm_copy i {
    margin-right: 4px
}

.fs_confirm_copy .g-Btn {
    font-size: 14px;
    margin-top: 16px
}

.fs_confirm_copy .fs_rem_notice {
    margin-bottom: 16px;
    border-radius: 0 0 4px 4px;
    background: rgba(3,196,126,.1);
    box-shadow: inset 0 .5px 0 0 rgba(180,192,201,.04);
    color: rgba(3,196,126,.8);
    font-size: 12px;
    font-weight: 700;
    height: 24px;
    line-height: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer
}

.fs_confirm_copy .fs_rem_notice i {
    border-radius: 50%;
    border: 1px solid #03c47e;
    width: 12px;
    height: 12px;
    background-size: 100% 100%
}

.fs_confirm_copy .fs_rem_notice i.active {
    border: 0;
    width: 14px;
    height: 14px
}

.fs_confirm_copy .fs_rem_gif {
    width: -webkit-calc(100% - 32px);
    width: calc(100% - 32px);
    border-radius: 4px;
    margin: 0 16px;
    display: block
}

.fs_confirm_review {
    padding: 0
}

.fs_confirm_review .cofirm-cont {
    padding: 24px 32px
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased
}

:focus {
    outline: none
}

h1,h2,h3,h4,h5,li,p,ul {
    padding: 0;
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace,monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto;
    -webkit-appearance: none;
    appearance: none;
    margin: 0
}

[type=search] {
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button {
    display: none
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden],template {
    display: none
}

ul {
    list-style: none
}

body,html {
    height: 100%;
    min-height: 100%;
    min-height: -webkit-calc(100% + constant(safe-area-inset-top));
    min-height: calc(100% + constant(safe-area-inset-top));
    min-height: -webkit-calc(100% + env(safe-area-inset-top));
    min-height: calc(100% + env(safe-area-inset-top))
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: hsla(0,0%,100%,.1);
    border-radius: 4px
}

::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-thumb:hover {
    background: hsla(0,0%,100%,.2)
}

body {
    color: #fff;
    background-color: #1e2831;
    min-width: 320px;
    line-height: 1.5;
    background-position: top;
    background-repeat: no-repeat;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

/*video {*/
/*    max-width: 100%*/
/*}*/

/*video:focus {*/
/*    outline: none*/
/*}*/

iframe {
    height: 0
}

.indexbg,body.hasIframe iframe {
    width: 100%;
    height: 100%
}

.indexbg {
    background: url(../img/bg.28296dd4.jpg) 100% 0 no-repeat;
    background-size: 100% 40%;
    position: absolute;
    top: 0;
    opacity: 1;
    -webkit-transition: opacity .3s cubic-bezier(.25,.8,.25,1);
    transition: opacity .3s cubic-bezier(.25,.8,.25,1)
}

.indexbg.collapsed {
    opacity: 0
}

.indexappbg {
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 0;
    padding-bottom: 35.57%;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden
}

.indexappbg:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(23,26,30,0)),to(#1e2831));
    background-image: linear-gradient(-180deg,rgba(23,26,30,0),#1e2831)
}

@media only screen and (max-width: 768px) {
    .detailbg {
        background-size:100% 30%
    }
}

.detailbg {
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 512px;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    overflow: hidden
}

.detailbg:after,.detailbg:before {
    position: absolute;
    content: ""
}

.detailbg:before {
    bottom: 0;
    width: 100%;
    height: 0;
    padding-bottom: 17.77777778%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(23,26,30,0)),to(#1e2831));
    background-image: linear-gradient(-180deg,rgba(23,26,30,0),#1e2831);
    z-index: 1
}

.detailbg:after {
    left: 0;
    height: 100%;
    width: 660px;
    background-image: -webkit-gradient(linear,right top,left top,from(rgba(30,40,49,0)),color-stop(74%,rgba(30,40,49,.85)));
    background-image: linear-gradient(-90deg,rgba(30,40,49,0),rgba(30,40,49,.85) 74%)
}

@media only screen and (min-width: 1919px) {
    .detailbg:after {
        width:880px
    }
}

@media only screen and (max-width: 1024px) {
    .detailbg {
        height:400px
    }
}

@media only screen and (max-width: 768px) {
    .detailbg {
        background-position:80% top
    }
}

@media only screen and (max-width: 414px) {
    .detailbg:after {
        width:100%
    }
}

#content {
    max-width: 1920px;
    padding: 0 8%;
    margin: 0 auto;
    position: relative
}

@media only screen and (min-width: 1919px) {
    #content {
        padding:0 8%
    }
}

@media only screen and (max-width: 768px) {
    #content {
        padding:0 40px
    }
}

@media only screen and (max-width: 414px) {
    #content {
        padding:0 16px
    }
}

.emptycontent {
    padding: 0 30px;
    min-height: 600px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 18px
}

input {
    padding: 0;
    color: #fff;
    border: none;
    outline: none;
    background: transparent
}

input::-webkit-input-placeholder {
    color: #61686f
}

input:-ms-input-placeholder {
    color: #61686f
}

input::placeholder {
    color: #61686f
}

textarea::-webkit-input-placeholder {
    color: #61686f
}

textarea:-ms-input-placeholder {
    color: #61686f
}

textarea::placeholder {
    color: #61686f
}

.lang-zh {
    font-family: PingFang SC,Microsoft YaHei,"\5FAE\8F6F\96C5\9ED1",Source San Pro,MingLiu,Arial,sans-serif;
    font-size: 12px
}

.lang-zh .f40 {
    font-size: 32px!important
}

.lang-zh .f28 {
    font-size: 28px!important
}

.lang-zh .f26 {
    font-size: 26px!important
}

.lang-zh .f24 {
    font-size: 24px!important
}

.lang-zh .f20 {
    font-size: 20px!important
}

.lang-zh .f18 {
    font-size: 18px!important
}

.lang-zh .f16 {
    font-size: 16px!important
}

.lang-zh .f14 {
    font-size: 14px!important
}

.lang-zh .f13 {
    font-size: 13px!important
}

.lang-zh .f12 {
    font-size: 12px!important
}

.lang-zh input::-webkit-input-placeholder,.lang-zh textarea::-webkit-input-placeholder {
    font-size: 12px
}

.lang-zh input:-ms-input-placeholder,.lang-zh textarea:-ms-input-placeholder {
    font-size: 12px
}

.lang-zh input::placeholder,.lang-zh textarea::placeholder {
    font-size: 12px
}

.lang-en,.lang-zh .g-Btn {
    font-size: 14px
}

.lang-en {
    font-family: source sans pro
}

.lang-en .f40 {
    font-size: 34px!important
}

.lang-en .f28 {
    font-size: 30px!important
}

.lang-en .f26 {
    font-size: 28px!important
}

.lang-en .f24 {
    font-size: 26px!important
}

.lang-en .f20 {
    font-size: 22px!important
}

.lang-en .f18 {
    font-size: 20px!important
}

.lang-en .f16 {
    font-size: 18px!important
}

.lang-en .f14 {
    font-size: 16px!important
}

.lang-en .f13 {
    font-size: 13px!important
}

.lang-en .f12 {
    font-size: 14px!important
}

.lang-en .g-Btn {
    font-size: 16px
}

.InMobile {
    font-size: 14px
}

.InMobile .f40 {
    font-size: 34px!important
}

.InMobile .f28 {
    font-size: 28px!important
}

.InMobile .f24,.InMobile .f26 {
    font-size: 26px!important
}

.InMobile .f20 {
    font-size: 22px!important
}

.InMobile .f18 {
    font-size: 20px!important
}

.InMobile .f16 {
    font-size: 18px!important
}

.InMobile .f15 {
    font-size: 15px
}

.InMobile .f14 {
    font-size: 16px!important
}

.InMobile .f12 {
    font-size: 14px!important
}

.InMobile .f12_n {
    font-size: 12px!important
}

.InMobile .f10 {
    font-size: 10px!important
}

.InMobile input::-webkit-input-placeholder,.InMobile textarea::-webkit-input-placeholder {
    font-size: 14px
}

.InMobile input:-ms-input-placeholder,.InMobile textarea:-ms-input-placeholder {
    font-size: 14px
}

.InMobile input::placeholder,.InMobile textarea::placeholder {
    font-size: 14px
}

.InMobile .g-Btn {
    font-size: 16px
}

.InMobile .emptycontent {
    min-height: 350px
}

.InTV {
    font-size: 18px
}

.InTV .f40 {
    font-size: 38px!important
}

.InTV .f28 {
    font-size: 34px!important
}

.InTV .f26 {
    font-size: 32px!important
}

.InTV .f24 {
    font-size: 30px!important
}

.InTV .f20 {
    font-size: 26px!important
}

.InTV .f18 {
    font-size: 24px!important
}

.InTV .f16 {
    font-size: 22px!important
}

.InTV .f14 {
    font-size: 20px!important
}

.InTV .f12 {
    font-size: 18px!important
}

.InTV .f10 {
    font-size: 14px!important
}

.InTV input::-webkit-input-placeholder,.InTV textarea::-webkit-input-placeholder {
    font-size: 18px
}

.InTV input:-ms-input-placeholder,.InTV textarea:-ms-input-placeholder {
    font-size: 18px
}

.InTV input::placeholder,.InTV textarea::placeholder {
    font-size: 18px
}

.InTV .g-Btn {
    font-size: 20px
}

.InMuMu {
    font-size: 12px
}

.InMuMu .f40 {
    font-size: 32px!important
}

.InMuMu .f28 {
    font-size: 28px!important
}

.InMuMu .f26 {
    font-size: 26px!important
}

.InMuMu .f24 {
    font-size: 24px!important
}

.InMuMu .f20 {
    font-size: 20px!important
}

.InMuMu .f18 {
    font-size: 18px!important
}

.InMuMu .f16 {
    font-size: 16px!important
}

.InMuMu .f14 {
    font-size: 14px!important
}

.InMuMu .f13 {
    font-size: 13px!important
}

.InMuMu .f12 {
    font-size: 12px!important
}

.InMuMu input::-webkit-input-placeholder,.InMuMu textarea::-webkit-input-placeholder {
    font-size: 12px
}

.InMuMu input:-ms-input-placeholder,.InMuMu textarea:-ms-input-placeholder {
    font-size: 12px
}

.InMuMu input::placeholder,.InMuMu textarea::placeholder {
    font-size: 12px
}

.InMuMu .g-Btn {
    font-size: 14px
}

.g-color-or {
    color: #e68c26
}

.g-color-red {
    color: #e35043
}

.g-color-white {
    color: #fff
}

.g-color-yellow {
    color: #ebcf9e
}

.g-color-yellow2 {
    color: #f9e7aa
}

.g-color {
    color: #03c47e!important
}

a {
    color: #03c47e
}

a:hover {
    color: #0ad88d
}

.gmt10 {
    margin-top: 10px
}

.g-Btn {
    vertical-align: middle;
    text-align: center;
    padding: 0 32px;
    height: 36px;
    line-height: 34px;
    display: inline-block;
    border-radius: 20px;
    box-sizing: border-box;
    white-space: nowrap;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer
}

.g-Btn:focus {
    outline: none
}

.g-Btn-white,a.g-Btn-white {
    border: 1px solid #61686f;
    color: #8b969f
}

.g-Btn-white:focus,.g-Btn-white:hover,a.g-Btn-white:focus,a.g-Btn-white:hover {
    border-color: #fff;
    color: #fff
}

.g-Btn-white2,a.g-Btn-white2 {
    border: 1px solid #fff;
    background: #fff;
    color: #03c47e
}

.g-Btn-white3,a.g-Btn-white3 {
    border: 1px solid #fff;
    background: #fff!important;
    color: #28333d
}

.g-Btn-green,a.g-Btn-green {
    border: 1px solid #03c47e;
    color: #03c47e;
    font-weight: 700
}

.g-Btn-green:focus,.g-Btn-green:hover,a.g-Btn-green:focus,a.g-Btn-green:hover {
    background: rgba(3,196,126,.2)
}

.g-Btn-green2,a.g-Btn-green2 {
    border: 1px solid #03c47e;
    background: #03c47e;
    color: #fff;
    font-weight: 700
}

.g-Btn-green2:focus,.g-Btn-green2:hover,a.g-Btn-green2:focus,a.g-Btn-green2:hover {
    -webkit-transition: background-image 3s ease-in-out 1s;
    transition: background-image 3s ease-in-out 1s;
    background-image: radial-gradient(ellipse farthest-corner at bottom,#aafced 0,#03c47e 65%)
}

.g-Btn-green3,a.g-Btn-green3 {
    background: rgba(3,196,126,.3);
    color: #fff;
    font-weight: 700
}

.g-Btn-green3:focus,.g-Btn-green3:hover,a.g-Btn-green3:focus,a.g-Btn-green3:hover {
    -webkit-transition: background-image 3s ease-in-out 1s;
    transition: background-image 3s ease-in-out 1s;
    background-image: radial-gradient(ellipse farthest-corner at bottom,#aafced 0,#03c47e 65%)
}

.g-Btn-grey,a.g-Btn-grey {
    border: 0;
    color: #8b969f;
    font-weight: 700;
    background: #28333d
}

.g-Btn-black,a.g-Btn-black {
    border: 0;
    color: #b4c0c9;
    font-weight: 700;
    background: #1e2831
}

.g-Btn-before {
    position: relative;
    font-weight: 700
}

.g-Btn-before[data-text]:before {
    content: attr(data-text);
    position: absolute;
    top: -8px;
    right: 0;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    padding: 0 8px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 10.5px 10.5px 10.5px 0
}

.btn-before-yellow-green {
    color: #2d3d4c!important;
    border-color: transparent!important;
    background-image: linear-gradient(172deg,#efdcb3,#e7c68e)!important
}

.btn-before-yellow-green[data-text]:before {
    color: #fff;
    background: #03c47e!important
}

.btn-before-green-red {
    background: #03c47e!important;
    border: 1px solid #03c47e!important;
    color: #fff!important
}

.btn-before-green-red[data-text]:before {
    background: #ff606e!important
}

.btn-before-gray[data-text]:before {
    color: #fff;
    background-image: linear-gradient(139deg,#888b99,#4d5061);
    border: 1px solid hsla(0,0%,100%,.6);
    border-left-color: hsla(0,0%,100%,.3);
    border-right-color: hsla(0,0%,100%,.3);
    border-bottom-color: transparent;
    -webkit-transform: scale(.7);
    transform: scale(.7);
    -webkit-transform-origin: right;
    transform-origin: right
}

.btn-before-orange[data-text]:before {
    background-image: linear-gradient(225deg,#f97269,#ffa786);
    border-radius: 6px 6px 6px 0;
    font-family: PingFangSC-Semibold;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.2);
    font-weight: 600;
    height: 14px;
    line-height: 14px
}

.btn-before-gold[data-text]:before {
    color: #664a1a;
    background: #e4bf84;
    border: 1px solid rgba(255,245,226,.6);
    border-left-color: rgba(255,245,226,.3);
    border-right-color: rgba(255,245,226,.3);
    border-bottom-color: transparent;
    -webkit-transform: scale(.7);
    transform: scale(.7);
    -webkit-transform-origin: right;
    transform-origin: right
}

.InMobile .g-Btn-green:focus,.InMobile .g-Btn-green:hover,.InMobile a.g-Btn-green:focus,.InMobile a.g-Btn-green:hover {
    background: transparent
}

.InMobile .g-Btn-green2.on,.InMobile a.g-Btn-green2.on {
    -webkit-transition: inherit;
    transition: inherit;
    -webkit-transition: unset;
    transition: unset;
    background-image: radial-gradient(ellipse farthest-corner at bottom,#aafced 0,#03c47e 65%)!important
}

.InMobile .g-Btn-green2:focus,.InMobile .g-Btn-green2:hover,.InMobile a.g-Btn-green2:focus,.InMobile a.g-Btn-green2:hover {
    -webkit-transition: inherit;
    transition: inherit;
    -webkit-transition: unset;
    transition: unset;
    background: #03c47e
}

.InTV .g-Btn-green2,.InTV .g-Btn-white,.InTV a.g-Btn-green2,.InTV a.g-Btn-white {
    border: none;
    color: #b4c0c9;
    background: #304051!important;
    height: 50px;
    line-height: 50px;
    padding-left: 60PX;
    padding-right: 60PX;
    border-radius: 50px;
    -webkit-transition: inherit;
    transition: inherit;
    -webkit-transition: unset;
    transition: unset
}

.InTV .g-Btn-green2:active,.InTV .g-Btn-green2:focus,.InTV .g-Btn-green2:hover,.InTV .g-Btn-white:active,.InTV .g-Btn-white:focus,.InTV .g-Btn-white:hover,.InTV a.g-Btn-green2:active,.InTV a.g-Btn-green2:focus,.InTV a.g-Btn-green2:hover,.InTV a.g-Btn-white:active,.InTV a.g-Btn-white:focus,.InTV a.g-Btn-white:hover {
    background-image: none;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.2);
    background: #03c47e!important
}

.InTV .g-Btn-green2:focus,.InTV .g-Btn-green2:hover,.InTV .g-Btn-white:focus,.InTV .g-Btn-white:hover,.InTV a.g-Btn-green2:focus,.InTV a.g-Btn-green2:hover,.InTV a.g-Btn-white:focus,.InTV a.g-Btn-white:hover {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

.InTV .g-Btn-green2.active,.InTV .g-Btn-white.active,.InTV a.g-Btn-green2.active,.InTV a.g-Btn-white.active {
    -webkit-animation-duration: .1s;
    animation-duration: .1s;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

.g-Btn-wz {
    color: #61686f;
    line-height: 36px
}

.gCurPoint {
    cursor: pointer
}

.gCurPoint .pc-hang {
    position: absolute;
    bottom: 6px
}

.gCurPoint.gCurPoint-download {
    position: relative
}

.gCurPoint.gCurPoint-download .download-qr-code {
    position: absolute;
    top: -webkit-calc(100% + 4px);
    top: calc(100% + 4px);
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    display: none;
    border-radius: 4.8px;
    overflow: hidden;
    font-size: 0
}

.gCurPoint.gCurPoint-download:hover .download-qr-code {
    display: inline-block
}

.g-noevent {
    pointer-events: none
}

.g-tag {
    padding: 2px 4px;
    color: #664a1a;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f3e1ba),to(#e4bf84));
    background-image: linear-gradient(180deg,#f3e1ba,#e4bf84);
    border-radius: 0 8px 0 8px
}

.g-tag-purple {
    background-image: linear-gradient(134deg,#3023ae,#c86dd7);
    border-radius: 10px;
    height: 14px;
    line-height: 14px;
    overflow: hidden;
    padding: 0 4px
}

.g-tag-purple span {
    color: #1e2831
}

.g-tag-gree {
    color: #fff;
    padding: 0 6px;
    background: linear-gradient(-45deg,#177251,#5ecfa6);
    border-radius: 8px
}

.g-circle-gray {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-image: linear-gradient(135deg,#888b99,#4d5061)
}

.g-circle-gray>.icon {
    margin: 0!important
}

.g-point-red {
    position: relative
}

.g-point-red:before {
    content: "";
    position: absolute;
    top: -3px;
    right: -9px;
    width: 6px;
    height: 6px;
    background-color: #e35043;
    border-radius: 50%
}

.pagegame {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-top: 56px;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start
}

.pagegame>aside {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: 200px
}

.pagegame>section {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
    flex: 4
}

.confirm-extend {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.g-empty-status {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: #8b969f
}

.g-empty-status .icon {
    margin-bottom: 10px
}

.InTransLandscape .cofirm {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.InTransLandscape .cofirm.confirmCamer,.InTransLandscape .cofirm.hang-confirm.rotate,.InTransLandscape .cofirm.iosplaycofirm-confirm {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.InTransLandscape .toast {
    -webkit-transform: translate3d(-50%,-50%,0) rotate(90deg)!important;
    transform: translate3d(-50%,-50%,0) rotate(90deg)!important
}

.InTransLandscape .toast.toast-loading {
    -webkit-transform: translate3d(-50%,-50%,0)!important;
    transform: translate3d(-50%,-50%,0)!important
}

.InTransLandscape .confirm-extend {
    -webkit-transform: translate(-50%,-50%) rotate(90deg);
    transform: translate(-50%,-50%) rotate(90deg);
    width: 100vh;
    height: 100vw
}

.InTransLandscape .confirm-transparent.run-zj {
    -webkit-transform: none;
    transform: none
}

.InTransLandscape .confirm-transparent.run-sdk {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    min-height: 50%
}

.InTransLandscape .InMobile .activity-entry.is-run.run-zj {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.InTransLandscape .InMobile .activity-entry.is-run.run-sdk {
    -webkit-transform: translateZ(0) rotate(90deg);
    transform: translateZ(0) rotate(90deg);
    top: 90%
}

.InTransPortrait .cofirm {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.InTransPortrait .cofirm.hang-confirm.rotate,.InTransPortrait .cofirm.iosplaycofirm-confirm {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    min-width: auto;
    max-width: 80%
}

.InTransPortrait .confirm-extend {
    -webkit-transform: translate(-50%,-50%) rotate(-90deg);
    transform: translate(-50%,-50%) rotate(-90deg);
    width: 100vh;
    height: 100vw
}

.InTransPortrait .toast {
    -webkit-transform: translate3d(-50%,-50%,0) rotate(-90deg)!important;
    transform: translate3d(-50%,-50%,0) rotate(-90deg)!important
}

.InTransPortrait .toast.toast-loading {
    -webkit-transform: translate3d(-50%,-50%,0)!important;
    transform: translate3d(-50%,-50%,0)!important
}

.InTransPortrait .start-time {
    width: 80%!important;
    height: auto!important;
    padding: 16px 20px!important;
    white-space: normal!important
}

.icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    vertical-align: middle
}

.icon-avatar {
    width: 24px;
    height: 24px
}

.icon-avatar,.icon-avatar2 {
    background-image: url(../img/icon_defaultavatar.6a9c5e81.png);
    border: 1px solid #fff;
    border-radius: 50%;
    box-sizing: border-box
}

.icon-avatar2 {
    width: 36px;
    height: 36px
}

.icon-avatar3 {
    width: 48px;
    height: 48px;
    background-image: url(../img/icon_defaultavatar.6a9c5e81.png);
    border: 1px solid #fff;
    border-radius: 50%;
    box-sizing: border-box
}

.icon-history {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_INDEX_history.5d4f5c50.png)
}

.icon-playing {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_INDEX_playing.dde3af5d.png)
}

.icon-queueing {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_INDEX_pending.48a0470d.png)
}

.icon-welcome {
    width: 168px;
    height: 120px;
    background-image: url(../img/emoji_welcome.c00610f0.png)
}

.icon-emoji_bbb {
    width: 168px;
    height: 120px;
    background-image: url(../img/emoji_bbb.18fccf16.png)
}

.icon-emoji-cry {
    width: 168px;
    height: 120px;
    background-image: url(../img/pic_signin_emoji_crying.b6e98e5e.png)
}

.icon-emoji-wow {
    width: 176px;
    height: 96px;
    background-image: url(../img/pic_wow.05b32fb9.png)
}

.icon-address {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_INDEX_server_green.ee67c3e9.png)
}

.not .icon-address {
    background-image: url(../img/icon_INDEX_server_gray.2f4db5a8.png)
}

.icon-empty {
    width: 123px;
    height: 83px;
    background-image: url(../img/pic_empty.ee60f3af.png)
}

.icon-time {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_INDEX_time.25b80476.png)
}

.icon-qq {
    background-image: url(../img/icon_ME_qq_grey.1c7bf4fa.png);
    background-size: 10px
}

.icon-signout {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_INDEX_signout_normal.f2b1fdd6.png)
}

.icon-feedback {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_feedback_grey.a5349942.png)
}

.icon-agreement {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_agreement.3c760459.png)
}

.icon-vip-discount {
    width: 60px;
    height: 21px;
    background-image: url(../img/icon_ME_discount.8ae40c3b.png)
}

.icon-vip {
    width: 25px;
    height: 25px;
    background-image: url(../img/icon_ME_vip.a0a0e020.png)
}

.user-list li:hover .icon-signout {
    background-image: url(../img/icon_INDEX_signout_hovered.34253e50.png)
}

.user-list li:hover .icon-agreement {
    background-image: url(../img/icon_ME_agreement_white.41202884.png)
}

.user-list li:hover .icon-feedback {
    background-image: url(../img/icon_ME_feedback_white.4fa35fe2.png)
}

.user-list li:hover .icon-question {
    background-image: url(../img/icon_ME_questions_white.2009be55.png)
}

.user-list li:hover .icon-share {
    background-image: url(../img/icon_ME_share_white.b52baad8.png)
}

.icon-hamburger {
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url(../img/icon_INDEX_hamburger_normal.83d32807.png)
}

.icon-hamburger:hover {
    background-image: url(../img/icon_INDEX_hamburger_hovered.b7810504.png)
}

.icon-back {
    width: 24px;
    height: 24px;
    background-image: url(../img/back.508cc8b5.png);
    cursor: pointer
}

.icon-back:hover {
    background-image: url(../img/back_hover.18ccb83f.png)
}

.icon-back-menu {
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url(../img/icon_INDEX_back_hovered.cef3f83d.png)
}

.icon-back-menu:hover {
    background-image: url(../img/icon_INDEX_back_normal.9ddca219.png)
}

.icon-kbsfold {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-image: url(../img/icon_KBS_fold_normal.776c5b92.png)
}

.keyboard-fold:hover .icon-kbsfold {
    background-image: url(../img/icon_KBS_fold_hovered.477c0d38.png)
}

.icon-close {
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-image: url(../img/icon_CP_close_normal.3e736c2a.png)
}

.icon-close:hover {
    background-image: url(../img/icon_CP_close_hovered.79962e67.png)
}

.icon-suc {
    background-image: url(../img/icon_signin_success.c68f9cb2.png)
}

.icon-fail,.icon-suc {
    width: 32px;
    height: 32px
}

.icon-fail {
    background-image: url(../img/icon_signin_fail.fa9b79b5.png)
}

.icon-warn {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_signin_info.c0458082.png)
}

.icon-check {
    width: 24px;
    height: 24px;
    background-image: url(../img/uncheck.74414aa8.png)
}

.gray2 .icon-check,.gray .icon-check {
    background-image: url(../img/icon_KBS_checkbox_grey_unchecked.aff998a2.png)
}

.gray3 .icon-check {
    background-image: url(../img/icon_CP_unselected_40.729477b7.png)
}

.on .gray2 .icon-check,.on .icon-check {
    background-image: url(../img/check.591c9be4.png)
}

.on .gray .icon-check {
    background-image: url(../img/icon_KBS_checkbox_checked.3ff69551.png)
}

.on .gray3 .icon-check {
    background-image: url(../img/icon_CP_selected_40.d9bd5bcc.png)
}

.icon-check2 {
    visibility: hidden;
    background-image: url(../img/tvicon_CP_checked.0967285c.png)
}

.icon-back2 {
    width: 8px;
    height: 8px;
    background-image: url(../img/icon_CP_back_normal.dc0445c1.png)
}

.login-region:hover .icon-back2 {
    background-image: url(../img/icon_CP_back_hovered.d7c79238.png)
}

.InMobile .login-region:hover .icon-back2 {
    background-image: url(../img/icon_CP_back_normal.dc0445c1.png)
}

.icon-fixed {
    width: 24px;
    height: 24px;
    background-image: url("../img/icon_CP_pin(web)_normal.79e7e6b0.png")
}

.icon-fixed:hover {
    background-image: url("../img/icon_CP_pin(web)_hovered.aabbfeb7.png")
}

.icon-fixed.on {
    background-image: url("../img/icon_CP_pin(web)_activated.980250cc.png")!important
}

.icon-fixedKey {
    width: 24px;
    height: 24px;
    background-image: url(../img/btn_runnning_hidekeyboard_normal.fae80fe4.png)
}

.icon-fixedKey:hover {
    background-image: url(../img/btn_runnning_hidekeyboard_hovered.275a9832.png)
}

.icon-fixedKey.on {
    background-image: url(../img/btn_runnning_hidekeyboard_activated.429d0365.png)!important
}

.icon-click {
    width: 48px;
    height: 48px;
    background-image: url(../img/icon_KBS_clickbutton_normal.0e899b80.png)
}

.icon-wheel {
    width: 48px;
    height: 48px;
    background-image: url(../img/icon_KBS_Wheel_normal.d7b79b38.png)
}

.icon-gamepad {
    width: 48px;
    height: 48px;
    background-image: url(../img/icon_CP_controller\ instruction.6658eaa0.png)
}

.icon-switch-keyboard {
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_CP_keyboardsetting_normal.c51581da.png)
}

.onKeyboard .icon-switch-keyboard {
    background-image: url(../img/icon_CP_keyboardsetting_selected.62a5c97b.png)
}

.icon-switch-gamepad {
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_CP_controllersetting_normal.0f58e5ca.png)
}

.onGamepad .icon-switch-gamepad {
    background-image: url(../img/icon_CP_controllersetting_selected.bef30d4f.png)
}

.controlpanel-con>li.disable .icon-wheel {
    background-image: url(../img/icon_KBS_Wheel_disabled.e812d540.png)!important
}

.controlpanel-head>span:first-of-type:hover .icon-back2 {
    background-image: url(../img/icon_CP_back_hovered.d7c79238.png)
}

.icon-fullwindowed {
    background-image: url(../img/icon_CP_full\ screen_normal.dae73f6a.png)
}

.icon-windowed {
    background-image: url(../img/icon_CP_windowed_normal.62cdbc52.png)
}

.icon_sound0 {
    background-image: url(../img/icon_CP_sound0_normal.3de68432.png)
}

.icon_sound50 {
    background-image: url(../img/icon_CP_sound50_normal.a4238f83.png)
}

.icon_sound100 {
    background-image: url(../img/icon_CP_sound_normal.556e2f44.png)
}

.icon_display_low {
    background-image: url(../img/icon_CP_display_low_normal.51b801a5.png)
}

.icon_display_middle {
    background-image: url(../img/icon_CP_display_middel_normal.e6a6009f.png)
}

.icon_display_high {
    background-image: url(../img/icon_CP_display_high_normal.4eee762f.png)
}

.icon_display_bluray {
    background-image: url(../img/icon_CP_display_bluray_normal.99d884d2.png)
}

.icon_mouse {
    background-image: url(../img/icon_CP_MouseS_normal.1d67e1ea.png)
}

.icon_keyboard {
    background-image: url(../img/icon_CP_Keyboard_normal.198c5a41.png)
}

.icon_exit {
    background-image: url(../img/icon_CP_ExitG_normal.866bbf36.png)
}

.icon_microphone {
    background-image: url(../img/icon_microphone_on_hover.d085483b.png)
}

.icon_microphonedis {
    background-image: url(../img/icon_microphone_off.36cf05ad.png)
}

.icon_backhome {
    background-image: url(../img/icon_running_index_norm.8376125c.png)
}

.icon_cloudmenu {
    background-image: url(../img/icon_running_tool_norm.0c3e0a55.png)
}

.icon_options {
    background-image: url(../img/mobileicon_CP_setting_normal.724358e0.png)
}

.icon_repair {
    background-image: url(../img/mobileicon_CP_repair_normal.a308daca.png)
}

.icon_hang {
    background-image: url(../img/icon_menu_afk_normal.44cb5c29.png)
}

.icon_playtogether {
    background-image: url(../img/icon_CP_playtogether_normal_54@2x.49194ee0.png)
}

.icon_gamepad {
    background-image: url(../img/icon_CP_controllerinstruction_normal.0b0421a1.png)
}

.icon_guide {
    background-image: url(../img/icon_CP_simujoystick_normal.565924de.png)
}

.icon_menu_check {
    background-image: url(../img/tvicon_CP_toggle_off.98efbe2b.png)
}

.icon_menu_gamekeyboard {
    background-image: url(../img/mobileicon_CP_game_normal_54@2x.36e9abd8.png)
}

.icon_menu_mouse {
    background-image: url(../img/mobileicon_CP_mouse_normal_54@2x.b0945756.png)
}

.icon_menu_keyboard {
    background-image: url(../img/mobileicon_CP_keyboardsetting_normal_54@2x.6b931696.png)
}

.icon_menu_pip {
    background-image: url(../img/mobileicon_CP_smallwindow_normal_54@2x.dc131934.png)
}

.controlpanel-con div:hover .icon-fullwindowed {
    background-image: url(../img/icon_CP_full\ screen_hovered.aff99a3e.png)
}

.controlpanel-con div:hover .icon-windowed {
    background-image: url(../img/icon_CP_windowed_hovered.629845d9.png)
}

.controlpanel-con div:hover .icon_sound0 {
    background-image: url(../img/icon_CP_sound0_hovered.a1fc1640.png)
}

.controlpanel-con div:hover .icon_sound50 {
    background-image: url(../img/icon_CP_sound50_hovered.3410f710.png)
}

.controlpanel-con div:hover .icon_sound100 {
    background-image: url(../img/icon_CP_sound_hovered.4ad19080.png)
}

.controlpanel-con div:hover .icon_display_low {
    background-image: url(../img/icon_CP_display_low_hovered.1885b7a0.png)
}

.controlpanel-con div:hover .icon_display_middle {
    background-image: url(../img/icon_CP_display_middle_hovered.f57da455.png)
}

.controlpanel-con div:hover .icon_display_high {
    background-image: url(../img/icon_CP_display_high_hovered.57b41f6d.png)
}

.controlpanel-con div:hover .icon_display_bluray {
    background-image: url(../img/icon_CP_display_bluray_hovered.df939c0e.png)
}

.controlpanel-con div:hover .icon_mouse {
    background-image: url(../img/icon_CP_MouseS_hovered.618f1198.png)
}

.controlpanel-con div:hover .icon_keyboard {
    background-image: url(../img/icon_CP_Keyboard_hovered.2ae5c569.png)
}

.controlpanel-con div:hover .icon_exit {
    background-image: url(../img/icon_CP_ExitG_hovered.bd6e244e.png)
}

.controlpanel-con div:hover .icon_backhome {
    background-image: url(../img/icon_running_index_hover.195ea119.png)
}

.controlpanel-con div:hover .icon_cloudmenu {
    background-image: url(../img/icon_running_tool_hover.6146dd6f.png)
}

.controlpanel-con div:hover .icon_microphone {
    background-image: url(../img/icon_microphone_on.864aa7d8.png)
}

.controlpanel-con div:hover .icon_microphonedis {
    background-image: url(../img/icon_microphone_off_hover.1e1765b7.png)
}

.controlpanel-con div:hover .icon_hang {
    background-image: url(../img/icon_menu_afk_pressed.5a61d7b7.png)
}

.controlpanel-con div:hover .icon_repair {
    background-image: url(../img/mobileicon_CP_repair_selected.7f2e1b10.png)
}

.controlpanel-con div:hover .icon_gamewelfare {
    background-image: url(../img/mobileicon_CP_event_hover@2x.11ae78dd.png)
}

.controlpanel-con div:hover .icon_download {
    background-image: url(../img/icon_download_shortcut_hover.ab8924c5.png)
}

.mobilemenu-list>li.in .icon_display_low,.mobilemenu-list>li.on .icon_display_low {
    background-image: url(../img/tvicon_CP_videoQ_SD_focused.65eceb2d.png)
}

.mobilemenu-list>li.in .icon_display_middle,.mobilemenu-list>li.on .icon_display_middle {
    background-image: url(../img/tvicon_CP_videoQ_HD_focused.7bd5f938.png)
}

.mobilemenu-list>li.in .icon_display_high,.mobilemenu-list>li.on .icon_display_high {
    background-image: url(../img/tvicon_CP_videoQ_UD_focused.f0bb07b7.png)
}

.mobilemenu-list>li.in .icon_display_bluray,.mobilemenu-list>li.on .icon_display_bluray {
    background-image: url(../img/tvicon_CP_videoQ_BD_focused.18f8e0b3.png)
}

.mobilemenu-list>li.in .icon_exit,.mobilemenu-list>li.on .icon_exit {
    background-image: url(../img/tvicon_CP_ExitG_focused.92685de1.png)
}

.mobilemenu-list>li.in .icon_options,.mobilemenu-list>li.on .icon_options {
    background-image: url(../img/tvicon_CP_settings_focused.a78f0868.png)
}

.mobilemenu-list>li.in .icon_hang,.mobilemenu-list>li.on .icon_hang {
    background-image: url(../img/icon_menu_afk_s_white.a478d4df.png)
}

.mobilemenu-list>li.in .icon_playtogether,.mobilemenu-list>li.on .icon_playtogether {
    background-image: url(../img/icon_CP_playtogether_normal_54@2x.49194ee0.png)
}

.mobilemenu-list>li.in .icon_gamepad,.mobilemenu-list>li.on .icon_gamepad {
    background-image: url(../img/icon_CP_controllerinstruction_focused.48855497.png)
}

.mobilemenu-list>li.in .icon_guide,.mobilemenu-list>li.on .icon_guide {
    background-image: url(../img/icon_CP_simujoystick_focused.20960661.png)
}

.mobilemenu-list>li.in .icon_cloudmenu,.mobilemenu-list>li.on .icon_cloudmenu {
    background-image: url(../img/icon_running_tool_hover.6146dd6f.png)
}

.mobilemenu-list>li.in .icon_menu_gamekeyboard,.mobilemenu-list>li.on .icon_menu_gamekeyboard {
    background-image: url(../img/mobileicon_CP_game_selected_54@2x.e0d65caf.png)
}

.mobilemenu-list>li.in .icon_menu_mouse,.mobilemenu-list>li.on .icon_menu_mouse {
    background-image: url(../img/mobileicon_CP_mouse_selected_54@2x.4167d8d9.png)
}

.mobilemenu-list>li.in .icon_menu_keyboard,.mobilemenu-list>li.on .icon_menu_keyboard {
    background-image: url(../img/mobileicon_CP_keyboardsetting_selected_54@2x.d2372ccd.png)
}

.mobilemenu-list>li.in .icon_menu_pip,.mobilemenu-list>li.on .icon_menu_pip {
    background-image: url(../img/mobileicon_CP_smallwindow_selected_54@2x.860e2048.png)
}

.mobilemenu-list>li.in .icon_gamewelfare,.mobilemenu-list>li.on .icon_gamewelfare {
    background-image: url(../img/mobileicon_CP_event_hover@2x.11ae78dd.png)
}

.mobilemenu-list2 li.in .icon_menu_check {
    background-image: url(../img/tvicon_CP_toggle_off_focused.a32a9356.png)
}

.mobilemenu-list2 li.on .icon_menu_check {
    background-image: url(../img/tvicon_CP_toggle_on.4b2b2943.png)
}

.mobilemenu-list2 li.on .icon-check2 {
    visibility: inherit
}

.mobilemenu-list2 li.on.in .icon_menu_check {
    background-image: url(../img/tvicon_CP_toggle_on_focused.a310a5f4.png)
}

.mobilemenu-list2 li.on.in .icon-check2 {
    background-image: url(../img/tvicon_CP_checked_focused.c90abbb8.png)
}

.InMobile .mobilemenu-list>li.in .icon_display_low,.InMobile .mobilemenu-list>li.on .icon_display_low {
    background-image: url(../img/icon_CP_display_low_hovered.1885b7a0.png)
}

.InMobile .mobilemenu-list>li.in .icon_display_middle,.InMobile .mobilemenu-list>li.on .icon_display_middle {
    background-image: url(../img/icon_CP_display_middle_hovered.f57da455.png)
}

.InMobile .mobilemenu-list>li.in .icon_display_high,.InMobile .mobilemenu-list>li.on .icon_display_high {
    background-image: url(../img/icon_CP_display_high_hovered.57b41f6d.png)
}

.InMobile .mobilemenu-list>li.in .icon_display_bluray,.InMobile .mobilemenu-list>li.on .icon_display_bluray {
    background-image: url(../img/icon_CP_display_bluray_hovered.df939c0e.png)
}

.InMobile .mobilemenu-list>li.in .icon_exit,.InMobile .mobilemenu-list>li.on .icon_exit {
    background-image: url(../img/icon_CP_ExitG_hovered.bd6e244e.png)
}

.InMobile .mobilemenu-list>li.in .icon_options,.InMobile .mobilemenu-list>li.on .icon_options {
    background-image: url(../img/mobileicon_CP_setting_selected.df25ca48.png)
}

.InMobile .mobilemenu-list>li.in .icon_hang,.InMobile .mobilemenu-list>li.on .icon_hang {
    background-image: url(../img/icon_menu_afk_pressed.5a61d7b7.png)
}

.InMobile .mobilemenu-list>li.in .icon_playtogether,.InMobile .mobilemenu-list>li.on .icon_playtogether {
    background-image: url(../img/icon_CP_playtogether_selected_54@2x.d2229204.png)
}

.icon-pf-android {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_GD_android.8e1ddde6.png)
}

.icon-pf-mac {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_GD_mac.2d5b9176.png)
}

.icon-pf-pc {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_GD_pc.f1e9a5b0.png)
}

.icon-pf-ps4 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_GD_ps4.a04cba3e.png)
}

.icon-pf-xbox {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_GD_xbox.da701ddb.png)
}

.icon-ct-keyboard {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_GD_keyboard.bd83e5cf.png)
}

.icon-ct-mouse {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_GD_mouse.b6770152.png)
}

.icon-ct-controller {
    width: 20px;
    height: 32px;
    background-image: url(../img/icon_GD_controller.ee2fa3ff.png)
}

.icon-silder-next,.icon-silder-pre {
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-image: url(../img/icon_GD_arrow_left_norm.aa475c50.png)
}

.icon-silder-next:hover,.icon-silder-pre:hover {
    background-image: url(../img/icon_GD_arrow_left_hovered.8c7cd0d4.png)
}

.icon-silder-next.disable,.icon-silder-pre.disable {
    cursor: default;
    background-image: url(../img/icon_GD_arrow_left_disabled.189f1b9b.png)!important
}

.icon-silder-next {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.icon-start {
    width: 72px;
    height: 32px;
    margin: 0 4px;
    background-image: url(../img/tvicon_ingame_start.1d1de228.png)
}

.icon-hourglass {
    width: 54px;
    height: 48px;
    background-image: url(../img/icon_ingame_hourglass.a2571ed2.png)
}

.icon-paycheck {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_VIP_unselected.9a394abf.png)
}

.icon-paycheck2 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_payment_unselected.be35c0e9.png)
}

.on .icon-paycheck,.on .icon-paycheck2 {
    background-image: url(../img/icon_payment_selected.c648e162.png)
}

.icon-alipay {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_payment_alipay.16737971.png)
}

.icon-wechat {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_payment_WeChat.b2c1172b.png)
}

.icon-paypal {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_payment_paypal.png);
    border-radius: 5px;
}

.icon-number-pay {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_payment_number.png);
    border-radius: 5px;
}

.icon-qq2 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_qq.8d0bd130.png)
}

.icon-comingsoon {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_VIP_ComingSoon.7931c50b.png)
}

.icon-faster {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_VIP_faster.93580fb8.png)
}

.icon-functionplus {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_VIP_functionPlus.a2a4225b.png)
}

.icon-timeless {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_VIP_timeless.48a20af8.png)
}

.icon-mobilevip {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_VIP_CloudPhone.46982daf.png)
}

.icon-vipclose {
    width: 30px;
    height: 30px;
    background-image: url(../img/icon_payment_close.8f82b909.png)
}

.icon-esc,.icon-menukey-esc {
    width: 30px;
    height: 28px;
    background-image: url(../img/img_toast_esc.c2d52703.png)
}

.icon-menukey-tab {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_tab.18c0d19a.png)
}

.icon-menukey-ctrl {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_ctrl.be78e43f.png)
}

.icon-menukey-alt {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_alt.213b34b5.png)
}

.icon-menukey-f1 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F1.666a053e.png)
}

.icon-menukey-f2 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F2.16146b8d.png)
}

.icon-menukey-f3 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F3.b3a5974d.png)
}

.icon-menukey-f4 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F4.3576b8d2.png)
}

.icon-menukey-f5 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F5.ac1ee7c9.png)
}

.icon-menukey-f6 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F6.b66f9ef5.png)
}

.icon-menukey-f7 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F7.a9ee3ccb.png)
}

.icon-menukey-f8 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F8.12e0b8a8.png)
}

.icon-menukey-f9 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F9.5c64bab5.png)
}

.icon-menukey-f10 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F10.e5946e3c.png)
}

.icon-menukey-f11 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F11.1f43f255.png)
}

.icon-menukey-f12 {
    width: 30px;
    height: 28px;
    background-image: url(../img/icon_ingame_F12.d21c6b0b.png)
}

.icon-nav-game {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_INDEX_tab_games_unselected.a4e4dd20.png)
}

a.active>.icon-nav-game {
    background-image: url(../img/icon_INDEX_tab_games_selected.86c701fd.png)
}

.icon-nav-checkin {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_INDEX_tab_gift_unselected.1f118e84.png)
}

a.active>.icon-nav-checkin {
    background-image: url(../img/icon_INDEX_tab_gift_selected.08c31af9.png)
}

.icon-nav-playtogether {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_INDEX_tab_playtogether_unselected.48bec9b3.png)
}

a.active>.icon-nav-playtogether {
    background-image: url(../img/icon_INDEX_tab_playtogether_selected.0457690c.png)
}

.icon-nav-center {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_INDEX_tab_user_unselected.dbe58dd7.png)
}

a.active>.icon-nav-center {
    background-image: url(../img/icon_INDEX_tab_user_selected.02629146.png)
}

.icon-me-feature-1 {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_ME_feature_1.7f4870d6.png)
}

.icon-me-feature-2 {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_ME_feature_2.8b64a0fe.png)
}

.icon-me-feature-3 {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_ME_feature_3.a52be7e2.png)
}

.icon-me-feature-4 {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_ME_feature_4.82b0d2fe.png)
}

.icon-me-feature-3-big {
    width: 48px;
    height: 48px;
    background-image: url(../img/icon_ME_feature3_big.28f9cd8c.png)
}

.icon-me-arrow {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_arrow.9071f731.png)
}

.icon-me-exitgame {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_ME_exitgame.b9c23065.png)
}

.icon-me-qq {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #35404c;
    background-image: url(../img/icon_ME_qq.02ef302a.png);
    background-size: 60%
}

.user-qq .icon-me-qq {
    background-color: #8b969f;
    background-image: url(../img/icon_ME_qq_grey.1c7bf4fa.png)
}

.icon-me-order {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_ME_order_detail.063a1340.png)
}

.icon-history-viptag {
    width: 48px;
    height: 48px;
    background-image: url(../img/icon_History_viptag.ff4bde9b.png)
}

.icon-back3 {
    width: 12px;
    height: 20px;
    background-image: url(../img/icon_CP_back_hovered.d7c79238.png)
}

.icon-editfeedback {
    width: 22px;
    height: 22px;
    background-image: url(../img/icon_me_edit.430d9fa5.png)
}

.icon-edittime {
    width: 15px;
    height: 15px;
    background-image: url(../img/icon_ME_date.7946df21.png)
}

.icon-question {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_ME_questions_grey.9de2590b.png)
}

.icon-share {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_ME_share_grey.644b837d.png)
}

.icon-setting {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_ME_setting_grey.5b9489b7.png)
}

.icon-gift {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_ME_gift.e93e8ad2.png)
}

.icon-gift-gold {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_event_gift.b5473aaa.png)
}

.icon-bubble-gold {
    width: 14px;
    height: 12px;
    background-image: url(../img/icon_bubble_gold.66fca60a.png)
}

.icon-me-arrow-gold {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_me_arrow_gold.82e51aaa.png)
}

.icon-notice {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_notice.8074d0e3.png)
}

.icon-tagmenu {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_INDEX_more.7aad9212.png)
}

.icon-download-mobile {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_phone.c0b01356.png)
}

.icon-download-tv {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_tv.5077ceb2.png)
}

.icon-download-pc {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_pc.235c7bf5.png)
}

.icon-vip2 {
    width: 20px;
    height: 20px;
    background-image: url(../img/button_icon_vip_normal.a3acece8.png)
}

.icon-vip-pc {
    width: 20px;
    height: 20px;
    background-image: url(../img/button_icon_vip_pc_normal.102b2cc8.png)
}

.icon-liningup {
    width: 176px;
    height: 120px;
    background-image: url(../img/pic_liningup.18277571.png)
}

.icon-vip3 {
    background-image: url(../img/pic_vip.b6e94899.png)
}

.icon-error,.icon-vip3 {
    width: 176px;
    height: 120px
}

.icon-error {
    background-image: url(../img/img_error.594d719e.png)
}

.icon-alert {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    background-image: url(../img/icon_alert.fe150aa0.png)
}

.icon-timer {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_VIP_time_normal.f6b3937e.png)
}

.icon-viper {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_VIP_vipTag_normal.8eb7de28.png)
}

.controlpanel-time:hover .icon-timer {
    background-image: url(../img/icon_VIP_time_hovered.571ce294.png)
}

.controlpanel-time:hover .icon-viper {
    background-image: url(../img/icon_VIP_vipTag_hovered.5d83ce49.png)
}

.controlpanel-time:hover .icon-cloud {
    background-image: url(../img/icon_YunB_whiteBg.fd6e0591.png)
}

.icon-vip-tag {
    width: 25px;
    height: 25px;
    background-image: url(../img/icon_VIP_vipTag.1322b051.png)
}

.icon-vip-tag-disabled {
    width: 25px;
    height: 25px;
    background-image: url(../img/icon_VIP_vipTag_disable.e1f54f7f.png)
}

.icon-serach {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_INDEX_search.ec289913.png)
}

.InMobile .search-inputbox .icon-serach {
    background-image: url(../img/icon_search_grey.ef3c3075.png)
}

.icon-cancel {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_INDEX_search_delete03_normal.29e2b47b.png);
    opacity: .5;
    cursor: pointer
}

.icon-cancel:hover {
    opacity: 1
}

.InMobile .icon-cancel:hover {
    opacity: .5
}

.icon-clear {
    background-image: url(../img/icon_INDEX_search_delete04_normal.ed3dd8ae.png)
}

.icon-clear,.icon-delete {
    width: 16px;
    height: 16px;
    cursor: pointer
}

.icon-delete {
    background-image: url(../img/btn_INDEX_search_delete_16_nor@1x.940e974a.png)
}

.icon-delete:hover {
    background-image: url(../img/btn_INDEX_search_delete_16_hover@1x.664baf15.png)
}

.icon-download {
    width: 22px;
    height: 22px;
    background-image: url(../img/icon_home_download.10be150f.png)
}

.icon-download-success {
    width: 168px;
    height: 97px;
    background-image: url(../img/img_download_success.10d3ec4d.png)
}

.icon-download-logo {
    width: 144px;
    height: 40px;
    background-image: url(../img/img_download_logo.9d7ea2e4.png)
}

.icon-login {
    width: 56px;
    height: 65px;
    background-image: url(../img/pic_login.cbcfb790.png)
}

.icon-cloud {
    width: 16px;
    height: 10px;
    overflow: hidden
}

.icon-cloud,.icon-cloud-small {
    background-image: url(../img/icon_CloudB.2d889c1a.png)
}

.icon-cloud-small {
    width: 20px;
    height: 20px
}

.icon-message {
    position: relative;
    width: 20px;
    height: 16px;
    background-image: url(../img/icon_index_message.6a2d7f2a.png)
}

.icon-vip-pcgame {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_vip_pcgame.97fbc608.png)
}

.icon-qr-back {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_membership_collapse.f7e5c601.png)
}

.icon-qr-back2 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_membership_extend.dfc36466.png)
}

.icon-logobtn {
    width: 26px;
    height: 20px;
    background-image: url(../img/icon_logoOnBtn.d9dcc4b5.png)
}

.icon-cloudpc {
    width: 144px;
    height: 88px;
    background-image: url(../img/pic_CloudComputer.fb2b5cc0.png)
}

.icon-cloudpc2 {
    width: 16px;
    height: 10px;
    overflow: hidden
}

.icon-cloudpc2,.icon-cloudpc-small {
    background-image: url(../img/icon_CloudComputer.aef796da.png)
}

.icon-cloudpc-small {
    width: 21px;
    height: 16px
}

.icon-customize {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_customize.b3a9ce4b.png)
}

.icon-question2 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_PaymentDetai.1162517d.png)
}

.icon-tag-limit {
    width: 28px;
    height: 16px;
    background-image: url(../img/tag_limit.c50374b1.png)
}

.icon-tag-vip {
    width: 49px;
    height: 22px;
    background-image: url(../img/tag_vip_l.506515b0.png)
}

.icon-warning {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_warning.dfe262e6.png)
}

.icon-warning-green {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_warn_16@3x.8f21fc68.png)
}

.icon-feedback-tips {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_ME_feedback_alert.d202e7fe.png)
}

.icon-checkin {
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url(../img/icon_checkin.15b85652.png)
}

.InMobile .icon-checkin {
    width: 20px;
    height: 20px
}

.icon-checkin-info {
    width: 21px;
    height: 21px;
    cursor: pointer;
    background-image: url(../img/icon_checkin_info.0c151d84.png)
}

.icon-hot-pc {
    width: 28px;
    height: 12px
}

.icon-hot-mobile,.icon-hot-pc {
    background-image: url(../img/tag_hot2.bde12059.png)
}

.icon-hot-mobile {
    width: 34px;
    height: 16px
}

.icon-rtag-pc {
    width: 26px;
    height: 14px;
    background-image: url(../img/rtag_pc2.d11821ec.png)
}

.icon-rtag-pc2 {
    width: 40px;
    height: 20px;
    background-image: url(../img/tag_game_PC_20h_BottomRight@2x.a0ef2a32.png)
}

.icon-rtag-cloudpc {
    width: 36px;
    height: 14px;
    background-image: url(../img/rtag_cloudpc.07458614.png)
}

.icon-rtag-cloudmobile {
    width: 36px;
    height: 14px;
    background-image: url(../img/rtag_cloudmobile.33bea972.png)
}

.icon-arrow-green-small {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_arrow_small_green.259a8110.png)
}

.icon-arrow-gold {
    width: 8px;
    height: 8px;
    background-image: url(../img/icon_arrow_right_brown_8.b5812a62.png)
}

.icon-addfriend {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_search_for_friends.bef45a43.png)
}

.icon-edit {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_playtogether_edit_20_2.4007107f.png);
    background-size: auto 100%;
    background-position: 0 0
}

.icon-edit:hover {
    background-position: 100% 0
}

.icon-female {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_ME_female.eecfdfc1.png)
}

.icon-male {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_ME_male.d9cd6bc8.png)
}

.icon-update {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_switch.d1af5264.png)
}

.icon-edit-photo {
    width: 28px;
    height: 28px;
    background-image: url(../img/icon_ME_edit_photo.f8d2efef.png)
}

.icon-zoom-in {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_avatar_zoomin.8ed7b85a.png)
}

.icon-zoom-out {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_avatar_zoomout.47fd4124.png)
}

.icon-live-view {
    width: 12px;
    height: 8px;
    background-image: url(../img/icon_playtogether_view.a82b1e2f.png)
}

.icon-live-notready {
    width: 138px;
    height: 88px;
    background-image: url(../img/pic_live_notready.45fee011.png)
}

.icon-live-empty {
    width: 138px;
    height: 88px;
    background-image: url(../img/pic_live_empty.5feee924.png)
}

.icon-live-people {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_live_people.e4d62ecc.png)
}

.icon-live-people-10 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_live_people_10.bc626888.png)
}

.icon-search-playtogether {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_search_grey.ef3c3075.png)
}

.icon-create-room-close {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_payment_close.8f82b909.png)
}

.icon-create-room-selected {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_create_room_selected.c2ee0584.png)
}

.icon-game-selected {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_confirm_14@2x.03f0731e.png)
}

.icon-live-menu-arrow {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_CP_arrow_right_grey_32@2x.02320dc9.png)
}

.icon-keyboard {
    width: 40px;
    height: 40px;
    background-image: url(../img/icon_keyboard\ shortcut.117f5cdd.png)
}

.icon_m_mouse_middle {
    width: 12px;
    height: 18px;
    background-image: url(../img/icon_keyselect_roller.c1f97f6d.png)
}

.icon_m_scroll_down {
    width: 12px;
    height: 18px;
    background-image: url(../img/icon_keyselect_rollerdown.7277940f.png)
}

.icon_m_scroll_up {
    width: 12px;
    height: 18px;
    background-image: url(../img/icon_keyselect_rollerup.784e9150.png)
}

.icon_m_mouse_right {
    width: 12px;
    height: 18px;
    background-image: url(../img/icon_keyselect_rightclick.d5153ee5.png)
}

.icon_m_mouse_left {
    width: 12px;
    height: 18px;
    background-image: url(../img/icon_keyselect_leftclick.ca45d8bb.png)
}

.icon_m_ball {
    width: 30px;
    height: 30px;
    background-size: 100%;
    background-image: url(../img/gaming_icon_sj_wheel_normal.1869c50c.png)
}

.icon_close2 {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_CP_exit_grey_40@2x.b921f5ea.png)
}

.icon-edit-team {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_playtogether_edit_20@2x.e9bb7b66.png)
}

.icon-team-screen {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_playtogether_screen_unselected_20@2x.20712357.png)
}

.g-Btn.on>.icon-team-screen {
    background-image: url(../img/icon_playtogether_screen_selected_20@2x.4d6da7dc.png)
}

.icon-live-team {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_live_team@2x.0bf74b05.png)
}

.icon-talk-message {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_message.f71ca225.png)
}

.icon-arrow-down-green {
    width: 10px;
    height: 10px;
    background-image: url(../img/icon_arrow_down_green.d0f129ae.png)
}

.icon-checkbox-selected {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_checkbox_24_selected.bb5b2bcf.png)
}

.icon-play-time {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_play_time.5da5eca5.png)
}

.icon-team-edit {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_team_edit_16.63ed5f55.png)
}

.icon_checkbox {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_checkbox_24_selected\ copy.e62c2bdc.png)
}

.active>.icon_checkbox,.icon_checkbox.selected {
    background-image: url(../img/icon_checkbox_24_selected.bb5b2bcf.png)
}

.icon-arrow-green {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_arrow_green.9fd68d23.png)
}

.icon-info-more-green {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_info_more_white_24.19629b6b.png)
}

.active>.icon-info-more-green {
    background-image: url(../img/icon_info_more_green_24.2078fb2c.png)
}

.icon_card_more_grey {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_card_more_grey_24@3x.cdc389b5.png)
}

.icon_live_arrow_down {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_live_arrow_down.cfef75fb.png)
}

.icon_growth_card_arrow {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_growth_card_arrow.10241df0.png)
}

.icon_growth {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_ME_growth.faf673c4.png)
}

.icon_growth_big {
    width: 40px;
    height: 40px;
    background-image: url(../img/icon_ME_growth_40.eb6dece0.png)
}

.icon_lock_1,.icon_lock_4 {
    width: 8px;
    height: 8px;
    background-image: url(../img/icon_lock_lv0-5.263f25ea.png)
}

.icon_lock_6 {
    width: 8px;
    height: 8px;
    background-image: url(../img/icon_lock_lv6.72958d82.png)
}

.icon_lock_7 {
    width: 8px;
    height: 8px;
    background-image: url(../img/icon_lock_lv7.54990e81.png)
}

.icon_lock_8 {
    width: 8px;
    height: 8px;
    background-image: url(../img/icon_lock_lv8.9e1106b8.png)
}

.icon_lock_9 {
    width: 8px;
    height: 8px;
    background-image: url(../img/icon_lock_lv9.96b82dc8.png)
}

.icon_lock_10 {
    width: 8px;
    height: 8px;
    background-image: url(../img/icon_lock_lv10.0526c615.png)
}

.icon_charge_secretary {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_charge_secretary.892011ce.png)
}

.icon_charge_8discount {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_charge_8discount.541e2111.png)
}

.icon_charge_avatar {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_charge_avatar.441e3897.png)
}

.icon_charge_businesscars {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_charge_businesscars.04463dc4.png)
}

.icon_charge_entergold {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_charge_entergold.43bfae96.png)
}

.icon_charge_live {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_charge_live.075f1335.png)
}

.icon_charge_logo {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_charge_logo.48904625.png)
}

.icon_ME_certify {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_ME_certify_14.24b4071e.png)
}

.icon_small_vip {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_ME_VIP_s.243261b7.png)
}

.icon_grade_lv1 {
    width: 32px;
    height: 16px;
    background-image: url(../img/icon_ME_medal_V1.d68bb8e0.png)
}

.icon_grade_lv2 {
    width: 35px;
    height: 16px;
    background-image: url(../img/icon_ME_medal_V2.c60bba65.png)
}

.icon_grade_lv3 {
    width: 35px;
    height: 16px;
    background-image: url(../img/icon_ME_medal_V3.5f88091f.png)
}

.icon_grade_lv4 {
    width: 35px;
    height: 16px;
    background-image: url(../img/icon_ME_medal_V4.b4085b75.png)
}

.icon_grade_lv5 {
    width: 51px;
    height: 22px;
    background-image: url(../img/icon_ME_medal_V5.704b3fd2.png)
}

.icon_grade_lv6 {
    width: 51px;
    height: 22px;
    background-image: url(../img/icon_ME_medal_V6.e0b55be2.png)
}

.icon_grade_lv7 {
    width: 51px;
    height: 22px;
    background-image: url(../img/icon_ME_medal_V7.9f1388e1.png)
}

.icon_grade_lv8 {
    width: 51px;
    height: 22px;
    background-image: url(../img/icon_ME_medal_V8.f72a87c2.png)
}

.icon_grade_lv9 {
    width: 51px;
    height: 22px;
    background-image: url(../img/icon_ME_medal_V9.0c1fa971.png)
}

.icon_grade_lv10 {
    width: 54px;
    height: 22px;
    background-image: url(../img/icon_ME_medal_V10.4605aef4.png)
}

.icon_small_lv5 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_Lv.5.9b66dfd3.png)
}

.icon_small_lv6 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_Lv.6.79d816e9.png)
}

.icon_small_lv7 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_Lv.7.a357a549.png)
}

.icon_small_lv8 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_Lv.8.e20e6147.png)
}

.icon_small_lv9 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_Lv.9.e45c2546.png)
}

.icon_small_lv10 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_Lv.10.8a30c9ae.png)
}

.icon_gift {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_gift_close.92d90d22.png)
}

.icon_menu_edit {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_menu_keysetting.582a871c.png)
}

.on .icon_menu_edit {
    background-image: url(../img/icon_menu_keysetting_selected.5f0f6180.png)
}

.icon_redbag {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_room_redbag_24.7f66a8bc.png)
}

.icon_menu_edit2 {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_CP_edit_grey_40@2x.3052b7fd.png)
}

.icon-playtogether-notice {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_playtogether_notice_24.216ffb3c.png)
}

.icon-playtogether-search {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_playtogether_search.png)
}

.icon-playtogether-create-room {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_playtogether_create_group_chat_24.bd55e012.png)
}

.icon-arrow-black {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_arrow_black_12.d6e8e70d.png)
}

.icon-arrow-white {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_arrow_white_12.449f884f.png)
}

.icon-playtogether-switch {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_playtogether_switch_white_16.ff2a5f1c.png)
}

.icon-add-tag-grey {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_add_tag_grey.5ad6f4f0.png)
}

.icon-tag-selected-white {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_tag_selected_white.121ac95b.png)
}

.icon-broadcast-switchbg {
    width: 34px;
    height: 34px;
    background-image: url(../img/icon_broadcast_switchbg_34.090b28b5.png)
}

.icon_menu_edit3 {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_CP_reedit_grey_40@2x.656ac624.png)
}

.icon_menu_del {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_CP_delete_grey_40@2x.8e20d813.png)
}

.icon_coupon {
    width: 22px;
    height: 30px;
    background-image: url(../img/pic_coupon.144bf6d8.png)
}

.icon_coupon2 {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_coupon_18@2x.5c23befb.png)
}

.icon_arrow_right_white {
    width: 7px;
    height: 12px;
    background-image: url(../img/icon_arrow_right_white.5368818c.png)
}

.icon_arrow_white_right {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_arrow_50white_1_right.f774d962.png)
}

.icon_calendar_next_month {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_calendar_next_month_24_grey.b4465f19.png)
}

.icon_calendar_next_month.active {
    background-image: url(../img/icon_calendar_next_month_24_green.4c4705eb.png)
}

.icon_calendar_next_year {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_calendar_next_year_24_grey.cbf2857d.png)
}

.icon_calendar_next_year.active {
    background-image: url(../img/icon_calendar_next_year_24_green.5bd392b5.png)
}

.icon_arrow_dark_right_small {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_arrow_dark_12_right.9fb3bfb6.png)
}

.icon_arrow_white_right_small {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_arrow_white_12_right.90e6eea0.png)
}

.icon_questions_white {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_questions_white_12.aa153aa1.png)
}

.icon_control {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_control.2ca2d0f3.png)
}

.icon_play_ads {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_play_ads.244cff19.png)
}

.icon_add {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_add.96ab7518.png)
}

.icon_close_white {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_close_white_12.6b6ab5a9.png)
}

.icon_topic_green {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_topic_green_20.da89ece5.png)
}

.icon_topic_grey {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_topic_grey_20.e7a306a0.png)
}

.icon_topic_white {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_topic_white_20.67e9d324.png)
}

.icon_arrow_green {
    width: 10px;
    height: 10px;
    background-image: url(../img/icon_arrow_green_10.0a24bc28.png)
}

.icon_close_green {
    width: 10px;
    height: 10px;
    background-image: url(../img/icon_close_green_10.da63d908.png)
}

.icon_select_toggle {
    width: 14px;
    height: 14px;
    background-image: url(../img/mobileicon_CP_toggle_off.4ca61b72.png)
}

.active>.icon_select_toggle {
    background-image: url(../img/mobileicon_CP_toggle_on.01926a74.png)
}

.icon_starcoin {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_starcoin_14.1819a3ed.png)
}

.icon_arrow_white_10 {
    width: 10px;
    height: 10px;
    background-image: url(../img/icon_arrow_white_10.df86c446.png)
}

.icon_arrow_green_10 {
    width: 10px;
    height: 10px;
    background-image: url(../img/icon_arrow_green_10.0a24bc28.png)
}

.icon_tablaturetools {
    background-image: url(../img/mobileicon_CP_tablaturetools3_normal.e6fd755c.png)
}

.icon_musicscore_like {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_musicscore_like_normal@2x.2c1c8bb0.png)
}

.icon_musicscore_like.active {
    background-image: url(../img/icon_musicscore_like_press@2x.b940406a.png)
}

.icon_musicscore_share {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_musiccore_share_normal@2x.48194e96.png)
}

.icon_musicscore_edit {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_musiccore_edit_normal@2x.b7b2dad2.png)
}

.icon_musicscore_delete {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_musiccore_delete_normal@2x.e7de7e11.png)
}

.icon_plus_nor {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_plus_20_nor@2x.3f6932b9.png)
}

.icon_minus_nor {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_minus_20_nor@2x.b3a7260c.png)
}

.icon_sound_on {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_sound_on_norm@2x.3330ec17.png)
}

.icon_sound_off {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_sound_off_norm@2x.231e66e2.png)
}

.icon_plus_20_nor {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_plus_20_nor@2x.3f6932b9.png)
}

.icon_edit_comment_unselected {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_edit_comment_unselected@2x.90ba25f6.png)
}

.icon_edit_like_unselected {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_edit_like_unselected@2x.e0fb6391.png)
}

.icon_edit_like_unselected.active {
    background-image: url(../img/icon_edit_like_selected@2x.f8d551a5.png)
}

.icon_edit_like_selected {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_edit_like_selected@2x.f8d551a5.png)
}

.icon_share_white {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_share_white_24@2x.6ebc5eed.png)
}

.icon_message_comment {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_message_comment_24@2x.2ca79636.png)
}

.icon_message_like {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_message_like_24@2x.c39f6432.png)
}

.icon_message_official {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_message_official_24@2x.4e393817.png)
}

.icon_common_close {
    width: 24px;
    height: 24px;
    background-image: url(../img/btn_common_close_white_24_normal@2x.69930894.png)
}

.icon_pic_failtoload_20_grey {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_pic_FailToLoad_20_grey@2x.29771e39.png)
}

.icon_topic_grey_20 {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_topic_grey_20@2x.4fe56f44.png)
}

.icon_BRD_add_grey_20 {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_BRD_add_grey_20@2x.4bc5a0a0.png)
}

.btn_view_pic {
    width: 55px;
    height: 16px;
    background-image: url(../img/btn_view_pic@2x.47822843.png)
}

.icon_replyto {
    width: 9px;
    height: 9px;
    background-image: url(../img/icon_replyto@2x.9fab4138.png)
}

.icon_live_notice_close {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_live_notice_close@2x.0eea608f.png)
}

.icon_arrow_right_grey {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_arrow_right_grey@2x.f55d10fa.png)
}

.icon_arrow_right_pink {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_arrow_right_pink@2x.15946bd5.png)
}

.icon_close_14 {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_close_14@2x.2328304a.png)
}

.icon_payment_close_2x {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_payment_close@2x.6f58189b.png)
}

.icon_live_pic_white {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_live_pic_white@2x.439331e2.png)
}

.icon_topic_white_20_2x {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_topic_white_20@2x.6d805d67.png)
}

.icon_back_topnav {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_back_white_24@2x.e29335ef.png)
}

.icon_message_arrow {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_message_arrow@2x.4c38d593.png)
}

.icon_plus_grey_20 {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_plus_grey_20@2x.8e8cf0a5.png)
}

.icon_ahphs {
    width: 26px;
    height: 26px;
    background-image: url(../img/icon_VIP_DiabloTag_26@2x.e29a34fa.png)
}

.icon_search_white {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_search_white@2x.ca9a9fe9.png)
}

.icon_search_white2 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_search_white.a02e33bc.png)
}

.icon_search_delete {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_search_delete@2x.2d2c3753.png)
}

.icon_checkin {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_exchange_finish_20@2x.5993c893.png)
}

.icon_swipe_left {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_swipe_left_20@2x.959b42e1.png)
}

.icon_map_gray {
    width: 54px;
    height: 54px;
    background-image: url(../img/mobileicon_CP_maptool_normal_54@2x.2ce78727.png)
}

.icon_map_drag {
    width: 24px;
    height: 24px;
    background-image: url(../img/btn_bigmap_move_24_nor@3x.ae9020a9.png)
}

.icon_checkbox_checked_norm {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_checkbox_checked_norm@2x.0dac2a73.png)
}

.icon_checkbox_unchecked_norm {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_checkbox_unchecked_norm@2x.02d5da0a.png)
}

.icon_createroom {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_playtogether_create_white_24_normal@2x.0bae3742.png)
}

.icon_questions {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_questions_white_14@3x.0fbc2767.png)
}

.icon_popup_button_arrow {
    width: 18px;
    height: 18px;
    background-image: url(../img/popup_button_arrow@2x.f13aba6c.png)
}

.icon_arrow_right_white2 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_arrow_right_white@2x.a2a69b9e.png)
}

.icon_map_drag_v2 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_bigmap_zoom_12_nor@2x.44b7cf7c.png)
}

.icon_map_drag_v2.active {
    background-image: url(../img/icon_bigmap_zoom_12_hover@2x.c6127f4e.png)
}

.icon_ad {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    background-image: url(../img/button_icon_AD_20_nor.943d043e.png)
}

.icon_medal_time {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_medal_time_24@2x.d9010af5.png)
}

.icon_ME_arrow_small {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_arrow_small@2x.d44213be.png)
}

.icon_ME_close_blue_16 {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_close_blue_16@3x.a2cec799.png)
}

.icon_ME_close_yellow_16 {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_close_yellow_16@3x.99acf000.png)
}

.icon_ME_arrow_right_16_grey {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_ME_arrow_right_16_grey@2x.da75047c.png)
}

.icon_me_arrow_right_16 {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_me_arrow_right_16@3x.d55e66ae.png)
}

.icon_notice_white {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_notice_12_nor@3x.9b9252dc.png)
}

.icon_button_progress {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_button_progress@2x.f3901354.png)
}

.icon_button_desktop {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_button_desktop@2x.7824b82c.png)
}

.icon_button_back {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_button_back@2x.5f6b8cad.png)
}

.icon_btn_common_enter_white {
    width: 12px;
    height: 12px;
    background-image: url(../img/btn_common_enter_white_12@2x.274c4edc.png)
}

.icon_help {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_questions_16_grey.dc1ec9f1.png)
}

.icon_questions_16_yellow {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_questions_16_yellow.03ceb50a.png)
}

.icon_help_close {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_pop_close_24.27665e93.png)
}

.icon-loading {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_loading_32.02e53354.png)
}

.icon-hot-arrow {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_arrow_right_grey.2aefb721.png)
}

.icon-hyperlink-green {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_hyperlink_20_green.ef631449.png)
}

.icon-hyperlink-grey {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_hyperlink_20_grey.8287c942.png)
}

.icon-freetime {
    width: 42px;
    height: 14px;
    background-image: url(../img/tag_free_14h.25598163.png)
}

.icon-experience-vip-1 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_experience-vip_32_01.653f2cb7.png)
}

.icon-experience-vip-2 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_experience-vip_32_02.ae8c0e23.png)
}

.icon-experience-vip-3 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_experience-vip_32_03.d0204c70.png)
}

.icon-experience-vip-4 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_experience-vip_32_04.656b6365.png)
}

.icon_medal_vip_24 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_medal_vip_24.bd96c4aa.png)
}

.icon_close_24 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_close_24.2dac8809.png)
}

.icon_notice_12_green {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_notice_12_green.5171ddf9.png)
}

.icon_notice_12_grey {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_notice_12_grey.a4f572f3.png)
}

.icon_tag_game_16 {
    width: 24px;
    height: 16px;
    background-image: url(../img/tag_game_16.4fb4f911.png)
}

.icon_tag_cloudgame_16 {
    width: 24px;
    height: 16px;
    background-image: url(../img/tag_cloudgame_16.df2e7d80.png)
}

.icon_arrow_more_10_green {
    width: 10px;
    height: 10px;
    background-image: url(../img/icon_arrow_more_10_green.077ad0d6.png)
}

.icon_arrow_fold_10_grey {
    width: 10px;
    height: 10px;
    background-image: url(../img/icon_arrow_unfold_10_grey.3c44c679.png)
}

.icon_notice_10_green {
    width: 10px;
    height: 10px;
    background-image: url(../img/icon_notice_10_green.68489160.png)
}

.icon_notice_10_grey {
    width: 10px;
    height: 10px;
    background-image: url(../img/icon_notice_10_grey.6dbcc1ea.png)
}

.icon_vip_32 {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_vip_32.5edfe5a9.png)
}

.icon_vip_pc_32 {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_vip_pc_32.ff96b13e.png)
}

.icon_vip_m_32 {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_vip_m_32.07160f20.png)
}

.icon_pc_32 {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_pc_32.1b761507.png)
}

.icon_m_32 {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_m_32.591f56f1.png)
}

.icon_gamewelfare {
    width: 32px;
    height: 32px;
    background-image: url(../img/mobileicon_CP_gift_normal_20.12e795ae.png)
}

.icon_gamewelfare_hover {
    width: 32px;
    height: 32px;
    background-image: url(../img/mobileicon_CP_event_hover@2x.11ae78dd.png)
}

.icon_download {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_download_shortcut.918f2c20.png)
}

.icon_download_hover {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_download_shortcut_hover.ab8924c5.png)
}

.icon_close_grey_36 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_close_grey_36.317aeba7.png)
}

.icon_me_arrow_green2 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_me_arrow_green2.bfbef04b.png)
}

.icon-gift-close {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_close_grey_36.317aeba7.png)
}

.icon_line_24 {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_line_24.143a4cf1.png)
}

.icon_menu_detail_grey {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_CP_menu_detail_grey_12.130993f8.png)
}

.icon_me_vip_pcgame {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_me_vip_pcgame_20.e19854dd.png)
}

.icon_tag_hot {
    width: 14px;
    height: 14px;
    background-image: url(../img/icon_tag_hot.e89d0f7a.png)
}

.icon_toast_notification {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_toast_notification_12.d51b56ef.png)
}

.icon_flash {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_flash_12.6834c3a2.png)
}

.icon_vip_room {
    width: 18px;
    height: 18px;
    background-image: url(../img/icon_vip_room.26a280ce.png)
}

.icon_roomcard {
    width: 28px;
    height: 28px;
    background-image: url(../img/icon_right_8.3ad4841a.png)
}

.icon_keyboard_hide {
    width: 60%;
    height: 60%;
    background-image: url(../img/icon_keyboard_hide@3x.bbc1ecc7.png)
}

.icon_keyboard_hidden {
    width: 60%;
    height: 60%;
    background-image: url(../img/icon_keyboard_hidden@3x.1e84fbd7.png)
}

.icon_keyboard_hide_btn {
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_keyboard_hide_48@3x.e755b1a6.png)
}

.gamehistory.none {
    min-height: 242px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    color: #8b969f
}

.gamehistory.none .icon-empty {
    margin-bottom: 30px
}

.gamehistory h2 {
    color: #8b969f;
    font-weight: 400;
    padding: 13px 0
}

.gamehistory h2:first-of-type {
    padding-top: 0
}

.gamehistory-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-bottom: 24px
}

.gamehistory-item:last-of-type {
    padding-bottom: 0
}

.gamehistory-item.not {
    padding-bottom: 32px
}

.gamehistory-item.not .gamehistory-img {
    border-color: transparent
}

.gamehistory-item.not .gamehistory-intr>h3>span {
    color: #61686f
}

.gamehistory-item.not .gamehistory-time {
    display: inline-block;
    background: rgba(0,0,0,.4);
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: 0 center;
    transform-origin: 0 center;
    border-radius: 9px;
    padding: 2px 6px;
    font-size: 12px;
    color: #fff
}

.gamehistory-item.not .gamehistory-time i {
    margin-right: 3px;
    vertical-align: -1px
}

.gamehistory-item.pc .gamehistory-img {
    position: relative;
    height: 74px;
    width: 52px;
    border-radius: 10px
}

.gamehistory-item.pc .gamehistory-img:before {
    content: "pc";
    position: absolute;
    top: 0;
    left: 0;
    width: 33px;
    height: 16px;
    line-height: 12px;
    background-size: 100% 100%;
    background-image: url(../img/tag_pc.7ccf6d86.png);
    padding-left: 7px;
    box-sizing: border-box;
    font-size: 12px;
    color: #fff
}

.gamehistory-item.pc h3 {
    margin-top: 10px
}

.gamehistory-img {
    width: 52px;
    height: 52px;
    border-radius: 24%;
    margin-right: 16px;
    border: 1px solid #03c47e
}

.gamehistory-img img {
    width: 100%;
    height: 100%;
    border-radius: 24%
}

.gamehistory-intr {
    color: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-top: -4px
}

.gamehistory-intr>h3 {
    font-weight: 400
}

.gamehistory-intr>h3>span {
    margin-left: 4px;
    color: #03c47e
}

.gamehistory-intr>h3>span .icon {
    margin-top: -6px
}

.gamehistory-coutdown {
    margin-top: 10px;
    color: #03c47e;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    -webkit-transform-origin: left;
    transform-origin: left
}

.gamehistory-btns {
    margin-top: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.gamehistory-btns .g-Btn {
    padding: 0;
    min-width: 56px;
    height: 24px;
    line-height: 22px;
    margin-right: 10px
}

.gamehistory-btns .g-Btn:last-child {
    margin-right: 0
}

.gamehistory-screen {
    position: relative
}

.gamehistory-screen .sticky-box {
    padding-right: 0!important
}

.gamehistory-screen .subnav {
    background: #28333d;
    height: 51px
}

.gamehistory-screen .subnav .subnavBox h2 {
    width: 50%;
    text-align: center;
    margin: 0
}

.gamehistory-screen .subnav .subnavBox h2.on {
    -webkit-transform: scale(1);
    transform: scale(1)
}

@media only screen and (max-width: 768px) {
    .gamehistory-btns {
        -webkit-box-pack:start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start
    }

    .gamehistory-btns .g-Btn {
        min-width: 96px;
        height: 32px;
        line-height: 30px
    }

    .gamehistory-btns .g-Btn:first-of-type {
        margin-right: 16px
    }
}

.nav-history-dialog .gamehistory-list {
    padding: 3px 20px 0;
    max-height: 350px;
    overflow: auto;
    box-sizing: border-box;
    margin-left: -20px;
    margin-right: -20px
}

.nav-history-dialog .gamehistory-more {
    line-height: 40px;
    background: #304051;
    text-align: center;
    color: #8b969f;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -24px
}

.nav-history-dialog .gamehistory-more:hover {
    color: #fff
}

.nav-history-dialog .gamehistory-more i {
    width: 10px;
    height: 12px;
    margin-left: 6px;
    margin-top: -2px
}

.nav-history-dialog .gamehistory-btns {
    margin-top: 10px
}

.nav-history-dialog .gamehistory-item-playing .gamehistory-img {
    position: relative;
    border-bottom-left-radius: 10%
}

.nav-history-dialog .gamehistory-item-playing .gamehistory-img:before {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -1px;
    z-index: 1;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
    background-image: url(../img/icon_playing.acf8538f.png)
}

.nav-history-dialog .gamehistory-item-playing .gamehistory-btns {
    margin-top: 7px
}

.nav-history-dialog .gamehistory-item-playing .gamehistory-coutdown {
    margin-top: 0
}

.nav-history-dialog h3 {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gamehistory-confirm {
    width: 600px;
    max-width: 600px!important
}

.gamehistory-confirm .cofirm-cont {
    height: 416px;
    position: relative
}

.gamehistory-confirm .gamehistory-item {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    width: 50%
}

.gamehistory-confirm .gamehistory-item h3 {
    margin-top: 2px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gamehistory-confirm .gamehistory-more-dialog {
    font-size: 0;
    margin-top: 33px;
    padding-top: 24px;
    height: 382px;
    overflow-y: auto
}

.gamehistory-confirm .gamehistory-coutdown {
    margin-top: 2px;
    color: #b4c0c9
}

.gamehistory-confirm .gamehistory-img {
    width: 80px;
    height: 80px
}

.gamehistory-confirm .gamehistory-empty {
    height: 336px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    color: #8b969f
}

.gamehistory-confirm .gamehistory-empty .icon-empty {
    margin-bottom: 30px
}

.gamehistory-confirm .gamehistory-btns {
    margin-top: 10px
}

.gamehistory-confirm .gamehistory-btns .g-Btn {
    width: 80px;
    height: 32px;
    line-height: 32px
}

.gamehistory-confirm .gamehistory-item.pc .gamehistory-img {
    width: 56px;
    height: 80px;
    margin-left: 12px;
    margin-right: 28px
}

.gamehistory-confirm .gamehistory-nav {
    padding: 0 32px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #28333d;
    box-sizing: border-box
}

.gamehistory-confirm .subnavBox h2 {
    font-size: 14px;
    margin-right: 24px;
    cursor: pointer
}

.gamehistory-mobile {
    margin-top: 16px;
    padding-bottom: 16px;
    background-color: #28333d
}

.gamehistory-mobile.more i {
    display: inline-block
}

.gamehistory-mobile p {
    line-height: 50px;
    padding-right: 20px;
    padding-right: -webkit-calc(20px + env(safe-area-inset-right));
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-left: 20px;
    padding-left: -webkit-calc(20px + env(safe-area-inset-left));
    padding-left: calc(20px + env(safe-area-inset-left));
    color: hsla(0,0%,100%,.6);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.gamehistory-mobile p span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.gamehistory-mobile p i {
    display: none
}

.gamehistory-mobile ul {
    height: 160px;
    padding-top: 12px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: auto
}

.gamehistory-mobile ul::-webkit-scrollbar {
    display: none
}

.gamehistory-mobile .gamehistory-item {
    width: 106px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    padding-bottom: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center
}

.gamehistory-mobile .gamehistory-img {
    width: 70px;
    height: 70px;
    margin-right: 0!important
}

.gamehistory-mobile .gamehistory-btns {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 12px
}

.gamehistory-mobile h3 {
    margin-top: 12px;
    line-height: 1;
    max-width: 106px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gamehistory-mobile .g-Btn {
    width: 70px;
    min-width: 70px;
    height: 28px;
    line-height: 28px;
    margin-right: 0!important
}

.gamehistory-mobile .gamehistory-empty {
    height: 160px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    color: #8b969f
}

.gamehistory-mobile .gamehistory-empty .icon-empty {
    margin-bottom: 30px
}

.gamehistory-detail {
    padding: 16px 14px 0 14px
}

.gamehistory-detail .gamehistory-item {
    position: relative
}

.gamehistory-detail .gamehistory-item h3 {
    margin-top: 18px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gamehistory-detail .gamehistory-coutdown {
    margin-top: 8px;
    color: #b4c0c9
}

.gamehistory-detail .gamehistory-coutdown br {
    display: none
}

.gamehistory-detail .gamehistory-img {
    width: 80px;
    height: 80px
}

.gamehistory-detail .gamehistory-empty {
    height: 336px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    color: #8b969f
}

.gamehistory-detail .gamehistory-empty .icon-empty {
    margin-bottom: 30px
}

.gamehistory-detail .gamehistory-btns {
    position: absolute;
    right: 0;
    top: 22%;
    z-index: 1;
    margin-top: 0
}

.gamehistory-detail .gamehistory-btns .g-Btn {
    width: 76px;
    min-width: 76px;
    height: 28px;
    line-height: 28px;
    margin-right: 0
}

.gamehistory-detail .gamehistory-intr {
    margin-left: -2px
}

.gamehistory-detail .gamehistory-item.pc .gamehistory-img {
    width: 56px;
    height: 80px;
    margin-left: 12px;
    margin-right: 28px
}

@media only screen and (max-width: 345px) {
    .gamehistory-detail .gamehistory-item h3 {
        margin-top:12px
    }

    .gamehistory-detail .gamehistory-coutdown {
        margin-top: 4px;
        line-height: 24px
    }

    .gamehistory-detail .gamehistory-coutdown br {
        display: block
    }
}

.user-detail {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.user-detail>.icon {
    width: 40px;
    height: 40px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.user-detail>div {
    text-align: center
}

.user-detail>div h3 {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.user-detail>div h3.user-phone {
    font-weight: 500
}

.user-detail>div h3.user-phone .icon {
    width: 20px;
    height: 20px
}

.user-detail>div h3 span {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 2px 6px;
    background: #c5c5c5;
    border-radius: 10px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    color: #1e2831
}

.user-detail>div p {
    color: #8b969f;
    word-break: break-all;
    font-size: 12px
}

.user-detail>div p.nickname {
    color: #fff;
    margin-right: 2px
}

.user-detail>div p.bold {
    font-weight: 700
}

.user-detail>div p i {
    vertical-align: -1px;
    margin-right: 6px
}

.user-detail>div .g-Btn {
    margin-top: 12px;
    box-shadow: 0 2px 30px 0 rgba(7,171,127,.4)
}

.user-detail>div .btn-timeover {
    padding-top: 4px;
    line-height: 1
}

.user-detail>div .btn-timeover span {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 12px;
    opacity: .8
}

.user-detail .user-avatar {
    margin-right: 12px
}

.user-detail .icon-vip-tag,.user-detail .icon-vip-tag-disabled {
    margin-left: 4px
}

.user-detail .growth-data {
    padding: 6px 16px;
    background: hsla(0,0%,100%,.1);
    border-radius: 100px 0 0 100px;
    position: absolute;
    right: -20px;
    top: 8px;
    min-width: 72px;
    box-sizing: border-box;
    cursor: pointer
}

.user-detail .growth-data i {
    margin: 0
}

.user-detail .growth-data p {
    font-size: 12px;
    color: #b4c0c9;
    text-align: center;
    position: relative;
    text-align: right
}

.user-detail .growth-data p:last-child {
    font-size: 12px;
    color: #fff;
    font-weight: 700
}

.user-detail .growth-data p.new:before {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e35043
}

.user-detail2 {
    -webkit-box-orient: inherit;
    -webkit-box-direction: inherit;
    -webkit-flex-direction: inherit;
    flex-direction: inherit;
    flex-direction: unset
}

.user-detail2>div {
    text-align: left
}

.user-detail2 .baseinfo {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.user-detail2 h3 {
    -webkit-box-pack: start!important;
    -webkit-justify-content: flex-start!important;
    justify-content: flex-start!important
}

.user-detail2 .user-name {
    font-weight: 400
}

.user-detail2 .user-phone2 {
    font-size: 12px;
    color: #8b969f
}

.center {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#40515f),to(#1e2831));
    background-image: linear-gradient(180deg,#40515f,#1e2831);
    background-size: 100% 248px;
    background-repeat: no-repeat;
    overflow: hidden
}

.center .topnav .topnav-fixed {
    background: transparent
}

.center .user-detail2 {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 16px
}

.center .user-detail2 .user-avatar {
    margin-right: 8px
}

.center.notlogin .user-detail2 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    padding-top: 36px
}

.newuser-benefits img {
    width: 100%
}

.user-list {
    margin-top: 12px
}

.user-list>li {
    position: relative;
    height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid hsla(0,0%,100%,.05);
    color: #b4c0c9;
    cursor: pointer
}

.user-list>li:hover {
    color: #fff
}

.user-list>li .icon {
    margin-right: 12px
}

.user-list>li .tips {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -9px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: right center;
    transform-origin: right center;
    background-image: -webkit-gradient(linear,left top,right top,color-stop(20%,#f0a406),to(#be3812));
    background-image: linear-gradient(90deg,#f0a406 20%,#be3812);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.user-list>li .icon-hot-pc {
    -webkit-transform: translate(-2px,-8px);
    transform: translate(-2px,-8px)
}

.user-qq {
    margin-top: 20px;
    text-align: center
}

.user-qq .qqlabel {
    background: #304051
}

.user-qq .icon-me-qq {
    width: 20px;
    height: 20px
}

.user-message {
    position: absolute;
    top: 37px;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: 16px!important
}

.user-detail2 .user-cloud-pc .cloud-pc-process {
    background: #304051
}

.user-detail3 {
    padding: 16px 0 8px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.user-detail3 .user-avatar {
    margin-right: 8px
}

.user-detail3 .icon-vip {
    width: 20px;
    height: 20px;
    margin-left: 2px
}

.user-detail3 .growth-data {
    top: 16px
}

.user-cloud-pc {
    margin-top: 4px;
    margin-left: 1px;
    margin-right: 2px
}

.user-cloud-pc.timeover .cloud-pc-process span {
    background: #e35043
}

.user-cloud-pc.timeover .cloud-pc-left {
    color: #e35043
}

.user-cloud-pc .cloud-pc-process {
    height: 8px;
    border-radius: 4px;
    background: #1e2831;
    margin-bottom: 3px;
    text-align: left;
    font-size: 0
}

.user-cloud-pc .cloud-pc-process span {
    height: 100%;
    -webkit-transition: width .3s;
    transition: width .3s;
    display: inline-block;
    border-radius: 4px;
    background: #03c37e
}

.user-cloud-pc .cloud-pc-left {
    float: left;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: left;
    transform-origin: left;
    margin-right: -20px;
    color: #03c37e
}

.user-cloud-pc .cloud-pc-right {
    float: right;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: right;
    transform-origin: right;
    margin-left: -6px
}

.user-cloud-pc .cloud-pc-middle {
    margin-right: -30px;
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scale(.92);
    transform: scale(.92);
    color: #e35043
}

.user-setting-addfriend .topnav-fixed {
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.user-setting-addfriend.scroll .topnav-fixed {
    background: #1e2831!important
}

.user-setting-addfriend.statepc {
    height: auto
}

.user-setting-addfriend.statepc .topnav-fixed {
    position: static;
    height: auto;
    background: transparent
}

.user-setting-addfriend.statepc .topnav-fixed .user-setting-topnav {
    padding: 0;
    margin-bottom: 0;
    height: auto;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}

.user-setting-addfriend.statepc .topnav-fixed .user-setting-topnav span {
    background: #304051;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer
}

.user-setting-addfriend.statepc .topnav-fixed .user-setting-topnav span i {
    width: 16px;
    height: 16px
}

.user-setting-addfriend .user-setting-topnav {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 0;
    width: 100%;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.user-setting-addfriend .user-setting-topnav .user-avatar img {
    display: block
}

.user-setting-addfriend .user-setting-topnav h1 {
    display: none
}

.user-setting-addfriend .user-setting-topnav span {
    position: relative
}

.user-setting-addfriend .user-setting-topnav .user-setting-sub {
    font-size: 12px;
    color: #b4c0c9;
    letter-spacing: 0;
    font-style: normal;
    position: absolute;
    top: 2px;
    left: 21px;
    width: 80px
}

.user-info-label {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.user-info-label,.user-info-label>span {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.user-info-label>span {
    background: hsla(0,0%,100%,.1);
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 12px;
    color: #b4c0c9;
    margin: 0 8px 4px 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.user-info-label>span i {
    vertical-align: middle;
    font-style: normal;
    margin-right: 2px
}

.user-status-m {
    margin: 0 16px
}

.user-follow {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin: 20px 0 30px
}

.user-follow>div {
    margin-right: 50px
}

.user-follow>div:last-child {
    margin-right: 0
}

.user-follow>div p {
    font-size: 12px;
    color: #8b969f
}

.user-follow>div p:first-child {
    display: inline-block;
    position: relative;
    color: #b4c0c9;
    font-size: 18px;
    font-weight: 700
}

.user-follow>div p:first-child.new:before {
    content: "";
    position: absolute;
    top: 2px;
    right: -10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e35043
}

.user-status-pc .user-sign i {
    height: 18px;
    background-size: auto 100%;
    background-position: 0
}

.user-status-pc .user-sign .icon-tag-vip {
    width: 40px;
    height: 18px
}

.user-status-pc .user-follow {
    margin: 8px 0 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.user-status-pc .user-follow>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    margin-right: 0
}

.user-status-pc .user-follow>div p {
    font-size: 12px
}

.user-status-pc .user-follow>div p:first-child {
    color: #b4c0c9;
    margin-left: 4px;
    font-weight: 700
}

.user-status-pc .user-follow i {
    width: 1px;
    height: 8px;
    background: #8b969f;
    font-style: normal;
    margin: 0 7px
}

.header,.headerbox {
    height: 80px
}

.headerbox {
    position: fixed;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 996;
    top: 0;
    -webkit-transition: background .3s cubic-bezier(.25,.8,.25,1);
    transition: background .3s cubic-bezier(.25,.8,.25,1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.headerbox.collapsed {
    background: #304051
}

.headerbox.collapsed .nav-history,.headerbox.collapsed .nav-playing,.headerbox.collapsed .nav-search {
    padding: 0;
    width: 36px;
    background: hsla(0,0%,100%,.08)
}

.headerbox.collapsed .nav-history>span,.headerbox.collapsed .nav-playing>span,.headerbox.collapsed .nav-search>span {
    display: none
}

.headerbox.collapsed .nav-history>.icon,.headerbox.collapsed .nav-playing>.icon,.headerbox.collapsed .nav-search>.icon {
    margin-right: 0
}

.headerbox.collapsed .nav-history:hover,.headerbox.collapsed .nav-playing:hover,.headerbox.collapsed .nav-search:hover {
    background: hsla(0,0%,100%,.14)
}

.InMobile .header {
    height: 58px;
    height: -webkit-calc(58px + constant(safe-area-inset-top));
    height: calc(58px + constant(safe-area-inset-top));
    height: -webkit-calc(58px + env(safe-area-inset-top));
    height: calc(58px + env(safe-area-inset-top))
}

.InMobile .headerbox {
    background: #1e2831;
    height: 58px;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top)
}

.InMobile .nav {
    position: relative
}

.InMobile .nav-logo {
    width: 36px;
    height: 36px;
    margin-left: 0;
    margin-right: 0
}

.InMobile .nav-logo-big {
    width: 114px;
    height: 27px
}

.nav {
    max-width: 1920px;
    padding: 0 8%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.nav-guide {
    top: 0;
    position: absolute;
    width: 42px;
    height: 3px;
    overflow: hidden;
    background: #03c47e;
    box-shadow: 0 2px 10px 0 #03c47e;
    -webkit-transition: left .3s ease-out;
    transition: left .3s ease-out
}

.nav-logo {
    width: 127px;
    height: 30px
}

.nav-logo img {
    width: 100%
}

.nav-con {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.nav-con,.nav-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.nav-list {
    white-space: nowrap
}

.nav-list li {
    color: #fff;
    margin-left: 32px;
    opacity: .6
}

.nav-list li:hover {
    opacity: 1
}

.nav-list li.on {
    opacity: 1;
    position: relative;
    font-weight: 700
}

.nav-list li.on:before {
    position: absolute;
    top: -30px;
    content: "";
    width: 42px;
    left: 50%;
    margin-left: -21px;
    height: 3px;
    overflow: hidden;
    background: #03c47e;
    box-shadow: 0 2px 10px 0 #03c47e
}

.nav-list li:first-of-type {
    margin-left: 48px
}

.nav-list+.nav-userinfo-item {
    white-space: nowrap;
    margin-right: 32px
}

.nav-userinfo {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-left: auto
}

.nav-userinfo>.login-btn {
    margin-left: 32px;
    position: relative
}

.nav-userinfo>.login-btn .benefits-con {
    width: 260px;
    position: absolute;
    top: 50px;
    left: -200px;
    border-top: 3px solid #03c47e;
    background: #1e2831;
    cursor: pointer
}

.nav-userinfo>.login-btn .benefits-con:after {
    content: "";
    position: absolute;
    border-top: none;
    border-bottom: 6px solid #03c47e;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    top: -8px;
    right: 8px
}

.nav-userinfo>.login-btn .benefits-con .newuser-benefits,.nav-userinfo>.login-btn .benefits-con .newuser-benefits img {
    width: 100%
}

.nav-userinfo-item {
    position: relative;
    margin-left: 32px
}

.nav-userinfo-item.navdialog-checkin .nav-dialog {
    width: 375px;
    padding: 20px 16px 16px 16px
}

.nav-message-item {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-left: 32px;
    background: hsla(0,0%,100%,.14);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.nav-message-item:hover {
    background: hsla(0,0%,100%,.2)
}

.nav-checkin {
    width: 36px;
    height: 36px;
    border-radius: 36px;
    background: hsla(0,0%,100%,.14);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-animation-iteration-count: infinite!important;
    animation-iteration-count: infinite!important;
    position: relative
}

.nav-checkin:hover {
    background: hsla(0,0%,100%,.2)
}

.nav-checkin.new:before {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e35043
}

.nav-history {
    width: 36px;
    height: 36px;
    border-radius: 36px;
    background: hsla(0,0%,100%,.14);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.nav-history:hover {
    background: hsla(0,0%,100%,.2)
}

.nav-playing {
    padding: 0 16px;
    color: #fff;
    height: 36px;
    border-radius: 36px;
    background: hsla(0,0%,100%,.14);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.nav-playing .icon {
    margin-right: 2px
}

.nav-playing:hover {
    background: hsla(0,0%,100%,.2)
}

.nav-search {
    width: 36px;
    height: 36px;
    border-radius: 36px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer
}

.nav-search+.g-Btn {
    margin-left: 32px
}

.nav-dialog {
    position: absolute;
    top: 46px;
    right: 0;
    width: 258px;
    border-top: 4px solid #03c47e;
    border-radius: 4px;
    padding: 24px 20px;
    background-color: #28333d;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.5);
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: 100%
}

.nav-dialog>i {
    position: absolute;
    border-top: none;
    border-bottom: 6px solid #03c47e;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    top: -8px;
    right: 8px
}

.nav-dialog.nav-user-dialog {
    width: 390px;
    max-height: 570px;
    overflow: auto
}

.nav-closemenu {
    padding: 24px 20px;
    -webkit-box-ordinal-group: -1;
    -webkit-order: -2;
    order: -2;
    width: 100%;
    box-sizing: border-box
}

.nav-shadow {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,.5)
}

.nav-link {
    position: relative;
    color: #fff!important;
    text-decoration: none;
    opacity: .5;
    cursor: pointer
}

.nav-link:hover {
    opacity: 1
}

.nav-link.red:after {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #e35043
}

.nav-left {
    position: absolute;
    left: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.nav-left>div {
    padding: 8px;
    margin-left: 4px
}

.nav-left>div:first-child {
    margin-left: 0
}

.nav-mobileOptions {
    margin-left: auto;
    margin-right: -8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.nav-mobileOptions>div {
    padding: 8px;
    margin-left: 4px
}

.nav-pcsearch {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: 400px;
    margin: 0 auto
}

.nav-pcsearch .pcsearch {
    width: 100%;
    margin: 0
}

.nav-pcsearch2 {
    padding-left: 32px
}

.nav-pcsearch2+.nav-userinfo {
    margin-left: 0
}

.nav-mobilesearch {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    max-width: 200px;
    margin-left: 16px
}

@media only screen and (min-width: 1919px) {
    .nav {
        padding:0 8%
    }
}

@media only screen and (max-width: 1080px) {
    .nav-list li {
        margin-left:32px
    }

    .nav-list li:first-of-type {
        margin-left: 40px
    }

    .nav-message-item,.nav-userinfo-item {
        margin-left: 24px
    }

    .nav-resource.pc .nav-userinfo-item {
        margin-left: 24px!important
    }
}

@media only screen and (max-width: 1024px) {
    .nav-history,.nav-playing {
        padding:0;
        width: 36px
    }

    .nav-history>span,.nav-playing>span {
        display: none
    }

    .nav-history>.icon,.nav-playing>.icon {
        margin-right: 0
    }

    .nav-pcsearch2 .icon-cancel {
        display: block!important
    }
}

@media only screen and (max-width: 768px) {
    .nav {
        -webkit-box-pack:center;
        -webkit-justify-content: center;
        justify-content: center;
        padding: 0 40px
    }

    .fs_nav_logo,.nav-logo {
        margin-left: auto;
        margin-right: auto
    }

    .nav-con {
        visibility: hidden;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 66.66666667%;
        min-width: 280px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        background: #304051;
        z-index: 99
    }

    .nav-con.on {
        visibility: inherit
    }

    .nav-con .nav-list {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        order: 1;
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column
    }

    .nav-con .nav-list li {
        margin: 0;
        height: 48px;
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding-left: 16px;
        box-sizing: border-box;
        opacity: 1;
        color: #8b969f
    }

    .nav-con .nav-list li.on {
        color: #fff;
        position: relative
    }

    .nav-con .nav-list li.on:before {
        content: "";
        position: absolute;
        top: 25%;
        bottom: 25%;
        width: 2px;
        left: 0;
        background: #03c47e;
        overflow: hidden
    }

    .nav-con .nav-list li:hover {
        background: #28333d
    }

    .nav-con .nav-userinfo {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin-left: 0;
        width: 100%;
        height: 100%
    }

    .nav-con .nav-userinfo-item {
        width: 100%;
        margin-left: 0;
        position: inherit;
        position: unset
    }

    .nav-con .nav-userinfo-item:last-of-type {
        -webkit-box-ordinal-group: 0;
        -webkit-order: -1;
        order: -1;
        margin-bottom: 0;
        -webkit-box-flex: inherit;
        -webkit-flex: inherit;
        flex: inherit;
        -webkit-box-flex: unset;
        -webkit-flex: unset;
        flex: unset;
        overflow-y: inherit;
        overflow-y: unset
    }

    .nav-con .nav-userinfo-item>div:first-of-type {
        display: none
    }

    .nav-con .nav-dialog {
        position: inherit;
        position: unset;
        width: 100%;
        background: none!important;
        box-shadow: inherit;
        box-shadow: unset;
        border: none;
        padding: 18px 20px
    }

    .nav-con .nav-dialog>i {
        display: none
    }

    .nav-con .qr img {
        width: 100px;
        height: 100px
    }

    .nav-con .user-qq {
        display: none
    }
}

.nav-checkin-dialog {
    max-height: 568px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 264px
}

.nav-checkin-dialog.nav-checkin-dialog::-webkit-scrollbar {
    width: 4px
}

@media only screen and (max-width: 414px) {
    .nav {
        padding:0 16px
    }
}

@media only screen and (max-height: 720px) {
    .InMobile .header {
        height:48px;
        height: -webkit-calc(48px + constant(safe-area-inset-top));
        height: calc(48px + constant(safe-area-inset-top));
        height: -webkit-calc(48px + env(safe-area-inset-top));
        height: calc(48px + env(safe-area-inset-top))
    }

    .InMobile .headerbox {
        height: 48px
    }
}

.subnav {
    padding-top: 20px
}

.subnav h2 {
    margin-right: 48px;
    opacity: .5;
    font-size: 14px;
    cursor: pointer;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    font-weight: 400
}

.subnav h2.on,.subnav h2:hover {
    opacity: 1;
    font-weight: 700
}

.subnavBox {
    height: 55px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid hsla(0,0%,100%,.06);
    position: relative
}

.subnav-active {
    position: absolute;
    content: "";
    width: 0;
    height: 3px;
    border-radius: 1.5px;
    bottom: -2px;
    background: #03c47e;
    box-shadow: 0 0 10px 0 #03c47e;
    overflow: hidden;
    -webkit-transition: left .2s ease-out;
    transition: left .2s ease-out
}

.subnav.collapsed .subnavScroll {
    background: #1e2831;
    padding-top: -webkit-calc(4px + constant(safe-area-inset-top));
    padding-top: calc(4px + constant(safe-area-inset-top));
    padding-top: -webkit-calc(4px + env(safe-area-inset-top));
    padding-top: calc(4px + env(safe-area-inset-top));
    position: fixed;
    top: 58px;
    width: 100%;
    left: 0;
    box-sizing: border-box;
    padding-left: 8%;
    padding-right: 8%;
    z-index: 2;
    box-shadow: 0 4px 2px rgba(0,0,0,.5)
}

.subnav.collapsed .subnavScroll .subtags {
    padding-bottom: 14px
}

.InMobile .subnav {
    padding-top: 10px
}

.InMobile .subnav h2 {
    font-weight: 400;
    margin-right: 20px;
    font-size: 16px
}

.InMobile .subnav h2:hover {
    opacity: .5
}

.InMobile .subnav h2.on {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    font-weight: 700
}

.InMobile .subnavBox {
    height: 40px;
    border: none
}

.InMobile .subnav-active {
    bottom: 0;
    border-radius: 2px
}

.InMobile .subnav-search {
    display: none;
    padding-left: 10px;
    margin-left: auto
}

.InMobile .subnavScroll.collapsed .subnav-search {
    display: block
}

.subtags {
    padding: 14px 0 0;
    position: relative;
    height: 24px
}

.subtags>ul {
    overflow-x: auto;
    white-space: nowrap
}

.subtags>ul::-webkit-scrollbar {
    display: none
}

.subtags>ul>li {
    display: inline-block;
    background: hsla(0,0%,84.7%,0);
    margin-right: 10px
}

.subtags>ul>li>div {
    display: inline-block;
    padding: 4px 16px;
    line-height: 1;
    border: 1px solid #40505d;
    border-radius: 14px;
    color: #b4c0c9;
    font-size: 13px
}

.subtags>ul>li.on>div {
    color: #03c47e;
    background: rgba(3,196,126,.1);
    border-color: #03c47e
}

.subtags>ul.on {
    position: absolute;
    z-index: 9;
    white-space: normal;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    background: #1e2831;
    padding-bottom: 14px;
    overflow: inherit
}

.subtags>ul.on>li {
    margin-top: 14px
}

.subtags>ul.on>li:first-of-type {
    margin-top: 0;
    width: 100%
}

.subtags>ul.on:before {
    content: "";
    position: absolute;
    left: -100%;
    right: -100%;
    height: 100%;
    top: 0;
    box-shadow: 0 4px 2px rgba(0,0,0,.5);
    background: #1e2831;
    z-index: -1;
    pointer-events: none
}

.subtagmenu {
    position: absolute;
    top: 10px;
    right: 0;
    width: 32px;
    height: 32px;
    background-image: -webkit-gradient(linear,right top,left top,from(#1e2831),to(rgba(30,40,49,0)));
    background-image: linear-gradient(270deg,#1e2831,rgba(30,40,49,0));
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    z-index: 11
}

.subnav-pc,.subtagmenu {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.subnav-pc {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end
}

.subnav-pc .subnavBox {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.subnav-pc-search>.subnavBox {
    display: none
}

.subnav-pc-search>div {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end
}

.subnavBox2 {
    font-size: 14px
}

.subnavBox2>p {
    opacity: .5
}

.subnavBox2>p:nth-child(2) {
    margin: 0 16px;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.subnavBox2>p:first-child {
    cursor: pointer;
    white-space: nowrap
}

.subnavBox2>p:first-child span {
    margin-right: 8px
}

.subnavBox2>h2,.subnavBox2>p:first-child:hover {
    opacity: 1
}

@media only screen and (max-width: 1920px) {
    .InMobile .subnavScroll.collapsed {
        padding-left:8%;
        padding-right: 8%
    }
}

@media only screen and (max-width: 768px) {
    .InMobile .subnavScroll.collapsed {
        padding-left:40px;
        padding-right: 40px
    }
}

@media only screen and (max-width: 414px) {
    .InMobile .subnavScroll.collapsed {
        padding-left:16px;
        padding-right: 16px
    }
}

@media only screen and (max-height: 720px) {
    .subnav.collapsed .subnavScroll {
        top:48px
    }
}

.gamelist {
    width: 100%
}

.InMobile .gamelist {
    padding-top: 20px
}

.gamelist-wrap {
    margin: -8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.gameitem {
    width: 16.66666667%;
    box-sizing: border-box;
    padding: 8px;
    position: relative
}

.gamelist2 .gameitem {
    width: 20%
}

.gameitem-share-pc {
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px
}

.gameitem-loading .gameitem-cont {
    background: #263440
}

.gameitem-loading .gameitem {
    -webkit-animation: listloader-fade-in-out 1.4s linear infinite;
    animation: listloader-fade-in-out 1.4s linear infinite
}

.gameitem-loading .gameitem:nth-child(6n+1) {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.gameitem-loading .gameitem:nth-child(6n+2) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.gameitem-loading .gameitem:nth-child(6n+3) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.gameitem-loading .gameitem:nth-child(6n+4) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.gameitem-loading .gameitem:nth-child(6n+5) {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.gameitem-loading .gameitem:nth-child(6n+6) {
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

.gameitem-loading .g-Btn,.gameitem-loading .gameitem-img {
    background-color: rgba(16,16,16,.25)
}

.gameitem-tag {
    width: 52px;
    height: 52px;
    background: url(../img/tag_hot.5477a4cc.png) 0 0 no-repeat;
    background-size: contain;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1
}
.gameitem-tag.gameitem-pk {
    background-image: url(../img/tag_pk.png)
}
.gameitem-tag.gameitem-hot {
    background-image: url(../img/tag_hot.5477a4cc.png)
}

.gameitem-tag.gameitem-high {
    background-image: url(../img/tag_high.75ad820b.png)
}

.gameitem-tag.gameitem-free {
    background-image: url(../img/tag_free.eb920a44.png)
}

.gameitem-tag.gameitem-accountfree {
    background-image: url(../img/tag_accountfree.d1317fef.png)
}

.gameitem-cont {
    background: #28333d;
    border-radius: 4px;
    height: 100%;
    padding: 15%;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.gameitem-cont:hover {
    box-shadow: 0 4px 16px 0 rgba(0,0,0,.5);
    background: #304051
}

.gameitem-cont.nohover {
    cursor: default
}

.gameitem-cont.nohover:hover {
    box-shadow: inherit;
    box-shadow: unset;
    background: #28333d
}

.gameitem-cont .g-Btn-green,.gameitem-cont .g-Btn-green2 {
    padding-left: 0;
    padding-right: 0;
    width: 80px;
    max-width: 100%;
    height: 30px;
    line-height: 28px;
    margin: 0 auto
}

.gamelist-wrap_pc .gameitem-cont {
    padding: 0;
    padding-bottom: 15%
}

.gamelist-wrap_pc .gameitem-img {
    padding-bottom: 141%;
    border-radius: 4px
}

.gamelist-wrap_pc .gameitem-img>img {
    border-radius: 4px
}

.gamelist-wrap_pc .gameitem-intr {
    margin: 0 5% auto
}

.gamelist-wrap_high .gameitem-img.in,.gamelist-wrap_other .gameitem-img.in {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.gamelist-wrap_high .gameitem-img.in>img,.gamelist-wrap_other .gameitem-img.in>img {
    display: none
}

.InMobile .gameitem-cont:hover {
    box-shadow: inherit;
    box-shadow: unset;
    background: #28333d
}

.InMobile .gameitem-share-pc {
    padding: 8px
}

.gameitem-img {
    height: 0;
    padding-bottom: 100%;
    position: relative;
    box-sizing: border-box
}

.gameitem-img,.gameitem-img>img {
    width: 100%;
    border-radius: 24%
}

.gameitem-img>span {
    position: absolute;
    top: -10px;
    z-index: 1;
    width: 80%;
    max-width: 78px;
    min-width: 64px;
    color: #000;
    height: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 10px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#07e4b5),to(#03c47e));
    background-image: linear-gradient(#07e4b5,#03c47e);
    left: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-transform: translate3d(-50%,0,0) scale(1);
    transform: translate3d(-50%,0,0) scale(1)
}

.gameitem-img.on {
    box-shadow: 0 0 0 2px #03c47e
}

.gameitem-img.on2 {
    box-shadow: 0 0 0 2px #e3b407
}

.gameitem-img.on2 span {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#fac617),to(#e3b407));
    background-image: linear-gradient(#fac617,#e3b407)
}

.gameitem-intr {
    text-align: center;
    margin: 0 -10% auto
}

.gameitem-intr>h2 {
    font-weight: 400;
    padding: 15% 0;
    font-size: 13px
}

.gameitem-intr>p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #8b969f
}

.gameitem-sharepc {
    margin: 0 auto 8px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(18,22,26,.35);
    font-size: 12px;
    font-weight: 700;
    color: rgba(180,192,201,.85);
    text-shadow: 0 4px 4px rgba(0,0,0,.25);
    max-width: 90%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer
}

.gameitem-sharepc p:first-child {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.gameitem-sharepc P:nth-child(2) {
    margin-left: 2px
}

.gameitem-sharepc p {
    min-width: 25px
}

.gameitem-sharepc i {
    min-width: 12px
}

.gameitem-search-sharepc-pc {
    margin: 4px 0 0
}

.gameitem-search-sharepc-pc>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 4px
}

.gameitem-search-sharepc-pc p {
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer
}

.gameitem-search-sharepc-pc P:nth-child(2) {
    margin-left: 2px
}

.gameitem-search-sharepc-pc .sharepc-desc {
    max-width: 100%;
    padding: 0 6px 2px;
    -webkit-transform: scale(.92);
    transform: scale(.92);
    -webkit-transform-origin: left;
    transform-origin: left;
    border-radius: 3px;
    background: rgba(18,22,26,.2)
}

.gameitem-img-box {
    position: relative
}

.gameitem-img-box .gameitem-sharepc-mobile {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(18,22,26,.8);
    color: hsla(0,0%,100%,.85);
    text-shadow: 0 4px 4px rgba(0,0,0,.25);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    left: 0
}

.gameitem-img-box .gameitem-sharepc-mobile p {
    font-size: 12px;
    font-weight: 700;
    -webkit-transform: scale(.92);
    transform: scale(.92);
    min-width: 25px
}

.gameitem-img-box .gameitem-sharepc-mobile p:first-child {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.gameitem-img-box .gameitem-sharepc-mobile i {
    min-width: 12px
}

@media only screen and (min-width: 1919px) {
    .gameitem {
        width:12.5%
    }

    .gamelist2 .gameitem {
        width: 14.28571429%
    }

    .gameitem-loading .gameitem:nth-child(8n+1) {
        -webkit-animation-delay: .1s;
        animation-delay: .1s
    }

    .gameitem-loading .gameitem:nth-child(8n+2) {
        -webkit-animation-delay: .2s;
        animation-delay: .2s
    }

    .gameitem-loading .gameitem:nth-child(8n+3) {
        -webkit-animation-delay: .3s;
        animation-delay: .3s
    }

    .gameitem-loading .gameitem:nth-child(8n+4) {
        -webkit-animation-delay: .4s;
        animation-delay: .4s
    }

    .gameitem-loading .gameitem:nth-child(8n+5) {
        -webkit-animation-delay: .5s;
        animation-delay: .5s
    }

    .gameitem-loading .gameitem:nth-child(8n+6) {
        -webkit-animation-delay: .6s;
        animation-delay: .6s
    }

    .gameitem-loading .gameitem:nth-child(8n+7) {
        -webkit-animation-delay: .7s;
        animation-delay: .7s
    }

    .gameitem-loading .gameitem:nth-child(8n+8) {
        -webkit-animation-delay: .8s;
        animation-delay: .8s
    }
}

@media only screen and (max-width: 1024px) {
    .gameitem {
        width:20%
    }

    .gamelist2 .gameitem {
        width: 25%
    }

    .gameitem-loading .gameitem:nth-child(5n+1) {
        -webkit-animation-delay: .2s;
        animation-delay: .2s
    }

    .gameitem-loading .gameitem:nth-child(5n+2) {
        -webkit-animation-delay: .4s;
        animation-delay: .4s
    }

    .gameitem-loading .gameitem:nth-child(5n+3) {
        -webkit-animation-delay: .6s;
        animation-delay: .6s
    }

    .gameitem-loading .gameitem:nth-child(5n+4) {
        -webkit-animation-delay: .8s;
        animation-delay: .8s
    }

    .gameitem-loading .gameitem:nth-child(5n+5) {
        -webkit-animation-delay: 1s;
        animation-delay: 1s
    }
}

@media only screen and (max-width: 768px) {
    .gameitem {
        width:25%
    }

    .gamelist2 .gameitem {
        width: 33.33333333%
    }

    .gameitem-loading .gameitem:nth-child(4n+1) {
        -webkit-animation-delay: .2s;
        animation-delay: .2s
    }

    .gameitem-loading .gameitem:nth-child(4n+2) {
        -webkit-animation-delay: .4s;
        animation-delay: .4s
    }

    .gameitem-loading .gameitem:nth-child(4n+3) {
        -webkit-animation-delay: .6s;
        animation-delay: .6s
    }

    .gameitem-loading .gameitem:nth-child(4n+4) {
        -webkit-animation-delay: .8s;
        animation-delay: .8s
    }
}

@media only screen and (max-width: 414px) {
    .gamelist-wrap {
        margin:-5px
    }

    .gameitem {
        width: 33.33333333%;
        padding: 5px
    }

    .gamelist2 .gameitem {
        width: 50%
    }

    .gameitem-tag {
        width: 40px;
        height: 40px;
        top: 1px;
        right: 1px
    }

    .gameitem-loading .gameitem:nth-child(3n+1) {
        -webkit-animation-delay: .2s;
        animation-delay: .2s
    }

    .gameitem-loading .gameitem:nth-child(3n+2) {
        -webkit-animation-delay: .4s;
        animation-delay: .4s
    }

    .gameitem-loading .gameitem:nth-child(3n+3) {
        -webkit-animation-delay: .6s;
        animation-delay: .6s
    }

    .InMobile .gameitem-share-pc {
        padding: 5px
    }
}

.game-cards {
    white-space: nowrap;
    overflow-x: auto
}

.game-cards::-webkit-scrollbar {
    display: none
}

.game-cards li {
    position: relative;
    width: 110px;
    margin-right: 8px;
    background: #28333d;
    border-radius: 4px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 18px 6px 32px 6px;
    vertical-align: top;
    box-sizing: border-box
}

.game-cards li:last-child {
    margin-right: 0
}

.game-cards li .icon-rtag-pc {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 14px;
    border-top-left-radius: 4px
}

.game-cards li .card-icon {
    width: 56px;
    height: 56px
}

.game-cards li .card-icon span {
    display: none
}

.game-cards li .card-icon img {
    width: 100%;
    height: 100%;
    border-radius: 16px
}

.game-cards li .card-name {
    max-width: 100%;
    white-space: normal;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 6px;
    height: 40px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: #fff
}

.game-cards li .card-tips {
    position: absolute;
    bottom: 6px;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    font-size: 12px;
    color: #8b969f
}

.game-cards li .g-Btn {
    margin-top: 6px;
    width: 64px;
    height: 28px;
    line-height: 26px;
    box-sizing: border-box;
    padding: 0;
    font-size: 12px
}

.input {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    position: relative;
    z-index: 1
}

.input,.input label {
    box-sizing: border-box
}

.input label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 36px;
    background: #1e2831;
    z-index: -1;
    border: 1px solid transparent;
    pointer-events: none
}

.input input {
    height: 28px;
    line-height: 28px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.input input:focus~label {
    border-color: #03c47e
}

.input.error:before {
    content: attr(data-value);
    position: absolute;
    left: 0;
    bottom: -22px;
    color: #e35043;
    font-size: 12px;
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.input.error label {
    border-color: #e35043
}

.textarea {
    width: 100%;
    position: relative
}

.textarea textarea {
    color: #fff;
    width: 100%;
    resize: none;
    height: 124px;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 18px;
    background: #1e2831;
    border: 1px solid transparent
}

.textarea textarea:focus {
    border-color: #03c47e
}

.textarea p {
    margin-top: 4px;
    text-align: right
}

.textarea.error:before {
    content: attr(data-value);
    position: absolute;
    left: 0;
    bottom: 0;
    color: #e35043;
    font-size: 12px;
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.textarea.error textarea {
    border-color: #e35043
}

.radio {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.radio a {
    color: #8b969f;
    text-decoration: none
}

.radio a:hover {
    color: #fff
}

.radio[data-title]:hover:after {
    opacity: 1;
    -webkit-transition: all .1s ease .5s;
    transition: all .1s ease .5s;
    visibility: visible
}

.radio[data-title]:after {
    content: attr(data-title);
    position: absolute;
    padding: 2px 6px;
    bottom: -2em;
    left: 50%;
    white-space: nowrap;
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
    color: #fff;
    background: #1e2831;
    border: 1px solid #8b969f;
    box-shadow: 0 0 1px 0 rgba(0,0,0,.35);
    border-radius: 2px
}

.radio[data-title] {
    position: relative
}

.radio-check {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin-right: 2px;
    cursor: pointer
}

.radio-check,.toast {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.toast {
    background-color: #304051;
    min-width: 274px;
    max-width: 90%;
    position: fixed;
    left: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    color: #fff;
    padding-top: 20px;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    z-index: 999;
    box-shadow: 0 2px 15px 0 rgba(0,0,0,.2)
}

.toast p {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    text-align: center;
    padding: 0 32px 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.toast p .icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px
}

.toast p span {
    min-width: 0;
    display: block;
    text-align: justify
}

.toast a {
    margin-left: auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding-left: 64px;
    padding: 0 32px 20px;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.toast.preloading {
    height: 80px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    top: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    padding-top: 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 472px
}

.toast.preloading p {
    display: inline;
    padding-bottom: 0;
    white-space: inherit;
    white-space: unset
}

.toast.preloading p span {
    color: #03c47e;
    display: inline
}

.toast-progress,.toast-progress2 {
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #03c47e;
    box-shadow: 0 0 20px 0 rgba(3,196,126,.2);
    border-radius: 2px
}

.toast-loading {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 472px;
    top: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0)
}

.toast-loading .sk-circle {
    position: relative;
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
    -webkit-transform: inherit;
    transform: inherit;
    -webkit-transform: unset;
    transform: unset;
    margin-bottom: 10px
}

.toast-progressBox {
    position: relative;
    height: 7px
}

.toast-progressBox .toast-progress {
    height: 100%
}

.confirm-shade {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.7);
    z-index: 998;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.cofirm {
    position: relative;
    max-width: 382px;
    min-width: 320px;
    box-shadow: 0 0 12px rgba(0,0,0,.5)
}

.cofirm h2 {
    font-weight: 400;
    color: #fff
}

.cofirm .icon-close {
    position: absolute;
    left: 102%;
    left: -webkit-calc(100% + 15px);
    left: calc(100% + 15px);
    top: 0
}

.InTV .cofirm {
    max-width: 40%
}

.cofirm-head {
    padding: 0 32px;
    background: #1e2831;
    border-radius: 4px 4px 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end
}

.cofirm-head+.cofirm-cont {
    border-radius: 0 0 4px 4px
}

.cofirm-head h2 {
    text-align: center;
    padding: 20px 0
}

.cofirm-head .icon {
    position: absolute;
    left: 0;
    bottom: 0
}

.cofirm-head .icon-close {
    right: -42px;
    top: 0;
    left: inherit;
    left: unset;
    bottom: inherit;
    bottom: unset
}

.cofirm-cont {
    padding: 24px 32px;
    border-radius: 4px;
    background: #28333d;
    color: #8b969f
}

.cofirm-msg {
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 16px
}

.confirm-mobile .cofirm-msg {
    max-height: 30vw;
    padding: 0 6px;
    margin-top: 8px;
    margin-bottom: 16px;
    overflow-y: auto
}

.confirm-transparent {
    min-width: auto;
    box-shadow: none;
    pointer-events: none
}

.confirm-transparent,.confirm-transparent .cofirm-cont,.confirm-transparent .confirm-main {
    width: 100%;
    height: 100%;
    background-color: transparent
}

.confirm-transparent .confirm-main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.confirm-transparent .confirm-main iframe {
    pointer-events: all
}

@media (orientation: landscape) {
    .confirm-mobile .cofirm-msg {
        max-height:30vh
    }
}

.confirm-qq {
    line-height: 2;
    font-size: 14px
}

.confirm-qq.confirm-qq-overflow {
    height: 150px;
    overflow-y: auto
}

.cofirm-btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.cofirm-btns a {
    display: block;
    margin: 0 8px;
    white-space: nowrap
}

.cofirm-btns.double {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.cofirm-btns.double a {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0;
    padding: 0;
    font-size: 14px
}

.cofirm-btns.double a:first-of-type {
    margin-right: 16px;
    background: transparent
}

.cofirm-btns.double a:last-of-type {
    margin-left: 16px
}

.cofirm-btns .sigleLong_btn {
    width: 100%;
    margin: 0
}

.confirm-qr {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.confirm-qr>div:last-of-type {
    margin-left: 10px;
    max-width: 120px;
    overflow: hidden
}

.confirm-qr>div:last-of-type img {
    display: block;
    width: 100%;
    border-radius: 4px
}

.confirm-qr p {
    margin-bottom: 10px
}

.confirm-cloudmobile {
    line-height: 2
}

.confirm-cloudmobile>p {
    padding-left: 30px;
    text-indent: -30px
}

.confirm-cloudmobile>p.off {
    padding-left: 0;
    text-indent: 0
}

.confirm-cloudmobile>div {
    margin-top: 10px;
    font-weight: 700
}

.confirm-cloudmobile2 {
    line-height: 2;
    text-align: left
}

.confirm-cloudmobile2>p {
    padding-left: 14px;
    text-indent: -10px
}

.confirm-cloudmobile2>p b {
    margin-right: 6px
}

.confirm-cloudmobile2>div {
    margin-top: 10px;
    font-weight: 700
}

.iosplaycofirm-confirm {
    max-width: 100%!important;
    max-height: 100%!important;
    width: 100%!important;
    height: 100%!important;
    background: url(../img/bg2.4f49ee8f.jpg) 0 0 no-repeat;
    background-size: cover
}

.iosplaycofirm-confirm .cofirm-cont {
    position: absolute;
    background: transparent;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 9999
}

.iosplaycofirm-confirm .cofirm-cont>div {
    margin-top: -94px;
    text-align: center
}

.iosplaycofirm-confirm .cofirm-cont>div .icon-welcome {
    margin-left: 70px
}

.iosplaycofirm-confirm .cofirm-cont>div .g-Btn-green2 {
    display: block;
    margin: 30px auto 0
}

.iosplaycofirm-confirm .cofirm-cont>div .g-Btn-green2 .icon {
    margin-right: 6px
}

.iframe-confirm.mobile-scroll .cofirm {
    max-height: 100%;
    overflow-y: auto
}

.gift-confirm .cofirm,.iframe-confirm .cofirm {
    max-width: 100%;
    font-size: 0
}

.gift-confirm .cofirm-cont,.iframe-confirm .cofirm-cont {
    padding: 0
}

.iframe-confirm .confirm-main {
    position: relative
}

.iframe-confirm .confirm-main>.icon-close {
    position: absolute;
    right: -42px;
    top: 0
}

.pcgameios-confirm P {
    color: #fff
}

.pcgameios-confirm img {
    margin-top: 20px;
    max-width: 100%
}

.pcgameios-confirm .cofirm-btns {
    margin: 20px 0 10px
}

@media only screen and (max-width: 768px) {
    .cofirm-head .icon-close {
        top:16px;
        right: 16px
    }
}

@media only screen and (max-width: 414px) {
    .cofirm {
        max-width:90%;
        min-width: 90%
    }

    .cofirm-cont {
        padding: 24px 16px
    }
}

@media only screen and (max-height: 500px) {
    .pcgameios-confirm .cofirm-cont>div:first-of-type {
        height:150px;
        overflow-y: auto
    }
}

.bg-img-confirm {
    text-align: center
}

.bg-img-confirm.btn-reverse .cofirm-btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.bg-img-confirm.btn-reverse .cofirm-btns a {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none
}

.bg-img-confirm.btn-reverse .cofirm-btns a:first-child {
    margin-right: 0
}

.bg-img-confirm.btn-reverse .cofirm-btns a:last-child {
    margin-left: 0;
    margin-right: 5%
}

.bg-img-confirm .cofirm-cont {
    position: relative;
    max-height: 90vh;
    box-sizing: border-box;
    padding: 0;
    font-size: 0
}

.bg-img-confirm img {
    max-width: 100%;
    border-radius: 4px;
    max-height: 90vh
}

.bg-img-confirm .cofirm-btns {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 16px;
    z-index: 1;
    display: block
}

.bg-img-confirm .cofirm-btns a {
    display: inline-block;
    vertical-align: middle;
    min-width: 120px;
    padding: 0 8px
}

.bg-img-confirm .cofirm-btns a:first-child {
    margin-right: 5%
}

.bg-img-confirm .cofirm-btns a:last-child {
    margin-left: 5%
}

.confirm-pendant {
    width: 100px;
    height: 100px;
    background: url(../img/ad.92c2bf34.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: -105px;
    bottom: 0;
    cursor: pointer;
    border: 0
}

.confirm-pendant-adspc {
    width: 60px;
    height: 60px;
    background-image: url(../img/adpc.b70ec450.png);
    right: -65px
}

.confirm-pendant2 {
    width: 100%;
    height: 33px;
    line-height: 37px;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -27px;
    cursor: pointer;
    background: #161b1f;
    border: 1px solid rgba(66,193,252,.15);
    border-radius: 0 0 8px 8px;
    color: #42c1fc;
    padding: 0 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    font-size: 12px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    border-top: 0;
    box-sizing: border-box
}

.confirm-pendant2:before {
    width: 100%;
    height: 4px;
    background: #28333d;
    border-radius: 0 0 4px 4px;
    content: "";
    position: absolute;
    left: 0;
    top: 0
}

.confirm-pendant2 span {
    color: #7f8a93
}

.confirm-pendant2 i {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-top: -2px
}

@media only screen and (max-width: 480px) {
    .cofirm .icon-close {
        right:0;
        left: auto;
        top: -40px
    }

    .confirm-pendant {
        right: 0;
        bottom: -105px
    }
}

.InTransLandscape .bg-img-confirm .cofirm-cont,.InTransPortrait .bg-img-confirm .cofirm-cont {
    max-height: 90vw
}

.confirm-scroll {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 10px
}

.confirm-scroll img {
    max-width: 100%
}

@media only screen and (max-height: 674px) {
    .confirm-scroll {
        max-height:300px
    }
}

@media only screen and (max-height: 400px) {
    .confirm-scroll {
        max-height:140px
    }
}

.confirm-scroll-long .cofirm-msg {
    max-height: 70vh;
    overflow-y: auto;
    margin-bottom: 10px
}

.confirm-scroll-long img {
    max-width: 100%
}

@media only screen and (max-height: 674px) {
    .confirm-scroll-long .cofirm-msg {
        max-height:60vh
    }
}

@media only screen and (max-height: 400px) {
    .confirm-scroll-long .cofirm-msg {
        max-height:50vh
    }
}

.confirm-shade.confirm-exit-activity {
    pointer-events: all;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px)
}

.confirm-shade.confirm-exit-activity .confirm-box {
    position: relative;
    padding: 0;
    width: 320px;
    height: 286px;
    z-index: 3
}

.confirm-shade.confirm-exit-activity .confirm-box .icon-close {
    position: absolute;
    top: 0;
    right: -40px
}

.confirm-shade.confirm-exit-activity .confirm-box .icon-close.vertical {
    top: unset;
    bottom: -52px;
    right: unset;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.confirm-shade.confirm-exit-activity .confirm-box .activity-img {
    height: 218px;
    border-radius: 4px;
    overflow: hidden
}

.confirm-shade.confirm-exit-activity .confirm-box .activity-img img {
    width: 100%;
    object-fit: cover
}

.confirm-shade.confirm-exit-activity .confirm-box .confirm-btns {
    margin: 16px 0
}

.confirm-shade.confirm-exit-activity .confirm-box .confirm-btns .g-Btn {
    width: 108px;
    height: 36px;
    line-height: 36px
}

.confirm-shade.confirm-exit-activity .confirm-box .confirm-btns .g-Btn-green2 {
    box-shadow: 0 2px 27px rgba(7,171,127,.3)
}

.confirm-shade.confirm-exit-download {
    pointer-events: all;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px)
}

.confirm-shade.confirm-exit-download .download-content {
    width: 100%;
    padding: 0 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box
}

.confirm-shade.confirm-exit-download .download-content .download-content-title,.confirm-shade.confirm-exit-download .download-content .game-name {
    font-weight: 500;
    color: #fff
}

.confirm-shade.confirm-exit-download .download-content .download-game-icon {
    margin-bottom: 8px;
    width: 64px;
    height: 64px;
    border-radius: 8px
}

.confirm-shade.confirm-exit-download .download-content .download-qr-code {
    margin-bottom: 4px;
    border-radius: 4px;
    font-size: 0;
    overflow: hidden
}

.confirm-shade.confirm-exit-download .download-content .download-content-title {
    margin-bottom: 16px;
    font-size: 16px
}

.confirm-shade.confirm-exit-download .download-content .game-name {
    font-size: 12px
}

.confirm-shade.confirm-exit-download .download-content .download-mobile-tips {
    margin-top: 16px;
    color: #8b969f
}

.login {
    width: 382px
}

.login .cofirm-cont {
    padding: 0;
    height: 342px;
    position: relative;
    overflow: hidden
}

.login .cofirm-head.login-img {
    padding: 0
}

.login .cofirm-head.login-img img {
    width: 100%
}

.login3 {
    position: relative
}

.login3 .login-header {
    position: relative;
    height: auto
}

.login3 .login-header:before {
    content: "";
    height: 100%;
    z-index: 1;
    box-shadow: inset 0 -15px 8px -8px rgba(30,40,49,.7)
}

.login3 .login-header:before,.login-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
}

.login-box {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    top: 0;
    color: #a5a9ac
}

.login-box>.input {
    margin-top: 16px;
    margin-bottom: 24px;
    position: relative
}

.login-box>.input>.g-Btn {
    position: absolute;
    right: 0;
    width: 120px;
    padding: 0;
    font-weight: 400
}

.login-box>.g-Btn {
    width: 100%;
    margin-bottom: 10px
}

.login-avatar,.login-header {
    height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 16px
}

.login-avatar {
    position: relative
}

.login-avatar>.icon {
    position: absolute;
    top: 0;
    left: 0
}

.login-avatar>div {
    margin: 0 auto;
    height: 36px;
    border-radius: 36px;
    background: #1e2831;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px
}

.login-avatar>div p {
    color: #fff;
    margin-left: 5px
}

.login-avatar .login-help {
    position: absolute;
    padding: 0;
    height: auto;
    top: 0;
    right: 0;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    font-size: 14px;
    background: none;
    justify-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.login-avatar .login-help .icon {
    margin-right: 4px
}

.login-avatar .login-help span {
    margin-top: 1px
}

.login-header>h1 {
    color: #fff
}

.login-header .icon-login {
    margin-right: 22px
}

.login-header.help .icon-back {
    position: absolute;
    top: 0;
    left: 0
}

.login-region {
    margin-right: 10px;
    color: #b4c0c9;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.login-region:hover {
    color: #fff
}

.login-region .icon-back2 {
    margin-left: 10px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.login-regions {
    position: absolute;
    width: 100%;
    top: 102%;
    left: 0;
    padding: 6px 0;
    max-height: 110px;
    overflow-y: auto;
    background-color: #304051;
    border-radius: 4px
}

.login-regions li {
    padding: 6px 0;
    margin: 0 20px;
    border-bottom: 1px solid hsla(0,0%,100%,.05);
    color: #b4c0c9;
    cursor: pointer
}

.login-regions li:hover {
    color: #fff
}

.login-regions li:last-of-type {
    border-bottom: none
}

.login-appendWrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 101
}

.login-appendWrap .yidun_popup.yidun_popup--light .yidun_popup__mask {
    background-color: transparent
}

.login-appendWrap .yidun_popup.yidun_popup--append {
    height: auto;
    right: 0
}

.InMobile .login-region:hover,.InMobile .login-regions li:hover {
    color: #b4c0c9
}

.cofirm.login-help {
    height: 385px;
    width: 320px;
    box-sizing: border-box
}

.cofirm.login-help .cofirm-head {
    background: #28333d
}

.cofirm.login-help .cofirm-head h2 {
    padding: 16px 0
}

.cofirm.login-help .cofirm-head .icon_help_close {
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto
}

.cofirm.login-help .cofirm-cont {
    padding: 0 20px 24px 20px
}

.login-help-content {
    padding: 32px 20px 0 20px
}

.login-help-box {
    font-size: 14px
}

.login-help-box .help-text {
    margin-bottom: 24px;
    color: #b4c0c9
}

.login-help-box .tips-box {
    margin: 12px auto;
    padding: 8px;
    background: #1e2831;
    color: #8b969f;
    border-radius: 4px
}

.login-help-box .btn-content {
    text-align: center
}

.login-help-box .btn-content .g-Btn {
    width: 100%
}

.login-help-box .btn-content .tips {
    margin-top: 8px;
    font-size: 12px;
    color: #b4c0c9
}

.topnav-benefit img {
    width: 100%
}

@media (orientation: portrait) {
    .login-regions {
        max-height:200px
    }
}

@media only screen and (max-width: 414px) {
    .login {
        width:80%
    }
}

.controlpanel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.8);
    min-width: 320px;
    z-index: 997
}

.controlpanel--status {
    position: inherit;
    position: unset;
    background: none;
    pointer-events: none;
    text-align: center
}

.controlpanel--status .controlpanel-head {
    border-bottom: none;
    height: auto;
    padding: 2px 32px;
    display: inline-block;
    background-image: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(9%,rgba(0,0,0,.6)),color-stop(50%,rgba(0,0,0,.6)),color-stop(91%,rgba(0,0,0,.6)),to(transparent));
    background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.6) 9%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.6) 91%,transparent)
}

.controlpanel--status .controlpanel-head>span {
    padding-right: 0
}

.controlpanel--status .controlpanel-head>span:first-of-type {
    padding-right: 16px
}

.controlpanel--status .controlpanel-body {
    background: transparent;
    color: #fff;
    text-shadow: 0 2px 2px rgba(0,0,0,.2);
    z-index: 997
}

.InMobile .controlpanel--status .controlpanel-head {
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.controlpanel-body {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -380px;
    background: #1e2831;
    width: 760px;
    min-width: 320px;
    color: #8b969f;
    border-radius: 0 0 4px 4px;
    z-index: 3
}

.controlpanel-body.controlpanel-body-pc .radio:first-of-type:before {
    display: none
}

.controlpanel-head {
    min-height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid #2f3c47;
    padding: 6px 32px
}

.controlpanel-head>span {
    padding-right: 32px;
    min-width: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.controlpanel-head>span.keyboard-fix {
    margin-left: auto;
    padding-right: 0
}

.controlpanel-head>span.keyboard-fixmap {
    padding-right: 0
}

.controlpanel-head .icon-back2 {
    margin-right: 4px;
    margin-top: -2px
}

.controlpanel-head>.radio:first-of-type {
    padding-right: 16px;
    position: relative;
    margin-right: auto
}

.controlpanel-head>.radio:first-of-type:before {
    position: absolute;
    content: "";
    top: 20%;
    bottom: 20%;
    width: 1px;
    overflow: hidden;
    background: #2f3c47;
    right: 0
}

.controlpanel-con {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.controlpanel-con,.controlpanel-con>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.controlpanel-con>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 112px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 3
}

.controlpanel-con>div>.icon {
    width: 32px;
    height: 32px
}

.controlpanel-con>div>p {
    margin-top: 16px
}

.controlpanel-con>div:hover {
    z-index: 2;
    background: #28333d
}

.controlpanel-con>div:hover .controlpanel-sub {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .1s linear;
    transition: opacity .1s linear
}

.controlpanel-con>div:hover>p {
    color: #03c47e
}

.controlpanel-con>div.disable {
    pointer-events: none;
    opacity: .3
}

.controlpanel-con>div .menu-tips {
    position: absolute;
    left: 50%;
    width: auto;
    white-space: nowrap;
    font-weight: 700;
    top: -3px;
    font-size: 12px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    background: #03c47e;
    border-radius: 4px 4px 4px 0;
    color: #fff;
    padding: 1px 3px 1px 5px
}

.controlpanel-con>li.disable {
    opacity: .3
}

.controlpanel-sub {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility .1s .1s,opacity .1s linear;
    transition: visibility .1s .1s,opacity .1s linear;
    position: absolute;
    width: 100%;
    background: #28333d;
    height: 228px;
    bottom: -228px;
    z-index: 1;
    border-radius: 0 0 4px 4px
}

.controlpanel-progress {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.controlpanel-pcmenu {
    height: 369px;
    bottom: -369px
}

.controlpanel-pcmenu>div {
    padding-top: 8px
}

.controlpanel-pcmenu>div>p {
    font-size: 12px;
    color: #b4c0c9;
    text-align: center
}

.controlpanel-pcmenu ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly
}

.controlpanel-pcmenu ul li {
    min-width: 36%;
    text-align: center;
    margin-top: 16px
}

.controlpanel-pcmenu .g-Btn-white {
    text-transform: capitalize;
    width: 100%;
    height: 25px;
    padding: 0;
    line-height: 23px;
    font-size: 12px
}

.controlpanel-pcmenu .g-Btn-white.on,.controlpanel-pcmenu .g-Btn-white:focus,.controlpanel-pcmenu .g-Btn-white:hover {
    border-color: #03c47e;
    color: #03c47e
}

.controlpanel-guide {
    position: absolute;
    bottom: -70px;
    padding: 14px 32px;
    background: #304051;
    font-size: 12px;
    color: #e7e7e7;
    white-space: nowrap;
    pointer-events: none
}

.controlpanel-guide:before {
    position: absolute;
    top: -18px;
    left: 50%;
    margin-left: -5px;
    content: "";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom: 10px solid #304051
}

.controlpanel-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center
}

.controlpanel-list,.controlpanel-list li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.controlpanel-list li {
    cursor: pointer;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.controlpanel-list li:hover {
    color: #03c47e
}

.controlpanel-list li.on {
    color: #03c47e;
    font-weight: 700
}

.controlpanel-close {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%;
    margin-left: 390px;
    z-index: 2
}

.controlpanel-close .icon {
    display: block
}

.controlpanel-time {
    background: #304051;
    border-radius: 12px;
    color: #d6e0e7;
    padding: 4px 8px;
    margin-left: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer
}

.controlpanel-time>.icon {
    margin-right: 4px
}

.controlpanel-time:hover {
    color: #fff;
    background: #03c47e
}

.controlpanel-time .time-text {
    max-width: 94px;
    font-size: 12px
}

.controlpanel-time .text-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.controlpanel-time .text-row>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.controlpanel-time .text-row>span {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: 4px
}

.controlpanel-time-vip {
    background: -webkit-gradient(linear,left top,right top,color-stop(8%,#445568),color-stop(97%,#304051));
    background: linear-gradient(90deg,#445568 8%,#304051 97%)
}

.controlpanel-time-vip:hover {
    background: #dcb35e
}

.controlpanel-time-vip:hover .time-text {
    color: #fff
}

.controlpanel-time-vip .time-text {
    color: #dcb35e
}

.controlpanel-time-vip .time-text.text-white {
    color: #fff
}

@media only screen and (max-width: 844px) {
    .controlpanel-close {
        top:162px;
        margin-left: 348px
    }
}

@media only screen and (max-width: 768px) {
    .controlpanel-body {
        width:100%;
        left: 0;
        margin-left: 0;
        z-index: 3
    }

    .controlpanel-con>div {
        -webkit-flex-basis: 33.33333333%;
        flex-basis: 33.33333333%;
        height: 80px
    }

    .controlpanel-con>div.inlastOrder {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        order: 3
    }

    .controlpanel-con.controlpanel-con_list1>div.inlastOrder,.controlpanel-con.controlpanel-con_list1>div:last-child,.controlpanel-con.controlpanel-con_list2>div {
        -webkit-flex-basis: 25%;
        flex-basis: 25%
    }

    .controlpanel-close {
        top: 210px;
        margin-left: -16px
    }
}

@media only screen and (max-width: 546px) {
    .controlpanel-head>span {
        padding-right:8px!important
    }
}

@media (orientation: portrait) {
    .InTransLandscape .InMobile .controlpanel--status {
        -webkit-transform:translateZ(1px);
        transform: translateZ(1px)
    }
}

.keylayout {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1
}

.keylayout img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: fill
}

.keylayout.notedit {
    pointer-events: none
}

.keylayout.del .keylayout-del {
    display: block
}

.keylayout input {
    opacity: 0;
    height: 0;
    width: 0
}

.keylayout-pc {
    z-index: 2;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.keylayout-pc>div {
    pointer-events: auto
}

.keylayout-tap {
    text-align: center;
    position: absolute;
    max-width: 36px;
    max-height: 36px;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    background: url(../img/icon_KBS_keymapping_normal.4167b1f8.png) 0 0 no-repeat;
    background-size: 100%
}

.keylayout-tap.on {
    background-image: url(../img/icon_KBS_keymapping_activated.06607a4c.png)!important
}

.keylayout-tap.error {
    background-image: url(../img/icon_KBS_keymapping_keyconflit.d7161387.png)!important
}

.keylayout-tap.disable {
    border-color: #8b969f!important
}

.keylayout-tap:hover {
    background-image: url(../img/icon_KBS_keymapping_hovered.1f409c48.png)
}

.keylayout-tap2 {
    width: 46px;
    height: 46px;
    margin-left: -23px;
    margin-top: -23px;
    font-size: 12px;
    position: absolute;
    background: url(../img/icon_key_normalkey.a9ba857c.png) 0 0 no-repeat;
    background-size: 100%
}

.keylayout-tap2.on {
    background-image: url(../img/icon_key_normalkey_pressed.3860f93e.png)!important
}

.keylayout-tap2.onEdit {
    background-image: url(../img/icon_key_normalkey_selected.e2a458ea.png)!important
}

.keylayout-tap2.inDisplay {
    width: 30px;
    height: 30px;
    position: relative;
    margin: 0
}

.keylayout-tap2.is-rectangle {
    background-image: url(../img/bg_keyboard_hide_nor@3x.8c33d7a0.png)!important
}

.keylayout-tap2.is-rectangle.on {
    background-image: url(../img/bg_keyboard_hide_hover@3x.e9947665.png)!important
}

.keylayout-tap2.is-rectangle.onEdit {
    background-image: url(../img/bg_keyboard_hide_sel@3x.94049c88.png)!important
}

.keylayout-tap2 .keylayout-value span {
    font-weight: 400;
    text-decoration: none!important
}

.keylayout-value {
    width: 100%;
    height: 100%;
    border-radius: 4em;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    white-space: nowrap
}

.keylayout-value p {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

.keylayout-value span {
    font-weight: 700;
    text-transform: capitalize
}

.keylayout-value:hover span {
    text-decoration: underline
}

.keylayout-groups {
    text-align: center;
    margin-top: -16%;
    padding: 0 4px;
    border-radius: 10px;
    border: 1px solid #03c47e;
    overflow: hidden;
    font-size: 10px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#484848),to(#303030));
    background-image: linear-gradient(180deg,#484848,#303030);
    white-space: nowrap;
    -webkit-transform: translate3d(-50%,0,0) scale3d(.8,.8,1);
    transform: translate3d(-50%,0,0) scale3d(.8,.8,1);
    left: 50%
}

.keylayout-del,.keylayout-groups {
    position: absolute;
    box-sizing: border-box
}

.keylayout-del {
    display: none;
    width: 50%;
    height: 50%;
    right: -22.22222222%;
    top: -44.44444444%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(-180deg,#28333d,#4d6275 98%);
    border-radius: 100%;
    cursor: pointer
}

.keylayout-del:after,.keylayout-del:before {
    position: absolute;
    content: "";
    width: 60%;
    left: 20%;
    height: 2px;
    background: #8b969f;
    top: 48%;
    -webkit-transform-origin: center;
    transform-origin: center
}

.keylayout-del:before {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.keylayout-del:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.keylayout-del:hover {
    border: 1.5px solid #fff
}

.keylayout-del:hover:after,.keylayout-del:hover:before {
    background: #fff
}

.keylayout-wheel {
    position: absolute;
    max-width: 132px;
    max-height: 132px;
    background: url(../img/icon_KBS_wheel2.7d176a15.png) 50% no-repeat;
    background-size: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0)
}

.keylayout-wheel.keylayout-wheel_inGamepad {
    max-width: 80px;
    max-height: 126px;
    background-image: url(../img/icon_KBS_controller_leftjoystick.6a967cf6.png)
}

.keylayout-eye {
    position: absolute;
    max-width: 132px;
    max-height: 132px;
    background: url(../img/icon_KBS_perspective.012fc3db.png) 50% no-repeat;
    background-size: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0)
}

.keylayout-eye.keylayout-eye_inGamepad {
    max-width: 80px;
    max-height: 126px;
    background-image: url(../img/icon_KBS_controller_rightjoystick.fd88e9f7.png)
}

.keylayout-tips {
    white-space: nowrap;
    position: absolute;
    -webkit-transform: translate3d(-50%,-200%,0);
    transform: translate3d(-50%,-200%,0);
    background: #304051;
    color: #fff;
    padding: 10px;
    border-radius: 4px
}

.keylayout-ball {
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    border-radius: 100%;
    position: absolute
}

.keylayout-ball.on {
    background: rgba(0,0,0,.5)
}

.keylayout-ball.on .keylayout-ball-pos,.keylayout-ball.on .keylayout-ball-t {
    display: block
}

.keylayout-ball.inEdit {
    background: rgba(0,0,0,.5);
    box-shadow: 0 0 0 1px hsla(0,0%,59.2%,.5)
}

.keylayout-ball.inEdit .keylayout-ball-pos {
    display: block
}

.keylayout-ball.onEdit {
    box-shadow: 0 0 0 1px #03c47e
}

.keylayout-ball.inDisplay {
    background: rgba(0,0,0,.5);
    position: relative;
    margin-left: 0;
    margin-top: 0;
    color: #979797;
    box-shadow: 0 0 0 1px hsla(0,0%,59.2%,.5)
}

.keylayout-ball.inDisplay .keylayout-ball-pos {
    display: block
}

.keylayout-ball-s {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.keylayout-ball-t {
    display: none;
    position: absolute;
    width: 112.8%;
    height: 112.8%;
    top: -6.4%;
    left: -6.4%;
    background: url(../img/gaming_icon_sj_arrow_pressed.212b90a1.png) top no-repeat;
    background-size: 50%
}

.keylayout-ball-pos {
    width: 100%;
    height: 100%;
    display: none
}

.keylayout-ball-g {
    width: 20px;
    height: 20px;
    position: absolute;
    font-size: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.keylayout-ball-g:first-child,.keylayout-ball-g:nth-child(3) {
    left: 50%;
    margin-left: -10px
}

.keylayout-ball-g:nth-child(2),.keylayout-ball-g:nth-child(4) {
    top: 50%;
    margin-top: -10%
}

.keylayout-ball-g:nth-child(2) {
    right: 0
}

.keylayout-ball-g:nth-child(3) {
    bottom: 0
}

.keylayout-position {
    width: 1px;
    height: 1px;
    position: absolute
}

.keylayout-position>div {
    position: absolute;
    width: 26px;
    height: 32px;
    background: url(../img/icon_key_directionkeys.2868739a.png);
    background-size: 100%
}

.keylayout-position>div.on {
    background-image: url(../img/icon_key_directionkeys_pressed.253cfcc9.png)
}

.keylayout-position>div.onEdit {
    background-image: url(../img/icon_key_directionkeys_selected.2ce9b0a1.png)
}

.keylayout-position>div:first-child {
    top: -40px;
    left: -13px
}

.keylayout-position>div:nth-child(2) {
    left: 8px;
    top: -13px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.keylayout-position>div:nth-child(3) {
    top: 8px;
    left: -13px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.keylayout-position>div:nth-child(4) {
    left: -34px;
    top: -13px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.keylayout-position>div span {
    display: none
}

.keylayout-position.keylayout-position-def>div {
    background: url(../img/icon_key_directionkeys_d.887a4c95.png);
    background-size: 100%;
    text-align: center
}

.keylayout-position.keylayout-position-def>div.on {
    background-image: url(../img/icon_key_directionkeys_pressed_d.2c3fdc76.png)
}

.keylayout-position.keylayout-position-def>div.onEdit {
    background-image: url(../img/icon_key_directionkeys_selected_d.ba35e6ea.png)
}

.keylayout-position.keylayout-position-def>div span {
    display: block;
    pointer-events: none;
    font-size: 10px;
    margin: 2px;
    -webkit-transform: scale3d(.8,.8,.8);
    transform: scale3d(.8,.8,.8)
}

.keylayout-position.keylayout-position-def>div:nth-child(2) span {
    -webkit-transform: rotate(-90deg) scale3d(.8,.8,.8);
    transform: rotate(-90deg) scale3d(.8,.8,.8)
}

.keylayout-position.keylayout-position-def>div:nth-child(3) span {
    -webkit-transform: rotate(180deg) scale3d(.8,.8,.8);
    transform: rotate(180deg) scale3d(.8,.8,.8)
}

.keylayout-position.keylayout-position-def>div:nth-child(4) span {
    -webkit-transform: rotate(90deg) scale3d(.8,.8,.8);
    transform: rotate(90deg) scale3d(.8,.8,.8)
}

.keylayout-keyboard {
    width: 100%;
    height: 100%
}

.keylayout-keyboard-con {
    position: absolute;
    left: 0;
    right: 0;
    padding: 6px;
    bottom: 0;
    background: rgba(0,0,0,.5)
}

.keylayout-keyboard-con table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 4px
}

.keylayout-keyboard-con table td,.keylayout-keyboard-con table tr {
    margin: 0;
    padding: 0
}

.keylayout-td,.keylayout-td2 {
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 30px;
    border-radius: 2px;
    background: hsla(0,0%,100%,.16);
    font-size: 12px
}

.keylayout-td2.on,.keylayout-td.on {
    background: hsla(0,0%,100%,.5)
}

.keylayout-td2>p,.keylayout-td>p {
    font-size: 12px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    margin-top: 4px;
    color: #b4c0c9;
    white-space: nowrap
}

.keylayout-td2 {
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.keylayout-td2 .keylayout-td-pos {
    position: relative;
    width: 100px;
    height: 100px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.keylayout-td2.disable {
    pointer-events: none;
    opacity: .6
}

.keylayout-shortcut {
    position: absolute;
    right: 20px;
    bottom: 10px
}

.keylayout-switch {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.keylayout-switch>span {
    margin-left: 6px;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.keylayout-edit {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2
}

.keylayout-edit-head {
    width: 85%;
    padding: 0 24px;
    background: rgba(40,51,61,.95);
    position: absolute;
    left: 7.5%;
    box-sizing: border-box;
    border-radius: 0 0 8px 8px;
    z-index: 2;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out
}

.keylayout-edit-head.on {
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0)
}

.keylayout-edit-head.on .keylayout-up .icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.keylayout-edit-head>header {
    padding: 12px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid #384b60
}

.keylayout-edit-head>header .g-Btn {
    padding: 0 16px;
    font-size: 12px;
    height: 26px;
    line-height: 24px
}

.keylayout-edit-head>header .g-Btn:nth-child(2) {
    margin-left: 12px
}

.keylayout-edit-head>header .g-Btn:nth-child(3) {
    margin-left: auto;
    margin-right: 12px
}

.keylayout-edit-head>header>div:last-child {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px;
    margin-right: -10px;
    margin-left: 8px
}

.keylayout-edit-operation,.keylayout-edit-tips {
    padding: 12px 0;
    font-size: 12px
}

.keylayout-edit-operation {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 30px
}

.keylayout-edit-alias {
    height: 28px;
    width: 90px
}

.keylayout-edit-alias>.input {
    height: 100%;
    padding: 0 8px
}

.keylayout-edit-alias>.input input {
    opacity: 1;
    height: 100%;
    font-size: 12px
}

.keylayout-edit-alias>.input .icon_menu_edit2 {
    margin-right: 4px
}

.keylayout-edit-scale {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-left: 8px
}

.keylayout-edit-scale .progress--cross {
    width: 80px;
    margin: 0 8px
}

.keylayout-edit-scale>p {
    white-space: nowrap
}

.keylayout-edit-scale>p:last-child {
    width: 16px;
    overflow: hidden
}

.keylayout-edit-state,.keylayout-edit-state2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-left: 4px;
    white-space: nowrap
}

.keylayout-edit-state2>div {
    margin-left: 4px;
    position: relative;
    z-index: 9
}

.keylayout-edit-state2>div .icon-me-arrow {
    width: 12px;
    height: 12px
}

.keylayout-edit-state2>div>p {
    width: 90px;
    height: 24px;
    border-radius: 20px;
    color: #03c47e;
    background: #1e2831;
    padding: 0 8px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around
}

.keylayout-edit-state2>div>p .icon-me-arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.keylayout-edit-state2>div>div {
    position: absolute;
    top: 0;
    width: 100%;
    line-height: 24px;
    padding: 2px 8px;
    box-sizing: border-box;
    background: #1e2831;
    border-radius: 8px
}

.keylayout-edit-state2>div>div .icon-me-arrow {
    position: absolute;
    top: 4px;
    right: 4px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.keylayout-edit-state2>div .on {
    color: #03c47e
}

.keylayout-edit-rightBtns {
    margin-left: auto
}

.keylayout-edit-rightBtns,.keylayout-edit-rightBtns>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.keylayout-edit-rightBtns>div {
    margin-left: 8px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #1e2831
}

.keylayout-up {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 40px;
    height: 20px;
    border-radius: 0 0 40px 40px;
    background: rgba(40,51,61,.95);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: -4px
}

.keylayout-contextmenu {
    position: absolute;
    background: #fff;
    border-radius: 8px;
    color: #1e2831;
    margin-left: -24px
}

.keylayout-contextmenu:before {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top: 6px solid #fff;
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    margin-left: -6px;
    margin-top: -2px
}

.keylayout-contextmenu.onBot:before {
    border: 6px solid transparent;
    border-bottom: 6px solid #fff;
    top: -8px
}

.keylayout-contextmenu>div {
    padding: 6px 12px;
    font-size: 12px;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.keylayout-contextmenu>div:first-child {
    border-bottom: 1px solid #e7e7e7;
    white-space: nowrap
}

.keylayout-choice {
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.keylayout-choice .subnavBox h2 {
    font-size: 12px;
    font-weight: 400;
    margin-left: 16px;
    opacity: .5
}

.keylayout-choice .subnavBox h2.on {
    opacity: 1
}

.keylayout-choice .keylayout-td {
    text-transform: capitalize
}

.keylayout-choice-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 54px;
    background: rgba(40,51,61,.9);
    padding: 0 16px;
    font-size: 12px;
    color: #e7e7e7
}

.keylayout-choice-head>div {
    padding: 10px
}

.keylayout-choice-con {
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s
}

.keylayout-choice-con>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.keylayout-choice-con .keylayout-keyboard {
    width: auto;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.keylayout-choice-con .keylayout-keyboard-con {
    position: unset
}

.keylayout-choice-keys {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.keylayout-choice-keys .g-Btn-green {
    margin-right: 10px
}

.keylayout-choice-keys .g-Btn-grey {
    border: 1px solid #28333d;
    pointer-events: none
}

.keylayout-choice-keys .g-Btn {
    font-size: 12px;
    height: 26px;
    line-height: 24px;
    padding: 0 12px
}

.keylayout-choice-hide-btn {
    height: 28px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    line-height: 1;
    margin-left: auto;
    margin-right: 10px;
    background: rgba(134,170,222,.16);
    border: 0
}

.keylayout-choice-hide-btn i {
    margin-right: 4px
}

.keylayout-choice-hide-btn span {
    font-size: 10px;
    color: #e7e7e7;
    text-shadow: 0 2px 4px rgba(0,0,0,.12);
    font-weight: 400
}

.keylayout-edit-group {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.keylayout-edit-group,.keylayout-edit-group li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.keylayout-edit-group li {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background: url(../img/icon_key_normalkey.a9ba857c.png) 0 0 no-repeat;
    background-size: 100%;
    position: relative;
    text-transform: capitalize;
    margin-left: 20px
}

.keylayout-edit-group li.on {
    background-image: url(../img/icon_key_normalkey_selected.e2a458ea.png)
}

.keylayout-edit-group li.off {
    background-image: url(../img/icon_CP_combination_unselected@2x.cbba2ce8.png)
}

.keylayout-edit-group li.del:before {
    content: "";
    width: 12px;
    height: 12\px;
    background: url(../img/icon_CP_delete_white_40@2x.69306c82.png) 0 0 no-repeat;
    background-size: 100%;
    position: absolute;
    top: -2px;
    right: -2px
}

.keylayout-edit-group li:after {
    content: "";
    width: 10px;
    height: 10px;
    background: url(../img/icon_CP_plus_grey_24@2x.1e038743.png) 0 0 no-repeat;
    background-size: 100%;
    position: absolute;
    left: 36px
}

.keylayout-edit-group li:first-of-type {
    margin-left: 0
}

.keylayout-edit-group li:last-child:after {
    display: none
}

.line_height_12 {
    line-height: 12px
}

@media only screen and (max-width: 1024px) {
    .keylayout-tap {
        max-width:4.6875%
    }

    .keylayout-tap .f12 {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@media only screen and (max-width: 760px) {
    .keylayout-tap {
        max-width:4.6875%
    }

    .keylayout-tap span {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
}

@media only screen and (max-width: 540px) {
    .keylayout-tap {
        -webkit-transform:translate3d(-50%,-50%,0) scale(.4);
        transform: translate3d(-50%,-50%,0) scale(.4)
    }
}

@media (orientation: landscape) and (max-width:568px),(orientation:portrait) and (max-height:568px) {
    .keylayout-edit-head {
        width:100%;
        left: 0;
        padding: 0 10px
    }
}

.video {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: absolute;
    margin: 0 auto;
    z-index: 2
}

.video.ingamepad {
    cursor: none
}

.video img {
    width: 100%;
    pointer-events: none
}

.video>img,.video video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%
}

.video video {
    width: 100%;
    max-width: inherit;
    object-fit: cover
}

.video video::-webkit-media-controls-fullscreen-button,.video video::-webkit-media-controls-play-button {
    display: none
}

.video video::-webkit-media-controls-current-time-display,.video video::-webkit-media-controls-timeline {
    display: none
}

.video video::-webkit-media-controls-mute-button,.video video::-webkit-media-controls-time-remaining-display {
    display: none
}

.video video::-webkit-media-controls-toggle-closed-captions-button,.video video::-webkit-media-controls-volume-slider {
    display: none
}

.video video::-internal-media-controls-download-button {
    display: none
}

.video video::-webkit-media-controls-enclosure {
    overflow: hidden
}

.video video::-webkit-media-controls-panel {
    width: -webkit-calc(100% + 30px);
    width: calc(100% + 30px)
}

@media (orientation: landscape) {
    .InMobile .video {
        overflow:hidden
    }

    .InTransPortrait .InMobile .video,.InTransPortrait .InMobile .video video {
        z-index: -1
    }
}

@media (orientation: portrait) {
    .InTransLandscape .InMobile .video,.InTransLandscape .InMobile .video video {
        z-index:-1
    }
}

.videoInput {
    position: absolute;
    opacity: 0;
    top: 0;
    left: -10%;
    pointer-events: none;
    z-index: -1
}

.videoInput input:focus {
    color: transparent;
    caret-color: transparent
}

.videoTip {
    padding: 0 8%;
    position: absolute;
    bottom: -130px;
    left: 0;
    color: #8b969f
}

.videoTip2 {
    text-align: center;
    color: #8b969f
}

@media (orientation: landscape) {
    .videoTip {
        display:none
    }
}

html:-webkit-full-screen .video {
    width: 100%;
    max-width: inherit;
    max-width: unset
}

html:-ms-fullscreen .video {
    width: 100%;
    max-width: inherit;
    max-width: unset
}

html:fullscreen .video {
    width: 100%;
    max-width: inherit;
    max-width: unset
}

html:-webkit-full-screen .video-wrap {
    height: 100%;
    padding-bottom: 0
}

html:-ms-fullscreen .video-wrap {
    height: 100%;
    padding-bottom: 0
}

html:fullscreen .video-wrap {
    height: 100%;
    padding-bottom: 0
}

.FullScreen .video {
    width: 100%;
    max-width: inherit;
    max-width: unset
}

.FullScreen .video-wrap {
    height: 100%;
    padding-bottom: 0
}

.jdebug {
    top: 20px;
    right: 0;
    background: rgba(0,0,0,.5);
    color: #fff
}

.InMobile .redcont,.jdebug {
    position: absolute;
    pointer-events: none
}

.InMobile .redcont {
    width: 100%;
    height: 100%;
    z-index: 99
}

.InMobile .redcont .flyme,.InMobile .redcont .flyme *,.InMobile .redcont .mobilemenu,.InMobile .redcont .mobilemenu * {
    pointer-events: all
}

.InMobile .inIpad .redcont,.InMobile .inIpad .video-redsdk {
    position: fixed;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.video-redsdk,.video-redsdk video {
    width: 100%;
    height: 100%
}

.video-redsdk video {
    max-width: inherit;
    max-width: unset;
    position: relative
}

.video-redsdk #gameBox .toast,.video-redsdk .bottominfo {
    display: none!important
}

.video-redsdk #gameBox video {
    object-fit: contain
}

.video-redsdk #gameBox .keyboard_setting_panel .toast {
    position: fixed;
    top: 200px;
    left: 50%;
    right: auto;
    display: block!important;
    width: auto;
    line-height: 1.5;
    background-color: #304051;
    min-width: 274px;
    max-width: 90%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    padding: 20px;
    border-radius: 4px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    z-index: 999;
    box-shadow: 0 2px 15px 0 rgba(0,0,0,.2);
    margin: 0;
    font-size: 14px;
    color: #fff
}

.video-tips {
    width: 100%;
    height: 100%;
    z-index: 997
}

.cursor,.video-tips {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.cursor {
    z-index: 999;
    height: 32px;
    width: 32px;
    background: url(../img/mouse.440ecdd2.png) 0 0 no-repeat;
    background-size: contain
}

.InMobile .cursor {
    width: 20px;
    height: 20px
}

.progress {
    width: 12px;
    height: 196px;
    position: relative
}

.progress-con {
    width: 4px;
    margin: 0 auto;
    height: 100%;
    border-radius: 2px;
    background: #a5a9ac;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.progress-ing {
    width: 100%;
    bottom: 0
}

.progress-drag,.progress-ing {
    position: absolute;
    background: #03c47e
}

.progress-drag {
    cursor: pointer;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    z-index: 1
}

.progress-drag.on,.progress-drag:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

.progress-tag {
    position: absolute;
    width: 68px;
    height: 36px;
    text-align: center;
    padding-left: 5px;
    line-height: 30px;
    left: 50%;
    margin-left: 10px;
    -webkit-transform: translateY(18px);
    transform: translateY(18px);
    color: #03c47e;
    background: url(../img/icon_controlpanel_indicator.0738e62f.png) 0 0 no-repeat;
    background-size: contain
}

.InTV .progress {
    width: 20px
}

.progress--cross {
    width: 100%;
    height: 12px
}

.progress--cross .progress-con {
    width: 100%;
    height: 4px;
    top: 4px
}

.progress--cross .progress-ing {
    height: 100%
}

.progress--cross .progress-drag {
    -webkit-transform: translateY(2px);
    transform: translateY(2px)
}

.progress--cross .progress-drag.on {
    -webkit-transform: scale(1.5) translateY(2px);
    transform: scale(1.5) translateY(2px)
}

.keyboard .controlpanel-head {
    padding: 0
}

.keyboard .controlpanel-head>span {
    padding: 0 30px;
    position: relative;
    cursor: default
}

.keyboard .controlpanel-head>span:first-of-type {
    margin-right: auto;
    color: #8b969f
}

.keyboard .controlpanel-head>span:first-of-type:before {
    display: none
}

.keyboard .controlpanel-head>span:hover {
    color: #fff;
    cursor: pointer
}

.keyboard .controlpanel-head>span.keyboard-save {
    color: rgba(139,150,159,.5);
    cursor: default
}

.keyboard .controlpanel-head>span.keyboard-save.on {
    color: #03c47e;
    cursor: pointer
}

.keyboard .controlpanel-head>span:before {
    position: absolute;
    content: "";
    top: 20%;
    bottom: 20%;
    width: 1px;
    overflow: hidden;
    background: #2f3c47;
    left: 0
}

.keyboard .controlpanel-con>li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 50%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 112px
}

.keyboard .controlpanel-con>li.full {
    width: 100%
}

.keyboard .controlpanel-con>li.full:before {
    display: none
}

.keyboard .controlpanel-con>li.disable p:first-of-type {
    color: #8b969f!important
}

.keyboard .controlpanel-con>li>div {
    margin-left: 8px
}

.keyboard .controlpanel-con>li p:first-of-type {
    color: #fff
}

.keyboard .controlpanel-con>li:first-of-type {
    position: relative
}

.keyboard .controlpanel-con>li:first-of-type:before {
    position: absolute;
    content: "";
    top: 30%;
    bottom: 30%;
    width: 1px;
    overflow: hidden;
    background: #2f3c47;
    right: 0
}

.keyboard-fold {
    position: absolute;
    width: 26px;
    height: 26px;
    line-height: 20px;
    text-align: center;
    border-radius: 100%;
    top: 126px;
    left: 50%;
    margin-left: -13px;
    z-index: 4;
    cursor: pointer
}

.keyboard-fold.on {
    line-height: 30px;
    top: -10px;
    background: #1e2831
}

.keyboard-fold.on .icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.keyboard-fold.on:hover {
    background: #28333d
}

.keyboard-switch {
    height: 28px;
    border: 1px solid #2f3c47;
    border-radius: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 8px;
    position: relative;
    margin-right: 16px
}

.keyboard-switch span {
    width: 40px;
    color: #fff;
    box-sizing: content-box
}

.keyboard-switch:before {
    position: absolute;
    content: "";
    z-index: -1;
    background: #4d6275;
    border-radius: 12px;
    top: 2px;
    height: 24px;
    width: 64px
}

.keyboard-switch.onKeyboard span {
    text-align: left;
    padding-left: 2px
}

.keyboard-switch.onKeyboard:before {
    left: 2px
}

.keyboard-switch.onGamepad span {
    text-align: right;
    padding-right: 2px
}

.keyboard-switch.onGamepad:before {
    right: 2px
}

.InTV .keyboard-switch {
    font-size: 12px
}

.keyboard-transparency {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative
}

.keyboard-transparency p {
    padding: 0 30px;
    position: relative
}

.keyboard-transparency p:before {
    position: absolute;
    content: "";
    top: 30%;
    bottom: 30%;
    width: 1px;
    overflow: hidden;
    background: #2f3c47;
    left: 0
}

.keyboard-transparency:hover {
    background: #28333d
}

.keyboard-transparency:hover .controlpanel-sub {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .1s linear;
    transition: opacity .1s linear
}

@media only screen and (max-width: 760px) {
    .controlpanel-con>li {
        padding-left:0!important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column
    }

    .controlpanel-con>li>div {
        margin-left: 0!important
    }

    .controlpanel-con>li p {
        margin-top: 8px
    }

    .controlpanel-con>li p:last-child {
        display: none
    }
}

.feedback {
    padding: 64px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.feedback.no {
    padding: 128px 0
}

.feedback>h2 {
    margin-top: 26px;
    font-size: 16px;
    color: #e3e7eb
}

.feedback>p {
    margin-top: 16px;
    color: #8b969f;
    font-size: 14px
}

.feedback>.g-Btn {
    margin-top: 32px;
    height: 40px;
    line-height: 38px;
    border-radius: 40px
}

.feedbackcofrim {
    width: 382px
}

.feedbackcofrim .cofirm-cont {
    padding: 40px 24px
}

.feedback-box>.input {
    margin-top: 16px;
    margin-bottom: 40px
}

.InMobile .feedback {
    padding: 42px 0
}

.InMobile .feedback>.g-Btn {
    font-size: 14px
}

@media only screen and (max-width: 414px) {
    .feedbackcofrim {
        width:90%;
        min-width: 320px
    }
}

@media only screen and (max-height: 500px) {
    .feedback,.feedback.no {
        padding:0
    }
}

.badnetworkconfrim {
    width: 382px
}

.badnetworkconfrim .cofirm-cont {
    padding: 40px 24px
}

.badnetwork-box {
    padding-bottom: 24px
}

.badnetwork-box table {
    width: 100%;
    border-spacing: 0;
    border-top: 1px solid #304051;
    border-left: 1px solid #304051
}

.badnetwork-box td {
    height: 40px;
    text-align: center;
    border-right: 1px solid #304051;
    border-bottom: 1px solid #304051
}

.badnetwork-box td.error {
    color: #e35043
}

.badnetwork-box td.on {
    color: #fff
}

.badnetwork-box tr:nth-of-type(odd) {
    background: rgba(48,64,81,.5)
}

.badnetwork-box p {
    line-height: 2
}

.badnetwork-box>div {
    margin-top: 16px
}

.badnetwork-box>div:first-of-type {
    margin-top: 0
}

@media only screen and (max-width: 414px) {
    .badnetworkconfrim {
        width:90%;
        min-width: 320px
    }
}

.mobilemenu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.8);
    z-index: 997;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.mobilemenu-port .mobilemenu-box {
    min-width: 140px;
    max-width: 180px
}

.mobilemenu-port .mobilemenu-stats {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: auto;
    padding: 10px 0
}

.mobilemenu-port .mobilemenu-list li {
    padding-left: 12%
}

.mobilemenu-port .mobilemenu-list li.mobilemenu-itemother .controlpanel-time p {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    white-space: pre-wrap
}

.mobilemenu-port .mobilemenu-list li.mobilemenu-itemother .icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.mobilemenu-port .mobilemenu-panel {
    width: 130%;
    max-width: 180px
}

.mobilemenu-port .mobilemenu-panel-line2 ul {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 0
}

.mobilemenu-port .mobilemenu-panel-line2 ul li {
    padding: 0 20px;
    margin-top: 10px;
    -webkit-box-flex: unset;
    -webkit-flex: unset;
    flex: unset;
    margin-left: 0
}

.mobilemenu-box {
    min-width: 180px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: #1e2831;
    -webkit-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
    white-space: nowrap
}

.mobilemenu-box,.mobilemenu-box>ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

.mobilemenu-box>ul {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-flex-direction: column;
    flex-direction: column
}

.mobilemenu-box-right {
    left: auto;
    left: unset;
    right: 0
}

.mobilemenu-box-right .mobilemenu-list2 {
    left: inherit;
    left: unset;
    right: 100%;
    border-radius: 4px 0 0 4px
}

.mobilemenu-box-right .mobilemenu-panel {
    left: inherit;
    left: unset;
    right: 100%
}

.mobilemenu-user {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 5px;
    word-wrap: break-word;
    color: #61686f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mobilemenu-stats {
    height: 84px;
    text-align: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.mobilemenu-stats,.mobilemenu-stats span {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.mobilemenu-stats span {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.mobilemenu-list li,.mobilemenu-stats span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #8b969f
}

.mobilemenu-list li {
    padding-left: 18%;
    max-height: 96px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 40px;
    font-size: 12px
}

.mobilemenu-list li .icon_exit {
    width: 20px;
    height: 20px;
    margin-right: 12px
}

.mobilemenu-list .menu-tips {
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -36px;
    white-space: nowrap;
    padding: 0 4px;
    background: #03c47e;
    border-radius: 4px 4px 4px 0;
    font-size: 12px;
    color: #fff;
    z-index: 2
}

.mobilemenu-list .menu-tips.tips-right {
    left: auto;
    right: 0
}

.mobilemenu-list>li {
    position: relative
}

.mobilemenu-list>li.on {
    background: #28333d;
    box-shadow: 0 0 16px 0 rgba(0,0,0,.5)
}

.mobilemenu-list>li.in {
    background: #03c47e;
    text-shadow: 0 2px 4px rgba(0,0,0,.2)
}

.mobilemenu-list>li.in,.mobilemenu-list>li.on {
    color: #fff
}

.mobilemenu-list>li.in .mobilemenu-list2,.mobilemenu-list>li.on .mobilemenu-list2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.mobilemenu-list>li.in>.icon,.mobilemenu-list>li.on>.icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    text-shadow: 0 2px 4px rgba(0,0,0,.2)
}

.mobilemenu-list>li>.icon {
    width: 24px;
    height: 24px;
    margin-right: 15px
}

.mobilemenu-list>li.mobilemenu-itemother {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding-left: 0!important;
    padding-top: 10px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.mobilemenu-list>li.mobilemenu-itemother .controlpanel-time {
    margin: 0 10px;
    margin-top: auto;
    padding-top: 2px;
    padding-bottom: 2px
}

.mobilemenu-tip {
    position: absolute;
    -webkit-transform: scale(.6) translateX(-50%);
    transform: scale(.6) translateX(-50%);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    bottom: 0;
    left: 50%
}

.mobilemenu-list2 {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #28333d;
    border-radius: 0 4px 4px 0
}

.mobilemenu-list2>li {
    position: relative;
    padding: 0 24px;
    white-space: nowrap
}

.mobilemenu-list2>li.in {
    color: #fff!important;
    background: #03c47e;
    text-shadow: 0 2px 4px rgba(0,0,0,.2)
}

.mobilemenu-list2>li>.icon {
    width: 20px;
    height: 20px;
    margin-right: 12px
}

.mobilemenu-list2>li>span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.mobilemenu-list2>li>.icon-live-menu-arrow {
    width: 16px;
    height: 16px;
    margin-left: 20px;
    margin-right: 0
}

.mobilemenu-list2>li .mobilemenu-list2-trg {
    margin-left: 24px;
    font-size: 12px;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    padding: 10px 0
}

.mobilemenu-list2>li .mobilemenu-list2-trg .icon {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    margin-left: 4px
}

.mobilemenu-list2.mobilemenu-gamequality>li {
    text-align: right
}

.mobilemenu-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #28333d;
    left: 100%;
    width: 160%;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.mobilemenu-panel h2 {
    font-weight: 400;
    font-size: 12px;
    white-space: break-spaces
}

.mobilemenu-panel .switch {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.mobilemenu-panel-line {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 0
}

.mobilemenu-panel-line .f10 {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    color: #8b969f;
    white-space: break-spaces
}

.mobilemenu-panel-line .g-Btn-green,.mobilemenu-panel-line .g-Btn-green2 {
    font-size: 12px;
    padding: 0 12px;
    height: 24px;
    line-height: 22px;
    font-weight: 400
}

.mobilemenu-panel-line .g-Btn-green2.off,.mobilemenu-panel-line .g-Btn-green.off {
    color: #8b969f;
    border-color: #8b969f;
    background: #28333d
}

.mobilemenu-panel-line2 {
    padding: 10px 0;
    border-bottom: 1px solid #2f3c47
}

.mobilemenu-panel-line2 ul {
    margin-top: 10px
}

.mobilemenu-panel-line2 ul,.mobilemenu-panel-line2 ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.mobilemenu-panel-line2 ul li {
    border: 1px solid #40505d;
    border-radius: 22px;
    height: 22px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 12px;
    text-align: center;
    color: #b4c0c9;
    font-size: 12px
}

.mobilemenu-panel-line2 ul li:first-of-type {
    margin-left: 0
}

.mobilemenu-panel-line2 ul li.g-editBtn {
    border: none;
    border-radius: 0;
    height: 24px
}

.mobilemenu-panel-line2 ul li.g-editBtn div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #40505d
}

.mobilemenu-panel-line2 ul li.g-editBtn div:first-of-type {
    border-radius: 22px 0 0 22px;
    margin-right: 2px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.mobilemenu-panel-line2 ul li.g-editBtn div:last-child {
    padding: 0 6px;
    border-radius: 0 22px 22px 0
}

.mobilemenu-panel-line2 ul li.on {
    background-color: rgba(3,196,126,.1);
    border-color: #03c47e;
    color: #03c47e
}

.mobilemenu-panel-line2 ul li.on.g-editBtn {
    background-color: transparent
}

.mobilemenu-panel-line2 ul li.on.g-editBtn div {
    border-color: #03c47e;
    background-color: rgba(3,196,126,.1)
}

.mobilemenu-panel-tool ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 12px
}

.mobilemenu-panel-tool ul li {
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(30,40,49,.1);
    border-radius: 8px;
    padding: 0 16px;
    font-size: 12px;
    margin-right: 8px;
    height: 34px;
    line-height: 34px;
    color: #b4c0c9
}

.mobilemenu-panel-tool ul li i {
    width: 18px;
    height: 18px;
    margin-right: 4px
}

.mobilemenu-panel-resource {
    padding: 0;
    max-width: 375px!important;
    width: 375px
}

.mobilemenu-panel-resource::-webkit-scrollbar {
    width: 0
}

.mobilemenu-panel-resource .mobilemenu-panel-resource-enter {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    padding-top: 8px;
    box-sizing: border-box;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(30,40,49,.0001)),to(#1e2831));
    background: linear-gradient(180deg,rgba(30,40,49,.0001),#1e2831);
    -webkit-transform: translateZ(2px);
    transform: translateZ(2px)
}

.mobilemenu-panel-resource .mobilemenu-panel-resource-enter button {
    padding: 0;
    width: 100px;
    height: 28px;
    border: 0;
    font-size: 12px;
    line-height: 28px;
    display: block;
    margin: 0 auto
}

.InMobile .mobilemenu-stats {
    height: 40px;
    white-space: nowrap
}

.InMobile .mobilemenu-list {
    overflow: auto
}

.InMobile .mobilemenu-list::-webkit-scrollbar {
    display: none
}

.InMobile .mobilemenu-list li {
    max-height: 72px
}

.InMobile .mobilemenu-list li.mobilemenu-itemother {
    max-height: none;
    min-height: 72px;
    padding-top: 0;
    border-top: 1px solid #2f3c47;
    margin: 0 8px
}

.InMobile .mobilemenu-list>li {
    box-shadow: inherit;
    box-shadow: unset
}

.InMobile .mobilemenu-list>li.in {
    background: #28333d;
    color: #04ba66
}

.InMobile .mobilemenu-list>li.in>.icon,.InMobile .mobilemenu-list>li.on>.icon {
    -webkit-transform: inherit;
    transform: inherit;
    -webkit-transform: unset;
    transform: unset
}

.InMobile .mobilemenu-list>li>.icon {
    width: 20px;
    height: 20px;
    margin-right: 12px
}

.InMobile .mobilemenu-gamequality li.on {
    color: #04ba66
}

.InMobile .mobilemenu-scroll-shadow {
    position: relative;
    overflow: initial
}

.InMobile .mobilemenu-scroll-shadow.mobilemenu-list:before,.InMobile .mobilemenu-scroll-shadow.mobilemenu-stats:before {
    content: "";
    position: absolute;
    left: 8px;
    width: -webkit-calc(100% - 16px);
    width: calc(100% - 16px);
    height: 24px;
    background-size: 100%;
    pointer-events: none;
    background-position: bottom;
    background-repeat: no-repeat;
    opacity: 0
}

.InMobile .mobilemenu-scroll-shadow.mobilemenu-list:before {
    top: -24px;
    background-image: url(../img/arrow.3ac4529a.png)
}

.InMobile .mobilemenu-scroll-shadow.mobilemenu-stats:before {
    z-index: 1;
    bottom: -25px;
    background-image: url(../img/pic_shadow_CP_menu_top.1e006d13.png)
}

.InMobile .mobilemenu-scroll-shadow.shadowOpacity:before {
    opacity: 1
}

@media (orientation: landscape) and (max-height:374px),(orientation:portrait) and (max-width:374px) {
    .mobilemenu-panel {
        max-width:260px
    }

    .mobilemenu-port .mobilemenu-box {
        min-width: 120px;
        max-width: 140px
    }

    .mobilemenu-port .mobilemenu-panel {
        max-width: 160px;
        padding: 16px 8px
    }

    .mobilemenu-port .mobilemenu-list li {
        padding-left: 8%
    }

    .mobilemenu-port .mobilemenu-list li .icon {
        margin-right: 4px
    }

    .mobilemenu-port .mobilemenu-panel-line2 ul li {
        padding: 0 14px
    }

    .mobilemenu-is-port .cloudmobile-control {
        max-width: 300px!important
    }

    .mobilemenu-not-port .cloudmobile-control {
        max-width: 440px
    }
}

.mobilemenu-cloudmobile.mobilemenu-has-options .mobilemenu-box {
    border-radius: 8px 0 0 8px
}

.mobilemenu-cloudmobile.mobilemenu-has-options .mobilemenu-box.mobilemenu-box-right {
    border-radius: 0 8px 8px 0
}

.mobilemenu-cloudmobile.mobilemenu-is-port .mobilemenu-box {
    top: 138px
}

.mobilemenu-cloudmobile .mobilemenu-box {
    top: 86px;
    left: 10px;
    bottom: 10px;
    border-radius: 8px
}

.mobilemenu-cloudmobile .mobilemenu-box.mobilemenu-box-right {
    left: auto;
    right: 10px
}

.mobilemenu-cloudmobile .mobilemenu-box.mobilemenu-box-right .cloudmobile-control {
    right: 0;
    left: auto
}

.mobilemenu-cloudmobile .mobilemenu-box.mobilemenu-box-right .mobilemenu-panel {
    border-radius: 8px 0 0 8px
}

.mobilemenu-cloudmobile .mobilemenu-box.mobilemenu-box-right .mobilemenu-list>li:first-child.in {
    border-top-left-radius: 0;
    border-top-right-radius: 8px
}

.mobilemenu-cloudmobile .mobilemenu-panel {
    border-radius: 0 8px 8px 0
}

.mobilemenu-cloudmobile .mobilemenu-list>li:first-child.in {
    border-top-left-radius: 8px
}

.cloudmobile-control {
    position: absolute;
    left: 0;
    background: #1e2831;
    border-radius: 8px
}

.mobilemenu-is-port .cloudmobile-control {
    top: -128px;
    width: 230%;
    max-width: 330px;
    height: 118px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch
}

.mobilemenu-is-port .cloudmobile-control>ul {
    padding: 0 24px
}

.mobilemenu-is-port .cloudmobile-control>ul li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    border-radius: 20px
}

.mobilemenu-is-port .cloudmobile-control>ul li span {
    margin-top: 5px
}

.mobilemenu-not-port .cloudmobile-control {
    top: -76px;
    width: 260%;
    height: 66px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.mobilemenu-not-port .cloudmobile-control .cloudmobile-status {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mobilemenu-not-port .cloudmobile-control>ul {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding-right: 16px
}

.mobilemenu-not-port .cloudmobile-control>ul li {
    width: 90px;
    height: 42px;
    margin-right: 10px;
    border-radius: 14px
}

.mobilemenu-not-port .cloudmobile-control>ul li:last-child {
    margin-right: 0
}

.mobilemenu-not-port .cloudmobile-control>ul li span {
    margin-left: 2px
}

.cloudmobile-control .cloudmobile-status {
    line-height: 40px;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: #8b969f
}

.cloudmobile-control>ul {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.cloudmobile-control>ul,.cloudmobile-control>ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.cloudmobile-control>ul li {
    width: 64px;
    height: 64px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: #28333d
}

.cloudmobile-control>ul li span {
    line-height: 20px;
    font-size: 14px;
    color: #8b969f
}

.cloudmobile-control-pc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -74px;
    z-index: 1;
    height: 66px;
    background: #1e2831;
    border-radius: 4px;
    padding: 0 26px
}

.cloudmobile-control-pc,.cloudmobile-control-pc>ul,.cloudmobile-control-pc>ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.cloudmobile-control-pc>ul li {
    width: 100px;
    height: 42px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: #28333d;
    margin-right: 10px;
    border-radius: 14px
}

.cloudmobile-control-pc>ul li:hover {
    background: #304051;
    cursor: pointer
}

.cloudmobile-control-pc>ul li:last-child {
    margin-right: 0
}

.cloudmobile-control-pc>ul li span {
    margin-left: 2px;
    line-height: 20px;
    font-size: 14px;
    color: #8b969f
}

.fadein {
    -webkit-animation: animate_in .45s;
    animation: animate_in .45s
}

.fadeout {
    -webkit-animation: animate_out .25s;
    animation: animate_out .25s;
    opacity: 0
}

@-webkit-keyframes animate_in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes animate_in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes animate_out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes animate_out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.animated {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .1s;
    animation-duration: .1s
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: .1s;
    animation-duration: .1s
}

@-webkit-keyframes slideInLeft2 {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInLeft2 {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInLeft2 {
    -webkit-animation-name: slideInLeft2;
    animation-name: slideInLeft2
}

@-webkit-keyframes slideInRight2 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}

@keyframes slideInRight2 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}

.slideInRight2 {
    -webkit-animation-name: slideInRight2;
    animation-name: slideInRight2
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInBottom {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInBottom {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInBottom {
    -webkit-animation-name: slideInBottom;
    animation-name: slideInBottom
}

@-webkit-keyframes shake {
    0%,to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    20% {
        -webkit-transform: translate3d(30px,0,0);
        transform: translate3d(30px,0,0)
    }

    40% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    50% {
        -webkit-transform: translate3d(20px,0,0);
        transform: translate3d(20px,0,0)
    }

    60% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    70% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    80% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes shake {
    0%,to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    20% {
        -webkit-transform: translate3d(30px,0,0);
        transform: translate3d(30px,0,0)
    }

    40% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    50% {
        -webkit-transform: translate3d(20px,0,0);
        transform: translate3d(20px,0,0)
    }

    60% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    70% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    80% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

.animate-jump {
    -webkit-animation: jump 2.5s ease 0s infinite normal;
    animation: jump 2.5s ease 0s infinite normal
}

@-webkit-keyframes jump {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    10% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    20% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes jump {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    10% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    20% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.animation-filter {
    -webkit-animation: an-filter 1s linear 0s normal;
    animation: an-filter 1s linear 0s normal
}

@-webkit-keyframes an-filter {
    0% {
        -webkit-filter: blur(15px);
        filter: blur(15px)
    }

    to {
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

@keyframes an-filter {
    0% {
        -webkit-filter: blur(15px);
        filter: blur(15px)
    }

    to {
        -webkit-filter: blur(0);
        filter: blur(0)
    }
}

.animation-scale {
    -webkit-animation: an-scale .3s linear normal;
    animation: an-scale .3s linear normal;
    -webkit-transform-origin: top right;
    transform-origin: top right
}

@-webkit-keyframes an-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes an-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.animation-scale2 {
    -webkit-animation: an-scale .3s linear normal;
    animation: an-scale .3s linear normal;
    -webkit-transform-origin: top center;
    transform-origin: top center
}

@-webkit-keyframes an-scale2 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes an-scale2 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.animation-playing {
    -webkit-animation: an-playing 1.5s ease normal;
    animation: an-playing 1.5s ease normal
}

.animation-playing:hover {
    background: #03c47e!important
}

@-webkit-keyframes an-playing {
    15% {
        color: hsla(0,0%,100%,0)
    }

    40% {
        width: 48px;
        padding: 0
    }

    60% {
        width: 48px;
        padding: 0
    }

    70% {
        color: hsla(0,0%,100%,0)
    }

    to {
        width: 100%;
        color: #fff
    }
}

@keyframes an-playing {
    15% {
        color: hsla(0,0%,100%,0)
    }

    40% {
        width: 48px;
        padding: 0
    }

    60% {
        width: 48px;
        padding: 0
    }

    70% {
        color: hsla(0,0%,100%,0)
    }

    to {
        width: 100%;
        color: #fff
    }
}

.sk-circle {
    width: 120px;
    height: 120px;
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-transform: translate3d(-50%,-50%,0) scale(1);
    transform: translate3d(-50%,-50%,0) scale(1)
}

.sk-circle2 {
    width: 80px;
    height: 80px;
    position: fixed
}

.sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.sk-circle .sk-child:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #03c47e;
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s ease-in-out infinite both;
    animation: sk-circleBounceDelay 1.2s ease-in-out infinite both
}

.sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

.sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

.sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg)
}

.sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg)
}

.sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg)
}

.sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg)
}

.sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg)
}

.sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg)
}

.sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

.sk-circle .sk-circle4:before {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}

.sk-circle .sk-circle5:before {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

.sk-circle .sk-circle6:before {
    -webkit-animation-delay: -.7s;
    animation-delay: -.7s
}

.sk-circle .sk-circle7:before {
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}

.sk-circle .sk-circle8:before {
    -webkit-animation-delay: -.5s;
    animation-delay: -.5s
}

.sk-circle .sk-circle9:before {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

.sk-circle .sk-circle10:before {
    -webkit-animation-delay: -.3s;
    animation-delay: -.3s
}

.sk-circle .sk-circle11:before {
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

.sk-circle .sk-circle12:before {
    -webkit-animation-delay: -.1s;
    animation-delay: -.1s
}

@-webkit-keyframes sk-circleBounceDelay {
    0%,80%,to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes sk-circleBounceDelay {
    0%,80%,to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes bounceIn {
    50% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@-webkit-keyframes bounceOut {
    to {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }
}

@keyframes bounceOut {
    to {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }
}

@-webkit-keyframes flash {
    0%,50%,to {
        opacity: 0
    }

    25%,75% {
        opacity: 1
    }
}

@keyframes flash {
    0%,50%,to {
        opacity: 0
    }

    25%,75% {
        opacity: 1
    }
}

@-webkit-keyframes listloader-fade-in-out {
    0% {
        opacity: .9
    }

    20% {
        opacity: .4
    }

    40% {
        opacity: .9
    }
}

@keyframes listloader-fade-in-out {
    0% {
        opacity: .9
    }

    20% {
        opacity: .4
    }

    40% {
        opacity: .9
    }
}

.marquee {
    -webkit-animation: marquee 6s linear 4s;
    animation: marquee 6s linear 4s
}

@-webkit-keyframes marquee {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes marquee {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.animation-bounceIn {
    -webkit-animation: bounceIn .75s;
    animation: bounceIn .75s
}

@keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.animation-swing {
    -webkit-animation: swing .75s;
    animation: swing .75s
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.animation-swing-delay {
    -webkit-animation: swing-delay 2.75s;
    animation: swing-delay 2.75s
}

@-webkit-keyframes swing-delay {
    0%,to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    10% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    20% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    30% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    40% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes swing-delay {
    0%,to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    10% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    20% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    30% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    40% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-webkit-keyframes bgFadeIn {
    0% {
        background-color: transparent
    }

    to {
        background-color: rgba(0,0,0,.7)
    }
}

@keyframes bgFadeIn {
    0% {
        background-color: transparent
    }

    to {
        background-color: rgba(0,0,0,.7)
    }
}

@-webkit-keyframes slideInTop {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInTop {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInTop {
    -webkit-animation-name: slideInTop;
    animation-name: slideInTop
}

@-webkit-keyframes slideInBot {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}

@keyframes slideInBot {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}

.slideInBot {
    -webkit-animation-name: slideInBot;
    animation-name: slideInBot
}

@-webkit-keyframes alarmClock {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    10% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    20% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    28% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    36% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    42% {
        -webkit-transform: rotate(-16deg);
        transform: rotate(-16deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    48% {
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    52% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    56% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }
}

@keyframes alarmClock {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    10% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    20% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    28% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    36% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    42% {
        -webkit-transform: rotate(-16deg);
        transform: rotate(-16deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    48% {
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    52% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    56% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition-timing-function: cubic-bezier(.755,.5,.855,.06);
        transition-timing-function: cubic-bezier(.755,.5,.855,.06)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }
}

.alarmClock {
    -webkit-animation-name: alarmClock;
    animation-name: alarmClock
}

@-webkit-keyframes bounce-down {
    25% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }

    50%,to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    75% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px)
    }
}

@keyframes bounce-down {
    25% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }

    50%,to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    75% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px)
    }
}

.a-rotate {
    -webkit-animation: animate_rotate 1s linear infinite;
    animation: animate_rotate 1s linear infinite
}

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

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

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

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.preloadingApp {
    width: 1440px;
    height: 720px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -720px;
    margin-top: -360px;
    border-radius: 8px;
    background: rgba(40,51,61,.9);
    position: relative;
    font-size: 30px!important
}

.preloadingApp2 {
    height: 200px;
    margin-top: -100px
}

.preloadingApp2 .preloadingAppBox {
    background: none
}

.preloadingApp2 .preloadingAppBox p {
    position: unset;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.preloadingAppBad,.preloadingAppBox {
    height: 100%
}

.preloadingAppBox {
    background: url(../img/tvimg_loading_controllerguide.c5d0a8db.png) 85% 25% no-repeat;
    background-size: 963px 534px
}

.preloadingAppBox.inHS {
    background: url(../img/tvimg_loading_controllerguide_phone@2x.d2c0473f.png) 0 0 no-repeat;
    background-size: contain
}

.preloadingAppBox p {
    position: absolute;
    bottom: 9%;
    width: 100%;
    text-align: center;
    color: #8b969f
}

.preloadingAppBox p span {
    color: #ee6723
}

.preloadingAppBox p span.red {
    color: #03c47e
}

.preloadingAppBad {
    color: #fff
}

.preloadingAppBad .cofirm-head {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start
}

.preloadingAppBad .cofirm-head h2 {
    padding: 30px 0;
    text-align: left;
    padding-left: 240px
}

.preloadingAppBad .cofirm-head .icon {
    width: 336px;
    height: 224px;
    left: 43px
}

.preloadingAppBad .badnetwork-box {
    padding: 4%;
    color: #8b969f;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.preloadingAppBad .badnetwork-box td {
    height: 112px;
    width: 25%
}

.preloadingAppBad .badnetwork-box>div {
    margin-top: 0
}

.preloadingAppBad .badnetwork-box>div:first-of-type {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-right: 5.3%
}

.preloadingAppBad .badnetwork-box>div:last-of-type {
    width: 44%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    color: #fff;
    font-size: 26px!important
}

.preloadingAppBad .tvrealname-box {
    padding: 4%;
    color: #8b969f;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-bottom: 60px
}

.preloadingAppBad .tvrealname-box .tvrealname-qr .qrcodebox {
    width: 50%;
    margin: 0 auto;
    font-size: 26px!important
}

.preloadingAppBad .tvrealname-box .tvrealname-qr .qrcodebox p {
    padding: 0 20px;
    text-align: left
}

.preloadingAppBad .tvrealname-box>div {
    margin-top: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.preloadingAppBad .tvrealname-box>div:last-of-type {
    color: #fff;
    font-size: 26px!important
}

.preloadingAppBad-btns {
    text-align: center
}

.preloadingAppBad-btns a {
    font-size: 30px!important;
    width: 240px;
    height: 72px!important;
    line-height: 72px!important;
    height: 50px;
    line-height: 50px;
    padding-left: 60PX;
    padding-right: 60PX;
    border-radius: 50px;
    margin: 0 3%
}

.start {
    opacity: 0;
    position: absolute;
    top: 0;
    top: -webkit-calc(env(safe-area-inset-top));
    top: calc(env(safe-area-inset-top));
    left: 0;
    padding-left: 20px;
    padding-right: 80px;
    height: 60px;
    border-radius: 0 0 120px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-image: linear-gradient(269deg,transparent,rgba(3,196,126,.36) 44%,#03c47e 98%);
    z-index: 999;
    -webkit-animation: flash 8s ease-in-out;
    animation: flash 8s ease-in-out;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    pointer-events: none
}

.start .icon {
    margin: 0 6px
}

.start.start-center {
    white-space: nowrap;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0) scale(1);
    transform: translate3d(-50%,0,0) scale(1);
    border-radius: 0;
    padding-left: 80px;
    background-image: linear-gradient(86deg,rgba(3,196,126,0),rgba(3,196,126,.53) 20%,rgba(3,196,126,.8) 50%,rgba(3,196,126,.53) 77%,rgba(3,196,126,0) 98%)
}

.start.start-one {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.start.start-six {
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3
}

.start.start-time {
    opacity: 1;
    -webkit-animation: animate_out 2s ease-in-out 3s;
    animation: animate_out 2s ease-in-out 3s
}

.start.start-resource {
    opacity: 1;
    pointer-events: all;
    -webkit-animation: animate_out 2s ease-in-out 5s;
    animation: animate_out 2s ease-in-out 5s
}

.start.start-resource button {
    width: 68px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 20px;
    color: #03c47e;
    font-size: 12px;
    background-color: #fff;
    border: 0;
    padding: 0;
    font-weight: 700;
    margin-left: 8px
}

.start.start-countdown {
    -webkit-animation: none;
    animation: none;
    opacity: 1;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.start.start-countdown .g-Btn {
    margin-top: 6px;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.3);
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    pointer-events: auto
}

@media only screen and (max-width: 600px) {
    .start.start-countdown,.start.start-time {
        width:80%;
        height: auto;
        padding: 16px 20px;
        white-space: normal
    }
}

.flyme {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 989;
    opacity: .6;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: flyme_in .3s;
    animation: flyme_in .3s
}

.flyme.on {
    opacity: 1
}

.flyme.on .flyme-out {
    -webkit-transform: scale3d(2,2,1);
    transform: scale3d(2,2,1)
}

.flyme.move {
    -webkit-transition: left .5s,top .5s;
    transition: left .5s,top .5s
}

.flyme.new:not(.g-point-red):before {
    content: "";
    position: absolute;
    top: -20px;
    left: 100%;
    width: 36px;
    height: 20px;
    background-image: url(../img/icon_tag_new.20bf8419.png);
    background-size: 100% 100%
}

.flyme.new.right:before {
    left: auto;
    right: 100%;
    background-image: url(../img/icon_tag_new_right.3eddb3aa.png)
}

.flyme.new[data-text]:before {
    content: attr(data-text);
    text-align: center;
    position: absolute;
    top: -10px;
    left: 75%;
    width: auto;
    height: 20px;
    line-height: 20px;
    background: #04ba66;
    border-radius: 4px 4px 4px 0;
    white-space: nowrap;
    word-break: keep-all;
    font-size: 12px;
    padding: 0 4px
}

.flyme.new[data-text].right:before {
    left: auto;
    right: 100%;
    border-radius: 6px 6px 0 6px
}

.flyme-in,.flyme-out {
    border-radius: 100%
}

.flyme-in {
    width: 20px;
    height: 20px;
    background: #04ba66;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px;
    z-index: 999;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.flyme-out {
    width: 100%;
    height: 100%;
    background: #1e2831
}

@-webkit-keyframes flyme_in {
    0% {
        opacity: 0
    }

    to {
        opacity: .6
    }
}

@keyframes flyme_in {
    0% {
        opacity: 0
    }

    to {
        opacity: .6
    }
}

.botnav {
    height: 56px;
    height: -webkit-calc(56px + constant(safe-area-inset-top));
    height: calc(56px + constant(safe-area-inset-top));
    height: -webkit-calc(56px + env(safe-area-inset-top));
    height: calc(56px + env(safe-area-inset-top))
}

.botnav .botnav-fixed {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 56px;
    background: #1e2831;
    box-shadow: 0 -1px 0 rgba(0,0,0,.5);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom)
}

.botnav .botnav-fixed,.botnav .botnav-fixed>a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.botnav .botnav-fixed>a {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    text-decoration: none;
    color: #8b969f
}

.botnav .botnav-fixed>a.active {
    color: #03c47e
}

.botnav .botnav-fixed>a.new i {
    position: relative
}

.botnav .botnav-fixed>a.new i:before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e35043
}

.botnav .botnav-fixed>a .growthdata {
    position: absolute;
    height: 15px;
    font-size: 11px;
    color: #f4b560;
    font-weight: 700;
    background: hsla(0,0%,100%,.1);
    border-radius: 7px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    top: 2px;
    left: 52%;
    margin: 0;
    padding: 0 4px
}

.botnav .botnav-fixed>a .growthdata i:before {
    display: none
}

.botnav .botnav-fixed>a .growthdata i.icon {
    width: 12px;
    height: 12px;
    margin-top: 3px
}

.botnav .botnav-fixed>a .growthdata i:nth-child(2) {
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

.botnav .botnav-fixed .icon {
    margin-bottom: 2px
}

@media only screen and (max-height: 720px) {
    .botnav {
        height:46px;
        height: -webkit-calc(46px + constant(safe-area-inset-top));
        height: calc(46px + constant(safe-area-inset-top));
        height: -webkit-calc(46px + env(safe-area-inset-top));
        height: calc(46px + env(safe-area-inset-top))
    }

    .botnav .botnav-fixed {
        height: 46px
    }

    .botnav .botnav-fixed .icon {
        width: 22px;
        height: 22px
    }

    .botnav .botnav-fixed span {
        margin-top: -2px
    }

    .livetips {
        bottom: 37px!important
    }
}

.livetips {
    width: 178px;
    height: 40px;
    position: fixed;
    bottom: 46px;
    left: 40%;
    z-index: 1;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    background: url(../img/tag_promotion@2x.19ced2d9.png) no-repeat;
    background-size: 100% 100%
}

.livetips.livetips-nologin {
    left: 52%
}

.pay {
    width: 768px;
    max-width: 90%
}

.pay .cofirm-head {
    -webkit-box-pack: left;
    -webkit-justify-content: left;
    justify-content: left
}

.pay .cofirm-head>h2 {
    text-align: left;
    margin-left: 100px;
    font-weight: 800
}

.pay .cofirm-cont {
    position: relative;
    padding: 0;
    overflow: hidden
}

.paybox {
    padding: 24px;
    padding-bottom: 0
}

.paybox .user-status-m {
    margin: 0
}

.paybox.paypopup {
    padding: 5px 16px 0
}

.paybox.paypopup .pay-logs {
    border: none;
    font-size: 12px
}

.paybox.paypopup .pay-banner {
    max-width: 100%
}

.pay-users {
    margin-bottom: 20px
}

.pay-title,.pay-users {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-title {
    margin-top: 20px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #b6b6b6
}

.pay-title strong {
    font-weight: 400
}

.pay-title span {
    font-size: 12px;
    margin-left: auto
}

.pay-title span .icon {
    width: 16px;
    height: 16px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-left: -4px;
    margin-top: -1px
}

.pay-title sub {
    bottom: 0
}

.pay-title i {
    font-style: normal
}

.pay-logs {
    margin-left: auto;
    width: 80px;
    height: 24px;
    border: 1px solid #8b969f;
    border-radius: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #8b969f;
    cursor: pointer
}

.pay-logs .icon {
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-left: -9px
}

.pay-logs:hover {
    color: #fff;
    border-color: #fff
}

.pay-logs:hover .icon {
    background-image: url(../img/back_hover.18ccb83f.png)
}

.text-m {
    text-align: center
}

.pay-historys {
    position: absolute;
    width: 55%!important;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
    padding-left: 45%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.pay-historys,.pay-historys .nav-closemenu {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.pay-historys .nav-closemenu {
    background: #28333d
}

.pay-historys .nav-closemenu>nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.pay-historys .nav-closemenu>nav div {
    font-size: 14px;
    margin: 0 12px;
    cursor: pointer
}

.pay-historys .nav-closemenu>nav div.on {
    color: #fff;
    font-weight: 700;
    font-size: 16px
}

.pay-historycon {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    background: #28333d;
    overflow-y: auto
}

.pay-conten {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.pay-cards {
    -webkit-box-flex: 422;
    -webkit-flex: 422;
    flex: 422;
    border-right: 1px solid #182128;
    position: relative
}

.pay-cards>div {
    padding-right: 16px;
    height: 340px;
    overflow-y: auto
}

.pay-cards.more:before {
    pointer-events: none;
    content: "";
    position: absolute;
    height: 70px;
    width: 100%;
    bottom: 0;
    z-index: 99;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,0)),to(#28333d));
    background: linear-gradient(180deg,rgba(40,51,61,0),#28333d)
}

.pay-cards.more>div {
    padding-bottom: 20px;
    box-sizing: border-box
}

.pay-cards_pc {
    padding-right: 24px;
    padding-bottom: 8px
}

.pay-cards_pc>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-right: 0;
    height: 309px;
    overflow: auto
}

.pay-cards_pc .pc-pccard>div:first-child:hover {
    background: rgba(3,196,126,.07);
    border-color: #04c47f
}

.pay-qr {
    -webkit-box-flex: 326;
    -webkit-flex: 326;
    flex: 326;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.pay-qr .qrcodebox {
    width: 68%;
    background: rgba(3,196,126,.04);
    padding-bottom: 4.30107527%;
    color: #fff
}

.pay-qr .qrcodebox .qrcode-img {
    padding: 8.60215054%;
    padding-bottom: 4.30107527%;
    position: relative;
    min-height: 190px
}

.pay-qr .icon {
    width: 16px;
    height: 16px;
    margin-right: 6px
}

.pay-qr span {
    margin-left: 4px;
    font-weight: 700
}

.pay-qr>p {
    margin-top: 16px
}

.pay-qr>p a {
    color: #8b969f;
    margin: 0 4px;
    text-decoration: none
}

.pay-qr>p a:hover {
    color: #fff
}

.pay-qr .qrcode-text {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 24px
}

.pay-card-tips {
    margin-top: 4px;
    line-height: 17px;
    font-size: 12px;
    color: #939393
}

.pay-card {
    height: 88px;
    position: relative;
    background-image: linear-gradient(135deg,#888b99,#4d5061);
    margin-top: 16px;
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    color: #fff
}

.pay-card.on {
    background: url(../img/pic_vip_cardLight.f7fc4345.png) 100% 0 no-repeat,linear-gradient(-45deg,#177251,#5ecfa6);
    background-size: contain
}

.pay-card.on .pay-card-money {
    background-image: linear-gradient(-45deg,#177251,#5ecfa6)
}

.pay-card .g-tag {
    position: absolute;
    right: 0;
    top: -4px;
    font-weight: 700
}

.pay-card.pay-limit-vip.on .icon-paycheck {
    background-image: url(../img/icon_plus_selected2@2x.3cbcddd8.png)
}

.pay-card.pay-limit-vip .pay-mobilecard p {
    color: #131a3b
}

.pay-card.pay-limit-vip .pay-card-money {
    background: none;
    color: #131a3b
}

.pay-card.pay-limit-vip .originalPrice,.pay-card.pay-limit-vip .pay-card-con,.pay-card.pay-limit-vip .pay-card-con>h2,.pay-card.pay-limit-vip .pay-moilecard-money {
    color: #131a3b
}

.pay-card.pay-night-free .pay-card-money {
    background-image: none!important
}

.pay-card-money {
    -webkit-box-flex: 104;
    -webkit-flex: 104;
    flex: 104;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-image: linear-gradient(135deg,#888b99,#4d5061);
    border-radius: 4px 0 0 4px
}

.pay-card-money>span {
    margin-left: 4px;
    font-weight: 700;
    margin-bottom: 5px
}

.pay-card-money>b {
    margin-top: 10px
}

.pay-card-money>p {
    position: absolute;
    bottom: 10px
}

.pay-card-money .originalPrice {
    text-decoration: line-through;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    color: hsla(0,0%,100%,.7);
    font-weight: 400
}

.pay-card-con {
    -webkit-box-flex: 206;
    -webkit-flex: 206;
    flex: 206;
    padding-left: 16px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.pay-card-con,.pay-card-con>h2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.pay-card-con>h2 {
    margin-bottom: 8px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-card-con>h2.mb {
    margin-bottom: 2px
}

.pay-card-check {
    -webkit-box-flex: 56;
    -webkit-flex: 56;
    flex: 56
}

.pay-card-check,.pay-card-tag {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-card-tag {
    margin-left: 8px;
    padding: 0 2px;
    height: 15px;
    background-image: linear-gradient(212deg,#383939,#676767);
    border-radius: 15px;
    color: #e2bb7c
}

.pay-card-tag span {
    font-size: 12px;
    -webkit-transform: scale(.83);
    transform: scale(.83)
}

.pay-privileges {
    min-height: 100px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 20px;
    background: #1e2831;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    position: relative
}

.pay-privileges,.pay-privilegescon {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.pay-privilegescon {
    width: 100%
}

.pay-privilege-left,.pay-privilege-right {
    position: absolute;
    width: 16px;
    height: 100%;
    background: #1e2831;
    box-shadow: -2px 0 11px 0 rgba(26,26,26,.49);
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer;
    z-index: 99
}

.pay-privilege-left>.icon,.pay-privilege-right>.icon {
    width: 12px;
    height: 12px
}

.pay-privilege-left {
    left: 0
}

.pay-privilege-left>.icon {
    margin-left: 2px
}

.pay-privilege-right {
    right: 0
}

.pay-privilege-right>.icon {
    margin-right: 2px;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.pay-privilege {
    width: 25%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-privilege>div {
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-privilege>div .icon {
    margin-right: 8px;
    min-width: 28px;
    width: 28px;
    height: 28px
}

.pay-privilege>div>div>p {
    color: #939393;
    font-size: 12px
}

.pay-privilege>div>div>p:first-of-type {
    font-size: 14px;
    color: #b6b6b6;
    margin-bottom: 4px
}

.pay-privilege_pc {
    width: 33.33%
}

.pay-privilege_pc:nth-child(3n+1)>div:before {
    display: none
}

.pay-privilege_pc>div {
    position: relative;
    padding-left: 40px
}

.pay-privilege_pc>div:before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 0;
    width: 1px;
    background: #182128
}

.pay-privilege_pc>div:after {
    position: absolute;
    content: attr(data-num);
    left: 16px;
    font-size: 66px;
    color: #03c37e;
    opacity: .07
}

.pay-privilege_pc>div p {
    color: hsla(0,0%,71.4%,.6)
}

.pay-privilege_pc>div p:first-of-type {
    color: rgba(3,195,126,.6)
}

.pay-mobilecards {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: 16px;
    padding-top: 10px;
    min-height: 166px;
    box-sizing: border-box;
    margin-top: -10px;
    overflow: auto
}

.pay-mobilecards::-webkit-scrollbar {
    display: none
}

.pay-mobilecards .pay-card-wrap {
    width: 110px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-left: 8px;
    margin-right: 8px
}

.pay-mobilecards .pay-card {
    height: 156px;
    margin-top: 0
}

.pay-mobilecards .pay-card.on {
    background-size: cover;
    background-position: 30% 0
}

.pay-mobilecards .g-tag {
    white-space: nowrap;
    margin-top: -6px;
    font-size: 12px
}

.pay-mobilecards p.f10 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pay-mobilecards-wrap {
    position: relative
}

.pay-mobilecards-wrap .pay-cards-shadow {
    position: absolute;
    top: 0;
    right: -8px;
    width: 56px;
    height: 176px;
    pointer-events: none;
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(30,40,49,0)),to(#1e2831));
    background-image: linear-gradient(90deg,rgba(30,40,49,0),#1e2831);
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.pay-mobilecards-wrap .pay-cards-shadow i {
    position: absolute;
    top: 50%;
    left: 28px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.pay-purchase-mobile,.pay-purchase-pc {
    height: 20px;
    width: 100%;
    background: #e4bf84;
    border-radius: 0 0 4px 4px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-shadow: inset 0 -1px 3px #fff5e2
}

.pay-purchase-mobile .icon-gift-gold,.pay-purchase-pc .icon-gift-gold {
    width: 20px;
    height: 20px;
    background-color: hsla(0,0%,100%,.5);
    border-radius: 0 4px 0 4px;
    background-size: 12px 12px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.pay-purchase-mobile .icon-gift-gold .icon-bubble-gold,.pay-purchase-pc .icon-gift-gold .icon-bubble-gold {
    position: absolute;
    top: -4px;
    right: -8px;
    text-align: center;
    font-style: normal
}

.pay-purchase-mobile .icon-gift-gold .icon-bubble-gold font,.pay-purchase-pc .icon-gift-gold .icon-bubble-gold font {
    display: inline-block;
    font-size: 16px;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    color: #fff
}

.pay-purchase-mobile .pay-purchase-details,.pay-purchase-mobile span,.pay-purchase-pc .pay-purchase-details,.pay-purchase-pc span {
    font-size: 12px;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    font-weight: 700;
    color: #664a1a;
    letter-spacing: 0;
    line-height: 20px
}

.pay-purchase-mobile .pay-purchase-details,.pay-purchase-pc .pay-purchase-details {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pay-purchase-mobile .pay-purchase-details .text-scroll,.pay-purchase-pc .pay-purchase-details .text-scroll {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.pay-purchase-mobile .icon-arrow-gold,.pay-purchase-pc .icon-arrow-gold {
    margin-top: 6px;
    margin-right: 4px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.pay-purchase-pc {
    width: 120px;
    position: static;
    border-radius: 4px;
    margin-top: 4px;
    cursor: pointer
}

.page-pay-purchase-confirm {
    width: 320px;
    border: none
}

.page-pay-purchase-confirm .cofirm-head {
    background: #28333d
}

.page-pay-purchase-confirm .cofirm-head h2 {
    margin: 0;
    width: 100%;
    display: inline-block;
    text-align: center
}

.page-pay-purchase-confirm-pc ul {
    padding: 0 16px 16px;
    max-height: 282px
}

.page-pay-purchase-confirm ul {
    max-height: 232px;
    overflow: auto
}

.page-pay-purchase-confirm ul li {
    margin-bottom: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    background: rgba(30,40,49,.5)
}

.page-pay-purchase-confirm ul li:last-child {
    margin-bottom: 0
}

.page-pay-purchase-confirm ul li .purchase-icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: 8px;
    width: 32px;
    height: 32px
}

.page-pay-purchase-confirm ul li .purchase-details {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.page-pay-purchase-confirm ul li .purchase-details .title {
    font-size: 14px;
    font-weight: 500;
    color: #fff
}

.page-pay-purchase-confirm ul li .purchase-details .desc {
    color: #8b969f;
    font-size: 12px
}

.pay-purchase-btntips {
    position: absolute;
    right: 0;
    top: -10px;
    width: auto;
    height: 20px;
    line-height: 20px;
    background: #e4bf84;
    border-radius: 8px 8px 8px 0;
    box-shadow: inset 0 1px 3px #fff5e2;
    -webkit-animation: bounce-down 3s linear infinite;
    animation: bounce-down 3s linear infinite
}

.pay-purchase-btntips span {
    font-size: 12px;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    font-weight: 700;
    color: #664a1a;
    letter-spacing: 0;
    display: block;
    text-align: left;
    padding: 0 20px 0 3px
}

.pay-purchase-btntips .icon-gift-gold {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: hsla(0,0%,100%,.5);
    border-radius: 8px;
    background-size: 12px 12px
}

.pay-purchase-btntips .icon-bubble-gold {
    position: absolute;
    top: -4px;
    right: -8px;
    text-align: center;
    font-style: normal
}

.pay-purchase-btntips .icon-bubble-gold font {
    display: inline-block;
    font-size: 16px;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    color: #fff
}

.pay-mobilecard {
    padding: 14px 8px 8px;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 4px;
    background-size: 100% 100%
}

.pay-mobilecard p:first-child {
    font-weight: 700
}

.pay-mobilecard p:nth-child(2) {
    margin-top: 4px
}

.pay-mobilecard-con {
    position: absolute;
    top: 79px;
    left: 0;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box
}

.pay-mobilecard-tag span {
    font-size: 10px;
    color: #e2bb7c;
    height: 18px;
    padding: 0 6px;
    background-image: linear-gradient(212deg,#383939,#676767);
    border-radius: 18px
}

.originalPrice {
    text-decoration: line-through;
    margin-right: 4px;
    font-size: 10px;
    font-family: PingFangSC-Regular;
    color: hsla(0,0%,100%,.7);
    font-weight: 400
}

.pay-moilecard-money {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline
}

.pay-moilecard-money b {
    margin-right: 4px
}

.pay-moilecard-money .icon {
    width: 14px;
    height: 14px;
    margin-left: auto
}

.pay-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,.55);
    z-index: 997;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end
}

.pay-popup>div {
    text-align: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 16px 32px 40px;
    background: #304051;
    border-radius: 6px 6px 0 0;
    position: relative
}

.pay-popup .g-Btn {
    margin-top: 20px;
    width: 100%;
    height: 48px;
    line-height: 46px;
    border-radius: 48px;
    position: relative
}

.pay-popup .g-Btn strong {
    margin-left: 4px;
    padding: 0 5px;
    line-height: 20px;
    background: #0db679;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    color: #fff
}

.pay-popup .icon-vipclose {
    position: absolute;
    top: 16px;
    right: 16px
}

.pay-popup .qrcodebox {
    width: 60%;
    margin-left: auto;
    margin-right: auto
}

.pay-popup .qrcodebox .icon {
    margin: 0 4px
}

.pay-btns {
    height: 182px;
    text-align: center;
    color: #8b969f
}

.pay-btns>div {
    position: fixed;
    height: 182px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(30,40,49,0)),color-stop(28%,#1e2831));
    background-image: linear-gradient(180deg,rgba(30,40,49,0),#1e2831 28%);
    left: 0;
    right: 0;
    padding: 0 16%;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    z-index: 995
}

.pay-btns>div>div {
    margin-top: auto
}

.pay-btns a {
    color: #8b969f;
    margin: 0 4px
}

.pay-btns a:hover {
    color: #03c47e
}

.pay-btns .g-Btn {
    margin-top: 16px;
    font-size: 16px;
    border-radius: 48px;
    height: 48px;
    line-height: 46px;
    width: 100%;
    letter-spacing: 2px;
    padding: 0;
    position: relative
}

.pay-type {
    padding: 10px 0;
    margin-bottom: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.pay-type p {
    margin-left: 16px;
    margin-right: auto
}

.pay-mobileprivileges>p {
    font-size: 14px;
    margin-top: 24px;
    text-align: center;
    color: #b6b6b6
}

.pay-mobileprivileges .icon-back {
    width: 18px;
    height: 18px;
    margin-left: 4px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 5px
}

.pay-mobileprivileges.on .icon-back {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-top: -10px
}

.pay-mobileprivileges.on .pay-privilege {
    display: none
}

.pay-mobileprivileges.on .pay-privilege:first-child,.pay-mobileprivileges.on .pay-privilege:nth-child(2),.pay-mobileprivileges.on .pay-privilege:nth-child(3),.pay-mobileprivileges.on .pay-privilege:nth-child(4) {
    display: block
}

.pay-mobileprivileges-bg {
    background: rgba(48,64,81,.5);
    border-radius: 4px;
    padding: 8px 8px 0
}

.pay-mobileprivilegescon {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.pay-mobileprivilegescon .pay-privilege {
    width: 50%;
    margin-bottom: 8px
}

.pay-mobileprivilegescon .pay-privilege>div {
    padding: 8px;
    background: rgba(24,33,40,.5);
    border-radius: 2px
}

.pay-mobileprivilegescon .pay-privilege:nth-child(odd)>div {
    margin-right: 4px
}

.pay-mobileprivilegescon .pay-privilege:nth-child(2n)>div {
    margin-left: 4px
}

.pay-tip {
    white-space: nowrap;
    color: #b6b6b6;
    margin-top: 8px;
    margin-bottom: 16px;
    font-size: 12px
}

.pay-tip2 {
    font-size: 12px;
    color: rgba(139,150,159,.6);
    margin-top: 2px
}

.cloudpc .pay-tip2 {
    margin-top: -6px
}

.pay-banner {
    max-width: 354px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 auto;
    height: 56px;
    background: #252e35 url(../img/banner_PaymentGift.ff8b99d1.png) 0 no-repeat;
    background-size: cover;
    border-radius: 56px;
    cursor: pointer
}

.pay-banner,.pay-banner>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.pay-banner>div {
    margin-left: auto;
    margin-right: 26px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-banner>div>p:last-of-type {
    color: #fff;
    opacity: .54;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.pay-banner>div .g-tag-gree {
    font-size: 12px;
    margin-top: 12px
}

.pay-banner>div>img {
    width: 24px;
    height: 24px;
    margin-bottom: 4px
}

.pay-banner+.pay-logs {
    margin-left: 0
}

.pay-banner2 {
    max-width: 354px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 auto
}

.pay-banner2.slide.banner {
    margin-bottom: 0
}

.pay-banner2.slide.banner .slide-wrap {
    padding-top: 16%!important
}

.pay-banner2.slide.banner.mobile {
    max-width: unset;
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 0
}

.pay-banner2 .slide-next,.pay-banner2 .slide-prev {
    width: 32px;
    height: 32px
}

.pay-banner2 .slide-banner .info {
    font-size: 14px!important
}

.pay-nav {
    height: 35px;
    background: rgba(30,40,49,.4)
}

.pay-nav,.pay-nav>li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-nav>li {
    height: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
    color: #8b969f
}

.pay-nav>li.on {
    color: #03c37e;
    background: #1e2831
}

.pay-nav>li>span {
    margin-left: 12px
}

.pay-cards_pc_4,.pay-mobilecards_pc_4 {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: flex-start;
    align-content: flex-start
}

.pay-cards_pc_4>div,.pay-mobilecards_pc_4>div {
    width: 50%
}

.pay-cards_pc_4>div:nth-child(2n),.pay-mobilecards_pc_4>div:nth-child(2n) {
    padding-left: 8px
}

.pay-cards_pc_4>div:nth-child(odd),.pay-mobilecards_pc_4>div:nth-child(odd) {
    padding-right: 8px
}

.pay-cards_pc_4>div>div,.pay-mobilecards_pc_4>div>div {
    height: 118px
}

.pay-cards_pc_4 .pay-pccard-money,.pay-mobilecards_pc_4 .pay-pccard-money {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline
}

.pay-cards_pc_4 .pay-pccard-money p,.pay-mobilecards_pc_4 .pay-pccard-money p {
    margin: 0 4px
}

.pay-cards_pc_4 .pay-pccard-money del,.pay-mobilecards_pc_4 .pay-pccard-money del {
    vertical-align: middle;
    margin-top: -8px;
    display: inline-block
}

.pay-cards_pc_4,.pay-cards_pc_more {
    box-sizing: border-box
}

.pay-cards_pc_4 .pc-pccard,.pay-cards_pc_more .pc-pccard {
    padding-top: 20px
}

.pay-cards_pc_more {
    padding-top: 2px
}

.pay-cards_pc_more .pc-pccard>div:first-child.purchase {
    height: 108px
}

.pay-cards_pc_3>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding-top: 0;
    -webkit-align-self: center;
    align-self: center
}

.pay-cards_pc_3>div:nth-child(2) {
    margin: 0 16px
}

.pay-cards_pc_3>div>div {
    height: 150px
}

.pay-cards_pc_more,.pay-mobilecards_pc_more {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    margin-left: -8px;
    margin-right: -8px
}

.pay-cards_pc_more>div,.pay-mobilecards_pc_more>div {
    width: 33.33%;
    padding-left: 8px;
    padding-right: 8px
}

.pay-cards_pc_more>div>div,.pay-mobilecards_pc_more>div>div {
    height: 128px
}

.pay-cards_pc_more .pay-pccard-money p,.pay-mobilecards_pc_more .pay-pccard-money p {
    line-height: 1;
    margin-bottom: 6px;
    margin-top: 2px
}

.pay-cards_pc_more .pay-pccard-money p:first-of-type,.pay-mobilecards_pc_more .pay-pccard-money p:first-of-type {
    margin-bottom: 0;
    margin-top: 0
}

.pc-pccard {
    padding-top: 16px;
    position: relative;
    box-sizing: border-box
}

.pc-pccard>div:first-child {
    cursor: pointer;
    position: relative;
    background: linear-gradient(135deg,rgba(136,139,153,.07),rgba(77,80,97,.08));
    border: 1px solid rgba(106,108,115,.24);
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #fff
}

.pc-pccard>div:first-child.on {
    background: rgba(3,196,126,.07);
    border-color: #04c47f
}

.pc-pccard>div:first-child>p {
    font-size: 16px;
    margin-top: 16px
}

.pc-pccard>div:first-child.purchase {
    border-radius: 4px 4px 0 0;
    height: 117px
}

.pc-pccard .g-tag {
    position: absolute;
    right: -1px;
    top: -11px;
    font-weight: 700
}

.pc-pccard .pay-purchase-mobile {
    position: static;
    height: 20px;
    cursor: pointer
}

.pay-pccard-money {
    color: #03c37e;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-pccard-money span {
    margin-left: 6px
}

.pay-pccard-money del {
    color: #8b969f;
    font-size: 14px
}

.pay-pccard-money b {
    vertical-align: middle;
    margin-top: -8px;
    display: inline-block
}

.pay-pccard-money p:nth-child(2) {
    margin-left: 8px
}

.pay-pccard-add {
    margin: 4px 0 0;
    border-radius: 12px;
    background: hsla(0,0%,100%,.17);
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    padding: 0 8px
}

.pay-yunbi {
    width: 68%;
    width: -webkit-calc(68% + 8px);
    width: calc(68% + 8px);
    margin-bottom: 18px;
    color: #b6b6b6;
    background-image: linear-gradient(135deg,rgba(136,139,153,.07),rgba(77,80,97,.08));
    border: 1px solid rgba(106,108,115,.24);
    border-radius: 24px
}

.pay-yunbi-head {
    color: #b6b6b6;
    height: 32px
}

.pay-yunbi-head,.pay-yunbi-head>p {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-yunbi-head>p {
    margin-right: auto;
    margin-left: auto;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.pay-yunbi-head>p>span {
    color: #ebcf9e;
    margin: 0 6px;
    font-weight: 500
}

.pay-yunbi-head>p>span.g-color {
    color: #03c47e
}

.pay-yunbi-head .icon-question2 {
    width: 12px;
    height: 12px;
    margin-left: 4px;
    margin-top: -2px
}

.pay-yunbi2 {
    width: 100%
}

.pay-yunbi2 .pay-yunbi-head {
    height: 48px;
    width: 100%
}

.pay-yunbi2 .pay-yunbi-head>p {
    margin-left: 8px
}

.pay-yunbi2 .pay-yunbi-head>p:last-of-type {
    font-size: 12px;
    color: #b6b6b6;
    margin-right: 26px;
    margin-left: auto
}

.pay-yunbi2 .icon-back {
    width: 16px;
    height: 16px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-left: 4px;
    margin-top: -8px;
    background-image: url(../img/back.508cc8b5.png)!important
}

.pay-yunbi2 .g-circle-gray {
    width: 48px;
    height: 48px
}

.pay-yunbi2 .g-circle-gray .icon {
    width: 24px;
    height: 24px
}

.pay-yunbi2.on {
    width: auto;
    margin-left: 24px;
    border-radius: 0 24px 24px 24px
}

.pay-yunbi2.on .pay-yunbi-head {
    margin-left: -24px
}

.pay-yunbi2.on .pay-yunbi-head>p:last-of-type {
    margin-right: 0
}

.pay-yunbi2.on .icon-back {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 10px
}

.pay-yunbi-con {
    border-top: 1px solid rgba(106,108,115,.24);
    margin: 0 30px;
    padding: 16px 0;
    line-height: 24px;
    font-size: 12px;
    color: #8b969f
}

.pay-yunbi-con>p:first-of-type {
    font-size: 14px;
    margin-bottom: 4px;
    color: #b6b6b6
}

.pay-yunbi-con>p span {
    margin-left: 2px;
    margin-right: 8px
}

.pay-yunbi-con .pay-strong,.pay-yunbi-con>p span {
    color: rgba(3,196,126,.6)
}

.pay-yunbi-detail {
    padding: 24px 20px
}

.pay-yunbi-detail>h2 {
    font-size: 14px;
    color: #03c37e
}

.pay-yunbi-detail>p {
    margin-top: 10px;
    font-size: 14px;
    color: #b4c0c9;
    margin-bottom: 40px
}

.pay-mobilecards_pc {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 16px;
    margin-top: -16px
}

.pay-mobilecards_pc .g-tag {
    font-size: 12px
}

.pay-mobilecards_pc_more>div>div {
    height: 137px
}

.pay .subnav {
    padding: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pay .subnav .subnavBox {
    height: auto;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.pay .subnav .subnavBox h2 {
    position: relative;
    font-size: 16px;
    margin: 0 20px
}

.pay .subnav .subnavBox h2.disable {
    font-weight: 400;
    opacity: .5;
    cursor: default;
    margin-left: 60px;
    margin-right: 4px
}

.pay .subnav_gamecard .subnavBox h2:last-of-type {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    order: -1;
    margin-right: 60px
}

.g-tag-new,.g-tag-purple {
    border-radius: 10px;
    height: 14px;
    line-height: 14px;
    overflow: hidden;
    padding: 1px 6px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: left center;
    transform-origin: left center
}

.g-tag-new span,.g-tag-purple span {
    color: #1e2831;
    white-space: nowrap
}

.g-tag-new {
    position: absolute;
    top: 50%;
    left: 100%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f3e1ba),to(#e4bf84));
    background-image: linear-gradient(180deg,#f3e1ba,#e4bf84);
    display: inline-block;
    -webkit-transform: translate3d(0,-50%,0) scale(.68);
    transform: translate3d(0,-50%,0) scale(.68);
    line-height: 13px;
    vertical-align: -4px;
    margin-left: 4px;
    font-weight: 400;
    padding: 4px 6px;
    color: #1e2831;
    border-radius: 20px
}

.InMobile .subnav2 .subnavBox h2 {
    position: relative;
    margin-right: 38px;
    font-size: 18px
}

.InMobile .subnav2 .subnavBox h2.on {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.InMobile .subnav_gamecard .subnavBox h2:last-of-type {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    order: -1;
    margin-right: 72px
}

.InMobile .pay-cloudpc-card:hover {
    border: 1px solid rgba(106,108,115,.24);
    background-color: rgba(136,139,153,.07)
}

.InMobile .pay-cloudpc-card:hover.on {
    border-color: #04c47f;
    background: rgba(3,196,126,.07)
}

.pay-cloudpc-title {
    margin-bottom: 16px
}

.pay-cloudpc-title sub {
    bottom: 0
}

.pay-cloudpc-title i {
    font-style: normal
}

.pay-pc-title {
    margin-bottom: -4px
}

.pay-cloudpc-card {
    border: 1px solid rgba(106,108,115,.24);
    background-color: rgba(136,139,153,.07);
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 24px;
    height: 72px
}

.pay-cloudpc-card.purpase {
    border-radius: 4px 4px 0 0;
    margin-bottom: 0
}

.pay-cloudpc-card.on,.pay-cloudpc-card:hover {
    border-color: #04c47f;
    background: rgba(3,196,126,.07)
}

.pay-cloudpc-storage {
    height: 68px;
    padding-left: 16px;
    padding-right: 8px
}

.pay-cloudpc-cuurent,.pay-cloudpc-storage {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-cloudpc-cuurent {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pay-cloudpc-all {
    font-size: 20px;
    font-weight: 700;
    color: #03c47e;
    margin-right: 4px
}

.pay-cloudpc-use {
    background: #1e2831;
    border-radius: 16px;
    font-size: 12px;
    color: #b6b6b6;
    padding: 0 8px 1px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-cloudpc-now {
    font-size: 12px;
    color: #fff
}

.pay-cloudpc-add {
    margin-left: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-left: 6px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-cloudpc-add>p {
    margin-right: 8px;
    color: #8b969f
}

.pay-cloudpc-add>p.g-color-red {
    color: #e35043
}

.pay-cloudpc-add>div {
    cursor: pointer;
    border: 1px solid #8b969f;
    font-size: 12px;
    color: #8b969f;
    border-radius: 12px;
    padding: 2px 14px
}

.pay-cloudpc-add>div:hover {
    color: #fff;
    border-color: #fff
}

.pay-cloudpc-date {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.pay-cloudpc-date>div {
    width: 50%;
    box-sizing: border-box;
    position: relative
}

.pay-cloudpc-date.off>div:nth-child(2n) {
    padding-right: 12px
}

.pay-cloudpc-date.off>div:nth-child(odd) {
    padding-left: 12px
}

.pay-cloudpc-date.off>div:first-child {
    display: none
}

.pay-cloudpc-date.on>div:nth-child(2n) {
    padding-left: 12px
}

.pay-cloudpc-date.on>div:nth-child(odd) {
    padding-right: 12px
}

.pay-cloudpc-date.on>div:nth-child(4) {
    display: none
}

.pay-cloudpc-date.on>div:nth-child(5) {
    padding-right: 0;
    padding-left: 12px
}

.pay-cloudpc-date .pay-purchase-mobile {
    position: static;
    margin-bottom: 24px
}

.pay-cloudpc-date .g-tag {
    position: absolute;
    right: 12px;
    top: -11px;
    font-weight: 700
}

.pay-cloudpc-card {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 16px;
    color: #03c37e;
    cursor: pointer
}

.pay-cloudpc-card .icon-customize {
    margin-left: 4px
}

.pay-cloudpc-input {
    position: relative;
    padding: 0 16px
}

.pay-cloudpc-input.error>p {
    color: #e35043
}

.pay-cloudpc-input.error>i {
    background-color: #8b969f
}

.pay-cloudpc-input>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pay-cloudpc-input input {
    width: 100%;
    color: #03c47e;
    caret-color: #03c47e
}

.pay-cloudpc-input>i,.pay-cloudpc-input>span {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-cloudpc-input>span {
    margin: 0 8px;
    color: #8b969f
}

.pay-cloudpc-input>i {
    width: 36px;
    height: 18px;
    color: #fff;
    background: #03c47e url(../img/icon_confirm.5d9eb656.png) 50% no-repeat;
    background-size: 50%;
    border-radius: 12px
}

.pay-cloudpc-input>p {
    position: absolute;
    bottom: -24px;
    left: 0;
    color: #03c47e;
    font-size: 12px
}

.pay-none {
    height: 404px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center
}

.pay-none>div>div,.pay-none>div>p {
    margin-top: 20px
}

.paypopup .pay-none p {
    color: #8b969f
}

.pay-choiceCon {
    background: #28333d;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pay-choiceCon>div {
    padding: 16px 24px
}

.pay-choiceCon .toast-progressBox {
    background: #1e2831;
    height: 8px;
    border-radius: 8px;
    margin-bottom: 10px
}

.pay-choiceCon .toast-progressBox .toast-progress {
    box-shadow: none;
    background: #304051
}

.pay-choiceCon .toast-progressBox .toast-progress2 {
    right: 0;
    left: inherit;
    background: #03c47e
}

.pay-addStorage {
    margin: 40px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 54px
}

.pay-addStorage>div,.pay-addStorage>p {
    border-radius: 2px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 16px;
    color: #03c37e
}

.pay-addStorage>div {
    font-size: 20px;
    width: 52px;
    background-image: linear-gradient(135deg,rgba(136,139,153,.07),rgba(77,80,97,.08));
    border: 1px solid rgba(106,108,115,.24);
    cursor: pointer
}

.pay-addStorage>div:hover {
    border-color: #04c47f
}

.pay-addStorage>div.disable {
    cursor: not-allowed;
    color: #8b969f;
    border: 1px solid rgba(106,108,115,.24)!important
}

.pay-addStorage>p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 22px;
    background: rgba(3,196,126,.07);
    border: 1px solid #04c47f
}

.pay-addTips {
    line-height: 2
}

.pay-coinscloudpc {
    position: relative;
    z-index: 1
}

.pay-coinscloudpc .pay-yunbi-con {
    width: 465px;
    position: absolute;
    background: rgba(0,0,0,.89);
    right: 0;
    padding: 0;
    margin: 0;
    margin-top: 12px;
    border-radius: 4px
}

.pay-coinscloudpc .pay-yunbi-con:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid rgba(0,0,0,.89);
    top: -8px;
    right: 106px
}

.pay-cloudpcintr {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 10px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pay-cloudpcintr>p:first-of-type {
    cursor: pointer
}

.pay-cloudpcintr>p:last-of-type {
    color: #ebcf9e
}

.pay-cloudpcintr span {
    margin-right: 3px
}

.pay-priceDetails {
    padding: 16px;
    color: #8b969f;
    font-size: 14px
}

.pay-priceDetails span {
    font-weight: 400;
    margin: 0
}

.pay-priceDetails .g-color-white>b {
    font-weight: 400;
    margin-right: 8px
}

.pay-priceDetails .pay-priceintr {
    margin-bottom: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.pay-priceDetails .pay-priceintr .f18 {
    margin-right: 8px
}

.pay-priceDetails .pay-priceintr2 {
    margin-bottom: 10px
}

.pay-priceDetails .pay-priceintr2>p:first-of-type {
    margin-bottom: 6px
}

.pay-priceDetails .pay-priceintr-title {
    line-height: 34px;
    background: rgba(235,207,158,.07);
    margin: -16px -16px 8px -16px;
    border-radius: 4px 4px 0 0
}

.pay-priceDetails .pay-priceintr-title p {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    text-align: center;
    color: #ebcf9e
}

.InMobile .pay-priceDetails .pay-priceintr-title {
    position: relative;
    height: 30px;
    margin: -16px -30px 8px -30px;
    border-radius: 0
}

.InMobile .pay-priceDetails .pay-priceintr-title p {
    position: absolute;
    top: -2px;
    left: -40px;
    right: -40px;
    bottom: 0;
    font-size: 12px!important;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    line-height: 1.5;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.InMobile .pay-priceDetails .pay-priceintr-title p del {
    font-size: 12px!important
}

.pay-priceDetails2 {
    padding: 0
}

.pay-priceDetails2 .pay-priceintr {
    margin-bottom: 10px
}

.pay-priceDetails2 .pay-priceintr .f18 {
    font-size: 14px!important
}

.pay-priceDetails2 .pay-priceintr .f12 {
    font-size: 12px!important
}

.pay-priceDetails2 .pay-priceintr2 .g-color {
    display: block;
    font-size: 12px!important
}

.pay-priceDetails2 .pay-priceintr2 .pay-strong {
    color: rgba(3,196,126,.6)
}

.pay-priceDetails2 .pay-priceintr2>p {
    color: #b6b6b6;
    margin-bottom: 0
}

.pay-priceDetails2 .pay-priceintr2>div {
    font-size: 12px!important
}

.pay-popup2 {
    background: rgba(0,0,0,.85)
}

.pay-popup2>div {
    padding: 0
}

.pay-popup2 .pay-yunbi {
    position: absolute;
    width: 80%;
    margin-left: 10%;
    top: -80px
}

.pay-popup-head {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 56px;
    padding: 0 16px
}

.pay-popup-head>div {
    border: 1px solid #03c37e;
    border-radius: 12px;
    font-size: 12px;
    color: #03c37e;
    padding: 2px 16px;
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.pay-progress {
    position: relative;
    background: #1e2831
}

.pay-progress .toast-progressBox {
    height: 16px
}

.pay-progress .toast-progress {
    box-shadow: unset;
    border-radius: 0;
    background: #8b969f
}

.pay-progress .toast-progress2 {
    right: 0;
    left: unset;
    background: #03c37e
}

.pay-progress>p {
    position: absolute;
    right: 0;
    height: 16px;
    top: 0
}

.pay-progress>p,.pay-tips {
    font-size: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pay-tips {
    background: #304051;
    border-radius: 4px;
    padding: 2px 8px 2px 6px;
    color: #fff
}

.pay-tips .icon {
    width: 12px!important;
    height: 12px!important;
    margin-right: 4px!important;
    margin-top: 2px!important;
    margin-left: 0!important
}

.pay-card .icon_questions_white {
    vertical-align: -1px;
    margin-left: 3px;
    opacity: .5;
    cursor: pointer
}

.pay-cloudpc-tips {
    margin-top: -10px;
    margin-bottom: 24px;
    color: #03c37e;
    font-size: 12px
}

.InMobile .pay-tips {
    width: 100%;
    margin-top: -8px
}

@media only screen and (max-height: 600px) {
    .pay-cards>div {
        padding-right:24px;
        height: 224px
    }
}

@media only screen and (max-width: 768px) {
    .pay {
        max-width:100%;
        height: 100%
    }

    .pay .cofirm-head {
        padding-top: 30px
    }

    .pay .cofirm-cont {
        height: -webkit-calc(100% - 94px);
        height: calc(100% - 94px);
        overflow-y: auto
    }

    .pay-conten {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column
    }

    .pay-qr {
        -webkit-box-ordinal-group: 0;
        -webkit-order: -1;
        order: -1
    }

    .pay-qr .qrcodebox {
        max-width: 190px
    }

    .pay-qr .pay-yunbi {
        max-width: 198px
    }

    .pay-qr .pay-coinscloudpc {
        position: unset
    }

    .pay-qr .pay-coinscloudpc .pay-yunbi-con {
        width: 100%
    }

    .pay-qr .pay-coinscloudpc .pay-yunbi-con:before {
        right: 50%;
        margin-right: -20px
    }

    .pay-cards {
        border: none;
        margin-top: 16px;
        padding-bottom: 16px
    }

    .pay-cards>div {
        height: auto;
        padding-bottom: 0
    }

    .pay-cards.more:before {
        position: unset;
        opacity: 0
    }

    .pay-cards.more>div {
        padding-bottom: 0
    }

    .pay-cards_pc_3 {
        padding-top: 16px
    }

    .pay-users .pay-banner {
        display: none
    }

    .pay-users .pay-banner+.pay-logs {
        margin-left: auto
    }
}

@media only screen and (min-width: 600px) {
    .paybox.paypopup .pay-banner {
        max-width:400px
    }
}

@media only screen and (max-width: 530px) {
    .pay .subnav .disable,.pay .subnav .g-tag-purple {
        display:none
    }
}

@media only screen and (max-width: 375px) {
    .pay-banner>div {
        margin-right:20px
    }
}

.pay-promotion-confirm {
    box-shadow: none;
    margin-top: -60px
}

.pay-promotion-confirm .cofirm-cont {
    position: relative;
    background-color: transparent;
    padding: 0;
    overflow: visible!important
}

.pay-promotion-confirm .confirm-bg {
    width: 100%
}

.pay-promotion-confirm .confirm-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 22%
}

.pay-promotion-confirm .card-title {
    height: 22px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 24px;
    font-size: 16px;
    color: #fff
}

.pay-promotion-confirm .card-title:after,.pay-promotion-confirm .card-title:before {
    content: "";
    width: 30px;
    height: 1px;
    background: #fff;
    border-radius: 1px
}

.pay-promotion-confirm .card-title:before {
    margin-right: 8px
}

.pay-promotion-confirm .card-title:after {
    margin-left: 8px
}

.pay-promotion-confirm .card-body {
    position: relative;
    width: 200px;
    height: 110px;
    background-image: url(../img/popup_card_bkg@2x.f2ba2a84.png);
    background-size: 100% 100%;
    margin: 25px auto 0 auto;
    padding-top: 29px;
    box-sizing: border-box
}

.pay-promotion-confirm .card-tag {
    position: absolute;
    top: -4px;
    right: -4px;
    line-height: 20px;
    padding-left: 10px;
    padding-right: 6px;
    background-image: linear-gradient(-26deg,#7aa7f7,#00c4ff 95%);
    border-radius: 0 8px 0 8px;
    font-size: 13px;
    color: #fff
}

.pay-promotion-confirm .card-tag:after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-top: 3px solid #0080a7;
    border-right: 4px solid transparent
}

.pay-promotion-confirm .card-name {
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    color: #131a3b
}

.pay-promotion-confirm .card-price {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 4px
}

.pay-promotion-confirm .card-price i {
    line-height: 28px;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    color: #e35043
}

.pay-promotion-confirm .card-price span {
    line-height: 45px;
    font-weight: 700;
    font-size: 32px;
    color: #e35043
}

.pay-promotion-confirm .card-price del {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    margin-left: 3px;
    line-height: 17px;
    font-size: 12px;
    color: #939393
}

.pay-promotion-confirm .card-time {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 24px
}

.pay-promotion-confirm .card-time span {
    margin: 0 4px;
    line-height: 20px;
    font-size: 14px;
    color: #da503d
}

.pay-promotion-confirm .card-time strong {
    line-height: 24px;
    padding: 0 7px;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#ff8675),color-stop(97%,#da503d));
    background-image: linear-gradient(180deg,#ff8675 1%,#da503d 97%);
    border-radius: 8px;
    font-weight: 400;
    font-size: 14px;
    color: #fff
}

.pay-promotion-confirm .card-btn {
    margin-top: 15px;
    padding: 0 36px;
    text-align: center
}

.pay-promotion-confirm .card-btn button {
    height: 50px;
    width: 100%;
    border: 0;
    background-image: radial-gradient(circle at 0 53%,rgba(255,139,178,.08) 0,rgba(255,253,254,0) 34%,hsla(0,0%,100%,0) 0),linear-gradient(57deg,#f49771,#ec435b 41%);
    border-radius: 16px;
    font-weight: 700;
    font-size: 18px;
    color: #fff
}

.pay-promotion-confirm .card-btn i {
    margin-left: 2px
}

.pay-promotion-confirm .confirm-close {
    position: absolute;
    bottom: -60px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none
}

@media only screen and (max-width: 414px) {
    .pay-promotion-confirm.cofirm {
        max-width:100%;
        min-width: 375px
    }
}

@media only screen and (max-height: 430px) {
    .pay-promotion-confirm.cofirm {
        margin-top:0
    }

    .pay-promotion-confirm.cofirm .confirm-close {
        right: -40px;
        top: 50px;
        left: auto;
        -webkit-transform: none;
        transform: none
    }
}

.pay-promotion-bar {
    position: relative;
    height: 48px;
    margin: 24px 0;
    background-image: url(../img/bkg_bar@2x.6e793c0c.png)!important;
    background-size: cover;
    background-position: 50%;
    border-radius: 4px
}

.pay-promotion-bar.is-pc {
    height: 40px!important
}

.pay-promotion-bar.is-pc .time-group {
    position: absolute;
    top: -7px;
    right: -4px;
    width: auto!important;
    line-height: 16px;
    padding-left: 5px;
    padding-right: 4px;
    background-image: linear-gradient(-26deg,#7aa7f7,#00c4ff 95%);
    border-radius: 0 6px 0 6px;
    font-size: 12px
}

.pay-promotion-bar.is-pc .time-group:after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-top: 3px solid #0080a7;
    border-right: 4px solid transparent
}

.pay-promotion-bar.is-pc .time-group span {
    margin-left: 0;
    color: #27313c!important
}

.pay-promotion-bar.is-pc .coupons-name .name {
    margin-left: 0
}

.pay-promotion-bar.is-pc .coupons-name .text3 {
    font-size: 14px
}

.pay-promotion-bar.is-mobile:before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    bottom: -12px;
    background-image: url(../img/bar_pic_coins@2x.93bfb174.png);
    background-size: 100% 100%;
    pointer-events: none
}

.pay-promotion-bar.is-mobile .time-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: auto!important
}

.pay-promotion-bar.is-mobile .coupons-name .line {
    width: 1px;
    height: 8px;
    background: #ffe9dd;
    border-radius: 1px;
    margin: 0 7px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-promotion-bar.is-mobile .coupons-name .text2 {
    margin-right: 6px;
    font-size: 12px;
    color: #ffe9dd;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-promotion-bar.is-mobile .coupons-name .time {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#fff4ec),color-stop(97%,#ffe3d3));
    background-image: linear-gradient(180deg,#fff4ec,#ffe3d3 97%);
    box-shadow: inset 0 -2px 1px 0 hsla(0,0%,100%,.25);
    border-radius: 4px;
    padding: 2px 5px;
    line-height: 16px;
    font-weight: 700;
    font-size: 12px;
    color: #ec435b;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-promotion-bar.is-mobile .coupons-name .split {
    width: 8px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-promotion-bar .coupons-name {
    white-space: nowrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    height: 100%
}

.pay-promotion-bar .coupons-name .name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 14px;
    color: #131a3b
}

.pay-promotion-bar .coupons-name .text3 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 4px;
    margin-right: 2px;
    text-align: right;
    font-size: 12px;
    color: #fff;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-promotion-bar .coupons-name .icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-promotion-bar .coupons-name i.sign {
    padding: 0 3px 1px;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    background: #e24141;
    border-radius: 4px;
    display: inline-block;
    font-style: normal;
    margin-right: 8px
}

.keepbar-promotion .keepbar-box {
    display: block!important;
    padding: 0!important
}

.keepbar-promotion .pay-promotion-bar {
    margin: 0;
    padding: 0 12px
}

.keepbar-promotion .pay-promotion-bar:before {
    left: 5px;
    right: 15px
}

.keepbar-promotion .keepbar-btns .btn-cancel {
    background-image: url(../img/icon_close@2x.4b115abd.png)!important
}

.pay-superior-pop {
    height: 64px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom)
}

.pay-superior-pop .superior-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #ffc76c;
    background-image: url(../img/superior_bkg@2x.22ef11d3.png);
    background-size: cover;
    border-radius: 6px 6px 0 0;
    border-top: 1px solid #fff0ca;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 24px
}

.pay-superior-pop .content-left,.pay-superior-pop .superior-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.pay-superior-pop .content-left {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    line-height: 20px;
    text-align: left;
    font-size: 12px;
    color: #624a09
}

.pay-superior-pop .content-left strong {
    background: #ffe7c3;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 15px;
    color: #433206
}

.pay-superior-pop .content-right {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-left: 12px
}

.pay-superior-pop .content-right button {
    background: hsla(0,0%,100%,.85);
    border: 1px solid rgba(98,74,9,.5);
    border-radius: 16px;
    padding: 9px 12px;
    line-height: 22px;
    font-weight: 700;
    font-size: 16px;
    color: #433206
}

.pay-superior-pop .content-right button i {
    width: 18px;
    height: 18px;
    margin-left: 3px;
    border-radius: 50%;
    background-color: #d9d2c2;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 50%;
    vertical-align: -3px
}

.pay-superior-card {
    background: #ffcc7a;
    background-image: radial-gradient(circle at 0 100%,hsla(0,0%,100%,.5) 0,hsla(0,0%,100%,0) 112%,hsla(0,0%,100%,0) 0);
    border-radius: 4px
}

.pay-superior-card-tips {
    padding: 0 12px;
    line-height: 24px;
    font-size: 12px;
    color: #624a09
}

.pay-superior-card-tips strong {
    color: #433206
}

.pay-type-better .pay-better-privileges .pay-privilege {
    width: 100%
}

.pay-type-better .pay-better-privileges .pay-privilege>div {
    margin-left: 0!important;
    margin-right: 0
}

.pay-type-interval .pay-interval-privileges .pay-privilege {
    width: 100%
}

.pay-type-interval .pay-interval-privileges .pay-privilege>div {
    margin-left: 0!important
}

.helpBg,.helpBg2,.helpBg2 body,.helpBg body {
    background: #28333d
}

.helpBg2 #app {
    height: 100%
}

.helpBg2 .topnav {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pagehelpcon {
    height: 100%
}

.pagehelp {
    padding: 20px 16px 40px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right));
    color: #8b969f;
    min-height: 100%
}

.pagehelp .g-Btn {
    width: 100%;
    margin-top: 12px
}

.pagehelp.special {
    padding-top: 0
}

.pagehelp .feedback-special {
    background-color: #2084ff;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#2084ff),to(#0affd3));
    background-image: linear-gradient(180deg,#2084ff,#0affd3);
    background-size: 100% 100%;
    width: 160px;
    height: 20px;
    line-height: 20px;
    border-radius: 0 0 4px 4px;
    font-size: 12px;
    color: #28333d;
    margin: 0 auto 24px;
    font-weight: 700;
    text-align: center
}

.pagehelp .feedback-special span {
    display: block
}

.help {
    width: 600px;
    max-width: 90%
}

.help .cofirm-cont {
    max-height: 767px;
    overflow-y: auto
}

.help .help-list>li {
    width: 18.4%;
    margin-right: 2%
}

.help .help-list>li:nth-of-type(3n-3) {
    margin-right: 2%
}

.help .help-list>li:nth-of-type(5n-5) {
    margin-right: 0
}

.help .cofirm-btns {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}

.helpbox>p {
    margin-bottom: 12px
}

.helpbox>div {
    margin-bottom: 20px
}

.helpbox .textarea textarea {
    border-radius: 8px
}

.help-list {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 12px
}

.help-list,.help-list>li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.help-list>li {
    width: 32%;
    margin-right: 2%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 36px;
    border: 1px solid transparent;
    background: #1e2831;
    border-radius: 36px;
    color: #b4c0c9;
    margin-bottom: 8px;
    box-sizing: border-box;
    cursor: pointer
}

.help-list>li:nth-of-type(3n-3) {
    margin-right: 0
}

.help-list>li.on {
    border-color: #03c47e;
    background: rgba(3,196,126,.1);
    color: #03c47e
}

.help-list .gameTypeSubmodules {
    width: 100%
}

.help-list .gameTypeSubmodules .app-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 12px
}

.help-list .gameTypeSubmodules .app-list>li {
    width: 30%;
    margin-right: 2%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 30px;
    border: 1px solid transparent;
    background: #1e2831;
    border-radius: 30px;
    color: #b4c0c9;
    box-sizing: border-box;
    cursor: pointer
}

.help-list .gameTypeSubmodules .app-list>li.on {
    border-color: #03c47e;
    background: rgba(3,196,126,.1);
    color: #03c47e
}

.help-guide {
    position: relative;
    background: #304051;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.02);
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    color: #b4c0c9
}

.help-guide i {
    margin-right: 4px;
    vertical-align: -1px
}

.help-guide .help-guide-text {
    line-height: 20px
}

.help-guide .help-guide-btns a {
    width: 76px;
    height: 20px;
    margin-top: 10px;
    line-height: 18px;
    padding: 0;
    font-weight: 400;
    font-size: 12px
}

.help-guide:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 14%;
    z-index: 1;
    border-bottom: 6px solid #304051;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent
}

.help .help-guide {
    padding: 6px 1px 6px 8px
}

.help .help-guide:before {
    left: 8%
}

.help .help-guide .help-guide-text {
    float: left
}

.help .help-guide .help-guide-btns {
    font-size: 0;
    text-align: right
}

.help .help-guide .help-guide-btns a {
    margin-top: 0
}

.InMobile .help-guide .help-guide-btns {
    text-align: right
}

.InMobile .help-guide .help-guide-btns a {
    margin-left: 10px
}

.InMobile .help-guide .help-guide-btns a:first-child {
    margin-left: 0
}

@media only screen and (max-height: 720px) {
    .help .cofirm-cont {
        max-height:400px;
        overflow-y: auto
    }
}

.qr {
    text-align: center;
    color: #8b969f
}

.qr img {
    width: 173px;
    height: 173px;
    display: block;
    margin: 0 auto 16px
}

.qrcode {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 10;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.qrcodebox {
    width: 19.375%;
    padding-bottom: 1.66666667%;
    border: 2px solid #304051;
    background-size: cover;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    position: relative;
    background: rgba(48,64,81,.9);
    color: #fff
}

.qrcodebox2 {
    position: fixed;
    top: 2px;
    right: 2px;
    width: 11.25%;
    z-index: 999
}

.qrcode-loading img {
    opacity: 0
}

.qrcode-img {
    padding: 8.60215054%
}

.qrcode-img canvas,.qrcode-img img {
    width: 100%;
    display: block;
    border: 8px solid #fff;
    box-sizing: border-box;
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}

.qrcode-img canvas {
    left: 8.60215054%;
    top: 8.60215054%
}

.qrcodebox-b {
    position: absolute;
    width: 16.66666667%;
    height: 0;
    padding-bottom: 20%
}

.qrcodebox-b:first-child {
    top: -4px;
    left: -4px;
    border-left: 2px solid #03c47e;
    border-top: 2px solid #03c47e
}

.qrcodebox-b:nth-child(2) {
    top: -4px;
    right: -4px;
    border-right: 2px solid #03c47e;
    border-top: 2px solid #03c47e
}

.qrcodebox-b:nth-child(3) {
    bottom: -4px;
    left: -4px;
    border-left: 2px solid #03c47e;
    border-bottom: 2px solid #03c47e
}

.qrcodebox-b:nth-child(4) {
    bottom: -4px;
    right: -4px;
    border-right: 2px solid #03c47e;
    border-bottom: 2px solid #03c47e
}

.qrConfirm {
    width: 75%;
    max-width: unset!important
}

.qrConfirm .cofirm-cont {
    background: linear-gradient(211deg,#34495f 7%,#28333d 85%)
}

.qrConfirm .cofirm-cont>h2 {
    text-align: center
}

.qrConfirm .cofirm-cont .qrcodebox {
    margin: 30px auto;
    width: 25.55555556%;
    background: rgba(3,196,126,.04);
    color: #8b969f
}

.qrPay {
    position: fixed;
    right: 0;
    top: 120px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s,-webkit-transform 1s;
    z-index: 999;
    color: #b4c0c9
}

.qrPay.out {
    color: #fff
}

.qrPay-head {
    cursor: pointer;
    background: rgba(30,40,49,.64);
    padding: 6px 8px;
    border-radius: 48px 0 0 48px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.qrPay-head>.icon {
    cursor: pointer;
    margin-right: 4px
}

.qrPay-head .g-Btn {
    margin-left: 20px;
    height: 32px;
    line-height: 30px
}

.qrPay-tips {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    border-radius: 4px;
    margin-left: 38px;
    background-image: -webkit-gradient(linear,left bottom,left top,from(#34495f),to(#28333d));
    background-image: linear-gradient(0deg,#34495f 0,#28333d);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden
}

.qrPay-tips>div {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#f3e1ba),to(#e4bf84));
    background-image: linear-gradient(0deg,#f3e1ba 0,#e4bf84);
    color: #664a1a;
    padding: 5px 10px
}

.qrPay-tips>span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: center
}

.qrPay-tips>span b {
    font-size: 16px;
    color: #ebcf9e;
    margin: 0 4px
}

.qrPay-con {
    margin-left: 90px;
    padding: 24px 30px;
    width: 212px;
    background: rgba(30,40,49,.64);
    box-sizing: border-box;
    border-radius: 0 0 4px 4px
}

.qrPay-con .qrcodebox {
    width: 100%
}

.qrPay-con .qrcodebox .icon {
    width: 16px;
    height: 16px;
    margin-right: 6px
}

.qrPay-con .qrcodebox>p:first-of-type {
    margin-bottom: 6px
}

.cursorlocktip {
    position: absolute;
    max-width: 318px;
    width: 22.08333333%;
    height: 0;
    padding-bottom: 4.44444444%;
    background: url(../img/img_notice_tilde.b0af2147.png) 0 0 no-repeat;
    background-size: contain;
    z-index: 999;
    top: 2.77777778%;
    left: 50%;
    margin-left: -11.04166667%
}

.keepbar-layout.two-column {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.keepbar-layout.two-column .keepbar {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.keepbar-layout.two-column .keepbar:first-child .keepbar-box {
    right: -webkit-calc(50% + 6px);
    right: calc(50% + 6px)
}

.keepbar-layout.two-column .keepbar:last-child .keepbar-box {
    left: -webkit-calc(50% + 6px);
    left: calc(50% + 6px)
}

.keepbar-layout.two-column .keepbar .keepbar-img {
    margin-right: 4px
}

.keepbar-layout.two-column .keepbar .keepbar-text {
    margin-right: 4px;
    font-size: 12px
}

.keepbar-layout.two-column .keepbar .keepbar-btns {
    max-width: none;
    box-sizing: border-box;
    padding-right: 6px
}

.keepbar-layout.two-column .keepbar .keepbar-btns .btn-confirm {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: url(../img/icon_ME_arrow_small.25177245.png);
    background-size: 100% 100%;
    border: 0;
    font-size: 0
}

.keepbar-layout.two-column .keepbar .keepbar-btns .btn-confirm:active,.keepbar-layout.two-column .keepbar .keepbar-btns .btn-confirm:focus,.keepbar-layout.two-column .keepbar .keepbar-btns .btn-confirm:hover {
    background-color: transparent
}

.keepbar-layout.two-lines .keepbar:first-child .keepbar-box {
    right: 10px;
    bottom: 128px;
    bottom: -webkit-calc(128px + constant(safe-area-inset-bottom));
    bottom: calc(128px + constant(safe-area-inset-bottom));
    bottom: -webkit-calc(128px + env(safe-area-inset-bottom));
    bottom: calc(128px + env(safe-area-inset-bottom))
}

.keepbar-layout.two-lines .keepbar:nth-child(2) .keepbar-box {
    right: 10px
}

.keepbar-layout.two-column-lines .keepbar:nth-child(2) .keepbar-box {
    right: -webkit-calc(50% + 6px);
    right: calc(50% + 6px)
}

.keepbar {
    height: 72px
}

.keepbar.layout-exit .keepbar-btns {
    max-width: 96px;
    box-sizing: border-box;
    padding-right: 6%
}

.keepbar.layout-exit .keepbar-btns .btn-cancel {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-size: 16px 16px;
    background-image: url(../img/icon_live_notice_close.d545ee11.png);
    background-repeat: no-repeat;
    background-position: 100% 0;
    border-top-right-radius: 4px;
    margin-right: 0;
    font-size: 0
}

.keepbar .keepbar-box {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 64px;
    bottom: -webkit-calc(64px + constant(safe-area-inset-bottom));
    bottom: calc(64px + constant(safe-area-inset-bottom));
    bottom: -webkit-calc(64px + env(safe-area-inset-bottom));
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 20;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 4px;
    background: #304051;
    background-size: cover;
    box-shadow: 0 0 20px 0 rgb(0 0 0);
    padding: 8px 20px
}

.keepbar .keepbar-img {
    margin-right: 8px;
    font-size: 0
}

.keepbar .keepbar-img>img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 24%
}

.keepbar .keepbar-img .keepbar-activity-img img {
    border-radius: 10px
}

.keepbar .keepbar-text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-right: 8px;
    line-height: 20px;
    overflow: hidden;
    font-size: 14px
}

.keepbar .keepbar-text .keepbar-name {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.keepbar .keepbar-text .keepbar-activity-name {
    color: #8b969f;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-break: break-all;
    white-space: normal
}

.keepbar .keepbar-text .keepbar-activity-name span {
    color: #fff
}

.keepbar .keepbar-text .keepbar-time {
    font-size: 12px;
    color: #03c47e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.keepbar .keepbar-text .keepbar-desc {
    font-size: 12px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.keepbar .keepbar-btns .btn-cancel {
    margin-right: 16px;
    color: #03c47e;
    font-size: 12px
}

.keepbar .keepbar-btns .btn-confirm {
    border-radius: 14px
}

.keepbar .keepbar-btns .btn-confirm,.keepbar .keepbar-btns .g-Btn-grey {
    width: 64px;
    height: 26px;
    display: inline-block;
    line-height: 26px;
    text-align: center;
    font-size: 12px
}

.keepbar .keepbar-btns .g-Btn-grey {
    margin-right: 8px;
    border: 1px solid #61686f;
    border-radius: 14px;
    background-color: transparent;
    color: #8b969f
}

.keep-pay-recommend-bar {
    position: relative;
    height: 48px;
    padding: 0 12px;
    background-size: cover;
    background-position: 50%;
    border-radius: 4px
}

.keep-pay-recommend-bar.barbg {
    background-image: url(../img/bkg_bar@2x.6e793c0c.png)
}

.keep-pay-recommend-bar .pay-recommend-bar-con {
    white-space: nowrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    height: 100%;
    padding: 4px 0;
    box-sizing: border-box
}

.keep-pay-recommend-bar img {
    width: 40px;
    height: 40px;
    margin-right: 8px
}

.keep-pay-recommend-bar .icon {
    min-width: 12px
}

.keep-pay-recommend-bar .bar-right {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.keepbar.login-reward.login-reward-pc .keepbar-box {
    left: 16px;
    bottom: 16px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    box-shadow: none
}

.keepbar.login-reward .keepbar-box {
    display: block;
    padding: 0;
    background-color: transparent;
    z-index: 900;
    box-shadow: none
}

.keepbar.login-reward .reward-img {
    width: 100%
}

@media only screen and (max-width: 375px) {
    .keepbar .keepbar-box {
        padding:8px 10px
    }
}

@media only screen and (max-width: 320px) {
    .keepbar .keepbar-time span {
        display:none
    }
}

@media only screen and (max-height: 720px) {
    .keepbar .keepbar-box {
        bottom:54px;
        bottom: -webkit-calc(54px + constant(safe-area-inset-bottom));
        bottom: calc(54px + constant(safe-area-inset-bottom));
        bottom: -webkit-calc(54px + env(safe-area-inset-bottom));
        bottom: calc(54px + env(safe-area-inset-bottom))
    }
}

.keepbar-layout-pc .keepbar-box {
    left: 50%;
    right: auto;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 305px
}

.keepbar-layout-pc .keepbar-box .pay-promotion-bar {
    border-radius: 4px 4px 0 0
}

.qqgroup .qqlabel {
    box-sizing: border-box;
    max-width: 100%;
    height: 36px;
    line-height: 34px;
    border-radius: 36px;
    border: 1px solid #35404c;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.qqgroup .qqlabel .grouppointer {
    cursor: pointer;
    color: #b4c0c9
}

.qqgroup .qqlabel .grouppointer:hover {
    color: #fff
}

.qqgroup .qqlabel>i {
    min-width: 20px;
    margin-right: 8px
}

.qqgroup .officialgroup,.qqgroup .qqlabel>span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.qqgroup .officialgroup {
    box-sizing: border-box;
    max-width: 100%;
    height: 36px;
    line-height: 34px;
    border-radius: 36px;
    border: 1px solid #35404c;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    color: #8b969f
}

.qqgroup .officialgroup .grouppointer {
    cursor: pointer;
    color: #b4c0c9
}

.qqgroup .officialgroup .grouppointer:hover {
    color: #fff
}

.qqgroup p {
    color: #b4c0c9;
    margin-left: 20px
}

.viphistory ul>li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 16px
}

.viphistory ul>li:last-child .history-con {
    border-bottom: 0
}

.viphistory .g-circle-gray {
    width: 48px;
    height: 48px
}

.viphistory .g-circle-gray .icon {
    width: 24px;
    height: 24px
}

.history-con {
    margin-left: 16px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative
}

.history-con:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #182128;
    overflow: hidden;
    bottom: -16px
}

.history-con>div:last-child {
    text-align: right;
    white-space: nowrap;
    margin-left: 10px
}

.history-img {
    width: 48px
}

.history-img img {
    width: 100%;
    display: block
}

.history-name {
    color: #fff
}

.history-time {
    margin-top: 8px;
    color: #8b969f
}

.history-price {
    color: #fff
}

.history-empty {
    padding: 20px 0;
    text-align: center;
    color: #ccc
}

.history-nav>div {
    font-size: 16px!important;
    margin: 0 12px!important;
    color: hsla(0,0%,100%,.5)
}

.history-nav .on {
    color: #fff;
    font-weight: 700;
    position: relative
}

.history-nav .on:after {
    content: "";
    width: 24px;
    height: 3px;
    border-radius: 2px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    background-color: #03c47e
}

.history-nav.history-nav-m .on:after {
    bottom: 12px
}

.topnav {
    height: 60px;
    height: -webkit-calc(60px + constant(safe-area-inset-top));
    height: calc(60px + constant(safe-area-inset-top));
    height: -webkit-calc(60px + env(safe-area-inset-top));
    height: calc(60px + env(safe-area-inset-top))
}

.topnav .topnav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    line-height: 60px;
    height: 60px;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    background: #1e2831
}

.topnav .topnav-fixed .topnav-back {
    position: absolute;
    padding: 0 20px;
    height: 60px;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.topnav .topnav-fixed .icon-vipclose {
    width: 24px;
    height: 24px
}

.topnav .topnav-fixed h1 {
    margin: 0;
    padding: 0 30px;
    text-align: center;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.topnav .topnav-fixed>nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.topnav .topnav-fixed>nav>div {
    margin: 0 16px;
    font-size: 12px
}

.topnav .topnav-fixed>nav .on {
    font-size: 14px;
    font-weight: 700
}

.topnav .topnav-fixed .nav-btn {
    position: absolute;
    top: 14px;
    right: 55px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 12px;
    background: #28333d;
    padding: 0;
    z-index: 2
}

.topnav .topnav-fixed .nav-btn .icon-playtogether-search {
    width: 16px;
    height: 16px
}

.topnav .subnav {
    padding-left: 52px;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.topnav .subnav h2 {
    font-size: 14px
}

.topnav .subnav .g-tag-purple {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    margin-left: -14px
}

.topnav-btns {
    position: absolute;
    top: 0;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    right: 0;
    right: constant(safe-area-inset-right);
    right: env(safe-area-inset-right)
}

.topnav-btns button {
    margin-right: 12px
}

.topnav-btns .btn-search {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 12px;
    background-color: #28333d;
    padding: 0
}

.topnav-btns .btn-search .icon {
    width: 16px;
    height: 16px
}

.topnav-btns .btn-feedback {
    width: 30px;
    height: 30px;
    border: 0;
    background-color: transparent;
    padding: 0
}

.topnav2 {
    min-height: 40px;
    box-sizing: border-box;
    padding-top: 12px;
    padding-top: -webkit-calc(12px + env(safe-area-inset-top));
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 12px;
    background-color: #1e2831
}

.topnav2,.topnav2 .nav-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.topnav2 .nav-title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.topnav2 .nav-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 16px;
    background: #28333d;
    margin-right: 12px;
    padding: 0
}

.topnav2 .nav-btn:last-of-type {
    margin-right: 0
}

@media only screen and (max-width: 768px) {
    .topnav2 {
        padding-left:40px;
        padding-right: 40px
    }
}

@media only screen and (max-width: 414px) {
    .topnav2 {
        padding-left:16px;
        padding-right: 16px
    }
}

.statusbar {
    position: fixed;
    top: 0;
    left: 2px;
    right: 2px;
    color: #fff;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    font-size: 14px;
    z-index: 999
}

.statusbar div {
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.faq {
    overflow: hidden
}

.faq .menulist {
    padding-top: 10px
}

.faq .menulist li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #ebebeb
}

.faq .menulist li:last-child {
    border-top: 1px solid #2f3c47;
    margin-top: 50px
}

.faq .menulist p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.faq .menulist .icon {
    margin-top: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.faq .faq_subtype {
    padding: 0 12px 14px;
    background: #1e2831;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    z-index: 10
}

.InMobile .menulist li:last-child {
    border-bottom: 1px solid #2f3c47
}

.InMobile .faq .menulist {
    padding-top: 52px
}

.faq-title {
    height: 22px;
    font-weight: 400;
    font-size: 14px;
    color: #a5a9ac;
    padding-left: 22px;
    padding-left: -webkit-calc(12px + env(safe-area-inset-left));
    padding-left: calc(12px + env(safe-area-inset-left));
    margin-bottom: 10px;
    overflow: hidden
}

.faq-feedback {
    top: 0;
    top: -webkit-calc(env(safe-area-inset-top));
    top: calc(env(safe-area-inset-top));
    bottom: 0;
    right: 0;
    cursor: pointer
}

.faq-detail {
    padding: 30px 20px;
    padding-left: -webkit-calc(20px + env(safe-area-inset-left));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: -webkit-calc(20px + env(safe-area-inset-right));
    padding-right: calc(20px + env(safe-area-inset-right));
    font-weight: 400!important;
    color: #b4c0c9;
    line-height: 1.8
}

.faq-detail h2 {
    color: #fff;
    font-weight: 400
}

.faq-detail h2:first-of-type+p {
    color: #a5a9ac;
    margin-bottom: 20px
}

.faq-detail h2:first-of-type+p .icon {
    margin-right: 4px;
    margin-top: -2px
}

.faq-detail p {
    margin-top: 10px
}

.faq-detail p span {
    color: #03c47e
}

.faq-detail img {
    max-width: 100%
}

.faq-confirm {
    width: 600px;
    max-width: 90%
}

.faq-confirm .menulist li:last-child {
    margin-top: 0
}

.faq-confirm .menulist li:hover {
    color: #fff;
    cursor: pointer
}

.faq-confirm .menulist2 {
    margin-top: 20px
}

.faq-confirm .menulist2 li {
    border-top: 1px solid #2f3c47;
    border-bottom: 1px solid #2f3c47
}

.faq-confirm .faq-detail {
    padding: 20px 10px
}

.InMobile .faq-confirm .cofirm-head h2 {
    opacity: 1;
    -webkit-flex-shrink: inherit;
    flex-shrink: inherit
}

.faq-scroll {
    height: 400px;
    overflow-y: auto
}

.faq-feedbackcon {
    padding-top: 36px;
    text-align: center
}

.faq-feedbackcon .g-Btn {
    margin-top: 16px
}

.faq-feedbackcon .icon {
    margin-left: 4px
}

.faqsearch .pagesearch .search-mobile {
    margin-bottom: 0
}

.faqsearch .faq .menulist {
    padding-top: 0
}

.faqsearch .faq .menulist .faqfont {
    color: #03c47e
}

@media only screen and (max-height: 674px) {
    .faq-scroll {
        height:300px
    }
}

@media only screen and (max-height: 400px) {
    .faq-scroll {
        height:140px
    }
}

.topic {
    margin-right: 38px;
    background: #28333d;
    border-radius: 4px;
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 120px
}

.topic2 {
    margin-left: 38px;
    margin-top:30px;
}

.topic>div {
    display: block;
    height: 70px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
    color: #fff;
    opacity: .5;
    cursor: pointer
}

.topic>div span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.topic>div.on,.topic>div:hover {
    opacity: 1;
    background: #304051
}

.topic>div.on {
    font-weight: 700
}

@media only screen and (max-width: 1024px) {
    .topic {
        margin-right:20px
    }

    .topic2 {
        margin-left:20px
    }

    .topic>div {
        padding-right: 16px;
        padding-left: 16px
    }
}

@media only screen and (max-width: 768px) {
    .topic {
        margin-right:10px
    }

    .topic2 {
        margin-left:10px
    }

    .topic>div {
        padding-right: 10px;
        padding-left: 10px
    }
}

.guide {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 10
}

.pagesetting .menulist {
    margin-top: 30px
}

.pagesetting .setting-logo {
    margin-top: 48px;
    text-align: center
}

.pagesetting .setting-logo img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.2)
}

.pagesetting .setting-text {
    margin-top: 8px;
    line-height: 24px;
    text-align: center;
    color: #8b969f
}

.pagesetting .setting-exit {
    margin-top: 40px;
    padding-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.pagesetting .setting-exit span {
    width: 240px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px
}

.pagesetting .setting-qq {
    margin-top: 20px
}

.pagesetting .setting-qq .qqlabel {
    padding-left: 3px
}

.pageabout {
    min-height: 100vh;
    background: #28333d;
    box-sizing: border-box
}

.pageabout .about-main {
    padding: 30px 20px
}

.pageabout .about-title {
    color: #fff
}

.pageabout li,.pageabout p {
    line-height: 1.5;
    letter-spacing: 1px
}

.pageabout p {
    margin-top: 14px;
    color: #b4c0c9
}

.pageabout ol {
    padding: 0;
    list-style-position: inside
}

.pageabout li,.pageabout ol {
    margin-top: 5px
}

.pageabout span {
    color: #03c47e
}

.pageabout .resetpc-btn {
    text-align: center;
    margin-top: 24px
}

.pageabout .resetpc-btn div {
    margin-top: 14px
}

.pageabout .resetpc-btn button {
    width: 100%
}

.pageabout .resetpc-btn .g-Btn-grey {
    border: 1px solid
}

.pagedownload {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto
}

.pagedownload .download-switch {
    height: 64px;
    margin-top: 50px;
    background-image: linear-gradient(122deg,rgba(53,74,96,.15),rgba(48,64,81,.4) 83%);
    box-shadow: 0 2px 50px 0 rgba(0,0,0,.1);
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pagedownload .download-switch .switch-icon {
    width: 244px;
    margin-right: 38px
}

.pagedownload .download-switch .switch-text {
    width: 436px
}

.pagedownload .download-switch .switch-text-small {
    width: 242px;
    display: none
}

.pagedownload ul {
    margin-top: 52px;
    margin-bottom: 100px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.pagedownload li {
    width: 31.11111111%;
    min-width: 304px;
    height: 450px;
    background-image: radial-gradient(50% 100% at 0 0,#354a60 39%,#304051 100%);
    box-shadow: 0 2px 50px 0 rgba(0,0,0,.1);
    border-radius: 4px;
    padding-top: 36px;
    box-sizing: border-box;
    text-align: center
}

.pagedownload .platform-name {
    line-height: 20px;
    color: #b4c0c9
}

.pagedownload .platform-name i {
    margin-right: 4px;
    vertical-align: middle
}

.pagedownload .platform-name span {
    vertical-align: middle
}

.pagedownload .platform-text {
    margin-top: 32px;
    line-height: 25px;
    color: #03c47e
}

.pagedownload .platform-img {
    height: 186px;
    box-sizing: border-box
}

.pagedownload .platform-img .platform-code {
    width: 112px;
    margin-top: 26px
}

.pagedownload .platform-img .platform-code-text {
    display: block;
    margin-top: 2px;
    color: #b4c0c9
}

.pagedownload .platform-img .platform-tv {
    width: 208px;
    margin-top: 24px
}

.pagedownload .platform-btns a {
    width: 208px;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-decoration: none
}

.pagedownload .platform-btns a:first-of-type {
    margin-top: 0
}

.pagedownload .platform-btns a.g-Btn-white {
    border: 1px solid #61686f;
    color: #8b969f;
    cursor: default
}

.pagedownload .platform-btns span {
    display: block;
    margin-top: 12px;
    line-height: 18px;
    color: #b4c0c9
}

.pagedownload .platform-pc {
    margin-top: 26px!important
}

@media only screen and (max-width: 1140px) {
    .pagedownload li {
        width:48.5%;
        margin-bottom: 20px
    }
}

@media only screen and (max-width: 860px) {
    .pagedownload li {
        width:100%;
        margin-bottom: 16px
    }

    .pagedownload .download-switch {
        height: 172px;
        padding-bottom: 16px;
        box-sizing: border-box;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end
    }

    .pagedownload .download-switch .switch-text {
        display: none
    }

    .pagedownload .download-switch .switch-text-small {
        display: inline-block;
        margin-top: 16px
    }
}

.ticketConfirm {
    width: 320px
}

.ticketConfirm .cofirm-cont {
    position: relative;
    border-top: 8px solid #04ba66;
    padding-top: 16px;
    padding-bottom: 40px;
    background-image: linear-gradient(211deg,#34495f 7%,#28333d 85%)
}

.ticketConfirm .cofirm-msg {
    padding-top: 0;
    padding-bottom: 0
}

.ticketConfirm.ticketConfirm_loading {
    width: 374px
}

.ticketConfirm.ticketConfirm_loading .cofirm-cont {
    padding-top: 42px;
    padding-bottom: 8px;
    border-top: 0;
    border-bottom: 7px solid #28333d;
    position: relative
}

.ticketConfirm.ticketConfirm_loading .cofirm-msg {
    text-align: center
}

.ticketConfirm.ticketConfirm_loading .cofirm-msg>p {
    margin-top: 16px;
    margin-bottom: 42px;
    font-size: 18px;
    color: #fff
}

.ticketConfirm.ticketConfirm_loading .cofirm-msg>p span {
    background: #2f3c47;
    border-radius: 24px;
    font-size: 12px;
    color: #b4c0c9;
    padding: 4px 12px;
    margin-left: 8px;
    margin-right: 8px;
    cursor: pointer
}

.ticketConfirm.ticketConfirm_loading .toast-progressBox {
    position: absolute;
    height: 7px;
    width: 100%;
    left: 0;
    bottom: -7px
}

.ticketConfirm.ticketConfirm_loading .toast-tips {
    margin-top: 24px;
    margin-bottom: -8px;
    text-align: center
}

.ticketConfirm.ticketConfirm_loading .toast-tips span {
    display: inline-block;
    background: #03c47e;
    border-radius: 10.5px 10.5px 10.5px 0;
    line-height: 20px;
    padding: 0 8px;
    font-size: 12px;
    color: #fff
}

.ticketConfirm2 {
    width: 320px
}

.ticketConfirm2 .cofirm-cont {
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(2%,#313f4c),to(#405971));
    background-image: linear-gradient(180deg,#313f4c 2%,#405971)
}

.ticketConfirm3 {
    width: 320px
}

.ticketConfirm3 .cofirm-cont {
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(2%,#313f4c),to(#405971));
    background-image: linear-gradient(180deg,#313f4c 2%,#405971);
    padding: 40px 0 0 0
}

.ticketConfirm3 .cofirm-cont .cofirm-msg {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.ticketConfirm3 .cofirm-cont .cofirm-btns,.ticketConfirm3 .cofirm-cont .cofirm-msg {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.ticketConfirm3 .cofirm-cont .cofirm-btns {
    height: 80px;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    background-color: #fff;
    margin-top: 46px;
    padding: 0 8px;
    border-radius: 0 0 4px 4px;
    background-size: 144px 34px;
    background-image: url(../img/download_logo.b17212ae.png);
    background-position: 16px;
    background-repeat: no-repeat
}

.ticketConfirm3 .cofirm-cont .cofirm-btns .g-Btn {
    width: 96px;
    height: 40px;
    line-height: 38px;
    padding: 0
}

.ticketConfirm4 {
    width: 320px
}

.ticketConfirm4 .cofirm-cont {
    background-size: 60px 60px,auto;
    background-image: url(../img/icon_flash.90bf429b.png),-webkit-gradient(linear,left top,left bottom,color-stop(2%,#313f4c),to(#405971));
    background-image: url(../img/icon_flash.90bf429b.png),linear-gradient(180deg,#313f4c 2%,#405971);
    background-position: center 30px,50%;
    background-repeat: no-repeat;
    padding-top: 116px;
    text-align: center
}

.ticketConfirm4 .cofirm-cont .cofirm-msg {
    margin-top: 12px;
    line-height: 28px;
    color: #b4c0c9
}

.ticketConfirm4 .cofirm-cont .cofirm-msg span {
    display: inline-block;
    padding: 2px;
    vertical-align: middle;
    line-height: 1;
    border: 1px solid #8b969f;
    border-radius: 8px;
    -webkit-transform: scale(.66);
    transform: scale(.66)
}

.ticketConfirm4 .cofirm-cont .cofirm-btns {
    margin-top: 30px
}

.ticket-subtitle {
    text-align: center
}

.ticket-subtitle>.icon {
    margin-bottom: 32px
}

.ticket-subtitle.ticket-subtitle2>h2 {
    color: #e7c68e
}

.ticket-subtitle.ticket-subtitle2 .icon-vip {
    width: 20px;
    height: 20px;
    margin-top: -2px;
    margin-right: 4px
}

.ticket-subtitle.ticket-subtitle2>p {
    text-align: left;
    margin-top: 8px;
    font-size: 14px
}

.ticket-btns {
    margin-top: 34px;
    margin-bottom: -8px
}

.ticket-btns.btn-col li {
    margin-top: 16px
}

.ticket-btns.btn-col li:first-child {
    margin-top: 0
}

.ticket-btns>li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer
}

.ticket-btns>li.btn-1 {
    position: relative;
    height: 48px;
    background-image: linear-gradient(172deg,#efdcb3,#e7c68e);
    border-radius: 24px;
    font-weight: 700;
    font-size: 16px;
    color: #2d3d4c
}

.ticket-btns>li.btn-1:hover {
    background: #efdcb3
}

.ticket-btns>li.btn-1 span {
    position: absolute;
    top: -10px;
    right: 0;
    background: #03c47e;
    border-radius: 10.5px 10.5px 10.5px 0;
    padding: 2px 8px;
    font-weight: 400;
    font-size: 12px;
    color: #fff
}

.ticket-btns>li.btn-2 {
    height: 40px;
    margin-top: 16px;
    background: #2f3c47;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    color: #03c47e
}

.ticket-btns>li.btn-2:hover {
    background-color: #304051
}

.ticket-btns>li.btn-3 {
    height: 20px;
    margin-top: 16px;
    font-size: 14px;
    color: #8b969f
}

.ticket-btns>li.btn-4 {
    height: 48px;
    border-radius: 24px;
    font-size: 16px
}

.ticket-btns>li .icon-vip2,.ticket-btns>li .icon-vip-pc {
    margin-right: 4px
}

.ticket-btns2 {
    margin-top: 35px
}

.ticket-btns2 a {
    width: 100%;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    margin-bottom: 16px;
    display: block
}

.ticket-btns2 a:last-of-type {
    margin-bottom: 0
}

.ticket-btns2 a:last-of-type.btn-exit {
    height: 20px;
    line-height: 20px;
    border: 0
}

.ticket-btns2 i {
    vertical-align: -7px;
    margin-right: 6px
}

.ticket-tag {
    padding: 1px 6px;
    border-radius: 20px;
    display: inline-block;
    background: #03c47e;
    margin-right: 2px;
    color: #fff
}

.ticket-tag span {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.ticket-tips {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(4,186,102,.1);
    font-size: 12px;
    padding: 6px
}

.ticket-message,.ticket-tips {
    color: #03c47e;
    text-align: center
}

.ticket-message {
    padding-top: 8px;
    padding-bottom: 20px;
    font-size: 14px
}

.ticket-img {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    margin-top: 20px;
    margin-bottom: 16px
}

.ticket-message2 {
    line-height: 2;
    color: #b4c0c9;
    padding: 8px 0;
    margin-top: 16px;
    margin-bottom: 28px;
    text-align: center;
    background: #304051;
    border-radius: 8px
}

.ticketConfirm5 {
    width: 320px
}

.ticketConfirm5.btn-reverse .cofirm-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.ticketConfirm5 .cofirm-cont {
    background-size: 238px 102px,auto;
    background-image: url(../img/img_membership_Oops.1cca1118.png),linear-gradient(211deg,#34495f 7%,#28333d 85%);
    background-position: center 30px,50%;
    background-repeat: no-repeat;
    padding-top: 150px;
    text-align: center
}

.ticketConfirm5 .cofirm-cont h2 {
    margin-top: 4px
}

.ticketConfirm5 .cofirm-cont .cofirm-msg {
    margin-top: 6px;
    line-height: 20px;
    min-height: 0;
    color: #b4c0c9
}

.ticketConfirm5 .cofirm-cont .cofirm-btns {
    margin-top: 26px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.ticketConfirm5 .cofirm-cont .cofirm-btns a {
    margin: 16px 0 0 0
}

.ticketConfirm5 .cofirm-cont .cofirm-btns a:first-of-type {
    margin-top: 0
}

.ticketConfirm5 .cofirm-cont .cofirm-btns .radio {
    margin-top: 12px
}

.ticketConfirm7.btn-reverse .cofirm-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.ticketConfirm7 .cofirm-cont {
    background-size: 176px 120px,auto;
    background-image: url(../img/pic_liningup.18277571.png),linear-gradient(211deg,#34495f 7%,#28333d 85%);
    background-position: top,50%;
    background-repeat: no-repeat;
    text-align: center;
    padding: 144px 28px 32px
}

.ticketConfirm7 .cofirm-cont .cofirm-msg {
    margin-top: 9px;
    line-height: 20px;
    min-height: 0;
    color: #b4c0c9
}

.ticketConfirm7 .cofirm-cont .confirm-cloudmobile2 p {
    padding-left: 10px
}

.ticketConfirm7 .cofirm-cont .confirm-cloudmobile2 p b {
    margin-right: 4px
}

.ticketConfirm7 .cofirm-cont .cofirm-btns {
    margin: 47px auto 0;
    width: 240px
}

.ticketConfirm7 .cofirm-cont .cofirm-btns a {
    margin: 16px 0 0 0;
    height: 48px;
    line-height: 48px;
    border-radius: 40px;
    font-size: 16px
}

.ticketConfirm7 .cofirm-cont .cofirm-btns a.g-Btn-white {
    background: #2f3c47;
    color: #03c47e;
    border-color: transparent;
    font-weight: 700
}

.ticketConfirm7 .cofirm-cont .cofirm-btns a.g-Btn-green2 {
    margin-top: 0
}

.ticketConfirm7 .cofirm-cont .cofirm-btns .radio {
    margin-top: 12px
}

.ticketConfirm8 .cofirm-btns.double a:first-of-type {
    background: #2f3c47;
    color: #03c47e;
    border: 0
}

.ticket-text {
    margin-top: 8px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    color: #b4c0c9
}

.ticket-btns3 {
    height: 36px;
    margin-top: 24px;
    margin-bottom: 16px;
    border-radius: 18px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer
}

.ticket-btns4 {
    margin: 32px
}

.ticket-exit {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.ticket-exit,.ticket-exit span {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.ticket-exit span {
    height: 36px;
    background: #2f3c47;
    padding: 0 20px;
    border-radius: 18px;
    color: #b4c0c9;
    cursor: pointer;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.ticket-exit span i {
    margin-right: 4px
}

.ticket-exit span:hover {
    background: #3b4a58;
    color: #fff
}

.ticket-exit span:first-of-type {
    color: #e7c68e;
    margin-right: 8px
}

.ticket-exit span:first-of-type:hover {
    color: #f4e1ba
}

.ticketConfirm6 {
    width: 320px
}

.ticketConfirm6 .cofirm-cont {
    background-size: 72px 72px,auto;
    background-image: url(../img/icon_menu_afk_l_white.636b7e86.png),linear-gradient(211deg,#34495f 7%,#28333d 85%);
    background-position: center 24px,50%;
    background-repeat: no-repeat;
    padding-top: 120px;
    text-align: center
}

.ticketConfirm6 .cofirm-cont .cofirm-msg {
    line-height: 24px;
    min-height: 0;
    color: #b4c0c9
}

.ticketConfirm6 .cofirm-cont .cofirm-btns {
    margin-top: 14px
}

.ticketConfirm6 .cofirm-cont .cofirm-btns a {
    width: 240px;
    height: 48px;
    line-height: 48px;
    border-radius: 24px
}

.ticketConfirm9 .cofirm-btns {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.ticketConfirm9 a {
    line-height: 36px
}

.ticketConfirm9 .radio {
    margin-top: 16px
}

.ticketConfirm10 .cofirm-cont {
    padding-top: 32px;
    padding-bottom: 16px;
    color: #fff
}

.ticketConfirm10 .cofirm-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.ticketConfirm10 .cofirm-btns a {
    margin-left: 0!important;
    margin-right: 0!important
}

.ticketConfirm10 .cofirm-btns a:first-of-type {
    margin-top: 8px;
    border: 0
}

.ticketConfirm11 .cofirm-cont {
    padding-top: 32px;
    padding-bottom: 32px;
    color: #fff
}

.ticketConfirm11 .cofirm-btns a {
    background: hsla(0,0%,100%,.3);
    border: 0;
    color: #fff;
    margin-right: 0
}

.ticketConfirm12 .cofirm-btns {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.ticketConfirm12 .g-Btn-white {
    border: 1px solid #03c47e;
    background: #03c47e;
    color: #fff
}

.ticketConfirm12 .g-Btn-white:hover {
    -webkit-transition: background-image 3s ease-in-out 1s;
    transition: background-image 3s ease-in-out 1s;
    background-image: radial-gradient(ellipse farthest-corner at bottom,#aafced 0,#03c47e 65%);
    border-color: #03c47e
}

.ticketConfirm12 .g-Btn-green2 {
    border: 1px solid #61686f;
    color: #8b969f;
    background: none
}

.ticketConfirm12 .g-Btn-green2:hover {
    border-color: #fff;
    color: #fff;
    background: none
}

.ticketConfirm13 {
    box-shadow: none;
    border-radius: 4px
}

.ticketConfirm13 .cofirm-cont {
    padding: 0;
    background: #fff url(../img/pic_popup_prize_bd_327@2x.226641e7.png) no-repeat;
    background-size: 100%
}

.ticketConfirm13 .confirm-main {
    padding: 28px 16px 0
}

.ticketConfirm13 .cofirm-msg {
    font-size: 16px;
    color: #1c1c1e;
    text-align: center;
    padding: 0 0 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.ticketConfirm13 .cofirm-msg span {
    color: #e35043;
    margin-top: 8px;
    display: block;
    font-weight: 700
}

.ticketConfirm13 .cofirm-btns {
    position: relative;
    padding: 0 16px 24px
}

.ticketConfirm13 .adspcConfirmCorner {
    position: absolute;
    right: 15px;
    top: -10px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background: url(../img/pic_tag_blue_20h@2x.6a2afaae.png) no-repeat;
    background-size: 100% 100%;
    margin: 0;
    letter-spacing: 2px
}

.ticketConfirm13 .adspcConfirmCorner i {
    font-size: 12px;
    font-style: normal;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    display: block
}

.ticketConfirm13 .adspcConfirmClose {
    position: absolute;
    width: 32px;
    height: 28px;
    top: 0;
    right: 0;
    background: url(../img/btn_PC_close_28h_nor@2x.4d53efb1.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer
}

.ticketConfirm13 .adspcConfirmCountdown {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 16px;
    font-size: 12px;
    color: rgba(227,80,67,.7);
    background: url(../img/btn_PC_close_28h_bd_nor@2x.88bd32ae.png) no-repeat;
    background-size: 100% 100%
}

.ticketConfirm13 .adspcConfirmCon {
    width: 327px
}

.ticketConfirm13 .adspcConfirmCon img,.ticketConfirm13 .adspcConfirmCon video {
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.08);
    cursor: pointer;
    display: block
}

.ticketConfirm13 .g-Btn {
    font-size: 16px;
    color: #fff;
    width: 295px;
    height: 48px;
    border-radius: 0;
    margin: 0;
    background: #fff url(../img/pic_btn_PC_KeepWatching_295_nor@2x.8647df0e.png) no-repeat;
    background-size: 100% 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    line-height: 20px
}

.ticketConfirm13 .g-Btn i {
    font-size: 12px;
    font-style: normal
}

.ticketConfirm14 .g-Btn {
    background-image: url(../img/pic_btn_PC_KeepWatching_295_disabled@2x.179da37e.png)
}

.liveConfirm .cofirm-cont {
    position: relative;
    padding-top: 40px;
    text-align: center
}

.liveConfirm .cofirm-cont>p {
    max-width: 234px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    color: #b4c0c9
}

.liveConfirm .cofirm-cont .code {
    width: 192px;
    height: 211px;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../img/pic_vrcodeBG.6cb4d218.png);
    background-size: 100% 100%;
    text-align: center
}

.liveConfirm .cofirm-cont .code img {
    width: 160px;
    height: 160px;
    margin-top: 16px
}

.liveConfirm .cofirm-cont .code p {
    margin-top: 4px;
    font-size: 12px;
    color: #8b969f
}

.liveConfirm .cofirm-cont .icon-close {
    position: absolute;
    right: -40px;
    top: 0
}

.liveMobileComfirm .cofirm-cont {
    padding-bottom: 32px
}

.liveMobileComfirm .cofirm-cont .ticket-btns2 {
    margin-top: 32px
}

.liveMobileComfirm .cofirm-cont p {
    max-width: 250px;
    text-align: left
}

.liveMobileComfirm .cofirm-cont .g-Btn {
    height: 40px;
    text-decoration: none;
    font-size: 16px
}

.liveMobileComfirm .cofirm-cont .btn-2 {
    background: #2f3c47
}

.liveMobileComfirm .cofirm-cont .btn-2:hover {
    background-color: #304051
}

.pcHighConfirm .cofirm-cont {
    padding-top: 32px;
    background-image: none
}

.pagesearch {
    padding: 16px;
    padding-top: 0;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.pagesearch .search-hot {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pagesearch .search-hot>li {
    width: 50%;
    position: relative
}

.pagesearch .search-hot>li:nth-child(2n) div {
    margin-left: 32px
}

.pagesearch .search-hot>li:nth-child(2n):before {
    position: absolute;
    content: "|";
    color: #304051;
    left: 0;
    top: 50%;
    margin-top: -8px
}

.pagesearch .search-hot>li:nth-child(odd) div {
    margin-right: 16px
}

.search-input>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.search-cancel {
    margin-left: 14px
}

.search-inputbox {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-left: 16px;
    padding-right: 8px
}

.search-inputbox>.icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.search-inputbox form {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.search-inputbox input {
    width: 100%;
    color: #fff;
    font-size: 14px;
    caret-color: #03c47e
}

.search-inputbox input::-webkit-input-placeholder {
    color: hsla(0,0%,100%,.3);
    font-size: 14px;
    line-height: normal
}

.search-mobile {
    margin-bottom: 50px;
    padding-top: 16px;
    padding-top: -webkit-calc(16px + env(safe-area-inset-top,20px));
    padding-top: calc(16px + env(safe-area-inset-top, 20px));
    height: 36px
}

.search-mobile>div {
    background: #1e2831;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    padding: 16px;
    padding-top: -webkit-calc(16px + env(safe-area-inset-top,20px));
    padding-top: calc(16px + env(safe-area-inset-top, 20px));
    box-sizing: border-box;
    z-index: 10
}

.search-mobile .search-inputbox {
    height: 36px;
    background: #2c3946;
    border-radius: 28px
}

.search-mobile .search-inputbox input::-webkit-input-placeholder {
    color: #899cb0
}

.search-mobile-nav .search-inputbox {
    pointer-events: none;
    background: #2c3946;
    border-radius: 28px;
    height: 32px
}

.search-mobile-nav .search-inputbox input::-webkit-input-placeholder {
    color: #899cb0
}

.search-pc .search-inputbox {
    height: 38px;
    border: 1px solid transparent;
    background: rgba(0,0,0,.16);
    border-radius: 4px;
    padding-right: 0;
    padding-left: 8px
}

.search-pc .search-inputbox:hover {
    outline: 1px solid hsla(0,0%,100%,.08)
}

.search-pc .search-inputbox .icon-serach-box {
    margin-left: 12px;
    width: 40px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: .5;
    border-left: 1px solid hsla(0,0%,100%,.08);
    box-sizing: border-box
}

.search-pc .search-inputbox .icon-serach-box:hover {
    height: 32px;
    border-left: 1px solid transparent;
    opacity: 1;
    cursor: pointer;
    background-color: hsla(0,0%,100%,.08);
    border-radius: 4px
}

.search-pc.on .search-inputbox {
    outline: 1px solid #03c47e
}

.search-tips {
    background: rgba(3,196,126,.1);
    border-radius: 4px;
    line-height: 32px;
    margin-bottom: 16px;
    margin-top: -34px;
    text-align: center;
    cursor: pointer
}

.search-tips .icon {
    vertical-align: -3px
}

.search-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    color: #8b969f
}

.search-history {
    margin-top: 16px;
    margin-bottom: 24px;
    max-height: 72px;
    overflow: hidden
}

.search-history>li {
    font-size: 12px;
    color: #b4c0c9;
    display: inline-block;
    padding: 4px 16px;
    background: #304051;
    border-radius: 14px;
    margin-bottom: 14px;
    margin-right: 8px;
    cursor: pointer
}

.search-history>li:hover {
    background: #03c47e;
    color: #fff
}

.search-hot {
    margin-top: 14px
}

.search-hot>li {
    font-size: 13px;
    color: #fff
}

.search-hot>li:first-of-type .search-num {
    color: #f43a3a
}

.search-hot>li:nth-child(2) .search-num {
    color: #f3ae1f
}

.search-hot>li:nth-child(3) .search-num {
    color: #03c47e
}

.search-hotkey {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 6px 0
}

.search-num {
    font-size: 16px;
    color: #8b969f;
    font-weight: 700;
    margin-right: 12px
}

.search-tag {
    color: #fff;
    border-radius: 8px;
    padding: 0 6px;
    height: 16px;
    display: inline-block;
    line-height: 14px;
    margin-left: 4px
}

.search-tag span {
    font-size: 12px;
    font-style: italic
}

.search-tag-hot {
    background: #c02222
}

.search-tag-new {
    background: #00ad6e
}

.searchitem {
    margin-top: 24px
}

.searchitem:first-of-type {
    margin-top: 18px
}

.searchitem>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.searchitem .g-Btn {
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    width: 72px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    height: 28px;
    line-height: 26px;
    font-size: 12px
}

.searchitem h2 {
    font-weight: 400
}

.searchitem h2+p {
    margin-top: 10px
}

.searchitem h2 p {
    font-size: 12px
}

.searchitem-img {
    width: 16.7%;
    max-width: 56px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.searchitem-img img {
    width: 100%;
    border-radius: 24%
}

.searchitem-img_pc {
    position: relative
}

.searchitem-img_pc img {
    border-radius: 4px
}

.searchitem-img_pc:before {
    content: "pc";
    position: absolute;
    top: 0;
    left: 0;
    width: 33px;
    height: 16px;
    line-height: 12px;
    border-top-left-radius: 4px;
    background-size: 100% 100%;
    background-image: url(../img/tag_pc.7ccf6d86.png);
    padding-left: 7px;
    box-sizing: border-box;
    font-size: 12px;
    color: #fff
}

.searchitem-intr {
    margin-left: 16px;
    margin-right: 16px;
    word-break: break-all;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.searchitem-intr h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.searchitem-intr p {
    color: #b4c0c9
}

.pcsearch {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-left: 16px;
    height: 40px;
    width: 394px;
    position: relative
}

.pcsearch-dialog {
    position: absolute;
    top: 56px;
    width: 100%;
    background: #28333d;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.5);
    border-radius: 4px;
    z-index: 11
}

.pcsearch-dialog>div {
    padding: 24px 16px 8px
}

.pcsearch-dialog .search-hot {
    cursor: pointer
}

.pcsearch-dialog .search-hot>li {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px
}

.pcsearch-dialog .search-hot>li:hover {
    background: #304051
}

.pcpagesearch .searh-result {
    padding-top: 56px;
    min-height: 320px
}

.pcpagesearch .searh-result>ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.pcpagesearch .searh-result>ul>li {
    width: 50%;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 16px
}

.pcpagesearch .searh-result>ul>li:nth-child(2n) {
    padding-left: 8px
}

.pcpagesearch .searh-result>ul>li:nth-child(odd) {
    padding-right: 8px
}

.pcpagesearch .searh-result>ul>li>div {
    padding: 40px;
    height: 100%;
    box-sizing: border-box;
    background: #28333d;
    border-radius: 4px
}

.pcpagesearch .searh-result .title {
    margin-bottom: 16px;
    font-size: 20px;
    color: #fff;
    font-weight: 600
}

.pcpagesearch .searh-result .title .f12 {
    font-weight: 400
}

.pcpagesearch .searh-result .search-pc-cards {
    background: transparent
}

.pcpagesearch .searh-result .search-pc-cards .cards-title {
    padding: 0;
    margin-bottom: 8px
}

.pcpagesearch .searh-result .search-pc-cards .cards-title span {
    font-size: 20px;
    color: #fff;
    font-weight: 600
}

.pcpagesearch .searh-result .search-pc-cards .cards-title sub {
    font-size: 12px;
    color: #fff;
    font-weight: 400
}

.pcpagesearch .searh-result .search-pc-cards .cards-title button {
    background: transparent;
    border: 0;
    font-size: 16px;
    color: #8b969f;
    font-weight: 400;
    cursor: pointer
}

.pcpagesearch .searh-result .search-pc-cards .cards-list {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.pcpagesearch .searh-result .search-pc-cards .card-item {
    width: -webkit-calc(25% - 12px);
    width: calc(25% - 12px);
    margin-bottom: 16px;
    margin-right: 16px
}

.pcpagesearch .searh-result .search-pc-cards .card-item:nth-child(4n+4) {
    margin-right: 0
}

.pcpagesearch .searh-result .search-pc-cards .card-top {
    padding: 0 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pcpagesearch .searh-result .search-pc-cards .card-top .card-item-user {
    height: 60px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pcpagesearch .searh-result .search-pc-cards .card-top .card-item-user span {
    font-size: 14px
}

.pcpagesearch .searh-result .search-pc-cards .card-top .article {
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 14px;
    color: #03c47e;
    text-align: right;
    overflow: hidden
}

.pcpagesearch .searh-result .search-pc-cards .card-top .article span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pcpagesearch .searh-result .search-pc-cards .card-top .article img {
    margin-left: 2px;
    width: 6px
}

.pcpagesearch .searh-result .search-pc-cards .card-item {
    background: #304051;
    border-radius: 4px
}

.pcpagesearch .searh-result .search-pc-cards .card-item.status-empty .card-item-content {
    height: 98px;
    -webkit-line-clamp: 5;
    margin-bottom: 20px
}

.pcpagesearch .searh-result .search-pc-cards .card-item.status-empty .card-item-game {
    display: none
}

.pcpagesearch .searh-result .search-pc-cards .card-item-user {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 34px
}

.pcpagesearch .searh-result .search-pc-cards .card-item-user span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 4px;
    font-size: 12px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pcpagesearch .searh-result .search-pc-cards .card-item-content {
    cursor: pointer;
    height: 58px;
    padding: 0 16px;
    line-height: 17px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all
}

.pcpagesearch .searh-result .search-pc-cards .card-item-content span {
    color: #03c47e
}

.pcpagesearch .searh-result .search-pc-cards .card-item-content a {
    text-decoration: none
}

.pcpagesearch .searh-result .search-pc-cards .card-item-game {
    height: 48px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-top: 1px solid hsla(0,0%,100%,.1);
    background-image: linear-gradient(153deg,#40515f,#304051 95%);
    margin-top: 12px;
    border-radius: 0 0 4px 4px;
    padding: 0 16px;
    font-size: 12px;
    color: #8b969f
}

.pcpagesearch .searh-result .search-pc-cards .card-item-game span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size: 12px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pcpagesearch .searh-result .search-pc-cards .card-item-game .g-Btn {
    width: 64px;
    height: 24px;
    line-height: 22px;
    margin-left: 12px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 0;
    font-size: 12px
}

.pcpagesearch .searh-result .hox-result .hot-text {
    margin-bottom: 16px;
    padding: 0 8px;
    height: 40px;
    background: #28333d;
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: left;
    -webkit-justify-content: left;
    justify-content: left;
    font-size: 14px;
    cursor: pointer
}

.pcpagesearch .searh-result .hox-result .hot-text .hot-icon {
    width: 20px;
    height: 20px
}

.pcpagesearch .searh-result .hox-result .hot-text .text {
    margin: 0 4px 0 8px;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pcpagesearch .searh-result .hox-result .hot-image img {
    width: 100%;
    border: 1px solid hsla(0,0%,100%,.08);
    box-sizing: border-box;
    border-radius: 8px;
    cursor: pointer
}

.pcpagesearch .search-title {
    display: none
}

.pcpagesearch .searchitem .g-Btn {
    width: 80px;
    height: 32px;
    line-height: 30px;
    font-size: 14px
}

.pcpagesearch .searchitem-img {
    width: 24%;
    max-width: 80px
}

.pc-serachicon {
    position: relative;
    cursor: pointer;
    margin-top: -26px;
    margin-left: -20px;
    width: 24px;
    height: 24px
}

.search_pc_tab {
    margin-bottom: 16px;
    border: 0;
    height: 42px
}

.search_pc_tab h2 {
    color: hsla(0,0%,100%,.5);
    font-size: 20px;
    margin-right: 24px;
    font-weight: 400;
    cursor: pointer
}

.search_pc_tab h2.on {
    color: #fff;
    font-weight: 700
}

@media only screen and (max-width: 1280px) {
    .pcpagesearch .searh-result .search-pc-cards .card-item .card-item-content,.pcpagesearch .searh-result .search-pc-cards .card-item .card-item-game,.pcpagesearch .searh-result .search-pc-cards .card-item .card-top {
        padding:0 8px
    }
}

@media only screen and (max-width: 1024px) {
    .pcsearch {
        width:340px
    }

    .pcpagesearch .searh-result>ul>li>div {
        padding-left: 24px;
        padding-right: 24px
    }

    .pcpagesearch .searh-result .search-pc-cards .card-item {
        width: -webkit-calc(50% - 8px);
        width: calc(50% - 8px);
        margin-right: 0
    }

    .pcpagesearch .searh-result .search-pc-cards .card-item:nth-child(odd) {
        margin-right: 16px
    }

    .pcpagesearch .searh-result .search-pc-cards .card-item .card-item-content,.pcpagesearch .searh-result .search-pc-cards .card-item .card-item-game,.pcpagesearch .searh-result .search-pc-cards .card-item .card-top {
        padding: 0 16px
    }
}

@media only screen and (max-width: 768px) {
    .pcsearch {
        margin-left:0;
        width: 100%;
        margin-top: 32px
    }

    .pcsearch .icon-cancel {
        display: block!important
    }

    .pcpagesearch .searh-result>ul>li {
        width: 100%;
        padding-right: 0!important;
        padding-left: 0!important
    }
}

@media only screen and (max-width: 500px) {
    .pcpagesearch .searh-result .search-pc-cards .card-item {
        width:100%;
        margin-right: 0
    }

    .pcpagesearch .searh-result .search-pc-cards .card-item:nth-child(odd) {
        margin-right: 0
    }

    .pcpagesearch .searh-result .search-pc-cards .card-item .card-item-content,.pcpagesearch .searh-result .search-pc-cards .card-item .card-item-game,.pcpagesearch .searh-result .search-pc-cards .card-item .card-top {
        padding: 0 16px
    }
}

@media only screen and (max-width: 414px) {
    .pcpagesearch .searh-result>ul>li>div {
        padding-left:24px;
        padding-right: 24px
    }
}

.pagesearch .searchitem-intr h2 {
    line-height: 22px
}

.pagesearch .searchitem-intr h2+p {
    margin-top: 2px;
    font-size: 12px;
    color: #b4c0c9
}

.pagesearch .follow-list {
    background: transparent;
    padding: 0!important;
    margin-top: 16px
}

.pagesearch .follow-list li {
    border-radius: 4px;
    padding: 12px 8px;
    margin-bottom: 8px;
    background: #28333d
}

.pagesearch .follow-list .user-avatar {
    -webkit-align-self: self-start;
    align-self: self-start;
    width: 48px!important;
    height: 48px!important
}

.pagesearch .follow-list .g-Btn.btn-long {
    -webkit-align-self: self-start;
    align-self: self-start;
    margin-top: 10px;
    width: 72px
}

.pagesearch .follow-list .user-info-label>span {
    margin-top: 6px
}

.search-detail .nav-sticky {
    margin-bottom: 16px
}

.search-detail .nav-sticky .sticky-box {
    background: #1e2831
}

.search-detail .subnavBox {
    height: 30px;
    box-sizing: border-box;
    padding-bottom: 6px;
    overflow: auto hidden
}

.search-detail .subnavBox::-webkit-scrollbar {
    display: none
}

.search-detail .subnavBox h2 {
    font-weight: 400;
    font-size: 16px;
    color: hsla(0,0%,100%,.5);
    margin-left: 24px;
    min-width: 35px
}

.search-detail .subnavBox h2[data-key=file_sharings] {
    min-width: 64px
}

.search-detail .subnavBox h2.on {
    color: #fff
}

.search-detail .subnavBox h2:first-child {
    margin-left: 0
}

.search-detail .detail-group {
    margin-bottom: 24px
}

.search-detail .detail-group .group-title {
    margin-bottom: 8px;
    line-height: 22px;
    font-size: 16px;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.search-detail .detail-group .group-title .more {
    font-size: 12px;
    color: #8b969f
}

.search-detail .detail-group .group-title .icon-me-arrow {
    width: 10px;
    height: 10px;
    vertical-align: middle;
    margin-top: -2px
}

.search-detail .game-cards {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.search-detail .game-cards li {
    width: auto;
    max-width: 33.33333333%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.search-detail .game-cards .gameitem-sharepc-mobile {
    border-radius: 3px;
    background: rgba(18,22,26,.2);
    margin: 6px auto 2px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: rgba(180,192,201,.85);
    text-shadow: 0 4px 4px rgba(0,0,0,.25);
    max-width: 100%
}

.search-detail .game-cards .gameitem-sharepc-mobile p {
    font-size: 12px;
    font-weight: 700;
    -webkit-transform: scale(.92);
    transform: scale(.92)
}

.search-detail .game-cards .gameitem-sharepc-mobile P:first-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.search-detail .game-cards .gameitem-sharepc-mobile i {
    min-width: 12px
}

.search-detail .detail-tips {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: #b4c0c9
}

.search-detail .hox-result .hot-text {
    margin-bottom: 16px;
    padding: 0 8px;
    height: 40px;
    background: #28333d;
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: left;
    -webkit-justify-content: left;
    justify-content: left;
    font-size: 14px;
    cursor: pointer
}

.search-detail .hox-result .hot-text .hot-icon {
    width: 20px;
    height: 20px
}

.search-detail .hox-result .hot-text .text {
    margin: 0 4px 0 8px;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.search-detail .hox-result .hot-image img {
    width: 100%;
    border: 1px solid hsla(0,0%,100%,.08);
    box-sizing: border-box;
    border-radius: 8px;
    cursor: pointer
}

.message .message-list {
    margin-left: 20px
}

.message .message-item {
    position: relative;
    padding: 12px 12px 12px 0;
    border-bottom: 1px solid #2f3c47;
    cursor: pointer
}

.message .message-item:last-child {
    border-bottom: 0
}

.message .message-item--readed .message-title {
    color: #61686f
}

.message .message-item--readed .message-title span:after {
    display: none
}

.message .message-item--readed .message-desc {
    color: #61686f
}

.message .message-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 80px;
    line-height: 22px;
    font-size: 16px;
    color: #fff
}

.message .message-title span {
    position: relative
}

.message .message-title span:after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    right: -10px;
    top: 0;
}

.message .message-time {
    position: absolute;
    top: 12px;
    right: 20px;
    line-height: 22px;
    font-size: 12px;
    color: #61686f
}

.message .message-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 4px;
    line-height: 22px;
    font-size: 14px;
    color: #b4c0c9;
    height: 42px
}

.message-detail {
    padding: 30px 20px;
    padding-left: -webkit-calc(20px + env(safe-area-inset-left));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: -webkit-calc(20px + env(safe-area-inset-right));
    padding-right: calc(20px + env(safe-area-inset-right));
    font-weight: 400!important;
    color: #b4c0c9;
    line-height: 1.8
}

.message-detail h2 {
    position: relative;
    color: #fff;
    font-weight: 400
}

.message-detail h2:first-of-type+p {
    color: #a5a9ac;
    margin-bottom: 20px
}

.message-detail h2:first-of-type+p .icon {
    margin-right: 4px;
    margin-top: -2px
}

.message-detail h2 .icon-back-menu {
    position: absolute;
    top: 7px;
    left: -20px;
    width: 16px;
    height: 16px
}

.message-detail p {
    margin-top: 10px
}

.message-detail p span {
    color: #03c47e
}

.message-detail img {
    max-width: 100%
}

.message-empty {
    line-height: 60px;
    text-align: center
}

.message-confirm {
    width: 600px;
    height: 528px;
    max-width: none
}

.message-confirm .cofirm-cont {
    padding: 0 32px
}

.message-confirm .message-dialog {
    height: 464px;
    overflow: auto
}

.message-confirm .message-item:hover .message-desc,.message-confirm .message-item:hover .message-title {
    color: #fff
}

.message-confirm .detail-main {
    height: 296px;
    overflow: auto
}

.message-entry {
    border: 0
}

.message-entry.entry-fixed {
    position: fixed;
    right: 0;
    top: 190px;
    z-index: 102;
    width: 40px;
    height: 40px;
    background: #304051;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
    border-radius: 20px 0 0 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer
}

.message-entry.entry-fixed .icon.red:after {
    border: 2px solid #304051
}

.message-entry .icon {
    position: relative
}

.message-entry .icon.red:after {
    content: attr(data-count);
    position: absolute;
    top: -5px;
    left: 12px;
    min-width: 20px;
    box-sizing: border-box;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    background: #e35043;
    border: 2px solid #1e2831;
    border-radius: 10px;
    line-height: 16px;
    padding: 0 4px;
    text-align: center;
    font-style: normal;
    font-size: 12px;
    color: #fff
}

.message-entry .icon.more:after {
    font-size: 0;
    background-image: url(../img/icon_message_ellipsis_white_10.3d422ff8.png);
    background-size: 12px 4px;
    background-repeat: no-repeat;
    background-position: 50%;
    width: 22px;
    height: 16px
}

.page-message .read-all-btn {
    position: absolute;
    bottom: 19px;
    right: 20px;
    background: #304051;
    border-radius: 11px;
    line-height: 22px;
    padding: 0 8px;
    font-size: 12px;
    color: #b4c0c9
}

.message-notice {
    padding: 16px 20px 0
}

.message-notice li {
    background: #304051;
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 16px;
    padding: 8px 0 8px 10px;
    position: relative
}

.message-notice li .message-icon {
    border-radius: 16px;
    background: #28333d;
    padding: 8px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    margin-right: 10px;
    display: inline-block
}

.message-notice li .message-icon i {
    margin-top: -2px
}

.message-notice li .notice-num {
    padding: 0 5px 0;
    background-color: #e35043;
    border-radius: 9px;
    font-size: 12px;
    min-width: 18px;
    min-height: 18px;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    line-height: 18px
}

.message-notice li .icon_message_arrow {
    width: 16px;
    position: absolute;
    top: 22px;
    right: 16px
}

.message-my-like {
    padding: 0 16px
}

.message-my-like li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #2f3c47
}

.message-my-like .like-info {
    margin-left: 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.message-my-like .user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 22px;
    font-size: 16px;
    color: #fff
}

.message-my-like .like-time {
    line-height: 17px;
    font-size: 12px;
    color: #61686f
}

.message-my-like .like-msg {
    margin-top: 8px;
    line-height: 20px;
    font-size: 14px;
    color: #8b969f
}

.message-my-like .like-msg .icon {
    width: 16px;
    height: 16px;
    margin-right: 2px
}

.message-my-like .art-info {
    margin-left: 8px
}

.message-my-like .art-info img,.message-my-like .art-info p {
    width: 68px;
    height: 68px
}

.message-my-like .art-info img {
    border: .5px solid rgba(30,40,49,.8);
    border-radius: 12px;
    object-fit: cover
}

.message-my-like .art-info p {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 17px;
    font-size: 12px;
    color: #8b969f
}

.message-my-like .art-info p span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.message-my-comment {
    padding: 0 16px
}

.message-my-comment li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #2f3c47
}

.message-my-comment .comment-info {
    margin-left: 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.message-my-comment .user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 22px;
    font-size: 16px;
    color: #fff
}

.message-my-comment .comment-time {
    line-height: 17px;
    font-size: 12px;
    color: #61686f
}

.message-my-comment .comment-msg {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 8px;
    line-height: 20px;
    font-size: 14px;
    color: #8b969f
}

.message-my-comment .comment-msg i {
    margin-left: 2px;
    vertical-align: -3px
}

.message-my-comment .art-info {
    margin-left: 8px
}

.message-my-comment .art-info img,.message-my-comment .art-info p {
    width: 68px;
    height: 68px
}

.message-my-comment .art-info img {
    border: .5px solid rgba(30,40,49,.8);
    border-radius: 12px;
    object-fit: cover
}

.message-my-comment .art-info p {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 17px;
    font-size: 12px;
    color: #8b969f
}

.message-my-comment .art-info p span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.pcgame-confirm {
    text-align: center
}

.pcgame-confirm .cofirm-head {
    height: 56px;
    background-image: url(../img/img_title_light.25c0c9e8.png);
    background-size: 100% 100%
}

.pcgame-confirm .cofirm-head h2 {
    padding: 16px 0;
    font-size: 18px;
    color: #fff
}

.pcgame-confirm .cofirm-cont {
    overflow: hidden
}

.pcgame-confirm .game-cover {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto
}

.pcgame-confirm .game-cover.pc {
    height: 128px
}

.pcgame-confirm .game-cover.pc:before {
    content: "pc";
    position: absolute;
    top: 0;
    left: 0;
    width: 33px;
    height: 16px;
    line-height: 12px;
    background-size: 100% 100%;
    background-image: url(../img/tag_pc.7ccf6d86.png);
    box-sizing: border-box;
    font-size: 12px;
    color: #fff
}

.pcgame-confirm .game-cover.pc img {
    border-radius: 4px
}

.pcgame-confirm .game-cover img {
    width: 100%;
    height: 100%;
    border-radius: 24%
}

.pcgame-confirm .confirm-main>p {
    margin-top: 20px;
    font-size: 16px;
    color: #03c47e
}

.pcgame-confirm .confirm-main>p i.icon-cloud-small {
    width: 20px;
    height: 12px;
    margin-right: 4px
}

.pcgame-confirm .confirm-main>p i.icon-tag-limit {
    margin-left: 6px
}

.pcgame-confirm .confirm-main>p+p,.pcgame-confirm .confirm-main>p.tips {
    margin-top: 0;
    font-size: 12px;
    color: #c9d2d9
}

.pcgame-confirm .confirm-main>p.normal {
    color: #fff
}

.pcgame-confirm .confirm-main span {
    color: #8b969f;
    line-height: 28px;
    margin-left: 4px
}

.pcgame-confirm .confirm-main span.text-delete {
    text-decoration: line-through
}

.pcgame-confirm .confirm-main .confirm-tips {
    color: #8b969f
}

.pcgame-confirm .confirm-main .confirm-tips p {
    margin-top: 2px;
    font-size: 12px;
    color: #c9d2d9
}

.pcgame-confirm .cofirm-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pcgame-confirm .cofirm-btns .g-Btn {
    width: 240px;
    height: 48px;
    margin-top: 16px;
    border-radius: 24px;
    line-height: 46px;
    font-size: 16px;
    font-weight: 400
}

.pcgame-confirm .cofirm-btns .radio {
    margin-top: 12px
}

.pcgame-confirm .bottom-tips {
    margin-top: 12px;
    margin-bottom: -6px;
    font-size: 12px
}

.pcgame-confirm .ultimate-info {
    margin-top: 16px;
    line-height: 23px;
    font-size: 16px!important;
    color: #03c47e
}

.pcgame-confirm .ultimate-subinfo {
    line-height: 23px;
    font-size: 14px!important;
    color: #c9d2d9
}

.pcgame-confirm .ultimate-tips {
    line-height: 17px;
    font-size: 12px!important;
    color: #c9d2d9
}

.pcgame-confirm .pcgame-extra {
    margin-top: 16px;
    opacity: .98;
    background: #304051;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
    border-radius: 4px;
    font-size: 14px
}

.pcgame-confirm .pcgame-extra.mobile-extra {
    border-radius: 20px 20px 0 0;
    position: fixed;
    bottom: 0;
    left: 0
}

.pcgame-confirm .pcgame-extra.mobile-extra .extra-conten .info {
    margin-right: 16px
}

.pcgame-confirm .pcgame-extra .extra-header {
    background: hsla(0,0%,100%,.06);
    border-radius: 4px 4px 0 0;
    height: 36px;
    color: #fff;
    text-align: center;
    line-height: 36px
}

.pcgame-confirm .pcgame-extra .extra-content {
    padding: 8px 16px 16px 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 12px
}

.pcgame-confirm .pcgame-extra .extra-content .info {
    margin-right: 8px;
    text-align: left;
    color: #8b969f;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pcgame-confirm .pcgame-extra .extra-content .g-Btn {
    width: 64px;
    height: 28px;
    text-align: center;
    line-height: 24px;
    border-radius: 15px;
    padding: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pcgame-confirm-tip,.pcgame-confirm-tip2 {
    margin-top: -20px;
    margin-bottom: 16px;
    margin-left: -32px;
    margin-right: -32px;
    height: 28px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 12px;
    color: #1e2831
}

.pcgame-confirm-tip2 {
    background-image: -webkit-gradient(linear,left top,right top,from(#08e3b5),to(#03c47e));
    background-image: linear-gradient(90deg,#08e3b5,#03c47e)
}

.pcgame-confirm-tip {
    background-image: -webkit-gradient(linear,left top,right top,from(#00f0ff),to(#00abff));
    background-image: linear-gradient(90deg,#00f0ff,#00abff)
}

.pcgame-confirm-html {
    font-size: 12px;
    margin-top: 20px
}

.pcgame-confirm-html h1 {
    font-size: 14px;
    margin: 4px 0
}

.pcgame-confirm-html .htmltext {
    margin-top: 20px;
    line-height: 1.8
}

@media only screen and (max-height: 500px) {
    .pcgame-confirm-html .htmltext {
        max-height:100px;
        overflow-y: auto
    }
}

.hang-scroll {
    overflow: auto;
    padding-bottom: 200px;
    padding-top: 100px
}

.hang-confirm {
    position: relative;
    width: 320px
}

.hang-confirm.tips p {
    margin-top: 16px
}

.hang-confirm.tips .cofirm-btns {
    margin-top: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.hang-confirm h2 {
    padding-left: 32px;
    background-image: url(../img/icon_menu_afk_s_white.a478d4df.png);
    background-size: 24px 24px;
    background-position: 0;
    background-repeat: no-repeat
}

.hang-confirm .cofirm-cont {
    padding: 20px
}

.hang-confirm .hang-form {
    margin-top: 16px
}

.hang-confirm .hang-input {
    margin-top: 12px;
    height: 48px
}

.hang-confirm .hang-input label {
    border-radius: 4px
}

.hang-confirm .hang-input:before {
    top: 108%;
    bottom: auto;
    display: none
}

.hang-confirm .cofirm-btns {
    margin-top: 18px;
    margin-left: -8px;
    margin-right: -8px
}

.hang-confirm .cofirm-btns a {
    height: 48px;
    line-height: 46px;
    border-radius: 24px;
    padding: 0;
    text-align: center
}

.hang-confirm .cofirm-btns a:first-of-type {
    width: 104px
}

.hang-confirm .cofirm-btns a:last-of-type {
    width: 160px!important
}

.hang-confirm .cofirm-btns a[disabled] {
    opacity: .5;
    cursor: not-allowed
}

.hang-confirm .cofirm-btns .radio {
    margin-top: 14px
}

.hang-confirm .icon-close {
    position: absolute;
    top: 0;
    left: 104%;
    width: 24px;
    height: 24px
}

.hang-confirm .icon-close.port {
    top: 106%;
    left: 50%;
    margin-left: -12px
}

.hang-confirm .hang-error {
    margin-top: 4px;
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    color: #e35043
}

@media only screen and (max-width: 414px) {
    .hang-confirm {
        min-width:0
    }
}

.slide-box,.slide-wrap {
    position: relative
}

.slide-wrap {
    overflow: hidden;
    border-radius: 4px
}

.slide-list {
    width: 768px;
    height: 352px;
    white-space: nowrap;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    font-size: 0
}

.slide-item {
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top
}

.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.slide-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background-image: url(../img/icon_CP_close_normal.3e736c2a.png);
    background-size: 100% 100%;
    background-color: transparent;
    -webkit-transform: translateX(56px);
    transform: translateX(56px);
    cursor: pointer;
    font-size: 0
}

.slide-close:hover {
    background-image: url(../img/icon_CP_close_hovered.79962e67.png)
}

.slide-trigger {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 10;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0
}

.slide-trigger span {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 3px;
    background: #fff;
    vertical-align: middle;
    opacity: .3;
    cursor: pointer
}

.slide-trigger span.active {
    opacity: 1
}

.slide-next,.slide-prev {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer
}

.slide-next.slide-prev,.slide-prev.slide-prev {
    left: 32px;
    background-image: url(../img/banner_arrow_left_normal.e697abf4.png)
}

.slide-next.slide-next,.slide-prev.slide-next {
    right: 32px;
    background-image: url(../img/banner_arrow_right_normal.1b1f7058.png)
}

.slide-next:hover.slide-prev,.slide-prev:hover.slide-prev {
    left: 32px;
    background-image: url(../img/banner_arrow_left_hover.2496f950.png)
}

.slide-next:hover.slide-next,.slide-prev:hover.slide-next {
    right: 32px;
    background-image: url(../img/banner_arrow_right_hover.37d2b90a.png)
}

.slide-animation-prev {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.slide-animation-next,.slide-animation-prev {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s
}

.slide-animation-next {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%)
}

.slide-animation-reset {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s
}

.slide-content {
    position: relative;
    height: 100%;
    border-radius: 4px;
    background-color: #28333d;
    background-size: cover;
    background-position: 50%;
    overflow: hidden
}

.slide-recommendation .slide-tag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    width: 123px;
    height: 40px;
    background-size: 100% 100%;
    line-height: 40px;
    padding-left: 16px;
    box-sizing: border-box;
    color: #fff
}

.slide-recommendation .slide-tag.slide-tag-pc {
    background-image: url(../img/icon_popup_tag_bg_pc.f142eaee.png)
}

.slide-recommendation .slide-tag.slide-tag-mobile {
    background-image: url(../img/icon_popup_tag_bg_mobile.eaa1de56.png)
}

.slide-recommendation .slide-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    line-height: 1.1;
    box-sizing: border-box;
    padding: 57px 216px 40px 32px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(58%,rgba(0,0,0,.6)),to(rgba(0,0,0,.81)));
    background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.6) 58%,rgba(0,0,0,.81))
}

.slide-recommendation .slide-info h4 {
    font-weight: 400;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.5)
}

.slide-recommendation .slide-info p {
    margin-top: 16px;
    color: #b4c0c9;
    text-shadow: 0 2px 4px rgba(0,0,0,.5)
}

.slide-recommendation .slide-info button {
    position: absolute;
    right: 32px;
    bottom: 40px;
    width: 160px;
    height: 56px;
    padding: 0;
    border-radius: 28px;
    font-weight: 400;
    text-align: center;
    color: #fff
}

.slide-advertisement {
    cursor: pointer
}

.slide-advertisement.sec_kill_activity {
    background-color: transparent
}

.slide.mobile .slide-list {
    width: 80vw;
    height: 36.66666667vw
}

.slide.mobile .slide-wrap {
    margin-right: 20px
}

.slide.mobile .slide-close {
    background-image: url(../img/icon_CP_close_hovered.79962e67.png);
    border: 2px solid #b4c0c9;
    -webkit-transform: translateX(26px);
    transform: translateX(26px)
}

.slide.mobile .slide-trigger span {
    width: 6px;
    height: 6px
}

.slide.mobile .slide-banner {
    font-size: 16px
}

.slide.popup.mobile.lock-portrait,.slide.popup.mobile.portrait {
    padding-bottom: 20px
}

.slide.mobile.lock-portrait .slide-list,.slide.mobile.portrait .slide-list {
    width: 80vw;
    height: 104.09638554vw
}

.slide.mobile.lock-portrait .slide-wrap,.slide.mobile.portrait .slide-wrap {
    margin-right: 0
}

.slide.mobile.lock-portrait .slide-close,.slide.mobile.portrait .slide-close {
    top: 100%;
    right: 50%;
    -webkit-transform: translate(50%,20px);
    transform: translate(50%,20px);
    background-image: url(../img/icon_CP_close_hovered.79962e67.png);
    border: 2px solid #b4c0c9
}

.slide.mobile.lock-portrait .slide-recommendation .slide-tag,.slide.mobile.portrait .slide-recommendation .slide-tag {
    width: 93px;
    height: 34px;
    line-height: 34px;
    padding-left: 10px
}

.slide.mobile.lock-portrait .slide-recommendation .slide-info,.slide.mobile.portrait .slide-recommendation .slide-info {
    height: auto;
    -webkit-box-pack: start;
    -webkit-justify-content: start;
    justify-content: start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 12px 20px 30px 20px;
    text-align: center
}

.slide.mobile.lock-portrait .slide-recommendation .slide-info p,.slide.mobile.portrait .slide-recommendation .slide-info p {
    margin-top: 11px
}

.slide.mobile.lock-portrait .slide-recommendation .slide-info button,.slide.mobile.portrait .slide-recommendation .slide-info button {
    position: static;
    height: 46px;
    margin-top: 22px
}

.slide.mobile.landscape.lock-portrait .slide-list {
    width: 61.48148148vh;
    height: 80vh
}

.slide.mobile.landscape.lock-portrait .slide-close {
    width: 28px;
    height: 28px;
    -webkit-transform: translate(50%,10px);
    transform: translate(50%,10px)
}

@media only screen and (max-width: 768px) {
    .slide.mobile.lock-portrait .slide-list,.slide.mobile.portrait .slide-list {
        width:78vw;
        height: 101.4939759vw
    }
}

.slide.banner {
    margin-bottom: 16px
}

.slide.banner .slide-wrap {
    height: 0;
    padding-top: 18%
}

.slide.banner .slide-wrap .slide-list {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.slide.banner .slide-wrap .slide-list .slide-content {
    border-radius: 0
}

.slide.banner.mobile {
    margin-bottom: 8px
}

.slide.banner.mobile .slide-wrap {
    padding-top: 36%;
    margin-right: 0
}

.slide.banner.mobile .slide-trigger {
    bottom: 4px;
    z-index: 0
}

.slide-banner {
    background-size: cover
}

.slide-banner .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    max-height: 50%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(53%,rgba(0,0,0,.4)),to(rgba(0,0,0,.8)));
    background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.4) 53%,rgba(0,0,0,.8));
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,.4);
    font-size: 28px;
    color: #fff
}

@media only screen and (max-width: 1440px) {
    .slide-banner .info {
        font-size:24px
    }
}

@media only screen and (max-width: 1280px) {
    .slide-banner .info {
        font-size:18px
    }
}

@media only screen and (max-width: 1024px) {
    .slide-banner .info {
        font-size:16px
    }
}

@media only screen and (max-width: 600px) {
    .slide-banner .info {
        font-weight:700
    }
}

.pick {
    overflow: hidden;
    width: 100%;
    text-align: center;
    height: 220px;
    position: relative
}

.pick li,.pick ul {
    padding: 0;
    list-style: none;
    margin: 0
}

.pick-ul {
    position: relative
}

.pick-line,.pick-list,.pick-wheel {
    position: absolute;
    left: 0;
    right: 0;
    top: 88px;
    pointer-events: none
}

.pick-line {
    z-index: 3
}

.pick-list {
    z-index: 2
}

.pick-wheel {
    z-index: 1
}

.pick-list {
    height: 44px;
    -webkit-transform: translateZ(110px);
    transform: translateZ(110px);
    background: #1e2831;
    overflow: hidden
}

.pick-list-item {
    color: #03c37e
}

.pick-list-item,.pick-wheel-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 44px;
    font-size: 18px
}

.pick-list-item.hidden,.pick-wheel-item.hidden {
    visibility: hidden;
    opacity: 0
}

.pick-wheel {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    height: 44px
}

.pick-wheel-item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    color: hsla(0,0%,100%,.5)
}

.pick-tips {
    background: rgba(3,195,126,.3);
    font-size: 14px;
    color: #03c37e;
    padding: 4px 10px
}

.pick-tip2 {
    position: absolute;
    width: 50%;
    top: 88px;
    height: 44px;
    z-index: 10;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #8b969f
}

.pick-tip2 span {
    margin-left: 20px;
    margin-right: 20px
}

.checkin .sticky.fixed-status .sticky-box {
    box-shadow: 0 4px 2px rgba(0,0,0,.5)
}

.checkin .checkin-header {
    padding-bottom: 16px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.checkin .checkin-header h2 {
    font-size: 14px;
    color: #fff;
    opacity: .7
}

.checkin .checkin-header h2 span {
    color: #03c47e
}

.checkin .checkin-header .rule-link {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #03c47e;
    position: relative;
    z-index: 1;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.checkin .checkin-main .section {
    position: relative
}

.checkin .checkin-main .section .sequence {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.checkin .checkin-main .section .sequence .day {
    width: 24px;
    height: 24px;
    margin: auto;
    box-sizing: border-box;
    border: 1px solid #8b969f;
    border-radius: 100%;
    text-align: center;
    line-height: 22px;
    color: #8b969f;
    position: relative;
    z-index: 2;
    background: #1e2831;
    cursor: pointer
}

.checkin .checkin-main .section .sequence .day span {
    display: block;
    font-size: 12px;
    -webkit-transform: scale(.83);
    transform: scale(.83);
    *font-size: 10px
}

.checkin .checkin-main .section .sequence .day:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 8px;
    border-color: transparent;
    border-bottom-color: #28333d;
    display: none;
    position: absolute;
    bottom: -27px;
    left: 3px
}

.checkin .checkin-main .section .sequence .day:hover {
    color: #fff;
    border-color: #fff
}

.checkin .checkin-main .section .sequence .day.disabled {
    border: 0 none;
    background: url(../img/icon_checkin_dailychecked.5bf20a72.png) 50% no-repeat;
    background-size: contain;
    text-indent: -9999px
}

.checkin .checkin-main .section .sequence .day.cur:after {
    display: block
}

.checkin .checkin-main .section .sequence i {
    width: 8px;
    height: 1px;
    background: #8b969f;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-top: 13px
}

.checkin .checkin-main .section .sequence i:last-child {
    display: none
}

.checkin .checkin-main .section .sequence i.disabled {
    background: #03c47e
}

.checkin .checkin-main .section .award {
    position: relative;
    width: 100%;
    min-height: 222px;
    background: url(../img/img_present_enrollmentBGPC.7bb99278.png) no-repeat;
    background-size: cover;
    margin-top: 26px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    border-radius: 4px;
    padding: 24px 0 24px
}

.checkin .checkin-main .section .award:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 8px;
    border-color: transparent;
    border-bottom-color: #28333d;
    display: block;
    position: absolute;
    top: -20px;
    display: none
}

.checkin .checkin-main .section .award .text {
    line-height: 28px;
    font-size: 12px;
    color: #b4c0c9;
    margin-bottom: 32px;
    text-align: center;
    letter-spacing: 1px
}

.checkin .checkin-main .section .award .text span {
    color: #03c47e;
    font-size: 14px;
    vertical-align: top
}

.checkin .checkin-main .section .award .text i {
    color: #03c47e;
    margin-right: 5px;
    font-style: normal
}

.checkin .checkin-main .section .award .text i:last-child {
    cursor: pointer
}

.checkin .checkin-main .section .award span.disabled {
    color: #8b969f
}

.checkin .checkin-main .section .award span.disabled i {
    color: #8b969f;
    font-size: 12px;
    border-radius: 4px;
    background: hsla(0,0%,100%,.08);
    padding: 0 4px;
    -webkit-transform: scale(.84);
    transform: scale(.84);
    display: inline-block;
    line-height: 20px
}

.checkin .checkin-main .section .g-Btn {
    display: block;
    width: 120px;
    position: relative;
    z-index: 1;
    font-weight: 400;
    font-size: 16px
}

.checkin .checkin-main .section .g-Btn.sign {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    color: #b4c0c9;
    font-weight: 700;
    border-top-color: #3e4851;
    border-bottom-color: #5b6d7e;
    font-size: 14px
}

.checkin .checkin-main .section .g-Btn.sign_ads {
    padding: 0
}

.checkin .checkin-main .section .g-Btn.sign_ads span {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    display: block
}

.checkin .checkin-main .section .g-Btn i {
    font-weight: 400;
    font-style: normal
}

.checkin .checkin-main .section .g-Btn .desc_line {
    width: 1px;
    height: 10px;
    display: inline-block;
    margin: 0 4px;
    background-color: hsla(0,0%,100%,.2);
    vertical-align: middle
}

.checkin .checkin-main .section:first-child .sequence:before,.checkin .checkin-main .section:last-child .sequence:after {
    content: none
}

.checkin .checkin-main .section.meter {
    position: fixed;
    top: 60px;
    top: -webkit-calc(60px + constant(safe-area-inset-top));
    top: calc(60px + constant(safe-area-inset-top));
    top: -webkit-calc(60px + env(safe-area-inset-top));
    top: calc(60px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    z-index: 10;
    font-size: 12px;
    color: #a5a9ac;
    background: #1e2831;
    border-bottom: 0 none
}

.checkin .checkin-main .section.meter span:first-child {
    padding: 15px 8px;
    box-sizing: border-box
}

.checkin .checkin-main .section.meter span:first-child:after,.checkin .checkin-main .section.meter span:first-child:before {
    display: none
}

.checkin .checkin-main .section.meter span:last-child {
    margin-right: 88px;
    padding-top: 15px;
    padding-bottom: 15px
}

.checkin .checkin-main .section.meter span:last-child:before {
    display: none
}

.checkin .checkin-main .section.active .sequence:before {
    background: #03c47e
}

.checkin .checkin-main .section.active .award .text {
    color: #03c47e
}

.checkin .checkin-main .section.active .award .text .vip {
    color: #e4bf84;
    -webkit-mask-image: -webkit-gradient(linear,left top,left bottom,from(#f3e1ba),to(#e4bf84))
}

.checkin .checkin-main .section.disabled+div .sequence:before,.checkin .checkin-main .section.disabled .sequence:after,.checkin .checkin-main .section.disabled .sequence:before {
    background: #03c47e
}

.checkin .checkin-main .section.disabled .award:before {
    content: none
}

.checkin .checkin-main .section.disabled .award .text {
    color: #b4c0c9;
    opacity: .5
}

.checkin .checkin-main .section.disabled .award .text .vip {
    color: #e4bf84;
    -webkit-mask-image: -webkit-gradient(linear,left top,left bottom,from(#f3e1ba),to(#e4bf84))
}

.checkin .chekin-model-live {
    border-top: 1px solid hsla(0,0%,100%,.1);
    padding: 16px 16px 24px
}

.checkin .livecontent {
    padding: 0 16px 24px
}

.checkin .livecontent li {
    margin-bottom: 24px
}

.checkin .livecontent li>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.checkin .livecontent li:last-child {
    margin-bottom: 32px
}

.checkin .livecontent li .title {
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 4px
}

.checkin .livecontent li .desc {
    font-size: 12px;
    color: #b4c0c9
}

.checkin .livecontent li .desc i {
    margin: -2px 2px 0 0
}

.checkin .livecontent li .tip {
    font-size: 12px;
    margin-top: 4px;
    color: rgba(180,192,201,.5);
    letter-spacing: 0;
    background: hsla(0,0%,100%,.05);
    border-radius: 11px;
    padding: 2px 8px;
    display: inline-block
}

.checkin .livecontent li button {
    border: 0;
    padding: 0;
    width: 100px;
    min-width: 100px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 20px;
    font-weight: 700;
    margin-right: -8px
}

.checkin .livecontent li button.disabled {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    box-sizing: border-box;
    color: #b4c0c9;
    border-top-color: #3e4851;
    border-bottom-color: #5b6d7e
}

.checkin .livecontent li button.g-Btn {
    margin: 0 -8px 0 0
}

.checkin .livecontent .g-Btn {
    margin: 0 auto;
    display: block
}

.checkin .tips {
    margin: 8px 0 10px;
    text-align: center;
    font-size: 12px;
    color: #61686f;
    line-height: 28px
}

.checkin .tips:after,.checkin .tips:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 1px;
    background: #61686f
}

.checkin .tips:before {
    margin-right: 6px
}

.checkin .tips:after {
    margin-left: 6px
}

.checkin.mobile {
    padding: 0 16px 20px
}

.checkin.mobile .subnav {
    background: #1e2831;
    overflow: auto
}

.checkin.mobile .subnav::-webkit-scrollbar {
    display: none
}

.checkin.mobile .subnav .subnavBox {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 16px
}

.checkin.mobile .subnav .subnavBox h2 {
    margin-right: 24px;
    text-align: center;
    position: relative
}

.checkin.mobile .subnav .subnavBox h2 .red,.checkin.mobile .subnav .subnavBox h2 .special {
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_ME_growth.faf673c4.png);
    background-size: 100%
}

.checkin.mobile .subnav .subnavBox h2 .red span,.checkin.mobile .subnav .subnavBox h2 .special span {
    display: none
}

.checkin.mobile .subnav .subnavBox h2 .red {
    right: -6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e35043
}

.checkin.mobile .subnav .subnavBox h2 .gift_expire,.checkin.mobile .subnav .subnavBox h2 .gift_new {
    border-radius: 4px;
    background: #03c47e;
    display: block;
    position: absolute;
    border-radius: 4px 4px 4px 0;
    height: 14px;
    right: -25px;
    top: -6px
}

.checkin.mobile .subnav .subnavBox h2 .gift_expire>span,.checkin.mobile .subnav .subnavBox h2 .gift_new>span {
    font-weight: 500;
    color: #fff;
    font-size: 12px;
    display: block;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    -webkit-transform-origin: top;
    transform-origin: top
}

.checkin.mobile .subnav .subnavBox h2 .gift_new {
    right: -11px;
    padding: 0 2px 0 3px
}

.checkin.mobile .subnav .subnavBox h2.on {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.checkin.mobile .checkin-header {
    padding: 16px
}

.checkin.mobile .checkin-main {
    min-height: 292px;
    background: url(../img/img_present_enrollmentBG.6d1da400.png) bottom no-repeat;
    background-size: 100%;
    padding: 8px 16px 0
}

.checkin.mobile .section .sequence {
    margin-right: 0;
    white-space: nowrap;
    height: 32px
}

.checkin.mobile .section .sequence:after,.checkin.mobile .section .sequence:before {
    left: 35px
}

.checkin.mobile .section .sequence .day {
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 12px;
    background: #28333d
}

.checkin.mobile .section .sequence .day span {
    font-size: 12px;
    -webkit-transform: none;
    transform: none;
    *font-size: 12px
}

.checkin.mobile .section .sequence .day:after {
    left: 8px
}

.checkin.mobile .section .sequence i {
    margin-top: 16px
}

.checkin.mobile .section .award {
    height: auto;
    margin-top: 0;
    text-align: center;
    background: none
}

.checkin.mobile .section .award .text {
    line-height: 28px;
    font-size: 14px
}

.checkin.mobile .section.active .award:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: url(../img/img_checkin_pattern.b822a1b1.png) 100% 0 no-repeat;
    background-size: contain;
    opacity: .24
}

.checkin.mobile .checkin-scroll {
    height: auto
}

.checkin.mobile .tips {
    margin: 12px 0
}

.checkin.mobile .tips:after,.checkin.mobile .tips:before {
    content: none
}

.checkin .gift-link,.checkin .invite-link {
    display: block;
    width: 100%;
    max-width: 480px;
    height: 118px;
    margin: 20px auto;
    cursor: pointer
}

.checkin .gift-link.invite-link,.checkin .invite-link.invite-link {
    background: url(../img/img_present_invitation_normal.bb680d6f.png) no-repeat;
    background-size: 100%
}

.checkin .gift-link.gift-link,.checkin .invite-link.gift-link {
    background: url(../img/img_present_freeredeem_normal.38116b15.png) no-repeat;
    background-size: 100%
}

.checkin .gift-link:hover.invite-link,.checkin .invite-link:hover.invite-link {
    background-image: url(../img/img_present_invitation_hover.c1f2e77f.png)
}

.checkin .gift-link:hover.gift-link,.checkin .invite-link:hover.gift-link {
    background-image: url(../img/img_present_freeredeem_hover.721e87a9.png)
}

.checkin .checkin-btn {
    font-size: 14px;
    display: block;
    width: 108px;
    height: 36px;
    line-height: 36px;
    padding: 0;
    text-align: center
}

.checkin .checkin-invite {
    width: 100%;
    background-color: #28333d;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 0 16px 24px
}

.checkin .checkin-invite.checkin-invite-bg {
    background: url(../img/img_present_invitationBG.e72ba375.png) no-repeat;
    background-position: 100% 100%;
    background-size: cover
}

.checkin .checkin-invite .checkin-invite-img {
    max-width: 280px;
    height: 126px;
    margin: 0 auto;
    background: url(../img/img_present_invitation.aa2d2c1b.png) no-repeat;
    background-size: contain
}

.checkin .checkin-invite .checkin-invite-link {
    margin: 32px auto 0
}

.checkin .checkin-invite p {
    font-size: 12px;
    color: #b4c0c9
}

.checkin .checkin-invite p i {
    color: #03c47e;
    font-style: normal;
    font-size: 18px;
    font-weight: 700;
    margin: 0 4px
}

.checkin .checkin-invite p span.time {
    color: #03c47e
}

.checkin .checkin-invite .checkin-invite-desc {
    margin-top: 16px
}

.checkin .checkin-invite .checkin-invite-desc p {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 700;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.checkin .checkin-group {
    background: #28333d;
    border-radius: 8px;
    box-sizing: border-box;
    margin-top: 16px
}

.checkin .checkin-group.growthpage .growth-box {
    margin: 0;
    padding: 0 16px 0
}

.checkin .checkin-group.growthpage .growth-box-title {
    display: none
}

.checkin .checkin-group.growthpage .growth-task li {
    padding: 0
}

.checkin .checkin-group.growthpage .growth-task li:last-child {
    margin: 0
}

.checkin .checkin-group-pc {
    background: #28333d;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 16px 0 .5px
}

.checkin .checkin-group-pc .checkin-header {
    margin: 0 16px
}

.checkin .checkin-gift-item {
    margin-bottom: 16px
}

.checkin .checkin-gift-item:last-child {
    margin-bottom: 0
}

.checkin .checkin-group-item {
    width: 100%;
    height: 0;
    padding-bottom: 36.48293963%;
    background: url(../img/img_present_freeredeem.791e2a78.png) no-repeat;
    background-size: cover;
    box-sizing: border-box;
    position: relative
}

.checkin .checkin-group-item .checkin-item-btn {
    position: absolute;
    top: 50%;
    right: 30px;
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%)
}

.checkin .newuser-benefits {
    box-sizing: border-box;
    margin-left: -16px;
    width: -webkit-calc(100% + 32px);
    width: calc(100% + 32px);
    min-height: 220px
}

.checkin .newuser-benefits img {
    width: 100%
}

.checkin-activity-pc h2 {
    font-size: 14px;
    margin: 16px 0 8px
}

.checkin-activity-pc .slide.banner {
    margin-bottom: 0
}

.checkin-activity-pc .slide.banner .slide-wrap {
    height: 30px
}

.checkin-activity-pc .slide.banner .status {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border-radius: 4px 0 4px 0;
    width: 48px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0
}

.checkin-activity-pc .slide.banner .status i {
    font-size: 10px;
    color: #b4c0c9;
    letter-spacing: 0;
    text-align: center;
    font-weight: 700;
    font-style: normal;
    display: block;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.checkin-activity-pc .slide.banner .status.on {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#fffa9b),to(#ffa786));
    background-image: linear-gradient(180deg,#fffa9b,#ffa786)
}

.checkin-activity-pc .slide.banner .status.on i {
    color: #28333d
}

.checkin-activity-pc .slide.banner .info {
    font-size: 12px
}

.checkin-activity-pc .slide.banner .info span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.checkin-activity-pc .slide.banner .slide-trigger {
    bottom: 3px
}

.checkin-activity-pc .slide.banner .slide-trigger span {
    width: 5px;
    height: 5px
}

.checkin-pc-group {
    width: 100%;
    max-width: 480px;
    height: 118px;
    margin: 20px auto;
    opacity: .9;
    cursor: pointer
}

.checkin-pc-group:hover {
    opacity: 1
}

.checkin-pc-group:last-of-type,.checkin-pc-group:last-of-type .checkin-group-item {
    margin-bottom: 0
}

.checkin-pc-group .checkin-group-item {
    padding-bottom: 35.32110092%
}

.checkin-banner {
    width: 100%
}

.checkin-banner .slide {
    width: 100%;
    margin: 0 auto
}

.checkin-banner .slide .slide-wrap {
    border-radius: 4px
}

.checkin-activity .checkin-group-item {
    width: 100%;
    border-radius: 8px;
    position: relative;
    margin-bottom: 16px
}

.checkin-activity .checkin-group-item:last-child {
    margin-bottom: 0
}

.checkin-activity .checkin-group-item img {
    width: 100%;
    display: block;
    border-radius: 8px
}

.checkin-activity .checkin-group-item .status {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border-radius: 8px 0 8px 0;
    width: 48px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0
}

.checkin-activity .checkin-group-item .status i {
    font-size: 10px;
    color: #b4c0c9;
    letter-spacing: 0;
    text-align: center;
    font-weight: 700;
    font-style: normal;
    display: block;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.checkin-activity .checkin-group-item .status.on {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#fffa9b),to(#ffa786));
    background-image: linear-gradient(180deg,#fffa9b,#ffa786)
}

.checkin-activity .checkin-group-item .status.on i {
    color: #28333d
}

.checkin-activity .checkin-group-item:before {
    width: 100%;
    height: 40px;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(179deg,transparent,rgba(0,0,0,.2) 51%,rgba(0,0,0,.8));
    border-radius: 0 0 8px 8px
}

.checkin-activity .checkin-group-item span {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 16px;
    box-sizing: border-box
}

#model-gift {
    background: none;
    position: relative
}

#model-gift .notice-close,#model-gift .notice-open {
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 6px
}

#model-gift .notice-close .icon,#model-gift .notice-open .icon {
    margin-top: -1px
}

#model-gift .notice-open {
    color: #8b969f
}

#model-gift .notice-close {
    color: #03c47e
}

#model-gift .gift-con {
    border-radius: 0 8px 8px 8px;
    padding: 24px 0;
    background-image: url(../img/pic_bkg_gift.1a271223.png);
    background-size: 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-color: #28333d
}

#model-gift .gift-con .gift-con-height {
    min-height: 156px
}

#model-gift .gift-con .gift-box {
    margin-bottom: 16px;
    padding: 0 16px 0 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

#model-gift .gift-con .gift-box:first-child {
    margin-bottom: 24px
}

#model-gift .gift-con .gift-box .info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

#model-gift .gift-con .gift-box .info .name {
    font-size: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

#model-gift .gift-con .gift-box .info .name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#model-gift .gift-con .gift-box .info .name .icon {
    margin-right: 3px;
    min-width: 24px
}

#model-gift .gift-con .gift-box .info .desc {
    color: #b4c0c9;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

#model-gift .gift-con .mygift-box {
    padding: 0 16px 0 16px
}

#model-gift .gift-con .mygift-box .gift-name {
    margin-bottom: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

#model-gift .gift-con .mygift-box .gift-name .info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

#model-gift .gift-con .mygift-box .gift-name .info .name {
    font-size: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

#model-gift .gift-con .mygift-box .gift-name .info .name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#model-gift .gift-con .mygift-box .gift-name .info .name .icon {
    margin-right: 3px;
    min-width: 24px
}

#model-gift .gift-con .mygift-box .gift-name .info .desc {
    color: #b4c0c9;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

#model-gift .gift-con .mygift-box .gift-time {
    color: #b4c0c9
}

#model-gift .gift-con .mygift-box .gift-code {
    margin-top: 8px;
    padding-left: 16px;
    height: 28px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 12px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background: rgba(3,196,126,.1);
    border: 1px solid rgba(3,196,126,.3);
    border-radius: 4px;
    color: #03c47e;
    font-weight: 700;
    cursor: pointer
}

#model-gift .gift-con .mygift-box .gift-code:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(3,196,126,.1)),to(rgba(3,196,126,.3))),rgba(3,196,126,.1);
    background: linear-gradient(180deg,rgba(3,196,126,.1),rgba(3,196,126,.3)),rgba(3,196,126,.1)
}

#model-gift .gift-con .mygift-box .gift-code .copy {
    display: block;
    width: 72px;
    text-align: center;
    position: relative
}

#model-gift .gift-con .mygift-box .gift-code .copy:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.76px;
    height: 8px;
    background: rgba(3,196,126,.1);
    border-radius: 1px
}

#model-gift .gift-con .mygift-box .gift-desc {
    margin-top: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    color: #b4c0c9;
    font-size: 12px
}

#model-gift .gift-con .mygift-box .gift-desc.instruction {
    margin-top: 0
}

#model-gift .gift-con .mygift-box .gift-desc .name {
    padding-right: 6px;
    position: relative
}

#model-gift .gift-con .mygift-box .gift-desc .name:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: rgba(180,192,201,.1)
}

#model-gift .gift-con .mygift-box .gift-desc .desc {
    margin-left: 4px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#model-gift .gift-con .get-gift,#model-gift .gift-con .use-gift {
    margin-left: 8px;
    padding: 0;
    width: 72px;
    height: 28px;
    line-height: 27px;
    font-size: 12px;
    font-weight: 400
}

#model-gift .gift-con .get-gift.disabled,#model-gift .gift-con .get-gift.over,#model-gift .gift-con .use-gift.disabled,#model-gift .gift-con .use-gift.over {
    background-color: transparent;
    border: 1px solid transparent!important;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,.9)),color-stop(97.76%,rgba(77,98,117,.9))),-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.1)),to(hsla(0,0%,100%,.1)));
    background-image: linear-gradient(180deg,rgba(40,51,61,.9),rgba(77,98,117,.9) 97.76%),linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1));
    color: #b4c0c9
}

#model-gift .gift-con .empty {
    margin: 58px 0 82px;
    font-size: 12px;
    text-align: center;
    color: rgba(180,192,201,.3)
}

#model-gift .gift-con .g-Btn.more {
    padding: 0;
    display: block;
    margin: 0 auto;
    width: 108px;
    height: 36px;
    text-align: center;
    font-weight: 400
}

#model-gift .model_gift_tab {
    width: 184px;
    height: 32px;
    background: url(../img/pic_bd_title_gift_unselected_32.fbca128c.png) no-repeat;
    background-size: 100% 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

#model-gift .model_gift_tab>div {
    height: 100%;
    line-height: 32px;
    box-sizing: border-box;
    color: #8b969f;
    font-size: 14px;
    padding-left: 16px;
    width: 50%;
    position: relative;
    cursor: pointer
}

#model-gift .model_gift_tab>div.on {
    color: #03c47e;
    font-weight: 700;
    padding-left: 16px
}

#model-gift .model_gift_tab>div.on:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 92px;
    height: 100%;
    background: url(../img/pic_bd_title_gift_selected_32.e3a83fb8.png) no-repeat;
    background-size: 100% 100%
}

#model-gift .model_gift_tab>div span {
    z-index: 1;
    position: relative
}

#model-gift .model_gift_tab>div:last-child.on:before {
    left: auto;
    right: 0
}

#model-gift .model_gift_tab>div:first-child .new,#model-gift .model_gift_tab>div:last-child .expire {
    border-radius: 4px 4px 4px 0;
    background: #03c47e;
    display: block;
    position: absolute;
    left: 78%;
    top: -4px
}

#model-gift .model_gift_tab>div:first-child .new:after,#model-gift .model_gift_tab>div:last-child .expire:after {
    font-weight: 500;
    color: #fff;
    font-size: 12px;
    display: block;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    -webkit-transform-origin: top;
    transform-origin: top;
    font-style: normal;
    line-height: 20px;
    text-align: center
}

#model-gift .model_gift_tab>div:first-child .new {
    height: 14px
}

#model-gift .model_gift_tab>div:first-child .new:after {
    content: attr(data-text);
    padding: 0 2px
}

#model-gift .model_gift_tab>div:last-child .expire {
    padding-left: 2px;
    width: 80px;
    height: 14px
}

#model-gift .model_gift_tab>div:last-child .expire:after {
    width: 106px;
    -webkit-transform-origin: left;
    transform-origin: left;
    line-height: 14px;
    content: attr(data-text)
}

@media only screen and (max-width: 768px) {
    .checkin.mobile {
        padding-left:40px;
        padding-right: 40px
    }
}

@media only screen and (max-width: 414px) {
    .checkin.mobile {
        padding-left:16px;
        padding-right: 16px
    }
}

@media only screen and (max-width: 320px) {
    .checkin .checkin-group-item .checkin-item-btn {
        right:3%
    }
}

.nav-userinfo-item .nav-dialog {
    background-color: #1e2831
}

.nav-user-center .nav-dialog {
    background-size: 100% 173px;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#40515f),to(#28333d));
    background-image: linear-gradient(180deg,#40515f,#28333d);
    background-color: #28333d
}

.checkin-confirm .cofirm-cont {
    position: relative;
    padding: 24px 16px 32px
}

.checkin-confirm .cofirm-cont h2 {
    font-size: 16px!important;
    color: #03c47e;
    text-align: center;
    line-height: 24px;
    font-weight: 600
}

.checkin-confirm .cofirm-cont .icon_checkin {
    vertical-align: middle;
    margin: -2px 4px 0 0
}

.checkin-confirm .cofirm-cont .confirm-main .section {
    padding-bottom: 24px;
    position: relative
}

.checkin-confirm .cofirm-cont .confirm-main .section:last-child {
    border-bottom: 0 none
}

.checkin-confirm .cofirm-cont .confirm-main .section .title {
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin: 16px 0 12px
}

.checkin-confirm .cofirm-cont .confirm-main .section .normal-vip-title {
    margin: 0 0 8px
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list.award-justify {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .text {
    padding-top: 20px;
    margin-right: 6px;
    width: 92px;
    min-width: 92px;
    min-height: 118px;
    position: relative;
    text-align: center;
    box-sizing: border-box
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .text:last-child {
    margin-right: 0
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .text-bg {
    background: rgba(30,40,49,.5);
    border-radius: 4px;
    padding: 24px 8px 8px;
    box-sizing: border-box;
    height: 100%
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .text-bg.special {
    background: url(../img/Rectangle.aee31293.png) no-repeat;
    background-size: 100% 100%
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .icon_award {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    margin: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .icon_help {
    cursor: pointer;
    margin-top: -2px;
    width: 14px;
    height: 14px
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .cloudMobileAward {
    background: hsla(0,0%,100%,.08);
    border-radius: 4px;
    padding: 0 4px;
    color: #03c47e;
    width: 56px;
    cursor: pointer;
    line-height: 16px;
    height: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .cloudMobileAward p {
    font-size: 12px;
    font-weight: 700;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    -webkit-transform-origin: left;
    transform-origin: left
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .cloudMobileAward i {
    margin-left: -4px
}

.checkin-confirm .cofirm-cont .confirm-main .section .award-list .subtitle {
    border-bottom: 1px solid hsla(0,0%,100%,.1);
    padding-bottom: 8px;
    margin-bottom: 4.5px
}

.checkin-confirm .cofirm-cont .confirm-main .section .icon_swipe_left {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0)
}

.checkin-confirm .cofirm-cont .confirm-main .section .text {
    position: relative
}

.checkin-confirm .cofirm-cont .confirm-main .section .text:last-child {
    margin-bottom: 0
}

.checkin-confirm .cofirm-cont .confirm-main .section .text .subtitle {
    font-size: 14px;
    color: #f7fafc
}

.checkin-confirm .cofirm-cont .confirm-main .section .text .info {
    font-size: 12px;
    color: #8b969f
}

.checkin-confirm .cofirm-cont .confirm-main .section .text .chooseGame {
    width: 76px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #fff;
    background-color: #03c47e;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #03c47e
}

.checkin-confirm .cofirm-cont .confirm-main .section .text .chooseGame.disabled {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    color: #b4c0c9;
    font-weight: 700;
    border-top-color: #3e4851;
    border-bottom-color: #5b6d7e
}

.checkin-confirm .cofirm-cont .confirm-main .section.vip .title span {
    color: #f8e08d
}

.checkin-confirm .cofirm-cont .confirm-main .section.vip .subtitle {
    color: #fff
}

.checkin-confirm .cofirm-cont .confirm-main .section.vip .vip-list .subtitle:before {
    content: "";
    width: 2px;
    height: 10px;
    margin-right: 8px;
    display: inline-block;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f3e1ba),to(#e4bf84));
    background-image: linear-gradient(180deg,#f3e1ba,#e4bf84);
    border-radius: 2px
}

.checkin-confirm .cofirm-cont .confirm-main .section .vip-list {
    margin-top: 8px;
    padding: 12px 16px;
    background: rgba(30,40,49,.5);
    border-radius: 8px
}

.checkin-confirm .cofirm-cont .cofirm-btns {
    position: relative;
    z-index: 1;
    margin-top: 10px
}

.checkin-confirm .cofirm-cont .cofirm-btns.double {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 0
}

.checkin-confirm .cofirm-cont .cofirm-btns.double a {
    width: 132px;
    max-width: 132px;
    height: 40px;
    line-height: 38px
}

.checkin-confirm .cofirm-cont .cofirm-btns.double a:last-child {
    margin-left: 0
}

.checkin-confirm .cofirm-cont .cofirm-btns .g-Btn {
    min-width: 120px
}

.gift-nav span {
    margin: 0 10px;
    position: relative;
    cursor: pointer
}

.gift-nav span:after {
    content: "";
    width: 80%;
    height: 3px;
    background: #03c47e;
    box-shadow: 0 -2px 10px 0 #03c47e;
    position: absolute;
    bottom: -21px;
    left: 10%;
    opacity: 0
}

.gift-nav span.on {
    font-weight: 700;
    color: #fff
}

.gift-nav span.on:after {
    opacity: 1
}

.all-gift-nav {
    padding: 0 18px
}

.all-gift-nav .gift-nav {
    height: 41px;
    border-bottom: 1px solid hsla(0,0%,100%,.06)
}

.all-gift-nav span {
    margin: 0 20px 0 0
}

.gift-main {
    padding: 18px 0;
    box-sizing: border-box
}

.allGiftMobile,.allGiftPc {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    max-height: 438px;
    padding: 18px;
    overflow-y: auto
}

.allGiftMobile .gift-mobile-item,.allGiftPc .gift-mobile-item {
    background: #28333d;
    border: 1px solid hsla(0,0%,100%,.02);
    border-radius: 8px;
    width: 354px;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    max-height: 84px
}

.allGiftMobile .gift-mobile-item .game-icon,.allGiftPc .gift-mobile-item .game-icon {
    width: 40px;
    min-height: 40px;
    max-width: 100%;
    border-radius: 4px;
    position: relative;
    background: url(../img/gift-icon-bg.af97d271.png) no-repeat;
    background-size: cover
}

.allGiftMobile .gift-mobile-item .game-icon .game-icon-img,.allGiftPc .gift-mobile-item .game-icon .game-icon-img {
    display: block;
    width: 100%;
    min-height: 40px;
    border-radius: 4px
}

.allGiftMobile .gift-mobile-item .game-icon .gift-tag,.allGiftPc .gift-mobile-item .game-icon .gift-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.allGiftMobile .gift-mobile-item .game-desc,.allGiftPc .gift-mobile-item .game-desc {
    margin: 0 18px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 164px;
    overflow: hidden
}

.allGiftMobile .gift-mobile-item .game-desc p:first-child,.allGiftPc .gift-mobile-item .game-desc p:first-child {
    margin-bottom: 4px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.allGiftMobile .gift-mobile-item .game-desc p.game-subdesc,.allGiftPc .gift-mobile-item .game-desc p.game-subdesc {
    width: 100%;
    white-space: nowrap;
    color: rgba(180,192,201,.6);
    font-size: 12px;
    white-space: normal;
    zoom:.75;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.allGiftMobile .gift-mobile-item:after,.allGiftPc .gift-mobile-item:after {
    content: "";
    width: 52px;
    height: 52px;
    position: absolute;
    right: -7px;
    top: -7px;
    background: url(../img/tag_hot.5477a4cc.png) no-repeat;
    background-size: 100% 100%;
    display: none
}

.allGiftMobile .gift-mobile-item.hot:after,.allGiftPc .gift-mobile-item.hot:after {
    display: block
}

.allGiftMobile .gift-mobile-item .game-btns .gift-btn,.allGiftPc .gift-mobile-item .game-btns .gift-btn {
    width: 72px;
    height: 28px;
    line-height: 28px
}

.allGiftMobile .gift-mobile-item .game-btns .gift-btn.disabled,.allGiftMobile .gift-mobile-item .game-btns .gift-btn.overd,.allGiftPc .gift-mobile-item .game-btns .gift-btn.disabled,.allGiftPc .gift-mobile-item .game-btns .gift-btn.overd {
    background-color: transparent;
    border: 1px solid transparent!important;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,.9)),color-stop(97.76%,rgba(77,98,117,.9))),-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.1)),to(hsla(0,0%,100%,.1)));
    background-image: linear-gradient(180deg,rgba(40,51,61,.9),rgba(77,98,117,.9) 97.76%),linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1));
    color: #b4c0c9
}

.gift-none {
    margin: 80px auto 0
}

.gift-none p {
    font-size: 16px;
    color: #61686f;
    text-align: center;
    margin-top: 16px
}

.gift-none .icon {
    display: block;
    margin: 0 auto
}

.game-btns>p {
    margin-top: 4px;
    opacity: .5;
    font-size: 12px;
    color: #b4c0c9
}

.gift-btn {
    background-color: #03c47e;
    border-radius: 17px;
    width: 86px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    z-index: 1
}

.gift-btn:hover {
    background-image: radial-gradient(ellipse farthest-corner at bottom,#aafced 0,#03c47e 65%);
    color: #fff
}

.copyCodeCss {
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin: 20px auto;
    background: rgba(3,196,126,.07);
    border-radius: 2px;
    font-size: 14px;
    color: #03c47e;
    letter-spacing: 1.75px;
    cursor: pointer
}

.copyCodeCss i {
    width: 1px;
    height: 12px;
    margin: 0 10px;
    display: inline-block;
    vertical-align: middle;
    background: #03c47e;
    cursor: pointer
}

.giftTipsConfirm.mobile-gift-confirm .cofirm-cont {
    position: relative
}

.giftTipsConfirm.mobile-gift-confirm .icon-close.icon-gift-close:not(.icon-gift-close-run) {
    top: auto;
    left: 50%;
    bottom: -48px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 9
}

.giftTipsConfirm .icon-gift-close-run {
    background-image: url(../img/icon_CP_close_normal.3e736c2a.png);
    left: auto;
    right: -40px;
    bottom: auto;
    top: 0
}

.giftTipsConfirm .icon-gift-close-run:hover {
    background-image: url(../img/icon_CP_close_hovered.79962e67.png)
}

.giftTipsConfirm .cofirm {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    border-radius: 8px
}

.giftTipsConfirm .cofirm-cont {
    background-image: url(../img/pic_bkg_popup_gift.0ea5a83e.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 320px;
    padding: 0;
    margin: 0 auto;
    background-color: #1e2831;
    border-radius: 8px
}

.giftTipsConfirm .cofirm-cont .gift-con {
    padding: 16px
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-head .gift-icon {
    width: 40px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 40px;
    position: relative;
    background: url(../img/gift-icon-bg.af97d271.png) no-repeat;
    background-size: cover
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-head .gift-icon .game-icon-img {
    width: 100%;
    display: block;
    border-radius: 8px
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-head .gift-icon .gift-tag {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-head .text {
    margin-left: 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-weight: 600;
    font-size: 16px;
    color: #fff
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-head .time {
    padding: 1px 4px;
    background: rgba(180,192,201,.1);
    border: 1px solid rgba(180,192,201,.02);
    border-radius: 4px;
    font-size: 12px
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-head .time span {
    display: block;
    zoom:.75}

.giftTipsConfirm .cofirm-cont .gift-con .gift-code {
    margin-top: 8px;
    padding-left: 16px;
    height: 28px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background: rgba(3,196,126,.1);
    border: 1px solid rgba(3,196,126,.02);
    border-radius: 8px;
    color: #03c47e;
    font-weight: 700;
    cursor: pointer
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-code:hover {
    border: 1px solid rgba(3,196,126,.3);
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(3,196,126,.1)),to(rgba(3,196,126,.3))),rgba(3,196,126,.1);
    background: linear-gradient(180deg,rgba(3,196,126,.1),rgba(3,196,126,.3)),rgba(3,196,126,.1)
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-code .copy {
    display: block;
    width: 72px;
    text-align: center;
    position: relative
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-code .copy:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.76px;
    height: 8px;
    background: rgba(3,196,126,.1);
    border-radius: 1px
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-code.gift-code-run {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-code.gift-code-run .copy {
    width: auto;
    margin-right: 8px
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-code.gift-code-run .copy:before {
    display: none
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-info {
    margin-top: 8px;
    margin-bottom: 16px;
    color: rgba(180,192,201,.6);
    font-size: 12px;
    zoom:.75;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-info .name {
    margin-right: 6px;
    padding-right: 6px;
    position: relative
}

.giftTipsConfirm .cofirm-cont .gift-con .gift-info .name:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    height: 10px;
    width: 1px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: rgba(180,192,201,.1)
}

.giftTipsConfirm .cofirm-cont .gift-con .cofirm-btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.giftTipsConfirm .cofirm-cont .gift-con .cofirm-btns .g-Btn {
    padding: 0;
    height: 32px;
    line-height: 30px;
    font-size: 14px;
    font-weight: 400;
    width: -webkit-calc(50% - 8px);
    width: calc(50% - 8px);
    font-weight: 700
}

.giftTipsConfirm .cofirm-cont .gift-con .cofirm-btns .g-Btn.g-Btn-green2 {
    box-shadow: 0 2px 30px rgba(7,171,127,.3)
}

.giftTipsConfirm .cofirm-cont .gift-con .cofirm-btns .g-Btn.single {
    width: 100%
}

.giftTipsConfirm .cofirm-cont .gift-instruction {
    padding: 4px 16px 8px 16px;
    background: rgba(180,192,201,.1);
    box-shadow: inset 0 .5px 0 rgba(180,192,201,.04);
    border-radius: 0 0 8px 8px;
    color: rgba(180,192,201,.6)
}

.giftTipsConfirm .cofirm-cont .gift-instruction .gift-info {
    font-size: 12px;
    zoom:.75;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.giftTipsConfirm .cofirm-cont .gift-instruction .gift-info .name {
    margin-right: 6px;
    padding-right: 6px;
    position: relative
}

.giftTipsConfirm .cofirm-cont .gift-instruction .gift-info .name:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    height: 10px;
    width: 1px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: rgba(180,192,201,.1)
}

.myGiftMobile,.myGiftPc {
    height: 438px;
    padding: 18px;
    overflow-y: auto;
    font-size: 12px
}

.myGiftMobile .myGiftItem,.myGiftPc .myGiftItem {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background: #28333d;
    margin-bottom: 10px;
    border: 1px solid hsla(0,0%,100%,.02);
    border-radius: 8px
}

.myGiftMobile .myGiftItem .gift-info,.myGiftPc .myGiftItem .gift-info {
    margin-bottom: 4px;
    color: rgba(180,192,201,.6);
    font-size: 12px;
    zoom:.75}

.myGiftMobile .myGiftItem .gift-info .name,.myGiftPc .myGiftItem .gift-info .name {
    margin-right: 6px;
    padding-right: 6px;
    position: relative
}

.myGiftMobile .myGiftItem .gift-info .name:after,.myGiftPc .myGiftItem .gift-info .name:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    height: 10px;
    width: 1px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: rgba(180,192,201,.1)
}

.myGiftMobile .myGiftHead,.myGiftPc .myGiftHead {
    margin-bottom: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.myGiftMobile .myGiftHead .myGiftHeadFlex,.myGiftPc .myGiftHead .myGiftHeadFlex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .copyCodeCss,.myGiftPc .myGiftHead .myGiftHeadFlex .copyCodeCss {
    padding: 0 10px
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .game-icon,.myGiftPc .myGiftHead .myGiftHeadFlex .game-icon {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    position: relative;
    width: 40px;
    min-height: 40px;
    max-width: 100%;
    background: url(../img/gift-icon-bg.af97d271.png) no-repeat;
    background-size: cover
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .game-icon .game-icon-img,.myGiftPc .myGiftHead .myGiftHeadFlex .game-icon .game-icon-img {
    width: 100%;
    display: block;
    border-radius: 8px
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .game-icon .gift-tag,.myGiftPc .myGiftHead .myGiftHeadFlex .game-icon .gift-tag {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con {
    margin-left: 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con .gift-name,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con .gift-name {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con .gift-name .name,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con .gift-name .name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con .gift-name .g-Btn,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con .gift-name .g-Btn {
    padding: 0;
    width: 80px;
    height: 20px;
    line-height: 19px;
    text-align: center;
    font-size: 12px;
    font-weight: 700
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con .gift-name .g-Btn.overd,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con .gift-name .g-Btn.overd {
    background-color: transparent;
    border: 1px solid transparent!important;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,.9)),color-stop(97.76%,rgba(77,98,117,.9))),-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.1)),to(hsla(0,0%,100%,.1)));
    background-image: linear-gradient(180deg,rgba(40,51,61,.9),rgba(77,98,117,.9) 97.76%),linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1));
    color: #b4c0c9
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con .gift-item,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con .gift-item {
    margin-top: 5px;
    font-size: 12px;
    zoom:.75;color: rgba(180,192,201,.6)
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con .gift-key,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con .gift-key {
    margin-top: 4px;
    padding: 0 0 0 10px;
    height: 20px;
    line-height: 20px;
    background: rgba(3,196,126,.1);
    border: 1px solid rgba(3,196,126,.3);
    border-radius: 4px;
    color: #03c47e;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 700
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con .gift-key:hover,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con .gift-key:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(3,196,126,.1)),to(rgba(3,196,126,.3))),rgba(3,196,126,.1);
    background: linear-gradient(180deg,rgba(3,196,126,.1),rgba(3,196,126,.3)),rgba(3,196,126,.1);
    border: 1px solid rgba(3,196,126,.3)
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con .gift-key .copy,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con .gift-key .copy {
    display: block;
    padding: 0 10px;
    text-align: center;
    position: relative
}

.myGiftMobile .myGiftHead .myGiftHeadFlex .gift-con .gift-key .copy:before,.myGiftPc .myGiftHead .myGiftHeadFlex .gift-con .gift-key .copy:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
    height: 8px;
    background: rgba(3,196,126,.1);
    border-radius: 1px
}

.myGiftMobile .myGiftHead .myGiftHeadFlex p,.myGiftPc .myGiftHead .myGiftHeadFlex p {
    color: #fff;
    font-size: 14px;
    margin-left: 15px
}

.myGiftMobile .myGiftHead .myGiftHeadFlex a,.myGiftPc .myGiftHead .myGiftHeadFlex a {
    margin-left: 15px
}

.myGiftMobile .myGiftTitle,.myGiftPc .myGiftTitle {
    color: #8b969f
}

.myGiftMobile .myGiftDesc,.myGiftPc .myGiftDesc {
    font-size: 12px;
    color: #dadada;
    letter-spacing: .3px;
    text-align: justify;
    line-height: 20px
}

.myGiftMobile .copyCodeCss,.myGiftPc .copyCodeCss {
    font-size: 12px
}

.allGiftPc .gift-mobile-item {
    background: #2e3b47;
    border: 1px solid hsla(0,0%,100%,.02);
    border-radius: 4px
}

.myGiftPc {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start
}

.myGiftPc .myGiftItem {
    width: -webkit-calc(50% - 8px);
    width: calc(50% - 8px);
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    background: #2e3b47;
    border: 1px solid hsla(0,0%,100%,.02);
    border-radius: 4px
}

.pagegift .gift-nav {
    font-weight: 400;
    text-align: center;
    border-bottom: 0
}

.pagegift .gift-nav span:after {
    bottom: -10px
}

.pagegift .allGiftBox .gift-nav,.pagegift .mygiftbox .gift-nav {
    text-align: left;
    height: auto;
    margin-top: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.pagegift .allGiftBox .gift-nav span,.pagegift .mygiftbox .gift-nav span {
    display: block;
    width: 64px;
    height: 22px;
    line-height: 22px;
    background: hsla(0,0%,84.7%,0);
    border: 1px solid #40505d;
    border-radius: 14px;
    font-size: 12px;
    margin-right: 10px;
    text-align: center;
    color: #b4c0c9
}

.pagegift .allGiftBox .gift-nav span.on,.pagegift .mygiftbox .gift-nav span.on {
    background: rgba(3,196,126,.1);
    border: 1px solid #03c47e;
    color: #03c47e
}

.pagegift .allGiftBox .gift-nav span:after,.pagegift .mygiftbox .gift-nav span:after {
    display: none
}

.pagegift .myGiftHead {
    position: relative
}

.pagegift .myGiftHead .myGiftHeadFlex {
    width: 100%
}

.pagegift .myGiftHead .myGiftHeadFlex .copyCodeCss {
    width: 100%;
    padding: 0 10px;
    position: relative;
    margin: 10px auto
}

.pagegift .myGiftHead .myGiftHeadFlex i {
    display: none
}

.pagegift .myGiftHead .gift-btn {
    position: absolute;
    right: 0;
    top: 15px
}

.pagegift .allGiftMobile,.pagegift .allGiftPc {
    height: auto;
    max-height: 100%
}

.pagegift .allGiftMobile .game-desc,.pagegift .allGiftPc .game-desc {
    margin: 0 10px
}

.pagegift .myGiftMobile,.pagegift .myGiftPc {
    height: auto
}

.mobile .allGiftMobile .gift-mobile-item,.mobile .allGiftPc .gift-mobile-item {
    width: 100%
}

.mobile .giftTipsConfirm .cofirm-cont {
    width: 100%;
    box-sizing: border-box
}

.mobile .copyCodeCss {
    font-size: 12px
}

.notice {
    height: 40px
}

.notice>div {
    background: rgba(0,0,0,.1);
    border-radius: 4px;
    color: #f3ae1f;
    padding: 8px 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative
}

.notice>div .icon-notice {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: 8px
}

.notice-text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    position: relative
}

.notice-text span {
    position: absolute;
    white-space: nowrap;
    font-size: 12px
}

.InMobile .notice {
    height: 32px;
    margin-bottom: 8px
}

.InMobile .notice>div {
    padding: 4px 16px;
    background: #322e28
}

.recommend-main {
    padding-top: 16px
}

.recommend-fot {
    padding: 48px 0 40px;
    text-align: center;
    font-size: 12px
}

.recommend-fot>p {
    color: #b4c0c9;
    margin-bottom: 10px
}

.recommend-fot>.g-Btn {
    font-size: 12px
}

.recommend-none {
    padding: 30px 0;
    text-align: center
}

.recommed-list {
    padding: 30px 16px
}

.recommed-list ul {
    margin-bottom: 20px
}

.recommed-list li {
    margin-bottom: 32px
}

.recommed-list li:last-child {
    margin-bottom: 0
}

.recommed-list li .g-Btn {
    padding: 0;
    width: 64px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    height: 28px;
    line-height: 26px
}

.recommed-list li .icon {
    position: absolute;
    top: 0;
    left: 0
}

.recommend-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.recommend {
    margin-bottom: 40px
}

.recommend>header>h2 {
    font-size: 18px
}

.recommend>header>p {
    font-size: 12px;
    color: #8b969f;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-left: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.recommend>header>p>.icon {
    margin-left: 2px;
    width: 10px;
    height: 10px
}

.recommend .g-Btn, .game-info .info-left .g-Btn {
    padding: 0;
    width: 64px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    height: 28px;
    line-height: 26px
}

.recommend.recommend2 {
    padding: 16px;
    padding-bottom: 24px;
    background: #28333d;
    border-radius: 4px
}

.recommend.recommend2 .recommend-intr>h3 {
    font-weight: 700
}

.recommend.recommend3 .recommend-con {
    overflow: hidden
}

.recommend.recommend3 .swiper-container {
    height: auto
}

.recommend.recommend8,.recommend.recommend9 {
    background: url(../img/recommend8_bg.f9da686d.png) no-repeat;
    background-size: 100% 100%;
    padding: 18px 0 8px;
    position: relative
}

.recommend.recommend8.recommend9,.recommend.recommend9.recommend9 {
    background-image: url(../img/recommend9_bg.69a93951.png)
}

.recommend.recommend8 header,.recommend.recommend9 header {
    margin: 0 8px
}

.recommend.recommend8 header h2,.recommend.recommend9 header h2 {
    font-size: 16px
}

.recommend.recommend8 header h2:before,.recommend.recommend9 header h2:before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    background: #fff;
    margin: -3px 8px 0 2px;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.recommend.recommend8 header p,.recommend.recommend9 header p {
    background: hsla(0,0%,100%,.2);
    border-radius: 11px;
    width: 56px;
    height: 22px;
    color: #fff
}

.recommend.recommend8 header p .icon,.recommend.recommend9 header p .icon {
    background-image: url(../img/icon_ME_arrow_white.cf8cb3cc.png)
}

.recommend.recommend8 .recommend-con,.recommend.recommend9 .recommend-con {
    padding-top: 20px
}

.recommend.recommend8 .recommend-con ul,.recommend.recommend9 .recommend-con ul {
    padding: 0 8px
}

.recommend .swiper-container {
    width: 100%;
    height: 260px;
    margin: 0 auto;
    padding-top: 20px;
    margin-top: -20px;
    position: relative
}

.recommend .swiper-container .swiper-slide .recommend-mode5 {
    position: relative
}

.recommend .swiper-container .swiper-slide .recommend-mode5:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    z-index: 99
}

.recommend .swiper-container .swiper-slide.swiper-slide-active .recommend-mode5:before {
    display: none
}

.recommend-con {
    padding-top: 16px
}

.recommend-con .icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.recommend-img {
    width: 56px;
    height: 56px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 12px;
    position: relative
}

.recommend-img img {
    width: 100%;
    height: 100%;
    border-radius: 12px
}

.recommend-img>span {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 60px;
    color: #28333d;
    font-size: 12px;
    height: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-transform: translate3d(-50%,0,0) scale(.8);
    transform: translate3d(-50%,0,0) scale(.8);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#00baeb),to(#2dff81)),radial-gradient(#c9fd37,rgba(2,177,218,.1));
    background-image: linear-gradient(#00baeb,#2dff81),radial-gradient(#c9fd37,rgba(2,177,218,.1));
    border-radius: 8px
}

.recommend-img .icon {
    border-radius: 12px 0 0 0
}

.recommend-img.on {
    box-shadow: 0 0 0 2px #03c47e
}

.recommend-imgbox {
    height: 0!important;
    padding-top: 46.5%;
    position: relative
}

.recommend-imgbox>div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.recommend-img-big {
    height: 100%;
    overflow: hidden;
    position: relative
}

.recommend-img-big img {
    border-radius: 4px 4px 0 0;
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.recommend-intr {
    margin: 0 16px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.recommend-intr>h3 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 4px
}

.recommend-intr>p {
    color: #b4c0c9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommend-tags {
    position: absolute;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}

.recommend-tags>li {
    margin-bottom: 6px;
    margin-right: 6px;
    background: rgba(0,0,0,.4);
    border: 1px solid hsla(0,0%,100%,.1);
    border-radius: 8px;
    padding: 0 4px
}

.recommend-tags>li span {
    font-size: 12px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    display: block
}

.recommend-tool-content {
    display: inline-block
}

.recommend-tool.recommend-tool-mode5 {
    position: absolute;
    left: 50%;
    bottom: 6px;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: rgba(0,0,0,.4);
    border: 1px solid hsla(0,0%,100%,.1);
    border-radius: 8px;
    padding: 0 2px;
    max-width: 90%;
    box-sizing: border-box;
    height: 16px;
    line-height: 16px;
    color: #ffb1d5
}

.recommend-tool.recommend-tool-mode5>div {
    margin-left: -3px
}

.recommend-tool.recommend-tool-mode1 {
    height: 20px;
    line-height: 20px;
    background: rgba(0,0,0,.1);
    border-radius: 10px;
    padding: 0 3px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.recommend-tool.recommend-tool-mode1 .recommend-tool-icon {
    margin-right: 2px
}

.recommend-tool.recommend-tool-mode1 .recommend-tool-line {
    display: inline-block;
    vertical-align: middle;
    margin: -1px 2px 0
}

.recommend-tool>div {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    font-size: 12px;
    -webkit-transform-origin: center;
    transform-origin: center;
    margin-left: -5px;
    margin-right: -5px;
    text-align: left
}

.recommend-tool span {
    font-size: 12px;
    font-weight: 500
}

.recommend-tool .icon {
    position: static
}

.recommend-tool .recommend-tool-icon {
    width: 12px;
    height: 12px;
    min-width: 12px;
    border-radius: 0
}

.recommend-tool .recommend-tool-name {
    color: hsla(0,0%,100%,.9)
}

.recommend-tool .recommend-tool-line {
    width: 1px;
    height: 7px;
    background-color: hsla(0,0%,100%,.2);
    margin: 0 3px 0;
    display: inline-block;
    vertical-align: middle
}

.recommend-tool .recommend-tool-desc {
    color: #ffb1d5
}

.recommend-tip {
    position: absolute;
    top: 12px;
    right: 16px;
    left: 30px;
    text-align: right;
    font-size: 16px;
    z-index: 2
}

.recommend-mode1>li {
    margin-bottom: 32px
}

.recommend-mode1>li:last-child {
    margin-bottom: 0
}

.recommend-mode2 {
    width: 94%!important;
    max-width: 327px;
    background: #28333d;
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    position: relative
}

.recommend-mode2>.icon {
    border-radius: 4px 0 0 0
}

.recommend-mode2-con {
    padding: 12px 16px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.recommend-mode2-con .recommend-intr>h3 {
    font-weight: 700
}

.recommend-mode2-con .recommend-intr>p {
    font-size: 12px
}

.recommend-mode2-con.recommend-mode2-con-pc {
    padding: 8px 16px
}

.recommend-mode2-con.recommend-mode2-con-pc .recommend-img {
    height: 64px
}

.recommend-mode2-con.recommend-mode2-con-pc .recommend-img img {
    width: 46px;
    border-radius: 0
}

.recommend-mode3,.recommend-mode4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow-x: auto
}

.recommend-mode3::-webkit-scrollbar,.recommend-mode4::-webkit-scrollbar {
    display: none
}

.recommend-mode3>li,.recommend-mode4>li {
    padding: 24px 8px;
    width: 104px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: 8px;
    background: #28333d;
    border-radius: 4px;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative
}

.recommend-mode3>li:last-child,.recommend-mode4>li:last-child {
    margin-right: 0
}

.recommend-mode3>li>.icon,.recommend-mode4>li>.icon {
    border-radius: 4px 0 0 0
}

.recommend-mode3 .recommend-img,.recommend-mode4 .recommend-img {
    margin: 0 auto
}

.recommend-mode3 .recommend-intr,.recommend-mode4 .recommend-intr {
    margin: 6px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.recommend-mode3 .recommend-intr>h3,.recommend-mode4 .recommend-intr>h3 {
    font-size: 14px;
    margin-bottom: 0
}

.recommend-mode4 {
    padding: 10px 2px 0;
    margin: -10px -2px 0
}

.recommend-mode4>li {
    padding: 0;
    width: 128px;
    background: none
}

.recommend-mode4>li:last-child {
    padding-right: 2px
}

.recommend-mode4 .recommend-img {
    width: 100%;
    height: 180px;
    border-radius: 4px
}

.recommend-mode4 .recommend-img img {
    height: 100%;
    border-radius: 4px
}

.recommend-mode4 .recommend-img>span {
    width: 70px;
    height: 25px;
    font-size: 14px;
    top: -12px
}

.recommend-mode5 {
    width: 128px;
    height: 260px;
    background: #28333d;
    text-align: center;
    border-radius: 4px;
    margin: 0 auto
}

.recommend-mode5 .recommend-img {
    width: 100%;
    height: 180px;
    border-radius: 4px
}

.recommend-mode5 .recommend-img img {
    height: 100%;
    border-radius: 4px
}

.recommend-mode5 .recommend-intr {
    margin: 0;
    width: 100%;
    padding: 8px 8px 6px;
    box-sizing: border-box
}

.recommend-mode5 .recommend-intr>h3 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommend-mode6,.recommend-mode8,.recommend-mode9 {
    white-space: nowrap;
    overflow-x: auto
}

.recommend-mode6::-webkit-scrollbar,.recommend-mode8::-webkit-scrollbar,.recommend-mode9::-webkit-scrollbar {
    display: none
}

.recommend-mode6 .icon,.recommend-mode8 .icon,.recommend-mode9 .icon {
    position: static
}

.recommend-mode6 li,.recommend-mode8 li,.recommend-mode9 li {
    width: 160px!important;
    margin-right: 12px!important;
    margin-bottom: 0!important
}

.recommend-mode6 li:last-child,.recommend-mode8 li:last-child,.recommend-mode9 li:last-child {
    margin-right: 0!important
}

.recommend-mode7 {
    white-space: nowrap;
    overflow-x: auto;
    font-size: 0
}

.recommend-mode7::-webkit-scrollbar {
    display: none
}

.recommend-mode7 .icon {
    position: static
}

.recommend-mode7 li {
    display: inline-block;
    width: 122px;
    min-height: 201px;
    margin-right: 8px;
    padding-top: 16px;
    padding-bottom: 0;
    vertical-align: top;
    box-sizing: border-box;
    font-size: 0
}

.recommend-mode7 li:last-child {
    margin-right: 0
}

.recommend-mode7 li .user-name {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 40px;
    line-height: 20px;
    margin: 6px;
    white-space: normal;
    font-size: 14px;
    color: #fff
}

.recommend-mode7 li .user-follows {
    font-size: 12px;
    color: #8b969f
}

.recommend-mode7 li .user-info,.recommend-mode7 li .user-info-label {
    min-height: 50px;
    margin-top: 8px;
    white-space: normal;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.recommend-mode7 li .user-info-label>span,.recommend-mode7 li .user-info>span {
    max-width: 90%;
    padding: 1px 8px;
    margin: 0 0 5px 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommend-mode7 li .user-info-label>span:last-child,.recommend-mode7 li .user-info>span:last-child {
    margin: 0
}

.recommend12 .swiper-container {
    height: auto;
    padding-top: 0;
    margin-top: 0
}

.giftPackExits {
    position: relative
}

.giftPackExits:before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: url(../img/gift_label.34f0b4ab.png) 50% no-repeat;
    background-size: 100% 100%
}
.pkPackExits {
    position: relative
}

.pkPackExits:before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: url(../img/tag_pk.png) 50% no-repeat;
    background-size: 100% 100%
}

.hotPackExits {
    position: relative
}

.hotPackExits:before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: url(../img/tag_hot.5477a4cc.png) 50% no-repeat;
    background-size: 100% 100%
}

.newPackExits {
    position: relative
}

.newPackExits:before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: url(../img/tag_free.eb920a44.png) 50% no-repeat;
    background-size: 100% 100%
}

.remindMsgGreen {
    position: relative
}

.remindMsgGreen:before {
    content: attr(data-tip);
    border-radius: 5px 5px 0 5px;
    background: #03c47e;
    position: absolute;
    right: 80%;
    top: -4px;
    -webkit-transform: scale(.72);
    transform: scale(.72);
    padding: 0 3px;
    width: auto;
    white-space: nowrap
}

.page-live .topnav2 {
    background-color: rgba(30,40,49,.95);
    padding-bottom: 8px
}

.page-live .live-wrap {
    padding-left: 8%;
    padding-right: 8%
}

.page-live .live-nav {
    height: 32px;
    padding-top: 2px;
    padding-bottom: 6px
}

.page-live .live-nav .subnav-active {
    box-shadow: 0 0 8px 0 #03c47e
}

.page-live .live-nav h2 {
    margin-right: 24px;
    font-size: 16px;
    font-weight: 400
}

.page-live .live-nav h2:last-child {
    margin-right: 0
}

.page-live .live-nav h2.on {
    font-weight: 700;
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.page-live .create-room-btn {
    background: #03c47e;
    box-shadow: 0 0 12px 0 rgba(3,196,126,.5)
}

.page-live .empty-status {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: #8b969f
}

.page-live .empty-status .icon {
    margin-bottom: 10px
}

@media only screen and (max-width: 768px) {
    .broadcast-box,.page-live .live-wrap {
        padding-left:40px;
        padding-right: 40px
    }
}

@media only screen and (max-width: 414px) {
    .broadcast-box,.page-live .live-wrap {
        padding-left:16px;
        padding-right: 16px
    }
}

.pulldownrefresh {
    position: relative
}

.pulldownrefresh.end-status {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out
}

.pulldownrefresh .pulldown-loading {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 100;
    width: 20px;
    height: 20px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
    font-size: 0
}

.pulldownrefresh .pulldown-loading .sk-circle {
    width: 30px;
    height: 30px
}

.pulldownrefresh .pulldown-loading.end-status {
    -webkit-transition-property: opacity,-webkit-transform;
    transition-property: opacity,-webkit-transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.pageuserinfo .topnav a {
    position: absolute;
    bottom: 0;
    right: 20px;
    right: -webkit-calc(20px + env(safe-area-inset-right));
    right: calc(20px + env(safe-area-inset-right))
}

.pageuserinfo .topnav a[disabled] {
    color: #b6b6b6
}

.pageuserinfo .subtips {
    font-size: 12px;
    text-align: center;
    color: #8b969f;
    margin-top: -10px;
    line-height: 0
}

.userinfo-content {
    padding-left: 20px;
    padding-right: 20px;
    padding-left: -webkit-calc(20px + env(safe-area-inset-left));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: -webkit-calc(20px + env(safe-area-inset-right));
    padding-right: calc(20px + env(safe-area-inset-right))
}

.userinfo-menulist>ul {
    padding-top: 2px
}

.userinfo-menulist>ul>li {
    min-height: 53px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    border-bottom: 1px solid #2f3c47;
    color: #b4c0c9;
    font-size: 14px;
    cursor: pointer
}

.userinfo-menulist>ul>li[disabled] {
    cursor: default
}

.userinfo-menulist>ul>li:last-child {
    border: 0
}

.userinfo-menulist>ul>li.noflex {
    display: block
}

.userinfo-menulist>ul>li.noflex>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-top: 4px
}

.userinfo-menulist>ul>li.noflex .hasTips {
    padding-top: 0;
    min-height: 53px
}

.userinfo-menulist>ul>li.noflex .realname-tips {
    color: #8b969f;
    font-size: 12px
}

.userinfo-menulist .item-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #8b969f;
    max-width: 80%
}

.userinfo-menulist .item-right span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.userinfo-menulist .item-right .icon-avatar3 {
    width: 48px;
    height: 48px
}

.userinfo-menulist .item-right .icon-qr-back {
    margin-left: 4px
}

.userinfo-menulist .item-right .icon-update {
    width: 24px;
    height: 24px;
    background-size: 16px 16px;
    margin-left: 4px
}

.userinfo-menulist .item-right .realname-tag {
    display: inline-block;
    width: 44px;
    height: 20px;
    line-height: 20px;
    margin-left: 4px;
    background: rgba(3,196,126,.2);
    border: 1px solid #03c47e;
    border-radius: 4px;
    font-size: 12px;
    color: #03c47e;
    text-align: center
}

.userinfo-editavatar .pCanvas-container {
    border: 1px solid #888!important;
    border-radius: 50%;
    overflow: hidden
}

.userinfo-editavatar .pCanvas-container canvas {
    border-radius: 50%
}

.userinfo-editavatar .action-bar {
    border-top: none!important
}

.userinfo-editavatar .action-bar .btn-cancel {
    margin-left: 20px;
    margin-left: -webkit-calc(20px + env(safe-area-inset-left));
    margin-left: calc(20px + env(safe-area-inset-left))
}

.userinfo-editavatar .action-bar .btn-ok {
    margin-right: 20px;
    margin-right: -webkit-calc(20px + env(safe-area-inset-right));
    margin-right: calc(20px + env(safe-area-inset-right));
    color: #03c47e!important
}

.userinfo-loading {
    z-index: 999
}

@media (orientation: portrait) {
    .userinfo-editavatar .clipper-part,.userinfo-editavatar .gesture-mask {
        bottom:100px!important;
        bottom: -webkit-calc(100px + env(safe-area-inset-bottom))!important;
        bottom: calc(100px + env(safe-area-inset-bottom))!important
    }

    .userinfo-editavatar .action-bar {
        height: 100px!important;
        height: -webkit-calc(100px + env(safe-area-inset-bottom))!important;
        height: calc(100px + env(safe-area-inset-bottom))!important
    }
}

.userinfo-editavatar-pc {
    width: 240px;
    margin-left: auto;
    margin-right: auto
}

.userinfo-editavatar-pc .avatar-canvas {
    position: relative;
    width: 240px;
    height: 240px
}

.userinfo-editavatar-pc .zoom-in-out {
    margin-top: 16px
}

.userinfo-editavatar-pc .avatar-submit {
    margin-top: 48px;
    text-align: center
}

.userinfo-editavatar-pc .pCanvas-container {
    border: 1px solid #888!important;
    border-radius: 50%;
    overflow: hidden
}

.userinfo-editavatar-pc .pCanvas-container canvas {
    border-radius: 50%
}

.userinfo-editavatar-pc .clipper-part,.userinfo-editavatar-pc .gesture-mask {
    bottom: 0!important
}

.userinfo-editavatar-pc .action-bar {
    display: none
}

.userinfo-editname .label {
    margin-top: 24px;
    margin-bottom: 12px
}

.userinfo-editname .count {
    margin-top: 8px;
    text-align: right
}

.userinfo-editname .count.color-normal {
    color: #8b969f
}

.userinfo-confirm {
    width: 382px
}

.userinfo-confirm .userinfo-menulist>ul>li:not(.phone,.gamelabel):hover .item-left {
    color: #fff
}

.userinfo-confirm .userinfo-menulist>ul>li.gamelabel,.userinfo-confirm .userinfo-menulist>ul>li.phone {
    cursor: default
}

.userinfo-confirm .cofirm-cont {
    padding: 0
}

.userinfo-confirm .userinfo-content {
    position: relative;
    height: 484px;
    padding: 0 16px;
    overflow-y: auto
}

.userinfo-confirm .userinfo-content::-webkit-scrollbar {
    width: 4px
}

.userinfo-confirm .userinfo-content .avatar-title {
    text-align: center;
    margin-bottom: 24px;
    color: #a5a9ac
}

.userinfo-confirm .userinfo-content .top-btns {
    padding-top: 16px
}

.userinfo-confirm .form-avatar {
    margin: 48px auto 40px auto;
    display: block;
    cursor: pointer
}

.userinfo-confirm .form-avatar .icon-edit-photo {
    position: absolute;
    right: -2px;
    bottom: -2px
}

.userinfo-confirm .form-label {
    color: #a5a9ac
}

.userinfo-confirm .form-text {
    margin-top: 16px;
    margin-bottom: 30px;
    color: #fff
}

.userinfo-confirm .form-btns {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-bottom: 30px;
    text-align: center
}

.userinfo-confirm .form-btns .g-Btn-green2[disabled] {
    opacity: .5;
    cursor: not-allowed
}

.userinfo-confirm .edit-avatar .edit-title {
    margin-bottom: 24px;
    text-align: center;
    color: #a5a9ac
}

.userinfo-confirm .userinfo-editsex-pc .select-box {
    width: 100px;
    margin: 0 auto
}

.userinfo-confirm .subtips {
    position: absolute;
    font-size: 12px;
    text-align: center;
    color: #8b969f;
    bottom: 2px
}

.realname-confirm .cofirm-head .icon-close {
    top: 11px;
    right: 8px
}

.realname-confirm .cofirm-head h2 {
    padding: 14px 0
}

.realname-confirm .cofirm-cont {
    padding-top: 1px;
    padding-bottom: 30px
}

.realname-confirm .realname-tips {
    margin-top: 14px;
    max-height: 100px;
    overflow-y: auto
}

.realname-confirm .realname-tips img {
    max-width: 100%
}

.realname-confirm .form-item p {
    padding-top: 24px;
    padding-bottom: 12px;
    font-size: 14px;
    color: #a5a9ac
}

.realname-confirm .cofirm-btns {
    margin-top: 16px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    color: #8b969f
}

.realname-confirm .cofirm-btns a {
    margin: 0;
    color: #b4c0c9
}

.realname-confirm .cofirm-btns .g-Btn {
    margin-top: 16px
}

.user-avatar {
    position: relative;
    display: inline-block
}

.user-avatar .avatar-frame {
    position: absolute;
    top: -13%;
    left: -13%;
    right: -13%;
    bottom: -13%;
    background-size: 100% 100%
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid hsla(0,0%,100%,.1);
    box-sizing: border-box;
    object-fit: cover
}

.usercard-box {
    width: 320px;
    background: #28333d;
    border-radius: 4px;
    padding-bottom: 16px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    position: relative
}

.usercard-box.usercard-businesscars:before {
    content: "";
    position: absolute;
    top: -48px;
    left: -4px;
    width: 328px;
    height: 229px;
    background-repeat: no-repeat;
    background-size: 100%
}

.usercard-box.usercard-businesscars.usercard-businesscars-lv6:before {
    background-image: url(../img/usercard_v6.4dba5cc2.png)
}

.usercard-box.usercard-businesscars.usercard-businesscars-lv7:before {
    background-image: url(../img/usercard_v7.8d0b7283.png)
}

.usercard-box.usercard-businesscars.usercard-businesscars-lv8:before {
    background-image: url(../img/usercard_v8.3b98d842.png)
}

.usercard-box.usercard-businesscars.usercard-businesscars-lv9:before {
    background-image: url(../img/usercard_v9.40d74637.png)
}

.usercard-box.usercard-businesscars.usercard-businesscars-lv10:before {
    background-image: url(../img/usercard_v10.1c2df50c.png)
}

@media (orientation: landscape) {
    .usercard-box.usercard-businesscars.usercard-businesscars-lv6:before {
        top:-4px;
        background-image: url(../img/usercard_v6_h.21439f6d.png)
    }

    .usercard-box.usercard-businesscars.usercard-businesscars-lv7:before {
        top: -4px;
        background-image: url(../img/usercard_v7_h.a801165b.png)
    }

    .usercard-box.usercard-businesscars.usercard-businesscars-lv8:before {
        top: -4px;
        background-image: url(../img/usercard_v8_h.5a7687d3.png)
    }

    .usercard-box.usercard-businesscars.usercard-businesscars-lv9:before {
        top: -4px;
        background-image: url(../img/usercard_v9_h.bf911ded.png)
    }

    .usercard-box.usercard-businesscars.usercard-businesscars-lv10:before {
        top: -4px;
        background-image: url(../img/usercard_v10_h.477e66f7.png)
    }
}

.usercard-box .usercard-tag-vip {
    position: absolute;
    top: 13px;
    left: 8px
}

.usercard-box .usercard-more {
    font-size: 12px;
    color: #8b969f;
    position: absolute;
    top: 16px;
    right: 16px
}

.usercard-box .usercard-top {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#40515f),to(#28333d));
    background-image: linear-gradient(180deg,#40515f,#28333d);
    padding-top: 16px
}

.usercard-box .usercard-label {
    padding: 0 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    top: 126px;
    left: 0;
    width: 100%;
    box-sizing: border-box
}

.usercard-box .user-info-label {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.usercard-box .user-info-label::-webkit-scrollbar {
    display: none
}

.usercard-box .user-info-label>span {
    margin: 0 2px 0 2px
}

.usercard-box .usercard-follow {
    color: #8b969f;
    font-size: 12px;
    margin: 4px 0 16px
}

.usercard-box>p {
    margin-top: 8px
}

.usercard-box .line {
    background: #2f3c47;
    width: 90%;
    height: 1px;
    margin: 52px auto 12px
}

.userinfo-area li,.userinfo-editsex li {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    position: relative;
    border-bottom: 1px solid #2f3c47
}

.userinfo-area li.on:after,.userinfo-editsex li.on:after {
    content: "";
    position: absolute;
    top: 19px;
    right: 0;
    width: 24px;
    height: 24px;
    background: url(../img/check.591c9be4.png);
    background-size: 100% 100%
}

.userinfo-area li {
    font-size: 14px;
    color: #b4c0c9;
    overflow: hidden
}

.userinfo-area li span {
    color: #8b969f;
    float: right
}

.userinfo-area li.on span {
    margin-right: 24px
}

.userinfo-editbirth .confirm-shade {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    background: transparent
}

.userinfo-editbirth .confirm-box {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 16px 0 40px;
    box-sizing: border-box;
    z-index: 995;
    width: 100%;
    background: #304051;
    border-radius: 4px 4px 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-animation: slideInBottom .3s;
    animation: slideInBottom .3s
}

.userinfo-editbirth .confirm-box .pick {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.userinfo-editbirth .confirm-box .pick:first-child li {
    text-align: right
}

.userinfo-editbirth .confirm-box .pick:last-child li {
    text-align: left
}

.userinfo-editbirth .confirm-box .pick li {
    font-size: 16px;
    color: #a5a9ac
}

.userinfo-editbirth .confirm-box .pick .pick-list-item {
    color: #03c37e;
    font-weight: 700
}

.userinfo-editbirth-pc {
    text-align: center;
    font-size: 0
}

.userinfo-editbirth-pc .select-box {
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
    text-align: left
}

.userinfo-editavatarframe {
    padding: 32px 0 0
}

.userinfo-editavatarframe .avatarframe-list-box {
    margin-top: 160px
}

.userinfo-editavatarframe .avatarframe-list-box .avatarframe-title {
    margin: 24px 0 8px 0;
    color: #b4c0c9
}

.userinfo-editavatarframe .avatarframe-con {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    background: #28333d;
    padding-top: 32px;
    z-index: 10;
    padding-top: -webkit-calc(32px + constant(safe-area-inset-top));
    padding-top: calc(32px + constant(safe-area-inset-top));
    padding-top: -webkit-calc(32px + env(safe-area-inset-top));
    padding-top: calc(32px + env(safe-area-inset-top));
    padding-bottom: 24px
}

.userinfo-editavatarframe .avatarframe-con .avatarframe-user {
    margin: 0 auto;
    width: 80px;
    height: 80px;
    position: relative;
    cursor: pointer
}

.userinfo-editavatarframe .avatarframe-con .avatarframe-user .icon {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 5
}

.userinfo-editavatarframe .avatarframe-con .avatarframe-desc {
    color: #a5a9ac;
    font-size: 14px;
    margin: 0 0 16px 20px
}

.userinfo-editavatarframe .avatarframe-con .avatarframe-title {
    margin: 32px 0 16px 20px;
    color: #a5a9ac
}

.userinfo-editavatarframe .avatarframe-list li {
    width: 32%;
    margin-right: 2%;
    background: #304051;
    border-radius: 4px;
    padding: 0 0 28px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box
}

.userinfo-editavatarframe .avatarframe-list li:nth-child(3n) {
    margin-right: 0
}

.userinfo-editavatarframe .avatarframe-list li:before {
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    width: 100%;
    height: 100%;
    border: 2px solid #03c47e;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none
}

.userinfo-editavatarframe .avatarframe-list li:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px 0 0 0;
    background: #03c47e url(../img/icon_create_room_selected.c2ee0584.png) 5px 6px no-repeat;
    background-size: 12px 12px;
    opacity: 0;
    pointer-events: none
}

.userinfo-editavatarframe .avatarframe-list li.on:after,.userinfo-editavatarframe .avatarframe-list li.on:before {
    opacity: 1
}

.userinfo-editavatarframe .avatarframe-list li.disable .avatarframe-list-sub,.userinfo-editavatarframe .avatarframe-list li.disable .avatarframe-list-title,.userinfo-editavatarframe .avatarframe-list li.disable .user-avatar {
    opacity: .5
}

.userinfo-editavatarframe .avatarframe-list li .avatarframe-list-title {
    background: hsla(0,0%,100%,.05);
    border-radius: 4px 4px 0 0;
    color: #b4c0c9;
    text-align: center;
    height: 20px;
    line-height: 20px;
    font-size: 12px
}

.userinfo-editavatarframe .avatarframe-list li .avatarframe-list-title span {
    display: block;
    -webkit-transform: scale(.75);
    transform: scale(.75)
}

.userinfo-editavatarframe .avatarframe-list li .user-avatar {
    display: block;
    margin: 16px auto 8px
}

.userinfo-editavatarframe .avatarframe-list li .avatarframe-list-sub {
    font-size: 14px;
    text-align: center
}

.userinfo-editavatarframe .avatarframe-list li .avatarframe-list-sub-height {
    height: 52px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.userinfo-editavatarframe .avatarframe-list li .avatarframe-extra {
    text-align: center;
    width: 100%;
    border-radius: 0 0 4px 4px;
    background: rgba(0,0,0,.3);
    position: absolute;
    bottom: 0;
    height: 20px;
    line-height: 20px
}

.userinfo-editavatarframe .avatarframe-list li .avatarframe-extra span {
    color: #b4c0c9;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    display: block
}

.userinfo-editavatarframe .avatarframe-list li .avatarframe-btn {
    width: 72px;
    height: 24px;
    line-height: 22px;
    margin: 8px auto 0;
    padding: 0;
    display: block;
    font-size: 12px
}

.userinfo-editavatarframe .avatarframe-list-all li {
    padding: 0 0 8px
}

.userinfo-editavatarframe-pc {
    padding: 0
}

.userinfo-editavatarframe-pc .avatarframe-con {
    position: absolute;
    top: 16px;
    background: transparent;
    padding-top: 0
}

.userinfo-editavatarframe-pc .avatarframe-con .avatarframe-title {
    margin: 24px 0 8px 0;
    color: #b4c0c9
}

.userinfo-editavatarframe-pc .avatarframe-list-box {
    width: 100%;
    height: 316px;
    margin-top: 136px;
    position: relative
}

.userinfo-editavatarframe-pc .avatarframe-list-box:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 96px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,0)),to(#28333d));
    background-image: linear-gradient(180deg,rgba(40,51,61,0),#28333d);
    pointer-events: none
}

.userinfo-editavatarframe-pc .avatarframe-list-box .avatarframe-scrollbox {
    height: 100%;
    overflow: auto
}

.userinfo-editavatarframe-pc .infinitescroll {
    position: absolute;
    top: 0
}

.userinfo-editavatarframe-pc .avatarframe-list {
    height: 100%;
    padding: 2px 2px 40px 2px;
    box-sizing: border-box;
    margin-top: 0
}

.userinfo-editavatarframe-pc .avatarframe-list.myavatarframe {
    height: auto
}

.avatarframe-list-box .avatarframe-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.back_avatarpage {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 11
}

.usercardbtns {
    padding: 0 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.usercardbtns .g-Btn {
    width: 72px;
    height: 32px;
    padding: 0;
    margin-right: 16px;
    line-height: 1;
    font-weight: 400;
    font-size: 14px
}

.usercardbtns .g-Btn.g-Btn-green {
    background: transparent
}

.usercardbtns .g-Btn:last-child {
    margin-right: 0
}

.usercardbtns .btns-group {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: left
}

.usercardbtns .btns-more {
    position: relative;
    background: #1e2831;
    border-radius: 20px;
    width: 40px;
    height: 32px
}

.usercardbtns .btns-more>span {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.usercardbtns .btns-more ul {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 80px;
    box-sizing: border-box;
    -webkit-transform: translate(-50%,-10px);
    transform: translate(-50%,-10px);
    background: #43586f;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    overflow: hidden
}

.usercardbtns .btns-more ul:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%,4px);
    transform: translate(-50%,4px);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #43586f
}

.usercardbtns .btns-more ul li {
    position: relative;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #fff
}

.usercardbtns .btns-more ul li:active {
    background: rgba(40,51,61,.5)
}

.usercardbtns .btns-more ul li:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background-color: hsla(0,0%,100%,.1)
}

.usercardbtns .btns-more ul li:last-child:after {
    display: none
}

.confirmFrameExpire .cofirm-cont {
    padding: 32px 32px 24px!important;
    border-radius: 8px
}

.confirmFrameExpire .cofirm-msg {
    padding: 0 0 24px
}

.confirmFrameExpire .cofirm-msg .frame_expire_title {
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 700
}

.confirmFrameExpire .cofirm-msg>div {
    margin: 16px auto;
    width: 80px;
    height: 80px;
    position: relative
}

.confirmFrameExpire .cofirm-msg>div img {
    display: block;
    width: 100%;
    height: 100%
}

.confirmFrameExpire .cofirm-msg>div img.frame {
    width: 120%;
    height: 120%;
    position: absolute;
    left: -10%;
    top: -10%
}

.confirmFrameExpire .cofirm-msg .frame_expire_desc {
    font-size: 14px;
    color: #b4c0c9
}

.confirmFrameExpire .cofirm-msg .frame_expire_desc span {
    color: #03c47e
}

.confirmFrameExpire .cofirm-btns.double a.g-Btn-green2 {
    margin-left: 0
}

.confirmFrame .cofirm-cont {
    padding: 32px 32px 24px;
    border-radius: 8px
}

.confirmFrame .cofirm-cont h2 {
    color: #b4c0c9;
    font-size: 14px!important
}

.confirmFrame .cofirm-msg {
    padding-bottom: 24px;
    min-height: 0;
    color: #fff;
    font-size: 16px
}

.confirmFrame .cofirm-btns.double a:last-of-type {
    margin-left: 0
}

.zoom-in-out {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.zoom-in-out,.zoom-in-out .zoom-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.zoom-in-out .zoom-bar {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 4px;
    background: #1e2831;
    border-radius: 2px;
    margin-left: 4px;
    margin-right: 4px
}

.zoom-in-out .zoom-bar .zoom-point {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #03c47e;
    cursor: pointer
}

.pagewithdraw .topnav a {
    position: absolute;
    top: 0;
    right: 20px;
    right: -webkit-calc(20px + env(safe-area-inset-right));
    right: calc(20px + env(safe-area-inset-right));
    color: #8b969f
}

.pagewithdraw .withdraw-label {
    margin-top: 32px;
    font-size: 14px;
    color: #a5a9ac
}

.pagewithdraw .withdraw-radio {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 12px;
    font-size: 0
}

.pagewithdraw .withdraw-radio li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 32px;
    box-sizing: border-box;
    background: #1e2831;
    border: 1px solid transparent;
    border-radius: 16px;
    margin-right: 8px;
    vertical-align: middle;
    font-size: 12px;
    color: #b4c0c9
}

.pagewithdraw .withdraw-radio li.on {
    background: rgba(3,196,126,.1);
    border: 1px solid #03c47e;
    color: #03c47e
}

.pagewithdraw .withdraw-radio li:last-child {
    margin-right: 0
}

.pagewithdraw .input {
    margin-top: 12px
}

.pagewithdraw .input a {
    font-size: 12px
}

.pagewithdraw .withdraw-btn {
    margin-top: 32px
}

.pagewithdraw .withdraw-btn button {
    width: 100%
}

.follow-title {
    line-height: 24px;
    padding: 0 16px;
    font-size: 12px;
    color: #8b969f
}

.follow-list {
    background: #1e2831;
    padding: 12px 16px;
    background: #28333d
}

.follow-list li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 16px
}

.follow-list li:last-child {
    margin-bottom: 0
}

.follow-list li .user-avatar {
    margin-right: 10px
}

.follow-list li .user-avatar img {
    border-width: 1px!important
}

.follow-list li .g-Btn {
    width: 56px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    padding: 0
}

.follow-list li .g-Btn.g-Btn-green {
    background: transparent
}

.follow-list li .g-Btn.btn-long {
    width: 80px
}

.follow-list li .g-Btn.btn-talk {
    width: 28px;
    height: 28px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #304051;
    border-radius: 16px;
    padding: 0;
    margin-left: 15px;
    text-align: center
}

.follow-list li .content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.follow-list .user-info-label {
    margin-top: 2px
}

.follow-list .user-info-label>span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin: 4px 4px 0 0;
    padding-top: 1px;
    padding-bottom: 1px
}

.follow-list .user-info-label>span:last-child {
    margin-right: 0
}

.follow-none {
    margin: 80px auto 0
}

.follow-none p {
    font-size: 14px;
    color: #61686f;
    text-align: center;
    margin-top: 16px
}

.follow-none .icon {
    display: block;
    margin: 0 auto
}

.income-wrap {
    box-sizing: border-box
}

.income-wrap .subnav {
    padding: 0 20px 10px
}

.income-wrap .subnav .sticky-box {
    background: #28333d
}

.income-padding {
    padding: 30px 20px 10px
}

.income-balance {
    width: 100%;
    background: #304051;
    box-sizing: border-box;
    padding: 37px 20px;
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.income-balance .income-balance-desc p:first-child {
    font-size: 24px
}

.income-balance .income-balance-desc p:last-child {
    color: #8b969f
}

.income-balance .income-balance-desc p:last-child i {
    margin-left: 5px;
    width: 14px;
    height: 14px
}

.income-box .income-time {
    width: 100%;
    height: 24px;
    line-height: 24px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #1e2831;
    font-size: 12px;
    color: #8b969f
}

.income-box .income-desc {
    padding: 0 20px
}

.income-box .income-item {
    border-bottom: 1px solid #2f3c47;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 10px 0
}

.income-box .income-gift {
    color: #b4c0c9
}

.income-box .income-add {
    color: #03c47e;
    text-align: right
}

.income-box .income-reduce {
    color: #1bb9ff;
    text-align: right
}

.income-box .income-desc-time,.income-box .income-left {
    font-size: 12px;
    color: #8b969f
}

.income-none {
    margin: 80px auto 0
}

.income-none p {
    font-size: 14px;
    color: #61686f;
    text-align: center;
    margin-top: 16px
}

.income-none .icon {
    display: block;
    margin: 0 auto
}

.switch {
    width: 32px;
    height: 16px;
    background: rgba(180,192,201,.48);
    border: 1px solid #b4c0c9;
    border-radius: 16px;
    position: relative;
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease;
    -webkit-transition: border-color .3s;
    transition: border-color .3s
}

.switch:before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    -webkit-transition: left .3s;
    transition: left .3s
}

.switch.on {
    background: #03c47e;
    border-color: #03c47e
}

.switch.on:before {
    left: 16px
}

.switch-box .switch {
    display: inline-block
}

.teamlist li {
    background: #28333d;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 12px 8px
}

.teamlist li:last-child {
    margin-bottom: 0
}

.teamlist li .row-1,.teamlist li .row-2,.teamlist li .row-3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.teamlist li .col-1,.teamlist li .col-2,.teamlist li .col-3,.teamlist li .col-4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start
}

.teamlist li .row-1 .col-2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.teamlist li .row-2 {
    margin-top: 10px
}

.teamlist li .row-2 .team-tag {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#2084ff),to(#0affd3)),radial-gradient(0 228% at 0 0,#37fddf 100%,rgba(2,186,218,0) 0);
    background-image: linear-gradient(180deg,#2084ff,#0affd3),radial-gradient(0 228% at 0 0,#37fddf 100%,rgba(2,186,218,0) 0);
    font-weight: 700
}

.teamlist li .row-3 {
    margin-top: 4px
}

.teamlist li .row-3 .team-tag {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ff606f),to(#ffa342));
    background-image: linear-gradient(180deg,#ff606f,#ffa342);
    font-weight: 700
}

.teamlist li .col-1 {
    margin-right: 8px
}

.teamlist li .col-2 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.teamlist li .col-3 {
    margin-left: 8px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.teamlist li .col-3 .g-Btn-green {
    width: 72px;
    height: 28px;
    padding: 0;
    line-height: 1;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    color: #03c47e
}

.teamlist li .col-4 {
    margin-left: 8px
}

.teamlist li .col-4 .g-Btn-grey {
    width: 36px;
    height: 36px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #304051;
    padding: 0;
    margin-top: -4px
}

.teamlist li .oneline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.teamlist li .oneline p {
    width: 100%
}

.teamlist li .team-title {
    min-height: 20px;
    line-height: 20px;
    margin-bottom: 3px;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.teamlist li .team-title p {
    width: 100%
}

.teamlist li .team-host {
    min-height: 16px;
    line-height: 16px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.teamlist li .team-host p {
    width: 100%
}

.teamlist li .team-tag {
    width: 40px;
    display: block;
    border-radius: 9px;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    color: #28333d
}

.teamlist li .team-game {
    font-size: 12px;
    color: #b4c0c9
}

.teamlist li .team-user {
    font-size: 14px;
    color: #fff
}

.teamlist li .team-time {
    font-size: 12px;
    color: #b4c0c9
}

.teamlist .teamlist-title {
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 16px
}

.screenteam .content-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.screenteam .content-footer .g-Btn {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-right: 16px
}

.screenteam .content-footer .g-Btn:last-child {
    margin-right: 0
}

.screenteam .content-footer .g-Btn-white {
    background: transparent
}

.team-extend {
    margin-top: 6px
}

.team-extend .list-btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.team-extend .list-btns .g-Btn {
    width: 88px;
    height: 32px;
    border-radius: 16px;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    font-weight: 400
}

.team-extend .list-btns .g-Btn.on.g-Btn-grey {
    color: #03c47e
}

.team-extend .list-btns .g-Btn span {
    vertical-align: middle
}

.team-extend .list-btns .icon {
    margin-right: 4px
}

.team-extend .list-btns .g-Btn.btn-team-notice {
    width: 116px
}

.playconfirm .content-box {
    height: auto!important;
    padding: 32px 26px 50px 26px
}

.playconfirm .content-box .options-btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.playconfirm .content-box .options-btns .g-Btn {
    width: 46%;
    height: 48px;
    border-radius: 24px;
    line-height: 18px;
    padding: 0;
    font-weight: 400;
    font-size: 14px
}

.playconfirm .content-box .options-btns .g-Btn span {
    line-height: 20px;
    font-size: 12px
}

.playconfirm .content-box .cancel-btns {
    margin-top: 16px
}

.playconfirm .content-box .cancel-btns .g-Btn {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    line-height: 1;
    padding: 0;
    background: transparent;
    font-weight: 400;
    font-size: 14px
}

.live-team-confirm .content-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.live-team-confirm .content-footer .g-Btn {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-right: 16px
}

.live-team-confirm .content-footer .g-Btn:last-child {
    margin-right: 0
}

.live-team-confirm .content-footer .g-Btn-white {
    background: transparent
}

.liveteamform ul {
    font-size: 0
}

.liveteamform li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: 16px;
    margin-right: 32px
}

.liveteamform li p {
    position: relative;
    max-width: 64px;
    margin-top: 8px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.liveteamform li p.wrap {
    display: inline-block
}

.liveteamform li i {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #07e4b5;
    background-size: 16px 16px;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 0 12px 0 12px
}

.liveteamform .choose img {
    margin-top: 0
}

.invite-notice {
    padding: 24px 16px 30px 16px
}

.invite-notice .notice-time {
    margin-top: 24px;
    font-size: 14px;
    color: #61686f;
    text-align: center
}

.invite-notice li:first-child .notice-time {
    margin-top: 0
}

.invite-notice .notice-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 16px
}

.invite-notice .notice-info {
    margin-left: 10px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.invite-notice .notice-info .user-name {
    margin-bottom: 8px;
    font-size: 16px;
    color: #fff
}

.invite-notice .notice-message {
    width: 184px;
    background: #304051;
    border-radius: 2px 20px 20px 20px;
    padding-top: 8px;
    overflow: hidden
}

.invite-notice .message-room {
    line-height: 16px;
    font-size: 12px;
    color: #b4c0c9
}

.invite-notice .message-room,.invite-notice .message-text {
    padding: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.invite-notice .message-text {
    margin-top: 8px;
    line-height: 20px;
    font-size: 14px;
    color: #fff
}

.invite-notice .message-cover {
    position: relative;
    height: 104px;
    background: #000;
    margin-top: 4px
}

.invite-notice .message-cover img {
    width: 100%;
    height: 100%;
    border-radius: 0 0 20px 20px;
    object-fit: contain
}

.invite-notice .cover-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 0 8px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(11%,transparent),to(rgba(0,0,0,.4)));
    background-image: linear-gradient(180deg,transparent 11%,rgba(0,0,0,.4));
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 12px;
    color: #b4c0c9
}

.invite-notice .cover-info .icon-live-people {
    vertical-align: -1px;
    margin-right: 3px
}

.invite-notice .cover-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: rgba(0,0,0,.8);
    font-size: 12px;
    color: #b4c0c9
}

.invite-notice .default-img {
    object-fit: contain;
    object-position: 50% -32px
}

.multiplayer-con li {
    width: 100%;
    background: #28333d;
    border-radius: 4px;
    margin: 0 auto 8px
}

.multiplayer-con .multiplayer-cover {
    height: 0;
    padding-top: 37.31778426%;
    position: relative
}

.multiplayer-con .multiplayer-cover div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.multiplayer-con .multiplayer-cover div img {
    border-radius: 4px 4px 0 0;
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.multiplayer-con .multiplayer-mode {
    padding: 12px 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.multiplayer-con .multiplayer-mode>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.multiplayer-con .multiplayer-mode .multiplayer-desc {
    color: #8b969f
}

.multiplayer-con .multiplayer-mode .g-Btn {
    width: 70px;
    height: 28px;
    line-height: 28px;
    padding: 0;
    margin-left: 2px;
    font-weight: 400
}

.guidepage {
    padding-bottom: 92px
}

.guidepage .topnav .topnav-fixed h1 {
    padding: 0 50px
}

.guidepage .guidepage-box {
    margin: 16px 16px 0 16px
}

.guidepage .guidepage-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-bottom: 10px
}

.guidepage .guidepage-title {
    font-weight: 400
}

.guidepage .guidepage-more {
    font-size: 12px;
    color: #8b969f;
    letter-spacing: 1px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-left: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.guidepage .guidepage-more i {
    margin-left: 2px;
    width: 10px;
    height: 10px
}

.guidepage .guidepage-room-list .roomlist li {
    margin-bottom: 10px;
    margin-right: 2%;
    width: 49%;
    background: #304051
}

.guidepage .guidepage-room-list .roomlist li:nth-child(2n) {
    margin-right: 0
}

.guidepage .guidepage-user-list {
    background: #304051;
    border-radius: 4px;
    padding: 15px 8px
}

.guidepage .guidepage-user-list .follow-box {
    padding: 0
}

.guidepage .guidepage-user-list .follow-item {
    margin-bottom: 15px
}

.guidepage .guidepage-user-list .followlivelist .entry button {
    background: #03c47e;
    padding: 0
}

.guidepage .guidepage-user-list .user .name .icon {
    width: 16px;
    height: 16px
}

.guidepage .followlivelist li {
    margin-bottom: 16px
}

.guidepage .followlivelist li:last-child {
    margin-bottom: 0
}

.guidepage .guidepage-btn {
    width: 100%;
    height: 72px;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #1e2831;
    box-shadow: 0 -1px 0 0 rgba(0,0,0,.5);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.guidepage .guidepage-btn a {
    font-weight: 400
}

.guidepage .guidepage-btn a:last-child {
    margin-left: 24px
}

.guidepage .guidepage-list-empty {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 30px
}

.guidepage .guidepage-list-empty .icon-live-empty {
    background-size: 100%;
    margin-bottom: 16px
}

.guidepage .guidepage-list-empty p {
    color: #b4c0c9;
    text-align: center
}

.findfriend {
    padding-bottom: 16px
}

.findfriend .search-mobile {
    padding: 0;
    height: auto;
    margin-bottom: 8px
}

.findfriend .search-mobile>div {
    position: static;
    background: transparent
}

.findfriend .search-mobile .search-inputbox {
    background: #304051
}

.findfriend .frind-con {
    padding: 0 16px;
    margin-bottom: 32px
}

.findfriend .frind-con .friend-title {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 16px
}

.findfriend .frind-con .follow-list {
    padding: 16px 16px 16px 8px;
    background: #304051;
    border-radius: 4px
}

.findfriend .headerbox {
    height: auto;
    padding: 16px 16px 24px 16px;
    box-sizing: border-box;
    background-color: transparent
}

.findfriend .headerbox .search {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 36px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #304051;
    border-radius: 28px;
    font-size: 14px;
    color: #899cb0
}

.findfriend .headerbox .search .icon {
    margin-left: 13px;
    margin-right: 3px
}

.findfriend .headerbox {
    position: static;
    padding-left: 8%;
    padding-right: 8%
}

@media only screen and (max-width: 768px) {
    .findfriend .headerbox {
        padding-left:40px;
        padding-right: 40px
    }
}

@media only screen and (max-width: 414px) {
    .findfriend .headerbox {
        padding-left:16px;
        padding-right: 16px
    }
}

.userdetail {
    padding-bottom: 116px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#40515f),to(#1e2831));
    background-image: linear-gradient(180deg,#40515f,#1e2831);
    background-size: 100% 220px;
    background-repeat: no-repeat
}

.userdetail.scroll .topnav .topnav-fixed {
    background: rgba(30,40,49,.9);
    z-index: 101
}

.userdetail.scroll .fixed-status .sticky-box .subnav {
    background: rgba(30,40,49,.9)
}

.userdetail.scroll .user-detail2 .user-avatar {
    top: 18px;
    top: -webkit-calc(18px + constant(safe-area-inset-top));
    top: calc(18px + constant(safe-area-inset-top));
    top: -webkit-calc(18px + env(safe-area-inset-top));
    top: calc(18px + env(safe-area-inset-top));
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 24px!important;
    height: 24px!important
}

.userdetail .topnav .topnav-fixed {
    -webkit-transition: all .3s;
    transition: all .3s
}

.userdetail .user-detail2 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.userdetail .user-detail2 .user-avatar {
    position: fixed;
    top: 92px;
    top: -webkit-calc(92px + constant(safe-area-inset-top));
    top: calc(92px + constant(safe-area-inset-top));
    top: -webkit-calc(92px + env(safe-area-inset-top));
    top: calc(92px + env(safe-area-inset-top));
    left: 84%;
    margin: 0;
    z-index: 102;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.userdetail .subnavBox {
    overflow: hidden;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.userdetail .subnav h2 {
    text-align: center;
    margin: 0 24px
}

.userdetail .subnav h2.on {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.userdetail .userdetail-box {
    background: #1e2831;
    border-radius: 4px;
    padding: 0 16px;
    margin-top: 16px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.userdetail .userdetail-group-title {
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 16px;
    color: #fff
}

.userdetail .userdetail-game {
    padding: 16px;
    background: #28333d;
    border-radius: 4px;
    box-sizing: border-box
}

.userdetail .userdetail-game li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 32px
}

.userdetail .userdetail-game li:last-child {
    margin-bottom: 0
}

.userdetail .userdetail-game li .userdetail-game-img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden
}

.userdetail .userdetail-game li .userdetail-game-img img {
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block
}

.userdetail .userdetail-game li .userdetail-game-p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 8px
}

.userdetail .userdetail-game li .userdetail-game-p p:first-child {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.userdetail .userdetail-game li .userdetail-game-p p:last-child {
    font-size: 12px;
    color: #b4c0c9
}

.userdetail .userdetail-game li .g-Btn {
    width: 72px;
    padding: 0;
    font-weight: 400;
    font-size: 14px
}

.userdetail .userdetail-empty {
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    color: #8b969f
}

.userdetail .userdetail-empty .icon {
    margin-bottom: 8px
}

.userdetail .userdetail-empty .g-Btn {
    width: 160px;
    font-size: 14px;
    font-weight: 400;
    margin-top: 16px
}

.userdetail .userdetail-btns {
    width: 100%;
    background: #28333d;
    box-sizing: border-box;
    padding: 16px 20px 16px 20px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 7;
    bottom: env(safe-area-inset-bottom)
}

.userdetail .userdetail-btns button {
    width: 96px;
    height: 40px
}

.userdetail .userdetail-btns .btns-more {
    height: 40px;
    margin-right: 14px
}

.userdetail .userdetail-btns .btns-more span {
    line-height: 40px
}

.userdetail .userdetail-curgame {
    margin: 14px 16px 10px;
    padding: 12px 8px;
    box-sizing: border-box;
    background: hsla(0,0%,100%,.1);
    border-radius: 8px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 12px;
    color: #fff
}

.userdetail .userdetail-curgame span {
    color: #8b969f
}

.userdetail .userdetail-curgame img {
    width: 20px;
    height: 20px;
    margin: 0 2px 0 8px;
    border-radius: 50%
}

.userdetail .userdetail-curgame button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 72px;
    height: 28px;
    font-size: 14px;
    padding: 0;
    line-height: 28px
}

.select-box {
    min-width: 100px;
    height: 32px;
    line-height: 32px;
    background: #1e2831;
    border-radius: 4px;
    color: #b4c0c9;
    position: relative;
    padding: 0 8px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 12px
}

.select-box .select-text {
    height: 100%
}

.select-box .icon {
    width: 20px;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    float: right
}

.select-box ul {
    position: absolute;
    left: 0;
    top: 32px;
    width: 100%;
    max-height: 290px;
    overflow-y: auto;
    background: #1e2831;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.select-box ul li {
    height: 32px;
    padding: 0 8px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer
}

.select-box ul li.on,.select-box ul li:hover {
    background: #304051;
    border-radius: 4px
}

.cloudpcmodel .form {
    padding: 24px 20px
}

.cloudpcmodel .form .label {
    margin-bottom: 8px;
    line-height: 20px;
    font-size: 14px;
    color: #a5a9ac
}

.cloudpcmodel .form .checkbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 14px 0;
    border-bottom: 1px solid #2f3c47
}

.cloudpcmodel .form .checkbox:last-child {
    border-bottom: 0
}

.cloudpcmodel .form .checkbox>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 9px
}

.cloudpcmodel .form .checkbox>div>p {
    line-height: 18px;
    font-size: 12px;
    color: #b4c0c9
}

.cloudpcmodel .form .checkbox>div>p:first-child {
    margin-bottom: 4px;
    line-height: 22px;
    font-size: 16px;
    color: #fff
}

.cloudpcmodel-confirm .cofirm-cont {
    padding: 16px
}

.share-pc-tips {
    position: absolute;
    top: 8px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    max-width: 98%;
    box-sizing: border-box;
    padding: 10px 6px 10px 16px;
    background-image: -webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.65)),color-stop(50%,#000),to(rgba(0,0,0,.65)));
    background-image: linear-gradient(270deg,rgba(0,0,0,.65),#000 50%,rgba(0,0,0,.65));
    border-radius: 16px
}

.share-pc-tips span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    line-height: 20px;
    font-size: 14px;
    color: #03c47e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.share-pc-tips button {
    height: 28px;
    line-height: 26px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 0 12px;
    margin-left: 16px;
    font-weight: 400;
    font-size: 14px!important;
    color: #fff
}

.share-pc-cards {
    background: #28333d;
    border-radius: 8px
}

.share-pc-cards.in-pc {
    background: transparent
}

.share-pc-cards.in-pc .cards-title {
    padding: 0;
    margin-bottom: 8px
}

.share-pc-cards.in-pc .cards-title>span {
    font-size: 20px;
    color: #fff;
    font-weight: 600
}

.share-pc-cards.in-pc .cards-title>sub {
    font-size: 12px;
    color: #fff;
    font-weight: 400
}

.share-pc-cards.in-pc .cards-title>button {
    background: transparent;
    border: 0;
    font-size: 16px;
    color: #8b969f;
    font-weight: 400;
    cursor: pointer
}

.share-pc-cards.in-pc .cards-title>button:hover {
    color: #fff
}

.share-pc-cards.in-pc .cards-list {
    position: relative
}

.share-pc-cards.in-pc .cards-list.has-scroll:after {
    content: "";
    position: absolute;
    top: 0;
    right: -80px;
    bottom: 0;
    z-index: 2;
    width: 244px;
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(30,40,49,0)),color-stop(70%,#1e2831));
    background-image: linear-gradient(90deg,rgba(30,40,49,0),#1e2831 70%);
    pointer-events: none;
    -webkit-animation: fadeIn .3s;
    animation: fadeIn .3s
}

.share-pc-cards.in-pc .card-item {
    max-width: none
}

.share-pc-cards.in-pc .card-item:first-child {
    margin-left: 0
}

.share-pc-cards.in-pc .card-item:last-child {
    margin-right: 0
}

.share-pc-cards.in-pc .card-item.status-empty .card-item-content {
    height: 101px
}

.share-pc-cards.in-pc .card-item-user {
    height: 60px;
    padding: 0 16px
}

.share-pc-cards.in-pc .card-item-user span {
    font-size: 14px
}

.share-pc-cards.in-pc .card-item-content {
    padding: 0 16px;
    height: 58px;
    line-height: 20px;
    font-size: 14px;
    cursor: pointer;
    word-wrap: break-word;
    word-break: break-all
}

.share-pc-cards.in-pc .card-item-game {
    height: 48px;
    padding: 0 16px
}

.share-pc-cards.in-pc .card-item-game span {
    font-size: 14px
}

.share-pc-cards.in-pc .card-item-game .g-Btn {
    width: 72px;
    height: 28px;
    line-height: 26px
}

.share-pc-cards .cards-title {
    height: 42px;
    line-height: 1;
    padding: 0 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.share-pc-cards .cards-title>span {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    font-weight: 500;
    font-size: 16px;
    max-width: 66%
}

.share-pc-cards .cards-title>span,.share-pc-cards .cards-title>sub {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.share-pc-cards .cards-title>sub {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 4px;
    line-height: 1;
    bottom: 0;
    font-weight: 400;
    font-size: 12px
}

.share-pc-cards .cards-title>button {
    min-width: 56px;
    height: 22px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: hsla(0,0%,100%,.1);
    border: 0;
    border-radius: 11px;
    padding-left: 12px;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    font-size: 12px;
    color: #fff
}

.share-pc-cards .cards-title>button span {
    line-height: 1
}

.share-pc-cards .cards-title>button i {
    position: static
}

.share-pc-cards .cards-list {
    padding-bottom: 8px
}

.share-pc-cards .card-item {
    width: 75.80174927%;
    max-width: 350px;
    background: #304051;
    border-radius: 4px
}

.share-pc-cards .card-item.status-empty .card-item-content {
    height: 88px;
    -webkit-line-clamp: 5;
    margin-bottom: 20px
}

.share-pc-cards .card-item.status-empty .card-item-game {
    display: none
}

.share-pc-cards .card-item:first-child {
    margin-left: 8px
}

.share-pc-cards .card-item:last-child {
    margin-right: 8px
}

.share-pc-cards .card-item-user {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 34px;
    padding: 0 8px
}

.share-pc-cards .card-item-user span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 4px;
    font-size: 12px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.share-pc-cards .card-item-content {
    height: 52px;
    padding: 0 8px;
    line-height: 18px;
    font-size: 12px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all
}

.share-pc-cards .card-item-content span {
    color: #03c47e
}

.share-pc-cards .card-item-content .icon {
    position: inherit
}

.share-pc-cards .card-item-content a {
    text-decoration: none
}

.share-pc-cards .card-item-game {
    height: 44px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-top: 1px solid hsla(0,0%,100%,.1);
    background-image: linear-gradient(153deg,#40515f,#304051 95%);
    margin-top: 12px;
    border-radius: 0 0 4px 4px;
    padding: 0 8px;
    font-size: 12px;
    color: #8b969f
}

.share-pc-cards .card-item-game span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size: 12px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.share-pc-cards .card-item-game .g-Btn {
    width: 64px;
    height: 24px;
    line-height: 22px;
    margin-left: 12px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 0;
    font-size: 12px
}

.share-pc-cards-new {
    background: transparent
}

.share-pc-cards-new .card-item-box {
    height: 118px;
    padding: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box
}

.share-pc-cards-new .card-item-box .card-text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 100%;
    font-size: 12px;
    line-height: 17px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical
}

.share-pc-cards-new .card-item-box .card-text span {
    color: #03c47e
}

.share-pc-cards-new .card-item-box .card-text .icon {
    position: inherit
}

.share-pc-cards-new .card-item-box .card-text a {
    text-decoration: none
}

.share-pc-cards-new .card-item-box .card-image {
    margin-left: 8px;
    height: 100%;
    width: 64px;
    text-align: center
}

.share-pc-cards-new .card-item-box .card-image .image-box {
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px
}

.share-pc-cards-new .card-item-box .card-image .image-box.show {
    border: 1px solid rgba(30,40,49,.8)
}

.share-pc-cards-new .card-item-box .card-image .image-box img {
    display: inline-block;
    width: 64px;
    height: 64px;
    object-fit: cover
}

.share-pc-cards-new .card-item-box .card-image .g-Btn {
    margin-top: 14px;
    padding: 0;
    width: 64px;
    height: 24px;
    line-height: 22px;
    font-size: 12px
}

.share-pc-cards-new.in-pc .card-item-box {
    height: 174px;
    padding: 16px
}

.share-pc-cards-new.in-pc .card-item-box .card-text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 100%;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical
}

.share-pc-cards-new.in-pc .card-item-box .card-text span {
    color: #03c47e
}

.share-pc-cards-new.in-pc .card-item-box .card-image {
    margin-left: 12px;
    height: 100%;
    width: 102px;
    text-align: center
}

.share-pc-cards-new.in-pc .card-item-box .card-image .image-box {
    width: 102px;
    height: 102px;
    box-sizing: border-box;
    border-radius: 8px
}

.share-pc-cards-new.in-pc .card-item-box .card-image .image-box.show {
    border: 1px solid rgba(30,40,49,.8)
}

.share-pc-cards-new.in-pc .card-item-box .card-image .image-box img {
    width: 102px;
    height: 102px;
    object-fit: cover
}

.share-pc-cards-new.in-pc .card-item-box .card-image .g-Btn {
    margin-top: 12px;
    padding: 0;
    width: 72px;
    height: 28px;
    line-height: 26px
}

.pc-live-confirm-wrap:after {
    position: absolute;
    top: 10%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translateX(197.5px);
    transform: translateX(197.5px);
    content: "";
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_CP_close_normal.3e736c2a.png);
    background-size: 100% 100%;
    cursor: pointer
}

.pc-live-confirm-wrap:after:hover {
    background-image: url(../img/icon_CP_close_hovered.79962e67.png)
}

.pc-live-confirm-wrap iframe {
    opacity: .95;
    background: #28333d;
    border: 1px solid hsla(0,0%,100%,.2);
    border-radius: 4px
}

.order-box {
    background: #28333d;
    padding: 12px 0;
    margin-top: 20px
}

.order-box,.order-box .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.order-box .item,.order-box a {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.order-box a {
    text-align: center
}

.order-box .line {
    width: 1px;
    height: 24px;
    background: #304051;
    display: block
}

.order-box .icon {
    display: block;
    margin: 0 auto 4px
}

.orderdetail .search-mobile {
    height: auto;
    margin: 0;
    padding: 0
}

.orderdetail .search-mobile>div {
    position: static;
    background-color: transparent;
    padding-top: 16px
}

.orderdetail .search-mobile .search-inputbox {
    background-color: #304051
}

.orderdetail .order-month {
    height: 24px;
    line-height: 24px;
    background: #1e2831
}

.orderdetail .order-month p {
    color: #8b969f;
    padding-left: 20px
}

.orderdetail .order-month-con li {
    padding: 10px 0 12px 0;
    margin: 0 24px 0 20px;
    border-bottom: 1px solid #2f3c47;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.orderdetail .order-month-con li .order-con-time {
    color: #8b969f;
    margin-top: 2px
}

.orderdetail .order-month-con li .order-con-money {
    color: #03c47e;
    font-weight: 700
}

.orderdetail .order-none {
    margin: 80px auto 0
}

.orderdetail .order-none p {
    font-size: 14px;
    color: #61686f;
    text-align: center;
    margin-top: 16px
}

.orderdetail .order-none .icon {
    display: block;
    margin: 0 auto
}

.pagereport {
    padding: 20px 16px 40px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right));
    color: #8b969f
}

.pagereport .g-Btn {
    width: 100%;
    margin-top: 12px
}

.reportbox>p {
    margin-bottom: 12px
}

.reportbox>div {
    margin-bottom: 20px
}

.reportbox .textarea textarea {
    border-radius: 8px
}

.pagewish {
    padding: 20px 16px 40px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right));
    color: #8b969f
}

.pagewish .g-Btn {
    width: 100%;
    margin-top: 12px
}

.wish {
    width: 600px;
    max-width: 90%
}

.wish .textarea textarea {
    height: 200px
}

.wish .cofirm-btns {
    margin-top: 64px;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}

.wishbox>p {
    margin-bottom: 12px
}

.wishbox>div {
    margin-bottom: 20px
}

.wishbox .textarea textarea {
    border-radius: 8px
}

.wish-game {
    width: 320px
}

.wish-game .cofirm-msg {
    padding-top: 0;
    padding-bottom: 36px
}

.wish-game .cofirm-cont {
    position: relative;
    border-top: 8px solid #04ba66;
    padding-top: 72px;
    padding-bottom: 40px;
    background-image: linear-gradient(211deg,#34495f 7%,#28333d 85%);
    text-align: center
}

.wish-game .cofirm-cont .game-type-mobile,.wish-game .cofirm-cont .game-type-pc {
    position: relative;
    display: inline-block;
    margin-top: 32px;
    font-size: 0
}

.wish-game .cofirm-cont .game-type-pc:before {
    content: "pc";
    position: absolute;
    top: 0;
    left: 0;
    width: 33px;
    height: 16px;
    line-height: 12px;
    background-size: 100% 100%;
    background-image: url(../img/tag_pc.7ccf6d86.png);
    box-sizing: border-box;
    font-size: 12px;
    color: #fff
}

.wish-game .cofirm-cont .game-type-pc img {
    height: 113.77777778px;
    border-radius: 4px
}

.wish-game .cofirm-cont h2 {
    font-weight: 700;
    text-align: center;
    font-size: 18px!important
}

.wish-game .cofirm-cont img {
    width: 80px;
    height: 80px;
    border-radius: 24%;
    background: rgba(30,43,51,.5)
}

.wish-game .cofirm-cont p {
    margin-top: 16px;
    font-size: 14px;
    color: #fff
}

.wish-game .cofirm-btns.double {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.wish-game .cofirm-btns.double a {
    height: 40px;
    line-height: 38px;
    margin: 16px 0 0 0
}

.wish-game .cofirm-btns.double a:last-child {
    margin-top: 0
}

@media only screen and (max-height: 720px) {
    .wish .cofirm-cont {
        max-height:400px;
        overflow-y: auto
    }
}

.exitconfirm .confirm-box {
    width: 320px;
    box-shadow: 0 0 12px rgba(0,0,0,.5);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#1e2831),to(#1e2831));
    background-image: linear-gradient(180deg,#1e2831,#1e2831);
    border-radius: 4px;
    padding: 12px 0;
    box-sizing: border-box
}

.exitconfirm .rooms-recommend {
    margin-top: 12px
}

.exitconfirm .rooms-recommend .roomlist {
    white-space: nowrap;
    overflow: auto;
    padding-left: 8px;
    padding-right: 8px
}

.exitconfirm .rooms-recommend .roomlist::-webkit-scrollbar {
    display: none
}

.exitconfirm .rooms-recommend .roomlist li {
    width: 168px;
    margin-right: 8px;
    margin-bottom: 0;
    border-radius: 8px
}

.exitconfirm .rooms-recommend .roomlist li:last-child {
    margin-right: 0
}

.exitconfirm .rooms-recommend .game-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 4px;
    background-size: cover;
    background-position: 50%
}

.exitconfirm .rooms-recommend .bar {
    padding-left: 4px;
    padding-right: 4px
}

.exitconfirm .confirm-btns {
    margin-top: 24px;
    text-align: center
}

.exitconfirm .confirm-btns a {
    width: 80px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 16px;
    padding: 0;
    font-size: 14px;
    font-weight: 400
}

.exitconfirm .confirm-btns a:last-child {
    margin-right: 0
}

.exitconfirm .confirm-tips {
    margin-top: 8px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    color: #8b969f
}

.exitconfirm h2 {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff
}

.growthpage {
    padding-bottom: 24px;
    overflow: hidden
}

.growthpage .growth-card-fixed {
    position: fixed;
    background: #1e2831;
    z-index: 10;
    width: 100%
}

.growthpage .growth-card-bg {
    position: relative;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

.growthpage .growth-card-bg:before {
    width: 80px;
    height: 80px;
    top: 147px;
    left: -40px;
    -webkit-filter: blur(10px);
    filter: blur(10px)
}

.growthpage .growth-card-bg:after,.growthpage .growth-card-bg:before {
    content: "";
    opacity: 0;
    position: absolute;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    z-index: 101;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

.growthpage .growth-card-bg:after {
    width: 144px;
    height: 144px;
    right: -50px;
    top: 60px;
    -webkit-filter: blur(25px);
    filter: blur(25px);
    border-radius: 64px
}

.growthpage .topnav .topnav-fixed .topnav-back span {
    color: #8b969f;
    font-size: 14px;
    margin-right: 2px
}

.growthpage .icon-question {
    width: 16px;
    height: 16px
}

.growthpage .subnavBox {
    width: 90%;
    margin: 0 auto
}

.growthpage .nav-sticky .sticky-box {
    top: 280px!important;
    top: -webkit-calc(280px + constant(safe-area-inset-top))!important;
    top: calc(280px + constant(safe-area-inset-top))!important;
    top: -webkit-calc(280px + env(safe-area-inset-top))!important;
    top: calc(280px + env(safe-area-inset-top))!important
}

.growthpage .subnav {
    background: #1e2831
}

.growthpage .subnav h2 {
    width: 33.33333333%;
    text-align: center;
    margin: 0
}

.growthpage .subnav h2.on {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.growthpage .growth-box {
    background: #28333d;
    border-radius: 8px;
    margin: 297px 16px 0 16px;
    padding: 16px 0 1px 0;
    margin-top: -webkit-calc(297px + constant(safe-area-inset-top));
    margin-top: calc(297px + constant(safe-area-inset-top));
    margin-top: -webkit-calc(297px + env(safe-area-inset-top));
    margin-top: calc(297px + env(safe-area-inset-top))
}

.growthpage .growth-box .growth-box-title {
    font-size: 14px;
    color: hsla(0,0%,100%,.7);
    font-weight: 700;
    margin: 0 0 24px 16px
}

.growthpage .grow-line {
    margin: 0 16px 16px 16px;
    background: hsla(0,0%,100%,.1);
    border-radius: .5px;
    height: 1px
}

.growthpage .growth-interest .swiper-container {
    padding: 0 16px;
    margin-bottom: 24px
}

.growthpage .growth-interest .interest-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.growthpage .growth-interest .growth-detail {
    margin-right: 16px;
    color: #03c47e;
    font-size: 12px;
    font-weight: 700
}

.growthpage .growth-task li {
    padding: 0 16px;
    margin-bottom: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.growthpage .growth-task li p {
    color: #b4c0c9;
    font-size: 12px
}

.growthpage .growth-task li p:first-child {
    color: #fff;
    font-size: 14px
}

.growthpage .growth-task li .g-Btn {
    width: 72px;
    height: 28px;
    line-height: 28px;
    padding: 0;
    text-align: center
}

.growthpage .growth-task li .btn-ad {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.growthpage .growth-task li .btn-ad i {
    background-size: 100% 100%;
    margin-right: 2px;
    display: block
}

.growthpage .growth-task li .g-Btn-disabled {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    color: #b4c0c9;
    font-weight: 700;
    border-top-color: #3e4851;
    border-bottom-color: #5b6d7e
}

.growthpage .growth-task .task-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.growthpage .growth-task .task-title-sub {
    margin-right: 16px;
    color: #56677a;
    font-size: 12px;
    font-weight: 700
}

.growthpage .growth-task .task-title-sub i {
    width: 12px;
    height: 12px;
    margin-left: 3px
}

.growthpage .growth-task .task-title-sub i.icon_live_up {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.growthpage .growth-upgrade {
    position: relative
}

.growthpage .growth-upgrade .growth-upgrade-tips {
    position: absolute;
    top: 16px;
    right: -8px;
    width: 104px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#2084ff),to(#0affd3));
    background-image: linear-gradient(180deg,#2084ff,#0affd3);
    border-radius: 0 4px 0 4px;
    color: #28333d;
    font-weight: 700;
    font-size: 12px
}

.growthpage .growth-upgrade .growth-upgrade-tips>div {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(0,#37fddf 10%,transparent 100%)
}

.growthpage .growth-upgrade .growth-upgrade-tips:after {
    content: "";
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 0;
    opacity: .5;
    border-color: #1f8cfd transparent transparent #1f8cfd;
    border-width: 2px 4px 2px 4px;
    border-style: solid
}

.growthpage .growth-upgrade .growth-upgrade-con .swiper-container {
    padding: 0 16px
}

.growthpage .growth-upgrade .growth-upgrade-con .swiper-slide {
    width: 128px;
    height: 77px;
    padding-top: 20px
}

.growthpage .growth-upgrade .growth-upgrade-con .swiper-slide .grade-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: -21px auto 8px
}

.growthpage .growth-upgrade .growth-upgrade-con .swiper-slide .grade-img i {
    width: 100%;
    height: 100%
}

.growthpage .growth-upgrade .growth-upgrade-con .swiper-slide .grade-con {
    width: 100%;
    height: 77px;
    background: rgba(30,40,49,.5);
    border-radius: 4.84px;
    padding-top: 1px
}

.growthpage .growth-upgrade .growth-upgrade-con .swiper-slide p {
    color: #b4c0c9;
    font-size: 12px;
    text-align: center;
    margin-bottom: 4px
}

.growthpage .growth-upgrade .growth-upgrade-con .swiper-slide p:nth-child(2) {
    color: #fff;
    font-size: 14px;
    font-weight: 700
}

.growthpage .growth-upgrade .growth-upgrade-con .g-Btn {
    width: 208px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0;
    margin: 24px auto;
    display: block
}

.gradecard .swiper-container {
    z-index: 102
}

.gradecard .gradecard-box {
    margin: 16px;
    background: #28333d;
    border-radius: 8px;
    position: relative
}

.gradecard .gradecard-box .gradecard-box-bg {
    width: 100%;
    height: 141px;
    padding: 20px 16px 16px 16px;
    background-position: 100% 0;
    background-size: auto 100%;
    background-repeat: no-repeat;
    border-radius: 8px;
    box-sizing: border-box
}

.gradecard .gradecard-box .gradecard-box-bg.gradecard-box-bg-lv10 {
    background-image: url(../img/pic_growth_card_bkg_lv10.64b57ec3.png)
}

.gradecard .gradecard-box .gradecard-box-bg.gradecard-box-bg-lv9 {
    background-image: url(../img/pic_growth_card_bkg_lv9.b44fd891.png)
}

.gradecard .gradecard-box .gradecard-box-bg.gradecard-box-bg-lv8 {
    background-image: url(../img/pic_growth_card_bkg_lv8.67265db1.png)
}

.gradecard .gradecard-box .gradecard-box-bg.gradecard-box-bg-lv7 {
    background-image: url(../img/pic_growth_card_bkg_lv7.f159baea.png)
}

.gradecard .gradecard-box .gradecard-box-bg.gradecard-box-bg-lv6 {
    background-image: url(../img/pic_growth_card_bkg_lv6.a11f037c.png)
}

.gradecard .gradecard-box .gradecard-box-bg.gradecard-box-bg-lv5 {
    background-image: url(../img/pic_growth_card_bkg_lv0-5.7fae06c1.png)
}

.gradecard .gradecard-box .gradecard-box-bg:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -16px;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top: 8px solid rgba(40,51,61,.9)
}

.gradecard .growth-line {
    width: 100%;
    height: 1px;
    background: hsla(0,0%,100%,.1);
    border-radius: .5px;
    margin: 16px 0 10px
}

.gradecard .growthcard-bold {
    font-weight: 700
}

.gradecard .gradecard-flex {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.gradecard .gradecard-flex,.gradecard .gradecard-flex-align {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.gradecard .gradecard-opacity {
    opacity: .9
}

.gradecard .icon_growth {
    margin-left: 4px
}

.gradecard .growthcard-btn {
    width: 108px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    border-radius: 20px;
    border: 0;
    padding: 0
}

.gradecard .growthcard-btn.growthcard-btn-disabled {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    box-sizing: border-box;
    color: #b4c0c9;
    border-top-color: #3e4851;
    border-bottom-color: #5b6d7e
}

.gradecard .gradecard-lv .icon {
    width: 24px;
    height: 24px;
    margin-left: 4px
}

.gradecard .gradecard-lv,.gradecard .gradecard-thumb {
    font-size: 24px;
    font-weight: 700
}

.gradecard .gradecard-lv.gradecard-color-lv5,.gradecard .gradecard-thumb.gradecard-color-lv5 {
    color: #f7fafc
}

.gradecard .gradecard-lv.gradecard-color-lv5 i.cur,.gradecard .gradecard-lv.gradecard-color-lv5 span,.gradecard .gradecard-thumb.gradecard-color-lv5 i.cur,.gradecard .gradecard-thumb.gradecard-color-lv5 span {
    background: #f7fafc
}

.gradecard .gradecard-lv.gradecard-color-lv6,.gradecard .gradecard-thumb.gradecard-color-lv6 {
    color: #e7fdef
}

.gradecard .gradecard-lv.gradecard-color-lv6 i.cur,.gradecard .gradecard-lv.gradecard-color-lv6 span,.gradecard .gradecard-thumb.gradecard-color-lv6 i.cur,.gradecard .gradecard-thumb.gradecard-color-lv6 span {
    background: #f7fafc
}

.gradecard .gradecard-lv.gradecard-color-lv7,.gradecard .gradecard-thumb.gradecard-color-lv7 {
    color: #95e2fc
}

.gradecard .gradecard-lv.gradecard-color-lv7 i.cur,.gradecard .gradecard-lv.gradecard-color-lv7 span,.gradecard .gradecard-thumb.gradecard-color-lv7 i.cur,.gradecard .gradecard-thumb.gradecard-color-lv7 span {
    background: #95e2fc
}

.gradecard .gradecard-lv.gradecard-color-lv8,.gradecard .gradecard-thumb.gradecard-color-lv8 {
    color: #edd6cf
}

.gradecard .gradecard-lv.gradecard-color-lv8 i.cur,.gradecard .gradecard-lv.gradecard-color-lv8 span,.gradecard .gradecard-thumb.gradecard-color-lv8 i.cur,.gradecard .gradecard-thumb.gradecard-color-lv8 span {
    background: #edd6cf
}

.gradecard .gradecard-lv.gradecard-color-lv9,.gradecard .gradecard-thumb.gradecard-color-lv9 {
    color: #f9ebb8
}

.gradecard .gradecard-lv.gradecard-color-lv9 i.cur,.gradecard .gradecard-lv.gradecard-color-lv9 span,.gradecard .gradecard-thumb.gradecard-color-lv9 i.cur,.gradecard .gradecard-thumb.gradecard-color-lv9 span {
    background: #f9ebb8
}

.gradecard .gradecard-lv.gradecard-color-lv10,.gradecard .gradecard-thumb.gradecard-color-lv10 {
    color: #ebc2f6
}

.gradecard .gradecard-lv.gradecard-color-lv10 i.cur,.gradecard .gradecard-lv.gradecard-color-lv10 span,.gradecard .gradecard-thumb.gradecard-color-lv10 i.cur,.gradecard .gradecard-thumb.gradecard-color-lv10 span {
    background: #ebc2f6
}

.gradecard .gradecard-thumb {
    font-size: 12px;
    font-weight: 400
}

.gradecard .gradecard-thumb span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin: -8px auto 8px
}

.gradecard .gradecard-thumb span.disabled {
    background: #32383e
}

.gradecard .gradecard-thumb p {
    text-align: center
}

.gradecard .gradecard-thumb p.disabled {
    color: #32383e
}

.gradecard .gradecard-thumb div {
    width: 100%;
    height: 4px;
    background: #32383e;
    margin-top: 13px
}

.gradecard .gradecard-thumb div i {
    width: 0;
    height: 100%;
    border-radius: 0 4px 4px 0;
    display: block
}

.growthfaqpage .subnav h2 {
    font-size: 16px;
    color: #b4c0c9;
    margin-right: 16px;
    opacity: 1
}

.growthfaqpage .subnav h2.on {
    color: #fff;
    font-weight: 500;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.growthfaqpage .topnav .subnav {
    margin-left: -10px
}

.growthfaqpage .growthfaq-content {
    padding: 24px 20px
}

.growthfaqpage .growthfaq-content .growthfaq-title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 16px
}

.growthfaqpage .growthfaq-content .growthfaq-desc {
    color: #b4c0c9;
    font-size: 14px;
    text-align: justify;
    margin-bottom: 16px;
    line-height: 1.8
}

.growthfaqpage .growthfaq-content a {
    color: #03c47e
}

.pagegrowthgrade {
    padding: 0 20px
}

.pagegrowthgrade li {
    padding: 20px 0;
    border-bottom: 1px solid #2f3c47;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative
}

.pagegrowthgrade li:last-child {
    border: 0
}

.pagegrowthgrade li .growthgrade-tips {
    position: absolute;
    top: 0;
    right: -20px;
    width: 64px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#2084ff),to(#0affd3));
    background-image: linear-gradient(180deg,#2084ff,#0affd3);
    border-radius: 0 0 0 4px;
    color: #28333d;
    font-weight: 700;
    font-size: 12px
}

.pagegrowthgrade li .growthgrade-tips>div {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(0,#37fddf 10%,transparent 100%)
}

.pagegrowthgrade li .growthgrade-left {
    margin-right: 47px;
    font-size: 14px;
    font-weight: 700;
    width: 54px
}

.pagegrowthgrade li .growthgrade-right span {
    color: #b4c0c9;
    font-size: 12px;
    margin-bottom: 8px;
    background: hsla(0,0%,100%,.1);
    border-radius: 20px;
    display: inline-block;
    padding: 2px 8px
}

.pagegrowthgrade li .growthgrade-right p {
    color: #b4c0c9;
    font-size: 14px;
    margin-bottom: 16px
}

.pagegrowthrecord ul {
    padding: 0 20px
}

.pagegrowthrecord li {
    border-bottom: 1px solid #2f3c47;
    padding: 10px 0 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.pagegrowthrecord li>div:first-child {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pagegrowthrecord li>div:last-child p {
    text-align: right
}

.pagegrowthrecord li .gradererecord-name {
    color: #b4c0c9
}

.pagegrowthrecord li .gradererecord-add {
    color: #03c47e
}

.pagegrowthrecord li .gradererecord-reduce {
    color: #1bb9ff
}

.pagegrowthrecord li .gradererecord-sub {
    color: #8b969f;
    margin-top: 2px
}

.pagegrowthrecord .record-none {
    margin: 80px auto 0
}

.pagegrowthrecord .record-none p {
    font-size: 14px;
    color: #61686f;
    text-align: center;
    margin-top: 16px
}

.pagegrowthrecord .record-none .icon {
    display: block;
    margin: 0 auto
}

.interest-card,.swiper-slide.interest-card {
    width: 88px;
    height: 64px;
    padding-top: 16px
}

.interest-card .interest-card-img,.swiper-slide.interest-card .interest-card-img {
    margin: -17px auto 4px;
    display: block
}

.interest-card .interest-card-con,.swiper-slide.interest-card .interest-card-con {
    width: 100%;
    height: 64px;
    background: rgba(30,40,49,.5);
    border-radius: 4.84px;
    padding-top: 1px
}

.interest-card p,.swiper-slide.interest-card p {
    font-size: 12px;
    margin-bottom: 4px;
    height: 34px
}

.interest-card .interest-card-lock,.interest-card p,.swiper-slide.interest-card .interest-card-lock,.swiper-slide.interest-card p {
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.interest-card .interest-card-lock,.swiper-slide.interest-card .interest-card-lock {
    width: 64px;
    height: 16px;
    line-height: 16px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px 0 0 -32px
}

.interest-card .interest-card-lock span,.swiper-slide.interest-card .interest-card-lock span {
    display: block;
    margin-right: -4px;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.interest-card.interest-card-disabled,.swiper-slide.interest-card.interest-card-disabled {
    position: relative
}

.interest-card.interest-card-disabled .interest-card-con,.swiper-slide.interest-card.interest-card-disabled .interest-card-con {
    opacity: .2
}

.interest-card.interest-card-logo.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-logo.interest-card-disabled .interest-card-lock {
    background: #f7fafc;
    color: #949eca
}

.interest-card.interest-card-logo p,.swiper-slide.interest-card.interest-card-logo p {
    color: #f7fafc
}

.interest-card.interest-card-font.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-font.interest-card-disabled .interest-card-lock {
    background: #f7fafc;
    color: #949eca
}

.interest-card.interest-card-font p,.swiper-slide.interest-card.interest-card-font p {
    color: #f7fafc
}

.interest-card.interest-card-businesscars.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-businesscars.interest-card-disabled .interest-card-lock {
    background: #e7fdef;
    color: #33a678
}

.interest-card.interest-card-businesscars p,.swiper-slide.interest-card.interest-card-businesscars p {
    color: #e7fdef
}

.interest-card.interest-card-avatar.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-avatar.interest-card-disabled .interest-card-lock {
    background: #95e2fc;
    color: #3571f9
}

.interest-card.interest-card-avatar p,.swiper-slide.interest-card.interest-card-avatar p {
    color: #95e2fc
}

.interest-card.interest-card-live.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-live.interest-card-disabled .interest-card-lock {
    background: #edd6cf;
    color: #9a837d
}

.interest-card.interest-card-live p,.swiper-slide.interest-card.interest-card-live p {
    color: #edd6cf
}

.interest-card.interest-card-enter.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-enter.interest-card-disabled .interest-card-lock {
    background: #edd6cf;
    color: #9a837d
}

.interest-card.interest-card-enter p,.swiper-slide.interest-card.interest-card-enter p {
    color: #edd6cf
}

.interest-card.interest-card-feedback.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-feedback.interest-card-disabled .interest-card-lock {
    background: #f6e8b5;
    color: #d38214
}

.interest-card.interest-card-feedback p,.swiper-slide.interest-card.interest-card-feedback p {
    color: #f6e8b6
}

.interest-card.interest-card-test.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-test.interest-card-disabled .interest-card-lock {
    background: #f6e8b5;
    color: #d38214
}

.interest-card.interest-card-test p,.swiper-slide.interest-card.interest-card-test p {
    color: #f6e8b6
}

.interest-card.interest-card-invite.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-invite.interest-card-disabled .interest-card-lock {
    background: #ebc2f6
}

.interest-card.interest-card-invite.interest-card-disabled .interest-card-lock span,.swiper-slide.interest-card.interest-card-invite.interest-card-disabled .interest-card-lock span {
    background-image: linear-gradient(269deg,#6b18f0,#e442dd 50%,#eb6130);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.interest-card.interest-card-invite.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-invite.interest-card-disabled .interest-card-lock {
    background: #f7fafc;
    color: #949eca
}

.interest-card.interest-card-invite p,.swiper-slide.interest-card.interest-card-invite p {
    color: #ebc2f6
}

.interest-card.interest-card-secretary.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-secretary.interest-card-disabled .interest-card-lock {
    background: #ebc2f6
}

.interest-card.interest-card-secretary.interest-card-disabled .interest-card-lock span,.swiper-slide.interest-card.interest-card-secretary.interest-card-disabled .interest-card-lock span {
    background-image: linear-gradient(269deg,#6b18f0,#e442dd 50%,#eb6130);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.interest-card.interest-card-secretary p,.swiper-slide.interest-card.interest-card-secretary p {
    color: #ebc2f6
}

.interest-card.interest-card-discount.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-discount.interest-card-disabled .interest-card-lock {
    background: #ebc2f6
}

.interest-card.interest-card-discount.interest-card-disabled .interest-card-lock span,.swiper-slide.interest-card.interest-card-discount.interest-card-disabled .interest-card-lock span {
    background-image: linear-gradient(269deg,#6b18f0,#e442dd 50%,#eb6130);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.interest-card.interest-card-discount.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-discount.interest-card-disabled .interest-card-lock {
    background: #f7fafc;
    color: #949eca
}

.interest-card.interest-card-discount p,.swiper-slide.interest-card.interest-card-discount p {
    color: #ebc2f6
}

.interest-card.interest-card-entergold.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-entergold.interest-card-disabled .interest-card-lock {
    background: #ebc2f6
}

.interest-card.interest-card-entergold.interest-card-disabled .interest-card-lock span,.swiper-slide.interest-card.interest-card-entergold.interest-card-disabled .interest-card-lock span {
    background-image: linear-gradient(269deg,#6b18f0,#e442dd 50%,#eb6130);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.interest-card.interest-card-entergold.interest-card-disabled .interest-card-lock,.swiper-slide.interest-card.interest-card-entergold.interest-card-disabled .interest-card-lock {
    background: #f7fafc;
    color: #949eca
}

.interest-card.interest-card-entergold p,.swiper-slide.interest-card.interest-card-entergold p {
    color: #ebc2f6
}

.icon-interest-logo {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_logo.bbb35024.png)
}

.icon-interest-font {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_font.4e20bd6c.png)
}

.icon-interest-businesscars {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_card.34846e19.png)
}

.icon-interest-avatar {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_avatar.fbd1c949.png)
}

.icon-interest-live {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_live.38982279.png)
}

.icon-interest-enter {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_enter.ebcb1727.png)
}

.icon-interest-feedback {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_feedback.7c8d92ad.png)
}

.icon-interest-test {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_test.faf0a7b7.png)
}

.icon-interest-invite {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_invite.79ce9d80.png)
}

.icon-interest-secretary {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_secretary.3e2176ab.png)
}

.icon-interest-discount {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_discount.5f5e1d15.png)
}

.icon-interest-entergold {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_enter_gold.eeea32c6.png)
}

.grade-lv0,.grade-lv1,.grade-lv2,.grade-lv3,.grade-lv4,.grade-lv5 {
    color: #959fca
}

.grade-lv0 i,.grade-lv1 i,.grade-lv2 i,.grade-lv3 i,.grade-lv4 i,.grade-lv5 i {
    background: #959fca
}

.grade-lv6 {
    color: #34a779
}

.grade-lv6 i {
    background: #34a779
}

.grade-lv7 {
    color: #3571f9
}

.grade-lv7 i {
    background: #3571f9
}

.grade-lv8 {
    color: #9a837d
}

.grade-lv8 i {
    background: #9a837d
}

.grade-lv9 {
    color: #d38214
}

.grade-lv9 i {
    background: #d38214
}

.grade-lv10 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.grade-lv10,.grade-lv10 i {
    background-image: linear-gradient(269deg,#6b18f0,#e442dd 50%,#eb6130)
}

.growth-upgrade-lv,.growth-upgrade-lv5 {
    color: #f7fafc
}

.growth-upgrade-lv6 {
    color: #e7fdef
}

.growth-upgrade-lv7 {
    color: #95e2fc
}

.growth-upgrade-lv8 {
    color: #edd6cf
}

.growth-upgrade-lv9 {
    color: #f6e8b6
}

.growth-upgrade-lv10 {
    color: #ebc2f6
}

.growthconfirm {
    box-shadow: none;
    position: relative;
    overflow: hidden
}

.growthconfirm:before {
    content: "";
    width: 75px;
    height: 75px;
    opacity: .3!important;
    position: absolute;
    top: 128px;
    left: -38px;
    -webkit-filter: blur(20px);
    filter: blur(20px)
}

.growthconfirm:after {
    content: "";
    width: 144px;
    height: 144px;
    position: absolute;
    right: -110px;
    top: 45px;
    -webkit-filter: blur(25px);
    filter: blur(25px);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    border-radius: 64px
}

.growthconfirm .cofirm-cont {
    padding: 25px 16px 16px 16px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#1e2831),to(#1e2831));
    background-image: linear-gradient(180deg,#1e2831,#1e2831)
}

.growthconfirm .cofirm-cont .growth-confirm-title {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px
}

.growthconfirm .cofirm-cont .growth-confirm-title i {
    width: 1px;
    height: 12px;
    background: hsla(0,0%,100%,.1);
    display: inline-block;
    margin: 0 6px
}

.growthconfirm .cofirm-cont .growth-confim-gift,.growthconfirm .cofirm-cont .growth-confim-interest {
    margin-bottom: 16px;
    position: relative;
    background: rgba(40,51,61,.9);
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box
}

.growthconfirm .cofirm-cont .purchase-confirm-growth-confim-interest {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.growthconfirm .cofirm-cont .purchase-confirm-growth-confim-interest .growth-confirm-sub {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.growthconfirm .cofirm-cont .purchase-confirm-growth-confim-interest .exchange-btn {
    padding: 5px 20px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    border-radius: 24px;
    background-color: #03c47e;
    color: #fff;
    font-size: 12px
}

.growthconfirm .cofirm-cont .growth-confirm-curlv {
    padding: 16px 0;
    z-index: 10
}

.growthconfirm .cofirm-cont .growth-confirm-curlv .swiper-container {
    padding-left: 16px
}

.growthconfirm .cofirm-cont .growth-confirm-curlv .swiper-container.swiper-center .swiper-wrapper {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.growthconfirm .cofirm-cont .growth-confirm-curlv:after,.growthconfirm .cofirm-cont .growth-confirm-curlv:before {
    width: 24px;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(40,51,61,0)),to(#28333d));
    background-image: linear-gradient(90deg,rgba(40,51,61,0),#28333d);
    border-radius: 0 4px 4px 0
}

.growthconfirm .cofirm-cont .growth-confirm-curlv:before {
    left: 0;
    right: auto;
    background-image: -webkit-gradient(linear,left top,right top,from(#28333d),to(rgba(40,51,61,0)));
    background-image: linear-gradient(90deg,#28333d,rgba(40,51,61,0));
    border-radius: 4px 0 0 4px
}

.growthconfirm .cofirm-cont .growth-confirm-sub {
    color: #03c47e;
    font-size: 12px;
    font-weight: 700;
    text-align: center
}

.growthconfirm .cofirm-cont .growth-confirm-sub2 {
    color: #b4c0c9;
    font-size: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 16px;
    text-align: center
}

.growthconfirm .cofirm-cont .growth-confirm-sub2 i {
    width: 10px;
    height: 1px;
    background: #313b44;
    margin: 0 8px;
    display: block
}

.growthconfirm .cofirm-cont .growth-upgrade-sub {
    margin-top: 24px;
    color: #fff
}

.growthconfirm .cofirm-cont .g-Btn {
    height: 32px;
    line-height: 32px;
    width: 100%
}

.growthconfirm .cofirm-cont .growth-confirm-radio {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 8px 0
}

.growthconfirm .cofirm-cont .growth-confirm-radio .radio {
    font-size: 14px;
    color: #a5a9ac;
    font-weight: 700
}

.growthconfirm .cofirm-cont .growth-confirm-radio .radio:nth-child(2) {
    margin-left: 16px
}

.growthconfirm .cofirm-cont .growth-confirm-radio .radio.on {
    color: #03c47e
}

.growthconfirm .cofirm-cont .growth-confirm-radio .radio .icon {
    width: 16px;
    height: 16px
}

.growthconfirm .growth-confirm-tips {
    position: absolute;
    top: -9px;
    left: -8px;
    font-size: 12px;
    width: 56px;
    height: 20px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#2084ff),to(#0affd3));
    background-image: linear-gradient(180deg,#2084ff,#0affd3);
    border-radius: 4px 4px 4px 0;
    color: #28333d
}

.growthconfirm .growth-confirm-tips>div {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(0,#37fddf 10%,transparent 100%)
}

.growthconfirm .growth-confirm-tips:after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 0;
    opacity: .5;
    border-color: #1f8cfd #1f8cfd transparent transparent;
    border-width: 2px 4px 2px 4px;
    border-style: solid
}

.growthconfirm.growthupgadeconfirm .growth-confim-gift {
    padding: 8px 0
}

.growthconfirm.growthupgadeconfirm .growth-confirm-tips {
    top: 0;
    border-radius: 4px 0 4px 0
}

.growthconfirm.growthupgadeconfirm .cofirm-cont .g-Btn {
    height: 36px;
    line-height: 36px;
    margin: 0
}

.growthconfirm.growthupgadeconfirm .cofirm-cont .g-Btn:first-child {
    margin-right: 16px
}

.growthconfirm .growth-confirm-tips-lv {
    color: #fff;
    z-index: 11
}

.growthconfirm .growth-confirm-tips-lv.growth_color_lv10:after {
    border-color: #6b18f0 #6b18f0 transparent transparent
}

.growthconfirm .growth-confirm-tips-lv.growth_color_lv9:after {
    border-color: #f37954 #f37954 transparent transparent
}

.growthconfirm .growth-confirm-tips-lv.growth_color_lv8:after {
    border-color: #9a837d #9a837d transparent transparent
}

.growthconfirm .growth-confirm-tips-lv.growth_color_lv7:after {
    border-color: #3571f9 #3571f9 transparent transparent
}

.growthconfirm .growth-confirm-tips-lv.growth_color_lv6:after {
    border-color: #33a678 #33a678 transparent transparent
}

.growthconfirm .growth-confirm-tips-lv.growth_color_lv5:after {
    border-color: #959fcb #959fcb transparent transparent
}

.growthconfirm .growth-confirm-scrollx {
    position: relative
}

.growthconfirm .growth-confirm-scrollx:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 100%;
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(40,51,61,0)),to(#28333d));
    background-image: linear-gradient(90deg,rgba(40,51,61,0),#28333d)
}

.growthconfirm .growth-confirm-scrollx .growth-confirm-need {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative
}

.growthconfirm .growth-confirm-scrollx .growth-confirm-need::-webkit-scrollbar {
    display: none
}

.growthconfirm .growth-confirm-need {
    font-size: 12px;
    color: #fff;
    text-align: center;
    margin-bottom: 4px
}

.growthconfirm .growth-confirm-need span {
    font-weight: 700
}

.growthconfirm .growth-confirm-need .growth-confirm-span {
    padding: 2px 8px;
    border-radius: 20px;
    margin-right: 4px;
    display: inline-block
}

.growthconfirm .growth-confirm-need .growth-confirm-span:last-child {
    margin-right: 0
}

.growthconfirm .cofirm-btns {
    margin-top: 16px
}

.growthconfirm .cofirm-btns a {
    font-weight: 700;
    font-size: 14px
}

.growthconfirm.growthreceiveconfirm .cofirm-btns {
    margin-top: 0
}

.growthconfirm .swiper-slide {
    width: 48px;
    margin-right: 16px
}

.growthconfirm .swiper-slide p {
    font-size: 10px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    text-align: center
}

.growthconfirm .growth_lv10 {
    background-image: linear-gradient(269deg,#6b18f0,#e442dd 50%,#eb6130)
}

.growthconfirm .growth_lv9,.growthconfirm .growth_lv10 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.growthconfirm .growth_lv9 {
    background-image: linear-gradient(269deg,#f9ebb8,#d38214)
}

.growthconfirm .growth_lv8 {
    background-image: linear-gradient(269deg,#edd6cf,#99827c)
}

.growthconfirm .growth_lv7,.growthconfirm .growth_lv8 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.growthconfirm .growth_lv7 {
    background-image: linear-gradient(269deg,#95e2fc,#3571f9)
}

.growthconfirm .growth_lv6 {
    background-image: linear-gradient(269deg,#e7fdef,#33a678)
}

.growthconfirm .growth_lv5,.growthconfirm .growth_lv6 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.growthconfirm .growth_lv5 {
    background-image: linear-gradient(269deg,#f7fafc,#949eca)
}

.growthconfirm .growth_color_lv10 {
    background: #6b18f0
}

.growthconfirm .growth_color_lv9 {
    background: #f37954
}

.growthconfirm .growth_color_lv8 {
    background: #9a837d
}

.growthconfirm .growth_color_lv7 {
    background: #3571f9
}

.growthconfirm .growth_color_lv6 {
    background: #33a678
}

.growthconfirm .growth_color_lv5 {
    background: #959fcb
}

.growthconfirm .conform-interest-card-con {
    background: hsla(0,0%,100%,.05);
    border-radius: 4px;
    width: 48px;
    height: 48px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.growth_btn_lv10 {
    background: #ebc2f6
}

.growth_btn_lv10 span {
    background-image: linear-gradient(269deg,#6b18f0,#e442dd 50%,#eb6130);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.growth_btn_lv9 {
    background: #f9ebb8;
    color: #d38214
}

.growth_btn_lv8 {
    background: #edd6cf;
    color: #9a837d
}

.growth_btn_lv7 {
    background: #95e2fc;
    color: #3571f9
}

.growth_btn_lv6 {
    background: #e7fdef;
    color: #34a779
}

.growth_btn_lv5 {
    background: #f7fafc;
    color: #949eca
}

.growth-bg-lv10:before,.growthpage .growth-bg-lv10:before {
    opacity: .5
}

.growth-bg-lv10:after,.growth-bg-lv10:before,.growthpage .growth-bg-lv10:after,.growthpage .growth-bg-lv10:before {
    background-image: -webkit-gradient(linear,left bottom,left top,from(#6b18f0),color-stop(50%,#e442dd),to(#eb6130));
    background-image: linear-gradient(0deg,#6b18f0,#e442dd 50%,#eb6130)
}

.growth-bg-lv10:after,.growthpage .growth-bg-lv10:after {
    opacity: .7
}

.growth-bg-lv9:before,.growthpage .growth-bg-lv9:before {
    opacity: .5;
    background-image: linear-gradient(198deg,#f9ebb8 2%,#f4cf6d 30%,#eba033 98%)
}

.growth-bg-lv9:after,.growthpage .growth-bg-lv9:after {
    opacity: .7;
    background-image: linear-gradient(198deg,rgba(249,235,184,.99) 2%,#f4cf6d 30%,#eba033 98%)
}

.growth-bg-lv8:before,.growthpage .growth-bg-lv8:before {
    opacity: .5;
    background-image: linear-gradient(198deg,#ecd5ce 2%,#9a837d 98%)
}

.growth-bg-lv8:after,.growthpage .growth-bg-lv8:after {
    opacity: .7;
    background-image: linear-gradient(198deg,#ecd5ce 2%,#9a837d 98%)
}

.growth-bg-lv7:before,.growthpage .growth-bg-lv7:before {
    opacity: .5;
    background-image: linear-gradient(198deg,#95e2fc 2%,#336ced 98%)
}

.growth-bg-lv7:after,.growthpage .growth-bg-lv7:after {
    opacity: .7;
    background-image: linear-gradient(198deg,#95e2fc 2%,#336ced 98%)
}

.growth-bg-lv6:before,.growthpage .growth-bg-lv6:before {
    opacity: .5;
    background-image: linear-gradient(198deg,#e7fdef 2%,#34a779 98%)
}

.growth-bg-lv6:after,.growthpage .growth-bg-lv6:after {
    opacity: .7;
    background-image: linear-gradient(198deg,#e7fdef 2%,#34a779 98%)
}

.growth-bg-lv0:before,.growth-bg-lv5:before,.growthpage .growth-bg-lv0:before,.growthpage .growth-bg-lv5:before {
    opacity: .5;
    background-image: linear-gradient(198deg,#f7fafc 2%,#959fca 98%)
}

.growth-bg-lv0:after,.growth-bg-lv5:after,.growthpage .growth-bg-lv0:after,.growthpage .growth-bg-lv5:after {
    opacity: .7;
    background-image: linear-gradient(198deg,#f7fafc 2%,#959fca 98%)
}

.growth-confirm {
    width: 382px
}

.growth-confirm .cofirm-cont {
    height: 436px;
    box-sizing: border-box
}

.growth-confirm .growth-dialog {
    display: flex;
    justify-content: center; /* 水平居中排列子元素，可根据需求修改 */
    gap: 20px; /* 子元素之间的间距，可根据需求调整 */
}

.growth-confirm .growth-dialog>div {
    width: 190px;
    height: 190px;
    background: url(../img/pic_vrcodeBG.6cb4d218.png) no-repeat;
    background-size: 100% 100%;
    padding: 16px;
    box-sizing: border-box;
    margin: 52px auto 24px
}

.growth-confirm .growth-dialog>div img {
    width: 100%
}

.growth-confirm .growth-dialog p {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center
}

@media (orientation: landscape) {
    .growthpage .growth-card-fixed {
        position:relative
    }

    .growthpage .swiper-container {
        z-index: 1
    }

    .growthpage .topnav .topnav-fixed {
        z-index: 102
    }

    .growthpage .nav-sticky {
        margin-top: 0
    }

    .growthpage .nav-sticky .sticky-box {
        top: 60px!important
    }

    .growthpage .growth-box {
        margin-top: 16px;
        margin-top: -webkit-calc(16px + constant(safe-area-inset-top));
        margin-top: calc(16px + constant(safe-area-inset-top));
        margin-top: -webkit-calc(16px + env(safe-area-inset-top));
        margin-top: calc(16px + env(safe-area-inset-top))
    }
}

.gameactivity {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    pointer-events: none
}

.gameactivity>* {
    pointer-events: all
}

.gameactivity .confirm-shade.iframe-confirm {
    z-index: 999
}

.InTransPortrait .gameactivity .iframe-confirm.is-run.is-port .cofirm {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.gameactivityclose {
    position: fixed;
    top: 32px;
    right: 32px;
    width: 32px;
    height: 32px;
    border: 0;
    z-index: 1000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background: url(../img/icon_CP_close_normal.3e736c2a.png) 50% no-repeat;
    background-size: 100% 100%
}

.activity-entry {
    position: fixed;
    right: 16px;
    bottom: 40px;
    z-index: 110;
    width: 108px;
    height: 108px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    cursor: pointer
}

.activity-entry.is-run {
    position: absolute;
    top: 22px;
    right: 36px;
    bottom: auto!important;
    z-index: 997;
    width: 56px;
    height: 56px
}

.activity-entry.is-run+.activity-entry {
    top: 88px
}

.activity-entry.is-run+.activity-entry+.activity-entry {
    top: 154px
}

.activity-entry.is-run+.activity-entry+.activity-entry+.activity-entry {
    top: 220px
}

.InMobile .activity-entry {
    right: 8px;
    bottom: 72px;
    bottom: -webkit-calc(72px + env(safe-area-inset-bottom));
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: 72px;
    height: 72px
}

.InMobile .activity-entry.has-bar {
    bottom: 140px;
    bottom: -webkit-calc(140px + env(safe-area-inset-bottom));
    bottom: calc(140px + env(safe-area-inset-bottom))
}

.InMobile .activity-entry.is-run {
    top: 6px;
    top: -webkit-calc(6px + env(safe-area-inset-top));
    top: calc(6px + env(safe-area-inset-top));
    right: 11px;
    right: -webkit-calc(11px + env(safe-area-inset-right));
    right: calc(11px + env(safe-area-inset-right));
    width: 40px;
    height: 40px
}

.InMobile .activity-entry.is-run+.activity-entry {
    top: 56px;
    top: -webkit-calc(56px + env(safe-area-inset-top));
    top: calc(56px + env(safe-area-inset-top))
}

.InMobile .activity-entry.is-run+.activity-entry+.activity-entry {
    top: 106px;
    top: -webkit-calc(106px + env(safe-area-inset-top));
    top: calc(106px + env(safe-area-inset-top))
}

.InMobile .activity-entry.is-run+.activity-entry+.activity-entry+.activity-entry {
    top: 156px;
    top: -webkit-calc(156px + env(safe-area-inset-top));
    top: calc(156px + env(safe-area-inset-top))
}

@media only screen and (max-height: 720px) {
    .InMobile .activity-entry {
        bottom:62px;
        bottom: -webkit-calc(62px + env(safe-area-inset-bottom));
        bottom: calc(62px + env(safe-area-inset-bottom))
    }

    .InMobile .activity-entry.has-bar {
        bottom: 130px;
        bottom: -webkit-calc(130px + env(safe-area-inset-bottom));
        bottom: calc(130px + env(safe-area-inset-bottom))
    }
}

.live-redbag>div {
    width: 332px;
    height: 432px;
    background: url(../img/redbag_img.31bc71de.png) no-repeat;
    background-size: 100% 100%;
    position: relative
}

.live-redbag .live-redbag-in {
    width: 100%;
    height: 100%
}

.live-redbag button {
    top: auto;
    bottom: -68px;
    right: 50%;
    -webkit-transform: translate3d(50%,0,0);
    transform: translate3d(50%,0,0);
    background-image: url(../img/icon_CP_close_hovered.79962e67.png);
    border: 2px solid #b4c0c9
}

.activity-profit {
    height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 16px;
    margin-left: 16px;
    margin-right: 16px;
    background: #28333d;
    border-radius: 8px;
    padding-right: -webkit-calc(20px + env(safe-area-inset-right));
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-right: 20px;
    padding-left: -webkit-calc(20px + env(safe-area-inset-left));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-left: 20px;
    box-sizing: border-box
}

.activity-profit .name {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 4px;
    font-size: 14px;
    color: #fff
}

.activity-profit .name.red:after {
    content: "";
    display: inline-block;
    -webkit-transform: translate(2px,-8px);
    transform: translate(2px,-8px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e35043
}

.activity-profit .desc {
    margin-left: 10px;
    margin-right: 4px;
    font-size: 12px;
    color: #ffefcc
}

.logout-confirm {
    width: 382px
}

.logout-confirm .logout {
    padding: 0 0 36px 0
}

.logout {
    padding: 20px 16px 40px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right));
    text-align: center
}

.logout .logout-user {
    height: 36px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    margin: 0 auto;
    border-radius: 18px;
    background: #1e2831
}

.logout .logout-user p {
    color: #fff;
    margin-left: 5px
}

.logout>p {
    margin-top: 18px;
    text-align: left;
    color: #8b969f
}

.logout>.input {
    margin-top: 16px;
    margin-bottom: 32px;
    padding-right: 0
}

.logout>.input .g-Btn {
    width: 120px;
    border: 1px solid #03c47e;
    color: #03c47e;
    padding: 0;
    cursor: pointer
}

.logout>.input .g-Btn[disabled] {
    border: 0;
    color: #61686f;
    cursor: default
}

.logout>button {
    width: 100%;
    margin-bottom: 10px
}

.logout>button.g-Btn-green {
    background: none
}

.user-guide .slide-title {
    position: absolute;
    top: -18px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 136px;
    height: 36px;
    box-sizing: border-box;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),to(#304051));
    background-image: linear-gradient(180deg,#28333d,#304051);
    border-radius: 4px;
    border: 2px solid #304051;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: #8b969f
}

.user-guide .slide-title:after,.user-guide .slide-title:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #8b969f;
    opacity: .3;
    vertical-align: middle
}

.user-guide .slide-title:before {
    margin-right: 5px
}

.user-guide .slide-title:after {
    margin-left: 5px
}

.user-guide .slide-box {
    padding: 10% 8% 14% 8%;
    background: #28333d;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0,0,0,.5)
}

.user-guide .slide-list {
    width: 60vw!important;
    height: 96vw!important;
    max-width: 300px!important;
    max-height: 450px!important
}

.user-guide .slide-content {
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;
    background-color: transparent
}

.user-guide .slide-trigger {
    bottom: 30px
}

.user-guide .slide-html {
    overflow: auto;
    white-space: normal
}

.user-guide .slide-html p {
    line-height: 24px;
    font-size: 14px;
    color: #8b969f
}

.user-guide .slide-html p strong {
    font-weight: 400;
    color: #fff
}

.user-guide.landscape.lock-portrait .slide-box {
    padding: 5% 3%
}

.user-guide.landscape.lock-portrait .slide-list {
    width: 80vw!important;
    height: 55vh!important
}

.user-guide.landscape.lock-portrait .slide-trigger {
    bottom: 16px
}

.user-guide.landscape.lock-portrait .slide-close {
    width: 28px;
    height: 28px;
    -webkit-transform: translate(50%,12px);
    transform: translate(50%,12px)
}

.liveEducationUserGuide .slide-box {
    padding: 10% 0 14% 0
}

.liveEducationUserGuide .slide-html p {
    margin: 0 10.5% 0 10.5%;
    font-size: 14px;
    color: hsla(0,0%,100%,.9);
    line-height: 24px
}

.liveEducationUserGuide .slide-html p:first-child {
    font-size: 22px;
    font-weight: 500
}

.liveEducationUserGuide .slide-html p:first-child strong {
    color: #03c47e;
    font-weight: 500
}

.liveEducationUserGuide .slide-html p:last-child {
    margin: 0
}

.liveEducationUserGuide .slide-list {
    width: 80vw!important
}

@media only screen and (max-height: 530px) {
    .user-guide.slide .slide-box .slide-close {
        top:0;
        left: 100%
    }
}

.page-party {
    padding-bottom: 16px;
    padding-top: 4px;
    overflow: hidden
}

.page-party #content {
    position: static
}

.page-party.living {
    padding-bottom: 100px
}

.page-party .sticky .sticky-box {
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s
}

.page-party .sticky.fixed-status .sticky-box {
    background-color: rgba(30,40,49,.95);
    box-shadow: 0 12px 14px 0 rgba(0,0,0,.2)
}

.page-party .sk-circle {
    width: 30px!important;
    height: 30px!important
}

.page-party .headerbox {
    height: auto;
    padding: 0 16px 16px 16px;
    box-sizing: border-box;
    background-color: transparent
}

.page-party .headerbox .g-Btn {
    width: 90px;
    font-size: 14px;
    padding: 0 16px;
    margin-left: 8px;
    text-decoration: none
}

.page-party .live-banner {
    margin-bottom: 18px
}

.page-party .nav-sticky .sticky-box {
    padding-bottom: 12px
}

.page-party .nav-sticky .subnav {
    padding-top: 0
}

.page-party .nav-sticky .subnav h2.on {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.page-party .screen-result {
    margin-bottom: 8px;
    line-height: 22px;
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-party .headerbox {
    position: static;
    padding-left: 8%;
    padding-right: 8%
}

@media only screen and (max-width: 768px) {
    .page-party .headerbox {
        padding-left:40px;
        padding-right: 40px
    }
}

@media only screen and (max-width: 414px) {
    .page-party .headerbox {
        padding-left:16px;
        padding-right: 16px
    }
}

.roomlist {
    font-size: 0
}

.roomlist li {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    width: 49%;
    margin-right: 2%;
    margin-bottom: 8px;
    font-size: 14px;
    vertical-align: middle;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: #28333d;
    border-radius: 4px;
    cursor: pointer
}

.roomlist li:nth-child(2n) {
    margin-right: 0
}

.roomlist li.notready .cover img {
    object-fit: contain;
    object-position: center -7px
}

.roomlist li .cover {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.54761905%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border-radius: 4px
}

.roomlist li .cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover
}

.roomlist li .tag {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 16px;
    background-size: 100% 100%;
    border-top-left-radius: 4px;
    font-size: 0
}

.roomlist li .tag.tag_super_hot {
    background-image: url(../img/icon_tag_super_hot.a45f2452.png)
}

.roomlist li .tag.tag_official {
    background-image: url(../img/icon_tag_official.88a1c93b.png)
}

.roomlist li .tag.tag_activity {
    background-image: url(../img/icon_tag_live_activity.593a49ff.png);
    background: url(../img/icon_tag_activity.593a49ff.png) no-repeat;
    background-size: 100% 100%
}

.roomlist li .tag.tag_match {
    background: url(../img/icon_tag_match.719bd52f.png) no-repeat;
    background-size: 100% 100%
}

.roomlist li .icon_redbag {
    position: absolute;
    top: 0;
    right: 0;
    left: auto
}

.roomlist li .bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
    background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(#000));
    background-image: linear-gradient(180deg,transparent,#000);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-top: 4px;
    font-size: 12px;
    color: #b4c0c9
}

.roomlist li .bar .game {
    color: #fff;
    font-weight: 700;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.roomlist li .bar .view {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #b4c0c9
}

.roomlist li .bar .view .icon {
    margin-right: 3px
}

.roomlist li .info {
    padding: 8px
}

.roomlist li .name {
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.roomlist li .user {
    margin-top: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.roomlist li .user img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 4px;
    border: 1px solid hsla(0,0%,100%,.4)
}

.roomlist li .user span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
    color: #b4c0c9
}

.neplayer {
    position: relative;
    background-color: #000
}

.neplayer .vjs-loading-spinner {
    display: none!important
}

.neplayer video {
    position: static
}

.neplayer .cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.neplayer .cover img {
    width: 276px;
    height: 176px
}

.neplayer .cover p {
    max-width: 80%;
    margin-top: 20px;
    margin-bottom: 100px;
    text-align: center;
    font-size: 14px
}

.neplayer .cover.videoReady {
    opacity: 0;
    background-image: none
}

.neplayer .cover.videoReady img,.neplayer .cover.videoReady p {
    display: none
}

.live-detail {
    position: fixed;
    width: 100%;
    height: 100%
}

.live-detail video {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.followlivelist {
    font-size: 0
}

.followlivelist li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 30px
}

.followlivelist li:last-child {
    margin-bottom: 0
}

.followlivelist li .avatar {
    margin-right: 12px
}

.followlivelist li .avatar img {
    border: 1px solid hsla(0,0%,100%,.4)
}

.followlivelist .user {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.followlivelist .user .name {
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    color: #fff
}

.followlivelist .user .game {
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 4px;
    font-size: 12px;
    color: #b4c0c9
}

.followlivelist .user .game span {
    margin-right: 4px
}

.followlivelist .user .game.host span,.followlivelist .user .game.join span {
    border-radius: 9px;
    line-height: 18px;
    padding: 0 8px;
    font-size: 12px;
    color: #28333d
}

.followlivelist .user .game.host span {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ff606f),to(#ffa342));
    background-image: linear-gradient(180deg,#ff606f,#ffa342)
}

.followlivelist .user .game.join span {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#2084ff),to(#0affd3)),radial-gradient(0 228% at 0 0,#37fddf 100%,rgba(2,186,218,0) 0);
    background-image: linear-gradient(180deg,#2084ff,#0affd3),radial-gradient(0 228% at 0 0,#37fddf 100%,rgba(2,186,218,0) 0)
}

.followlivelist .entry button {
    width: 70px;
    height: 30px;
    line-height: 30px;
    padding: 0 16px;
    font-size: 12px
}

.followlivelist .entry button.g-Btn-green {
    background: transparent
}

.live-search-resutl .search-title {
    margin-bottom: 16px
}

.live-search-resutl .empty-status {
    height: 330px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: #8b969f
}

.live-search-resutl .empty-status .icon-live-empty {
    margin-bottom: 10px
}

.live-confirm {
    -webkit-animation: bgFadeIn .3s;
    animation: bgFadeIn .3s;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end
}

.live-confirm .content-box {
    position: relative;
    width: 100%;
    height: 90vh;
    height: -webkit-calc(90vh - 60px - constant(safe-area-inset-top));
    height: calc(90vh - 60px - constant(safe-area-inset-top));
    height: -webkit-calc(90vh - 60px - env(safe-area-inset-top));
    height: calc(90vh - 60px - env(safe-area-inset-top));
    background: #28333d;
    border-radius: 4px 4px 0 0;
    -webkit-animation: slideInBottom .3s;
    animation: slideInBottom .3s;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.live-confirm .content-body {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: auto
}

.live-confirm .content-body::-webkit-scrollbar {
    display: none
}

.live-confirm .content-footer {
    padding: 14px 20px 38px 20px;
    background: #28333d;
    box-sizing: border-box
}

.live-confirm .content-footer .g-Btn {
    width: 100%;
    height: 40px
}

.live-confirm .sticky .sticky-box {
    background-color: #28333d;
    border-radius: 4px 4px 0 0
}

.live-confirm .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 102
}

.choosegame .current-game,.searchgame .current-game {
    height: 54px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 16px
}

.choosegame .current-game span,.searchgame .current-game span {
    max-width: 52%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all
}

.choosegame .current-game-select,.searchgame .current-game-select {
    display: block;
    height: auto;
    min-height: 54px;
    padding: 16px 44px 10px 16px;
    box-sizing: border-box
}

.choosegame .current-game-select span,.searchgame .current-game-select span {
    display: inline;
    word-break: break-all
}

.choosegame .subnav,.searchgame .subnav {
    position: relative;
    padding: 0 16px
}

.choosegame .subnav h2.on,.searchgame .subnav h2.on {
    -webkit-transform: scale(1);
    transform: scale(1);
    font-weight: 400
}

.choosegame .subnav .icon,.searchgame .subnav .icon {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-right: 4px
}

.choosegame .game-list,.searchgame .game-list {
    padding: 26px 16px;
    font-size: 0
}

.choosegame .game-list li,.searchgame .game-list li {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 24px
}

.choosegame .game-list li:nth-child(4n),.searchgame .game-list li:nth-child(4n) {
    margin-right: 0!important
}

.choosegame .game-list li.active .icon,.searchgame .game-list li.active .icon {
    display: block
}

.choosegame .game-list li.active .game-cover img,.searchgame .game-list li.active .game-cover img {
    border: 2px solid #07e4b5
}

.choosegame .game-list li.active .game-name,.searchgame .game-list li.active .game-name {
    color: #03c47e
}

.choosegame .game-list li.mobile,.searchgame .game-list li.mobile {
    width: 22%;
    margin-right: 4%
}

.choosegame .game-list li.mobile .icon,.searchgame .game-list li.mobile .icon {
    border-radius: 0 12px 0 12px
}

.choosegame .game-list li.mobile .game-cover,.searchgame .game-list li.mobile .game-cover {
    padding-bottom: 100%
}

.choosegame .game-list li.mobile .game-cover img,.searchgame .game-list li.mobile .game-cover img {
    border-radius: 24%
}

.choosegame .game-list li.pc,.searchgame .game-list li.pc {
    width: 22%;
    margin-right: 4%
}

.choosegame .game-list li.pc .icon,.searchgame .game-list li.pc .icon {
    border-radius: 0 4px 0 4px
}

.choosegame .game-list li.pc .game-wrap,.searchgame .game-list li.pc .game-wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto
}

.choosegame .game-list li.pc .game-cover,.searchgame .game-list li.pc .game-cover {
    padding-bottom: 142.85714286%
}

.choosegame .game-list li.pc .game-cover img,.searchgame .game-list li.pc .game-cover img {
    border-radius: 10%
}

.choosegame .game-list li .icon,.searchgame .game-list li .icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 20px;
    height: 20px;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: #07e4b5;
    display: none
}

.choosegame .game-list li .game-cover,.searchgame .game-list li .game-cover {
    position: relative;
    height: 0;
    overflow: hidden
}

.choosegame .game-list li .game-cover img,.searchgame .game-list li .game-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
    border: 2px solid transparent;
    background-color: #2e3740
}

.choosegame .game-list li .game-name,.searchgame .game-list li .game-name {
    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #fff
}

.liveform .form-title {
    height: 54px;
    padding: 0 16px;
    line-height: 54px;
    text-align: center;
    color: #fff
}

.liveform .choose {
    margin-top: 6px;
    padding: 0 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.liveform .choose>p {
    font-size: 14px;
    color: #a5a9ac
}

.liveform .choose img {
    width: 64px;
    height: 64px;
    border-radius: 24%;
    margin-top: 16px
}

.liveform .choose img.pc {
    width: 44.8px
}

.liveform .choose span {
    margin-top: 8px;
    font-size: 14px;
    color: #fff
}

.liveform .form {
    padding: 0 16px 26px 16px
}

.liveform .form p {
    margin-top: 32px;
    margin-bottom: 12px;
    color: #a5a9ac
}

.liveform .form .form-count {
    color: #8b969f
}

.liveform .textarea {
    position: relative
}

.liveform .textarea textarea {
    border-radius: 8px
}

.liveform .textarea p {
    position: absolute;
    right: 15px;
    bottom: 11px;
    margin: 0;
    font-size: 12px!important;
    color: #8b969f
}

.liveform .g-Btn {
    width: 100%;
    margin: 30px 0
}

.liveform .switch-box {
    float: right
}

.liveform .switch-box>div,.liveform .switch-box>span {
    vertical-align: middle
}

.liveform .switch-box>span {
    margin-right: 4px;
    font-size: 12px;
    color: #a5a9ac
}

.liveform .switch-box .switch {
    width: 28px;
    height: 16px;
    background: #0f1a23;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    border-radius: 8px;
    border: 0
}

.liveform .switch-box .switch:before {
    width: 12px;
    height: 12px;
    top: 2px
}

.liveform .switch-box .switch.on {
    background: #03c47e
}

.liveform .switch-box .switch.on:before {
    left: 15px
}

.liveform .group-select {
    height: 68px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #1e2831;
    border-radius: 8px;
    padding: 0 16px
}

.liveform .group-select label {
    font-size: 14px;
    color: #61686f
}

.liveform .group-select img {
    width: 44px;
    height: 44px;
    border-radius: 50%
}

.liveform .group-select p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 8px;
    font-size: 16px;
    color: #fff
}

.liveform .group-select span {
    margin-left: 2px;
    font-size: 12px;
    color: #8b969f
}

.searchgame .search-mobile {
    height: auto;
    margin: 0;
    padding: 0
}

.searchgame .search-mobile>div {
    position: static;
    background-color: transparent;
    padding-top: 10px
}

.searchgame .search-mobile .search-inputbox {
    background-color: #304051
}

.searchgame .search-title {
    margin-top: 26px;
    margin-bottom: 0
}

.searchgame .search-history,.searchgame .search-title {
    padding-left: 16px;
    padding-right: 16px
}

.searchgame .game-list {
    padding-top: 24px
}

.live-code-confirm {
    margin-bottom: 50%
}

.live-code-confirm .cofirm-cont {
    padding-left: 32px;
    padding-right: 32px
}

.live-code-confirm .input {
    margin-top: 12px;
    background: #1e2831;
    border: 0 solid #03c47e;
    border-radius: 18px
}

.live-code-confirm .cofirm-msg {
    padding-top: 0;
    padding-bottom: 27px
}

.livegroupselect .form-title {
    position: relative
}

.livegroupselect .form-title i {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 20px;
    height: 20px;
    -webkit-transform: rotateY(180deg) translateY(-50%);
    transform: rotateY(180deg) translateY(-50%)
}

.livegroupselect ul {
    padding: 0 20px
}

.livegroupselect ul li {
    position: relative;
    height: 72px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid #2f3c47;
    padding-right: 32px;
    font-size: 16px;
    color: #fff
}

.livegroupselect ul li.on:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 24px;
    height: 24px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: url(../img/check.591c9be4.png);
    background-size: 100% 100%
}

.livegroupselect ul li img {
    width: 44px;
    height: 44px;
    border-radius: 50%
}

.livegroupselect ul li p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 8px
}

.live-invite .empty-status {
    height: 50vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.live-invite .empty-status p {
    margin-top: 10px
}

.neplayer-debug {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: 0;
    height: 100%;
    -webkit-transition: width .3s;
    transition: width .3s;
    background-color: rgba(0,0,0,.4);
    padding-bottom: 50px;
    box-sizing: border-box
}

.neplayer-debug .debug-btns {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    line-height: 30px
}

.neplayer-debug .debug-btns button {
    margin-right: 5px
}

.neplayer-debug .debug-btns button:last-child {
    margin-right: 0
}

.neplayer-debug i {
    position: absolute;
    top: 10px;
    left: -40px;
    z-index: 10;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-image: url(../img/banner_arrow_left_normal.e697abf4.png);
    background-size: 100% 100%;
    background-color: rgba(0,0,0,.4)
}

.neplayer-debug p {
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    word-break: break-all;
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.5;
    font-size: 12px;
    color: #fff
}

.neplayer-debug.fold {
    width: 300px
}

.neplayer-debug.fold i {
    background-image: url(../img/banner_arrow_right_normal.1b1f7058.png)
}

.page-live-moments .sticky.fixed-status .sticky-box {
    box-shadow: 0 12px 14px 0 rgba(0,0,0,.2);
    background-color: rgba(30,40,49,.95)
}

.page-live-moments .sticky .sticky-box {
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s
}

.page-live-moments .moments-tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-bottom: 16px;
    padding-top: 4px
}

.page-live-moments .moments-tabs li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: 33.33333333%;
    margin-right: 8px;
    line-height: 40px;
    border-radius: 12px;
    background-color: #28333d;
    font-size: 14px;
    color: #b4c0c9
}

.page-live-moments .moments-tabs li span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 40px auto;
    box-sizing: border-box;
    font-weight: 700;
    text-align: center
}

.page-live-moments .moments-tabs li span.livefriendgroup {
    background-image: url(../img/icon_playtogether_group_unselect_40.107176d4.png)
}

.page-live-moments .moments-tabs li span.livefriendnews {
    background-image: url(../img/icon_playtogether_update_unselect_40.fca9c44d.png)
}

.page-live-moments .moments-tabs li span.livecommunity {
    background-image: url(../img/icon_playtogether_broadcast_unselect_40.f79fcf5f.png)
}

.page-live-moments .moments-tabs li.on {
    background-color: #1a3739;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(3,196,126,0)),to(rgba(3,196,126,.2)));
    background-image: linear-gradient(180deg,rgba(3,196,126,0) 50%,rgba(3,196,126,.2));
    color: #fff;
    text-shadow: 0 0 10px rgba(3,196,126,.7)
}

.page-live-moments .moments-tabs li.on span.livefriendgroup {
    background-image: url(../img/icon_playtogether_group_selected_40.9af66a56.png)
}

.page-live-moments .moments-tabs li.on span.livefriendnews {
    background-image: url(../img/icon_playtogether_update_selected_40.77bf93f1.png)
}

.page-live-moments .moments-tabs li.on span.livecommunity {
    background-image: url(../img/icon_playtogether_broadcast_selected_40.ac6c0b84.png)
}

.page-live-moments .moments-tabs li:last-child {
    margin-right: 0
}

.broadcast-bg-0 {
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#9ae1d6),to(#cdf0eb));
    background-image: linear-gradient(180deg,#9ae1d6 50%,#cdf0eb)
}

.broadcast-bg-1 {
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#9ca4ed),to(#ced2f6));
    background-image: linear-gradient(180deg,#9ca4ed 50%,#ced2f6)
}

.broadcast-bg-2 {
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#f3accd),to(#f9d6e6));
    background-image: linear-gradient(180deg,#f3accd 50%,#f9d6e6)
}

.broadcast-bg-3 {
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#efa387),to(#f7d1c3));
    background-image: linear-gradient(180deg,#efa387 50%,#f7d1c3)
}

.broadcast-bg-4 {
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#f8e08d),to(#fdf6dd));
    background-image: linear-gradient(180deg,#f8e08d 50%,#fdf6dd)
}

.broadcast-none {
    margin: 64px auto 0
}

.broadcast-none p {
    font-size: 14px;
    color: #8b969f;
    text-align: center;
    margin-top: 8px
}

.broadcast-none .icon {
    display: block;
    margin: 0 auto
}

.broadcast-box {
    padding-top: 24px
}

.broadcast-con {
    margin: 0 0 12px;
    background: #304051;
    border-radius: 16px
}

.broadcast-con p {
    word-break: break-word
}

.broadcast-con:last-child {
    margin-bottom: 0
}

.broadcast-con .broadcast-header {
    padding: 10px 8px 6px 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.broadcast-con .broadcast-user {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.broadcast-con .broadcast-header-game {
    width: 32px;
    height: 32px;
    border-radius: 50%
}

.broadcast-con .broadcast-header-gamename {
    font-size: 12px;
    color: #8b969f;
    margin-left: 6px
}

.broadcast-con .broadcast-nickname {
    margin: 0 0 0 6px;
    font-size: 12px;
    color: #8b969f
}

.broadcast-con .broadcast-chat {
    border: 1px solid hsla(0,0%,100%,.5);
    border-radius: 16px;
    width: 72px;
    height: 28px;
    padding: 0;
    line-height: 28px;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    font-weight: 700;
    background: none
}

.broadcast-con .broadcast-container {
    padding: 12px;
    box-sizing: border-box;
    font-size: 16px;
    color: rgba(0,0,0,.7);
    font-weight: 700;
    border-radius: 16px;
    overflow: hidden
}

.broadcast-con .broadcast-label {
    font-weight: 400;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.broadcast-con .broadcast-label,.broadcast-con .broadcast-label span {
    font-size: 12px;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.broadcast-con .broadcast-label span {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 10px 10px 0 0;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.35)));
    background-image: linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.35));
    border-radius: 13px;
    padding: 3px
}

.broadcast-con .broadcast-label span .icon {
    opacity: .3
}

.broadcast-con .broadcast-label span .icon_topic_white {
    margin-right: 2px
}

.broadcast-con .broadcast-label span .icon_arrow_white_10 {
    margin-left: 3px
}

.broadcast-con .broadcast-game {
    background: rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 20px;
    padding: 4px;
    box-sizing: border-box;
    position: relative;
    margin-top: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.broadcast-con .broadcast-game img {
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 12px;
    width: 24px;
    height: 24px;
    margin-right: 6px
}

.broadcast-con .broadcast-game span {
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 28px
}

.broadcast-con .broadcast-game i {
    position: absolute;
    top: 11px;
    right: 8px;
    opacity: .3
}

.page-livecommunity .broadcast-box {
    padding: 16px 0
}

.broadcastgame {
    background: #28333d;
    border-radius: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.broadcastgame,.broadcastgame .broadcastgame-icon-box {
    height: 40px;
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s
}

.broadcastgame .broadcastgame-icon-box {
    width: 40px
}

.broadcastgame .broadcastgame-icon-box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.3)
}

.broadcastgame .broadcastgame-icon {
    border-radius: 20px;
    width: 100%;
    height: 100%
}

.broadcastgame .broadcastgame-name {
    font-size: 14px;
    color: #fff;
    letter-spacing: 0;
    font-weight: 700;
    margin: 0 2px 0 6px;
    max-width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.broadcastgame .broadcastgame-patch {
    width: 107px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-shadow: 0 2px 30px 0 rgba(7,171,127,.3)
}

.broadcastgame .broadcastgame-patch .icon {
    margin-right: 2px
}

.broadcastgame .broadcastgame-get {
    color: rgba(0,0,0,.7);
    border: 0;
    border-radius: 20px;
    box-shadow: none
}

.broadcastgame .broadcastgame-get span {
    margin: 0 0 0 4px;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.3);
    line-height: 24px;
    border-radius: 50%;
    box-sizing: border-box
}

.broadcastgame .broadcastgame-get .icon {
    opacity: .3;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin: -2px 0 0 0
}

.broadcastgame.broadcastgame-fixed {
    background: transparent;
    height: 32px;
    line-height: 32px
}

.broadcastgame.broadcastgame-fixed .broadcastgame-icon-box {
    width: 32px;
    height: 32px
}

.broadcastgame.broadcastgame-fixed .icon,.broadcastgame.broadcastgame-fixed button {
    display: none
}

.broadcastgame.broadcastgame-fixed .broadcastgame-name {
    max-width: 90%!important
}

.broadgame-confirm .sticky .sticky-box {
    background-color: #28333d
}

.broadgame-confirm.live-confirm .content-box {
    height: 80vh
}

.broadcastpost {
    margin-top: 8px
}

.broadcastpost .broadcastpost-up {
    width: 24px;
    height: 24px;
    line-height: 24px;
    box-sizing: border-box;
    background: hsla(0,0%,100%,.1);
    border: 1px solid hsla(0,0%,100%,.5);
    border-radius: 50%
}

.broadcastpost .broadcastpost-up .icon {
    -webkit-transform: scaleY(-1) rotate(90deg);
    transform: scaleY(-1) rotate(90deg);
    margin: -3px 0 0 5px
}

.broadcastpost .broadcastpost-btn {
    margin-top: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.broadcastpost .broadcastpost-btn button {
    width: 50%;
    height: 32px;
    background: #fff;
    border-radius: 16px;
    font-size: 14px;
    color: rgba(0,0,0,.7);
    font-weight: 700;
    border: 0
}

.broadcastpost .broadcastpost-btn button:last-child {
    margin-left: 9px
}

.broadlabel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 406px;
    width: 100%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#304051),to(#1e2831));
    background-image: linear-gradient(180deg,#304051,#1e2831);
    border-radius: 24px 24px 0 0;
    z-index: 101;
    padding: 16px;
    box-sizing: border-box
}

.broadlabel .broadlabel-p {
    font-size: 14px;
    color: #a5a9ac;
    font-weight: 700;
    margin-bottom: 16px
}

.broadlabel .broadlebel-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 114px;
    padding-top: 16px;
    box-sizing: border-box
}

.broadlabel .broadlebel-btn button {
    width: 120px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    display: block;
    margin: 0 auto;
    background: #03c47e;
    box-shadow: 0 2px 30px 0 rgba(7,171,127,.3);
    box-sizing: border-box;
    border-radius: 20px;
    border: 0;
    padding: 0;
    color: #fff
}

.broadlabel .broadlebel-btn button i {
    margin-top: -2px
}

.broadlabel .broadlebel-btn button.disabled {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    box-sizing: border-box;
    color: #b4c0c9;
    border-top-color: #3e4851;
    border-bottom-color: #5b6d7e;
    box-shadow: none
}

.broadlabel .broadlabel-con {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-height: 240px;
    overflow-y: auto
}

.broadlabel .broadlabel-con span {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 34px;
    border-radius: 18px;
    background: #1e2831;
    border: 1px solid #1e2831;
    padding: 0 12px 0 8px;
    font-size: 14px;
    color: #61686f;
    margin: 0 8px 8px 0
}

.broadlabel .broadlabel-con span i {
    margin-right: 4px
}

.broadlabel .broadlabel-con span.on {
    background: hsla(0,0%,100%,.1);
    border-color: hsla(0,0%,100%,.35);
    color: #fff
}

.broadcon {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 268px;
    width: 100%;
    border-radius: 24px 24px 0 0;
    z-index: 101;
    padding: 16px;
    box-sizing: border-box
}

.broadcon .broadcon-p {
    font-size: 14px;
    color: rgba(0,0,0,.5);
    font-weight: 700;
    margin: 0 0 8px 8px
}

.broadcon .broad-area {
    width: 100%;
    height: 112px;
    background: rgba(0,0,0,.08);
    border-radius: 16px;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 0;
    resize: none;
    font-size: 16px;
    color: rgba(0,0,0,.7);
    font-weight: 700;
    caret-color: #fff;
    display: block
}

.broadcon .broadcon-labal {
    margin: 16px 0 10px 0;
    font-size: 0
}

.broadcon .broadcon-labal span {
    margin: 0 4px 6px 0;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.35)));
    background-image: linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.35));
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    padding: 4px 8px 4px 2px;
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle
}

.broadcon .broadcon-labal .broadcon-label-icon {
    width: 24px;
    height: 24px;
    overflow: hidden;
    border-radius: 50%;
    padding: 0;
    padding-left: 6px;
    box-sizing: border-box;
    padding-top: 1px;
    background: rgba(0,0,0,.1)
}

.broadcon .broadcon-labal .broadcon-label-icon i {
    opacity: .3
}

.broadcon .broadcon-labal .icon_topic_white {
    vertical-align: top;
    margin-left: 2px;
    margin-right: 2px;
    opacity: .3
}

.broadcon .broadcon-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.broadcon .broadcon-btn .broadcon-btn-color {
    background: #fff;
    border-radius: 20px;
    min-width: 110px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    margin-right: 12px;
    font-size: 14px;
    color: rgba(0,0,0,.7);
    border: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-weight: 700
}

.broadcon .broadcon-btn .broadcon-btn-color i {
    margin: 0 5px 0 3px
}

.broadcon .broadcon-btn .broadcon-btn-submit {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: hsla(0,0%,100%,.3);
    border-radius: 20px;
    font-size: 14px;
    color: rgba(0,0,0,.3);
    font-weight: 700;
    border: 0
}

.broadcon .broadcon-btn .broadcon-btn-submit.on {
    background: #fff;
    color: rgba(0,0,0,.7)
}

.broadcast-search-result {
    background: #28333d;
    border-radius: 8px;
    padding: 14px 8px
}

.broadcast-search-result p {
    line-height: 20px;
    font-size: 14px;
    color: #fff
}

.broadcast-search-result ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start
}

.broadcast-search-result li {
    max-width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
    margin-top: 14px;
    background: rgba(3,196,126,.1);
    border-radius: 8px;
    line-height: 24px;
    padding-left: 2px;
    padding-right: 4px
}

.broadcast-search-result li .icon_arrow_green {
    opacity: .3
}

.broadcast-search-result span.tag {
    margin-left: 2px;
    font-size: 12px;
    color: #03c47e;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.broadcast-search-result span.text {
    margin-left: 8px;
    margin-right: 2px;
    font-size: 12px;
    color: rgba(3,196,126,.5)
}

.broadcast-types {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.broadcast-types ul {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow-x: auto;
    margin-left: 8px;
    font-size: 0;
    white-space: nowrap
}

.broadcast-types ul::-webkit-scrollbar {
    display: none
}

.broadcast-types li {
    max-width: 90%;
    box-sizing: border-box
}

.broadcast-types .tag,.broadcast-types li {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex
}

.broadcast-types .tag {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 24px;
    margin-left: 8px;
    background: #28333d;
    border-radius: 12px;
    padding-left: 2px;
    padding-right: 4px;
    vertical-align: middle;
    font-size: 12px;
    color: #b4c0c9
}

.broadcast-types .tag:first-child {
    margin-left: 0
}

.broadcast-types .tag.active {
    background: rgba(3,196,126,.1);
    color: #03c47e
}

.broadcast-types .tag span {
    margin: 0 2px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.broadcast-types .tag .icon_close_green {
    opacity: .3
}

.broadcast-types>span.tag {
    padding-left: 5px;
    padding-right: 8px
}

.broadcast-types>span.tag i {
    width: 14px;
    height: 14px;
    margin-right: 4px
}

.live-friend-online {
    background: #304051;
    border-radius: 8px;
    padding: 12px 8px 8px 8px;
    margin-bottom: 12px
}

.live-friend-online>h3 {
    font-size: 14px;
    color: #fff
}

.live-friend-online>p {
    margin-top: 2px;
    font-size: 12px;
    color: #8b969f
}

.live-friend-online>ul {
    margin-top: 12px;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#9ae1d6),to(#cdf0eb));
    background-image: linear-gradient(180deg,#9ae1d6 50%,#cdf0eb);
    border-radius: 8px;
    padding: 12px 8px;
    white-space: nowrap;
    overflow: auto;
    font-size: 0
}

.live-friend-online>ul::-webkit-scrollbar {
    display: none
}

.live-friend-online>ul li {
    width: 60px;
    display: inline-block;
    vertical-align: top;
    margin: 0 8px;
    text-align: center
}

.live-friend-online>ul li p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
    font-size: 12px;
    color: rgba(0,0,0,.6)
}

.live-friend-list {
    padding-bottom: 12px
}

.live-friend-list li {
    margin-bottom: 12px;
    background: #28333d;
    border-radius: 8px;
    padding: 14px 8px
}

.live-friend-list .info,.live-friend-list li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.live-friend-list .info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 0 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.live-friend-list .info .user {
    line-height: 20px;
    font-size: 14px;
    color: #fff
}

.live-friend-list .info .text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 17px;
    margin-top: 3px;
    font-size: 12px;
    color: #8b969f
}

.live-friend-list .info .text strong {
    margin-right: 2px;
    font-weight: 400;
    color: #ffeca9
}

.live-friend-list .btns {
    padding: 6px 0
}

.live-friend-list .btns button {
    width: 72px;
    height: 28px;
    box-sizing: border-box;
    background: transparent;
    padding: 0;
    line-height: 1px;
    font-size: 14px;
    color: #03c47e
}

.page-livefriendgroup {
    padding: 0 16px 32px;
    max-width: 100%;
    overflow-x: hidden
}

.page-livefriendgroup .tags-topic {
    margin-bottom: 16px;
    padding-top: 0
}

.page-livefriendgroup .tags-topic .subtagmenu {
    top: -4px
}

.page-livefriendgroup .tips {
    margin: 32px 0 0;
    font-size: 12px;
    color: #b4c0c9;
    text-align: center;
    font-weight: 400
}

.page-livefriendgroup .friendgroup-none {
    margin: 64px auto 0
}

.page-livefriendgroup .friendgroup-none p {
    font-size: 14px;
    color: #8b969f;
    text-align: center;
    margin-top: 8px
}

.page-livefriendgroup .friendgroup-none .icon {
    display: block;
    margin: 0 auto
}

.groupitem {
    position: relative;
    margin: 0 0 12px 0;
    padding: 14px 8px;
    background: #28333d;
    border-radius: 8px;
    cursor: pointer
}

.groupitem:last-child {
    margin-bottom: 0
}

.groupitem .flag {
    position: absolute;
    top: 0;
    right: 0;
    background: #03c47e;
    border-radius: 0 8px 0 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 2px 8px
}

.groupitem .flag.recommend {
    background: #ffa786
}

.groupitem .flag img {
    margin: 0 2px 0 0;
    width: 14px;
    height: 14px
}

.groupitem .flag .text {
    font-size: 12px;
    color: #fff;
    font-weight: 400;
    line-height: 17px
}

.groupitem .head,.groupitem .info {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.groupitem .head .left {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.groupitem .head .left .category {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 3px 6px 0;
    padding: 3px 8px 3px 2px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#30ffe0),to(#fff7be));
    background-image: linear-gradient(180deg,#30ffe0,#fff7be);
    border-radius: 12px
}

.groupitem .head .left .category.column {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffb1d5),to(#9a86ff));
    background-image: linear-gradient(180deg,#ffb1d5,#9a86ff)
}

.groupitem .head .left .category.column .img:before {
    display: none
}

.groupitem .head .left .category .img {
    position: relative;
    margin-right: 2px;
    width: 20px;
    height: 20px
}

.groupitem .head .left .category .img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: .5px solid rgba(40,51,61,.3)
}

.groupitem .head .left .category .img img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.groupitem .head .left .category span {
    max-width: 207px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    color: #28333d
}

.groupitem .head .left .tags li {
    display: inline-block;
    margin: 0 3px 6px 0
}

.groupitem .head .left .tags li div {
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    max-width: 221px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    background: rgba(48,255,224,.1);
    border: 1px solid rgba(48,255,224,.3);
    color: #30ffe0;
    border-radius: 12px
}

.groupitem .head .left .tags li.column div {
    background: rgba(255,177,213,.1);
    border: 1px solid rgba(255,177,213,.35);
    color: #ffb1d5
}

.groupitem .info {
    margin-top: 4px
}

.groupitem .info .txt .name {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.groupitem .info .txt .name .text {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    max-width: 247px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.groupitem .info .txt .label {
    margin: 4px 0 0
}

.groupitem .info .txt .label,.groupitem .info .txt .label .count {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.groupitem .info .txt .label .count {
    font-size: 12px;
    color: #8b969f;
    font-weight: 400
}

.groupitem .info .txt .label .count i {
    vertical-align: middle;
    font-style: normal
}

.groupitem .info .txt .label .count i.icon {
    position: static
}

.groupitem .info .txt .label .intro {
    position: relative;
    margin-left: 4px;
    padding-left: 6px;
    font-size: 12px;
    color: #8b969f;
    font-weight: 400;
    line-height: 1;
    max-width: 199px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.groupitem .info .txt .label .intro:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    width: 1px;
    height: 8px;
    background: rgba(139,150,159,.3)
}

.groupitem .info .g-Btn {
    width: auto;
    height: 28px;
    line-height: 28px;
    padding: 0 21px;
    font-weight: 700;
    font-size: 14px;
    border-color: hsla(0,0%,100%,.5);
    color: #fff
}

.group-item-mini {
    margin: 8px 8px 0 8px;
    background: #28333d;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.group-item-mini .group-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: 50%;
    background-color: #364552;
    margin-right: 4px
}

.group-item-mini .group-tag {
    padding-left: 20px;
    padding-right: 6px;
    margin-right: 4px;
    border-radius: 10px;
    line-height: 20px;
    font-size: 12px;
    background-repeat: no-repeat;
    color: #fff
}

.group-item-mini .group-tag.tag-certify {
    background-color: #03c47e;
    background-image: url(../img/icon_group_certify_14.96148c26.png);
    background-size: 14px 14px;
    background-position: left 4px center
}

.group-item-mini .group-tag.tag-top {
    background-color: #ffa786;
    background-image: url(../img/icon_group_top_14.d8838985.png);
    background-size: 14px 14px;
    background-position: left 4px center
}

.group-item-mini .group-name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 4px;
    font-size: 14px;
    color: #fff
}

.group-item-mini .group-btn {
    width: 64px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    color: #fff
}

.coupons .icon {
    margin-right: 0
}

.coupons .coupons-btn {
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 24px;
    padding-left: 8px;
    padding-right: 10px;
    background-image: linear-gradient(45deg,#888b99,#4d5061);
    border-radius: 4px;
    font-size: 12px;
    color: #fff
}

.coupons .coupons-btn .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 6px;
    margin-right: 6px;
    font-weight: 400
}

.coupons .coupons-btn .text strong {
    margin-left: 4px;
    vertical-align: -1px;
    color: #e2bb7c
}

.coupons .coupons-btn .icon-2 {
    width: 12px;
    height: 12px
}

.coupons .coupons-btn2 {
    height: 48px;
    padding: 0 12px;
    background-image: -webkit-gradient(linear,left top,right top,from(#efa387),to(#f7d1c3));
    background-image: linear-gradient(90deg,#efa387,#f7d1c3);
    font-size: 14px;
    color: #131a3b;
    letter-spacing: 0;
    font-weight: 600;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box
}

.coupons .coupons-btn2 .coupons-name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    width: 60%
}

.coupons .coupons-btn2 .coupons-name>div {
    width: -webkit-calc(100% - 26px);
    width: calc(100% - 26px)
}

.coupons .coupons-btn2 .coupons-name p {
    max-width: 100%;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 8px
}

.coupons .coupons-btn2 i.sign {
    padding: 0 3px 1px;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    background: #e24141;
    border-radius: 4px;
    display: inline-block;
    font-style: normal;
    margin-right: 8px
}

.coupons .coupons-btn2 span {
    font-size: 12px;
    color: rgba(19,26,59,.5);
    font-weight: 400;
    display: inline-block
}

.coupons .coupons-btn2 span.disabled-tips {
    color: #939393
}

.coupons .coupons-btn2 .icon-back {
    width: 20px;
    height: 12px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-top: -2px
}

.coupons .coupons-btn2.disabled {
    background: rgba(48,64,81,.5);
    color: #fff
}

.coupons .coupons-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.coupons .coupons-title nav {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: center
}

.coupons .coupons-title .icon-back-menu {
    width: 24px;
    height: 24px
}

.coupons .coupons-list {
    position: relative;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: #28333d;
    box-sizing: border-box
}

.coupons .coupons-list ul {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow-y: auto;
    padding: 2px 16px
}

.coupons .coupons-list li {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px 8px;
    line-height: 17px;
    background-image: linear-gradient(45deg,#888b99,#4d5061);
    border-radius: 4px;
    text-align: left;
    font-size: 12px;
    color: #fff
}

.coupons .coupons-list li.disabled {
    opacity: .4;
    border-radius: 4px 4px 0 0;
    margin-bottom: 36px
}

.coupons .coupons-list li .error {
    position: absolute;
    left: 0;
    height: 20px;
    bottom: -20px;
    right: 0;
    padding: 0 10px;
    line-height: 20px;
    background: hsla(0,0%,100%,.2);
    border-radius: 0 0 4px 4px
}

.coupons .coupons-list li:last-child {
    margin-bottom: 0
}

.coupons .coupons-list li.active:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 1;
    pointer-events: none;
    border: 2px solid #07e4b5;
    border-radius: 4px
}

.coupons .coupons-list li.active:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-image: url(../img/icon_create_room_selected.c2ee0584.png);
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: #07e4b5;
    border-top-left-radius: 4px
}

.coupons .coupons-list li[disabled] {
    opacity: .3;
    padding-bottom: 28px
}

.coupons .coupons-list li[disabled] .error {
    display: block
}

.coupons .coupons-list .icon-3 {
    width: 32px;
    height: 44px
}

.coupons .coupons-list .col-1 {
    margin-left: 6px;
    -webkit-box-flex: 11;
    -webkit-flex: 11;
    flex: 11
}

.coupons .coupons-list .col-1 p:first-child {
    font-size: 24px;
    line-height: 30px
}

.coupons .coupons-list .col-1 p:first-child sub {
    margin-right: 2px;
    bottom: 0;
    font-weight: 400;
    font-size: 60%
}

.coupons .coupons-list .col-2 {
    margin-left: 6px;
    -webkit-box-flex: 19;
    -webkit-flex: 19;
    flex: 19;
    overflow: hidden
}

.coupons .coupons-list .col-2 p:first-child {
    font-size: 14px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.coupons .coupons-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1%,rgba(40,51,61,0)),to(#28333d));
    background-image: linear-gradient(180deg,rgba(40,51,61,0) 1%,#28333d);
    text-align: center;
    pointer-events: none
}

.coupons .coupons-bottom button {
    position: relative;
    z-index: 3;
    pointer-events: auto
}

.coupons.coupons-mobile .coupons-btn {
    margin-bottom: 24px
}

.coupons.coupons-mobile .coupons-btn .icon-1 {
    width: 32px;
    height: 44px;
    margin-top: -14px
}

.coupons.coupons-mobile .coupons-btn .text {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.coupons.coupons-mobile .coupons-popup {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10
}

.coupons.coupons-mobile .coupons-mask {
    position: fixed;
    top: auto;
    z-index: 998;
    height: 80%
}

.coupons.coupons-mobile .coupons-title {
    padding: 16px 24px 24px 24px
}

.coupons.coupons-mobile .coupons-title nav h2 {
    font-weight: 400;
    font-size: 14px
}

.coupons.coupons-mobile .coupons-title .icon {
    position: absolute;
    top: 16px;
    right: 16px
}

.coupons.coupons-mobile .coupons-list {
    background: #304051
}

.coupons.coupons-mobile .coupons-list ul {
    padding-bottom: 128px;
    padding-bottom: -webkit-calc(128px + constant(safe-area-inset-bottom));
    padding-bottom: calc(128px + constant(safe-area-inset-bottom));
    padding-bottom: -webkit-calc(128px + env(safe-area-inset-bottom));
    padding-bottom: calc(128px + env(safe-area-inset-bottom))
}

.coupons.coupons-mobile .coupons-bottom {
    height: 128px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: transparent;
    padding: 0 32px
}

.coupons.coupons-mobile .coupons-bottom button {
    margin-top: 0
}

.coupons.coupons-pc {
    width: 70%
}

.coupons.coupons-pc .coupons-btn {
    cursor: pointer
}

.coupons.coupons-pc .coupons-btn .icon-1 {
    width: 22px;
    height: 30px
}

.coupons.coupons-pc .coupons-popup {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    padding-left: 45%;
    z-index: 999
}

.coupons.coupons-pc .coupons-list ul {
    padding-bottom: 76px
}

.coupons.coupons-pc .coupons-list ul li {
    cursor: pointer
}

.coupons.coupons-pc .coupons-list ul li[disabled] {
    cursor: not-allowed
}

.coupons.coupons-pc .coupons-bottom {
    height: 76px;
    line-height: 76px
}

.coupons.coupons-pc .coupons-bottom button {
    width: 120px
}

@media only screen and (max-width: 768px) {
    .coupons.coupons-pc {
        max-width:198px
    }
}

.appointment {
    width: 90%;
    max-width: 300px;
    position: relative
}

.appointment .appointbox img {
    width: 100%;
    display: block;
    border-radius: 8px 8px 0 0;
    object-fit: cover
}

.appointment .slide-close {
    top: auto;
    right: 50%;
    bottom: -48px;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    background-image: url(../img/icon_CP_close_hovered.79962e67.png);
    border: 2px solid #b4c0c9;
    pointer-events: none
}

.appointment .appointdesc {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 18px 12px;
    box-sizing: border-box;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background: #fff;
    color: #1c1c1e;
    font-weight: 700;
    border-radius: 0 0 8px 8px
}

.appointment .appointdesc p {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    white-space: normal
}

.appointment .appointdesc button {
    min-width: 112px;
    margin-left: 12px;
    padding: 0
}

.appointment .appointdesc .appointbtn {
    border: 0;
    color: #8e8e93;
    font-weight: 700;
    background: none
}

.appointment .appointdesc .icon {
    width: 14px;
    height: 14px
}

.appointment.landscape {
    width: auto;
    height: 90%;
    max-width: none
}

.appointment.landscape .appointbox {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.appointment.landscape img {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: calc(100% - 60px);
    overflow: hidden
}

.appointment.landscape .appointdesc {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.appointment.landscape .slide-close {
    top: 0;
    right: -30px;
    bottom: auto
}

.InTransPortrait .appointment {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 90vh
}

@media only screen and (max-height: 564px) {
    .c-path-detail {
        max-height:-webkit-calc(100% - 64px)!important;
        max-height: calc(100% - 64px)!important
    }
}

.calendar {
    -webkit-animation: fadeIn .3s;
    animation: fadeIn .3s;
    z-index: 999
}

.calendar .calendar-box {
    max-width: 96%;
    width: 320px;
    background: #28333d;
    border-radius: 16px
}

.calendar .calendar-title {
    box-sizing: border-box;
    padding: 16px;
    line-height: 24px;
    text-align: center
}

.calendar .calendar-title h2 {
    margin-bottom: 4px;
    font-size: 16px;
    color: #fff
}

.calendar .calendar-title p {
    font-size: 14px;
    color: #8b969f
}

.calendar .calendar-content {
    background: #304051;
    border-radius: 16px;
    padding-bottom: 24px
}

.calendar .calendar-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 16px 8px;
    box-sizing: border-box;
    text-align: center
}

.calendar .calendar-head button {
    border: 0;
    background-color: #404e5e;
    border-radius: 50%;
    cursor: pointer
}

.calendar .calendar-head span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size: 16px;
    color: #fff
}

.calendar .calendar-head .icon:first-child,.calendar .calendar-head .icon:nth-child(2) {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.calendar .calendar-head .icon:nth-child(2),.calendar .calendar-head .icon:nth-child(4) {
    margin: 0 16px
}

.calendar .calendar-body {
    padding: 0 20px 18px 20px
}

.calendar .calendar-body table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed
}

.calendar .calendar-body td,.calendar .calendar-body th {
    height: 36px;
    font-weight: 400;
    text-align: center;
    font-size: 14px;
    color: #fff
}

.calendar .calendar-body td.active span {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    background-color: #03c47e
}

.calendar .calendar-body td.disable span {
    color: #8b969f;
    cursor: default
}

.calendar .calendar-body td span {
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer
}

.calendar .calendar-foot {
    text-align: center
}

.calendar .calendar-foot button {
    width: 120px;
    height: 40px;
    border-radius: 20px;
    border: 0;
    padding: 0;
    font-size: 14px
}

.calendar .calendar-foot button.disable {
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4d6275),color-stop(98%,#28333d));
    background-image: linear-gradient(180deg,#4d6275,#28333d 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    font-size: 14px;
    color: #b4c0c9
}

.calendar-dates-confirm {
    text-align: center
}

.calendar-dates-confirm h2 {
    line-height: 24px;
    font-size: 16px;
    color: #fff
}

.calendar-dates-confirm .cofirm-msg {
    max-height: 200px;
    overflow: auto;
    margin-top: 12px;
    margin-bottom: 20px;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 20px;
    font-size: 14px;
    color: #8b969f
}

.calendar-dates-confirm .cofirm-msg p {
    margin-top: 8px
}

.picuploader-item {
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    text-align: center
}

.picuploader-item:last-child {
    margin-right: 0
}

.picuploader-item .confirm-shade {
    -webkit-animation: animate_in .3s;
    animation: animate_in .3s
}

.picuploader-item .confirm-shade img {
    max-width: 95%;
    max-height: 95%
}

.picuploader-img {
    width: 72px;
    height: 72px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border: 1px dashed #61686f;
    border-radius: 8px;
    background-color: #1e2831;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat
}

.picuploader-img.status-empty {
    cursor: pointer
}

.picuploader-img.status-empty .icon_add {
    display: block
}

.picuploader-img.status-upload span {
    display: block;
    font-size: 12px;
    color: #61686f
}

.picuploader-img.status-img {
    position: relative;
    cursor: pointer
}

.picuploader-img.status-img .icon_close_white {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 24px;
    height: 24px;
    display: block;
    background-color: rgba(0,0,0,.3);
    background-size: 18px 18px;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 0 8px 0 8px;
    cursor: pointer
}

.picuploader-img.status-img .icon_close_white:hover {
    background-color: rgba(0,0,0,.5)
}

.picuploader-img .icon,.picuploader-img span {
    display: none
}

.startgame-appendWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000
}

.redeem-confirm {
    width: 382px
}

.redeem-confirm .redeem {
    padding: 0 0 36px 0
}

.redeem {
    padding: 20px 16px 40px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right));
    text-align: center
}

.redeem>p {
    margin-top: 18px;
    text-align: center;
    font-size: 14px;
    color: #8b969f
}

.redeem>.input {
    margin-top: 24px;
    margin-bottom: 24px;
    padding-right: 0
}

.redeem>button {
    width: 100%;
    margin-bottom: 10px
}

.redeem>button.g-Btn-green {
    background: none
}

.redeem>button[disabled],.redeem>button[disabled].on,.redeem>button[disabled]:active,.redeem>button[disabled]:focus,.redeem>button[disabled]:hover {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275))!important;
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%)!important;
    border: 1px solid hsla(0,0%,100%,.1);
    font-size: 14px;
    color: #b4c0c9;
    cursor: default
}

.live-community2 {
    padding-bottom: 16px
}

.live-community2 .subtags {
    padding: 0
}

.live-community2 .community2-empty {
    font-size: 12px;
    color: #b4c0c9;
    margin: 24px auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.live-community2 .community2-empty p {
    margin: 0 7px
}

.live-community2 .community2-empty span {
    width: 44px;
    height: 1px;
    background-color: hsla(0,0%,100%,.08)
}

.live-community2 .community2-last {
    margin-bottom: 104px
}

.community2-item {
    background: #28333d;
    border-radius: 16px;
    padding: 12px 12px 0 12px;
    position: relative;
    margin-top: 16px
}

.community2-item .icon_card_more_grey {
    margin-left: 8px
}

.community2-item .community2-item-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.community2-item .community2-item-head .user-avatar {
    min-width: 40px
}

.community2-item .community2-item-name {
    margin-left: 8px;
    font-size: 12px;
    color: #b4c0c9;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.community2-item .community2-item-name p {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap
}

.community2-item .community2-nickname {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.community2-item .community2-gamestatus {
    width: 38px;
    min-width: 38px;
    height: 16px;
    margin-left: 2px;
    background: url(../img/tag_ingame@3x.b9e752ed.png) no-repeat;
    background-size: 100% 100%
}

.community2-item .community2-label {
    margin-top: 4px
}

.community2-item .community2-label .icon {
    width: 6px;
    opacity: .3
}

.community2-item .community2-label span {
    color: rgba(3,196,126,.75);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.community2-item .community2-label-line {
    width: 1px;
    height: 12px;
    background-color: #39434d;
    margin: 0 4px;
    display: inline-block
}

.community2-item .community2-follow {
    width: 64px;
    line-height: 28px;
    font-weight: 500;
    padding: 0;
    height: 28px;
    font-size: 12px;
    min-width: 64px;
    margin-left: 8px;
    background: none
}

.community2-item .community2-follow.g-Btn-green2 {
    background: #03c47e;
    border: 0
}

.community2-item .community2-line {
    width: 100%;
    border-top: .5px solid #1e2831;
    margin: 12.5px auto 7.5px;
    display: block
}

.community2-item .community2-content {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    word-break: break-all;
    white-space: pre-wrap
}

.community2-item .community2-content.overline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden
}

.community2-item .community2-content.overline a {
    text-decoration: none
}

.community2-item .community2-content.loadmore {
    position: relative
}

.community2-item .community2-content.loadmore:after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: " \5168\6587";
    color: #03c47e;
    z-index: 1;
    background: #304051
}

.community2-item .community2-content i,.community2-item .community2-content span {
    font-style: normal;
    color: #03c47e
}

.community2-item .community2-cover {
    margin-top: 8px;
    width: 200px;
    border: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture {
    margin: 8px 0 0;
    display: inline-block;
    overflow: hidden;
    border: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture .community2-pic {
    background-color: rgba(139,150,159,.15);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    display: inline-block;
    overflow: hidden
}

.community2-item .community2-picture .community2-pic.pic_bg {
    background-image: url(../img/icon_pic_FailToLoad_20_grey@3x.cef63776.png)
}

.community2-item .community2-picture.community2-pic1 {
    height: 200px
}

.community2-item .community2-picture.community2-pic1 .community2-pic {
    width: 200px;
    height: 200px
}

.community2-item .community2-picture.community2-pic2 {
    height: 105px
}

.community2-item .community2-picture.community2-pic2 .community2-pic {
    width: 105px;
    height: 105px
}

.community2-item .community2-picture.community2-pic2 .community2-pic:last-child {
    margin-left: 2px
}

.community2-item .community2-picture.community2-pic3 {
    width: 100%;
    height: 105px
}

.community2-item .community2-picture.community2-pic3 .community2-pic {
    width: 33%;
    height: 105px
}

.community2-item .community2-picture.community2-pic3 .community2-pic:nth-child(2) {
    margin: 0 .5%
}

.community2-item .community2-picture.community2-pic4,.community2-item .community2-picture.community2-pic5 {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 0
}

.community2-item .community2-picture.community2-pic4 .community2-pic,.community2-item .community2-picture.community2-pic5 .community2-pic {
    width: 33%;
    height: 105px;
    position: relative
}

.community2-item .community2-picture.community2-pic4 .community2-pic:nth-child(2),.community2-item .community2-picture.community2-pic5 .community2-pic:nth-child(2) {
    margin: 0 .5%;
    border-bottom: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture.community2-pic4 .community2-pic:nth-child(3),.community2-item .community2-picture.community2-pic5 .community2-pic:nth-child(3) {
    border-bottom: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture.community2-pic4 .community2-pic:nth-child(3):after,.community2-item .community2-picture.community2-pic5 .community2-pic:nth-child(3):after {
    content: "";
    border-right: .5px solid rgba(30,40,49,.8);
    height: 100%;
    width: 12px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box
}

.community2-item .community2-picture.community2-pic4 .community2-pic:nth-child(4),.community2-item .community2-picture.community2-pic5 .community2-pic:nth-child(4) {
    margin-top: 2px;
    border-bottom: .5px solid rgba(30,40,49,.8);
    border-right: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture.community2-pic5 .community2-pic:nth-child(2) {
    border: 0
}

.community2-item .community2-picture.community2-pic5 .community2-pic:nth-child(4) {
    border-right: 0;
    border-radius: 0
}

.community2-item .community2-picture.community2-pic5 .community2-pic:nth-child(5) {
    margin-top: 2px;
    margin-left: .5%;
    border-bottom: .5px solid rgba(30,40,49,.8);
    border-right: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture.community2-pic6,.community2-item .community2-picture.community2-pic9 {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.community2-item .community2-picture.community2-pic6 .community2-pic,.community2-item .community2-picture.community2-pic9 .community2-pic {
    width: 33%;
    height: 105px
}

.community2-item .community2-picture.community2-pic6 .community2-pic:nth-child(2),.community2-item .community2-picture.community2-pic9 .community2-pic:nth-child(2) {
    margin: 0 .5%
}

.community2-item .community2-picture.community2-pic6 .community2-pic:nth-child(5),.community2-item .community2-picture.community2-pic6 .community2-pic:nth-child(8),.community2-item .community2-picture.community2-pic9 .community2-pic:nth-child(5),.community2-item .community2-picture.community2-pic9 .community2-pic:nth-child(8) {
    margin: 2px .5% 0
}

.community2-item .community2-picture.community2-pic6 .community2-pic:nth-child(4),.community2-item .community2-picture.community2-pic6 .community2-pic:nth-child(6),.community2-item .community2-picture.community2-pic6 .community2-pic:nth-child(7),.community2-item .community2-picture.community2-pic6 .community2-pic:nth-child(9),.community2-item .community2-picture.community2-pic9 .community2-pic:nth-child(4),.community2-item .community2-picture.community2-pic9 .community2-pic:nth-child(6),.community2-item .community2-picture.community2-pic9 .community2-pic:nth-child(7),.community2-item .community2-picture.community2-pic9 .community2-pic:nth-child(9) {
    margin-top: 2px
}

.community2-item .community2-picture.community2-pic7,.community2-item .community2-picture.community2-pic8 {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 0
}

.community2-item .community2-picture.community2-pic7 .community2-pic,.community2-item .community2-picture.community2-pic8 .community2-pic {
    width: 33%;
    height: 105px;
    position: relative
}

.community2-item .community2-picture.community2-pic7 .community2-pic:nth-child(2),.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(2) {
    margin: 0 .5%
}

.community2-item .community2-picture.community2-pic7 .community2-pic:nth-child(4),.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(4) {
    margin: 2px 0
}

.community2-item .community2-picture.community2-pic7 .community2-pic:nth-child(5),.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(5) {
    margin: 2px .5% 0;
    border-bottom: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture.community2-pic7 .community2-pic:nth-child(3),.community2-item .community2-picture.community2-pic7 .community2-pic:nth-child(6),.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(3),.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(6) {
    margin-top: 2px;
    border-bottom: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture.community2-pic7 .community2-pic:nth-child(3):after,.community2-item .community2-picture.community2-pic7 .community2-pic:nth-child(6):after,.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(3):after,.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(6):after {
    content: "";
    border-right: .5px solid rgba(30,40,49,.8);
    height: 100%;
    width: 12px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box
}

.community2-item .community2-picture.community2-pic7 .community2-pic:nth-child(3),.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(3) {
    border-bottom: 0
}

.community2-item .community2-picture.community2-pic7 .community2-pic:nth-child(7),.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(7) {
    border-bottom: .5px solid rgba(30,40,49,.8);
    border-right: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(5) {
    border: 0
}

.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(7) {
    border-right: 0;
    border-radius: 0
}

.community2-item .community2-picture.community2-pic8 .community2-pic:nth-child(8) {
    margin-left: .5%;
    border-bottom: .5px solid rgba(30,40,49,.8);
    border-right: .5px solid rgba(30,40,49,.8)
}

.community2-item .community2-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.community2-item .community2-play {
    position: relative;
    background: rgba(30,40,49,.5);
    border: .5px solid #1e2831;
    border-radius: 12px;
    width: 100%;
    padding: 8px 8px 8px 12px;
    box-sizing: border-box;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    color: #8b969f;
    font-size: 12px;
    margin-top: 8px
}

.community2-item .community2-play,.community2-item .community2-play p {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.community2-item .community2-play p {
    overflow: hidden
}

.community2-item .community2-play span {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.community2-item .community2-play button {
    border: 0;
    background: rgba(3,196,126,.1);
    border-radius: 8px;
    width: 60px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #03c47e;
    margin-left: 8px
}

.community2-item span.community2-play-tips {
    position: absolute;
    right: 0;
    top: -36px;
    z-index: 2;
    background: #43586f;
    padding: 0 6px;
    line-height: 32px;
    border: 1px solid hsla(0,0%,100%,.08);
    border-radius: 4px;
    overflow: visible;
    font-weight: 400;
    font-size: 14px;
    color: #fff
}

.community2-item span.community2-play-tips:after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -12px;
    z-index: 2;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top: 6px solid #43586f
}

.community2-item .community2-buttons {
    height: 48px;
    color: #b4c0c9
}

.community2-item .community2-buttons,.community2-item .community2-buttons span {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.community2-item .community2-buttons span {
    width: 33.33333333%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.community2-item .community2-buttons span:nth-child(2) {
    height: 20px;
    border-left: .5px solid rgba(180,192,201,.4);
    border-right: .5px solid rgba(180,192,201,.4)
}

.community2-item .community2-buttons span:nth-child(2).active {
    color: #ff5b77
}

.community2-item .community2-buttons i {
    margin-right: 2px
}

.community2-item.community2-bg2 {
    background: #304051
}

.community2-item.community2-bg2 .community2-label-line {
    background-color: #3f4e5f
}

.community2-item.community2-bg2 .community2-line {
    border-color: #28333d
}

.community2-item.community2-bg2 .community2-play {
    background: rgba(40,51,61,.3);
    border: .5px solid rgba(40,51,61,.5)
}

.community2-split-line {
    font-size: 12px;
    color: #b4c0c9;
    margin: 24px auto 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.community2-split-line p {
    margin: 0 8px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.community2-split-line span {
    width: 50%;
    height: 1px;
    background-color: hsla(0,0%,100%,.08)
}

.community2detail .topnav .topnav-fixed {
    background: #28333d
}

.community2detail .topnav .topnav-fixed .icon-info-more-green {
    position: absolute;
    top: 0;
    height: 100%;
    right: 16px
}

.community2detail .community2-item {
    background: none;
    padding: 0 16px;
    margin-top: 0;
    margin-bottom: 24px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.community2detail .community2-label-line {
    background-color: #414e5f
}

.community2detail .community2-item-head {
    background: #304051;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px
}

.community2detail .community2-buttons,.community2detail .community2-line,.community2detail .icon_card_more_grey {
    display: none
}

.community2detail .community2-picture.community2-pic1,.community2detail .community2-picture.community2-pic1 .community2-pic {
    width: 100%;
    height: auto;
    display: block
}

.community2detail .community2-picture.community2-pic1 .community2-pic img,.community2detail .community2-picture.community2-pic1 img {
    display: block
}

.community2detail .community2-cover {
    width: 100%
}

.live-community-comment {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right)
}

.community2-edit {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#304051),to(#1e2831));
    background-image: linear-gradient(180deg,#304051,#1e2831);
    box-shadow: 0 -1px 0 0 rgba(180,192,201,.2);
    border-radius: 16px 16px 0 0;
    width: 100%;
    padding: 8px 26px 50px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -100%;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.community2-edit.community2-edit-show {
    bottom: 0
}

.community2-edit button {
    border: 0;
    height: 56px;
    line-height: 56px;
    width: 100%;
    font-size: 16px;
    background: none;
    padding: 0;
    color: #fff
}

.community2-edit .community2-delete {
    color: #e35043
}

.community2-edit .community2-cancel {
    border: 1px solid #61686f;
    border-radius: 32px;
    color: #8b969f;
    font-size: 14px;
    margin-top: 8px;
    height: 40px;
    line-height: 40px;
    font-weight: 500
}

.community2-broadcast-create {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 103;
    background: #28333d;
    box-shadow: 0 -1px 0 0 rgba(180,192,201,.2),0 0 30px 0 rgba(0,0,0,.2);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.community2-broadcast-create .nav-bar {
    min-height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background: #1e2831;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-left: 16px;
    padding-right: 16px
}

.community2-broadcast-create .nav-bar button {
    width: 64px;
    height: 28px;
    background: #03c47e;
    border-radius: 14px;
    border: 0;
    padding: 0;
    font-weight: 700;
    font-size: 12px;
    color: #fff
}

.community2-broadcast-create .nav-bar button[disabled] {
    background-color: transparent;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,.9)),color-stop(98%,rgba(77,98,117,.9)));
    background-image: linear-gradient(180deg,rgba(40,51,61,.9),rgba(77,98,117,.9) 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    color: #b4c0c9
}

.community2-broadcast-create .btn-bar {
    position: relative;
    min-height: 52px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 52px 0 16px;
    background: #222d37;
    box-shadow: 0 1px 0 0 rgba(180,192,201,.1)
}

.community2-broadcast-create .btn-bar .icon {
    margin-right: 24px
}

.community2-broadcast-create .btn-bar .icon:last-child {
    margin-right: 0
}

.community2-broadcast-create .btn-bar .btn-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: transparent;
    border: 0;
    padding: 0
}

.community2-broadcast-create .btn-bar .btn-right:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 16px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: .4;
    background: #b4c0c9;
    border-radius: .25px
}

.community2-broadcast-create .game-bar {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    min-height: 52px;
    padding-left: 16px
}

.community2-broadcast-create .game-bar:after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: hsla(0,0%,100%,.08)
}

.community2-broadcast-create .game-bar .game-name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 14px;
    color: #b4c0c9;
    overflow: hidden
}

.community2-broadcast-create .game-bar .game-name strong {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-weight: 400;
    margin-left: 8px;
    color: #03c47e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.community2-broadcast-create .game-bar .game-icon {
    min-width: 52px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.community2-broadcast-create .game-bar .game-icon .icon_arrow_right_grey {
    margin-left: 12px;
    opacity: .5
}

.community2-broadcast-create .game-bar .game-icon .icon_close_14 {
    margin-left: 8px
}

.community2-broadcast-create .broadcast-content {
    position: relative;
    padding: 24px 16px 16px 16px;
    box-sizing: border-box;
    font-size: 0
}

.community2-broadcast-create .broadcast-wrap {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: auto
}

.community2-broadcast-create .broadcast-wrap::-webkit-scrollbar {
    display: none
}

.community2-broadcast-create .picuploader-item {
    margin-right: 2px;
    margin-top: 2px
}

.community2-broadcast-create .picuploader-item:nth-child(3n) {
    margin-right: 0
}

.community2-broadcast-create .picuploader-item .confirm-shade {
    background-color: #000
}

.community2-broadcast-create .picuploader-item .confirm-shade img {
    max-width: 100%;
    max-height: 100%
}

.community2-broadcast-create .broadcast-img {
    padding: 0 16px 16px 16px
}

.community2-broadcast-create .broadcast-img.hidden {
    pointer-events: none
}

.community2-broadcast-create .broadcast-img.hidden .picuploader-item {
    display: none
}

.community2-broadcast-create .picuploader-img {
    background-color: rgba(139,150,159,.15);
    border: .5px solid hsla(0,0%,100%,.2);
    border-radius: 12px;
    box-sizing: border-box;
    background-size: cover
}

.community2-broadcast-create .picuploader-img .icon_add {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_plus_grey_20@2x.8e8cf0a5.png)
}

.community2-broadcast-create .picuploader-img .icon_close_white {
    top: -1px;
    right: -1px;
    width: 16px;
    height: 16px;
    background-image: url(../img/icon_live_notice_close@2x.0eea608f.png)
}

.community2-broadcast-create .picuploader-img span {
    color: #8b969f
}

.community2-broadcast-create-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10
}

.community2-broadcast-create-panel .panel-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-animation: slideInBottom .3s;
    animation: slideInBottom .3s;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#304051),to(#1e2831));
    background-image: linear-gradient(180deg,#304051,#1e2831);
    box-shadow: 0 -1px 0 0 rgba(180,192,201,.2);
    border-radius: 16px 16px 0 0
}

.community2-broadcast-create-panel .panel-title {
    line-height: 52px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #b4c0c9
}

.community2-broadcast-create-panel .panel-close {
    position: absolute;
    top: 14px;
    right: 16px
}

.community2-broadcast-create-panel .panel-btns {
    padding: 0 24px 32px 24px;
    padding-bottom: -webkit-calc(32px + constant(safe-area-inset-bottom));
    padding-bottom: calc(32px + constant(safe-area-inset-bottom));
    padding-bottom: -webkit-calc(32px + env(safe-area-inset-bottom));
    padding-bottom: calc(32px + env(safe-area-inset-bottom))
}

.community2-broadcast-create-panel .panel-btns li {
    line-height: 56px;
    border-bottom: 1px solid hsla(0,0%,100%,.1)
}

.community2-broadcast-create-panel .panel-btns li .icon {
    width: 30px;
    height: 30px;
    background-color: rgba(30,40,49,.5);
    background-size: 20px 20px;
    background-position: 50%;
    background-repeat: no-repeat;
    border: .5px solid #1e2831;
    border-radius: 50%
}

.community2-broadcast-create-panel .panel-btns li span {
    margin-left: 8px;
    font-size: 14px;
    color: #b4c0c9
}

.community2-broadcast-create-topic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0,0,0,.6)
}

.community2-broadcast-create-topic .topic-panel-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90vh;
    height: -webkit-calc(90vh - 60px - constant(safe-area-inset-top));
    height: calc(90vh - 60px - constant(safe-area-inset-top));
    height: -webkit-calc(90vh - 60px - env(safe-area-inset-top));
    height: calc(90vh - 60px - env(safe-area-inset-top));
    -webkit-animation: slideInBottom .3s;
    animation: slideInBottom .3s;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#304051),to(#1e2831));
    background-image: linear-gradient(180deg,#304051,#1e2831);
    box-shadow: 0 -1px 0 0 rgba(180,192,201,.2);
    border-radius: 16px 16px 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.community2-broadcast-create-topic .topic-panel-title {
    min-height: 52px;
    line-height: 52px;
    border-bottom: 1px solid hsla(0,0%,100%,.08);
    text-align: center;
    font-size: 16px;
    color: #b4c0c9
}

.community2-broadcast-create-topic .topic-panel-close {
    position: absolute;
    top: 14px;
    right: 16px
}

.community2-broadcast-create-topic .topic-panel-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: auto
}

.community2-broadcast-create-topic .topic-panel-content ul {
    padding: 24px 16px
}

.community2-broadcast-create-topic .topic-panel-content li {
    background: rgba(30,40,49,.5);
    border: 1px solid #1e2831;
    border-radius: 12px;
    margin-bottom: 12px
}

.community2-broadcast-create-topic .topic-panel-content li:last-child {
    margin-bottom: 0
}

.community2-broadcast-create-topic .topic-panel-top {
    background-size: cover;
    background-position: 50%;
    border-radius: 12px
}

.community2-broadcast-create-topic .topic-panel-wrap {
    padding: 24px 12px;
    background-image: -webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.3)));
    background-image: linear-gradient(270deg,rgba(0,0,0,.05),rgba(0,0,0,.3));
    border-radius: 12px
}

.community2-broadcast-create-topic .topic-panel-name {
    line-height: 25px;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 0 8px rgba(30,40,49,.5);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.community2-broadcast-create-topic .topic-panel-label {
    margin-top: 4px
}

.community2-broadcast-create-topic .topic-panel-label span {
    padding: 1px 8px;
    margin-right: 4px;
    background: rgba(30,40,49,.3);
    border-radius: 12px;
    font-size: 12px;
    color: hsla(0,0%,100%,.7)
}

.community2-broadcast-create-topic .topic-panel-label span:last-child {
    margin-right: 0
}

.community2-broadcast-create-topic .topic-panel-bottom {
    padding: 8px 12px;
    line-height: 17px;
    font-size: 12px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.community2-publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    bottom: env(safe-area-inset-bottom);
    z-index: 104;
    width: 100%;
    height: 80px;
    padding-top: 16px;
    box-sizing: border-box;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,0)),to(rgba(40,51,61,.5)));
    background-image: linear-gradient(180deg,rgba(40,51,61,0),rgba(40,51,61,.5));
    pointer-events: none;
    text-align: center
}

.community2-publish-wrap .community2-broadcast-create {
    pointer-events: auto
}

.community2-publishbtn {
    width: 140px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    box-shadow: 0 2px 30px 0 rgba(7,171,127,.3);
    display: block;
    margin: 0 auto;
    pointer-events: auto
}

.community2-publishbtn i {
    width: 20px;
    height: 20px;
    margin-right: 2px
}

.live-community2 .community2-publish-wrap {
    bottom: 56px;
    bottom: -webkit-calc(56px + env(safe-area-inset-bottom));
    bottom: calc(56px + env(safe-area-inset-bottom))
}

.publishbtn-keepbar.community2-publish-wrap {
    bottom: 120px;
    bottom: -webkit-calc(120px + env(safe-area-inset-bottom));
    bottom: calc(120px + env(safe-area-inset-bottom))
}

.live-community2 .community2-publish-wrap.community2-publish-wrap-bottom {
    bottom: 112px;
    bottom: -webkit-calc(112px + env(safe-area-inset-bottom));
    bottom: calc(112px + env(safe-area-inset-bottom))
}

.publishbtn-keepbar.community2-publish-wrap.community2-publish-wrap-bottom {
    bottom: 176px;
    bottom: -webkit-calc(176px + env(safe-area-inset-bottom));
    bottom: calc(176px + env(safe-area-inset-bottom))
}

@media only screen and (max-height: 720px) {
    .live-community2 .community2-publish-wrap {
        bottom:46px;
        bottom: -webkit-calc(46px + env(safe-area-inset-bottom));
        bottom: calc(46px + env(safe-area-inset-bottom))
    }

    .publishbtn-keepbar.community2-publish-wrap {
        bottom: 110px;
        bottom: -webkit-calc(110px + env(safe-area-inset-bottom));
        bottom: calc(110px + env(safe-area-inset-bottom))
    }

    .live-community2 .community2-publish-wrap.community2-publish-wrap-bottom {
        bottom: 102px;
        bottom: -webkit-calc(102px + env(safe-area-inset-bottom));
        bottom: calc(102px + env(safe-area-inset-bottom))
    }

    .publishbtn-keepbar.community2-publish-wrap.community2-publish-wrap-bottom {
        bottom: 176px;
        bottom: -webkit-calc(176px + env(safe-area-inset-bottom));
        bottom: calc(176px + env(safe-area-inset-bottom))
    }
}

.community2-broadcast-create-editor {
    position: relative;
    min-height: 24px;
    word-break: break-all;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    line-height: 24px;
    font-size: 16px;
    color: #fff
}

.community2-broadcast-create-editor.has-placeholder {
    color: #b4c0c9
}

.community2-broadcast-create-editor.has-placeholder:before {
    content: attr(placeholder);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.community2-broadcast-create-editor font {
    color: #fff!important
}

.community2-broadcast-create-editor strong {
    font-weight: 400;
    color: #03c47e!important
}

.page-topic .fixedbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
    background-image: url(../img/pic_topic_top_default@2x.8db50f46.png)
}

.page-topic .topnav .topnav-fixed {
    position: relative;
    background: none
}

.page-topic .topnav .topnav-fixed h1 {
    text-align: left;
    margin-left: 20px;
    text-shadow: 0 0 8px rgba(0,0,0,.35)
}

.page-topic .topic-header {
    padding: 0 16px;
    position: relative;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.page-topic .topic-title {
    font-size: 20px;
    text-shadow: 0 0 8px rgba(0,0,0,.35);
    font-weight: 500
}

.page-topic .topic-lable {
    margin: 0 0 12px
}

.page-topic .topic-lable span {
    background: rgba(30,40,49,.3);
    border-radius: 12px;
    font-size: 12px;
    color: hsla(0,0%,100%,.7);
    padding: 1px 8px;
    margin-right: 4px
}

.page-topic .topic-content {
    padding: 0 16px;
    overflow: hidden;
    position: relative;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.page-topic .topic-content .community2-last {
    margin-bottom: 104px
}

.page-topic .topic-desc {
    margin-top: 16px;
    background-image: linear-gradient(153deg,#40515f,#304051 95%);
    border-radius: 12px
}

.page-topic .topic-desc>div {
    padding: 1px;
    border-radius: 12px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(28,28,30,.08)),to(hsla(0,0%,100%,.08)));
    background-image: linear-gradient(rgba(28,28,30,.08),hsla(0,0%,100%,.08))
}

.page-topic .topic-desc>div>div {
    padding: 12px;
    border-radius: 12px;
    background-image: linear-gradient(153deg,#40515f,#304051 95%)
}

.page-topic .topic-desc p {
    font-size: 12px;
    color: #b4c0c9
}

.page-topic .topic-desc p:first-child {
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
    font-weight: 700
}

.related-topic {
    margin-top: 16px
}

.related-topic .related-topic-title {
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    margin-left: 12px
}

.related-topic .related-topic-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 6px;
    position: relative
}

.related-topic .related-topic-content:after,.related-topic .related-topic-content:before {
    content: "";
    width: 16px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0
}

.related-topic .related-topic-content:before {
    left: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.related-topic .related-topic-content:after,.related-topic .related-topic-content:before {
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(40,51,61,0)),to(#28333d));
    background-image: linear-gradient(90deg,rgba(40,51,61,0),#28333d)
}

.related-topic .related-topic-content:after {
    right: 0
}

.related-topic .related-topic-content.hideLeftShadow:before,.related-topic .related-topic-content.hideRightShadow:after {
    opacity: 0
}

.related-topic .related-topic-content ul {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden
}

.related-topic .related-topic-content ul::-webkit-scrollbar {
    display: none
}

.related-topic .related-topic-content li {
    width: 166px;
    height: 40px;
    min-width: 166px;
    margin-right: 6px;
    padding: 0 12px;
    background-image: linear-gradient(153deg,#40515f,#304051 95%);
    border-radius: 12px;
    border: 1px solid hsla(0,0%,100%,.1);
    font-size: 12px;
    color: #b4c0c9;
    box-sizing: border-box;
    line-height: 38px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.related-topic .related-topic-content li span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.topic-type {
    margin: 16px 0 12px 12px
}

.topic-type .on {
    color: #03c47e;
    font-weight: 700
}

.topic-type span {
    font-size: 14px;
    color: #b4c0c9;
    margin-right: 8px
}

.live-community-comment button {
    padding: 0;
    line-height: 1;
    text-align: center;
    border: 0
}

.live-community-comment.status-fixed .comment-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    pointer-events: none;
    overflow: hidden;
    -webkit-transition: background-color .3s;
    transition: background-color .3s
}

.live-community-comment.status-fixed .comment-main {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    pointer-events: auto;
    border-radius: 16px 16px 0 0
}

.live-community-comment.status-fixed .comment-main:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    z-index: 10;
    width: 36px;
    height: 5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: hsla(0,0%,100%,.08);
    border-radius: 2.5px
}

.live-community-comment.status-full .comment-bg {
    pointer-events: auto;
    background: rgba(0,0,0,.6)
}

.live-community-comment.status-full .comment-main .live-community-comment-list,.live-community-comment.status-full .comment-main .live-community-like-list {
    overflow: auto
}

.live-community-comment.status-animation .comment-main {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s
}

.live-community-comment .comment-main {
    position: relative;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#304051),to(#1e2831));
    background-image: linear-gradient(180deg,#304051,#1e2831);
    box-shadow: 0 -1px 0 0 rgba(180,192,201,.2);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.live-community-comment .comment-main .live-community-comment-list,.live-community-comment .comment-main .live-community-like-list {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding-bottom: 58px;
    padding-bottom: -webkit-calc(58px + constant(safe-area-inset-bottom));
    padding-bottom: calc(58px + constant(safe-area-inset-bottom));
    padding-bottom: -webkit-calc(58px + env(safe-area-inset-bottom));
    padding-bottom: calc(58px + env(safe-area-inset-bottom))
}

.live-community-comment .comment-main .sticky.fixed-status .live-community-comment-tabs {
    background-color: #304051
}

.live-community-comment .comment-panel-text {
    line-height: 40px;
    border-bottom: 1px solid hsla(0,0%,100%,.08);
    font-size: 12px;
    color: #8b969f;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.live-community-comment-tabs {
    position: relative;
    padding: 0 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.live-community-comment-tabs:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: hsla(0,0%,100%,.08);
    border-radius: .5px
}

.live-community-comment-tabs li {
    position: relative;
    line-height: 20px;
    margin-right: 24px;
    padding: 18px 0 6px 0;
    -webkit-transition: color .3s;
    transition: color .3s;
    font-size: 14px;
    color: #b4c0c9
}

.live-community-comment-tabs li:last-child {
    margin-right: 0
}

.live-community-comment-tabs li:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 24px;
    height: 3px;
    border-radius: 1.5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all .3s;
    transition: all .3s
}

.live-community-comment-tabs li span {
    margin-left: 1px;
    font-size: 12px;
    color: #b4c0c9
}

.live-community-comment-tabs li.active {
    font-weight: 700;
    color: #fff
}

.live-community-comment-tabs li.active span {
    color: #b4c0c9
}

.live-community-comment-tabs li.active:after {
    background: #03c47e;
    box-shadow: 0 0 10px 0 #03c47e
}

.live-community-comment-list,.live-community-like-list {
    position: relative
}

.live-community-comment-list .empty-status,.live-community-like-list .empty-status {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding-bottom: 58px;
    padding-bottom: -webkit-calc(58px + constant(safe-area-inset-bottom));
    padding-bottom: calc(58px + constant(safe-area-inset-bottom));
    padding-bottom: -webkit-calc(58px + env(safe-area-inset-bottom));
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
    box-sizing: border-box
}

.live-community-comment-list .empty-status p,.live-community-like-list .empty-status p {
    margin-top: 16px;
    line-height: 24px;
    font-size: 14px;
    color: #b4c0c9
}

.live-community-comment-list .finish-status,.live-community-like-list .finish-status {
    line-height: 65px;
    text-align: center;
    font-size: 12px;
    color: #8b969f
}

.live-community-comment-item>li,.live-community-comment-item ul>li,.live-community-comment-subitem>li,.live-community-comment-subitem ul>li {
    position: relative;
    padding-bottom: 12px
}

.live-community-comment-item>li.press-status,.live-community-comment-item ul>li.press-status,.live-community-comment-subitem>li.press-status,.live-community-comment-subitem ul>li.press-status {
    background: rgba(8,8,8,.2)
}

.live-community-comment-item>li:after,.live-community-comment-item ul>li:after,.live-community-comment-subitem>li:after,.live-community-comment-subitem ul>li:after {
    content: "";
    position: absolute;
    left: 64px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background-color: hsla(0,0%,100%,.08)
}

.live-community-comment-item .row-wrap,.live-community-comment-subitem .row-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 24px 16px 0 16px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.live-community-comment-item .user-info,.live-community-comment-subitem .user-info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 8px
}

.live-community-comment-item .user-row,.live-community-comment-subitem .user-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.live-community-comment-item .user-row .user-col,.live-community-comment-subitem .user-row .user-col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 0
}

.live-community-comment-item .user-like,.live-community-comment-subitem .user-like {
    height: 24px;
    padding: 0 8px;
    background: hsla(0,0%,100%,.08);
    border: 0;
    border-radius: 12px;
    font-size: 12px;
    color: #b4c0c9
}

.live-community-comment-item .user-like .icon,.live-community-comment-subitem .user-like .icon {
    width: 16px;
    height: 16px;
    vertical-align: middle
}

.live-community-comment-item .user-like span,.live-community-comment-subitem .user-like span {
    margin-left: 2px;
    vertical-align: middle
}

.live-community-comment-item .user-like.active,.live-community-comment-subitem .user-like.active {
    color: #ff5b77
}

.live-community-comment-item .user-name,.live-community-comment-item .user-time,.live-community-comment-subitem .user-name,.live-community-comment-subitem .user-time {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 17px;
    font-size: 12px;
    color: #8b969f
}

.live-community-comment-item .user-text,.live-community-comment-subitem .user-text {
    white-space: pre-wrap;
    margin-top: 4px;
    line-height: 24px;
    font-size: 14px;
    color: #fff;
    word-break: break-all
}

.live-community-comment-item .user-text i,.live-community-comment-subitem .user-text i {
    margin-left: 2px
}

.live-community-comment-item .user-img,.live-community-comment-subitem .user-img {
    margin-top: 4px
}

.live-community-comment-item .user-img img,.live-community-comment-subitem .user-img img {
    width: 105px;
    height: 105px;
    border: 1px solid rgba(30,40,49,.8);
    border-radius: 12px;
    object-fit: cover;
    background-color: rgba(139,150,159,.15);
    background-image: url(../img/icon_pic_FailToLoad_20_grey@2x.29771e39.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 50%
}

.live-community-comment-item .user-tag,.live-community-comment-subitem .user-tag {
    line-height: 19.2px;
    padding: 0 4px;
    background: rgba(139,150,159,.15);
    border-radius: 6px;
    -webkit-transform: scale(.83333333);
    transform: scale(.83333333);
    -webkit-transform-origin: center;
    transform-origin: center;
    display: inline-block;
    font-size: 12px;
    color: rgba(139,150,159,.93)
}

.live-community-comment-subitem {
    margin-top: 8px
}

.live-community-comment-subitem ul>li {
    padding-bottom: 0
}

.live-community-comment-subitem ul>li:after {
    display: none
}

.live-community-comment-subitem .row-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-top: 8px;
    padding-left: 64px;
    padding-bottom: 8px
}

.live-community-comment-subitem .icon_replyto {
    margin-left: 2px;
    margin-right: 1px;
    vertical-align: 0
}

.live-community-comment-subitem .btn-show-all {
    margin-top: 8px;
    padding-left: 96px;
    line-height: 20px;
    font-size: 14px;
    color: rgba(3,196,126,.75)
}

.live-community-like-item>li {
    padding: 24px 16px 0 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.live-community-like-item .user-info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 8px;
    border-bottom: 1px solid hsla(0,0%,100%,.08);
    padding-bottom: 12px
}

.live-community-like-item .user-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.live-community-like-item .user-row .user-col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 0
}

.live-community-like-item .user-name,.live-community-like-item .user-time {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    font-size: 12px;
    color: #8b969f
}

.live-community-like-item .user-name {
    line-height: 24px;
    color: #fff
}

.live-community-like-item .user-text {
    margin-top: 4px;
    line-height: 24px;
    font-size: 14px;
    color: #fff
}

.live-community-like-item .user-text i {
    margin-left: 2px
}

.live-community-like-item .user-tag {
    line-height: 19.2px;
    padding: 0 4px;
    background: rgba(139,150,159,.15);
    border-radius: 6px;
    -webkit-transform: scale(.83333333);
    transform: scale(.83333333);
    -webkit-transform-origin: center;
    transform-origin: center;
    display: inline-block;
    font-size: 12px;
    color: rgba(139,150,159,.93)
}

.live-community-like-item .user-like {
    width: 16px;
    height: 16px
}

.live-community-comment-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 102;
    background: #222d37;
    box-shadow: 0 -1px 0 0 rgba(180,192,201,.2),0 0 30px 0 rgba(0,0,0,.2);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom)
}

.live-community-comment-bar .status-static-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.live-community-comment-bar .status-static-bar:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    z-index: 10;
    width: 36px;
    height: 5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: hsla(0,0%,100%,.08);
    border-radius: 2.5px
}

.live-community-comment-bar .status-static-bar .bar-col {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    line-height: 58px;
    text-align: center;
    font-size: 14px;
    color: #b4c0c9
}

.live-community-comment-bar .status-static-bar .bar-col i {
    margin-right: 2px
}

.live-community-comment-bar .status-static-bar .bar-col.active {
    color: #ff5b77
}

.live-community-comment-bar .status-static-bar .bar-col:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    opacity: .4;
    background: hsla(0,0%,100%,.08);
    border-radius: .5px
}

.live-community-comment-bar .status-static-bar .bar-col:last-child:after {
    display: none
}

.live-community-comment-bar .status-reply-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 9px 16px 9px 16px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.live-community-comment-bar .status-reply-bar .reply-tips {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-right: 16px;
    height: 40px;
    line-height: 40px;
    background: #304051;
    padding: 0 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #b4c0c9
}

.live-community-comment-bar .status-reply-bar .reply-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #304051;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: 50%
}

.live-community-comment-bar .status-reply-bar .reply-btn.icon_edit_like_unselected {
    margin-right: 16px
}

.live-community-comment-create {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 103;
    background: #222d37;
    box-shadow: 0 -1px 0 0 rgba(180,192,201,.2),0 0 30px 0 rgba(0,0,0,.2);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.live-community-comment-create .nav-bar {
    min-height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background: #1e2831;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-left: 16px;
    padding-right: 16px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.live-community-comment-create .nav-bar button {
    width: 64px;
    height: 28px;
    background: #03c47e;
    border-radius: 14px;
    font-weight: 700;
    font-size: 12px;
    color: #fff
}

.live-community-comment-create .nav-bar button[disabled] {
    background-color: transparent;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,.9)),color-stop(98%,rgba(77,98,117,.9)));
    background-image: linear-gradient(180deg,rgba(40,51,61,.9),rgba(77,98,117,.9) 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    color: #b4c0c9
}

.live-community-comment-create .btn-bar {
    min-height: 52px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid rgba(180,192,201,.1);
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.live-community-comment-create .reply-content {
    padding: 24px 16px 12px 16px;
    box-sizing: border-box;
    font-size: 0
}

.live-community-comment-create .reply-content .autoheight-textarea {
    min-height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #fff
}

.live-community-comment-create .reply-content .autoheight-textarea::-webkit-input-placeholder {
    color: #b4c0c9
}

.live-community-comment-create .reply-content .autoheight-textarea::-moz-placeholder,.live-community-comment-create .reply-content .autoheight-textarea::-ms-input-placeholder,.live-community-comment-create .reply-content .autoheight-textarea::-webkit-input-placeholder,.live-community-comment-create .reply-content .autoheight-textarea::placeholder {
    color: #b4c0c9
}

.live-community-comment-create .reply-wrap {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: auto;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right)
}

.live-community-comment-create .reply-wrap::-webkit-scrollbar {
    display: none
}

.live-community-comment-create .reply-img-wrap {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden
}

.live-community-comment-create .reply-img-wrap .icon {
    position: absolute;
    top: 0;
    right: 0
}

.live-community-comment-create .reply-img {
    padding: 0 16px 16px 16px
}

.live-community-comment-create .reply-img img {
    width: 172px;
    height: 172px;
    object-fit: cover;
    border: .5px solid hsla(0,0%,100%,.4);
    border-radius: 8px
}

.c-img-preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: #000;
    -webkit-animation: fadeIn .3s;
    animation: fadeIn .3s;
    overflow: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.c-img-preview img {
    max-width: 100%;
    max-height: 100%
}

.reset .reset-main .resetpc-btn {
    text-align: center;
    margin-top: 24px
}

.reset .reset-main .resetpc-btn div {
    margin-top: 14px
}

.reset .reset-main .resetpc-btn button {
    width: 100%
}

.reset .reset-main .resetpc-btn .g-Btn-grey {
    border: 1px solid
}

.frametips-confirm .cofirm {
    -webkit-transform: none!important;
    transform: none!important
}

.frametips-confirm .cofirm-btns {
    margin-top: 20px
}

.frametips-confirm .cofirm-btns .g-Btn {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 0 10px;
    text-align: center;
    font-size: 14px;
    max-width: 50%;
    overflow: visible!important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.frametips-confirm .cofirm-btns .g-Btn .g-tag-gold {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f3e1ba),to(#e4bf84));
    background-image: linear-gradient(180deg,#f3e1ba,#e4bf84);
    color: #664a1a
}

.frametips-confirm .cofirm-btns .g-Btn .g-tag-gold,.frametips-confirm .cofirm-btns .g-Btn .g-tag-orange {
    position: absolute;
    top: -7px;
    right: -1px;
    padding: 0 4px;
    border-radius: 6px 6px 6px 0;
    font-family: PingFangSC-Semibold;
    font-size: 10px;
    text-shadow: 0 0 2px rgba(0,0,0,.2);
    font-weight: 600;
    height: 14px;
    line-height: 14px
}

.frametips-confirm .cofirm-btns .g-Btn .g-tag-orange {
    background-image: linear-gradient(225deg,#f97269,#ffa786);
    color: #fff
}

.InTransLandscape .frametips-confirm .cofirm {
    max-width: 382px;
    min-width: 320px
}

.topiccommend {
    position: relative;
    margin-top: 24px
}

.topiccommend .swiper-left-bg:before,.topiccommend .swiper-right-bg:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;
    height: 192px;
    z-index: 2;
    opacity: .8;
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(30,40,49,0)),to(#1e2831));
    background-image: linear-gradient(90deg,rgba(30,40,49,0),#1e2831)
}

.topiccommend .swiper-left-bg:before {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    left: 0;
    right: auto
}

.topiccommend .swiper-container {
    width: 100%
}

.topiccommend h2 {
    margin-bottom: 12px
}

.topiccommend .topiccommend-pagination {
    top: 2px;
    right: 0
}

.topiccommend .topiccommend-pagination span {
    background-color: #fff;
    width: 6px;
    height: 6px;
    margin-left: 4px
}

.topiccommend .topiccommend-pagination span.swiper-pagination-bullet-active {
    background-color: #fff
}

.topiccommend-item {
    width: 225px!important;
    height: 56px!important;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 12px;
    background: url(../img/pic_topic_top_default@2x.8db50f46.png) no-repeat;
    background-size: 225px;
    background-clip: border-box;
    margin: 0 0 8px 0;
    background-position: 50%;
    position: relative;
    margin-top: 0!important
}

.topiccommend-item:after {
    content: "";
    width: 225px;
    height: 56px;
    position: absolute;
    top: -1px;
    left: -1px;
    background-image: -webkit-gradient(linear,right top,left top,from(rgba(30,40,49,.4)),to(rgba(30,40,49,.7)));
    background-image: linear-gradient(270deg,rgba(30,40,49,.4),rgba(30,40,49,.7));
    border-radius: 12px
}

.topiccommend-item .topiccommend-title {
    font-size: 14px;
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,.6);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 1
}

.topiccommend-item .topiccommend-desc {
    font-size: 12px;
    color: hsla(0,0%,100%,.7);
    text-shadow: 0 0 4px rgba(0,0,0,.5);
    font-weight: 400;
    position: relative;
    z-index: 1
}

.topiccommend-item .topiccommend-desc i {
    border: 1px solid hsla(0,0%,100%,.08);
    height: 10px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 4px 0
}

.slide-coupons {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent
}

.slide-coupons button {
    padding: 0;
    border: 0
}

.slide-coupons-mobile .coupons-con {
    margin-top: 35%;
    height: 70%;
    overflow-y: auto
}

.slide-coupons-mobile .coupons-item {
    margin: 0 12px 8px;
    height: 72px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.slide-coupons-mobile .coupons-money {
    width: 30%;
    color: #e35043;
    font-size: 20px;
    font-weight: 600;
    text-align: center
}

.slide-coupons-mobile .coupons-money span {
    font-size: 28px
}

.slide-coupons-mobile .coupons-money p:last-child {
    font-size: 12px;
    color: #939393;
    text-align: center;
    font-weight: 400
}

.slide-coupons-mobile .coupons-desc {
    width: 47%;
    margin-left: 3%;
    font-size: 14px;
    color: #131a3b;
    font-weight: 500
}

.slide-coupons-mobile .coupons-desc p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.slide-coupons-mobile .coupons-desc p:last-child {
    font-size: 12px;
    color: #939393;
    font-weight: 400
}

.slide-coupons-mobile button {
    background: #e35043;
    border-radius: 15.4px;
    width: 48px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-weight: 500
}

.slide-coupons-pc {
    padding: 0 40px
}

.slide-coupons-pc .coupons-con {
    margin-top: 155px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.slide-coupons-pc .coupons-con.more {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 150px;
    overflow-y: auto
}

.slide-coupons-pc .coupons-item {
    width: 216px;
    min-width: 216px;
    height: 149px;
    margin-right: 16px;
    margin-bottom: 8px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer
}

.slide-coupons-pc .coupons-item:nth-of-type(3n) {
    margin-right: 0
}

.slide-coupons-pc.mobile .coupons-con {
    margin-top: 23%
}

.slide-coupons-pc.mobile .coupons-item {
    min-width: auto;
    height: 87%
}

.slide-coupons-pc.mobile .coupons-item button {
    margin-top: 0
}

.slide-coupons-pc .coupons-money {
    color: #e35043;
    font-size: 20px;
    font-weight: 600;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline
}

.slide-coupons-pc .coupons-money span {
    font-size: 40px
}

.slide-coupons-pc .coupons-money p:last-child {
    font-size: 12px;
    color: #939393;
    text-align: center;
    font-weight: 400;
    margin-left: 4.5px
}

.slide-coupons-pc .coupons-desc {
    font-size: 16px;
    color: #131a3b;
    font-weight: 500;
    text-align: center
}

.slide-coupons-pc .coupons-desc p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.slide-coupons-pc .coupons-desc p:last-child {
    font-size: 12px;
    color: hsla(0,0%,57.6%,.5);
    font-weight: 400
}

.slide-coupons-pc button {
    margin: 22px auto 0;
    font-size: 14px;
    color: #fe2f18;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;
    display: block;
    background: none
}

.map-new.flyme.new:before {
    content: "\5730\56FE\5DE5\5177   NEW";
    position: absolute;
    top: -10px;
    left: 75%;
    width: auto;
    height: 20px;
    line-height: 20px;
    border-radius: 4px 4px 4px 0;
    white-space: nowrap;
    word-break: keep-all;
    text-align: center;
    font-size: 12px;
    padding: 0 4px 0 18px;
    background-color: #04ba66;
    background-image: url(../img/mobileicon_CP_maptool_normal_54_white@2x.0fa4e175.png);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: 5px;
    font-weight: 700
}

.map-new.flyme.new.right:before {
    left: auto;
    right: 100%;
    border-radius: 6px 6px 0 6px
}

.iframe-box {
    position: absolute;
    z-index: 90
}

.iframe-box.map-iframe {
    left: 0;
    top: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.iframe-box.map-iframe iframe {
    width: 100%;
    height: 100%;
    border: .5px solid hsla(0,0%,100%,.4);
    border-radius: 16px
}

.iframe-box.map-iframe iframe.map-drag {
    border: 2px solid #03c47e;
    pointer-events: none
}

.iframe-box .map-drag-bar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 12;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    height: 16px;
    background: rgba(0,0,0,.2);
    border-radius: 16px 16px 0 0
}

.iframe-box .map-drag-bar.map-drag {
    background: rgba(0,0,0,.5)
}

.iframe-box .map-drag-bar.map-drag:before {
    background: #03c47e
}

.iframe-box .map-drag-bar:before {
    content: "";
    width: 40px;
    height: 2px;
    display: inline-block;
    background: hsla(0,0%,100%,.3);
    box-shadow: 0 0 6px 0 rgba(0,0,0,.3);
    border-radius: 3px
}

.iframe-box .map-resize-bg {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 2px solid #03c47e;
    border-radius: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #1e2831
}

.iframe-box .map-resize-bg span {
    display: inline-block;
    background: rgba(0,0,0,.5);
    border: .5px solid hsla(0,0%,100%,.1);
    border-radius: 6px;
    line-height: 16px;
    padding: 4px 10px;
    font-size: 11px;
    color: #fff
}

.iframe-box .map-disable-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    background: rgba(0,0,0,.5)
}

.iframe-box .map-resize-area {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 12;
    padding-right: 6px;
    padding-bottom: 6px;
    width: 48px
}

.iframe-box .map-resize-area.small-area {
    width: auto
}

.iframe-box .map-resize-btn {
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: rgba(40,51,61,.9);
    border: 1px solid rgba(40,51,61,.75);
    border-radius: 10px;
    box-sizing: border-box
}

.iframe-box .map-resize-btn:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border: 1px solid hsla(0,0%,100%,.25);
    border-radius: 8px;
    box-sizing: border-box
}

.iframe-box .shade-safe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.iframe-box .shade-safe .safe-top {
    position: absolute;
    width: constant(safe-area-inset-top);
    width: env(safe-area-inset-top)
}

.iframe-box .shade-safe .safe-left {
    position: absolute;
    width: constant(safe-area-inset-left);
    width: env(safe-area-inset-left)
}

.iframe-box .shade-safe .safe-right {
    position: absolute;
    width: constant(safe-area-inset-right);
    width: env(safe-area-inset-right)
}

.iframe-box .shade-safe .safe-bottom {
    position: absolute;
    width: constant(safe-area-inset-bottom);
    width: env(safe-area-inset-bottom)
}

.transparent-confirm-wrap {
    background: transparent;
    pointer-events: none
}

.transparent-confirm-wrap .cofirm {
    pointer-events: all
}

.map-sub-iframe {
    width: auto!important;
    height: auto!important;
    min-width: auto!important
}

.map-sub-iframe .cofirm-cont {
    border-radius: 8px;
    overflow: hidden
}

.pagelive-pc .roomlist li,.search-pclive .roomlist li {
    width: 352px;
    margin: 0 0 24px 0;
    padding: 0 12px 0;
    width: 25%;
    background: none;
    box-sizing: border-box;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    position: relative
}

.pagelive-pc .roomlist li:after,.search-pclive .roomlist li:after {
    content: "";
    position: absolute;
    padding: 12px;
    border: .5px solid transparent;
    left: 12px;
    top: 0;
    box-sizing: border-box;
    border-radius: 4px;
    right: 12px;
    bottom: 0
}

.pagelive-pc .roomlist li:hover,.search-pclive .roomlist li:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.pagelive-pc .roomlist li:hover .info,.search-pclive .roomlist li:hover .info {
    background: #304051;
    border-top: 0
}

.pagelive-pc .roomlist li:hover .cover,.search-pclive .roomlist li:hover .cover {
    border-bottom: 0
}

.pagelive-pc .roomlist li:hover:after,.search-pclive .roomlist li:hover:after {
    box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
    border-color: hsla(0,0%,100%,.4)
}

.pagelive-pc .roomlist li:hover .count,.search-pclive .roomlist li:hover .count {
    font-size: 15px
}

.pagelive-pc .roomlist li .bar,.search-pclive .roomlist li .bar {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: #fff
}

.pagelive-pc .roomlist li .bar .view,.search-pclive .roomlist li .bar .view {
    position: absolute;
    bottom: -58px;
    right: 12px;
    color: #8b969f
}

.pagelive-pc .roomlist li .bar .game,.search-pclive .roomlist li .bar .game {
    font-weight: 400
}

.pagelive-pc .roomlist li .cover,.search-pclive .roomlist li .cover {
    box-sizing: border-box
}

.pagelive-pc .roomlist li .info,.search-pclive .roomlist li .info {
    padding: 8px 12px;
    background: #28333d;
    border-radius: 0 0 4px 4px
}

.pagelive-pc .roomlist li .name,.search-pclive .roomlist li .name {
    font-size: 14px;
    font-weight: 400
}

.pagelive-pc .roomlist li .user img,.search-pclive .roomlist li .user img {
    width: 24px;
    height: 24px;
    margin-right: 6px;
    border: 1px solid hsla(0,0%,100%,.1)
}

.pagelive-pc .roomlist li .user span,.search-pclive .roomlist li .user span {
    font-size: 14px;
    color: #8b969f;
    margin-top: -2px
}

.pagelive-pc .roomlist li .tag,.search-pclive .roomlist li .tag {
    width: 72px;
    height: 24px
}

.pagelive-pc .subnav-pc {
    height: 40px;
    margin-top: 36px
}

.pagelive-pc .subnavBox h2 {
    font-size: 14px
}

.pagelive-pc .pagegame>aside {
    min-width: 200px;
    margin-right: 38px
}

.pagelive-pc .right {
    margin: 0 -12px 0 -12px;
    width: 100%
}

.pagelive-pc .liveroom-tips {
    margin: 32px auto 50px;
    text-align: center;
    font-size: 14px;
    color: #8b969f
}

.pagelive-pc .topic>div {
    height: 70px;
    font-size: 13px
}

.pagelive-pc .createroom {
    margin-left: 24px;
    width: 140px;
    height: 40px;
    line-height: 41px;
    background: #03c47e;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    border: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer
}

.pagelive-pc .createroom i {
    margin-right: 8px
}

.pcpagesearch {
    position: relative
}

.pcpagesearch .subnav {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    top: -59px;
    left: 64px
}

.pcpagesearch .subnav span {
    color: hsla(0,0%,100%,.5)
}

.pcpagesearch .subnav h2 {
    margin: 0 0 0 16px
}

.pcpagesearch .roomlist li {
    width: 20%
}

.search-pclive {
    margin: 0 -12px 0 -12px;
    padding-top: 56px
}

.search-pclive .roomlist li:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

@media only screen and (max-width: 1440px) {
    .pagelive-pc .roomlist li {
        width:33.33333%
    }

    .search-pclive .roomlist li {
        width: 25%
    }
}

@media only screen and (max-width: 1024px) {
    .pagelive-pc .pagegame>aside {
        margin-right:20px
    }

    .pagelive-pc .roomlist li {
        width: 50%
    }

    .search-pclive .roomlist li {
        width: 33.33333%
    }
}

@media only screen and (max-width: 768px) {
    .pagelive-pc .pagegame>aside {
        margin-right:10px
    }

    .subnav-pc-search {
        position: relative
    }

    .subnav-pc-search .subnavBox2 {
        position: absolute;
        left: 0;
        top: -23px;
        border: 0
    }

    .pcpagesearch .subnav {
        top: -98px
    }

    .search-pclive .roomlist li {
        width: 50%
    }
}

@media only screen and (max-width: 650px) {
    .pagelive-pc .roomlist li {
        width:100%
    }
}

@media only screen and (max-width: 414px) {
    .pagelive-pc .pagegame>aside {
        min-width:152px;
        margin-right: 15px
    }

    .pagelive-pc .roomlist li,.search-pclive .roomlist li {
        width: 100%
    }
}

.pcMoonthCard .gamecard-item {
    background-image: url(../img/bg_gamecard_normal@3x.90815d03.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    padding: 4px 16px 6px;
    margin-bottom: 16px;
    box-sizing: border-box
}

.pcMoonthCard .gamecard-item.gamecard-hide-bg {
    background-image: url(../img/bg_gamecard_advanced@3x.22e2e039.png)
}

.pcMoonthCard .gamecard-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: -webkit-calc(100% - 4px);
    width: calc(100% - 4px);
    height: -webkit-calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 12px;
    border: 2px solid transparent
}

.pcMoonthCard .gamecard-item.on:before {
    border-color: #fae9d7
}

.pcMoonthCard .gamecard-item-extra {
    position: absolute;
    left: 16px;
    top: 4px;
    color: hsla(0,0%,100%,.7);
    letter-spacing: 0;
    font-size: 12px;
    -webkit-transform: scale(.95);
    transform: scale(.95);
    -webkit-transform-origin: left;
    transform-origin: left
}

.pcMoonthCard .gamecard-item-tag {
    position: absolute;
    right: 16px;
    top: 16px;
    background-image: -webkit-gradient(linear,left top,right top,from(#fae9d7),to(#f3cf94));
    background-image: linear-gradient(90deg,#fae9d7,#f3cf94);
    border-radius: 4px;
    font-size: 12px;
    color: #664a1a;
    letter-spacing: 0;
    padding: 0 8px;
    height: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pcMoonthCard .gamecard-item-change {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_card_32_checked@3x.9b49010d.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 0
}

.pcMoonthCard .gamecard-item-name {
    margin-top: 36px;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pcMoonthCard .gamecard-item-name i {
    margin-left: 4px;
    position: relative;
    z-index: 1
}

.pcMoonthCard .gamecard-item-desc {
    font-size: 14px;
    color: #fff;
    margin-top: 4px
}

.pcMoonthCard .gamecard-item-origeprice {
    margin: 16px 0 -8px;
    text-decoration: line-through;
    font-size: 12px;
    opacity: .5
}

.pcMoonthCard .gamecard-item-origeprice-pc {
    display: none
}

.pcMoonthCard .gamecard-item-b {
    position: relative;
    margin-top: 4px
}

.pcMoonthCard .gamecard-item-b,.pcMoonthCard .gamecard-item-b>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pcMoonthCard .gamecard-item-b>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: 82%
}

.pcMoonthCard .gamecard-item-finalprice {
    font-size: 28px;
    color: #fff;
    margin-top: -5px
}

.pcMoonthCard .gamecard-item-finalprice span {
    font-size: 14px;
    margin-right: 2px
}

.pcMoonthCard .gamecard-item-time {
    background: hsla(0,0%,100%,.2);
    font-size: 10px;
    color: #fff;
    padding: 0 6px 0 4px;
    -webkit-transform-origin: left;
    transform-origin: left;
    border-radius: 8px;
    margin-left: 2px;
    white-space: nowrap
}

.pcMoonthCard .gamecard-item-pur {
    margin-left: 2px;
    overflow: hidden;
    height: 16px;
    color: #664a1a;
    background: #f6d196;
    border-radius: 8px
}

.pcMoonthCard .gamecard-item-pur .c-marquee-text {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: top;
    transform-origin: top
}

.pcMoonthCard .gamecard-item-coins,.pcMoonthCard .gamecard-item-pur .c-marquee-text .text-scroll {
    padding: 1px 4px;
    font-weight: 700;
    font-size: 12px
}

.pcMoonthCard .gamecard-item-coins {
    background: #f6d196;
    color: #664a1a;
    border-radius: 8px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pcMoonthCard .gamecard-item-day {
    font-size: 12px;
    color: #fff;
    white-space: nowrap
}

.gamecard-empty {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0)
}

.gamecard-empty p {
    font-size: 14px;
    color: #8b969f;
    text-align: center;
    line-height: 24px;
    font-weight: 400;
    margin-top: 8px
}

.gamecard-empty.gamecardpc {
    padding-right: 0;
    padding-top: 18%;
    box-sizing: border-box
}

.pcqrcode-empty {
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(136,139,153,.07)),to(rgba(77,80,97,.08)));
    background-image: linear-gradient(180deg,rgba(136,139,153,.07),rgba(77,80,97,.08));
    border: 1px solid rgba(106,108,115,.24);
    width: 100%;
    height: 171px;
    font-size: 14px;
    color: #8b969f;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.pcqrcode-empty.qrLimit {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 178px;
    height: 179px;
    color: #fff;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(40,51,61,.9)
}

.pcqrcode-empty .g-Btn {
    margin-top: 16px
}

.qrLimit-text {
    opacity: .5
}

.pay-cards.pay-cards-gamecard {
    height: 332px
}

.pay-cards.pay-cards-gamecard .gamecard-item {
    width: 396px
}

.gamecardpc {
    height: 330px
}

.gamecardpc.gamecard_stuck {
    height: 278px
}

.gamecardpc .gamecard-item {
    background-image: url(../img/bg_gamecard_normal@3x_pc.56390a84.png);
    padding-bottom: 4px
}

.gamecardpc .gamecard-item.gamecard-hide-bg {
    background-image: url(../img/bg_gamecard_advanced@3x_pc.fcca819b.png)
}

.gamecardpc .gamecard-item .gamecard-item-name {
    margin-top: 32px;
    font-size: 16px
}

.gamecardpc .gamecard-item .gamecard-item-name i {
    cursor: pointer
}

.gamecardpc .gamecard-item .gamecard-item-desc {
    font-size: 12px;
    margin-bottom: 6px
}

.gamecardpc .gamecard-item .gamecard-item-origeprice {
    display: none
}

.gamecardpc .gamecard-item .gamecard-item-origeprice-pc {
    font-size: 12px;
    color: hsla(0,0%,100%,.5);
    text-decoration: line-through;
    display: block;
    margin: 0 4px
}

.gamecardpc .gamecard-item .gamecard-item-finalprice {
    margin-top: -2px
}

.gamecardpc .gamecard-item .gamecard-item-day {
    bottom: 11px
}

.pay-cards-gamecard .gamecard-nochoice {
    height: 40px;
    line-height: 40px;
    background: #1e2831;
    border-radius: 8px;
    padding: 0 16px;
    margin-right: 32px;
    cursor: pointer;
    margin-bottom: 12px
}

.pay-gamgcard .pay-yunbi-head p {
    margin-left: 10px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-right: 12px
}

.gamecard-effect {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.gamecard-effect .icon {
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-left: -9px
}

.gamecard-nochoice {
    background: #28333d;
    border-radius: 8px;
    padding: 10px 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    font-size: 14px;
    color: #fff;
    margin-bottom: 16px
}

.gamecard-nochoice p:first-child i {
    margin-right: 8px;
    margin-bottom: 2px
}

.gamecard-nochoice p:last-child {
    font-size: 12px;
    color: #b4c0c9;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer
}

.gamecard-nochoice p:last-child i {
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-left: -9px
}

.c-month-card-status .icon-close {
    top: 15px;
    right: 16px;
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_payment_close.8f82b909.png)
}

.c-month-card-status .cofirm-head {
    height: 54px;
    background: #28333d;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.c-month-card-status .cofirm-head h2 {
    padding: 0;
    font-size: 16px!important;
    color: #fff
}

.c-month-card-status .cofirm-cont {
    padding: 0 16px 16px 16px
}

.c-month-card-status .card-status .scroll-wrap {
    max-height: 270px
}

.c-month-card-status .card-status li {
    background: rgba(30,40,49,.5);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px
}

.c-month-card-status .card-status li:last-child {
    margin-bottom: 0
}

.c-month-card-status .card-status .card-bottom,.c-month-card-status .card-status .card-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.c-month-card-status .card-status .card-top .card-left {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.c-month-card-status .card-status .card-top .card-left p {
    line-height: 20px;
    font-size: 12px;
    color: hsla(0,0%,100%,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.c-month-card-status .card-status .card-top .card-left p:first-child {
    font-size: 14px;
    color: #fff
}

.c-month-card-status .card-status .card-top .card-left p:last-child {
    margin-top: 1px;
    line-height: 17px;
    font-size: 12px;
    color: hsla(0,0%,100%,.5)
}

.c-month-card-status .card-status .card-top .card-right {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 12px;
    color: #03c47e
}

.c-month-card-status .card-status .card-top .card-right i {
    width: 20px;
    height: 20px;
    margin: 0 1px 0 0
}

.c-month-card-status .card-status .card-bottom {
    margin-top: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.c-month-card-status .card-status .card-bottom .card-left {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    background: hsla(0,0%,100%,.15);
    border-radius: 4px;
    padding: 0 8px;
    margin-right: 4px;
    line-height: 20px;
    font-size: 12px;
    color: #fff
}

.c-month-card-status .card-status .card-bottom .card-right {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: right;
    font-size: 12px;
    color: hsla(0,0%,100%,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pay .c-month-card-status .cofirm-head h2 {
    margin-left: 88px
}

@media only screen and (max-height: 336px) {
    .c-month-card-status .card-status .scroll-wrap {
        max-height:70%;
        max-height: -webkit-calc(100vh - 104px);
        max-height: calc(100vh - 104px)
    }
}

.c-month-card-choose-game {
    -webkit-animation: bgFadeIn .3s;
    animation: bgFadeIn .3s;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end
}

.c-month-card-choose-game.in-pc {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.c-month-card-choose-game.in-pc .choose-game {
    width: 90%;
    max-width: 768px;
    height: 90%;
    max-height: 657px;
    border: 1px solid hsla(0,0%,100%,.1);
    -webkit-animation: fadeIn .3s;
    animation: fadeIn .3s
}

.c-month-card-choose-game.in-pc .selector-head {
    padding: 32px 32px 16px 32px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.c-month-card-choose-game.in-pc .head-top,.c-month-card-choose-game.in-pc .head-top .head-left {
    margin-right: 12px
}

.c-month-card-choose-game.in-pc .head-bottom {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-top: 0;
    text-align: right
}

.c-month-card-choose-game.in-pc .selector-search {
    margin-left: 32px;
    margin-right: 32px;
    padding-right: 16px;
    background: rgba(30,40,49,.5);
    border: 1px solid rgba(30,40,49,.5);
    border-radius: 4px
}

.c-month-card-choose-game.in-pc .selector-search:focus-within {
    border: 1px solid #03c47e;
    background: #1e2831
}

.c-month-card-choose-game.in-pc .selector-search .icon_search_white2 {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-right: 8px
}

.c-month-card-choose-game.in-pc .selector-search input {
    font-size: 16px
}

.c-month-card-choose-game.in-pc .selector-search input::-webkit-input-placeholder {
    font-size: 16px
}

.c-month-card-choose-game.in-pc .selector-search input:-ms-input-placeholder {
    font-size: 16px
}

.c-month-card-choose-game.in-pc .selector-search input::placeholder {
    font-size: 16px
}

.c-month-card-choose-game.in-pc .selector-games {
    max-width: none;
    margin-bottom: 84px
}

.c-month-card-choose-game.in-pc .selector-games .scroll-wrap {
    padding-bottom: 0
}

.c-month-card-choose-game.in-pc .game-list {
    padding-left: 20px;
    padding-right: 20px
}

.c-month-card-choose-game.in-pc .game-list li:nth-child(4n) {
    margin-right: 2.5%!important
}

.c-month-card-choose-game.in-pc .game-list li:nth-child(5n) {
    margin-right: 0!important
}

.c-month-card-choose-game.in-pc .game-list li.mobile,.c-month-card-choose-game.in-pc .game-list li.pc {
    width: 18%;
    margin-right: 2.5%
}

.c-month-card-choose-game.in-pc .game-list li .game-name {
    font-size: 14px
}

.c-month-card-choose-game.in-pc .game-list li .icon.game-tag {
    border-radius: 0;
    top: auto;
    left: auto;
    bottom: 2px;
    right: 2px;
    width: 40px;
    height: 20px
}

.c-month-card-choose-game.in-pc .game-list li .icon.icon-game-selected {
    top: 10px;
    right: 10px;
    background-color: transparent;
    background-size: 100%
}

.c-month-card-choose-game.in-pc .selector-btns {
    height: 84px;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    padding: 0 32px;
    background: transparent
}

.c-month-card-choose-game.in-pc .selector-btns button {
    width: 120px;
    height: 32px;
    font-size: 14px;
    color: #fff;
    border-radius: 4px
}

.c-month-card-choose-game .choose-game {
    position: relative;
    width: 100%;
    height: 90vh;
    height: -webkit-calc(90vh - 60px - constant(safe-area-inset-top));
    height: calc(90vh - 60px - constant(safe-area-inset-top));
    height: -webkit-calc(90vh - 60px - env(safe-area-inset-top));
    height: calc(90vh - 60px - env(safe-area-inset-top));
    background: #28333d;
    border-radius: 4px 4px 0 0;
    -webkit-animation: slideInBottom .3s;
    animation: slideInBottom .3s;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.c-month-card-choose-game .selector-head {
    padding: 16px
}

.c-month-card-choose-game .head-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.c-month-card-choose-game .head-top .head-left {
    line-height: 25px;
    font-size: 18px;
    color: #fff
}

.c-month-card-choose-game .head-top .head-right {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: right;
    font-size: 14px;
    color: hsla(0,0%,100%,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.c-month-card-choose-game .head-bottom {
    margin-top: 4px;
    line-height: 20px;
    font-size: 14px;
    color: #03c47e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.c-month-card-choose-game .selector-search {
    margin-left: 16px;
    margin-right: 16px;
    background: #304051;
    border-radius: 28px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-left: 16px;
    padding-right: 8px
}

.c-month-card-choose-game .selector-search .icon_search_white2 {
    width: 24px;
    height: 24px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: 4px;
    background-size: 32px
}

.c-month-card-choose-game .selector-search .icon-cancel {
    width: 16px;
    height: 16px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    opacity: .3
}

.c-month-card-choose-game .selector-search input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 40px;
    font-size: 14px;
    color: #fff
}

.c-month-card-choose-game .selector-search input::-webkit-input-placeholder {
    color: #899cb0
}

.c-month-card-choose-game .selector-search input:-ms-input-placeholder {
    color: #899cb0
}

.c-month-card-choose-game .selector-search input::placeholder {
    color: #899cb0
}

.c-month-card-choose-game .selector-games {
    width: 100%;
    max-width: 500px;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.c-month-card-choose-game .selector-games .scroll-wrap {
    padding-bottom: 128px;
    box-sizing: border-box
}

.c-month-card-choose-game .game-list {
    padding: 8px 14px;
    font-size: 0
}

.c-month-card-choose-game .game-list li {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 24px;
    cursor: pointer
}

.c-month-card-choose-game .game-list li:nth-child(4n) {
    margin-right: 0!important
}

.c-month-card-choose-game .game-list li.active .icon {
    display: block
}

.c-month-card-choose-game .game-list li.active .game-cover img {
    border: 2px solid transparent;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: -webkit-gradient(linear,left top,right top,from(#2e3740),to(#2e3740)),-webkit-gradient(linear,left top,left bottom,from(#07e4b5),to(#03c47e));
    background-image: linear-gradient(90deg,#2e3740,#2e3740),linear-gradient(180deg,#07e4b5,#03c47e)
}

.c-month-card-choose-game .game-list li.active .game-name {
    color: #03c47e
}

.c-month-card-choose-game .game-list li.mobile {
    width: 22%;
    margin-right: 4%
}

.c-month-card-choose-game .game-list li.mobile .icon {
    border-radius: 0 12px 0 12px
}

.c-month-card-choose-game .game-list li.mobile .game-cover {
    padding-bottom: 100%
}

.c-month-card-choose-game .game-list li.mobile .game-cover img {
    border-radius: 24%
}

.c-month-card-choose-game .game-list li.pc {
    width: 22%;
    margin-right: 4%
}

.c-month-card-choose-game .game-list li.pc .icon {
    border-radius: 0 4px 0 4px
}

.c-month-card-choose-game .game-list li.pc .icon-checkbox-selected {
    background-color: transparent;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    top: 8px;
    right: 8px
}

.c-month-card-choose-game .game-list li.pc .game-wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto
}

.c-month-card-choose-game .game-list li.pc .game-cover {
    padding-bottom: 142.85714286%
}

.c-month-card-choose-game .game-list li.pc .game-cover img {
    border-radius: 8px
}

.c-month-card-choose-game .game-list li .icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 20px;
    height: 20px;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: #07e4b5;
    display: none
}

.c-month-card-choose-game .game-list li .icon.game-tag {
    left: 2px;
    top: 2px;
    right: auto;
    display: block;
    width: 26px;
    height: 14px;
    background-color: transparent;
    background-size: 100% 100%;
    border-radius: 6px 0 0 0
}

.c-month-card-choose-game .game-list li .game-cover {
    position: relative;
    height: 0;
    overflow: hidden
}

.c-month-card-choose-game .game-list li .game-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
    border: 2px solid transparent;
    background-color: #2e3740
}

.c-month-card-choose-game .game-list li .game-name {
    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #fff
}

.c-month-card-choose-game .empty-status {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: #8b969f
}

.c-month-card-choose-game .empty-status .icon-live-empty {
    margin-bottom: 10px
}

.c-month-card-choose-game .selector-btns {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 128px;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(48,64,81,0)),to(#304051));
    background-image: linear-gradient(180deg,rgba(48,64,81,0),#304051);
    pointer-events: none;
    padding: 0 16px
}

.c-month-card-choose-game .selector-btns button {
    width: 100%;
    height: 48px;
    pointer-events: all;
    background: #03c47e;
    box-shadow: 0 2px 30px 0 rgba(7,171,127,.3);
    border-radius: 24px;
    border: 0;
    font-size: 18px;
    color: #fff;
    cursor: pointer
}

@media only screen and (max-height: 500px) {
    .c-month-card-choose-game .choose-game {
        height:100%
    }
}

.c-marquee-text {
    overflow: hidden
}

.c-marquee-text .text-scroll {
    white-space: nowrap
}

.confirm-ads {
    background: url(../img/confirm_ads_bg.09a70557.png) no-repeat;
    background-size: 100% 100%;
    width: 329px;
    height: 194px
}

.confirm-ads .cofirm-cont {
    background: none;
    padding: 0
}

.confirm-ads .cofirm-msg {
    padding: 0 16px;
    margin: 93px 0 0;
    min-height: auto;
    color: #fff
}

.confirm-ads .cofirm-btns {
    padding: 0 16px;
    margin-top: 16px
}

.confirm-ads .cofirm-btns a {
    border-radius: 14px;
    width: 143px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 16px;
    border: 0
}

.confirm-ads .cofirm-btns a.g-Btn-white {
    color: #fff;
    background: hsla(0,0%,100%,.2)
}

.confirm-ads .cofirm-btns a.g-Btn-green2 {
    font-size: 0;
    background: #fff;
    background-image: url(../img/confirm_ads_btn.99562f8e.png);
    background-size: auto 26px;
    background-position: 50%;
    background-repeat: no-repeat
}

.vipCardTipsCon {
    background: rgba(255,128,130,.5);
    border-radius: 8px;
    padding: 0 8px;
    margin: 8px 16px 0;
    height: 28px;
    line-height: 28px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.vipCardTipsCon.vipCardTipsCon-pc {
    margin: 8px 0 0
}

.vipCardTipsCon span {
    font-size: 12px;
    color: #fff;
    letter-spacing: 0;
    font-weight: 400;
    margin-left: 4px
}

.vipCardTipsCon .bar-right {
    width: 100%;
    margin-left: 4px
}

.pay-bg {
    background-color: #12161a;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#1e2831),to(#12161a));
    background-image: linear-gradient(180deg,#1e2831,#12161a);
    background-size: 100% 172px;
    background-position: top;
    background-repeat: no-repeat
}

.pay-bg .topnav-fixed,.pay-bg body {
    background-color: transparent
}

.pay-bg .user-detail {
    -webkit-box-align: center!important;
    -webkit-align-items: center!important;
    align-items: center!important
}

.pay-bg .user-detail .user-avatar {
    width: 44px!important;
    height: 44px!important;
    margin-right: 9px!important
}

.pay-bg .user-detail .user-phone {
    line-height: 22px!important;
    font-size: 16px!important
}

.pay-bg .user-detail .user-phone+p {
    line-height: 17px
}

.pay-bg .user-detail>div h3 span {
    margin-left: 2px!important;
    padding: 0 6px!important;
    line-height: 16px!important;
    background: #8b969f!important;
    -webkit-transform: scale(1)!important;
    transform: scale(1)!important;
    border-radius: 9px!important;
    font-size: 11px!important;
    color: #12161a!important
}

.page-pay-mobile {
    line-height: 1
}

.page-pay-mobile .user-status-m {
    padding-top: 2px
}

.page-pay-subtypes {
    position: relative;
    height: 100%;
    -webkit-transition: background-color .3s;
    transition: background-color .3s
}

.page-pay-subtypes.status-fixed {
    background-color: #1e2831
}

.page-pay-subtypes.pay-subtypes-normal ul li.active {
    background: -webkit-gradient(linear,left top,right top,from(#f9eac1),to(#efc678));
    background: linear-gradient(90deg,#f9eac1,#efc678);
    -webkit-background-clip: text;
    color: transparent
}

.page-pay-subtypes.pay-subtypes-normal .pay-subtypes-underline {
    background-image: -webkit-gradient(linear,right top,left top,from(#efc678),to(#f9eac1));
    background-image: linear-gradient(270deg,#efc678,#f9eac1)
}

.page-pay-subtypes.pay-subtypes-better ul li.active {
    background: -webkit-gradient(linear,left top,right top,from(#ecbb56),to(#cb972b));
    background: linear-gradient(90deg,#ecbb56,#cb972b);
    -webkit-background-clip: text;
    color: transparent
}

.page-pay-subtypes.pay-subtypes-better .pay-subtypes-underline {
    background-image: -webkit-gradient(linear,left top,right top,from(#ecbb56),to(#cb972b));
    background-image: linear-gradient(90deg,#ecbb56,#cb972b)
}

.page-pay-subtypes.pay-subtypes-interval ul li.active {
    background: -webkit-gradient(linear,left top,right top,from(#8fe6ff),to(#3b62c4));
    background: linear-gradient(90deg,#8fe6ff,#3b62c4);
    -webkit-background-clip: text;
    color: transparent
}

.page-pay-subtypes.pay-subtypes-interval .pay-subtypes-underline {
    background-image: linear-gradient(-82deg,#3b62c4,#8fe6ff)
}

.page-pay-subtypes ul {
    height: 100%;
    padding: 0 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    white-space: nowrap
}

.page-pay-subtypes ul li {
    margin-right: 24px;
    font-size: 16px;
    color: hsla(0,0%,100%,.5)
}

.page-pay-subtypes ul li.active {
    background: -webkit-gradient(linear,left top,right top,from(#ffecc5),to(#f5ba75));
    background: linear-gradient(90deg,#ffecc5,#f5ba75);
    -webkit-background-clip: text;
    font-weight: 500;
    color: transparent
}

.page-pay-subtypes ul li:last-child {
    margin-right: 0
}

.page-pay-subtypes .pay-subtypes-underline {
    position: absolute;
    bottom: 12px;
    width: 24px;
    height: 3px;
    background-image: -webkit-gradient(linear,right top,left top,from(#f5ba75),to(#ffecc5));
    background-image: linear-gradient(270deg,#f5ba75,#ffecc5);
    border-radius: 1.5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.page-pay-subtypes .pay-history-entry {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 24px;
    height: 24px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-size: 100% 100%;
    background-image: url(../img/icon_me_history_24@3x.76c1a39e.png)
}

.page-pay-recharges-mobile ul {
    padding: 25px 16px 0 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow: auto
}

.page-pay-recharges-mobile ul::-webkit-scrollbar {
    display: none
}

.page-pay-recharges-mobile ul li {
    position: relative;
    width: 128px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: 8px;
    border: 2px solid #2a2f34;
    border-radius: 12px;
    padding: 18px 6px 6px 6px;
    box-sizing: border-box;
    text-align: center
}

.page-pay-recharges-mobile ul li:last-child {
    margin-right: 0
}

.page-pay-recharges-mobile ul li.active {
    background: rgba(203,151,43,.2);
    border: 2px solid #ecbb56
}

.page-pay-recharges-mobile ul li.active.has-gift:before {
    background-image: url(../img/tag_gift_active.09b100f4.png)
}

.page-pay-recharges-mobile ul li.active .recharge-daliy-count,.page-pay-recharges-mobile ul li.active .recharge-name {
    color: #fff
}

.page-pay-recharges-mobile ul li.active .recharge-final-price {
    color: #ffecc5
}

.page-pay-recharges-mobile ul li.active .recharge-origin-price {
    color: rgba(255,236,197,.3)
}

.page-pay-recharges-mobile ul li.active .recharge-daliy-price {
    background: rgba(203,151,43,.2);
    color: #ffecc5
}

.page-pay-recharges-mobile ul li.active .recharge-daliy-price span {
    color: rgba(255,236,197,.5)
}

.page-pay-recharges-mobile ul li.has-gift:before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-image: url(../img/tag_gift_normal.49b6f304.png)
}

.page-pay-recharges-mobile ul li .recharge-tag {
    position: absolute;
    top: -6px;
    left: -2px;
    z-index: 2;
    line-height: 20px;
    padding: 0 8px;
    background-image: -webkit-gradient(linear,right top,left top,from(#f5ba75),to(#ffecc5));
    background-image: linear-gradient(270deg,#f5ba75,#ffecc5);
    border-radius: 10px 10px 10px 0;
    font-weight: 500;
    font-size: 12px;
    color: #664a1a
}

.page-pay-recharges-mobile ul li .recharge-name {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 22px;
    font-weight: 500;
    font-size: 16px;
    color: hsla(0,0%,100%,.7)
}

.page-pay-recharges-mobile ul li .recharge-name i {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-left: 4px
}

.page-pay-recharges-mobile ul li .recharge-daliy-count {
    margin-top: 2px;
    line-height: 17px;
    text-align: center;
    font-size: 12px;
    color: hsla(0,0%,100%,.7)
}

.page-pay-recharges-mobile ul li .recharge-final-price {
    line-height: 50px;
    font-weight: 600;
    font-size: 38px;
    color: #8b969f
}

.page-pay-recharges-mobile ul li .recharge-final-price sub {
    bottom: 0;
    line-height: 18px;
    font-weight: 400;
    font-size: 14px
}

.page-pay-recharges-mobile ul li .recharge-final-price .price-yen {
    margin-right: 2px
}

.page-pay-recharges-mobile ul li .recharge-final-price .price-unit {
    margin-left: 1px;
    bottom: 2px;
    font-size: 12px
}

.page-pay-recharges-mobile ul li .recharge-origin-price {
    font-size: 12px;
    text-decoration: line-through;
    color: rgba(255,236,197,.5)
}

.page-pay-recharges-mobile ul li .recharge-daliy-price {
    margin-top: 7px;
    line-height: 20px;
    background: rgba(139,150,159,.2);
    border-radius: 6px;
    font-size: 12px;
    color: #8b969f
}

.page-pay-recharges-mobile ul li .recharge-daliy-price span {
    color: rgba(139,150,159,.5)
}

.page-pay-recharges-mobile .recharge-tips {
    margin-top: 8px;
    padding: 0 16px;
    line-height: 16px;
    font-size: 11px;
    color: #8b969f
}

.page-pay-gifts-confirm,.page-pay-gifts-mobile {
    margin: 8px 16px 0 16px;
    background-color: #12161a;
    background-image: -webkit-gradient(linear,right top,left top,from(rgba(245,186,117,.4)),to(rgba(255,236,197,.4)));
    background-image: linear-gradient(270deg,rgba(245,186,117,.4),rgba(255,236,197,.4));
    border: 1px solid rgba(255,236,197,.2);
    border-radius: 8px
}

.page-pay-gifts-confirm .gifts-bar,.page-pay-gifts-mobile .gifts-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 40px;
    padding-right: 12px;
    background-image: url(../img/pic_gift_light@2x.9cba1cb0.png);
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    border-radius: 8px
}

.page-pay-gifts-confirm .gifts-bar span,.page-pay-gifts-mobile .gifts-bar span {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    font-size: 12px;
    color: rgba(249,231,170,.5)
}

.page-pay-gifts-confirm .gifts-bar span+i,.page-pay-gifts-mobile .gifts-bar span+i {
    width: 16px;
    height: 16px;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    vertical-align: -2px
}

.page-pay-gifts-confirm .gifts-bar span+i.gifts-fold-icon,.page-pay-gifts-mobile .gifts-bar span+i.gifts-fold-icon {
    background-image: url(../img/icon_ME_arrow_up_yellow_16@3x.26d53b5f.png)
}

.page-pay-gifts-confirm .gifts-bar span+i.gifts-unfold-icon,.page-pay-gifts-mobile .gifts-bar span+i.gifts-unfold-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    background-image: url(../img/icon_ME_arrow_up_yellow_16@3x.26d53b5f.png)
}

.page-pay-gifts-confirm .gifts-bar-icon,.page-pay-gifts-mobile .gifts-bar-icon {
    position: relative;
    width: 50px;
    height: 100%;
    background-image: url(../img/text_gift_pro_20h@2x.f5fbe9a1.png);
    background-size: 30px auto;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.page-pay-gifts-confirm .gifts-bar-icon:after,.page-pay-gifts-mobile .gifts-bar-icon:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 1px;
    height: 12px;
    background: rgba(255,236,197,.5);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.page-pay-gifts-confirm .gifts-title,.page-pay-gifts-mobile .gifts-title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 8px;
    margin-right: 8px;
    font-size: 14px;
    color: #f9e7aa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-pay-gifts-confirm .gifts-content,.page-pay-gifts-mobile .gifts-content {
    height: 0;
    overflow: hidden;
    margin: 0 8px
}

.page-pay-gifts-confirm .gifts-content.active,.page-pay-gifts-mobile .gifts-content.active {
    height: auto;
    margin-bottom: 8px
}

.page-pay-gifts-confirm .gifts-list,.page-pay-gifts-mobile .gifts-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    background: rgba(18,22,26,.5);
    border-radius: 6px;
    padding: 10px 0
}

.page-pay-gifts-confirm .gifts-list.with-parting-line,.page-pay-gifts-mobile .gifts-list.with-parting-line {
    position: relative;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start
}

.page-pay-gifts-confirm .gifts-list.with-parting-line:before,.page-pay-gifts-mobile .gifts-list.with-parting-line:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0) scaleX(50%);
    transform: translate3d(-50%,-50%,0) scaleX(50%);
    width: 1px;
    height: -webkit-calc(100% - 16px);
    height: calc(100% - 16px);
    background: hsla(0,0%,100%,.1);
    border-radius: 2px
}

.page-pay-gifts-confirm .gifts-list.with-parting-line .gifts-item,.page-pay-gifts-mobile .gifts-list.with-parting-line .gifts-item {
    width: 50%;
    -webkit-box-flex: unset;
    -webkit-flex: unset;
    flex: unset
}

.page-pay-gifts-confirm .gifts-item,.page-pay-gifts-mobile .gifts-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: -webkit-calc(50% - 16px);
    max-width: calc(50% - 16px);
    box-sizing: border-box;
    height: 32px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding-left: 36px;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: 0;
    margin: 0 8px 10px
}

.page-pay-gifts-confirm .gifts-item:last-child,.page-pay-gifts-confirm .gifts-item:nth-last-child(2):nth-child(odd),.page-pay-gifts-mobile .gifts-item:last-child,.page-pay-gifts-mobile .gifts-item:nth-last-child(2):nth-child(odd) {
    margin-bottom: 0
}

.page-pay-gifts-confirm .gifts-item .gifts-item-title,.page-pay-gifts-mobile .gifts-item .gifts-item-title {
    line-height: 16px;
    font-size: 11px;
    color: #f9e7aa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-pay-gifts-confirm .gifts-item .gifts-item-desc,.page-pay-gifts-mobile .gifts-item .gifts-item-desc {
    line-height: 16px;
    font-size: 11px;
    color: rgba(249,231,170,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-pay-gifts-confirm .cofirm-cont {
    background: transparent;
    padding: 0
}

.page-pay-gifts-confirm .gifts-bar {
    padding-right: 8px
}

.page-pay-gifts-confirm .gifts-confirm-content {
    max-height: 200px;
    overflow: auto;
    margin: 0 8px 8px 8px;
    background: rgba(18,22,26,.5);
    border-radius: 6px;
    padding: 10px 8px;
    line-height: 17px;
    font-size: 12px;
    color: #f9e7aa
}

.page-pay-privileges-mobile {
    margin-top: 24px;
    padding: 0 16px
}

.page-pay-privileges-mobile .privileges-title {
    line-height: 22px;
    font-weight: 500;
    font-size: 16px;
    color: #fff
}

.page-pay-privileges-mobile .privileges-content {
    position: relative;
    margin-top: 12px;
    background: #28333d;
    border-radius: 8px
}

.page-pay-privileges-mobile .privileges-content ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    padding-top: 16px;
    padding-bottom: 24px
}

.page-pay-privileges-mobile .privileges-content ul li {
    width: 25%;
    padding: 0 5px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center
}

.page-pay-privileges-mobile .privileges-content ul li i {
    width: 100%;
    height: 48px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 100%
}

.page-pay-privileges-mobile .privileges-content ul li p {
    margin-top: 4px;
    line-height: 17px;
    font-size: 12px;
    color: #ffecc5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-pay-privileges-mobile .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    line-height: 24px;
    text-align: center
}

.page-pay-privileges-mobile .swiper-pagination .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    background: rgba(255,236,197,.3);
    margin-right: 4px;
    border-radius: 2px;
    vertical-align: middle
}

.page-pay-privileges-mobile .swiper-pagination .swiper-pagination-bullet:last-child {
    margin-right: 0
}

.page-pay-privileges-mobile .swiper-pagination .swiper-pagination-bullet-active {
    width: 8px;
    background: rgba(255,236,197,.7)
}

.page-pay-privileges-confirm {
    margin: 8px 16px 0 16px;
    background-color: #12161a;
    background-image: -webkit-gradient(linear,right top,left top,from(rgba(245,186,117,.4)),to(rgba(255,236,197,.4)));
    background-image: linear-gradient(270deg,rgba(245,186,117,.4),rgba(255,236,197,.4));
    border: 1px solid rgba(255,236,197,.2);
    border-radius: 8px
}

.page-pay-privileges-confirm .cofirm-cont {
    background: transparent;
    padding: 0
}

.page-pay-privileges-confirm .privileges-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 40px;
    padding-right: 8px;
    background-image: url(../img/pic_gift_light@2x.9cba1cb0.png);
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    border-radius: 8px
}

.page-pay-privileges-confirm .privileges-bar-icon {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0 8px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.page-pay-privileges-confirm .privileges-bar-icon:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 1px;
    height: 12px;
    background: rgba(255,236,197,.5);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.page-pay-privileges-confirm .privileges-title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 8px;
    margin-right: 8px;
    font-size: 14px;
    color: #f9e7aa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-pay-privileges-confirm .privileges-confirm-content {
    max-height: 200px;
    overflow: auto;
    margin: 0 8px 8px 8px;
    background: rgba(18,22,26,.5);
    border-radius: 6px;
    padding: 10px 8px;
    line-height: 17px;
    font-size: 12px;
    color: #f9e7aa
}

.page-pay-privileges-interval {
    margin-top: 24px;
    padding: 0 16px
}

.page-pay-privileges-interval .privileges-title {
    line-height: 22px;
    font-size: 16px;
    color: #fff
}

.page-pay-privileges-interval .privileges-content {
    margin-top: 12px;
    background: rgba(48,64,81,.5);
    border-radius: 8px;
    padding: 8px 8px 0 8px
}

.page-pay-privileges-interval .privileges-content ul li {
    background: rgba(24,33,40,.5);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 4px
}

.page-pay-privileges-interval .privileges-content ul li:last-child {
    margin-bottom: 0
}

.page-pay-privileges-interval .privileges-content ul li .privilege-title {
    line-height: 20px;
    font-size: 14px;
    color: #b6b6b6
}

.page-pay-privileges-interval .privileges-content ul li .privilege-desc {
    margin-top: 2px;
    line-height: 17px;
    font-size: 12px;
    color: #939393
}

.page-pay-privileges-interval .privilege-extend {
    line-height: 40px;
    text-align: right
}

.page-pay-privileges-interval .privilege-extend span {
    font-size: 12px;
    color: rgba(139,150,159,.5)
}

.page-pay-privileges-interval .privilege-extend span i {
    width: 16px;
    height: 16px;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    vertical-align: -2px
}

.page-pay-privileges-interval .privilege-extend span i.privilege-fold-icon {
    background-image: url(../img/icon_ME_arrow_up_grey_16@2x.2974db8f.png)
}

.page-pay-privileges-interval .privilege-extend span i.privilege-unfold-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background-image: url(../img/icon_ME_arrow_up_grey_16@2x.2974db8f.png)
}

.page-pay-more-mobile {
    margin-top: 24px;
    padding: 0 16px
}

.page-pay-more-mobile .more-title {
    line-height: 22px;
    font-size: 16px;
    color: #fff
}

.page-pay-more-mobile .more-content {
    margin-top: 12px;
    background: #28333d;
    border-radius: 8px
}

.page-pay-more-mobile .more-content ul {
    padding: 0 16px
}

.page-pay-more-mobile .more-content ul li {
    height: 56px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid #2f3c47
}

.page-pay-more-mobile .more-content ul li:last-child {
    border-bottom: 0
}

.page-pay-more-mobile .more-content ul li p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size: 14px;
    color: #b4c0c9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-pay-more-mobile .more-content ul li i {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.pay-bottom-tips {
    margin-top: 12px;
    padding-bottom: 8px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    color: #8b969f
}

.page-pay-charges .pay-charges-main {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(18,22,26,.9);
    -webkit-animation: slideInBottom .3s;
    animation: slideInBottom .3s;
    padding-top: 8px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    text-align: center
}

.page-pay-charges .pay-charges-main:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: 2;
    height: 40px;
    background-image: linear-gradient(179deg,rgba(18,22,26,0),rgba(18,22,26,.9));
    pointer-events: none
}

.page-pay-charges .pay-charges-main>button {
    max-width: 311px;
    width: 90%;
    height: auto;
    line-height: 38px;
    font-size: 14px;
    color: #fff
}

.page-pay-charges .pay-charges-main>button strong {
    margin-left: 4px;
    vertical-align: bottom;
    font-weight: 600;
    font-size: 18px;
    color: #fff
}

.page-pay-charges .pay-charges-license {
    margin-top: 8px;
    padding-bottom: 10px;
    font-size: 11px
}

.page-pay-charges .pay-charges-license a {
    text-decoration: none;
    color: #8b969f
}

.page-pay-charges .pay-charges-license span {
    margin: 8px;
    opacity: .5;
    color: #8b969f
}

.page-pay-coupons-bar .coupons-bar-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 9px;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 16px
}

.page-pay-coupons-bar .coupons-bar-wrap>i {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.page-pay-coupons-bar .coupons-bar-wrap>i.icon_ME_arrow_right_16_grey {
    margin-left: 2px
}

.page-pay-coupons-bar .coupons-bar-wrap>div,.page-pay-coupons-bar .coupons-bar-wrap>p {
    margin-left: 8px;
    font-size: 14px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-pay-coupons-bar .coupons-bar-wrap>div span,.page-pay-coupons-bar .coupons-bar-wrap>p span {
    color: #fc5656
}

.page-pay-promotion-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.page-pay-promotion-bar span.name {
    font-size: 14px;
    color: #8b969f
}

.page-pay-promotion-bar span.line {
    width: 1px;
    height: 8px;
    background-color: #ffe9dd;
    margin: 0 5px
}

.page-pay-promotion-bar .time-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.page-pay-promotion-bar .time-group span.text2 {
    margin-right: 6px;
    font-size: 12px;
    color: #fff
}

.page-pay-promotion-bar .time-group span.time {
    width: 24px;
    line-height: 20px;
    display: inline-block;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#fff4ec),color-stop(97%,#ffe3d3));
    background-image: linear-gradient(180deg,#fff4ec,#ffe3d3 97%);
    box-shadow: inset 0 -2px 1px 0 hsla(0,0%,100%,.25);
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    color: #ec435b
}

.page-pay-promotion-bar .time-group span.split {
    width: 10px;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    color: #fff
}

.page-pay-promotion-bar span.text3 {
    margin-left: 12px;
    font-size: 14px;
    color: #fc5656
}

.page-pay-coupons-bar2 .coupons-bar-wrap {
    height: 40px;
    margin-top: 24px;
    margin-bottom: 24px;
    padding-left: 8px;
    padding-right: 10px;
    background-image: linear-gradient(45deg,#888b99,#4d5061);
    border-radius: 4px;
    font-size: 12px;
    color: #fff
}

.page-pay-coupons-bar2 .coupons-bar-wrap,.page-pay-coupons-bar2 .coupons-bar-wrap .text {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.page-pay-coupons-bar2 .coupons-bar-wrap .text {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 6px;
    margin-right: 6px;
    font-weight: 400
}

.page-pay-coupons-bar2 .coupons-bar-wrap .text strong {
    margin-left: 4px;
    vertical-align: -1px;
    color: #e2bb7c
}

.page-pay-coupons-bar2 .coupons-bar-wrap .icon_coupon {
    width: 32px;
    height: 44px;
    margin-top: -14px
}

.page-pay-coupons-bar2 .coupons-bar-wrap .icon_arrow_right_white {
    width: 12px;
    height: 12px
}

.page-pay-coupons-bar2 .page-pay-coupons-pop {
    position: absolute
}

.page-pay-coupons-bar2 .page-pay-coupons-pop .coupons-pop-main {
    height: 100%;
    -webkit-animation: none;
    animation: none
}

.page-pay-coupons-bar2 .page-pay-coupons-pop .coupons-bottom {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    padding: 0 32px 40px 32px;
    padding-bottom: -webkit-calc(40px + constant(safe-area-inset-bottom));
    padding-bottom: calc(40px + constant(safe-area-inset-bottom));
    padding-bottom: -webkit-calc(40px + env(safe-area-inset-bottom));
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    box-sizing: border-box
}

.page-pay-coupons-bar2 .page-pay-coupons-pop .coupons-bottom button {
    margin: 0
}

.page-pay-coupons-pop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,.7);
    -webkit-animation: bgFadeIn .3s;
    animation: bgFadeIn .3s;
    z-index: 997
}

.page-pay-coupons-pop .coupons-pop-main {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: #304051;
    -webkit-animation: slideInTop .3s;
    animation: slideInTop .3s
}

.page-pay-coupons-pop .coupons-title {
    padding: 16px 0 24px 0;
    text-align: center
}

.page-pay-coupons-pop .coupons-title h2 {
    font-weight: 400;
    font-size: 14px;
    color: #fff
}

.page-pay-coupons-pop .coupons-title i {
    position: absolute;
    top: 16px;
    right: 16px
}

.page-pay-coupons-pop ul {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow-y: auto;
    padding: 2px 16px 128px 16px;
    padding-bottom: -webkit-calc(128px + constant(safe-area-inset-bottom));
    padding-bottom: calc(128px + constant(safe-area-inset-bottom));
    padding-bottom: -webkit-calc(128px + env(safe-area-inset-bottom));
    padding-bottom: calc(128px + env(safe-area-inset-bottom))
}

.page-pay-coupons-pop li {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px 8px;
    line-height: 17px;
    background-image: linear-gradient(45deg,#888b99,#4d5061);
    border-radius: 4px;
    text-align: left;
    font-size: 12px;
    color: #fff
}

.page-pay-coupons-pop li.disabled {
    opacity: .4;
    border-radius: 4px 4px 0 0;
    margin-bottom: 36px
}

.page-pay-coupons-pop li .error {
    position: absolute;
    left: 0;
    height: 20px;
    bottom: -20px;
    right: 0;
    padding: 0 10px;
    line-height: 20px;
    background: hsla(0,0%,100%,.2);
    border-radius: 0 0 4px 4px
}

.page-pay-coupons-pop li:last-child {
    margin-bottom: 0
}

.page-pay-coupons-pop li.active:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 1;
    pointer-events: none;
    border: 2px solid #07e4b5;
    border-radius: 4px
}

.page-pay-coupons-pop li.active:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-image: url(../img/icon_create_room_selected.c2ee0584.png);
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: #07e4b5;
    border-top-left-radius: 4px
}

.page-pay-coupons-pop li[disabled] {
    opacity: .3;
    padding-bottom: 28px
}

.page-pay-coupons-pop li[disabled] .error {
    display: block
}

.page-pay-coupons-pop li .icon-3 {
    width: 32px;
    height: 44px
}

.page-pay-coupons-pop li .col-1 {
    margin-left: 6px;
    -webkit-box-flex: 11;
    -webkit-flex: 11;
    flex: 11
}

.page-pay-coupons-pop li .col-1 p:first-child {
    font-size: 24px;
    line-height: 30px
}

.page-pay-coupons-pop li .col-1 p:first-child sub {
    margin-right: 2px;
    bottom: 0;
    font-weight: 400;
    font-size: 60%
}

.page-pay-coupons-pop li .col-2 {
    margin-left: 6px;
    -webkit-box-flex: 19;
    -webkit-flex: 19;
    flex: 19;
    overflow: hidden
}

.page-pay-coupons-pop li .col-2 p:first-child {
    font-size: 14px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-pay-coupons-pop .coupons-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 128px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    pointer-events: none;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1%,rgba(40,51,61,0)),to(#28333d));
    background-image: linear-gradient(180deg,rgba(40,51,61,0) 1%,#28333d)
}

.page-pay-coupons-pop .coupons-bottom button {
    position: relative;
    z-index: 3;
    pointer-events: auto
}

.page-pay-charges-pop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
    z-index: 997;
    -webkit-animation: bgFadeIn .3s;
    animation: bgFadeIn .3s
}

.page-pay-charges-pop .pay-charges-pop-main {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    -webkit-animation: slideInTop .3s;
    animation: slideInTop .3s;
    padding: 16px 32px 40px 32px;
    padding-bottom: -webkit-calc(40px + constant(safe-area-inset-bottom));
    padding-bottom: calc(40px + constant(safe-area-inset-bottom));
    padding-bottom: -webkit-calc(40px + env(safe-area-inset-bottom));
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    background: #304051;
    border-radius: 6px 6px 0 0;
    text-align: center
}

.page-pay-charges-pop .icon-vipclose {
    position: absolute;
    top: 16px;
    right: 16px
}

.page-pay-charges-pop .pay-charges-pop-title {
    line-height: 21px;
    font-size: 14px;
    color: #fff
}

.page-pay-charges-pop .pay-charges-pop-money {
    font-size: 14px;
    color: #fff
}

.page-pay-charges-pop .pay-charges-pop-money span {
    font-size: 26px
}

.page-pay-charges-pop .pay-charges-pop-types li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 10px 0;
    margin-bottom: 20px
}

.page-pay-charges-pop .pay-charges-pop-types li:last-child {
    margin-bottom: 0
}

.page-pay-charges-pop .pay-charges-pop-types li p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 16px;
    text-align: left;
    font-size: 16px
}

.page-pay-charges-pop .g-Btn {
    position: relative;
    width: 100%;
    height: 48px;
    margin-top: 40px;
    line-height: 46px;
    border-radius: 24px
}

.page-pay-charges-pop .g-Btn strong {
    margin-left: 4px;
    padding: 0 5px;
    line-height: 20px;
    background: #0db679;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    color: #fff
}

.page-pay-normal .page-pay-recharges-mobile ul li.active {
    background: rgba(239,198,120,.2);
    border: 2px solid #f6de86
}

.page-pay-normal .page-pay-recharges-mobile ul li.active.has-gift:before {
    background-image: url(../img/tag_gift_active.09b100f4.png)
}

.page-pay-normal .page-pay-recharges-mobile ul li.active .recharge-final-price {
    color: #f9eac1
}

.page-pay-normal .page-pay-recharges-mobile ul li.active .recharge-daliy-price {
    background: rgba(239,198,120,.2);
    color: #f9eac1
}

.page-pay-normal .page-pay-recharges-mobile ul li.active .recharge-daliy-price .recharge-origin-price {
    color: rgba(249,234,193,.5)
}

.page-pay-normal .page-pay-recharges-mobile ul li .recharge-tag {
    background-image: -webkit-gradient(linear,right top,left top,from(#efc678),to(#f9eac1));
    background-image: linear-gradient(270deg,#efc678,#f9eac1);
    color: #453e32
}

.page-pay-normal .page-pay-gifts-confirm,.page-pay-normal .page-pay-gifts-mobile {
    background-image: -webkit-gradient(linear,right top,left top,from(rgba(239,198,120,.4)),to(rgba(249,234,193,.4)));
    background-image: linear-gradient(270deg,rgba(239,198,120,.4),rgba(249,234,193,.4));
    border: 1px solid rgba(236,187,86,.2)
}

.page-pay-normal .page-pay-gifts-confirm .gifts-bar-icon,.page-pay-normal .page-pay-gifts-mobile .gifts-bar-icon {
    background-image: url(../img/tag_gift_text.6345343c.png)
}

.page-pay-normal .page-pay-gifts-confirm .gifts-title,.page-pay-normal .page-pay-gifts-mobile .gifts-title {
    color: #f9eac1
}

.page-pay-normal .page-pay-gifts-confirm .gifts-bar span,.page-pay-normal .page-pay-gifts-mobile .gifts-bar span {
    color: rgba(249,234,193,.5)
}

.page-pay-normal .page-pay-gifts-confirm .gifts-list,.page-pay-normal .page-pay-gifts-mobile .gifts-list {
    background: rgba(39,35,26,.5)
}

.page-pay-normal .page-pay-gifts-confirm .gifts-item .gifts-item-title,.page-pay-normal .page-pay-gifts-mobile .gifts-item .gifts-item-title {
    color: #f9eac1
}

.page-pay-normal .page-pay-gifts-confirm .gifts-item .gifts-item-desc,.page-pay-normal .page-pay-gifts-mobile .gifts-item .gifts-item-desc {
    color: rgba(249,234,193,.5)
}

.page-pay-normal .page-pay-gifts-confirm .gifts-confirm-content,.page-pay-normal .page-pay-gifts-mobile .gifts-confirm-content {
    color: #f9eac1
}

.page-pay-normal .page-pay-privileges-mobile .privileges-content ul li p {
    color: #ffecc5
}

.page-pay-normal .page-pay-privileges-mobile .swiper-pagination .swiper-pagination-bullet-active {
    background: rgba(255,236,197,.7)
}

.page-pay-better .page-pay-recharges-mobile ul li.active {
    background: rgba(203,151,43,.2);
    border: 2px solid #ecbb56
}

.page-pay-better .page-pay-recharges-mobile ul li.active.has-gift:before {
    background-image: url(../img/tag_gift_active2.240723ec.png)
}

.page-pay-better .page-pay-recharges-mobile ul li.active .recharge-final-price {
    color: #ffecc5
}

.page-pay-better .page-pay-recharges-mobile ul li.active .recharge-daliy-price {
    background: rgba(203,151,43,.2);
    color: #ffecc5
}

.page-pay-better .page-pay-recharges-mobile ul li.active .recharge-daliy-price .recharge-origin-price {
    color: rgba(255,236,197,.5)
}

.page-pay-better .page-pay-recharges-mobile ul li .recharge-tag {
    background-image: -webkit-gradient(linear,right top,left top,from(#f5ba75),to(#ffecc5));
    background-image: linear-gradient(270deg,#f5ba75,#ffecc5);
    color: #664a1a
}

.page-pay-better .page-pay-gifts-confirm,.page-pay-better .page-pay-gifts-mobile {
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(236,187,86,.4)),to(rgba(203,151,43,.4)));
    background-image: linear-gradient(90deg,rgba(236,187,86,.4),rgba(203,151,43,.4));
    border: 1px solid rgba(236,187,86,.2)
}

.page-pay-better .page-pay-gifts-confirm .gifts-bar-icon,.page-pay-better .page-pay-gifts-mobile .gifts-bar-icon {
    background-image: url(../img/tag_gift_text2.4b08ceef.png)
}

.page-pay-better .page-pay-gifts-confirm .gifts-title,.page-pay-better .page-pay-gifts-mobile .gifts-title {
    color: #f9e7aa
}

.page-pay-better .page-pay-gifts-confirm .gifts-bar span,.page-pay-better .page-pay-gifts-mobile .gifts-bar span {
    color: rgba(249,231,170,.5)
}

.page-pay-better .page-pay-gifts-confirm .gifts-list,.page-pay-better .page-pay-gifts-mobile .gifts-list {
    background: rgba(18,22,26,.5)
}

.page-pay-better .page-pay-gifts-confirm .gifts-item .gifts-item-title,.page-pay-better .page-pay-gifts-mobile .gifts-item .gifts-item-title {
    color: #f9e7aa
}

.page-pay-better .page-pay-gifts-confirm .gifts-item .gifts-item-desc,.page-pay-better .page-pay-gifts-mobile .gifts-item .gifts-item-desc {
    color: rgba(249,231,170,.5)
}

.page-pay-better .page-pay-gifts-confirm .gifts-confirm-content,.page-pay-better .page-pay-gifts-mobile .gifts-confirm-content {
    color: #f9e7aa
}

.page-pay-better .page-pay-privileges-mobile .privileges-content ul li p {
    color: #ffecc5
}

.page-pay-better .page-pay-privileges-mobile .swiper-pagination .swiper-pagination-bullet-active {
    background: rgba(255,236,197,.7)
}

.page-pay-interval .page-pay-recharges-mobile ul li.active {
    background: rgba(59,98,196,.2);
    border: 2px solid #3b62c4
}

.page-pay-interval .page-pay-recharges-mobile ul li.active.has-gift:before {
    background-image: url(../img/tag_gift_active3.9c21ce50.png)
}

.page-pay-interval .page-pay-recharges-mobile ul li.active .recharge-final-price {
    color: #8fe6ff
}

.page-pay-interval .page-pay-recharges-mobile ul li.active .recharge-daliy-price {
    background: rgba(59,98,196,.2);
    color: #8fe6ff
}

.page-pay-interval .page-pay-recharges-mobile ul li.active .recharge-daliy-price .recharge-origin-price {
    color: rgba(143,230,255,.5)
}

.page-pay-interval .page-pay-recharges-mobile ul li .recharge-tag {
    background-image: -webkit-gradient(linear,left top,right top,from(#d5fffb),to(#8fe6ff));
    background-image: linear-gradient(90deg,#d5fffb,#8fe6ff);
    color: #203156
}

.page-pay-interval .page-pay-gifts-confirm,.page-pay-interval .page-pay-gifts-mobile {
    background-image: -webkit-gradient(linear,right top,left top,from(rgba(59,98,196,.4)),to(rgba(143,230,255,.4)));
    background-image: linear-gradient(270deg,rgba(59,98,196,.4),rgba(143,230,255,.4));
    border: 1px solid rgba(143,230,255,.2)
}

.page-pay-interval .page-pay-gifts-confirm .gifts-bar-icon,.page-pay-interval .page-pay-gifts-mobile .gifts-bar-icon {
    background-image: url(../img/tag_gift_text3.a16949b9.png)
}

.page-pay-interval .page-pay-gifts-confirm .gifts-title,.page-pay-interval .page-pay-gifts-mobile .gifts-title {
    color: #8fe6ff
}

.page-pay-interval .page-pay-gifts-confirm .gifts-bar span,.page-pay-interval .page-pay-gifts-mobile .gifts-bar span {
    color: rgba(143,230,255,.5)
}

.page-pay-interval .page-pay-gifts-confirm .gifts-bar span+i.gifts-fold-icon,.page-pay-interval .page-pay-gifts-confirm .gifts-bar span+i.gifts-unfold-icon,.page-pay-interval .page-pay-gifts-mobile .gifts-bar span+i.gifts-fold-icon,.page-pay-interval .page-pay-gifts-mobile .gifts-bar span+i.gifts-unfold-icon {
    background-image: url(../img/icon_ME_arrow_up_blue_16@3x.6d093845.png)
}

.page-pay-interval .page-pay-gifts-confirm .gifts-list,.page-pay-interval .page-pay-gifts-mobile .gifts-list {
    background: rgba(26,37,59,.5)
}

.page-pay-interval .page-pay-gifts-confirm .gifts-item .gifts-item-title,.page-pay-interval .page-pay-gifts-mobile .gifts-item .gifts-item-title {
    color: #8fe6ff
}

.page-pay-interval .page-pay-gifts-confirm .gifts-item .gifts-item-desc,.page-pay-interval .page-pay-gifts-mobile .gifts-item .gifts-item-desc {
    color: rgba(143,230,255,.5)
}

.page-pay-interval .page-pay-gifts-confirm .gifts-confirm-content,.page-pay-interval .page-pay-gifts-mobile .gifts-confirm-content {
    color: #8fe6ff
}

.page-pay-charges-qrcode {
    position: relative;
    max-width: 250px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    box-sizing: border-box
}

.page-pay-charges-qrcode>p {
    margin-top: 20px
}

.page-pay-charges-qrcode>p .icon {
    margin: 0 4px
}

.page-pay-charges-qrcode>p span {
    margin-left: 4px
}

.page-pay-charges-qrcode .qrcode-img {
    position: relative;
    height: 0;
    padding: 0 0 100% 0
}

.page-pay-charges-qrcode .qrcode-img canvas,.page-pay-charges-qrcode .qrcode-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 8px solid #fff
}

.page-pay-charges-qrcode .qrcode-b {
    position: absolute;
    width: 20%;
    height: 20%
}

.page-pay-charges-qrcode .qrcode-b:first-child {
    top: -4px;
    left: -4px;
    border-left: 2px solid #03c47e;
    border-top: 2px solid #03c47e
}

.page-pay-charges-qrcode .qrcode-b:nth-child(2) {
    top: -4px;
    right: -4px;
    border-right: 2px solid #03c47e;
    border-top: 2px solid #03c47e
}

.page-pay-charges-qrcode .qrcode-b:nth-child(3) {
    bottom: -4px;
    left: -4px;
    border-left: 2px solid #03c47e;
    border-bottom: 2px solid #03c47e
}

.page-pay-charges-qrcode .qrcode-b:nth-child(4) {
    bottom: -4px;
    right: -4px;
    border-right: 2px solid #03c47e;
    border-bottom: 2px solid #03c47e
}

.gamerecommend {
    position: relative
}

.gamerecommend .search-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.gamerecommend .search-bar .notice {
    width: 66.25%
}

.gamerecommend .search-bar .pcsearch {
    width: 32.386%
}

.gamerecommend .recommend-swiper {
    position: relative;
    margin: 40px auto;
    padding-top: 27.8%;
    height: 0;
    border-radius: 4px;
    overflow: hidden;
    background-size: 100% auto!important;
    background-position: 100%!important;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    box-shadow: inset 45px 0 30px -8px rgba(50,50,50,.47)
}

.gamerecommend .recommend-swiper:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    pointer-events: none;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    background-size: 100% 100%!important
}

.gamerecommend .recommend-swiper .recommend-swiper-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content {
    width: 76%;
    height: 100%;
    background-color: #28333d
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-container {
    height: 100%
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item {
    position: relative;
    height: 100%
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .swiper-img-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game {
    width: 422px;
    position: absolute;
    bottom: 50px;
    left: 24px
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game.recommend-activity .gameinfo {
    margin-top: 8px
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .title-name {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-self: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .title-name span {
    margin-right: 8px;
    text-shadow: 0 0 6px rgba(0,0,0,.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .title-name.activity {
    margin-bottom: 24px
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .label {
    margin: 8px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .label .label-item {
    margin-right: 6px;
    display: inline-block;
    padding: 3px 12px;
    height: 24px;
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.3)),color-stop(51%,rgba(0,0,0,.5)),to(rgba(0,0,0,.3)));
    background-image: linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,.5) 51%,rgba(0,0,0,.3));
    border-radius: 13px;
    font-size: 12px;
    color: hsla(0,0%,100%,.8);
    text-align: center;
    box-sizing: border-box
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .gameinfo {
    text-shadow: 0 0 3px rgba(0,0,0,.65);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .g-Btn {
    margin-top: 24px;
    padding: 0 16px;
    width: 120px;
    height: 40px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-weight: 400;
    line-height: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .g-Btn.g-Btn-green {
    border: 1px solid #03c47e;
    background: #03c47e;
    color: #fff;
    font-weight: 700
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .g-Btn.g-Btn-green:focus,.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .g-Btn.g-Btn-green:hover {
    -webkit-transition: background-image 3s ease-in-out 1s;
    transition: background-image 3s ease-in-out 1s;
    background-image: radial-gradient(ellipse farthest-corner at bottom,#aafced 0,#03c47e 65%)
}

.gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-img {
    width: 100%;
    max-height: 100%;
    object-fit: cover
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination {
    margin-left: -1px;
    width: -webkit-calc(24% + 1px);
    width: calc(24% + 1px);
    height: 100%;
    position: relative;
    background: rgba(40,51,61,.7);
    overflow-y: auto;
    z-index: 1
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item {
    width: 100%;
    height: 16.66667%;
    box-sizing: border-box;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 9px 9px 9px 24px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: -webkit-calc(100% - 48px);
    width: calc(100% - 48px);
    height: 1px;
    background-color: hsla(0,0%,100%,.04)
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item .info {
    margin-right: 16px;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    line-height: 100%;
    overflow: hidden
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item .info p {
    opacity: .5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item .info .subtitle {
    margin-top: 8px
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item .logo {
    height: 100%;
    border-radius: 12px;
    overflow: hidden
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item .logo.logo-pc {
    border-radius: 8px
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item .logo img {
    height: 100%
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item.active-item {
    background-image: -webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,.2)),to(hsla(0,0%,100%,0)));
    background-image: linear-gradient(90deg,hsla(0,0%,100%,.2),hsla(0,0%,100%,0));
    border-radius: 4px
}

.gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item.active-item .info .title {
    opacity: 1
}

.gamerecommend .tail {
    margin: 60px 0;
    color: #8b969f;
    font-size: 16px;
    text-align: center
}

.gamerecommend .tail .green {
    cursor: pointer;
    color: #03c47e
}

.recommend-share-pc {
    width: 100%;
    padding: 0 12px;
    margin-bottom: 40px;
    box-sizing: border-box
}

.recommend-share-pc .share-pc-cards .card-item {
    width: 25%;
    width: -webkit-calc(25% - 12px);
    width: calc(25% - 12px)
}

@media (max-width: 1024px) {
    .recommend-share-pc .share-pc-cards .card-item {
        width:33.33%;
        width: -webkit-calc(33.33333% - 16px);
        width: calc(33.33333% - 16px);
        min-width: 262px
    }
}

@media (max-width: 1440px) {
    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game {
        width:302px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item {
        height: -webkit-calc(20% - 16px);
        height: calc(20% - 16px)
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item.active-item {
        height: 80px
    }
}

@media (max-width: 1280px) {
    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game {
        width:262px;
        bottom: 24px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .title-name {
        font-size: 18px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .label {
        margin: 4px 0
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .gameinfo {
        font-size: 12px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .g-Btn {
        margin-top: 12px;
        height: 32px;
        line-height: 30px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item {
        height: -webkit-calc(20% - 12px);
        height: calc(20% - 12px);
        padding: 8px 8px 8px 12px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item .info {
        margin-right: 8px;
        font-size: 14px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item.active-item {
        height: 60px
    }
}

@media (max-width: 1024px) {
    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game {
        width:262px;
        bottom: 24px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .title-name {
        font-size: 18px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .gameinfo {
        font-size: 12px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .g-Btn {
        height: 32px;
        line-height: 30px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item {
        height: 35px
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .recommend-pagination .pagination-item.active-item {
        height: 60px
    }
}

@media only screen and (max-width: 768px) {
    .gamerecommend .pcsearch {
        margin-top:0
    }

    .gamerecommend .recommend-swiper .recommend-swiper-box .swiper-content .swiper-item .recommend-game .gameinfo {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.goodgame {
    position: relative;
    min-height: 200px;
    margin-bottom: 40px
}

.goodgame .title {
    margin-bottom: 16px;
    font-size: 20px;
    color: #fff;
    font-weight: 600
}

.goodgame .swiper-box .swiper-content {
    width: 100%;
    height: 100%;
    overflow: visible
}

.goodgame .swiper-box .swiper-content .swiper-skeleton .swiper-img {
    height: 237px
}

.goodgame .swiper-box .swiper-content .swiper-item {
    height: 100%;
    box-sizing: border-box;
    position: relative;
    background: #28333d;
    border-radius: 4px
}

.goodgame .swiper-box .swiper-content .swiper-item .swiper-img {
    width: 100%;
    position: relative;
    padding-top: 57%;
    height: 0
}

.goodgame .swiper-box .swiper-content .swiper-item .swiper-img .img-box,.goodgame .swiper-box .swiper-content .swiper-item .swiper-img .img-box .tag {
    position: absolute;
    top: 0;
    left: 0
}

.goodgame .swiper-box .swiper-content .swiper-item .swiper-img .img-box .banner-img {
    width: 100%;
    border-radius: 4px;
    vertical-align: bottom
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box {
    padding: 0 8px;
    height: 78px
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box,.goodgame .swiper-box .swiper-content .swiper-item .flex-box .left-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .left-box {
    width: -webkit-calc(100% - 72px);
    width: calc(100% - 72px);
    height: 100%
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .logo {
    margin: 0 8px;
    width: 46px;
    height: 46px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .logo.no-logo {
    border: 1px solid hsla(0,0%,100%,.2);
    border-radius: 12px;
    background-color: hsla(0,0%,100%,.08)
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .logo .logo-box {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    height: 100%;
    overflow: hidden
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .logo .logo-box.pc-logo:before {
    content: "pc";
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 16px;
    line-height: 12px;
    border-top-left-radius: 4px;
    background-size: 100% 100%;
    background-image: url(../img/tag_pc.7ccf6d86.png);
    padding-left: 5px;
    box-sizing: border-box;
    font-size: 12px;
    color: #fff
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .logo .logo-box .game-logo {
    height: 100%;
    width: 100%;
    border-radius: 10px
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .logo .logo-box .game-logo.pc-game {
    width: auto;
    height: 100%;
    border-radius: 8px
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .info .gamename {
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .info .gameinfo {
    margin-top: 4px;
    font-size: 14px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.goodgame .swiper-box .swiper-content .swiper-item .flex-box .g-Btn {
    margin: 0 8px;
    padding: 0;
    width: 72px;
    height: 32px;
    line-height: 30px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.goodgame .swiper-box .swiper-content .swiper-item .card-box {
    position: absolute;
    top: -50px;
    left: 0;
    opacity: 0;
    z-index: 2;
    width: 100px;
    height: 0
}

.goodgame .swiper-box .swiper-content .swiper-item:hover .card-box {
    position: absolute;
    width: 326px;
    height: 510px;
    opacity: 1;
    z-index: 1
}

.goodgame .swiper-navigation {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    width: 64px;
    height: 24px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    z-index: 0
}

.goodgame .swiper-navigation .swiper-button-next,.goodgame .swiper-navigation .swiper-button-prev {
    margin-top: 0;
    position: static;
    width: 24px;
    height: 24px;
    border-radius: 50%
}

.goodgame .swiper-navigation .swiper-button-next:after,.goodgame .swiper-navigation .swiper-button-prev:after {
    content: ""
}

.goodgame .swiper-navigation .swiper-button-prev {
    background: url(../img/btn_arrow_left_24_nor@1x.9f8b6f94.png) no-repeat 50%
}

.goodgame .swiper-navigation .swiper-button-prev:hover {
    background: url(../img/btn_arrow_left_24_hover@1x.58dced7f.png) no-repeat 50%
}

.goodgame .swiper-navigation .swiper-button-prev.swiper-button-disabled {
    opacity: 1;
    background: url(../img/btn_arrow_left_24_disabled@1x.cba62cac.png) no-repeat 50%
}

.goodgame .swiper-navigation .swiper-button-next {
    background: url(../img/btn_arrow_right_24_nor@1x.4707149b.png) no-repeat 50%
}

.goodgame .swiper-navigation .swiper-button-next:hover {
    background: url(../img/btn_arrow_right_24_hover@1x.3521e808.png) no-repeat 50%
}

.goodgame .swiper-navigation .swiper-button-next.swiper-button-disabled {
    opacity: 1;
    background: url(../img/btn_arrow_right_24_disabled@1x.0de25d56.png) no-repeat 50%
}

.goodgame .recommendcard-box {
    position: absolute;
    width: 25%;
    min-height: 300px;
    z-index: 3
}

.goodgame .recommendcard {
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.goodgame .recommendcard.scale-up-center {
    -webkit-animation: scale-up-center .3s cubic-bezier(.25,.46,.45,.94) both;
    animation: scale-up-center .3s cubic-bezier(.25,.46,.45,.94) both
}

@media (max-width: 1280px) {
    .goodgame .swiper-box .swiper-content .swiper-skeleton .swiper-img {
        height:148px
    }

    .goodgame .swiper-box .swiper-content .swiper-item .flex-box .info .gamename {
        font-size: 14px
    }

    .goodgame .swiper-box .swiper-content .swiper-item .flex-box .info .gameinfo {
        font-size: 12px
    }
}

@media (max-width: 1024px) {
    .goodgame .recommendcard-box {
        width:33.33333%
    }
}

@-webkit-keyframes scale-up-top {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes scale-up-top {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.scale-up-top {
    -webkit-animation: scale-up-top .5s cubic-bezier(.39,.575,.565,1) both;
    animation: scale-up-top .5s cubic-bezier(.39,.575,.565,1) both
}

.recommendcard {
    overflow: hidden;
    background: #304051;
    border: .5px solid hsla(0,0%,100%,.2);
    box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
    border-radius: 4px
}

.recommendcard .recommendcard-content {
    position: relative
}

.recommendcard .recommendcard-content.hide-content {
    height: 0;
    overflow: hidden;
    padding-top: 0
}

.recommendcard .swiper-content-box {
    position: relative;
    padding-top: 56%
}

.recommendcard .swiper-content-box .swiper-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.recommendcard .swiper-content-box .swiper-box .swiper-container {
    height: 100%
}

.recommendcard .swiper-content-box .slide-container {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: transparent;
    background: transparent;
    overflow: hidden
}

.recommendcard .swiper-content-box .slide-container .swiper-container {
    height: 100%
}

.recommendcard .swiper-content-box .slide-container .slide-img {
    max-width: 100%;
    display: block
}

.recommendcard .swiper-content-box:hover .swiper-button-next,.recommendcard .swiper-content-box:hover .swiper-button-next.swiper-button-disabled,.recommendcard .swiper-content-box:hover .swiper-button-prev,.recommendcard .swiper-content-box:hover .swiper-button-prev.swiper-button-disabled {
    opacity: 1
}

.recommendcard .swiper-content-box .pagination-shadow {
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 3;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 32px;
    background: url(../img/pic_shadow_card_pic_32h@1x.bb608ef3.png) no-repeat 50%
}

.recommendcard .swiper-button-next,.recommendcard .swiper-button-prev {
    width: 40px;
    height: 40px;
    opacity: 0
}

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

.recommendcard .swiper-button-next:after,.recommendcard .swiper-button-prev:after {
    content: ""
}

.recommendcard .swiper-button-prev {
    background: url(../img/btn_pic_left_40_nor@1x.b74f969e.png) no-repeat 50%
}

.recommendcard .swiper-button-prev.swiper-button-disabled,.recommendcard .swiper-button-prev:hover {
    background: url(../img/btn_pic_left_40_hover@1x.b22186fc.png) no-repeat 50%
}

.recommendcard .swiper-button-next {
    background: url(../img/btn_pic_right_40_nor@1x.36e7e046.png) no-repeat 50%
}

.recommendcard .swiper-button-next.swiper-button-disabled,.recommendcard .swiper-button-next:hover {
    background: url(../img/btn_pic_right_40_hover@1x.7b022b6a.png) no-repeat 50%
}

.recommendcard .swiper-pagination-bullet {
    height: 6px;
    width: 6px;
    background: hsla(0,0%,100%,.3)
}

.recommendcard .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff;
    border-radius: 3px;
    width: 12px
}

.recommendcard .video-content {
    padding: .5px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background-color: #28333d
}

.recommendcard .video-content video {
    width: 100%;
    display: block
}

.recommendcard .video-content .muted {
    width: 32px;
    height: 24px;
    position: absolute;
    left: 0;
    bottom: 0;
    border: 1px solid hsla(0,0%,100%,.04);
    border-left: none;
    border-bottom: none;
    border-radius: 0 8px 0 0;
    background: url(../img/btn_sound_off_nor@1x.ba45eb09.png) no-repeat 50%;
    background-color: rgba(26,26,26,.65);
    background-size: 14px 14px;
    cursor: pointer
}

.recommendcard .video-content .muted:hover {
    background: url(../img/btn_sound_off_hover@1x.27d89c65.png) no-repeat 50%;
    background-color: rgba(26,26,26,.65)
}

.recommendcard .video-content .muted.sound {
    background: url(../img/btn_sound_on_nor@1x.d7464da9.png) no-repeat 50%;
    background-color: rgba(26,26,26,.65);
    background-size: 14px 14px
}

.recommendcard .video-content .muted.sound:hover {
    background: url(../img/btn_sound_on_hover@1x.32c6fb40.png) no-repeat 50%;
    background-color: rgba(26,26,26,.65)
}

.recommendcard .game-content {
    padding: 12px 16px 12px 16px;
    box-sizing: border-box;
    overflow: hidden
}

.recommendcard .game-content .gamename {
    font-size: 16px;
    color: #fff;
    letter-spacing: 0
}

.recommendcard .game-content .tag {
    margin-top: 6px;
    font-size: 14px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommendcard .game-content .tag .line {
    margin: 0 -1px;
    display: inline-block;
    font-size: 8px;
    color: rgba(139,150,159,.5);
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.recommendcard .game-content .gameinfo {
    line-height: 16px;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.recommendcard .game-content .company,.recommendcard .game-content .gameinfo {
    margin-top: 6px;
    font-size: 14px;
    color: #8b969f;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommendcard .game-content .company {
    white-space: nowrap
}

.recommendcard .game-content .company span {
    margin-right: 8px;
    position: relative
}

.recommendcard .game-content .company span:not(:first-child) {
    padding-left: 8px
}

.recommendcard .game-content .company span:not(:first-child):after {
    content: "";
    border-left: 1px solid hsla(0,0%,100%,.08);
    height: 10px;
    position: absolute;
    top: 5px;
    left: 0
}

.recommendcard .game-content .company .line {
    margin: 0 8px;
    font-size: 12px
}

.recommendcard .btn-content {
    padding: 0 16px 16px 16px;
    box-sizing: border-box
}

.recommendcard .btn-content .g-Btn.g-Btn-green2 {
    width: 100%!important;
    height: 32px;
    line-height: 30px
}

.recommendcard .reward-content {
    padding: 0 16px 0 16px;
    background: #304051;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.recommendcard .reward-content.full-content .reward-info {
    min-height: 400px;
    max-height: 500px;
    overflow-y: auto
}

.recommendcard .reward-content .reward-title {
    padding-top: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    border-top: 1px solid hsla(0,0%,100%,.08)
}

.recommendcard .reward-content .reward-title.open {
    border: none
}

.recommendcard .reward-content .reward-title .open-btn {
    background: rgba(3,196,126,.1);
    border-radius: 4px;
    font-size: 12px;
    color: #03c47e;
    text-align: center;
    width: 64px;
    height: 24px;
    line-height: 22px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.recommendcard .reward-content .reward-title .open-btn:hover {
    cursor: pointer;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(3,196,126,.1)),to(rgba(3,196,126,.3)));
    background-image: linear-gradient(180deg,rgba(3,196,126,.1),rgba(3,196,126,.3))
}

.recommendcard .reward-content .reward-title .open-btn .close,.recommendcard .reward-content .reward-title .open-btn .open {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.recommendcard .reward-content .reward-title .open-btn .icon-fold {
    width: 16px;
    height: 16px;
    background: url(../img/btn_fold_green_10_nor@1x.b374b66f.png) no-repeat 50%
}

.recommendcard .reward-content .reward-title .open-btn .icon-unfold {
    width: 16px;
    height: 16px;
    background: url(../img/btn_unfold_green_10_nor@1x.5aba840d.png) no-repeat 50%
}

.recommendcard .reward-content .reward-info {
    margin: 8px 0 8px 0;
    max-height: 93px;
    overflow: hidden;
    font-size: 14px;
    color: #8b969f;
    letter-spacing: 0
}

.recommendcard .reward-content .reward-info.show-all {
    max-height: -webkit-calc(100% - 56px);
    max-height: calc(100% - 56px);
    overflow: auto
}

.recommendcard .reward-content .reward-info .htmltext {
    width: 100%;
    height: 100%;
    overflow: auto
}

.recommendcard .reward-content .reward-info .htmltext img {
    max-width: 100%;
    display: inline-block
}

@media (max-width: 1280px) {
    .recommendcard .game-content .gamename {
        font-size:14px
    }

    .recommendcard .game-content .company,.recommendcard .game-content .gameinfo,.recommendcard .game-content .tag {
        font-size: 12px
    }

    .recommendcard .reward-content .reward-title {
        font-size: 14px
    }

    .recommendcard .reward-content .reward-info {
        font-size: 12px
    }
}

.hotgame-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -12px
}

.hotgame-content .hotgame {
    margin-bottom: 40px;
    width: 33.33333333%;
    padding: 0 12px;
    box-sizing: border-box;
    position: relative
}

.hotgame-content .hotgame .title {
    margin-bottom: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.hotgame-content .hotgame .title .title-name {
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.hotgame-content .hotgame .title .more {
    font-size: 16px;
    color: #8b969f;
    letter-spacing: 0;
    font-weight: 400;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.hotgame-content .hotgame .title .more:hover {
    cursor: pointer;
    color: #fff
}

.hotgame-content .hotgame .title .more:hover .icon-more {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHklEQVR4AWMgGfTNWmTfPW3BGxA9uBVjKqS3IkoAAD4rNfmWt5TOAAAAAElFTkSuQmCC) no-repeat 50%
}

.hotgame-content .hotgame .title .more .icon-more {
    width: 10px;
    height: 10px;
    background: url(../img/btn_enter_grey_10_nor@1x.b3de46bd.png) no-repeat 50%;
    background-size: 100% 100%
}

.hotgame-content .hotgame .hotgame-list {
    padding: 8px 0;
    width: 100%;
    height: 464px;
    background: #28333d;
    border-radius: 4px;
    box-sizing: border-box
}

.hotgame-content .hotgame .hotgame-list .flex-box {
    height: 80px;
    padding: 16px
}

.hotgame-content .hotgame .hotgame-list .flex-box,.hotgame-content .hotgame .hotgame-list .flex-box .game-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 100%;
    width: -webkit-calc(100% - 72px);
    width: calc(100% - 72px)
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .logo {
    width: 80px;
    height: 100%;
    text-align: center
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .logo.no-logo {
    border: 1px solid hsla(0,0%,100%,.2);
    border-radius: 12px;
    background-color: hsla(0,0%,100%,.08)
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .logo .logo-box {
    position: relative;
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 100%;
    overflow: hidden
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .logo .logo-box.pc-logo:before {
    content: "pc";
    position: absolute;
    top: 0;
    left: 0;
    width: 33px;
    height: 16px;
    line-height: 12px;
    border-top-left-radius: 4px;
    background-size: 100% 100%;
    background-image: url(../img/tag_pc.7ccf6d86.png);
    box-sizing: border-box;
    font-size: 12px;
    color: #fff
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .logo .logo-box .game-logo {
    width: 100%;
    height: 100%;
    border-radius: 20px
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .logo .logo-box .game-logo.pc-game {
    width: auto;
    height: 100%;
    border-radius: 8px
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .info {
    margin: 0 8px;
    padding-top: 2px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    box-sizing: border-box
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .info .gamename {
    margin-bottom: 2px;
    font-size: 16px;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .info .gamename .text {
    display: inline-block;
    max-width: -webkit-calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin-right: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .info .gamename .freetag {
    vertical-align: middle
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .info .tag {
    margin-bottom: 2px;
    font-size: 14px;
    color: #8b969f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .info .tag .line {
    margin: 0 -1px;
    display: inline-block;
    font-size: 8px;
    color: rgba(139,150,159,.5);
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .info .gameinfo {
    font-size: 14px;
    color: #8b969f;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .card-box {
    padding-top: 20px;
    position: absolute;
    width: 100%;
    top: 72px;
    left: 0;
    z-index: -1;
    opacity: 0;
    -webkit-transition: all .1s linear;
    transition: all .1s linear
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box .recommendcard {
    width: 100%;
    min-height: 300px
}

.hotgame-content .hotgame .hotgame-list .flex-box .game-box:hover .card-box {
    opacity: 1;
    z-index: 2
}

.hotgame-content .hotgame .hotgame-list .flex-box .g-Btn {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin: 0 0 0 0;
    padding: 0;
    width: 72px;
    height: 32px;
    line-height: 30px
}

.hotgame-content .recommendcard-box {
    position: absolute;
    width: -webkit-calc(100% - 88px);
    width: calc(100% - 88px);
    z-index: 3
}

.hotgame-content .recommendcard-box .recommendcard {
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.hotgame-content .recommendcard-box .recommendcard.scale-up-center {
    -webkit-animation: scale-up-center .3s cubic-bezier(.25,.46,.45,.94) both;
    animation: scale-up-center .3s cubic-bezier(.25,.46,.45,.94) both
}

@media (max-width: 1280px) {
    .hotgame-content .hotgame .hotgame-list .flex-box .game-box .info {
        padding-top:6px
    }

    .hotgame-content .hotgame .hotgame-list .flex-box .game-box .info .gamename {
        font-size: 14px
    }

    .hotgame-content .hotgame .hotgame-list .flex-box .game-box .info .gameinfo,.hotgame-content .hotgame .hotgame-list .flex-box .game-box .info .tag {
        font-size: 12px
    }
}

@media (max-width: 1024px) {
    .hotgame-content .hotgame {
        margin-bottom:40px;
        width: 50%
    }

    .hotgame-content .recommendcard-box {
        width: -webkit-calc(100% - 88px);
        width: calc(100% - 88px)
    }
}

@media (max-width: 768px) {
    .hotgame-content .hotgame {
        margin-bottom:40px;
        width: 100%
    }

    .hotgame-content .recommendcard,.hotgame-content .recommendcard-box {
        width: 286px!important
    }
}

.new-user-benefits {
    background: #12161a;
    padding-bottom: 40px;
    box-sizing: border-box
}

.new-user-benefits .topnav h1 {
    background: linear-gradient(106.88deg,#fff 12.02%,#ffed8f 88.73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: 400
}

.new-user-benefits .topnav .topnav-fixed {
    background: #12161a
}

.new-user-benefits .benefits-con {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 0 16px 120px 16px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.new-user-benefits .upgrade-pay {
    width: 100%;
    position: fixed;
    z-index: 9;
    padding-top: 16px;
    padding-bottom: -webkit-calc(constant(safe-area-inset-bottom) + 16px);
    padding-bottom: calc(constant(safe-area-inset-bottom) + 16px);
    padding-bottom: -webkit-calc(env(safe-area-inset-bottom) + 16px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
    bottom: 0;
    left: 0;
    text-align: center;
    background: rgba(18,22,26,.9)
}

.new-user-benefits .upgrade-pay:before {
    content: "";
    position: absolute;
    left: 0;
    top: -40px;
    width: 100%;
    height: 40px;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(18,22,26,.0001)),to(rgba(18,22,26,.9)));
    background: linear-gradient(180deg,rgba(18,22,26,.0001),rgba(18,22,26,.9))
}

.new-user-benefits .upgrade-pay .g-Btn {
    margin: 0 auto;
    width: 311px;
    height: 52px;
    border-radius: 32px;
    line-height: 20px
}

.new-user-benefits .upgrade-pay .pay-charges-license {
    margin-top: 8px;
    padding-bottom: 10px;
    font-size: 11px
}

.new-user-benefits .upgrade-pay .pay-charges-license a {
    text-decoration: none;
    color: #8b969f
}

.new-user-benefits .upgrade-pay .pay-charges-license span {
    margin: 8px;
    opacity: .5;
    color: #8b969f
}

.confirm-shade.benefits-confirm .cofirm {
    max-width: 768px;
    max-height: 446px
}

.confirm-shade.benefits-confirm .cofirm-cont {
    padding: 0;
    width: 768px;
    height: 446px;
    background: #12161a;
    border: 1px solid #344350;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden
}

.confirm-shade.benefits-confirm .cofirm-cont .confirm-head {
    background: linear-gradient(181.1deg,rgba(235,197,153,.15) .98%,rgba(235,197,153,0) 99.06%);
    height: 72px;
    text-align: center;
    line-height: 80px;
    position: relative
}

.confirm-shade.benefits-confirm .cofirm-cont .confirm-head h1 {
    margin: 0;
    background: linear-gradient(106.88deg,#fff 12.02%,#ffed8f 88.73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: 700;
    font-size: 28px
}

.confirm-shade.benefits-confirm .cofirm-cont .confirm-head .title-img {
    margin-top: 20px;
    width: 196px
}

.confirm-shade.benefits-confirm .cofirm-cont .confirm-head .icon {
    position: absolute;
    top: 28px;
    right: 24px
}

.confirm-shade.benefits-confirm .benefits-con {
    height: 302px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 8px 16px
}

.confirm-shade.benefits-confirm .benefits-con .left-box {
    margin-right: 10px;
    width: 384px
}

.confirm-shade.benefits-confirm .benefits-con .right-box {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.confirm-shade.benefits-confirm .benefits-con .left-box,.confirm-shade.benefits-confirm .benefits-con .right-box {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    box-sizing: border-box;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden
}

.confirm-shade.benefits-confirm .benefits-con .left-box .benefits-card,.confirm-shade.benefits-confirm .benefits-con .right-box .benefits-card {
    margin: 0;
    width: -webkit-calc(50% - 5px);
    width: calc(50% - 5px)
}

.confirm-shade.benefits-confirm .benefits-con .left-box .benefits-card.type0,.confirm-shade.benefits-confirm .benefits-con .right-box .benefits-card.type0 {
    height: 100%
}

.confirm-shade.benefits-confirm .benefits-con .left-box .benefits-card.type1,.confirm-shade.benefits-confirm .benefits-con .right-box .benefits-card.type1 {
    height: 190px
}

.confirm-shade.benefits-confirm .benefits-con .left-box .benefits-card.type2,.confirm-shade.benefits-confirm .benefits-con .right-box .benefits-card.type2 {
    margin-top: 10px;
    width: 100%;
    height: 86px
}

.confirm-shade.benefits-confirm .cofirm-btns {
    display: none
}

.confirm-shade.benefits-confirm .confirm-bottom {
    height: 72px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background: linear-gradient(181.1deg,rgba(235,197,153,0) .98%,rgba(235,197,153,.15) 99.06%)
}

.confirm-shade.benefits-confirm .confirm-bottom .vip-img {
    width: 100px;
    height: 100%
}

.confirm-shade.benefits-confirm .confirm-bottom .pay-box {
    padding: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    box-sizing: border-box
}

.confirm-shade.benefits-confirm .confirm-bottom .pay-box .text {
    color: #f9eac1;
    margin-right: 16px;
    font-weight: 600
}

.confirm-shade.benefits-confirm .confirm-bottom .pay-box .g-Btn {
    width: 240px;
    height: 48px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    border-radius: 8px
}

.benefits-card {
    margin-bottom: 10px;
    width: -webkit-calc(50% - 6px);
    width: calc(50% - 6px);
    height: 256px;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    border-radius: 8px;
    position: relative
}

.benefits-card.type0 .title {
    color: #fff
}

.benefits-card.type1 {
    height: 192px
}

.benefits-card.type1 .title {
    color: #fff
}

.benefits-card.type2 {
    padding: 16px;
    width: 100%;
    height: 86px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.benefits-card.type2 .info {
    margin-right: 8px;
    padding: 0
}

.benefits-card.type2 .info .title {
    color: #fff;
    margin-bottom: 4px
}

.benefits-card.type2 .time-box {
    position: inherit;
    padding: 3px 4px;
    width: 142px;
    height: 58px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    box-sizing: border-box
}

.benefits-card.type2 .time-box .text {
    display: none
}

.benefits-card.type2 .time-box .time {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 3px;
    text-align: center
}

.benefits-card.type2 .time-box .g-Btn {
    padding: 0
}

.benefits-card.high-light .card-img {
    opacity: 1
}

.benefits-card.high-light .time-box {
    border: 1px solid transparent;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.8)),to(rgba(0,0,0,.8))),-webkit-gradient(linear,left top,left bottom,from(rgba(249,234,193,.9)),to(rgba(249,234,193,.2)));
    background-image: linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.8)),linear-gradient(180deg,rgba(249,234,193,.9),rgba(249,234,193,.2))
}

.benefits-card.dark:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    border-radius: 8px
}

.benefits-card.dark .time-box .time {
    color: #8b969f
}

.benefits-card.dark .time-box .time .num {
    color: #fff;
    background: -webkit-gradient(linear,right top,left top,from(rgba(40,51,61,.9)),to(rgba(77,98,117,.9)));
    background: linear-gradient(270deg,rgba(40,51,61,.9),rgba(77,98,117,.9));
    border-radius: 4px
}

.benefits-card.dark .time-box .g-Btn {
    color: #b4c0c9;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,.9)),color-stop(97.76%,rgba(77,98,117,.9)));
    background: linear-gradient(180deg,rgba(40,51,61,.9),rgba(77,98,117,.9) 97.76%);
    border: transparent
}

.benefits-card.dark .time-box .g-Btn.on {
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,.9)),color-stop(97.76%,rgba(77,98,117,.9)))!important;
    background-image: linear-gradient(180deg,rgba(40,51,61,.9),rgba(77,98,117,.9) 97.76%)!important
}

.benefits-card .card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden
}

.benefits-card .card-img img {
    width: 100%
}

.benefits-card .info {
    position: relative;
    padding: 12px
}

.benefits-card .info .title {
    margin: 0;
    font-size: 14px;
    font-weight: 600
}

.benefits-card .info .content {
    font-size: 12px;
    color: hsla(0,0%,100%,.5)
}

.benefits-card .time-box {
    padding: 7px 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 68px;
    border: 1px solid transparent;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.8)),to(rgba(0,0,0,.8))),-webkit-gradient(linear,left top,left bottom,from(rgba(139,150,159,.9)),to(rgba(139,150,159,.2)));
    background-image: linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.8)),linear-gradient(180deg,rgba(139,150,159,.9),rgba(139,150,159,.2));
    border-radius: 8px;
    box-sizing: border-box
}

.benefits-card .time-box .time {
    margin-bottom: 6px;
    font-size: 11px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: #f9eac1
}

.benefits-card .time-box .time .num {
    margin: 0 1px;
    display: inline-block;
    width: 18px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    color: #453e32;
    background: -webkit-gradient(linear,right top,left top,color-stop(.04%,#efc678),to(#f9eac1));
    background: linear-gradient(270deg,#efc678 .04%,#f9eac1);
    border-radius: 4px;
    font-weight: 700
}

.benefits-card .time-box .g-Btn {
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    font-weight: 700
}

.oneline {
    white-space: nowrap
}

.oneline,.twoline {
    overflow: hidden;
    text-overflow: ellipsis
}

.twoline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.infomation_page {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 40px
}

.infomation_page .info_page_con {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    margin-right: 24px
}

.infomation_page .info_page_hotgame {
    width: 570px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.info_page_item {
    background: #28333d;
    border-radius: 4px;
    padding: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-bottom: 16px;
    cursor: pointer
}

.info_page_item .info_page_item_con {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.info_page_item .info_page_img {
    width: 168px;
    height: 100px;
    margin-right: 16px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.info_page_item .info_page_img:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid hsla(0,0%,100%,.2)
}

.info_page_item .info_page_img .info_page_img_empty {
    background: hsla(0,0%,100%,.08) url(../img/icon_pic_default_24_white.9aa9b8f5.png) 50% no-repeat;
    background-size: 24px 24px;
    width: 100%;
    height: 100%
}

.info_page_item .info_page_img img {
    width: 100%;
    height: 100%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    object-fit: cover
}

.info_page_item .info_page_title {
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    margin-bottom: 8px
}

.info_page_item .info_page_title span {
    color: #03c47e
}

.info_page_item .info_page_desc,.info_page_item .info_page_time {
    color: #8b969f;
    font-size: 14px;
    line-height: 20px
}

.info_page_item .info_page_time {
    margin-bottom: 8px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    max-width: 100%
}

.info_page_item .info_page_time span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.info_page_item .info_page_time i {
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 8px;
    font-style: normal;
    background: rgba(139,150,159,.16)
}

.hotgame_page {
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0,0,0,.16);
    border-radius: 4px
}

.hotgame_page .hotgame_page_title {
    padding-bottom: 16px;
    border-bottom: 1px solid hsla(0,0%,100%,.04);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 16px
}

.hotgame_page .hotgame_page_title p {
    font-size: 20px;
    line-height: 28px;
    color: #fff;
    font-weight: 700;
    white-space: nowrap
}

.hotgame_page .hotgame_page_title span {
    font-size: 16px;
    line-height: 22px;
    color: hsla(0,0%,100%,.3)
}

.hotgame_page .hotgame_page_more {
    border-top: 1px solid hsla(0,0%,100%,.04);
    padding-top: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: -16px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer
}

.hotgame_page .hotgame_page_more p {
    color: rgba(3,196,126,.75);
    font-size: 14px;
    line-height: 20px;
    margin-right: 2px
}

.hotgame_page .hotgame_page_more i {
    width: 12px;
    opacity: .5
}

.hotgame_page .hotgame_item {
    margin-bottom: 32px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.hotgame_page .hotgame_item:last-child {
    margin-bottom: 0
}

.hotgame_page .hotgame_i_desc {
    margin-right: 16px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    cursor: pointer
}

.hotgame_page .g-Btn {
    width: 72px;
    height: 32px;
    line-height: 32px;
    padding: 0
}

.hotgame_page .hotgame_i_icon {
    border-radius: 10px;
    width: 46px;
    height: 46px;
    margin-right: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.hotgame_page .hotgame_i_icon:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid hsla(0,0%,100%,.2)
}

.hotgame_page .hotgame_i_icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin: 0 auto
}

.hotgame_page .hotgame_i_icon .hotgame_i_icon_empty {
    background: hsla(0,0%,100%,.08) url(../img/icon_pic_default_24_white.9aa9b8f5.png) 50% no-repeat;
    background-size: 24px 24px;
    width: 100%;
    height: 100%
}

.hotgame_page .hotgame_i_icon .hotgame_item_type {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 12px;
    background: url(../img/tag_game_PC_12h@1x.7831a515.png) no-repeat;
    background-size: 100% 100%
}

.hotgame_page .hotgame_i_gamename {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    margin-bottom: 4px
}

.hotgame_page .hotgame_i_lable {
    height: 20px;
    overflow: hidden
}

.hotgame_page .hotgame_i_lable span {
    display: inline-block;
    color: #8b969f;
    font-size: 14px;
    line-height: 20px
}

.hotgame_page .hotgame_i_lable span+span:before {
    content: "";
    width: 1px;
    height: 7px;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    background-color: rgba(139,150,159,.5);
    display: inline-block;
    margin: 0 4px
}

.info_page_m {
    padding: 0 16px 16px
}

.info_page_m .info_item_m {
    background: #28333d;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.info_page_m .info_item_m_icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    margin-right: 8px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.info_page_m .info_item_m_icon:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid hsla(0,0%,100%,.2)
}

.info_page_m .info_item_m_icon .info_item_m_icon_empty {
    background: hsla(0,0%,100%,.08) url(../img/icon_pic_default_24_white.9aa9b8f5.png) 50% no-repeat;
    background-size: 24px 24px;
    width: 100%;
    height: 100%
}

.info_page_m .info_item_m_icon img {
    width: 100%;
    height: 100%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    object-fit: cover
}

.info_page_m .info_item_m_desc {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.info_page_m .info_item_m_desc p {
    margin-bottom: 4px
}

.info_page_m .info_item_m_desc p:first-child span {
    color: #03c47e
}

.info_page_m .info_item_m_desc p:last-child {
    margin-bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.info_page_m .info_item_m_desc p:last-child span {
    color: #8b969f;
    font-size: 12px;
    line-height: 17px
}

.info_page_m .info_item_m_desc p:last-child span:last-child {
    margin-left: 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.info_page_m .info_item_empty {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.info_page_m .info_item_empty>div {
    width: 138px;
    height: 88px;
    margin-top: 50%;
    background: url(../img/pic_live_empty.5feee924.png) no-repeat;
    background-size: 100% 100%
}

.info_page_m .info_item_empty>div p {
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: rgba(180,192,201,.75);
    margin-top: 104px
}

.hotgame_page_bg_m {
    padding: 8px 0;
    background-color: #1e2831;
    position: relative
}

.hotgame_page_bg_m.hotgame_page_shadow_m:after {
    content: "";
    width: 100%;
    height: 24px;
    background: -webkit-gradient(linear,left top,left bottom,from(#1e2831),to(rgba(30,40,49,0)));
    background: linear-gradient(180deg,#1e2831,rgba(30,40,49,0));
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px
}

.hotgame_page_m {
    background: #1a3739 url(../img/pic_topgame.57898ad5.png) 0 100% no-repeat;
    border-radius: 8px;
    height: 72px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin: 0 16px;
    background-size: 48px 32px;
    position: relative
}

.hotgame_page_m:after,.hotgame_page_m:before {
    content: "";
    width: 24px;
    height: 100%;
    position: absolute;
    left: 64px;
    z-index: 1;
    background: -webkit-gradient(linear,left top,right top,from(#1a3739),to(rgba(26,55,57,0)));
    background: linear-gradient(90deg,#1a3739,rgba(26,55,57,0));
    pointer-events: none
}

.hotgame_page_m:after {
    left: auto;
    right: 0;
    border-radius: 0 8px 8px 0;
    background: -webkit-gradient(linear,right top,left top,from(#1a3739),to(rgba(26,55,57,0)));
    background: linear-gradient(270deg,#1a3739,rgba(26,55,57,0))
}

.hotgame_page_m .hotgame_item_title_m {
    width: 64px;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: -webkit-gradient(linear,right top,left top,from(rgba(3,196,126,.0001)),to(rgba(3,196,126,.2)));
    background: linear-gradient(270deg,rgba(3,196,126,.0001),rgba(3,196,126,.2));
    min-width: 64px;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    border-radius: 8px 0 0 8px
}

.hotgame_page_m .hotgame_item_con_m {
    overflow-x: scroll;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 12px;
    padding-left: 24px;
    padding-right: 24px;
    position: relative
}

.hotgame_page_m .hotgame_item_con_m::-webkit-scrollbar {
    display: none
}

.hotgame_page_m .hotgame_item_m {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-right: 16px;
    min-width: 48px
}

.hotgame_page_m .hotgame_item_m:last-child {
    margin-right: 0
}

.hotgame_page_m .hotgame_item_m:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid hsla(0,0%,100%,.2)
}

.hotgame_page_m .hotgame_item_m .hotgame_item_type_m {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 12px;
    background: url(../img/tag_game_PC_12h@1x.7831a515.png) no-repeat;
    background-size: 100% 100%
}

.hotgame_page_m .hotgame_item_m img {
    width: 100%;
    height: 100%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    object-fit: cover
}

.hotgame_page_m .hotgame_item_m .hotgame_item_m_empty {
    background: hsla(0,0%,100%,.08) url(../img/icon_pic_default_24_white.9aa9b8f5.png) 50% no-repeat;
    background-size: 24px 24px;
    width: 100%;
    height: 100%
}

@media (max-width: 1440px) {
    .infomation_page .info_page_hotgame {
        width:410px
    }
}

@media (max-width: 1280px) {
    .infomation_page .info_page_hotgame {
        width:358px
    }

    .hotgame_page .hotgame_page_title p {
        font-size: 18px
    }

    .hotgame_page .hotgame_page_title span {
        font-size: 12px
    }

    .hotgame_page .hotgame_i_desc,.hotgame_page .hotgame_i_icon {
        margin-right: 8px
    }

    .hotgame_page .hotgame_i_gamename {
        font-size: 14px
    }

    .hotgame_page .hotgame_i_lable span {
        font-size: 12px
    }
}

@media (max-width: 1024px) {
    .infomation_page .info_page_hotgame {
        width:272px
    }
}

@media (max-width: 750px) {
    .infomation_page .info_page_hotgame {
        width:208px
    }

    .hotgame_page .g-Btn {
        width: 48px
    }
}

.run_clipborad {
    position: absolute;
    top: 20px
}

.run_clipborad .cofirm-cont {
    padding: 4px 8px 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.run_clipborad h2 {
    display: none
}

.run_clipborad .cofirm-msg {
    min-height: auto;
    padding: 0
}

.run_clipborad .g-Btn-green2 {
    width: 64px;
    margin: 0 0 0 8px;
    height: 24px;
    line-height: 26px;
    border: 0;
    padding: 0;
    font-size: 14px
}

.InTransLandscape .run_clipborad {
    max-width: 100%;
    left: 0;
    top: 0;
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: rotate(90deg) translate3d(50%,-100%,0);
    transform: rotate(90deg) translate3d(50%,-100%,0)
}

html.page-gray {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

html.g-fullpage,html.g-fullpage #app,html.g-fullpage body {
    height: 100%
}

#NIE-copyRight {
    color: #8b969f;
    padding: 30px 0;
    position: relative
}

#NIE-copyRight .g-color,#NIE-copyRight a {
    color: #8b969f
}

#NIE-copyRight .g-color:hover,#NIE-copyRight a:hover {
    color: #03c47e
}

#NIE-copyRight .nie-copyright-new-inner {
    width: auto;
    text-align: center
}

#NIE-copyRight .nie-cn-part2 p {
    display: none
}

#NIE-copyRight .nie-cn-nav {
    text-align: left
}

.netease-tips {
    display: none!important
}

.InMobile #NIE-copyRight {
    display: none
}

.notevent[data-v-0ea44854] {
    pointer-events: none
}

.right[data-v-7bf55832],.right[data-v-38d1848a] {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.fs_search_title {
    margin-bottom: 14px
}

.fs_search_title .bg {
    height: 22px;
    border-radius: 4px;
    background-color: rgba(40,51,61,.5);
    width: 100%
}

.fs_search_title .img {
    background-image: url(../img/title2.1a76a84c.png);
    height: 34px;
    width: 100%;
    background-size: auto 34px;
    background-repeat: no-repeat;
    background-position: 12px 0;
    margin-top: -29px
}

.fs_search_title.fs_search_title_m {
    margin-bottom: 6px
}

.fs_search_title.fs_search_title_m .img {
    background-position: 50%
}

.detail-group .fs_search_title_m .bg {
    background: none
}

.detail-group .fs_search_title_m .img {
    margin-top: -56px;
    background-position-x: 68px
}

.fs_search_con {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.fs_search_con>div:nth-child(2n) {
    margin-left: 16px
}

.fs_search_con .fs_search_item {
    padding: 12px 16px 16px 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 4px;
    border: .5px solid rgba(64,77,91,.5);
    background: #28333d;
    width: -webkit-calc(50% - 8px);
    width: calc(50% - 8px);
    margin-bottom: 16px;
    box-sizing: border-box
}

.fs_search_con .fs_search_item .icon:not(.icon_tag_hot) {
    margin-right: 12px;
    min-width: 24px
}

.fs_search_con .fs_search_item .icon_tag_hot {
    margin-top: -3px
}

.fs_search_con .fs_search_info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.fs_search_con .fs_search_info>div:first-child {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.fs_search_con .fs_search_info .fs_search_desc {
    border-radius: 0 4px 4px 4px;
    background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(64,77,91,.3)),to(rgba(180,192,201,.1)));
    background: linear-gradient(90deg,rgba(64,77,91,.3),rgba(180,192,201,.1));
    padding: 1px;
    margin-top: 8px
}

.fs_search_con .fs_search_info .fs_search_desc>div {
    background-color: #28333d;
    border-radius: 0 2px 2px 2px
}

.fs_search_con .fs_search_info .fs_search_desc>div>div {
    background-color: rgba(64,77,91,.3);
    color: rgba(180,192,201,.75);
    font-size: 12px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fs_search_con .fs_search_info span {
    font-size: 12px;
    color: rgba(180,192,201,.75);
    margin-left: 8px
}

.fs_search_con .fs_search_info p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.fs_search_con .g-Btn {
    width: 80px;
    height: 28px;
    line-height: 28px;
    font-size: 12px!important;
    margin-left: 16px;
    padding: 0;
    border: 0
}

.fs_search_con_mobile .fs_search_item {
    border-radius: 4px;
    border: .5px solid rgba(64,77,91,.5);
    background: #28333d;
    padding: 12px 8px 12px 16px;
    margin-bottom: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.fs_search_con_mobile .icon {
    min-width: 24px;
    margin-right: 6px;
    margin-top: 8px
}

.fs_search_con_mobile .fs_search_desc {
    border-radius: 0 4px 4px 4px;
    background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(64,77,91,.3)),to(rgba(180,192,201,.1)));
    background: linear-gradient(90deg,rgba(64,77,91,.3),rgba(180,192,201,.1));
    padding: 1px;
    margin-top: 2px
}

.fs_search_con_mobile .fs_search_desc>div {
    background-color: #28333d;
    border-radius: 0 2px 2px 2px
}

.fs_search_con_mobile .fs_search_desc>div>div {
    background-color: rgba(64,77,91,.3);
    color: rgba(180,192,201,.75);
    font-size: 12px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fs_search_con_mobile .fs_search_info {
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.fs_search_con_mobile .fs_search_info_top {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.fs_search_con_mobile .fs_search_info_top>div {
    overflow: hidden
}

.fs_search_con_mobile .fs_search_info_top p:first-child {
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fs_search_con_mobile .fs_search_info_top p:last-child {
    font-size: 12px;
    color: rgba(180,192,201,.75)
}

.fs_search_con_mobile .fs_search_info_top p:last-child i {
    width: 1px;
    height: 10px;
    background-color: rgba(180,192,201,.75);
    display: inline-block;
    font-style: normal;
    margin: 0 4px
}

.fs_search_con_mobile .g-Btn {
    width: 72px;
    min-width: 72px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    font-size: 12px!important;
    margin-left: 8px;
    border: 0
}

@media only screen and (max-width: 770px) {
    .fs_search_con .fs_search_item {
        width:100%
    }

    .fs_search_con .fs_search_item:nth-child(2n) {
        margin-left: 0
    }
}

@media only screen and (max-width: 1200px) {
    .fs_search_con .fs_search_info>div:first-child {
        display:block
    }

    .fs_search_con .fs_search_info span:nth-child(2) {
        margin-left: 0
    }
}

.paging {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.paging .btn_next,.paging .btn_pre {
    font-size: 14px;
    line-height: 20px;
    color: #b4c0c9;
    background: rgba(180,192,201,.1);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer
}

.paging .btn_next:hover,.paging .btn_pre:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(180,192,201,.1)),to(rgba(180,192,201,.3)));
    background: linear-gradient(180deg,rgba(180,192,201,.1),rgba(180,192,201,.3))
}

.paging .btn_next.gray,.paging .btn_pre.gray {
    color: rgba(180,192,201,.3);
    cursor: default
}

.paging .btn_next.gray:hover,.paging .btn_pre.gray:hover {
    background: rgba(180,192,201,.1)
}

.paging .btn_pre {
    margin-right: 16px
}

.paging .btn_next {
    margin-left: 16px
}

.paging .btn_c_page {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.paging .btn_c_page>div {
    margin-right: 8px;
    background: rgba(180,192,201,.1);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 22px;
    color: #b4c0c9;
    cursor: pointer
}

.paging .btn_c_page>div:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(180,192,201,.1)),to(rgba(180,192,201,.3)));
    background: linear-gradient(180deg,rgba(180,192,201,.1),rgba(180,192,201,.3))
}

.paging .btn_c_page>div.on {
    color: #03c47e;
    background: rgba(3,196,126,.1)
}

.paging .btn_c_page>div:last-child {
    margin-right: 0
}

.guide_box {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #28333d;
    border-bottom: 1px solid hsla(0,0%,100%,.1);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.04)
}

.guide_box .logo {
    width: 36px;
    min-width: 36px;
    height: 36px;
    background: url(../img/icon_cloudgame_36.9ad23da5.png) no-repeat;
    background-size: 100% 100%;
    border-radius: 8px;
    margin-right: 8px
}

.guide_box p {
    font-size: 12px;
    line-height: 17px;
    color: #b4c0c9;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.guide_box p span {
    color: #03c47e;
    font-weight: 700
}

.guide_box p i {
    width: 1px;
    height: 8px;
    background-color: rgba(180,192,201,.08);
    display: inline-block;
    margin: 0 8px
}

.guide_box button {
    width: 72px;
    min-width: 72px;
    height: 28px;
    line-height: 28px;
    color: #fff;
    text-align: center;
    padding: 0;
    background: #03c47e;
    box-shadow: 0 2px 16px rgba(7,171,127,.25);
    border-radius: 100px;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-left: 8px
}

.guide_box button:hover {
    -webkit-transition: background-image 3s ease-in-out 1s;
    transition: background-image 3s ease-in-out 1s;
    background-image: radial-gradient(ellipse farthest-corner at bottom,#aafced 0,#03c47e 65%)
}

.guide_box.guide_pc {
    position: fixed;
    width: 375px;
    z-index: 2;
    border: 1px solid hsla(0,0%,100%,.1);
    border-radius: 12px;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    top: 12px;
    z-index: 997
}

.guide_box.guide_pc .close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #304051 url(../img/icon_guide_close_nor.f489aaa1.png) 50% no-repeat;
    background-size: 20px 20px;
    margin-left: 8px;
    cursor: pointer
}

.guide_box.guide_pc .close:hover {
    background-image: url(../img/icon_guide_close_hover.958334a2.png)
}

.android_guide_index {
    box-shadow: inset 0 -1px 0 0 rgba(47,60,71,.3);
    border-bottom: 1px solid hsla(0,0%,100%,.01);
    height: 40px
}

.android_guide_index .logo {
    width: 28px;
    height: 28px;
    min-width: 28px
}

.android_guide_index button {
    width: auto;
    min-width: 88px;
    padding: 0 10px;
    -webkit-transform: scale(.84);
    transform: scale(.84);
    -webkit-transform-origin: right;
    transform-origin: right;
    height: 32px;
    margin-left: 0
}

.android_guide_index.android_guide_p_style .android_guide_award {
    position: absolute;
    right: 104px;
    top: 8px;
    width: 80px;
    height: 24px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    background: url(../img/client_award_list.12239bd1.png) no-repeat;
    background-size: 100% 100%
}

.fs_header_mobile {
    padding: 16px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.fs_header_mobile,.fs_header_mobile .logo {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.fs_header_mobile .logo_img {
    width: 103px;
    height: 24px;
    background: url(../img/pc_logo.6307e755.png) no-repeat;
    background-size: 100% 100%
}

.fs_header_mobile .link {
    width: 1px;
    height: 12px;
    display: inline-block;
    background-color: hsla(0,0%,100%,.08);
    font-style: normal;
    margin: 0 10px
}

.fs_header_mobile p {
    font-size: 12px;
    font-weight: 700;
    color: #fff
}

.fs_header_mobile .g-Btn {
    padding: 0 23px;
    font-size: 12px;
    height: 28px;
    line-height: 28px
}

.fs_header_mobile .head_avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: .8px solid hsla(0,0%,100%,.1);
    position: relative
}

.fs_header_mobile .head_avatar.avatar_empty {
    background: url(../img/icon_defaultavatar.6a9c5e81.png) no-repeat;
    background-size: 100% 100%
}

.fs_header_mobile .head_avatar .avatar_img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden
}

.fs_header_mobile .head_avatar .avatar_frame {
    position: absolute;
    top: -13%;
    left: -13%;
    right: -13%;
    bottom: -13%;
    width: 126%
}

.fs_rem_wrap .title {
    width: 299px;
    height: 47px;
    background: url(../img/title.d85ddee5.png) no-repeat;
    background-size: 100% 100%;
    margin: 37px auto 0
}

.fs_rem_wrap .fs_rem_con {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.fs_rem_wrap .fs_rem_con>div {
    width: -webkit-calc(50% - 8px);
    width: calc(50% - 8px);
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px;
    border: .5px solid rgba(64,77,91,.5);
    background: #28333d
}

.fs_rem_wrap .fs_rem_con>div:first-child {
    margin-right: 8px
}

.fs_rem_wrap .fs_rem_con>div:last-child {
    margin-left: 8px
}

.fs_rem_wrap .fs_rem_con .fs_rem_nickname {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 1px solid rgba(64,77,91,.5);
    padding-bottom: 8px
}

.fs_rem_wrap .fs_rem_con .fs_rem_nickname img {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 1px solid hsla(0,0%,100%,.1);
    margin-right: 4px
}

.fs_rem_wrap .fs_rem_con .fs_rem_nickname p {
    color: #b4c0c9;
    font-size: 12px;
    font-weight: 700
}

.fs_rem_wrap .fs_rem_con .fs_rem_nickname .name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc {
    padding-top: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc .icon:not(.icon_tag_hot,.icon_arrow_right_grey) {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-right: 12px
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc .icon_tag_hot {
    margin-top: -2px
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc>div {
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc .fs_rem_info {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 12px
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc .fs_rem_info span {
    color: rgba(180,192,201,.75);
    margin-left: 8px
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc .fs_rem_info p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc .desc {
    border-radius: 0 4px 4px 4px;
    background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(64,77,91,.3)),to(rgba(180,192,201,.1)));
    background: linear-gradient(90deg,rgba(64,77,91,.3),rgba(180,192,201,.1));
    padding: 1px;
    margin-top: 8px
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc .desc>div {
    background-color: #28333d;
    border-radius: 0 2px 2px 2px
}

.fs_rem_wrap .fs_rem_con .fs_rem_desc .desc>div>div {
    background-color: rgba(64,77,91,.3);
    color: rgba(180,192,201,.75);
    font-size: 12px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fs_main_mobile .fs_rem_wrap .fs_rem_con {
    display: block
}

.fs_main_mobile .fs_rem_wrap .fs_rem_con>div {
    width: 100%;
    margin: 0 0 16px 0
}

.fs_main_mobile .fs_rem_wrap .fs_rem_con>div .fs_rem_info span,.fs_main_mobile .fs_rem_wrap .fs_rem_con>div .fs_rem_nickname {
    display: none
}

.fs_main_mobile .fs_rem_wrap .fs_rem_con>div .fs_rem_desc {
    padding-top: 0
}

.fs_main {
    width: 100%;
    margin: 0 auto
}

.fs_flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.fs_space_between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.fs_justify_center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.fs_justify_end {
    -webkit-box-pack: end;
    -webkit-justify-content: end;
    justify-content: end
}

.fs_align_items {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.fs_one_line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

button.fs {
    padding: 0;
    border: 0
}

.fileshare_head_logo .link {
    width: 1px;
    height: 16px;
    display: inline-block;
    background-color: hsla(0,0%,100%,.08);
    font-style: normal;
    margin: 0 12px
}

.fileshare_head_logo p {
    font-weight: 700;
    font-size: 14px
}

.fs_header .fs_link {
    width: 1px;
    height: 16px;
    display: inline-block;
    background-color: hsla(0,0%,100%,.08);
    font-style: normal;
    margin: 0 12px
}

.fs_header p {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-left: 3px
}

.icon_sharepan {
    width: 32px;
    height: 32px;
    background-image: url(../img/icon_applogo_disk_small.2257011d.png)
}

.icon_file {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_folder_20.3f17a883.png)
}

.icon_arrow {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_enter_grey_12.cb6bdca2.png)
}

.icon_arrow2 {
    width: 12px;
    height: 12px;
    background-image: url(../img/icon_enter_grey.120f2e74.png)
}

.icon_empty {
    width: 138px;
    height: 88px;
    background-image: url(../img/pic_empty.1ce6a0d0.png)
}

.icon_file_folder {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_folder_24.4f82164a.png)
}

.icon_file_exe {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_exe_24.2e5cc6d4.png)
}

.icon_file_pic {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_pic_24.9a995c9a.png)
}

.icon_file_video {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_video_24.7b7cff54.png)
}

.icon_file_zip {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_zip_24.7c8d5661.png)
}

.icon_file_doc {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon_document_24.d4a98e96.png)
}

.icon_logo_bg {
    width: 110px;
    height: 68px;
    background-image: url(../img/pic_bkg_pattern.7fc39951.png)
}

.icon_toast_success {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_toast_success.ba1943cc.png)
}

@media only screen and (max-width: 1000px) {
    .guide_box.guide_pc {
        display:none
    }
}

@media only screen and (max-width: 768px) {
    .fileshare_header {
        height:132px
    }

    .fileshare_header .headerbox {
        top: 48px
    }

    .guide_box.guide_pc {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        left: 50%;
        top: 0;
        width: 100%;
        border-top: 0;
        border-left: 0;
        border-bottom: 0;
        border-radius: 0
    }

    .guide_box.guide_pc .close {
        display: none
    }
}

.fs_content {
    width: 100%;
    padding: 16px;
    margin-bottom: 24px;
    box-sizing: border-box;
    background: linear-gradient(90.05deg,rgba(40,51,61,.6) .03%,rgba(40,51,61,.2) 99.95%);
    border-radius: 12px
}

.fs_content .c_avatar {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: .6px solid hsla(0,0%,100%,.1);
    border-radius: 50%;
    margin: 0 8px 0 12px;
    position: relative
}

.fs_content .c_avatar.avatar_empty {
    background: url(../img/icon_defaultavatar.6a9c5e81.png) no-repeat;
    background-size: 100% 100%
}

.fs_content .c_avatar .avatar_img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden
}

.fs_content .c_avatar .avatar_frame {
    position: absolute;
    top: -13%;
    left: -13%;
    right: -13%;
    bottom: -13%;
    width: 126%
}

.fs_content .c_nickname {
    color: hsla(0,0%,100%,.8)
}

.fs_content .c_nickname,.fs_content .more_file {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700
}

.fs_content .more_file {
    padding: 8px 12px;
    background: rgba(3,196,126,.1);
    border: .5px solid rgba(3,196,126,.5);
    border-radius: 8px;
    color: #fff;
    margin-left: 8px;
    cursor: pointer
}

.fs_content .more_file:hover {
    background: rgba(3,196,126,.2)
}

.fs_content .more_file p {
    margin: 0 4px;
    white-space: nowrap
}

.fs_content .more_file .icon_file {
    min-width: 20px
}

.fs_content .more_file .icon_arrow {
    min-width: 12px
}

.fs_content .c_desc {
    margin: 8px 0 12px 12px
}

.fs_content .c_desc span {
    font-weight: 700;
    font-size: 12px;
    line-height: 17px;
    opacity: .5;
    color: #b4c0c9;
    cursor: pointer
}

.fs_content .c_desc span:hover {
    color: hsla(0,0%,100%,.8)
}

.fs_content .c_desc.c_desc_nocursor span:hover {
    color: #b4c0c9;
    cursor: default
}

.fs_content .c_desc i {
    margin-right: 4px
}

.fs_content .c_list {
    max-height: 420px;
    border-radius: 4px;
    overflow-y: auto;
    background: rgba(40,51,61,.1);
    border: .5px solid hsla(0,0%,100%,.2);
    position: relative
}

.fs_content .c_list::-webkit-scrollbar {
    width: 3px
}

.fs_content .c_list.c_list_overflow {
    overflow: inherit
}

.fs_content .c_list_bottom_tips {
    width: 330px;
    height: 53px;
    position: absolute;
    top: 28px;
    right: 12px;
    background: url(../img/tips_bg2.7d6b6e40.png) no-repeat;
    background-size: 100% 100%;
    pointer-events: none
}

.fs_content .c_list_bottom_tips.c_list_bottom_tips_m {
    top: 35px;
    right: 16px
}

.fs_content .file_item {
    padding: 10px 12px;
    position: relative
}

.fs_content .file_item:after {
    content: "";
    position: absolute;
    left: 12px;
    bottom: 0;
    display: block;
    width: -webkit-calc(100% - 24px);
    width: calc(100% - 24px);
    height: 1px;
    background-color: hsla(0,0%,100%,.1)
}

.fs_content .file_item:hover {
    cursor: pointer;
    background: hsla(0,0%,100%,.05)
}

.fs_content .file_item .file_content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.fs_content .file_item .file_content_desc {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden
}

.fs_content .file_item .file_content_desc .fs_item_desc {
    border-radius: 0 4px 4px 4px;
    background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(64,77,91,.3)),to(rgba(180,192,201,.1)));
    background: linear-gradient(90deg,rgba(64,77,91,.3),rgba(180,192,201,.1));
    padding: 1px;
    margin-top: 8px
}

.fs_content .file_item .file_content_desc .fs_item_desc>div {
    background-color: #28333d;
    border-radius: 0 2px 2px 2px
}

.fs_content .file_item .file_content_desc .fs_item_desc>div>div {
    background-color: rgba(64,77,91,.3);
    padding: 0 8px;
    color: rgba(180,192,201,.75);
    font-size: 12px
}

.fs_content .file_item i:not(.icon_tag_hot) {
    min-width: 24px
}

.fs_content .file_item .icon_tag_hot {
    min-height: 14px;
    margin-top: -2px;
    background-size: 14px
}

.fs_content .file_item>div {
    overflow: hidden
}

.fs_content .file_item:last-child:after {
    background: none
}

.fs_content .file_item p,.fs_content .file_item span {
    font-weight: 500;
    font-size: 12px;
    line-height: 17px
}

.fs_content .file_item p {
    color: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 12px
}

.fs_content .file_item span {
    color: rgba(180,192,201,.75);
    margin-left: 16px
}

.fs_content .file_item button {
    margin-left: 24px;
    height: 28px;
    line-height: 28px;
    padding: 0 20px;
    font-size: 12px
}

.fs_content .file_item.file_item_delay .fs_btn_achieve {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#28333d),color-stop(98%,#4d6275));
    background-image: linear-gradient(180deg,#28333d,#4d6275 98%);
    border: 1px solid hsla(0,0%,100%,.1);
    color: #b4c0c9;
    font-weight: 700;
    border-top-color: #3e4851;
    border-bottom-color: #5b6d7e;
    font-size: 12px;
    cursor: default
}

.fs_content .file_item.file_item_delay p,.fs_content .file_item.file_item_delay span {
    color: rgba(180,192,201,.75)
}

.fs_content .file_item.file_item_delay .icon {
    opacity: .5
}

.fs_content .cl_tips {
    text-align: center;
    font-size: 12px;
    line-height: 17px;
    color: #b4c0c9;
    margin: 16px 16px 8px
}

.fs_content .cl_butt {
    display: block;
    height: 28px;
    line-height: 28px;
    padding: 0 11px;
    margin: 0 auto 16px;
    font-size: 12px
}

.fs_content .file_empty {
    margin: 100px 0
}

.fs_content .file_empty .icon_empty {
    display: block;
    margin: 0 auto
}

.fs_content .file_empty .file_empty_tips {
    color: rgba(180,192,201,.75);
    margin-top: 16px;
    font-weight: 700;
    font-size: 12px;
    line-height: 17px;
    text-align: center
}

.fs_content .file_empty .more_file {
    margin: 16px 0 0
}

.fs_content .c_achieve_title {
    margin-bottom: 26px
}

.fs_content .c_achieve_title i {
    margin: 0 8px 0 12px
}

.fs_content .c_achieve_title p {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: hsla(0,0%,100%,.8)
}

.fs_content .cl_shadow {
    width: 100%;
    height: 49px;
    margin-top: -49px;
    margin-left: 0;
    position: relative;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(40,51,61,0)),to(#232e38));
    background: linear-gradient(180deg,rgba(40,51,61,0),#232e38);
    border-radius: 4px;
    pointer-events: none
}

.fs_main_mobile .fs_content {
    background: none;
    height: auto
}

.fs_main_mobile .c_achieve_title i,.fs_main_mobile .c_avatar,.fs_main_mobile .c_desc {
    margin-left: 0
}

.fs_main_mobile .c_list {
    background: #28333d;
    border: .5px solid rgba(64,77,91,.5);
    border-radius: 4px;
    max-height: none
}

.fs_main_mobile .file_item {
    border-color: rgba(64,77,91,.5)
}

.fs_main_mobile .more_file {
    padding: 8px 4px 8px 8px
}

.fs_main_mobile .more_file .icon_arrow {
    display: none
}

@media only screen and (max-width: 480px) {
    .fs_content .c_desc {
        margin-bottom:8px
    }

    .fs_content .file_item {
        padding: 16px
    }

    .fs_content .file_item>div {
        display: block
    }

    .fs_content .file_item>div p {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 3px;
        line-height: 19px
    }

    .fs_content .file_item>div span {
        margin-left: 12px
    }

    .fs_content .file_item>div span:nth-child(2) {
        position: relative;
        padding-right: 3.5px
    }

    .fs_content .file_item>div span:nth-child(2):after {
        content: "";
        position: absolute;
        width: 1px;
        height: 10px;
        right: 0;
        top: 3px;
        background-color: hsla(0,0%,100%,.08)
    }

    .fs_content .file_item>div span:last-child {
        margin-left: 3.5px
    }
}

.page-games[data-v-9c762168] #content {
    position: static;
    overflow: hidden;
    padding-top: 0
}

.page-games[data-v-9c762168] .subnav-sticky.fixed-status .sticky-box {
    box-shadow: 0 4px 2px rgba(0,0,0,.5)
}

.page-games[data-v-9c762168] .subnav-sticky .sticky-box {
    background-color: #1e2831
}

.page-games[data-v-9c762168] .subnav-sticky .subnav {
    padding-top: 0;
    padding-bottom: 14px
}

.page-games[data-v-9c762168] .recommend-main {
    padding-top: 2px
}

.page-games[data-v-9c762168] .gamelist {
    padding-top: 6px
}

.page-login {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: auto
}

.page-login .topnav {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.page-login .topnav.topnav-hidden {
    height: 0;
    opacity: 0;
    pointer-events: none
}

.page-login .login-content {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.pagecheckin[data-v-7d9063fe] .nav-logo-big {
    margin: 15px auto 0
}

.pagecheckin[data-v-7d9063fe] .nav-logo-big img {
    width: 100%;
    display: block
}

.pagecheckin[data-v-7d9063fe] .subnav {
    padding-top: 0;
    margin: 0 -14px
}

.pagecheckin[data-v-7d9063fe] .topnav2 span {
    font-size: 20px;
    font-weight: 700;
    color: #fff
}

.code-box[data-v-46e2bdcc] {
    padding-top: 54px
}

.code-box .faq[data-v-46e2bdcc] {
    text-align: right;
    font-size: 12px;
    line-height: 17px;
    padding: 14px 0 30px
}

.code-box .faq i[data-v-46e2bdcc],.code-box .faq span[data-v-46e2bdcc] {
    vertical-align: middle
}

.code-box .faq i[data-v-46e2bdcc] {
    width: 14px;
    height: 14px;
    margin-right: 4px
}

.gamepad[data-v-4eed8230] {
    position: relative
}

.live-detail[data-v-4ba1e2e4] {
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px)
}

.mobilemenu-box[data-v-4ba1e2e4] {
    padding-left: env(safe-area-inset-left);
    padding-left: env(safe-area-inset-right);
    box-sizing: border-box
}

.page-notice-push .menulist {
    padding-left: 16px;
    padding-left: -webkit-calc(16px + env(safe-area-inset-left));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: 16px;
    padding-right: -webkit-calc(16px + env(safe-area-inset-right));
    padding-right: calc(16px + env(safe-area-inset-right))
}

.page-notice-push .menulist li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0
}

.page-notice-push .label {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.page-notice-push .switch {
    vertical-align: middle
}

.page-my-groups .grouplist {
    padding: 12px 16px
}

.page-my-groups .g-empty-status {
    margin-top: 88px
}

.page-my-like .g-empty-status {
    height: 70vh
}

.page-my-like .g-empty-status .icon {
    margin-bottom: 16px
}

.page-my-like .g-empty-status p {
    font-size: 14px
}

.page-my-comment .g-empty-status {
    height: 70vh
}

.page-my-comment .g-empty-status .icon {
    margin-bottom: 16px
}

.page-my-comment .g-empty-status p {
    font-size: 14px
}

.page-pswreset {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: auto
}

.page-pswreset .topnav {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.page-pswreset .password-login {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.menulist {
    padding-left: 22px;
    padding-right: 22px;
    background: #28333d
}

.menulist li {
    position: relative;
    line-height: 61px;
    border-bottom: 1px solid #2f3c47;
    color: #b4c0c9
}

.menulist li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #b4c0c9;
    text-decoration: none
}

.menulist li:last-child {
    border-bottom: 0!important
}

.menulist li i:first-child {
    margin-right: 16px
}

.menulist li i:last-child {
    float: right;
    margin-top: 23px
}

.menulist li i,.menulist li span {
    vertical-align: middle
}

.menulist li .tips {
    position: absolute;
    right: 14px;
    top: 2px;
    -webkit-transform-origin: right center;
    transform-origin: right center;
    background-image: -webkit-gradient(linear,left top,right top,color-stop(20%,#f0a406),to(#be3812));
    background-image: linear-gradient(90deg,#f0a406 20%,#be3812);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.menulist li .icon-hot-mobile {
    -webkit-transform: translate(-2px,-10px);
    transform: translate(-2px,-10px)
}

.menulist .icon_options {
    width: 18px;
    height: 18px
}

@media (orientation: landscape) {
    .menulist li {
        line-height:48px
    }

    .menulist li i:last-child {
        margin-top: 18px
    }
}

@media only screen and (max-width: 375px) {
    .menulist li {
        line-height:58px
    }

    .menulist li i:last-child {
        margin-top: 22px
    }
}

@media only screen and (max-width: 320px) {
    .menulist li {
        line-height:48px
    }

    .menulist li i:last-child {
        margin-top: 18px
    }
}

@font-face {
    font-family: you_she_biao_ti_hei;
    src: url(data:font/ttf;base64,AAEAAAAKAIAAAwAgT1MvMmD0ee4AAACsAAAAYGNtYXAVWBFSAAABDAAAAVJnbHlmVuR6mQAAAmAAAALgaGVhZBXv0jsAAAVAAAAANmhoZWED6gHGAAAFeAAAACRobXR4IHgB2gAABZwAAAA0bG9jYQRWBRIAAAXQAAAAHG1heHAAEQAYAAAF7AAAACBuYW1ltlyMAQAABgwAAAKmcG9zdABIAL8AAAi0AAAAPAAEAn8BkAAFAAgCigJYAAAASwKKAlgAAAFeADIA3AAAAAAFAAAAAAAAAAAAAAEQAAAAAAAAFgAAAABZVVNIAEAAJQA5A1L/agAAA+gBLAAEAAAAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAAAAABMAAMAAQAAABwABAAwAAAACAAIAAIAAAAlAC4AOf//AAAAJQAuADD////n/93/0QABAAAAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAACwABAgMEBQYHCAkKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAtADwCtgJ1AAkADQAAEz4BMyEDDgEjIQEDMxNzBC0dAfVGBSwd/gsBATa9NgIxHSf+Cx0nAdv+hAF8AAAAAAEAMgA8AVACfwAFAAA3IxMHNyX/vj9ODwEPPAHAC2gmAAAAAAEAKgA8Aq4CdgARAAABIwcjNyEDIQchNwchIiY/ASEB478JvhgCOTD+cRIBaSsT/gsdIgQkAXsCF0yr/qqFJoUnHf8AAQAKADwClAJ1AA4AAAEhNyE3ITchAw4BIyE3IQGp/qoNAVYT/oQNAjpHBC0c/goOAXsBM1+FXv4LHSdfAAAAAAEAIwA8Ao8CdQAQAAATMwMzEyczAzMHIwcjNyE3E3/aaJQuIeQzTA1MEL4Q/qsNZQJ1/pgBQyX+mF9ycl8BUAABAC0APAK2AnMAEQAAJTchEychByEHIQMHDgEjITcXAbUZ/oQmIQJfDf6FEQF8JQQFLB3+CxIhm6sBCyJccv72Gx0nhSYAAAACACoAPAKuAnUACgAOAAABIQchAyEiJjcTIQEHMzcCof6FDwF7M/4KHSIERwI5/lwavhkCF2n+jicdAfX+2rS0AAAAAAEAIwA8AmoCdgAGAAAJASMBITchAl3+7L0BEP6HDgI5Ahf+JQHbXwADAC0APAK3AnYACQANABEAABM+ATMhAw4BIyEBBzM3DwEzN3MFLRwB9kcELR3+CwEBE74T3ha+FgIxHSj+Ch0nAduFheSYmAACACgAPAKyAnUACgAOAAABIRMhAw4BIyE3IQMHMzcBwf6FMgI6RwQtHP4KDwF6iBm/GAENAWj+Cx0nXwF8q6sAAQAoAD0A0ACvAAMAADczByM4mBCYr3IAAwAtADoCtwJ0AA4AEgAWAAAlITcHIwEjNyEHNyczATMlMzcjASMHMwJ8/vcezJgBGv8gAQkeuRO+/ub//igmCiYBUiYLJk3X6gFD5NfUFv69mEz+0EwAAAEAAAABAAAge5rJXw889QAJA+gAAAAA2fMGiQAAAADaH4gTAAoAOgK3An8AAAAJAAIAAAAAAAAAAQAAA+j+1AAAAuQAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAA0B9AAAAuMALQGCADIC2wAqAsEACgKyACMC4wAtAtsAKgJ0ACMC5AAtAt8AKAD4ACgC5AAtAAAABgAmADgAWgB6AJoAvgDgAPQBGAE4AUQBcAABAAAADQAXAAMAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAEADGAAEAAAAAAAAAMAAAAAEAAAAAAAEADwAwAAEAAAAAAAIABwA/AAEAAAAAAAMAHQBGAAEAAAAAAAQADwBjAAEAAAAAAAUADAByAAEAAAAAAAYADwB+AAEAAAAAAAcAEwCNAAMAAQQJAAAAYACgAAMAAQQJAAEAHgEAAAMAAQQJAAIADgEeAAMAAQQJAAMAOgEsAAMAAQQJAAQAHgFmAAMAAQQJAAUAGAGEAAMAAQQJAAYAHgGcAAMAAQQJAAcAJgG6KGMpIENvcHlyaWdodCBZb3VTaGUgTmV0d29yayBUZWNobm9sb2d5IENvLiwgTHRkWW91U2hlQmlhb1RpSGVpUmVndWxhcllvdVNoZUJpYW9UaUhlaSBSZWd1bGFyIHYxLjAwWW91U2hlQmlhb1RpSGVpVmVyc2lvbiAxLjAwWW91U2hlQmlhb1RpSGVpdHJhZGVtYXJrIG9mIFlvdVNoZQAoAGMAKQAgAEMAbwBwAHkAcgBpAGcAaAB0ACAAWQBvAHUAUwBoAGUAIABOAGUAdAB3AG8AcgBrACAAVABlAGMAaABuAG8AbABvAGcAeQAgAEMAbwAuACwAIABMAHQAZABZAG8AdQBTAGgAZQBCAGkAYQBvAFQAaQBIAGUAaQBSAGUAZwB1AGwAYQByAFkAbwB1AFMAaABlAEIAaQBhAG8AVABpAEgAZQBpACAAUgBlAGcAdQBsAGEAcgAgAHYAMQAuADAAMABZAG8AdQBTAGgAZQBCAGkAYQBvAFQAaQBIAGUAaQBWAGUAcgBzAGkAbwBuACAAMQAuADAAMABZAG8AdQBTAGgAZQBCAGkAYQBvAFQAaQBIAGUAaQB0AHIAYQBkAGUAbQBhAHIAawAgAG8AZgAgAFkAbwB1AFMAaABlAAAAAgAAAAAAAP+1ADIAAAAAAAAAAAAAAAAAAAAAAAAADQANAAAAEwAUABUAFgAXABgAGQAaABsAHAARAAg=)
}

.p-mine {
    min-height: 100vh;
    background-color: #1e2831;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#40515f),to(#1e2831));
    background-image: linear-gradient(180deg,#40515f,#1e2831);
    background-size: 100% 248px;
    background-position: top;
    background-repeat: no-repeat;
    padding-top: constant(safe-area-inset-top)!important;
    padding-top: env(safe-area-inset-top)!important
}

.p-mine .message-entry.entry-fixed {
    top: 32.5px;
    top: -webkit-calc(32.5px + constant(safe-area-inset-top));
    top: calc(32.5px + constant(safe-area-inset-top));
    top: -webkit-calc(32.5px + env(safe-area-inset-top));
    top: calc(32.5px + env(safe-area-inset-top));
    background-color: #28333d
}

.p-mine .login-tips {
    padding-top: 36px;
    padding-bottom: 16px
}

.p-mine .login-tips .title {
    line-height: 28px;
    font-weight: 700;
    font-size: 18px;
    color: #fff
}

.p-mine .login-tips .desc {
    line-height: 20px;
    font-size: 14px;
    color: #8b969f
}

.p-mine .login-tips .user-avatar {
    float: right;
    margin-top: -8px
}

@media only screen and (max-width: 768px) {
    .full-block {
        margin-left:-40px;
        margin-right: -40px
    }
}

@media only screen and (max-width: 414px) {
    .full-block {
        margin-left:-16px;
        margin-right: -16px
    }
}