/* -------------------------------------------------------------------------- */
/*                                common style                                */
/* -------------------------------------------------------------------------- */
.active {
  display: block !important;
}
.ui-timepicker-standard {
  /* position: relative; */
  z-index: 10 !important;
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  font-family: "pretendard", sans-serif;
  color: #111;
  font-size: 16px;
}
.ui-timepicker-standard .ui-state-hover {
  background-color: #e6fcfb;
  color: #00c5c1;
  border: 1px solid #00d9d5;
  border-radius: 6px;
}
.ui-timepicker-standard a {
  margin-right: 5px;
}

*::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}

*::-webkit-scrollbar-thumb {
  width: 2px;
  border-radius: 50rem;
  background-color: #efefef;
}

*::-webkit-scrollbar-track {
  background-color: transparent;
}
input::-webkit-date-and-time-value {
  text-align: left;
}
/* pc버전 배경 */
html,
body {
  height: 100dvh;
  overflow: hidden;
}

.wrapper {
  overflow: hidden;
  display: flex;
  position: relative;
}

.wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh;
  /*height: 62.3dvh;*/
  background-color: #E6F4F3;
  /*background-color: rgba(0, 193, 190, 0.12);*/
  z-index: -1;
}

.wrapper .icon_home_pc {
  right: 38px;
  bottom: 60px;
  position: absolute;
  width: 62px;
  height: 62px;
  background-image: url("../assets/image/icon/i_home.svg");
  box-shadow: 0px 0px 16px 0px #0000001a;
  border-radius: 18px;
  z-index: 9999;
}

.background_pc_txt {
  padding-right: 79px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.background_pc_txt .top_txt {
  min-width: 406px;
  display: flex;
  min-width: 406px;
  height: 62.3dvh;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
}

.background_pc_txt .top_txt .logo {
  width: 134px;
  position: relative;
}

.background_pc_txt .top_txt .logo::before {
  content: "";
  top: -30px;
  left: -36px;
  background-image: url("../assets/image/logo_icon.svg");
  background-size: cover;
  width: 73px;
  height: 67px;
  position: absolute;
  z-index: -1;
}

.background_pc_txt .top_txt .txt {
  padding-top: 15px;
  padding-bottom: 45px;
  /*font-size: 42px;*/
  font-size: 36px;
  font-weight: 700;
  line-height: 52px;
}

.background_pc_txt .top_txt .txt > span {
  color: #00c5c1;
}

.background_pc_txt .top_txt .sub_txt {
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  position: relative;
  display: inline-block;
  padding-right: 30px;
}

.background_pc_txt .top_txt .sub_txt::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background-image: url("../assets/image/icon/i_book.svg");
}

.background_pc_txt .top_txt .txt_list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.background_pc_txt .top_txt .txt_list > li {
  background-color: #fff;
  border-radius: 8px;
  color: #00c5c1;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  padding: 8px 16px;
}

.background_pc_txt .bottom_txt {
  /*padding-top: 63px;*/
  /*min-width: 406px;*/
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 40px;
}

.background_pc_txt .bottom_txt .txt {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.background_pc_txt .bottom_txt .txt > span {
  font-weight: 600;
}

.background_pc_txt .bottom_txt .i_app_store {
  /*padding-top: 32px;*/
  /*padding-bottom: 41px;*/
}

.background_pc_txt .bg_img_icon{
  right: 0;
  bottom: 0px;
  position: absolute;
  width: 100%;
  height: 382px;
  border-radius: 18px;
  z-index: -1;
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  background-image: url('../assets/image/main_bg_img.png');
  background-repeat: repeat-x;
}

.global_wrap {
  position: relative;
  max-width: 460px;
  width: 100%;
  margin-left: 25px;
  background-color: #fff;
  box-shadow: 0px 0px 12px 0px #00000014;
  height: 100dvh;
}

/* pc버전 배경 */
@media (max-width: 1024px) {
  .wrapper::before,
  /* .wrapper .icon_home_pc, */
  .background_pc_txt {
    display: none;
  }

  .wrapper {
    background-color: #00c1be1f;
  }

  .global_wrap {
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .wrapper .icon_home_pc {
    display: none;
  }
}

.side_tab .tab_menu::-webkit-scrollbar,
.container_wrap::-webkit-scrollbar {
  display: none;
}

.scroll_bar::-webkit-scrollbar {
  width: 12px;
}

.scroll_bar::-webkit-scrollbar-thumb {
  background-color: #e5e5ec;
  border-radius: 10px;
  background-clip: padding-box;
  border: 4px solid transparent;
}

.scroll_bar::-webkit-scrollbar-track {
  background-color: transparent;
}

.gradient_txt {
  background: linear-gradient(89.19deg, #00fffa -2.87%, #0082d2 111.92%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* 로딩바 */
.loader_contain {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
}
.loader {
  width: 24px;
  height: 24px;
  background-image: url("../assets/image/loading_spinner.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  animation: spin 1s linear infinite;
}
.loader.white {
  background-image: url("../assets/image/loading_spinner_w.svg");
}
.loader_txt {
  font-size: 13px;
  line-height: 18px;
  color: #767676;
}

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

/* 토글 버튼 */
.switch_btn {
  width: 52px;
  height: 28px;
  background: #f1f1f5;
  border-radius: 50rem;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}
.switch_btn .toggle {
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50rem;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
}
.switch_btn.active {
  background: #00d9d5;
}
.switch_btn.active .toggle {
  left: 26px;
}

/* error_sec */
.error_sec {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
}
.error_sec .txt {
  color: #505050;
  font-size: 15px;
  line-height: 22px;
  margin: 6px 0 20px;
}
.error_sec button {
  width: 104px;
  height: 36px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 8px;
}
/* form style */
.vail_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px;
  padding-top: 8px;
}

.vail_box .basic {
  color: #999999;
}

.vail_box .complete {
  color: #0eca20;
}

.vail_box .reject {
  color: #f83434;
}

.vail_box .basic,
.vail_box .complete,
.vail_box .reject {
  position: relative;
  padding-left: 20px;
}

.vail_box .basic::before,
.vail_box .complete::before,
.vail_box .reject::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.vail_box .basic::before {
  background-image: url("../assets/image/icon/icon_basic.svg");
}

.vail_box .complete::before {
  background-image: url("../assets/image/icon/icon_complete.svg");
}

.vail_box .reject::before {
  background-image: url("../assets/image/icon/icon_reject.svg");
}

.vail_box .err_msg {
  padding-top: 0;
}

.err_msg {
  padding-top: 8px;
  color: #f83434;
  font-size: 14px;
  font-weight: 400;
}

.form_wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.input_wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.input_box {
  position: relative;
}

.input_box .notice {
  margin-top: 12px;
  font-size: 13px;
  color: #767676;
  line-height: 18px;
  padding-left: 16px;
  position: relative;
}

.input_box .notice::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: #767676;
  border-radius: 50rem;
}

.focus_box {
  position: relative;
}

.input_btn {
  right: 16px;
  top: 14px;
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
}

.input_box:has(.input_btn) input {
  padding-right: 50px;
}

.input_btn.close {
  background-image: url("../assets/image/icon/icon_close.svg");
}

/*.input_btn.eyes {*/
/*  background-image: url("../assets/image/icon/icon_eyes.svg");*/
/*}*/

/*.input_btn.uneyes {*/
/*  background-image: url("../assets/image/icon/icon_eyes.svg");*/
/*}*/

.input_btn.timer {
  color: #f83434;
  width: auto;
  height: auto;
  top: 17px;
  font-size: 16px;
}

input {
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  width: 100%;
  padding: 15px 16px;
}

input,
textarea {
  font-size: 15px;
  color: #111;
  position: relative;
}

.input_box .search_box {
  position: relative;
}

.input_box .search_box::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url("../assets/image/icon/i_search.svg");
  background-position: center center;
  background-repeat: no-repeat;
}
.input_box .search_box.drop_down_::after {
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_select_arrow.svg");
}

.input_box .search_box input {
  padding-right: 50px;
}

.input_box .search_box input:focus {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.input_box .select_list {
  padding-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.input_box .select_list > li {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #f7f7fb;
  border-radius: 50rem;
  color: #505050;
  padding: 6px 12px;
}
.input_box .select_list > li .del_btn {
  display: block;
  width: 10px;
  height: 10px;
  background-image: url("../assets/image/icon/i_del.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
.input_box .drop_down {
  display: none;
  max-height: 150px;
  overflow-y: scroll;
  width: 100%;
  position: absolute;
  top: 80px;
  border: 1px solid #111;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  background-color: #fff;
  z-index: 1;
}
.input_box .drop_down > li {
  font-size: 14px;
  padding: 14px 16px;
}
.input_box .drop_down > li:active {
  background-color: #f7f7fb;
  color: #505050;
}
.radi_chk_wrap .legend {
  display: flex;
  flex-wrap: wrap;
}
/* label */
.label {
  display: block;
  margin-bottom: 8px;
  align-items: center;
}
.label .change_btn {
  padding: 6px 4px;
  color: #00c5c1;
  font-size: 14px;
  line-height: 18px;
}
.label.required::after {
  content: " *";
  color: #f83434;
}
.label .desc {
  color: #767676;
  font-size: 13px;
}
.label.bold {
  font-weight: 600;
}
/* input */
input {
  height: 52px;
}
input:disabled {
  background-color: #f1f1f5;
  color: #999;
  border: 1px solid #e5e5ec;
  opacity: 1 !important;
  -webkit-text-fill-color: inherit !important;
}

input::placeholder {
  color: #767676;
  font-size: 15px;
}
input:focus {
  border: 1px solid #111111;
}
.input_box .inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input_box .inner input {
  width: calc(100% - 106px);
}
.input_box .inner button {
  min-width: 106px;
  max-width: 106px;
  font-size: 14px;
}
/* textarea */
.textarea_wrap {
  position: relative;
}
.textarea_wrap.h_158 {
  height: 158px;
}
.textarea_wrap.h_100 {
  height: 100px;
}
.textarea_wrap textarea {
  padding: 16px 16px 42px;
  border: 1px solid #e5e5ec;
  border-radius: 6px;
}
textarea::placeholder {
  color: #999999;
  font-size: 15px;
  line-height: 22px;
}
textarea {
  width: 100%;
  font-size: 15px;
  line-height: 22px;
  border: none;
  height: 100%;
  resize: none;
}
textarea + .txt_counter {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: 13px;
  color: #767676;
}
textarea + .txt_counter .error {
  color: #ff2929;
}
/* select */
select {
  border: none;
  -webkit-appearance: none;
  /* for chrome */
  -moz-appearance: none;
  /*for firefox*/
  appearance: none;
  box-sizing: border-box;
  /*select 박스의 크기 방식 지정.*/
  background: transparent;
  /*배경색 투명 처리*/
}
select {
  background: url("../assets/image/icon/i_arrow_bottom_g.svg") no-repeat 97% 50%/20px
    auto;
  padding-right: 20px;
}
.select_box_style {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
}

.select_box_style.border {
  height: 28px;
  border: 1px solid #f1f1f5;
  border-radius: 4px;
  padding: 4px 4px 4px 10px;
  width: 60px;
}

/* 프로필 이미지 업로드 */
input[type="file"] {
  display: none;
}
.preview_box {
  display: block;
  position: relative;
  width: 86px;
  height: 86px;
  margin: 0 auto;
}
.preview_box::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  background-image: url("../assets/image/icon/i_camera.svg");
  width: 30px;
  height: 30px;
}
.preview_box > figure {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50rem;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.preview_box > figure img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 이미지 업로드 */
.fileupload_wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.priview_box {
  width: 86px;
  height: 86px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #e5e5ec;
}

.priview_box .icon_del_circle {
  position: absolute;
  top: 4px;
  right: 3px;
  z-index: 3;
}
.image_file_box {
  width: 86px;
  height: 86px;
  border: 2px dotted #e5e5ec;
  display: block;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.image_file_box .count {
  color: #767676;
  font-size: 12px;
}
/* 파일 업로드 */
.file_input_box {
  display: block;
  width: 100%;
  height: 52px;
  border: 1px solid #111;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.file_input_box .txt {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding-left: 24px;
}
.file_input_box .txt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_add_file.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
.file_upload_list {
  background-color: #f7f7fb;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.file_upload_list > li {
  display: flex;
  justify-content: space-between;
}
.file_upload_list > li > span {
  position: relative;
  color: #767676;
  font-size: 15px;
  line-height: 22px;
  padding-left: 10px;
}
.file_upload_list > li > span::before {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 50rem;
  background-color: #767676;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}
/* 검색 input */
.input_box.search {
  position: relative;
}
.input_box.search::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  display: block;
  background-image: url("../assets/image/icon/i_search_g.svg");
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  z-index: 1;
}
.input_box.search > input {
  height: 48px;
  padding: 13px 16px;
  padding-left: 40px;
  background-color: #f7f7fb;
  border-color: #f7f7fb;
  position: relative;
}

.input_box.search2 {
  position: relative;
}
.input_box.search2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: block;
  background-image: url("../assets/image/icon/i_search.svg");
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  z-index: 1;
}
.input_box.search2 > input {
  height: 48px;
  padding: 13px 16px;
  padding-right: 40px;
  position: relative;
}

/* 댓글, 문의하기 input */
.comment_input_box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comment_input_box .profile {
  width: 28px;
  height: 28px;
  border-radius: 50rem;
  overflow: hidden;
  position: relative;
}
.comment_input_box .profile > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.comment_input_box .inner {
  width: 100%;
  position: relative;
}
.comment_input_box .inner .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
}
.comment_input_box .inner input {
  padding: 12px 40px 12px 12px;
  height: 43px;
}

/* checkBox icon*/
input[type="checkbox"] {
  width: auto;
  display: none;
}
.icon_checkbox {
  display: block;
  position: relative;
  padding-left: 28px;
}
.icon_checkbox.no_round {
  padding-left: 31px;
}
.icon_checkbox.size24 {
  padding-left: 32px;
}
.icon_checkbox::before {
  content: "";
  left: 0;
  top: 50%;
  transform: translatey(-50%);
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/icon_uncheck.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}
.icon_checkbox.size24::before {
  width: 24px;
  height: 24px;
}
.icon_checkbox.no_round::before {
  background-image: url("../assets/image/icon/i_uncheck.svg");
}
.icon_checkbox > span {
  color: #999;
  font-size: 14px;
}
.icon_checkbox.size24 > span {
  font-size: 16px;
  color: #111;
}
.icon_checkbox.no_round > span {
  font-size: 15px;
  color: #111;
}
.icon_checkbox.color > span {
  font-size: 15px;
  color: #505050;
}
.icon_checkbox:has(input[type="checkbox"]:checked)::before {
  background-image: url("../assets/image/icon/icon_check.svg");
}
.icon_checkbox.no_round:has(input[type="checkbox"]:checked)::before {
  background-image: url("../assets/image/icon/i_check.svg");
}

.icon_checkbox.color:has(input[type="checkbox"]:checked)::before {
  background-image: url("../assets/image/icon/i_check_c.svg");
}

.icon_checkbox:has(input[type="checkbox"]:checked) > span {
  color: #111;
}

.icon_checkbox.color:has(input[type="checkbox"]:checked) > span {
  font-weight: 600;
}

/* icon_radio */
.icon_radio {
  display: block;
  position: relative;
  padding-left: 32px;
}

.icon_radio::before {
  content: "";
  left: 0;
  top: 50%;
  transform: translatey(-50%);
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  box-shadow: 0 0 0 1px #e5e5ec inset;
  border-radius: 50rem;
}

.icon_radio > span {
  color: #111;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  word-break: keep-all;
}

.icon_radio:has(input[type="radio"]:checked)::before {
  box-shadow: 0 0 0 7px #00d9d5 inset;
}
/* input date */
input[type="date"],
input.datepicker,
input[type="time"],
input.timepicker {
  position: relative;
  background-image: url("../assets/image/icon/i_calender.svg");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 10px;
  color: #505050;
  appearance: none;
  -webkit-appearance: none;
  text-align: left !important;
  background-color: #fff;
}
input[type="time"],
input.timepicker {
  background-image: url("../assets/image/icon/i_clock.svg");
}

input[type="date"]:disabled.click_event {
  background-color: #fff;
}

input[type="date"].click_event::-webkit-calendar-picker-indicator {
  display: none;
}
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-clear-button,
input[type="time"]::-webkit-inner-spin-button {
  display: none;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
}
input[type="time"]::before,
input[type="date"]::before {
  content: attr(data-placeholder);
  width: 100%;
}
input[type="time"]:focus::before,
input[type="time"]:valid::before,
input[type="date"]:focus::before,
input[type="date"]:valid::before {
  display: none;
}

/* radiobox text*/
input[type="radio"] {
  display: none;
}

.text_radio {
  display: block;
  position: relative;
  padding: 12px 10px;
  text-align: center;
  width: 100%;
  color: #505050;
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  font-size: 14px;
  height: 44px;
}

.text_radio.small {
  height: 36px;
  padding: 8px 16px;
}

.text_radio:has(input[type="radio"]:checked),
.text_radio:has(input[type="checkbox"]:checked) {
  border: 1px solid #00d9d5;
  background-color: #e6fcfb;
  color: #00c5c1;
}

/* radio thumbnail */
.thumbnail_radio:has(input[type="radio"]:checked) {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  width: 80px;
}

.thumbnail_radio .image {
  display: block;
  width: 80px;
}

.thumbnail_radio:has(input[type="radio"]:checked) ::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid #00d9d5;
  border-radius: 8px;
  background-image: url("../assets/image/icon/i_check_cir.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0000004d;
}

/* category page check, radio style 오른쪽에 블랙 체크 아이콘*/
.r_icon_ckeck {
  position: relative;
  width: 100%;
  display: block;
  height: 54px;
  padding: 16px;
}

.r_icon_ckeck:has(input[type="radio"]:checked)::after,
.r_icon_ckeck:has(input[type="checkbox"]:checked)::after {
  content: "";
  width: 20px;
  height: 20px;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  display: block;
  position: absolute;
  background-image: url("../assets/image/icon/i_check_b.svg");
}

.r_icon_ckeck > span {
  color: #171719;
  font-size: 15px;
  line-height: 22px;
}

/* button */
button {
  background-color: #00d9d5;
  color: #fff;
  padding: 14px 10px;
  height: 52px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  border: 1px solid #00d9d5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

button.black {
  background-color: #111111;
  border: 1px solid #111111;
}

button.line {
  border: 1px solid #e5e5ec;
  background-color: transparent;
  color: #111;
  font-weight: 500;
}

button.b_line {
  border: 1px solid #111111;
  background-color: transparent;
  color: #111;
}

button.primary_line {
  border: 1px solid #00d9d5;
  background-color: transparent;
  color: #00d9d5;
}

button.red {
  border: 1px solid #ff3a4a;
  background-color: #ff3a4a;
  color: #fff;
}

button.red_line {
  border: 1px solid #f83434;
  background-color: #fff;
  color: #f83434;
}

button:disabled,
button.gray {
  background-color: #f1f1f5;
  border: 1px solid #f1f1f5;
  color: #999999;
  font-weight: 500;
}
button.red_txt {
  background-color: transparent;
  color: #f83434;
  padding: 0;
  text-decoration: underline;
  border: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  width: auto;
  height: auto;
  margin: 0 auto;
}

/* custom_select_box */
.custom_select_box {
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  padding: 16px;
  height: 52px;
}

.custom_select_box .select_option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom_select_box .select_option > span {
  font-size: 14px;
  line-height: 20px;
}

.custom_select_box .select_option > span.placeholder {
  color: #505050;
}

/* -------------------------------------------------------------------------- */
/*                                 icon 아이콘                                 */
/* -------------------------------------------------------------------------- */
.icon_right_arrow {
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_arrow_right_b.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_right_arrow_color {
  width: 12px;
  height: 12px;
  background-image: url("../assets/image/icon/i_right_arrow_color.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_bottom_arrow {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_arrow_bottom_b.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_sel_bottom_arrow {
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_select_arrow.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_bottom_arrow_g {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_arrow_bottom_g.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_right_arrow_g {
  width: 12px;
  height: 12px;
  background-image: url("../assets/image/icon/i_arrow_r_g.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_right_arrow_gg {
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_right_arrow_gg.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_right_arrow_ggg {
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_right_arrow_ggg.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_blue_check {
  width: 18px;
  height: 18px;
  background-image: url("../assets/image/icon/i_chk_blue.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_chat {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_inquery_w.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_close_w {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_close_w.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_close_g {
  width: 18px;
  height: 18px;
  background-image: url("../assets/image/icon/i_del_file.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_dot_btn {
  width: 24px;
  height: 24px;
  background-image: url("../assets/image/icon/i_dot_btn.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_enter_d {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_enter_d.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_enter_on {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_enter_on.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_add_circle {
  width: 31px;
  height: 31px;
  background-image: url("../assets/image/icon/i_add_circle.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_del_circle {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_del_image.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_right_arrow_g_t {
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_righr_arrow_g_t.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_ticket {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_ticket.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_widget_01 {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_widget_01.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_widget_02 {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_widget_02.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_widget_03 {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_widget_03.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_coin {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_coin.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_chart {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_chart.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

.icon_filter {
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_filter.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_filter.on {
  width: 14px;
  height: 14px;
  background-image: url("../assets/image/icon/i_filter_on.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_create {
  width: 14px;
  height: 14px;
  background-image: url("../assets/image/icon/i_create.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_user {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_user.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_review {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_review.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_bag {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_shopping_bag.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_user_tag {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_user_tag.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_review_mana {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_review_manager.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_deco_chk {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_deco_chk.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_deco_danger {
  width: 20px;
  height: 20px;
  background-image: url("../assets/image/icon/i_deco_red.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
.icon_notice {
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_notice_b.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

/* -------------------------------------------------------------------------- */
/*                                  item style                                */
/* -------------------------------------------------------------------------- */
/* 해시태그, 뱃지 */
.badge_list {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge_list .item {
  height: 20px;
  line-height: 17px;
  display: block;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  background-color: rgba(0, 197, 193, 0.14);
  color: rgba(0, 197, 193, 1);
}

.badge_list .item.red {
  background-color: rgba(247, 44, 91, 0.14);
  color: rgba(247, 44, 91, 1);
}

.badge_list .item.blue {
  background-color: rgba(61, 88, 242, 0.14);
  color: rgba(61, 88, 242, 1);
}

.badge_list .item.purple {
  background-color: rgba(154, 36, 255, 0.14);
  color: rgba(149, 29, 252, 1);
}

.badge_list .item.orange {
  background-color: rgba(255, 138, 61, 0.14);
  color: rgba(255, 138, 61, 1);
}

.badge_list .item.green {
  background-color: rgba(14, 202, 32, 0.14);
  color: rgba(0, 198, 19, 1);
}
.badge_list .item.gray {
  background-color: #f7f7fb;
  color: #999999;
}
/* 점 안내 문구 */
.dot_notice_list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dot_notice_list .item {
  font-size: 13px;
  line-height: 18px;
  padding-left: 16px;
  position: relative;
  color: #767676;
}
.dot_notice_list .item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 8px;
  width: 2px;
  height: 2px;
  border-radius: 50rem;
  background-color: #767676;
}
/* 별점 */
.rating {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  font-weight: 600;
}

.rating::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_star.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.rating span {
  color: #767676;
  font-size: 12px;
  font-weight: 500;
}

.select_rating {
  display: flex;
  align-items: center;
  height: 34px;
  gap: 10px;
}

.select_rating .star_box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.select_rating .score {
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  margin-top: 6px;
}

/* 커뮤니티 좋아요, 조회수, 댓글수 아이콘 */
.community_icon_box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.like_button,
.comment_count,
.comment_view_count {
  display: flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  font-size: 14px;
}

.like_button .icon {
  width: 24px;
  height: 24px;
  display: block;
  background-image: url("../assets/image/icon/i_heart.svg");
}

.like_button.on .icon {
  background-image: url("../assets/image/icon/i_heart_on.svg");
}

.like_button .count {
  color: rgba(153, 153, 153, 1);
}

.like_button.on .count {
  color: rgba(248, 52, 52, 1);
}

.comment_count .icon {
  width: 24px;
  height: 24px;
  display: block;
  background-image: url("../assets/image/icon/i_comment.svg");
}

.comment_view_count .icon {
  width: 24px;
  height: 24px;
  display: block;
  background-image: url("../assets/image/icon/i_eyes.svg");
}

/* 점 리스트 */
.dot_list {
  display: flex;
  align-items: center;
}

.dot_list > span {
  position: relative;
  padding-right: 10px;
  display: block;
  color: rgba(80, 80, 80, 1);
  font-size: 13px;
}
.dot_list > span.blue {
  color: #3d58f2;
}

.dot_list > span::after {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 50rem;
  background-color: rgba(153, 153, 153, 1);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  display: block;
}

.dot_list > span:last-child {
  padding-right: 0;
}

.dot_list > span:last-child::after {
  display: none;
}
/* 라인 리스트 */
.line_list {
  display: flex;
  align-items: center;
}

.line_list > span {
  position: relative;
  padding-right: 16px;
  display: block;
  font-size: 14px;
  line-height: 20px;
}
.line_list > span.blue {
  color: #3d58f2;
}
.line_list > span.gray {
  color: #767676;
}
.line_list > span.bold {
  font-weight: 500;
}

.line_list > span::after {
  content: "";
  width: 1px;
  height: 8px;
  background-color: #e5e5ec;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  display: block;
}

.line_list > span:last-child {
  padding-right: 0;
}

.line_list > span:last-child::after {
  display: none;
}

/* 학부모 프로필, 닉네임, 스타일 */
.community_profile_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.community_profile_box .inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.community_profile_box .inner .profile {
  width: 20px;
  height: 20px;
  border-radius: 50rem;
  overflow: hidden;
}

.community_profile_box .inner .profile img {
  width: 100%;
}

.community_profile_box .inner .nickname {
  display: flex;
  align-items: center;
}

.community_profile_box .inner .nickname > span {
  position: relative;
  display: block;
  padding-right: 14px;
  font-size: 14px;
}

.community_profile_box .inner .nickname > span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 2px;
  height: 2px;
  border-radius: 50rem;
  background-color: rgba(153, 153, 153, 1);
}

.community_profile_box .inner .nickname > span:last-child {
  padding-right: 0;
}

.community_profile_box .inner .nickname > span:last-child::after {
  display: none;
}

/* bookmark */
.icon_bookmark {
  display: block;
  width: 24px;
  height: 24px;
  /*background-image: url("../assets/image/icon/i_bookmark.svg");*/
  background-image: url("../assets/image/icon/i_bookmark.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

.icon_bookmark.on {
  /*background-image: url("../assets/image/icon/i_bookmark_on.svg");*/
  background-image: url("../assets/image/icon/i_bookmark_on_color.svg");
}

.icon_bookmark.color.on {
  background-image: url("../assets/image/icon/i_bookmark_on_color.svg");
}

/* subject item */
.subject_list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.subject_list .subject_item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.subject_list .subject_item .thumb {
  aspect-ratio: 80/102;
  max-width: 80px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.subject_list .subject_item .text_box {
  width: calc(100% - 96px);
}

.subject_list .subject_item .title_box {
  padding-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subject_list .subject_item .title_box .tit {
  width: calc(100% - 30px);
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.subject_list .subject_item .infomation {
  display: flex;
  padding-bottom: 6px;
}

.subject_list .subject_item .infomation .item {
  position: relative;
  padding-right: 10px;
  display: block;
  color: rgba(80, 80, 80, 1);
  font-size: 13px;
}

.subject_list .subject_item .infomation .item::after {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 50rem;
  background-color: rgba(153, 153, 153, 1);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
  display: block;
}

.subject_list .subject_item .infomation .item:last-child::after {
  display: none;
}

.subject_list .subject_item .price_box {
  display: flex;
  align-items: baseline;
  padding-bottom: 8px;
  line-height: 1;
}

.subject_list .subject_item .price_box .percent {
  font-size: 18px;
  color: rgba(255, 41, 41, 1);
  font-weight: 500;
  margin-right: 4px;
}

.subject_list .subject_item .price_box .sale_price {
  font-size: 18px;
  font-weight: 600;
  margin-right: 6px;
}

.subject_list .subject_item .price_box .price {
  color: rgba(0, 0, 0, 0.2);
  text-decoration: line-through;
}

.subject_list .subject_item .text_box .type {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* .subject_list_itt */
.subject_list_itt .subject_item {
  padding: 24px 0;
  border-bottom: 1px solid #f1f1f5;
}
.subject_list_itt .subject_item:last-child {
  border-bottom: none;
}
.subject_list_itt .subject_item .item_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.subject_list_itt .subject_item .item_head .badge_list .item {
  padding: 2px 5px;
}
.subject_list_itt .subject_item .item_head .class_id {
  color: #505050;
  font-size: 13px;
  line-height: 18px;
}
.subject_list_itt .subject_item .item_body {
  display: flex;
  gap: 14px;
  align-items: center;
}
.subject_list_itt .subject_item .item_body .thumb {
  width: 74px;
  min-width: 74px;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
}
.subject_list_itt .subject_item .item_body .title_box .tit {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.subject_list_itt .subject_item .item_body .price_box {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}
.subject_list_itt .subject_item .item_body .price_box .price {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

/* subject request item */
.request_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.request_list .request_item {
  padding: 20px;
  border: 2px solid rgba(241, 241, 245, 1);
  border-radius: 8px;
}

.request_list .request_item .community_profile_box {
  padding-bottom: 12px;
}

.request_list .request_item .text_box .category {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 2px;
}

.request_list .request_item .text_box .title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.request_list .request_item .text_box .desc {
  font-size: 14px;
  color: rgba(80, 80, 80, 1);
  margin-bottom: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* main_review_list */
.main_review_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main_review_list > .item {
  padding: 16px;
  border: 1px solid rgba(233, 233, 233, 1);
  border-radius: 8px;
}

.main_review_list > .item .desc {
  color: rgba(79, 79, 79, 1);
  font-size: 14px;
  margin: 16px 0;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* commu_list item */
/* 공통 */
.commu_list .line {
  background-color: #f7f7fb;
  height: 8px;
  width: 100%;
}

.commu_list .card {
  padding-top: 28px;
  padding-left: 16px;
  padding-right: 16px;
}

.commu_list .community_profile_box {
  padding-bottom: 12px;
}

.commu_list .community_profile_box .profile {
  width: 24px;
  height: 24px;
}

.commu_list .community_profile_box .nickname > span {
  font-size: 14px;
}

.commu_list .community_profile_box .nickname > span:first-child {
  font-weight: 600;
  color: #111;
}

.commu_list .community_profile_box .nickname > span:last-child {
  font-weight: 400;
  color: #767676;
}

.commu_list .community_profile_box .badge_list .item {
  padding: 2px 5px;
}

.commu_list .card .commu_title {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.commu_list .card .desc {
  font-size: 13px;
  line-height: 18px;
}

.commu_list .community_icon_box {
  padding: 20px 0;
}

.commu_list .community_icon_box .like_button {
  margin-right: auto;
}

/* 질문 */
.commu_list .card .thumbnail_box {
  border-bottom: 1px solid #e5e5ec;
}

.commu_list .card .thumbnail_box .thumbnail {
  margin-top: 12px;
  margin-bottom: 20px;
  aspect-ratio: 343/186;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.commu_list .card .thumbnail_box .thumbnail > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* 후기 */
.commu_list .card .rating {
  margin-bottom: 8px;
  font-size: 16px;
  padding-left: 20px;
}

.commu_list .card .rating::after {
  width: 20px;
  height: 20px;
  top: 44%;
}

.commu_list .card .target_class {
  margin-top: 16px;
  display: flex;
  align-items: center;
  background-color: #f7f7fb;
  border-radius: 8px;
  padding: 17px 16px;
}

.commu_list .card .target_class .class_image {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 2px;
  overflow: hidden;
  align-items: center;
}

.commu_list .card .target_class .class_name {
  color: #0095ff;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  margin-left: 12px;
  margin-right: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.commu_list .card .target_class .icon_right_arrow_g {
  margin-left: auto;
}

/* 입시설명회 */
.commu_list .card .info_box {
  margin-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.commu_list .card .info_box .info_item {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #e5e5ec;
}

.commu_list .card .hash_bookmark_box {
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.commu_list.chk_style {
  gap: 16px;
  display: flex;
  flex-direction: column;
}
.commu_list.chk_style .card {
  border: 1px solid #e5e5ec;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 8px;
}
.commu_list input[type="checkbox"]:checked ~ .card {
  border: 1px solid #00d9d5;
}
.commu_list.chk_style .commu_title {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #4f4f4f;
  font-size: 16px;
}
.commu_list.chk_style .desc {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #4f4f4f;
  font-size: 14px;
}
.commu_list.chk_style .type_list {
  display: flex;
  align-items: center;
  gap: 6px;
}
.commu_list.chk_style .type_list .item {
  border: 1px solid #e5e5ec;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
/* teacher item */
.teacher_list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 24px;
}

.teacher_list .teacher_item {
  width: calc(33.33% - 11px);
}

.teacher_list .teacher_item .profile_box {
  position: relative;
  aspect-ratio: 107/120;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  /* max-width: 107px; */
}

.teacher_list .teacher_item .profile_box .icon_bookmark {
  position: absolute;
  z-index: 1;
  top: 7px;
  right: 5px;
}

.teacher_list .teacher_item .profile_box img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.teacher_list .teacher_item .text_box {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.teacher_list .teacher_item .text_box .name {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.teacher_list .teacher_item .text_box .dot_list > span {
  font-size: 11px;
}

/* 댓글 */
.comment_list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.comment_list .comment_item .community_profile_box {
  margin-bottom: 4px;
  padding-bottom: 0;
}
.comment_list .comment_item .community_profile_box .inner {
  gap: 12px;
}
.comment_list .comment_item .community_profile_box .profile {
  width: 28px;
  height: 28px;
}
.comment_list .comment_item .community_profile_box .nickname span:first-child {
  font-size: 14px;
  font-weight: 600;
  color: #131214;
  line-height: 20px;
}
.comment_list .comment_item .community_profile_box .nickname span:last-child {
  font-size: 13px;
  font-weight: 400;
  color: #767676;
  line-height: 18px;
}
.comment_list .comment_item .comment_box {
  margin-left: 40px;
  display: flex;
  justify-content: space-between;
  gap: 19px;
}
.comment_list .comment_item .comment_box .like_button {
  flex-direction: column;
  gap: 1px;
}
.comment_list .comment_item .comment_box .like_button .count {
  font-size: 11px;
}
.comment_list .comment_item .recomment_btn {
  margin-left: 40px;
  margin-top: 8px;
  color: #767676;
  font-size: 12px;
  line-height: 18px;
}
/* 마이페이지 내 수업 리스트 */
.my_class_list .card {
  padding: 28px 16px;
}

.my_class_list .lines {
  width: 100%;
  height: 12px;
  background-color: #f1f1f5;
}

.my_class_list .card .card_inner {
  display: flex;
  gap: 16px;
  align-items: center;
}

.my_class_list .card .thumbnail {
  width: 80px;
  min-width: 80px;
}

.my_class_list .card .text_box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.my_class_list .card .text_box .state_box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.my_class_list .card .state_box .state {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.my_class_list .card .state_box .state.cancel {
  color: #f83434;
}

.my_class_list .card .state_box .state.complete {
  color: #0eca20;
}

.my_class_list .card .state_box .date {
  font-size: 14px;
  color: #767676;
  line-height: 20px;
}

.my_class_list .card .state_box .icon_dot_btn {
  margin-left: auto;
}

.my_class_list .card .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.my_class_list .card .total {
  font-size: 16px;
  color: #505050;
}
.my_class_list .card .btn {
  margin-top: 20px;
  height: 48px;
  font-size: 15px;
  color: #505050;
  line-height: 20px;
}

/* 마이페이지 내 문의 리스트 */
.my_inquery_list {
  display: flex;
  flex-direction: column;

  gap: 26px;
}
.my_inquery_list .card {
  display: flex;
  gap: 16px;
  align-items: center;
}
.my_inquery_list .card .profile_box.online {
  position: relative;
}
.my_inquery_list .card .profile_box.online::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50rem;
  background-color: #ff2d55;
  border: 2px solid #fff;
  top: 0;
  right: 0;
}
.my_inquery_list .card .profile {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50rem;
  overflow: hidden;
  position: relative;
  background-color: #ececec;
}
.my_inquery_list .card .text_box .tc_info {
  display: flex;
  align-items: center;
}

.my_inquery_list .card .text_box .tc_info .badge_list {
  margin-right: 6px;
}
.my_inquery_list .card .text_box .tc_info .name {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin-right: 8px;
}
.my_inquery_list .card .text_box .tc_info .dot_list > span {
  color: #999999;
  font-size: 12px;
  line-height: 12px;
}
.my_inquery_list .card .text_box .desc {
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
  color: #505050;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.my_inquery_list .chk_box {
  display: none;
}
.my_inquery_list.edit .chk_box {
  display: block;
}
.my_inquery_list .chk_box .icon_checkbox {
  width: 24px;
  height: 24px;
  padding: 0;
}

/* 마이페이지 문의하기 채팅 리스트 */
.chat_wrap .chat_list {
  padding: 20px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat_wrap .date {
  /* margin-top: 24px; */
  /* margin-bottom: 24px; */
  height: 18px;
  color: #767676;
  font-size: 12px;
  position: relative;
  text-align: center;
}
.chat_wrap .date > span {
  position: relative;
  display: block;
  width: 107px;
  height: 100%;
  background-color: #fff;
  line-height: 18px;
  margin: 0 auto;
}
.chat_wrap .date::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f1f1f5;
  z-index: 0;
}
.chat_wrap .chat_box {
  width: 80%;
}
.chat_wrap .chat_box.me {
  margin-left: auto;
}
.chat_wrap .chat_box .desc {
  padding: 14px 16px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}
.chat_wrap .chat_box .update_date {
  display: block;
  text-align: right;
  margin-top: 7px;
  color: #767676;
  font-size: 12px;
  line-height: 12px;
}
.chat_wrap .chat_box.me .desc {
  border-radius: 8px 8px 0 8px;
  background-color: #434343;
  color: #fff;
}
.chat_wrap .chat_box.me.itt .desc {
  border-radius: 8px 8px 0 8px;
  background-color: #434343;
  color: #fff;
}
.chat_wrap .chat_box.other .desc {
  border-radius: 8px 8px 8px 0;
  background-color: #f5f9fd;
  color: #111;
}
.chat_wrap .chat_box.other.itt .desc {
  border-radius: 0 8px 8px 8px;
  background-color: #f5f9fd;
  color: #111;
}
.chat_wrap .chat_box.other {
  display: flex;
  gap: 8px;
}
.chat_wrap .chat_box.other .profile {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50rem;
  overflow: hidden;
  background-color: #ececec;
}
.chat_wrap .chat_box.other .name {
  font-size: 13px;
  color: #898d8f;
  margin-bottom: 6px;
}

/* 마이페이지 최근 광고 결제 내역 */
.advertisement_payments_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.advertisement_payments_list > .item {
  border: 1px solid #e5e5ec;
  border-radius: 8px;
  padding: 16px 18px;
}
.advertisement_payments_list > .item .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 12px;
}
.advertisement_payments_list > .item .info_txt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5ec;
}
.advertisement_payments_list > .item .info_txt .txt {
  display: flex;
  align-items: center;
}
.advertisement_payments_list > .item .info_txt .txt .type {
  position: relative;
  padding-right: 16px;
}
.advertisement_payments_list > .item .info_txt .txt > span {
  color: #505050;
  font-size: 14px;
}
.advertisement_payments_list > .item .info_txt .txt .dot_list .item {
  color: #505050;
  font-size: 14px;
}

.advertisement_payments_list > .item .info_txt .txt .type::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 1px;
  height: 8px;
  background-color: #cccccc;
}
.advertisement_payments_list > .item .result_txt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
}
.advertisement_payments_list > .item .result_txt {
  font-size: 15px;
  font-weight: 500;
}
.advertisement_payments_list > .item .result_txt .state {
  color: #0eca20;
}
.advertisement_payments_list > .item .result_txt .state.end {
  color: #999999;
}

/* --------------------------------------------------------------------------- */
/*                                   tab menu                                  */
/* --------------------------------------------------------------------------- */
.tab_menu {
  display: flex;
}

.tab_menu > li {
  width: 100%;
  font-size: 16px;
  text-align: center;
  padding: 14px 10px;
  height: 50px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border: 1px solid #e5e5ec;
  background-color: #f7f7fb;
  color: #767676;
}

.tab_menu > li.on {
  border-bottom: 1px solid transparent;
  background-color: #fff;
  font-weight: 600;
  color: #000;
}

.tab_menu.underline > li {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #999999;
  font-size: 16px;
  font-weight: 500;
  padding: 18px 10px;
  background-color: #fff;
  height: 58px;
}

.tab_menu.underline > li.on {
  border-bottom: 2px solid #00d9d5;
  color: #00d9d5;
  font-weight: 700;
}

.tab_menu.progress > li {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: none;
  color: #999999;
  font-size: 15px;
  padding: 15px 10px;
  background-color: #fff;
  height: 52px;
}

.tab_menu.progress > li.on {
  color: #00d9d5;
  font-weight: 600;
}

.tab_content {
  display: none;
}

.tab_menu.sub_p {
  gap: 24px;
  height: 49px;
  border-bottom: 1px solid #f1f1f5;
  padding: 0 16px;
  background-color: #fff;
  z-index: 2;
}

.tab_menu.sub_p > li {
  padding: 0;
  padding-top: 12px;
  padding-bottom: 10px;
  width: auto;
  color: #999999;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  height: 48px;
  background-color: #fff;
  border: none;
}

.tab_menu.sub_p > li.on {
  color: #111;
  border-bottom: 2px solid #111;
  font-weight: 600;
}

.global_inner {
  padding-left: 16px;
  padding-right: 16px;
}

.side_tab.has_desc {
  padding-top: 38px;
}

.side_tab .tab_menu {
  display: block;
  position: absolute;
  left: 0;
  top: 94px;
  bottom: 0;
  background-color: #f1f1f5;
  width: 100px;
  overflow-y: scroll;
}

.side_tab .tab_menu > li {
  padding: 16px 10px;
  color: #999999;
  border: none;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  height: 54px;
  background-color: #f1f1f5;
}

.side_tab .tab_menu > li.on {
  color: #111111;
  font-weight: 600;
  background-color: #fff;
}

.side_tab .tab_content_wrap {
  padding-left: 108px;
  width: 100%;
}

/* 말풍선 */
.ballon {
  position: absolute;
  width: 129px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -40px;
  background: #3a474e;
  color: white;
  border-radius: 5px;
  padding: 6px;
  text-align: center;
  font-size: 13px;
}

.ballon:after {
  border-top: 0 solid transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #3a474e;
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

/* 체크박스 선택시 토글메뉴 슬라이드  */
.check_slide_content {
  display: none;
}

.check_slide_content.on {
  display: flex;
}

/* 안내문구 */
/* 원형느낌표 아이폰 포함한 안내문구 */
.guide_txt {
  position: relative;
  color: #505050;
  padding-left: 24px;
  font-size: 14px;
}

.guide_txt::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background-image: url("../assets/image/icon/i_round_notice.svg");
}

/* 토글 슬라이드 */
.slide_btn {
  width: 18px;
  height: 18px;
  background-image: url("../assets/image/icon/arrow_top.svg");
  transition: all 0.2s ease-in-out;
  transform: rotate(180deg);
}

.slide_btn.on {
  transform: rotate(0);
}

.slide_content {
  opacity: 0;
  transform: translateY(-40px);
}

.slide_content.on {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease-in-out;
}

/* progress_bar 헤더 아래 진행바 */
.progress_bar {
  position: sticky;
  top: 0;
  height: 2px;
  background-color: #f7f7fb;
  z-index: 1;
}

.progress_bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #00d9d5;
  width: 25%;
}

.progress_bar.bar01::after {
  width: 25%;
}

.progress_bar.bar02::after {
  width: 50%;
}

.progress_bar.bar03::after {
  width: 75%;
}

.progress_bar.bar04::after {
  width: 100%;
}

/* -------------------------------------------------------------------------- */
/*                                      모달                                   */
/* -------------------------------------------------------------------------- */
.modal_wrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #11111199;
  z-index: 9999;
}

.modal_wrap.on {
  display: block;
}

.modal_wrap .modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 311px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px 16px 20px;
}

.modal_wrap.on .modal {
  animation: modal-fade-in 0.3s ease-out forwards;
}

.modal_wrap .modal {
  animation: modal-fade-out 0.3s ease-out forwards;
}

.modal_wrap .image {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  margin-bottom: 16px;
}

.modal_wrap .modal .text {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.modal_wrap .modal .desc {
  padding-top: 8px;
  text-align: center;
  font-size: 15px;
  color: #767676;
}

.modal_wrap .modal .btn_area {
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.modal_wrap .modal .btn_area button {
  width: 135px;
}

/* 이미지 프리뷰 모달 */
.modal_wrap.privew {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  overflow-y: auto;
}

.modal_wrap.privew .modal_header {
  height: 56px;
  background-color: rgba(0, 0, 0, 0.6);
  position: sticky;
  top: 0;
  width: 100%;
}

.modal_wrap.privew .modal_header .icon_close_w {
  position: absolute;
  top: 18px;
  right: 16px;
}

.modal_wrap.privew .image_box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: calc(100dvh - 56px);
}

.modal_wrap.privew .image_box .image {
  width: 100%;
  background-color: #fff;
  height: auto;
  /* top: 50%; */
  /* position: absolute; */
  /* transform: translateY(-50%); */
}

.modal_wrap.privew .image_box img {
  width: 100%;
}

/* 모달 페이드인 애니메이션 */
@keyframes modal-fade-in {
  from {
    opacity: 0;
    /* 투명 상태 */
    transform: translate(-50%, -40%);
  }

  to {
    opacity: 1;
    /* 불투명 상태 */
    transform: translate(-50%, -50%);
  }
}

/* 모달 사라짐 애니메이션 */
@keyframes modal-fade-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
}

/* -------------------------------------------------------------------------- */
/*                                    page style                              */
/* -------------------------------------------------------------------------- */

.page_title {
  word-break: keep-all;
  font-size: 20px;
  font-weight: 600;
  padding-top: 32px;
}

.page_sub_title {
  color: #767676;
  padding-top: 8px;
}

.page_title.no_h1 {
  padding-top: 16px;
}

.section_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
}

.section_title > h4 {
  font-size: 20px;
  font-weight: 700;
  position: relative;
}

.section_title.fire > h4 {
  padding-left: 21px;
}

.section_title.fire > h4::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 15px;
  height: 20px;
  background-image: url("../assets/image/icon/i_fire.svg");
}

.section_title > a {
  font-size: 13px;
  color: rgba(80, 80, 80, 1);
}

.section_title.arrow > a {
  width: 28px;
  height: 28px;
  background-image: url("../assets/image/icon/i_arrow_right_tit.svg");
}

.container_wrap {
  overflow-y: auto;
  height: 100dvh;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: none;
}

/* 헤더, bottom_btn 있을 떄 container 높이값*/
.container_wrap.h_01 {
  height: calc(100dvh - 136px);
}

/* header, bottom_btn ,bottom_text 있을 떄 container 높이값*/
.container_wrap.h_02 {
  /* margin-top: 56px; */
  height: calc(100dvh - 168px);
  padding-bottom: 56px;
}

/* header만 있을 때 container 높이값 */
.container_wrap.h_03 {
  padding-bottom: 56px;
}

/* header, footer 만 있을 때 container 높이값 */
.container_wrap.h_04 {
  /* margin-top: 56px; */
  height: calc(100dvh - 112px);
}

/* header, bottom_text 있을 때 */
.container_wrap.h_05 {
  height: calc(100dvh - 90px);
}

/* 검색헤서 height: 70px */
.container_wrap.h_06 {
  height: calc(100dvh - 70px);
}

/* header, footer_input_box 있을때 */
.container_wrap.h_07 {
  height: calc(100dvh - 124px);
}

/* 문의하기 container*/
.container_wrap.h_08 {
  height: calc(100dvh - 214px);
}
.container_wrap.h_09 {
  height: calc(100dvh - 180px);
}
.bottom_text {
  position: absolute;
  color: #000;
  font-size: 14px;
  height: 32px;
  background-color: #fff;
  bottom: 80px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 16px;
  line-height: 1.2;
}

.bottom_text a {
  color: #007aff;
  text-decoration: underline;
}

.bottom_text .link_txt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.bottom_btn {
  position: absolute;
  background-color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  z-index: 999;
}
.bottom_btn.two {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -------------------------------------------------------------------------- */
/*                                    Header                                  */
/* -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  height: 56px;
  z-index: 99;
  max-width: 460px;
}

.header.border {
  border-bottom: 1px solid rgba(241, 241, 245, 1);
}

.header.gray_bg {
  background-color: #f7f7fb;
}

.header .inner {
  position: relative;
  height: 100%;
}

.header h1 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 58px;
}

.header h1.page_name {
  font-size: 20px;
  line-height: 28px;
}

.header h1.left {
  text-align: left;
  padding-left: 40px;
}

.header h1 .color {
  color: #00d9d5;
}

.header .back_btn,
.header .close_btn,
.header .edit_btn {
  background-color: #fff;
  width: 28px;
  height: 28px;
  position: absolute;
  top: 50%;
  border: none;
  transform: translateY(-50%);
}
.header .close_btn,
.header .edit_btn {
  right: 16px;
}

.header .edit_btn {
  height: auto;
  color: #007aff;
  border-bottom: 1px solid #007aff;
  line-height: 16px;
  font-size: 15px;
}

.header .edit_btn.finsh {
  color: #111;
  border-bottom: 1px solid #111;
}

.header .back_btn::after,
.header .close_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background-size: 100%;
}

.header .back_btn {
  left: 10px;
}

.header .close_btn {
  right: 16px;
}

.header .back_btn::after {
  background-image: url("../assets/image/icon/icon_back.svg");
  width: 28px;
  height: 28px;
}

.header .close_btn::after {
  background-image: url("../assets/image/icon/i_header_close.svg");
  width: 20px;
  height: 20px;
}

.header.search {
  height: 70px;
}

.header.search .inner {
  padding: 11px 16px;
}

.header.search .input_box {
  width: calc(100% - 34px);
  margin-left: auto;
}

/* main */
.header.main .inner {
  padding: 14px 12px 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header.main .header_menu {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header.main .header_menu > li {
  width: 28px;
  height: 28px;
  align-items: center;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
}

.header.main .header_menu > .search {
  background-image: url("../assets/image/icon/i_header_search.svg");
}

.header.main .header_menu > .alram {
  background-image: url("../assets/image/icon/i_alram.svg");
}

.header.main .header_menu > .gnb_menu {
  background-image: url("../assets/image/icon/i_gnb.svg");
}

.header.main .header_menu .alram > .icon_read {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #00d9d5;
  right: 4px;
  top: 4px;
  border-radius: 50rem;
  border: 2px solid #fff;
}
.header.chat {
  height: 146px;
}
.header.chat.h_112 {
  height: 112px;
}
.header.chat .back_btn {
  top: 12px;
  transform: translateY(0);
}
.header.chat .profile {
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.header.chat .profile .img {
  width: 36px;
  height: 36px;
  border-radius: 50rem;
  overflow: hidden;
  background-color: #e5e5ec;
}
.header.chat .profile .name {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.header.chat .profile .place {
  font-size: 13px;
  color: #898d8f;
  line-height: 18px;
}
header.chat .profile .badge_list .item {
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
  padding: 4px 8px;
  height: 26px;
}

/* -------------------------------------------------------------------------- */
/*                                네비메뉴 category                             */
/* -------------------------------------------------------------------------- */
.container_wrap.category {
  padding-top: 30px;
  padding-bottom: 36px;
}

.container_wrap.category .cate_list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.container_wrap.category .cate_list .thumb_title {
  width: 100%;
  aspect-ratio: 343/80;
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  background-size: cover;
  border-radius: 6px;
  background-position: center center;
  position: relative;
}

.container_wrap.category .cate_list .thumb_title span {
  position: absolute;
  bottom: 9px;
  left: 15px;
}

.container_wrap.category .cate_list .item.math .thumb_title {
  background-image: url("../assets/image/thumbnail/math_343x80.png");
}

.container_wrap.category .cate_list .item.eng .thumb_title {
  background-image: url("../assets/image/thumbnail/eng_343x80.png");
}

.container_wrap.category .cate_list .item.essay .thumb_title {
  background-image: url("../assets/image/thumbnail/essay_343x80.png");
}

.container_wrap.category .cate_list .item.music .thumb_title {
  background-image: url("../assets/image/thumbnail/music_343x80.png");
}

.container_wrap.category .cate_list .item.activity .thumb_title {
  background-image: url("../assets/image/thumbnail/activity_343x80.png");
}

.container_wrap.category .cate_list .title {
  padding: 16px 0 8px;
  font-size: 18px;
  font-weight: 600;
}

.container_wrap.category .cate_list .sub_item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.container_wrap.category .cate_list .sub_item > li {
  border: 1px solid rgba(229, 229, 236, 1);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 15px;
  color: rgba(80, 80, 80, 1);
}

/* -------------------------------------------------------------------------- */
/*                                   알림 alarm                                */
/* -------------------------------------------------------------------------- */
.container_wrap.alarm {
  padding-bottom: 40px;
}

.container_wrap.alarm .date {
  margin-top: 24px;
  margin-bottom: 24px;
  height: 18px;
  color: #767676;
  font-size: 12px;
  position: relative;
  text-align: center;
}

.container_wrap.alarm .date > span {
  position: relative;
  display: block;
  width: 107px;
  height: 100%;
  background-color: #fff;
  line-height: 18px;
  margin: 0 auto;
}

.container_wrap.alarm .date::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f1f1f5;
  z-index: 0;
}

.container_wrap.alarm .alarm_list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.container_wrap.alarm .alarm_list .item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #f1f1f5;
}

.container_wrap.alarm .alarm_list .item.unread {
  background-color: #e6fcfb;
  border: 1px solid #e6fcfb;
}

.container_wrap.alarm .alarm_list .item .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container_wrap.alarm .alarm_list .item .top .type {
  color: #00b4b0;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
}

.container_wrap.alarm .alarm_list .item .top .ago {
  font-size: 12px;
  color: #767676;
  line-height: 18px;
}

.container_wrap.alarm .alarm_list .item .desc {
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.container_wrap.alarm .alarm_list .item.unread .desc {
  font-weight: 500;
}

.container_wrap.alarm .bottom_text {
  bottom: 0;
  height: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container_wrap.alarm .bottom_text .guide_txt {
  color: #767676;
}

.container_wrap.alarm .bottom_text .guide_txt::before {
  top: -1px;
}

/* 알람 없을때 */
.container_wrap .global_inner.no_alarm {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: calc(100dvh - 132px);
}

.container_wrap .global_inner.no_alarm > .txt {
  padding-top: 8px;
  color: #505050;
  font-size: 14px;
  line-height: 20px;
}

/* -------------------------------------------------------------------------- */
/*                                 검색창 search                                */
/* -------------------------------------------------------------------------- */
.container_wrap.search .global_inner .no_data {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: calc(100dvh - 70px);
}

.container_wrap.search .global_inner > .no_data .txt {
  padding-top: 6px;
  color: #767676;
  font-size: 15px;
  line-height: 22px;
  font-weight: 300;
}

/* -------------------------------------------------------------------------- */
/*                                    Footer                                  */
/* -------------------------------------------------------------------------- */
.footer {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background-color: #fff;
  max-width: 460px;
}

.footer .footer_menu {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #e5e5ec;
  height: 100%;
}

.footer .footer_menu > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer .footer_menu > li > i {
  display: block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center center;
}

.footer .footer_menu > li .icon_home {
  background-image: url("../assets/image/icon/i_ft_home.svg");
}

.footer .footer_menu > li.on .icon_home {
  background-image: url("../assets/image/icon/i_ft_home_on.svg");
}

.footer .footer_menu > li .icon_class {
  background-image: url("../assets/image/icon/i_ft_class.svg");
}

.footer .footer_menu > li.on .icon_class {
  background-image: url("../assets/image/icon/i_ft_class_on.svg");
}

.footer .footer_menu > li .icon_like {
  background-image: url("../assets/image/icon/i_ft_wish.svg");
}

.footer .footer_menu > li.on .icon_like {
  background-image: url("../assets/image/icon/i_ft_wish_on.svg");
}

.footer .footer_menu > li .class_set {
  background-image: url("../assets/image/icon/i_ft_set_class.svg");
}

.footer .footer_menu > li.on .class_set {
  background-image: url("../assets/image/icon/i_ft_set_class_on.svg");
}

.footer .footer_menu > li .icon_commu {
  background-image: url("../assets/image/icon/i_ft_comm.svg");
}

.footer .footer_menu > li.on .icon_commu {
  background-image: url("../assets/image/icon/i_ft_comm_on.svg");
}

.footer .footer_menu > li .icon_my {
  background-image: url("../assets/image/icon/i_ft_my.svg");
}

.footer .footer_menu > li.on .icon_my {
  background-image: url("../assets/image/icon/i_ft_my_on.svg");
}

.footer .footer_menu > li .tit {
  font-size: 11px;
  color: #999999;
}

.footer .footer_menu > li.on .tit {
  font-size: 11px;
  color: rgba(0, 217, 213, 1);
}

/* main footer 추가 */
.footer_sec {
  background-color: #fafafd;
  padding: 18px 16px;
}

.footer_sec .footer_nav {
  display: flex;
  align-items: center;
  gap: 25px;
  height: 20px;
}

.footer_sec .footer_nav > li {
  color: #505050;
  font-size: 13px;
  line-height: 20px;
  position: relative;
}

.footer_sec .footer_nav > li::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: #e5e5ec;
  right: -12px;
}

.footer_sec .footer_nav > li:last-child:after {
  display: none;
}

.footer_sec .logo {
  padding: 25px 0 16px;
  width: 126px;
}

.footer_sec .desc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer_sec .desc > span {
  color: #767676;
  font-size: 13px;
  line-height: 18px;
}

.footer_sec .desc .copyright {
  padding-top: 14px;
}

/* 댓글작성, 문의하기 푸터 */
.footer_input_box {
  background-color: #fff;
  border-top: 1px solid #f1f1f5;
  position: sticky;
  bottom: 0;
  width: 100%;
  padding: 12px 16px;
}

/* -------------------------------------------------------------------------- */
/*                                floating menu                               */
/* -------------------------------------------------------------------------- */
.floating_area {
  position: absolute;
  right: 16px;
  bottom: 80px;
  z-index: 999;
}

.floating_area.no_footer {
  bottom: 16px;
}

.floating_area .item {
  width: 60px;
  height: 60px;
}

.floating_area .item.icon_inquiry {
  background-image: url("../assets/image/icon/i_inquiry_floating.svg");
}
.floating_area .item.icon_plus {
  background-image: url("../assets/image/icon/i_add_write.svg");
}

/* -------------------------------------------------------------------------- */
/*                                  bottom sheets                             */
/* -------------------------------------------------------------------------- */
/* 오버레이 (배경) */
.bottom_sheet_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 17, 17, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  z-index: 999;
}

/* Bottom Sheet 본체 */
.bottom_sheet {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  background: white;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  /* transform: translateY(0); */
  transition: transform 0.3s ease-in-out;
  margin: auto;
  z-index: 1000;
}

.bottom_sheet .tab_bar {
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background-color: #cfcfcf;
  margin: 10px auto;
}

.bottom_sheet .close_btn {
  width: 16px;
  height: 16px;
  background-image: url("../assets/image/icon/i_close.svg");
  background-position: center center;
  background-repeat: no-repeat;
}

/* 헤더 */
.bottom_sheet_header {
  position: relative;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding: 6px 0;
}

.bottom_sheet_header .close_btn {
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}

.bottom_sheet_content {
  padding-bottom: 80px;
}

/* Bottom Sheet 활성화 */
.bottom_sheet.open {
  transform: translateY(0);
}

.bottom_sheet_overlay.active {
  opacity: 1;
  visibility: visible;
}

/* 어깨톡톡  */
.container_wrap ~ .bottom_sheet .bottom_sheet_header {
  padding: 16px 0;
  border-bottom: 1px solid rgba(241, 241, 245, 1);
}

.container_wrap ~ .bottom_sheet .bottom_sheet_header h3 {
  font-size: 16px;
  font-weight: 600;
}

.container_wrap ~ .bottom_sheet .bottom_sheet_content {
  padding-bottom: 0;
}

.container_wrap ~ .bottom_sheet .inquery_menu_list {
  padding-left: 16px;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 18px;
}

.container_wrap ~ .bottom_sheet .inquery_menu_list > li {
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid rgba(241, 241, 245, 1);
}

.container_wrap ~ .bottom_sheet .inquery_menu_list > li:last-child {
  border-bottom: none;
}

.container_wrap ~ .bottom_sheet .inquery_menu_list > li .icon_right_arrow {
  margin-left: auto;
}

/* 수강생 추가 정보 입력 join_step06.html > bottom_sheet_1*/
.bottom_sheet.edit .bottom_sheet_content {
  padding: 24px 16px 90px;
}

.bottom_sheet.edit .bottom_sheet_content .name {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 20px;
}

.bottom_sheet.edit .bottom_sheet_content .legend_title {
  padding-bottom: 16px;
}

.bottom_sheet.edit .age_legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bottom_sheet.edit .age_legend .input_box {
  width: calc(50% - 4px);
}

.bottom_sheet.edit .check_slide {
  border: 1px solid #e5e5ec;
  border-radius: 6px;
}

.bottom_sheet.edit .check_slide .input_box {
  padding: 13px 16px;
}

.bottom_sheet.edit .check_slide .check_slide_content {
  border-top: 1px solid #e5e5ec;
  align-items: center;
  gap: 8px;
  padding: 16px;
  flex-wrap: wrap;
}

.bottom_sheet.edit .check_slide .check_slide_content .input_box {
  padding: 0;
}

.bottom_sheet.edit .legend_level {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: scroll;
}

.bottom_sheet.edit .bottom_sheet_content:has(.edit_menu_list) {
  padding: 6px 24px 0;
}

.bottom_sheet.edit .edit_menu_list > li {
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #f1f1f5;
  font-size: 16px;
}

/* 리스트 정렬 bottom sheet /class_list.html > sort_bottom_sheet */
.bottom_sheet.sort .bottom_sheet_header {
  height: 50px;
}

.bottom_sheet.sort .bottom_sheet_content {
  padding: 0 24px;
}

.bottom_sheet.sort .option_list > li {
  padding: 20px 0;
  height: 60px;
  border-bottom: 1px solid #f1f1f5;
  font-size: 16px;
}

.bottom_sheet.sort_check .bottom_sheet_content {
  padding: 0 24px;
}

.bottom_sheet.sort_check .r_icon_ckeck {
  padding: 18px 0;
  border-bottom: 1px solid #f1f1f5;
}

.bottom_sheet.sort_check .r_icon_ckeck > span {
  font-size: 16px;
  line-height: 24px;
}

.bottom_sheet.sort_check .r_icon_ckeck:has(input[type="radio"]:checked)::after,
.bottom_sheet.sort_check
  .r_icon_ckeck:has(input[type="checkbox"]:checked)::after {
  right: 0;
}

/* 결제 상세 내역 */
.bottom_sheet.extend_date .bottom_sheet_content {
  padding: 20px 24px 0;
  padding-bottom: 88px;
}
.bottom_sheet.extend_date .bottom_sheet_content .form_wrap {
  gap: 12px;
}
.bottom_sheet.extend_date .bottom_sheet_content .bottom_btn {
  padding: 8px 24px;
}

/* 달력 */
.bottom_sheet.calendar .bottom_btn {
  padding: 8px 24px;
}
.bottom_sheet.calendar .bottom_sheet_content {
  padding: 0 10px;
  padding-bottom: 68px;
}
/* 대상 */
.bottom_sheet.class_target .bottom_btn {
  padding: 8px 24px;
}
.bottom_sheet.class_target .bottom_sheet_content {
  padding: 0 24px;
  padding-top: 20px;
  padding-bottom: 88px;
}
.bottom_sheet.class_target .bottom_sheet_content .option_list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  align-items: center;
}

.bottom_sheet.class_target .bottom_sheet_content .option_list > li {
  width: 50%;
}

/* 레벨 */
.bottom_sheet.class_level .bottom_btn {
  padding: 8px 24px;
}

.bottom_sheet.class_level .bottom_sheet_content {
  padding: 0 24px;
  padding-top: 20px;
  padding-bottom: 88px;
}

.bottom_sheet.class_level .icon_checkbox.color > span {
  color: #111;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

.bottom_sheet.class_level
  .icon_checkbox.color:has(input[type="checkbox"]:checked)
  > span {
  font-weight: 500;
}

.bottom_sheet.class_level .bottom_sheet_content .option_list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  align-items: center;
}

.bottom_sheet.class_level .bottom_sheet_content .option_list > li {
  width: 50%;
}

/* 가격 */
.bottom_sheet.class_price .bottom_btn {
  padding: 8px 24px;
}

.bottom_sheet.class_price .bottom_sheet_content {
  padding: 0 24px;
  padding-top: 20px;
  padding-bottom: 88px;
}

.bottom_sheet.class_price .icon_checkbox.color > span {
  color: #111;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

.bottom_sheet.class_price
  .icon_checkbox.color:has(input[type="checkbox"]:checked)
  > span {
  font-weight: 500;
}

.bottom_sheet.class_price .bottom_sheet_content .option_list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  align-items: center;
}

.bottom_sheet.class_price .bottom_sheet_content .option_list > li {
  width: 50%;
}

/* 클래스 상세페이지 바텀 시트 class_detail.html */
.bottom_sheet.class_payments .bottom_btn {
  padding: 8px 20px;
}

.bottom_sheet.class_payments .bottom_sheet_content {
  padding: 0 20px;
  padding-top: 20px;
  padding-bottom: 88px;
}

.bottom_sheet.class_payments .desc {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.bottom_sheet.class_payments .info_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.bottom_sheet.class_payments .text_box .tit {
  margin: 12px 0;
  font-size: 16px;
  line-height: 24px;
}

.bottom_sheet.class_payments .price_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.bottom_sheet.class_payments .price_box .percent {
  color: #ff2929;
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  margin-right: 4px;
}

.bottom_sheet.class_payments .price_box .sale_price {
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
}

.bottom_sheet.class_payments .price_box .price {
  margin-left: 6px;
  color: #00000033;
  font-size: 15px;
  line-height: 18px;
  text-decoration: line-through;
}

.bottom_sheet.class_payments .count_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 99px;
  border: 1px solid #e6e9eb;
  height: 32px;
  border-radius: 50rem;
  overflow: hidden;
  color: #131214;
  font-size: 16px;
}

.bottom_sheet.class_payments .count_box .num {
  height: 100%;
  line-height: 32px;
}

.bottom_sheet.class_payments .count_box button {
  background-color: #fff;
  width: 32px;
  height: 32px;
  background-position: center center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  border: none;
}

.bottom_sheet.class_payments .count_box button.minus {
  background-image: url("../assets/image/icon/i_count_minus.svg");
}

.bottom_sheet.class_payments .count_box button.plus {
  background-image: url("../assets/image/icon/i_count_plus.svg");
}
/* 선생님 클래스 관리 필터 바텀시트 */
.bottom_sheet.itt_class_filter .bottom_sheet_header {
  padding: 6px 0;
  height: 38px;
  border-bottom: none;
}
.bottom_sheet.itt_class_filter .bottom_sheet_header h3 {
  font-size: 18px;
}

.bottom_sheet.itt_class_filter .bottom_sheet_content {
  padding: 0 16px;
  padding-top: 12px;
  padding-bottom: 88px;
}
.bottom_sheet.itt_class_filter .radi_chk_wrap .legend {
  gap: 8px;
}
.bottom_sheet.itt_class_filter .radi_chk_wrap .legend > .input_box {
  width: calc(33.33% - 6px);
}
.bottom_sheet.itt_class_filter .label {
  margin-bottom: 16px;
}
.bottom_sheet.itt_class_filter .form_wrap {
  gap: 28px;
}
.bottom_sheet.itt_class_filter .bottom_btn {
  padding: 12px 16px;
}
/* 선생님 판매목록 관리 필터 바텀시트 */
.bottom_sheet.itt_sales_filter .bottom_sheet_content {
  padding: 0px;
  padding-bottom: 68px;
}
.bottom_sheet.itt_sales_filter .bottom_sheet_content .legend {
  padding: 20px 24px;
}
.bottom_sheet.itt_sales_filter .bottom_sheet_content .legend .input_wrap {
  flex-wrap: wrap;
  flex-direction: row;
  column-gap: 18px;
  row-gap: 24px;
}
.bottom_sheet.itt_sales_filter .bottom_sheet_content .legend .input_box {
  width: calc(50% - 9px);
}
.bottom_sheet.itt_sales_filter .bottom_sheet_content .legend .label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}
.bottom_sheet.itt_sales_filter .bottom_sheet_content .bottom_btn {
  padding: 8px 24px;
}

/* 계좌인증 bottom sheet */
.bottom_sheet.add_account .bottom_sheet_content {
  padding: 20px 24px 88px;
}
.bottom_sheet.add_account .bottom_sheet_content .bottom_btn {
  padding: 8px 24px;
}
/* -------------------------------------------------------------------------- */
/*                      스와이퍼 메뉴 swiper menu style                          */
/* -------------------------------------------------------------------------- */
.swiper_menu {
  padding-left: 16px;
}

/* .swiper_menu .swiper-wrapper {
  padding-bottom: 16px;
} */
.swiper_menu .swiper-slide {
  height: 36px;
  width: auto;
  font-size: 14px;
  line-height: 18px;
  color: #505050;
  border: 1px solid #e5e5ec;
  padding: 8px 16px;
  border-radius: 6px;
  margin-right: 8px;
}

.swiper_menu.round .swiper-slide {
  border-radius: 50rem;
  margin-right: 6px;
}

.swiper_menu .swiper-slide:last-child {
  margin-right: 16px;
}

.swiper_menu .swiper-slide.blue {
  padding: 9px 12px;
  border-color: #e8f5ff;
  background-color: #e8f5ff;
  color: #268bff;
  font-weight: 500;
}

.swiper_menu.round .swiper-slide.active {
  border: 1px solid #00d9d5;
  background-color: #e6fcfb;
  color: #00b4b0;
  font-weight: 500;
}

.swiper_input .swiper-slide {
  width: auto;
  margin-right: 12px;
}

/* swiper_card 마이페이지 커뮤니티 */
.swiper_card.my_commu_card {
  margin-left: 16px;
}

.swiper_card.my_commu_card .swiper-slide {
  border: 1px solid #e5e5ec;
  border-radius: 8px;
  padding: 18px 16px;
  width: 320px;
  margin-right: 12px;
  height: auto;
}

.swiper_card.my_commu_card .swiper-slide:last-child {
  margin-right: 16px;
}

.swiper_card.my_commu_card .swiper-slide .rating {
  font-size: 18px;
  font-weight: 600;
  padding-left: 20px;
}

.swiper_card.my_commu_card .swiper-slide .rating::after {
  width: 20px;
  height: 20px;
  top: 41%;
}

.swiper_card.my_commu_card .swiper-slide .desc {
  margin-top: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 20px;
  color: #4f4f4f;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.swiper_card.my_commu_card .swiper-slide .community_icon_box .ago {
  font-size: 13px;
  color: #767676;
  margin-left: auto;
}

/* -------------------------------------------------------------------------- */
/*                                   캘린더 커스텀                               */
/* -------------------------------------------------------------------------- */
.calendar .fc .fc-toolbar.fc-header-toolbar {
  max-width: 290px;
  width: 100%;
  margin: 20px auto 0;
  padding-bottom: 24px;
}

.calendar .fc .fc-button-primary {
  background-color: transparent;
  border: none;
  padding: 0;
  width: 24px;
  height: 24px;
}

.calendar .fc .fc-button .fc-icon {
  width: 100%;
  height: 100%;
}

.calendar .fc .fc-button .fc-icon.fc-icon-chevron-left {
  background-image: url("../assets/image/icon/i_cal_left.svg");
}

.calendar .fc .fc-button .fc-icon.fc-icon-chevron-right {
  margin-right: 32px;
  background-image: url("../assets/image/icon/i_cal_right.svg");
}

.calendar .fc .fc-button .fc-icon::before {
  display: none;
}

.calendar .fc .fc-toolbar-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: #111;
}

.calendar .fc .fc-view-harness {
  border-top: 1px solid #f1f1f5;
}

.calendar .fc-theme-standard td,
.calendar .fc-theme-standard th,
.calendar .fc-theme-standard .fc-scrollgrid {
  border: none;
}

.calendar .fc-theme-standard th.fc-day a {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #111;
  margin-top: 8px;
  margin-bottom: 4px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.calendar .fc-theme-standard th.fc-day-sun a {
  color: #f83434;
}

.calendar .fc .fc-daygrid-day-number {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #111;
}

.calendar .fc .fc-daygrid-day-frame .fc-daygrid-day-top {
  height: 42px;
  margin: 4px 0;
  justify-content: center;
  align-items: center;
}

.calendar .fc .fc-daygrid-day-frame .fc-daygrid-day-events {
  display: none;
  border-radius: 20px 0 0 20px;
  border-radius: 0 20px 20px 0;
}

.calendar .fc-daygrid-day.selected .fc-daygrid-day-top {
  background-color: rgba(0, 217, 213, 0.2) !important;
  /* 기본 선택 배경 */
}

.calendar .fc-daygrid-day.start .fc-daygrid-day-top {
  background-color: rgba(0, 217, 213, 0.2) !important;
  border-radius: 50rem 0 0 50rem;
}

.calendar .fc-daygrid-day.end .fc-daygrid-day-top {
  background-color: rgba(0, 217, 213, 0.2) !important;
  border-radius: 0 50rem 50rem 0;
}

.calendar .fc .fc-day-other .fc-daygrid-day-top {
  color: #999999;
  opacity: 1;
}

.calendar .fc .fc-daygrid-day.fc-day-today {
  background-color: transparent;
}

.calendar .fc .fc-day-other .fc-daygrid-day-top a {
  color: #999999;
  opacity: 1;
}
.fc .fc-daygrid-day-bg .fc-highlight{
  z-index: 99;
}

.calendar .fc-daygrid-day.single-day .fc-daygrid-day-top {
  background-color: rgba(0, 217, 213, 0.2) !important;
  border-radius: 50rem 50rem;
}

/* -------------------------------------------------------------------------- */
/*                                     로그인                                   */
/* -------------------------------------------------------------------------- */
.container_wrap.login .logo {
  padding-top: 40px;
  padding-bottom: 28px;
}

.container_wrap.login .logo img {
  margin: 0 auto;
}

.container_wrap.login .form_wrap {
  padding: 28px 0 20px;
}

.container_wrap.login .option_link {
  padding: 20px 0 28px;
  display: flex;
  justify-content: space-between;
}

.container_wrap.login .option_link .find {
  display: flex;
}

.container_wrap.login .option_link .find a {
  display: block;
  font-size: 14px;
  color: #767676;
  padding: 0 6px;
  position: relative;
}

.container_wrap.login .option_link .find a::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: #999999;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.container_wrap.login .option_link .find li:last-child a::before {
  display: none;
}

.container_wrap.login .social_wrap {
  padding-top: 48px;
  padding-bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.container_wrap.login .social_wrap > li {
  position: relative;
}

.container_wrap.login .login_desc {
  text-align: center;
  transform: translateY(-60px);
}

/* -------------------------------------------------------------------------- */
/*                      아이디 찾기, 비밀번호 찾기, 비밀번호 재설정                     */
/* -------------------------------------------------------------------------- */
.container_wrap.find_id .page_title {
  padding-bottom: 20px;
}

.container_wrap.find_id .btn_box {
  margin-top: 20px;
  padding-bottom: 4px;
}

.container_wrap.find_id .form_wrap {
  gap: 12px;
}

/* -------------------------------------------------------------------------- */
/*                                 아이디 찾기 완료                               */
/* -------------------------------------------------------------------------- */

.container_wrap.find_id_finsh .result_box {
  background-color: #f7f7fb;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
}

.container_wrap.find_id_finsh .result_box.sns {
  gap: 10px;
}

.container_wrap.find_id_finsh .result_box .tit {
  color: #767676;
  font-size: 14px;
}

.container_wrap.find_id_finsh .result_box .icon {
  display: block;
  width: 32px;
  height: 32px;
}

.container_wrap.find_id_finsh .result_box .icon img {
  width: 100%;
}

.container_wrap.find_id_finsh .result_box .result {
  font-size: 16px;
}

.container_wrap.find_id_finsh .page_title {
  padding-top: 128px;
  padding-bottom: 20px;
}

.container_wrap.find_id_finsh {
  padding-bottom: 128px;
}

/* -------------------------------------------------------------------------- */
/*                                비밀번호 찾기 완료                              */
/* -------------------------------------------------------------------------- */
.container_wrap.find_pw_finsh .inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: calc(100dvh - 132px);
}

.container_wrap.find_pw_finsh .page_title {
  padding-top: 12px;
}
.container_wrap.find_pw_finsh .img {
  width: 68px;
}
/* -------------------------------------------------------------------------- */
/*                                 이메일로 가입하기                              */
/* -------------------------------------------------------------------------- */
/* .step01 본인 인증 */
.container_wrap.join.step01 {
  overflow: hidden;
}

.container_wrap.join.step01 .page_title {
  padding-top: 62px;
  padding-bottom: 75px;
}

.container_wrap.join.step01 .content {
  background-image: url("../assets/image/phone.png");
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.container_wrap.join.step01 .content .notification {
  position: absolute;
  top: 47%;
  left: 16px;
  right: 16px;
  display: flex;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(150px);
  border-radius: 12px;
  padding: 14px;
  gap: 10px;
}
.container_wrap.join.step01 .content .notification .img {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 9px;
  overflow: hidden;
}
.container_wrap.join.step01 .content .notification .text_box {
  width: 100%;
}
.container_wrap.join.step01 .content .notification .name {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container_wrap.join.step01 .content .notification .name .ago {
  color: #7f7f7f80;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}

.container_wrap.join.step01 .content .notification .desc {
  font-size: 14px;
  line-height: 20px;
}
.container_wrap.join.step01 .bottom_text {
  padding-top: 24px;
  height: 94px;
  bottom: 40px;
}

/* .step02 약관 동의 */
.container_wrap.join.step02 .form_wrap.all {
  padding-top: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f1f5;
}

.container_wrap.join.step02 .form_wrap.agree_list {
  padding-top: 20px;
  gap: 20px;
}

.container_wrap.join.step02 .form_wrap.agree_list .input_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container_wrap.join.step02 .form_wrap.agree_list .marketing_agree_box {
  visibility: hidden;
  background-color: #f7f7fb;
  padding: 16px 24px;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}
.container_wrap.join.step02 .form_wrap.agree_list .marketing_agree_box > label {
  margin-bottom: 4px;
}
.container_wrap.join.step02
  .form_wrap.agree_list
  .marketing_agree_box
  > label:last-child {
  margin-bottom: 0;
}
.container_wrap.join.step02 .form_wrap.agree_list .marketing_agree_box.on {
  visibility: visible;
}

/* .step03 가입 계정 안내 */
.container_wrap.join.step03 .page_title {
  padding-top: 143px;
}

.container_wrap.join.step03 .result_box {
  margin-top: 20px;
  background-color: #f7f7fb;
  padding: 34px 20px;
  border-radius: 6px;
}

.container_wrap.join.step03 .result_box .inner {
  padding: 12px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
}

.container_wrap.join.step03 .result_box .inner .info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.container_wrap.join.step03 .result_box .inner .info .icon {
  display: block;
  width: 28px;
}

.container_wrap.join.step03 .desc {
  color: #505050;
  font-size: 14px;
  padding-top: 20px;
  text-align: center;
}

/* .step04 이메일 가입 폼 */
.container_wrap.join.step04 .form_wrap {
  padding: 32px 0;
}

/* .step06 수강생 정보 추가 */
.container_wrap.join.step06 {
  padding-bottom: 32px;
}

.student_list {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.student_list .item {
  width: 100%;
  padding: 20px 20px 10px;
  min-height: 160px;
  border: 1px solid #e5e5ec;
  border-radius: 12px;
  position: relative;
}

.student_list .item.add_item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #505050;
  padding: 20px;
}

.student_list .item .menu_btn {
  width: 24px;
  height: 24px;
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20px;
  right: 18px;
}

.student_list .item .menu_btn > span {
  width: 3px;
  height: 3px;
  background-color: #999;
  border-radius: 50rem;
  display: block;
}

.student_list .item .name {
  font-weight: 700;
  font-size: 18px;
  padding-bottom: 12px;
}

.student_list .item .option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}

.student_list .item .option .tit {
  font-size: 14px;
  color: #505050;
}

.student_list .item .option .sel_list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.student_list .item .option .sel_list > li {
  background-color: rgba(0, 217, 213, 0.1);
  color: #00c5c1;
  border-radius: 4px;
  padding: 6px 8px;
}
/* -------------------------------------------------------------------------- */
/*                                  선생님 회원가입                               */
/* -------------------------------------------------------------------------- */
.container_wrap.itt_join .form_wrap {
  gap: 32px;
  padding-bottom: 36px;
}
.container_wrap.itt_join .legend {
  gap: 8px;
}
.container_wrap.itt_join .legend > .input_box {
  width: calc(50% - 4px);
}
.container_wrap.itt_join .legend > .input_box .text_radio {
  height: 52px;
  padding: 14px 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #999999;
}
.container_wrap.itt_join
  .legend
  > .input_box
  .text_radio:has(input[type="radio"]:checked),
.container_wrap.itt_join
  .legend
  > .input_box
  .text_radio:has(input[type="checkbox"]:checked) {
  color: #00c5c1;
}
.container_wrap.itt_join .form_wrap .file_input_box {
  margin-top: 8px;
}
.container_wrap.itt_join .dot_notice_list {
  margin-top: 8px;
}
.container_wrap.itt_join .file_upload_list {
  margin-top: 16px;
}
.container_wrap.itt_join.step06 .label {
  margin-bottom: 16px;
}
.container_wrap.itt_join.step06 .form_wrap {
  gap: 28px;
}
.container_wrap.itt_join.wait .page_title_box {
  padding-top: 28px;
  margin-bottom: 20px;
}
.container_wrap.itt_join.wait .page_title_box .state {
  color: #00c5c1;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  background-color: #00d9d51a;
  width: 67px;
  height: 28px;
  padding: 4px;
  border-radius: 4px;
  text-align: center;
}
.container_wrap.itt_join.wait .page_title_box.reject {
  margin-bottom: 16px;
  font-weight: 500;
}
.container_wrap.itt_join.wait .page_title_box.reject .state {
  background-color: #f834341a;
  color: #f83434;
}
.container_wrap.itt_join.wait .page_title_box .gradient_txt {
  margin-top: 12px;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  background: linear-gradient(235deg, #00fffa 8.62%, #0082d2 130.66%);
  background-clip: text;
  -webkit-background-clip: text;
}
.container_wrap.itt_join.wait .page_title_box.reject .gradient_txt {
  background: none;
  color: #111;
}
.container_wrap.itt_join.wait .page_title_box.reject .desc_box {
  margin-top: 16px;
  padding: 16px;
  background-color: #ffebeb80;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
}
.container_wrap.itt_join.wait .page_title_box.reject .desc_box .tit {
  color: #f83434;
  font-weight: 600;
  margin-bottom: 4px;
}
.container_wrap.itt_join.wait .page_title_box.reject .desc_box .txt {
  color: #505050;
  font-weight: 400;
}

.container_wrap.itt_join.wait .sect {
  border: 1px solid #e5e5ec;
  border-radius: 8px;
  padding: 20px;
}
.container_wrap.itt_join.wait .sect.color {
  border-color: #00d9d5;
  margin-bottom: 16px;
}
.container_wrap.itt_join.wait .sect .box_tit {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 12px;
}
.container_wrap.itt_join.wait .sect .text_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container_wrap.itt_join.wait .sect .text_list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  line-height: 22px;
}
.container_wrap.itt_join.wait .sect .text_list .item .tit {
  color: #505050;
}
.container_wrap.itt_join.wait .sect .img_list {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.container_wrap.itt_join.wait .sect .img_list > p {
  width: 74px;
  height: 74px;
  border-radius: 4px;
  background-color: #f7f7fb;
}
.container_wrap.itt_join.wait .sect.list .box {
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f1f5;
  margin-bottom: 16px;
}
.container_wrap.itt_join.wait .sect.list .box:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.container_wrap.itt_join.wait .red_txt {
  margin: 32px auto 30px;
}
/* join_finsh 가입완료 */
.container_wrap.join.join_finsh .chk_icon {
  margin: 59px auto 10px;
  display: block;
}

.container_wrap.join.join_finsh .chk_icon > img {
  margin: 0 auto;
}

.container_wrap.join.join_finsh .page_title {
  font-size: 22px;
  line-height: 32px;
  padding: 0;
}

.container_wrap.join.join_finsh .img {
  aspect-ratio: 256.33/301.56;
  width: 100%;
  max-width: 256.33px;
  margin: 54px auto 0;
}
.container_wrap.join.join_finsh.itt .img {
  aspect-ratio: 250/244;
  max-width: 250px;
  margin: 44px auto 0;
}

.container_wrap.join.join_finsh .img > img {
  width: 100%;
}
.container_wrap.join.join_finsh .bottom_text {
  color: #505050;
  height: 20px;
}

/* join_error 오류발생 */
.container_wrap.join.join_error .global_inner {
  height: 100%;
}

.container_wrap.join.join_error .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container_wrap.join.join_error .img {
  aspect-ratio: 187/98.42;
  width: 100%;
  max-width: 187px;
}

.container_wrap.join.join_error .img > img {
  width: 100%;
}

.container_wrap.join.join_error .page_title {
  font-size: 16px;
  font-weight: 600;
  padding-top: 20px;
}

/* -------------------------------------------------------------------------- */
/*                                   홈화면(Home)                               */
/* -------------------------------------------------------------------------- */
/* main_visual_sec*/
.container_wrap.home .main_visual_swiper .swiper-slide figure {
  aspect-ratio: 375/227;
  overflow: hidden;
  width: 100%;
}

.container_wrap.home .main_visual_swiper .swiper-pagination {
  background-color: rgba(0, 0, 0, 0.6);
  width: 38px;
  height: 22px;
  border-radius: 50rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  right: 16px;
  bottom: 16px;
  left: auto;
  font-size: 14px;
  padding: 5px 0;
}
.container_wrap.home .main_visual_swiper .swiper-pagination > span {
  line-height: 1;
  display: block;
}

.container_wrap.home
  .main_visual_swiper
  .swiper-pagination
  .swiper-pagination-current {
  color: #fff;
}

/* dashboard_sec */
.container_wrap.home .dashboard_sec {
  padding: 6px 0 26px;
  background-color: #f7f7fb;
}
.container_wrap.home .dashboard_sec .widget_list {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.container_wrap.home .dashboard_sec .widget_list .widget {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 16px 5px;
}
.container_wrap.home .dashboard_sec .widget_list .widget .icon {
  margin-bottom: 6px;
}
.container_wrap.home .dashboard_sec .widget_list .widget .tit {
  text-align: center;
  font-size: 12px;
  color: #767676;
  margin-bottom: 6px;
  line-height: 18px;
}
.container_wrap.home .dashboard_sec .widget_list .widget .count {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.container_wrap.home .dashboard_sec .total_list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.container_wrap.home .dashboard_sec .total_list .item {
  background-color: #fff;
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
}
.container_wrap.home .dashboard_sec .total_list .item .title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}
.container_wrap.home .dashboard_sec .total_list .item .total {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
/* subject_sec */
.container_wrap.home .subject_sec {
  padding: 32px 0 36px;
}

.container_wrap.home .subject_sec .menu_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.container_wrap.home .subject_sec .menu_list li {
  width: 100%;
}

.container_wrap.home .subject_sec .menu_list li > a {
  padding: 0 7px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.container_wrap.home .subject_sec .menu_list li > a .subject {
  font-size: 13px;
  font-weight: 500;
}

.container_wrap.home .subject_sec .menu_list li a > i {
  display: block;
  aspect-ratio: 1/1;
  width: 100%;
  background-size: 100%;
  border-radius: 12px;
}

.container_wrap.home .subject_sec .menu_list .icon_math {
  background-image: url("../assets/image/icon/i_math.svg");
}

.container_wrap.home .subject_sec .menu_list .icon_eng {
  background-image: url("../assets/image/icon/i_eng.svg");
}

.container_wrap.home .subject_sec .menu_list .icon_essay {
  background-image: url("../assets/image/icon/i_essay.svg");
}

.container_wrap.home .subject_sec .menu_list .icon_sing {
  background-image: url("../assets/image/icon/i_sing.svg");
}

.container_wrap.home .subject_sec .menu_list .icon_act {
  background-image: url("../assets/image/icon/i_active.svg");
}

/* tab_list_sec */
.container_wrap.home .tab_list_sec {
  padding-bottom: 50px;
}

/* sub_banner_sec */
.container_wrap.home .sub_banner_sec .sub_visual_swiper .swiper-pagination {
  top: 8px;
  right: 8px;
  left: auto;
  bottom: auto;
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.container_wrap.home
  .sub_banner_sec
  .sub_visual_swiper
  .swiper-pagination
  .swiper-pagination-bullet {
  margin: 0;
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
  width: 6px;
  height: 6px;
}

.container_wrap.home
  .sub_banner_sec
  .sub_visual_swiper
  .swiper-pagination
  .swiper-pagination-bullet-active {
  background-color: rgba(255, 255, 255, 1);
}

.container_wrap.home .sub_banner_sec .sub_visual_swiper .swiper-slide figure {
  aspect-ratio: 375/92;
  overflow: hidden;
}

/* recommend_sec */
.container_wrap.home .recommend_sec {
  padding-top: 18px;
  padding-bottom: 36px;
}

/* best_sec */
.container_wrap.home .best_sec {
  background: linear-gradient(
    98.8deg,
    rgba(142, 197, 252, 0.5) -9.63%,
    rgba(224, 195, 252, 0.5) 95.31%
  );
  padding-bottom: 55.44px;
}

.container_wrap.home .best_sec .section_title {
  padding: 25px 16px 20px;
}

.container_wrap.home .best_sec .section_title > h4 {
  font-weight: 600;
}

.container_wrap.home .best_sec .best_sec_swiper {
  margin-left: 16px;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide {
  background-color: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 37px;
  padding-bottom: 20px;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 36.54px;
  height: 20.56px;
  background-image: url("../assets/image/icon/i_king.svg");
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide .icon_bookmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide figure {
  width: 80px;
  height: 80px;
  border-radius: 50rem;
  overflow: hidden;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide .txt_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide .badge_list {
  padding-top: 15px;
  padding-bottom: 10px;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide .name {
  font-size: 16px;
  font-weight: 600;
  color: #131214;
  text-align: center;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide .info {
  padding-bottom: 6px;
  color: #505050;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide .rating {
  padding-left: 20px;
  font-size: 18px;
}

.container_wrap.home .best_sec .best_sec_swiper .swiper-slide .rating::after {
  width: 20px;
  height: 20px;
}

/* review_sec */
.container_wrap.home .review_sec {
  padding-top: 24px;
  padding-bottom: 36px;
}

.container_wrap.home .review_sec .section_title > h4 {
  font-weight: 600;
}

.container_wrap.home .review_sec .sub_title {
  font-size: 20px;
  font-weight: 600;
  padding-top: 8px;
  padding-bottom: 20px;
}
.container_wrap.home .review_sec .sub_title .gradient_txt {
  font-weight: 700;
}

/* 추천! 마감 입박 수업 페이지 */
.container_wrap.recommend_class .visual_sec figure {
  aspect-ratio: 375/200;
  width: 100%;
}

.container_wrap.recommend_class .recommend_list_sec .list_type {
  padding-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.container_wrap.recommend_class .recommend_list_sec .list_type > span {
  font-size: 13px;
  line-height: 15.51px;
  font-weight: 600;
  color: #505050;
  border: 1px solid #e5e5ec;
  border-radius: 5px;
  padding: 4px 6px;
  height: 24px;
}

.container_wrap.recommend_class .recommend_list_sec .subject_list {
  padding-top: 24px;
  padding-bottom: 36px;
}

/* -------------------------------------------------------------------------- */
/*                                   클래스 class                              */
/* -------------------------------------------------------------------------- */
.container_wrap.class .option_sec {
  border-bottom: 1px solid #f1f1f5;
}

.container_wrap.class .option_sec .subject_btn {
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 3px;
  width: 90px;
}

.container_wrap.class .option_sec .subject_btn > span {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.container_wrap.class .option_list_sec {
  padding-bottom: 16px;
}

.container_wrap.class .list_sec .search_result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 68px;
}

.container_wrap.class .list_sec .search_result > .desc {
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
}

.container_wrap.class .list_sec .search_result > .sort_box > option {
  font-size: 14px;
  line-height: 18px;
  color: #111;
  text-align: right;
}

.container_wrap.class .list_sec .subject_list {
  padding-top: 12px;
  padding-bottom: 32px;
}

.container_wrap.class .list_sec .teacher_list {
  padding-top: 12px;
  padding-bottom: 85px;
}

.container_wrap.class ~ .bottom_sheet .bottom_sheet_header {
  height: 50px;
}

/* 클래스 메뉴 내에 서브 카테고리 페이지 */
.container_wrap.sub_catecory > .fixed_desc {
  width: 100%;
  border-bottom: 1px solid #f1f1f5;
  color: #111111;
  font-size: 13px;
  line-height: 18px;
  height: 38px;
  padding: 10px 16px;
  text-align: right;
  position: absolute;
  top: 56px;
  background-color: #fff;
  z-index: 1;
}

/* -------------------------------------------------------------------------- */
/*                  클래스 관리 class_setting_itt.html                           */
/* -------------------------------------------------------------------------- */
.container_wrap.class_itt .tab_menu.sub_p {
  position: sticky;
  top: 0;
}
.container_wrap.class_itt .search_result {
  border-bottom: 1px solid #f1f1f5;
  height: 76px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container_wrap.class_itt .search_result.h_66 {
  height: 66px;
  border-bottom: none;
}
.container_wrap.class_itt .search_result.h_72 {
  height: 72px;
  border-bottom: none;
}
.container_wrap.class_itt .search_result.border {
  border-top: 1px solid #f1f1f5;
  border-bottom: 1px solid #f1f1f5;
  background-color: #fff;
}
.container_wrap.class_itt .search_result.sticky {
  position: sticky;
  top: 48px;
  z-index: 2;
}
.container_wrap.class_itt .search_result > .desc {
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
}
.container_wrap.class_itt .search_result.h_66 > .desc {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.container_wrap.class_itt .search_result .page_menu {
  display: flex;
  gap: 6px;
}
.container_wrap.class_itt .search_result .page_menu .swiper-slide {
  margin-right: 0;
  display: flex !important;
  gap: 2px;
  align-items: center;
  padding: 9px 16px;
}
.container_wrap.class_itt .search_result .page_menu .swiper-slide i {
  width: 14px;
  height: 14px;
}
.container_wrap.class_itt .subject_list_itt {
  padding-bottom: 12px;
}

.container_wrap.class_itt .state_panel {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 25px;
}
.container_wrap.class_itt .state_panel > .card {
  width: calc(50% - 6px);
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid #e5e5ec;
  border-radius: 6px;
}
.container_wrap.class_itt .state_panel > .card .tit {
  font-size: 13px;
  line-height: 18px;
  color: #505050;
}
.container_wrap.class_itt .state_panel > .card .count {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.container_wrap.class_itt .state_panel > .card .date {
  font-size: 11px;
  line-height: 16px;
  color: #898d8f;
}

.container_wrap.class_itt .total_sales_list_sec {
  background-color: #f7f7fb;
  padding-top: 17px;
  padding-bottom: 36px;
}
.container_wrap.class_itt .total_sales_list_sec .sales_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.container_wrap.class_itt .total_sales_list_sec .sales_list > .card {
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
}
.container_wrap.class_itt .total_sales_list_sec .sales_list > .card > .tit {
  font-weight: 600;
  font-weight: 16px;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.container_wrap.class_itt .total_sales_list_sec .sales_list > .card .text_list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container_wrap.class_itt
  .total_sales_list_sec
  .sales_list
  > .card
  .text_list
  .list {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
}
.container_wrap.class_itt
  .total_sales_list_sec
  .sales_list
  > .card
  .text_list
  .list
  .tit {
  color: #767676;
}
.container_wrap.class_itt
  .total_sales_list_sec
  .sales_list
  > .card
  .text_list
  .list
  .txt.bold {
  font-weight: 600;
}
.container_wrap.class_itt
  .total_sales_list_sec
  .sales_list
  > .card
  .text_list
  .list
  .badge_list
  .item {
  height: 24px;
  padding: 4px 7px;
}
/* -------------------------------------------------------------------------- */
/*                    클래스 상세페이지(class_detail.html)                         */
/* -------------------------------------------------------------------------- */
.container_wrap.class_detail .line {
  background-color: #f7f7fb;
  height: 12px;
}

.container_wrap.class_detail .section h3 {
  padding-top: 36px;
  padding-bottom: 20px;
}

.container_wrap.class_detail .thumbnail_sec > figure {
  aspect-ratio: 375/240;
  width: 100%;
  overflow: hidden;
}

.container_wrap.class_detail .tab_bar_sec {
  position: sticky;
  top: 0;
  z-index: 1;
}

.container_wrap.class_detail .tab_bar_sec .tab_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  background-color: #fff;
  padding: 0 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid #f1f1f5;
  margin-bottom: 8px;
}

.container_wrap.class_detail .tab_bar .item {
  color: #999999;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 0 10px;
}

.container_wrap.class_detail .tab_bar .item.on {
  color: #111;
  font-weight: 500;
  border-bottom: 2px solid #111;
}

.container_wrap.class_detail .text_info_sec .class_name {
  margin-top: 32px;
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.container_wrap.class_detail .text_info_sec .info_list {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background-color: #f7f7fb;
  border-radius: 6px;
  gap: 10px;
}

.container_wrap.class_detail .text_info_sec .item {
  display: flex;
  gap: 42px;
  align-items: center;
  font-size: 14px;
  color: #767676;
  line-height: 20px;
}

.container_wrap.class_detail .text_info_sec .item .tit {
  width: 55px;
  min-width: 55px;
}

.container_wrap.class_detail .text_info_sec .item .txt {
  line-height: 20px;
  color: #111;
}

.container_wrap.class_detail .text_info_sec .item .txt.red {
  color: #ff2929;
  font-size: 15px;
}

.container_wrap.class_detail .text_info_sec .item .txt.rating {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  padding-left: 21px;
}

.container_wrap.class_detail .text_info_sec .item .txt.rating::after {
  width: 20px;
  height: 20px;
  /*top: 37%;*/
}

.container_wrap.class_detail .image_info_sec {
  padding-bottom: 36px;
}

.container_wrap.class_detail .image_info_sec .content_wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.container_wrap.class_detail .image_info_sec .content_wrap .content {
  aspect-ratio: 1/1;
  width: 33.33%;
  border-radius: 6px;
}

.container_wrap.class_detail .detail_info_sec {
  padding-bottom: 36px;
}

.container_wrap.class_detail .detail_info_sec .detail_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.container_wrap.class_detail .detail_info_sec .detail_list .item {
  background-color: #e8f5ff;
  border-radius: 4px;
  width: calc(50% - 4px);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
}

.container_wrap.class_detail .detail_info_sec .detail_list .item > span {
  color: #268bff;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}

.container_wrap.class_detail .teacher_info_sec .profile_wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 36px;
}

.container_wrap.class_detail .teacher_info_sec .profile_box {
  width: 100px;
  height: 100px;
  border-radius: 50rem;
  overflow: hidden;
}

.container_wrap.class_detail .teacher_info_sec .txt_box .item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.container_wrap.class_detail .teacher_info_sec .txt_box {
  font-size: 15px;
  line-height: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.container_wrap.class_detail .teacher_info_sec .txt_box span:first-child {
  color: #767676;
  width: 26px;
}
.bottom_btn.flex {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.bottom_btn.flex .bookmark_btn {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 56px;
  min-width: 56px;
  height: 52px;
  border-radius: 6px;
  background-color: #f7f7fb;
  justify-content: center;
}

.bottom_btn.flex .bookmark_btn:has(.icon_bookmark.on) > span {
  color: #111;
}

.bottom_btn.flex .bookmark_btn > span {
  color: #999999;
  font-size: 12px;
}

/* -------------------------------------------------------------------------- */
/*                              수업 상세 관리 (선생님)                            */
/* -------------------------------------------------------------------------- */
.container_wrap.class_detail_itt .title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container_wrap.class_detail_itt .title_box h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}
.container_wrap.class_detail_itt .class_detail_sec {
  border-bottom: 1px solid #e5e5ec;
}
.container_wrap.class_detail_itt .class_detail_sec.border {
  border-bottom: 8px solid #f7f7fb;
}
.container_wrap.class_detail_itt .class_detail_sec.border .subject_item {
  padding: 24px 0 22px;
}
.container_wrap.class_detail_itt .subject_item .item_body {
  align-items: flex-start;
}
.container_wrap.class_detail_itt .subject_item {
  padding: 24px 0 28px;
}
.container_wrap.class_detail_itt .subject_item .item_body .title_box {
  display: block;
}
.container_wrap.class_detail_itt .subject_item .item_body .title_box .tit {
  -webkit-box-orient: initial;
}
.container_wrap.class_detail_itt .subject_item .item_body .price_box {
  margin-top: 4px;
}
.container_wrap.class_detail_itt .class_score_sec {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 16px;
  padding-right: 16px;
  height: 96px;
  border-bottom: 8px solid #f7f7fb;
}
.container_wrap.class_detail_itt .class_score_sec .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.container_wrap.class_detail_itt .class_score_sec .item .tit {
  font-size: 12px;
  line-height: 18px;
  color: #767676;
}
.container_wrap.class_detail_itt .class_score_sec .item .score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.container_wrap.class_detail_itt .class_score_sec .item .score .rating {
  padding-left: 24px;
  font-size: 18px;
}
.container_wrap.class_detail_itt .class_score_sec .item .score .rating::after {
  width: 20px;
  height: 20px;
  top: 44%;
}
.container_wrap.class_detail_itt .class_setting_menu_sec .menu_list {
  margin-top: 24px;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.container_wrap.class_detail_itt .class_setting_menu_sec .menu_item {
  padding: 14px 16px;
  border: 1px solid #f1f1f5;
  border-radius: 6px;
}
.container_wrap.class_detail_itt .class_setting_menu_sec .menu_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container_wrap.class_detail_itt .class_setting_menu_sec .menu_tit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 8px;
}
.container_wrap.class_detail_itt .class_setting_menu_sec .desc {
  font-size: 14px;
  line-height: 20px;
  color: #767676;
}
.container_wrap.class_detail_itt .class_state_sec {
  border-bottom: 8px solid #f7f7fb;
}
.container_wrap.class_detail_itt .class_state_sec .inner {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container_wrap.class_detail_itt .class_state_sec .state {
  display: flex;
  align-items: center;
  gap: 8px;
}
.container_wrap.class_detail_itt .class_state_sec .state .tit {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}
.container_wrap.class_detail_itt .class_state_sec .state .badge_list .item {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  padding: 4px 6px;
  height: 26px;
  border-radius: 4px;
}
.container_wrap.class_detail_itt .class_search_keyword_sec {
  padding: 20px 0;
}
.container_wrap.class_detail_itt .class_search_keyword_sec .title_box {
  padding-bottom: 16px;
}
.container_wrap.class_detail_itt .class_search_keyword_sec .label {
  font-size: 16px;
}

.container_wrap.class_detail_itt
  .class_search_keyword_sec
  .input_box
  .inner
  input {
  width: calc(100% - 80px);
}
.container_wrap.class_detail_itt
  .class_search_keyword_sec
  .input_box
  .inner
  button {
  min-width: 80px;
  max-width: 80px;
  font-size: 15px;
}

.container_wrap.class_detail_itt
  .class_search_keyword_sec
  .input_box
  .select_list
  > li {
  font-size: 14px;
}
.container_wrap.class_detail_itt .class_party_sec {
  padding-bottom: 36px;
}
.container_wrap.class_detail_itt .class_party_sec .title_box {
  padding: 24px 0 16px;
}
.container_wrap.class_detail_itt .class_party_sec .party_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.container_wrap.class_detail_itt .class_party_sec .party_list .card {
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.container_wrap.class_detail_itt .class_party_sec .party_list .card > div {
  display: flex;
  justify-content: space-between;
}
.container_wrap.class_detail_itt .class_party_sec .party_list .card .name {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
}
.container_wrap.class_detail_itt
  .class_party_sec
  .party_list
  .card
  .badge_list
  .item {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  padding: 4px 6px;
  height: 26px;
  border-radius: 4px;
}
.container_wrap.class_detail_itt .class_party_sec .party_list .card .count {
  color: #767676;
  font-size: 14px;
  line-height: 20px;
}
.container_wrap.class_detail_itt .class_party_sec .party_list .card .price {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.container_wrap.class_detail_itt .class_party_detail_sec {
  padding: 24px 0 22px;
  border-bottom: 8px solid #f7f7fb;
}
.container_wrap.class_detail_itt .class_party_detail_sec .info .state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.container_wrap.class_detail_itt .class_party_detail_sec .info .name {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}
.container_wrap.class_detail_itt
  .class_party_detail_sec
  .info
  .badge_list
  .item {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  padding: 4px 6px;
  height: 26px;
  border-radius: 4px;
}
.container_wrap.class_detail_itt .text_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.container_wrap.class_detail_itt .text_list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container_wrap.class_detail_itt .text_list.row .item {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.container_wrap.class_detail_itt .text_list .item .tit {
  font-size: 14px;
  line-height: 20px;
  color: #767676;
}
.container_wrap.class_detail_itt .text_list.t_15 .item .tit,
.container_wrap.class_detail_itt .text_list.t_15 .item .txt {
  font-size: 15px;
}
.container_wrap.class_detail_itt .text_list .item .txt {
  font-size: 14px;
  line-height: 20px;
}
.container_wrap.class_detail_itt .text_list .item .txt.red {
  color: #f83434;
}
.container_wrap.class_detail_itt .text_list.t_15 .item .txt.line_list > span {
  font-size: 15px;
}
.container_wrap.class_detail_itt .text_list .item .txt.bold {
  font-weight: 600;
}
.container_wrap.class_detail_itt .text_list .item .txt.b_500 {
  font-weight: 500;
}
.container_wrap.class_detail_itt .text_list .item .txt.b_700 {
  font-weight: 700;
}
.container_wrap.class_detail_itt .class_extend_list_sec {
  padding: 22px 0 36px;
}
.container_wrap.class_detail_itt .class_extend_list_sec .title_box {
  margin-bottom: 16px;
}
.container_wrap.class_detail_itt .class_extend_list_sec .extend_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.container_wrap.class_detail_itt .class_extend_list_sec .extend_list .card {
  background-color: #f7f7fb;
  border-radius: 6px;
  padding: 20px;
}
.container_wrap.class_detail_itt
  .class_extend_list_sec
  .extend_list
  .card
  .date {
  font-weight: 600;
  line-height: 22px;
  font-size: 15px;
  margin-bottom: 12px;
}
.container_wrap.class_detail_itt
  .class_extend_list_sec
  .extend_list
  .card
  button {
  margin-top: 16px;
  background-color: #fff;
  color: #505050;
  font-size: 15px;
  height: 48px;
  padding: 14px 10px;
}
.container_wrap.class_detail_itt .class_review_sec {
  padding: 22px 0 36px;
}
.container_wrap.class_detail_itt .class_review_sec .title_box {
  margin-bottom: 20px;
}

.container_wrap.class_detail_itt .class_review_sec .review_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.container_wrap.class_detail_itt .class_review_sec .review_list .card {
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  padding: 20px;
}

.container_wrap.class_detail_itt .class_review_sec .review_list .card .rating {
  font-size: 18px;
  padding-left: 20px;
}
.container_wrap.class_detail_itt
  .class_review_sec
  .review_list
  .card
  .rating::after {
  width: 20px;
  height: 20px;
  top: 47%;
}
.container_wrap.class_detail_itt .class_review_sec .review_list .card .desc {
  font-size: 14px;
  line-height: 20px;
  color: #4f4f4f;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 8px 0 20px;
}
.container_wrap.class_detail_itt
  .class_review_sec
  .review_list
  .card
  .dot_list
  > span {
  font-size: 14px;
}
.container_wrap.class_detail_itt
  .class_review_sec
  .review_list
  .card
  .dot_list
  > span:first-child {
  font-weight: 600;
  color: #111;
}
.container_wrap.class_detail_itt
  .class_review_sec
  .review_list
  .card
  .dot_list
  > span:last-child {
  color: #767676;
}
.container_wrap.class_detail_itt .class_sales_id {
  padding: 24px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 16px solid #f7f7fb;
}
.container_wrap.class_detail_itt .class_sales_id .id_box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.container_wrap.class_detail_itt .class_sales_id .id_box .tit {
  font-size: 14px;
  line-height: 20px;
  color: #6e7375;
}
.container_wrap.class_detail_itt .class_sales_id .id_box .num {
  color: #131214;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
.container_wrap.class_detail_itt .class_sales_id .badge_list .item {
  padding: 4px 7px;
  height: 24px;
}
.container_wrap.class_detail_itt .class_sales_info,
.container_wrap.class_detail_itt .class_sales_detail_sec {
  padding: 24px 0;
  border-bottom: 16px solid #f7f7fb;
}
.container_wrap.class_detail_itt .class_sales_detail_sec.last {
  border-bottom: none;
}
.container_wrap.class_detail_itt .class_sales_info .title_box,
.container_wrap.class_detail_itt .class_sales_detail_sec .title_box {
  margin-bottom: 16px;
}
.container_wrap.class_detail_itt .class_sales_info .title_box h4,
.container_wrap.class_detail_itt .class_sales_detail_sec .title_box h4 {
  font-size: 16px;
  line-height: 24px;
}
.container_wrap.class_detail_itt .class_sales_info .text_list,
.container_wrap.class_detail_itt .class_sales_detail_sec .text_list {
  gap: 16px;
}
.container_wrap.class_detail_itt .class_sales_detail_sec .text_list .item.line {
  width: 100%;
  height: 1px;
  background-color: #f1f1f5;
  margin: 4px 0;
}
/* -------------------------------------------------------------------------- */
/*                    선생님 상세페이지(teacher_detail.html)                      */
/* -------------------------------------------------------------------------- */
.container_wrap.teacher_detail .profile_info_sec {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 2;
}

.container_wrap.teacher_detail .profile_info_sec .profile_wrap {
  background-color: rgba(247, 247, 251, 1);
  border-radius: 8px;
  padding: 16px;
}

.container_wrap.teacher_detail .profile_info_sec .profile_card {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 20px;
}

.container_wrap.teacher_detail .profile_info_sec .profile_card > figure {
  position: relative;
  aspect-ratio: 133 / 156;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  width: 133px;
  min-width: 133px;
}

.container_wrap.teacher_detail
  .profile_info_sec
  .profile_card
  > figure
  .icon_bookmark {
  position: absolute;
  z-index: 1;
  top: 7px;
  right: 5px;
}

.container_wrap.teacher_detail .profile_info_sec .profile_card > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container_wrap.teacher_detail .profile_info_sec .profile_card .text_box .name {
  color: #000;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  padding-bottom: 12px;
}

.container_wrap.teacher_detail
  .profile_info_sec
  .profile_card
  .text_box
  .text_list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.container_wrap.teacher_detail
  .profile_info_sec
  .profile_card
  .text_box
  .text_list
  .item {
  display: flex;
  align-items: ceter;
  font-size: 13px;
  line-height: 18px;
  gap: 16px;
  word-break: keep-all;
}

.container_wrap.teacher_detail
  .profile_info_sec
  .profile_card
  .text_box
  .text_list
  .item
  .type {
  width: 23px;
  min-width: 23px;
  color: #767676;
}

.container_wrap.teacher_detail .profile_info_sec .profile_wrap button {
  height: 48px;
}

.container_wrap.teacher_detail .profile_info_sec .total_class {
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
  margin: 18px 0 13px;
}

.container_wrap.teacher_detail .profile_info_sec .total_class > span {
  color: #00d9d5;
}

.container_wrap.teacher_detail .class_list_sec {
  padding: 4px 0 36px;
}

/* -------------------------------------------------------------------------- */
/*                         찜 리스트 (bookmark_list.html)                       */
/* -------------------------------------------------------------------------- */
.container_wrap.bookmark_list .tab_menu {
  position: sticky;
  top: 0;
}

.container_wrap.bookmark_list .search_result {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  padding: 24px 0 20px;
}

.container_wrap.bookmark_list .search_result > span {
  color: #00d9d5;
}

.container_wrap.bookmark_list .tab_content {
  padding-bottom: 36px;
}

/* -------------------------------------------------------------------------- */
/*                     커뮤니티 리스트 (community_list.html)                      */
/* -------------------------------------------------------------------------- */
.container_wrap.community_list {
  padding-bottom: 36px;
}
.container_wrap.community_list .category_sec {
  position: sticky;
  top: 0;
  background-color: #fff;
}
.container_wrap.community_list .category_sec .swiper-wrapper {
  padding: 6px 0;
}

.container_wrap.community_list .commu_list {
  display: none;
}
.container_wrap.community_list .commu_list.on {
  display: block;
}
.container_wrap.community_list .comment_list {
  padding: 22px 4px 0;
  gap: 24px;
}
.container_wrap.community_list h3 {
  margin-top: 24px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  color: #111;
}
/* -------------------------------------------------------------------------- */
/*                          댓글창 (comment_list.html)                          */
/* -------------------------------------------------------------------------- */
.container_wrap.comment {
  padding: 32px 0;
}

/* -------------------------------------------------------------------------- */
/*                          커뮤니티 글작성 (comment_list.html)                   */
/* -------------------------------------------------------------------------- */
.container_wrap.community_edit {
  padding-top: 16px;
  padding-bottom: 26px;
}

.container_wrap.community_edit h3,
.container_wrap.community_edit .label {
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 16px;
  color: #111;
}

.container_wrap.community_edit .edit_type_sec {
  margin-bottom: 20px;
}

.container_wrap.community_edit .label .desc {
  font-weight: 400;
}

.container_wrap.community_edit .form_wrap {
  gap: 24px;
}

.container_wrap.community_edit.ques .form_wrap {
  gap: 26px;
}

.container_wrap.community_edit.req .form_wrap {
  gap: 28px;
}

.container_wrap.community_edit .form_wrap .textarea_wrap {
  height: 258px;
}

.container_wrap.community_edit .legend {
  gap: 8px;
  display: flex;
}

.container_wrap.community_edit .legend .input_box {
  width: calc(50% - 4px);
}

.container_wrap.community_edit.ques .input_box .textarea_wrap.h_100,
.container_wrap.community_edit.req .input_box .textarea_wrap.h_100 {
  height: 102px;
}

.container_wrap.community_edit.req .input_box .textarea_wrap.h_200 {
  height: 200px;
}

/* -------------------------------------------------------------------------- */
/*                             마이페이지 (mypage.html)                          */
/* -------------------------------------------------------------------------- */
.container_wrap.mypage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.container_wrap.mypage .unreading {
  position: relative;
}

.container_wrap.mypage .unreading::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  right: -5px;
  border-radius: 50rem;
  background-color: #ff2d55;
}

.container_wrap.mypage .my_profile_sec {
  padding: 12px 0;
}

.container_wrap.mypage .my_profile_sec .global_inner,
.container_wrap.mypage .my_profile_itt_sec .global_inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.container_wrap.mypage .my_profile_sec .image,
.container_wrap.mypage .my_profile_itt_sec .image {
  width: 48px;
  height: 48px;
  border-radius: 50rem;
  overflow: hidden;
}
.container_wrap.mypage .my_profile_itt_sec .image {
  width: 56px;
  height: 56px;
}

.container_wrap.mypage .my_profile_sec .txt,
.container_wrap.mypage .my_profile_itt_sec .info_box .name {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}
.container_wrap.mypage .my_profile_itt_sec {
  height: 80px;
  padding: 12px 0;
}
.container_wrap.mypage .my_profile_itt_sec .info_box .line_list {
  margin-top: 4px;
}
.container_wrap.mypage .my_profile_itt_sec .info_box .line_list > span {
  color: #767676;
  font-size: 14px;
  line-height: 20px;
}

.container_wrap.mypage .title_area {
  padding: 24px 0 16px;
  height: 66px;
}

.container_wrap.mypage .title_area .global_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container_wrap.mypage .title_area h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.container_wrap.mypage .title_area .more {
  color: #505050;
  font-size: 13px;
}

.container_wrap.mypage .my_community_sec {
  border-bottom: 8px solid #f7f7fb;
}

.container_wrap.mypage .my_commu_card_swiper {
  padding: 24px 0;
}

.container_wrap.mypage .my_score_sec {
  border-bottom: 8px solid #f7f7fb;
}

.container_wrap.mypage .my_score_sec .score_list {
  margin-top: 10px;
  display: flex;
  align-items: center;
  padding-bottom: 24px;
  gap: 12px;
}
.container_wrap.mypage .my_score_sec .score_list .card {
  background-color: #f7f7fb;
  border: 1px solid #e5e5ec;
  border-radius: 8px;
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.container_wrap.mypage .my_score_sec .score_list .card .tit {
  font-size: 14px;
  line-height: 20px;
  color: #767676;
}
.container_wrap.mypage .my_score_sec .score_list .card .txt,
.container_wrap.mypage .my_score_sec .score_list .card .txt .rating {
  font-weight: 600;
  line-height: 28px;
  font-size: 20px;
}
.container_wrap.mypage .my_score_sec .score_list .card .txt .rating::after {
  width: 20px;
  height: 20px;
  top: 49%;
}
.container_wrap.mypage .my_score_sec .score_list .card .txt .rating {
  padding-left: 24px;
}

.container_wrap.mypage .mypage_menu_sec {
  padding: 16px 0 48px;
}

.container_wrap.mypage .mypage_menu_sec .menu_list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  height: 52px;
  font-size: 16px;
  line-height: 24px;
}
.container_wrap.mypage .mypage_menu_sec .menu_list .item .tit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.container_wrap.mypage .mypage_menu_sec .menu_list .item .alarm_badge {
  background-color: #ffe2e8;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  color: #fc2d57;
  border-radius: 50rem;
  height: 20px;
}

/* 내 수업 */
.container_wrap.myclass {
  padding-bottom: 8px;
}

.container_wrap.myclass .category_sec {
  padding: 20px 0;
  border-top: 1px solid #f1f1f5;
  border-bottom: 1px solid #f1f1f5;
  height: 76px;
  position: relative;
}

.container_wrap.myclass .category_sec .select_box_style {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.container_wrap.myclass .my_class_list {
  display: none;
}

.container_wrap.myclass .my_class_list.on {
  display: block;
}

/* 결제 상세 내역 */
.container_wrap.payments_detail {
  padding-top: 20px;
  padding-bottom: 156px;
}
.container_wrap.payments_detail .gap_line {
  height: 16px;
  width: 100%;
  background-color: #f7f7fb;
}

.container_wrap.payments_detail .global_inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.container_wrap.payments_detail .class_info_sec,
.container_wrap.payments_detail .payments_info_sec,
.container_wrap.payments_detail .refund_info_sec,
.container_wrap.payments_detail .extend_info_sec,
.container_wrap.payments_detail .advertisement_info_box {
  border: 1px solid #e5e5ec;
  border-radius: 8px;
  padding: 20px 16px;
}

.container_wrap.payments_detail h4 {
  color: #000000;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.container_wrap.payments_detail .tit_box {
  margin-top: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e5ec;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
}

.container_wrap.payments_detail .tit_box .red {
  color: #f83434;
}

.container_wrap.payments_detail .class_name {
  display: flex;
  align-items: center;
  gap: 16px;
}

.container_wrap.payments_detail .class_name .thumbnail {
  width: 74px;
  min-width: 74px;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
}

.container_wrap.payments_detail .class_name .txt_box .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 4px;
}

.container_wrap.payments_detail .class_name .txt_box .desc {
  color: #767676;
  font-size: 14px;
  line-height: 20px;
}

.container_wrap.payments_detail .text_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}

.container_wrap.payments_detail .text_list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container_wrap.payments_detail .text_list .item .tit {
  color: #505050;
  font-size: 15px;
  line-height: 22px;
}

.container_wrap.payments_detail .text_list .item .desc > span {
  font-size: 15px;
  line-height: 22px;
}

.container_wrap.payments_detail .text_list .item .desc.blue > span {
  color: #007aff;
}
.container_wrap.payments_detail .text_list .item .desc.red > span {
  color: #f83434;
}

.container_wrap.payments_detail .class_info_sec .text_list {
  margin-top: 20px;
  margin-bottom: 18px;
  background-color: #f7f7fb;
  border-radius: 6px;
  padding: 20px;
}

.container_wrap.payments_detail .class_info_sec .text_list .item {
  justify-content: flex-start;
  gap: 42px;
}

.container_wrap.payments_detail .class_info_sec .text_list .item .tit {
  font-size: 14px;
  color: #767676;
  line-height: 20px;
  width: 55px;
}

.container_wrap.payments_detail .class_info_sec .text_list .item .desc {
  font-size: 14px;
  line-height: 20px;
}

.container_wrap.payments_detail .class_info_sec .total_price_box {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.container_wrap.payments_detail .class_info_sec .total_price_box .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container_wrap.payments_detail .class_info_sec .total_price_box .item .tit {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.container_wrap.payments_detail .class_info_sec .total_price_box .item .txt {
  font-size: 15px;
  line-height: 22px;
  display: flex;
  gap: 16px;
}

.container_wrap.payments_detail
  .class_info_sec
  .total_price_box
  .item
  .txt
  .price {
  color: #f83434;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}

.container_wrap.payments_detail
  .class_info_sec
  .total_price_box
  .item
  .txt
  .price::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: #e5e5ec;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
}
.container_wrap.payments_detail .advertisement_sec h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 6px;
}
.container_wrap.payments_detail .advertisement_sec .id_number {
  color: #505050;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 12px;
}
.container_wrap.payments_detail .advertisement_sec .content_text {
  background-color: #f7f7fb;
  border-radius: 6px;
  min-height: 138px;
  padding: 16px;
  font-size: 14px;
  line-height: 20px;
}
.container_wrap.payments_detail .advertisement_sec .text_list {
  gap: 8px;
}
.container_wrap.payments_detail .advertisement_sec .text_list .item .tit {
  font-weight: 600;
}
.container_wrap.payments_detail .btn_ {
  margin-top: 4px;
}
.container_wrap.payments_detail.class_payments .payments_type_list {
  padding-left: 0;
  padding-right: 0;
}
.container_wrap.payments_detail.class_payments .payments_type_list .h4_title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 12px;
}
.container_wrap.payments_detail .payments_type_list {
  padding-left: 16px;
  padding-right: 16px;
}
.container_wrap.payments_detail .payments_type_list .type {
  display: flex;
  align-items: center;
  gap: 16px;
}
.container_wrap.payments_detail .payments_type_list .type .item {
  padding: 19px 10px;
  width: calc(50% - 8px);
  height: 100px;
  border: 1px solid #e5e5ec;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  flex-direction: column;
  gap: 9px;
}
.container_wrap.payments_detail .payments_type_list .type .item .toss {
  transform: translateY(10px);
  width: 44px;
}
.container_wrap.payments_detail .payments_type_list .notice {
  margin: 10px 0 20px;
  font-size: 12px;
  line-height: 18px;
  padding-left: 16px;
  position: relative;
  color: #767676;
}
.container_wrap.payments_detail .payments_type_list .notice::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 8px;
  width: 2px;
  height: 2px;
  border-radius: 50rem;
  background-color: #767676;
}

.container_wrap.payments_detail .no_border_wrap {
  padding: 20px 0 20px;
}
.container_wrap.payments_detail .terms_sec {
  padding: 20px 16px 0;
}
.container_wrap.payments_detail .terms_sec .terms_list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.container_wrap.payments_detail .terms_sec .terms_list > li .tit {
  font-size: 15px;
  line-height: 22px;
}
.container_wrap.payments_detail .terms_sec .terms_list > li .view_btn {
  display: flex;
  align-items: center;
  color: #767676;
  line-height: 20px;
  font-size: 14px;
}
.container_wrap.payments_detail
  .terms_sec
  .terms_list
  > li
  .view_btn
  .icon_right_arrow_g {
  width: 14px;
  height: 14px;
}
.container_wrap.payments_detail .complete_title .title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 6px;
}
.container_wrap.payments_detail .complete_title .order_number {
  color: #767676;
  font-size: 14px;
  line-height: 20px;
}
/* 내 문의내역 */
.container_wrap.my_inquery {
  position: relative;
}
.container_wrap.my_inquery .global_inner {
  height: 100%;
  padding-bottom: 36px;
  overflow-y: auto;
}
.container_wrap.my_inquery.edit .global_inner {
  height: calc(100% - 80px);
}
.container_wrap.my_inquery .no_data_content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.container_wrap.my_inquery .no_data_content .img {
  width: 32px;
  height: 32px;
}
.container_wrap.my_inquery .no_data_content .txt {
  font-size: 14px;
  line-height: 20px;
  color: #505050;
}
.container_wrap.my_inquery .sort_sec {
  padding: 24px 0;
}
.container_wrap.my_inquery .bottom_btn {
  position: sticky;
}
/* 문의하기 */
.container_wrap.inquery {
  padding-top: 20px;
}
.container_wrap.inquery .footer_input_box {
  position: absolute;
}
/* 수업 요청 광고하기 */
.container_wrap.advertisement .tab_menu.underline > li {
  padding: 13px 10px;
  height: 50px;
}
.container_wrap.advertisement .tab_menu.sticky {
  position: sticky;
  top: 0;
  z-index: 5;
}
.container_wrap.advertisement .dese_area {
  text-align: center;
  padding-bottom: 48px;
}
.container_wrap.advertisement .dese_area .image {
  width: 95px;
  margin: 45px auto 17px;
}
.container_wrap.advertisement .dese_area .tit {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 8px;
}
.container_wrap.advertisement .dese_area .desc {
  font-size: 14px;
  color: #505050;
  line-height: 20px;
}
.container_wrap.advertisement .ticket_price_area h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 15px;
}
.container_wrap.advertisement .ticket_price_area .price_list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 32px;
}
.container_wrap.advertisement .ticket_price_area .item {
  display: flex;
  align-items: center;
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  padding: 22px 16px;
}
.container_wrap.advertisement .ticket_price_area .item .name {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-right: 20px;
}
.container_wrap.advertisement .ticket_price_area .item .name::after {
  content: "";
  width: 1px;
  height: 8px;
  background-color: #cccccc;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}
.container_wrap.advertisement .ticket_price_area .item .price {
  font-weight: 600;
}
.container_wrap.advertisement .ticket_price_area .item .icon_right_arrow_gg {
  margin-left: auto;
}

.container_wrap.advertisement .page_title {
  margin-bottom: 24px;
}
.container_wrap.advertisement .commu_list {
  padding-bottom: 32px;
}
.container_wrap.advertisement .no_history_data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80%;
}
.container_wrap.advertisement .no_history_data .txt {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  margin: 6px 0;
}
.container_wrap.advertisement .no_history_data .sub_txt {
  color: #767676;
  font-size: 15px;
}
.container_wrap.advertisement .advertisement_payments_list {
  padding-top: 24px;
}
.container_wrap.advertisement .payments_btn {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 14px;
  color: #00d9d5;
  margin-top: 24px;
}
.container_wrap.advertisement .btn_area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 18px;
  padding-bottom: 32px;
}
/* 수업 요청 광고하기 */
.container_wrap.advertisement.itt .select_ticket_sec {
  padding: 20px 16px 24px;
  border-bottom: 8px solid #f7f7fb;
}

.container_wrap.advertisement.itt .select_ticket_sec .tit {
  color: #767676;
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 4px;
}
.container_wrap.advertisement.itt .select_ticket_sec .name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.container_wrap.advertisement.itt .commu_list_sec {
  padding-top: 20px;
}
.container_wrap.advertisement.itt .commu_list.chk_style .class_thumb {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  min-width: 80px;
}
.container_wrap.advertisement.itt .commu_list.chk_style .card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px;
}
.container_wrap.advertisement.itt
  .commu_list.chk_style
  .card
  .text_box_
  .title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.container_wrap.advertisement.itt
  .commu_list.chk_style
  .card
  .text_box_
  .state {
  display: flex;
  align-items: center;
  gap: 6px;
}
.container_wrap.advertisement.itt
  .commu_list.chk_style
  .card
  .text_box_
  .state
  .price {
  font-size: 14px;
  line-height: 20px;
  color: #767676;
}
.container_wrap.advertisement.itt
  .commu_list.chk_style
  .card
  .text_box_
  .state
  .badge_list
  .item {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 4px;
  height: 26px;
}
/* -------------------------------------------------------------------------- */
/*                   결제 완료 (payments_complete.html)                           */
/* -------------------------------------------------------------------------- */
.container_wrap.payments_complete h4 {
  padding-top: 20px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 6px;
}
.container_wrap.payments_complete .id_number {
  font-size: 14px;
  line-height: 20px;
  color: #505050;
  margin-bottom: 12px;
}
.container_wrap.payments_complete .class_info_sec,
.container_wrap.payments_complete .payments_info_sec {
  border: 1px solid #e5e5ec;
  border-radius: 8px;
  padding: 16px 18px;
}
.container_wrap.payments_complete .class_info_sec {
  margin-bottom: 16px;
}
.container_wrap.payments_complete .payments_info_sec {
  margin-bottom: 20px;
}
.container_wrap.payments_complete .class_info_sec .class {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.container_wrap.payments_complete .class_info_sec .class .text_box .tit {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}
.container_wrap.payments_complete .class_info_sec .class .text_box .desc {
  color: #767676;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.container_wrap.payments_complete .text_list {
  display: flex;
  flex-direction: column;
}
.container_wrap.payments_complete .text_list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
}
.container_wrap.payments_complete .text_list .item > span.red {
  color: #f83434;
}
.container_wrap.payments_complete .text_list .item > span.b {
  font-weight: 600;
}
.container_wrap.payments_complete .text_list .item > span.gray {
  color: #505050;
}
.container_wrap.payments_complete .class_info_sec .thumbnail {
  width: 74px;
  min-width: 74px;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
}
.container_wrap.payments_complete .class_info_sec .text_list {
  gap: 8px;
}
.container_wrap.payments_complete .payments_info_sec .text_list {
  gap: 10px;
}
.container_wrap.payments_complete .payments_info_sec .payments_header {
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e5ec;
  margin-bottom: 12px;
}
.container_wrap.payments_complete .payments_info_sec .payments_header .tit {
  font-size: 14px;
  line-height: 20px;
  color: #000;
  margin-bottom: 6px;
}
.container_wrap.payments_complete .btn_area {
  padding-bottom: 36px;
}
/* 선생님 */
.container_wrap.payments_complete.itt .class_info_sec .class {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5ec;
}
.container_wrap.payments_complete.itt .class_info_sec .class .text_box .state {
  display: flex;
  align-items: center;
  gap: 6px;
}
.container_wrap.payments_complete.itt
  .class_info_sec
  .class
  .text_box
  .state
  .price {
  font-size: 14px;
  line-height: 20px;
  color: #767676;
}
.container_wrap.payments_complete.itt
  .class_info_sec
  .class
  .text_box
  .state
  .badge_list
  > .item {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 4px;
  height: 26px;
}
/* -------------------------------------------------------------------------- */
/*                   내 정보 수정 (modify_my_info.html)                          */
/* -------------------------------------------------------------------------- */
.container_wrap.modify_my_info .form_wrap {
  padding-top: 38px;
}
.container_wrap.modify_my_info .form_wrap .input_box .email {
  text-align: center;
  color: #505050;
  font-size: 15px;
  line-height: 22px;
  display: block;
  margin-top: 12px;
}
.container_wrap.modify_my_info .form_wrap .student_list {
  padding-top: 0;
  gap: 16px;
}
.container_wrap.modify_my_info .form_wrap .student_list .item.add_item {
  height: 52px;
  min-height: 52px;
  flex-direction: row;
  border-radius: 8px;
}
.container_wrap.modify_my_info .form_wrap .student_list .item.add_item .img {
  width: 20px;
  height: 20px;
}
.container_wrap.modify_my_info .draw_user {
  color: #767676;
  font-size: 13px;
  line-height: 18px;
  padding-top: 26px;
  padding-bottom: 36px;
  text-align: right;
  width: 50px;
  margin-left: auto;
}

.container_wrap.modify_my_info .label {
  display: flex;
  justify-content: space-between;
}

/* 선생님 */
.container_wrap.modify_my_info .itt_info_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.container_wrap.modify_my_info .itt_info_list > .card {
  border: 1px solid #e5e5ec;
  border-radius: 8px;
  padding: 20px;
}
.container_wrap.modify_my_info .itt_info_list > .card .title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  margin-bottom: 12px;
}
.container_wrap.modify_my_info .itt_info_list > .card .text_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container_wrap.modify_my_info .itt_info_list > .card .text_list .item {
  display: flex;
  justify-content: space-between;
}
.container_wrap.modify_my_info .itt_info_list > .card .text_list .item .tit {
  color: #505050;
}
.container_wrap.modify_my_info .itt_info_list > .card button {
  margin-top: 16px;
  color: #505050;
  height: 48px;
  padding: 14px 10px;
}
/* -------------------------------------------------------------------------- */
/*                       수업 생성 (class_create.html)                          */
/* -------------------------------------------------------------------------- */
.container_wrap.create_itt .tab_wrap {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 10;
}
.container_wrap.create_itt .page_title {
  padding-bottom: 20px;
}
.container_wrap.create_itt .page_title.has_desc {
  padding-bottom: 4px;
}
.container_wrap.create_itt .section_desc {
  font-size: 14px;
  line-height: 20px;
  color: #505050;
  padding-bottom: 20px;
}
.container_wrap.create_itt .section_desc .red {
  color: #f83434;
}
.container_wrap.create_itt .desc_box {
  padding: 12px 10px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  color: #505050;
  font-size: 12px;
  line-height: 18px;
  gap: 4px;
  background-color: #f7f7fb;
  border-radius: 6px;
}
.container_wrap.create_itt .section {
  padding-bottom: 36px;
  border-bottom: 12px solid #f7f7fb;
}
.container_wrap.create_itt .custom_select_box {
  padding: 14px 16px;
}
.container_wrap.create_itt
  .custom_select_box
  .select_option
  > span.placeholder {
  font-size: 15px;
  color: #767676;
  line-height: 22px;
}
.container_wrap.create_itt .section .legend {
  gap: 8px;
  display: flex;
  align-items: center;
}

.container_wrap.create_itt .section .legend.col_2 > div {
  width: calc(50% - 4px);
}
.container_wrap.create_itt .section .legend.col_3 > div {
  width: calc(33.33% - 6px);
}
.container_wrap.create_itt .section .legend.col_7 > div {
  width: calc(14.28% - 7px);
}
.container_wrap.create_itt input {
  height: 52px;
}
.container_wrap.create_itt .text_radio {
  height: 52px;
  padding: 16px 10px;
}
.container_wrap.create_itt .inner input {
  width: calc(100% - 80px);
}
.container_wrap.create_itt .inner button {
  min-width: 80px;
  max-width: 80px;
  font-size: 15px;
}
.container_wrap.create_itt .notice_sec {
  padding: 40px 0 20px;
}
.container_wrap.create_itt .notice_sec .title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.container_wrap.create_itt .notice_sec .desc {
  font-size: 13px;
  color: #767676;
  line-height: 18px;
}

.container_wrap.create_itt.wait .page_title_box {
  padding-top: 28px;
  margin-bottom: 20px;
}
.container_wrap.create_itt.wait .page_title_box .state {
  color: #00c5c1;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  background-color: #00d9d51a;
  display: inline-block;
  height: 28px;
  border-radius: 4px;
  text-align: center;
  padding: 4px 8px;
}
.container_wrap.create_itt.wait .page_title_box.reject {
  margin-bottom: 16px;
  font-weight: 500;
}
.container_wrap.create_itt.wait .page_title_box.reject .state {
  background-color: #f834341a;
  color: #f83434;
}
.container_wrap.create_itt.wait .page_title_box .gradient_txt {
  margin-top: 12px;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  background: linear-gradient(235deg, #00fffa 8.62%, #0082d2 130.66%);
  background-clip: text;
  -webkit-background-clip: text;
}
.container_wrap.create_itt.wait .page_title_box.reject .gradient_txt {
  background: none;
  color: #111;
}
.container_wrap.create_itt.wait .page_title_box.reject .desc_box {
  margin-top: 16px;
  padding: 16px;
  background-color: #ffebeb80;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
}
.container_wrap.create_itt.wait .page_title_box.reject .desc_box .tit {
  color: #f83434;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 20px;
  font-size: 14px;
}
.container_wrap.create_itt.wait .page_title_box.reject .desc_box .txt {
  color: #505050;
  font-weight: 400;
  line-height: 20px;
}

.container_wrap.create_itt.wait .sect {
  border: 1px solid #e5e5ec;
  border-radius: 8px;
  padding: 20px;
}
.container_wrap.create_itt.wait .sect.reject {
  margin-bottom: 36px;
}
.container_wrap.create_itt.wait .sect .box_tit {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 12px;
}
.container_wrap.create_itt.wait .class_name {
  display: flex;
  align-items: center;
  gap: 16px;
}
.container_wrap.create_itt.wait .class_name .thumbnail {
  width: 74px;
  min-width: 74px;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
}
.container_wrap.create_itt.wait .class_name .txt_box .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 4px;
}
.container_wrap.create_itt.wait .class_name .txt_box .desc {
  color: #767676;
  font-size: 14px;
  line-height: 20px;
}
.container_wrap.create_itt.wait .text_list {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #f7f7fb;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container_wrap.create_itt.wait .sect.reject .text_list {
  margin-bottom: 0;
}
.container_wrap.create_itt.wait .text_list .item {
  display: flex;
  justify-content: flex-start;
  gap: 42px;
}
.container_wrap.create_itt.wait .sect.reject .text_list .item {
  flex-direction: column;
  gap: 4px;
}

.container_wrap.create_itt.wait .text_list .item .tit {
  font-size: 14px;
  color: #767676;
  line-height: 20px;
  width: 55px;
}
.container_wrap.create_itt.wait .text_list .item .desc {
  font-size: 14px;
  line-height: 20px;
}

.container_wrap.create_itt.wait .image_sec .thumb_list {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.container_wrap.create_itt.wait .image_sec .thumb_list .detail_img {
  aspect-ratio: 1/1;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f7f7fb;
}
.container_wrap.create_itt.wait .image_sec .desc {
  margin-top: 24px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 20px;
  color: #767676;
}
.container_wrap.create_itt.wait .total_price_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  line-height: 22px;
  background-color: #f7f7fb;
  padding: 16px;
  border-radius: 6px;
}
.container_wrap.create_itt.wait .total_price_box .tit {
  font-weight: 600;
}
.container_wrap.create_itt.wait .total_price_box .txt {
  display: flex;
  align-items: center;
  gap: 16px;
}
.container_wrap.create_itt.wait .total_price_box .txt .count {
  font-weight: 400;
}
.container_wrap.create_itt.wait .total_price_box .txt .price {
  color: #f83434;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
.container_wrap.create_itt.wait .total_price_box .txt .price::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: #e5e5ec;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
}
.container_wrap.create_itt.wait .bottom_desc {
  margin-top: 34px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 20px;
  color: #505050;
  text-align: center;
}
/* -------------------------------------------------------------------------- */
/*                       정산 관리 (adjustment_itt_01.html)                          */
/* -------------------------------------------------------------------------- */
.container_wrap.adjustment_set {
  padding-top: 4px;
}
.container_wrap.adjustment_set .title_box {
  padding-top: 24px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container_wrap.adjustment_set .title_box h4 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.container_wrap.adjustment_set .text_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 8px;
  padding: 20px;
}
.container_wrap.adjustment_set .text_list.g_bold {
  border: 1px solid #e5e5ec;
}
.container_wrap.adjustment_set .text_list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container_wrap.adjustment_set .text_list .item.line {
  width: 100%;
  background-color: #f1f1f5;
  height: 1px;
  margin: 6px 0;
}
.container_wrap.adjustment_set .text_list .item .tit {
  color: #505050;
}
.container_wrap.adjustment_set .text_list .item > span.bold {
  font-weight: 600;
}
.container_wrap.adjustment_set .text_list .item > span.t_15 {
  font-size: 15px;
}
.container_wrap.adjustment_set .text_list .item > span.t_14 {
  font-size: 14px;
}
.container_wrap.adjustment_set .text_list .item > span.t_16 {
  font-size: 16px;
}
.container_wrap.adjustment_set .text_list .item > span.c_76 {
  color: #767676;
}

.container_wrap.adjustment_set .text_list.bg_ {
  background-color: #f7f7fb;
}

.container_wrap.adjustment_set .this_month_sec,
.container_wrap.adjustment_set .account_sec {
  border-bottom: 12px solid #f7f7fb;
}
.container_wrap.adjustment_set .this_month_sec {
  padding-bottom: 24px;
}
.container_wrap.adjustment_set .this_month_sec .dot_notice_list {
  margin-top: 10px;
}
.container_wrap.adjustment_set .account_sec .image {
  width: 120px;
  height: 120px;
  margin: 16px auto 20px;
}
.container_wrap.adjustment_set .account_sec .desc {
  font-size: 14px;
  text-align: center;
  color: #505050;
  line-height: 20px;
}
.container_wrap.adjustment_set .account_sec button {
  margin: 20px auto 24px;
}
.container_wrap.adjustment_set .account_sec button.w_209 {
  width: 209px;
}
.container_wrap.adjustment_set .adjustment_list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 36px;
}

.container_wrap.adjustment_set .adjustment_list > .item {
  border: 1px solid #e5e5ec;
  border-radius: 6px;
  padding: 20px;
}
.container_wrap.adjustment_set .adjustment_list > .item .text_list {
  padding: 0;
}
.container_wrap.adjustment_set .adjustment_list .month_tit {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 16px;
}

.container_wrap.adjustment_set .adjustment_list.detail {
  gap: 16px;
}
.container_wrap.adjustment_set .adjustment_list.detail > .item {
  background-color: #f7f7fb;
  border: none;
}
.container_wrap.adjustment_set .adjustment_list.detail .month_tit {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 22px;
}
/* -------------------------------------------------------------------------- */
/*                          평점 관리 (my_review_itt.html)                     */
/* -------------------------------------------------------------------------- */
.container_wrap.my_review_itt .inner {
  padding-bottom: 24px;
  overflow-y: auto;
}
.container_wrap.my_review_itt.edit .inner {
  height: calc(100% - 80px);
}
.container_wrap.my_review_itt .review_panel {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 108px;
  border-bottom: 8px solid #f7f7fb;
}
.container_wrap.my_review_itt .review_panel .card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  position: relative;
}
.container_wrap.my_review_itt .review_panel .card::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: #e5e5ec;
}
.container_wrap.my_review_itt .review_panel .card .tit {
  font-size: 15px;
  line-height: 22px;
  color: #767676;
}
.container_wrap.my_review_itt .review_panel .card .score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.container_wrap.my_review_itt .review_panel .card .score .rating {
  padding-left: 24px;
  font-size: 20px;
  line-height: 28px;
}
.container_wrap.my_review_itt .review_panel .card .score .rating::after {
  width: 20px;
  height: 20px;
  top: 49%;
}
.container_wrap.my_review_itt .title_box {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container_wrap.my_review_itt .title_box h4 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.container_wrap.my_review_itt .icon_checkbox::before {
  right: 20px;
  top: 20px;
  left: auto;
  transform: translatey(0);
}
.container_wrap.my_review_itt .icon_checkbox.size24 {
  padding-left: 0;
}
.container_wrap.my_review_itt .commu_list {
}
.container_wrap.my_review_itt .commu_list .card .rating {
  font-size: 18px;
}
.container_wrap.my_review_itt .commu_list .card .rating::after {
  top: 49%;
}
.container_wrap.my_review_itt .commu_list.chk_style .card {
  padding: 20px;
}
.container_wrap.my_review_itt .commu_list.chk_style .desc {
  text-overflow: initial;
  overflow: initial;
  word-break: break-word;
  display: block;
  -webkit-box-orient: initial;
  line-height: 20px;
  margin-bottom: 20px;
}
.container_wrap.my_review_itt .commu_list.chk_style .dot_list > span {
  font-size: 14px;
}
.container_wrap.my_review_itt
  .commu_list.chk_style
  .dot_list
  > span:first-child {
  color: #111;
  font-weight: 600;
  line-height: 20px;
}
.container_wrap.my_review_itt
  .commu_list.chk_style
  .dot_list
  > span:last-child {
  color: #767676;
}

.container_wrap.my_review_itt .bottom_btn {
  position: sticky;
}

/* -------------------------------------------------------------------------- */
/*                                   이용약관                                   */
/* -------------------------------------------------------------------------- */
.container_wrap.terms {
  padding: 16px 20px 80px;
}
.container_wrap.terms .title {
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 16px;
}
.container_wrap.terms .text_box {
  margin-bottom: 16px;
}
.container_wrap.terms .text_box:last-child {
  margin-bottom: 0;
}
.container_wrap.terms .sub_tit {
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 16px;
  margin-bottom: 8px;
}
.container_wrap.terms .desc {
  color: #767676;
  line-height: 20px;
  font-size: 14px;
}

/* -------------------------------------------------------------------------- */
/*                                   스켈레톤                                   */
/* -------------------------------------------------------------------------- */
/* 스켈레톤 */
@-webkit-keyframes skeleton-gradient {
  0% {
    background-color: rgba(165, 165, 165, 0.1);
  }

  50% {
    background-color: rgba(165, 165, 165, 0.3);
  }

  100% {
    background-color: rgba(165, 165, 165, 0.1);
  }
}

@keyframes skeleton-gradient {
  0% {
    background-color: rgba(165, 165, 165, 0.1);
  }

  50% {
    background-color: rgba(165, 165, 165, 0.3);
  }

  100% {
    background-color: rgba(165, 165, 165, 0.1);
  }
}
.skeleton_scroll_none {
  overflow: hidden;
}
.skeleton_ani {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;
  animation: skeleton-gradient 1.8s infinite ease-in-out;
}

.skeleton .main_banner_sk {
  aspect-ratio: 375 / 227;
  width: 100%;
}
.skeleton .sub_banner_sk {
  aspect-ratio: 375 / 92;
  width: 100%;
}
.skeleton .txt_33_18 {
  aspect-ratio: 33 / 18;
  max-width: 33px;
  width: 100%;
  border-radius: 2px;
}
.skeleton .txt_102_24 {
  aspect-ratio: 102 / 24;
  max-width: 102px;
  width: 100%;
  border-radius: 2px;
  margin: 0 auto;
}
.skeleton .txt_169_28 {
  aspect-ratio: 169 / 28;
  width: 169px;
  border-radius: 2px;
}
.skeleton .txt_44_20 {
  aspect-ratio: 44 / 20;
  width: 44px;
  border-radius: 2px;
}
.skeleton .txt_80_102 {
  aspect-ratio: 80 / 102;
  width: 80px;
  border-radius: 2px;
}
.skeleton .txt_343_172 {
  aspect-ratio: 343 / 172;
  width: 100%;
  border-radius: 2px;
}
.skeleton .txt_h_24 {
  height: 24px;
  width: 80%;
  border-radius: 2px;
}
.skeleton .txt_h_20 {
  height: 20px;
  width: 80%;
  border-radius: 2px;
}
.skeleton .txt_h_18 {
  height: 18px;
  width: 50%;
  border-radius: 2px;
}
.skeleton .bg_none {
  background-image: none !important;
}
.skeleton .mb_4 {
  margin-bottom: 4px;
}
.skeleton .mb_6 {
  margin-bottom: 6px;
}
.skeleton .mb_8 {
  margin-bottom: 8px;
}
.skeleton .tab_menu.underline > li.on {
  border-bottom: 2px solid #e9e9e9;
}

.eyes_box{
  position: absolute; width: 52px; height: 52px; right: 0; top: 0
}