@charset "UTF-8";

span.invalid-feedback {
  color: #d82121;
}

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100vh;
  background: #F8F8F8;
}

body .section {
  padding-bottom: 300px;
}

#register .fab {
  color: white;
}

#register #google-login {
  background-color: #e13f2a;
  color: white;
}

#register #github-login {
  background-color: black;
  color: white;
}

.booking-box {
  border: 1px solid #cecece;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.booking-box p.time {
  font-size: 18px;
  font-weight: bold;
}

.booking-box p.time span {
  font-weight: normal;
  font-size: 14px;
}

.booking-box p.submit {
  text-align: right;
}

/*予約確認画面*/

.reservation-confirm h2 {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.reservation-confirm .small-text {
  font-size: 14px;
}

.reservation-confirm .meeting-box {
  border: 1px solid #d8dadb;
  margin: 15px 0;
}

.reservation-confirm .meeting-box h3.date-time {
  text-align: center;
  border-bottom: 1px solid #d8dadb;
  box-sizing: border-box;
  padding: 10px;
}

.reservation-confirm .meeting-box form {
  box-sizing: border-box;
  padding: 10px;
}

.reservation-confirm .meeting-box form input.btn {
  width: 100%;
}

.reservation-confirm .meeting-box .profile-area {
  width: 30%;
  box-sizing: border-box;
  padding: 0 10px;
}

.reservation-confirm .meeting-box .profile-area p.tutor-name {
  text-align: center;
  font-size: 14px;
}

.reservation-confirm .meeting-box .profile-area .review span {
  letter-spacing: -2px;
  font-size: 13px;
}

.reservation-confirm .meeting-box .profile-area .review span.rate {
  letter-spacing: 0;
  margin-left: 4px;
}

.reservation-confirm .meeting-box .profile-area .review p.total-comments {
  font-size: 14px;
  text-align: center;
}

.reservation-confirm .meeting-box .meeting-description {
  flex: 1;
}

.reservation-confirm .meeting-box .meeting-description h3 {
  font-weight: bold;
  margin-bottom: 7px;
  font-size: 15px;
}

.reservation-confirm .meeting-box .meeting-description p.meeting-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

/*予約完了画面*/

.d-flex.done {
  box-sizing: border-box;
  padding: 10px;
}

p.to-histories a {
  width: 100%;
}

/*予約一覧*/

p.meeting-room {
  margin-bottom: 12px;
  text-align: center;
}

p.meeting-room a {
  width: 100%;
}

.reservation-list .select-month select.custom-select {
  width: 30%;
}

.reservation-list .meeting-box form {
  padding-bottom: 0;
}

.reservation-list .meeting-box form.cancel {
  padding-top: 0;
}

.reservation-list .meeting-box form.cancel p.attention {
  font-size: 13px;
}

.meeting-description p.point {
  text-align: right;
  font-size: 18px;
}

/*お気に入り一覧*/

.favorite-list h2 {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.favorite-list .lists {
  display: flex;
  flex-wrap: wrap;
}

.favorite-list .profile-area {
  width: 31%;
  border: 1px solid #d8dadb;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  position: relative;
  margin: 1%;
}

.favorite-list .profile-area i.fa-heart {
  position: absolute;
  top: 7px;
  left: 11px;
  font-size: 20px;
  color: #5d5d5d;
}

.favorite-list .profile-area i.fa-heart.is_active {
  color: #ea5d55;
}

.favorite-list .profile-area a {
  display: block;
}

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

ul.pagination-top {
  list-style: none;
  padding: 0;
  float: right;
  margin: 10px 0;
}

ul.pagination-top li {
  display: inline-block;
  vertical-align: middle;
}

ul.pagination-top li.total_posts {
  font-size: 14px;
  margin-right: 7px;
}

ul.message-list {
  padding: 0;
  list-style: none;
}

ul.message-list li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #b9b9b9;
  background: #f1f1f1;
  box-sizing: border-box;
  padding-top: 15px;
}

ul.message-list li.read {
  background: #fff;
}

ul.message-list .excerpt,
ul.message-list .status,
ul.message-list .date {
  padding: 0 5px;
}

ul.message-list .favorite {
  padding: 0 5px;
  box-sizing: border-box;
  width: 5%;
}

ul.message-list .favorite .toggle_star.is_active {
  color: #f7ac20;
}

ul.message-list .user {
  box-sizing: border-box;
  padding: 0 12px;
  width: 20%;
}

ul.message-list .user p.mail {
  font-size: 12px;
  margin-bottom: 10px;
}

ul.message-list .status {
  padding: 0;
}

ul.message-list .excerpt {
  width: 45%;
}

ul.message-list .excerpt p {
  font-size: 14px;
}

ul.message-list .date {
  width: 20%;
  text-align: right;
  min-width: 120px;
}

ul.message-list .date p {
  font-size: 13px;
}

.message-menu {
  margin: 10px 0;
}

.message-menu li {
  border: 1px solid #ced4da;
  width: 25%;
  text-align: center;
}

.message-menu li a {
  display: block;
  box-sizing: border-box;
  padding: 7px;
  font-size: 14px;
}

.message-menu li a.current {
  color: #fff;
  background: #3373dd;
}

.message-menu li a:hover {
  background: #3373dd;
  color: #fff;
}

.message-box.show ul.message-list .slide-toggle {
  display: flex;
  align-items: center;
}

.message-box.show ul.message-list li {
  display: block;
  border: 1px solid #b9b9b9;
  margin-bottom: 1rem;
  align-items: center;
  background: #fff;
}

.message-box.show ul.message-list li.message-from {
  border: 1px solid #347ab7;
}

.message-box.show ul.message-list .excerpt {
  width: 50%;
}

.message-box.show ul.message-list .date {
  width: 25%;
  text-align: right;
  min-width: 120px;
}

.message-box.show .full-text {
  box-sizing: border-box;
  padding: 20px;
  padding-top: 0;
  font-size: 14px;
}

.padding-1px {
  padding: 1px;
}

.load-more {
  text-align: center;
  margin-top: 15px;
}

.load-more button {
  background-color: #e47f93;
  color: white !important;
}

.content-tab .title {
  text-align: center;
}

.a-tutor-section a {
  text-decoration: none !important;
}

.a-tutor-section .tutor-name {
  color: #e2677d;
}

.a-tutor-section .btn-available {
  background-color: #e47f93;
  color: white !important;
}

.a-tutor-section .btn-soild-out {
  background-color: #aba9a9;
  color: white !important;
}

.has-shadow {
  box-shadow: 0px 4px 12px #ccc !important;
}

.tutor-register {
  padding: 0px 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 44px;
  background-image: linear-gradient(to right, #FF7676, #F54EA2);
  box-shadow: 0px 5px 5px #ccc;
  color: #fff;
  margin-top: -10px;
  font-size: 16px;
  transition: 0.3s;
}

.tutor-register:hover {
  color: #fff;
  text-decoration: underline;
  opacity: 0.8;
}

.btn-login {
  padding: 0px 20px;
  height: 44px;
  line-height: 44px;
  border-radius: 10px;
  background-image: linear-gradient(to right, #FF7676, #F54EA2);
  box-shadow: 0px 5px 5px #ccc;
  color: #fff;
  font-size: 16px;
  margin-top: -10px;
  display: inline-block;
  font-weight: normal;
  transition: 0.3s;
}

.btn-login:hover {
  text-decoration: underline;
  color: #fff;
  opacity: 0.8;
}

.navbar.is-fixed-top {
  z-index: 1000;
}

.invalid {
  color: #f00;
}

.btn-register {
  padding: 0px 20px;
  height: 42px;
  line-height: 42px;
  border-radius: 10px;
  background-color: #EFEFEF;
  box-shadow: 0px 5px 5px #ccc;
  color: #FF7676;
  font-size: 16px;
  border: 1px solid #FF7676;
  margin-top: -10px;
  display: inline-block;
  font-weight: normal;
  transition: 0.3s;
}

.btn-register:hover {
  text-decoration: underline;
  color: #FF7676;
  opacity: 0.8;
}

.top-fv {
  width: 100%;
  height: 640px;
  background-image: url(/img/top_fv.jpg);
  background-position: center;
  background-size: cover;
}

.top-fv .top-container {
  width: 100%;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.top-fv .top-container img {
  width: 100%;
  max-height: 180px;
  -o-object-fit: contain;
     object-fit: contain;
}

.top-fv .top-container .btn-view {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 130px;
  border-radius: 10px;
  border: 1px solid #707070;
  height: 42px;
  line-height: 42px;
  color: #242424;
  transition: 0.3s;
}

.top-fv .top-container .btn-view:hover {
  opacity: 0.8;
}

.top-fv .top-container .buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 60px;
}

.top-fv .top-container .buttons .login-area {
  margin-left: 60px;
}

.top-fv .top-container .buttons .tutor-register {
  background-color: rgba(255, 118, 118, 0.7);
  box-shadow: 0px 0px 4px 0px #ccc;
  border: 0px;
  margin-top: 0px;
}

.top-fv .top-container .buttons .login-button {
  background-color: rgba(118, 255, 176, 0.7);
  border: 0px;
  padding: 0px 44px;
  color: #fff;
  height: 44px;
  line-height: 44px;
  border-radius: 44px;
  box-shadow: 0px 0px 4px 0px #ccc;
  font-size: 16px;
  transition: 0.3s;
}

.top-fv .top-container .buttons .login-button:hover {
  text-decoration: underline;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .top-fv .top-container img {
    width: 90%;
  }

  .top-fv .top-container .buttons {
    bottom: 0px;
    position: relative;
    margin-top: 16px;
    width: 248px;
  }

  .top-fv .top-container .buttons .login-area {
    margin-left: 0px;
    margin-top: 12px;
  }
}

.top-fv .top-users {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(61, 61, 61, 0.7);
}

.top-fv .top-users .items {
  max-width: 1260px;
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .top-fv .top-users .items {
    width: 90%;
  }
}

.top-fv .top-users .items .item {
  flex: 0 1 12%;
  height: 82px;
  position: relative;
}

.top-fv .top-users .items .item img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  -o-object-fit: cover;
     object-fit: cover;
}

.footer-link {
  color: #363636;
  margin: 0px 4px;
}

.img-border {
  box-shadow: 0px 0px 24px -12px #FF7676;
}

.btn-more {
  padding: 0px 60px !important;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  background-image: linear-gradient(to right, #FF7676, #F54EA2);
  font-weight: normal;
}

.a-tutor-favorite {
  width: 20% !important;
}

.a-tutor-favorite > a {
  display: inline-block;
  background: #fff;
  border-radius: 10px;
  padding: 0px 0px;
  width: 100%;
}

.a-tutor-favorite > a .media {
  margin: 0px;
  padding: 20px 20px 40px;
}

#history-buy-point .success {
  color: #1e9600;
}

#history-buy-point .danger {
  color: #ff3860;
}

#history-buy-point .failure {
  color: #bfbdbd;
}

.column.pages p {
  font-size: 15px;
  margin-bottom: 15px;
}

.column.pages ul {
  margin-bottom: 15px;
  padding-left: 25px;
}

.column.pages ul li {
  font-size: 15px;
  list-style: disc;
}

.user-points {
  width: auto;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 0px 10px #ccc;
  display: flex;
  margin-right: 40px;
  margin-top: 6px;
  font-weight: normal;
}

.user-points img {
  width: 40px;
  border-right: 1px solid #eee;
  height: 34px;
  padding: 4px 8px;
  -o-object-fit: contain;
     object-fit: contain;
}

.user-points .points {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  padding: 0px 32px;
}

.user-points .points span:first-child {
  font-size: 16px;
}

.user-points .points span:last-child {
  font-size: 12px;
  margin-left: 4px;
}

div#page-wrapper nav.breadcrumb {
  margin-top: 10px;
  margin-bottom: 0;
}

/*レスポンシブ*/

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  .user-points {
    display: none;
  }

  div#page-wrapper .top-search .search-box {
    left: 0;
  }

  div#page-wrapper .top-search .search-box .search-header {
    height: auto;
    margin: 0;
    box-sizing: border-box;
    padding: 20px;
  }

  div#page-wrapper .top-search {
    padding: 25px 0px 30px;
  }

  div#page-wrapper .top-fv {
    height: 500px;
  }

  div#page-wrapper .top-fv .top-container {
    height: 320px;
  }

  div#page-wrapper .top-container a.btn-view {
    display: none;
  }

  div#page-wrapper .column.is-half-mobile {
    width: 33%;
  }

  div#page-wrapper .top-search .search-box .search-header {
    flex-wrap: wrap;
  }

  div#page-wrapper .top-search .search-box .search-header .text-box {
    width: 100%;
    max-width: 100%;
    flex: auto;
    margin: 10px 0;
  }

  .navbar.is-fixed-top {
    position: absolute;
    z-index: 10000;
  }

  .top-search .search-box {
    max-width: 100%;
  }

  .top-search .top-search-label {
    max-width: 100%;
  }

  .top-search form {
    max-width: 100%;
  }

  .a-tutor-favorite {
    width: 33% !important;
  }

  div#page-wrapper .container {
    width: 100%;
    margin: 0;
    max-width: 100%;
  }

  .top-search .search-box {
    width: 100%;
    max-width: 100%;
    left: 0 !important;
  }

  .top-search .search-box .search-header {
    flex-wrap: wrap;
  }

  .navbar,
  .navbar-menu,
  .navbar-start,
  .navbar-end {
    align-items: stretch;
    display: flex;
  }

  .navbar {
    min-height: 3.25rem;
  }

  .navbar.is-spaced {
    padding: 1rem 2rem;
  }

  .navbar.is-spaced .navbar-start,
  .navbar.is-spaced .navbar-end {
    align-items: center;
  }

  .navbar.is-spaced a.navbar-item,
  .navbar.is-spaced .navbar-link {
    border-radius: 4px;
  }

  .navbar.is-transparent a.navbar-item:hover,
  .navbar.is-transparent a.navbar-item.is-active,
  .navbar.is-transparent .navbar-link:hover,
  .navbar.is-transparent .navbar-link.is-active {
    background-color: transparent !important;
  }

  .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link,
  .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
    background-color: transparent !important;
  }

  .navbar.is-transparent .navbar-dropdown a.navbar-item:hover {
    background-color: whitesmoke;
    color: #0a0a0a;
  }

  .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
    background-color: whitesmoke;
    color: #3273dc;
  }

  .navbar-burger {
    display: none;
  }

  .navbar-item,
  .navbar-link {
    align-items: center;
    display: flex;
  }

  .navbar-item {
    display: flex;
  }

  .navbar-item.has-dropdown {
    align-items: stretch;
  }

  .navbar-item.has-dropdown-up .navbar-link::after {
    transform: rotate(135deg) translate(0.25em, -0.25em);
  }

  .navbar-item.has-dropdown-up .navbar-dropdown {
    border-bottom: 2px solid #dbdbdb;
    border-radius: 6px 6px 0 0;
    border-top: none;
    bottom: 100%;
    box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1);
    top: auto;
  }

  .navbar-item.is-active .navbar-dropdown,
  .navbar-item.is-hoverable:hover .navbar-dropdown {
    display: block;
  }

  .navbar.is-spaced .navbar-item.is-active .navbar-dropdown,
  .navbar-item.is-active .navbar-dropdown.is-boxed,
  .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown,
  .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    left: auto;
    right: 0px;
  }

  .navbar-menu {
    flex-grow: 1;
    flex-shrink: 0;
  }

  .navbar-start {
    justify-content: flex-start;
    margin-right: auto;
  }

  .navbar-end {
    justify-content: flex-end;
    margin-left: auto;
  }

  .navbar-dropdown {
    background-color: white;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 2px solid #dbdbdb;
    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
    display: none;
    font-size: 0.875rem;
    left: 0;
    min-width: 100%;
    position: absolute;
    top: 100%;
    z-index: 20;
  }

  .navbar-dropdown .navbar-item {
    padding: 0.375rem 1rem;
    white-space: nowrap;
  }

  .navbar-dropdown a.navbar-item {
    padding-right: 3rem;
  }

  .navbar-dropdown a.navbar-item:hover {
    background-color: whitesmoke;
    color: #0a0a0a;
  }

  .navbar-dropdown a.navbar-item.is-active {
    background-color: whitesmoke;
    color: #3273dc;
  }

  .navbar.is-spaced .navbar-dropdown,
  .navbar-dropdown.is-boxed {
    border-radius: 6px;
    border-top: none;
    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    display: block;
    opacity: 0;
    pointer-events: none;
    top: calc(100% - 4px);
    transform: translateY(-5px);
    transition-duration: 86ms;
    transition-property: opacity, transform;
  }

  .navbar-dropdown.is-right {
    left: auto;
    right: 0;
  }

  .navbar-divider {
    display: block;
  }

  .navbar > .container .navbar-brand,
  .container > .navbar .navbar-brand {
    margin-left: -0.75rem;
  }

  .navbar > .container .navbar-menu,
  .container > .navbar .navbar-menu {
    margin-right: -0.75rem;
  }

  .navbar.is-fixed-bottom-desktop,
  .navbar.is-fixed-top-desktop {
    left: 0;
    position: fixed;
    right: 0;
    z-index: 30;
  }

  .navbar.is-fixed-bottom-desktop {
    bottom: 0;
  }

  .navbar.is-fixed-bottom-desktop.has-shadow {
    box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
  }

  .navbar.is-fixed-top-desktop {
    top: 0;
  }

  .navbar.is-fixed-top .navbar-menu,
  .navbar.is-fixed-top-touch .navbar-menu {
    overflow: visible;
    box-shadow: none;
    padding: 0px;
  }
}

@media screen and (max-width: 500px) {
  .navbar-brand {
    display: block;
    padding-top: 7px;
  }

  .navbar-brand a:last-child {
    display: none;
  }

  div#page-wrapper .top-search {
    padding: 103px 0px 30px;
  }

  div#page-wrapper .top-search .top-search-label {
    height: auto;
    padding: 20px;
    width: auto;
  }

  div#page-wrapper .top-search .top-search-label p:first-child strong {
    font-size: 30px;
    font-weight: normal;
  }

  div#page-wrapper .top-search .top-search-label p {
    font-size: 16px;
    line-height: 1.5;
  }
}

@media screen and (min-width: 768px) and (max-width: 1088px) {
  .navbar-menu.has-text-weight-bold.pc {
    top: 0px !important;
    box-shadow: none;
    padding: 0px;
    padding-top: 10px;
    background: transparent;
  }

  .navbar-menu.has-text-weight-bold.pc .navbar-end .navbar-item .navbar-link {
    display: block;
    padding: 4px;
    right: 4px;
    width: 100%;
    text-align: right;
  }

  .navbar-menu.has-text-weight-bold.pc .navbar-end .navbar-item .navbar-dropdown {
    display: none;
    background: #fff;
  }

  .navbar-menu.has-text-weight-bold.pc .navbar-end .navbar-item.is-active .navbar-dropdown {
    display: block;
  }
}

@media screen and (max-width: 414px) {
  .a-tutor-favorite {
    width: 50% !important;
  }

  button.button.is-small.is-rounded.has-text-weight-bold {
    font-size: 0.7rem;
    box-sizing: border-box;
    padding: 4px;
  }

  div#page-wrapper .top-search .search-box .search-header .select-box {
    width: 44%;
  }

  div#page-wrapper .meeting-box .review {
    display: block;
  }

  div#page-wrapper .meeting-box p.total-comments {
    display: inline;
  }

  div#page-wrapper .reservation-list .select-month select.custom-select {
    width: 40%;
  }

  div#page-wrapper .breadcrumb li {
    font-size: 12px;
  }

  div#page-wrapper .profile p.point {
    word-break: break-all;
    margin: 0;
  }

  div#page-wrapper .booking-box p {
    font-size: 16px;
  }

  div#page-wrapper .booking-box p.time {
    margin-top: 11px;
  }

  div#page-wrapper .column800 .profile {
    margin-bottom: 25px;
  }

  div#page-wrapper .tutor-rating {
    margin-bottom: 25px;
  }

  div#page-wrapper .top-search .search-box .search-area .category li {
    flex: 0 1 50%;
    padding-left: 23px;
  }

  div#page-wrapper .top-search .search-box .search-area .category li span {
    font-size: 14px !important;
  }

  div#page-wrapper .top-search .search-box .search-area .category li[data-v-1cb68be7]::before {
    width: 15px;
    height: 20px;
  }
}

@media screen and (max-width: 375px) {
  div#page-wrapper .column.is-half-mobile {
    width: 50%;
  }

  div#page-wrapper .meeting-box p.total-comments {
    display: block;
  }

  div#page-wrapper .reservation-confirm .meeting-box .profile-area .review span {
    font-size: 12px;
    display: block;
    text-align: center;
  }
}

@media screen and (max-width: 320px) {
  body .section {
    padding-bottom: 345px;
  }

  div#page-wrapper .reservation-list .select-month select.custom-select {
    width: 55%;
  }

  div#page-wrapper .reservation-confirm .meeting-box .profile-area {
    width: 40%;
  }

  div#page-wrapper .reservation-confirm .meeting-box .meeting-description h3 {
    font-size: 13px;
  }

  div#page-wrapper .reservation-confirm .meeting-box .meeting-description p.meeting-title {
    font-size: 13px;
    margin-bottom: 5px;
  }

  div#page-wrapper .section {
    padding: 1rem;
    padding-bottom: 300px;
  }

  div#page-wrapper nav.breadcrumb {
    margin: 10px 0 0;
  }

  div#page-wrapper .meeting-description {
    width: 60%;
  }
}

label.form-check-label.login-hold {
  margin-left: 20px;
}

.row:before,
.row:after {
  display: none !important;
}

@media screen and (min-width: 768px) and (max-width: 1088px) {
  .navbar-burger {
    position: absolute;
    top: 0px;
    right: 10px;
  }

  .navbar.is-fixed-top .navbar-menu,
  .navbar.is-fixed-top-touch .navbar-menu {
    position: absolute;
    right: 10px;
    top: 60px;
  }

  .navbar.is-fixed-top .navbar-menu .btn-register,
  .navbar.is-fixed-top-touch .navbar-menu .btn-register {
    margin-top: 6px;
  }

  .navbar.is-fixed-top .navbar-menu .user-points,
  .navbar.is-fixed-top-touch .navbar-menu .user-points {
    display: none;
  }
}

.badge.unread-msg {
  float: right;
  background: #FF6464;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  line-height: 1.2rem;
  font-size: 0.8rem;
  border-radius: 50%;
}

#container-form-request-cancel .field .field-label {
  min-width: 130px;
}

.text-truncate-1 {
  min-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  visibility: visible;
}

.text-truncate-2 {
  min-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  visibility: visible;
}

.text-truncate-3 {
  min-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  visibility: visible;
}

.text-truncate-4 {
  min-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  visibility: visible;
}

.livestream .meeting-description {
  padding: 10px;
}

.livestream .pagination {
  justify-content: center !important;
}

.livestream .livestream-btn {
  white-space: pre-wrap;
}

a,
button {
  transition: 0.3s !important;
}

a:hover,
button:hover {
  opacity: 0.7 !important;
}

.container {
  max-width: 1200px;
}

body {
  background-color: #fff;
  padding-top: 0 !important;
}

#page-wrapper {
  min-height: 70vh;
}

@media (max-width: 768px) {
  #page-wrapper {
    margin-top: -8px;
  }
}

.main-container {
  padding-top: 130px;
}

@media (max-width: 768px) {
  .main-container {
    padding-top: 100px;
  }
}

.top-fv {
  background-image: url(/img/front/top_fv.png);
  background-position: top left;
  padding-top: 5rem;
}

.top-fv .top-container {
  height: 100%;
  padding: 3rem 0;
}

@media (max-width: 768px) {
  .top-fv .top-container {
    height: 100% !important;
    padding: 4rem 0;
  }
}

.top-fv .top-container .top-images {
  display: flex;
  height: 100%;
  width: 100%;
  max-width: 1152px;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .top-fv .top-container .top-images {
    padding: 0 2rem;
  }
}

.top-fv .top-container .top-images a .letter {
  width: auto;
}

.top-fv .top-container .top-images .icon {
  width: 24rem;
  height: auto;
  max-height: 100%;
}

@media (max-width: 768px) {
  .top-fv .top-container .top-images .icon {
    width: 17rem;
  }
}

@media (max-width: 768px) {
  .top-fv {
    background-position-x: -10rem;
  }
}

h5 {
  font-size: 1.5rem;
  font-weight: bold;
  padding-bottom: 1rem;
  position: relative;
}

h5.has-border:after {
  position: absolute;
  width: 40px;
  bottom: 0;
  height: 5px;
  content: "";
  left: calc(50% - 20px);
  background-color: #2196F3;
}

.hidden {
  display: none !important;
}

.navbar.is-fixed-top {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  height: 4.5rem;
  background-position: bottom;
  box-shadow: none;
  border: 0;
  box-shadow: 0px 3px 6px #ccc;
}

.custom-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.custom-header > div {
  width: auto;
  height: 100%;
}

.custom-header > div:last-child {
  flex: 1;
}

.custom-header a {
  width: auto;
  margin: 0 1.5rem;
  color: #1B1A1A;
  text-decoration: none;
  height: 1rem;
  line-height: 1rem;
}

.custom-header a:hover,
.custom-header a:focus,
.custom-header a:active {
  text-decoration: none;
}

@media (min-width: 1000px) and (max-width: 1200px) {
  .custom-header a {
    margin: 0 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .custom-header a {
    margin: 0 0.5rem;
  }
}

.custom-header a img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
}

.custom-header a.logo {
  height: 6rem;
}

.custom-header a.service,
.custom-header a.contact {
  margin-top: -2rem;
}

.custom-header a.blog,
.custom-header a.faq {
  margin-top: 2rem;
}

.custom-header-btns {
  position: absolute;
  display: flex;
  top: 1.2rem;
  right: 1rem;
}

@media (min-width: 1000px) and (max-width: 1200px) {
  .custom-header-btns {
    top: 1.8rem;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .custom-header-btns {
    top: 2.2rem;
  }
}

@media (min-width: 1400px) {
  .custom-header-btns {
    right: calc(50% - 700px);
  }
}

.custom-header-btns .login img {
  width: 5rem;
  margin-right: 0.5rem;
}

@media (min-width: 768px) and (max-width: 1000px) {
  .custom-header-btns .login img {
    width: 4rem;
  }
}

.custom-header-btns .register img {
  width: 6rem;
}

@media (min-width: 768px) and (max-width: 1000px) {
  .custom-header-btns .register img {
    width: 5rem;
  }
}

@media screen and (max-width: 1088px) and (min-width: 768px) {
  .custom-header {
    overflow: hidden !important;
    background-color: transparent;
    box-shadow: none;
    position: relative !important;
    top: 0 !important;
  }
}

body {
  color: #1B1A1A;
}

.pre-wrap {
  white-space: pre-wrap;
  word-break: break-all;
}

.front-content {
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

.front-content.pink-back {
  background-image: url(/img/front/pink_bg.png);
  background-repeat: repeat;
}

.front-content.gray-back {
  background-color: #F3F3F3;
}

.front-content .img-back-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 14rem;
}

.front-content .img-back-left.bottom {
  top: auto;
  bottom: 0;
}

.front-content .img-back-left.sm {
  width: 10rem;
}

.front-content .img-back-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 14rem;
}

.front-content .img-back-right.bottom {
  top: auto;
  bottom: 0;
}

.front-content .img-back-right.sm {
  width: 10rem;
}

.front-content .img-back-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 13rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

.front-content > div {
  z-index: 10;
}

.front-content > div .top_video {
  margin: 0px 0px 20px;
  position: relative;
  width: 100%;
  padding-top: 56%;
  display: block;
}

.front-content > div .top_video iframe,
.front-content > div .top_video video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  border: 0px;
}

.front-content > div .desc-item h6 {
  font-weight: bold;
  font-size: 1.3rem;
}

.btn-md {
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0;
  min-width: 20rem;
}

@media (max-width: 768px) {
  .btn-md {
    min-width: 0;
    width: 100%;
  }
}

.btn-pink {
  background-color: #242424;
  color: #fff;
  border-color: #242424;
}

.btn-pink:hover,
.btn-pink:active,
.btn-pink:focus {
  background-color: #242424;
  border-color: #242424;
}

.btn-black {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

.btn-black:hover,
.btn-black:active,
.btn-black:focus {
  background-color: #000;
  border-color: #000;
}

.btn-blue-green {
  background-color: #309e9f;
  color: #fff;
  border-color: #309e9f;
}

.btn-blue-green:hover,
.btn-blue-green:active,
.btn-blue-green:focus {
  background-color: #309e9f;
  border-color: #309e9f;
  color: #fff;
}

.btn.has-arrow {
  position: relative;
}

.btn.has-arrow::after {
  position: absolute;
  content: ">";
  color: #fff;
  right: 1rem;
  font-size: 1rem;
  height: 100%;
  top: 0;
}

.btn-white {
  background-color: #fff;
  border-color: #D9D9D9;
  color: #0D0D0D;
}

.btn-white:hover,
.btn-white:active,
.btn-white:focus {
  background-color: #242424;
  border-color: #242424;
}

.btn-white.google,
.btn-white.line,
.btn-white.facebook {
  border-color: #BDBDBD;
  position: relative;
  line-height: 3rem;
  text-align: center;
  color: #000;
  padding: 0;
  font-size: 1rem;
  font-weight: bold;
}

.btn-white.google:before,
.btn-white.line:before,
.btn-white.facebook:before {
  position: absolute;
  content: "";
  background-image: url(/img/front/icon_google.png);
  background-size: contain;
  background-repeat: no-repeat;
  top: 0.75rem;
  left: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
}

.btn-white.line {
  color: #2EBF2D;
}

.btn-white.line:before {
  background-image: url(/img/front/icon_line.png);
}

.btn-white.facebook {
  color: #2378F2;
}

.btn-white.facebook:before {
  background-image: url(/img/front/icon_facebook.png);
}

.btn-rounded {
  border-radius: 2rem;
}

.tabs li a {
  font-weight: bold;
  font-size: 1rem;
}

.tabs li.is-active a {
  color: #313541;
}

.shadow {
  box-shadow: 0px 3px 6px #707070;
}

.top-tutor {
  background-color: #fff;
  position: relative;
  text-decoration: none;
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
}

.top-tutor:hover {
  text-decoration: none;
}

.top-tutor:hover figure .img {
  transform: scale3d(1.2, 1.2, 1.2);
}

.top-tutor figure {
  position: relative;
  width: 100%;
  padding-top: 90%;
  overflow: hidden;
}

.top-tutor figure .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.5s;
}

.top-tutor figure .favorite {
  width: 2rem;
  height: 2rem;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  top: 1rem;
  left: 1rem;
  cursor: pointer;
}

.top-tutor figure .border-bottom {
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  width: 100%;
  height: 1.2rem;
  z-index: 3;
  -o-object-position: top;
     object-position: top;
  border: none !important;
}

.top-tutor .tutor-body h6 {
  font-weight: bold;
  font-size: 1.2rem;
  padding-bottom: 0.5rem;
}

.top-tutor .tutor-body p {
  height: 9rem;
  overflow: hidden;
}

h6 {
  font-size: 1.2rem;
  font-weight: bold;
}

.top-blog-item {
  background-color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  display: block;
  color: #1B1A1A;
}

.top-blog-item:hover {
  text-decoration: none;
}

.top-blog-item:hover .image img {
  transform: scale3d(1.2, 1.2, 1.2);
}

.top-blog-item .blog-desc {
  height: 6rem;
  overflow: hidden;
}

.top-blog-item .image {
  width: 100%;
  position: relative;
  padding-top: 60%;
  overflow: hidden;
}

.top-blog-item .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.5s;
}

.top-blog-item .image .new {
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
  height: auto;
  left: auto;
}

.top-blog-item .image .play {
  position: absolute;
  top: calc(50% - 20px);
  width: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  height: 40px;
  left: calc(50% - 20px);
}

.top-blog-item .image .live {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: inline-block;
  font-size: 0.8rem;
  padding: 0 1rem;
  line-height: 1.5rem;
  height: 1.5rem;
  background-color: #f00;
  color: #fff;
}

.top-blog-item .image .future {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: inline-block;
  font-size: 0.8rem;
  padding: 0 1rem;
  line-height: 2rem;
  height: 2rem;
  background-color: #FF6AC0;
  color: #fff;
}

.top-blog-item .blog-item-content h6 {
  max-height: 3rem;
  line-height: 1.5rem;
  overflow: hidden;
}

.top-blog-item .blog-item-content > p:last-child {
  font-size: 1rem;
  line-height: 1.2rem;
  height: 4.8rem;
  overflow: hidden;
}

.top-blog-item .blog-item-content .tags {
  max-height: 2.5rem;
  overflow: hidden;
}

.top-blog-item .blog-item-content .tags > p {
  background-color: #E2E2E2;
  border-radius: 0.5rem;
  padding: 0.25rem 0.4rem;
  display: inline-block;
}

.top-blog-item .blog-item-content .tags > p i {
  color: #242424;
  margin-right: 0.5rem;
}

.top-blog-item .blog-item-content .tags > p span {
  font-size: 0.8rem;
}

.faq-card {
  background-color: transparent;
  border: 0px solid transparent;
  box-shadow: none;
  box-shadow: 0px 3px 6px #707070;
  margin-bottom: 1.25rem;
}

.faq-card .card-header {
  cursor: pointer;
  background-color: #fff;
  font-weight: bold;
  border: 0px;
  color: #000;
  box-shadow: none;
}

.faq-card .card-header p {
  flex: 1;
}

.faq-card .card-header img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}

.new-page {
  background-color: #fff;
  position: relative;
}

@media (max-width: 768px) {
  .new-page {
    margin-top: 0;
  }
}

.new-page .new-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.new-page .new-page-header .new-page-title {
  width: 100%;
  color: #313541;
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.25rem;
  margin-top: 1.5rem;
}

.new-page .new-page-header .new-page-breadcrumb {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.8rem;
}

.new-page .new-page-top {
  width: auto;
  min-width: 180px;
  height: 180px;
  background-color: #242424;
  position: absolute;
  top: -90px;
  left: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 25px;
}

@media (max-width: 768px) {
  .new-page .new-page-top {
    display: none;
  }
}

.new-page .new-page-top p {
  margin: 0;
  width: 100%;
  display: inline-block;
}

.new-page .new-page-top p:first-child {
  color: #86724A;
  font-size: 1.5rem;
  line-height: 2rem;
  height: 2rem;
  overflow: hidden;
}

.new-page .new-page-top p:last-child {
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
}

.new-page .new-page-content {
  margin-top: 7rem;
}

@media (max-width: 768px) {
  .new-page .new-page-content {
    margin-top: 0;
  }
}

.footer-left {
  width: 30%;
  text-align: left;
}

.footer-left label {
  color: #fff;
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .footer-left {
    width: 100%;
  }
}

.footer-menus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.footer-menus a {
  color: #BCBCBC;
  font-size: 1rem;
  margin: 0 2rem;
}

@media (max-width: 768px) {
  .footer-menus a {
    margin: 0 0.5rem;
  }
}

@media (max-width: 768px) {
  .footer-menus {
    display: block;
    text-align: center;
  }

  .footer-menus a {
    display: block;
    margin-bottom: 10px;
  }
}

.footer .copyright {
  background-color: #171717;
  color: #fff;
  font-size: 0.8rem;
  height: 3rem;
  line-height: 3rem;
  border-top: 1px solid #707070;
}

.footer {
  padding: 2rem 0 0;
  background-color: #242424;
  color: #BCBCBC;
}

.sp-header {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0px 3px 6px #ccc;
  height: 4rem;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  top: -0.2rem;
  position: fixed;
  z-index: 100;
  left: -1rem;
  width: calc(100% + 2rem);
  margin: 0;
  padding: 1rem 1.5rem;
}

.sp-header .menu {
  top: 1.5rem;
  position: absolute;
  z-index: 102;
}

.sp-header .logos {
  position: relative;
  height: 100%;
}

.sp-header .logos a {
  height: 100%;
  width: 50%;
}

.sp-header .logos a img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}

.sp-header-open {
  transition: 0.3s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
}

.sp-header-open .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1001;
}

.sp-header-open .menus {
  position: absolute;
  display: block;
  background-color: #fff;
  box-shadow: 0px 3px 6px #707070;
  top: 0;
  left: 0;
  width: 85%;
  height: 100vh;
  z-index: 1002;
}

.sp-header-open .menus .line-1 {
  position: relative;
  height: 4rem;
}

.sp-header-open .menus .line-1 p {
  color: #1B1A1A;
  font-size: 1.2rem;
  font-weight: bold;
}

.sp-header-open .menus .line-1 > span {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.7rem;
  cursor: pointer;
}

.sp-header-open .menus .line-2 {
  width: 100%;
}

.sp-header-open .menus .line-2 .sp-btn {
  border-radius: 0.5rem;
  display: block;
  text-align: center;
  border: 1px solid #1B1A1A;
  color: #313541;
  display: inline-block;
  flex: 1;
}

.sp-header-open .menus .line-2 .sp-btn:hover {
  text-decoration: none;
}

.sp-header-open .menus .line-2 .sp-btn i {
  color: #1B1A1A;
}

.sp-header-open .menus .line-2 .sp-btn.full {
  background-color: #fff;
  width: 100%;
}

.sp-header-open .menus .menu-item {
  color: #313541;
  text-align: center;
}

.sp-header-open .menus .menu-item:hover {
  text-decoration: none;
}

.sp-header-open .menus .menu-item img {
  height: 2rem;
  width: 2rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.sp-header-open .menus .menu-item span {
  width: 100%;
  text-align: center;
}

.breadcrumbs {
  font-size: 0.8rem;
}

.breadcrumbs a {
  display: inline-block;
  position: relative;
  padding-right: 20px;
  color: #000;
}

.breadcrumbs a:hover {
  text-decoration: none;
}

.breadcrumbs a:after {
  position: absolute;
  content: ">";
  right: 5px;
}

.no-decoration {
  text-decoration: none;
}

.no-decoration:hover,
.no-decoration:focus,
.no-decoration:active {
  text-decoration: none;
}

.page-content,
.page-content * {
  color: #000;
}

.student-tutor-content {
  padding: 120px 0 3rem;
}

.student-tutor-content .categories {
  display: flex;
  flex-wrap: wrap;
}

.student-tutor-content .categories .category-item {
  display: inline-block;
  padding: 0 1.5rem;
  border-radius: 0.75rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.8rem;
  background-color: #EEEEEE;
  text-align: center;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

.student-tutor-content .categories .category-item:hover {
  text-decoration: none;
}

@media (max-width: 768px) {
  .student-tutor-content .content-box {
    display: flex;
    flex-direction: row-reverse;
  }
}

.student-tutor-content .content-box .tutor-image {
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}

.student-tutor-content .content-box .tutor-image .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.student-tutor-content .content-box .tutor-image .slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.student-tutor-content .content-box .tutor-image .slideshow .slide-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.student-tutor-content .content-box .tutor-image .slideshow .carousel--slidable {
  display: block;
  width: 100%;
  height: 100%;
}

.student-tutor-content .content-box .tutor-image .slideshow .carousel--slidable .carousel__list {
  height: 100%;
}

.student-tutor-content .content-box .tutor-image .slideshow .carousel--slidable .carousel__list li {
  height: 100%;
}

.student-tutor-content .content-box .tutor-image .slideshow .carousel--slidable .carousel__control {
  background-color: #fff;
  color: #666666;
  box-shadow: 0px 3px 6px #707070;
  opacity: 1;
}

.student-tutor-content .content-box .tutor-image .slideshow .carousel--slidable .carousel__control.carousel__control--prev:before {
  border-bottom-color: #666666;
  border-left-color: #666666;
}

.student-tutor-content .content-box .tutor-image .slideshow .carousel--slidable .carousel__control.carousel__control--next:before {
  border-top-color: #666666;
  border-right-color: #666666;
}

.student-tutor-content .content-box .tutor-image .social-box {
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  height: 3.5rem;
  padding: 0.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.student-tutor-content .content-box .tutor-image .social-box a:nth-child(2) {
  margin-left: 1rem;
}

.student-tutor-content .content-box .tutor-image .social-box a img {
  width: 2.5rem;
  height: 2.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.student-tutor-content .content-box .favorite-box {
  display: flex;
}

.student-tutor-content .content-box .favorite-box .favorite {
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.5rem;
  text-align: center;
  height: 100%;
  flex: 1;
}

.student-tutor-content .content-box .favorite-box .favorite .title {
  font-weight: bold;
  font-size: 1rem;
}

.student-tutor-content .content-box .favorite-box .favorite .value {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
}

.student-tutor-content .content-box .favorite-box .favorite .value i {
  color: #f00;
}

.student-tutor-content .content-box .favorite-box .favorite .review {
  display: block;
  margin: 0;
}

.student-tutor-content .content-box .favorite-box .favorite .review .stars {
  color: #FCC841;
}

.student-tutor-content .content-box .favorite-box .favorite .review .total-comments {
  font-size: 0.8rem;
}

.student-tutor-content .content-box .favorite-box .action-btn {
  flex: 1;
}

.student-tutor-content .content-box .favorite-box .action-btn .favorite-btn {
  height: 2.5rem;
  width: 100%;
  display: inline-block;
  text-align: center;
  background-color: #242424;
  color: #fff;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  line-height: 2.5rem;
  text-decoration: none;
  border: none !important;
}

.student-tutor-content .content-box .favorite-box .action-btn .favorite-btn:hover {
  text-decoration: none;
}

.student-tutor-content .content-box .favorite-box .action-btn .favorite-btn i {
  color: #f00;
  font-size: 1rem;
}

.student-tutor-content .content-box .favorite-box .action-btn .blog-btn {
  height: 2.5rem;
  width: 100%;
  display: inline-block;
  text-align: center;
  background-color: #fff;
  color: #000;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  line-height: 2.5rem;
  text-decoration: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.student-tutor-content .content-box .favorite-box .action-btn .blog-btn:hover {
  text-decoration: none;
}

.student-tutor-content .content-box .favorite-box .action-btn .blog-btn span {
  color: #000;
}

.tutor-profile-content .tabs {
  display: flex;
  border-bottom: 0.4rem solid #242424;
}

.tutor-profile-content .tabs .btn-tabs {
  height: 3.75rem;
  display: inline-block;
  flex: 1;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-color: #fff;
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 3.75rem;
  border: 0;
  cursor: pointer;
  transition: 0.3s;
}

.tutor-profile-content .tabs .btn-tabs:hover {
  opacity: 0.7;
}

.tutor-profile-content .tabs .btn-tabs.active {
  background-color: #242424;
  color: #fff;
}

.tutor-profile-content .tab-content {
  padding: 0 3rem;
}

@media (max-width: 768px) {
  .tutor-profile-content .tab-content {
    padding: 0;
  }
}

.tutor-profile-content .tab-content .tutor-profile-schedule-dates {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.tutor-profile-content .tab-content .tutor-profile-schedule-dates div {
  flex: 0 1 32%;
  border-radius: 0.25rem;
  cursor: pointer;
  border: 2px solid #242424;
  background-color: #fff;
  color: #242424;
  height: 4rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5rem;
  transition: 0.3s;
  margin-right: 0.5rem;
  position: relative;
}

@media (max-width: 768px) {
  .tutor-profile-content .tab-content .tutor-profile-schedule-dates div {
    flex: 0 1 100%;
    margin-right: 0;
  }
}

.tutor-profile-content .tab-content .tutor-profile-schedule-dates div:hover {
  opacity: 0.7;
}

.tutor-profile-content .tab-content .tutor-profile-schedule-dates div.active {
  color: #fff;
  background-color: #242424;
}

.tutor-profile-content .tab-content .tutor-profile-schedule-dates div > p:first-child {
  line-height: 3.8rem;
}

.tutor-profile-content .tab-content .tutor-profile-schedule-dates div .price {
  font-size: 0.8rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

.tutor-profile-content .tab-content .tutor-profile-schedule-dates div .price span {
  font-size: 0.6rem;
}

.btn-red {
  background-color: #D9534F !important;
  border-color: #D9534F !important;
}

.btn-light-red {
  background-color: #E74C3C !important;
  border-color: #E74C3C !important;
}

.btn-purple {
  background-color: #5E6BC5 !important;
  border-color: #5E6BC5 !important;
  color: #fff !important;
}

.btn-light-pink {
  background-color: #F78CCE !important;
  border-color: #F78CCE !important;
  color: #fff !important;
}

.btn-light-green {
  background-color: #5EC595 !important;
  border-color: #5EC595 !important;
}

.btn-pink {
  background-color: #242424 !important;
  border-color: #242424 !important;
}

.btn-dark-gold {
  background-color: #C5B2A2 !important;
  border-color: #C5B2A2 !important;
}

.tutor-rating .not-review {
  margin-top: 10px;
  font-size: 12px;
}

.tutor-rating-form {
  margin-top: 10px;
}

.tutor-rating-form #close-review-box {
  margin-right: 10px;
}

.tutor-rating-form .validate-msg p {
  text-align: center;
  margin-bottom: 10px;
  color: red;
  font-weight: bolder;
}

.tutor-rating-form .animated {
  transition: height 0.2s;
}

.tutor-rating-form .rating-stars {
  margin-top: 10px;
  margin-bottom: 10px;
}

.tutor-rating-form .rating-stars ul {
  list-style-type: none;
  padding: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.tutor-rating-form .rating-stars ul li {
  cursor: pointer;
}

.tutor-rating-form .rating-stars ul > li.star {
  display: inline-block;
}

.tutor-rating-form .rating-stars ul > li.star > i.fa {
  font-size: 23px;
  color: #ccc;
}

.tutor-rating-form .rating-stars ul > li.star.hover > i.fa {
  color: #f1ca2a;
}

.tutor-rating-form .rating-stars ul > li.star.selected > i.fa {
  color: #f1ca2a;
}

.rating-content {
  padding: 30px;
  border: 3px solid #f1f1f1;
  margin-left: auto;
  margin-right: auto;
  background: white;
}

.rating-content .heading {
  font-size: 25px;
  margin-right: 25px;
}

.rating-content .fa,
.rating-content .far {
  font-size: 20px;
  color: #f1ca2a;
}

.rating-content .checked {
  color: #f1ca2a;
}

.rating-content .side {
  float: left;
  width: 12%;
  margin-top: 10px;
}

.rating-content .side .fa {
  font-size: 14px;
}

.rating-content .middle {
  margin-top: 17px;
  float: left;
  width: 70%;
}

.rating-content .right {
  text-align: right;
}

.rating-content .row:after {
  content: "";
  display: table;
  clear: both;
}

.rating-content .bar-container {
  width: 100%;
  background-color: #f1f1f1;
  text-align: center;
  color: white;
}

.rating-content .bar-5,
.rating-content .bar-4,
.rating-content .bar-3,
.rating-content .bar-2,
.rating-content .bar-1 {
  width: 100%;
  height: 14px;
  border-radius: 7px;
}

.rating-content .bar-5 {
  background-color: #56C596;
}

.rating-content .bar-4 {
  background-color: #2196F3;
}

.rating-content .bar-3 {
  background-color: #00bcd4;
}

.rating-content .bar-2 {
  background-color: #ff9800;
}

.rating-content .bar-1 {
  background-color: #f44336;
}

.blog-item {
  text-decoration: none;
  border-radius: 0.5rem;
  overflow: hidden;
}

.blog-item:hover {
  text-decoration: none;
}

.blog-item .blog-item-content {
  padding: 1rem;
  background-color: #fff;
  text-decoration: none;
}

.blog-item .blog-item-content .line1 {
  display: flex;
}

.blog-item .blog-item-content .line1 .category {
  height: 1.2rem;
  padding: 0 0.75rem;
  line-height: 1.2rem;
  color: #fff;
  background-color: #6FB43F;
  margin-right: 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  text-align: center;
}

.blog-item .blog-item-content .line1 .date {
  line-height: 1.2rem;
  height: 1.2rem;
  flex: 1;
  font-size: 1rem;
}

.blog-item .blog-item-content .title {
  height: 3.6rem;
  font-size: 1rem;
  line-height: 1.2rem;
  overflow: hidden;
}

.blog-item .blog-item-content .line2 {
  display: flex;
}

.blog-item .blog-item-content .line2 p {
  height: 2rem;
  line-height: 2rem;
  font-size: 1rem;
  margin: 0;
}

.blog-show-title .title-badge {
  height: 2rem;
  line-height: 2rem;
  font-size: 0.8rem;
  background-color: #F6F6F6;
  border: 1px solid #A6ACB3;
  color: #9BA1A8;
  display: inline-block;
  padding: 0 0.75rem;
  border-radius: 0.25rem;
}

@media (max-width: 768px) {
  .blog-show-title .title-badge {
    font-size: 3.5vw;
  }
}

.red {
  color: #E74C3C;
}

.border-radius-4 {
  border-radius: 0.25rem;
}

.blog-show-video {
  position: relative;
  width: 100%;
  padding-top: 56%;
  display: block;
}

.blog-show-video iframe,
.blog-show-video video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  border: 0px;
}

.border-top {
  border-top: 1px solid #D9DBDD;
}

.blog-prev,
.blog-next {
  padding: 0.5rem 1rem;
  border: 1px solid #A6ACB3;
  background-color: #F6F6F6;
  color: #9BA1A8;
  height: 2.5rem;
  line-height: 1.5rem;
  border-radius: 0.25rem;
  display: inline-block;
}

.blog-prev.active,
.blog-next.active {
  color: #2F3C4E;
}

@media (max-width: 768px) {
  .blog-prev,
  .blog-next {
    font-size: 3.5vw;
  }
}

.blog-prev span {
  border-left: 1px solid #A6ACB3;
}

.blog-next span {
  border-right: 1px solid #A6ACB3;
}

.blog-right-title {
  display: flex;
}

.blog-right-title p {
  margin: 0;
  display: inline-block;
  width: 1.5rem;
  width: 100%;
  color: #7A7A7A;
}

.blog-right-title p span {
  height: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #000;
  width: 100%;
  position: relative;
  padding-bottom: 0.25rem;
}

.blog-right-title p span:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2rem;
  height: 2px;
  background-color: #E182A8;
}

.text-gray {
  background-color: #F6F6F6;
  font-size: 0.8rem;
}

.blog-category-item {
  display: block;
  font-size: 1rem;
  height: 2rem;
  line-height: 2rem;
  color: #6D7683;
  padding-right: 1rem;
  border-bottom: 1px solid #ECEDEE;
  position: relative;
}

.blog-category-item:after {
  content: ">";
  position: absolute;
  color: #313541;
  font-size: 0.8rem;
  top: 0;
  right: 0.4rem;
}

.blog-category-item:hover {
  color: #242424;
}

.blog-top-item {
  padding: 1rem 0;
  display: flex;
  border-bottom: 1px solid #ECEDEE;
  align-items: center;
}

.blog-top-item .blog-top-item-content {
  flex: 1;
  display: block;
  margin-left: 1rem;
}

.blog-top-item .blog-top-item-content .author,
.blog-top-item .blog-top-item-content .date {
  font-size: 0.8rem;
}

.blog-top-item .blog-top-item-content .views {
  font-size: 0.7rem;
}

.has-scale:hover .image img {
  transform: scale3d(1.2, 1.2, 1.2);
}

.blog-tag-item {
  display: inline-block;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.8rem;
  padding: 0 1rem;
  border-radius: 0.75rem;
  background-color: #EEE;
  color: #000;
}

.ch-50 {
  height: 3rem;
  line-height: 3rem;
}

.ch-40 {
  height: 2.5rem;
  line-height: 2.5rem;
}

.ch-60 {
  height: 3.75rem;
}

.fs-sm {
  font-size: 0.8rem;
}

.fs-xs {
  font-size: 0.7rem;
}

.fs-lg {
  font-size: 1.5rem !important;
}

.fs-xl {
  font-size: 2rem !important;
}

.normal {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.btn-signout {
  border: 0;
  background-color: transparent;
  color: #242424;
  font-size: 1rem;
  font-weight: bold;
}

.required-badge {
  border-radius: 0.25rem;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.8rem;
  color: #fff;
  padding: 0 1rem;
  background-color: #FF6464;
  display: inline-block;
}

.txtError {
  color: #dc3545;
  font-size: 0.7rem;
}

.mypage-title {
  font-size: 1.5rem;
  padding-left: 1rem;
  position: relative;
  height: 2rem;
  line-height: 2rem;
}

.mypage-title:before {
  position: absolute;
  content: "";
  width: 4px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
}

.mypage-profile {
  border-bottom: 1px solid #E1E1E1;
}

.mypage-profile .label {
  height: 4rem;
  background-color: #242424;
  color: #fff;
  border-radius: 0;
}

.mypage-profile .text {
  height: 4rem;
  background-color: #fff;
  color: #53382E;
  border-radius: 0;
}

.profile-image-picker {
  padding: 20px;
  border: 1px dotted #ccc;
}

.tutor-thumb-image {
  width: 100%;
  padding-top: 100%;
  position: relative;
  margin-bottom: 10px;
  max-width: 300px;
}

.tutor-thumb-image img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.tutor-thumb-image img.obj-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.card-subtitle {
  background-color: #F2F2F2;
  padding: 1rem;
  width: 100%;
}

.card-subtitle span {
  font-weight: bold;
  font-size: 0.8rem;
  padding-left: 0.5rem;
  position: relative;
  line-height: 1.2rem;
  height: 1.2rem;
  display: inline-block;
}

.card-subtitle span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.25rem;
  height: 100%;
  background-color: #C8AB7A;
}

.black {
  color: #000;
}

.border-bottom-gray-color {
  border-bottom: 1px solid #707070;
}

.question-box {
  width: 100%;
}

.question-box .question-title {
  background-color: #F2F2F2;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  padding: 0.5rem 1rem;
  line-height: 1.5rem;
  border-bottom: 1px solid #707070;
}

.question-box .question-title .required-question {
  background-color: #D85B7D;
  color: #fff;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: normal;
  padding: 0 0.5rem;
  height: 1.2rem;
  line-height: 1.2rem;
  display: inline-block;
  min-width: 3rem;
  text-align: center;
}

.question-box .answer-box {
  border-bottom: 1px solid #707070;
  background-color: #fff;
}

.question-box .answer-box .multi-check {
  background-color: #2378F2;
  color: #fff;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: normal;
  padding: 0 0.5rem;
  height: 1.2rem;
  line-height: 1.2rem;
  display: inline-block;
}

.question-box .answer-box .answer-item {
  flex: 1;
  margin-right: 0.5rem;
  display: inline-block;
  font-size: 1rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 0.25rem;
  border: 1px solid #707070;
  color: #707070;
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
}

.question-box .answer-box .answer-item:hover {
  opacity: 0.7;
}

.question-box .answer-box .answer-item.active {
  background-color: #2F9E9F;
  color: #fff;
}

@media (max-width: 768px) {
  .question-box .answer-box .answer-item {
    flex: 0 1 100%;
    height: auto;
  }
}

.question-box .answer-box .card-header {
  padding: 0.5rem 1rem;
  background-color: #F2F2F2;
  color: #000;
}

@media (max-width: 768px) {
  .sp-flex-wrap {
    flex-wrap: wrap;
  }
}

.cw-60 {
  width: 5.75rem;
}

.badge.badge-reserved {
  background-color: #D84288;
  color: #fff;
}

.badge.badge-created {
  background-color: #B3B3B3;
  color: #fff;
}

.badge.badge-finished {
  background-color: #242424;
  color: #fff;
}

.badge.badge-cancelled,
.badge.badge-rejected {
  background-color: #B3B3B3;
  color: #fff;
}

.modal-open .modal {
  z-index: 2000;
  overflow: hidden;
}

.flex-1 {
  flex: 1;
}

.text-bold {
  font-weight: bold;
}

.review-modal {
  position: relative;
}

.review-modal h4 {
  font-size: 1.3rem;
}

.review-modal .btn-light-pink {
  min-width: 200px;
}

.has-cursor {
  cursor: pointer;
}

.swal2-container {
  z-index: 10000 !important;
}

textarea {
  resize: none;
}

.order-item .card-header {
  background-color: #F6F6F6;
  color: #656565;
  font-size: 0.8rem;
}

.top-label {
  font-size: 3rem;
  color: #000;
  line-height: 3.5rem;
}

@media (max-width: 768px) {
  .top-label {
    font-size: 6vw;
    line-height: 9vw;
  }
}

.top-label-news {
  font-size: 2rem;
  color: #000;
  letter-spacing: 2rem;
  font-weight: bold;
}

@media (max-width: 768px) {
  .top-label-news {
    font-size: 6vw;
    letter-spacing: 2vw;
  }
}

.color-red {
  color: #f00;
}

.color-light-gray {
  color: #494848;
}

.color-dark-gold {
  color: #C5B2A2;
}

.color-black {
  color: #000;
}

.color-lightest-gray {
  color: #9F9F9F;
}

.custom-checkbox {
  display: block;
  position: relative;
  padding-left: 1.3rem;
  cursor: pointer;
  font-size: 0.75rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1rem;
  width: 1rem;
  background-color: #fff;
  border: 1px solid #ccc;
}

/* On mouse-over, add a grey background color */

.custom-checkbox:hover input ~ .checkmark {
  background-color: #fff;
}

/* When the checkbox is checked, add a blue background */

.custom-checkbox input:checked ~ .checkmark {
  background-color: #E0E0E0;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */

.custom-checkbox .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .mypage-image {
    display: block !important;
    text-align: right;
  }

  .mypage-image .image {
    margin: auto;
    margin-bottom: 1rem;
  }
}

.tax {
  font-size: 0.7rem !important;
  margin-left: 0.25rem !important;
  color: #f00 !important;
}

@media (max-width: 768px) {
  .tabs ul {
    width: 100%;
  }

  .tabs ul .tutor-category {
    margin: 0 !important;
  }
}

.top-bread {
  font-size: 0.8rem;
  padding-left: 3rem;
  position: relative;
}

.top-bread:before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 1px;
  background-color: #1B1A1A;
  top: 0.5rem;
  left: 0;
}

@media (max-width: 768px) {
  .top-bread {
    padding: 0 !important;
    font-size: 7vw;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    flex-wrap: nowrap;
  }

  .top-bread:before {
    display: none;
  }

  .top-bread span {
    margin: 0 6vw;
  }

  .top-bread .line {
    flex: 1;
    height: 2px;
    background-color: #242424;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .text-about-desc {
    padding: 0;
    text-align: center !important;
  }
}

.top-system-desc {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .top-system-desc {
    font-size: 4vw;
  }
}

.top-kv--pc .top-kv-right__center {
  white-space: pre-wrap;
  display: flex;
  align-items: center;
  padding: 0 4rem;
  font-size: 5rem;
  line-height: 6rem;
}

@media (min-width: 768px) and (max-width: 1000px) {
  .top-kv--pc .top-kv-right__center {
    padding: 0 2rem;
  }
}

.top-kv--pc .top-kv__right {
  position: relative;
}

.top-kv--pc .top-kv__right .top-kv-button {
  position: absolute;
  right: 4rem;
  bottom: 30%;
  color: #fff;
  background: #1b1b1b;
  padding: 1rem 1.5rem;
}

.top-kv--pc .top-kv__right .top-kv-button:hover,
.top-kv--pc .top-kv__right .top-kv-button:focus {
  text-decoration: none;
}

@media (min-width: 768px) and (max-width: 1000px) {
  .top-kv--pc .top-kv__right .top-kv-button {
    right: 2rem;
    padding: 0.5rem 1rem;
  }
}

.top-bottom-btns a {
  min-width: 10rem;
}

.top-bottom-btns a:first-child {
  margin-right: 1rem;
}

@media (max-width: 768px) {
  .top-bottom-btns a:first-child {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

.top-categories {
  width: 100%;
  max-width: 28rem;
  left: auto;
  right: 20rem;
  padding: 1rem;
  margin-top: 0;
  border: 0;
  top: 72px;
  z-index: 1000;
}

@media (min-width: 1000px) and (max-width: 1200px) {
  .top-categories {
    right: 16rem;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .top-categories {
    right: 12rem;
    position: fixed;
  }
}

.top-categories.auth {
  right: 14rem;
}

@media (min-width: 1000px) and (max-width: 1200px) {
  .top-categories.auth {
    right: 10rem;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .top-categories.auth {
    right: 7rem;
  }
}

.top-categories > p {
  font-size: 1.5rem;
}

.top-categories .category-items {
  display: flex;
  flex-wrap: wrap;
}

.top-categories .category-items a {
  background-color: #F2F2F3;
  border-radius: 0.25rem;
  padding: 0 1rem;
  margin: 0 0.25rem 0.25rem 0;
  font-size: 0.8rem;
  height: 1.5rem;
  line-height: 1.5rem;
}

@media (max-width: 768px) {
  .top-categories {
    right: auto;
    top: 340px;
    width: 90%;
    left: 5%;
    padding: 3vw;
  }

  .top-categories > p {
    font-size: 5vw;
  }

  .top-categories .category-items a {
    color: #242424;
    text-decoration: none;
    font-size: 3.5vw;
    height: 5vw;
    line-height: 5vw;
    padding: 0 3vw;
  }
}

.no-shadow {
  box-shadow: none;
  border: 0;
}

.livestream-tutor-categories {
  display: flex;
  flex-wrap: wrap;
}

.livestream-tutor-categories span {
  font-size: 0.8rem;
  height: 1.4rem;
  line-height: 1.4rem;
  padding: 0 1rem;
  border-radius: 0.7rem;
  background-color: #EEEEEE;
  color: #000;
  margin: 0 0.4rem 0.4rem 0;
}

.blog-time {
  color: #E182A8;
  font-size: 0.8rem;
}

.notification-day {
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: 0.25rem;
}

.card-element {
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 8px;
}

@media (max-width: 768px) {
  .home-livestreams > div:nth-child(5),
  .home-livestreams > div:nth-child(6),
  .home-livestreams > div:nth-child(7),
  .home-livestreams > div:nth-child(8),
  .home-tutors > div:nth-child(5),
  .home-tutors > div:nth-child(6),
  .home-tutors > div:nth-child(7),
  .home-tutors > div:nth-child(8) {
    display: none;
  }
}

.card-categories {
  display: flex;
  flex-wrap: wrap;
  height: 28px;
  overflow: hidden;
}

.card-categories .card-category {
  background-color: #eee;
  color: #2E2F31;
  font-size: 0.75rem;
  padding: 0.5rem;
  border-radius: 1rem;
  line-height: 0.8rem;
}

.top-fvs {
  position: relative;
  margin-top: 4.5rem;
}

@media (max-width: 768px) {
  .top-fvs {
    margin-top: 4rem;
  }
}

.top-fvs .top-slides {
  width: 100%;
  height: 520px;
}

.top-fvs .top-slides .top-slide-item {
  position: relative;
  width: 100%;
  padding-top: 520px;
}

.top-fvs .top-slides .top-slide-item img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  top: 0;
  left: 0;
  -o-object-position: top;
     object-position: top;
}

@media (max-width: 768px) {
  .top-fvs .top-slides {
    height: 50vh;
  }

  .top-fvs .top-slides .top-slide-item {
    padding-top: 50vh;
  }
}

.image {
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
  height: 0;
}

.image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.image.img-scale img {
  transition: 0.3s;
}

.image.img-scale img:hover {
  transform: scale3d(1.2, 1.2, 1.2);
}

.image.img-32 {
  width: 2rem;
  padding-top: 2rem;
}

.image.img-48 {
  width: 3rem;
  padding-top: 3rem;
}

.image.img-60 {
  width: 60px;
  padding-top: 60px;
}

.image.img-100 {
  width: 100px;
  padding-top: 100px;
}

.image.img-120 {
  width: 120px;
  padding-top: 120px;
}

.image.img-200 {
  width: 200px;
  padding-top: 200px;
}

.image.img-300 {
  width: 300px;
  padding-top: 300px;
  max-width: 100%;
}

@media (max-width: 768px) {
  .image.img-300 {
    width: 100%;
    padding-top: 100%;
  }
}

.image.img-full {
  width: 100%;
  padding-top: 100%;
}

.image.img-border {
  border: 1px solid #ccc;
}

.image.img-border-2 {
  border: 2px solid #fff;
}

.image.img-rounded {
  border-radius: 50%;
}

.tax {
  font-size: 0.7rem;
  margin-left: 0.25rem;
  color: #f00;
}

.flex-1 {
  flex: 1;
}

ul.custom.pagination {
  justify-content: center;
}

ul.custom.pagination .page-item {
  margin: 0 0.4rem;
}

ul.custom.pagination .page-item span,
ul.custom.pagination .page-item a {
  border-radius: 100%;
  color: #000;
  border: 1px solid #707070;
  width: 38px;
  height: 38px;
  padding: 0;
  line-height: 38px;
  font-size: 0.9rem;
  text-align: center;
}

ul.custom.pagination .page-item span.last,
ul.custom.pagination .page-item a.last {
  border: 0px;
}

ul.custom.pagination .page-item.active span {
  background-color: #FFE4E1;
  border: 0px;
}

ul.custom.pagination .page-item .page-link.last {
  background-color: transparent;
  width: auto;
}

.table-striped td {
  min-width: 120px;
}

.fc-theme-standard td,
.fc-theme-standard th {
  background-color: #fff;
}

.fc-icon-chevron-right {
  width: 3rem !important;
  font-size: 0.8rem !important;
  background-color: transparent !important;
}

.fc-icon-chevron-right:before {
  content: "\7FCC\6708\E901" !important;
}

.fc-icon-chevron-left {
  width: 3rem !important;
  font-size: 0.8rem !important;
  background-color: transparent !important;
}

.fc-icon-chevron-left:before {
  content: "\E900\524D\6708" !important;
}

.fc .fc-button-primary {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #000 !important;
}

th.fc-day-sun,
th.fc-day-mon,
th.fc-day-tue,
th.fc-day-wed,
th.fc-day-thu,
th.fc-day-fri,
th.fc-day-sat {
  padding: 0.5rem !important;
  background-color: #EFEFEF !important;
  color: #000 !important;
}

th.fc-day-sun {
  background-color: #FFE4E1 !important;
}

td.fc-day-today {
  background-color: #FFE4E1 !important;
}

.fc-event-title-container {
  background-color: #242424 !important;
  border-color: #242424 !important;
  text-align: center;
  font-size: 1rem;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  border-color: #242424 !important;
}

.fc-daygrid-block-event .fc-event-title {
  color: #fff !important;
}

.fc .fc-daygrid-day-number {
  color: #555 !important;
}

.fc .fc-col-header-cell-cushion {
  color: #000 !important;
}

@media (max-width: 768px) {
  .fc .fc-toolbar.fc-header-toolbar {
    flex-direction: row !important;
  }
}

@media (max-width: 768px) {
  .fc .fc-view-harness {
    height: 400px !important;
  }
}

.new-mailbox-item {
  background-color: #EAEAEA;
}

.new-mailbox-item .time,
.new-mailbox-item .message-brief {
  color: #B3B3B3;
}

.new-mailbox-item.unread {
  background-color: #fff;
}

.new-mailbox-item.unread .time,
.new-mailbox-item.unread .message-brief {
  color: #000;
}

.new-mailbox-item .message-brief {
  font-size: 1rem;
  line-height: 1.5rem;
  max-height: 4.5rem;
  overflow: hidden;
}

.new-messages-list {
  padding: 2.5rem;
  max-height: 70vh;
  overflow-y: scroll;
  padding-bottom: 0;
  min-height: 30vh;
}

.new-messages-list .new-message-item {
  width: auto;
  max-width: 500px;
}

.new-messages-list .new-message-item .new-message {
  border-radius: 0.5rem;
  padding: 0.8rem;
  background-color: #E4E4E4;
  color: #4D4D4D;
}

.new-messages-list .new-message-item .date {
  color: #B3B3B3;
}

.new-messages-list .new-message-item .date .loading {
  height: 24px;
  margin: 0;
}

.new-messages-list .new-message-item .message-image {
  width: auto;
  max-width: 250px;
  height: auto;
  max-height: 250px;
  -o-object-fit: contain;
     object-fit: contain;
  cursor: pointer;
  border-radius: 0.5rem;
  overflow: hidden;
}

@media (max-width: 768px) {
  .new-messages-list {
    padding: 1rem;
    padding-bottom: 0;
  }

  .new-messages-list .new-message-item {
    max-width: 90%;
  }
}

.new-message-send-box {
  display: flex;
  margin: 1rem 2.5rem 2.5rem;
  border-radius: 0.5rem;
  background: #F9F9F9;
  border: 1px solid #E4E4E4;
  align-items: center;
}

.new-message-send-box textarea {
  flex: 1;
  resize: none;
  border: 0;
  padding: 0.5rem;
  background-color: transparent;
}

.new-message-send-box span {
  cursor: pointer;
  color: #242424;
  font-size: 1.5rem;
}

.new-message-send-box span.disabled {
  opacity: 0.6;
}

@media (max-width: 768px) {
  .new-message-send-box {
    margin: 1rem;
  }

  .new-message-send-box span:last-child {
    margin-right: 1rem !important;
  }
}

.image-upload {
  position: relative;
  width: 100%;
  max-width: 120px;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
}

.image-upload img {
  position: relative;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.image-upload .progress-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.7);
}

.cart-products {
  flex: 1;
  margin-bottom: 12px;
}

.cart-products .cart-product-info {
  display: flex;
  border-bottom: 1px solid #707070;
  padding: 8px 0px;
  align-items: center;
}

.cart-products .cart-product-info .product-info {
  flex: 1;
  display: block;
}

.cart-products .cart-product-info .product-info .product-info-title {
  margin: 0;
  font-size: 16px;
  margin-bottom: 4px;
}

.cart-products .cart-product-info .product-info .product-info-info,
.cart-products .cart-product-info .product-info .product-info-price {
  margin: 0 0 4px;
  font-size: 12px;
}

.cart-products .cart-product-info .product-info .prodcut-info-content {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 60px;
  overflow: hidden;
}

.cart-products .cart-product-info .product-number {
  width: auto;
  display: flex;
}

.cart-products .cart-product-info .product-number span {
  font-size: 16px;
  margin: 0 8px;
  cursor: pointer;
}

.cart-products .cart-product-info .product-number span:nth-child(2) {
  font-weight: bold;
  cursor: default;
}

.cart-products .empty {
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
  color: #707070;
}

.cart-total {
  background-color: #fff;
  padding: 12px;
  width: 100%;
  margin-bottom: 20px;
}

.cart-total p {
  display: flex;
  justify-content: space-between;
}

.cart-total p.cart-border {
  padding-bottom: 12px;
  border-bottom: 1px solid #707070;
  margin: 0 0 12px;
}

.cart-total p:last-child {
  margin: 0;
}

.cart-total p:last-child span {
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

.cart-pay .btn-pay {
  background: linear-gradient(to bottom, #F7DA96, #EEBC47);
  border: 1px solid #A07822;
  border-radius: 4px;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  line-height: 16px;
  padding: 16px 0px;
  color: #000;
}

.cart-address {
  padding: 10px 0;
  background-color: #fff;
  border-radius: 4px;
}

.cart-address p:first-child {
  margin-bottom: 12px;
}

.cart-address p:first-child span:last-child {
  font-size: 14px;
  margin-left: 20px;
  cursor: pointer;
  color: #0065FF;
}

.stripe-logos {
  display: flex;
  margin-bottom: 12px;
}

.stripe-logos img {
  width: 50px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 4px;
}

@media (max-width: 768px) {
  .stripe-logos img {
    width: 40px;
    height: 24px;
  }
}

.page {
  visibility: hidden;
}

.page.show {
  visibility: visible;
}

/* Absolute Center CSS Spinner */

.page-loading {
  position: fixed;
  z-index: 9999;
  height: 600px;
  width: 800px;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: 0.5s;
}

.page-loading.page-hide {
  opacity: 0;
}

@media (max-width: 768px) {
  .page-loading {
    width: 80vw;
    height: 60vw;
  }
}

/* Transparent Overlay */

.page-loading:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: 0.3s;
}

/* :not(:required) hides these rules from IE9 and below */

.page-loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.page-loading:not(:required):after {
  content: "";
  background-image: url(/img/page-loading.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 800px;
  height: 200px;
  display: block;
  position: fixed;
}

@media (max-width: 768px) {
  .page-loading:not(:required):after {
    width: 80vw;
    height: 30vw;
  }
}

/* Animation */

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

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

.custom-header a {
  font-size: 1rem;
}

@media (min-width: 840px) and (max-width: 1268px) {
  .custom-header a {
    font-size: 0.8rem;
    margin: 0.3rem;
  }
}

@media (min-width: 768px) and (max-width: 840px) {
  .custom-header a {
    font-size: 0.6rem;
    margin: 0.1rem;
  }
}

.footer-logo-title {
  font-size: 2rem;
  line-height: 2.2rem;
  color: #fff;
  font-weight: normal;
}