body, html {
    margin: 0;
    padding: 0;
    font-family: Microsoft JhengHei;
}
:root {
    --border: #75f9fd solid .15rem;
    --brown: #471f05;
    --blue: #010125;
}

#slot1, #slot2 {
    width: 1230px;
    margin: 0 auto;
}
.top-div {

    text-align: right;
    padding: 1rem 1rem 0 1rem;
    background: transparent;
}
.frame1 {
    /* background: url(img/frame_h.png) no-repeat center; */
    /* width: 1230px; */
    /* height: 585px; */
    /* background-size: contain; */
}
nav {
    /* background: url(img/banner_h.jpg) no-repeat 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 {
    /* background: var(--blue); */
    /* background: url(img1/bg.jpg); */
    /* background: url(img/bg.jpg); */
    /* width:calc(100% - 31px); */
    /* height: calc(1rem + 437px); */
    /* background-repeat: no-repeat;
    background-size: cover; */
    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: 0.9fr 2fr 0.8fr 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{
    /* white-space:nowrap; */
    border-right: var(--border);
    list-style: none;
    text-align: center;
    font-size: 1rem;
    border-bottom: var(--border);
    /* z-index: 99; */
    /* padding: .25rem; */
    z-index: 9;
}

/* #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); */ 
}
#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.6fr 1fr 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: 2rem;
    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%); */
    /* background: linear-gradient( #75f9fd 20% 80%); */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #75f9fd 20% 80%, rgba(255, 255, 255, 0) 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;
    }
    #slot1, #slot2 {
        width: 700px;
    }
    nav {
        background: url(img/banner_v.jpg) no-repeat center;
        width: calc(100% + 1px);
        position: fixed;
        z-index: 92;
    }
    .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: 70px;
        line-height: 0px;
    }

    #slot1 .title2, #slot1 .item {
        /* line-height: 6.1rem; */
        height: 5.1rem;
    }

    #slot1 .table li {
        padding: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: break-all;
        font-size: 1.2rem;
    }
    .order-id{
        font-size: 1rem !important;
    }
    #slot1 .table .date {
        line-height: 2rem;
        
    }
    #slot1 img[src*="next"]{
        position: absolute;
        right:0;
    }
    #slot1 footer {
        justify-content: space-between;
        /* margin-bottom: 5rem; */
    }
    .space {
        height: 90px;
    }
    #slot2 .table li {
        /* height: 3.5rem; */
        line-height: 2rem;
        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: 1rem;
        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;
}

#slot1, #slot2 {
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    /* max-width: 1010px; */
}
#slot1 .frame1 {
    /* width: 100%;
    height: 550px; */
}
img[src*="frame"] {
    position: fixed;
    width: 100%;
    height: 100%;
}
.back-btn{
    z-index: 999;
}
#slot1, #slot2 {
    /* background: hotpink; */
}