/* update 202503 */
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@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:300,500,700,900&subset=chinese-traditional&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC: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;}
body{font-family: Roboto, Arial, Helvetica, 'LiHei Pro', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; min-height: 100vh;}
ul, li, dl, dd, dt{ margin: 0; padding: 0; list-style: none;}
h1,h2,h3,h4,h5,h6{ font-family: Roboto, Arial, Helvetica, 'Noto Sans TC', 'LiHei Pro', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; transition:font-size .5s;}

.bodybox{overflow:hidden; position: relative;}
/* .mainContent {min-height:var(--vh100);} */
.mainContent .container{ display: block; margin: 0 auto; position: relative;}

/* 共用style */

/* mobile menu */
a.mobilemenu,
a.mobilemenu > span{ display:none;}
a.mobilemenu{ width:44px; height:44px; border-radius: 50px; padding:0; position:absolute; top:10px; right:10px; background-color:rgba(145, 145, 145, 0.1); 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;}

body.MobileMenuOn a.mobilemenu b{width:0px; margin-left:0;}
body.MobileMenuOn a.mobilemenu b::before{margin-top:0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
body.MobileMenuOn a.mobilemenu b::after{margin-top:0;  transform: rotate(45deg); -webkit-transform: rotate(45deg);}

/* 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:2rem; 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:1px solid var(--pri05); border-radius: 3rem; background-color: transparent; padding:1rem 2rem; vertical-align:middle; }

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:2.5rem;}

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";}

select {
    background-image: url(../Images/ui/icon_form_select_arrow.svg);
    background-size: auto 100%;
    background-position: 100% center!important;
    background-repeat: no-repeat;
	padding-right:35px;
	padding-left:2rem;
}
select option[disabled], select option:disabled {color:#999;}


/* Google Material icons */
input.alone[type=radio]::before,
input.alone[type=checkbox]::before,
input[type=checkbox]+Label::before,
input[type=radio]+Label::before,
block.b3 .privacy_box a.btn::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;
}
.UI::before + span{ 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';}
.UI.prev::before {content: 'keyboard_arrow_left';}
.UI.tagpulldown::before {content: 'keyboard_arrow_up';}
.UI.tagpulldown.close::before {content: 'keyboard_arrow_down';}