/* 手機 */
@media screen and (max-width: 767px) {
    .select-customer {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10 !important;
    }
    
    /* ---------------------------------------------------------------------------------------------------- */
    
    .select-customer > .area1 > .content > .function-box {
        width: 100%;
        background-color: #ffffff;
        border: 1px solid #d7d7d7;
        border-radius: 8px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box {
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        padding: 20px;
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box > div {
        width: calc(50% - 7.5px);
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box > .check-box {
        align-self: flex-end;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box > .check-box > .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box > .check-box > .box > input {
        width: 16px;
        height: 16px;
    }
    
    /* ---------------------------------------------------------------------------------------------------- */
    
    .select-customer > .area1 > .content > .table-div { margin-bottom: 40px; }
    
    /* ---------------------------------------------------------------------------------------------------- */
    
    .select-customer > .footer > .box_close {
        align-items: center;
    }
    
    .select-customer > .footer > .box_close > .pagination-box > .pagination-bar > .item {
        width: 33px;
        min-width: 33px;
        height: 33px;
    }
    
    .select-customer > .footer > .box_close > .pagination-box > .pagination-bar > .item > input {
        width: 100%;
    }
    
    .select-customer > .footer > .box_close > .pagination-box > .pagination-bar > .btn_select {
        width: 60px;
        height: 33px;
    }
    
    .select-customer > .footer > .box_close > .pagination-box {
        width: 100%;
        height: 40px;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .select-customer > .footer > .box_close > .item {
        width: 100%;
        justify-content: space-between;
    }
    
    .select-customer > .footer > .box_close > .item > .btn_close {
        color: #ffffff;
    }
}

/* PC */
@media screen and (min-width: 768px) {
    .select-customer {
        width: 600px;
        height: 644px;
        position: fixed;
        top: calc((100vh - 644px) / 2);
        left: calc((100vw - 600px) / 2);
        z-index: 2;
    }
    
    /* ---------------------------------------------------------------------------------------------------- */
    
    .select-customer > .area1 > .content {
        padding: 20px 0px 20px 20px;
    }

    .select-customer > .area1 > .content > .function-box {
        width: calc(100% - 20px);
        background-color: #ffffff;
        border: 1px solid #d7d7d7;
        border-radius: 8px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box {
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        padding: 20px;
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box > div {
        width: calc(50% - 7.5px);
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box > .check-box {
        align-self: flex-end;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box > .check-box > .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
    }
    
    .select-customer > .area1 > .content > .function-box > .search-box > .check-box > .box > input {
        width: 16px;
        height: 16px;
    }
    
    /* ---------------------------------------------------------------------------------------------------- */
    
    .select-customer > .area1 > .content > .table-div { width: calc(100% - 3px); height: calc(100% - 174px); }
    
    .select-customer > .area1 > .content > .table-div .tr > .td:nth-child(1) { flex: 0 0 100px; }

    /* ---------------------------------------------------------------------------------------------------- */
    
    .select-customer > .footer > .box_close > .pagination-box {
        height: 40px;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .select-customer > .footer > .box_close > .pagination-box > .pagination-bar > .item {
        width: 33px;
        min-width: 33px;
        height: 33px;
    }
    
    .select-customer > .footer > .box_close > .pagination-box > .pagination-bar > .item > input {
        width: 100%;
    }
    
    .select-customer > .footer > .box_close > .pagination-box > .pagination-bar > .btn_select {
        width: 60px;
        height: 33px;
    }

    .select-customer > .footer > .box_close > .item > .btn_close {
        color: #ffffff;
    }
}