@media screen and (orientation: landscape) and (max-width: 1366px) {
    .td {
        border: 1px gray solid;
    }
    h1 {
        font-size: 4vmin;
    }
    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;
    }
    #input_now {
        position: relative;
        border: 2px rgba(255, 30, 0, 0.574) solid;
        background-color: rgba(255, 120, 120, 0.306);
    }
    .hidden {
        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;
        z-index: 2500;
        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(255, 20, 20);
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .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: rgba(0, 0, 0, 0.4);
        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: 8vh;
        }
    }
    @keyframes buttons_product_modify_left_moveback {
        0% {
            opacity: 1;
            left: 0vw;
            top: 8vh;
        }
        100% {
            opacity: 0.3;
            left: 40vw;
            top: 21vh;
        }
    }
    @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: 2.2vmin;
        font-weight: bold;
    }
    P {
        color: #fff;
    }
    html {
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        /*淺藍*/
        touch-action: manipulation;
        font-size: initial;
    }
    body {
        -ms-overflow-style: none;
        background-color: rgb(167, 181, 194);
    }
    /*隱藏滾動條*/
     ::-webkit-scrollbar {
        display: none;
    }
    /*          background-color:rgba(193,191,204,1);/*深紫*/
    /*          background-color:rgb(183,206,224);/*淺藍*/
    /*          
/*          background-color:rgb(226,227,232);/*淡紫*/
    .cashier {
        width: 100vw;
        height: 84vh;
        /*border: 5px solid rgb(36, 45, 88);*/
        background-color: rgb(167, 181, 194);
        padding: 0.5vw;
        border-radius: 10px;
        position: absolute;
        top: env(safe-area-inset-top);
        left: 0;
    }
    .cashier_model_t {
        background-color: #D6BFBB;
        /*
        width: 100vw;
        height: 84vh;
    
        padding: 0.5vw;
        border-radius: 10px;
        position: absolute;
        top: env(safe-area-inset-top);
        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;
    }
    #pc_target {
        width: 46vw;
    }
    .input_block {
        height: 17vh;
        width: 53vw;
    }
    #buttons_product_shortcut_block {
        width: 15vw;
    }
    .input_block_div {
        margin: 0 auto;
        width: 98%;
        padding: 1.5vmin;
        white-space: nowrap;
        background-color: lightgray;
        color: #000;
        text-align: left;
        background-color: rgba(201, 210, 193, 1);
        /*深紫*/
        border-top-right-radius: 35px;
        border-top-left-radius: 35px;
        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: 4vmin;
        width: 11vh;
        height: 11vh;
        background-color: lightgray;
        border-radius: 50%;
        padding-top: 3vh;
        margin: 0 auto;
        border: 1px #FFF double;
        cursor: pointer;
        text-align: center;
        line-height: 6.5vh;
        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: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: 11vh;
        height: 11vh;
        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: 6.5vh;
        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: 15vw;
        height: 11vh;
        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: 6.5vh;
        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);
    }
    .quick_buttons_sub {
        width: 29vw;
        height: 9vh;
        background: -webkit-linear-gradient(top right, rgba(170, 17, 17, 1), rgba(208, 112, 112, 1));
        text-align: center;
        border-top-left-radius: 3vw;
        border-top-right-radius: 3vw;
        border-bottom-right-radius: 3vw;
        border-bottom-left-radius: 3vw;
        border: none;
        color: white;
        cursor: pointer;
        position: absolute;
        box-shadow: 2vmin 2vmin 4vmin 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);
    }
    .buttons_product_list {
        background-color: rgb(226, 227, 232);
        color: white;
        margin: 0.5vh auto 0.5vh 1vw;
        border-radius: 10px;
        border: 1px #FFF double;
        border: none;
        width: 14vw;
        height: 13vh;
        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;
    }
    .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.5vh auto 0.5vh 1vw;
        border-radius: 10px;
        border: 1px #FFF double;
        border: none;
        width: 14vw;
        height: 13vh;
        cursor: pointer;
        line-height: 13vh;
        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;
    }
    .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: 100vh;
        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: 32vw;
        height: 26vh;
        text-align: center;
        z-index: 2700;
        box-shadow: 2vw 2vw 4vw rgba(0, 0, 0, 0.7);
        /*防止被反白*/
        position: absolute;
        left: 32vw;
        top: 37vh;
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
        animation: showup 0.3s forwards;
    }
    .showup {
        animation: showup 0.3s forwards;
    }
    @keyframes showup {
        from {
            width: 1vw;
            height: 1vh;
            opacity: 0;
            left: calc(var(--mouse-x, 0) * 100%);
            top: calc(var(--mouse-y, 0) * 100%);
        }
        to {
            opacity: 1;
        }
    }
    .clearout {
        animation: clearout 0.3s forwards;
    }
    @keyframes clearout {
        from {
            opacity: 1;
        }
        to {
            width: 1vw;
            height: 1vh;
            opacity: 0;
            left: calc(var(--mouse-x, 0) * 100%);
            top: calc(var(--mouse-y, 0) * 100%);
        }
    }
    .add_new_product_name {
        width: 60%;
        margin-left: 1vw;
        position: absolute;
        top: 10%;
        left: 18%;
        font-size: 3vmin;
    }
    .add_new_product_price {
        width: 60%;
        margin-left: 1vw;
        position: absolute;
        bottom: 10%;
        left: 18%;
        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 {
        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;
    }
    .buttons_block {
        height: 12vh;
    }
    .shortcut_btn_name {
        display: block;
        width: 95%;
        color: rgb(0, 0, 0);
        height: 70%;
        padding-top: 5%;
        font-size: 2.5vmin;
    }
    .shortcut_btn_price {
        color: rgba(38, 0, 255, 0.545);
        height: 30%;
        display: flex;
        text-align: left;
        align-items: center;
        justify-content: space-between;
    }
    .product_edit {
        width: 2vw;
    }
    .shortcut_btn_block {
        width: 90%;
        height: 100%;
        display: inline-block;
    }
    .total_info {
        position: relative;
        bottom: 0%;
        right: 0%;
        height: 97%;
        width: 40%;
        margin-top: 2%;
        margin-left: 5%;
        float: left;
    }
    /*
    .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: 3vmin;
        width: 9vh;
        height: 9vh;
        text-align: center;
        background-color: lightgray;
        border-top-left-radius: 3vw;
        border-top-right-radius: 3vw;
        border-bottom-right-radius: 3vw;
        border-bottom-left-radius: 3vw;
        border: none;
        box-shadow: inset;
        background-color: dimgray;
        color: white;
        cursor: pointer;
        padding: 1px;
        margin: 0 auto;
        padding-top: 2.5vmin;
    }
    .buttons_c {
        font-size: 3vmin;
        width: 9vh;
        height: 9vh;
        background-color: lightgray;
        border-top-left-radius: 3vw;
        border-top-right-radius: 3vw;
        border-bottom-right-radius: 3vw;
        border-bottom-left-radius: 3vw;
        border: none;
        box-shadow: inset;
        padding-top: 3vh;
        margin: 0 auto;
        cursor: pointer;
        text-align: center;
        padding-top: 2.5vmin;
    }
    .buttons_long_c {
        width: 21vh;
        height: 9vh;
        text-align: center;
        background-color: lightgray;
        border-top-left-radius: 3vw;
        border-top-right-radius: 3vw;
        border-bottom-right-radius: 3vw;
        border-bottom-left-radius: 3vw;
        border: none;
        box-shadow: inset;
        color: black;
        cursor: pointer;
        font-size: 3vmin;
        margin: 0 auto;
        line-height: 9vh;
    }
    .buttons_long2_c {
        width: 21vh;
        height: 9vh;
        text-align: center;
        border-radius: 3vw;
        border: none;
        box-shadow: inset;
        color: black;
        cursor: pointer;
        font-size: 5vmin;
        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;
    }
    .total_btn_I {
        width: 25vw;
        height: 5vh;
        text-align: left;
        border-style: none;
        background-color: #242526;
        color: aliceblue;
    }
    .product_name {
        display: inline-block;
        width: 29.5vw;
        text-align: left;
        height: 3vh;
        margin-bottom: 1vh;
    }
    .amount {
        width: 7.4vw;
        height: 3vh;
        display: inline-block;
        text-align: center;
        margin-bottom: 1vh;
    }
    .unit_price {
        width: 7.4vw;
        height: 3vh;
        display: inline-block;
        text-align: center;
        margin-bottom: 1vh;
    }
    .item_price {
        height: 3vh;
        display: inline-block;
        width: 9vw;
        text-align: center;
    }
    .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: 7.5vw;
        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: 6vw;
        height: 3vh;
        text-align: center;
        border-style: none;
        background-color: transparent;
    }
    .add_btn_short {
        display: inline-block;
        width: 4vw;
        height: 3vh;
        text-align: center;
        border-style: none;
        background-color: transparent;
    }
    .add_button_long {
        display: inline-block;
        width: 13vw;
        height: 3vh;
        text-align: center;
        border-style: none;
        background-color: transparent;
    }
    .add_item_btn {
        display: inline-block;
        width: 8vw;
        height: 3vh;
        text-align: center;
        border-style: none;
    }
    .ZeroTaxSalesAmount {
        display: inline-block;
        width: 8vw;
        height: 3vh;
        text-align: center;
        border-style: none;
        background-color: transparent;
    }
    .SalesAmount {
        display: inline-block;
        width: 8vw;
        height: 3vh;
        text-align: center;
        border-style: none;
        background-color: transparent;
    }
    .FreeTaxSalesAmount {
        display: inline-block;
        width: 8vw;
        height: 3vh;
        text-align: center;
        border-style: none;
        background-color: transparent;
    }
    .tax_count_area {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .tax_count_area1 {
        position: absolute;
        bottom: 0;
    }
    .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: 100vh;
        z-index: 2000;
        background-color: rgba(10, 10, 10, 0);
        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: 80vh;
        overflow: auto;
        padding: 5vh 10px 10px 10px;
        overscroll-behavior: contain;
    }
    .product_modify_block {
        margin: auto;
        display: flex;
        flex-wrap: nowrap;
        width: 80vw;
        justify-content: space-between;
        align-items: center;
    }
    .tital_product_modify_block {
        margin: auto;
        display: flex;
        flex-wrap: nowrap;
        width: 90vw;
        justify-content: space-between;
        align-items: center;
        border-bottom: 5px #B5C487 double;
    }
    .product_setup {
        border-color: rgb(81, 81, 81);
        z-index: 2500;
        height: 94vh;
        width: 96vw;
        border-radius: 10px;
        text-align: center;
        background-color: #e8e8e8;
        color: rgba(0, 0, 0, 0.612);
        position: relative;
        top: 3vh;
        margin: 0 auto;
        overflow-y: auto;
        box-shadow: 1px 2px 20px rgba(0, 0, 0, 1);
    }
    .product_setup_switch {
        width: 2vw;
        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: 6vw;
        text-align: center;
    }
    .edit_product_modify {
        background-color: transparent;
        color: rgb(0, 0, 0);
        text-align: left;
    }
    .mem_setup_background {
        width: 100vw;
        height: 100vh;
        z-index: 2000;
        background-color: rgba(10, 10, 10, 0);
        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_goal {
        margin: 1vh auto;
        white-space: nowrap;
    }
    .edit_lovekey {
        margin: 3% auto;
        height: 4vh;
        display: flex;
        width: 70%;
        justify-content: space-evenly;
        align-items: center;
    }
    .mem_setup {
        border-style: solid solid solid solid;
        border-color: rgba(178, 178, 178, 0.5);
        z-index: 2500;
        width: 70vw;
        height: 90vh;
        text-align: center;
        background-color: #818E9B;
        color: #fff;
        overflow-y: auto;
        margin: 5vh auto;
        animation: sd-top-show 0.3s ease 1;
        animation-fill-mode: forwards;
        border-radius: 10px;
        box-shadow: 1px 2px 20px rgba(0, 0, 0, 1);
    }
    .mem_setup_hide {
        animation: sd-top-hide 0.3s ease 1;
        animation-fill-mode: forwards;
    }
    #cross_mark2 {
        position: absolute;
        top: 1%;
        right: 1%;
        z-index: 2600;
        animation: cross_left_show 0.3s ease 1;
        animation-fill-mode: forwards;
    }
    #cross_mark3 {
        position: absolute;
        top: 2%;
        right: 2%;
        z-index: 2600;
        animation: cross_left_show 0.3s ease 1;
        animation-fill-mode: forwards;
    }
    .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: 2vw;
        color: rgb(169, 65, 65);
    }
    #usual_lovekey {
        width: 10vw;
    }
    #search_key {
        width: 5vh;
        height: 5vh;
        cursor: pointer;
        transition: .1s;
    }
    #search_key:hover {
        transform: scale(1.3);
    }
    .product_list_background {
        width: 100vw;
        height: 100vh;
        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: 90vh;
        /*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;
    }
    /*
    .product_list_show{
    animation: sd-right-show 0.3s ease 1;
    animation-fill-mode: forwards;
    }
    */
    #product_list_switch {
        width: 4vw;
        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: 30vw;
    }
    .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;
        /* 防止文字被滑鼠選取反白 */
    }
    input[type=radio]:checked+span {
        color: rgb(69, 69, 69);
        background-color: #D9ECFF;
    }
    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: 11vh;
        height: 11vh;
        border: 0;
        padding: 1h;
        cursor: pointer;
        transition: .1s ease-in;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 1.4vh 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");*/
    * {
        box-sizing: border-box
    }
    /*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: 11vh;
        height: 11vh;
        border: 0;
        cursor: pointer;
        transition: .1s ease-in;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 1.4vh 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: 20vw;
        height: max-content;
        /*box-shadow:0 0 4px 4px rgba(150,157,249,0.16)*/
        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-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: 2vmin;
        font-size: 2vmin;
        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: 11vh;
        height: 11vh;
        border: 0;
        cursor: pointer;
        transition: .1s ease-in;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 1.4vh 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: 20vw;
        height: max-content;
        box-shadow: 0 0 4px 4px rgba(150, 157, 249, 0.16);
        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: 2vmin;
        font-size: 2vmin;
        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 ===================*/
    /*=========================================*/
    * {
        box-sizing: border-box
    }
    /*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(132, 138, 174);
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        width: 11vh;
        height: 11vh;
        border: 0;
        cursor: pointer;
        transition: .1s ease-in;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 1.4vh 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: 20vw;
        height: max-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: 2vmin;
        font-size: 2vmin;
        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 ===================*/
    /*=========================================*/
    * {
        box-sizing: border-box
    }
    /*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 {
        -webkit-animation: fadeInItem .1s .1 forwards;
        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 {
        -webkit-animation: onePulse4 .1s forwards linear;
        animation: onePulse4 .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(149, 153, 176);
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        width: 11vh;
        height: 11vh;
        border: 0;
        padding: 1px;
        cursor: pointer;
        transition: .1s ease-in;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 1.4vh 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: 20vw;
        height: max-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-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: 2vmin;
        font-size: 2vmin;
        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: 4vh;
        right: 3%;
        font-size: 3vmin;
        text-align: center;
        width: 12vh;
        height: 12vh;
        /*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;
        top: 100%;
        width: 40%;
        height: 100%;
        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: 23.5%;
        width: 53%;
        height: 15%;
        border-bottom: 6vmin #000 solid;
        border-top: 0.5vmin #000 solid;
        border-right: 3vmin #000 solid;
        border-left: 3vmin #000 solid;
        border-top-left-radius: 3vw;
        border-top-right-radius: 3vw;
        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: -6%;
        }
    }
    @keyframes sd-bottom-show-typing2 {
        0% {
            opacity: 0;
            bottom: -15%;
        }
        100% {
            opacity: 1;
        }
    }
    .final_text_l {
        font-size: 3vmin;
    }
    .final_text_s {
        font-size: 1.5vmin;
    }
    #question_mark_show {
        width: 5vw;
        position: absolute;
        right: 1%;
        top: 1%;
        animation: question_mark 2s;
        animation-fill-mode: forwards;
    }
    .question_mark {
        width: 3vw;
    }
    @keyframes question_mark {
        0% {
            opacity: 0.3;
            right: 5%;
            transform: rotate(0deg);
        }
        50% {
            opacity: 1;
            right: 70%;
        }
        100% {
            opacity: 1;
            right: 1%;
            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;
        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: 55vw;
        background-color: rgba(48, 48, 48, 0.9);
        font-size: 5vmin;
        position: absolute;
        right: 0;
        bottom: 13vh;
        z-index: 2000;
        animation: keyboard-right-bottom-show 0.5s ease 1;
        animation-fill-mode: forwards;
    }
    .uniform_keyboardBox {
        background: #242526;
        position: absolute;
        right: 50vw;
        bottom: 13vh;
        animation: keyboard-right-bottom-show 0.5s 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;
        font-size: 4vmin;
        margin: 0 0 3px 3px;
        border-radius: 4px;
        border: 1px solid #333;
        text-align: center;
        cursor: pointer;
        background-color: #fff;
    }
    .Backspace {
        width: 12vh;
        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;
    }
    .zero_keys {
        width: 12.3vh;
        height: 6vh;
        font-size: 4vmin;
        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;
    }
    .keys:hover,
    .Backspace:hover:hover {
        box-shadow: 0px 0px 3px #333 inset;
    }
    .keys:active,
    .Backspace:active:active {
        background-color: #dedede;
    }
    @keyframes calculator-right-bottom-show {
        0% {
            opacity: 0;
            transform: scale(0) translate(250%, -400%);
        }
        100% {
            opacity: 1;
            transform: scale(1) translate(0%, 0%);
        }
    }
    @keyframes calculator-right-bottom-hide {
        0% {
            opacity: 1;
            transform: scale(1) translate(0%, 0%);
        }
        50% {
            opacity: 0.2;
            transform: scale(0.2) translate(-200%, 100%);
        }
        100% {
            opacity: 0;
            transform: scale(0) translate(600%, -900%);
        }
    }
    .calculator {
        position: absolute;
        bottom: 5vh;
        right: 3vw;
        /*
        position: absolute;
        bottom:38vh;
        left:78vw;
        */
        z-index: 2000;
        animation: calculator-right-bottom-show 0.5s ease 1;
        animation-fill-mode: forwards;
    }
    #total_msg_mobile {
        display: none;
    }
    .calculator_hide {
        animation: calculator-right-bottom-hide 0.5s ease 1;
        animation-fill-mode: forwards;
    }
    .font_adjust {
        background-color: #555252;
    }
    #final_background {
        background-color: rgba(0%, 0%, 0%, 0);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2000;
        width: 100%;
        height: 100%
    }
    #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: 11vh;
        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);
    }
    #mobile_break {
        display: none;
    }
    .total {
        width: 98%;
        height: 40vh;
        background-color: white;
        overflow: overlay;
        text-align: left;
        position: relative;
        top: 0px;
        left: 1%;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        border-radius: 10px;
    }
    .total_discount_area {
        position: relative;
        top: 0;
        width: 100%;
        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_I {
        height: 39vh;
        width: 100%;
        background-color: white;
        overflow: overlay;
        text-align: left;
        color: #000;
    }
    .total_fun {
        height: 35vh;
        position: relative;
        width: 45vw;
    }
    .bill_print {
        color: rgb(0, 0, 0);
        white-space: nowrap;
    }
    .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: 0%;
        height: 67%;
        width: 100%;
    }
    #user_msg {
        height: 4vh;
        width: 50%;
        color: aliceblue;
        text-align: left;
        display: inline-block;
    }
    .svg_size_controller_list {
        margin-bottom: 2vh;
        width: 4vmin;
        height: 4vmin;
    }
    .svg_size_controller {
        width: 4vmin;
        height: 4vmin;
    }
    .svg_size_controller_set {
        font-size: 6vmin;
        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 {
        display: none;
    }
    .mobile_total_background_hide {
        animation: sd-left-hide 0.3s ease 1;
        animation-fill-mode: forwards;
    }
    .uniform_carrier_type {
        width: 95%;
        text-align: center;
        height: 3vh;
        border: 1px solid gray;
    border-radius: 5px;
    }
    .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:0%;
        width:100%;
        display: flex;
        flex-direction: column;
        
        align-items: center;
    }
    #mobile_block {
        margin-top: 0vh;
    }
    #lovekey_area {
        text-align: center;
    }
    .discount_type {
        width: 5vw;
    }
    .discount_type_div {
        width: 40vw;
        text-align: center;
        margin: 1vh auto;
    }
    .discount_type_msg {
        font-size: 1.5vmin;
        color: firebrick
    }
    .calculator_inside {
        margin: 0 auto;
        padding: 4vh 1vw 1vh;
        width: 25vw;
        height: 65vh;
        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: 2vw;
    }

    @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: 10%;
        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: 40%
    }
    .mobile_bar {
        display: none;
    }
    @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: 100vh;
        z-index: 2000;
        background-color: rgba(10, 10, 10, 0);
        position: absolute;
        top: 0;
        left: 0;
    }
    .version_info {
        width: 80%;
        height: 80%;
        position: absolute;
        left: 10%;
        top: 10%;
        background-color: rgb(214, 213, 213);
        overflow-y: auto;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        box-shadow: 1px 2px 20px rgba(0, 0, 0, 1);
        padding: 20px;
    }
    .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: 8vmin;
    }
    @keyframes pencil_text {
        0% {
            opacity: 0;
        }
        55% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .pencil_text {
        animation: pencil_text 2s infinite forwards;
        font-size: 2vmin;
        white-space: nowrap;
    }
    .bee {
        animation: flying 4s infinite ease forwards;
        width: 8vmin;
        height: 8vmin;
    }
    @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%;
        height: 10vh;
    }
    .bee_text {
        font-size: 2vmin;
    }
    .info {
        border: 5px rgb(128, 128, 128) solid;
        overflow-y: scroll;
        height: 50vh;
        border-radius: 4px;
        padding: 20px;
    }
    .cross_mark_info {
        position: absolute;
        top: 3%;
        right: 3%;
        z-index: 2800;
        width: 3vh;
        cursor: pointer;
    }
    .cross_mark_camera {
        position: absolute;
        top: 0%;
        right: 0%;
        z-index: 2800;
        width: 3vh;
        cursor: pointer;
    }
    #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: 4vmin;
        text-align: left;
        padding: 10px;
        color: #000;
    }
    #confirm-button {
        background-color: green;
        color: #fff;
        width: 14vmin;
        height: 4vmin;
        border-radius: 5px;
        border: none;
        margin-bottom: 50px;
        cursor: pointer;
    }
    #code_camera_btn {
        position: absolute;
        right: 1%;
        top: 0%;
        width: 4vmin;
        height: 4vmin;
        cursor: pointer;
        z-index: 200;
    }
    @keyframes camera_open {
        0% {
            opacity: 0;
            transform: scale (0);
        }
        100% {
            transform: scale(1);
        }
    }
    #canvanCode {
        position: absolute;
        z-index: 2600;
        top: 20vh;
        left: 25vw;
        animation: camera_open 1s forwards;
        width: 50vw;
        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: 40%;
        height: max-content;
        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: 22.8vmin;
        height: 36vmin;
        border-radius: 3px;
        padding: 10px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }
    .invoice_block_final {
        margin: 8% auto;
        border: 1px solid rgba(0, 0, 0, 0.178);
        background-color: #fff;
        width: 22.8vmin;
        height: 36vmin;
        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: 70%;
        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;
    }
    .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: 5vmin;
        line-height: 5vmin;
        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;
    }
    .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: 20%;
        text-align: center;
    }
    .list_show_d {
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 40%;
        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;
        width: 10%;
        text-align: center;
    }
    .allowance_show_b {
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 19%;
        text-align: center;
    }
    .allowance_show_c {
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 23%;
        text-align: center;
    }
    .allowance_show_d {
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 15%;
        text-align: center;
    }
    .allowance_show_e {
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 11%;
        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: 6vmin;
        height: 6vmin;
        text-align: center;
        line-height: 6vmin;
        cursor: pointer;
        transition: .1s;
    }
    .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;
    }
    .pic_btn {
        width: 12vw;
        height: 6vh;
        border: 1px gray solid;
        margin: 3% auto;
        background-color: #8080AB;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
        text-align: center;
        line-height: 6vh;
        cursor: pointer;
        transition: .1s;
        flex-shrink: 0;
        /*確保flex子元素不被壓縮 */
    }
    .pic_btn:hover {
        transform: scale(1.05);
        background-color: #F0F0F9;
    }
    #chart_total_info {
        width: 12vw;
        height: 6vh;
        border: 1px gray solid;
        margin: 3% auto;
        background-color: #ff9252;
        text-align: center;
        line-height: 6vh;
        flex-shrink: 0;
        /*確保flex子元素不被壓縮 */
    }
    .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: 15px;
        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: 0 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: 60%;
        text-align: left;
        left: 20%;
        bottom: 3%;
    }
    .tool-chart::after {
        content: attr(data-title);
        position: absolute;
        top: 0;
        right: calc(100% + 15px);
    }
    .tool-chart2 {
        position: relative;
        width: 60%;
        text-align: left;
        left: 20%;
        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: 40%;
        height: 0;
        float: right;
        margin-right: 25%;
        top: -130px;
        animation: slide-down 3s forwards;
        display: flex;
        align-items: center;
        animation-delay: 1s;
    }
    .running_msg_svg {
        width: 20%;
    }
    .running_msg_back {
        animation: slide-up 3s forwards;
    }
    @keyframes slide-down {
        0% {
            top: -130px;
        }
        100% {
            top: -30px;
        }
    }
    @keyframes slide-up {
        0% {
            top: -30px;
        }
        100% {
            top: -130px;
        }
    }
    @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 {
        animation: jumping 10s infinite backwards;
        width: 5vmin;
        height: 5vmin;
        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: 100%;
        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: 100%;
        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: 2vmin;
        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;
    }
    .repair:hover {
        transform: scale(1.05);
        background-color: #57423F;
    }
    .repair_svg {
        width: 2vmin;
        height: 2vmin;
    }
    .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;
    }
    .chart_btn {
        width: 12vw;
        height: 75vh;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .myChart_block {
        width: 80vw;
        height: 75vh;
        background-color: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .invoice_title_1 {
        font-size: 2.5vmin;
        text-align: center;
    }
    .invoice_title_2 {
        font-size: 1vmin;
        width: 50%;
        display: inline-block;
    }
    .invoice_title_3 {
        font-size: 1vmin;
    }
    .invoice_title_1_2 {
        font-size: 2.5vmin;
        text-align: center;
    }
    .invoice_title_2_2 {
        font-size: 1vmin;
        width: 50%;
        display: inline-block;
    }
    .invoice_title_3_2 {
        font-size: 1vmin;
    }
    .invoice_info_txt_num {
        font-size: 2.5vmin;
    }
    .invoice_info_txt {
        font-size: 1.8vmin;
    }
    .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: 60vw;
        height: 96vh;
        margin: 2vh auto;
        padding: 3vmin;
        border-radius: 10px;
        background-color: #cdcdc2;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }
    .remark_area {
        position: relative;
        top: 0;
        width: 100%;
        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: 7vh;
        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: fit-content;
        color: black;
        padding: 1vmin;
        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;
    }
    #print_details_block {
        display: flex;
        width: 90%;
        align-items: center;
        white-space: nowrap;
    }
    #cross_mark_printer {
        position: absolute;
        top: 1%;
        right: 1%;
        z-index: 2600;
        width: 4vh;
        cursor: pointer;
    }
    #cross_mark_printer:hover {
        transform: scale(1.05);
    }
    #printer_img_1 {
        width: 4vmin
    }
    #printer_img_ok_1 {
        width: 3vmin
    }
    #printer_img_ng_1{
        width: 3vmin
    }
    #printer_img_ng_2 {
        width: 3vmin
    }
    #printer_img {
        width: 4vmin
    }
    #printer_img_ok {
        width: 3vmin
    }
    #printer_img_ng {
        width: 3vmin
    }
    #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: 30vw;
        height: fit-content;
        position: absolute;
        top: 20%;
        left: 35vw;
        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: 20%;
    }
    #del_text {
        animation: fadein 0.2s ease 1;
    }
    #del_account:hover #del_text {
        display: block;
        opacity: 1;
    }
    #del_GRVC {
        margin-bottom: 1vmin;
    }
    #del_ID {
        margin-bottom: 1vmin;
    }
    /* 調整 input 框框的寬度和高度 */
    #photoInput {
        width: 400px;
        height: 100px;
        border: 2px dashed #ccc;
        /* 使用虛線邊框來標示範圍 */
        padding: 10px;
        /* 添加一些內距，讓虛線邊框更容易看見 */
        text-align: center;
        /* 文字置中對齊 */
        line-height: 80px;
        /* 控制文字行高，使其在框框中垂直置中 */
        font-size: 16px;
        /* 文字大小 */
        margin-bottom: 1vmin;
    }
    /* 在使用者拖拉檔案時變更框框樣式 */
    #photoInput.dragover {
        border-color: #4CAF50;
        /* 拖拉時的邊框顏色 */
        background-color: #f2f2f2;
        /* 拖拉時的背景色 */
        color: #ca7762;
        /* 拖拉時的文字顏色 */
    }
    /* 調整文字在框框內的位置 */
    #file_txt {
        color: rgb(250, 165, 85);
        /* 文字顏色 */
    }
    .print_sitting_btn{
        width: 9vmin;
        height: 4vmin;
        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: 20vh;
    justify-content: space-around;

    }
    .usb_info_input{
        width: 40%;
        background-color: #FFF;
        border-radius: 5px;
        border: 3px solid gray;
        height: 3.5vmin;
        margin-left: 1vmin;
    }
    .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;
    }