body {
    font-family: AvenirNext, montserrat, Noto Sans SC, sans-serif;
    overflow-x: hidden;
    background: url(../img/body-bg.jpg);
    background-size: 100% auto;
    font-size: 0.9rem;
}
.fs-85 { font-size: 85%; }
.fs-90 { font-size: 90%; }
.fs-95 { font-size: 95%; }
a { text-decoration: none;}
.duration-base { transition-duration: .3s;}
.transition-\[background\] { transition-property: background; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s;}
.owl-carousel { position: relative;}
.owl-dots { position: absolute; z-index: 9999; bottom: 30px; left: 50%; transform: translateX(-50%);}
.owl-dots .owl-dot { box-sizing: content-box; flex: 0 1 auto; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: #1c1c1c !important; background-clip: padding-box !important; border-top: 10px solid transparent !important; border-bottom: 10px solid transparent !important; opacity: .5; transition: opacity .6s ease;}
.owl-dots .owl-dot.active { opacity: 1; /* width: 16px; */ background-color: #53BCFF !important;}
.-track { width: 100%; white-space: nowrap; overflow: hidden; box-sizing: border-box; margin-left: .5rem;}
.-track .-track-item { display: inline-block; padding-left: 100%; -webkit-animation: x-marquee 20s linear infinite; animation: x-marquee 20s linear infinite;}
@keyframes x-marquee {
    0% { transform: translate(0); }
    100% { transform: translate(-100%); }
}
.main-container { position: relative; padding: 10px 10px 50px 10px;}
.main-container .col-6 { padding: 0; padding-bottom: 0.5rem; padding-right: 0.56rem;}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: transparent; color: #333; box-shadow: none;}
.nav-pills .nav-link { padding: 0;}
.tab-pane { padding: 0 10px;}
.text-ellipsis { text-overflow: ellipsis;}
.customModel .modal-dialog { width: 100%; padding: 40px 45px 72px;}
.customModel .modal-content { background: transparent;}
.customModel .modal-header { border: 0; display: none;}
.customModel .modal-content { border: 0;}
.model-logo { max-height: 3.5rem; margin-bottom: 10px !important;}
.\!bg-login-register-b-modal { background: transparent url(../img/modal-bg.png); background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 10px;}
.pb-\[30px\] { padding-bottom: 1.875rem;}
.btn-default { color: #333; background-color: #fff; border-color: #ccc;}
.btn-default:hover { background: #cccccc; }
.px-\[15px\] { padding-left: 15px; padding-right: 15px;}
.px-\[30px\] { padding-left: 30px; padding-right: 30px;}
.customModel h2 { color: #333; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600;}
.customModel .nav { border: .0625rem solid #ced2e3; background-color: #0000000d; border-radius: 624.9375rem; height: 2.25rem;}
.customModel .nav button { padding: 0 15px; height: 100%; width: 50%; display: flex; align-items: center; justify-content: center; font-size: 90%; font-weight: 600; color: #333;}
.customModel .nav button.active { background-color: transparent; color: #cfa654; border-radius: 6000rem; border: 1px solid #cfa654;}
.customModel input[type=text], .customModel input[type=password] { background-color: #dddddd; /*border-radius: 625rem;*/ box-shadow: 0 0 5px rgba(255, 255, 255, 0.8); font-size: 90%;}
.customModel .tab-pane { padding: 0;}
/*.form-control:focus {
    color: rgb(24, 24, 24);
    border-color: #cfa654;
    box-shadow: none;
}*/
.submit-btn { border: 0; border-radius: 500rem; background-color: #deb87f; opacity: 0.5; padding-top: .625rem; padding-bottom: .625rem;}
.logo { position: absolute; left: 1.2rem; top: 1rem; z-index: 10;}
.logo img { width: 9rem; height: 100%;}
.login-menu { font-size: 1.2rem; display: flex; position: fixed; right: 0; top: 0.8rem; z-index: 10; box-shadow: -6px 6px 0 0 #3f0067, 6px 6px 0 0 #3f0067;}
.login-menu a { font-size: 1.1rem; height: 2.2rem; padding: 0 10px; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center;}
.login-menu a.a { background: #53BCFF; color: #fff;}
.login-menu a.b { background: #FF872E;}
.lang-switch { min-width: 42px; border-radius: 0; padding: 0; border: 0; background: #6820D4; }
.lang-switch li.active { border: 0 !important; }
.lang-switch a, .lang-switch a:hover { padding: 0; font-size: 90% !important; border: 0 !important; }
.switch-lang { background: #6820D4; padding: 0 7px !important;}
.notice { width: 100%; font-size: 12px; padding-top: 3px; display: flex; height: 50px;}
.notice img { float: left; margin: 1px 5px 0 10px; height: 40px; position: absolute;}
.notice .txt { flex: 1; background: #555555; height: 25px; line-height: 25px; margin-top: 8px; padding-left: 55px; color: white; width: inherit;}
.chats { position: absolute; top: 50%; transform: translateY(-50%); right: 0.3rem;}
.chats a img { width: 4.5rem;}
.item img.a, .item img.b { width: 100%; display: block;}
.item img.b { display: none;}
.nav-pills .nav-link.active .item img.a { display: none;}
.nav-pills .nav-link.active .item img.b { display: block;}
.main-container .nav-pills { width: 20%;}
.main-container .tab-content { width: 80%;}
.pull-right { float: right !important;}
.footer-bg { background: url(../img/footer-bg.jpg) no-repeat center center; background-size: 100% 100%; padding-bottom: 10px; bottom: 0;}
.footer-bg .footer .row2 { overflow: hidden;}
.footer-bg .footer .row2 { padding-top: 0.6rem;}
.footer-bg .footer .row2 .col1 img { width: 5rem; display: block; margin: auto;}
.footer-bg .footer .row2 .col2 { font-size: 0.64rem; text-align: center; color: #fff; line-height: 1.5em; margin-top: 0.6rem;}
.footer-bg .footer .row2 .col3 { margin-bottom: 10px;}
.footer-bg .footer .row2 .col3 { display: flex; justify-content: center; align-items: center;}
.footer-bg .footer .row2 .col3 img { width: 30px; height: 30px; margin: 0 5px;}
.table-filter { }
.table-filter .total { text-wrap: nowrap; font-size: 12px;}
/*.table-filter input { border-radius: 0 !important;}*/
.table-filter .date-range-pick button:hover { color: white;}
.record-page { /*font-size: 14px;*/ padding: 10px; background: #FFFFFF; border-radius: 10px; margin: 10px auto;}
.record-recharge-nav { background: rebeccapurple; overflow: hidden; display: flex; line-height: 30px; border-radius: 5px;}
.record-recharge-nav a { width: 50%; text-align: center; color: white; font-size: 14px; border-radius: 0; border: 0;}
.record-recharge-nav a.active, .record-recharge-nav a:hover { color: gold;}
.record-recharge-nav a:first-child { border-right: 2px solid snow;}
.record-total { border-bottom: 2px solid #dddddd; margin-bottom: 10px; height: 35px; line-height: 30px; font-size: 15px;}
.user-box { padding: 15px; border-radius: 10px; box-sizing: border-box; background: #567ae1; margin-bottom: 10px; line-height: 25px;}
.user-box .title { text-align: center; font-size: 18px; font-weight: 400; margin-bottom: 10px; }
.user-box .part { border: 1px solid #fff; padding: 10px; word-wrap: break-word; line-height: 25px; }
.user-box .part label { width: 100px; text-align: right; padding-right: 10px; }
.user-box .title-sub {border-bottom: 1px solid #ccc; margin-bottom: 5px; overflow: hidden;}
.user-box .table-sm > :not(caption) > * > * {padding: .10rem .25rem; font-size: 90%;}
.user-box p { padding: 0; margin: 0; }
.user-box a.copy { width: 40%; border-radius: 20px; padding: 5px 10px; background: #1f70e6;color: white; display: inline-block; }

.bg-purple { background: rebeccapurple; color: #FFFFFF; }
.bg-statement { background: orange; }
.bg-rebate { background: deepskyblue; }
.statementBox { background-color: #5960a6; color: white; padding: 8px; border: 0.01rem solid #FFFFFF;}
.block3-login { margin-top: 5.45894px;}
.index-signed-top { float: left; width: 100%; padding: 5px 10px 0 10px; font-size: 16px; overflow: hidden;}
.pull-left { float: left !important;}
.text-blue { color: blue;}
.refresh { font-size: 12px; display: inline-block; vertical-align: top; margin-left: 5px; padding: 3px 6px; background: #a504e8; color: #fff; border-radius: 5px; margin-top: 3px;}
.index-deposit-btn { float: right; font-size: 14.9758px !important; text-align: center !important; line-height: 32.9469px !important; height: 37.4375px !important; width: 95.8438px !important; background: url(../img/1905ac4644145cb8f218.png) no-repeat !important; background-size: contain !important; box-sizing: border-box; color: #727171; padding-bottom: 0 !important; margin-top: 17.971px;}
.block2-login { margin: 0 15px; background-image: linear-gradient(0deg, #accbee 0%, #eaf2fb 50%, #ffffff 100%); box-shadow: 0.17rem 0.18rem 0.46rem 0.05rem rgba(0, 0, 0, 0.28), 0.01rem 0.02rem 0.17rem 0.01rem rgba(255, 255, 255, 0.46); border-radius: 0.6rem; display: flex; flex-direction: column; margin-top: -38.9372px; position: relative; }
.block2-login .row2 { display: flex; box-sizing: border-box; padding: 0 11.9807px 5.99034px 11.9807px; justify-content: space-between; gap: 10px; }
.block2-login .row2 .col1 { width: 100%;}
.block2-login .row2 .col1 img { width: 100%;}
.block2-login .row2 .col2 { width: 90px;}
.block2-login .row2 .col2 a, .desktop-btn a { font-size: 14.9758px; color: #727171; width: 89.8542px; padding: 5px 0; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; border-radius: 0.2rem; box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.2); background-image: linear-gradient(45deg, #fff, #CCC); line-height: 105%; text-align: center;}
#commCollect { font-size: 14.9758px; display: flex; align-items: center; justify-content: space-between; background: grey; color: #FFFFFF; margin: 8.98551px 14.9758px 14.9758px 0;}
#commCollect .col1 { padding-left: 14.9758px; padding-top: 2px; flex: 1;}
#commCollect .col1 button { font-size: 14px; padding: 4px 8px; margin-right: 10px; background: #8822B3; border: 0; margin-top: -2px; border-radius: 5px; float: right; color: white;}
#commCollect .col2 { background: #8822B3; padding: 5.99034px 14.9758px;}
#commCollect .col2 a { color: #FFFFFF;}
.pkg-item { background: #ffffff; border-radius: 5px; border: 1px solid #c3c3c3; overflow: hidden; margin-bottom: 10px;}
.pkg-item img { border-radius: 5px 5px 0 0; border: 0; width: 100%;}
.pkg-item .intro { padding: 5px; overflow: hidden; line-height: 22px;}
.text-muted { color: #777;}
.pkg-item p { padding: 0; margin: 0;}
.text-red { color: red;}
.pkg-item .choosePkg { float: right; margin: 5px;}
.recharge-warn { text-align: center; color: yellow; font-size: 16px; margin-top: 20px;}
.menu-btn { width: 86.8438px; position: fixed; bottom: 32.5282px; right: 16.2641px; z-index: 1000; display: none; transition: all 1s ease;}
.menu-btn { display: block; cursor: pointer;}
.menu-btn img { width: 100%; display: block;}
.menu-btn .menu1 { display: none;}
.menu-box { position: fixed; bottom: 0; right: 0; width: 292.75px; height: 325.281px; z-index: 500; overflow: hidden;}
.menu-box { transform: translate(400px, 400px) scale(0.1, 0.1); transition: all .5s ease;}
.menu-box .menu-bg { position: absolute; top: 0; left: 0; width: 440.104px; height: 440.104px; font-size: 9.75845px;}
.menu-box .menu-bg img { width: 100%; display: block;}
.menu-box .menu-bg a { position: absolute; top: 0; left: 0; width: 48.7917px; height: 48.7917px;}
.menu-box .menu-bg .a1 { top: 247.214px; left: 19.5169px;}
.menu-box .menu-bg .a2 { top: 178.905px; left: 13.0113px;}
.menu-box .menu-bg .a3 { top: 7rem; left: 1.8rem; }
.menu-box .menu-bg .b2 { top: 9.75845px; left: 195.169px;}
.menu-box .menu-bg .a4 { top: 58.5507px; left: 71.562px;}
.menu-box .menu-bg .b1 { top: 22.7697px; left: 130.113px;}
.menu-box .menu-bg .b2 { top: 9.75845px; left: 195.169px;}
.menu-box .menu-bg .t1 { position: absolute; top: 80.6699px; left: 139.871px; width: 162.635px; height: 32.5208px; display: flex; align-items: center; color: #fff;}
.menu-box .menu-bg .t2 { position: absolute; top: 113.849px; left: 100.837px; width: 162.635px; height: 32.5208px; display: flex; align-items: center; color: #fff;}
.menu-box .menu-bg .t3 { position: absolute; top: 146.377px; left: 81.3204px; width: 162.635px; height: 32.5208px; display: flex; align-items: center; color: #fff;}
.menu-box .menu-bg .t4 { position: absolute; top: 178.905px; left: 71.562px; width: 162.635px; height: 32.5208px; display: flex; align-items: center; color: #fff;}
.menu-box .menu-bg .t5 { position: absolute; top: 214.686px; left: 71.562px; width: 162.635px; height: 32.5208px; display: flex; align-items: center; color: #fff;}
.menu-box .menu-bg .t6 { position: absolute; top: 247.214px; left: 81.3204px; width: 162.635px; height: 32.5208px; display: flex; align-items: center; color: #fff;}
.menu-box .menu-bg .balance { position: absolute; top: 162.641px; right: 91.0789px; width: 162.641px; height: 39.0312px; display: flex; align-items: end; color: #fff; text-align: right; font-size: 14.6377px;}
.menu-box.active { transform: translate(0, 0) scale(1, 1);}
.menu-btn.active { transform: rotate(-360deg);}
.menu-btn.active .menu1 { display: block;}
.menu-btn.active .menu2 { display: none;}
@media screen and (max-width: 512px) {
    .transaction-menu a { width: 19%; font-size: 10px; min-height: 27px; }
    /*.input-daterange input { width: 110px !important; }*/
    /*.table-filter button.btn-default { font-size: 10px !important; }*/
}
@media screen and (min-width: 767px) {
    .notice { width: 80.5% !important; }
    .desktop-btn { gap: 10px; margin-bottom: 10px; }
    .desktop-btn a { margin-top: 17.971px; }
    .desktop-btn .index-deposit-btn { background-size: cover !important; width: 120.8438px !important; }
}
#contactList { display: none; padding: 5px 10px; overflow: hidden;}
#contactList li { list-style: none; border-bottom: 1px dashed #cccccc; overflow: hidden;}
#contactList li:last-child { border-bottom: 0;}
#contactList li a { display: block; width: 100%; text-align: center; padding: 5px; }
.index-signed-banner { position: relative; overflow: hidden; margin-top: 2px; margin-right: 0;}
.btn-block {display: block;width: 100%;}
.btn-xs {padding: 3px 5px; font-size: 85%; border-radius: 5px}
.no-records { text-align: center; color: #888888; padding: 1rem 0; }
.error { color: red !important; }
i.fa { margin-right: 5px; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.pagebar { overflow: hidden; margin-bottom: 10px;}
.user-top { width: 100%; position: relative; height: 5.5rem; background: url(../img/top-bg.png) no-repeat; background-size: 100% 100%; padding: 10px; display: flex; justify-content: space-between;}
.user-top .left-content { /*padding: 10px 10px 0 10px;    overflow: hidden;*/}
.user-top .left-content a img { width: 42px; padding: 0;}
.user-top .right-content { /*font-size: 1.2rem;*/ color: #fff; text-align: right; margin-top: 0.5rem;}
.user-menu { display: flex; justify-content: space-around; padding: 0 0.2rem; margin-top: -40px; position: relative; margin-bottom: 10px;}
.user-menu { padding: 10px; display: flex;}
.user-menu a { flex-grow: 1; margin: 0 1px; padding: 7px 2px 3px 2px; font-size: 13px; text-align: center; color: #FFFFFF; border-radius: 3px;}
.user-menu a.active { border-bottom: 3px solid #FFFFFF;}
.user-menu a:nth-child(1) { background: rebeccapurple;}
.user-menu a:nth-child(2) { background: orange;}
.user-menu a:nth-child(3) { background: yellowgreen;}
.user-menu a:nth-child(4) { background: deepskyblue;}
.user-menu a:nth-child(5) { background: indianred;}
#modifyPwd { background: #FFFFFF; padding: 15px; border-radius: 10px; }
.valid-code-input {margin: 10px auto;text-align: center;display: flex;justify-content: center;}
.valid-code-input input {width: 35px;height: 35px;font-size: 20px;margin: 0 10px;border: 1px solid #ccc;border-radius: 5px;text-align: center;color: #333333;outline: none;}
.valid-code-input input:last-child {margin-right: 0;}
/* 焦点样式 */
.valid-code-input input:focus {border-color: #ffa500;background: #d0e9c6;}
/*倍场选择模态窗口*/
#slots_modal {display: none;width: 80%;height: fit-content;color: #FFFFFF;border: 1px solid #337b87;border-radius: 10px;font-size: 14px;font-weight: bold;line-height: 30px;text-align: center;overflow: hidden;margin: 20% auto 0 auto;left: 10%;}
#slots_modal p {color: black;font-size: 10px;text-align: left;margin: 0;line-height: 20px}
.slots_modal-header {background: #337b87;padding: 5px 10px;text-align: center;}
.slots_modal-body {padding: 20px 20px 0 20px;background: #dbeced;}
.slots_modal-btn {display: inline-block;text-align: center;width: 40%;margin: 0 0 5% 5%;background: #337b87;color: #FFFFFF;border-radius: 5px;padding: 2px 0;}
.slots_modal-btn:nth-child(odd) {margin-left: 0;}
#slots_modal .modal-content { border: 0;}
#slots_modal .modal-dialog { margin: 0;}

.statement-page { padding: 10px; background: #FFFFFF; border-radius: 10px; margin: 10px auto;}
.statement-page .row2 {margin: 0.5rem 0;}
.statement-page .row2 .item {background: #fff;border-radius: 10px;overflow: hidden;position: relative;margin-bottom: 0.5rem;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}
.statement-page .row2 .item .txt1 { /* background:#000;*/
    color: #fff;font-size: 15px;padding: 5px 10px;background-image: linear-gradient(0deg, #0161eb, #07c5ff);line-height: 20px;height: 50px;}
.statement-page .row2 .item .txt1 br {}
.statement-page .item .status-draw, .statement-page .item .status-win, .statement-page .item .status-lose {position: absolute;top: 24px;right: 0;height: 50px;width: 120px;font-size: 15px;padding: 5px 10px 5px 30px;text-align: center;background: #CCCCCC; /*border-top:20px solid transparent;border-right:50px solid red;border-bottom:20px solid transparent;*/
}
.statement-page .item .status-draw {color: white;background: url("../img/record-item-status-draw.png") no-repeat;background-size: cover;}
.statement-page .item .status-win {color: aqua;background: url("../img/record-item-status-win.png") no-repeat;background-size: cover;}
.statement-page .item .status-lose {color: red;background: url("../img/record-item-status-lose.png") no-repeat;background-size: cover;}
.statement-page .row2 .item .txt2 br {}
.statement-page .row2 .item .txtG {position: relative;border-bottom: 1px solid #ddd;}
.statement-page .row2 .item .txtG .txt3 {font-size: 85%;padding: 10px;line-height: 150%;color: #666666;}
.statement-page .row2 .item .txtG .txt3 strong {}
.statement-page .row2 .item .txtG .txt3 br {}
.statement-page .row2 .item .txtG .txt4 {position: absolute;bottom: 0;right: 0;padding: 0 10px 10px 10px;text-align: right;line-height: 1.6em;color: #666666;}
.statement-page .row2 .item .txtG .txt4 a {color: limegreen;}
.statement-page .row2 .item .txtG .txt4 p {margin: 0;font-size: 0.4rem;line-height: 20px;}
.statement-page .row2 .item .txtG .txt4 br {}

.announce {width: auto;height: 100%;margin: 10px;padding: 5px 0;border-radius: 10px;}
.announce .card { background: #FFFFFF; border: 1px solid #FFFFFF; }
.announce .card:hover { border: 1px solid #1f70e6; cursor: pointer; }

.top { color: #333333; flex: 1; margin-top: 1rem; border-radius: 10px; background: #FFFFFF; padding: 0.8rem; overflow: hidden; }

.datePickView {}
.date-range-pick { display: flex; gap: 5px; }
.date-range-pick .btn-group { min-height: 30px; }
.date-range-pick .btn-group .btn {font-size: 80%; }
.date-range-pick .btn-group .btn i { margin-right: 0;}

.float-support-btn { z-index: 9999; position: fixed; right: 1rem !important; bottom: 1rem !important; width: 50px; height: 50px; background: #705BF5; border-radius: 50%; }
.amount-opts {display: inline-flex; gap: .35rem; margin-top: .5rem; overflow: hidden; justify-content: stretch;flex-direction: row;flex-wrap: wrap;}
.amount-opts-item { padding: 3px 7px; border-radius: 5px; font-size: 95%;background: #0dcaf0;}