@media only screen and (orientation: portrait) and (max-width: 440px) {
        .td {
            border: 1px gray solid;
        }
        h1 {
            font-size: 6vmin;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            appearance: textfield;
            -webkit-appearance: none;
            margin: 0;
        }
        /*只要在樣式裡面加一句去掉css去掉iPhone、iPad的預設按鈕樣式就可以了*/
        input[type="button"],
        input[type="submit"],
        input[type="reset"] {
            appearance: none;
        }
        textarea {
            appearance: none;
        }
        .button {
            border-radius: 0;
        }
        /*去除Chrome等瀏覽器文字框預設發光邊框*/
        input:focus,
        textarea:focus {
            outline: none;
        }
        select[disabled]::-ms-expand {
            display: none;
        }
        select[disabled] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        #input_now {
            position: relative;
            border: 2px rgba(255, 30, 0, 0.574) solid;
            background-color: rgba(255, 120, 120, 0.306);
        }

        .mobile_hide {
            display: none;
        }
        #svg_div {
            display: none;
        }
        .alert_msg_s {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: fadein 0.2s ease 1;
            animation-fill-mode: forwards;
            font-weight: 500;
            text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
            z-index: 2500;
            width: 100%;
            height: 30vh;
            font-size: 4vmin;
            background-color: rgba(10, 10, 10, 0);
            text-align: center;
            color: rgb(255, 20, 20);
        }
        .alert_msg_s_end {
            animation: fadeout 0.2s ease 1;
            animation-fill-mode: forwards;
        }
        .alert_msg_xl {
            font-weight: 900;
            text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
            width: 100vw;
            height: 30vh;
            font-size: 7vmin;
            background-color: rgba(10, 10, 10, 0);
            text-align: center;
            animation: msg_fadein 0.1s ease 1;
            animation-fill-mode: forwards;
            color: rgb(224, 134, 209);
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2900;
        }
        .alert_msg_xl_hide {
            animation: msg_fadeout 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .alert_background {
            width: 100vw;
            height: 100vh;
            z-index: 2700;
            background-color: rgb(70 70 70 / 40%);
            position: absolute;
            top: 0;
            left: 0;
            animation: msg_fadein 0.1s ease 1;
            animation-fill-mode: forwards;
            display: flex;
        }
        .alert_background_hide {
            animation: msg_fadeout 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        @keyframes msg_fadein {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes msg_fadeout {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 0;
            }
        }
        /*
    @keyframes blink {
        0%, 100% {
            background-color: #000;
        }
        50% {
            background-color: transparent;
        } 
    }
    #input_now::after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 2px;
        height: 18px;
        top: 50%;
        transform: translateY(-50%);
        animation: blink 1s infinite steps(1, start);
    }
    
    */
        .hidden {
            display: none;
        }
        .overflowHide {
            position: fixed;
            left: 0;
            width: 100%;
            background-color: #000;
        }
        .sd-shadow {
            z-index: 1000;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            pointer-events: auto;
        }
        .sd-content {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            background-color: rgba(10, 10, 10, 0.5);
            z-index: 2000;
        }
        .sd-top-show {
            overflow-y: auto;
            height: 200px;
            animation: sd-top-show 0.3s ease 1;
        }
        .sd-top-hide {
            animation: sd-top-hide 0.3s ease 1;
            height: 200px;
            animation-fill-mode: forwards;
        }
        .sd-bottom-show {
            top: auto;
            bottom: 0;
            height: 200px;
            transform: translateY(100%);
            overflow-y: auto;
            animation: sd-bottom-show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .sd-bottom-hide {
            top: auto;
            bottom: 0;
            height: 200px;
            animation: sd-bottom-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .sd-left-show {
            overflow-y: auto;
            left: 0;
            width: 80%;
            height: 100%;
            transform: translateX(-100%);
            animation: sd-left-show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .sd-left-hide {
            overflow-y: auto;
            left: 0;
            width: 80%;
            height: 100%;
            transform: translateX(0);
            animation: sd-left-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .sd-right-show {
            overflow-y: auto;
            right: 0;
            left: auto;
            width: 46vw;
            height: 100vh;
            transform: translateX(100%);
            animation: sd-right-show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .sd-right-hide {
            overflow-y: auto;
            right: 0;
            left: auto;
            width: 46vw;
            height: 100vh;
            transform: translateX(0);
            animation: sd-right-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        @keyframes sd-top-show {
            0% {
                opacity: 0;
                -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }
        @keyframes sd-top-hide {
            0% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
            }
        }
        @keyframes sd-bottom-show {
            0% {
                opacity: 0;
                -webkit-transform: translateY(100%);
                transform: translateY(100%);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
        }
        @keyframes sd-bottom-hide {
            0% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                -webkit-transform: translateY(100%);
                transform: translateY(100%);
            }
        }
        @keyframes sd-left-show {
            0% {
                opacity: 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }
        @keyframes sd-left-hide {
            0% {
                opacity: 1;
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            100% {
                opacity: 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
        @keyframes total-left-show {
            0% {
                opacity: 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }
        @keyframes total-left-hide {
            0% {
                opacity: 1;
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            100% {
                opacity: 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
        @keyframes sd-right-show {
            0% {
                opacity: 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }
        @keyframes sd-right-hide {
            0% {
                opacity: 1;
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            100% {
                opacity: 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
        }
        @keyframes buttons_product_modify_left_move {
            0% {
                opacity: 0.3;
                left: 48vw;
                top: 21vh;
            }
            100% {
                opacity: 1;
                left: 0vw;
                top: 4vh;
            }
        }
        @keyframes buttons_product_modify_left_moveback {
            0% {
                opacity: 1;
                left: 0vw;
                top: 4vh;
            }
            100% {
                opacity: 0.3;
                left: 40vw;
                top: 25vh;
            }
        }
        @keyframes sd-right-show2 {
            0% {
                opacity: 0;
                -webkit-transform: translateX(20%);
                transform: translateX(20%);
            }
            50% {
                opacity: 0.2;
                -webkit-transform: translateX(1%);
                transform: translateX(1%);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateX(0%);
                transform: translateX(0%);
            }
        }
        @keyframes sd-right-hide2 {
            0% {
                opacity: 0;
                -webkit-transform: translateX(-20);
                transform: translateX(-20);
            }
            100% {
                opacity: 0;
                -webkit-transform: translateX(0%);
                transform: translateX(0%);
            }
        }
        @keyframes sd-right-show3 {
            0% {
                opacity: 1;
                -webkit-transform: translateX(0%);
                transform: translateX(0%);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateX(0%);
                transform: translateX(0%);
            }
        }
        @keyframes sd-right-hide3 {
            0% {
                opacity: 1;
                -webkit-transform: translateX(0%);
                transform: translateX(0%);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateX(0%);
                transform: translateX(0%);
            }
        }
        @keyframes fadein {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fadeout {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes flicker {
            0% {
                opacity: 1;
            }
            25% {
                opacity: 0.2;
            }
            50% {
                opacity: 1;
            }
            75% {
                opacity: 0.2;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fadein2 {
            0% {}
            100% {
                background-color: rgba(150, 150, 150, 0.3);
                border: 3px rgba(253, 95, 46, 0.3) solid;
                width: 55vw;
            }
        }
        @keyframes fadeout2 {
            0% {
                background-color: rgba(150, 150, 150, 0.3);
                border-top-left-radius: 3vw;
                border-top-right-radius: 3vw;
                border-bottom-right-radius: 3vw;
                border-bottom-left-radius: 3vw;
                border: 3px rgba(253, 95, 46, 0.3) solid;
                width: 55vw;
            }
            100% {
                background-color: rgba(150, 150, 150, 0);
                border: 3px rgba(253, 95, 46, 0) solid;
            }
        }
        /*========================================================================================================================*/
        * {
            font-size: 3vmin;
            font-weight: bold;
            box-sizing: border-box
        }
        P {
            color: #fff;
        }
        html {
            height: 98%;
            background-color: rgb(167, 181, 194);
            touch-action: manipulation;
            font-size: initial;
            overflow-x: hidden;
        }
        body {
            -ms-overflow-style: none;
            /*background-color: #e9ebee;*/
            background-color: rgb(167, 181, 194);
        }
        @keyframes body_enter {
            0% {
                background-color: #000;
            }
            100% {
                background-color: #e9ebee;
            }
        }
        /*隱藏滾動條*/
         ::-webkit-scrollbar {
            display: none;
        }
        /*          background-color:rgba(193,191,204,1);/*深紫*/
        /*          background-color:rgb(183,206,224);/*淺藍*/
        /*          background-color:rgb(146,184,220);/*深藍*/
        /*          background-color:rgb(226,227,232);/*淡紫*/
        .cashier {
            width: 100vw;
            height: 80vh;
            position: fixed;
            top: 0%;
            left: 0%;
            padding: 0 0.5vw 0.5vw;
            background-color: transparent;
            overflow: hidden;
        }
        .cashier_model_t {
            background-color: #D6BFBB;
            /*
        width: 100vw;
        height: 80vh;

        padding: 0.5vw;
        border-radius: 10px;
        position: absolute;
        top: 0%;
        left: 0%;
    
        */
        }
        .item {
            display: none;
        }
        .item_usual {
            display: none;
        }
        /*
    .item {
        position: absolute;
        width: 100vw;
        height: 100vh;
        left:0;
        top: 50%;
        transform: translateY(-50%);
        overflow: hidden;
        background-color:#000 ;
        border-top-left-radius: 3vmin;
        border-top-right-radius: 3vmin;
        border-bottom-right-radius: 3vmin;
        border-bottom-left-radius: 3vmin;
        z-index: -1;
    }
    .item::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-color:#000 ;
        background-repeat: no-repeat;
        background-size: 50% 50%;
        background-position: 0 0;
        background: conic-gradient(transparent, rgba(92, 225, 255,0.8),transparent 30%);
        animation: turn 1s ease 1;
        animation-fill-mode: forwards;
        border-top-left-radius: 3vw;
        border-top-right-radius: 3vw;
        border-bottom-right-radius: 3vw;
        border-bottom-left-radius: 3vw;
    }
    @keyframes turn {
        50%{
            transform: rotate(-1turn);
        }
        75%{
            background: conic-gradient(rgba(92, 225, 255,0.1), rgba(92, 225, 255,0.8), rgba(92, 225, 255,0.1) 30% );
        }
        100%{
            background:rgba(92, 225, 255,1);
            
        }
    }
    .item_usual {
        position: absolute;
        width: 100vw;
        height: 100vh;
        left:0;
        top: 50%;
        transform: translateY(-50%);
        overflow: hidden;
        background-color:#000 ;
        border-top-left-radius: 3vmin;
        border-top-right-radius: 3vmin;
        border-bottom-right-radius: 3vmin;
        border-bottom-left-radius: 3vmin;
        z-index: -1;
    }
    .item_usual::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-color:#000 ;
        background-repeat: no-repeat;
        background-size: 50% 50%;
        background-position: 0 0;
        background: conic-gradient(transparent, rgba(168, 164, 164, 0.8),transparent 30%);
        animation: turn_usual 1s ease 1;
        animation-fill-mode: forwards;
        border-top-left-radius: 3vw;
        border-top-right-radius: 3vw;
        border-bottom-right-radius: 3vw;
        border-bottom-left-radius: 3vw;
    }
    @keyframes turn_usual {
        50%{
            transform: rotate(1turn);
        }
        60%{
            background: conic-gradient( rgba(168, 164, 164, 0.1), rgba(168, 164, 164, 0.8),  rgba(168, 164, 164, 0.1) 30% );
        }
        100%{
            background: rgba(168, 164, 164, 1);
            
        }
    }
    */
        .test_model {
            position: absolute;
            top: 1%;
            right: 1%;
            z-index: 1000;
            color: #dedede;
            background-color: brown;
            border-top-right-radius: 3vw;
            border-top-left-radius: 3vw;
            border-bottom-right-radius: 3vw;
            border-bottom-left-radius: 3vw;
            border: 1px #01A59C solid;
            padding: 0.5vh;
            animation: fadein 0.2s ease 1;
            animation-fill-mode: forwards;
        }
        .test_model_hide {
            position: absolute;
            top: 1%;
            right: 1%;
            z-index: 1000;
            color: #dedede;
            background-color: brown;
            border-top-right-radius: 3vw;
            border-top-left-radius: 3vw;
            border-bottom-right-radius: 3vw;
            border-bottom-left-radius: 3vw;
            padding: 0.5vh;
            animation: fadeout 0.2s ease 1;
            animation-fill-mode: forwards;
        }
        .input_block {
            height: 20vh;
        }
        .input_block_div {
            margin: 0 auto;
            width: 100%;
            height: 17vh;
            padding: 1vmin;
            white-space: nowrap;
            background-color: lightgray;
            color: #000;
            text-align: left;
            background-color: rgba(201, 210, 193, 1);
            /*深紫*/
            border-top-right-radius: 18px;
            border-top-left-radius: 18px;
            border-top: 3px dashed rgba(57, 72, 45);
            border-right: 3px dashed rgba(57, 72, 45, 1);
            border-left: 3px dashed rgba(57, 72, 45, 1);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .buttons {
            font-size: 3vmin;
            width: 8vh;
            height: 8vh;
            background-color: lightgray;
            border-top-left-radius: 8vh;
            border-top-right-radius: 8vh;
            border-bottom-right-radius: 8vh;
            border-bottom-left-radius: 8vh;
            border: none;
            box-shadow: inset;
            padding-top: 3vh;
            margin: 0 auto;
            cursor: pointer;
            text-align: center;
            line-height: 2.5vh;
        }
        .buttons:hover {
            transform: scale(1.05);
        }
        .buttons:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .buttons_number {
            font-size: 4vmin;
            width: 8vh;
            height: 8vh;
            text-align: center;
            border-radius: 50%;
            box-shadow: inset;
            background-color: rgba(105, 105, 105, 0.447);
            color: white;
            cursor: pointer;
            padding: 1px;
            margin: 0 auto;
            padding-top: 2.5vmin;
            line-height: 4vh;
            border: 1px #FFF double;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
        }
        .buttons_number:hover {
            transform: scale(1.05);
        }
        .buttons_number:active {
            /*box-shadow: none;*/
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .buttons_long {
            font-size: 4vmin;
            width: 16 vh;
            height: 8vh;
            text-align: center;
            background-color: rgba(105, 105, 105, 0.447);
            border-radius: 7vh;
            box-shadow: inset;
            color: rgb(255, 255, 255);
            cursor: pointer;
            padding: 2px;
            padding-top: 3vmin;
            margin: 0 auto;
            line-height: 3vh;
            border: 1px #FFF double;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
        }
        .buttons_long:hover {
            transform: scale(1.05);
        }
        .buttons_long:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .buttons_clean {
            width: 100%;
            height: 30%;
            text-align: center;
            border-radius: 10px;
            border: none;
            color: white;
            cursor: pointer;
            position: relative;
            top: 0%;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
        }
        .buttons_clean:hover {
            transform: scale(1.05);
        }
        .buttons_clean:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .buttons_sub {
            width: 100%;
            height: 60%;
            /*background: -webkit-linear-gradient(top right, rgba(170, 17, 17, 1), rgba(208, 112, 112, 1));*/
            background-color: red;
            text-align: center;
            border-radius: 10px;
            border: none;
            color: white;
            cursor: pointer;
            position: relative;
            top: 10%;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
        }
        .buttons_sub:hover {
            transform: scale(1.05);
        }
        .buttons_sub:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .typing_I {
            animation: typing_I 3.5s steps(37, end), blink-caret .75s step-end infinite;
            font-family: Consolas, Monaco;
            word-break: break-all;
            overflow: hidden;
            color: #000;
        }
        @keyframes typing_I {
            0% {
                height: 0;
            }
            100% {
                height: 30vh;
            }
        }
        .quick_buttons_sub {
            width: 100%;
            height: 12%;
            background: -webkit-linear-gradient(top right, rgba(170, 17, 17, 1), rgba(208, 112, 112, 1));
            text-align: center;
            border-radius: 10px;
            border: none;
            box-shadow: inset;
            color: white;
            cursor: pointer;
            margin: 6% auto;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
        }
        .quick_buttons_sub:active {
            box-shadow: 1vmin 1vmin 2vmin rgba(0, 0, 0, 0.3);
        }
        .quick_buttons_sub:hover {
            transform: scale(1.05);
        }
        .quick_buttons_clean {
            width: 100%;
            height: 12%;
            background-color: #1c3991;
            text-align: center;
            border-radius: 10px;
            border: none;
            color: white;
            cursor: pointer;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
            margin-top: 5%;
        }
        .quick_buttons_claen:active {
            box-shadow: 1vmin 1vmin 2vmin rgba(0, 0, 0, 0.3);
        }
        .quick_buttons_clean:hover {
            transform: scale(1.05);
        }
        .total_info {
            position: relative;
            bottom: 0%;
            right: 0%;
            height: 97%;
            width: 40%;
            margin-top: 2%;
            margin-left: 5%;
            float: left;
        }
        .buttons_product_list {
            background-color: rgb(226, 227, 232);
            color: white;
            margin: 0.2vw 0.8vw;
            border-radius: 10px;
            border: 1px #FFF double;
            border: none;
            width: 34vw;
            height: 10vh;
            cursor: pointer;
            display: inline-block;
            overflow: hidden;
            text-align: center;
            z-index: 2001;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
            flex-shrink: 0;
        }
        .buttons_product_shortcut {
            height: 100%;
        }
        .shake_it {
            /* Start the shake animation and make the animation last for 0.5 seconds */
            animation: shake 0.3s;
            /* When the animation is finished, start again */
            animation-iteration-count: infinite;
        }
        @keyframes shake {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(1deg);
            }
            50% {
                transform: rotate(0eg);
            }
            75% {
                transform: rotate(-1deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }
        .shake_it:hover {
            animation: none;
        }
        .buttons_product_list:hover {
            transform: scale(1.05);
        }
        .buttons_product_list:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .buttons_product_list_add {
            background-color: rgb(226, 227, 232);
            color: rgb(0, 0, 0);
            font-size: 10vmin;
            margin: 0.3vh 0.8vw 0.3vh;
            border-radius: 10px;
            border: 1px #FFF double;
            border: none;
            width: 34vw;
            height: 10vh;
            cursor: pointer;
            line-height: 10vh;
            display: inline-block;
            overflow: hidden;
            text-align: center;
            z-index: 2001;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
            flex-shrink: 0;
        }
        .buttons_product_list_add:hover {
            transform: scale(1.05);
        }
        .buttons_product_list_add:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .product_add_background {
            width: 100vw;
            height: 87vh;
            z-index: 2600;
            background-color: rgba(10, 10, 10, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            animation: showup 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .buttons_product_list_add_block {
            background-color: rgb(226, 227, 232);
            /*淡紫*/
            color: rgb(0, 0, 0);
            margin: 0.5vh auto 0.5vh 1vw;
            border-radius: 10px;
            border: none;
            width: 80vw;
            height: 17vh;
            text-align: center;
            z-index: 2700;
            box-shadow: 2vw 2vw 4vw rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            position: absolute;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            animation: showup 0.3s forwards;
            left: 10vw;
            top: 39vh;
        }
        .showup {
            animation: showup 0.3s forwards;
        }
        @keyframes showup {
            from {
                left: calc(var(--mouse-x, 0) * 100%);
                top: calc(var(--mouse-y, 0) * 100%);
                width: 1vw;
                height: 1vh;
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        .clearout {
            animation: clearout 0.3s forwards;
        }
        @keyframes clearout {
            from {
                opacity: 1;
            }
            to {
                left: calc(var(--mouse-x, 0) * 100%);
                top: calc(var(--mouse-y, 0) * 100%);
                width: 1vw;
                height: 1vh;
                opacity: 0;
            }
        }
        .add_new_product_name {
            width: 60%;
            margin-left: 1vw;
            position: absolute;
            top: 10%;
            left: 21%;
            font-size: 3vmin;
        }
        .add_new_product_price {
            width: 60%;
            margin-left: 1vw;
            position: absolute;
            bottom: 10%;
            left: 21%;
            font-size: 3vmin;
        }
        .shortcut_btn_tax_add {
            background-color: #FFAB85;
            color: rgb(0, 0, 0);
            width: 20%;
            height: 100%;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            position: absolute;
            left: 0;
            display: flex;
            flex-direction: column;
            justify-content: Space-around;
            align-items: center;
        }
        .shortcut_btn_tax_btn {
            height: 25%;
            width: 80%;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            outline-style: none;
            border: 1px white solid;
            border-radius: 10px;
            color: rgb(0, 0, 0);
        }
        .shortcut_btn_tax_btn:hover {
            transform: scale(1.05);
        }
        .shortcut_btn_tax_btn:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        /*
    .shortcut_btn_tax {
        background-color: #E54D2E;
        font-size: 1.8vmin;
        color: rgb(0, 0, 0);
        display: block;
        width: 100%;
        height:13%;
        border-top-left-radius:10px;
        border-top-right-radius:10px;
        position: relative;
        top:0;
        text-align: center;
    }
*/
        .buttons_block {
            height: 10vh;
        }
        .shortcut_btn_tax {
            float: left;
            background-color: #E54D2E;
            font-size: 1.8vmin;
            color: rgb(0, 0, 0);
            width: 10%;
            height: 100%;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .shortcut_btn_name {
            display: block;
            width: 95%;
            color: rgb(0, 0, 0);
            height: 67%;
            padding-top: 5%;
            font-size: 4vmin;
        }
        .shortcut_btn_price {
            color: rgba(38, 0, 255, 0.545);
            height: 20%;
            display: flex;
            text-align: left;
            align-items: center;
            justify-content: space-between;
        }
        .product_edit {
            width: 5vw;
        }
        .shortcut_btn_block {
            width: 90%;
            height: 100%;
            display: inline-block;
        }
        /*
    .buttons_sub:active {
    top: 2px;
    box-shadow: inset
    0 1px 0 hsl(19, 78%, 14%),
    0 2px 0 hsl(19, 78%, 16%),
    0 3px 0 hsl(19, 78%, 18%),
    0 4px 0 hsl(19, 78%, 20%);
    }

    .buttons_zero:active{
    top: 2px;
    box-shadow: inset
    0 1px 0 hsl(19, 78%, 14%),
    0 2px 0 hsl(19, 78%, 16%),
    0 3px 0 hsl(19, 78%, 18%),
    0 4px 0 hsl(19, 78%, 20%);
    }
    .buttons_number:active{
    top: 2px;
    box-shadow: inset
    0 1px 0 hsl(19, 78%, 14%),
    0 2px 0 hsl(19, 78%, 16%),
    0 3px 0 hsl(19, 78%, 18%),
    0 4px 0 hsl(19, 78%, 20%);
    }
    */
        .buttons_number_c {
            font-size: 5vmin;
            width: 10vh;
            height: 10vh;
            text-align: center;
            background-color: lightgray;
            border-radius: 50%;
            border: none;
            box-shadow: inset;
            background-color: dimgray;
            color: white;
            cursor: pointer;
            padding: 1px;
            margin: 0 auto;
            padding-top: 2.5vmin;
            line-height: 8vh;
        }
        .buttons_c {
            font-size: 5vmin;
            width: 10vh;
            height: 10vh;
            background-color: lightgray;
            border-radius: 50%;
            border: none;
            box-shadow: inset;
            margin: 0 auto;
            cursor: pointer;
            text-align: center;
            line-height: 10vh;
        }
        .buttons_long_c {
            width: 20vh;
            height: 10vh;
            text-align: center;
            background-color: lightgray;
            border-radius: 8vw;
            border: none;
            box-shadow: inset;
            color: black;
            cursor: pointer;
            font-size: 5vmin;
            margin: 0 auto;
            line-height: 10vh;
        }
        .buttons_long2_c {
            width: 20vh;
            height: 10vh;
            text-align: center;
            border-radius: 8vw;
            border: none;
            box-shadow: inset;
            color: black;
            cursor: pointer;
            font-size: 8vmin;
            margin: 0 auto;
            line-height: 10vh;
            background-color: brown;
        }
        .total_btn {
            width: 50%;
            height: 4vh;
            text-align: center;
            border-style: none;
            background-color: #24252600;
        }
        .amount_list {
            width: 50%;
            height: 4vh;
            border-style: none;
            background-color: #77a28f00;
            text-align: center;
        }
        .amount_list_I {
            width: 70%;
            height: max-content;
            border-style: none;
            background-color: #77a28f00;
            text-align: center;
            white-space: nowrap;
            flex-shrink: 0;
            /*確保flex子元素不被壓縮 */
        }
        .total_btn_I {
            width: 25vw;
            height: 5vh;
            text-align: left;
            border-style: none;
            background-color: transparent;
        }
        .total_btn_I {
            width: 25vw;
            height: 3vh;
            text-align: left;
            border-style: none;
            background-color: transparent;
            color: aliceblue;
        }
        .product_name {
            display: inline-block;
            width: 47.5vw;
            text-align: left;
            height: 3vh;
            margin-bottom: 1vh;
        }
        .amount {
            width: 15vw;
            height: 3vh;
            display: inline-block;
            text-align: center;
            margin-bottom: 1vh;
        }
        .unit_price {
            width: 25vw;
            height: 3vh;
            display: inline-block;
            text-align: center;
            margin-bottom: 1vh;
        }
        .item_price {
            height: 3vh;
            display: inline-block;
            width: 47.5vw;
            text-align: center;
            margin-bottom: 0.5vh;
        }
        .discount_show_last_price {
            height: 3vh;
            width: 9vw;
            text-align: center;
        }
        .pruduct_tax_type {
            height: 3vh;
            width: 5vw;
            display: inline-block;
            border: none;
            text-align: center;
            background-color: rgba(211, 211, 211, 0);
            font-size: 1.7vmin;
        }
        .CustomsClearanceMark {
            height: 4vh;
            display: inline-block;
            width: 23vw;
            border: none;
            text-align: center;
            background-color: rgba(211, 211, 211, 0);
            font-size: 1.7vmin;
        }
        /*
    #input_now{
        position: relative;
        border:2px rgba(0,255,255,0.4) solid;
    }
    @keyframes blink {
        0%, 100% {
            background-color: #000;
        }
        50% {
            background-color: transparent;
        } 
    }
    #input_now::after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 2px;
        height: 18px;
        top: 50%;
        transform: translateY(-50%);
        animation: blink 1s infinite steps(1, start);
    }
    */
        .del_btn {
            background: none;
            border: none;
            margin-right: 1vw;
            padding: 0;
            cursor: pointer;
            padding-left: 1vw;
            float: right;
        }
        .total_discount_del_btn {
            background: none;
            border: none;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .add_btn {
            display: inline-block;
            width: 12vw;
            height: 3vh;
            text-align: center;
            border-style: none;
            background-color: transparent;
        }
        .add_btn_short {
            display: inline-block;
            width: 8vw;
            height: 3vh;
            text-align: center;
            border-style: none;
            background-color: transparent;
        }
        .add_button_long {
            display: inline-block;
            width: 26vw;
            height: 3vh;
            text-align: center;
            border-style: none;
            background-color: transparent;
        }
        .add_item_btn {
            display: inline-block;
            width: 16vw;
            height: 3vh;
            text-align: center;
            border-style: none;
        }
        .ZeroTaxSalesAmount {
            display: inline-block;
            width: 16vw;
            height: 3vh;
            text-align: center;
            border-style: none;
            background-color: transparent;
        }
        .SalesAmount {
            display: inline-block;
            width: 16vw;
            height: 3vh;
            text-align: center;
            border-style: none;
            background-color: transparent;
        }
        .FreeTaxSalesAmount {
            display: inline-block;
            width: 16vw;
            height: 3vh;
            text-align: center;
            border-style: none;
            background-color: transparent;
        }
        .tax_count_area {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .tax_count_area_I {
            text-align: left;
            white-space: nowrap;
        }
        .tax_count_area1 {
            position: absolute;
            bottom: 0;
        }
        #SalesAmount_area_I {
            white-space: nowrap;
        }
        #FreeTaxSalesAmount_area_I {
            white-space: nowrap;
        }
        #ZeroSalesAmount_area_I {
            white-space: nowrap;
        }
        .discount_msg {
            width: 20vw;
            height: 3vh;
            text-align: left;
            border-style: none;
            color: #FF0000;
        }
        hr.style-one {
            width: 95%;
            margin: 0 auto;
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        }
        hr.style-tow {
            width: 95%;
            margin: 0 auto;
            border: 0;
            height: 4px;
            background-image: linear-gradient(to right, rgba(178, 178, 178, 0), rgba(178, 178, 178, 0.75), rgba(178, 178, 178, 0));
        }
        hr.style-three {
            width: 95%;
            margin: 0 auto;
            border: 0;
            height: 2px;
            background-image: linear-gradient(to right, rgba(178, 178, 178, 0), rgba(178, 178, 178, 0.75), rgba(178, 178, 178, 0));
        }
        hr.style-four {
            width: 95%;
            margin: 2vh 0;
            border: 0;
            height: 5px;
            background-image: linear-gradient(to right, rgba(178, 178, 178, 1), rgba(178, 178, 178, 0.5), rgba(178, 178, 178, 0));
        }
        .product_setup_background {
            width: 100vw;
            height: 88vh;
            z-index: 2000;
            background-color: rgba(10, 10, 10, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            /*display:none;*/
            animation: sd-left-show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .all_product_modify_block {
            height: 65vh;
            overflow: auto;
            padding: 5vh 10px 10px 10px;
            overscroll-behavior: contain;
        }
        .product_modify_block {
            margin: auto;
            display: flex;
            width: 90vw;
            justify-content: space-between;
            align-items: center;
        }
        .tital_product_modify_block {
            margin: auto;
            display: flex;
            flex-wrap: nowrap;
            width: 90vw;
            align-items: center;
            border-bottom: 5px #B5C487 double;
        }
        .product_setup {
            border-color: rgb(81, 81, 81);
            z-index: 2500;
            width: 98vw;
            height: 82vh;
            border-radius: 10px;
            text-align: center;
            background-color: #e8e8e8;
            color: rgba(0, 0, 0, 0.612);
            margin: 6vh auto 0;
            overflow-y: auto;
        }
        .product_setup_switch {
            width: 5vw;
            cursor: pointer
        }
        .product_setup_background_hide {
            animation: sd-left-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .product_setup_hide {
            animation: sd-left-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .edit_product {
            background-color: #24252600;
            border: none;
            color: rgba(0, 0, 0, 0.678);
            width: 22.5vw;
            text-align: center;
        }
        .edit_product_modify {
            background-color: transparent;
            color: rgb(0, 0, 0);
            text-align: left;
        }
        .mem_setup_background {
            width: 100vw;
            height: 88vh;
            z-index: 2000;
            background-color: rgba(10, 10, 10, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            animation: sd-top-show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .mem_setup_background_hide {
            animation: sd-top-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        #edit_mem_name {
            height: 4vh;
            font-size: 4vmin;
        }
        #edit_mem_id {
            height: 4vh;
            font-size: 4vmin;
        }
        #edit_mem_password {
            height: 4vh;
            font-size: 4vmin;
        }
        .edit_goal {
            margin: 10% auto;
            white-space: nowrap;
            font-size: 5vmin;
        }
        .edit_lovekey {
            margin: 0 auto;
            display: flex;
            width: 64%;
            justify-content: center;
            align-items: center;
        }
        .mem_setup {
            border-style: solid solid solid solid;
            border-color: rgba(178, 178, 178, 0.5);
            width: 98vw;
            height: 82vh;
            text-align: center;
            background-color: #818E9B;
            color: #fff;
            overflow-y: auto;
            margin: 6vh auto 0;
            animation: sd-top-show 0.3s ease 1;
            animation-fill-mode: forwards;
            border-radius: 10px;
        }
        .mem_setup_hide {
            animation: sd-top-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        #cross_mark {
            position: absolute;
            top: 1%;
            right: 1%;
            z-index: 2600;
            animation: cross_left_show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        #cross_mark2 {
            position: absolute;
            top: 7%;
            right: 1%;
            z-index: 2600;
            animation: cross_left_show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        #cross_mark3 {
            position: absolute;
            top: 0.1%;
            right: 0.1%;
            z-index: 2600;
            animation: cross_left_show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        #mem_update {
            margin-top: 5%;
            height: 5vh;
            width: 20vw;
        }
        .check_mark {
            position: absolute;
            bottom: 3%;
            right: 3%;
            z-index: 2600;
            cursor: pointer;
            width: 5vh;
        }
        .check_mark:hover {
            transform: scale(1.05);
        }
        .check_mark:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .cross_mark_add {
            position: absolute;
            top: 3%;
            right: 3%;
            z-index: 2600;
            width: 5vh;
        }
        .cross_mark_add_2 {
            float: right;
            width: 5vw;
            color: rgb(169, 65, 65);
        }
        #usual_lovekey {
            width: 18vw;
            font-size: 3vmin;
        }
        #search_key {
            width: 5vh;
            height: 5vh;
        }
        .product_list_background {
            width: 100vw;
            height: 88vh;
            z-index: 2000;
            background-color: rgba(10, 10, 10, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            animation: sd-right-show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .product_list_background_hide {
            animation: sd-right-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .product_list {
            z-index: 2001;
            width: 55vw;
            height: 80vh;
            /*background-color:rgba(142, 142, 142, 0.381);*/
            border-top: 1vmin rgba(232, 219, 99, 0.853) solid;
            border-bottom: 1vmin rgba(232, 219, 99, 0.935) solid;
            background-color: rgba(0, 0, 0, 0.277);
            position: absolute;
            top: 6%;
            left: 45vw;
            overflow-y: auto;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /*
    .product_list_show{
    animation: sd-right-show 0.3s ease 1;
    animation-fill-mode: forwards;
    }
    */
        #product_list_switch {
            width: 12vw;
            display: inline-block
        }
        .switch_flashing {
            animation-name: flashing;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            /*重複*/
        }
        @keyframes flashing {
            0% {
                fill: #ffffff;
            }
            50% {
                fill: #466e00;
            }
            100% {
                fill: #ffffff;
            }
        }
        .product_list_modify {
            animation: fadein2 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .product_list_modify_end {
            animation: fadeout2 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .buttons_product_modify {
            background-color: rgba(150, 150, 150, 0.3);
            border: 3px rgba(253, 95, 46, 0.3) solid;
            border-radius: 20px;
            animation: buttons_product_modify_left_move 0.3s ease 1;
            animation-fill-mode: forwards;
            text-align: center;
            position: absolute;
            z-index: 2300;
            height: 80vh;
            width: 38vw;
        }
        .buttons_product_modify_end {
            background-color: rgba(150, 150, 150, 0);
            border: 3px rgba(253, 95, 46, 0) solid;
            animation: buttons_product_modify_left_moveback 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .product_list_hide {
            animation: sd-right-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        /*--------------------提示視窗--------------------*/
        label {
            padding: 0;
            margin-right: 3px;
            cursor: pointer;
        }
        input[type=radio] {
            display: none;
        }
        input[type=radio]+span {
            display: inline-block;
            background-color: #aaa;
            padding: 3px 6px;
            border: 1px solid gray;
            user-select: none;
            border-radius: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
            font-size: 4vmin;
            /* 防止文字被滑鼠選取反白 */
        }
        input[type=radio]:checked+span {
            color: rgb(69, 69, 69);
            background-color: #D9ECFF;
        }
        #buttons_product_shortcut_block {
            width: 33.33vw;
        }
        input[type=radio]+span:hover {
            transform: scale(1.05);
        }
        input[type=radio]+span:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        /*================ 彈跳式選單 ==============*/
        /*=========================================*/
        /*=================== 0 ===================*/
        /*=========================================*/
        .list-button {
            background-color: rgb(195, 135, 107);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            width: 10vh;
            height: 10vh;
            border: 0;
            padding: 1h;
            cursor: pointer;
            transition: .1s ease-in;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin: 0.3vh auto;
            z-index: 2;
            color: #000;
            font-size: 2vmin;
        }
        .list-button:hover {
            transform: scale(1.05);
        }
        .list-button:active {
            transform: scale(1);
            -webkit-animation: onePulsel .1s forwards linear;
            animation: onePulsel .2s forwards linear;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }
        @-webkit-keyframes onePulsel {
            0% {
                box-shadow: 0 0 0 0 rgba(201, 184, 135, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(201, 184, 135, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(201, 184, 135, 0.2)
            }
        }
        @keyframes onePulsel {
            0% {
                box-shadow: 0 0 0 0 rgba(201, 184, 135, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(201, 184, 135, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(201, 184, 135, 0.2)
            }
        }
        /*================ 彈跳式選單 ==============*/
        /*=========================================*/
        /*=================== 1 ===================*/
        /*=========================================*/
        /*@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");*/
        /*body{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:"Montserrat",sans-serif}*/
        .list-container {
            position: relative
        }
        .list-container.active .more-button-list {
            opacity: 1;
            transform: scale(1)
        }
        .list-container.active .more-button-list-item {
            /*-webkit-animation:fadeInItem .1s .0 forwards;*/
            animation: fadeInItem .3s 1 forwards
        }
        .list-container.active .more-button-list-item:nth-child(1) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .1s
        }
        .list-container.active .more-button-list-item:nth-child(2) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .15s
        }
        .list-container.active .more-button-list-item:nth-child(3) {
            /*-webkit-animation-delay:.2s;*/
            animation-delay: .2s
        }
        .list-container.active .more-button-list-item:nth-child(4) {
            /*-webkit-animation-delay:.3s;*/
            animation-delay: .25s
        }
        .list-container.active .more-button-list-item:nth-child(5) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .3s
        }
        .list-container.active .more-button-list-item:nth-child(6) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .35s
        }
        .list-container.active .more-button-list-item:nth-child(7) {
            /*-webkit-animation-delay:.2s;*/
            animation-delay: .4s
        }
        .list-container.active .more-button-list-item:nth-child(8) {
            /*-webkit-animation-delay:.3s;*/
            animation-delay: .45s
        }
        .list-container.active .more-button {
            -webkit-animation: onePulse .1s forwards linear;
            animation: onePulse .2s forwards linear
        }
        .list-container.active .menu-icon-wrapper {
            transform: rotate(-45deg)
        }
        .list-container.active .menu-icon-line.first {
            transform: rotate(-90deg) translateX(1px)
        }
        .list-container.active .menu-icon-line.last {
            transform: rotate(-90deg) translateX(-1px)
        }
        .more-button {
            background-color: rgba(219, 171, 157, 0.8);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            width: 10vh;
            height: 10vh;
            border: 0;
            cursor: pointer;
            transition: .1s ease-in;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin: 0.3 auto;
            z-index: 2;
        }
        /*.more-button:hover,.more-button:focus{box-shadow:0 0 0 8px rgba(92,103,255,0.3);background-color:#4854ff}*/
        .more-button:focus {
            outline: 0
        }
        .more-button:hover {
            transform: scale(1.05);
        }
        .more-button:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }
        .more-button-list {
            background-color: #fff;
            border-radius: 8px;
            list-style-type: none;
            width: 50vw;
            height: min-content;
            /*box-shadow:0 0 4px 4px rgba(150,157,249,0.16)*/
            padding: 0;
            padding: 6px;
            position: absolute;
            right: 35px;
            bottom: 0;
            opacity: 0;
            transform: scale(0);
            transform-origin: bottom right;
            transition: all .1s ease .0.5s;
        }
        .more-button-list li {
            opacity: 0
        }
        .more-button-list-item {
            display: flex;
            align-items: center;
            padding: 1.5vh;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            transition: .0.1s ease-in;
            transform: translatex(-10px);
        }
        .more-button-list-item:hover {
            color: #1c3991;
        }
        .more-button-list-item:after {
            content: "";
            position: absolute;
            height: 1px;
            width: calc(100% - 24px);
            left: 12px;
            bottom: 0;
            background-color: rgba(132, 160, 244, 0.1);
        }
        .more-button-list-item:last-child:after {
            display: none
        }
        .more-button-list-item svg {
            width: 18px;
            height: 18px;
        }
        .more-button-list-item span {
            display: inline-block;
            line-height: 3min;
            font-size: 3vmin;
            margin-left: 8px
        }
        /*============================*/
        .more-button-list2 {
            background-color: #fff;
            border-radius: 8px;
            list-style-type: none;
            width: 18vw;
            height: 23vh;
            /*box-shadow:0 0 4px 4px rgba(150,157,249,0.16)*/
            ;
            padding: 0;
            padding: 6px;
            position: absolute;
            right: 24px;
            bottom: 0vh;
            opacity: 0;
            transform: scale(0);
            transform-origin: bottom right;
            transition: all .1s ease .0.5s
        }
        .more-button-list2 li {
            opacity: 0
        }
        .more-button-list2-item {
            display: flex;
            align-items: center;
            padding: 1.5vh;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            transition: .0.1s ease-in;
            transform: translatex(-10px)
        }
        .more-button-list2-item:hover {
            color: #1c3991;
        }
        .more-button-list2-item:after {
            content: "";
            position: absolute;
            height: 1px;
            width: calc(100% - 24px);
            left: 12px;
            bottom: 0;
            background-color: rgba(132, 160, 244, 0.1);
        }
        .more-button-list2-item:last-child:after {
            display: none
        }
        .more-button-list2-item svg {
            width: 18px;
            height: 18px
        }
        .more-button-list2-item span {
            display: inline-block;
            line-height: 2vh;
            font-size: 2vh;
            margin-left: 8px
        }
        @-webkit-keyframes onePulse {
            0% {
                box-shadow: 0 0 0 0 rgba(183, 36, 0, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(183, 36, 0, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(183, 36, 0, 0.2)
            }
        }
        @keyframes onePulse {
            0% {
                box-shadow: 0 0 0 0 rgba(183, 36, 0, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(183, 36, 0, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(183, 36, 0, 0.2)
            }
        }
        @-webkit-keyframes fadeInItem {
            100% {
                transform: translatex(0px);
                opacity: 1
            }
        }
        @keyframes fadeInItem {
            100% {
                transform: translatex(0px);
                opacity: 1
            }
        }
        /*
    .socials{position:fixed;bottom:16px;right:16px;display:flex;align-items:center}
    .social-link{color:black;display:flex;align-items:center;cursor:pointer;text-decoration:none;margin-right:12px}
    */
        .menu-icon-wrapper {
            border-radius: 2px;
            width: 20px;
            height: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            transition: transform 100ms ease-out
        }
        .menu-icon-line {
            background-color: black;
            border-radius: 2px;
            width: 100%;
            height: 2px
        }
        .menu-icon-line.half {
            width: 50%
        }
        /*交叉 */
        .menu-icon-line.first {
            transition: transform 200ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
            transform-origin: right
        }
        .menu-icon-line.last {
            align-self: flex-end;
            transition: transform 200ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
            transform-origin: left
        }
        /*=========================================*/
        /*=================== 2 ===================*/
        /*=========================================*/
        /*body{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:"Montserrat",sans-serif}*/
        .list-container2 {
            position: relative
        }
        .list-container2.active .more-button2-list {
            opacity: 1;
            transform: scale(1)
        }
        .list-container2.active .more-button2-list-item {
            animation: fadeInItem .2s 1 forwards
        }
        .list-container2.active .more-button2-list-item:nth-child(1) {
            animation-delay: .1s
        }
        .list-container2.active .more-button2-list-item:nth-child(2) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .2s
        }
        .list-container2.active .more-button2-list-item:nth-child(3) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .3s
        }
        .list-container2.active .more-button2 {
            -webkit-animation: onePulse2 .2s forwards linear;
            animation: onePulse2 .3s forwards linear
        }
        /*.list-container2.active .more-button2{-webkit-animation:onePulse .2s forwards linear;animation:onePulse .2s forwards linear}*/
        .list-container2.active .menu-icon-wrapper {
            transform: rotate(-45deg)
        }
        .list-container2.active .menu-icon-line.first {
            transform: rotate(-90deg) translateX(1px)
        }
        .list-container2.active .menu-icon-line.last {
            transform: rotate(-90deg) translateX(-1px)
        }
        .more-button2 {
            background-color: rgba(201, 184, 135, 0.8);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            width: 10vh;
            height: 10vh;
            border: 0;
            cursor: pointer;
            transition: .1s ease-in;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin: 0.3 auto;
            z-index: 2;
        }
        /*.more-button2:hover,.more-button2:focus{box-shadow:0 0 0 8px rgba(92,103,255,0.3);background-color:#4854ff}*/
        .more-button2:focus {
            outline: 0
        }
        .more-button2:hover {
            transform: scale(1.05);
        }
        .more-button2:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }
        .more-button2-list {
            background-color: #fff;
            border-radius: 8px;
            list-style-type: none;
            width: 50vw;
            height: min-content;
            box-shadow: 0 0 4px 4px rgba(150, 157, 249, 0.16);
            padding: 0;
            padding: 6px;
            position: absolute;
            right: 24px;
            bottom: 0;
            opacity: 0;
            transform: scale(0);
            transform-origin: bottom right;
            transition: all .1s ease .0.5s
        }
        .more-button2-list li {
            opacity: 0
        }
        .more-button2-list-item {
            display: flex;
            align-items: center;
            padding: 1.5vh;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            transition: .0.1s ease-in;
            transform: translatex(-10px)
        }
        .more-button2-list-item:hover {
            color: #1c3991;
        }
        .more-button2-list-item:after {
            content: "";
            position: absolute;
            height: 1px;
            width: calc(100% - 24px);
            left: 12px;
            bottom: 0;
            background-color: rgba(132, 160, 244, 0.1)
        }
        .more-button2-list-item:last-child:after {
            display: none
        }
        .more-button2-list-item svg {
            width: 18px;
            height: 18px
        }
        .more-button2-list-item span {
            display: inline-block;
            line-height: 3min;
            font-size: 3vmin;
            margin-left: 8px
        }
        @-webkit-keyframes onePulse2 {
            0% {
                box-shadow: 0 0 0 0 rgba(80, 86, 143, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(80, 86, 143, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(80, 86, 143, 0.2)
            }
        }
        @keyframes onePulse2 {
            0% {
                box-shadow: 0 0 0 0 rgba(80, 86, 143, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(80, 86, 143, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(80, 86, 143, 0.2)
            }
        }
        /*
    .socials{position:fixed;bottom:16px;right:16px;display:flex;align-items:center}
    .social-link{color:black;display:flex;align-items:center;cursor:pointer;text-decoration:none;margin-right:12px}
    */
        .menu-icon-wrapper {
            border-radius: 2px;
            width: 20px;
            height: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            transition: transform 100ms ease-out
        }
        .menu-icon-line {
            background-color: black;
            border-radius: 2px;
            width: 100%;
            height: 2px
        }
        .menu-icon-line.half {
            width: 50%
        }
        /*交叉 */
        .menu-icon-line.first {
            transition: transform 200ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
            transform-origin: right
        }
        .menu-icon-line.last {
            align-self: flex-end;
            transition: transform 200ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
            transform-origin: left
        }
        /*=========================================*/
        /*=================== 3 ===================*/
        /*=========================================*/
        /*body{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:"Montserrat",sans-serif}*/
        .list-container3 {
            position: relative
        }
        .list-container3.active .more-button3-list {
            opacity: 1;
            transform: scale(1)
        }
        .list-container3.active .more-button3-list-item {
            animation: fadeInItem .3s .9 forwards
        }
        .list-container3.active .more-button3-list-item:nth-child(1) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .1s
        }
        .list-container3.active .more-button3-list-item:nth-child(2) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .2s
        }
        .list-container3.active .more-button3-list-item:nth-child(3) {
            /*-webkit-animation-delay:.2s;*/
            animation-delay: .3s
        }
        .list-container3.active .more-button3-list-item:nth-child(4) {
            /*-webkit-animation-delay:.3s;*/
            animation-delay: .4s
        }
        .list-container3.active .more-button3-list-item:nth-child(5) {
            /*-webkit-animation-delay:.3s;*/
            animation-delay: .5s
        }
        .list-container3.active .more-button3 {
            -webkit-animation: onePulse3 .1s forwards linear;
            animation: onePulse3 .2s forwards linear
        }
        .list-container3.active .menu-icon-wrapper {
            transform: rotate(-45deg)
        }
        .list-container3.active .menu-icon-line.first {
            transform: rotate(-90deg) translateX(1px)
        }
        .list-container3.active .menu-icon-line.last {
            transform: rotate(-90deg) translateX(-1px)
        }
        .more-button3 {
            background-color: rgb(132, 138, 174);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            width: 10vh;
            height: 10vh;
            border: 0;
            cursor: pointer;
            transition: .1s ease-in;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin: 0.3 auto;
            z-index: 2;
        }
        /*.more-button2:hover,.more-button2:focus{box-shadow:0 0 0 8px rgba(92,103,255,0.3);background-color:#4854ff}*/
        .more-button3:focus {
            outline: 0
        }
        .more-button3:hover {
            transform: scale(1.05);
        }
        .more-button3:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }
        .more-button3-list {
            background-color: #fff;
            border-radius: 8px;
            list-style-type: none;
            width: 50vw;
            height: min-content;
            box-shadow: 0 0 4px 4px rgba(150, 157, 249, 0.16);
            padding: 0;
            padding: 6px;
            position: absolute;
            right: 35px;
            bottom: 0;
            opacity: 0;
            transform: scale(0);
            transform-origin: bottom right;
            transition: all .1s ease .0.5s
        }
        .more-button3-list li {
            opacity: 0
        }
        .more-button3-list-item {
            display: flex;
            align-items: center;
            padding: 1.5vh;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            transition: .0.1s ease-in;
            transform: translatex(-10px)
        }
        .more-button3-list-item:hover {
            color: #1c3991;
        }
        .more-button3-list-item:after {
            content: "";
            position: absolute;
            height: 1px;
            width: calc(100% - 24px);
            left: 12px;
            bottom: 0;
            background-color: rgba(132, 160, 244, 0.1)
        }
        .more-button3-list-item:last-child:after {
            display: none
        }
        .more-button3-list-item svg {
            width: 18px;
            height: 18px
        }
        .more-button3-list-item span {
            display: inline-block;
            line-height: 3min;
            font-size: 3vmin;
            margin-left: 8px
        }
        @-webkit-keyframes onePulse3 {
            0% {
                box-shadow: 0 0 0 0 rgba(156, 93, 149, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(156, 93, 149, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(156, 93, 149, 0.2)
            }
        }
        @keyframes onePulse3 {
            0% {
                box-shadow: 0 0 0 0 rgba(156, 93, 149, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(156, 93, 149, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(156, 93, 149, 0.2)
            }
        }
        /*
    .socials{position:fixed;bottom:16px;right:16px;display:flex;align-items:center}
    .social-link{color:black;display:flex;align-items:center;cursor:pointer;text-decoration:none;margin-right:12px}
    */
        .menu-icon-wrapper {
            border-radius: 2px;
            width: 20px;
            height: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            transition: transform 100ms ease-out
        }
        .menu-icon-line {
            background-color: black;
            border-radius: 2px;
            width: 100%;
            height: 2px
        }
        .menu-icon-line.half {
            width: 50%
        }
        /*交叉 */
        .menu-icon-line.first {
            transition: transform 200ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
            transform-origin: right
        }
        .menu-icon-line.last {
            align-self: flex-end;
            transition: transform 200ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
            transform-origin: left
        }
        /*=========================================*/
        /*=================== 4 ===================*/
        /*=========================================*/
        /*body{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;font-family:"Montserrat",sans-serif}*/
        .list-container4 {
            position: relative
        }
        .list-container4.active .more-button4-list {
            opacity: 1;
            transform: scale(1)
        }
        .list-container4.active .more-button4-list-item {
            animation: fadeInItem .3s .9 forwards
        }
        .list-container4.active .more-button4-list-item:nth-child(1) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .1s
        }
        .list-container4.active .more-button4-list-item:nth-child(2) {
            /*-webkit-animation-delay:.1s;*/
            animation-delay: .2s
        }
        .list-container4.active .more-button4-list-item:nth-child(3) {
            /*-webkit-animation-delay:.2s;*/
            animation-delay: .3s
        }
        .list-container4.active .more-button4-list-item:nth-child(4) {
            /*-webkit-animation-delay:.3s;*/
            animation-delay: .4s
        }
        .list-container4.active .more-button4-list-item:nth-child(5) {
            /*-webkit-animation-delay:.3s;*/
            animation-delay: .5s
        }
        .list-container4.active .more-button4 {
            -webkit-animation: onePulse3 .1s forwards linear;
            animation: onePulse3 .2s forwards linear
        }
        .list-container4.active .menu-icon-wrapper {
            transform: rotate(-45deg)
        }
        .list-container4.active .menu-icon-line.first {
            transform: rotate(-90deg) translateX(1px)
        }
        .list-container4.active .menu-icon-line.last {
            transform: rotate(-90deg) translateX(-1px)
        }
        .more-button4 {
            background-color: rgb(149, 153, 176);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            width: 10vh;
            height: 10vh;
            border: 0;
            padding: 1px;
            cursor: pointer;
            transition: .1s ease-in;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin: 0.3 auto;
            z-index: 2
        }
        /*.more-button2:hover,.more-button2:focus{box-shadow:0 0 0 8px rgba(92,103,255,0.3);background-color:#4854ff}*/
        .more-button4:focus {
            outline: 0
        }
        .more-button4:hover {
            transform: scale(1.05);
        }
        .more-button4:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }
        .more-button4-list {
            background-color: #fff;
            border-radius: 8px;
            list-style-type: none;
            width: 50vw;
            height: min-content;
            box-shadow: 0 0 4px 4px rgba(150, 157, 249, 0.16);
            padding: 0;
            padding: 6px;
            position: absolute;
            right: 24px;
            bottom: 0;
            opacity: 0;
            transform: scale(0);
            transform-origin: bottom right;
            transition: all .1s ease .0.5s
        }
        .more-button4-list li {
            opacity: 0
        }
        .more-button4-list-item {
            display: flex;
            align-items: center;
            padding: 1.5vh;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            transition: .0.1s ease-in;
            transform: translatex(-10px)
        }
        .more-button4-list-item:hover {
            color: #1c3991;
        }
        .more-button4-list-item:after {
            content: "";
            position: absolute;
            height: 1px;
            width: calc(100% - 24px);
            left: 12px;
            bottom: 0;
            background-color: rgba(132, 160, 244, 0.1)
        }
        .more-button4-list-item:last-child:after {
            display: none
        }
        .more-button4-list-item svg {
            width: 18px;
            height: 18px
        }
        .more-button4-list-item span {
            display: inline-block;
            line-height: 3min;
            font-size: 3vmin;
            margin-left: 8px
        }
        @-webkit-keyframes onePulse4 {
            0% {
                box-shadow: 0 0 0 0 rgba(77, 130, 53, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(77, 130, 53, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(77, 130, 53, 0.2)
            }
        }
        @keyframes onePulse4 {
            0% {
                box-shadow: 0 0 0 0 rgba(77, 130, 53, 0.2)
            }
            50% {
                box-shadow: 0 0 0 12px rgba(77, 130, 53, 0.3)
            }
            100% {
                box-shadow: 0 0 0 4px rgba(77, 130, 53, 0.2)
            }
        }
        /*
    .socials{position:fixed;bottom:16px;right:16px;display:flex;align-items:center}
    .social-link{color:black;display:flex;align-items:center;cursor:pointer;text-decoration:none;margin-right:12px}
    */
        .menu-icon-wrapper {
            border-radius: 2px;
            width: 20px;
            height: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            transition: transform 100ms ease-out
        }
        .menu-icon-line {
            background-color: black;
            border-radius: 2px;
            width: 100%;
            height: 2px
        }
        .menu-icon-line.half {
            width: 50%
        }
        /*交叉 */
        .menu-icon-line.first {
            transition: transform 200ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
            transform-origin: right
        }
        .menu-icon-line.last {
            align-self: flex-end;
            transition: transform 200ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
            transform-origin: left
        }
        .add_to_list {
            position: absolute;
            top: 8vh;
            right: 4%;
            font-size: 3vmin;
            text-align: center;
            width: 10vh;
            height: 10vh;
            /*background: -webkit-linear-gradient(top left, rgba(255, 101, 50, 1), rgba(0, 0, 0, 0.5));*/
            background-color: rgb(221, 196, 199);
            border-radius: 2vw;
            border: 3px rgb(102, 96, 97) double;
            cursor: pointer;
            transition: .1s;
            color: #000;
        }
        .add_to_list:active {
            box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .add_to_list:hover {
            transform: scale(1.05);
        }
        .pictogram_een {
            fill: #F4D6B0;
        }
        .pictogram_vijf {
            fill: #01A59C;
        }
        .pictogram_zes {
            fill: #01A59C;
        }
        .st0 {
            fill: #F8AD89;
        }
        .st1 {
            fill: #E54D2E;
        }
        .st2 {
            fill: #F27261;
        }
        .st3 {
            fill: none;
        }
        .st4 {
            clip-path: url(#SVGID_2_);
            fill: #F27261;
        }
        .st5 {
            clip-path: url(#SVGID_2_);
            fill: none;
        }
        .st6 {
            clip-path: url(#SVGID_6_);
            fill: #F4D6B0;
        }
        .st7 {
            clip-path: url(#SVGID_8_);
            fill: #F27261;
        }
        .st8 {
            clip-path: url(#SVGID_8_);
            fill: none;
        }
        .st9 {
            clip-path: url(#SVGID_10_);
            fill: #F27261;
        }
        .st10 {
            clip-path: url(#SVGID_10_);
            fill: none;
        }
        .st11 {
            fill: #F4D6B0;
        }
        /*===============================================================*/
        /*==========================圈圈動畫==============================*/
        /*===============================================================*/
        /*@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');*/
        #circle {
            position: relative;
            height: 25vh;
            width: 25vh;
            display: inline-block;
            border: 2vmin solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            border-left-color: #5cb85c;
            animation: rotate 1.2s linear infinite;
            z-index: 2600;
        }
        @keyframes rotate {
            50% {
                border-left-color: #9b59b6;
                -moz-box-shadow: 4px 4px 12px 4px rgba(243, 16, 243, 0.5);
                -webkit-box-shadow: 4px 4px 12px 4px rgba(243, 16, 243, 0.5);
                box-shadow: 4px 4px 12px 4px rgba(243, 16, 243, 0.5);
            }
            75% {
                border-left-color: #e67e22;
                -moz-box-shadow: 4px 4px 12px 4px rgba(255, 133, 20, 0.5);
                -webkit-box-shadow: 4px 4px 12px 4px rgba(255, 133, 20, 0.5);
                box-shadow: 4px 4px 12px 4px rgba(255, 133, 20, 0.5);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        #circle .check-icon {
            display: none;
        }
        #circle .check-icon:after {
            position: absolute;
            content: "";
            top: 50%;
            left: 20%;
            transform: translate(-50%, -50%);
            transform: scaleX(-1) rotate(135deg);
            height: 10vh;
            width: 6vh;
            border-top: 2vmin solid #5cb85c;
            border-right: 2vmin solid #5cb85c;
            transform-origin: left top;
            animation: check-icon 0.8s ease;
            z-index: 2600;
        }
        @keyframes check-icon {
            0% {
                height: 0;
                width: 0;
                opacity: 1;
            }
            20% {
                height: 0;
                width: 6vh;
                opacity: 1;
            }
            40% {
                height: 10vh;
                width: 6vh;
                opacity: 1;
            }
            100% {
                height: 10vh;
                width: 6vh;
                opacity: 1;
            }
        }
        .suc {
            display: none;
        }
        .suc:checked~#circle .check-icon {
            display: block;
        }
        .suc:checked~#circle {
            animation: none;
            border-color: #5cb85c;
            transition: border 0.5s ease-out;
        }
        .input_product_tax_type_flicker {
            border: 2px solid red;
            border-top-left-radius: 2vw;
            border-top-right-radius: 2vw;
            border-bottom-right-radius: 2vw;
            border-bottom-left-radius: 2vw;
            animation: flicker 3s ease 1;
        }
        #final_msg {
            position: relative;
            bottom: 100%;
            right: 2.5%;
            width: 50%;
            height: 65%;
            padding: 1vw;
            background-color: #FFF;
            border-bottom: none;
            margin: auto;
            animation: sd-bottom-show-typing 2s 1;
            animation-fill-mode: forwards;
            font-family: Consolas, Monaco;
            word-break: break-all;
            overflow: hidden;
            color: #000;
        }
        #final_msg_frame {
            position: absolute;
            margin: auto;
            bottom: 0%;
            left: 21%;
            width: 53%;
            height: 10%;
            border-bottom: 9vmin #000 solid;
            border-top: 0.5vmin #000 solid;
            border-right: 3vmin #000 solid;
            border-left: 3vmin #000 solid;
            border-top-left-radius: 6vw;
            border-top-right-radius: 6vw;
            overflow: hidden;
            animation: sd-bottom-show-typing2 0.5s 1;
            animation-fill-mode: forwards;
        }
        .typing {
            /* animation: typing 3.5s steps(37, end), blink-caret .75s step-end infinite;*/
            animation: sd-bottom-show-typing 2s;
            animation-fill-mode: forwards;
            font-family: Consolas, Monaco;
            word-break: break-all;
            overflow: hidden;
            color: #000;
        }
        .typing2 {
            animation: sd-bottom-show-typing2 0.5 1 alternate forwards;
            ;
            /* animation-fill-mode: forwards;*/
        }
        /* 列印效果 */
        @keyframes typing {
            0% {
                height: 0vh;
            }
            100% {
                height: 40vh;
            }
        }
        /* 游標閃啊閃 */
        @keyframes blink-caret {
            0%,
            100% {
                border-color: transparent;
            }
            50% {
                border-color: currentColor;
            }
        }
        @keyframes sd-bottom-show-typing {
            0% {
                opacity: 0;
                top: 100%;
            }
            30% {
                opacity: 0;
                top: 100%;
            }
            100% {
                opacity: 1;
                top: 25%;
            }
        }
        @keyframes sd-bottom-show-typing2 {
            0% {
                opacity: 0;
                bottom: -15%;
            }
            100% {
                opacity: 1;
            }
        }
        .final_text_l {
            font-size: 3vmin;
        }
        .final_text_s {
            font-size: 2.5vmin;
        }
        #question_mark_show {
            width: 5vw;
            position: absolute;
            right: 1%;
            top: 0.5%;
            animation: question_mark 2s;
            animation-fill-mode: forwards;
        }
        .question_mark {
            width: 10vw;
        }
        @keyframes question_mark {
            0% {
                opacity: 0.3;
                right: 5%;
                transform: rotate(0deg);
            }
            50% {
                opacity: 1;
                right: 70%;
            }
            100% {
                opacity: 1;
                right: 4%;
                transform: rotate(359deg);
            }
        }
        #fingers_img {
            position: absolute;
            right: 3%;
            top: 50%;
            animation: fingers 4s;
            animation-fill-mode: forwards;
            animation-iteration-count: 2;
            height: 30%;
            z-index: 3000;
        }
        @keyframes fingers {
            0% {
                height: 30%;
                opacity: 0;
                right: 5%;
            }
            5% {
                height: 30%;
                opacity: 1;
                right: 5%;
            }
            10% {
                height: 30%;
                opacity: 1;
                right: 5%;
            }
            15% {
                height: 15%;
                opacity: 1;
                right: 5%;
            }
            50% {
                height: 15%;
                opacity: 1;
                right: 5%;
            }
            80% {
                opacity: 1;
                right: 70%;
                height: 15%;
            }
            90% {
                height: 30%;
                opacity: 1;
                right: 70%;
            }
            100% {
                height: 30%;
                opacity: 0;
                right: 70%;
            }
        }
        .bill_btn {
            width: 47%;
        }
        .invoice_lovekey_btn {
            width: 80%;

            text-align: center;
            background-color: #aaa;
            line-height: 230%;
            border: 1px gray solid;
            cursor: pointer;
            color: #000;
            border-radius: 10px;
            margin: 0 auto;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
        }
        .invoice_lovekey_btn:hover {
            transform: scale(1.05);
        }
        .invoice_lovekey_btn:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .invoice_lovekey_btn_check {
            background-color: #D9ECFF;
            color: rgb(0, 0, 0);
        }
        .restart {
            width: 80%;
            text-align: center;
            height: 70%;
            background-color: rgba(124, 196, 93, 0.614);
            border: 1px rgba(128, 128, 128, 0.406) solid;
            cursor: pointer;
            color: #000;
            border-radius: 10px;
            margin: 3% auto;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
        }
        .restart:hover {
            transform: scale(1.05);
        }
        .restart:active {
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .restart:active {
            -webkit-animation: onePulse2 .1s forwards linear;
            animation: onePulse2 .3s forwards linear
        }
        .restart_circle {
            fill: #324A5E;
            cursor: pointer;
        }
        .restart:hover .restart_circle {
            fill: #427fc7;
        }
        .bill_show {
            height: 100%;
        }
        /*在父元素加上，使其內div置中*/
        .put_center {
            display: flex;
            justify-content: center;
            /*主軸對齊方式：居中*/
            align-items: center;
            /*次軸對齊方式：居中*/
        }
        #alert_msg_success {
            text-align: center;
            height: 20vh;
            width: 100vw;
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        @keyframes keyboard-right-bottom-show {
            0% {
                opacity: 0;
                transform: scale(0) translate(-600%, 0%);
            }
            50% {
                opacity: 0.1;
                transform: scale(0.2) translate(100%, -67%);
            }
            100% {
                opacity: 1;
                transform: scale(1) translate(0%, 0%);
            }
        }
        @keyframes keyboard-right-bottom-hide {
            0% {
                opacity: 1;
                transform: scale(1) translate(0%, 0%);
            }
            50% {
                opacity: 0.3;
                transform: scale(0.3) translate(100%, 0%);
            }
            100% {
                opacity: 0.1;
                transform: scale(0.1) translate(-600%, 0%);
            }
        }
        .keyboardBox {
            width: 100vw;
            margin: 0;
            background-color: rgba(48, 48, 48, 0.9);
            font-size: 5vmin;
            position: absolute;
            right: 0;
            bottom: 30%;
            z-index: 2600;
            animation: keyboard-right-bottom-show 0.5s ease 1;
            animation-fill-mode: forwards;
        }
        .uniform_keyboardBox {
            width: 50vw;
            margin: 0;
            background-color: rgba(48, 48, 48, 0.9);
            font-size: 6vmin;
            position: absolute;
            right: 0%;
            bottom: 8%;
            z-index: 2600;
            animation: keyboard-right-bottom-show 0.5s ease 1;
            animation-fill-mode: forwards;
        }
        .keyboardBox_hide {
            animation: keyboard-right-bottom-hide 0.5s ease 1;
            animation-fill-mode: forwards;
        }
        .line {
            position: relative;
            line-height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .keys {
            box-sizing: border-box;
            width: 6vh;
            height: 6vh;
            line-height: 6vh;
            margin: 0 0 3px 3px;
            border-radius: 4px;
            border: 1px solid #333;
            text-align: center;
            cursor: pointer;
            background-color: #fff;
        }
        .keys:hover,
        .Backspace:hover {
            box-shadow: 0px 0px 3px #333 inset;
        }
        .keys:active,
        .Backspace:active {
            background-color: #dedede;
        }
        .zero_keys {
            width: 12.3vh;
            height: 6vh;
            box-sizing: border-box;
            float: left;
            line-height: 6vh;
            margin: 0 0 3px 3px;
            border-radius: 4px;
            border: 1px solid #333;
            text-align: center;
            cursor: pointer;
            background-color: #fff;
        }
        .Backspace {
            width: 10vh;
            height: 6vh;
            box-sizing: border-box;
            float: left;
            line-height: 6vh;
            margin: 0 0 3px 3px;
            border-radius: 4px;
            border: 1px solid #333;
            text-align: center;
            cursor: pointer;
            background-color: #fff;
        }
        #pc_target {
            display: none;
        }
        .total_msg_mobile {
            font-size: 4vmin;
            width: 100%;
            color: white;
            height: 100%;
        }
        .font_adjust {
            background-color: #555252;
        }
        #final_background {
            background-color: rgba(0%, 0%, 0%, 0);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1000;
            width: 100vw;
            height: 88vh;
        }
        #discount_show_price {
            color: red;
            margin-left: 1vw;
            font-size: 2vmin;
            height: 2vh;
            width: 5vw;
            border-style: none;
            background-color: #d3d3d3;
        }
        #Layer_2 {
            cursor: pointer;
            height: 8vh;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            transition: .1s;
            border-radius: 50%;
        }
        #Layer_2:hover {
            transform: scale(1.05);
        }
        #Layer_2:active {
            /*box-shadow: none;*/
            transform: scale(1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        .total {
            width: 98%;
            height: 49vh;
            background-color: white;
            overflow: overlay;
            text-align: left;
            position: relative;
            top: 5%;
            left: 1%;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 10px;
        }
        .total_discount_area {
            position: relative;
            top: 5%;
            left: 1%;
            width: 98%;
            background-color: #ffffff;
            border: 1px solide gray;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            height: 9vh;
            margin-top: 1vh;
            animation: fadein 0.2s ease 1;
            animation-fill-mode: forwards;
            display: flex;
            /* 彈性排版 */
            flex-direction: column;
            /* 彈性方向:列(縱) */
            justify-content: center;
            /* 版面內容:中間 */
        }
        .total_discount_area_hide {
            animation: fadeout 0.2s ease 1;
            animation-fill-mode: forwards;
        }
        .total_discount_area_I {
            position: relative;
            width: 100%;
            background-color: #ffffff;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            height: 7vh;
            margin-top: 1vh;
            color: #000;
            animation: fadein 0.2s ease 1;
            animation-fill-mode: forwards;
            display: flex;
            /* 彈性排版 */
            flex-direction: column;
            /* 彈性方向:列(縱) */
            justify-content: center;
            /* 版面內容:中間 */
        }
        #total_I_block {
            position: relative;
        }
        #total_I {
            height: 38vh;
            width: 100%;
            background-color: white;
            overflow: overlay;
            text-align: left;
            color: #000;
            border-radius: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        #total_I.enlarge {
            transform: scale(2.0);
            opacity: 0.3;
        }
        #enlarge_mark {
            height: 3vh;
            width: 3vh;
            background-color: rgb(255, 255, 255, 0);
            position: absolute;
            bottom: 1%;
            right: 1%;
            border: 1px solid transparent;
            transform: scale(1.05);
        }
        .total_fun {
            height: 27vh;
            position: relative;
            top: 5%;
            width: 98%;
            left: 1%
        }
        .bill_print {
            color: rgb(0, 0, 0);
    
            white-space: nowrap;
        }
        #print_details_block{
            display: flex;
            align-items: center;
        }
        .bill_set_content {
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            background-color: rgba(255, 255, 255, 0.862);
            border-radius: 10px;
            position: absolute;
            bottom: 1%;
            height: 63%;
            width: 100%;
        }
        #user_msg {
            height: 8vmin;
            width: 45vw;
            color: aliceblue;
            text-align: left;
            font-size: 3vmin;
        }
        .svg_size_controller_list {
            margin-bottom: 2vh;
            width: 8vmin;
            height: 8vmin;
        }
        .svg_size_controller {
            width: 8vmin;
            height: 8vmin;
        }
        .svg_size_controller_set {
            font-size: 8vmin;
            color: #000;
            margin-bottom: 1vh
        }
        .tax_type_show {
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            border-radius: 2px;
            text-align: center;
        }
        .amount_show {
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            border-radius: 2px;
            text-align: center;
            position: absolute;
            /* ★ */
            top: 50%;
            /* ★ */
            transform: translateY(-50%);
            /* ★ */
            height: 45%;
            width: 100%;
        }
        .total_show {
            background-color: rgba(255, 87, 87, 0.481);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            border-radius: 2px;
            text-align: center;
            position: absolute;
            bottom: 0%;
            width: 100%;
        }
        .mobile_total_background {
            width: 100%;
            height: 88vh;
            z-index: 1000;
            background-color: rgb(167, 181, 194);
            position: fixed;
            top: 0;
            left: 0;
            animation: total-left-show 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        .mobile_total_background_hide {
            animation: sd-left-hide 0.3s ease 1;
            animation-fill-mode: forwards;
        }
        @keyframes total-left-show {
            0% {
                opacity: 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }
        .mobile_total_price_show {
            margin: 1% auto;
            display: flex;
            width: 100%;
            height: 9vh;
            justify-content: space-around;
            align-items: center;
        }
        .tax_type_show_I {
            white-space: nowrap;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            display: flex;
            align-items: center;
            border-radius: 5px;
            text-align: center;
            height: 100%;
            width: 32%;
        }
        .amount_show_I {
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            border-radius: 5px;
            text-align: left;
            height: 100%;
            width: 32%;
            display: flex;
            align-items: center;
            Flex-direction: column;
            justify-content: center;
        }
        .total_show_I {
            background-color: rgba(255, 87, 87, 0.481);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            /*防止被反白*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            border-radius: 5px;
            display: flex;
            align-items: center;
            text-align: center;
            height: 100%;
            width: 32%;
            white-space: nowrap;
        }
        .uniform_carrier_type {
            width: 95%;
            text-align: center;
            height: 3vh;
            margin-bottom: 3px;
        }
        .uniform_carrier_type:focus {
            border: 2px rgba(255, 30, 0, 0.574) solid;
            background-color: rgba(255, 120, 120, 0.306);
        }
        .bill_set_content_block_1{
            position:absolute;
            transform: translateY(-50%);
            top:30%;
            width:100%;
            text-align: center;padding-top: 3%;
        }
        .bill_set_content_block_2{
            position:absolute;
            bottom:1%;
            width:100%;
            display: flex;
            flex-direction: column;
            height:45%;
            align-items: center;
            justify-content: end;
        }
        #mobile_block {
            margin-top: 0vh;
        }
        #lovekey_area {
            text-align: center;
        }
        .discount_type {
            width: 14vw;
            font-size: 4vmin;
        }
        .discount_type_div {
            width: 40vw;
            text-align: center;
            margin: 1vh auto;
        }
        .discount_type_msg {
            font-size: 2.5vmin;
            color: firebrick
        }
        .calculator {
            position: absolute;
            z-index: 2000;
            animation: calculator-show 0.1s ease 1;
            animation-fill-mode: forwards;
            left: 0vw;
            bottom: 12vh;
        }
        .calculator_hide {
            animation: calculator-hide 0.1s ease 1;
            animation-fill-mode: forwards;
        }
        @keyframes calculator-show {
            from {
                transform: scale(0);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
        @keyframes calculator-hide {
            from {
                left: 0vw;
                transform: scale(1);
                opacity: 1;
            }
            to {
                transform: scale(0);
                opacity: 0;
            }
        }
        .calculator_inside {
            margin: 0 auto;
            padding: 4vh 1vw 1vh;
            width: 100vw;
            height: 70vh;
            background-color: #1d2d4e;
            border-radius: 10px
        }
        .jelly {
            animation: jelly-bounce 1.4s infinite ease-in-out;
        }
        .jump {
            animation: jump 1.4s infinite ease-in-out;
        }
        .check_einvoice {
            animation: jelly-bounce 1.4s infinite ease-in-out;
            width: 4vw;
        }

        @keyframes jump {
            0% {
                transform: translateY(-30%);
                fill: #000000;
            }
            45% {
                transform: translateY(0%);
                fill: #9c3e3d;
            }
            100% {
                transform: translateY(-30%);
                fill: #000000;
            }
        }
        @keyframes jelly-bounce {
            0% {
                transform: scale( 1);
            }
            50% {
                transform: scale( 1.2, 0.8)
            }
            70% {
                transform: scale( 0.85, 1.15)
            }
            80% {
                transform: scale( 1.05, 0.95)
            }
            90% {
                transform: scale( 0.98, 1.02)
            }
            100% {
                transform: scale( 1)
            }
        }
        .svg_recycle {
            width: 8%;
            cursor: pointer;
            flex-shrink: 0;
            /*確保flex子元素不被壓縮 */
            margin-right: 7%;
        }
        .svg_recycle_move {
            animation: row_svg 1s linear infinite;
        }
        @keyframes row_svg {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(-360deg);
            }
        }
        .svg_recycle_check {
            width: 10%;
            cursor: pointer;
            flex-shrink: 0;
            /*確保flex子元素不被壓縮 */
            margin-right: 7%;
            animation: check_shakeing 2s linear infinite;
        }
        @keyframes check_shakeing {
            0% {
                transform: skewY(-15deg);
            }
            2.5% {
                transform: skewY(15deg);
            }
            5% {
                transform: skewY(-15deg);
            }
            7.5% {
                transform: skewY(15deg);
            }
            10% {
                transform: skewY(0deg);
            }
            50% {
                transform: skewY(0deg);
            }
        }
        .svg_recycle_fail {
            width: 10%;
            cursor: pointer;
            flex-shrink: 0;
            /*確保flex子元素不被壓縮 */
            margin-right: 7%;
            animation: fail_shakeing 2s linear infinite;
        }
        @keyframes fail_shakeing {
            0% {
                transform: translateX(0)
            }
            2.5% {
                transform: translateX(2px)
            }
            5% {
                transform: translateX(-2px)
            }
            7.5% {
                transform: translateX(2px)
            }
            10% {
                transform: translateX(0)
            }
        }
        .eye_svg_closs {
            width: 10%;
            cursor: pointer;
            flex-shrink: 0;
            /*確保flex子元素不被壓縮 */
            margin-right: 7%;
        }
        .eye_svg_open {
            width: 10%;
            cursor: pointer;
            flex-shrink: 0;
            margin-right: 7%;
        }
        .edit_mem_info {
            margin: 1vh auto;
            white-space: nowrap;
            border: 3px gray solid;
            background-color: #FFF;
            width: 60%
        }
        .mobile_bar {
            position: fixed;
            bottom: 0vh;
            left: 0;
            width: 100vw;
            height: 12vh;
            display: flex;
            justify-content: space-around;
            background-color: #324B59;
            align-items: center;
            color: #FFF
        }
        .bar_choose {
            transform: scale( 1.5);
            color: rgb(242, 206, 133);
        }
        #home_bar {
            text-align: center;
        }
        #enlarge_mark_bar {
            text-align: center;
        }
        #calculator_bar {
            text-align: center;
        }
        @keyframes version_info_show {
            from {
                left: calc(var(--mouse-x, 0) * 100%);
                top: calc(var(--mouse-y, 0) * 100%);
                width: 1%;
                height: 1%;
                opacity: 0;
            }
            to {
                left: 0;
                top: 0;
                opacity: 1;
            }
        }
        @keyframes version_info_hide {
            from {
                left: 0vw;
                top: 0vh;
                opacity: 1;
            }
            to {
                left: calc(var(--mouse-x, 0) * 100%);
                top: calc(var(--mouse-y, 0) * 100%);
                width: 1%;
                height: 1%;
                opacity: 0;
            }
        }
        .version_info_background {
            width: 100vw;
            height: 88vh;
            z-index: 2000;
            background-color: rgba(10, 10, 10, 0.5);
            position: absolute;
            top: 0;
            left: 0;
        }
        .version_info {
            width: 98vw;
            height: 82vh;
            /*background-color:rgba(142, 142, 142, 0.381);*/
            /*border-top: 1vmin rgba(232, 219, 99, 0.853) solid;*/
            margin: 6vh auto 0;
            background-color: rgb(214, 213, 213);
            overflow-y: auto;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 2%;
        }
        .write {
            position: absolute;
            width: min-content;
            cursor: pointer;
            bottom: 3%;
            right: 5%;
            text-align: center;
        }
        @keyframes pencil {
            0% {
                transform: scale( 1, 1)translateY(0);
            }
            20% {
                transform: translateY(-50px)
            }
            25% {
                transform: scale( 1.2, 0.8)
            }
            50% {
                transform: scale( 1, 1)translateY(0);
            }
            55% {
                transform: scale( 1, 1)translateY(0)rotate(-10deg);
            }
            60% {
                transform: scale( 1, 1)translateY(0)rotate(15deg);
            }
            65% {
                transform: scale( 1, 1)translateY(0)rotate(-15deg);
            }
            70% {
                transform: scale( 1, 1)translateY(0)rotate(5deg);
            }
            75% {
                transform: scale( 1, 1)translateY(0)rotate(-10deg);
            }
            80% {
                transform: scale( 1, 1)translateY(0)rotate(5deg);
            }
            85% {
                transform: scale( 1, 1)translateY(0)rotate(-20deg);
            }
            90% {
                transform: scale( 1, 1)translateY(0)rotate(20deg);
            }
            95% {
                transform: scale( 1, 1)translateY(0)rotate(-10deg);
            }
            100% {
                transform: scale( 1, 1)translateY(0)rotate(0deg);
            }
        }
        .pencil {
            animation: pencil 2s infinite ease forwards;
            width: 16vmin;
        }
        @keyframes pencil_text {
            0% {
                opacity: 0;
            }
            55% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        .pencil_text {
            animation: pencil_text 2s infinite forwards;
            font-size: 6vmin;
            white-space: nowrap;
        }
        .info {
            border: 5px rgb(128, 128, 128) solid;
            overflow-y: scroll;
            height: 50vh;
            border-radius: 4px;
            padding: 2%;
        }
        .cross_mark_info {
            position: absolute;
            top: 7%;
            right: 1%;
            z-index: 2600;
            width: 3vh;
            cursor: pointer;
        }
        .cross_mark_camera {
            position: absolute;
            top: 0%;
            right: 0%;
            z-index: 2800;
            width: 3vh;
            cursor: pointer;
        }
        .bee {
            animation: flying 4s infinite ease forwards;
            width: 14vmin;
            height: 14vmin;
        }
        @keyframes flying {
            0% {
                transform: translateY(-20px)
            }
            25% {
                transform: translateY(0)
            }
            50% {
                transform: translateY(-20px)
            }
            75% {
                transform: translateY(0)
            }
            100% {
                transform: translateY(-20px)
            }
        }
        .bee_block {
            position: absolute;
            width: min-content;
            cursor: pointer;
            bottom: 3%;
            left: 5%;
        }
        .bee_text {
            font-size: 6vmin;
            white-space: nowrap;
        }
        #notification-box {
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 2px 2px 10px #ddd;
            width: max-content;
            height: max-content;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 2700;
            transform: translate(-50%, -50%);
            padding: 5%;
        }
        #notification-message {
            font-size: 7vmin;
            text-align: left;
            padding: 10px;
            color: #000;
        }
        #confirm-button {
            background-color: green;
            color: #fff;
            width: 16vmin;
            height: 8vmin;
            border-radius: 5px;
            border: none;
            margin-bottom: 50px;
            cursor: pointer;
        }
        #code_camera_btn {
            position: absolute;
            right: 1%;
            top: 0%;
            width: 8vmin;
            cursor: pointer;
        }
        @keyframes camera_open {
            0% {
                opacity: 0;
                transform: scale (0);
            }
            100% {
                transform: scale(1);
            }
        }
        #canvanCode {
            position: absolute;
            z-index: 2600;
            top: 20vh;
            left: 10vw;
            animation: camera_open 1s forwards;
            width: 80vw;
            padding: 3%;
            background-color: #D6DDD0;
            border-radius: 10px;
            box-shadow: 2px 2px 10px #324B59;
        }
        #lovekey_area {
            text-align: center;
        }
        #invoice_show_bg {
            width: 100vw;
            height: 100vh;
            position: absolute;
            top: 0%;
            left: 0%;
            background-color: rgba(10, 10, 10, 0);
            z-index: 2000;
            animation: showup 0.3s forwards;
        }
        .invoice_show {
            width: 98vw;
            height: 96vh;
            position: absolute;
            top: 2vh;
            left: 1vw;
            background-color: #e5e5e5;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 1px 2px 20px rgba(0, 0, 0, 1);
            z-index: 2500;
        }
        .ca_block {
            border-radius: 10px;
            position: absolute;
            top: 2vh;
            left: 1vw;
            width: 98vw;
            height: 86vh;
            text-align: center;
            background-color: #c7cac0;
            padding: 10px;
            box-shadow: 1px 1px 10px #000000;
            z-index: 2001;
        }
        .ca_move_first {
            top: 10vh;
            z-index: 2600;
            height: 86vh;
        }
        .ca_move {
            animation: ca 0.5s forwards;
        }
        @keyframes ca {
            0% {
                top: 2vh;
                left: 1vw;
                z-index: 2100;
                height: 96vh;
                scale: 1;
            }
            50% {
                left: 50vw;
                scale: 0.5;
                z-index: 2600;
            }
            100% {
                top: 10vh;
                left: 1vw;
                z-index: 2600;
                height: 86vh;
                scale: 1;
            }
        }
        .ca_back {
            animation: ca2 0.5s forwards;
        }
        @keyframes ca2 {
            0% {
                top: 10vh;
                left: 1vw;
                z-index: 2600;
                height: 86vh;
            }
            50% {
                left: 0vw;
                z-index: 2100;
            }
            100% {
                top: 2vh;
                left: 1vw;
                z-index: 2100;
                height: 96vh;
            }
        }
        .reason_block {
            position: absolute;
            top: 40%;
            left: 35%;
            z-index: 2800;
            width: 30%;
            height: max-content;
            text-align: center;
            background-color: rgb(255, 255, 255);
            padding: 20px;
            border: 1px gray solid;
            box-shadow: 1px 1px 10px #000000;
            border-radius: 10px;
        }
        #invoice_cross_mark {
            position: absolute;
            top: 1%;
            right: 1%;
            z-index: 2700;
            cursor: pointer;
        }
        #searcher {
            width: 80%;
            height: 12%;
            border-radius: 10px;
            border: 2px solid #5e5e5e;
            background-color: #98AFBA;
            margin: 0 auto;
        }
        .searcher_hide {
            animation: searcher_hide 0.5s forwards;
        }
        @keyframes searcher_hide {
            0% {
                transform: scaleY(1);
            }
            100% {
                transform: scaleY(0);
            }
        }
        .invoice_block {
            margin: 1% auto;
            border: 1px solid #000;
            background-color: #fff;
            width: 33.2vmin;
            height: 53vmin;
            border-radius: 3px;
            padding: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .invoice_block_small {
            margin: 1% auto;
            border: 1px solid #000;
            background-color: #fff;
            width: 33.2vmin;
            height: 53vmin;
            border-radius: 3px;
            padding: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            transform: scale(0.5);
            transform-origin: top left;
        }
        .show_block_enlarge {
            transform: scale(7.0);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2900;
        }
        .invoice_block_final {
            margin: 8% auto;
            border: 1px solid rgba(0, 0, 0, 0.178);
            background-color: #fff;
            width: 36.48vmin;
            height: 57.66vmin;
            border-radius: 3px;
            padding: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .ca_btn {
            width: max-content;
            cursor: pointer;
            border-radius: 5px;
            margin: 5%;
            padding: 1%;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border: 1px #FFF double;
            transition: .1s;
        }
        .ca_btn:hover {
            transform: scale(1.05);
        }
        .info_in {
            width: fit-content;
            cursor: pointer;
            border-radius: 5px;
            padding: 1%;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border: 1px #FFF double;
            transition: .1s;
            background-color: #ff7e5e;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .info_in:hover {
            transform: scale(1.05);
        }
        .cancel_btn {
            border: 1px gray solid;
            width: max-content;
            margin: 1% auto;
            cursor: pointer;
            border-radius: 5px;
            padding: 2%;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border: 1px #FFF double;
            transition: .1s;
        }
        .cancel_btn:hover {
            transform: scale(1.05);
        }
        .i_title {
            width: 90%;
            min-height: 3%;
            margin: 1% auto 0;
            background-color: #C0C7C0;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            box-shadow: 2px -3px 10px #ddd;
            flex-shrink: 0;
            /*確保flex子元素不被壓縮 */
        }
        .a_title {
            width: 90%;
            min-height: 3%;
            margin: 1% auto 0;
            background-color: #b2c9c9;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            box-shadow: 2px -3px 10px #ddd;
            flex-shrink: 0;
            /*確保flex子元素不被壓縮 */
        }
        .i_invoice_all {
            width: 90%;
            height: 90%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            background-color: #C0C7C0;
            box-shadow: 2px 8px 10px #ddd;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            overflow: scroll;
        }
        .a_invoice_all {
            width: 90%;
            height: 90%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            background-color: #b2c9c9;
            box-shadow: 2px 8px 10px #ddd;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            overflow: scroll;
        }
        .i_invoice_all_small {
            animation: i_invoice_all_small 0.5s forwards;
        }
        @keyframes i_invoice_all_small {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(.6);
            }
        }
        .i_invoice_left {
            width: 100%;
            margin: 0 auto;
            overflow-y: auto;
        }
        .i_invoice_left_show_ {
            overflow: auto;
            animation: _show_ .1s forwards;
        }
        @keyframes _show_ {
            0% {
                width: 100%;
            }
            100% {
                width: 40%;
            }
        }
        .i_invoice_right {
            width: 100%;
            margin: 0 auto;
            overflow: auto;
        }
        .i_invoice_msgBlock {
            width: 100%;
            margin: 1% auto;
            display: flex;
            justify-content: space-around;
        }
        .i_invoice_info {
            width: 50%;
            display: flex;
            justify-content: center;
        }
        .fun_btn {
            width: 90%;
            height: 10vmin;
            border-radius: 10px;
            line-height: 10vmin;
            background-color: #DD938C;
            text-align: center;
            border: 1px solid rgb(255, 255, 255);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            transition: .1s;
            cursor: pointer;
        }
        .fun_btn:hover {
            transform: scale(1.05);
            background-color: #FEA0A8;
        }
        .fun_btn_re {
            width: 90%;
            height: 10vmin;
            border-radius: 10px;
            line-height: 10vmin;
            background-color: #878945;
            text-align: center;
            border: 1px solid rgb(255, 255, 255);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            transition: .1s;
            cursor: pointer;
        }
        .fun_btn_re:hover {
            transform: scale(1.05);
            background-color: #BEBE77;
        }
        .i_invoice_hr {
            text-align: center;
        }
        .block5 {
            width: 100%;
            margin: 1% auto;
            border-radius: 10px;
            border: 2px solid #507C5C;
        }
        .block2 {
            display: flex;
            justify-content: space-evenly;
            width: 20%;
            font-size: 2.5vmin;
            color: #6B0000;
        }
        .i_invoice_list {
            border: 1px solid #000;
            background-color: #fafafa;
            border-radius: 10px;
            width: 90%;
            margin: 0.5% auto;
            display: flex;
            justify-content: space-between;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            cursor: pointer;
            height: 5vmin;
            line-height: 5vmin;
            overflow-y: hidden;
            transition: .1s;
        }
        .i_invoice_list:hover {
            transform: scale(1.05);
            background-color: #D9DC8E;
        }
        .i_invoice_list_test {
            border: 1px solid #000;
            background-color: #fafafa;
            border-radius: 10px;
            width: 90%;
            margin: 0.5% auto;
            display: flex;
            justify-content: space-between;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            cursor: pointer;
            height: 5vmin;
            line-height: 5vmin;
            overflow-y: hidden;
            transition: .1s;
        }
        .i_invoice_list_test:hover {
            transform: scale(1.05);
            background-color: #D9DC8E;
        }
        .allowance_list {
            border: 1px solid #000;
            background-color: #fafafa;
            border-radius: 10px;
            width: 90%;
            margin: 0.5% auto;
            display: flex;
            justify-content: space-between;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            cursor: pointer;
            height: 15vmin;
            flex-wrap: wrap;
            overflow-y: hidden;
            transition: .1s;
        }
        .allowance_list:hover {
            transform: scale(1.05);
            background-color: #D9DC8E;
        }
        .i_invoice_list_title {
            border: 1px solid #000;
            background-color: #FFDF82;
            width: 90%;
            margin: 1% auto 0%;
            display: flex;
            justify-content: space-around;
        }
        .allowance_list_title {
            border: 1px solid #000;
            background-color: #FFDF82;
            width: 90%;
            margin: 1% auto 0%;
            display: flex;
            justify-content: space-around;
            height: 15vmin;
            flex-wrap: wrap;
            overflow-y: hidden;
        }
        .a_invoice_list_title {
            border: 1px solid #000;
            background-color: #FFDF82;
            width: 90%;
            margin: 1% auto 0%;
            display: flex;
            justify-content: space-around;
        }
        .list_show_a {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            width: 10%;
            text-align: center;
        }
        .list_show_b {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            width: 12%;
            text-align: center;
        }
        .list_show_c {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            width: 25%;
            text-align: center;
        }
        .list_show_d {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            width: 35%;
            text-align: center;
        }
        .list_show_e {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            width: 18%;
            text-align: center;
        }
        .allowance_show_a {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            width: 20%;
            text-align: center;
        }
        .allowance_show_b {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            width: 40%;
            text-align: center;
        }
        .allowance_show_c {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            width: 40%;
            text-align: center;
        }
        .allowance_show_d {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            width: 40%;
            text-align: center;
        }
        .allowance_show_e {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            width: 20%;
            text-align: center;
        }
        .invoice_search_btn {
            background-color: #94C8E2;
            border-radius: 50%;
            border: 1px solid rgb(255, 255, 255);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            width: 10vmin;
            height: 10vmin;
            text-align: center;
            line-height: 10vmin;
            cursor: pointer;
            transition: .1s;
            margin-top: 1%;
        }
        .invoice_search_btn:hover {
            transform: scale(1.05);
            background-color: #75D9E8;
        }
        #invoice_pic_cross_mark {
            position: absolute;
            top: 4vh;
            right: 1vw;
            z-index: 2700;
            cursor: pointer;
        }
        .invoice_pic_block {
            box-shadow: 1px 2px 20px rgba(0, 0, 0, 1);
            border-radius: 10px;
            width: 98vw;
            height: 94vh;
            margin: 4vh auto;
            background-color: #D4CDD3;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            flex-direction: column;
        }
        .myChart_block {
            width: 96vmin;
            height: 26vh;
            background-color: #FFF;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .chart_btn {
            width: 80vmin;
            height: 58vh;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            flex-wrap: wrap;
            flex-direction: column;
        }
        .pic_btn {
            width: 100%;
            height: 5vh;
            border: 1px gray solid;
            margin: 1% auto;
            background-color: #8080AB;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            text-align: center;
            line-height: 5vh;
            cursor: pointer;
            transition: .1s;
            flex-shrink: 0;
            /*確保flex子元素不被壓縮 */
        }
        #chart_total_info {
            width: 100%;
            height: 5vh;
            border: 1px gray solid;
            margin: 1% auto;
            background-color: #ff9252;
            text-align: center;
            line-height: 5vh;
            flex-shrink: 0;
        }
        .pic_btn:hover {
            transform: scale(1.05);
            background-color: #F0F0F9;
        }
        .search_p_btn {
            cursor: pointer;
            transition: .1s;
        }
        .search_p_btn:hover {
            transform: scale(1.05);
            background: linear-gradient(to right, #F1DEDC 0%, rgba(255, 255, 255, 0) 100%)
        }
        .tag {
            position: absolute;
            bottom: 120%;
            border-radius: 3px;
            background: #7B6684;
            padding: 5px;
            font-size: 2vmin;
            color: #fff;
            transform: translateX(-50%);
            left: 0%;
            white-space: nowrap;
        }
        .tag::after {
            content: '';
            display: block;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 7px solid #7B6684;
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
        }
        #all_workspace {
            height: 85%;
            margin: 5% auto 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            background-color: transparent;
        }
        .bar span {
            display: inline-block;
            height: 150%;
            background: #7B6684;
            width: 0%;
        }
        .tool-chart {
            position: relative;
            width: 80%;
            text-align: left;
            left: 10%;
            bottom: 3%;
        }
        .tool-chart::after {
            content: attr(data-title);
            position: absolute;
            top: 0;
            right: calc(100% + 15px);
        }
        .tool-chart2 {
            position: relative;
            width: 80%;
            text-align: left;
            left: 10%;
            bottom: 3%;
        }
        .tool-chart2::after {
            content: attr(data-title);
            position: absolute;
            top: 0;
            right: calc(100% + 15px);
        }
        .bar {
            margin-top: 60px;
            margin-bottom: 5px;
            height: 15px;
            background: #eee;
            border-radius: 10px;
            overflow: hidden;
        }
        .stamp {
            background-color: transparent;
            color: rgb(255, 0, 0, 0.7);
            border-radius: 50%;
            border: 3px solid rgba(255, 0, 0, 0.7);
            padding: 2vmin;
            line-height: 1;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.5vmin;
            width: 100%;
        }
        #cancel_schedule_cross_mark {
            position: absolute;
            top: 4vh;
            right: 1vw;
            z-index: 2700;
            cursor: pointer;
        }
        /*
    .running_msg {
        position: relative;
        width: 60%;
        height: 0;
        float: right;
        margin-right: 35%;
        top: -60px;
        animation: slide-down 3s forwards;
        display: flex;
        align-items: center;
        animation-delay: 1s;
    }
    .running_msg svg {
        width: 9vmin;
    }
    .running_msg_back {
        animation: slide-up 3s forwards;
    }
    @keyframes slide-down {
        0% {
            top: -60px;
        }
        100% {
            top: 2px;
        }
    }
    @keyframes slide-up {
        0% {
            top: 2px;
        }
        100% {
            top: -60px;
        }
    }
    @keyframes text-slide-down {
        0% {
            opacity: 0;
            top: -130px;
        }
        80% {
            top: -10px;
        }
        90% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    .running_msg_txt {
        position: relative;
        font-size: 2vmin;
        color: #221d08;
        margin-left: 4%;
        margin-top: 1%;
        top: -100px;
        animation: text-slide-down 4s forwards;
       
    }
    .running_msg_txt_one {
        font-size: 2vmin;
        color: #221d08;
        margin-left: 4%;
        margin-top: 1%;

    }*/
        .schedule_block {
            width: 90%;
            height: 80%;
            margin: auto;
            background-color: #c7c3c0;
            box-shadow: 2px 8px 10px #ddd;
            border-radius: 10px;
            overflow: scroll;
        }
        .schedule_list {
            border: 1px solid #000;
            background-color: #fafafa;
            border-radius: 10px;
            width: 90%;
            margin: 0.5% auto;
            display: flex;
            justify-content: space-between;
            height: 5vmin;
            line-height: 5vmin;
            overflow-y: hidden;
        }
        .schedule_list_title {
            border: 1px solid #000;
            background-color: #caffeb;
            width: 90%;
            margin: 0.5% auto;
            display: flex;
            justify-content: space-between;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            height: 5vmin;
            line-height: 5vmin;
            overflow-y: hidden;
        }
        .schedule_list_1 {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            text-align: center;
            width: 30%;
        }
        .schedule_list_2 {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            text-align: center;
            width: 30%;
        }
        .schedule_list_3 {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            text-align: center;
            width: 30%;
        }
        .schedule_list_4 {
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            text-align: center;
            width: 10%;
            line-height: 6vmin;
        }
        .schedule_btn {
            width: 3vmin;
            height: 3vmin;
            cursor: pointer;
            transition: .1s;
        }
        .schedule_btn:hover {
            transform: scale(1.1);
        }
        .add-button-svg {
            width: 10vmin;
            flex-shrink: 0;
        }
        .add-button {
            animation: jumping 10s infinite backwards;
            width: 10vmin;
            height: 10vmin;
            cursor: pointer;
            float: right;
        }
        @keyframes jumping {
            0% {
                transform: translate(0, 0);
            }
            6% {
                transform: translate(0, 0);
            }
            7% {
                transform: translate(0px, -10px) translateZ(-999px)scaleY(0.8)rotateY(180deg);
            }
            8% {
                transform: translate(0px, 0px)rotateY(180deg);
            }
            16% {
                transform: translate(0px, 0)rotateY(180deg);
            }
            17% {
                transform: translate(-30px, -10px) scaleY(0.8)rotateY(180deg);
            }
            18% {
                transform: translate(-30px, 0px)rotateY(180deg);
            }
            24% {
                transform: translate(-30px, 0px)rotateY(180deg);
            }
            25% {
                transform: translate(-60px, -10px)scaleY(0.8)rotateY(180deg);
            }
            26% {
                transform: translate(-60px, 0px)rotateY(180deg);
            }
            48% {
                transform: translate(-60px, 0px)rotateY(180deg);
            }
            49% {
                transform: translate(-80px, -10px) translateZ(-999px)scaleY(0.8);
            }
            50% {
                transform: translate(-80px, 0px);
            }
            64% {
                transform: translate(-80px, 0px);
            }
            65% {
                transform: translate(-60px, -10px)scaleY(0.8);
            }
            66% {
                transform: translate(-60px, 0px);
            }
            74% {
                transform: translate(-60px, 0px);
            }
            75% {
                transform: translate(-40px, -10px)scaleY(0.8);
            }
            76% {
                transform: translate(-40px, 0px);
            }
            84% {
                transform: translate(-40px, 0px);
            }
            85% {
                transform: translate(-20px, -10px)scaleY(0.8);
            }
            86% {
                transform: translate(-20px, 0px);
            }
            98% {
                transform: translate(-20px, 0px);
            }
            99% {
                transform: translate(0px, -10px)scaleY(0.8);
            }
            100% {
                transform: translate(0px, 0px);
            }
        }
        .add-button:hover {
            animation-play-state: paused;
        }
        #invoice_search {
            width: 80%;
        }
        /*導航*/
        .guide {
            display: inline-flex;
            position: relative;
            overflow: hidden;
            max-width: 70%;
            padding: 0 20px;
            align-items: center;
        }
        .guide_item {
            color: #83818c;
            padding: 20px;
            text-decoration: none;
            transition: .3s;
            margin: 0 6px;
            z-index: 1;
            font-family: 'STKaiti ', sans-serif;
            font-weight: 500;
            position: relative;
            cursor: pointer;
        }
        .guide_item:before {
            content: "";
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 60%;
            height: 5px;
            background-color: #dfe2ea;
            border-radius: 0 0 100% 100%;
            opacity: 0;
            transition: .3s;
        }
        .guide_item:not(.is-active):hover:before {
            opacity: 1;
            bottom: 0;
        }
        .guide_item:not(.is-active):hover {
            color: rgb(87, 85, 85);
            transform: scale(1.05);
            text-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5);
        }
        .guide_line {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 4px;
            transition: .4s;
            height: 5px;
            z-index: 1;
            border-radius: 0 0 100% 100%;
        }
        @media (max-width: 580px) {
            .guide {
                overflow: auto;
            }
        }
        .repair {
            font-size: 4vmin;
            color: #FFF;
            white-space: nowrap;
            border-radius: 20px;
            padding: 1vmin;
            background-color: #FF5454;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            transition: .1s;
            cursor: pointer;
            display: inline-block;
            padding: 10px;
            user-select: none;
        }
        .repair:hover {
            transform: scale(1.05);
            background-color: #57423F;
        }
        .repair_svg {
            width: 4vmin;
            height: 4vmin;
        }
        #mobile_user_msg {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .invoice_title_1 {
            font-size: 3.5vmin;
            text-align: center;
        }
        .invoice_title_2 {
            font-size: 2vmin;
            width: 50%;
            display: inline-block;
        }
        .invoice_title_3 {
            font-size: 2vmin;
        }
        .invoice_title_1_2 {
            font-size: 3.5vmin;
            text-align: center;
        }
        .invoice_title_2_2 {
            font-size: 2vmin;
            width: 50%;
            display: inline-block;
        }
        .invoice_title_3_2 {
            font-size: 2vmin;
        }
        .invoice_info_txt_num {
            font-size: 3.8vmin;
        }
        .invoice_info_txt {
            font-size: 3vmin;
        }
        .printer_setup_background {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 2000;
        }
        .printer_setup_block {
            text-align: center;
            position: relative;
            width: 98vw;
            height: 82vh;
            margin: 6vh auto 0;
            padding: 2%;
            border-radius: 10px;
            background-color: #cdcdc2;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .remark_area {
            position: relative;
            top: 5%;
            left: 1%;
            width: 98%;
            background-color: #ffffff;
            border: 1px solide gray;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            height: 5vh;
            margin-top: 1vh;
            animation: fadein 0.2s ease 1;
            animation-fill-mode: forwards;
            display: flex;
            /* 彈性排版 */
            flex-direction: column;
            /* 彈性方向:列(縱) */
            justify-content: center;
            /* 版面內容:中間 */
        }
        /*
    .edit_mem_info_2 {
        margin: 1vh auto;
        white-space: nowrap;
        background-color: rgb(189, 224, 208);
        width: 40%;
        height: 4vh;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        border-radius: 10px;
        transition: .1s;
        cursor: pointer;
        color: black;
        line-height: 4vh;
    }
  
    .edit_mem_info_2:hover {
        transform: scale(1.05);
    }
      */
        .svg_size_controller_small {
            width: 2.2vmin;
            height: 2.2vmin;
            margin: -.7%;
        }
        .printer_img_btn {
            width: fit-content;
            margin: auto;
            transition: .1s;
            cursor: pointer;
        }
        .printer_img_btn:hover {
            transform: scale(1.05);
        }
        .exclamation_mark {
            position: absolute;
            top: 1%;
            left: 1%;
            z-index: 2700;
            width: 6vh;
            cursor: pointer;
            transition: .1s;
            animation: jelly-bounce 1.4s infinite ease-in-out;
        }
        .exclamation_mark:hover {
            transform: scale(1.05);
        }
        .printer_directions {
            width: 50%;
            background-color: #FFF;
            position: absolute;
            top: 7%;
            left: 25%;
            z-index: 2800;
            box-shadow: 2px 2px 4vmin rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            padding: 20px;
        }
        .printer_directions_bg {
            width: 100vw;
            height: 100vh;
            background-color: transparent;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2700;
        }
        #logo_setup {
            border: 1px solid white;
            background-color: #79A1A1;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) inset;
            width: 100%;
            color: black;
            padding: 2vmin;
            margin: 0 auto;
            border-radius: 10px;
        }
        #test_printer {
            margin: 2vmin auto;
        }
        #now_canvas {
            border-radius: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            background-color: #99C0B9;
            padding: 1vmin;
        }
        #now_canvas_block {
            transform: scale(0.9);
        }
        #cross_mark_printer {
            position: absolute;
            top: 1%;
            right: 1%;
            z-index: 2600;
            width: 4vh;
            cursor: pointer;
        }
        #printer_img_1 {
            width: 8vmin
        }
        #printer_img_ok_1 {
            width: 4vmin
        }
        #printer_img_ng_1{
            width: 4vmin
        }
        #printer_img_ng_2 {
            width: 4vmin
        }
        #printer_img {
            width: 8vmin
        }
        #printer_img_ok {
            width: 4vmin
        }
        #printer_img_ng {
            width: 4vmin
        }
        #canvas_block {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #del_account_bg {
            width: 100vw;
            height: 100vh;
            position: absolute;
            top: 0%;
            left: 0%;
            background-color: rgba(10, 10, 10, 0.5);
            z-index: 2000;
            animation: showup 0.3s forwards;
        }
        .del_account_block {
            width: 96vw;
            height: fit-content;
            position: absolute;
            top: 20%;
            left: 2vw;
            background-color: #e5e5e5;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 2px 2px 10px #000000;
            z-index: 2001;
            text-align: center;
            padding: 1%;
        }
        #del_account {
            cursor: pointer;
            height: 3vh;
            position: absolute;
            left: 1%;
            top: 1%;
            display: flex;
            width: 25%;
            align-items: center;
        }
        #del_text {
            animation: fadein 0.2s ease 1;
        }
        #del_account_svg {
            width: 4vh;
        }
        #del_account:hover #del_text {
            display: block;
            opacity: 1;
        }
        #del_GRVC {
            font-size: 5vmin;
            margin-bottom: 1vmin;
        }
        #del_ID {
            font-size: 5vmin;
            margin-bottom: 1vmin;
        }
        #del_PS {
            font-size: 5vmin;
        }
        #del_btn {
            font-size: 4vmin;
            margin: 1%;
        }
        /* 調整 input 框框的寬度和高度 */
        #photoInput {
            width: 90%;
            height: 100px;
            border: 2px dashed #ccc;
            /* 使用虛線邊框來標示範圍 */
            padding: 10px;
            /* 添加一些內距，讓虛線邊框更容易看見 */
            text-align: center;
            /* 文字置中對齊 */
            line-height: 80px;
            /* 控制文字行高，使其在框框中垂直置中 */
            font-size: 16px;
            /* 文字大小 */
        }
        /* 在使用者拖拉檔案時變更框框樣式 */
        #photoInput.dragover {
            border-color: #4CAF50;
            /* 拖拉時的邊框顏色 */
            background-color: #f2f2f2;
            /* 拖拉時的背景色 */
            color: #ca7762;
            /* 拖拉時的文字顏色 */
        }
        /* 調整文字在框框內的位置 */
        #file_txt {
            color: rgb(250, 165, 85);
            /* 文字顏色 */
        }
        .print_sitting_btn{
            width: 15vmin;
            height: 8vmin;
            background-color: #DAA3A1;
            display: flex;
            align-items: center;
            flex-direction: column;
            padding: 5px;
            border-radius: 10px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
            cursor: pointer;
            position: relative;
            margin: auto;
        }
        .print_sitting_btn:hover{
            transform: scale(1.02);
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
        }
        .print_sitting_btn::before {
            content: attr(data-tooltip); /* 從data-tooltip屬性獲取顯示的文字 */
            position: absolute;
            white-space: nowrap;
            background-color: #d9d9d972;
            padding: 5px;
            border-radius: 10px;
            display: none;
            right: 50%; /* 或其他需要的位置 */
            top: -60%;
    
            height: 3vmin;
            transition: all 0.3s ease;
        }
        .print_sitting_btn:hover::before {
            display: block; /* 滑鼠懸停時顯示文字 */
        }
        #usb_area{
            display: flex;
        flex-direction: column;
        align-items: center;
        height: 24vh;
        justify-content: space-around;
    
        }
        .usb_info_input{
            width: 60%;
            background-color: #FFF;
            border-radius: 5px;
            border: 3px solid gray;
            height: 6vmin;
        }
        .notice_background{
    
            width:100vw;
            height:100vh;
            position: fixed;
            z-index: 3000;
            background-color: #ffffff4f;
            top: 0;
            left: 0;
            
        }
        .notice_box{
            animation: fadein 0.3s ease 0.7s forwards;
            opacity: 0;
            box-sizing: border-box;
            margin: auto;
            position: absolute;
            z-index: 3500;
            width: 800px;
            height: 500px;
            background-color: #e4e9ec;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-evenly;
            border: 1px solid #364954;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            transform: translate(-50%,-50%);
            top:50%;
            left:50%;
        }
        .notice_text{
            width: 80%;
        }
        .notice_btn{
            background-color: #F2C0C1;
            width: 10%;
            text-align: center;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            padding: 5px;
            cursor: pointer;
            transition: 0.3s;
        }
        .notice_btn:hover{
           transform: scale(1.2);
        }
        .bold_text{
            font-weight:bold;
        }
        .like_p{
             
              margin: 1vmin 0 1vmin 0;
          }
          .word_size{
              font-size: 2.2vmin;
          }
          .word_size_content{
              font-size: 1.8vmin;
          }
    }
    .allowance_block {
        margin: 1% auto;
        border: 1px solid #000;
        background-color: #fff;
        width: 23vmin;
        height: 100%;
        border-radius: 3px;
        padding: 15px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        font-size: 1.2vmin;
        line-height: 1.2;
    }
    .allowance_block * {
        font-size: 1.5vmin;
        line-height: 1.1;
    }
    .allowance_block .bt:first-child {
        font-size: 1.6vmin;
        font-weight: bold;
    }
    .allowance_block .bt:nth-child(2) {
        font-size: 1.5vmin;
    }
    .allowance_block table td {
        font-size: 1.5vmin;
        line-height: 1.0;
        padding: 1px;
    }
    .allowance_block table td[colspan="3"] {
        font-size: 1.5vmin;
    }
    .main-container {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        flex-direction: column;
    }
    /* 折讓單詳細資料區塊 */
    .allowance_detail {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding-left: 3%;
        text-align: left;
        gap: 20px;
    }
    /* 折讓單按鈕容器 */
    .allowance_btnbox {
        display: flex;
        justify-content: space-evenly;
        flex-direction: row;
        width: 100%;
        gap: 10%;
    }

    .list_1 {
        width: 8%;
        text-align: center;
        overflow: hidden;
    }
    .list_2 {
        width: 35%;
        text-align: center;
        overflow: hidden;
    }
    .list_3 {
        width: 30%;
        text-align: center;
        overflow: hidden;
    }
    .list_4 {
        width: 20%;
        text-align: center;
        overflow: hidden;
    }