:root{
    --bg-color:rgba(7, 7, 7, 0.842);
    --font-color:white;
}
body{
    margin:0px;
    background-color: var(--bg-color);
    color:initial;
}
@media (min-width:1000px){
    .exp-items-list{
        max-width: 95%;
    }
}
.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    &:hover p{
        animation-play-state: paused;
    }

    & p {
        display: inline-block;
        /* padding-left: 100%; */
        animation: marquee 15s linear infinite;
        animation-play-state: running;
    }
}

 

@keyframes marquee {
    0% { transform: translateX(3%); }
    50% { transform: translateX(-30%); }
    100% { transform: translateX(3%); }
}
.layui-layer.layui-layer-iframe{overflow: visible;}
.layui-layer-content{height:calc(100% - 40px);}
.layui-layer:has(:not(.layui-layer-title)) .layui-layer-content{height:100%;}
.layui-layer{
    & .layui-layer-setwin{
        & .layui-layer-ico{scale:0.7}
    }
    &.layui-layer-msg{
        & .layui-layer-content{
            display: flex;
            align-items: center;
            padding:5px 15px 5px 15px;
            & .layui-layer-ico{position:initial;margin-right:5px;transform: scale(0.8);}
            &.layui-layer-padding{padding:3px 15px 3px 5px;}
        }
    }
    & .layui-layer-content{
        height: calc(100% - 51px);
        & a{text-decoration: underline;color:inherit;font-style: italic;}
        & a:hover{background-color: rgba(145, 228, 120, 0.281);color:white;}
        
    }
    &.login-skin{
        & .layui-layer-title{
            font-family: sans-serif;
            font-size: larger;
            &::before{
                content: '';
                display: inline-block;
                width:30px;
                height:30px;
                /* margin-right:3px; */
                transform: translate(-3px,8px);
                /* border:1px solid black; */
                background-image: url(../favicon.ico);
                background-size: 100% 100%;
                border-radius: 3px;
            }
        }
        & .layui-layer-content{
            /* min-width: 30%; */
            padding:20px 20px 20px 55px;
            line-height: 1.8;
            font-family: cursive;
            font-size: larger;
            /* text-indent: 0.5em; */
            & a{
                text-decoration: underline;
                color:inherits;
                font-style: italic;
                &:hover{background-color: rgb(89, 252, 39);color:white;}
            }
        }
    }
    &.exp-detail-box{
        max-width: min(500px,80%);
        padding:20px;
        text-indent: 2em;
        line-height: 2;
        background-color: #5c5c5c;
        color: white;
        & .layui-layer-title{
            color: rgb(176, 211, 176);
            font-size: larger;
            text-align: center;
            font-weight: bolder;
        }
        & .layui-layer-content{
            padding-top:20px;
        }
    }


}



#main-app{
    width: 100%;height: 100%;
}

.main-app:has(.login-box){
    justify-content: center;
}
.login-box{
    & div.btn.btn-return{
        position:absolute;
        left:8px;
        font-size: larger;
        top:10px;
    }
    & div.btn.btn-tel-reg{
        position:absolute;
        right:1px;
        top:1px;
        font-size: small;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        padding:2px 10px;
        background-color: rgba(238, 110, 5, 0.808);
        &.left{
            left:1px;
            right:unset;
            border-top-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-right-radius: unset;
            border-bottom-left-radius: unset;
        }
    }
    & .invite-code{
        transform: translateX(-55px);
    }

    & .err-tip{
        color:red;
        text-align: left;
        /* font-family: cursive; */
        font-style: italic;
        transform: translateY(19px);
    }
    &>div:has(label){
        /* color:red; */
        white-space: nowrap;
        font-size: smaller;
        color:skyblue;
        text-align: left;
        transform: translateY(18px);
        & label+label{margin-left:16px;}
        & a{white-space: nowrap;font-style: italic;color:burlywood}
        /* & label{
            &:hover{text-decoration: underline;}
        } */
    }
}

.exp-suggest-btn{
    position:absolute;
    cursor: pointer;
    right:0px;
    top:0px;
    padding:3px 8px;
    background-color: rgb(255, 123, 0);
    border-radius: 3px;
    z-index: 200;

}

.btn{
    outline:none;
    cursor: pointer;
    padding:1px 3px;
    display: inline-block;
    /* border-radius: 2px; */
    appearance: none;
    background-color: transparent;
    color:inherit;
    border:none;
    font-size: inherit;
    &:hover{color:orange}
    &:disabled{cursor:not-allowed}

}
.par-row{
    display: flex;
    /* margin:8px 0px; */
    & .input{
        width: 100px;
        margin:0px 5px;
        text-align: right;
        padding-right:10px;
        border-width: 1px;
        box-sizing: border-box;
        color:black;
        background-color: white;
        /* display: flex;
        justify-content: space-between; */
        & button{
            border-radius:50%;
            width:22px;height: 22px;
            border:1px solid rgba(0, 255, 255, 0.548);
        }
        & option{text-align: left;}
    }
    & input.input{padding-right: 0;}
    & .input[disabled],& .input[disabled=true]{background-color: rgb(194, 194, 194);}
}

.exp-suggest{
    position:absolute;
    inset: 0;
    background-color: #414040;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:5%;
    & .exp-suggest-title{
        position:absolute;
        font-size: 22px;
        color: #ff730e;
        top:10px;
        left:50%;
        transform: translateX(-50%);
    }

    & .bill-list-box{
        padding:5px 10px 10px 10px;
        border:1px solid darkgoldenrod;
        background-color: yellow;
        z-index: 4;
        & .title-row{
            font-size: smaller;
            & .btn{margin:2px 5px;text-decoration: underline;color:blue;font-style: italic;}
            & .table-title{font-weight: bolder;background-color: forestgreen;padding:2px;}
        }

        & table{
            font-size: small;
            /* & td+td{border-left:1px solid #000000;} */
            & td{padding:2px;text-align: center;}
            & tr:nth-child(even){background-color: #d4a582;}
            & tr:nth-child(odd){background-color: #d4a582;}
            & tr:hover{background-color: #ff730e;color:white;}

            & .btn{color:blue;text-decoration: underline;}
        }

    }

    & .pay-box{
        margin-top:10px;
        background-color: rgba(255, 255, 255, 0.349);
        backdrop-filter: blur(5px);
        padding:10px 30px;
        color: black;
        /* position:fixed; */
        /* top:50%;left:50%; */
        /* transform: translate(-50%,-50%); */
        border-radius: 10px;
        & .close-btn{
            position:absolute;
            width:20px;height:20px;
            text-align: center;
            line-height: 0.8;
            border-radius: 50%;
            /* color:red; */
            font-size:20px;
            border:1px solid darkgray;
            left:5px;
        }

        & .title{
            color:rgb(233, 51, 218);
            font-size: 30px;
            margin-left:-10px;
            text-align: center;
            margin-bottom:10px;
            /* margin-top:-10px; */
        }
        & .box-row{
            display: flex;
            & .btn{
                padding:4px 17px 2px 17px;
                &.active{
                    /* padding:2px 5px; */
                    color:green;
                    background-color: white;
                }
            }

            /* transform: translateY(1px); */
            
        }
        & .qr-code{
            width: 300px;
            height: 300px;
            background-color: white;
            /* border:1px solid #000000; */
            padding:5px;
            text-align: center;
            position:relative;
            & .pay-title{font-size:larger;color:transparent;}
            & img{width:100%;height:calc(100% - 30px);}
            
            & .mask{
                
                position: absolute;
                inset:0;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                /* background-color: rgb(196, 188, 188); */
                & .btn{font-size: 30px;border:1px solid white;padding:10px 20px;border-radius: 10px;&:hover{background-color: #41404077;}}
                & .msg{font-size: smaller;color:purple;}
            }
            & img{filter:blur(10px);}
            &.ready{
                & img{ filter: none; }
                & .pay-title{color:red}
                transition: all 0.5s;
                & .mask{display: none;}
            }
            &.done{
                & .btn{display: none;}
                & .msg{font-size:larger;color:green;background-color: white;padding:8px;}

            }
   

        }
        & .scan-tip{
            font-style: italic;
            /* width:80%; */
            word-break: break-all;
            max-width: 300px;
        }
    }

    & .buy-bill{
        display: flex;
        position:fixed;
        bottom:5%;
        right:5%;
    }

    & .exp-buy{
        /* position: fixed; */
        bottom:50px;
        border:1px solid white;
        height: fit-content;

        /* padding:20px; */
        background-color: #d4a582;
        z-index: 4;
        border-radius: 5px;
        padding:10px 20px 10px 2px;;

        & .buy-set-box{
            position:fixed;
            border-radius: 5px;
            top:45%;
            left:50%;
            max-width: min(90%,550px);
            transform: translate(-50%,-50%);
            padding:20px 30px;
            background-color: #b4b4b4de;
            backdrop-filter: blur(5px);
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 1),-1px 1px 2px white;
            &>.title{
                font-size: 30px;
                padding-bottom: 10px;

                /* color:green; */
                font-weight: bolder;
                & .sub-tip{
                    &:hover{font-size: large;font-style: normal;}
                    padding-top:10px;
                    text-indent: 10px;
                    max-width: 90%;
                    font-size: small;
                    font-family: cursive;
                    font-style: italic;
                    color:rgb(43, 43, 247);
                    & span{color:orange;}
                    /* font-style: italic; */
                }
                & img{width:110px;height:110px;position: absolute;right:40px;top:10%;border-radius: 50%;z-index: 2;}
            }
            &:has( .par-box.quick-buy-list) .title img{
                top:40%;
            } 
            & .par-box{
                text-align: center;

                &.quick-buy-list{
                    display: flex;
                    width:500px ;
                    position:relative;
                    /* padding-bottom:30px; */
                    & .item{
                        margin:4px;
                        position: relative;
                        padding: 15px;
                        border:1px dotted white;
                        cursor: pointer;
                        transition: all 0.5s;
                        & .badge{
                            position:absolute;
                            font-size: small;
                            background-color: red;
                            padding:0px 5px;
                            color:yellow;
                            right:0px;
                            top:0px;
                        }
                        &:hover{
                            background-color: rgba(172, 255, 47, 0.205);
                        }
                        &.active{background-color: forestgreen;}
                    }

                    & .quick-buy-tips{
                        text-indent: 8px;
                        position:absolute;
                        bottom:-5px;
                        text-align: left;
                        font-size: x-small;
                        color:red;
                        font-style: italic;
                    }
                }
            
            }
            & .par-row{
                margin:3px;
                & .title{margin-right:20px;}
                & .input{font-weight: bolder;}
                &.price{
                    & .input{color:#ef4300;background-color: white;}
                }
            }
            & .action-row{
                margin-top:10px;
                font-size: 20px;
                display: flex;
                justify-content: space-around;
                color: blue;
            }
        }

        & .goods-list{
            display: flex;
            & .goods-item{
                /* margin:10px; */
                margin:0px 10px;
                padding:5px;
                border-radius: 5px;
                background-color: #c541d6;
                border:1px solid white;
                position:relative;
                text-align: center;
                & .money{font-style: italic; color:white;font-size: smaller;}
                & img{width:40px;height:30px;border-radius: 5px;}
                & span{position:absolute;top:-6px;right:-4px;cursor:pointer;
                    border:1px solid white;border-radius: 50%;
                    background-color:rgba(0,0,0,0.4);
                    width:12px;height:12px;text-align: center;line-height: 0.6;
                    &:hover{background-color:red;}
                }
            }
            & .action{
                text-align: center;
                & .money{color:red;}
                & button{
                    color:blue;
                    &:hover{color:white;}
                    text-decoration: underline;
                }
            }
        }
    }
}

button:disabled{cursor:not-allowed}

.main-app{
    width: 100%;
    height: 100%;
    display: flex;
    /* justify-content: center; */
    /* padding-top: 10%; */
    align-items: center;
    flex-direction: column;
    color:var(--font-color);


    

    & .page-title{font-size: 22px;margin-bottom: 9px;line-height: 1.25;}
    & .user-info-box{
        text-align: center;
        margin-top: 5%;

        & .user-info{
            cursor: pointer;
            /* text-decoration: underline; */
            /* text-decoration-color: skyblue; */
            & a:hover{
                /* background-color: rgba(135, 207, 235, 0.315); */
                text-decoration: underline;
            }
        }
    }

    & a{color:inherit;text-decoration: none; &:hover{text-decoration: underline;}}

    & .main-content{
        width: 100%;display: flex;
        justify-content: center;
    }


    & .exp-list{
        display: flex;
        height: fit-content;
        justify-content: center;
        position:relative;
        & .filter-list{
            /* background-color: #2d2d2d; */
            position:fixed;
            left:10px;
            height: fit-content;
            padding:10px 0px;
            /* margin-right:-100%; */
            /* margin-left:5px; */
            transition: max-width 0.5s;
            max-width: 40px;
            max-height: 100%;
            &.active{
                max-width:200px;
                & .item{display: block;}
            }
            &.col{
                max-width: 40px;
                & .item{display: block;}
            }
            &.mini{
                max-width: 40px;
                /* & .item{display: none;} */
                max-height: 18px;
                overflow: hidden;
                transition: max-height 0.5s;
            }
            & .item{
                /* display: none; */
                background-color: #ffffff28;
                color: rgba(192, 192, 192, 0.925);
                padding:10px 2px 10px 10px;
                /* background-color: rgba(245, 222, 179, 0.877); */
                /* color: black; */
                cursor: pointer;
    
                &.gap{
                    height:10px;padding:0px;text-align: left;
                    &:first-child{height: fit-content;display: block;}
                    & span{
                        color:white;
                        display: inline-block;
                        width:20px;height:15px;
                        font-size: 12px;
                        background-color: rgba(255, 255, 255, 0.432);
                        position:relative;
                        &:hover{background-color: rgba(255, 255, 255, .25);}
                        &:after{
                            content: '-';
                            text-align: center;
                            line-height: 1;
                            position:absolute;
                            inset:0;
                            z-index: -1;
                        }
                        &.active:after{content:'←'}
                        &.col:after{content:'↑'}
                        &.mini:after{content:'→'}
                    }
                }
    
                &:has(+.active){border-bottom-right-radius: 8px;}
                &.active{
                    color: white;
                    background-color: transparent;
                    &+.item:not(.active){
                        border-top-right-radius: 8px;
                    }
                }
            }
            
        }

        & .exp-items-list{
            /* width: 100%; */
            height: 100%;
            /* border:1px solid white; */
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            flex:1;
            color:white;
            height: fit-content;
    
            &.buy-mode{
                & li{
                    & .exp-detail{display: none;}
                }
                & .exp-buy-info{
                    color:rgb(240, 101, 2);
                    & span{&+span{margin-left:5px;}}
                }
                & .exp-buy-btn{
                    position:absolute;
                    right:5px;
                    font-size: 40px;
                    transform: translateX(10px);
                    z-index: 1;
                    /* padding:5px 10px; */
                    margin-left:auto;
                    /* background-color: rgba(189, 201, 201, 0.274); */
                    background: radial-gradient(circle,rgba(27, 27, 27, 0.466),transparent);
                    border-radius: 50%;
                    color:white;
                    border: none;
                    &:hover{backdrop-filter: contrast(0.5);}
                }
            }
    
            & li{
                padding: 5px 10px;
                width: 380px;
                white-space: nowrap;
                margin: 9px 12px;
                border:1px solid #a9a9a92e;
                background: #7a7a7a21;
                backdrop-filter: blur(5px);
                overflow: hidden;
                display: flex;
                height:100px;
                align-items: center;
                &:hover{
                    overflow: visible;
                    background-color: #87878754;
                }
                &.unvalid{ opacity: 0.7; }
    
                & .badge{
                    position: absolute;
                    right:0px;
                    top:0px;
                    padding:2px 10px;
                    border-top-right-radius: 5px;
                    border-bottom-left-radius: 10px;
                    font-size: 12px;
                    background-color: red;
                    color:yellow;
                    &.no-buy{
                        background-color: red;
                        color:yellow;
                        font-weight: bolder;
                        &.added{
                            background-color: green;
                        }
                    }

                }
    
                & .exp-img{
                    display: inline-block;
                    vertical-align: middle;
                    & img{width:64px;aspect-ratio: 1/1;border-radius: 5px;}
                }
                & .exp-info{
                    padding-left: 18px;
                    & .exp-title{
                        display: inline-block;
                        text-align: left;
                        font-size: 18px;
                        margin-bottom: 4px;
                        cursor: pointer;
    
                    }
                    & .exp-detail{
                        font-size: smaller;
                        color:rgb(182, 182, 182);
                        /* overflow: hidden; */
                        line-height: 22px;
                        /* max-height:22px; */
                        white-space: normal;
                        & a{
                            font-size: larger;
                            background-color: wheat;
                            color:black;
                            padding:1px 4px;
                            /* margin-left:5px;  */
                            &:hover{background-color: #2d2d2d;color:white;}
                            &:has(+a){margin-right: 5px;}
                        }
                        & .task-info{
                            color:skyblue;display: block;white-space: nowrap;
                            & span{
                                cursor: pointer;
                                padding:0px 2px;
                                border:2px;
                                &:hover{ background-color: rgba(64, 224, 208, 0.11); }
                            }
                        }
                        &.multi-mode{
                            & a{background-color: wheat;border-radius: 2px;padding:1px 4px;
                            &.train{color:blue;}
                            &.exam{color:red;}
                            &.free{color:black;}
                            &.guide{color:green;}
                            }
    
                        }
    
                    }
                }
    
            }
        }
    }
    

    & form{
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        text-decoration: none;
        width: 290px;
        position: relative;
        margin:15px auto 0 auto;
        text-align: center;
        padding: 20px 60px;
        border-radius: 14px;
        background-image: linear-gradient(180deg, #2f2f2f12, #9898982e);
        backdrop-filter: blur(3px);
        box-shadow: 1px 1px 5px #e8e6e638, -1px -1px 5px #a9a9a94f;
        & h1{font-size: 30px;font-weight: 700;text-shadow:0 1px 4px rgba(0,0,0,0.2);cursor: pointer; ;}
        & a{color:inherit}
        & .sub-fn{
            font-size: small;color:rgb(179, 179, 179);
            font-style: italic;
            text-align: right;
            padding:2px 10px 0px 1px;
            height: 0px;;
            & a{
                display: inline-block;
                transform: translateY(-29px);
                &:hover{color:white;background-color: rgba(0, 0, 0, .1);}
            }
            &.tel-num-fn{
                color:white;
                &.not-valid{
                    color:gray;
                    pointer-events: none;
                }
                &.during-disabled{
                    color:whitesmoke;
                    font-weight: bolder;
                    pointer-events: none;
                }
            }
        }
        & input[type='text'], & input[type='number'], & input.password{
                /* display: inline-block; */
            outline: none;
            width:99%;
            height: 42px;
            margin-top: 25px;
            padding: 0 15px;
            background: #2d2d2d;
            background: rgba(45, 45, 45, .15);
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, .15);
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            font-family: 'PT Sans', Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            transition: all .2s;

            &:placeholder-shown::placeholder {
                color: white;
            }
            &:focus:placeholder-shown::placeholder{
                opacity: 0.8;
            }
        }
        & button{
            cursor: pointer;
            width: 100%;
            height: 44px;
            margin-top: 25px;
            padding: 0;
            background: #ef4300;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #ff730e;
            box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            font-family: 'PT Sans', Helvetica, Arial, sans-serif;
            font-size: 24px;
            letter-spacing: 15px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            transition: all .2s;
            &:disabled{
                background: gray;
            }
        }

    & .main-box{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        & .login-panel{
            min-width: 150px;
            max-width: 450px;
            margin:auto;
            text-align: center;
            color: var(--font-color);

            & .form-box{
                padding: 20px 60px;
                border-radius: 14px;
                background-image: linear-gradient(180deg, #2f2f2f12, #9898982e);
                backdrop-filter: blur(3px);
                box-shadow: 1px 1px 5px #e8e6e638, -1px -1px 5px #a9a9a94f;

                & h1{font-size: 30px;font-weight: 700;text-shadow:0 1px 4px rgba(0,0,0,0.2) ;}

                
                }
            }
        }
    }

}

.copyright{
    position: fixed;
    left:50%;
    transform: translateX(-50%);
    height: 20px;
    bottom: 4%;
    font-size: 14px;
    background-image: url(../pic/pin.gif);
    background-repeat: no-repeat;
    padding:0px 5px 1px 20px;
    border-radius: 2px;
    color:white;
    background-color: #c4c1c162;
    z-index: 2;
    & a{color: inherit;}
}