ul.menub{ display:none;}

/*===平版型區===*/
@media (min-width: 685px) and (max-width: 1050px) {
ul.menub { padding: 0; list-style: none; width:100%; clear: both; display: table;}
ul.menub .list { font-size: 17px; border-bottom: 1px solid #017e85; position: relative; width: 100%; box-sizing: border-box; vertical-align: sub; background: #009fa8; clear: both;}
ul.menub .list:after { content: '\f105';/*未點-後*/ font-family:'Font Awesome 5 Free'; font-weight:900; position: absolute; right: 17px; top: 13px; padding: 0px 5px; color: #fff;}
ul.menub .list:before { content: '\f0fe';/*未點-前*/ font-family:'Font Awesome 5 Free'; font-weight:900; position: absolute; left: 17px; top: 13px; padding: 0px 5px; color: #fff;}
ul.menub .list a { text-decoration: none; color: #fff; padding: 12px 0px 12px 45px; display: block; height: 100%; box-sizing: border-box;}
ul.menub .list a:hover { background-color: #008f97; transition: 300ms all; color: #ffffff;}
ul.menub .list .items { height: 0px; overflow: hidden;}
ul.menub .list .items a { padding: 12px 0px 12px 45px; font-size:16px;}
ul.menub .list .items a:hover { background-color: #4b5657; color: #fff; transition: 300ms all;}
ul.menub .list:last-child {  border-bottom: none;}
ul.menub .active:after { content: "\f107";/*點開後-後*/ font-family:'Font Awesome 5 Free'; font-weight:900; position: absolute; right: 17px; top: 13px; padding: 0px 5px; color: #fff;}
ul.menub .active:before { content: '\f146';/*點開後-前*/ font-family:'Font Awesome 5 Free'; font-weight:900; position: absolute; left: 17px; top: 13px; padding: 0px 5px; color: #fff;}
ul.menub .active > .items { display: block; background: #3e4647; padding: 0px; height: auto; color: #fff; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition: all 200ms; clear: both; float: left; width: 100%;}
ul.menub .active > .items li { display:inline-block; width:50%; padding: 0px; border-bottom: 1px solid #4b5657; list-style: none;}
ul.menub .active > .items li:last-child { border-color: transparent; padding-bottom: 0px;}
ul.menub .active > .items .active > .items { background-color: #2f4b67;}
ul.menub .active > a { color: #ffffff; text-transform: uppercase;}
ul.menub .active .list { background: #697d92;}
ul.menub .active .list a { padding: 12px 0px 12px 45px;}
}

/*===手機版型區===*/
@media screen and (max-width: 686px) {
ul.menub { padding: 0; list-style: none; width:100%; clear: both; display: table;}
ul.menub .list { font-size:16px; border-bottom: 1px solid #017e85; position: relative; width: 100%; box-sizing: border-box; vertical-align: sub; background: #009fa8; clear: both;}
ul.menub .list:after { content: '\f105';/*未點-後*/ font-family:'Font Awesome 5 Free'; font-weight:900; position: absolute; right: 17px; top:50%; transform:translateY(-50%); padding: 0px 5px; color: #fff;}
ul.menub .list:before { content: '\f0fe';/*未點-前*/ font-family:'Font Awesome 5 Free'; font-weight:900; position: absolute; left: 17px; top:50%; transform:translateY(-50%); padding: 0px 5px; color: #fff;}
ul.menub .list a { text-decoration: none; color: #fff; padding: 12px 0px 12px 45px; display: block; height: 100%; box-sizing: border-box;}
ul.menub .list a:hover { background-color: #008f97; transition: 300ms all; color: #ffffff;}
ul.menub .list .items { height: 0px; overflow: hidden;}
ul.menub .list .items a { padding: 12px 0px 12px 45px; font-size:15px;}
ul.menub .list .items a:hover { background-color: #4b5657; color: #fff; transition: 300ms all;}
ul.menub .list:last-child {  border-bottom: none;}
ul.menub .active:after { content: "\f107";/*點開後-後*/ font-family:'Font Awesome 5 Free'; font-weight:900; position: absolute; right: 17px; top:50%; transform:translateY(-50%); padding: 0px 5px; color: #fff;}
ul.menub .active:before { content: '\f146';/*點開後-前*/ font-family:'Font Awesome 5 Free'; font-weight:900; position: absolute; left: 17px; top:50%; transform:translateY(-50%); padding: 0px 5px; color: #fff;}
ul.menub .active > .items { display: block; background: #3e4647; padding: 0px; height: auto; color: #fff; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition: all 200ms; clear: both; float: left; width: 100%;}
ul.menub .active > .items li { display:block; width:100%; padding: 0px; border-bottom: 1px solid #4b5657; list-style: none;}
ul.menub .active > .items li:last-child { border-color: transparent; padding-bottom: 0px;}
ul.menub .active > .items .active > .items { background-color: #2f4b67;}
ul.menub .active > a { color: #ffffff; text-transform: uppercase;}
ul.menub .active .list { background: #697d92;}
ul.menub .active .list a { padding: 12px 0px 12px 45px;}
}