body, html {
    margin: 0;
    padding: 0;
    font-family: Microsoft JhengHei;
    word-break: break-all;
}

:root {
    --border: #75f9fd solid .15rem;
    --brown: #471f05;
    --blue: #010125;
}

#slot1, #slot2 {
    width: calc(100vw - 6px);
    height: calc(100vh - 6px);
    margin: 0;
    /* background: rgb(81, 34, 6); */
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(81, 34, 6) 3px solid;
}

#slot1>div, #slot2>div {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: rgb(250, 189, 10) 5px solid;
}

.top-div {
    text-align: right;
    padding: 1rem 1rem 0 1rem;
    background: transparent;
}

.frame1 {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border: rgb(88, 38, 11) 3px solid;
}

nav {
    background: url(img/ban.jpg) center;
    width: calc(100% - 24px);
    /* height: 6.1rem; */
    display: flex;
    /* padding: 9px 1.5rem 0; */
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0 auto;
    align-items: center;
    position: relative;
    margin: 0;
    width: 100%;
    height: 79px;
}

nav img[src*="banner"] {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

main {
    overflow: auto;
    color: #fefff9;
    padding-top: .5rem;
    margin: 0 auto;
    /* position: fixed; */
    margin-right: 1rem;
    width: 100%;
    height: calc(100vh - 6.1rem - 1.7rem);
}

.bottom {
    background: url(img1/bg-bottom.jpg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 3rem;
    margin: 0 auto;
}

.search-div {
    display: flex;
    align-items: center;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    /* width: 30%; */
    padding-top: 6px;
    z-index: 99;
}

.select-div {
    position: relative;
    z-index: 999;
    width: 270px;
    margin-right: -1.5rem;
    /* width: 100%; */
    transform: scale(.75);
}

.select {
    /* background: url(img1/arrow.png), url(img1/select-bg.png); */
    background: url(img/arrow.png), url(img/select-bg.png);
    width: 210px;
    /* height: 76px; */
    background-position: calc(100% - 7.5px), center;
    background-repeat: no-repeat;
    border: none;
    -mox-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: 24px;
    color: #3bb5ff;
    text-align: center;
    text-align-last: center;
    outline: none;
    padding-right: 62px;
    line-height: 76px;
    font-weight: 900;
    margin-right: 1rem;
    /* text-transform: capitalize; */
}

.option-div {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    background: var(--blue);
    border: 3.2px solid #3bb5ff;
    border-radius: 10px;
}

.nav-title {
    margin: 0;
    font-size: 50px;
    color: #fefff9;
    font-weight: 900;
    -webkit-text-stroke: 2.5px var(--brown);
}

.search-btn {
    margin-top: 5px;
    z-index: 999;
    transform: scale(.75);
}

#slot1 nav li {
    list-style: none;
    height: 3.2rem;
    text-align: center;
    /* padding-right: 62px; */
    font-size: 24px;
    color: #3bb5ff;
    font-weight: 900;
    text-transform: capitalize;
}

#slot1 nav li:hover {
    background: #75f9fd;
    color: var(--blue);
    cursor: pointer;
}

.overlay {
    display: none;
    width: 100%;
    height: 100vh;
    background: transparent;
    position: fixed;
    position: absolute;
    top: 0;
}

.table {
    width: 97%;
    margin: 0 auto;
    border: var(--border);
    border-width: .25rem;
    margin-right: .5rem;
    box-sizing: border-box;
    margin: 0 auto;
    width: 95%;
    /* margin-bottom: 1.5rem; */
}

.table>div, .table a {
    /* border: var(--border); */
    border-bottom: 0;
    display: grid;
    grid-template-columns: 1.6fr 2fr 1fr 1fr;
    border-right: 0;
    color: #fff;
    text-decoration: none;
}

.table>div li:last-child, .table>a li:last-child {
    border-right: none;
}

.table>a:last-child li {
    border-bottom: none;
}

.table .title1 li {
    font-weight: 900;
    font-size: 32px;
}

.table li {
    border-right: var(--border);
    list-style: none;
    text-align: center;
    font-size: 1.5rem;
    border-bottom: var(--border);
    z-index: 9;
}

.order-id {
    font-size: 1rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.orderId{
    font-size: .9rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* #slot1 .table li {
    padding: .2rem;
} */

.table .total {
    grid-column: 1/3;
}

footer {
    position: relative;
    display: flex;
    width: 95%;
    margin: .5rem auto;
    justify-content: space-between;
    justify-content: flex-end;
}

footer img[src*="prev"] {
    margin-right: 1rem;
}

#slot2 nav {
    /* background: url(img/banner_h.jpg) no-repeat center;
    background-size: cover; */
    padding-top: 1rem;
}

#slot2 main {
    width: 97%;
    /* width: unset; */
    /* background: url(img2/bg.jpg), url(img2/bottom-bar.jpg);
    background-size: cover;
    background-position: right bottom, left top;
    /* height: calc(100vh - 9.9rem - .15rem - 4.1rem); */
    /* overflow-y: scroll; */
}

#slot2 .table1 {
    font-weight: 900;
    margin-bottom: .5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    border: var(--border);
    border-width: .25rem;
}

#slot2 .table1 li:nth-of-type(3n) {
    border-right: none;
}

#slot2 .table1 li:nth-last-child(-n+3) {
    border-bottom: none;
}

#slot2 .table2 li {
    border-bottom: none;
    display: flex;
    align-items: center;
}

#slot2 .table2 .title li, #slot2 .table2 .item li:not(.winLine) {
    justify-content: center;
}

/* #slot2 .table2 > .item > li:not(.winLine){
    background: green;
} */

#slot2 .table2 div {
    border-right: none;
}

#slot2 .table2>div {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 5fr;
    border-bottom: var(--border);
}

#slot2 .table2>div:not(.title) {
    /* height: 3.5rem; */
    /* line-height: 3.5rem; */
    min-height: 56px;
}

#slot2 .table>div:last-child {
    border-bottom: 0;
}

#slot2 .table .winLine {
    display: flex;
    padding: 0 1rem;
    align-items: center;
    flex-wrap: wrap;
}

#slot2 .table img {
    /* border: 1px solid gold; */
}

#slot2 .card {
    transform: scale(.9);
    display: flex;
    align-items: center;
    margin-right: .5rem;
    /* background: green; */
}

#slot2 .card .count {
    line-height: 1.6rem;
    align-self: flex-end;
}

#slot2 .payMultiple {
    font-size: 2rem;
}

#slot2 .n2-div {
    display: flex;
    align-items: center;
}

#slot2 .wrapper {
    display: flex;
    align-items: flex-end;
}

#slot2 img[src*="back"] {
    transform: scale(.75);
}

main::-webkit-scrollbar {
    width: 2.3rem;
    border: .15rem solid #75f9fd;
    scroll-margin: 1.5rem;
    margin: 1rem;
    padding: .5rem;
    /* outline: 1rem green solid; */
    scroll-padding: 1rem;
}

main::-webkit-scrollbar-thumb {
    /* border: .5rem solid var(--blue); */
    /* border-width: .5rem 0 .5rem 0; */
    /* border: green solid .15rem; */
    border: .15rem solid #75f9fd;
    border-width: 0 .15rem 0 .15rem;
    width: 1rem;
    background: linear-gradient(to right, var(--blue) 20%, #75f9fd 20% 80%, var(--blue) 20%);
    scroll-margin: 1rem;
    scroll-margin-right: 1rem;
    /* outline: 1rem purple solid; */
    padding-top: 1rem;
}

main::-webkit-scrollbar-track {
    width: 1rem;
    scroll-margin: 5rem;
}

main::-webkit-scrollbar-button {
    width: 100%;
    height: 30px;
    position: relative;
    background-image: url(img2/arrow.png);
    background-repeat: no-repeat;
    background-position: center;
}

main::-webkit-scrollbar-button:single-button:vertical:decrement {
    transform: scaleY(-1);
}

main::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url(img2/arrow-down.png);
}

/* main::-webkit-scrollbar-button:before {
    content: "dfskdaf";
    display: block;
    position: absolute;
    top: 0;
    padding-top: 100%;
} */

@media screen and (orientation: portrait) {
    :root {
        --border: #75f9fd solid .25rem;
    }
    .top-div {
        padding-bottom: .5rem;
        margin-top: 91px;
    }
    main {
        /* width: calc(100% - 15px); */
        width: 100%;
        /* height: calc(1125px - 111px); */
        /* padding-top: 90px; */
    }
    .table .title1 {
        height: 90px;
        line-height: 90px;
    }
    #slot1 .table li {
        font-size: 1.2rem;
    }
    #slot1 .title2, #slot1 .item {
        line-height: 2.1rem;
        height: 6.1rem;
    }
    #slot1 .table li {
        padding: unset;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .table > div, .table a {
        grid-template-columns: 1.1fr 1.8fr 0.8fr 1.2fr;
    }
    
    #slot1 .table .date {
        line-height: 2rem;
    }
    #slot1 img[src*="next"] {
        position: absolute;
        right: 0;
    }
    #slot1 footer {
        justify-content: space-between;
        /* margin-bottom: 5rem; */
    }
    #slot2 .table li {
        /* height: 3.5rem; */
        line-height: 3.5rem;
        font-size: 1.6rem;
        margin-right: .1rem;
    }
    #slot2 .table2 div:not(.title), #slot2 .table2 div:not(.title) li {
        min-height: 9rem;
        /* line-height: 9rem; */
    }
    #slot2 .table2 div, #slot2 .table2 div li {
        grid-template-columns: 1.2fr 1.5fr 2.6fr;
    }
    #slot2 .table li {
        font-size: 1.2rem;
        padding: unset;
    }
    #slot2 .card:after {
        content: "";
        display: block;
        padding-bottom: 70%;
    }
    #slot2 .table1 {
        grid-template-columns: 1.6fr 1fr 1fr;
    }
    /* img[src*="frame"]{
        content: url(img/frame_v.png);
    }
    img[src*="banner"]{
        content: url(img/banner_v.jpg);
    } */
    #slot2 .table2 {
        margin-bottom: 1.5rem;
    }
}

.clone {
    visibility: hidden;
    height: 0;
    width: 0;
    position: absolute;
    z-index: -1;
    /* background: green; */
    top: 0;
}

/* classList */

.block {
    display: block !important;
}

.bottom {
    display: none;
}

*[data-lan] {
    text-transform: capitalize;
}

img[src*="frame"] {
    position: fixed;
    width: 100%;
    height: 100%;
}

.back-btn {
    z-index: 999;
}

#slot1, #slot2 {
    /* background: hotpink; */
}