/*-----Terry Chang ver.------ 
----------------------------- 
--------////CATALOG////------ 
------------$display--------- 
------------$position-------- 
------------$flex------------ 
------------$float----------- 
------------$margin---------- 
------------$padding--------- 
------------$z-index--------- 
------------$Bootstrap Grid-- 
-----------------------------
 ----------20210205-----------*/


/* $display */

.db {
    display: block;
}

.dib {
    display: inline-block;
}

.bd {
    border: 1px solid black;
}

.h100 {
    height: 100% !important;
}

.w100 {
    width: 100% !important;
}

.maxw100 {
    max-width: 100% !important;
}


/* $position */

.poe {
    position: relative;
}


/* $flex */

.flexLC {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.flexLT {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.flexRC {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.flexCC {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.flexSB {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.flexSA {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

.flexSE {
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    /* 用在IE上 jcse會沒作用 ,解法為設jcsb並激活before＆after偽元素 */
}

.flexCCC {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}

.flexWrap {
    flex-wrap: wrap !important;
}

.flexDirRow {
    flex-direction: row !important;
}

.flexDirColumn {
    flex-direction: column !important;
}

.flexLC.flexDirColumn {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-direction: column !important;
}

.flexRC.flexDirColumn {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    flex-direction: column !important;
}

.flexDirRow-rev {
    flex-direction: row-reverse !important;
}

.flexDirColumn-rev {
    flex-direction: column-reverse !important;
}

@media (max-width: 1269px) {
    .flexLT-md {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-direction: row !important;
    }
    .flexCC-md {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: row !important;
    }
    .flexCCC-md {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
    }
    .flexWrap-md {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 767px) {
    .flexLT-sm {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-direction: row !important;
    }
    .flexCC-sm {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: row !important;
    }
    .flexCCC-sm {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
    }
    .flexWrap-sm {
        flex-wrap: wrap !important;
    }
}

.flexShrink-0 {
    flex-shrink: 0 !important;
}

.flexGrow-0 {
    flex-grow: 0 !important;
}


/* $float */

.float-left {
    float: left !important;
    vertical-align: middle !important;
    position: relative !important;
}

.float-right {
    float: right !important;
    vertical-align: middle !important;
    position: relative !important;
}

@media (min-width: 1270px) {
    .float-right-lg-u {
        float: right !important;
    }
}


/* $margin */

.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0px !important;
}

.mt-4 {
    margin-top: 4px !important;
}

.mt-sm {
    margin-top: 8px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-md {
    margin-top: 24px !important;
}

.mt-lg {
    margin-top: 48px !important;
}

.mt-xl {
    margin-top: 80px !important;
}

.mt-xxl {
    margin-top: 102px !important;
}

.mr-0 {
    margin-right: 0px !important;
}

.mr-4 {
    margin-right: 4px !important;
}

.mr-sm {
    margin-right: 8px !important;
}

.mr-md {
    margin-right: 24px !important;
}

.mr-lg {
    margin-right: 48px !important;
}

.mr-xl {
    margin-right: 80px !important;
}

.mr-xxl {
    margin-right: 102px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-4 {
    margin-bottom: 4px !important;
}

.mb-sm {
    margin-bottom: 8px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mb-md {
    margin-bottom: 24px !important;
}

.mb-lg {
    margin-bottom: 48px !important;
}

.mb-xl {
    margin-bottom: 80px !important;
}

.mb-xxl {
    margin-bottom: 102px !important;
}

.ml-0 {
    margin-left: 0px !important;
}

.ml-4 {
    margin-left: 4px !important;
}

.ml-sm {
    margin-left: 8px !important;
}

.ml-md {
    margin-left: 24px !important;
}

.ml-lg {
    margin-left: 48px !important;
}

.ml-xl {
    margin-left: 80px !important;
}

.ml-xxl {
    margin-left: 102px !important;
}

@media (min-width: 1270px) {
    .mt-0-lg-u {
        margin-top: 0px !important;
    }
    .mb-0-lg-u {
        margin-bottom: 0px !important;
    }
    .ml-0-lg-u {
        margin-left: 0px !important;
    }
    .mr-0-lg-u {
        margin-right: 0px !important;
    }
}

@media (max-width: 1269px) {
    .ml-md-md-d {
        margin-left: 24px !important;
    }
    .mb-md-md-d {
        margin-bottom: 24px !important;
    }
    .mr-md-md-d {
        margin-right: 24px !important;
    }
    .mt-md-md-d {
        margin-top: 24px !important;
    }
    .ml-sm-md-d {
        margin-left: 8px !important;
    }
    .mb-sm-md-d {
        margin-bottom: 8px !important;
    }
    .mr-sm-md-d {
        margin-right: 8px !important;
    }
    .mt-sm-md-d {
        margin-top: 8px !important;
    }
    .mt-0-md-d {
        margin-top: 0px !important;
    }
    .mb-0-md-d {
        margin-bottom: 0px !important;
    }
    .ml-0-md-d {
        margin-left: 0px !important;
    }
    .mr-0-md-d {
        margin-right: 0px !important;
    }
}

@media (min-width: 768px) {
    .mt-0-md-u {
        margin-top: 0px !important;
    }
    .mb-0-md-u {
        margin-bottom: 0px !important;
    }
    .mr-0-md-u {
        margin-right: 0px !important;
    }
    .ml-0-md-u {
        margin-left: 0px !important;
    }
}

@media (max-width: 767px) {
    .mt-0-sm-d {
        margin-top: 0px !important;
    }
    .ml-0-sm-d {
        margin-left: 0px !important;
    }
    .mr-0-sm-d {
        margin-right: 0px !important;
    }
    .mb-0-sm-d {
        margin-bottom: 0px !important;
    }
    .ml-lg-sm-d {
        margin-left: 48px !important;
    }
    .mb-lg-sm-d {
        margin-bottom: 48px !important;
    }
    .mr-lg-sm-d {
        margin-right: 48px !important;
    }
    .mt-lg-sm-d {
        margin-top: 48px !important;
    }
    .ml-md-sm-d {
        margin-left: 24px !important;
    }
    .mb-md-sm-d {
        margin-bottom: 24px !important;
    }
    .mr-md-sm-d {
        margin-right: 24px !important;
    }
    .mt-md-sm-d {
        margin-top: 24px !important;
    }
    .ml-sm-sm-d {
        margin-left: 8px !important;
    }
    .mb-sm-sm-d {
        margin-bottom: 8px !important;
    }
    .mr-sm-sm-d {
        margin-right: 8px !important;
    }
    .mt-sm-sm-d {
        margin-top: 8px !important;
    }
}


/* $padding */

.p-0 {
    padding: 0 !important;
}

.pt-0 {
    padding-top: 0px !important;
}

.pt-sm {
    padding-top: 8px !important;
}

.pt-md {
    padding-top: 24px !important;
}

.pt-lg {
    padding-top: 48px !important;
}

.pt-xl {
    padding-top: 80px !important;
}

.pt-xxl {
    padding-top: 102px !important;
}

.pr-0 {
    padding-right: 0px !important;
}

.pr-4 {
    padding-right: 4px !important;
}

.pr-sm {
    padding-right: 8px !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pr-md {
    padding-right: 24px !important;
}

.pr-lg {
    padding-right: 48px !important;
}

.pr-xl {
    padding-right: 80px !important;
}

.pr-xxl {
    padding-right: 102px !important;
}

.pb-0 {
    padding-bottom: 0px !important;
}

.pb-sm {
    padding-bottom: 8px !important;
}

.pb-md {
    padding-bottom: 24px !important;
}

.pb-lg {
    padding-bottom: 48px !important;
}

.pb-xl {
    padding-bottom: 80px !important;
}

.pb-xxl {
    padding-bottom: 102px !important;
}

.pl-0 {
    padding-left: 0px !important;
}

.pl-sm {
    padding-left: 8px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-md {
    padding-left: 24px !important;
}

.pl-lg {
    padding-left: 48px !important;
}

.pl-xl {
    padding-left: 80px !important;
}

.pl-xxl {
    padding-left: 102px !important;
}

@media (min-width: 1270px) {
    .pl-0-lg-u {
        padding-left: 0px !important;
    }
    .pr-0-lg-u {
        padding-right: 0px !important;
    }
    .pt-0-lg-u {
        padding-top: 0px !important;
    }
    .pb-0-lg-u {
        padding-bottom: 0px !important;
    }
    .pl-lg-lg-u {
        padding-left: 48px !important;
    }
    .pr-lg-lg-u {
        padding-right: 48px !important;
    }
    .pt-lg-lg-u {
        padding-top: 48px !important;
    }
    .pb-lg-lg-u {
        padding-bottom: 48px !important;
    }
    .pl-xl-lg-u {
        padding-left: 80px !important;
    }
    .pr-xl-lg-u {
        padding-right: 80px !important;
    }
    .pt-xl-lg-u {
        padding-top: 80px !important;
    }
    .pb-xl-lg-u {
        padding-bottom: 80px !important;
    }
}

@media (max-width: 1269px) {
    .pr-15-md-d {
        padding-right: 15px !important;
    }
    .pl-15-md-d {
        padding-left: 15px !important;
    }
    .pt-15-md-d {
        padding-top: 15px !important;
    }
    .pb-15-md-d {
        padding-bottom: 15px !important;
    }
    .pr-0-md-d {
        padding-right: 0px !important;
    }
    .pl-0-md-d {
        padding-left: 0px !important;
    }
    .pt-0-md-d {
        padding-top: 0px !important;
    }
    .pb-0-md-d {
        padding-bottom: 0px !important;
    }
}

@media (min-width: 768px) {
    .pt-0-md-u {
        padding-top: 0px !important;
    }
    .pb-0-md-u {
        padding-bottom: 0px !important;
    }
    .pr-0-md-u {
        padding-right: 0px !important;
    }
    .pl-0-md-u {
        padding-left: 0px !important;
    }
}

@media (max-width: 767px) {
    .pl-0-sm-d {
        padding-left: 0px !important;
    }
    .pb-0-sm-d {
        padding-bottom: 0px !important;
    }
    .pr-0-sm-d {
        padding-right: 0px !important;
    }
    .pt-0-sm-d {
        padding-top: 0px !important;
    }
    .pl-md-sm-d {
        padding-left: 24px !important;
    }
    .pb-md-sm-d {
        padding-bottom: 24px !important;
    }
    .pr-md-sm-d {
        padding-right: 24px !important;
    }
    .pt-md-sm-d {
        padding-top: 24px !important;
    }
    .pl-sm-sm-d {
        padding-left: 8px !important;
    }
    .pb-sm-sm-d {
        padding-bottom: 8px !important;
    }
    .pr-sm-sm-d {
        padding-right: 8px !important;
    }
    .pt-sm-sm-d {
        padding-top: 8px !important;
    }
}

@media (max-width: 375px) {
    .pl-0-xs-d {
        padding-left: 0px !important;
    }
    .pb-0-xs-d {
        padding-bottom: 0px !important;
    }
    .pr-0-xs-d {
        padding-right: 0px !important;
    }
    .pt-0-xs-d {
        padding-top: 0px !important;
    }
}


/* $z-index */

.zindex-0 {
    z-index: 0 !important;
}

.zindex-5 {
    z-index: 5 !important;
}

.zindex-7 {
    z-index: 7 !important;
}

.zindex-10 {
    z-index: 10 !important;
}

.zindex-20 {
    z-index: 20 !important;
}

.zindex-30 {
    z-index: 30 !important;
}

.zindex-40 {
    z-index: 40 !important;
}

.zindex-50 {
    z-index: 50 !important;
}

.zindex-60 {
    z-index: 60 !important;
}

.zindex-70 {
    z-index: 70 !important;
}