html {
           overflow: hidden;
       }
       /*載入動畫*/
       
       .load {
           position: relative;
           top: 50%;
           text-align: center;
           display: flex;
           justify-content: center;
           animation: fade_in 1s 1 forwards;
       }
       
       .dot {
           width: 8vmin;
           height: 8vmin;
           background: #3ac;
           border-radius: 100%;
           display: inline-block;
           font-family: verdana;
           pointer-events: none;
           z-index: 2500;
           font-size: 4vmin;
           line-height: 8vmin;
           border-radius: 100%;
           animation: slide 1.4s infinite ease-in-out;
       }
       
       .j {
           animation: jelly 1.4s infinite ease-in-out;
       }
       
       .j:nth-child(1) {
           animation-delay: 0.1s;
       }
       
       .j:nth-child(2) {
           animation-delay: 0.2s;
       }
       
       .j:nth-child(3) {
           animation-delay: 0.3s;
       }
       
       .j:nth-child(4) {
           animation-delay: 0.4s;
       }
       
       .j:nth-child(5) {
           animation-delay: 0.5s;
       }
       
       .j:nth-child(6) {
           animation-delay: 0.6s;
       }
       
       .j:nth-child(7) {
           animation-delay: 0.7s;
       }
       
       .j:nth-child(8) {
           animation-delay: 0.8s;
       }
       
       @keyframes slide {
           0% {
               transform: translateY(0%);
           }
           45% {
               transform: translateY(30%);
           }
           100% {
               transform: translateY(0%);
           }
       }
       
       @keyframes jelly {
           0% {
               transform: scale( 1)
           }
           30% {
               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)
           }
       }
       
       @keyframes fade_in {
           0% {
               opacity: 0;
           }
           100% {
               opacity: 1;
           }
       }
       
       .load_bg {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: #a7b5c2;
           z-index: 2900;
       }
       
       .disappear {
           clip-path: circle(100% at center);
           animation: disappear .3s ease-out forwards;
       }
       
       @keyframes disappear {
           0% {
               transform: scale(1, 1)translateY(0%);
               opacity: 1;
           }
           50% {
               transform: scale(0.1, 4)translateY(0%);
               opacity: 1;
           }
           100% {
               transform: scale(0, 0.5) translateY(80%);
               opacity: 0;
           }
       }
       
       .pro_container {
           width: 100%;
           height: 1.5em;
           position: relative;
           background-color: #f1f1f1;
           margin: 0 atuo;
       }
       
       .pro_bar {
           color: #fff!important;
           background-color: #4CAF50!important;
           background-color: #757575;
           height: 100%;
           position: absolute;
           line-height: inherit;
       }
       
       .pro_bar_bg {
           position: relative;
           top: 70%;
           margin: auto;
           text-align: center;
           width: 40vw;
       }
       
       .pro_bar_bg_out {
           position: fixed;
           top: 0%;
           left: 0%;
           width: 100vw;
           height: 100vh;
           z-index: 2900;
       }
       
       .running_msg {
           position: absolute;
           width: 90%;
           height: 5%;
           top: -100%;
           left: 5%;
           background-color: rgba(255, 255, 255, 0.5);
           animation: slide-down 1s forwards;
           display: flex;
           align-items: center;
           justify-content: center;
           z-index: 2900;
           border-bottom-left-radius: 1vmin;
           border-bottom-right-radius: 1vmin;
           border: 1px solid rgba(255, 115, 0, 0.274);
       }
       
       .running_msg_back {
           animation: slide-up 1s forwards;
       }
       
       .running_msg_svg {
           height: 5vmin;
       }
       
       @keyframes slide-down {
           0% {
               top: -100%;
           }
           100% {
               top: 0%;
           }
       }
       
       @keyframes slide-up {
           0% {
               top: 0%;
           }
           100% {
               top: -100%;
           }
       }
       
       @keyframes text-slide-down {
           0% {
               top: -100%;
           }
           20% {
               top: 0%;
           }
           80% {
               top: 0%;
           }
           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%;
       }
       
       #ask_block {
           background-color: #f2f2f2;
           border: 1px solid #ccc;
           border-radius: 5px;
           box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.7);
           width: 400px;
           height: 150px;
           display: flex;
           justify-content: center;
           align-items: center;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           flex-wrap: wrap;
           z-index: 2900;
       }
       
       #ask_msg {
           font-size: 18px;
           margin-bottom: 20px;
           text-align: center;
           width: 100%;
           color: #221d08;
       }
       
       #confirm_button {
           width: fit-content;
           height: 30px;
           border-radius: 5px;
           border: none;
           margin: 0 10px;
           cursor: pointer;
           background-color: green;
           color: #fff;
           transition: .1s;
           -webkit-user-select: none;
           -moz-user-select: none;
           -o-user-select: none;
           user-select: none;
           box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
           text-align: center;
           /* line-height: 12px;*/
           padding: 1vmin;
           display: flex;
           justify-content: center;
           align-items: center;
       }
       
       #confirm_button:hover {
           transform: scale(1.05);
       }
       
       #cancel_button {
           width: fit-content;
           height: 30px;
           border-radius: 5px;
           border: none;
           margin: 0 10px;
           cursor: pointer;
           background-color: red;
           color: #fff;
           transition: .1s;
           -webkit-user-select: none;
           -moz-user-select: none;
           -o-user-select: none;
           user-select: none;
           box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
           text-align: center;
           /*   line-height: 12px;*/
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 1vmin;
       }
       
       #cancel_button:hover {
           transform: scale(1.05);
       }
           #check_einvoice_div {
        animation: jump_einvoice 1.4s infinite ease-in-out;
        position: absolute;
        text-align: center;
        z-index: 3000;
        cursor: pointer;
        top: 60%;
        left: 50%;
    }
    @keyframes jump_einvoice {
        0%{
            transform: translate(-50%, -10%);
        }
        45% {
            transform: translate(-50%, 0%);
        }
        100% {
            transform: translate(-50%, -10%);
        }
    }
    .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;
    }