/* 기본 유틸리티 스타일 */
/*사용 컬러 */
/* CSS 변수 정의 */
:root {
	
  --font-size-font-size-12: 12px;
  --font-size-font-size-14: 14px;
  --font-size-font-size-15: 15px;
  --font-size-font-size-16: 16px;
  --font-size-font-size-18: 18px;
  --font-size-font-size-20: 20px;
  --font-size-font-size-30: 30px;
  
  
/*일반 컬러 */
  --wb-color-primary: #007bff;
  --wb-color-secondary: #6c757d;
  --wb-color-success: #28a745;
  --wb-color-danger: #dc3545;
  --wb-color-warning: #ffc107;
  --wb-color-info: #17a2b8;
  --wb-color-light: #f8f9fa;
  --wb-color-dark: #343a40;

/*배경 컬러 */
  --wb-bg-primary: #007bff; 
  --wb-bg-secondary: #6c757d;
  --wb-bg-success: #28a745;
  --wb-bg-danger: #dc3545;
  --wb-bg-warning: #ffc107;
  --wb-bg-info: #17a2b8;
  --wb-bg-light: #f8f9fa;
  --wb-bg-dark: #343a40;

  /* 일반 컬러 */
  --blue-color-01: #2187ff;
  --blue-color-02: #ddedff;
  --blue-color-03: #a8d0ff;
  --blue-color-04: #005dcaff;
  --blue-color-05: #f2f6fc;
  --blue-color-06: #e0ebff;
  --green-color-01: #eafff7;
  --green-color-02: #b3eedd;
  --red-color-01: #ffe2e0;
  --red-color-02: #ffc3bf;
  --gray-color-01: #757576;
  --gray-color-02: #5c5c5c;
  --gray-color-03: #1f1f1f;
  --gray-color-04: #919191;
  --green-color-03: #01b052;
  --green-color-04: #00835c;
  --blue-color-07: #1f355d;
  --gray-color-05: #dadada;
  --default-color: #1e1e1e;
  --white: #ffffff;
  --red-color-03: #d90000;
  --gray-color-06: #f1f1f1;
  --green-color-05: #03a700;
  --red-color-04: #9e0000;
  --sapaia-color-01: #309180;
  --blue-color-08: #5176a4;
  --yellow-color-02: #ffe500;
  --yellow-color-01: #fff4bc;
  --green-color-06: #eafff7;
  --green-color-07: #b3eedd;
  --sapaia-color-02: #c2dfdc;
  --sapaia-color-03: #17bab1;
  --purple-color-01: #e6d3ff;
  --purple-color-02: #9747ff;
  --yellow-color-03: #7f7300;
  --gray-color-07: #919191;
  
  /* 커스텀 */
  --wb-bg-ta-tt: #1f355d; /* table 테이블 타이틀 title */
  --wb-cl-ta-tt: #fff; /* 테이블 타이틀 title */
  --wb-bg-td-hd: #5176a4; /* 테이블 백그라운드 해더 배경 */
  --wb-cl-td-hd: #fff; /* 테이블 글자색 */
  --wb-td-line: var(--gray-color-05); /* 테이블 라인 섹상*/
  --color-default-color: var(default-color);
  /*버튼 */
  --wb-bt-0 : #00835c; /*그린*/
  --wb-bt-1 : #2187ff; /*하늘*/
  --wb-bt-2 : #005dca; /*파랑*/
  --wb-bt-3 : #1f355d; /*남색*/
  --wb-bt-4 : #dadada; /*그린*/
  --wb-bt-5 : #919191; /*그린*/
  
  
  
}
/* 기본 유틸리티 스타일 */
/* 사용 컬러 */ 
.wb-color-primary { color: var(--wb-color-primary); } /* 기본 컬러 */
.wb-color-secondary { color: var(--wb-color-secondary); } /* 보조 컬러 */
.wb-color-success { color: var(--wb-color-success); } /* 성공 컬러 */
.wb-color-danger { color: var(--wb-color-danger); } /* 위험 컬러 */
.wb-color-warning { color: var(--wb-color-warning); } /* 경고 컬러 */
.wb-color-info { color: var(--wb-color-info); } /* 정보 컬러 */
.wb-color-light { color: var(--wb-color-light); } /* 라이트 컬러 */
.wb-color-dark { color: var(--wb-color-dark); } /* 다크 컬러 */
.wb-bg-primary { background-color: var(--wb-bg-primary); } /* 기본 배경색 */
.wb-bg-secondary { background-color: var(--wb-bg-secondary); } /* 보조 배경색 */
.wb-bg-success { background-color: var(--wb-bg-success); } /* 성공 배경색 */
.wb-bg-danger { background-color: var(--wb-bg-danger); } /* 위험 배경색 */
.wb-bg-warning { background-color: var(--wb-bg-warning); } /* 경고 배경색 */
.wb-bg-info { background-color: var(--wb-bg-info); } /* 정보 배경색 */
.wb-bg-light { background-color: var(--wb-bg-light); } /* 라이트 배경색 */
.wb-bg-dark { background-color: var(--wb-bg-dark); } /* 다크 배경색 */





/* 너비 설정 */
.wb-w-10 { width: 10px; } /* 10픽셀 너비 */
.wb-w-15 { width: 15px; } /* 15픽셀 너비 */
.wb-w-20 { width: 20px; } /* 20픽셀 너비 */
.wb-w-30 { width: 30px; } /* 30픽셀 너비 */
.wb-w-40 { width: 40px; } /* 40픽셀 너비 */
.wb-w-50 { width: 50px; } /* 50픽셀 너비 */
.wb-w-60 { width: 60px; } /* 60픽셀 너비 */
.wb-w-70 { width: 70px; } /* 70픽셀 너비 */
.wb-w-80 { width: 80px; } /* 80픽셀 너비 */
.wb-w-90 { width: 90px; } /* 90픽셀 너비 */
.wb-w-100 { width: 100px; } /* 100픽셀 너비 */
.wb-w-150 { width: 150px; } /* 150픽셀 너비 */
.wb-w-200 { width: 200px; } /* 200픽셀 너비 */
.wb-w-250 { width: 250px; } /* 250픽셀 너비 */
.wb-w-300 { width: 300px; } /* 300픽셀 너비 */
.wb-w-350 { width: 350px; } /* 350픽셀 너비 */
.wb-w-357 { width: 357px; } /* 350픽셀 너비 */
.wb-w-400 { width: 400px; } /* 400픽셀 너비 */
.wb-w-450 { width: 450px; } /* 450픽셀 너비 */
.wb-w-500 { width: 500px; } /* 500픽셀 너비 */
.wb-w-550 { width: 550px; } /* 550픽셀 너비 */
.wb-w-580 { width: 580px; } /* 550픽셀 너비 */
.wb-w-590 { width: 590px; } /* 550픽셀 너비 */
.wb-w-600 { width: 600px; } /* 600픽셀 너비 */
.wb-w-650 { width: 650px; } /* 650픽셀 너비 */
.wb-w-700 { width: 700px; } /* 700픽셀 너비 */
.wb-w-750 { width: 750px; } /* 750픽셀 너비 */
.wb-w-800 { width: 800px; } /* 800픽셀 너비 */
.wb-w-850 { width: 850px; min-width: 850px; } /* 850픽셀 너비 */
.wb-w-900 { width: 900px; } /* 900픽셀 너비 */
.wb-w-950 { width: 950px; } /* 950픽셀 너비 */
.wb-w-1000 { width: 1000px; } /* 1000픽셀 너비 */
.wb-w-main { width: 1280px; } /* 1000픽셀 너비 */


/* 너비 설정 (퍼센트) */
.wb-w-3p { width: 3%; } /* 3% 너비 */
.wb-w-5p { width: 5%; } /* 5% 너비 */
.wb-w-10p { width: 10%; } /* 10% 너비 */
.wb-w-15p { width: 15%; } /* 15% 너비 */
.wb-w-20p { width: 20%; } /* 20% 너비 */
.wb-w-25p { width: 25%; } /* 25% 너비 */
.wb-w-30p { width: 30%; } /* 30% 너비 */
.wb-w-40p { width: 40%; } /* 40% 너비 */
.wb-w-50p { width: 50%; } /* 50% 너비 */
.wb-w-60p { width: 60%; } /* 60% 너비 */
.wb-w-65p { width: 65%; } /* 65% 너비 */
.wb-w-70p { width: 70%; } /* 70% 너비 */
.wb-w-80p { width: 80%; } /* 80% 너비 */
.wb-w-90p { width: 90%; } /* 90% 너비 */
.wb-w-100p { width: 100%; } /* 100% 너비 */


/* 높이 설정 */
.wb-h-3 { height: 3px; } /* 3픽셀 높이 */
.wb-h-5 { height: 5px; } /* 3픽셀 높이 */
.wb-h-10 { height: 10px; } /* 10픽셀 높이 */
.wb-h-20 { height: 20px; } /* 20픽셀 높이 */
.wb-h-30 { height: 30px; } /* 30픽셀 높이 */
.wb-h-40 { height: 40px; } /* 40픽셀 높이 */
.wb-h-50 { height: 50px; } /* 50픽셀 높이 */
.wb-h-100 { height: 100px; } /* 100픽셀 높이 */
.wb-h-105 { height: 105px; } /* 100픽셀 높이 */
.wb-h-110 { height: 110px; } /* 110픽셀 높이 */
.wb-h-115 { height: 115px; } /* 115픽셀 높이 */
.wb-h-150 { height: 150px; } /* 150픽셀 높이 */
.wb-h-200 { height: 200px; } /* 200픽셀 높이 */
.wb-h-250 { height: 250px; } /* 250픽셀 높이 */
.wb-h-300 { height: 300px; } /* 300픽셀 높이 */
.wb-h-400 { height: 400px; } /* 400픽셀 높이 */
.wb-h-500 { height: 500px; } /* 500픽셀 높이 */
.wb-h-600 { height: 600px; } /* 600픽셀 높이 */
.wb-h-700 { height: 700px; } /* 700픽셀 높이 */
.wb-h-800 { height: 800px; } /* 800픽셀 높이 */
.wb-h-900 { height: 900px; } /* 900픽셀 높이 */
.wb-h-1000 { height: 1000px; } /* 1000픽셀 높이 */



/* 높이 설정 (퍼센트) */
.wb-h-10p { height: 10%; } /* 10% 높이 */
.wb-h-20p { height: 20%; } /* 20% 높이 */
.wb-h-30p { height: 30%; } /* 30% 높이 */
.wb-h-40p { height: 40%; } /* 40% 높이 */
.wb-h-50p { height: 50%; } /* 50% 높이 */
.wb-h-60p { height: 60%; } /* 60% 높이 */
.wb-h-70p { height: 70%; } /* 70% 높이 */
.wb-h-80p { height: 80%; } /* 80% 높이 */
.wb-h-90p { height: 90%; } /* 90% 높이 */
.wb-h-100p { height: 100%; } /* 100% 높이 */


/* 패딩 설정 */
.wb-p--1 { padding: -1px; } /* 1픽셀 패딩 */
.wb-p--5 { padding: -5px; } /* 1픽셀 패딩 */

.wb-p-1 { padding: 1px; } /* 1픽셀 패딩 */
.wb-p-5 { padding: 5px; } /* 5픽셀 패딩 */
.wb-p-10 { padding: 10px; } /* 10픽셀 패딩 */
.wb-p-15 { padding: 15px; } /* 15픽셀 패딩 */
.wb-p-20 { padding: 20px; } /* 20픽셀 패딩 */
.wb-p-25 { padding: 25px; } /* 25픽셀 패딩 */
.wb-p-30 { padding: 30px; } /* 30픽셀 패딩 */
.wb-p-35 { padding: 35px; } /* 35픽셀 패딩 */
.wb-p-40 { padding: 40px; } /* 40픽셀 패딩 */
.wb-p-45 { padding: 45px; } /* 45픽셀 패딩 */
.wb-p-50 { padding: 50px; } /* 50픽셀 패딩 */

.wb-pl-1 {padding-left: 1px; } /* 1픽셀 패딩 */
.wb-pl-3 {padding-left: 3px; } /* 1픽셀 패딩 */





/* 마진 설정 - 전체 */
.wb-m-1 { margin: 1px; } /* 모든 방향에 1픽셀 마진 */
.wb-m-2 { margin: 2px; } /* 모든 방향에 2픽셀 마진 */
.wb-m-3 { margin: 3px; } /* 모든 방향에 3픽셀 마진 */
.wb-m-4 { margin: 4px; } /* 모든 방향에 4픽셀 마진 */
.wb-m-5 { margin: 5px; } /* 모든 방향에 5픽셀 마진 */
.wb-m-10 { margin: 10px; } /* 모든 방향에 10픽셀 마진 */
.wb-m-15 { margin: 15px; } /* 모든 방향에 15픽셀 마진 */
.wb-m-20 { margin: 20px; } /* 모든 방향에 20픽셀 마진 */
.wb-m-25 { margin: 25px; } /* 모든 방향에 25픽셀 마진 */

/* 마진 설정 - 왼쪽 */
.wb-ml-5 { margin-left: 5px; } /* 왼쪽에 5픽셀 마진 */
.wb-ml-10 { margin-left: 10px; } /* 왼쪽에 10픽셀 마진 */
.wb-ml-15 { margin-left: 15px; } /* 왼쪽에 15픽셀 마진 */
.wb-ml-20 { margin-left: 20px; } /* 왼쪽에 20픽셀 마진 */
.wb-ml-25 { margin-left: 25px; } /* 왼쪽에 25픽셀 마진 */

/* 마진 설정 - 오른쪽 */
.wb-mr-5 { margin-right: 5px; } /* 오른쪽에 5픽셀 마진 */
.wb-mr-10 { margin-right: 10px; } /* 오른쪽에 10픽셀 마진 */
.wb-mr-15 { margin-right: 15px; } /* 오른쪽에 15픽셀 마진 */
.wb-mr-20 { margin-right: 20px; } /* 오른쪽에 20픽셀 마진 */
.wb-mr-25 { margin-right: 25px; } /* 오른쪽에 25픽셀 마진 */

/* 마진 설정 - 위 */
.wb-mt-5 { margin-top: 5px; } /* 위쪽에 5픽셀 마진 */
.wb-mt-10 { margin-top: 10px; } /* 위쪽에 10픽셀 마진 */
.wb-mt-15 { margin-top: 15px; } /* 위쪽에 15픽셀 마진 */
.wb-mt-20 { margin-top: 20px; } /* 위쪽에 20픽셀 마진 */
.wb-mt-25 { margin-top: 25px; } /* 위쪽에 25픽셀 마진 */

/* 마진 설정 - 아래 */
.wb-mb-5 { margin-bottom: 5px; } /* 아래쪽에 5픽셀 마진 */
.wb-mb-10 { margin-bottom: 10px; } /* 아래쪽에 10픽셀 마진 */
.wb-mb-15 { margin-bottom: 15px; } /* 아래쪽에 15픽셀 마진 */
.wb-mb-20 { margin-bottom: 20px; } /* 아래쪽에 20픽셀 마진 */
.wb-mb-25 { margin-bottom: 25px; } /* 아래쪽에 25픽셀 마진 */

/* 가시성 */
.wb-visible { visibility: visible; } /* 요소를 보이게 설정 */
.wb-hidden { visibility: hidden; } /* 요소를 숨김 처리 */

/* 위치 설정 */
.wb-relative { position: relative; } /* 상대 위치 */
.wb-absolute { position: absolute; } /* 절대 위치 */
.wb-fixed { position: fixed; } /* 고정 위치 */
.wb-sticky { position: sticky; } /* 스크롤에 따라 고정 위치 */

/* 디스플레이 유형 */
.wb-none { display: none; } /* 디스플레이 none */
.wb-block { display: block; } /* 블록 레벨 디스플레이 */
.wb-inline { display: inline; } /* 인라인 디스플레이 */
.wb-inline-block { display: inline-block; } /* 인라인-블록 디스플레이 */
.wb-flex { display: flex; } /* 플렉스 박스 디스플레이 */

/* 텍스트 정렬 inputbox 적용 안됨 */
.wb-text-left { text-align: left !important; } /* 텍스트를 왼쪽으로 정렬 */
.wb-text-center {text-align: center !important;  /* 가로 중앙 정렬 */ } /* 텍스트를 가운데로 정렬 */
.wb-text-right { text-align: right !important; } /* 텍스트를 오른쪽으로 정렬 */
.wb-text-justify { text-align: justify; } /* 텍스트를 양쪽 정렬 */
.wb-text-center1 {display: flex;  justify-content: space-around;    align-items: center; /* 가로 중앙 정렬 */ } /* 텍스트를 가운데로 정렬 */


/* 수직 정렬 */
.wb-align-top { vertical-align: top; } /* 요소의 상단을 기준으로 정렬 */
.wb-align-middle { vertical-align: middle; } /* 요소의 중앙을 기준으로 정렬 */
.wb-align-bottom { vertical-align: bottom; } /* 요소의 하단을 기준으로 정렬 */

/* 테이블 */
.wb-table {  border-spacing: 0px; /* 테이블 셀 간 간격을 0으로 설정 */ width: 100%; border: 0px solid transparent; /* 테이블 외곽 테두리를 투명하게 설정 */ }
.wb-table td {background-color: var(--white); padding: 5px;text-align:center;border-bottom: 1px solid var(--wb-td-line);colspan=1;}
.wb-table th {background-color: var(--white); padding: 5px;text-align:center;border-bottom: 1px solid var(--wb-td-line);colspan=1;}

.wb-table tbody th {background-color: var(--wb-bg-td-hd); color: var(--wb-cl-td-hd) ; }

.wb-table thead th {background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ;}
.wb-table .head{border-top: 3px solid var(--wb-bg-ta-tt) /* 첫 번째 셀에만 3px 두께의 빨간색 배경 지정 */}
.wb-table thead td {border-bottom: 0px solid var(--wb-td-line);}
.wb-table tfoot th {border-bottom: 0px solid var(--wb-td-line);background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ;  }


.wb-head-th {background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ;}

/*배경 깔게용*/
 .wb-bg-1 { background: var(--blue-color-05, #F2F6FC);padding: 20px; border-radius: 10px;}
 .wb-bg-2 { background: var(--blue-color-05, #F2F6FC);padding: 10px; border-radius: 10px;}
 
/* 테이블 */
.wb-table-1 {border-spacing: 0px; /* 테이블 셀 간 간격을 0으로 설정 */ width: 100%; border: 0px solid transparent; /* 테이블 외곽 테두리를 투명하게 설정 */ }
.wb-table-1 td {background-color: var(--white); padding: 5px;text-align:center;border-bottom: 1px solid var(--wb-td-line); border-right: 1px solid var(--wb-td-line); /* 오른쪽에 1px 테두리 */}
.wb-table-1 th {background-color: var(--white); padding: 5px;text-align:center;border-bottom: 1px solid var(--wb-td-line); border-right: 1px solid var(--wb-td-line); /* 오른쪽에 1px 테두리 */}

.wb-table-1 tbody th {background-color: var(--wb-bg-td-hd); color: var(--wb-cl-td-hd) ; }

.wb-table-1 thead th {background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ;}

.wb-table-1 thead td {border-bottom: 0px solid var(--wb-td-line);}
.wb-table-1 tfoot th {border-bottom: 0px solid var(--wb-td-line);background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ;  }


.wb-table-2 {border-spacing: 0px; /* 테이블 셀 간 간격을 0으로 설정 */ width: 100%; border: 0px solid transparent; /* 테이블 외곽 테두리를 투명하게 설정 */ }
.wb-table-2 td {background-color: var(--white); padding: 5px;text-align:center;border-bottom: 1px solid var(--wb-td-line); border-right: 1px solid var(--wb-td-line);border-left: 1px solid var(--wb-td-line);}
.wb-table-2 th {background-color: var(--white); padding: 5px;text-align:center;border-bottom: 1px solid var(--wb-td-line);}

.wb-table-2 tbody th {background-color: var(--wb-bg-td-hd); color: var(--wb-cl-td-hd) ; }

.wb-table-2 thead th {background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ;}

.wb-table-2 thead td {border-bottom: 0px solid var(--wb-td-line);}
.wb-table-2 tfoot th {border-bottom: 0px solid var(--wb-td-line);background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ;  }


.wb-table-3 {border-spacing: 0px; /* 테이블 셀 간 간격을 0으로 설정 */ width: 100%; border: 0px solid transparent; /* 테이블 외곽 테두리를 투명하게 설정 */ }
.wb-table-3 td {background-color: var(--white); padding: 5px;text-align:center;border-bottom: 1px solid var(--wb-td-line); border-right: 1px solid var(--wb-td-line);border-left: 1px solid var(--wb-td-line);}
.wb-table-3 th {background-color: var(--white); padding: 5px;text-align:center;border-bottom: 1px solid var(--wb-td-line);}

.wb-table-3  th {background-color: var(--wb-bg-td-hd); color: var(--wb-cl-td-hd) ; }

.wb-table-3 thead th {background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ;}

.wb-table-3 thead td {border-bottom: 0px solid var(--wb-td-line);}
.wb-table-3 tfoot th {border-bottom: 0px solid var(--wb-td-line);background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ;  }



/* 테이블 백그라운드 */
.wb-bg-ta-tt{background-color: var(--wb-bg-ta-tt); color: var(--wb-cl-ta-tt) ; }
.wb-bg-td-hd{background-color: var(--wb-bg-td-hd); color: var(--wb-cl-td-hd) ; }



/* 버튼 */
.wb-b1{border-color:var(--wb-bt-1); color: #fff;  background-color: var(--wb-bt-1);  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));}
.wb-b2{border-color:var(--wb-bt-2); color: #fff;  background-color: var(--wb-bt-2);  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));}
.wb-b3{border-color:var(--wb-bt-3); color: #fff;  background-color: var(--wb-bt-3);  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));}
	

/* 폰트 설정 */
.wb-font-1 { font-size: 1px; } /* 작은 폰트 */
.wb-font-12 { font-size: 12px; } /* 12 폰트 */
.wb-font-13 { font-size: 13px; } /* 13 폰트 */
.wb-font-14 { font-size: 14px; } /* 14 폰트 */
.wb-font-30 { font-size: 30px; } /* 30 폰트 */
.wb-font-40 { font-size: 40px; } /* 40 폰트 */
.wb-font-small { font-size: 10px; } /* 작은 폰트 */
.wb-font-medium { font-size: 12px; } /* 중간 폰트 */
.wb-font-large { font-size: 14px; } /* 큰 폰트 */
.wb-font-xlarge { font-size: 20px; } /* 매우 큰 폰트 */

/* 글꼴 두께 설정 */
.wb-font-light { font-weight: 300; } /* 얇은 글꼴 */
.wb-font-normal { font-weight: 400; } /* 보통 글꼴 */
.wb-font-bold { font-weight: 700; } /* 굵은 글꼴 */

/* 테두리 설정 */
.wb-border { border: 1px solid #ccc; } /* 기본 테두리 */
.wb-border-none { border: none; } /* 테두리 없음 */
.wb-border-top { border-top: 1px solid #ccc; } /* 상단 테두리 */
.wb-border-right { border-right: 1px solid #ccc; } /* 오른쪽 테두리 */
.wb-border-bottom { border-bottom: 1px solid #ccc; } /* 하단 테두리 */
.wb-border-left { border-left: 1px solid #ccc; } /* 왼쪽 테두리 */

/* 테두리 반경 설정 */
.wb-rounded { border-radius: 4px; } /* 기본 반경 */
.wb-rounded-none { border-radius: 0; } /* 반경 없음 */
.wb-rounded-small { border-radius: 2px; } /* 작은 반경 */
.wb-rounded-large { border-radius: 8px; } /* 큰 반경 */

/* 배경 이미지 설정 */
.wb-bg-cover { background-size: cover; } /* 배경 이미지 커버 */
.wb-bg-contain { background-size: contain; } /* 배경 이미지 포함 */
.wb-bg-center { background-position: center; } /* 배경 이미지 중앙 배치 */
.wb-bg-no-repeat { background-repeat: no-repeat; } /* 배경 이미지 반복 없음 */

/* 오버플로우 설정 */
.wb-overflow-hidden { overflow: hidden; } /* 오버플로우 숨김 */
.wb-overflow-scroll { overflow: scroll; } /* 오버플로우 스크롤 */
.wb-overflow-auto { overflow: auto; } /* 오버플로우 자동 */

/* 투명도 설정 */
.wb-opacity-0 { opacity: 0; } /* 투명도 0% */
.wb-opacity-50 { opacity: 0.5; } /* 투명도 50% */
.wb-opacity-100 { opacity: 1; } /* 투명도 100% */

/* 커서 설정 */
.wb-cursor-pointer { cursor: pointer; } /* 포인터 커서 */
.wb-cursor-default { cursor: default; } /* 기본 커서 */
.wb-cursor-text { cursor: text; } /* 텍스트 커서 */

/* 플렉스박스 정렬 설정 */
.wb-flex-center { display: flex; justify-content: center; align-items: center; } /* 중앙 정렬 */
.wb-flex-between { display: flex; justify-content: space-between; } /* 양쪽 정렬 */
.wb-flex-around { display: flex; justify-content: space-around; } /* 균등 정렬 */

/* 플로트 설정 */
.wb-float-left { float: left; } /* 왼쪽 플로트 */
.wb-float-right { float: right; } /* 오른쪽 플로트 */
.wb-clearfix::after { content: ""; display: table; clear: both; } /* 플로트 클리어링 */

/* 변환 설정 */
.wb-transform-rotate-45 { transform: rotate(45deg); } /* 45도 회전 */
.wb-transform-scale-1-5 { transform: scale(1.5); } /* 1.5배 확대 */
.wb-transform-translate-x-50 { transform: translateX(50px); } /* X축으로 50픽셀 이동 */

/* 애니메이션 설정 */
.wb-transition { transition: all 0.3s ease; } /* 기본 전환 */
.wb-transition-fast { transition: all 0.1s ease; } /* 빠른 전환 */
.wb-transition-slow { transition: all 0.5s ease; } /* 느린 전환 */

/* 그림자 설정 */
.wb-shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* 기본 그림자 */
.wb-shadow-none { box-shadow: none; } /* 그림자 없음 */
.wb-shadow-large { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* 큰 그림자 */

/* Z-Index 설정 */
.wb-z-0 { z-index: 0; } /* Z-Index 0 */
.wb-z-10 { z-index: 10; } /* Z-Index 10 */
.wb-z-20 { z-index: 20; } /* Z-Index 20 */
.wb-z-30 { z-index: 30; } /* Z-Index 30 */



.wb-center-center{display: flex;flex-wrap: wrap;align-content: space-around;justify-content: space-between;}
.wb-center-left {flex: 1;display: flex;justify-content: flex-start;} /* 왼쪽 정렬 */
.wb-center-right {flex: 1;display: flex;justify-content: flex-end;} /* 오른쪽 정렬 */
.wb-center-center1 {display: flex;  justify-content: space-around;    align-items: center; /* 가로 중앙 정렬 */ } /* 텍스트를 가운데로 정렬 */
.wb-center-center-around {display: flex;flex-wrap: wrap;align-content: space-around;justify-content: space-around;}

/* 240717 wb_10 즐겨찾기 icon 텍스트 */
.wb-ellipsis-60 {
	white-space: nowrap;
	width: 60px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
}


.wb-font-m {
      font-family: "Noto Sans CJK KR-Medium", Helvetica;
    }
.wb-font-b {
      font-family: "Noto Sans CJK KR-Bold", Helvetica;
   }
.wb-font-15 {
      font-family: "Noto Sans CJK KR-Bold", Helvetica;
      color:  var(--blue-color-04);
      font-size: var(--font-size-font-size-15);
    }


/* 240529 sd017 - content 영역 css 추가 */
.wb-content {
   margin-right: 100px;
   margin-left: 100px;
   padding: 10px;
}

/* 240530 sd017 - li css 추가 */
.wb-li-none {
	list-style-type: none;
}


/* 반응형 디자인 */
@media (max-width: 600px) {
  .wb-sm-hidden { display: none; } /* 작은 화면에서 숨김 */
  .wb-sm-block { display: block; } /* 작은 화면에서 블록 디스플레이 */
  .wb-sm-inline { display: inline; } /* 작은 화면에서 인라인 디스플레이 */
  .wb-sm-inline-block { display: inline-block; } /* 작은 화면에서 인라인-블록 디스플레이 */
}

@media (min-width: 601px) and (max-width: 960px) {
  .wb-md-hidden { display: none; } /* 중간 화면에서 숨김 */
  .wb-md-block { display: block; } /* 중간 화면에서 블록 디스플레이 */
  .wb-md-inline { display: inline; } /* 중간 화면에서 인라인 디스플레이 */
  .wb-md-inline-block { display: inline-block; } /* 중간 화면에서 인라인-블록 디스플레이 */
}

@media (min-width: 961px) {
  .wb-lg-hidden { display: none; } /* 큰 화면에서 숨김 */
  .wb-lg-block { display: block; } /* 큰 화면에서 블록 디스플레이 */
  .wb-lg-inline { display: inline; } /* 큰 화면에서 인라인 디스플레이 */
  .wb-lg-inline-block { display: inline-block; } /* 큰 화면에서 인라인-블록 디스플레이 */
}

/* 240617 sd013 - dropdownlist readonly */
.k-dropdownlist[aria-readonly="true"] {
    background-color: #e0ebff;
}


[data-font-size-mode="pc"] {
  --font-size-font-size-12: 12px;
  --font-size-font-size-14: 14px;
  --font-size-font-size-15: 15px;
  --font-size-font-size-16: 16px;
  --font-size-font-size-18: 18px;
  --font-size-font-size-20: 20px;
  --font-size-font-size-30: 30px;
}

[data-font-size-mode="mobile"] {
  --font-size-font-size-12: 10px;
  --font-size-font-size-14: 12px;
  --font-size-font-size-15: 13px;
  --font-size-font-size-16: 14px;
  --font-size-font-size-18: 16px;
  --font-size-font-size-20: 18px;
  --font-size-font-size-30: 20px;
}

@font-face {
  font-family: "Noto Sans CJK KR-Medium";
  src: url("/wadi/fonts/notosanscjkkr-medium.otf")
    format("opentype");
}

@font-face {
  font-family: "Noto Sans CJK KR-Bold";
  src: url("/wadi/fonts/notosanscjkkr-bold.otf")
    format("opentype");
}

/* scrollbar */
.wb-scrollbar ::-webkit-scrollbar {width: 5px; height: 8px;}
.wb-scrollbar ::-webkit-scrollbar-track {background: #fff;}
.wb-scrollbar ::-webkit-scrollbar-thumb {background: #B0D4FF; border-radius: 5px;}


/* scrollbar 모두 적용*/
::-webkit-scrollbar {width: 5px; height: 8px;}
::-webkit-scrollbar-track {background: #fff;}
::-webkit-scrollbar-thumb {background: #B0D4FF; border-radius: 5px;}


 /*div { border: 1px solid #ff0000; } */