﻿/***** 依螢幕顯示寬度 *****/
@media only screen and (min-width: 993px) {
    .DV_HEAD_BOX > div:first-child {
        /* 指定 內部區塊為彈性排列 */
        display: -moz-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        /* 指定 排列方向為橫排 */
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        /* 設定為彈性區塊 多行 */
        flex-wrap: wrap;
    }
}
/* **************************************************************** */
@media only screen and (min-width: 776px) and (max-width: 992px) {
    .DV_HEAD_BOX > div:first-child {
        /* 指定 內部區塊為彈性排列 */
        display: -moz-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        /* 指定 排列方向為縱排 */
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .DV_HEAD_BOX > div:first-child {
            width: 100%;
        }

    /* 資料欄位 外框 33% 寬 */
    .DV_FIELD_BOX_33 {
        width: 98%;
    }

    /* 資料欄位 外框 50% 寬 */
    .DV_FIELD_BOX_50 {
        width: 98%;
    }

    /* =========================================================================== */
    html {
        font-size: 14px;
    }
    /* =========================================================================== */
    .container {
        width: 100%;
    }
}
/* **************************************************************** */
@media only screen and (min-width: 0px) and (max-width: 775px) {
    .DV_HEAD_BOX > div:first-child {
        /* 指定 內部區塊為彈性排列 */
        display: -moz-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        /* 指定 排列方向為縱排 */
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
        .DV_HEAD_BOX > div:first-child > div {
            width: 100%;
        }
    /* =========================================================================== */
    html {
        font-size: 12px;
    }
    /* =========================================================================== */
    .container {
        width: 100%;
    }
}