.collapse:not(.show) { display: none; }

.nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.navbar { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; padding: 0; }
.navbar .container,
.navbar .container #TopMenuBox_PMenu, .navbar .container #TopMenuBox1_PMenu,
.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl { 
    display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; 
}
.navbar .container #TopMenuBox_PMenu, 
.navbar .container #TopMenuBox1_PMenu { width: 100%; }

.navbar-brand { display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; }
.navbar-brand:hover, .navbar-brand:focus { text-decoration: none; }
.navbar-nav { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.navbar-nav .nav-link { padding-right: 0; padding-left: 0; }
.navbar-nav .dropdown-menu { position: static; float: none; }
.navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.navbar-collapse { -ms-flex-preferred-size: 100%; flex-basis: 100%; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-align: center; align-items: center; justify-content: flex-end; }
.navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; }
.navbar-toggler:hover, .navbar-toggler:focus { text-decoration: none; }
.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; background: 50% / 100% 100% no-repeat; }

.navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); }
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { color: rgba(0, 0, 0, 0.9); }
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { /*color: rgba(0, 0, 0, 0.7);*/ }
.navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); }
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active { color: rgba(0, 0, 0, 0.9); }
.navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1); }
.navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-light .navbar-text { color: rgba(0, 0, 0, 0.5); }
.navbar-light .navbar-text a { color: rgba(0, 0, 0, 0.9); }
.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { color: rgba(0, 0, 0, 0.9); }

.dropdown { position: relative; }
.dropdown-toggle { white-space: nowrap; }
.dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; }
.dropdown-toggle:empty::after { margin-left: 0; }

.dropdown-menu { 
    position: absolute; top: 100%; left: 0; z-index: 1000; 
    display: none; 
    float: left; 
    min-width: 10rem; 
    padding: 0.5rem 0; margin: 0.125rem 0 0; 
    font-size: 1rem; color: #212529; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; background-clip: padding-box; 
}
.dropdown-menu.show { display: block; }
.dropdown-header { display: block; padding: 0.5rem 1.5rem; margin-bottom: 0; font-size: 0.875rem; color: #6c757d; white-space: nowrap; }
.dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #e9ecef; }

.dropdown-item { 
    display: block; width: 100%; 
    padding: 10px 10px 10px 20px;
    clear: both; 
    font-weight: 400; color: #552E31; 
    text-align: inherit; white-space: nowrap; 
    background-color: transparent; border: 0; 
}

.dropdown-menu .dropdown-menu > li > a:hover { color: #B81C22; font-weight: bold; }
.dropdown-menu .dropdown-menu > li > a > i { display: inline-block; width: 15px; height: 8px; background: url('../img/ico/arrowRight.png') no-repeat; }

.GMenu > .dropdown > .dropdown-menu { border: 1px solid rgba(0, 0, 0, 0.15); border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }/*第二層*/
.GMenu > .dropdown > .dropdown-menu > li > a:hover { color: #fff; text-decoration: none; background-color: #B81C22; }

@media (min-width: 1200px) {
    .GMenu > .dropdown > .dropdown-menu { top: 76px !important; }/*第二層*/
    .GMenu > .dropdown > .dropdown-menu .dropdown-menu { top: 0 !important; margin-top: 0 !important; }/*第二層以下通用*/
    .dropdown .dropdown-menu { box-shadow: #666 0 0 15px; }
    .dropdown > .dropdown-menu > li:nth-child(n+2) { border-top: 1px solid #ccc; }

    .navbar-expand-lg { -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; }
    .navbar-expand-lg .navbar-nav { -ms-flex-direction: row; flex-direction: row; }
    .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
    .navbar-expand-lg .navbar-nav-scroll { overflow: visible; }
    .navbar-expand-lg .navbar-collapse { display: -ms-flexbox !important; display: flex !important; -ms-flex-preferred-size: auto; flex-basis: auto; }
    .navbar-expand-lg .navbar-toggler { display: none; }

    .navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow { display: none; }
}
@media (max-width: 1199px) {
    .GMenu > .dropdown { border-radius: 0.25rem; }/*第一層*/
    .GMenu > .dropdown > .dropdown-menu > li:nth-child(n+2) { border-top: 1px solid #ccc; }
}



/*右上角超連結*/
#TopMenu { position: relative; z-index: 99; }
#TopMenu > .Links { text-align: right; padding: 8px 10px; background: #EDEDED; }
#TopMenu > .Links a { font-size: 15px; text-decoration: none; color: #552E31; margin: 0 0px; }
#TopMenu > .Links a > i { width: 23px; height: 23px; display: inline-block; vertical-align: middle; background-size: contain; background-repeat: no-repeat; }
#TopMenu > .Links a > i.fb { background-image: url(../img/ico/f_logo_RGB-Blue_58.png); }
#TopMenu > .Links a > i.yt { background-image: url(../img/ico/youtube_social_circle_red.png); }
#TopMenu > .Links a:hover { color: #B81C22; }
@media screen and (min-width: 375px) {
    #TopMenu > .Links a { margin: 0 5px; }
}


/*選單內全域設定*/
.GNav { background: linear-gradient(to bottom, #ffffff 0%,#dddddd 100%); border-top: 4px solid #B81C22; box-shadow: 1px 1px 5px #777; }
.GNav ul { list-style: none; padding: 0; margin: 0; }
.GNav a { text-decoration: none; }
.GNav .Logo { font-size: 28px; font-weight: bold; }
.GNav .Logo > img { height: 55px; margin-right: 8px; vertical-align: middle; }


/*主選單*/
@media screen and (min-width: 1200px) {
    @keyframes ShowTabM1 {
	    0% { background-position: 17px center; background-repeat: no-repeat; color: #333; }
	    100% { background: url('../img/RwdMenu/a06_w.png') 17px center no-repeat; color: #FFF; }
    }
    @keyframes ShowTabM2 {
	    0% { background-position: 17px center; background-repeat: no-repeat; color: #333; }
	    100% { background: url('../img/RwdMenu/a02_w.png') 17px center no-repeat; color: #FFF; }
    }
    @keyframes ShowTabM3 {
	    0% { background-position: 17px center; background-repeat: no-repeat; color: #333; }
	    100% { background: url('../img/RwdMenu/a03_w.png') 17px center no-repeat; color: #FFF; }
    }
    @keyframes ShowTabM4 {
	    0% { background-position: 17px center; background-repeat: no-repeat; color: #333; }
	    100% { background: url('../img/RwdMenu/a04_w.png') 17px center no-repeat; color: #FFF; }
    }
    @keyframes ShowTabM5 {
	    0% { background-position: 17px center; background-repeat: no-repeat; color: #333; }
	    100% { background: url('../img/RwdMenu/a07_w.png') 17px center no-repeat; color: #FFF; }
    }

    .GBut > .GMenu > li { padding: 10px 0; min-width: 150px; border-left: 1px solid #ccc; }
    .GBut > .GMenu > li > a { display: block; padding: 9px 0px 9px 32px; color: #333; font-size: 20px; font-weight:bold; }
    .GBut > .GMenu > li > a i { display: block; color: #AAA; font-size: 14px; font-weight: 400; font-style: initial; }
    .GBut > .GMenu > li:hover { background: linear-gradient(to bottom, #552E31 0%,#333333 100%); }
    .GBut > .GMenu > li:hover > a { padding: 9px 0px 9px 47px; color: #FFF; }
    .GBut > .GMenu > li:nth-child(n+2):hover { border-left: none; }
    .GBut > .GMenu > li.menu1 { min-width: 196px; }
    .GBut > .GMenu > li.menu4 { min-width: 120px; }
    .GBut > .GMenu > li.menu0:hover > a { background: url('../img/RwdMenu/a06_w.png') 17px center no-repeat; animation: ShowTabM1 0.5s linear; } /*個資修改*/
    .GBut > .GMenu > li.menu1:hover > a { background: url('../img/RwdMenu/a02_w.png') 17px center no-repeat; animation: ShowTabM2 0.5s linear; } /*訂單繳費/查閱*/
    .GBut > .GMenu > li.menu2:hover > a { background: url('../img/RwdMenu/a03_w.png') 17px center no-repeat; animation: ShowTabM3 0.5s linear; } /*科目加報*/
    .GBut > .GMenu > li.menu3:hover > a { background: url('../img/RwdMenu/a04_w.png') 17px center no-repeat; animation: ShowTabM4 0.5s linear; } /*書籍加購*/
    .GBut > .GMenu > li.menu4:hover > a { background: url('../img/RwdMenu/a07_w.png') 17px center no-repeat; animation: ShowTabM5 0.5s linear; } /*登出*/
}
@media screen and (max-width: 1199px) {
    .GBut { padding: 0 10px; }
    .GBut > .GMenu { flex-direction: row; }
    .GBut > .GMenu > li { margin: 5px 0; width: 50%; }
    .GBut > .GMenu > li > a { display: block; padding: 9px 0 9px 40px; color: #333; font-size: 20px; font-weight:bold; }
    .GBut > .GMenu > li > a i { display: block; color: #AAA; font-size: 14px; font-weight: 400; font-style: initial; }
    .GBut > .GMenu > li:hover { background: linear-gradient(to bottom, #552E31 0%,#333333 100%); border-left: none; border-radius: 0.25rem; }
    .GBut > .GMenu > li:hover > a { color: #FFF; padding: 9px 0 9px 40px; }
    .GBut > .GMenu > li.menu0 > a { background: url('../img/RwdMenu/a06.png') 10px center no-repeat; }
    .GBut > .GMenu > li.menu1 > a { background: url('../img/RwdMenu/a02.png') 10px center no-repeat; }
    .GBut > .GMenu > li.menu2 > a { background: url('../img/RwdMenu/a03.png') 10px center no-repeat; }
    .GBut > .GMenu > li.menu3 > a { background: url('../img/RwdMenu/a04.png') 10px center no-repeat; }
    .GBut > .GMenu > li.menu4 > a { background: url('../img/RwdMenu/a07.png') 10px center no-repeat; }
    .GBut > .GMenu > li.menu0:hover > a { background: url('../img/RwdMenu/a06_w.png') 10px center no-repeat; }
    .GBut > .GMenu > li.menu1:hover > a { background: url('../img/RwdMenu/a02_w.png') 10px center no-repeat; }
    .GBut > .GMenu > li.menu2:hover > a { background: url('../img/RwdMenu/a03_w.png') 10px center no-repeat; }
    .GBut > .GMenu > li.menu3:hover > a { background: url('../img/RwdMenu/a04_w.png') 10px center no-repeat; }
    .GBut > .GMenu > li.menu4:hover > a { background: url('../img/RwdMenu/a07_w.png') 10px center no-repeat; }
}
@media screen and (max-width: 767px) {
    .GBut > .GMenu > li { width: 50%; }
}