/*
flex排版樣式
Utility
頁面容器設定
header選單
footer頁尾
*/


/* @flex排版樣式---------------------------------------------------------------------------------------------- */

.flex_row {
    display: flex;
    flex-direction: row;
}

.flex_col {
    display: flex;
    flex-direction: column;
}

.flex_row_cc {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.flex_row_c {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex_row_ce {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.flex_row_cb {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.flex_row_ca {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.flex_row_tc {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

.flex_row_tb {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.flex_row_sb {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}

.flex_row_sc {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

.flex_col_cc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flex_col_ct {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.flex_col_tc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.flex_col_cb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.flex_wrap {
    flex-wrap: wrap;
}

.flex_none {
    flex: none;
}

.row_reverse {
    flex-direction: row-reverse;
}


/* 設定欄位寬度 */

.flex_25 {
    flex: 0 0 25%;
}

.flex_35 {
    flex: 0 0 35%;
    margin-right: 2rem;
}

.flex_65 {
    flex: 0 0 65%;
    margin-right: 0.5rem;
}

/* 欄位寬度均分二等分，間距16px */
.flex_50 {
    flex: 0 1 calc(50% - 8px);
}

/* 欄位寬度均分三等分，間距16px */
.flex_33 {
    flex: 0 1 calc((100% - 48px) / 3)
}



/* @End flex排版樣式---------------------------------------------------------------------------------------------- */



/* @Utility ---------------------------------------------------------------------------------------------- */

/* ---寬度及高度設定--- */

.transferSection .w_100 {
    width: 100% !important;
}

.transferSection .w_50 {
    width: 50% !important;
}

.transferSection .h_100 {
    height: 100% !important;
}

/* ---排版共用設定--- */

.transferSection .mb_0 {
    margin-bottom: 0 !important;
}

.transferSection .mb_4 {
    margin-bottom: 1rem !important;
}

.transferSection .mt_0 {
    margin-top: 0 !important;
}

.transferSection .mt_4 {
    margin-top: 1rem !important;
}

.transferSection .lh_1 {
    line-height: 1 !important;
}

/* End Utility ---------------------------------------------------------------------------------------------- */


/* @Container  -------------------------------------------------------------------------------------------- */

/* APP safe-area設定 */
.transferSection .container {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    /* Status bar height on iOS 11+ */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: transparent;
}

.transferSection .container::before {
    content: "";
    height: env(safe-area-inset-top);
    width: 100%;
    display: block;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

/* ---頁面區塊控制寬度及置中--- */
.transferSection .wrapper {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    position: relative;
}

.transferSection .wrapper_sm {
    max-width: 800px;
    margin: auto;
}

.transferSection .wrapper_md {
    max-width: 1200px;
    margin: auto;
}

.transferSection .wrapper_lg {
    width: 95%;
    max-width: 1360px;
    margin: auto;
}


/* ---頁面區塊間距--- */
.transferSection section {
    margin-bottom: 100px;
    position: relative;
}


/* ---APP section內容區塊設定--- */

/* section 區塊設定 */
.transferSection .section_area {
    position: absolute;
    z-index: 5;
    top: calc(50px + env(safe-area-inset-top));
    top: calc(50px + constant(safe-area-inset-top));
    bottom: 0px;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: auto;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) 20px;
    padding: 24px 20px calc(24px + constant(safe-area-inset-bottom)) 20px;
}

/* 有加上tab的section */
.transferSection .section_area.section_tab {
    top: calc(90px + env(safe-area-inset-top));
    top: calc(90px + constant(safe-area-inset-top));
}

/* 放表格選單的section */
.transferSection .section_area.section_table {
    padding: 0px 0px env(safe-area-inset-bottom) 0px;
    padding: 0px 0px constant(safe-area-inset-bottom) 0px;
    background-color: #fff;
}

/* @End Container  -------------------------------------------------------------------------------------------- */