@charset "UTF-8";
/* Sass模組引用（改成@forward）*/
/* CSS外部字型的引入還是要用@import url() */
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/earlyaccess/cwtexkai.css");
/* ---- 顏色庫 ---- */
/* ---- 邊框顏色 ---- */
/* ---- 字體顏色 ---- */
/* ---- 欄位邊框色 ---- */
/* ---- 陰影背景色 ---- */
/* ---- 圓角半徑 ---- */
/* ---- 字級大小 ---- */
/* ---- 字體權重 ---- */
/* ---- 字間距 ---- */
/* ---- 字連結底線 ---- */
/* ---- 字體對齊 ---- */
/* ---- 滑鼠手勢 ---- */
/* ---- 版面排版與定位 ---- */
/* ---- RWD的斷點 ---- */
/* Sass模組引用（改成@forward）*/
/* ---- 引入必要模組 ---- */
/* ---- 共同設定 ---- */
/* ---- 區塊水平置中 ---- */
/* ---- 客製化下拉式選單 ---- */
/* ---- 按鈕外觀 ---- */
/* ---- 按鈕顏色 ---- */
/* ---- 重點備註 ---- */
/* ---- 圓角半徑 ---- */
/* ---- 字體字級 ---- */
/* ---- 字體粗細 ---- */
/* ---- 字體顏色 ---- */
/* ---- 字體間距 ---- */
/* ---- INPUT外框 ---- */
/* ---- 陰影 ---- */
/* ---- 表格的ICON ---- */
/* ---- CLEARFIX ---- */
/* --共用的CSS樣式--------------------------------- */
* {
  color: #353b39;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: "Noto Sans TC", sans-serif;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  flex-direction: column;
  min-height: 100vh;
}

ol,
ul {
  list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #353b39;
  margin: 0;
}

a,
label,
p,
strong,
li {
  color: #353b39;
  letter-spacing: 1px;
}

button {
  appearance: none;
  border: none;
}

select,
input::placeholder,
textarea::placeholder {
  font-size: 15px;
  color: #9ba6ab;
}

select option.redColor {
  color: #ff0000 !important;
  font-weight: 600;
}

.dFlex {
  display: flex;
}

.dFlexWrap {
  flex-wrap: wrap;
}

.contentMt-1 {
  margin-top: 24px;
}

.mb-1 {
  margin-bottom: 16px;
}

.mb-4 {
  margin-bottom: 46px;
}

main {
  flex: 1;
}
main.mainMt {
  margin-top: 132px;
}
main.mainMt-2 {
  margin-top: 100px;
}

.paddingLR {
  padding: 0 16px;
}
.paddingLR.pLR0 {
  padding-left: 0;
  padding-right: 0;
}

.pageWrapper {
  background: #f5f6fa;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  width: 100%;
}
.pageWrapper.whiteBg {
  background: #fff;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

#addNewMemberEnterpriseRegisterBox {
  display: none;
}

/* --頁籤的CSS--------------------------------- */
.tabsUIBox > input[type=radio] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.tabsUIBox .tabsBox {
  align-items: center;
  border-bottom: 1px solid #dcdcdc;
  gap: 8px;
  margin-top: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.tabsUIBox .tab {
  align-items: center;
  color: #353b39;
  cursor: pointer;
  display: inline-flex;
  font-size: 17px;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  outline-offset: 2px;
  padding: 0 8px;
  position: relative;
  user-select: none;
}
.tabsUIBox .tab:first-child {
  padding-left: 0;
}
.tabsUIBox .tab:last-child {
  padding-right: 0;
}
.tabsUIBox .tab a {
  color: #353b39;
  text-decoration: none;
}
.tabsUIBox .tab:after {
  content: "";
  background: transparent;
  border-radius: 2px;
  bottom: -9px;
  height: 3px;
  left: 8px;
  position: absolute;
  right: 8px;
  transition: background 0.2s ease;
}
.tabsUIBox .line {
  color: #bdbdbd;
  transform: translateY(-13px);
}
.tabsUIBox .panelsBox {
  color: #353b39;
  font-size: 15px;
  line-height: 1.8;
}
.tabsUIBox .panel {
  display: none;
}

.subTabsBox {
  background: #f5f7f6;
  border-bottom: 1px solid #dcdcdc;
  display: none;
  overflow-x: auto;
  padding: 15px 15px 17px;
  white-space: nowrap;
}
.subTabsBox .subTab {
  cursor: pointer;
  color: #353b39;
  display: inline-flex;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  align-items: center;
  font-weight: 500;
  padding: 0 8px;
  position: relative;
}
.subTabsBox .line {
  color: #bdbdbd;
  display: inline-block;
  transform: translateY(-1px);
}

#tabDataAll:checked ~ .tabsBox label[for=tabDataAll],
#tabBooksSeniorExecutive:checked ~ .tabsBox label[for=tabBooksSeniorExecutive],
#tabBooksMidLevelExecutive:checked ~ .tabsBox label[for=tabBooksMidLevelExecutive],
#tabBooksJuniorSupervisor:checked ~ .tabsBox label[for=tabBooksJuniorSupervisor],
#tabBooksFrontlineStaff:checked ~ .tabsBox label[for=tabBooksFrontlineStaff],
#tabBooksEbook:checked ~ .tabsBox label[for=tabBooksEbook],
#tabClassLiveStreaming:checked ~ .tabsBox label[for=tabClassLiveStreaming],
#tabClassImplementation:checked ~ .tabsBox label[for=tabClassImplementation],
#tabClassCEO:checked ~ .tabsBox label[for=tabClassCEO],
#tabClassTaipei:checked ~ .tabsBox label[for=tabClassTaipei],
#tabClassTaichung:checked ~ .tabsBox label[for=tabClassTaichung],
#tabClassKaohsiung:checked ~ .tabsBox label[for=tabClassKaohsiung],
#tabNewsPublicClass:checked ~ .tabsBox label[for=tabNewsPublicClass],
#tabNewsInnerClass:checked ~ .tabsBox label[for=tabNewsInnerClass],
#tabNewsLiveStreaming:checked ~ .tabsBox label[for=tabNewsLiveStreaming],
#tabStrategyMap:checked ~ .tabsBox label[for=tabStrategyMap],
#tabAnnualPlan:checked ~ .tabsBox label[for=tabAnnualPlan],
#tabTrainingCertification:checked ~ .tabsBox label[for=tabTrainingCertification],
#tabLecture:checked ~ .tabsBox label[for=tabLecture],
#tabQuestionAll:checked ~ .tabsBox label[for=tabQuestionAll],
#tabClassBefore:checked ~ .tabsBox label[for=tabClassBefore],
#tabPublicCourse:checked ~ .tabsBox label[for=tabPublicCourse],
#tabClassRefund:checked ~ .tabsBox label[for=tabClassRefund] {
  background: #1f8d78;
  color: #fff;
  font-weight: 500;
  padding: 14px 16px;
  transition: background 0.22s ease-in-out 0s;
}

#tabDataAll:checked ~ .panelsBox #panelDataAll,
#tabBooksSeniorExecutive:checked ~ .panelsBox #panelBooksSeniorExecutive,
#tabBooksMidLevelExecutive:checked ~ .panelsBox #panelBooksMidLevelExecutive,
#tabBooksJuniorSupervisor:checked ~ .panelsBox #panelBooksJuniorSupervisor,
#tabBooksFrontlineStaff:checked ~ .panelsBox #panelBooksFrontlineStaff,
#tabBooksEbook:checked ~ .panelsBox #panelBooksEbook,
#tabClassLiveStreaming:checked ~ .panelsBox #panelClassLiveStreaming,
#tabClassImplementation:checked ~ .panelsBox #panelClassImplementation,
#tabClassCEO:checked ~ .panelsBox #panelClassCEO,
#tabClassTaipei:checked ~ .panelsBox #panelClassTaipei,
#tabClassTaichung:checked ~ .panelsBox #panelClassTaichung,
#tabClassKaohsiung:checked ~ .panelsBox #panelClassKaohsiung,
#tabNewsPublicClass:checked ~ .panelsBox #panelNewsPublicClass,
#tabNewsInnerClass:checked ~ .panelsBox #panelNewsInnerClass,
#tabNewsLiveStreaming:checked ~ .panelsBox #panelNewsLiveStreaming,
#tabStrategyMap:checked ~ .panelsBox #panelStrategyMap,
#tabAnnualPlan:checked ~ .panelsBox #panelAnnualPlan,
#tabTrainingCertification:checked ~ .panelsBox #panelTrainingCertification,
#tabLecture:checked ~ .panelsBox #panelLecture,
#tabQuestionAll:checked ~ .panelsBox #panelQuestionsAll,
#tabClassBefore:checked ~ .panelsBox #panelClassBefore,
#tabPublicCourse:checked ~ .panelsBox #panelPublicCourse,
#tabClassRefund:checked ~ .panelsBox #panelClassRefund {
  display: block;
}

#tabDataAll:checked ~ .subTabsBox {
  display: block;
}

#subBusinessManagement:checked ~ .subTabsBox label[for=subBusinessManagement],
#subBusinessDevelopment:checked ~ .subTabsBox label[for=subBusinessDevelopment],
#subHRManagement:checked ~ .subTabsBox label[for=subHRManagement],
#subManagementCompetencies:checked ~ .subTabsBox label[for=subManagementCompetencies],
#subGeneralCompetencies:checked ~ .subTabsBox label[for=subGeneralCompetencies],
#subHandbooks:checked ~ .subTabsBox label[for=subHandbooks],
#subHotCourses:checked ~ .subTabsBox label[for=subHotCourses],
#subByEnroll:checked ~ .subTabsBox label[for=subByEnroll],
#subConfirmed:checked ~ .subTabsBox label[for=subConfirmed],
#subFullClass:checked ~ .subTabsBox label[for=subFullClass] {
  color: #1f8d78;
}

#subBusinessManagement:checked ~ .subTabsBox label[for=subBusinessManagement]:after,
#subBusinessDevelopment:checked ~ .subTabsBox label[for=subBusinessDevelopment]:after,
#subHRManagement:checked ~ .subTabsBox label[for=subHRManagement]:after,
#subManagementCompetencies:checked ~ .subTabsBox label[for=subManagementCompetencies]:after,
#subGeneralCompetencies:checked ~ .subTabsBox label[for=subGeneralCompetencies]:after,
#subHandbooks:checked ~ .subTabsBox label[for=subHandbooks]:after,
#subHotCourses:checked ~ .subTabsBox label[for=subHotCourses]:after,
#subByEnroll:checked ~ .subTabsBox label[for=subByEnroll]:after,
#subConfirmed:checked ~ .subTabsBox label[for=subConfirmed]:after,
#subFullClass:checked ~ .subTabsBox label[for=subFullClass]:after {
  background: #1f8d78;
}

.loadingNoticeText {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.loadingNoticeText span {
  color: #999;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  text-align: center;
}
.loadingNoticeText span:before, .loadingNoticeText span:after {
  content: "";
  background: #999;
  bottom: 0;
  display: block;
  height: 1px;
  margin: auto;
  position: absolute;
  top: 0;
  transform: translateY(0.6px);
  width: 14px;
}
.loadingNoticeText span:before {
  right: -20px;
}
.loadingNoticeText span:after {
  left: -22px;
}

/* --彈窗的CSS--------------------------------- */
#modalMaskLayer,
#tagKeyWordsModalMaskLayer {
  background: rgba(0, 0, 0, 0.5);
  display: none;
  height: 100%;
  left: 0;
  padding: 0 15px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1100;
}

#tagKeyWordsModalMaskLayer.open {
  display: block;
}

.modalContent {
  background: #fff;
  border-radius: 12px;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  max-width: 482px;
  padding: 21px 30px 32px;
  position: relative;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.modalContent.searchUIPadding {
  padding: 20px 20px 22px;
}
.modalContent h3, .modalContent p {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}
.modalContent h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 40px;
  padding-bottom: 12px;
}
.modalContent h3.sPb {
  padding-bottom: 8px;
}
.modalContent input[type=search] {
  background: #f5f5f5;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  height: 54px;
  line-height: 48px;
  padding: 12px 14px 18px;
  width: 100%;
}
.modalContent input[type=search]::placeholder {
  color: #7e7e7e;
  font-size: 15px;
  font-weight: 500;
}
.modalContent p {
  font-size: 17px;
  font-weight: 400;
  text-align: justify;
  line-height: 33px;
}
.modalContent p.textCenter {
  text-align: center;
}
.modalContent ul {
  margin-top: 2px;
}
.modalContent ul.mt0 {
  margin-top: 0;
}
.modalContent ul li {
  font-size: 17px;
  font-weight: 400;
  line-height: 29px;
  padding-bottom: 6px;
  text-align: justify;
}
.modalContent ul li:last-child {
  padding-bottom: 0;
}

.modalBtnBox {
  margin-top: 31px;
  justify-content: center;
}
.modalBtnBox.sMt {
  margin-top: 21px;
}
.modalBtnBox button {
  appearance: none;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  font-size: 16px;
  font-weight: 500;
  padding: 12px 8px 17px;
  text-align: center;
  width: 82px;
}
.modalBtnBox button.mr-1 {
  margin-right: 22px;
}
.modalBtnBox button.borderBtn {
  background: #fff;
  border: 2px solid #00754a;
  box-shadow: none;
  opacity: 1;
  transition: all 0.32s ease-in-out 0s;
}
.modalBtnBox button.borderBtn:active, .modalBtnBox button.borderBtn:hover {
  opacity: 0.8;
}
.modalBtnBox button.fillBtn {
  background: linear-gradient(90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  box-shadow: none;
  color: #fff;
}
.modalBtnBox button.fillBtn:active, .modalBtnBox button.fillBtn:hover {
  background: linear-gradient(-90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
}

.modalSocialShareBtn {
  justify-content: center;
}
.modalSocialShareBtn button {
  appearance: none;
  background: none;
}
.modalSocialShareBtn li {
  margin-right: 19px;
}
.modalSocialShareBtn li:last-child {
  margin-right: 0;
}
.modalSocialShareBtn li img {
  max-width: 50px;
}

.modalForm {
  flex-wrap: wrap;
  max-height: 407px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 14px 18px 0;
}
.modalForm ul {
  line-height: 30px;
}
.modalForm li {
  font-size: 16px;
  font-weight: 500;
}
.modalForm span {
  font-weight: 600;
}
.modalForm.noMaxHeight {
  max-height: none;
  overflow-y: hidden;
}
.modalForm::-webkit-scrollbar-track {
  background: transparent;
}
.modalForm::-webkit-scrollbar {
  background: #dcdfe9;
  height: 7px;
  width: 7px;
}
.modalForm::-webkit-scrollbar-thumb {
  background: #087b5d;
}
.modalForm .mt-1 {
  margin-top: 26px;
}

/* --版頭選單的CSS--------------------------------- */
header {
  background: linear-gradient(90deg, rgb(67, 164, 111) 0%, rgb(32, 141, 120) 48%, rgb(3, 103, 71) 100%);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  box-shadow: none;
  display: block;
  height: 80px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.pageHeader {
  align-items: center;
  background: #fff;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.1);
  display: block;
  height: 80px;
  position: absolute;
  top: 0;
  width: 100%;
}
.pageHeader.shadowToggle {
  box-shadow: none;
}
.pageHeader.borderBottomLine {
  border-bottom: 1px solid #dcdcdc;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pageHeader .content {
  display: block;
  height: 80px;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.pageHeader img.logo {
  display: block;
  height: auto;
  left: 18px;
  max-width: 180px;
  position: absolute;
  opacity: 1;
  top: 50%;
  transform: translateY(-56%);
}
.pageHeader .searchBarUI form, .pageHeader .searchBarUI input {
  height: 54px;
  position: relative;
}
.pageHeader .searchBarUI form {
  width: 420px;
}
.pageHeader .searchBarUI input {
  background: #f5f5f5;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  color: #333;
  display: block;
  height: 54px;
  line-height: 48px;
  outline: none;
  padding: 0 18px;
  width: 100%;
}
.pageHeader .searchBarUI input::placeholder {
  color: #7e7e7e;
  font-size: 15px;
  font-weight: 500;
}
.pageHeader .searchBarUI .searchBarUIBtn {
  border-left: 1px solid #dcdcdc;
  height: 54px;
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
}
.pageHeader .searchBarUI input.searchUISubmit {
  background: url(../images/icon/searchUISubmitIcon.png) no-repeat;
  border: none;
  cursor: pointer;
  height: 24px;
  outline: none;
  position: absolute;
  right: 4px;
  text-indent: -9999px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
}
.pageHeader ul.menu {
  line-height: 50px;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.pageHeader ul.menu li {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  float: left;
  margin-right: 24px;
  position: relative;
}
.pageHeader ul.menu li:last-child {
  margin-right: 0;
}
.pageHeader ul.menu li.subMenuHover:hover > ul.deskTopSubMenu {
  display: block;
  opacity: 1;
  visibility: visible;
}
.pageHeader ul.menu a {
  display: block;
  color: #353b39;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
}
.pageHeader ul.menu a.selected {
  color: #00754a;
  font-weight: 700;
  position: relative;
}
.pageHeader ul.member {
  line-height: 56px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.pageHeader ul.member li {
  color: #353b39;
  float: left;
  font-size: 16px;
  font-weight: 500;
}
.pageHeader ul.member li img {
  bottom: 0;
  margin: auto;
  top: 50%;
  transform: translateY(22%);
}
.pageHeader ul.member span {
  padding: 0 10px;
}
.pageHeader ul.member span:last-child {
  padding-right: 0;
}
.pageHeader ul.member a {
  color: #353b39;
  opacity: 1;
  text-decoration: none;
  transition: all 0.4s ease-in-out 0s;
}
.pageHeader ul.member a:hover {
  opacity: 0.7;
}
.pageHeader .deskTopSubMenu {
  background: #fff;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.1);
  display: block;
  left: -50%;
  opacity: 0;
  position: absolute;
  top: 49px;
  transition: all 0.5s ease;
  visibility: hidden;
  width: 192px;
  z-index: 900;
}
.pageHeader .deskTopSubMenu.maxHeight {
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.pageHeader .deskTopSubMenu.maxHeight::-webkit-scrollbar-track {
  background: transparent;
}
.pageHeader .deskTopSubMenu.maxHeight::-webkit-scrollbar {
  background: #dcdfe9;
  height: 7px;
  width: 7px;
}
.pageHeader .deskTopSubMenu.maxHeight::-webkit-scrollbar-thumb {
  background: #00754a;
}
.pageHeader .deskTopSubMenu li {
  border-bottom: 1px solid #d4d4d4;
  display: block;
  margin-right: 0;
  width: 100%;
}
.pageHeader .deskTopSubMenu li:last-child {
  border-bottom: none;
}
.pageHeader .deskTopSubMenu a {
  display: block !important;
  font-size: 16px !important;
  letter-spacing: 2px;
  line-height: 25px;
  opacity: 1;
  padding: 11px 10px 13px;
  text-align: center;
  width: 100%;
}
.pageHeader .deskTopSubMenu a:hover {
  opacity: 0.74;
}

.memberDropdown {
  position: relative;
}
.memberDropdown:hover .memberDropdownMenu {
  opacity: 1;
  visibility: visible;
}

.memberCenterIndexContent {
  gap: 43px;
}

.memberCenterIndexRight {
  width: 85%;
}

.memberDropdownMenu {
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  line-height: 32px;
  max-width: 260px;
  overflow-x: hidden;
  opacity: 1;
  padding: 6px 0 8px;
  right: 0;
  top: calc(100% + 12px);
  visibility: visible;
  transform: translateY(12px);
  transition: all 0.2s ease;
  width: 20%;
}
.memberDropdownMenu::-webkit-scrollbar-track {
  background: transparent;
}
.memberDropdownMenu::-webkit-scrollbar {
  background: #dcdfe9;
  height: 8px;
  width: 8px;
}
.memberDropdownMenu::-webkit-scrollbar-thumb {
  background: #006f47;
}
.memberDropdownMenu li {
  margin-right: 0 !important;
  width: 100%;
}
.memberDropdownMenu li a {
  display: block;
  font-size: 16px !important;
  padding: 0 20px 6px;
  text-decoration: none;
}
.memberDropdownMenu li a:hover {
  background: #f5f5f5;
}

/* --按鈕的CSS--------------------------------- */
.btnBox {
  justify-content: center;
  margin-top: 25px;
}

.smallBtnUI {
  background: linear-gradient(90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 14px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
}
.smallBtnUI:active, .smallBtnUI:hover {
  background: linear-gradient(0deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
}
.smallBtnUI.noPadding {
  padding: 0;
}
.smallBtnUI.noPadding a {
  padding: 12px 14px 16px !important;
}
.smallBtnUI a {
  color: #fff !important;
  font-size: 14px;
  font-weight: 500 !important;
  display: block;
  height: 40px;
  line-height: 20px;
  padding: 8px 12px 8px;
  text-decoration: none !important;
  width: auto;
}
.smallBtnUI a.noPadding {
  height: auto;
  line-height: 18px;
  padding: 0;
}
.smallBtnUI.mr-1 {
  margin-right: 14px;
}

/* --麵包屑的CSS--------------------------------- */
.breadCrumbUI {
  margin-bottom: 24px;
}
.breadCrumbUI a {
  color: #353b39;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.breadCrumbUI p {
  font-size: 15px;
  font-weight: 400;
  line-height: 28px;
}
.breadCrumbUI span {
  padding: 0 4px;
}

/* --首頁的CSS--------------------------------- */
.indexBannerSliderBox {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.indexBannerSliderBox .indexBannerSwiper {
  height: 100%;
  width: 100%;
}
.indexBannerSliderBox .indexBannerSwiper img {
  height: auto;
  display: block;
  width: 100%;
}
.indexBannerSliderBox .indexBannerSwiper .swiper-slide {
  text-align: center;
  font-size: 0;
}
.indexBannerSliderBox .indexBannerSwiper .deskTopShow {
  display: block;
}
.indexBannerSliderBox .indexBannerSwiper .mobileShow {
  display: none;
}

.learningPlace {
  margin-top: 100px !important;
}
.learningPlace h3.engTitle {
  color: #f5f5f5;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: justify;
  font-size: 148px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 0;
}
.learningPlace .content {
  gap: 72px;
  justify-content: space-between;
  margin-top: 82px;
}
.learningPlace .content h3, .learningPlace .content li, .learningPlace .content p {
  color: #353b39;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: justify;
}
.learningPlace .content h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 38px;
  padding-bottom: 8px;
}
.learningPlace .content img {
  border-radius: 14px;
  width: 100%;
}
.learningPlace .content li, .learningPlace .content p {
  font-size: 17px;
  font-weight: 400;
  line-height: 31px;
}
.learningPlace .content .text:not(:first-child) {
  margin-top: 30px;
}
.learningPlace .contentLeft {
  flex: 0 0 50%;
}
.learningPlace .fadeSlider {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.learningPlace .fadeSlider figure {
  height: 100%;
  margin: 0;
  width: 100%;
}
.learningPlace .fadeSlider img {
  animation: fadeSlider 15s infinite;
  height: auto;
  left: 0;
  object-fit: contain;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.learningPlace .fadeSlider img:first-child {
  opacity: 1;
  position: static;
}
.learningPlace .fadeSlider img:nth-child(1) {
  animation-delay: 0s;
}
.learningPlace .fadeSlider img:nth-child(2) {
  animation-delay: 6s;
}
.learningPlace .fadeSlider img:nth-child(3) {
  animation-delay: 12s;
}
@keyframes fadeSlider {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.learningPlace .listText.pt {
  padding-top: 16px;
}

.indexBtn {
  justify-content: flex-start;
  margin-top: auto;
}
.indexBtn .btn {
  background: linear-gradient(90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  box-shadow: 0 2px 8px rgba(15, 143, 100, 0.25);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
  padding: 14px 26px 18px;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
}
.indexBtn .btn:hover {
  background: linear-gradient(-90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
}

/* --內頁Banner的CSS--------------------------------- */
.pageBanner {
  background: url(../images/pageBanner.png) center top/cover, no-repeat;
  display: block;
  height: 402px;
  margin-top: 80px;
  width: 100%;
}
.pageBanner h2 {
  color: #fff;
  font-size: 39px;
  letter-spacing: 8px;
  padding-top: 100px;
  text-align: center;
}

/* --內頁-內容大框的CSS--------------------------------- */
.tableScrollWrapper.mt-1 {
  margin-top: 32px;
}

.tableContent {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14), inset 1px 1px 8px rgba(182, 190, 199, 0.08), inset -2px -2px 10px rgba(54, 64, 83, 0.1);
  display: block;
  margin: -156px auto 142px auto;
  max-width: 1600px;
  padding: 23px 46px 37px;
  position: relative;
  width: 100%;
}
.tableContent.indexTableContent {
  background: none;
  border-radius: 0;
  box-shadow: none;
  margin: 30px auto 92px auto;
  padding: 0;
}
.tableContent.loginAndRegisterUI {
  max-width: 1100px;
  padding: 42px 72px 68px;
}
.tableContent.mt0 {
  margin: 0 auto 122px auto;
}
.tableContent.shoppingCart {
  margin: -256px auto 106px auto;
  padding: 22px 42px 34px;
}
.tableContent .titleInfoBox {
  margin-bottom: 22px;
  width: 100%;
}
.tableContent a.receiptBtn {
  padding-left: 4px;
  text-decoration: none;
}
.tableContent h2 {
  font-size: 28px;
  font-weight: 700;
  float: left;
  letter-spacing: 0;
  line-height: 34px;
  padding-left: 18px;
  position: relative;
  text-align: justify;
  width: auto;
}
.tableContent h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 40px;
  padding-bottom: 14px;
}
.tableContent h3.pb0 {
  padding-bottom: 0;
}
.tableContent h3.pb-s {
  padding-bottom: 2px;
}
.tableContent .breadCrumb {
  line-height: 22px;
  margin-bottom: 20px;
}
.tableContent .breadCrumb.fLeft {
  float: left;
}
.tableContent .breadCrumb span {
  font-size: 14px;
  padding: 0 2px;
}
.tableContent .breadCrumb span > a {
  font-weight: 400;
  opacity: 1;
  text-decoration: none;
  transition: all 0.4s ease-in-out 0s;
}
.tableContent .breadCrumb span > a:hover {
  opacity: 0.7;
}
.tableContent .breadCrumb.fw600 {
  font-weight: 600;
}
.tableContent .breadCrumb.mb0 {
  margin-bottom: 0;
}
.tableContent .title {
  padding-bottom: 20px;
}
.tableContent .title .titleInfoBox {
  float: left;
  width: 50%;
}
.tableContent .title .frightBtnBox {
  float: right;
  width: 50%;
}
.tableContent .title .frightBtnBox a {
  background: linear-gradient(-180deg, rgb(6, 142, 102) 0%, rgb(1, 136, 95) 50%, rgb(0, 117, 65) 100%);
  border-radius: 8px;
  box-shadow: 0 4px 0 #cdd7df;
  color: #fff;
  color: #fff;
  display: block;
  float: right;
  font-size: 16px;
  font-weight: 500;
  height: 40px;
  line-height: 36px;
  padding: 0 8px;
  position: relative;
  text-align: right;
  text-decoration: none;
  width: 76px;
}
.tableContent .title .frightBtnBox a:active, .tableContent .title .frightBtnBox a:hover {
  background: linear-gradient(0deg, rgb(6, 142, 102) 0%, rgb(1, 136, 95) 50%, rgb(0, 117, 65) 100%);
}
.tableContent p.filterDescribe {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  margin-bottom: 16px;
}
.tableContent p.filterDescribe span {
  margin-left: 4px;
}
.tableContent p.filterDescribe span.mark {
  color: #ff0000;
  font-weight: 600;
}
.tableContent button.filterBtn {
  background: linear-gradient(90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 24px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transform: translateY(-2px);
}
.tableContent button.filterBtn:active, .tableContent button.filterBtn:hover {
  background: linear-gradient(0deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
}
.tableContent button.filterBtn a {
  color: #fff;
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  width: auto;
}
.tableContent button.filterBtn .btnIcon img {
  height: auto;
  margin: auto;
  max-width: 20px;
  transform: translateY(2px);
}
.tableContent button.filterBtn.centerPlaced {
  display: block;
  margin: 24px auto 0;
}
.tableContent button.filterBtn p {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 0;
  text-align: center;
}
.tableContent button.filterBtn.mr {
  margin-right: 24px;
}
.tableContent button.filterBtn.mt0 {
  margin-top: 0;
}
.tableContent .filterFrame {
  background: #f5f6fa;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  padding: 20px 20px 30px;
  width: 100%;
}
.tableContent .filterFrame input[type=checkbox] {
  background: #fff;
  border: 1px solid #d4d4d4;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.32);
  height: 18px;
  margin-top: 14px;
  width: 18px;
}
.tableContent .filterFrame p {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  padding-bottom: 24px;
  text-align: justify;
}
.tableContent .filterFrame p.pb-s {
  border-bottom: 1px solid #ccc;
  padding-bottom: 14px;
}
.tableContent .filterFrame img.verifyNumberPic {
  margin-left: 32px;
  max-width: 120px;
}
.tableContent .filterFrame li {
  display: inline-block;
  margin: 0 1.72% 24px 0;
  width: 18.3%;
}
.tableContent .filterFrame li:nth-child(5n+5) {
  margin-right: 0;
}
.tableContent .filterFrame li.inputSearchBox.dFlex {
  display: flex;
}
.tableContent .filterFrame li.inputSearchBox .mt {
  margin-top: 12px;
}
.tableContent .filterFrame li.inputSearchBox.w100 {
  width: 100%;
}
.tableContent .filterFrame li.dBlock {
  display: block;
}
.tableContent .filterFrame li.mb0 {
  margin-bottom: 0;
}
.tableContent .filterFrame li.w100 {
  width: 100%;
}
.tableContent .filterFrame .fieldTitle h4 {
  color: #353b39;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.tableContent .filterFrame .fieldTitle span.remark {
  color: #eb6153;
  line-height: 24px;
  margin-left: 4px;
}
.tableContent .filterFrame input, .tableContent .filterFrame select, .tableContent .filterFrame textarea {
  background: #fff;
  border: 1px solid #d4d4d4;
  font-size: 14px;
  border-radius: 6px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.32);
  margin-top: 12px;
  outline-color: #11998f;
  width: 100%;
}
.tableContent .filterFrame input.mt0 {
  margin-top: 0;
}
.tableContent .filterFrame input, .tableContent .filterFrame select {
  height: 48px;
  padding: 6px 14px;
  width: 100%;
}
.tableContent .filterFrame textarea {
  padding: 12px 14px;
}
.tableContent .filterFrame input::placeholder, .tableContent .filterFrame select option:checked {
  font-size: 14px;
  vertical-align: middle;
}
.tableContent .filterFrame input:active, .tableContent .filterFrame input:focus, .tableContent .filterFrame input:valid, .tableContent .filterFrame select:active {
  background: #fff;
}
.tableContent .filterFrame select:optional {
  font-size: 15px;
}
.tableContent .filterFrame input.mt {
  margin-top: 22px;
}
.tableContent .filterFrame input[type=date] {
  display: block;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}
.tableContent .filterFrame input[readonly], .tableContent .filterFrame select.readonly:read-only {
  background: #f6f5f4;
}
.tableContent .filterFrame select {
  background-color: #fff;
  background-size: 10px 17px;
  padding: 6px 14px;
}
.tableContent .filterFrame input:disabled, .tableContent .filterFrame select:disabled {
  background: #e8e8e8;
  border: 1px solid #d4d4d4;
  box-shadow: inset 0 0.8px 0.8px rgba(0, 0, 0, 0.2);
}
.tableContent .filterFrame .checkBoxUIBox {
  display: flex;
}
.tableContent .filterFrame .checkBoxUI {
  display: flex;
  align-items: center;
}
.tableContent .filterFrame .checkBoxUI.mr {
  margin-right: 12px;
}
.tableContent .filterFrame .checkBoxUI input[type=checkBox] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  border: 1px solid #d4d4d4;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.32);
  display: block;
  height: 24px;
  margin-right: 8px;
  overflow: hidden;
  padding: 0;
  position: relative;
  vertical-align: top;
  width: 24px;
}
.tableContent .filterFrame .checkBoxUI input[type=checkBox]:checked:before {
  content: "";
  animation: checkBoxEffect 0.2s ease-in-out 0s;
  border: solid #00754a;
  border-width: 0 4px 4px 0;
  bottom: 0;
  display: block;
  height: 13px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 3px;
  top: 0;
  transform: rotate(45deg) translateY(-3.3px);
  width: 6px;
  z-index: 100;
}
.tableContent .filterFrame .checkBoxUI label {
  margin-top: 11px;
}
.tableContent .filterFrame.twoColumns li {
  display: inline-block;
  width: 48.9%;
}
.tableContent .filterFrame.twoColumns li:nth-child(5n+5) {
  margin: 0 1.72% 24px 0;
}
.tableContent .filterFrame.twoColumns li:nth-child(2n+2) {
  margin-right: 0;
}
.tableContent .fieldAdjust.mt {
  margin-top: 26px;
}
.tableContent .tableFrame {
  border: 1px solid #dcdcdc;
  border-bottom: none;
  margin-right: 0;
  max-height: 672px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.tableContent .tableFrame.scrollHidden {
  overflow: hidden;
}
.tableContent .tableFrame::-webkit-scrollbar-track {
  background: transparent;
}
.tableContent .tableFrame::-webkit-scrollbar {
  background: #dcdfe9;
  height: 6px;
  width: 6px;
}
.tableContent .tableFrame::-webkit-scrollbar-thumb {
  background: #a0a0a0;
}
.tableContent table {
  border-collapse: collapse;
  max-width: 100%;
  width: 100%;
}
.tableContent table thead {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 100%;
}
.tableContent table th {
  background: linear-gradient(-180deg, #fff 60%, #ebecf0 100%);
  border: none;
  box-shadow: 2px 2px 4px rgba(43, 43, 43, 0.28);
  box-shadow: 2px 2px 4px rgba(43, 43, 43, 0.28);
  color: #353b39;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 23px;
  padding: 20px 8px 18px;
  position: sticky;
  text-align: left;
  top: 0;
  white-space: nowrap;
  z-index: 100;
}
.tableContent table th.firstPadding {
  border-left: 1px solid #dcdcdc;
}
.tableContent table th.firstPadding, .tableContent table th.lastPadding {
  padding: 20px 16px;
}
.tableContent table th.fontCenter {
  text-align: center;
}
.tableContent table tr {
  transition: all 0.25s ease-in-out 0s;
}
.tableContent table td {
  border-bottom: 1px solid #d4d4d4;
  color: #353b39;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  padding: 16px 8px;
  white-space: nowrap;
}
.tableContent table td.firstPadding, .tableContent table td.lastPadding {
  padding: 16px 16px;
}
.tableContent table td.firstPadding {
  vertical-align: middle;
}
.tableContent table td.firstPadding figure {
  display: flex;
  align-items: center;
}
.tableContent table td.fontCenter {
  text-align: center;
}
.tableContent table td.fw600 {
  font-weight: 700;
}
.tableContent table td.warningText {
  color: #ff0000;
  font-weight: 600;
}
.tableContent table td a {
  color: #00754a;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.tableContent table td input {
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  height: 42px;
  outline-color: #11998f;
  padding: 6px 14px;
  width: 100%;
}
.tableContent table a.tableBtn {
  background: linear-gradient(-180deg, rgb(6, 142, 102) 0%, rgb(1, 136, 95) 50%, rgb(0, 117, 65) 100%);
  border-radius: 8px;
  box-shadow: 0 4px 0 #cdd7df;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  height: 40px;
  letter-spacing: 1px;
  line-height: 36px;
  margin-right: 9px;
  padding: 0 8px;
  text-align: right;
  text-decoration: none;
  width: 76px;
}
.tableContent table a.tableBtn:active, .tableContent table a.tableBtn:hover {
  background: linear-gradient(0deg, rgb(6, 142, 102) 0%, rgb(1, 136, 95) 50%, rgb(0, 117, 65) 100%);
}
.tableContent table a.disabled {
  cursor: not-allowed;
  opacity: 0.64;
  pointer-events: none;
}
.tableContent .registerFormContent input[type=radio] {
  opacity: 0;
  pointer-events: none;
}
.tableContent .registerFormContent .contactPerson {
  margin-bottom: 38px;
}
.tableContent .tabs {
  background: linear-gradient(90deg, #e6f3ef, #e9f6f1);
  border-bottom: 1px solid #e5e7eb;
  border-radius: 12px;
}
.tableContent .tabs .tabBtn {
  background: #e7f2ee;
  color: #2f3e3a;
  cursor: pointer;
  flex: 1 1 0;
  font-size: 19px;
  font-weight: 600;
  padding: 23px 10px 27px;
  text-align: center;
}
.tableContent #tabPersonal:checked ~ .tabs label[for=tabPersonal],
.tableContent #tabCompany:checked ~ .tabs label[for=tabCompany] {
  background: #00754a;
  color: #fff;
}
.tableContent .tabs label[for=tabPersonal] {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.tableContent .tabs label[for=tabCompany] {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.tableContent .registerPanel .formPanel {
  display: none;
}
.tableContent #tabPersonal:checked ~ .registerPanel .registerPersonalPanel,
.tableContent #tabCompany:checked ~ .registerPanel .registerCompanyPanel {
  display: block;
}
.tableContent .formUI {
  margin-top: 36px;
}
.tableContent .formUI.mtS {
  margin-top: 14px;
}
.tableContent .formUI button.removeContactPersonBtn {
  background: linear-gradient(135deg, #a0a0a0 0%, #777777 100%);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 20px 14px;
}
.tableContent .formUI button.removeContactPersonBtn:active, .tableContent .formUI button.removeContactPersonBtn:hover {
  background: linear-gradient(-135deg, #a0a0a0 0%, #777777 100%);
  cursor: pointer;
}
.tableContent .formUI p.markText {
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
  margin: 0;
  padding: 2px 0 14px;
  text-align: justify;
}
.tableContent .formUI .fullColumn {
  flex: 0 0 100%;
}
.tableContent .formUI .formRow.mb0 {
  margin-bottom: 0;
}
.tableContent .formUI .fullColumn.mb-s {
  margin-bottom: 14px;
}
.tableContent .formUI .formRow, .tableContent .formUI .fullColumn {
  margin-bottom: 32px;
}
.tableContent .formUI .formRow.mb0, .tableContent .formUI .fullColumn.mb0 {
  margin-bottom: 0;
}
.tableContent .formUI .formRow.mb-s, .tableContent .formUI .fullColumn.mb-s {
  margin-bottom: 15px;
}
.tableContent .formUI .formRow.mbS2, .tableContent .formUI .fullColumn.mbS2 {
  margin-bottom: 26px;
}
.tableContent .formUI .formRow.mbS3, .tableContent .formUI .fullColumn.mbS3 {
  margin-bottom: 14px;
}
.tableContent .formUI .formRow label, .tableContent .formUI .fullColumn label {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.tableContent .formUI .formRow .groupField, .tableContent .formUI .fullColumn .groupField {
  flex-wrap: nowrap;
  gap: 22px;
}
.tableContent .formUI .formRow .groupField.noGap, .tableContent .formUI .fullColumn .groupField.noGap {
  gap: 0 !important;
}
.tableContent .formUI .formRow input[type=checkbox], .tableContent .formUI .fullColumn input[type=checkbox] {
  appearance: none;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  height: 21px;
  margin: 1px 8px 0 0;
  width: 21px;
}
.tableContent .formUI .fullColumn input[type=checkbox]:checked {
  background: #00754a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/16px;
  border-color: #00754a;
}
.tableContent .formUI .formRow .halfColumn, .tableContent .formUI .fullColumn .halfColumn {
  flex: 1 1 0;
}
.tableContent .formUI .formRow .inputField, .tableContent .formUI .formRow .selectField, .tableContent .formUI .fullColumn .inputField, .tableContent .formUI .fullColumn .selectField {
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.11);
  box-shadow: inset 0 1.1px 2.3px rgba(0, 0, 0, 0.15);
  color: #98a3a0;
  font-size: 16px;
  height: 57px;
  padding: 0 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.tableContent .formUI .formRow .inputField::placeholder, .tableContent .formUI .formRow .selectField, .tableContent .formUI .formRow .selectField option, .tableContent .formUI .formRow .selectField:focus, .tableContent .formUI .fullColumn .inputField::placeholder, .tableContent .formUI .fullColumn .selectField, .tableContent .formUI .fullColumn .selectField option, .tableContent .formUI .fullColumn .selectField:focus {
  color: #98a3a0;
}
.tableContent .formUI .formRow .inputField:focus, .tableContent .formUI .formRow .selectField:focus, .tableContent .formUI .fullColumn .inputField:focus, .tableContent .formUI .fullColumn .selectField:focus {
  border-color: #0a8a66;
  box-shadow: 0 0 0 4px rgba(25, 162, 115, 0.12);
  outline: none;
}
.tableContent .formUI .formRow .captcha, .tableContent .formUI .fullColumn .captcha {
  align-items: center;
  gap: 16px;
}
.tableContent .formUI .formRow .captchaPic, .tableContent .formUI .fullColumn .captchaPic {
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  height: 50px;
  justify-content: center;
  overflow: hidden;
  width: 150px;
}
.tableContent .formUI .formRow .captchaPic img, .tableContent .formUI .fullColumn .captchaPic img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.tableContent .formUI .formService {
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  justify-content: space-between;
  margin-bottom: 28px;
}
.tableContent .formUI .formService a {
  color: #0a8a66;
  text-decoration: none;
  text-underline-offset: 6px;
}
.tableContent .formUI .formService a:hover {
  text-decoration: underline;
}
.tableContent .formUI .submitBtnWrap {
  justify-content: center;
}
.tableContent .formUI .submitBtnWrap.twoBtnBox {
  gap: 22px;
}
.tableContent .formUI .submitBtnWrap .btn {
  appearance: none;
  background: linear-gradient(90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  box-shadow: 0 6px 14px rgba(10, 138, 102, 0.22);
  border-radius: 28px;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  height: 59px;
  padding: 10px 22px 16px;
  transition: all ease-in-out 0.2s;
}
.tableContent .formUI .submitBtnWrap .btn:active {
  transform: translateY(1px);
}
.tableContent .formUI .submitBtnWrap .btn:hover {
  background: linear-gradient(-90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
}
.tableContent .formUI .twoChecks .mr {
  margin-right: 14px;
}

.tableTotalNo {
  margin: 26px 0 13px;
  width: 100%;
}
.tableTotalNo.sMt {
  margin-top: 16px;
}
.tableTotalNo h4 {
  font-size: 21px;
  font-weight: 700;
  line-height: 30px;
}
.tableTotalNo h4.mb-1 {
  margin-bottom: 10px;
}
.tableTotalNo li.centerPlaced {
  align-items: center;
}
.tableTotalNo li.fw500 {
  font-weight: 500;
}
.tableTotalNo li.mr-1 {
  margin-right: 13px;
}
.tableTotalNo p {
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  text-align: justify;
}
.tableTotalNo p.mr-1 {
  margin-right: 12px;
}
.tableTotalNo span {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 800;
  padding: 0 4px 0 4px;
}
.tableTotalNo span.originalText {
  font-size: 18px;
  font-weight: 600;
  padding: 0;
}
.tableTotalNo span.originalTextTwo, .tableTotalNo span.originalTextThree {
  font-weight: 500;
  padding: 0;
}
.tableTotalNo span.originalTextTwo {
  font-size: 16px;
  line-height: 25px;
}
.tableTotalNo span.originalTextThree {
  font-size: 18px;
  line-height: 25px;
}
.tableTotalNo span.squareIcon {
  border-radius: 4px;
  display: block;
  height: 20px;
  margin-right: 6px;
  width: 20px;
}
.tableTotalNo span.publicClassIcon {
  background: #007bff;
}
.tableTotalNo span.innerClassIcon {
  background: #28a745;
}
.tableTotalNo span.consultingClassIcon {
  background: #ff9800;
}
.tableTotalNo span.classCancelIcon {
  background: #d32f2f;
}
.tableTotalNo.mbs-1 {
  margin: 46px 0 10px;
}
.tableTotalNo.mbTs-1 {
  margin: 8px 0 14px;
}
.tableTotalNo .ml-1 {
  margin-left: 12px;
}
.tableTotalNo.mt0 {
  margin-top: 0;
}
.tableTotalNo.mt-1 {
  margin-top: 52px;
}
.tableTotalNo.mts-1 {
  margin: 14px 0 0;
}
.tableTotalNo.mts-1 p.mr-1 {
  margin-right: 14px;
}
.tableTotalNo.mts-2 {
  margin: 34px 0 16px;
}
.tableTotalNo.mts-3 {
  margin: 26px 0 20px;
}
.tableTotalNo .pl-0 {
  padding-left: 0;
}
.tableTotalNo.spaceBetween {
  justify-content: space-between;
}
.tableTotalNo .leftContent {
  align-items: center;
}

.monthBtnContent {
  margin-right: 14px;
}
.monthBtnContent button {
  background: linear-gradient(-180deg, #fff 60%, #ebecf0 100%);
  border-radius: 6px;
  border: 1px solid #d4d4d4;
  box-shadow: 0 0.82px 2px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: inline-block;
  height: 38px;
  margin-right: 10px;
  position: relative;
  width: 52px;
}
.monthBtnContent button:hover {
  background: linear-gradient(180deg, #ebecf0 10%, #fff 60%);
}
.monthBtnContent button:last-child {
  margin-right: 0;
}
.monthBtnContent button .scrollBtnIcon {
  border-top: 2px solid #353b39;
  border-left: 2px solid #353b39;
  bottom: 0;
  display: block;
  height: 8.6px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(135deg);
  width: 8.6px;
}
.monthBtnContent button .scrollBtnIcon.prev {
  transform: rotate(-45deg);
}

body .RuleContent .titleInfoBox {
  padding: 0 28px;
}

.orderPayMethod {
  margin-top: 14px;
  width: 100%;
}
.orderPayMethod .paymentTypeTabs {
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 24px;
}
.orderPayMethod .paymentTypeTabs input[type=radio] {
  opacity: 0;
  pointer-events: none;
}
.orderPayMethod .paymentTypeTabs > div:has(> input:checked) > label {
  background: linear-gradient(90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  border-color: #dcdcdc;
  box-shadow: 0 4px 10px rgba(2, 158, 114, 0.25);
  color: #fff;
}
.orderPayMethod .paymentTypeTabs > div:has(> input:checked) > label::before {
  border-color: #dcdcdc;
  background: radial-gradient(circle at center, #fff 45%, transparent 50%);
}
.orderPayMethod .paymentTypeTabs label {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  color: #2f3e3a;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding: 17px 24px 19px;
  position: relative;
}
.orderPayMethod .paymentTypeTabs label:before {
  content: "";
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  height: 14px;
  width: 14px;
}
.orderPayMethod .paymentTypeTabs label:hover {
  background: linear-gradient(-90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
}

.pageNoBox {
  font-size: 16px;
  margin-top: 22px;
  position: relative;
  width: 100%;
}
.pageNoBox p {
  bottom: 0;
  float: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 1px;
  margin: auto;
  position: absolute;
  text-align: justify;
  top: 50%;
  transform: translateY(-50%);
}
.pageNoBox ul.pagination {
  align-items: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
  display: flex;
  float: right;
  height: 48px;
  justify-content: center;
  line-height: 46px;
  padding: 0 4px;
}
.pageNoBox ul.pagination li {
  display: inline-block;
}
.pageNoBox ul.pagination .pagePrevBtn {
  height: 48px;
  opacity: 1;
  position: relative;
  transform: translateY(1.6%);
  transition: all 0.4s ease-in-out 0s;
  width: 38px;
}
.pageNoBox ul.pagination .pagePrevBtn:hover {
  opacity: 0.7;
}
.pageNoBox ul.pagination .pagePrevBtn span {
  border-top: 2px solid #353b39;
  border-left: 2px solid #353b39;
  display: block;
  height: 8.6px;
  left: 0;
  right: 0;
  transform: rotate(-45deg);
  width: 8.6px;
  bottom: 0;
  margin: auto;
  position: absolute;
  top: 0;
}
.pageNoBox ul.pagination .pageNextBtn {
  height: 48px;
  opacity: 1;
  position: relative;
  transform: translateY(1.6%);
  transition: all 0.4s ease-in-out 0s;
  width: 38px;
}
.pageNoBox ul.pagination .pageNextBtn:hover {
  opacity: 0.7;
}
.pageNoBox ul.pagination .pageNextBtn span {
  border-top: 2px solid #353b39;
  border-left: 2px solid #353b39;
  display: block;
  height: 8.6px;
  left: 0;
  right: 0;
  transform: rotate(135deg);
  width: 8.6px;
  bottom: 0;
  margin: auto;
  position: absolute;
  top: 0;
}
.pageNoBox ul.pagination .pageNo {
  font-size: 16px;
  opacity: 1;
  padding: 0 8px;
  transition: all 0.4s ease-in-out 0s;
}
.pageNoBox ul.pagination .pageNo:hover {
  opacity: 0.7;
}
.pageNoBox ul.pagination .pageNo.active {
  color: #00754a;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
.pageNoBox ul.pagination .pageNo.active:after {
  content: "";
  background: #00754a;
  bottom: -2px;
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 36%;
}
.pageNoBox ul.pagination .pointer {
  cursor: pointer;
}
.courseBanner img {
  height: auto;
  width: 100%;
}

/* --內頁-我們的課程的CSS--------------------------------- */
.contentSection {
  margin: 0 auto;
  width: 100%;
}
.contentSection p.mtB {
  margin: 2px 0 18px;
}
.contentSection.mb {
  margin-bottom: 24px;
}
.contentSection .title {
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 17px;
  position: relative;
}
.contentSection .title.textCenter {
  align-items: center;
  justify-content: center;
}
.contentSection .title a {
  text-decoration: none;
}
.contentSection .title h2 {
  color: #353b39;
  font-size: 26px;
}
.contentSection .title h2, .contentSection .title h3 {
  padding: 0;
}
.contentSection .title h2.zIndex {
  transform: translateY(-14px);
  z-index: 10;
}
.contentSection .title p {
  font-size: 17px;
  font-weight: 500;
}

.calculateTotal {
  display: flex;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  justify-content: flex-end;
  margin: 10px 0 1px;
}
.calculateTotal p {
  font-size: 17px;
  font-weight: 500;
}
.calculateTotal span {
  font-size: 34px;
  font-weight: 700;
  margin-right: 4px;
}
.calculateTotal span.ml {
  margin-left: 4px;
}

.courseList {
  flex-wrap: wrap;
  gap: 26px;
  justify-content: flex-start;
}
.courseList.indexCoursesGap {
  gap: 10px;
}
.courseList.noGap {
  gap: 0 !important;
}
.courseList.noWrap {
  flex-wrap: nowrap;
}
.courseList .courseItem.sliderContent {
  margin-right: 0;
}

.courseItem {
  background: #fff;
  flex: 0 0 calc((100% - 80px) / 4);
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.32s ease-in-out 0s;
}
.courseItem.bgShadowNone {
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.courseItem.flexNone {
  flex: none;
}
.courseItem.sliderContent {
  flex: 0 0 calc((100% - 40px) / 2);
  padding-bottom: 10px;
}
.courseItem.sliderContent:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
}
.courseItem.sliderContent.pr0 {
  padding-right: 0;
}
.courseItem a {
  text-decoration: none;
}

.courseImgBox {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.courseImgBox img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.courseOverlay {
  align-items: center;
  background: linear-gradient(to bottom, rgba(0, 121, 107, 0.6), rgba(0, 121, 107, 0.22) 40%), linear-gradient(to top, rgba(0, 121, 107, 0.6), rgba(0, 121, 107, 0.22) 30%), rgba(0, 121, 107, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  inset: 0;
  justify-content: center;
  opacity: 0.92;
  padding: 0 8px;
  position: absolute;
  transition: all 0.3s ease-in-out;
  visibility: visible;
  z-index: 50;
}
.courseOverlay p {
  color: #fff;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1.36px;
  text-align: center;
}

.recommendClassSwiper .swiper-slide {
  border: 1px solid #dcdcdc;
  box-shadow: none;
}
.recommendClassSwiper .swiper-slide .courseDesc {
  display: -webkit-box;
  overflow: hidden;
  text-align: justify;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}

.tagUI {
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  left: 12px;
  padding: 1px 10px 4px;
  position: absolute;
  top: 10px;
}
.tagUI.big {
  padding: 4px 10px 8px;
}
.tagUI.hot {
  background: #fa3a3a;
}
.tagUI.city {
  background: #1f8d78;
}
.tagUI.sliderPadding {
  padding: 8px 10px 6.76px;
}

.tagKeyWordsWrapper {
  margin-bottom: 50px;
}
.tagKeyWordsWrapper.mb0 {
  margin-bottom: 0;
}
.tagKeyWordsWrapper h2 {
  color: #353b39;
  float: none;
  font-size: 26px;
  padding-bottom: 17px;
  padding-left: 0;
}
.tagKeyWordsWrapper .tagKeyWordsBox {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}
.tagKeyWordsWrapper .tagKeyWordsBox.mtB {
  margin: 6px 0 18px;
}
.tagKeyWordsWrapper .tagKeyWordsBox li {
  background: rgba(0, 121, 107, 0.14);
  border-radius: 6px;
  color: #00796b;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 600;
  margin-right: 0 !important;
  opacity: 1;
  padding: 5px 11px 7px;
  transition: opacity 0.22s ease-out 0s;
}
.tagKeyWordsWrapper .tagKeyWordsBox li:hover {
  opacity: 0.8;
}
.tagKeyWordsWrapper .tagKeyWordsBox li.small {
  padding: 5px 10px 7px;
}
.tagKeyWordsWrapper .tagKeyWordsBox a {
  color: #00796b;
  text-decoration: none;
}

.courseContent {
  padding: 7px 18px 10px;
}
.courseContent.pLR0 {
  padding-left: 0;
  padding-right: 0;
}
.courseContent.sliderPadding {
  padding: 14px 18px 3px 18px;
}

.courseTitle {
  color: #000;
  display: -webkit-box;
  font-family: "Noto Serif TC", "source-han-serif-tc", serif;
  font-size: 23px !important;
  font-weight: 800;
  margin-bottom: 4px;
  max-height: 46px;
  overflow: hidden;
  padding-bottom: 0 !important;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}
.courseTitle.mb-1 {
  margin-bottom: 4px;
}
.courseTitle.mb-2 {
  margin-bottom: 10px;
}

.courseDesc {
  display: -webkit-box;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}
.courseDesc.mb-1 {
  margin-bottom: 2px;
}
.courseDesc.mb-2 {
  margin-bottom: 5px;
}

.courseMeta {
  color: #999;
  font-size: 15px;
  font-weight: 600;
}
.courseMeta.mb-1 {
  margin-bottom: 3px;
}
.courseMeta.mb-2 {
  margin-bottom: 12px;
}
.courseMeta span {
  color: #999;
  font-size: 15px;
  line-height: 25px;
}
.courseMeta span.name {
  margin: 0 6px 0 2px;
}
.courseMeta span.numbers {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.priceBox {
  align-items: baseline;
}

.priceNow p {
  color: #fa3a3a;
  font-size: 16px;
  font-weight: 700;
}
.priceNow span.dollars {
  color: #fa3a3a;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0 2px;
}
.priceNow span.bestSalesPrice {
  color: #fa3a3a;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.priceOld {
  margin-left: 10px;
}
.priceOld p {
  color: #999;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.priceOld span.disCountLine, .priceOld span.dollars {
  color: #999;
  font-size: 20px;
  letter-spacing: 0;
}
.priceOld span.disCountLine {
  text-decoration: line-through;
}
.priceOld span.dollars {
  margin-left: 6px;
}

.memberOrderContent {
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  padding: 12px 20px 25px;
  width: 100%;
}
.memberOrderContent.mt {
  margin-top: 28px;
}
.memberOrderContent h3, .memberOrderContent h4, .memberOrderContent p {
  color: #353b39;
}
.memberOrderContent h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  padding-bottom: 0;
}
.memberOrderContent h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}
.memberOrderContent p {
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  padding-top: 6px;
}
.memberOrderContent .orderTableWrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.memberOrderContent .orderTop, .memberOrderContent .orderBottom {
  width: 100%;
}
.memberOrderContent .orderTop {
  margin-bottom: 24px;
}
.memberOrderContent .orderTop.mbS {
  margin-bottom: 14px;
}
.memberOrderContent .orderBottom {
  border-bottom: 1px solid #d4d4d4;
  margin: 14px 0 18px;
  padding-bottom: 22px;
}
.memberOrderContent .orderBottom.last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.memberOrderContent table {
  border: 1px solid #d4d4d4;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.memberOrderContent table th, .memberOrderContent table td {
  color: #353b39;
}
.memberOrderContent table th {
  background: #f5f6fa;
  border-bottom: 1px solid #d4d4d4;
  box-shadow: none;
  font-size: 16px;
  font-weight: 600;
  padding: 18px 20px 16px;
  width: 145px;
}
.memberOrderContent table td {
  font-size: 16px;
  font-weight: 500;
  padding: 12px 20px 16px;
}
.memberOrderContent table td, .memberOrderContent table tr:last-child td {
  border-bottom: 1px solid #d4d4d4;
}
.memberOrderContent table tr.mb0 {
  margin-bottom: 0;
}

/* --內頁-詳情頁的CSS--------------------------------- */
.pageDetailContent {
  margin: 0 auto;
  max-width: 1140px;
  padding-bottom: 48px;
  width: 100%;
}

/* --內頁-課程行事曆的CSS--------------------------------- */
.calendarWrapper {
  border-left: 1px solid #d4d4d4;
  border-right: 1px solid #d4d4d4;
  border-top: 1px solid #d4d4d4;
  width: 100%;
}
.calendarWrapper table th, .calendarWrapper table td {
  vertical-align: top;
  width: 14.2857%;
}
.calendarWrapper table th {
  font-size: 17px;
  padding: 16px 8px;
}
.calendarWrapper table td {
  line-height: 36px;
  padding: 16px 8px 22px;
  vertical-align: top;
}
.calendarWrapper table th.firstTh, .calendarWrapper table td:nth-child(7n+1) {
  padding: 16px 8px 16px 16px;
}
.calendarWrapper table th.lastTh, .calendarWrapper table td:nth-child(7n+7) {
  padding: 16px 16px 16px 8px;
}
.calendarWrapper table span.date {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.calendarWrapper table span.date.today {
  color: #00754a;
  font-weight: 800;
}
.calendarWrapper table strong {
  font-size: 18px;
}
.calendarWrapper table .classOnBoardEvent {
  border-radius: 8px;
  font-size: 15px;
  line-height: 25px;
  padding: 6px 6px 9px;
}
.calendarWrapper .classOnBoardEvent span,
.calendarWrapper .classOnBoardEvent strong {
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-weight: 600;
  padding: 2px 6px;
}
.calendarWrapper .north {
  background: #007bff;
}
.calendarWrapper .central {
  background: #00754a;
}
.calendarWrapper .south {
  background: #ff9800;
}
.calendarWrapper .online {
  background: #d32f2f;
}

/* --內頁-推薦書籍的CSS--------------------------------- */
.booksRecommendSwiper .sliderContent,
.booksSalesSwiper .sliderContent {
  flex: 0 0 48.2% !important;
}

.bookList,
.courseList {
  align-items: stretch;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: flex-start;
}

.bookItem {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  align-items: stretch;
  flex: 0 0 calc((100% - 26px) / 2);
  gap: 26px;
  padding: 20px 20px 24px;
}

.bookDetailContent,
.courseDetailContent {
  align-items: stretch;
  background: none;
  border-radius: 0;
  border: 0;
  flex: 1 1 100%;
  margin-bottom: 4px;
}
.bookDetailContent .bookPicBox,
.courseDetailContent .bookPicBox {
  margin-bottom: 0;
}

.bookDetailContent {
  gap: 28px;
}

.bookPicBox {
  flex: 0 0 220px;
}
.bookPicBox img {
  border: 1px solid #dcdcdc;
  display: block;
  height: auto;
  width: 100%;
}

.bookInfoBox {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.bookInfoBox h3 {
  display: -webkit-box;
  color: #000;
  font-family: "Noto Serif TC", "source-han-serif-tc", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 38px;
  margin-bottom: 8px;
  max-height: 38px;
  overflow: hidden;
  padding-bottom: 0 !important;
  text-overflow: ellipsis;
  transform: translateY(-6px);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}
.bookInfoBox p {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
}
.bookInfoBox .price {
  color: #e11d48;
  font-size: 20px;
  font-weight: 700;
}
.bookInfoBox .desc {
  display: -webkit-box;
  line-height: 26px;
  margin-bottom: 14px;
  margin-top: 7px;
  max-height: 82px;
  overflow: hidden;
  text-align: justify;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}

.courseDetailContent {
  gap: 34px;
}

.courseContentRight {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.courseContentRight h3 {
  color: #000;
  font-family: "Noto Serif TC", "source-han-serif-tc", serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 38px;
  margin-bottom: 6px;
  transform: translateY(-8px);
}
.courseContentRight .courseTagUI {
  background: #ff4d4f;
  border-radius: 6px;
  color: #fff;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
  padding: 8px 10px 10px;
}
.courseContentRight .courseTagUI a {
  color: #fff;
  text-decoration: none;
}
.courseContentRight .desc {
  display: -webkit-box;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  margin: 4px 0 14px;
  max-height: 102px;
  overflow: hidden;
  text-align: justify;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}
.courseContentRight .currentPriceBox {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.courseContentRight .currentPriceBox p {
  color: #ff4d4f;
  font-size: 17px;
  font-weight: 600;
}
.courseContentRight .currentPriceBox span.currentPrice {
  color: #ff4d4f;
  font-size: 32px;
  font-weight: 700;
}
.courseContentRight .oldPriceBox {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-top: 4px;
}
.courseContentRight .oldPriceBox p {
  color: #8c8c8c;
  font-size: 18px;
  font-weight: 600;
}
.courseContentRight .oldPriceBox span.oldPrice {
  color: #8c8c8c;
  font-size: 22px;
  font-weight: 700;
  text-decoration: line-through;
}
.courseContentRight .signUpCount {
  color: #8c8c8c;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.courseContentRight .mr-1 {
  margin-right: 12px;
}

.bookBtnBox {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
}
.bookBtnBox .btn {
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px 12px;
  transition: all ease-in-out 0.2s;
}
.bookBtnBox .btn:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.bookBtnBox .btn.primary {
  border-color: #0b7a5c;
  color: #0b7a5c;
}

.courseContentLeft {
  flex: 0 0 553px;
}
.courseContentLeft figure, .courseContentLeft img {
  width: 100%;
}
.courseContentLeft.sliderBox {
  aspect-ratio: 16/9;
  margin: 0;
  overflow: hidden;
  position: relative;
}
.courseContentLeft.sliderBox input[type=radio] {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.courseContentLeft.sliderBox .dots {
  bottom: 15px;
  gap: 8px;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 2;
}
.courseContentLeft.sliderBox .dots label {
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  height: 10px;
  opacity: 0.4;
  width: 10px;
}
.courseContentLeft.sliderBox .dots label.selected {
  background: #00754a;
}
.courseContentLeft .slides {
  position: relative;
}
.courseContentLeft .slider {
  inset: 0;
  position: absolute;
}
.courseContentLeft .slider img {
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.swiper-button-next svg,
.swiper-button-prev svg {
  display: none;
}

.sliderBtnBox {
  overflow-x: visible;
  margin: 4px 0 6px;
  position: relative;
}
.sliderBtnBox .sliderNextBtn, .sliderBtnBox .sliderPrevBtn {
  appearance: none;
  background: #00754a;
  box-shadow: 0 6px 16px rgba(0, 117, 74, 0.35);
  border-radius: 50%;
  bottom: 0;
  display: block;
  height: 48px !important;
  margin: auto;
  position: absolute;
  top: 0;
  width: 48px !important;
  z-index: 20;
}
.sliderBtnBox .sliderNextBtn {
  left: auto;
  right: -24px !important;
}
.sliderBtnBox .sliderNextBtn:after {
  content: "";
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  bottom: 0;
  display: block;
  height: 10px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 25%;
  top: 7.5px;
  transform: rotate(-225deg) translateX(-45%);
  width: 10px;
}
.sliderBtnBox .sliderPrevBtn {
  left: -24px !important;
  right: auto;
}
.sliderBtnBox .sliderPrevBtn:after {
  content: "";
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  bottom: 0;
  display: block;
  height: 10px;
  left: 25%;
  margin: auto;
  position: absolute;
  right: 0;
  top: -7.5px;
  transform: rotate(-45deg) translateX(-45%);
  width: 10px;
}

.detailContentText {
  border-bottom: 1px solid #dcdcdc;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 18px 0 18px;
}
.detailContentText:last-child {
  border-bottom: none;
}
.detailContentText.pb0 {
  padding-bottom: 0;
}
.detailContentText figure img {
  width: 100%;
}
.detailContentText h2 {
  color: #000;
  font-family: "Noto Serif TC", "source-han-serif-tc", serif;
  font-size: 25px;
  font-weight: 700;
  padding-bottom: 14px;
}
.detailContentText h3 {
  color: #000;
  font-family: "Noto Serif TC", "source-han-serif-tc", serif;
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 10px;
}
.detailContentText h3.courseTitle {
  padding-bottom: 0;
}
.detailContentText h4 {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 6px;
}
.detailContentText p, .detailContentText ol, .detailContentText ul {
  font-size: 16px;
  font-weight: 400;
}
.detailContentText p {
  line-height: 30px;
  text-align: justify;
}
.detailContentText p.author {
  font-size: 18px;
  font-weight: 600;
}
.detailContentText ol, .detailContentText ul {
  line-height: 30px;
}
.detailContentText .mt {
  margin-top: 16px;
}
.detailContentText .mt-2 {
  margin-top: 8px;
}
.detailContentText .title {
  flex: 0 0 120px;
  font-size: 16px;
  font-weight: 600;
}
.detailContentText .title.time {
  font-size: 17px;
}
.detailContentText .tableUI {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 4px 0 10px;
  width: 100%;
}
.detailContentText .tableUI.mb0 {
  margin-bottom: 0;
}
.detailContentText .tableUI.mt0 {
  margin-top: 0;
}
.detailContentText .tableUI .tableTh {
  background: #007448;
  padding: 12px 18px 10px;
}
.detailContentText .tableUI .tableTh h5 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
}
.detailContentText .tableUI .tableTd {
  border-left: 1px solid #007448;
  border-right: 1px solid #007448;
  border-bottom: 1px solid #007448;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 18px 14px;
  position: relative;
}
.detailContentText .tableUI .tableTd .chapter {
  align-items: baseline;
  padding-bottom: 7px;
}
.detailContentText .tableUI .tableTd .chapter:last-child {
  padding-bottom: 0;
}
.detailContentText .tableUI .tableTd .title {
  flex: 0 0 83px;
}
.detailContentText .tableUI .tableTd.limitTdText:not(.isOpen) .chapterList .chapter:nth-child(n+5) {
  display: none;
}
.detailContentText .tableUI .tableTd.limitTdText:not(.isOpen)::after {
  content: "";
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  bottom: 42px;
  height: 84px;
  left: 0;
  position: absolute;
  pointer-events: none;
  right: 0;
}
.detailContentText .tableUI .readMoreBtn {
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
}

.bookIntroNav.fixed {
  background: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.1);
  left: 0;
  margin-top: 0;
  padding: 22px 0 20px;
  position: fixed;
  right: 0;
  top: var(--headerH, 80px);
  width: 100%;
  z-index: 100;
}
.bookIntroNav.fixed .container {
  padding-bottom: 0;
}
.bookIntroNav .container {
  align-items: center;
  margin: 0 auto;
  padding-bottom: 14px;
  width: 1140px;
}
.bookIntroNav .naveMenu.pb0 {
  padding: 0 4px 0;
}
.bookIntroNav .navLine {
  transform: translateY(-4px);
}

/* --內頁-新訊公告的CSS--------------------------------- */
.newsList {
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  flex-direction: column;
  gap: 24px;
  padding: 24px 24px 30px;
}

.newsItem {
  border-bottom: 1px solid #dcdcdc;
  gap: 34px;
  padding-bottom: 24px;
}
.newsItem:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.newsItem a {
  text-decoration: none;
}

.newsPicBox {
  background: #f2f2f2;
  flex: 0 0 460px;
  overflow: hidden;
}
.newsPicBox img {
  border-radius: 8px;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.newsContent {
  flex-direction: column;
  width: 100%;
}
.newsContent .newsTime, .newsContent .newsTitle, .newsContent .newsDesc {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.newsContent .newsTime {
  color: #707780;
  font-size: 16px;
  font-weight: 600;
}
.newsContent .newsTitle {
  color: #000;
  display: -webkit-box;
  font-family: "Noto Serif TC", "source-han-serif-tc", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 37px;
  margin-top: 2px;
  max-height: 46px;
  overflow: hidden;
  padding-bottom: 4px;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}
.newsContent .newsDesc {
  display: -webkit-box;
  font-size: 17px;
  font-weight: 400;
  line-height: 30px;
  margin-top: 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.newsBtn {
  justify-content: flex-end;
  margin-top: auto;
}
.newsBtn .btn {
  background: linear-gradient(90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  box-shadow: 0 2px 8px rgba(15, 143, 100, 0.25);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 26px 13px;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
}
.newsBtn .btn:hover {
  background: linear-gradient(-90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
}

.doubleLayout {
  margin-top: 42px;
  width: 100%;
}

.doubleLayoutLeft {
  flex-direction: column;
  flex: 0 0 1000px;
}
.doubleLayoutLeft h2 {
  color: #000;
  font-family: "Noto Serif TC", "source-han-serif-tc", serif;
  font-size: 31px;
  font-weight: 700;
  line-height: 38px;
  padding-bottom: 22px;
  padding-left: 0;
}
.doubleLayoutLeft h3 {
  color: #000;
  font-size: 25px;
  font-weight: 600;
  line-height: 28px;
  padding-bottom: 18px;
}
.doubleLayoutLeft figure {
  width: 100%;
}
.doubleLayoutLeft img {
  border-radius: 14px;
  max-width: 100%;
  width: 100%;
}
.doubleLayoutLeft li {
  font-size: 17px;
  font-weight: 600;
  margin-right: 12px;
}
.doubleLayoutLeft li:last-child {
  margin-right: 0;
}
.doubleLayoutLeft p {
  font-size: 17px;
  font-weight: 400;
  line-height: 32px;
  padding-bottom: 12px;
  text-align: justify;
}
.doubleLayoutLeft p:last-child {
  padding-bottom: 0;
}
.doubleLayoutLeft span.timeDate {
  font-size: 28px;
  font-weight: 600;
}
.doubleLayoutLeft .articleInfo {
  margin: 18px 0 12px;
}

.doubleLayoutRight {
  margin-left: 60px;
  width: 100%;
}

.recentNews.mt {
  margin-top: 40px;
}
.recentNews li, .recentNews h4, .recentNews span.timeDate {
  font-family: "Noto Serif TC", "source-han-serif-tc", serif;
}
.recentNews li, .recentNews h3, .recentNews h4, .recentNews span.timeDate {
  color: #000;
  font-weight: 700;
}
.recentNews h3 {
  color: #353b39;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
}
.recentNews li {
  align-items: flex-start;
  border-bottom: 1px solid #dcdcdc;
  flex-wrap: nowrap;
  gap: 18px;
  padding: 14px 0;
}
.recentNews li.first {
  padding-top: 0;
}
.recentNews li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.recentNews li.column {
  border-bottom: none;
  gap: 0;
  margin-bottom: 36px;
  padding: 0;
}
.recentNews li.dBlock {
  display: block;
  width: 54%;
}
.recentNews li img {
  max-width: 100%;
  width: 100%;
}
.recentNews li img.bookBorder {
  border: 1px solid #dcdcdc;
}
.recentNews h4 {
  color: #000;
  font-size: 20px;
  line-height: 32px;
  margin-top: 8px;
  text-align: justify;
}
.recentNews h4.mtMinus {
  margin-top: -1px;
}
.recentNews span.timeDate {
  color: #000;
  font-size: 23px;
}

.btnWrap {
  margin-top: 22px;
  justify-content: center;
  width: 100%;
}
.btnWrap .btn {
  background: linear-gradient(90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  box-shadow: 0 6px 14px rgba(10, 138, 102, 0.22);
  border-radius: 999px;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  height: 53px;
  padding: 14px 26px 16px;
  text-align: center;
  text-decoration: none;
  transition: all ease-in-out 0.2s;
}
.btnWrap .btn:hover {
  background: linear-gradient(-90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
}

/* --內頁-購物車的CSS--------------------------------- */
.shoppingCartBox.noGoods {
  padding: 100px 0 142px;
}
.shoppingCartBox .borderLine {
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 26px;
}
.shoppingCartBox .borderLine.pb0 {
  padding-bottom: 0;
}
.shoppingCartBox .borderLine.pbS {
  padding-bottom: 15px;
}
.shoppingCartBox .btn {
  background: linear-gradient(90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
  box-shadow: 0 6px 14px rgba(10, 138, 102, 0.22);
  border-radius: 28px;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  height: 56px;
  padding: 16px 30px 20px;
  text-align: center;
  text-decoration: none;
  transition: all ease-in-out 0.2s;
}
.shoppingCartBox .btn:hover {
  background: linear-gradient(-90deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 50%, rgb(2, 119, 79) 100%);
}
.shoppingCartBox .deleteBtn {
  background: linear-gradient(180deg, rgb(107, 197, 100) 0%, rgb(66, 162, 128) 56%, rgb(2, 119, 79) 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  border-radius: 28px;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 44px;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  transition: all ease-in-out 0.2s;
}
.shoppingCartBox .deleteBtn:hover {
  background: linear-gradient(180deg, rgb(2, 119, 79) 0%, rgb(66, 162, 128) 56%, rgb(107, 197, 100) 100%);
}
.shoppingCartBox p {
  font-size: 23px;
  font-weight: 600;
  line-height: 34px;
  margin-top: 12px;
  text-align: center;
}
.shoppingCartBox figure.picPlacedCenter {
  display: block;
  margin: 0 auto;
  max-width: 218px;
  width: 100%;
}
.shoppingCartBox figure.picPlacedCenter img {
  width: 100%;
}
.shoppingCartBox input[type=number] {
  width: 88px;
}
.shoppingCartBox .pic {
  max-width: 200px;
}

.shoppingCartFlow {
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  display: block;
  margin: 0px auto 20px auto;
  max-width: 1600px;
  padding: 18px 22px 22px;
  position: relative;
  width: 100%;
}
.shoppingCartFlow.paySuccessNotice {
  background: #f7f7f7;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.shoppingCartFlow .paySuccessText {
  margin-left: 18px;
}
.shoppingCartFlow .paySuccessText p {
  font-weight: 500;
  text-align: justify;
}
.shoppingCartFlow .paySuccessText p.fw500 {
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
}
.shoppingCartFlow .paySuccessText p.fw600 {
  font-size: 17px;
  font-weight: 600;
  line-height: 27px;
  margin-bottom: 3px;
}
.shoppingCartFlow h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 40px;
  text-align: justify;
}
.shoppingCartFlow h3.pbS {
  padding-bottom: 11px;
}
.shoppingCartFlow ul {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.shoppingCartFlow ul li {
  border-radius: 7px;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  padding: 10px 16px 10px;
}
.shoppingCartFlow ul li.selected {
  background: #42a280;
  color: #fff;
}

.shoppingCartBtnBox {
  align-items: center;
  margin-top: 32px;
  justify-content: center;
}
.shoppingCartBtnBox.gap {
  gap: 20px;
}

.shoppingCartTableTotalNo {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
}
.shoppingCartTableTotalNo p {
  font-size: 17px;
  font-weight: 500;
  line-height: 30px;
  text-align: justify;
}
.shoppingCartTableTotalNo span {
  font-size: 24px;
  font-weight: 700;
  padding-right: 2px;
}

.aSmallBtn {
  display: block;
  margin: 0 0 28px !important;
  max-width: 132px;
  text-decoration: none;
}

.aSmallBtn,
.ruleBtn {
  background: #dcdcdc;
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin: -6px 0 20px;
  padding: 13px 15px 9px;
  text-align: center;
  transition: all 0.32s ease-in-out 0s;
}
.aSmallBtn.memberSignUpBtn,
.ruleBtn.memberSignUpBtn {
  margin: 0 0 12px;
}
.aSmallBtn:active, .aSmallBtn:hover,
.ruleBtn:active,
.ruleBtn:hover {
  background: #c7c6c6;
}

/* --內頁-常見問題與購買注意事項的CSS--------------------------------- */
.noteText dt, .noteText dd, .noteText ul, .noteText p,
.ruleText dt,
.ruleText dd,
.ruleText ul,
.ruleText p {
  font-size: 17px;
  font-weight: 400;
  line-height: 30px;
  text-align: justify;
}

.ruleText {
  border-bottom: 1px solid #dcdcdc;
  padding: 18px 0 24px;
}
.ruleText:last-child {
  border-bottom: none;
}
.ruleText a {
  color: #00754a;
  font-weight: 600;
  overflow-wrap: break-word;
  /* 新寫法 */
  padding-left: 2px;
  text-decoration: underline;
  text-underline-offset: 6px;
  word-break: break-word;
  /* Safari相容 */
  word-wrap: break-word;
  /* 舊瀏覽器相容 */
}
.ruleText h3 {
  padding-bottom: 9px;
}
.ruleText dl, .ruleText ul, .ruleText p {
  padding-bottom: 14px;
}
.ruleText ul:last-child, .ruleText p:last-child {
  padding-bottom: 0;
}
.ruleText span.mainPoint {
  color: #00754a;
  font-weight: 600;
}

/* --版尾的CSS--------------------------------- */
.memberHotCourses {
  margin-bottom: 24px;
  max-width: 1508px;
  width: 100%;
}

.sliderWrapper {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #d4d4d4;
  box-shadow: 0 1px 2px rgba(182, 190, 199, 0.08), 0 0 2px rgba(54, 64, 83, 0.1);
  padding: 20px 20px 24px;
  position: relative;
}
.sliderWrapper.onePagePadding {
  padding: 20px 20px 10px;
}
.sliderWrapper .hotNavBtn {
  background: #00754a;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 6px 16px rgba(0, 117, 74, 0.35);
  color: #fff;
  cursor: pointer;
  display: grid;
  height: 36px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  z-index: 999;
}
.sliderWrapper .hotNavBtn span {
  color: #fff;
  font-size: 28px;
  line-height: 0.98;
}
.sliderWrapper .hotNavBtn.swiper-button-disabled {
  cursor: not-allowed;
  opacity: 0.28;
}
.sliderWrapper .hotPrevBtn {
  left: 4px;
}
.sliderWrapper .hotNextBtn {
  right: 4px;
}
.sliderWrapper .hotPagination {
  gap: 3px;
  justify-content: center;
  margin-top: 15px;
}
.sliderWrapper .hotPagination .swiper-pagination-bullet {
  background: #d7d7de;
  border-radius: 999px;
  height: 8px;
  opacity: 1;
  transition: width 0.2s ease;
  width: 8px;
}
.sliderWrapper .hotPagination .swiper-pagination-bullet-active {
  background: #00754a;
  width: 26px;
}

.hotCoursesSwiper {
  overflow: hidden;
}
.hotCoursesSwiper .slide {
  border-radius: 14px;
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.hotCoursesSwiper .slide img {
  display: block;
  height: auto;
  object-fit: cover;
  opacity: 1;
  transition: all 0.32s ease-in-out 0s;
  width: 100%;
}
.hotCoursesSwiper .slide img:hover {
  opacity: 0.84;
}

/* --版尾的CSS--------------------------------- */
footer {
  background: #353b39;
  bottom: 0;
  border-top: 10px solid #00754a;
  margin-top: auto;
  padding: 29px 18px 20px;
  position: relative;
  width: 100%;
}
footer .container {
  justify-content: space-around;
  margin: 0 auto;
  max-width: 1600px;
  width: 100%;
}
footer .container .left {
  flex: 0 0 800px;
  transform: translateY(-7px);
}
footer p {
  color: #c2c5c5;
  font-size: 16px;
  line-height: 34px;
  text-align: left;
  width: 100%;
}
footer p a {
  color: #c2c5c5;
  text-decoration: underline;
  text-underline-offset: 6px;
}
footer nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}
footer nav a {
  color: #c2c5c5;
  font-size: 16px;
  font-weight: 500;
  margin-right: 22px;
  text-decoration: none;
}
footer nav a:last-child {
  margin: 0;
}

.socialShareMedia {
  gap: 14px;
  margin-top: 12px;
}
.socialShareMedia a {
  display: block;
}
.socialShareMedia li, .socialShareMedia img.icon1 {
  max-width: 26px;
}
.socialShareMedia img.icon2 {
  max-width: 40px;
  transform: translateY(-1px);
}
.socialShareMedia img {
  opacity: 1;
  transition: opacity 0.4s ease-in-out 0s;
}
.socialShareMedia img:hover {
  opacity: 0.8;
}

/* --會員中心首頁的CSS--------------------------------- */
.memberCenterIndexMenu {
  flex-wrap: wrap;
  gap: 18px;
  line-height: 34px;
}
.memberCenterIndexMenu a {
  background: #1f8d78;
  color: #fff;
  font-weight: 500;
  padding: 14px 16px 18px;
  text-decoration: none;
  transition: background 0.22s ease-in-out 0s;
}

/* --回到網頁頂端按鈕的CSS--------------------------------- */
#pageTopBtn {
  appearance: none;
  background: #fff;
  border: none;
  border-radius: 50%;
  bottom: 24px;
  box-shadow: 0 3px 17px rgba(0, 0, 0, 0.17);
  cursor: pointer;
  display: block;
  height: 46px;
  position: fixed;
  right: 18px;
  transition: all 0.15s ease-in-out 0s;
  width: 46px;
  z-index: 100;
}
#pageTopBtn:after {
  content: "";
  border-top: solid 3px #00754a;
  border-right: solid 3px #00754a;
  bottom: 0;
  height: 10px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(-45deg);
  width: 10px;
}

/* --動畫的CSS--------------------------------- */
@keyframes checkBoxEffect {
  0% {
    left: -40px;
  }
  80% {
    left: 0;
  }
}
/* --手機hover的CSS--------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .courseItem:hover .courseOverlay {
    opacity: 1;
    visibility: visible;
  }
}
/* --平板~手機網頁共同的CSS--------------------------------- */
@media screen and (max-width: 1882px) {
  .tableContent .filterFrame .fieldSmall {
    margin-right: 4.6%;
    width: 30%;
  }
}
@media screen and (max-width: 1724px) {
  .tableContent .filterFrame li.infoField {
    margin: 0 2.48% 2.48% 0;
    width: 48.3%;
  }
}
@media screen and (max-width: 1650px) {
  .sliderBtnBox .sliderNextBtn, .sliderBtnBox .sliderPrevBtn {
    height: 40px !important;
    width: 40px !important;
  }
  .sliderBtnBox .sliderNextBtn {
    right: -16px !important;
  }
  .sliderBtnBox .sliderPrevBtn {
    left: -16px !important;
  }
}
@media screen and (min-width: 1636px) {
  nav a.menuMainBtn {
    margin: 0 2.7% 46px 0;
  }
  nav a.menuMainBtn:nth-child(4n+4) {
    margin-right: 0;
  }
}
@media screen and (max-width: 1636px) {
  nav {
    justify-content: center;
  }
  nav a.menuMainBtn {
    margin: 0 5% 50px 0;
    max-width: 340px;
  }
  nav p {
    font-size: 25px;
  }
}
@media screen and (max-width: 1635px) {
  nav a.menuMainBtn:nth-child(3n+3) {
    margin-right: 0;
  }
}
@media screen and (max-width: 1530px) {
  nav {
    justify-content: center;
  }
  nav a.menuMainBtn {
    margin: 0 3.09% 50px 0;
  }
  nav a.menuMainBtn:nth-child(3n+3) {
    margin-right: 0;
  }
}
@media screen and (max-width: 1506px) {
  .contentSection .courseItem {
    flex: 0 0 calc((100% - 52px) / 3);
  }
  .doubleLayoutLeft {
    flex: 0 0 64%;
  }
  .doubleLayoutRight {
    margin-left: 46px;
  }
}
@media screen and (max-width: 1480px) {
  footer nav {
    margin-top: 12px;
    justify-content: flex-start;
  }
  footer .container {
    flex-direction: column;
  }
  footer .container .left {
    flex: 0 0 100%;
    transform: translateY(0);
  }
}
@media screen and (max-width: 1384px) {
  .tableContent table th {
    padding: 20px 14px;
  }
  .tableContent table th span:after {
    content: "";
    background: none;
    display: none;
  }
  .tableContent table td {
    padding: 14px 14px 18px;
  }
}
@media screen and (min-width: 1350px) {
  .desktopHide,
  .mobileMenuBtn,
  .mobileSearchBtn {
    display: none;
  }
  .memberDropdownMenu li.desktopHide {
    display: none;
  }
}
@media screen and (max-width: 1350px) {
  header {
    height: 54px;
  }
  main.mainMt-2 {
    margin-top: 12px;
  }
  .bookIntroNav.fixed {
    top: var(--headerH, 54px);
  }
  .pageBanner {
    margin-top: -18px;
  }
  .pageBanner h2 {
    padding: 102px 0 0;
  }
  .pageHeader {
    border-radius: 0;
    display: block;
    height: 54px;
    padding: 0;
  }
  .pageHeader .content {
    height: 54px;
  }
  .pageHeader .deskTopSubMenu {
    display: none;
  }
  .pageHeader img.logo {
    left: 18px;
    max-width: 152px;
  }
  .pageHeader .mobileSearchBtn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    bottom: 0;
    display: block;
    height: 30px;
    margin: auto;
    position: absolute;
    right: 66px;
    top: 0;
    width: 30px;
  }
  .pageHeader .mobileSearchBtn img {
    max-width: 28px;
  }
  .pageHeader .mobileMenuBtn {
    background: #00754a;
    display: block;
    height: 54px;
    padding: 8px 0;
    position: absolute;
    right: 0;
    width: 54px;
    z-index: 999;
  }
  .pageHeader .mobileMenuBtn.hide {
    display: none;
  }
  .pageHeader .mobileMenuBtn .closeIcon {
    height: 18px;
    margin: 0 auto 7px;
    position: relative;
    transform: translateY(0%);
    width: 30px;
  }
  .pageHeader .mobileMenuBtn .closeIcon span {
    background: #fff;
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out 0s;
    width: 30px;
  }
  .pageHeader .mobileMenuBtn .closeIcon span:first-child {
    top: 0;
    width: 30px;
  }
  .pageHeader .mobileMenuBtn .closeIcon span:nth-child(2) {
    left: auto;
    right: 0;
    top: 8px;
    width: 24px;
  }
  .pageHeader .mobileMenuBtn .closeIcon span:last-child {
    left: auto;
    right: 0;
    top: 16px;
    width: 18px;
  }
  .pageHeader .mobileMenuBtn.open span:first-child {
    top: 8px;
    transform: rotate(45deg);
  }
  .pageHeader .mobileMenuBtn.open span:nth-child(2) {
    opacity: 0;
    width: 0;
  }
  .pageHeader .mobileMenuBtn.open span:last-child {
    top: 8px;
    transform: rotate(-45deg);
    width: 32.2px;
  }
  .pageHeader .mobileMenuBtn p {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transform: scale(0.833);
  }
  .pageHeader .searchBarUI form {
    width: 100%;
  }
  .pageHeader ul.menu {
    background: #fff;
    border-top: 1px solid #eaeaea;
    display: block;
    flex-basis: 0;
    height: 100vh;
    left: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
    top: 54px;
    transform: none;
    transition: opacity 0.32s ease-in-out 0s;
    width: 100%;
  }
  .pageHeader ul.menu.open {
    opacity: 1;
    pointer-events: auto;
  }
  .pageHeader ul.menu li {
    border-bottom: 1px solid #eaeaea;
    display: inline-block;
    margin-right: 0;
    width: 50%;
  }
  .pageHeader ul.menu li.mobileHide {
    display: none;
  }
  .pageHeader ul.menu li.searchBarUIBox {
    display: none;
    padding: 13px 14px;
  }
  .pageHeader ul.menu li a {
    display: block;
    font-size: 17px;
    font-weight: 500;
    margin-right: 0;
    padding: 3.25px 14px;
    position: relative;
    width: 100%;
  }
  .pageHeader ul.menu li a:after {
    content: "";
    border-top: 2.8px solid #00754a;
    border-left: 2.8px solid #00754a;
    bottom: 0;
    display: block;
    height: 8px;
    margin: auto;
    position: absolute;
    right: 18px;
    top: 0;
    transform: rotate(135deg);
    width: 8px;
  }
  .pageHeader ul.menu li.noIcon {
    font-weight: 500;
  }
  .pageHeader ul.menu li.noIcon:after {
    display: none;
  }
  .pageHeader ul.menu li.noIcon span:first-child {
    margin-right: 6px;
  }
  .pageHeader ul.menu li.title {
    background: #159c8e;
    color: #fff;
    font-weight: 500;
  }
  .pageHeader ul.member {
    display: none;
  }
  .memberCenterIndexContent {
    flex-direction: column;
    gap: 38px;
  }
  .memberCenterIndexRight {
    width: 100%;
  }
  .memberDropdown {
    width: 100% !important;
  }
  .memberDropdown a.title {
    background: #f5f5f5;
  }
  .memberDropdown a.title:after {
    display: none !important;
  }
  .memberDropdownMenu {
    display: flex;
    flex-wrap: wrap;
    line-height: 38px;
    min-width: 100%;
    max-height: none;
    opacity: 1;
    overflow-y: hidden;
    padding: 10px 0 14px;
    top: calc(100% - 11px);
    visibility: visible;
    width: 100%;
  }
  .memberDropdownMenu li {
    width: 50% !important;
  }
  .memberDropdownMenu li a {
    font-size: 16px !important;
    padding: 0 18px;
  }
  .memberDropdownMenu li.noArrowIcon a:after {
    display: none !important;
  }
  .tableContent {
    margin: -154px auto 84px auto !important;
  }
  .tableContent.indexTableContent {
    margin: 14px auto 84px auto !important;
  }
  .pageBg {
    padding: 54px 0 60px;
  }
  .pageBg.pb0 {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 1319px) {
  footer .container {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  footer nav {
    justify-content: flex-start;
    margin-top: 12px;
  }
  footer nav a {
    line-height: 34px;
    padding-bottom: 2px;
  }
}
@media screen and (max-width: 1318px) {
  .tableContent .filterFrame .fieldSmall {
    margin-right: 7.3%;
    width: 27.85%;
  }
  footer {
    padding: 20px 18px 26px;
  }
}
@media screen and (max-width: 1286px) {
  .checkBoxTitle {
    margin-top: 22px;
  }
  .checkBoxTitle li.checkBoxUI {
    margin-right: 14px !important;
  }
  .tableContent button.filterBtn.mt0 {
    margin-top: 26px;
  }
  .tableContent .filterFrame ul.mt-1 {
    margin-top: 24px !important;
  }
  .tableContent .filterFrame li {
    width: 48.5%;
  }
  .tableContent .filterFrame li:nth-child(2n+1) {
    margin: 0 2.48% 28px 0;
  }
  .tableContent .filterFrame li:nth-child(2n+2) {
    margin-right: 0;
  }
  .tableContent .filterFrame li:last-child, .tableContent .filterFrame li:nth-last-child(2) {
    margin-bottom: 0;
  }
  .tableContent .filterFrame li.mb {
    margin-bottom: 2.48% !important;
  }
  .tableContent .filterFrame li.topInput:nth-child(2n+2), .tableContent .filterFrame li.bottomInput:nth-child(2n+2) {
    margin-right: 2.1%;
  }
  .tableContent .filterFrame .creditCardNoTop li.topInput {
    width: 23.2%;
  }
  .tableContent .filterFrame .creditCardNoBottom li.bottomInput {
    width: 31.8%;
  }
  .tableContent .filterFrame .contractFormTitleBox.mt {
    margin-top: 48px;
  }
  .tableContent .filterFrame.twoColumns li {
    width: 48.5%;
  }
  .tableContent .filterFrame.twoColumns li:nth-child(5n+5) {
    margin: 0 2.48% 24px 0;
  }
  .tableContent .filterFrame.twoColumns li:nth-last-child(2) {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 1224px) {
  .calendarWrapper {
    min-width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (max-width: 1200px) {
  .bookPicBox {
    flex: 0 0 auto;
    width: 40%;
  }
  .bookPicBox.widthNone {
    width: auto;
  }
  .sliderBox .sliderContent {
    padding-right: 0;
  }
}
@media screen and (max-width: 1180px) {
  .memberOrderContent table, .memberOrderContent thead, .memberOrderContent tbody, .memberOrderContent th, .memberOrderContent td, .memberOrderContent tr {
    display: block;
    width: 100%;
  }
  .memberOrderContent table {
    table-layout: auto;
  }
  .memberOrderContent table, .memberOrderContent table td:last-child {
    border: none !important;
  }
  .memberOrderContent thead, .memberOrderContent th {
    display: none;
  }
  .memberOrderContent tr {
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
  }
  .memberOrderContent th {
    width: 100%;
  }
  .memberOrderContent td {
    align-items: center;
    border-bottom: 1px solid #d4d4d4;
    display: flex;
    justify-content: flex-start;
    padding: 0 20px 0 0 !important;
    width: 100%;
  }
  .memberOrderContent td:last-child {
    border-bottom: none;
  }
  .memberOrderContent td:before {
    content: attr(data-label);
    background: #f5f6fa;
    border-right: 1px solid #dcdcdc;
    flex-shrink: 0;
    font-weight: 600;
    margin-right: 20px;
    padding: 16px 20px;
    white-space: nowrap;
    width: 22%;
  }
}
@media screen and (max-width: 1172px) {
  .tabsBox {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* Firefox 隱藏滾動條 */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* iOS 慣性滑動 */
  }
  .bookIntroNav.fixed {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 22px 18px 18px;
    scrollbar-width: none;
    /* Firefox 隱藏滾動條 */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* iOS 慣性滑動 */
  }
  .indexTableContent .contentSection .courseDesc {
    margin-bottom: 6px;
  }
  .indexTableContent .contentSection .courseMeta {
    margin-bottom: 10px;
  }
  .indexTableContent .contentSection .priceBox {
    gap: 8px;
  }
  .contentSection h3.courseTitle {
    margin-bottom: 2px;
  }
  .contentSection .courseDesc {
    margin-bottom: 4px;
  }
  .contentSection .courseMeta {
    margin-bottom: 0px;
  }
  .contentSection .priceBox {
    flex-direction: column;
    gap: 0;
  }
  .contentSection .priceOld {
    margin-left: 0;
    margin-top: -4px;
  }
  .courseDetailContent {
    flex-direction: column;
    gap: 14px;
  }
  .courseDetailContent .courseContentLeft {
    flex: 1 1 100%;
  }
  .courseDetailContent .courseContentRight .desc {
    margin: 4px 0 10px;
  }
  .courseDetailContent .courseContentRight .price {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 1124px) {
  nav {
    justify-content: flex-start;
  }
  nav a.menuMainBtn {
    margin: 0 4% 40px 0;
    max-width: 48%;
  }
  nav a.menuMainBtn:nth-child(2n+2) {
    margin-right: 0;
  }
  nav a.menuMainBtn:nth-child(3n+3) {
    margin-right: auto;
  }
  nav a.menuMainBtn:nth-last-child(2), nav a.menuMainBtn:nth-last-child(3) {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 1100px) {
  main.mainMt {
    margin-top: 0;
  }
  .pageBg {
    background-size: 595px 419px, 638px 301px;
  }
  .tableContent {
    margin: -156px auto 92px auto;
  }
  .tableContent button.filterBtn.mt0 {
    margin-top: 0;
  }
  .tableContent .filterFrame ul.mt-0 {
    margin-top: 0 !important;
  }
  .tableContent .filterFrame li {
    display: inline-block;
  }
  .tableContent .filterFrame li:nth-child(2n+1) {
    margin: 0 2.48% 22px 0;
  }
  .tableContent .filterFrame li:nth-child(2n+2) {
    margin: 0 0 22px 0;
  }
  .tableContent .filterFrame li.mb0 {
    margin-bottom: 0;
  }
  .tableContent .filterFrame li.mobileNot0 {
    margin-bottom: 22px;
  }
  .tableContent .filterFrame .creditCardNoKeyboard {
    padding: 16px;
  }
  .tableContent .filterFrame .creditCardNoKeyboard li.keyboardBtn {
    margin: 0 3.5% 3.5% 0;
    width: 31%;
  }
  .tableContent .filterFrame .creditCardNoKeyboard li.keyboardBtn:nth-child(3n+3) {
    margin-right: 0;
  }
  .tableContent .filterFrame .creditCardNoKeyboard li.keyboardBtn:nth-child(4n+4), .tableContent .filterFrame .creditCardNoKeyboard li.keyboardBtn:nth-child(5n+5) {
    margin-right: 3.5%;
  }
  .tableContent .filterFrame .creditCardNoKeyboard li.keyboardBtn:nth-last-child(1), .tableContent .filterFrame .creditCardNoKeyboard li.keyboardBtn:nth-last-child(2) {
    margin-bottom: 0;
  }
  .tableContent .fieldAdjust li.mobileMb {
    margin-bottom: 0% !important;
  }
}
@media screen and (max-width: 1067px) {
  .tableContent {
    padding: 22px 24px 36px;
  }
  body .RuleContent .titleInfoBox {
    padding: 0 26px;
  }
}
@media screen and (max-width: 1045px) {
  .tableTotalNo {
    flex-direction: column;
  }
  .tableTotalNo .ml-1 {
    margin-left: 0;
    margin-top: 4px;
  }
  .tableTotalNo .mts-1 p.mr-1 {
    margin-right: 0;
  }
  .tableTotalNo .leftContent {
    margin-bottom: 14px;
  }
}
@media screen and (min-width: 1024px) {
  .courseBanner {
    overflow: hidden;
  }
  .courseBanner figure.deskTopShow {
    display: block;
  }
  .courseBanner figure.mobileShow {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  body .tableContent .filterFrame li.mb-1 {
    margin-bottom: 22px !important;
  }
  .courseBanner figure.deskTopShow {
    display: none;
  }
  .courseBanner figure.mobileShow {
    display: block;
  }
  .modalBoxWrapper {
    max-width: 88vw;
  }
  .modalBoxWrapper.fullWidth {
    border-radius: 0;
    left: 0;
    max-width: none;
    top: 0;
    transform: translate(0, 0);
  }
  .modalBoxWrapper .modalForm {
    max-height: 63vh;
  }
  .modalBoxWrapper.smallSize2 {
    max-width: 88vw;
  }
  .modalBoxWrapper .twoFields {
    flex-direction: column;
  }
  .modalBoxWrapper .twoFields .mb-1 {
    margin-bottom: 22px !important;
  }
  .pageBanner h2 {
    font-size: 34px;
    padding: 102px 0 0;
  }
  .bookInfoBox h3 {
    font-size: 24px;
    line-height: 36px;
  }
  .courseContent.sliderPadding {
    padding: 10px 18px 3px 18px;
  }
  .detailContentText h3 {
    font-size: 23px !important;
    line-height: 35px;
  }
  .contentSection .title {
    padding-bottom: 8px;
  }
  .doubleLayout {
    flex-direction: column;
    margin-top: 28px;
  }
  .doubleLayoutRight {
    margin-left: 0;
    margin-top: 40px;
  }
  .indexBannerSliderBox .indexBannerSwiper .deskTopShow {
    display: none;
  }
  .indexBannerSliderBox .indexBannerSwiper .mobileShow {
    display: block;
  }
  .recentNews li img.bookBorder {
    width: 100%;
  }
  .recentNews li.dBlock {
    width: 100%;
  }
  .relatedBooks ul {
    display: flex;
  }
  .relatedBooks ul li {
    width: 100%;
  }
  .relatedBooks ul li.column {
    margin-bottom: 0;
    margin-right: 32px;
  }
  .relatedBooks ul li.column:last-child {
    margin-right: 0;
  }
  .tableContent {
    margin-bottom: 72px;
  }
  .tableContent button.filterBtn.centerPlaced {
    margin: 28px auto 0;
  }
  .tableContent.indexTableContent {
    margin: 22px auto 0;
  }
  .tableContent.loginAndRegisterUI {
    padding: 30px 30px 58px;
  }
  .tableContent.shoppingCart {
    padding: 22px 30px 32px;
  }
  .tableContent .formUI .formRow, .tableContent .formUI .fullColumn {
    margin-bottom: 28px;
  }
  .tableContent .formUI .formRow .groupField, .tableContent .formUI .fullColumn .groupField {
    gap: 28px;
  }
  .tableContent .filterFrame {
    border-radius: 4px;
    padding: 20px 16px 30px;
  }
  .tableContent .filterFrame ul.mt-0 {
    margin-top: 24px !important;
  }
  .tableContent .filterFrame li {
    margin: 0 0 22px 0;
    width: 100%;
  }
  .tableContent .filterFrame li:nth-child(2n+1) {
    margin: 0 0 22px 0;
  }
  .tableContent .filterFrame li:last-child {
    margin-bottom: 0;
  }
  .tableContent .filterFrame li.inputSearchBox {
    width: 100%;
  }
  .tableContent .filterFrame select {
    background-size: 10px 17px;
    padding: 6px 12px;
  }
  .tableContent .fieldAdjust li.mobileMb {
    margin-bottom: 3.8% !important;
  }
  .tableContent .tableOrderFrame {
    max-height: 747px;
  }
  .megaMenu {
    padding: 6%;
  }
  footer nav {
    margin: 0 0 2px;
    order: 1;
  }
  footer p {
    line-height: 33px;
  }
  footer .left {
    order: 2;
  }
  footer .container {
    flex-direction: column;
  }
}
@media screen and (max-width: 1023px) {
  .contentSection .courseList {
    gap: 32px;
  }
  .contentSection .courseItem {
    flex: 0 0 calc((100% - 32px) / 2);
  }
  .contentSection .title .engTitle {
    display: none;
  }
  .contentSection .title h2.zIndex {
    transform: translateY(0);
  }
  .learningPlace {
    margin-top: 48px !important;
  }
  .learningPlace .content {
    gap: 54px;
    margin-top: 22px;
  }
  .tableContent.indexTableContent {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 1000px) {
  .bookList {
    flex: 1 1 100%;
    flex-direction: column;
  }
  .bookItem {
    padding: 20px 20px 21px;
  }
  .bookPicBox {
    width: 35%;
  }
  .pageBg.padFullPageHeight {
    height: 100vh;
  }
}
@media screen and (max-width: 937px) {
  .courseItem.sliderContent {
    flex: 0 0 calc((100% - 0px) / 1);
  }
}
@media screen and (max-width: 920px) {
  .tableContent .tableFrame.scrollHidden {
    overflow: scroll;
  }
  .newsList {
    padding: 15px 15px 19px;
  }
  .newsItem {
    flex-direction: column;
    gap: 8px;
  }
  .newsContent .newsTitle {
    font-size: 24px;
    line-height: 34px;
    padding-bottom: 6px;
  }
  .newsContent .newsDesc {
    font-size: 16px;
    line-height: 28px;
    margin: 6px 0 2px;
  }
  .courseContentRight h2, .courseContentRight h3,
  .detailContentText h2,
  .detailContentText h3 {
    font-size: 24px;
    line-height: 35px;
  }
}
@media screen and (max-width: 768px) {
  .pageHeader img.logo {
    left: 14px;
  }
  .shoppingCartFlow {
    border-radius: 8px;
  }
  .tableContent h2 {
    width: auto;
  }
  .tableContent table.rwdTable th {
    padding: 0;
  }
  .tableContent table.rwdTable th.firstPadding, .tableContent table.rwdTable th.lastPadding {
    padding: 0;
  }
  .tableContent table.rwdTable td.firstPadding, .tableContent table.rwdTable td.lastPadding {
    padding: 0;
  }
  .tableContent .tableFrame {
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .tableContent .tableFrame.borderNone {
    border: none;
  }
  .tableContent .rwdTable thead {
    display: none;
  }
  .tableContent .rwdTable tr {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: block;
    margin-bottom: 24px;
    padding: 12px 14px 14px;
  }
  .tableContent .rwdTable tr:last-of-type {
    margin-bottom: 0;
  }
  .tableContent .rwdTable td {
    border: none;
    display: flex;
    padding: 8px 0;
  }
  .tableContent .rwdTable td:before {
    content: attr(data-label);
    color: #666;
    flex: 0 0 30%;
    font-size: 15px;
    font-weight: bold;
  }
  .tableContent .rwdTable td figure {
    max-width: 120px;
  }
  .tableContent .rwdTable td img.pic {
    border-radius: 6px;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .shoppingCartFlow {
    padding: 10px 10px 14px;
  }
  .shoppingCartFlow ul {
    flex-direction: column;
  }
  .shoppingCartFlow ul li {
    line-height: 26px;
    padding: 4px 0 0 3px;
  }
  .shoppingCartFlow ul li.selected {
    background: none;
    color: #42a280;
    font-weight: 600;
    padding-bottom: 0;
  }
  .learningPlace .content {
    flex-direction: column;
    gap: 14px;
    margin-top: 0;
  }
  .learningPlace .content h3 {
    font-size: 22px;
    line-height: 35px;
    padding-bottom: 14px;
  }
  .learningPlace .content li, .learningPlace .content p {
    line-height: 32px;
  }
  .learningPlace .content .text:not(:first-child) {
    margin-top: 24px;
  }
  .learningPlace .contentRight {
    order: 1;
  }
  .learningPlace .contentLeft {
    order: 2;
    flex: 0 0 100%;
  }
  .learningPlace .title {
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 760px) {
  .contentSection .courseList {
    gap: 30px;
  }
  .contentSection .courseItem {
    flex: 0 0 45.8%;
    margin-bottom: 0;
  }
  .contentSection .courseTitle {
    font-size: 20px !important;
    margin-bottom: 0 !important;
  }
  .contentSection .courseDesc {
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 4px !important;
  }
  .contentSection .courseMeta {
    margin-bottom: 6px !important;
  }
  .courseContent {
    padding: 2px 15px 10px;
  }
  .courseOverlay p {
    font-size: 14px;
    line-height: 24px;
  }
  .learningPlace .content p {
    font-size: 16px;
    line-height: 30px;
  }
  .priceNow span.bestSalesPrice {
    font-size: 17px;
  }
  .tagKeyWordsWrapper {
    margin-bottom: 40px;
  }
  .tableContent.shoppingCart {
    padding: 22px 24px 34px;
  }
}
@media screen and (max-width: 742px) {
  nav p {
    font-size: 24px;
  }
}
@media screen and (max-width: 736px) {
  .pageNoBox p {
    float: none;
    position: static;
  }
  .pageNoBox ul.pagination {
    float: none;
  }
}
@media screen and (max-width: 715px) {
  nav a.menuMainBtn {
    margin: 0 4% 34px 0;
    max-width: 48%;
    padding: 14px 34px;
  }
  nav a.menuMainBtn:nth-last-child(2), nav a.menuMainBtn:nth-last-child(3) {
    margin-bottom: 30px;
  }
  nav p {
    font-size: 22px;
  }
}
@media screen and (max-width: 710px) {
  .tableContent .filterFrame .warningInfo {
    background-size: 36px;
    padding-left: 50px;
  }
  .tableContent p.filterDescribe.show {
    display: block;
    margin: 16px 0;
    position: static;
    transform: translateY(0);
  }
}
@media screen and (max-width: 700px) {
  .bookItem {
    flex-direction: column;
    gap: 14px;
    padding: 16px 16px 20px;
  }
  .bookList {
    gap: 32px;
  }
  .bookPicBox {
    margin-bottom: 0;
    width: 100%;
  }
  .bookInfoBox h3 {
    margin-bottom: 8px;
    max-height: 72px;
    padding-bottom: 6px;
    -webkit-line-clamp: 2;
  }
  .bookDetailContent {
    flex-direction: column;
    gap: 14px;
  }
  .tableContent.loginAndRegisterUI {
    padding: 30px 20px 58px;
  }
  .tableContent .formUI .formRow label {
    font-size: 18px;
  }
  .tableContent .formUI .formRow .input {
    height: 56px;
  }
}
@media screen and (max-width: 645px) {
  nav a.menuMainBtn {
    border-radius: 20px;
    flex-direction: column;
    gap: 21px;
    height: 130px;
    padding: 14px;
  }
  nav p {
    font-size: 19px;
  }
}
@media screen and (max-width: 637px) {
  .footer .goTopBtn {
    padding: 16px 0;
  }
}
@media screen and (max-width: 615px) {
  .modalBoxWrapper.smallSize {
    max-width: 92vw;
  }
  .pageBg.screenHeight {
    height: 100%;
  }
  .contentSection .title h2 {
    font-size: 23px;
  }
  .doubleLayoutLeft h2 {
    font-size: 28px !important;
    line-height: 42px;
    padding-bottom: 18px !important;
  }
  .doubleLayoutLeft li {
    line-height: 20px;
  }
  .doubleLayoutLeft p {
    line-height: 31px;
  }
  .recentNews h4 {
    line-height: 31px;
  }
  .tableContent {
    padding: 14px 16px 30px;
  }
  .tableContent.indexTableContent h2 {
    font-size: 23px;
  }
  .tableContent .filterFrame li.infoField {
    margin: 0 2.48% 2.48% 0;
    width: 100%;
  }
  .tableContent .filterFrame .fieldSmallBox .fieldSmall {
    display: block;
    margin-right: 0%;
    width: 100%;
  }
  .tableContent .filterFrame .fieldSmallBox .fieldSmall:last-child {
    float: none;
  }
  .tableContent .fieldAdjust li:not(.checkBoxUI):nth-last-child(2) {
    margin-bottom: 22px !important;
  }
  .tableContent .fieldAdjust li:last-child {
    margin-bottom: 0 !important;
  }
  .tableContent .fieldAdjust li.storePayCategory {
    margin-bottom: 8.2% !important;
  }
  .tableContent .fieldAdjust li.mobileMb {
    margin-bottom: 3.8% !important;
  }
  .tableContent h2 {
    font-size: 26px;
    padding-bottom: 12px;
  }
  .tableContent h2:before {
    height: 22px;
    transform: translateY(-43%);
  }
  .tableContent .titleInfoBox {
    margin-bottom: 16px;
  }
  .tableContent p.filterDescribe {
    font-size: 15px;
  }
  .tableContent .filterFrame li {
    display: block;
    width: 100%;
  }
  .footer {
    padding: 0 16px 16px 16px;
  }
}
@media screen and (max-width: 600px) {
  .memberOrderContent .orderTableWrapper table {
    min-width: 520px;
  }
}
@media screen and (max-width: 588px) {
  .doubleLayoutLeft .articleInfo {
    flex-direction: column;
  }
  .doubleLayoutLeft .articleInfo li {
    margin-right: 0;
    padding-bottom: 10px;
  }
  .doubleLayoutLeft .articleInfo li:last-child {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 548px) {
  .modalContent .fieldTitle {
    width: 100%;
  }
  .modalContent .fieldTitle:nth-child(2n+1), .modalContent .fieldTitle:nth-child(2n+2) {
    margin: 0 0 28px 0;
  }
  .modalForm {
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 75vh;
  }
  .pageNoBox {
    margin-top: 12px;
  }
  .pageNoBox p {
    margin-bottom: 18px;
    position: static;
    top: 0;
    transform: none;
  }
}
@media screen and (max-width: 500px) {
  .tableContent {
    margin-bottom: 32px;
  }
  .tableContent .rwdTable td:before {
    flex: 0 0 40%;
  }
  .tableContent .ruleFrame .rulePDFDownloadBtn {
    padding: 8px 8px 12px;
    text-align: center;
  }
  .tableContent .ruleFrame .rulePDFDownloadBtn:before {
    display: none;
  }
  .tableContent .filterFrame .creditCardNoKeyboard li.keyboardBtn {
    margin: 0 3.5% 4.7% 0;
  }
  .tableContent .filterFrame .creditCardNoKeyboard input[type=button] {
    font-size: 30px;
    height: 60px;
  }
  .tableContent .formUI .formRow .groupField, .tableContent .formUI .fullColumn .groupField {
    flex-direction: column;
  }
}
@media screen and (max-width: 440px) {
  .tableTotalNo .ml-1 {
    margin-top: 0;
  }
  .tableTotalNo .ml-1 li {
    margin-bottom: 2px;
    margin-top: 0;
  }
  .tableContent .formUI .formRow.mb-s {
    margin-bottom: 14px;
  }
  .tableContent .formUI .formMeta {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}
@media screen and (max-width: 432px) {
  .logionUIBox {
    padding: 24px 26px 34px;
  }
  .tableContent .title .titleInfoBox {
    width: 68%;
  }
}
@media screen and (min-width: 413px) {
  nav p.deskTopShow {
    display: block;
  }
  nav p.mobileShow {
    display: none;
  }
}
@media screen and (max-width: 413px) {
  nav p.deskTopShow {
    display: none;
  }
  nav p.mobileShow {
    display: block;
  }
  .tableContent .formUI .formRow .captcha {
    align-items: flex-start;
    flex-direction: column;
  }
  .relatedBooks ul {
    flex-direction: column;
  }
  .relatedBooks ul li.column {
    margin-bottom: 32px;
    margin-right: 0;
  }
  .relatedBooks ul li.column:last-child {
    margin-bottom: 0;
  }
  .shoppingCartBtnBox {
    flex-direction: column;
  }
  .shoppingCartBtnBox.gap {
    gap: 24px;
  }
  .shoppingCartBtnBox .btn {
    max-width: 176px;
  }
  .shoppingCartFlow.paySuccessNotice {
    flex-direction: column;
  }
  .shoppingCartFlow .paySuccessText {
    margin-left: 0;
    margin-top: 11px;
  }
}
@media screen and (max-width: 402px) {
  .tableContent .filterFrame .storeTotalMoneyBox {
    padding-top: 24px;
  }
  .tableContent .filterFrame .storeTotalMoneyBox h4 {
    position: static;
  }
  .tableContent .filterFrame .storeTotalMoneyBox span.dollars {
    float: none;
  }
  .tableContent .filterFrame .creditCardNoKeyboard input[type=button] {
    height: 56px;
  }
}
@media screen and (max-width: 395px) {
  nav p {
    font-size: 18px;
  }
  .tableContent h2 {
    padding-left: 0;
  }
  .tableContent h2:before {
    display: none;
  }
  .diagnosisResult ul.dFlex {
    display: block;
  }
  footer nav a {
    margin-right: 0;
    text-align: left;
    width: 50%;
  }
}
@media screen and (max-width: 384px) {
  .checkBoxTitle li.checkBoxUI {
    margin-bottom: 14px !important;
    margin-right: 14px !important;
  }
  .orderPayMethod .paymentTypeTabs {
    gap: 17px;
  }
}
@media screen and (max-width: 375px) {
  .tableContent button.filterBtn {
    width: 136px;
  }
  .tableContent h2 {
    width: auto;
  }
}
@media screen and (max-width: 374px) {
  .booksRecommendSwiper .sliderContent,
  .booksSalesSwiper .sliderContent {
    flex: 0 0 100% !important;
  }
  .tableContent .formUI .submitBtnWrap.twoBtnBox {
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    max-width: 154px;
    width: 100%;
  }
}
@media screen and (max-width: 370px) {
  .courseContent.sliderPadding h3.courseTitle {
    margin-bottom: 6px;
  }
  .courseContent.sliderPadding .priceBox {
    flex-direction: column;
  }
  .courseContent.sliderPadding .priceOld {
    margin-left: 0;
  }
  footer nav a.pageTopBtn:after {
    display: none;
  }
}
@media screen and (max-width: 355px) {
  .pageBg {
    padding: 54px 0 80px;
  }
  .loginBox {
    width: 282px;
  }
  .loginBox .loginForm {
    max-width: 282px;
  }
}
@media screen and (max-width: 342px) {
  .tableTotalNo .leftContent {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 10px;
  }
  .tableTotalNo .monthBtnContent {
    margin-bottom: 10px;
    margin-right: 0;
  }
  .tableContent .filterFrame .checkBoxUIBox {
    display: block;
  }
}