body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: Microsoft JhengHei;
    overflow-x: auto;
}

/* ---------------------------------------------------------------------- */

#menu_control {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    opacity: 0;
    display: none;
}

header {
    width: 100%;
    background-color: rgba(100%, 100%, 100%, 1);
    text-align: center;
    position: fixed;
    top: 0;
    transition: all .5s;
    z-index: 5;
}

header a {
    color: #dd4c51;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

header a:visited { color: #dd4c51; }
header a:hover { color: #ff0009; }
header a:active { color: #dd4c51; }

header > .area2 > .item > .menu_logo,
header > .menu_logo_small {
    width: 200px;
    height: auto;
    /* 不能反白 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

header > .area2 > .item > .menu_logo > a,
header > .menu_logo_small > a {
    display: block;
}

header > .area2 > .item > .menu_logo img,
header > .menu_logo_small img {
    width: 200px;
    height: auto;
    vertical-align: middle;
}

footer {
    width: 100%;
    height: 66px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #363535;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
}

footer p {
    padding: 0px;
    margin: 0px;
}

/* ---------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    html {
        overflow: -moz-hidden-unscrollable;
    }
    
    body::-webkit-scrollbar {
        display: none;
    }
    
    body {
        -ms-overflow-style: none;
    }
    
    #menu_control:checked ~ header nav,
    #menu_control:checked ~ header > .area1 > .item > .item > .lenglist {
        right: 0;
    }

    header {
        height: 105px;
    }

    header .menu_btn {
        width: 40px;
        height: 40px;
        display: block;
        position: fixed;
        top: 15px;
        right: 30px;
        z-index: 5;
    }
    
    header .menu_btn span {
        opacity: 0;
        width: 1px;
        height: 1px;
        display: block;
        overflow: hidden;
    }

    header .menu_btn::before {
        content: "";
        position: absolute;
        height: 4px;
        left: 2px;
        width: 36px;
        background-color: #ff0009;
        top: 0;
        bottom: 0;
        margin: auto;
        box-shadow: 0px 8px 0px #ff0009, 0px -8px 0px #ff0009;
    }

    header > .menu_logo_small {
        height: 80px;
        margin: 10px 0px 10px 20px;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    header > .area1 {
        display: none;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    header > .area2 > .item > .menu_logo {
        display: none;
    }

    header > .area2 > .item > nav {
        width: 100%;
        height: calc(100vh - 105px);
        background-color: rgba(100%, 100%, 100%, 0.9);
        position: fixed;
        top: 105px;
        right: -100%;
        transition: .5s;
        z-index: 5;
        overflow: auto;
        
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    header > .area2 > .item > nav a {
        width: calc(100% - 50px);
        height: 100%;
        font-size: 18px;
        padding-left: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    
    header > .area2 > .item > nav ul {
        width: 100%;
        height: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    header > .area2 > .item > nav ul li {
        width: 100%;
        height: 49px;
        border-bottom: 1px solid #ff0000;
        font-weight: bold;
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    /*header > .area2 > .item > nav > .menu > .menu_li:hover .menu_item {
        display: flex !important;
    }*/

    header > .area2 > .item > nav > .menu > .menu_li > .menu_item {
        width: 100%;
        height: auto;
        background-color: rgba(100%, 100%, 100%, 0.9);
        border: 1px solid #dcdcdc;
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 4;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    header > .area2 > .item > nav > .menu > .menu_li > .small_lang_menu {
        width: calc(100% - 50px);
        padding-left: 50px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    header > .area2 > .item > nav > .menu > .menu_li > .small_lang_menu > img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-right: 10px;
    }

    header > .area2 > .item > nav > .menu > .menu_li > .small_lang_menu > span {
        color: #dd4c51;
        font-weight: 700;
    }

    /* 向下箭頭 */
    .bottom {
        width: 17px;
        height: 49px;
        position: relative;
    }

    .bottom:before,
    .bottom:after {
        position: absolute;
        bottom: calc(50% - 9.5px);
        left: 5px;
        content: '';
        border-top: 6px solid rgba(100%, 100%, 100%, 0.9);
        border-right: 6px dashed transparent;
        border-bottom: 6px dashed transparent;
        border-left: 6px dashed transparent;
    }
    
    .bottom:before {
        border-top: 6px solid #dd4c51;
    }
    
    .bottom:after {
        bottom: calc(50% - 6.5px);
        left: 5px;
        border-top: 6px solid rgba(100%, 100%, 100%, 0.9);
    }

    header > .area2 > .item > nav > .menu > .menu_li:last-child {
        height: auto;
    }

    header > .area2 > .item > nav > .menu > .menu_li:last-child > .menu_item {
        background-color: rgba(100%, 100%, 100%, 0);
        border: none;
        
    }
    header > .area2 > .item > nav > .menu > .menu_li:last-child > .menu_item > li {
        width: 100%;
        height: 48px;
        background-color: rgba(100%, 100%, 100%, 0);
        border-top: 1px solid #ff0000;
        border-bottom: 1px solid #ff0000;
    }

    header > .area2 > .item > nav > .menu > .menu_li:last-child > .menu_item > li:last-child {
        height: 50px;
        border: none;
    }

    header > .area2 > .item > nav > .menu > .menu_li:last-child > .menu_item > li > .item {
        width: calc(100% - 74px);
        height: 50px;
        padding-left: 74px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    header > .area2 > .item > nav > .menu > .menu_li:last-child > .menu_item > li > .item > img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-right: 10px;
    }

    header > .area2 > .item > nav > .menu > .menu_li:last-child > .menu_item > li > .item > input[type="button"] {
        border: none;
        background-color: rgba(100%, 100%, 100%, 0);
        color: #dd4c51;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        padding: 0px;
        margin: 0px;
        user-select: none;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    header > .area3 {
        width: 100%;
        height: 5px;
        background-color: #e31019;
    }
}

@media screen and (min-width: 768px) {
    html, body {
        min-width: 1200px;
    }

    header .menu_btn { display: none; }

    header > .menu_logo_small {
        display: none;
    }

    header > .area1 {
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        color: #ffffff;
        font-size: 14px;
        font-weight: bold;
    }

    header > .area1 > .item {
        max-width: 1200px;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    header > .area1 > .item > .item {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin: 0px 80px 0px 0px;
    }

    header > .area1 > .item > .item > i {
        color: #ffffff;
        background-color: #2f2e2e;
        margin-right: 10px;
    }

    header > .area1 > .item > .item > p {
        margin: 0px;
        padding: 0px;
    }

    header > .area1 > .item > .item > .lenglist {
        height: 100%;
        cursor: pointer;
        margin: 0;
        padding: 0;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    header > .area1 > .item > .item > .lenglist > img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-right: 10px;
    }

    header > .area1 > .item > .item > .lenglist:hover > .lang_menu {
        display: flex;
    }

    header > .area1 > .item > .item > .lenglist > .lang_menu {
        width: 120px;
        height: 96px;
        background-color: rgba(47, 46, 46, 0.8);
        box-shadow: 0px 0px 10px rgba(100, 100, 100, 1);
        color: #ffffff;
        user-select: none;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 30px;
        left: 0px;
        z-index: 6;
    }

    header > .area1 > .item > .item > .lenglist > .lang_menu > .item {
        width: 100px;
        height: 38px;
        background-color: rgba(100%, 100%, 100%, 0);
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    header > .area1 > .item > .item > .lenglist > .lang_menu > .item:last-child {
        border: none;
    }

    header > .area1 > .item > .item > .lenglist > .lang_menu > .item:hover {
        width: 98px;
        height: 36px;
        background-color: rgba(100%, 100%, 100%, 0.4);
        border-top: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        border-left: 1px solid #ffffff;
        border-radius: 4px;
    }

    header > .area1 > .item > .item > .lenglist > .lang_menu > .item > img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-right: 10px;
    }

    header > .area1 > .item > .item > .lenglist > .lang_menu > .item > input[type="button"] {
        border: none;
        background-color: rgba(100%, 100%, 100%, 0);
        color: #ffffff;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        padding: 0px;
        margin: 0px;
        user-select: none;
    }

    header > .area1 > .item > .item:last-child {
        margin: 0px;
    }

    /* 向下箭頭 */
    .bottom {
        width: 17px;
        height: 100%;
        position: relative;
    }

    .bottom:before,
    .bottom:after {
        position: absolute;
        bottom: calc(50% - 9.5px);
        left: 5px;
        content: '';
        border-top: 6px solid #2f2e2e;
        border-right: 6px dashed transparent;
        border-bottom: 6px dashed transparent;
        border-left: 6px dashed transparent;
    }
    
    .bottom:before {
        border-top: 6px solid #ffffff;
    }
    
    .bottom:after {
        bottom: calc(50% - 6.5px);
        left: 5px;
        border-top: 6px solid #2f2e2e;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    header > .area2 {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    header > .area2 > .item {
        max-width: 1200px;
        height: 100px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    header > .area2 > .item > .menu_logo {
        margin-right: 80px;
    }

    header > .area2 > .item > nav {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    header > .area2 > .item > nav ul {
        width: auto;
        height: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    header > .area2 > .item > nav ul li {
        width: auto;
        height: 100%;
        margin: 0 30px;
        padding: 0;
        position: relative;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    header > .area2 > .item > nav ul li a {
        display: block;
    }

    header > .area2 > .item > nav > .menu > .menu_li > .menu_item {
        width: 210px;
        height: auto;
        background-color: rgba(100%, 100%, 100%, 0.9);
        border: 1px solid #dcdcdc;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100px;
        left: 0px;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 4;
    }

    header > .area2 > .item > nav > .menu > .menu_li > .menu_item a {
        color: #dd4c51;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
    }

    header > .area2 > .item > nav > .menu > .menu_li > .menu_item a:visited { color: #dd4c51; }
    header > .area2 > .item > nav > .menu > .menu_li > .menu_item a:hover { color: #ffffff; background-color: #ff0009; }
    header > .area2 > .item > nav > .menu > .menu_li > .menu_item a:active { color: #dd4c51; }

    header > .area2 > .item > nav > .menu > .menu_li:hover .menu_item {
        display: flex !important;
    }

    header > .area2 > .item > nav > .menu > .menu_li > .menu_item > li > a {
        width: 180px;
        font-size: 16px;
        padding: 10px 10px 10px 20px;
        text-align: left;
    }

    header > .area2 > .item > nav > .menu > .menu_li:last-child {
        display: none;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    header > .area3 {
        width: 100%;
        height: 5px;
        background-color: #e31019;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    .master_content {
        width: 100%;
        height: 100%;
    }

    /* ---------------------------------------------------------------------------------------------------- */

    footer {
        margin: 0px 0px 0px 0px;
    }
}