/* update 202412 */
@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');

/* Font */
@font-face {
    font-family: 'Apercu';
    src: url('../Font/apercu-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Apercu Bold';
    src: url('../Font/apercu-medium.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}


/* 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: 'Apercu', Arial, Helvetica,'Noto Sans TC', '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-weight:normal; font-family: 'Apercu', Arial, Helvetica, 'Noto Sans TC', 'LiHei Pro', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; transition:font-size .5s;}

.bodybox{overflow:hidden; position: relative;}
.mainContent {min-height:calc(100vh - 239.41px );}
.mainContent .container{ display: block; margin: 0 auto; padding-bottom: 4rem; 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:3rem; 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);}

/* 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: var(--fsM); border:solid #F2F2F2; background-color: #F2F2F2; border-radius: 30px; padding: 1rem; width: 100%; font-family: 'Noto Sans TC', 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 */
header nav dt a::after,
.cafestore h4.titleBean::before,
.products h4.titleBean::before,
.member h4.titleBean::before,
.count h4.titleBean::before,
.lounge h4.titleBean::before,
.qa h4.titleBean::before,
.shopping h4.titleBean::before,
input.alone[type=radio]::before,
input.alone[type=checkbox]::before,
input[type=checkbox]+Label::before,
input[type=radio]+Label::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.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.first::before {content: 'first_page';}
.UI.last::before {content: 'last_page';}
.UI.tagpulldown::before {content: 'keyboard_arrow_up';}
.UI.tagpulldown.close::before {content: 'keyboard_arrow_down';}
.UI.phone::before {content: 'phone';}
.UI.fax::before {content: 'fax';}
.UI.table::before {content: 'table_bar';}
.UI.restaurant::before {content: 'restaurant';}
.UI.car::before {content: 'directions_car_filled';}
.UI.tune::before {content: 'tune';}
.UI.redeem::before {content: 'redeem';}
.UI.shopping::before {content: 'shopping_cart';}
.UI.payment::before {content: 'payment';}

.ico::before{content:""; font-size: 0; width: var(--fsM);  height: var(--fsM); display: inline-block; vertical-align: middle; background-size: contain; background-repeat: no-repeat; background-position: center;}
.ico.about::before{background-image: url(../Images/ui/icon_about.svg); background-size: 80%;}