/* update 20220504 */
@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');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Pathway+Extreme:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;0,8..144,400;0,8..144,500;0,8..144,600;0,8..144,700;0,8..144,800;0,8..144,900;1,8..144,100;1,8..144,200;1,8..144,300;1,8..144,400;1,8..144,500;1,8..144,600;1,8..144,700;1,8..144,800;1,8..144,900&family=Roboto:wght@100;300;400;500;700;900&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: Lato, Arial, Helvetica, 'LiHei Pro', 'Noto Sans TC', 'Roboto', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; min-height: 100vh;}*/
body{font-family: 'Roboto','Noto Sans TC', 'Roboto', "微軟正黑體", '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-size: 36px; font-weight:normal; font-family: Lato, Arial, Helvetica, 'Noto Sans TC', 'LiHei Pro', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; transition:font-size .5s;}

.bodybox{/*overflow:hidden;*/ min-height:100vh; position: relative;}
/*.mainContent {min-height:100vh;}*/
.mainContent .container{ display: block; max-width: 1000px; margin: 0 auto;}

/* 共用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 #FFF; 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);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);}
body.MobileMenuOn a.mobilemenu b::after{
	margin-top:0; 
	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;}


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

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:15px;
	background-image:none \9;
	padding:6px 10px 6px 10px \9;
}
select::-ms-expand {display:none;}
select option[disabled], select option:disabled {color:#999;}


/* Google Material icons */
nav ul > a b.arrowR::before,
input.alone[type=radio]::before,
input.alone[type=checkbox]::before,
input[type=checkbox]+Label::before,
input[type=radio]+Label::before,
.fancybox-skin::after,
.fancybox-skin::before,
.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.language::before {content: 'language';}
.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';}
.UI.download::before {content: 'download';}
.UI.pdf::before {content: 'picture_as_pdf';}