@charset "utf-8";
/* CSS Document */
/*標頭navbar設定-*/
.uk-navbar { background-origin: border-box; position: relative; height: 44pt; width: 100%; clear: both; }
.uk-navbar:before, .uk-navbar:after { content: " "; display: table }
.uk-navbar:after { clear: both }
/*-點選menu按鈕設定*/
.uk-navbar-toggle { -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin: 5px 0 0 0px; padding: 8px; font-size: 26px; color: #5e2d03; }
.uk-navbar-toggle:before { content: ''; display: inline-block; height: 100%; vertical-align: middle }
.uk-navbar-toggle:hover, .uk-navbar-toggle:focus { color: #fff; text-decoration: none; outline: 0 }
.uk-navbar-toggle:after { content: "\f0c9"; font-family: "FontAwesome"; vertical-align: middle; }
.uk-navbar-toggle-alt:after { content: "\f002" }
/*左欄menu*/
/*-點選menu後，右邊內容顯示的淡淡顏色*/
.uk-offcanvas { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; background: rgba(0, 0, 0, 0.1); font-size: 19px; }
.uk-offcanvas.uk-active { display: block }
.uk-offcanvas-page { position: fixed; -webkit-transition: margin-left .3s ease-in-out 50ms; transition: margin-left .3s ease-in-out 50ms }
/*-menu的底色設定*/
.uk-offcanvas-bar { position: fixed; top: 0; bottom: 0; left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 999; width: 270px; max-width: 100%; background-color: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; }
.uk-nav-offcanvas { color: #fff; margin-top: 0; }
.uk-offcanvas.uk-active .uk-offcanvas-bar.uk-offcanvas-bar-show { -webkit-transform: translateX(0%); transform: translateX(0%) }
.uk-nav, .uk-nav ul { margin: 0; padding: 0; list-style: none }
.uk-nav ul a { padding: 0px 0 }
.uk-nav li a { display: block; text-decoration: none }
/*-標題項目*/
.uk-nav-header { padding: 10px 15px 8px; text-transform: uppercase; text-shadow: none; color: #fff; margin-top: 0; background-color: #f89402; }
/*-標題右邊箭頭設定*/
.uk-nav-parent-icon>.uk-parent>a:after { content: "\f104"; width: 20px; margin: 2px 0px 0 0; float: right; font-family: "FontAwesome"; text-align: center; color: #313131; }
/*-標題點開右邊箭頭設定*/
.uk-nav-parent-icon>.uk-parent.uk-open>a:after { content: "\f107"; color: #313131; }
/*第一層設定*/

.uk-parent a { color: #FFF; padding: 0px 15px; }
.uk-nav-offcanvas ul a { color: #313131; display: block; }
html:not(.uk-touch) .uk-nav-offcanvas ul a:hover { color: #313131; }
.uk-nav-offcanvas>li>a { color: #313131; padding: 12px 5px 12px 40px; border-top: 1px solid #f79101; }
.uk-nav-offcanvas>li>a:hover, html:not(.uk-touch) .uk-nav-offcanvas>li>a:focus { color: #313131; outline: 0; background-color: #eeeeee; }
/*-第二層條列*/
ul.uk-nav-sub { padding: 5px 0 5px 15px }
ul.uk-nav-sub li { position: relative; font-size: 17px; }
ul.uk-nav-sub li a { padding: 5px 0; }
ul.uk-nav-sub li span { position: absolute; top: 4px; right: 10px; background-color: #ffbe26; color: #fff; border-radius: 5px; padding: 0; width: 25px; height: 20px; font-size: 12px; text-align: center; }
.menupic { background-image: url(../images/menu_icon.png); background-repeat: no-repeat; display: block; }
.menu_icon01 { background-position: 3px 4px; background-size: 34px auto; }
.menu_icon02 { background-position: 3px -38px; background-size: 36px auto; }
.menu_icon03 { background-position: 3px -76px; background-size: 34px auto; }
.menu_icon04 { background-position: 3px -119px; background-size: 34px auto; }
.menu_icon05 { background-position: 3px -165px; background-size: 35px auto; }
.menu_icon06 { background-position: 3px -200px; background-size: 34px auto; }
/*.menu_icon07 { background-position: 3px -196px; background-size: 28px auto; }
.menu_icon08 { background-position: 3px -250px; background-size: 30px auto; }
.menu_icon09 { background-position: 3px -286px; background-size: 30px auto; }*/
/*--------------------------------------*/
/*首頁格子排列menu*/
.mp_menu { margin: 15px 5px 10px 15px; overflow: hidden; }
.mp_menu ul { width: 100%; margin: 0 auto; padding: 0; }
.mp_menu ul li { list-style-type: none; float: left; width: 32.5%; margin: 0 5px 5px 0; }
.mp_menu ul li a { display: block; text-align: center; vertical-align: bottom; background-color: #CCC; padding: 10px 5px; font-size: 1.23em; color: #FFF; white-space: nowrap; height: auto; }
.mp_menu ul li img { width: 100px; margin: 0 auto; display: block; }
@media only screen and (max-width : 720px) and (min-width : 481px) {
.mp_menu ul li { width: 32.2%; }
.mp_menu ul li a {  font-size: 1.23em; }
.mp_menu ul li img { width: 70%;  }
}
@media only screen and (max-width : 480px) and (min-width : 321px) {
.mp_menu ul li { width: 31.5%; }
.mp_menu ul li a {font-size: 1.15em; }
.mp_menu ul li img { width: 75%;  }
}
@media only screen and (max-width : 320px) {
.mp_menu ul li { width: 31.5%; }
.mp_menu ul li a {  font-size: 1em; }
.mp_menu ul li img { width: 80%; }
}
.mp_menu ul li a.redcolor {background-color: #996633;}
.mp_menu ul li a.greencolor {background-color: #FF6633;}
.mp_menu ul li a.greencolor2 { background-color: #699f00; }
.mp_menu ul li a.yellowcolor { background-color: #ffbe26; }
.mp_menu ul li a.bluecolor { background-color: #313131; }
.mp_menu ul li a.bluecolor2 { background-color: #0789ba; }
.mp_menu ul li a.orangecolor {background-color: #8080C0; }