:root {
--icon-refresh:url('data:image/svg+xml,');
--icon-notice:url('data:image/svg+xml,');
--icon-notice-h:url('data:image/svg+xml,');
--icon-video:url('data:image/svg+xml,');
--icon-video-h:url('data:image/svg+xml,');
--icon-home:url('data:image/svg+xml,');
--icon-home-h:url('data:image/svg+xml,');
--icon-history:url('data:image/svg+xml,');
--icon-history-h:url('data:image/svg+xml,');
--icon-faq:url('data:image/svg+xml,');
--icon-faq-h:url('data:image/svg+xml,');
--icon-dev:url('data:image/svg+xml,');
--icon-dev-h:url('data:image/svg+xml,');
--icon-notice2:url('data:image/svg+xml,');
--icon-notice2-h:url('data:image/svg+xml,');
--icon-user:url('data:image/svg+xml,');
--icon-user-h:url('data:image/svg+xml,');
--icon-chart:url('data:image/svg+xml,');
--icon-chart-h:url('data:image/svg+xml,');
--icon-pankou:url('data:image/svg+xml,');
--icon-pankou-h:url('data:image/svg+xml,');
--icon-record:url('data:image/svg+xml,');
--icon-record-h:url('data:image/svg+xml,');
--icon-email:url('data:image/svg+xml,');
--icon-email-h:url('data:image/svg+xml,');
--numbg-blue:url('data:image/svg+xml,');
--numbg-green:url('data:image/svg+xml,');
--numbg-red:url('data:image/svg+xml,');
--listSelect:url('data:image/svg+xml,');
--search:url('data:image/svg+xml,')
}
body {background-color: var(--bs-light);}
img {max-width: 100%;}
@media (min-width: 992px) {
body {background-color: var(--bs-primary);}
}
.icon {display: inline-block; width: 26px; height: 26px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.icon-home {background-image: var(--icon-home);}
.icon-history {background-image: var(--icon-history);}
.icon-video {background-image: var(--icon-video);}
.icon-faq {background-image: var(--icon-faq);}
.icon-dev {background-image: var(--icon-dev);}
.icon-notice {background-image: var(--icon-notice2);}
.icon-pankou {background-image: var(--icon-pankou);}
.icon-record {background-image: var(--icon-record);}
.icon-email {background-image: var(--icon-email);}
.icon-user {background-image: var(--icon-user);}
.icon-chart {background-image: var(--icon-chart);}
.css-menu {position: relative; margin: 12px 0; height: 3px; background-color: var(--bs-primary); border-radius: 4px;}
.css-menu::after,
.css-menu::before {display: block; content: ''; width: 100%; position: absolute; height: 3px; background-color: var(--bs-primary); border-radius: 4px; left: 0; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.css-menu::after {top: -7px;}
.css-menu::before {bottom: -7px;}
.css-menu.menu-active {background-color: rgba(0, 0, 0, 0);}
.css-menu.menu-active::after {transform: rotate(45deg); top: 0;}
.css-menu.menu-active::before {transform: rotate(-45deg); bottom: 0;}
.btn-gray {background-color: var(--bs-gray);}
.btn-refresh,
.btn-play {display: inline-flex; align-items: center;}
.btn-refresh::before,
.btn-play::before {display: inline-block; content: ''; background-image: var(--icon-refresh); background-position: center; background-repeat: no-repeat; background-size: cover; width: 20px; height: 20px; margin-right: 5px;}
.btn-play::before {background-image: var(--icon-video); }
.btn-refresh.active::before {animation: spinner-refresh 1s linear infinite;}
@keyframes spinner-refresh {
to { transform: rotate(360deg); }
}
.header-top {display: flex; align-items: center; justify-content: space-between; padding:15px; font-size: .625rem; background-color: #fff;}
.header-top .container {display: flex; align-items: center; justify-content: space-between;}
.header-top .logo {width: 160px; flex-shrink: 0;}
.header-top .time-view {flex-shrink: 0;}
.header-top .view-num {color: #999;}
.header-top .time-today {color: var(--bs-primary);}
.header-top .time-today span {display: inline-block; padding: 0 3px;}
.header-top .time-today .ymd {width: 100%;display: block;}
.header-top .language {font-size: .875rem;flex-shrink: 1;}
.header-top .language .name {display: block; background-color: var(--bs-primary); color: #fff; border-radius: 10px; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 18px; position: relative; z-index: 1;}
.header-top .language a {display: inline-block; padding:0 10px; color: var(--bs-gray);}
.header-top .language .menu {display: none;}
.header-top .language.open .menu {display: block;}
.header .header-nav {display: flex; align-items: center; justify-content: end; position: fixed; left: 0; bottom:0; z-index: 100; width: 100%;}
@media (min-width: 992px) {
.header-top .container {align-items: end;}
.header-top .view-num {display: none;}
.header-top .time-today {display: none;}
.header-top .language a.active {color: var(--bs-primary);}
.header-top .language a[active="true"] {color: var(--bs-primary);}
.header-top .language .name {display: none;}
.header-top .language .menu {display: block;}
.header-top .language .menu a {border-left: solid 1px #d8d8d8;}
.header-top .language .menu a:first-child {border-left: 0;}
.header .header-wrap {display: flex; justify-content: space-between; border-bottom: solid 4px #F85959; padding: 10px 0;}
.header .view-num {width: 30%; color: #fff; display: flex; align-items: center;}
.header .header-nav {position: relative; background-color: var(--bs-primary);}
.header .header-nav a {display: block;padding:15px 0;color: #d8d8d8;}
.header .header-nav a:hover,
.header .header-nav a.active {color: #fff;}
.header .header-nav a i {display: none;}
.header .header-nav a span {display: block; padding:0 20px; border-right: solid 1px #d8d8d8;}
.header .header-nav a:last-child span {border-right: 0;}
}
@media (max-width: 991px) {
body:not(.no-botttomMenu) {padding-bottom: 140px;}
.header-top {border-bottom: solid 4px #F85959;}
.login-header {position: absolute; top: 0; left: 0; width: 100%;}
.login-header .container {justify-content: end;}
.login-header .logo {display: none;}
.header-top .language {position: relative;}
.header-top .language .menu {position: absolute; z-index: 2; margin-top:-8px; top: 100%; right: 0; background-color: var(--bs-primary); padding: 10px; min-width:100px; border-radius:10px 0 10px 10px;}
.header-top .language a {color: #fff; display: block; padding: 5px;}
.header .view-num {display: none;}
.header .header-nav a {display: block; width: 100%; text-align: center; color: #fff; padding:10px 5px; background-color: var(--bs-primary); border-left: solid 1px #fff; font-size: .625rem;}
.header .header-nav a:first-child {border-left: 0;}
.header .header-nav a span {display: block;}
.header .header-nav a.active {background-color: #fff; color: var(--bs-primary);}
.header .header-nav a.active .icon-home {background-image: var(--icon-home-h);}
.header .header-nav a.active .icon-history {background-image: var(--icon-history-h);}
.header .header-nav a.active .icon-video {background-image: var(--icon-video-h);}
.header .header-nav a.active .icon-faq {background-image: var(--icon-faq-h);}
.header .header-nav a.active .icon-dev {background-image: var(--icon-dev-h);}
.header .header-nav a.active .icon-notice {background-image: var(--icon-notice-h);}
.header .header-nav a.active .icon-user {background-image: var(--icon-user-h);}
.header .header-nav a.active .icon-chart {background-image: var(--icon-chart-h);}
.mobileFixed-ad {position: fixed; width: 100%;background-color: var(--bs-primary); color: #fff; left: 0; bottom: 79px;}
}
.banner .container {display: flex;align-items: stretch;}
.banner .time-today {display: none; flex-shrink:0; width:25%; max-width: 300px; background-color: #efefef;}
.banner .img {flex-shrink:1; max-height: 220px;; overflow: hidden;}
.banner .xstj {display: block; background-image: url(../images/xsimg-m.png); background-position:center top; background-repeat: no-repeat; background-size:100% auto; position: fixed; z-index: 99; bottom: 70px; left: 0; width: 100%; height: 80px;}
.banner .xstj span {position: absolute; top: 10%; right: 5%; font-size: 4rem; line-height: 1; font-weight: 600;}
@media (min-width:768px) {
.banner .xstj {height: 150px;}
.banner .xstj span {top: 30%; right: 10%;font-size: 5rem;}
}
@media (min-width: 992px) {
.banner .time-today {display: flex; flex-flow: column; align-items: center; justify-content: center; color: #999;}
.banner .time-today span {display: block;}
.banner .time-today .time {order: 1; font-size: 2.5rem; color: var(--bs-primary);}
.banner .time-today .ymd {order: 2;font-size: 1.5rem;}
.banner .time-today .week {order: 3;font-size: 1.825rem;}
.banner .xstj {position: relative; bottom: auto; left: auto; width:25%; max-width: 200px; height: auto;flex-shrink:0; background-image: url(../images/xsimg.png); background-size: contain; background-position:center bottom; background-color: #FFC70F;}
.banner .xstj span {top: 6%; right: 5%;font-size: 4rem;}
}
@media (max-width: 991px) {
.container {padding: 0;}
}
.notice .info {background-image:var(--icon-notice); background-repeat: no-repeat; background-position: 10px center; background-color: #fff222; color:#F85959; padding:8px 8px 8px 30px; display: flex;}
@media (min-width: 992px) {
.notice .info {font-size: 1.125rem;padding:12px 12px 12px 40px; background-size: 24px; text-align: center;}
}
.num-c {display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 0; padding-top: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: var(--numbg-green); font-size: 14px; font-weight: bold; position: relative;}
.num-c span {display: block; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);}
.num-1 .num-c {background-image: var(--numbg-red);}
.num-2 .num-c {background-image: var(--numbg-green);}
.num-3 .num-c {background-image: var(--numbg-blue);}
.num-n {background-image: none !important;}
.num-box {display: flex;}
.num-box .item-num {width: 16.66%; text-align: center; padding:0 5px;}
.open-prize {padding:10px;}
.open-prize .num-c {font-size: 20px;}
.open-prize .top {display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px;}
.open-prize .title {flex-shrink:1;}
.open-prize .title span {display: inline-block; margin-right: 5px;}
.open-prize .title span span {margin-left: 5px;}
.open-prize .countdown {display: inline-block; flex-shrink:0;}
.open-prize .countdown strong {font-size: 20px;}
.open-prize .bottom {display: flex; align-items: center; justify-content:center; padding-top: 10px;}
.open-prize .bottom .btnBox {width: 14%; text-align: center;}
.open-prize .cont {display: flex; justify-content: space-between;}
.open-prize .icon-add {width: 11%; display: flex; align-items: center; justify-content: center; padding: 8px;}
.open-prize .item-num {text-align: center;}
.open-prize .item-num .attr {display: block; font-size: 10px;}
.open-prize .pingma {width: 75%;}
.open-prize .tema {width: 14%; text-align: center;}
.open-prize .pingma .card-box,
.open-prize .tema {border: solid 1px #d8d8d8; background-color: #fff; border-radius: 10px; padding: 5px; text-align: center;}
.open-prize .name {padding-bottom: 10px; color: #999;}
@media (min-width: 992px) {
.open-prize {background-color: #fff; padding:15px;}
.open-prize .bottom {justify-content: space-between; }
.open-prize .next-qi {font-size: 18px;}
.open-prize .title {font-size: 18px;}
.open-prize .title strong {font-size: 24px; display: inline-block; margin-right: 5px;}
.open-prize .countdown {font-size: 18px;}
.open-prize .countdown strong {font-size: 24px;}
.open-prize .num-c {font-size: 30px;}
.open-prize .item-num .attr {font-size: 16px;}
.open-prize .pingma .card-box,
.open-prize .tema {padding: 12px;}
}
@media (max-width: 991px) {
.op-box {background-color: var(--bs-primary);}
.open-prize .top,
.open-prize .top .text-secondary,
.open-prize .bottom,
.open-prize .bottom .text-secondary {color: #fff !important;}
.open-prize .icon-add {color: #fff;}
.open-prize .name {font-size:10px;}
.open-prize .title strong {display: block;}
.open-prize .countdown strong {display: block;}
}
.open-num {display: flex;width: 100%;}
.open-num .num-box {width: 80%;}
.open-num .item-num .attr {display: block; font-size: 10px; margin-top: -5px;}
.open-num .icon-add {width: 10%; display: flex; align-items: center; justify-content: center;}
.open-num .tema {width: 10%; text-align: center;}
@media (min-width: 992px) {
.open-num .icon-add {align-items: start;}
}
@media (max-width: 991px) {
.open-num .num-c {background: none !important; font-size: 16px;}
.open-num .item-num {background:#3EB517;color: #fff; border-radius: 6px;padding: 0 5px;}
.open-num .item-num .attr {padding-bottom: 5px;margin-top: -10px;}
.open-num .num-box .item-num {width: 14.66%; margin: 0 2%;}
.open-num .num-box .num-1 {background: var(--bs-secondary);}
.open-num .num-box .num-2 {background:#3EB517;}
.open-num .num-box .num-3 {background:#1689E1;}
/*.open-num .tema .item-num {width: 14.66%; margin: 0 2%;}*/
.open-num .tema .num-1 {background: var(--bs-secondary);}
.open-num .tema .num-2 {background:#3EB517;}
.open-num .tema .num-3 {background:#1689E1;}
}
.page-nav {display: flex; background-color: #fff; padding-bottom: .5rem;}
.page-nav a {width: 100%; border-radius: 0; font-weight: 500; font-size: 18px;}
.page-nav a:first-child {margin-right: 2px;}
@media (min-width: 992px) {
.page-nav {background-color:inherit;}
.page-nav a {font-size: 24px;}
.page-nav a:first-child {margin-right: 10px;}
}
@media (max-width: 991px) {
.page-nav {background-color:#f8f9fa;}
.page-nav a {background-color: #fff ;}
}
.prize-list {background-color:#f8f9fa;}
.prize-list .list {background-color: #f8f9fa;}
@media (min-width: 992px) {
.prize-list .list {border-top:solid 1px #d8d8d8;}
}
@media (max-width: 991px) {
.prize-list .list {margin-bottom: 10px;background-color: #fff;}
.prize-list .list .term {font-size: 18px;}
.prize-list .list .win-num {border-top: solid 1px #f8f9fa; padding-top: .5rem;}
}
.historyBall-box {background-color: #fff;}
.historyBall-box .column {text-align: center; padding: 20px; font-size: 18px;}
.historyBall-list {display: flex; flex-wrap: wrap;}
.historyBall-list .list {width: 90px; height: 90px; margin: 1px; background-color: #3D3D3D; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.historyBall-list .list.color1 {background-color: #dc3545;}
.historyBall-list .list.color2 {background-color: #198754;}
.historyBall-list .list.color3 {background-color: #0dcaf0;}
.historyBall-list .list .num {font-size: 36px; line-height: 1.2; font-weight: bold;}
.historyBall-list .list .amount {font-size: 18px;}
@media (max-width: 991px) {
.historyBall-list {justify-content: center;}
}
@media (max-width: 478px) {
.historyBall-list .list {width: 24%;}
}
.breadcrumb {margin-top: 10px; font-size: 18px;}
.breadcrumb .kind {display: none;}
.breadcrumb .kind1 {display: block;}
@media (min-width: 991px) {
.breadcrumb .breadcrumb-item a {color: #d8d8d8;}
.breadcrumb .breadcrumb-item a:hover {text-decoration: underline;}
.breadcrumb .breadcrumb-item.active {color: #fff;}
}
.masterList-menu {display: flex; align-items: center; justify-content: space-between; background-color: var(--bs-primary);}
.masterList-menu a {display: block; width: 100%; border-radius: 5px; font-weight: 500; font-size: 18px; padding:10px; text-align: center; margin:10px; background-color: #fff; color: #000;}
.masterList-menu a:first-child {margin-left: 0;}
.masterList-menu a:hover,
.masterList-menu a.active {background-color: #FBD510;}
@media (max-width: 767px) {
.masterList-menu {padding: 10px 0; overflow-x: auto; background-color: var(--bs-light);}
.masterList-menu a {width: calc(50% - 10px); margin: 5px; padding: 5px 15px; text-wrap:nowrap;}
.masterList-menu a:first-child {margin-left: 5px;}
}
.masterList-box .noneDta {width: 100%; padding: 25px; text-align: center;}
.masterList-box .box .top {background-color:#FF5151; color: #fff; font-size: .875rem; padding: 15px; border-radius: 10px 10px 0 0;}
.masterList-box .box .top.minheight {min-height: 170px;}
.masterList-box .box .bottom{border-radius: 0 0 10px 10px; background-color: #fff; border-top: solid 1px #d8d8d8; padding: 15px; font-size:.875rem; color: #000; text-align: center;}
.masterList-box .box .kind {display: none;}
.masterList-box .masterList-animalList .kind1 {display: block;}
.masterList-box .masterList-masterList .top {background-color:#DFAF13;}
.masterList-box .masterList-masterList .kind2 {display: block;}
.masterList-box .masterList-redBlueList .top {background-color:#61A74B;}
.masterList-box .masterList-redBlueList .kind3 {display: block;}
.masterList-box .masterList-brotherList .top {background-color:#1689E1;}
.masterList-box .masterList-brotherList .kind4 {display: block;}
.masterList-box .box .top .title {font-size: 18px;}
.masterList-box .box .cont {background-color: #fff;}
.masterList-box .item {display: flex;}
.masterList-box .periods-list {width: 45%; display: flex; flex-direction: column;}
.masterList-box .animals-ball {width: 55%; display: flex; padding: 15px; border-right: solid 1px #d8d8d8;border-bottom: solid 1px #d8d8d8;}
.masterList-box .animals-ball .list { width: 100%; height: 33.333%; border-left: solid 1px #d8d8d8; border-right: solid 1px #d8d8d8; border-bottom: solid 1px #d8d8d8; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 15px 10px;}
.masterList-box .animals-ball .list > div {width: 50%; text-align: center;}
.masterList-box .periods-list .animals {width: 75%;}
.masterList-box .periods-list .code {width: 25%; text-align: center; word-wrap:break-word}
.masterList-box .periods-list .list { height: 33.333%; border-left: solid 1px #d8d8d8; border-right: solid 1px #d8d8d8; border-bottom: solid 1px #d8d8d8; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 15px 10px;}
.masterList-box .animals-ball .ballnos {font-weight: bold; padding-top: 15px; word-wrap:break-word;}
.masterList-box .pagination-wrap {background-color:inherit;}
.masterList-box .pagination-wrap ul {justify-content: center;}
.masterList-box .page-item .page-link {border-color: #fff;}
@media (min-width: 360px) {
.masterList-box .periods-list .animals {width: 70%;}
.masterList-box .periods-list .code {width: 30%;}
}
@media (min-width: 768px) {
.masterList-box .animals-ball {flex-wrap: nowrap; align-items: center; justify-content: space-between;}
.masterList-box .animals-ball .name {width: 30%;}
.masterList-box .animals-ball .ballnos {width: 60%; padding-top: 0;}
}
@media (max-width: 991px) {
.masterList-box {margin: 0;}
}
@media (max-width: 767px) {
.masterList-box .periods-list {width: 50%;font-size: .875rem;}
.masterList-box .animals-ball {width: 50%; flex-direction: column; justify-content: center;}
}
/* login */
.page-name {border-bottom: solid 4px #F85959; padding:1rem 0; font-size: 1.125rem; color: #fff;}
.login-card .logo {width: 240px; margin: 0 auto; padding-bottom: 40px;}
.login-card .column {text-align: center; font-size: 2rem; padding-bottom: 20px;}
@media (min-width: 992px) {
.login-card {background-color: #fff; border-radius:20px; padding:60px; width: 500px; margin:58px auto;}
}
@media (max-width: 991px) {
.login-wrap {height: 100vh; padding:0 10%; display: flex; align-items: center;}
}
.aheader {background-color: #fff; color: var(--bs-gray); display: flex; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px;}
.aheader a {color: var(--bs-gray);}
.aheader .logo {flex-shrink: 0;height: 50px;}
.aheader .logo img {max-height: 100%;}
.aheader .info {flex-shrink: 1;text-align: right; width: 100%; padding:0 5%;}
.aheader .info span {display: inline-block; padding:0 10px;}
.aheader .menu {flex-shrink: 0;}
.aheader .menu a {display: inline-block; padding: 10px;}
@media (max-width: 991px) {
.aheader .info {text-align: left; padding: 0 5px;}
.aheader .info > span {display: block;}
}
.table-list {background-color: #fff;color: var(--bs-gray);border-bottom: solid 1px var(--bs-gray-400); margin: 0;}
.table-list > div > .row > div {border-left: solid 1px var(--bs-gray-400);border-top: solid 1px var(--bs-gray-400); padding-top: 10px; padding-bottom: 10px;}
.table-list > div > .row > div:first-child {border-left: 0;}
@media (max-width: 767px) {
.mobile-body,
.mobile-table-list {margin:0 -20px 0 -20px;}
}
.amain {display: flex;}
.abody .aheader {position: relative;z-index: 2;}
.amain .side-menu ul {margin: 0; padding: 0; list-style: none;}
.amain .side-menu ul .menu-child > a {position: relative;}
.amain .side-menu ul .menu-child > a:after {display: block; content: ''; width:0; height:0; border-top: solid 6px var(--bs-gray); border-left: solid 5px transparent; border-right: solid 5px transparent; position: absolute; top: 50%; right: 0; transform:translateY(-50%); -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.amain .side-menu ul .menu-child ul {display: none;}
.amain .side-menu ul .menu-child.childActive > a + ul {display: block;}
.amain .side-menu ul .menu-child.childActive > a:after {transform: rotate(180deg); top:45%;}
.amain .main {position: relative; z-index: 1;}
.amain .container-fluid {padding-top: 20px; padding-bottom: 20px;}
.touzu-tab {background-color: #fff; margin-bottom: 10px;}
.touzu-tab .nav-link {border-radius: 0; color: #999; padding: 15px 30px;}
.touzu-tab .nav-link.active {background-color: var(--bs-yellow); color: #333;}
.pk-numBox .nav-tabs .nav-link {width: 50%; border-radius: 0; color: var(--bs-gray); padding: 1rem;}
.pk-numBox .nav-tabs .nav-link.active {color: var(--bs-primary);}
.pk-numBox .title {display: block; padding:5px 15px; margin: 0; background-color: #fff; font-size: 1rem; cursor: pointer; position: relative; z-index: 2;}
.pk-numBox .title[data-bs-toggle="collapse"]:after {display: block; content: ''; width:0; height:0; border-top: solid 8px #000; border-left: solid 6px transparent; border-right: solid 6px transparent; position: absolute; top: 50%; right: 15px; transform:translateY(-50%); -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.pk-numBox .title.active:after,
.pk-numBox .title[aria-expanded='false']:after {transform: rotate(180deg); top:35%;}
.pk-numBox .cont {padding:10px 15px;}
.pk-numBox .item {margin-bottom: 10px;}
.pk-numBox .other {margin-top: -20px;}
.pk-numBox .other .total {padding:0 0 15px 0; font-size: 1.125rem;}
.current-period .column {padding:15px 10px; text-align: center; font-size: 1.25rem; margin-bottom: 10px; background-color: #fff;}
.current-period .item {margin-bottom: 10px; font-size: .875rem;}
.current-period .order-id {padding: 12px; background-color: #fff;}
.current-period .order-list {color: var(--bs-gray);}
.current-period .order-list .list {background-color: #fff; margin: 0 0 10px;}
.current-period .order-list .list > div > .row > div {border-left: solid 1px var(--bs-gray);border-top: solid 1px var(--bs-gray); padding-top: 5px; padding-bottom: 5px;}
.current-period .order-list > .list > div > .row > div:first-child {border-left: 0;}
.tema-form .list {width: 150px; flex-basis:150px; flex-grow:0; display: flex; padding-top:5px; padding-bottom: 5px; margin: 1px; background-color: #fff;}
.tema-form .list.active {background-color: rgba(var(--bs-primary-rgb), .1);}
.tema-form .list .num {flex-shrink: 0; width: 34px; height: 34px; line-height: 34px; text-align: center; background-color: #3D3D3D; color: #fff;}
.tema-form .list .odds {flex-shrink: 0;width: 34px; height: 34px; line-height: 34px; text-align: center; color: var(--bs-danger);}
.tema-form-check .list {cursor: pointer;}
.tema-form-check .list:hover {background-color: rgba(var(--bs-primary-rgb), .1);}
.tema-form-check .list .input {width: 100%; height: 34px; display: flex; align-items: center; justify-content: center;}
.tema-form-check .list .input .form-check-input {width: 26px; height: 26px; margin-top: 0;}
.selectBox .xzpri {padding:5px 10px;}
.selectBox .xzpri .form-control {padding:.25rem .5rem;}
.selectBox .slist {list-style: none; margin: 0; padding:1px; display: flex; flex-wrap: wrap;}
.selectBox .slist a {display: block; width: 33.333%; text-align: center; background-color: #fff; border: solid 2px var(--bs-light); border-bottom: 0; height:32px; line-height: 32px; font-size: 14px;}
.selectBox .slist a:hover,
.selectBox .slist a.active {background-color: rgba(var(--bs-primary-rgb), .1); position: relative;}
.selectBox .slist a.bg-danger.active:after,
.selectBox .slist a.bg-info.active:after,
.selectBox .slist a.bg-success.active:after {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: solid 4px var(--bs-primary);}
.selectBox .selectCheck {position: relative; z-index: 1;}
.selectBox-btn {position: sticky; top: 5px; margin: 10px 10px 0 10px;}
.selectBox-btn .name {background-color: var(--bs-primary); color: #fff; padding:10px 15px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2;}
.selectBox-btn .name:after {display: block; content: ''; width: 26px; height: 26px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: var(--listSelect);}
.selectBox-btn .btnBox {padding: 15px;display: flex; justify-content: space-between;}
.selectBox-btn .btnBox .btn {width: 48%;}
.selectBox1-btn { margin: 10px -1.25rem; background-color:#fff;}
.selectBox1-btn .name {padding:10px 15px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2;}
.selectBox1-btn .btnBox {padding: 15px; justify-content: space-between;}
.selectBox1-btn .xzpri {padding: 0px 15px;}
@media (min-width: 768px) {
.tema-form .list .input .form-control {padding:.15rem .25rem;}
}
@media (min-width: 992px) {
.abody {display: flex; flex-direction: column;}
.abody .aheader {flex-shrink:0;}
.amain .side-menu {background-color: #fff; width: 30%; max-width: 180px; border-top: solid 1px var(--bs-gray-400); padding: 15px;}
.amain .side-menu ul li a {display: flex; align-items: center; padding: 10px 0;}
.amain .side-menu ul li a i {margin-right: 10px;}
.amain .side-menu ul li a:hover,
.amain .side-menu ul li a.active {color: var(--bs-cyan);}
.amain .side-menu ul li a:hover .icon-pankou,
.amain .side-menu ul li a.active .icon-pankou {background-image: var(--icon-pankou-h);}
.amain .side-menu ul li a:hover .icon-record,
.amain .side-menu ul li a.active .icon-record {background-image: var(--icon-record-h);}
.amain .side-menu ul li a:hover .icon-email,
.amain .side-menu ul li a.active .icon-email {background-image: var(--icon-email-h);}
.amain .side-menu ul .menu-child ul {margin-left: 40px;}
.abody .amain {flex-shrink: 1; min-height: 100vh;}
.pk-numBox .cont {background-color: var(--bs-light);}
.pk-numBox .other {padding:20px 15px; text-align: right;background-color: var(--bs-light);}
.pk-numBox .other .btn-box {display: flex; align-items: center; justify-content: end;}
.pk-numBox .other .btn-box .input-box {padding: 1px;}
.pk-numBox .other .btn-box a.btn {margin-left:10px; padding:.5rem 1.25rem;}
.tema-form .list {width: 145px; flex-basis:145px; font-size: 14px;}
.acontent-row .current-period {margin-top: 30px;}
.selectBox {display: flex; position: relative;}
.selectBox .selectOperatewrap {position: sticky; top: 0;}
.selectBox .selectOperate {order:2; flex-shrink: 0; width: 160px; margin-left: 10px; background-color: var(--bs-light);}
.selectBox .selectCheck {order:1; width: 100%; flex-shrink: 1;}
.selectBox-btn {display: none;}
.selectBox1-btn {margin: 10px 0; }
.selectBox .slist a {width:50%;}
.selectBox .slist a.col3 {width:33.3333%;}
}
@media (min-width: 1250px) {
.acontent-row {display: flex; align-items: start;}
.acontent-row .pk-numBox {width: 100%; flex-shrink: 1;}
.tema-form .list {width: 148px; flex-basis:148px;}
.tema-form.temaList .list {width: 145px; flex-basis:145px;}
.acontent-row .current-period {width:25%; flex-shrink: 0; margin-top: 0; padding-left: 20px; padding-right: 5px; overflow-y: auto; position: relative;}
.acontent-row .current-period .column {position: sticky; top: 0; border-bottom: solid 1px var(--bs-primary);}
}
@media (min-width: 1300px) {
.tema-form .list {width: 142px; flex-basis:142px;}
.tema-form.temaList .list {width: 138px; flex-basis:138px;}
.acontent-row .current-period {width: 22%;}
}
@media (min-width: 1400px) {
.tema-form .list {width: 140px; flex-basis:140px;}
.tema-form.temaList .list {width: 136px; flex-basis:136px;}
.acontent-row .current-period {width: 28%;}
}
@media (min-width: 1620px) {
.tema-form .list {width: 158px; flex-basis:158px;padding-top:10px; padding-bottom: 10px;}
.tema-form .list .num {height: 34px; line-height: 34px;}
.tema-form .list .odds {height: 34px; line-height: 34px;}
.tema-form .list .input .form-control {padding:.25rem;}
.tema-form.temaList .list {width: 152px; flex-basis:152px;}
.selectBox .selectOperate {width: 190px;}
.amain .side-menu {max-width: 200px; padding: 20px;}
.acontent-row .current-period {width: 20%;}
}
@media (min-width: 1890px) {
.tema-form .list {width: 140px; flex-basis:140px;}
.tema-form.temaList .list {width: 145px; flex-basis:145px;}
.selectBox .selectOperate {width: 200px;}
.acontent-row .current-period {width: 22%;}
}
@media (min-width: 2500px) {
.pk-numBox .title {padding: 10px 15px;}
.acontent-row .current-period {width: 30%;}
.selectBox .selectOperate {width: 260px;}
.tema-form .list {width: 175px; flex-basis:175px;}
.tema-form.temaList .list {width: 185px; flex-basis:185px;}
.tema-form .list .num {width: 42px; height: 42px; line-height: 42px; font-size: 18px;}
.tema-form .list .odds {width: 42px; height: 42px; line-height: 42px; font-size: 16px;}
.selectBox .slist a {height: 38px; line-height:38px;}
}
@media (max-width: 991px) {
.amain {position: relative; z-index: 1;}
.amain .side-menu {position: absolute; z-index: 2; top: -1000px; left: 0; width: 100%; background-color: var(--bs-primary); -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.amain .side-menu.active {top: 0;}
.amain .side-menu ul li a {display: block; padding: 15px; border-bottom: solid 1px var(--bs-light); font-size: 18px;}
.amain .side-menu ul li a i {display: none;}
.amain .side-menu a {color: #fff;}
.amain .side-menu ul .menu-child > a:after {right: 15px; border-top: solid 6px #fff;}
.amain .side-menu ul .menu-child ul li {background-color: var(--bs-cyan);}
.touzu-tab {margin: 0 -1.25rem;}
.pk-numBox .title {font-size: 1.125rem;}
.pk-numBox .other {position: fixed; z-index: 100; left: 0; bottom: 0; width: 100%; background-color: #fff; display: flex;}
.pk-numBox .other .total {width: 100%; flex-shrink: 1; padding: 15px;}
.pk-numBox .other .btn-box {display: flex; min-width: 160px; max-width: 60%; flex-shrink: 0;}
.pk-numBox .other .btn-box .input-box {display: flex; align-items: center; flex-shrink: 1; padding:5px; width:100%;}
.pk-numBox .other .btn-box .input-box .form-control {width:100%; height: 100%; border-radius: 0;}
.pk-numBox .other .btn-box a.btn {border-radius: 0; flex-basis:50%; width: 60px; display: flex; align-items: center; text-align: center; justify-content: center;}
.acontent-row {margin-left:-1.25rem;margin-right:-1.25rem; border-top: solid 10px var(--bs-yellow); padding-bottom: 60px;}
.acontent-row .current-period {display: none;}
.selectBox .slist a {width:25%;}
.selectOperate {display: none;}
.selectBox-btn .qzSelect {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s; position: absolute; top: -100vh; left: 0; z-index: 1; opacity: 0; box-shadow: 0 50px 100px rgba(0, 0, 0, .5); width: 100%; display: none;}
.selectBox-btn.active .qzSelect {display: block; opacity: 1; top: 100%; background-color: var(--bs-light);}
.selectBox1-btn {border-top: solid 10px var(--bs-yellow);}
.selectBox1-btn .qzSelect {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s; box-shadow: 0 50px 100px rgba(0, 0, 0, .5); width: 100%;}
.selectBox1-btn.active .qzSelect {display: block; opacity: 1; top: 100%; background-color: var(--bs-light);}
}
@media (max-width: 767px) {
.touzu-tab {flex-wrap:nowrap}
.touzu-tab .nav-item {width: 100%;}
.touzu-tab .nav-link {padding: 10px 0; width: 100%;}
.tema-form .list {width: 49%; flex-basis:49%;}
.tema-form .list .num {width: 42px; height: 42px; line-height: 42px; font-size: 16px;}
.tema-form .list .odds {width: 42px; height: 42px; line-height: 42px; font-size: 16px;}
.selectBox .slist a {height: 42px; line-height:42px;}
}
.login-form {padding: 20px 0;}
.search-box {white-space: nowrap; display: flex; align-items: center;}
.search-box .cont {margin-left: 10px; display: flex; align-items: center;}
.search-box .itemInput {padding:5px;}
.search-box .itemInput .form-control {padding: .5rem;}
.search-box .itemInput .form-control,
.search-box .itemInput .form-select,
.search-box .itemInput .btn {font-size: .875rem;}
.search-box .btnBox .btn-closeSearch {display: none;}
@media (max-width: 767px) {
.card-header:first-child {margin: 0 -20px 0 -20px;}
.search-box {padding: 10px; background-color: #fff; justify-content: end; position: relative;}
.search-box-m {padding: 10px; background-color: #fff;position: relative;}
.search-box-m .name {cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: end;}
.search-box-m .name:before {display: inline-block; content: ''; width: 16px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: var(--search); margin-right: 10px;}
.search-box-m .cont {display: none; position: absolute; z-index: 2; width: 100%; top: 100%; right: 0; background-color: #fff; padding: 15px; box-shadow: 0 10px 10px rgba(0, 0, 0, .3); border-top: solid 1px rgba(0, 0, 0, .2);}
.search-box-m .cont .btn {display: block; width: 100%;}
.search-box-m.active .cont {display: block;}
.search-box-m .btnBox {display: flex; align-items: center;}
.search-box-m .btnBox .btn {margin-left: 10px;}
.search-box-m .btnBox .btn:first-child {margin-left: 0;}
.search-box-m .btnBox .btn-closeSearch {display: block;}
}
.page-column {background-color: var(--bs-primary); color: #fff; padding: 20px; margin: -20px -20px 0 -20px; text-align: center; font-size: 1.5rem;}
@media (min-width: 992px) {
.page-column {display: none;}
}
@media (min-width: 768px) {
.page-column {margin-bottom: 20px;}
}
.tableBox-header {background-color: #fff;}
.tableBox-header .totalData-box {display: flex; align-items: center; justify-content: start;}
.tableBox-header .totalData-box .item {display: flex; align-items: stretch; border-radius: 5px; border: solid 1px #ddd; margin: 8px; width: 100%;font-size: 14px;}
.tableBox-header .totalData-box .item .name {padding: 8px; background-color: #f0f0f0;border-right: solid 1px #ddd; display: flex; align-items: center; justify-content: center;}
.tableBox-header .totalData-box .item .info {padding: 8px;}
.tableBox-header .totalData-box .item .info .num {font-weight: bold;font-size: 16px;}
@media (min-width: 768px) {
.tableBox-header {display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.tableBox-header .title {order:1;}
.tableBox-header .search-box {order:2;}
.tableBox-header .totalData-box {order:3; width: 100%;flex-shrink:0;margin: 0 -8px;}
.tableBox-header .totalData-box .item {text-align: center; width: auto;}
}
@media (max-width: 767px) {
.tableBox-header .totalData-box {border-bottom: solid 1px #ddd; padding: 10px 0;}
.tableBox-header .totalData-box .item {flex-direction: column; text-align: center;}
.tableBox-header .totalData-box .item .name,
.tableBox-header .totalData-box .item .name {width: 100%;}
}
#zhibo-player .full-switch {display: none;}
.pagination-wrap {padding: 1rem; margin: 0 -20px; background-color: #fff;}
.pagination-wrap ul {margin-bottom: 0; justify-content: end;}
@media (min-width: 768px) {
.pagination-wrap {margin: 0;}
}
.jmodal {position: fixed; z-index: -1; top: 0; left: 0; width:100%; height: 100%; background-color: rgba(0, 0, 0, .8); opacity: 0; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.jmodal.show {z-index: 1000; opacity: 1;}
.jmodal .jmodal-dialog {width: 100%; display: flex; align-items: center;}
.jmodal .jmodal-content {display: flex; flex-direction: column; width: 100%; height: 100%; background-color: #fff; -webkit-transition: all .3s;-moz-transition: all .3s;transition: all .3s;}
.jmodal .jmodal-header {padding: 1rem; text-align: center; background-color: var(--bs-primary); color: #fff; position: relative;}
.jmodal .jmodal-header .btn-close {position: absolute; top: 50%; right: 15px; transform:translateY(-50%);}
.jmodal .jmodal-footer .total {font-size: 1.125rem;}
.jmodal .jmodal-footer .btn-box {display: flex;}
.jmodal .jmodal-footer .btn-box .btn {padding: 1rem; width: 100%; border-radius: 0;}
@media (min-width: 992px) {
.jmodal .jmodal-dialog {margin:.5rem auto; width: 500px; min-height: calc(100% - 1rem);}
.jmodal .jmodal-content {margin-top: -250px; background-color: #fff; border-radius: 1rem; overflow: hidden; opacity: 0;}
.jmodal .jmodal-content .jmodal-body {max-height: 50vh; overflow-y: auto; }
.jmodal.show .jmodal-content {margin-top: 0; opacity: 1;}
.jmodal .jmodal-footer .total {padding: 1rem; text-align: center; font-size: 1.125rem;}
.jmodal .jmodal-footer .btn-box {border-top: solid 1px var(--bs-gray-400)}
.jmodal .jmodal-footer .btn-box .btn {color: #000; background-color: #fff; border: 0; border-left: solid 1px var(--bs-gray-400);}
.jmodal .jmodal-footer .btn-box .btn:hover {background-color: var(--bs-light);}
}
@media (max-width: 991px) {
.jmodal {top: -100%;}
.jmodal.show {top: 0;}
.jmodal .jmodal-dialog,
.jmodal .jmodal-content {height: 100%;}
.jmodal .jmodal-content .jmodal-header {flex-shrink: 0; font-size: 1.5rem;}
.jmodal .jmodal-content .jmodal-body {flex-shrink: 1;height: 100%; overflow-y: auto; background-color: var(--bs-light);}
.jmodal .jmodal-content .jmodal-footer {flex-shrink: 0; display: flex;}
.jmodal .jmodal-footer .total {width: 100%; flex-shrink: 1; padding: 15px;}
.jmodal .jmodal-footer .btn-box {width: 100%;}
.jmodal .jmodal-footer .total + .btn-box {flex-shrink: 0; width: 160px;}
}