@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700&family=Roboto:wght@500&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

ol,
ul {
  list-style: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

a:focus {
  outline: 0;
}
a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: yellow;
  color: black;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button] {
  -webkit-appearance: button;
  cursor: pointer;
}

input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clearfix {
  zoom: 1;
}
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

html {
  line-height: 1;
}

a {
  text-decoration: none;
  color: black;
}

button,
input,
textarea,
select {
  outline: 0;
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

select::-ms-expand {
  display: none;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 0) and (max-width: 767px) {
  .container {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .container:after {
    content: " ";
    display: block;
    clear: both;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .container {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
  }
  .container:after {
    content: " ";
    display: block;
    clear: both;
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .container {
    max-width: 928px;
    margin-left: auto;
    margin-right: auto;
  }
  .container:after {
    content: " ";
    display: block;
    clear: both;
  }
}
@media (min-width: 1201px) and (max-width: 1600px) {
  .container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  .container:after {
    content: " ";
    display: block;
    clear: both;
  }
}

:root {
  font-size: 62.5%;
  --bg-color: #F8F8F8;
  --main-color: #00B4A4;
  --main-dark-color: #009F90;
  --main-light-color: #f2f9f8;
  --remind-color: #EDAD00;
  --remind-dark-color: #cd9600;
  --grey-color: #666666;
  --grey-dark-color: #333333;
  --grey-light-color: #ececec;
  --grey-light-light-color: #eeeeee;
  --full-color: #e8531f;
  --danger-color: #e8531f;
  --expired-color: #aaaaaa;
  --all-color: #7eb200;
  --link-blue-color: #0087dc;
  --default-font-size: 1.6rem;
  --medium-font-size: 1.8rem;
  --large-font-size: 2rem;
  --border-radius: 0.8rem;
  --border-radius-small: 0.4rem;
  --box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.1);
  --box-shadow-hover: 0 0.4rem 0.6rem rgba(0,0,0,0.15);
  --color-main-500: #00B4A4;
}

@media (min-width: 0) and (max-width: 767px) {
  :root {
    --default-font-size: 1.4rem;
    --large-font-size: 1.6rem;
    --border-radius: 0.6rem;
    font-size: 62.5%;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  :root {
    --default-font-size: 1.4rem;
    --large-font-size: 1.6rem;
    --border-radius: 0.6rem;
  }
}
html {
  font-family: "Roboto", "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.is-fixed {
  overflow: hidden;
}

body {
  background-color: var(--bg-color);
}
body.is-fixed {
  overflow: hidden;
}

.wrap {
  box-sizing: border-box;
  padding-top: 9.6rem;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}
@media (min-width: 0) and (max-width: 767px) {
  .wrap {
    padding-top: 8rem;
  }
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(251, 251, 251, 0.7);
  border-bottom: solid 0.1rem var(--grey-light-color);
}
.site-header.is-scroll {
  position: fixed;
  z-index: 500;
  background-color: rgb(251, 251, 251);
}
.site-header__logo {
  width: 13rem;
  height: 2.2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .site-header__logo {
    width: 7.8rem;
    height: 1.32rem;
  }
}
.site-header__logo svg {
  width: 13rem;
  height: 2.5rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .site-header__logo svg {
    width: 7.8rem;
    height: 1.5rem;
  }
}
.site-header__logo svg .style-g {
  enable-background: new;
}
.site-header__logo svg .style-path-1 {
  fill: #666;
}
.site-header__logo svg .style-path-2 {
  fill: #00b4a4;
}
.site-header__nav {
  display: flex;
  gap: 1.2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .site-header__nav {
    gap: 0.8rem;
  }
}
.site-header__btn {
  display: block;
  color: var(--grey-color);
  transition: all 300ms ease-in-out;
  border-bottom: 0.1rem solid transparent;
  padding: 0.4rem 0;
  font-size: var(--default-font-size);
  position: relative;
}
.site-header__btn:hover {
  color: var(--main-color);
}
.site-header__btn.active {
  pointer-events: none;
  color: var(--main-color);
  border-bottom-color: var(--main-color);
}

.site-footer {
  padding: 3.6rem 2.4rem;
  background: var(--color-main-500);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
@media (min-width: 0) and (max-width: 767px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
  }
}
.site-footer__info {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.site-footer__jimbook-logo {
  width: 9.6rem;
  height: 1.6rem;
  background: transparent url("../images/jim-book-logo-w.svg") no-repeat 0 0;
  background-size: cover;
}
@media (min-width: 0) and (max-width: 767px) {
  .site-footer__jimbook-logo {
    margin: 0 auto;
  }
}
.site-footer__contact-list li {
  font-size: var(--font-size-sm);
  color: #fff;
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 767px) {
  .site-footer__contact-list li {
    text-align: center;
  }
}
.site-footer__sns {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-end;
}
@media (min-width: 0) and (max-width: 767px) {
  .site-footer__sns {
    align-items: center;
  }
}
.site-footer__sns-list {
  display: flex;
  gap: 0.8rem;
}
.site-footer__sns-list a {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
}
.site-footer__sns-list a img {
  max-width: 100%;
}
.site-footer__copyright {
  font-size: var(--font-size-xs);
  color: #fff;
}
.site-footer__privacy {
  display: flex;
  gap: 0.8rem;
}
.site-footer__privacy a {
  font-size: var(--font-size-xs);
  color: #fff;
  line-height: 1.6;
}

.site-main {
  position: relative;
  padding-bottom: 4rem;
}

.site-title {
  font-size: 2.4rem;
  color: var(--main-color);
  line-height: 1.6;
  position: relative;
  text-align: center;
  margin-bottom: 4rem;
}
.site-title::after {
  width: 3.2rem;
  height: 0;
  border-bottom: 0.2rem solid var(--main-color);
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  content: "";
}
@media (min-width: 0) and (max-width: 767px) {
  .site-title {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
  .site-title::after {
    width: 2.4rem;
  }
}

.site-container, .account, .my-course, .book-period, .book-area {
  width: 100rem;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (min-width: 0) and (max-width: 767px) {
  .site-container, .account, .my-course, .book-period, .book-area {
    width: auto;
    padding: 0 2rem;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .site-container, .account, .my-course, .book-period, .book-area {
    width: 72rem;
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .site-container, .account, .my-course, .book-period, .book-area {
    width: 92rem;
  }
}

.site-btn, .course-info__btn-book, .disclaimer__btn-confirm, .account__btn-vip, .account__btn-verified, .account__btn-verify, .account__btn-save, .cus-form__btn-submit {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  min-width: 32rem;
  display: block;
  background-color: var(--main-color);
  font-size: var(--default-font-size);
  color: #fff;
  text-align: center;
  height: 4.8rem;
  line-height: 4.8rem;
  border-radius: var(--border-radius);
  border: 0;
}
.site-btn:hover, .course-info__btn-book:hover, .disclaimer__btn-confirm:hover, .account__btn-vip:hover, .account__btn-verified:hover, .account__btn-verify:hover, .account__btn-save:hover, .cus-form__btn-submit:hover {
  background-color: var(--main-dark-color);
}
@media (min-width: 0) and (max-width: 767px) {
  .site-btn, .course-info__btn-book, .disclaimer__btn-confirm, .account__btn-vip, .account__btn-verified, .account__btn-verify, .account__btn-save, .cus-form__btn-submit {
    min-width: 100%;
  }
}

.site-rows, .account__rows, .cus-form__rows {
  margin-bottom: 1rem;
  text-align: center;
}

.site-label, .account__rows > label, .cus-form label {
  display: block;
  font-size: var(--default-font-size);
  color: var(--grey-color);
  margin-bottom: 0.8rem;
  text-align: left;
}

.site-input, .account input[type=text],
.account input[type=email],
.account input[type=password],
.account input[type=tel], .cus-form input {
  margin-bottom: 0.8rem;
  box-sizing: border-box;
  height: 4.6rem;
  line-height: 4.6rem;
  width: 100%;
  border: solid 0.1rem var(--grey-light-color);
  background-color: #fff;
  font-size: var(--default-font-size);
  border-radius: var(--border-radius);
  padding: 0 1rem;
  color: var(--main-color);
  transition: all 300ms ease;
}
.site-input::placeholder, .account input[type=text]::placeholder,
.account input[type=email]::placeholder,
.account input[type=password]::placeholder,
.account input[type=tel]::placeholder, .cus-form input::placeholder {
  color: var(--grey-light-color);
}
.site-input:focus, .account input[type=text]:focus,
.account input[type=email]:focus,
.account input[type=password]:focus,
.account input[type=tel]:focus, .cus-form input:focus {
  border-color: var(--main-color);
}

.btn-booked, .my-course__btn, .book-period__btn {
  border: solid 0.1rem var(--main-color);
  padding: 0 0.6rem;
  line-height: 4rem;
  box-sizing: border-box;
  background-color: transparent;
  width: 8rem;
  text-align: center;
  display: block;
  border-radius: var(--border-radius-small);
  color: var(--main-color);
  font-size: 1.6rem;
  height: 4rem;
}
.btn-booked.is-pending, .is-pending.my-course__btn, .is-pending.book-period__btn {
  border-color: var(--remind-color);
  color: var(--remind-color);
}
.btn-booked.is-booked, .is-booked.my-course__btn, .is-booked.book-period__btn {
  background-color: var(--main-color);
  color: #fff;
  pointer-events: none;
}
.btn-booked.is-full, .is-full.my-course__btn, .is-full.book-period__btn {
  border-color: var(--full-color);
  color: var(--full-color);
  pointer-events: none;
}
.btn-booked.is-expired, .is-expired.my-course__btn, .is-expired.book-period__btn {
  border-color: var(--expired-color);
  color: var(--expired-color);
  pointer-events: none;
}
.btn-booked.is-free, .is-free.my-course__btn, .is-free.book-period__btn {
  border-color: var(--main-color);
  color: #fff;
  pointer-events: auto;
}
@media (min-width: 0) and (max-width: 767px) {
  .btn-booked, .my-course__btn, .book-period__btn {
    font-size: 1.4rem;
    width: 6rem;
    line-height: 3.6rem;
    height: 3.6rem;
  }
}

.teacher-img, .teacher-profile__img img, .my-course__teacher-img, .book-period__teacher-img {
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  margin-right: 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .teacher-img, .teacher-profile__img img, .my-course__teacher-img, .book-period__teacher-img {
    margin-right: 0;
    margin-bottom: 0.6rem;
  }
}

.form-page {
  width: 48rem;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (min-width: 0) and (max-width: 767px) {
  .form-page {
    width: auto;
    padding: 0 3rem;
  }
}

.cus-form {
  margin: 0 auto;
  box-sizing: border-box;
}
.cus-form__msg,
.cus-form #mesg {
  color: var(--remind-color);
  font-size: var(--default-font-size);
  text-align: center;
  margin-bottom: 1rem;
}
.cus-form__btn-register, .cus-form__btn-forgot {
  margin: 0 1rem;
  font-size: var(--default-font-size);
  text-align: center;
  line-height: 1.6;
  display: inline-block;
  color: var(--main-color);
  border-bottom: 0.1rem solid var(--main-color);
}

.open-id {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.open-id__btn {
  margin: 0 0.6rem;
  background-color: #fff;
  border: 0;
  width: 4.8em;
  height: 4.8em;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 300ms ease-in-out;
}
.open-id__btn--facebook {
  background-image: url("../images/icon-facebook@3x.png");
  background-size: 2.4rem 2.4rem;
}
.open-id__btn--google {
  background-image: url("../images/icon-google@3x.png");
  background-size: 2.4rem 2.4rem;
}
.open-id__btn--line {
  background-image: url("../images/icon-line@3x.png");
  background-size: 2.4rem 2.4rem;
}
.open-id__btn:hover {
  transform: translate3d(0, 0.1rem, 0);
  box-shadow: var(--box-shadow-hover);
}

.or-line {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
  align-items: center;
  text-align: center;
  grid-gap: 2rem;
  width: 100%;
  margin-bottom: 2rem;
}
.or-line::before, .or-line::after {
  content: "";
  border-top: 0.1rem solid var(--grey-light-color);
}

.book-area__wrap {
  width: 36rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-area__wrap {
    width: 100%;
    gap: 1.6rem;
  }
}
.book-area__btn {
  width: 100%;
  display: block;
  border-radius: var(--border-radius);
  border: solid 0.1rem var(--grey-light-color);
  padding: 2.4rem 2rem;
  box-sizing: border-box;
  text-align: center;
  transition: all 300ms ease-in-out;
  background-color: #fff;
}
.book-area__btn img {
  width: 8rem;
  display: block;
  margin: 0 auto 1rem;
}
.book-area__btn span {
  font-size: var(--default-font-size);
  color: var(--main-color);
}
.book-area__btn:hover {
  transform: translate3d(0, -0.4rem, 0);
}

.book-calendar {
  width: 140rem;
  margin: 0 auto 6rem;
  box-sizing: border-box;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar {
    width: auto;
    padding: 0 2rem;
    margin-bottom: 3rem;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .book-calendar {
    width: 72rem;
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .book-calendar {
    width: 92rem;
  }
}
@media (min-width: 1201px) and (max-width: 1600px) {
  .book-calendar {
    width: 100rem;
  }
}
.book-calendar__btn-del {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--main-color);
  border-radius: 50%;
  background-color: #fff;
  line-height: 1.6rem;
  font-size: 1.2rem;
  text-align: center;
}
.book-calendar__btn-msg {
  display: block;
  height: 2.4rem;
  color: var(--main-color);
  border-radius: 0.4rem;
  background-color: #fff;
  line-height: 2.4rem;
  font-size: 1.2rem;
  text-align: center;
}
.book-calendar__header {
  margin-bottom: 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__header {
    margin-bottom: 1rem;
  }
}
.book-calendar__date {
  width: 24rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 1rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__date {
    width: auto;
    padding: 0 1rem;
  }
}
.book-calendar__current-date {
  font-size: 3.2rem;
  color: var(--main-color);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__current-date {
    font-size: 2.4rem;
  }
}
.book-calendar__btn-prev {
  width: 2rem;
  height: 2rem;
  background-color: transparent;
  border: 0;
  padding: 0;
  position: relative;
  display: block;
  transition: all 300ms ease;
}
.book-calendar__btn-prev::after {
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  border-top: solid 0.1rem var(--grey-color);
  border-right: solid 0.1rem var(--grey-color);
  content: "";
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-135deg);
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__btn-prev {
    width: 1.6rem;
    height: 1.6rem;
  }
  .book-calendar__btn-prev::after {
    width: 1.2rem;
    height: 1.2rem;
  }
}
.book-calendar__btn-prev:hover {
  transform: translate3d(-10%, 0, 0);
}
.book-calendar__btn-next {
  width: 2rem;
  height: 2rem;
  background-color: transparent;
  border: 0;
  padding: 0;
  position: relative;
  display: block;
  transition: all 300ms ease;
}
.book-calendar__btn-next::after {
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  border-top: solid 0.1rem var(--grey-color);
  border-right: solid 0.1rem var(--grey-color);
  content: "";
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__btn-next {
    width: 1.6rem;
    height: 1.6rem;
  }
  .book-calendar__btn-next::after {
    width: 1.2rem;
    height: 1.2rem;
  }
}
.book-calendar__btn-next:hover {
  transform: translate3d(10%, 0, 0);
}
.book-calendar__status {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__status {
    flex-wrap: wrap;
  }
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__pick {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    flex-basis: 100%;
    margin-bottom: 1rem;
  }
}
.book-calendar__tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__tips {
    justify-content: center;
    flex-basis: 100%;
  }
}
.book-calendar__item {
  padding-left: 2rem;
  font-size: var(--default-font-size);
  position: relative;
  line-height: 3rem;
  height: 3rem;
  margin-right: 1.6rem;
  border-bottom: 0.1rem solid transparent;
  cursor: pointer;
}
.book-calendar__item:last-child {
  margin-right: 0;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__item {
    line-height: 3.2rem;
    margin-right: 0.6rem;
  }
}
.book-calendar__item::before {
  box-sizing: border-box;
  border-radius: 50%;
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  left: 0;
}
.book-calendar__item.is-available {
  color: var(--main-color);
}
.book-calendar__item.is-available::before {
  background-color: #fff;
  border: solid 0.1rem var(--main-color);
}
.book-calendar__item.is-available.is-active {
  border-bottom-color: var(--main-color);
}
.book-calendar__item.is-booked {
  color: var(--main-color);
}
.book-calendar__item.is-booked::before {
  background-color: var(--main-color);
}
.book-calendar__item.is-booked.is-active {
  border-bottom-color: var(--main-color);
}
.book-calendar__item.is-pending {
  color: var(--remind-color);
}
.book-calendar__item.is-pending::before {
  border: solid 0.1rem var(--remind-color);
}
.book-calendar__item.is-pending.is-active {
  border-bottom-color: var(--remind-color);
}
.book-calendar__item.is-full {
  color: var(--full-color);
}
.book-calendar__item.is-full::before {
  border: solid 0.1rem var(--full-color);
}
.book-calendar__item.is-full.is-active {
  border-bottom-color: var(--full-color);
}
.book-calendar__item.is-expired {
  color: var(--expired-color);
}
.book-calendar__item.is-expired::before {
  border: solid 0.1rem var(--expired-color);
}
.book-calendar__item.is-expired.is-active {
  border-bottom-color: var(--expired-color);
}
.book-calendar__item.is-all {
  color: var(--all-color);
  padding-left: 0;
}
.book-calendar__item.is-all::before {
  display: none;
}
.book-calendar__item.is-all.is-active {
  border-bottom-color: var(--all-color);
}
.book-calendar__selector {
  width: 20rem;
  box-sizing: border-box;
  border-radius: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid var(--grey-light-color);
  display: inline-block;
  position: relative;
  height: 4rem;
  margin-right: 1rem;
  vertical-align: top;
  border-radius: var(--border-radius);
  padding-right: 1.6rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__selector {
    width: 100%;
    margin-right: 0;
    height: 3.2rem;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .book-calendar__selector {
    width: 14rem;
  }
}
.book-calendar__selector::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 0.1rem solid var(--grey-color);
  border-bottom: 0.1rem solid var(--grey-color);
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translate3d(-50%, -60%, 0) rotate(45deg);
  pointer-events: none;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__selector::after {
    right: 0.6rem;
  }
}
.book-calendar__selector--full {
  width: 100%;
  margin-right: 0;
}
.book-calendar__selector select {
  box-sizing: border-box;
  padding: 0 1rem;
  color: var(--grey-color);
  width: 100%;
  line-height: 4rem;
  height: 4rem;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: var(--default-font-size);
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__selector select {
    line-height: 3.2rem;
    height: 3.2rem;
  }
}
.book-calendar__selector select::placeholder {
  color: var(--grey-dark-color);
  opacity: 1;
}
.book-calendar__selector select:-ms-input-placeholder {
  color: var(--grey-dark-color);
}
.book-calendar__selector select::-ms-input-placeholder {
  color: var(--grey-dark-color);
}
.book-calendar__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-right: solid 0.1rem var(--grey-light-color);
}
.book-calendar__week > div {
  border: solid 0.1rem var(--grey-light-color);
  border-right: 0;
  text-align: center;
  padding: 1rem;
  font-size: var(--default-font-size);
  color: var(--grey-color);
}
.book-calendar__day-wrap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-right: solid 0.1rem var(--grey-light-color);
}
.book-calendar__day {
  cursor: pointer;
  border: solid 0.1rem var(--grey-light-color);
  border-right: 0;
  border-top: 0;
  text-align: center;
  padding: 3rem 1rem 1rem;
  position: relative;
  min-height: 9rem;
  background-color: #fff;
  text-align: left;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__day {
    padding: 2rem 0.4rem 0.4rem;
    min-height: 8rem;
  }
}
.book-calendar__day.prev-month {
  background-color: var(--bg-color);
}
.book-calendar__day.prev-month .book-calendar__num {
  opacity: 0.5;
}
.book-calendar__day.is-today {
  background-color: var(--main-light-color);
}
.book-calendar__num {
  position: absolute;
  font-size: 1.2rem;
  color: var(--grey-color);
  left: 0.4rem;
  top: 0.4rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__course-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.book-calendar__course {
  box-sizing: border-box;
  background-color: #fff;
  border: solid 0.1rem var(--main-color);
  display: inline-block;
  padding: 0.6rem;
  color: var(--main-color);
  border-radius: var(--border-radius-small);
  font-size: var(--default-font-size);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}
.book-calendar__course.is-booked {
  background-color: var(--main-color);
  color: #fff;
}
.book-calendar__course.is-pending {
  border-color: var(--remind-color);
  color: var(--remind-color);
}
.book-calendar__course.is-full {
  border-color: var(--full-color);
  color: var(--full-color);
}
.book-calendar__course.is-expired {
  border-color: var(--expired-color);
  color: var(--expired-color);
}
@media (min-width: 0) and (max-width: 767px) {
  .book-calendar__course {
    padding: 0.3rem;
    width: 100%;
    text-align: center;
    width: 4rem;
  }
}

.book-period {
  padding-bottom: 6rem;
}
.book-period__date {
  font-size: var(--large-font-size);
  text-align: center;
  color: var(--grey-color);
  margin-bottom: 1rem;
}
.book-period__time {
  border-radius: 50%;
  text-align: center;
  line-height: 4rem;
  width: 4rem;
  height: 4rem;
  background-color: var(--main-color);
  font-size: 1.2rem;
  color: #fff;
  margin: 1rem 0;
}
.book-period__course {
  border: solid 0.1rem var(--grey-light-color);
  border-radius: var(--border-radius);
  background-color: #fff;
  padding: 2rem 3rem;
  position: relative;
  margin-bottom: 3rem;
  box-sizing: border-box;
}
.book-period__course:last-child {
  margin-bottom: 0;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__course {
    padding: 1rem 2rem;
    margin-bottom: 2rem;
  }
}
.book-period__course-empty {
  border: solid 0.1rem var(--grey-light-color);
  background-color: var(--grey-light-light-color);
  border-radius: var(--border-radius);
  min-height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--default-font-size);
  color: var(--grey-color);
}
.book-period__period {
  margin-bottom: 6rem;
}
.book-period__period:last-child {
  margin-bottom: 0;
}
.book-period__course-header {
  border-bottom: 0.1rem solid var(--grey-light-light-color);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__course-header {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.book-period__info {
  display: flex;
  align-items: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__info {
    padding-top: 0.4rem;
  }
}
.book-period__course-name, .book-period__course-time {
  font-size: var(--large-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
.book-period__course-name {
  font-weight: 500;
  color: var(--main-color);
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__course-name {
    flex-basis: 100%;
    text-align: center;
  }
}
.book-period__course-group {
  font-size: var(--large-font-size);
  color: var(--grey-color);
  padding-left: 2rem;
  margin-left: 2rem;
  border-left: 0.1rem solid var(--grey-light-color);
}
.book-period__course-group:empty {
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__course-group {
    padding-left: 1rem;
    margin-left: 1rem;
  }
  .book-period__course-group:empty {
    padding-left: 0;
    margin-left: 0;
  }
}
.book-period__course-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__course-body {
    flex-wrap: wrap;
    padding-bottom: 1rem;
  }
}
.book-period__teacher {
  display: flex;
  align-items: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__teacher {
    margin-bottom: 2rem;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    border-bottom: 0.1rem solid var(--grey-light-color);
    padding-bottom: 2rem;
  }
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__intro-wrap {
    width: 100%;
  }
}
.book-period__intro-wrap h3 {
  font-size: var(--large-font-size);
  color: var(--main-color);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__intro-wrap h3 {
    text-align: center;
  }
}
.book-period__intro-wrap p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__intro-wrap p {
    text-align: center;
  }
}
.book-period__price-wrap {
  display: flex;
  align-items: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__price-wrap {
    width: 100%;
    justify-content: space-between;
  }
}
.book-period__price {
  margin-right: 4rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__price {
    margin-right: 2rem;
  }
}
.book-period__price h4 {
  font-size: 3.2rem;
  color: var(--main-color);
  line-height: 1.6;
  margin-top: -0.6rem;
  font-weight: 700;
}
.book-period__price h4 small {
  font-size: var(--large-font-size);
  position: relative;
  top: -0.1rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__price h4 {
    font-size: 2rem;
    margin-top: -0.6rem;
  }
}
.book-period__price p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
.book-period__detail {
  border-top: 0.1rem solid var(--grey-light-light-color);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .book-period__detail {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
}
.book-period__detail h4 {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.book-period__detail p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
.book-period__detail a {
  color: var(--link-blue-color);
  border-bottom: 1px solid var(--link-blue-color);
}
.book-period__btn-toggle {
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  bottom: -1.2rem;
  background-color: var(--main-color);
  border: 0;
}
.book-period__btn-toggle::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -70%, 0) rotate(135deg);
  width: 0.6rem;
  height: 0.6rem;
  border-top: solid 0.1rem #fff;
  border-right: solid 0.1rem #fff;
  transition: all 300ms ease;
}
.book-period__btn-toggle.is-active::after {
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

.cart-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  border-top: solid 0.1rem var(--grey-light-color);
  min-height: 8.8rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .cart-panel {
    min-height: 7.8rem;
  }
}
.cart-panel::before {
  content: "";
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--remind-color);
  opacity: 0;
  transition: all 1000ms ease;
}
.cart-panel.is-active::before {
  opacity: 0.3;
}
.cart-panel__inner {
  width: 100rem;
  margin: 0 auto;
  padding: 2rem 0;
  display: flex;
  min-height: 4.8rem;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .cart-panel__inner {
    width: auto;
    padding: 2rem;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .cart-panel__inner {
    width: 72rem;
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .cart-panel__inner {
    width: 92rem;
  }
}
@media (min-width: 1201px) and (max-width: 1600px) {
  .cart-panel__inner {
    width: 100rem;
  }
}
.cart-panel__status {
  display: flex;
  align-items: center;
}
.cart-panel__pending, .cart-panel__booked {
  font-size: 1.6rem;
  margin-right: 3rem;
}
.cart-panel__pending strong, .cart-panel__booked strong {
  font-size: 2.4rem;
  padding-left: 0.6rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .cart-panel__pending, .cart-panel__booked {
    font-size: 1.2rem;
    margin-right: 2rem;
  }
  .cart-panel__pending strong, .cart-panel__booked strong {
    font-size: 1.8rem;
    padding-left: 0.6rem;
  }
}
.cart-panel__pending {
  color: var(--remind-color);
}
.cart-panel__booked {
  color: var(--main-color);
}
.cart-panel__btn-purchasing {
  border-radius: var(--border-radius-small);
  background-color: var(--remind-color);
  font-size: 1.6rem;
  padding: 1.6rem 2.4rem;
  display: block;
  color: #fff;
  transition: all 600ms ease;
}
.cart-panel__btn-purchasing:hover {
  background-color: var(--remind-dark-color);
}
.cart-panel__btn-purchasing.is-disable {
  pointer-events: none;
  background-color: var(--expired-color);
}
@media (min-width: 0) and (max-width: 767px) {
  .cart-panel__btn-purchasing {
    font-size: 1.4rem;
    padding: 1.2rem 2rem;
  }
}

.infobox {
  padding: 1rem;
  background-color: #fff;
  line-height: 1.6;
  font-size: var(--default-font-size);
  color: var(--grey-color);
  border: solid 0.2rem var(--grey-color);
}

.class_info {
  max-width: 120rem;
  margin: 0 auto;
}
.class_info table {
  width: 100%;
}
.class_info table th,
.class_info table td {
  text-align: center;
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
  border: solid 0.1rem var(--grey-light-light-color);
  padding: 0.8rem;
}

@media (min-width: 0) and (max-width: 767px) {
  .my-course {
    padding-bottom: 3rem;
  }
}
.my-course__day {
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 0.1rem dashed var(--grey-light-color);
}
.my-course__day.is-passed {
  filter: grayscale(1);
}
.my-course__day:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
@media (min-width: 0) and (max-width: 767px) {
  .my-course__day {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
}
.my-course__date {
  font-size: var(--large-font-size);
  text-align: center;
  color: var(--grey-color);
  margin-bottom: 1rem;
}
.my-course__course {
  border: solid 0.1rem var(--grey-light-color);
  border-radius: var(--border-radius);
  background-color: #fff;
  padding: 2rem 3rem;
  position: relative;
  margin-bottom: 3rem;
}
.my-course__course:last-child {
  margin-bottom: 0;
}
@media (min-width: 0) and (max-width: 767px) {
  .my-course__course {
    padding: 1rem 1.6rem;
    margin-bottom: 2rem;
  }
}
.my-course__course-empty {
  border: solid 0.1rem var(--grey-light-color);
  background-color: var(--grey-light-light-color);
  border-radius: var(--border-radius);
  min-height: 14rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
  text-align: center;
}
.my-course__course-header {
  border-bottom: 0.1rem solid var(--grey-light-color);
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my-course__course-name, .my-course__course-time {
  font-size: var(--large-font-size);
  padding-bottom: 0.8rem;
  color: var(--grey-dark-color);
  line-height: 1.6;
}
.my-course__course-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .my-course__course-body {
    padding-bottom: 1rem;
  }
}
.my-course__teacher {
  display: flex;
  align-items: center;
}
.my-course__teacher-img {
  width: 6rem;
  height: 6rem;
  margin-bottom: 0;
  margin-right: 0.8rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .my-course__teacher-img {
    width: 4.8rem;
    height: 4.8rem;
  }
}
.my-course__intro-wrap h3 {
  font-size: var(--large-font-size);
  color: var(--main-color);
  line-height: 1.6;
}
.my-course__intro-wrap p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 767px) {
  .my-course__intro-wrap p {
    font-size: 1.2rem;
  }
}
.my-course__price-wrap {
  display: flex;
  align-items: center;
}
.my-course__price {
  margin-right: 4rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .my-course__price {
    margin-right: 1rem;
  }
}
.my-course__price h4 {
  font-size: 3.2rem;
  color: var(--main-color);
  line-height: 1.6;
  margin-top: -1rem;
  font-weight: 700;
}
.my-course__price h4 small {
  font-size: var(--large-font-size);
}
@media (min-width: 0) and (max-width: 767px) {
  .my-course__price h4 {
    font-size: 2rem;
    margin-top: -0.5rem;
  }
}
.my-course__price p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 767px) {
  .my-course__price p {
    font-size: 1.2rem;
  }
}
.my-course__detail {
  border-top: 0.1rem solid var(--grey-light-color);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .my-course__detail {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
}
.my-course__detail h4 {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.my-course__detail p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
  word-break: break-all;
}
.my-course__detail a {
  color: var(--link-blue-color);
  border-bottom: 1px solid var(--link-blue-color);
}

.account__title {
  text-align: center;
  color: var(--grey-color);
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}
.account__basic, .account__survey {
  margin-bottom: 4rem;
}
.account__rows {
  font-size: 0;
}
.account__rows--info {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 0.1rem solid var(--grey-light-light-color);
}
.account__text {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  padding-top: 0.6rem;
}
.account__text a {
  display: inline-block;
  padding: 0.6rem 1rem;
  background-color: var(--remind-color);
  color: #fff;
  border-radius: 0.4rem;
  margin-left: 0.4rem;
}
.account__btn-verify {
  background-color: var(--remind-color);
}
.account__btn-verify:hover {
  background-color: var(--remind-dark-color);
}
.account__btn-verified {
  position: relative;
  pointer-events: none;
}
.account__btn-verified::after {
  content: "";
  width: 1rem;
  height: 0.8rem;
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translate3d(0, -55%, 0) rotate(-45deg);
  border-left: solid 0.15rem #fff;
  border-bottom: solid 0.15rem #fff;
}
.account__info {
  color: var(--grey-color);
  font-size: var(--default-font-size);
  padding: 0 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .account__info {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.account__info strong {
  margin-left: 0.4rem;
}
.account__info strong.number {
  color: var(--main-color);
  padding: 0;
}
.account__info strong.vip {
  color: var(--remind-color);
}
.account__info strong.normal {
  color: var(--main-color);
}
.account__info:nth-child(1) {
  border-right: solid 0.1rem var(--grey-light-color);
}
.account__btn-vip {
  background-color: var(--remind-color);
  width: 30rem;
}
.account__btn-vip:hover {
  background-color: var(--remind-dark-color);
}
@media (min-width: 0) and (max-width: 767px) {
  .account__btn-vip {
    width: 100%;
  }
}

.survey-item {
  border-radius: var(--border-radius);
  border: solid 0.1rem var(--grey-light-color);
  background-color: #fff;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .survey-item {
    flex-wrap: wrap;
  }
}
.survey-item:last-child {
  margin-bottom: 0;
}
.survey-item__text {
  font-size: var(--default-font-size);
  line-height: 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .survey-item__text {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--grey-light-color);
  }
}
.survey-item__text span {
  padding-top: 0.4rem;
  display: block;
  color: var(--danger-color);
  position: relative;
  padding-left: 2rem;
}
.survey-item__text span::before {
  content: "!";
  color: #fff;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1rem;
  position: absolute;
  left: 0;
  border-radius: 50%;
  text-align: center;
  line-height: 1.6rem;
  background-color: var(--danger-color);
  top: 50%;
  transform: translate3d(0, -40%, 0);
}
@media (min-width: 0) and (max-width: 767px) {
  .survey-item__text span {
    display: block;
    padding-left: 0;
  }
  .survey-item__text span::before {
    position: relative;
    display: inline-block;
    transform: translate3d(0, -0.15rem, 0);
    margin-right: 0.4rem;
  }
}
.survey-item__text span:empty {
  padding-top: 0;
  padding-right: 0;
  display: none;
}
.survey-item__text span:empty::before {
  display: none;
}
.survey-item__radio-wrap {
  display: flex;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .survey-item__radio-wrap {
    width: 100%;
  }
}
.survey-item__agree-wrap {
  text-align: center;
  padding: 2rem;
}
.survey-item__radio {
  display: inline-block;
  margin: 0 2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .survey-item__radio {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
.survey-item__radio input[type=radio] {
  position: absolute;
  left: -9999px;
  box-sizing: border-box;
  padding: 0;
}
.survey-item__radio input[type=radio]:not(:checked) + label,
.survey-item__radio input[type=radio]:checked + label {
  height: 2rem;
  line-height: 2rem;
  display: inline-block;
  position: relative;
  padding-left: 3rem;
  cursor: pointer;
  font-size: var(--default-font-size);
  color: var(--main-color);
}
@media (min-width: 0) and (max-width: 767px) {
  .survey-item__radio input[type=radio]:not(:checked) + label,
.survey-item__radio input[type=radio]:checked + label {
    padding-left: 2.4rem;
  }
}
.survey-item__radio input[type=radio]:not(:checked) + label:before,
.survey-item__radio input[type=radio]:checked + label:before {
  content: "";
  position: absolute;
  left: 0;
  width: 1.8rem;
  height: 1.8rem;
  border: solid 0.1rem var(--main-color);
  background-color: transparent;
  border-radius: 0;
  top: 0;
  border-radius: 50%;
}
.survey-item__radio input[type=radio] + label:after {
  background-color: var(--main-color);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  line-height: 0.8;
  border: solid 2px transparent;
  transition: all 0.3s cubic-bezier(0.81, 0.01, 0.28, 1);
  opacity: 0;
  transform: scale(0);
}
.survey-item__radio input[type=radio]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

.disclaimer__inner {
  padding: 2rem;
  box-sizing: border-box;
  margin-bottom: 2rem;
  height: 23rem;
  overflow-y: scroll;
}
.disclaimer__block {
  margin-bottom: 4rem;
}
.disclaimer__block:last-child {
  margin-bottom: 0;
}
.disclaimer__block h3 {
  font-size: var(--medium-font-size);
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--grey-color);
}
.disclaimer__remind-text {
  font-size: var(--default-font-size);
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--main-color);
  text-align: center;
  display: block;
}
.disclaimer__remind-text a {
  display: inline-block;
  padding: 0.2rem 1rem;
  background-color: var(--main-color);
  color: #fff;
  border-radius: 0.4rem;
  margin-left: 0.4rem;
}
.disclaimer__text {
  font-size: var(--default-font-size);
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--grey-color);
}
.disclaimer__inner-text {
  font-size: var(--default-font-size);
  line-height: 1.6;
  margin-bottom: 0.6rem;
  color: var(--grey-color);
}
.disclaimer__ol-list {
  list-style: decimal;
  padding-left: 1.6rem;
}
.disclaimer__ol-list > li {
  font-size: var(--default-font-size);
  position: relative;
  margin-bottom: 1rem;
  color: var(--grey-color);
  padding-bottom: 1rem;
  border-bottom: 0.1rem dashed var(--grey-light-light-color);
}
.disclaimer__ol-list > li:last-child {
  margin-bottom: 0;
}
.disclaimer__inner-ul-list {
  list-style: disc;
  padding-left: 2rem;
  margin-bottom: 2rem;
}
.disclaimer__inner-ul-list > li {
  font-size: var(--default-font-size);
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--grey-color);
}
.disclaimer__inner-ul-list > li:last-child {
  margin-bottom: 0;
}
.disclaimer__agree-wrap {
  text-align: center;
  margin-bottom: 4rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .disclaimer__agree-wrap {
    margin-bottom: 2rem;
  }
}
.disclaimer__agree {
  display: inline-block;
  margin: 0 2rem;
  padding: 1rem;
  border: solid 0.1rem transparent;
  text-align: center;
  font-size: var(--default-font-size);
  line-height: 1.6;
  color: var(--grey-color);
}
.disclaimer__agree input[type=checkbox] {
  position: absolute;
  left: -9999px;
  box-sizing: border-box;
  padding: 0;
}
.disclaimer__agree input[type=checkbox]:not(:checked) + label,
.disclaimer__agree input[type=checkbox]:checked + label {
  height: 2rem;
  line-height: 2rem;
  display: inline-block;
  position: relative;
  padding-left: 3rem;
  cursor: pointer;
  font-size: var(--default-font-size);
  color: var(--main-color);
}
.disclaimer__agree input[type=checkbox]:not(:checked) + label a,
.disclaimer__agree input[type=checkbox]:checked + label a {
  color: var(--main-color);
  border-bottom: 0.1rem solid var(--main-color);
}
.disclaimer__agree input[type=checkbox]:not(:checked) + label:before,
.disclaimer__agree input[type=checkbox]:checked + label:before {
  content: "";
  position: absolute;
  left: 0;
  width: 1.8rem;
  height: 1.8rem;
  border: solid 0.1rem var(--main-color);
  background-color: transparent;
  border-radius: 0;
  top: 0;
}
.disclaimer__agree input[type=checkbox] + label:after {
  padding: 0;
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAACE4AAAhOAFFljFgAAAFGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDMgNzkuMTY0NTI3LCAyMDIwLzEwLzE1LTE3OjQ4OjMyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMTItMTFUMTE6Mjg6NTArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTEyLTExVDExOjMwOjQ4KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTEyLTExVDExOjMwOjQ4KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmMyMzdkZmFkLTkzNzItNDI4Mi1iNTk4LTg5YjFjM2U4NWQzNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpjMjM3ZGZhZC05MzcyLTQyODItYjU5OC04OWIxYzNlODVkMzciIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjMjM3ZGZhZC05MzcyLTQyODItYjU5OC04OWIxYzNlODVkMzciPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmMyMzdkZmFkLTkzNzItNDI4Mi1iNTk4LTg5YjFjM2U4NWQzNyIgc3RFdnQ6d2hlbj0iMjAyMC0xMi0xMVQxMToyODo1MCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjEgKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YAANDgAAAUhJREFUaIHtmDFugzAUQJ+r7r1KbtDuLOnM0PYE6Y1KBh+gA3t6g/QGvUJP4C4MKJIx2P/3G8lPigSIRO8Jg01cCIE9c2ctUEoLsKYFWNMCrGkB1rQAa3YfcG8tEMON/ggcgJ/Q9UPsvCoD3OhfgY9p9wsYYudWN4Ru5JNUFRCRH5a+U01ARP5tafxDJQG58pC4id3oL9PmNXT9e4ZbkhJ5SF+Bx+lzcqNf9YNbKJWHdMDvbPtFMkJCHtIBTyhESMlDIiB0/RXhCEl5WPEUkoyQloeVj1GJCA152DAPlERoycPGiSwnQlMeMmbiLRHa8pC5lFgT8R/yAK7k32k3+gNwAR5mh8/TMXV5KAyAaMQtKvIgsBqNDKc5avIgtJxeiFCVB8H3gVnEJ/ANPGvLg8A9YE0Vb2QltABrWoA1LcCaFmBNC7Bm9wF/ZJuziXynL0gAAAAASUVORK5CYII=");
  background-size: 100%;
  width: 1.6rem;
  height: 1.6rem;
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  transition: all 0.3s cubic-bezier(0.81, 0.01, 0.28, 1);
  opacity: 0;
  transform: scale(0);
}
.disclaimer__agree input[type=checkbox]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
.disclaimer__agree.is-active {
  animation-name: solidAni;
  animation-timing-function: ease-in-out;
  animation-duration: 500ms;
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-iteration-count: 10;
}
.disclaimer__approved {
  text-align: center;
  font-size: var(--default-font-size);
  line-height: 1.6;
  color: var(--grey-color);
}
@keyframes solidAni {
  0% {
    border-color: transparent;
  }
  100% {
    border-color: var(--main-color);
  }
}
.course-detail {
  max-width: 100rem;
  box-sizing: border-box;
  padding: 4rem 4rem 10rem;
  margin: 0 auto;
  border: solid 0.1rem var(--grey-light-light-color);
  background-color: #fff;
  border-radius: var(--border-radius);
}
.course-detail--list {
  padding-bottom: 4rem;
  margin-bottom: 6rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .course-detail {
    margin-left: 2rem;
    margin-right: 2rem;
    padding: 2rem 2rem 2rem;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .course-detail {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .course-detail {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}

.course-list__wrap .book-period {
  margin-bottom: 6rem;
}

.course-info {
  margin-bottom: 4rem;
}
.course-info__day {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 2rem;
}
.course-info__name {
  font-size: 2.8rem;
  color: var(--main-color);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 0.6rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .course-info__name {
    font-size: 2.2rem;
  }
}
.course-info__date {
  font-size: 1.8rem;
  text-align: center;
  color: var(--grey-color);
  line-height: 1.6;
}
.course-info__time {
  font-size: 1.8rem;
  text-align: center;
  color: var(--grey-color);
  display: block;
  flex-basis: 100%;
  line-height: 1.6;
}
.course-info__row {
  display: flex;
  margin-bottom: 2rem;
}
.course-info__people {
  margin-right: 6rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .course-info__people {
    margin-right: 4rem;
  }
}
.course-info__people p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
.course-info__people h4 {
  margin-top: -0.2rem;
  font-size: 2.8rem;
  line-height: 1.6;
  color: var(--main-color);
}
@media (min-width: 0) and (max-width: 767px) {
  .course-info__people h4 {
    font-size: 2rem;
  }
}
.course-info__location h4 {
  line-height: 1.6;
  font-size: 2.4rem;
  color: var(--main-color);
  margin-top: -0.2rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .course-info__location h4 {
    font-size: 2rem;
  }
}
.course-info__location p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
.course-info__price-wrap {
  display: flex;
  align-items: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .course-info__price-wrap {
    width: 100%;
    justify-content: space-between;
  }
}
.course-info__price {
  margin-right: 6rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .course-info__price {
    margin-right: 4rem;
  }
}
.course-info__price h4 {
  font-size: 2.4rem;
  color: var(--main-color);
  line-height: 1.6;
  margin-top: -0.2rem;
  font-weight: 700;
}
.course-info__price h4 small {
  font-size: 1.6rem;
  position: relative;
  top: -0.1rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .course-info__price h4 {
    font-size: 2rem;
  }
  .course-info__price h4 small {
    font-size: 1.2rem;
  }
}
.course-info__price p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
.course-info__btn-book.is-expired {
  background-color: var(--expired-color);
  pointer-events: none;
}

.course-intro {
  border-top: 0.1rem solid var(--grey-light-light-color);
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .course-intro {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.course-intro h4 {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.course-intro p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
.course-intro a {
  color: var(--link-blue-color);
  border-bottom: 1px solid var(--link-blue-color);
}

.teacher-profile {
  border-top: 0.1rem solid var(--grey-light-light-color);
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.teacher-profile--list {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 0) and (max-width: 767px) {
  .teacher-profile {
    padding-bottom: 2em;
  }
}
.teacher-profile__img {
  text-align: center;
  margin-bottom: 1rem;
}
.teacher-profile__img img {
  width: 10rem;
  height: 10rem;
  margin: 0 auto;
}
.teacher-profile__name {
  font-size: 2rem;
  color: var(--main-color);
  text-align: center;
  margin-bottom: 0.4rem;
}
@media (min-width: 0) and (max-width: 767px) {
  .teacher-profile__name {
    font-size: 1.6rem;
  }
}
.teacher-profile__title {
  font-size: 1.6rem;
  color: var(--grey-color);
  line-height: 1.6;
  text-align: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .teacher-profile__title {
    font-size: 1.4rem;
  }
}

.teacher-profile-detail h4 {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.teacher-profile-detail p {
  font-size: var(--default-font-size);
  color: var(--grey-color);
  line-height: 1.6;
}
.teacher-profile-detail a {
  color: var(--link-blue-color);
  border-bottom: 1px solid var(--link-blue-color);
}

.popup-ui {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: opacity 400ms ease-in-out;
  opacity: 0;
}
.popup-ui.is-active {
  opacity: 1;
  pointer-events: auto;
}
.popup-ui__btn-close {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: absolute;
  right: 0;
  transform: translate3d(0, 0, 0);
  top: -5rem;
  cursor: pointer;
}
.popup-ui__btn-close::before, .popup-ui__btn-close::after {
  content: "";
  width: 4rem;
  height: 0.1rem;
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: var(--grey-color);
}
.popup-ui__btn-close::before {
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
.popup-ui__btn-close::after {
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
.popup-ui__overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  box-sizing: border-box;
  padding: 4rem 0;
  justify-content: center;
  align-items: center;
}
@media (min-width: 0) and (max-width: 767px) {
  .popup-ui__overlay {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.popup-ui__content {
  width: 80rem;
  background-color: #fff;
  border-radius: var(--border-radius);
  padding: 2rem 0;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 5rem rgba(0, 0, 0, 0.15);
}
@media (min-width: 0) and (max-width: 767px) {
  .popup-ui__content {
    width: calc(100% - 4rem);
  }
}

.confirm {
  width: 30rem;
  background-color: #fff;
  border-radius: var(--border-radius);
  padding: 4rem 2rem;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 5rem rgba(0, 0, 0, 0.15);
}
.confirm p {
  text-align: center;
  font-size: 1.4rem;
  color: var(--grey-color);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.confirm__row {
  display: flex;
  justify-content: center;
}
.confirm__btn-cancel, .confirm__btn-confirm {
  border-radius: var(--border-radius-small);
  font-size: 1.4rem;
  color: #fff;
  width: 10rem;
  text-align: center;
  height: 4rem;
  line-height: 4rem;
  padding: 0;
  border: 0;
  margin: 0 1rem;
  transition: all 300ms ease-in-out;
}
.confirm__btn-cancel {
  background-color: var(--grey-color);
}
.confirm__btn-cancel:hover {
  background-color: var(--grey-dark-color);
}
.confirm__btn-confirm {
  background-color: var(--main-color);
}
.confirm__btn-confirm:hover {
  background-color: var(--main-dark-color);
}

div#driver-popover-item {
  display: none;
  position: absolute;
  background: #ffffff;
  color: #666666;
  margin: 0;
  padding: 15px;
  border-radius: 5px;
  min-width: 160px;
  max-width: 120px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  z-index: 1000000000;
}
div#driver-popover-item .driver-popover-tip {
  border: 5px solid #ffffff;
  content: "";
  position: absolute;
}
div#driver-popover-item .driver-popover-tip.bottom {
  bottom: -10px;
  border-top-color: #ffffff;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
div#driver-popover-item .driver-popover-tip.bottom.position-center {
  left: 49%;
}
div#driver-popover-item .driver-popover-tip.bottom.position-right {
  right: 20px;
}
div#driver-popover-item .driver-popover-tip.left {
  left: -10px;
  top: 10px;
  border-top-color: transparent;
  border-right-color: #ffffff;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
div#driver-popover-item .driver-popover-tip.left.position-center {
  top: 46%;
}
div#driver-popover-item .driver-popover-tip.left.position-bottom {
  top: auto;
  bottom: 20px;
}
div#driver-popover-item .driver-popover-tip.right {
  right: -10px;
  top: 10px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: #ffffff;
}
div#driver-popover-item .driver-popover-tip.right.position-center {
  top: 46%;
}
div#driver-popover-item .driver-popover-tip.right.position-bottom {
  top: auto;
  bottom: 20px;
}
div#driver-popover-item .driver-popover-tip.top {
  top: -10px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: #ffffff;
  border-left-color: transparent;
}
div#driver-popover-item .driver-popover-tip.top.position-center {
  left: 49%;
}
div#driver-popover-item .driver-popover-tip.top.position-right {
  right: 20px;
}
div#driver-popover-item .driver-popover-tip.mid-center {
  display: none;
}
div#driver-popover-item .driver-popover-footer {
  display: block;
  margin-top: 10px;
}
div#driver-popover-item .driver-popover-footer button {
  display: inline-block;
  padding: 8px 12px;
  text-decoration: none;
  text-shadow: none;
  color: #fff;
  font: 12px/normal sans-serif;
  cursor: pointer;
  outline: 0;
  background-color: var(--main-color);
  border-radius: 2px;
  zoom: 1;
  line-height: 1.3;
  border-radius: 4rem;
  border: 0;
}
div#driver-popover-item .driver-popover-footer button.driver-disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}
div#driver-popover-item .driver-popover-footer .driver-close-btn {
  float: left;
  display: none;
}
div#driver-popover-item .driver-popover-footer .driver-close-only-btn {
  float: right;
}
div#driver-popover-item .driver-popover-footer .driver-btn-group {
  float: right;
}
div#driver-popover-item .driver-popover-title {
  font: 19px/normal sans-serif;
  margin: 0 0 5px;
  font-weight: bold;
  display: block;
  position: relative;
  line-height: 1.5;
  zoom: 1;
  color: #364575;
}
div#driver-popover-item .driver-popover-description {
  margin-bottom: 0;
  font: 1.4rem/normal sans-serif;
  line-height: 1.5;
  color: #00b4a4;
  font-weight: normal;
  zoom: 1;
}

.driver-clearfix:before {
  content: "";
  display: table;
}

.driver-clearfix:after {
  clear: both;
  content: "";
  display: table;
}

.driver-stage-no-animation {
  transition: none !important;
  background: transparent !important;
  outline: 5000px solid rgba(0, 0, 0, 0.75);
}

div#driver-page-overlay {
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  zoom: 1;
  filter: alpha(opacity=10);
  opacity: 0.1;
  z-index: 100002 !important;
  transition: all 0.3s;
}

div#driver-highlighted-element-stage {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 300px;
  background: transparent;
  z-index: 100003 !important;
  display: none;
  border-radius: 8px;
  transition: all 0.3s;
}

.driver-highlighted-element {
  z-index: 100004 !important;
}

.driver-position-relative {
  position: relative !important;
}

.driver-fix-stacking {
  z-index: auto !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  transform-style: flat !important;
  transform-box: border-box !important;
  will-change: unset !important;
}
/*# sourceMappingURL=jim-book.css.map */