/* update 20220504 */
/*@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&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-size: 36px; font-weight:normal; font-family: Roboto, 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; 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);
    -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;}


/* 表單樣式 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; color: inherit;}

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

input[type=text]::placeholder{ color: #999; }
input[type=text]::-webkit-input-placeholder { color: #999;}
input[type=text]:-moz-placeholder { color: #999;}
input[type=text]:-ms-input-placeholder { color: #999;}


/* Google Material icons */
block.loading > .container::before,
menu dd a::before,
menu dd a.suba::after,
.tablebox li.sort::after,
input.alone[type=radio]::before,
input.alone[type=checkbox]::before,
input[type=checkbox]+Label::before,
input[type=radio]+Label::before,
a.UI.map::after,
a.UI.delete::after,
.area_list dt::before,
.area_list dd::before,
.tablebox ul.sub li:first-child::before,
.mydevice ul.item li:first-child::before,
div.tablebox.ug1 ul li:last-child::after,
div.tablebox.h1 ul li:last-child::after,
div.tablebox.g2.ui-sortable ul li::after,
.UI::before,
div.tempload.loading::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.area::before {content: 'select_all';}
.UI.new::before {content: 'add';}
.UI.edit_alarm::before {content: 'edit_notifications';}
.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.cancel::before {content: 'close';}
.UI.close::before {content: 'close';}
.UI.confirm::before {content: 'done';}
.UI.copy::before {content: 'content_copy';}
.UI.delete::before {content: 'delete';}
.UI.down::before {content: 'keyboard_arrow_down';}
.UI.edit::before {content: 'edit';}
.UI.filter::before {content: 'filter_alt';}
.UI.fullscreen::before {content: 'fullscreen';}
.UI.fullscreen.off::before {content: 'fullscreen_exit';}
.UI.home::before {content: 'home';}
.UI.hub::before {content: 'hub';}
.UI.history::before {content: 'history';}
.UI.info::before {content: 'info';}
.UI.lang::before {content: 'language';}
.UI.list::before {content: 'list';}
.UI.loading::before {content: 'motion_photos_on'; animation: rotateme .3s linear 0s infinite alternate;}
.UI.locate::before {content: 'place';}
.UI.log::before {content: 'article';}
.UI.logout::before {content: 'exit_to_app';}
.UI.map::before {content: 'wallpaper';}
.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.editor::before {content: 'settings';}
.UI.share::before {content: 'share';}
.UI.date::before {content: 'insert_invitation';}
.UI.time::before {content: 'access_time';}
.UI.user::before {content: 'account_circle';}
.UI.people::before {content: 'person';}
.UI.group::before {content: 'group';}
.UI.group2::before {content: 'groups';}
.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::before {content: 'keyboard_arrow_up';}
.UI.toggle::before {content: 'toggle_on';}
.UI.toggle.off::before {content: 'toggle_off';}

@keyframes rotateme {
	0% {transform:rotate(0);}
	100% {transform:rotate(359deg);}
}


/* 專案新增 */
.UI.main::before {content: 'home';}
.UI.event::before {content: 'wifi_tethering';}
.UI.device::before {content: 'storage';}
.UI.device_log::before {content: 'format_list_bulleted';}
.UI.menubtn::before {content: 'menu';}
.UI.contact::before {content: 'mail';}
.UI.qklv::before {content: 'wifi_tethering';}
.UI.deep::before {content: 'straighten';}
.UI.move::before {content: 'open_with';}
.UI.moveH::before {content: 'height';}
.UI.zoom::before {content: 'zoom_in';}
.UI.download::before {content: 'download';}
.UI.overview::before {content: 'content_paste_search';}

/* 其他 */
.UI.addvalue::before {content: 'savings';}
.UI.addshop::before {content: 'add_shopping_cart';}
.UI.addbox::before {content: 'addbox'; }
.UI.app::before {content: 'stay_current_portrait';}
.UI.allon::before {content: 'keyboard_arrow_down';}
.UI.alloff::before {content: 'keyboard_arrow_up';}
.UI.amber::before {content: 'warning_amber';}
.UI.award::before {content: 'emoji_events';}
/* workspace_premium */
.UI.block::before {content: 'view_module';}
.UI.builder::before {content: 'query_builder';}
.UI.cam::before {content: 'videocam';}
.UI.camera::before {content: 'photo_camera';}
.UI.category::before {content: 'web_asset';}
.UI.connect::before {content: 'settings_input_antenna';}
.UI.chat::before {content: 'chat_bubble_outline';}
.UI.check::before {content: 'remove';}
.UI.check.on::before {content: 'check'; color: var(--pri08);}
.UI.detail::before {content: 'library_books';}
.UI.eco::before {content: 'eco';}
.UI.eye::before {content: 'visibility';}
.UI.eye.off::before {content: 'visibility_off';}
.UI.exchange::before {content: 'local_mall';}
.UI.export::before {content: 'ios_share';}
.UI.face::before {content: 'face';}
.UI.first::before {content: 'first_page';}
.UI.fence::before {content: 'fence';}
.UI.flare::before {content: 'flare';}
/*.UI.focus::before {content: 'gps_not_fixed';}*/
.UI.favi::before {content: 'bookmark';}
.UI.gift::before {content: 'redeem';}
.UI.height::before {content: 'unfold_more';}
.UI.label::before {content: 'label';}
.UI.label2::before {content: 'label_important';}
.UI.link::before {content: 'link';}
.UI.live::before {content: 'videocam';}
.UI.like::before {content: 'favorite_border';}
.UI.like.ed::before {content: 'favorite';}
.UI.tracker::before {content: 'favorite';}
.UI.layer::before {content: 'layers';}
.UI.last::before {content: 'last_page';}
.UI.min::before {content: 'remove';}
.UI.mini::before {content: 'south_east';}
.UI.money::before {content: 'monetization_on';}
.UI.mode::before {content: 'brightness_4';}
.UI.more::before {content: 'info';}
.UI.model::before {content: 'dashboard';}
.UI.messagelist::before {content: 'speaker_notes';}
.UI.name::before {content: 'verified_user';}
.UI.news::before {content: 'assistant';}
.UI.nsreport::before {content: 'assignment';}
.UI.normalscreen::before {content: 'fullscreen_exit';}
.UI.online::before {content: 'link';}
.UI.order::before {content: 'plagiarism';}
.UI.offline::before {content: 'link_off';}
/* .UI.paid::before {content: 'paid';} */
.UI.paid::before {content: 'local_mall';}
.UI.pen::before {content: 'brush';}
.UI.play::before {content: 'play_arrow';}
.UI.pause::before {content: 'pause';}

/* tab icons */
.UI.disconnect::before{content: 'mobiledata_off';}
.UI.report::before{content: 'report';}
.UI.pie::before{content: 'donut_large';}
.UI.public::before{content: 'public';}
.UI.flag::before{content: 'flag';}
.UI.place::before{content: 'place';}
.UI.locate::before{content: 'my_location';}
.UI.cencel::before {content: 'close';}
.UI.ok::before {content: 'done';}

/* device 4 type*/
.UI.type1::before{content: 'memory'; margin-right: 5px; margin-bottom: 2px}
.UI.type2::before{content: 'camera_rear'; margin-right: 5px; margin-bottom: 2px}
.UI.type3::before{content: 'mediation'; margin-right: 5px; margin-bottom: 2px}
.UI.type4::before{content: 'deblur'; margin-right: 5px; margin-bottom: 2px}