@charset "UTF-8";

:root {
  /* 폰트 스타일 */
  --font-st1: "Paperlogy";
  --font-st2: "Pretendard";

  /* 메인 컬러 */
  --main-color: #c41816;
  --sub-01-color: #efefef;
  --sub-02-color: #ddd;

  /*   컬러 팔레트*/
  --white: #fff;
  --yellowLight: #ffeb78;
  --yellow: #f9ad0a;
  --yellowDark: #ffbe00;
  --orangeLight: #ffe8cc;
  --orange: #ff7d1d;
  --orangeDark: #d94800;
  --redLight: #ff564a;
  --red: #c41816;
  --redDark: #a70c00;
  --greenLight: #d3f9d8;
  --green: #0e7e41;
  --greenDark: #074f1a;
  --blueLight: #c2effb;
  --blue: #154a8f;
  --navyLight: #243595;
  --navy: #252f68;
  --navyDark: #131a43;
  --purpleLight: #ba81ed;
  --purple: #8327d5;
  --purpleDark: #500e8b;
  --grayLight: #e7e7e7;
  --gray: #989898;
  --grayDark: #333;
  --black: #000;
  --pink: #ffd8df;

  /* 테이블 색상 */
  --table1-th-bg: #eff5fd;
  --table1-th-border: #d7dfe9;
  --table1-td-bg: #fff;
  --table1-td-border: #e7e7e7;
  --table1-tf-th-bg: #d2dae5;
  --table1-tf-th-border: #c0cad7;
  --table1-tf-td-bg: #dde3eb;
  --table1-tf-td-border: #cbd3dd;
  --table2-th-bg: #f8f8f8;
  --table2-th-border: #e6e6e6;
  --table2-td-bg: #fff;
  --table2-td-border: #ddd;
  --table2-tf-th-bg: #e5e5e5;
  --table2-tf-th-border: #e5e5e5;
  --table2-tf-td-bg: #efefef;
  --table2-tf-td-border: #e4e4e4;
  --table3-th-bg: #fff;
  --table3-th-border: #d7dfe9;
  --table3-tb-th-bg: #f5f5f5;
  --table3-td-bg: #fff;
  --table3-td-border: #e7e7e7;
  --table3-tf-th-bg: #ebebeb;
  --table3-tf-th-border: #f5f5f5;
  --table3-tf-td-bg: #f5f5f5;
  --table3-tf-td-border: #e4e4e4;
  --table4-th-bg: #f4f9fa;
  --table4-th-border1: #2e8f97;
  --table4-th-border2: #dfeeef;
  --table4-td-bg: #fff;
  --table4-td-border: #e9e7e7;
  --table5-th-bg: #f4f8fa;
  --table5-th-border1: #dfeeef;
  --table5-th-border2: #e9e7e7;
  --table5-td-bg: #fff;
  --table5-td-border: #e9e7e7;

  /* 라디오 */
  --radio-color: #c41816;

  /* 계명문화대학교 일자리플러스센터 Color */
  --primary-solid-bg: #c41816;
  --primary-solid-text: #fff;
  --primary-soft-bg: #fcf4f4;
  --primary-soft-border: rgba(196, 24, 22, 0.5);
  --primary-soft-text: #c41816;
  --disable-bg: #efefef;
  --disable-text: #555;
  --disable-border: #ccc;
  --disable-dark-bg: #888;
  --disable-dark-text: #fff;

  --delete: #ff5962;
  --new: #0094ff;
  --limeGreen: #00a550;

  --mypage-blueLight-bg: #e7f5ff;
  --mypage-blueLight-text: #1d79c7;
  --mypage-blue-bg: #d0ebff;
  --mypage-blue-text: #1864be;
  --mypage-pink-bg: #ffdeeb;
  --mypage-pink-text: #c2255c;
  --mypage-yellow-bg: #fff3bf;
  --mypage-yellow-text: #e96a1d;
}

/* === 기본 폰트 크기 === */
.font_ss {
  font-size: 0.625rem;
} /* 10px */
.font_s {
  font-size: 0.75rem;
} /* 12px */
.font_m {
  font-size: 1rem;
} /* 16px */
.font_l {
  font-size: 1.25rem;
} /* 20px */
.font_xl {
  font-size: 1.35rem;
}

/* === (모바일) === */
@media (max-width: 500px) {
  .font_ss {
    font-size: 0.55rem;
  } /* 8.8px */
  .font_s {
    font-size: 0.68rem;
  } /* 10.8px */
  .font_m {
    font-size: 0.95rem;
  } /* 14px */
  .font_l {
    font-size: 1.1rem;
  } /* 17.6px */
  .font_xl {
    font-size: 1.15rem;
  } /* 22px */
}

span.accent {
  color: var(--main-color);
}

/* data-tab */
/* .mypage_container [data-tab] {
  display: none;
}

.mypage_container [data-tab].active {
  display: block;
} */

/* 데이터 없을떄 - empty */
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  color: #555;
}

/* font */
body,
html,
a,
button,
table,
input,
select,
textarea {
  font-family: var(--font-st1), sans-serif;
  color: #000;
  font-size: 16.2px;
}
body {
  letter-spacing: -0.025em;
}

/* 폰트사이즈 반응형 */
/* @media screen and (max-width: 1600px) {
  html {
    font-size: 1rem;
  }
}
@media screen and (max-width: 900px) {
  html {
    font-size: 0.9rem;
  }
} */

/* display layout */
.wFix {
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
  position: relative;
}

.wFix2 {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
  position: relative;
}

.wFix3 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
  position: relative;
}

.wFix4 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
  position: relative;
}

/* 숨김 */
.ov_hidden {
  overflow: hidden;
} /* 영역을 제외한 나머지 숨김 */
.hidden {
  visibility: hidden;
} /* 공간은 그대로 */
.blind {
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: -9999em;
  left: -9999em;
  display: block;
  text-indent: -9999em;
  font-size: 0px;
  line-height: 0;
}

/* padding & margin */
.p0 {
  padding: 0 !important;
}
.pt1 {
  padding-top: 0.1em !important;
}
.pt2 {
  padding-top: 0.2em !important;
}
.pt3 {
  padding-top: 0.3em !important;
}
.pt4 {
  padding-top: 0.4em !important;
}
.pt5 {
  padding-top: 0.5em !important;
}
.pt6 {
  padding-top: 0.6em !important;
}
.pt7 {
  padding-top: 0.7em !important;
}
.pt8 {
  padding-top: 0.8em !important;
}
.pt9 {
  padding-top: 0.9em !important;
}
.pt10 {
  padding-top: 1em !important;
}
.pt11 {
  padding-top: 1.1em !important;
}
.pt12 {
  padding-top: 1.2em !important;
}
.pt13 {
  padding-top: 1.3em !important;
}
.pt14 {
  padding-top: 1.4em !important;
}
.pt15 {
  padding-top: 1.5em !important;
}
.pt20 {
  padding-top: 2em !important;
}
.pt21 {
  padding-top: 2.1em !important;
}
.pt22 {
  padding-top: 2.2em !important;
}
.pt23 {
  padding-top: 2.3em !important;
}
.pt24 {
  padding-top: 2.4em !important;
}
.pt25 {
  padding-top: 2.5em !important;
}
.pt30 {
  padding-top: 3em !important;
}
.pt31 {
  padding-top: 3.1em !important;
}
.pt32 {
  padding-top: 3.2em !important;
}
.pt33 {
  padding-top: 3.3em !important;
}
.pt34 {
  padding-top: 3.4em !important;
}
.pt35 {
  padding-top: 3.5em !important;
}
.pt40 {
  padding-top: 4em !important;
}
.pt41 {
  padding-top: 4.1em !important;
}
.pt42 {
  padding-top: 4.2em !important;
}
.pt43 {
  padding-top: 4.3em !important;
}
.pt44 {
  padding-top: 4.4em !important;
}
.pt45 {
  padding-top: 4.5em !important;
}
.pt46 {
  padding-top: 4.6em !important;
}
.pt47 {
  padding-top: 4.7em !important;
}
.pt48 {
  padding-top: 4.8em !important;
}
.pt49 {
  padding-top: 4.9em !important;
}
.pt50 {
  padding-top: 5em !important;
}

.pb1 {
  padding-bottom: 0.1em !important;
}
.pb2 {
  padding-bottom: 0.2em !important;
}
.pb3 {
  padding-bottom: 0.3em !important;
}
.pb4 {
  padding-bottom: 0.4em !important;
}
.pb5 {
  padding-bottom: 0.5em !important;
}
.pb6 {
  padding-bottom: 0.6em !important;
}
.pb7 {
  padding-bottom: 0.7em !important;
}
.pb8 {
  padding-bottom: 0.8em !important;
}
.pb9 {
  padding-bottom: 0.9em !important;
}
.pb10 {
  padding-bottom: 1em !important;
}
.pb11 {
  padding-bottom: 1.1em !important;
}
.pb12 {
  padding-bottom: 1.2em !important;
}
.pb13 {
  padding-bottom: 1.3em !important;
}
.pb14 {
  padding-bottom: 1.4em !important;
}
.pb15 {
  padding-bottom: 1.5em !important;
}
.pb20 {
  padding-bottom: 2em !important;
}
.pb21 {
  padding-bottom: 2.1em !important;
}
.pb22 {
  padding-bottom: 2.2em !important;
}
.pb23 {
  padding-bottom: 2.3em !important;
}
.pb24 {
  padding-bottom: 2.4em !important;
}
.pb25 {
  padding-bottom: 2.5em !important;
}
.pb30 {
  padding-bottom: 3em !important;
}
.pb31 {
  padding-bottom: 3.1em !important;
}
.pb32 {
  padding-bottom: 3.2em !important;
}
.pb33 {
  padding-bottom: 3.3em !important;
}
.pb34 {
  padding-bottom: 3.4em !important;
}
.pb35 {
  padding-bottom: 3.5em !important;
}
.pb40 {
  padding-bottom: 4em !important;
}
.pb41 {
  padding-bottom: 4.1em !important;
}
.pb42 {
  padding-bottom: 4.2em !important;
}
.pb43 {
  padding-bottom: 4.3em !important;
}
.pb44 {
  padding-bottom: 4.4em !important;
}
.pb45 {
  padding-bottom: 4.5em !important;
}
.pb46 {
  padding-bottom: 4.6em !important;
}
.pb47 {
  padding-bottom: 4.7em !important;
}
.pb48 {
  padding-bottom: 4.8em !important;
}
.pb49 {
  padding-bottom: 4.9em !important;
}
.pb50 {
  padding-bottom: 5em !important;
}

.pl1 {
  padding-left: 0.1em !important;
}
.pl2 {
  padding-left: 0.2em !important;
}
.pl3 {
  padding-left: 0.3em !important;
}
.pl4 {
  padding-left: 0.4em !important;
}
.pl5 {
  padding-left: 0.5em !important;
}
.pl6 {
  padding-left: 0.6em !important;
}
.pl7 {
  padding-left: 0.7em !important;
}
.pl8 {
  padding-left: 0.8em !important;
}
.pl9 {
  padding-left: 0.9em !important;
}
.pl10 {
  padding-left: 1em !important;
}
.pl11 {
  padding-left: 1.1em !important;
}
.pl12 {
  padding-left: 1.2em !important;
}
.pl13 {
  padding-left: 1.3em !important;
}
.pl14 {
  padding-left: 1.4em !important;
}
.pl15 {
  padding-left: 1.5em !important;
}
.pl20 {
  padding-left: 2em !important;
}
.pl21 {
  padding-left: 2.1em !important;
}
.pl22 {
  padding-left: 2.2em !important;
}
.pl23 {
  padding-left: 2.3em !important;
}
.pl24 {
  padding-left: 2.4em !important;
}
.pl25 {
  padding-left: 2.5em !important;
}
.pl30 {
  padding-left: 3em !important;
}
.pl31 {
  padding-left: 3.1em !important;
}
.pl32 {
  padding-left: 3.2em !important;
}
.pl33 {
  padding-left: 3.3em !important;
}
.pl34 {
  padding-left: 3.4em !important;
}
.pl35 {
  padding-left: 3.5em !important;
}
.pl40 {
  padding-left: 4em !important;
}
.pl41 {
  padding-left: 4.1em !important;
}
.pl42 {
  padding-left: 4.2em !important;
}
.pl43 {
  padding-left: 4.3em !important;
}
.pl44 {
  padding-left: 4.4em !important;
}
.pl45 {
  padding-left: 4.5em !important;
}
.pl46 {
  padding-left: 4.6em !important;
}
.pl47 {
  padding-left: 4.7em !important;
}
.pl48 {
  padding-left: 4.8em !important;
}
.pl49 {
  padding-left: 4.9em !important;
}
.pl50 {
  padding-left: 5em !important;
}

.pr1 {
  padding-right: 0.1em !important;
}
.pr2 {
  padding-right: 0.2em !important;
}
.pr3 {
  padding-right: 0.3em !important;
}
.pr4 {
  padding-right: 0.4em !important;
}
.pr5 {
  padding-right: 0.5em !important;
}
.pr6 {
  padding-right: 0.6em !important;
}
.pr7 {
  padding-right: 0.7em !important;
}
.pr8 {
  padding-right: 0.8em !important;
}
.pr9 {
  padding-right: 0.9em !important;
}
.pr10 {
  padding-right: 1em !important;
}
.pr11 {
  padding-right: 1.1em !important;
}
.pr12 {
  padding-right: 1.2em !important;
}
.pr13 {
  padding-right: 1.3em !important;
}
.pr14 {
  padding-right: 1.4em !important;
}
.pr15 {
  padding-right: 1.5em !important;
}
.pr20 {
  padding-right: 2em !important;
}
.pr21 {
  padding-right: 2.1em !important;
}
.pr22 {
  padding-right: 2.2em !important;
}
.pr23 {
  padding-right: 2.3em !important;
}
.pr24 {
  padding-right: 2.4em !important;
}
.pr25 {
  padding-right: 2.5em !important;
}
.pr30 {
  padding-right: 3em !important;
}
.pr31 {
  padding-right: 3.1em !important;
}
.pr32 {
  padding-right: 3.2em !important;
}
.pr33 {
  padding-right: 3.3em !important;
}
.pr34 {
  padding-right: 3.4em !important;
}
.pr35 {
  padding-right: 3.5em !important;
}
.pr40 {
  padding-right: 4em !important;
}
.pr41 {
  padding-right: 4.1em !important;
}
.pr42 {
  padding-right: 4.2em !important;
}
.pr43 {
  padding-right: 4.3em !important;
}
.pr44 {
  padding-right: 4.4em !important;
}
.pr45 {
  padding-right: 4.5em !important;
}
.pr46 {
  padding-right: 4.6em !important;
}
.pr47 {
  padding-right: 4.7em !important;
}
.pr48 {
  padding-right: 4.8em !important;
}
.pr49 {
  padding-right: 4.9em !important;
}
.pr50 {
  padding-right: 5em !important;
}

.m0 {
  margin: 0 !important;
}
.mt1 {
  margin-top: 0.1em !important;
}
.mt2 {
  margin-top: 0.2em !important;
}
.mt3 {
  margin-top: 0.3em !important;
}
.mt4 {
  margin-top: 0.4em !important;
}
.mt5 {
  margin-top: 0.5em !important;
}
.mt6 {
  margin-top: 0.6em !important;
}
.mt7 {
  margin-top: 0.7em !important;
}
.mt8 {
  margin-top: 0.8em !important;
}
.mt9 {
  margin-top: 0.9em !important;
}
.mt10 {
  margin-top: 1em !important;
}
.mt11 {
  margin-top: 1.1em !important;
}
.mt12 {
  margin-top: 1.2em !important;
}
.mt13 {
  margin-top: 1.3em !important;
}
.mt14 {
  margin-top: 1.4em !important;
}
.mt15 {
  margin-top: 1.5em !important;
}
.mt20 {
  margin-top: 2em !important;
}
.mt21 {
  margin-top: 2.1em !important;
}
.mt22 {
  margin-top: 2.2em !important;
}
.mt23 {
  margin-top: 2.3em !important;
}
.mt24 {
  margin-top: 2.4em !important;
}
.mt25 {
  margin-top: 2.5em !important;
}
.mt30 {
  margin-top: 3em !important;
}
.mt31 {
  margin-top: 3.1em !important;
}
.mt32 {
  margin-top: 3.2em !important;
}
.mt33 {
  margin-top: 3.3em !important;
}
.mt34 {
  margin-top: 3.4em !important;
}
.mt35 {
  margin-top: 3.5em !important;
}
.mt40 {
  margin-top: 4em !important;
}
.mt41 {
  margin-top: 4.1em !important;
}
.mt42 {
  margin-top: 4.2em !important;
}
.mt43 {
  margin-top: 4.3em !important;
}
.mt44 {
  margin-top: 4.4em !important;
}
.mt45 {
  margin-top: 4.5em !important;
}
.mt46 {
  margin-top: 4.6em !important;
}
.mt47 {
  margin-top: 4.7em !important;
}
.mt48 {
  margin-top: 4.8em !important;
}
.mt49 {
  margin-top: 4.9em !important;
}
.mt50 {
  margin-top: 5em !important;
}

.mb1 {
  margin-bottom: 0.1em !important;
}
.mb2 {
  margin-bottom: 0.2em !important;
}
.mb3 {
  margin-bottom: 0.3em !important;
}
.mb4 {
  margin-bottom: 0.4em !important;
}
.mb5 {
  margin-bottom: 0.5em !important;
}
.mb6 {
  margin-bottom: 0.6em !important;
}
.mb7 {
  margin-bottom: 0.7em !important;
}
.mb8 {
  margin-bottom: 0.8em !important;
}
.mb9 {
  margin-bottom: 0.9em !important;
}
.mb10 {
  margin-bottom: 1em !important;
}
.mb11 {
  margin-bottom: 1.1em !important;
}
.mb12 {
  margin-bottom: 1.2em !important;
}
.mb13 {
  margin-bottom: 1.3em !important;
}
.mb14 {
  margin-bottom: 1.4em !important;
}
.mb15 {
  margin-bottom: 1.5em !important;
}
.mb20 {
  margin-bottom: 2em !important;
}
.mb21 {
  margin-bottom: 2.1em !important;
}
.mb22 {
  margin-bottom: 2.2em !important;
}
.mb23 {
  margin-bottom: 2.3em !important;
}
.mb24 {
  margin-bottom: 2.4em !important;
}
.mb25 {
  margin-bottom: 2.5em !important;
}
.mb30 {
  margin-bottom: 3em !important;
}
.mb31 {
  margin-bottom: 3.1em !important;
}
.mb32 {
  margin-bottom: 3.2em !important;
}
.mb33 {
  margin-bottom: 3.3em !important;
}
.mb34 {
  margin-bottom: 3.4em !important;
}
.mb35 {
  margin-bottom: 3.5em !important;
}
.mb40 {
  margin-bottom: 4em !important;
}
.mb41 {
  margin-bottom: 4.1em !important;
}
.mb42 {
  margin-bottom: 4.2em !important;
}
.mb43 {
  margin-bottom: 4.3em !important;
}
.mb44 {
  margin-bottom: 4.4em !important;
}
.mb45 {
  margin-bottom: 4.5em !important;
}
.mb46 {
  margin-bottom: 4.6em !important;
}
.mb47 {
  margin-bottom: 4.7em !important;
}
.mb48 {
  margin-bottom: 4.8em !important;
}
.mb49 {
  margin-bottom: 4.9em !important;
}
.mb50 {
  margin-bottom: 5em !important;
}

.ml1 {
  margin-left: 0.1em !important;
}
.ml2 {
  margin-left: 0.2em !important;
}
.ml3 {
  margin-left: 0.3em !important;
}
.ml4 {
  margin-left: 0.4em !important;
}
.ml5 {
  margin-left: 0.5em !important;
}
.ml6 {
  margin-left: 0.6em !important;
}
.ml7 {
  margin-left: 0.7em !important;
}
.ml8 {
  margin-left: 0.8em !important;
}
.ml9 {
  margin-left: 0.9em !important;
}
.ml10 {
  margin-left: 1em !important;
}
.ml11 {
  margin-left: 1.1em !important;
}
.ml12 {
  margin-left: 1.2em !important;
}
.ml13 {
  margin-left: 1.3em !important;
}
.ml14 {
  margin-left: 1.4em !important;
}
.ml15 {
  margin-left: 1.5em !important;
}
.ml20 {
  margin-left: 2em !important;
}
.ml21 {
  margin-left: 2.1em !important;
}
.ml22 {
  margin-left: 2.2em !important;
}
.ml23 {
  margin-left: 2.3em !important;
}
.ml24 {
  margin-left: 2.4em !important;
}
.ml25 {
  margin-left: 2.5em !important;
}
.ml30 {
  margin-left: 3em !important;
}
.ml31 {
  margin-left: 3.1em !important;
}
.ml32 {
  margin-left: 3.2em !important;
}
.ml33 {
  margin-left: 3.3em !important;
}
.ml34 {
  margin-left: 3.4em !important;
}
.ml35 {
  margin-left: 3.5em !important;
}
.ml40 {
  margin-left: 4em !important;
}
.ml41 {
  margin-left: 4.1em !important;
}
.ml42 {
  margin-left: 4.2em !important;
}
.ml43 {
  margin-left: 4.3em !important;
}
.ml44 {
  margin-left: 4.4em !important;
}
.ml45 {
  margin-left: 4.5em !important;
}
.ml46 {
  margin-left: 4.6em !important;
}
.ml47 {
  margin-left: 4.7em !important;
}
.ml48 {
  margin-left: 4.8em !important;
}
.ml49 {
  margin-left: 4.9em !important;
}
.ml50 {
  margin-left: 5em !important;
}

.mr1 {
  margin-right: 0.1em !important;
}
.mr2 {
  margin-right: 0.2em !important;
}
.mr3 {
  margin-right: 0.3em !important;
}
.mr4 {
  margin-right: 0.4em !important;
}
.mr5 {
  margin-right: 0.5em !important;
}
.mr6 {
  margin-right: 0.6em !important;
}
.mr7 {
  margin-right: 0.7em !important;
}
.mr8 {
  margin-right: 0.8em !important;
}
.mr9 {
  margin-right: 0.9em !important;
}
.mr10 {
  margin-right: 1em !important;
}
.mr11 {
  margin-right: 1.1em !important;
}
.mr12 {
  margin-right: 1.2em !important;
}
.mr13 {
  margin-right: 1.3em !important;
}
.mr14 {
  margin-right: 1.4em !important;
}
.mr15 {
  margin-right: 1.5em !important;
}
.mr20 {
  margin-right: 2em !important;
}
.mr21 {
  margin-right: 2.1em !important;
}
.mr22 {
  margin-right: 2.2em !important;
}
.mr23 {
  margin-right: 2.3em !important;
}
.mr24 {
  margin-right: 2.4em !important;
}
.mr25 {
  margin-right: 2.5em !important;
}
.mr30 {
  margin-right: 3em !important;
}
.mr31 {
  margin-right: 3.1em !important;
}
.mr32 {
  margin-right: 3.2em !important;
}
.mr33 {
  margin-right: 3.3em !important;
}
.mr34 {
  margin-right: 3.4em !important;
}
.mr35 {
  margin-right: 3.5em !important;
}
.mr40 {
  margin-right: 4em !important;
}
.mr41 {
  margin-right: 4.1em !important;
}
.mr42 {
  margin-right: 4.2em !important;
}
.mr43 {
  margin-right: 4.3em !important;
}
.mr44 {
  margin-right: 4.4em !important;
}
.mr45 {
  margin-right: 4.5em !important;
}
.mr46 {
  margin-right: 4.6em !important;
}
.mr47 {
  margin-right: 4.7em !important;
}
.mr48 {
  margin-right: 4.8em !important;
}
.mr49 {
  margin-right: 4.9em !important;
}
.mr50 {
  margin-right: 5em !important;
}

/* width 5% ~ 100% 비율 */
.w5 {
  width: 5% !important;
}
.w6 {
  width: 6% !important;
}
.w7 {
  width: 7% !important;
}
.w8 {
  width: 8% !important;
}
.w9 {
  width: 9% !important;
}
.w10 {
  width: 10% !important;
}
.w11 {
  width: 11% !important;
}
.w12 {
  width: 12% !important;
}
.w13 {
  width: 13% !important;
}
.w14 {
  width: 14% !important;
}
.w15 {
  width: 15% !important;
}
.w16 {
  width: 16% !important;
}
.w17 {
  width: 17% !important;
}
.w18 {
  width: 18% !important;
}
.w19 {
  width: 19% !important;
}
.w20 {
  width: 20% !important;
}
.w21 {
  width: 21% !important;
}
.w22 {
  width: 22% !important;
}
.w23 {
  width: 23% !important;
}
.w24 {
  width: 24% !important;
}
.w25 {
  width: 25% !important;
}
.w26 {
  width: 26% !important;
}
.w27 {
  width: 27% !important;
}
.w28 {
  width: 28% !important;
}
.w29 {
  width: 29% !important;
}
.w30 {
  width: 30% !important;
}
.w31 {
  width: 31% !important;
}
.w32 {
  width: 32% !important;
}
.w33 {
  width: 33% !important;
}
.w33_3 {
  width: 33.3333333% !important;
}
.w34 {
  width: 34% !important;
}
.w35 {
  width: 35% !important;
}
.w36 {
  width: 36% !important;
}
.w37 {
  width: 37% !important;
}
.w38 {
  width: 38% !important;
}
.w39 {
  width: 39% !important;
}
.w40 {
  width: 40% !important;
}
.w45 {
  width: 45% !important;
}
.w46 {
  width: 46% !important;
}
.w47 {
  width: 47% !important;
}
.w48 {
  width: 48% !important;
}
.w49 {
  width: 49% !important;
}
.w50 {
  width: 50% !important;
}
.w51 {
  width: 51% !important;
}
.w52 {
  width: 52% !important;
}
.w53 {
  width: 53% !important;
}
.w54 {
  width: 54% !important;
}
.w55 {
  width: 55% !important;
}
.w56 {
  width: 56% !important;
}
.w57 {
  width: 57% !important;
}
.w58 {
  width: 58% !important;
}
.w59 {
  width: 59% !important;
}
.w60 {
  width: 60% !important;
}
.w65 {
  width: 65% !important;
}
.w66 {
  width: 66% !important;
}
.w67 {
  width: 67% !important;
}
.w68 {
  width: 68% !important;
}
.w69 {
  width: 69% !important;
}
.w70 {
  width: 70% !important;
}
.w71 {
  width: 71% !important;
}
.w72 {
  width: 72% !important;
}
.w73 {
  width: 73% !important;
}
.w74 {
  width: 74% !important;
}
.w75 {
  width: 75% !important;
}
.w76 {
  width: 76% !important;
}
.w77 {
  width: 77% !important;
}
.w78 {
  width: 78% !important;
}
.w79 {
  width: 79% !important;
}
.w80 {
  width: 80% !important;
}
.w81 {
  width: 81% !important;
}
.w82 {
  width: 82% !important;
}
.w83 {
  width: 83% !important;
}
.w84 {
  width: 84% !important;
}
.w85 {
  width: 85% !important;
}
.w86 {
  width: 86% !important;
}
.w87 {
  width: 87% !important;
}
.w88 {
  width: 88% !important;
}
.w89 {
  width: 89% !important;
}
.w90 {
  width: 90% !important;
}
.w95 {
  width: 95% !important;
}
.w96 {
  width: 96% !important;
}
.w97 {
  width: 97% !important;
}
.w98 {
  width: 98% !important;
}
.w99 {
  width: 99% !important;
}
.w100 {
  width: 100% !important;
}

/* 폰트 사이즈 */
/* .font_ss {
  font-size: x-small !important;
}
.font_s {
  font-size: small !important;
}
.font_m {
  font-size: medium !important;
}
.font_l {
  font-size: large !important;
}
.font_xl {
  font-size: x-large !important;
} */

.font8 {
  font-size: 0.8em !important;
}
.font9 {
  font-size: 0.9em !important;
}
.font10 {
  font-size: 1em !important;
}
.font11 {
  font-size: 1.1em !important;
}
.font12 {
  font-size: 1.2em !important;
}
.font13 {
  font-size: 1.3em !important;
}
.font14 {
  font-size: 1.4em !important;
}
.font15 {
  font-size: 1.5em !important;
}
.font16 {
  font-size: 1.6em !important;
}
.font17 {
  font-size: 1.7em !important;
}
.font18 {
  font-size: 1.8em !important;
}
.font19 {
  font-size: 1.9em !important;
}
.font20 {
  font-size: 2em !important;
}
.font22 {
  font-size: 2.2em !important;
}
.font24 {
  font-size: 2.4em !important;
}
.font26 {
  font-size: 2.6em !important;
}
.font28 {
  font-size: 2.8em !important;
}
.font30 {
  font-size: 3em !important;
}
.font32 {
  font-size: 3.2em !important;
}
.font34 {
  font-size: 3.4em !important;
}
.font36 {
  font-size: 3.6em !important;
}
.font38 {
  font-size: 3.8em !important;
}
.font40 {
  font-size: 4em !important;
}
.font42 {
  font-size: 4.2em !important;
}
.font44 {
  font-size: 4.4em !important;
}
.font46 {
  font-size: 4.6px !important;
}
.font48 {
  font-size: 4.8em !important;
}
.font50 {
  font-size: 5em !important;
}

/*줄간격*/
.lh0 {
  line-height: 0 !important;
}
.lh110 {
  line-height: 110% !important;
}
.lh120 {
  line-height: 120% !important;
}
.lh130 {
  line-height: 130% !important;
}
.lh140 {
  line-height: 140% !important;
}
.lh150 {
  line-height: 150% !important;
}
.lh160 {
  line-height: 160% !important;
}
.lh170 {
  line-height: 170% !important;
}
.lh180 {
  line-height: 180% !important;
}
.lh190 {
  line-height: 190% !important;
}

/* 텍스트 정렬 */
.t_right {
  text-align: right !important;
}
.t_left {
  text-align: left !important;
}
.t_center {
  text-align: center !important;
}

.t_top {
  vertical-align: top !important;
}
.t_bottom {
  vertical-align: bottom !important;
}
.t_middle {
  vertical-align: middle !important;
}
.t_baseline {
  vertical-align: baseline !important;
}
.t_sub {
  vertical-align: sub !important;
}
.t_text-top {
  vertical-align: text-top !important;
}
.t_text-bottom {
  vertical-align: text-bottom !important;
}

/* 객체 정렬 */
/* .left {
  float: left !important;
}
.right {
  float: right !important;
}
.left:after,
.right:after {
  content: "";
  display: block;
  clear: both;
} */
.clear {
  clear: both !important;
}

/*정렬 속성*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* position */
.p_fixed {
  position: fixed !important;
}
.p_absolute {
  position: absolute !important;
}
.p_relative {
  position: relative !important;
}
.p_stiky {
  position: stiky !important;
}
.p_unset {
  position: unset !important;
}

/* display */
.d_block {
  display: block !important;
}
.d_inline-block {
  display: inline-block !important;
}
.d_inline {
  display: inline !important;
}
.d_none {
  display: none !important;
}
.d_flex {
  display: flex !important;
}
.d_inline-flex {
  display: inline-flex !important;
}
.o_hidden {
  overflow: hidden !important;
}

/* flex */
.f-d_row {
  flex-direction: row !important;
}
.f-d_column {
  flex-direction: column !important;
}
.f-d_row-reverse {
  flex-direction: row-reverse !important;
}
.f-d_column-reverse {
  flex-direction: column-reverse !important;
}

.f-w_nowrap {
  flex-wrap: nowrap !important;
}
.f-w_wrap {
  flex-wrap: wrap !important;
}

.a-i_center {
  align-items: center !important;
}
.a-i_flex-start {
  align-items: flex-start !important;
}
.a-i_flex-end {
  align-items: flex-end !important;
}
.a-i_stretch {
  align-items: stretch !important;
}
.a-i_baseline {
  align-items: baseline !important;
}

.a-c_center {
  align-content: center !important;
}
.a-c_flex-start {
  align-content: flex-start !important;
}
.a-c_flex-end {
  align-content: flex-end !important;
}
.a-c_space-around {
  align-content: space-around !important;
}
.a-c_space-between {
  align-content: space-between !important;
}
.a-c_stretch {
  align-content: stretch !important;
}

.j-c_center {
  justify-content: center !important;
}
.j-c_flex-start {
  justify-content: flex-start !important;
}
.j-c_flex-end {
  justify-content: flex-end !important;
}
.j-c_space-between {
  justify-content: space-between !important;
}
.j-c_space-around {
  justify-content: space-around !important;
}
.j-c_space-evenly {
  justify-content: space-evenly !important;
}

.flex_wrap {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .flex_wrap {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* gap */
.gap5 {
  gap: 0.5rem !important;
}

.gap10 {
  gap: 1rem !important;
}

.gap15 {
  gap: 1.5rem;
}

.gap20 {
  gap: 2rem !important;
}

.gap25 {
  gap: 2.5rem !important;
}

.gap30 {
  gap: 3rem !important;
}

/* 말줄임 */
.ellipsis {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block;
}
.ellipsis2 {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  display: block;
}
.ellipsis3 {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  display: block;
}
.ellipsis4 {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  display: block;
}

/* font weight */
.font_300 {
  font-weight: 300 !important;
}
.font_400 {
  font-weight: 400 !important;
}
.font_500 {
  font-weight: 500 !important;
}
.font_bold,
.font_600 {
  font-weight: bold !important;
}
.font_normal {
  font-weight: normal !important;
}

/* font color */
.font_white {
  color: var(--white) !important;
}
.font_yellow {
  color: var(--yellow) !important;
}
.font_orange {
  color: var(--orange) !important;
}
.font_purple {
  color: var(--purple) !important;
}
.font_red {
  color: var(--red) !important;
}
.font_green {
  color: var(--green) !important;
}
.font_blue {
  color: var(--blue) !important;
}
.font_navy {
  color: var(--navy) !important;
}
.font_grayLight {
  color: var(--grayLight) !important;
}
.font_gray {
  color: var(--gray) !important;
}
.font_grayDark {
  color: var(--grayDark) !important;
}
.font_black {
  color: var(--black) !important;
}

/* bg color */
.bg_white {
  background: var(--white) !important;
}
.bg_yellowLight {
  background: var(--yellowLight) !important;
}
.bg_yellow {
  background: var(--yellow) !important;
}
.bg_yellowDark {
  background: var(--yellowDark) !important;
}
.bg_orangeLight {
  background: var(--orangeLight) !important;
}
.bg_orange {
  background: var(--orange) !important;
}
.bg_orangeDark {
  background: var(--orangeDark) !important;
}
.bg_redLight {
  background: var(--redLight) !important;
}
.bg_red {
  background: var(--red) !important;
}
.bg_redDark {
  background: var(--redDark) !important;
}
.bg_greenLight {
  background: var(--greenLight) !important;
}
.bg_green {
  background: var(--green) !important;
}
.bg_greenDark {
  background: var(--greenDark) !important;
}
.bg_blueLight {
  background: var(--blueLight) !important;
}
.bg_blue {
  background: var(--blue) !important;
}
.bg_navyLight {
  background: var(--navyLight) !important;
}
.bg_navy {
  background: var(--navy) !important;
}
.bg_navyDark {
  background: var(--navyDark) !important;
}
.bg_purpleLight {
  background: var(--purpleLight) !important;
}
.bg_purple {
  background: var(--purple) !important;
}
.bg_purpleDark {
  background: var(--purpleDark) !important;
}
.bg_grayLight {
  background: var(--grayLight) !important;
}
.bg_gray {
  background: var(--gray) !important;
}
.bg_grayDark {
  background: var(--grayDark) !important;
}
.bg_black {
  background: var(--black) !important;
}

/* line */
.line_white {
  border: 1px solid var(--white) !important;
}
.line_yellow {
  border: 1px solid var(--yellow) !important;
}
.line_orange {
  border: 1px solid var(--orange) !important;
}
.line_purple {
  border: 1px solid var(--purple) !important;
}
.line_red {
  border: 1px solid var(--red) !important;
}
.line_green {
  border: 1px solid var(--green) !important;
}
.line_blue {
  border: 1px solid var(--blue) !important;
}
.line_navy {
  border: 1px solid var(--navy) !important;
}
.line_grayLight {
  border: 1px solid var(--grayLight) !important;
}
.line_gray {
  border: 1px solid var(--gray) !important;
}
.line_grayDark {
  border: 1px solid var(--grayDark) !important;
}
.line_black {
  border: 1px solid var(--black) !important;
}

/* button */
.btWrap {
  width: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btWrap > * {
  cursor: pointer !important;
}

.btn {
  font-size: 1rem;
  width: auto;
  height: 33px;
  margin: 0 3px;
  padding: 0 10px;
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn_ss {
  padding: 0 7px !important;
  height: 26px !important;
  font-size: 12px !important;
}
.btn_s {
  padding: 0 10px !important;
  height: 32px !important;
  font-size: 12px !important;
}
.btn_m {
  padding: 0 20px !important;
  height: 40px !important;
  font-size: 14px !important;
}
.btn_l {
  padding: 0 30px !important;
  height: 53px !important;
  font-size: 16px !important;
}
.btn_xl {
  padding: 0 50px !important;
  height: 65px !important;
  font-size: 20px !important;
}

/* select style*/
select {
  border-radius: 0;
  background: #fff url("../images/web/select_ic.svg") calc(100% - 6px) center
    no-repeat;
  background-size: 10px;
  border: 1px solid #e0e0e0;
  padding: 8px 27px 8px 10px;
  font-size: inherit;
}
select::-ms-expand {
  display: none;
} /* IE 에서 Select box 화살표 제거 */
select option {
  background: #f5f5f5;
  color: #333;
  padding: 3px 0;
}
.ie8 select {
  height: 1.8em;
  line-height: 1.8em;
}
.ie7 select {
  height: 2.2em;
}

/* 박스 스타일 */
.box_line {
  padding: 1.5em 1.5em;
  border: 1px solid #d5d5d5;
  position: relative;
}
.box_st1 {
  padding: 1.5em 1.5em;
  border: 1px solid #e7e7e7;
  box-shadow: 0 0 8px rgb(0 0 0 / 10%);
  position: relative;
}
.box_st4 {
  padding: 1.5em 1.5em;
  border: 1px solid #dfdfdf;
  position: relative;
  background: #f2f4f8;
}
.cont_line_box {
  padding-bottom: 4em;
  margin-bottom: 4em;
  position: relative;
}
.cont_line_box::after {
  content: "";
  height: 2px;
  width: 100%;
  margin-top: 33px;
  background: url(https://gbmeta.or.kr/images/web/common/sub_head_line.gif);
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.orange_box {
  padding: 1.5em 1.5em;
  background: #f7f6f4;
  position: relative;
}

/* 테이블 스타일 */
.table_st1 {
  overflow: hidden;
  margin: 0.75em 0;
  width: 100%;
  border-top: 2px solid #2b3456;
  border-bottom: 1px solid #ddd;
  position: relative;
  overflow: hidden;
  width: calc(100% + 1px);
  margin-left: -1px;
  font-weight: 300;
  line-height: 1.25;
  border-collapse: collapse;
}
.table_st1 th {
  padding: 0.9em 0.5em;
  border: 1px solid var(--table1-th-border);
  color: #2b3456;
  font-weight: 500;
  font-size: 1rem;
}
.table_st1 td {
  word-break: keep-all;
  padding: 0.9rem 0.5rem;
  background: #fff;
  border: solid #e7e7e7;
  border-width: 1px;
  color: #333;
  position: relative;
  min-height: 3.95rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  transition: background 0.3s;
  -webkit-transition: background 0.3s;
}
.table_st1 tbody tr:first-child th,
.table_st1 tbody tr:first-child td {
  border-top-width: 0;
}
.table_st1 th[scope="row"] {
  border-bottom: 1px solid #ddd;
}
.table_st1 tr:last-of-type th[scope="row"] {
  border-bottom: 0;
}
.table_st1 tbody th {
  background: var(--table1-th-bg);
}
.table_st1 thead th {
  background: var(--table1-th-bg);
  font-weight: 600;
}
.table_st1 tfoot td {
  background: var(--table1-tf-td-bg);
  border-color: var(--table1-tf-td-border);
  color: #000;
}
.table_st1 tfoot th {
  background: var(--table1-tf-th-bg);
  border-color: var(--table1-tf-th-border);
}

.table_st2 {
  border-collapse: collapse;
  border-spacing: 0;
  min-width: 100%;
  width: 100% !important;
  line-height: 1.2;
}
.table_st2 tbody {
  border-top: 1px solid #000;
  border-bottom: 1px solid #ddd;
}
.table_st2 tbody tr:nth-child(1) th,
.table_st1 tbody tr:nth-child(1) td {
  border-top: 1px solid #000 !important;
}
.table_st2 th {
  word-break: break-all !important;
  border: 1px solid var(--table2-th-border);
  text-align: left;
  vertical-align: middle;
}
.table_st2 th {
  padding: 0.9em 0.5em;
  background: var(--table2-th-bg);
  text-align: center;
}
.table_st2 thead th {
  text-align: center;
  border-top: 2px solid #000;
}
.table_st2 td {
  padding: 0.9em 0.5em;
  font-weight: normal;
  background: var(--table2-td-bg);
  border: 1px solid var(--table2-td-border);
  text-align: center;
  vertical-align: middle;
}
.table_st2 td a:hover {
  text-decoration: underline;
}
.table_st2 tr th:first-child,
.table_st2 tr td:first-child {
  border-left: none;
}
.table_st2 tr th:last-child,
.table_st2 tr td:last-child {
  border-right: none;
}
.table_st2 tfoot td {
  background: var(--table2-tf-td-bg);
  border-color: var(--table2-tf-td-border);
  color: #000;
}
.table_st2 tfoot th {
  background: var(--table2-tf-th-bg);
  border-color: var(--table2-tf-th-border);
}

.table_st3 {
  overflow: hidden;
  margin: 0.75em 0;
  width: 100%;
  border-top: 2px solid #2b3456;
  border-bottom: 1px solid #ddd;
  position: relative;
  overflow: hidden;
  width: calc(100% + 1px);
  margin-left: -1px;
  font-weight: 300;
  line-height: 1.25;
  border-collapse: collapse;
}
.table_st3 th {
  padding: 0.9em 0.5em;
  border: 1px solid var(--table3-th-border);
  color: #2b3456;
  font-weight: 500;
  font-size: 1rem;
}
.table_st3 td {
  word-break: keep-all;
  padding: 0.9rem 0.5rem;
  background: var(--table3-td-bg);
  border: solid var(--table3-td-border);
  border-width: 1px;
  color: #333;
  position: relative;
  min-height: 3.95rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  transition: background 0.3s;
  -webkit-transition: background 0.3s;
}
.table_st3 tbody tr:first-child th,
.table_st3 tbody tr:first-child td {
  border-top-width: 0;
}
.table_st3 th[scope="row"] {
  border-bottom: 1px solid #ddd;
}
.table_st3 tr:last-of-type th[scope="row"] {
  border-bottom: 0;
}
.table_st3 tbody th {
  background: var(--table3-tb-th-bg);
}
.table_st3 thead th {
  background: var(--table3-th-bg);
  font-weight: 600;
  border-bottom: 1px solid #000;
}
.table_st3 tfoot td {
  background: var(--table3-tf-td-bg);
  border-color: var(--table3-tf-td-border);
  color: #000;
}
.table_st3 tfoot th {
  background: var(--table3-tf-th-bg);
  border-color: var(--table3-tf-td-border);
}

.table_st4 {
  position: relative;
  width: 100%;
  border-top: 2px solid #2e8f97;
  border-collapse: collapse;
}
.table_st4 th,
.table_st4 td {
  padding: 1em 0.5em;
  border-bottom: 1px solid var(--table4-td-border);
}
.table_st4 thead th {
  background: var(--table4-th-bg);
  color: #2e8f97;
  font-weight: 700;
  line-height: 1.5em;
  border-left: 1px solid var(--table4-th-border2);
  border-bottom: 1px solid var(--table4-th-border1);
}
.table_st4 th {
  color: #222;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5em;
  text-align: center;
  border-left: 1px solid #e9e7e7;
}
.table_st4 th:first-child {
  border-left: 0;
}
.table_st4 th .br1280 {
  display: none;
}
.table_st4 td {
  border-left: 1px solid var(--table4-td-border);
  padding: 1.2em 0.8em;
  line-height: 1.5em;
  text-align: center;
  background: var(--table4-td-bg);
}
.table_st4 td:first-child {
  border-left: 0;
}
.table_st4 td.td-f {
  border-left: 1px solid #efe3e5;
}

.table_st5 {
  position: relative;
  width: 100%;
  border-top: 2px solid #10a2c2;
  border-collapse: collapse;
}
.table_st5 th {
  padding: 1em 0.5em;
  border-bottom: 1px solid var(--table5-th-border2);
}
.table_st5 thead th {
  background: var(--table5-th-bg);
  color: #10a2c2;
  font-weight: 500;
  line-height: 1.5em;
  border-left: 1px solid var(--table5-th-border1);
}
.table_st5 th {
  color: #222;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5em;
  text-align: center;
  border-left: 1px solid var(--table5-th-border2);
  font-size: 1rem;
}
.table_st5 th:first-child {
  border-left: 0;
}
.table_st5 th .br1280 {
  display: none;
}
.table_st5 td {
  border: 1px solid var(--table5-td-border);
  padding: 1rem 0.5em;
  line-height: 1.5em;
  text-align: center;
  word-break: keep-all;
  font-size: 1rem;
}
.table_st5 td a {
  font-size: 1rem;
  border: 1px solid #10a2c2;
  background-color: #10a2c2;
  padding: 6px 16px;
  width: 86px;
  display: inline-block;
  color: #fff;
  font-weight: 500;
}
.table_st5 td:first-child {
  border-left: 0;
}
.table_st5 td.td-f {
  border-left: 1px solid #efe3e5;
}

/* table header fixed */
.fixed-table {
  width: 100%;
  height: 210px;
  position: relative;
  overflow-y: auto;
}
.fixed-table thead {
  position: sticky;
  top: -1px;
}

@media screen and (max-width: 740px) {
  table.responsive colgroup {
    display: none;
  }
  table.responsive thead th {
    display: none;
  }
  table.responsive tbody th {
    background: #fff;
    border-bottom: none;
  }
  table.responsive tbody {
    border-top: 1px solid #151515;
  }
  table.responsive tbody tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #d9d9d9;
  }
  table.responsive tbody tr:after {
    display: block;
    clear: both;
    content: ".";
    visibility: hidden;
    height: 0;
  }
  table.responsive tbody tr {
    display: inline-block;
  }
  table.responsive tbody tr {
    display: block;
    position: relative;
  }
  table.responsive tbody td {
    width: 100%;
    float: left;
    margin: 1px 7px;
    padding: 0;
    border: none;
    text-align: left;
    box-sizing: border-box;
  }
  table.responsive tbody .num {
    width: auto;
    min-width: 50px;
    text-align: center;
    font-size: 0.9rem;
    border: 1px solid #ddd;
    border-radius: 25px;
    color: #999;
    float: left;
    margin: 3px 0 5px 5px;
    padding: 0;
  }
  table.responsive tbody .subject {
    width: 100%;
    color: #000;
    margin: 10px 0;
    font-weight: 600;
    font-size: 1.5rem;
  }
  table.responsive tbody .data {
    width: auto;
    color: #999;
    position: relative;
  }
  table.responsive tbody .data ~ .data::before {
    content: "•";
    margin-right: 10px;
  }
  table.responsive tbody .gubn {
    font-size: 1.1rem;
    color: #334899;
    font-weight: 600;
    display: inline-block;
    width: auto;
    width: 100%;
  }
  table.responsive tbody .none {
    display: none;
  }
  table.responsive [data-cell-header]:before {
    content: attr(data-cell-header);
    display: inline-block;
  }
}

/* board paging style */
.paging {
  display: flex;
  justify-content: center;
}
.paging a {
  width: 35px;
  height: 35px;
  border: 1px solid #ccc;
  display: inline-block;
  color: #999;
  text-align: center;
  line-height: 33px;
  font-size: 16px;
  margin-left: -1px;
}
.paging a:hover:not(.active) {
  border-color: var(--main-color);
  z-index: 1;
  box-shadow: 0 0 7px rgb(0 0 0 / 22%);
}
.paging .active {
  background: var(--main-color);
  color: #fff;
  border-color: var(--main-color);
}
.paging .first {
  background: url("/images/web/chevrons-left.png") center center no-repeat;
}
.paging .prev {
  background: url("/images/web/chevron-left.png") center center no-repeat;
}
.paging .next {
  background: url("/images/web/chevron-right.png") center center no-repeat;
}
.paging .last {
  background: url("/images/web/chevrons-right.png") center center no-repeat;
}
.paging .material-icons {
  font-size: 22px;
  color: #333;
}

/* 리스트 스타일 */
.list_st1 li {
  position: relative;
  padding-left: 9px;
  line-height: 24px;
  width: 100% !important;
  font-size: 0.9rem;
}
.list_st1 > li:before {
  content: "";
  background: #1f59a3;
  width: 4px;
  height: 4px;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 10px;
  border-radius: 8px;
}

.list_st2 > li {
  position: relative;
  padding-left: 0.7em;
  margin-bottom: 0.6em;
  font-size: 0.95rem;
  color: #444;
}
.list_st2 > li::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 3px;
  height: 3px;
  background: #555;
}

/* none_data */
.none_data {
  padding: 2em 1em;
  background: #fff;
  color: #000;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em;
}
.none_data .material-icons {
  font-size: 2rem;
  margin-bottom: 0.2em;
}

/* 라디오박스 style */
.radi_box {
  position: relative;
  height: 25px;
}
.radi_box input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin-left: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.radi_box input[type="radio"] + label {
  width: 100%;
  cursor: pointer;
  float: left;
  position: relative;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.radi_box input[type="radio"] + label:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #c9c9c9;
  border: 6px solid #ececec;
  float: left;
  margin-right: 6px;
}
.radi_box input[type="radio"] + label span {
  width: 100%;
  display: inline-block;
  padding-left: 43px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.3;
  font-weight: 500;
}
.radi_box input[type="radio"]:checked + label {
  float: left;
  text-align: left;
}
.radi_box input[type="radio"]:checked + label:before {
  content: "";
  background-color: #fff;
  border-color: var(--radio-color);
}
.radi_box input[type="radio"]:checked + label span {
  color: #f2443a;
}

/* 체크박스 style */
.checkbox {
  position: relative;
  height: 25px;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin-left: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.checkbox input[type="checkbox"] + label {
  width: 100%;
  cursor: pointer;
  float: left;
  position: relative;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.checkbox input[type="checkbox"] + label:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #c9c9c9;
  border: 6px solid #ececec;
  float: left;
  margin-right: 6px;
}
/* .checkbox input[type="checkbox"] + label span {
  width: 100%;
  display: inline-block;
  padding-left: 43px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.3;
  font-weight: 500;
}
.checkbox input[type="checkbox"]:checked + label {
  float: left;
  text-align: left;
} */
.checkbox input[type="checkbox"]:checked + label:before {
  content: "";
  background-color: #fff;
  border-color: var(--radio-color);
}
/* .checkbox input[type="checkbox"]:checked + label span {
  color: #f2443a;
} */

input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media screen and (max-width: 740px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"] {
    width: 100%;
  }
}