@charset "utf-8";

/* color */
:root {
  --primary1: #398cdc;
  --primary2: #0066b3;
  --primary3: #002870;
  --primary4: #00b6ad;
  --primary5: #f46502;
  --secondary1: #f3f6fb;
  --secondary2: #f9f9f9;
  --secondary3: #8aa0b8;

  --gray1: #111;
  --gray2: #222;
  --gray3: #545559;
  --gray4: #77797d;
  --gray5: #dddddd;
  --gray6: #eeeeee;
  --gray7: #999999;

  /* gnb 세로 */
  --gnb-height: 10.2rem;
  /* pc 콘텐츠 영역 */
  --wrap-width: 144rem;
}

/* 폰트 */
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format("woff2"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format("woff"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format("woff2"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format("woff"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format("woff2"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format("woff"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format("woff2"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format("woff"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format("woff2"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format("woff"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 900;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format("woff2"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format("woff"),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format("opentype");
}

@font-face {
  font-family: "Jalnan";
  src: url("../../font/Jalnan.woff2") format("woff2"),
  url("../../fontJalnan.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

main {
  padding-bottom: 6rem;
}

/************************************
 # 공통
************************************/
/* 말줄임 */
.ellipsis {
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 대체 텍스트 */
.sr-only {
  overflow: hidden;
  position: absolute;
  margin: -1px 0 0 -1px;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0) !important;
}

/* '*'필수입력사항*/
.required {
  color: #e3072b;
}

/*정렬*/
.flex-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.flex-row-center {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}

.flex-end {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 1rem;
}

/************************************
 # button
************************************/
[class^="btn-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.7rem;
  border-radius: 1rem;
  transition: all 0.3s ease;
}

[class^="btn-"]:disabled {
  background: var(--gray7) !important;
  color: var(--gray6) !important;
}

[class^="btn-"]:disabled i {
  opacity: 0.5;
}

[class^="btn-xl"] {
  height: 5.5rem;
  min-width: 18.5rem;
  padding: 0 0.5rem;
}

.btn-xl-s {
  min-width: 10.4rem;
}

.btn-xl-blue {
  color: #fff;
  background-color: var(--primary3);
}

.btn-xl-blue:hover {
  background: #000838;
}

.btn-xl-white {
  background-color: #fff;
  border: 1px solid var(--primary3);
}

.btn-xl-white:hover {
  color: #fff;
  background: var(--primary3);
}

[class^="btn-lg"] {
  height: 5rem;
  min-width: 16.6rem;
  padding: 0 0.5rem;
  border-radius: 1rem;
}

.btn-lg-s {
  min-width: 9.5rem;
}

.btn-lg-blue {
  color: #fff;
  background-color: var(--primary3);
}

.btn-lg-blue:hover {
  background-color: #000838;
}

.btn-lg-white {
  background-color: #fff;
  border: 1px solid var(--primary3);
}

.btn-lg-white:hover {
  color: #fff;
  background: var(--primary3);
}

[class^="btn-sm"] {
  display: flex;
  align-items: center;
  padding: 0 1.3rem;
  height: 3.7rem;
  font-size: 1.5rem;
  font-weight: 400;
}

.btn-sm {
  color: #fff;
  background-color: var(--primary3);
}

.btn-sm-white {
  color: var(--primary3);
  background-color: #fff;
  font-weight: 400;
  border: 1px solid var(--primary3);
  border-radius: 0;
}

.btn-sm-blue {
  color: #fff;
  background-color: var(--primary3);
  font-weight: 400;
  border: 1px solid var(--primary3);
  border-radius: 0;
}

.btn-sm-blue:hover {
  background-color: #000838;
}

.btn-sm-gray {
  color: #fff;
  background: var(--gray4);
  font-weight: 400;
  border: 1px solid var(--gray4);
  border-radius: 0;
}

.btn-radius {
  border-radius: 0.4rem;
}

[class^="btn-md"] {
  font-size: 1.5rem;
  min-width: 6.5rem;
  height: 4.5rem;
  padding: 0 1.3rem;
}

.btn-md-gray {
  color: #fff;
  background: var(--gray4);
}

.btn-gray-md:hover {
  background: var(--gray3);
}

[class*="btn-"][class$="-blue"] {
  background-color: var(--primary3);
  color: #fff;
}

[class*="btn-"][class$="-blue"]:hover {
  background-color: #000838;
}

[class*="btn-"][class$="-gray"] {
  background-color: var(--gray4);
  color: #fff;
}

[class*="btn-"][class$="-gray"]:hover {
  background-color: var(--gray3);
}

[class*="btn-"][class$="-white"] {
  background-color: #fff;
  color: #181b41;
  border: 1px solid var(--primary3);
}

[class*="btn-"][class$="-white"]:hover {
  color: #fff;
  background: var(--primary3);
}

[class*="btn-"][class$="-white"]:hover .ico-20.ico-refresh {
  background-image: url("../../images/www/icon/ico_refresh_hover.png");
}

/************************************
 # form : input, radio, checkbox
************************************/
/* input */
.input-wrap {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 30rem;
  gap: 1rem;
}

.input-wrap:has(.btn-sm-blue) input[type="text"] {
  max-width: 60rem;
}

.input-wrap:has(.btn-sm-blue) button {
  height: 4.5rem;
}

.input-wrap input[type="text"],
.input-wrap input[type="password"],
.input-wrap input[type="number"],
.input-wrap input[type="date"] {
  width: 100%;
  height: 4.5rem;
  font-size: 1.5rem;
  padding: 0 0.8rem;
  border: 1px solid #ddd;
  border-radius: 0.6rem;
}

.input-wrap:has(input[type="date"]) {
  display: inline-block;
  max-width: 15rem;
  min-width: auto;
}

.input-wrap:has(input[type="date"])+.input-wrap:has(input[type="date"]) {
  margin-left: 1.4rem;
}

.input-wrap:has(input[type="date"])+.input-wrap:has(input[type="date"])::before {
  content: "~";
  display: inline-block;
  position: absolute;
  left: -1.3rem;
  top: 50%;
  transform: translateY(-50%);
}

.input-wrap.type-short input[type="text"] {
  max-width: 15rem;
}

.input-wrap input[type="text"]::placeholder,
.input-wrap input[type="password"]::placeholder,
.input-wrap input[type="number"]::placeholder {
  color: var(--gray4);
}

.wd100 {
  width: 100% !important;
}

/* radio */
.radio-box input[type="radio"] {
  display: none;
}

.radio-wrap {
  display: flex;
  gap: 2rem;
}

.radio-box label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.6rem;
  color: var(--gray1);
  gap: 0.5rem;
  position: relative;
}

.radio-box label::before {
  content: "";
  width: 2rem;
  height: 2rem;
  border: 2px solid #c8c8c8;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transition: all 0.5s ease-in-out;
}

.radio-box input[type="radio"]:checked+label::before {
  border-color: var(--primary2);
}

.radio-box input[type="radio"]:checked+label::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--primary2);
  border-radius: 50%;
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* chekbox */
.checkbox-wrap input[type="checkbox"] {
  display: none;
}

.checkbox-wrap {
  display: flex;
  gap: 2rem;
}

.check-box {
  display: flex;
  align-items: center;
}

.check-box label {
  font-size: 2rem;
  color: var(--gray1);
  cursor: pointer;
  display: flex;
  /* align-items: center; */
  position: relative;
  gap: 0.7rem;
}

.check-box label::before {
  content: "";
  width: 2rem;
  height: 2rem;
  border: 2px solid #c8c8c8;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}

.check-box input[type="checkbox"]:checked+label::before {
  background-color: var(--primary2);
  border-color: var(--primary2);
}

.check-box input[type="checkbox"]:checked+label::after {
  content: " ✓";
  color: #fff;
  position: absolute;
  top: 1rem;
  left: 1rem;
  transform: translate(-50%, -50%);
}

/************************************
 # align
************************************/
.align-center {
  text-align: center;
  justify-content: center;
}

.align-right {
  text-align: right;
  justify-content: flex-end;
}

.align-left {
  text-align: left;
  justify-content: flex-start;
}


/************************************
 # selectbox
************************************/
.selectbox-wrap select {
  width: auto;
  min-width: 30rem;
  height: 100%;
  padding: 0 1rem;
  border-radius: 4px;
  color: #777;
  height: 4.5rem;
  padding: 8px 32px 8px 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  background: #f9f9f9 url(../../images/www/icon/ico_select_gray.png) no-repeat right center;
}

.selectbox-wrap.type-short select {
  min-width: 15rem;
}

/************************************
 # textarea
************************************/
.textarea-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  max-width: 50rem;
}

.textarea-wrap textarea {
  width: 100%;
  height: 15rem;
  padding: 1.2rem;
  font-size: 1.4rem;
  font-family: inherit;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

.textarea-wrap textarea::placeholder {
  color: #777;
}

/************************************
 # table : tbl-col, tbl-row
************************************/
.tbl-wrap {
  width: 100%;
}

.tbl-wrap table {
  width: 100%;
  border-top: 0.2rem solid #333;
}

.tbl-wrap table tr {
  border-bottom: 1px solid var(--gray5);
}

.tbl-col thead tr {
  border: 0;
}

.tbl-col th {
  background-color: #f3f6fb;
  text-align: left;
  font-weight: 600;
}

.tbl-col th,
.tbl-col td {
  border-right: none;
  padding: 1.7rem;
  font-size: 1.6rem;
  text-align: center;
}

.tbl-col td:has(button) {
  padding: 0;
}

.tbl-col th:first-child,
.tbl-col td:first-child {
  border-left: none;
}

.tbl-col td {
  color: #666;
}

.tbl-col td.align-left {
  text-align: left;
}

.tbl-col td button {
  margin: 0 auto;
  display: inline-block;
}

.tbl-col .cell-header {
  display: none;
}

.tbl-row th,
.tbl-row td {
  padding: 1.7rem;
  font-size: 1.6rem;
}

.tbl-row.sm th,
.tbl-row.sm td {
  height: auto;
}

.tbl-row>tbody>tr>th {
  text-align: center;
  border-right: 1px solid var(--gray5);
  background-color: #f3f6fb;
  font-weight: 500;
}

th .td-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
}

th .td-btn span {
  font-weight: 500;
}

td .td-link {
  font-size: 1.8rem;
  color: var(--gray2);
  font-weight: 500;
}

td .td-link:hover {
  color: var(--primary2);
}

td .td-file-link {
  color: var(--primary2);
  font-weight: 500;
}

td .td-file-link:hover {
  opacity: 0.8;
}

/************************************
 # typography
************************************/
/* typography */
.subpage-title {
  text-align: center;
  margin: 7rem 0 5rem 0;
}

[class^="txt-"] {
  display: inline-block;
  line-height: inherit;
}

.txt-center {
  text-align: center;
}

.txt-h3 {
  font-size: 3.8rem;
  font-weight: 700;
}

.txt-h4 {
  font-size: 2.6rem;
  font-weight: 700;
}

.txt-h5 {
  font-size: 2.4rem;
  font-weight: 700;
}

.txt-fs-24 {
  font-size: 2.4rem;
  font-weight: 400;
}

.txt-fs-22 {
  font-size: 2.2rem;
  font-weight: 400;
}

.txt-fs-20 {
  font-size: 2rem;
  font-weight: 400;
}

.txt-fs-18 {
  font-size: 1.8rem;
  font-weight: 400;
}

.txt-fs-17 {
  font-size: 1.7rem;
  font-weight: 400;
}

.txt-fs-16 {
  font-size: 1.6rem;
  font-weight: 400;
}

.txt-fs-15 {
  font-size: 1.5rem;
  font-weight: 400;
}

.txt-fs-14 {
  font-size: 1.4rem;
  font-weight: 400;
}

.txt-fs-12 {
  font-size: 1.2rem;
  font-weight: 400;
}

.txt-guide {
  color: var(--primary2);
}

/************************************
 # tab
************************************/

/* tab */
.tab-wrap {
  position: relative;
}

.tab-wrap .btn-more {
  position: absolute;
  right: 1.8rem;
  top: 1.8rem;
}

.tab-wrap .tabs {
  display: flex;
  margin-bottom: 3rem;
  padding: 0;
  list-style-type: none;
  background-color: #f7f8fa;
  overflow-x: auto;
}

.tab-wrap .tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 5.5rem;
  padding: 0 2rem;
  color: #444;
  font-size: 1.6rem;
  border-right: 1px solid #fff;
}

.tab-wrap .tabs a:hover {
  background-color: #e0e4e8;
}

.tab-wrap .tabs .active a {
  color: var(--primary3);
  background-color: #fff;
  border: 1px solid #737373;
  border-bottom: none;
  font-weight: bold;
}

/************************************
 # bullet
************************************/
.bullet-list-wrap.bg-gray {
  background-color: #f3f3f3;
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 0.6rem;
}

.bullet-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.8rem;
  font-size: 1.6rem;
}

.bullet-list li::before {
  position: absolute;
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  left: 0;
  top: 0.5em;
  border-radius: 50%;
  font-size: 1.6rem;
  background-color: var(--primary2);
}

.bullet-list.type-check li {
  padding-left: 2rem;
}

.bullet-list li.fc-red {
  color: #f00;
}

.bullet-list.type-check li::before {
  position: absolute;
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  left: 0;
  top: 0.5rem;
  display: block;
  background: url(../../images/www/icon/ico_check.png) no-repeat 0 0;
  border-radius: 0;
  width: 12px;
  height: 1rem;
}

/************************************
 # file attach
************************************/
.file-wrap .file-box {
  position: relative;
  display: flex;
  width: 100%;
}

.file-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.file-wrap input[type="file"] {
  display: none;
}

.file-wrap .file-button {
  display: inline-block;
  padding: 0 1rem;
  height: 3.7rem;
  line-height: 3.7rem;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

.file-wrap .file-name {
  display: inline-block;
  font-size: 1.5rem;
  color: var(--gray3);
  font-weight: 500;
  padding: 0 1rem;
  line-height: 3.5rem;
  min-width: 35rem;
  border: 1px solid var(--gray5);
}

.file-wrap .file-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.file-wrap .file-list>div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* file_upload */
.attach-list li {
  font-size: 1.4rem;
}

.upload_guide {
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.upload_guide strong {
  color: #c32922;
  font-size: 1.4rem;
  font-weight: bold;
}

#fileUpload {
  width: 100%;
}

.attach {
  display: block;
}

.attach .drag_zone {
  position: relative;
  border: 1px dotted #adadad;
  padding: 20px;
  margin-bottom: 10px;
}

.attach .drag_zone .ad_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #333;
  display: inline-block;
  text-align: center;
  color: #fff;
  padding: 0 21px;
  height: 33px;
  line-height: 33px;
  font-size: 14px;
}

.attach .drag_zone input {
  display: none;
}

.attach .drag_zone span {
  display: block;
  padding-left: 120px;
  word-break: keep-all;
}

.attach .file_list li {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  vertical-align: middle;
  align-content: center;
}

.attach .file_list li .status {
  background: #eb6565;
  color: #fff;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 11px;
  text-align: center;
  display: inline-block;
  line-height: 1;
  height: 19px;
  vertical-align: top;
}

.attach .file_list li .progressbar {
  width: 200px;
  height: 10px;
  vertical-align: middle;
  appearance: none;
}

.attach .file_list li .progressbar::-webkit-progress-bar {
  background: #f0f0f0;
  border-radius: 30px;
}

.attach .file_list li .progressbar::-webkit-progress-value {
  border-radius: 30px;
  background: #6eb5cf;
}

.attach .file_list li .del {
  vertical-align: middle;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  background: url(../../images/www/icon/k_icon_del.png) no-repeat 50% 50%;
}

.attach .file_list li .del::before {
  font-size: 20px;
}

.file_view {
  color: var(--CmColor);
}

.txt_min {
  min-height: 200px;
}

/************************************
 # summary-info
************************************/
.summary-info {
  display: flex;
  align-items: center;
  margin-bottom: 1.6rem;
}

.summary-info span {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 400;
}

.summary-info span em {
  color: #537977;
}

.summary-info span+span::before {
  content: "";
  display: inline-block;
  width: 0.1rem;
  height: 1.5rem;
  margin: 0 1.7rem;
  background-color: var(--gray4);
}

.summary-info button {
  margin-left: auto;
}

/************************************
 # notification
************************************/
.notification-wrap {
  display: block;
}

.notification-wrap strong {
  font-size: 1.6rem;
  color: #333;
}

/* board-form 가운데정렬*/
.board-form.type-center {
  margin: 0;
}

.board-form.type-center .board-top {
  justify-content: center;
}

.board-form.type-center .board-top .inputbox {
  min-width: 40rem;
}

.notification-wrap strong p+p {
  margin-top: 0.5rem;
}

.notification-wrap strong p {
  position: relative;
  padding-left: 2.4rem;
}

.notification-wrap strong p i {
  position: absolute;
  left: 0;
  top: 0.2rem;
}

/************************************
 # pagination
************************************/
.pagination-wrap {
  position: relative;
}

.pagination-wrap .pagination {
  display: block;
  text-align: center;
}

.pagination-wrap .pagination ul {
  display: inline-block;
  overflow: auto;
}

.pagination-wrap .pagination ul li {
  float: left;
  margin: 1rem;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  display: block;
  text-align: center;
  min-width: 3.5rem;
  min-height: 3.5rem;
  color: #666666;
}

.pagination-wrap .pagination ul li a {
  display: block;
  height: 100%;
  padding: 0px 1.2rem;
  line-height: 3.4rem;
  min-width: 3.3rem;
  color: inherit;
  min-height: 3.3rem;
}

.pagination-wrap .pagination ul li a span {
  display: block;
  height: 100%;
  line-height: 3.3rem;
}

.pagination-wrap .pagination ul li.page-first {
  background: #fff url(../../images/www/icon/pagination/first.png) no-repeat center center;
}

.pagination-wrap .pagination ul li.page-prev {
  background: #fff url(../../images/www/icon/pagination/prev.png) no-repeat center center;
}

.pagination-wrap .pagination ul li.page-active {
  background: #181b41;
  border: #181b41;
  color: #fff;
}

.pagination-wrap .pagination ul li.page-next {
  background: #fff url(../../images/www/icon/pagination/next.png) no-repeat center center;
}

.pagination-wrap .pagination ul li.page-last {
  background: #fff url(../../images/www/icon/pagination/last.png) no-repeat center center;
}

.pagination-wrap button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/************************************
 # popup
************************************/
/* dialog */
.p-dialog-mask {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: none;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  z-index: 1101;
  background-color: rgba(0, 0, 0, 0.4);
  transition-duration: 0.2s;
}

.p-dialog-mask.active {
  display: flex !important;
}

.p-dialog-wrap {
  min-width: 40rem;
  max-width: 120rem;
  max-height: 90dvh;
  padding: 3rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  height: auto;
  background: #fff;
  border-radius: 30px;
  overflow-y: auto;
}

.p-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  min-height: 3.2rem;
  gap: 2rem;
}

.p-dialog-header .p-dialog-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--gray1);
}

.p-dialog-contents {
  margin-top: 2rem;
}

.p-dialog-contents .guide-txt {
  font-size: 1.8rem;
}

.p-dialog-close {
  width: 2.4rem;
  height: 2.4rem;
  background-image: url(../../images/www/icon/ico_close_black.svg);
}

.p-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 1rem;
  margin-top: 2rem;
}

/************************************
 #  alert
************************************/
.ui-dialog {
  background: #fff;
  min-height: 15rem;

  border-radius: 1.5rem;
  padding: 1.5rem;
}

.ui-dialog .ui-dialog-title {
  font-size: 1.6rem;
  background-color: #ebebeb;
  width: 100%;
  display: block;
  padding: 1rem 1.5rem;
  border-radius: 0.6rem;
  color: #333;
  font-weight: 500;
}

.ui-dialog .ui-dialog-content>div {
  font-size: 1.6rem;
  margin: 1rem 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.ui-dialog .ui-dialog-content>div:nth-child(1) {
  min-height: 6rem;
}

.ui-dialog .ui-dialog-content>div button {
  display: flex;
  align-items: center;
  padding: 0 1.3rem;
  height: 3.7rem;
  font-size: 1.5rem;
  font-weight: 400;
}

.ui-dialog .ui-dialog-content>div button:nth-child(1) {
  color: var(--primary3);
  background-color: #fff;
  border: 1px solid var(--primary3);
  margin: 0 !important;
  border-radius: 0.8rem;
}

.ui-dialog .ui-dialog-content>div button:nth-child(2) {
  color: #fff;
  background-color: var(--primary3);
  border: 1px solid var(--primary3);
  margin: 0 !important;
  border-radius: 0.8rem;
}

/************************************
# popoup
************************************/
body:has(.popup-wrap) {
  padding: 0;
  margin: 0;
}

.popup-wrap {
  padding: 2rem 2rem 5rem 2rem;
  height: 100%;
}

.popup-wrap:has(.popup-img-link) {
  padding: 0;
}

.popup-title {
  font-size: 2.2rem;
  font-weight: bold;
}

.popup-contents {
  margin-top: 1rem;
  font-size: 1.8rem;
  height: calc(100% - 2.2rem);
}

.popup-contents .btn-list {
  margin-top: 1rem;
  justify-content: flex-start;
  zoom: 1;
}

.popup-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 0.5rem 1.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #000;
  box-sizing: border-box;
}

.popup-footer label {
  color: #fff;
}

.popup-footer button {
  font-size: 1.6rem;
}

.popup-img-link {
  display: block;
  width: 100%;
  height: 100%;
}

.popup-img-link img {
  width: 100%;
  height: 100%;
}

/************************************
# 시험보기
************************************/
.ct_dialog {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 110;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.ct_dialog>.tb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.ct_dialog>.tb>.inner {
  width: 100%;
  padding: 10px;
}

.ct_dialog .outer {
  margin: 0 auto;
}

.ct_dialog .outer>.top {
  height: 70px;
  padding: 0 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #fff;
}

.ct_dialog .outer>.top .bowl {
  position: relative;
  height: 100%;
  border-bottom: 1px solid #dbdbdb;
}

.ct_dialog .outer>.top .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  line-height: 70px;
  font-size: 23px;
  font-weight: 700;
  color: #000;
}

.ct_dialog .outer>.top .p_close {
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
}

.ct_dialog .outer>.ct {
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px 30px 30px 30px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
}

.ct_dialog.alert .outer>.top {
  height: 50px;
  padding: 0 20px;
}

.ct_dialog.alert .outer>.top .title {
  line-height: 50px;
  font-size: 20px;
}

.ct_dialog.alert .outer>.top .bowl {
  border-bottom: 0;
}

.ct_dialog.alert .outer>.ct {
  padding: 0 20px 20px 20px;
}

.ct_dialog .at_desc {
  word-break: keep-all;
  font-size: 15px;
  text-align: center;
}

.ct_dialog .b_box.confirm a {
  width: 100px;
  padding: 0;
}

.ct_dialog .exam .box {
  display: block;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
}

.ct_dialog .exam .title {
  font-size: 1.4rem;
  align-items: center;
  border-bottom: 1px dotted #ddd;
  background: #edf2f7;
  line-height: 20px;
  padding: 10px 10px;
  color: #181818;
  display: flex;
  justify-content: space-between;
}

.ct_dialog .exam .title.color {
  background: #eee;
}

.ct_dialog .exam .title.color2 {
  color: #fff;
  background-color: var(--primary2);
  border-bottom: 0;
}

.ct_dialog .exam .title span {
  font-weight: bold;
}

.ct_dialog .exam ul {
  display: block;
  overflow: auto;
}

.ct_dialog .exam ul li {
  border-bottom: 1px solid #edd;
  padding: 10px 0;
  position: relative;
  padding-left: 200px;
}

.ct_dialog .exam ul li:last-child {
  border: none;
}

.ct_dialog .exam ul li span {
  width: 200px;
  display: inline-block;
  position: absolute;
  left: 0;
}

.ct_dialog .exam .full-width {
  width: 100%;
}

.ct_dialog .exam .attach {
  padding: 10px;
  background: #eee;
  margin-bottom: 10px;
}

.ct_dialog .exam .action {
  text-align: center;
}

.ct_dialog .exam .inner {
  padding: 10px;
}

.ct_dialog .exam .title .t_r {
  display: flex;
  align-items: center;
}

.ct_dialog .exam .title .t_r .btn-wrap {
  margin-right: 0.5rem;
}

.ct_dialog .exam .title .t_r .btn-wrap button {
  zoom: 0.8;
}

.ct_dialog .exam .title .t_r .b_box {
  padding: 0;
  margin-right: 5px;
  margin-top: 0;
}

.ct_dialog .exam .title .t_r .b_box a {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  padding: 0 10px;
}

.ct_dialog .exam .title .t_r .b_box a+a {
  margin-left: 5px;
}

.ct_dialog .exam .q_box {
  padding: 10px;
}

.ct_dialog .exam .q_box .top {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #dfdfdf;
}

.ct_dialog .exam .q_box .top .tit {
  font-weight: 500;
  color: #000;
}

.ct_dialog .exam .q_box .ex li a {
  display: flex;
  align-items: center;
  height: 100%;
}

.ct_dialog .exam .ex li {
  position: relative;
  height: 2rem;
}

.ct_dialog .exam .ex li+li {
  margin-top: 10px;
}

.ct_dialog .exam .ex .order {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  border-radius: 50%;
  color: #fff;
  background-color: #bebebe;
}

.ct_dialog .exam .ex p {
  padding-left: 25px;
}

.ct_dialog .exam .correct p span {
  margin-right: 5px;
  font-weight: 500;
  color: #da4453;
}

.ct_dialog .exam .ex .on .order {
  background-color: var(--primary2);
}

.ct_dialog .exam .ex .on.correct .order {
  background-color: #da4453;
}

.ct_dialog .exam .subject li {
  display: flex;
  font-size: 14px;
  border-bottom: 1px solid #dfdfdf;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.ct_dialog .exam .subject li span {
  display: block;
  width: 80px;
  font-weight: 600;
  color: #000;
}

.ct_dialog .qr_box {
  display: inline-block;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
  border: 1px solid #dfdfdf;
}

.ct_dialog .cm {
  text-align: center;
}

/************************************
 #  padding margin helper
************************************/
.p0 {
  padding: 0 !important;
}

.pt1 {
  padding-top: 0.1rem !important;
}

.pt2 {
  padding-top: 0.2rem !important;
}

.pt3 {
  padding-top: 0.3rem !important;
}

.pt4 {
  padding-top: 0.4rem !important;
}

.pt5 {
  padding-top: 0.5rem !important;
}

.pt6 {
  padding-top: 0.6rem !important;
}

.pt7 {
  padding-top: 0.7rem !important;
}

.pt8 {
  padding-top: 0.8rem !important;
}

.pt9 {
  padding-top: 0.9rem !important;
}

.pt10 {
  padding-top: 1rem !important;
}

.pt11 {
  padding-top: 1.1rem !important;
}

.pt12 {
  padding-top: 1.2rem !important;
}

.pt13 {
  padding-top: 1.3rem !important;
}

.pt14 {
  padding-top: 1.4rem !important;
}

.pt15 {
  padding-top: 1.5rem !important;
}

.pt16 {
  padding-top: 1.6rem !important;
}

.pt17 {
  padding-top: 1.7rem !important;
}

.pt18 {
  padding-top: 1.8rem !important;
}

.pt19 {
  padding-top: 1.9rem !important;
}

.pt20 {
  padding-top: 2rem !important;
}

.pt21 {
  padding-top: 2.1rem !important;
}

.pt22 {
  padding-top: 2.2rem !important;
}

.pt23 {
  padding-top: 2.3rem !important;
}

.pt24 {
  padding-top: 2.4rem !important;
}

.pt25 {
  padding-top: 2.5rem !important;
}

.pt26 {
  padding-top: 2.6rem !important;
}

.pt27 {
  padding-top: 2.7rem !important;
}

.pt27 {
  padding-top: 2.7rem !important;
}

.pt28 {
  padding-top: 2.8rem !important;
}

.pt29 {
  padding-top: 2.9rem !important;
}

.pt30 {
  padding-top: 3rem !important;
}

.pt31 {
  padding-top: 3.1rem !important;
}

.pt32 {
  padding-top: 3.2rem !important;
}

.pt33 {
  padding-top: 3.3rem !important;
}

.pt34 {
  padding-top: 3.4rem !important;
}

.pt35 {
  padding-top: 3.5rem !important;
}

.pt36 {
  padding-top: 3.6rem !important;
}

.pt37 {
  padding-top: 3.7rem !important;
}

.pt38 {
  padding-top: 3.8rem !important;
}

.pt39 {
  padding-top: 3.9rem !important;
}

.pt40 {
  padding-top: 4rem !important;
}

.pt41 {
  padding-top: 4.1rem !important;
}

.pt42 {
  padding-top: 4.2rem !important;
}

.pt43 {
  padding-top: 4.3rem !important;
}

.pt44 {
  padding-top: 4.4rem !important;
}

.pt45 {
  padding-top: 4.5rem !important;
}

.pt46 {
  padding-top: 4.6rem !important;
}

.pt47 {
  padding-top: 4.7rem !important;
}

.pt48 {
  padding-top: 4.8rem !important;
}

.pt49 {
  padding-top: 4.9rem !important;
}

.pt50 {
  padding-top: 5rem !important;
}

.pb1 {
  padding-bottom: 0.1rem !important;
}

.pb2 {
  padding-bottom: 0.2rem !important;
}

.pb3 {
  padding-bottom: 0.3rem !important;
}

.pb4 {
  padding-bottom: 0.4rem !important;
}

.pb5 {
  padding-bottom: 0.5rem !important;
}

.pb6 {
  padding-bottom: 0.6rem !important;
}

.pb7 {
  padding-bottom: 0.7rem !important;
}

.pb8 {
  padding-bottom: 0.8rem !important;
}

.pb9 {
  padding-bottom: 0.9rem !important;
}

.pb10 {
  padding-bottom: 1rem !important;
}

.pb11 {
  padding-bottom: 1.1rem !important;
}

.pb12 {
  padding-bottom: 1.2rem !important;
}

.pb13 {
  padding-bottom: 1.3rem !important;
}

.pb14 {
  padding-bottom: 1.4rem !important;
}

.pb15 {
  padding-bottom: 1.5rem !important;
}

.pb16 {
  padding-bottom: 1.6rem !important;
}

.pb17 {
  padding-bottom: 1.7rem !important;
}

.pb18 {
  padding-bottom: 1.8rem !important;
}

.pb19 {
  padding-bottom: 1.9rem !important;
}

.pb20 {
  padding-bottom: 2rem !important;
}

.pb21 {
  padding-bottom: 2.1rem !important;
}

.pb22 {
  padding-bottom: 2.2rem !important;
}

.pb23 {
  padding-bottom: 2.3rem !important;
}

.pb24 {
  padding-bottom: 2.4rem !important;
}

.pb25 {
  padding-bottom: 2.5rem !important;
}

.pb26 {
  padding-bottom: 2.6rem !important;
}

.pb27 {
  padding-bottom: 2.7rem !important;
}

.pb27 {
  padding-bottom: 2.7rem !important;
}

.pb28 {
  padding-bottom: 2.8rem !important;
}

.pb29 {
  padding-bottom: 2.9rem !important;
}

.pb30 {
  padding-bottom: 3rem !important;
}

.pb31 {
  padding-bottom: 3.1rem !important;
}

.pb32 {
  padding-bottom: 3.2rem !important;
}

.pb33 {
  padding-bottom: 3.3rem !important;
}

.pb34 {
  padding-bottom: 3.4rem !important;
}

.pb35 {
  padding-bottom: 3.5rem !important;
}

.pb36 {
  padding-bottom: 3.6rem !important;
}

.pb37 {
  padding-bottom: 3.7rem !important;
}

.pb38 {
  padding-bottom: 3.8rem !important;
}

.pb39 {
  padding-bottom: 3.9rem !important;
}

.pb40 {
  padding-bottom: 4rem !important;
}

.pb41 {
  padding-bottom: 4.1rem !important;
}

.pb42 {
  padding-bottom: 4.2rem !important;
}

.pb43 {
  padding-bottom: 4.3rem !important;
}

.pb44 {
  padding-bottom: 4.4rem !important;
}

.pb45 {
  padding-bottom: 4.5rem !important;
}

.pb46 {
  padding-bottom: 4.6rem !important;
}

.pb47 {
  padding-bottom: 4.7rem !important;
}

.pb48 {
  padding-bottom: 4.8rem !important;
}

.pb49 {
  padding-bottom: 4.9rem !important;
}

.pb50 {
  padding-bottom: 5rem !important;
}

.pr1 {
  padding-right: 0.1rem !important;
}

.pr2 {
  padding-right: 0.2rem !important;
}

.pr3 {
  padding-right: 0.3rem !important;
}

.pr4 {
  padding-right: 0.4rem !important;
}

.pr5 {
  padding-right: 0.5rem !important;
}

.pr6 {
  padding-right: 0.6rem !important;
}

.pr7 {
  padding-right: 0.7rem !important;
}

.pr8 {
  padding-right: 0.8rem !important;
}

.pr9 {
  padding-right: 0.9rem !important;
}

.pr10 {
  padding-right: 1rem !important;
}

.pr11 {
  padding-right: 1.1rem !important;
}

.pr12 {
  padding-right: 1.2rem !important;
}

.pr13 {
  padding-right: 1.3rem !important;
}

.pr14 {
  padding-right: 1.4rem !important;
}

.pr15 {
  padding-right: 1.5rem !important;
}

.pr16 {
  padding-right: 1.6rem !important;
}

.pr17 {
  padding-right: 1.7rem !important;
}

.pr18 {
  padding-right: 1.8rem !important;
}

.pr19 {
  padding-right: 1.9rem !important;
}

.pr20 {
  padding-right: 2rem !important;
}

.pr21 {
  padding-right: 2.1rem !important;
}

.pr22 {
  padding-right: 2.2rem !important;
}

.pr23 {
  padding-right: 2.3rem !important;
}

.pr24 {
  padding-right: 2.4rem !important;
}

.pr25 {
  padding-right: 2.5rem !important;
}

.pr26 {
  padding-right: 2.6rem !important;
}

.pr27 {
  padding-right: 2.7rem !important;
}

.pr27 {
  padding-right: 2.7rem !important;
}

.pr28 {
  padding-right: 2.8rem !important;
}

.pr29 {
  padding-right: 2.9rem !important;
}

.pr30 {
  padding-right: 3rem !important;
}

.pr31 {
  padding-right: 3.1rem !important;
}

.pr32 {
  padding-right: 3.2rem !important;
}

.pr33 {
  padding-right: 3.3rem !important;
}

.pr34 {
  padding-right: 3.4rem !important;
}

.pr35 {
  padding-right: 3.5rem !important;
}

.pr36 {
  padding-right: 3.6rem !important;
}

.pr37 {
  padding-right: 3.7rem !important;
}

.pr38 {
  padding-right: 3.8rem !important;
}

.pr39 {
  padding-right: 3.9rem !important;
}

.pr40 {
  padding-right: 4rem !important;
}

.pr41 {
  padding-right: 4.1rem !important;
}

.pr42 {
  padding-right: 4.2rem !important;
}

.pr43 {
  padding-right: 4.3rem !important;
}

.pr44 {
  padding-right: 4.4rem !important;
}

.pr45 {
  padding-right: 4.5rem !important;
}

.pr46 {
  padding-right: 4.6rem !important;
}

.pr47 {
  padding-right: 4.7rem !important;
}

.pr48 {
  padding-right: 4.8rem !important;
}

.pr49 {
  padding-right: 4.9rem !important;
}

.pr50 {
  padding-right: 5rem !important;
}

.pl1 {
  padding-left: 0.1rem !important;
}

.pl2 {
  padding-left: 0.2rem !important;
}

.pl3 {
  padding-left: 0.3rem !important;
}

.pl4 {
  padding-left: 0.4rem !important;
}

.pl5 {
  padding-left: 0.5rem !important;
}

.pl6 {
  padding-left: 0.6rem !important;
}

.pl7 {
  padding-left: 0.7rem !important;
}

.pl8 {
  padding-left: 0.8rem !important;
}

.pl9 {
  padding-left: 0.9rem !important;
}

.pl10 {
  padding-left: 1rem !important;
}

.pl11 {
  padding-left: 1.1rem !important;
}

.pl12 {
  padding-left: 1.2rem !important;
}

.pl13 {
  padding-left: 1.3rem !important;
}

.pl14 {
  padding-left: 1.4rem !important;
}

.pl15 {
  padding-left: 1.5rem !important;
}

.pl16 {
  padding-left: 1.6rem !important;
}

.pl17 {
  padding-left: 1.7rem !important;
}

.pl18 {
  padding-left: 1.8rem !important;
}

.pl19 {
  padding-left: 1.9rem !important;
}

.pl20 {
  padding-left: 2rem !important;
}

.pl21 {
  padding-left: 2.1rem !important;
}

.pl22 {
  padding-left: 2.2rem !important;
}

.pl23 {
  padding-left: 2.3rem !important;
}

.pl24 {
  padding-left: 2.4rem !important;
}

.pl25 {
  padding-left: 2.5rem !important;
}

.pl26 {
  padding-left: 2.6rem !important;
}

.pl27 {
  padding-left: 2.7rem !important;
}

.pl27 {
  padding-left: 2.7rem !important;
}

.pl28 {
  padding-left: 2.8rem !important;
}

.pl29 {
  padding-left: 2.9rem !important;
}

.pl30 {
  padding-left: 3rem !important;
}

.pl31 {
  padding-left: 3.1rem !important;
}

.pl32 {
  padding-left: 3.2rem !important;
}

.pl33 {
  padding-left: 3.3rem !important;
}

.pl34 {
  padding-left: 3.4rem !important;
}

.pl35 {
  padding-left: 3.5rem !important;
}

.pl36 {
  padding-left: 3.6rem !important;
}

.pl37 {
  padding-left: 3.7rem !important;
}

.pl38 {
  padding-left: 3.8rem !important;
}

.pl39 {
  padding-left: 3.9rem !important;
}

.pl40 {
  padding-left: 4rem !important;
}

.pl41 {
  padding-left: 4.1rem !important;
}

.pl42 {
  padding-left: 4.2rem !important;
}

.pl43 {
  padding-left: 4.3rem !important;
}

.pl44 {
  padding-left: 4.4rem !important;
}

.pl45 {
  padding-left: 4.5rem !important;
}

.pl46 {
  padding-left: 4.6rem !important;
}

.pl47 {
  padding-left: 4.7rem !important;
}

.pl48 {
  padding-left: 4.8rem !important;
}

.pl49 {
  padding-left: 4.9rem !important;
}

.pl50 {
  padding-left: 5rem !important;
}

/* margin helper */
.m0 {
  margin: 0 !important;
}

.mt1 {
  margin-top: 0.1rem !important;
}

.mt2 {
  margin-top: 0.2rem !important;
}

.mt3 {
  margin-top: 0.3rem !important;
}

.mt4 {
  margin-top: 0.4rem !important;
}

.mt5 {
  margin-top: 0.5rem !important;
}

.mt6 {
  margin-top: 0.6rem !important;
}

.mt7 {
  margin-top: 0.7rem !important;
}

.mt8 {
  margin-top: 0.8rem !important;
}

.mt9 {
  margin-top: 0.9rem !important;
}

.mt10 {
  margin-top: 1rem !important;
}

.mt11 {
  margin-top: 1.1rem !important;
}

.mt12 {
  margin-top: 1.2rem !important;
}

.mt13 {
  margin-top: 1.3rem !important;
}

.mt14 {
  margin-top: 1.4rem !important;
}

.mt15 {
  margin-top: 1.5rem !important;
}

.mt16 {
  margin-top: 1.6rem !important;
}

.mt17 {
  margin-top: 1.7rem !important;
}

.mt18 {
  margin-top: 1.8rem !important;
}

.mt19 {
  margin-top: 1.9rem !important;
}

.mt20 {
  margin-top: 2rem !important;
}

.mt21 {
  margin-top: 2.1rem !important;
}

.mt22 {
  margin-top: 2.2rem !important;
}

.mt23 {
  margin-top: 2.3rem !important;
}

.mt24 {
  margin-top: 2.4rem !important;
}

.mt25 {
  margin-top: 2.5rem !important;
}

.mt26 {
  margin-top: 2.6rem !important;
}

.mt27 {
  margin-top: 2.7rem !important;
}

.mt27 {
  margin-top: 2.7rem !important;
}

.mt28 {
  margin-top: 2.8rem !important;
}

.mt29 {
  margin-top: 2.9rem !important;
}

.mt30 {
  margin-top: 3rem !important;
}

.mt31 {
  margin-top: 3.1rem !important;
}

.mt32 {
  margin-top: 3.2rem !important;
}

.mt33 {
  margin-top: 3.3rem !important;
}

.mt34 {
  margin-top: 3.4rem !important;
}

.mt35 {
  margin-top: 3.5rem !important;
}

.mt36 {
  margin-top: 3.6rem !important;
}

.mt37 {
  margin-top: 3.7rem !important;
}

.mt38 {
  margin-top: 3.8rem !important;
}

.mt39 {
  margin-top: 3.9rem !important;
}

.mt40 {
  margin-top: 4rem !important;
}

.mt41 {
  margin-top: 4.1rem !important;
}

.mt42 {
  margin-top: 4.2rem !important;
}

.mt43 {
  margin-top: 4.3rem !important;
}

.mt44 {
  margin-top: 4.4rem !important;
}

.mt45 {
  margin-top: 4.5rem !important;
}

.mt46 {
  margin-top: 4.6rem !important;
}

.mt47 {
  margin-top: 4.7rem !important;
}

.mt48 {
  margin-top: 4.8rem !important;
}

.mt49 {
  margin-top: 4.9rem !important;
}

.mt50 {
  margin-top: 5rem !important;
}

.mb1 {
  margin-bottom: 0.1rem !important;
}

.mb2 {
  margin-bottom: 0.2rem !important;
}

.mb3 {
  margin-bottom: 0.3rem !important;
}

.mb4 {
  margin-bottom: 0.4rem !important;
}

.mb5 {
  margin-bottom: 0.5rem !important;
}

.mb6 {
  margin-bottom: 0.6rem !important;
}

.mb7 {
  margin-bottom: 0.7rem !important;
}

.mb8 {
  margin-bottom: 0.8rem !important;
}

.mb9 {
  margin-bottom: 0.9rem !important;
}

.mb10 {
  margin-bottom: 1rem !important;
}

.mb11 {
  margin-bottom: 1.1rem !important;
}

.mb12 {
  margin-bottom: 1.2rem !important;
}

.mb13 {
  margin-bottom: 1.3rem !important;
}

.mb14 {
  margin-bottom: 1.4rem !important;
}

.mb15 {
  margin-bottom: 1.5rem !important;
}

.mb16 {
  margin-bottom: 1.6rem !important;
}

.mb17 {
  margin-bottom: 1.7rem !important;
}

.mb18 {
  margin-bottom: 1.8rem !important;
}

.mb19 {
  margin-bottom: 1.9rem !important;
}

.mb20 {
  margin-bottom: 2rem !important;
}

.mb21 {
  margin-bottom: 2.1rem !important;
}

.mb22 {
  margin-bottom: 2.2rem !important;
}

.mb23 {
  margin-bottom: 2.3rem !important;
}

.mb24 {
  margin-bottom: 2.4rem !important;
}

.mb25 {
  margin-bottom: 2.5rem !important;
}

.mb26 {
  margin-bottom: 2.6rem !important;
}

.mb27 {
  margin-bottom: 2.7rem !important;
}

.mb27 {
  margin-bottom: 2.7rem !important;
}

.mb28 {
  margin-bottom: 2.8rem !important;
}

.mb29 {
  margin-bottom: 2.9rem !important;
}

.mb30 {
  margin-bottom: 3rem !important;
}

.mb31 {
  margin-bottom: 3.1rem !important;
}

.mb32 {
  margin-bottom: 3.2rem !important;
}

.mb33 {
  margin-bottom: 3.3rem !important;
}

.mb34 {
  margin-bottom: 3.4rem !important;
}

.mb35 {
  margin-bottom: 3.5rem !important;
}

.mb36 {
  margin-bottom: 3.6rem !important;
}

.mb37 {
  margin-bottom: 3.7rem !important;
}

.mb38 {
  margin-bottom: 3.8rem !important;
}

.mb39 {
  margin-bottom: 3.9rem !important;
}

.mb40 {
  margin-bottom: 4rem !important;
}

.mb41 {
  margin-bottom: 4.1rem !important;
}

.mb42 {
  margin-bottom: 4.2rem !important;
}

.mb43 {
  margin-bottom: 4.3rem !important;
}

.mb44 {
  margin-bottom: 4.4rem !important;
}

.mb45 {
  margin-bottom: 4.5rem !important;
}

.mb46 {
  margin-bottom: 4.6rem !important;
}

.mb47 {
  margin-bottom: 4.7rem !important;
}

.mb48 {
  margin-bottom: 4.8rem !important;
}

.mb49 {
  margin-bottom: 4.9rem !important;
}

.mb50 {
  margin-bottom: 5rem !important;
}

.mr1 {
  margin-right: 0.1rem !important;
}

.mr2 {
  margin-right: 0.2rem !important;
}

.mr3 {
  margin-right: 0.3rem !important;
}

.mr4 {
  margin-right: 0.4rem !important;
}

.mr5 {
  margin-right: 0.5rem !important;
}

.mr6 {
  margin-right: 0.6rem !important;
}

.mr7 {
  margin-right: 0.7rem !important;
}

.mr8 {
  margin-right: 0.8rem !important;
}

.mr9 {
  margin-right: 0.9rem !important;
}

.mr10 {
  margin-right: 1rem !important;
}

.mr11 {
  margin-right: 1.1rem !important;
}

.mr12 {
  margin-right: 1.2rem !important;
}

.mr13 {
  margin-right: 1.3rem !important;
}

.mr14 {
  margin-right: 1.4rem !important;
}

.mr15 {
  margin-right: 1.5rem !important;
}

.mr16 {
  margin-right: 1.6rem !important;
}

.mr17 {
  margin-right: 1.7rem !important;
}

.mr18 {
  margin-right: 1.8rem !important;
}

.mr19 {
  margin-right: 1.9rem !important;
}

.mr20 {
  margin-right: 2rem !important;
}

.mr21 {
  margin-right: 2.1rem !important;
}

.mr22 {
  margin-right: 2.2rem !important;
}

.mr23 {
  margin-right: 2.3rem !important;
}

.mr24 {
  margin-right: 2.4rem !important;
}

.mr25 {
  margin-right: 2.5rem !important;
}

.mr26 {
  margin-right: 2.6rem !important;
}

.mr27 {
  margin-right: 2.7rem !important;
}

.mr27 {
  margin-right: 2.7rem !important;
}

.mr28 {
  margin-right: 2.8rem !important;
}

.mr29 {
  margin-right: 2.9rem !important;
}

.mr30 {
  margin-right: 3rem !important;
}

.mr31 {
  margin-right: 3.1rem !important;
}

.mr32 {
  margin-right: 3.2rem !important;
}

.mr33 {
  margin-right: 3.3rem !important;
}

.mr34 {
  margin-right: 3.4rem !important;
}

.mr35 {
  margin-right: 3.5rem !important;
}

.mr36 {
  margin-right: 3.6rem !important;
}

.mr37 {
  margin-right: 3.7rem !important;
}

.mr38 {
  margin-right: 3.8rem !important;
}

.mr39 {
  margin-right: 3.9rem !important;
}

.mr40 {
  margin-right: 4rem !important;
}

.mr41 {
  margin-right: 4.1rem !important;
}

.mr42 {
  margin-right: 4.2rem !important;
}

.mr43 {
  margin-right: 4.3rem !important;
}

.mr44 {
  margin-right: 4.4rem !important;
}

.mr45 {
  margin-right: 4.5rem !important;
}

.mr46 {
  margin-right: 4.6rem !important;
}

.mr47 {
  margin-right: 4.7rem !important;
}

.mr48 {
  margin-right: 4.8rem !important;
}

.mr49 {
  margin-right: 4.9rem !important;
}

.mr50 {
  margin-right: 5rem !important;
}

.ml1 {
  margin-left: 0.1rem !important;
}

.ml2 {
  margin-left: 0.2rem !important;
}

.ml3 {
  margin-left: 0.3rem !important;
}

.ml4 {
  margin-left: 0.4rem !important;
}

.ml5 {
  margin-left: 0.5rem !important;
}

.ml6 {
  margin-left: 0.6rem !important;
}

.ml7 {
  margin-left: 0.7rem !important;
}

.ml8 {
  margin-left: 0.8rem !important;
}

.ml9 {
  margin-left: 0.9rem !important;
}

.ml10 {
  margin-left: 1rem !important;
}

.ml11 {
  margin-left: 1.1rem !important;
}

.ml12 {
  margin-left: 1.2rem !important;
}

.ml13 {
  margin-left: 1.3rem !important;
}

.ml14 {
  margin-left: 1.4rem !important;
}

.ml15 {
  margin-left: 1.5rem !important;
}

.ml16 {
  margin-left: 1.6rem !important;
}

.ml17 {
  margin-left: 1.7rem !important;
}

.ml18 {
  margin-left: 1.8rem !important;
}

.ml19 {
  margin-left: 1.9rem !important;
}

.ml20 {
  margin-left: 2rem !important;
}

.ml21 {
  margin-left: 2.1rem !important;
}

.ml22 {
  margin-left: 2.2rem !important;
}

.ml23 {
  margin-left: 2.3rem !important;
}

.ml24 {
  margin-left: 2.4rem !important;
}

.ml25 {
  margin-left: 2.5rem !important;
}

.ml26 {
  margin-left: 2.6rem !important;
}

.ml27 {
  margin-left: 2.7rem !important;
}

.ml27 {
  margin-left: 2.7rem !important;
}

.ml28 {
  margin-left: 2.8rem !important;
}

.ml29 {
  margin-left: 2.9rem !important;
}

.ml30 {
  margin-left: 3rem !important;
}

.ml31 {
  margin-left: 3.1rem !important;
}

.ml32 {
  margin-left: 3.2rem !important;
}

.ml33 {
  margin-left: 3.3rem !important;
}

.ml34 {
  margin-left: 3.4rem !important;
}

.ml35 {
  margin-left: 3.5rem !important;
}

.ml36 {
  margin-left: 3.6rem !important;
}

.ml37 {
  margin-left: 3.7rem !important;
}

.ml38 {
  margin-left: 3.8rem !important;
}

.ml39 {
  margin-left: 3.9rem !important;
}

.ml40 {
  margin-left: 4rem !important;
}

.ml41 {
  margin-left: 4.1rem !important;
}

.ml42 {
  margin-left: 4.2rem !important;
}

.ml43 {
  margin-left: 4.3rem !important;
}

.ml44 {
  margin-left: 4.4rem !important;
}

.ml45 {
  margin-left: 4.5rem !important;
}

.ml46 {
  margin-left: 4.6rem !important;
}

.ml47 {
  margin-left: 4.7rem !important;
}

.ml48 {
  margin-left: 4.8rem !important;
}

.ml49 {
  margin-left: 4.9rem !important;
}

.ml50 {
  margin-left: 5rem !important;
}

@media (max-width: 1439px) {
  :root {
    --gnb-height: 6.9rem;
  }

  html,
  body {
    font-size: 9px;
  }

  .txt-h3 {
    font-size: 3rem;
  }

  .txt-h4 {
    font-size: 2rem;
  }

  /* .tbl-wrap:has(.tbl-col) {
    width: 100%;
    overflow-x: scroll;
  }

  .tbl-wrap:has(.tbl-col) table {
    width: 144rem;
  } */



  .tbl-row,
  .tbl-row>tbody,
  .tbl-row>tbody>tr,
  .tbl-row>tbody>tr>th,
  .tbl-row>tbody>tr>td {
    display: block;
    width: 100%;
    text-align: left;
    height: auto;
  }

  .tbl-wrap table.tbl-row tr {
    margin-bottom: 1rem;
    border: none;
  }

  .tbl-wrap table.tbl-row {
    border-bottom: 1px solid #333;
  }

  .tbl-row>tbody>tr>th {
    background-color: transparent;
    font-weight: bold;
    text-align: left;
    border-right: none;
  }

  .tbl-row td {
    margin-bottom: 1rem;
    /* border-bottom: 1px solid #ddd; */
    padding: 1rem;
  }

  .tbl-row th {
    padding: 1rem;
  }

  .tbl-row th .td-btn {
    flex-direction: row;
    justify-content: flex-start;
  }

  .pagination-wrap .pagination ul li {
    margin: 0.5rem;
  }

  [class^="btn-"] {
    zoom: 0.9;
  }

  .pagination-wrap {
    margin-top: 3em;
  }

  .tbl-wrap {
    width: 100%;
    overflow: hidden;
  }

  .tbl-wrap table {
    width: 100%;
  }

  .tbl-wrap:has(.tbl-col) table colgroup {
    display: none;
  }

  .tbl-wrap:has(.tbl-col) table thead {
    display: none;
  }

  .tbl-wrap:has(.tbl-col) table tbody {
    display: block;
  }

  .tbl-wrap:has(.tbl-col) table .m-none {
    display: none;
  }

  .td-attach {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .tbl-wrap:has(.tbl-col) table tr {
    display: block;
    position: relative;
    /* padding: 15px 45px 15px 15px; */
    width: 100%;
  }

  .tbl-wrap:has(.tbl-col) table tr tr {
    border-bottom: 1px solid #ddd;
  }

  .tbl-wrap:has(.tbl-col) table td {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 !important;
    height: auto;
    border-bottom: 0;
    text-align: left !important;

  }

  .tbl-wrap:has(.tbl-col) table td button {
    margin: 0;
  }

  .tbl-wrap:has(.tbl-col) table td .cell-header {
    display: inline-block;
    padding: 1rem 0;
    width: 8rem;
    background-color: var(--gray6);
    text-align: center;
    margin-right: 1rem;
    color: var(--gray1);
    flex-shrink: 0;
  }
}

.tbl-row.sm th,
.tbl-row.sm td {
  font-size: 1.3rem;
  height: 4rem;
}

@media (max-width: 768px) {
  .tbl-row td .selectbox-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
  }

  .tbl-row td .flex-row:has(.selectbox-wrap) {
    flex-direction: column;
    align-items: flex-start;
  }

  .tbl-row td .flex-row:has(.selectbox-wrap) select {
    width: 100%;
  }

  .input-wrap:has(button) input[type="text"] {
    width: calc(100% - 6.5rem);
  }

  .file-wrap .file-name {
    width: calc(100% - 8rem);
    min-width: auto;
  }

  .file-wrap .file-button {
    font-size: 1.4rem;
  }
}

@media (max-width: 768px) {

  html,
  body {
    font-size: 10px;
  }

  .txt-h5 {
    font-size: 1.8rem;
  }

  .txt-h4 {
    font-size: 1.6rem;
  }
}