@font-face {
  font-family: "UTMASHeartbeat";
  src: local("UTMASHeartbeat"), url("/Client/assets.ver2/font/UTMASHeartbeat.ttf") format("truetype");
  font-style: normal; }

html {
  box-sizing: border-box;
  scroll-behavior: smooth; }

* {
  margin: 0;
  padding: 0; }

*,
*::after,
*::before {
  box-sizing: border-box; }

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

a {
  display: block;
  text-decoration: none; }

img {
  display: block;
  max-width: 100%; }

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none; }

p,
h1,
h4,
h2,
h3 {
  margin: 0;
  font-size: 16px; }

button:focus {
  box-shadow: none !important; }

button:hover {
  opacity: 0.9; }

a:hover {
  color: #24adc1;
  opacity: 0.9; }

.account-form {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08); }

/* PC Alway  */
/* PC BIG  */
/* PC BIG Lower */
/* PC BIG 16 */
/* PC fit */
/* PC fit-sub */
/* PC fit lower */
/* PC fit lower */
/* PC fit small */
/* PC HD */
/* PC Change */
/* PC LOWER  min-1023px */
/* Mobile & tablet */
/* Tablet */
/* Mobile */
/* Phone Small */
html {
  scroll-behavior: smooth !important; }

body {
  scroll-behavior: smooth !important;
  transition: all 0.3s ease;
  transition: 0.3s;
  overflow-y: auto;
  overflow-x: hidden;
  color: #18191b;
  font-family: "Roboto", sans-serif;
  line-height: 24px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  padding-right: 0 !important;
  background-color: #eff3f7;
  --width-tabs: 40px;
  --width-group: 25px; }
  @media only screen and (min-width: 1650px) {
    body .container-xl {
      max-width: 1383px; } }
  @media only screen and (max-width: 1440px) {
    body .container-xl {
      max-width: 96%; } }
  @media only screen and (max-width: 1283px) {
    body .container-xl {
      max-width: 100%; }
      body .container-xl .hide-on-pc-HD {
        display: none; } }
  @media only screen and (min-width: 1650px) {
    body .container {
      max-width: 1340px; } }
  @media only screen and (max-width: 63.9375em) {
    body .container {
      max-width: 100%; }
      body .container .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    body {
      --width-tabs: 20px; } }
  @media only screen and (max-width: 46.1875em) {
    body {
      --width-tabs: 15px; }
      body .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 1283px) {
    body {
      --width-group: 20px; }
      body .hide-on-pc-HD {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    body {
      --width-group: 15px; }
      body .hide-on-mobile {
        display: none; } }

.home.special .intro-tabs__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .home.special .intro-tabs__cover {
      display: none; }
      .home.special .intro-tabs__cover .hide-on-mobile {
        display: none; } }

.hide {
  display: none !important; }

.is-hide {
  animation: fadeHide 0.3s linear; }

.top-scroll {
  position: fixed;
  right: 1.8%;
  bottom: 3%;
  z-index: 99;
  width: 39px;
  height: 39px;
  border: 2px solid #000;
  border-radius: 50%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none; }
  .top-scroll.show {
    display: flex;
    animation: fadeLine 0.3s linear; }
  .top-scroll i {
    color: #000;
    font-size: 1.2rem; }

.gap-20 {
  height: 20px; }
  @media only screen and (max-width: 46.1875em) {
    .gap-20 {
      height: 10px; }
      .gap-20 .hide-on-mobile {
        display: none; } }
  .gap-20.special {
    height: 28px; }
    @media only screen and (max-width: 1440px) {
      .gap-20.special {
        height: 20px; } }

.modal-backdrop.show {
  z-index: 1076;
  opacity: 0.86; }
  .modal-backdrop.show::after {
    position: absolute;
    content: "";
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: grayscale(50%) blur(10px); }
    @media only screen and (max-width: 46.1875em) {
      .modal-backdrop.show::after {
        backdrop-filter: grayscale(50%) blur(2px); }
        .modal-backdrop.show::after .hide-on-mobile {
          display: none; } }

.modal {
  z-index: 1077; }

.offcanvas {
  z-index: 1056; }
  .offcanvas-backdrop {
    z-index: 1055; }

@media (min-width: 1200px) {
  body .container-xl.special {
    max-width: calc(100% - ((100% - 1140px))); } }

@media (min-width: 1400px) {
  body .container-xl.special {
    max-width: calc(100% - ((100% - 1320px))); } }

@media only screen and (min-width: 1650px) {
  body .container-xl.special {
    max-width: calc(100% - (100% - 1383px) / 2);
    margin-left: auto;
    margin-right: 0; } }

.loading {
  position: fixed;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1099;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65); }
  .loading.active {
    display: flex; }
  .loading-icon {
    position: relative;
    z-index: 10;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    border: 3.4px solid #24adc1;
    border-left: 3.4px solid transparent;
    border-top: 3.4px solid transparent;
    border-bottom: 3.4px solid transparent;
    animation: spinner 1s infinite normal running linear; }
  .loading-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    font-size: 28px;
    font-weight: 400;
    background-color: #1795a8;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%); }

.imageuploadify .imageuploadify-images-list button.btn-default {
  font-size: 1.6rem; }

.imageuploadify-container > button {
  position: relative;
  z-index: 99; }
  .imageuploadify-container > button::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
    background-color: #fff;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30' fill='%23dc3545' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z'/%3E%3C/svg%3E"); }

.load-group {
  position: relative; }

.load-more {
  position: relative;
  transition: all 0.8s linear;
  overflow-y: hidden;
  max-height: 144px; }
  .load-more.special::after {
    display: block; }

.load-btn.dim {
  position: relative;
  max-width: inherit; }
  .load-btn.dim.active::after {
    height: 0; }
  .load-btn.dim::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 100%;
    height: 18px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.63); }

.filter-sort__more {
  padding: 6px 0 !important; }

.height-zoom {
  position: relative;
  z-index: 2; }
  .height-zoom::after {
    position: absolute;
    content: "";
    left: 0;
    top: -70%;
    height: 40px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.88);
    z-index: -1; }

.filter-sort__group .height-zoom::after {
  display: none; }

.swiper-btn::after {
  display: none !important; }

.select2-container {
  z-index: 99; }

.select2-container--open {
  z-index: 1083; }

.header .select2-container--open .select2-dropdown--below {
  width: 227px !important; }

.select2-dropdown {
  border: 1.4px solid rgba(112, 112, 112, 0.25);
  border-radius: 5px;
  z-index: 1078; }
  @media only screen and (max-width: 46.1875em) {
    .select2-dropdown {
      width: 250px !important; }
      .select2-dropdown .hide-on-mobile {
        display: none; } }

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #24adc1 !important;
  color: white; }

.select2-dropdown {
  z-index: 1056; }

.select2-container--default .select2-results > .select2-results__options {
  /* Track */
  /* Handle */
  /* Handle on hover */ }
  .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar {
    width: 12px; }
  .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 50px; }
  .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background: #cecece; }
  .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1; }

.swal2-popup .swal2-title {
  font-size: 25px;
  margin: 14px 0 0.4em; }

.swal2-popup .swal2-styled {
  padding: 9px 2em; }
  .swal2-popup .swal2-styled.swal2-cancel, .swal2-popup .swal2-styled.swal2-confirm {
    font-size: 16px; }

@keyframes smoothScroll {
  0% {
    transform: translateY(-140px); }
  100% {
    transform: translateY(0px); } }

@keyframes fadeHide {
  0% {
    height: 116px;
    opacity: 1; }
  100% {
    height: 0px;
    opacity: 0; } }

@keyframes fadeSearch {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(0%); } }

@keyframes fadeShow {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

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

/* Track */
/* Handle */
/* Handle on hover */
@media (min-width: 1200px) {
  body .container-xl.special {
    max-width: calc(100% - ((100% - 1140px))); } }

@media (min-width: 1400px) {
  body .container-xl.special {
    max-width: calc(100% - ((100% - 1320px))); } }

@media only screen and (min-width: 1650px) {
  body .container-xl.special {
    max-width: calc(100% - (100% - 1383px) / 2);
    margin-left: auto;
    margin-right: 0; } }

.div-rep .user-detail__upload {
  margin-top: 25px; }

.div-rep + .div-rep {
  margin-top: 30px; }

.header {
  position: relative;
  z-index: 105;
  background-color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08); }
  .header-wrapper {
    padding: 4px;
    margin: 0 auto;
    max-width: 1600px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media only screen and (max-width: 1440px) {
      .header-wrapper {
        max-width: 98%; } }
  .header-scroll .header-wrapper, .header-sub .header-wrapper {
    max-width: 1728px; }
    @media only screen and (max-width: 1440px) {
      .header-scroll .header-wrapper, .header-sub .header-wrapper {
        max-width: 98%; } }
  .header-scroll .intro-tabs__toggle, .header-sub .intro-tabs__toggle {
    min-width: 227px;
    padding: 0 16px 0 18px !important;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media only screen and (max-width: 46.1875em) {
      .header-scroll .intro-tabs__toggle, .header-sub .intro-tabs__toggle {
        min-width: 200px; }
        .header-scroll .intro-tabs__toggle .hide-on-mobile, .header-sub .intro-tabs__toggle .hide-on-mobile {
          display: none; } }
  .header-scroll .intro-tabs__cover, .header-sub .intro-tabs__cover {
    margin-bottom: 0;
    max-width: 42%;
    background-color: #eff3f7; }
    @media only screen and (max-width: 63.9375em) {
      .header-scroll .intro-tabs__cover, .header-sub .intro-tabs__cover {
        max-width: 60%; }
        .header-scroll .intro-tabs__cover .hide-on-bothTM, .header-sub .intro-tabs__cover .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .header-scroll .intro-tabs__cover, .header-sub .intro-tabs__cover {
        position: fixed;
        z-index: 20;
        top: calc(68px);
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        transition: 0.5s all;
        transform: translateX(100%); }
        .header-scroll .intro-tabs__cover .hide-on-mobile, .header-sub .intro-tabs__cover .hide-on-mobile {
          display: none; } }
    @media only screen and (max-width: 46.1875em) {
      .header-scroll .intro-tabs__cover.active, .header-sub .intro-tabs__cover.active {
        transform: translateX(0%); }
        .header-scroll .intro-tabs__cover.active .hide-on-mobile, .header-sub .intro-tabs__cover.active .hide-on-mobile {
          display: none; } }
  .header-scroll .intro-tabs__form, .header-sub .intro-tabs__form {
    padding-left: 12px; }
  .header-scroll .intro-tabs__input, .header-sub .intro-tabs__input {
    margin-right: 37px; }
  .header-scroll .intro-tabs__submit, .header-sub .intro-tabs__submit {
    margin-right: 14px; }
  .header-scroll {
    position: fixed;
    top: 0;
    left: 0%;
    display: none;
    width: 100%;
    z-index: 1054;
    background-color: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.5s linear;
    animation: smoothScroll 0.8s forwards; }
    .header-scroll.active {
      display: block; }
    .header-scroll__overlay {
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(24, 25, 27, 0.5);
      display: none;
      transition: all 0.3s linear;
      transform: translateY(-100%); }
      @media only screen and (max-width: 46.1875em) {
        .header-scroll__overlay {
          display: block; }
          .header-scroll__overlay .hide-on-mobile {
            display: none; } }
      .header-scroll__overlay.active {
        transform: translateY(0%); }
  .header-activity {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 1300px) {
      .header-activity__logo {
        max-width: 166px; } }
    .header-activity__search {
      display: none; }
      .header-activity__search > i {
        display: none;
        font-size: 24px; }
      .header-activity__search.active {
        transition: 0.3 all linear; }
        .header-activity__search.active > svg {
          display: none; }
        .header-activity__search.active > i {
          display: block; }
      @media only screen and (max-width: 46.1875em) {
        .header-activity__search {
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 16px; }
          .header-activity__search .hide-on-mobile {
            display: none; } }
    .header-activity__link {
      position: relative;
      color: #18191b;
      padding: 5px 12px;
      font-size: 14px; }
      .header-activity__link::after {
        position: absolute;
        content: "";
        left: 50%;
        bottom: calc(100% + 20px);
        height: 3.4px;
        width: 100%;
        border-radius: 20px;
        transform: translateX(-50%);
        background-color: #24adc1;
        display: none; }
      .header-activity__link.active {
        color: #24adc1; }
        .header-activity__link.active::after {
          display: block; }
          @media only screen and (max-width: 63.9375em) {
            .header-activity__link.active::after {
              display: none; }
              .header-activity__link.active::after .hide-on-bothTM {
                display: none !important; } }
      .header-activity__link:hover {
        color: #24adc1; }
      .header-activity__link > svg {
        margin-right: 14px; }
    .header-activity__nav {
      margin-left: 50px; }
      @media only screen and (max-width: 1440px) {
        .header-activity__nav {
          margin-left: 28px; } }
      @media only screen and (max-width: 1300px) {
        .header-activity__nav {
          margin-left: 18px; } }
      @media only screen and (max-width: 63.9375em) {
        .header-activity__nav {
          display: none; }
          .header-activity__nav .hide-on-bothTM {
            display: none !important; } }
      .header-activity__nav .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
    .header-activity__custom {
      position: relative;
      z-index: 22; }
      .header-activity__custom:hover .header-activity__wrapper {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: flex-start;
        transition: all 0.3s; }
      .header-activity__custom.mobile:hover .header-activity__wrapper {
        display: block;
        transition: all 0.3s; }
      .header-activity__custom.mobile .header-activity__wrapper {
        position: relative;
        top: 0;
        width: fit-content;
        background-color: transparent;
        box-shadow: none;
        padding: 10px 0 0; }
        .header-activity__custom.mobile .header-activity__wrapper::before, .header-activity__custom.mobile .header-activity__wrapper::after {
          display: none; }
      .header-activity__custom.mobile .header-activity__inner {
        padding: 20px 0;
        border-top: 1px solid rgba(78, 101, 121, 0.15);
        border-left: 0; }
        .header-activity__custom.mobile .header-activity__inner:first-child {
          padding-top: 0;
          border-top: 0; }
      .header-activity__custom.mobile .header-activity__content {
        padding: 15px 0 0 20px; }
      .header-activity__custom.mobile .header-activity__img {
        min-width: 35px;
        max-width: 35px;
        height: 35px; }
      .header-activity__custom.mobile .accordion-button {
        padding: 0;
        border: 0;
        background-color: transparent;
        font-size: initial;
        box-shadow: none; }
    .header-activity__wrapper {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: flex-start;
      display: none;
      position: absolute;
      background-color: #fff;
      z-index: 11;
      padding: 25px 0 55px 60px;
      border-radius: 10px;
      width: max-content;
      top: 66px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }
      @media only screen and (max-width: 1440px) {
        .header-activity__wrapper {
          padding: 25px 20px 35px 35px; } }
      @media only screen and (min-width: 63.9375em) and (max-width: 1241px) {
        .header-activity__wrapper {
          left: -55%; } }
      .header-activity__wrapper::before {
        position: absolute;
        content: "";
        width: 40px;
        height: 26px;
        top: -24px;
        z-index: -1;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='24' viewBox='0 0 40 24'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_5588' data-name='Rectangle 5588' width='40' height='24' transform='translate(-19489 -20789)' fill='%23fff' stroke='%23707070' stroke-width='1'/%3E%3C/clipPath%3E%3Cfilter id='Polygon' x='-19.904' y='-10' width='80' height='59' filterUnits='userSpaceOnUse'%3E%3CfeOffset input='SourceAlpha'/%3E%3CfeGaussianBlur stdDeviation='3' result='blur'/%3E%3CfeFlood flood-opacity='0.161'/%3E%3CfeComposite operator='in' in2='blur'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cg id='Mask_Group_3' data-name='Mask Group 3' transform='translate(19489 20789)' clip-path='url(%23clip-path)'%3E%3Cg transform='matrix(1, 0, 0, 1, -19489, -20789)' filter='url(%23Polygon)'%3E%3Cpath id='Polygon-2' data-name='Polygon' d='M27.012,5.275a5,5,0,0,1,7.977,0l20.951,27.71A5,5,0,0,1,51.951,41h-41.9a5,5,0,0,1-3.988-8.016Z' transform='translate(-10.9 -1)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-size: auto; }
        @media only screen and (max-width: 1440px) {
          .header-activity__wrapper::before {
            top: -22px; } }
        @media only screen and (min-width: 63.9375em) and (max-width: 1241px) {
          .header-activity__wrapper::before {
            left: 18%; } }
      .header-activity__wrapper::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 44px;
        top: -40px;
        left: 0;
        background: transparent; }
      .header-activity__wrapper.custom {
        display: block;
        background-color: transparent;
        position: relative;
        box-shadow: none;
        top: 0;
        padding: 20px 0 30px;
        width: 100%; }
        .header-activity__wrapper.custom::before, .header-activity__wrapper.custom::after {
          display: none; }
        .header-activity__wrapper.custom .header-activity__inner {
          padding: 0 0 26px;
          border: 0; }
          .header-activity__wrapper.custom .header-activity__inner:last-child {
            padding: 0; }
        .header-activity__wrapper.custom .header-activity__sub > svg {
          visibility: hidden; }
        .header-activity__wrapper.custom .header-activity__sub.active > svg, .header-activity__wrapper.custom .header-activity__sub:hover > svg {
          visibility: visible;
          margin-top: 5px; }
          .header-activity__wrapper.custom .header-activity__sub.active > svg > path, .header-activity__wrapper.custom .header-activity__sub:hover > svg > path {
            fill: #24adc1; }
        .header-activity__wrapper.custom .header-activity__sub.active .header-activity__text, .header-activity__wrapper.custom .header-activity__sub:hover .header-activity__text {
          color: #24adc1; }
        .header-activity__wrapper.custom .header-activity__text {
          padding-left: 12px; }
    .header-activity__inner {
      padding: 0 60px;
      max-width: 360px;
      min-width: max-content;
      height: 100%; }
      @media only screen and (max-width: 1440px) {
        .header-activity__inner {
          padding: 0 30px;
          max-width: 300px; } }
      .header-activity__inner:nth-child(2) {
        border-left: 1px solid rgba(78, 101, 121, 0.15);
        border-right: 1px solid rgba(78, 101, 121, 0.15); }
        @media only screen and (max-width: 46.1875em) {
          .header-activity__inner:nth-child(2) {
            border: 0; }
            .header-activity__inner:nth-child(2) .hide-on-mobile {
              display: none; } }
      .header-activity__inner:first-child {
        padding-left: 0; }
    .header-activity__box {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
    .header-activity__img {
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      position: relative;
      padding-top: 0%;
      overflow: hidden;
      border-radius: 50%; }
      .header-activity__img > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .header-activity__title {
      font-size: 16px;
      font-weight: 500;
      padding-left: 10px;
      color: #18191b; }
    .header-activity__content {
      padding: 15px 0 0 30px; }
    .header-activity__sub {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: flex-start; }
      .header-activity__sub + .header-activity__sub {
        margin-top: 10px; }
      .header-activity__sub:hover {
        opacity: 0.8; }
      .header-activity__sub > svg {
        min-width: 8px;
        margin-top: 7px; }
    .header-activity__text {
      font-size: 14px;
      font-weight: 500;
      padding-left: 15px;
      color: #4e6579; }
  .header-social {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
    .header-social.isAccount .header-social__auth {
      display: none; }
    .header-social.isAccount .header-social__info {
      display: flex; }
      @media only screen and (max-width: 46.1875em) {
        .header-social.isAccount .header-social__info {
          display: none; }
          .header-social.isAccount .header-social__info .hide-on-mobile {
            display: none; } }
    .header-social__alert {
      cursor: pointer;
      position: relative; }
      .header-social__alert .dropdown-menu {
        width: 400px;
        inset: initial !important;
        transform: inherit !important;
        top: calc(100% + 10px) !important;
        right: -24px !important;
        border-radius: 7px;
        padding: 20px 10px 20px; }
        @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
          .header-social__alert .dropdown-menu {
            inset: 0px -355px auto auto !important; } }
        @media only screen and (max-width: 46.1875em) {
          .header-social__alert .dropdown-menu {
            width: 300px; }
            .header-social__alert .dropdown-menu .hide-on-mobile {
              display: none; } }
        .header-social__alert .dropdown-menu.active .header-social__notification {
          display: block; }
        .header-social__alert .dropdown-menu.active .header-social__empty {
          display: none; }
      .header-social__alert .user-notification {
        margin-bottom: 10px;
        padding: 0 10px;
        max-height: 500px; }
    .header-social__see {
      font-size: 14px;
      color: #18191b;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px 10px; }
      .header-social__see a {
        color: #18191b; }
      .header-social__see span {
        cursor: pointer; }
        @media only screen and (max-width: 46.1875em) {
          .header-social__see span .hide-on-mobile {
            display: none; } }
      .header-social__see a:hover,
      .header-social__see span:hover {
        text-decoration: Underline;
        color: #24adc1; }
    .header-social__btn {
      border: 0;
      background: transparent; }
    .header-social__signIn {
      color: #fff;
      font-size: 15px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 24px;
      border-radius: 5px;
      background-image: linear-gradient(67deg, #24adc1 0%, #1795a8 84%); }
      .header-social__signIn:hover, .header-social__signIn:active {
        color: #fff; }
      .header-social__signIn > svg {
        margin-right: 8px; }
    .header-social__signUp {
      margin-left: 30px;
      color: #18191b; }
    .header-social__quantity {
      position: absolute;
      top: 0;
      right: 0;
      color: #fff;
      font-size: 15px;
      line-height: 0.9;
      padding: 4px 6px;
      border-radius: 50%;
      border: 2px solid #fff;
      background-color: #faaf3a;
      transform: translate(50%, -50%); }
    .header-social__info, .header-social__auth {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      margin-left: 38px; }
      @media only screen and (max-width: 1300px) {
        .header-social__info, .header-social__auth {
          margin-left: 32px; } }
      @media only screen and (max-width: 63.9375em) {
        .header-social__info, .header-social__auth {
          display: none;
          margin-left: 0px; }
          .header-social__info .hide-on-bothTM, .header-social__auth .hide-on-bothTM {
            display: none !important; } }
    .header-social__info {
      display: none;
      cursor: pointer;
      user-select: none; }
    .header-social__avatar {
      min-width: 65px;
      width: 65px;
      height: 65px;
      overflow: hidden;
      border-radius: 50%;
      margin-right: 16px; }
      .header-social__avatar.avatar {
        position: relative;
        padding-top: 0%;
        overflow: hidden; }
        .header-social__avatar.avatar > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; }
    .header-social__name {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500; }
      .header-social__name > h4 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden; }
      .header-social__name > svg {
        margin-left: 12px; }
    .header-social__desc {
      font-size: 13px;
      font-style: italic;
      line-height: 1.2;
      margin-top: 5px;
      color: #4e6579; }
    .header-social__dropdown {
      left: 0;
      border: 0;
      width: calc(100% - 38px);
      margin-top: 4px !important;
      box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.1); }
    .header-social__item {
      font-size: 16px;
      padding: 6px 16px; }
      .header-social__item.active, .header-social__item:hover {
        color: #24adc1;
        background-color: #e9ecef; }
    .header-social__notification {
      display: none; }
  .header-notify__img {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center; }
  .header-notify__slug {
    position: absolute;
    bottom: 100%;
    left: 0;
    height: 24px;
    width: 100%; }
  .header-notify__text {
    font-size: 14px;
    text-align: center;
    margin-top: 14px;
    color: rgba(78, 101, 121, 0.5); }
  .header-mobile {
    display: none;
    margin-left: 24px; }
    .header-mobile > i {
      font-size: 28px; }
    @media only screen and (max-width: 63.9375em) {
      .header-mobile {
        display: block; }
        .header-mobile .hide-on-bothTM {
          display: none !important; } }
    .header-mobile .headerMb-nav__search > .input-group {
      background-color: #f6f6f6; }
  @media only screen and (max-width: 46.1875em) {
    .header-offcanvas {
      max-width: 350px; }
      .header-offcanvas .hide-on-mobile {
        display: none; } }
  .header-offcanvas .offcanvas-body {
    padding: 10px 16px; }
  .header-offcanvas .header-social {
    margin: 18px 0 14px; }
    .header-offcanvas .header-social__auth {
      display: flex;
      justify-content: center; }
    .header-offcanvas .header-social.isAccount .header-social__info {
      display: flex; }
  .header-offcanvas .header-activity__nav {
    margin-left: 0;
    display: flex;
    flex-direction: column; }
  .header-offcanvas .header-activity__link {
    display: inline-block; }
    .header-offcanvas .header-activity__link > svg {
      margin-right: 8px; }

.footer {
  position: relative;
  z-index: 2;
  padding: 70px 0 0;
  background-color: #4e6579; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .footer {
      padding: 40px 0 0; } }
  @media only screen and (max-width: 46.1875em) {
    .footer {
      padding: 20px 0 0; }
      .footer .hide-on-mobile {
        display: none; } }
  .footer-register > img {
    margin: 0 0 20px 0; }
  @media only screen and (max-width: 63.9375em) {
    .footer-cover {
      margin-top: 25px; }
      .footer-cover .hide-on-bothTM {
        display: none !important; } }
  .footer-cover a:hover {
    color: #fff; }
  .footer-top {
    color: #fff;
    padding-bottom: 30px; }
    @media only screen and (max-width: 46.1875em) {
      .footer-top {
        padding-bottom: 10px; }
        .footer-top .hide-on-mobile {
          display: none; } }
    .footer-top__title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px; }
      @media only screen and (max-width: 46.1875em) {
        .footer-top__title {
          font-size: 16px; }
          .footer-top__title .hide-on-mobile {
            display: none; } }
    .footer-top__link a {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5); }
    .footer-top__link a + a {
      margin-top: 15px; }
    .footer-top__contact {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      margin: 0 0 15px 0;
      flex-flow: row wrap; }
    .footer-top__hotline, .footer-top__email {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      border-radius: 7px;
      margin-bottom: 15px; }
      .footer-top__hotline svg, .footer-top__email svg {
        margin-right: 12px; }
      .footer-top__hotline p, .footer-top__email p {
        color: #fff; }
    .footer-top__hotline {
      background-color: #faaf3a;
      border: 1px solid #faaf3a;
      padding: 8px 20px 6px;
      margin-right: 15px; }
    .footer-top__email {
      border: 1px solid #fff;
      padding: 9.5px 20px 7.5px; }
      .footer-top__email p {
        font-size: 14px; }
    .footer-top__main {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      margin-bottom: 30px; }
    .footer-top__text {
      font-size: 13px;
      opacity: 0.5; }
    .footer-top__item + .footer-top__item {
      padding-left: 30px; }
    .footer-top__follow {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      color: #fff; }
    .footer-top__us {
      font-size: 14px;
      opacity: 0.5; }
    .footer-top__icon {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      margin-left: 15px; }
      .footer-top__icon a + a {
        margin-left: 10px; }
    .footer-top__sub {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
      padding-right: 47px; }
      @media only screen and (max-width: 63.9375em) {
        .footer-top__sub {
          padding-right: 0; }
          .footer-top__sub .hide-on-bothTM {
            display: none !important; } }
  .footer-box {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start; }
    .footer-box__icon > svg {
      margin-bottom: 8px; }
    .footer-box__text {
      padding: 0 0 22px 8px; }
    .footer-box__sub {
      font-size: 14px; }
  .footer-bottom {
    padding: 0 30px;
    background-color: #445768;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; }
    @media only screen and (max-width: 63.9375em) {
      .footer-bottom {
        padding: 0 15px; }
        .footer-bottom .hide-on-bothTM {
          display: none !important; } }
    .footer-bottom__wrapper {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0 11px; }
      @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
        .footer-bottom__wrapper {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 30px 40px; } }
      @media only screen and (max-width: 46.1875em) {
        .footer-bottom__wrapper {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 20px 20px; }
          .footer-bottom__wrapper .hide-on-mobile {
            display: none; } }
    @media only screen and (max-width: 63.9375em) {
      .footer-bottom__logo .hide-on-bothTM, .footer-bottom__img .hide-on-bothTM {
        display: none !important; }
      .footer-bottom__logo > img, .footer-bottom__img > img {
        margin: 0 auto; } }
    .footer-bottom__download {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
    .footer-bottom__link {
      margin-left: 10px; }
    .footer-bottom__text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
      padding-right: 5px; }
      @media only screen and (max-width: 46.1875em) {
        .footer-bottom__text {
          padding: 0;
          min-width: 85px; }
          .footer-bottom__text .hide-on-mobile {
            display: none; } }
  .footer-copyright {
    padding: 20px 0 18px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15); }
    .footer-copyright__text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5); }

.breadcrumbs {
  background: linear-gradient(83deg, #0c8ecf 0%, #3fb5d6 65%, #14add3 68%, #16b8d6 98%); }
  .breadcrumbs-wrapper {
    padding: 30px 0 35px; }
  .breadcrumbs-link {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin-bottom: 15px; }
    .breadcrumbs-link__title, .breadcrumbs-link__sub,
    .breadcrumbs-link > span > i {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5); }
    .breadcrumbs-link__sub:hover {
      color: #fff; }
    .breadcrumbs-link > span > i {
      margin: 0 10px; }
  .breadcrumbs-title {
    font-size: 35px;
    color: #fff; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .breadcrumbs-title {
        font-size: 30px; } }
    @media only screen and (max-width: 46.1875em) {
      .breadcrumbs-title {
        font-size: 24px; }
        .breadcrumbs-title .hide-on-mobile {
          display: none; } }

.account {
  margin: 88px 0; }
  @media only screen and (max-width: 1283px) {
    .account {
      margin: 44px 0; }
      .account .hide-on-pc-HD {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .account {
      margin: 20px 0; }
      .account .hide-on-mobile {
        display: none; } }
  .account-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    justify-content: space-between; }
    @media only screen and (max-width: 63.9375em) {
      .account-wrapper {
        justify-content: center; }
        .account-wrapper .hide-on-bothTM {
          display: none !important; } }
    .account-wrapper.special {
      justify-content: initial; }
      @media only screen and (max-width: 63.9375em) {
        .account-wrapper.special {
          justify-content: center; }
          .account-wrapper.special .hide-on-bothTM {
            display: none !important; } }
  .account-register {
    position: relative;
    align-items: stretch; }
    .account-register .account-img {
      width: 50%;
      min-height: 460px;
      background-attachment: fixed;
      background-size: 25% auto;
      background-position: 32%;
      background-repeat: no-repeat; }
      @media only screen and (max-width: 1920px) {
        .account-register .account-img {
          background-size: 35% auto;
          background-position: 23%; } }
      @media only screen and (max-width: 1650px) {
        .account-register .account-img {
          background-size: 40% auto;
          background-position: 16%; } }
      @media only screen and (max-width: 1440px) {
        .account-register .account-img {
          background-size: 40% auto;
          background-position: 12%; } }
      @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
        .account-register .account-img {
          background-size: 45% auto;
          background-position: 5%; }
          .account-register .account-img .hide-on-pc-Lose {
            display: none; } }
  @media only screen and (max-width: 63.9375em) {
    .account-img {
      display: none; }
      .account-img .hide-on-bothTM {
        display: none !important; } }
  .account-form {
    width: 40%;
    padding: 60px 40px;
    border-radius: 20px;
    background-color: #fff; }
    @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
      .account-form {
        width: 44%; }
        .account-form .hide-on-pc-Lose {
          display: none; } }
    @media only screen and (max-width: 63.9375em) {
      .account-form {
        width: 70%; }
        .account-form .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .account-form {
        width: 100%;
        padding: 48px 24px; }
        .account-form .hide-on-mobile {
          display: none; } }
    .account-form.special {
      padding: 0;
      box-shadow: none; }
    .account-form__header.special {
      margin-bottom: 30px; }
    .account-form__title {
      font-size: 35px;
      font-weight: 500; }
      @media only screen and (max-width: 46.1875em) {
        .account-form__title {
          font-size: 28px; }
          .account-form__title .hide-on-mobile {
            display: none; } }
    .account-form__sub {
      font-size: 24px;
      font-weight: 500; }
    .account-form__desc {
      margin-top: 8px;
      color: rgba(78, 101, 121, 0.75);
      font-size: 17px; }
      .account-form__desc > p {
        font-style: italic; }
      .account-form__desc > span {
        display: block;
        font-size: 16px;
        font-weight: bold;
        color: #24adc1; }
        @media only screen and (max-width: 46.1875em) {
          .account-form__desc > span {
            font-size: 17px;
            display: inline-block; }
            .account-form__desc > span .hide-on-mobile {
              display: none; } }
    .account-form__again {
      border: 0;
      display: block;
      font-size: 17px;
      margin: 40px auto 0;
      color: #faaf3a;
      background-color: transparent; }
    .account-form__main {
      margin-top: 14px; }
    .account-form__group {
      position: relative; }
      .account-form__group + .account-form__group {
        margin-top: 24px; }
      .account-form__group .eye {
        width: 24px;
        height: 24px; }
        .account-form__group .eye-open.is-active {
          display: block !important; }
          .account-form__group .eye-open.is-active + .eye-close {
            display: none; }
      .account-form__group + .login-form__group {
        margin-top: 14px; }
      .account-form__group .select2-selection--multiple,
      .account-form__group .select2-container,
      .account-form__group .account-form__input {
        font-size: 17px;
        font-weight: 400;
        color: #4e6579;
        width: 100% !important;
        border-radius: 7px;
        padding: 10px 32px 10px 20px;
        transition: all 0.2s;
        border: 1px solid rgba(112, 112, 112, 0.25); }
        .account-form__group .select2-selection--multiple:focus,
        .account-form__group .select2-container:focus,
        .account-form__group .account-form__input:focus {
          border-color: rgba(36, 173, 193, 0.8);
          box-shadow: none; }
        .account-form__group .select2-selection--multiple.small,
        .account-form__group .select2-container.small,
        .account-form__group .account-form__input.small {
          padding: 7px 22px 5px; }
      .account-form__group .select2-container--default .select2-selection--multiple,
      .account-form__group .select2-container--default .select2-selection--single {
        border: 0;
        background-color: transparent;
        padding: 0; }
      .account-form__group .select2-container .select2-selection--single {
        height: auto; }
        .account-form__group .select2-container .select2-selection--single .select2-selection__rendered {
          padding: 0; }
      .account-form__group .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: inherit; }
      .account-form__group .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 50%;
        right: 8px;
        transform: translateY(-50%); }
      .account-form__group.height .account-form__phone textarea {
        min-height: 210px; }
      .account-form__group.special {
        min-width: 70%; }
        .account-form__group.special .account-form__phone {
          margin-right: 10px; }
          .account-form__group.special .account-form__phone > input {
            min-width: 60%;
            margin-right: 10px !important; }
        .account-form__group.special .select2 {
          padding: 9px 22px 9px 20px; }
    .account-form__language .select2-container {
      padding: 6px 16px 4px 14px !important; }
    .account-form__label {
      margin-bottom: 10px;
      font-size: 15px;
      color: rgba(78, 101, 121, 0.5); }
      .account-form__label > sup {
        color: red; }
      .account-form__label.special {
        color: #18191b;
        font-size: 16px;
        font-weight: bold; }
    .account-form__category {
      font-weight: bold; }
    .account-form__icon {
      position: absolute;
      top: 50%;
      right: 14px;
      transform: translateY(-50%); }
    .account-form__status .input-error, .account-form__status .input-success {
      font-size: 20px;
      display: none; }
      .account-form__status .input-error.is-active, .account-form__status .input-success.is-active {
        display: block; }
    .account-form__status .input-error {
      color: red; }
    .account-form__status .input-success {
      color: #34c759; }
    .account-form__link {
      display: flex;
      justify-content: flex-end;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.75);
      text-decoration: underline; }
    .account-form__pills {
      border-radius: 8px;
      margin: 22px 0 30px;
      padding: 5px 6px;
      background-color: #e4e4e6; }
      .account-form__pills .nav-link {
        width: 100%;
        border-radius: 8px;
        color: #18191b;
        text-align: center; }
        .account-form__pills .nav-link.active {
          font-weight: bold;
          color: #18191b;
          background-color: #fff; }
      .account-form__pills .nav-item {
        flex: 1;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%; }
    .account-form__btn {
      width: 100%;
      color: #fff;
      text-transform: uppercase;
      font-size: 15px;
      font-weight: 500;
      margin-top: 50px;
      padding: 12px 24px;
      border: 0;
      border-radius: 7px;
      background-image: linear-gradient(0deg, #24adc1 0%, #1795a8 47%); }
      @media only screen and (max-width: 1283px) {
        .account-form__btn {
          padding: 10px 24px; }
          .account-form__btn .hide-on-pc-HD {
            display: none; } }
      .account-form__btn.small {
        display: flex;
        max-width: 67%;
        margin: 40px auto 0;
        justify-content: center; }
      .account-form__btn.edit {
        min-width: 260px;
        max-width: fit-content;
        margin-top: 30px; }
        @media only screen and (max-width: 46.1875em) {
          .account-form__btn.edit {
            max-width: 100%; }
            .account-form__btn.edit .hide-on-mobile {
              display: none; } }
    .account-form__move {
      display: block;
      margin-top: 54px;
      font-size: 15px;
      text-align: center;
      font-weight: 500;
      color: #4e6579; }
      .account-form__move > a {
        color: #1795a8;
        font-weight: bold;
        display: inline-block; }
    .account-form__view {
      position: relative; }
    .account-form__phone {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
      .account-form__phone > input:first-child {
        margin-right: 14px;
        max-width: 26%; }
      .account-form__phone .select2 {
        max-height: 53px; }
      .account-form__phone .select2 + .account-form__input {
        margin-left: 15px; }
      .account-form__phone.special {
        font-size: 17px;
        font-weight: 400;
        color: #4e6579;
        width: 100% !important;
        border-radius: 7px;
        padding: 13px 32px 13px 20px;
        transition: all 0.2s;
        border: 1.4px solid rgba(112, 112, 112, 0.25); }
    .account-form__content {
      margin-top: 32px; }
    .account-form__code {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center; }
      .account-form__code > input + input {
        margin-left: 14px; }
        @media only screen and (max-width: 63.9375em) {
          .account-form__code > input + input {
            margin-left: 8px; }
            .account-form__code > input + input .hide-on-bothTM {
              display: none !important; } }
      .account-form__code > input {
        width: 100%;
        line-height: 1;
        text-align: center;
        padding: 8px 0px;
        font-size: 26px;
        appearance: textfield;
        -webkit-appearance: textfield;
        border: 1.4px solid rgba(78, 101, 121, 0.25);
        color: #18191b;
        border-radius: 5px; }
        @media only screen and (max-width: 46.1875em) {
          .account-form__code > input {
            font-size: 24px; }
            .account-form__code > input .hide-on-mobile {
              display: none; } }
    .account-form__input {
      position: relative; }
      .account-form__input::placeholder {
        color: rgba(78, 101, 121, 0.3); }
      .account-form__input.textarea {
        min-height: 153px; }
        .account-form__input.textarea.special {
          min-height: 300px;
          margin-bottom: 30px; }
      .account-form__input.wrap {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        color: rgba(78, 101, 121, 0.25);
        padding: 12px 20px; }
        .account-form__input.wrap input {
          width: 100%;
          border: 0;
          background-color: transparent; }
          .account-form__input.wrap input::placeholder {
            color: rgba(78, 101, 121, 0.3); }
    .account-form__target {
      font-size: 14px;
      color: #faaf3a;
      cursor: pointer; }
      @media only screen and (max-width: 63.9375em) {
        .account-form__target {
          padding-top: 10px; }
          .account-form__target .hide-on-bothTM {
            display: none !important; } }
      @media only screen and (max-width: 46.1875em) {
        .account-form__target {
          text-align: center; }
          .account-form__target .hide-on-mobile {
            display: none; } }
      .account-form__target svg {
        margin: 0 7px 3px 0; }
      .account-form__target.special {
        margin: 20px 0 0 40px; }
    .account-form__check {
      margin-top: 24px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .account-form__check .account-care__label {
        margin-top: 3px; }
    .account-form__remove {
      position: absolute;
      right: 5px;
      top: 5px;
      width: 28px;
      height: 28px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      cursor: pointer;
      background-color: #fbfbfb;
      box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; }
      .account-form__remove:hover {
        opacity: 0.9; }
    .account-form__abc.special {
      width: 70%;
      padding: 0 0 0 20px; }
      @media only screen and (max-width: 63.9375em) {
        .account-form__abc.special {
          width: 100%; }
          .account-form__abc.special .hide-on-bothTM {
            display: none !important; } }
      .account-form__abc.special .account-form__label {
        font-weight: 400; }
    .account-form__abc .user-detail__upload {
      padding-top: 20px; }
    .account-form__abc .account-form__phone + .monitor-info__student,
    .account-form__abc .account-form__phone + .user-detail__upload {
      padding-top: 20px; }
    .account-form__final {
      margin-top: 30px; }
      .account-form__final .account-care__value {
        font-weight: bold;
        font-size: 15px; }
        .account-form__final .account-care__value > strong {
          color: #faaf3a; }
  .account-care__intended, .account-care__category {
    margin-bottom: 12px; }
  .account-care__filed + .account-care__filed {
    margin-top: 21px; }
  .account-care__category {
    font-weight: bold;
    font-size: 17px;
    display: block; }
  .account-care__intended {
    position: relative;
    z-index: 1;
    color: #fff;
    display: inline-block;
    padding: 5px 35px 5px 0;
    width: 218px; }
    .account-care__intended::after {
      position: absolute;
      content: "";
      top: 0;
      left: -40px;
      z-index: -1;
      height: 100%;
      width: calc(100% + 40px);
      border-radius: 0 15px 15px 0;
      background-color: #24adc1; }
      @media only screen and (max-width: 46.1875em) {
        .account-care__intended::after {
          left: -24px;
          width: calc(100% + 24px); }
          .account-care__intended::after .hide-on-mobile {
            display: none; } }
  .account-care__cover + .account-care__cover {
    margin-top: 22px; }
  .account-care__accordion {
    padding-left: 20px; }
    .account-care__accordion .accordion-item {
      border: 0; }
    .account-care__accordion .accordion-button {
      padding: 0;
      background-color: transparent;
      border: 0;
      color: #18191b;
      box-shadow: none; }
      .account-care__accordion .accordion-button::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.002' height='7.5' viewBox='0 0 10.002 7.5'%3E%3Cpath id='Path_6478' data-name='Path 6478' d='M11,15.5a1.433,1.433,0,0,1-1.108-.533l-3.508-4.25a1.75,1.75,0,0,1-.217-1.842A1.467,1.467,0,0,1,7.491,8h7.017a1.467,1.467,0,0,1,1.325.875,1.75,1.75,0,0,1-.217,1.842l-3.508,4.25A1.433,1.433,0,0,1,11,15.5Z' transform='translate(-5.999 -8)' fill='%2335373a'/%3E%3C/svg%3E%0A");
        margin-right: 5px;
        width: 12px;
        height: 12px;
        background-size: contain;
        position: absolute;
        top: 4px;
        left: -20px; }
      .account-care__accordion .accordion-button:not(.collapsed)::after {
        top: 1px; }
    .account-care__accordion .accordion-body {
      padding: 0; }
  .account-care__name {
    font-size: 15px;
    font-weight: 500; }
  .account-care__option {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    margin-top: 10px; }
  .account-care__input {
    display: none; }
    .account-care__input:checked ~ .account-care__label {
      border: 0; }
      .account-care__input:checked ~ .account-care__label > svg {
        display: block; }
  .account-care__label {
    min-width: 20px;
    height: 20px;
    margin-top: 1px;
    margin-right: 10px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid rgba(78, 101, 121, 0.25);
    transition: 0.3s all linear; }
    .account-care__label > svg {
      transition: 0.3s all linear;
      display: none; }
  .account-care__value {
    color: #4e6579; }
  .account-success {
    text-align: center; }
    .account-success__img > img {
      margin: 0 auto; }
    .account-success__title {
      margin-top: 16px;
      font-size: 22px;
      font-weight: bold; }
    .account-success__desc {
      margin: 12px auto 0;
      width: 100%;
      color: rgba(78, 101, 121, 0.75); }
      .account-success__desc.special {
        width: 68%; }
  .account-teacher {
    margin-top: 24px; }
    .account-teacher__group {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 30px; }
      @media only screen and (max-width: 46.1875em) {
        .account-teacher__group {
          flex-direction: column; }
          .account-teacher__group .hide-on-mobile {
            display: none; } }
      .account-teacher__group .account-form__group {
        width: 48%; }
        @media only screen and (max-width: 46.1875em) {
          .account-teacher__group .account-form__group {
            width: 100%; }
            .account-teacher__group .account-form__group .hide-on-mobile {
              display: none; } }
        .account-teacher__group .account-form__group + .account-form__group {
          margin-top: 0; }
          @media only screen and (max-width: 46.1875em) {
            .account-teacher__group .account-form__group + .account-form__group {
              margin-top: 20px; }
              .account-teacher__group .account-form__group + .account-form__group .hide-on-mobile {
                display: none; } }
      @media only screen and (max-width: 46.1875em) {
        .account-teacher__group.special {
          flex-direction: row; }
          .account-teacher__group.special .hide-on-mobile {
            display: none; } }
    .account-teacher__experience {
      justify-content: space-between;
      margin: 30px 0 24px; }
      .account-teacher__experience .account-form__group {
        width: 100%; }
    .account-teacher__id {
      width: 45%; }
      .account-teacher__id.edit .account-teacher__example {
        min-height: 299px; }
        @media only screen and (max-width: 63.9375em) {
          .account-teacher__id.edit .account-teacher__example {
            min-height: 499px; }
            .account-teacher__id.edit .account-teacher__example .hide-on-bothTM {
              display: none !important; } }
      .account-teacher__id.edit .account-teacher__image {
        padding-top: 139%; }
    .account-teacher__show {
      display: block; }
      .account-teacher__show.active .account-teacher__example {
        display: none; }
      .account-teacher__show.active .account-teacher__image {
        display: block; }
      .account-teacher__show.active .account-teacher__image.video {
        border: 0;
        border-radius: 0;
        height: fit-content; }
      .account-teacher__show + .account-teacher__show {
        margin-top: 20px; }
    .account-teacher__image {
      display: none;
      border-radius: 10px;
      position: relative;
      padding-top: 62%;
      overflow: hidden;
      height: 160px;
      border: 1px dashed rgba(112, 112, 112, 0.5); }
      .account-teacher__image > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .account-teacher__image > img {
        object-fit: contain; }
      .account-teacher__image.video {
        padding-top: 0; }
    .account-teacher__file {
      display: none; }
    .account-teacher__example {
      position: relative;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      cursor: pointer;
      padding: 15px;
      min-height: 160px;
      border-radius: 10px;
      border: 1px dashed rgba(112, 112, 112, 0.5); }
      .account-teacher__example .account-teacher__text {
        color: rgba(78, 101, 121, 0.4); }
      .account-teacher__example > svg path {
        fill: rgba(78, 101, 121, 0.4); }
      .account-teacher__example.edit {
        min-height: 50px; }
        .account-teacher__example.edit .account-teacher__text {
          color: rgba(78, 101, 121, 0.4); }
      .account-teacher__example.gradient {
        border-radius: 10px;
        overflow: hidden;
        border: 0; }
        .account-teacher__example.gradient .account-teacher__text {
          color: #fff; }
        .account-teacher__example.gradient > svg path {
          fill: #fff; }
        .account-teacher__example.gradient svg,
        .account-teacher__example.gradient .account-teacher__text {
          position: relative;
          z-index: 2; }
        .account-teacher__example.gradient::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          background: rgba(24, 25, 27, 0.5);
          z-index: 0; }
      .account-teacher__example.special {
        min-height: 45px;
        height: 45px;
        flex-direction: row; }
        .account-teacher__example.special .account-teacher__text {
          width: fit-content;
          margin: 0 0 0 5px; }
    .account-teacher__text {
      width: 79%;
      font-size: 14px;
      line-height: 1.5;
      text-align: center;
      margin: 8px auto 0;
      font-weight: 500;
      color: rgba(78, 101, 121, 0.25); }
    .account-teacher__equal {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px 12px; }
      @media only screen and (max-width: 46.1875em) {
        .account-teacher__equal {
          grid-template-columns: repeat(2, 1fr); }
          .account-teacher__equal .hide-on-mobile {
            display: none; } }
      .account-teacher__equal .account-teacher__id {
        width: 100%; }
      .account-teacher__equal .account-teacher__image {
        padding-top: 150%; }
    .account-teacher__special {
      position: relative; }
      .account-teacher__special > input {
        padding: 13px 50px 13px 20px; }
    .account-teacher__cover + .account-teacher__cover {
      margin-top: 35px; }
    .account-teacher__list {
      margin-bottom: 24px; }
    .account-teacher__item {
      margin-top: 0;
      padding: 16px 0; }
    .account-teacher__item + .account-teacher__item {
      border-top: 1px solid rgba(78, 101, 121, 0.15); }
    .account-teacher__icon {
      position: absolute;
      right: 14px;
      top: 50%;
      color: rgba(78, 101, 121, 0.3);
      transform: translateY(-50%); }
    .account-teacher__btn {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      color: #faaf3a;
      font-weight: 500;
      border: 0;
      margin: 20px 0 30px;
      background-color: transparent; }
      .account-teacher__btn > svg {
        margin-right: 6px; }

.intro {
  background: linear-gradient(83deg, #0c8ecf 0%, #3fb5d6 65%, #14add3 68%, #16b8d6 98%); }
  .intro-wrapper {
    padding: 70px 0 0;
    color: #fff; }
    @media only screen and (max-width: 1600px) {
      .intro-wrapper {
        padding: 50px 0 0; } }
    @media only screen and (max-width: 46.1875em) {
      .intro-wrapper {
        padding: 40px 0 0; }
        .intro-wrapper .hide-on-mobile {
          display: none; } }
  .intro-heading {
    text-align: center;
    margin-bottom: 28px; }
    @media only screen and (max-width: 46.1875em) {
      .intro-heading {
        margin-bottom: 20px; }
        .intro-heading .hide-on-mobile {
          display: none; } }
    .intro-heading__title {
      font-size: 35px;
      margin-bottom: 15px;
      line-height: 1.4; }
      @media only screen and (max-width: 1600px) {
        .intro-heading__title {
          font-size: 26px;
          margin-bottom: 10px; } }
      @media only screen and (max-width: 46.1875em) {
        .intro-heading__title {
          font-size: 16px;
          margin-bottom: 8px; }
          .intro-heading__title .hide-on-mobile {
            display: none; } }
    .intro-heading__text {
      opacity: 0.75; }
      @media only screen and (max-width: 46.1875em) {
        .intro-heading__text {
          font-size: 13px; }
          .intro-heading__text .hide-on-mobile {
            display: none; } }
  .intro-tabs {
    width: 768px;
    margin: 0 auto; }
    @media only screen and (max-width: 63.9375em) {
      .intro-tabs {
        width: 100%; }
        .intro-tabs .hide-on-bothTM {
          display: none !important; } }
    .intro-tabs__nav {
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      justify-content: center; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__nav {
          border-top: 0;
          margin-bottom: 15px; }
          .intro-tabs__nav .hide-on-mobile {
            display: none; } }
    .intro-tabs__item + .intro-tabs__item {
      margin-left: 24px; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__item + .intro-tabs__item {
          margin-left: 0; }
          .intro-tabs__item + .intro-tabs__item .hide-on-mobile {
            display: none; } }
    .intro-tabs__item {
      margin-top: -2px; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__item {
          margin: 0 6px 6px 0; }
          .intro-tabs__item .hide-on-mobile {
            display: none; } }
    .intro-tabs__link {
      border: 0;
      background: transparent;
      color: #fff;
      opacity: 0.5;
      padding: 17px 12px 17px;
      position: relative; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__link {
          border: 1px solid #fff;
          border-radius: 50px;
          padding: 3px 12px 4px;
          font-size: 14px; }
          .intro-tabs__link .hide-on-mobile {
            display: none; } }
      .intro-tabs__link.active, .intro-tabs__link:hover {
        color: #fff;
        opacity: 1; }
      .intro-tabs__link.active::before {
        content: "";
        width: 100%;
        height: 4px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        border-radius: 50px; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__link .hide-on-mobile {
          display: none; }
        .intro-tabs__link::before {
          display: none; } }
    .intro-tabs__pane {
      margin-bottom: 55px; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__pane {
          margin-bottom: 40px; }
          .intro-tabs__pane .hide-on-mobile {
            display: none; } }
    .intro-tabs__coverIcon {
      display: none; }
      @media only screen and (max-width: 1600px) {
        .intro-tabs__coverIcon {
          display: block; }
          .intro-tabs__coverIcon:hover ~ .intro-tabs__cover {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center; } }
      @media only screen and (max-width: 63.9375em) {
        .intro-tabs__coverIcon {
          display: none; }
          .intro-tabs__coverIcon .hide-on-bothTM {
            display: none !important; } }
    .intro-tabs__cover {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      width: 100%;
      height: 52px;
      background-color: #fff;
      border-radius: 10px; }
      @media only screen and (max-width: 1600px) {
        .intro-tabs__cover {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 60px;
          display: none; }
          .intro-tabs__cover:hover {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center; }
          .intro-tabs__cover::after {
            content: "";
            position: absolute;
            top: -15px;
            right: 0;
            width: 50%;
            height: 15px;
            background-color: transparent; } }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__cover {
          height: 45px; }
          .intro-tabs__cover .hide-on-mobile {
            display: none; } }
      .intro-tabs__cover .select2-container {
        min-width: 227px;
        width: 227px !important;
        padding-right: 18px;
        border-right: 1px solid rgba(24, 25, 27, 0.15); }
        @media only screen and (max-width: 63.9375em) {
          .intro-tabs__cover .select2-container {
            min-width: 180px;
            width: 180px !important; }
            .intro-tabs__cover .select2-container .hide-on-bothTM {
              display: none !important; } }
        @media only screen and (max-width: 46.1875em) {
          .intro-tabs__cover .select2-container {
            min-width: 145px;
            width: 176px !important; }
            .intro-tabs__cover .select2-container .hide-on-mobile {
              display: none; } }
        .intro-tabs__cover .select2-container b {
          left: 0 !important; }
        .intro-tabs__cover .select2-container--default .select2-selection--single {
          border: 0;
          background-color: transparent; }
        .intro-tabs__cover .select2-container .select2-selection--single .select2-selection__rendered {
          padding-left: 22px; }
          @media only screen and (max-width: 46.1875em) {
            .intro-tabs__cover .select2-container .select2-selection--single .select2-selection__rendered {
              padding-left: 11px;
              padding-right: 12px; }
              .intro-tabs__cover .select2-container .select2-selection--single .select2-selection__rendered .hide-on-mobile {
                display: none; } }
      .intro-tabs__cover.special {
        border: 1px solid rgba(78, 101, 121, 0.1);
        height: 45px; }
        @media only screen and (max-width: 1600px) {
          .intro-tabs__cover.special {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            position: relative;
            top: initial;
            left: initial;
            transform: initial; } }
      @media only screen and (max-width: 1600px) {
        .intro-tabs__cover.special2 {
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          position: relative;
          top: initial;
          left: initial;
          transform: initial; } }
    .intro-tabs__input, .intro-tabs__submit, .intro-tabs__toggle {
      border: 0;
      background: transparent; }
    .intro-tabs__toggle {
      min-width: 227px;
      width: 227px !important;
      font-size: 16px;
      padding: 0 18px 0 30px !important;
      border-right: 1px solid rgba(0, 0, 0, 0.15) !important; }
      .intro-tabs__toggle:focus, .intro-tabs__toggle:active {
        box-shadow: none; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__toggle {
          padding: 0 0 0 10px !important;
          min-width: 125px;
          width: 160px !important; }
          .intro-tabs__toggle .hide-on-mobile {
            display: none; } }
      .intro-tabs__toggle::after {
        display: none; }
      .intro-tabs__toggle svg {
        margin-left: 38px; }
        @media only screen and (max-width: 46.1875em) {
          .intro-tabs__toggle svg {
            margin-left: 5px; }
            .intro-tabs__toggle svg .hide-on-mobile {
              display: none; } }
    .intro-tabs__form {
      padding-left: 30px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      position: relative; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__form {
          padding-left: 10px; }
          .intro-tabs__form .hide-on-mobile {
            display: none; } }
    .intro-tabs__menu {
      width: 100%; }
      .intro-tabs__menu li {
        cursor: pointer;
        font-size: 16px; }
        @media only screen and (max-width: 46.1875em) {
          .intro-tabs__menu li {
            font-size: 13px; }
            .intro-tabs__menu li .hide-on-mobile {
              display: none; } }
        .intro-tabs__menu li.active {
          background-color: #24adc1; }
    .intro-tabs__input {
      width: 100%;
      margin-right: 55px; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__input {
          margin-right: 30px; }
          .intro-tabs__input .hide-on-mobile {
            display: none; } }
      .intro-tabs__input::-webkit-search-cancel-button {
        margin-left: 14px; }
      .intro-tabs__input::placeholder {
        opacity: 0.25; }
        @media only screen and (max-width: 46.1875em) {
          .intro-tabs__input::placeholder {
            font-size: 13px; }
            .intro-tabs__input::placeholder .hide-on-mobile {
              display: none; } }
    .intro-tabs__key {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      margin-top: 15px; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__key {
          display: block;
          text-align: center; }
          .intro-tabs__key .hide-on-mobile {
            display: none; } }
      .intro-tabs__key ul {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        flex-flow: row wrap;
        margin-left: 15px; }
        @media only screen and (max-width: 46.1875em) {
          .intro-tabs__key ul {
            justify-content: center; }
            .intro-tabs__key ul .hide-on-mobile {
              display: none; } }
        .intro-tabs__key ul a {
          color: rgba(255, 255, 255, 0.75);
          margin: 10px 5px 0;
          padding: 2px 9px;
          border: 1px solid rgba(255, 255, 255, 0.75);
          border-radius: 5px; }
    .intro-tabs__sub {
      opacity: 0.75;
      min-width: 100px;
      margin-top: 10px; }
    .intro-tabs__submit {
      position: absolute;
      right: 0;
      margin-right: 27px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
      @media only screen and (max-width: 46.1875em) {
        .intro-tabs__submit {
          margin-right: 9px; }
          .intro-tabs__submit .hide-on-mobile {
            display: none; } }
    .intro-tabs__folder {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px 10px;
      margin-top: 25px; }
    .intro-tabs__folderItem {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; }
    .intro-tabs__folderImg {
      width: 80px;
      height: 80px;
      position: relative;
      padding-top: 0%;
      overflow: hidden; }
      .intro-tabs__folderImg > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .intro-tabs__folderName {
      color: #4e6579;
      margin-top: 5px; }
    .intro-tabs__wrap {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      margin-top: 25px; }
    .intro-tabs__desc {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #24adc1;
      transition: all 0.3s;
      color: #18191b; }
      .intro-tabs__desc + .intro-tabs__desc {
        margin-left: 10px; }
      .intro-tabs__desc.active, .intro-tabs__desc:hover {
        background-color: #24adc1;
        color: #fff; }
  .intro-slide {
    position: relative;
    padding: 0 20px 0; }
    @media only screen and (min-width: 63.9375em) and (max-width: 1241px) {
      .intro-slide {
        padding: 0 40px 49px; } }
    @media only screen and (max-width: 63.9375em) {
      .intro-slide {
        padding: 0 0px 49px; }
        .intro-slide .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .intro-slide {
        padding: 0 0px 25px;
        border-bottom: 0; }
        .intro-slide .hide-on-mobile {
          display: none; } }
    .intro-slide__cover {
      position: relative;
      padding: 3px;
      max-width: 183px;
      max-height: 174px; }
      .intro-slide__cover::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        opacity: 0.35;
        transform: rotate(3deg);
        border-radius: 14px; }
    .intro-slide__img {
      position: relative;
      padding-top: 95%;
      overflow: hidden;
      border-radius: 14px;
      position: relative; }
      .intro-slide__img > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .intro-slide__text {
      text-align: center;
      margin-top: 5px;
      font-size: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden; }
    .intro-slide .swiper-pagination {
      display: none; }
      .intro-slide .swiper-pagination-bullet {
        background-color: #fff; }
      @media only screen and (max-width: 63.9375em) {
        .intro-slide .swiper-pagination {
          display: block;
          bottom: 2px; }
          .intro-slide .swiper-pagination .hide-on-bothTM {
            display: none !important; } }
    .intro-slide .swiper-button-next, .intro-slide .swiper-button-prev {
      --width: -50px; }
      @media only screen and (max-width: 63.9375em) {
        .intro-slide .swiper-button-next, .intro-slide .swiper-button-prev {
          display: none; }
          .intro-slide .swiper-button-next .hide-on-bothTM, .intro-slide .swiper-button-prev .hide-on-bothTM {
            display: none !important; } }
      @media only screen and (min-width: 63.9375em) and (max-width: 1241px) {
        .intro-slide .swiper-button-next, .intro-slide .swiper-button-prev {
          --width: 0; } }
      .intro-slide .swiper-button-next::after, .intro-slide .swiper-button-prev::after {
        display: none; }
    .intro-slide .swiper-button-next {
      right: var(--width); }
    .intro-slide .swiper-button-prev {
      left: var(--width); }
    .intro-slide .swiper-button-next, .intro-slide .swiper-button-prev {
      top: 38%; }
    .intro-slide .swiper-scrollbar {
      display: block;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 15px;
      height: 5px;
      margin-top: 52px; }
      @media only screen and (max-width: 46.1875em) {
        .intro-slide .swiper-scrollbar {
          margin-top: 10px; }
          .intro-slide .swiper-scrollbar .hide-on-mobile {
            display: none; } }
      .intro-slide .swiper-scrollbar-drag {
        background-color: #fff; }
  .intro-bg {
    min-height: 160px; }
    @media only screen and (max-width: 46.1875em) {
      .intro-bg {
        min-height: 25px; }
        .intro-bg .hide-on-mobile {
          display: none; } }

.banner {
  padding-bottom: 58px;
  background-color: #eff3f7; }
  @media only screen and (max-width: 46.1875em) {
    .banner {
      padding-bottom: 30px; }
      .banner .hide-on-mobile {
        display: none; } }
  .banner-wrapper {
    display: grid;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 24px; }
    @media only screen and (max-width: 63.9375em) {
      .banner-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 20px; }
        .banner-wrapper .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .banner-wrapper {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px 20px; }
        .banner-wrapper .hide-on-mobile {
          display: none; } }
  .banner-img {
    margin-top: -105px;
    position: relative;
    padding-top: 31.3%;
    overflow: hidden;
    border-radius: 14px; }
    .banner-img > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    @media only screen and (max-width: 63.9375em) {
      .banner-img {
        margin-top: 0; }
        .banner-img .hide-on-bothTM {
          display: none !important; } }
  .banner-img:nth-child(1) {
    grid-column: 1/3; }
    @media only screen and (max-width: 63.9375em) {
      .banner-img:nth-child(1) {
        margin-top: -105px; }
        .banner-img:nth-child(1) .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .banner-img:nth-child(1) {
        position: relative;
        padding-top: 32%;
        overflow: hidden;
        grid-column: 1;
        margin-top: 30px; }
        .banner-img:nth-child(1) .hide-on-mobile {
          display: none; }
        .banner-img:nth-child(1) > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; } }
  @media only screen and (max-width: 63.9375em) {
    .banner-img:nth-child(2), .banner-img:nth-child(3) {
      position: relative;
      padding-top: 50%;
      overflow: hidden; }
      .banner-img:nth-child(2) .hide-on-bothTM, .banner-img:nth-child(3) .hide-on-bothTM {
        display: none !important; }
      .banner-img:nth-child(2) > img, .banner-img:nth-child(3) > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; } }

.coaching {
  background-color: #eff3f7; }
  .coaching-wrapper {
    padding-bottom: 90px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .coaching-wrapper {
        padding-bottom: 70px; } }
    @media only screen and (max-width: 46.1875em) {
      .coaching-wrapper {
        padding-bottom: 30px; }
        .coaching-wrapper .hide-on-mobile {
          display: none; } }
  .coaching-heading {
    text-align: center;
    width: 800px;
    margin: 0 auto 35px; }
    @media only screen and (max-width: 1600px) {
      .coaching-heading {
        margin: 0 auto 30px; } }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .coaching-heading {
        width: 100%; } }
    @media only screen and (max-width: 46.1875em) {
      .coaching-heading {
        width: 100%;
        margin: 0 auto 25px; }
        .coaching-heading .hide-on-mobile {
          display: none; } }
    .coaching-heading__title {
      font-size: 30px;
      margin-bottom: 10px; }
      @media only screen and (max-width: 1600px) {
        .coaching-heading__title {
          font-size: 24px; } }
      @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
        .coaching-heading__title {
          font-size: 22px; } }
      @media only screen and (max-width: 46.1875em) {
        .coaching-heading__title {
          font-size: 18px; }
          .coaching-heading__title .hide-on-mobile {
            display: none; } }
    .coaching-heading__text {
      font-size: 14px;
      opacity: 0.75; }
  .coaching-member {
    padding-bottom: 23px;
    position: relative; }
    @media only screen and (max-width: 63.9375em) {
      .coaching-member {
        padding-bottom: 45px; }
        .coaching-member .hide-on-bothTM {
          display: none !important; } }
    .coaching-member .swiper-wrapper {
      flex-direction: initial !important; }
    .coaching-member .swiper-slide {
      padding: 12px; }
      @media only screen and (max-width: 63.9375em) {
        .coaching-member .swiper-slide {
          padding: 8px; }
          .coaching-member .swiper-slide .hide-on-bothTM {
            display: none !important; } }
    .coaching-member .swiper-pagination {
      display: none; }
      @media only screen and (max-width: 63.9375em) {
        .coaching-member .swiper-pagination {
          display: block; }
          .coaching-member .swiper-pagination .hide-on-bothTM {
            display: none !important; } }
      .coaching-member .swiper-pagination-bullet {
        background: #24adc1; }
    .coaching-member__item {
      color: #18191b;
      border-radius: 14px;
      background-color: #fff;
      overflow: hidden;
      transition: all 0.3s;
      max-width: 400px; }
      .coaching-member__item:hover {
        color: #18191b;
        transform: translateY(-8px);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
        opacity: 1;
        transition: all 0.3s; }
    .coaching-member__bg {
      position: relative;
      padding-top: 46.3%;
      overflow: hidden; }
      .coaching-member__bg > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .coaching-member__people {
      text-align: center;
      margin: -50px 0 20px; }
    .coaching-member__image {
      width: 100px;
      height: 100px;
      margin: 0 auto 5px;
      border-radius: 50%;
      border: 5px solid #eff3f7;
      position: relative;
      padding-top: 10%;
      overflow: hidden; }
      .coaching-member__image > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .coaching-member__text {
      font-size: 13px;
      color: rgba(78, 101, 121, 0.75);
      min-height: 21px; }
      @media only screen and (max-width: 46.1875em) {
        .coaching-member__text {
          font-size: 12px; }
          .coaching-member__text .hide-on-mobile {
            display: none; } }
    .coaching-member__content {
      margin: 0 20px 30px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      @media only screen and (max-width: 1440px) {
        .coaching-member__content.custom {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0 0; } }
      .coaching-member__content.custom .coaching-member__sub:nth-child(1) {
        position: relative; }
        .coaching-member__content.custom .coaching-member__sub:nth-child(1)::after {
          position: absolute;
          content: "";
          right: 0;
          top: 50%;
          display: none;
          width: 1.4px;
          height: 80%;
          transform: translateY(-50%);
          background-color: rgba(78, 101, 121, 0.15); }
          @media only screen and (max-width: 1440px) {
            .coaching-member__content.custom .coaching-member__sub:nth-child(1)::after {
              display: block; } }
      .coaching-member__content.custom .coaching-member__sub:nth-child(2) {
        margin-bottom: 10px;
        padding: 0 14px; }
        @media only screen and (max-width: 1440px) {
          .coaching-member__content.custom .coaching-member__sub:nth-child(2) {
            grid-column: 1/3;
            grid-row: 1/2;
            border: 0; } }
    .coaching-member__sub {
      text-align: center; }
      .coaching-member__sub:nth-child(2) {
        padding: 0 20px;
        border-left: 1px solid rgba(78, 101, 121, 0.15);
        border-right: 1px solid rgba(78, 101, 121, 0.15); }
        @media only screen and (max-width: 46.1875em) {
          .coaching-member__sub:nth-child(2) {
            padding: 0 15px; }
            .coaching-member__sub:nth-child(2) .hide-on-mobile {
              display: none; } }
    .coaching-member__info {
      margin-top: 5px; }
      .coaching-member__info > i {
        color: #eff3f7;
        font-size: 15px; }
        .coaching-member__info > i.active {
          color: #faaf3a; }
  .coaching-seemore {
    text-align: center;
    width: fit-content;
    margin: 0 auto; }
    @media only screen and (max-width: 63.9375em) {
      .coaching-seemore {
        margin: 10px auto 0; }
        .coaching-seemore .hide-on-bothTM {
          display: none !important; } }
    .coaching-seemore__link {
      padding: 8px 40px;
      color: #fff;
      background: linear-gradient(67deg, #24adc1 0%, #1795a8 47%);
      border-radius: 7px;
      font-weight: 500; }
    .coaching-seemore__link:hover {
      color: #fff; }

.training {
  background-color: #fff; }
  .training.special {
    overflow: hidden; }
  .training-wrapper {
    padding: 60px 0 90px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .training-wrapper {
        padding: 50px 0 70px; } }
    @media only screen and (max-width: 46.1875em) {
      .training-wrapper {
        padding: 40px 0 50px; }
        .training-wrapper .hide-on-mobile {
          display: none; } }
  .training-program {
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(78, 101, 121, 0.15); }
    @media only screen and (max-width: 46.1875em) {
      .training-program {
        padding-bottom: 30px; }
        .training-program .hide-on-mobile {
          display: none; } }
  .training-share {
    padding: 45px 0 80px; }
    @media only screen and (max-width: 63.9375em) {
      .training-share {
        padding: 30px 0 40px; }
        .training-share .hide-on-bothTM {
          display: none !important; } }
  .training-heading {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px; }
    @media only screen and (max-width: 1600px) {
      .training-heading {
        margin-bottom: 30px; } }
    @media only screen and (max-width: 46.1875em) {
      .training-heading {
        margin-bottom: 25px; }
        .training-heading .hide-on-mobile {
          display: none; } }
    .training-heading__title {
      font-size: 30px; }
      @media only screen and (max-width: 1600px) {
        .training-heading__title {
          font-size: 24px; } }
      @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
        .training-heading__title {
          font-size: 22px; } }
      @media only screen and (max-width: 46.1875em) {
        .training-heading__title {
          font-size: 18px; }
          .training-heading__title .hide-on-mobile {
            display: none; } }
    .training-heading__seemore {
      font-size: 16px;
      color: #faaf3a; }
      @media only screen and (max-width: 46.1875em) {
        .training-heading__seemore {
          font-size: 15px; }
          .training-heading__seemore .hide-on-mobile {
            display: none; } }
      .training-heading__seemore:hover {
        color: #faaf3a; }
      .training-heading__seemore svg {
        margin-left: 5px; }
  .training-primary {
    color: #fff;
    position: relative; }
    @media only screen and (max-width: 46.1875em) {
      .training-primary {
        margin-bottom: 30px; }
        .training-primary .hide-on-mobile {
          display: none; } }
    .training-primary:hover {
      color: #fff; }
    .training-primary__img {
      position: relative;
      padding-top: 57%;
      overflow: hidden;
      border-radius: 14px; }
      .training-primary__img > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      @media only screen and (max-width: 46.1875em) {
        .training-primary__img {
          position: relative;
          padding-top: 59%;
          overflow: hidden; }
          .training-primary__img .hide-on-mobile {
            display: none; }
          .training-primary__img > img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; } }
      .training-primary__img::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 65%;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, #000 120%); }
      .training-primary__img > i {
        position: absolute;
        top: -1px;
        left: 30px;
        color: #fff;
        padding: 10px 6px 20px;
        background-color: #faaf3a;
        clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0); }
    .training-primary__heading {
      position: absolute;
      bottom: 0;
      padding: 24px 30px; }
      @media only screen and (max-width: 46.1875em) {
        .training-primary__heading {
          padding: 12px 15px; }
          .training-primary__heading .hide-on-mobile {
            display: none; } }
    .training-primary__title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      overflow: hidden;
      -webkit-box-orient: vertical; }
      @media only screen and (max-width: 46.1875em) {
        .training-primary__title {
          font-size: 16px; }
          .training-primary__title .hide-on-mobile {
            display: none; } }
    .training-primary__cover {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: flex-start; }
    .training-primary__box {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
    .training-primary__avatar {
      width: 45px;
      height: 45px;
      position: relative;
      padding-top: 25%;
      overflow: hidden;
      border-radius: 50%; }
      .training-primary__avatar > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .training-primary__text {
      padding-left: 8px; }
    .training-primary__name {
      font-size: 14px; }
    .training-primary__position {
      font-size: 13px;
      opacity: 0.75; }
    .training-primary__date {
      font-size: 13px;
      opacity: 0.75;
      padding-left: 22px; }
      .training-primary__date span + span {
        padding-left: 7px; }
      .training-primary__date > span:last-child {
        padding-top: 2px; }
  .training-secondary {
    color: #18191b;
    position: relative;
    padding: 0 7px; }
    .training-secondary:hover p {
      color: #18191b; }
    .training-secondary.special {
      margin-bottom: 30px; }
      @media only screen and (max-width: 1283px) {
        .training-secondary.special {
          margin-bottom: 24px; }
          .training-secondary.special .hide-on-pc-HD {
            display: none; } }
    @media only screen and (max-width: 1283px) {
      .training-secondary {
        padding: 0; }
        .training-secondary .hide-on-pc-HD {
          display: none; } }
    @media only screen and (max-width: 46.1875em) {
      .training-secondary {
        margin-bottom: 30px; }
        .training-secondary .hide-on-mobile {
          display: none; } }
    .training-secondary__img {
      position: relative;
      padding-top: 63%;
      overflow: hidden;
      border-radius: 14px; }
      .training-secondary__img > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      @media only screen and (max-width: 46.1875em) {
        .training-secondary__img {
          position: relative;
          padding-top: 59%;
          overflow: hidden; }
          .training-secondary__img .hide-on-mobile {
            display: none; }
          .training-secondary__img > img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; } }
      .training-secondary__img > i {
        position: absolute;
        top: -1px;
        left: 20px;
        color: #fff;
        padding: 10px 6px 20px;
        background-color: #faaf3a;
        clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0); }
    .training-secondary__heading {
      padding: 15px 0 0; }
    .training-secondary__title {
      font-weight: bold;
      margin-bottom: 14px;
      font-size: 16px;
      line-height: 26px;
      min-height: 48px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      -webkit-box-orient: vertical; }
      @media only screen and (max-width: 46.1875em) {
        .training-secondary__title {
          font-size: 16px;
          line-height: 23px; }
          .training-secondary__title .hide-on-mobile {
            display: none; } }
      .training-secondary__title.special {
        margin-bottom: 10px; }
        @media only screen and (max-width: 1283px) {
          .training-secondary__title.special {
            margin-bottom: 5px; }
            .training-secondary__title.special .hide-on-pc-HD {
              display: none; } }
    .training-secondary__cover {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: flex-start; }
    .training-secondary__box {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
      .training-secondary__box.special {
        padding: 20px 0; }
    .training-secondary__avatar {
      min-width: 45px;
      width: 45px;
      height: 45px;
      position: relative;
      padding-top: 0%;
      overflow: hidden;
      border-radius: 50%; }
      .training-secondary__avatar > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .training-secondary__text {
      padding-left: 8px; }
      .training-secondary__text.special {
        padding-left: 0;
        margin-bottom: 8px; }
    .training-secondary__name {
      font-size: 14px;
      font-weight: 500; }
    .training-secondary__position {
      font-size: 13px;
      opacity: 0.75;
      color: rgba(78, 101, 121, 0.75); }
    .training-secondary__date {
      font-size: 13px;
      opacity: 0.75;
      padding-left: 22px;
      color: #4e6579;
      min-width: 102px;
      font-weight: 500; }
      @media only screen and (max-width: 1283px) {
        .training-secondary__date {
          padding-left: 10px; }
          .training-secondary__date .hide-on-pc-HD {
            display: none; } }
      .training-secondary__date span + span {
        padding-left: 7px; }
      .training-secondary__date svg {
        margin-bottom: 3px; }
      .training-secondary__date.special {
        padding-left: 0; }
  .training-item {
    color: #18191b;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start; }
    .training-item:hover p {
      color: #18191b; }
    .training-item__img {
      width: 80px;
      height: 80px;
      position: relative;
      padding-top: 18%;
      overflow: hidden;
      padding-right: 18%;
      border-radius: 14px; }
      .training-item__img > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .training-item__heading {
      padding: 0 30px 0 13px; }
      @media only screen and (max-width: 1283px) {
        .training-item__heading {
          padding: 0 0 0 13px; }
          .training-item__heading .hide-on-pc-HD {
            display: none; } }
    .training-item__title {
      font-weight: bold;
      margin-bottom: 12px;
      font-size: 14px;
      line-height: 22px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      -webkit-box-orient: vertical; }
    .training-item__cover {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: flex-start; }
    .training-item__box {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
    .training-item__avatar {
      min-width: 25px;
      height: 25px;
      position: relative;
      padding-top: 18%;
      overflow: hidden;
      border-radius: 50%;
      margin-top: -25px; }
      .training-item__avatar > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .training-item__text {
      padding-left: 8px; }
    .training-item__name {
      font-size: 14px; }
    .training-item__position {
      font-size: 13px;
      opacity: 0.75; }
    .training-item__date {
      font-size: 13px;
      opacity: 0.75;
      padding-left: 22px;
      color: #4e6579;
      min-width: 102px; }
      @media only screen and (max-width: 1283px) {
        .training-item__date {
          padding-left: 10px; }
          .training-item__date .hide-on-pc-HD {
            display: none; } }
      .training-item__date span + span {
        padding-left: 7px; }
  .training-item + .training-item {
    padding-top: 20px; }
  @media only screen and (max-width: 63.9375em) {
    .training-cover {
      margin-top: 30px; }
      .training-cover .hide-on-bothTM {
        display: none !important; } }
  .training-slide {
    position: relative; }
    @media only screen and (max-width: 63.9375em) {
      .training-slide {
        padding-bottom: 30px; }
        .training-slide .hide-on-bothTM {
          display: none !important; } }
    .training-slide__pagination {
      display: none; }
      @media only screen and (max-width: 63.9375em) {
        .training-slide__pagination {
          display: block;
          bottom: -6px !important; }
          .training-slide__pagination .hide-on-bothTM {
            display: none !important; } }
    .training-slide .swiper-button-next, .training-slide .swiper-button-prev {
      --width: -50px; }
      @media only screen and (max-width: 1399px) {
        .training-slide .swiper-button-next, .training-slide .swiper-button-prev {
          --width: 0; } }
      @media only screen and (max-width: 63.9375em) {
        .training-slide .swiper-button-next, .training-slide .swiper-button-prev {
          display: none; }
          .training-slide .swiper-button-next .hide-on-bothTM, .training-slide .swiper-button-prev .hide-on-bothTM {
            display: none !important; } }
      .training-slide .swiper-button-next::after, .training-slide .swiper-button-prev::after {
        display: none; }
    .training-slide .swiper-button-next {
      right: var(--width); }
    .training-slide .swiper-button-prev {
      left: var(--width); }
    .training-slide .swiper-button-next, .training-slide .swiper-button-prev {
      top: 32%; }
    .training-slide .swiper-scrollbar {
      display: block;
      background-color: #eff3f7;
      border-radius: 15px;
      height: 5px;
      margin-top: 52px; }
      @media only screen and (max-width: 46.1875em) {
        .training-slide .swiper-scrollbar {
          margin-top: 32px; }
          .training-slide .swiper-scrollbar .hide-on-mobile {
            display: none; } }
      .training-slide .swiper-scrollbar-drag {
        background-color: #24adc1; }
    .training-slide .swiper-secondary {
      padding: 0; }
    .training-slide .swiper-slide {
      max-width: 400px !important; }
    .training-slide .training-secondary {
      padding: 0; }
  .training-banner__cover {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    border-radius: 20px;
    overflow: hidden; }
    @media only screen and (max-width: 46.1875em) {
      .training-banner__cover {
        flex-direction: column;
        border-radius: 0; }
        .training-banner__cover .hide-on-mobile {
          display: none; } }
  .training-banner__inner {
    position: relative;
    width: 50%;
    height: 350px;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 1283px) {
      .training-banner__inner {
        height: 280px; }
        .training-banner__inner .hide-on-pc-HD {
          display: none; } }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .training-banner__inner {
        height: 300px; } }
    @media only screen and (max-width: 46.1875em) {
      .training-banner__inner {
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        height: 200px; }
        .training-banner__inner .hide-on-mobile {
          display: none; }
        .training-banner__inner + .training-banner__inner {
          margin-top: 20px; } }
    .training-banner__inner::after {
      content: "";
      width: 100%;
      height: 100%;
      top: 0;
      position: absolute;
      z-index: 1;
      background-color: rgba(36, 173, 193, 0.9); }
    .training-banner__inner.right {
      justify-content: right; }
      .training-banner__inner.right::after {
        background-color: rgba(78, 101, 121, 0.9); }
      .training-banner__inner.right .training-banner__btn {
        color: #4e6579; }
  .training-banner__content {
    position: relative;
    z-index: 2;
    padding: 0 40px;
    text-align: center;
    width: 70%; }
    @media only screen and (max-width: 1440px) {
      .training-banner__content {
        padding: 0 20px; } }
    @media only screen and (max-width: 63.9375em) {
      .training-banner__content {
        width: 100%;
        padding: 28px; }
        .training-banner__content .hide-on-bothTM {
          display: none !important; } }
  .training-banner__text {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500; }
  .training-banner__title {
    font-size: 30px;
    color: #fff;
    font-weight: 500;
    padding-top: 10px; }
    @media only screen and (max-width: 1283px) {
      .training-banner__title {
        font-size: 22px; }
        .training-banner__title .hide-on-pc-HD {
          display: none; } }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .training-banner__title {
        font-size: 18px; } }
    @media only screen and (max-width: 46.1875em) {
      .training-banner__title {
        font-size: 16px; }
        .training-banner__title .hide-on-mobile {
          display: none; } }
  .training-banner__btn {
    display: inline-block;
    font-weight: 500;
    color: #24adc1;
    min-width: 186px;
    border-radius: 7px;
    padding: 8px 23px;
    margin-top: 25px;
    background-color: #fff; }
  .training-banner__img {
    width: 30%;
    position: relative;
    padding-top: 20.15%;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: -20.15% auto 0; }
    .training-banner__img > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .training-banner__img {
        margin: 20px auto 0;
        width: 70%;
        border-radius: 10px;
        position: relative;
        padding-top: 40%;
        overflow: hidden; }
        .training-banner__img > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; } }
    @media only screen and (max-width: 46.1875em) {
      .training-banner__img {
        margin: 20px auto 0;
        width: 100%;
        border-radius: 10px;
        position: relative;
        padding-top: 68%;
        overflow: hidden; }
        .training-banner__img .hide-on-mobile {
          display: none; }
        .training-banner__img > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; } }
  .training-title {
    font-size: 30px;
    text-align: center;
    font-weight: 500;
    padding: 50px 0; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .training-title {
        padding: 40px 0;
        font-size: 24px; } }
    @media only screen and (max-width: 46.1875em) {
      .training-title {
        padding: 30px 0;
        font-size: 18px; }
        .training-title .hide-on-mobile {
          display: none; } }
  .training-box {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 35px 35px; }
    @media only screen and (max-width: 63.9375em) {
      .training-box {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px 20px; }
        .training-box .hide-on-bothTM {
          display: none !important; } }
    .training-box__item {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: flex-start; }
    .training-box__icon {
      width: 67px;
      min-width: 67px; }
      @media only screen and (max-width: 46.1875em) {
        .training-box__icon {
          width: 50px;
          min-width: 50px; }
          .training-box__icon .hide-on-mobile {
            display: none; } }
    .training-box__text {
      padding: 0 20px 0 24px; }
      @media only screen and (max-width: 1440px) {
        .training-box__text {
          padding: 0 15px 0 15px; } }
    .training-box__title {
      font-weight: 500;
      margin-bottom: 10px; }
      @media only screen and (max-width: 46.1875em) {
        .training-box__title {
          font-size: 14px;
          margin-bottom: 5px; }
          .training-box__title .hide-on-mobile {
            display: none; } }
    .training-box__sub {
      font-style: italic;
      font-size: 14px;
      color: #4e6579; }
  .training-content {
    margin-top: 50px; }
    @media only screen and (max-width: 46.1875em) {
      .training-content {
        margin-top: 30px; }
        .training-content .hide-on-mobile {
          display: none; } }
    .training-content__cover {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
      @media only screen and (max-width: 63.9375em) {
        .training-content__cover {
          flex-direction: column; }
          .training-content__cover .hide-on-bothTM {
            display: none !important; } }
      .training-content__cover + .training-content__cover {
        margin-top: 50px; }
        @media only screen and (max-width: 63.9375em) {
          .training-content__cover + .training-content__cover {
            margin-top: 20px; }
            .training-content__cover + .training-content__cover .hide-on-bothTM {
              display: none !important; } }
      .training-content__cover.special {
        flex-direction: row-reverse;
        margin-bottom: 50px; }
        @media only screen and (max-width: 1440px) {
          .training-content__cover.special {
            margin-bottom: 0; } }
        @media only screen and (max-width: 63.9375em) {
          .training-content__cover.special {
            flex-direction: column; }
            .training-content__cover.special .hide-on-bothTM {
              display: none !important; } }
        .training-content__cover.special .training-content__inner {
          margin: 0 0 0 30px; }
          @media only screen and (max-width: 63.9375em) {
            .training-content__cover.special .training-content__inner {
              margin: 0 0 20px 0; }
              .training-content__cover.special .training-content__inner .hide-on-bothTM {
                display: none !important; } }
    .training-content__inner {
      margin: 0 30px 0 0; }
      @media only screen and (max-width: 63.9375em) {
        .training-content__inner {
          margin: 0 0 20px 0; }
          .training-content__inner .hide-on-bothTM {
            display: none !important; } }
    .training-content__inner, .training-content__img {
      width: 50%; }
      @media only screen and (max-width: 63.9375em) {
        .training-content__inner, .training-content__img {
          width: 100%; }
          .training-content__inner .hide-on-bothTM, .training-content__img .hide-on-bothTM {
            display: none !important; } }
    .training-content__header {
      margin-bottom: 30px; }
    .training-content__title {
      font-family: "UTMASHeartbeat", sans-serif;
      font-size: 50px;
      color: #24adc1;
      margin-bottom: -20px; }
      @media only screen and (max-width: 1283px) {
        .training-content__title {
          font-size: 40px; }
          .training-content__title .hide-on-pc-HD {
            display: none; } }
      @media only screen and (max-width: 1283px) {
        .training-content__title {
          margin-bottom: -10px; }
          .training-content__title .hide-on-pc-HD {
            display: none; } }
      .training-content__title > span {
        font-size: 100px; }
        @media only screen and (max-width: 1283px) {
          .training-content__title > span {
            font-size: 80px; }
            .training-content__title > span .hide-on-pc-HD {
              display: none; } }
    .training-content__text {
      font-size: 30px;
      font-weight: 500;
      line-height: 40px; }
      @media only screen and (max-width: 1600px) {
        .training-content__text {
          font-size: 22px;
          line-height: initial; } }
      @media only screen and (max-width: 1283px) {
        .training-content__text {
          font-size: 18px; }
          .training-content__text .hide-on-pc-HD {
            display: none; } }
      @media only screen and (max-width: 46.1875em) {
        .training-content__text {
          font-size: 16px; }
          .training-content__text .hide-on-mobile {
            display: none; } }
    .training-content__img > img {
      width: 100%;
      height: auto; }
      .training-content__img > img:first-child {
        width: max-content;
        max-width: max-content; }
        @media only screen and (max-width: 1440px) {
          .training-content__img > img:first-child {
            width: 100%;
            max-width: 100%; } }
    .training-content__img img + img {
      margin-top: 20px; }
    .training-content__img.special {
      position: relative; }
      .training-content__img.special > img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        margin-top: 40px; }
        @media only screen and (max-width: 1440px) {
          .training-content__img.special > img {
            width: 100%;
            max-width: 100%;
            position: relative;
            top: initial;
            transform: initial;
            right: initial;
            margin-top: 0; } }

.premium {
  padding: 60px 0 90px;
  background-color: #eff3f7; }
  @media only screen and (max-width: 46.1875em) {
    .premium {
      padding: 40px 0 40px; }
      .premium .hide-on-mobile {
        display: none; } }
  .premium-wrapper {
    position: relative; }
  .premium-heading {
    margin-bottom: 25px; }
    .premium-heading__title {
      font-size: 30px; }
  .premium-priceList__heading {
    margin-bottom: 30px; }
    @media only screen and (max-width: 46.1875em) {
      .premium-priceList__heading {
        position: relative;
        margin-bottom: 25px; }
        .premium-priceList__heading .hide-on-mobile {
          display: none; }
        .premium-priceList__heading .way-wrapper {
          justify-content: center; } }
  @media only screen and (max-width: 46.1875em) {
    .premium-priceList__option {
      margin-bottom: 16px; }
      .premium-priceList__option .hide-on-mobile {
        display: none; } }
  .premium-priceList__option .way-wrapper {
    font-weight: 500;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .premium-priceList__option .way-option {
    position: relative;
    cursor: pointer;
    text-indent: -9999px;
    width: 56px;
    height: 30px;
    margin: 0 20px;
    display: block;
    border-radius: 100px;
    background: #24afc2; }
    .premium-priceList__option .way-option::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 3px;
      width: 24px;
      height: 24px;
      background: #fff;
      border-radius: 50%;
      transition: 0.3s;
      transform: translateY(-50%); }
    .premium-priceList__option .way-option:active:after {
      width: 34px; }
  .premium-priceList__option .way-two {
    color: #707070;
    opacity: 0.5; }
  .premium-priceList__check {
    display: none; }
    .premium-priceList__check:checked + .way-wrapper .way-one {
      color: #707070;
      opacity: 0.5; }
    .premium-priceList__check:checked + .way-wrapper .way-two {
      color: #000;
      opacity: 1; }
    .premium-priceList__check:checked + .way-wrapper .way-option::after {
      left: calc(100% - 3px);
      transform: translate(-100%, -50%); }
  .premium-priceList__month {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    flex-flow: row wrap;
    justify-content: center; }
  .premium-priceList__year {
    display: none;
    flex-flow: row wrap;
    justify-content: center; }
  .premium-priceList__cover {
    position: relative;
    text-align: center;
    background-color: #fff;
    border-radius: 14px;
    padding: 35px 20px 8px;
    height: 100%;
    box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
    transition: all 0.3s; }
    .premium-priceList__cover:hover {
      transform: translateY(-15px); }
    .premium-priceList__cover .del {
      text-decoration: line-through; }
  .premium-priceList__sale {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -7px;
    right: -7px; }
    .premium-priceList__sale::before {
      content: "";
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      background-color: #24adc1;
      clip-path: polygon(37% 0, 100% 63%, 100% 100%, 0 0);
      z-index: 1; }
    .premium-priceList__sale > p {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      transform: rotate(45deg);
      position: absolute;
      top: 31%;
      right: 10%;
      z-index: 2;
      min-width: 61px; }
    .premium-priceList__sale .icon1 {
      width: 7px;
      height: 7px;
      background-color: #1795a8;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0; }
    .premium-priceList__sale .icon2 {
      width: 7px;
      height: 7px;
      background-color: #1795a8;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 0; }
  .premium-priceList__link {
    margin: 0 0 24px 0;
    font-size: 25px;
    font-weight: bold;
    color: #24adc1;
    padding-top: 22px; }
  .premium-priceList__item {
    width: 20%;
    margin-bottom: 20px;
    padding: 0 12px;
    height: 100%; }
    @media only screen and (max-width: 1366px) {
      .premium-priceList__item {
        width: 25%; } }
    @media only screen and (min-width: 63.9375em) and (max-width: 1241px) {
      .premium-priceList__item {
        width: 33.33333333%; } }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .premium-priceList__item {
        width: 50%; } }
    @media only screen and (max-width: 46.1875em) {
      .premium-priceList__item {
        width: 95%; }
        .premium-priceList__item .hide-on-mobile {
          display: none; } }
    .premium-priceList__item .premium-priceList__sale {
      display: none; }
    .premium-priceList__item.sale .premium-priceList__cover {
      border: 2px solid #24adc1;
      transform: translateY(-15px); }
      @media only screen and (max-width: 63.9375em) {
        .premium-priceList__item.sale .premium-priceList__cover {
          transform: translateY(0); }
          .premium-priceList__item.sale .premium-priceList__cover .hide-on-bothTM {
            display: none !important; } }
    .premium-priceList__item.sale .premium-priceList__sale {
      display: block; }
  .premium-priceList__note {
    text-align: center;
    color: #4e6579;
    font-size: 14px;
    font-style: oblique;
    opacity: 0.5; }
  .premium-priceList__name {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px; }
    .premium-priceList__name.special {
      font-style: italic;
      color: #24adc1; }
  .premium-priceList__pricebase {
    height: 21px;
    margin-bottom: -4px;
    color: rgba(78, 101, 121, 0.5);
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto; }
  .premium-priceList__price {
    margin: 0 0 24px 0;
    padding-top: 22px; }
    .premium-priceList__price > span {
      font-size: 14px;
      opacity: 0.5; }
    .premium-priceList__price > span:first-child {
      font-size: 25px;
      font-weight: bold;
      color: #24adc1;
      opacity: 1; }
  .premium-priceList__btn {
    color: #24adc1;
    padding: 8px 0 8px;
    border: 1px solid #24adc1;
    border-radius: 7px;
    margin-bottom: 10px;
    transition: all 0.3s; }
    .premium-priceList__btn:hover {
      color: #fff;
      background-color: #24adc1; }
  .premium-priceList__text {
    color: #4e6579;
    font-size: 14px; }
    .premium-priceList__text > p {
      border-top: 1px solid rgba(78, 101, 121, 0.15);
      padding: 20px 0;
      font-size: 14px; }
    .premium-priceList__text > p:first-child {
      border-top: 0; }
    .premium-priceList__text .note {
      font-size: 13px;
      opacity: 0.5;
      font-style: oblique;
      border-top: 0;
      padding-top: 0;
      margin-top: -10px; }
  .premium-priceList__tab {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-flow: row wrap; }
    @media only screen and (max-width: 1283px) {
      .premium-priceList__tab {
        position: relative;
        left: 0;
        transform: initial;
        justify-content: center;
        margin-bottom: 15px; }
        .premium-priceList__tab .hide-on-pc-HD {
          display: none; } }
  .premium-priceList__tabLink {
    padding: 7px 15px;
    border: 1px solid #4e6579;
    background-color: transparent;
    color: #4e6579;
    border-radius: 5px;
    transition: all 0.3s;
    margin: 0 10px 10px 0; }
    @media only screen and (max-width: 46.1875em) {
      .premium-priceList__tabLink {
        padding: 5px 10px;
        font-size: 14px; }
        .premium-priceList__tabLink .hide-on-mobile {
          display: none; } }
    .premium-priceList__tabLink.active, .premium-priceList__tabLink:hover {
      color: #fff;
      border-color: #24adc1;
      background-color: #24adc1; }

.program-wrapper {
  padding: 40px 0 145px; }
  @media only screen and (max-width: 46.1875em) {
    .program-wrapper {
      padding: 30px 0 80px; }
      .program-wrapper .hide-on-mobile {
        display: none; } }

.program-list {
  padding: 0 0 45px 0; }
  @media only screen and (max-width: 46.1875em) {
    .program-list {
      padding: 0 0 35px 0; }
      .program-list .hide-on-mobile {
        display: none; } }
  .program-list.profile {
    padding-bottom: 0; }
    .program-list.profile .training-primary,
    .program-list.profile .training-secondary {
      padding: 0; }
      .program-list.profile .training-primary__date,
      .program-list.profile .training-secondary__date {
        padding-left: 0; }
  .program-list .training-primary,
  .program-list .training-secondary {
    padding: 0 4px;
    margin-bottom: 24px; }
    @media only screen and (max-width: 1366px) {
      .program-list .training-primary,
      .program-list .training-secondary {
        padding: 0;
        margin-bottom: 10px; } }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .program-list .training-primary,
      .program-list .training-secondary {
        margin-bottom: 15px; } }
    @media only screen and (max-width: 46.1875em) {
      .program-list .training-primary,
      .program-list .training-secondary {
        margin-bottom: 30px; }
        .program-list .training-primary .hide-on-mobile,
        .program-list .training-secondary .hide-on-mobile {
          display: none; } }
  .program-list .training-primary__img {
    position: relative;
    padding-top: 47.6%;
    overflow: hidden; }
    .program-list .training-primary__img > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    @media only screen and (max-width: 46.1875em) {
      .program-list .training-primary__img {
        position: relative;
        padding-top: 57%;
        overflow: hidden; }
        .program-list .training-primary__img .hide-on-mobile {
          display: none; }
        .program-list .training-primary__img > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; } }
  .program-list .training-secondary__img {
    position: relative;
    padding-top: 60.5%;
    overflow: hidden; }
    .program-list .training-secondary__img > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    @media only screen and (max-width: 46.1875em) {
      .program-list .training-secondary__img {
        position: relative;
        padding-top: 47.5%;
        overflow: hidden; }
        .program-list .training-secondary__img .hide-on-mobile {
          display: none; }
        .program-list .training-secondary__img > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; } }

.program-page__number {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center; }

.program-page__item {
  border: 1px solid #e2e2e2;
  border-radius: 50%;
  color: #707070;
  background-color: #fff;
  margin-left: 10px; }
  .program-page__item.active, .program-page__item:hover {
    border: 1px solid #24adc1;
    color: #fff;
    background-color: #24adc1; }

.program-page__item, .program-page__prev, .program-page__next, .program-page__dots {
  width: 31px;
  height: 31px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center; }

.program-page__dots {
  margin-left: 10px; }

.program-page__next {
  margin-left: 10px; }

.single-bg {
  padding-top: 325px;
  background: linear-gradient(83deg, #0c8ecf 0%, #3fb5d6 65%, #14add3 68%, #16b8d6 98%); }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .single-bg {
      padding-top: 290px; } }
  @media only screen and (max-width: 46.1875em) {
    .single-bg {
      padding-top: 240px; }
      .single-bg .hide-on-mobile {
        display: none; } }
  .single-bg.special {
    padding-top: 190px; }
    @media only screen and (max-width: 63.9375em) {
      .single-bg.special {
        padding-top: 0; }
        .single-bg.special .hide-on-bothTM {
          display: none !important; } }

.single-wrapper {
  width: 904px;
  margin: -285px auto 100px;
  background-color: #fff;
  border-radius: 16px; }
  @media only screen and (max-width: 63.9375em) {
    .single-wrapper {
      width: 100%; }
      .single-wrapper .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .single-wrapper {
      margin: -250px auto 75px; } }
  @media only screen and (max-width: 46.1875em) {
    .single-wrapper {
      margin: -210px auto 40px; }
      .single-wrapper .hide-on-mobile {
        display: none; } }
  .single-wrapper.special {
    margin: -150px auto 100px;
    width: 996px; }
    @media only screen and (max-width: 63.9375em) {
      .single-wrapper.special {
        margin: 30px auto 50px;
        width: 100%; }
        .single-wrapper.special .hide-on-bothTM {
          display: none !important; } }

.single-heading {
  min-height: 255px; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .single-heading {
      min-height: 200px; } }
  @media only screen and (max-width: 46.1875em) {
    .single-heading {
      min-height: 15px; }
      .single-heading .hide-on-mobile {
        display: none; } }
  .single-heading__info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0 35px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .single-heading__info {
        padding: 45px 0 25px; } }
    @media only screen and (max-width: 46.1875em) {
      .single-heading__info {
        padding: 30px 0 20px;
        display: block; }
        .single-heading__info .hide-on-mobile {
          display: none; } }
    .single-heading__info .training-secondary__cover {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
      @media only screen and (max-width: 46.1875em) {
        .single-heading__info .training-secondary__cover {
          justify-content: center; }
          .single-heading__info .training-secondary__cover .hide-on-mobile {
            display: none; } }
    .single-heading__info .training-secondary__avatar {
      width: 70px;
      height: 70px; }
      @media only screen and (max-width: 46.1875em) {
        .single-heading__info .training-secondary__avatar {
          width: 45px;
          height: 45px; }
          .single-heading__info .training-secondary__avatar .hide-on-mobile {
            display: none; } }
    .single-heading__info .training-secondary__text {
      padding: 5px 24px 5px 15px;
      border-right: 1px solid rgba(78, 101, 121, 0.3); }
    .single-heading__info .training-secondary__date {
      padding-left: 18px; }
  .single-heading__page {
    color: #24adc1;
    font-size: 14px;
    font-weight: bold;
    padding-right: 24px; }
    @media only screen and (max-width: 46.1875em) {
      .single-heading__page {
        text-align: center;
        padding: 0 0 10px 0; }
        .single-heading__page .hide-on-mobile {
          display: none; } }
  .single-heading__title {
    font-size: 26px;
    font-weight: bold;
    line-height: 38px;
    text-align: center;
    width: 65%;
    margin: 0 auto;
    padding-bottom: 43px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .single-heading__title {
        font-size: 24px;
        line-height: initial;
        width: 90%;
        padding-bottom: 35px; } }
    @media only screen and (max-width: 46.1875em) {
      .single-heading__title {
        font-size: 18px;
        line-height: initial;
        width: 90%;
        padding-bottom: 30px; }
        .single-heading__title .hide-on-mobile {
          display: none; } }

.single-content__img {
  position: relative;
  padding-top: 60%;
  overflow: hidden; }
  .single-content__img > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.single-content__sub {
  padding: 60px 92px 50px;
  position: relative; }
  .single-content__sub img {
    width: 100%;
    height: auto; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .single-content__sub {
      padding: 40px 30px 50px; } }
  @media only screen and (max-width: 46.1875em) {
    .single-content__sub {
      padding: 30px 15px 40px; }
      .single-content__sub .hide-on-mobile {
        display: none; } }

.single-content__bg {
  position: absolute;
  top: 55px;
  left: 57px; }
  @media only screen and (max-width: 63.9375em) {
    .single-content__bg {
      top: 12px;
      left: 12px;
      opacity: 0.7; }
      .single-content__bg .hide-on-bothTM {
        display: none !important; } }

.single-content__heading {
  font-size: 18px;
  font-style: italic;
  margin-bottom: 36px; }
  @media only screen and (max-width: 46.1875em) {
    .single-content__heading {
      font-size: 16px;
      margin-bottom: 20px; }
      .single-content__heading .hide-on-mobile {
        display: none; } }

.single-content__title {
  font-size: 18px;
  margin-bottom: 20px; }
  @media only screen and (max-width: 46.1875em) {
    .single-content__title {
      margin-bottom: 12px; }
      .single-content__title .hide-on-mobile {
        display: none; } }

.single-content__text {
  font-size: 14px;
  color: #4e6579;
  margin-bottom: 20px; }
  @media only screen and (max-width: 46.1875em) {
    .single-content__text {
      margin-bottom: 8px; }
      .single-content__text .hide-on-mobile {
        display: none; } }

.single-content__cover {
  padding-top: 40px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .single-content__cover {
      padding-top: 35px; } }
  @media only screen and (max-width: 46.1875em) {
    .single-content__cover {
      padding-top: 20px; }
      .single-content__cover .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .single-content__cover.special {
      flex-direction: column; }
      .single-content__cover.special .hide-on-mobile {
        display: none; } }

.single-content__space {
  font-size: 15px;
  margin: 0 5px;
  font-weight: 500; }

.single-content__count {
  min-width: 18px; }

.single-content__activity {
  line-height: 1.2;
  color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  border: 0;
  padding: 7px 10px 6px;
  border-radius: 5px;
  background-color: #24adc1; }

.single-content__status {
  transition: all 0.3s; }
  .single-content__status.active .icon-like {
    display: none; }
  .single-content__status.active .icon-success {
    display: block; }
  .single-content__status > i {
    margin-bottom: 2px; }
  .single-content__status .icon-success {
    display: none; }

.single-content__follow {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: right; }

.single-content__icon {
  padding-left: 10px; }

.single-content__social {
  font-size: 14px;
  color: #4e6579;
  padding: 4px 4px 0 0; }

.single-content__detail * {
  all: revert; }

.single-content__detail p {
  line-height: 26px !important; }

.single-content__like {
  border: 0;
  background: #24adc1;
  color: #fff;
  transition: all 0.3s;
  padding: 6px 15px 5px;
  border-radius: 5px; }
  @media only screen and (max-width: 46.1875em) {
    .single-content__like {
      margin-bottom: 15px; }
      .single-content__like .hide-on-mobile {
        display: none; } }
  .single-content__like > span {
    color: #fff;
    font-size: 17px; }
  .single-content__like:hover, .single-content__like.active {
    color: #fff; }
    .single-content__like:hover .fa-regular, .single-content__like.active .fa-regular {
      display: none; }
    .single-content__like:hover .fa-solid, .single-content__like.active .fa-solid {
      display: inline-block;
      margin-left: 5px; }
  .single-content__like .fa-regular {
    margin-left: 5px; }
  .single-content__like .fa-solid {
    display: none; }

.slide {
  padding: 0 0 110px;
  overflow: hidden; }
  @media only screen and (max-width: 63.9375em) {
    .slide {
      padding: 0 0 60px; }
      .slide .hide-on-bothTM {
        display: none !important; } }
  .slide-heading {
    font-size: 18px;
    padding-bottom: 24px; }
  .slide .swiper-slide-prev {
    visibility: hidden; }
  .slide .training-secondary {
    margin-top: 0; }

.filter-sort, .filter-course {
  margin-top: 36px; }
  @media only screen and (max-width: 63.9375em) {
    .filter-sort, .filter-course {
      margin-top: 18px; }
      .filter-sort .hide-on-bothTM, .filter-course .hide-on-bothTM {
        display: none !important; } }

@media only screen and (max-width: 63.9375em) {
  .filter-sort {
    display: none; }
    .filter-sort .hide-on-bothTM {
      display: none !important; } }

.filter-sort__heading {
  color: #18191b;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px; }

.filter-sort__more {
  font-size: 15px;
  font-weight: 500;
  color: #24adc1;
  text-align: center;
  padding: 6px;
  cursor: pointer;
  transition: all 0.3s linear; }
  .filter-sort__more:hover {
    opacity: 0.8; }
  .filter-sort__more.active .height-zoom {
    display: none; }
  .filter-sort__more.active .height-small {
    display: block; }
  .filter-sort__more .height-small {
    display: none; }

.filter-sort__group + .filter-sort__group {
  padding-top: 26px;
  border-top: 1px solid rgba(78, 101, 121, 0.15); }

.filter-sort__group {
  position: relative;
  padding-bottom: 28px; }
  .filter-sort__group:first-child {
    padding-bottom: 0; }
  .filter-sort__group .account-care__value {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .filter-sort__group .account-care__filed {
    padding-left: 20px; }
  .filter-sort__group .account-care__label {
    background-color: #fff; }
  .filter-sort__group .account-care__intended::after {
    width: calc(100% + 20px);
    left: -20px; }
  .filter-sort__group .account-form__label {
    color: #18191b;
    font-weight: 500; }
  .filter-sort__group .account-form__input {
    padding: 13px 41px 13px 20px; }
  .filter-sort__group .account-form__group .select2-container {
    background-color: #fff; }
  .filter-sort__group .form-select {
    background-position: right 18px center;
    background-size: 12px 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.002' height='7.5' viewBox='0 0 10.002 7.5'%3E%3Cg id='arrow-downward' transform='translate(-4.999 -6.667)'%3E%3Cpath id='Path_6478' data-name='Path 6478' d='M11,15.5a1.433,1.433,0,0,1-1.108-.533l-3.508-4.25a1.75,1.75,0,0,1-.217-1.842A1.467,1.467,0,0,1,7.491,8h7.017a1.467,1.467,0,0,1,1.325.875,1.75,1.75,0,0,1-.217,1.842l-3.508,4.25A1.433,1.433,0,0,1,11,15.5Z' transform='translate(-1 -1.333)' fill='%23707070'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.filter-sort__select {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 20px;
  transition: all 0.8s linear; }

.filter-sort__star > i {
  color: #faaf3a; }

.filter-sort__search {
  position: relative; }
  .filter-sort__search > input::placeholder {
    color: rgba(78, 101, 121, 0.5); }

.filter-sort__text {
  margin-right: 4px; }

.filter-sort__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%); }
  .filter-sort__icon > svg path {
    fill: rgba(78, 101, 121, 0.5); }

.filter-sort__other {
  display: none;
  margin-top: 20px; }
  .filter-sort__other.active {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }

.filter-sort__input {
  width: 50%;
  padding: 5px 10px;
  height: 35px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  border: 1px solid rgba(78, 101, 121, 0.1);
  border-radius: 5px; }
  .filter-sort__input + .filter-sort__input {
    margin-left: 5px; }

.filter-sort__btn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: max-content;
  margin-left: 5px;
  border: 0;
  background-color: #24adc1;
  color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
  height: 33px; }

.filter-course {
  padding-left: 42px;
  padding-bottom: 80px;
  border-left: 1.4px solid rgba(78, 101, 121, 0.15); }
  @media only screen and (max-width: 63.9375em) {
    .filter-course {
      padding-left: 0;
      border-left: 0; }
      .filter-course .hide-on-bothTM {
        display: none !important; } }
  .filter-course__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px; }
    @media only screen and (max-width: 46.1875em) {
      .filter-course__header {
        align-items: flex-start;
        flex-direction: column; }
        .filter-course__header .hide-on-mobile {
          display: none; } }
  .filter-course__list {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 20px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .filter-course__list {
        grid-template-columns: repeat(2, 1fr); } }
    @media only screen and (max-width: 46.1875em) {
      .filter-course__list {
        gap: 14px 14px;
        grid-template-columns: repeat(2, 1fr); }
        .filter-course__list .hide-on-mobile {
          display: none; } }
    .filter-course__list .coaching-member__people {
      margin: -50px 0 12px; }
      @media only screen and (max-width: 46.1875em) {
        .filter-course__list .coaching-member__people {
          margin: -50px 0 6px; }
          .filter-course__list .coaching-member__people .hide-on-mobile {
            display: none; } }
    .filter-course__list .coaching-member__info {
      margin-top: 0px;
      min-height: 26px; }
    .filter-course__list .coaching-member__content {
      padding: 0 20px 24px;
      margin: 0; }
      @media only screen and (max-width: 1440px) {
        .filter-course__list .coaching-member__content {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0px 0px; } }
      @media only screen and (max-width: 46.1875em) {
        .filter-course__list .coaching-member__content {
          padding: 0px 2px 20px; }
          .filter-course__list .coaching-member__content .hide-on-mobile {
            display: none; } }
    .filter-course__list .coaching-member__sub:nth-child(1) {
      position: relative; }
      .filter-course__list .coaching-member__sub:nth-child(1)::after {
        position: absolute;
        content: "";
        right: -3px;
        top: 50%;
        display: none;
        width: 1.4px;
        height: 80%;
        transform: translateY(-50%);
        background-color: rgba(78, 101, 121, 0.15); }
        @media only screen and (max-width: 1440px) {
          .filter-course__list .coaching-member__sub:nth-child(1)::after {
            display: block; } }
    .filter-course__list .coaching-member__sub:nth-child(2) {
      margin-bottom: 10px;
      padding: 0 14px; }
      @media only screen and (max-width: 1440px) {
        .filter-course__list .coaching-member__sub:nth-child(2) {
          grid-column: 1/3;
          grid-row: 1/2;
          border: 0; } }
  .filter-course__select {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width: 30%; }
    @media only screen and (max-width: 1440px) {
      .filter-course__select {
        width: 80%; } }
    @media only screen and (max-width: 46.1875em) {
      .filter-course__select {
        width: 80%; }
        .filter-course__select .hide-on-mobile {
          display: none; } }
    .filter-course__select .account-form__label {
      display: block;
      width: inherit;
      margin-bottom: 0; }
    .filter-course__select .account-form__input {
      padding: 9px 32px 9px 20px;
      font-size: 14px;
      color: #4e6579; }
  .filter-course__wrapper {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(78, 101, 121, 0.15); }
  .filter-course__detail, .filter-course__term, .filter-course__sort {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .filter-course__sort {
    margin-top: 16px;
    flex-wrap: wrap; }
  .filter-course__term {
    margin-right: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px; }
    .filter-course__term:last-child {
      margin-right: 0; }
  .filter-course__detail {
    color: #fff;
    border-radius: 20px;
    padding: 5px 8px 5px 20px;
    background-color: #4e6579; }
    .filter-course__detail.special {
      border-radius: 5px;
      background-color: rgba(23, 149, 168, 0.1); }
      .filter-course__detail.special .filter-course__name {
        font-size: 13px;
        font-weight: 500;
        color: #24adc1; }
  .filter-course__icon {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 16px;
    cursor: pointer;
    transition: all 0.3s linear; }
    .filter-course__icon:hover > svg path {
      fill: #24adc1; }
  .filter-course__link {
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    text-decoration: underline; }
    .filter-course__link:hover {
      opacity: 0.9; }
  @media only screen and (max-width: 46.1875em) {
    .filter-course__text {
      font-size: 20px;
      margin-bottom: 8px; }
      .filter-course__text .hide-on-mobile {
        display: none; } }
  .filter-course__category {
    padding-bottom: 25px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-flow: row wrap; }
  .filter-course__box {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    padding: 4px 10px 4px 4px;
    border: 1px solid rgba(78, 101, 121, 0.25);
    border-radius: 10px;
    background-color: transparent;
    width: fit-content;
    margin: 0 20px 20px 0; }
    @media only screen and (max-width: 46.1875em) {
      .filter-course__box {
        width: 100%; }
        .filter-course__box .hide-on-mobile {
          display: none; } }
    .filter-course__box.active, .filter-course__box:hover {
      border-color: #24adc1;
      background-color: rgba(36, 173, 193, 0.1); }
      .filter-course__box.active .filter-course__boxText, .filter-course__box:hover .filter-course__boxText {
        color: #24adc1; }
  .filter-course__boxImg {
    min-width: 45px;
    height: 45px;
    position: relative;
    padding-top: 0%;
    overflow: hidden;
    border-radius: 14px; }
    .filter-course__boxImg > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .filter-course__boxText {
    font-size: 14px;
    padding-left: 16px;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical; }

.filter-pagination {
  margin-top: 38px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .filter-pagination {
      flex-direction: column; }
      .filter-pagination .hide-on-mobile {
        display: none; } }
  .filter-pagination__text {
    color: #707070;
    font-weight: 500; }
    @media only screen and (max-width: 46.1875em) {
      .filter-pagination__text {
        margin-bottom: 15px; }
        .filter-pagination__text .hide-on-mobile {
          display: none; } }
  .filter-pagination__list {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .filter-pagination .page-item + .page-item,
  .filter-pagination__item + .filter-pagination__item {
    margin-left: 10px; }
  .filter-pagination .page-item.active > span,
  .filter-pagination .page-item.active > a, .filter-pagination__item.active > span,
  .filter-pagination__item.active > a {
    color: #fff !important;
    border-color: #24adc1;
    background-color: #24adc1; }
  .filter-pagination .page-item > span,
  .filter-pagination .page-item > a, .filter-pagination__item > span,
  .filter-pagination__item > a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    line-height: 1;
    font-weight: 500;
    border-radius: 50%;
    color: #707070 !important;
    background-color: #fff;
    border: 1px solid rgba(112, 112, 112, 0.2); }
  .filter-pagination .pagination .page-item:last-child > a,
  .filter-pagination .pagination .page-item:first-child > a, .filter-pagination-next > a, .filter-pagination-prev > a {
    border: 0;
    background-color: transparent; }
    .filter-pagination .pagination .page-item:last-child > a:focus, .filter-pagination .pagination .page-item:last-child > a:active,
    .filter-pagination .pagination .page-item:first-child > a:focus,
    .filter-pagination .pagination .page-item:first-child > a:active, .filter-pagination-next > a:focus, .filter-pagination-next > a:active, .filter-pagination-prev > a:focus, .filter-pagination-prev > a:active {
      box-shadow: none; }
  .filter-pagination .pagination .page-item:last-child.disabled,
  .filter-pagination .pagination .page-item:first-child.disabled, .filter-pagination-next.disabled, .filter-pagination-prev.disabled {
    opacity: 0; }
  .filter-pagination .pagination .page-item:first-child > span {
    border: 0;
    background-color: transparent; }

.filter-offcanvas .offcanvas-body {
  padding: 10px 24px; }

.filter-mobile {
  display: none;
  margin: 26px 0 8px;
  padding: 6px 20px;
  color: #4e6579;
  border-radius: 5px;
  border: 1.4px solid rgba(78, 101, 121, 0.25); }
  @media only screen and (max-width: 63.9375em) {
    .filter-mobile {
      display: inline-block; }
      .filter-mobile .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 46.1875em) {
    .filter-mobile {
      padding: 6px 16px; }
      .filter-mobile .hide-on-mobile {
        display: none; } }
  .filter-mobile > i {
    margin-right: 6px; }

.lecturers-bg {
  padding-top: 300px;
  background: linear-gradient(83deg, #0c8ecf 0%, #3fb5d6 65%, #14add3 68%, #16b8d6 98%); }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .lecturers-bg {
      padding-top: 230px; } }
  @media only screen and (max-width: 46.1875em) {
    .lecturers-bg {
      padding-top: 0; }
      .lecturers-bg .hide-on-mobile {
        display: none; } }

.lecturers-wrapper {
  position: relative;
  margin-top: -230px;
  padding: 0 0 58px 0; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .lecturers-wrapper {
      margin-top: -193px; } }
  @media only screen and (max-width: 46.1875em) {
    .lecturers-wrapper {
      margin-top: 30px;
      padding: 0 0 15px 0; }
      .lecturers-wrapper .hide-on-mobile {
        display: none; } }

.lecturers-featured {
  position: relative;
  padding-top: 25.6%;
  overflow: hidden;
  border-radius: 14px;
  overflow: hidden; }
  .lecturers-featured > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media only screen and (max-width: 46.1875em) {
    .lecturers-featured {
      position: relative;
      padding-top: 50%;
      overflow: hidden; }
      .lecturers-featured .hide-on-mobile {
        display: none; }
      .lecturers-featured > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; } }
  .lecturers-featured::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 55%;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 15%, #000 140%); }

.lecturers-info {
  position: absolute;
  bottom: 28px;
  left: 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .lecturers-info {
      position: relative;
      display: block;
      margin-top: -50px;
      left: 0; }
      .lecturers-info .hide-on-mobile {
        display: none; } }
  .lecturers-info__avatar {
    width: 160px;
    height: 160px;
    position: relative;
    padding-top: 0%;
    overflow: hidden;
    border-radius: 50%;
    border: 12px solid #eff3f7; }
    .lecturers-info__avatar > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .lecturers-info__avatar {
        width: 130px;
        height: 130px;
        position: relative;
        padding-top: 0%;
        overflow: hidden; }
        .lecturers-info__avatar > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; } }
    @media only screen and (max-width: 46.1875em) {
      .lecturers-info__avatar {
        position: relative;
        padding-top: 0%;
        overflow: hidden;
        width: 120px;
        height: 120px;
        border: 6px solid #eff3f7;
        margin: 0 auto; }
        .lecturers-info__avatar .hide-on-mobile {
          display: none; }
        .lecturers-info__avatar > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; } }
  .lecturers-info__cover {
    color: #fff;
    padding-left: 24px;
    margin-top: -20px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .lecturers-info__cover {
        padding-left: 14px; } }
    @media only screen and (max-width: 46.1875em) {
      .lecturers-info__cover {
        color: #18191b;
        padding-left: 0;
        margin-top: 10px;
        text-align: center; }
        .lecturers-info__cover .hide-on-mobile {
          display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .lecturers-info__detail {
      min-width: 40%; }
      .lecturers-info__detail .hide-on-mobile {
        display: none; } }
  .lecturers-info__name {
    font-size: 26px;
    font-weight: bold;
    padding-bottom: 4px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .lecturers-info__name {
        font-size: 22px; } }
    @media only screen and (max-width: 46.1875em) {
      .lecturers-info__name {
        font-size: 16px;
        padding-bottom: 8px; }
        .lecturers-info__name .hide-on-mobile {
          display: none; } }
  .lecturers-info__position {
    font-size: 14px;
    padding-bottom: 8px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .lecturers-info__position {
        padding-bottom: 4px; } }
    @media only screen and (max-width: 46.1875em) {
      .lecturers-info__position {
        padding-bottom: 0; }
        .lecturers-info__position .hide-on-mobile {
          display: none; } }
  .lecturers-info__sub {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    font-size: 13px; }
    @media only screen and (max-width: 46.1875em) {
      .lecturers-info__sub {
        flex-flow: row wrap;
        justify-content: center; }
        .lecturers-info__sub .hide-on-mobile {
          display: none; }
        .lecturers-info__sub svg path {
          fill: #18191b; } }
  .lecturers-info__star > i {
    font-size: 15px; }
    @media only screen and (max-width: 46.1875em) {
      .lecturers-info__star > i .hide-on-mobile {
        display: none; }
      .lecturers-info__star > i:nth-child(2), .lecturers-info__star > i:nth-child(3), .lecturers-info__star > i:nth-child(4), .lecturers-info__star > i:nth-child(5) {
        display: none; } }
    .lecturers-info__star > i.active {
      color: #faaf3a; }
  .lecturers-info__valeuate {
    opacity: 0.75;
    padding: 0 28px 0 12px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .lecturers-info__valeuate {
        padding: 0 20px 0 8px; } }
    @media only screen and (max-width: 46.1875em) {
      .lecturers-info__valeuate {
        padding: 0 10px 0 4px;
        font-size: 13px; }
        .lecturers-info__valeuate .hide-on-mobile {
          display: none; } }
  .lecturers-info__total {
    opacity: 0.75; }
    .lecturers-info__total svg {
      margin: 0 8px 4px 0; }
      @media only screen and (max-width: 46.1875em) {
        .lecturers-info__total svg {
          margin: 0 4px 4px 0; }
          .lecturers-info__total svg .hide-on-mobile {
            display: none; } }
    .lecturers-info__total + .lecturers-info__total {
      padding-left: 24px; }
      @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
        .lecturers-info__total + .lecturers-info__total {
          padding-left: 18px; } }
      @media only screen and (max-width: 46.1875em) {
        .lecturers-info__total + .lecturers-info__total {
          padding-left: 12px; }
          .lecturers-info__total + .lecturers-info__total .hide-on-mobile {
            display: none; } }

.profile #sidebar-more,
.profile #comment-more {
  display: none; }

.profile-wrapper {
  margin-bottom: 30px; }

.profile-sidebar__wrapper {
  padding: 37px 36px;
  background-color: #fff;
  border-radius: 14px; }
  @media only screen and (max-width: 63.9375em) {
    .profile-sidebar__wrapper {
      padding: 30px 15px; }
      .profile-sidebar__wrapper .hide-on-bothTM {
        display: none !important; } }

.profile-sidebar__info {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(78, 101, 121, 0.15); }

.profile-sidebar__title {
  font-size: 18px;
  margin-bottom: 15px; }

.profile-sidebar__content {
  font-size: 14px;
  color: #4e6579; }

.profile-sidebar__seemore {
  border: 0;
  background: transparent;
  margin-top: 8px; }
  .profile-sidebar__seemore > p,
  .profile-sidebar__seemore > span {
    position: relative;
    overflow: visible;
    font-size: 14px;
    color: #24adc1;
    font-weight: bold; }
  .profile-sidebar__seemore > p:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 7.5px;
    right: -20px;
    top: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.002' height='7.5' viewBox='0 0 10.002 7.5'%3E%3Cpath id='Path_6483' data-name='Path 6483' d='M11,15.5a1.433,1.433,0,0,1-1.108-.533l-3.508-4.25a1.75,1.75,0,0,1-.217-1.842A1.467,1.467,0,0,1,7.491,8h7.017a1.467,1.467,0,0,1,1.325.875,1.75,1.75,0,0,1-.217,1.842l-3.508,4.25A1.433,1.433,0,0,1,11,15.5Z' transform='translate(-5.999 -8)' fill='%2324adc1'/%3E%3C/svg%3E%0A"); }
  .profile-sidebar__seemore > span:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 7.5px;
    right: -20px;
    top: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.002' height='7.5' viewBox='0 0 10.002 7.5'%3E%3Cpath id='Path_7260' data-name='Path 7260' d='M11,15.5a1.433,1.433,0,0,1-1.108-.533l-3.508-4.25a1.75,1.75,0,0,1-.217-1.842A1.467,1.467,0,0,1,7.491,8h7.017a1.467,1.467,0,0,1,1.325.875,1.75,1.75,0,0,1-.217,1.842l-3.508,4.25A1.433,1.433,0,0,1,11,15.5Z' transform='translate(16.001 15.5) rotate(180)' fill='%2324adc1'/%3E%3C/svg%3E%0A"); }

.profile-sidebar__field {
  padding: 0 0 30px; }

.profile-sidebar__cover {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px; }

.profile-sidebar__box .box-img {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
  border-radius: 14px; }
  .profile-sidebar__box .box-img > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.profile-sidebar__box .box-text {
  text-align: center;
  font-size: 14px;
  color: #4e6579;
  padding-top: 10px;
  line-height: 1.4; }

.profile-sidebar__contact {
  padding: 30px 0;
  border-bottom: 1px solid rgba(78, 101, 121, 0.15); }

.profile-sidebar__sub {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  color: #4e6579; }
  .profile-sidebar__sub + .profile-sidebar__sub {
    padding-top: 16px; }
  .profile-sidebar__sub > span > svg {
    margin: 0 12px 1px 0;
    margin-bottom: 1px; }

.profile-sidebar__link {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-flow: row wrap; }
  .profile-sidebar__link > a {
    color: #4e6579; }
  .profile-sidebar__link span {
    margin: 0 3px; }

.profile-sidebar .single-content__follow {
  padding-top: 30px;
  justify-content: left; }
  .profile-sidebar .single-content__follow > a:first-child {
    padding-left: 0; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .profile-sidebar .single-content__follow > a {
      padding-left: 5px; } }

.profile-sidebar__btn > button {
  width: 100%;
  height: 41px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 7px; }
  .profile-sidebar__btn > button:first-child {
    font-weight: 500;
    color: #fff;
    background-color: #faaf3a;
    border: 0; }
  .profile-sidebar__btn > button:last-child {
    border: 1px solid #24adc1;
    background-color: transparent;
    color: #24adc1;
    transition: all 0.3s; }
    .profile-sidebar__btn > button:last-child:hover {
      background-color: #24adc1;
      color: #fff; }

.profile-sidebar__btn button + button {
  margin-top: 15px; }

.profile-content {
  padding: 37px 0 80px 19.5px; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .profile-content {
      padding: 30px 0 50px 0; } }
  @media only screen and (max-width: 46.1875em) {
    .profile-content {
      padding: 20px 0; }
      .profile-content .hide-on-mobile {
        display: none; } }
  .profile-content .program-page__number {
    padding-top: 22px;
    justify-content: right; }
    @media only screen and (max-width: 46.1875em) {
      .profile-content .program-page__number {
        padding-top: 15px;
        justify-content: center; }
        .profile-content .program-page__number .hide-on-mobile {
          display: none; } }
  .profile-content__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 18px; }
    @media only screen and (max-width: 1399px) {
      .profile-content__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 18px; } }
    @media only screen and (max-width: 63.9375em) {
      .profile-content__list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 18px 18px; }
        .profile-content__list .hide-on-bothTM {
          display: none !important; } }
    .profile-content__list.special {
      margin-top: 30px; }
    .profile-content__list .profile-item {
      padding: 0;
      transition: all 0.3s; }
      .profile-content__list .profile-item:hover {
        transform: translateY(-10px); }
  .profile-content__nav {
    border-bottom: 1px solid rgba(78, 101, 121, 0.15);
    margin-bottom: 26px !important; }
    @media only screen and (max-width: 63.9375em) {
      .profile-content__nav {
        flex-direction: column;
        border-bottom: 0; }
        .profile-content__nav .hide-on-bothTM {
          display: none !important; } }
    .profile-content__nav .nav-item {
      margin-left: 32px; }
      @media only screen and (max-width: 63.9375em) {
        .profile-content__nav .nav-item {
          margin: 20px 0 0 0; }
          .profile-content__nav .nav-item .hide-on-bothTM {
            display: none !important; } }
      .profile-content__nav .nav-item:first-child {
        margin-left: 0; }
    .profile-content__nav .nav-link {
      padding: 0 0 18px 0;
      background-color: transparent !important;
      font-size: 18px;
      font-weight: 500;
      color: #4e6579;
      position: relative; }
      @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
        .profile-content__nav .nav-link {
          padding: 0 0 12px 0; } }
      @media only screen and (max-width: 46.1875em) {
        .profile-content__nav .nav-link {
          padding: 10px 20px;
          border: 1px solid #24adc1;
          border-radius: 20px; }
          .profile-content__nav .nav-link .hide-on-mobile {
            display: none; } }
      .profile-content__nav .nav-link.active {
        color: #24adc1;
        font-weight: bold; }
        @media only screen and (max-width: 46.1875em) {
          .profile-content__nav .nav-link.active {
            color: #fff;
            background-color: #24adc1 !important; }
            .profile-content__nav .nav-link.active .hide-on-mobile {
              display: none; } }
        .profile-content__nav .nav-link.active::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 4px;
          left: 0;
          bottom: -2px;
          background-color: #24adc1;
          border-radius: 4px; }
          @media only screen and (max-width: 46.1875em) {
            .profile-content__nav .nav-link.active::after {
              display: none; }
              .profile-content__nav .nav-link.active::after .hide-on-mobile {
                display: none; } }

.profile-item {
  padding: 0 1.5px 18px; }
  @media only screen and (max-width: 63.9375em) {
    .profile-item {
      padding: 0 0 15px; }
      .profile-item .hide-on-bothTM {
        display: none !important; } }
  .profile-item__wrapper {
    padding: 10px 10px 14px;
    background-color: #fff;
    border-radius: 14px; }
  .profile-item__img {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
    border-radius: 7px; }
    .profile-item__img > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .profile-item__content {
    padding: 0 5px; }
  .profile-item__heading {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0; }
  .profile-item__category {
    font-size: 14px;
    color: rgba(36, 173, 193, 0.75);
    padding: 5px 15px;
    border-radius: 50px;
    background-color: #e8f7f9;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 70%; }
  .profile-item__student {
    font-size: 14px;
    color: rgba(78, 101, 121, 0.75); }
    .profile-item__student > span > strong {
      color: rgba(24, 25, 27, 0.75); }
  .profile-item__title {
    font-weight: bold;
    color: #18191b;
    min-height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    min-height: 48px; }
  .profile-item__sub {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: rgba(78, 101, 121, 0.75);
    border-bottom: 1px solid rgba(78, 101, 121, 0.15);
    padding: 14px 0 15px; }
    .profile-item__sub svg {
      margin: 0 3px 2px 0; }
  .profile-item__star svg {
    margin: 0 3px 5px 0; }
  .profile-item__cover {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 5px; }
  .profile-item__info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .profile-item__avatar {
    min-width: 45px;
    height: 45px;
    position: relative;
    padding-top: 23%;
    overflow: hidden;
    border-radius: 50%; }
    .profile-item__avatar > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .profile-item__text {
    padding: 0 8px; }
  .profile-item__name {
    font-size: 14px;
    color: rgba(24, 25, 27, 0.75);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .profile-item__location {
    font-size: 13px;
    color: rgba(78, 101, 121, 0.75);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .profile-item__pirce {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
    .profile-item__pirce.special {
      flex-direction: column; }
  .profile-item__sale {
    font-weight: bold;
    color: #27b737; }
  .profile-item__base {
    font-size: 13px;
    padding-left: 5px;
    color: rgba(78, 101, 121, 0.5); }

.profile-evaluate {
  padding-top: 34px;
  padding-bottom: 34px; }
  .profile-evaluate__content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 14px;
    background-color: #fff;
    padding: 30px 36px; }
    @media only screen and (max-width: 1283px) {
      .profile-evaluate__content {
        padding: 30px 20px; }
        .profile-evaluate__content .hide-on-pc-HD {
          display: none; } }
    @media only screen and (max-width: 63.9375em) {
      .profile-evaluate__content {
        display: block; }
        .profile-evaluate__content .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .profile-evaluate__content {
        padding: 25px 15px; }
        .profile-evaluate__content .hide-on-mobile {
          display: none; } }
  .profile-evaluate__total {
    text-align: center;
    width: 42%;
    padding-right: 36px; }
    @media only screen and (max-width: 1650px) {
      .profile-evaluate__total {
        width: 35%; } }
    @media only screen and (max-width: 1283px) {
      .profile-evaluate__total {
        padding-right: 20px;
        width: 28%; }
        .profile-evaluate__total .hide-on-pc-HD {
          display: none; } }
    @media only screen and (max-width: 63.9375em) {
      .profile-evaluate__total {
        width: 100%;
        padding: 0 0 20px 0; }
        .profile-evaluate__total .hide-on-bothTM {
          display: none !important; } }
  .profile-evaluate__scores {
    font-size: 50px; }
    @media only screen and (max-width: 46.1875em) {
      .profile-evaluate__scores {
        font-size: 35px; }
        .profile-evaluate__scores .hide-on-mobile {
          display: none; } }
  .profile-evaluate__star > i {
    font-size: 18px;
    color: #eff3f7; }
    .profile-evaluate__star > i.active {
      color: #faaf3a; }
  .profile-evaluate__star i + i {
    margin: 0; }
  .profile-evaluate__sub {
    font-size: 14px;
    color: rgba(78, 101, 121, 0.75); }
  .profile-evaluate__progress {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 34px;
    border-left: 1px solid rgba(78, 101, 121, 0.15); }
    @media only screen and (max-width: 1283px) {
      .profile-evaluate__progress {
        padding-left: 20px; }
        .profile-evaluate__progress .hide-on-pc-HD {
          display: none; } }
    @media only screen and (max-width: 63.9375em) {
      .profile-evaluate__progress {
        padding-left: 0;
        border-left: 0; }
        .profile-evaluate__progress .hide-on-bothTM {
          display: none !important; } }
  .profile-evaluate__primary {
    width: 100%;
    padding-right: 18px; }
  .profile-evaluate__bar {
    min-height: 25.59px;
    padding-top: 11px; }
    .profile-evaluate__bar:nth-child(1) .progress-bar {
      background-color: #00ba0c; }
    .profile-evaluate__bar:nth-child(2) .progress-bar {
      background-color: #00ba74; }
    .profile-evaluate__bar:nth-child(3) .progress-bar {
      background-color: #fbb851; }
    .profile-evaluate__bar:nth-child(4) .progress-bar {
      background-color: #fb8551; }
    .profile-evaluate__bar:nth-child(5) .progress-bar {
      background-color: #e6453c; }
    .profile-evaluate__bar .progress {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      height: 5px;
      border-radius: 50px; }
      .profile-evaluate__bar .progress-bar {
        height: 100%;
        border-radius: 50px; }
  .profile-evaluate__secondary {
    min-width: 170px;
    margin-left: auto; }
    @media only screen and (max-width: 46.1875em) {
      .profile-evaluate__secondary {
        min-width: 0; }
        .profile-evaluate__secondary .hide-on-mobile {
          display: none; } }
  .profile-evaluate__cover span + span {
    padding-left: 12px; }
    @media only screen and (max-width: 46.1875em) {
      .profile-evaluate__cover span + span {
        padding-left: 0; }
        .profile-evaluate__cover span + span .hide-on-mobile {
          display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .profile-evaluate__cover .profile-evaluate__star {
      display: none; }
      .profile-evaluate__cover .profile-evaluate__star .hide-on-mobile {
        display: none; } }
  .profile-evaluate__starmobile {
    max-width: 50px;
    display: none; }
    @media only screen and (max-width: 46.1875em) {
      .profile-evaluate__starmobile {
        display: block; }
        .profile-evaluate__starmobile .hide-on-mobile {
          display: none; } }
    .profile-evaluate__starmobile i {
      font-size: 18px;
      color: #eff3f7;
      padding-right: 5px; }
      .profile-evaluate__starmobile i.active {
        color: #faaf3a; }

.profile-comment {
  padding-bottom: 45px; }
  .profile-comment__item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    padding: 17px 0 8px; }
    @media only screen and (max-width: 46.1875em) {
      .profile-comment__item {
        padding: 10px 0 5px; }
        .profile-comment__item .hide-on-mobile {
          display: none; } }
  .profile-comment__avatar {
    position: relative;
    padding-top: 8%;
    overflow: hidden;
    min-width: 85px;
    height: 85px;
    border-radius: 50%; }
    .profile-comment__avatar > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    @media only screen and (max-width: 46.1875em) {
      .profile-comment__avatar {
        min-width: 45px;
        height: 45px; }
        .profile-comment__avatar .hide-on-mobile {
          display: none; } }
  .profile-comment__info {
    padding: 20px 0 0 0;
    padding-left: 20px;
    width: 100%; }
    @media only screen and (max-width: 46.1875em) {
      .profile-comment__info {
        padding: 0;
        padding-left: 15px; }
        .profile-comment__info .hide-on-mobile {
          display: none; } }
  .profile-comment__name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(24, 25, 27, 0.75); }
  .profile-comment__star > i {
    color: #eff3f7; }
    .profile-comment__star > i.active {
      color: #faaf3a; }
  .profile-comment__content {
    font-size: 14px;
    font-style: italic;
    color: rgba(24, 25, 27, 0.75);
    padding: 18px 0 22px;
    border-bottom: 1px solid rgba(78, 101, 121, 0.15); }
    @media only screen and (max-width: 46.1875em) {
      .profile-comment__content {
        padding: 10px 0 15px; }
        .profile-comment__content .hide-on-mobile {
          display: none; } }
  .profile-comment__btn {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px; }

.profile-feedback__wrapper {
  background-color: #fff;
  border-radius: 14px;
  padding: 34px 36px 40px; }
  .profile-feedback__wrapper.custom {
    padding: 30px 0; }
  @media only screen and (max-width: 46.1875em) {
    .profile-feedback__wrapper {
      padding: 30px 15px 30px; }
      .profile-feedback__wrapper .hide-on-mobile {
        display: none; } }

.profile-feedback__sub {
  padding: 0 0 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }

.profile-feedback__text {
  font-size: 15px;
  font-weight: 500;
  padding-right: 10px; }

.profile-feedback__star {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #eff3f7;
  direction: rtl;
  text-align: left; }

.profile-feedback__li {
  cursor: pointer; }
  .profile-feedback__li + .profile-feedback__li {
    padding-right: 5px; }
  .profile-feedback__li:hover, .profile-feedback__li.selected,
  .profile-feedback__li:hover ~ .profile-feedback__li,
  .profile-feedback__li.selected ~ .profile-feedback__li {
    color: #faaf3a;
    transition: 0.3s ease; }

.profile-feedback__info {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding-bottom: 18px; }
  @media only screen and (max-width: 46.1875em) {
    .profile-feedback__info {
      display: block; }
      .profile-feedback__info .hide-on-mobile {
        display: none; } }

.profile-feedback__input {
  width: 100%; }
  .profile-feedback__input + .profile-feedback__input {
    padding-left: 24px; }
    @media only screen and (max-width: 46.1875em) {
      .profile-feedback__input + .profile-feedback__input {
        padding: 18px 0 0; }
        .profile-feedback__input + .profile-feedback__input .hide-on-mobile {
          display: none; } }
  .profile-feedback__input > input {
    width: 100%;
    min-height: 45px;
    padding: 0 22px;
    border-radius: 5px;
    border: 1px solid rgba(78, 101, 121, 0.25);
    font-size: 14px;
    color: #4e6579; }

.profile-feedback__lable {
  font-size: 14px;
  color: rgba(78, 101, 121, 0.5);
  padding-bottom: 10px; }

.profile-feedback__textarea {
  padding-bottom: 25px; }
  .profile-feedback__textarea > textarea {
    height: 252px;
    width: 100%;
    padding: 14px 22px;
    border-radius: 5px;
    border: 1px solid rgba(78, 101, 121, 0.25);
    font-size: 14px;
    color: #4e6579; }

.profile-feedback__submit {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center; }

.profile-feedback__btn {
  padding: 12px 150px;
  background: linear-gradient(0deg, #24adc1 0%, #1795a8 47%);
  border-radius: 7px;
  border: 1px solid rgba(78, 101, 121, 0.25);
  color: #fff;
  text-transform: uppercase;
  font-weight: 500; }
  .profile-feedback__btn:hover {
    color: #fff !important; }
  @media only screen and (max-width: 46.1875em) {
    .profile-feedback__btn {
      padding: 10px 30px; }
      .profile-feedback__btn .hide-on-mobile {
        display: none; } }

.profile-teacher__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start; }

.profile-teacher__content * {
  all: revert; }

.profile-teacher__content p {
  line-height: 26px !important; }

.profile-teacher__wrap {
  margin: 0 auto 10px; }

.profile-teacher__img {
  min-width: 200px;
  width: 200px;
  height: 200px;
  position: relative;
  padding-top: 0%;
  overflow: hidden;
  border-radius: 50%;
  margin-bottom: 10px; }
  .profile-teacher__img > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media only screen and (max-width: 63.9375em) {
    .profile-teacher__img {
      min-width: 100px;
      width: 100px;
      height: 100px;
      margin: 0 auto; }
      .profile-teacher__img .hide-on-bothTM {
        display: none !important; } }

.profile-teacher__info {
  margin-top: 20px;
  text-align: center; }
  @media only screen and (max-width: 46.1875em) {
    .profile-teacher__info {
      margin-top: 15px; }
      .profile-teacher__info .hide-on-mobile {
        display: none; } }

.profile-teacher__name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: uppercase; }

.profile-teacher__sub {
  color: #f33066; }

.course #caurse-more,
.course #comment-more {
  display: none; }

.course-intro {
  background: linear-gradient(83deg, #0c8ecf 0%, #3fb5d6 65%, #14add3 68%, #16b8d6 98%);
  position: relative;
  z-index: 0; }
  .course-intro__wrapper {
    color: #fff;
    padding: 70px 0 60px; }
    @media only screen and (min-width: 1650px) {
      .course-intro__wrapper {
        padding: 50px 0 40px; } }
    @media only screen and (max-width: 63.9375em) {
      .course-intro__wrapper {
        padding: 30px 0; }
        .course-intro__wrapper .hide-on-bothTM {
          display: none !important; } }
  .course-intro__category {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 15px;
    background-color: #faaf3a;
    border-radius: 50px; }
  .course-intro__title {
    font-size: 36px;
    font-weight: 500;
    padding: 15px 0 12px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .course-intro__title {
        font-size: 28px; } }
    @media only screen and (max-width: 46.1875em) {
      .course-intro__title {
        text-align: center;
        width: 90%;
        margin: 0 auto;
        font-size: 20px;
        line-height: 1.6; }
        .course-intro__title .hide-on-mobile {
          display: none; } }
  .course-intro__text {
    opacity: 0.75;
    padding-bottom: 24px; }
  .course-intro__lecturers {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .course-intro__avatar {
    min-width: 70px;
    height: 70px;
    position: relative;
    padding-top: 7%;
    overflow: hidden;
    border-radius: 50%; }
    .course-intro__avatar > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    @media only screen and (max-width: 46.1875em) {
      .course-intro__avatar {
        min-width: 45px;
        height: 45px; }
        .course-intro__avatar .hide-on-mobile {
          display: none; } }
  .course-intro__info {
    padding: 5px 23px 5px 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    min-width: 151px; }
    @media only screen and (max-width: 46.1875em) {
      .course-intro__info {
        min-width: 140px;
        padding: 5px 15px 5px 10px; }
        .course-intro__info .hide-on-mobile {
          display: none; } }
  .course-intro__name {
    font-size: 14px;
    font-weight: 500; }
  .course-intro__position {
    font-size: 13px;
    opacity: 0.75; }
  .course-intro__cover {
    padding-left: 24px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-flow: row wrap; }
  .course-intro__sub {
    padding-right: 22px;
    font-size: 14px; }
    @media only screen and (max-width: 46.1875em) {
      .course-intro__sub {
        padding-right: 15px; }
        .course-intro__sub .hide-on-mobile {
          display: none; } }
    .course-intro__sub svg {
      margin: 0 5px 4px 0; }
    .course-intro__sub span:last-child {
      opacity: 0.7; }

.course-detail {
  background-color: #fff;
  padding: 60px 0 0;
  position: relative;
  z-index: 1; }
  @media only screen and (max-width: 63.9375em) {
    .course-detail {
      padding: 40px 0 0; }
      .course-detail .hide-on-bothTM {
        display: none !important; } }
  .course-detail .row {
    flex-direction: row-reverse; }
    @media only screen and (max-width: 63.9375em) {
      .course-detail .row {
        flex-direction: initial; }
        .course-detail .row .hide-on-bothTM {
          display: none !important; } }

.course-content {
  position: relative;
  z-index: 2; }

.course-listing, .course-describe, .course-accordion, .course-lecturers, .course-evaluate {
  padding-bottom: 45px; }
  @media only screen and (max-width: 46.1875em) {
    .course-listing, .course-describe, .course-accordion, .course-lecturers, .course-evaluate {
      padding-bottom: 30px; }
      .course-listing .hide-on-mobile, .course-describe .hide-on-mobile, .course-accordion .hide-on-mobile, .course-lecturers .hide-on-mobile, .course-evaluate .hide-on-mobile {
        display: none; } }

.course-listing__content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 30px; }
  @media only screen and (max-width: 46.1875em) {
    .course-listing__content {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 2px 20px; }
      .course-listing__content .hide-on-mobile {
        display: none; } }

.course-listing__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start; }
  .course-listing__item svg {
    margin: 0 0 3px; }

.course-listing__text {
  font-size: 14px;
  color: #4e6579;
  padding-left: 8px; }

.course-describe * {
  all: revert; }

.course-describe__text * {
  font-size: 14px;
  color: #4e6579;
  all: revert; }

.course-describe p {
  line-height: 26px !important; }

.course-accordion__item {
  padding-bottom: 10px; }

.course-accordion__title {
  font-size: 18px;
  line-height: 1.6;
  color: #24adc1;
  font-weight: 500;
  padding: 0 0 15px 0;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }

.course-accordion__stt {
  min-width: 40px;
  height: 40px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(36, 173, 193, 0.1);
  border-radius: 50%;
  margin: 0 15px 0 0; }

.course-accordion__content {
  padding-left: 55px;
  position: relative;
  color: #4e6579 !important; }
  @media only screen and (max-width: 46.1875em) {
    .course-accordion__content {
      padding-left: 45px; }
      .course-accordion__content .hide-on-mobile {
        display: none; } }
  .course-accordion__content::before {
    content: "";
    width: 1px;
    height: 100%;
    left: 20px;
    position: absolute;
    background-color: #24adc1; }
  .course-accordion__content .accordion-item {
    border: 0; }
  .course-accordion__content .accordion-button {
    font-size: 16px;
    color: #4e6579 !important;
    padding: 0 0 15px 0; }
    .course-accordion__content .accordion-button svg {
      margin: 0 10px 0 0; }
    .course-accordion__content .accordion-button:focus {
      border: 0; }
    .course-accordion__content .accordion-button::after {
      margin-left: 12px;
      width: 12px;
      height: 12px;
      background-size: cover; }
    .course-accordion__content .accordion-button:not(.collapsed) {
      background-color: transparent;
      box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
      .course-accordion__content .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
  .course-accordion__content .accordion-body {
    padding: 0; }
    .course-accordion__content .accordion-body__item {
      position: relative; }
      .course-accordion__content .accordion-body__item:last-child .accordion-body__cover {
        border-bottom: 0; }
    .course-accordion__content .accordion-body__icon {
      position: absolute;
      left: 0;
      top: -2px;
      min-width: 25px;
      height: 63px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center; }
      @media only screen and (max-width: 46.1875em) {
        .course-accordion__content .accordion-body__icon {
          height: 50%; }
          .course-accordion__content .accordion-body__icon .hide-on-mobile {
            display: none; } }
    .course-accordion__content .accordion-body__cover {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-items: flex-start;
      color: #4e6579;
      font-size: 14px;
      margin-left: 32px;
      padding: 20px 0;
      border-bottom: 1px solid rgba(78, 101, 121, 0.15); }
      @media only screen and (max-width: 46.1875em) {
        .course-accordion__content .accordion-body__cover {
          padding: 10px 0; }
          .course-accordion__content .accordion-body__cover .hide-on-mobile {
            display: none; } }
    .course-accordion__content .accordion-body__sub {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      justify-content: right; }
      .course-accordion__content .accordion-body__sub svg {
        margin: 0 5px 3px 0; }
      @media only screen and (max-width: 46.1875em) {
        .course-accordion__content .accordion-body__sub {
          min-width: 130px; }
          .course-accordion__content .accordion-body__sub .hide-on-mobile {
            display: none; } }
    .course-accordion__content .accordion-body__time {
      padding-left: 25px; }
      @media only screen and (max-width: 46.1875em) {
        .course-accordion__content .accordion-body__time {
          padding-left: 15px; }
          .course-accordion__content .accordion-body__time .hide-on-mobile {
            display: none; } }
    .course-accordion__content .accordion-body__video {
      position: relative;
      margin: 10px 0 0; }
      .course-accordion__content .accordion-body__video video {
        width: 100%;
        height: auto; }

.course-lecturers__profile {
  display: flex; }

.course-lecturers__avatar {
  min-width: 120px;
  height: 120px;
  position: relative;
  padding-top: 11%;
  overflow: hidden;
  border-radius: 50%; }
  .course-lecturers__avatar > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media only screen and (max-width: 46.1875em) {
    .course-lecturers__avatar {
      min-width: 60px;
      height: 60px; }
      .course-lecturers__avatar .hide-on-mobile {
        display: none; } }

.course-lecturers__content {
  padding-left: 20px; }

.course-lecturers__cover {
  padding-top: 5px; }
  @media only screen and (max-width: 46.1875em) {
    .course-lecturers__cover {
      padding-top: 0; }
      .course-lecturers__cover .hide-on-mobile {
        display: none; } }

.course-lecturers__name {
  font-size: 20px;
  font-weight: bold; }

.course-lecturers__position {
  font-size: 14px;
  font-style: italic;
  color: #4e6579;
  padding: 5px 0 8px; }

.course-lecturers__sub {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #4e6579;
  padding-bottom: 24px; }
  @media only screen and (max-width: 46.1875em) {
    .course-lecturers__sub {
      padding-bottom: 14px; }
      .course-lecturers__sub .hide-on-mobile {
        display: none; } }
  .course-lecturers__sub svg {
    margin: 0 5px 3px 0; }

.course-lecturers__total + .course-lecturers__total {
  padding-left: 24px; }

.course-lecturers__info .profile-sidebar__info {
  padding-bottom: 0;
  border-bottom: 0; }

.course-evaluate {
  padding-top: 0; }

.course-sidebar {
  position: fixed;
  top: 120px;
  z-index: 2;
  width: 20%;
  max-width: 422px;
  text-align: center;
  padding-left: 40px; }
  @media only screen and (min-width: 1650px) {
    .course-sidebar {
      top: 110px; } }
  @media only screen and (max-width: 1650px) {
    .course-sidebar {
      width: 22%; } }
  @media only screen and (max-width: 1440px) {
    .course-sidebar {
      width: 25%; } }
  @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
    .course-sidebar {
      padding-left: 0;
      width: 27%; }
      .course-sidebar .hide-on-pc-Lose {
        display: none; } }
  @media only screen and (max-width: 63.9375em) {
    .course-sidebar {
      top: 0;
      width: 70%;
      margin: 0 auto 30px;
      padding-left: 0;
      position: relative; }
      .course-sidebar .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 46.1875em) {
    .course-sidebar {
      width: 100%; }
      .course-sidebar .hide-on-mobile {
        display: none; } }
  .course-sidebar__wrapper {
    background-color: #fff;
    border-radius: 14px;
    padding: 14px 14px 40px;
    width: 118%;
    border: 1px solid #e4e8eb;
    box-shadow: 0px 1px 20px 5px rgba(0, 0, 0, 0.05); }
    @media only screen and (min-width: 2000px) {
      .course-sidebar__wrapper {
        width: 100%; } }
    @media only screen and (max-width: 63.9375em) {
      .course-sidebar__wrapper {
        width: 100%; }
        .course-sidebar__wrapper .hide-on-bothTM {
          display: none !important; } }
  .course-sidebar__img {
    position: relative;
    padding-top: 55%;
    overflow: hidden;
    border-radius: 7px; }
    .course-sidebar__img > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .course-sidebar__content {
    padding: 18px 10px 36px; }
    @media only screen and (min-width: 1650px) {
      .course-sidebar__content {
        padding: 10px; } }
  .course-sidebar__price {
    padding-bottom: 5px; }
  .course-sidebar__sale {
    font-size: 26px;
    color: #27b737;
    font-weight: bold; }
  .course-sidebar__base {
    color: #4e6579; }
  .course-sidebar__star > i {
    font-size: 18px;
    color: #eff3f7; }
    .course-sidebar__star > i.active {
      color: #faaf3a; }
  .course-sidebar__sub {
    font-size: 14px;
    color: rgba(78, 101, 121, 0.75); }
  .course-sidebar__detail {
    padding: 8px 0 0; }
  .course-sidebar__item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(78, 101, 121, 0.15); }
    @media only screen and (min-width: 1650px) {
      .course-sidebar__item {
        padding: 8px 0; } }
    .course-sidebar__item:last-child {
      border-bottom: 0; }
    .course-sidebar__item svg {
      margin: 0 12px 2px 0; }
  .course-sidebar__text {
    font-size: 14px;
    color: #4e6579;
    padding-left: 14px; }
  .course-sidebar__contact {
    padding: 0 10px; }
  .course-sidebar__register {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    background: #24adc1;
    border-radius: 7px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 12px;
    border: 0;
    width: 100%; }
    .course-sidebar__register:hover {
      color: #fff; }
    .course-sidebar__register svg {
      margin: 0 12px 3px 0; }
  .course-sidebar__phone {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 0;
    border-radius: 7px;
    background-color: rgba(36, 173, 193, 0.1);
    border: 1px dashed #24adc1;
    color: #24adc1;
    font-weight: 500;
    margin-bottom: 12px; }
    .course-sidebar__phone:hover {
      color: #24adc1; }
    .course-sidebar__phone svg {
      margin: 0 12px 3px 0; }
  .course-sidebar__note {
    font-size: 14px;
    color: rgba(78, 101, 121, 0.75); }

.course-popup .account-form__title {
  font-size: 22px;
  font-weight: bold; }

.course-popup .account-form__phone > input {
  margin-right: 0;
  max-width: 100%; }

.course-popup .account-form__phone > textarea {
  min-height: 150px; }

.course-popup .account-form__group {
  margin-bottom: 30px; }

.course-popup .account-teacher__group {
  margin-bottom: 0; }

.course-footer {
  position: relative;
  z-index: 0;
  padding-bottom: 100px;
  background-color: #fff; }
  @media only screen and (max-width: 46.1875em) {
    .course-footer {
      padding-bottom: 30px; }
      .course-footer .hide-on-mobile {
        display: none; } }

.course-slide {
  padding-top: 48px;
  background-color: #eff3f7;
  position: relative;
  z-index: 3; }
  .course-slide .profile-item__pirce {
    flex-direction: column; }

.course-modal .modal-header {
  border-bottom: 0;
  padding-bottom: 0; }
  .course-modal .modal-header .btn-close {
    position: absolute;
    top: 20px;
    right: 20px; }

.course-modal .modal-dialog {
  max-width: fit-content !important; }
  @media only screen and (max-width: 46.1875em) {
    .course-modal .modal-dialog {
      max-width: 100% !important; }
      .course-modal .modal-dialog .hide-on-mobile {
        display: none; } }

.course-modal .modal-dialog {
  max-width: 820px; }

.course-modal .modal-content {
  border: 0;
  background: transparent; }

.course-modal.package .modal-dialog {
  max-width: 100%; }

.course-modal.package .account-form {
  background-color: #eff3f7; }

.course-modal__form {
  margin: 18px 0 12px;
  padding-left: 0;
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 5px;
  border: 1.4px solid rgba(78, 101, 121, 0.24); }
  @media only screen and (max-width: 46.1875em) {
    .course-modal__form {
      padding: 10px 8px;
      flex-flow: row wrap;
      justify-content: center; }
      .course-modal__form .hide-on-mobile {
        display: none; } }
  .course-modal__form select {
    font-size: 16px;
    width: 24%;
    padding: 0;
    margin-right: 10px;
    border: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px; }
    @media only screen and (max-width: 46.1875em) {
      .course-modal__form select {
        width: 60%;
        margin-right: 0px; }
        .course-modal__form select .hide-on-mobile {
          display: none; } }
    .course-modal__form select:focus {
      box-shadow: none;
      border: 0; }

.course-modal__data {
  min-height: 48vh;
  margin-top: 28px; }
  .course-modal__data.active .course-modal__text {
    display: block; }
  .course-modal__data.active .account-form__btn, .course-modal__data.active .account-form__list {
    display: none; }
  .course-modal__data .monitor-info__student + .monitor-info__student {
    padding-top: 0; }

.course-modal__text {
  display: none;
  color: #4e6579;
  margin-top: 16px;
  font-weight: 500;
  text-align: center;
  font-size: 17px; }

.course-modal__img {
  border-radius: 0;
  min-width: 40px;
  width: 40px;
  height: 40px; }
  @media only screen and (max-width: 46.1875em) {
    .course-modal__img {
      margin-right: 0; }
      .course-modal__img .hide-on-mobile {
        display: none; } }

.course-modal .header-social__service {
  width: 100%;
  padding-right: 8px; }
  @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
    .course-modal .header-social__service {
      margin-left: 10px; }
      .course-modal .header-social__service .hide-on-pc-Lose {
        display: none; } }
  @media only screen and (max-width: 63.9375em) {
    .course-modal .header-social__service {
      margin-left: 10px; }
      .course-modal .header-social__service .hide-on-bothTM {
        display: none !important; } }

.course-modal .account-form {
  width: 100%;
  position: relative;
  padding: 25px 35px 40px; }
  @media only screen and (max-width: 46.1875em) {
    .course-modal .account-form {
      padding: 25px 10px; }
      .course-modal .account-form .hide-on-mobile {
        display: none; } }
  .course-modal .account-form__list {
    max-height: 575px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 44px;
    /* Track */
    /* Handle */
    /* Handle on hover */ }
    @media only screen and (max-width: 63.9375em) {
      .course-modal .account-form__list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px 44px; }
        .course-modal .account-form__list .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
      .course-modal .account-form__list .monitor-info__student {
        flex-direction: row; }
        .course-modal .account-form__list .monitor-info__student .hide-on-pc-Lose {
          display: none; } }
    @media only screen and (max-width: 63.9375em) {
      .course-modal .account-form__list .monitor-info__student {
        flex-direction: row; }
        .course-modal .account-form__list .monitor-info__student .hide-on-bothTM {
          display: none !important; } }
    .course-modal .account-form__list::-webkit-scrollbar {
      width: 7px; }
    .course-modal .account-form__list::-webkit-scrollbar-track {
      box-shadow: inset 0 0 2px grey;
      border-radius: 10px; }
    .course-modal .account-form__list::-webkit-scrollbar-thumb {
      background: #24adc1;
      border-radius: 7px; }
    .course-modal .account-form__list::-webkit-scrollbar-thumb:hover {
      background: #24adc1; }
  .course-modal .account-form__phone > input {
    margin-right: 0;
    max-width: 100%; }
  .course-modal .account-form__phone > textarea {
    min-height: 150px; }
  .course-modal .account-form__group {
    margin-bottom: 30px; }
  .course-modal .account-form__btn {
    margin-top: 24px;
    padding: 8px 24px;
    max-width: 200px; }
  .course-modal .account-form__title {
    font-size: 24px; }

.course-modal .account-teacher__group {
  margin-bottom: 0; }

.course-modal .intro-tabs__submit {
  position: relative;
  right: 0px;
  margin-right: 0; }
  .course-modal .intro-tabs__submit.special {
    margin-right: 12px; }

.course-modal .intro-tabs__input {
  padding-left: 14px;
  border-left: 1.4px solid rgba(78, 101, 121, 0.6);
  margin-right: 10px; }
  .course-modal .intro-tabs__input.special {
    margin-right: 25px;
    padding-left: 0;
    border-left: 0; }

.course-modal__edit {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .course-modal__edit {
      display: block; }
      .course-modal__edit .hide-on-mobile {
        display: none; } }
  .course-modal__edit .account-care__option {
    margin-top: 0;
    padding-right: 20px; }
    @media only screen and (max-width: 46.1875em) {
      .course-modal__edit .account-care__option {
        padding-right: 0;
        margin-top: 10px; }
        .course-modal__edit .account-care__option .hide-on-mobile {
          display: none; } }

.course-modal .form-select {
  min-width: 150px; }

.course-modal .monitor-info__student {
  position: relative;
  padding-left: 35px; }
  .course-modal .monitor-info__student .account-care__option {
    position: absolute;
    top: -2px;
    left: 0; }

.user-bg {
  background: linear-gradient(83deg, #0c8ecf 0%, #3fb5d6 65%, #14add3 68%, #16b8d6 98%);
  padding-top: 190px; }
  @media only screen and (max-width: 63.9375em) {
    .user-bg {
      padding-top: 0; }
      .user-bg .hide-on-bothTM {
        display: none !important; } }

.user-wrapper {
  margin-top: -150px;
  padding-bottom: 140px; }
  @media only screen and (max-width: 63.9375em) {
    .user-wrapper {
      margin-top: 30px;
      padding-bottom: 80px; }
      .user-wrapper .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 46.1875em) {
    .user-wrapper {
      padding-bottom: 48px; }
      .user-wrapper .hide-on-mobile {
        display: none; } }

.user-sidebar {
  padding-right: 7px; }
  @media only screen and (max-width: 1650px) {
    .user-sidebar {
      padding-right: 0; } }
  @media only screen and (max-width: 63.9375em) {
    .user-sidebar {
      display: none; }
      .user-sidebar .hide-on-bothTM {
        display: none !important; } }
  .user-sidebar__offcanvas .offcanvas-body {
    background-color: #eff3f7; }
  .user-sidebar__offcanvas .user-sidebar {
    display: block;
    margin-top: 10px; }
  .user-sidebar__offcanvas .header-offcanvas__close {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: right; }
  .user-sidebar__mobile {
    color: #fff;
    cursor: pointer;
    display: none;
    padding: 6px 20px;
    margin-bottom: 20px;
    border-radius: 25px;
    background-color: #24adc1;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; }
    @media only screen and (max-width: 63.9375em) {
      .user-sidebar__mobile {
        display: inline-block; }
        .user-sidebar__mobile .hide-on-bothTM {
          display: none !important; } }
  .user-sidebar__info {
    overflow: hidden;
    padding: 0 0 24px;
    margin-bottom: 20px;
    border-radius: 14px;
    background-color: #fff; }
    .user-sidebar__info .coaching-member__content {
      margin: 14px 20px 0; }
  .user-sidebar__file {
    width: 100%;
    display: block;
    position: relative;
    cursor: pointer; }
    .user-sidebar__file:last-child {
      width: fit-content;
      margin: 0 auto; }
  .user-sidebar__bg {
    cursor: pointer;
    position: relative;
    padding-top: 47.5%;
    overflow: hidden; }
    .user-sidebar__bg > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .user-sidebar__type {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    padding: 3px 22px;
    border-radius: 25px;
    background-color: #24adc1; }
    .user-sidebar__type.teacher {
      background-color: #f33066; }
    .user-sidebar__type.staff {
      background-color: #faaf3a; }
  .user-sidebar__avatar {
    cursor: pointer;
    position: relative;
    padding-top: 0;
    overflow: hidden;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border: 5px solid #fff;
    margin-top: -50px; }
    .user-sidebar__avatar > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    @media only screen and (max-width: 46.1875em) {
      .user-sidebar__avatar {
        position: relative;
        padding-top: 23%;
        overflow: hidden; }
        .user-sidebar__avatar .hide-on-mobile {
          display: none; }
        .user-sidebar__avatar > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; } }
  .user-sidebar__input {
    display: none; }
  .user-sidebar__cover {
    text-align: center;
    padding: 10px 0 0; }
  .user-sidebar__name {
    font-weight: 500; }
  .user-sidebar__text {
    font-size: 13px;
    color: rgba(78, 101, 121, 0.75); }
  .user-sidebar__content {
    border-radius: 14px;
    overflow: hidden;
    background-color: #fff;
    padding: 28px 30px 10px; }
    @media only screen and (max-width: 1366px) {
      .user-sidebar__content {
        padding: 28px 14px 10px; } }
  .user-sidebar__main {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(78, 101, 121, 0.3); }
  .user-sidebar__accordion .accordion-item {
    background-color: transparent;
    border: 0;
    padding-bottom: 20px; }
  .user-sidebar__accordion .accordion-button:not(collapsed) {
    color: #18191b;
    background-color: transparent;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    padding: 0;
    font-size: 16px; }
  .user-sidebar__accordion .accordion-button svg {
    width: 20px;
    margin: 0 10px 3px 0; }
  .user-sidebar__accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.002' height='7.5' viewBox='0 0 10.002 7.5'%3E%3Cpath id='Path_6478' data-name='Path 6478' d='M11,15.5a1.433,1.433,0,0,1-1.108-.533l-3.508-4.25a1.75,1.75,0,0,1-.217-1.842A1.467,1.467,0,0,1,7.491,8h7.017a1.467,1.467,0,0,1,1.325.875,1.75,1.75,0,0,1-.217,1.842l-3.508,4.25A1.433,1.433,0,0,1,11,15.5Z' transform='translate(-5.999 -8)' fill='%23707070'/%3E%3C/svg%3E%0A");
    margin-right: 5px;
    width: 12px;
    height: 12px;
    background-size: contain; }
  .user-sidebar__accordion .accordion-body {
    padding: 0 0 0 30px; }
    .user-sidebar__accordion .accordion-body__sub {
      font-size: 14px;
      color: #24adc1; }
    .user-sidebar__accordion .accordion-body__text {
      font-size: 14px;
      color: #4e6579;
      padding: 10px 0 0; }
      .user-sidebar__accordion .accordion-body__text.active, .user-sidebar__accordion .accordion-body__text:hover {
        color: #24adc1; }
  .user-sidebar__title {
    font-size: 14px;
    color: rgba(78, 101, 121, 0.5);
    padding-bottom: 20px; }
  .user-sidebar__item {
    padding-bottom: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #4e6579; }
    .user-sidebar__item.gold {
      color: #faaf3a; }
    .user-sidebar__item.signOut {
      color: #f33066; }
    .user-sidebar__item.active, .user-sidebar__item:hover {
      color: #24adc1; }
    .user-sidebar__item svg {
      width: 20px;
      margin: 0 7px 5px 0; }
  .user-sidebar__notification {
    width: 20px;
    height: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    font-size: 13px;
    justify-content: center;
    color: #fff;
    background-color: #faaf3a;
    border-radius: 50%; }
  .user-sidebar__sub {
    padding-bottom: 8px;
    opacity: 1; }
  .user-sidebar__account {
    padding: 30px 0 0 0; }
    .user-sidebar__account .user-sidebar__item.gold {
      color: #faaf3a; }
    .user-sidebar__account .user-sidebar__item.clear {
      color: #f33066; }

.user-content {
  margin-left: 18px; }
  @media only screen and (max-width: 1650px) {
    .user-content {
      margin-left: 0; } }
  .user-content__wrapper {
    overflow: hidden;
    background-color: #fff;
    border-radius: 14px;
    padding: 28px 40px 40px;
    min-height: 250px; }
    @media only screen and (max-width: 1366px) {
      .user-content__wrapper {
        padding: 28px 15px 30px; } }
    .user-content__wrapper.special {
      padding: 28px 32px 40px; }
      @media only screen and (max-width: 46.1875em) {
        .user-content__wrapper.special {
          padding: 28px 16px 30px; }
          .user-content__wrapper.special .hide-on-mobile {
            display: none; } }
    .user-content__wrapper.special2 {
      padding-bottom: 25px;
      min-height: auto;
      background-repeat: no-repeat;
      background-size: cover; }
  .user-content__sidebar {
    width: 28.4%;
    padding: 0 0 30px 47px; }
    @media only screen and (max-width: 1366px) {
      .user-content__sidebar {
        padding-left: 15px; } }
    @media only screen and (max-width: 63.9375em) {
      .user-content__sidebar {
        width: 100%;
        padding-left: 0; }
        .user-content__sidebar .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .user-content__sidebar {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        align-items: center; } }
  .user-content__form {
    width: 71.6%; }
    @media only screen and (max-width: 63.9375em) {
      .user-content__form {
        width: 100%; }
        .user-content__form .hide-on-bothTM {
          display: none !important; } }
    .user-content__form .account-form__cover {
      padding-right: 47px;
      border-right: 1px solid rgba(78, 101, 121, 0.15); }
      @media only screen and (max-width: 1366px) {
        .user-content__form .account-form__cover {
          padding-right: 15px; } }
      @media only screen and (max-width: 63.9375em) {
        .user-content__form .account-form__cover {
          padding-right: 0;
          border-right: 0; }
          .user-content__form .account-form__cover .hide-on-bothTM {
            display: none !important; } }
    .user-content__form .account-form__main {
      margin: 0; }
    .user-content__form .account-form__group select {
      cursor: pointer; }
    .user-content__form .account-form__group textarea {
      min-height: 153px; }
    .user-content__form .account-form__phone input {
      max-width: 100%;
      margin: 0; }
    .user-content__form .account-form__btn {
      width: 260px;
      margin-top: 35px; }
      @media only screen and (max-width: 46.1875em) {
        .user-content__form .account-form__btn {
          width: 100%; }
          .user-content__form .account-form__btn .hide-on-mobile {
            display: none; } }
    .user-content__form .account-teacher__group {
      margin-bottom: 24px; }
  .user-content__header {
    padding-bottom: 35px;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media only screen and (max-width: 63.9375em) {
      .user-content__header {
        display: block;
        padding-bottom: 28px; }
        .user-content__header .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .user-content__header {
        padding-bottom: 18px; }
        .user-content__header .hide-on-mobile {
          display: none; } }
    .user-content__header.special {
      align-items: flex-start; }
    .user-content__header.custom {
      padding: 0 40px 35px; }
      @media only screen and (max-width: 63.9375em) {
        .user-content__header.custom {
          padding: 0 24px 0; }
          .user-content__header.custom .hide-on-bothTM {
            display: none !important; } }
  .user-content__heading.special {
    margin-bottom: 20px; }
  .user-content__title {
    font-size: 22px; }
    @media only screen and (max-width: 46.1875em) {
      .user-content__title {
        font-size: 20px;
        text-align: center; }
        .user-content__title .hide-on-mobile {
          display: none; } }
    .user-content__title > span {
      font-size: 14px;
      color: #fff;
      background-color: #faaf3a;
      border-radius: 10px;
      padding: 2px 3px 1px; }
  .user-content__text {
    font-size: 14px;
    color: #4e6579;
    padding-top: 10px; }
  .user-content__note {
    font-size: 16px;
    color: #4e6579;
    font-style: italic; }
  .user-content__arrange {
    width: fit-content; }
    @media only screen and (max-width: 63.9375em) {
      .user-content__arrange {
        width: 100%;
        margin: 10px 0; }
        .user-content__arrange .hide-on-bothTM {
          display: none !important; } }
    .user-content__arrange .filter-course__select {
      width: 100%; }
      @media only screen and (max-width: 46.1875em) {
        .user-content__arrange .filter-course__select {
          display: block;
          text-align: center; }
          .user-content__arrange .filter-course__select .hide-on-mobile {
            display: none; } }
      .user-content__arrange .filter-course__select .account-form__label {
        width: 100px;
        min-height: auto; }
        @media only screen and (max-width: 46.1875em) {
          .user-content__arrange .filter-course__select .account-form__label {
            width: 100%;
            margin-bottom: 10px; }
            .user-content__arrange .filter-course__select .account-form__label .hide-on-mobile {
              display: none; } }
      .user-content__arrange .filter-course__select .account-form__input {
        width: 218px;
        padding: 8px 32px 8px 20px; }
        @media only screen and (max-width: 46.1875em) {
          .user-content__arrange .filter-course__select .account-form__input {
            width: 100%; }
            .user-content__arrange .filter-course__select .account-form__input .hide-on-mobile {
              display: none; } }
  .user-content__search {
    width: 80%; }
    @media only screen and (max-width: 63.9375em) {
      .user-content__search {
        width: 100%;
        margin-top: 10px; }
        .user-content__search .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .user-content__search .account-form__phone {
        display: block; }
        .user-content__search .account-form__phone .hide-on-mobile {
          display: none; } }
    .user-content__search .account-form__phone > input:first-child {
      max-width: 100%; }
    .user-content__search .account-form__phone > input:last-child {
      max-width: 218px; }
      @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
        .user-content__search .account-form__phone > input:last-child {
          max-width: 30%;
          padding: 13px 20px; } }
      @media only screen and (max-width: 46.1875em) {
        .user-content__search .account-form__phone > input:last-child {
          max-width: 100%;
          margin-top: 10px; }
          .user-content__search .account-form__phone > input:last-child .hide-on-mobile {
            display: none; } }
    .user-content__search .account-form__input {
      padding: 8px 32px 8px 20px; }
  .user-content__search2 {
    padding-bottom: 30px; }
    .user-content__search2 .account-form__phone {
      margin: 0 auto;
      width: 80%; }
      .user-content__search2 .account-form__phone > input {
        max-width: 100%;
        padding: 8px 20px; }
  @media only screen and (max-width: 63.9375em) {
    .user-content__update.featured {
      min-height: 160px; }
      .user-content__update.featured .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 63.9375em) {
    .user-content__update.featured .account-teacher__example.gradient {
      min-height: 160px; }
      .user-content__update.featured .account-teacher__example.gradient .hide-on-bothTM {
        display: none !important; } }
  .user-content__update .account-teacher__example.gradient {
    position: relative;
    min-height: 115px;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important; }
    .user-content__update .account-teacher__example.gradient svg {
      position: relative;
      z-index: 2; }
    .user-content__update .account-teacher__example.gradient.special {
      min-height: 160px; }
    .user-content__update .account-teacher__example.gradient.special2 {
      min-height: 235px; }
      @media only screen and (max-width: 46.1875em) {
        .user-content__update .account-teacher__example.gradient.special2 {
          min-height: 160px; }
          .user-content__update .account-teacher__example.gradient.special2 .hide-on-mobile {
            display: none; } }
    .user-content__update .account-teacher__example.gradient .account-teacher__text {
      color: #fff;
      position: relative;
      z-index: 2; }
  .user-content__update .account-teacher__sub {
    text-align: center;
    padding-top: 15px; }
  .user-content__update .account-teacher__note {
    font-size: 13px;
    color: rgba(78, 101, 121, 0.5); }
  .user-content__update.avatar {
    margin-top: 32px; }
    .user-content__update.avatar .account-teacher__example, .user-content__update.avatar .account-teacher__image {
      height: 130px;
      width: 130px;
      margin: 0 auto;
      border-radius: 50%; }
  .user-content__update.special {
    padding-bottom: 20px; }
    .user-content__update.special .account-teacher__show {
      padding-bottom: 5px !important; }
  .user-content__update.special2 {
    max-width: 70%; }
    @media only screen and (max-width: 1440px) {
      .user-content__update.special2 {
        max-width: 100%; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .user-content__update {
      width: 48%; } }
  .user-content__package {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 20px;
    background-color: #24adc1;
    border: 0;
    border-radius: 7px;
    color: #fff;
    min-width: max-content; }
    @media only screen and (max-width: 46.1875em) {
      .user-content__package {
        position: relative;
        margin: 0 auto;
        right: 0;
        margin-top: 15px; }
        .user-content__package .hide-on-mobile {
          display: none; } }
    .user-content__package.special {
      position: relative;
      right: initial;
      top: initial; }

.user-information {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row-reverse; }
  @media only screen and (max-width: 63.9375em) {
    .user-information {
      flex-flow: row wrap; }
      .user-information .hide-on-bothTM {
        display: none !important; } }
  .user-information__update.avatar {
    margin-top: 32px; }
    .user-information__update.avatar .account-teacher__example, .user-information__update.avatar .account-teacher__image {
      height: 130px;
      width: 130px;
      margin: 0 auto;
      border-radius: 50%; }
    .user-information__update.avatar .account-teacher__image {
      padding-top: 0; }

.user-account .account-form__main {
  margin: 0; }

.user-account .account-form__group {
  width: 430px; }
  @media only screen and (max-width: 63.9375em) {
    .user-account .account-form__group {
      width: 100%; }
      .user-account .account-form__group .hide-on-bothTM {
        display: none !important; } }

.user-account .account-form__btn {
  width: 260px; }
  @media only screen and (max-width: 46.1875em) {
    .user-account .account-form__btn {
      width: 100%; }
      .user-account .account-form__btn .hide-on-mobile {
        display: none; } }

.user-course__list {
  margin-top: -25px;
  max-height: 1625px;
  overflow: auto; }
  @media only screen and (max-width: 46.1875em) {
    .user-course__list {
      margin-top: 0; }
      .user-course__list .hide-on-mobile {
        display: none; } }
  .user-course__list .user-course__item:first-child .user-course__content {
    border-top: 0; }

.user-course__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .user-course__item {
      display: block; }
      .user-course__item .hide-on-mobile {
        display: none; } }
  .user-course__item.special {
    padding-bottom: 0 !important; }

.user-course__img {
  min-width: 260px;
  position: relative;
  padding-top: 16%;
  overflow: hidden;
  border-radius: 7px; }
  .user-course__img > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media only screen and (max-width: 46.1875em) {
    .user-course__img {
      min-width: 100%;
      position: relative;
      padding-top: 50%;
      overflow: hidden; }
      .user-course__img .hide-on-mobile {
        display: none; }
      .user-course__img > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; } }

.user-course__content {
  padding: 32px 0;
  margin-left: 23px;
  width: 100%;
  border-top: 1px solid rgba(78, 101, 121, 0.15); }
  @media only screen and (max-width: 46.1875em) {
    .user-course__content {
      margin: 0;
      border-top: 0; }
      .user-course__content .hide-on-mobile {
        display: none; } }

.user-course__category {
  font-size: 14px;
  padding: 7px 16px 5px;
  border-radius: 25px;
  color: rgba(36, 173, 193, 0.75);
  background: rgba(36, 173, 193, 0.1); }

.user-course__title {
  font-weight: bold;
  margin: 15px 0 10px;
  color: #18191b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical; }

.user-course__cover .profile-item__sub {
  justify-content: initial;
  border: 0;
  padding: 0 0 14px;
  flex-flow: row wrap; }

.user-course__cover .profile-item__quantity {
  padding: 0 24px; }

.user-course__sub {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }

.user-course__quantity {
  font-size: 14px;
  font-weight: bold;
  color: #18191b; }

.user-course__text {
  font-size: 14px;
  color: rgba(78, 101, 121, 0.75); }

.user-course__price {
  padding-left: 24px; }

.user-course__sale {
  color: #27b737;
  font-weight: bold; }

.user-course__base {
  font-size: 13px;
  color: rgba(78, 101, 121, 0.5); }

.user-course__status {
  padding: 50px 0 0 0; }
  @media only screen and (max-width: 46.1875em) {
    .user-course__status {
      padding: 0 0 30px 0; }
      .user-course__status .hide-on-mobile {
        display: none; } }
  .user-course__status > button {
    border: 0;
    border-radius: 5px;
    padding: 5px 0;
    border: 1.4px solid;
    min-width: 150px; }
  .user-course__status button + button {
    margin: 20px 0 0 0; }
    @media only screen and (max-width: 46.1875em) {
      .user-course__status button + button {
        margin: 20px 0 0 0; }
        .user-course__status button + button .hide-on-mobile {
          display: none; } }
  .user-course__status .monitor-member__success.wait, .user-course__status .monitor-member__danger, .user-course__status .monitor-member__success {
    pointer-events: none;
    user-select: none; }
  .user-course__status .monitor-member__success.wait {
    border-color: #faaf3a !important;
    background-color: #faaf3a; }

.user-course__inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .user-course__inner {
      display: block; }
      .user-course__inner .hide-on-mobile {
        display: none; } }

.user-course__stt {
  font-size: 14px;
  padding: 7px 16px 5px;
  border-radius: 25px;
  color: #faaf3a;
  background-color: rgba(250, 175, 58, 0.1);
  margin-left: 10px; }
  @media only screen and (max-width: 46.1875em) {
    .user-course__stt {
      margin-left: 0; }
      .user-course__stt .hide-on-mobile {
        display: none; } }
  .user-course__stt.success {
    color: #27b737;
    background-color: rgba(39, 183, 55, 0.1); }
  .user-course__stt.cancel {
    color: #f33066;
    background-color: rgba(243, 48, 102, 0.1); }

.user-process {
  overflow-x: auto;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */ }
  .user-process::-webkit-scrollbar {
    height: 10px; }
  .user-process::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px grey;
    border-radius: 10px; }
  .user-process::-webkit-scrollbar-thumb {
    background: #24adc1;
    border-radius: 7px; }
  .user-process::-webkit-scrollbar-thumb:hover {
    background: #24adc1; }
  .user-process__menu {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    min-width: 825px;
    padding-bottom: 15px;
    width: 915px;
    min-width: 915px; }
  .user-process__step {
    width: 25%;
    min-width: 175px; }
    .user-process__step + .user-process__step {
      margin-left: 10px; }
    .user-process__step.registered .user-process__sub {
      border: 1px solid rgba(78, 101, 121, 0.5);
      background-color: rgba(78, 101, 121, 0.05); }
    .user-process__step.registered .user-process__alert {
      background-color: #4e6579; }
    .user-process__step.scheduled .user-process__sub {
      border: 1px solid #24adc1;
      background-color: rgba(36, 173, 193, 0.05); }
    .user-process__step.scheduled .user-process__alert {
      background-color: #24adc1; }
    .user-process__step.processing .user-process__sub {
      border: 1px solid #bb6bd9;
      background-color: rgba(187, 107, 217, 0.05); }
    .user-process__step.processing .user-process__alert {
      background-color: #bb6bd9; }
    .user-process__step.completed .user-process__sub {
      border: 1px solid #27b737;
      background-color: rgba(39, 183, 55, 0.05); }
    .user-process__step.completed .user-process__alert {
      background-color: #27b737; }
    .user-process__step.canceled .user-process__sub {
      border: 1px solid #f33066;
      background-color: rgba(243, 48, 102, 0.05); }
    .user-process__step.canceled .user-process__alert {
      background-color: #f33066; }
  .user-process__sub {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 9px 20px;
    border-radius: 7px; }
  .user-process__tv {
    font-size: 14px;
    font-weight: 500; }
  .user-process__en {
    font-size: 13px;
    color: rgba(78, 101, 121, 0.5);
    font-style: italic; }
  .user-process__alert {
    width: 27px;
    height: 27px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
    border-radius: 50%; }
  .user-process__content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 915px;
    min-width: 915px; }
    .user-process__content .scheduled .user-process__date::before, .user-process__content .scheduled .user-process__section::before {
      background-color: #24adc1; }
    .user-process__content .processing .user-process__date::before, .user-process__content .processing .user-process__section::before {
      background-color: #bb6bd9; }
    .user-process__content .completed .user-process__date::before, .user-process__content .completed .user-process__section::before {
      background-color: #27b737; }
    .user-process__content .canceled .user-process__date::before, .user-process__content .canceled .user-process__section::before {
      background-color: #f33066; }
  .user-process__item {
    width: 25%;
    min-width: 175px; }
    .user-process__item + .user-process__item {
      margin-left: 10px; }
    .user-process__item .done.user-process__cover {
      opacity: 0.5; }
    .user-process__item .new {
      background-color: #fff;
      border-color: #faaf3a; }
      .user-process__item .new .user-process__btn {
        display: inline-block; }
        @media only screen and (max-width: 46.1875em) {
          .user-process__item .new .user-process__btn {
            display: block;
            text-align: center; }
            .user-process__item .new .user-process__btn .hide-on-mobile {
              display: none; } }
  .user-process__cover {
    background-color: rgba(239, 243, 247, 0.5);
    border-radius: 7px;
    margin-bottom: 10px;
    padding: 20px 20px 25px;
    border: 1px solid;
    border-color: rgba(78, 101, 121, 0.1); }
  .user-process__category {
    font-size: 14px;
    font-weight: 500; }
    @media only screen and (max-width: 46.1875em) {
      .user-process__category {
        text-align: center; }
        .user-process__category .hide-on-mobile {
          display: none; } }
  .user-process__time {
    font-size: 13px;
    color: rgba(78, 101, 121, 0.75);
    font-style: italic;
    padding-top: 6px; }
    @media only screen and (max-width: 46.1875em) {
      .user-process__time {
        text-align: center; }
        .user-process__time .hide-on-mobile {
          display: none; } }
  .user-process__detail {
    margin: 18px 0 18px 10px; }
  .user-process__date {
    font-size: 14px;
    padding-left: 22px;
    position: relative; }
    .user-process__date::before {
      position: absolute;
      content: "";
      top: 20%;
      left: 0;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #4e6579; }
  .user-process__section {
    position: relative;
    font-size: 12px;
    color: rgba(78, 101, 121, 0.75);
    font-style: italic;
    padding: 8px 0 8px 22px; }
    .user-process__section::before {
      position: absolute;
      content: "";
      top: -20%;
      left: 5.5px;
      width: 1px;
      height: calc(100% + 20px);
      background-color: #4e6579; }
  .user-process__btn {
    font-size: 13px;
    color: #faaf3a;
    padding: 5px 16px 4px;
    border: 1px solid #faaf3a;
    border-radius: 7px;
    background-color: rgba(250, 175, 58, 0.05);
    margin-bottom: 22px;
    display: none; }
    .user-process__btn:hover {
      color: #faaf3a; }
  .user-process__avatar {
    width: 50px;
    height: 50px;
    position: relative;
    padding-top: 0;
    overflow: hidden;
    border-radius: 50%; }
    .user-process__avatar > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    @media only screen and (max-width: 46.1875em) {
      .user-process__avatar {
        position: relative;
        padding-top: 15%;
        overflow: hidden;
        margin: 0 auto; }
        .user-process__avatar .hide-on-mobile {
          display: none; }
        .user-process__avatar > img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; } }
  .user-process__name {
    font-size: 14px;
    font-weight: 500;
    padding: 6px 0; }
    @media only screen and (max-width: 46.1875em) {
      .user-process__name {
        text-align: center; }
        .user-process__name .hide-on-mobile {
          display: none; } }
  .user-process__positon {
    font-size: 14px;
    color: rgba(78, 101, 121, 0.75);
    font-style: italic; }
    @media only screen and (max-width: 46.1875em) {
      .user-process__positon {
        text-align: center; }
        .user-process__positon .hide-on-mobile {
          display: none; } }
  .user-process__desc {
    padding-top: 15px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
    .user-process__desc button {
      border-radius: 7px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 27px;
      padding: 0 10px;
      font-size: 12px; }
  .user-process__accept {
    min-width: 81px;
    color: #fff;
    background-color: #27b737;
    border: 1px solid #27b737; }
  .user-process__cancel {
    color: #f33066;
    background-color: rgba(243, 48, 102, 0.05);
    border: 1px solid #f33066; }
    .user-process__cancel:hover {
      background-color: #f33066;
      color: #fff; }
  .user-process__accept + .user-process__cancel {
    margin-left: 5px; }

.user-detail__section {
  padding: 33px 0 35px;
  border-top: 1px solid rgba(78, 101, 121, 0.3); }
  @media only screen and (max-width: 46.1875em) {
    .user-detail__section {
      padding: 20px 0 25px; }
      .user-detail__section .hide-on-mobile {
        display: none; } }

.user-detail__status {
  position: relative; }

.user-detail__title {
  color: #24adc1;
  font-weight: bold;
  width: 85%; }
  @media only screen and (max-width: 46.1875em) {
    .user-detail__title {
      width: 100%; }
      .user-detail__title .hide-on-mobile {
        display: none; } }

.user-detail__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  .user-detail__cover.special {
    display: block; }
    .user-detail__cover.special .user-detail__btn {
      background-color: #fff;
      padding: 5px 20px 4px; }
  .user-detail__cover .user-process__detail {
    margin-right: 20px; }
  .user-detail__cover .user-process__date::before, .user-detail__cover .user-process__section::before {
    background-color: #faaf3a; }
  .user-detail__cover.success .user-process__date::before, .user-detail__cover.success .user-process__section::before {
    background-color: #27b737; }
  .user-detail__cover.success .user-detail__btn {
    color: #27b737;
    border: 1px solid #27b737;
    border-radius: 7px;
    background-color: rgba(39, 183, 55, 0.05); }

.user-detail__delete {
  position: absolute;
  top: 0;
  right: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  border: 1px solid #f33066;
  border-radius: 5px;
  background-color: rgba(243, 48, 102, 0.05);
  padding: 3px 20px 1px;
  color: #f33066; }
  @media only screen and (max-width: 46.1875em) {
    .user-detail__delete {
      position: relative;
      margin: 10px 0 15px; }
      .user-detail__delete .hide-on-mobile {
        display: none; } }
  .user-detail__delete:hover {
    background-color: rgba(243, 48, 102, 0.1); }
  .user-detail__delete > svg {
    margin: 0 10px 3px 0; }

.user-detail__group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .user-detail__group {
      flex-flow: row wrap; }
      .user-detail__group .hide-on-mobile {
        display: none; } }

.user-detail__direct {
  padding: 0 10px 0 21px;
  position: relative;
  color: #4e6579;
  margin: 10px 0; }
  .user-detail__direct::before {
    position: absolute;
    content: "";
    width: 13px;
    height: 13px;
    top: 25%;
    left: 0;
    border-radius: 50%;
    background-color: #4e6579; }

.user-detail__btn {
  font-size: 13px;
  color: #faaf3a;
  border: 1px solid #faaf3a;
  background-color: rgba(250, 175, 58, 0.05);
  min-width: 135px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 16px 5px;
  border-radius: 7px; }
  .user-detail__btn:hover {
    color: #faaf3a; }
  .user-detail__btn.green {
    color: #27b737;
    border: 1px solid #27b737;
    background-color: rgba(39, 183, 55, 0.05); }
  .user-detail__btn.red {
    color: #f33066;
    border: 1px solid #f33066;
    background-color: rgba(243, 48, 102, 0.05); }
  .user-detail__btn.purple {
    color: #bb6bd9;
    border: 1px solid #bb6bd9;
    background-color: rgba(187, 107, 217, 0.05); }

.user-detail__link {
  display: none;
  max-width: 350px;
  font-size: 14px;
  margin-left: 15px;
  text-decoration: underline;
  color: #24adc1; }
  @media only screen and (max-width: 46.1875em) {
    .user-detail__link {
      max-width: 170px;
      margin: 10px 0 0 0; }
      .user-detail__link .hide-on-mobile {
        display: none; } }
  .user-detail__link.active {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; }

.user-detail__sub {
  font-weight: 500;
  padding-bottom: 20px; }

.user-detail__article * {
  all: revert; }
  .user-detail__article * img {
    width: 100%;
    height: auto; }

.user-detail__article p {
  line-height: 26px !important; }

.user-detail__plan {
  padding-top: 26px;
  position: relative; }

.user-detail__remove {
  position: absolute;
  top: 0;
  right: 0; }
  @media only screen and (max-width: 46.1875em) {
    .user-detail__remove {
      position: relative;
      top: 0;
      padding-bottom: 20px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      justify-content: right; }
      .user-detail__remove .hide-on-mobile {
        display: none; } }
  .user-detail__remove .table-remove {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .user-detail__remove .monitor-info__edit {
    margin-top: 0; }
    @media only screen and (max-width: 46.1875em) {
      .user-detail__remove .monitor-info__edit {
        position: relative; }
        .user-detail__remove .monitor-info__edit .hide-on-mobile {
          display: none; } }
  .user-detail__remove .monitor-document__remove {
    position: relative;
    top: 0; }

.user-detail__note {
  font-size: 14px;
  color: rgba(78, 101, 121, 0.5);
  padding-bottom: 10px; }

.user-detail__why {
  padding-bottom: 12px;
  font-weight: 500;
  width: 85%; }
  .user-detail__why.special {
    width: 100%; }
  @media only screen and (max-width: 46.1875em) {
    .user-detail__why {
      width: 100%; }
      .user-detail__why .hide-on-mobile {
        display: none; } }
  .user-detail__why > span:first-child {
    font-size: 18px;
    color: #24adc1; }
  .user-detail__why > span:last-child {
    font-size: 15px;
    color: #4e6579; }

.user-detail__upload {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  .user-detail__upload .account-teacher__example {
    height: 50px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-direction: row; }
  .user-detail__upload .account-teacher__text {
    display: inline-block;
    width: fit-content;
    margin: 0 0 0 10px; }
  .user-detail__upload .account-teacher__show + .account-teacher__inner {
    padding-left: 30px; }
  .user-detail__upload .monitor-info__student {
    align-items: center; }
  .user-detail__upload .header-social__desc {
    font-style: initial; }
    .user-detail__upload .header-social__desc span {
      margin-right: 20px; }

.user-detail__file {
  font-size: 14px;
  color: #4e6579; }
  .user-detail__file:hover {
    text-decoration: underline; }
  .user-detail__file > span:nth-child(2) {
    padding: 0 30px 0 10px; }

.user-detail__custom {
  margin: 15px 0 20px; }

.user-detail__wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row wrap; }

.user-detail__img {
  position: relative;
  padding-top: 0;
  overflow: hidden;
  width: 192px;
  height: 108px;
  margin: 20px 0 0; }
  .user-detail__img > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .user-detail__img:first-child {
    margin-right: 20px; }
  .user-detail__img + .user-detail__img {
    margin-right: 20px; }

.user-detail__video {
  width: 30%;
  overflow: hidden;
  margin: 20px 0 0; }
  @media only screen and (max-width: 46.1875em) {
    .user-detail__video {
      width: 100%; }
      .user-detail__video .hide-on-mobile {
        display: none; } }
  .user-detail__video:first-child {
    margin-right: 20px; }
  .user-detail__video + .user-detail__video {
    margin-right: 20px; }

.user-detail__other {
  margin: 15px 0 0; }
  .user-detail__other + .user-detail__other {
    margin-top: 15px; }
  .user-detail__other:hover {
    text-decoration: underline; }
  .user-detail__other span {
    color: #24adc1; }

.user-detail__item + .user-detail__item {
  margin-top: 30px; }

.user-detail__item .account-teacher__image {
  position: relative;
  padding-top: 0;
  overflow: hidden;
  width: 192px;
  height: 108px; }
  .user-detail__item .account-teacher__image > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.user-detail__item .account-form__input {
  font-size: 16px;
  min-height: 200px;
  border-radius: 7px;
  margin-bottom: 20px; }

.user-detail__item .account-form__btn.edit {
  margin-top: 25px;
  max-width: 320px; }

.user-detail__bottom {
  max-width: 50%;
  margin: 0 auto; }
  .user-detail__bottom .account-form__btn {
    margin-top: 20px; }
  @media only screen and (max-width: 63.9375em) {
    .user-detail__bottom {
      max-width: 100%; }
      .user-detail__bottom .hide-on-bothTM {
        display: none !important; } }

.user-detail__button {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media only screen and (max-width: 46.1875em) {
    .user-detail__button {
      flex-direction: column; }
      .user-detail__button .hide-on-mobile {
        display: none; } }
  .user-detail__button .account-form__btn.success {
    background-image: none;
    border: 1px solid #27b737;
    margin-right: 20px;
    background-color: rgba(39, 183, 55, 0.05);
    color: #27b737; }
    .user-detail__button .account-form__btn.success:hover {
      background-color: rgba(39, 183, 55, 0.1); }
    @media only screen and (max-width: 46.1875em) {
      .user-detail__button .account-form__btn.success {
        margin-right: 0; }
        .user-detail__button .account-form__btn.success .hide-on-mobile {
          display: none; } }
  .user-detail__button .account-form__btn.remove {
    background-image: none;
    background-color: rgba(243, 48, 102, 0.05);
    border: 1px solid #f33066;
    color: #f33066; }
    .user-detail__button .account-form__btn.remove:hover {
      background-color: rgba(243, 48, 102, 0.1); }

.user-detail__exercise {
  position: relative; }
  .user-detail__exercise + .user-detail__exercise {
    margin-top: 12px; }

.user-detail__wrap {
  padding: 0 0 10px 18px; }
  .user-detail__wrap .account-form__group {
    width: 80%; }
    @media only screen and (max-width: 63.9375em) {
      .user-detail__wrap .account-form__group {
        width: 100%; }
        .user-detail__wrap .account-form__group .hide-on-bothTM {
          display: none !important; } }
  .user-detail__wrap .account-form__input {
    min-height: 105px; }
    .user-detail__wrap .account-form__input:disabled {
      background-color: #fff; }

.user-detail__data + .user-detail__data {
  padding-top: 20px; }

.user-notification {
  max-height: 917px;
  overflow: auto;
  margin-bottom: 30px;
  padding-right: 30px;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */ }
  .user-notification::-webkit-scrollbar {
    width: 7px; }
  .user-notification::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px grey;
    border-radius: 10px; }
  .user-notification::-webkit-scrollbar-thumb {
    background: #24adc1;
    border-radius: 7px; }
  .user-notification::-webkit-scrollbar-thumb:hover {
    background: #24adc1; }
  .user-notification__item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 20px;
    opacity: 0.6; }
    .user-notification__item:first-child {
      padding-top: 0; }
    .user-notification__item:last-child .user-notification__content {
      border-bottom: 0; }
    .user-notification__item.not-seen {
      opacity: 1; }
      .user-notification__item.not-seen .user-notification__icon {
        position: relative; }
        .user-notification__item.not-seen .user-notification__icon::after {
          position: absolute;
          content: "";
          width: 10px;
          height: 10px;
          top: 0;
          right: 0;
          background-color: #24adc1;
          border-radius: 50%; }
  .user-notification__icon {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(232, 143, 23, 0.1);
    margin-right: 15px; }
  .user-notification__content {
    width: 100%;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(78, 101, 121, 0.15); }
  .user-notification__title {
    color: #18191b;
    font-size: 14px;
    font-weight: bold;
    padding: 2px 0 10px; }
  .user-notification__text {
    font-size: 14px;
    color: #4e6579;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical; }
  .user-notification__time {
    font-size: 12px;
    font-style: italic;
    color: rgba(78, 101, 121, 0.5); }

.user-register.detail {
  padding-top: 30px;
  border-top: 1px solid rgba(78, 101, 121, 0.15); }

.user-register__wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  @media only screen and (max-width: 46.1875em) {
    .user-register__wrapper {
      display: block; }
      .user-register__wrapper .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 1399px) {
    .user-register__wrapper.special {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      flex-direction: column-reverse; }
      .user-register__wrapper.special .teacher-new__main {
        width: 100%; }
      .user-register__wrapper.special .teacher-new__sidebar {
        padding: 0 0 30px 0;
        width: 100%; } }

.user-register__main {
  width: 70%;
  padding-right: 150px; }
  @media only screen and (max-width: 1366px) {
    .user-register__main {
      padding-right: 30px; } }
  @media only screen and (max-width: 46.1875em) {
    .user-register__main {
      width: 100%;
      padding-right: 0; }
      .user-register__main .hide-on-mobile {
        display: none; } }
  .user-register__main .account-form__content {
    margin-top: 0; }
  .user-register__main .account-teacher {
    margin-top: 0; }
    .user-register__main .account-teacher__edit {
      padding-top: 20px; }
    .user-register__main .account-teacher__group .account-form__group {
      padding-bottom: 20px; }
      .user-register__main .account-teacher__group .account-form__group:last-child {
        padding-bottom: 0; }
  @media only screen and (max-width: 46.1875em) {
    .user-register__main .account-teacher__group,
    .user-register__main .account-form__group {
      display: block;
      width: 100%; }
      .user-register__main .account-teacher__group .hide-on-mobile,
      .user-register__main .account-form__group .hide-on-mobile {
        display: none; }
      .user-register__main .account-teacher__group:first-child,
      .user-register__main .account-form__group:first-child {
        width: 100%; } }
  .user-register__main .account-teacher__group .select2,
  .user-register__main .account-form__group .select2 {
    width: 100% !important; }
  @media only screen and (max-width: 46.1875em) {
    .user-register__main .account-teacher__id,
    .user-register__main .account-form__id {
      width: 100%;
      padding-bottom: 20px; }
      .user-register__main .account-teacher__id .hide-on-mobile,
      .user-register__main .account-form__id .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .user-register__main .account-teacher__example,
    .user-register__main .account-form__example {
      min-height: 200px; }
      .user-register__main .account-teacher__example .hide-on-mobile,
      .user-register__main .account-form__example .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .user-register__main .account-teacher__input,
    .user-register__main .account-form__input {
      width: 100%; }
      .user-register__main .account-teacher__input .hide-on-mobile,
      .user-register__main .account-form__input .hide-on-mobile {
        display: none; } }
  .user-register__main .account-teacher__btn,
  .user-register__main .account-form__btn {
    width: 260px; }
    @media only screen and (max-width: 46.1875em) {
      .user-register__main .account-teacher__btn,
      .user-register__main .account-form__btn {
        margin-top: 0;
        width: 100%; }
        .user-register__main .account-teacher__btn .hide-on-mobile,
        .user-register__main .account-form__btn .hide-on-mobile {
          display: none; } }

.user-register__sidebar {
  width: 263px;
  padding-left: 40px;
  border-left: 1px solid rgba(78, 101, 121, 0.15); }
  @media only screen and (max-width: 46.1875em) {
    .user-register__sidebar {
      width: 100%;
      padding: 40px 0 0 0;
      border-left: 0; }
      .user-register__sidebar .hide-on-mobile {
        display: none; } }
  .user-register__sidebar .account-care__intended {
    width: 100%;
    padding: 5px 0; }

.user-introduce__wrapper .row {
  justify-content: center; }

.user-introduce__wrapper .user-content__header {
  padding-bottom: 5px; }

.user-introduce__content * {
  all: revert; }

.user-introduce__content p {
  line-height: 26px !important; }

.user-support__content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .user-support__content {
      flex-direction: column; }
      .user-support__content .hide-on-mobile {
        display: none; } }

.user-support__address {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  padding: 0 0 30px; }
  @media only screen and (max-width: 46.1875em) {
    .user-support__address {
      padding: 0 0 18px; }
      .user-support__address .hide-on-mobile {
        display: none; } }

.user-support__cover {
  padding: 3px 0 0 10px; }

.user-support__sub, .user-support__text {
  font-size: 14px; }
  @media only screen and (max-width: 63.9375em) {
    .user-support__sub, .user-support__text {
      font-size: 16px; }
      .user-support__sub .hide-on-bothTM, .user-support__text .hide-on-bothTM {
        display: none !important; } }

.user-support__sub {
  font-weight: bold; }

.user-support__contact {
  padding-right: 18px; }
  @media only screen and (max-width: 46.1875em) {
    .user-support__contact {
      padding-right: 0px; }
      .user-support__contact .hide-on-mobile {
        display: none; } }

.user-support__activity {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 1366px) {
    .user-support__activity {
      flex-direction: column; } }
  .user-support__activity .footer-top__hotline {
    background-color: #24adc1;
    border-color: #24adc1; }
  .user-support__activity .footer-top__email {
    border-color: #24adc1; }
    .user-support__activity .footer-top__email > p {
      color: #24adc1; }

.user-support__follow {
  margin-top: 32px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  .user-support__follow .footer-cover__icon {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .user-support__follow .footer-top__us {
    color: #4e6579; }

.user-support__map {
  width: 460px;
  height: 210px;
  border-radius: 10px;
  overflow: hidden; }
  @media only screen and (max-width: 63.9375em) {
    .user-support__map {
      margin-top: 30px; }
      .user-support__map .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 46.1875em) {
    .user-support__map {
      width: 100%; }
      .user-support__map .hide-on-mobile {
        display: none; } }

@media only screen and (max-width: 63.9375em) {
  .user-package__wrapper .premium-priceList__item {
    padding: 0; }
    .user-package__wrapper .premium-priceList__item .hide-on-bothTM {
      display: none !important; } }

.user-package__sidebar .premium-priceList__item {
  width: 100%; }

@media only screen and (max-width: 1650px) {
  .user-package .col-lg-1 {
    display: none; } }

@media only screen and (max-width: 63.9375em) {
  .user-package__content .account-teacher__group {
    flex-direction: column; }
    .user-package__content .account-teacher__group .hide-on-bothTM {
      display: none !important; } }

@media only screen and (max-width: 63.9375em) {
  .user-package__content .account-teacher__group .account-form__group {
    width: 100%; }
    .user-package__content .account-teacher__group .account-form__group .hide-on-bothTM {
      display: none !important; } }

.user-package__content .account-teacher__group .account-form__group:first-child {
  padding-bottom: 20px; }

.user-package__input {
  padding: 13px 20px;
  transition: all 0.2s;
  border: 1.4px solid rgba(112, 112, 112, 0.25);
  border-radius: 7px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .user-package__input span {
    display: none; }
  .user-package__input.success span {
    display: block; }
  .user-package__input input {
    border: 0;
    width: 100%; }

.user-package__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: top; }
  @media only screen and (max-width: 63.9375em) {
    .user-package__cover {
      flex-direction: column; }
      .user-package__cover .hide-on-bothTM {
        display: none !important; } }
  .user-package__cover .account-teacher__group label {
    min-height: 18px; }
    @media only screen and (max-width: 63.9375em) {
      .user-package__cover .account-teacher__group label {
        min-height: 0; }
        .user-package__cover .account-teacher__group label .hide-on-bothTM {
          display: none !important; } }

.user-package__inner {
  width: 48%; }
  @media only screen and (max-width: 63.9375em) {
    .user-package__inner {
      width: 100%;
      padding-bottom: 24px; }
      .user-package__inner .hide-on-bothTM {
        display: none !important; } }
  .user-package__inner .premium-priceList__heading {
    position: relative;
    top: auto; }

.user-package__detail {
  width: 48%; }
  @media only screen and (max-width: 63.9375em) {
    .user-package__detail {
      width: 100%; }
      .user-package__detail .hide-on-bothTM {
        display: none !important; } }

.user-package__img {
  position: relative;
  padding-top: 50%;
  overflow: hidden;
  border-radius: 7px; }
  .user-package__img > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.user-package__sub {
  padding: 28px 24px;
  border-radius: 10px;
  background: rgba(36, 173, 193, 0.05);
  font-size: 14px;
  color: #4e6579; }

.user-package__td {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px; }
  .user-package__td:last-child {
    padding-bottom: 0; }
  .user-package__td.total {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px; }
    .user-package__td.total > p:first-child {
      color: #18191b; }
    .user-package__td.total > p:last-child {
      color: #1e6332; }

.user-monitor__input {
  width: 322px; }
  @media only screen and (max-width: 63.9375em) {
    .user-monitor__input {
      width: 100%;
      margin-top: 20px; }
      .user-monitor__input .hide-on-bothTM {
        display: none !important; } }
  .user-monitor__input .account-form__input {
    padding: 8px 32px 8px 20px; }

@media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
  .user-monitor__header {
    display: block; }
    .user-monitor__header .hide-on-pc-Lose {
      display: none; } }

@media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
  .user-monitor__member {
    margin-top: 20px; }
    .user-monitor__member .hide-on-pc-Lose {
      display: none; } }

@media only screen and (max-width: 63.9375em) {
  .user-monitor__member {
    margin-top: 20px; }
    .user-monitor__member .hide-on-bothTM {
      display: none !important; } }

.user-monitor__member .header-social__avatar {
  position: relative;
  padding-top: 0%;
  overflow: hidden; }
  .user-monitor__member .header-social__avatar > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.user-monitor__member .monitor-member__detail {
  margin-top: 20px; }
  @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
    .user-monitor__member .monitor-member__detail {
      flex-direction: row; }
      .user-monitor__member .monitor-member__detail .hide-on-pc-Lose {
        display: none; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .user-monitor__member .monitor-member__detail {
      flex-direction: row; } }
  @media only screen and (max-width: 46.1875em) {
    .user-monitor__member .monitor-member__detail {
      border-bottom: 0; }
      .user-monitor__member .monitor-member__detail .hide-on-mobile {
        display: none; } }

.user-monitor__member .monitor-info__student + .monitor-info__student {
  margin-top: 25px; }

@media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
  .user-monitor__member .header-social__avatar {
    margin-right: 16px !important;
    margin-bottom: 0; }
    .user-monitor__member .header-social__avatar .hide-on-pc-Lose {
      display: none; } }

@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .user-monitor__member .header-social__avatar {
    margin-right: 16px !important;
    margin-bottom: 0; } }

@media only screen and (max-width: 46.1875em) {
  .user-monitor__member .header-social__avatar {
    margin-right: 0 !important; }
    .user-monitor__member .header-social__avatar .hide-on-mobile {
      display: none; } }

.user-monitor__member .additional-course__title {
  padding-bottom: 0; }

.user-monitor__course .user-course__img {
  min-width: 220px;
  padding-top: 21%; }
  @media only screen and (max-width: 46.1875em) {
    .user-monitor__course .user-course__img {
      padding-top: 40%;
      margin-bottom: 20px; }
      .user-monitor__course .user-course__img .hide-on-mobile {
        display: none; } }

.user-monitor__course .user-course__content {
  padding: 0;
  border: 0; }

.user-monitor__course .profile-item__sub {
  padding-bottom: 0; }

.user-monitor__sub {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .user-monitor__sub {
      display: block; }
      .user-monitor__sub .hide-on-mobile {
        display: none; } }
  .user-monitor__sub .training-secondary__box {
    padding-right: 20px; }
    @media only screen and (max-width: 46.1875em) {
      .user-monitor__sub .training-secondary__box {
        padding: 0 0 15px 0; }
        .user-monitor__sub .training-secondary__box .hide-on-mobile {
          display: none; } }
  .user-monitor__sub .training-secondary__avatar {
    min-width: 50px;
    width: 50px;
    height: 50px; }

.user-monitor__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 20px;
  margin-bottom: 25px; }
  @media only screen and (min-width: 63.9375em) and (max-width: 1241px) {
    .user-monitor__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 20px; } }
  @media only screen and (max-width: 46.1875em) {
    .user-monitor__list {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px 20px; }
      .user-monitor__list .hide-on-mobile {
        display: none; } }

.user-monitor__desc {
  min-width: 250px;
  width: fit-content; }
  .user-monitor__desc + .user-monitor__desc {
    margin-top: 25px; }
  .user-monitor__desc.active {
    min-width: 250px; }
    .user-monitor__desc.active .teacher-new__button {
      margin-bottom: 25px; }
    .user-monitor__desc.active .teacher-new__remove {
      position: absolute;
      top: 0;
      right: 0; }
    .user-monitor__desc.active .user-monitor__member {
      display: block;
      position: relative;
      margin-right: 0; }
    .user-monitor__desc.active .monitor-document__remove {
      margin: 10px auto 0; }
      @media only screen and (max-width: 46.1875em) {
        .user-monitor__desc.active .monitor-document__remove {
          top: 0;
          right: 0; }
          .user-monitor__desc.active .monitor-document__remove .hide-on-mobile {
            display: none; } }
    .user-monitor__desc.active .monitor-info__contact {
      max-width: 210px;
      font-size: 14px;
      text-overflow: ellipsis;
      overflow: hidden; }
  .user-monitor__desc.special.active .teacher-new__button, .user-monitor__desc:nth-child(2).active .teacher-new__button {
    display: none; }
  .user-monitor__desc.custom {
    margin-bottom: 30px; }
    .user-monitor__desc.custom .teacher-new__button {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      width: 200px; }
    .user-monitor__desc.custom .user-monitor__member {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      position: relative;
      margin-right: 0;
      margin-top: 0; }
    .user-monitor__desc.custom .monitor-document__remove {
      margin: 0; }
  @media only screen and (max-width: 46.1875em) {
    .user-monitor__desc {
      min-width: 100%; }
      .user-monitor__desc .hide-on-mobile {
        display: none; } }
  .user-monitor__desc .additional-course__title {
    padding-bottom: 8px; }
  .user-monitor__desc .user-monitor__member {
    display: none; }
  .user-monitor__desc .account-teacher__example {
    flex-direction: row;
    min-height: 45px;
    padding: 7px 15px;
    background-color: transparent;
    width: 100%; }
  .user-monitor__desc .account-teacher__text {
    margin-top: 0;
    text-align: left; }

.user-staff__btn button + button {
  margin-left: 20px; }
  @media only screen and (max-width: 46.1875em) {
    .user-staff__btn button + button {
      margin-left: 0; }
      .user-staff__btn button + button .hide-on-mobile {
        display: none; } }

.user-staff__btn .account-form__btn {
  background-image: none; }

.user-staff__btn .account-form__btn:first-child {
  background-color: #27b737; }

.user-staff__btn .account-form__btn:last-child {
  background-color: transparent;
  border: 1px solid #f33066;
  color: #f33066; }

.user-section__wrapper {
  padding: 30px 0 35px;
  overflow: hidden; }

.user-section__slider {
  position: relative; }
  .user-section__slider::before {
    content: "";
    position: absolute;
    width: calc(100% + 40px);
    height: 2px;
    background-color: rgba(78, 101, 121, 0.15);
    top: 10px;
    left: -20px; }
  .user-section__slider::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    background-color: #24adc1;
    top: 10px;
    left: -20px; }
  .user-section__slider.student .swiper-slide:last-child::after {
    display: block; }
  .user-section__slider .swiper {
    overflow-x: hidden;
    overflow-y: visible; }
    .user-section__slider .swiper-wrapper {
      height: fit-content;
      padding-top: 36px; }
    .user-section__slider .swiper-slide::after {
      content: "";
      position: absolute;
      top: -36px;
      left: 15px;
      width: 22px;
      height: 22px;
      background-color: #24adc1;
      border-radius: 50%; }
    .user-section__slider .swiper-slide.create::after {
      display: none; }
    .user-section__slider .swiper-slide.hold .user-section__item {
      opacity: 0.25; }
    .user-section__slider .swiper-slide.user-active {
      position: relative; }
      .user-section__slider .swiper-slide.user-active::before {
        content: "";
        position: absolute;
        width: 17px;
        height: 13px;
        left: 18px;
        top: -11px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='13' viewBox='0 0 17 13'%3E%3Cpath id='Polygon_1' data-name='Polygon 1' d='M7.663,1.28a1,1,0,0,1,1.674,0l6.651,10.173A1,1,0,0,1,15.151,13H1.849a1,1,0,0,1-.837-1.547Z' fill='%23eff3f7'/%3E%3C/svg%3E%0A");
        background-size: cover;
        background-repeat: no-repeat; }
      .user-section__slider .swiper-slide.user-active .user-section__item {
        background-color: #eff3f7; }
    .user-section__slider .swiper-slide.user-active__sub::before {
      content: "";
      position: absolute;
      top: -26px;
      left: 37px;
      width: 101%;
      height: 2px;
      background-color: #24adc1; }

.user-section__create {
  position: relative;
  text-align: center;
  max-width: 150px;
  padding: 60px 0;
  background-color: #eff3f7;
  border-radius: 5px;
  color: #4e6579; }
  .user-section__create > svg {
    margin-bottom: 12px; }
  .user-section__create.special {
    background-color: transparent;
    border: 1px dashed rgba(112, 112, 112, 0.5);
    max-width: 165px;
    padding: 70px 0; }

.user-section__info {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  padding: 30px 160px 0 0;
  position: relative; }
  @media only screen and (max-width: 46.1875em) {
    .user-section__info {
      flex-direction: column;
      padding: 40px 0 0 0; }
      .user-section__info .hide-on-mobile {
        display: none; } }

@media only screen and (max-width: 46.1875em) {
  .user-section__location {
    padding-top: 20px; }
    .user-section__location .hide-on-mobile {
      display: none; } }

@media only screen and (max-width: 46.1875em) {
  .user-section__member {
    padding-top: 10px; }
    .user-section__member .hide-on-mobile {
      display: none; } }

.user-section__sub {
  font-size: 14px;
  color: #4e6579;
  padding-top: 10px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  max-width: 550px;
  overflow: hidden;
  text-overflow: ellipsis; }
  .user-section__sub > svg {
    margin: 0 3px 2px 0;
    min-width: 20px; }
  .user-section__sub > a {
    text-overflow: ellipsis;
    color: #24adc1; }

.user-section__btn {
  position: absolute;
  top: 10px;
  right: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }

.user-section__button {
  border: 0;
  background-color: transparent;
  font-weight: 700; }
  .user-section__button + .user-section__button {
    margin-left: 20px; }
  .user-section__button > svg {
    margin: 0 2px 4px 0; }
  .user-section__button.edit {
    color: #24adc1; }
  .user-section__button.remove {
    color: #f33066; }

.user-section__item {
  padding: 15px;
  border-radius: 5px; }
  .user-section__item .user-detail__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 51px; }

.user-section__inner {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 45px 0;
  border: 1px dashed rgba(112, 112, 112, 0.5);
  border-radius: 5px;
  color: #4e6579;
  max-width: 79%; }
  @media only screen and (max-width: 46.1875em) {
    .user-section__inner {
      max-width: 100%; }
      .user-section__inner .hide-on-mobile {
        display: none; } }

.user-section__desc {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 12px; }
  .user-section__desc button + button {
    margin-left: 12px; }
  .user-section__desc > button {
    padding: 11px 20px 9px;
    border-radius: 5px;
    font-size: 14px; }

.user-section__success {
  background-color: rgba(39, 183, 55, 0.05);
  border: 1px solid #27b737;
  color: #27b737; }

.user-section__cancel {
  background-color: rgba(243, 48, 102, 0.05);
  border: 1px solid #f33066;
  color: #f33066; }

.user-section__box {
  padding: 30px 0 0 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  .user-section__box > button,
  .user-section__box > a {
    border-radius: 7px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    min-width: 250px;
    text-transform: uppercase;
    font-weight: 500; }

.user-section__agree + .user-section__edit {
  margin-left: 20px; }

.user-section__agree {
  background-color: #27b737;
  border: 1px solid #27b737;
  color: #fff; }

.user-section__edit {
  background-color: rgba(243, 48, 102, 0.05);
  border: 1px solid #f33066;
  color: #f33066; }
  .user-section__edit:hover {
    background-color: #f33066;
    color: #fff; }

.user-section__group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start; }
  @media only screen and (max-width: 1399px) {
    .user-section__group {
      flex-direction: column; } }

@media only screen and (max-width: 1399px) {
  .user-section__groupItem + .user-section__groupItem {
    margin-top: -10px; } }

.hidden {
  display: none; }

.teacher-information .account-form__cover {
  padding-bottom: 40px; }
  .teacher-information .account-form__cover:last-child {
    padding-bottom: 0; }
  @media only screen and (max-width: 46.1875em) {
    .teacher-information .account-form__cover .account-teacher__experience {
      flex-direction: column; }
      .teacher-information .account-form__cover .account-teacher__experience .hide-on-mobile {
        display: none; }
      .teacher-information .account-form__cover .account-teacher__experience .account-form__group {
        width: 100%; }
        .teacher-information .account-form__cover .account-teacher__experience .account-form__group:last-child {
          padding-top: 20px; } }

.teacher-information__sub {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 6px 19px;
  border: 1px solid rgba(78, 101, 121, 0.25);
  border-radius: 5px; }

.teacher-information__link {
  border: 0;
  width: 100%;
  margin-left: 15px; }

.teacher-information__service {
  padding-bottom: 20px; }
  .teacher-information__service .account-form__label {
    margin: 25px 0 0 0; }

.teacher-information__sidebar {
  padding-bottom: 30px; }
  .teacher-information__sidebar .account-teacher__id {
    width: 100%;
    margin-bottom: 20px; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .teacher-information__sidebar {
      width: 48%; } }

.teacher-information__socical {
  padding-bottom: 20px; }
  .teacher-information__socical:last-child {
    padding-bottom: 0; }

.teacher-information .account-form__content {
  margin-top: 10px; }
  .teacher-information .account-form__content .account-teacher__list {
    width: 70%; }
    @media only screen and (max-width: 63.9375em) {
      .teacher-information .account-form__content .account-teacher__list {
        width: 100%; }
        .teacher-information .account-form__content .account-teacher__list .hide-on-bothTM {
          display: none !important; } }

.teacher-information__field {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 20px; }
  @media only screen and (max-width: 46.1875em) {
    .teacher-information__field {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px 20px; }
      .teacher-information__field .hide-on-mobile {
        display: none; } }
  .teacher-information__field .account-care__filed {
    margin-top: 0;
    padding-left: 15px; }
    @media only screen and (max-width: 46.1875em) {
      .teacher-information__field .account-care__filed .hide-on-mobile {
        display: none; }
      .teacher-information__field .account-care__filed:last-child {
        margin-top: 20px; } }
  .teacher-information__field .account-care__intended::after {
    left: -30px; }
    @media only screen and (max-width: 1283px) {
      .teacher-information__field .account-care__intended::after {
        width: calc(90% + 40px); }
        .teacher-information__field .account-care__intended::after .hide-on-pc-HD {
          display: none; } }

.teacher-information__stt {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 20px; }
  .teacher-information__stt > span {
    line-height: 20px;
    font-size: 18px; }

.teacher-information__check {
  width: 20px;
  height: 20px;
  margin-right: 10px; }

.teacher-information__text {
  margin: 5px 0 15px;
  color: #24adc1;
  position: relative; }
  .teacher-information__text::before {
    position: absolute;
    content: "";
    width: 5px;
    height: 30px;
    top: -3px;
    left: -15px;
    background-color: #24adc1;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px; }

@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .teacher-information .user-content__sidebar {
    align-items: start; } }

.teacher-information .user-content__update {
  width: 100%; }

.teacher-create .my-course__active {
  margin-left: 20px; }

.teacher-create__sreach {
  padding-bottom: 40px; }
  .teacher-create__sreach.flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media only screen and (max-width: 46.1875em) {
      .teacher-create__sreach.flex {
        flex-direction: column; }
        .teacher-create__sreach.flex .hide-on-mobile {
          display: none; } }
    .teacher-create__sreach.flex .account-form__group {
      width: 100%;
      margin: 0 20px 0 0; }
      @media only screen and (max-width: 46.1875em) {
        .teacher-create__sreach.flex .account-form__group {
          margin: 0 0 20px 0; }
          .teacher-create__sreach.flex .account-form__group .hide-on-mobile {
            display: none; } }

.teacher-create__heading {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px; }
  @media only screen and (max-width: 46.1875em) {
    .teacher-create__heading {
      flex-direction: column; }
      .teacher-create__heading .hide-on-mobile {
        display: none; } }
  .teacher-create__heading .additional-course__title {
    padding: 0; }
  .teacher-create__heading .account-form__group {
    width: 40%; }
    @media only screen and (max-width: 46.1875em) {
      .teacher-create__heading .account-form__group {
        width: 100%;
        padding-top: 20px; }
        .teacher-create__heading .account-form__group .hide-on-mobile {
          display: none; } }
  .teacher-create__heading .account-form__input {
    padding: 5px 20px; }

.teacher-create__btn {
  max-width: 260px;
  margin: 0 auto; }
  @media only screen and (max-width: 46.1875em) {
    .teacher-create__btn {
      max-width: 100%; }
      .teacher-create__btn .hide-on-mobile {
        display: none; } }

.teacher-new__main .user-course__item {
  padding-bottom: 38px; }

.teacher-new__main .user-course__content {
  padding: 0;
  border-top: 0; }
  @media only screen and (max-width: 46.1875em) {
    .teacher-new__main .user-course__content {
      padding: 25px 0 0 0; }
      .teacher-new__main .user-course__content .hide-on-mobile {
        display: none; } }

.teacher-new__main .user-course__img {
  min-width: 220px;
  height: 124px; }

@media only screen and (max-width: 46.1875em) {
  .teacher-new__main .account-teacher__group {
    flex-direction: column; }
    .teacher-new__main .account-teacher__group .hide-on-mobile {
      display: none; } }

@media only screen and (max-width: 46.1875em) {
  .teacher-new__main .account-teacher__group .account-form__group {
    width: 100%; }
    .teacher-new__main .account-teacher__group .account-form__group .hide-on-mobile {
      display: none; }
    .teacher-new__main .account-teacher__group .account-form__group:last-child {
      padding-top: 20px; } }

.teacher-new__main .account-form__target {
  display: block;
  padding: 0 0 30px 50px !important; }

.teacher-new__main .account-form__phone + .user-detail__cover {
  padding-top: 20px; }

.teacher-new__custom {
  padding-bottom: 20px; }
  .teacher-new__custom.hold {
    opacity: 0.25; }

.teacher-new__upload {
  padding: 20px 0; }

.teacher-new__cover {
  padding-bottom: 20px; }

.teacher-new__sub {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start; }
  .teacher-new__sub > span {
    font-size: 18px;
    color: #24adc1;
    width: 40px;
    height: 50px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center; }

.teacher-new__option {
  width: 100%;
  padding-left: 10px; }

.teacher-new__flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding-top: 10px;
  position: relative; }
  @media only screen and (max-width: 46.1875em) {
    .teacher-new__flex {
      flex-flow: row wrap; }
      .teacher-new__flex .hide-on-mobile {
        display: none; } }
  .teacher-new__flex.special {
    padding-top: 0;
    margin-bottom: 20px; }
  .teacher-new__flex .account-care__option {
    padding-right: 40px; }

.teacher-new__notification {
  padding-top: 25px;
  border-top: 1px solid rgba(78, 101, 121, 0.15); }
  .teacher-new__notification > .account-form__group {
    padding-top: 20px;
    width: 50%;
    margin-top: 0; }
    .teacher-new__notification > .account-form__group:last-child {
      width: 90%; }
      @media only screen and (max-width: 46.1875em) {
        .teacher-new__notification > .account-form__group:last-child {
          width: 100%; }
          .teacher-new__notification > .account-form__group:last-child .hide-on-mobile {
            display: none; } }
    @media only screen and (max-width: 46.1875em) {
      .teacher-new__notification > .account-form__group {
        width: 100%; }
        .teacher-new__notification > .account-form__group .hide-on-mobile {
          display: none; } }

.teacher-new__btn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 30px 0 50px 0; }
  @media only screen and (max-width: 63.9375em) {
    .teacher-new__btn {
      flex-direction: column; }
      .teacher-new__btn .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 46.1875em) {
    .teacher-new__btn {
      padding: 25px 0 40px 0; }
      .teacher-new__btn .hide-on-mobile {
        display: none; } }
  .teacher-new__btn.special {
    padding-top: 0; }
  .teacher-new__btn .account-care__option {
    margin: 30px 20px 0 0; }

.teacher-new__sidebar {
  padding-left: 40px;
  min-width: 295px;
  padding-left: 40px; }
  @media only screen and (max-width: 46.1875em) {
    .teacher-new__sidebar {
      padding: 30px 0 10px 0;
      min-width: 100%; }
      .teacher-new__sidebar .hide-on-mobile {
        display: none; } }

.teacher-new__select.active .teacher-new__list {
  display: block; }

.teacher-new__select > button {
  font-size: 14px;
  color: rgba(78, 101, 121, 0.25);
  padding: 12px 40px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(112, 112, 112, 0.5);
  background: transparent; }
  .teacher-new__select > button svg {
    margin: 0 5px 5px 0;
    opacity: 0.25; }

.teacher-new__special .account-form__group,
.teacher-new__special .account-form__input {
  width: 100%; }

.teacher-new__remove {
  border: 0;
  background: transparent; }
  .teacher-new__remove.special {
    padding: 14px 0 0 81px; }

.teacher-new__list {
  display: none;
  max-height: 1156px;
  overflow: auto;
  padding-right: 10px;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */ }
  .teacher-new__list .header-social__avatar {
    min-width: 50px;
    width: 50px;
    height: 50px;
    position: relative;
    padding-top: 0%;
    overflow: hidden; }
    .teacher-new__list .header-social__avatar > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .teacher-new__list::-webkit-scrollbar {
    width: 7px; }
  .teacher-new__list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px grey;
    border-radius: 10px; }
  .teacher-new__list::-webkit-scrollbar-thumb {
    background: #24adc1;
    border-radius: 7px; }
  .teacher-new__list::-webkit-scrollbar-thumb:hover {
    background: #24adc1; }
  .teacher-new__list .monitor-info__student {
    padding-top: 30px; }
  .teacher-new__list .monitor-document__remove {
    margin-top: 10px; }

.teacher-new__modal .account-form {
  border-radius: 8px; }
  .teacher-new__modal .account-form__list {
    margin-top: 28px;
    display: block;
    padding-right: 0;
    padding-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 44px;
    max-height: 477px;
    overflow: auto;
    padding-right: 10px; }
    @media only screen and (max-width: 46.1875em) {
      .teacher-new__modal .account-form__list {
        margin-top: 18px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0 0; }
        .teacher-new__modal .account-form__list .hide-on-mobile {
          display: none; } }

.teacher-new__modal .header-social__service {
  padding-right: 12px;
  width: 100%; }
  @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
    .teacher-new__modal .header-social__service {
      margin-left: 6px; }
      .teacher-new__modal .header-social__service .hide-on-pc-Lose {
        display: none; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .teacher-new__modal .header-social__service {
      margin-left: 6px; } }

.teacher-new__modal .intro-tabs__input {
  border-left: 0;
  padding-left: 0; }

.teacher-new__modal .account-care__option {
  margin-top: 0; }

.teacher-new__modal .account-care__label {
  margin-top: 0;
  margin-right: 0;
  border: 1px solid rgba(78, 101, 121, 0.5); }

.teacher-new__modal .teacher-new__list .monitor-info__student {
  padding-top: 0px; }
  @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
    .teacher-new__modal .teacher-new__list .monitor-info__student {
      flex-direction: row; }
      .teacher-new__modal .teacher-new__list .monitor-info__student .hide-on-pc-Lose {
        display: none; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .teacher-new__modal .teacher-new__list .monitor-info__student {
      flex-direction: row; } }
  @media only screen and (max-width: 46.1875em) {
    .teacher-new__modal .teacher-new__list .monitor-info__student {
      padding-top: 16px; }
      .teacher-new__modal .teacher-new__list .monitor-info__student .hide-on-mobile {
        display: none; } }
  .teacher-new__modal .teacher-new__list .monitor-info__student:last-child {
    border-bottom: 0; }

.teacher-new__modal .monitor-info__student {
  position: relative;
  padding-left: 35px; }
  .teacher-new__modal .monitor-info__student .account-care__option {
    position: absolute;
    top: 15px;
    left: 0; }

@media only screen and (min-width: 1000px) {
  .teacher-new__dialog {
    max-width: 70%; } }

@media only screen and (max-width: 1000px) {
  .teacher-new__dialog {
    max-width: 100%; } }

.teacher-new__data {
  min-height: initial;
  margin-top: 0; }
  .teacher-new__data .teacher-new__info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 15px;
    border-bottom: 1px solid rgba(78, 101, 121, 0.15); }
    .teacher-new__data .teacher-new__info:first-child {
      padding-top: 0; }
    .teacher-new__data .teacher-new__info:last-child {
      border-bottom: 0; }

.teacher-new__desc + .teacher-new__desc {
  margin-top: 25px; }

.teacher-new__desc .additional-course__title {
  padding-bottom: 0; }

.teacher-new__ab {
  position: absolute;
  top: 85px;
  background-color: #fff;
  width: 100%;
  border: 1px solid rgba(112, 112, 112, 0.25);
  display: none;
  z-index: 11; }
  .teacher-new__ab.active {
    display: block; }
  .teacher-new__ab > button {
    color: #18191b;
    color: #4e6579;
    padding: 10px 20px;
    background-color: rgba(78, 101, 121, 0.01);
    border: 0;
    width: 100%;
    text-align: left; }
    .teacher-new__ab > button:hover {
      background-color: rgba(36, 173, 193, 0.1); }

.teacher-new__fancybox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px 15px; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .teacher-new__fancybox {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px 15px; } }
  @media only screen and (max-width: 46.1875em) {
    .teacher-new__fancybox {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px 10px; }
      .teacher-new__fancybox .hide-on-mobile {
        display: none; } }
  .teacher-new__fancybox > a {
    position: relative;
    padding-top: 66%;
    overflow: hidden; }
    .teacher-new__fancybox > a > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }

.teacher-post .account-teacher__example {
  height: 120px; }

.teacher-post__custom {
  margin: 30px 0 10px; }

.teacher-post__select {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  .teacher-post__select .account-care__value {
    color: #18191b;
    font-size: 14px; }

.teacher-post__sub + .teacher-post__sub {
  padding-left: 30px; }

.teacher-post__price > span:first-child {
  font-weight: bold; }

.teacher-chart {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-end; }
  @media only screen and (max-width: 46.1875em) {
    .teacher-chart {
      padding: 20px 0 5px;
      display: block; }
      .teacher-chart .hide-on-mobile {
        display: none; } }
  .teacher-chart .account-form__group {
    margin: 0 20px 0 0; }
    @media only screen and (max-width: 46.1875em) {
      .teacher-chart .account-form__group {
        margin: 0 0 20px 0; }
        .teacher-chart .account-form__group .hide-on-mobile {
          display: none; } }
  .teacher-chart__btn {
    border: 0;
    background: linear-gradient(0deg, #24adc1 0%, #1795a8 47%);
    padding: 7px 30px;
    color: #fff;
    border-radius: 5px; }
    @media only screen and (max-width: 46.1875em) {
      .teacher-chart__btn {
        width: 100%; }
        .teacher-chart__btn .hide-on-mobile {
          display: none; } }

.teacher-modal__container {
  max-width: 1372px; }
  .teacher-modal__container .modal-content {
    background-color: #edf0f4; }
  .teacher-modal__container .premium-wrapper {
    min-height: 500px; }
  .teacher-modal__container .premium-priceList__heading {
    position: relative;
    width: fit-content;
    margin: 20px auto 50px; }
  .teacher-modal__container .premium-priceList__cover {
    padding-bottom: 35px; }
  .teacher-modal__container .premium-priceList__btn {
    background-color: rgba(36, 173, 193, 0.1); }
    .teacher-modal__container .premium-priceList__btn:hover {
      background-color: #24adc1; }
    .teacher-modal__container .premium-priceList__btn.use {
      color: rgba(78, 101, 121, 0.25);
      background-color: transparent;
      border-color: rgba(78, 101, 121, 0.25); }
      .teacher-modal__container .premium-priceList__btn.use:hover {
        background-color: rgba(36, 173, 193, 0.25);
        border-color: rgba(36, 173, 193, 0.25);
        color: #fff; }

.teacher-monitor__info .table-code {
  width: 15% !important; }
  @media only screen and (max-width: 63.9375em) {
    .teacher-monitor__info .table-code {
      width: 100% !important; }
      .teacher-monitor__info .table-code .hide-on-bothTM {
        display: none !important; } }

.teacher-monitor__info .table-quantity {
  width: 25% !important; }
  @media only screen and (max-width: 63.9375em) {
    .teacher-monitor__info .table-quantity {
      width: 100% !important; }
      .teacher-monitor__info .table-quantity .hide-on-bothTM {
        display: none !important; } }
  .teacher-monitor__info .table-quantity .user-monitor__sub {
    justify-content: center; }
    @media only screen and (max-width: 63.9375em) {
      .teacher-monitor__info .table-quantity .user-monitor__sub {
        margin-top: 15px; }
        .teacher-monitor__info .table-quantity .user-monitor__sub .hide-on-bothTM {
          display: none !important; } }
  .teacher-monitor__info .table-quantity .training-secondary__box {
    padding-right: 0; }
  .teacher-monitor__info .table-quantity .training-secondary__text {
    text-align: left; }

.teacher-monitor__info.special .table-progress {
  width: 40% !important; }
  .teacher-monitor__info.special .table-progress .profile-item__time {
    flex-flow: row wrap; }
  .teacher-monitor__info.special .table-progress .manager-text {
    width: 100%; }

.teacher-monitor__info.special .table-remove {
  position: relative !important;
  top: 0 !important;
  transform: translateY(0) !important;
  justify-content: center; }

.teacher-monitor__info.special .table-link {
  width: 6%; }
  .teacher-monitor__info.special .table-link .monitor-info__edit {
    margin: 0; }

@media only screen and (max-width: 46.1875em) {
  .teacher-monitor__info.special .table-progress, .teacher-monitor__info.special .table-link, .teacher-monitor__info.special .table-quantity, .teacher-monitor__info.special .table-code {
    width: 100% !important; }
    .teacher-monitor__info.special .table-progress .hide-on-mobile, .teacher-monitor__info.special .table-link .hide-on-mobile, .teacher-monitor__info.special .table-quantity .hide-on-mobile, .teacher-monitor__info.special .table-code .hide-on-mobile {
      display: none; } }

i + i {
  margin-left: 3px; }

.monitor-header, .monitor-footer {
  padding: 0 40px; }
  @media only screen and (max-width: 1366px) {
    .monitor-header, .monitor-footer {
      padding: 0 24px; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .monitor-header, .monitor-footer {
      padding: 0 24px; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-header, .monitor-footer {
      padding: 0 14px; }
      .monitor-header .hide-on-mobile, .monitor-footer .hide-on-mobile {
        display: none; } }

.monitor-header.special .user-content__heading {
  margin-top: 10px; }

.monitor-header__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  min-width: 53%;
  justify-content: space-between; }
  @media only screen and (max-width: 63.9375em) {
    .monitor-header__cover {
      margin-top: 20px; }
      .monitor-header__cover .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-header__cover {
      flex-direction: column; }
      .monitor-header__cover .hide-on-mobile {
        display: none; } }

.monitor-header__add {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  min-width: fit-content;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  border: 0;
  color: #faaf3a;
  background-color: transparent; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-header__add {
      margin-top: 18px; }
      .monitor-header__add .hide-on-mobile {
        display: none; } }
  .monitor-header__add > svg {
    margin-right: 14px; }

.monitor-header .user-content__title {
  font-weight: 500; }

.monitor-header .account-form__phone {
  width: 100%; }
  .monitor-header .account-form__phone > input::placeholder {
    color: rgba(78, 101, 121, 0.3); }
  .monitor-header .account-form__phone > input:first-child {
    max-width: 100%;
    margin-right: 30px;
    padding: 9px 18px 9px 20px; }
    @media only screen and (max-width: 1366px) {
      .monitor-header .account-form__phone > input:first-child {
        margin-right: 16px; } }
    @media only screen and (max-width: 46.1875em) {
      .monitor-header .account-form__phone > input:first-child {
        margin-right: 0px; }
        .monitor-header .account-form__phone > input:first-child .hide-on-mobile {
          display: none; } }

.monitor-content__wrapper {
  padding: 28px 0 28px; }

.monitor-info {
  margin-top: 24px;
  position: relative; }
  .monitor-info.special .table-code {
    width: 17%; }
  .monitor-info.special .table-quantity {
    width: 17%; }
  .monitor-info.special .table-progress {
    width: 46%; }
  .monitor-info.special .table-remove {
    width: 18%; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-info.special .table-code, .monitor-info.special .table-remove, .monitor-info.special .table-progress, .monitor-info.special .table-quantity {
      width: 100%; }
      .monitor-info.special .table-code .hide-on-mobile, .monitor-info.special .table-remove .hide-on-mobile, .monitor-info.special .table-progress .hide-on-mobile, .monitor-info.special .table-quantity .hide-on-mobile {
        display: none; } }
  .monitor-info.special .monitor-info__edit {
    margin-left: 20px; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info.special .monitor-info__edit:first-child {
        right: 60px; }
        .monitor-info.special .monitor-info__edit:first-child .hide-on-mobile {
          display: none; } }
  .monitor-info__cover {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    padding: 8px 24px;
    position: relative; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .monitor-info__cover {
        padding: 8px 10px; } }
    .monitor-info__cover .table-info {
      text-align: center;
      width: 30%;
      padding-right: 12px; }
    .monitor-info__cover .table-progress {
      width: 50%; }
    .monitor-info__cover .table-number {
      width: 5%;
      text-align: center; }
    .monitor-info__cover .table-quantity {
      width: 20%; }
    .monitor-info__cover .table-code {
      width: 20%;
      text-align: center; }
    .monitor-info__cover .table-remove, .monitor-info__cover .table-edit {
      display: flex;
      justify-content: flex-end; }
    .monitor-info__cover .table-edit {
      width: 15%; }
    .monitor-info__cover .table-name {
      width: 50%;
      padding-right: 18px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
      @media only screen and (max-width: 46.1875em) {
        .monitor-info__cover .table-name {
          padding-right: 0; }
          .monitor-info__cover .table-name .hide-on-mobile {
            display: none; } }
    .monitor-info__cover .table-time {
      width: 25%; }
    .monitor-info__cover .table-size {
      width: 17%; }
    .monitor-info__cover .table-remove {
      width: 8%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 12px; }
      @media only screen and (max-width: 46.1875em) {
        .monitor-info__cover .table-remove {
          top: 4%; }
          .monitor-info__cover .table-remove .hide-on-mobile {
            display: none; } }
      .monitor-info__cover .table-remove .monitor-document__remove {
        position: relative; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__cover .table-name, .monitor-info__cover .table-time, .monitor-info__cover .table-size {
        margin-bottom: 10px; }
        .monitor-info__cover .table-name .hide-on-mobile, .monitor-info__cover .table-time .hide-on-mobile, .monitor-info__cover .table-size .hide-on-mobile {
          display: none; } }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__cover .table-quantity, .monitor-info__cover .table-code, .monitor-info__cover .table-size, .monitor-info__cover .table-time, .monitor-info__cover .table-name, .monitor-info__cover .table-info, .monitor-info__cover .table-progress, .monitor-info__cover .table-edit {
        width: 100%; }
        .monitor-info__cover .table-quantity .hide-on-mobile, .monitor-info__cover .table-code .hide-on-mobile, .monitor-info__cover .table-size .hide-on-mobile, .monitor-info__cover .table-time .hide-on-mobile, .monitor-info__cover .table-name .hide-on-mobile, .monitor-info__cover .table-info .hide-on-mobile, .monitor-info__cover .table-progress .hide-on-mobile, .monitor-info__cover .table-edit .hide-on-mobile {
          display: none; } }
    .monitor-info__cover.special .table-code {
      width: 30% !important; }
    .monitor-info__cover.special .table-quantity {
      width: 35% !important; }
    .monitor-info__cover.special .table-remove {
      width: 30% !important;
      position: relative;
      top: 0;
      transform: translateY(0); }
      .monitor-info__cover.special .table-remove button {
        min-width: 100px;
        border-radius: 5px;
        margin-right: 5px;
        padding: 3px 0; }
        .monitor-info__cover.special .table-remove button:first-child {
          background-color: #27b737;
          border: 1px solid #27b737;
          color: #fff; }
        .monitor-info__cover.special .table-remove button:last-child {
          background-color: rgba(243, 48, 102, 0.05);
          border: 1px solid #f33066;
          color: #f33066; }
          .monitor-info__cover.special .table-remove button:last-child:hover {
            background-color: #f33066;
            color: #fff; }
      @media only screen and (max-width: 46.1875em) {
        .monitor-info__cover.special .table-remove {
          position: relative;
          padding-top: 20px; }
          .monitor-info__cover.special .table-remove .hide-on-mobile {
            display: none; } }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__cover.special .table-code, .monitor-info__cover.special .table-quantity, .monitor-info__cover.special .table-remove {
        width: 100% !important; }
        .monitor-info__cover.special .table-code .hide-on-mobile, .monitor-info__cover.special .table-quantity .hide-on-mobile, .monitor-info__cover.special .table-remove .hide-on-mobile {
          display: none; } }
    .monitor-info__cover.special2 .table-number, .monitor-info__cover.special2 .table-total, .monitor-info__cover.special2 .table-quantity, .monitor-info__cover.special2 .table-progress, .monitor-info__cover.special2 .table-name, .monitor-info__cover.special2 .table-info, .monitor-info__cover.special2 .table-progress, .monitor-info__cover.special2 .table-edit {
      text-align: left; }
  .monitor-info__header {
    background-color: #eff3f7;
    padding-left: 20px !important; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__header {
        display: none; }
        .monitor-info__header .hide-on-mobile {
          display: none; } }
    .monitor-info__header > span {
      color: #4e6579; }
      @media only screen and (max-width: 63.9375em) {
        .monitor-info__header > span {
          font-size: 15px; }
          .monitor-info__header > span .hide-on-bothTM {
            display: none !important; } }
    .monitor-info__header .table-name {
      padding-left: 60px; }
      @media only screen and (max-width: 1440px) {
        .monitor-info__header .table-name {
          padding-left: 42px; } }
      @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
        .monitor-info__header .table-name {
          justify-content: flex-start;
          flex-direction: row; }
          .monitor-info__header .table-name .hide-on-pc-Lose {
            display: none; } }
      @media only screen and (max-width: 63.9375em) {
        .monitor-info__header .table-name {
          justify-content: center;
          padding-left: 0; }
          .monitor-info__header .table-name .hide-on-bothTM {
            display: none !important; } }
    .monitor-info__header .table-remove {
      justify-content: center;
      padding-left: 15px; }
    .monitor-info__header.special {
      text-align: left; }
  .monitor-info__item {
    position: relative;
    margin: 0 20px 0 0;
    padding: 30px 0px 26px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .monitor-info__item {
        margin: 0 10px; } }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__item {
        display: flex;
        margin: 0 10px;
        flex-direction: column;
        border-radius: 10px;
        padding: 20px 14px 22px;
        border: 1px solid rgba(112, 112, 112, 0.25); }
        .monitor-info__item .hide-on-mobile {
          display: none; } }
    .monitor-info__item + .monitor-info__item {
      border-top: 1px solid rgba(78, 101, 121, 0.15); }
      @media only screen and (max-width: 46.1875em) {
        .monitor-info__item + .monitor-info__item {
          border: 1px solid rgba(112, 112, 112, 0.25);
          margin-top: 16px; }
          .monitor-info__item + .monitor-info__item .hide-on-mobile {
            display: none; } }
    .monitor-info__item.special {
      padding: 0; }
  .monitor-info__student {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    position: relative; }
    .monitor-info__student + .monitor-info__student {
      padding-top: 15px; }
    .monitor-info__student.edit .header-social__avatar {
      position: relative;
      padding-top: 0%;
      overflow: hidden; }
      .monitor-info__student.edit .header-social__avatar > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__student .hide-on-mobile {
        display: none; } }
  .monitor-info__text {
    text-align: left;
    margin-right: 20px; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__text {
        margin-left: 14px; }
        .monitor-info__text .hide-on-mobile {
          display: none; } }
  .monitor-info__contact {
    margin-top: 12px;
    line-height: 1.5;
    font-size: 15px;
    text-align: left;
    color: rgba(24, 25, 27, 0.75); }
    .monitor-info__contact + .monitor-info__contact {
      margin-top: 6px; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-info__level {
      margin-top: 16px; }
      .monitor-info__level .hide-on-mobile {
        display: none; } }
  .monitor-info__title {
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5; }
  .monitor-info__code {
    margin-top: 3px;
    font-size: 15px;
    color: #4e6579; }
  .monitor-info__progress {
    margin-top: 18px;
    border-radius: 50px;
    background-color: #eff3f7; }
    .monitor-info__progress .progress-bar {
      border-radius: 50px;
      background-color: #faaf3a; }
  .monitor-info__detail {
    margin-top: 8px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(78, 101, 121, 0.5); }
  .monitor-info__time {
    margin-top: 12px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
    .monitor-info__time > svg {
      margin: 0 8px; }
    .monitor-info__time > span {
      color: #4e6579; }
    .monitor-info__time > p {
      color: rgba(78, 101, 121, 0.3); }
  .monitor-info__icon {
    margin-right: 14px;
    max-width: 32px; }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .monitor-info__icon {
        margin-right: 0;
        margin-bottom: 8px; } }
  .monitor-info__name {
    color: #18191b; }
  .monitor-info__text, .monitor-info__name, .monitor-info__desc {
    max-width: 90%;
    text-overflow: ellipsis;
    overflow: hidden; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__text, .monitor-info__name, .monitor-info__desc {
        max-width: 75%; }
        .monitor-info__text .hide-on-mobile, .monitor-info__name .hide-on-mobile, .monitor-info__desc .hide-on-mobile {
          display: none; } }
  .monitor-info__label {
    color: #4e6579;
    font-size: 16px;
    margin-bottom: 8px;
    display: none; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__label {
        display: block;
        font-style: italic; }
        .monitor-info__label .hide-on-mobile {
          display: none; } }
  .monitor-info__edit {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    width: 40px;
    height: 40px;
    border: 0;
    margin-top: 8px;
    border-radius: 50%;
    background-color: rgba(36, 173, 193, 0.05); }
    .monitor-info__edit + .monitor-info__edit {
      margin-left: 5px; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__edit {
        position: absolute;
        right: 10px;
        top: 0; }
        .monitor-info__edit .hide-on-mobile {
          display: none; } }
  .monitor-info .account-form__target {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: right;
    padding: 0 30px 30px; }
  .monitor-info__list {
    padding: 0 0 0 20px; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-info__list {
        padding: 0 15px; }
        .monitor-info__list .hide-on-mobile {
          display: none; } }
    .monitor-info__list.special {
      padding: 0; }

.monitor-document__file {
  color: rgba(78, 101, 121, 0.5); }
  .monitor-document__file > p {
    line-height: 1.5; }

.monitor-document__time {
  color: #18191b; }

@media only screen and (max-width: 46.1875em) {
  .monitor-document__cover {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start; }
    .monitor-document__cover .hide-on-mobile {
      display: none; } }

@media only screen and (max-width: 46.1875em) {
  .monitor-document__cover .monitor-info__label {
    margin-bottom: 0;
    margin-right: 10px;
    font-size: 16px;
    min-width: fit-content; }
    .monitor-document__cover .monitor-info__label .hide-on-mobile {
      display: none; } }

.monitor-document__remove {
  border: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background-color: transparent; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-document__remove {
      position: absolute;
      top: 12px;
      right: 12px; }
      .monitor-document__remove .hide-on-mobile {
        display: none; } }
  .monitor-document__remove > i {
    font-size: 22px;
    color: #24adc1; }
  .monitor-document__remove + .monitor-document__remove {
    margin-left: 10px; }

.monitor-document .monitor-info__item {
  align-items: center;
  padding: 20px 40px 20px; }
  @media only screen and (max-width: 1440px) {
    .monitor-document .monitor-info__item {
      padding: 20px 24px 10px; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-document .monitor-info__item {
      align-items: flex-start; }
      .monitor-document .monitor-info__item .hide-on-mobile {
        display: none; } }

.monitor-manager__quantity {
  text-align: center; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-manager__quantity {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      font-size: 18px; }
      .monitor-manager__quantity .hide-on-mobile {
        display: none; } }

.monitor-manager__code {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 15px; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-manager__code {
      justify-content: flex-start; }
      .monitor-manager__code .hide-on-mobile {
        display: none; } }

@media only screen and (max-width: 46.1875em) {
  .monitor-manager__number {
    padding: 5px 30px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: #24adc1;
    border-radius: 10px;
    margin-bottom: 12px;
    background-color: rgba(36, 173, 193, 0.08); }
    .monitor-manager__number .hide-on-mobile {
      display: none; } }

.monitor-manager .user-course__item {
  align-items: flex-start; }
  @media only screen and (max-width: 1283px) {
    .monitor-manager .user-course__item {
      align-items: center; }
      .monitor-manager .user-course__item .hide-on-pc-HD {
        display: none; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .monitor-manager .user-course__item {
      align-items: center; } }

.monitor-manager .user-course__content {
  margin-left: 16px;
  border: 0;
  padding: 0; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-manager .user-course__content {
      margin-left: 0;
      margin-top: 6px; }
      .monitor-manager .user-course__content .hide-on-mobile {
        display: none; } }

.monitor-manager .user-course__title {
  width: 100%;
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden; }

.monitor-manager .user-course__img {
  min-width: 28%;
  padding-top: 18%; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-manager .user-course__img {
      padding-top: 56%; }
      .monitor-manager .user-course__img .hide-on-mobile {
        display: none; } }

.monitor-manager .user-course__category {
  font-size: 15px;
  padding: 7px 0px 5px;
  background-color: transparent; }

.monitor-manager .profile-item__time {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }

@media only screen and (max-width: 46.1875em) {
  .monitor-manager .profile-item__sub {
    padding: 0 0 5px; }
    .monitor-manager .profile-item__sub .hide-on-mobile {
      display: none; } }

.monitor-manager .monitor-info__item {
  align-items: center;
  padding: 26px 0px 8px; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-manager .monitor-info__item {
      padding: 26px 12px 18px; }
      .monitor-manager .monitor-info__item .hide-on-mobile {
        display: none; } }

.monitor-manager .manager-text {
  font-size: 16px;
  margin-right: 4px; }

.monitor-manager .manager-label {
  display: none; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-manager .manager-label {
      margin-bottom: 0;
      margin-right: 5px;
      display: block; }
      .monitor-manager .manager-label .hide-on-mobile {
        display: none; } }

.monitor-manager__custom .monitor-info__item {
  align-items: self-start; }

.monitor-manager__remove {
  border: 0;
  background-color: transparent; }

.monitor-manager__file {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }

.monitor-manager__icon {
  max-width: 30px;
  margin-right: 7px; }

.monitor-manager__text {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400;
  padding-right: 10px;
  font-size: 14px; }
  .monitor-manager__text.special {
    border: 0;
    background-color: transparent;
    text-decoration: underline;
    color: #24adc1; }

.monitor-manager__sub {
  font-size: 13px;
  color: rgba(78, 101, 121, 0.5); }

.monitor-member__wrapper {
  padding: 28px 32px; }
  @media only screen and (max-width: 63.9375em) {
    .monitor-member__wrapper {
      padding: 28px 16px; }
      .monitor-member__wrapper .hide-on-bothTM {
        display: none !important; } }

.monitor-member__item + .monitor-member__item {
  padding-top: 32px; }

.monitor-member__item:last-child .monitor-member__activity {
  border-bottom: 0; }

.monitor-member__header {
  padding-bottom: 0; }

.monitor-member__info {
  margin-left: 32px; }
  @media only screen and (max-width: 63.9375em) {
    .monitor-member__info {
      margin-left: 0;
      margin-bottom: 24px; }
      .monitor-member__info .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 63.9375em) {
    .monitor-member__info .user-course__item {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      flex-direction: column-reverse; }
      .monitor-member__info .user-course__item .hide-on-bothTM {
        display: none !important; } }

.monitor-member__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(24, 25, 27, 0.75); }

.monitor-member__invitation {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start; }
  @media only screen and (max-width: 63.9375em) {
    .monitor-member__invitation {
      flex-direction: column-reverse; }
      .monitor-member__invitation .hide-on-bothTM {
        display: none !important; } }
  .monitor-member__invitation .user-course__content {
    padding: 0;
    border-top: 0;
    margin-left: 0; }
  .monitor-member__invitation .user-course__title {
    margin-right: 16px; }
  .monitor-member__invitation .user-course__img {
    min-width: 219px; }
    @media only screen and (max-width: 63.9375em) {
      .monitor-member__invitation .user-course__img {
        min-width: 100%;
        margin-bottom: 20px; }
        .monitor-member__invitation .user-course__img .hide-on-bothTM {
          display: none !important; } }
  .monitor-member__invitation .user-course__item {
    align-items: flex-start; }
  .monitor-member__invitation .monitor-info__student {
    min-width: 29%; }
    @media only screen and (max-width: 63.9375em) {
      .monitor-member__invitation .monitor-info__student {
        flex-direction: row;
        min-width: 100%;
        border-bottom: 0; }
        .monitor-member__invitation .monitor-info__student .hide-on-bothTM {
          display: none !important; } }
  @media only screen and (max-width: 63.9375em) {
    .monitor-member__invitation .monitor-info__text {
      margin-left: 24px; }
      .monitor-member__invitation .monitor-info__text .hide-on-bothTM {
        display: none !important; } }

.monitor-member__activity {
  max-width: 92%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding-bottom: 28px;
  margin: 24px 0 0 auto;
  border-bottom: 1.4px solid rgba(78, 101, 121, 0.15); }
  @media only screen and (max-width: 63.9375em) {
    .monitor-member__activity {
      max-width: 100%; }
      .monitor-member__activity .hide-on-bothTM {
        display: none !important; } }
  .monitor-member__activity > button {
    border: 0;
    border-radius: 5px;
    padding: 5px 32px;
    border: 1.4px solid;
    min-width: max-content; }
  .monitor-member__activity.special {
    border-bottom: 0;
    max-width: 80%; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-member__activity.special {
        max-width: 100%; }
        .monitor-member__activity.special .hide-on-mobile {
          display: none; } }

.monitor-member__success {
  color: #fff;
  border-color: #27b737 !important;
  background-color: #27b737; }

.monitor-member__danger {
  color: #4e6579;
  border-color: rgba(78, 101, 121, 0.4) !important; }

.monitor-member__cancel {
  margin-left: 16px;
  color: #f33066;
  border-color: #f33066 !important;
  background-color: rgba(243, 48, 102, 0.05); }

.monitor-member__cover {
  margin-top: 8px; }
  @media only screen and (max-width: 63.9375em) {
    .monitor-member__cover {
      margin-top: 24px; }
      .monitor-member__cover .hide-on-bothTM {
        display: none !important; } }
  .monitor-member__cover + .monitor-member__cover {
    margin-top: 40px; }
  .monitor-member__cover:last-child {
    margin-bottom: 24px; }

.monitor-member__registered {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 20px; }
  .monitor-member__registered.edit .header-social__avatar {
    position: relative;
    padding-top: 0%;
    overflow: hidden; }
    .monitor-member__registered.edit .header-social__avatar > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .monitor-member__registered.edit .monitor-member__detail {
    padding-top: 0 !important; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .monitor-member__registered {
      grid-template-columns: repeat(2, 1fr); } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-member__registered {
      grid-template-columns: repeat(1, 1fr); }
      .monitor-member__registered .hide-on-mobile {
        display: none; } }

.monitor-member__detail {
  min-width: max-content; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .monitor-member__detail {
      flex-direction: column; } }
  .monitor-member__detail:hover .header-social__name {
    color: #18191b; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .monitor-member__detail .monitor-info__text {
      margin-left: 0;
      border-bottom: 0; } }
  .monitor-member__detail .monitor-info__contact + .monitor-info__contact {
    margin-top: 2px; }

.monitor-member .account-form__group {
  min-width: 40%; }
  .monitor-member .account-form__group .account-form__input {
    margin-right: 0; }

.monitor-member__status {
  padding: 0 0 30px 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: right; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-member__status {
      justify-content: center;
      flex-direction: column; }
      .monitor-member__status .hide-on-mobile {
        display: none; } }
  .monitor-member__status button + button {
    margin: 0 0 0 10px; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-member__status button + button {
        margin: 10px 0 0 0; }
        .monitor-member__status button + button .hide-on-mobile {
          display: none; } }

.monitor-program__remove {
  margin-left: 16px; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-program__remove {
      margin-left: 20px; }
      .monitor-program__remove .hide-on-mobile {
        display: none; } }

.monitor-program__status {
  color: #faaf3a; }

.monitor-program__search {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: flex-end; }
  .monitor-program__search .account-form__phone {
    margin-bottom: 14px; }

.monitor-program__add {
  padding-top: 8px;
  font-size: 16px; }

.monitor-program .monitor-info__header .table-progress {
  padding-left: 60px; }

.monitor-program .monitor-info__item {
  align-items: center; }
  .monitor-program .monitor-info__item .table-progress {
    padding: 0 20px; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-program .monitor-info__item .table-progress {
        padding: 0;
        border-bottom: 0;
        margin-bottom: 8px; }
        .monitor-program .monitor-info__item .table-progress .hide-on-mobile {
          display: none; } }

.monitor-program .monitor-info__icon {
  position: relative;
  padding-top: 19%;
  overflow: hidden;
  height: 85px;
  min-width: 85px; }
  .monitor-program .monitor-info__icon > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
    .monitor-program .monitor-info__icon {
      margin-right: 0px;
      margin-bottom: 6px; }
      .monitor-program .monitor-info__icon .hide-on-pc-Lose {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-program .monitor-info__icon {
      padding-top: 23%; }
      .monitor-program .monitor-info__icon .hide-on-mobile {
        display: none; } }

@media only screen and (max-width: 46.1875em) {
  .monitor-program .monitor-info__label {
    margin-bottom: 0;
    margin-right: 8px; }
    .monitor-program .monitor-info__label .hide-on-mobile {
      display: none; } }

.monitor-program .user-content__search {
  width: 62%; }
  @media only screen and (max-width: 63.9375em) {
    .monitor-program .user-content__search {
      width: 80%; }
      .monitor-program .user-content__search .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-program .user-content__search {
      width: 100%; }
      .monitor-program .user-content__search .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 63.9375em) {
    .monitor-program .user-content__search .account-form__input {
      margin-bottom: 0;
      padding: 9px 16px !important; }
      .monitor-program .user-content__search .account-form__input .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 63.9375em) {
    .monitor-program .user-content__search .account-form__input + .account-form__input {
      margin: 16px auto; }
      .monitor-program .user-content__search .account-form__input + .account-form__input .hide-on-bothTM {
        display: none !important; } }

.monitor-program .table-progress {
  width: 52%;
  align-items: center; }

.monitor-program .table-time {
  width: 18%; }

.monitor-program .table-size {
  width: 15%; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-program .table-size {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
      .monitor-program .table-size .hide-on-mobile {
        display: none; } }

.monitor-program .table-remove {
  width: 10%; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-program .table-remove {
      position: absolute;
      right: 0;
      top: 6px; }
      .monitor-program .table-remove .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-program .table-remove > a,
    .monitor-program .table-remove > button {
      position: relative;
      top: 0; }
      .monitor-program .table-remove > a .hide-on-mobile,
      .monitor-program .table-remove > button .hide-on-mobile {
        display: none; } }

@media only screen and (max-width: 46.1875em) {
  .monitor-program .table-progress, .monitor-program .table-time, .monitor-program .table-size, .monitor-program .table-remove {
    width: 100%;
    margin-bottom: 2px; }
    .monitor-program .table-progress .hide-on-mobile, .monitor-program .table-time .hide-on-mobile, .monitor-program .table-size .hide-on-mobile, .monitor-program .table-remove .hide-on-mobile {
      display: none; } }

.monitor-chart__money {
  font-size: 30px;
  color: #27b737;
  font-weight: 500;
  display: inline-block; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .monitor-chart__money {
      font-size: 26px; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-chart__money {
      font-size: 24px; }
      .monitor-chart__money .hide-on-mobile {
        display: none; } }

.monitor-chart__title {
  font-family: "Montserrat", sans-serif;
  color: #4e6579;
  font-weight: 500; }

.monitor-chart__diagram {
  margin-top: 18px; }
  .monitor-chart__diagram #chart {
    height: 400px !important; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-chart__diagram #chart {
        height: 350px !important; }
        .monitor-chart__diagram #chart .hide-on-mobile {
          display: none; } }

.monitor-chart__table {
  color: #4e6579; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-chart__table {
      margin-top: 10px; }
      .monitor-chart__table .hide-on-mobile {
        display: none; } }
  .monitor-chart__table .table-number {
    width: 8%; }
  .monitor-chart__table .table-code {
    width: 16%; }
    .monitor-chart__table .table-code.special {
      width: 38%; }
  .monitor-chart__table .table-progress {
    width: 36%; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-chart__table .table-progress {
        flex-direction: column;
        border-bottom: 0;
        padding-bottom: 8px; }
        .monitor-chart__table .table-progress .hide-on-mobile {
          display: none; } }
  .monitor-chart__table .table-quantity {
    width: 24%; }
  .monitor-chart__table .table-total {
    width: 18%;
    text-align: center; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-chart__table .table-total {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        font-size: 18px;
        margin-top: 4px;
        font-weight: 500; }
        .monitor-chart__table .table-total .hide-on-mobile {
          display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-chart__table .table-total, .monitor-chart__table .table-progress, .monitor-chart__table .table-total {
      width: 100%; }
      .monitor-chart__table .table-total .hide-on-mobile, .monitor-chart__table .table-progress .hide-on-mobile, .monitor-chart__table .table-total .hide-on-mobile {
        display: none; } }
  .monitor-chart__table.special .table-5 {
    width: 5%; }
  .monitor-chart__table.special .table-10 {
    width: 10%; }
  .monitor-chart__table.special .table-15 {
    width: 15%; }
  .monitor-chart__table.special .table-20 {
    width: 20%; }
  .monitor-chart__table.special .table-25 {
    width: 25%; }
  .monitor-chart__table.special .table-30 {
    width: 30%; }
  .monitor-chart__table.special .table-35 {
    width: 35%; }
  .monitor-chart__table.special .table-40 {
    width: 40%; }
  .monitor-chart__table.special .table-45 {
    width: 45%; }
  .monitor-chart__table.special .table-50 {
    width: 50%; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-chart__table.special .table-5, .monitor-chart__table.special .table-10, .monitor-chart__table.special .table-15, .monitor-chart__table.special .table-20, .monitor-chart__table.special .table-25, .monitor-chart__table.special .table-30, .monitor-chart__table.special .table-35, .monitor-chart__table.special .table-40, .monitor-chart__table.special .table-45, .monitor-chart__table.special .table-50 {
      width: 100%; }
      .monitor-chart__table.special .table-5 .hide-on-mobile, .monitor-chart__table.special .table-10 .hide-on-mobile, .monitor-chart__table.special .table-15 .hide-on-mobile, .monitor-chart__table.special .table-20 .hide-on-mobile, .monitor-chart__table.special .table-25 .hide-on-mobile, .monitor-chart__table.special .table-30 .hide-on-mobile, .monitor-chart__table.special .table-35 .hide-on-mobile, .monitor-chart__table.special .table-40 .hide-on-mobile, .monitor-chart__table.special .table-45 .hide-on-mobile, .monitor-chart__table.special .table-50 .hide-on-mobile {
        display: none; } }

@media only screen and (max-width: 46.1875em) {
  .monitor-chart .monitor-info__label {
    margin-bottom: 0px;
    margin-right: 6px;
    min-width: max-content; }
    .monitor-chart .monitor-info__label .hide-on-mobile {
      display: none; } }

@media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
  .monitor-chart .monitor-info__item {
    margin: 0 10px 0 10px; }
    .monitor-chart .monitor-info__item .hide-on-pc-Lose {
      display: none; } }

.monitor-chart .monitor-member__wrapper {
  padding: 28px 0; }

.monitor-chart .monitor-member__cover,
.monitor-chart .monitor-member__cover.special > p, .monitor-chart .monitor-member__header {
  padding: 0 32px; }
  @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
    .monitor-chart .monitor-member__cover,
    .monitor-chart .monitor-member__cover.special > p, .monitor-chart .monitor-member__header {
      padding: 0 20px; }
      .monitor-chart .monitor-member__cover .hide-on-pc-Lose,
      .monitor-chart .monitor-member__cover.special > p .hide-on-pc-Lose, .monitor-chart .monitor-member__header .hide-on-pc-Lose {
        display: none; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .monitor-chart .monitor-member__cover,
    .monitor-chart .monitor-member__cover.special > p, .monitor-chart .monitor-member__header {
      padding: 0 20px; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-chart .monitor-member__cover,
    .monitor-chart .monitor-member__cover.special > p, .monitor-chart .monitor-member__header {
      padding: 0 14px; }
      .monitor-chart .monitor-member__cover .hide-on-mobile,
      .monitor-chart .monitor-member__cover.special > p .hide-on-mobile, .monitor-chart .monitor-member__header .hide-on-mobile {
        display: none; } }

@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .monitor-chart .monitor-member__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; } }

.monitor-chart .monitor-member__cover.special {
  padding: 0; }

@media only screen and (max-width: 46.1875em) {
  .monitor-chart .additional-course__title {
    padding-bottom: 8px;
    font-size: 18px; }
    .monitor-chart .additional-course__title .hide-on-mobile {
      display: none; } }

.monitor-chart .user-content__search {
  width: 24%; }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .monitor-chart .user-content__search {
      width: 28%; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-chart .user-content__search {
      width: 48%;
      margin: 0 auto; }
      .monitor-chart .user-content__search .hide-on-mobile {
        display: none; } }
  .monitor-chart .user-content__search .account-form__input {
    margin-right: 0;
    max-width: 100% !important;
    padding: 9px 16px 9px 20px; }

.monitor-package__info {
  margin: 28px 0 44px;
  padding: 0 32px; }
  @media only screen and (max-width: 1283px) {
    .monitor-package__info {
      padding: 0 18px; }
      .monitor-package__info .hide-on-pc-HD {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-package__info {
      padding: 0 8px;
      margin: 28px 0 26px; }
      .monitor-package__info .hide-on-mobile {
        display: none; } }
  .monitor-package__info .nav-tabs .nav-link {
    padding-bottom: 12px; }
    .monitor-package__info .nav-tabs .nav-link.active {
      color: #1795a8;
      font-weight: 600;
      border: 0;
      border-bottom: 3px solid #1795a8; }

.monitor-package__title {
  color: rgba(78, 101, 121, 0.3); }
  @media only screen and (max-width: 46.1875em) {
    .monitor-package__title {
      display: none; }
      .monitor-package__title .hide-on-mobile {
        display: none; } }

.monitor-package__current {
  color: #4e6579;
  margin-right: 130px; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-package__current {
      margin-right: 0; }
      .monitor-package__current .hide-on-mobile {
        display: none; } }
  .monitor-package__current .table-code {
    text-align: left; }
    @media only screen and (max-width: 63.9375em) {
      .monitor-package__current .table-code {
        text-align: center; }
        .monitor-package__current .table-code .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .monitor-package__current .table-code {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center; }
        .monitor-package__current .table-code .hide-on-mobile {
          display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-package__current .monitor-info__cover {
      border-top: 1px solid rgba(112, 112, 112, 0.25) !important;
      padding: 8px 12px !important; }
      .monitor-package__current .monitor-info__cover .hide-on-mobile {
        display: none; } }

.monitor-package__option {
  text-align: left; }
  .monitor-package__option > svg {
    margin-right: 4px; }

.monitor-package__progress {
  margin-top: 18px;
  height: 37px;
  border-radius: 5px;
  background-color: rgba(250, 175, 58, 0.1); }
  @media only screen and (max-width: 46.1875em) {
    .monitor-package__progress {
      height: 24px; }
      .monitor-package__progress .hide-on-mobile {
        display: none; } }
  .monitor-package__progress .progress-bar {
    border-radius: 5px;
    color: #faaf3a;
    background-color: #faaf3a; }

.monitor-package__text {
  color: #18191b;
  font-weight: 500;
  font-size: 16px; }
  .monitor-package__text > span {
    font-weight: 400; }

.monitor-package .monitor-info__cover {
  border-top: 0;
  margin: 0; }

.monitor-package .user-content__wrapper {
  padding: 28px 0 40px; }

.monitor-package .monitor-chart__table .monitor-info__header {
  padding: 8px 0px; }

.monitor-package .monitor-chart__table .monitor-info__cover {
  padding: 20px 0px; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-package .monitor-chart__table .monitor-info__cover {
      padding: 20px 16px;
      border-top: 1px solid rgba(112, 112, 112, 0.25); }
      .monitor-package .monitor-chart__table .monitor-info__cover .hide-on-mobile {
        display: none; } }
  .monitor-package .monitor-chart__table .monitor-info__cover + .monitor-info__cover {
    border-top: 1px solid rgba(78, 101, 121, 0.15); }
    @media only screen and (max-width: 46.1875em) {
      .monitor-package .monitor-chart__table .monitor-info__cover + .monitor-info__cover {
        margin-top: 14px; }
        .monitor-package .monitor-chart__table .monitor-info__cover + .monitor-info__cover .hide-on-mobile {
          display: none; } }

.monitor-package .monitor-chart__table .monitor-package__option {
  opacity: 0.7; }

.monitor-package__tabs {
  margin: 0 32px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(78, 101, 121, 0.1); }
  @media only screen and (max-width: 1283px) {
    .monitor-package__tabs {
      margin: 20px 15px 0;
      border-bottom: 0; }
      .monitor-package__tabs .hide-on-pc-HD {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-package__tabs {
      flex-flow: row wrap; }
      .monitor-package__tabs .hide-on-mobile {
        display: none; } }

.monitor-package__link {
  padding: 20px 0;
  font-size: 15px;
  color: #4e6579;
  font-weight: bold; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-package__link {
      padding: 2px 15px 3px;
      border-radius: 20px;
      border: 1px solid #24adc1;
      margin: 0 10px 10px 0; }
      .monitor-package__link .hide-on-mobile {
        display: none; } }
  .monitor-package__link.active {
    color: #24adc1;
    border-bottom: 3px solid #24adc1; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-package__link.active {
        border-bottom: 0;
        background-color: #24adc1;
        color: #fff; }
        .monitor-package__link.active .hide-on-mobile {
          display: none; } }
  .monitor-package__link + .monitor-package__link {
    margin-left: 24px; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-package__link + .monitor-package__link {
        margin-left: 0; }
        .monitor-package__link + .monitor-package__link .hide-on-mobile {
          display: none; } }

.monitor-package__cover {
  position: relative; }

.monitor-data {
  position: relative;
  padding: 0 40px;
  width: 80%;
  margin: 36px 0 50px; }
  @media only screen and (max-width: 63.9375em) {
    .monitor-data {
      width: 100%;
      padding: 0 24px; }
      .monitor-data .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (max-width: 46.1875em) {
    .monitor-data {
      padding: 0 16px;
      margin: 22px auto 24px; }
      .monitor-data .hide-on-mobile {
        display: none; } }
  .monitor-data__info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .monitor-data__text {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 500; }
    .monitor-data__text > span {
      color: #1795a8;
      font-weight: 500;
      font-size: 28px;
      display: inline-block;
      margin-bottom: 6px;
      line-height: 1; }
  .monitor-data__note {
    margin-top: 10px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center; }
  .monitor-data__detail {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
    .monitor-data__detail + .monitor-data__detail {
      margin-left: 32px; }
    .monitor-data__detail > span {
      display: inline-block;
      width: 24px;
      height: 16px;
      margin-right: 8px;
      border-radius: 2px;
      box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; }
  .monitor-data__btn {
    position: absolute;
    right: -21%;
    top: -3px;
    font-size: 14px;
    color: #fff;
    padding: 8px 20px;
    background-color: #24adc1;
    width: fit-content;
    border-radius: 5px;
    border: 0; }
    @media only screen and (max-width: 63.9375em) {
      .monitor-data__btn {
        position: relative;
        left: 0;
        margin: 25px 0 10px; }
        .monitor-data__btn .hide-on-bothTM {
          display: none !important; } }
  .monitor-data .progress {
    height: 24px;
    margin: 0 auto;
    border-radius: 5px;
    background-color: rgba(78, 101, 121, 0.2); }
    .monitor-data .progress-bar {
      background-color: #24adc1; }

.monitor-modal .modal-title, .monitor-modal .modal-body,
.monitor-modal .modal-footer > button, .monitor-modal .modal-header {
  font-size: 16px; }

.monitor-tab {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 30px; }
  .monitor-tab__item {
    margin-bottom: -1px;
    background: 0 0;
    border: 1px solid transparent;
    padding: 8px 16px;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    transition: all 0.3;
    color: #18191b; }
    .monitor-tab__item.active {
      color: #24adc1;
      font-weight: 500;
      border-color: #dee2e6 #dee2e6 #fff; }

.monitor-file__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-file__cover {
      flex-direction: column; }
      .monitor-file__cover .hide-on-mobile {
        display: none; } }
  .monitor-file__cover.special {
    padding: 0 30px 20px; }
    @media only screen and (max-width: 1283px) {
      .monitor-file__cover.special {
        padding: 0 20px 20px; }
        .monitor-file__cover.special .hide-on-pc-HD {
          display: none; } }
    .monitor-file__cover.special .monitor-file__detail {
      padding: 0 5%; }
      @media only screen and (max-width: 46.1875em) {
        .monitor-file__cover.special .monitor-file__detail {
          padding: 0; }
          .monitor-file__cover.special .monitor-file__detail .hide-on-mobile {
            display: none; } }
    .monitor-file__cover.special .user-content__title {
      min-width: max-content; }
      @media only screen and (max-width: 46.1875em) {
        .monitor-file__cover.special .user-content__title {
          margin-bottom: 20px; }
          .monitor-file__cover.special .user-content__title .hide-on-mobile {
            display: none; } }
  .monitor-file__cover.special2 {
    align-items: center; }

.monitor-file__detail {
  width: 100%;
  padding-right: 10%; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-file__detail {
      padding-right: 0; }
      .monitor-file__detail .hide-on-mobile {
        display: none; } }
  .monitor-file__detail.special {
    width: 60%; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-file__detail.special {
        width: 100%; }
        .monitor-file__detail.special .hide-on-mobile {
          display: none; } }

.monitor-file__data {
  height: 24px;
  border-radius: 5px;
  background-color: #dce0e4;
  margin-bottom: 15px; }
  .monitor-file__data .progress-bar {
    border-radius: 5px;
    color: #24adc1;
    height: 100%;
    background-color: #24adc1; }

.monitor-file__sides {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold; }

.monitor-file__center {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-file__center {
      margin: 15px 0 0;
      flex-direction: column; }
      .monitor-file__center .hide-on-mobile {
        display: none; } }

.monitor-file__sub {
  padding-left: 30px;
  position: relative; }
  .monitor-file__sub::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 16px;
    border-radius: 2px;
    background-color: #dce0e4; }
  .monitor-file__sub:first-child::after {
    background-color: #24adc1; }
  .monitor-file__sub + .monitor-file__sub {
    margin-left: 30px; }
    @media only screen and (max-width: 46.1875em) {
      .monitor-file__sub + .monitor-file__sub {
        margin: 15px 0 0 0; }
        .monitor-file__sub + .monitor-file__sub .hide-on-mobile {
          display: none; } }

.monitor-file__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; }

.monitor-file__upload {
  position: relative;
  border: 0;
  background-color: transparent;
  color: #faaf3a;
  min-width: max-content; }

.monitor-file__list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-left: 30px;
  max-width: 100%;
  padding-bottom: 10px;
  margin-bottom: 20px;
  overflow-y: auto; }
  @media only screen and (max-width: 1283px) {
    .monitor-file__list {
      margin-left: 20px; }
      .monitor-file__list .hide-on-pc-HD {
        display: none; } }

.monitor-file__item {
  position: relative;
  width: 150px;
  min-width: 150px;
  height: 130px;
  border-radius: 10px;
  border: 1px solid rgba(78, 101, 121, 0.1);
  background-color: rgba(239, 243, 247, 0.5);
  padding: 15px;
  transition: all 0.3s; }
  .monitor-file__item:hover, .monitor-file__item.active {
    border: 1px solid #24adc1;
    background-color: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
  .monitor-file__item + .monitor-file__item {
    margin-left: 18px; }

.monitor-file__icon {
  width: 45px;
  height: auto;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 4px 0px;
  margin-bottom: 14px; }

.monitor-file__remove {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: transparent;
  border: 0; }

.monitor-file__name {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #18191b; }

.monitor-file__total {
  font-size: 12px;
  font-style: italic;
  color: #9f9f9f;
  line-height: 16px; }

.monitor-file__input {
  position: absolute;
  visibility: hidden; }

.monitor-file__form {
  width: 30%; }
  @media only screen and (max-width: 46.1875em) {
    .monitor-file__form {
      width: 100%;
      margin-right: 10px; }
      .monitor-file__form .hide-on-mobile {
        display: none; } }

.monitor-file__search {
  width: 100%;
  padding: 8px 15px;
  border: 1px solid rgba(78, 101, 121, 0.1);
  border-radius: 5px; }

.additional-course {
  width: 71.6%; }
  .additional-course.special {
    width: 100%; }
  @media only screen and (max-width: 46.1875em) {
    .additional-course {
      width: 100%; }
      .additional-course .hide-on-mobile {
        display: none; } }
  .additional-course__title {
    font-weight: bold;
    padding-bottom: 24px; }
    .additional-course__title.special {
      padding-bottom: 0; }
    .additional-course__title.custom {
      padding-bottom: 10px;
      color: #f33066; }
    .additional-course__title.cmt {
      padding-top: 30px; }
      @media only screen and (max-width: 1440px) {
        .additional-course__title.cmt {
          padding-top: 20px; } }
    .additional-course__title > span {
      position: relative;
      font-size: 13px;
      padding: 4px 8px;
      border: 0;
      margin-left: 8px;
      border-radius: 100px; }
      .additional-course__title > span.special {
        background-color: #24adc1; }
  .additional-course .account-form__cover {
    margin-bottom: 45px; }
    .additional-course .account-form__cover .filter-sort__select {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center; }
      .additional-course .account-form__cover .filter-sort__select .account-care__option + .additional-course .account-form__cover .filter-sort__select .account-care__option {
        padding-left: 20px; }
  .additional-course .account-form__main {
    padding-right: 45px;
    margin-top: 0; }
    @media only screen and (max-width: 46.1875em) {
      .additional-course .account-form__main {
        padding-right: 0; }
        .additional-course .account-form__main .hide-on-mobile {
          display: none; } }
  .additional-course .account-form__phone > textarea {
    min-height: 105px; }
  .additional-course .account-form__del {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px; }
    .additional-course .account-form__del span {
      cursor: pointer;
      margin-left: 26px; }
  .additional-course .account-form__target {
    font-size: 14px;
    color: #faaf3a;
    padding-top: 10px;
    cursor: pointer; }
    .additional-course .account-form__target svg {
      margin: 0 7px 3px 0; }
  .additional-course__route {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    padding-bottom: 40px; }
  .additional-course__number {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    color: #24adc1;
    background-color: rgba(36, 173, 193, 0.1); }
  .additional-course__cover {
    width: 100%; }
    .additional-course__cover > button {
      width: 143px;
      height: 43px;
      border-radius: 7px;
      font-size: 14px;
      color: #24adc1;
      border: 1px solid #24adc1;
      background-color: transparent; }
      .additional-course__cover > button svg {
        margin: 0 7px 3px 0; }
  .additional-course__exercise {
    padding: 22px 0 12px 0;
    font-size: 14px;
    color: #4e6579; }
  .additional-course__input {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 24px; }
    @media only screen and (max-width: 63.9375em) {
      .additional-course__input {
        display: block; }
        .additional-course__input .hide-on-bothTM {
          display: none !important; } }
    .additional-course__input input {
      padding-bottom: 16px;
      padding-left: 0;
      border: 0;
      font-size: 14px;
      position: relative; }
  .additional-course__icon {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(78, 101, 121, 0.3); }
    .additional-course__icon:first-child {
      grid-column: 1/3; }
    @media only screen and (max-width: 63.9375em) {
      .additional-course__icon {
        margin-bottom: 10px; }
        .additional-course__icon .hide-on-bothTM {
          display: none !important; } }
    .additional-course__icon svg {
      margin: 0 10px 10px 0; }
  .additional-course__video {
    margin: 10px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px; }
    @media only screen and (max-width: 46.1875em) {
      .additional-course__video {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 5px 5px; }
        .additional-course__video .hide-on-mobile {
          display: none; } }
    .additional-course__video iframe {
      max-width: 100%; }
    .additional-course__video .account-teacher__show + .account-teacher__show {
      margin-top: 0; }

.additional-sidebar.special .user-content__update {
  padding-bottom: 30px; }
  .additional-sidebar.special .user-content__update .account-teacher__show {
    padding-bottom: 0; }

.additional-sidebar .user-content__update .account-teacher__show {
  padding-bottom: 45px; }

.additional-sidebar .user-content__update .account-teacher__example {
  min-height: 120px; }

.additional-sidebar .user-content__update .account-teacher__sub {
  text-align: center;
  padding-top: 15px; }

.additional-sidebar .user-content__update .account-teacher__name {
  font-size: 14px; }

.additional-sidebar .user-content__update .account-teacher__note {
  font-size: 12px;
  color: rgba(78, 101, 121, 0.5); }

.additional-sidebar .user-content__price {
  padding-bottom: 45px; }
  .additional-sidebar .user-content__price .account-form__group input::placeholder {
    position: absolute;
    top: 15px;
    right: 14px; }
  .additional-sidebar .user-content__price .account-form__group input::-webkit-inner-spin-button {
    -webkit-appearance: none; }

.additional-register .account-form__btn {
  width: 260px; }
  @media only screen and (max-width: 46.1875em) {
    .additional-register .account-form__btn {
      width: 100%; }
      .additional-register .account-form__btn .hide-on-mobile {
        display: none; } }

.my-course__search {
  width: 50%; }
  @media only screen and (max-width: 63.9375em) {
    .my-course__search {
      padding-top: 20px;
      width: 100%; }
      .my-course__search .hide-on-bothTM {
        display: none !important; } }
  .my-course__search .account-form__phone {
    width: 100%;
    display: block; }
    .my-course__search .account-form__phone input {
      max-width: 100%;
      padding: 5px 20px 5px 20px; }

.my-course__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; }
  .my-course__cover .user-course__title {
    width: 80%; }
    @media only screen and (max-width: 46.1875em) {
      .my-course__cover .user-course__title {
        width: 100%; }
        .my-course__cover .user-course__title .hide-on-mobile {
          display: none; } }

.my-course__active {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  .my-course__active .monitor-info__edit {
    border: 0; }
    @media only screen and (max-width: 46.1875em) {
      .my-course__active .monitor-info__edit {
        top: -60%;
        right: 14%; }
        .my-course__active .monitor-info__edit .hide-on-mobile {
          display: none; } }
  .my-course__active .monitor-document__remove {
    background-color: rgba(243, 48, 102, 0.05);
    margin-left: 8px; }
    @media only screen and (max-width: 46.1875em) {
      .my-course__active .monitor-document__remove {
        top: -60%;
        right: 0; }
        .my-course__active .monitor-document__remove .hide-on-mobile {
          display: none; } }

.my-course__paging {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px; }
  @media only screen and (max-width: 46.1875em) {
    .my-course__paging {
      flex-direction: column; }
      .my-course__paging .hide-on-mobile {
        display: none; } }

.my-course__resul {
  font-weight: 500;
  color: #707070; }
  @media only screen and (max-width: 46.1875em) {
    .my-course__resul {
      padding-bottom: 20px; }
      .my-course__resul .hide-on-mobile {
        display: none; } }

.code {
  margin: 80px 0;
  min-height: 48.5vh; }
  @media only screen and (max-width: 63.9375em) {
    .code {
      min-height: auto;
      margin: 46px 0 60px; }
      .code .hide-on-bothTM {
        display: none !important; } }
  .code-wrapper {
    width: 35%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center; }
    @media only screen and (min-width: 63.9375em) and (max-width: 1240px) {
      .code-wrapper {
        margin-left: 8px; }
        .code-wrapper .hide-on-pc-Lose {
          display: none; } }
    @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
      .code-wrapper {
        width: 50%; } }
    @media only screen and (max-width: 46.1875em) {
      .code-wrapper {
        width: 91%; }
        .code-wrapper .hide-on-mobile {
          display: none; } }
  .code-img {
    overflow: hidden;
    border-radius: 5px;
    padding: 18px 4px 4px;
    background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; }
  .code-info {
    margin-top: 18px; }
    .code-info__text {
      font-weight: 500;
      font-size: 18px;
      text-align: center;
      line-height: 1.5; }
      @media only screen and (max-width: 46.1875em) {
        .code-info__text {
          line-height: 1.4; }
          .code-info__text .hide-on-mobile {
            display: none; } }
    .code-info__btn {
      width: 100%;
      font-size: 17px;
      margin-top: 18px;
      padding: 10px 24px;
      border: 0;
      color: #fff;
      border-radius: 5px;
      background-color: #24adc1; }
  .code .account-wrapper {
    max-width: 88%;
    margin: 0 auto; }
    @media only screen and (max-width: 1366px) {
      .code .account-wrapper {
        max-width: 100%; } }

.tabs-cover {
  padding: 28px 0 40px; }
  @media only screen and (max-width: 46.1875em) {
    .tabs-cover {
      padding-bottom: 25px; }
      .tabs-cover .hide-on-mobile {
        display: none; } }
  .tabs-cover__custom {
    padding: 0 var(--width-tabs); }
  .tabs-cover__title {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 15px; }
    @media only screen and (max-width: 1283px) {
      .tabs-cover__title {
        font-size: 18px; }
        .tabs-cover__title .hide-on-pc-HD {
          display: none; } }
  .tabs-cover__content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start; }
    @media only screen and (max-width: 63.9375em) {
      .tabs-cover__content {
        flex-direction: column; }
        .tabs-cover__content .hide-on-bothTM {
          display: none !important; } }
  .tabs-cover__popup {
    margin: 0 var(--width-tabs);
    display: none;
    margin-top: 0 !important; }
    @media only screen and (max-width: 63.9375em) {
      .tabs-cover__popup {
        display: block; }
        .tabs-cover__popup .hide-on-bothTM {
          display: none !important; } }
    @media only screen and (max-width: 46.1875em) {
      .tabs-cover__popup {
        width: max-content;
        max-width: max-content; }
        .tabs-cover__popup .hide-on-mobile {
          display: none; } }
  .tabs-cover__offcanvas .tabs-sidebar {
    display: block; }
    .tabs-cover__offcanvas .tabs-sidebar__item.active {
      clip-path: none; }

.tabs-sidebar {
  min-width: 28%;
  padding: 15px 0;
  border-right: 1px solid rgba(78, 101, 121, 0.3); }
  @media only screen and (max-width: 63.9375em) {
    .tabs-sidebar {
      display: none;
      border-right: 0; }
      .tabs-sidebar .hide-on-bothTM {
        display: none !important; } }
  .tabs-sidebar__item {
    padding: 10px var(--width-tabs); }
    .tabs-sidebar__item.active {
      background-color: #faaf3a;
      margin-bottom: 10px;
      clip-path: polygon(100% 0, 100% 35%, 94% 50%, 100% 65%, 100% 100%, 0 100%, 0 0); }
      .tabs-sidebar__item.active .tabs-sidebar__link {
        color: #fff; }
  .tabs-sidebar__link {
    font-size: 16px;
    font-weight: 500;
    color: #4e6579; }

.tabs-content {
  width: 100%;
  padding: 25px; }
  @media only screen and (max-width: 63.9375em) {
    .tabs-content {
      padding: 0 var(--width-tabs); }
      .tabs-content .hide-on-bothTM {
        display: none !important; } }
  .tabs-content__detail {
    position: relative; }
    .tabs-content__detail * {
      all: revert; }
    .tabs-content__detail p {
      line-height: 26px !important; }
    .tabs-content__detail img {
      width: 100%; }

.group-cover__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; }
  @media only screen and (max-width: 46.1875em) {
    .group-cover__header {
      flex-direction: column; }
      .group-cover__header .hide-on-mobile {
        display: none; } }
  .group-cover__header.special {
    justify-content: left; }
    @media only screen and (max-width: 46.1875em) {
      .group-cover__header.special {
        flex-direction: column-reverse; }
        .group-cover__header.special .hide-on-mobile {
          display: none; } }
  .group-cover__header.column {
    display: block; }

.group-cover__form {
  width: 35%; }
  @media only screen and (max-width: 46.1875em) {
    .group-cover__form {
      width: 100%;
      margin-top: 15px; }
      .group-cover__form .hide-on-mobile {
        display: none; } }

.group-cover__input {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  border: 1.4px solid rgba(112, 112, 112, 0.25);
  border-radius: 7px;
  width: 100%; }

.group-cover__title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 18px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-end; }

.group-cover__quantity {
  min-width: 20px;
  height: 21px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  line-height: 14px;
  padding: 0 7px;
  margin-left: 8px;
  border-radius: 50px;
  font-size: 12px;
  background-color: #faaf3a;
  font-weight: 400; }
  .group-cover__quantity.special {
    background-color: #24adc1; }

.group-cover__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 20px; }
  @media only screen and (max-width: 1283px) {
    .group-cover__list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px 15px; }
      .group-cover__list .hide-on-pc-HD {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .group-cover__list {
      grid-template-columns: repeat(1, 1fr); }
      .group-cover__list .hide-on-mobile {
        display: none; } }

.group-cover__inner + .group-cover__inner {
  margin-top: 55px; }
  @media only screen and (max-width: 1600px) {
    .group-cover__inner + .group-cover__inner {
      margin-top: 30px; } }

.group-item {
  padding: 15px 15px 20px;
  border-radius: 7px;
  border: 1px solid rgba(78, 101, 121, 0.1);
  background-color: rgba(239, 243, 247, 0.5);
  transition: all 0.3s; }
  .group-item.special:hover {
    transform: translateY(-5px); }
  .group-item__title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #18191b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .group-item__cover {
    position: relative;
    margin-bottom: 15px; }
  .group-item__img {
    position: relative;
    padding-top: 58%;
    overflow: hidden;
    border-radius: 7px; }
    .group-item__img > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .group-item__img::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, black 100%); }
  .group-item__member, .group-item__desc {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .group-item__member {
    position: absolute;
    left: 10px;
    bottom: 10px; }
  .group-item__desc {
    margin-right: 5px; }
  .group-item__avatar {
    position: relative;
    width: 30px;
    height: 30px;
    position: relative;
    padding-top: 0%;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #fff; }
    .group-item__avatar > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .group-item__avatar:nth-child(2), .group-item__avatar:nth-child(3), .group-item__avatar:nth-child(4), .group-item__avatar:nth-child(5) {
      margin-left: -15px; }
    .group-item__avatar:nth-child(5)::after {
      content: "...";
      position: absolute;
      left: 0;
      top: 0;
      color: #fff;
      text-align: center;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.75); }
  .group-item__text {
    color: #fff;
    font-size: 10px; }
    @media only screen and (max-width: 46.1875em) {
      .group-item__text {
        font-size: 14px; }
        .group-item__text .hide-on-mobile {
          display: none; } }
  .group-item__sub {
    font-size: 12px;
    font-style: italic;
    color: #9f9f9f;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .group-item__join {
    margin-top: 15px; }
  .group-item__btn, .group-item__status {
    width: 100%;
    height: 41px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px; }
  .group-item__status {
    background-color: #d6d6d6;
    color: #fff;
    font-size: 14px;
    display: none; }
  .group-item__btn {
    background-color: #fff;
    border: 1px solid #faaf3a;
    font-size: 14px;
    color: #faaf3a;
    transition: all 0.3s; }
    .group-item__btn.active {
      display: none; }
      .group-item__btn.active ~ .group-item__status {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center; }
    .group-item__btn:hover {
      color: #fff;
      background-color: #faaf3a; }
      .group-item__btn:hover > svg path {
        fill: #fff; }
    .group-item__btn > svg {
      min-width: 24px;
      margin-right: 5px;
      transition: all 0.3s; }
    .group-item__btn.special {
      width: 150px; }
      @media only screen and (max-width: 46.1875em) {
        .group-item__btn.special {
          width: 100%; }
          .group-item__btn.special .hide-on-mobile {
            display: none; } }

.group-header__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
  margin-bottom: 20px; }
  @media only screen and (max-width: 46.1875em) {
    .group-header__cover {
      flex-direction: column-reverse;
      align-items: center; }
      .group-header__cover .hide-on-mobile {
        display: none; } }

.group-header__desc {
  width: 75%; }
  @media only screen and (max-width: 46.1875em) {
    .group-header__desc {
      width: 100%; }
      .group-header__desc .hide-on-mobile {
        display: none; } }

.group-header__title {
  color: #fff;
  font-size: 22px;
  margin-bottom: 10px; }
  @media only screen and (max-width: 1399px) {
    .group-header__title {
      font-size: 18px; } }
  @media only screen and (max-width: 46.1875em) {
    .group-header__title {
      font-size: 16px;
      text-align: center; }
      .group-header__title .hide-on-mobile {
        display: none; } }

.group-header__text {
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5); }

.group-header__btn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  color: #fff;
  background-color: transparent;
  border: 0; }
  @media only screen and (max-width: 46.1875em) {
    .group-header__btn {
      margin-bottom: 15px; }
      .group-header__btn .hide-on-mobile {
        display: none; } }
  .group-header__btn > svg {
    min-width: 24px;
    margin-right: 10px; }

.group-header__form {
  padding: 8px 22px;
  border-radius: 5px;
  border: 1px solid #707070;
  background-color: #fff;
  width: 70%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .group-header__form {
      width: 100%;
      margin-bottom: 12px; }
      .group-header__form .hide-on-mobile {
        display: none; } }

.group-header__input {
  border: 0;
  width: 100%;
  font-size: 14px; }
  .group-header__input::placeholder {
    color: #9f9f9f; }

.group-header__search {
  border: 0;
  background-color: transparent; }

.group-header__inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .group-header__inner {
      flex-direction: column; }
      .group-header__inner .hide-on-mobile {
        display: none; } }

.group-header__select {
  padding: 8px 22px;
  border-radius: 5px;
  border: 1px solid rgba(112, 112, 112, 0.25);
  background-color: #fff;
  width: 218px;
  font-size: 14px;
  color: #9f9f9f; }
  @media only screen and (max-width: 1283px) {
    .group-header__select {
      width: 190px; }
      .group-header__select .hide-on-pc-HD {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .group-header__select {
      width: 100%; }
      .group-header__select .hide-on-mobile {
        display: none; } }
  .group-header__select + .group-header__select {
    margin-left: 15px; }
    @media only screen and (max-width: 46.1875em) {
      .group-header__select + .group-header__select {
        margin: 0 0 15px 0; }
        .group-header__select + .group-header__select .hide-on-mobile {
          display: none; } }

.group-header__info {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-left: 25px; }
  @media only screen and (max-width: 46.1875em) {
    .group-header__info {
      margin: 0 0 15px 0; }
      .group-header__info .hide-on-mobile {
        display: none; } }

.group-header__sub {
  font-size: 14px;
  color: #9f9f9f;
  margin-right: 14px; }

.group-tabs__list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(78, 101, 121, 0.15); }
  @media only screen and (max-width: 46.1875em) {
    .group-tabs__list {
      border-bottom: 0;
      flex-direction: column; }
      .group-tabs__list .hide-on-mobile {
        display: none; } }

.group-tabs__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .group-tabs__cover {
      flex-flow: row wrap;
      margin-bottom: 12px; }
      .group-tabs__cover .hide-on-mobile {
        display: none; } }

.group-tabs__link {
  padding-bottom: 18px;
  position: relative;
  font-size: 14px;
  color: #4e6579; }
  @media only screen and (max-width: 46.1875em) {
    .group-tabs__link {
      padding-bottom: 0;
      border: 1px solid #707070;
      border-radius: 20px;
      padding: 3px 8px;
      font-size: 13px; }
      .group-tabs__link .hide-on-mobile {
        display: none; } }
  .group-tabs__link + .group-tabs__link {
    margin-left: 25px; }
    @media only screen and (max-width: 46.1875em) {
      .group-tabs__link + .group-tabs__link {
        margin-left: 8px; }
        .group-tabs__link + .group-tabs__link .hide-on-mobile {
          display: none; } }
  .group-tabs__link.active {
    font-weight: bold;
    color: #24adc1; }
    @media only screen and (max-width: 46.1875em) {
      .group-tabs__link.active {
        color: #fff;
        border-color: #24adc1;
        background-color: #24adc1; }
        .group-tabs__link.active .hide-on-mobile {
          display: none; } }
    .group-tabs__link.active::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #24adc1; }
      @media only screen and (max-width: 46.1875em) {
        .group-tabs__link.active::after {
          display: none; }
          .group-tabs__link.active::after .hide-on-mobile {
            display: none; } }

.group-tabs__content {
  margin-top: 30px; }
  @media only screen and (max-width: 1440px) {
    .group-tabs__content {
      margin-top: 25px; } }

.group-post__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(239, 243, 247, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(78, 101, 121, 0.1);
  overflow: hidden;
  height: 157px; }
  @media only screen and (max-width: 46.1875em) {
    .group-post__item {
      height: auto;
      flex-direction: column-reverse; }
      .group-post__item .hide-on-mobile {
        display: none; } }
  .group-post__item + .group-post__item {
    margin-top: 20px; }

.group-post__content {
  padding: 18px var(--width-group) 10px;
  max-width: 51%; }
  @media only screen and (max-width: 46.1875em) {
    .group-post__content {
      max-width: 100%; }
      .group-post__content .hide-on-mobile {
        display: none; } }

.group-post__link {
  margin-bottom: 15px; }
  @media only screen and (max-width: 1283px) {
    .group-post__link {
      margin-bottom: 10px; }
      .group-post__link .hide-on-pc-HD {
        display: none; } }

.group-post__title {
  font-size: 16px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #18191b;
  margin-bottom: 10px; }
  @media only screen and (max-width: 1283px) {
    .group-post__title {
      margin-bottom: 5px; }
      .group-post__title .hide-on-pc-HD {
        display: none; } }

.group-post__text {
  font-size: 15px;
  color: #4e6579;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }
  @media only screen and (max-width: 1283px) {
    .group-post__text {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden; }
      .group-post__text .hide-on-pc-HD {
        display: none; } }

.group-post__desc {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start; }
  @media only screen and (max-width: 1283px) {
    .group-post__desc {
      flex-direction: column; }
      .group-post__desc .hide-on-pc-HD {
        display: none; } }
  .group-post__desc.special {
    width: 100%;
    margin-top: 15px; }

.group-post__sub {
  position: relative;
  padding-left: 35px;
  margin-left: calc(-1 * var(--width-group));
  font-size: 13px;
  font-weight: 500;
  color: #0088cc;
  line-height: 30px;
  min-width: max-content;
  margin-right: 20px; }
  .group-post__sub::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 30px;
    height: 20px;
    background-color: #0088cc;
    clip-path: polygon(0 0, 100% 0, 75% 50%, 100% 100%, 0 100%); }
  .group-post__sub.special {
    margin-left: 0; }

.group-post__type {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  max-width: 60%;
  overflow-x: auto;
  padding-bottom: 10px;
  /* Track */
  /* Handle */
  /* Handle on hover */ }
  @media only screen and (max-width: 1283px) {
    .group-post__type {
      max-width: 100%;
      margin-top: 5px; }
      .group-post__type .hide-on-pc-HD {
        display: none; } }
  .group-post__type.special {
    max-width: 100%; }
  .group-post__type::-webkit-scrollbar {
    height: 10px; }
  .group-post__type::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px grey;
    border-radius: 10px; }
  .group-post__type::-webkit-scrollbar-thumb {
    background: #24adc1;
    border-radius: 7px; }
  .group-post__type::-webkit-scrollbar-thumb:hover {
    background: #24adc1; }

.group-post__tag {
  font-size: 13px;
  color: #24adc1;
  min-width: max-content;
  min-height: 30px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 10px;
  border-radius: 5px;
  background-color: rgba(36, 173, 193, 0.1); }
  .group-post__tag + .group-post__tag {
    margin-left: 10px; }

.group-post__img {
  min-width: 100px;
  width: 25%;
  height: 100%;
  height: 100%;
  position: relative;
  padding-top: 0%;
  overflow: hidden; }
  .group-post__img > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media only screen and (max-width: 46.1875em) {
    .group-post__img {
      height: 170px;
      width: 100%; }
      .group-post__img .hide-on-mobile {
        display: none; } }

.group-post__info {
  width: 24%;
  min-width: max-content;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: 100%;
  border-left: 1px solid rgba(78, 101, 121, 0.1); }
  @media only screen and (max-width: 46.1875em) {
    .group-post__info {
      width: 100%; }
      .group-post__info .hide-on-mobile {
        display: none; } }

.group-post__detail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 0;
  width: 100%; }
  .group-post__detail.special {
    grid-template-columns: repeat(1, 1fr); }

.group-post__box {
  height: 33px;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.5px solid rgba(78, 101, 121, 0.1);
  padding: 0 10px;
  min-width: max-content; }
  .group-post__box > svg {
    min-width: 20px;
    margin: 0 5px 3px 0; }
  .group-post__box.special {
    border: 0;
    width: max-content;
    padding: 0;
    margin-right: 25px; }

.group-post__cmt {
  min-width: 34px;
  height: 23px;
  padding: 0 5px 0 2px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  line-height: 12px;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 12px;
  color: #fff; }

.group-post__quantity {
  color: #9f9f9f;
  font-size: 12px; }

.group-post__status {
  font-size: 13px;
  font-weight: bold;
  color: #faaf3a; }
  .group-post__status.success {
    color: #27b737; }
  .group-post__status.cancel {
    color: #f33066; }

.group-post__like {
  border: none;
  background-color: transparent;
  margin: 0 3px 3px 0; }
  .group-post__like .fa-regular,
  .group-post__like .fa-solid {
    color: #24adc1;
    margin-right: 3px; }
  .group-post__like .fa-regular + .fa-solid {
    margin-left: 0; }
  .group-post__like .fa-solid {
    display: none; }
  .group-post__like.active .fa-regular, .group-post__like:hover .fa-regular {
    display: none; }
  .group-post__like.active .fa-solid, .group-post__like:hover .fa-solid {
    display: block; }

.group-category__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start; }
  @media only screen and (max-width: 46.1875em) {
    .group-category__item {
      flex-direction: column; }
      .group-category__item .hide-on-mobile {
        display: none; } }
  .group-category__item + .group-category__item {
    margin-top: 30px; }
    @media only screen and (max-width: 1440px) {
      .group-category__item + .group-category__item {
        margin-top: 25px; } }
  .group-category__item:nth-child(3n + 2) .group-category__cover::after {
    background-color: #808281; }
  .group-category__item:nth-child(3n + 3) .group-category__cover::after {
    background-color: #faaf3a; }

.group-category__cover {
  padding-left: 35px;
  position: relative;
  width: 50%;
  min-width: 50%;
  margin-right: 40px; }
  @media only screen and (max-width: 1440px) {
    .group-category__cover {
      margin-right: 30px; } }
  @media only screen and (max-width: 46.1875em) {
    .group-category__cover {
      margin: 0 0 10px 0;
      width: 100%; }
      .group-category__cover .hide-on-mobile {
        display: none; } }
  .group-category__cover::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 30px;
    height: 20px;
    background-color: #0088cc;
    clip-path: polygon(0 0, 100% 0, 75% 50%, 100% 100%, 0 100%); }
  .group-category__cover.special {
    padding-left: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start; }
    .group-category__cover.special::after {
      display: none; }

.group-category__title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px; }
  @media only screen and (max-width: 1283px) {
    .group-category__title {
      margin-bottom: 5px; }
      .group-category__title .hide-on-pc-HD {
        display: none; } }

.group-category__text {
  font-size: 15px;
  color: #9f9f9f;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }

.group-category__detail {
  width: 50%; }
  @media only screen and (max-width: 46.1875em) {
    .group-category__detail {
      width: 100%; }
      .group-category__detail .hide-on-mobile {
        display: none; } }

.group-category__sub {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .group-category__sub + .group-category__sub {
    margin-top: 4px; }

.group-category__link {
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #0085c8; }
  .group-category__link:hover {
    color: #0085c8;
    text-decoration: underline;
    opacity: 1; }

.group-category__time {
  min-width: max-content;
  margin-left: 8px;
  text-align: right;
  color: #9f9f9f; }

.group-category__link, .group-category__time {
  font-size: 15px; }
  @media only screen and (max-width: 1440px) {
    .group-category__link, .group-category__time {
      font-size: 14px; } }

.group-category__avatar {
  min-width: 75px;
  height: 75px;
  border: 6px solid #fff;
  border-radius: 50%;
  position: relative;
  padding-top: 0%;
  overflow: hidden;
  margin-right: 15px; }
  .group-category__avatar > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media only screen and (max-width: 46.1875em) {
    .group-category__avatar {
      min-width: 65px;
      height: 65px;
      margin-right: 5px; }
      .group-category__avatar .hide-on-mobile {
        display: none; } }

.group-flex__end {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-end;
  flex-flow: row wrap; }

.group-flex__center {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .group-flex__center {
      flex-direction: column; }
      .group-flex__center .hide-on-mobile {
        display: none; } }
  .group-flex__center.special {
    margin-bottom: 50px; }
    @media only screen and (max-width: 1440px) {
      .group-flex__center.special {
        margin-bottom: 40px; } }
    @media only screen and (max-width: 63.9375em) {
      .group-flex__center.special {
        margin-bottom: 30px; }
        .group-flex__center.special .hide-on-bothTM {
          display: none !important; } }
  .group-flex__center.special2 {
    flex-direction: column; }
    .group-flex__center.special2 .group-flex__item + .group-flex__item {
      margin: 20px 0 0 0; }

.group-flex__item {
  width: 100%; }
  .group-flex__item + .group-flex__item {
    margin-left: 40px; }
    @media only screen and (max-width: 46.1875em) {
      .group-flex__item + .group-flex__item {
        margin: 25px 0 0 0; }
        .group-flex__item + .group-flex__item .hide-on-mobile {
          display: none; } }

.group-flex__start {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start; }
  @media only screen and (max-width: 46.1875em) {
    .group-flex__start {
      flex-direction: column; }
      .group-flex__start .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 63.9375em) {
    .group-flex__start.special {
      flex-direction: column; }
      .group-flex__start.special .hide-on-bothTM {
        display: none !important; } }
  .group-flex__start.special2 {
    flex-direction: column; }

.group-flex__sides {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 46.1875em) {
    .group-flex__sides {
      flex-direction: column; }
      .group-flex__sides .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .group-flex__sides.special {
      flex-direction: row; }
      .group-flex__sides.special .hide-on-mobile {
        display: none; } }

.group-detail__text * {
  all: revert; }

.group-detail__text p {
  line-height: 26px !important; }

.group-detail__img {
  overflow: hidden; }
  .group-detail__img > img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px; }
  @media only screen and (max-width: 46.1875em) {
    .group-detail__img {
      border-radius: 10px; }
      .group-detail__img .hide-on-mobile {
        display: none; } }

.group-cmt__list {
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(78, 101, 121, 0.15); }
  @media only screen and (max-width: 1440px) {
    .group-cmt__list {
      padding-bottom: 40px; } }
  @media only screen and (max-width: 63.9375em) {
    .group-cmt__list {
      padding-bottom: 30px; }
      .group-cmt__list .hide-on-bothTM {
        display: none !important; } }

.group-cmt__item {
  position: relative; }
  .group-cmt__item + .group-cmt__item {
    margin-top: 30px; }
  .group-cmt__item:first-child .group-cmt__icon > svg:nth-child(1) path {
    fill: #9f9f9f; }
  .group-cmt__item:last-child .group-cmt__content::after {
    display: none; }
  .group-cmt__item:after {
    content: "";
    position: absolute;
    top: 160px;
    left: 37px;
    width: 1px;
    height: calc(100% - 140px);
    background-color: rgba(78, 101, 121, 0.15); }

.group-cmt__main, .group-cmt__child {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start; }

.group-cmt__child {
  margin-top: 25px;
  padding: 0 25px 0 80px; }
  @media only screen and (max-width: 1440px) {
    .group-cmt__child {
      padding: 0 0px 0 50px; } }

.group-cmt__avt {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  position: relative;
  padding-top: 0%;
  overflow: hidden;
  border: 5px solid #fff;
  z-index: 2; }
  .group-cmt__avt > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.group-cmt__content {
  position: relative;
  width: 100%;
  padding: 18px 28px 30px;
  background-color: rgba(239, 243, 247, 0.5);
  border-radius: 10px;
  margin-left: -15px; }
  @media only screen and (max-width: 46.1875em) {
    .group-cmt__content {
      padding: 18px 20px 25px; }
      .group-cmt__content .hide-on-mobile {
        display: none; } }

.group-cmt__info {
  margin-bottom: 20px; }
  @media only screen and (max-width: 1283px) {
    .group-cmt__info {
      margin-bottom: 15px; }
      .group-cmt__info .hide-on-pc-HD {
        display: none; } }

.group-cmt__desc, .group-cmt__icon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column; }

.group-cmt__icon {
  margin-top: 15px; }
  .group-cmt__icon > span {
    font-weight: bold; }

.group-cmt__sub {
  font-size: 14px;
  color: #4e6579;
  font-style: italic; }

.group-cmt__text * {
  all: revert; }

.group-cmt__text p {
  line-height: 26px !important; }

.group-cmt__img {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px 15px; }
  @media only screen and (max-width: 1283px) {
    .group-cmt__img {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px 15px; }
      .group-cmt__img .hide-on-pc-HD {
        display: none; } }
  @media only screen and (max-width: 46.1875em) {
    .group-cmt__img {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 10px 10px; }
      .group-cmt__img .hide-on-mobile {
        display: none; } }
  .group-cmt__img img {
    border-radius: 5px; }

.group-cmt__text + .group-cmt__img {
  margin-top: 20px; }

.group-cmt__title {
  font-size: 14px;
  color: rgba(78, 101, 121, 0.5);
  margin-bottom: 12px; }

.group-cmt__file {
  min-width: 210px;
  margin-left: 40px; }
  @media only screen and (max-width: 1440px) {
    .group-cmt__file {
      margin: 0 0 0 25px; } }
  @media only screen and (max-width: 46.1875em) {
    .group-cmt__file {
      min-width: 100%;
      margin: 25px 0 0 0; }
      .group-cmt__file .hide-on-mobile {
        display: none; } }
  .group-cmt__file.special {
    min-width: 270px; }
    @media only screen and (max-width: 46.1875em) {
      .group-cmt__file.special {
        min-width: 100%; }
        .group-cmt__file.special .hide-on-mobile {
          display: none; } }
  .group-cmt__file img {
    max-width: 100%;
    height: auto; }
  .group-cmt__file img + img {
    margin-top: 10px; }

.group-cmt__upload {
  margin-top: 20px; }

.group-cmt__button {
  padding: 10px 15px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px dashed rgba(112, 112, 112, 0.5);
  cursor: pointer; }
  .group-cmt__button > span {
    font-size: 14px;
    color: rgba(78, 101, 121, 0.25);
    margin-left: 10px; }
  .group-cmt__button.special {
    max-width: 80%; }
    @media only screen and (max-width: 1283px) {
      .group-cmt__button.special {
        max-width: 100%; }
        .group-cmt__button.special .hide-on-pc-HD {
          display: none; } }

.group-cmt__choose {
  position: absolute;
  visibility: hidden;
  width: 0px;
  height: 0px; }

.group-cmt__reply {
  padding-left: 70px;
  margin-top: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-end; }

.group-cmt__replySub {
  cursor: pointer; }
  .group-cmt__replySub + .group-cmt__replySub {
    margin-left: 15px; }

.group-cmt__btn {
  border: 0;
  background-color: transparent;
  margin-left: 20px; }
  @media only screen and (max-width: 46.1875em) {
    .group-cmt__btn {
      margin: 20px auto 0;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center; }
      .group-cmt__btn .hide-on-mobile {
        display: none; } }
  .group-cmt__btn > span {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    margin-left: 5px;
    color: #f33066; }

.group-cmt__stt {
  font-weight: 500;
  color: #24adc1;
  padding: 0 20px 0 10px; }

.group-cmt__del {
  margin-left: 20px; }

.modal {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px); }
  .modal-book__content {
    padding: 35px;
    border-radius: 20px;
    background-color: #fff !important; }
    @media only screen and (max-width: 46.1875em) {
      .modal-book__content {
        padding: 40px 15px 20px; }
        .modal-book__content .hide-on-mobile {
          display: none; } }
  .modal-book__close {
    position: absolute;
    right: -40px;
    top: 0;
    border: 0;
    background-color: transparent; }
    @media only screen and (max-width: 46.1875em) {
      .modal-book__close {
        top: 10px;
        right: 15px; }
        .modal-book__close .hide-on-mobile {
          display: none; } }
  .modal-book__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; }
  .modal-book__title {
    font-size: 20px; }
  .modal-book__step {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .modal-book__stepSub {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: #9f9f9f;
    font-weight: 500;
    border-radius: 50%;
    border: 2px solid #9f9f9f;
    position: relative; }
    .modal-book__stepSub.active {
      background-color: #24adc1;
      color: #fff;
      border-color: #24adc1; }
    .modal-book__stepSub:first-child {
      color: #24adc1;
      border-color: #24adc1;
      background-color: transparent; }
      .modal-book__stepSub:first-child::after {
        content: "";
        position: absolute;
        right: -37px;
        top: 50%;
        transform: translateY(-50%);
        width: 25px;
        height: 2px;
        border-radius: 2px;
        background-color: #24adc1; }
    .modal-book__stepSub + .modal-book__stepSub {
      margin-left: 45px; }
  .modal-book__cmt {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    margin: 24px 0; }
  .modal-book__avt {
    min-width: 50px;
    height: 50px;
    position: relative;
    padding-top: 0%;
    overflow: hidden;
    margin-right: 15px;
    border-radius: 50%; }
    .modal-book__avt > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .modal-book__text {
    border: 1px solid #faaf3a;
    padding: 20px;
    border-radius: 0 20px 20px 20px;
    background-color: rgba(250, 175, 58, 0.1);
    font-size: 14px;
    color: #faaf3a; }
  .modal-book__btnWrap {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
    .modal-book__btnWrap button:hover {
      opacity: 1; }
  .modal-book__btnSub {
    border: 0;
    background-color: #000;
    padding: 0 15px;
    height: 45px;
    border-radius: 30px 0 0 30px;
    min-width: 100px;
    margin-right: -25px; }
  .modal-book__btn {
    border: 0;
    background-color: #24adc1;
    padding: 0 15px;
    height: 45px;
    border-radius: 30px;
    width: 100%; }
    .modal-book__btn > span {
      font-size: 15px;
      text-transform: uppercase;
      color: #fff;
      margin-right: 15px;
      font-weight: 500; }
    .modal-book__btn.special {
      background-color: #9b9b9b; }
  .modal-book__list {
    margin-bottom: 40px; }
    @media only screen and (max-width: 1600px) {
      .modal-book__list {
        margin-bottom: 30px; } }
    .modal-book__list.special {
      margin-bottom: 0;
      max-height: 400px;
      overflow-x: auto;
      width: 100%; }
      @media only screen and (max-width: 1283px) {
        .modal-book__list.special {
          max-height: max-content; }
          .modal-book__list.special .hide-on-pc-HD {
            display: none; } }
  .modal-book__item {
    margin-bottom: 30px; }
    .modal-book__item:last-child {
      margin-bottom: 0; }
  .modal-book__question {
    font-weight: bold;
    color: #4e6579;
    margin-bottom: 8px; }
  .modal-book__sub {
    color: #4e6579;
    margin-bottom: 15px; }
  .modal-chat__body {
    height: 750px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column; }
    @media only screen and (max-width: 1600px) {
      .modal-chat__body {
        height: 600px; } }
  .modal-chat__list {
    width: 100%;
    max-height: 100%;
    overflow-x: auto;
    padding: 0 10px 20px 0;
    /* Track */
    /* Handle */
    /* Handle on hover */ }
    .modal-chat__list.special {
      position: relative;
      left: 10px;
      bottom: 0;
      padding: 0 10px 20px;
      margin-bottom: 64px;
      width: calc(100% - 10px);
      max-height: calc(100% - 64px); }
      @media only screen and (max-width: 46.1875em) {
        .modal-chat__list.special {
          width: 100%;
          left: 0; }
          .modal-chat__list.special .hide-on-mobile {
            display: none; } }
    .modal-chat__list::-webkit-scrollbar {
      width: 10px; }
    .modal-chat__list::-webkit-scrollbar-track {
      box-shadow: inset 0 0 2px grey;
      border-radius: 10px; }
    .modal-chat__list::-webkit-scrollbar-thumb {
      background: #24adc1;
      border-radius: 7px; }
    .modal-chat__list::-webkit-scrollbar-thumb:hover {
      background: #24adc1; }
  .modal-chat__item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start; }
    .modal-chat__item + .modal-chat__item {
      margin-top: 20px; }
    .modal-chat__item.special {
      flex-direction: row-reverse; }
      .modal-chat__item.special .modal-chat__content {
        margin: 0 15px 0 0; }
      .modal-chat__item.special .modal-chat__text {
        background-color: #24adc1;
        border-color: #24adc1;
        border-radius: 20px 0 20px 20px;
        color: #fff; }
        @media only screen and (max-width: 46.1875em) {
          .modal-chat__item.special .modal-chat__text {
            border-radius: 10px 0 10px 10px;
            padding: 10px 15px; }
            .modal-chat__item.special .modal-chat__text .hide-on-mobile {
              display: none; } }
  .modal-chat__avt {
    min-width: 50px;
    height: 50px;
    position: relative;
    padding-top: 0%;
    overflow: hidden;
    border-radius: 50%; }
    .modal-chat__avt > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .modal-chat__content {
    margin-left: 15px; }
  .modal-chat__text {
    background-color: rgba(239, 243, 247, 0.5);
    border: 1px solid rgba(78, 101, 121, 0.1);
    border-radius: 0 20px 20px 20px;
    padding: 20px 25px; }
    @media only screen and (max-width: 46.1875em) {
      .modal-chat__text {
        border-radius: 0 10px 10px 10px;
        padding: 10px 15px; }
        .modal-chat__text .hide-on-mobile {
          display: none; } }
    .modal-chat__text.special {
      background-color: #fff; }
  .modal-chat__time {
    margin: 10px 0 0 25px;
    font-size: 13px;
    font-weight: 300; }
  .modal-chat__time, .modal-chat__text {
    color: #4e6579; }
  .modal-chat__form {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(78, 101, 121, 0.1); }
    .modal-chat__form.special {
      padding: 20px;
      border-radius: 10px 10px 0 0;
      background-color: #fff;
      border-top: 0;
      position: absolute;
      bottom: 0;
      left: 20px;
      width: calc(100% - 40px); }
      @media only screen and (max-width: 46.1875em) {
        .modal-chat__form.special {
          width: 100%;
          left: 0; }
          .modal-chat__form.special .hide-on-mobile {
            display: none; } }
  .modal-chat__input {
    width: 100%;
    border: 0;
    background-color: transparent;
    padding: 0 15px; }
    .modal-chat__input::placeholder {
      color: #d6d6d6; }
  .modal-chat__btn {
    border: 0;
    background-color: transparent; }

.chat-wrapper {
  border-radius: 14px;
  overflow: hidden;
  background-color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  height: 720px; }
  @media only screen and (max-width: 46.1875em) {
    .chat-wrapper {
      border-radius: 5px; }
      .chat-wrapper .hide-on-mobile {
        display: none; } }
  @media only screen and (max-width: 1440px) {
    .chat-wrapper {
      height: 600px; } }
  @media only screen and (max-width: 1283px) {
    .chat-wrapper {
      height: 450px; }
      .chat-wrapper .hide-on-pc-HD {
        display: none; } }
  @media only screen and (max-width: 63.9375em) {
    .chat-wrapper {
      height: 520px; }
      .chat-wrapper .hide-on-bothTM {
        display: none !important; } }

.chat-sidebar {
  width: 33%;
  height: 100%; }
  @media only screen and (max-width: 46.1875em) {
    .chat-sidebar {
      display: none; }
      .chat-sidebar .hide-on-mobile {
        display: none; } }
  .chat-sidebar__list {
    max-height: calc(100% - 125px);
    overflow-x: auto;
    /* Track */
    /* Handle */
    /* Handle on hover */ }
    .chat-sidebar__list.special {
      margin-top: 30px; }
    .chat-sidebar__list::-webkit-scrollbar {
      width: 10px; }
    .chat-sidebar__list::-webkit-scrollbar-track {
      box-shadow: inset 0 0 2px grey;
      border-radius: 10px; }
    .chat-sidebar__list::-webkit-scrollbar-thumb {
      background: #24adc1;
      border-radius: 7px; }
    .chat-sidebar__list::-webkit-scrollbar-thumb:hover {
      background: #24adc1; }
  .chat-sidebar__header {
    padding: 25px 20px 15px; }
  .chat-sidebar__title {
    font-size: 22px;
    font-weight: 500;
    margin: 0 20px 15px 0; }
  .chat-sidebar__input {
    padding: 10px 20px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid rgba(78, 101, 121, 0.1); }
  .chat-sidebar__item {
    padding: 15px 40px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; }
    @media only screen and (max-width: 1283px) {
      .chat-sidebar__item {
        padding: 10px 10px; }
        .chat-sidebar__item .hide-on-pc-HD {
          display: none; } }
    .chat-sidebar__item:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 93%;
      height: 1px;
      background-color: rgba(78, 101, 121, 0.1); }
    .chat-sidebar__item:last-child::after {
      display: none; }
    .chat-sidebar__item.active {
      background-color: #24adc1; }
      .chat-sidebar__item.active .chat-sidebar__name, .chat-sidebar__item.active .chat-sidebar__sub {
        color: #fff; }
    .chat-sidebar__item:hover {
      background-color: rgba(78, 101, 121, 0.1); }
  .chat-sidebar__info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center; }
  .chat-sidebar__avt {
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;
    position: relative;
    padding-top: 0%;
    overflow: hidden; }
    .chat-sidebar__avt > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .chat-sidebar__text {
    margin-left: 10px; }
  .chat-sidebar__name {
    font-size: 14px; }
  .chat-sidebar__sub {
    font-size: 12px; }
  .chat-sidebar__name, .chat-sidebar__sub {
    color: #18191b; }
  .chat-sidebar__alert {
    font-size: 12px;
    padding: 1px 7px 0px;
    border-radius: 50%;
    color: #fff;
    background-color: #faaf3a; }

.chat-detail {
  position: relative;
  width: 67%;
  padding: 20px 0 20px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: center;
  height: 100%; }
  @media only screen and (max-width: 46.1875em) {
    .chat-detail {
      width: 100%;
      padding: 10px 0 0 0; }
      .chat-detail .hide-on-mobile {
        display: none; } }
  .chat-detail.special {
    width: 100%;
    margin-top: -20px;
    border-radius: 0;
    height: 650px; }
    .chat-detail.special .modal-chat__item {
      margin-right: 52%; }
      @media only screen and (max-width: 1440px) {
        .chat-detail.special .modal-chat__item {
          margin-right: 0; } }
      .chat-detail.special .modal-chat__item.special {
        margin-right: 0;
        margin-left: 52%; }
        @media only screen and (max-width: 1440px) {
          .chat-detail.special .modal-chat__item.special {
            margin-left: 0; } }

.chat-mobile {
  display: none; }
  @media only screen and (max-width: 46.1875em) {
    .chat-mobile {
      display: block; }
      .chat-mobile .hide-on-mobile {
        display: none; } }

.custom-sub__btn {
  padding: 8px 25px;
  border-radius: 7px;
  border: 1px solid #faaf3a;
  font-weight: 500;
  margin-left: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #faaf3a;
  background-color: rgba(250, 175, 58, 0.1); }
  @media only screen and (max-width: 63.9375em) {
    .custom-sub__btn {
      width: 100%;
      margin: 20px 0 0; }
      .custom-sub__btn .hide-on-bothTM {
        display: none !important; } }
  @media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
    .custom-sub__btn + .custom-sub__btn {
      margin-left: 20px; } }
  .custom-sub__btn.special {
    color: #fff;
    background-color: #24adc1;
    border-color: #24adc1;
    min-width: max-content; }

.custom-cover .monitor-footer.filter-pagination {
  padding: 0;
  margin-bottom: 25px; }

.custom-cover__list {
  margin-bottom: 30px; }

.custom-cover__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  padding-bottom: 30px;
  position: relative; }
  .custom-cover__item::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 92%;
    height: 1px;
    background-color: rgba(78, 101, 121, 0.1); }
    @media only screen and (max-width: 46.1875em) {
      .custom-cover__item::after {
        width: 100%; }
        .custom-cover__item::after .hide-on-mobile {
          display: none; } }
  .custom-cover__item:last-child::after {
    display: none; }
  .custom-cover__item + .custom-cover__item {
    margin-top: 30px; }
  @media only screen and (max-width: 46.1875em) {
    .custom-cover__item {
      flex-direction: column; }
      .custom-cover__item .hide-on-mobile {
        display: none; } }
  .custom-cover__item .custom-cover__group .modal-book__list.special {
    margin-left: 25px; }
    @media only screen and (max-width: 46.1875em) {
      .custom-cover__item .custom-cover__group .modal-book__list.special {
        margin: 0; }
        .custom-cover__item .custom-cover__group .modal-book__list.special .hide-on-mobile {
          display: none; } }

.custom-cover__desc {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  margin-right: 30px; }
  @media only screen and (max-width: 46.1875em) {
    .custom-cover__desc {
      flex-direction: column; }
      .custom-cover__desc .hide-on-mobile {
        display: none; } }

@media only screen and (max-width: 46.1875em) {
  .custom-cover__time {
    margin-top: 15px; }
    .custom-cover__time .hide-on-mobile {
      display: none; } }

.custom-cover__text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px; }

.custom-cover__box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start; }
  .custom-cover__box > svg {
    min-width: 20px;
    margin-right: 5px; }

.custom-cover__sub {
  font-size: 14px;
  color: rgba(78, 101, 121, 0.75); }

.custom-cover__group {
  min-width: max-content; }

.custom-chat__content {
  padding-bottom: 0; }
  .custom-chat__content .modal-chat__form {
    padding: 15px;
    border-top: 0;
    border-radius: 10px 10px 3px 3px;
    background-color: #fff; }