@charset "utf-8";
@import url("/css/token.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-gov.min.css");

@font-face {
  font-family: "NotoSerifKR";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff")
  format("woff");
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 17px;
}
body {
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
  font-size: 1rem;
  line-height: 1.5;
  color: #1d1d1d;
  width: 100%;
  font-weight: 500;
}
button {
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
  font-size: 1rem;
}
input, select, textarea {
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
  font-size: var(--spacein-input-text);
  padding: 10px 16px;
  border-radius: 6px;
}
select {
  background: none;
  border: none;
  color: #000;
}
.select-wrap {
  position: relative;
  display: inline-block;
  margin-inline: var(--spacein-grid-gap-sm);
}
.select-wrap::after {
  content: "\f107";
  font-family: "FontAwesome";
  width: var(--spacein-all-select-angle-down);
  height: var(--spacein-all-select-angle-down);
  line-height: var(--spacein-all-select-angle-down);
  font-size: var(--spacein-all-select-angle-down);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 4px;
  padding-right: calc(var(--spacein-all-select-angle-down) + 4px) !important;
}
.select-wrap select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #000000;
  border-radius: 4px;
}
input[type="radio"]:checked + label {
  color: #296eb2;
}
.kasm input[type="radio"]:checked {
  accent-color: #B05D8E;
}
.kasm input[type="radio"]:checked + label {
  color: #B05D8E;
}
input:focus {
  border: 1px solid #296eb2;
}
::selection {
  background-color: #2974be;
  color: #fff;
}
.mb-30 {margin-bottom: 30px;}
.file_delete {
  font-size: 10px !important;
  padding: 3px 10px !important;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 100px;
  margin: 0 3px;
  border: 1px solid #c53636;
  color: #c53636;
  display: inline-block;
  margin-bottom: 8px;
  margin-left: 8px;
}
.file_delete:hover {
  color: #fff;
  background: #c53636;
}

/* 서브페이지 껍데기 */
.sub_con {
  width: 100%;
  overflow: hidden;
  background: url("/img/sub/sub_bg.webp") repeat top/contain;
}
.sub_con.kasm {
  background: url("/img/sub/sub_bg_kasm.webp") repeat top/contain;
}
.sub_bn {
  width: 100%;
  overflow: hidden;
}
.sub_bn .titBox {
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 50px 0;
}
.sub_bn .titBox h2.tit,
.sub_bn .titBox h3.tit {
  font-size: var(--spacein-all-main-menu-name);
  font-weight: var(--spacein-font-weight-bold);
  margin-bottom: 10px;
}
.sub_bn .titBox p.eng {
  font-size: var(--spacein-all-main-menu-name_eng);
  color: #747474;
  font-weight: var(--spacein-font-weight-regular);
}
.sub_content {
  width: 100%;
  min-height: calc(100vh - 658px);
  background: #fff;
  border-radius: 90px 90px 0 0;
  box-shadow: -3px 0 10px rgba(0, 0, 0, 16%);
}
.sub_content .sub_content_inner {
  overflow: hidden;
  width: 100%;
  max-width: calc(1200px + 48px); /* 화면이 클 때는 최대 1200px */
  margin: 0 auto;
  box-sizing: border-box;
  padding: 30px 24px;
  display: flex !important;
  gap: 60px;
}
/* left 메뉴 */
.leftMenu {
  width: 190px;
  display: block;
  padding-top: 16px;
  flex: 0 0 190px;
}
.leftMenu p.mainTit {
  font-size: var(--spacein-left-menu-left-menu);
  text-align: center;
  color: #003b83;
  margin-bottom: 26px;
  font-weight: var(--spacein-font-weight-bold);
  word-break: auto-phrase;
  letter-spacing: -1.5px;
}
.leftMenu p.mainTit.kasm{
  color: #B05D8E;
}
.leftMenu ul {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e3e3e3;
}
.leftMenu ul > ul {
  border: 0;
}
.leftMenu ul li {
  width: 100%;
  border-bottom: 1px solid #e3e3e3;
  font-weight: 400;
}
.leftMenu ul li:last-child {
  border-bottom: 0;
}
.leftMenu ul li a {
  color: #797676;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  display: block;
  box-sizing: border-box;
  padding: 15px 10px;
  font-size: var(--spacein-left-menu-left-menu-text);
  font-weight: var(--spacein-font-weight-bold);
}
.leftMenu ul li a:focus {
  outline-offset: -2px;
}
.leftMenu ul li:hover a {
  color: #003b83;
  font-weight: 500;
}
.leftMenu ul li.leftM_kasm:hover a {
  color: #B05D8E;
}
.leftMenu ul li.active {
  background: linear-gradient(to right, #003b83, #3a81c7);
}
.leftMenu ul li.leftM_kasm.active{
  background: linear-gradient(to right, #B05D8E, #E3A6CA);
}
.leftMenu ul li:after {
  background: linear-gradient(to right, #003b83, #3a81c7);
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}
.leftMenu ul li.leftM_kasm:after{
  background: linear-gradient(to right, #B05D8E, #E3A6CA);
}
.leftMenu ul li.active a,
.leftMenu ul li.leftM_kasm.active a {
  color: #fff;
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  font-weight: var(--spacein-font-weight-bold);
}
.leftMenu ul li.active a:after {
  position: absolute;
  content: "\f105";
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 18px;
  font-family: "FontAwesome";
}

.main_con {
  display: block;
  overflow: visible;
  flex: 1 0;
}
.main_con .titBox {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px 10px;
  border-bottom: 1px solid #979797;
}
.main_con .titBox h3 {
  font-size: var(--spacein-all-title);
  font-weight: var(--spacein-font-weight-bold);
  display: inline-block;
  float: left;
}
.main_con .titBox h3.subtitle{
  display: block;
  float: none;
  margin-bottom: var(--spacein-all-title-margin-bottom);
}
.main_con .titBox .naviBox {
  display: inline-block;
  float: right;
  height: 100%;
  margin-top: 10px;
}
.main_con .titBox .breadcrumb{
  height: 100%;
  padding: 16px 0;
  margin-bottom: 40px;
  border-bottom: 1px solid #ddd;
}
.main_con .titBox .naviBox ul,
.main_con .titBox .breadcrumb ol{
  overflow: hidden;
  vertical-align: middle;
  display: flex;
}
.main_con .titBox .naviBox ul li,
.main_con .titBox .breadcrumb ol li{
  display: inline-block;
  box-sizing: border-box;
  padding-inline: 0.4rem;
  color: #737373;
  font-size: var(--spacein-all-breadcrumb);
  font-weight: 400;
}
.main_con .titBox .breadcrumb ol li a{
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
.main_con .titBox .breadcrumb ol li a:hover{
  color : #003B83;
  font-weight: 600;
}
.main_con .titBox .breadcrumb ol li:first-child a span{
  padding-left: 0.4rem;
}
.main_con .titBox .naviBox ul li:last-child,
.main_con .titBox .breadcrumb ol li:last-child{
  padding-left: 0;
}
.main_con .titBox .naviBox ul li:after,
.main_con .titBox .breadcrumb ol li:after{
  content: ">";
  margin-left: 0.4rem;
}
.main_con .titBox .naviBox ul li:last-child:after,
.main_con .titBox .breadcrumb ol li:last-child:after{
  display: none;
}

.main_con .in_con {
  width: 100%;
}
.main_con .in_con .in_con_inner {
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
}
.main_con .in_con .in_con_inner section {
  width: 100%;
  margin-bottom: 50px;
}
.main_con .in_con .in_con_inner section:last-child {
  margin-bottom: 0;
}
.main_con .in_con .in_con_inner section h3.tit {
  width: 100%;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;
}
.main_con .in_con .in_con_inner section h3.tit img {
  margin-right: 10px;
  margin-top: -5px;
}

.main_con .in_con .in_con_inner section p {
  box-sizing: border-box;
  padding-left: 35px;
  font-weight: 400;
  line-height: 1.7;
}
.main_con .in_con .in_con_inner section p img {
  text-align: center;
}

/* 게시판 리스트 스타일 */
.table_list {
  width: 100%;
  overflow: hidden;
}
.table_list ul {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
  clear: both;
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
  word-break: break-all;
  height: auto;
}
.table_list ul > ul:last-child {
  border-bottom: 0;
}
.table_list ul li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  font-weight: 400;
}
.table_list ul li.left {
  text-align: left;
  padding: 0;
}
.table_list ul li.left img {
  margin-top: -5px;
  margin-right: 5px;
}
.table_list ul:hover {
  color: #296eb2;
}
.table_list ul:hover li {
  font-weight: 500;
}
.table_list ul li.left a {
  width: 90%;
  height: 100%;
  min-height: calc(var(--spacein-all-text) * 1.5 + 60px);;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 30px 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.table_list ul li.left a span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table_list ul li.left a:focus {
  border-radius: 6px;
  outline-offset: -2px;
}
.table_list.table_list_board ul.head {
  /*border-top:2px solid #296EB2;   border-bottom: 1px solid #296EB2;*/
  background: #f4f5f7;
  border-top: 1px solid #ddd;
}
.table_list.table_list_board ul.head li {
  font-weight: 500;
  padding: 15px 10px;
  color: #296eb2;
  box-sizing: border-box;
  font-size: var(--spacein-all-text-name);
}
.table_list.table_list_board ul.noti {
  background: #f9f9f9;
}
.table_list.table_list_board ul.noti:hover li:nth-child(2),
.table_list.table_list_board ul.n_noti:hover li:nth-child(2) {
  text-decoration: underline;
}
.table_list.table_list_board ul.n_noti_reply:hover li:nth-child(2) .n_noti_child .reply_title {
  text-decoration: underline;
}
.table_list.table_list_board ul.n_noti_reply:hover li:nth-child(2) a li:last-child {
}
.table_list.table_list_board ul.noti li {
  font-weight: 500;
}
.table_list.table_list_board ul.noti li.noti_ico {
  color: #296eb2;
  font-weight: 600;
}
.main_con .titBox.titBox_b {
  border-bottom: 1px solid #ddd !important;
}
.main_con .titBox.titBox-nb{
  padding : 0;
  border : none;
}
.table_list.table_list_board ul li.no_list {
  box-sizing: border-box;
  padding: 20px;
}

#job_list:hover {
  color: #1d1d1d;
}
#job_list:hover li {
  font-weight: 400;
}

.table_list.table_list_board ul .li_01 {
  width: 4%;
}
.table_list.table_list_board ul li.li_02 {
  width: 28%;
}
.table_list.table_list_board ul li.li_03 {
  width: 6%;
}
.table_list.table_list_board ul li.li_04 {
  width: 7%;
}
.table_list.table_list_board ul li.li_05 {
  width: 7%;
}
.table_list.table_list_board ul li.li_06 {
  width: 5%;
}

.job_list ul li {
  box-sizing: border-box;
  padding: 10px;
}
.job_list ul .li_02 {
  width: 20% !important;
}
.job_list ul .li_03 {
  width: 10% !important;
}
.job_list ul .li_04 {
  width: 15% !important;
}
.job_list ul .li_05 {
  width: 10% !important;
}
.job_list ul .li_06 {
  width: 10% !important;
}

/* 페이징
.pasing{text-align: center; width: 100%; box-sizing: border-box; padding: 30px 0;}
.pasing ul{overflow: hidden;}
.pasing ul li{  display: inline-block; margin-right: 10px; cursor: pointer;  width:35px; height: 35px; line-height: 35px;}
.pasing ul li:last-child{margin-right: 0px;}
.pasing ul li.now{border: 1px solid #aaa; border-radius: 100px; background:#3A81C7; border: 1px solid #3A81C7;color:#fff;}
.pasing ul li.arrow{border: 1px solid #aaa; border-radius: 100px; width:35px; height: 35px; line-height: 35px;  } */

.pagination-mobile-nav {
  margin-top: var(--spacein-footer-table-gap);
  display: none;
}
.pasing {
  width: 100%;
  overflow: hidden;
  text-align: center;
  padding: 20px 0;
  box-sizing: border-box;
}
.pasing ul {
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.pasing ul li {
  display: inline-block;
  margin: 0 8px;
  cursor: pointer;
  font-size: var(--spacein-all-pagination);
  font-weight: 400;
}
.pasing ul li:focus {
  outline-offset: 3px;
}
.pasing ul li.now {
  border-bottom: 2px solid #296eb2;
  font-weight: var(--spacein-font-weight-bold);
  color: #296eb2;
}
.pasing ul li.ellipsis {
  cursor: default;
  pointer-events: none;
  color: #666;
  font-weight: normal;
  vertical-align: middle;
}
.pasing ul li.page-nav-text {
  display: inline-block;
  margin: 0 8px;
  cursor: default;
  color: #666;
  font-size: var(--spacein-all-pagination);
  font-weight: 400;
  vertical-align: middle;
}

.pasing ul li.page-nav-text.prev-text {
  cursor: pointer;
  margin-left: 0 !important;
  margin-right: var(--spacein-all-pagination) !important;
}

.pasing ul li.page-nav-text.next-text {
  cursor: pointer;
  margin-left: var(--spacein-all-pagination) !important;
  margin-right: 0 !important;
}

.pasing ul li.page-nav-text.disabled {
  color: #ccc;
  cursor: default;
}
.pasing ul li.now.kasm {
  border-bottom: 2px solid #B05D8E;
  color: #B05D8E;
}
.pasing ul li.arrow {
  background: #296eb2;
  color: #fff;
  border-radius: calc((var(--spacein-all-pagination) * 1.5) / 2);
  width: calc(var(--spacein-all-pagination) * 1.5);
  height: calc(var(--spacein-all-pagination) * 1.5);
  font-size: var(--spacein-all-pagination);
  line-height: calc(var(--spacein-all-pagination) * 1.5);
  text-align: center;
}
.pasing ul li.arrow.disabled {
  background: #ccc;
  cursor: default;
}
.pasing ul li.arrow.kasm {
  background-color: #B05D8E;
}
.pasing.kasm ul li.now {
  border-bottom-color: #B05D8E;
  color: #B05D8E;
}

.pasing.kasm ul li.arrow {
  background-color: #B05D8E;
}

.pasing.kasm ul li.arrow.disabled {
  background-color: #ccc;
}

.pasing.kasm .pagination-mobile-nav button {
  background-color: #B05D8E;
}

/* 검색창 */
.search_Box {
  flex-grow: 1;
  text-align: center;
  box-sizing: border-box;
  margin-bottom: 48px;
}

.search_Box .search {
  width: 100%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  text-align: left;
  border: 3px solid;
  border-image: linear-gradient(to right, #003b83, #6aa7e3);
  border-image-slice: 1;
  box-sizing: border-box;
  padding: 8px 0;
}
.search_Box .search.kasm {
  border-image: linear-gradient(to right, #B05D8E, #E3A6CA);
  border-image-slice: 1;
}
.search_Box .search#subSearch {
  display: none;
}

.search_Box .search select {
  display: inline-block;
  width: auto;
  font-size: var(--spacein-input-search_type);
  font-weight: var(--spacein-font-weight-bold);
  background: none;
  border: none;
  color: #000;
}
.search_Box .search select:focus {
  outline: 2px solid black;
}

.search_Box .search .in {
  position: relative;
  width: 100%;
}
.search_Box .search .in input {
  width: 100%;
  border: none;
  font-size: var(--spacein-input-search_text);
  padding: 10px calc(var(--spacein-input-search-icon-width) + 32px) 10px 16px;
}
.search_Box .search .in button {
  width: var(--spacein-input-search-icon-width);
  height: var(--spacein-input-search-icon-width);
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  color: #000;
}

/* 로그인 */
.login_wrap {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 110px 0;
  background: linear-gradient(to right, #f1fafb, #bacef3);
}
.login_box h3.title i {
  font-size: 35px;
  text-align: center;
  margin-bottom: 10px;
  color: #fff;
  background: #003b83;
  border: 1px solid #003b83;
  border-radius: 100px;
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.login_box {
  background: #fff;
  width: 600px;
  text-align: center;
  border-radius: 20px;
  margin: 0 auto;
}
.login_inner {
  width: 100%;
  overflow: hidden;
}
.login_box .login_box_inner {
  width: 100%;
  overflow: hidden;
  height: 100%;
  padding: 30px 0;
  box-sizing: border-box;
  overflow: visible;
}
.login_box .login_box_inner .logo {
  text-align: center;
}
.login_box .login_box_inner .input_box {
  margin-top: 30px;
  overflow: hidden;
  margin-bottom: 15px;
}
.login_box .login_box_inner .input_box #login_form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login_box .login_box_inner .input_box .field-label {
  display: flex;
  align-items: center;
  gap: var(--spacein-grid-gap-lg);
  font-size: var(--spacein-login-sub-title);
  font-weight: var(--spacein-font-weight-bold);
  margin-bottom: 5px;
  line-height: 150%;
}
.login_box .login_box_inner .input_box i {
  width: calc(var(--spacein-input-search-icon-width) * 0.75);
  height: calc(var(--spacein-input-search-icon-width) * 0.75);
  font-size: calc(var(--spacein-input-search-icon-width) * 0.75);
  line-height: calc(var(--spacein-input-search-icon-width) * 0.75);
  position: static;
  top: auto;
  left: auto;
  transform: none;
}
.login_box .login_box_inner .input_box input {
  font-size: var(--spacein-login-text);
  font-weight: var(--spacein-font-weight-bold);
  width: 100%;
  max-width: 450px;
  padding: 8px 16px;
  border: 1px solid #003b83;
  border-radius: 10px;
  line-height: 150%;
}
.login_box .login_box_inner .input_box input::placeholder {
  color: #AFAFAF;
  font-weight: var(--spacein-font-weight-bold);
  font-size: var(--spacein-login-text);
  line-height: 150%;
  opacity: 1;
}
.login_box .login_box_inner .input_box .id {
  width: 100%;
  max-width: 450px;
  box-sizing: border-box;
  margin-bottom: 15px;
  position: relative;
}
.login_box .login_box_inner .input_box .id img {
  width: 20px;
  margin-right: 8px;
}
.login_box .login_box_inner .input_box .pw {
  width: 100%;
  max-width: 450px;
  box-sizing: border-box;
  position: relative;
}
.login_box .login_box_inner .input_box .pw img {
  width: 20px;
  margin-right: 8px;
}
.login_box .login_box_inner .input_box .pw .input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.login_box .login_box_inner .input_box .pw .input-wrapper input {
  width: 100%;
  padding-right: 60px;
  box-sizing: border-box;
}
.login_box .login_box_inner .input_box .pw .input-wrapper .toggle-btn {
  position: absolute;
  top: 51%;
  right: 20px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
}
.login_box .login_box_inner .input_box .pw .input-wrapper .toggle-btn:focus {
  outline-offset: -4px;
}
.login_box .login_box_inner .input_box .pw .input-wrapper .toggle-btn #eyeClosed {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M20.0051 28.962C28.2833 28.962 34 22.1373 34 20.0052C34 17.8627 28.273 11.0485 20.0051 11.0485C11.8397 11.0485 6 17.8627 6 20.0052C6 22.1373 11.8295 28.962 20.0051 28.962ZM20.0051 27.3106C13.2536 27.3106 7.7929 21.4789 7.7929 20.0052C7.7929 18.7615 13.2536 12.6998 20.0051 12.6998C26.7259 12.6998 32.2072 18.7615 32.2072 20.0052C32.2072 21.4789 26.7259 27.3106 20.0051 27.3106ZM20.0051 25.8579C23.1914 25.8579 25.7527 23.1929 25.7527 20.0052C25.7527 16.734 23.1914 14.1525 20.0051 14.1525C16.7984 14.1525 14.2371 16.734 14.2371 20.0052C14.2371 23.1929 16.7984 25.8579 20.0051 25.8579ZM20.0051 21.9491C18.9397 21.9491 18.079 21.0713 18.079 20.0052C18.079 18.9287 18.9397 18.0613 20.0051 18.0613C21.0604 18.0613 21.921 18.9287 21.921 20.0052C21.921 21.0713 21.0604 21.9491 20.0051 21.9491Z' fill='%230E356F'/><path d='M26.9513 29.9235C27.7402 30.7178 28.9901 30.7387 29.7687 29.913C30.5576 29.0769 30.5269 27.8437 29.7585 27.0598L12.6286 9.59572C11.8602 8.80143 10.5898 8.80143 9.81116 9.59572C9.04277 10.3691 9.04277 11.6755 9.81116 12.4594L26.9513 29.9235Z' fill='white'/><path d='M27.8017 29.0561C28.1091 29.3801 28.5905 29.4009 28.9184 29.0561C29.2462 28.7112 29.2258 28.2408 28.9184 27.9168L11.7783 10.4527C11.4812 10.1392 10.9689 10.1392 10.6513 10.4527C10.3542 10.7558 10.3542 11.2889 10.6513 11.5919L27.8017 29.0561Z' fill='%230E356F'/></svg>") no-repeat center/contain;
}
.login_box .login_box_inner .input_box .pw .input-wrapper .toggle-btn #eyeOpen {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M20.0505 28C28.3287 28 34.0454 21.5271 34.0454 19.5049C34.0454 17.4728 28.3184 11.0099 20.0505 11.0099C11.8852 11.0099 6.04541 17.4728 6.04541 19.5049C6.04541 21.5271 11.8749 28 20.0505 28ZM20.0505 26.4338C13.299 26.4338 7.83831 20.9026 7.83831 19.5049C7.83831 18.3253 13.299 12.5761 20.0505 12.5761C26.7714 12.5761 32.2526 18.3253 32.2526 19.5049C32.2526 20.9026 26.7714 26.4338 20.0505 26.4338ZM20.0505 25.0559C23.2368 25.0559 25.7981 22.5282 25.7981 19.5049C25.7981 16.4023 23.2368 13.9539 20.0505 13.9539C16.8438 13.9539 14.2825 16.4023 14.2825 19.5049C14.2825 22.5282 16.8438 25.0559 20.0505 25.0559ZM20.0505 21.3487C18.9851 21.3487 18.1245 20.516 18.1245 19.5049C18.1245 18.4839 18.9851 17.6612 20.0505 17.6612C21.1058 17.6612 21.9664 18.4839 21.9664 19.5049C21.9664 20.516 21.1058 21.3487 20.0505 21.3487Z' fill='%230E356F'/></svg>") no-repeat center/contain;
}
.login_box .login_box_inner .general-error {
  width: 100%;
  max-width: 450px;
  margin: 0px auto;
  text-align: left;
  color: red;
  font-weight: var(--spacein-font-weight-regular);
  line-height: 150%;
}
.login_box .login_box_inner button.login {
  background: #003b83;
  color: #fff;
  width: 100%;
  max-width: 450px;
  border-radius: 10px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 10%);
  padding: 8px 0;
  box-sizing: border-box;
  cursor: pointer;
  font-size: var(--spacein-login-button);
  margin-top: 15px;
}
.login_box .login_box_inner button.login:focus {
  outline-offset: 4px;
}
.login_box .login_box_inner button.login:hover {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 30%);
}
.login_box .login_box_inner .id_save {
  text-align: left;
  font-size: 15px;
  margin: 20px 0 20px 80px;
  line-height: 18px;
}
.login_box .login_box_inner .id_save #id_save {
  margin-top: -5px;
  display: inline-block;
}
.login_box .login_box_inner .login_search {
  overflow: hidden;
  border-top: 1px solid #ddd;
  width: 75%;
  margin: 30px auto 0;
  position: relative;
  padding: 30px 0 0;
  box-sizing: border-box;
  border-top: 1px dotted #ddd;
  overflow: visible;
}
.login_box .login_box_inner .login_search ul {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.login_box .login_box_inner .login_search ul li {
  display: inline-block;
}
.login_box .login_box_inner .login_search ul li a {
  width: 100%;
  height: 100%;
  display: inline-block;
  font-size: var(--spacein-login-button); /*모든 해상도에서 유지*/
  font-weight: var(--spacein-font-weight-bold);
  line-height: 150%;
  padding: 2px 35px;
}
.login_box .login_box_inner .login_search ul li.join {
  border: 1px solid #003b83;
}
.login_box .login_box_inner .login_search ul li.join a {
  color: #003b83;
  box-sizing: border-box;
}
.login_box .login_box_inner .login_search ul li.idpw_s {
  border: 1px solid #999;
}
.login_box .login_box_inner .login_search ul li.idpw_s a {
  box-sizing: border-box;
  color: #848484;
}

/* 회원가입 - 약관 동의 */
.joinBox {
  width: 100%; /*background: linear-gradient(to right, #F1FAFB ,#BACEF3);*/
  box-sizing: border-box;
}
.join_wrap {
  margin: 0 auto;
  overflow: visible;
  background: #fff;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 20px 30px;
}
.join2_wrap {
  width: 768px;
  border: 1px solid #eee;
}
.joinBox .join_wrap .title {
  overflow: hidden;
  text-align: center;
  margin-bottom: 20px;
}
.joinBox .join_wrap .title h3 {
  font-size: var(--spacein-all-title);
  font-weight: var(--spacein-font-weight-bold);
  margin-bottom: 48px;
  color: #003b83;
}
.joinBox .join_wrap .title p span {
  color: red;
}
.joinBox .join_wrap .join-con-wrap {
  overflow: visible;
  width: 100%;
}
.joinBox .join_wrap .join-con-wrap .all {
  font-size: var(--spacein-login-sub-title);
  font-weight: var(--spacein-font-weight-bold);
  box-sizing: border-box;
  padding: 0 0 20px 40px;
  border-bottom: 1px solid #ddd;
  position: relative;
}
/* 회원 가입 약관 동의 체크박스 */
.joinBox .join_wrap .join-con-wrap .all input[type="checkbox"],
.joinBox .join_wrap .join-con-wrap .age_agree input[type="checkbox"],
.joinBox .join_wrap .join-con-wrap .text_area > div input[type="checkbox"] {
  display: none;
}
.joinBox .join_wrap .join-con-wrap .all input[type="checkbox"] + label,
.joinBox .join_wrap .join-con-wrap .age_agree input[type="checkbox"] + label,
.joinBox .join_wrap .join-con-wrap .text_area > div input[type="checkbox"] + label {
  display: inline-block;
  width: var(--spacein-login-sub-title);
  height: var(--spacein-login-sub-title);
  line-height: var(--spacein-login-sub-title);
  border: 1px solid #ddd;
  border-radius: 100px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.joinBox .join_wrap .join-con-wrap .age_agree input[type="checkbox"] + label {
  position: relative;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  flex-shrink: 1;
  margin-right: 16px;
}
.joinBox .join_wrap .join-con-wrap .all input[id="all_c"] + label::after,
.joinBox .join_wrap .join-con-wrap .age_agree input[id="chk_age"] + label::after,
.joinBox .join_wrap .join-con-wrap .text_area > div input[id="inp_03"] + label::after,
.joinBox .join_wrap .join-con-wrap .text_area > div input[id="inp_04"] + label::after {
  content: "\f00c";
  font-size: var(--spacein-input-text);
  width: var(--spacein-login-sub-title);
  height: var(--spacein-login-sub-title);
  line-height: var(--spacein-login-sub-title);
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #d9d9d9;
  font-family: "FontAwesome";
}
.joinBox .join_wrap .join-con-wrap .all input[id="all_c"]:checked + label::after,
.joinBox .join_wrap .join-con-wrap .age_agree input[id="chk_age"]:checked + label::after,
.joinBox .join_wrap .join-con-wrap .text_area > div input[id="inp_03"]:checked + label::after,
.joinBox .join_wrap .join-con-wrap .text_area > div input[id="inp_04"]:checked + label::after {
  content: "\f00c";
  width: var(--spacein-login-sub-title);
  height: var(--spacein-login-sub-title);
  line-height: var(--spacein-login-sub-title);
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  border: 1px solid #003b83;
  border-radius: 100px;
  background: #003b83;
  font-family: "FontAwesome";
}
.joinBox .join_wrap .join-con-wrap .all input[type="checkbox"] + label {
  top: calc(50% - 10px);
  transform: translateY(-50%);
}
/* 14세 이상 회원가입 */
.joinBox .join_wrap .join-con-wrap .age_agree {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.joinBox .join_wrap .join-con-wrap p.age {
  font-size: var(--spacein-login-sub-title);
  color: #fff;
  text-align: center;
  background: #003b83;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  display: inline-block;
  flex-grow: 1;
}
.joinBox .join_wrap .join-con-wrap p.age i {
  margin-left: 10px;
}

.joinBox .join_wrap .join-con-wrap .text_area {
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
  padding: 20px 0;
}
.joinBox .join_wrap .join-con-wrap .text_area > div {
  width: 100%;
  overflow: visible;
  margin-bottom: 40px;
}
.joinBox .join_wrap .join-con-wrap .text_area > div > p {
  width: 100%;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  padding-left: 40px;
  font-size: var(--spacein-login-sub-title);
}
.joinBox .join_wrap .join-con-wrap .text_area > div:last-child {
  margin-bottom: 0;
}
.joinBox .join_wrap .join-con-wrap .text_area > div > div {
  width: 99.5%;
  resize: none;
  height: 300px;
  border: 1px solid #d9d9d9;
  overflow-y: auto;
  margin-bottom: 15px;
  box-sizing: border-box;
  padding: var(--spacein-padding-default-lg);
  font-weight: var(--spacein-font-weight-regular);
  font-size: 14px;
}
.joinBox .join_wrap .join-con-wrap .text_area > div > div > table {
  width: 100% !important;
}
.joinBox .join_wrap .join-con-wrap .text_area > div > div::-webkit-scrollbar {
  width: 5px; /* 스크롤바의 너비 */
}

.joinBox .join_wrap .join-con-wrap .text_area > div > div::-webkit-scrollbar-thumb {
  height: 30%; /* 스크롤바의 길이 */
  background: #ccc; /* 스크롤바의 색상 */
  border-radius: 10px;
}

.joinBox .join_wrap .join-con-wrap .text_area > div > div::-webkit-scrollbar-track {
  background: #eee; /*스크롤바 뒷 배경 색상*/
}

.joinBox .join_wrap .join-con-wrap .text_area > div textarea:focus {
  outline: none;
}
.buttonWrap {
  width: 100%;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  /*padding: 30px 0;*/
}
.buttonWrap button.next {
  font-weight: var(--spacein-font-weight-regular);
  font-size: var(--spacein-login-button);
  line-height: 150%;
  background: #003b83;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  padding: 2px 30px;
  border: 1px solid #003b83;
  border-radius: 100px;
}
.buttonWrap button.prev {
  font-weight: var(--spacein-font-weight-regular);
  font-size: var(--spacein-login-button);
  line-height: 150%;
  color: #003b83;
  cursor: pointer;
  box-sizing: border-box;
  padding: 2px 30px;
  border: 1px solid #003b83;
  border-radius: 100px;
  margin-right: 20px;
}
.buttonWrap button:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 4px;
}
.buttonWrap.join {
  overflow: visible;
}
.buttonWrap.join button:focus {
  outline-offset: 2px;
}
/* 회원가입 - 인증 버튼 */
.certified {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 50px 0;
  margin: 20px 0;
  text-align: center;
  border-top: 1px dotted #bbb;
  border-bottom: 1px dotted #bbb;
}
.certified button.cell-certified {
  box-sizing: border-box;
  padding: 30px 40px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 10%);
  background: #fbfbfb;
  color: black;
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: var(--spacein-login-text);
}
.certified button.cell-certified:hover {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 20%);
}
.certified button.cell-certified i {
  font-size: 50px;
  margin-bottom: 20px;
  color: #003b83;
  display: block;
}

/* 회원가입 - 정보 입력 */
.info_in {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 50px 0 30px;
}
.info_in ul {
  width: 100%;
  overflow: hidden;
}
.info_in ul li {
  overflow: hidden;
  padding-bottom: var(--spacein-list-gap-lg);
  margin-bottom: var(--spacein-list-gap-lg);
  border-bottom: 1px dotted #ddd;
  box-sizing: border-box;
}
.info_in ul li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.info_in ul li p.tit {
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
  color: #003b83;
  margin-bottom: var(--spacein-form-gap);
}
.info_in ul li p.tit span {
  color: red;
}
.info_in ul li > div {
  display: flex;
  gap: 16px;
  width: 100%;
  clear: both;
  margin-bottom: var(--spacein-form-gap);
  align-items: stretch;
}
.info_in ul li > div.inline {
  gap: var(--spacein-grid-gap-xs);
  align-items: flex-start;
  font-weight: var(--spacein-font-weight-regular);
  color: #1d1d1d;
}
.info_in ul li > div.inline i {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  font-size: 13px;
  margin-top: 2px;
  padding: 2px;
  line-height: 17px;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  color: white;
  background-color: #909090;
}
.info_in ul li > div.inline.valid {
  color: #42ac53;
}
.info_in ul li > div.inline.invalid {
  color: red;
}
.info_in ul li > div.inline.invalid i {
  background-color: red;
}
.info_in ul li > div.inline.valid i.info {
  display: none;
}
.info_in ul li > div.inline i.ok {
  display: none;
}
.info_in ul li > div.inline.invalid i.ok {
  display: none;
}
.info_in ul li > div.inline.valid i.ok {
  display: block;
  background-color: #42ac53;
}
.info_in ul li > div button {
  color: #003b83;
  font-weight: var(--spacein-font-weight-bold);
  font-size: var(--spacein-login-text);
  min-width: 125px;
  cursor: pointer;
  border: 1px solid #003b83;
  box-sizing: border-box;
  padding: 5px 15px;
  border-radius: 6px;
}
.info_in ul li > div button:hover {
  background: #003b83;
  color: #fff;
}
.info_in ul li > div > input,
.info_in ul li > div.hp-input div input {
  padding: 10px 16px;
}
.info_in ul li > div > input {
  flex-grow: 1;
}
.info_in ul li > div input[name=mem_name],
.info_in ul li > div input[name=mem_birth],
.info_in ul li > div.gender {
  max-width: 215px;
}
.info_in ul li > div.gender > div {
  display: flex;
  align-items: center;
  gap: 16px;
}
.info_in ul li > div.hp-input {
  max-width: 340px;
}
.info_in ul li > div.hp-input div {
  gap: 0;
  align-items: center;
  width: 100%;
}
.info_in ul li > div.hp-input div input {
  min-width: 0;
  text-align: center;
}
.info_in ul li > div.email-input {
  gap: 0;
}
.info_in ul li > div.email-input input {
  min-width: 0;
  width: 180px;
}
.info_in ul li > div.hp-input span,
.info_in ul li > div.email-input span {
  display: block;
  margin-inline: 16px;
  align-self: center;
}
.info_in ul li > div.email-input .select-wrap {
  border: 1px solid #909090;
  border-radius: 6px;
  margin-left: 16px;
  padding-inline: 8px;
  padding-right: 16px;
  margin-right: 0;
}
.info_in ul li > div.email-input .select-wrap::after {
  right: 8px;
}
.info_in ul li > div.email-input select {

  flex-grow: 1;
  padding-inline: 8px;
  border: none;
  border-radius: 6px;
}
.info_in ul li > div.email-input select:focus {
  border-color: #2974be;
}
.info_in ul li > div input.invalid {
  border-color: red;
}

.info_in ul li > div input.id_inp {
  width: 70%;
}
.info_in ul li > div > div {
  display: flex;
  gap: 8px;
  align-items: center;
}
.info_in ul li > div input[type="radio"] {
  width: var(--spacein-login-text);
  height: var(--spacein-login-text);
  margin: 0;
}
.info_in ul li > div label {
  display: block;
  font-size: var(--spacein-login-text);
}

/* 회원가입 - 아이디 or 비번 찾기 */
.idpw_wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 50px 0;
  position: relative;
}
.idpw_wrap:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  border-right: 1px dotted #aaa;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.idpw_wrap .idpw {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.idpw_wrap .idpw > div {
  width: 49.9%;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  padding-top: 5px;
}
.idpw_wrap .idpw .id_f {
  float: left;
}
.idpw_wrap .idpw .pw_f {
  float: right;
}
.idpw_wrap .idpw > div h3 {
  font-size: var(--spacein-all-title);
  font-weight: var(--spacein-font-weight-regular);
  margin-bottom: 48px;
  position: relative;
  box-sizing: border-box;
  padding-right: 20px;
}
.idpw_wrap .idpw > div h3 span {
  font-weight: var(--spacein-font-weight-bold);
  color: #003b83;
}
.idpw_wrap .idpw .pw_f h3 span {
  color: #007dc3;
}
.idpw_wrap .idpw > div h3 i {
  border-radius: 100px;
  background: #003b83;
  color: #fff;
  font-size: 16px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
}
.idpw_wrap .idpw .pw_f h3 i {
  background: #007dc3;
}
.idpw_wrap .idpw > div .form {
  overflow: hidden;
  display: inline-block;
  border: 1px dotted #ddd;
  box-sizing: border-box;
  padding: 20px 16px;
  width: 70%;
  margin-bottom: var(--spacein-list-gap-sm);
}
.idpw_wrap .idpw > div ul {
  /*width: 80%;*/
  overflow: hidden;
  margin: 0 auto;
}
.idpw_wrap .idpw > div ul li {
  margin-bottom: var(--spacein-form-gap);
}
.idpw_wrap .idpw > div ul li:last-child {
  margin-bottom: 0;
}
.idpw_wrap .idpw > div ul li label {
  width: 25%;
  display: inline-block;
  text-align: start;
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
}
.idpw_wrap .idpw > div ul input {
  width: calc(100% - 32px - 20%);
  padding: 10px 16px;
}
.idpw_wrap .idpw .id_f .form {
  padding: 30px 16px;
  box-sizing: border-box;
  margin-bottom: var(--spacein-list-gap-sm);
}
.idpw_wrap .idpw .buttonWrap button.search {
  cursor: pointer;
  box-sizing: border-box;
  padding: 5px 20px;
  border-radius: 100px;
  color: #fff;
  background: #003b83;
  font-size: var(--spacein-login-button);
  font-weight: var(--spacein-font-weight-bold);
}
.idpw_wrap .idpw .pw_f .buttonWrap button.search {
  background: #007dc3;
}

/* 회원가입 - 아이디 찾기 결과 */
.id_res {
  width: 100%;
  box-sizing: border-box;
  padding: 60px 0;
}
.id_res .res_box {
  width: 70%;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  padding: 50px 20px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin: 0 auto;
  font-size: var(--spacein-login-sub-title);
}
.id_res .res_box p span {
  font-size: 22px;
  color: #003b83;
}
.id_res .buttonWrap button {
  box-sizing: border-box;
  padding: 5px 30px;
  border-radius: 100px;
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  cursor: pointer;
  font-weight: 500;
}
.id_res .buttonWrap button.re {
  color: #003b83;
  border: 1px solid #003b83;
  margin-right: 20px;
  font-size: var(--spacein-login-button);
}
.id_res .buttonWrap button.login {
  font-size: var(--spacein-login-button);
  background: #003b83;
  color: #fff;
}
.id_res .buttonWrap {
  padding: 70px 0 0;
}

/* 내 정보 수정 */
.info_in ul.edit li input.readonly {
  background: #f4f4f4;
}
.info_in_ed {
  padding: 10px 20px 30px;
}

/* 자주 묻는 질문 */
.accordion {
  width: 100%;
  overflow: hidden;
}
.accordion ul {
  width: 100%;
  overflow: hidden;
}
.accordion ul > li {
  width: 100%;
  cursor: pointer;
  border-bottom: 1px solid rgba(41, 110, 178, 20%);
  position: relative;
}
.accordion ul > li:after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  left: 0;
  bottom: 0;
  background: linear-gradient(to right, #3a81c7, #003b83);
}
.accordion ul > li:last-child {
  border-bottom: none;
}
.accordion ul > li:hover:after {
  animation: width_ani 0.7s forwards;
}
@keyframes width_ani {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.accordion ul > li.on:after {
  display: none;
}
.accordion ul > li.on:last-child {
  border-bottom: 1px solid rgba(41, 110, 178, 20%);
}
.accordion ul > li > p {
  box-sizing: border-box;
  padding: var(--spacein-list-gap-lg) calc(var(--spacein-input-search-icon-width) + 32px) var(--spacein-list-gap-lg) 16px;
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
  position: relative;
  display: flex;
  align-items: baseline;
}
.accordion ul > li > p:focus {
  outline-offset: -2px;
  border-radius: 5px;
}
.accordion ul > li > p:after {
  position: absolute;
  font-family: "FontAwesome";
  content: "\f13a";
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--spacein-input-search-icon-width);
  color: #ddd;
}
.accordion ul > li > p span {
  flex-shrink: 0;
  background: #296eb2;
  color: #fff;
  border-radius: 100px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  margin-right: 16px;
}
.accordion ul > li.on > p:after {
  content: "\f139";
  color: #296eb2;
}
.accordion ul > li.on > p {
  color: #296eb2;
}
.accordion ul > li.on div.answer {
  border-top: 1px solid rgba(41, 110, 178, 20%);
}
.accordion ul > li.on div.answer img {
  width: 90% !important;
  height: auto !important;
  margin-bottom: var(--spacein-list-gap-sm);
}
.accordion ul > li div.answer {
  display: none;
  box-sizing: border-box;
  padding: var(--spacein-padding-default-lg);
  background: #f9f9f9;
}
.accordion ul > li div.answer.on {
  display: block;
}
.accordion ul > li div.answer p {
  box-sizing: border-box;
  padding: 10px;
  color: #555;
}
.accordion ul > li div.answer img {
  width: 100% !important;
}

.tab_content .tab-content {
  display: none;
}
.tab_content .tab-content.current {
  display: block;
}

.tab_menu {
  width: 100%;
  margin-bottom: 48px;
}
.tab_menu ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacein-all-card-gap);
}
.tab_menu li {
  flex: 1 1;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 16px;
  cursor: pointer;
  background: #eee;
  border-radius: 100px;
  color: #888;
  font-weight: var(--spacein-font-weight-regular);
  font-size: var(--spacein-all-tab);
}
.tab_menu li:focus,
.tab_menu li.v2 a:focus {
  outline-offset: -2px;
}
.tab_menu li.current {
  background: rgba(41, 110, 178, 20%);
  color: #003b83;
  font-weight: var(--spacein-font-weight-bold);
}
.tab_menu li.v2 {
  padding: 0;
}
.tab_menu li.v2 a {
  height: 100%;
  display: block;
  padding: 10px 16px;
  border-radius: 100px;
}
/* 게시판 뷰 */
.table_view {
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--spacein-list-gap-lg);
}
.table_view .titleBox {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  background: #f4f5f7;
  display: grid;
}
.table_view .titleBox h3.tit {
  font-weight: var(--spacein-font-weight-bold);
  font-size: var(--spacein-all-sub-title);
  line-height: 1.5 !important;
  margin-bottom: 20px;
  /*white-space: nowrap;*/
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.table_view .titleBox ul.info {
  width: 100%;
  overflow: hidden;
  font-size: var(--spacein-all-text-name);
}
.table_view .titleBox ul.info li {
  display: inline-block;
  margin-right: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  /*border-right: 1px solid #ddd;*/
  font-weight: var(--spacein-font-weight-bold);
  color: #888;
}
.table_view .titleBox ul.info li:last-child {
  margin-right: 0;
  border-right: none;
  padding-right: 0;
  display: flex;
  gap: var(--spacein-grid-gap-lg);
}
.table_view .titleBox ul.info li span {
  font-weight: var(--spacein-font-weight-regular);
  margin-right: 5px;
}
.table_view .fileBox {
  overflow: hidden;
  /*border-bottom: 1px solid #ddd;*/
  font-weight: var(--spacein-font-weight-regular);
  color: #555555;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.table_view .fileBox p.lab {
  display: inline-block;
  box-sizing: border-box;
  padding: 15px 20px;
  position: relative;
  flex-shrink: 0;
}
.table_view .fileBox p.lab:after {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30%;
  background: #ddd;
}
.table_view .fileBox p.inp {
  box-sizing: border-box;
  padding: 8px 0;
  color: #999;
  flex: 1 1 calc(100% - 110px);
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  /* position: relative; */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.table_view .fileBox p.inp a {
  margin-bottom: 8px;
  display: -webkit-inline-box;
  overflow: hidden;
  white-space: normal;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-width: calc(100% - 48px);
  word-break: break-all;
}
.table_view .fileBox p.inp.inp_file {
}
.table_view .fileBox p.inp.inp_file a {
  color: rgba(41, 110, 178, 100%);
  width: 100%;
  height: 100%;
  display: block;
  font-weight: var(--spacein-font-weight-bold);
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin-bottom: 0;
  margin-left: 8px;
}
.table_view .fileBox p.inp.inp_file:hover a {
  text-decoration: underline;
}
.table_view .view_con {
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid #ddd;
  word-break: break-all;
  /*margin-bottom: var(--spacein-list-gap-lg);*/
}
.table_view .view_con img {
  width: 100% !important;
}
.buttonWrap_v.qnaButtonWrap {
  justify-content: end;
  gap: 8px;
}
.buttonWrap_v {
  text-align: inherit;
  box-sizing: border-box;
  margin-bottom: var(--spacein-all-sub-title-gap);
  /*padding: 0;*/
}
.buttonWrap_v button {
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 400;
  font-size: var(--spacein-cardnews-button-font-size);
  border-radius: 100px;
}
.buttonWrap_v button.list {
  float: right;
  border: 1px solid #999;
  box-sizing: border-box;
  padding: 5px 20px;
  color: #999;
}
.buttonWrap_v button.list:focus {
  outline-offset: 0;
}
.buttonWrap_v button.input {
  background-color: #296EB2;
  border-color: #296EB2;
  color: white !important;
}
.buttonWrap_v {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: visible;
}

p.qnaNum {
  margin-bottom: unset !important;
}
.buttonWrap_v button.list:hover {
  border: 1px solid rgba(41, 110, 178, 100%);
  color: rgba(41, 110, 178, 100%);
}
.buttonWrap_v div button {
  color: #444;
}
.buttonWrap_v div button i {
  color: rgba(41, 110, 178, 100%);
}
.buttonWrap_v div button.prev_li {
  margin-right: 20px;
  padding-left: 5px;
}
.buttonWrap_v div button.prev_li:hover i {
  animation: arrow_ani1 0.5s forwards;
}
@keyframes arrow_ani1 {
  100% {
    transform: translateX(-5px);
    transition: 0.5s;
  }
}
.buttonWrap_v div button.next_li:hover i {
  animation: arrow_ani2 0.5s forwards;
}
@keyframes arrow_ani2 {
  100% {
    transform: translateX(5px);
  }
}

/* 1:1 문의 */
i.reply_ico {
  transform: rotate(180deg);
  margin-right: 5px;
}
.buttonWrap_v button.reply {
  float: right;
  border: 1px solid #999;
  background: #999;
  box-sizing: border-box;
  padding: 5px 20px;
  color: #ffff;
  margin-left: 10px;
}
.buttonWrap_v button.reply:hover {
  background: #000;
  border: 1px solid #000;
}
.table_list.table_list_board ul li.li_02.reply a {
  position: relative;
  box-sizing: border-box;
  line-height: 26px;
}
span.re {
  box-sizing: border-box;
  padding: 0 8px;
  background: #1d1d1d;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  margin-right: 5px;
  display: inline-block;
  cursor: text;
}

/* 1:1 문의 글쓰기 */
.table_input {
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}
.table_input .form_info {
  position: absolute;
  right: 0;
  top: -56px;
  color: #999999;
}
.table_input .form_info .mark {
  color: #255ce7;
}
.table_input .view_con {
  padding: var(--spacein-list-gap-lg) 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.table_input input,
.table_input textarea {
  padding: 10px 16px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  outline: 0 none;
  font-family: 'Noto Sans KR', sans-serif;
  vertical-align: middle;
  border-radius: 6px;
}
.table_input input:hover,
.table_input textarea:hover,
.table_input input:focus,
.table_input textarea:focus {
  border: 1px solid #296eb2;
}
.table_input .view_con textarea {
  width: 100%;
  resize: none;
  height: 300px;
  overflow-y: auto;
  box-sizing: border-box;
}
.table_input .titleBox {
  border-bottom: none;
  border-top: none;
  padding: 0 0;
  background: none;
  margin-bottom: var(--spacein-form-gap);
  overflow: visible;
}
.table_input .titleBox h3.tit {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.table_input .titleBox h3.tit label,
.table_input .view_con label {
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
  /*color: #003b83;*/
  margin-bottom: var(--spacein-form-gap);
  display: block;
  position: relative;
}
.table_input label sup.mark {
  position: absolute;
  top: -8px;
  left: -8px;
  color: #255ce7;
}
.char_line {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.char_count {
  display: inline;
  white-space: nowrap;
  font-size: var(--spacein-all-text);
  color: #8f8f8f;
  line-height: 150%;
  margin-top: var(--spacein-form-gap);
  align-self: flex-end;
}
.error_msg {
  color: #ff0000;
  line-height: 150%;
  font-size: var(--spacein-all-text);
  margin-top: var(--spacein-form-gap);
  margin-left: 4px;
  visibility: hidden;
}
.limit-exceed {
  color: #ff0000;
}
.table_input .fileBox {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: baseline;
  position: relative;
}
.table_input .fileBox:last-of-type {
  border-bottom: none;
}
.table_input .fileBox p.lab {
  flex-shrink: 1;
}
.table_input .fileBox p.inp {
  flex-grow: 1;
  padding-right: 0;
}
.table_input .fileBox input {
  /*border: none;*/
  padding-right: 140px !important;
  width: 100%;
  color: black;
}
.table_input .fileBox input.selected {
  padding-right: 145px;
}
.table_input .fileBox .file_size,
.table_input .fileBox .clear_button {
  color: #A9A9A9;
  position: absolute;
  top: 50%;
  right: 8px;
  padding: 8px;
  transform: translateY(-50%);
  display: none;
}
.table_input .fileBox .file_size {
  right: 32px;
  font-weight: var(--spacein-font-weight-bold);
  padding-left: 0;
}
.table_input .fileBox .file_size.file_exist,
.table_input .fileBox .clear_button.file_exist {
  top: calc(50% + ((1rem * 1.5 + 10px) / 2));
  transform: translateY(-50%);
}
.table_input .fileBox .file_size,
.table_input .fileBox .clear_button.show {
  display: block;
}
.table_input .file_sub_list {
  list-style: none;
}
.table_input .file_sub_list li {
  position: relative;
  padding-left: 1.25rem;
}
.table_input .file_sub_list li::before {
  content: "※";
  position: absolute;
  left: 0;
}
.table_input .file_sub {
  display: block;
  color: #999999;
}
.table_input .file_sub.last {
  padding-bottom: var(--spacein-padding-default-lg);

}
.table_input .fileBox p.lab {
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
  /*color: #003b83;*/
  padding: 20px 20px 20px 0;
}
.table_input.buttonWrap_v {
  display: flex;
  justify-content: center;
  gap: var(--spacein-grid-gap-lg);
}
.buttonWrap_v button.in {
  float: right;
  border: 1px solid #999;
  background: #999;
  box-sizing: border-box;
  padding: 5px 20px;
  color: #ffff;
}
.buttonWrap_v button.in:hover {
  background: rgba(41, 110, 178, 100%);
  border: 1px solid rgba(41, 110, 178, 100%);
}
.buttonWrap_v button.in:focus {
  outline-offset: 0;
}
.reply_ico {
  color: rgba(41, 110, 178, 100%);
}

/* 1:1 문의 답변 뷰 */
.reply_table {
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: var(--spacein-list-gap-lg);
  background: #fdfdfd;
  border-radius: 20px;
  border: 1px solid #eee;
}
.reply_table .titleBox {
  border-bottom: 1px solid #ccc;
  border-top: none;
  padding: 20px 10px;
  background: none;
}
.reply_table .view_con {
  border-bottom: none;
  padding: 20px 10px;
  white-space: pre-wrap;
}
.replyTitle {
  font-weight: var(--spacein-font-weight-bold);
  font-size: var(--spacein-all-sub-title);
  margin-bottom: var(--spacein-all-sub-title-gap);
  box-sizing: border-box;
  padding: 0 5px 0 0;
}
.replyTitle i {
  color: rgba(41, 110, 178, 100%);
}
.table_input .titleBox_in {
  padding-top: 10px;
  background: none;
}

/* 통합검색 */
.allsearchBox {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 40px 10px;
  /*border-top: 2px solid rgba(41, 110, 178, 100%);*/
  border-bottom: 2px solid rgba(41, 110, 178, 100%);
  position: relative;
}
.allsearchBox h3.resultTxt {
  font-weight: 500;
  font-size: var(--spacein-all-title);
}

.allsearchBox h3.resultTxt .searchWord {
  font-size: var(--spacein-all-title);
  color: rgba(41, 110, 178, 100%);
}
.allsearchBox .search_Box {
  vertical-align: middle;
  margin-bottom: 30px;
}
.allsearchBox .search_Box .p {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.allsearchBox .search_Box .search {
  border: none;
  position: relative;
  box-sizing: border-box;
  padding-left: 130px;
}
.allsearchBox .search_Box .search .in {
  overflow: hidden;
  border: 2px solid;
  border-image: linear-gradient(to right, #003b83, #6aa7e3);
  border-image-slice: 1;
  box-sizing: border-box;
  padding: 5px 10px;
}
.allsearchBox h3.resultTxt .resultNum {
  font-weight: 600;
}

/* 통합검색 탭 */
.allsearchBox .tabBox {
  width: 100%;
}
.allsearchBox .tabBox ul {
  width: 100%;
  overflow: hidden;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -49px;
  padding-bottom: 10px;
  box-sizing: border-box;
  justify-content: center;
  font-size: var(--spacein-all-tab);
}
.allsearchBox .tabBox ul li {
  display: inline-block;
  width: 19%;
  cursor: pointer;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 0;
  border: 1px solid #cccc;
  background: #fff;
  border-right: none;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 15%);
}
.allsearchBox .tabBox ul li:focus {
  outline-offset: -2px;
}
.allsearchBox .tabBox ul li:last-child {
  border-radius: 0 100px 100px 0;
  border-right: 1px solid #ccc;
}
.allsearchBox .tabBox ul li:first-child {
  border-radius: 100px 0 0 100px;
}
.allsearchBox .tabBox ul li.current {
  border: 2px solid rgba(41, 110, 178, 100%);
}
.allsearchBox .tabBox ul li span.num {
  margin-left: 10px;
  color: rgba(41, 110, 178, 100%);
  display: inline-block;
  box-sizing: border-box;
  padding: 1px 15px;
  border: 1px solid rgba(41, 110, 178, 100%);
  border-radius: 100px;
  font-size: var(--spacein-all-breadcrumb);
}
.allsearchBox .tabBox ul li.current span.num {
  color: #fff;
  background: rgba(41, 110, 178, 100%);
}
.tab_menu_search {
  flex-grow: 1;
}
.tab_menu_search .tab-content {
  display: none;
}
.tab_menu_search .tab-content .content {
  margin-bottom: 70px;
}
.tab_menu_search .tab-content .content:last-child {
  margin-bottom: 0;
}
.tab_menu_search .tab-content.current {
  display: block;
}
.tab_menu_search .contentBox {
  box-sizing: border-box;
  padding: 100px 0;
}

/* 통합검색 과정 리스트 */
.tab_menu_search .tab-content .titBox {
  overflow: hidden;
  margin-bottom: 6px;
  box-sizing: border-box;
  padding: 0;
}
.tab_menu_search .tab-content .titBox.titBox_list {
  margin-bottom: 16px;
}
.tab_menu_search .tab-content .titBox h3 {
  font-size: var(--spacein-all-sub-title);
  font-weight: 500;
  display: inline-block;
  float: left;
}
.tab_menu_search .tab-content .titBox h3 span {
  font-size: 18px;
  color: #555555;
}
.tab_menu_search .tab-content .titBox .more {
  float: right;
  display: inline-block;
}
.tab_menu_search .tab-content .titBox .more a {
  width: 100%;
  height: 100%;
  display: block;
  color: #b2c1d3;
  font-weight: 400;
  padding: 2px;
  font-size: var(--spacein-all-text-name);
  cursor: pointer;
  box-sizing: border-box;
}
.tab_menu_search .tab-content .titBox .more a:focus {
  outline-offset: -1px;
}
.tab_menu_search .tab-content .titBox .more:hover a {
  color: #4390dd;
  font-weight: 500;
}

.tab_menu_search .tab-content .listView {
  width: 100%;
}
.tab_menu_search .tab-content .listView ul.list {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: var(--spacein-grid-gap-lg);
  row-gap: var(--spacein-edu-grid-row-gap);
  overflow: visible;
}
.tab_menu_search #tab-1.current .listView ul.list {
  flex-wrap: nowrap;
}
.tab_menu_search .tab-content .listView ul.list li {
  flex: 0 0 calc((100% - (var(--spacein-grid-gap-lg) * 3)) / 4);
  max-width: calc(((1200px) - (var(--spacein-grid-gap-lg) * 3)) / 4);
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  height: auto;
  border-radius: 15px;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 15%);
  border: 1px solid #ddd;
}
.tab_menu_search .tab-content .listView ul.list li p.img {
  height: calc(((100vw) - (var(--spacein-grid-gap-lg) * 3) - 48px) / 4 / 16 * 9);
  max-height: calc(((1200px) - (var(--spacein-grid-gap-lg) * 3)) / 4 / 16 * 9);
  border-bottom: 1px solid #ddd;
}
.tab_menu_search .tab-content .listView ul.list li p.img img {
  width: 100%;
  height: 100%;
  border-radius: 15px 15px 0 0;
}
.tab_menu_search .tab-content .listView ul.list li .text {
  padding: var(--spacein-padding-default-sm);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacein-grid-gap-xs);
}
.tab_menu_search .tab-content .listView ul.list li .text p.category {
  width: 100%;
  font-size: var(--spacein-main-content-text);
  color: #3180d9;
  flex-shrink: 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tab_menu_search .tab-content .listView ul.list li h3.title {
  flex-grow: 1;
  width: 100%;
  height: calc(1rem * 1.5 * 2);
  margin-bottom: 8px;
  font-size: var(--spacein-all-text);
  font-weight: 450;
  line-height: 1.5 !important;
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tab_menu_search .tab-content .listView .more_btn {
  background: #003b83;
  border-radius: 100px;
  display: block;
  margin-left: auto;
}
.tab_menu_search .tab-content .listView .more_btn a {
  font-size: var(--spacein-main-circle_box);
  color: #fff;
  box-sizing: border-box;
  padding: 5px 20px;
  width: 100%;
  height: 100%;
  display: block;
}
.tab_menu_search .tab-content .listView .more_btn a:focus {
  outline-offset: 2px;
  border-radius: 100px;
}
.tab_menu_search .tab-content .listView ul.list li:hover {
  box-shadow: 0 0 10px #003b83;
  border: none;
}

.tab_menu_search .tab-content .listView_pro .more_btn {
  background: #b05d8e;
}
.tab_menu_search .tab-content .listView_pro ul.list li:hover {
  box-shadow: 0 0 10px #b05d8e;
  border: none;
}

.tab_menu_search .tab-content .listView_no {
  text-align: center;
  box-sizing: border-box;
  padding: 60px 0;
  background: #fbfbfb;
  font-size: 20px;
  color: #888;
  font-weight: 400;
  border: 1px solid #eee;
}

.tab_menu_search .tab-content .listView ul.board {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #ddd;
}
.tab_menu_search .tab-content .listView ul.board:last-child {
  border-bottom: 1px solid #ddd;
}
.tab_menu_search .tab-content .listView ul.board li {
  overflow: hidden;
  width: 100%;
}
.tab_menu_search .tab-content .listView ul.board li a {
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  padding: var(--spacein-list-gap-lg) 16px;
}
.tab_menu_search .tab-content .listView ul.board li a:focus {
  outline-offset: -4px;
}
.tab_menu_search .tab-content .listView ul.board li a div.tlt_con {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacein-list-gap-sm);
  gap: 8px;
}
.tab_menu_search .tab-content .listView ul.board li h3.tit {
  flex: 1 1;
  font-size: var(--spacein-all-text-name);
  height: calc(var(--spacein-all-text-name) * 1.5);
  font-weight: var(--spacein-font-weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  white-space: normal;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tab_menu_search .tab-content .listView ul.board li span.date {
  display: inline-block;
  flex-shrink: 0;
  color: #999;
}
.tab_menu_search .tab-content .listView ul.board li div.txt_con {
  width: 100%;
  height: calc(1rem * 1.5);
  color: #444;
  font-size: var(--spacein-all-text);
  font-weight: 400;
  overflow: hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tab_menu_search .tab-content .listView ul.board li span.search_word {
  font-weight: 500;
}
.tab_menu_search .tab-content .listView ul.board li:hover {
  color: rgba(41, 110, 178, 100%);
}
.tab_menu_search .tab-content .listView ul.board li:hover span.date {
  color: rgba(41, 110, 178, 100%);
}

.tab_menu_search .tab-content .listView ul.board li:hover a .tlt_con .tit {
  text-decoration: underline;
}

/* 오픈 콘텐츠 */
p.allNum {
  margin-bottom: var(--spacein-all-sub-title-gap);
  font-size: var(--spacein-all-sub-title);
}
p.allNum span {
  color: #003b83;
}
p.allNum span.kasm {
  color: #B05D8E;
}
.no-result {
  margin-top: 64px;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #ddd;
  padding: 20px;
  text-align: center;
}
.in_con .listView {
  width: 100%;
}
.in_con .listView ul.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: var(--spacein-grid-gap-lg);
  row-gap: var(--spacein-edu-grid-row-gap);
}
.in_con .listView ul.list li {
  width: calc((100% - var(--spacein-grid-gap-lg) * 3) / 4);
}
.in_con .listView ul.list li div.box {
  overflow: hidden;
  background: #fff;
  height: auto;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 15px;
}
.in_con .listView ul.list li:first-child {
  margin: 0;
}
.in_con .listView ul.list li p.img {
  overflow: hidden;
  width: 100%;
  /*height: 150px;*/
  height: calc(((100vw - 48px - var(--spacein-grid-gap-lg) * 3) * 80 / 100) / 4 / 16 * 9);
  border-bottom: 1px solid #ddd;
}
.in_con .listView ul.list li p.img img {
  border-radius: 15px 15px 0 0;
  transition: all 0.3s;
  width: 100%;
  height: 100%;
}
.in_con .listView ul.list li:hover p.img img {
  transform: scale(1.05);
  transition: all 0.3s;
}
.in_con .listView ul.list li .text {
  padding: var(--spacein-grid-gap-sm);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacein-grid-gap-sm);
}
.in_con .listView ul.list li .text p.category {
  font-size: 10px;
  color: #3180d9;
  display: inline-block;
  overflow: hidden;
}
.in_con .listView ul.list li h3.title {
  flex-grow: 1;
  width: 100%;
  height: calc(1rem * 1.5 * 2);
  margin-bottom: var(--spacein-padding-default-sm);
  font-size: var(--spacein-all-text);
  font-weight: 450;
  line-height: 1.5 !important;
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.in_con .listView .more_btn {
  background: #999;
  border-radius: 100px;
  display: block;
}
.in_con .listView .more_btn a {
  font-size: var(--spacein-main-circle_box);
  color: #fff;
  padding: 5px 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
}
.in_con .listView .more_btn a:focus {
  border-radius: 100px;
}
.in_con .listView ul.list li:hover .more_btn {
  background: #003b83;
}
.in_con .listView ul.list li:hover .more_btn.kasm {
  background: #B05D8E;
}
.in_con .listView ul.list li div.box:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 15%);
}
.in_con .listView .preview_btn {
  background: #fff;
  border-radius: 100px;
  display: block;
  border: 1px solid #ddd;
}
.in_con .listView .preview_btn a {
  font-size: var(--spacein-main-circle_box);
  color: #666;
  padding: 5px 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
}
.in_con .listView .preview_btn a:focus {
  border-radius: 100px;
}
.in_con .listView ul.list li:hover .preview_btn {
  border: 1px solid #003b83;
}
.in_con .listView ul.list li:hover .preview_btn.kasm {
  border-color: #B05D8E;
}
.in_con .listView ul.list li:hover .preview_btn a {
  color: #003b83;
}
.in_con .listView ul.list li:hover .preview_btn.kasm a {
  color: #B05D8E;
}
/* 오픈 콘텐츠 - 뷰 페이지 */
.topBox {
  width: 100%;
  display: flex;
  gap: 24px;
}
.topBox p.img {
  display: inline-block;
  float: left;
  width: 35%;
  height: 225px;
}
.topBox p.img img {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
}
.topBox .infoBox {
  display: inline-block;
  float: right;
  width: 63%;
  border-bottom: 1px solid #ddd;
}
.topBox .infoBox h3 {
  font-size: var(--spacein-all-sub-title);
  font-weight: 500;
  box-sizing: border-box;
  padding: 15px 20px;
  text-align: left;
  background: #f4f5f7;
  border: 1px solid #eee;
}
.topBox .infoBox .info {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topBox .infoBox .info ul.list {
  display: inline-block;
  float: left;
  width: 70%;
  overflow: hidden;
}
.topBox .infoBox .info ul.list li {
  width: 100%;
  margin-bottom: 16px;
  overflow: hidden;
}
.topBox .infoBox .info ul.list li i {
  color: #1d1d1d;
}
.topBox .infoBox .info ul.list li:last-child {
  margin-bottom: 0;
}
.topBox .infoBox .info ul.list li p.title {
  display: inline-block;
  float: left;
  width: 30%;
}
.topBox .infoBox .info ul.list li p.con {
  display: inline-block;
  width: 70%;
  font-weight: 400;
}
.topBox .infoBox .info ul.list li p.con.bold {
  color: #B05D8E;
  font-weight: 500;
}
.topBox .infoBox .info ul.list li p.money {
  color: red;
  font-weight: 500;
}

.topBox .button {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
}
.topBox .button button {
  text-align: center;
  box-sizing: border-box;
  padding: 8px 16px;
  width: 100%;
  margin-bottom: 16px;
  color: #888;
  border-radius: 100px;
  font-size: var(--spacein-main-circle_box);
  font-weight: var(--spacein-font-weight-bold);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.topBox .button button:focus-visible {
  outline: 2px solid black;
  outline-offset: -2px;
}
.topBox .button button.interest {
  border: 1px solid #888;
}
.topBox .button button.interest:hover {
  border: 1px solid red;
  color: red;
}
.topBox .button button.preview {
  border: 1px solid #888;
}
.topBox .button button.preview:hover {
  border: 1px solid #003b83;
  color: #003b83;
}
.topBox .button button.preview.kasm:hover {
  border: 1px solid #B05D8E;
  color: #B05D8E;
}
.topBox .button button.application {
  margin-bottom: 0;
  color: #fff;
  background: #4a93da;
}
.topBox .button button.application.kasm {
  background: #B05D8E;
}
.topBox .button button .text {
  width: 4.5rem;
}
.topBox .button button i {
  width: var(--spacein-input-search-icon-width);
  height: var(--spacein-input-search-icon-width);
  line-height: var(--spacein-input-search-icon-width);
}
.topBox .button button.application:hover {
  background: linear-gradient(to right, #003b83, #3a81c7);
}
.topBox .button button.application.kasm:hover {
  background: linear-gradient(to right, #B05D8E, #E3A6CA);
}

/* 오픈 콘텐츠 - 뷰 페이지 - 내용 */
.listCon {
  overflow: hidden;
  box-sizing: border-box;
  margin: 80px 0 50px;
}
.listCon .tabBox {
}
.listCon .tabBox .tabs {
  width: 100%;
  overflow: hidden;
  display: inline-block;
}
.listCon .tabBox .tabs li {
  display: inline-block;
  box-sizing: border-box;
  padding: 10px 30px;
  cursor: pointer;
  color: #888;
  font-weight: 400;
  font-size: var(--spacein-all-tab);
}
.listCon .tabBox .tabs li:hover {
  color: #003b83;
  font-weight: 500;
}
.listCon .tabBox .tabs.kasm li:hover {
  color: #B05D8E;
  font-weight: 500;
}
.listCon .tabBox .tabs li:focus {
  outline-offset: -4px;
}
.listCon .tabBox .tabs li.current {
  color: #003b83;
  font-weight: var(--spacein-font-weight-bold);
  border-bottom: none;
  background: #fff;
  border-bottom: 3px solid #003b83;
}
.listCon .tabBox .tabs li.current.kasm {
  color: #B05D8E;
}
.listCon .tabBox .tabs.kasm li.current {
  color: #B05D8E;
  font-weight: var(--spacein-font-weight-bold);
  border-bottom: none;
  background: #fff;
  border-bottom: 3px solid #B05D8E;
}
.listCon .contentBox {
  width: 100%;
  box-sizing: border-box;
  padding: 40px;
  margin-top: -5px;
  border: 1px solid #ddd;
}
.listCon .contentBox .tab-content {
  display: none;
}
.listCon .contentBox .tab-content.current {
  display: block;
}
.listCon .contentBox #tab-1 .intro {
  border-radius: 20px;
  box-sizing: border-box;
  padding: var(--spacein-padding-default-lg);
  background: #f4f5f7;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid #eee;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
}
.listCon .contentBox #tab-1 .intro.cla_goal {
  background: #fefafd;
  margin-bottom: 40px;
}
.listCon .contentBox #tab-1 .intro > div {
  display: inline-block;
}
.listCon .contentBox #tab-1 .intro div.icon {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
  padding: 16px 0;
  color: #444;
  font-size: var(--spacein-all-text-name);
}
.listCon .contentBox #tab-1 .intro div.icon i {
  font-size: 25px;
  display: block;
  margin-bottom: 8px;
}
.listCon .contentBox #tab-1 .intro div.txt {
  box-sizing: border-box;
  font-weight: var(--spacein-font-weight-regular);
  flex-grow: 1;
}

.data {
  width: 100%;
  overflow: hidden;
}
.data li {
  margin-bottom: 20px;
}
.data li:last-child {
  margin-bottom: 0;
}
.data li p.title {
  width: 130px;
  display: inline-block;
  float: left;
}
.data li p.title i {
  margin-right: 5px;
}
.data li p.con {
  font-weight: 400;
  color: #555;
  cursor: pointer;
  display: inline-block;
}
.data li p.con:hover {
  color: #003b83;
  font-weight: 500;
  text-decoration: underline;
}

/* 오픈 콘텐츠 - 뷰 페이지 - 이수 기준 */
.tableRow {
  width: 99.5%;
  display: table;
  border: 1px solid #ddd;
  border-bottom: none;
  border-right: none;
}
.tableRow ul {
  width: 100%;
  overflow: hidden;
  display: table-row;
}
.tableRow ul li {
  display: table-cell;
  box-sizing: border-box;
  padding: 20px 10px;
  vertical-align: middle;
  text-align: center;
  border-bottom: 1px solid #ddd;
  font-weight: 400;
  border-right: 1px solid #ddd;
  width: 40%;
}
.tableRow ul li.head {
  background: #f4f5f7;
  font-weight: 500;
  width: 15%;
  word-break: auto-phrase;
}
.tableRow ul li.percent p {
  display: inline-block;
  margin-right: 20px;
}
.tableRow ul li span.num {
  color: #000;
  font-weight: 500;
}
.tableRow ul li.three p {
  margin-bottom: 20px;
}
.con_table {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.con_table li {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 24px 0;
  border-bottom: 1px dotted #ddd;
  overflow: hidden;
  display: flex;
  gap: 24px;
}
.con_table li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.con_table li span.num {
  flex-shrink: 0;
  color: #003b83;
  display: inline-block;
  height: 100%;
}
.con_table li span.name {
  display: inline-block;
  height: 100%;
  flex-grow: 1;
}
/* 오픈 콘텐츠 - 뷰 페이지 - 버튼 */
.buttonBox {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.buttonBox button {
  cursor: pointer;
  box-sizing: border-box;
  padding: 8px 25px;
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 400;
}
.buttonBox button:focus {
  outline-offset: -2px;
}
.buttonBox button.list {
  margin-right: 20px;
  border: 1px solid #666;
  color: #666;
}
.buttonBox button.list:hover {
  background: #f8f8f8;
  color: #222;
}
.buttonBox button.application {
  background: #4a93da;
  color: #fff;
}
.buttonBox button.application.kasm{
  background-color: #B05D8E;
}
.buttonBox button.application:hover {
  background: linear-gradient(to right, #003b83, #3a81c7);
}
.buttonBox button.application.kasm:hover {
  background: linear-gradient(90deg, #B05D8E 0%, #E3A6CA 100%);
}

/* 정규 과정 */
.nowBox {
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: var(--spacein-all-card-gap);
}
.nowBox h3.now_tit {
  font-weight: var(--spacein-font-weight-bold);
  font-size: var(--spacein-all-sub-title);
  margin-bottom: var(--spacein-all-sub-title-gap);
  box-sizing: border-box;
  /*padding: 0 10px;*/
}
.nowBox h3.now_tit i {
  color: #003b83;
}

.view_list {
  border: 1px solid #296eb2;
  border-right: none;
  border-bottom: 0;
  width: 99.5%;
  margin: 0 auto;
}
.view_list ul {
  width: 100%;
  overflow: hidden;
  clear: both;
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
  word-break: break-all;
  height: auto;
  border-bottom: 1px solid #296eb2;
}
.view_list ul li {
  display: table-cell;
  padding: 10px 20px;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  font-weight: var(--spacein-font-weight-bold);
  border-right: 1px solid #296eb2;
}
.view_list ul li input.org
{
  width: 100%;
  font-size: 16px;
}
.view_list ul.head {
  background: #f4f5f7;
  font-size: var(--spacein-all-text-name);
}
.view_list ul.head li {
  font-weight: var(--spacein-font-weight-bold);
  color: #296eb2;
  padding: 10px;
}
.view_list ul.head li.kasm {
  color: #B05D8E;
}
.view_list ul.head.kasm li {
  font-weight: var(--spacein-font-weight-bold);
  color: #B05D8E;
  padding: 10px;
}
.view_list ul li.bold {
  color: #B05D8E;
}

.view_list ul .li_01 {
  width: 40%;
}
.view_list ul li.li_02 {
  width: 30%;
}
.view_list ul li.li_03 {
  width: 15%;
}
.view_list ul li.li_04 {
  width: 15%;
}

.now_tablewRow {
  border: 1px solid #296eb2;
  border-right: 0;
  border-bottom: 0;
  display: none;
}
.now_tablewRow ul li.head {
  color: #296eb2;
}
.now_tablewRow ul li.head.kasm {
  color: #B05D8E;
}
.now_tablewRow ul li {
  border-right: 1px solid #296eb2;
  border-bottom: 1px solid #296eb2;
}
.now_tablewRow ul li.con.bold {
  color: #B05D8E;
}
.all_price {
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  padding: var(--spacein-padding-default-lg);
  background: #f9f9f9;
}
.all_price p {
  font-size: 23px;
  font-weight: 400;
}
.all_price p span {
  font-weight: 500;
  color: red;
  font-size: 28px;
}

.listCon .contentBox #tab-1 .selectBox {
  overflow: hidden;
  margin-bottom: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
  border-bottom: 1px dotted #bbb;
}
.listCon .contentBox #tab-1 .selectBox:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.listCon .contentBox #tab-1 .selectBox p.tit {
  margin-bottom: 15px;
  font-size: 18px;
  overflow: hidden;
}
.listCon .contentBox #tab-1 .selectBox p.tit span.num {
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 100%;
  background: #4a93da;
  text-align: center;
  color: #fff;
  font-size: 15px;
  float: left;
}
.listCon .contentBox #tab-1 .selectBox p.tit span.num.kasm {
  background: #B05D8E;
}
.listCon .contentBox #tab-1 .selectBox p.tit span.q {
  display: inline-block;
  width: 96%;
  float: right;
}
.listCon .contentBox #tab-1 .selectBox .select {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 35px;
}
.listCon .contentBox #tab-1 .selectBox .select li {
  font-weight: 400;
  margin-bottom: 10px;
}
.listCon .contentBox #tab-1 .selectBox .select li:last-child {
  margin-bottom: 0;
}

/* 나의 강의실 */
.pop-container.org,
.pop-container.org-detail{
  width: 480px;
}
.pop-container.org .pop-title{
  font-size: 20px;
}
.pop-container.org-detail .pop-title{
  border-radius: 4px;
  background-color: #0a3788;
  padding : 12px;
  color : #fff;
}
.pop-container.org-detail li span{
  font-size: 16px;
}
button.reg-pop{
  background-color: #f4f5f7;
  padding: 4px 12px;
  margin-left : 24px;
}
button.reg-pop:hover{
  background-color: #dbe0eb;
  transition: 0.2s ease;
}
button.close-btn {
  background-color: #f4f5f7;
  margin: 24px auto 0;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  display: block;
}
button.close-btn:hover {
  background-color: #dbe0eb;
}
figure.close-btn{
  position: absolute;
  top: 24px;
  right: 24px;
  margin: 0;
}
figure.close-btn:hover{
  cursor: pointer;
}
figure.close-btn img{
  width: 24px;
  height: 24%;
}
.pop-container.org-detail ul{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 12px;
}
.pop-container.org-detail li {
  display: flex;
  align-items: flex-start;   /* 상단 정렬 (줄바꿈 시 자연스럽게) */
  flex-wrap: wrap;           /* 줄바꿈 허용 */
  height: auto;
  border-bottom: 1px solid #c3c3c3;
}
.pop-container.org-detail li span:first-child{
  min-width: 136px;
  font-weight: 600;
  flex-shrink: 0;
}
.pop-container.org-detail li span:last-child {
  flex: 1;
  word-break: break-word;
  white-space: normal;
}
.red{
  color : #f00;
}

.conlist {
  box-sizing: border-box;
}
.conlist h3 {
  box-sizing: border-box;
  padding: 0 10px;
  margin-bottom: 15px;
  font-size: var(--spacein-all-sub-title);
  font-weight: var(--spacein-font-weight-bold);
}
.conlist h3 i {
  color: #003b83;
}
.conlist .pasing {
  border: 1px solid #ddd;
  border-top: 0;
  padding: 20px 0;
}
.mypage_table {
  border: 1px solid #ddd;
  width: auto;
  border-bottom: 0;
  border-top: 0;
}
.mypage_table ul.head {
}
.mypage_table ul.head li {
  padding: 15px 10px !important;
}
.mypage_table ul li {
  padding: 10px 4px !important;
  font-size: var(--spacein-all-text);
  box-sizing: border-box;
}
.mypage_table ul li.bold {
  color: #b84c97;
}
.mypage_table ul li.li_01 {
  width: 6% !important;
  padding: 15px 4px !important;
}
.mypage_table ul li.li_02 {
  width: 27% !important;
  text-align: start;
  word-break: break-word;
}
.mypage_table ul li.li_03 {
  width: 20% !important;
  line-height: 0.85;
}
.mypage_table ul li.li_03 span{
  height: 5px;
}
.mypage_table ul li.li_04 {
  width: 7.5% !important;
  padding: 15px 4px !important;
}
.mypage_table ul li.li_05 {
  width: 7.5% !important;
}
.mypage_table ul li.li_06 {
  width: 7.5% !important;
}
.mypage_table ul li.li_07 {
  width: 7.5% !important;
}
.mypage_table ul li.li_08 {
  width: 10% !important;
}

.mypage_table ul li.studying {
  color: #42ac53;
}
.mypage_table ul li.completion {
  color: #56547c;
}
.mypage_table ul li.unpaid {
  color: #c53636;
}
.mypage_table ul li.wait {
  color: #000;
}
/*.mypage_table ul li.bold{color:#b84c97;}*/
.mypage_table ul li a {
  font-weight: 500;
}
.mypage_table ul:hover {
  background: #f9f9f9;
}
.mypage_table ul.head:hover {
  background: #f4f5f7;
}
.mypage_table .my_page_table_body:hover li:nth-child(2) {
  text-decoration: underline;
}

.prolist {
  box-sizing: border-box;
  /*padding: 30px 0;*/
}
.prolist h3 {
  box-sizing: border-box;
  padding: 0 10px;
  margin-bottom: 15px;
  font-size: var(--spacein-all-sub-title);
  font-weight: var(--spacein-font-weight-bold);
}
.prolist h3 i {
  color: #003b83;
}
.prolist .pasing {
  border: 1px solid #ddd;
  border-top: 0;
  padding: 20px 0;
}

.only-mobile{
  display: none;
}

/* 나의 강의실 상세 페이지 */
.topBox.myclass {
  flex-wrap: wrap;
}
.topBox .class_name {
  box-sizing: border-box;
  margin-bottom: 20px;
  font-size: var(--spacein-all-sub-title);
  font-weight: var(--spacein-font-weight-bold);
  overflow: hidden;
  padding: 15px 20px;
  background: #f4f5f7;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 0 100%;
}
.topBox .class_name i {
  color: #003b83;
}
.topBox .class_name span {
  display: inline-block;
}
.topBox .class_name span.nameTit {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
}
.topBox .class_name span.name {
  font-weight: var(--spacein-font-weight-bold);
}
.topBox.myclass p.img {
  display: inline-block;
  height: 225px;
  flex: 0 1 35%;
}
.topBox.myclass .infoBox {
  display: inline-block;
  flex: 1 0;
  border-bottom: 1px solid #ddd;
}
.topBox .infoBox .d-day {
  text-align: center;
  background: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  font-size: 18px;
  padding: 10px;
}
.topBox .infoBox .d-day span.num {
  color: red;
  background: rgba(255, 0, 0, 5%);
  box-sizing: border-box;
  padding: 3px 10px;
}
.topBox .my_lec_img img {
  height: 100%;
}
.topBox .infoBox .my_info {
  display: block;
  padding-top: 0;
}
.topBox .infoBox .my_info ul.list p.title {
  width: 23% !important;
}
.topBox .infoBox .my_info ul.list p.con {
  width: 77% !important;
}
.topBox .infoBox .my_info ul.list {
  width: 100%;
  display: block;
  float: inherit;
}
.topBox .infoBox .my_info ul.list li div.con {
  display: inline-block;
  font-weight: var(--spacein-font-weight-regular);
  width: 77%;
}
.topBox .infoBox .my_info ul.list li div.con ul.completion {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.topBox .infoBox .my_info ul.list li div.con ul.completion li {
  display: inline-block;
  width: unset;
  margin-bottom: 0;
}
.topBox .infoBox .my_info ul.list li div.con ul.completion li span {
  font-weight: 500;
  color: #003b83;
}

.topBox .infoBox .my_info ul.list li div.con ul.file {
  width: 100%;
  overflow: hidden;
}
.topBox .infoBox .my_info ul.list li div.con ul.file li {
  width: 100%;
  margin-bottom: 10px;
  font-size: 15px;
}
.topBox .infoBox .my_info ul.list li div.con ul.file li:last-child {
  margin-bottom: 0;
}
.topBox .infoBox .my_info ul.list li div.con ul.file li span.fileName {
  cursor: pointer;
  display: inline-block;
  width: 78%;
  float: right;
  padding-top: 5px;
  box-sizing: border-box;
  overflow: hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.topBox .infoBox .my_info ul.list li div.con ul.file li span.fileName:hover {
  font-weight: 500;
  text-decoration: underline;
}
.topBox .infoBox .my_info ul.list li div.con ul.file li span.tit {
  display: inline-block;
  box-sizing: border-box;
  width: 20%;
  text-align: center;
  background: #f4f5f7;
  padding: 5px 0;
}

.bottomBox .inner {
  width: 100%;
  overflow: visible;
}
.bottomBox .inner .progress_ul {
  width: 100%;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--spacein-grid-gap-sm);
  box-sizing: border-box;
  padding: 80px 0;
}
.bottomBox .inner .progress_ul li {
  flex: 1 1;
  display: inline-block;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 13%);
  border-radius: 12px;
}
.bottomBox .inner .progress_ul li p.tit a {
  display: block;
  width: 100%;
  height: 100%;
}
.bottomBox .inner .progress_ul li:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 20%);
}
.bottomBox .inner .progress_ul li p.tit {
  box-sizing: border-box;
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px dotted #334773;
}
.bottomBox .inner .progress_ul li.all {
  flex: 0 1 17%;
}
.bottomBox .inner .progress_ul li.all p.tit {
  border-bottom: 1px dotted darkred;
}
.bottomBox .inner .progress_ul li .show {
  vertical-align: middle;
  height: 85px;
}
.bottomBox .inner .progress_ul li.all .show .show_inner span.all_score {
  font-size: 25px;
  position: absolute;
  color: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.bottomBox .inner .progress_ul li .show {
  /* border:1px solid #ddd;*/
  text-align: center;
}
.bottomBox .inner .progress_ul li .show .show_inner {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 12px 0;
  position: relative;
  height: 100%;
}
.bottomBox .inner .progress_ul li .show .show_inner .progressBox {
  height: 10px;
  width: 80%;
  background: #f1f1f1;
  margin: 8px auto 0;
  border-radius: 20px;
}
.bottomBox .inner .progress_ul li .show .show_inner .progressBox .progress {
  background: #334773;
  height: 100%;
  border-radius: 20px;
}
.bottomBox .inner .progress_ul li .show .show_inner a {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}
.bottomBox .inner .progress_ul li .show .show_inner span.score {
  display: inline-block;
  font-size: 25px;
}
.bottomBox .inner .progress_ul li .show .show_inner span.score.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.bottomBox .inner .progress_ul li .show .show_inner span.test_score {
  color: #56547c;
  font-weight: bold;
  cursor: pointer;
}
.bottomBox .inner .progress_ul li.stateBox {
  flex: 0 1 16%;
  text-align: center;
  box-shadow: none;
  background: none;
}
.bottomBox .inner .progress_ul li.stateBox .state {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bottomBox .inner .progress_ul li.stateBox .state form {
  width: 100%;
}
.bottomBox .inner .progress_ul li.stateBox .state .studying {
  background: #42ac53;
}
.bottomBox .inner .progress_ul li.stateBox .state .completion {
  background: #56547c;
}
.bottomBox .inner .progress_ul li.stateBox .state .unpaid {
  background: #c53636;
}
.bottomBox .inner .progress_ul li.stateBox .state .wait {
  background: #000;
  box-sizing: border-box;
}
.bottomBox .inner .progress_ul li.stateBox .state p {
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
  flex: 1 1;
  width: 100%;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 설문조사, 수료증 출력 버튼 */
.bottomBox .inner .progress_ul li.stateBox .state button.com_print {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--spacein-grid-gap-sm);
  font-weight: var(--spacein-font-weight-bold);
  font-size: var(--spacein-all-text);
  padding: 5px 15px;
  background: #f4f5f7;
  border-radius: 6px;
  color: #000;
}
.bottomBox .inner .progress_ul li.stateBox .state button.com_print:hover {
  background: #dbe0eb;
}
.bottomBox .inner .progress_ul li.stateBox .state button.com_print.survey_score {
  background: #334773;
  color: #fff;
}
.bottomBox .inner .progress_ul li.stateBox .state button.com_print.survey_score:hover {
  background: #606570;
}
.bottomBox .inner .progress_ul .survey-sub {
  flex: 1 0 100%;
  color: #aaa;
}
/* 나의 강의실 상세 학습 현황 */
/* accordion */
.mypage_learning_list ul {
  box-sizing: border-box;
  border: 1px solid #0E356F;
}
.mypage_learning_list ul li {
  border-bottom: 1px solid #0E356F;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.mypage_learning_list ul > li .title:hover .cha_num,
.mypage_learning_list ul > li .title:hover .cha_name{
  opacity: 0.5;
}
.mypage_learning_list ul > li:hover:after {
  animation: none;
}
.mypage_learning_list ul li:last-child {
  border-bottom: none;
}
.mypage_learning_list ul li .title {
  padding: 10px 24px;
  margin: 0;
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
  color: #296EB2;
  background-color: #F4F5F7;
  display: flex;
  gap: var(--spacein-grid-gap-lg);
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.mypage_learning_list ul li.on .title {
  border-bottom: 1px solid #0E356F;
}
.mypage_learning_list ul li .title .cha_num {
  flex-shrink: 1;
  margin-left: 16px;
}
.mypage_learning_list ul li .title .cha_name {
  flex: 1 0;
  overflow: hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.mypage_learning_list ul li .title .study_btn{
  background: #CBD9DC;
  box-sizing: border-box;
  padding: 4px 24px;
  font-weight: var(--spacein-font-weight-bold);
  color: black;
}
.mypage_learning_list ul li .title .study_btn:hover {
  background: #dbe0eb;
}
.mypage_learning_list ul > li .title:hover:has(.study_btn:hover) .cha_num,
.mypage_learning_list ul > li .title:hover:has(.study_btn:hover) .cha_name {
  opacity: 1;
}
.mypage_learning_list ul li .info {
  display: none;
  cursor: default;
}
.mypage_learning_list ul li .info .info_dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding: 8px 24px 8px 24px;
}
.mypage_learning_list ul li .info .info_dl div.row {
  display: flex;
  flex: 1 1;
  border-collapse: collapse;
  flex-direction: column;
  text-align: center;
}
.mypage_learning_list ul li .info .info_dl div.row dt {
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
  padding-block: 8px;
  border-bottom: 1px solid #AFAFAF;
}
.mypage_learning_list ul li .info .info_dl div.row dd {
  font-size: var(--spacein-all-text);
  padding-block: 8px;
  color: #B05D8E;
  flex: 1 1;
}

.bottomBox2 {
  overflow: hidden;
  margin-bottom: 50px;
}
.bottomBox2 .title {
  font-weight: var(--spacein-font-weight-bold);
  font-size: var(--spacein-all-sub-title);
  margin-bottom: 15px;
  box-sizing: border-box;
  overflow: hidden;
}
.bottomBox2 .title strong {
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
}
.bottomBox2 .title i {
  color: #003b83;
}
.mypage_tableRow {
  display: none;
}
.view_wrap {
  width: 100%;
  height: 100%;
}
.view_wrap .inner {
  width: 100%;
  overflow: hidden;
}
.view_wrap .inner > .head {
  background: #003b83;
  color: #fff;
  box-sizing: border-box;
  padding: 8px 24px;
}
.view_wrap .inner > .head h3 {
  font-size: var(--spacein-all-sub-title);
  font-weight: var(--spacein-font-weight-bold);
}
.view_wrap .inner .view_content {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--spacein-padding-default-lg);
}
.view_wrap .inner .view_content .tableRow_view {
  display: block;
  border: 1px solid #888;
}
.view_wrap .inner .view_content .tableRow_view ul {
  display: table;
  height: auto;
  table-layout: fixed;
  overflow: hidden;
  border-bottom: 1px solid #888;
}
.view_wrap .inner .view_content .tableRow_view ul:last-child {
  border-bottom: 0;
}
.view_wrap .inner .view_content .tableRow_view ul li.head {
  width: 13%;
  text-align: center;
  background: #d2dbe8;
  font-weight: var(--spacein-font-weight-bold);
}
.view_wrap .inner .view_content .tableRow_view ul li {
  padding: 10px;
  width: auto;
  text-align: left;
  border-bottom: 0;
  border-right: 1px solid #888;
  font-weight: var(--spacein-font-weight-bold);
  word-break: break-word;
}
.view_wrap .inner .view_content .tableRow_view ul li:last-child {
  border-right: 0;
}
.view_wrap .inner .view_content .tableRow_view ul li.w100 {
}

.quizBox {
  margin-top: 30px;
}
.quizBox .quiz {
  width: 100%;
  overflow: hidden;
  margin-bottom: 60px;
}
.quizBox .quiz:last-child {
  margin-bottom: 10px;
}
.quizBox .quiz .top {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: var(--spacein-list-gap-sm) 0;
}
.quizBox .quiz .top h3 {
  font-weight: var(--spacein-font-weight-bold);
  font-size: var(--spacein-all-text-name);
  display: inline-block;
  word-break: break-all;
  flex: 1 0 50%;
  order: 0;
}
.quizBox .quiz .top span.num {
  width: var(--spacein-quiz-num-width);
  height: var(--spacein-quiz-num-width);
  line-height: var(--spacein-quiz-num-width);
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
  text-align: center;
  background: #003b83;
  color: #fff;
  border-radius: calc(var(--spacein-quiz-num-width) / 2);
  display: inline-block;
  flex-shrink: 1;
  order: 0;
}
.quizBox .quiz .top span.num.wrong {
  background: red;
}
.quizBox .quiz .top span.num.answer {
  background: green;
}
.quizBox .quiz .top p.score {
  flex-shrink: 1;
  display: inline-block;
  font-size: var(--spacein-all-text);
  color: #888;
  font-weight: var(--spacein-font-weight-regular);
  order: 1;
}
.quizBox .quiz .top p.explan {
  flex: 1 1 100%;
  display: inline-block;
  float: left;
  box-sizing: border-box;
  background: #f5f5f5;
  border-radius: 10px;
  padding: var(--spacein-padding-default-sm);
  margin-top: var(--spacein-list-gap-lg);
  position: relative;
  order: 2;
  word-break: break-all;
}

.quizBox .quiz .check {
  width: 100%;
  padding: var(--spacein-list-gap-sm) 40px !important;
  padding-right: var(--spacein-list-gap-sm) !important;
  overflow: hidden;
  box-sizing: border-box;
}
.quizBox .quiz .check ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacein-grid-gap-xs);
  align-items: center;
}
.quizBox .quiz .check ul li {
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--spacein-grid-gap-xs);
}
.quizBox .quiz .check ul li.wrong {
  color: red;
  font-weight: bold;
  position: relative;
}
.quizBox .quiz .check ul li.wrong span.num {
  background: red;
  color: #fff;
}
.quizBox .quiz .check ul li.wrong:after {
  position: absolute;
  content: "오답";
  color: red;
  left: -36px;
  top: 0;
  transform: translateY(0);
}
.quizBox .quiz .check ul li.answer {
  color: green;
  font-weight: bold;
  position: relative;
}
.quizBox .quiz .check ul li.answer span.num {
  background: green;
  color: #fff;
}
.quizBox .quiz .check ul li.answer:after {
  position: absolute;
  content: "정답";
  color: green;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
}
.quizBox .quiz .check ul li span.num {
  width: var(--spacein-all-text-name);
  height: var(--spacein-all-text-name);
  line-height: var(--spacein-all-text-name);
  text-align: center;
  display: inline-block;
  border-radius: 100px;
  font-weight: var(--spacein-font-weight-bold);
  color: #fff;
  background: #888;
  flex-shrink: 1;
}
.quizBox .quiz .check ul li span.content {
  display: inline-block;
  word-break: break-all;
  flex: 1 0;
}
.quizBox .quiz .info {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--spacein-padding-default-sm);
  margin-top: var(--spacein-list-gap-sm);
  background: #f7f7f7;
  border-radius: 10px;
}
.quizBox .quiz .info p span {
  font-weight: var(--spacein-font-weight-bold);
  box-sizing: border-box;
  padding: 3px 10px;
  border-radius: 10px;
  display: inline-block;
  height: 100%;
}
.quizBox .quiz .info p.answer,
.quizBox .quiz .info p.tip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacein-grid-gap-xs);
  margin-bottom: var(--spacein-list-gap-sm);
  word-break: break-all;
  flex-grow: 1;
}
.quizBox .quiz .info p.answer span:first-child {
  flex-shrink: 1;
  background: green;
  color: #fff;
}
.quizBox .quiz .info p.answer span.ans,
.quizBox .quiz .info span.feedback {
  flex: 1 0 70%;
  padding: 0;
}
.quizBox .quiz .info p.tip.feedback {
  display: flex;
}
.quizBox .quiz .info p.tip:last-child {
  margin-bottom: 0;
}
.quizBox .quiz .info p.tip span.tit {
  background: #887bb0;
  color: #fff;
}
.quizBox .quiz .info p.tip span.score {
  float: inherit;
  margin-top: 0;
  margin-right: 0;
  padding: 0;
}
.quizBox .quiz .info p.tip textarea {
  margin-top: 10px;
  height: 100px;
  resize: none;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #ddd;
}
.quizBox .quiz .write {
  padding: var(--spacein-padding-default-sm) 0 !important;
}
.quizBox .quiz .check p.tit {
  font-size: var(--spacein-all-text);
  margin-bottom: var(--spacein-list-gap-sm);
}
.quizBox .quiz .check p.tit i {
  color: #547bae;
  margin-right: 8px;
}
.quizBox .quiz .check .answerBox {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
}
.quizBox .quiz .check .answerBox a {
  width: 100%;
  height: 100%;
  display: block;
}
.quizBox .quiz .check .answerBox a:hover {
  text-decoration: underline;
}
.quizBox .quiz img {
  flex: 1 1 90%;
  width: auto !important;
  max-width: 100% !important;
  margin-top: 10px;
}

.view_content .view_button_wrap {
  width: 100%;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  padding: 15px 0;
}
.view_content .view_button_wrap button {
  box-sizing: border-box;
  padding: 5px 15px;
  cursor: pointer;
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
.view_content .view_button_wrap button.close {
  border: 1px solid #e2e2e2;
}
.view_content .view_button_wrap button.close:hover {
  border: 1px solid #1d1d1d;
}
.view_content .view_button_wrap button.enter {
  background: #4a93da;
  color: #fff;
  margin-left: 10px;
}
.view_content .view_button_wrap button.enter:hover {
  background: linear-gradient(to right, #003b83, #3a81c7);
}

.view_wrap .quizBox .quiz {
  margin-bottom: 30px;
}
.view_wrap .quizBox .quiz .check ul li {
  /*display: block;*/
}
.view_wrap .quizBox .quiz .check ul li.s_check label span.num {
  background: #60a4e7;
  color: #fff;
}
.view_wrap .quizBox .quiz .check ul li.s_check label span.content {
  color: #60a4e7;
}
.view_wrap .quizBox .quiz .check {
  padding: var(--spacein-list-gap-sm);
}
.view_wrap .check input[type="checkbox"] {
  display: none;
}
.view_wrap .check input[type="checkbox"] + label {
  cursor: pointer;
  flex-grow: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.view_wrap .check input[type="checkbox"].check + label {
  color: #60a4e7;
}

/*.input_wrap .check input[type="checkbox"]:checked + label span.num{background: #60a4e7; color:#fff;}
.input_wrap .check input[type="checkbox"]:checked + label span.content{color: #60a4e7;}
*/

.input_wrap .check input[type="checkbox"] + label:hover span.num {
  background: #60a4e7;
  color: #fff;
}
.input_wrap .check input[type="checkbox"] + label:hover span.content {
  font-weight: 500;
  color: #60a4e7;
}

.input_wrap .check input[type="checkbox"]:checked + label span.num {
  background: #60a4e7;
}
.input_wrap .check input[type="checkbox"]:checked + label {
  color: #60a4e7;
}

.input_wrap .quizBox .write .answer textarea {
  resize: none;
  width: 100%;
  min-height: 200px;
  height: auto;
  box-sizing: border-box;
  padding: var(--spacein-padding-default-lg);
  border: 1px solid #ddd;
  border-radius: 20px;
  z-index: -1;
}

/* 수료증 */
.completion_wrap {
  background: url("/img/common/completion_bg.webp") no-repeat top;
  height: 950px;
  font-family: "NotoSerifKR", serif;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}
.completion_wrap .inner {
  overflow: hidden;
  box-sizing: border-box;
  padding: 193px 0 0;
  width: 100%;
  height: 100%;
  position: relative;
}
.completion_wrap .inner .titleBox {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.completion_wrap .inner .titleBox h2.tit {
  font-size: 60px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 40px;
}
.completion_wrap .inner .titleBox .infoBox {
  box-sizing: border-box;
  padding: 0 145px;
  overflow: hidden;
}
.completion_wrap .inner .titleBox .infoBox ul {
  width: 100%;
  overflow: hidden;
}
.completion_wrap .inner .titleBox .infoBox ul li {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
  display: flex;
}
.completion_wrap .inner .titleBox .infoBox ul li:last-child {
  margin-bottom: 0;
}
.completion_wrap .inner .titleBox .infoBox ul li p.title {
  display: flex;
  float: left;
  width: 20%;
  justify-content: space-between;
  margin-right: 10px;
}
.completion_wrap .inner .titleBox .infoBox ul li > span {
  width: 80%;
  overflow: hidden;
  display: inline-block;
  text-align: left;
}
.completion_wrap .inner .contentBox {
  margin: 30px auto 0;
  box-sizing: border-box;
  padding: 0 100px;
  text-align: center;
}
.completion_wrap .inner .contentBox p {
  font-size: 22px;
  line-height: 1.9;
}
.completion_wrap .inner .dateBox {
  position: absolute;
  bottom: 23%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.completion_wrap .inner .dateBox p {
  text-align: center;
  font-size: 20px;
}
.completion_wrap .inner .stempBox {
  text-align: center;
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px 0 38px;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.completion_wrap .inner .stempBox p {
  font-size: 45px;
  display: inline-block;
  font-weight: 500;
}
.completion_wrap .inner .stempBox .stemp {
  display: inline-block;
  position: absolute;
  width: 120px;
  height: 120px;
  border: 0 solid #ddd;
  top: 50%;
  transform: translateY(-50%);
  right: 12%;
}
.completion_wrap .inner .stempBox .stemp img {
  width: 100% !important;
}

/* 학습창 */
/* 비디오 조절 */
/*.learning_wrap .inner .videoBox {*/
/*  display: block;*/
/*  box-sizing: border-box;*/
/*  margin: 0 auto;*/
/*}*/
/*.learning_wrap .inner .videoBox iframe {*/
/*  width: 1150px;*/
/*  height: 670px;*/
/*  border-width: 0px;*/
/*  display: inline-block;*/
/*}*/

body.learning {
  font-family: "Pretendard GOV Variable", "Pretendard GOV", "Noto Sans KR", sans-serif !Important;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 1.0);
  display: flex;
  justify-content: center;
}
.learning_wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: scroll;
  overflow-y: scroll;
  box-sizing: border-box;
  border: none;
  display: flex;
  justify-content: center;
  transition: 0.3s ease;
}
.learning_wrap.fullscreen-ios {
  overflow: hidden;
  padding: 0;
}
.learning_wrap #toast-container {
  position: fixed;
  top: calc(1% + 73px + 10px);
  right: 0;
  /*transform: translateX(50%);*/
  z-index: 9999;
}
.learning_wrap #toast-container .toast {
  max-width: 400px;
  margin-inline: 20px;
  margin-bottom: 15px;
  padding-inline: 24px;
  padding-block: 15px;
  color: #000000;
  background-color: #FDEEEE;
  border-radius: 5px;
  font-size: 15px;
  line-height: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.3s ease;
  white-space: pre-line;
}
.learning_wrap #toast-container .toast.show {
  transform: translateX(0);
  opacity: 1;
}
.learning_wrap .inner {
  width: 100%;
  max-width: 1248px;
  height: 100%;
  padding-top: 1%;
  padding-inline: 24px;
  box-sizing: border-box;
  border: none;
  transition: 0.3s ease;
}
.learning_wrap .inner .nameBox_m {
  padding: 10px;
}
.learning_wrap .inner .nameBox_m .class_name {
  margin-bottom: 15px;
  font-size: 1.4rem;
  font-weight: 800;
}
.learning_wrap .inner .nameBox_m .sub_name {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.learning_wrap .inner .sub_name .step {
  font-size: 1.1rem;
  font-weight: 500;
  color: #4589E1;
}
.learning_wrap .inner .sub_name .cha_name {
  margin-left: 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
}
.learning_wrap .inner .videoBox {
  height: calc((100vw - 48px) / 16 * 9 + var(--meta_control_page_area_height));
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  margin-bottom: 10px;
}

@media screen and (orientation: landscape) {
  .learning_wrap .inner {
    width: 80%;
    max-width: 1248px;
  }
  .learning_wrap .inner .videoBox {
    height: calc((80vw - 48px) / 16 * 9 + var(--meta_control_page_area_height));
    max-height: calc(1200px / 16 * 9 + var(--meta_control_page_area_height));
  }
  .learning_wrap .inner .videoBox.embed {
    height: calc((80vw - 48px) / 16 * 9);
    max-height: calc(1200px / 16 * 9);
  }
}
.learning_wrap.fullscreen-ios .inner .videoBox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 0 0;
  z-index: 95;
}
.learning_wrap .inner .buttonBox2 {
  height: var(--learing_wrap_button_box2_height);
  padding-inline: 16px;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7D7D7D;
  background-color: #1E1D21;
}
.learning_wrap .inner .buttonBox2 .breadcrumbBox .breadcrumb_root > * {
  margin-inline-end: 0.5rem;
}
.learning_wrap .inner .buttonBox2 .endBtn {
  height: 32px;
  font-size: 1rem;
  padding-inline: 1.5rem;
  border-radius: 5px;
  color: white;
  background-color: #4589E1;
}
.learning_wrap .inner .videoBox iframe {
  width: 100%;
  height: 100%;
  border: none;
  box-sizing: border-box;
  transition: 0.3s ease;
  background-color: black;
}
.learning_wrap .inner .buttonBox_m .endBtn {
  width: 100%;
  height: 2.75rem;
  font-size: 17px;
  box-sizing: border-box;
  display: none;
  border-radius: 10px;
  color: white;
  background-color: #4589E1;
}
.learning_wrap .inner .infoBox {
  margin-top: 10px;
  padding-block: 20px;
  padding-inline: 35px;
  background-color: #FDEEEE;
  border-radius: 10px;
}
.learning_wrap .inner .infoBox div {
  display: flex;
  align-items: baseline;
  gap: 15px;
}
.learning_wrap .inner .infoBox div i {
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
  color: rgb(204, 0, 0);
  border-radius: 50%;
  border: 1px solid rgb(204, 0, 0);
}
.learning_wrap .inner .infoBox div span {
  font-size: 16px;
  line-height: 24px;
}
/* 학습창 게시판 */
.learning_wrap .inner .boardBox {
  width: 100%;
}
.learning_wrap .inner .boardBox button.openBtn {
  position: absolute;
  left: -30px;
  top: 50%;
  width: 30px;
  height: 75px;
  background: rgba(0, 0, 0, 22%);
  transform: translateY(-50%);
}
.learning_wrap .inner .boardBox button.openBtn:after {
  position: absolute;
  content: "\f105";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: "FontAwesome";
  font-size: 20px;
}
.learning_wrap .inner .board_inner {
  width: 100%;
  height: 100%;
}
.learning_wrap .inner .board_inner.open {
  display: none;
}
.learning_wrap .inner button.openBtn.arrow:after {
  content: "\f104";
}
.learning_wrap .inner .boardBox .mainTit {
  text-align: center;
  font-weight: 500;
  font-size: 25px;
  background: linear-gradient(to right, #003b83, #3a81c7);
  box-sizing: border-box;
  padding: 10px;
  color: #fff;
  border-radius: 30px 0 0 0;
}
.learning_wrap .inner .boardBox .bottomBox {
  background: #fff;
  border-radius: 0 0 0 30px;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 30px;
  height: 100%;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .nameBox {
  width: 100%;
  height: 120px;
  margin-bottom: 10px;
  overflow: hidden;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .nameBox .class_name {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .nameBox .class_name i {
  margin-right: 5px;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .nameBox p.sub_name {
  font-size: 16px;
  color: #555555;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .nameBox p.sub_name span {
  display: inline-block;
  box-sizing: border-box;
  padding: 1px 15px;
  color: #fff;
  background: #555;
  font-weight: 400;
  margin-right: 5px;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board {
  width: 100%;
  overflow: hidden;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning ul {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning ul li {
  width: var(--tab_menu_lning_tab_link_width);
  height: var(--tab_menu_lning_tab_link_height);
  line-height: var(--tab_menu_lning_tab_link_height);
  text-align: center;
  color: #7D7D7D;
  font-size: var(--tab_menu_lning_tab_link_font_size);
  cursor: pointer;
  box-sizing: border-box;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning ul li.hover{
  color: #4589E1;
  opacity: 0.5;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning ul li:focus {
  outline-offset: -2px;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning ul li:last-child {
  border-right: 0;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning ul li.current {
  color: #4589E1;
  font-weight: 600;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning .writeBtn {
  display: none;
  height: 34px;
  font-size: 17px;
  padding-inline: 1.5rem;
  border-radius: 5px;
  color: white;
  background-color: #4589E1;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning .writeBtn {
  outline-offset: -2px;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_under_lning {
  display: flex;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_under_lning div {
  width: var(--tab_menu_lning_tab_link_width);
  border-bottom: 3px solid #DADADA;
  margin-bottom: 10px;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_under_lning div.hover {
  border-bottom: 3px solid #4589E1;
  opacity: 0.5;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_under_lning div.last {
  flex-grow: 1;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_under_lning div.current {
  border-bottom: 3px solid #4589E1;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .content_lning {
  width: 100%;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .content_lning .tab-content {
  display: none;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .content_lning .tab-content.current {
  display: inline-block;
  width: 100%;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .content_lning .tab-content p.no_list {
  width: 100%;
  text-align: center;
  align-self: center;
  padding-block: 50px;
  color: #555555;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .content_lning .tab-content .content {
  display: none;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .content_lning .tab-content .content.current {
  width: 100%;
  display: inline-block;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .buttonBox2 {
  width: 100%;
  overflow: hidden;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .buttonBox2 button.writeBtn {
  float: left;
  color: #003b83;
  border: 1px solid #003b83;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .buttonBox2 button.writeBtn:hover {
  background: #003b83;
  color: #fff;
}

/* 학습창 페이징 버튼 */
.learning_wrap .inner .arrowBox {
  height: var(--meta_control_page_area_height);
  background-color: #1e1d21;
  border-radius: 0 0 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  color: #4589E1;
}
.learning_wrap .inner .arrowBox button {
  color: #4589E1;
  font-size: var(--meta_control_page_button_image_size);
  padding-inline: var(--meta_control_page_button_padding_inline);
  padding-block: 5px;
}
.learning_wrap .inner .arrowBox button i {
  width: var(--meta_control_page_button_image_size);
  height: var(--meta_control_page_button_image_size);
  line-height: var(--meta_control_page_button_image_size);
  margin-inline: var(--meta_control_page_button_padding_inline);
}
.learning_wrap .inner .arrowBox button span {
  padding-inline: var(--meta_control_page_button_padding_inline);
}
.learning_wrap .inner .arrowBox button.next {
  margin-left: 5px;
  float: right;
}
.learning_wrap .inner .arrowBox button:hover {
  opacity: 0.6;
}
.learning_wrap .inner .arrowBox .page_num_area {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
  color: #7D7D7D;
  font-size: var(--meta_control_page_num_font_size);
  font-weight: 400;
}
.learning_wrap .inner .arrowBox .page_num_area span{
  margin-inline: var(--meta_control_page_num_font_size);
  line-height: 3rem;
}
/* 일반 게시판 */
.learning_wrap .tab-content .boardList {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
  overflow: hidden;
}
.learning_wrap .tab-content .boardList::-webkit-scrollbar {
  width: 3px; /* 스크롤바의 너비 */
}

.learning_wrap .tab-content .boardList::-webkit-scrollbar-thumb {
  height: 10%; /* 스크롤바의 길이 */
  background: #9b9b9b; /* 스크롤바의 색상 */

  border-radius: 10px;
}

.learning_wrap .tab-content .boardList::-webkit-scrollbar-track {
  background: #ddd; /*스크롤바 뒷 배경 색상*/
}
.learning_wrap .tab-content .boardList .boardUl {
  overflow: hidden;
  background: #fff;
  padding-inline: 8px;
}
.learning_wrap .tab-content .boardList .boardUl li.list {
  width: 100%;
  margin-block: 10px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
}
.learning_wrap .tab-content .boardList .boardUl li.list.list_noti {
  background: #E5EDF7;
}
.learning_wrap .tab-content .boardList .boardUl li.list.list_noti ul.subInfo li {
  color: #555 !important;
}
.learning_wrap .tab-content .boardList .boardUl li.list a {
  height: 100%;
  padding-block: 20px;
  padding-inline: 35px;
  display: flex;
  flex-direction: column;
  align-items: baseline;
}
.learning_wrap .tab-content .boardList .boardUl li.list a:hover {
  background-color: #E5EDF7;
}
.learning_wrap .tab-content .boardList .boardUl li.list a:focus {
  outline: none;
  border: 2px solid #4589E1;
  border-radius: 10px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a.expanded {
  padding-block: 0;
  padding-inline: 0;
  background-color: #F7FBFF;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .topBox {
  display: flex;
  align-items: baseline;
  width: 100%;
}
.learning_wrap .tab-content .boardList .boardUl li.list a.expanded .topBox {
  width: 100%;
  box-sizing: border-box;
  padding-block-start: 20px;
  padding-block-end: 10px;
  padding-inline: 35px;
  background-color: #E5EDF7;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox {
  width: 100%;
  flex-grow: 1;
  box-sizing: border-box;
  overflow: hidden;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox {
  display: flex;
  flex-grow: 1;
  margin-bottom: 10px;
  overflow: hidden;
  justify-content: space-between;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox p.tit {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--spacein-all-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox ul.subInfo {
  flex-shrink: 0;
  display: flex;
  white-space: nowrap;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox ul.subInfo li {
  display: inline-block;
  color: #7D7D7D;
  font-size: var(--spacein-learning-form-info-text-size);
  font-weight: 400;
  box-sizing: border-box;
  padding-right: 10px;
  margin-right: 4px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox ul.subInfo li.name .hr {
  width: 0.1rem;
  line-height: 1;
  border-right: 1px solid #aaa;
  margin-left: 12px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox ul.subInfo li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox ul.subInfo li i {
  margin-right: 5px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .cnt {
  padding-left: calc(var(--learing_wrap_boardUl_li_a_width) + 24px);
  color: #7D7D7D;
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.learning_wrap .tab-content .boardList .boardUl li.list a.expanded .textBox .cnt {
  display: none;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .arrow {
  width: var(--learing_wrap_boardUl_li_a_width);
  display: flex;
  flex: none;
  align-items: baseline;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .arrow > i {
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 16px;
  border-radius: 5px;
  line-height: 20px;
  color: #FFFFFF;
  background-color: #4589E1;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .arrow > span {
  margin-left: 10px;
  color: #4589E1;
  font-weight: 600;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt {
  display: none;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-inline-end: 35px;
  padding-inline-start: calc(35px + var(--learing_wrap_boardUl_li_a_width) + 24px);
}
.learning_wrap .tab-content .boardList .boardUl li.list a.expanded .textBox .main_cnt {
  display: block;
}
.learning_wrap .tab-content .boardList .boardUl li.list a.expanded .textBox .tltBox p.tit {
    white-space: normal;
    text-overflow: clip;
    word-break: break-word;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file {
  padding: 10px;
  font-size: 15px;
  background-color: #d5e6fa;
  border-radius: 5px;
  margin-bottom: 20px;
  width: 95%;
  display: inline-flex;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file span {
  font-size: var(--spacein-all-text);
  font-weight: 500;
  padding-right: 10px;
  flex-shrink: 0;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file i {
  font-size: var(--spacein-all-text);
  color: #004AAB;
  /*margin-right: 10px;*/
  align-content: center;
  flex-shrink: 0;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file button {
  font-size: var(--spacein-all-text);
  font-weight: var(--spacein-font-weight-bold);
  color: #004AAB;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  gap: 10px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file button .qna_filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  text-align: left;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file button:hover {
  font-weight: 600;
  text-decoration: underline;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .bbs_content {
  display: block;
  font-size: 16px;
  line-break: auto;
  line-height: 24px;
  padding-inline-end: 5px;
  word-break: break-all;
  white-space: pre-wrap;
}
/* Q&A */
/*.learning_wrap .tab-content .boardList .boardUl li.list a .textBox_qna {*/
/*  width: 68%;*/
/*}*/
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox_qna .tltBox .subInfo .name {
  display: none;
  font-size: var(--spacein-learning-form-info-text-size);
  font-weight: 400;
  margin-right: 4px;
  box-sizing: border-box;
  padding-right: 10px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a.expanded .textBox_qna .tltBox .subInfo .name {
  display: inline-block;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox_qna .tltBox .subInfo .name .deleteBtn {
  padding: 0 12px 0 0;
  display: inline-block;
  color: #7D7D7D;
  font-size: var(--spacein-learning-form-info-text-size);
  line-height: var(--spacein-learning-form-info-text-size);
  font-weight: 400;
  box-sizing: border-box;
  margin-left: 4px;
  border-right: 1px solid #aaa;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox_qna .tltBox .subInfo .name .deleteBtn {
  outline-offset: 2px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox_qna .tltBox .subInfo .name .deleteBtn:hover {
  text-decoration: underline;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .state {
  width: 21%;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #aaa;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .state .stateTxt {
  text-align: center;
  font-weight: 500;
  font-size: 14px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .state .stateTxt img {
  margin-bottom: 10px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .state .stateTxt.no {
  color: #cc0000;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .state .stateTxt.repple {
  color: #006abb;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt hr {
  margin-block: 20px;
  border: 0.8px solid #B9B9B9;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .re_tlt {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: baseline;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .re_tlt .tlt {
  font-size: var(--spacein-all-text);
  font-weight: 600;
  color: #004AAB;
  margin-bottom: 10px;
}
.learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .re_tlt .date {
  display: inline-block;
  color: #7D7D7D;
  font-size: var(--spacein-learning-form-info-text-size);
  font-weight: 400;
  box-sizing: border-box;
}

.table_input .fileBox .custom-file-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
  color: black;
  font-weight: var(--spacein-font-weight-bold);
  box-sizing: border-box;
  gap: 12px;
}

.table_input .fileBox .custom-file-display .file-name-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding-right: 12px;
}

.table_input .fileBox .custom-file-display .file-name-wrapper a:hover span  {
  color: #4390DD;
  text-decoration: underline;
}

/* 파일명 본체 (말줄임) */
.table_input .fileBox .custom-file-display .file-name-base {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

/* 확장자 (항상 보임) */
.table_input .fileBox .custom-file-display .file-name-ext {
  padding-right: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}

.table_input .fileBox .custom-file-display .file-info-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

.table_input .fileBox .custom-file-display .file_size {
  white-space: nowrap;
}

.table_input .fileBox .custom-file-display .clear_button {
  display: block;
  position: static;
  transform: none;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #686868;
}

.table_input .fileBox .file_size.show {
  top: 57%;
}

@media screen and (max-width: 1023px) {
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .cnt {
    padding-left: 0;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt {
    padding-left: 35px;
  }
}
@media screen and (max-width: 767px) {
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox p.tit {
        flex: none;
        width: 100%;
        min-width: auto;
        margin-bottom: 10px;
        
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* 모바일 펼쳤을 때도 동일 */
    .learning_wrap .tab-content .boardList .boardUl li.list a.expanded .textBox .tltBox p.tit {
        white-space: normal;
        text-overflow: clip;
        word-break: break-word;
    }
  .learning_wrap .inner {
    padding-inline: 16px;
  }
  .learning_wrap .inner .buttonBox_m .endBtn {
    display: block;
  }
  .learning_wrap .inner .buttonBox2 {
    display: none;
  }
  .learning_wrap .inner .videoBox {
    height: calc((100vw - 32px) / 16 * 9 + var(--meta_control_page_area_height));
    border-radius: 10px 10px 0 0 !important;
  }
  .learning_wrap .inner .arrowBox {
    margin-bottom: var(--spacein-list-gap-sm);
  }
  .learning_wrap .inner .infoBox {
    padding-inline: 20px;
    padding-block: 16px;
  }
  .learning_wrap .inner .infoBox div i {
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    padding: 2px;
  }
  .learning_wrap .inner .infoBox div span {
    font-size: 15px;
    line-height: 22px;
  }
  .learning_wrap .inner .boardBox .bottomBox .bottom_inner .board .tab_menu_lning .writeBtn {
    font-size: 15px;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a {
    padding-inline: 20px;
    padding-block: 16px;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a.expanded {
    padding-inline: 0;
    padding-block: 0;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a.expanded .topBox {
    padding-inline: 20px;
    padding-block: 16px;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .cnt {
    display: none;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox {
    margin-bottom: 0;
    flex-direction: column;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .bbs_content,
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file span,
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file i,
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file button {
    font-size: 16px;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .tltBox p.tit {
    flex: none;
    width: 100%;
    min-width: auto;
    margin-bottom: 10px;
    
    /* 말줄임은 유지 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt {
    padding-inline: 20px;
    padding-block: 16px;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .bbs_content {
    line-height: 22px;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .file button {
    padding: 0;
    text-align: start;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .arrow > i {
    width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 2px;
  }
  .learning_wrap .tab-content .boardList .boardUl li.list a .textBox .main_cnt .re_tlt {
    flex-direction: column;
  }

  .table_input .fileBox {
     flex-direction: column;
     align-items: stretch;
     padding: 0;
     margin-bottom: 8px; /* fileBox 간 간격 */
   }

  /* 레이블을 다시 표시하고 상단 배치 */
  .table_input .fileBox p.lab {
    display: block;
    padding: 0 0 10px 0;
    margin-bottom: 0;
  }

  .table_input .fileBox p.lab label {
    font-size: var(--spacein-all-text-name);
    font-weight: var(--spacein-font-weight-bold);
  }

  /* inp 영역 */
  .table_input .fileBox p.inp {
    position: relative;
    padding: 0;
  }

  /* 모바일 환경 - 커스텀 파일 표시 반응형 */
  .table_input .fileBox .custom-file-display {
    min-height: 44px;
    padding: 8px 12px;
    gap: 8px;
  }

  .table_input .fileBox .custom-file-display .file-info-actions {
    gap: 6px;
    white-space: nowrap;
  }

  .table_input .fileBox .custom-file-display .file_size {
    font-size: 13px;
  }

  /* 파일 크기와 X버튼 위치 조정 (레거시 - 사용 안 함) */
  .table_input .fileBox .file_size,
  .table_input .fileBox .clear_button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .table_input .fileBox .file_size.show {
    color: #686868;
    display: block;
    right: 40px;
    top: 51%;
  }

  .table_input .fileBox .clear_button.show {
    color: #686868;
    display: block;
    right: 8px;
  }

  /* 기본 input 스타일 */
  .table_input .fileBox input[type="file"] {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .learning_wrap .inner .videoBox {
    height: calc((80vw - 32px) / 16 * 9 + var(--meta_control_page_area_height));
    border-radius: 10px;
  }
}

/* Q&A 뷰 */
.content_view {
  width: 100%;
}
.content_view .boardView {
  background: #fff;
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
  overflow: hidden;
  overflow-y: auto;
}
.content_view .boardView .view_inner {
  width: 100%;
  overflow: hidden;
}
.content_view .boardView::-webkit-scrollbar {
  width: 3px; /* 스크롤바의 너비 */
}

.content_view .boardView::-webkit-scrollbar-thumb {
  height: 10%; /* 스크롤바의 길이 */
  background: #9b9b9b; /* 스크롤바의 색상 */

  border-radius: 10px;
}

.content_view .boardView::-webkit-scrollbar-track {
  background: #ddd; /*스크롤바 뒷 배경 색상*/
}

.content_view .boardView .view_inner .mainContent {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
}
.content_view .boardView .view_inner .mainContent .tit {
  font-weight: 600;
  font-size: 18px;
  display: inline-block;
  width: 75%;
}
.content_view .boardView .view_inner .mainContent .state {
  float: right;
  text-align: right;
  font-weight: 500;
  font-size: 14px;
  color: #006abb;
  width: 20%;
  display: inline-block;
}
.content_view .boardView .view_inner .mainContent .state.state_ok {
  color: #006abb;
}
.content_view .boardView .view_inner .mainContent .state.state_no {
  color: #cc0000;
}
.content_view .boardView .view_inner ul.sub_info {
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
  box-sizing: border-box;
}
.content_view .boardView .view_inner ul.sub_info li {
  display: inline-block;
  color: #aaaaaa;
  font-size: 14px;
  font-weight: 400;
  margin-right: 10px;
  box-sizing: border-box;
  padding-right: 10px;
  border-right: 1px solid #aaa;
}
.content_view .boardView .view_inner ul.sub_info li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}
.content_view .boardView .view_inner ul.sub_info li a {
  color: #003b83;
  font-weight: 500;
}
.content_view .boardView .view_inner ul.sub_info li:hover a {
  text-decoration: underline;
}
.content_view .boardView .view_inner .contentBox {
  width: 100%;
  overflow: hidden;
  margin: 20px 0;
  font-weight: 500;
}
.content_view .boardView .view_inner .contentBox img {
  width: auto !important;
  max-width: 100% !important;
}

.content_view .boardView .view_inner .reppleBox {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #ddd;
  box-sizing: border-box;
  padding: 20px;
}
.content_view .boardView .view_inner .reppleBox .tit {
  font-weight: 600;
  font-size: 18px;
  display: inline-block;
  width: 75%;
}
.content_view .boardView .view_inner .contentBox {
  width: 100%;
  overflow: hidden;
  margin: 20px 0 0;
  font-weight: 500;
  border-top: 1px solid #eee;
  box-sizing: border-box;
  padding-top: 20px;
}
.content_view .boardView .view_inner .contentBox img {
  width: auto !important;
  max-width: 100% !important;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .buttonBox2 button.backBtn {
  color: #5a5a5a;
  border: 1px solid #d2d2d2;
  padding: 8px 15px;
  margin-right: 10px;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .buttonBox2 button.backBtn:hover {
  border: 1px solid #5a5a5a;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .buttonBox2 button.deleteBtn {
  color: #e8bfbf;
  border: 1px solid #e8bfbf;
}
.learning_wrap .inner .boardBox .bottomBox .bottom_inner .buttonBox2 button.deleteBtn:hover {
  color: #c70000;
  border: 1px solid #c70000;
}

/* Q&A 문의하기 */
.content_write {
  width: 100%;
}
.content_write #insert_form {
  padding: 20px;
  background-color: #F5F5F5;
  border-radius: 10px;
  position: relative;
}
.content_write .form_info {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 4px;
  font-size: var(--spacein-learning-form-info-text-size);
  color: #999999;
  align-items: start;
}
.content_write .form_info .mark {
  color: #4589e1;
}
.content_write .boardWrite {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
  overflow: hidden;
  overflow-y: auto;
}
.content_write .boardWrite .write_inner {
  width: 100%;
  overflow: hidden;
}
.content_write .boardWrite .write_inner label sup.mark {
  position: absolute;
  left: -8px;
  color: #4589e1;
}
.content_write .boardWrite .write_inner .titBox {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
  margin-top: 10px;
}
.content_write .boardWrite .write_inner .titBox label,
.content_write .boardWrite .write_inner .writeBox label {
  padding-inline: 5px;
  font-size: var(--spacein-all-text-name);
  position: relative;
}
.content_write .boardWrite .write_inner .titBox input {
  width: 100%;
  margin-top: 10px;
  padding-inline: 12px;
  padding-block: 12px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 5px;
}
.content_write .boardWrite .write_inner .fileBox {
  background-color: #E7E7E7;
  margin: 16px 10px 10px 10px;
  font-size: var(--spacein-all-text);
  display: flex;
  align-items: center;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.content_write .boardWrite .write_inner .fileBox .file_size,
.content_write .boardWrite .write_inner .fileBox .clear_button {
  position: absolute;
  top: 50%;
  right: 8px;
  padding: 8px;
  transform: translateY(-50%);
  display: none;
  color: #a5a5a5;
}
.content_write .boardWrite .write_inner .fileBox .file_size {
  right: 32px;
  font-weight: var(--spacein-font-weight-bold);
}
.content_write .boardWrite .write_inner .fileBox .file_size.show,
.content_write .boardWrite .write_inner .fileBox .clear_button.show {
  color: #4b4b4b;
  display: block;
}
.content_write .boardWrite .write_inner .fileBox .clear_button.show {
  color: #686868;
}
.content_write .boardWrite .write_inner .fileBox label {
  font-size: var(--spacein-all-text-name);
  padding-inline: 15px;
  white-space: nowrap;
  overflow: hidden;
}
.content_write .boardWrite .write_inner .fileBox input {
  flex-grow: 1;
  padding-inline: 12px;
  padding-block: 10px;
  padding-right: 125px;
  border: none;
  font-weight: var(--spacein-font-weight-bold);
  color: black;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content_write .boardWrite .write_inner .fileBox input.selected {
  padding-right: 125px;
}
.content_write .boardWrite .write_inner .fileBox input:focus {
  outline-offset: -2px;
  outline: 2px solid;
}

/* 커스텀 파일명 표시 div */
.content_write .boardWrite .write_inner .fileBox .custom-file-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  padding-inline: 12px;
  padding-block: 10px;
  font-weight: var(--spacein-font-weight-bold);
  color: black;
  min-width: 0;
  gap: 12px;
}

.content_write .boardWrite .write_inner .fileBox .custom-file-display .file-name-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.content_write .boardWrite .write_inner .fileBox .custom-file-display .file-name-base {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.content_write .boardWrite .write_inner .fileBox .custom-file-display .file-name-wrapper {
  padding-right: 12px;
}

.content_write .boardWrite .write_inner .fileBox .custom-file-display .file-name-ext {
  padding-right: 80px;
  flex-shrink: 0;
  white-space: nowrap;
}

.content_write .boardWrite .write_inner .fileBox .custom-file-display .file-info-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

.content_write .boardWrite .write_inner .fileBox .custom-file-display .file_size {
  white-space: nowrap;
}

.content_write .boardWrite .write_inner .fileBox .custom-file-display .clear_button {
  display: block;
  position: static;
  transform: none;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #686868;
}

.content_write .boardWrite .write_inner .privacy {
  color: #999999;
  margin-inline: 15px;
}
.content_write .boardWrite .write_inner .privacy li {
  padding-left: 1.25rem;
  position: relative;
}
.content_write .boardWrite .write_inner .privacy li::before {
  content: '※';
  position: absolute;
  left: 0;
  top: 0;
}
.content_write .boardWrite .write_inner .writeBox {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
  margin-top: 16px;
}
.content_write .boardWrite .write_inner .writeBox textarea {
  width: 100%;
  height: 245px;
  margin-top: 10px;
  padding-inline: 12px;
  padding-block: 12px;
  border: none;
  border-radius: 5px;
  box-sizing: border-box;
  resize: none;
  overflow-y: auto;
  outline: none;
  border: 1px solid transparent;
}
.content_write .boardWrite .write_inner .buttonBox2_qna {
  padding: 10px;
}
.content_write .boardWrite .write_inner .buttonBox2_qna .inBtn {
  font-size: 17px;
  color: #FFFFFF;
  background-color: #4589E1;
  padding-block: 10px;
  padding-inline: 24px;
  border-radius: 5px;
  margin-right: 10px;
}
.content_write .boardWrite .write_inner .buttonBox2_qna .backBtn {
  font-size: 17px;
  color: #FFFFFF;
  background-color: #B9B9B9;
  padding-block: 10px;
  padding-inline: 14px;
  border-radius: 5px;
}

.content_write .boardWrite .write_inner .titBox input:hover,
.content_write .boardWrite .write_inner .writeBox textarea:hover,
.content_write .boardWrite .write_inner .titBox input:focus,
.content_write .boardWrite .write_inner .writeBox textarea:focus {
  border: 1px solid #4589E1;
}
.char_error:hover,
.char_error:focus {
  border: 1px solid #ff0000 !important;
}
.content_write .boardWrite .write_inner .buttonBox2_qna .inBtn:hover,
.content_write .boardWrite .write_inner .buttonBox2_qna .backBtn:hover {
  opacity: 0.5;
}

textarea::-webkit-scrollbar {
  width: 5px; /* 스크롤바의 너비 */
}

textarea::-webkit-scrollbar-thumb {
  height: 10%; /* 스크롤바의 길이 */
  background: #9b9b9b; /* 스크롤바의 색상 */

  border-radius: 10px;
}

textarea::-webkit-scrollbar-track {
  background: #ddd; /*스크롤바 뒷 배경 색상*/
}

/* 관심교육 */
.mypage_inter {
  border: 1px solid #ddd;
  width: auto;
  border-bottom: 0;
  border-top: 0;
}
.mypage_inter ul.head {
  /*border-top:2px solid #296EB2;   border-bottom: 1px solid #296EB2;*/
  background: #f4f5f7;
  border-top: 1px solid #ddd;
  font-size: var(--spacein-all-text-name);
}
.mypage_inter ul.head li {
  font-weight: 500;
  color: #296eb2;
  padding: 15px 10px !important;
}
.mypage_inter ul li {
  padding: 10px !important;
}
.mypage_inter ul li a {
  font-weight: 500;
}
.mypage_inter ul:hover {
  background: #f9f9f9;
}
.mypage_inter ul.head:hover {
  background: #f4f5f7;
}
.mypage_inter ul li.bold {
  color: #b84c97;
}

.mypage_inter ul .li_01 {
  width: 50%;
}

.mypage_inter ul .li_01 a{
  display: block;
  white-space: nowrap;        /* 줄바꿈 방지 */
  overflow: hidden;           /* 넘친 텍스트 숨기기 */
  text-overflow: ellipsis;    /* 넘친 텍스트 ... 처리 */
  width: 100%;
}

.mypage_inter ul .li_02 {
  width: 50%;
}
.mypage_inter ul .li_03 {
  width: 10%;
}
.mypage_inter ul li button.deleteBtn {
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 500;
  border: 1px solid #aaa;
  color: #555;
  border-radius: 100px;
  box-sizing: border-box;
  padding: 5px 10px;
}
.mypage_inter ul li button.deleteBtn:hover {
  background: #1d1d1d;
  color: #fff;
  border: 1px solid #1d1d1d;
}

.mypage_inter .my_page_table_body:hover li:first-child {
  text-decoration: underline;
}

.in_con .conlist .i_m_contentBox {
  display: none;
}
.in_con .prolist .i_m_processBox {
  display: none;
}

/* 문의 내역 */
.mypageBox {
  overflow: hidden;
}
.mypage_qna {
  border: 1px solid #ddd;
  width: auto;
  border-bottom: 0;
  border-top: 0;
}
.mypage_qna ul.head {
  /*border-top:2px solid #296EB2;   border-bottom: 1px solid #296EB2;*/
  background: #f4f5f7;
  border-top: 1px solid #ddd;
}
.mypage_qna ul.head li {
  font-weight: 500;
  padding: 15px 10px;
  color: #296eb2;
  font-size: var(--spacein-all-text-name);
}
.mypage_qna ul li.li_02.reply a {
  position: relative;
  box-sizing: border-box;
  line-height: 26px;
}
.mypage_qna ul li.li_02.reply span.re {
  font-size: 12px;
}
.mypage_qna ul li {
  padding: 10px !important;
}
.mypage_qna ul li a {
  width: 100% !important;
  font-weight: var(--spacein-font-weight-bold);
  padding: 10px !important;
  min-height: calc(var(--spacein-all-text) * 1.5 + 20px) !important;
}
.mypage_qna ul:hover {
  background: #f9f9f9;
}
.mypage_qna ul.head:hover {
  background: #f4f5f7;
}
.mypageBox .pasing {
  border: 1px solid #ddd;
  border-top: 0;
  padding: 20px 0;
}
.mypage_qna ul li.left:hover {
  color: #1d1d1d;
}

.mypage_qna ul li.li_01 {
  width: 5%;
}
.mypage_qna ul li.li_02 {
  width: 30%;
}
.mypage_qna ul li.li_03 {
  width: 8%;
}
.mypage_qna ul li.li_04 {
  width: 8%;
}
.mypage_qna .my_page_table_body:hover li:nth-child(2) {
  color: #4390DD;
  text-decoration: underline;
}

.mypage_qna_class ul li.li_01 {
  width: 4%;
}
.mypage_qna_class ul li.li_02 {
  width: 30%;
}
.mypage_qna_class ul li.li_03 {
  width: 25%;
}
.mypage_qna_class ul li.li_04 {
  width: 10%;
}

.tab_content .tab-content.tab-content-2 {
  display: block;
}
.tab-link-2 {
  padding: 0 !important;
}
.tab-link-2 a {
  width: 100%;
  height: 100%;
  display: block;
  padding: 10px 16px;
  box-sizing: border-box;
}
.tab-link-2 a:focus {
  border-radius: 100px;
  outline-offset: -2px;
}

.classInfo {
  color: #003b83;
  font-weight: 500;
  margin-bottom: 15px;
  box-sizing: border-box;
  padding-bottom: 15px;
  border-bottom: 1px dotted #aaa;
}
.classInfo .info {
  overflow: hidden;
}
.classInfo .info i {
  margin-right: 5px;
  color: rgba(41, 110, 178, 80%);
  margin-top: 6px;
}
.classInfo .info p.className {
  line-height: 1.7;
  display: flex;
  align-items: flex-start;
}
.classInfo .info p.className span {
  display: inline-block;
  width: 88%;
}
.classInfo_reply {
  margin-bottom: 15px;
  box-sizing: border-box;
}

/* 설문 */
.in_con .in_con_inner .surveyList {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.in_con .in_con_inner .surveyList .survey {
  display: inline-block;
  width: 48%;
  border: 1px solid #ddd;
  margin-bottom: var(--spacein-all-card-gap);
  border-top: 1px solid #111;
  cursor: pointer;
}
.in_con .in_con_inner .surveyList .survey:hover {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 15%);
}
.in_con .in_con_inner .surveyList .survey .topBox {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 15px;
  background: #f4f5f7;
  flex-direction: row;
  align-items: center;
}
.in_con .in_con_inner .surveyList .survey .topBox h3 {
  font-size: var(--spacein-all-text-name);
  font-weight: 500;
  color: #296eb2;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  float: left;
  width: 95%;
}
.in_con .in_con_inner .surveyList .survey .topBox i {
  width: 5%;
  text-align: right;
}
.in_con .in_con_inner .surveyList .survey .bottomBox {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.in_con .in_con_inner .surveyList .survey .bottomBox .left {
  width: 100%;
  overflow: hidden;
}
.in_con .in_con_inner .surveyList .survey .bottomBox .left ul {
  display: table-row;
  width: 100%;
  overflow: hidden;
}
.in_con .in_con_inner .surveyList .survey .bottomBox .left ul li {
  display: table-cell;
  font-weight: 400;
  box-sizing: border-box;
  padding: 5px 0;
}
.in_con .in_con_inner .surveyList .survey .bottomBox .left ul li.head {
  width: 35%;
  font-weight: 500;
}
.in_con .in_con_inner .surveyList .survey .bottomBox .left ul li.bold {
  color: #b84c97;
}
/*.in_con .in_con_inner .surveyList .survey .bottomBox button.particendBtn{font-family: 'SCoreDream'; background:#666; color:#fff; box-sizing:border-box; padding:0px 15px; display:inline-block;
height:40px; cursor: inherit;}
.in_con .in_con_inner .surveyList .survey .bottomBox button.particBtn{font-family: 'SCoreDream'; background:#fff; color:#296EB2; box-sizing:border-box; padding:0px 15px; display:inline-block;
    height:40px;   font-weight: 500; box-shadow: 0px 3px 6px rgba(0,0,0,10%); border:1px solid #eee;}
.in_con .in_con_inner .surveyList .survey .bottomBox button.particBtn:hover{box-shadow: 0px 5px 10px rgba(0,0,0,15%); font-weight:600;}*/

/* 나의 강의실 검색 */
.search_Box2 .search {
  padding: 8px 0;
  align-items: center;
  justify-content: center;
  font-size: var(--spacein-input-search_type);
}
.search_Box2 .search select {
  display: inline-block;
  margin-right: 0;
  width: auto;
  font-size: var(--spacein-input-search_type);
  font-weight: var(--spacein-font-weight-bold);
  background: none;
  border: none;
  color: #000;
}
/*.search_Box2 .search select:focus {*/
/*  border: 1px solid #3a81c7;*/
/*}*/
.search_Box2 .search .in input {
  padding: 10px 16px;
}
.search_Box2 .search .date {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 8px;
  font-size: var(--spacein-input-search_type);
  margin-right: 16px;
}
.search_Box2 .search .date input {
  font-size: var(--spacein-input-search_type);
  line-height: 1.5;
  padding: 4px;
  border: 1px solid #d9d9d9;
}
.search_Box2 .search button {
  font-size: 1rem;
  width: var(--spacein-input-search-icon-width);
  height: var(--spacein-input-search-icon-width);
  line-height: var(--spacein-input-search-icon-width);
  text-align: center;
  margin-right: 16px;
  padding: 0;
  color: #000;
}

/* 학습창 모바일 */
/*body.learning.mobile_class {*/
/*  background: rgba(0, 0, 0, 37%);*/
/*}*/
/*.mobile_class .learning_wrap {*/
/*  height: auto;*/
/*  background: none;*/
/*}*/
/*.mobile_class .learning_wrap .inner {*/
/*  height: auto;*/
/*  box-sizing: border-box;*/
/*  padding: 20px;*/
/*  display: block;*/
/*}*/
/*.mobile_class .learning_wrap .inner .boardBox {*/
/*  display: none;*/
/*}*/

/*!* 추가된 css start *!*/
/*.mobile_class .learning_wrap .inner .b_videoBox {*/
/*  width: auto;*/
/*  height: auto;*/
/*  overflow-x: auto;*/
/*  overflow-y: auto;*/
/*  max-width: 100%;*/
/*  max-height: 100%;*/
/*}*/
/* 추가된 css end */
/* 제거 예정 */
/*.mobile_class .learning_wrap .inner .videoBox {*/
/*}*/
/*.mobile_class .nameBox_m {*/
/*  width: 100%;*/
/*  display: block;*/
/*  background: #fff;*/
/*  box-sizing: border-box;*/
/*  padding: 20px;*/
/*  border-bottom: 1px solid #ddd;*/
/*}*/
/*.mobile_class .nameBox_m .class_name {*/
/*  font-size: 30px;*/
/*  font-weight: 500;*/
/*  overflow: hidden;*/
/*  word-break: break-word;*/
/*  display: -webkit-box;*/
/*  -webkit-line-clamp: 2;*/
/*  -webkit-box-orient: vertical;*/
/*  margin-bottom: 15px;*/
/*}*/
/*.mobile_class .nameBox_m .class_name i {*/
/*  margin-right: 5px;*/
/*}*/
/*.mobile_class .nameBox_m p.sub_name {*/
/*  font-size: 25px;*/
/*  color: #555555;*/
/*  overflow: hidden;*/
/*  word-break: break-word;*/
/*  display: -webkit-box;*/
/*  -webkit-line-clamp: 2;*/
/*  -webkit-box-orient: vertical;*/
/*}*/
/*.mobile_class .nameBox_m p.sub_name span {*/
/*  display: inline-block;*/
/*  box-sizing: border-box;*/
/*  padding: 3px 20px;*/
/*  color: #fff;*/
/*  background: #555 !important;*/
/*  font-weight: 400;*/
/*  margin-right: 5px;*/
/*}*/

/*.mobile_class .buttonBox_m {*/
/*  width: 100%;*/
/*  overflow: hidden;*/
/*  display: block;*/
/*  text-align: center;*/
/*  margin: 20px 0 0;*/
/*}*/

/*.mobile_class .buttonBox_m button {*/
/*  box-sizing: border-box;*/
/*  font-size: 25px;*/
/*  box-sizing: border-box;*/
/*  padding: 8px 25px;*/
/*  font-family: "Noto Sans KR", sans-serif;*/
/*}*/

/*.mobile_class .buttonBox_m button.endBtn {*/
/*  background: #1d1d1d;*/
/*  color: #fff;*/
/*  border: 1px solid #1d1d1d;*/
/*}*/

/*!* 학습창 페이징 버튼 *!*/
/*.mobile_class .inner .arrowBox {*/
/*  margin-top: 10px;*/
/*  margin-right: 5px;*/
/*  width: 100%;*/
/*}*/
/*.mobile_class .inner .arrowBox button {*/
/*  width: 70px;*/
/*  height: 70px;*/
/*  background: #003b83;*/
/*  color: #fff;*/
/*  border-radius: 100%;*/
/*  box-shadow: 3px 3px 6px rgba(0, 0, 0, 25%);*/
/*}*/
/*.mobile_class .inner .arrowBox button i {*/
/*  font-size: 50px;*/
/*  line-height: 70px;*/
/*}*/
/*.mobile_class .inner .arrowBox button.next {*/
/*  margin-left: 5px;*/
/*  position: absolute;*/
/*  right: 20px;*/
/*}*/

/* 특성화교 사업 */
.support-container {
  max-width: 900px;
}
.support-container .support-title {
  font-size: var(--spacein-all-sub-title);
  font-weight: var(--spacein-font-weight-bold);
  display: inline-block;
  border-radius: 5px;
  margin: 32px 0 16px 0;
}
.support-container .support-subtext {
}
section.special_biz,
section.school_list {
  font-weight: var(--spacein-font-weight-regular);
  box-sizing: border-box;
  margin: 40px 0;
}
.support-container h4 {
  font-size: var(--spacein-all-text-name);
  text-align: left;
  margin: 1rem 0;
  font-weight: 500 !important;
  display: inline-block;
  border-radius: 5px;
}
.support-container table {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
  margin: 0 0 2em;
  position: relative;
  border-bottom: 1px solid #efe8f4;
}
.support-container caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  border: 0;
}
.support-container th {
  padding: 0.6em 1em;
  font-weight: 400;
  text-align: center;
  vertical-align: top;
  width: 50%;
}
.support-container td {
  padding: 0.6em 1em;
  font-weight: var(--spacein-font-weight-regular);
  text-align: justify;
  vertical-align: top;
  border-right: 1px solid #efe8f4;
}
.support-container td .special-sub {
  font-size: 0.875rem;
  display: block;
  text-indent: -8px;
  margin-top: 12px;
  padding: 0 8px;
}
.support-container table td:last-child {
  border-right: none;
}
.support-container .list_box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin: 20px 12px;
}
.support-container .list_box li {
  display: inline-block;
  width: calc((100% - 30px) / 4);
  min-width: 160px;
  border: 1px solid #f7f7f7;
  border-radius: 5px;
  text-align: center;
  padding: 30px 0;
  box-sizing: border-box;
}
.support-container .list_box li:hover {
  box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.support-container .list_box li a {
  text-decoration: none;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.support-container .list_box li a div {
  height: 84px;
}
.support-container .list_box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin: 0 12px;
}
.support-container .list_box li {
  display: inline-block;
  width: calc((100% - 30px) / 4);
  min-width: 160px;
  border: 1px solid #f7f7f7;
  border-radius: 5px;
  text-align: center;
  padding: 30px 0;
  box-sizing: border-box;
}
.support-container .list_box li a {
  text-decoration: none;
  color: black;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 24px;
}
.support-container .list_box li a figure {
  height: 84px;
  width: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.support-container .list_box li a img {
  /* height: 100%; */
  width: 100%;
}
.support-container .list_box .selection-year{
  display: block;
  margin-top: 24px;
}
/* 특성화교 - 고등학교 */
.support-container.high .support-title,
.support-container.high h4 {
  color: #0156b5;
}
.support-container.high thead {
  background-color: #deebf7;
}
/*.support-container.high .list_box li {*/
/*  width: calc((100% - 40px) / 5);*/
/*}*/
.support-container.high .list_box li:hover {
  box-shadow: 2px 2px 12px 0 rgba(1, 86, 181, 0.1);
}

/* 특성화교 - 전문대학 */
.support-container.college .support-title,
.support-container.college h4 {
  color: #2a6602;
}
.support-container.college thead {
  background-color: #d8ebcd;
}
.support-container.college .list_box li:hover {
  box-shadow: 2px 2px 12px 0 rgba(42, 102, 2, 0.1);
}
/* 특성화교 - 대학교 */
.support-container.univ .support-title,
.support-container.univ h4 {
  color: #9d3801;
}
.support-container.univ thead {
  background-color: #ffeeb8;
}
.support-container.univ .list_box li:hover {
  box-shadow: 2px 2px 12px 0 rgba(157, 56, 1, 0.1);
}
/* 특성화교 - 대학원 */
.support-container.graduate .support-title,
.support-container.graduate h4 {
  color: #7f50a6;
}
.support-container.graduate thead {
  background-color: #efe8f4;
}
.support-container.graduate .list_box li:hover {
  box-shadow: 2px 2px 12px 0 rgba(127, 80, 166, 0.1);
}
/* 이용안내 */
.introduce {
  font-weight: var(--spacein-font-weight-regular);
}
.introduce h1,
.introduce h2,
.introduce h3,
.introduce h4,
.introduce h5,
.introduce h6 {
  margin: 20px 0 16px 0;
}
.introduce_cont {
  font-weight: var(--spacein-font-weight-regular);
  padding: 0;
  margin-bottom: 40px;
}
.introduce_cont .info_tit_bg {
  overflow: hidden;
  height: 300px;
  position: relative;
  background-image: url(/img/sub/info_tit_bg.webp);
  background-position: left;
  background-size: cover;
  border-radius: 4px;
}
.introduce_cont .info_tit_bg .info_tit_circle {
  width: 500px;
  height: 500px;
  position: absolute;
  top: -40px;
  left: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
}
.introduce_cont .info_tit_bg .info_tit_txtBox {
  position: relative;
  top: 120px;
  text-align: center;
}
.introduce_cont .info_tit_bg .info_tit_txtBox h4 {
  margin-bottom: 2.4rem;
  color: #026be1;
}
.introduce_cont h4,
.introduce_cont h5 {
  color: #026be1;
  font-size: var(--spacein-all-sub-title);
  font-weight: var(--spacein-font-weight-regular);
  margin-bottom: var(--spacein-all-sub-title-gap);
}
.introduce_cont .cont_box {
  overflow: hidden;
  position: relative;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  gap: var(--spacein-grid-gap-lg);
}
.introduce_cont .cont_box li {
  margin-bottom: 10px;
  text-align: center;
  vertical-align: top;
}
.introduce_cont .cont_box li:last-child {
  margin-right: 0;
}
.introduce_cont .sub_tit {
  font-size: var(--spacein-all-text-name);
  font-weight: var(--spacein-font-weight-bold);
  margin-bottom: 10px;
}

.introduce_cont .info_tit_txtBox .sub_tit {
  margin: 0 auto;
  width: 340px;
  word-break: keep-all;
}

.introduce_cont .cont_box1 .sub_tit {
  margin: 0 auto 10px;
}

.introduce_cont .bizinfo_item_content {
  word-break: keep-all;
  margin: 0 auto;
}

.introduce_cont .cont_box1 li {
  flex: 1 0;
}

.introduce_cont .cont_box2 li {
  flex: 1 0;
}
.introduce_cont .cont_box .img_box {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto 16px;
  text-indent: -9999px;
}
.introduce_cont .cont_box1 .img_box {
  width: 100px;
  height: 100px;
}
.introduce_cont .cont_box1 .img_box1 {
  background-image: url(/img/sub/info_cont_box1_ico1.webp);
}
.introduce_cont .cont_box1 .img_box2 {
  background-image: url(/img/sub/info_cont_box1_ico2.webp);
}
.introduce_cont .cont_box1 .img_box3 {
  background-image: url(/img/sub/info_cont_box1_ico3.webp);
}
.introduce_cont .cont_box2 .img_box {
  height: 240px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}
.introduce_cont .cont_box2 .img_box4 {
  background-image: url(/img/sub/info_cont_box2_img1.jpg);
  position: relative;
}
.introduce_cont .cont_box2 .img_box4::after,
.introduce_cont .cont_box2 .img_box5::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: rgba(255, 255, 255, 0.2);
}
.introduce_cont .cont_box2 .img_box5 {
  position: relative;
  background-image: url(/img/sub/info_cont_box2_img2.jpg);
}
.introduce_cont .cont_box2 .txt_box {
  text-align: left;
}

/* 수강 신청 팝업 start*/
.pop_wrap{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.3);
  z-index: 999999;
  display: none;
}
.pop-container{
  box-sizing: border-box;
  width: 360px;
  position: relative;
  top: 50%;
  left : 50%;
  border-radius: 8px;
  padding: 32px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.pop-container .pop-title{
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.pop-container button.pop-default-btn {
  background-color: #999;
  color: #fff;
  border-radius: 4px;
  font-size: var(--spacein-mypage-button);
  font-weight: 500;
  padding: 12px 24px;
  margin: 40px auto 0;
  display: block;
}
.pop-container button.pop-default-btn:hover{
  background-color: #666;
  transition: 0.3s;
}
/* 수강 신청 팝업 end*/

/*자동 로그아웃 안내 페이지*/
.session_logout_page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 122px;
  padding-bottom: 40px;
  margin: 0 auto;
}
.session_logout_page .br_pc {
  display: inline;
}
.session_logout_page .br_mobile {
  display: none;
}
.session_logout_page .logout_msg {
  font-size: var(--spacein-logout-title);
  font-weight: var(--spacein-modal-font-bold);
  margin-bottom: 40px;
  line-height: 150%;
  text-align: center;
}
.session_logout_page .logout_msg span {
  color: #4390DD; /* 하늘색 강조 */

}
.session_logout_page .thanks_msg {
  font-size: var(--spacein-logout-text);
  font-weight: var(--spacein-font-weight-regular);
  margin-bottom: 50px;
  line-height: 150%;
  text-align: center;
}
.session_logout_page .home_btn {
  display: flex;
  width: 310px;
  height: 60px;
  justify-content: center;
  align-items: center;
  font-size: var(--spacein-logout-button);
  font-weight: var(--spacein-font-weight-regular);
  color: #787878;
  border-radius: 10px;
  border: 1px solid #787878;
}
.session_logout_page .home_btn:hover {
  background-color: #4390DD;
  color: #ffffff;
  border: 1px solid transparent;
}

/*전체검색용 하이라이트 */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

/*신청개선 마일스톤 css*/
.milestone-container {
  padding: 60px;
  position: relative;
  background-color: #f9f9f9;
}

.milestone-step {
  display: flex;
  margin-bottom: 20px;
  position: relative;
  min-height: 120px;
}

.milestone-step-content {
  flex: 1;
  margin-top: 20px;
  margin-left: 15px;
}

.milestone-icon-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  position: relative;
}

.milestone-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #003b83;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  position: relative;
  z-index: 2;
  font-size: var(--spacein-all-text-name);
}
.milestone-circle.kasm {
  background-color: #B05D8E;
}
.milestone-line {
  position: absolute;
  top: 24px;
  bottom: -30px;
  width: 2px;
  background-image: repeating-linear-gradient(
          to bottom,
          #003B83,
          #003B83 4px,
          transparent 4px,
          transparent 8px
  );
  z-index: 1;
}
.milestone-line.kasm {
  background-image: repeating-linear-gradient(
          to bottom,
          #B05D8E,
          #B05D8E 4px,
          transparent 4px,
          transparent 8px
  );
}

.milestone-container .title {
  display: inline-block;
  font-size: 30px;
  margin-bottom: 50px;
}

.milestone-container .subtitle {
  display: inline-block;
  font-size: 20px;
  margin-bottom: 30px;
}

.milestone-content .milestone-step-title {
  font-size: var(--spacein-all-text-name);
  margin-left: 15px;
  color: #003B83;
}
.milestone-content .milestone-step-title.kasm {
  color: #B05D8E;
}


.milestone-content p {
  line-height: 1.5;
  margin-bottom: 5px;
}

.milestone-fyi-title-container{
  display: flex;
  align-items: center;
  margin: 15px;
}

.milestone-fyi{
  background-color: white;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.milestone-fyi-img{
  width: 30px;
  height: 25px;
}
.milestone-fyi-img.kasm{
  width: 30px;
  height: 21px;
}
.milestone-fyi-title{
  margin-left: 15px;
  color: #003b83;
  font-weight: 600;
  font-size: 18px;
}
.milestone-fyi-title.kasm {
  color: #B05D8E;
}

.milestone-fyi-content{
  margin: 0 15px 20px 60px;
}

/*수요조사용 css*/
#survey-tabBox {
  box-sizing: border-box;
}
#survey-tabBox .tabs {
  box-sizing: border-box;
}
#survey-tabBox .tabs li{
  border: none;
  font-weight: 600;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px;
}
.survey-apply.contentBox {
  border: 1px solid #DADADA;
  border-top: none;
}
.pagination-controls{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  text-align: center;
}

#prevSurveyPageBtn{
  background: #4a93da;
  color: #fff;
}
#prevSurveyPageBtn.kasm{
  background: #B05D8E;
}

#prevSurveyPageBtn.disabled-button {
  background: #d9d9d9;
  color: #fff;
}

#prevSurveyPageBtn.disabled-button:hover {
  background: linear-gradient(to right, #999999, #d9d9d9);
}

#prevSurveyPageBtn:hover{
  background: linear-gradient(to right, #003b83, #3a81c7);
}
#prevSurveyPageBtn.kasm:hover{
  background: linear-gradient(to right, #B05D8E, #E3A6CA);
}

#nextSurveyPageBtn{
  background: #4a93da;
  color: #fff;
}
#nextSurveyPageBtn.kasm{
  background: #B05D8E;
}

#nextSurveyPageBtn.disabled-button{
  background: #d9d9d9;
  color: #fff;
}

#nextSurveyPageBtn.disabled-button:hover{
  background: linear-gradient(to right, #999999, #d9d9d9);
}

#nextSurveyPageBtn:hover {
  background: linear-gradient(to right, #003b83, #3a81c7);
}
#nextSurveyPageBtn.kasm:hover {
  background: linear-gradient(to right, #B05D8E, #E3A6CA);
}
.surveyBtn{
  cursor: pointer;
  box-sizing: border-box;
  padding: 8px 25px;
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
  "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 400;
  font-size: 16px;
}

.survey-progress-bar {
  width: 100%;
  height: 8px; /* 원하는 높이로 조정 */
  box-sizing: border-box;
  display: flex;
  gap: 4px; /* 칸 사이 여백 없애고 싶으면 0, 있으면 px로 조정 */
  justify-content: space-between;
  overflow: hidden;
  border-top: 1px solid #DADADA;
  border-left: 1px solid #DADADA;
  border-right: 1px solid #DADADA;
}
.survey-progress-step {
  flex-grow: 1;
  height: 100%;
  background: #e0e0e0;
  transition: background 0.2s;
  text-align: center;
  font-size: 13px;
  line-height: 16px;
  color: #888;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  cursor: default;
  user-select: none;
}

.survey-progress-step.active {
  background: #3b82f6;
  color: #fff;
  font-weight: bold;
}
.survey-progress-bar.kasm .survey-progress-step.active {
  background: #B05D8E;
}

/* 초기에는 모든 selectBox를 숨깁니다. */
.survey-apply .selectBox {
  display: none;
}

/* 설문 문항 타이틀 영역 */
.survey-apply .tab-content .selectBox p.tit {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.survey-apply .tab-content .selectBox p.tit span.num {
  margin-bottom: 0 !important;
  flex: 0 0 25px;
}
.survey-apply .tab-content .selectBox p.tit .q {
  width: auto !important;
  flex-grow: 1 !important;
  line-height: 25px;
  word-wrap: break-word;
  word-break: auto-phrase;
}

.survey-apply .tab-content .selectBox ul.select li {
  align-items: center;
  display: flex  ;
  gap: 4px;
  padding-block: 2px;
}
.survey-apply .tab-content .selectBox ul.select li input[type=radio]{
  margin-block: 0;
}
.survey-apply .tab-content .selectBox ul.select li label {
  flex-grow: 1;
}

.survey-indicator{
  padding: 0 25px;
}

.pagination-controls .current-page{
  padding: 0 8px;
}

.pagination-controls .total-page{
  padding: 0 8px;
}

/* 현재 페이지의 selectBox만 보이게 합니다. */
.survey-apply .selectBox.active-page {
  display: block;
}

/* 통합검색 결과 개수 */
.allsearchBox h3.resultTxt {
  display: block;
}


/* 반응형 모바일, 태블릿 공통 */
@media screen and (max-width: 1279px) {
  .sub_content .sub_content_inner {
    width: 100%;
    max-width: calc(1200px + 48px);
    display: flex !important;
    flex-wrap: nowrap;
    gap: 24px;
  }

  .sub_con {
    width: 100%;
    overflow: visible;
    /*background: url("/img/sub/sub_bg.png") no-repeat top !important;*/
    /* height: unset; */
  }

  .idpw_wrap .idpw {
    width: 100% !important;
  }

  @media (min-width: 1024px){
    .sub_content .sub_content_inner.allSearch {
      flex-wrap: wrap !important;
    }
    .tab_menu_search .contentBox {
      padding: 40px 0;
    }
    .in_con .listView ul.list li {
      width: calc((100% - var(--spacein-grid-gap-lg) * 2) / 3);
    }

    .in_con .listView ul.list li p.img {
      overflow: hidden;
      width: 100%;
      /*height: 150px;*/
      height: calc(((100vw - 48px - var(--spacein-grid-gap-lg) * 2) * 80 / 100) / 3 / 16 * 9);
      border-bottom: 1px solid #ddd;
    }

    .table_view .titleBox ul.info {
      display: flex;
    }

    .table_view .titleBox ul.info li:last-child {
      gap: 0;
    }
  }
}

@media screen and (max-width: 1023px) { /* id/pwd input 사이즈 동적 조절 640px 이후로 고정 */
  /* 수강 신청 팝업 start*/
  .pop_wrap{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.3);
    z-index: 999999;
    display: none;
  }
  .pop-container{
    box-sizing: border-box;
    width: 280px;
    position: relative;
    top: 50%;
    left : 50%;
    border-radius: 4px;
    padding: 30px 20px;
    background-color: #fff;
    transform: translate(-50%, -50%);
  }
  .pop-container.org-detail {
    width: 330px;

  }
  .pop-container.org-detail li span{
    /*font-size: 14px;*/
  }
  .pop-container .pop-title{
    /*font-size: 14px;*/
    font-weight: 600;
    text-align: center;
  }
  .pop-container button.pop-default-btn{
    background-color: #999;
    color : #fff;
    border-radius : 4px;
    font-size: var(--spacein-mypage-button);
    font-weight: 500;
    padding: 8px 16px;
    margin: 20px auto 0;
    bottom: 24px;
    left: 50%;
  }
  .pop-container button.pop-default-btn:hover{
    background-color: #666;
    transition: 0.3s;
  }
  button.close-btn {
    /*font-size: 12px;*/
    margin: 16px auto 0;
  }
  /* 수강 신청 팝업 end*/


  .main_con .in_con .in_con_inner.in_sp_inner {
    padding: 20px 0;
  }
  .main_con .in_con .in_con_inner.in_sp_inner img {
    width: 100% !important;
  }
  .main_con .in_con .in_con_inner > img {
    width: 100% !important;
  }

  /* 서브 페이지 내용 */
  .sub_con {
    background: url("/img/sub/sub_bg.webp") no-repeat top;
  }
  .sub_content {
    border-radius: 70px 70px 0 0;
    min-height: calc(100vh - 530px);
    /* height: unset; */
    /* height: 100%; */
    /* overflow: hidden; */
  }
  .sub_content .sub_content_inner {
    width: 100%;
    padding: 30px 15px;
  }
  .sub_bn .titBox {
    padding: 30px 0;
  }
  .sub_bn .titBox h3.tit {
    /*font-size: 20px;*/
    margin-bottom: 5px;
  }
  .sub_bn .titBox p.eng {
    /*font-size: 15px;*/
  }
  .leftMenu {
    display: none;
  }
  .main_con {
    display: flex;
    flex-direction: column;
    clear: both;
    width: 100%;
  }
  .main_con .titBox h3 {
    /*font-size: 20px;*/
    display: block;
    clear: both;
    width: 100%;
  }
  .main_con .in_con .in_con_inner section h3.tit {
    /*font-size: 16px;*/
  }
  .main_con .in_con .in_con_inner section h3.tit img {
    width: 20px;
    margin-right: 5px;
  }
  .main_con .in_con .in_con_inner section p {
    /*font-size: 13px;*/
    padding-left: 20px;
  }
  .main_con .in_con .in_con_inner section p img {
    width: 100%;
  }

  /* 게시판 */
  .pasing {
    padding: 20px 0;
  }
  .table_list ul li {
    padding: 10px;
    box-sizing: border-box;
  }
  .table_list ul li.left {
    padding: 10px;
  }
  .table_list ul li.left img {
    margin-top: -3px;
  }
  .table_list.table_list_board ul.head li {
    padding: 10px 5px;
  }
  .table_list.table_list_board ul li.li_01 {
    display: none;
  }
  .table_list.table_list_board ul li.li_02 {
    width: 20%;
  }
  .table_list.table_list_board ul li.li_02 a {
    width: 100%;
    padding: 5px;
    display: flex;
    min-height: calc(1rem * 1.5 + 10px);
  }
  .table_list.table_list_board ul li.li_03 {
    width: 7%;
  }
  .table_list.table_list_board ul li.li_05 {
    width: 6%;
  }
  .table_list.table_list_board ul li.li_04 {
    display: none;
  }
  .table_list.table_list_board ul li.li_06 {
    display: none;
  }
  .pasing ul li {
    margin: 0 8px;
  }
  .pasing ul li.arrow {
    /*font-size: 11px;*/
    width: var(--spacein-quiz-num-width);
    height: var(--spacein-quiz-num-width);
    line-height: var(--spacein-quiz-num-width);
  }
  .search_Box .search {
    width: 100%;
  }

  /* 회원가입 약관 동의 */
  .join_wrap {
    width: auto;
    padding: 0 10px;
  }
  .joinBox .join_wrap .title h3 {
    margin-bottom: 24px;
  }
  .joinBox .join_wrap .join-con-wrap .all {
    padding: 0 0 10px 40px;
  }
  .joinBox .join_wrap .join-con-wrap .all input[type="checkbox"] + label {
    /*width: 20px;*/
    /*height: 20px;*/
    /*line-height: 20px;*/
    /*top: 2px;*/
    top: calc(50% - 5px);
    transform: translateY(-50%);
  }
  .joinBox .join_wrap .join-con-wrap .all input[id="all_c"] + label::after,
  .joinBox .join_wrap .join-con-wrap .age_agree input[id="chk_age"] + label::after,
  .joinBox .join_wrap .join-con-wrap .text_area > div input[id="inp_03"] + label::after,
  .joinBox .join_wrap .join-con-wrap .text_area > div input[id="inp_04"] + label::after{
    font-size: 13px;
    /*width: 20px;*/
    /*height: 20px;*/
    /*line-height: 20px;*/
  }
  .joinBox .join_wrap .join-con-wrap .all input[id="all_c"]:checked + label::after,
  .joinBox .join_wrap .join-con-wrap .age_agree input[id="chk_age"]:checked + label::after,
  .joinBox .join_wrap .join-con-wrap .text_area > div input[id="inp_03"]:checked + label::after,
  .joinBox .join_wrap .join-con-wrap .text_area > div input[id="inp_04"]:checked + label::after {
    /*content: "✔";*/
    font-size: 13px;
    /*width: 20px;*/
    /*height: 20px;*/
    /*text-align: center;*/
    /*position: absolute;*/
    /*left: 50%;*/
    /*top: 50%;*/
    /*transform: translate(-50%, -50%);*/
    /*color: #fff;*/
    /*border: 1px solid #003b83;*/
    /*border-radius: 100px;*/
    /*background: #003b83;*/
  }
  .joinBox .join_wrap .join-con-wrap .text_area {
    padding: var(--spacein-padding-default-sm) 0;
  }
  .joinBox .join_wrap .join-con-wrap .text_area > div {
    margin-bottom: 20px;
  }
  .joinBox .join_wrap .join-con-wrap .text_area > div textarea {
    height: 200px;
  }
  .joinBox .join_wrap .join-con-wrap .text_area > div > p {
    padding-left: 32px;
  }

  .buttonWrap button.next {
    /*font-size: 13px;*/
    padding: 2px 20px;
  }

  /* 회원가입 - 인증 버튼 */
  .certified {
    padding: 25px 0;
  }
  .certified button.cell-certified {
    padding: var(--spacein-padding-default-lg);
  }
  .certified button.cell-certified i {
    /*font-size: 30px;*/
    margin-bottom: 10px;
  }
  .certified button.cell-certified p {
    /*font-size: 13px;*/
  }

  /* 회원가입 정보 입력 */
  .join2_wrap {
    width: auto;
    border: none;
  }
  .info_in {
    padding: 20px 0;
  }
  .info_in ul li > div {
    gap: 8px;
  }
  .info_in ul li > div input[type="radio"] {
    width: auto;
  }
  .info_in ul li > div.hp-input span,
  .info_in ul li > div.email-input span {
    margin-inline: 8px;
  }
  .info_in ul li > div.email-input .select-wrap {
    margin-left: 8px;
  }
  .info_in ul li > div.email-input .select-wrap::after {
    right: 8px;
  }
  .info_in ul li > div.email-input select {
    padding-inline: 4px;
  }
  .buttonWrap button.prev {
    padding: 2px 20px;
  }
  .info_in ul li > div input.id_inp {
    width: 100%;
  }

  /* 회원가입 - 아이디 or 비번 찾기 */
  .idpw_wrap {
    padding: 0;
  }
  .idpw_wrap:after {
    display: none;
  }
  .idpw_wrap .idpw {
    width: auto;
    padding: 40px 0;
  }
  .idpw_wrap .idpw > div {
    width: 100%;
    display: block;
  }
  .idpw_wrap .idpw > div h3 {
    box-sizing: border-box;
    padding-right: 20px;
    margin-bottom: 24px;
  }
  .idpw_wrap .idpw > div h3 i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-left: 5px;
  }
  .idpw_wrap .idpw > div ul li label {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
  .idpw_wrap .idpw > div .form {
    width: 95%;
    padding: 24px;
    border: 1px solid #eee;
  }
  .idpw_wrap .idpw > div .form input {
    width: 100%;
  }
  .idpw_wrap .idpw > div ul li {
    margin-bottom: 20px;
  }
  .idpw_wrap .idpw .id_f .form {
    padding: 24px;
  }
  .idpw_wrap .idpw .id_f {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #aaa;
  }

  /* 회원가입 - 아이디 찾기 결과 */
  .id_res {
    padding: 0;
  }
  .id_res .res_box {
    width: 90%;
    padding: 40px 10px;
    margin: 40px auto;
  }
  .id_res .buttonWrap {
    padding: 20px 0 0;
  }
  .id_res .buttonWrap button.re {
    margin-right: 10px;
  }
  .tab_menu li {
    padding: 10px;
  }
  /* 게시판 뷰 */
  .table_view {
    box-sizing: border-box;
  }
  .table_view .titleBox {
    padding: 10px;
    border-top: none;
  }
  .table_view .titleBox h3.tit {
    font-size: var(--spacein-all-middle-text);
    margin-bottom: 15px;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .table_view .titleBox ul.info li {
    margin-right: 0;
    padding-right: 0;
    padding: 5px 0;
    width: 100%;
  }
  .table_view .titleBox ul.info li span {
    /*width: 45px;*/
    display: inline-block;
  }
  .table_view .fileBox p.lab {
    padding: 10px;
    display: block;
    font-weight: var(--spacein-font-weight-bold);
  }
  .table_view .fileBox p.inp {
    padding: 0 10px;
  }
  .table_view .view_con {
    padding: 10px;
    /*font-size: 13px;*/
    word-break: break-all;
    margin-bottom: var(--spacein-list-gap-sm);
  }
  .table_view .view_con img {
    width: 100% !important;
  }
  .buttonWrap_v div button.prev_li {
    margin-right: 10px;
  }
  /* 글 입력 */
  .table_input .form_info {
    top: -48px;
    font-size: var(--spacein-all-breadcrumb);
  }
  .table_input .titleBox h3.tit {
    margin-top: calc(1rem + 8px);
    margin-bottom: 0;
    overflow: visible;
  }
  .table_input .view_con {
    padding: var(--spacein-list-gap-sm) 0;
  }
  .table_input .titleBox {
    padding: 0;
  }
  .table_input .fileBox {
    padding: var(--spacein-grid-gap-xs) 0;
  }
  .table_input .fileBox p.lab {
    display: block;
    padding: 10px 10px 10px 0;
    flex-shrink: 1;
  }
  .table_input .fileBox p.inp {
    display: flex;
    padding: 0;
    margin-bottom: 0 !important;
    flex: 1 0;
    flex-wrap: wrap;
    align-items: center;
  }
  .table_view .fileBox p.lab:after {
    display: none;
  }

  /* 1:1 답변  뷰 */
  .table_view .titleBox_m {
    border-top: 2px solid rgba(41, 110, 178, 100%);
  }
  .reply_table {
    margin-bottom: var(--spacein-list-gap-sm);
    padding: 0 10px;
  }
  .table_list.table_list_board ul li.li_02.reply a {
  }
  span.re {
    font-size: var(--spacein-header-link);
    padding: 1px 5px;
    margin-right: 0;
  }

  /* 통합검색 */
  .allsearchBox {
    padding: 24px 0;
  }
  .allsearchBox h3.resultTxt {
    /*font-size: 18px;*/
  }
  .allsearchBox h3.resultTxt .searchWord {
    /*font-size: 20px;*/
  }
  .allsearchBox .search_Box .search {
    padding-left: 90px;
  }
  .allsearchBox .search_Box .p {
    /*font-size: 11px;*/
  }
  .allsearchBox .search_Box {
    padding: 10px 0;
  }
  .allsearchBox .tabBox ul li {
    padding: 10px;
    overflow: hidden;
    width: 100%;
    display: block;
    border: 1px solid #ddd;
    margin-bottom: 8px;
    box-shadow: none;
  }
  .allsearchBox .tabBox ul li:last-child {
    border-radius: 0;
    margin-bottom: 0;
  }
  .allsearchBox .tabBox ul li:first-child {
    border-radius: 0;
  }
  .allsearchBox .tabBox ul {
    transform: translateX(0);
    position: inherit;
    display: block;
  }

  .tab_menu_search .contentBox {
    padding: 24px 0;
  }
  .tab_menu_search .tab-content .titBox h3 {
    /*font-size: 18px;*/
  }
  .tab_menu_search .tab-content .titBox h3 span {
    /*font-size: 16px;*/
  }
  .tab_menu_search .tab-content .titBox .more a {
    /*font-size: 16px;*/
  }
  .tab_menu_search .tab-content .listView ul.list li {
    flex: 0 0 calc((100% - (var(--spacein-grid-gap-lg) * 2)) / 3);
    max-width: unset;
  }
  .tab_menu_search .tab-content .listView ul.list li.item_4 {
    display: none;
  }
  .tab_menu_search .tab-content .listView ul.list li p.img {
    height: calc(((100vw - 48px) - (var(--spacein-grid-gap-lg) * 2)) / 3 / 16 * 9);
    max-height: unset;
  }
  .tab_menu_search .tab-content .listView .more_btn {
    text-align: center;
  }
  .tab_menu_search .tab-content .content {
    margin-bottom: 40px;
  }
  .tab_menu_search .tab-content .listView_no {
    /*font-size: 15px;*/
  }
  .tab_menu_search .tab-content .listView ul.board li a {
    padding: 16px 8px;
  }
  .tab-content .listView {
  }
  .tab_menu_search .tab-content .listView ul.board li p {
  }

  /* 오픈 콘텐츠 */
  .in_con .listView ul.list {
    overflow: visible;
  }
  .in_con .listView ul.list li {
    width: calc((100% - var(--spacein-grid-gap-sm)) / 2);
  }
  .in_con .listView ul.list li p.img {
    /*height: 124px;*/
    height: calc(((100vw - var(--spacein-grid-gap-sm) * 2 - 48px) / 3) / 16 * 9);
  }
  .in_con .listView ul.list li p.img img {
    height: 100%;
    width: 100%;
  }
  .in_con .listView .more_btn {
    width: 100%;
    display: block;
    text-align: center;
    position: inherit;
  }
  .in_con .listView .preview_btn {
    width: 100%;
    display: block;
    text-align: center;
    position: inherit;
  }
  .in_con .listView .preview_btn a {
    padding: 5px 16px;
  }
  .in_con .listView .more_btn a {
    padding: 5px 16px;
  }

  /* 오픈 콘텐츠 뷰 페이지 */
  .topBox {
    flex-direction: column;
  }
  .topBox p.img {
    width: 100%;
    box-sizing: border-box;
    display: block;
    float: inherit;
    height: auto !important;
    margin: 0 auto;
  }
  .topBox p.img img {
    width: 100%;
  }
  .topBox .infoBox {
    display: block;
    float: inherit;
    width: 100%;
    margin-top: 20px;
    border-bottom: 1px dotted #003b83;
  }
  .topBox .infoBox h3 {
    padding: 10px;
  }
  .topBox .infoBox .info {
    display: block;
  }
  .topBox .infoBox .info ul.list {
    display: block;
    float: inherit;
    width: 100%;
    margin-bottom: 20px;
  }
  .topBox .infoBox .info ul.list li {
    overflow: hidden;
    margin-bottom: var(--spacein-list-gap-lg);
  }
  .topBox .infoBox .info ul.list li p.title {
    width: 100% !important;
    font-size: var(--spacein-all-text-name);
    margin-bottom: var(--spacein-form-gap);
  }
  .topBox .infoBox .info ul.list li p.con {
    float: right;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 20px;
  }
  .topBox .infoBox .my_info ul.list li div.con {
    box-sizing: border-box;
    padding: 0 20px;
    width: 100%;
  }
  .topBox .infoBox .my_info ul.list li div.con ul.completion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .topBox .infoBox .my_info ul.list li div.con ul.completion li span {
    margin-left: 8px;
  }
  .topBox .infoBox .my_info ul.list li div.con ul.file li {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .topBox .infoBox .my_info ul.list li div.con ul.file li span.tit {
    flex: 0 1 22%;
  }
  .topBox .infoBox .my_info ul.list li div.con ul.file li span.fileName {
    width: unset;
    flex: 1 1;
  }
  .topBox .infoBox .info ul.list li p.con br.m {
    display: none;
  }
  .topBox .button {
    width: 100%;
    display: block;
  }
  .listCon {
    margin: 20px 0 50px;
  }
  .listCon .tabBox .tabs li {
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    border-bottom: none;
    background: #f9f9f9;
  }
  .listCon .tabBox .tabs li.current {
    border: 3px solid #003b83;
  }
  .listCon .tabBox .tabs.kasm li.current {
    border: 3px solid #B05D8E;
  }

  .listCon .contentBox #tab-1 .intro p.txt {
    /*font-size: 13px;*/
    width: 100%;
    float: inherit;
    margin-top: 10px;
  }
  .listCon .contentBox #tab-1 .intro p.icon {
    /*font-size: 13px;*/
    width: auto;
    height: auto;
    border-radius: 10px;
    padding: 10px;
  }
  .listCon .contentBox #tab-1 .intro p.icon i {
    /*font-size: 13px;*/
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 0;
  }
  .data li {
    /*font-size: 13px;*/
  }
  .data li p.title i {
    margin-right: 0;
  }
  .data li p.title {
    width: 100%;
    margin-bottom: 5px;
  }
  .data li p.con {
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px;
  }
  .buttonBox button {
    /*font-size: 13px;*/
  }
  .buttonBox button.list {
    margin-right: 10px;
  }
  .tableRow ul li.percent p {
    margin-bottom: 10px;
    margin-right: 0;
    display: block;
  }
  .tableRow ul li.percent p.non {
    margin-bottom: 0;
  }

  /* 정규 과정 */
  .nowBox h3.now_tit {
    /*font-size: 16px;*/
  }
  .view_list {
    /*font-size: 13px;*/
    /*overflow: hidden;*/
    display: none;
  }
  .listCon .contentBox #tab-1 .selectBox {
    /*font-size: 13px;*/
    margin-bottom: 15px;
    padding-bottom: 15px;
  }
  .listCon .contentBox #tab-1 .selectBox p.tit {
    /*font-size: 13px;*/
    margin-bottom: 20px;
  }
  .listCon .contentBox #tab-1 .selectBox p.tit span.num {
    /*font-size: 13px;*/
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: block;
    float: inherit;
    margin-bottom: 10px;
  }
  .listCon .contentBox #tab-1 .selectBox p.tit span.q {
    display: block;
    float: inherit;
    width: 100%;
  }
  .view_list ul {
  }
  .view_list ul.head {
  }
  .view_list ul li {
  }

  .view_list.mobile_block {display:block;}
  .view_list.mobile_block input.org {font-size: 13px;}

  .listCon .contentBox #tab-1 .selectBox .select {
    padding: 0;
  }
  .listCon .contentBox #tab-1 .selectBox .select li label {
    /*font-size: 13px;*/
  }

  .now_tablewRow {
    display: block;
  }
  .now_tablewRow ul {
    display: block;
  }
  .now_tablewRow ul li.head {
    width: 100%;
    padding: 10px;
  }
  .now_tablewRow ul li {
    display: block;
    width: 100%;
    padding: 20px;
  }

  /* 나의 강의실 */
  .pop-container.org{
    width: 330px;
  }
  .pop-container.org .pop-title{
    /*font-size: 16px;*/
  }
  .pop-container.org li span{
    /*font-size: 12px;*/
  }
  button.reg-pop{
    padding: 4px 12px;
    margin-left : 24px;
  }
  button.reg-pop:hover{
    background-color: #eee;
    transition: 0.2s ease;
  }
  .close-btn{
    margin: 0;
  }
  .close-btn:hover{
    cursor: pointer;
  }
  .close-btn img{
    width: 16px;
    height: 16px;
  }
  .pop-container.org ul{
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .pop-container.org li{
    display: flex;
  }
  .pop-container.org li span:first-child{
    min-width: 136px;
    font-weight: 600;
  }

  .only-mobile{
    display: block;
  }
  .conlist .pasing {
    padding: 15px 0;
  }
  .conlist .contentBox {
    border: 1px solid #ddd;
  }
  .conlist h3 {
    /*font-size: 16px;*/
  }
  .mypage_table {
    display: none;
  }
  .mypage_tableRow {
    display: block;
    border: 0;
    width: 100%;
  }
  .mypage_tableRow .myClass_ul {
    display: table;
    width: 100%;
    align-items: center;   /* 위아래 정렬 */
    background: #fff;
    box-sizing: border-box;
    padding: var(--spacein-padding-default-sm);
  }
  .mypage_tableRow .myClass_ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
    flex-grow: 1;
  }
  .mypage_tableRow ul li.head {
    background: none;
    width: 13%;
  }
  .mypage_tableRow ul li {
    padding: 0 0 8px 0;
    text-align: left;
    border-bottom: 0;
    border-right: 0;
    vertical-align: inherit;
  }
  .mypage_tableRow div.myClass {
    overflow: hidden;
    background: #f4f5f7;
    border-top: 1px solid #ddd;
  }
  .mypage_tableRow h3.myClass {
    margin-bottom: 0;
    padding: 15px 10px;
  }
  .mypage_tableRow h3.myClass a {
    color: #296eb2;
    width: 100%;
    height: 100%;
    display: block;
    font-size: var(--spacein-all-text-name);
  }

  .mypage_tableRow ul li.studying {
    color: #42ac53;
  }
  .mypage_tableRow ul li.completion {
    color: #56547c;
  }
  .mypage_tableRow ul li.unpaid {
    color: #c53636;
  }
  .mypage_tableRow ul li.wait {
    color: #000;
  }
  .mypage_tableRow ul li.bold {
    color: #b84c97;
  }

  .prolist h3 {
    /*font-size: 16px;*/
  }
  .prolist .pasing {
    padding: 15px 0;
  }

  .contentBox ul.none {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px 0;
    display: inherit;
    background: #f5f5f5;
  }
  .contentBox ul.none li {
    text-align: center;
    /*font-size: 13px;*/
  }

  .prolist .processBox {
    border: 1px solid #ddd;
    border-top: 0;
  }
  .processBox ul.none {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px 0;
    display: inherit;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
  }
  .processBox ul.none li {
    text-align: center;
  }

  /* 나의 강의실 - 상세보기 */
  .topBox .my_infoBox {
    width: 100% !important;
  }
  .bottomBox .inner .progress_ul {
    padding: 30px 0;
  }
  .bottomBox .inner .progress_ul li {
    flex: 1 1 40%;
    overflow: hidden;
  }
  .bottomBox .inner .progress_ul li.all {
    flex: 1 1 40%;
  }
  .bottomBox .inner .progress_ul li.stateBox {
    flex: 1 1 100%;
  }
  .bottomBox .inner .progress_ul li.stateBox .state {
    flex-direction: row;
    align-items: stretch;
    transform: none;
  }
  .bottomBox .inner .progress_ul li.stateBox .state p {
    padding: 10px 0;
  }
  .bottomBox .inner .progress_ul li.stateBox .state p .nl {
    display: none;
  }
  .bottomBox .inner .progress_ul li.stateBox .state form {
    width: unset;
    height: 100%;
  }
  .bottomBox .inner .progress_ul li.stateBox .state button.com_print {
    width: auto;
    height: 100%;
    flex-shrink: 1;
    margin-left: var(--spacein-grid-gap-sm);
    border-radius: 12px;
    margin-top: 0;
    box-sizing: border-box;
  }
  .bottomBox .inner .progress_ul li .show .show_inner span.survey_score {
    padding: 5px 10px;
  }
  .bottomBox .inner .progress_ul li p.tit {
    /*font-size: 13px;*/
  }
  .bottomBox .inner .progress_ul li.all .show {
    height: 93px;
  }
  /* 나의 강의실 accordion */
  .mypage_learning_list ul li .title {
    padding: 8px;
    gap: var(--spacein-grid-gap-xs);
  }
  .mypage_learning_list ul li .title .cha_num {
    margin-left: 4px;
  }
  .mypage_learning_list ul li .title .study_btn{
    padding: 4px 16px;
  }
  .mypage_learning_list ul li .info {
    display: none;
    cursor: default;
  }
  .mypage_learning_list ul li .info .info_dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 4px 8px;
  }
  .mypage_learning_list ul li .info .info_dl div.row {
    display: flex;
    flex: 1 1 calc(50% - var(--spacein-grid-gap-sm));
    flex-direction: row;
    text-align: start;
    gap: 8px;
    padding: 4px;
    border-bottom: 1px solid #AFAFAF;
  }
  .mypage_learning_list ul li .info .info_dl div.row:last-child {
    border-bottom: none;
  }
  .mypage_learning_list ul li .info .info_dl div.row dt {
    flex-shrink: 1;
    flex-basis: 80px;
    font-size: var(--spacein-all-text);
    font-weight: var(--spacein-font-weight-bold);
    padding-block: 8px;
    border-bottom: none;
  }
  .mypage_learning_list ul li .info .info_dl div.row dd {
    font-size: var(--spacein-all-text);
    padding-block: 8px;
    color: #B05D8E;
  }

  .topBox .infoBox .my_info ul.list {
    margin-bottom: 0;
  }
  .bottomBox2 .title {
  }
  .topBox .class_name {
    padding: 10px;
  }
  .topBox .class_name span.name {
    flex-grow: 1;
    word-break: break-word;
    float: inherit;
    box-sizing: border-box;
  }
  .topBox .infoBox .d-day {
    font-size: 16px;
  }
  .bottomBox2::-webkit-scrollbar {
    width: 100%; /* 스크롤바의 너비 */
    height: 8px;
  }

  .bottomBox2::-webkit-scrollbar-thumb {
    width: 1%; /* 스크롤바의 길이 */
    background: #9b9b9b; /* 스크롤바의 색상 */

    border-radius: 10px;
  }

  .bottomBox2::-webkit-scrollbar-track {
    background: #ddd; /*스크롤바 뒷 배경 색상*/
  }

  /* 관심교육 */
  .mypage_inter {
    display: none;
  }
  .myClass_ul2 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;   /* 위아래 정렬 */
    background: #fff;
    box-sizing: border-box;
    padding: var(--spacein-padding-default-sm);
  }
  .myClass_ul2 ul {
    flex: 1 1;
    align-items: center;
    display: flex;
    gap: var(--spacein-grid-gap-xs);
  }
  .myClass_ul2 ul li {
    padding: 0;
  }
  .myClass_ul2 ul li.head {
    width: unset;
  }
  .myClass_ul2 ul li.con {
    flex-grow: 1;
    line-height: 1.5;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .myClass_ul2 button.deleteBtn {
    flex-shrink: 1;
    font-weight: var(--spacein-font-weight-bold);
    border: 1px solid #aaa;
    color: #555;
    border-radius: 100px;
    box-sizing: border-box;
    padding: 5px 10px;
    display: block;
    margin: 5px auto;
    font-size: var(--spacein-all-text);
  }
  .myClass_ul2 button.deleteBtn:hover {
    background: #1d1d1d;
    color: #fff;
    border: 1px solid #1d1d1d;
  }
  .in_con .conlist .i_m_contentBox {
    display: block;
  }
  .in_con .prolist .i_m_processBox {
    display: block;
  }

  .mypage_tableRow .myClass_ul2 button {

  }
  @media (max-width: 767px) {
    .myClass_ul2 {
      display: grid;
      gap: var(--spacein-grid-gap-xs);
    }
    .myClass_ul2 ul {
      gap: var(--spacein-grid-gap-sm);
    }
  }
  /* 관심 교육 끝 */

  /* 문의 내역 */
  .mypage_qna ul li.li_01 {
    display: none;
  }
  .mypage_qna ul li.li_02 {
    text-align: left;
    width: 20%;
    padding: 10px 32px !important;
  }
  .mypage_qna ul li a {
    padding: 10px 0 !important;
  }
  .mypage_qna ul li.li_03 {
    width: 6%;
  }
  .mypage_qna ul li.li_04 {
    width: 6%;
  }

  .mypage_qna_class ul li.li_01 {
    display: none;
  }
  .mypage_qna_class ul li.li_02 {
    width: 15%;
  }
  .mypage_qna_class ul li.li_03 {
    width: 10%;
  }
  .mypage_qna_class ul li.li_04 {
    width: 7%;
  }

  .mypage_qna ul li.li_02.reply span.re {
    /*font-size: 10px;*/
    padding: 1px 5px;
    margin-right: 0;
  }
  .mypage_qna ul li.li_02.reply a {
    line-height: 1.6;
  }

  .classInfo {
    /*font-size: 13px;*/
    padding-bottom: 10px;
  }
  .classInfo .info p.className span {
    width: 70%;
  }

  .tab-link-2 a {
    padding: 10px;
  }

  /* 설문 */
  .in_con .in_con_inner .surveyList {
  }
  .in_con .in_con_inner .surveyList .survey {
    width: 100%;
  }
  .in_con .in_con_inner .surveyList .survey .topBox h3 {
    /*font-size: 16px;*/
    margin-top: 1px;
  }
  .in_con .in_con_inner .surveyList .survey .topBox {
    padding: 10px;
    vertical-align: middle;
  }
  .in_con .in_con_inner .surveyList .survey .bottomBox .left ul li {
    /*font-size: 13px;*/
  }
  .search_Box2 .search .in input {
    width: 100%;
  }
  /* 특성화교 사업 ~640px */
  .support-container {
    font-size: var(--spacein-all-text);
  }
  .support-container .support-title {
    font-size: var(--spacein-all-sub-title);
  }
  .support-container h3 {
    font-size: var(--spacein-all-sub-title);
  }
  .support-container h4 {
    font-size: var(--spacein-all-text-name);
  }
  .support-container table {
    margin: 0;
  }
  .support-container .list_box,
  .support-container.high .list_box {
    justify-content: space-between;
  }
  .support-container .list_box li,
  .support-container.high .list_box li {
    width: calc((100% - 20px) / 2);
    min-width: 176px;
    padding: 12px;
  }

  /* 교육포털 - 이용안내 ~640px */
  .introduce_cont {
    padding: 1rem 0;
  }
  .introduce_cont .info_tit_bg {
    height: 200px;
  }
  .introduce_cont .info_tit_bg .info_tit_circle {
    left: 50%;
    transform: translateX(-50%);
  }
  .introduce_cont .info_tit_bg .info_tit_txtBox {
    position: relative;
    top: 72px;
  }
  .introduce_cont .info_tit_txtBox .sub_tit {
    width: 296px;
  }
  .introduce_cont h4,
  .introduce_cont h5 {
    font-size: 1.2rem;
  }
  .introduce_cont .sub_tit {
    font-size: 1rem;
  }
  .introduce_cont .cont_box {
    flex-direction: column;
    align-items: center;
  }
  .introduce_cont .cont_box1 li {
    width: 99%;
    border: 1px solid #f3f3f3;
    padding: 14px 0;
    border-radius: 4px;
  }
  .introduce_cont .cont_box2 li {
    width: 100%;
  }

  .survey-apply .tab-content .selectBox p.tit span.num {
    flex: 0 0 20px;
  }
  .survey-apply .tab-content .selectBox .tit .q {
    line-height: 20px;
  }

  .sub_bn .titBox {
    padding: 30px 0;
  }

  .sub_bn .titBox h3.tit {
    margin-bottom: 5px;
  }

  .sub_content .sub_content_inner {
    flex-direction: column;
    padding: 30px 24px;
  }

  /* 태블릿 전용 (768~1023px) */
  @media (min-width: 768px) {
    .in_con .listView ul.list li {
      width: calc((100% - var(--spacein-grid-gap-lg) * 2) / 3);
    }

  }
}

@media screen and (max-width: 767px) {

  .pasing ul li.page-nav-text {
    display: none;
  }

  .pagination-mobile-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .pagination-mobile-nav .mobile-nav-text {
    font-size: var(--spacein-all-pagination);
    font-weight: 400;
    color: #666;
    cursor: pointer;
  }

  .pagination-mobile-nav .mobile-nav-text.disabled {
    color: #ccc;
    cursor: default;
  }

  .pagination-mobile-nav button {
    background: #296eb2;
    color: #fff;
    border-radius: calc((var(--spacein-all-pagination) * 1.5) / 2);
    width: calc(var(--spacein-all-pagination) * 1.5);
    height: calc(var(--spacein-all-pagination) * 1.5);
    font-size: var(--spacein-all-pagination);
    line-height: calc(var(--spacein-all-pagination) * 1.5);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination-mobile-nav button.disabled {
    background: #ccc;
    cursor: default;
  }

  /* KASM 모바일 버튼 */
  .pasing.kasm .pagination-mobile-nav button {
    background-color: #B05D8E;
  }
  .pasing.kasm .pagination-mobile-nav button.disabled {
    background-color: #ccc;
  }
  /* 기존 ul의 화살표 버튼 숨김 */
  .pasing ul li.arrow {
    display: none;
  }

  /* 숫자 페이징 스타일은 PC와 동일하게 유지 */
  .pasing ul {
    gap: var(--spacein-form-gap);
    justify-content: center;
  }
  .sub_content {
    border-radius: 50px 50px 0 0;
    min-height: calc(100vh - 530px);
  }
  .main_con .titBox h3.subtitle {
    margin-bottom: var(--spacein-all-title-margin-bottom);
  }
  .pasing ul li {
    margin: 0 4px;
  }
  /* 페이지 공통 검색 박스 */
  .search_Box {
    margin-bottom: 32px;
  }

  .select-wrap {
    margin-right: 0;
    margin-left: 4px;
  }
  .in_con .listView ul.list {
    column-gap: var(--spacein-grid-gap-sm);
  }
  .search_Box .search .in input {
    padding: 10px calc(var(--spacein-input-search-icon-width) + 16px) 10px 8px;
  }
  .search_Box .search .in button {
    right: 8px;
  }
  .in_con .listView ul.list li .text {
    padding: var(--spacein-grid-gap-xs);
    gap: var(--spacein-grid-gap-xs);
  }
  .in_con .listView ul.list li h3.title {
    margin-bottom: var(--spacein-grid-gap-xs);
  }
  .in_con .listView ul.list li p.img {
    /*height: 124px;*/
    height: calc(((100vw - 32px - var(--spacein-grid-gap-sm)) / 2) / 16 * 9);
  }
  .tab_menu_search .tab-content .listView ul.board li span.date {
    font-size: var(--spacein-all-breadcrumb);
  }
  .listCon .contentBox {
    padding: 20px;
  }
  .con_table {
    gap: 16px;
  }
  .con_table li {
    gap: 16px;
    padding: 0 0 16px 0;
    flex-direction: column;
  }
  .listCon .contentBox #tab-1 .intro {
    padding: var(--spacein-padding-default-sm);
    gap: var(--spacein-grid-gap-sm);
    flex-direction: column;
    align-items: stretch;
  }
  .listCon .contentBox #tab-1 .intro div.icon {
    width: 70px;
    height: 70px;
    text-align: center;
  }
  .listCon .contentBox #tab-1 .intro div.icon i {
    font-size: var(--spacein-all-text-name);
    width: var(--spacein-all-text-name);
    height: var(--spacein-all-text-name);
    line-height: var(--spacein-all-text-name);
    margin: 0 auto;
  }
  /* 수강신청 페이지 */
  .all_price {
    padding: var(--spacein-padding-default-sm);
  }
  .milestone-container {
    padding: 30px !important;
  }
  /* 나의 강의실 */
  .tab_menu {
    margin-bottom: 32px;
  }
  .tab_menu ul {
    gap: var(--spacein-grid-gap-sm);
  }
  .search_Box2 .search {
    flex-wrap: wrap;
    position: relative;
    padding: 8px 0;
  }
  .search_Box2 .search select {
    order: 0;
    margin-bottom: 8px;
  }
  .search_Box2 .search .in {
    order: 0;
    flex: 1 1 50%;
    margin-bottom: 8px;
  }
  .search_Box2 .search .date {
    order: 1;
    flex: 1 1 100%;
    margin: 0 8px;
  }
  .search_Box2 .search .date input {
    flex-grow: 1;
    font-size: 0.875rem;
  }
  .search_Box2 .search button {
    position: absolute;
    top: calc(25% - 4px);
    right: 0;
    transform: translate(0px, -25%);
    margin-right: 8px;
  }
  /* 자주 묻는 질문 */
  .accordion ul li > p {
    padding: var(--spacein-list-gap-sm) calc(var(--spacein-input-search-icon-width) + 16px) var(--spacein-list-gap-sm) 8px;
  }
  .accordion ul li > p:after {
    right: 8px;
  }
  .accordion ul > li div.answer {
    padding: var(--spacein-padding-default-sm);
  }
  .accordion ul li > p span {
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin-right: 8px;
  }
  .accordion ul > li.on div.answer img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: var(--spacein-list-gap-sm);
  }
  /* 회원가입 및 회원 정보 수정 */
  .info_in ul li {
    margin-bottom: var(--spacein-list-gap-sm);
    padding-bottom: var(--spacein-list-gap-sm);
  }
  /* 로그인 */
  .login_box {
    width: 100%;
  }
  .login_wrap {
    padding: 50px 10px;
  }
  /*.login_box {*/
  /*  width: auto;*/
  /*}*/
  .login_box .login_box_inner {
    padding: 10px 0 0;
  }
  .login_wrap h2.title {
    font-size: 20px;
  }
  .login_box .login_box_inner .input_box .field-label {
    gap: var(--spacein-grid-gap-sm);
  }
  .login_box .login_box_inner .input_box {
    margin-top: 0;
    width: 100%;
  }
  .login_box .login_box_inner .input_box i {
    font-size: 14px;
  }
  .login_box .login_box_inner .id_save {
    margin: 15px 0 15px 8%;
  }
  .login_box .login_box_inner .id_save label {
  }
  .login_box .login_box_inner .login_search {
    margin: 20px auto 0;
    padding: 5px 0 0;
    width: 100%;
    max-width: 450px;
  }
  .login_box .login_box_inner .login_search ul {
    gap: 10px;
  }
  .login_box .login_box_inner .login_search ul li.join {
    text-align: center;
    float: inherit;
    margin-top: 15px;
  }
  .login_box .login_box_inner .login_search ul li {
    margin-right: 0;
    text-align: center;
    float: inherit;
  }
  .login_box .login_box_inner .login_search ul li a {
    line-height: 180%;
    padding: 2px 27px;
  }
  .login_box .login_box_inner .login_search ul li.join a {
    /*font-size: 13px;*/
    text-align: center;
  }
  .login_box .login_box_inner .login_search ul li.idpw_s {
    margin-right: 0;
    margin-top: 15px;
  }
  .login_box h3.title i {
    font-size: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin-bottom: 30px;
  }
  /* 시험지, 과제지 모바일 */
  .quizBox {
    margin-top: 20px;
  }
  .view_wrap .inner > .head {
    padding: 8px 16px;
  }
  .view_wrap .inner > .head h3 {
  }
  .view_wrap {
  }
  .view_wrap .inner .view_content {
    padding: var(--spacein-padding-default-sm);
  }
  .view_wrap .inner .view_content .tableRow_view ul li {
    /*font-size: 10px;*/
  }
  .view_wrap .inner .view_content .tableRow_view ul li br {
    display: none;
  }
  .quizBox .quiz img {
    margin-top: 10px;
    width: auto !important;
    max-width: 100% !important;
  }
  .quizBox .quiz {
    margin-bottom: 30px;
  }
  .quizBox .quiz .top span.num {
    width: var(--spacein-quiz-num-width);
    height: var(--spacein-quiz-num-width);
    line-height: var(--spacein-quiz-num-width);
    border-radius: calc(var(--spacein-quiz-num-width) / 2);
    font-size: var(--spacein-quiz-num-font-size);
    font-weight: var(--spacein-font-weight-bold);
  }
  .quizBox .quiz .check {
    padding: 10px 25px;
  }
  .quizBox .quiz .info p span {
    border-radius: 8px;
  }
  .quizBox .quiz .check ul li.answer:after {
    left: -23px;
  }
  .quizBox .quiz .write {
    padding: 10px;
  }
  .view_content .view_button_wrap button.close {
    color: #1d1d1d;
  }
  .view_wrap .inner .view_content .tableRow_view {
    border-bottom: 0;
  }
  .view_wrap .inner .view_content .tableRow_view ul {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 0;
  }
  .view_wrap .inner .view_content .tableRow_view ul li {
    width: 70%;
    border-right: 0;
    border-bottom: 1px solid #888;
  }
  .view_wrap .inner .view_content .tableRow_view ul li.head {
    width: 30%;
    border-right: 1px solid #888;
  }
  .quizBox .quiz .check ul li span.content {
    /*margin-top: 3px;*/
  }

  .quizBox .quiz .check p.tit {
    /*font-size: 12px;*/
  }
  .quizBox .quiz .check .answerBox input {
    width: 100%;
    padding: 0;
  }
  .quizBox .quiz .top p.explan {
    margin-top: var(--spacein-list-gap-sm);
  }
  .input_wrap .quizBox .write .answer textarea {
    padding: var(--spacein-padding-default-sm);
  }

  .support-container .list_box li {
    width: 100% !important;
  }
  .support-container .list_box li a {
    flex-direction: row;
  }

  .allsearchBox .search_Box .search {
    padding-left: 80px;
  }

  .sub_content .sub_content_inner {
    width: 100%;
    padding: 30px 16px;
  }

  .tab_menu_search .tab-content .listView ul.list {
    column-gap: var(--spacein-grid-gap-sm);
  }
  .tab_menu_search .tab-content .listView ul.list li {
    flex: 0 0 calc((100%  - (var(--spacein-grid-gap-sm) * 1)) / 2);
    max-width: unset;
    box-shadow: 0 0 10px rgba(0, 0, 0, 15%);
    border: 1px solid #ddd;
  }
  .tab_menu_search .tab-content .listView ul.list li.item_3 {
    display: none;
  }
  .tab_menu_search .tab-content .listView ul.list li:hover {
    box-shadow: 0 0 5px #003b83;
    border: none;
  }
  .tab_menu_search .tab-content .listView ul.list li p.img {
    height: calc(((100vw - 32px) - (var(--spacein-grid-gap-sm) * 1)) / 2 / 16 * 9);
    max-height: unset;
  }
  .tab_menu_search .tab-content .listView ul.list li .text {
    padding: 8px;
  }
  .tab_menu_search .tab-content .listView .more_btn a {
    padding: 5px 14px;
  }

  /*자동 로그아웃 안내페이지*/
  .session_logout_page .br_pc {
    display: none;
  }
  .session_logout_page .br_mobile {
    display: inline;
  }
  .session_logout_page {
    padding-top: 77px;
  }
  .session_logout_page .home_btn {
    width: 190px;
    height: 60px;
  }

  /* 고객센터 테이블 */
  .sm_size_table_container { display: unset; }
  .nsm_size_table_container { display: none; }

  .sm_table {
    border-radius: 10px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    margin-top: var(--spacein-form-gap);
    padding: var(--spacein-padding-default-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacein-form-gap);
  }
  .sm_table.noti {
    background-color: #f9f9f9;
  }

  /* title과 reply 스타일 통합 */
  .sm_table_title,
  .sm_table_reply_title {
    display: flex;
    gap: var(--spacein-form-gap);
    align-items: center;
    width: 100%;
    overflow: hidden;
  }

  /* title 관련 스타일 */
  .sm_table_title img,
  .sm_table_title .table_num {
    flex-shrink: 0;
  }
  .sm_table .sm_table_title .table_num {
    width: auto;
  }
  .sm_table_title .sm_table_title_text {
    flex-grow: 1;
    min-width: 0;
  }
  .sm_table_content .ellipsis-text,
  .sm_table_content_reply .ellipsis-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* reply 관련 스타일 */
  .sm_table_reply_title .reply_ico,
  .sm_table_reply_title .re,
  .sm_table_reply_title img {
    flex-shrink: 0;
    font-size: var(--spacein-header-link);
  }

  /* title과 reply 내부 p 태그 공통 스타일 */
  .sm_table_title p,
  .sm_table_reply_title p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--spacein-all-text-name);
    min-height: var(--spacein-padding-default-lg);
  }

  /* content 관련 */
  .sm_table_content {
    display: flex;
    justify-content: space-between;
    gap: var(--spacein-grid-gap-xs);
  }
  .sm_table_content.job_table {
    align-items: center;
    gap: var(--spacein-list-gap-lg);
  }
  .sm_table_content p {
    color: #888;
    font-size: var(--spacein-all-text);
    font-weight: var(--spacein-font-weight-regular);
  }
  .sm_table_content .table_job {
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sm_table_content .table_job.right {
    flex-shrink: 1;
    flex-grow: 1;
    min-width: 0;
    text-align: end;
  }

  /* writer 관련 */
  .sm_table_content .sm_table_writer,
  .sm_table_title_reply .sm_table_content_reply .sm_table_writer_reply {
    display: flex;
  }
  .sm_table_content .sm_table_writer p:first-child,
  .sm_table_title_reply .sm_table_content_reply .sm_table_writer_reply p:first-child {
    font-weight: var(--spacein-font-weight-bold);
  }
  .sm_table_content > div:last-child {
    flex-shrink: 0;
  }

  /* reply 내부 content */
  .sm_table_title_reply {
    gap: var(--spacein-grid-gap-sm);
  }
  .sm_table_title_reply hr {
    width: 100%;
    margin: 0 0 10px 0;
    border: 1px solid #D9D9D9;
  }
  .sm_table_title_reply p {
    color: #888;
    font-size: var(--spacein-all-text);
    font-weight: var(--spacein-font-weight-regular);
  }
  .sm_table_title_reply .sm_table_gap {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sm_table_title_reply .sm_table_content_reply {
    display: flex;
    justify-content: space-between;
  }

  .writer-area {
    flex-grow: 1;
    min-width: 0;
  }
  .no-wrap-text {
    white-space: nowrap;
  }
  .no-shrink {
    flex-shrink: 0;
  }
  .content_write #insert_form {
    padding: calc(var(--spacein-padding-default-sm) - 10px);
  }
  .content_write .form_info {
    top: var(--spacein-padding-default-sm);
    right: var(--spacein-padding-default-sm);
  }
  .content_write .boardWrite .write_inner .titBox label,
  .content_write .boardWrite .write_inner .fileBox label,
  .content_write .boardWrite .write_inner .writeBox label {
    font-size: 17px;
  }
  .content_write .boardWrite .write_inner .titBox input,
  .content_write .boardWrite .write_inner .fileBox input,
  .content_write .boardWrite .write_inner .writeBox textarea {
    font-size: 16px;
  }

  /* 모바일 환경 - 커스텀 파일 표시 반응형 */
  .content_write .boardWrite .write_inner .fileBox .custom-file-display {
    min-height: 44px;
    padding: 8px 12px;
    gap: 8px;
  }

  .content_write .boardWrite .write_inner .fileBox .custom-file-display .file-info-actions {
    gap: 6px;
    white-space: nowrap;
  }

  .content_write .boardWrite .write_inner .fileBox .custom-file-display .file_size {
    font-size: 13px;
  }

  .content_write .boardWrite .write_inner .writeBox .buttonBox2_qna .inBtn,
  .content_write .boardWrite .write_inner .writeBox .buttonBox2_qna .backBtn {
    font-size: 17px;
  }
}

@media screen and (max-width: 479px) {
  .mypage_learning_list ul li .title .cha_num,
  .mypage_learning_list ul li .title .cha_name {
    font-size: var(--spacein-all-text);
  }
  .mypage_learning_list ul li .info .info_dl div.row dt {
    flex-basis: 60px;
  }
  .mypage_learning_list ul li .info .info_dl div.row dt,
  .mypage_learning_list ul li .info .info_dl div.row dd {
    font-size: 0.75rem;
  }

  /* 특성화교 ~479px */
  .support-container .list_box li a figure {
    width: 64px;
    height: 64px;
  }

  /* 교육포털 - 이용안내 ~479px*/
  .introduce_cont .info_tit_txtBox .sub_tit {
    width: 254px;
  }
  .introduce_cont .sub_tit,
  .introduce_cont .bizinfo_item_content {
    font-size: 0.9rem;
  }
}
@media screen and (min-width: 1280px) {
  .sub_content_inner.allSearch {
    display: grid !important;
    flex-wrap: wrap;
    gap: 0;
  }
  .in_con .listView ul.list li p.img {
    overflow: hidden;
    width: 100%;
    height: calc(((1200px - 60px) * 80 / 100) / 4 / 16 * 9);
    border-bottom: 1px solid #ddd;
  }
  .in_con .listView ul.list li .text {
    gap: var(--spacein-grid-gap-xs);
  }
  .table_view .titleBox ul.info {
    display: flex;
  }
  .table_view .titleBox ul.info li:last-child {
    gap: 0;
  }
}

@media screen and (min-width: 1024px) {
  .table_input .fileBox {
    max-width: calc(1200px - 250px);
    width: calc(100vw - 250px);
  }

  .table_input .fileBox .file_size, .table_input .fileBox .clear_button {
    top: 63%;
  }
}

@media screen and (min-width: 768px) {
  .sm_size_table_container { display: none; }
  .nsm_size_table_container { display: unset; }
}

.learning_wrap .inner .videoBox {
  position: relative;
  height: calc((100vw - 48px) / 16 * 9 + var(--meta_control_page_area_height));
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  margin-bottom: 10px;
}
.learning_wrap .inner .videoBox.embed {
  height: calc((100vw - 48px) / 16 * 9);
  margin-bottom: 0;
  border-radius: 0;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

/* 스피너 */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ffffff;
  border-top: 5px solid #4589E1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 회전 애니메이션 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}