/* ------------------------- GLOBAL -------------------------*/
@charset "utf-8";

html {margin:0; padding:0;} 

body { margin:0; padding:0; width:100%; height: 100%; min-width: 320px; min-height: 480px; align-self:center;background-image: url(../images/menubar/background.jpg);background-size: 100% 20px;background-repeat: repeat-x;background-position: center 0; }

/* font */
@font-face { font-family: Microsoft JhengHei; src: url('http://www.aod.education/css/微軟正黑體粗體.ttf'); } 
@import url(//fonts.googleapis.com/css?family=Josefin+Slab:700|Droid+Serif:400,700|Hind:400,700);

*{ font-family: "Hind", "Microsoft JhengHei", sans-serif, serif; }
/* font-family: 'Montserrat', sans-serif; font-family: 'Josefin Slab', serif; font-family: 'Droid Serif', serif; font-family: 'Hind', sans-serif; */

/*Scrollbar style*/
body  {
scrollbar-face-color: #474747;
scrollbar-highlight-color: #474747;
scrollbar-3dlight-color: #474747;
scrollbar-darkshadow-color: #d0d0d0;
scrollbar-shadow-color: #474747;
scrollbar-arrow-color: #474747;
scrollbar-track-color: #d0d0d0;
}

::-webkit-scrollbar { width: 5px; background-color: #fff; border-radius: 5px}
::-webkit-scrollbar-track {border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); }
::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); }

::-khtml-scrollbar { width: 5px; background-color: #fff; border-radius: 5px}
::-khtml-scrollbar-track {border-radius: 10px; -khtml-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); }
::-khtml-scrollbar-thumb {border-radius: 10px; -khtml-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); }

::-moz-scrollbar { width: 5px; background-color: #fff; border-radius: 5px}
::-moz-scrollbar-track {border-radius: 10px; -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); }
::-moz-scrollbar-thumb {border-radius: 10px; -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); }

::-ms-scrollbar { width: 5px; background-color: #fff; border-radius: 5px}
::-ms-scrollbar-track {border-radius: 10px; -ms-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); }
::-ms-scrollbar-thumb {border-radius: 10px; -ms-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); }

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;}


header, section, footer, aside, nav, main, article, figure {display: block; }

header { margin:0; width: 100%; clear: left; position:relative}

section { margin: 0px; width: 100%; position: relative; }

article { margin: 0px; position: relative; float: left; overflow-y: auto; }

nav { margin: 0px; width: 100%; clear: left; display: block; position: fixed; }

.left { float: left}

.right { float: right}

.clear {clear: left;}

.copyright {position: fixed; bottom: 0px; z-index: -99; padding-left: 300px; font-size: 1em; background-color: #fff; width: 100%; max-height: 55px; display: none}

/*font clear*/
.font { color: inherit; font-size: inherit; font-weight: inherit; font-style: normal; font-family: inherit; text-align: inherit; text-decoration: inherit; line-height: inherit; margin: 0; padding: 0; word-spacing: inherit}


/* error */
.error { color:#fff; text-align: center; font-size: 14px}
.error > h1 { font-size: 50px}
.error > h2 { font-size: 30px}
.error a { color:rgba(255,0,118,0.89); text-decoration: none; padding: 10px}
.error a:hover { text-decoration: underline; padding: 10px}
.error .button { color:#fff; border: 1px solid #fff; text-decoration: none; padding: 10px}
.error .button:hover { color:rgba(255,0,118,0.89); border: 1px solid rgba(255,0,118,0.89); text-decoration: none; padding: 10px}



/* ----------------------------------------------------------------*/

@media all and (max-width:1366px){
	
body { min-width: inherit} 	
	
}
	
/* ----------------------------------------------------------------*/

@media all and (max-width:1365px){
	
body { min-width: 1366px; overflow: auto !important}
		
}
	
/* ----------------------------------------------------------------*/


@media all and (max-width: 1024px) {
    
body { min-width: inherit}
       
}


/* ----------------------------------------------------------------*/

@media all and (max-width:1023px){
	
body { min-width: 1024px; overflow: auto !important}

		
}
	
/* ----------------------------------------------------------------*/

@media all and (max-width: 320px) {

body { min-width: 320px}
    
/*Scrollbar style*/
::-webkit-scrollbar { width: 0px;}  
 
 
}