/* update 20220504 */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100, 300,500,700,900&subset=chinese-traditional&display=swap');
/* Google Material icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');

/* init CSS */
*, *::before, *::after {
    box-sizing: border-box;
}

    a, *::before, *::after {
        display: inline-block;
    }

html, body {
    width: 100%;
    padding: 0;
    margin: 0;
}

ul, li, dl, dd, dt {
    margin: 0;
    padding: 0;
    list-style: none;
}
/*h1,h2,h3,h4,h5,h6{font-size: 36px; font-weight:normal; font-family: Roboto, Arial, Helvetica, 'Noto Sans TC', 'LiHei Pro', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; transition:font-size .5s;}*/
h1, h2, h3, h4, h5, h6 {
    font-size: 36px;
    font-weight: normal;
    font-family: 'Noto Sans TC';
    transition: font-size .5s;
}

/*.bodybox{overflow:hidden; position:relative; padding-top:125px; z-index:99999;}*/
.bodybox {
/*    overflow: hidden;
    position: relative;*/
    padding-top: 125px;
    z-index: 99999;
    min-height: 100vh;
}

.mainContent {
    min-height: 100vh;
}

/* 共用style */

/* mobile menu */
a.mobilemenu,
a.mobilemenu > span {
    display: none;
}

a.mobilemenu {
    width: 44px;
    height: 44px;
    border-radius: 50px;
    padding: 0;
    position: absolute;
    top: 24px;
    right: 10px;
    z-index: 99999;
}

    a.mobilemenu b,
    a.mobilemenu b::before,
    a.mobilemenu b::after {
        content: "";
        display: block;
        width: 22px;
        border-bottom: solid 2px #333;
        position: absolute;
        left: 50%;
        margin-left: -11px;
        top: 50%;
        margin-top: -1px;
        transition: all .5s;
    }

        a.mobilemenu b::before {
            margin-top: -7px;
        }

        a.mobilemenu b::after {
            margin-top: 7px;
        }

.MobileMenuOn a.mobilemenu b {
    width: 0px;
    margin-left: 0;
}

    .MobileMenuOn a.mobilemenu b::before {
        margin-top: 0;
        border-color: #FFF;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
    }

    .MobileMenuOn a.mobilemenu b::after {
        margin-top: 0;
        border-color: #FFF;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }

/* a.btn設定 */
a.btn {
    padding: 8px 20px;
    background-color: var(--pri01);
    font-size: 18px;
    letter-spacing: 2px;
    color: #FFF;
    transition: .5s;
    border-radius: 50px;
}

    a.btn.disable {
        background-color: var(--pri05);
        color: #FFF;
        pointer-events: none;
    }

    a.btn:hover {
        background-color: var(--pri02);
    }

    a.btn.small {
        font-size: 14px;
        padding: 5px 8px;
    }

        a.btn.small::before,
        a.btn.small::after {
            font-size: 20px;
            vertical-align: bottom;
        }

    a.btn.Large {
        font-size: 26px;
        padding: 10px 45px;
        letter-spacing: 5px;
    }

        a.btn.Large::before,
        a.btn.Large::after {
            font-size: 30px;
            vertical-align: bottom;
            margin-right: 5px;
        }

.btnbox {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.btngroup {
    display: inline-block;
    font-size: 0;
}

    .btngroup a.btn {
        border-radius: 0;
        border-right: 1px solid #FFF;
        padding: 10px 25px;
        margin: 0;
        font-size: 18px;
    }

        .btngroup a.btn:first-child {
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
            padding-left: 40px;
        }

        .btngroup a.btn:last-child {
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            border-right: none;
            padding-right: 40px;
        }

    .btngroup.Large a.btn {
        font-size: 26px;
        letter-spacing: 5px;
        padding: 14px 40px;
    }

        .btngroup.Large a.btn:first-child {
            padding-left: 50px;
        }

        .btngroup.Large a.btn:last-child {
            padding-right: 50px;
        }

/* 按鈕動畫 */
a.btn {
    overflow: hidden;
    display: inline-block;
    position: relative;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

    a.btn:before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background-image: radial-gradient(circle at 50% -25%, rgba(255, 255, 255, 0.4), transparent);
        opacity: 1;
        transform: scale(1);
        animation: shimmerAnimation 1.5s linear infinite;
    }
/*.btnBox .btn:hover:before {transform: scale(1); }*/
@keyframes shimmerAnimation {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* tablebox */
div.tablebox {
    display: table;
}

    div.tablebox > ul {
        display: table-row;
    }

        div.tablebox > ul > li {
            display: table-cell;
        }

/* html編輯器 style */
.htmleditor img {
    max-width: 100%;
}

.htmleditor h1 img {
    width: 100%;
}

.htmleditor h1 {
    font-size: 29px;
}

.htmleditor h2 {
    font-size: 24px;
}

.htmleditor h3 {
    font-size: 22px;
}

.htmleditor h4 {
    font-size: 20px;
}

.htmleditor h5 {
    font-size: 18px;
}

.htmleditor h6 {
    font-size: 14px;
}

.htmleditor strong {
    font-weight: 700;
}

.htmleditor pre {
}

.htmleditor address {
}

.htmleditor blockquote {
}

.htmleditor ol li {
    margin-left: 1em;
    list-style: decimal;
}

.htmleditor ul li {
    margin-left: 1em;
    list-style: disc;
}

/* 表單樣式 IE,Edge 部分無效 */
textarea {
    resize: none;
}

input,
button,
textarea,
select,
input[type=checkbox] + Label,
input[type=radio] + Label {
    font-size: 18px;
    font-family: Lato, Arial, Helvetica, 'LiHei Pro', "微軟正黑體", "新細明體", 'Microsoft JhengHei', sans-serif;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0 none;
}

    input[type=range],
    input[type=text],
    input[type=password],
    input[type=file],
    input[type=number],
    input[type=url],
    input[type=email],
    input[type=tel],
    input[list],
    input[type=button],
    input[type=submit],
    button,
    textarea,
    select,
    output {
        border: none;
        border-bottom: 1px solid #999;
        background-color: transparent;
        padding: 5px;
        vertical-align: middle;
        border-radius: 0;
    }

    input[type=range] {
        overflow: hidden;
        background: none;
    }
        /*input[type=range]::-webkit-slider-runnable-track{ background-color: #eee;}*/
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            position: relative;
            width: 10px;
            height: 10px;
            background-color: #333;
            border-radius: 50%;
            transition: .2s;
        }

            input[type=range]::-webkit-slider-thumb::before,
            input[type=range]::-webkit-slider-thumb::after {
                content: "";
                display: block;
                position: absolute;
                top: 3px;
                width: 2000px;
                height: 4px;
                pointer-events: none;
                transition: .2s;
            }

            input[type=range]::-webkit-slider-thumb::before {
                left: -1997px;
                background-color: #f22;
            }

            input[type=range]::-webkit-slider-thumb::after {
                left: 10px;
                background-color: #edc;
            }

    input[type=button],
    input[type=submit],
    input[type=checkbox] + Label,
    input[type=radio] + Label,
    button {
        cursor: pointer;
        vertical-align: middle;
    }

        input:focus,
        button:focus,
        select:focus {
            border-color: #333;
            outline: 0 none;
        }

        input:disabled, button:disabled {
            opacity: 0.5;
            cursor: default;
        }

    input[type=number] {
        -moz-appearance: textfield;
    }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    input[type=checkbox], input[type=radio] {
        display: none;
    }

        input[type=checkbox]:focus, input[type=radio]:focus {
            border: none;
            box-shadow: none;
        }

        input.alone[type=radio]::before,
        input.alone[type=checkbox]::before,
        input[type=checkbox] + Label::before,
        input[type=radio] + Label::before {
            font-size: 25px;
        }

        input[type=checkbox] + Label::before {
            content: "check_box_outline_blank";
        }

        input[type=checkbox]:checked + Label::before {
            content: "check_box";
        }

        input[type=radio] + Label::before {
            content: "radio_button_unchecked";
        }

        input[type=radio]:checked + Label::before {
            content: "radio_button_checked";
        }

Label span {
    vertical-align: middle;
}

input.alone[type=radio],
input.alone[type=checkbox] {
    display: inline-block;
    width: auto !important;
    cursor: pointer;
    vertical-align: middle;
}

    input.alone[type=checkbox]::before {
        content: "check_box_outline_blank";
    }

    input.alone[type=checkbox]:checked::before {
        content: "check_box";
    }

    input.alone[type=radio]::before {
        content: "radio_button_unchecked";
    }

    input.alone[type=radio]:checked::before {
        content: "radio_button_checked";
    }

/* ---------- 聯絡我們下拉使用 20230617-須更新 ---------- */
select {
    background-image: url(../Images/ui/icon_form_select_arrow.svg);
    background-size: auto 100%;
    background-position: 100% center;
    background-repeat: no-repeat;
    padding-right: 35px;
    padding-left: 20px;
    background-image: none \9;
    padding: 6px 10px 6px 10px \9;
}

    select::-ms-expand {
        display: none;
    }

    select option[disabled], select option:disabled {
        color: #999;
    }
/* ---------- 聯絡我們下拉使用 20230617-須更新 END ---------- */

/* Google Material icons */
input.alone[type=radio]::before,
input.alone[type=checkbox]::before,
input[type=checkbox] + Label::before,
input[type=radio] + Label::before,
.matterBox a.more::after,
.indexBlock.b4 dt:after,
.UI2::after,
.UI::before {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    vertical-align: middle;
}

/* https://fonts.google.com/icons?selected=Material+Icons */
/* 常用icon */
.UI.add::before {
    content: 'add';
}

.UI.alerts::before {
    content: 'notifications_active';
}

.UI.alert.off::before {
    content: 'volume_off';
}

.UI.back::before {
    content: 'keyboard_arrow_left';
}

.UI.clear::before {
    content: 'clear';
}

.UI.close::before {
    content: 'close';
}

.UI.confirm::before {
    content: 'done';
}

.UI.delete::before {
    content: 'delete';
}

.UI.down::before {
    content: 'keyboard_arrow_down';
}

.UI.edit::before {
    content: 'edit';
}

.UI.fullscreen::before {
    content: 'fullscreen';
}

.UI.fullscreen.off::before {
    content: 'fullscreen_exit';
}

.UI.home::before {
    content: 'home';
}

.UI.info::before {
    content: 'info';
}

.UI.link::before {
    content: 'link';
}

.UI.locate::before {
    content: 'place';
}

.UI.logout::before {
    content: 'exit_to_app';
}

.UI.menu::before {
    content: 'menu';
}

.UI.menu.off::before {
    content: 'close';
}

.UI.notify::before {
    content: 'chat_bubble';
}

.UI.passwd::before {
    content: 'password';
}

.UI.search::before {
    content: 'search';
}

.UI.save::before {
    content: 'save';
}

.UI.send::before {
    content: 'send';
}

.UI.setting::before {
    content: 'settings';
}

.UI.share::before {
    content: 'share';
}

.UI.time::before {
    content: 'access_time';
}

.UI.user::before {
    content: 'account_circle';
}

.UI.verify::before {
    content: 'verified_user';
}

.UI.next::before {
    content: 'keyboard_arrow_right';
}

.UI2.next::after {
    content: 'keyboard_arrow_right';
}

.UI.prev::before {
    content: 'keyboard_arrow_left';
}

.UI.tagpulldown::before {
    content: 'keyboard_arrow_up';
}

.UI.tagpulldown.close::before {
    content: 'keyboard_arrow_down';
}

.UI.top::before {
    content: 'expand_less';
}
/* ^ */
.UI.launch::before {
    content: 'launch';
}
/* 打開新視窗 */
.UI.write::before {
    content: 'inventory';
}
/* 填寫 */
.UI.game::before {
    content: 'sports_esports';
}
/* 遊戲 */
/* .UI.map::before {content: 'location_on';}地圖 */