/* font */
@font-face {
    font-family: 'Pre';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
  }
  @font-face {
    font-family: 'Pre';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
  }
  @font-face {
    font-family: 'Pre';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: 'Pre';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'Pre';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: 'Pre';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
  }
  @font-face {
    font-family: 'Pre';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: 'Pre';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
  }
  @font-face {
    font-family: 'Pre';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
  }
  /* //font */

  :root {
    --pr0 : #0075FF;
    --pr1 : #8fa6ef;
    --pr2 : #ECF5FF;
    --red : #ff4343;
    --pink : #FFA2A2;
    --pink2 : #FFE1E1;
    --red : #FF4343;
    --black : #000;
    --black_26 : #262626;
    --gray_94 : #949494;
    --gray_e6 : #e6e6e6;
    --gray_5d : #5d5d5d;
    --gray_58 : #585858;
    --gray_b2 : #b2b2b2;
    --gray_b3 : #b4b4b4;
    --gray_e1 : #e1e1e1;
    --wt : #fff;
    --wt_f9 : #f9faff;
    --wt_fc : #fcfcfc;
    --tp : transparent;
  }

  /* bg */
  .pr0 {background: var(--pr0) !important;}
  .pr1 {background: var(--pr1) !important;}
  .pr2 {background: var(--pr2) !important;}
  .red {background: var(--red) !important;}
  .black {background: var(--black) !important;}
  .black_26 {background: var(--black_26) !important;}
  .gray_94 {background: var(--gray_94) !important;}
  .gray_e6 {background: var(--gray_e6) !important;}
  .gray_5d {background: var(--gray_5d) !important;}
  .gray_b2 {background: var(--gray_b2) !important;}
  .gray_b3 {background: var(--gray_b3) !important;}
  .gray_e1 {background: var(--gray_e1) !important;}
  .wt {background: var(--wt) !important;}
  .wt_f9 {background: var(--wt_f9) !important;}
  .pink {background: var(--pink) !important;}
  .pink2 {background: var(--pink2) !important;}
  .red {background: var(--red) !important;}
  .tp {background: transparent !important;}
  /* //bg */

  /* color */
  .pr0_c {color: var(--pr0) !important;}
  .pr1_c {color: var(--pr1) !important;}
  .pr2_c {color: var(--pr2) !important;}
  .red_c {color: var(--red) !important;}
  .black_c {color: var(--black) !important;}
  .black_26_c {color: var(--black_26) !important;}
  .gray_94_c {color: var(--gray_94) !important;}
  .gray_e6_c {color: var(--gray_e6) !important;}
  .gray_5d_c {color: var(--gray_5d) !important;}
  .gray_b2_c {color: var(--gray_b2) !important;}
  .gray_b3_c {color: var(--gray_b3) !important;}
  .gray_e1_c {color: var(--gray_e1) !important;}
  .wt_c {color: var(--wt) !important;}
  .wt_f9_c {color: var(--wt_f9) !important;}
  .pink_c {color: var(--pink) !important;}
  .pink2_c {color: var(--pink2) !important;}
  .red_c {color: var(--red) !important;}
  /* //color */

  input,textarea,select,button,a,td,th {font-family: 'Pre';}

  body {font-family: 'Pre'; background: #F1F6FB;}
  #wrap {display: flex; align-items: flex-start;}

  /* input */
  input {font-size: 16px; font-weight: 300; line-height: 1.19; color: var(--black_26);}
  input::placeholder {color: var(--gray_b3);}

  td {vertical-align: middle !important;}
  .table-box table td {word-break: keep-all;}

  /* pager */
  .pager {width: 100%; height: auto; margin-top: 30px;}
  .pager ul {display: flex; align-items: center; justify-content: center;}
  .pager ul li.all_prev {padding-right: 4px;}
  .pager ul li.all_next {padding-left: 4px;}
  .pager ul li.prev {padding-right: 23px;}
  .pager ul li.next {padding-left: 23px;}
  .pager ul li.arrow img {width: 25px; height: auto;}
  .pager ul li.num {padding: 0 2px; box-sizing: border-box;}
  .pager ul li a {display: flex; align-items: center; justify-content: center; width: 25px; height: auto; aspect-ratio: 5/5; border-radius: 2px; background: var(--wt_f9); font-size: 13px; font-weight: 300; line-height: 1; color: var(--gray_94);}
  .pager ul li.active a {background: var(--pr0); color: var(--wt);}
  .pager ul li a img {}

  /* add_btn */
  .add_btn {display: flex; align-items: center; justify-content: center; width: 140px; height: 50px; margin-top: 20px; border-radius: 10px; background: var(--pr0); font-size: 16px; font-weight: 400; line-height: 1.19; color: var(--wt);}

  /* input-box */
  .input-box {display: flex; flex-flow: column; gap: 10px; margin-bottom: 30px;}
  .form-box.searchform .input-box {margin-bottom: 10px;}
  .input-box .d-flex {display: flex; align-items: center; gap: 10px;}
  .input-box:last-of-type {margin-bottom: 0;}
  .input-box .tit {font-size: 18px; font-weight: 500; line-height: 1.17; color: var(--black);}
  .input-box .tit2 {margin-top: 30px;}
  .input-box input {width: 100%; height: 50px; padding: 0 19px; border-radius: 25px; background: var(--gray_e6); box-sizing: border-box; border: 1px solid var(--gray_e6); background: var(--wt_fc); font-size: 16px; font-weight: 300; line-height: 1.19; color: var(--black_26);}
  .input-box input::placeholder {color: var(--gray_b3);}

  .input-box select {width: 100%; height: 50px; padding: 0 19px; border-radius: 25px; background: var(--gray_e6); box-sizing: border-box; border: 1px solid var(--gray_e6); appearance: none; background: url(./../img/select_icon.png)no-repeat calc(100% - 10px) 50%; background-size: 30px; background-color: var(--wt_fc); font-size: 16px; font-weight: 300; line-height: 1.19; color: var(--black_26);}

  .input-box textarea {width: 100%; height: 150px; padding: 16px 19px; border-radius: 10px; background: var(--gray_e6); box-sizing: border-box; border: 1px solid var(--gray_e6); background: var(--wt_fc); font-size: 16px; font-weight: 300; line-height: 1.19; color: var(--black_26); resize: none;}
  .input-box textarea::placeholder {color: var(--gray_b3);}

  /* file */
  .file-box {position: relative; width: 100%; height: auto;}
  .file-box .file {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
  .file-box .download_btn {display: none; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 30px; height: auto; z-index: 2;}
  .file-box .download_btn.on {display: block;}

  /* file_btn */
  .file_btn {min-width: 140px; width: 140px; height: 50px; border-radius: 10px; background: var(--pr0); font-size: 16px; font-weight: 400; line-height: 1.19; color: var(--wt);}
  .file_btn:disabled {background: var(--gray_b3);}

  /* add_input */
  .add_input {position: relative;}
  .add_input .add_in_btn {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 30px; height: auto; z-index: 2;}

  /* form_btn */
  .form_btn {display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 20px;}
  .form_btn button {width: 140px; height: 50px; margin-top: 0; border-radius: 10px; border: 1px solid var(--pr0); box-sizing: border-box; font-size: 16px; font-weight: 400; line-height: 1.19;}
  .form_btn3 .excel_form_btn {margin-left: 10px;}
  .form_btn a {width: 140px; height: 50px; margin-top: 0; border-radius: 10px; border: 1px solid var(--pr0); box-sizing: border-box; font-size: 16px; font-weight: 400; line-height: 1.19;}
  .form_btn .link_btn2 {display: flex; align-items: center; justify-content: center; width: 140px; height: 50px; margin-left: 10px; margin-top: 0; border-radius: 10px; border: 1px solid var(--pr0); background: var(--pr0); box-sizing: border-box; font-size: 16px; font-weight: 400; line-height: 1.19; color: var(--wt);}
  .form_btn .list_btn {font-size: 16px; font-weight: 400; line-height: 1; color: var(--pr0);}

  /* tab_area */
  .tab-search_box {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
  .tab-search_box .search-box {margin-bottom: 0;}
  .tab_area {display: flex; align-items: center; gap: 10px;}
  .tab_area input[type="checkbox"] {display: none;}
  .tab_area label {display: flex; align-items: center; justify-content: space-between; width: 140px; height: 50px; border-radius: 25px; padding: 16px 15px 15px 19px; box-sizing: border-box; background: var(--wt); border: 1px solid var(--gray_e6);}
  .tab_area label span {font-size: 16px; font-weight: 300; line-height: 1.19; color: var(--gray_b3);}
  .tab_area label:after {content: ''; display: block; width: 20px; height: auto; aspect-ratio: 5/5; background: url(./../img/ckd_off.png)no-repeat 50% 50%; background-size: cover;}
  .tab_area input[type="checkbox"]:checked + label {background: var(--pr2); color: var(--pr0); border-color: var(--pr0);}
  .tab_area input[type="checkbox"]:checked + label span {color: var(--pr0);}
  .tab_area input[type="checkbox"]:checked + label:after {content: ''; display: block; width: 20px; height: auto; aspect-ratio: 5/5; background: url(./../img/ckd_on.png)no-repeat 50% 50%; background-size: cover;}


  /* dim */
  .dim {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.41); z-index: 9;}

  /* popup */
  .popup {position: fixed; top: 0; left: 0; display: none; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow-x: hidden; overflow-y: auto; background: transparent; z-index: 11; opacity: 0;}
  .popup.open {display: flex; animation: popup 1s .2s linear alternate both;}
  .popup.off {animation: popup2 1s .2s linear alternate both; display: flex; }
  @keyframes popup {
    0% {top: 100px; opacity: 0;}
    100% {top: 0; opacity: 1;}
  }
  @keyframes popup2 {
    0% {top: 0; opacity: 1; display: flex; }
    100% {top: 100px; opacity: 0; display: none; }
  }
  .popup-m {max-width: 400px; width: 100%; max-height: 900px; height: calc(100vh - 18px); padding: 25px 20px; box-sizing: border-box; background: var(--wt); border-radius: 10px; border: 1px solid var(--gray_e6); background: var(--wt); overflow: auto; overflow-x: hidden;}
  .popup .popup-hd {display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px;}
  .popup .popup-hd .tit {font-size: 24px; font-weight: 600; line-height: 1.21; color: var(--black);}
  .popup .popup-hd .close {width: 36px; height: auto;}
  .popup .popup-hd .close img {width: 100%; height: auto;}

  .popup .popup-bd {}
  .popup .popup-bd .input-box {margin-bottom: 10px;}

  .popup .popup-btn {display: flex; flex-flow: column; gap: 10px; margin-top: 20px;}
  .popup .popup-btn button {width: 100%; height: 50px; border-radius: 10px;}
  .popup .popup-btn .pr0_c {border: 1px solid var(--pr0);}
  .popup .popup-btn .red_c {border: 1px solid var(--red);}
  .popup .popup-btn .pr0 {border: 1px solid var(--pr0);}

  /* api_copy */
  .input-api {position: relative;}
  .api_copy {position: absolute; top: 50%; right: 160px; width: 30px; height: auto; z-index: 2;}

  /* memo */
  .input-box textarea.memo {height: 30px !important; padding: 5px 6px !important; box-sizing: border-box; white-space: nowrap; border-radius: 30px;}
  .input-box textarea.memo.on {height: auto !important; border-radius: 10px; white-space: unset;}
  .input-box textarea.memo::-webkit-scrollbar,
  .input-box textarea.memo::-webkit-scrollbar-thumb,
  .input-box textarea.memo::-webkit-scrollbar-track {display:none;}
  .mgt_01 {display: none !important;}
  .mgt_01.on {display: block !important;}
  .px_box {padding: 13px 5px 10px !important; box-sizing: border-box;}