@media only screen and (max-width: 767px) {
	body { font-size:1em; overflow: auto; }
	#blank{ overflow: hidden; }
    #blank.m_1, #blank.m_2 {width: 100%;}
	#menu_div{width: auto; height: auto;}
}
@media only screen and (min-width: 768px) {
	body { font-size:1.2em; overflow: hidden; }
	#blank{ overflow: auto; }
    #blank.m_1 {width: 100%;}
    #blank.m_2 {width: calc(100% - 20em);}
	#menu_div{width: 18em; height: calc(100% - 6rem);}
}
html, body, body>div:nth-child(1) { height: 100%; width: 100%; }
body{ font-family: Arial, "微軟正黑體", "sans-serif"; -webkit-tap-highlight-color: rgba(0,0,0,0); scroll-behavior: smooth; background-color: rgba(0, 0, 0, 0.7); }
ul, ol, li { list-style:none; }ul, ol, li, span, body, iframe{ padding:0; margin: 0px; }
a, img { border:none; outline:none; }

button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
.is-hide { /*opacity:0; left: -20em;*/ display: none; }
.is-show { /*opacity:1; left: 1em;*/ display: block; }
.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,#menu_div,#hamburger{ -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }
#blank{ float:right; /*height: 100%;*/ background-color: rgba(255, 255, 255, 1); min-height: 100%; }
#menu_div{ float: left; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overflow: auto; /*background-color: rgba(0, 0, 0, 0.7);*/ padding: 4rem 1em 2rem 1em;  }
#menu a { text-decoration: none; color: inherit; display: block; width: 100%; border-top: 0.1em solid #d3d3d3; }
#menu a.course{ transition: color,background-color .3s;background-color: rgba(0,0,0,0); /*border-bottom: 0.1em solid #d3d3d3;*/ }
#menu a.course.active{ color:rgba(245,101,31,1); }
#menu a.course.demo{ background-color: #D2D2D2; }
.no-touch #menu a.course:hover{ color: #fff; background-color: #a3a3a3; }
#menu nav{ padding: 0em 1.5em; }
#menu img{ position: relative; vertical-align: middle; }
#menu ul { padding: 0.6em 0em; }
/*#menu .course ul { border-bottom: 0.1em solid #d3d3d3; }*/
#menu li { display: table-cell; padding: 0em 0.2em; vertical-align: middle; }
#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;*/ }
#menu .lock{ color: #a3a3a3; }

HR { color: #cc9933 }
a:link { color: #000; }
a:visited { color: #f5651f; }
.no-touch a:hover { color: #f5651f; }
a:active { color: #f5651f; }
/*
#hamburger { position: absolute; left: 1em; top: 0.3rem; width: 75px; height: 55px; display: inline-block;  background-repeat: no-repeat; background-position: left top;   background-size:75px 55px;  }
.hamburger_close{ background: url('hamburger_1.svg'); }
.hamburger_open{ background: url('hamburger_2.svg'); opacity:.5; }
.hamburger_open:hover { opacity:1; }
*/
.hamburger_open{ opacity:.5; }
#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 { opacity:1; 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: '請點選單，開始學習！'; }