:root {
    --black--color: #000;
    --white--color: #fff;
    --dark-gray-color: #e4e4e4;
    --low-gray-color: rgb(243, 243, 243);
    --dark-blue-color: rgb(37, 83, 168);
    /* --blue--color: #558ce4; */
    --blue--color: #117BBB;
    --red--color: rgb(255, 81, 81);
    --green-color: green;
}

.div_center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    position: relative;
    margin-bottom: 5rem;
}

/* .div_center::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 99%;
    top: 4rem;
    box-shadow: 0 8px 10px #979595;
    z-index: -10;
} */

.NBA_box {
    width: 70%;
}

@media screen and (max-width:1024px) {
    .div_center::after {
        width: 88%;
        top: 3rem;
    }

    .NBA_box {
        width: 80%;
    }
}

@media screen and (max-width:768px) {
    .div_center::after {
        top: 2.6rem;
    }
}
@media screen and (max-width:425px) {
    .div_center::after {
        top: 2rem;
        width: 90%;
        box-shadow: 0 8px 4px #979595;
    }
}


.margin-top {
    margin-top: 3rem;
}

.margin_bottom {
    margin-bottom: 2rem;
}

.switchBtns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    column-gap: 3px;
}

.switchBtns>div {
    width: 100%;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.switchBtns>div input[type='radio'] {
    display: none;
}

.switchBtns>div input:checked+label {
    background-color: var(--blue--color);
    color: #fff;
    /* border-bottom: var(--blue--color) 10px solid; */
}

.switchBtns>div label {
    font-size: 20px;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 4rem;
    margin: 0;
    letter-spacing: .1rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-in-out;
    white-space: nowrap;
    /* border-radius: .6rem .6rem 0 0; */
    position: relative;
    border:var(--dark-gray-color) 2px solid;

}

@media screen and (max-width:1024px) {
    .switchBtns>div label {
        height: 3rem;
    }
}
@media screen and (max-width:768px) {
    .switchBtns>div label {
        height: 2.6rem;
    }
    /* .switchBtns>div input:checked+label {
        border-bottom: var(--blue--color) 3px solid;
    } */
}
@media screen and (max-width:425px) {
    .switchBtns>div label {
        height: 2rem;
    }
}


.switchBtns>div label:hover {
    /* border: var(--blue--color) 3px solid; */
    background-color: var(--dark-gray-color);
    /* color: var(--white--color); */
}

@media screen and (max-width:768px) {
    .switchBtns>div label {
        font-size: 16px;
    }
}

@media screen and (max-width:425px) {
    .switchBtns>div label {
        font-size: 14px;
    }
}


@media screen and (max-width:1024px) {
    .switchBtns>div label::after {
        bottom: -5px;
    }
}

@media screen and (max-width:768px) {
    .switchBtns>div label::after {
        width: 100%;
        left: 0;
        transform: translateX(0);
        bottom: -10px;
    }
}

.switchBtns>div input:checked+label::after {
    opacity: 1;
}

#Record_page {
    display: none;
}


.selectBox {
    margin: 3rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    white-space: nowrap;
    line-height: 2rem;
}



.selectBox select {
    color: var(--black--color);
    font-size: 16px;
    border: var(--black--color) 1px solid;
    border-radius: .3rem;
    padding: .2rem;
}

.selectBox select>option {
    font-size: 14px;
    color: var(--black--color);
}

.selectBox div label {
    margin-right: 1rem;
}

.selectBox div label h4 {
    font-size: 16px;
    font-weight: 600;
}



@media screen and (max-width:1024px) {
    .selectBox {
        gap: 1rem;
    }

    .selectBox div label {
        margin-right: .5rem;
    }

    .selectBox select {
        font-size: 14px;
    }
}

@media screen and (max-width:768px) {
    .selectBox {
        grid-template-columns: 1fr;
        text-align: start;
    }

    .selectBox div label {
        margin-right: .5rem;
    }

    .selectBox select {
        font-size: 14px;
    }
}

@media screen and (max-width:425px) {
    .selectBox {
        white-space: wrap;
        text-align: start;
    }

    .selectBox div label h4 {
        font-size: 14px;
    }

    .selectBox select {
        font-size: 11px;
    }

    .selectBox select>option {
        font-size: 12px;
    }
}


.table_box {
    width: 100%;
    overflow: auto;
    /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important; */
}


.table_box h2 {
    margin-bottom: 1rem;
    font-size: 22px;
    font-weight: 600;
}

@media screen and (max-width:768px) {
    .table_box h2 {
        font-size: 16px;
    }
}

.table_box table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    box-shadow: 0 0 9px 4px rgba(0, 0, 0, 0.04);
}

.table_box table tbody,
.table_box table thead {
    text-align: center;
}

.table_box table thead tr,
.table_box table tbody tr {
    border: 1px solid rgb(180, 180, 180);
}

.table_box table thead tr th,
.table_box table tbody tr td {
    padding: .5rem .2rem;
    font-size: 15px;
    border-right: 1px solid rgb(180, 180, 180);
    line-height: 1.5rem;
    vertical-align: middle;
    /* max-width: 1rem; */
    white-space: nowrap;
}


@media screen and (max-width:1024px) {

    .table_box table thead tr th,
    .table_box table tbody tr td {
        font-size: 14px;
    }
}

@media screen and (max-width:768px) {

    .table_box table thead tr th,
    .table_box table tbody tr td {
        padding: .3rem .1rem;
        font-size: 12px;
    }
}

.table_box table thead tr th {
    background: var(--dark-blue-color);
    color: var(--white--color);
}

#Record_page .table_box table tbody tr:nth-child(6) td {
    border-bottom: 2px var(--blue--color) solid;
}

#Record_page .table_box table tbody tr:nth-child(10) td {
    border-bottom: 2px var(--blue--color) dotted;
}

/* 動畫效果 */
.fade-out {
    animation: fadeAnimation 3s;
    /* 這裡的1s是動畫的時間，請根據實際需要調整 */
}

@keyframes fadeAnimation {
    0% {
        opacity: 1;
    }

    30%,
    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (max-width:1024px) {
    .illustrate h5 {
        font-size: 16px;
    }

    .illustrate p {
        font-size: 14px;
    }
}

@media screen and (max-width:425px) {
    .illustrate h5 {
        font-size: 14px;
    }

    .illustrate p {
        font-size: 12px;
    }
}

.ten_box table tbody tr:nth-of-type(even) {
    background-color: var(--low-gray-color);
}

.ten_box table tbody tr:last-child,
.ten_box table tbody tr:nth-last-child(2) {
    background-color: var(--dark-gray-color);
}

.ten_box table tbody tr:not(:last-child):not(:nth-last-child(2)) td:nth-child(2) {
    position: relative;
    max-width: 200px;
    min-width: 120px;
}

.ten_box table tbody tr:not(:last-child):not(:nth-last-child(2)) td:nth-child(2) .teamScoreBox {
    width: fit-content;
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    align-items: self-start;
    margin: auto auto;
}

.ten_box table tbody tr:not(:last-child):not(:nth-last-child(2)) td:nth-child(2) .teamScoreBox .teamScore {

    display: flex;
    justify-content: start;
}

.ten_box table tbody tr:not(:last-child):not(:nth-last-child(2)) td:nth-child(2) .teamScoreBox .teamScore .Score {
    width: 30px;
    overflow: hidden;
    margin-right: .5rem;
}

span.span_blue {
    letter-spacing: .1rem;
    color: var(--dark-blue-color);
}

span.span_dark_gray {
    color: rgb(110, 110, 110);
}

span.span_gray {
    color: rgb(133, 133, 133);
}

span.span_green {
    color: var(--green-color);
}

span.span_weight {
    font-weight: 600;
}

span.number {
    color: var(--red--color);
    font-weight: 600;
}

span.red {
    color: var(--red--color);
}

span.letter {
    letter-spacing: .1rem;
}

.lastTableBg table tbody tr:nth-child(3),
.lastTableBg table tbody tr:nth-child(4) {
    background-color: var(--low-gray-color);
}



/* 從六合彩移植過來的CSS */
.SixLottery_box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    /* margin-bottom: 2rem;
    margin-top: 2rem; */
}

/* 樂透開獎的搜尋div */
.SixLottery_select {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 2rem;
}

@media screen and (max-width: 500px) {
    .SixLottery_select {
        width: 80%;
    }
}

.SixLottery_select>h2 {
    font-size: 22px;
    font-weight: 600;
    color: red;
    letter-spacing: 0.1rem;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .SixLottery_select>h2 {
        font-size: 20px;
    }
}

@media screen and (max-width: 390px) {
    .SixLottery_select>h2 {
        font-size: 16px;
    }
}

.SixLottery_select_input {
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 3fr 1fr;
    align-items: center;
    justify-content: center;
    letter-spacing: .1rem;
    gap: 1rem;
}

@media screen and (max-width: 1580px) {
    .SixLottery_select_input {
        width: 100%;
    }
}

@media screen and (max-width: 1300px) {
    .SixLottery_select_input {
        grid-template-columns: 1fr 1fr 2fr;
    }
}

@media screen and (max-width: 1125px) {
    .SixLottery_select_input {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 600px) {
    .SixLottery_select_input {
        grid-template-columns: 1fr;
    }
}

.SixLottery_select_input label {
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .SixLottery_select_input label {
        font-size: 14px;
    }
}

.SixLottery_select_input label select {
    outline: gray 1px solid;
    border-radius: 4px;
    letter-spacing: .2rem;
    padding: 2px 10px;
}

.SixLottery_select_input label input[type="number"] {
    outline: gray 1px solid;
    border-radius: 4px;
    width: 110px;
    padding: 2px 10px;
}

.SixLottery_select_input label input[type=number]::-webkit-outer-spin-button,
.SixLottery_select_input label input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.SixLottery_select_input label input[type="number"]::placeholder {
    letter-spacing: .1rem;
}

.SixLottery_select_input>button {
    width: 100px;
    position: relative;
    padding: 8px 16px;
    border-radius: 7px;
    border: 1px solid rgb(61, 106, 255);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    background: transparent;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    background-color: rgb(61, 106, 255);
    letter-spacing: .2rem;
    white-space: nowrap;
}



.SixLottery_select_input>button:hover {
    background: rgb(61, 106, 255);
    box-shadow: 0 0 30px 5px rgba(140, 209, 255, 0.6);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.SixLottery_select_input>button:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}

.SixLottery_select_input>button::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
}

@keyframes sh02 {
    from {
        opacity: 0;
        left: 0%;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
        left: 100%;
    }
}

.SixLottery_select_input>button:active {
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: box-shadow 0.2s ease-in;
    -moz-transition: box-shadow 0.2s ease-in;
    transition: box-shadow 0.2s ease-in;
}


.SixLottery_table {
    width: 70%;
    margin-bottom: 2px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 2rem;
    box-shadow: 0 0 9px 4px rgba(0, 0, 0, 0.04);
}




@media screen and (max-width: 500px) {
    .SixLottery_table {
        width: 80%;
    }
}

.SixLottery_table h2 {
    font-size: 22px;
    font-weight: 600;
}

@media screen and (max-width: 500px) {
    .SixLottery_table h2 {
        font-size: 18px;
    }
}


.SixLottery_table table {
    width: 100%;
    border-collapse: collapse;
}

@media screen and (max-width: 560px) {
    .SixLottery_table table {
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
    }

}

.SixLottery_table table thead,
.SixLottery_table table tbody {
    text-align: center;
    width: 100%;
}

.SixLottery_table table thead tr th:nth-child(1) {
    width: 25%;
}

.SixLottery_table table thead tr th:nth-child(2) {
    width: 25%;
}

.SixLottery_table table thead tr th:nth-child(3) {
    width: 50%;
}

.SixLottery_table table thead tr th,
.SixLottery_table table tbody tr td {
    padding: 10px;
    border: 1px solid #e6e6e6;
}

@media screen and (max-width: 768px) {

    .SixLottery_table table thead tr th,
    .SixLottery_table table tbody tr td {
        font-size: 14px;
        padding: 7px;
    }
}

@media screen and (max-width: 390px) {

    .SixLottery_table table thead tr th,
    .SixLottery_table table tbody tr td {
        font-size: 12px;
    }
}

.SixLottery_table table tbody tr:nth-child(odd) {
    background-color: #f3f7fb;
}

.SixLottery_table table tbody tr td ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.SixLottery_table table tbody tr td ul li div {
    width: 30px;
    height: 30px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #e6e6e6;
}

@media screen and (max-width: 768px) {

    .SixLottery_table table tbody tr td ul li div {
        width: 25px;
        height: 25px;
    }
}

.SixLottery_table table tbody tr td ul li .bg_yellow {
    background-color: #fb960e;
    color: #fff;
    border: 0;
}


.showMore {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 9px 4px rgba(0, 0, 0, 0.04);
    padding: 12px 0;
    letter-spacing: .1rem;
    font-size: 16px;
    transition: 0.5s;
}

@media screen and (max-width: 768px) {

    .showMore {
        font-size: 14px;
    }
}

.showMore:hover {
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.15);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    animation: fadeIn 0.5s ease-in-out;
}



/* 冷熱門球號 */
.SixLottery_hotBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    /* margin: 2rem 0; */
    margin-top: 3rem;
}

.SixLottery_hotTable {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 2rem;
}

@media screen and (max-width: 500px) {
    .SixLottery_hotTable {
        width: 80%;
    }
}

.SixLottery_hotTable>div {
    display: flex;
    gap: 2rem;
}

.SixLottery_hotTable>div>h2,.SixLottery_hotTable>div>h1 {
    font-size: 22px;
    font-weight: 600;
    color: red;
    letter-spacing: 0.1rem;
    white-space: nowrap;
}

.SixLottery_hotTable select {
    outline: gray 1px solid;
}

@media screen and (max-width: 768px) {
    .SixLottery_hotTable>div>h2,.SixLottery_hotTable>div>h1 {
        font-size: 20px;
    }

    .SixLottery_hotTable select {
        font-size: 16px;
    }
}

@media screen and (max-width: 390px) {
    .SixLottery_hotTable>div>h2,.SixLottery_hotTable>div>h1 {
        font-size: 16px;
    }

    .SixLottery_hotTable select {
        font-size: 14px;
    }
}


.SixLottery_hotTable>div~table {
    width: 100%;
    margin-bottom: 2px;
    gap: 1rem;
    padding: 2rem 2rem;
    box-shadow: 0 0 9px 4px rgba(0, 0, 0, 0.04);
}

.SixLottery_hotTable>div~table thead,
.SixLottery_hotTable>div~table tbody {
    width: 100%;
    text-align: center;
}

.SixLottery_hotTable>div~table thead tr th,
.SixLottery_hotTable>div~table tbody tr td {
    padding: 10px;
    border: 1px solid #e6e6e6;
}

.SixLottery_hotTable>div~table thead tr th {
    background-color: rgba(251, 148, 14, 0.8);
    color: #fff;
}

@media screen and (max-width: 500px) {

    .SixLottery_hotTable>div~table thead tr th,
    .SixLottery_hotTable>div~table tbody tr td {
        font-size: 12px;
        padding: 5px;
    }

    .SixLottery_hotTable>div~table thead tr th span {
        display: none;
    }
}

.SixLottery_hotTable>div~table tbody tr td:nth-child(odd) {
    background-color: rgb(238, 238, 238);
    color: black;
}

.fire-cell {
    /* background-color: rgb(189, 154, 109);
    color: white; */
}

.fire-cell::after {
    content: '🔥';
    position: absolute;
    margin-left: 5px;
}

/* 定義 fade-out class */
.fade-out {
    animation: fadeEffect 2s;
}

@keyframes fadeEffect {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



/* 樂透怎麼玩 */
.SixLottery_textBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.blue_text {
    color: #004D9A;
    font-weight: 600;
}

.red_text {
    color: #e94427;
    font-weight: 600;
}

.margin-top {
    margin-top: 2rem;
}

.SixLottery_text {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 2rem;
}

@media screen and (max-width: 1024px) {
    .SixLottery_text {
        width: 80%;
    }
}

.SixLottery_text>h2 {
    font-size: 22px;
    font-weight: 600;
    color: red;
    letter-spacing: 0.1rem;
    white-space: nowrap;
}

.SixLottery_text>h2 {
    font-size: 22px;
    font-weight: 600;
    color: red;
    letter-spacing: 0.1rem;
}

.SixLottery_text>h3 {
    font-size: 18px;
    font-weight: 600;
    color: #004D9A;
    letter-spacing: 0.1rem;
}

@media screen and (max-width: 768px) {
    .SixLottery_text>h2 {
        font-size: 20px;
    }

    .SixLottery_text>h3 {
        font-size: 16px;
    }
}

@media screen and (max-width: 390px) {
    .SixLottery_text>h2 {
        font-size: 16px;
    }

    .SixLottery_text>h3 {
        font-size: 13px;
    }
}

.SixLottery_text p,
.SixLottery_text span,
.SixLottery_text ul li {
    line-height: 1.5;
    letter-spacing: .1rem;
    margin: 0;
}

@media screen and (max-width: 768px) {

    .SixLottery_text p,
    .SixLottery_text span,
    .SixLottery_text ul li {
        font-size: 14px;
    }
}

@media screen and (max-width: 390px) {

    .SixLottery_text p,
    .SixLottery_text span,
    .SixLottery_text ul li {
        font-size: 12px;
    }
}

.SixLottery_text div {
    width: 100%;
    overflow: auto;
}

.SixLottery_text table {
    width: 100%;
    margin-bottom: 2px;
    gap: 1rem;
    padding: 2rem 2rem;
    box-shadow: 0 0 9px 4px rgba(0, 0, 0, 0.04);
}

.SixLottery_text table thead,
.SixLottery_text table tbody {
    width: 100%;
    text-align: center;
}

.SixLottery_text table thead tr th,
.SixLottery_text table tbody tr td {
    padding: 10px;
    border: 1px solid #e6e6e6;
    white-space: nowrap;
    font-size: 16px;
}

.SixLottery_text table thead tr th {
    background-color: rgba(251, 148, 14, 0.8);
    color: #fff;
}

.SixLottery_text:nth-child(2) table thead tr th {
    background-color: rgba(3, 145, 45, 0.8);
    color: #fff;
}

.SixLottery_text:nth-child(3) table thead tr th {
    background-color: rgba(14, 77, 251, 0.8);
    color: #fff;
}

@media screen and (max-width: 800px) {

    .SixLottery_text table thead tr th,
    .SixLottery_text table tbody tr td {
        font-size: 14px;
        padding: 5px;
    }
}

@media screen and (max-width: 500px) {

    .SixLottery_text table thead tr th,
    .SixLottery_text table tbody tr td {
        font-size: 11px;
        padding: 5px;
    }
}

.SixLottery_text table tbody tr:nth-child(even) {
    background-color: rgb(238, 238, 238);
}

.SixLottery_Tips {
    width: 100%;
    border: 1px solid #fb960e;
    padding: 10px;
}

.SixLottery_numberTable tbody tr td div {
    display: flex;
    justify-content: center;
    align-items: center;

}

.SixLottery_numberTable thead th{
    background-color: rgb(243, 247, 251) !important;
    color: #000000 !important;
}
.SixLottery_numberTable tbody tr td div p {
    width: 30px;
    height: 30px;
    background-color: rgba(3, 145, 45, 0.8);
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #e6e6e6;
    color: #000000;
    /* font-weight: 600; */
    font-size: 14px;
}
#SixLottery_numberTable2 tbody tr td div p{
    background-color: #fb960e;
    color: #fff;
    border: none;
}
@media screen and (max-width: 768px) {

    .SixLottery_numberTable tbody tr td div p {
        width: 25px;
        height: 25px;
        font-size: 10px;
    }
}

.SixLottery_numberTable tbody tr td div p .bg_yellow {
    background-color: #fb960e;
    color: #fff;
    border: 0;
}