.user_box {
    display: flex;
    margin: 20px auto 0
}

.user_menu {
    width: 15%;
    background: var(--main-color);
    border-radius: 5px;
    border: none;
    margin: 0
}

.user_menu i {
    font-size: 20px;
    color: #fff;
    margin-right: 10px
}

.user_menu i.far,
.user_menu i.fas {
    width: 20px;
    text-align: center
}

.user_menu h1 {
    font-size: 16px;
    line-height: 1.3;
    background: #5e0302;
    padding: 14px 0 14px 34px
}

.user_menu h1,
.user_menu li {
    white-space: inherit;
    height: inherit;
    color: #fff
}

.user_menu li {
    padding: 12px 0 12px 24px;
    font-size: 14px;
    line-height: 30px;
    border-bottom: 1px solid #303030;
    cursor: pointer;
    line-height: 1.3;
    outline: 0
}

.user_menu a.router-link-active li {
    color: #fff;
    background: var(--main-color-h);
    margin: 0
}

.user_menu li p {
    line-height: 20px
}

.user_menu li img,
.user_menu li p {
    display: inline-block;
    vertical-align: top
}

.user_menu li img {
    height: 20px;
    width: 20px;
    margin: 0 8px 0 0
}

.user_menu li:last-child {
    border: none
}

.user_menu .logout {
    display: none
}

.user_menu li:focus {
    background: var(--main-color-h);
    color: #fff
}

@media (max-width:1000px) {
    .user_box {
        background: none;
        margin: 0
    }
    .user_menu {
        display: none
    }
    .user_menu .logout {
        display: block
    }
}

@media (min-width:1001px) {
    .user_menu li:hover {
        background: var(--main-color-h);
        color: #fff
    }
}

.user_nav,
.user_nav .tab_nav {
    width: 100%;
    height: auto
}

.user_nav .tab_nav {
    display: inline-block;
    margin: 0 0 10px;
    padding: 0 10px
}

.user_nav .tab_nav .el-col {
    background: #e8e8e8;
    width: auto;
    text-align: center;
    margin: 0 8px 0 0;
    color: #888;
    padding: 11px 19px;
    font-size: 14px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    transform: all .5s
}

.user_nav .tab_nav .el-col.on {
    background: var(--main-color);
    color: #fff
}

@media (max-width:1001px) {
    .user_nav .tab_nav {
        margin: 10px 0 0;
        padding: 0;
        background: transparent
    }
    .user_nav .tab_nav .el-col {
        width: calc(33.33333% - 10px);
        margin: 10px 10px 0 0;
        padding: 8px
    }
    .user_nav .tab_con {
        width: 100%
    }
}

@media (min-width:1001px) {
    .user_nav .tab_nav .el-col:hover {
        background: var(--main-color-h);
        color: #fff
    }
}

.user {
    padding: 30px;
    background: #fff;
    width: calc(85% - 10px);
    border-radius: 5px;
    margin: 0 0 0 10px;
    border: 1px solid #ddd
}

.user input,
.user select {
    background: none
}

.user select {
    color: #c7c7c7;
    border-radius: 5px;
    height: 36px
}

.user select option {
    color: grey
}

.user label {
    height: 40px;
    line-height: 40px;
    color: #c7c7c7;
    margin: 0 5px 0 0;
    display: inline-block;
    overflow: hidden
}

.user label input {
    height: 40px;
    line-height: 40px;
    width: 16px;
    margin: 0 2px 0 -8px;
    background: #f0f0f0;
    border: 1px solid #d4d4d4
}

.user label p {
    display: inline-block;
    vertical-align: top;
    color: #000;
    font-size: .9em;
    line-height: 2.5em;
    margin: 0 16px 0 0
}

.user input,
.user select {
    outline: 0;
    color: #888;
    padding: 0 0 0 8px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px
}

.user input:focus,
.user select:focus {
    outline: 0
}

.user .btn,
.user button {
    width: 100%;
    margin: 5px 5px 10px 0;
    padding: 13px 16px;
    max-width: 108px
}
.user .p_title {
    width: calc(100% - 85px);
}
.user .p_btn {
    margin: 10px 0;
    padding: 0;
    width: 100%;
    max-width: 85px
}
@media (max-width:1001px) {
    .user .p_btn {
        margin: 4px 0;
    }
}
.user .btn2 {
    background: #f19149;
    max-width: 148px;
    padding: 11px 0;
    display: block
}

.user .btn2 i {
    font-size: 15px;
    vertical-align: top;
    line-height: 36px;
    padding: 0 0 0 2px;
    margin: 0 0 0 8px;
    transition: .3s;
    -webkit-transition: .3s
}

.user .btn2 i.Rotate {
    vertical-align: bottom;
    line-height: 32px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg)
}

.user p {
    line-height: 24px;
    font-size: 13px
}

.user p b {
    color: #f80000
}

.user h4 {
    color: #888;
    font-size: 14px;
    line-height: 40px;
    padding: 0 0 0 8px;
    border-radius: 0 5px 5px 0
}

.user .el-row {
    height: auto;
    margin-top: 15px;
    overflow: hidden;
    color: #888;
    border-bottom: 1px dashed #dfdfdf;
    padding-bottom: 15px
}

.user .el-row .il {
    font-size: .9em;
    color: #666;
    font-weight: 700;
    border-radius: 5px 0 0 5px
}

.user .el-row .il,
.user .el-row .il2 {
    padding: 11px 6px;
    min-height: 40px;
    line-height: 1.3
}

.user .el-row .il2 {
    font-size: 13px;
    color: #00bfb0;
    text-align: center;
    border-radius: 0 4px 4px 0
}

.user .el-row .ir {
    border-radius: 0 5px 5px 0
}

.user .el-row .ir button {
    margin: 0;
    background: none;
    text-align: right
}

.user .el-row .el-input--mini .el-input__inner,
.user .el-row .el-input.is-disabled .el-input__inner {
    height: 40px;
    line-height: 40px
}

.user .el-row .el-input.is-disabled .el-input__inner {
    color: #888
}

.user .el-row .el-radio__input {
    height: 30px;
    line-height: 30px
}

.user .el-input.is-disabled .el-input__inner {
    background: transparent;
    border: 0
}

.user .sbtn {
    border-radius: 0 4px 4px 0
}

.user .sbtn button {
    background: #999;
    color: #c7c7c7;
    font-size: 13px;
    text-shadow: none;
    width: 50px;
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    font-weight: 300;
    margin: 4px 0 4px 5px;
    height: 32px;
    line-height: 32px;
    border-radius: 20px;
    text-align: center
}

.user .sbtn button.active {
    color: #fff
}

.user .ipt_sbtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 13px
}

.user .el-row .ir button,
.user .ipt_sbtn {
    color: #888;
    border: 1px solid #dedede;
    border-radius: 5px;
    transition: all .5s;
    width: 90px;
    padding: 13px 10px;
    text-align: center
}

.user .el-select {
    width: 100%
}

.user .sbtn.money {
    padding: 8px 0 0 8px
}

.user .sbtn.money button {
    width: 80px;
    text-align: center;
    padding: 0;
    margin: 0 8px 8px 0;
    line-height: 1.3;
    border: 1px solid rgba(43, 202, 164, .5);
    color: #00bfb0;
    border-radius: 25px
}

.user .sbtn.money button.transfer {
    background: rgba(48, 255, 231, .1);
    font-weight: 500
}

@media (min-width:1001px) {
    .user .el-row .ir button:hover,
    .user .ipt_sbtn:hover,
    .user .sbtn.money button.transfer:hover {
        background: var(--main-color-h);
        color: #fff;
        border-color: transparent
    }
    .user .btn2:hover {
        opacity: .8
    }
}

.user .Note {
    width: 100%;
    margin: 8px 0 30px;
    color: #666
}

.user .Note h3 {
    line-height: 28px;
    font-size: 13px;
    color: var(--main-color);
    font-weight: 600
}

.user .Note ol {
    margin: 0 0 0 14px
}

.user .Note ol li {
    line-height: 24px;
    font-size: 13px;
    color: #888;
    margin: 0
}

.user .Note ol li b {
    color: #ff932b;
    font-size: 14px
}

.user .Note ol li a {
    margin: 0 3px;
    font-weight: 600;
    color: #e7c080
}

.user .Note button {
    display: inline-block;
    width: 49%;
    max-width: none
}

.cpw .flex {
    display: flex;
    margin: -18px 0 0 -18px
}

.cpw .flex a {
    width: calc(50% - 18px);
    margin: 18px 0 0 18px;
    text-align: center
}

.cpw .flex a .h4 {
    margin: 8px 0;
    line-height: 1.3
}

.cpw .flex a img {
    max-width: 110px;
    display: block;
    width: 100%;
    height: auto;
    margin: auto auto 8px;
    border: 1px solid #ececec
}

.cpw .flex a .h5 {
    min-height: 1rem;
    font-size: 12px;
    color: #e63f3f;
    line-height: 1.3
}

.cpw .el-dialog {
    max-width: 400px
}

.cpw .el-dialog button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto
}

.cpw .el-dialog button span {
    line-height: 1
}

@media (max-width:1000px) {
    .us_pcbox,
    .user {
        width: 100%
    }
    .user {
        padding: 0 10px 55px;
        background: none;
        margin: 0;
        border: none
    }
    .user .btn,
    .user button {
        padding: 14px 0;
    }
    .user .ipt_sbtn {
        width: auto;
        border: none
    }
    .user .btn2 {
        width: 100%
    }
    .user .el-row {
        width: 100%;
        margin: 8px 0;
        border-bottom: none;
        padding-bottom: 0
    }
}

@media only screen and (max-width:460px) {
    /* w460px以下 */
    .user .el-row .il img {
        display: none;
    }
}

.el-scrollbar__wrap {
    overflow: auto
}

.el-input--suffix .el-input__inner {
    color: #888
}

.el-select-dropdown {
    border: 1px solid #e4e7ed;
    background-color: #fff
}

.el-select-dropdown__item {
    color: #606266
}

.el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: #e4e7ed
}

.el-popper[x-placement^=bottom] .popper__arrow:after {
    border-bottom-color: #fff
}

.el-button--primary {
    background: var(--main-color);
    color: #fff;
    border: none
}

.el-button--backtrack {
    background: #e8e8e8;
    color: #888;
    border: none
}

.el-button--primary:focus,
.el-button--primary:hover {
    background: var(--main-color-h);
}

.el-button--backtrack:focus,
.el-button--backtrack:hover {
    background: var(--main-color-h);
    color: #fff;
}

.el-select-dropdown__item.hover {
    background-color: #f5f7fa
}

@media (min-width:1001px) {
    .el-select-dropdown__item:hover {
        background-color: #f5f7fa
    }
}

.el-date-table th {
    color: #e6e6e6
}

.el-date-picker__header-label,
.el-month-table td .cell,
.el-year-table td .cell {
    color: #606266
}

.el-date-editor .el-range-separator {
    width: 10%;
    color: #c7c7c7
}

div.el-picker-panel.el-date-picker.el-popper {
    background: #fff;
    border: 0
}

.datePicker input.el-range-input {
    color: #c7c7c7
}

.el-dialog {
    width: 960px
}

.el-dialog__headerbtn .el-dialog__close {
    color: #b4b4b4
}

.el-dialog img {
    max-width: 100%;
    height: auto
}

.el-dialog .Note ol li,
.el-dialog p {
    color: #888
}

.el-dialog .Note img {
    float: right;
    width: 176px
}

.el-dialog .Note h3 {
    color: #888
}

.el-dialog .Note ol li a {
    color: #ffa531
}

.el-dialog .Note ol li b {
    color: #faff17
}

.el-dialog .el-dialog__headerbtn {
    color: #b4b4b4;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    font-size: 23px;
    background: none
}

.el-dialog .el-dialog__header .el-dialog__title {
    font-size: 17px;
    color: #888
}

.el-dialog .el-dialog__body {
    padding: 0 15px 20px
}

.deposit .el-dialog img {
    max-width: 100%;
    width: auto;
    height: auto
}

.qrcode .el-dialog__body {
    text-align: center
}

.qrcode .el-dialog .red {
    color: #ff2626;
    font-weight: 700;
    font-size: 16px
}

.goboQR {
    width: 176px;
    margin: 0 0 10px
}

@media (max-width:1001px) {
    .goboQR {
        display: block
    }
    .el-dialog {
        width: 90%
    }
}

.el-tabs__active-bar,
.el-tabs__header .el-tabs__item.is-top.is-active,
.el-tabs__nav-wrap:after {
    background-color: var(--main-color);
    color: #fff
}

.el-tabs--card>.el-tabs__header {
    margin: 0
}

@media (min-width:1001px) {
    .el-tabs__item:hover {
        background-color: var(--main-color-h);
        color: #fff
    }
}

.center .el-tab-pane p {
    font-size: 15px
}

.center .el-input__inner {
    padding: 0, 0
}

.center .user .lottey_title {
    font-weight: 700;
    text-align: center;
    margin: 14px 0 4px;
    color: #c7c7c7
}

.center .user #action_forms_marksix {
    padding: 0 3%
}

.center .user input.lottey_number {
    width: calc(14.28571% - 9px);
    float: left;
    height: 48px;
    font-size: 16px;
    color: #777;
    margin: 15px 4.5px;
    text-align: center;
    padding: 0;
    background: #e8e8e8;
    border-radius: 5px;
    border: 1px solid #ddd
}

.center .user .lottey_bottom {
    color: #c7c7c7;
    text-align: center
}

.center .user .aaa {
    display: flex
}

.center .user button.lottey_button {
    width: 30%;
    margin: 20px auto
}

.center .user .lucky_b {
    float: left;
    font-size: 16px;
    color: #777;
    margin: 15px 4.5px;
    text-align: center;
    background: #e8e8e8;
    border-radius: 50%;
    border: 1px solid #ddd;
    width: 3em;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center
}

.center .user .vip_box .el-row h4 {
    background: none
}

.center .pgsbar_bx {
    width: 100%;
    display: inline-block;
    vertical-align: top
}

.center .pgsbar {
    padding: 18px
}

.center .pgsbar .items_bg {
    position: relative
}

.center .pgsbar .items {
    display: flex;
    flex-flow: row wrap
}

.center .pgsbar .items:before,
.center .pgsbar .line {
    content: "";
    position: absolute;
    background: #eee;
    border-radius: 5px
}

.center .pgsbar .items li {
    list-style: none;
    display: inline-block;
    text-align: left;
    font-size: .875rem;
    position: relative;
    width: 90px;
    z-index: 1
}

.center .pgsbar .items li b,
.center .pgsbar .items li span {
    text-align: center;
    display: block
}

.center .pgsbar .items li>span {
    border-radius: 50%;
    background: #eee;
    color: #000;
    height: 90px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 3px
}

.center .pgsbar .items li b {
    width: 100%;
    color: #888;
    line-height: 34px;
    font-size: 12px;
    vertical-align: top;
    display: inline-block
}

.center .pgsbar .items .active>span {
    background: #a9a9a9;
    color: #fff;
    border: 7px solid #eee
}

.center .pgsbar .line {
    background: #e3e3e3
}

@media (max-width:760px) {
    .center .pgsbar .items {
        flex-direction: column
    }
    .center .pgsbar .items:before,
    .center .pgsbar .line {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 10px;
        max-height: calc(97% - 18px);
        height: 100%
    }
    .center .pgsbar .line {
        width: 5px
    }
    .center .pgsbar .items li b {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 106px
    }
    .center .pgsbar .items li:nth-child(odd) b {
        right: calc(50% + 8px);
        text-align: right
    }
    .center .pgsbar .items li:nth-child(2n) b {
        right: calc(50% - 220px);
        text-align: left
    }
    .center .pgsbar .items li {
        margin: 0 auto 3%
    }
    .center .pgsbar .items li:last-child {
        margin: auto
    }
}

@media (min-width:761px) {
    .center .pgsbar .items {
        flex-wrap: inherit;
        justify-content: space-between
    }
    .center .pgsbar .items:before,
    .center .pgsbar .line {
        top: 32%;
        transform: translateY(-50%);
        width: 100%;
        height: 10px
    }
    .center .pgsbar .line {
        height: 5px
    }
}

.login.el-main, .reg.el-main {
    width: 560px;
    height: auto;
    margin: 210px auto 60px;
    padding: 10px 60px 40px;
    font-size: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #ddd
}

.login.el-main .errWarning label, 
.reg.el-main .errWarning label{
    height: 40px;
    line-height: 40px;
    margin: 0 5px 0 0;
    display: inline-block;
    font-size: 16px;
}

.login .el-tabs h4, .register_title{
    font-size: 17px;
    color: #888;
    margin: 0 0 20px;
    text-align: center
}

.login .el-tabs .btnbx {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 10px);
    margin: 0 0 0 -5px
}

.login .el-tabs .btnbx button {
    width: calc(50% - 10px);
    padding: 13px 0;
    margin: 0 5px;
    font-size: 14px
}

.login .el-tabs .btnbx button.btn2 {
    background: #7b7b7b;
    color: #FFFFFF
}

.login .el-tabs .btnbx button.btn2:hover {
    background: #AAAAAA;
}

.login .el-row {
    margin: 0 0 14px;
    border-radius: 5px;
    overflow: hidden
}

.login .el-row .ipttit {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #fff;
    background: var(--main-color);
    text-align: center
}

.login .el-row .ipttit i {
    font-size: 18px;
    line-height: 40px
}

.login .el-button {
    background-color: #3b3b3b;
    border-color: #3b3b3b
}

.login .el-checkbox {
    color: #c7c7c7;
    margin: 0 0 10px
}

.login .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #c7c7c7
}

.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.login .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #3b3b3b;
    border-color: #3b3b3b
}

.login .el-input__inner {
    color: rgb(43, 43, 43);
    border-radius: 0;
    padding: 0 10px;
    height: 40px
}

.login .el-form-item__label {
    background: var(--main-color);
    border-radius: 5px 0 0 5px;
    color: #fff
}

@media (max-width:1001px) {
    .login.el-main {
        width: 100%;
        padding: 0 10px;
        border: none;
        margin: 44px auto 60px
    }
    .login .el-tabs h4, .register_title{
        text-align: left;
        font-size: 14px;
        color: #888
    }
}

.reg.el-main {
    width: 560px;
    height: auto;
    margin: 200px auto 40px;
    padding: 30px 60px 40px;
    font-size: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #ddd
}

.reg .el-input {
    width: 70%
}

.reg .el-input input {
    color: #222;
    border: 1px solid #999;
    border-radius: 0;
    padding: 0 10px;
    height: 40px
}

.reg #sendActbtn {
    color:rgb(235, 231, 37);
    background: #4e4e4e;
    cursor: pointer;
}
.reg #sendActbtn.disabled {
    background: #818181;
    cursor: no-drop;
}
@media (min-width:1001px) {
    .reg #sendActbtn:hover {
        background: #818181;
    }
}

.reg .el-button {
    background: var(--main-color);
    color: #fff
}

.reg .el-input-group__append button {
    color: #888;
    background: none
}

.reg .vefca_code {
    background: #fff;
    vertical-align: top
}

.reg .vefca_code button {
    width: 84px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    margin: 0 5px;
    position: relative;
    background: #848484;
    color: #fff
}

.reg .el-form-item__label {
    background: var(--main-color);
    border-radius: 5px 0 0 5px;
    color: #fff
}

.reg .el-form-item__error {
    color: #fff
}

@media (max-width:1001px) {
    .reg.el-main {
        width: 100%;
        padding: 0 20px 0 10px;
        border: none;
        margin: 44px auto 60px
    }
}

@media (min-width:1001px) {
    .reg .el-input-group__append button:hover {
        background: none;
        color: #aaa
    }
    .reg .el-button:hover {
        background: var(--main-color-h);
    }
}

.pass.el-main {
    width: 560px;
    height: auto;
    margin: 200px auto 40px;
    padding: 30px 60px 40px;
    font-size: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #ddd
}

.pass .el-input {
    width: 70%
}

.pass .el-input input {
    color: #222;
    border: 1px solid #999;
    border-radius: 0;
    padding: 0 10px;
    height: 40px
}

.pass .el-button {
    background: var(--main-color);
    color: #fff
}

.pass .el-form-item__label {
    background: var(--main-color);
    border-radius: 5px 0 0 5px;
    color: #fff
}
.pass .forgetPass_title {
    margin: 0 0 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}
.pass .forgetPass_title .fptext {
    position: relative;
    color: #888;
    width: 33.33%;
    
}
.pass .forgetPass_title .fptext span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background: #888;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 50%;
}
.pass .forgetPass_title .fptext p {
    margin: 0;
    margin-top: 11px;
    padding: 20px 0;
    display: block;
    width: 100%;
    font-size: 16px;
    text-align: center;
    border-top: 3px solid #888;
}

.pass .forgetPass_title .fptext.active {
    color:var(--main-color);
}
.pass .forgetPass_title .fptext.active span {
    background: var(--main-color);
}
.pass .forgetPass_title .fptext.active p {
    border-top: 3px solid var(--main-color);
}
.pass .errWarning {
    color: #fb1900;
}
.pass .forgetFinish {
    font-size: 18px;
    color: #222;
    border-radius: 0;
    padding: 0 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.pass .forgetFinish i {
    margin-right: 5px;
    color:var(--main-color);
}

@media (max-width:1001px) {
    .pass.el-main {
        width: 100%;
        padding: 0 20px 0 10px;
        border: none;
        margin: 44px auto 60px
    }
}

@media (min-width:1001px) {
    .pass .el-button:hover {
        background: var(--main-color-h);
    }
}

.el-form-item__label {
    width: 30%;
    font-size: 12px;
    color: #e9e9e9;
    background: #626262;
    text-align: center
}

.el-tabs__item {
    text-align: center;
    color: #888;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    background: #e8e8e8;
    width: auto;
    border-radius: 5px;
    padding: 0 20px;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
    border: none;
    transition: all .3s
}

.el-tabs--card>.el-tabs__header {
    border: none;
    margin: 10px 0 15px
}

.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none
}

.el-input-group__append {
    padding: 0;
    border: none;
    white-space: inherit;
    background: none
}

.el-input-group__append img {
    width: 100px;
    height: 40px
}

.el-button [class*=el-icon-]+span {
    font-size: 12px
}

.el-input-group__append .el-button {
    float: right;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    color: #b5b5b5
}

.sf_phone_pop .el-dialog__headerbtn {
    padding: 0;
    margin: 0
}

.sf_phone_pop .el-dialog {
    max-width: 550px
}

.sf_phone_pop .el-dialog .el-dialog__header {
    padding: 0
}

.sf_phone_pop .el-dialog .el-dialog__body {
    padding: 20px
}

.sf_phone_pop .el-dialog .el-dialog__body h3 {
    color: #e7c080;
    font-size: 15px;
    text-align: center
}

.sf_phone_pop .el-dialog .el-dialog__body p span {
    color: #f80000;
    font-size: 14px
}

.sf_phone_pop .el-dialog .el-dialog__body .btn {
    width: 120px;
    margin: 10px auto 0;
    display: inherit
}

.user .platform {
    font-size: 0;
    margin: 5px 0 0;
    display: flex;
    flex-flow: row wrap
}

.user .platform li {
    width: calc(16.66667% - 10px);
    margin: 0 5px 10px;
    background: #f9f9f9;
    padding: 7px;
    border-radius: 5px
}

.user .platform li p {
    font-size: 13px;
    font-weight: 600;
    color: #ffa44d
}

.user .platform li h6 {
    color: #888;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px
}

.user .platform li h6 i {
    color: #d0d0d0;
    font-size: 15px;
    float: right;
    line-height: 24px;
    cursor: pointer
}

.user .platform li .tsf_btn {
    margin: 4px 0 0
}

.user .platform li .tsf_btn b {
    font-size: 12px;
    color: #fff;
    background: #285e79;
    line-height: 22px;
    width: 42px;
    text-align: center;
    margin: 0 5px 0 0;
    border-radius: 4px;
    display: inline-block;
    vertical-align: top
}

.user .platform li .tsf_btn b:nth-child(2) {
    background: #616161;
    margin: 0
}

.user .platform .key,
.user .platform .key button {
    color: var(--main-color);
    padding: 0;
    min-width: auto;
    font-size: 12px;
    background: transparent;
    line-height: 1.3;
    margin: 5px 0 0;
    height: auto;
    width: inherit
}

.user .platform .key.none,
.user .platform .key.none button {
    color: #b3b3b3;
    cursor: text
}

.user .platform .key button:first-of-type {
    margin-right: 4px
}

.user .platform .key button:nth-of-type(2) {
    margin-left: 0
}

.el-message-box {
    width: inherit
}

@media (max-width:1001px) {
    .user .platform {
        margin: 10px 0 0
    }
    .user .platform li {
        width: calc(33.33333% - 7px);
        margin: 0 0 10px
    }
    .user .platform li:nth-child(3n+2) {
        margin: 0 10px 10px
    }
}

@media (min-width:1001px) {
    .user .platform .key button:hover {
        text-decoration: underline
    }
    .user .platform .key.none button:hover {
        text-decoration: inherit
    }
}

.NoTWl {
    max-width: 500px;
    margin: auto;
    background: none;
    border-radius: 16px;
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .5)
}

.NoTWl .title {
    width: 100%;
    background: var(--main-color);
    height: 120px;
    border-radius: 16px 16px 0 0;
    position: relative
}

.NoTWl .title .tit_p {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 30px auto 0;
    width: 145px
}

.NoTWl .title .tit_p p {
    font-size: 24px;
    line-height: 34px;
    display: inline-block;
    vertical-align: top;
    color: #fff
}

.NoTWl .title .tit_p img {
    margin: 0 10px 0 0;
    display: inline-block;
    vertical-align: top
}

.NoTWl .body {
    background: #fff;
    border-radius: 0 0 16px 16px;
    text-align: center;
    padding: 0 0 30px
}

.NoTWl .body .btn {
    width: 110px
}

.NoTWl .body .card {
    background: #fff;
    padding: 14px;
    border-radius: 16px;
    text-align: center;
    width: 90%;
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .5);
    display: inline-block;
    margin: -30px auto 30px;
    z-index: 1;
    position: relative
}

.NoTWl .body .card h3 {
    color: #818181;
    font-size: 13px
}

.NoTWl .body .card p {
    color: #666;
    font-size: 36px;
    font-weight: 600;
    margin: 8px 0 16px;
    line-height: 40px
}

.NoTWl .body .card p i {
    background: #666;
    width: 28px;
    color: #fff;
    font-size: 17px;
    height: 28px;
    line-height: 28px;
    vertical-align: top;
    margin: 6px 10px 0 0;
    border-radius: 50%
}

.NoTWl .body .btn,
.NoTWl .body .card .btn {
    margin: 0 0 14px;
    background: var(--main-color)
}

.NoTWl .body .card h3.sp2 {
    color: #999;
    font-size: 14px
}

.NoTWl .body .radio {
    text-align: left;
    width: 90%;
    margin: 0 auto
}

.NoTWl .body .radio .el-radio .el-radio__label {
    font-size: 18px;
    color: #8d8d8d
}

.NoTWl .body .radio .el-radio .el-radio__input .el-radio__inner {
    width: 20px;
    height: 20px
}

.radio {
    padding-left: 8px
}

.radio .el-radio .el-radio__input {
    height: 45px;
    line-height: 45px
}

.radio .el-radio .el-radio__input .el-radio__inner {
    border: 2px solid #8d8d8d
}

.radio .el-radio .el-radio__input.is-checked .el-radio__inner {
    border-color: #3f90b6;
    background: #3f90b6
}

.radio .el-radio .el-radio__input.is-checked+.el-radio__label {
    color: #3f90b6;
    height: 40px;
    line-height: 40px
}

.radio p {
    color: #999;
    font-size: 14px;
    margin: 3px 0 20px 20px
}

@media (max-width:1001px) {
    .NoTWl {
        width: 96%;
        margin: 10px auto
    }
    .NoTWl .title {
        height: 100px
    }
    .NoTWl .title .tit_p {
        margin-top: 18px
    }
    .NoTWl .body {
        padding-bottom: 1em
    }
    .NoTWl .body .card {
        padding: 8px;
        margin-bottom: 1em
    }
    .NoTWl .body .card .btn {
        margin: 0 auto 1em;
        display: block
    }
    .NoTWl .body .card h3,
    .NoTWl .body .card p {
        display: inline-block;
        margin: 0 0 8px
    }
    .NoTWl .body .card h3 {
        margin-right: 8px
    }
    .NoTWl .radio p {
        margin: -6px 0 1em 28px
    }
    .NoTWl .body .radio .el-radio .el-radio__label,
    .NoTWl .radio .el-radio .el-radio__input,
    .user .NoTWl label,
    .user .NoTWl label input {
        height: inherit;
        line-height: 1.3
    }
    .user .NoTWl .btn {
        padding: 8px
    }
}

@media (min-width:1001px) {
    .NoTWl .body .btn:hover,
    .NoTWl .body .card .btn:hover {
        background: var(--main-color-h)
    }
}

.pagination {
    margin: 10px 0
}

.pagination li {
    background: #4e4e4e;
    width: 28px;
    line-height: 28px;
    text-align: center;
    margin: 0 5px 0 0;
    color: #c7c7c7;
    border-radius: 4px;
    font-size: 13px;
    vertical-align: top;
    display: inline-block;
    cursor: pointer;
}

.pagination li.active {
    background: var(--main-color);
    color: #fff
}

.pagination li a {
    width: 100%;
    display: inline-block;
    vertical-align: top
}

.user .el-row .ir.Agent_set {
    min-height: 40px;
    border-radius: 0 5px 5px 0
}

.user .el-row .ir.Agent_set ol {
    color: #a9a9a9;
    margin: 0 0 0 30px;
    padding: 10px 0 10px 4px
}

.user .el-row .ir.Agent_set ol li {
    margin: 0 0 8px;
    font-size: 14px;
    text-align: left
}

.agent .el-dialog {
    width: 200px;
    text-align: center
}

.agent .el-dialog img {
    width: 150px;
    height: 150px;
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto
}

.agent .el-dialog .share img {
    width: auto;
    height: 22px
}

.agent .el-row .il img {
    height: 14px;
    margin: 0 6px 0 12px
}

.agent .el-tabs__item {
    color: #fff
}

.agent .el-tab-pane p {
    color: #999;
    font-size: 15px;
    margin: 20px 0 4px
}

.agent .el-input__inner {
    padding: 0, 0
}

.agent .ul {
    margin: 0;
    padding: 0 0 0 15px;
    color: #ddd;
    font-size: 12px;
    color: #ff0;
    list-style-type: square
}

.agent .ul li {
    border-bottom: 1px dotted #999
}

@media (max-width:1001px) {
    #copyUrl .table_scroll {
        display: block;
        margin-right: 8px
    }
}

@media only screen and (max-width:460px) {
    .agent .el-row .il img {
        display: none
    }
}

.Record .el-row {
    overflow: hidden
}

.el-message-box {
    width: 90%;
    max-width: 420px
}

.el-message-box__headerbtn {
    top: 10px
}

.el-message-box__btns .el-button,
.el-message-box__headerbtn {
    width: auto;
    height: auto
}

.AgentReport table {
    width: 100%;
    margin: 0 0 0 80px
}

.AgentReport table tr td,
.AgentReport table tr th {
    padding: 6px 0;
    width: auto;
    min-width: 70px
}

.AgentReport td:first-child,
.AgentReport th:first-child {
    position: absolute;
    left: 0;
    z-index: 1;
    background-color: var(--main-color);
    color: #fff;
    width: 80px
}

.AgentReport td:nth-child(2),
.AgentReport th:nth-child(2) {
    border-left: none
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #fff
}

.el-checkbox__input.is-checked+.el-checkbox__label {
    color: var(--main-color);
}

.el-checkbox__inner:after {
    border-color: #000
}

@media (min-width:1001px) {
    .el-message-box__headerbtn:hover {
        background-color: transparent
    }
}

.el-dialog .pro_content pre {
    white-space: pre-wrap;
    word-wrap: break-word
}

.station .message {
    width: 100%;
    margin-bottom: 5em
}

.station .message .el-row {
    padding: 0 10px;
    background: #dfdfdf;
    border: 0;
    border-radius: 6px;
    margin-top: 10px;
    cursor: pointer;
}

@media only screen and (min-width:1001px) {
    .station .message .el-row:hover {
        background: #e9e9e9;
    }
}

.station .message .el-row .msgbox {
    line-height: 26px;
    font-weight: 600;
    color: #dedede;
    font-size: 13px;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin: 10px 0
}

.station .el-collapse-item__header {
    height: 26px;
    line-height: 26px;
    background-color: hsla(0, 0%, 100%, 0);
    border: none;
    color: #0c0c0c;
    font-weight: 600
}

.station .el-collapse-item__header .header-icon,
.station .el-collapse-item__header .header-icon2 {
    margin: 0 4px 0 0;
    font-size: 15px;
    line-height: 26px
}

.station .el-collapse-item__wrap {
    /* background-color: hsla(0, 0%, 100%, 0); */
    background: #fbfbfb;
    border: none;
    margin-bottom: 15px;
}

.station .el-collapse-item__content {
    color: #000;
    font-weight: 300;
    margin-bottom: 10px;
    border-bottom: 1px solid #dcdcdc;
    padding: 5px 30px;
}

.station .el-collapse {
    border-top: none;
    border-bottom: none
}

.success .message {
    min-height: calc(100vh - 115px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
    color: #000;
    text-align: center
}

.success .message p {
    font-size: 12px
}

.success .message strong {
    font-size: 20px
}

.success .message .back {
    font-weight: 700;
    margin-top: 38px;
    color: var(--main-color);
    cursor: pointer
}

.withdrawal .wallet_id_set {
    margin: -2px 0 8px
}

.withdrawal .cgpst {
    padding: 0 0 0 8px;
    border-radius: 0 4px 4px 0
}

.withdrawal .cgpst label {
    height: 30px;
    line-height: 30px
}

body:not(.user-is-tabbing) div:focus {
    outline: none;
}

.user .platformTitle {
    height: 50px;
    background: var(--main-color);
    margin: 10px 7px 0;
    border-radius: 5px;
}

.user .platformTitle span {
    line-height: 50px;
    margin-left: 15px;
    color: white;
}

.user .platformTitle .refresh {
    border-radius: 5px;
    padding: 6px;
    color: var(--main-color);
    cursor: pointer;
    color: #fff;
    border: 1px solid #fff;
    background: #5553;
}

@media (max-width: 1001px) {
    .user .platformTitle {
        margin: 10px 0 0;
    }
}

@media (min-width: 1001px) {
    .user .platformTitle .refresh:hover i{
        transform: rotate(360deg);
        transition: 0.5s;
    }
}

.el-tabs-btn-nav{
    margin: 0 20px;
    padding: 0 30px !important;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
}

/* 派彩紀錄 */
.timebox-inp .time-error {
    float: right;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    color: #fb1900;
}

.timebox-inp #from.error,
.timebox-inp #to.error {
    border: 1px solid #fb1900;
}

.timebox-inp .time-il,
.timebox-btn .time-il {
    min-width: 70px;
}
@media (max-width: 465px) {
    .timebox-inp .time-error {
        float: left;
    }
    .timebox-inp #from,
    .timebox-inp #to {
        width: 40%;
    }
    .timebox-btn .time-tabBtn {
        width: 100%;
    }
}