/* 內文字 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,800&display=swap");

:root {
  /* 顏色 */
  --LightBlueGray: #c5d0ed;
  --BlueGray: #9ba9ce;

  --DarkGray: #535251;
  --Gray: #777777;
  --Dimgray: #9f9f9f;
  --FeatherGray: #e2e2e2;
  --VeryLightGray: #f8f8f8;

  --PinkLogo: #ed4c7c;
  --Pinkmajor: #ff82a7;
  --PinkLight: #ffbcd0;
  --PinkPiggy: #ffe1ea;
  --PinkVeryLight: #fff4f8;

  --green: #b9ea7b;
  --PaleBlue: #eef3ff;

  /* RWD斷點 */
  --mobile-width: 360px;
  --tablet-width: 710px;
  --desktop-m-width: 1024px;
  --desktop-width: 1440px;
  --desktop-max-width: 1920px;

  /* 陰影 */
  --shadow-light-gray: 0px 4px 10px rgba(196, 194, 193, 0.4);
}

/* ================================= 課程預覽模組============================== */

.module_preview {
  font-family:
    "Roboto",
    "Noto Sans TC",
    -apple-system,
    Segoe UI,
    Hiragino Sans GB,
    Microsoft YaHei,
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol;
  line-height: 1.5;
  color: var(--DarkGray);
}

/* .module_preview *{ border: 1px solid #999;} */
.module_preview > .module_preview_inner {
  max-width: 800px;
  margin: 0 auto;
}

/* global */
.module_preview img {
  display: block;
  max-width: 100%;
}
.module_preview a {
  color: var(--DarkGray);
  transition: all 0.3s linear;
}

@media (max-width: 710px) {
  .module_preview {
    padding: 0px;
  }
}

/* 提示 */
label.t_tooltips {
  background: #0ead74;
  color: #fff;
  font-size: 14px;
  line-height: 26px;
  position: fixed;
  top: 80px;
  left: 50%;
  padding: 10px;
  text-align: center;
  border-radius: 4px;
  min-width: 300px;
  display: none;
  box-shadow: 0 4px 10px rgba(196, 194, 193, 0.4);
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  z-index: 999999999;
}

label.t_tooltips:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../images/newBooking/icon/Icon_collection.svg) no-repeat
    center / 24px auto;
  display: inline-block;
  margin-right: 10px;
  vertical-align: -6px;
}

label.t_tooltips.open {
  display: block;
}
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(-100px) translateX(-50%);
    transform: translateY(-100px) translateX(-50%);
  }
  100% {
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(-100px) translateX(-50%);
    transform: translateY(-100px) translateX(-50%);
  }
  100% {
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
  }
}

/* 按鈕 =========== */
.module_preview .btn_wrap {
  text-align: center;
}
.module_preview .btn {
  display: inline-block;
  vertical-align: middle;
  border-radius: 52px;
  transition: all 0.2s linear;
  border: 1px solid red;
}
.module_preview .btn._sm {
  min-height: 40px;
  line-height: 40px;
  font-weight: 500;
  padding: 0 20px;
}
.module_preview .btn._tiny {
  min-height: 35px;
  line-height: 35px;
  font-weight: 500;
  padding: 0 20px;
}

/* pink */
.module_preview .btn._pink {
  background-color: var(--PinkLogo);
  color: #fff;
  box-shadow: 0px 4px 10px rgba(237, 76, 124, 0.3);
}
.module_preview .btn._pink:hover {
  background-color: var(--Pinkmajor);
}

/* outline */
.module_preview .btn._outline {
  color: var(--Gray);
  border: 1px solid var(--LightBlueGray);
}
.module_preview .btn._outline:hover {
}
.module_preview .btn._outline.active {
}

/* default */
.module_preview .btn._default {
}

/* 教材標題 */
.module_preview .preview_title_block {
  margin-bottom: 15px;
}
.module_preview .preview_title_block .tag {
  font-size: 16px;
}
.module_preview .preview_title_block .levelTitle {
  font-size: 18px;
  padding: 30px 40px 10px;
  display: block;
  font-weight: 400;
  color: #333;
  text-align: left;
}
.module_preview .preview_title_block .preview_title {
  font-size: 28px;
  font-weight: 700;
}

@media (max-width: 710px) {
  .module_preview .preview_title_block {
    padding: 20px;
    margin-bottom: 0;
  }
  .module_preview .preview_title_block .preview_title {
    font-size: 20px;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 頁籤 */
.module_preview .preview_tab_block {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.module_preview .preview_tab_block > .tab_title {
  display: flex;
  justify-content: space-between;
  border-radius: 8px 8px 0 0;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid var(--FeatherGray);
  padding-top: 10px;
}
.module_preview .preview_tab_block > .tab_title a {
  flex: 1;
  padding: 20px 20px 8px;
  color: var(--Gray);
  font-size: 16px;
  font-weight: 400;
  border-bottom: 3px solid transparent;
}
.module_preview .preview_tab_block > .tab_title a.active {
  color: var(--DarkGray);
  font-weight: 500;
  border-bottom: 3px solid #003bff;
}
.module_preview .preview_tab_block > .tab_content_block {
  padding: 40px;
  padding-bottom: 0px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.module_preview .preview_tab_block > .tab_title + .tab_content_block {
  border-radius: 0 0 8px 8px;
}
.module_preview .preview_tab_block > .tab_content_block > .content {
  display: none;
}
.module_preview .preview_tab_block > .tab_content_block > .content.itnCourse,
.module_preview .preview_tab_block > .tab_content_block > .content.ntnCourse {
  margin-bottom: 50px;
}
.module_preview .preview_tab_block > .tab_content_block > .content.active {
  display: block;
  animation: fadeIn 0.3s linear both;
}

@media (max-width: 710px) {
  .module_preview .preview_tab_block > .tab_content_block {
    padding: 30px 20px 0px 20px;
  }
  .module_preview .preview_tab_block > .tab_title a {
    font-size: 18px;
  }
}

/* 教材大圖輪播 */
.module_preview .teaching_material_slider {
}
.module_preview .teaching_material_slider .mainSwiper_wrap {
  position: relative;
  text-align: center;
}
.module_preview .teaching_material_slider .mainSwiper_wrap .materialZoomIn {
  width: 30px;
  height: 30px;
  background: url(../../images/newBooking/zoom_in.svg) no-repeat center / 20px
    auto;
  position: absolute;
  right: -5px;
  bottom: 10px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.module_preview
  .teaching_material_slider
  .mainSwiper_wrap
  .materialZoomIn:hover {
  opacity: 0.5;
}
.module_preview .teaching_material_slider .mainSwiper {
  border: 1px solid var(--FeatherGray);
  border-radius: 10px;
}
.module_preview .teaching_material_slider .mainSwiper .swiper-slide {
}
.module_preview .teaching_material_slider .mainSwiper .swiper-slide img {
  border-radius: 0px;
}
/* 分頁 */
.module_preview .teaching_material_slider .swiper-pagination-fraction {
  display: inline-block;
  width: auto;
  background: #eef3ff;
  border-radius: 14px;
  padding: 4px 15px;
  font-size: 14px;
  color: #555;
  position: static;
  margin: 10px auto;
}
.module_preview
  .teaching_material_slider
  .swiper-pagination-fraction
  .swiper-pagination-current {
}
.module_preview
  .teaching_material_slider
  .swiper-pagination-fraction
  .swiper-pagination-total {
}

/* 方向鍵 */
.module_preview .teaching_material_slider .swiper-button-prev,
.module_preview .teaching_material_slider .swiper-button-next {
  width: 40px;
  height: 40px;
  color: var(--Gray);
  border-radius: 100px;
  background-color: #fff;
  box-shadow: var(--shadow-light-gray);
  background-image: none;
}
.module_preview .teaching_material_slider .swiper-button-prev::after,
.module_preview .teaching_material_slider .swiper-button-next::after {
  font-size: 16px;
}
.module_preview .teaching_material_slider .swiper-button-prev {
  left: -20px;
}
.module_preview .teaching_material_slider .swiper-button-next {
  right: -20px;
}
.materialPreviewWrp .swiper-button-next.swiper-button-disabled,
.materialPreviewWrp .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}

.teaching_material_slider .swiper-button-next:after,
.teaching_material_slider .swiper-rtl .swiper-button-prev:after {
  content: "next";
}

@media (max-width: 710px) {
  .module_preview .teaching_material_slider .swiper-button-prev,
  .module_preview .teaching_material_slider .swiper-button-next {
    width: 20px;
    height: 20px;
    background: none;
    box-shadow: none;
  }
  .module_preview
    .teaching_material_slider
    .swiper-button-prev.swiper-button-disabled,
  .module_preview
    .teaching_material_slider
    .swiper-button-next.swiper-button-disabled {
    display: none;
  }
}

/* 教材縮圖輪播 */
.module_preview .teaching_material_slider .thumb_swiper {
  background-color: var(--FeatherGray);
  padding: 20px;
  margin-left: -40px;
  margin-right: -40px;
}
.module_preview .teaching_material_slider .thumb_swiper.start::before,
.module_preview .teaching_material_slider .thumb_swiper.end::after {
  display: block;
  content: "";
  width: 100px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
}
.module_preview .teaching_material_slider .thumb_swiper.start::before {
  left: 0;
  background: linear-gradient(
    90deg,
    #e2e2e2 40%,
    rgba(226, 226, 226, 0.8) 70%,
    rgba(196, 196, 196, 0) 100%
  );
}
.module_preview .teaching_material_slider .thumb_swiper.end::after {
  right: 0;
  background: linear-gradient(
    -90deg,
    #e2e2e2 40%,
    rgba(226, 226, 226, 0.8) 70%,
    rgba(196, 196, 196, 0) 100%
  );
}

.module_preview .teaching_material_slider .thumb_swiper .swiper-slide {
  cursor: pointer;
  opacity: 1;
}
.module_preview .teaching_material_slider .thumb_swiper .swiper-slide img {
  border-radius: 4px;
  border: 2px solid transparent;
}
.module_preview
  .teaching_material_slider
  .thumb_swiper
  .swiper-slide.swiper-slide-thumb-active
  img {
  border: 2px solid #003bff;
}
.module_preview .teaching_material_slider .thumb_swiper .swiper-button-prev,
.module_preview .teaching_material_slider .thumb_swiper .swiper-button-next {
  width: 80px;
  height: 100%;
  border-radius: 0px;
  margin-top: 0px;
  box-shadow: none;
  top: 0;
}
.module_preview .teaching_material_slider .thumb_swiper .swiper-button-prev {
  left: 0px;
  background: linear-gradient(
    90deg,
    #e2e2e2 40%,
    rgba(226, 226, 226, 0.8) 70%,
    rgba(196, 196, 196, 0) 100%
  );
}
.module_preview .teaching_material_slider .thumb_swiper .swiper-button-next {
  right: 0px;
  background: linear-gradient(
    -90deg,
    #e2e2e2 40%,
    rgba(226, 226, 226, 0.8) 70%,
    rgba(196, 196, 196, 0) 100%
  );
}
.module_preview
  .teaching_material_slider
  .thumb_swiper
  .swiper-button-prev.swiper-button-disabled {
  display: none;
}
.module_preview
  .teaching_material_slider
  .thumb_swiper
  .swiper-button-next.swiper-button-disabled {
  display: none;
}

@media (max-width: 710px) {
  .module_preview .teaching_material_slider .thumb_swiper {
    margin-left: -20px;
    margin-right: -20px;
  }
  .module_preview .teaching_material_slider .thumb_swiper .swiper-button-prev,
  .module_preview .teaching_material_slider .thumb_swiper .swiper-button-next {
    width: 50px;
  }
}

/* 本課單字 */
.module_preview .vocabulary_block {
  padding-bottom: 40px;
}

/* 功能 */
.module_preview .vocabulary_block .operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}
.module_preview .vocabulary_block .operate a {
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
}
.module_preview .vocabulary_block .operate a.collapse_all:hover {
  color: #03328d;
}
/* 收合 */
.module_preview .vocabulary_block .operate a.collapse_all.open {
}
.module_preview .vocabulary_block .operate a.collapse_all.close {
  display: none;
}
/* 收藏 */
.module_preview .vocabulary_block .operate a.collect_all {
  padding-left: 40px;
  background: url(../../images/newBooking/bookmark_active.svg) no-repeat 20px
    10px / 16px auto;
}
.module_preview .vocabulary_block .operate a.collect_all:hover {
  background-image: url(../../images/newBooking/bookmark_pink_active.svg);
  color: #03328d;
}
/* 加入/取消 */
.module_preview .vocabulary_block .operate a.collect_all.cancel {
  display: none;
  background: url(../../images/newBooking/bookmark.svg) 20px 10px no-repeat;
  background-size: 16px;
}
.module_preview .vocabulary_block .operate a.collect_all.cancel:hover {
  background-image: url(../../images/newBooking/bookmark_pink.svg);
}
@media (max-width: 768px) {
  .module_preview .vocabulary_block .operate a.collect_all:hover {
    background-image: url(../../images/newBooking/icon/icon_heart_solid.svg);
    color: var(--Gray);
  }
  .module_preview .vocabulary_block .operate a.collect_all.cancel:hover {
    background-image: url(../../images/newBooking/icon/icon_collect_teacher.svg);
  }
}

/* 單字列表 */
.module_preview .vocab_accordion_list {
}
.module_preview .vocab_accordion_list > .item {
}

.module_preview .vocab_accordion_list > .item .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--PaleBlue);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.3s;
}

.module_preview .vocab_accordion_list > .item.hide .title {
  background: #f2f2f2;
}

.module_preview .vocab_accordion_list > .item .title h3 {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  vertical-align: middle;
  letter-spacing: 0.1px;
}

.module_preview .vocab_accordion_list > .item .title i {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../../images/newBooking/icon/icon_arrow.svg) center center
    no-repeat;
  transform: rotate(270deg);
}
.module_preview .vocab_accordion_list > .item .btn_collect {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../../images/newBooking/bookmark.svg) center center no-repeat;
  background-size: contain;
  transition: none;
}

.module_preview .vocab_accordion_list > .item .btn_collect.active {
  background-image: url(../../images/newBooking/bookmark_active.svg);
}
.module_preview .vocab_accordion_list > .item .content {
  margin-bottom: 20px;
  padding: 0 10px;
}

@media (max-width: 710px) {
  .module_preview .vocab_accordion_list > .item .title h3 {
    font-size: 20px;
  }
}

/* tag */
.module_preview .vocab_tag {
  display: inline-block;
  vertical-align: middle;
  background-color: var(--PaleBlue);
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle;
  padding: 2px 8px;
  border-radius: 12px;
}
.module_preview .vocab_tag + span {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 400;
  color: var(--Gray);
}

/* 收合狀態 */
.module_preview .vocab_accordion_list > .item.hide .pre_vocab {
  display: block;
}
.module_preview .vocab_accordion_list > .item.hide .vocab_content {
  display: none;
}
.module_preview .vocab_accordion_list > .item.hide .title i {
  transform: rotate(90deg);
}
.module_preview .vocab_accordion_list > .item .pre_vocab {
  display: none;
}
.module_preview .vocab_accordion_list > .item .vocab_content {
  display: block;
}

/* 讀音 */
.module_preview .vocab_voice_block {
  display: flex;
  margin-bottom: 10px;
}
.module_preview .vocab_voice_block .__vocab_voice {
  display: flex;
  align-items: center;
  justify-content: center;
}
.module_preview .vocab_voice_block .__vocab_voice:not(:nth-last-of-type(1)) {
  margin-right: 20px;
}
.module_preview .vocab_voice_block .__vocab_voice b {
  font-size: 14px;
  margin-right: 2px;
}
.module_preview .vocab_voice_block .__vocab_voice span {
  font-size: 14px;
  font-weight: 400;
  color: var(--Dimgray);
  margin: 0 2px;
}

.module_preview .vocab_voice_block .__vocab_voice .play_voice {
  width: 30px;
  height: 40px;
  mask: url(../../images/newBooking/icon_volume.svg) no-repeat center / 24px
    auto;
  -webkit-mask: url(../../images/newBooking/icon_volume.svg) no-repeat center /
    24px auto;
  background-color: #305fff;
  transition: background 0.4s;
  background-image: none;
  cursor: pointer;
}

.module_preview .vocab_voice_block .__vocab_voice .play_voice:hover {
  background-color: #0037cc;
}

.module_preview .vocab_voice_block .__vocab_voice .play_voice.is-play {
  mask: url(../../images/newBooking/icon_volume_active.svg) no-repeat center /
    24px auto;
  -webkit-mask: url(../../images/newBooking/icon_volume_active.svg) no-repeat
    center / 24px auto;
  background-color: #0037cc;
}

@media (max-width: 425px) {
  .module_preview .vocab_voice_block {
    flex-direction: column;
    align-items: flex-start;
  }
  .module_preview .vocab_voice_block .__vocab_voice:not(:nth-last-of-type(1)) {
    margin-right: 0px;
    margin-bottom: 8px;
  }
}

/* 字詞內容 */
.module_preview .vocab_block ol {
  padding-left: 20px;
}
.module_preview .vocab_block ol > li {
  list-style-type: decimal;
  margin-bottom: 8px;
}
.module_preview .vocab_block ol > li h3 {
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
}
.module_preview .vocab_block ol > li p {
  font-weight: 400;
  font-size: 16px;
  color: var(--Gray);
  margin: 2px 0 8px;
  letter-spacing: 0.1px;
}
.module_preview .vocab_block .vocab_tag {
  margin-bottom: 10px;
}

/* 例句 */
.module_preview .vocab_block .vocab_sample {
  padding: 10px;
  background-color: var(--VeryLightGray);
  border-radius: 8px;
}
.module_preview .vocab_block .vocab_sample span {
  font-size: 16px;
  color: #9ba9ce;
  margin-bottom: 5px;
  display: block;
}
.module_preview .vocab_block .vocab_sample > ul {
  padding-left: 20px;
}
.module_preview .vocab_block .vocab_sample > ul > li {
  list-style-type: disc;
  color: var(--Gray);
  font-size: 16px;
  letter-spacing: 0.1px;
}
.module_preview .vocab_block .vocab_sample > ul > li p {
}

/* ======================================== 老師資訊 ==================================== */

/* 版型 */
.module_teacher_wrapper {
  color: var(--DarkGray);
  font-family:
    "Roboto",
    "Noto Sans TC",
    -apple-system,
    Segoe UI,
    Hiragino Sans GB,
    Microsoft YaHei,
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol;
  line-height: 1.5;
  background: #f0f0f3;
}
.module_teacher_wrapper a {
  color: var(--PinkLogo);
}
.module_teacher_wrapper .module_teacher_inner {
  max-width: 800px;
  margin: 0 auto;
}
/* global */
.module_teacher_wrapper img {
  max-width: 100%;
}
/* label */
.module_teacher_wrapper .studentFeedbackTag {
  padding: 0 10px;
}
.module_teacher_wrapper .teacher_introduce_wrap .__label,
.module_teacher_wrapper .studentFeedbackTag p {
  color: #8ba1f1;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
}
.module_teacher_wrapper .studentFeedbackTag p {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.module_teacher_wrapper .studentFeedbackTag p button {
  width: 16px;
  height: 16px;
  mask: url(../../images/newBooking/info_icon.svg) no-repeat center / 100% auto;
  -webkit-mask: url(../../images/newBooking/info_icon.svg) no-repeat center /
    100% auto;
  background-color: #8ba1f1;
  cursor: pointer;
}
/* 分隔線 */
.module_teacher_wrapper .teacher_introduce_wrap .t_divider {
  background-color: #ddd;
  width: 100%;
  height: 1px;
  margin: 20px 0;
}

/* 按鈕 =========== */
.module_teacher_wrapper .t_btn_wrap {
  text-align: center;
}
.module_teacher_wrapper .t_btn_wrap .t_btn {
  display: inline-block;
  vertical-align: middle;
  border-radius: 52px;
  transition: background-color 0.2s linear;
}
.module_teacher_wrapper .t_btn_wrap .t_btn._sm {
  min-height: 40px;
  line-height: 40px;
  font-weight: 500;
  padding: 0 20px;
}
.module_teacher_wrapper .t_btn_wrap .t_btn.xs {
}

/* pink */
.module_teacher_wrapper .t_btn_wrap .t_btn._pink {
  background: #003bff;
  color: #fff;
  cursor: pointer;
}
.module_teacher_wrapper .t_btn_wrap .t_btn._pink:hover {
  background: #112f82;
}

.module_teacher_wrapper .t_btn_wrap .t_btn._pink.disable,
.module_teacher_wrapper .t_btn_wrap .t_btn._pink.disable:hover {
  background: #f0f0f0;
  box-shadow: none;
  color: #aaa;
  cursor: default;
  font-weight: 400;
}

/* outline */
.module_teacher_wrapper .t_btn_wrap .t_btn._outline {
  color: var(--Gray);
  border: 1px solid var(--LightBlueGray);
}
.module_teacher_wrapper .t_btn_wrap .t_btn._outline:hover {
}
.module_teacher_wrapper .t_btn_wrap .t_btn._outline.active {
}

/* default */
.module_teacher_wrapper .t_btn_wrap .t_btn._default {
}

/* 區塊白底圓角背景  =========== */
.module_teacher_wrapper .t_block_title {
  font-size: 18px;
  font-weight: 700;
  color: var(--DarkGray);
  margin-bottom: 10px;
}
.module_teacher_wrapper .t_block {
  padding: 40px;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 30px;
}
.module_teacher_wrapper .t_block._pd_medium {
  padding: 40px;
}

@media (max-width: 710px) {
  .module_teacher_wrapper .t_block._pd_medium {
    padding: 25px 20px 30px;
  }
  .module_teacher_wrapper .t_block {
    padding: 20px;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .__label {
    margin-bottom: 5px;
  }
  .module_teacher_wrapper
    .teacher_introduce_wrap
    .t_intro_summary
    .__summary
    .__summary_text
    p {
    font-size: 16px;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_intro_content {
    padding: 0;
  }
}

/* 老師資訊  =========== */
.module_teacher_wrapper .teacher_introduce_wrap {
  position: relative;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_btn_wrap {
  position: absolute;
  right: 25px;
  top: 25px;
}
/* 收藏老師 */
.module_teacher_wrapper .teacher_introduce_wrap .t_btn_wrap .t_collect {
  padding: 0 30px !important;
  background: url(../../images/newBooking/icon/icon_check.svg);
  background-repeat: no-repeat;
  background-position: left center;
  transition: all 0.2s linear;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_btn_wrap .t_collect.active {
  padding-left: 40px !important;
  padding-right: 20px !important;
  background: url(../../images/newBooking/icon/icon_check.svg) #03328d;
  background-repeat: no-repeat;
  background-position: 12px center;
  color: #fff !important;
  border: 1px solid #03328d !important;
}

.module_teacher_wrapper .teacher_introduce_wrap .t_btn_wrap .t_collect_m {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 100px;
  border: 1px solid #ddd;
  background: url(../../images/newBooking/icon/icon_heart_outline.svg) center
    center no-repeat;
  transition: all 0.2s linear;
}

.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_btn_wrap
  .t_collect_m.active {
  background: url(../../images/newBooking/icon/icon_heart_white.svg) center
    center no-repeat;
  border-color: #ee79ee;
  background-color: #ee79ee;
}

@media (max-width: 710px) {
  .module_teacher_wrapper .teacher_introduce_wrap .t_btn_wrap .t_collect {
    display: none;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_btn_wrap .t_collect_m {
    display: block;
  }
}

/* 頭像 */
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.module_teacher_wrapper .teacher_introduce_wrap .__context {
  width: calc(100% - 130px);
}
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__avatar {
  width: 90px;
  height: 90px;
  border-radius: 100px;
  overflow: hidden;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__avatar img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
/* 名字 */
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__name {
  color: #555;
  font-size: 28px;
  font-weight: 700;
  padding-right: 70px;
  font-family: Roboto;
  margin-bottom: 5px;
}
.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_avatar
  .__name
  .icon_country {
  width: 26px;
  height: 20px;
  object-fit: contain;
  margin-right: 5px;
  vertical-align: middle;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .country {
  font-size: 14px;
  color: #555;
  font-weight: 400;
  margin-bottom: 5px;
}
/* 分數 */
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__rate::before {
  content: "";
  width: 18px;
  height: 18px;
  mask: url(../../images/newBooking/star_ico.svg) no-repeat center / 100% auto;
  -webkit-mask: url(../../images/newBooking/star_ico.svg) no-repeat center /
    100% auto;
  background-color: #555;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__rate {
  color: #555;
  font-size: 18px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 5px;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__rate span {
  color: #555;
  font-size: 12px;
  vertical-align: middle;
  font-weight: 400;
}
/* 標籤 */
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__label {
  padding: 2px 8px;
  padding-left: 26px;
  background: url(../../images/newBooking/thumbs_up.svg) #edf1ff no-repeat 7px
    center / 18px auto;
  font-size: 14px;
  color: #003bff;
  border-radius: 4px;
  margin-bottom: 0;
  border: 1px solid #003bff;
  font-family: Roboto;
}

@media (max-width: 710px) {
  .module_teacher_wrapper .teacher_introduce_wrap .__context {
    width: calc(100% - 70px);
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__avatar {
    width: 60px;
    height: 60px;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__name {
    font-size: 22px;
    margin: 5px 0;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_avatar .country {
    margin-bottom: 20px;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_avatar .teacherRate {
    margin-left: -60px;
  }
  .module_teacher_wrapper
    .teacher_introduce_wrap
    .t_avatar
    .__name
    .icon_country {
    width: 18px;
    height: 14px;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_avatar {
    margin-bottom: 20px;
  }
}

/* 老師簡介 =========== */
.module_teacher_wrapper .teacher_introduce_wrap .t_intro_content {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_intro_content .item {
  flex: 1;
  margin-right: 20px;
}

.module_teacher_wrapper .teacher_introduce_wrap .t_intro_content .item._full {
  width: 100%;
  flex: none;
  margin-top: 20px;
  margin-right: 0;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_intro_content .__text {
}
.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_intro_content
  .__text
  .__year {
  font-size: 12px;
  color: #777;
  font-family: "Roboto";
  font-weight: 300;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_intro_content .__text p {
  font-size: 16px;
}
.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_intro_content
  .__text
  p:not(:nth-last-of-type(1)) {
  margin-bottom: 10px;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_intro_summary {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_intro_summary .__video {
  margin-right: 30px;
  border-radius: 4px;
  overflow: hidden;
}

.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_intro_summary
  .__video
  video {
  height: 200px;
  display: block;
}
.module_teacher_wrapper .teacher_introduce_wrap .t_intro_summary .__summary {
  flex: 1;
}
/* 截字 */
.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_intro_summary
  .__summary
  .smrVisible {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-overflow: clip;
  word-break: break-word;
}

.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_intro_summary
  .__summary
  .__summary_text
  p {
  line-height: 24px;
}

.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_intro_summary
  .__summary
  .__summary_text.readMore {
  display: block;
}

.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_intro_summary
  .__summary
  .t_more_link {
  color: #003bff;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
  display: block;
  margin-top: 5px;
}

@media (max-width: 710px) {
  .module_teacher_wrapper {
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_intro_content {
    width: 100%;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_intro_content .item {
    flex: none;
    width: 100%;
  }
  .module_teacher_wrapper
    .teacher_introduce_wrap
    .t_intro_content
    .item:not(:nth-last-of-type(1)) {
    margin-right: 0;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_intro_summary .__video {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    margin-right: 0px;
    overflow: hidden;
    margin-bottom: 15px;
  }
  .module_teacher_wrapper
    .teacher_introduce_wrap
    .t_intro_summary
    .__video
    video {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .module_teacher_wrapper
    .teacher_introduce_wrap
    .t_intro_summary
    .__summary
    .__summary_text {
    font-size: 18px;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_intro_content .__text {
    margin-bottom: 15px;
  }
  .module_teacher_wrapper .teacher_introduce_wrap .t_intro_content .item._full {
    margin-top: 0;
  }
}

/* 月曆 =========== */
.module_teacher_wrapper .teacher_calendar_wrap .t_calendar {
  flex-direction: column;
  margin-bottom: 20px;
}

.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .__time_zone {
  text-align: center;
  margin-bottom: 20px;
}

.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .__currentTime {
  display: inline-block;
  font-size: 12px;
  color: var(--Gray);
  text-align: center;
}

/* 年月=========== */
.module_teacher_wrapper .teacher_calendar_wrap .__year_month {
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  color: var(--DarkGray);
}

/* 左右箭頭 */
.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .__panel_operate {
  width: 95%;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -50px;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_operate
  .__t_calendar_btn {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_operate
  .__t_calendar_btn.__prev {
  background: url(../../images/newBooking/icon/icon_arrow.svg) center center
    no-repeat;
  transform: rotate(180deg);
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_operate
  .__t_calendar_btn.__next {
  background: url(../../images/newBooking/icon/icon_arrow.svg) center center
    no-repeat;
}

.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .__panel_content {
  width: 100%;
  margin: 20px 0;
  table-layout: fixed;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  thead
  th {
  color: #555;
  font-size: 16px;
  font-weight: 400;
  padding-bottom: 5px;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  thead
  small {
  font-size: 12px;
  font-weight: 400;
  color: #aaa;
  display: block;
  margin-top: 3px;
}
.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .courseMonth {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #555;
  margin-bottom: 35px;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  thead
  .today {
  color: #003bff;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  thead
  .today
  small {
  color: #003bff;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  td.__period {
  width: 50px;
  text-align: center;
  vertical-align: middle;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  td.__period
  p {
  color: #555;
  font-size: 14px;
  font-weight: 400;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  td.__period
  em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--Dimgray);
}

.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  .__date {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  margin: 5px 5px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #e2e2e2;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  .__date
  p {
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  .__date
  em {
  display: block;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  .__date.__open {
  background-color: #bbcbff;
  color: #fff;
  border-color: #bbcbff;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .__panel_content
  .__date.__full {
  background-color: var(--FeatherGray);
  color: var(--Gray);
  font-size: 12px;
  border-color: var(--FeatherGray);
}

/* loading */

.t_loading-content {
  text-align: center;
  display: none;
}
.t_loading-content.show {
  display: block;
}
.t_loading-content span {
  font-size: 14px;
  color: gray;
  display: block;
}

.t_loading-ico {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border: 3px solid #efefef;
  border-radius: 50%;
  border-top-color: #03328d;
  display: inline-block;
  animation: spin 650ms ease infinite;
}
.t_loading-ico.no-border {
  border: 3px solid transparent;
  border-top-color: #2bb98b;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .module_teacher_wrapper .teacher_calendar_wrap .t_calendar .__panel_operate {
    width: 100%;
    position: relative;
    right: -15px;
  }
}

@media (max-width: 710px) {
  .module_teacher_wrapper .teacher_calendar_wrap .t_calendar .__time_zone {
    margin-bottom: 20px;
  }
  .module_teacher_wrapper .teacher_calendar_wrap .t_calendar .__currentTime {
    font-size: 16px;
  }
  .module_teacher_wrapper .teacher_calendar_wrap .__year_month {
    font-size: 18px;
  }

  .module_teacher_wrapper .teacher_calendar_wrap .t_btn_wrap .t_btn {
    display: block;
  }
  .module_teacher_wrapper
    .teacher_calendar_wrap
    .t_calendar
    .__panel_content
    td.__period {
    width: 36px;
  }
  .module_teacher_wrapper
    .teacher_calendar_wrap
    .t_calendar
    .__panel_content
    td.__period
    p {
    display: none;
  }
  .module_teacher_wrapper
    .teacher_calendar_wrap
    .t_calendar
    .__panel_content
    .__date {
    height: 34px;
  }
}

/* 月曆標示 */
.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .date_info {
  padding: 0 10px;
}
.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .date_info .item {
  display: inline-block;
}
.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .date_info .item p {
  font-size: 12px;
  color: var(--Gray);
}
.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .date_info .item em {
  display: inline-block;
  width: 20px;
  height: 10px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 4px;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .date_info
  .item:not(:nth-last-of-type(1)) {
  margin-right: 15px;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .date_info
  .item
  em.__type1 {
  background: #bbcbff;
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .date_info
  .item
  em.__type2 {
  background-color: var(--FeatherGray);
}
.module_teacher_wrapper
  .teacher_calendar_wrap
  .t_calendar
  .date_info
  .item
  em.__type3 {
  border: 1px solid var(--Gray);
}
.module_teacher_wrapper .teacher_calendar_wrap .t_calendar .date_info .item p {
  display: inline-block;
  vertical-align: middle;
}

.module_teacher_wrapper .t_calendar ~ .unavailable {
  font-size: 14px;
  color: #ee5a50;
  text-align: center;
  padding-top: 20px;
}

.module_teacher_wrapper .t_calendar ~ .unavailable::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../../images/newBooking/tips_icon_red.svg) no-repeat center /
    18px auto;
  flex-shrink: 0;
  margin-right: 5px;
  display: inline-block;
  vertical-align: -5px;
}

/* ================================= 會員中心組件 ============================== */
.bookClassBlock {
  max-width: 800px;
  margin: 0 auto;
}
.bookClassBlock .level {
  font-size: 16px;
  color: #535251;
  margin-bottom: 10px;
}
.bookClassBlock h2 {
  font-size: 28px;
  color: #535251;
  margin-bottom: 15px;
  font-weight: 700;
}
.bookClassBlock .timeBlock {
  margin-bottom: 15px;
  color: #535251;
}
.bookClassBlock .timeBlock .date {
  color: #535251;
  font-size: 16px;
  font-weight: 400;
  margin-right: 5px;
  vertical-align: 0;
}
.bookClassBlock .timeBlock .time {
  color: #535251;
  font-size: 18px;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: 0;
}
.bookClassBlock .duringTime {
  padding-left: 20px;
  color: #535251;
  font-size: 16px;
  background: url(../../images/newBooking/icon/Icon_clock.svg) left center
    no-repeat;
  margin-bottom: 15px;
}
.bookClassBlock .BlockWrap {
  background: #fff;
  border-radius: 8px;
}
.bookClassBlock .classInfoWrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
}
.bookClassBlock .classInfoWrap + .buttonWrap {
  padding: 0 40px 40px;
}
.bookClassBlock .classInfoWrap .cover {
  flex-shrink: 0;
  width: 300px;
  height: 223px;
  border-radius: 4px;
  border: 1px solid #e2e2e2;
  margin-right: 15px;
  overflow: hidden;
}
.bookClassBlock .classInfoWrap .cover img {
  display: Block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bookClassBlock .classInfoWrap .classInfo {
  width: 100%;
}
.bookClassBlock .classInfoWrap .teacherBlock {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.bookClassBlock .classInfoWrap .classInfo .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50px;
  position: relative;
  margin-right: 10px;
}

.bookClassBlock .classInfoWrap .classInfo .avatar + div {
  display: flex;
  flex-direction: column;
}
.bookClassBlock .classInfoWrap .classInfo .avatar img {
  width: auto;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
}

.bookClassBlock .classInfoWrap .classInfo .country {
  display: inline-Block;
  width: 16px;
  height: 12px;
  overflow: hidden;
  vertical-align: middle;
}
.bookClassBlock .classInfoWrap .classInfo .country img {
  display: Block;
  width: 100%;
  height: auto;
}
.bookClassBlock .classInfoWrap .classInfo .name {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  display: block;
}

.bookClassBlock .classInfoWrap .classInfo .name + b {
  font-size: 12px;
  color: #777;
  font-weight: 400;
}
.bookClassBlock .classInfoWrap .classInfo .tagBlock {
  margin-bottom: 20px;
}
.bookClassBlock .classInfoWrap .classInfo .tagBlock i {
  display: inline-Block;
  font-style: normal;
  background-color: #eef3ff;
  padding: 2px 10px;
  border-radius: 4px;
  color: #777;
  font-size: 12px;
  margin-bottom: 5px;
  margin-right: 5px;
}

.bookClassBlock .classInfoWrap .classInfo .summary {
}
.bookClassBlock .classInfoWrap .classInfo .summary p {
  font-size: 14px;
  color: #777;
  line-height: 20px;
}
.bookClassBlock .buttonWrap {
  padding: 20px 20px 30px;
}
.bookClassBlock .buttonWrap a {
}

@media (max-width: 710px) {
  .bookClassBlock .level {
    font-size: 16px;
  }
  .bookClassBlock h2 {
    font-size: 20px;
  }
  .bookClassBlock .classInfoWrap {
    flex-direction: column;
  }
  .bookClassBlock .classInfoWrap .cover {
    width: 100%;
    height: 0;
    padding-bottom: 74%;
    margin-bottom: 20px;
  }
  .bookClassBlock .classInfoWrap .classInfo .name {
    font-size: 18px;
  }
  .bookClassBlock .classInfoWrap .classInfo .tagBlock i {
    font-size: 14px;
  }
  .bookClassBlock .classInfoWrap .classInfo .summary p {
    font-size: 16px;
    line-height: 140%;
  }
}

/* .hidden {display: none;}
.hidden:nth-child(5):checked + .entry .circle {border-color: #4D98EF;} */

/* 選擇課程類型 */
.classTypeBlock {
  max-width: 800px;
  margin: 0 auto;
}
.classTypeBlock .typeTitle {
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  color: #535251;
  margin-bottom: 15px;
}
.classTypeBlock .BlockWrap {
  background: #fff;
  border-radius: 20px;
}
.classTypeBlock .courseType {
  padding: 20px 20px 30px;
}
.classTypeBlock .courseType .item {
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid #f0f0f3;
  border-radius: 8px;
  margin-bottom: 10px;
}
.classTypeBlock .courseType .title {
}
.classTypeBlock .courseType .title span {
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
  padding: 3px 10px;
  color: #fff;
  border-radius: 20px;
  margin-bottom: 5px;
  line-height: normal;
}
.classTypeBlock .courseType .title h4 {
  display: inline-Block;
  font-weight: 500;
  font-size: 16px;
  vertical-align: 1px;
  color: #535251;
}
.classTypeBlock .courseType .time {
  font-size: 16px;
  font-weight: 400;
  color: #535251;
  background: url(../../images/newBooking/icon/Icon_clock.svg) left center
    no-repeat;
  padding-left: 20px;
}

.classTypeBlock .courseType .lock .title h4,
.classTypeBlock .courseType .lock .time {
  color: #9f9f9f;
}
.classTypeBlock .courseType .lock > p {
  color: #ed4c7c;
  font-size: 14px;
  margin-top: 2px;
}

.classTypeBlock .hidden {
  display: none;
}
.classTypeBlock .hidden:checked + label .item {
  background-color: #f0eeeb;
  border-color: #f0eeeb;
}
.classTypeBlock .hidden:checked + label .title h4 {
  color: #03328d;
}

@media (max-width: 710px) {
  .classTypeBlock .typeTitle {
    font-size: 20px;
  }
  .classTypeBlock .courseType .time {
    font-size: 18px;
  }
}

/* 1對1-教材清單 */
.materialBlock {
  max-width: 800px;
  margin: 0 auto;
}
.materialBlock .title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
}
.materialBlock .title h3,
.materialCategoryBlock .title h3 {
  font-weight: 400;
  font-size: 20px;
  color: #333;
}
.materialBlock .title h3 span {
  font-weight: 300;
  font-size: 14px;
  color: #333;
  margin-left: 8px;
  vertical-align: 1px;
}
.materialBlock .title i {
  display: inline-Block;
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/icon/icon_info.svg) center center
    no-repeat;
}

.materialBlock .BlockWrap {
  padding: 40px;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

.materialBlock .operate {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
}
.materialBlock .operate .total {
  display: inline-Block;
  font-size: 14px;
  color: #777777;
}
.materialBlock .operate .filter {
  display: inline-Block;
}
.materialBlock .operate .filter span {
  display: inline-Block;
  font-size: 14px;
  color: #777777;
  margin-right: 5px;
}
.materialBlock .operate .filter a {
  display: inline-Block;
  padding: 5px 30px 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
  text-decoration: none;
  border: 1px solid #ddd;
  background: url(../../images/newBooking/dropdown.svg) #f8f8f8 no-repeat right
    8px center / 12px auto;
}

.materialBlock .thumbList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
.materialBlock .thumbList > .item {
  width: 48.5%;
  background-color: #f8f8f8;
  border-radius: 4px;
  padding: 15px 10px;
  margin-bottom: 20px;
}
.materialBlock .thumbList > .item .classInfo {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  padding-right: 30px;
  background: url(../../images/newBooking/arr_right.svg) no-repeat right
    center / 20px auto;
}
.materialBlock .thumbList > .item .classInfo .cover {
  width: 103px;
  height: 76px;
  flex-shrink: 0;
  margin-right: 15px;
  border-radius: 4px;
  background-color: #e1e7f7;
  position: relative;
  overflow: hidden;
}
.materialBlock .thumbList > .item .classInfo .cover img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.materialBlock .thumbList > .item .classInfo p {
  color: #535251;
  font-size: 16px;
  line-height: 140%;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.materialCategoryBlock .title h3 {
  margin-bottom: 10px;
}

@media (max-width: 710px) {
  .materialBlock .title h3,
  .materialCategoryBlock .title h3 {
    font-size: 20px;
  }
  .materialBlock .BlockWrap {
    padding: 25px 25px 30px;
  }
  .materialBlock .operate .total {
    font-size: 16px;
  }
  .materialBlock .operate .filter span {
    display: none;
  }
  .materialBlock .operate .filter a {
    font-size: 16px;
  }
  .materialBlock .thumbList > .item {
    width: 100%;
  }
  .materialBlock .thumbList > .item .classInfo p {
    font-size: 18px;
  }
}

/* 1對1-教材清單-類別 */
.materialCategoryBlock {
  max-width: 800px;
  margin: 0 auto;
}
.materialCategoryBlock > .title {
  margin-bottom: 15px;
  font-size: 16px;
  color: #777777;
}
.materialCategoryBlock > .title h3 {
  color: #535251;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
}

.materialCategoryBlock .BlockWrap {
  padding: 20px 20px 30px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.materialCategoryBlock .categorList {
}

/* 麵包屑 */
.materialCategoryBlock .categorList .breadcrumb {
  display: flex;
  font-size: 16px;
  color: #777;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 15px;
  align-items: center;
}
.materialCategoryBlock .categorList .breadcrumb a {
  display: block;
  font-weight: 500;
  font-size: 16px;
  color: #535251;
  line-height: 140%;
  text-decoration: underline;
  cursor: pointer;
}
.materialCategoryBlock .categorList .breadcrumb em {
  display: block;
  margin: 0 5px;
}
.materialCategoryBlock .categorList .breadcrumb span {
  display: block;
}

.materialCategoryBlock .categorList ul {
  padding-bottom: 60px;
}
.materialCategoryBlock .categorList li {
  padding: 12px 10px 12px 15px;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  color: #555;
  font-weight: 400;
  margin-bottom: 5px;
  cursor: pointer;
  list-style: none;
}
.materialCategoryBlock .categorList li.active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #edf1ff;
  background-color: #edf1ff;
  color: #003bff;
  border-radius: 4px;
}
.materialCategoryBlock .categorList li.active::after {
  display: block;
  content: "";
  width: 21px;
  height: 21px;
  background: url(../../images/newBooking/checked_icon.svg) no-repeat center /
    21px auto;
}
.materialCategoryBlock .categorList li.next {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.materialCategoryBlock .categorList li.next::after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/icon/icon_arrow.svg) center center
    no-repeat;
}

@media (max-width: 710px) {
  .materialCategoryBlock > .title h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
  }
}

/* 尚未程度分析 */
.levelReserveBlock {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  padding: 40px 20px 50px;
  position: relative;
}
.levelReserveBlock img {
}
.levelReserveBlock h3 {
  font-weight: 400;
  font-size: 28px;
  line-height: 150%;
  color: #201f1f;
  margin-bottom: 20px;
  margin-top: 10px;
}
.levelReserveBlock .info {
  max-width: 440px;
  margin: 0 auto;
  background: #eef3ff;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 20px;
}
.levelReserveBlock .info p {
  color: #777;
  font-size: 14px;
  line-height: 140%;
}

.levelReserveBlock .buttonWarp {
  margin-bottom: 20px;
}
.levelReserveBlock .buttonWarp a {
}

.levelReserveBlock .note {
}
.levelReserveBlock .note span {
  color: #9f9f9f;
  font-size: 14px;
  line-height: 140%;
}

@media (max-width: 710px) {
  .levelReserveBlock h3 {
    font-weight: 400;
    font-size: 22px;
    line-height: 150%;
  }
  .levelReserveBlock .info p {
    font-size: 16px;
  }
  .levelReserveBlock .note span {
    font-size: 16px;
  }
}

.teacherInfoPopup *,
.courseTypePopup *,
.materialIntroPopup *,
.materialPreviewPopup *,
.materialListPopup *,
.materialSelectTypePopup {
  box-sizing: border-box;
}

.sujectSelectMenu > .ttl,
.sujectMenuNew > .ttl,
.learningModeMenu > .ttl {
  font-size: 12px;
  color: #aaa;
}

.learningModeMenu > .ttl {
  padding-top: 8px;
  margin-bottom: 3px;
}

.sujectSelect .swiper-wrapper {
  align-items: center;
}

.sujectSelect:after {
  content: none;
}

.sujectSelectMenu .swiper-button-next,
.sujectSelectMenu .swiper-button-prev,
.sujectMenuNew .swiper-button-next,
.sujectMenuNew .swiper-button-prev {
  top: 35px;
}

.newSelect .sujectMenuNew .swiper-button-next,
.newSelect .sujectMenuNew .swiper-button-prev {
  top: 18px;
}

.learningModeMenu .swiper-button-next,
.learningModeMenu .swiper-button-prev {
  top: 37px;
}

.learningModeNav .swiper-button-next,
.learningModeNav .swiper-button-prev {
  top: 13px;
}

.sujectSelectMenu {
  margin-left: 0;
}

.sujectSelect .toggleSujectMenu {
  background: url(../../images/newBooking/dropdown.svg) #eef3ff no-repeat right
    10px center / 12px auto;
  border-radius: 8px 8px 0 0;
  padding: 10px 26px 10px 12px;
  position: absolute;
  top: 22px;
  right: 18px;
  color: #777;
}

.learningModeMenu .swiper-slide.dropDown {
  background: url(../../images/newBooking/dropdown.svg) no-repeat right 10px
    center / 12px auto;
  padding-right: 30px;
  position: relative;
}

.learningModeMenu .swiper-slide.dropDown > div {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  width: 100%;
  /* transition: opacity .6s, top .4s; */
  box-shadow: 0 4px 10px rgba(196, 194, 193, 0.4);
  border-radius: 8px;
}

.learningModeMenu .swiper-slide.dropDown:hover > div {
  opacity: 1;
  visibility: visible;
  top: 35px;
}

.learningModeMenu .swiper-slide.dropDown.active,
.learningModeMenu .swiper-slide.dropDown:hover {
  background-image: url(../../images/newBooking/dropdown_pink.svg);
  background-color: #edf1ff;
}

.learningModeMenu .swiper-slide:hover a {
  color: #003bff;
}

.allSujectSelect {
  position: relative;
  background: #eef3ff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  display: none;
}

.allSujectSelect .close {
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/close_menu.svg) no-repeat center /
    20px auto;
  position: absolute;
  top: 10px;
  right: 10px;
}

.allSujectSelect > ul {
  display: flex;
  justify-content: space-between;
}

.allSujectSelect > ul > li {
  width: 48.5%;
}

.allSujectSelect > ul > li p {
  font-size: 14px;
  margin-bottom: 5px;
}

.allSujectSelect p.en {
  color: #03328d;
}

.allSujectSelect p.pg {
  color: #a6875c;
}

.allSujectSelect ul ul {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 25px);
}

.allSujectSelect li li {
  width: 50%;
}

.allSujectSelect li li a {
  color: #777;
  padding: 3px;
  display: block;
  font-size: 14px;
}

.bookingSelect *,
.lessonSelect *,
.clasSchedule *,
.myScheduleQna *,
.myScheduleDetail *,
.myWordsMain *,
.learningRecord * {
  line-height: normal;
  box-sizing: border-box;
}

.bookingSelect .courseListWrp .courseImg img {
  cursor: pointer;
}

.bookingSelectTime,
.categorySelect,
.lessonSelect,
.clasSchedule,
.myScheduleQna,
.myScheduleDetail,
.myWordsMain {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  position: relative;
}

.categorySelect,
.lessonSelect,
.clasSchedule,
.myScheduleQna,
.myScheduleDetail,
.myWordsMain {
  margin-bottom: 15px;
  padding: 40px;
}

.bookingSelectTime {
  padding: 0;
}

.bookingCalendar .bookingSelect,
.videoCourseList .clasSchedule {
  padding: 20px 0;
}

.selectTimeOrTeacher .title {
  color: #777;
  font-size: 14px;
  margin-bottom: 30px;
}

.selectTimeOrTeacher ul {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.selectTimeOrTeacher li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
}

.selectTimeOrTeacher li img {
  width: 140px;
}

.selectTimeOrTeacher li p {
  color: #9f9f9f;
  font-size: 14px;
  margin: 15px auto 5px;
}

.selectTimeOrTeacher li a {
  border: 1px solid #ddd;
  border-radius: 30px;
  color: #777;
  padding: 6px;
  max-width: 230px;
  width: 90%;
  text-align: center;
  margin: 5px auto 15px;
  transition: color 0.3s;
}

.selectTimeOrTeacher li a:hover {
  color: #112f82;
}

.for_pad .selectTimeOrTeacher {
  padding-bottom: 100px;
}

.for_pad .bookedClassList {
  padding-bottom: 100px;
}

.bookingSelect .gpClassNow {
  color: #535251;
  font-weight: 500;
  font-size: 14px;
  background: url(../../images/newBooking/lightning.svg) #eef3ff no-repeat 10px
    50% / 20px auto;
  border-radius: 4px;
  padding: 10px;
  padding-left: 35px;
  position: relative;
  margin-bottom: 10px;
}

.bookingSelect .gpClassNow a {
  color: #535251;
  text-decoration: underline;
  vertical-align: 0;
}

.clasSchedule .confirmBox,
.bookingSelect .confirmBox,
.bookingSelectNew .confirmBox {
  display: flex;
  background: #fff;
  box-shadow: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
}

.newOxford .confirmBox {
  justify-content: flex-end;
}

.clasSchedule .confirmBox span,
.bookingSelect .confirmBox span,
.bookingSelectNew .confirmBox span {
  color: #535251;
}

.clasSchedule .confirmBox span.addCartTip,
.bookingSelect .confirmBox span.addCartTip,
.bookingSelectNew .confirmBox span.addCartTip,
.newOxford .confirmBox span.addCartTip,
.newOxfordCourse .confirmBox span.addCartTip {
  color: #333;
  margin-left: auto;
  padding-right: 15px;
  font-size: 14px;
  font-weight: 300;
}

.clasSchedule .confirmBox span b,
.bookingSelect .confirmBox span b,
.bookingSelectNew .confirmBox span b {
  font-size: 24px;
  font-weight: 500;
  vertical-align: -2px;
  margin: 0 5px;
}

.clasSchedule .confirmBox button,
.bookingSelect .confirmBox button,
.bookingSelectNew .confirmBox button,
.newOxford .confirmBox button,
.newOxfordCourse .confirmBox button {
  padding: 8px 20px;
  border: 1px solid #003bff;
  transition: background 0.3s;
  font-size: 14px;
  position: relative;
  color: #003bff;
  cursor: pointer;
}

.bookingSelectNew .confirmBox button {
  margin-left: auto;
}

.clasSchedule .confirmBox button label,
.bookingSelect .confirmBox button label,
.bookingSelectNew .confirmBox button label {
  position: absolute;
  right: 0;
  top: -7px;
  background: #ee79ee;
  color: #fff;
  font-size: 12px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clasSchedule .confirmBox button:first-of-type,
.bookingSelect .confirmBox button:first-of-type,
.bookingSelectNew .confirmBox button:first-of-type,
.newOxford .confirmBox button {
  margin-left: 0;
  background: #fff;
}

.newOxfordCourse .confirmBox button {
  background: #fff;
}

.bookingSelect .confirmBox button.prevStep,
.bookingSelectNew .confirmBox button.prevStep {
  margin-left: auto;
  color: #003bff;
  border: 1px solid #ddd;
  background: #fff;
}

.bookingSelectTime + .confirmBox button.prevStep {
  margin-left: 0;
}

.bookingSelect .confirmBox button.confirm,
.bookingSelectNew .confirmBox button.confirm {
  color: #fff;
  transition:
    background 0.3s,
    color 0.3s;
}

.clasSchedule .confirmBox .boxTipWrp,
.bookingSelect .confirmBox .boxTipWrp,
.bookingSelectNew .confirmBox .boxTipWrp {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  transition: top 0.7s;
}

.clasSchedule .confirmBox .boxTipWrp.active,
.bookingSelect .confirmBox .boxTipWrp.active,
.bookingSelectNew .confirmBox .boxTipWrp.active {
  top: -75px;
}

.clasSchedule .confirmBox .boxTip,
.bookingSelect .confirmBox .boxTip,
.bookingSelectNew .confirmBox .boxTip {
  background: url(../../images/newBooking/checked_white.svg) #0037cc no-repeat
    12px 50% / 16px auto;
  border-radius: 4px;
  color: #fff;
  padding: 10px 15px 10px 35px;
  font-size: 14px;
  -webkit-animation: boxTip 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite
    both;
  animation: boxTip 6s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s;
  white-space: nowrap;
}

.clasSchedule .confirmBox .boxTip:after,
.bookingSelect .confirmBox .boxTip:after,
.bookingSelectNew .confirmBox .boxTip:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: #0037cc transparent transparent transparent;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.clasSchedule .confirmBox .boxTip.active,
.bookingSelect .confirmBox .boxTip.active,
.bookingSelectNew .confirmBox .boxTip.active {
  opacity: 1;
  visibility: visible;
}

@-webkit-keyframes boxTip {
  0%,
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes boxTip {
  0%,
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

.sujectSelect .learningModeNav ul.mobile,
.courseFilter li button.open + ul.mobile {
  background: #fff;
  flex-direction: column;
  z-index: 9999999;
}

.sujectSelect .learningModeNav ul.mobile li,
.courseFilter li button.open + ul.mobile li {
  width: 100%;
  height: auto;
  margin-left: 0;
}

.sujectSelect .learningModeNav li {
  color: #555;
  padding: 3px 10px;
  margin-right: 7px;
  transition:
    color 0.3s,
    background 0.3s,
    border 0.3s;
  cursor: pointer;
  border-radius: 4px;
}

.sujectSelect .learningModeMenu {
  margin-bottom: 12px;
}

.sujectSelect .learningModeMenu .swiper-slide {
  margin: 3px 0;
  transition: background-color 0.3s;
  border-radius: 4px;
  margin-right: 5px;
  cursor: pointer;
}

.sujectSelect .learningModeMenu .swiper-slide a {
  transition: color 0.3s;
}

.sujectSelect .learningModeNav li.active,
.sujectSelect .learningModeNav li:hover {
  color: #003bff;
  background-color: #edf1ff;
}

.sujectSelect .learningModeNav ul.mobile li:hover {
  color: #03328d;
  background: #fff4f8;
  border-color: #fff4f8;
}

.learningModeNav .swp.mask:before,
.courseListWrp li.mask:before,
.bookingSelectTeacher .courseFilter > ul > li.mask:before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999999;
}

.sujectSelect .learningModeMenu .swiper-slide.lightning {
  background: url(../../images/newBooking/lightning.svg) no-repeat 7px 60% /
    16px auto;
  padding-left: 27px;
}

.sujectSelect .learningModeMenu .swiper-slide.lightning:hover {
  background-color: #edf1ff;
}

.sujectSelect.open::before {
  content: "";
  height: 1px;
  width: 100%;
  background: #eee;
  position: absolute;
  bottom: 40px;
  left: 0;
}

.bookingSelect .topnav,
.lessonSelect .topnav,
.myScheduleQna .topnav,
.myScheduleDetail .topnav,
.clasSchedule .topnav,
.learningRecord .topnav,
.member-centet-start-up .topnav {
  display: flex;
  margin-bottom: 15px;
}

.bookingSelect .topnav button.back,
.materialCategoryBlock .categorList .breadcrumb button.back,
.lessonSelect .topnav button.back,
.myScheduleQna .topnav button.back,
.myScheduleDetail .topnav button.back,
.clasSchedule .topnav button.back,
.learningRecord .topnav button.back,
.member-centet-start-up .topnav button.back {
  width: 40px;
  height: 40px;
  background: url(../../images/newBooking/back_icon.svg) no-repeat center / 24px
    auto;
  margin-right: 10px;
  cursor: pointer;
}

.bookingSelect .topnav button.back,
.lessonSelect .topnav button.back,
.myScheduleQna .topnav button.back,
.myScheduleDetail .topnav button.back,
.clasSchedule .topnav button.back,
.learningRecord .topnav button.back,
.member-centet-start-up .topnav button.back {
  margin-left: -10px;
}

.bookingSelect .topnav ul,
.lessonSelect .topnav ul,
.myScheduleQna .topnav ul,
.myScheduleDetail .topnav ul,
.clasSchedule .topnav ul,
.learningRecord .topnav ul,
.member-centet-start-up .topnav ul {
  display: flex;
  flex-wrap: wrap;
}

.bookingSelect .topnav li a,
.lessonSelect .topnav li a,
.myScheduleQna .topnav li a,
.myScheduleDetail .topnav li a,
.clasSchedule .topnav li a,
.learningRecord .topnav li a,
.member-centet-start-up .topnav li a {
  text-decoration: underline;
  font-weight: 400;
  font-size: 14px;
  color: #555;
  position: relative;
  top: -2px;
}

.bookingSelect .topnav li,
.lessonSelect .topnav li,
.myScheduleQna .topnav li,
.myScheduleDetail .topnav li,
.clasSchedule .topnav li,
.learningRecord .topnav li,
.member-centet-start-up .topnav li {
  font-size: 14px;
  font-weight: 300;
  color: #555;
  display: flex;
  align-items: center;
  line-height: 28px;
}

.bookingSelect .topnav li::before,
.lessonSelect .topnav li::before,
.myScheduleQna .topnav li::before,
.myScheduleDetail .topnav li::before,
.clasSchedule .topnav li::before,
.learningRecord .topnav li::before,
.member-centet-start-up .topnav li::before {
  content: "/";
  margin: 0 10px;
  font-size: 15px;
  font-weight: 300;
  color: #777;
}

.bookingSelect .topnav li:first-child::before,
.lessonSelect .topnav li:first-child::before,
.myScheduleQna .topnav li:first-child::before,
.myScheduleDetail .topnav li:first-child::before,
.clasSchedule .topnav li:first-child::before,
.learningRecord .topnav li:first-child::before,
.member-centet-start-up .topnav li:first-child::before {
  content: none;
}

.bookingSelect h4.pageTitle,
.bookedClassList > h4 {
  text-align: center;
  font-weight: 700;
  color: #535251;
  margin-bottom: 20px;
  position: relative;
}

.pg_drawer .bookingSelect h4.pageTitle {
  font-size: 18px;
  color: #333;
  font-weight: 400;
}

.pg_drawer .bookingSelect h4.pageTitle .changeConsultant {
  font-size: 16px;
  color: #777;
  font-weight: 400;
  margin-top: 5px;
}

.pg_drawer .bookingSelectTeacher .teacherTime b {
  color: #333;
  font-size: 16px;
  font-weight: 400;
}

.consultantSelectPopup .bookingSelect h4.pageTitle {
  text-align: left;
  font-size: 18px;
  display: flex;
  white-space: nowrap;
  align-items: center;
}

.bookingSelect h4.pageTitle.regularWeeklyClass {
  display: none;
}

.consultantSelectPopup .changeConsultant {
  display: inline-block;
  color: #535251;
  font-weight: 400;
  margin-left: 10px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookingSelect h4.pageTitle .back,
.myScheduleQna .title .back,
.myScheduleDetail .title .back,
.clasSchedule .title .back,
.learningRecordTitle .back {
  display: none;
  background: url(../../images/newBooking/back_icon.svg) no-repeat center / 24px
    auto;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 0;
  top: -3px;
}

.bookingSelect h4.pageTitle .close,
.myScheduleQna .title .close,
.myScheduleDetail .title .close {
  display: none;
  background: url(../../images/newBooking/close_menu.svg) no-repeat center /
    24px auto;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: -3px;
}

.bookingSelectTime .teacherInfo,
.newOxford > div > .teacherInfo {
  display: flex;
  justify-content: center;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
}

.teacherInfo .teacherInfoWrp {
  display: flex;
  align-items: center;
}

.bookingSelect .teacherInfo .teacherInfoWrp {
  gap: 15px;
}

.teacherInfo label {
  flex-shrink: 0;
  position: relative;
  cursor: default;
}

.teacherInfo .teacherInfoWrp label img {
  object-fit: cover;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  cursor: pointer;
}

.teacherInfo .teacherInfoWrp div img,
.bookedClassList .courseListWrp .courseTitle .courseTeacherInfo > img {
  height: 12px;
  margin-right: 5px;
}

.teacherInfo .teacherInfoWrp div h5 {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.teacherInfo .teacherInfoWrp div h5 strong {
  color: #333;
  font-weight: 400;
  font-size: 16px;
}

.teacherInfo .teacherInfoWrp div span {
  color: #555;
  margin-bottom: 6px;
  display: block;
  font-size: 14px;
  font-weight: 400;
}

.teacherInfo .teacherInfoWrp div p {
  font-size: 12px;
  color: #777;
  display: flex;
  align-items: center;
  padding-left: 16px;
  background: url(../../images/newBooking/star_ico.svg) no-repeat left center /
    12px auto;
}

.teacherInfo .teacherInfoWrp div p b {
  font-weight: 700;
  color: #777;
  font-size: 14px;
  margin-right: 3px;
}

.teacherInfo .teacherInfoWrp div > strong {
  color: #535251;
  font-weight: 500;
}

.bookingSelectTime p.timeZone,
.changeTimeBlock p.timeZone {
  color: #777;
  font-size: 12px;
  text-align: center;
  margin-bottom: 10px;
}

.bookingCalendarWrp {
  background: #f2f2f2;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.bookingCalendar ul.week {
  display: flex;
  justify-content: space-around;
  width: 400px;
}

.bookingCalendar ul.week li {
  color: #777;
  font-size: 14px;
  width: 36px;
  height: 36px;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bookingCalendar ul.chooseDate {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  justify-content: space-between;
}

.bookingCalendar ul.chooseDate li {
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #555;
  margin: 8px 10px;
  background: #fff;
  position: relative;
  transition:
    background 0.4s,
    border 0.4s,
    color 0.4s;
}

.bookingCalendar ul.chooseDate li::selection,
.bookingCalendar .chooseTime li::selection,
.bookingCalendar .chooseTime li label::selection {
  background: transparent;
}

.bookingCalendar ul.chooseDate li.hadClass:after {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: #ee79ee;
  border-radius: 50%;
}

.bookingCalendar ul.chooseDate li.selected {
  background: #003bff;
  color: #fff;
  border-color: #003bff;
}

.bookingCalendar ul.chooseDate li.disable {
  color: #ddd;
  cursor: default;
  border-color: transparent;
}

.bookingCalendar ul.chooseDate li.disable.displayTime {
  cursor: pointer;
}

.bookingCalendar ul.chooseDate li.selected {
  background: #003bff;
  color: #fff;
  border-color: #003bff;
}

.bookingCalendar ul.chooseDate li.pnMonth {
  background: transparent;
  box-shadow: none;
  color: #aaa;
  border-color: transparent;
}

.bookingCalendar .titleMonth {
  padding-bottom: 10px;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.bookingCalendar .titleMonth span {
  vertical-align: -2px;
  display: inline-block;
  margin: 0 10px;
}

.bookingCalendar .titleMonth button {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.bookingCalendar .titleMonth button:first-of-type {
  background: url(../../images/newBooking/arr_left.svg) no-repeat center / 18px
    auto;
}

.bookingCalendar .titleMonth button:last-of-type {
  background: url(../../images/newBooking/arr_right.svg) no-repeat center / 18px
    auto;
}

.bookingCalendar .choosePeriod,
.bookingCalendar .chooseTime {
  background: #f2f2f2;
  border-radius: 4px;
  padding: 18px 18px 10px;
  margin-bottom: 15px;
}

.bookingCalendar .choosePeriod {
  padding: 18px;
}

.bookingCalendar .choosePeriod ul {
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
}

.bookingCalendar .choosePeriod li {
  width: 18.5%;
  padding: 3px 10px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  transition:
    background 0.4s,
    border 0.4s,
    color 0.4s;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.bookingCalendar .choosePeriod li.disable {
  color: #ddd;
  z-index: 2;
  cursor: default;
}

.bookingCalendar .choosePeriod li.active {
  background: #003bff;
  color: #fff;
  z-index: 1;
  border-color: #003bff;
}

.bookingCalendar .chooseTime {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bookingCalendar .chooseTime li {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16%;
  height: 58px;
  flex-direction: column;
  color: #555;
  cursor: pointer;
  position: relative;
  transition:
    background-color 0.4s,
    border 0.4s,
    color 0.4s;
  margin-bottom: 8px;
}

.bookingCalendar .chooseTime li label {
  cursor: pointer;
  font-size: 14px;
}

.bookingCalendar .chooseTime li.disable {
  box-shadow: none;
  color: #aaa;
  cursor: default;
  border-color: transparent;
}

.bookingCalendar .chooseTime li.disable label {
  cursor: default;
}

.bookingCalendar .chooseTime li.booked {
  color: #003bff;
  background: url(../../images/newBooking/cancel_icon_pink.svg) #fff no-repeat
    right 5px top 5px / 12px auto;
  border-color: #003bff;
}

.bookingCalendar .chooseTime li.active {
  background: url(../../images/newBooking/cancel_icon.svg) #003bff no-repeat
    right 5px top 5px / 12px auto;
  color: #fff;
  border-color: #003bff;
}

.bookingCalendar .chooseTime li.select {
  background: #003bff;
  color: #fff;
  border-color: #003bff;
}

.bookingCalendar .chooseTime li.booked label {
  cursor: pointer;
}

.bookingCalendar .bookingTip li {
  font-size: 12px;
  color: #777;
}

.bookingCalendar .bookingTip {
  display: flex;
  margin-bottom: 25px;
}

.bookingCalendar .bookingTip li {
  padding-left: 25px;
  margin-right: 20px;
}

.bookingCalendar .bookingTip li:first-child {
  background: url(../../images/newBooking/book_icon1.svg) no-repeat 0 50% / 20px
    auto;
}

.bookingCalendar .bookingTip li:nth-child(2) {
  background: url(../../images/newBooking/book_icon2.svg) no-repeat 0 50% / 20px
    auto;
}

.bookingCalendar .bookingTip li:nth-child(3) {
  background: url(../../images/newBooking/book_icon3.svg) no-repeat 0 50% / 20px
    auto;
}

.bookingCalendar .chooseTime .assignMaterial {
  background: #535251;
  border-radius: 8px;
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 5px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  transition: opacity 0.4s;
}

.bookingCalendar .chooseTime .assignMaterial:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #535251 transparent;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.bookingCalendar .chooseTime .assignMaterial button {
  color: #fff;
  background: transparent;
  white-space: nowrap;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background 0.3s;
  width: 100%;
}

.bookingCalendar .chooseTime .assignMaterial button:hover {
  background: #777;
}

.bookingCalendar .chooseTime .open .assignMaterial {
  opacity: 1;
  visibility: visible;
}

.floatCalendar {
  position: relative;
}

.floatCalendar .bookingCalendarWrp {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px 15px;
  right: 40px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s;
}

.freeSession .bookingCalendarWrp {
  top: 140px;
}

.floatCalendar .bookingCalendarWrp.open {
  opacity: 1;
  visibility: visible;
  z-index: 999999;
}

.floatCalendar .bookingCalendarWrp.mobile {
  justify-content: flex-start;
}

.bookingCalendar.floatCalendar ul.chooseDate li {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #ddd;
  color: #555;
  margin: 6px 8px;
}

.bookingCalendar.floatCalendar ul.week li {
  width: 30px;
  height: 30px;
  margin: 0 8px;
}

.bookingCalendar.floatCalendar .titleMonth {
  width: calc(100% - 16px);
  margin-bottom: 5px;
}

.bookingCalendar.floatCalendar ul.chooseDate,
.bookingCalendar.floatCalendar ul.week {
  width: 330px;
}

.bookingCalendar.floatCalendar ul.chooseDate li.disable {
  background: #f0f0f0;
  border-color: #f0f0f0;
  color: #aaa;
}

.bookingCalendar.floatCalendar ul.chooseDate li.disable.pnMonth {
  background: transparent;
  border-color: transparent;
}

.bookingCalendar.floatCalendar ul.chooseDate li.selected {
  color: #fff;
  border-color: #003bff;
  box-shadow: none;
}

.bookingCalendar.floatCalendar ul.chooseDate li.hadClass:after {
  bottom: -10px;
}

.floatCalendar .courseListHead,
.videoCourseList .courseListHead {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: #333;
  font-weight: 400;
  font-size: 18px;
}

.floatCalendar .courseListHead button {
  background: #fff;
  border-radius: 4px;
  margin-left: auto;
  border: 1px solid #ddd;
  padding: 4px 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333;
  font-weight: 300;
  transition:
    background 0.3s,
    border 0.3s;
}

.floatCalendar .courseListHead button.active {
  background: #003bff;
  color: #fff;
  border-color: #003bff;
}

.floatCalendar .courseListHead button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../../images/OxfordUpgrade/calendar-default.svg) no-repeat
    center / 18px auto;
  margin-right: 5px;
}

.floatCalendar .courseListHead button.active::before {
  background-image: url(../../images/OxfordUpgrade/calendar_color_white.svg);
}

.floatCalendar .courseListHead button.active::after {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../../images/newBooking/cancel_icon.svg) no-repeat center /
    18px auto;
  margin-left: 15px;
}

.bookedClassList .courseTitle {
  padding-left: 0;
}

.bookedClassList .courseTitle h5 label,
.bookedClassList .courseTitle b,
.bookingResult .bookingResultList h5 b,
.bookingSelectTeacher .teacherTime b,
.newMain .teacherTime label {
  vertical-align: middle;
}

.bookedClassList .bookingTips {
  font-size: 14px;
  color: #777;
  text-align: center;
  margin-bottom: 20px;
}

.bookedClassList p.receivedPoints {
  color: #ed4c7c;
  padding-left: 2px;
}

.bookedClassList p.overTime {
  color: #ee5a50;
  padding-left: 2px;
}

.bookedClassList .courseTitle h5 {
  overflow: visible;
}

.bookedClassList .courseTitle h5 button {
  background: transparent;
  color: #777;
  padding: 20px;
  position: absolute;
  right: -15px;
  top: -15px;
  transition: color 0.3s;
}

.bookedClassList .courseTitle h5 button:hover {
  color: #03328d;
}

.bookedClassList .courseCard > li {
  padding: 15px 20px 10px;
  background: #f8f8f8;
  border-radius: 12px;
}

.bookedClassList .courseCard > li.disable {
  background: #f0f0f3;
}

.bookedClassList .courseTitle h5 button.delCourseBtn {
  color: #fff;
  background: #03328d;
  box-shadow: 0 4px 10px rgba(164, 136, 103, 0.3);
  border-radius: 20px;
  padding: 8px 20px;
  position: absolute;
  right: -5px;
  top: 0;
  font-size: 14px;
}

.bookedClassList .courseCard > li .editClassChange,
.classComingNew .classComingBtn .editClassChange,
.courseCard .courseBtn .editClassChange,
.scheduleDetailCtn .editClassChange,
.weekPlans .editTool .editClassChange,
.normalBookingCartList .editClassChange,
.bookingHead .editTool .editClassChange,
.regularWeeklyClassList .editTool .editClassChange {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  top: 35px;
  right: 20px;
  transition:
    opacity 0.6s,
    top 0.4s;
  background: #fff;
  min-width: 140px;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(180, 196, 255, 0.5);
  border-radius: 4px;
}

.weekPlans .editTool .editClassChange {
  top: 25px;
  min-width: auto;
}

.bookedClassList .courseCard > li .editClassChange.open,
.classComingNew .classComingBtn .editClassChange.open,
.courseCard .courseBtn .editClassChange.open,
.scheduleDetailCtn .editClassChange.open,
.weekPlans .editTool .editClassChange.open,
.normalBookingCartList .editClassChange.open,
.bookingHead .editTool .editClassChange.open,
.regularWeeklyClassList .editTool .editClassChange.open {
  opacity: 1;
  visibility: visible;
  top: 50px;
  z-index: 9999999;
}

.normalBookingCartList .editClassChange.open {
  top: 40px;
  right: 15px;
}

.scheduleDetailCtn .editClassChange.open {
  right: auto;
  left: 0;
  min-width: 32%;
}

.classComingNew .classComingBtn .editClassChange.open,
.courseCard .courseBtn .editClassChange.open {
  right: auto;
  top: 55px;
  left: 20px;
  text-align: left;
}

.freeBooking.courseCard .courseBtn .editClassChange.open {
  left: 5px;
}

.weekPlans .editTool .editClassChange.open,
.bookingHead .editTool .editClassChange.open,
.regularWeeklyClassList .editTool .editClassChange.open {
  right: auto;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.bookedClassList .courseCard > li .editClassChange a,
.classComingNew .classComingBtn .editClassChange a,
.courseCard .courseBtn .editClassChange a,
.freeBooking.courseCard .courseBtn .editClassChange a,
.scheduleDetailCtn .editClassChange a,
.weekPlans .editTool .editClassChange a,
.normalBookingCartList .editClassChange a,
.bookingHead .editTool .editClassChange a,
.regularWeeklyClassList .editTool .editClassChange a {
  display: block;
  color: #555;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 14px;
  transition:
    color 0.3s,
    background 0.3s;
}

.bookedClassList .courseCard > li .editClassChange a:hover,
.classComingNew .classComingBtn .editClassChange a:hover,
.courseCard .courseBtn .editClassChange a:hover,
.freeBooking.courseCard .courseBtn .editClassChange a:hover,
.scheduleDetailCtn .editClassChange a:hover,
.weekPlans .editTool .editClassChange a:hover,
.normalBookingCartList .editClassChange a:hover {
  color: #003bff;
  background: #edf1ff;
}

.bookedClassList > h4,
.bookedClassList .topnav {
  position: relative;
}

.bookedClassList .topnav .editTips,
.bookedClassList > h4 .editTips,
.materialBlock .editTips,
.lessonSelectWrp .bookingTips button::before {
  background: url(../../images/newBooking/tips_icon.svg) transparent no-repeat
    center / 20px auto;
  width: 25px;
  height: 25px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.lessonSelectWrp .bookingTips button::before {
  content: "";
  display: inline-block;
  position: static;
  vertical-align: -3px;
  margin-right: 5px;
  width: 18px;
  height: 18px;
  background-size: 18px auto;
}

.lessonSelectWrp .bookingTips {
  text-align: right;
  padding-bottom: 8px;
  position: relative;
}

.lessonSelectWrp .bookingTips button {
  background: transparent;
  font-weight: 400;
  font-size: 14px;
  color: #777;
  cursor: pointer;
}

.bookedClassList .topnav .editTips + div,
.bookedClassList > h4 .editTips + div,
.materialBlock .editTips + div,
.lessonSelectWrp .bookingTips div,
.module_teacher_wrapper .studentFeedbackTag > p span,
.learningRecordDetail .learningDetailCount p .moreInfo div {
  display: none;
  position: absolute;
  top: 30px;
  right: -95px;
  width: 220px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(180, 196, 255, 0.5);
  border-radius: 4px;
  padding: 10px 13px;
  color: #535251;
  font-size: 12px;
  line-height: 18px;
  z-index: 3;
  text-align: left;
}

.learningRecordDetail .learningDetailCount p .moreInfo div {
  right: auto;
  left: 4px;
  color: #555;
  top: 25px;
}

.lessonSelectWrp .bookingTips div {
  right: -80px;
  width: 200px;
}

.bookedClassList .topnav .editTips + div span,
.bookedClassList > h4 .editTips + div span,
.materialBlock .editTips + div span,
.lessonSelectWrp .bookingTips div span,
.module_teacher_wrapper .studentFeedbackTag > p b {
  text-align: center;
  display: block;
  font-size: 14px;
  color: #9ba9ce;
  border-bottom: 1px solid #8ba1f1;
  margin-bottom: 10px;
  font-weight: 500;
  padding-bottom: 5px;
}

.bookedClassList .topnav .editTips + div p,
.bookedClassList > h4 .editTips + div p,
.materialBlock .editTips + div p,
.lessonSelectWrp .bookingTips div p {
  font-weight: 400;
  line-height: normal;
}

.bookedClassList .topnav .editTips + div p:not(:last-of-type),
.bookedClassList > h4 .editTips + div p:not(:last-of-type),
.materialBlock .editTips + div p:not(:last-of-type) {
  margin-bottom: 8px;
}

.bookedClassList .courseCard {
  width: calc(100% - 30px);
  margin-left: 30px;
}

.bookedClassList .courseCard .mobileSubmenu {
  background: transparent;
}

.bookingSelect .bookingResult {
  padding-top: 25px;
}

.bookingSelect .bookingResult > img {
  width: 136px;
  display: block;
  margin: 0 auto;
}

.bookingSelect .bookingResult > h4 {
  font-size: 28px;
  color: #201f1f;
  text-align: center;
  font-weight: 400;
  margin-bottom: 15px;
}

.lessonSelect .bookingResultState,
.bookingSelect .bookingResultState {
  color: #aaa;
  text-align: left;
  margin-bottom: 10px;
  font-size: 16px;
}

.lessonSelect .bookingResultState span,
.bookingSelect .bookingResultState span {
  font-size: 16px;
  vertical-align: -1px;
}

.lessonSelect .bookingResultState span.success,
.bookingSelect .bookingResultState span.success {
  color: #0ead74;
}

.lessonSelect .bookingResultState span.fail,
.bookingSelect .bookingResultState span.fail {
  color: #ee5a50;
}

.bookingSelect .bookingResultState {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.bookingSelect .bookingResultState .classCharge {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.bookingSelect .bookingResultState .classCharge p {
  font-size: 14px;
  font-weight: 300;
  color: #333;
  padding-right: 15px;
  display: flex;
  align-items: center;
}

.bookingSelect .bookingResultState .classCharge p b {
  font-weight: 700;
  font-family: Roboto;
  font-size: 20px;
  color: #333;
  margin: 0 5px;
}

.bookingSelect .bookingResultState .classCharge a {
  font-weight: 400;
  font-size: 14px;
  color: #777;
  text-decoration: underline;
}

.bookingResult .bookingResultList {
  padding: 0 7px 0 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.bookingResult .bookingResultList ul::-webkit-scrollbar,
.announcementNotice .annText::-webkit-scrollbar {
  width: 6px;
}

.bookingResult .bookingResultList ul::-webkit-scrollbar-track,
.announcementNotice .annText::-webkit-scrollbar-track {
  background: transparent;
}

.bookingResult .bookingResultList ul::-webkit-scrollbar-thumb,
.announcementNotice .annText::-webkit-scrollbar-thumb {
  background-color: #c4c2c1;
  border-radius: 10px;
}

.bookingResult .bookingResultList ul {
  max-height: 450px;
  overflow-y: auto;
  padding: 10px 0;
}

.bookingResult .bookingResultList h5 {
  overflow: visible;
  margin-bottom: 3px;
}

.bookingResult .bookingResultList h5 label {
  vertical-align: middle;
}

.bookingResult .bookingResultList .bookedStateSuccess {
  color: #0ead74;
}

.bookingResult .bookingResultList .bookedStateSuccess b {
  font-size: 14px;
  font-weight: 400;
  color: #0037cc;
  float: right;
}

.bookingResult .bookingResultList .bookedStateFail {
  color: #ee5a50;
  display: flex;
  align-items: center;
}

.bookingResult .bookingResultList .bookedStateFail a {
  color: #ee5a50;
  margin-left: 5px;
  text-decoration: underline;
}

.bookingResult .bookingResultList li {
  padding: 10px 0;
  margin-right: 8px;
}

.bookingResult .bookingResultList li:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

.bookingResult .bookingResultList li p.dateTime {
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  color: #080808;
  display: flex;
  align-items: center;
}

.bookingResult .bookingResultList li p.courseType {
  margin-bottom: 10px;
}

.bookingResult .bookingResultList li p.courseType b {
  font-size: 12px;
  color: #555;
  font-weight: 400;
  padding-right: 6px;
  margin-right: 6px;
  display: inline-block;
}

.bookingResult .bookingResultList li .courseType b:first-of-type {
  border-right: 1px solid #ddd;
}

.bookingResult .bookingResultTip {
  margin-bottom: 20px;
}

.bookingResult .bookingResultTip p {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  line-height: 24px;
  display: flex;
}

.bookingResult .bookingResultTip p::before {
  content: "．";
}

.bookingResultBtn {
  text-align: center;
  margin-bottom: 20px;
}

.bookingResultBtn > p {
  color: #777;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 300;
}

.bookingResultBtn > p span {
  margin: 0 3px;
}

.bookingResultBtn a,
.BlockWrap .buttonWrap a {
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 22px;
  border-radius: 30px;
  background: #003bff;
  transition:
    background 0.3s,
    color 0.3s;
  text-align: center;
  line-height: normal;
}

.bookingResultBtn a:hover,
.BlockWrap .buttonWrap a:hover {
  background: #112f82;
}

.BlockWrap .buttonWrap a.order.active,
.BlockWrap .buttonWrap a.order.conflict {
  background: #fff;
  color: #03328d;
  border: 1px solid #03328d;
  box-shadow: none;
}

.bookingResultBtn a.nextStep {
  background: #fff;
  border: 1px solid #ddd;
  margin-right: 15px;
  color: #003bff;
}

.BlockWrap .buttonWrap a:not(.order) {
  color: #003bff;
  border: 1px solid #ddd;
  transition:
    color 0.3s,
    border 0.3s;
  background: transparent;
  box-shadow: none;
}

.bookingResultBtn a.nextStep:hover,
.BlockWrap .buttonWrap a:not(.order):hover {
  color: #112f82;
}

.materialIntroPopup .BlockWrap .buttonWrap a.booked {
  background: transparent;
  border: 1px solid #003bff;
  box-shadow: none;
  color: #003bff;
}

.materialIntroPopup .BlockWrap .buttonWrap a.booked::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/checked_icon.svg) no-repeat center /
    100% auto;
  margin: 0 5px 3px -10px;
}

.bookingSelectTeacher .teacherTime {
  background: #f8f8f8;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.bookingSelectTeacher .teacherTime span {
  display: inline-block;
  color: #555;
  background: url(../../images/newBooking/clock.svg) no-repeat left center /
    18px auto;
  padding-left: 20px;
  margin-left: 15px;
}

.consultantSelectPopup .bookingSelectTeacher .teacherTime span {
  vertical-align: middle;
  margin-left: 0;
}

.bookingSelectTeacher .teacherSearchFilter {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.bookingSelectTeacher .teacherSearchInput {
  display: inline-block;
  width: 100%;
  position: relative;
}

.bookingSelectTeacher .teacherSearchInput .delText {
  position: absolute;
  right: 0;
  top: 0;
  width: 41px;
  height: 41px;
  background: url(../../images/newBooking/close_color_default.svg) no-repeat
    center / 17px auto;
  display: none;
}

.bookingSelectTeacher .typeTeacherName {
  color: #535251;
  font-size: 14px;
  padding: 10px 35px 10px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: url(../../images/newBooking/search_icon.svg) no-repeat right 10px
    center / 16px auto;
  width: 100%;
  transition: none;
  font-weight: 500;
}

.bookingSelectTeacher .typeTeacherName::placeholder {
  color: #777;
  opacity: 0.9;
  font-weight: 400;
}

.bookingSelectTeacher .courseFilter {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  width: auto;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 20px;
}

.bookingSelectTeacher .courseFilter > span {
  color: #777;
  font-size: 14px;
  display: block;
}

.bookingSelectTeacher .courseFilter > ul > li {
  margin-bottom: 0;
  margin-left: 10px;
}

.bookingSelectTeacher .courseFilter button {
  margin-right: 0;
}

.bookingSelectTeacher .orientationSort {
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid #f0f0f3;
  gap: 20px;
}

.bookingSelectTeacher .orientationSort > p {
  color: #777;
  font-size: 14px;
}

.bookingSelectTeacher .orientationSort .courseFilter {
  margin-left: auto;
}

.teacherSearchList ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.teacherSearchList li {
  width: 48.5%;
  background: #f2f2f2;
  border-radius: 4px;
  padding: 15px 10px;
  margin-bottom: 20px;
}

.teacherSearchList li > button,
.materialBlock .buttonWarp button {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20px;
  color: #777;
  font-size: 14px;
  padding: 8px;
  width: 100%;
  transition: color 0.3s;
  cursor: pointer;
}

.teacherSearchList li > button:hover,
.materialBlock .buttonWarp button:hover {
  color: #03328d;
}

.teacherSearchList li .unavailable {
  height: 36px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.teacherSearchList li .unavailable::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../../images/newBooking/tips_icon.svg) no-repeat center / 18px
    auto;
  flex-shrink: 0;
  margin-right: 5px;
}

.teacherSearchList .teacherInfo .teacherInfoWrp {
  margin-bottom: 10px;
  align-items: center;
  min-height: 87px;
}

.teacherSearchList li:first-child .teacherInfoWrp {
  align-items: center;
}

.weekCyclePlan .teacherSearchList li:first-child .teacherInfoWrp {
  margin-bottom: 28px;
}

.weekCyclePlan .teacherSearchList li:first-child .teacherInfoWrp img {
  cursor: default;
}

.teacherSearchList li:first-child .teacherInfoWrp > p {
  font-weight: 500;
  font-size: 18px;
  color: #535251;
}

.teacherInfo label div {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 0px;
  bottom: 0px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: url(../../images/newBooking/icon_heart_solid.svg) #fff no-repeat
    center / 15px auto;
  transition: background 0.4s;
  cursor: pointer;
}

.teacherInfo label div.active {
  background-image: url(../../images/newBooking/icon_heart_pink.svg);
}

.teacherSearchList .teacherInfo .teacherInfoWrp > div {
  cursor: pointer;
  transition: opacity 0.3s;
  max-width: calc(100% - 85px);
  padding-right: 30px;
  background: url(../../images/newBooking/arr_right.svg) no-repeat right
    center / 20px auto;
  width: 100%;
}

.teacherSearchList .teacherInfo .teacherInfoWrp > div strong,
.teacherSearchList .teacherInfo .teacherInfoWrp > div span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

.teacherSearchList .teacherInfo .teacherInfoWrp > div:hover {
  opacity: 0.5;
}

.teacherSearchList .teacherInfo .teacherInfoWrp > div i {
  color: #aaa;
  font-size: 14px;
  display: block;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 5px;
}

.newBookingPopup,
.goClassNowPopup,
.classPutOffPopup,
.bookingRulesPopup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newBookingPopup > div,
.goClassNowPopup > div,
.classPutOffPopup > div,
.bookingRulesPopup > div {
  width: 95%;
  max-width: 260px;
  min-width: 240px;
  border-radius: 8px;
  text-align: center;
  padding: 40px;
  background: #fff;
  box-sizing: border-box;
  margin-top: -5%;
  position: relative;
}

.goClassNowPopup > div,
.bookingRulesPopup > div {
  max-width: 600px;
  text-align: left;
}

.classPutOffPopup > div {
  max-width: 240px;
}

.newBookingPopup > div .dialogImg {
  margin-top: -110px;
  width: 160px;
}

.newBookingPopup > div p {
  line-height: 22px;
  color: #535251;
  font-size: 14px;
  margin-bottom: 20px;
}

.levelReserveBlock .buttonWarp,
.bookingSelect .newNoLevel .btnWrp,
.oneabcBookingStart .btnWrp,
.learninPurpose .btnWrp,
.newMbrBuy .btnWrp,
.myStudyPlan .btnWrp,
.bookingCalendar .btnWrp,
.orderCancelWrp .btnWrp {
  max-width: 300px;
  margin: 0 auto 25px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.myStudyPlan .btnWrp,
.bookingCalendar .btnWrp,
.orderCancelWrp .btnWrp {
  margin-bottom: 0;
  padding-top: 24px;
}

.myStudyPlan .btnWrp,
.orderCancelWrp .btnWrp {
  justify-content: center;
}

.bookingSelect .newNoLevel .btnWrp,
.oneabcBookingStart .btnWrp {
  max-width: none;
}

.newBookingPopup > div button,
.goClassNowPopup > div button,
.levelReserveBlock .buttonWarp button,
.courseFilterSelect_m .btnWrp button,
.bookingSelect .newNoLevel .btnWrp button,
.oneabcBookingStart .btnWrp button,
.learninPurpose .btnWrp button,
.newMbrBuy .btnWrp button,
.myStudyPlan .btnWrp button,
.bookingCalendar .btnWrp button,
.orderCancelWrp .btnWrp button {
  max-width: 200px;
  width: 100%;
  min-height: 40px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #003bff;
  cursor: pointer;
  padding: 10px 15px;
  transition: color 0.3s;
}

.myStudyPlan .btnWrp button,
.orderCancelWrp .btnWrp button {
  font-size: 14px;
  max-width: none;
  min-height: auto;
  width: auto;
  min-width: 150px;
}

.orderCancelWrp .btnWrp button {
  min-width: 120px;
  font-size: 16px;
}

.newBookingPopup > div button:hover,
.goClassNowPopup > div button:hover,
.levelReserveBlock .buttonWarp button:hover,
.courseFilterSelect_m .btnWrp button:hover,
.bookingSelect .newNoLevel .btnWrp button:hover,
.oneabcBookingStart .btnWrp button:hover,
.learninPurpose .btnWrp button:hover,
.newMbrBuy .btnWrp button:hover,
.myStudyPlan .btnWrp button:hover,
.bookingCalendar .btnWrp button:hover,
.orderCancelWrp .btnWrp button:hover {
  color: #112f82;
}

.goClassNowPopup .btnWrp button,
.BlockWrap .buttonWrap a,
.levelReserveBlock .buttonWarp button,
.courseFilterSelect_m .btnWrp button {
  width: 48.5%;
  max-width: none;
}

.goClassNowPopup .btnWrp button,
.courseFilterSelect_m .btnWrp button,
.bookingSelect .newNoLevel .btnWrp button,
.oneabcBookingStart .btnWrp button,
.learninPurpose .btnWrp button,
.newMbrBuy .btnWrp button {
  width: auto;
  flex-grow: 1;
}

.bookingSelect .newNoLevel .btnWrp button {
  flex: 1;
  min-width: 140px;
}

.newBookingPopup > div button.att,
.goClassNowPopup > div button.att,
.levelReserveBlock .buttonWarp button.att,
.courseFilterSelect_m .btnWrp button.att,
.bookingSelect .newNoLevel .btnWrp button.att,
.oneabcBookingStart .btnWrp button.att,
.learninPurpose .btnWrp button.att,
.newMbrBuy .btnWrp button.att,
.myStudyPlan .btnWrp button.att,
.bookingCalendar .btnWrp button.att,
.orderCancelWrp .btnWrp button.att {
  background: #003bff;
  color: #fff;
  margin-bottom: 10px;
  border-color: #003bff;
  transition:
    background 0.3s,
    border 0.3s;
}

.newBookingPopup > div button.att:hover,
.goClassNowPopup > div button.att:hover,
.levelReserveBlock .buttonWarp button.att:hover,
.courseFilterSelect_m .btnWrp button.att:hover,
.bookingSelect .newNoLevel .btnWrp button.att:hover,
.oneabcBookingStart .btnWrp button.att:hover,
.learninPurpose .btnWrp button.att:hover,
.newMbrBuy .btnWrp button.att:hover,
.myStudyPlan .btnWrp button.att:hover,
.bookingCalendar .btnWrp button.att:hover,
.orderCancelWrp .btnWrp button.att:hover {
  background: #112f82;
  border-color: #112f82;
}

.goClassNowPopup > div button.att,
.levelReserveBlock .buttonWarp button.att,
.courseFilterSelect_m .btnWrp button.att,
.bookingSelect .newNoLevel .btnWrp button.att,
.oneabcBookingStart .btnWrp button.att,
.learninPurpose .btnWrp button.att,
.newMbrBuy .btnWrp button.att,
.myStudyPlan .btnWrp button.att,
.bookingCalendar .btnWrp button.att,
.orderCancelWrp .btnWrp button.att {
  margin-bottom: 0;
}

.learninPurpose .btnWrp button.disable,
.learninPurpose .btnWrp button.disable:hover,
.bookingCalendar .btnWrp button.disable,
.bookingCalendar .btnWrp button.disable:hover {
  background: #f0f0f0;
  color: #aaa;
  border-color: #f0f0f0;
  cursor: default;
}

.bookedClassList .courseListWrp .courseImg {
  margin-right: 15px;
  margin-bottom: 0;
}

.bookedClassList .courseListWrp .courseTitle h3 {
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  color: #535251;
  overflow: hidden;
  width: calc(100% - 330px);
  margin-bottom: 10px;
  height: 43px;
  transition: color 0.3s;
  cursor: pointer;
  line-height: 20px;
}

.bookedClassList .courseListWrp .courseTitle h3:hover {
  color: #9f9f9f;
}

.bookedClassList .courseListWrp .courseTitle .levelRange {
  font-size: 14px;
  color: #777;
  margin-bottom: 5px;
  display: block;
}

.bookedClassList .courseListWrp .courseTeacherInfo {
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.bookedClassList .courseListWrp .courseTeacherInfo label {
  margin-right: 10px;
  cursor: pointer;
}

.bookedClassList .courseListWrp .courseTeacherInfo label img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}

.bookedClassList .courseListWrp .courseTeacherInfo strong {
  font-weight: 500;
  font-size: 14px;
  color: #777;
  transition: color 0.3s;
}

.bookedClassList .courseListWrp .courseTeacherInfo:hover strong {
  color: #9f9f9f;
}

.bookedClassList .courseListWrp .tagsPart {
  position: relative;
  overflow: hidden;
  min-height: 21px;
}

.bookedClassList .courseListWrp .tagsPart ul {
  display: inline-flex;
  margin-bottom: 5px;
  overflow: hidden;
}

.bookedClassList .courseListWrp .tagsPart li {
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  color: #777;
  white-space: nowrap;
  margin-right: 5px;
  padding: 2px 10px;
  cursor: pointer;
}

.bookedClassList .courseListWrp .tagsPart.more::before {
  content: "...";
  font-size: 12px;
  color: #777;
  position: absolute;
  right: -1px;
  top: 1px;
  z-index: 1;
}

.bookedClassList .courseListWrp .tagsPart.more::after {
  content: "";
  width: 80px;
  height: 30px;
  position: absolute;
  right: 0;
  top: -5px;
  background: url(../../images/newBooking/mask_right3.png) no-repeat center /
    100% 100%;
}

.bookedClassList .courseCard > li .bookCourseBtn {
  background: #fff;
  box-shadow: 0 4px 10px rgba(196, 194, 193, 0.4);
  border-radius: 20px;
  padding: 5px 20px;
  font-size: 14px;
  color: #777;
  position: absolute;
  right: 20px;
  top: 60px;
  transition: color 0.3s;
  cursor: pointer;
}

.bookedClassList .courseCard > li .bookCourseBtn:hover {
  color: #03328d;
}

.bookedClassList .courseCard > li .bookCourseBtn.active {
  background: #03328d;
  box-shadow: 0 4px 10px rgba(3, 50, 141, 0.2);
  color: #fff;
  padding-left: 15px;
}

.bookedClassList .courseCard > li .bookCourseBtn.booked {
  box-shadow: none;
  background: transparent;
  border: 1px solid #03328d;
  color: #03328d;
  padding: 5px 15px 5px 13px;
}

.bookedClassList .courseCard > li .bookCourseBtn.active::before {
  content: "";
  background: url(../../images/newBooking/checked_white.svg) no-repeat center /
    100% auto;
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 5px;
}

.bookedClassList .courseCard > li .bookCourseBtn.booked::before {
  content: "";
  background: url(../../images/newBooking/checked_red.svg) no-repeat center /
    100% auto;
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 5px;
}

.goClassNowPopup .closePopup,
.floatCalendar .mobileSubmenu span,
.bookingRulesPopup .closePopup/*,
.courseCard .mobileSubmenu span,
.classComingBtn .mobileSubmenu span*/ {
  background: url(../../images/newBooking/cancel_icon.svg) no-repeat center /
    30px auto;
  top: -45px;
  right: 0;
}

.floatCalendar .mobileSubmenu span/*,
.courseCard .mobileSubmenu span,
.classComingBtn .mobileSubmenu span*/ {
  box-shadow: none;
  border-radius: 0;
}

.goClassNowPopup .classNowWrp {
  margin-bottom: 30px;
  background: #eef3ff;
}

.goClassNowPopup .btnWrp,
.BlockWrap .buttonWrap,
.courseFilterSelect_m .btnWrp {
  display: flex;
  justify-content: space-between;
}

.multiSelect .btnWrp {
  display: none;
}

.goClassNowPopup .btnWrp,
.courseFilterSelect_m .btnWrp {
  margin: 0 -2%;
}

.BlockWrap .buttonWrap {
  margin-top: 30px;
}

.goClassNowPopup .title {
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.goClassNowPopup .title span {
  color: #535251;
  font-size: 14px;
  font-weight: 300;
  display: block;
  margin-top: 3px;
}

.goClassNowPopup .subtitle {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}

.goClassNowPopup .btnWr {
  display: flex;
}

.bookingSelect .courseListWrp .courseTime span strong {
  font-weight: 400;
  display: inline-block;
  padding-left: 21px;
  margin-right: 15px;
  position: relative;
  top: -4px;
}

.bookingSelect .courseListWrp .courseTime span strong:first-child {
  background: url(../../images/newBooking/icon_eye.svg) no-repeat left center /
    17px auto;
}

.bookingSelect .courseListWrp .courseTime span strong:last-child {
  background: url(../../images/newBooking/icon_heart_solid.svg) no-repeat left
    center / 17px auto;
  padding-left: 19px;
  margin-right: 0;
}

.bookingSelect .courseListWrp .courseTime span strong u {
  font-family: "Roboto";
  color: #535251;
  vertical-align: 0;
}

.noClassNowTip {
  text-align: center;
  padding: 20px 0 30px;
}

.noClassNowTip h5 {
  font-weight: 700;
  font-size: 18px;
  color: #535251;
  margin-bottom: 10px;
}

.noClassNowTip p {
  font-size: 14px;
  color: #777;
}

.teacherInfoPopup *,
.courseTypePopup *,
.materialIntroPopup *,
.materialPreviewPopup *,
.materialListPopup *,
.materialSelectTypePopup *,
.changeCourseTimePopup *,
.consultantSelectPopup *,
.oxfordTestPopup *,
.leftCourseSessionsPopup *,
.creditsUseTipsPopup *,
.learningProgressPopup *,
.newMbrBuyPopup *,
.contractTransformPopup *,
.chineseTransformPopup *,
.myStudyPlanPopup * {
  box-sizing: border-box;
  line-height: normal;
}

.teacherInfoPopup,
.courseTypePopup,
.materialIntroPopup,
.materialPreviewPopup,
.materialListPopup,
.materialSelectTypePopup,
.changeCourseTimePopup,
.consultantSelectPopup,
.announcementNotice,
.oxfordTestPopup,
.leftCourseSessionsPopup,
.creditsUseTipsPopup,
.learningProgressPopup,
.newMbrBuyPopup,
.contractTransformPopup,
.chineseTransformPopup,
.myStudyPlanPopup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  display: none;
}

.teacherInfoPopup::before,
.courseTypePopup::before,
.materialIntroPopup::before,
.materialPreviewPopup::before,
.materialListPopup::before,
.materialSelectTypePopup::before,
.changeCourseTimePopup::before,
.consultantSelectPopup::before,
.announcementNotice::before,
.oxfordTestPopup::before,
.leftCourseSessionsPopup::before,
.creditsUseTipsPopup::before,
.learningProgressPopup::before,
.newMbrBuyPopup::before,
.contractTransformPopup::before,
.chineseTransformPopup::before,
.myStudyPlanPopup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s;
}

.announcementNotice::before {
  opacity: 1;
  visibility: visible;
  z-index: -1;
}

.teacherInfoPopup.active::before,
.courseTypePopup.active::before,
.materialIntroPopup.active::before,
.materialPreviewPopup.active::before,
.materialListPopup.active::before,
.materialSelectTypePopup.active::before,
.changeCourseTimePopup.active::before,
.consultantSelectPopup.active::before,
.oxfordTestPopup.active::before,
.leftCourseSessionsPopup.active::before,
.creditsUseTipsPopup.active::before,
.learningProgressPopup.active::before,
.newMbrBuyPopup.active::before,
.contractTransformPopup.active::before,
.chineseTransformPopup.active::before,
.myStudyPlanPopup.active::before {
  opacity: 1;
  visibility: visible;
}

.teacherInfoPopup .closePopup,
.courseTypePopup .closePopup,
.materialIntroPopup .closePopup,
.materialPreviewPopup .closePopup,
.materialListPopup .closePopup,
.materialSelectTypePopup .closePopup,
.changeCourseTimePopup .closePopup,
.consultantSelectPopup .closePopup,
.oxfordTestPopup .closePopup,
.leftCourseSessionsPopup .closePopup,
.creditsUseTipsPopup .closePopup,
.learningProgressPopup .closePopup,
.newMbrBuyPopup .closePopup,
.contractTransformPopup .closePopup,
.chineseTransformPopup .closePopup,
.myStudyPlanPopup .closePopup {
  background: url(../../images/newBooking/cancel_icon.svg) transparent no-repeat
    center / 100% auto;
}

.teacherInfoPopup .bookingTeacherInfo,
.courseTypePopup .chooseCourseType,
.materialIntroPopup .materialIntroWrp,
.materialPreviewPopup .materialPreviewWrp,
.materialListPopup .materialListWrp,
.materialSelectTypePopup .materialSelectTypeWrp,
.changeCourseTimePopup .changeCourseTimeWrp,
.consultantSelectPopup .consultantSelectWrp {
  max-width: 100%;
  width: 100%;
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
  transform: translateY(100%);
}

.teacherInfoPopup.open .bookingTeacherInfo,
.courseTypePopup.open .chooseCourseType,
.materialIntroPopup.open .materialIntroWrp,
.materialPreviewPopup.open .materialPreviewWrp,
.materialListPopup.open .materialListWrp,
.materialSelectTypePopup.open .materialSelectTypeWrp,
.changeCourseTimePopup.open .changeCourseTimeWrp,
.consultantSelectPopup.open .consultantSelectWrp {
  transform: translateY(0);
}

.teacherInfoPopup .bookingTeacherInfo.slideUp,
.courseTypePopup .chooseCourseType.slideUp,
.materialIntroPopup .materialIntroWrp.slideUp,
.materialPreviewPopup .materialPreviewWrp.slideUp,
.materialListPopup .materialListWrp.slideUp,
.materialSelectTypePopup .materialSelectTypeWrp.slideUp,
.changeCourseTimePopup .changeCourseTimeWrp.slideUp,
.consultantSelectPopup .consultantSelectWrp.slideUp {
  transform: translateY(-60px);
}

.teacher_introduce_wrap,
.teacher_calendar_wrap,
.teacher_class_schedule_wrap,
.module_preview .preview_title_block,
.preview_tab_block,
.classTypeBlock .typeTitle,
.classTypeBlock .BlockWrap,
.materialIntroPopup .bookClassBlock > div,
.materialListPopup .materialBlock > div,
.materialSelectTypePopup .materialCategoryBlock > div,
.changeCourseTimePopup .changeTimeBlock > div,
.changeTimeBlock .changeTimeTitle,
.consultantSelectPopup .materialBlock > div {
  max-width: 800px;
  margin: 0 auto;
}

.classTypeBlock .typeTitle,
.materialListPopup .materialBlock .title,
.materialSelectTypePopup .materialCategoryBlock .title,
.changeCourseTimePopup .changeTimeBlock .title,
.changeTimeBlock .changeTimeTitle,
.consultantSelectPopup .materialBlock .title {
  margin-top: 40px;
}

.materialIntroPopup .bookClassBlock,
.consultantSelectPopup .materialBlock {
  padding: 40px 0;
}

.teacherInfoPopup .module_teacher_wrapper,
.courseTypePopup .classTypeBlockWrp,
.materialIntroPopup .bookClassBlockWrp,
.materialPreviewPopup .module_preview,
.materialListPopup .materialBlockkWrp,
.materialSelectTypePopup .materialCategoryBlockWrp,
.changeCourseTimePopup .changeTimeBlockWrp,
.consultantSelectPopup .materialBlockkWrp {
  padding: 0 15px;
  height: 100vh;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: #f0f0f3;
}

.teacherInfoPopup .module_teacher_wrapper,
.materialIntroPopup .bookClassBlockWrp,
.materialPreviewPopup .module_preview,
.changeCourseTimePopup .changeTimeBlockWrp {
  height: 100%;
}

.preview_tab_block,
.materialListPopup .materialBlock .BlockWrap,
.materialSelectTypePopup .materialCategoryBlock .BlockWrap,
.classTypeBlock .BlockWrap,
.changeTimeBlock > div.BlockWrap,
.consultantSelectPopup .materialBlock .BlockWrap,
.consultantSelectPopup .materialBlock {
  margin-bottom: 40px;
}

.teacher_class_schedule_wrap,
.changeTimeBlock > div.BlockWrap {
  margin-bottom: 100px;
}

.changeCourseTimePopup .changeTimeBlockWrp {
  padding: 0;
}

.changeCourseTimePopup .changeTimeBlockWrp .BlockWrap,
.changeCourseTimePopup .changeTimeBlockWrp .changeTimeTitle {
  width: calc(100% - 30px);
}

.teacherInfoPopup .module_teacher_inner,
.courseTypePopup .classTypeBlock,
.materialIntroPopup .bookClassBlock,
.materialPreviewPopup .module_preview_inner,
.materialListPopup .materialBlock,
.materialSelectTypePopup .materialCategoryBlock,
.changeCourseTimePopup .changeTimeBlock,
.consultantSelectPopup .materialBlock,
.newOxford .myStudyPlan {
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
}

.module_teacher_wrapper .module_teacher_inner::-webkit-scrollbar,
.courseTypePopup .classTypeBlock::-webkit-scrollbar,
.materialIntroPopup .bookClassBlock::-webkit-scrollbar,
.materialPreviewPopup .module_preview_inner::-webkit-scrollbar,
.materialListPopup .materialBlock::-webkit-scrollbar,
.materialSelectTypePopup .materialCategoryBlock::-webkit-scrollbar,
.changeCourseTimePopup .changeTimeBlock::-webkit-scrollbar,
.consultantSelectPopup .materialBlock::-webkit-scrollbar,
.newOxford .myStudyPlan::-webkit-scrollbar {
  width: 6px;
}

.module_teacher_wrapper .module_teacher_inner::-webkit-scrollbar-track,
.courseTypePopup .classTypeBlock::-webkit-scrollbar-track,
.materialIntroPopup .bookClassBlock::-webkit-scrollbar-track,
.materialPreviewPopup .module_preview_inner::-webkit-scrollbar-track,
.materialListPopup .materialBlock::-webkit-scrollbar-track,
.materialSelectTypePopup .materialCategoryBlock::-webkit-scrollbar-track,
.changeCourseTimePopup .changeTimeBlock::-webkit-scrollbar-track,
.consultantSelectPopup .materialBlock::-webkit-scrollbar-track,
.newOxford .myStudyPlan::-webkit-scrollbar-track {
  background: transparent;
  position: relative;
  top: 20px;
  bottom: 20px;
}

.module_teacher_wrapper .module_teacher_inner::-webkit-scrollbar-thumb,
.courseTypePopup .classTypeBlock::-webkit-scrollbar-thumb,
.materialIntroPopup .bookClassBlock::-webkit-scrollbar-thumb,
.materialPreviewPopup .module_preview_inner::-webkit-scrollbar-thumb,
.materialListPopup .materialBlock::-webkit-scrollbar-thumb,
.materialSelectTypePopup .materialCategoryBlock::-webkit-scrollbar-thumb,
.changeCourseTimePopup .changeTimeBlock::-webkit-scrollbar-thumb,
.consultantSelectPopup .materialBlock::-webkit-scrollbar-thumb,
.newOxford .myStudyPlan::-webkit-scrollbar-thumb {
  background-color: #c4c2c1;
  border-radius: 10px;
}

@-webkit-keyframes boxTip {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
    transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
    transform: translateY(-6.4px);
  }
}
@keyframes boxTip {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
    transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
    transform: translateY(-6.4px);
  }
}

.oxfordTestPopup,
.leftCourseSessionsPopup,
.creditsUseTipsPopup,
.learningProgressPopup,
.newMbrBuyPopup,
.contractTransformPopup,
.chineseTransformPopup,
.myStudyPlanPopup {
  align-items: center;
  justify-content: center;
  height: 100%;
}

.oxfordTestPopup.active,
.leftCourseSessionsPopup.active,
.creditsUseTipsPopup.active,
.learningProgressPopup.active,
.newMbrBuyPopup.active,
.contractTransformPopup.active,
.chineseTransformPopup.active,
.myStudyPlanPopup.active {
  display: flex;
}

.oxfordTestTipWrp,
.leftCourseSessionsWrp,
.creditsUseTipsWrp,
.learningProgressWrp,
.newMbrBuyWrp,
.contractTransformWrp,
.chineseTransformWrp,
.myStudyPlanWrp {
  position: relative;
  background: #fff;
  border-radius: 8px;
  max-width: 600px;
  text-align: center;
  padding: 40px;
  width: 100%;
  max-height: 80vh;
}

.oxfordTestTipWrp .closePopup,
.leftCourseSessionsWrp .closePopup,
.creditsUseTipsWrp .closePopup,
.learningProgressWrp .closePopup,
.newMbrBuyWrp .closePopup,
.contractTransformWrp .closePopup,
.chineseTransformWrp .closePopup,
.myStudyPlanWrp .closePopup {
  top: -40px;
  right: 0;
}

.oxfordTestPopup .oxfordTestTip h4,
.leftCourseSessions h4,
.creditsUseTips h4,
.learningProgressWrp h4,
.newMbrBuyWrp h4,
.contractTransformWrp h4,
.chineseTransformWrp h4,
.myStudyPlanWrp h4 {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  margin-bottom: 6px;
}

.oxfordTestPopup .oxfordTestTip p {
  font-size: 14px;
  font-weight: 300;
  color: #555;
  margin-bottom: 15px;
  line-height: 20px;
}

.oxfordTestPopup .oxfordTestTip img {
  max-width: 90%;
  max-height: 35vh;
  display: block;
  margin: 0 auto 20px;
}

.BlockWrap .buttonWrap a:not(.order) {
  margin-right: 0;
}

.teacher_class_schedule_wrap .viewMore,
.bookingSelectTeacher .viewMore {
  color: #003bff;
  padding: 8px 20px;
  border: 1px solid #003bff;
  border-radius: 30px;
  background: transparent;
  margin: -20px auto 30px;
  cursor: pointer;
  display: block;
}

.materialSelectTypePopup div.category2,
.materialSelectTypePopup div.category3 {
  display: none;
  margin: 40px auto;
}

.changeTimeBlock .changeTimeTitle {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 400;
  margin-top: 0;
}

.changeTimeBlock .changeTimeTitle span {
  font-weight: 300;
  font-size: 14px;
  color: #333;
  margin-left: 8px;
  vertical-align: 1px;
}

.changeTimeBlock .BlockWrap {
  background: #fff;
  padding: 40px;
  border-radius: 8px;
}

.materialIntroPopup .buttonWrap .order.active::before,
.materialIntroPopup .buttonWrap .order.conflict::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/checked_red.svg) no-repeat center /
    100% auto;
  margin: 0 5px 3px 0;
}

.noVocabulary,
.noWaterlevel .maskTip {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.noWaterlevel .maskTip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.noWaterlevel {
  position: relative;
  min-height: 300px;
}

.noWaterlevel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  z-index: 1;
}

.noVocabulary img,
.noWaterlevel .maskTip img {
  width: 100px;
}

.noVocabulary {
  min-height: 400px;
}

.materialPageWiden .noVocabulary {
  min-height: 630px;
}

.materialPageWiden .noVocabulary img {
  max-width: 100px;
}

.noVocabulary p,
.noWaterlevel .maskTip p {
  color: #9f9f9f;
  font-size: 14px;
  margin: 15px 0 25px;
  padding: 0 15px;
  text-align: center;
}

/* 首頁改版開始 */

.newMain .classComingNew .classComingWrp,
.newMain .classFinishedNew .classComingWrp,
.courseListWrp .courseCard .courseCardWrp,
.courseListWrp .courseCard .courseCardWrpNobtn {
  border: 1px solid #e2e2e2;
  border-radius: 12px 12px 0 0;
  background: url(../../images/newBooking/arr_right.svg) #f8f8f8 no-repeat right
    15px center / 20px auto;
}

.newMain .classFinishedNew .classComingWrp,
.courseListWrp .courseCard .courseCardWrpNobtn {
  border-radius: 12px;
  padding: 20px;
}

.newMain .classFinishedNew .classComingWrp:not(:last-child) {
  margin-bottom: 15px;
}

.newMain .classComing.classComingNew .courseImg,
.newMain .classComing.classFinishedNew .courseImg {
  width: 133px;
  margin-bottom: 0;
}

.newMain .classComing.classComingNew .courseTitle,
.newMain .classComing.classFinishedNew .courseTitle {
  padding-left: 150px;
}

.classComingNew .classComingBtn,
.courseListWrp .courseBtn {
  background: #f8f8f8;
  border: 1px solid #e2e2e2;
  border-radius: 0 0 12px 12px;
  border-top: none;
  padding: 10px 15px;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.classComingNew .classComingBtn > button,
.classComingNew .classComingBtn > a,
.courseBtn .courseMaterial,
.courseBtn .intoClass,
.courseCard .courseBtn .changeClass {
  color: #777;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(196, 194, 193, 0.4);
  font-size: 14px;
  width: 120px;
  text-align: center;
  padding: 8px;
  transition: color 0.3s;
  margin: 0 5px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.classComingNew .classComingBtn > button:hover,
.courseCard .courseBtn .changeClass:hover {
  color: #03328d;
}

.classComingNew .classComingBtn > button.editClassComing,
.courseCard .courseBtn .changeClass {
  background: transparent;
  border: 1px solid #c5d0ed;
  box-shadow: none;
  margin-right: auto;
}

.freeBooking.courseCard .courseBtn .editClassChange .changeClass {
  border: none;
  margin: 0;
  text-align: left;
  width: auto;
}

.freeBooking.courseCard .courseBtn .editClassChange .cancelClass {
  border: none;
  background: transparent;
  min-width: auto;
  margin: 0;
  display: block;
}

.classComingNew .courseTip {
  background: rgba(32, 31, 31, 0.8);
  color: #fff;
  font-size: 14px;
  padding: 8px 12px;
  text-align: left;
  display: none;
  border-radius: 0 0 12px 12px;
}

.classComingNew .courseTip a {
  color: #dac7a7;
  text-decoration: underline;
  vertical-align: 0;
}

.classComingNew > div.active .classComingBtn,
.courseListWrp li.active .courseBtn {
  border-radius: 0;
}

.classComingNew > div.active .courseTip {
  display: block;
}

.classComingNew > div:not(:last-child) {
  margin-bottom: 15px;
}

.classComingNew .classComingBtn .goClassComing.active {
  background: #03328d;
  box-shadow: 0 4px 10px rgba(3, 50, 141, 0.2);
  color: #fff;
  transition: 0.3s;
}

.classComingNew .classComingBtn .goClassComing.active:hover {
  background: #183265;
}

.classComingNew .courseTitle h5,
.classComingNew .courseTitle p,
.classFinishedNew .courseTitle h5,
.classFinishedNew .courseTitle p,
.courseCard .courseTitle h5,
.courseCard .courseTitle p {
  transition: 0.3s;
}

.classComingNew .courseTitle:hover h5,
.classComingNew .courseTitle:hover p,
.classFinishedNew .courseTitle:hover h5,
.classFinishedNew .courseTitle:hover p,
.courseCard .courseTitle:hover h5,
.courseCard .courseTitle:hover p {
  color: #9f9f9f;
}

.classFinishedNew .courseTitle p.stateShow,
.courseListWrp .courseTitle span.showUp {
  background: url(../../images/newBooking/correct_with_circle.svg) no-repeat 0
    5px / 15px auto;
  color: #0ead74;
  padding-left: 20px;
  font-size: 14px;
  margin-left: 1px;
  line-height: 24px;
}

.classFinishedNew .courseTitle p.stateNoShow,
.courseListWrp .courseTitle span.noShow {
  background: url(../../images/newBooking/wrong_with_circle.svg) no-repeat 0
    5px / 15px auto;
  color: #ee5a50;
  padding-left: 20px;
  font-size: 14px;
}

.courseListWrp .courseTitle span.showUp,
.courseListWrp .courseTitle span.noShow {
  background-position: 0 0;
  display: block;
  margin-bottom: 5px;
}

.materialListPopup .materialBlock > div p.changeMaterial {
  color: #535251;
  font-size: 14px;
  margin-bottom: 10px;
}

.changeCourseType {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.changeCourseType > span.ttl {
  font-size: 14px;
  color: #777;
  display: inline-block;
  margin-right: 10px;
}

.changeCourseType > div {
  position: relative;
  max-width: 100%;
}

.changeCourseType div.slt {
  border-radius: 4px;
  padding: 5px 30px 5px 10px;
  background: url(../../images/newBooking/arr_down.svg) #f2f2f2 no-repeat right
    8px center / 12px auto;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}

.changeCourseType .open div.slt {
  background: url(../../images/newBooking/arr_down_white.svg) #003bff no-repeat
    right 8px center / 12px auto;
  color: #fff;
  border-color: #003bff;
}

.changeCourseType div ul {
  opacity: 0;
  visibility: hidden;
  background: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  position: absolute;
  top: 25px;
  left: 0;
  transition:
    opacity 0.4s,
    top 0.4s;
}

.changeCourseType div.open ul {
  opacity: 1;
  visibility: visible;
  top: 35px;
}

.changeCourseType div li {
  font-size: 14px;
  color: #777;
  border-radius: 5px;
  padding: 4px 8px;
  transition:
    background 0.3s,
    color 0.3s;
  cursor: pointer;
  white-space: nowrap;
  line-height: normal;
}

.changeCourseType div li:hover {
  background: #edf1ff;
  color: #003bff;
}

.courseListWrp .courseCardWrp .courseTitle {
  min-height: 105px;
}

.announcementNotice {
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcementNoticeWrp {
  max-width: 520px;
  width: 60vh;
}

.announcementNotice .page {
  color: #fff;
  font-size: 18px;
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

.announcementNotice .annContent {
  border-radius: 8px;
  overflow: hidden;
  height: 0;
  padding-bottom: 100%;
  background: #eef3ff;
  position: relative;
}

.announcementNotice .annContent img {
  width: 100%;
}

.announcementNotice button {
  color: #fff;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border: 1px solid #fff;
  background: transparent;
  width: 100%;
  border-radius: 30px;
  margin-top: 10px;
  cursor: pointer;
}

.announcementNotice button.next {
  border-color: #003bff;
  background: #003bff;
  margin-top: 20px;
}

.announcementNotice .annText {
  font-size: 16px;
  color: #535251;
  line-height: 24px;
  padding: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  left: 0;
  overflow: auto;
  padding-left: 25px;
}

.announcementNotice .annText .title {
  font-weight: 400;
  font-size: 16px;
  color: #333;
  text-align: center;
  margin: 5px 0;
}

.for_pad .pg_bookingv2_title,
.isApp .curriculumNav,
.for_pad .curriculumNav {
  padding-top: 30px;
}

.isApp .update-modal_close.pg_oxfordmodify_close,
#oxford_modify .isApp .modal-header-title,
#oxford_modify .isApp .modal-header-underline {
  display: none;
}

#ChangeDisneyLevel .modal-layout,
#disney_modal_layout {
  z-index: 99999999;
}

.courseCard li .attend {
  color: #003bff;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.courseCard li .attend::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../../images/newBooking/alert_circle.svg) no-repeat center /
    16px auto;
  margin-right: 5px;
}

.changeBrowser {
  border-radius: 20px;
  background: #fff;
  max-width: 900px;
  margin: 60px auto;
  padding: 100px 20px 130px;
}

.changeBrowser h4 {
  text-align: center;
  font-size: 28px;
  color: #201f1f;
  font-weight: 400;
  margin-bottom: 15px;
}

.changeBrowser p {
  text-align: center;
  max-width: 340px;
  color: #535251;
  line-height: 24px;
  margin: 0 auto 40px;
}

.changeBrowser ul {
  display: flex;
  justify-content: center;
}

.changeBrowser li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  background: #eef3ff;
  padding: 20px 30px;
  margin: 0 10px;
}

.changeBrowser li span {
  font-size: 14px;
  color: #535251;
  display: inline-block;
  width: 80px;
  text-align: center;
}

.changeBrowser li span::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../../images/newBooking/arr_right.svg) no-repeat center / 16px
    auto;
  display: inline-block;
  vertical-align: -3px;
  margin-left: 5px;
  margin-right: -10px;
}

.changeBrowser li img {
  width: 80px;
  margin-bottom: 10px;
}

.referral {
  border-radius: 8px;
  background: #fff;
  padding: 30px 20px 20px;
  margin-bottom: 15px;
  background:
    url(../../images/newBooking/referral_bg.png),
    linear-gradient(to right, #002399 0%, #003cff 100%);
  background-repeat: no-repeat, repeat;
  background-position:
    0 0,
    0 0;
  background-size:
    100% auto,
    auto;
}

.referral.corp {
  background:
    url(../../images/newBooking/referral_corp_bg.png),
    linear-gradient(to right, #002399 0%, #003cff 100%);
  background-repeat: no-repeat, repeat;
  background-position:
    0 0,
    0 0;
  background-size:
    100% auto,
    auto;
  position: relative;
  padding-top: 50px;
}

.referral.corp label {
  border-radius: 0 0 50px 50px;
  background: #fff;
  padding: 5px 30px 8px;
  font-size: 16px;
  color: #03c;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: default;
  white-space: nowrap;
}

.newMain .referral {
  display: none;
}

.referral .ttl {
  text-align: center;
}

.referral .ttl p {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 34px;
  text-shadow: 0 0px 5px #002399;
}

.referral.corp .ttl p {
  line-height: 28px;
  margin-bottom: 3px;
}

.referral .ttl span {
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  position: relative;
  display: inline-block;
  max-width: 70%;
}

.referral .ttl span::after {
  content: "";
  background: url(../../images/newBooking/referral_img.svg) no-repeat center /
    100% auto;
  width: 50px;
  height: 50px;
  position: absolute;
  right: -55px;
  top: -25px;
}

.referral.corp2 {
  background:
    url(../../images/newBooking/referral_corp2_bg.png),
    linear-gradient(to right, #002399 0%, #003cff 100%);
  background-repeat: no-repeat, repeat;
  background-position:
    50% 0,
    0 0;
  background-size:
    auto 420px,
    auto;
  position: relative;
  padding-top: 45px;
}

.referral.corp2 label {
  border-radius: 0 0 15px 15px;
  background: #7b85ff;
  padding: 5px 30px 8px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: default;
  white-space: nowrap;
}

.referral.corp2 .ttl p {
  font-size: 24px;
  line-height: 30px;
  display: inline-block;
  position: relative;
  max-width: 70%;
}

.referral.corp2 .ttl p::after {
  content: "";
  background: url(../../images/newBooking/referral_two_star.svg) no-repeat
    center / 100% auto;
  width: 23px;
  height: 25px;
  position: absolute;
  right: -55px;
  top: 5px;
}

.referral.corp2 .ttl span {
  font-size: 24px;
  max-width: none;
  vertical-align: baseline;
  font-weight: 300;
  position: relative;
  max-width: 95%;
}

.referral.corp2 .ttl span::after {
  width: 9px;
  height: 10px;
  background: url(../../images/newBooking/referral_one_star.svg) no-repeat
    center / 100% auto;
  bottom: -8px;
  left: -15px;
  top: auto;
}

.referral.corp2 .ttl span b {
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(
    180deg,
    #fff -3.06%,
    #bdbff0 24.66%,
    #fff 53.28%,
    #a3a7ff 86.36%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 8px;
  vertical-align: -2px;
  font-family: "Inter";
}

.referral.corp2 .ttl span b i {
  font-size: 24px;
  font-style: normal;
}

.memberMenu .referral.corp2 label {
  padding: 5px 15px 8px;
}

.memberMenu .referral.corp2 .ttl p {
  font-size: 18px;
}

.memberMenu .referral.corp2 .ttl span {
  font-size: 18px;
}

.memberMenu .referral.corp2 .ttl span b {
  font-size: 30px;
}

.memberMenu .referral.corp2 .ttl span b i {
  font-size: 22px;
  vertical-align: 0;
}

.referral .socialLink {
  padding-top: 10px;
  height: 0;
  overflow: hidden;
  width: 100%;
}

.referral .socialLink ul {
  display: flex;
  justify-content: space-between;
  max-width: 250px;
  margin: 0 auto;
}

.referral .socialLink .divid {
  position: relative;
  text-align: center;
  margin: 15px 0;
  display: flex;
  align-items: center;
}

.referral .socialLink .divid::before,
.referral .socialLink .divid::after {
  content: "";
  height: 1px;
  background: #fff;
  flex-grow: 1;
}

.referral .socialLink .divid b {
  color: #fff;
  font-size: 14px;
  padding: 0 10px;
  font-weight: 400;
}

.referral .socialLink > span {
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
  display: block;
  text-align: center;
}

.referral .socialLink .copy {
  padding: 15px 45px 15px 15px;
  background: url(../../images/newBooking/copy2.svg) #f8f8f8 no-repeat right
    13px center / 20px auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #003bff;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.referral .more {
  background: #ee79ee;
  border-radius: 30px;
  color: #fff;
  text-align: center;
  width: 100%;
  padding: 10px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.referral.corp2 .more {
  background: linear-gradient(
    223deg,
    #fff 5.32%,
    #bdbff0 31.9%,
    #fff 59.33%,
    #a3a7ff 91.05%
  );
  color: #080808;
  padding: 6px 30px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.referral .more.open {
  background: transparent;
  font-size: 14px;
  font-weight: 400;
}

.referral.corp2 .more.open {
  color: #fff;
}

.referral .more.open::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/arr_down_white.svg) no-repeat center /
    20px auto;
  display: block;
  rotate: x -180deg;
  margin: 0 auto;
}

.referral .more.open:after {
  background-image: url(../../images/newBooking/arrowup_color.svg);
}

.newMain .referral {
  display: none;
}

.module_preview.courseIntro {
  background: #fff;
  padding: 0;
  border-radius: 8px;
}

.module_preview.courseIntro .preview_title_block {
  margin-top: 0;
}

.module_preview.courseIntro * {
  box-sizing: border-box;
}

.module_preview.courseIntro .module_preview > .module_preview_inner {
  max-width: 100%;
}

.bookingSelectNew {
  background: #fff;
  border-radius: 8px;
  position: relative;
  padding: 40px;
  margin-bottom: 15px;
}

.bookingSelectNew h4.title {
  font-weight: 400;
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.bookingSelectNew .selectDateCycle {
  font-weight: 400;
  font-size: 14px;
  display: flex;
  align-items: center;
  color: #777;
  margin-bottom: 20px;
}

.bookingSelectNew .selectDateCycle button {
  background: url(../../images/newBooking/arr_down.svg) #f8f8f8 no-repeat center
    right 10px / 12px auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  margin: 0 10px;
  padding: 3px 30px 3px 10px;
  cursor: pointer;
  line-height: normal;
}

.bookingSelectNew .selectDateCycle button.active {
  background-image: url(../../images/newBooking/arr_down_white.svg);
  background-color: #003bff;
  border-color: #003bff;
  color: #fff;
}

.bookingSelectNew .choosePeriod {
  background: #f2f2f2;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 10px;
}

.bookingSelectNew .choosePeriod ul {
  display: flex;
  justify-content: space-between;
}

.bookingSelectNew .choosePeriod li {
  min-width: 19%;
  padding: 3px 10px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ddd;
  transition:
    background 0.4s,
    color 0.4s,
    border 0.4s;
  background: #fff;
  color: #555;
  border-radius: 4px;
  font-size: 16px;
  width: auto;
  margin: 0 0.5%;
  box-sizing: border-box;
}

.bookingSelectNew .choosePeriod li.active {
  background: #003bff;
  color: #fff;
  border-color: #003bff;
}

.bookingSelectNew .choosePeriod li.disable {
  background: #ddd;
  color: #bbb;
  cursor: default;
}

.bookingSelectNew .cyclePlan,
.bookingSelectNew .noPlan {
  background: #f2f2f2;
  border-radius: 4px;
  padding: 20px 15px;
}

.bookingSelectNew .cyclePlan ul {
  display: flex;
  justify-content: space-between;
}

.bookingSelectNew .cyclePlan ul:not(:last-child) {
  margin-bottom: 12px;
}

.bookingSelectNew .cyclePlan ul:first-child {
  margin-bottom: 20px;
}

.bookingSelectNew .cyclePlan li:not(:first-child) {
  width: calc((100% - 45px) / 7 - 1.5%);
  text-align: center;
  border: 1px solid transparent;
}

.bookingSelectNew .cyclePlan li:first-child {
  width: 45px;
  display: flex;
  align-items: center;
}

.bookingSelectNew .cyclePlan li:first-child p {
  color: #555;
}

.bookingSelectNew .selectTimeNew li:not(:first-child),
.courseDays .selectTimeNew li {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  height: 40px;
  transition:
    background-color 0.4s,
    border 0.4s;
}

.bookingSelectNew .selectTimeNew li:not(:first-child).open,
.bookingSelectNew .selectTimeNew li:not(:first-child):hover,
.courseDays .selectTimeNew li {
  background: url(../../images/newBooking/add_white_icon.svg) #bbcbff no-repeat
    center / 12px auto;
  border-color: #bbcbff;
}

.courseDays .selectTimeNew li.active {
  background: #fff;
}

.courseDays .cyclePlan li {
  width: calc((100% - 70px) / 7);
  flex-basis: auto;
  flex-grow: 0;
  text-align: center;
}

.courseDays .cyclePlan .week {
  margin-bottom: 10px;
}

.courseDays .cyclePlan .week li {
  font-weight: 400;
  font-size: 14px;
  color: #555;
}

.bookingSelectNew .selectTimeNew li:not(:first-child).active {
  background: url(../../images/newBooking/checked_white.svg) #003bff no-repeat
    center / 16px auto;
  border-color: #003bff;
}

.bookingSelectNew .cyclePlan li > div {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 100;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(180, 196, 255, 0.5);
  border-radius: 4px;
  padding: 10px;
  display: none;
}

.bookingSelectNew .cyclePlan li.open > div {
  display: block;
}

.bookingSelectNew .cyclePlan li > div button {
  display: block;
  text-align: center;
  color: #555;
  background: transparent;
  font-size: 14px;
  border-radius: 4px;
  padding: 5px;
  min-width: 110px;
  cursor: pointer;
  transition:
    color 0.4s,
    background 0.4s;
  margin-bottom: 1px;
}

.bookingSelectNew .cyclePlan li > div button:hover,
.bookingSelectNew .cyclePlan li > div button.selected {
  background: #edf1ff;
  color: #003bff;
}

.bookingSelectNew .choosePeriod .swiper-button-next {
  background: url(../../images/newBooking/mask_right4.png) no-repeat right
    center / 100% auto;
}

.bookingSelectNew .choosePeriod .swiper-button-prev {
  background: url(../../images/newBooking/mask_left4.png) no-repeat left
    center / 100% auto;
}

.bookingSelectNew .noPlan {
  display: flex;
  align-items: center;
}

.bookingSelectNew .noPlan img {
  width: 60px;
  display: block;
}

.bookingSelectNew .noPlan p {
  padding: 0 20px;
}

.bookingSelectNew .noPlan b {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #555;
  margin-bottom: 5px;
}

.bookingSelectNew .noPlan span {
  font-size: 14px;
  color: #777;
}

.bookingSelectNew .noPlan button,
.categorySelectWrp > button {
  background: #003bff;
  border-radius: 25px;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  padding: 8px 20px;
  min-width: 130px;
  margin-left: auto;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s;
}

.bookingSelectNew .noPlan button:hover,
.categorySelectWrp > button:hover {
  background: #112f82;
}

.bookingSelectNew .noPlan button {
  flex-shrink: 0;
}

.categorySelectWrp,
.courseDaysWrp {
  background: #f8f8f8;
  border-radius: 4px;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.categorySelectWrp ul,
.courseDaysWrp ul,
.selectGrade ul ul {
  display: flex;
  justify-content: space-between;
}

.courseDaysWrp ul {
  margin-bottom: 30px;
}

.categorySelectWrp li,
.courseDaysWrp > ul li,
.selectGrade ul ul li {
  flex: 1;
  max-width: 49%;
}

.selectGradeWrp ul ul li {
  max-width: 100%;
}

.categorySelectWrp label p,
.courseDaysWrp label p,
.selectGradeWrp label p {
  font-size: 16px;
  color: #333;
  transition: color 0.3s;
}

.selectGradeWrp label p b {
  font-weight: 400;
}

.categorySelectWrp label span,
.courseDaysWrp label span {
  color: #777;
  font-size: 12px;
}

.courseDaysWrp label span {
  margin-left: auto;
}

.categorySelectWrp [type="radio"]:checked + label p,
.courseDaysWrp [type="radio"]:checked + label span,
.selectGrade [type="radio"]:checked + label p {
  color: #003bff;
}

.categorySelectWrp label,
.courseDaysWrp label,
.selectGrade label {
  position: relative;
  padding: 10px 12px;
  display: block;
  padding-left: 55px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.3s,
    border 0.3s;
}

.selectGrade label {
  border-color: #f0f0f0;
}

.categorySelectWrp label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 54px;
  height: 100%;
  justify-content: center;
}

.courseDaysWrp label,
.selectGrade label {
  display: flex;
  align-items: center;
  padding: 12px 12px 12px 55px;
  flex-wrap: wrap;
}

.courseDaysWrp label p {
  color: #8ba1f1;
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.courseDaysWrp label p b {
  font-family: "Roboto";
  color: #003bff;
  font-weight: 700;
  font-size: 24px;
  margin-right: 5px;
}

.categorySelectWrp label::before,
.courseDaysWrp label::before,
.weekCycleSelectWrp label::after,
.courseFilter ul.multiSelect label::after,
.courseFilterSelect_m ul.multiSelect label::after,
.selectGrade label::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background-color: #fff;
  background-position: center;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  transition:
    background 0.3s,
    border 0.3s;
}

.selectGrade label::before {
  border-color: #f0f0f0;
}

.categorySelectWrp [type="radio"],
.courseDaysWrp [type="radio"],
.weekCycleSelectWrp [type="checkbox"],
.courseFilter ul.multiSelect [type="checkbox"],
.courseFilterSelect_m ul.multiSelect [type="checkbox"],
.myScheduleA .qnaContent .satisfaction [type="radio"],
.selectGrade [type="radio"] {
  display: none;
}

.categorySelectWrp [type="radio"]:checked + label,
.courseDaysWrp [type="radio"]:checked + label,
.weekCycleSelectWrp [type="checkbox"]:checked + label,
.courseFilter ul.multiSelect [type="checkbox"]:checked + label,
.courseFilterSelect_m ul.multiSelect [type="checkbox"]:checked + label,
.filter_bar.wordsBank .tab_filter li li.active,
.selectGrade [type="radio"]:checked + label {
  background: #edf1ff;
  border-color: #003bff;
  color: #003bff;
}

.categorySelectWrp [type="radio"]:checked + label::before,
.courseDaysWrp [type="radio"]:checked + label::before,
.weekCycleSelectWrp [type="checkbox"]:checked + label::after,
.courseFilter ul.multiSelect [type="checkbox"]:checked + label::after,
.courseFilterSelect_m ul.multiSelect [type="checkbox"]:checked + label::after,
.selectGrade [type="radio"]:checked + label::before {
  border-color: #edf1ff;
  background: url(../../images/newBooking/checked_icon.svg) #fff no-repeat
    center / 16px auto;
}

.courseFilterSelect_m ul.multiSelect {
  margin-bottom: 100px;
}

.categorySelectWrp > button,
.courseDaysWrp + button {
  float: right;
  min-width: 105px;
  margin-top: 15px;
}

.categorySelectWrp > .title {
  margin-bottom: 15px;
}

.lessonSelectWrp .selectBook,
.oxf_level_list .selectBook,
.learningSuccess .selectBook {
  position: relative;
  margin-bottom: 20px;
}

.lessonSelectWrp .selectBook .swiper-slide,
.oxf_level_list .swiper-slide,
.learningSuccess .selectBook .swiper-slide {
  cursor: pointer;
  position: relative;
}

.lessonSelectWrp .selectBook .swiper-slide img,
.oxf_level_list .swiper-slide img,
.learningSuccess .selectBook .swiper-slide img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  display: block;
  border: 3px solid transparent;
  box-sizing: border-box;
}

.lessonSelectWrp .selectBook .swiper-slide.active img,
.oxf_level_list .bookWrp.focus img,
.learningSuccess .selectBook .swiper-slide.active img {
  border-color: #003bff;
}

.lessonSelectWrp .selectBook .swiper-slide p,
.oxf_level_list .swiper-slide p,
.learningSuccess .selectBook .swiper-slide p {
  font-size: 13px;
  margin-top: 3px;
  line-height: 20px;
  text-align: center;
  color: #333;
  transition: color 0.3s;
}

.learningSuccess .selectBook .swiper-slide p {
  margin-top: 4px;
  line-height: 16px;
}

.lessonSelectWrp .selectBook .swiper-slide:hover p,
.oxf_level_list .swiper-slide:hover p,
.learningSuccess .selectBook .swiper-slide:hover p {
  color: #003bff;
}

.lessonSelectWrp .selectBook .swiper-slide label,
.lessonSelect .selectUnit li li > label,
.learningSuccess .selectBook .swiper-slide label {
  background: url(../../images/newBooking/checked_gray.svg) no-repeat center /
    18px auto;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: block;
  border: 1px solid #ddd;
  margin: 10px auto;
  cursor: pointer;
}

.lessonSelectWrp .selectBook .swiper-slide label.active,
.lessonSelect .selectUnit li li > label.active,
.learningSuccess .selectBook .swiper-slide label.active {
  background-image: url(../../images/newBooking/checked_white.svg);
  background-color: #003bff;
  border-color: #003bff;
  cursor: default;
}

.lessonSelectWrp .selectBook .swiper-slide.active,
.learningSuccess .selectBook .swiper-slide.active {
  cursor: default;
}

.lessonSelectWrp .selectBook .swiper-slide.active img,
.learningSuccess .selectBook .swiper-slide.active img {
  border-color: #003bff;
}

.lessonSelectWrp .selectBook .swiper-button-next:after,
.lessonSelectWrp .selectBook .swiper-button-prev:after,
.oxf_level_list .selectBook .swiper-button-prev:after,
.oxf_level_list .selectBook .swiper-button-next:after,
.learningSuccess .selectBook .swiper-button-next:after,
.learningSuccess .selectBook .swiper-button-prev:after {
  content: none;
}

.lessonSelectWrp .selectBook .swiper-button-prev,
.lessonSelectWrp .selectBook .swiper-button-next,
.oxf_level_list .selectBook .swiper-button-prev,
.oxf_level_list .selectBook .swiper-button-next,
.learningSuccess .selectBook .swiper-button-prev,
.learningSuccess .selectBook .swiper-button-next {
  top: 105px;
  z-index: 8;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 1px solid #e4e9f8;
}

.lessonSelectWrp .selectBook .swiper-button-prev,
.oxf_level_list .selectBook .swiper-button-prev,
.learningSuccess .selectBook .swiper-button-prev {
  background: url(../../images/OxfordUpgrade/dropdown_arrow_left_color_default.svg)
    #fff no-repeat center / 20px auto;
  left: -15px;
}

.lessonSelectWrp .selectBook .swiper-button-next,
.oxf_level_list .selectBook .swiper-button-next,
.learningSuccess .selectBook .swiper-button-next {
  background: url(../../images/OxfordUpgrade/dropdown_arrow_right_color_default.svg)
    #fff no-repeat center / 20px auto;
  right: -15px;
}

.lessonSelectWrp .selectBook .swiper-button-next.swiper-button-disabled,
.lessonSelectWrp .selectBook .swiper-button-prev.swiper-button-disabled,
.oxf_level_list .selectBook .swiper-button-prev.swiper-button-disabled,
.oxf_level_list .selectBook .swiper-button-next.swiper-button-disabled,
.learningSuccess .selectBook .swiper-button-next.swiper-button-disabled,
.learningSuccess .selectBook .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}

.lessonSelect .title,
.myScheduleQna .title,
.myScheduleDetail .title,
.clasSchedule .title {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.myScheduleQna .title,
.myScheduleDetail .title,
.clasSchedule .title {
  font-size: 16px;
  position: relative;
}

.myScheduleDetail .title,
.clasSchedule .title {
  display: none;
}

.lessonSelect .title strong,
.myScheduleDetail .title strong,
.clasSchedule .title strong {
  margin-right: 6px;
  font-weight: 400;
}

.myScheduleQna .title strong {
  margin: 0 auto 10px;
  font-weight: 400;
}

.lessonSelect .title span,
.myScheduleQna .title span,
.myScheduleQna .title > ul li {
  font-weight: 300;
  font-size: 12px;
  color: #555;
  margin-left: 5px;
}

.myScheduleQna .title > ul li {
  margin-left: 0;
  line-height: 20px;
  display: flex;
}

.myScheduleQna .title > ul li::before {
  content: "．";
}

.myScheduleQna .title > ul {
  width: 100%;
  margin-bottom: 15px;
}

.lessonSelect .title span b,
.myScheduleQna .title span b {
  font-weight: 300;
  color: #aaa;
}

.lessonSelect .title.editMode {
  margin: 30px 0 3px;
}

.lessonSelect .title.editMode + p {
  color: #003bff;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 15px;
}

.lessonSelect .courseDays {
  overflow: hidden;
}

.lessonSelect .courseDaysWrp .title {
  margin-top: 0;
  padding: 0;
  color: #003bff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}

.lessonSelect .courseDaysWrp .ttl {
  color: #333;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.lessonSelect .courseDaysWrp .ttl span {
  margin: 0 5px;
}

.lessonSelect .courseDaysWrp {
  margin-bottom: 15px;
}

.lessonSelect .selectUnit > ul > li {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.lessonSelect .selectUnit li .courseSubject {
  background: url(../../images/newBooking/dropdown_pink.svg) #f8f8f8 no-repeat
    top 15px right 15px / 16px auto;
  padding: 12px 15px;
  cursor: pointer;
  transition: background 0.3s;
}

.lessonSelect .selectUnit li.open .courseSubject {
  background: url(../../images/newBooking/dropup_pink.svg) #edf1ff no-repeat top
    15px right 15px / 16px auto;
}

.lessonSelect .selectUnit li .courseSubject h4 {
  color: #0037cc;
  font-weight: 300;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  padding-right: 25px;
}

.lessonSelect .selectUnit li.open .courseSubject h4 {
  font-weight: 400;
}

.lessonSelect .selectUnit li .courseSubject h4 b {
  font-weight: 700;
  font-size: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

.lessonSelect .selectUnit li .courseSubject p {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 14px;
  color: #555;
  padding-left: 20px;
  background: url(../../images/newBooking/clock_color_default.svg) no-repeat
    left center / 16px auto;
  margin-top: 6px;
}

.lessonSelect .selectUnit li .subjectIntro {
  padding: 0 15px;
  background: #f8f8f8;
  height: 0;
  overflow: hidden;
  display: flex;
  transition: background 0.3s;
}

.lessonSelect .selectUnit li.open .subjectIntro {
  position: relative;
  background: #edf1ff;
  height: auto;
}

.lessonSelect .selectUnit li.open .subjectIntro::before {
  content: "";
  width: calc(100% - 30px);
  height: 1px;
  background: #fff;
  top: 0;
  left: 15px;
  position: absolute;
}

.lessonSelect .selectUnit li .subjectIntro label {
  padding: 15px 0;
  position: relative;
  cursor: default;
}

.lessonSelect .selectUnit li .subjectIntro label a {
  position: absolute;
  right: 0;
  top: 60px;
  width: 35px;
  height: 35px;
  background: url(../../images/newBooking/icon_play.png) no-repeat center / 35px
    auto;
}

.lessonSelect .selectUnit li .subjectIntro img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.lessonSelect .selectUnit li .subjectIntro p {
  font-weight: 400;
  font-size: 12px;
  color: #333;
  padding: 15px 0 15px 10px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  height: 95px;
}

.lessonSelect .pgsBar {
  background: #edf1ff;
  height: 6px;
}

.lessonSelect .pgsBar label {
  height: 100%;
  display: block;
  background: #d1dbff;
}

.selectUnit li.open .pgsBar {
  background: #d1dbff;
}

.selectUnit li.open .pgsBar label {
  background: #0037cc;
}

.lessonSelect .selectUnit ul ul {
  height: 0;
  overflow: hidden;
}

.lessonSelect .selectUnit li.open > ul {
  height: auto;
}

.lessonSelect .selectUnit li li,
.clasSchedule .courseListWrp li {
  display: flex;
  align-items: center;
  position: relative;
  background: #f2f2f2;
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
}

.clasSchedule .courseListWrp li {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* .clasSchedule .courseListWrp li:last-child {
	margin-bottom: 0;
} */

.lessonSelect .selectUnit li li > div,
.clasSchedule .courseListWrp li > .cWap {
  flex-grow: 1;
  min-height: 80px;
  cursor: pointer;
}

.lessonSelect .selectUnit li li > div {
  min-height: auto;
}

.clasSchedule .courseListWrp li > .cWap {
  max-width: calc(100% - 155px);
}

.lessonSelect .selectUnit li li > div p,
.clasSchedule .courseListWrp li > .cWap p {
  margin-bottom: 8px;
  padding-right: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clasSchedule .courseListWrp li > .cWap p {
  margin-bottom: 5px;
  pointer-events: none;
  font-size: 16px;
}

.clasSchedule .courseListWrp li > .cWap p.courseType {
  min-height: 22px;
  margin-bottom: 2px;
}

.clasSchedule .courseListWrp li > .cWap p.dateTime {
  font-family: "Noto Sans TC";
}

.lessonSelect .selectUnit li li > div p.courseTitle,
.clasSchedule .courseListWrp li > .cWap p.courseTitle {
  margin-bottom: 10px;
  padding-left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clasSchedule .courseListWrp li > .cWap p.courseTitle {
  margin-bottom: 6px;
  min-height: 24px;
  /* display: flex;
    align-items: center; */
}

.lessonSelect .selectUnit li li > div p.courseTitle {
  margin-bottom: 0;
  white-space: normal;
}

.lessonSelect .selectUnit li li > label,
.clasSchedule .courseListWrp li > label {
  margin-right: 20px;
  background-color: #fff;
  flex-shrink: 0;
}

.clasSchedule .courseListWrp li > label {
  cursor: pointer;
  position: relative;
}

.clasSchedule .courseListWrp li > label img {
  width: 135px;
  height: 100px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.normalBookingCartList li,
.classNowResult {
  padding: 15px 20px;
  border-radius: 4px;
  background: #f2f2f2;
  margin-bottom: 15px;
  position: relative;
}

.normalBookingCartList li:last-child {
  margin-bottom: 0;
}

.normalBookingCartList li > p,
.normalBookingCartList li > p.courseTeacher,
.classNowResult > p,
.classNowResult > p.courseTeacher {
  margin-bottom: 8px;
}

.normalBookingCartList li > p.courseTitle:before,
.classNowResult > p.courseTitle:before {
  content: "";
  width: 22px;
  height: 22px;
  background: url(../../images/newBooking/book_color_default.svg) no-repeat
    center / 22px auto;
  margin-right: 10px;
}

.normalBookingCartList li > p.courseTeacher:before,
.classNowResult > p.courseTeacher:before {
  content: "";
  width: 22px;
  height: 22px;
  background: url(../../images/newBooking/teacher_color_default.svg) no-repeat
    center / 22px auto;
  margin-right: 10px;
}

.normalBookingCartList li > p.dateTime,
.classNowResult > p.dateTime {
  margin-bottom: 5px;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
}

.normalBookingCartList li > p.dateTime button {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 300;
  color: #333;
  margin-left: auto;
}

.normalBookingCartList li > p.dateTime button::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/pen.svg) no-repeat center / 20px auto;
  margin-right: 3px;
}

.normalBookingCartList li > p.dateTime button.disable {
  color: #aaa;
  cursor: default;
}

.normalBookingCartList li > p.dateTime button.disable::before {
  background-image: url(../../images/newBooking/pen_grey.svg);
}

.lessonSelect .selectUnit li li .dateTime,
.clasSchedule .courseListWrp li .dateTime,
.myScheduleDetail .scheduleDetailCtn .dateTime,
.normalBookingCartList li .dateTime,
.bookClassBlockWrp .warpper .dateTime,
.classNowResult .dateTime {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 16px;
  color: #0037cc;
  display: flex;
}

.lessonSelect .selectUnit li li .dateTime br,
.clasSchedule .courseListWrp li .dateTime br,
.myScheduleDetail .scheduleDetailCtn .dateTime br,
.normalBookingCartList li .dateTime br,
.bookClassBlockWrp .warpper .dateTime br,
.classNowResult .dateTime br {
  display: none;
}

.lessonSelect .selectUnit li li .courseType,
.clasSchedule .courseListWrp li .courseType,
.myScheduleDetail .scheduleDetailCtn .courseType,
.normalBookingCartList li .courseType,
.classNowResult .courseType {
  font-weight: 400;
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.lessonSelect .selectUnit li li .courseType span,
.clasSchedule .courseListWrp li .courseType span,
.myScheduleDetail .scheduleDetailCtn .courseType span,
.normalBookingCartList li .courseType span,
.classNowResult .courseType span {
  display: inline-block;
  position: relative;
  margin-right: 7px;
  padding-right: 8px;
  align-self: flex-start;
}

.clasSchedule .courseListWrp li .courseType span,
.myScheduleDetail .scheduleDetailCtn .courseType span {
  margin-right: 0;
  align-self: center;
}

.lessonSelect .selectUnit li li .courseType span::after {
  content: "";
  width: 1px;
  height: 15px;
  background: #555;
  position: absolute;
  right: 0;
  top: 3px;
}

.lessonSelect .selectUnit li li .courseType span.attend,
.clasSchedule .courseListWrp li .courseType span.attend,
.myScheduleDetail .scheduleDetailCtn .courseType span.attend {
  color: #aaa;
  font-size: 14px;
}

.lessonSelect .selectUnit li li .courseType span.show,
.clasSchedule .courseListWrp li .courseType span.show,
.myScheduleDetail .scheduleDetailCtn .courseType span.show {
  color: #0ead74;
  font-size: 14px;
}

.lessonSelect .selectUnit li li .courseType span.noshow,
.clasSchedule .courseListWrp li .courseType span.noshow,
.myScheduleDetail .scheduleDetailCtn .courseType span.noshow {
  color: #ee5a50;
  font-size: 14px;
}

.lessonSelect .selectUnit li li .courseTeacher,
.clasSchedule .courseListWrp li .courseTeacher,
.myScheduleDetail .scheduleDetailCtn .courseTeacher,
.normalBookingCartList li .courseTeacher,
.normalBookingCartList li .courseTitle,
.classNowResult .courseTeacher,
.classNowResult .courseTitle {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  color: #333;
  margin-bottom: 0;
}

.normalBookingCartList li .courseTeacher span,
.normalBookingCartList li .courseTitle span,
.classNowResult .courseTeacher span,
.classNowResult .courseTitle span {
  font-size: 14px;
  color: #112f82;
  font-weight: 400;
  margin-right: 5px;
}

.normalBookingCartList li .result,
.classNowResult .result {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.normalBookingCartList li .result::before,
.classNowResult .result::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.normalBookingCartList li .result.success,
.classNowResult .result.success {
  color: #0ead74;
}

.classNowResult .result.success::before {
  background: url(../../images/newBooking/checked_green_icon.svg) no-repeat
    center / 20px auto;
}

.normalBookingCartList li .result.success::before {
  background: url(../../images/newBooking/checked_green.svg) no-repeat center /
    20px auto;
}

.normalBookingCartList li .result.fail,
.classNowResult .result.fail {
  color: #ee5a50;
}

.normalBookingCartList li .result.fail::before,
.classNowResult .result.fail::before {
  background: url(../../images/newBooking/alert_circle_red_icon.svg) no-repeat
    center / 20px auto;
}

.normalBookingCartList li .result span,
.classNowResult .result span {
  margin: 0 3px;
}

.normalBookingCartList li div.result button,
.classNowResult div.result button {
  margin-left: auto;
  font-size: 14px;
  padding: 8px 15px;
  min-width: auto;
}

.lessonSelect .selectUnit li li .courseTeacher {
  margin-top: 6px;
}

.lessonSelect .selectUnit li li .courseTeacher label,
.clasSchedule .courseListWrp li .courseTeacher label,
.myScheduleDetail .scheduleDetailCtn .courseTeacher label,
.normalBookingCartList li .courseTeacher label,
.classNowResult .courseTeacher label {
  margin-right: 8px;
  position: relative;
  display: block;
}

.lessonSelect .selectUnit li li .courseTeacher.likeCst label::after,
.clasSchedule .courseListWrp li .courseTeacher.likeCst label::after,
.myScheduleDetail .scheduleDetailCtn .courseTeacher.likeCst label::after,
.normalBookingCartList li .courseTeacher.likeCst label::after,
.classNowResult .courseTeacher.likeCst label::after,
.classInfoWrap .avatar.likeCst::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 1px solid #ddd;
  background: url(../../images/newBooking/icon_heart_pink.svg) #fff no-repeat
    center / 10px auto;
  border-radius: 50%;
  position: absolute;
  right: -3px;
  bottom: 0;
}

.lessonSelect .selectUnit li li .courseTeacher label img,
.clasSchedule .courseListWrp li .courseTeacher label img,
.myScheduleDetail .scheduleDetailCtn .courseTeacher label img,
.normalBookingCartList li .courseTeacher label img,
.classNowResult .courseTeacher label img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.lessonSelect .selectUnit li li .materialPre,
.clasSchedule .courseListWrp li .materialPre {
  position: absolute;
  right: 15px;
  top: 15px;
  font-weight: 400;
  font-size: 12px;
  color: #555;
}

.lessonSelect .selectUnit li li .materialPre:after,
.clasSchedule .courseListWrp li .materialPre:after,
.remindTrial li a:after,
.newMain .goFreeBooking a:after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/arr_right_dark_blue.svg) no-repeat
    center / 20px auto;
  display: inline-block;
  vertical-align: -5px;
}

.lessonSelect .selectUnit li li button,
.clasSchedule .courseListWrp li button,
.courseDaysWrp + .buttonWrap button,
.courseDaysWrp .buttonWrap button,
.classPutOffPopup button,
.myScheduleQna .myQBtnWrp button,
.myScheduleA .qnaContent .satisfaction button,
.myScheduleQna .raiseQuestion button,
.scheduleDetailCtn .btnWrp button,
.newOperateAnons button,
.normalBookingCartList li .result button,
.classNowResult .result button,
.myScheduleDetail a.hwk_submit,
.clasSchedule .courseFilter .multiSelectWrp > button,
.module_preview .goToClass button,
.memberMenu .deskSideMenuLogout a,
.booking_win a,
.bookingSelect .class_noclass a,
.learningRecord .courseFilter .multiSelectWrp > button {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 25px;
  color: #003bff;
  font-weight: 400;
  font-size: 14px;
  min-width: 120px;
  padding: 8px 15px;
  transition: color 0.3s;
  position: absolute;
  bottom: 12px;
  right: 15px;
  cursor: pointer;
  line-height: normal;
}

.myScheduleQna .myQBtnWrp button.clearText {
  color: #777;
}

.clasSchedule .courseListWrp li button {
  top: 100px;
  bottom: auto;
  min-width: 110px;
  padding: 6px 15px;
}

.courseDaysWrp + .buttonWrap button,
.courseDaysWrp .buttonWrap button,
.classPutOffPopup button,
.myScheduleQna .myQBtnWrp button,
.myScheduleA .qnaContent .satisfaction button,
.myScheduleQna .raiseQuestion button,
.scheduleDetailCtn .btnWrp button,
.normalBookingCartList li .result button,
.classNowResult .result button,
.myScheduleDetail a.hwk_submit,
.clasSchedule .courseFilter .multiSelectWrp > button,
.module_preview .goToClass button,
.memberMenu .deskSideMenuLogout a,
.booking_win a,
.learningRecord .courseFilter .multiSelectWrp > button {
  position: static;
  margin-left: 10px;
  padding: 8px 20px;
  font-size: 16px;
}

.memberMenu .deskSideMenuLogout a {
  font-size: 16px;
  border-color: #003bff;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 8px;
}

.booking_win a {
  box-sizing: border-box;
  font-size: 14px;
  margin: 10px 0 0;
  padding: 6px;
  min-width: 100%;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.clasSchedule .courseFilter .multiSelectWrp > button,
.learningRecord .courseFilter .multiSelectWrp > button {
  font-size: 14px;
  min-width: 100%;
  padding: 6px 15px;
  margin: 10px 0 0;
}

.classPutOffPopup button {
  margin: 0;
  min-width: 100%;
}

.courseDaysWrp + .buttonWrap,
.courseDaysWrp .buttonWrap,
.myScheduleQna .myQBtnWrp,
.scheduleDetailCtn .btnWrp {
  display: flex;
  justify-content: flex-end;
}

.myScheduleQna .myQBtnWrp {
  align-items: center;
  margin-top: 30px;
}

.lessonSelect .selectUnit li li button:hover,
.clasSchedule .courseListWrp li button:hover,
.courseDaysWrp + .buttonWrap button:hover,
.courseDaysWrp .buttonWrap button:hover,
.classPutOffPopup button:hover,
.myScheduleQna .myQBtnWrp button:hover,
.scheduleDetailCtn .btnWrp button:hover,
.myScheduleQna .myQBtnWrp button.clearText:hover,
.booking_win a:hover {
  color: #112f82;
}

.lessonSelect .selectUnit li li button.active,
.clasSchedule .courseListWrp li button.active,
.courseDaysWrp + .buttonWrap button.active,
.courseDaysWrp .buttonWrap button.active,
.classPutOffPopup button.active,
.myScheduleQna .myQBtnWrp button.active,
.myScheduleA .qnaContent .satisfaction button,
.myScheduleQna .raiseQuestion button,
.scheduleDetailCtn .btnWrp button.active,
.newOperateAnons button,
.normalBookingCartList li .result button,
.classNowResult .result button,
.myScheduleDetail a.hwk_submit,
.clasSchedule .courseFilter .multiSelectWrp > button,
.module_preview .goToClass button,
.booking_win a.active,
.bookingSelect .class_noclass a,
.learningRecord .courseFilter .multiSelectWrp > button {
  background: #003bff;
  border-color: #003bff;
  color: #fff;
  transition:
    background 0.3s,
    border 0.3s;
}

.classPutOffPopup button.active {
  margin-bottom: 10px;
}

.clasSchedule .courseListWrp li button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lessonSelect .selectUnit li li button.active:hover,
.clasSchedule .courseListWrp li button.active:hover,
.courseDaysWrp + .buttonWrap button.active:hover,
.courseDaysWrp .buttonWrap button.active:hover,
.classPutOffPopup button.active:hover,
.myScheduleQna .myQBtnWrp button.active:hover,
.myScheduleA .qnaContent .satisfaction button:hover,
.myScheduleQna .raiseQuestion button:hover,
.scheduleDetailCtn .btnWrp button.active:hover,
.newOperateAnons button:hover,
.normalBookingCartList li .result button:hover,
.myScheduleDetail a.hwk_submit:hover,
.clasSchedule .courseFilter .multiSelectWrp > button:hover,
.module_preview .goToClass button:hover,
.booking_win a.active:hover,
.bookingSelect .class_noclass a:hover {
  background: #112f82;
  border-color: #112f82;
  color: #fff;
}

.lessonSelect .selectUnit li li button.disable,
.clasSchedule .courseListWrp li button.disable,
.courseDaysWrp + .buttonWrap button.disable,
.myScheduleQna .myQBtnWrp button.disable,
.myScheduleA .qnaContent .satisfaction button.disable,
.scheduleDetailCtn .btnWrp button.disable {
  background: #f0f0f0;
  border-color: #f0f0f0;
  color: #aaa;
  cursor: default;
}

.clasSchedule .courseListWrp li button.bookCourseBtn.active::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/checked_white.svg) no-repeat center /
    20px auto;
  margin-right: 5px;
}

.clasSchedule .courseListWrp li button.bookCourseBtn.booked {
  border-color: #003bff;
}

.clasSchedule .courseListWrp li button.bookCourseBtn.booked:hover {
  color: #003bff;
}

.clasSchedule .courseListWrp li button.bookCourseBtn.booked::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/checked_icon.svg) no-repeat center /
    20px auto;
  margin-right: 5px;
}

.bookingSelect .class_noclass a {
  position: static;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  margin-left: auto;
  max-width: 200px;
  flex-shrink: 0;
  text-align: center;
}

.lessonSelectWrp .confirmBox {
  margin: 30px auto 15px;
  padding: 15px 20px;
  box-sizing: border-box;
  gap: 10px;
}

.confirmBox .selectLesson {
  flex-grow: 1;
  font-weight: 300;
  font-size: 14px;
  color: #333;
}

.confirmBox .selectLesson p {
  font-weight: 400;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-top: 3px;
}

.confirmBox .selectLesson p span {
  color: #003bff;
}

.confirmBox .selectLesson p:first-child {
  margin-top: 6px;
}

.confirmBox .selectLesson p b {
  color: #201f1f;
  font-weight: 400;
  font-size: 14px;
  margin-right: 5px;
  flex-shrink: 0;
  align-self: flex-start;
}

.confirmBox .selectLesson p strong {
  color: #003bff;
  font-weight: 700;
  font-size: 14px;
  margin-right: 6px;
  padding-right: 5px;
  border-right: 1px solid #bbcbff;
  align-self: flex-start;
}

.confirmBox button.pg_bookingv2_cartbox_confirmcart {
  background: #fff;
}

.courseDays .selectTimeNew .active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.courseDays .selectTimeNew .active::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../../images/newBooking/add_color_icon.svg) no-repeat center /
    12px auto;
  margin-left: 5px;
}

.courseDays .selectTimeNew .active p {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 12px;
  color: #0037cc;
  line-height: 16px;
}

.courseDays .selectTimeNew .active p.more {
  text-align: right;
}

.bookClassBlock .weekCycleSelectWrp .title {
  margin-bottom: 10px;
}

.bookClassBlock .weekCycleSelectWrp .title h3 {
  font-weight: 400;
  font-size: 20px;
  color: #333;
}

.bookClassBlock .weekCycleSelectWrp .BlockWrap {
  border-radius: 8px;
  padding: 40px;
}

.bookClassBlock .weekCycleSelectWrp .BlockWrap .buttonWrap {
  position: sticky;
  bottom: -40px;
  background: #fff;
  padding: 30px 40px;
  border-top: 1px solid #ddd;
  margin: 40px -40px -40px;
  border-radius: 0 0 8px 8px;
}

.weekCycleSelectWrp li {
  margin-bottom: 6px;
}

.weekCycleSelectWrp label {
  position: relative;
  padding: 15px;
  color: #333;
  font-family: "Roboto";
  font-weight: 400;
  font-size: 18px;
  display: flex;
  border-bottom: 1px solid #ddd;
}

.weekCycleSelectWrp [type="checkbox"]:checked + label {
  border: none;
  color: #003bff;
  border-radius: 4px;
}

.weekCycleSelectWrp label::after {
  right: 15px;
  left: auto;
}

.weekCycleSelectWrp .BlockWrap > h4 {
  font-weight: 400;
  font-size: 16px;
  color: #555;
  margin-bottom: 15px;
}

.weekCycleSelectWrp li.disable label {
  color: #aaa;
}

.weekCycleSelectWrp li.disable label p {
  color: #bbcbff;
  font-weight: 400;
  font-size: 14px;
  margin-left: auto;
}

.weekCycleSelectWrp li.disable label::after {
  content: none;
}

.bookClassBlock .weekCycleSelectWrp .buttonWrap {
  padding: 0;
}

.curriculumNav .sprLine {
  display: inline-block;
}

.curriculumNav .backBtn.active {
  cursor: default;
  color: #003bff;
}

.curriculumNav .backBtn.active.titl,
.studyPlanTtl button {
  cursor: pointer;
}

.lessonSelect .weekPlans,
.lessonSelect .oneSelectTeacher {
  background: #f8f8f8;
  border-radius: 4px;
  padding: 18px 20px;
  position: relative;
  margin-bottom: 15px;
}

.lessonSelect div:last-child {
  margin-bottom: 0;
}

.lessonSelect .weekPlans h4,
.lessonSelect .oneSelectTeacher h4 {
  color: #333;
  font-weight: 400;
  font-size: 16px;
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
  align-items: flex-start;
}

.lessonSelect .oneSelectTeacher h4 {
  margin-bottom: 0;
}

.lessonSelect .weekPlans h4 p,
.lessonSelect .oneSelectTeacher h4 p {
  color: #555;
  font-weight: 300;
  font-size: 12px;
}

.lessonSelect .weekPlans h4 p {
  transform: scale(0.9);
  transform-origin: left;
}

.lessonSelect .oneSelectTeacher h4 p {
  color: #ee79ee;
}

.lessonSelect .weekPlans .editTool,
.lessonSelect .oneSelectTeacher .editTool,
.lessonSelectWrp > .editTool,
.categorySelectWrp .editTool {
  position: absolute;
  right: 20px;
  top: 15px;
}

.lessonSelectWrp > .editTool {
  right: 40px;
  top: 30px;
}

.lessonSelect .weekPlans .editTool > a,
.lessonSelect .oneSelectTeacher .editTool a,
.lessonSelectWrp > .editTool a,
.categorySelectWrp .editTool a,
.bookingHead .editPlan,
.regularWeeklyClassList .editPlan {
  font-size: 14px;
  color: #777;
  padding: 6px 15px;
  border-radius: 30px;
  border: 1px solid #ddd;
  display: inline-flex;
  background: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bookingHead .editTool,
.regularWeeklyClassList .editTool {
  margin-left: auto;
  cursor: pointer;
  position: relative;
}

.regularWeeklyClassList .editTool {
  display: none;
  margin-left: auto;
}

.regularWeeklyClassList h4 b {
  font-weight: 300;
}

.lessonSelect .weekPlans .editTool > a::before,
.lessonSelect .oneSelectTeacher .editTool a::before,
.lessonSelectWrp > .editTool a::before,
.categorySelectWrp .editTool a:before,
.bookingHead .editPlan:before,
.regularWeeklyClassList .editPlan::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 5px;
  flex-shrink: 0;
}

.bookingSelectNew .bookingHead h3 {
  display: flex;
}

.bookingHead .editPlan:before,
.regularWeeklyClassList .editPlan::before {
  background: url(../../images/newBooking/pen.svg) no-repeat center / 20px auto;
}

.lessonSelect .weekPlans .editTool .putOffBtn::before {
  background: url(../../images/newBooking/postpone.svg) no-repeat center / 20px
    auto;
}

.lessonSelect .weekPlans .editTool .changePlans,
.lessonSelect .oneSelectTeacher .editTool .changePlans,
.lessonSelectWrp > .editTool .changePlans {
  margin-left: 5px;
}

.lessonSelect .weekPlans .editTool .changePlans::before,
.lessonSelect .oneSelectTeacher .editTool .changePlans::before,
.lessonSelectWrp > .editTool .changePlans::before {
  background: url(../../images/newBooking/pen.svg) no-repeat center / 20px auto;
}

.lessonSelect .weekPlans .editTool .changePlans.active {
  color: #003bff;
}

.lessonSelect .weekPlans .editTool .changePlans.active::before {
  background-image: url(../../images/newBooking/pen_color.svg);
}

.lessonSelectWrp > .editTool .courseIntroBtn,
.categorySelectWrp .editTool .courseIntroBtn {
  margin-left: 10px;
}

.lessonSelectWrp > .editTool .courseIntroBtn::before,
.categorySelectWrp .editTool .courseIntroBtn::before {
  background: url(../../images/newBooking/book_open.svg) no-repeat center / 20px
    auto;
}

.lessonSelect .weekPlans > ul > li {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.lessonSelect .weekPlans > ul > li:last-child {
  margin-bottom: 0;
}

.lessonSelect .weekPlans > ul > li label,
.myScheduleDetail .scheduleDetailCtn .warpper label,
.bookClassBlockWrp .warpper label {
  font-weight: 400;
  font-size: 14px;
  color: #0037cc;
  display: inline-block;
  padding: 2px 6px;
  background: #edf1ff;
  border: 1px solid #bbcbff;
  border-radius: 4px;
  margin-right: 6px;
}

.myScheduleDetail .scheduleDetailCtn .warpper label,
.bookClassBlockWrp .warpper label {
  margin-right: 10px;
}

.myScheduleDetail .scheduleDetailCtn .warpper,
.bookClassBlockWrp .warpper {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.bookClassBlockWrp .warpper {
  margin-bottom: 0;
}

.bookClassBlockWrp .warpper + .warpper {
  margin-bottom: 15px;
}

.bookClassBlock .buttonWrap {
  margin: 0;
  padding: 0;
}

.lessonSelect .weekPlans > ul > li span {
  color: #333;
  font-weight: 400;
  font-size: 14px;
  margin-right: 12px;
}

.lessonSelect .weekPlans li ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px 0;
}

.lessonSelect .weekPlans li li {
  color: #0037cc;
  font-weight: 400;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-right: 12px;
}

.lessonSelect .weekPlans li li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #003bff;
  margin-right: 6px;
}

.lessonSelect .weekPlans .notSet li {
  color: #aaa;
  line-height: normal;
}

.lessonSelect .weekPlans .notSet li::before {
  content: none;
}

/* .lessonSelect .selectBook .swiper-slide.ongoing p::before {
    content: '';
    width: 15px;
    height: 15px;
    background: url(../../images/newBooking/book_icon.svg) no-repeat center / 15px auto;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
} */

.lessonSelect .selectBook .swiper-slide.ongoing p {
  color: #003bff;
}

/* .lessonSelect .selectBook .swiper-slide.finished p::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../../images/newBooking/checked_green_icon.svg) no-repeat center / 20px auto;
    display: inline-block;
    vertical-align: -5px;
    margin-right: 5px;
} */

.lessonSelect .selectBook .swiper-slide .finishedPart {
  position: absolute;
  border-radius: 30px;
  background: #edf1ff;
  color: #000;
  padding: 4px 8px;
  font-size: 12px;
  right: 8px;
  bottom: 8px;
}

.bookWrp {
  position: relative;
}

.bookWrp .currentBook {
  max-width: 86%;
  background: #003bff;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  min-width: 70%;
  text-align: center;
  word-wrap: break-word;
}

.AIOxfordDisneyLevel ul {
  display: flex;
}

.AIOxfordDisneyLevel li {
  font-family: "Roboto";
  margin: 0 1px 1px 0;
  font-weight: 400;
  font-size: 14px;
  color: #112f82;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  text-align: center;
  flex: 1 0 auto;
  min-height: 100%;
  padding: 5px;
}

.AIOxfordDisneyLevel li i {
  font-style: italic;
}

.v-jr-feature-chart ._left ._left-bar li {
  letter-spacing: -0.1px;
}

.AIOxfordDisneyLevel ul:first-child {
  align-items: flex-end;
}

.AIOxfordDisneyLevel ul:first-child li:nth-child(2) {
  height: 45px;
}

.AIOxfordDisneyLevel ul:first-child li:nth-child(3) {
  height: 50px;
}

.AIOxfordDisneyLevel ul:first-child li:nth-child(4) {
  height: 55px;
}

.AIOxfordDisneyLevel ul:first-child li:nth-child(5) {
  height: 60px;
}

.AIOxfordDisneyLevel ul:first-child li {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.AIOxfordDisneyLevel ul:nth-child(2) li {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.AIOxfordDisneyLevel ul:nth-child(2n + 3) li {
  background: #e7edff;
}

.AIOxfordDisneyLevel ul:nth-child(2n + 4) li {
  background: #f7f8ff;
}

.AIOxfordDisneyLevel li.wt1 {
  width: 80px;
}

.AIOxfordDisneyLevel li.wt2 {
  width: 161px;
}

.AIOxfordDisneyLevel li.wt3 {
  width: 242px;
}

.AIOxfordDisneyLevel li.wt4 {
  width: 323px;
}

.AIOxfordDisneyLevel li.wt5 {
  width: 404px;
}

.AIOxfordDisneyLevel li.wt6 {
  width: 485px;
}

.AIOxfordDisneyLevel li.wt7 {
  width: 566px;
}

.AIOxfordDisneyLevel .lvColor1 {
  background: #8ba1f1;
}

.AIOxfordDisneyLevel .lvColor2 {
  background: #5277f7;
}

.AIOxfordDisneyLevel .lvColor3 {
  background: #003bff;
}

.AIOxfordDisneyLevel .lvColor4 {
  background: #0037cc;
}

.AIOxfordDisneyLevel .lvColor5 {
  background: #112f82;
}

.AIOxfordDisneyLevel .scrollbar-dynamic {
  padding-bottom: 30px;
}

.materialIntroWrp .v-jr-feature-chart ._left-bar li:nth-child(2n + 3) {
  background: #d1dbff;
}

.materialIntroWrp .v-jr-feature-chart ._left-bar li:nth-child(2n + 4) {
  background: #e1e8ff;
}

.materialIntroWrp .v-jr-feature-chart ._left ._left-bar li {
  padding: 10px 5px;
  min-height: 40px;
  margin-bottom: 1px;
  top: 0;
}

.materialIntroWrp .v-jr-feature-chart ._left ._left-bar li span {
  font-size: 12px;
  font-weight: 400;
}

.materialIntroWrp .v-jr-feature-chart ._left ._left-bar li b {
  font-size: 12px;
  font-weight: 300;
  display: block;
}

.materialIntroWrp .v-jr-english-oxford .v-jr-feature-chart .chart-wrap {
  height: auto;
}

.materialIntroWrp .v-jr-english-oxford .v-jr-feature-chart > .chart-wrap {
  width: calc(100% - 120px) !important;
}

.materialIntroWrp .v-jr-english-oxford .v-jr-feature-chart ._left {
  width: 120px !important;
}

.ABCLevel .wt1 {
  width: 50px;
}

.ABCLevel .wt2 {
  width: 75.5px;
}

.ABCLevel .wt3 {
  width: 152px;
}

.ABCLevel .lvColor1 {
  background: #5277f7;
}

.ABCLevel .lvColor2 {
  background: #305fff;
}

.ABCLevel .lvColor3 {
  background: #003bff;
}

.ABCLevel .lvColor4 {
  background: #0037cc;
}

.ABCLevel .lvColor5 {
  background: #112f82;
}

.ABCLevel .inner-content ul {
  display: flex;
  align-items: flex-end;
}

.ABCLevel li {
  font-family: "Roboto";
  margin: 0 1px 1px 0;
  font-weight: 300;
  font-size: 14px;
  color: #112f82;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  flex: 1 0 auto;
  min-height: 100%;
  padding: 5px 0;
  flex-direction: column;
  flex-wrap: wrap;
  word-break: break-word;
  text-align: center;
}

.ABCLevel .inner-content ul:first-child li {
  color: #fff;
  font-weight: 700;
}

.ABCLevel .inner-content ul:nth-child(2) li {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.ABCLevel .inner-content ul:first-child li:first-child {
  height: 65px;
}

.ABCLevel .inner-content ul:first-child li:nth-child(2) {
  height: 70px;
}

.ABCLevel .inner-content ul:first-child li:nth-child(3) {
  height: 75px;
}

.ABCLevel .inner-content ul:first-child li:nth-child(4) {
  height: 80px;
}

.ABCLevel .inner-content ul:first-child li:nth-child(5) {
  height: 85px;
}

.ABCLevel .ABCLevelLeft {
  width: 90px;
  float: left;
}

.ABCLevel .ABCLevelLeft li,
.ABCLevel .ABCLevelLeft li b {
  font-weight: 400;
  text-align: center;
}

.ABCLevel .ABCLevelLeft li {
  min-height: 50px;
  height: auto;
}

.ABCLevel .ABCLevelLeft li sup {
  vertical-align: super;
  font-size: 12px;
}

.ABCLevel .inner-content {
  width: calc(100% - 90px);
  padding-bottom: 30px;
}

.ABCLevel .inner-content ul:nth-child(2n + 3) li {
  background: #f7f8ff;
}

.ABCLevel .inner-content ul:nth-child(2n + 4) li {
  background: #fbfcff;
}

.ABCLevel .scrollbar-dynamic > .scroll-element .scroll-bar {
  background: #003bff;
}

.classPutOffPopup img {
  width: 80px;
  display: inline-block;
  margin-bottom: 10px;
}

.classPutOffPopup p {
  font-weight: 400;
  font-size: 16px;
  color: #555;
  margin-bottom: 15px;
}

.classPutOffPopup span {
  font-weight: 300;
  font-size: 12px;
  color: #555;
  display: block;
  margin-bottom: 20px;
}

.clasSchedule .switchPeriod,
.clasSchedule .switchCurriculum,
.classCalendar .switchCurriculum {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #ddd;
  display: inline-flex;
  height: auto;
  margin-left: 0;
  margin-bottom: 15px;
}

.videoCourseList .switchPeriod {
  margin: 0 0 10px 0;
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #ddd;
  display: inline-flex;
  height: auto;
  margin-left: 0;
  margin-bottom: 15px;
}

.videoCourseList .switchPeriod button,
.clasSchedule .switchPeriod button {
  font-weight: 300;
  font-size: 16px;
  color: #333;
  padding: 5px 0;
  min-width: 130px;
  width: auto;
}

.videoCourseList .switchPeriod button.active,
.clasSchedule .switchPeriod button.active {
  background: #003bff;
  color: #fff;
}

.clasSchedule .switchCurriculum button,
.classCalendar .switchCurriculum button {
  font-weight: 300;
  font-size: 16px;
  color: #333;
  line-height: normal;
  padding: 5px 10px;
}

.clasSchedule .switchCurriculum button.active,
.classCalendar .switchCurriculum button.active {
  background: #edf1ff;
  color: #003bff;
}

.clasSchedule .switchCurriculum button:first-child::before,
.classCalendar .switchCurriculum button:first-child::before {
  background-image: url(../../images/newBooking/icon_list_gray.svg);
}

.clasSchedule .switchCurriculum button:last-child::before,
.classCalendar .switchCurriculum button:last-child::before {
  background-image: url(../../images/newBooking/icon_calendar_gray.svg);
}

.clasSchedule .switchCurriculum button.active:first-child::before,
.classCalendar .switchCurriculum button.active:first-child::before {
  background-image: url(../../images/newBooking/icon_list_color.svg);
}

.clasSchedule .switchCurriculum button.active:last-child::before,
.classCalendar .switchCurriculum button.active:last-child::before {
  background-image: url(../../images/newBooking/icon_calendar_color.svg);
}

.clasSchedule .courseListWrp {
  background: none;
}

.clasSchedule .courseFilter {
  margin-left: 0;
  margin-bottom: 10px;
}

.clasSchedule .courseFilter button,
.clasSchedule .courseFilter .classDate,
.teacherSearchFilter .courseFilter button,
.wordsBank .tab_filter button,
.learningRecord .courseFilter button,
.remainExamAttempt .courseFilter button {
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  padding: 4px 32px 4px 12px;
}

.clasSchedule .courseFilter button.hastopic,
.wordsBank .tab_filter li button.classType.select,
.learningRecord .courseFilter button.hastopic,
.remainExamAttempt .courseFilter button.hastopic {
  background: #bbcbff;
  border-color: #bbcbff;
  color: #0037cc;
}

.clasSchedule .courseFilter .classDate span {
  color: #555;
}

.clasSchedule .courseFilter button i,
.clasSchedule .courseFilter .classDate i,
.wordsBank .tab_filter button.classType.select i,
.learningRecord .courseFilter button i {
  background: url(../../images/newBooking/arr_down.svg) no-repeat center / 12px
    auto;
}

.clasSchedule .courseFilter button i:not(.multiSelectCancel, .selectCancel),
.learningRecord .courseFilter button i:not(.multiSelectCancel, .selectCancel) {
  pointer-events: none;
}

.clasSchedule .courseFilter button.hastopic i,
.wordsBank .tab_filter button.classType.select i,
.learningRecord .courseFilter button.hastopic i,
.remainExamAttempt .courseFilter button.hastopic i {
  background-image: url(../../images/newBooking/dropdown_pink.svg);
}

.wordsBank .tab_filter button.classType.select i {
  pointer-events: none;
}

.clasSchedule .courseFilter button.hastopic.open i,
.learningRecord .courseFilter button.hastopic.open i {
  background-image: url(../../images/newBooking/arr_down_white.svg);
}

.wordsBank .tab_filter li button.select i,
.clasSchedule .courseFilter li button.select i,
.learningRecord .courseFilter li button.select i,
.remainExamAttempt .courseFilter li button.select i {
  background-image: url(../../images/newBooking/cancel_color.svg);
}

.courseFilter ul.multiSelect li button + ul li,
.courseFilterSelect_m ul.multiSelect li button + ul li,
.courseFilter li button + .multiSelectWrp li {
  padding: 0;
  margin-bottom: 2px;
}

.courseFilter ul.multiSelect li button + ul li:last-child,
.courseFilterSelect_m ul.multiSelect li button + ul li:last-child {
  margin-bottom: 0;
}

.courseFilter ul.multiSelect label,
.courseFilterSelect_m ul.multiSelect label {
  padding: 6px 10px;
  position: relative;
  margin: 0;
  width: 100%;
  display: block;
  border-radius: 4px;
  padding-right: 40px;
  cursor: pointer;
  white-space: nowrap;
}

.courseFilter ul.multiSelect label:not(:last-child),
.courseFilterSelect_m ul.multiSelect label:not(:last-child),
.deskMenu > ul ul li:not(:last-child),
.selectLggBar ul li:not(:last-child) {
  margin-bottom: 2px;
}

.courseFilter ul.multiSelect label::after,
.courseFilterSelect_m ul.multiSelect label::after {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 6px;
  left: auto;
}

.courseFilterSelect_m ul.multiSelect label::after {
  width: 26px;
  height: 26px;
  right: 20px;
}

.courseFilter ul.multiSelect [type="checkbox"]:checked + label::after {
  background-size: 10px auto;
}

.courseFilterSelect_m ul.multiSelect [type="checkbox"]:checked + label::after {
  background-size: 16px auto;
}

.clasSchedule .courseListWrp li .courseType b,
.myScheduleDetail .scheduleDetailCtn .courseType b,
.normalBookingCartList li .courseType b,
.classNowResult .courseType b {
  font-size: 12px;
  color: #555;
  font-weight: 400;
  display: inline-block;
  padding-right: 6px;
  margin-right: 6px;
  font-family: "Noto Sans TC";
}

.clasSchedule .courseListWrp li .courseType b:first-of-type,
.normalBookingCartList li .courseType b:first-of-type,
.classNowResult .courseType b:first-of-type {
  border-right: 1px solid #ddd;
}

.clasSchedule .courseListWrp .courseTip,
.scheduleDetailCtn .courseTip {
  width: calc(100% + 40px);
  border: 1px solid #f0f0f0;
  border-radius: 0 0 4px 4px;
  background: #edf1ff;
  color: #333;
  font-size: 12px;
  font-weight: 400;
  padding: 8px 12px;
  margin: 15px -40px -15px -20px;
}

.clasSchedule .courseListWrp .courseTip a,
.scheduleDetailCtn .courseTip a {
  color: #003bff;
  margin: 0 3px;
}

.clasSchedule .courseListWrp > h5 {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #8ba1f1;
  margin-bottom: 10px;
  padding-top: 10px;
}

.clasSchedule .courseListWrp > h5::before {
  content: "";
  background: url(../../images/newBooking/clock.svg) no-repeat center / 16px
    auto;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 3px;
}

.clasSchedule .courseListWrp > h5::after {
  content: "";
  height: 1px;
  background: #8ba1f1;
  flex-grow: 1;
  margin-left: 7px;
}

.curriculumNav .snyCalendar {
  margin-left: auto;
  font-weight: 400;
  font-size: 16px;
  color: #003bff;
  display: flex;
  align-items: center;
  padding-right: 5px;
}

.curriculumNav .snyCalendar::after {
  content: "";
  width: 26px;
  height: 26px;
  margin-left: 6px;
  background: url(../../images/newBooking/icon_sync_calender_color.svg)
    no-repeat center / 26px auto;
}

.classCalendar .curriculumTable {
  margin-bottom: 0;
}

.pg_drawer h4.popTitle:before {
  content: attr(data-title);
}

.clasSchedule .bookNow {
  border-radius: 30px;
  color: #003bff;
  font-size: 16px;
  text-align: center;
  padding: 10px 15px;
  cursor: pointer;
  margin: 0 auto;
  min-width: 120px;
  display: block;
  margin-bottom: 20px;
  transition: color 0.3s;
  background: #fff;
  border: 1px solid #ddd;
  transition:
    color 0.3s,
    border 0.3s;
}

.clasSchedule .bookNow:hover {
  color: #112f82;
  border-color: #112f82;
}

.attendedClass {
  display: flex;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  color: #0037cc;
  align-items: center;
}

.attendedClass::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../../images/newBooking/alert_circle.svg) no-repeat center /
    16px auto;
  margin-right: 3px;
  opacity: 0.6;
}

.materialBlock .thumbList p.attendedClass {
  margin-top: 8px;
}

.myScheduleQna .myScheduleQ {
  display: flex;
  flex-wrap: wrap;
}

.myScheduleQ .qsType {
  margin-right: 8px;
  cursor: pointer;
}

.myScheduleQ .qsType input {
  cursor: pointer;
  text-overflow: ellipsis;
}

.myScheduleQ .qsTitle {
  flex-grow: 1;
}

.myScheduleQ .qsContent {
  width: 100%;
}

.myScheduleQna .myScheduleQ > div {
  position: relative;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 65px;
  margin-bottom: 10px;
  transition: border 0.3s;
}

.myScheduleQna .myScheduleQ > div > span {
  position: absolute;
  left: 12px;
  top: 50%;
  right: 35px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #333;
  font-weight: 400;
  transition:
    top 0.3s,
    transform 0.3s,
    color 0.3s;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.myScheduleQna .myScheduleQ > div > b {
  font-weight: 300;
  font-size: 12px;
  color: #777;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  transition: opacity 0.3s;
}

.myScheduleQna .myScheduleQ div.focus > span,
.myScheduleQna .myScheduleQ div.hasV > span {
  top: 10px;
  transform: none;
  color: #003bff;
}

.myScheduleQna .myScheduleQ div.qsType.focus > span {
  top: 50%;
  transform: translateY(-50%);
}

.myScheduleQna .myScheduleQ div.qsType.select > span {
  top: 10px;
  transform: none;
  color: #003bff;
}

.myScheduleQna .myScheduleQ div.qsType.focus {
  border-color: #003bff;
}

.myScheduleQna .myScheduleQ div.focus > b,
.myScheduleQna .myScheduleQ div.hasV > b {
  opacity: 0;
  visibility: hidden;
}

.myScheduleQna .myScheduleQ input,
.myScheduleQna .qsContent textarea {
  min-width: 100%;
  min-height: 100%;
  background: transparent;
  border: none;
  padding: 4px 12px 0;
  font-size: 14px;
}

.myScheduleQna .qsContent + p {
  display: none;
  font-weight: 400;
  font-size: 14px;
  color: #ee5a50;
}

.myScheduleQna .qsContent textarea {
  resize: none;
  overflow: hidden;
  padding: 24px 12px 10px;
}

.myScheduleQna .qsContent.warning {
  border-color: #ee5a50;
}

.myScheduleQna .qsContent.warning textarea {
  color: #ee5a50;
}

.myScheduleQna .qsContent.warning + p {
  display: block;
}

.myScheduleQna .qsTitle.focus input,
.myScheduleQna .qsTitle.hasV input,
.myScheduleQna .qsType.select input {
  padding-top: 25px;
}

.myScheduleQna .qsContent.focus textarea,
.myScheduleQna .qsContent.hasV textarea {
  padding-top: 35px;
}

.myScheduleQna .myScheduleQ div.qsType {
  caret-color: transparent;
}

.myScheduleQna .myScheduleQ div.qsType::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/arr_down.svg) no-repeat center / 20px
    auto;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.3s;
}

.myScheduleQna .myScheduleQ div.qsType.focus::after {
  background-image: url(../../images/newBooking/dropdown_pink.svg);
}

.myScheduleQna .myQBtnWrp div {
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
}

.myScheduleQna .myQBtnWrp div a {
  font-weight: 400;
  font-size: 14px;
  color: #777;
  text-decoration: underline;
}

.myScheduleA {
  margin-bottom: 35px;
}

.myScheduleA > li:not(:last-child) {
  margin-bottom: 20px;
}

.myScheduleA .qnaList {
  border-radius: 4px;
  padding: 18px 16px;
  background: url(../../images/newBooking/arr_down.svg) #f8f8f8 no-repeat right
    16px top 18px / 16px auto;
  cursor: pointer;
  transition: background 0.3s;
}

.myScheduleA li.open .qnaList {
  border-radius: 4px 4px 0 0;
  background-image: url(../../images/newBooking/arrowup.svg);
}

.myScheduleA .qnaList p {
  display: flex;
  align-items: center;
}

.myScheduleA .qnaList p span {
  font-family: "Roboto";
  font-weight: 300;
  font-size: 14px;
  color: #777;
}

.myScheduleA .qnaList p b {
  font-weight: 400;
  font-size: 14px;
  display: flex;
  align-items: center;
  color: #555;
  margin-left: auto;
}

.myScheduleA .qnaList p b i {
  font-style: normal;
}

.myScheduleA .qnaList h4 {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 16px;
  display: flex;
  color: #0037cc;
  padding: 0 20px 15px 0;
}

.myScheduleA .qnaList h4::before {
  content: "";
  width: 22px;
  height: 22px;
  background: url(../../images/newBooking/icon_qna.svg) no-repeat center / 22px
    auto;
  margin-right: 6px;
  flex-shrink: 0;
}

.myScheduleA .qnaContent {
  border-radius: 0 0 4px 4px;
  padding: 0 16px;
  background: #f8f8f8;
  height: 0;
  overflow: hidden;
}

.myScheduleA .qnaContent .studentMsg,
.myScheduleA .qnaContent .teacherMsg {
  background: #fff;
  border-radius: 4px;
  padding: 15px;
  font-family: "Roboto";
  color: #333;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  position: relative;
  margin-bottom: 30px;
  min-height: 45px;
}

.myScheduleA .qnaContent .teacherMsg {
  margin-bottom: 20px;
}

.myScheduleA .qnaContent .studentMsg::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #ddd;
  position: absolute;
  left: 0;
  bottom: -15px;
}

.myScheduleA .qnaContent > p {
  color: #333;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 8px;
}

.myScheduleA .qnaContent .satisfaction {
  display: flex;
}

.myScheduleA .qnaContent .satisfaction p {
  font-weight: 400;
  font-size: 16px;
  color: #112f82;
}

.myScheduleA .qnaContent .satisfaction label {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 30px;
  color: #333;
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

.myScheduleA .qnaContent .satisfaction label::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #555;
  margin-right: 6px;
  background: #fff;
}

.myScheduleA .qnaContent .satisfaction [type="radio"]:checked + label::before {
  border-color: #003bff;
}

.myScheduleA .qnaContent .satisfaction [type="radio"]:checked + label::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #003bff;
  position: absolute;
  left: 4px;
}

.myScheduleA .qnaContent .satisfaction [type="radio"]:disabled + label::before {
  border-color: #aaa;
  background: #f0f0f0;
}

.myScheduleA .qnaContent .satisfaction [type="radio"]:disabled + label {
  color: #aaa;
  cursor: default;
}

.myScheduleA .qnaContent .satisfaction button {
  margin-left: auto;
}

.myScheduleQna .raiseQuestion {
  display: flex;
  justify-content: flex-end;
}

.myScheduleDetail .scheduleDetailCtn .warpper h4,
.bookClassBlockWrp .warpper h4 {
  font-weight: 400;
  font-size: 16px;
  color: #555;
  margin: 5px 0;
}

.bookClassBlockWrp .warpper h4 {
  font-size: 14px;
}

.myScheduleDetail .scheduleDetailCtn .dateTime,
.bookClassBlockWrp .warpper .dateTime {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.myScheduleDetail .scheduleDetailCtn .dateTime b,
.bookClassBlockWrp .warpper .dateTime b {
  font-weight: 300;
  font-size: 12px;
  color: #777;
  margin-left: 8px;
}

.myScheduleDetail .scheduleDetailCtn .courseType {
  pointer-events: none;
  flex-wrap: wrap;
}

.myScheduleDetail .scheduleDetailCtn .courseTeacher {
  display: inline-block;
  margin-bottom: 8px;
  cursor: pointer;
}

.myScheduleDetail .scheduleDetailCtn .courseTeacher > img {
  width: 16px;
  vertical-align: middle;
  margin-right: 7px;
}

.myScheduleDetail .scheduleDetailCtn .courseTeacher label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.myScheduleDetail .scheduleDetailCtn .courseTeacher .nameNCountry {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.myScheduleDetail .courseTeacher .nameNCountry b {
  color: #777;
  font-size: 12px;
  font-weight: 400;
}

.myScheduleDetail .scheduleDetailCtn .courseTeacher label img {
  width: 36px;
  height: 36px;
  margin-right: 3px;
}

.myScheduleDetail .scheduleDetailCtn .courseTeacher {
  font-size: 14px;
}

.myScheduleDetail .scheduleDetailCtn .courseTags,
.materialIntroWrp .classInfoWrap .courseTags {
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}

.myScheduleDetail .scheduleDetailCtn .courseTags ul,
.materialIntroWrp .classInfoWrap .courseTags ul {
  display: inline-flex;
  flex-wrap: wrap;
}

.myScheduleDetail .scheduleDetailCtn .courseTags li,
.materialIntroWrp .classInfoWrap .courseTags li {
  background: #f8f8f8;
  border-radius: 4px;
  font-weight: 400;
  font-size: 12px;
  color: #555;
  padding: 3px 6px;
  margin: 0 5px 6px 0;
}

.myScheduleDetail .scheduleDetailCtn .courseTags li.less,
.materialIntroWrp .classInfoWrap .courseTags li.less {
  margin: 0;
  background: url(../../images/newBooking/arrowup.svg) transparent no-repeat
    center / 22px auto;
  width: 30px;
  height: 23px;
  cursor: pointer;
}

.myScheduleDetail .scheduleDetailCtn .courseTags li.active,
.materialIntroWrp .classInfoWrap .courseTags li.active {
  background: #edf1ff;
  color: #0037cc;
  order: -1;
}

.myScheduleDetail .scheduleDetailCtn .courseTags button,
.materialIntroWrp .classInfoWrap .courseTags button {
  display: none;
}

.myScheduleDetail .scheduleDetailCtn .courseTags.hideTags button,
.materialIntroWrp .classInfoWrap .courseTags.hideTags button {
  width: 70px;
  height: 44px;
  background: url(../../images/newBooking/moreTags.png) no-repeat center / 70px
    auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  cursor: pointer;
}

.myScheduleDetail .scheduleDetailCtn .intro {
  font-weight: 400;
  font-size: 14px;
  color: #999;
  line-height: 22px;
}

.scheduleDetailCtn .btnWrp {
  justify-content: space-between;
  position: relative;
  flex-wrap: wrap;
  margin: 30px 0 24px;
}

.scheduleDetailCtn .btnWrp button {
  flex-grow: 1;
  position: relative;
  bottom: 0;
  right: 0;
}

.scheduleDetailCtn .btnWrp.btnStyleB button {
  width: 48.5%;
  max-width: 48.5%;
  margin: 0;
  position: relative;
  right: auto;
  bottom: auto;
}

.scheduleDetailCtn .btnWrp.btnStyleA button,
.scheduleDetailCtn .btnWrp.btnStyleC button {
  width: 32%;
  max-width: 32%;
  margin: 0;
}

.scheduleDetailCtn .btnWrp.btnStyleA button {
  margin-left: auto;
}

.scheduleDetailCtn .btnWrp.btnStyleD button {
  width: 24%;
  max-width: 24%;
  margin: 0;
}

.scheduleDetailCtn .btnWrp button.goClassTip,
.scheduleDetailCtn .btnWrp button.goVideoTip {
  cursor: pointer;
}

.scheduleDetailCtn .btnWrp button.goClassTip div,
.scheduleDetailCtn .btnWrp button.goVideoTip div {
  position: absolute;
  background: #0037cc;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 15px;
  border-radius: 4px;
  bottom: 55px;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s;
}

.scheduleDetailCtn .btnWrp button.goVideoTip div {
  background: #aaa;
}

.scheduleDetailCtn .btnWrp button.goClassTip div::after,
.scheduleDetailCtn .btnWrp button.goVideoTip div::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 7px 0 7px;
  border-color: #0037cc transparent transparent transparent;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.scheduleDetailCtn .btnWrp button.goVideoTip div::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../../images/newBooking/alert_circle_white.svg) no-repeat
    center / 16px auto;
  margin-right: 5px;
  display: inline-block;
  vertical-align: -2px;
}

.scheduleDetailCtn .btnWrp button.goVideoTip div::after {
  border-top-color: #aaa;
}

.scheduleDetailCtn .btnWrp button.goClassTip:hover div,
.scheduleDetailCtn .btnWrp button.goVideoTip:hover div {
  opacity: 1;
  visibility: visible;
}

.scheduleDetailCtn .courseTip {
  font-size: 14px;
  margin: 30px -40px -40px -40px;
  width: calc(100% + 80px);
}

.scheduleDetailCtn .classAfterTool {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #edf1ff;
}

.scheduleDetailCtn .classAfterTool li {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 15px 5px;
  font-weight: 400;
  font-size: 16px;
  color: #333;
}

.scheduleDetailCtn .classAfterTool li::after {
  content: "";
  width: 20px;
  height: 20px;
  mask: url(../../images/newBooking/arr_right.svg) no-repeat center / 20px auto;
  -webkit-mask: url(../../images/newBooking/arr_right.svg) no-repeat center /
    20px auto;
  margin-left: auto;
  background-color: #333;
}

.scheduleDetailCtn .classAfterTool li::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-right: 10px;
  background-color: #333;
}

.scheduleDetailCtn .classAfterTool li.goLearnAgain::before {
  mask: url(../../images/newBooking/once_again.svg) no-repeat center / 22px auto;
  -webkit-mask: url(../../images/newBooking/once_again.svg) no-repeat center /
    22px auto;
}

.scheduleDetailCtn .classAfterTool li.goCourseMaterial::before {
  mask: url(../../images/newBooking/book_open_color.svg) no-repeat center / 22px
    auto;
  -webkit-mask: url(../../images/newBooking/book_open_color.svg) no-repeat
    center / 22px auto;
}

.scheduleDetailCtn .classAfterTool li.goResource::before {
  mask: url(../../images/newBooking/resouce_icon.svg) no-repeat center / 22px
    auto;
  -webkit-mask: url(../../images/newBooking/resouce_icon.svg) no-repeat center /
    22px auto;
}

.scheduleDetailCtn .classAfterTool li.goTeacherComments::before {
  mask: url(../../images/newBooking/tacher_comment.svg) no-repeat center / 22px
    auto;
  -webkit-mask: url(../../images/newBooking/tacher_comment.svg) no-repeat
    center / 22px auto;
}

.scheduleDetailCtn .classAfterTool li.goRaiseQuestion::before {
  mask: url(../../images/newBooking/icon_qna.svg) no-repeat center / 22px auto;
  -webkit-mask: url(../../images/newBooking/icon_qna.svg) no-repeat center /
    22px auto;
}

.scheduleDetailCtn .classAfterTool li.myWork::before {
  mask: url(../../images/newBooking/my_works.svg) no-repeat center / 22px auto;
  -webkit-mask: url(../../images/newBooking/my_works.svg) no-repeat center /
    22px auto;
}

.scheduleDetailCtn .classAfterTool li.preTest::before {
  mask: url(../../images/newBooking/pre_test.svg) no-repeat center / 22px auto;
  -webkit-mask: url(../../images/newBooking/pre_test.svg) no-repeat center /
    22px auto;
}

.scheduleDetailCtn .classAfterTool li.scrachWork::before {
  mask: url(../../images/newBooking/scrach_work.svg) no-repeat center / 22px
    auto;
  -webkit-mask: url(../../images/newBooking/scrach_work.svg) no-repeat center /
    22px auto;
}

.scheduleDetailCtn .classAfterTool li.goAiChat::before {
  mask: url(../../images/newBooking/icon_ai_chat.svg) no-repeat center / 24px
    auto;
  -webkit-mask: url(../../images/newBooking/icon_ai_chat.svg) no-repeat center /
    24px auto;
}

.scheduleDetailCtn .classAfterTool li.goPodcast::before {
  mask: url(../../images/newBooking/icon_podcast.svg) no-repeat center / 24px
    auto;
  -webkit-mask: url(../../images/newBooking/icon_podcast.svg) no-repeat center /
    24px auto;
}

.scheduleDetailCtn .classAfterTool li.goVocabulary::before {
  mask: url(../../images/newBooking/icon_vocabulary.svg) no-repeat center / 24px
    auto;
  -webkit-mask: url(../../images/newBooking/icon_vocabulary.svg) no-repeat
    center / 24px auto;
}

.scheduleDetailCtn .classAfterTool li i {
  color: #ee79ee;
  font-family: "Roboto";
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  margin-right: 5px;
}

.myScheduleDetail .teacherInfo {
  margin: 30px 0 20px;
}

.myScheduleDetail .teacherCommentContent {
  background: #f8f8f8;
  border-radius: 4px;
  padding: 15px;
  font-family: "Roboto";
  font-weight: 400;
  font-size: 14px;
  color: #555;
  line-height: 22px;
  margin-bottom: 30px;
}

.myScheduleDetail .courseScoreChart li canvas {
  background: url(../../images/newBooking/pieChartBg.png) no-repeat center /
    90px auto;
  -webkit-filter: drop-shadow(0 2px 2px rgba(140, 156, 216, 0.2));
}

.myScheduleDetail .courseScoreChart li > div {
  position: relative;
}

.myScheduleDetail .courseScoreChart .chartWord {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto";
  font-weight: 700;
  font-size: 40px;
  color: #0037cc;
}

.myScheduleDetail .courseScoreChart {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.myScheduleDetail .courseScoreChart li {
  padding: 18px 13px;
  background: #f7f8ff;
  border-radius: 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.myScheduleDetail .courseScoreChart li p {
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #112f82;
  margin-top: 15px;
}

.myScheduleDetail .teacherNoComment,
.myScheduleDetail .noHomework {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.myScheduleDetail .noHomework {
  min-height: 200px;
  justify-content: center;
}

.myScheduleDetail .teacherNoComment img,
.myScheduleDetail .noHomework img {
  width: 60px;
  margin-bottom: 20px;
}

.myScheduleDetail .teacherNoComment p,
.myScheduleDetail .noHomework p {
  color: #555;
  font-weight: 400;
  font-size: 14px;
}

.teacherInfo + p.conform,
.teacherInfo + p.chooseable,
.teacherInfo + p.disable {
  font-weight: 400;
  font-size: 14px;
  color: #999;
  margin: -5px 0 10px;
  display: flex;
  align-items: center;
}

.teacherInfo + p.conform::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../../images/newBooking/star_solid_color.svg) no-repeat
    center / 18px auto;
  margin-right: 4px;
}

.teacherInfo + p.chooseable::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../../images/newBooking/correct_circle.svg) no-repeat center /
    18px auto;
  margin-right: 4px;
}

.teacherInfo + p.disable::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../../images/newBooking/tips_icon.svg) no-repeat center / 18px
    auto;
  margin-right: 4px;
}

.teacherInfo + p.conform,
.teacherInfo + p.chooseable {
  color: #0037cc;
}

.chooseConsultantTip,
.chooseCourseTimeTip {
  margin-bottom: 25px;
}

.chooseConsultantTip > p {
  font-weight: 300;
  font-size: 12px;
  color: #555;
  text-align: center;
  margin-bottom: 25px;
}

.chooseConsultantTip > h5,
.chooseCourseTimeTip > h5 {
  font-weight: 400;
  font-size: 12px;
  color: #333;
  text-align: left;
  margin-bottom: 10px;
}

.chooseConsultantTip li,
.chooseCourseTimeTip li {
  font-weight: 300;
  font-size: 12px;
  color: #333;
  text-align: left;
  display: flex;
  line-height: 18px;
  margin-bottom: 5px;
}

.chooseConsultantTip li::before,
.chooseCourseTimeTip li::before {
  content: "．";
}

.bookWrp .stateName {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #aaa;
  background: #f2f2f2;
  width: calc(100% - 6px);
  margin: 0 auto 6px;
  padding: 3px;
  position: relative;
}

.bookWrp .stateName::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url(../../images/newBooking/book_light_gray.svg) no-repeat
    center / 14px auto;
  margin-right: 3px;
}

.ongoing .bookWrp .stateName {
  background: #d1dbff;
  color: #0037cc;
  border-radius: 2px;
}

.ongoing .bookWrp .stateName::before {
  background-image: url(../../images/newBooking/book_open_light_pink.svg);
}

.ongoing .bookWrp .stateName::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #fff4f8 transparent transparent transparent;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.finished .bookWrp .stateName {
  color: #333;
}

.finished .bookWrp .stateName::before {
  background-image: url(../../images/newBooking/correct_with_circle_black.svg);
}

.selectLggBarWrp {
  background: #edf1ff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
}

.selectLggBarWrp .memberNameMenuBtn {
  padding-right: 30px;
  color: #003bff;
  font-size: 14px;
  font-family: "Noto Sans TC";
  font-weight: 300;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 140px;
  min-width: 0;
}

.selectLggBarWrp .memberNameMenuBtn::before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../images/newBooking/icon_member.svg) no-repeat center /
    24px auto;
  margin-right: 3px;
  display: inline-block;
  vertical-align: middle;
}

.selectLggBar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 1920px;
}

.selectLggBar > div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 15px;
}

.selectLggBar b,
.selectLggBar span {
  cursor: pointer;
  color: #003bff;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  transition: color 0.3s;
}

.selectLggBar div:hover b,
.selectLggBar div:hover span {
  color: #112f82;
}

.selectLggBar b {
  display: inline-flex;
  margin-right: 5px;
  align-items: center;
}

.selectLggBar b::after {
  content: "|";
  margin-left: 5px;
}

.personal.personalNew .userName {
  font-weight: 400;
  font-size: 18px;
  color: #333;
  padding-bottom: 5px;
}

.personal.personalNew .userNumber,
.personal.personalNew .userNumber span {
  background: transparent;
  color: #112f82;
  font-weight: 300;
  font-size: 14px;
  transition: color 0.3s;
}

.personal.personalNew .userNumber {
  display: flex;
  align-items: center;
}

.personal.personalNew .userNumber span {
  margin-bottom: 0;
}

.personal.personalNew .userPoints label {
  font-weight: 400;
  font-size: 16px;
  color: #0037cc;
  margin-left: 3px;
}

.deskSideMenuLogout button {
  margin-left: auto;
  color: #003bff;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  border: 1px solid #003bff;
  border-radius: 30px;
  display: flex;
  align-items: center;
  align-self: center;
  padding: 10px 15px;
  transition:
    background 0.3s,
    color 0.3s;
  cursor: pointer;
  background: transparent;
}

.deskSideMenuLogout button:hover {
  background: #003bff;
  color: #fff;
}

.deskSideMenuLogout button {
  font-family: "Noto Sans TC";
  width: 100%;
  justify-content: center;
}

.deskSideMenuLogout {
  border-top: 6px solid #f2f2f2;
  padding: 20px;
}

.myLevelNew ul {
  width: 100%;
}

.myLevelNew li:not(:last-child) {
  margin-bottom: 15px;
}

.myLevelNew li p {
  font-size: 14px;
  color: #555;
  font-weight: 700;
  margin-bottom: 6px;
}

.myLevelNew li div {
  display: flex;
  justify-content: space-around;
}

.myLevelNew li div label {
  background: #edf1ff;
  border-radius: 4px;
  padding: 8px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #112f82;
  flex-wrap: wrap;
}

.newSideBar .myLevelNew li {
  align-items: stretch;
  text-align: center;
  padding: 10px 15px;
}

.newSideBar .myLevelNew li div {
  flex-wrap: wrap;
}

.newSideBar .myLevelNew li > div p:not(.gotobk, .desktopSideBar) {
  display: none;
}

.newSideBar .myLevelNew li div label {
  width: 100%;
}

.myLevelNew li div label b {
  font-size: 16px;
  font-weight: 700;
  color: #003bff;
  margin: 0 5px;
  font-family: "Noto Sans TC";
}

.myLevelNew li div label i,
.newSideBar .myLevelNew li div p i {
  margin: 0 4px;
  color: #999;
}

.newSideBar .myLevelNew li div p a {
  font-size: 14px;
  font-weight: 400;
  text-decoration-line: underline;
  color: #003bff;
  cursor: pointer;
  padding-bottom: 5px;
}

.newSideBar .myLevelNew li div p b {
  font-size: 14px;
  color: #003bff;
  font-weight: 700;
  margin: 0 5px;
  font-family: "Noto Sans TC";
}

.myLevelNew li div label span {
  font-size: 14px;
  font-weight: 400;
  color: #003bff;
  font-family: "Noto Sans TC";
}

.myLevelNew li div label span::before {
  content: "/";
  margin-right: 5px;
  color: #555;
}

.newSideBar .myLevelNew li div p {
  font-size: 12px;
  font-weight: 300;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding-top: 10px;
  font-family: "Noto Sans TC";
  flex-wrap: wrap;
}

.memberMenu .myLevelNew li div p.desktopSideBar {
  display: none;
}

.memberMenu .myLevelNew li div p:not(.desktopSideBar, .gotobk) {
  display: flex;
  align-items: center;
}

.memberMenu .myLevelNew li div p:not(.desktopSideBar) b {
  margin: 0 3px;
  font-weight: 300;
  margin-bottom: 0;
}

.newOperateAnons {
  display: flex;
  padding: 15px 20px;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #d1dbff;
  background: #edf1ff;
  margin-bottom: 15px;
}

.newOperateAnons div {
  padding-right: 10px;
}

.newOperateAnons p {
  font-size: 18px;
  color: #0037cc;
  font-weight: 400;
  margin-bottom: 3px;
}

.newOperateAnons span {
  color: #333;
  font-size: 16px;
  font-weight: 400;
}

.newOperateAnons button {
  position: static;
  margin-left: auto;
}

.bookingRulesPopup {
  display: none;
}

.bookingRulesPopup .title {
  color: #333;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
}

.bookingRulesPopup li {
  border-radius: 4px;
  background: #edf1ff;
  padding: 15px 20px 18px;
}

.bookingRulesPopup li:not(:last-child) {
  margin-bottom: 10px;
}

.bookingRulesPopup li p {
  color: #0037cc;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
}

.bookingRulesPopup li span {
  display: flex;
  font-size: 12px;
  font-weight: 400;
  color: #555;
}

.bookingRulesPopup li span:not(:last-of-type) {
  margin-bottom: 8px;
}

.bookingRulesPopup li span::before {
  content: "●";
  font-family: "Roboto";
  position: relative;
  top: 1px;
  color: #bbcbff;
  margin-right: 5px;
  font-size: 14px;
}

.newVideoClass .newVideoClassTitle,
.myNewWords .myNewWordsTitle {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 5px;
}

.newVideoClass .newVideoClassTitle h3,
.myNewWords .myNewWordsTitle h3 {
  font-size: 20px;
  font-weight: 400;
  color: #555;
  line-height: 24px;
  margin-right: 40px;
  flex-shrink: 0;
}

.newVideoClass .newVideoClassTitle .swp,
.myNewWords .myNewWordsTitle .swp {
  margin-left: auto;
  overflow: hidden;
}

.newVideoClass .newVideoClassTitle ul,
.myNewWords .myNewWordsTitle ul {
  display: flex;
  align-items: center;
}

.newVideoClass .newVideoClassTitle li,
.myNewWords .myNewWordsTitle li {
  font-size: 18px;
  border-right: 1px solid #aaa;
  padding-right: 10px;
  cursor: pointer;
  line-height: 24px;
  flex-shrink: 0;
  width: auto;
}

.newVideoClass .newVideoClassTitle li:last-child,
.myNewWords .myNewWordsTitle li:last-child {
  border: none;
  padding-right: 0;
  margin-right: 0 !important;
}

.newVideoClass .newVideoClassTitle li.active,
.myNewWords .myNewWordsTitle li.active {
  color: #003bff;
  cursor: default;
}

.myNewWords .myNewWordsTitle {
  margin: 0 0 20px;
  padding: 0;
}

.myNewWords .myNewWordsTitle h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
}

.myNewWords .myNewWordsTitle li {
  font-size: 16px;
  color: #777;
  line-height: 17px;
}

.newVideoClass .newVideoClassContent {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.memberMenu .personalNew {
  margin-top: 60px;
  border: none;
  background: #f2f2f2;
  margin-bottom: 5px;
  display: none;
}

.memberMenu .personalNew .myFoto {
  float: left;
  margin-bottom: 10px;
}

.memberMenu .personalNew .userNumber {
  display: inline-block;
  padding: 0 0 0 10px;
  margin: 0 0 15px;
  color: #777;
  font-weight: 300;
  font-size: 14px;
}

.memberMenu .personalNew .userName {
  font-size: 16px;
  padding: 0 10px;
  margin-bottom: 5px;
}

.memberMenu .personalNew a.timeZone {
  display: none;
}

.memberMenu .personalNew .userPoints {
  padding-top: 0;
}

.memberMenu .personalNew .userPoints a {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  background: none;
  padding: 0 5px;
  display: flex;
  align-items: center;
}

.memberMenu .personalNew .userPoints label {
  width: auto;
  position: static;
  margin-left: 8px;
}

.memberMenu .myLevelNew {
  background: transparent;
  border-radius: 0;
  padding: 0 20px;
}

.memberMenu .myLevelNew li p {
  font-weight: 400;
  font-size: 14px;
  color: #333;
}

.memberMenu .myLevelNew li div p,
.memberMenu .myLevelNew li div label {
  width: auto;
  padding: 0;
  margin-right: 14px;
  color: #0037cc;
  background: transparent;
  font-weight: 300;
  margin-bottom: 0;
}

.memberMenu .gotobk {
  display: none;
}

.memberMenu .myLevelNew li div p i {
  margin: 0 3px;
}

.memberMenu .myLevelNew li div {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.memberMenu .myLevelNew li div label b,
.memberMenu .myLevelNew li div label span {
  font-size: 14px;
  font-weight: 300;
  color: #112f82;
  margin: 0 3px;
}

.personalNew .myLevelNew,
.memberMenu .myLevelNew {
  display: none;
}

.memberMenu .personalNew .myLevelNew {
  display: block;
  margin-bottom: 0;
}

.memberMenu .referral {
  border-radius: 0;
  margin-bottom: 20px;
  border: none;
}

.deskSideMenu {
  padding: 50px 0 15px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}

.deskSideMenu > ul > li a,
.deskSideMenu .hasSubMenu li a {
  color: #777;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  display: block;
  transition:
    background 0.3s,
    color 0.3s;
  text-align: left;
}

.deskSideMenu > ul > li a:hover {
  background: #edf1ff;
  color: #003bff;
}

.deskSideMenu > ul > li.hasSubMenu {
  font-weight: 700;
  color: #333;
  background: url(../../images/newBooking/arr_down.svg) no-repeat right 20px top
    12px / 20px auto;
  padding: 12px 0;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
}

.deskSideMenu > ul > li.hasSubMenu::before {
  content: "";
  width: 20px;
}

.deskSideMenu .hasSubMenu ul {
  width: 100%;
  margin-top: 10px;
  display: none;
}

.deskSideMenu .hasSubMenu.open {
  background-image: url(../../images/newBooking/arrowup.svg);
}

.deskSideMenu ~ #mobileSideMenu {
  display: none;
}

.newSideBar .deskSideMenu,
.newSideBar .deskSideMenuLogout {
  display: none;
}

.bookingSelect .newNoLevel {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bookingSelect .newNoLevel > img {
  width: 60px;
  margin-bottom: 10px;
}

.bookingSelect .newNoLevel > h4 {
  color: #080808;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 20px;
  text-align: center;
}

.bookingSelect .newNoLevel .dsp {
  border-radius: 4px;
  background: #f2f2f2;
  padding: 10px;
  font-size: 14px;
  color: #555;
  font-weight: 400;
  max-width: 450px;
  text-align: center;
  margin-bottom: 20px;
  min-width: 300px;
}

.bookingSelect .newNoLevel .dsp a {
  text-decoration: underline;
  color: #555;
}

.bookingSelect .newNoLevel > p {
  font-size: 14px;
  font-weight: 300;
  color: #777;
  display: inline-block;
  text-align: center;
  line-height: 20px;
  margin-bottom: 20px;
}

.bookingSelect .newNoLevel .btnWrp {
  margin-top: 20px;
}

.bookingSelect .newNoLevel > p span {
  margin-right: 3px;
  vertical-align: baseline;
}

.module_preview .playBar {
  padding: 20px 0;
  border-top: 1px solid #eee;
}

.module_preview.materialPageWiden .playBar {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 14px;
}

.module_preview .playBar .playBtnWrap {
  display: flex;
  align-items: center;
}

.module_preview .playBar .playWrap > span {
  font-size: 14px;
  color: #777;
  font-weight: 400;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.module_preview .playBar .playWrap > span b {
  font-size: 14px;
  color: #03328d;
  font-weight: 400;
  margin-left: 5px;
  font-family: Noto Sans TC;
}

.module_preview .playBar .playBtnWrap a {
  width: 26px;
  height: 26px;
  cursor: pointer;
  transition: none;
}

.module_preview .playBar .playBtnWrap a.btnPlay {
  background: url(../../images/newBooking/playBtn.svg) no-repeat center / 26px
    auto;
}

.module_preview .playBar .playBtnWrap a.btnPause {
  background: url(../../images/newBooking/btn_pause.svg) no-repeat center / 26px
    auto;
}

.module_preview .playBar .playBtnWrap .time {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  width: 35px;
}

.module_preview .playBar .playBtnWrap .progressWrap {
  flex: 1 1 auto;
  position: relative;
  height: 4px;
  background: #f0f0f0;
  border-radius: 10px;
  margin: 0 12px;
}

.module_preview .playBar .playBtnWrap .progressBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #8ba1f1;
  border-radius: 10px;
}

.module_preview .goToClass {
  position: sticky;
  border-radius: 8px;
  background: #d1dbff;
  padding: 15px 20px;
  display: none;
  align-items: center;
  bottom: 0;
}

.pg_drawer .module_preview .goToClass {
  display: flex;
}

.module_preview .goToClass p {
  font-size: 16px;
  color: #333;
  font-weight: 400;
}

.module_preview .goToClass button {
  margin-left: auto;
}

.menuWrp .personalNew ~ .referral {
  display: none;
}

#syncCalendar {
  margin-left: auto;
  float: right;
}

#syncCalendar a {
  font-size: 16px;
  color: #003bff;
  font-weight: 400;
  display: flex;
  align-items: center;
}

#syncCalendar a:after {
  content: "";
  width: 26px;
  height: 26px;
  background: url(../../images/newBooking/icon_sync_calender_color.svg)
    no-repeat center / 26px auto;
  display: inline-block;
  margin-left: 5px;
}

.bookingTeacherInfo .clasSchedule .courseListWrp li > .cWap p.courseTeacher,
.bookingTeacherInfo .clasSchedule .courseListWrp li > .cWap {
  cursor: default;
}

.bookingTeacherInfo .clasSchedule .courseListWrp li > .cWap > div {
  cursor: pointer;
}

.videoCourseList li .popular {
  width: 100%;
  display: flex;
  padding-top: 8px;
}

.videoCourseList li .popular .views,
.videoCourseList li .popular .scores {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.videoCourseList li .popular .views strong,
.videoCourseList li .popular .scores strong {
  font-size: 14px;
  font-weight: 400;
  color: #777;
  margin-left: 5px;
}

.videoCourseList li .popular .views b,
.videoCourseList li .popular .scores b {
  font-size: 16px;
  font-weight: 400;
  color: #555;
  margin-left: 5px;
}
.videoCourseList li .popular span::before {
  content: "";
  width: 17px;
  height: 17px;
}

.videoCourseList li .popular .views::before {
  background: url(../../images/newBooking/eye_color.svg) no-repeat center / 17px
    auto;
}

.videoCourseList li .popular .scores::before {
  background: url(../../images/newBooking/heart_solid_color.svg) no-repeat
    center / 17px auto;
}

.videoCourseList .clasSchedule .courseListWrp li > button {
  bottom: 18px;
  top: auto;
}

.classInfoWrap .classInfo .courseTitle {
  font-size: 16px;
  color: #080808;
  font-weight: 400;
  margin-bottom: 10px;
}

.booking_popup .classStateTipWrp {
  margin-bottom: 30px;
}

.booking_popup .classStateTip {
  border-radius: 4px;
  background: #fff;
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.booking_popup .classStateTip::before {
  content: "";
  width: 64px;
  height: 28px;
  border-radius: 4px;
  background: url(../../images/newBooking/clock_color.svg) #edf1ff no-repeat
    center / 24px auto;
  margin-bottom: 10px;
}

.booking_popup .classStateTip .beginTime {
  color: #555;
  font-family: "Roboto";
  font-size: 16px;
  font-weight: 700;
}

.booking_popup .classStateTip .nowState {
  color: #555;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  line-height: normal;
}

.booking_popup .classStateTip.classBeginning {
  background: #d1dbff;
}

.booking_popup .classStateTip.classBeginning::before {
  background-color: #8ba1f1;
}

.booking_popup .classStateTip.classBeginning .beginTime {
  color: #0037cc;
}

.booking_popup .classStateTip.classBeginning .nowState {
  color: #112f82;
}

.booking_win {
  width: 100%;
}

.bookingResult .bookingResultList .bookedStateSuccess b {
  float: none;
  display: block;
}

/* 首頁改版結束 */

/* 教材彈窗頁加寬開始 */

.materialIntroPopup .bookClassBlock > div.materialPageWiden {
  margin-top: -10px;
}

.materialIntroPopup .bookClassBlock > div.materialPageWiden,
div.materialPageWiden .module_preview_inner,
.materialPageWiden .preview_tab_block,
.materialPageWiden .module_preview .preview_title_block,
.materialPageWiden .preview_title_block {
  max-width: 1000px;
}

.materialReview .preview_tab_block,
.materialReview > .module_preview_inner {
  max-width: 100%;
}

.materialPageWiden img {
  width: 100%;
}

.materialPageWiden .preview_tab_block > .tab_content_block {
  padding: 0;
  background: transparent;
}

.materialPageWiden .teaching_material_slider {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.materialPageWiden .teaching_material_slider .mainSwiper {
  border-radius: 0;
}

.tab_title + .tab_content_block .teaching_material_slider {
  border-radius: 0 0 8px 8px;
}

.materialPageWiden .mainSwiper_wrap {
  width: 86%;
}

.materialPageWiden .thumb_swiper_wrap {
  width: 14%;
  background: #e2e2e2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 15px 0;
}

.materialPageWiden .teaching_material_slider .thumb_swiper .swiper-slide {
  height: auto !important;
}

.materialPageWiden .teaching_material_slider .thumb_swiper,
.materialPageWiden .playBar {
  margin: 0;
}

.materialPageWiden .teaching_material_slider .mainSwiper {
  border: none;
}

.module_preview.materialPageWiden .teaching_material_slider .mainSwiper_wrap {
  padding-bottom: 45px;
  background: #fff;
}

.materialPageWiden .preview_title_block .preview_title {
  font-size: 20px;
  color: #555;
  font-weight: 700;
  font-family: "Noto Sans TC";
  margin-bottom: 0;
}

.materialPageWiden .vocabulary_block,
.materialPageWiden .aiPodcast {
  padding: 40px;
  background: #fff;
}

.materialPageWiden .swiperPagi {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 10px;
}

.materialPageWiden .newSwiperPagi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.materialPageWiden .teaching_material_slider .swiperPagi .swiper-button-prev,
.materialPageWiden .teaching_material_slider .swiperPagi .swiper-button-next {
  position: static;
  box-shadow: none;
  border: 1px solid #ddd;
  margin: 0;
}

.materialPageWiden .teaching_material_slider .newSwiperPagi .swiper-button-prev,
.materialPageWiden
  .teaching_material_slider
  .newSwiperPagi
  .swiper-button-next {
  box-shadow: none;
  border: 1px solid #ddd;
  margin: 0;
  border: none;
  background: transparent;
}

.materialPageWiden .teaching_material_slider .swiper-button-prev {
  left: -8px;
}

.materialPageWiden .teaching_material_slider .swiper-button-next {
  right: -8px;
}

.materialPageWiden
  .teaching_material_slider
  .thumb_swiper_wrap
  .swiper-button-prev,
.materialPageWiden
  .teaching_material_slider
  .thumb_swiper_wrap
  .swiper-button-next {
  width: 100%;
  height: 30px;
  position: static;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.materialPageWiden
  .teaching_material_slider
  .thumb_swiper_wrap
  .swiper-button-prev {
  background: url(../../images/newBooking/arrowup.svg) no-repeat center / 24px
    auto;
}

.materialPageWiden
  .teaching_material_slider
  .thumb_swiper_wrap
  .swiper-button-next {
  background: url(../../images/newBooking/dropdown.svg) no-repeat center / 24px
    auto;
}

.materialPageWiden
  .teaching_material_slider
  .thumb_swiper_wrap
  .swiper-button-prev:after,
.materialPageWiden
  .teaching_material_slider
  .thumb_swiper_wrap
  .swiper-button-next:after {
  content: none;
}

.materialPageWiden
  .teaching_material_slider
  .newSwiperPagi
  .swiper-pagination-fraction {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.materialPageWiden .teaching_material_slider .thumb_swiper {
  padding: 5% 20%;
}

.materialPageWiden .thumb_swiper.swiper-free-mode > .swiper-wrapper {
  height: 0;
  padding-bottom: 600%;
}

.materialPageWiden .preview_tab_block > .tab_title a {
  padding: 10px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.materialIntroPopup .closePopup {
  top: 10px;
}

.materialIntroPopup .materialIntroWrp {
  top: 50px;
}

.wordsBankSelect .sujectSelectMenu .swiper-button-next,
.wordsBankSelect .sujectSelectMenu .swiper-button-prev {
  top: 28px;
}

.myWordsMain .wordsCourseName {
  padding: 20px 0;
  display: flex;
  align-items: flex-start;
}

.myWordsMain .wordsCourseName::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../../images/newBooking/book_color.svg) no-repeat center /
    16px auto;
  margin-right: 5px;
  margin-top: 6px;
  flex-shrink: 0;
}

.myWordsMain .wordsCourseName a {
  color: #8ba1f1;
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
  font-family: "Noto Sans TC";
}

.videoCourseWrp .buttonWrap a {
  margin-left: auto;
  width: auto;
  min-width: 140px;
}

/* 教材彈窗頁加寬結束 */

.remindTrial {
  padding: 5px 20px;
  background: #eef3ff;
  border-radius: 4px;
  margin-bottom: 15px;
}

.remindTrial li {
  padding: 15px 0;
}

.remindTrial li:not(:last-of-type) {
  border-bottom: 1px solid #d1dbff;
}

.remindTrial li img {
  width: 40px;
  margin-right: 10px;
  float: left;
}

.remindTrial li p {
  font-size: 14px;
  font-weight: 400;
  color: #333;
}

.remindTrial li p span {
  color: #0037cc;
  margin: 0 3px;
  display: inline-block;
  vertical-align: baseline;
}

.remindTrial li a,
.newMain .goFreeBooking a {
  margin-left: auto;
  font-size: 14px;
  color: #0037cc;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.scheduleDetailCtn .class_intro_text {
  height: 60px;
  overflow: hidden;
}

.scheduleDetailCtn .class_intro_text.over p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.class_intro_text + button.readMore {
  color: #003bff;
  font-size: 15px;
  display: none;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 15px;
}

.scheduleDetailCtn .class_intro_text ~ button.readMore:before {
  content: "Hide";
}

.scheduleDetailCtn .class_intro_text.over ~ button.readMore:before {
  content: attr(data-name);
}

.ui-dialog .ui-dialog-buttonset .ui-state-default {
  border-radius: 30px;
  min-width: 80px;
}

.ui-dialog .ui-dialog-buttonset .ui-state-default.cancelPopup {
  border: 1px solid #ddd;
  color: #777;
  background: #fff;
}

.newMain .guidePurchases {
  border-radius: 8px;
  border: 1px solid #d1dbff;
  background: #edf1ff;
  padding: 20px 30px;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-end;
}

.newMain .guidePurchases h4 {
  font-weight: 400;
  color: #080808;
  margin-bottom: 10px;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.newMain .guidePurchases h4::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/gift_icon.svg) no-repeat center / 20px
    auto;
  margin-right: 5px;
}

.newMain .guidePurchases .goPlan h4::before {
  background-image: url(../../images/newBooking/arm_icon.svg);
}

.newMain .guidePurchases b {
  color: #0037cc;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 2px;
  display: block;
}

.newMain .guidePurchases strong {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}

.newMain .guidePurchases strong span {
  margin: 0 5px;
  font-family: "Roboto";
  font-size: 20px;
  font-weight: 700;
  color: #003bff;
  position: relative;
  top: -2px;
}

.newMain .guidePurchases p {
  color: #555;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
}

.newMain .guidePurchases .btnWrp {
  margin-left: auto;
  display: flex;
  flex-shrink: 0;
}

.newMain .guidePurchases .btnWrp a {
  background: #003bff;
  border-radius: 20px;
  color: #fff;
  min-width: 120px;
  padding: 8px 15px;
  font-size: 14px;
  margin-left: 15px;
  transition: background 0.3s;
  text-align: center;
  display: block;
}

.newMain .guidePurchases .btnWrp a:hover {
  background: #112f82;
}

.newMain .guidePurchases .btnWrp a:nth-child(2) {
  background: #fff;
  color: #003bff;
  border: 1px solid #ddd;
}

.newMain .guidePurchases .btnWrp a:nth-child(2):hover {
  color: #112f82;
}

.newMain .goFreeBooking {
  padding: 20px;
  display: block;
}

.newMain .goFreeBooking img {
  margin-right: 10px;
  float: left;
}

.newMain .goFreeBooking a {
  margin-left: 0;
  background: none;
}

.newMain .goFreeBooking a:hover {
  background: none;
}

.newMain .goFreeBooking p span {
  color: #003bff;
  vertical-align: baseline;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  margin: 0 3px;
  font-family: "Noto Sans TC";
}

.memberMobileMenuBtn {
  display: none;
}

.class_content_in {
  overflow: visible !important;
}

.chara_top_in_story .table_color1 {
  border-color: #ddd;
  background: #edf1ff;
  color: #003bff;
}

.chara_top_in_story .table_ri_bor,
.chara_top_in_story .table_color2 {
  border-color: #ddd;
}

.chara_top_in_story .table_color2 a,
.chara_top_in_story .table_color2 a:hover {
  color: #003bff;
  text-decoration: underline;
}

.chara_top_in_story .table_list_t::-webkit-scrollbar {
  height: 6px;
  background: #eee;
}

.chara_top_in_story .table_list_t::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: #bbb;
}

.clasSchedule .courseFilter button,
.clasSchedule .courseFilter .classDate,
.teacherSearchFilter .courseFilter button,
.wordsBank .tab_filter button {
  min-height: 30px;
}

.courseListWrp .hasClass {
  display: flex;
  border-radius: 4px;
  background: #e7edff;
  font-size: 14px;
  color: #333;
  font-weight: 400;
  padding: 10px 20px;
  align-items: center;
  margin-bottom: 20px;
}

.courseListWrp .hasClass > div {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.courseListWrp .hasClass div div {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.courseListWrp .hasClass img {
  width: 24px;
  margin-right: 8px;
  flex-shrink: 0;
}

.courseListWrp .hasClass span {
  margin-left: 5px;
  vertical-align: baseline;
  font-weight: 500;
}

.courseListWrp .hasClass span:last-of-type {
  margin-right: 10px;
}

.courseListWrp .hasClass button {
  flex-shrink: 0;
  color: #003bff;
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-weight: 400;
  margin-left: auto;
  text-decoration: underline;
}

.courseListWrp .tipBar {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.courseListWrp .tipBar .attendedClass {
  width: auto;
}

.courseListWrp .tipBar .rightNowQuota {
  margin-left: auto;
  color: #0037cc;
  font-size: 12px;
  font-weight: 400;
}

.courseListWrp li .courseType label.cpn {
  padding: 1px 5px 2px;
  background: transparent;
  border-radius: 4px;
  font-size: 12px;
  color: #112f82;
  display: inline-block;
  border: 1px solid #112f82;
  font-weight: 500;
  margin-right: 6px;
  line-height: normal;
  font-family: "Noto Sans TC";
}

.vocab_voice span {
  display: inline-flex;
  margin-right: 10px;
  align-items: center;
}

.lvDesc {
  pointer-events: none;
}

.cyclePeriodTip {
  color: #333;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #d1dbff;
  background: #edf1ff;
  margin-bottom: 15px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

.cyclePeriodTip::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/info_icon_color.svg) no-repeat
    center / 20px auto;
  flex-shrink: 0;
  margin-right: 5px;
}

.myLevelDetail {
  margin: 0 auto;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  padding: 60px 3%;
}

.myLevelDetail .level-chart {
  width: auto;
}

.myLevelDetail .chara_top_in5 {
  width: 100%;
}

.myLevelDetail .chart-demo_text span {
  margin-bottom: 5px;
  display: inline-block;
  border-radius: 4px;
  line-height: normal;
}

.myLevelDetail .level-chart li b {
  width: 115px;
  padding-right: 0;
  margin-right: 15px;
  background-position: right center;
}

.myLevelDetail .level-chart .level-chart-score-bar {
  width: calc(100% - 130px);
}

.electronic-box > .all-box-one {
  background: rgb(250, 250, 250);
  border-radius: 0 0 8px 8px;
  padding: 30px 0 20px;
}

.clasSchedule > .timeZone {
  font-size: 12px;
  color: #555;
  font-weight: 300;
  margin: 20px 0 10px;
}

.ieltsTimeTable {
  display: flex;
  margin-bottom: 10px;
}

.ieltsTimeTable .swiper-slide ul {
  padding: 15px 6px 0;
  overflow: hidden;
}

.ieltsTimeTable .swiper-slide:nth-child(even) ul {
  border-radius: 4px;
  background: #f7f8ff;
}

.ieltsTimeTable .swiper-slide li:first-child {
  color: #777;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  padding-bottom: 15px;
}

.ieltsTimeTable .swiper-slide li:first-child p {
  color: #333;
  font-weight: 700;
  font-size: 16px;
  font-family: "Roboto";
}

.ieltsTimeTable .swiper-slide li:first-child.current,
.ieltsTimeTable .swiper-slide li:first-child.current p {
  color: #003bff;
}

.ieltsTimeTable .swiper-slide li:not(:first-child) {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 16px;
  color: #777;
  font-weight: 400;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex-direction: column;
}

.ieltsTimeTable .swiper-slide li:not(:first-child) label {
  font-size: 14px;
}

.ieltsTimeTable .swiper-slide li.hasClass {
  border-color: #bbcbff;
  cursor: pointer;
}

.ieltsTimeTable .swiper-slide li.booked {
  color: #003bff;
  background: url(../../images/newBooking/cancel_icon_pink.svg) #fff no-repeat
    right 5px top 5px / 12px auto;
  border-color: #003bff;
}

.ieltsTimeTable .swiper-slide li.disable {
  background: #f2f2f2;
  border-color: #ddd;
}

.ieltsTimeTable .swiper-slide li.active,
.ieltsTimeTable .swiper-slide li.conflict {
  background: url(../../images/newBooking/cancel_icon.svg) #003bff no-repeat
    right 5px top 5px / 12px auto;
  color: #fff;
  border-color: #003bff;
}

.ieltsTimeTable .timePeriod {
  padding-top: 60px;
}

.ieltsTimeTable .timePeriod li {
  height: 66px;
  font-family: "Roboto";
  color: #777;
  font-size: 12px;
  font-weight: 400;
  padding-right: 5px;
  display: flex;
  align-items: center;
}

.ieltsTimeTable .swiper-button-next,
.ieltsTimeTable .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ddd;
  top: 34px;
}

.ieltsTimeTable .swiper-button-next {
  background: url(../../images/newBooking/arr_right.svg) #fff no-repeat center /
    20px auto;
  right: -20px;
}

.ieltsTimeTable .swiper-button-prev {
  background: url(../../images/newBooking/arr_left.svg) #fff no-repeat center /
    20px auto;
  left: -20px;
}

.ieltsTimeTable .ieltsClassSelect {
  position: relative;
  width: calc(100% - 32px);
}

.clasSchedule .ieltsBookingTip ul {
  display: flex;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.clasSchedule .ieltsBookingTip li {
  font-size: 12px;
  color: #555;
  font-weight: 300;
  align-items: center;
  display: flex;
  margin: 0 15px 5px 0;
}

.clasSchedule .ieltsBookingTip li::before {
  content: "";
  width: 20px;
  height: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin-right: 5px;
}

.clasSchedule .ieltsBookingTip li:first-child:before {
  border-color: #bbcbff;
}

.clasSchedule .ieltsBookingTip li:nth-child(3):before {
  border-color: #003bff;
}

.clasSchedule .ieltsBookingTip li:nth-child(4):before {
  background: #f2f2f2;
}

.clasSchedule .ieltsBookingTip h5 {
  color: #333;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 5px;
}

.clasSchedule .ieltsBookingTip p {
  color: #333;
  font-size: 12px;
  font-weight: 300;
}

.clasSchedule .ieltsBookingTip .substitut {
  background: #f2f2f2;
  border-radius: 4px;
  padding: 8px 12px;
  gap: 4px;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.learningRecord {
  background: #fff;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 15px;
}

.learningRecord::after {
  clear: both;
  content: "";
  display: table;
}

.learningRecordTitle {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 400;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
  position: relative;
}

.learningRecordTitle .downloadRecord {
  color: #003bff;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.learningRecordTitle .downloadRecord::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/download.svg) no-repeat center / 20px
    auto;
  margin-left: 3px;
}

.learningRecordList > li {
  padding: 15px;
  border-radius: 4px;
  background: #edf1ff;
  cursor: pointer;
  margin-bottom: 20px;
}

.learningRecordList > li h4 {
  font-size: 18px;
  font-weight: 400;
  color: #002da7;
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
  position: relative;
  padding-right: 30px;
  gap: 8px;
}

.learningRecordList > li h4 label,
.learningRecordDetail .learningDetailHead label {
  padding: 2px 6px;
  border-radius: 4px;
  background: #112f82;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  flex-shrink: 0;
  position: relative;
  top: 4px;
  cursor: default;
}

.learningRecordDetail .learningDetailHead label {
  top: 0;
  margin-left: auto;
}

.learningRecordList > li h4:after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/arr_right_dark_blue.svg) no-repeat
    center / 20px auto;
  margin-left: auto;
  position: absolute;
  top: 5px;
  right: 0;
}

.learningRecordList > li .date {
  display: flex;
  align-items: center;
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
  color: #777;
  margin-bottom: 15px;
}

.learningRecordList > li .date::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/clock_color_default.svg) no-repeat
    center / 20px auto;
  margin-right: 3px;
}

/* 0802 open */

.learningRecord .recordItemsWrp {
  border-radius: 4px;
  background: #fff;
  display: flex;
  padding: 15px 0;
}

.learningRecord .recordItem img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-right: 10px;
}

.learningRecord .recordItem {
  width: 33.3%;
  padding: 0 15px;
  border-right: 1px solid #d1dbff;
}

.learningRecord .recordItem:nth-child(3) {
  border: none;
}

.learningRecord .recordItem > div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.learningRecord .recordItem > div p {
  font-size: 16px;
  font-weight: 400;
  color: #080808;
}

.learningRecord .recordItem > p {
  float: right;
  color: #777;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  line-height: 18px;
}

.learningRecord .recordItem > p strong {
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 700;
  color: #0037cc;
  margin: 0 2px;
}

.learningRecord .recordItem > p b {
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin: 0 2px;
}

.learningRecord .recordItem > p i {
  font-style: normal;
  margin: 0 8px;
  display: none;
}

.learningRecord .recordItem progress {
  width: 100%;
  height: 4px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 2px;
}

.learningRecord .recordItem ::-webkit-progress-value {
  background: #8ba1f1;
}

.learningRecord .recordItem ::-webkit-progress-bar {
  background: #f2f2f2;
}

/* 0802 hide 

.learningRecord .recordItemsWrp {
	padding: 15px;
	border-radius: 4px;
	background: #fff;
}

.learningRecord .recordItem:not(:last-child) {
	margin-bottom: 15px;
}

.learningRecord .recordItem {
	display: flex;
	align-items: center;
}

.learningRecord .recordItem img {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	margin-right: 10px;
}

.learningRecord .recordItem > div {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
}

.learningRecord .recordItem > div p {
	font-size: 16px;
	font-weight: 400;
	color: #080808;
}

.learningRecord .recordItem > div span {
	margin-left: auto;
	color: #777;
	font-size: 12px;
	font-weight: 400;
	display: flex;
	align-items: center;
}

.learningRecord .recordItem > div span strong {
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 700;
	color: #0037CC;
	margin: 0 2px;
}

.learningRecord .recordItem > div span b {
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 700;
	color: #333;
	margin: 0 2px;
}

.learningRecord .recordItem > div span i {
	font-style: normal;
	margin: 0 8px;
}

.learningRecord .recordItem progress {
	width: 100%;
	height: 4px;
	border-radius: 10px;
	overflow: hidden;  
	margin-top: 4px;
}

.learningRecord .recordItem ::-webkit-progress-value {
	background: #8BA1F1;
}

.learningRecord .recordItem ::-webkit-progress-bar {
	background: #F2F2F2;
}

*/

.learningRecord .learningRecordDetail {
  border: 1px solid #e7edff;
  border-radius: 8px;
}

.learningRecordDetail .learningDetailHead {
  background: #e7edff;
  display: flex;
  align-items: center;
  padding: 10px 15px;
}

.learningRecordDetail .learningDetailHead p {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  padding-right: 10px;
}

.learningRecordDetail .learningDetailHead span {
  font-size: 14px;
  color: #0037cc;
  font-weight: 400;
  padding-left: 10px;
  border-left: 1px solid #0037cc;
  flex-shrink: 0;
}

.learningRecordDetail .learningDetailCount {
  display: flex;
}

.learningRecordDetail .learningDetailCount div {
  padding: 10px 15px;
  font-size: 16px;
  font-family: "Roboto";
  font-weight: 400;
  color: #333;
  border-right: 1px solid #e7edff;
  flex-grow: 1;
}

.learningRecordDetail .learningDetailCount div:last-child {
  border-right: none;
}

.learningRecordDetail .learningDetailCount p {
  font-size: 14px;
  color: #0037cc;
  font-weight: 400;
  margin-bottom: 2px;
}

.learningRecordDetail .learningDetailCount span {
  display: flex;
}

.learningRecordDetail .learningDetailCount span a {
  margin-left: auto;
  font-size: 14px;
  color: #777;
  text-decoration: underline;
}

.learningRecord .learningTimeLimit {
  padding: 12px 10px;
  font-size: 14px;
  color: #333;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
}

.learningRecord .learningTimeLimit a {
  color: #333;
  display: flex;
  align-items: center;
}

.learningRecord .learningTimeLimit a::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/arr_right.svg) no-repeat center / 20px
    auto;
  margin-left: 3px;
}

.learningRecord hr {
  margin: 20px -40px;
  border-color: #ddd;
}

.learningRecord .learningCounting ul {
  display: flex;
}

.learningRecord .learningCounting li {
  flex-grow: 1;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  color: #333;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px;
  cursor: pointer;
  flex-basis: 0;
  gap: 5px;
  text-align: center;
}

.learningRecord .learningCounting li.active {
  border-bottom: 3px solid #0037cc;
  cursor: default;
}

.learningRecord .learningCounting li p {
  font-size: 18px;
  font-family: "Roboto";
  margin-top: auto;
}

.learningCountingList .dateTime,
.learningRecordPrint .dateTime {
  font-weight: 400;
  color: #0037cc;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  margin-bottom: 5px;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.learningCountingList .dateTime b,
.learningRecordPrint .dateTime b {
  font-size: 14px;
  color: #112f82;
  font-weight: 400;
  margin-left: auto;
}

.learningCountingList .dateTime br {
  display: none;
}

.learningCountingList ul {
  padding: 10px 12px;
}

.learningCountingList li {
  padding: 12px 0;
}

.learningCountingList li:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

.learningCountingList li .courseType,
.learningRecordPrint li .courseType {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.learningCountingList li .courseType span {
  color: #aaa;
  display: inline-block;
  margin-right: 4px;
  padding-right: 6px;
}

.learningCountingList li .courseType span.show {
  color: #0ead74;
  font-size: 14px;
}

.learningCountingList li .courseType span.noshow {
  color: #ee5a50;
  font-size: 14px;
}

.learningCountingList li .courseType b,
.learningRecordPrint li .courseType b {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  display: inline-block;
  padding-right: 6px;
  margin-right: 6px;
  font-family: "Noto Sans TC";
}

.learningCountingList li .courseType b:first-of-type,
.learningRecordPrint li .courseType b:first-of-type {
  border-right: 1px solid #ddd;
}

.learningCountingList li .courseTitle,
.learningRecordPrint li .courseTitle {
  font-size: 14px;
  font-weight: 400;
  color: #333;
}

.leftCourseSessionsMain,
.myStudyPlanMain {
  padding: 10px 10px 5px;
  border-radius: 4px;
  border: 1px solid #ddd;
  max-height: 350px;
  overflow-y: auto;
}

.myStudyPlanMain {
  padding: 0;
  border: none;
  max-height: none;
}

.myStudyPlanMain > p {
  font-size: 14px;
  color: #777;
  font-weight: 300;
  padding-bottom: 10px;
}

.myStudyPlan .studyPlanTips {
  padding-top: 10px;
}

.myStudyPlan .studyPlanTips li {
  font-size: 14px;
  color: #777;
  font-weight: 300;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.myStudyPlan .studyPlanTips li::before {
  content: "•";
}

.leftCourseSessionsMain::-webkit-scrollbar,
.myStudyPlanMain .bookingFailedList::-webkit-scrollbar {
  width: 5px;
  background: #fff;
}

.leftCourseSessionsMain::-webkit-scrollbar-thumb,
.myStudyPlanMain .bookingFailedList::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #d9d9d9;
}

@media only screen and (max-height: 800px) {
  .myStudyPlanMain {
    max-height: calc(100vh - 350px);
  }

  .newOxford .myStudyPlanMain {
    max-height: none;
  }

  .newOxford .myStudyPlanMain .bookingFailedList {
    max-height: calc(100vh - 600px);
  }
}

@media only screen and (max-height: 590px) {
  .leftCourseSessionsMain {
    max-height: calc(60vh - 60px);
  }
}

.leftCourseSessions li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #333;
  font-weight: 400;
  padding: 8px 4px;
}

.leftCourseSessions li:not(:last-child, :first-child) {
  border-bottom: 1px solid #f0f0f0;
}

.leftCourseSessions li:first-child {
  border-radius: 4px;
  background: #f7f8ff;
  color: #74a1ff;
  padding: 8px;
  display: block;
  text-align: left;
}

.leftCourseSessions li:first-child sup {
  font-size: 12px;
}

.noLearningRecord {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.noLearningRecord img {
  width: 80px;
  margin-bottom: 10px;
}

.noLearningRecord p {
  color: #9f9f9f;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 30px;
}

.noLearningRecord a {
  border-radius: 30px;
  background: #003bff;
  color: #fff;
  padding: 8px 15px 8px 25px;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  transition: background 0.3s;
}

.noLearningRecord a:hover {
  background: #112f82;
}

.noLearningRecord a::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/arr_right_white.svg) no-repeat
    center / 20px auto;
}

.learningRecordPrint {
  background: #fff;
  padding: 30px;
}

.learningRecordPrint .head img {
  width: 140px;
}

.learningRecordPrint .title {
  padding: 30px 0;
  font-size: 20px;
  color: #333;
  font-weight: 400;
  text-align: center;
}

.learningRecordPrint .memberInfo {
  margin-bottom: 30px;
}

.learningRecordPrint .memberInfo li {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  display: flex;
  align-items: center;
  font-family: "Noto Sans TC";
  line-height: 24px;
}

.learningRecordPrint h5 {
  background: #f2f2f2;
  padding: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  margin-top: 15px;
}

.learningRecordPrint .learningList li {
  padding: 12px 4px;
}

.learningRecordPrint .learningList li:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}

.learningInfo {
  margin-bottom: 30px;
  width: 100%;
}

.learningInfo td {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  border-bottom: 1px solid #f2f2f2;
  padding: 10px 4px;
}

.fancybox-opened.fancybox-wrap {
  z-index: 99999999;
}

.fancybox-overlay {
  transform: translateZ(0);
}

.testWayBtn sup,
.sujectSelect .swiper-slide sup,
.courseFilter ul.multiSelect label sup,
.clasSchedule .courseFilter li button sup,
.ABCLevel li sup,
.v-jr-english-oxford li sup {
  vertical-align: super;
  font-size: 12px;
}

.clasSchedule .courseFilter li button sup {
  margin-top: -2px;
  display: inline-block;
}

.learninPurpose {
  padding: 20px;
}

.learninPurpose .learninProgress {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 30px;
}

.learninPurpose progress {
  height: 4px;
  flex-grow: 1;
}

.learninPurpose progress::-webkit-progress-bar {
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: #f0f0f0;
}

.learninPurpose progress::-webkit-progress-value {
  width: 0;
  border-radius: 10px;
  background: -webkit-linear-gradient(
    left,
    rgba(146, 255, 255, 1) 0%,
    rgba(0, 59, 255, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(146, 255, 255, 1) 0%,
    rgba(0, 59, 255, 1) 100%
  );
}

.learninPurpose .learninProgress label {
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.learninPurpose h4 {
  font-size: 28px;
  font-weight: 400;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.learninPurpose .purposeItem {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.learninPurpose .purposeItem li {
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #f2f2f2;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
  width: calc(50% - 10px);
  cursor: pointer;
}

.learninPurpose .purposeItem li::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  margin-right: 15px;
  flex-shrink: 0;
}

.learninPurpose .purposeItem li.active {
  border-color: #003bff;
  background: #edf1ff;
  color: #003bff;
}

.learninPurpose .purposeItem li.active::before {
  background: url(../../images/newBooking/checked_icon.svg) #fff no-repeat
    center / 16px auto;
  border-color: #fff;
}

.learninPurpose .btnwrp {
  display: flex;
  justify-content: center;
}

.bookedClassList .topnav .editTips {
  z-index: 9;
}

.courseFilter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.courseFilter > ul > li {
  margin-bottom: 0;
}

.courseFilter > ul.multiSelect {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.goContractTransform {
  border-radius: 8px;
  border: 1px solid #d1dbff;
  background: #edf1ff;
  padding: 15px 30px;
  display: flex;
  align-items: center;
}

.goContractTransform p {
  font-size: 16px;
  color: #003bff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.goContractTransform p::before {
  content: "";
  width: 22px;
  height: 22px;
  background: url(../../images/newBooking/icon_upgrade.svg) no-repeat center /
    22px auto;
  flex-shrink: 0;
}

.goContractTransform span {
  font-size: 14px;
  color: #333;
  font-weight: 400;
}

.goContractTransform a {
  border-radius: 30px;
  background: #003bff;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 8px 20px;
}

.goContractTransform a::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/arr_right_white.svg) no-repeat
    center / 20px auto;
}

.learningRecord .courseFilter {
  margin: 15px 0 0;
  padding: 0 10px;
}

.learningRecord .courseFilter button {
  cursor: pointer;
}

.leftCourseSessions h4 {
  margin-bottom: 4px;
}

.leftCourseSessionsTitle p {
  font-size: 14px;
  color: #555;
  font-weight: 300;
  margin-bottom: 10px;
}

.module_teacher_wrapper .skilled,
.module_teacher_wrapper .studentFeedbackTag ul {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.module_teacher_wrapper .studentFeedbackTag ul {
  gap: 10px;
}

.module_teacher_wrapper .skilled li,
.module_teacher_wrapper .studentFeedbackTag li {
  border-radius: 30px;
  background: #f7f8ff;
  padding: 6px 15px;
  display: flex;
  gap: 5px;
  font-size: 16px;
  color: #555;
  font-weight: 400;
  align-items: center;
}

.module_teacher_wrapper .skilled li span,
.module_teacher_wrapper .studentFeedbackTag li span {
  font-family: "Roboto";
  font-size: 14px;
}

.module_teacher_wrapper .studentFeedbackTag > p strong {
  font-size: 12px;
  color: #555;
  font-weight: 400;
}

.module_teacher_wrapper .studentFeedbackTag > p span {
  right: auto;
}

.chineseTransformPopup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  display: none;
}

.chineseTransformPopup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s;
}

.chineseTransformPopup.active::before {
  opacity: 1;
  visibility: visible;
}

.chineseTransformPopup .closePopup {
  background: url(../../images/newBooking/cancel_icon.svg) transparent no-repeat
    center / 100% auto;
}

.chineseTransformPopup {
  align-items: center;
  justify-content: center;
  height: 100%;
}

.chineseTransformPopup.active {
  display: flex;
}

.chineseTransformWrp {
  position: relative;
  background: #fff;
  border-radius: 8px;
  max-width: 600px;
  padding: 40px;
  width: 100%;
  max-height: 80vh;
}

.chineseTransformWrp .closePopup {
  top: -40px;
  right: 0;
}

.chineseTransformWrp h4 {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.chineseTransformCtn > p {
  font-size: 14px;
  color: #555;
  font-weight: 400;
  margin-bottom: 5px;
  text-align: left;
}

.chineseTransformCtn > p.dsp {
  margin-bottom: 20px;
}

.chineseTransformCtn p u {
  text-decoration: underline;
}

.chineseTransformTerms {
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 3px;
  height: 230px;
  margin-bottom: 10px;
}

.chineseTransformTerms h4 {
  text-align: center;
  font-size: 14px;
  color: #555;
  font-weight: 700;
}

.chineseTransformTerms p {
  font-size: 12px;
  color: #555;
  font-weight: 400;
  margin-bottom: 15px;
}

.chineseTransformTerms p span {
  vertical-align: baseline;
}

.chineseTransformTerms p:last-of-type {
  margin-bottom: 0;
}

.chineseTransformTerms p b {
  font-weight: 700;
  color: #ee5a50;
}

.chineseTransformTerms > div {
  padding: 18px;
  height: 100%;
  overflow-y: auto;
}

.chineseTransformTerms > div::-webkit-scrollbar {
  width: 4px;
  background: #fff;
}

.chineseTransformTerms > div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #d9d9d9;
}

.chineseTransformWrp .approve {
  margin-bottom: 30px;
}

.chineseTransformWrp .approve [type="checkbox"] {
  display: none;
}

.chineseTransformWrp .approve label {
  display: flex !important;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #333;
  font-weight: 400;
  cursor: pointer;
}

.chineseTransformWrp .approve [type="checkbox"] + label::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid #333;
}

.chineseTransformWrp .approve [type="checkbox"]:checked + label::before {
  border-color: #003bff;
  background: url(../../images/newBooking/checked_white.svg) #003bff no-repeat
    center / 12px auto;
}

.chineseTransformWrp .approve [type="checkbox"]:disabled + label::before {
  border-color: #ddd;
}

.chineseTransformWrp .approve [type="checkbox"]:disabled + label {
  cursor: default;
  color: #aaa;
}

.chineseTransformWrp .btnWrp {
  justify-content: center;
  display: flex;
  gap: 10px;
}

.chineseTransformWrp .btnWrp button {
  max-width: 120px;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #777;
  cursor: pointer;
  padding: 10px 15px;
  transition: color 0.3s;
}

.chineseTransformWrp .btnWrp button:hover {
  color: #112f82;
}

.chineseTransformWrp .btnWrp button.att {
  background: #003bff;
  color: #fff;
  border-color: #003bff;
  transition:
    background 0.3s,
    border 0.3s;
}

.chineseTransformWrp .btnWrp button.att:hover {
  background: #112f82;
  border-color: #112f82;
}

.chineseTransformWrp .btnWrp.disable button.att {
  background: #f0f0f0;
  color: #aaa;
  cursor: default;
  border-color: #f0f0f0;
}

.sujectSelect .learningSuccess .swiper-wrapper {
  align-items: stretch;
  margin-bottom: 20px;
}

.courseResource h4 {
  font-size: 18px;
  color: #333;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: "Roboto";
}

.courseResource .courseResourceList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.courseResource .courseResourceList li {
  padding: 20px;
  border-radius: 8px;
  background: #f7f8ff;
  display: flex;
  gap: 15px;
  align-items: center;
}

.courseResource .courseResourceList li h5 {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
  font-weight: 400;
  gap: 8px;
  margin-bottom: 8px;
}

.courseResource .courseResourceList li h5 label {
  border-radius: 20px;
  background: #a0c0ff;
  padding: 0 10px;
  font-family: "Roboto";
  font-size: 12px;
  color: #fff;
  font-weight: 400;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}

.courseResource .courseResourceList li p {
  margin-bottom: 12px;
  font-family: "Roboto";
  font-size: 14px;
  color: #555;
  font-weight: 300;
  line-height: 18px;
}

.courseResource .courseResourceList li span {
  font-family: "Roboto";
  font-size: 12px;
  color: #555;
  font-weight: 300;
}

.courseResource .courseResourceList li .downloadAppendix {
  width: 40px;
  height: 40px;
  background: url(../../images/newBooking/download.svg) #fff no-repeat center /
    22px auto;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
  cursor: pointer;
}

.courseResource .courseResourceList .audioAppendix {
  width: 100%;
}

.courseResource .courseResourceList .audioAppendix b {
  font-size: 16px;
  color: #080808;
  font-weight: 400;
  margin-bottom: 10px;
  display: block;
}

.courseResource .courseResourceList .audioAppendix > div {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 8px;
}

.courseResource .courseResourceList li .audioAppendix p {
  font-weight: 400;
}

.courseResource .audioPlayer {
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid #d1dbff;
  height: 50px;
  padding: 0 20px;
  flex: 1 1 auto;
  min-width: auto;
}

.courseResource .audioPlayer .volume,
.lessonAudio .audioPlayer .volume {
  display: none;
}

.courseResource .audioPlayer .controls,
.lessonAudio .audioPlayer .controls {
  margin-right: 0;
}

.courseResource .audioPlayer .controls span,
.lessonAudio .audioPlayer .controls span {
  font-weight: 400;
  color: #333;
  font-size: 16px;
  font-family: "Roboto";
}

.courseResource .audioPlayer .play-pause-btn,
.lessonAudio .audioPlayer .play-pause-btn {
  width: 26px;
  height: 26px;
  border: 2px solid #003bff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.courseResource .audioPlayer .play-pause-btn svg,
.lessonAudio .audioPlayer .play-pause-btn svg {
  width: 8px;
}

.courseResource .audioPlayer .play-pause-btn svg path,
.lessonAudio .audioPlayer .play-pause-btn svg path {
  fill: #003bff;
}

.courseResource .audioPlayer .holder .loading .loading__spinner,
.lessonAudio .audioPlayer .holder .loading .loading__spinner {
  left: 5px;
  bottom: 5px;
}

.courseResource .audioPlayer .slider {
  background: #ddd;
}

.courseResource .audioPlayer .slider .gap-progress .pin,
.lessonAudio .audioPlayer .slider .gap-progress .pin {
  background: #003bff;
  border: 2px solid #d1dbff;
  height: 20px;
  width: 20px;
  border-radius: 15px;
  top: -10px;
  right: -10px;
}

.lessonAudio .audioPlayer .slider .gap-progress .pin {
  height: 18px;
  width: 18px;
  top: -6px;
}

.courseResource .audioPlayer .slider .gap-progress {
  background: #003bff;
}

.courseResource .courseRelatedLink {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 25px;
}

.courseResource .courseRelatedLink li {
  border-radius: 8px;
  border: 1px solid #d1dbff;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.courseResource .courseRelatedLink li::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url(../../images/newBooking/link_icon.svg) #f7f8ff no-repeat
    center / 23px auto;
  flex-shrink: 0;
}

.courseResource .courseRelatedLink li a {
  text-decoration: underline;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 6px;
  display: inline-block;
  line-height: 22px;
}

.courseResource .courseRelatedLink li p {
  font-family: "Roboto";
  font-size: 14px;
  color: #555;
  font-weight: 300;
  line-height: 20px;
}

.commonSideMenu {
  padding-top: 60px;
}

.commonSideMenu > ul > li {
  color: #777;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 400;
  display: block;
  text-align: left;
  cursor: pointer;
  display: none;
}

.commonSideMenu > ul > li.onlyDeskShow {
  display: block;
}

.commonSideMenu > ul > li:not(.backHome, .newStudn) {
  background: url(../../images/newHomePage/arr_right.svg) no-repeat right 15px
    top 14px / 20px auto;
}

.commonSideMenu ul ul {
  height: auto;
  position: absolute;
  left: 100%;
  top: 80px;
  width: 100%;
  display: none;
}

.commonSideMenu li li a {
  padding: 12px 10px 12px 25px;
  font-size: 16px;
  color: #777;
  font-weight: 400;
  display: block;
}

.commonSideMenu .backHome a,
.commonSideMenu .newStudn a {
  color: #777;
  display: block;
  font-size: 16px;
  font-weight: 400;
}

.commonSideMenu .backSideMenu {
  background: url(../../images/newHomePage/arr_left.svg) no-repeat left 15px
    center / 20px auto;
  padding: 20px 0 20px 40px;
  position: absolute;
  left: 100%;
  top: 20px;
  width: 100%;
  font-size: 16px;
  color: #555;
  font-weight: 400;
  cursor: pointer;
  z-index: 2;
}
/*
.memberMenu > div {
	transition: transform .5s ease;
}

.memberMenu.active > div {
	transform: translateX(-100%);
}

.memberMenu .referral,
.personalInfo {
	display: none;
}

.memberMenu {
	padding: 0;
    display: flex;
    flex-direction: column;
}
*/
.commonSideMenuWrp {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.commonSideMenuWrp .deskSideMenuLogout {
  margin-top: auto;
}

.myStudyPlanMain .myStudyPlanInfo {
  border-radius: 8px;
  background: #edf1ff;
  padding: 8px 20px;
  display: table;
  width: 100%;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0 12px;
  margin-bottom: 24px;
}

.myStudyPlanMain .myStudyPlanInfo .tableTr {
  display: table-row;
}

.myStudyPlanMain .myStudyPlanInfo .tableTd {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  display: table-cell;
}

.myStudyPlanMain .myStudyPlanInfo .tableTd:first-child {
  color: #555;
  min-width: 80px;
  text-align: left;
  padding-right: 20px;
  white-space: nowrap;
  font-size: 14px;
  vertical-align: bottom;
}

.myStudyPlanMain .myStudyPlanInfo .tableTd span {
  color: #aaa;
  vertical-align: 1px;
  padding: 0 8px;
}

.myStudyPlanMain .myStudyPlanInfo .tableTd img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #fff;
  object-fit: fill;
  vertical-align: -6px;
  margin-right: 6px;
}

.myStudyPlanMain .myPlanBookingStatus {
  border-radius: 8px;
  background: #f2f2f2;
  padding: 16px 20px;
}

.myStudyPlanMain .myPlanBookingStatus p {
  font-weight: 400;
  font-size: 16px;
  color: #080808;
  margin-bottom: 12px;
  text-align: left;
}

.myStudyPlanMain .myPlanBookingStatus div {
  color: #0ead74;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.myStudyPlanMain .myPlanBookingStatus div span {
  margin-left: auto;
  font-size: 14px;
  color: #0037cc;
}

.myStudyPlanMain .myPlanBookingStatus div.fair,
.myStudyPlanMain .myPlanBookingStatus div span.fair {
  color: #ee5a50;
}

.myStudyPlanMain .myPlanBookingStatus div.fair a {
  color: #ee5a50;
  text-decoration: underline;
}

.myStudyPlanMain .classNotice {
  font-size: 14px;
  color: #777;
  font-weight: 300;
  text-align: center;
  margin-bottom: 10px;
}

.myStudyPlanMain .bookingFailedList {
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  padding: 2px 20px;
  max-height: 240px;
  overflow-y: auto;
}

.myStudyPlanMain .bookingFailedList li {
  padding: 12px 0;
  text-align: left;
}

.myStudyPlanMain .bookingFailedList li:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.myStudyPlanMain .bookingFailedList li h5 {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #080808;
  font-weight: 400;
  margin-bottom: 5px;
}

.myStudyPlanMain .bookingFailedList li h5 span {
  margin-left: auto;
  color: #0ead74;
  font-size: 14px;
  font-weight: 400;
}

.myStudyPlanMain .bookingFailedList li.fail h5 span {
  color: #ee5a50;
}

.myStudyPlanMain .bookingFailedList li p {
  font-size: 14px;
  color: #777;
  font-weight: 400;
}

.regularWeeklyClassSchedule {
  margin-bottom: 28px;
}

.regularWeeklyClassSchedule > h4,
.editSingleClassBooking > h4,
.regularWeeklyClassList > h4,
.regularWeeklyClassUnit > h4 {
  font-size: 12px;
  color: #555;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.regularWeeklyClassSchedule > h4,
.regularWeeklyClassList > h4 {
  flex-wrap: wrap;
}

.regularWeeklyClassSchedule > h4 span,
.editSingleClassBooking > h4 span,
.regularWeeklyClassList > h4 span,
.regularWeeklyClassUnit > h4 span {
  font-size: 18px;
  color: #333;
  font-weight: 400;
}

.regularWeeklyClassSchedule > p {
  font-size: 14px;
  color: #555;
  font-weight: 400;
  margin-bottom: 28px;
}

.regularWeeklyClassSchedule > p::before {
  content: "•";
  margin-right: 8px;
}

.regularWeeklyClassSchedule ul {
  display: flex;
  border-radius: 4px;
  border: 1px solid #e1e8ff;
}

.regularWeeklyClassSchedule li {
  flex: 1;
  border-right: 1px solid #e1e8ff;
  padding-bottom: 6px;
  min-height: 110px;
}

.regularWeeklyClassSchedule li:last-child {
  border: none;
}

.regularWeeklyClassSchedule li label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  background: url(../../images/newBooking/cancel_icon.svg) #4e80ff no-repeat 4px
    center / 13px auto;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  width: 85%;
  height: 24px;
  margin: 0 auto 4px;
}

.regularWeeklyClassSchedule li p {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #555;
  font-weight: 400;
  border-bottom: 1px solid #e1e8ff;
  margin-bottom: 10px;
  background: #fff;
}

.regularWeeklyClassSchedule li button {
  border-radius: 4px;
  background: url(../../images/newBooking/add_white_icon.svg) #d1dbff no-repeat
    center / 16px auto;
  width: 85%;
  height: 36px;
  display: block;
  cursor: pointer;
  margin: 0 auto 4px;
  transition: background 0.3s;
}

.regularWeeklyClassSchedule li button:hover {
  background-color: #9fb6ff;
}

.regularWeeklyClassSchedule li.active {
  background: #edf1ff;
}

.bookingSelect .regularWeeklyClass ~ .confirmBox {
  flex-wrap: nowrap;
  gap: 20px;
  align-items: center;
  padding: 20px 30px;
}

.bookingSelect .regularWeeklyClass ~ .confirmBox button {
  border-color: #ddd;
  color: #777;
  margin: 0 0 0 auto !important;
  min-width: 110px !important;
  flex-shrink: 0;
}

.bookingSelect .regularWeeklyClass ~ .confirmBox ul {
  display: flex;
  gap: 6px 12px;
  flex-wrap: wrap;
}

.bookingSelect .regularWeeklyClass ~ .confirmBox li {
  font-size: 14px;
  color: #4e80ff;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bookingSelect .regularWeeklyClass ~ .confirmBox li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4e80ff;
}

.bookingSelect .regularWeeklyClass ~ .confirmBox p {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  margin-bottom: 4px;
}

.bookingSelectTime .levelBarChart h4 {
  font-size: 16px;
  color: #333;
  font-weight: 400;
  margin-bottom: 28px;
}

.bookingSelectTime .levelBarChart ul {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 24px;
}

.bookingSelectTime .levelBarChart li {
  flex-grow: 1;
}

.bookingSelectTime .levelBarChart li input {
  display: none;
}

.bookingSelectTime .levelBarChart li label {
  border: 1px solid #ddd;
  background-image: none;
  background-color: #f2f2f2;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  text-align: center;
  margin: 0;
  padding: 10px 5px;
  font-size: 14px;
  color: #333;
  font-weight: 400;
  line-height: normal;
  position: relative;
  transition:
    background 0.3s,
    border 0.3s,
    color 0.3s;
}

.bookingSelectTime .levelBarChart li label::after {
  content: "";
  width: 18px;
  height: 12px;
  mask: url(../../images/newBooking/arr_active_level.svg) no-repeat center /
    100% auto;
  -webkit-mask: url(../../images/newBooking/arr_active_level.svg) no-repeat
    center / 100% auto;
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  transition: background 0.3s;
}

.bookingSelectTime .levelBarChart li input:checked + label {
  border: 1px solid #003bff;
  background: #003bff;
  color: #fff;
}

.bookingSelectTime .levelBarChart li input:checked + label::after {
  background-color: #003bff;
}

.bookingSelectTime .levelBarChart li:first-child {
  height: 110px;
}

.bookingSelectTime .levelBarChart li:nth-child(2) {
  height: 130px;
}

.bookingSelectTime .levelBarChart li:nth-child(3) {
  height: 150px;
}

.bookingSelectTime .levelBarChart li:nth-child(4) {
  height: 170px;
}

.bookingSelectTime .levelBarChart li:nth-child(5) {
  height: 190px;
}

.bookingSelectTime .levelBarChart li div {
  display: none;
}

.bookingSelectTime .levelBarChart .levelBookTitle,
.bookingSelectTime .levelBarChart li div {
  border-radius: 4px;
  background: #edf1ff;
  padding: 10px 20px;
  color: #003bff;
  font-size: 16px;
  font-weight: 400;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  display: none;
}

.bookingSelectTime .levelBarChart .levelBookTitle::before,
.bookingSelectTime .levelBarChart li div::before {
  content: "";
  width: 24px;
  height: 24px;
  mask: url(../../images/newBooking/book_color_blue_gray.svg) no-repeat center /
    24px auto;
  -webkit-mask: url(../../images/newBooking/book_color_blue_gray.svg) no-repeat
    center / 24px auto;
  background-color: #003bff;
}

.bookingSelectTime .levelBarChart .levelBookTitle a,
.bookingSelectTime .levelBarChart li div a {
  text-decoration: underline;
  color: #003bff;
  font-size: 16px;
}

.bookingSelect .levelBarChart ~ .confirmBox {
  margin-top: 28px;
}

.bookingSelect .levelBarChart ~ .confirmBox button,
.bookingSelect .regularWeeklyClass ~ .confirmBox button.active {
  background: #003bff;
  color: #fff;
  border-color: #003bff;
}

.editSingleClassBooking .pickMonth {
  width: 100%;
  margin: 25px 0 10px;
}

.editSingleClassBooking .pickMonth .currentMonth {
  color: #333;
  font-weight: 700;
}

.editSingleClassBooking .pickMonth button {
  background-color: #555;
  background-image: none;
  cursor: pointer;
}

.editSingleClassBooking .pickMonth button.disable {
  background-color: #ccc;
  cursor: default;
}

.editSingleClassBooking .pickMonth .prevMonth {
  mask: url(../../images/newBooking/arr_left.svg) no-repeat center / 100% auto;
  -webkit-mask: url(../../images/newBooking/arr_left.svg) no-repeat center /
    100% auto;
}

.editSingleClassBooking .pickMonth .nextMonth {
  mask: url(../../images/newBooking/arr_right.svg) no-repeat center / 100% auto;
  -webkit-mask: url(../../images/newBooking/arr_right.svg) no-repeat center /
    100% auto;
}

.editSingleClassBooking .curriculumTable ul.date li,
.editSingleClassBooking .curriculumTable ul.week {
  border-color: #f2f2f2;
}

.editSingleClassBooking .curriculumTable ul.date li {
  transition: background 0.3s;
  height: 120px;
  padding: 4px 8px;
  position: relative;
}

.editSingleClassBooking .curriculumTable ul.date li:hover,
.editSingleClassBooking .curriculumTable ul.date li.active {
  background: #edf1ff;
}

.editSingleClassBooking .date div.moreClassPop {
  padding: 14px 12px;
  width: 140px;
  background: #fff;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 8px;
  border: none;
  z-index: 2;
  box-shadow: 0 0 10px 0 rgba(180, 196, 255, 0.5);
  display: none;
}

.editSingleClassBooking .date div.moreClassPop p {
  font-size: 14px;
  color: #333;
  font-weight: 700;
  margin-bottom: 15px;
  white-space: normal;
  padding-right: 25px;
}

.editSingleClassBooking .date div.closePopup {
  padding: 0;
  border: none;
  top: 11px;
  right: 10px;
  width: 25px;
  height: 25px;
  background-image: none;
  mask: url(../../images/newBooking/close_menu.svg) no-repeat center / 20px auto;
  -webkit-mask: url(../../images/newBooking/close_menu.svg) no-repeat center /
    20px auto;
  background-color: #333;
}

.editSingleClassBooking .curriculumTable ul.week li {
  line-height: 48px;
  color: #080808;
}

.editSingleClassBooking .curriculumTable ul.date li label {
  font-weight: 700;
  cursor: default;
}

.editSingleClassBooking .curriculumTable ul.date li .moreClass {
  font-weight: 400;
  color: #777;
}

.editSingleClassBooking .curriculumTable .date div.classTime {
  cursor: pointer;
  background: url(../../images/newBooking/cancel_icon.svg) #4e80ff no-repeat 4px
    center / 13px auto;
  padding: 4px 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
  border: none;
  border-radius: 4px;
  font-family: "Noto Sans TC";
}

.editSingleClassBooking .curriculumTable .date div.classTime.disable {
  background: #ddd;
  cursor: default;
}

.editSingleClassBooking .curriculumTable ul.date li.disable {
  background: #e9e9e9;
}

.editSingleClassBooking .curriculumTable ul.date li.pnMonth label {
  color: #aaa;
}

.editSingleClassBooking .classCalendar {
  margin-bottom: 24px;
}

.editSingleClassBooking .curriculumTable ul.date li label {
  transition:
    background 0.3s,
    border 0.3s;
}

.editSingleClassBooking .curriculumTable ul.date li.active label {
  color: #003bff;
  border: 1px solid #003bff;
}

.editSingleClassBooking .curriculumTable ul.date li.today.active label {
  color: #fff;
}

.singleClassBookingList {
  margin-top: 10px;
  background: #fff;
  padding: 5%;
  display: none;
}

.singleClassBookingList .classTime {
  cursor: pointer;
  background: url(../../images/newBooking/cancel_icon.svg) #4e80ff no-repeat
    12px center / 20px auto;
  padding: 8px 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  border-radius: 4px;
  font-family: "Noto Sans TC";
}

.singleClassBookingList .classTime.disable {
  background-image: none;
  background-color: #ddd;
  cursor: default;
}

.singleClassBookingList button {
  border-radius: 4px;
  background: url(../../images/newBooking/add_white_icon.svg) #d1dbff no-repeat
    center / 16px auto;
  width: 100%;
  height: 36px;
  display: block;
  cursor: pointer;
}

.editSingleBookingTime {
  height: 100%;
}

.editSingleBookingTimeTitle {
  padding: 20px 20px 10px;
  background: #f2f2f2;
}

.editSingleBookingTimeTitle h4 {
  font-size: 20px;
  color: #333;
  font-weight: 400;
}

.editSingleBookingTimeMain {
  padding: 20px;
  background: #fff;
  min-height: calc(100% - 59px);
}

.editSingleBookingTimeMain > p {
  color: #555;
  font-size: 14px;
  font-weight: 300;
  padding: 5px;
}

.editSingleBookingTimeMain li {
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
}

.editSingleBookingTimeMain li a {
  padding: 12px;
  font-size: 16px;
  color: #555;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.editSingleBookingTimeMain li a::after {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ddd;
  margin-left: auto;
}

.editSingleBookingTimeMain li.active a {
  border-radius: 4px;
  background: #edf1ff;
  color: #003bff;
}

.editSingleBookingTimeMain li.active a::after {
  border-color: #edf1ff;
  background: url(../../images/newBooking/checked_icon.svg) #fff no-repeat
    center / 14px auto;
}

.editSingleBookingTimeMain .bottomWrp {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  border-top: 1px solid #ddd;
}

.editSingleBookingTimeMain .bottomWrp p {
  font-size: 16px;
  color: #555;
  font-weight: 400;
  margin-bottom: 4px;
}

.editSingleBookingTimeMain .bottomWrp span {
  font-size: 14px;
  color: #535251;
  font-weight: 300;
}

.editSingleBookingTimeMain .btnWrp {
  display: flex;
  gap: 10px;
  padding-top: 10px;
}

.editSingleBookingTimeMain .btnWrp button {
  padding: 10px 25px;
  border: 1px solid #003bff;
  border-radius: 30px;
  color: #003bff;
  flex: 1;
}

.editSingleBookingTimeMain .btnWrp button.att {
  background: #003bff;
  color: #fff;
}

.regularWeeklyClassList {
  background: #fff;
  border-radius: 0 0 8px 8px;
  padding: 30px 40px 40px;
}

.regularWeeklyClassList table {
  width: 100%;
  border-collapse: collapse;
}

.regularWeeklyClassList tbody {
  display: flex;
  width: 100%;
}

.regularWeeklyClassTime {
  padding-top: 10px;
}

.regularWeeklyClassTime tr {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.regularWeeklyClassTime th,
.regularWeeklyClassTime td {
  padding: 10px;
  font-weight: 400;
  font-size: 14px;
  color: #333;
  background: #f7f8ff;
  text-align: center;
  border: 1px solid #fff;
  min-height: 20px;
  line-height: 20px;
}

.regularWeeklyClassTime tr:first-child {
  max-width: 90px;
}

.regularWeeklyClassTime th:first-child,
.regularWeeklyClassTime td:first-child {
  background: #e7edff;
  font-weight: 700;
}

.regularWeeklyClassTime th:first-child::before {
  content: "";
  width: 20px;
  height: 20px;
  mask: url(../../images/newBooking/clock_white.svg) no-repeat center / 20px
    auto;
  -webkit-mask: url(../../images/newBooking/clock_white.svg) no-repeat center /
    20px auto;
  background-color: #080808;
  display: block;
  margin: 0 auto;
}

.regularWeeklyClassTime td a {
  color: #003bff;
  text-decoration: underline;
}

.regularWeeklyClassTime td.disable {
  color: #777;
}

.regularWeeklyClassTime .designateTeacher {
  font-size: 12px;
  color: #777;
  font-weight: 400;
  padding-top: 3px;
}

.regularWeeklyClassUnit {
  padding-top: 35px;
}

.regularWeeklyClassUnit .textbook {
  font-size: 14px;
  color: #080808;
  font-weight: 400;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.regularWeeklyClassUnit .textbook button {
  font-size: 14px;
  color: #003bff;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  font-family: "Noto Sans TC";
  text-align: left;
}

.regularWeeklyClassUnit .textbook a {
  background: #003bff;
  border-radius: 30px;
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 5px;
  flex-shrink: 0;
}

.regularWeeklyClassUnit .textbook a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/certificate_white.svg) no-repeat
    center / 20px auto;
}

.regularWeeklyClassUnit .unitList {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.regularWeeklyClassUnit .unitList > li {
  border-radius: 8px;
  background: #edf1ff;
  padding: 20px;
}

.regularWeeklyClassUnit .classUnitWrp {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.regularWeeklyClassUnit .classUnitWrp h4 {
  font-size: 16px;
  color: #080808;
  font-weight: 700;
  margin-bottom: 4px;
}

.regularWeeklyClassUnit .classUnitWrp p {
  font-size: 14px;
  color: #080808;
  font-weight: 400;
}

.regularWeeklyClassUnit .classUnitWrp::after {
  content: "";
  width: 20px;
  height: 20px;
  mask: url(../../images/newBooking/dropdown.svg) no-repeat center / 20px auto;
  -webkit-mask: url(../../images/newBooking/dropdown.svg) no-repeat center /
    20px auto;
  background-color: #080808;
  margin-left: auto;
}

.regularWeeklyClassUnit li.open .classUnitWrp::after {
  mask: url(../../images/newBooking/arrowup.svg) no-repeat center / 20px auto;
  -webkit-mask: url(../../images/newBooking/arrowup.svg) no-repeat center / 20px
    auto;
}

.regularWeeklyClassUnit .classUnitWrp + div {
  height: 0;
  overflow: hidden;
}

.regularWeeklyClassUnit .taskChart {
  position: relative;
}

.regularWeeklyClassUnit .taskChartNum {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #003bff;
  font-weight: 700;
}

.regularWeeklyClassUnit .taskChartNum span {
  font-size: 14px;
  color: #777;
  font-weight: 400;
  vertical-align: baseline;
}

.regularWeeklyClassUnit .lessonList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 0 40px;
}

.regularWeeklyClassUnit .lessonList li {
  border-radius: 8px;
  padding: 12px 16px;
  position: relative;
  border: 2px solid #fff;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.regularWeeklyClassUnit .lessonList li::after {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #bbcbff;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

.regularWeeklyClassUnit .lessonList li::before {
  content: "";
  height: calc(100% + 10px);
  width: 1px;
  border-right: 2px dashed #bbcbff;
  left: -27px;
  top: -5px;
  bottom: -5px;
  position: absolute;
}

.regularWeeklyClassUnit .lessonList li:first-child:before {
  height: calc(50% + 5px);
  top: auto;
}

.regularWeeklyClassUnit .lessonList li:last-child:before {
  height: calc(50% + 5px);
}

.regularWeeklyClassUnit .lessonList li a {
  border: 1px solid #ddd;
  border-radius: 30px;
  padding: 8px 20px;
  color: #003bff;
  font-size: 14px;
  font-weight: 400;
  margin-left: auto;
  flex-shrink: 0;
}

.regularWeeklyClassUnit .lessonList li a.noVideo {
  color: #aaa;
  position: relative;
}

.regularWeeklyClassUnit .lessonList li a.noVideo div {
  align-items: center;
  background: #aaa;
  border-radius: 4px;
  padding: 8px 10px;
  text-align: left;
  gap: 5px;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  min-width: 165px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  -webkit-animation: noVideoTip 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: noVideoTip 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes noVideoTip {
  0% {
    -webkit-transform: translateY(-15px) translateX(-50%);
    transform: translateY(-15px) translateX(-50%);
  }
  100% {
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
  }
}
@keyframes noVideoTip {
  0% {
    -webkit-transform: translateY(-15px) translateX(-50%);
    transform: translateY(-15px) translateX(-50%);
  }
  100% {
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
  }
}

.regularWeeklyClassUnit .lessonList li a.noVideo div.open {
  display: flex;
}

.regularWeeklyClassUnit .lessonList li a.noVideo div::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../../images/newBooking/alert_circle_white.svg) no-repeat
    center / 16px auto;
  flex-shrink: 0;
}

.regularWeeklyClassUnit .lessonList li a.noVideo div::after {
  content: "";
  width: 16px;
  height: 10px;
  mask: url(../../images/newBooking/arr_active_level.svg) no-repeat center /
    100% auto;
  -webkit-mask: url(../../images/newBooking/arr_active_level.svg) no-repeat
    center / 100% auto;
  background-color: #aaa;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.regularWeeklyClassUnit .lessonList div div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.regularWeeklyClassUnit .lessonList h4 {
  font-size: 16px;
  color: #080808;
  font-weight: 400;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.regularWeeklyClassUnit .lessonList h4 label {
  border-radius: 4px;
  background: #4e80ff;
  color: #fff;
  padding: 3px 8px;
  font-size: 14px;
  cursor: default;
}

.regularWeeklyClassUnit .lessonList h4 label.color1 {
  background: #0c9;
}

.regularWeeklyClassUnit .lessonList h4 label.color2 {
  background: #f66792;
}

.regularWeeklyClassUnit .lessonList p {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.regularWeeklyClassUnit .lessonList p::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #333;
}

.regularWeeklyClassUnit .lessonList p.time::before {
  mask: url(../../images/newBooking/clock.svg) no-repeat center / 100% auto;
  -webkit-mask: url(../../images/newBooking/clock.svg) no-repeat center / 100%
    auto;
}

.regularWeeklyClassUnit .lessonList p.teacher::before {
  mask: url(../../images/newBooking/teacher_color_blue_gray.svg) no-repeat
    center / 100% auto;
  -webkit-mask: url(../../images/newBooking/teacher_color_blue_gray.svg)
    no-repeat center / 100% auto;
}

.regularWeeklyClassUnit .lessonList p.teacher {
  padding-left: 8px;
}

.regularWeeklyClassUnit .lessonList p.teacher::after {
  content: "";
  width: 1px;
  height: 12px;
  background: #555;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

.regularWeeklyClassUnit .lessonList li.active {
  border-color: #305fff;
  box-shadow: 0 0 10px 0 rgba(180, 196, 255, 0.5);
}

.regularWeeklyClassUnit .lessonList li.active::after,
.regularWeeklyClassUnit .lessonList li.goIntoClassroom::after {
  border-color: #305fff;
}

.regularWeeklyClassUnit .lessonList li.finish::after {
  border-color: #305fff;
  background: url(../../images/newBooking/checked_white.svg) #305fff no-repeat
    center / 18px auto;
}

.regularWeeklyClassUnit .lessonList li.finish > div div {
  opacity: 0.5;
}

.regularWeeklyClassUnit .lessonList p.checked::before {
  background: url(../../images/newBooking/correct_circle.svg) no-repeat center /
    19px auto;
  mask: none;
  -webkit-mask: none;
}

.regularWeeklyClassUnit .lessonList li.overdue {
  border-color: #bbcbff;
}

.regularWeeklyClassUnit .lessonList li.overdue::after {
  background: url(../../images/newBooking/alert_icon.svg) #fff no-repeat
    center / 18px auto;
}

.regularWeeklyClassUnit .lessonList li.overdue a {
  display: block;
}

.regularWeeklyClassUnit .lessonList li.overdue p {
  color: #aaa;
}

.regularWeeklyClassUnit .lessonList li.overdue p.teacher::after {
  background: #aaa;
}

.regularWeeklyClassUnit .lessonList li.overdue p::before {
  background-color: #aaa;
}

.regularWeeklyClassUnit .lessonList li.goIntoClassroom {
  padding-bottom: 45px;
}

.regularWeeklyClassUnit .lessonList li.goIntoClassroom a {
  background: #4e80ff;
  position: absolute;
  bottom: 0;
  left: -2px;
  right: -2px;
  border-radius: 0 0 8px 8px;
  color: #fff;
  cursor: pointer;
  display: block;
  border: none;
  text-align: center;
}

.regularWeeklyClassUnit .lessonList li.goIntoClassroom.active a {
  left: 1px;
  right: 1px;
  bottom: 1px;
  width: calc(100% - 42px);
  border-radius: 0 0 6px 6px;
}

.selectDateTitle {
  padding: 0 8px;
  margin-bottom: 15px;
  font-size: 16px;
  color: #555;
  font-weight: 400;
}

.lessonAudio {
  border-radius: 8px;
  background: #e7edff;
  padding: 20px;
  margin-bottom: 20px;
}

.lessonAudio h4 {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #080808;
  font-weight: 400;
  gap: 8px;
  margin-bottom: 14px;
}

.lessonAudio h4 a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lessonAudio h4 a::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #0037cc;
}

.lessonAudio h4 a:first-of-type {
  margin-left: auto;
}

.lessonAudio h4 a.bookmarkBtn::before {
  mask: url(../../images/newBooking/bookmark_icon.svg) no-repeat center / 17px
    auto;
  -webkit-mask: url(../../images/newBooking/bookmark_icon.svg) no-repeat
    center / 17px auto;
}

.lessonAudio h4 a.downloadBtn::before {
  mask: url(../../images/newBooking/download.svg) no-repeat center / 18px auto;
  -webkit-mask: url(../../images/newBooking/download.svg) no-repeat center /
    18px auto;
}

.lessonAudio .audioPlayer {
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  height: 62px;
  padding: 0 14px;
  width: 100%;
}

.lessonAudio .audioPlayer .play-pause-btn {
  width: 24px;
  height: 24px;
}

.lessonAudio .audioPlayer .controls span {
  font-size: 14px;
}

.lessonAudio .audioPlayer.green-audio-player .controls .controls__slider {
  height: 10px;
  border-radius: 30px;
  background: #e7edff;
}

.lessonAudio .audioPlayer.green-audio-player .slider .gap-progress {
  background: #305fff;
}

.aiPodcast .lessonAudio.fixed {
  position: fixed;
  bottom: 83px;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: 2;
}

.aiPodcast .lessonAudio.fixed .audioPlayer {
  border-radius: 0;
  background: #e1e8ff;
}

.aiPodcast .lessonAudio.fixed h4 {
  display: none;
}

.aiPodcast .lessonAudio.fixed .audioPlayer .play-pause-btn {
  width: 18px;
  height: 18px;
}

.aiPodcast
  .lessonAudio.fixed
  .audioPlayer.green-audio-player
  .controls
  .controls__slider {
  height: 6px;
  background: #fff;
}

.aiPodcast .lessonAudio.fixed .audioPlayer {
  height: 46px;
}

.aiPodcast .lessonAudio.fixed .green-audio-player .slider .gap-progress .pin {
  display: none;
}

.aiPodcast .lessonAudio.fixed .audioPlayer .play-pause-btn svg {
  width: 6px;
}

.aiPodcast .lessonAudio.fixed .audioPlayer .controls span {
  font-size: 12px;
}

.audioCaptions {
  border-radius: 8px;
  background: #f2f2f2;
  padding: 24px;
  margin-bottom: 25px;
}

.audioCaptions .captionList {
  height: 0;
  transition: height 0.5s;
  overflow: hidden;
}

.audioCaptions.open .captionList {
  height: 500px;
}

.audioCaptions .captionList > ul {
  border: 1px solid #e7edff;
  border-radius: 8px;
  background: #fff;
  margin-top: 15px;
  overflow-y: auto;
  height: calc(100% - 15px);
}

.audioCaptions .captionList > ul > li {
  padding: 20px 15px 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.3s;
}

.audioCaptions .captionList > ul > li label {
  font-size: 14px;
  color: #aaa;
  font-weight: 700;
  transition: color 0.3s;
  line-height: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
}

.audioCaptions .captionList > ul > li label::before {
  content: "";
  width: 2px;
  height: 14px;
  background: #aaa;
}

.audioCaptions .captionList > ul > li.active label::before {
  background: #9fb6ff;
}

.audioCaptions .captionList > ul > li label button {
  width: 26px;
  height: 26px;
  background: url(../../images/newBooking/playBtn.svg) no-repeat center / 26px
    auto;
  flex-shrink: 0;
  order: -1;
  margin-right: 4px;
  cursor: pointer;
}

.audioCaptions .captionList > ul > li .originalText {
  color: #333;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 5px;
  transition: color 0.3s;
  position: relative;
}

.audioCaptions .captionList > ul > li .wordDefinition {
  display: inline-block;
  transition: color 0.3s;
  cursor: pointer;
  line-height: 22px;
}

.audioCaptions .captionList > ul > li .wordDefinition:hover {
  color: #9fb6ff;
  font-weight: 700;
}

.audioCaptions .captionList > ul > li .wordDefinition.active {
  color: #0037cc;
  font-weight: 700;
  transition: color 0.3s;
}

.audioCaptions .captionList > ul > li.active .wordDefinition.active {
  color: #003bff;
}

.audioCaptions .captionList > ul > li .wordDefinition.active:hover,
.audioCaptions .captionList > ul > li.active .wordDefinition.active:hover {
  color: #9fb6ff;
}

.wordDefinitionWrp {
  display: none;
  position: absolute;
  top: auto;
  border-radius: 8px;
  border: 1px solid #d1dbff;
  background: #f7f8ff;
  box-shadow: 0 0 10px 0 rgba(180, 196, 255, 0.5);
  max-width: 400px;
  width: 100%;
  padding: 20px;
  z-index: 1;
  max-width: 450px !important;
  overflow: hidden;
  z-index: 999999999;
}

.audioCaptions .captionList > ul > li div.wordDefinition:hover *,
.audioCaptions .captionList > ul > li .wordDefinition.active * {
  font-weight: 400;
}

.audioCaptions .captionList > ul > li div.wordDefinition:hover .vocab_title,
.audioCaptions .captionList > ul > li .wordDefinition.active .vocab_title {
  font-weight: 700;
}

.audioCaptions .captionList > ul > li div.wordDefinition:hover * .vocab_voice b,
.audioCaptions .captionList > ul > li .wordDefinition.active * .vocab_voice b {
  font-weight: bold;
}

.wordDefinitionWrp .wordDefinitionDetail {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 14px;
  color: #4e80ff;
  font-weight: 400;
  padding: 15px 23px;
  display: flex;
  align-items: center;
}

.wordDefinitionWrp .wordDefinitionDetail::before {
  content: "";
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0;
  top: -50px;
}

.wordDefinitionWrp .wordDefinitionDetail::after {
  content: "";
  width: 18px;
  height: 18px;
  mask: url(../../images/newBooking/arr_right.svg) no-repeat center / 18px auto;
  -webkit-mask: url(../../images/newBooking/arr_right.svg) no-repeat center /
    18px auto;
  background-color: #4e80ff;
  display: block;
}

.audioCaptions .captionList > ul > li > span {
  color: #333;
  font-weight: 400;
  font-size: 14px;
  transition: color 0.3s;
}

.audioCaptions .captionList > ul > li.active {
  background: #e7edff;
}

.audioCaptions .captionList > ul > li.active label {
  color: #9fb6ff;
}

.audioCaptions .captionList > ul > li.active p {
  color: #002da7;
}

.audioCaptions .captionList > ul > li.active span {
  color: #080808;
}

.audioCaptions ul::-webkit-scrollbar {
  width: 3px;
}

.audioCaptions ul::-webkit-scrollbar-track {
  background: transparent;
}

.audioCaptions ul::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 10px;
}

.captionToggleBtn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: #333;
  font-weight: 400;
}

.captionToggleBtn.active {
  color: #003bff;
}

.captionToggleBtn > div {
  position: relative;
  top: 50%;
  width: 54px;
  height: 32px;
  border-radius: 100px;
}

.captionToggleBtn > div input {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.captionToggleBtn .knob {
  z-index: 2;
  transition: 0.3s ease all;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.captionToggleBtn .knob:before {
  transition: 0.3s ease all;
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
}

.captionToggleBtn .btnBg {
  width: 100%;
  transition: 0.3s ease all;
  z-index: 1;
  border-radius: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ddd;
}

.captionToggleBtn > div input:checked + .knob:before {
  content: "";
  left: 26px;
  background-color: #fff;
}

.captionToggleBtn > div input:checked ~ .btnBg {
  background: #003bff;
}

.cptionsSitting {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cptionsSitting > p {
  width: 100%;
  font-size: 14px;
  color: #555;
  font-weight: 400;
  line-height: 18px;
}

.cptionsSitting .CCBtn {
  margin-left: auto;
  font-size: 16px;
  color: #aaa;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  transition: color 0.3s;
}

.audioCaptions.open .cptionsSitting .CCBtn {
  color: #333;
  cursor: pointer;
}

.cptionsSitting .CCBtn::after {
  content: "";
  width: 24px;
  height: 24px;
  mask: url(../../images/newBooking/icon_eye_darkgray.svg) no-repeat center /
    24px auto;
  -webkit-mask: url(../../images/newBooking/icon_eye_darkgray.svg) no-repeat
    center / 24px auto;
  background-color: #aaa;
  transition: all 0.3s;
}

.cptionsSitting .CCBtn.open::after {
  mask: url(../../images/newBooking/eye_open.svg) no-repeat center / 24px auto;
  -webkit-mask: url(../../images/newBooking/eye_open.svg) no-repeat center /
    24px auto;
}

.audioCaptions.open .cptionsSitting .CCBtn::after {
  background-color: #333;
}

.wordDefinitionWrp .vocab_title {
  background: transparent;
  padding: 0;
  text-indent: 0;
  font-size: 24px;
  color: #080808;
  font-weight: 700;
  flex-direction: row-reverse;
  justify-content: flex-end;
  cursor: default;
  margin-bottom: 0;
}

.wordDefinitionWrp .vocab_title button {
  display: none;
}

.wordDefinitionWrp .character_content {
  background: none;
  padding: 0;
  font-size: 16px;
}

.wordDefinitionWrp .character_bo3 {
  position: static;
  width: 20px;
  height: 30px;
  margin-right: 10px;
  background: none;
  mask: url(../../images/newBooking/bookmark_active_icon.svg) no-repeat center /
    24px auto;
  -webkit-mask: url(../../images/newBooking/bookmark_active_icon.svg) no-repeat
    center / 24px auto;
  background-color: #003bff;
}

.wordDefinitionWrp .character_bo2 {
  position: static;
  width: 20px;
  height: 30px;
  margin-right: 10px;
  background: none;
  mask: url(../../images/newBooking/bookmark_icon.svg) no-repeat center / 24px
    auto;
  -webkit-mask: url(../../images/newBooking/bookmark_icon.svg) no-repeat
    center / 24px auto;
  background-color: #003bff;
}

.wordDefinitionWrp .character_content .vocab_example {
  background: transparent;
  padding: 10px 0;
}

.wordDefinitionWrp .vocab_class {
  padding: 0;
}

.closeWordDefinition {
  position: absolute;
  right: 15px;
  top: 18px;
  width: 30px;
  height: 30px;
  background: url(../../images/OxfordUpgrade/close_color_default.svg) no-repeat
    center / 75% auto;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9;
}

.podcast .leftCourseSessionsMain {
  border: none;
  max-height: none;
  text-align: center;
}

.podcast .leftCourseSessionsMain img {
  max-width: 410px;
  width: 100%;
}

.podcast .leftCourseSessionsMain .btnWrp {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
}

.podcast .leftCourseSessionsMain .btnWrp a {
  width: 138px;
  height: 40px;
  border: 1px solid #002da7;
  border-radius: 4px;
}

.podcast .leftCourseSessionsMain .btnWrp a.appStoreDL {
  background: url(../../images/newBooking/appDownload1.svg) no-repeat center /
    100% auto;
}

.podcast .leftCourseSessionsMain .btnWrp a.googlePlayDL {
  background: url(../../images/newBooking/appDownload2.svg) no-repeat center /
    100% auto;
}

.bookClassBlock.podcast {
  padding: 0;
}

.materialsPrepared {
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
}

.materialsPrepared div {
  min-width: 300px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.materialsPrepared img {
  width: 140px;
}

.materialsPrepared h5 {
  font-size: 18px;
  color: #333;
  font-weight: 400;
}

.materialsPrepared p {
  font-size: 14px;
  color: #555;
  font-weight: 300;
}

.character_bo1 {
  mask: url(../../images/newBooking/icon_volume.svg) no-repeat center / 24px
    auto;
  -webkit-mask: url(../../images/newBooking/icon_volume.svg) no-repeat center /
    24px auto;
  background-color: #305fff;
  transition: background 0.4s;
  background-image: none;
}

.character_bo1:hover {
  background-color: #0037cc;
}

.character_bo1.is-play {
  mask: url(../../images/newBooking/icon_volume_active.svg) no-repeat center /
    24px auto;
  -webkit-mask: url(../../images/newBooking/icon_volume_active.svg) no-repeat
    center / 24px auto;
  background-color: #0037cc;
}

label.copySuccess.loadSuccess {
  z-index: 999999999;
  min-width: auto;
  padding: 10px 20px;
  background: #0ead74;
}

.waterMark {
  height: 100%;
  width: 100%;
  position: absolute;
  background-repeat: repeat;
  background-size: 130px auto;
}

.thumb_swiper_wrap .waterMark {
  background-size: 18px auto;
}

.orderCancelWrp > h4 {
  font-size: 20px;
  color: #333;
  font-weight: 700;
  margin-bottom: 20px;
}

.orderCancelWrp .orderCancelCtn {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  background: #f7f8ff;
  gap: 20px;
}

.orderCancelWrp .orderCancelCtn img {
  flex-shrink: 0;
  width: 60px;
}

.orderCancelWrp .orderCancelCtn p,
.orderCancelWrp .orderFeedbackCtn p {
  font-size: 18px;
  color: #555;
  font-weight: 400;
  text-align: justify;
}

.orderCancelWrp .orderFeedbackCtn.textCenter p {
  text-align: center;
}

.orderCancelWrp .tip {
  font-size: 16px;
  color: #555;
  font-weight: 400;
  text-align: center;
  padding-top: 10px;
}

.orderCancelWrp .orderFeedbackCtn {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.orderCancelWrp .orderCancelCtn p a {
  color: #003bff;
  text-decoration: underline;
}

.orderCancel .orderCancelList li label,
.kidsBooking .selectKidsAge li label {
  color: #555;
  font-weight: 400;
  min-height: 50px;
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f8f8;
  font-size: 16px;
  transition:
    background 0.4s,
    color 0.4s,
    box-shadow 0.4s;
  display: flex;
  align-items: center;
  text-align: justify;
}

.kidsBooking .selectKidsAge li label {
  min-height: 60px;
  box-sizing: border-box;
  background: transparent;
  border-color: #f0f0f0;
  color: #333;
}

.orderCancel .orderCancelList li label::before,
.kidsBooking .selectKidsAge li label::before {
  width: 30px;
  height: 30px;
  content: "";
  border: 1px solid #dddddd;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 10px;
  flex-shrink: 0;
}

.kidsBooking .selectKidsAge li label::before {
  border-color: #f0f0f0;
}

.orderCancel .orderCancelList li input[type="radio"],
.kidsBooking .selectKidsAge li input[type="radio"] {
  display: none;
}

.orderCancel .orderCancelList li input:checked ~ label,
.kidsBooking .selectKidsAge li input:checked ~ label {
  background: #edf1ff;
  font-weight: 400;
  color: #003bff;
  border: 1px solid #8ba1f1;
}

.orderCancel .orderCancelList li input:checked ~ label::before,
.kidsBooking .selectKidsAge li input:checked ~ label::before {
  background: url(../../images/newBooking/checked_icon.svg) #fff no-repeat
    center / 18px auto;
  border: 1px solid #fff;
}

.orderCancel .orderCancelIcon {
  width: 80px;
  margin-bottom: 20px;
}

.orderCancelWrp {
  max-height: 70vh;
  overflow: auto;
}

.orderCancelList li div {
  border-radius: 4px;
  border: 1px solid #003bff;
  background: #fff;
  margin: 10px 0;
  text-align: left;
  padding: 5px 10px;
  display: none;
}

.orderCancel .orderCancelList li input:checked ~ label ~ div {
  display: block;
}

.orderCancelList li div p {
  font-size: 14px;
  color: #003bff;
  font-weight: 400;
}

.orderCancelList li div input {
  width: 100%;
  color: #333;
  font-size: 14px;
}

.kidsBooking {
  margin-bottom: 15px;
}

.kidsBooking .bookingHead,
.examinationCenter .bookingHead {
  border-bottom: 1px solid #ddd;
  padding: 20px 40px 15px;
  background: #fff;
  border-radius: 8px 8px 0 0;
}

.kidsBooking .bookingHead h3,
.examinationCenter .bookingHead h3 {
  font-size: 20px;
  color: #080808;
  font-weight: 400;
  margin-bottom: 5px;
}

.kidsBooking .bookingHead p,
.examinationCenter .bookingHead p {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}

.examinationCenter .bookingHead h3 {
  position: relative;
}

.examinationCenter .bookingHead h3 a {
  font-size: 16px;
  color: #003bff;
  font-weight: 400;
  display: flex;
  gap: 6px;
  position: absolute;
  top: 2px;
  right: 0;
  align-items: center;
}

.examinationCenter .bookingHead h3 a::after {
  content: "";
  width: 24px;
  height: 24px;
  mask: url(../../images/newBooking/clock_color.svg) no-repeat center / 24px
    auto;
  -webkit-mask: url(../../images/newBooking/clock_color.svg) no-repeat center /
    24px auto;
  background-color: #003bff;
}

.kidsBooking .selectKidsAge {
  background: #fff;
  padding: 40px 40px 60px;
  border-radius: 0 0 8px 8px;
}

.kidsBooking .selectKidsAge ul {
  margin-bottom: 30px;
}

.kidsBooking .selectKidsAge .selectKidsAgeBtn {
  border-radius: 30px;
  background: #003bff;
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 10px 15px;
  cursor: pointer;
  margin: 0 auto;
  min-width: 140px;
  display: block;
  transition: background 0.3s;
}

.kidsBooking .selectKidsAge .selectKidsAgeBtn:hover {
  background: #112f82;
}

.vocab_pic {
  max-width: 95px;
  max-height: 95px;
}

.sharedClassPackage h4 {
  font-size: 16px;
  color: #333;
  font-weight: 400;
  padding: 20px 0 10px;
}

.sharedClassPackage table,
.sharedClassPackage thead,
.sharedClassPackage tbody {
  display: block;
}

.sharedClassPackage table {
  border-collapse: collapse;
}

.sharedClassPackage tr {
  display: flex;
}

.sharedClassPackage th {
  background: #edf1ff;
  padding: 10px 20px;
  font-size: 14px;
  color: #0037cc;
  font-weight: 400;
  text-align: left;
  flex-grow: 1;
  border: 2px solid #fff;
}

.sharedClassPackage tbody td {
  background: #f2f2f2;
  padding: 10px 20px;

  border: 2px solid #fff;

  flex-grow: 1;
  width: 25%;
  align-items: center;
  display: flex;
}

.sharedClassPackage th:first-child,
.sharedClassPackage tbody td:first-child {
  min-width: 50%;
}

.sharedClassPackage tbody td span {
  margin-left: auto;
  font-size: 12px;
  color: #777;
  flex-shrink: 0;
}

.sharedClassPackage tbody td label {
  border-radius: 4px;
  background: #003bff;
  padding: 2px 6px;
  color: #fff;
  font-weight: 400;
  font-size: 12px;
  cursor: default;
  flex-shrink: 0;
}

.sharedClassPackage tbody td > div {
  display: flex;
  font-size: 14px;
  color: #333;
  font-weight: 400;
  text-align: left;
  align-items: center;
  width: 100%;
  gap: 4px;
}

.learningRecordDetail .learningDetailCount p .moreInfo {
  position: relative;
}

.learningRecordDetail .learningDetailCount p .moreInfo::before {
  content: "";
  width: 18px;
  height: 18px;
  mask: url(../../images/newBooking/info_icon.svg) no-repeat center / 18px auto;
  -webkit-mask: url(../../images/newBooking/info_icon.svg) no-repeat center /
    18px auto;
  background-color: #0037cc;
  margin-left: 4px;
  cursor: pointer;
  display: block;
  position: relative;
  top: 3px;
}

.wordDefinitionWrp .vocab_voice span {
  font-size: 14px;
  color: #333;
  font-weight: 300;
}

.wordDefinitionWrp .vocab_voice b {
  color: #333;
  font-size: 16px;
  font-weight: 400;
}

.wordDefinitionWrp .vocab_mean ol li,
.wordDefinitionWrp .vocab_mean ol li p {
  font-size: 14px;
  color: #333;
}

.leftCourseSessionsWrp.aiSpeak {
  padding: 0;
  width: auto;
  background: none;
}

.leftCourseSessionsWrp.aiSpeak a {
  display: block;
}

.leftCourseSessionsWrp.aiSpeak img {
  border-radius: 8px;
  max-height: 80vh;
  max-width: 100%;
}

.cambridgeSeries .courseListHead {
  font-size: 18px;
  color: #333;
  font-weight: 400;
  margin-bottom: 12px;
}

.cambridgeSeriesSubject li {
  width: 150px;
  cursor: pointer;
}

.cambridgeSeriesSubject li > div {
  position: relative;
}

.cambridgeSeriesSubject li > div span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 30px;
  background: rgba(78, 128, 255, 0.6);
  backdrop-filter: blur(2px);
  color: #fff;
  font-family: "Roboto";
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
}

.cambridgeSeriesSubject li img {
  object-fit: fill;
  width: 150px;
  height: 120px;
  border-radius: 8px;
}

.cambridgeSeriesSubject li.active img {
  border: 2px solid #003bff;
}

.cambridgeSeriesSubject li p {
  font-weight: 400;
  color: #080808;
  font-size: 14px;
  text-align: center;
  margin-top: 6px;
}

.cambridgeSeriesSubject li.active p {
  font-weight: 700;
  color: #003bff;
}

.cambridgeSeriesList {
  border-radius: 8px;
  background: #edf1ff;
  padding: 12px 20px;
  margin-bottom: 10px;
}

.cambridgeSeriesList .cambridgeSeriesName {
  font-size: 16px;
  color: #080808;
  font-weight: 700;
  padding: 12px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.cambridgeSeriesList .cambridgeSeriesName::after {
  content: "";
  width: 22px;
  height: 22px;
  mask: url(../../images/newBooking/dropdown.svg) no-repeat center / 22px auto;
  -webkit-mask: url(../../images/newBooking/dropdown.svg) no-repeat center /
    22px auto;
  background-color: #080808;
  margin-left: auto;
}

.cambridgeSeriesList.open .cambridgeSeriesName::after {
  mask: url(../../images/newBooking/arrowup.svg) no-repeat center / 22px auto;
  -webkit-mask: url(../../images/newBooking/arrowup.svg) no-repeat center / 22px
    auto;
}

.cambridgeSeriesList ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 5px;
}

.cambridgeSeriesList li {
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 4px 8px;
  min-height: 60px;
  cursor: pointer;
}

.cambridgeSeriesList li.select {
  padding: 12px 30px 12px 16px;
}

.cambridgeSeriesList li.select,
.cambridgeSeriesList li.booked,
.cambridgeSeriesList li.finished {
  flex-wrap: wrap;
}

.cambridgeSeriesList li.finished {
  background: #f7f8ff;
}

.cambridgeSeriesList li p {
  font-size: 16px;
  font-weight: 400;
  color: #080808;
  display: flex;
  align-items: center;
}

.cambridgeSeriesList li.select p,
.cambridgeSeriesList li.booked p,
.cambridgeSeriesList li.finished p {
  align-items: flex-start;
}

.cambridgeSeriesList li.select p::before,
.cambridgeSeriesList li.booked p::before,
.cambridgeSeriesList li.finished p::before {
  margin-top: -2px;
}

.cambridgeSeriesList li p + span {
  font-size: 14px;
  color: #777;
  font-weight: 400;
  width: 100%;
  padding-left: 32px;
}

.cambridgeSeriesList li p + span b {
  font-size: 14px;
  color: #777;
  font-weight: 400;
  vertical-align: 0;
}

.cambridgeSeriesList li p + span b::before {
  content: "|";
  margin: 0 5px;
}

.cambridgeSeriesList li p::before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../images/newBooking/book_no_finish.svg) no-repeat center /
    24px auto;
  flex-shrink: 0;
  margin-right: 8px;
}

.cambridgeSeriesList li.finished p::before {
  background-image: url(../../images/newBooking/book_finished.svg);
}

.cambridgeSeriesList li.booked p::before {
  background-image: url(../../images/newBooking/book_booked.svg);
}

.cambridgeSeriesList li.select {
  border: 1px solid #003bff;
  position: relative;
}

.cambridgeSeriesList li.select .cancel {
  width: 30px;
  height: 30px;
  mask: url(../../images/newBooking/cancel_color.svg) no-repeat center / 16px
    auto;
  -webkit-mask: url(../../images/newBooking/cancel_color.svg) no-repeat center /
    16px auto;
  background-color: #003bff;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.cambridgeSeriesList li button {
  border-radius: 25px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 20px;
  font-size: 14px;
  color: #003bff;
  font-weight: 400;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.3s;
}

.cambridgeSeriesList li button:hover {
  color: #002da7;
}

.cambridgeSeriesCourse .courseListHead {
  font-size: 18px;
  color: #333;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.cambridgeSeriesCourse .courseListHead span {
  font-size: 14px;
  color: #305fff;
  font-weight: 400;
  display: flex;
}

.cambridgeSeriesCourse .courseListHead span::before {
  content: "";
  width: 1px;
  height: 20px;
  background: #ddd;
  margin: 0 12px;
}

.cambridgeSeriesSubject {
  margin-bottom: 20px;
}

.cambridgeSeriesList .cambridgeSeriesName + div {
  height: 0;
  overflow: hidden;
}

.materialPageWiden .preview_title_block {
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.materialPageWiden .preview_title_block .bookBtn,
.materialPageWiden .preview_title_block .goToClassBtn,
.materialPageWiden .tab_content_block .bookBtn,
.materialPageWiden .tab_content_block .goToClassBtn {
  border-radius: 25px;
  background: #003bff;
  padding: 8px 30px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}

.materialPageWiden .tab_content_block .bookBtn,
.materialPageWiden .tab_content_block .goToClassBtn {
  width: calc(100% - 40px);
  margin: 0 auto;
  display: none;
}

.materialPageWiden .preview_title_block .goToClassBtn,
.materialPageWiden .tab_content_block .goToClassBtn {
  background: #dd5dd5;
}

.materialPageWiden .playBarWrp {
  background: #f0f0f3;
  padding-top: 14px;
}

.switchBookMethod {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  margin-bottom: 20px;
}

.switchBookMethod button {
  flex: 1;
  padding: 8px;
  font-size: 16px;
  color: #333;
  font-weight: 300;
  text-align: center;
}

.switchBookMethod button.active {
  background: #003bff;
  color: #fff;
}

.cambridgeSeriesSubjectMobile {
  position: relative;
  margin-bottom: 16px;
}

.cambridgeSeriesSubjectMobile button {
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #f2f2f2;
  padding: 6px 12px;
  background: #f2f2f2;
  text-align: left;
  width: 100%;
  position: relative;
}

.cambridgeSeriesSubjectMobile button::after {
  content: "";
  width: 20px;
  height: 20px;
  mask: url(../../images/newBooking/dropdown.svg) no-repeat center / 20px auto;
  -webkit-mask: url(../../images/newBooking/dropdown.svg) no-repeat center /
    20px auto;
  background-color: #555;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.cambridgeSeriesSubjectMobile button span {
  font-size: 14px;
  color: #003bff;
  font-weight: 400;
}

.cambridgeSeriesSubjectMobile button p {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  margin-top: 3px;
}

.cambridgeSeriesSubjectMobile {
  display: none;
}

.cambridgeSeriesSubjectMobile div {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  top: 35px;
  left: 0;
  transition:
    opacity 0.6s,
    top 0.4s;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(180, 196, 255, 0.5);
  width: 100%;
  z-index: 2;
}

.cambridgeSeriesSubjectMobile button.open + div {
  opacity: 1;
  visibility: visible;
  top: 60px;
}

.cambridgeSeriesSubjectMobile ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cambridgeSeriesSubjectMobile li {
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
  color: #555;
  font-weight: 400;
  transition:
    background 0.3s,
    color 0.3s;
  cursor: pointer;
  line-height: 30px;
}

.cambridgeSeriesSubjectMobile li:hover {
  background: #edf1ff;
  color: #003bff;
}

.taptClassroomWrp {
  background: #edf1ff;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.taptClassroomHead {
  padding: 30px;
  background: #fff;
  display: flex;
}

.taptClassroomHead .examName {
  font-weight: 700;
  font-size: 28px;
  color: #0037cc;
  letter-spacing: 1px;
}

.taptClassroomHead .textTime {
  color: #0037cc;
  line-height: 22px;
  font-size: 20px;
  margin-left: auto;
}

.taptClassroomContent {
  padding: 30px;
}

.taptClassroomContent > h3 {
  font-size: 28px;
  color: #333;
  font-weight: 700;
}

.taptClassroomContent .AISuggestions {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
}

.taptClassroomContent .AISuggestions .resultLevel {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.taptClassroomContent .AISuggestions .resultLevel .levelInfo {
  display: flex;
  border-radius: 8px;
  padding: 20px 0;
  background: url(../../images/ExamV2/score_bg.svg) #4e80ff no-repeat right
    bottom / 105px auto;
}

.taptClassroomContent .AISuggestions .resultLevel .levelInfo li {
  border-left: 1px solid #fff;
  text-align: center;
  padding: 0 55px 10px;
  min-width: 96px;
}

.taptClassroomContent .AISuggestions .resultLevel .levelInfo li:first-child {
  border: none;
}

.taptClassroomContent .AISuggestions .resultLevel p {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 30px;
}

.taptClassroomContent .AISuggestions .resultLevel .levelInfo li:first-child p {
  margin-bottom: 26px;
}

.taptClassroomContent .AISuggestions .resultLevel .suggestion li {
  display: flex;
}

.taptClassroomContent .AISuggestions .resultLevel .suggestion li::before {
  content: "．";
  flex-shrink: 0;
  font-size: 20px;
  line-height: 38px;
}

.taptClassroomContent .AISuggestions .resultLevel b {
  color: #fff;
  font-size: 56px;
  font-weight: 700;
  white-space: nowrap;
}

.taptClassroomContent .AISuggestions .resultLevel li:first-child b {
  font-size: 64px;
}

.taptClassroomContent .AISuggestions .resultLevel h4 {
  font-size: 24px;
  color: #003bff;
  font-weight: 700;
  margin-bottom: 10px;
  padding-top: 10px;
}

.taptClassroomContent .AISuggestions .resultLevel span {
  font-size: 22px;
  color: #333;
  font-weight: 400;
  line-height: 34px;
}

.taptClassroomContent .AISuggestions .scoreNote {
  padding-top: 20px;
  font-size: 18px;
  color: #555;
  display: flex;
  gap: 5px;
  align-items: center;
}

.taptClassroomContent .AISuggestions .scoreNote::before {
  content: "";
  width: 28px;
  height: 28px;
  mask: url(../../images/newBooking/info_icon.svg) no-repeat center / 100% auto;
  -webkit-mask: url(../../images/newBooking/info_icon.svg) no-repeat center /
    100% auto;
  background-color: #555;
}

.AISkillScores {
  padding-top: 30px;
  display: flex;
  gap: 24px;
}

.AISkillScores > li {
  flex: 1;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
}

.AISkillScores ul {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 85px 0 30px;
  border-bottom: 1px solid #e1e8ff;
}

.AISkillScores li li {
  height: 12px;
  background: rgba(209, 219, 255, 0.8);
  flex: 1;
  position: relative;
}

.AISkillScores .starter li:first-child,
.AISkillScores .elementary li:nth-child(-n + 2),
.AISkillScores .intermediate li:nth-child(-n + 3),
.AISkillScores .upperIntermediate li:nth-child(-n + 4),
.AISkillScores .advanced li:nth-child(-n + 5) {
  background: rgba(0, 59, 255, 0.8);
}

.AISkillScores li li::before {
  position: absolute;
  padding: 7px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.AISkillScores li li::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px;
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
}

.AISkillScores .starter li:first-child::before {
  background: #ffc12e;
}

.AISkillScores .starter li:first-child::after {
  content: "";
  border-color: #ffc12e transparent transparent transparent;
}

.AISkillScores .elementary li:nth-child(2)::before {
  background: #ff8149;
}

.AISkillScores .elementary li:nth-child(2)::after {
  content: "";
  border-color: #ff8149 transparent transparent transparent;
}

.AISkillScores .intermediate li:nth-child(3)::before {
  background: #00cc99;
}

.AISkillScores .intermediate li:nth-child(3)::after {
  content: "";
  border-color: #00cc99 transparent transparent transparent;
}

.AISkillScores .upperIntermediate li:nth-child(4)::before {
  background: #9747ff;
}

.AISkillScores .upperIntermediate li:nth-child(4)::after {
  content: "";
  border-color: #9747ff transparent transparent transparent;
}

.AISkillScores .advanced li:nth-child(5)::before {
  background: #002da7;
}

.AISkillScores .advanced li:nth-child(5)::after {
  content: "";
  border-color: #002da7 transparent transparent transparent;
}

.AISkillScores .lvl1 li.active::before {
  content: "Lvl 1";
}

.AISkillScores .lvl2 li.active::before {
  content: "Lvl 2";
}

.AISkillScores .lvl3 li.active::before {
  content: "Lvl 3";
}

.AISkillScores .lvl4 li.active::before {
  content: "Lvl 4";
}

.AISkillScores .lvl5 li.active::before {
  content: "Lvl 5";
}

.AISkillScores .lvl6 li.active::before {
  content: "Lvl 6";
}

.AISkillScores .lvl7 li.active::before {
  content: "Lvl 7";
}

.AISkillScores .lvl8 li.active::before {
  content: "Lvl 8";
}

.AISkillScores .lvl9 li.active::before {
  content: "Lvl 9";
}

.AISkillScores .lvl10 li.active::before {
  content: "Lvl 10";
}

.AISkillScores .lvl11 li.active::before {
  content: "Lvl 11";
}

.AISkillScores .lvl12 li.active::before {
  content: "Lvl 12";
}

.AISkillScores > li h4 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  text-align: center;
}

.AISkillScores > li > div {
  display: flex;
  color: #333;
  font-size: 20px;
  font-weight: 400;
  align-items: center;
  padding-top: 24px;
}

.AISkillScores .skillScores {
  color: #777;
  font-size: 18px;
  font-weight: 700;
  margin-left: auto;
}

.AISkillScores .skillScores b {
  color: #003bff;
  font-weight: 700;
  font-size: 24px;
  vertical-align: -1px;
  margin-right: 3px;
}

.annualReview2025 {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  cursor: pointer;
}

.annualReview2025 img {
  max-width: 100%;
  display: block;
}

.lessonSelect.newOxford .noPlan {
  padding: 30px 20px;
}

.lessonSelect.newOxford .noPlan button.disabled {
  background: #f2f2f2;
  color: #aaa;
  cursor: default;
}

.lessonSelect.newOxford .noPlan b {
  margin-bottom: 8px;
}

.lessonSelect.newOxford .viewCourseContent {
  text-align: right;
  padding-top: 15px;
}

.lessonSelect.newOxford .viewCourseContent a {
  color: #0037cc;
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
}

.lessonSelect.newOxford .subscriptionNotice {
  padding: 16px 20px;
  border-radius: 8px;
  background: #fff7e5;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lessonSelect.newOxford .subscriptionNotice p {
  color: #333;
  font-size: 14px;
}

.lessonSelect.newOxford .subscriptionNotice::before {
  content: "";
  width: 24px;
  height: 24px;
  mask: url(../../images/newBooking/alert_circle.svg) no-repeat center / 24px
    auto;
  -webkit-mask: url(../../images/newBooking/alert_circle.svg) no-repeat center /
    24px auto;
  background-color: #ff9700;
  flex-shrink: 0;
}

.lessonSelect.newOxford .subscriptionNotice a {
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  vertical-align: 1px;
}

.learningProgress.newOxford .lessonSelectWrp .swiper {
  padding: 20px 0 0;
}

.learningProgress.newOxford .lessonSelectWrp .selectBook .swiper-slide {
  width: auto;
  border-radius: 40px;
  border: 1px solid #aaa;
  background: #fff;
  font-size: 16px;
  color: #aaa;
  font-weight: 400;
  padding: 8px 20px;
}

.learningProgress.newOxford .lessonSelectWrp .selectBook .swiper-slide.active {
  border-color: #003bff;
  background: #003bff;
  color: #fff;
}

.newOxford .confirmBox,
.newOxfordCourse .confirmBox {
  margin-top: 30px;
}

.lessonSelect .newOxfordCourse .title {
  margin: 0 -40px;
  padding: 0 40px 20px;
  color: #333;
  font-size: 20px;
  display: block;
  border-bottom: 1px solid #f2f2f2;
}

.lessonSelect .newOxfordCourse .title p {
  font-size: 14px;
  margin-top: 5px;
}

.lessonSelect .newOxfordCourseWrp ul {
  padding: 20px 0 0;
}

.lessonSelect .newOxfordCourseWrp li {
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  backdrop-filter: blur(21px);
  background: #fff;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.lessonSelect .newOxfordCourseWrp li h3 {
  font-size: 16px;
  color: #333;
  font-weight: 400;
}

.lessonSelect .newOxfordCourseWrp li.active {
  border: 2px solid #003bff;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}

.lessonSelect .newOxfordCourseWrp .unitName {
  display: flex;
  gap: 12px;
  padding: 20px;
}

.lessonSelect .newOxfordCourseWrp .unitName h4 {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}

.lessonSelect .newOxfordCourseWrp .unitName p {
  color: #333;
  font-size: 14px;
  font-weight: 400;
}

.lessonSelect .newOxfordCourseWrp .unitChange {
  padding: 12px 16px;
  background: #f7f8ff;
}

.lessonSelect .newOxfordCourseWrp .unitChange p {
  font-size: 14px;
  color: #555;
  font-weight: 400;
  margin-bottom: 10px;
}

.lessonSelect .newOxfordCourseWrp .unitChange a {
  float: right;
  color: #0037cc;
  font-size: 14px;
  text-decoration: underline;
  font-weight: 400;
}

.lessonSelect .newOxfordCourseWrp .bookImage {
  width: 80px;
  height: 104px;
  border-radius: 4px;
  overflow: hidden;
  display: block;
}

.lessonSelect .newOxfordCourseWrp .bookImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lessonSelect .newOxfordCourseWrp li label {
  font-size: 14px;
  color: #003bff;
  font-weight: 400;
  border-radius: 30px;
  background: #e7edff;
  padding: 2px 10px;
  margin-left: auto;
  height: 24px;
  display: block;
  cursor: pointer;
  flex-shrink: 0;
}

.newOxford .myStudyPlanWrp h4 {
  font-weight: 700;
}

.newOxford .myStudyPlanMain .bookingFailedList li h5 {
  color: #333;
}

.newOxford .myStudyPlanTitle p {
  font-weight: 400;
}

.newOxford .myStudyPlanMain > p,
.newOxford .myStudyPlan .studyPlanTips li {
  font-weight: 400;
  font-size: 12px;
  text-align: left;
}

.newOxford .classCalendar .switchCurriculum {
  margin: 0 0 0 auto;
  overflow: visible;
}

.newOxford .classCalendar .switchCurriculum button {
  position: relative;
  font-weight: 350;
  cursor: pointer;
}

.newOxford .classCalendar .switchCurriculum button.active {
  font-weight: 400;
  background: #003bff;
  color: #fff;
  cursor: default;
}

.newOxford .classCalendar .switchCurriculum button:first-child {
  border-radius: 3px 0 0 3px;
}

.newOxford .classCalendar .switchCurriculum button:last-child {
  border-radius: 0 3px 3px 0;
}

.newOxford .classCalendar .switchCurriculum button::before {
  background-image: none;
  background-color: #333;
}

.newOxford .classCalendar .switchCurriculum button.active::before {
  background-image: none;
  background-color: #fff;
}

.newOxford .classCalendar .switchCurriculum button:first-child::before {
  mask: url(../../images/newBooking/clock.svg) no-repeat center / 18px auto;
  -webkit-mask: url(../../images/newBooking/clock.svg) no-repeat center / 18px
    auto;
}

.newOxford .classCalendar .switchCurriculum button:last-child::before {
  mask: url(../../images/newBooking/teacher_color_blue_gray.svg) no-repeat
    center / 18px auto;
  -webkit-mask: url(../../images/newBooking/teacher_color_blue_gray.svg)
    no-repeat center / 18px auto;
}

.newOxford .classCalendar .teacherBookingTooltip {
  position: absolute;
  border-radius: 4px;
  background: #333;
  padding: 10px 16px;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  width: 215px;
  z-index: 99999999;
  text-align: left;
  pointer-events: none;
}

.newOxford .classCalendar .teacherBookingTooltip:after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -11px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 10px 0 10px;
  border-color: #333 transparent transparent transparent;
}

.editSingleClassBooking.newOxford .classCalendar {
  flex-wrap: wrap;
}

@media only screen and (max-width: 1300px) {
  .bookedClassList .topnav .editTips + div,
  .bookedClassList > h4 .editTips + div,
  .materialBlock .editTips + div {
    right: 0;
  }

  .lessonSelectWrp .bookingTips div {
    right: 0;
  }
}

@media only screen and (max-width: 1100px) {
  .newMain .referral,
  .memberMenu .referral {
    display: block;
  }

  .referral.corp .ttl p {
    font-size: 17px;
  }

  .deskSideMenu {
    display: none;
  }

  .deskSideMenu ~ #mobileSideMenu {
    padding: 15px 0;
    display: block;
    transition: transform 0.5s ease;
  }

  .deskSideMenu ~ #mobileSideMenu.active {
    transform: translateX(-100%);
  }

  .deskSideMenu ~ #mobileSideMenu .backSideMenu {
    font-size: 16px;
    color: #555;
    font-weight: 400;
    cursor: pointer;
    z-index: 2;
  }

  .memberMobileMenuBtn {
    width: 40px;
    height: 60px;
    background: url(../../images/newBooking/burger_color.svg) transparent
      no-repeat center / 20px auto;
    position: absolute;
    top: 0;
    right: 5px;
    display: block;
    cursor: pointer;
  }

  .memberMenu.active > div {
    transform: translateX(-100%);
  }

  .memberMenu > div {
    transition: transform 0.5s ease;
  }

  .memberMenu .personalNew {
    height: auto;
    transition: height 0.5s;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .memberMenu.active .personalNew {
    height: 0;
    padding: 0;
  }

  .selectLggBar > div {
    padding: 10px 15px;
  }

  .selectLggBar > div ul {
    position: fixed;
    top: 0;
    right: 0;
    width: 315px;
    background: #fff;
    min-height: 100vh;
    height: 100%;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.5s ease;
    z-index: 10;
    left: auto;
    border-radius: 0;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    padding: 60px 0 30px;
    box-sizing: border-box;
  }

  .selectLggBar.active div ul {
    transform: translateX(0);
  }

  .selectLggBar > div:hover ul {
    top: 0;
  }

  .selectLggBar ul li a {
    border-radius: 0;
  }

  .selectLggBar.active li.active a {
    color: #003bff;
    display: flex;
    align-items: center;
    background: transparent;
    font-weight: 400;
  }

  .selectLggBar.active li.active a::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../../images/newBooking/checked_icon.svg) no-repeat center /
      20px auto;
    margin-left: 10px;
  }

  .memberMenu .personalNew a.timeZone {
    display: flex;
    background: #dee0fc;
    padding: 10px 20px;
    justify-content: flex-start;
    margin-top: 20px;
  }

  .selectLggBarWrp .memberNameMenuBtn {
    padding-right: 15px;
    cursor: default;
  }

  .bookingHead .editTool {
    display: none;
  }

  .regularWeeklyClassList .editTool {
    display: block;
  }

  .regularWeeklyClassList h4 b {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .bookingCalendar .chooseTime li {
    width: 24%;
  }

  .bookingCalendar .chooseTime li {
    width: 32%;
  }

  .bookingSelect .confirmBox {
    justify-content: center;
    align-items: stretch;
    padding: 15px 15px 30px;
  }

  .bookingSelect .confirmBox button {
    width: auto;
    min-width: 150px;
    margin: 0 2%;
    font-size: 16px;
  }

  .bookingSelect .confirmBox span {
    text-align: center;
    margin-bottom: 8px;
  }

  .changeTimeBlock .BlockWrap {
    padding: 20px;
  }

  .bookingCalendar .choosePeriod .swp {
    overflow: hidden;
  }

  .bookingCalendar .choosePeriod li,
  .bookingSelectNew .choosePeriod li {
    width: auto;
    flex-grow: 1;
    padding: 6px 8px;
    margin: 0 3px;
  }

  .bookingCalendar .choosePeriod .swiper-button-prev {
    background-image: url(../../images/newBooking/mask_left4.png);
    background-size: 100% auto;
    left: calc(4% - 1px);
  }

  .bookingCalendar .choosePeriod .swiper-button-next {
    background-image: url(../../images/newBooking/mask_right4.png);
    background-size: 100% auto;
    right: calc(4% - 1px);
  }

  .consultantSelectPopup .teacherTime label {
    margin: 3px 0;
    display: inline-block;
  }

  .consultantSelectPopup .bookingSelectTeacher .teacherTime b {
    margin: 6px 8px;
    display: inline-block;
  }

  .newMain .classComingNew .classComingWrp,
  .newMain .classFinishedNew .classComingWrp {
    padding-bottom: 20px;
  }

  .classComingNew .classComingBtn,
  .courseListWrp .courseBtnWrp {
    display: flex;
    justify-content: space-between;
    padding: 10px 5px;
  }

  .classComingNew .classComingBtn > button,
  .classComingNew .classComingBtn > a,
  .courseBtn .courseMaterial,
  .courseBtn .intoClass {
    min-width: 30%;
    flex-grow: 1;
  }

  .bookingSelect .confirmBox button.prevStep,
  .bookingSelect .confirmBox button:first-of-type {
    margin: 0 2%;
  }

  .bookingSelect .confirmBox button.prevStep {
    margin-left: 0;
  }

  .bookingSelect .confirmBox button.confirm {
    margin-right: 0;
  }

  .bookingSelect .confirmBox span.addCartTip {
    padding-right: 0;
  }

  .bookingSelect .confirmBox .boxTipWrp.active {
    top: -100px;
  }

  .classComingNew .classComingBtn > button.editClassComing,
  .courseCard .courseBtn .changeClass {
    margin: 0 5px;
    flex-grow: 1;
  }

  .announcementNoticeWrp {
    max-width: 320px;
  }

  .materialCategoryBlock .categorList .breadcrumb {
    display: block;
  }

  .materialCategoryBlock .categorList .breadcrumb a,
  .materialCategoryBlock .categorList .breadcrumb em,
  .materialCategoryBlock .categorList .breadcrumb span {
    display: inline-block;
    vertical-align: middle;
  }

  .materialCategoryBlock .categorList .breadcrumb button.back {
    width: 20px;
    vertical-align: middle;
  }

  .changeBrowser li a {
    margin: 0 6px;
  }

  .changeBrowser li img {
    width: 60px;
  }

  .materialPreviewPopup .module_preview {
    padding: 0;
  }

  .module_preview .preview_tab_block > .tab_title {
    border-radius: 0;
  }

  .module_preview .preview_title_block {
    margin-top: 0;
  }

  .module_preview .preview_title_block .levelTitle {
    margin-bottom: 0;
  }

  .preview_tab_block {
    margin-bottom: 0;
  }

  .confirmBox .selectLesson {
    width: 100%;
    margin-bottom: 10px;
  }

  .bookingSelectNew .confirmBox span {
    padding: 0;
    text-align: left;
  }

  .courseDays .selectTimeNew li {
    height: 60px;
  }

  .courseDays .selectTimeNew .active {
    flex-direction: column;
    padding: 6px 0;
  }

  .courseDays .selectTimeNew .active::after {
    margin-left: 0;
    margin-top: 3px;
  }

  .courseDaysWrp > ul {
    flex-direction: column;
  }

  .courseDaysWrp > ul li {
    width: 100%;
    max-width: initial;
    margin-bottom: 10px;
  }

  .lessonSelect .selectUnit li li .dateTime br {
    display: block;
  }

  .lessonSelect .selectUnit li li .dateTime span {
    display: none;
  }

  .lessonSelect .weekPlans h4,
  .lessonSelect .oneSelectTeacher h4 {
    flex-direction: column;
    align-items: flex-start;
  }

  .lessonSelect .weekPlans h4 p,
  .lessonSelect .oneSelectTeacher h4 p {
    margin-left: 0;
  }

  .myScheduleQna .myScheduleQ > div {
    margin-right: 0;
    width: 100%;
  }

  .myScheduleDetail .courseScoreChart li > div {
    margin: 0 auto;
  }

  .myScheduleDetail .courseScoreChart li {
    flex-basis: auto;
  }

  .myScheduleDetail .courseScoreChart li:first-child,
  .myScheduleDetail .courseScoreChart li:nth-child(2) {
    width: 48.85%;
  }

  .myScheduleDetail .courseScoreChart li:nth-child(3),
  .myScheduleDetail .courseScoreChart li:nth-child(4),
  .myScheduleDetail .courseScoreChart li:nth-child(5) {
    width: 31.83%;
  }

  .lessonSelectWrp > .editTool,
  .lessonSelect .weekPlans .editTool {
    position: static;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .lessonSelectWrp > .editTool a,
  .lessonSelect .weekPlans .editTool a {
    margin-left: 0 !important;
    width: 48.5%;
  }

  .lessonSelect .weekPlans h4 {
    align-items: center;
  }

  .lessonSelect .weekPlans h4 p {
    transform: none;
    text-align: center;
    line-height: 18px;
    margin-top: 8px;
  }

  .bookingResult .bookingResultList li > span {
    flex-wrap: wrap;
  }

  .lessonSelect,
  .bookClassBlock .weekCycleSelectWrp .BlockWrap,
  .bookingSelect,
  .clasSchedule,
  .classCalendar + .clasSchedule,
  .curriculumWrp.classCalendar,
  .myScheduleQna,
  .myScheduleDetail,
  .oxfAchievement,
  .myWordsMain {
    padding: 5%;
  }

  .scheduleDetailCtn .courseTip {
    margin: 30px -6% -5.5%;
    width: 112%;
  }

  .myScheduleDetail .scheduleDetailCtn .warpper {
    margin-bottom: 0;
  }

  .myScheduleDetail .scheduleDetailCtn .warpper + .warpper {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .myScheduleA .qnaList p {
    flex-direction: column;
    align-items: flex-start;
  }

  .myScheduleA .qnaList p b {
    margin-left: 0;
    flex-wrap: wrap;
  }

  .myScheduleA .qnaList p span {
    margin-bottom: 5px;
  }

  .floatCalendar .bookingCalendarWrp {
    right: 5%;
    top: calc(3vw + 2%);
  }

  .freeSession .bookingCalendarWrp {
    top: calc(7vw + 3%);
  }

  .bookingSelect .bookingResultState {
    flex-direction: column;
    align-items: flex-start;
  }

  .bookingSelect .bookingResultState .classCharge {
    margin-left: 0;
  }

  .datepicker.dropdown-menu td,
  .datepicker.dropdown-menu th {
    padding: 5px;
  }

  .selectMonth.dropdown-menu {
    width: 300px;
  }

  .selectMonth.dropdown-menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999999 !important;
  }

  .bookClassBlock .classInfoWrap {
    flex-direction: column;
    padding: 5%;
  }

  .materialIntroPopup .bookClassBlockWrp {
    padding: 0;
  }

  .materialIntroPopup .preview_title_block {
    padding: 0 5%;
  }

  .bookClassBlock .classInfoWrap .cover img {
    height: auto;
  }

  .materialBlock .title,
  .materialCategoryBlock .title {
    padding: 0 20px;
  }

  /* 教材彈窗頁加寬開始 */

  .materialPageWiden .teaching_material_slider {
    flex-direction: column;
  }

  .materialPageWiden .mainSwiper_wrap {
    width: 100%;
  }

  .materialPageWiden .thumb_swiper_wrap {
    flex-direction: row;
    width: 100%;
    order: 3;
    align-items: center;
  }

  .materialPageWiden .thumb_swiper.swiper-free-mode > .swiper-wrapper,
  .materialPageWiden .teaching_material_slider .thumb_swiper {
    height: auto;
    padding: 0;
  }

  .materialPageWiden
    .teaching_material_slider
    .thumb_swiper_wrap
    .swiper-button-prev,
  .materialPageWiden
    .teaching_material_slider
    .thumb_swiper_wrap
    .swiper-button-next {
    width: 30px;
    flex-shrink: 0;
  }

  .materialPageWiden .swiperPagi {
    padding: 0;
  }

  .materialPageWiden .teaching_material_slider .swiper-button-prev,
  .materialPageWiden .teaching_material_slider .swiper-button-next {
    width: 30px;
    height: 30px;
  }

  .materialPageWiden
    .teaching_material_slider
    .thumb_swiper_wrap
    .swiper-button-prev {
    background-image: url(../../images/newBooking/arr_left.svg);
  }

  .materialPageWiden
    .teaching_material_slider
    .thumb_swiper_wrap
    .swiper-button-next {
    background-image: url(../../images/newBooking/arr_right.svg);
  }

  .materialPageWiden .teaching_material_slider .swiper-button-prev::after,
  .materialPageWiden .teaching_material_slider .swiper-button-next::after {
    font-size: 12px;
  }

  .materialPageWiden
    .teaching_material_slider
    .swiper-button-prev.swiper-button-disabled,
  .materialPageWiden
    .teaching_material_slider
    .swiper-button-next.swiper-button-disabled {
    display: flex;
  }

  .materialPageWiden .vocabulary_block,
  .materialPageWiden .aiPodcast {
    padding: 5%;
  }

  .materialPageWiden .playBar {
    margin: 0;
  }

  /* 教材彈窗頁加寬結束 */

  .newMain .guidePurchases {
    flex-direction: column;
  }

  .newMain .guidePurchases > div {
    width: 100%;
  }

  .newMain .guidePurchases .btnWrp a,
  .newMain .goFreeBooking a {
    width: 100%;
    margin: 0;
  }

  .newMain .guidePurchases p {
    margin-bottom: 10px;
  }

  .newMain .goFreeBooking {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .newMain .goFreeBooking img {
    margin-bottom: 10px;
  }

  .newMain .guidePurchases .btnWrp a:nth-child(2) {
    margin-left: 10px;
  }

  .newMain .goFreeBooking p {
    width: calc(100% - 50px);
    margin-bottom: 0;
  }

  .newMain .goFreeBooking a {
    display: block;
    text-align: left;
  }

  .myLevelDetail {
    margin-top: -40px !important;
  }

  .learningRecord {
    padding: 20px 5%;
  }

  .learningRecordTitle,
  .learningRecordList > li {
    margin-bottom: 15px;
  }

  .learningRecord hr {
    margin: 20px -5.5%;
  }

  .oxfordTestTip,
  .leftCourseSessions,
  .myStudyPlan {
    background: #fff;
    min-height: 100%;
  }

  .oxfordTestTitle,
  .leftCourseSessionsTitle,
  .myStudyPlanTitle {
    background: #f2f2f2;
    padding: 25px 20px 10px;
    margin-bottom: 30px;
  }

  .myStudyPlanTitle {
    margin-bottom: 20px;
  }

  .oxfordTestTitle h4,
  .leftCourseSessions h4,
  .myStudyPlan h4 {
    font-size: 20px;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
  }

  .leftCourseSessions h4,
  .myStudyPlan h4 {
    margin-bottom: 0;
  }

  .leftCourseSessionsMain,
  .myStudyPlanMain {
    border: none;
    max-height: none;
    padding: 0 20px;
  }

  .myStudyPlanTitle p {
    margin-bottom: 0;
  }

  .myStudyPlanMain .myStudyPlanInfo .tableTd {
    display: block;
  }

  .myStudyPlanMain .myStudyPlanInfo .tableTd:first-child {
    padding-right: 0;
    margin-bottom: 5px;
  }

  .myStudyPlanMain .myStudyPlanInfo .tableTd:last-child {
    border-bottom: 1px solid #d1dbff;
    padding-bottom: 16px;
  }

  .myStudyPlanMain .myStudyPlanInfo .tableTr:last-child .tableTd:last-child {
    border: 0;
    padding: 0;
  }

  .myStudyPlanMain .myStudyPlanInfo .tableTr {
    border-bottom: 1px solid #d1dbff;
  }

  .oxfordTestTitle p {
    color: #555;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
  }

  .oxfordTestTip img {
    max-width: 90%;
    margin: 0 auto;
    display: block;
  }

  .oxfordTestTip .btnWrp {
    position: fixed;
    bottom: 0;
    text-align: center;
    border-top: 1px solid #ddd;
    width: 100%;
    padding: 10px 10px 30px;
  }

  .oxfordTestTip button {
    min-width: 130px;
  }

  .myStudyPlanMain .bookingFailedList {
    max-height: none;
  }

  .myStudyPlan .btnWrp {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 20px 15px;
    max-width: none;
    justify-content: center;
  }

  .myStudyPlanMain {
    padding-bottom: 120px;
  }

  .regularWeeklyClassSchedule > p {
    margin: 15px 0 20px;
  }

  .regularWeeklyClassList tbody {
    display: table;
  }

  .regularWeeklyClassTime tr {
    display: table-row;
  }

  .regularWeeklyClassTime th,
  .regularWeeklyClassTime td {
    display: table-cell;
    width: 35%;
    vertical-align: middle;
  }

  .regularWeeklyClassTime th:first-child,
  .regularWeeklyClassTime td:first-child {
    width: 90px;
  }

  .podcast .leftCourseSessionsMain .btnWrp {
    position: fixed;
    bottom: 0;
    padding: 15px 0;
    border-top: 1px solid #ddd;
    left: -20px;
    right: -20px;
  }

  .leftCourseSessionsWrp.orderCancel {
    max-width: 90%;
    padding: 30px 20px 20px;
  }

  .sharedClassPackage tr {
    flex-direction: column;
    margin-bottom: 15px;
  }

  .sharedClassPackage tr:last-child {
    margin-bottom: 0;
  }

  .sharedClassPackage tbody td::before {
    content: attr(data-title);
    background: #edf1ff;
    height: 44px;
    font-size: 14px;
    color: #0037cc;
    min-width: 65px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-right: 4px solid #fff;
    margin-right: 16px;
  }

  .sharedClassPackage tbody td {
    border: none;
    padding: 0 15px 0 0;
    width: 100%;
    position: relative;
  }

  .sharedClassPackage tbody td label {
    margin-left: auto;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .sharedClassPackage thead {
    display: none;
  }

  .sharedClassPackage tbody td span {
    margin-left: initial;
  }

  .sharedClassPackage tbody td > div {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0;
    min-height: 44px;
  }

  .sharedClassPackage tbody td:first-child:before {
    height: 60px;
  }

  .leftCourseSessionsWrp.aiSpeak {
    width: calc(100% - 40px);
  }

  .materialPageWiden .preview_title_block .bookBtn,
  .materialPageWiden .preview_title_block .goToClassBtn {
    right: 10px;
  }

  .newOxfordCourse .confirmBox button:nth-of-type(-n + 3),
  .newOxford .confirmBox button {
    margin: 0;
  }

  .newOxford .confirmBox span.addCartTip {
    margin: 0 0 10px;
    padding: 0;
    text-align: center;
  }

  .myStudyPlanPopup.newOxford {
    align-items: flex-start;
  }

  .newOxford .myStudyPlanWrp {
    padding: 0;
    max-width: none;
    background: transparent;
    max-height: none;
    top: 50px;
    height: 100%;
  }

  .myStudyPlan.newOxford {
    border-radius: 8px 8px 0 0;
    padding-bottom: 120px;
  }

  .newOxford .myStudyPlanMain {
    padding-bottom: 0;
  }

  .myStudyPlan.newOxford .studyPlanTips {
    padding: 10px 25px 0;
  }

  .myStudyPlan.newOxford .studyPlanTips li {
    align-items: flex-start;
  }

  .myStudyPlan.newOxford .studyPlanTips li::before {
    position: relative;
    top: 3px;
  }

  .newOxford .myStudyPlanTitle {
    border-radius: 8px 8px 0 0;
  }

  .newOxford .myStudyPlanMain .bookingFailedList {
    max-height: none;
  }

  .newOxford .myStudyPlanWrp .closePopup {
    right: 20px;
  }
}

@media only screen and (max-width: 650px) {
  .clasSchedule .courseListWrp li > .cWap p {
    font-size: 14px;
  }

  /* 0802 open */

  .learningRecord .recordItem {
    position: relative;
  }

  .learningRecord .recordItem img {
    width: 24px;
    height: 24px;
  }

  .learningRecord .recordItem progress {
    margin-top: 6px;
  }

  .learningRecord .recordItem > p {
    float: none;
    flex-direction: row;
    align-items: flex-start;
  }

  .learningRecord .recordItem > p i {
    display: block;
  }

  .learningRecord .recordItemsWrp {
    flex-direction: column;
  }

  .learningRecord .recordItem > div {
    margin: 0;
  }

  .learningRecord .recordItem {
    width: 100%;
    border: none;
    margin-bottom: 15px;
  }

  .learningRecord .recordItem:last-child {
    margin-bottom: 0;
  }

  /*  0802 hide

	.learningRecord .recordItem {
		position: relative;
	}

	.learningRecord .recordItem img {
		position: absolute;
		left: 0;
		top: 0;
		width: 24px;
		height: 24px;
	}

	.learningRecord .recordItem > div p {
		padding-left: 30px;
	}

	.learningRecord .recordItem progress {
		margin-top: 6px;
	}

	.learningRecord .recordItem > div {
		margin-bottom: 20px;
	}

	.learningRecord .recordItem > div span {
		position: absolute;
		right: 0;
		bottom: -3px;
	}

	.learningRecord .recordItem > div span.unlimit {
		bottom: auto;
    	top: 4px;
	}

	*/

  .chineseTransformWrp {
    padding: 20px;
  }

  .editSingleClassBooking .curriculumTable .date div.classTime {
    font-size: 10px;
    padding: 3px 8px 3px 10px;
    background-size: 11px auto;
  }

  .regularWeeklyClassUnit .lessonList li {
    flex-direction: column;
    align-items: flex-start;
  }

  .regularWeeklyClassUnit .lessonList li a {
    margin: 0;
    text-align: center;
  }

  .regularWeeklyClassSchedule li label {
    background-image: none;
  }
}

@media only screen and (max-width: 550px) {
  .bookingSelect .selectTimeOrTeacher ul {
    flex-direction: column;
  }

  .bookingSelect .selectTimeOrTeacher li {
    width: 100%;
    margin-bottom: 20px;
  }

  .bookingSelect li h4,
  .bookingSelect li a,
  .bookingSelect .gpClassNow h4 {
    font-size: 18px;
  }

  .bookingSelect li p {
    font-size: 16px;
  }

  .bookingSelect .gpClassNow p {
    font-size: 14px;
    width: 100%;
    margin-bottom: 15px;
  }

  .newMain .gpClassNow button {
    position: static;
    transform: none;
    font-size: 16px;
    text-align: center;
    width: 100%;
  }

  .sujectSelect {
    margin: 0 0 20px;
    border-radius: 0;
    z-index: 100;
  }

  .allSujectSelect {
    border-radius: 0;
    top: 45px;
    left: 0;
    z-index: 999;
    right: 0;
    border-bottom: 1px solid #ddd;
    position: absolute;
  }

  .bookingSelect .selectTimeOrTeacher li a {
    max-width: 100%;
    width: 100%;
  }

  .allSujectSelect > ul {
    flex-direction: column;
  }

  .allSujectSelect ul ul {
    height: auto;
  }

  .allSujectSelect > ul > li {
    width: 100%;
  }

  .allSujectSelect > ul > li:not(:last-child) {
    margin-bottom: 15px;
  }

  .newMain {
    position: relative;
  }

  .bookingSelect .topnav,
  .myScheduleQna .topnav,
  .myScheduleDetail .topnav,
  .clasSchedule .topnav,
  .learningRecord .topnav {
    display: none;
  }

  .bookingSelect .bookedClassList .topnav {
    display: block;
  }

  .bookedClassList > h4 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
  }

  .bookingCalendarWrp {
    padding: 3%;
  }

  .bookingCalendar .choosePeriod {
    padding: 4%;
  }

  .bookingCalendar ul.chooseDate,
  .bookingCalendar ul.week {
    width: 100%;
  }

  .bookingCalendar ul.chooseDate li,
  .bookingCalendar ul.week li {
    margin: 8px 1%;
    width: 12%;
  }

  .bookingSelect .confirmBox .boxTip {
    left: 20px;
  }

  .bookedClassList .courseCard > li {
    padding: 10px 15px 5px;
  }

  .bookedClassList .courseCard {
    width: calc(100% - 20px);
    margin-left: 20px;
  }

  .bookingSelect .mobileSubmenu p {
    font-size: 20px;
  }

  .bookingResult .bookingResultList h5 label {
    font-size: 16px;
  }

  .bookingResult .bookingResultList ul {
    max-height: 400px;
  }

  .bookingResultBtn a {
    width: 100%;
    font-size: 18px;
    margin-bottom: 15px;
  }

  .bookingResultBtn a.nextStep {
    margin-right: 0;
  }

  .teacherSearchList li {
    width: 100%;
  }

  .bookingSelectTeacher .typeTeacherName {
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
  }

  .bookingSelectTeacher .courseFilter {
    width: 100%;
    padding-left: 0;
    overflow: hidden;
  }

  .bookingSelectTeacher .teacherSearchFilter {
    /*position: fixed;
		top: 100px;
		background: #fff;
		width: 100%;
		left: 0;
		padding: 10px;
		z-index: 3;
		border-bottom: 1px solid #c4c2c1;*/
    flex-direction: column;
  }

  .for_pad .bookingSelectTeacher .teacherSearchFilter,
  .isApp .bookingSelectTeacher .teacherSearchFilter {
    top: 0;
  }

  .consultantSelectPopup .bookingSelectTeacher .teacherSearchFilter {
    position: static;
    border: none;
    padding: 0;
  }

  .pg_drawer .bookingSelectTeacher .teacherSearchFilter {
    position: static;
    border: none;
    padding: 10px 0;
  }

  .bookingSelectTeacher .courseFilter > span {
    display: none;
  }

  .bookingSelectTeacher .courseFilter > ul > li {
    margin-left: 0;
  }

  .bookingSelectTeacher .orientationSort .courseFilter {
    width: auto;
  }

  .bookingSelectTeacher .courseFilter ul {
    width: 100%;
    justify-content: space-between;
    display: flex;
  }

  .bookingSelectTeacher .courseFilter ul.mobile {
    justify-content: flex-start;
  }

  .bookingSelectTeacher .courseFilter > ul > li {
    flex: 1;
    margin: 0 1%;
  }

  .bookingSelectTeacher .courseFilter > ul > li:first-child {
    margin-left: 0;
  }

  .bookingSelectTeacher .courseFilter > ul > li:last-child {
    margin-right: 0;
  }

  .bookingSelectTeacher .orientationSort .courseFilter ul li {
    width: 100%;
  }

  .bookingSelectTeacher .courseFilter button {
    width: 100%;
    font-size: 16px;
    height: 100%;
  }

  .bookingSelect .courseFilter button i {
    top: 50%;
    transform: translateY(-50%);
  }

  .bookedClassList .courseListWrp .courseImg {
    width: 115px;
    float: left;
    margin-bottom: 10px;
  }

  .bookedClassList .courseCard > li .bookCourseBtn {
    position: static;
    width: 100%;
    font-size: 16px;
    margin-bottom: 10px;
    padding: 8px 20px;
  }

  .bookedClassList .courseListWrp .tagsPart li {
    margin-top: 0;
    font-size: 14px;
  }

  .bookedClassList .courseListWrp .courseTitle .levelRange {
    margin-bottom: 5px;
  }

  .bookedClassList .courseListWrp .courseTitle h3 {
    -webkit-line-clamp: 3;
    width: calc(100% - 130px);
    height: 60px;
    margin-bottom: 0;
    line-height: 20px;
  }

  .bookedClassList .courseListWrp .courseTeacherInfo {
    clear: both;
  }

  .bookedClassList .courseListWrp .tagsPart {
    margin-bottom: 15px;
  }

  .goClassNowPopup > div {
    max-width: 100%;
    width: 100%;
    position: fixed;
    top: 80px;
    bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 0 5%;
  }

  .goClassNowPopup .btnWrp,
  .BlockWrap .buttonWrap,
  .bookClassBlock .weekCycleSelectWrp .buttonWrap,
  .courseFilterSelect_m .btnWrp,
  .scheduleDetailCtn .btnWrp,
  .bookClassBlock .classInfoWrap + .buttonWrap {
    background: #fff;
    transform: translate3d(0, 0, 0);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 30px;
    z-index: 2;
    border-top: 1px solid #e2e2e2;
    z-index: 2;
  }

  .goClassNowPopup .btnWrp,
  .courseFilterSelect_m .btnWrp,
  .scheduleDetailCtn .btnWrp {
    background: transparent;
    border-radius: 0;
    padding: 10px 20px 30px;
    border-top: 1px solid #e2e2e2;
  }

  .courseFilterSelect_m .btnWrp,
  .scheduleDetailCtn .btnWrp {
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px 3% 30px;
    gap: 10px;
  }

  .courseFilterSelect_m .btnWrp button {
    flex: 1 1 0;
  }

  /* .goClassNowPopup .btnWrp button, */
  /* .BlockWrap .buttonWrap a {
		background: transparent;
		color: #DAC7A7;
		border: 1px solid #DAC7A7;
		box-shadow: none;
	} */

  .goClassNowPopup .title,
  .classNowWrp p strong,
  .pg_drawer .bookClassBlock > h4 {
    font-size: 20px;
  }

  .goClassNowPopup .subtitle {
    font-size: 16px;
  }

  .goClassNowPopup .classNowWrp p b {
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
  }

  .goClassNowPopup .classNowWrp p span {
    font-size: 18px;
  }

  .noClassNowTip h5 {
    font-size: 20px;
  }

  .noClassNowTip p {
    font-size: 16px;
  }

  .BlockWrap .buttonWrap a:not(.order) {
    color: #777;
    border: 1px solid #c5d0ed;
  }

  .courseTypePopup .classTypeBlockWrp,
  .materialListPopup .materialBlockkWrp,
  .materialSelectTypePopup .materialCategoryBlockWrp,
  .consultantSelectPopup .materialBlockkWrp {
    padding: 0;
  }

  .courseTypePopup .classTypeBlock,
  .classTypeBlock .BlockWrap {
    min-height: 100%;
  }

  .classTypeBlock .typeTitle,
  .materialBlock .title,
  .materialCategoryBlock .title,
  .module_teacher_wrapper .t_block_title,
  .materialListPopup .materialBlock > div p.changeMaterial {
    padding: 0 20px;
  }

  .materialBlock .editTips {
    right: 15px;
  }

  .materialSelectTypePopup .materialCategoryBlock .BlockWrap {
    margin-bottom: 0;
    border-radius: 20px 20px 0 0;
    min-height: 100%;
  }

  .materialSelectTypePopup .materialCategoryBlock > div {
    height: 100%;
  }

  .levelReserveBlock .buttonWarp {
    flex-direction: column-reverse;
    min-width: 100%;
  }

  .levelReserveBlock .info {
    max-width: 100%;
  }

  .levelReserveBlock .buttonWarp button {
    font-size: 18px;
    max-width: 100%;
    width: 100%;
  }

  .levelReserveBlock .buttonWarp button.att {
    margin-bottom: 15px;
  }

  .bookingResultBtn a.nextStep:hover {
    color: #fff;
  }

  .BlockWrap .buttonWrap a:not(.order) {
    box-shadow: none;
  }

  .bookClassBlock .classInfoWrap {
    margin-bottom: 180px;
  }

  .teacher_introduce_wrap,
  .classTypeBlock .typeTitle,
  .materialListPopup .materialBlock .title,
  .materialSelectTypePopup .materialCategoryBlock .title,
  .changeCourseTimePopup .changeTimeBlock .title,
  .changeTimeBlock .changeTimeTitle,
  .materialBlock .title {
    margin-top: 20px;
  }

  .changeTimeBlock .changeTimeTitle {
    padding: 0 20px;
  }

  .bookClassBlock div .preview_title_block,
  .module_preview .preview_title_block {
    padding: 20px;
    margin-top: 0;
  }

  .bookClassBlock div .preview_title_block {
    padding-bottom: 0;
  }

  .bookClassBlockWrp .warpper + .warpper {
    margin-bottom: 10px;
  }

  .materialIntroPopup .bookClassBlock {
    margin-top: 0;
    padding-top: 20px;
  }

  .bookingSelect .confirmBox button {
    min-width: auto;
  }

  .module_teacher_wrapper .teacher_introduce_wrap,
  .consultantSelectPopup .materialBlock {
    margin-top: 0;
  }

  .teacherInfoPopup .module_teacher_wrapper,
  .materialIntroPopup .bookClassBlockWrp,
  .materialPreviewPopup .module_preview,
  .consultantSelectPopup .materialBlock {
    padding: 0;
  }

  .module_teacher_wrapper .module_teacher_inner::-webkit-scrollbar,
  .courseTypePopup .classTypeBlock::-webkit-scrollbar,
  .materialIntroPopup .bookClassBlock::-webkit-scrollbar,
  .materialPreviewPopup .module_preview_inner::-webkit-scrollbar,
  .materialListPopup .materialBlock::-webkit-scrollbar,
  .materialSelectTypePopup .materialCategoryBlock::-webkit-scrollbar,
  .changeCourseTimePopup .changeTimeBlock::-webkit-scrollbar,
  .consultantSelectPopup .materialBlock::-webkit-scrollbar {
    width: 0;
  }

  .bookingSelect h4.pageTitle .back,
  .bookingSelect h4.pageTitle .close,
  .myScheduleQna .title .back,
  .myScheduleQna .title .close,
  .myScheduleDetail .title .back,
  .myScheduleDetail .title .close,
  .clasSchedule .title .back,
  .learningRecordTitle .back {
    display: block;
  }

  .consultantSelectPopup .materialBlock > div {
    min-height: 100vh;
  }

  .bookClassBlock .timeBlock {
    margin-bottom: 6px;
  }

  .bookClassBlock .level {
    margin-bottom: 6px;
  }

  .bookClassBlock h2 {
    margin-bottom: 0;
  }

  .bookClassBlock .duringTime {
    padding-left: 20px;
    background-position: 0 50%;
  }

  .materialBlock .operate .filter a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  /* .materialIntroPopup .BlockWrap .buttonWrap a.booked {
		border-color: #fff;
    	color: #fff;
	}

	.materialIntroPopup .BlockWrap .buttonWrap a.booked::before {
		background-image: url(../../images/newBooking/checked_white.svg);
	} */

  .changeTimeBlock .changeTimeTitle span {
    display: block;
    margin-left: 0;
  }

  .module_teacher_wrapper
    .teacher_introduce_wrap
    .t_intro_summary
    .__summary
    .t_more_link {
    margin-top: 10px;
    display: block;
  }

  .searchTeacherResult.noFilter {
    margin-top: 70px;
  }

  .teacherSearchFilter .courseFilter li.mask .mobileSubmenu,
  .wordsBank .tab_filter.active .mobileSubmenu {
    background: #f0f0f3;
    border-radius: 8px 8px 0 0;
    padding: 25px 15px 10px;
  }

  .teacherSearchFilter .courseFilter li.mask .mobileSubmenu p,
  .wordsBank .tab_filter.active .mobileSubmenu p {
    text-align: left;
  }

  .teacherSearchFilter .courseFilter li button.open + ul.mobile {
    top: 80px;
  }

  .pg_consultant_page
    .teacherSearchFilter
    .courseFilter
    li
    button.open
    + ul.mobile,
  .pg_consultant_page .courseFilter .mobileSubmenu {
    top: 0;
  }

  .pg_consultant_page
    .bookingSelectTeacher
    .courseFilter
    > ul
    > li.mask:before {
    top: -60px;
  }

  .consultantSelectPopup .closePopup {
    z-index: 0;
  }

  .teacherSearchFilter .courseFilter li.mask .mobileSubmenu span,
  .wordsBank .mobileSubmenu span {
    top: -45px;
    background: url(../../images/newBooking/cancel_icon.svg) no-repeat center /
      30px auto;
    box-shadow: none;
  }

  .goClassNowPopup .closePopup,
	.floatCalendar .mobileSubmenu span,
	.wordsBank .mobileSubmenu span,
	.teacherSearchFilter .mobileSubmenu span/*,
	.courseCard .mobileSubmenu span,
	.classComingBtn .mobileSubmenu span*/ {
    right: 10px;
  }

  .goClassNowPopup .title,
  .pg_drawer .bookClassBlock > h4,
  .bookClassBlock .weekCycleSelectWrp .title h3 {
    text-align: left;
    position: absolute;
    background: #f0f0f3;
    left: 0;
    top: 0;
    padding: 25px 15px 10px;
    border-radius: 8px 8px 0 0;
    right: 0;
    z-index: 2;
  }

  .pg_drawer .bookClassBlock > h4,
  .bookClassBlock .weekCycleSelectWrp .title h3 {
    position: static;
  }

  .bookClassBlock .weekCycleSelectWrp .title {
    margin-bottom: 0;
  }

  .newMain .classComing.classComingNew .courseImg,
  .newMain .classComing.classFinishedNew .courseImg {
    width: 115px;
  }

  .newMain .classComing.classComingNew .courseTitle,
  .newMain .classComing.classFinishedNew .courseTitle {
    padding-left: 0;
  }

  .classComingNew .classComingBtn .editClassChange.open,
  .courseCard .courseBtn .editClassChange.open {
    left: 0;
  }

  .learningModeNav .swp.mask:before,
  .courseListWrp li.mask:before,
  .bookingSelectTeacher .courseFilter > ul > li.mask:before,
  .classComingNew .classComingBtn.mask:before,
  .courseListWrp .courseBtn.mask:before,
  .floatCalendar.mask:before,
  .wordsBank .tab_filter.active:before,
  .vdoFilter.open::before,
  .vdoLevel.open::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999999;
  }

  .sujectSelectMenu > .ttl,
  .learningModeMenu > .ttl {
    display: none;
  }

  .sujectSelect:after {
    top: 45px;
  }

  .learningModeMenu .swiper-button-next,
  .learningModeMenu .swiper-button-prev {
    top: 18px;
  }

  .learningModeNav .swiper-button-next,
  .learningModeNav .swiper-button-prev {
    top: 15px;
  }

  .sujectSelect .toggleSujectMenu {
    border-radius: 0;
    top: 0;
    right: 0;
    height: 45px;
    width: 50px;
    background-size: 20px;
    background-position: center;
    font-size: 0;
    text-indent: -100%;
    overflow: hidden;
    box-shadow: -5px 0 7px rgba(0, 0, 0, 0.1);
  }

  .sujectSelect .learningModeMenu .swiper-slide {
    margin-top: 7px;
  }

  .sujectSelect {
    overflow: hidden;
  }

  .bookingSelect .confirmBox {
    border-radius: 0;
    justify-content: space-around;
  }

  .bookingSelect .confirmBox button {
    flex: 1;
  }

  .bookingSelect .confirmBox span {
    text-align: left;
  }

  .bookingSelect .confirmBox button.pg_bookingv2_cartbox_confirmcart {
    margin: 0;
  }

  .changeCourseTimePopup .changeTimeBlockWrp .BlockWrap {
    width: 100%;
  }

  .consultantSelectPopup .bookingSelect h4.pageTitle {
    flex-direction: column;
    align-items: flex-start;
  }

  .consultantSelectPopup .changeConsultant {
    margin-left: 0;
    margin-top: 5px;
  }

  .courseCard > li .editClassChange.mobile a {
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ededed;
    font-size: 16px;
    margin-bottom: 15px;
  }

  .newMain .classComingNew .courseTitle h5,
  .newMain .classFinishedNew .courseTitle h5 {
    display: inline-flex;
    flex-direction: column;
    padding-left: 15px;
    margin-bottom: 15px;
    width: calc(100% - 120px);
    align-items: flex-start;
    height: 86px;
    justify-content: center;
    white-space: normal;
  }

  .newMain .classComingNew .courseTitle h5 b,
  .newMain .classFinishedNew .courseTitle h5 b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .newMain .classComingNew .courseTitle h5 label,
  .newMain .classFinishedNew .courseTitle h5 label {
    margin: 0 0 10px;
    font-size: 16px;
    padding: 2px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
  }

  .bookingCalendar.floatCalendar .titleMonth {
    width: 320px;
  }

  .changeBrowser {
    padding: 50px 20px;
    margin: 20px auto;
  }

  .changeBrowser ul {
    flex-direction: column;
  }

  .changeBrowser li {
    margin-bottom: 10px;
  }

  .changeBrowser li a {
    flex-direction: row;
    justify-content: center;
    padding: 10px;
  }

  .changeBrowser li img {
    width: 50px;
    margin-bottom: 0;
  }

  .changeBrowser li span {
    text-align: left;
    margin-left: 15px;
    font-size: 16px;
  }

  .bookingSelectNew .selectDateCycle span {
    display: block;
    width: 100%;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .bookingSelectNew .selectDateCycle {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .bookingSelectNew .selectDateCycle button {
    margin: 0;
    padding: 8px 30px 8px 10px;
  }

  .bookingSelectNew h4.title {
    font-size: 18px;
  }

  .bookingSelectNew {
    padding: 5%;
  }

  .isApp .bookingSelectNew {
    padding-bottom: 150px;
  }

  .bookingSelectNew .cyclePlan ul {
    flex-wrap: wrap;
  }

  .bookingSelectNew .cyclePlan li:first-child {
    width: 100%;
    margin-bottom: 5px;
    padding: 0 1px;
  }

  .bookingSelectNew .selectTimeNew li:first-child:after {
    content: "";
    height: 1px;
    width: calc(100% - 45px);
    background: #0037cc;
    margin-left: auto;
  }

  .bookingSelectNew .cyclePlan li:not(:first-child) {
    width: calc(100% / 7 - 2%);
  }

  .bookingSelectNew .selectTimeNew li:not(:first-child) {
    height: 0;
    padding-bottom: 12%;
  }

  .bookingSelectNew .cyclePlan li:first-child p {
    font-size: 14px;
    color: #0037cc;
  }

  .bookingSelectNew .cyclePlan {
    padding: 4%;
  }

  .bookingSelectNew .choosePeriod {
    padding: 10px;
  }

  .bookingSelectNew .confirmBox button {
    min-width: auto;
    flex: 1;
    margin: 0;
  }

  .bookingSelectNew .noPlan {
    flex-wrap: wrap;
  }

  .bookingSelectNew .noPlan img {
    width: 50px;
  }

  .bookingSelectNew .noPlan button {
    width: 100%;
    margin-top: 20px;
  }

  .bookingSelectNew .noPlan p {
    padding: 0 0 0 10px;
    width: calc(100% - 60px);
  }

  .selectTimeNew_m,
  .courseFilterSelect_m,
  .courseChange_m {
    padding: 20px;
    background: #fff;
    min-height: 100%;
  }

  .selectTimeNew_m button,
  .courseFilterSelect_m li,
  .courseChange_m a,
  .courseChange_m li,
  .courseFilterSelect_m ul.multiSelect label,
  .courseChange_m.oxfSelect label {
    color: #555;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid #ddd;
    padding: 15px 10px;
    font-weight: 400;
    font-size: 16px;
    display: block;
    width: 100%;
    margin-bottom: 5px;
    text-align: left;
  }

  .courseChange_m.oxfSelect label.disabled {
    color: #ccc;
  }

  .courseChange_m.oxfSelect input,
  .courseChange_m.oxfSelect span {
    display: none;
  }

  .courseFilterSelect_m ul.multiSelect label {
    border: none;
  }

  .courseFilterSelect_m ul.multiSelect label::after {
    right: 10px;
  }

  .courseFilterSelect_m ul.multiSelect [type="checkbox"]:checked + label {
    border-color: transparent;
  }

  .courseFilterSelect_m ul.multiSelect li {
    padding: 0;
  }

  .selectTimeNew_m button.selected,
  .courseFilterSelect_m li.active,
  .courseChange_m a.active,
  .courseChange_m li.active,
  .courseChange_m.oxfSelect [type="radio"]:checked + label {
    color: #003bff;
    background: url(../../images/newBooking/checked_icon.svg) #edf1ff no-repeat
      right 10px center / 20px auto;
    border: none;
  }

  .categorySelectWrp ul {
    flex-direction: column;
  }

  .categorySelectWrp li {
    max-width: 100%;
    margin-bottom: 15px;
  }

  .lessonSelectWrp .confirmBox {
    border-radius: 0;
    margin: 0;
    justify-content: space-between;
  }

  .confirmBox button:nth-of-type(-n + 3) {
    width: 48.5%;
    margin: 0;
    flex: 1;
  }

  .lessonSelect .courseDaysWrp {
    padding: 3%;
  }

  .lessonSelectWrp .confirmBox {
    padding: 15px 5%;
  }

  .bookingSelectNew .confirmBox {
    padding: 15px 5% 30px;
  }

  .bookClassBlock .weekCycleSelectWrp ul {
    margin-bottom: 100px;
  }

  .lessonSelect .weekPlans > ul > li {
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  .lessonSelect .weekPlans li ul {
    width: 100%;
    margin-top: 2px;
  }

  .lessonSelect .selectUnit li li button {
    position: static;
    width: 100%;
    margin-top: 15px;
  }

  .module_preview.courseIntro .preview_tab_block > .tab_content_block {
    padding: 30px 5% 0 5%;
  }

  .categorySelectWrp,
  .courseDaysWrp {
    padding: 20px 3%;
  }

  .lessonSelect .selectUnit li li {
    padding: 15px 3%;
    flex-wrap: wrap;
  }

  .lessonSelect .editMode ~ .selectUnit li li {
    flex-wrap: nowrap;
  }

  .lessonSelect .weekPlans,
  .lessonSelect .oneSelectTeacher {
    padding: 18px 3%;
  }

  .clasSchedule .courseListWrp li {
    margin-top: 0;
  }

  .clasSchedule .courseListWrp li > .cWap p.courseType {
    margin-bottom: 10px;
  }

  .clasSchedule .courseListWrp li > .cWap p.courseTitle {
    padding-left: 115px;
    margin-bottom: 15px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    min-height: 80px;
    line-height: 19px;
  }

  .clasSchedule .courseListWrp li > label {
    position: absolute;
    top: 75px;
    left: 20px;
  }

  .clasSchedule .courseListWrp li > label img {
    width: 100px;
    height: 75px;
  }

  .clasSchedule .courseListWrp li > .cWap {
    max-width: 100%;
  }

  .clasSchedule .courseListWrp li button {
    top: 165px;
  }

  .videoCourseList .clasSchedule .courseListWrp li > .cWap p.courseType {
    padding-left: 115px;
  }

  .videoCourseList .clasSchedule .courseListWrp li > label {
    top: 20px;
  }

  .videoCourseList .clasSchedule .courseListWrp li > .cWap p.courseTitle {
    margin-bottom: 20px;
    -webkit-line-clamp: 2;
    height: 40px;
    line-height: 20px;
    font-size: 16px;
  }

  .videoCourseList li .popular .views strong,
  .videoCourseList li .popular .scores strong {
    display: none;
  }

  .clasSchedule .courseListWrp .courseTip {
    order: 1;
  }

  .clasSchedule .switchCurriculum button,
  .classCalendar .switchCurriculum button {
    font-size: 0;
    text-indent: -9999px;
  }

  .clasSchedule .switchCurriculum button:first-child::before,
  .clasSchedule .switchCurriculum button:last-child::before,
  .classCalendar .switchCurriculum button:first-child::before,
  .classCalendar .switchCurriculum button:last-child::before {
    margin-right: 0;
    width: 24px;
    height: 24px;
    background-size: 24px auto;
  }

  .clasSchedule .switchCurriculum,
  .classCalendar .switchCurriculum {
    border: none;
    right: auto;
  }

  .classCalendar .switchCurriculum {
    left: 5%;
  }

  .clasSchedule .switchCurriculum button.active,
  .classCalendar .switchCurriculum button.active {
    background: transparent;
  }

  .clasSchedule .switchCurriculum button:first-child,
  .classCalendar .switchCurriculum button:first-child {
    padding-left: 0;
  }

  .clasSchedule .switchCurriculum button:last-child,
  .classCalendar .switchCurriculum button:last-child {
    padding-right: 0;
  }

  .clasSchedule .courseFilter button,
  .clasSchedule .courseFilter .classDate {
    font-size: 16px;
    min-height: 30px;
  }

  .clasSchedule .courseFilter button i,
  .clasSchedule .courseFilter .classDate i {
    height: 100%;
  }

  .clasSchedule .switchPeriod button {
    flex: 1;
    padding: 7px;
  }

  .curriculumNav .backBtn {
    font-size: 18px;
  }

  .curriculumNav .snyCalendar {
    font-size: 0;
    text-indent: -9999px;
  }

  .curriculumNav .snyCalendar::after {
    width: 24px;
    height: 24px;
    background-size: 24px auto;
  }

  .lessonSelectWrp > .editTool .changePlans {
    right: 3%;
  }

  .lessonSelect .oneSelectTeacher .editTool .changePlans {
    margin: 0;
    width: 100%;
  }

  .materialIntroPopup .bookClassBlock {
    padding: 0;
  }

  .clasSchedule .bookNow {
    width: 100%;
  }

  .myScheduleDetail .title strong,
  .clasSchedule .title strong {
    margin-right: 0;
  }

  .myScheduleQna .title > ul {
    border-top: 1px solid #ddd;
    padding-top: 15px;
  }

  .myScheduleDetail .title,
  .clasSchedule .title,
  .learningRecordTitle.mobileTitle {
    justify-content: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
  }

  .learningRecordTitle.mobileTitle {
    margin-bottom: 50px;
  }

  .learningRecordTitle .downloadRecord {
    position: absolute;
    right: 0;
    bottom: -40px;
  }

  .learningRecordDetail .learningDetailCount {
    flex-direction: column;
  }

  .learningRecordDetail .learningDetailCount div {
    width: auto;
  }

  .learningRecordDetail .learningDetailHead {
    align-items: stretch;
  }

  .learningRecordDetail .learningDetailHead span {
    display: flex;
    align-items: center;
  }

  .learningCountingList .dateTime b {
    width: 100%;
    margin-left: 0;
  }

  .myScheduleQna .title span {
    display: block;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
  }

  .myScheduleQna .myQBtnWrp {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .myScheduleQna .myQBtnWrp div {
    width: 100%;
    margin-bottom: 15px;
  }

  .myScheduleQna .myQBtnWrp button {
    margin-left: 0;
    width: 48.5%;
  }

  .myScheduleA .qnaList h4,
  .myScheduleA .qnaContent > p,
  .myScheduleA .qnaContent .satisfaction label {
    font-size: 14px;
  }

  .myScheduleA .qnaList p span,
  .myScheduleA .qnaList p b,
  .myScheduleA .qnaContent .studentMsg,
  .myScheduleA .qnaContent .teacherMsg {
    font-size: 12px;
  }

  .myScheduleA .qnaContent .studentMsg,
  .myScheduleA .qnaContent .teacherMsg {
    padding: 3% 5%;
    line-height: 18px;
  }

  .myScheduleA .qnaContent .satisfaction {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .myScheduleA .qnaContent .satisfaction label {
    margin: 0 0 15px;
  }

  .myScheduleA .qnaContent .satisfaction button,
  .myScheduleQna .raiseQuestion button {
    width: 100%;
    margin: 0;
  }

  .myScheduleDetail .title,
  .clasSchedule .title {
    display: flex;
  }

  .clasSchedule .title ~ .courseListHead {
    display: none;
  }

  .myScheduleDetail .scheduleDetailCtn .dateTime {
    font-size: 14px;
  }

  .myScheduleDetail .scheduleDetailCtn .courseTeacher ul {
    display: block;
    margin: 10px 0 0;
  }

  .myScheduleDetail .scheduleDetailCtn .courseTeacher li {
    margin-bottom: 5px;
  }

  .scheduleDetailCtn .btnWrp.btnStyleC button {
    width: 48.5%;
    max-width: 48.5%;
  }

  .scheduleDetailCtn
    .btnWrp.btnStyleC
    button:not(:first-of-type, :nth-of-type(2)),
  .scheduleDetailCtn .btnWrp.btnStyleA button {
    width: 100%;
    max-width: 100%;
  }

  .scheduleDetailCtn .courseTip {
    margin: 30px -5% -6%;
    width: 110%;
  }

  .scheduleDetailCtn .classAfterTool li {
    padding: 15px 0;
  }

  .clasSchedule .courseListWrp li.addNotice .attendedClass {
    position: absolute;
    left: 20px;
    top: 210px;
  }

  .clasSchedule .courseListWrp li.addNotice .attendedClass ~ .courseTip {
    position: relative;
    top: 26px;
  }

  .clasSchedule .courseListWrp li.addNotice {
    padding-bottom: 40px;
  }

  .lessonSelect div.title,
  .lessonSelect .title.editMode,
  .lessonSelect .title.editMode + p {
    text-align: center;
    justify-content: center;
  }

  .lessonSelect .oneSelectTeacher .editTool {
    position: static;
    margin-top: 10px;
  }

  .lessonSelect .selectUnit li li .dateTime {
    font-size: 14px;
  }

  .lessonSelect .selectUnit li li .materialPre,
  .clasSchedule .courseListWrp li .materialPre {
    right: 2%;
    top: 13px;
  }

  .lessonSelect .selectUnit li li .courseType {
    padding-right: 100px;
    white-space: normal;
  }

  .lessonSelect .selectUnit li li .dateTime + .courseType {
    padding-right: 0;
  }

  .categorySelectWrp .editTool {
    right: 3%;
  }

  .module_preview .preview_title_block .levelTitle {
    text-align: center;
  }

  .weekCyclePlan {
    padding-top: 130px !important;
  }

  .weekCycleResult {
    margin-top: -110px;
  }

  .weekCyclePlan .bookingSelect h4.pageTitle {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }

  .chooseConsultantTip > h5 {
    font-size: 14px;
  }

  .bookClassBlock .weekCycleSelectWrp .BlockWrap .buttonWrap {
    position: fixed;
    bottom: 0;
    padding: 20px 20px 30px;
    margin: 30px 0 0;
  }

  /* .datepicker-dropdown + .datepicker-dropdown {
		left: auto !important;
		right: 5% !important;
	} */

  .newOperateAnons {
    flex-direction: column;
    align-items: flex-start;
  }

  .newOperateAnons div {
    padding: 0 0 10px 0;
  }

  .materialBlock .title h3 span.changeMaterial {
    display: block;
    margin: 3px 0;
  }

  .bookClassBlock .duringTime {
    margin-bottom: 0;
  }

  .bookingRulesPopup > div {
    padding: 5%;
  }

  .studyPlanTtl {
    flex-wrap: wrap;
  }

  .goClassNowPopup .title {
    position: static;
    margin: 0 -6% 15px;
  }

  .newVideoClass .newVideoClassTitle {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
  }

  .newVideoClass .newVideoClassTitle h3 {
    font-size: 18px;
    margin-bottom: 5px;
  }

  .newVideoClass .newVideoClassTitle li {
    font-size: 16px;
    line-height: 20px;
    padding-right: 8px;
  }

  .bookingResultBtn > p {
    display: block;
  }

  .bookingResultBtn > p span {
    position: static;
    vertical-align: middle;
  }

  .isApp .sujectSelect {
    z-index: 1;
  }

  .normalBookingCartList li > p.dateTime,
  .classNowResult > p.dateTime {
    font-size: 14px;
  }

  .normalBookingCartList li > p.dateTime button {
    text-indent: -9999px;
    font-size: 0;
    color: transparent;
    position: absolute;
    top: 0;
    right: 0;
  }

  .normalBookingCartList li > p.dateTime button::before {
    margin-right: 0;
  }

  .normalBookingCartList li .courseTeacher,
  .normalBookingCartList li .courseTitle,
  .normalBookingCartList li .result,
  .classNowResult .courseTeacher,
  .classNowResult .courseTitle,
  .classNowResult .result {
    font-size: 14px;
  }

  .normalBookingCartList li .result {
    display: block;
  }

  .normalBookingCartList li .result.fail::before,
  .classNowResult .result.fail::before {
    display: inline-block;
    vertical-align: middle;
  }

  .normalBookingCartList li .result button,
  .classNowResult .result button {
    width: 100%;
    margin-top: 10px;
  }

  .bookingResult .bookingResultList li p.dateTime {
    flex-wrap: wrap;
    font-size: 14px;
  }

  .bookingResult .bookingResultList {
    padding-left: 5%;
  }

  .bookingResult .bookingResultList .bookedStateSuccess b {
    font-size: 12px;
  }

  .bookingResult .bookingResultList .bookedStateSuccess,
  .bookingResult .bookingResultList .bookedStateFail,
  .bookingResult .bookingResultList span.bookedStateFail a {
    font-size: 14px;
  }

  .myScheduleDetail .scheduleDetailCtn .warpper {
    flex-direction: column;
    align-items: flex-start;
  }

  .scheduleDetailCtn .btnWrp {
    margin-bottom: 0;
  }

  .scheduleDetailCtn .btnWrp.btnStyleA button.goClassTip:hover div,
  .scheduleDetailCtn .btnWrp.btnStyleB button.goClassTip:hover div,
  .scheduleDetailCtn .btnWrp.btnStyleA button.goVideoTip:hover div,
  .scheduleDetailCtn .btnWrp.btnStyleB button.goVideoTip:hover div {
    bottom: 80px;
    left: 5%;
    right: 5%;
  }

  .scheduleDetailCtn .btnWrp.btnStyleD button {
    width: 48.5%;
    max-width: 48.5%;
    margin-bottom: 10px;
  }

  .scheduleDetailCtn .btnWrp.btnStylec button.goClassTip:hover div,
  .scheduleDetailCtn .btnWrp.btnStylec button.goVideoTip:hover div {
    bottom: 140px;
  }

  .floatCalendar .bookingCalendarWrp {
    top: calc(4vw + 1%);
  }

  .freeSession .bookingCalendarWrp {
    top: calc(-16px + 2%);
  }

  #syncCalendar a {
    text-indent: -100%;
    overflow: hidden;
    font-size: 0;
    color: transparent;
  }

  .bookingSelect .newNoLevel .btnWrp {
    flex-direction: column-reverse;
    flex-wrap: wrap;
    width: 100%;
  }

  .bookingSelect .newNoLevel .btnWrp button {
    width: 100%;
    max-width: none;
    margin: 0 0 10px;
  }

  .for_pad .bookingSelectTime {
    padding-bottom: 150px;
  }

  .clasSchedule .confirmBox {
    border-radius: 0;
  }

  .module_teacher_wrapper {
    padding: 0;
  }

  .bookingSelect .bookingResultState .classCharge {
    flex-wrap: wrap;
  }

  .materialCategoryBlock .title {
    margin-top: 20px;
  }

  .sujectSelect .learningModeMenu {
    margin: 5px 0 10px;
  }

  .sujectSelect.open::before {
    bottom: 36px;
  }

  .bookingSelect .class_noclass::before {
    width: 50px;
    height: 50px;
    background-size: 50px auto;
    margin-right: 15px;
  }

  .bookingSelect .class_noclass > .class_noclass_wrp {
    padding-right: 0;
    width: calc(100% - 65px);
  }

  .bookingSelect .class_noclass {
    flex-wrap: wrap;
  }

  .bookingSelect .class_noclass p {
    margin-bottom: 5px;
  }

  .bookingSelect .class_noclass a {
    width: 100%;
    max-width: none;
    margin-top: 20px;
  }

  /* 教材彈窗頁加寬開始 */

  .materialPageWiden .preview_title_block .preview_title {
    margin-bottom: 8px;
    font-size: 18px;
  }

  .module_preview .preview_title_block .tag,
  .materialPageWiden .preview_tab_block > .tab_title a {
    font-size: 14px;
  }

  /* 教材彈窗頁加寬結束 */

  .noVocabulary,
  .materialPageWiden .noVocabulary {
    min-height: 300px;
  }

  .videoCourseWrp .buttonWrap a {
    min-width: 100%;
  }

  .freeSession .courseListHead {
    display: block;
    position: relative;
  }

  .freeSession .courseListHead button {
    position: absolute;
    top: 0;
    right: 0;
  }

  .floatCalendar .courseListHead button {
    font-size: 0;
    color: transparent;
    text-indent: -100%;
    overflow: hidden;
    border: none;
    padding: 0;
  }

  .floatCalendar .courseListHead button::before {
    margin-right: 0;
    width: 24px;
    height: 24px;
    background-size: 24px auto;
  }

  .floatCalendar .courseListHead button.active {
    background: none;
  }

  .floatCalendar .courseListHead button.active::before {
    background-image: url(../../images/newBooking/icon_calendar_color.svg);
  }

  .floatCalendar .courseListHead button.active::after {
    content: none;
  }

  .clasSchedule .title button.cldBtn {
    background: url(../../images/OxfordUpgrade/calendar-default.svg) no-repeat
      center / 24px auto;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    font-size: 0;
    color: transparent;
    text-indent: -100%;
    overflow: hidden;
    top: -2px;
  }

  .clasSchedule .title button.cldBtn.active {
    background-image: url(../../images/newBooking/icon_calendar_color.svg);
  }

  .remindTrial li a {
    text-align: left;
    margin-left: 50px;
  }

  .newMain .goFreeBooking a {
    margin-left: 50px;
    display: block;
  }

  .newMain .goFreeBooking p {
    margin-bottom: 0;
    padding-left: 50px;
  }

  .remindTrial li p {
    padding-left: 50px;
  }

  .newMain .guidePurchases {
    padding: 5%;
  }

  .clasSchedule .courseFilter button,
  .clasSchedule .courseFilter .classDate,
  .teacherSearchFilter .courseFilter button,
  .wordsBank .tab_filter button {
    min-height: 34px;
  }

  .lessonSelectWrp .confirmBox {
    align-items: stretch;
  }

  .lessonSelectWrp .confirmBox button:nth-of-type(-n + 3) {
    flex-grow: 0;
    min-width: 48.5%;
    padding: 8px 15px;
  }

  .rightNowWrp {
    text-align: center;
  }

  .courseListWrp .hasClass button {
    margin-left: 0;
  }

  .courseListWrp .hasClass > div {
    flex-wrap: wrap;
  }

  .sujectSelectMenu .swiper-button-next,
  .sujectSelectMenu .swiper-button-prev,
  .sujectMenuNew .swiper-button-next,
  .sujectMenuNew .swiper-button-prev {
    top: 22px;
  }

  .learningRecordDetail .learningDetailCount span,
  .learningRecordDetail .learningDetailCount div label,
  .learningRecordDetail .learningDetailCount div {
    font-size: 18px;
  }

  .learningRecordDetail .learningDetailCount div {
    border: none;
    border-bottom: 1px solid #f0f0f0;
  }

  .learningRecordDetail .learningDetailCount div:last-child {
    border: none;
  }

  .learningCountingList .dateTime {
    font-size: 14px;
    margin-bottom: 3px;
  }

  .learningCountingList li .courseType b,
  .learningCountingList li .courseTitle,
  .learningCountingList li .courseType span,
  .learningCountingList li .courseType span.show,
  .learningCountingList li .courseType span.noshow {
    font-size: 12px;
  }

  .learningCountingList li {
    padding: 8px 0;
  }

  .learningCountingList li .courseType {
    margin-bottom: 3px;
  }

  .bookingSelect .newNoLevel .dsp {
    max-width: 100%;
    min-width: 100%;
  }

  .learninPurpose {
    padding: 0;
  }

  .learninPurpose .purposeItem li {
    width: 100%;
    padding: 20px 12px;
  }

  .learninPurpose h4 {
    font-size: 22px;
  }

  .goContractTransform {
    width: calc(100% - 40px);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 15px 20px;
    flex-wrap: wrap;
  }

  .goContractTransform > div {
    margin-bottom: 15px;
  }

  .goContractTransform a {
    width: 100%;
    justify-content: center;
  }

  .new_certificate {
    padding: 0 10px;
    box-sizing: border-box;
  }

  .module_teacher_wrapper .skilled li,
  .module_teacher_wrapper .studentFeedbackTag li {
    font-size: 14px;
  }

  .bookingSelect .newNoLevel > img {
    width: 40px;
  }

  .bookingSelect .newNoLevel > h4 {
    font-size: 22px;
  }

  .bookingSelect .newNoLevel {
    padding: 0;
  }

  .courseResource .audioPlayer {
    height: 46px;
    padding: 0 15px;
  }

  .courseResource .audioPlayer .controls span {
    font-size: 14px;
  }

  .courseResource .courseResourceList li {
    padding: 16px;
  }

  .courseResource .courseRelatedLink li {
    align-items: flex-start;
    padding: 16px;
    gap: 10px;
  }

  .courseResource .courseRelatedLink li::before {
    width: 30px;
    height: 30px;
    background-size: 17px;
  }

  .courseResource .courseRelatedLink li a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .myStudyPlanMain .myStudyPlanInfo {
    padding: 4px 16px;
  }

  .myStudyPlan .btnWrp button,
  .bookingCalendar .btnWrp button {
    font-size: 14px;
    padding: 10px 15px;
  }

  .bookingSelect h4.pageTitle.regularWeeklyClass {
    display: block;
    font-weight: 400;
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding: 0 40px 15px;
  }

  .regularWeeklyClassSchedule > h4 span,
  .bookingSelectTime .levelBarChart h4,
  .editSingleClassBooking > h4 span {
    display: none;
  }

  .regularWeeklyClassSchedule > h4,
  .editSingleClassBooking > h4:not(.pageTitle) {
    justify-content: center;
    margin-top: -10px;
  }

  .bookingSelect .regularWeeklyClass ~ .confirmBox {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }

  .bookingSelect .regularWeeklyClass ~ .confirmBox button {
    width: 100%;
  }

  .bookingSelectTime .levelBarChart ul {
    flex-direction: column;
  }

  .bookingSelectTime .levelBarChart li:nth-child(-n + 10) {
    width: 100%;
    height: auto;
  }

  .bookingSelectTime .levelBarChart li label {
    padding: 20px 12px;
    align-items: flex-start;
    padding-left: 52px;
    position: relative;
  }

  .bookingSelectTime .levelBarChart li label::before {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .bookingSelectTime .levelBarChart li input:checked + label::before {
    background: url(../../images/newBooking/checked_icon.svg) #fff no-repeat
      center / 16px auto;
    border-color: #edf1ff;
  }

  .bookingSelectTime .levelBarChart li input:checked ~ div {
    display: flex;
    background: transparent;
    padding: 8px 0 0;
    justify-content: flex-start;
    gap: 4px;
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .bookingSelectTime .levelBarChart li input:checked ~ div a {
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 5px;
  }

  .bookingSelectTime .levelBarChart .levelBookTitle {
    display: none !important;
  }

  .bookingSelectTime .levelBarChart li label::after {
    content: none;
  }

  .bookingSelectTime .levelBarChart li input:checked + label {
    background: #edf1ff;
    color: #555;
  }

  .bookingSelectTime .levelBarChart li input:checked + label p {
    color: #003bff;
  }

  .editSingleClassBooking .curriculumTable ul.date {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    max-width: none;
  }

  .editSingleClassBooking .curriculumTable ul.date li {
    height: auto;
    padding: 0;
    max-width: calc((100% - 90px) / 7);
  }

  .editSingleClassBooking .pickMonth {
    background: transparent;
    margin-top: 0;
  }

  .classCalendar .curriculumTable {
    background: transparent;
    padding: 0 0 10px;
  }

  .editSingleClassBooking .curriculumTable ul.date li label {
    height: 0;
    width: 100%;
    line-height: 9vw;
    padding-bottom: 88%;
    font-size: 14px;
    font-weight: 400;
    color: #555;
    transition:
      color 0.3s,
      border 0.3s;
  }

  .editSingleClassBooking .curriculumTable ul.date li.today label {
    color: #fff;
    border-color: #003bff;
  }

  .editSingleClassBooking .curriculumTable ul.date li.active label {
    color: #003bff;
    font-weight: 700;
  }

  .editSingleClassBooking .curriculumTable ul.date li.disable label {
    border-color: transparent;
    color: #aaa;
  }

  .editSingleClassBooking .curriculumTable .date div.classTime {
    display: none;
  }

  .editSingleClassBooking .curriculumTable .date div.classTime:first-of-type {
    display: block;
    width: 4px;
    height: 4px;
    background: #003bff;
    text-indent: -100%;
    overflow: hidden;
    border-radius: 50%;
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .editSingleClassBooking .curriculumTable ul.date li.active {
    background: none;
  }

  .editSingleClassBooking .pickMonth .currentMonth {
    width: auto;
    font-size: 16px;
  }

  .editSingleClassBooking .curriculumTable:before {
    content: none;
  }

  .editSingleClassBooking .curriculumTable ul.week {
    padding-top: 0;
    display: flex;
    gap: 15px;
    max-width: none;
  }

  .editSingleClassBooking .curriculumTable ul.week li {
    max-width: calc((100% - 90px) / 7);
  }

  .editSingleClassBooking .curriculumTable ul.week:after {
    content: none;
  }

  .editSingleClassBooking .pickMonth .prevMonth,
  .editSingleClassBooking .pickMonth .nextMonth {
    width: 18px;
    height: 18px;
  }

  .regularWeeklyClassList {
    padding: 30px 5%;
  }

  .regularWeeklyClassUnit .lessonList h4,
  .regularWeeklyClassUnit .lessonList div div {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .regularWeeklyClassUnit .lessonList li::after {
    width: 20px;
    height: 20px;
  }

  .regularWeeklyClassUnit .lessonList li.finish::after,
  .regularWeeklyClassUnit .lessonList li.overdue::after {
    background-size: 14px auto;
  }

  .regularWeeklyClassUnit .unitList > li {
    padding: 12px;
  }

  .regularWeeklyClassUnit .lessonList li::after {
    left: -37px;
  }

  .regularWeeklyClassUnit .lessonList {
    padding-left: 35px;
  }

  .regularWeeklyClassUnit .lessonList p.teacher {
    padding-left: 0;
  }

  .regularWeeklyClassUnit .lessonList p.teacher::after {
    content: none;
  }

  .regularWeeklyClassUnit .textbook a {
    font-size: 0;
    color: transparent;
    text-indent: -300%;
    overflow: hidden;
    gap: 0;
    padding: 6px;
  }

  .aiPodcast {
    margin: 0 -20px 20px;
  }

  .aiPodcast .lessonAudio {
    border-radius: 0;
    padding: 15px 12px;
  }

  .aiPodcast .audioCaptions {
    padding: 20px 12px;
    border-radius: 0;
  }

  .selectDateTitle ~ .bookingCalendar {
    padding-bottom: 60px;
  }

  .selectDateTitle ~ .bookingCalendar .btnWrp {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    border-top: 1px solid #ddd;
    background: #fff;
    max-width: none;
  }

  .selectDateTitle ~ .bookingCalendar .btnWrp button {
    max-width: none;
  }

  .myStudyPlan .btnWrp button {
    width: 100%;
  }

  .singleClassBookingList {
    display: block;
  }

  .materialsPrepared {
    flex-direction: column;
    padding: 60px 40px;
  }

  .materialsPrepared div {
    min-height: auto;
    align-items: center;
    gap: 15px;
  }

  .bookingHead .editTool {
    display: none;
  }

  .regularWeeklyClassList .editTool {
    display: block;
  }

  .regularWeeklyClassList h4 b {
    width: 100%;
  }

  .myStudyPlanMain .myPlanBookingStatus div {
    flex-wrap: wrap;
    gap: 10px;
  }

  .regularWeeklyClassUnit .lessonList li a {
    width: calc(100% - 42px);
  }

  .audioCaptions .captionList > ul,
  .audioCaptions.open .captionList {
    height: auto;
  }

  .materialPageWiden .aiPodcast {
    padding: 5% 20px;
  }

  .materialPageWiden .aiPodcast .lessonAudio.fixed {
    bottom: 0;
  }

  .orderCancelWrp {
    padding: 5px 0;
  }

  .orderCancelWrp .orderCancelCtn {
    flex-direction: column;
  }

  .orderCancelWrp .btnWrp {
    flex-direction: column;
  }

  .orderCancel .orderCancelIcon {
    display: none;
  }

  .courseResource .courseResourceList .audioAppendix > div,
  .courseResource .courseResourceList li {
    gap: 8px;
  }

  .kidsBooking .bookingHead {
    padding: 20px 20px 15px;
  }

  .kidsBooking .selectKidsAge {
    padding: 40px 20px;
  }

  .learningRecordList > li h4 {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .learningRecordList > li h4 label {
    top: 0;
  }

  .captionToggleBtn > div {
    width: 30px;
    height: 18px;
  }

  .captionToggleBtn .knob:before {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
  }

  .captionToggleBtn > div input:checked + .knob:before {
    left: 14px;
  }

  .captionToggleBtn,
  .cptionsSitting .CCBtn {
    font-size: 14px;
  }

  .audioCaptions .captionList > ul > li .originalText,
  .materialPageWiden .preview_tab_block > .tab_title a {
    font-size: 16px;
  }

  .wordDefinitionWrp .vocab_title {
    font-size: 18px;
  }

  .wordDefinitionWrp .vocab_voice span {
    font-size: 16px;
  }

  .audioCaptions .captionList > ul > li label::before {
    content: none;
  }

  .lessonAudio .audioPlayer {
    height: 46px;
  }

  .cambridgeSeriesList li button {
    display: none;
  }

  .mbSwitchCourse h4 {
    font-size: 16px;
  }

  .materialPageWiden .preview_title_block .bookBtn,
  .materialPageWiden .preview_title_block .goToClassBtn {
    display: none;
  }

  .materialPageWiden .tab_content_block .bookBtn,
  .materialPageWiden .tab_content_block .goToClassBtn {
    display: block;
  }

  .materialPageWiden .playBarWrp {
    padding: 14px 20px 10px;
  }

  .module_preview.materialPageWiden .playBar {
    padding: 10px;
  }

  .module_preview .playBarWrp .playBtnWrap .time {
    width: 27px;
  }

  .cambridgeSeriesList li p + span b {
    display: block;
    margin-top: 4px;
  }

  .cambridgeSeriesList li p + span b::before {
    content: none;
  }

  .cambridgeSeriesCourse .courseListHead {
    font-size: 16px;
  }

  .cambridgeSeriesSubjectMobile {
    display: block;
  }

  .cambridgeSeriesSubject {
    display: none;
  }

  .cambridgeSeries > .courseListHead {
    display: none;
  }

  .cambridgeSeriesList {
    padding: 8px 12px;
  }

  .lessonSelect.newOxford .subscriptionNotice {
    padding: 12px 16px;
  }

  .lessonSelect.newOxford .subscriptionNotice::before {
    width: 20px;
    height: 20px;
    mask-size: 20px auto;
    -webkit-mask-size: 20px auto;
  }

  .newOxford .classCalendar .switchCurriculum {
    border: 1px solid #ddd;
    width: 100%;
    margin-top: 20px;
  }

  .newOxford .classCalendar .switchCurriculum button {
    font-size: initial;
    text-indent: initial;
    padding: 5px 10px;
  }
}

@media only screen and (max-width: 480px) {
  .main_in {
    margin-bottom: 200px;
  }

  .bookingCalendar ul.chooseDate li,
  .bookingCalendar ul.week li {
    height: 10vw;
  }

  .bookingCalendar ul.week li {
    margin-bottom: 0;
  }

  .bookedClassList .topnav .editTips + div,
  .bookedClassList > h4 .editTips + div {
    left: 0;
    width: 100%;
    font-size: 14px;
    z-index: 3;
  }

  .materialBlock .editTips + div {
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    font-size: 14px;
  }

  .bookedClassList > h4 .editTips + div span,
  .materialBlock .editTips + div span {
    font-size: 16px;
  }
  .bookedClassList > h4 .editTips + div p,
  .materialBlock .editTips + div p {
    font-weight: 400;
  }

  .bookedClassList > h4 .editTips + div p:not(:last-of-type),
  .materialBlock .editTips + div p:not(:last-of-type) {
    margin-bottom: 5px;
  }

  .bookingCalendar .chooseTime .assignMaterial {
    bottom: -100px;
  }

  .bookingCalendar .chooseTime .assignMaterial button {
    padding: 8px 10px;
  }

  .bookingCalendar .confirmBox button {
    width: 100%;
  }

  .module_teacher_wrapper .t_block {
    padding: 20px 20px 20px 10px;
  }

  .bookingSelect .confirmBox button {
    font-size: 14px;
    padding: 8px 15px;
  }

  .bookingCalendar .choosePeriod li {
    padding: 6px 10px;
  }

  .bookingSelect .confirmBox span.addCartTip {
    text-align: left;
    padding-right: 0;
  }

  .announcementNoticeWrp {
    max-width: 90%;
  }

  .courseDays .cyclePlan li {
    width: calc(90% / 7);
  }

  .clasSchedule .courseListWrp li .dateTime,
  .clasSchedule .courseListWrp li .courseTeacher {
    font-size: 14px;
  }

  .clasSchedule .courseListWrp li .courseType span {
    font-size: 12px;
  }

  .clasSchedule .courseListWrp li > .cWap p.courseType {
    margin-bottom: 15px;
  }

  .clasSchedule .courseListWrp li button {
    top: 160px;
  }

  .myScheduleDetail .courseScoreChart li canvas {
    width: 70px !important;
    height: 70px !important;
    background-size: 70px auto;
  }

  .myScheduleDetail .courseScoreChart li > div {
    width: 70px !important;
    height: 70px !important;
  }

  .myScheduleDetail .courseScoreChart .chartWord {
    font-size: 32px;
  }

  .myScheduleDetail .courseScoreChart li p {
    font-size: 14px;
    margin-top: 10px;
  }

  .myScheduleDetail .courseScoreChart li {
    padding: 15px 0;
  }

  .categorySelectWrp .editTool .courseIntroBtn {
    font-size: 0;
    text-indent: -100%;
    overflow: hidden;
  }

  .categorySelectWrp .editTool a:before {
    margin-right: 0;
  }

  .clasSchedule .courseListWrp li > button {
    position: static;
    width: 100%;
    margin: 10px 0 5px;
  }

  .bookingSelect .newNoLevel .btnWrp button {
    padding: 10px;
    font-size: 14px;
    min-width: auto;
  }

  .bookingCalendar.floatCalendar ul.chooseDate,
  .bookingCalendar.floatCalendar ul.week,
  .bookingCalendar.floatCalendar .titleMonth {
    width: 280px;
  }

  .bookingCalendar.floatCalendar ul.chooseDate li {
    margin: 6px 5px;
  }

  .module_teacher_wrapper
    .teacher_introduce_wrap
    .t_btn_wrap
    .t_collect_m.active {
    background-size: 20px auto;
  }

  .module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__rate {
    margin-bottom: 5px;
  }

  .freeSession .courseListHead > span {
    display: block;
    margin-left: 0;
  }

  .floatCalendar .bookingCalendarWrp {
    top: calc(1vw + 1%);
  }

  .freeSession .bookingCalendarWrp {
    top: calc(-40px + 2%);
  }

  .newMain .guidePurchases .btnWrp {
    flex-direction: column;
  }

  .newMain .guidePurchases .btnWrp a:nth-child(2) {
    margin: 10px 0 0;
  }

  .courseListWrp .tipBar {
    flex-direction: column;
  }

  .courseListWrp .tipBar .rightNowQuota {
    margin-left: 0;
    margin-top: 5px;
  }

  .myLevelDetail .level-chart li b,
  .myLevelDetail .level-chart .level-chart-score-bar {
    width: 100%;
    line-height: normal;
  }

  .myLevelDetail .level-chart li b {
    background: none;
  }

  .learningRecord .recordItem > div span {
    left: 0;
    right: auto;
  }

  .learningRecord .recordItem > div span.unlimit {
    top: 30px;
  }

  .sujectSelect.personalAccomplishments .bookWrp .stateName {
    padding: 0.8vw;
  }

  .wordDefinitionWrp {
    width: calc(100% - 62px);
  }
}

@media only screen and (max-width: 360px) {
  .bookingCalendar.floatCalendar ul.chooseDate li {
    width: 26px;
    height: 26px;
  }

  .bookingCalendar.floatCalendar ul.chooseDate,
  .bookingCalendar.floatCalendar ul.week,
  .bookingCalendar.floatCalendar .titleMonth {
    width: 260px;
  }

  .bookingSelectTeacher .courseFilter button {
    font-size: 13px;
    padding: 6px 10px;
    padding-right: 30px;
  }
}

/* ================================= 老師選擇清單 Dream Team 改版 ============================== */
/* 對應 Figma:【LC】首次上課可選Dream Team (node 13-1148)
   使用方式:
   1. 外層 .teacherSearchList 加上 dreamTeamStyle class(View 已加好),此檔案所有規則都
      鎖在 .teacherSearchList.dreamTeamStyle 底下,直接「加在原 CSS 後面」即可,
      不會影響 weekCyclePlan、consultantSelectPopup 等其他共用 .teacherSearchList 的頁面。
   2. 新增圖檔(4 個)放到 images/newBooking/:
      dreamteam_badge.svg / dreamteam_deco.svg / icon_heart_line.svg / icon_heart_active.svg
   3. 沿用既有圖檔: arr_right.svg(箭頭 mask)、star_ico.svg(星星 mask)、AIChoose.svg。 */

.teacherSearchList.dreamTeamStyle ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

/* 卡片(預設 = AI 配對用的一般灰底) */
.teacherSearchList.dreamTeamStyle li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: calc(50% - 8px); /* 兩欄、欄距 16px */
  margin-bottom: 16px;
  padding: 16px 12px;
  border-radius: 8px;
  background: #f2f2f2;
  position: relative;
  box-sizing: border-box;
}

/* Dream Team 卡片:淺藍底 + 左下裝飾漸層圓(背景圖會被圓角自動裁切) */
.teacherSearchList.dreamTeamStyle li.dreamTeamCard {
  background-color: #f7f8ff;
  background-image: url(../../images/newBooking/dreamteam_deco.svg);
  background-repeat: no-repeat;
  background-position: -17px 63px;
  background-size: 185px auto;
}

/* Dream Team 右上書籤徽章(凸出卡片上緣 2px) */
.teacherSearchList.dreamTeamStyle li.dreamTeamCard::before {
  content: "";
  position: absolute;
  top: -2px;
  right: 12px;
  width: 30px;
  height: 36px;
  background: url(../../images/newBooking/dreamteam_badge.svg) no-repeat
    center / 30px auto;
  z-index: 2;
  pointer-events: none;
}

/* 內容列 =========== */
.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp {
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 0;
  min-height: 0;
}

/* 內容列右側箭頭(沿用 arr_right.svg,用 mask 上 #333) */
.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: auto;
  mask: url(../../images/newBooking/arr_right.svg) no-repeat center / 20px auto;
  -webkit-mask: url(../../images/newBooking/arr_right.svg) no-repeat center /
    20px auto;
  background-color: #333;
}

/* 頭像 64px */
.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp label img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

/* 收藏愛心徽章 24px(預設灰色線框愛心 / active 粉紅實心) */
.teacherSearchList.dreamTeamStyle .teacherInfo label div {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: url(../../images/newBooking/icon_heart_line.svg) #fff no-repeat
    center / 13px auto;
  transition: background 0.4s;
  cursor: pointer;
  box-sizing: border-box;
}

.teacherSearchList.dreamTeamStyle .teacherInfo label div.active {
  background-image: url(../../images/newBooking/icon_heart_active.svg);
}

/* 文字區 */
.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp > div {
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: none;
  padding-right: 0;
  background: none; /* 移除舊版行內箭頭底圖 */
  cursor: pointer;
  transition: opacity 0.3s;
}

.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp > div:hover {
  opacity: 0.5;
}

/* 名字 */
.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp > div h5 {
  margin-bottom: 4px;
  min-width: 0;
}

.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp > div h5 strong {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 國籍 */
.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp > div i {
  display: block;
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  color: #777;
  line-height: 1.4;
  margin-bottom: 2px;
}

/* 學歷 / 證照 */
.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp > div span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #777;
  line-height: 1.4;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 評分列(★ 9.6 (581)) */
.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp > div p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding-left: 0;
  background: none; /* 舊版星星底圖改用 mask 元素 */
  font-family: "Roboto", "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  line-height: 1.4;
}

.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp > div p::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  mask: url(../../images/newBooking/star_ico.svg) no-repeat center / 12px auto;
  -webkit-mask: url(../../images/newBooking/star_ico.svg) no-repeat center /
    12px auto;
  background-color: #333;
}

.teacherSearchList.dreamTeamStyle .teacherInfo .teacherInfoWrp > div p b {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-right: 0;
  line-height: 1.3;
}

/* 選擇按鈕:滿版白色膠囊 */
.teacherSearchList.dreamTeamStyle li > button {
  width: 100%;
  margin-top: auto; /* 內容較短時按鈕貼齊卡片底部 */
  padding: 12px 24px;
  border-radius: 999px;
  background: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
  text-align: center;
  cursor: pointer;
  position: relative; /* 蓋在裝飾圓上 */
  transition:
    color 0.3s,
    box-shadow 0.3s;
}

.teacherSearchList.dreamTeamStyle li > button:hover {
  color: #112f82;
  box-shadow: var(--shadow-light-gray);
}

/* 暫不提供服務 */
.teacherSearchList.dreamTeamStyle li .unavailable {
  height: auto;
  min-height: 46px; /* 對齊按鈕高度 */
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #777;
  position: relative;
}

/* AI 自動配對卡片 =========== */
.teacherSearchList.dreamTeamStyle li.aiMatchCard .teacherInfo {
  flex: 1;
  display: flex;
  align-items: center; /* 與相鄰 Dream Team 卡等高時內容垂直置中 */
}

.teacherSearchList.dreamTeamStyle li.aiMatchCard .teacherInfoWrp::after {
  content: none; /* AI 卡片沒有箭頭 */
}

.teacherSearchList.dreamTeamStyle li.aiMatchCard .teacherInfoWrp label {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e1e8ff;
  overflow: hidden;
}

.teacherSearchList.dreamTeamStyle li.aiMatchCard .teacherInfoWrp label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.teacherSearchList.dreamTeamStyle li.aiMatchCard .teacherInfoWrp > p {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 550px) {
  .teacherSearchList.dreamTeamStyle li {
    width: 100%;
  }
}

/* ================================= 老師資訊頁:明星教師 tag ============================== */
/* 對應 Figma:【LC】首次上課可選Dream Team (node 27-4842)
   放在 .teacherRate 內、__rate 之後、__label(大會堂精選)之前。
   新增圖檔: images/newBooking/icon_crown_line.svg(20x20 白色線框皇冠) */

/* 評分列改 flex,讓 ★評分與兩顆 tag 垂直置中、過窄自動換行 */
.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .teacherRate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
}

.module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__star_teacher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  background: #003bff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  margin-right: 8px;
  margin-bottom: 0;
  white-space: nowrap;
}

.module_teacher_wrapper
  .teacher_introduce_wrap
  .t_avatar
  .__star_teacher::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: url(../../images/newBooking/icon_crown_line.svg) no-repeat
    center / 20px auto;
}

@media (max-width: 710px) {
  .module_teacher_wrapper .teacher_introduce_wrap .t_avatar .teacherRate {
    display: grid;
  }

  .module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__label {
    width: fit-content;
  }

  .module_teacher_wrapper .teacher_introduce_wrap .t_avatar .__star_teacher {
    width: fit-content;
  }
}