@charset "UTF-8";
/****************************************/
/* *** public_html ***
/*  Name : byWIND
/*  PART : common.css
/*  Version : 2.0
/*  Author : 이소망
/*  Modify : 
/****************************************/

/* overlay */
.custom-overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.3s;
}
.custom-overlay.active {
  opacity: 1;
  visibility: visible;
}
.custom-overlay .percent {
  color: #fff;
  font-weight: 500;
  font-size: 25px;
}

/* 필수 (*) 아이콘 */
.i {
  margin-left: 5px;
  color: #f8554e;
  font-weight: 600;
}

/* flexbox */
.flexbox {
  padding: 0 1rem !important;
}
.flexbox .tit {
  align-self: stretch;
  padding: 0 10px 0 15px;
  min-width: 165px;
  text-align: left;
  vertical-align: top;
  background: #f7f7f7;
  line-height: 70px;
}
.flexbox .tit + .register-write {
  margin-left: 13px;
}
.flexbox .wrap {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #efeff1;
}
.flexbox.last .wrap {
  border-bottom: none;
}
.view-form .flexbox .wrap {
  width: calc(100% + 1rem);
}

/* flexWrap */
.flexWrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.flexWrap + .flexWrap {
  margin-top: 10px;
}
.flexWrap.both {
  justify-content: space-between;
  align-items: center;
} /*양쪽정렬*/
.flexWrap.both-end {
  justify-content: space-between;
  align-items: flex-end;
} /*양쪽정렬 + 아래쪽기준정렬*/
.flexWrap.right {
  justify-content: flex-end;
} /*오른쪽 정렬*/
.flexWrap.vertical {
  flex-direction: column;
} /*수직정렬*/
.flexWrap.reverse {
  flex-direction: column-reverse;
} /*수직반대정렬*/
.flexWrap:not(.both, .both-end) button {
  margin-left: 7px;
}
.flexWrap [class*='heading'] {
  margin-bottom: 0;
  padding-bottom: 0;
}
.flexWrap [class*='heading'] + .checkbox-radio-group {
  margin-left: 14px;
}
.flexWrap [class*='heading'] + .badge-custom {
  margin-left: 5px;
}
.flexWrap .fixed-search-form {
  margin-bottom: 0;
}
.flexWrap .fixed-search-form button {
  margin-left: 0;
}

/* 테이블에 여러개 리스트가 들어가는 경우 */
.table-inner-lst {
  padding: 0 0 0 1.2rem !important;
}
.table-inner-lst ul li {
  display: flex;
  align-items: center;
  float: left;
  min-height: 41px;
  line-height: 41px;
}
.table-inner-lst ul li.height70 {
  min-height: 70px;
  line-height: 70px;
}
.table-inner-lst ul li span {
  display: inline-block;
}
.table-inner-lst ul li .tit {
  background: #f7f7f7;
  padding: 0 1.2rem;
}
.table-inner-lst ul li .sub {
  width: auto;
  vertical-align: middle;
  margin: 0 0.9rem;
}

/* padding */
.pdvertical10 {
  padding: 10px 0 !important;
}
.pdvertical20 {
  padding: 20px 0 !important;
}
.pd0 {
  padding: 0 !important;
}
.pdt0 {
  padding-top: 0 !important;
}
.pdt10 {
  padding-top: 10px !important;
}
.pdt20 {
  padding-top: 20px !important;
}
.pdt30 {
  padding-top: 30px !important;
}
.pdt35 {
  padding-top: 35px !important;
}
.pdt40 {
  padding-top: 40px !important;
}
.pdt50 {
  padding-top: 50px !important;
}
.pdb0 {
  padding-bottom: 0 !important;
}
.pdb10 {
  padding-bottom: 10px !important;
}
.pdb20 {
  padding-bottom: 20px !important;
}
.pdb30 {
  padding-bottom: 30px !important;
}
.pdb35 {
  padding-bottom: 35px !important;
}
.pdb40 {
  padding-bottom: 40px !important;
}
.pdb50 {
  padding-bottom: 50px !important;
}
.pdl0 {
  padding-left: 0 !important;
}
.pdl10 {
  padding-left: 10px !important;
}
.pdl20 {
  padding-left: 20px !important;
}
.pdl30 {
  padding-left: 30px !important;
}
.pdl40 {
  padding-left: 40px !important;
}
.pdl50 {
  padding-left: 50px !important;
}
.pdr0 {
  padding-right: 0 !important;
}
.pdr10 {
  padding-right: 10px !important;
}
.pdr20 {
  padding-right: 20px !important;
}
.pdr30 {
  padding-right: 30px !important;
}
.pdr40 {
  padding-right: 40px !important;
}
.pdr50 {
  padding-right: 50px !important;
}

/* margin */
.mgvertical5 {
  margin: 5px 0 !important;
}
.mgvertical10 {
  margin: 10px 0 !important;
}
.mgvertical20 {
  margin: 20px 0 !important;
}
.mg0 {
  margin: 0 !important;
}
.mgt0 {
  margin-top: 0 !important;
}
.mgt10 {
  margin-top: 10px !important;
}
.mgt20 {
  margin-top: 20px !important;
}
.mgt30 {
  margin-top: 30px !important;
}
.mgt35 {
  margin-top: 35px !important;
}
.mgt40 {
  margin-top: 40px !important;
}
.mgt50 {
  margin-top: 50px !important;
}
.mgt55 {
  margin-top: 55px !important;
}
.mgt60 {
  margin-top: 60px !important;
}
.mgt70 {
  margin-top: 70px !important;
}
.mgt80 {
  margin-top: 80px !important;
}
.mgt90 {
  margin-top: 90px !important;
}
.mgt100 {
  margin-top: 100px !important;
}
.mgb0 {
  margin-bottom: 0 !important;
}
.mgb5 {
  margin-bottom: 5px !important;
}
.mgb10 {
  margin-bottom: 10px !important;
}
.mgb20 {
  margin-bottom: 20px !important;
}
.mgb30 {
  margin-bottom: 30px !important;
}
.mgb35 {
  margin-bottom: 35px !important;
}
.mgb40 {
  margin-bottom: 40px !important;
}
.mgb50 {
  margin-bottom: 50px !important;
}
.mgb60 {
  margin-bottom: 60px !important;
}
.mgb70 {
  margin-bottom: 70px !important;
}
.mgb80 {
  margin-bottom: 80px !important;
}
.mgb90 {
  margin-bottom: 90px !important;
}
.mgb100 {
  margin-bottom: 100px !important;
}
.mgl0 {
  margin-left: 0 !important;
}
.mgl5 {
  margin-left: 5px !important;
}
.mgl10 {
  margin-left: 10px !important;
}
.mgl20 {
  margin-left: 20px !important;
}
.mgl30 {
  margin-left: 30px !important;
}
.mgl40 {
  margin-left: 40px !important;
}
.mgl50 {
  margin-left: 50px !important;
}
.mgr0 {
  margin-right: 0 !important;
}
.mgr10 {
  margin-right: 10px !important;
}
.mgr20 {
  margin-right: 20px !important;
}
.mgr30 {
  margin-right: 30px !important;
}
.mgr40 {
  margin-right: 40px !important;
}
.mgr50 {
  margin-right: 50px !important;
}

/* 텍스트 정렬 및 위치 */
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.txt-left {
  text-align: left !important;
}
.txt-center {
  text-align: center !important;
}
.txt-right {
  text-align: right !important;
}
.txt-justify {
  text-align: justify !important;
}
.v-top {
  vertical-align: top !important;
}
.v-mid {
  vertical-align: middle !important;
}
.v-bot {
  vertical-align: bottom !important;
}
.f-left {
  float: left !important;
}
.f-right {
  float: right !important;
}

/* 퍼센트(%) */
.w5p {
  width: 5% !important;
}
.w10p {
  width: 10% !important;
}
.w15p {
  width: 15% !important;
}
.w20p {
  width: 20% !important;
}
.w25p {
  width: 25% !important;
}
.w30p {
  width: 30% !important;
}
.w35p {
  width: 35% !important;
}
.w40p {
  width: 40% !important;
}
.w45p {
  width: 45% !important;
}
.w50p {
  width: 50% !important;
}
.w55p {
  width: 55% !important;
}
.w60p {
  width: 60% !important;
}
.w65p {
  width: 65% !important;
}
.w70p {
  width: 70% !important;
}
.w75p {
  width: 75% !important;
}
.w80p {
  width: 80% !important;
}
.w85p {
  width: 85% !important;
}
.w90p {
  width: 90% !important;
}
.w95p {
  width: 95% !important;
}
.w100p {
  width: 100% !important;
}

/* 높이(px) */
.h0 {
  height: 0 !important;
}
.h10 {
  height: 10px !important;
}
.h20 {
  height: 20px !important;
}
.h30 {
  height: 30px !important;
}
.h40 {
  height: 40px !important;
}
.h50 {
  height: 50px !important;
}

/* font */
.size20 {
  font-size: 20px !important;
  display: inline-block;
  vertical-align: middle;
}
.size25 {
  font-size: 25px;
  display: inline-block;
  vertical-align: middle;
}

.no-txt {
  padding: 40px 0 40px;
  color: #c8c8ca;
} /*등록한 항목이 없습니다 text*/

.red {
  color: #be3f3b !important;
  font-weight: 800;
}
.red2 {
  color: #f8554e !important;
  font-weight: 800;
}
.black {
  color: #222 !important;
}
.blue {
  color: #475df1 !important;
  font-weight: 600;
}
.orange {
  color: #e99f00 !important;
  font-weight: 800;
}

.f-bolder {
  font-weight: 900 !important;
}
.f-bold {
  font-weight: 700 !important;
}
.f-normal {
  font-weight: 500 !important;
}
.f-lighter {
  font-weight: 300 !important;
}

.blue-tit {
  color: #475df1 !important;
  font-weight: 900 !important;
}

/* 테이블 선 삭제 */
.br-none {
  border-right: none !important;
} /*오른쪽 선 삭제*/
.bl-none {
  border-left: none !important;
} /*왼쪽 선 삭제*/
.bt-none {
  border-top: none !important;
} /*상단 선 삭제*/
.bm-none {
  border-bottom: none !important;
} /*하단 선 삭제*/

/* display 속성 */
.block {
  display: block !important;
}

/* 라인 */
.line {
  width: 100%;
  height: 1px;
  background: #eaeaf2;
}
.line-vertical {
  display: inline-block;
  width: 1px;
  min-height: 46px;
  height: 100%;
  background: #eaeaf2;
  margin: 0 11px 0 23px;
}
.line-vertical2 {
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 11px;
  background: #eaeaf2;
  margin: 0 8px;
}
.line-horizontal {
  display: block;
  height: 1px;
  background: #efeff1;
  margin: 35px 0;
}

/* 알람텍스트 */
.tb-alarm-txt .alarm-name {
  color: #333;
  font-weight: 700;
}

/* 리스트 스타일 */
.list-custom1::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 4px;
  height: 4px;
  background: #b3b3b3;
  margin-right: 3px;
}
.list-custom2::before {
  content: '-';
  color: #777;
}

/*************************************
    폰트 스타일
*************************************/
.en {
  font: 700 36px/1 var(--poppins), sans-serif !important;
} /*영문타이틀만 따로 추가*/
.poppins {
  font-family: var(--poppins), sans-serif !important;
}
.nanum {
  font-family: var(--nanumsquare), sans-serif !important;
}
.gothic {
  font-family: var(--font-be-vietnam-pro), sans-serif !important;
}
.lineawesome {
  font-family: var(--lineawesome);
  font-weight: bold;
} /*라인어썸 폰트패밀리 네임*/

/*************************************
    스크롤바 커스텀
*************************************/

/* 기본 스크롤바
--------------------------------------------- */
/*스크롤바*/
::-webkit-scrollbar {
  width: 0.9rem;
  padding: 0 0.5rem;
  background: transparent;
}
/*스크롤바 막대*/
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4rem;
  background-clip: padding-box;
  border: 0.3rem solid transparent;
}
/*스크롤바 막대 hover */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
/*스크롤바 뒷 배경 */
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}

/* 레이어팝업 스크롤바
--------------------------------------------- */
/*스크롤바*/
.popup-cont-inner::-webkit-scrollbar {
  width: 1rem;
  padding: 0 0.5rem;
  background: transparent;
}
/*스크롤바 막대*/
.popup-cont-inner::-webkit-scrollbar-thumb {
  background-color: #dadada;
  border-radius: 4rem;
  background-clip: padding-box;
  border: 0.4rem solid transparent;
}
/*스크롤바 막대 hover */
.popup-cont-inner::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
/*스크롤바 뒷 배경 */
.popup-cont-inner::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 0;
}

/* 코드 관리 스크롤바
--------------------------------------------- */
/*스크롤바*/
.code-scroll-wrap::-webkit-scrollbar {
  width: 5px;
}
/*스크롤바 막대*/
.code-scroll-wrap::-webkit-scrollbar-thumb {
  border-radius: 4rem;
  border: 0.4rem solid #475df1;
}
/*스크롤바 뒷 배경 */
.code-scroll-wrap::-webkit-scrollbar-track {
  background-color: #dadada;
  border-radius: 4rem;
}