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

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


.after-micons::after,
.before-micons::before,
.micons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  font-size:30px;
  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';
  transition:font-size .5s;
  vertical-align: middle;
}

.before-micons.alert::before {content: 'volume_up';}
.before-micons.add::before {content: 'add';}
.before-micons.edit::before {content: 'edit';}
.before-micons.logout::before {content: 'exit_to_app';}
.before-micons.alert.off::before {content: 'volume_off';}
.before-micons.tagpulldown::before {content: 'keyboard_arrow_up';}
.before-micons.tagpulldown.close::before {content: 'keyboard_arrow_down';}
.before-micons.allon::before {content: 'keyboard_arrow_down';}
.before-micons.alloff::before {content: 'keyboard_arrow_up';}
.before-micons.online::before {content: 'link';}
.before-micons.offline::before {content: 'link_off';}
.before-micons.search::before {content: 'search';}
.before-micons.detail::before {content: 'library_books';}
.before-micons.name::before {content: 'verified_user';}
.before-micons.locate::before {content: 'my_location';}
.before-micons.time::before {content: 'access_time';}
.before-micons.reload::before {content: 'replay';}
.before-micons.check::before {content: 'check_box_outline_blank';}
.before-micons.check.on::before {content: 'check_box';}
.before-micons.close::before {content: 'close';}
.before-micons.mail::before {content: 'mail';}

a ,a:link{color:var(--blue01); transition:.5s;}
a:hover{color:var(--orange01);}

/* init CSS */
html, body{ width:100%; /*height:100%; 有需要再打開 */}
body{font-family: Lato, Roboto, Arial, Helvetica, 'Noto Sans TC', 'LiHei Pro', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; font-weight: 300;}
header{}
footer{}

.bodybox{overflow:hidden; min-height:100%; position: relative;}
.mainContent {min-height:100%;}

.svg-icon{width: 30px; height: 30px; background: url(../images/ui/icon.svg) no-repeat -30px -30px; background-size: 1000%;}

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

a.mobilemenu{ width:44px; height:44px; border:3px solid #FFF; border-radius: 50px; padding:0; background-color:rgba(0, 0, 0, 0.6);position:absolute; top:10px; right:20px;}
a.mobilemenu:hover{ background-color:rgba(145, 145, 145, 0.8);}

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

/* 共用style */
h1,h2,h3,h4,h5,h6{font-weight:normal; transition:font-size .5s;}
h1{font-size:64px;}
h2{font-size:56px;}
h3{font-size:48px;}
h4{font-size:40px;}
h5{font-size:32px;}
h6{font-size:24px;}


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



/* form style IE,Edge部分無效 */
textarea{resize: none;}
input,
button,
textarea,
select,
input[type=checkbox]+Label,
input[type=radio]+Label{ font-size:18px; font-family: Roboto, Arial, Helvetica, 'Noto Sans TC', 'LiHei Pro', "微軟正黑體", "新細明體", 'Microsoft JhengHei',  sans-serif; font-weight: 300;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{ /*box-sizing:border-box;*/ border:1px solid #999; border-radius:5px; background-color:#fff; padding:5px; 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; box-shadow:0 0 6px rgba(0,0,0,0.4); 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=checkbox]::before,
input[type=checkbox]+Label::before,
input[type=radio]+Label::before{font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    font-size:25px;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    transition: font-size .5s;
    vertical-align: middle;}
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";}

input.alone[type=checkbox] { display: inline-block; width: auto !important;}
input.alone[type=checkbox]::before {content: "check_box_outline_blank";}
input.alone[type=checkbox]:checked::before {content: "check_box";}

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;
    text-align-last: center;
}
select::-ms-expand {display:none;}
select option[disabled], select option:disabled {color:#999;}


/* transition */
a.mobilemenu > b, 
a.mobilemenu > b::before, 
a.mobilemenu > b::after,
a.mobilemenu{
			 transition: all .5s;
		-moz-transition: all .5s;
	 -webkit-transition: all .5s;
		  -o-transition: all .5s;}