.odd-pagination-block-2nd {
    display: flex;
    justify-content: center; 
    padding:.5em 0
}

.odd-pagination-item-pages-ul-2nd {
    display: flex;
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    align-items: center;
}

.odd-pagination-item-select-ul-2nd {
    display: flex;
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    align-items: center; 
    column-gap: .5em
}
.odd-pagination-icon {
    /* font-size: 100%;
    margin-block-end: 4px;
    margin-block-start: 4px;
    padding-block-start: 4px;
    padding-block-end:4px; 
    padding-left: 6px;
    padding-right: 6px;
    margin-left: 4px;
    margin-right:4px;
    text-decoration: none;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif; */
    display: flex;
    width: 2.5em;
    height: 2em;
    border: 1px lightgray solid;
    align-items: center;
    justify-content: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.odd-pagination-icon:hover {
    background-color: var(--odd-light-gray);
}
.odd-pagination-block {
    display: flex;
    column-gap: 1em;
    width: 100%;
    padding-top: 1.5em
}



.odd-odd-pagination-main-items-block {
    display: grid;
    grid-template-columns: 1fr 1fr max-content 1fr 1fr;
    list-style: none;
    margin: 0px;
    padding: 0px
}



.odd-odd-pagination-main-items-block-items {
    display: grid;
}

.odd-pagination-select-items-block {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    list-style: none;
    margin: 0px;
    padding: 0px
}



@media only screen and (max-width:1179px) {
    .odd-pagination-main-items {
        flex: 1 1 100%;
        display: flex;
        justify-content: center;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
    }

    .odd-pagination-select-items {
        display: none;
    }
    .odd-pagination-item-pages-2nd {
        display: flex;
        flex:1 1 100% ; 
        justify-content: center; 
        padding-left: 10%;
    }
    .odd-pagination-item-select-2nd {
        display: none
    }
}
@media screen and (max-width:1024px) and (min-width:602px) { }
@media screen and (max-width:1180px) and (min-width:1025px) { }
@media screen and (max-width:1920px) and (min-width:1180px) {
    
    .odd-pagination-main-items {
        flex: 1 1 80%;
        display: flex;
        justify-content: center;
        padding-left:15%;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
    }
    
    .odd-pagination-select-items {
        flex: 1 0 15%;
        display: flex;
        justify-content: flex-end;
    }
    .odd-pagination-item-pages-2nd {
        display: flex;
        flex:1 1 80% ; 
        justify-content: center; 
        padding-left: 10%;
    }
    .odd-pagination-item-select-2nd {
        display: flex;
        flex: 1 1 20%; 
        justify-content: center;
    }
 }
@media only screen and (min-width:1921px) {
    .odd-pagination-item-pages-2nd {
        display: flex;
        flex:1 1 80% ; 
        justify-content: center; 
        padding-left: 10%;
    }
    .odd-pagination-item-select-2nd {
        display: flex;
        flex: 1 1 20%; 
        justify-content: center;
    }
}

/*以下是範本
<div class="odd-block">
    <div class="odd-pagination-block">
        <div class="odd-pagination-main-items">
            <ul class="odd-odd-pagination-main-items-block odd-border-block-style">
                <li class="odd-odd-pagination-main-items-block-items odd-grid-left">
                    <a data-pagination-bar-direction-btn='first' class="w3-button w3-left">&#10094;&#10094;</a>
                </li>
                <li class="odd-odd-pagination-main-items-block-items odd-grid-left">
                    <a data-pagination-bar-direction-btn='previous' class="w3-button w3-left">&#10094;</a>
                </li>
                <li class="odd-odd-pagination-main-items-block-items odd-grid-center">
                    <span data-pagination-bar></span>
                </li>
                <li class="odd-odd-pagination-main-items-block-items odd-grid-right">
                    <a data-pagination-bar-direction-btn='forword' class="w3-button w3-right">&#10095;</a>
                </li>
                <li class="odd-odd-pagination-main-items-block-items odd-grid-right">
                    <a data-pagination-bar-direction-btn='last' class="w3-button w3-right">&#10095;&#10095;</a>
                </li>
            </ul>

        </div>
        <div class="odd-pagination-select-items">
            <ul class="odd-pagination-select-items-block ">
                <li class="odd-odd-pagination-main-items-block-items odd-grid-align-item">
                    <span class="">
                        每頁數量
                    </span>
                </li>
                <li class="odd-odd-pagination-main-items-block-items ">
                    
                    <select class="odd-form-select" data-pagenation-perpageamount='{{tabName}}'>
                        <option value="10">10&nbsp;則</option>
                            {% for i in range(3) %}
                                <option value="{{ (i + 2) * 10 }}">{{ (i + 2) * 10 }}&nbsp;則</option>
                            {% endfor %}
                        </option>
                    </select>
                </li>
            </ul>
        </div>
    </div>
</div>
*/