.odd-h2 {
    text-align: left; 
    font-size: 130% !important
}
.odd-h3 {
    word-spacing: normal; 
    font-size: 110% !important
}
.odd-h4 {
    word-spacing: normal; 
    font-size: 100% !important
}
.odd-weight {
    font-weight: bold;
}
.odd-padding-side {
    padding-left:1em;
    padding-right:1em;
}
.odd-padding-side-05 {
    padding-left: .5em;
    padding-right:.5em;
}
.odd-padding-side-0 {
    padding-left:0em !important;
    padding-right:0em !important;
}
.odd-col-gap {
    column-gap: .5em;
}

.odd-hidden {
    display:none !important;
}
.odd-block {
    display: block;
}
.odd-flex-block {
    display: flex;
    flex-direction: column;
    gap:0.5em;
    height: fit-content;
}
.odd-inline-block {
    display: inline-block !important;
}

.odd-fake-ul {
    list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

.odd-booking-memeber-status-on {
    color: var(--odd-metro-blue);
    font-weight: bold;
}

.odd-booking-memeber-status-off {
    color: var(--odd-red);
    font-weight: bold;
}

.odd-red-text {
    color: var(--odd-red);
    font-weight: bold;
}
.odd-basic-container {
    white-space:pre;
}
/* 左右空間  */
.odd-side-padding-5 {
    margin-left: 5%;
    margin-right: 5%;
}
.odd-grid-left {
    justify-content: left;
}

.odd-grid-center {
    justify-content: center;
}

.odd-grid-right {
    justify-content: right;
}

.odd-grid-align-item {
    align-items: center
}

/*一般用途的內容設定 Begin*/
.odd-normal-content {
    white-space: normal;
    line-height: 200%;

}
/*一般用途的內容設定 END*/
/*一般用途的 ul li Begin*/
.odd-common-ul-block {
    list-style: none;
    padding-top: 0px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 0px;
    margin: 8px;
}
.odd-ul-local-style.span, .odd-ul-local-style.a, .odd-ul-local-style.p {
    list-style-position: outside !important;
}
.odd-common-ul-block-incenter {
    list-style: none;
    padding-top: 0px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 0px;
    margin: 8px;
    text-align: center;
}

.odd-common-ul-lis {
    padding-top: 4px;
    padding-bottom: 4px;
}
.odd-common-ul-lis a {
    text-decoration: none;
    cursor: pointer;
    border-inline-end:  1px solid var(--odd-light);
    margin-right:0.5em;
    padding-right: 0.5em;
}
.odd-common-ul-lis a:last-child {
    border-inline-end:none;
    margin-right:0em;
    padding-right: 0em;
}
.odd-common-ul-lis-inline {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
}

.odd-common-ul-lis-inline:first-child {
    padding-top: 0px;
    padding-bottom: 4px;
}

.odd-common-ul-block a {
    text-decoration: none;
}

/*一般用途的 ul li End */
/* 封面是新聞的 ul li Begin */
.odd-imgnews-ul-block {
    list-style: none;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 8px;
    margin: 0px;
}

.odd-imgnews-ul-block a {
    text-decoration: none;
}

.odd-imgnews-ul-lis {
    padding-top: 4px;
    padding-bottom: 4px;
}

.odd-imgnews-ul-lis-inline {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* 封面是新聞的 ul li End */
/* 字體大小 Begin */
.odd-text-80 {
    font-size: 80%;
}

.odd-text-90 {
    font-size: 90%;
}

.odd-text-110 {
    font-size: 110%;
}

.odd-text-120 {
    font-size: 120%;
}

/* 字體大小 End */
/* 粗字體 Begin */
.odd-fontweight-b {
    font-weight: bold;
}

/* 粗字體 End */
/*用於文字編輯的區域 Begin*/
.odd-for-word-container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    white-space: normal;
    word-break: break-all;
    line-height:180%;
    padding: 0 1em 0
}
.odd-for-word-container ul, .odd-for-word-container ol {
    list-style-position: outside;
}
.odd-for-word-container li {
    padding: 0.5em 00.5em 0;
}
/*用於文字編輯的區域 end*/
/* 顏色設定 */
.odd-red {
    color: var(--odd-red);
}

/*寬度設置*/
.odd-form-width-full {
    width: 100%;
}

.odd-form-width-half {
    width: 50%;
}

.odd-form-width-third {
    width: 33.33333%;
}

.odd-form-width-quarter {
    width: 25%;
}

.odd-form-width-200-1000 {
    min-width: 200px;
    max-width: 1000px;
}

.odd-form-width-100-200 {
    min-width: 100px;
    max-width: 200px;
}

.odd-form-width-50-100 {
    min-width: 50px;
    max-width: 100px;
}

.odd-form-width-30-100 {
    min-width: 30px;
    max-width: 100px;
}
/* 系統設定的版面*/
.odd-sys-block {
    display: grid;
    grid-template-columns: repeat(auto-fill, 110px);
    grid-template-rows: auto;
    column-gap: 1em;
    row-gap: 1em;

}
.odd-sys-items {
    display: grid;
    justify-content: center;
    align-items: center;
    padding:16px 0 16px 0;
    border-radius: 5px;
    /*width:100px;
    height:100px;
    
    font-size: 110%;
    padding-left: 30%;
    padding-right:30%;
    padding-top:20%;
    padding-bottom:20%;
    white-space:normal;*/
    font-weight: bold;
}
.odd-sys-items a {
    text-decoration: none !important;
    cursor: pointer;
}
/*使用 grid 的區塊屬性*/
.odd-block-grid-row {
    display: grid !important;
    grid-template-rows: auto;
}
.odd-block-grid-row-charts {
    display: grid !important;
    /* grid-template-rows: minmax(300px, 500px); */
    justify-content: center;
    padding-top:1em;
    padding-bottom:1em
}
.odd-block-grid-row-gap-s {
    row-gap: 0.25em;
}
.odd-block-grid-row-gap-n {
    row-gap: 0.5em;
}
.odd-block-grid-row-gap-l {
    row-gap: 1em;
}
.odd-block-grid-row-col {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
}
.odd-between-space {
    padding: 0 1em 0 1em;
}
/*左右兩欄開始*/
.odd-form-2col-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    row-gap: .5em;
    padding-top:.5em;
    padding-bottom:.5em
}
.odd-col-block-space-normal {
    column-gap: 2em;
    row-gap: 1em;
    padding-top:1em;
    padding-bottom:1em
}
.odd-col-block-space-small {
    column-gap: 1em;
    row-gap: 0.5em;
    padding-top:0.5em;
    padding-bottom:0.5em
}

.odd-1-1-col-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
}
.odd-1-1-1-col-block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2em;
    row-gap: 1em;
    /*padding-top:1em;
    padding-bottom:1em*/
}

.odd-3-1-col-block {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 2em;
    row-gap: 1em;
    /*padding-top:1em;
    padding-bottom:1em*/
}
.odd-1-3-col-block{
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 2em;
    row-gap: 1em;
    padding-top:1em;
    padding-bottom:1em
}
.odd-1-4col-block {
    display: grid;
    grid-template-columns: 1fr 4fr;
    column-gap: 2em;
    row-gap: 1em;
    padding-top:1em;
    padding-bottom:1em
}
.odd-1-3-1-col-block {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    column-gap: 2em;
    row-gap: 1em;
    padding-top:1em;
    padding-bottom:1em
}
.odd-form-2col-block-iread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    row-gap: 0.5em;
    padding-top:0.5em;
    padding-bottom:0.5em
}
.odd-form-2col-block-inper {
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 2em;
    row-gap: 1em;
    padding-top:1em;
    padding-bottom:1em
}
.odd-form-1-3col-block {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 2em;
    row-gap: 1em;
    padding-top:1em;
    padding-bottom:1em
}
.odd-form-1-3col-block-examResult {
    display: grid;
    grid-template-columns: 2fr 3fr;
    column-gap: 2em;
    row-gap: 1em;
    padding-top:1em;
    padding-bottom:1em
}
.odd-form-1-3col-block-top {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 2em;
    row-gap: 1em;
    padding-top:1em;
    padding-bottom:1em;
    align-items: start;
}
.odd-form-1-3col-block-iread {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 1em;
    row-gap: 0.5em;
    padding-top:1em;
    /* padding-bottom:1em */
}
.odd-form-3-1col-block {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 1em;
    row-gap: 1em;
    padding-top:1em;
    padding-bottom:1em
}
/*左右兩欄結束*/
/* flex block 的基本版面配置使用 開始*/
.odd-block-flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 1.5em;
}
.odd-block-flex {
    display: flex;
}
.odd-block-flex-row-top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 2em;
}
.odd-block-flex-items {
    flex: 1 1 100%;
}
.odd-block-flex-items-1 {
    flex: 1 1;
}
.odd-block-flex-items-2 {
    flex: 2 1;
}
.odd-block-flex-items-3 {
    flex: 3 1;
}
.odd-block-flex-items-4 {
    flex: 4 1;
}
.odd-block-flex-local-right {
    justify-content: flex-end
}
/* flex block 的基本版面配置使用 END */
/*當 Block 要上底色時使用，顏色另外定義*/
.odd-block-background {
    margin: 0px !important;
    height: 90% !important;
    width: 90% !important;
    line-height: 50%;
}
/*外框設計*/
.odd-border-block-style {
    border: 1px solid lightgray;
    padding: 0.25em 1em 0.25em 1em;
}
.odd-cards {
    border-radius: 5px;
    margin-block-end: 8px;
    margin-block-start: 8px;
    padding-block-start: 4px;
    padding-block-end: 4px;

    margin-left: 8px;
    margin-right: 8px;


}
/*圓角*/
.odd-round {
    border-radius: 10px;
}
/* border-ling begin*/
.odd-border-right {
    border-right: 2px solid var(--odd-ios-gray);
    margin-left:0.5em
}
.odd-border-bottom {
    border-bottom: 1px solid var(--odd-disable);
}
/*小提示 開始*/
.odd-tool-tip {
    display: ;
    position: relative;
}
.odd-tool-tip::after {
    display: none;
    content: attr(data-odd-style-tool-tip);
    margin-left: 30px;
    top: 0;
    padding: 10px;
    border: 1px solid var(--odd-darkblue);
    position: absolute;
    font-size: var(--odd-small) !important;
    min-width: 100px;
    max-width: 150px;
    white-space: normal;
    color: var(--odd-darkblue) !important;
    font-weight: 800;
    background-color: white;
    z-index: 10;
}
.odd-tool-tip:hover::after {
    display: block;

}
/*小提示 結束*/
/*點我上傳開始*/
.odd-click-upload-items {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100px
}
.odd-click-upload-items::after {
    content: attr(data-ckick-upload-button);
    color: var(--odd-arrow);
    font-weight: bold;
    font-size: var(--odd-large);
}
.odd-dropupload-click {
    text-decoration: none;
    cursor: copy;
}
/*點我上傳結束*/
@media only screen and (max-width:601px) {
    .odd-border-right {
        border-right: none solid var(--odd-ios-gray);
    }
    .odd-tool-tip:hover::after {
        display: none;
    }
    /*左右兩欄開始*/
    .odd-form-1-3col-block-examResult {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em
    }
    .odd-1-1-1-col-block {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em
    }
    .odd-1-4col-block {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em
    }
    .odd-3-1-col-block{
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em
    }
    .odd-1-3-col-block{
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em
    }
    .odd-1-3-1-col-block {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em
    }
    .odd-block-grid-row-charts {
        display: grid !important;
        grid-template-rows: auto;
        justify-content: center;
    }
    .odd-form-2col-block {
        display: grid;
        grid-template-columns: 1fr ;
        grid-template-rows: auto;
        row-gap: 0.5em;
    }
    .odd-form-2col-block-iread {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 0.5em;
        padding-top:0.5em;
        padding-bottom:0.5em
    }
    .odd-form-1-3col-block-iread {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 0.5em;
        padding-top:1em;
        /* padding-bottom:1em */
    }
    .odd-form-1-3col-block {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em
    }
    .odd-form-1-3col-block-top {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em;
        align-items: start;
    }
    .odd-form-3-1col-block {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em
    }
    /*左右兩欄結束*/
    .odd-block-grid-row {
        margin-bottom:0.25em
    }
    .odd-block-flex-row-top {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        column-gap: 2em;
    }
    .odd-block-flex-items-1 {
        flex: 1 0 100%;
    }
    .odd-block-flex-items-2 {
        flex: 1 0 100%;
    }
    .odd-block-flex-items-3 {
        flex: 1 0 100%;
    }
    .odd-block-flex-items-4 {
        flex: 1 0 100%;
    }
}
@media screen and (max-width:1024px) and (min-width:602px) {
    .odd-form-1-3col-block-top {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0em;
        row-gap: 1em;
        padding-top:1em;
        padding-bottom:1em;
        align-items: start;
    }
    .odd-form-2col-block {
        display: grid;
        grid-template-columns: 1fr ;
        grid-template-rows: auto;
        row-gap: 0.5em;
    }
    .odd-form-2col-block-iread {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 0.5em;
        padding-top:0.5em;
        padding-bottom:0.5em
    }
 }

@media screen and (max-width:1180px) and (min-width:1025px) { }
@media screen and (max-width:1920px) and (min-width:1181px) { }
@media only screen and (min-width:1921px) { }