@media only screen and (max-width: 767px) {
	body { font-size:1em; }
}
@media only screen and (min-width: 768px) {
	body { font-size:1.2em; }
}
html, body { height: 100%; }
body{ font-family: Arial, "微軟正黑體", "sans-serif"; -webkit-tap-highlight-color: rgba(0,0,0,0); scroll-behavior: smooth; overflow: hidden; }
ul, ol, li { list-style:none; }ul, ol, li, span, body, iframe{ padding:0; margin: 0px; }
a, img { border:none; outline:none; }
.is-hide { opacity:0; left: -20em; }
.is-show { opacity:1; left: 1em; }
.box-hide { opacity:0; visibility: hidden; }
.box-show { opacity:1; visibility: visible; }
.tip-hide { opacity:0; left: 120px; visibility: hidden; }
.tip-show { opacity:1; left: 120px; visibility: visible; animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;   }
@keyframes blinker { to { opacity: 0; } }
#blank{ position: absolute; width: 100%; height: 100%; }
#box{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; }
#menu{ position: fixed; width: 18em; height: 80%; top: 3.6em; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; -moz-transition: opacity .5s, left .3s; -webkit-transition: opacity .5s, left .3s; -o-transition: opacity .5s, left .3s; transition: opacity .5s, left .3s; }
#menu a { text-decoration: none; color: inherit; display: block; width: 100%; }
#menu  nav{ padding: 0em 1.5em; }
#menu  img{ position: relative; top: 0.2em; }
#menu  ul { padding: 0.6em 0em; }
#menu .course ul { border-bottom: 0.1em solid #d3d3d3; }
#menu li { display: table-cell; padding: 0em 0.2em; }
#menu .icon { vertical-align: middle; }
#menu .title { color: #fff; background-color: #2971dd; padding: 1em; -webkit-border-top-left-radius: 0.6em; -webkit-border-top-right-radius: 0.6em; -moz-border-radius-topleft: 0.6em; -moz-border-radius-topright: 0.6em; border-top-left-radius: 0.6em; border-top-right-radius: 0.6em; }
#menu .container { height: 80%; background-color: rgba(255, 255, 255, 1); overflow-y: auto; }
#menu .bottom { height: 1em; background-color: rgba(255, 255, 255, 1); -webkit-border-bottom-right-radius: 0.6em; -webkit-border-bottom-left-radius: 0.6em; -moz-border-radius-bottomright: 0.6em; -moz-border-radius-bottomleft: 0.6em; border-bottom-right-radius: 0.6em; border-bottom-left-radius: 0.6em; }
#menu .child { padding-left: 2.9em; }
#menu .node { width: 100%; }
#menu .lesson{ background-color: #2971dd; color: #fff; border-top: 0.1em solid #d3d3d3; }
HR { color: #cc9933 }
a:link { color: #000; }
a:visited { color: #f5651f; }
.no-touch a:hover { color: #f5651f; }
a:active { color: #f5651f; }
#hamburger { cursor: pointer; position: fixed; left: 15px; top: -16px; width: 60px; height: 60px; display: inline-block; background-color: #0a3fc7; -webkit-border-radius: 2.8em; -moz-border-radius: 2.8em; border-radius: 2.8em; border: 7px solid #457eff; transition: .1s; }
.no-touch #hamburger:hover { background-color: rgb(255, 156, 0); border-color: rgb(255, 215, 153); }
#hamburger span, #hamburger span:before, #hamburger span:after { border-radius: 1px; height: 5px; width: 32px; background: #fff; position: absolute; display: block; content: ''; }
#hamburger span { top: 39px; left: 14px; }
#hamburger span:before { top: -9px; }
#hamburger span:after { top: -18px; }
.arrow { border-right: 1px solid; border-bottom: 1px solid; width: 10px; height: 10px; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; }
.arrow.right { transform: rotate(-45deg); }
.arrow.down { transform: rotate(45deg); }
#tip{ display: flex; vertical-align: middle; position: absolute; top: 16px; color:#fff; -moz-transition: opacity .5s, left .5s; -webkit-transition: opacity .5s, left .5s; -o-transition: opacity .5s, left .5s; transition: opacity .5s, left .5s;  transition-delay: .5s; }
#tip img{ margin-right: 10px; }
#tip span:after { content: '請點選單，開始學習！'; }