@charset "UTF-8";
:root {
  --ribbon-h: 80px;
  --head-w: 280px;
  --head-w-narrow: 100px;
}

/******************************************
  태블릿용 reset
*******************************************/
@media screen and (max-width: 1279.9px) {
  input[type=number],
  input[type=password],
  input[type=tel],
  input[type=text],
  input[type=date],
  input[type=datetime-local],
  input[type=search],
  input[type=time],
  select,
  textarea {
    padding-inline: 8px;
    font-size: 12px;
  }
  input[type=date] {
    width: 110px;
  }
  select {
    background-position: calc(100% - 8px) center;
    padding-right: 22px;
  }
  html,
  textarea,
  input,
  select {
    font-size: 12px;
  }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    font-size: 12px;
  }
  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    font-size: 12px;
  }
  input::-ms-input-placeholder,
  textarea::-ms-input-placeholder {
    font-size: 12px;
  }
  input::placeholder,
  textarea::placeholder {
    font-size: 12px;
  }
}
/******************************************
  태블릿용 layout
*******************************************/
@media screen and (max-width: 1279.9px) {
  .u-hide-t {
    display: none !important;
  }
}

.com_container {
  min-width: auto;
}

@media screen and (max-width: 1279.9px) {
  :root {
    --ribbon-h: 50px;
    --head-w-narrow: 56px;
    --head-w: 200px;
  }
  body:not(.com_member) main {
    padding-inline: 15px;
  }
  .gnb {
    padding-inline: 5px;
  }
  .gnb .depth1-menu {
    padding: 12px 15px;
  }
  .gnb .depth2-menu {
    padding-inline: 5px;
  }
  .ribbon {
    padding-inline: 15px;
    min-width: 600px;
    position: relative;
  }
  .ribbon__scroll {
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-face-color: transparent; /*스크롤*/
    scrollbar-highlight-color: #999; /*하이라이트*/
    scrollbar-3dlight-color: transparent; /*왼쪽외곽음영*/
    scrollbar-darkshadow-color: transparent; /*오른쪽외곽음영*/
    scrollbar-shadow-color: transparent; /*오른쪽 안쪽음영*/
    scrollbar-arrow-color: transparent; /*화살*/
    scrollbar-track-color: transparent; /*스크롤영역*/
  }
  .ribbon__scroll::-webkit-scrollbar {
    /*스크롤바*/
    width: 6px;
    height: 6px;
  }
  .ribbon__scroll::-webkit-scrollbar-button {
    /*스크롤바 버튼(아래 위 화살표)*/
    width: 0px;
    height: 0px;
  }
  .ribbon__scroll::-webkit-scrollbar-thumb {
    /*스크롤바 핸들*/
    background-color: #999;
    background-clip: padding-box;
    border-radius: 6px;
  }
  .ribbon__scroll::-webkit-scrollbar-track {
    /*스크롤바 진행줄*/
    background-color: none;
  }
  .ribbon__scroll::-webkit-scrollbar-track-piece {
    /*진행줄에서 핸들로 덮이지 않은 영역 */
    background-color: none;
  }
  .ribbon__scroll {
    width: 100vw;
    position: fixed;
    z-index: 100;
  }
  .ribbon-btns {
    margin-left: 10px;
  }
  .com_flex_row.type-col--t {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 1023.9px) {
  .com_container {
    min-width: calc(675px - var(--head-w-narrow));
  }
}
/******************************************
  태블릿용 button
*******************************************/
@media screen and (max-width: 1279.9px) {
  .com_btn.m {
    padding-inline: 10px;
  }
  .com_btn__wrap.has_paging {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .com_btn__wrap.has_paging .align_left {
    position: relative;
    order: 1;
    transform: translate(0);
    margin-right: auto;
  }
  .com_btn__wrap.has_paging .sec-paging {
    order: 3;
    width: 100%;
  }
  .com_btn__wrap.has_paging .align_right {
    position: relative;
    order: 2;
    transform: translate(0);
    margin-left: auto;
  }
  .com_selected {
    gap: 5px !important;
  }
  .com_chk_btn .btn {
    padding-inline: 10px;
  }
}
/******************************************
  태블릿용 board
*******************************************/
@media screen and (max-width: 1700px) {
  .com_list__header {
    padding-top: 25px;
  }
}
@media screen and (max-width: 1279.9px) {
  .com_list__header {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px 0;
    margin-bottom: 10px;
  }
  .com_list__header .list_header-today {
    font-size: 14px;
  }
}
@media screen and (max-width: 1700px) {
  .com_list__header .list_header-month {
    top: 0;
  }
}

@media screen and (max-width: 1279.9px) {
  .extend--t {
    flex: 1 !important;
    width: auto !important;
  }
  .com_list__wrap {
    padding-inline: 15px;
  }
  .com_list__wrap .board_search {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-inline: 15px;
    gap: 8px;
  }
  .com_list th,
  .com_list td {
    padding-inline: 5px;
  }
  .com_list__search-block {
    gap: 8px;
  }
  .com_list__state {
    font-size: 14px;
    gap: 15px;
  }
  .com_list__top {
    margin-bottom: 10px;
  }
  .com_board_search {
    padding-inline: 15px;
    gap: 8px;
  }
  .com_board_search .search {
    gap: 5px;
  }
  .com_board_search .search-input {
    width: 215px !important;
  }
  .com_board_search .search-input.wide {
    width: 370px !important;
  }
  .com_board_search .search__block {
    gap: 5px;
  }
  .com_board_search .search.is-wrap {
    gap: 8px 5px;
  }
  .com_board_search.is-col--t {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    padding-inline: 0;
  }
  .com_board_search.is-col--t .search-tit {
    min-height: 0;
  }
}
@media screen and (max-width: 1279.9px) {
  .com_write colgroup {
    display: none;
  }
  .com_write__wrap {
    padding-inline: 15px;
  }
  .com_write .text_form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    gap: 5px;
  }
  .com_write .text_form-input {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    align-items: flex-start;
  }
  .com_write .text_form-input + .text_form-tit {
    margin-top: 10px;
  }
  .com_write > tbody > tr > th, .com_write > tbody > tr > td {
    padding: 8px;
    height: 60px;
  }
  .com_write th {
    width: 91px;
    min-width: 91px;
  }
}
@media screen and (max-width: 1915px) {
  .com_write.com_write-col {
    display: flex;
  }
  .com_write.com_write-col colgroup {
    display: none;
    width: 0;
  }
  .com_write.com_write-col tbody {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    width: 100%;
  }
  .com_write.com_write-col tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .com_write.com_write-col th,
  .com_write.com_write-col td {
    display: flex;
    align-items: center;
    height: auto !important;
    min-height: 60px;
    align-self: stretch;
  }
}
@media screen and (max-width: 1915px) {
  .com_write.com_write-col td {
    flex: 1;
    min-width: calc(100% - 150px);
    width: calc(100% - 150px);
    border-right: none !important;
  }
}
@media screen and (max-width: 1279.9px) {
  .com_write.com_write-col td {
    min-width: calc(100% - 91px);
    width: calc(100% - 91px);
  }
}
@media screen and (max-width: 1915px) {
  .com_write.com_write-col th {
    word-break: break-all;
  }
  .com_write.com_write-col .add_profile {
    width: 100% !important;
    min-width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 1279.9px) {
  .com_view__wrap {
    padding-inline: 15px;
  }
  .com_view .view__header, .com_view .view__contents, .com_view .view-file {
    padding-inline: 15px;
  }
  .com_faq__wrap {
    padding-inline: 15px;
  }
}
@media screen and (max-width: 1023.9px) {
  .com_customer_service {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    padding-block: 20px;
  }
  .com_customer_service .cs-contact {
    margin-top: 10px;
    margin-left: 0;
  }
  .com_customer_service .cs-contact::before {
    display: none;
  }
}
@media screen and (max-width: 1620px) {
  .students-info__default {
    width: calc(100% - 220px) !important;
  }
}
@media screen and (max-width: 1279.9px) {
  .students-info__default {
    width: 100% !important;
  }
}
@media screen and (max-width: 1620px) {
  .students-info__must {
    width: 100% !important;
    padding-left: 200px;
  }
}
@media screen and (max-width: 1279.9px) {
  .students-info__must {
    padding-left: 0;
  }
}
@media screen and (max-width: 1279.9px) {
  .students-info__etc {
    padding-left: 0;
  }
}

@media screen and (max-width: 1279.9px) {
  .write-add-profile {
    width: 100%;
  }
  .write-add-profile-item {
    flex-direction: row;
    justify-content: center;
  }
}
/******************************************
  태블릿용 text
*******************************************/
@media screen and (max-width: 1279.9px) {
  .com_sec_tit {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px 0;
    font-size: 20px;
  }
  .com_sec_tit .sub {
    font-size: 12px;
    width: 100%;
  }
}
@media screen and (max-width: 1023.9px) {
  .com_sec_tit__wrap {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px 0;
  }
}

@media screen and (max-width: 1279.9px) {
  .com_pg_tit__wrap .path {
    white-space: nowrap;
  }
}

/******************************************
  태블릿용 module
*******************************************/
@media screen and (max-width: 1599.9px) {
  .com_sms {
    gap: 15px;
  }
  .com_sms .sms {
    width: 291px;
    height: 413px;
  }
  .com_sms .tel-list {
    height: 399px;
  }
}
@media screen and (max-width: 1279.9px) {
  .com_sms__group {
    padding-inline: 15px;
  }
}
@media screen and (max-width: 1599.9px) {
  .com_sms__list {
    padding-left: 15px;
  }
}
@media screen and (max-width: 1023.9px) {
  .com_sms__list {
    padding-left: 0;
    border-left: none;
  }
}
@media screen and (max-width: 1599.9px) {
  .com_sms__container {
    gap: 15px;
  }
}
@media screen and (max-width: 1023.9px) {
  .com_sms__container {
    padding: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
  }
}
@media screen and (max-width: 1279.9px) {
  .com_sms__notice {
    padding-inline: 15px;
  }
}
@media screen and (max-width: 1023.9px) {
  .com_sms__notice {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
  }
}
@media screen and (max-width: 1023.9px) {
  .com_sms_point {
    padding-block: 20px;
    margin-top: 10px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 1279.9px) {
  .com_analytics_summary {
    padding-inline: 15px;
  }
}

@media screen and (max-width: 1279.9px) {
  .com_chart-item {
    padding: 20px 10px 25px;
  }
  .com_calendar {
    padding-inline: 15px;
  }
  .com_calendar .calendar-sort {
    position: relative;
    right: auto;
    left: 0;
    top: 0;
  }
  .calendar-header .fc-header-toolbar {
    padding-bottom: 30px;
  }
  .calendar-header .com_legend {
    top: 50px;
  }
}
@media screen and (max-width: 1023.9px) {
  .chart__circle {
    width: 200px;
    min-width: 200px;
  }
  .com_legend .legend {
    font-size: 12px;
  }
}
@media screen and (max-width: 1023.9px) {
  .p_analytics_payments .list_info {
    grid-template-columns: auto 1fr;
  }
  .p_chat .chat__list {
    width: 280px;
    padding-inline: 15px;
  }
  .p_chat .chat__container {
    gap: 8px;
  }
  .p_chat .chat__wrap {
    flex: 1;
  }
  .p_chat .chat__wrap .chat_top {
    padding-inline: 15px;
  }
  .p_chat .chat__wrap .chat_mid .scroll_body {
    padding-inline: 15px;
  }
}
@media screen and (max-width: 1279.9px) {
  .p_login .login__container {
    max-width: 98vw;
    gap: 20px;
  }
  .p_login .login-visual {
    width: 350px;
    min-width: 350px;
    height: 508px;
  }
  .p_login .login__contents {
    padding-right: 30px;
  }
  .p_login .find_sec,
  .p_login .cs_sec {
    margin-top: 20px;
  }
  .com_member main {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .p_main {
    min-width: calc(700px - var(--head-w-narrow));
  }
  .p_main .main-more {
    margin-left: auto;
  }
  .p_main .main-box {
    padding: 15px;
  }
  .p_main .main-box.students .main__status {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px 10px;
    width: 100%;
  }
  .p_main .main-box.students .main__status > * {
    width: calc((100% - 10px * 1) / 2);
    min-width: calc((100% - 10px * 1) / 2);
  }
  .p_main .main__container {
    gap: 5px;
    grid-template-rows: auto auto auto;
  }
  .p_main .main__status-item {
    align-self: stretch;
    padding-block: 15px;
  }
}