@charset "UTF-8";
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

table td p {
  margin: 0;
}

.table-block {
  width: 48%;
  display: inline-block;
}
@media (max-width: 600px) {
  .table-block {
    width: 98%;
  }
}

.table-block-3parts {
  width: 32%;
  display: inline-block;
}
@media (max-width: 600px) {
  .table-block-3parts {
    width: 98%;
  }
}

.table-block-4parts {
  width: 24%;
  display: inline-block;
}
@media (max-width: 600px) {
  .table-block-4parts {
    width: 98%;
  }
}

blockquote {
  margin: 20px 40px;
  border-left: 3px solid #d58e2b;
  line-height: 18pt;
  background: #f3e8d7;
  color: #a42f0e;
  padding: 10px 10px 5px 10px;
}

.root {
  max-width: 1920px;
  overflow-x: hidden;
  margin: 0 auto;
  font-size: 14px;
  font-family: NotoSansCJKtc, PingFang, "Open Sans", Verdana, Geneva,
    "新微軟正黑體", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-style: normal;
  font-stretch: normal;
  color: #000;
  -webkit-overflow-scrolling: touch;
  background-color: #dd8900;
}

.colorRed {
  color: #9e0a04;
}

.containerWrap {
  width: 1366px;
  padding: 0 35px;
  margin: 0 auto;
}
@media (max-width: 1349px) {
  .containerWrap {
    width: 1280px;
  }
}
@media (max-width: 1279px) {
  .containerWrap {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .containerWrap {
    padding: 0 15px;
  }
}

main {
  padding-bottom: 133px;
  padding-top: 190px;
  background-color: #efefef;
}
@media (max-width: 500px) {
  main {
    padding-bottom: 80px;
    padding-top: 100px;
  }
}
main.indexContainer {
  padding-top: 0;
  margin-top: -40px;
}

header img,
footer img {
  width: 100%;
}
header ul,
footer ul {
  padding-left: 10px;
  margin-bottom: 0;
}
header li,
footer li {
  list-style: none;
  cursor: pointer;
}

.hide {
  display: none;
}

button {
  padding: 0;
  border: none;
  color: #000;
}
button.btn {
  padding: 0;
}
button.btn:focus {
  box-shadow: none;
}
button.default {
  background-color: #143d4f;
  color: #fff;
}
button.default:hover {
  color: #fff;
}

figure {
  margin: 0;
}

.disabled {
  opacity: 0.2;
}
.disabled button {
  pointer-events: none;
}

.roundBtns {
  background-color: #143d4f;
}
.roundBtns .divider {
  display: inline-block;
  width: 1px;
  height: 26px;
  margin: 0 8px;
  background-color: #fff;
  vertical-align: middle;
}
.roundBtns button {
  background-color: transparent;
  color: #fff;
}

header {
  position: relative;
  z-index: 1041;
  height: 80px;
  background-color: #dd8900;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
@media (max-width: 500px) {
  header {
    height: 49px;
  }
}
header::after {
  content: "";
  display: block;
  background-image: url("../img/headerBg2.png");
  background-size: 100% auto;
  background-position: 0 -10px;
  background-repeat: no-repeat;
  position: absolute;
  top: 79px;
  width: 100%;
  height: 88px;
  pointer-events: none;
}
@media (max-width: 768px) {
  header::after {
    display: none;
  }
}
header ul {
  display: flex;
  justify-content: flex-end;
  color: #fff;
}
header li {
  flex: none;
  width: auto;
  align-self: center;
}
header a {
  color: inherit;
  text-decoration: none;
}
header a:hover {
  color: inherit;
}
header .modal-backdrop.show,
header .offcanvas {
  top: 79px;
}
@media (max-width: 500px) {
  header .modal-backdrop.show,
  header .offcanvas {
    top: 49px;
  }
}
header .offcanvas {
  height: 0;
  overflow: hidden;
  transform: translateY(0);
  transition: 0.3s all linear;
}
header .offcanvas .menuTop {
  color: #000;
  justify-content: center;
  font-size: 20px;
  margin-top: 15px;
}
header .offcanvas .menuTop i {
  color: #000;
}
header .offcanvas .menuTop li {
  flex: 0 0 30%;
  text-align: center;
}
header .offcanvas .menuTop li select {
  width: 70%;
  color: #000;
}
header .offcanvas.show {
  height: calc(100vh - 79px);
  overflow-y: auto;
}
@media (max-width: 500px) {
  header .offcanvas.show {
    height: calc(100vh - 49px);
  }
}
header ul.menuBody {
  display: block;
  text-align: center;
  padding: 18px 18px 50px;
}
header ul.menuBody > li {
  margin-bottom: 4px;
  background-color: #dd8900;
  color: #fff;
  line-height: 2.51em;
  font-size: 32px;
}
@media (max-width: 500px) {
  header ul.menuBody > li {
    font-size: 24px;
  }
}
header ul.menuBody > li .collapseWrap {
  background-color: #fff;
}
header ul.menuBody > li > div[aria-expanded="true"] {
  background-color: #fff;
  color: #dd8900;
  border-bottom: 16px solid #dd8900;
}
header ul.menuBody .card-body {
  border: none;
  color: #000;
  border-radius: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  position: relative;
  z-index: 1;
}
@media (max-width: 1024px) {
  .header {
    padding: 15px 18px 0;
  }
}
@media (max-width: 768px) {
  .header {
    padding: 18px 18px 20px;
  }
}
@media (max-width: 500px) {
  .header {
    padding: 0 15px;
    height: 100%;
  }
}
.header .logo {
  flex: none;
  width: 355px;
  align-self: center;
}
@media (max-width: 1280px) {
  .header .logo {
    width: 320px;
  }
}
@media (max-width: 1024px) {
  .header .logo {
    width: 280px;
  }
}
@media (max-width: 960px) {
  .header .logo {
    width: 200px;
  }
}
@media (max-width: 500px) {
  .header .logo {
    width: 45vw;
  }
}
.header .logo .logo-m {
  display: none;
}
@media (max-width: 768px) {
  .header .logo .logo-m {
    display: block;
  }
}
.header .logo .logo-pc {
  display: block;
}
@media (max-width: 768px) {
  .header .logo .logo-pc {
    display: none;
  }
}
.header .menu {
  flex: none;
  width: auto;
  align-self: center;
}
@media (max-width: 768px) {
  .header .pcMenu {
    display: none;
  }
}
.header .mMenu {
  display: none;
}
@media (max-width: 768px) {
  .header .mMenu {
    display: flex;
  }
}
.header .mMenu li:not(:nth-last-child(1)) {
  margin-right: 25px;
}
@media (max-width: 500px) {
  .header .mMenu li:not(:nth-last-child(1)) {
    margin-right: 15px;
  }
}
.header .mMenu li:nth-last-child(1) {
  width: 57px;
  text-align: center;
}
@media (max-width: 500px) {
  .header .mMenu li:nth-last-child(1) {
    width: 28px;
  }
}
.header .mMenu li img {
  width: 100%;
}
.header .mMenu .mCartBtn,
.header .mMenu #mLoginBtn {
  color: #fff;
  background-color: transparent;
}
.header .mMenu .mCartBtn {
  position: relative;
  overflow: visible;
}
.header .mMenu .mCartBtn .mCartCount {
  position: absolute;
  right: auto;
  left: -7px;
  bottom: -5px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 14px;
  transform: none;
  z-index: 1;
}
@media (max-width: 500px) {
  .header .mMenu .mCartBtn .mCartCount {
    right: auto;
    left: -6px;
    bottom: -4px;
    min-width: 16px;
    height: 16px;
    padding: 1px 4px;
    font-size: 9px;
    line-height: 14px;
  }
}
.header .mMenu i {
  vertical-align: middle;
}
.header .mMenu i.fas {
  font-size: 36px;
}
@media (max-width: 500px) {
  .header .mMenu i.fas {
    font-size: 23px;
  }
}
.header .menuTop {
  margin-bottom: 8px;
}
.header .menuTop li i {
  font-size: 20px;
}
.header .menuTop li:first-child select {
  margin-left: 0;
}
.header .menuTop li select {
  border-radius: 5px;
  padding: 3px 10px;
  border: 0;
  margin-left: 5px;
  background-color: #fff;
  color: #000;
}
.header .menuTop li select:focus {
  outline: none;
  border: 0;
}
.header .menuBottom {
  font-size: 18px;
  align-items: center;
}
@media (max-width: 1024px) {
  .header .menuBottom {
    font-size: 14px;
  }
}
.header .menuBottom .fa-shopping-cart,
.header .menuBottom .fa-user {
  font-size: 20px;
}
@media (max-width: 1024px) {
  .header .menuBottom .fa-shopping-cart,
  .header .menuBottom .fa-user {
    font-size: 15px;
  }
}
.header .menuBottom .dropdownBtn {
  background-color: transparent;
  color: #fff;
  border: none;
  padding: 0;
}
.header .menuBottom .dropdownBtn.show {
  color: #010101;
}
.header .menuBottom > li {
  margin-right: 22px;
}
@media (max-width: 1280px) {
  .header .menuBottom > li {
    margin-right: 13px;
  }
}
.header .menuBottom > li:hover > button,
.header .menuBottom > li:hover > a {
  color: #010101;
}
.header .menuBottom > li:nth-child(5) {
  background-color: #9a2f27;
  padding: 0 25px;
  height: 39px;
  line-height: 39px;
  border-radius: 5px;
}
@media (max-width: 1024px) {
  .header .menuBottom > li:nth-child(4) {
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
  }
}
.header .menuBottom > li:nth-last-child(1) {
  margin-right: 0;
}
.header .headerDropdownMenu {
  width: 490px;
  margin: 0 auto;
}
.header .headerDropdownMenu::before {
  content: "";
  position: absolute;
  top: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12.5px 15px 12.5px;
  border-color: transparent transparent #414141 transparent;
}
.header .headerDropdownMenu .headerDropdownMenuContent {
  padding: 28px 45px 24px;
  max-height: 473px;
  overflow-y: auto;
}
.header .headerDropdownMenu.loginMenu .headerDropdownMenuContent {
  padding: 16px 38px 41px;
  max-height: none;
}
.header .courseDropDown {
  padding: 15px 25px;
  border: none;
}
.header .courseDropDown li {
  display: inline-block;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.69em;
  color: #000;
}
.header .courseDropDown li:not(:nth-last-child(1))::after {
  content: "";
  width: 1px;
  height: 17px;
  background-color: #000;
  vertical-align: middle;
  display: inline-block;
  margin: 0 5px;
}

.headerDropdownMenu {
  border-radius: 5px;
  padding: 0;
  border: none;
  box-shadow: 0 0 16px 0 rgba(155, 155, 155, 0.26);
}
.headerDropdownMenu .headerDropdownMenuTitle {
  height: 47px;
  line-height: 47px;
  color: #fff;
  background-color: #414141;
  text-align: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.headerDropdownMenu input:not([type="checkbox"]) {
  width: 100%;
  background-color: #f2f2f2;
  border: none;
  padding: 0 17px;
  height: 50px;
  border-radius: 5px;
  font-size: 18px;
}
.headerDropdownMenu input:not([type="checkbox"])::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.headerDropdownMenu.cartMenu::before {
  right: 100px;
}
.headerDropdownMenu.cartMenu .cartItem {
  display: flex;
  align-content: center;
  padding-bottom: 15px;
}
.headerDropdownMenu.cartMenu .cartItem:not(:nth-last-child(1)) {
  border-bottom: 1px dashed #000;
  margin-bottom: 30px;
}
.headerDropdownMenu.cartMenu .cartItemContent {
  flex: 1;
  padding-right: 10px;
}
.headerDropdownMenu.cartMenu .cartItemBtn {
  flex: none;
  width: 20px;
  height: 20px;
  align-self: center;
  border: none;
  background-color: #b21f1f;
  border-radius: 2px;
  color: #fff;
  padding: 0;
  text-align: center;
  font-size: 12px;
  line-height: 21px;
}
.headerDropdownMenu.cartMenu h3 {
  font-size: 18px;
  line-height: 20px;
  color: #000;
  font-weight: bold;
}
.headerDropdownMenu.cartMenu p {
  line-height: 20px;
  margin-bottom: 0;
}
.headerDropdownMenu.cartMenu .total {
  background-color: #f7f7f7;
  font-size: 16px;
  padding-top: 23px;
  padding-bottom: 13px;
  border-bottom: 4px solid #b21f1f;
}
.headerDropdownMenu.cartMenu .total span {
  font-size: 22px;
  color: #b21f1f;
}
.headerDropdownMenu.cartMenu .checkoutBtn {
  width: 218px;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  margin: 17px auto 0;
}

.headerDropdownMenu.loginMenu {
  height: auto;
}
.headerDropdownMenu.loginMenu::before {
  right: 20px;
}
.headerDropdownMenu.loginMenu .headerDropdownMenuContent > p {
  color: #838383;
  font-size: 14px;
  margin-bottom: 10px;
}
.headerDropdownMenu.loginMenu .headerDropdownMenuContent > p span,
.headerDropdownMenu.loginMenu .headerDropdownMenuContent > p a {
  color: #000;
  padding-bottom: 3px;
  border-bottom: 1px solid #000;
}
.headerDropdownMenu.loginMenu .loginItem:not(:nth-last-child(1)) {
  margin-bottom: 15px;
}
.headerDropdownMenu.loginMenu .margin {
  margin: 17px 0;
}
.headerDropdownMenu.loginMenu .loginHandler {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #838383;
}
.headerDropdownMenu.loginMenu .loginHandler > div,
.headerDropdownMenu.loginMenu .loginHandler > span {
  flex: none;
  width: auto;
}
.headerDropdownMenu.loginMenu .loginBtnWrap {
  margin-bottom: 30px;
}
.headerDropdownMenu.loginMenu .otherLogin {
  display: flex;
  justify-content: space-between;
}
.headerDropdownMenu.loginMenu .otherLogin button {
  flex: none;
  width: 204px;
  font-size: 14px;
}
.headerDropdownMenu.loginMenu button {
  color: #fff;
  width: 100%;
  border-radius: 5px;
  height: 50px;
}
.headerDropdownMenu.loginMenu .loginBtn {
  background-color: #993025;
}
.headerDropdownMenu.loginMenu .fbBtn {
  background-color: #3a5ca9;
}
.headerDropdownMenu.loginMenu .googleBtn {
  background-color: #397af2;
}

#mLogin .loginMenu {
  overflow: auto;
  max-height: calc(100vh - 170px);
}
#mLogin .modal-dialog {
  max-width: none;
  width: 93%;
  margin: 10px auto;
}
#mLogin .headerDropdownMenuContent {
  padding: 23px 43px;
}
@media (max-width: 500px) {
  #mLogin .headerDropdownMenuContent {
    padding: 20px 15px;
  }
}
@media (min-width: 501px) {
  #mLogin .headerDropdownMenuContent > p {
    font-size: 25px;
    margin-bottom: 18px;
  }
}
#mLogin .headerDropdownMenuTitle {
  font-size: 30px;
  height: 73px;
  line-height: 73px;
}
@media (max-width: 500px) {
  #mLogin .headerDropdownMenuTitle {
    font-size: 20px;
    height: 53px;
    line-height: 53px;
  }
}
@media (min-width: 501px) {
  #mLogin input:not([type="checkbox"]) {
    height: 80px;
    font-size: 30px;
  }
}
@media (min-width: 501px) {
  #mLogin .loginHandler {
    font-size: 25px;
  }
}
@media (min-width: 501px) {
  #mLogin button {
    font-size: 25px;
    height: 73px;
    line-height: 73px;
  }
}
#mLogin .otherLogin button {
  width: 49%;
}

footer {
  position: relative;
  background-color: #983025;
  padding-bottom: 135px;
}
@media (max-width: 768px) {
  footer {
    padding-bottom: 151px;
  }
}
@media (max-width: 500px) {
  footer {
    padding-bottom: 100px;
  }
}
footer::before {
  content: "";
  background-image: url("../img/bg/index-bg-06-transparent.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  width: 100%;
  padding-top: 6.9%;
  bottom: 100%;
}
@media (max-width: 600px) {
  footer::before {
    background-image: url("../img/bg/index-bg-m-06-transparent.png");
  }
}

.footerCenter {
  display: none;
  width: 100%;
  color: #fff;
  font-weight: 300;
}
@media (max-width: 768px) {
  .footerCenter {
    display: block;
  }
}
.footerCenter li {
  font-size: 16px;
  padding-left: 23px;
}
.footerCenter li:nth-child(1) {
  padding-top: 30px;
}

.footer {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .footer {
    padding-top: 50px;
  }
}
.footer .footerLeft,
.footer .footerRight {
  flex: none;
  width: auto;
}
.footer .footerLeft {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.71em;
  color: rgba(255, 255, 255, 0.54);
}
.footer .footerLeft a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.54);
}
@media (max-width: 768px) {
  .footer .footerLeft {
    display: none;
  }
}
@media (max-width: 768px) {
  .footer .footerRight {
    flex: 1;
    text-align: center;
  }
}
.footer .footerMenu {
  display: flex;
  width: 100%;
}
@media (max-width: 768px) {
  .footer .footerMenu {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.footer .footerMenuItem {
  flex: none;
  width: 100px;
  color: #fff;
  font-weight: 300;
}
@media (max-width: 768px) {
  .footer .footerMenuItem {
    width: 40%;
  }
}
@media (max-width: 768px) {
  .footer .footerMenuItem:nth-child(1) {
    margin-right: 50px;
  }
}
@media (max-width: 500px) {
  .footer .footerMenuItem:nth-child(1) {
    margin-right: 20px;
  }
}
.footer .footerMenuItem:nth-last-child(1) {
  width: 190px;
}
@media (max-width: 768px) {
  .footer .footerMenuItem:nth-last-child(1) {
    width: 100%;
    margin-top: 70px;
  }
}
@media (max-width: 500px) {
  .footer .footerMenuItem:nth-last-child(1) {
    margin-top: 40px;
  }
}
.footer .footerLogo {
  width: 259px;
  margin-bottom: 29px;
}
.footer .policy {
  margin-top: 24px;
  font-size: 12px;
  line-height: 2em;
}
.footer .policy p {
  margin-bottom: 0;
}
.footer .footerMenuItemTitle {
  margin-bottom: 39px;
  font-size: 16px;
  line-height: 2.25em;
}
@media (max-width: 768px) {
  .footer .footerMenuItemTitle {
    margin-bottom: 0;
    font-size: 26px;
  }
}
@media (max-width: 500px) {
  .footer .footerMenuItemTitle {
    font-size: 24px;
  }
}
.footer li {
  font-size: 13px;
  line-height: 2.08em;
}
@media (max-width: 768px) {
  .footer li {
    font-size: 22px;
  }
}
@media (max-width: 500px) {
  .footer li {
    font-size: 20px;
  }
}

.footerFixBottom {
  display: none;
}
@media (max-width: 768px) {
  .footerFixBottom {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 86px;
    background-color: #dd8900;
    color: #fff;
    z-index: 20;
    padding: 0 18px;
    justify-content: space-between;
  }
}
@media (max-width: 500px) {
  .footerFixBottom {
    height: 49px;
  }
}

/* 20250608 */
.footerFixBottom li {
  flex: auto;
  width: auto;
  font-size: 19px;
  align-self: center;
  text-align: center;
}
.footerFixBottom li:nth-child(3) {
  background-color: #9a2f27;
  height: 52px;
  line-height: 50px;
  width: 94px;
  border-radius: 3.8px;
  text-align: center;
}
.footerFixBottom i {
  font-size: 60px;
}
@media (max-width: 500px) {
  .footerFixBottom i {
    font-size: 35px;
  }
}
.footerFixBottom .fbMsg {
  width: 67px;
}
@media (max-width: 500px) {
  .footerFixBottom .fbMsg {
    width: 50px;
  }
}

.subscribe {
  width: 188px;
  height: 29px;
}
@media (max-width: 768px) {
  .subscribe {
    margin: 0 auto;
    max-width: 516px;
    width: 90%;
    height: 81px;
    margin-top: 30px;
  }
}
@media (max-width: 500px) {
  .subscribe {
    width: 85%;
    height: 60px;
    margin-top: 20px;
  }
}
.subscribe input {
  line-height: 29px;
  padding: 0 8px;
  font-size: 14px;
  height: 100%;
}
@media (max-width: 768px) {
  .subscribe input {
    font-size: 43px;
  }
}
@media (max-width: 500px) {
  .subscribe input {
    font-size: 30px;
  }
}
.subscribe button {
  width: 52px;
  height: 100%;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}
.subscribe button:hover {
  color: #fff;
}
@media (max-width: 768px) {
  .subscribe button {
    width: 27%;
    font-size: 38px;
  }
}
@media (max-width: 500px) {
  .subscribe button {
    font-size: 30px;
  }
}

.pageTitle {
  color: #a24a24;
  font-size: 22px;
  padding-bottom: 30px;
  font-weight: normal;
  position: relative;
  margin-bottom: 40px;
}
@media (max-width: 1279px) and (min-width: 769px) {
  .pageTitle {
    padding-bottom: 22px;
  }
}
@media (max-width: 768px) {
  .pageTitle {
    text-align: center;
    margin-bottom: 34px;
  }
}
@media (max-width: 500px) {
  .pageTitle {
    font-size: 20px;
    padding-bottom: 22px;
    margin-bottom: 24px;
  }
}
.pageTitle::after {
  content: "";
  display: block;
  width: 98px;
  height: 1px;
  background-color: #a24a24;
  position: absolute;
  bottom: 0;
}
@media (max-width: 1279px) and (min-width: 769px) {
  .pageTitle::after {
    width: 70px;
  }
}
@media (max-width: 768px) {
  .pageTitle::after {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 500px) {
  .pageTitle::after {
    width: 50px;
  }
}

.mPageDesc {
  display: none;
}
@media (max-width: 768px) {
  .mPageDesc {
    display: block;
    font-size: 30px;
    line-height: 1.47em;
    margin-bottom: 65px;
  }
}
@media (max-width: 500px) {
  .mPageDesc {
    font-size: 22px;
    margin-bottom: 45px;
  }
}

.listNav {
  padding: 0;
  margin-bottom: 10px;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  overflow-x: auto;
}
.listNav li {
  list-style: none;
  flex: none;
  width: 16.667%;
  height: 68px;
  line-height: 68px;
  color: rgb(201, 201, 201);
  background-color: #434343;
  text-align: center;
  border-bottom: 4px solid #dd8900;
  cursor: pointer;
  font-size: 18px;
  position: relative;
}
@media (max-width: 768px) {
  .listNav li {
    width: 65px;
  }
}
@media (max-width: 1024px) {
  .listNav li {
    font-size: 14px;
  }
}
.listNav li:not(:nth-last-child(1))::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: rgba(125, 125, 125, 0.2);
  box-shadow: -1px -1px 0px 1px rgba(45, 45, 45, 0.45);
  z-index: 1;
}
.listNav li:nth-last-child(1) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.listNav li span:nth-child(2) {
  display: none;
}
.listNav li.active {
  background-color: #dd8900;
  color: #fff;
}
.listNav li.active span:nth-child(2) {
  display: inline-block;
}
.listNav li.active span:nth-child(2)::before {
  content: "/";
  margin: 0 5px;
}
.listNav li.active:not(:nth-last-child(1))::after {
  content: "";
  width: 0;
  height: 0;
}

.mListNav {
  display: none;
}
.mListNav .arrow {
  font-size: 60px;
  line-height: 60px;
  color: #000;
  width: auto;
  flex: none;
}
@media (max-width: 500px) {
  .mListNav .arrow {
    width: 50px;
    font-size: 40px;
    line-height: 40px;
  }
}
.mListNav .arrow:nth-of-type(1) {
  text-align: right;
}
.mListNav .arrow:nth-of-type(2) {
  text-align: left;
}
.mListNav .navItem {
  flex: none;
  width: 386px;
  min-height: 64px;
  color: #fff;
  background-color: #dd8900;
  text-align: center;
  border-radius: 4px;
  margin: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 500px) {
  .mListNav .navItem {
    flex: 1;
    min-height: 44px;
  }
}
.mListNav .navItem span:nth-child(1) {
  font-size: 30px;
}
@media (max-width: 500px) {
  .mListNav .navItem span:nth-child(1) {
    font-size: 22px;
  }
}
.mListNav .navItem span:nth-child(2) {
  font-size: 21px;
}
@media (max-width: 500px) {
  .mListNav .navItem span:nth-child(2) {
    font-size: 15px;
  }
}
.mListNav .navItem span:nth-child(2)::before {
  content: "/";
  margin: 0 5px;
}

#mCart,
#mLogin {
  top: 79px;
  height: calc(100vh - 79px);
  overflow-y: auto;
}
@media (max-width: 500px) {
  #mCart,
  #mLogin {
    top: 60px;
    height: calc(100vh - 60px);
  }
}

#mCart .modal-header {
  height: 73px;
  padding: 0;
  justify-content: center;
  color: #fff;
  background-color: #414141;
  font-size: 30px;
}
@media (max-width: 500px) {
  #mCart .modal-header {
    font-size: 20px;
    height: 53px;
  }
}
#mCart .modal-content {
  border-radius: 5px;
  overflow: hidden;
  background-color: transparent;
  border: none;
}
#mCart .modal-body {
  padding: 45px 42px;
  max-height: 600px;
  overflow: auto;
  background-color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 0 16px 0 rgba(155, 155, 155, 0.26);
}
@media (max-width: 500px) {
  #mCart .modal-body {
    max-height: 380px;
    padding: 20px 15px;
  }
}
#mCart .modal-dialog {
  max-width: none;
  width: 93%;
  margin: 10px auto;
}
#mCart .totoSheet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
  border-top: 6px solid #9a2f27;
  padding: 18px 12px;
  font-size: 30px;
}
@media (max-width: 500px) {
  #mCart .totoSheet {
    padding: 8px 6px;
    font-size: 22px;
  }
}
#mCart .totoSheet div {
  flex: none;
  width: auto;
}
#mCart .totoSheet div span {
  font-size: 41px;
  margin-left: 5px;
}
@media (max-width: 500px) {
  #mCart .totoSheet div span {
    font-size: 32px;
  }
}
#mCart .modal-footer {
  border: none;
  background-color: transparent;
  justify-content: center;
  margin: 20px 0 0;
  padding: 0;
}
#mCart .roundBtns {
  width: 293px;
  height: 64px;
  border-radius: 32px;
  line-height: 64px;
}
@media (max-width: 500px) {
  #mCart .roundBtns {
    width: 210px;
    height: 46px;
    border-radius: 23px;
    line-height: 46px;
    margin-bottom: 15px;
  }
}
#mCart .roundBtns button {
  width: auto;
  font-size: 25px;
  height: auto;
  line-height: normal;
  border-radius: 0;
  vertical-align: middle;
}
@media (max-width: 500px) {
  #mCart .roundBtns button {
    font-size: 16px;
  }
}
@media (max-width: 500px) {
  #mCart .roundBtns .divider {
    height: 18px;
  }
}

.indexHeader #mCart .modal-content {
  background-color: #fff;
}
.indexHeader #mCart .modal-body {
  box-shadow: none;
}

.mCartItem {
  display: flex;
  padding-bottom: 28px;
  margin-bottom: 28px;
}
@media (max-width: 500px) {
  .mCartItem {
    padding-bottom: 19px;
    margin-bottom: 19px;
  }
}
.mCartItem:not(:nth-last-child(1)) {
  border-bottom: 1px dashed #000;
}
.mCartItem .content {
  flex: 1;
  padding-right: 10px;
}
.mCartItem button {
  width: 37px;
  height: 37px;
  color: #fff;
  background-color: #9e0a04;
  font-size: 23px;
  text-align: center;
  line-height: 37px;
  border-radius: 3px;
  align-self: center;
}
@media (max-width: 500px) {
  .mCartItem button {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
  }
}
.mCartItem h3,
.mCartItem p {
  font-size: 25px;
  margin-bottom: 0;
  line-height: 1.4em;
}
@media (max-width: 500px) {
  .mCartItem h3,
  .mCartItem p {
    font-size: 18px;
  }
}
.mCartItem .price {
  font-size: 30px;
  margin-top: 30px;
  line-height: 0.8em;
}
@media (max-width: 500px) {
  .mCartItem .price {
    font-size: 24px;
    margin-top: 20px;
  }
}

.courseType_1 {
  padding-bottom: 75px;
  box-sizing: border-box;
}
@media (max-width: 500px) {
  .courseType_1 {
    padding-bottom: 20px;
  }
}

.twoBlockType {
  display: flex;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .twoBlockType {
    flex-direction: column;
  }
}
.twoBlockType > div {
  border-radius: 5px;
  box-shadow: 0 0 16px 0 rgba(155, 155, 155, 0.07);
  background-color: #fff;
  padding-top: 47px;
  padding-bottom: 31px;
}
.twoBlockType .blockLeft {
  width: 70.78%;
  padding-left: 47px;
  padding-right: 47px;
}
.twoBlockType.courseIntro.is-content-spacing-none .blockLeft {
  padding: 0;
  overflow: hidden;
}
.twoBlockType.onlineCourse.is-content-spacing-none .blockLeft {
  padding: 0;
  overflow: hidden;
}
.twoBlockType.onlineCourse.is-content-spacing-none .course-detail-summary {
  padding: 47px 47px 0;
}
.twoBlockType.onlineCourse.is-content-spacing-none .content {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .twoBlockType.onlineCourse.is-content-spacing-none .course-detail-summary {
    padding: 47px 44px 0;
  }
}
@media (max-width: 500px) {
  .twoBlockType.onlineCourse.is-content-spacing-none .course-detail-summary {
    padding: 10px 10px 0;
  }
}
@media (max-width: 768px) {
  .twoBlockType .blockLeft {
    width: 100%;
    margin-bottom: 21px;
    padding-left: 44px;
    padding-right: 44px;
  }
}
@media (max-width: 500px) {
  .twoBlockType .blockLeft {
    padding: 10px;
  }
}
/* .twoBlockType .blockRight {
  flex: 1;
  align-self: flex-start;
  margin-left: 17px;
  padding-left: 25px;
  padding-right: 25px;
} */

.twoBlockType .blockRight {
  flex: 1;
  align-self: flex-start;
  margin-left: 17px;
  padding-left: 25px;
  padding-right: 25px;
}

@media (max-width: 768px) {
  .twoBlockType .blockRight {
    width: 100%;
    margin-left: 0;
    padding-left: 44px;
    padding-right: 44px;
    padding-bottom: 66px;
  }
}
@media (max-width: 500px) {
  .twoBlockType .blockRight {
    padding: 20px;
  }
}
.twoBlockType .title {
  font-size: 18px;
}
.twoBlockType .content {
  font-size: 16px;
  line-height: 1.69em;
}

.personFigure {
  margin-top: 28px;
  position: relative;
}
@media (max-width: 768px) {
  .personFigure {
    width: 69.5%;
    margin: 46px auto 52px;
  }
}
@media (max-width: 500px) {
  .personFigure {
    margin: 36px auto 42px;
  }
}
.personFigure p {
  margin-bottom: 0;
}
.personFigure img {
  width: 100%;
}
.personFigure figcaption {
  position: absolute;
  bottom: 15px;
  right: 13px;
  color: #fff;
  font-size: 18px;
  line-height: 1.33em;
}
@media (max-width: 768px) {
  .personFigure figcaption {
    font-size: 23px;
  }
}
@media (max-width: 500px) {
  .personFigure figcaption {
    font-size: 14px;
  }
}

.inlinePrice {
  margin-bottom: 0;
  font-size: 15px;
}
.inlinePrice span {
  line-height: 1rem;
}
.inlinePrice span.origin {
  line-height: 22px;
  text-decoration: line-through;
  margin-right: 5px;
}
.inlinePrice span.colorRed {
  font-size: 20px;
  display: inline;
}

.timeTxt {
  font-size: 16px;
  margin-bottom: 0;
}
@media (max-width: 1279px) and (min-width: 769px) {
  .timeTxt {
    font-size: 14px;
  }
}
@media (max-width: 768px) and (min-width: 501px) {
  .timeTxt {
    font-size: 30px;
  }
}
.timeTxt span:nth-child(2) {
  margin-left: 5px;
}
.timeTxt .dash {
  margin: 0 5px;
}
@media (max-width: 500px) {
  .timeTxt .dash {
    font-size: 18px;
  }
}

.resList p {
  margin-bottom: 0;
}
.resList .res {
  border: solid 1px rgba(0, 0, 0, 0.13);
  display: flex;
  height: 103px;
  border-radius: 15px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .resList .res {
    flex-direction: column;
    height: auto;
  }
}
.resList .res + p {
  font-size: 13px;
  margin-top: 8px;
  color: rgba(50, 50, 50, 0.87);
  text-align: right;
}
@media (max-width: 768px) {
  .resList .res + p {
    text-align: left;
    font-size: 21px;
  }
}
@media (max-width: 500px) {
  .resList .res + p {
    font-size: 16px;
  }
}
.resList .resDatetime {
  flex: 0 0 auto;
  padding-right: 60px;
  padding-left: 25px;
  align-self: center;
}
@media (max-width: 768px) {
  .resList .resDatetime {
    width: 100%;
    padding: 27px 25px;
  }
}
@media (max-width: 500px) {
  .resList .resDatetime {
    padding: 17px 15px;
  }
}
.resList .resDatetime p {
  font-size: 16px;
}
@media (max-width: 768px) {
  .resList .resDatetime p {
    font-size: 24.5px;
  }
}
@media (max-width: 500px) {
  .resList .resDatetime p {
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  .resList .resDatetime p:first-child {
    display: inline-block;
    font-size: 17px;
    margin-right: 10px;
  }
}
@media (max-width: 500px) {
  .resList .resDatetime p:first-child {
    font-size: 13px;
    margin-right: 3px;
  }
}
.resList .resDatetime div {
  font-size: 33px;
  line-height: 1em;
}
@media (max-width: 768px) {
  .resList .resDatetime div {
    display: inline-block;
    font-size: 34px;
  }
}
@media (max-width: 500px) {
  .resList .resDatetime div {
    font-size: 28px;
  }
}
.resList .resDatetime span {
  font-size: 18px;
  margin: 0 3px;
}
@media (max-width: 768px) {
  .resList .resDatetime span {
    font-size: 19px;
  }
}
.resList .resTitle {
  flex: 1;
  align-self: center;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.04);
  position: relative;
  display: flex;
  align-items: center;
  font-size: 17.5px;
  line-height: 2em;
}
@media (max-width: 768px) {
  .resList .resTitle {
    font-size: 30px;
    align-items: flex-start;
    width: 100%;
    padding: 20px 25px;
    flex: 103px;
  }
}
@media (max-width: 500px) {
  .resList .resTitle {
    font-size: 22px;
    padding: 10px 15px;
  }
}
.resList .resTitle::before {
  content: "";
  width: 47px;
  height: 100%;
  background-image: url("../img/tutorItemBg2T.png");
  background-size: 100% 100%;
  display: inline-block;
  position: absolute;
  left: -47px;
  top: 0;
}
@media (max-width: 768px) {
  .resList .resTitle::before {
    display: none;
  }
}

.oneBlockType {
  width: 100%;
  max-width: 904px;
  margin: 36px auto 0;
  border-radius: 5px;
  box-shadow: 0 0 16px 0 rgba(155, 155, 155, 0.07);
  background-color: #fff;
}

/* 20250611 */
.threeItemList {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .threeItemList {
    flex-direction: column;
  }
}

.paginationWrap {
  text-align: center;
}
.paginationWrap .pagination {
  display: inline-flex;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .paginationWrap .pagination {
    display: none;
  }
}
.paginationWrap li {
  list-style: none;
  width: 26px;
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  font-size: 14px;
  border: solid 1px #e9e9e9;
  background-color: #fff;
  text-align: center;
}
.paginationWrap li:not(:nth-last-child(1)) {
  margin-right: 5px;
}
.paginationWrap li.pItem {
  width: 66px;
}
.paginationWrap li.active {
  background-color: #f4f0eb;
}
.paginationWrap .mPagination {
  display: none;
}
@media (max-width: 768px) {
  .paginationWrap .mPagination {
    display: inline-block;
    width: 211px;
    height: 66px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 30px;
    border: solid 1px rgba(0, 0, 0, 0.13);
  }
}
@media (max-width: 500px) {
  .paginationWrap .mPagination {
    width: 130px;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 18px;
  }
}

.mTopList {
  display: none;
}
@media (max-width: 768px) {
  .mTopList {
    display: block;
  }
}

.mTopListNav {
  display: none;
}
@media (max-width: 768px) {
  .mTopListNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 30px 20px 30px;
    border-radius: 4px;
    background-color: #fff;
  }
}
.mTopListNav .mTopNavItem {
  font-size: 15px;
  flex: none;
  color: #143d4f;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 35px;
}
.mTopListNav .active {
  background-color: #7c7c7c;
  color: #fff;
  border-radius: 4px;
}

/* Responsive width and alignment for embedded content modules. */
.contain-class-embed {
  display: block;
  clear: both;
  max-width: 100%;
  margin-bottom: 24px;
}
.contain-class-embed.is-left { margin-left: 0; margin-right: auto; }
.contain-class-embed.is-center { margin-left: auto; margin-right: auto; }
.contain-class-embed.is-right { margin-left: auto; margin-right: 0; }
.contain-class-embed iframe.content-module-iframe { display: block; width: 100% !important; max-width: 100%; margin: 0; }
@media (max-width: 768px) {
  .contain-class-embed.cc-mobile-width-30 { width: 30% !important; }
  .contain-class-embed.cc-mobile-width-35 { width: 35% !important; }
  .contain-class-embed.cc-mobile-width-40 { width: 40% !important; }
  .contain-class-embed.cc-mobile-width-45 { width: 45% !important; }
  .contain-class-embed.cc-mobile-width-50 { width: 50% !important; }
  .contain-class-embed.cc-mobile-width-55 { width: 55% !important; }
  .contain-class-embed.cc-mobile-width-60 { width: 60% !important; }
  .contain-class-embed.cc-mobile-width-65 { width: 65% !important; }
  .contain-class-embed.cc-mobile-width-70 { width: 70% !important; }
  .contain-class-embed.cc-mobile-width-75 { width: 75% !important; }
  .contain-class-embed.cc-mobile-width-80 { width: 80% !important; }
  .contain-class-embed.cc-mobile-width-85 { width: 85% !important; }
  .contain-class-embed.cc-mobile-width-90 { width: 90% !important; }
  .contain-class-embed.cc-mobile-width-95 { width: 95% !important; }
  .contain-class-embed.cc-mobile-width-100 { width: 100% !important; }
}

/* Match the white logo used by the eBook reader. */
header { height: 98px; }
header::after { top: 88px; }
header .modal-backdrop.show,
header .offcanvas { top: 98px; }
.header.containerWrap {
  height: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
  align-items: center;
}
.header .logo { width: 300px; }
.header .logo > a { display: block; width: 300px; height: 52px; overflow: hidden; }
.header .logo .ebook-header-logo { width: 300px; height: auto; max-width: none; transform: translateY(-20px); }
@media (max-width: 768px) {
  header { height: 79px; }
  header .modal-backdrop.show,
  header .offcanvas { top: 79px; }
  .header.containerWrap { padding: 10px 18px; }
  .header .logo { width: min(220px, 56vw); }
  .header .logo > a { width: min(220px, 56vw); height: 44px; }
  .header .logo .ebook-header-logo { width: min(220px, 56vw); transform: translateY(-14px); }
}
@media (max-width: 500px) {
  header { height: 60px; }
  header .modal-backdrop.show,
  header .offcanvas { top: 60px; }
  .header.containerWrap { padding: 6px 15px; }
}

/* 2026-09-09 Mobile footer layout refresh */
@media (max-width: 768px) {
  .footer {
    padding: 42px 22px 0;
  }

  .footer .footerRight {
    width: 100%;
  }

  .footer .footerMenu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    text-align: left;
  }

  .footer .footerMenuItem {
    width: auto;
    min-width: 0;
    padding: 0 8px;
  }

  .footer .footerMenuItem:nth-child(1) {
    margin-right: 0;
  }

  .footer .footerMenuItemTitle {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .footer li {
    font-size: 14.5px;
    line-height: 2;
    letter-spacing: 0.02em;
  }

  .footer .footerMenuItem a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
  }

  .footerCenter {
    box-sizing: border-box;
    width: calc(100% - 44px);
    max-width: 460px;
    margin: 28px auto 0;
    padding: 20px 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }

  .footerCenter ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
  }

  .footerCenter li,
  .footerCenter li:nth-child(1) {
    display: flex;
    align-items: flex-start;
    padding: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    line-height: 1.55;
    letter-spacing: 0.01em;
  }

  .footerCenter li i {
    flex: 0 0 18px;
    width: 18px;
    margin-top: 4px;
    color: #ffffff;
    text-align: center;
  }
}

@media (max-width: 500px) {
  .footer {
    padding: 38px 18px 0;
  }

  .footer .footerMenu {
    column-gap: 18px;
  }

  .footer .footerMenuItem {
    padding: 0 4px;
  }

  .footer .footerMenuItemTitle {
    font-size: 20px;
  }

  .footer li {
    font-size: 14px;
  }

  .footerCenter {
    width: calc(100% - 36px);
    margin-top: 25px;
    padding: 18px 4px 0;
  }

  .footerFixBottom {
    height: 52px;
    padding: 0 6px;
  }

  .footerFixBottom li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    font-size: 14px;
    line-height: 1.25;
  }

  .footerFixBottom li:nth-child(3) {
    width: auto;
    height: 38px;
    line-height: 1.25;
  }
}

/* 2026-09-09 Mobile offcanvas navigation refresh v3 - single-column layout */
@media (max-width: 768px) {
  header .offcanvas {
    height: calc(100vh - 79px);
    height: calc(100dvh - 79px);
    overflow: hidden;
    border: 0;
    background: linear-gradient(180deg, #ffffff 0, #f7f1e8 150px);
    box-shadow: 0 18px 40px rgba(20, 61, 79, 0.18);
    opacity: 0;
    overscroll-behavior: contain;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
      transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
      opacity 160ms ease;
  }

  header .offcanvas.show {
    height: calc(100vh - 79px);
    height: calc(100dvh - 79px);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  header .offcanvas .menuTop {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(20, 61, 79, 0.1);
    background: rgba(255, 255, 255, 0.96);
    color: #143d4f;
    font-size: 15px;
  }

  header .offcanvas .menuTop li {
    display: flex;
    flex: none;
    align-self: stretch;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0 11px;
    border: 1px solid rgba(20, 61, 79, 0.14);
    border-radius: 11px;
    background: #ffffff;
    text-align: left;
  }

  header .offcanvas .menuTop li i {
    flex: 0 0 auto;
    color: #d58e2b;
    font-size: 15px;
  }

  header .offcanvas .menuTop li select,
  header .offcanvas .menuTop li:first-child select {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 24px 0 0;
    overflow: hidden;
    border: 0;
    outline: 0;
    background-color: transparent;
    color: #143d4f;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  header ul.menuBody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    justify-content: stretch;
    justify-items: stretch;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    min-height: 0;
    margin: 0 auto;
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
    text-align: left;
  }

  header ul.menuBody > li {
    align-self: stretch;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 1px solid rgba(20, 61, 79, 0.12);
    border-radius: 13px;
    background: #ffffff;
    color: #143d4f;
    font-size: 16px;
    line-height: 1.45;
    box-shadow: 0 4px 14px rgba(20, 61, 79, 0.055);
  }

  header ul.menuBody > li > a,
  header ul.menuBody > li > div[data-bs-toggle="collapse"] {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    color: inherit;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    transition:
      background-color 150ms ease,
      color 150ms ease,
      transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  header ul.menuBody > li > a::after {
    flex: 0 0 auto;
    color: #d58e2b;
    content: "›";
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }

  header ul.menuBody > li > div[data-bs-toggle="collapse"] {
    cursor: pointer;
    font-weight: 600;
  }

  header ul.menuBody > li > div[data-bs-toggle="collapse"]::after {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 180ms cubic-bezier(0.77, 0, 0.175, 1);
  }

  header ul.menuBody > li > div[aria-expanded="true"] {
    border-bottom: 0;
    background: #dd8900;
    color: #ffffff;
  }

  header ul.menuBody > li > div[aria-expanded="true"]::after {
    transform: rotate(225deg);
  }

  header ul.menuBody > li .collapseWrap {
    border-top: 1px solid rgba(213, 142, 43, 0.22);
    background: #ffffff;
  }

  header ul.menuBody .card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin: 0;
    padding: 9px 11px 12px;
    background: #ffffff;
  }

  header ul.menuBody .card-body li {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
  }

  header ul.menuBody .card-body a {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(213, 142, 43, 0.09);
    color: #143d4f;
    overflow-wrap: anywhere;
    text-decoration: none;
    white-space: normal;
  }

  header ul.menuBody > li > a:active,
  header ul.menuBody > li > div[data-bs-toggle="collapse"]:active,
  header ul.menuBody .card-body a:active {
    transform: scale(0.98);
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 768px) {
  header ul.menuBody > li > a:hover,
  header ul.menuBody > li > div[data-bs-toggle="collapse"]:hover {
    background: #fffaf2;
    color: #9a6219;
  }

  header ul.menuBody > li > div[aria-expanded="true"]:hover {
    background: #dd8900;
    color: #ffffff;
  }

  header ul.menuBody .card-body a:hover {
    background: rgba(213, 142, 43, 0.16);
  }
}

@media (max-width: 500px) {
  header .offcanvas,
  header .offcanvas.show {
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
  }

  header .offcanvas .menuTop {
    grid-template-columns: minmax(0, 1fr);
    padding: 11px 12px;
  }

  header .offcanvas .menuTop li {
    padding: 0 9px;
  }

  header .offcanvas .menuTop li select,
  header .offcanvas .menuTop li:first-child select {
    height: 42px;
    padding-right: 20px;
    font-size: 14px;
  }

  header ul.menuBody {
    gap: 9px;
    padding: 12px 12px calc(22px + env(safe-area-inset-bottom));
  }

  header ul.menuBody > li {
    font-size: 15px;
  }

  header ul.menuBody > li > a,
  header ul.menuBody > li > div[data-bs-toggle="collapse"] {
    min-height: 50px;
    padding: 11px 13px;
  }

  header ul.menuBody .card-body {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  header .offcanvas,
  header ul.menuBody > li > a,
  header ul.menuBody > li > div[data-bs-toggle="collapse"],
  header ul.menuBody .card-body a {
    transition-duration: 0ms;
  }
}