@charset "utf-8";


/* 정렬 */
.flex{display: flex;}
.justify-con-center{justify-content:center;gap: 1rem;}
.justify-con-flex-end{justify-content:flex-end;}
.justify-con-space-between{justify-content: space-between;}
.flex-center{display: flex;justify-content: space-evenly;}
.flex-center-center{display: flex;justify-content: space-evenly;flex-direction: column;}
.flex-left{display: flex;}
.flex-right{display: flex;justify-content: flex-end;}
.flex-wrap{flex-wrap: wrap;}
.flex-align{
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}
.flex-align .btnBox{
  display: flex;
  margin-bottom: 2%;
  margin-top: -6%;
  justify-content: flex-end;
  position: absolute;
  right: 6%;
}
.flex-align .search{
  display: flex;
  justify-content: space-evenly;
}
.flex-side{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.w100{width:100%;}
.w80{width:80%;}
.w68{width:68%;}
.w50{width:50%;}
.w30{width:30%;}
.w33{width:33%;}
.w25{width:25%;}

/* 기본 스타일 */
#s__header header{border-top: 1px solid #e8e8e8}
.pc-menu{color:#333333;}

/* 체크박스 */

.s__checkbox,
.s__radio {
  display: flex;
  align-items: center;
}
.s__checkbox input + label {
  width: 24px;
  height: 24px;
  display: block;
  background: url(../image/icon_checkbox_off.svg);
  background-size: contain;
  cursor: pointer;
}
.s__checkbox input + label + label {
  margin-left: 8px;
  cursor: pointer;
}
.s__checkbox input:checked + label {
  background: url(../image/icon_checkbox_on.svg);
  background-size: contain;
}
.s__checkbox + .s__checkbox {
  margin-top: 8px;
}
/* 체크박스 끝 */

/* 라디오 */

.s__radio input + label {
  width: 24px;
  height: 24px;
  display: block;
  background: url(/images/openlab/icon_radio_off.svg);
  background-size: contain;
  cursor: pointer;
}
.s__radio input:disabled + label {
  background: url(/images/openlab/icon_radio_off_disabled.svg);
  background-size: contain;
}
.s__radio input:checked + label {
  background: url(/images/openlab/icon_radio_on.svg);
  background-size: contain;
}
.s__radio input:checked:disabled + label {
  background: url(/images/openlab/icon_radio_on_disabled.svg);
  background-size: contain;
}
.s__radio input + label + label {
  font-size: 16px;
  cursor: pointer;
  margin-left: 8px;
}

/* 라디오 끝 */

/* 인풋 */
.s__input {
  display: flex;
  height: 43px;
  padding: 10px 10px 10px 16px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  background-color: #fff;
  margin-right: 8px;
}
.s__input.s__input-full {
  width: 100%;
}
.s__textarea {
  padding: 10px 10px 10px 16px;
  border: 1px solid #c5c5c5;
  width: 100%;
  border-radius: 4px;
  resize: none;
}

/* 인풋 끝 */

/* 셀렉트 */

.s__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 10px 10px 10px 16px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  min-width: 130px;
  margin-right: 8px;
  height: 43px;
  background: url(/images/openlab/icon_down_arrow.svg) no-repeat 92% 50%/15px auto;
  background-color: #fff;
}

/* 셀렉트 끝 */

/* 간격 */
.margin64 {
  margin: 64px 0;
}
.margin48 {
  margin: 48px 0;
}
.margin24 {
  margin: 24px 0;
}
.mb40 {
  margin-bottom: 40px;
}
.mr10{margin-right:10px;}

.fr{display: flex; flex-direction: row; justify-content: flex-end;}
.fl{display: flex; flex-direction: row; justify-content: flex-start;}

.indent {
  text-indent: 8px;
}
.pc-only {
  display: block;
}
.mobile-only {
  display: none;
}
.sub-page-title-wrap {
  margin-top: 80px;
  height: 160px;
  background: url(/images/img_sub_page_title.png) no-repeat 50% 50%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sub-page-title {
  color: #fff;
  text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
  font-size: 36px;
  font-style: normal;
  font-weight: 800;
  margin-bottom: 6px;
}
.sub-page-sub-title {
  color: #fff;
  text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  text-align: center;
  padding: 0 16px;
}
.sub-page .s__container {
  width: 100%;
}
.sub-page {
  margin-top: 40px;
  /*padding-bottom: 150px;*/
}
/* 레이아웃01 */
.rayout01 {
  display: flex;
  flex-direction: row;
}
.rayout01 > div {
  width: 50%;
}
.rayout01 > div:nth-child(2) p {
  color: #191919;
  font-style: normal;
  font-weight: 400;
}
section p strong {
  font-weight: 700;
  color: var(--strong);
}

/* 레이아웃2 */
.rayout02 {
  margin-bottom: 80px;
  position: relative;
}
.rayout02:last-child {
  margin-bottom: 0;
}
/* 레이아웃3 */
.rayout03 > div {
  border-radius: 8px;
  background: #f9fafc;
  padding: 24px 34px;
  margin-bottom: 16px;
}
.rayout03 > div:last-child {
  margin-bottom: 0;
}
.rayout03 > div > span {
  color: #191919;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  opacity: 0.5;
  display: block;
  margin-bottom: 8px;
}
.rayout03 > div > .rayout03__list02 {
  margin-top: 16px;
}
.rayout03 > div > p {
  color: #191919;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.rayout03__list01 > li {
  color: #191919;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  list-style: disc;
  margin-left: 20px;
}
.rayout03__list02 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 16px;
}
.rayout03__list02 > li {
  display: flex;
  align-items: center;
  color: #191919;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  display: flex;
  padding: 24px 32px;
  background-color: #fff;
  border-radius: 8px;
}
.rayout03__list02 > li img {
  margin-right: 24px;
  width: 24px;
  height: 24px;
}
.rayout03__list02 > li.rayout03__list02-full {
  grid-column: span 2;
}

/* 레이아웃4 */
.rayout04 {
  display: grid;
  grid-template-columns: 1fr 4fr;
  column-gap: 16px;
  margin-bottom: 64px;
}
.rayout04 li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e1e1e1;
  padding: 64px;
}
.rayout04 li div {
  width: calc(100% - 100px);
}
.rayout04 li img {
  margin-right: 24px;
}

.rayout04 li:nth-child(1) {
  margin-top: 40px;
  padding-top: 0;
}

.rayout04__title {
  color: #191919;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 8px;
}
.rayout04__sub-title {
  color: #191919;
  font-style: normal;
  font-weight: 400;
  line-height: 31px;
  opacity: 0.5;
}
/* 타이틀01 */
.title01 p:nth-child(1) {
  color: var(--main, #346fdb);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 24px;
}
.title01 p:nth-child(2) {
  color: #666666;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
}
.table01 {
  border-top: 2px solid var(--main, #346fdb);
  display: flex;
  flex-wrap: wrap;
}
.table01 > div {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e1e4d4;
  width: 100%;
}
.table01 > div > div:nth-child(1),
.table01 > div > div:nth-child(3){
  background: #f9fafc;
  display: flex;
  width: 200px;
  font-size:1.7rem;
  padding: 20px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
/* .table01 > div > div:nth-child(2) {
  display: flex;
  padding: 10px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
} */
.table01 > div > div:nth-child(2),
.table01 > div > div:nth-child(4){
  display: flex;
  padding: 10px 16px;
  font-size:1.7rem;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  gap: 10px;
}
.table01 > .table01-half {
  width: 50%;
}
.table01 p {
  width: 100%;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.54px;
}
.table01 a {
  color: var(--strong);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
  font-size: 16px;
}
.table01, .table01 table{width: 100%;}
.table01 tr{
  border-bottom: 1px solid #e1e4d4;
}
.table01 th{
  background-color: var(--box-basic);
  padding: 2.2rem 0.5rem;
  width: 200px;
  text-align: center;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--primary);
}
.table01 td{
  padding: 1.1rem 1rem;
  color: #191919;
  font-style: normal;
  line-height: 150%;
  letter-spacing: -0.54px;
  font-size: 1.6rem;
}
/* 타이틀02 */
.title02 p:nth-child(1) {
  color: var(--main, #346fdb);
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  opacity: 0.3;
}
.title02 p:nth-child(2) {
  color: #666666;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  transform: translateY(-16px);
  margin-bottom: 40px;
}
.title02 + .right-btn-wrap {
  position: absolute;
  right: 0;
  top: 23px;
}
.table-accordion .right-btn-wrap {
  justify-content: flex-end;
  margin-bottom: 16px;
}
.btn-wrap{
  display: flex;
  justify-content: space-between;
}

.btn-btns {
  margin-top: 20px;
  margin-bottom: 40px; /* .mb40 클래스의 효과를 포함 */
  display: flex;
  justify-content: center;
}

.btn-main {
  /*font-size: 2rem;*/
  background-color: #346fdb; /* var(--main, #346fdb) 대신 기본 색상 직접 지정 */
  border: 1px solid #346fdb; /* 테두리 색상도 동일하게 지정 */
  color: #fff;
  /*padding: 15px 40px;*/ /* 버튼의 내부 여백 설정 */
  border-radius: 5px; /* 버튼의 모서리를 둥글게 */
  cursor: pointer; /* 마우스를 올렸을 때 포인터 커서 표시 */
  text-align: center; /* 버튼 텍스트 가운데 정렬 */
  text-decoration: none; /* 텍스트의 밑줄 제거 */
  transition: background-color 0.3s ease; /* 배경색 변경 시 애니메이션 효과 */
}

.btn-main:hover {
  background-color: #255bb5; /* 호버 시 배경색 변경 */
  border-color: #255bb5; /* 호버 시 테두리 색상도 변경 */
}


/* 타이틀3 */
.title03 p {
  color: #666666;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.72px;
  margin-bottom: 40px;
}




/* 타이틀3 */
.title03 p {
  color: #666666;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.72px;
  margin-bottom: 40px;
}

/* 테이블03 */
.table03 {
  border-top: 2px solid var(--main, #346fdb);
}
.table03 > div {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e1e4d4;
}

.table03 > div > div {
  display: flex;
  padding: 20px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
}
.table03 p {
  color: #191919;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
  text-align: center;
}
.table03 > div > div:nth-child(1),
.table03 > div:nth-child(1) > div {
  background: #f9fafc;
  display: flex;
  padding: 20px 16px;
}
.table03 > div > div:nth-child(1) {
  width: 200px;
}
/* 게시판 리셋 */
/* tui그리드 */
.tui-grid-container {
  font-family: "Pretendard", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.tui-grid-cell {
  background-color: #fff !important;
}
.tui-grid-header-area {
  border-color: #d4d9e4;
  border-top: none;
}
.tui-grid-content-area {
  border-top: 2px solid var(--main, #346fdb) !important;
}
.tui-grid-show-lside-area
  .tui-grid-lside-area
  .tui-grid-header-area
  .tui-grid-table {
  border-right-style: hidden;
}
.tui-grid-cell {
  border-color: #fff;
  border-bottom: 1px solid #d4d9e4;
}
.board01 .tui-grid-cell-header {
  border-right: 1px solid #f9fafc;
}
.tui-grid-no-scroll-y .tui-grid-border-line-bottom {
  display: none;
}
.tui-grid-border-line-top {
  display: none;
}
/* .tui-pagination .tui-last-child,
.tui-pagination .tui-next-is-ellip,
.tui-pagination .tui-first-child,
.tui-pagination .tui-prev-is-ellip {
  border-radius: 4px;
  background: #f9fafc;
  color: #8191a5;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.54px;
  font-size: 18px;
  margin-right: 6px;
} */
.tui-pagination .tui-page-btn.tui-next-is-ellip,
.tui-pagination .tui-page-btn.tui-prev-is-ellip {
  display: none;
}
.tui-pagination .tui-first,
.tui-pagination .tui-prev,
.tui-pagination .tui-next,
.tui-pagination .tui-last,
.tui-pagination .tui-prev-is-ellip,
.tui-pagination .tui-next-is-ellip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.tui-pagination .tui-ico-first,
.tui-pagination .tui-ico-prev,
.tui-pagination .tui-ico-next,
.tui-pagination .tui-ico-last,
.tui-pagination .tui-ico-ellip {
  zoom: 1.2;
}
.tui-pagination .tui-last-child {
  margin-right: 0;
}
.tui-pagination .tui-is-selected,
.tui-pagination strong {
  border-radius: 4px;
  background: var(--main, #346fdb);
  background-color: var(--main, #346fdb) !important;
  border: none !important;
  color: #fff;
}
.tui-pagination .tui-page-btn {
  border: none;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.54px;
  font-size: 18px;
  border-radius: 4px;
}


/*카탈로그 테이블*/
.catal-table-wrap{
  display: flex;
}
.catal-table{
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--main, #346fdb);
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid #e1e4d4;
}
.catal-table:nth-child(1){border-right: 1px solid #e1e4d4;}
.catal-table:nth-child(2){border-right: 1px solid #e1e4d4;}

.catal-table:first-child:nth-last-child(1){width:100%;border-right: 0px;}
.catal-table:first-child:nth-last-child(2),
.catal-table:first-child:nth-last-child(2)~li{width:50%;}
.catal-table:first-child:nth-last-child(3),
.catal-table:first-child:nth-last-child(3)~li{flex: 1;}

.catal-table > div{
  width: 100%;
  justify-content: center;
  display: flex;
}
.catal-table div > div{
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-bottom: 1px solid #e1e4d4;
  width: 100%;
  padding:10px;
  background: #f9fafc;
  font-size: 1.7rem;
}
.catal-table div ul{
  width: 100%;
  height: 200px;
  overflow-y: scroll;
}
.catal-table div ul li{
  padding: 0.8em 1.25em;
  border-bottom: 1px solid #e1e4d4;
  cursor: pointer;
  height: 5rem;
  display: flex;
  align-items: center;
}
.catal-table div ul li:hover{background-color:#f5f7f9}
.catal-table div ul li:last-child{border-bottom: 0px;}
.catal-table div ul li div{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.catal-table div ul li label{
  width:90%;
  text-align: center;
  cursor: pointer;
  font-size: 1.6rem;
}
.catal-table div ul li input[type="checkbox"]:checked + label{
  width:90%;
}

/* 검색바 */
.border-search02 {
  padding: 24px;
  background-color: #f9fafc;
  margin-bottom: 36px;
  border: 1px solid var(--border);
}
.border-search-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.border-search-box > li {
  display: flex;
  align-items: center;
  height: 60px;
}
.border-search-box li > div:nth-child(1) {
  width: 150px;
}
.border-search-box li > div:nth-child(1) label {
  font-size: 18px;
  display: block;
  text-align: center;
}
.border-search-box li > div:nth-child(2) {
  display: flex;
  width: calc(100% - 150px);
}

.search__half {
  width: 50%;
}
.search__full {
  width: 100%;
}
.border-search02 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.border-search02 select {
  padding: 10px 10px 10px 16px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  min-width: 130px;
  margin-right: 8px;
  height: 43px;
  background: url(/images/openlab/icon_down_arrow.svg) no-repeat 92% 50%/15px auto;
  background-color: #fff;
}
.border-search02 input {
  display: flex;
  height: 43px;
  padding: 10px 10px 10px 16px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  background-color: #fff;
  margin-right: 8px;
}
.border-btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}
.border-btn-box button + button {
  margin-left: 12px;
}
.search__input-full {
  width: 100%;
}
.search__innersearch {
  background-color: var(--main);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 8px;
  color: #fff;
}
.search__innersearch img {
  margin-right: 4px;
  width: 24px;
}
.search__innersearch-value {
  display: flex;
  align-items: center;
  margin-left: 16px;
  opacity: 0.6;
}
.search__innersearch-value p {
  margin-right: 8px;
  font-size: 16px;
}
.search__innersearch-value img {
  width: 24px;
}
.s__date-range {
  background: url(/images/openlab/icon_date.svg) no-repeat 97% 50%/18px auto;
}
/* 검색바 끝*/

/* 엑셀 */
.excel-button-container {
  float: right
}
.btn-excel {
  background-color: #2E8B57;
  height: 5rem;
  width: 100px;
  border-radius: 7px;
  padding: 8px;
  border: none;
  color: white;
  font-size: 16px;
  line-height: 3.5rem;
  cursor: pointer;
}
.btn-excel:hover {
  background-color: #256B44;
}
/* 엑셀 끝 */

/* 아코디언 테이블 */
.table-accordion {
  width: 100%;
  border-top: 2px solid var(--main, #346fdb);
}
.table-accordion .table-accordion {
  border-top: none;
}
.table-accordion tr {
  border-bottom: 1px solid #e1e4d4;
}
.table-accordion tr:nth-child(2n) {
  display: none;
}
.table-accordion .active-on .table-accrodion-arrow {
  transform: rotate(180deg);
}
.table-accordion .active-on + tr:nth-child(2n) {
  display: table-row;
}
.table-accordion th {
  background: #f9fafc;
  padding: 20px 16px;
  text-align: center;
  color: #191919;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
  font-size: 18px;
}
.table-accordion td {
  padding: 20px 16px;
  text-align: center;
  color: #191919;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -0.54px;
  font-size: 18px;
}
.table-accordion td > div,
.table-accordion th > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.prom-data-num {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.prom-data-num li {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.prom-data-num li:nth-child(4n) {
  border-right: none;
}
.prom-data-num .prom-data-title {
  border-bottom: 1px solid var(--border);
  background: #f9fafc;
  text-align: center;
  padding: 8px;
}
.accordion__input {
  width: 100%;
  display: flex;
  height: 43px;
  padding: 10px 10px 10px 16px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  background-color: #fff;
  font-size: 18px;
}
.prom-data-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}
.prom-data-wrap2 {
  grid-template-columns: 1fr !important;
}
.prom-data-wrap2.prom-data-wrap > div {
  border: none;
}
.prom-data-wrap > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-right: 1px solid var(--border);
}
.prom-data-wrap > div:nth-child(3) {
  border-right: none;
}
.prom-data-wrap > div > p {
  width: 100%;
  text-align: center;
}
.prom-data-wrap > div > a {
  color: #fff;
  background-color: var(--main);
  display: block;
  padding: 8px 16px;
  border-radius: 8px;
}
/* 아코디언 테이블 끝 */
/* 탭 */

.s__tab01-wrap {
  padding-top: 50px;
  position: relative;
}

.table01 + .s__tab01-wrap {
  margin-top: 48px;
}
.s__tab01-box .s__tab01-contents,
.s__tab01-box .s__tab01-more-btn {
  display: none;
}
.s__tab01-box.active-on .s__tab01-contents,
.s__tab01-box.active-on .s__tab01-more-btn {
  display: block;
}
.s__tab01-title {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  height: 50px;
  width: 150px;
  font-size: 20px;
  font-weight: 500;
}
.s__tab01-box .s__tab01-contents {
  border-top: 1px solid var(--border);
}
.active-on .s__tab01-title {
  font-weight: 700;
  border-bottom: 3px solid var(--main);
}
.s__tab01-box:nth-child(2) .s__tab01-title {
  left: 150px;
}
.s__tab01-box:nth-child(3) .s__tab01-title {
  left: 300px;
}
.s__tab01-box:nth-child(4) .s__tab01-title {
  left: 450px;
}
.s__tab01-contents {
  padding-top: 16px;
}
.s__tab01-more-btn {
  position: absolute;
  right: 0;
  top: 14px;
}
.s__tab01-more-btn img {
  width: 24px;
}

.table01 + .s__tab02-title-wrap {
  margin-top: 16px;
}
.s__tab02-title-wrap {
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  overflow-x: auto;
  margin-bottom: 24px;
}
.s__tab02-title-wrap .s__tab02-title {
  font-size: 18px;
  font-weight: 400;
  padding: 12px 16px;
  display: block;
}
.s__tab02-title-wrap .s__tab02-title.active-on {
  border-bottom: 3px solid var(--main);
  color: var(--main);
  font-weight: 700;
}
.s__teb-contents {
  display: none;
}
.s__teb-contents.active-on {
  display: block;
}
/* 탭 끝 */

/* 게시판1 */
.border-search01 {
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.border-search01 select {
  -webkit-appearance: none; /* for chrome */
  -moz-appearance: none; /*for firefox*/
  appearance: none;
}
.border-search01 select::-ms-expand {
  display: none; /*for IE10,11*/
}
.border-search01 select {
  padding: 10px 10px 10px 16px;
  border-radius: 7px;
  border: 1px solid var(--bd-basic2);
  background-color: #fff;
  min-width: 156px;
  height: 5rem;
  background-image: url("/images/openlab/icon_down_arrow.svg") no-repeat 92% 50%/15px auto;
}
.border-search01 input {
  display: flex;
  max-width: 300px !important;
  height: 43px;
  padding: 10px 10px 10px 16px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  background: #fff;
  margin-right: 8px;
}
.border-search01 .right-btn-wrap{
  flex: 1;
  justify-content: flex-start;
}
.border-search01 a, .border-search01 button{
  height: 5rem;
  width: 100px;
  font-size: 16px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.border-search01 .right-btn-wrap .btn-add{
  position: absolute;
  right: 0;
}
.tui-grid-cell .tui-grid-cell-content {
  font-size: 1.4rem;
}
.board01 .tui-grid-cell-header {
  background: #f9fafc !important;
  font-size: 1.6rem !important;
  color: #191919;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;

}

.search-bgBox{
  background-color: var(--box-basic);
  border-radius: 10px;
  margin-bottom: 2rem;
  padding-top: 32px;
}

.component-style{
  display: flex;
  flex-direction: column;
}
.component-style .btns{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.component-style .btns .btn{
  margin-right: 10px;
  margin-bottom: 10px;
}

/* btn03 */
.btn02{
  padding:10px 20px;
  border-radius: 30px;
  display: flex;
  gap: 20px 20px;
}

/* btn mart */
.mark_btn{
  padding: 4px 20px;
  min-width: 120px;
  max-width: 100%;
  text-align: center;
  border-radius: 5px;
}

/* 다운로드 */
.table01 a.download-link {
  color: #8191a5;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.48px;
  display: flex;
  align-items: center;
  padding: 0px 10px;
}
.table01 a.download-link:last-child {
  margin-bottom: 0;
}
/* 인사말 */
.greeting-img {
  height: 295px;
  width: 100%;
  object-fit: cover;
}
.round-img{
  width:80%;
  height:auto;
  border-radius: 500px;
  margin-top: 50px;
  overflow: hidden;
}
.round-img img{
  width: 100%;
}

.introduction01 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}
.introduction01 img {
  object-fit: cover;
  height: 100%;
  border-radius: 12px;
}
.introduction01 p {
  color: #191919;
  font-style: normal;
  font-weight: 400;
}
.introduction01 p strong {
  font-weight: 700;
  color: var(--strong);
}
.introduction02 p {
  color: #191919;
  font-style: normal;
  font-weight: 400;
}

/* 조직도 */
.organization-img {
  zoom: 0.5;
  margin: 0 auto;
}

/* 사업안내 */
.business-details > div {
  padding: 50px;
  display: flex;
  align-items: center;
}
.business-details > div > div {
  width: calc(100% - 154px);
}
.business-details > div img {
  margin-right: 24px;
}
.rayout03 p.rayout03__title {
  color: #191919;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.rayout03 p.rayout03__sub-title {
  color: #1919196a;
  font-style: normal;
  font-weight: 400;
  margin-top: 16px;
  width: 100%;
}
.rayout03 p.organization-list {
  color: #191919;
  font-style: normal;
  font-weight: 400;
}

/* 사업소개 */
.business02 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 16px;
  row-gap: 16px;
}
.business02__title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.business02__title-img {
  width: 64px;
  height: 64px;
  border-radius: 100px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border: 1px solid #e6ebee;
}
.business02__title-img img {
  width: 32px;
}
.rayout03.business02 > div {
  margin-bottom: 0;
}

.business02.rayout03 p.rayout03__sub-title {
  min-height: 140px;
}
.organization-list p{
  position: relative;
  padding-left: 15px;
}
.organization-list p::before{
  position: absolute;
  content: "";
  width:5px;
  height:5px;
  background-color:#4578e9;
  top: 13px;
  left: 2px;
}


/* 테이블 */
caption {
  overflow: hidden;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}
.sub_style_1 {
  width: 100%;
  table-layout: fixed;
  font-size: 18px;
  border-top: 2px solid #1a73b9;
}
.sub_style_1 th {
  /*width: 16%;*/
  padding: 2.2rem 0.5rem;
  line-height: 1;
  vertical-align: middle;
  border-bottom: 1px solid #d4d9e4;
  color: var(--primary);
  background-color: var(--box-basic);
  font-style: normal;
  font-weight: 500;
  font-size:1.6rem;
  letter-spacing: -0.54px;
}
.sub_style_1 td {
  padding: 2.2rem 0.5rem;
  border-bottom: 1px solid #d4d9e4;
  /*border-right: 1px solid #d4d9e4;*/
  line-height: 26px;
  font-size: 1.6rem;
  vertical-align: middle;
}
.sub_style_1 td:last-child {
  border-right: none;
}
.sub_style_1 th:last-child {
  border-right: none;
}

.sub_style_2 {
  width: 100%;
  table-layout: fixed;
  font-size: 18px;
  border-top: 2px solid #1a73b9;
}
.sub_style_2 th {
  padding: 12px 8px;
  border-bottom: 1px solid #d4d9e4;
  border-right: 1px solid #d4d9e4;
  background: #f9fafc;
  vertical-align: middle;
}
.sub_style_2 td {
  padding: 12px 15px;
  border-bottom: 1px solid #d4d9e4;
  border-right: 1px solid #d4d9e4;
  line-height: 26px;
}
.sub_style_2 td:last-child {
  border-right: none;
}
.sub_style_2 th:last-child {
  border-right: none;
}
/* 테이블 끝 */

/* 테이블 */

.prom-data-num {
  grid-template-columns: 1fr;
}
.title02 + .right-btn-wrap {
  position: relative;
  top: auto;
  margin-bottom: 16px;
}
.s__chart-box {
  padding: 16px;
}
.chart-body-info{
  padding: 0;
}
.s__chart01-box-title {
  font-size: 14px;
}
.body-info01-data01 > div + div{
  margin-top: 16px;
}
.s__chart01-box {
  width: 90%;
  height: auto;
  border: 6px solid transparent;
  position: relative;
}
.s__chart01-box p:nth-child(1) {
  font-size: 20px;
  position: absolute;
  transform: translateY(-10px);
}
.s__chart01-box p:nth-child(2) {
  position: absolute;
  transform: translateY(10px);
}
.s__chart01-box:after {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
}
.chart-body-wrap{
  margin-bottom: 32px;
}
.body-info01-data02-datalist p:nth-child(2){
  text-align-last: left;
  font-size: 24px;
}
.body-info01-data02{
  padding: 16px 20px;
}
.body-chart-map02-02, .chart-body-wrap{
  zoom: 0.7;
}
.s__template-wrap{
  grid-template-columns: 1fr;
}
.border-search-box > li{
  flex-direction: column;
  height: auto;
  align-items: flex-start;
  margin-bottom: 16px;
}
.border-search-box li > div:nth-child(1) label{
  font-size: 16px;
  text-align-last: left;
  margin-bottom: 8px;
}
.border-search02 input{
  width: 100%;
}
.border-search02 select + input{
  width: calc(100% - 108px);
}
.border-search02 input:last-child{
  margin-right: 0;
}
.border-search02 select{
  min-width: 100px;
}
.border-search02 select:last-child:first-child{
  width: 100%;
  background: url(/images/openlab/icon_down_arrow.svg) no-repeat 96% 50%/15px auto;
  background-color: #fff;
}
.border-search-box li > div:nth-child(2){
  width: 100%;
  flex-wrap: wrap;
}
.search__innersearch-value{
  margin-left: 0;
}
.search__innersearch{
  margin-right: 16px;
}
.border-btn-box button{
  font-size: 16px;
  width: 100px;
}
.s__input:first-child:last-child{
  width: 100%;
}
.s__select:first-child:last-child{
  width: 100%;
  background: url(/images/openlab/icon_down_arrow.svg) no-repeat 96% 50%/15px auto;
  background-color: #fff;
}

/* 사업단활동 */
.activities {
  border-top: 2px solid var(--main);
}
.activities a {
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.activities-img {
  width: 240px;
  height: 180px;
  object-fit: cover;
  margin-right: 24px;
  border-radius: 8px;
}
.activities-list {
  width: calc(100% - 264px);
}
.activities-list p:nth-child(1) {
  font-weight: 800;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 20px;
  margin-bottom: 4px;
}
.activities-list p:nth-child(2) {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 24px;
}
.activities-list p:nth-child(3) {
  opacity: 0.5;
}
.activities + .tui-pagination{
  margin-top: 60px;
}
/* 사업단활동 끝 */

/* 템플릿 관리 */

.s__template-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}
.s__template-wrap > div {
  padding: 16px;
}
.s__template-wrap .right-btn-wrap {
  margin-bottom: 24px;
}
.s__template-wrap-left .table01 > div > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row;
}
.s__template-wrap-left .table01 > div > div:nth-child(2) input {
  width: calc(100% - 50px);
}
.s__template-wrap-left .table01 > div > div:nth-child(1) {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.s__template-wrap-left .table01 > div > div:nth-child(1) input {
  width: calc(100% - 40px);
  margin-right: 0;
  margin-left: 8px;
}
.template-add-btn {
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-color: var(--main);
}
.template-add-btn img {
  width: 24px;
}
/* 템플릿 관리 끝 */

/* 연구현황 */
.s__chart-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.s__chart-box {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 743px;
}
.s__chart-box.chart-full {
  grid-column: 1 / span 2;
  max-width: 1500px;
}
.s__chart01 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.s__chart-title {
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 40px;
}
.s__chart01 > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.s__chart01 > div * {
  text-align: center;
}
.s__chart01-box-title {
  color: #4578e9;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 16px;
}
.s__chart01-box {
  background-color: #fff;
  border: 16px solid transparent;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #5cb967, #4578e9, #4578e9);
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.s__chart01-box p:nth-child(1) {
  color: #4578e9;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.s__chart01-box p:nth-child(2) {
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.chart-body-wrap {
  position: relative;
  width: 265px;
  display: flex;
  align-items: center;
}
.cancer-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-48%, -50%);
  pointer-events: none;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  opacity: 0;
}
.cancer-img.hover {
  opacity: 1;
}
.cancer-img.clicked {
  opacity: 1;
}
.cancer01.hover,
.cancer01.clicked {
  margin-top: -67%;
  margin-left: -1%;
}
.cancer02.hover,
.cancer02.clicked {
  margin-top: -27%;
  margin-left: -1%;
}
.cancer03.hover,
.cancer03.clicked {
  margin-top: -37%;
  margin-left: -1%;
}
.cancer04.hover,
.cancer04.clicked {
  margin-top: -3%;
  margin-left: -3%;
}
.cancer05.hover,
.cancer05.clicked {
  margin-top: -3%;
  margin-left: 5%;
}
.cancer06.hover,
.cancer06.clicked {
  margin-top: 1%;
  margin-left: -1%;
}
.cancer07.hover,
.cancer07.clicked {
  margin-top: 14%;
  margin-left: -2%;
}
.cancer08.hover,
.cancer08.clicked {
  margin-top: 18%;
}
.cancer09.hover,
.cancer09.clicked {
  margin-top: 37%;
}
.cancer10.hover,
.cancer10.clicked {
  margin-top: 51%;
  margin-left: -2%;
}
.cancer11.hover,
.cancer11.clicked {
  margin-top: 54%;
  margin-left: -1%;
}
.chart-body-info {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 16px;
  border: none;
  padding: 0;
}
.body-titile {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 24px;
}
.body-info01 {
  display: grid;
  grid-template-columns: 2fr 5fr;
  gap: 16px;
  margin-bottom: 16px;
}
.body-info01-data01 {
  border-radius: 16px;
  background: #89c940;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.body-info01-data01 span {
  font-size: 16px;
  color: #fff;
  font-weight: 300;
}
.body-info01-data01 p {
  color: #fff;
  margin-top: 12px;
  font-size: 32px;
  font-weight: 700;
}
.body-info01-data02 {
  padding: 24px 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.s__chart-title02 {
  display: flex;
  align-items: flex-end;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.s__chart-title02 p {
  font-size: 20px;
  font-weight: 700;
}
.s__chart-title02 span {
  margin-left: 8px;
}
.body-info01-data02-datalist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.body-info01-data02-datalist li {
  border-radius: 8px;
  border: 1px solid var(--border, #d6d6d6);
  background: #f9fafc;
  padding: 16px;
}
.body-info01-data02-datalist p:nth-child(1) {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 20px;
}
.body-info01-data02-datalist p:nth-child(2) {
  color: #89c940;
  text-align: right;
  font-size: 32px;
  font-weight: 700;
}
.body-info02 {
  padding: 24px 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.body-chart-map01-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.body-chart-map01-tool-tip {
  display: none;
}
.body-chart-map01-val {
  width: 40px;
  height: 40px;
  background-color: #2cb2c2;
  opacity: 0.5;
  border-radius: 1000px;
}
.body-chart-map01 {
  position: relative;
}
.body-chart-map01 li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
}
.body-chart-map01 li:hover .body-chart-map01-tool-tip {
  display: block;
  position: absolute;

  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
.body-chart-map01 li:hover .body-chart-map01-val {
  opacity: 0.8;
}
.body-chart-map01-tool-tip p {
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 4px 12px;
  font-weight: 600;
  font-size: 14px;
}
.body-chart-map01-name {
  font-size: 14px;
  text-align: center;
  line-height: 16px;
  margin-top: 4px;
  font-weight: 700;
  text-wrap: nowrap;
}
#mapData01-01 {
  margin-top: -83px;
  margin-left: -46px;
}
#mapData01-02 {
  margin-top: -94px;
  margin-left: -64px;
}
#mapData01-03 {
  margin-top: -14px;
  margin-left: -51px;
}
#mapData01-04 {
  margin-top: -4px;
  margin-left: -31px;
}
#mapData01-05 {
  margin-top: 46px;
  margin-left: -35px;
}
#mapData01-06 {
  margin-top: 83px;
  margin-left: -45px;
}
#mapData01-07 {
  margin-top: 99px;
  margin-left: -45px;
}
#mapData01-08 {
  margin-top: 166px;
  margin-left: -50px;
}
#mapData01-09 {
  margin-top: -104px;
  margin-left: 30px;
}
#mapData01-10 {
  margin-top: -74px;
  margin-left: -19px;
}
#mapData01-11 {
  margin-top: -42px;
  margin-left: 11px;
}
#mapData01-12 {
  margin-top: -2px;
  margin-left: -6px;
}
#mapData01-13 {
  margin-top: 33px;
  margin-left: 44px;
}
#mapData01-14 {
  margin-top: 43px;
  margin-left: 94px;
}
#mapData01-15 {
  margin-top: 73px;
  margin-left: 74px;
}
#mapData01-16 {
  margin-top: 73px;
  margin-left: 24px;
}
#mapData01-17 {
  margin-top: -17px;
  margin-left: 64px;
}
.body-chart-map02-wrap {
  display: grid;
  grid-template-columns: 3fr 4fr;
  gap: 16px;
}
.body-chart-map02-01 ul {
  display: flex;
  align-items: flex-end;
  height: 100%;
  justify-content: space-around;
}
.body-chart-map02-01 ul p {
  text-align: center;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
}
.body-chart-map02-01 ul p strong {
  font-size: 18px;
}
.body-chart-map02-02 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 368px;
}
.body-chart-map02-02 li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.body-chart-map02-02 li {
  border-radius: 100px;
  background: #eee;
  display: flex;
  align-items: center;
}
.body-chart-map02-name {
  font-size: 14px;
  font-weight: 600;
  padding: 0px 6px 0px 12px;
}
.body-chart-map02-val {
  border-radius: 100px;
  background: #546a89;
  padding: 0px 12px;
}
.body-chart-map02-val p {
  font-size: 16px;
  color: #fff;
  font-weight: 800;
}
#mapData02-01 {
  margin-top: -36%;
  margin-left: -36%;
}
#mapData02-02 {
  margin-top: -27%;
  margin-left: -36%;
}
#mapData02-03 {
  margin-top: -18%;
  margin-left: -36%;
}
#mapData02-04 {
  margin-top: -8%;
  margin-left: -36%;
}
#mapData02-05 {
  margin-top: 5%;
  margin-left: -36%;
}
#mapData02-06 {
  margin-top: 14%;
  margin-left: -36%;
}
#mapData02-07 {
  margin-top: 22%;
  margin-left: -36%;
}
#mapData02-08 {
  margin-top: 34%;
  margin-left: -36%;
}
#mapData02-09 {
  margin-top: -36%;
  margin-left: 34%;
}
#mapData02-10 {
  margin-top: -21%;
  margin-left: 34%;
}
#mapData02-11 {
  margin-top: -15%;
  margin-left: 17%;
}
#mapData02-12 {
  margin-top: -6%;
  margin-left: 15%;
}
#mapData02-13 {
  margin-top: 0%;
  margin-left: 34%;
}
#mapData02-14 {
  margin-top: 8%;
  margin-left: 34%;
}
#mapData02-15 {
  margin-top: 18%;
  margin-left: 34%;
}
#mapData02-16 {
  margin-top: 29%;
  margin-left: 34%;
}
#mapData02-17 {
  display: none;
  margin-top: -10%;
  margin-left: 34%;
}
/* 연구현황 끝*/



.sub_visual{
  width:100%;
  height:160px;
  background-image: url(/images/openlab/sub_visual.png);
  background-size:cover;
  background-repeat: no-repeat;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom:4rem;
}

.sub_visual_inner{
  text-align: center;
}

.sub_visual h2{
  font-size:24px;
  font-weight:600;
  color:#1c5bb1;
}
.sub_container .inner{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.sub_container .inner .left_menu{
  max-width: 28rem;
  width: 100%;
  position: relative;
}
.sub_container .inner .content{
  max-width: 105rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.sub_container .inner .content h3{font-size:21px;font-weight:600;}
.sub_container .inner .content h3 img{margin-right:10px}

.open-container h3.fl{margin-bottom: 2rem;font-size: 2rem;font-weight:600;align-items: center;gap: 1rem;}

.spage__title{
  font-size:16px;
}

.spage__title {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  padding-top: 15px;
}

.spage__title .tit__point{
  position: absolute;
  display: flex;
  top:0px;
}
.spage__title .tit__point dt{width:10px; height:10px;background-color:#1c5bb1;border-radius: 30px;margin-right:3px;}
.spage__title .tit__point dd{width:10px; height:10px;background-color:#649bff;border-radius: 30px;}


#ac .s_content{
  display:none;
}
#ac .menu2 a{
  background-color:#ccc;
  color:blue;
}
#ac .menu2 a:hover{
  background-color:rgba(0, 0, 0, 0.500);
}

/* 분석도구 레이아웃 */
.grid_2{display: grid; grid-template-columns:repeat(2,1fr);gap: 10px;}
.grid_3{display: grid; grid-template-columns:repeat(3,1fr);gap: 10px;}
.grid_4{display: grid; grid-template-columns:repeat(4,1fr);gap: 10px;}
.anl_layout{display: flex;}
.anl_layout .inner{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 0;
  flex-shrink: 1;
  gap: 1rem;
  padding: 2.5rem 2rem 1.5rem 2rem;
  border: 1px solid #c9d1df;
  border-radius: 0.7rem;
  min-height: 150px;
  min-height: 37rem;
  box-sizing: border-box;
}
.anl_layout .title{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.anl_layout .title span{
  display: flex;
  gap: 8px;
}
.anl_layout .title span img{width: 1.8rem}
.anl_layout .title span h2{
  color:#414D7E;
  font-size: 2.1rem;
  font-weight:600;
}
.anl_layout .title .badge{
  position: relative;
  display: flex;
  gap: 8px;
  width: auto;
  padding: 0 2rem;
  line-height: 2.8rem;
  color: #fff;
  font-size: 1.4rem;
  border-radius: 1.4rem;
  text-align: center;
}

.anl_layout .title .badge.gray{background-color: #91a2ba;}
.anl_layout .title .badge.dark-gra{background-color: #424756;}

.anl_layout .title .badge img:hover + p.arrow_box {
  display: block;
}
/*말풍선*/
.arrow_box {
  display: none;
  position: absolute;
  width: 18rem;
  padding: 8px;
  top:-1rem;
  right: -18rem;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #333;
  color: #fff;
  font-size: 1.4rem;
  opacity: 0.95;
}
.arrow_box:after {
  position: absolute;
  top: 15px;
  left: -10px;
  width: 0;
  height: 0;
  margin-left: -10px;
  border: solid transparent;
  border-color: rgba(51, 51, 51, 0);
  border-right-color: #333;
  border-width: 10px;
  pointer-events: none;
  content: ' ';
}


.item__info{
  margin-top: 1rem;
}
.anl_layout .img{
  display: flex;
  width: 100%;
  height: 130px;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  background-color: #fdfdfd;
  border: 1px solid #f2f2f2;
  border-radius:  0.7rem;
}
.anl_layout .txt{
  width:100%;
  height: 10rem;
  margin-top:1rem;
  font-size: 1.65rem;
  color: #969faf;
}
.anl_layout .txt p{
  width: 100%;
  height: 100%;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 147%;
}
.anl_layout button{
  width: 100%;
  background-color:#7d8186;
  border-radius: 0.7rem;
  padding: 0.54em 1em;
  font-size: 1.6rem;
  color:#ffffff;
}

.no__data{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 20vh;
  padding: 2rem;
  border-radius: 1rem;
  background-color: var(--box-basic);
  color: #494754;
}

.anl_layout .title .badge img{
  cursor: pointer;
}

/* 데이터 카탈로그 */

.ctl_content{
  width: 100%;
  padding: 2rem;
  border: 1px solid #f1f1f1;
  border-radius: 12px;
  background-color: #fafafa;
}
.ctl_select select{
  padding:0.4em 0.8em;
  margin-left: 10px;
  width:14rem;
  min-width: 100px;
  border: 1px solid #dde1e7;
  border-radius: 7px;
}
.ctl_select{margin-bottom: 2rem;}
/*.ctl_content .ctl_list{*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  margin-top: 2em;*/
/*  flex-wrap: wrap;*/
/*}*/
/*.ctl_content .ctl_list_style02 .ctl_list__item{*/
/*  flex-direction: row !important;*/
/*}*/
.ctl_content .ctl_list .ctl_list__item{
  width: 100%;
  padding:1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #BCD6FF;
  position: relative;
}
.ctl_content .ctl_list .ctl_list__item:hover{border:2px solid #3b83f7; cursor: pointer;transition: 0.2s}
.ctl_content .ctl_list .ctl_list__item .img{
  margin-bottom: 1em;
}
.ctl_content .ctl_list .ctl_list__item h1{font-size: 1.8rem;}
.ctl_content .ctl_list .ctl_list__item .info{
  text-align: center;
  font-size: 15px;
}
.ctl_content .ctl_list .ctl_list__item .bottom{
  font-size: 14px;
}

/* ============ 이용신청관리 ============ */
.section__b{display: flex;}
.section__b2{ flex-wrap: wrap;margin-bottom: 3rem;}
.section__b2 .left_section{display: flex; width: 55%;}
.section__b2 .right_section{width: 45%;}
.section__b3 {gap: 0px 2%;}
.section__b3 .left_section{width: 49%; display: flex;    flex-direction: column;justify-content: flex-start;}
.section__b3 .right_section{width: 49%;}
.section__b3 .tui-grid-container .tui-grid-pagination{display: none;}

.section__b1{
  justify-content: center;
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #dfe4e6;
}
.section__b2 > h3{
  width:100%;
}
.section__b2 .left_section ul{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.section__b2 .left_section ul li{
  flex-direction: column;
  flex: auto;
  width: 32%;
  border: 1px solid #d8d8d8;
  padding: 2%;
}
.section__b2 .left_section ul li .img{width:100%; height:160px; background-color: #d6dadd;margin-bottom: 10px;}
.section__b2 .left_section ul li span{font-size: 0.8rem; line-height: 160%; margin-right: 10px;}
.section__b2 .right_section{padding-left: 2%;}
.section__b table{width:100%;/*border-top: 2px solid #b9b9b9;*/}
.section__b table th{height:45px;background-color: var(--box-basic);border-bottom: 1px solid #d4d4d4;}
.section__b table td{height:45px;padding: 5px 10px;border-bottom: 1px solid #d4d4d4;}

.section__b .table_btn{width: 100%; height:45px; background-color: #3062a9; color:#ffffff;border-radius: 5px; margin-top: 20px;}

.section__b4 {gap: 0px 2%;display: flex;flex-direction: row;flex-wrap: wrap; align-items: center;    align-items: stretch;}
.section__b4 h3{margin-bottom: 0px;}
.section__b4 .section01{width: 24%; display: flex;flex-direction: column;}
.section__b4 .section02{width: 24%; display: flex;flex-direction: column;}
.section__b4 .section03{width: 40%; display: flex;flex-direction: column;}
.section__b4 .section03 p{font-size:13px;}
.section__b4 .sub_style_1{table-layout:auto;font-size: 15px;}
.section__b4 .sub_style_1 td{padding:5px;background-color: #ffffff;}
.section__b4 .sub_style_1 button{min-width: 64px;}
.process_arrow{display: flex;    align-items: center;}


.section__b4 .border-search01 input[type="text"] {
  display: flex;
  width: 300px;
  height: 43px;
  padding: 10px 10px 10px 16px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  background: #fff;
  margin-right: 8px;
}
/* ============ 이용신청관리 end ============ */


/* fn_confirm 확인/취소 버튼 정렬 css */
.layerCon .btnArea {
  display: flex;
  justify-content: center;

}
.layerCon .btnArea button {
  margin: 0;
}



@media (max-width: 1600px) {
  .sub-page .s__container {
    width: 100%;
    overflow: hidden;
  }
  .s__chart-wrap{
    grid-template-columns: 1fr;
  }
  .s__chart-box.chart-full {
    grid-column: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .s__chart-box.chart-full > div:nth-child(2){
    width: 100%;
  }
  .s__chart-box{
    grid-column: 1 / span 2;
    max-width: 1500px;
  }
  .body-chart-map02-wrap{
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
  }
  .s__chart-wrap{
    gap: 16px 0;
  }
  .body-info01{
    display: flex;
    flex-direction: column;
  }

}
@media (max-width: 1200px) {
  .border-search-box{
    flex-direction: column;
  }
  .search__half{
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .prom-data-num {
    grid-template-columns: 1fr 1fr;
  }
  .sub_style_1 th:nth-last-child(4), .sub_style_1 td:nth-last-child(4){
    width: 200px;
  }
  .sub-table-wrap{
    overflow: auto;
  }
  .border-search01 .right-btn-wrap .btn-add{
    position: relative;
  }

}

@media (max-width: 768px) {
  p {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
  }
  .pc-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
  .right-btn-wrap > a {
    margin-top: 8px;
    width: 100px;
    font-size: 14px;
  }
  .sub-page-title {
    font-size: 24px;
    margin-bottom: 0;
  }
  .sub-page-sub-title {
    font-size: 14px;
  }
  .sub-page-title-wrap {
    height: 100px;
    margin-top: 50px;
  }
  .sub-page {
    margin-top: 60px;
    padding-bottom: 100px;
  }
  /* 타이틀1 */
  .title01 p:nth-child(2) {
    font-size: 24px;
  }
  /* 타이틀2 */
  .title02 p:nth-child(1) {
    font-size: 34px;
  }
  .title02 p:nth-child(2) {
    font-size: 24px;
    margin-bottom: 24px;
  }
  /* 타이틀3 */
  .title03 p {
    font-size: 24px;
    margin-bottom: 24px;
  }

  /* 레이아웃1 */
  .rayout01 {
    display: flex;
    flex-direction: column;
  }
  .rayout01 > div {
    width: 100%;
  }
  .rayout01 > div:nth-child(1) p:nth-child(2) {
    margin-bottom: 24px;
  }
  .introduction01 {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .rayout03__list02 {
    display: flex;
    flex-direction: column;
  }

  .introduction01 img {
    object-fit: cover;
    height: 300px;
    width: 100%;
  }
  /* 레이아웃3 */
  .rayout03 > div {
    padding: 24px 24px;
  }
  .rayout03 > div > p {
    font-size: 16px;
  }
  .rayout03__list01 > li {
    font-size: 16px;
    line-height: normal;
    margin-bottom: 8px;
  }
  .rayout03__list02 > li {
    font-size: 16px;
    line-height: normal;
    padding: 16px;
  }
  .rayout03__list02 > li img {
    margin-right: 16px;
  }
  .rayout03.business02 p.rayout03__sub-title {
    min-height: auto;
  }
  /* 레이아웃4 */
  .rayout04 {
    display: flex;
    flex-direction: column;
  }
  .rayout04 li {
    border-bottom: 1px solid #e1e1e1;
    padding: 32px 0;
  }
  .rayout04 li:nth-child(1) {
    margin-top: 0;
  }


  /* 테이블1 */
  .table01 > div > div:nth-child(1) {
    width: 100%;
    padding: 16px;
    border-bottom: 1px solid #e1e4d4;
  }
  .table01 > div > div:nth-child(2) {
    padding: 16px;
  }
  .table01 > div {
    flex-direction: column;
  }

  /* 게시판1 */
  .border-search01 {
    flex-direction: column;
  }
  .border-search01 > * {
    width: 100%;
    margin-bottom: 6px;
  }
  .border-search01 select {
    margin-right: 0;
    background-color: #ffffff;
  }
  .border-search01 input {
    width: 100%;
    margin-right: 0;
  }
  .border-search01 .btn-main {
    justify-content: center;
    margin-bottom: 0;
  }
  /* 비지니스2 */
  .business02__title {
    flex-direction: column;
  }
  .business02__title-img {
    margin-right: 0;
    margin-bottom: 8px;
  }
  .business02 {
    display: flex;
    flex-direction: column;
  }
  .business02 > div {
    margin-bottom: 16px;
  }

  /* 인사말 */
  .greeting-img {
    height: 160px;
  }
  .table01 > .table01-half {
    width: 100%;
  }
  .round-img{
    width:100%;
    height:auto;
    border-radius: 5%;
    margin-top: 50px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .round-img img{
    width: 100%;
  }
  /* 테이블 */

  .prom-data-num {
    grid-template-columns: 1fr;
  }
  .title02 + .right-btn-wrap {
    position: relative;
    top: auto;
    margin-bottom: 16px;
  }
  .s__chart-box {
    padding: 16px;
  }
  .chart-body-info{
    padding: 0;
  }
  .s__chart01-box-title {
    font-size: 14px;
  }
  .body-info01-data01 > div + div{
    margin-top: 16px;
  }
  .s__chart01-box {
    width: 90%;
    height: auto;
    border: 6px solid transparent;
    position: relative;
  }
  .s__chart01-box p:nth-child(1) {
    font-size: 20px;
    position: absolute;
    transform: translateY(-10px);
  }
  .s__chart01-box p:nth-child(2) {
    position: absolute;
    transform: translateY(10px);
  }
  .s__chart01-box:after {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 100%;
  }
  .chart-body-wrap{
    margin-bottom: 32px;
  }
  .body-info01-data02-datalist p:nth-child(2){
    text-align-last: left;
    font-size: 24px;
  }
  .body-info01-data02{
    padding: 16px 20px;
  }
  .body-chart-map02-02, .chart-body-wrap{
    zoom: 0.7;
  }
  .s__template-wrap{
    grid-template-columns: 1fr;
  }
  .border-search-box > li{
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    margin-bottom: 16px;
  }
  .border-search-box li > div:nth-child(1) label{
    font-size: 16px;
    text-align-last: left;
    margin-bottom: 8px;
  }
  .border-search02 input{
    width: 100%;
  }
  .border-search02 select + input{
    width: calc(100% - 108px);
  }
  .border-search02 input:last-child{
    margin-right: 0;
  }
  .border-search02 select{
    min-width: 100px;
  }
  .border-search02 select:last-child:first-child{
    width: 100%;
    background: url(/images/openlab/icon_down_arrow.svg) no-repeat 96% 50%/15px auto;
    background-color: #fff;
  }
  .border-search-box li > div:nth-child(2){
    width: 100%;
    flex-wrap: wrap;
  }
  .search__innersearch-value{
    margin-left: 0;
  }
  .search__innersearch{
    margin-right: 16px;
  }
  .border-btn-box button{
    font-size: 16px;
    width: 100px;
  }
  .s__input:first-child:last-child{
    width: 100%;
  }
  .s__select:first-child:last-child{
    width: 100%;
    background: url(/images/openlab/icon_down_arrow.svg) no-repeat 96% 50%/15px auto;
    background-color: #fff;
  }
}


/**============================================
 *!            분석환경 이용신청 step css
 *=============================================**/

.w1280{width:1280px; margin:0 auto;}

.open-container {
  width: 100%;
}
.open-row {
  margin: 0;
}

.dash-line-top{border-top: 1px dashed #cccccc;}
.table_inputBox{
  margin-top: 1rem;
  padding-top: 1.5rem;
  width: 100%;
  gap: 10px;
}
.table_inputBox .btn{height: 100%;}

.system_list {
  display: grid;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  width: 100%;
  margin-top: 2rem;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.system_list > li {
  height: 100%;
}
.system_list > li > div {
  display: block;
  position: relative;
  height: 100%;
  padding: 5rem 1.5rem 1.5rem;
  border: 1px solid var(--bd-basic);
  border-radius: 0.8rem;
  text-align: center;
  font-size: 1.5rem;
  background-color: #fff;
  transition: 0.2s;
}
.system_list > li > div span{}
.system_list > li.on > div {
  border: 1px solid #8a83d1;
  box-shadow: 0 0 1rem rgb(63 0 255 / 30%);
  font-weight: 600;
  color: #3e359b;
  background-color: #f5f4ff;
}
.system_list > li > div:before {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  content: "";
  background-color: #eef2f8;
  transform: translateX(-50%);
}
.system_list > li.check > div:before {
  background: url("../../images/openlab/check_white.png") no-repeat center #a5a0af;
}
.system_list > li.on > div:before {
  background: url("../../images/openlab/check_white.png") no-repeat center #5041ef;
  background-color: #5041ef;
}

.step01-text {
  overflow: auto;
  width: 100%;
  height: 432px;
  resize: none;
  margin: 0 auto;
  margin-bottom: 3rem;
  padding: 2.4rem;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  background: #ffffff 0% 0% no-repeat padding-box;
  letter-spacing: -0.15px;
  color: #595959;
  font-size: 1.5rem;
  line-height: 20px;
}


/* 약관동의 */
/*.data__contents {*/
/*    width: 96%;*/
/*    margin: 0 auto;*/
/*}*/

.data__contents .contents-sub {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #666666;
}

.data__contents .contents-sub .form-group {
  padding: 20px 0px;
  border-bottom: 1px solid #aaaaaa;
}

/* 약관동의 체크박스 */
.ch_style {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #f1f1f1;
  padding: 1.5rem;
}

.ch_style label {
  padding-left: 0px;
}

a:hover, a:focus {
  text-decoration: none;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  width: 22px;
  height: 22px;
  cursor: pointer;
  margin-right: 12px;
  background: url("../../images/openlab/icon_chbox_off.svg") no-repeat;
  mix-blend-mode: multiply;
}

input[type="checkbox"]:checked + label {
  /*width: 22px;*/
  width: 22px;
  height: 22px;
  margin-right: 12px;
  cursor: pointer;
  color:#3e359b;
  font-weight: 600;
  background: url("../../images/openlab/icon_chbox_on.svg") no-repeat;
}

input[type="checkbox"] + label + label {
  font-size: 1.5rem;
  cursor: pointer;
}


.btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
  margin-bottom: 6rem;
}

.open-btn {
  padding: 1.1rem 5.4rem;
  border-radius: 5px;
  color: #fff;
  letter-spacing: -0.18px;
  font-size: 1.8rem;
  cursor: pointer;
  font-weight: 700;
}

/* button css */
.blue-btn {
  background: #4c74c0 0% 0% no-repeat padding-box;
}

.slim-btn {
  padding: 0.6rem 3.6rem;
  font-size: 15px;
  letter-spacing: -0.18px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 5px;
}

.red-btn {
  background: rgb(232, 59, 59);
}

.gray-btn {
  background: #616161;
}

.gray-btn02 {
  background: #555555;
}

.gray-btn03 {
  background: #464646;
}

.download-btn {
  border: 1px solid #c2c2c2;
  color: #191919;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: 1.2rem 2.2rem;
  border-radius: 5px;
}

.download-btn:hover {
  color: #fff;
  background-color: #3c3636;
}

.download-btn::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 16px;
  background: url(/images/openlab/icon_down02.png);
  background-size: contain;
  margin-left: 8px;
}

.download-btn:hover:after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 16px;
  background: url(/images/openlab/icon_down02_wh.png);
  background-size: contain;
  margin-left: 8px;
}

.blue-btn:hover {
  opacity: 0.9;
}

.appli-btn {
  background: #424242 0% 0% no-repeat padding-box;
}

.appli-btn:hover {
  background: #00a3ee 0% 0% no-repeat padding-box;
  transition: 0.3s;
}

.form-group .control-label {
  display: flex;
  align-items: center;
  font-size: 1.4rem !important;
  /*justify-content: flex-end; !* 오른쪽 정렬 *!*/
  height: 100%;
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

#fileInput {
  display: none;
}

/* 커스텀 파일 선택 버튼 스타일링 */
.file-upload-button {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  text-align: center;
  transition: background-color 0.2s ease;
}

.file-upload-button:enabled {
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.file-upload-button:enabled:hover {
  background-color: #0056b3;
}

.file-upload-button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}

.file-upload-button:disabled:hover {
  background-color: #bbb;
}

.form-group .control-label .required {
  color: red !important;
  margin-right: 5px;
}

.data__contents {
  overflow: hidden; /* 넘치는 내용을 잘라내기 */
  max-width: 100%; /* 화면에 맞춰 컨테이너 크기 제한 */
}
.page-content-inner{
  width: 100%;
}

.table01 .form-group .text{
  color: #000000;
  font-size: 1.4rem; /* 폰트 크기 조정 */
  text-align: left; /* 왼쪽 정렬 */
  margin-top: 0.5rem; /* 상단 여백 */
  padding-left: 2rem; /* 왼쪽 패딩 조정 */
}

.control-label {
  font-size: 1.6rem;
  /*margin-bottom: 0.5rem;*/
  font-weight: 600;
}

.form-horizontal .form-group {
  flex-direction: column;
}

.form-group {
  display: flex;
  /*flex-direction: column;*/
  /*margin-bottom: 2rem;*/
}

.grid_total_count > div {
  float: right;
  padding-right: 12px;
  font-weight: bold;
  color: #2c68a6;
  font-size: 14px;
}

/* help-text */
.help-text{
  display: inline-block;
  padding-left: 17px;
  font-size: 13px;
  font-weight: 500;
  background: url(../../images/openlab/icon_check_red.svg) no-repeat 0 5px;
  background-size: 12px 10px;
  color: #e85350;
}
.info-text{
  padding-left: 17px;
  font-size: 13px;
  font-weight: 500;
  background: url(../../images/openlab/icon_check_red.svg) no-repeat 0 5px;
  background-size: 12px 10px;
  color: #505de8;
}



/*
*
*
*step04
*
*
*/

.step04-page{
  .page-header-desc ul{
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .page-header-desc .breadcrumbs li{
    display: flex;
    align-items: center;
    margin-right: 25px;
    font-size: 15px;
    position: relative;
  }
  .page-header-desc .breadcrumbs li::after{
    content: "";
    position: absolute;
    right:-20px;
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-left: 5px solid #dddddd;
    border-right: 5px solid transparent;
  }
  .page-header-desc .breadcrumbs li:last-child::after{
    border-left:0px;
  }
  .page-header-desc .breadcrumbs li img{
    padding-right: 10px;
  }
  .page-content{
    font-size:16px;
  }
  /*결제일별 이용기간*/
   .page-content-inner .page-section{
     padding-bottom: 3rem;
     border-bottom: 1px solid #cccccc;
     margin-bottom: 3rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }


  .page-content h2{
    font-size:2.2rem;
    font-weight:600;
    margin-bottom: 10px;
    position: relative;
    padding-top: 15px;
  }
  .page-content h3 img {
    margin-right: 10px;
  }
  .page-content h3{margin-bottom: 20px; font-size: 21px; font-weight: 600;}

  .page-content h2 span{
    position: absolute;
    display: flex;
    top:0px;
  }
  .page-content span dt{width:10px; height:10px;background-color:#1c5bb1;border-radius: 30px;margin-right:3px;}
  .page-content span dd{width:10px; height:10px;background-color:#649bff;border-radius: 30px;}

  .left_menu_top{
    width:100%;
    height:130px;
    border-radius: 20px 20px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:#125dc4;
  }
  .left_menu_top h2{
    font-size:24px;
    font-weight:600;
    color:#ffffff;
  }
  .left_mcontent{
    position: absolute;
    top:110px;
    background-color: #ffffff;
    width: 100%;
    border-radius: 20px;
    padding: 25px;
    border:1px solid #cccccc;
  }
  .cate{
    position:relative;
  }
  .cate .menu{
    display:block;
    position:relative;
    width:100%;
    height:65px;
    border-bottom: 1px dotted #cccccc;
    font-size: 18px;
  }
  .cate .menu .menulink{
    display:block;
    text-decoration:none;
    width:70%;
    padding-left:15px;
    line-height:65px;
  }
  .cate .menu .subopen{
    position:absolute;
    width:10px;
    height:10px;
    right:15px;
    padding:0;
    top:0;
    bottom:0;
    margin:auto;
    transform:rotate(45deg);
    border-right:2px solid #5f67d8;
    border-bottom:2px solid #5f67d8;
  }

  .cate .menu .subopen.active{
    transform:rotate(225deg);
  }

  .cate ul li{
    padding:5px 10px;
  }
  .cate ul li:first-child{
    padding-top:20px;
  }
  .cate ul li:last-child{
    padding-bottom:20px;
  }

  /* 분석도구 레이아웃 */
  .anl_layout{display: flex; width: 30%;}
  .anl_layout .inner{
    flex-direction: column;
    display: flex;
    border: 1px solid #cccccc;
    border-radius: 15px;
    padding: 1em;
    margin: 2%;
    align-items: center;
  }
  .anl_layout .title{
    width: 100%;
    font-size:21px;
    font-weight: 600;
    padding: 10px;
    position: relative;
    text-align: center;
  }
  .anl_layout .title span{
    position: absolute;
    right:0px;
    top: 10px;
    cursor: pointer;
  }
  .anl_layout .title img::before{
    content: "관심데이터 등록";
    padding: 10px;
    background-color: #212121;
    color:#ffffff;
    position: absolute;
  }
  .anl_layout .img{
    display: flex;
    width: 70%;
    height: 130px;
    align-items: center;
    overflow: hidden;
  }
  .anl_layout .txt{
    width:100%;
    padding:15px;
    min-height: 80px;
    background-color:#f2f4f7;
    border-radius: 10px;
  }
  .anl_layout .name{
    width:100%;
    padding:10px;
    font-size:18px;
    font-weight: 600;
    text-align: center;
  }
  .anl_layout button{
    width: 100%;
    background-color:#7d8186;
    border-radius: 10px;
    padding: 0.54em 1em;
    font-size: 1.04em;
    color:#ffffff;
  }


  /* 데이터 카탈로그 */

  .ctl_content{
    width: 100%;
    padding: 1.5em;
    border: 1px solid #f1f1f1;
    border-radius: 12px;
    background-color: #fafafa;
  }
  .ctl_content .ctl_select select{
    padding:0.4em 0.8em;
    margin-left: 10px;
    min-width: 100px;
    border: 1px solid #dde1e7;
    border-radius: 7px;
  }
  .ctl_content .ctl_list{
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
  }
  .ctl_content .ctl_list .ctl_list__item{
    width: 24%;
    min-height: 300px;
    padding:2em 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #BCD6FF;
  }
  .ctl_content .ctl_list .ctl_list__item:hover{border:2px solid #3b83f7; cursor: pointer;}
  .ctl_content .ctl_list .ctl_list__item .img{
    margin-bottom: 1em;
  }
  .ctl_content .ctl_list .ctl_list__item h1{font-size: 1.24em;}
  .ctl_content .ctl_list .ctl_list__item .info{
    text-align: center;
    font-size: 15px;
  }
  .ctl_content .ctl_list .ctl_list__item .bottom{
    font-size: 14px;
  }

  #selectedFloatList, #extractConfig {
    overflow: hidden; /* 넘치는 내용 숨기기 */
    white-space: nowrap; /* 가로 스크롤 시 줄 바꿈 방지 */
    display: inline-block; /* 크기 조정 가능하도록 설정 */
    width: 400px; /* 초기 너비 설정 */
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }


  /* 데이터추출관리 상세보기*/
  .dialog__section01{
    text-align: center;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 20px;
  }
  .dialog__content .catal_view_table th div{
    display: flex;
    justify-content: center;
  }
  .dialog__content .catal_view_table th p{
    color:#db0505;
    margin-left: 10px;
  }
  .sub_style_1.catal_view_table td{
    border-right: 0px;
  }
  .dialog__content .catal_view_table td{
    text-align: left;
  }
  .dialog__content .catal_view_table td p{
    color:#db0505;
  }
  .dialog__content .catal_view_table input,
  .dialog__content .catal_view_table select,
  .dialog__content .catal_view_table textarea{
    width:100%;
    max-width: 100%;
    min-height: 43px;
    max-height: 150px;
    padding: 10px 10px 10px 16px;
    border-radius: 4px;
    border: 1px solid #c5c5c5;
    background: #fff;
    margin-right: 8px;
    float: left;
  }


  /* ============== dialog 표준 스타일 정의 ============== */
  .w10{width:10%;}
  .w20{width:20%;}
  .w30{width:30%;}
  .w50{width:50%;}
  .w60{width:60%;}
  .w70{width:70%;}
  .w100{width:100%;}
  .gap10{gap: 10px;}

  .dialog-standard{position: fixed; width: 95%; top: 73%; z-index: 998;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);border: 1px solid #ccc;}
  .dialog-standard .dialog__header{
    display: flex;
  }
  .extractNotice{
    background-color: #faf2f2;
    padding: 8px 20px;
    border-radius: 50px;
    width: 50%;
    font-size: 1.45rem;
    color: #a42929;
  }

  .dialog-standard .btn-box-wrap button{background-color: #ffffff;padding: 3px 24px;border-radius: 5px;border: 1px solid #717171;font-size: 1.45rem;}
  .dialog-standard .btn-box-wrap button:hover{background-color: #dddddd;transition: 0.2s;}
  /* ============== dialog 표준 스타일 정의 // ============== */


  /*데이터셋 등록*/
  .x_panel{
    width:100%;
    padding: 10px;
    margin-bottom: 20px;
    border:1px solid #dcdcdc;
  }
  .x_panel .x_panel-inner{
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
  }
  .x_panel .x_panel-inner select{
    height: 40px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #c5c5c5;
    background: #fff;
  }
  .x_panel .x_panel-inner .sub_style_1 {
    table-layout: auto;
    font-size:14px;
  }
  .x_panel .x_panel-inner .sub-table-wrap{

  }

  .x_panel .x_panel-inner .sub_style_1 th{
    padding: 6px;
  }

  .x_panel .x_panel-inner .sub_style_1 td{
    padding: 6px;
  }
  .x_panel .x_panel-inner .sub_style_1 td select{
    height: 32px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #c5c5c5;
    background: #fff;
  }
  .x_panel .x_panel-inner .sub_style_1 td input{
    height: 32px;
  }

  .x_panel .x_panel-inner .sub_style_1 td button{
    max-width: 70px;
    display: inline-block;
    padding:5px;
    font-size: 14px;
  }

  .x_panel .x_panel-inner .flex{
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5em;
  }
  .empty__box{
    padding-left: 2%;
    display: flex;
    flex-direction: column;
  }
  .empty__box .empty{
    width: 100%;
    height: 100%;
    background-color:#eeeeee;
  }


  /* 카탈로그 관리 */
  .genel__left{
    width:24%;
    border: 1px solid #d4e0ea;
  }
  .genel__left .genel__inner{
    overflow-y: scroll;
    padding:10px;
    height: 754px;
  }
  .genel__imgBox li{
    background-color:#ffffff;
    border:1px solid #d4e0ea;
    margin-bottom: 10px;
    padding:10px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
  }
  .genel__imgBox li:last-child{
    margin-bottom: 0px;
  }
  .cont_btn{
    width:100%;
    background-color:#2d82fc;
    color:#ffffff;
    padding:10px;
    border-radius:6px;
  }
  .genel__img__top{
    display: flex;
    justify-content: flex-end;
    padding-bottom: 10px;
  }
  .genel__img__top button{
    width:25px;
    height:25px;
    border-radius: 20px;
    border:1px solid #c9c9cf;
    margin-left: 5px;
  }
  .genel__img__cont .img{
    height:110px;
    background-color:#c9c9c9;
  }
  .genel__img__cont h2{
    font-size: 16px;
    margin-bottom: 0px;
  }
  .genel__img__cont p{
    font-size: 14px;
  }
  .genel__right{
    width:74%;
    border: 1px solid #d4e0ea;
  }
  .genel__left__top,
  .genel__right__top{
    padding:10px;
    border-bottom: 1px solid #d4e0ea;
    background-color: #ffffff;
  }
  .genel__right__content{
    height: 774px;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding:5px;
    background-color: #f3f3f3;
  }
  .genBox{
    width:33.3%;
    display: flex;
    padding:5px;
    flex-wrap: wrap-reverse;
  }
  .genBox .genBox_inner{
    width:100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #d4e0ea;
    border-radius: 6px;
    background-color: #ffffff;
    padding:10px;
    gap: 10px;
  }
  .genBox .genBox_inner:hover{
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
    transition: 0.2s;
  }
  .genBox .genBox_inner .swc{
    display: flex;
    justify-content: flex-end;
    gap: 2%;
  }
  .genBox .genBox_inner .img{
    height:110px;
    background-color:#c9c9c9;
  }
  .genBox .genBox_inner ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .genBox .genBox_inner ul li{
    background-color: #f3f7f9;
    border:1px solid #d0d8dd;
    font-size: 0.8rem;
    padding:2% 3.5%;
    margin-top: 2%;
  }


  /* 테이블 카테고리 관리 */

  .dis__search{
    margin-top: 2%;
  }
  .search__list{
    background-color: #d1d1d1;
    height: 500px;
    width: 100%;;
  }

  .table-search select{
    min-width: 90px;
    height: 36px;
    padding: 6px;
  }
  .table-search input{
    width: 200px;
    height: 36px;
    padding: 6px;
  }
  .table-search button{height: 36px;}

  .data__list{
    border-bottom: 1px solid #c9c9c9;
    padding-bottom: 20px;
  }
  .dis__right h3{margin-bottom: 0px;}

  .data__list .flex{
    flex-wrap: wrap;
    gap: 20px 2%;
  }
  .dis__inner{
    padding: 10px;
  }

  .dis__right__top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding:10px;
    border-bottom: 1px solid #c9c9c9;
  }
  .dis__right__top .btnBox{
    display: flex;
  }

  .data__list__el{
    width: 15%;
    height: 60px;
    border: 1px solid #c9c9c9;
    border-left: 14px solid #c9c9c9;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
  }

  .dis__content{
    display: flex;
  }

  .dis__content.v1 .dis__left{width:25%;border-right:1px solid #c9c9c9;padding-top: 20px;padding-right:2%}
  .dis__content.v1 .dis__right{width:75%;}
  .dis__content.v2 .dis__left{width:50%;border-right:1px solid #c9c9c9;padding-top: 20px;padding-right:2%}
  .dis__content.v2 .dis__right{width:50%;}
  .dis__content.v2 .dis__table_content .dis__table_list{
    width: 100%;
  }

  .dis__table{
    width: 100%;
  }
  .dis__table th{text-align: left;padding:10px}
  .dis__table td{
    padding: 10px;
  }
  .dis__table td textarea{
    max-height: 100px;
  }

  .dis__table_content{
    display: flex;
    justify-content: space-between;
  }

  .dis__table_content .dis__table_list{
    width: 46%;
  }

  .dis__table_content .dis__table_list .sub_style_1{
    table-layout:unset;
  }

  .dis__table_content .dis__table_list .sub_style_1 {
    table-layout: auto;
    font-size:14px;
  }
  .dis__table_content .dis__table_list .sub_style_1 th,
  .dis__table_content .dis__table_list .sub_style_1 td{
    padding: 6px;
  }

  .dis__table_content .dis__table_list .sub_style_1 td select{
    height: 32px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #c5c5c5;
    background: #fff;
  }
  .dis__table_content .dis__table_list .sub_style_1 td input{
    height: 32px;
  }

  .dis__table_content .dis__table_list .sub_style_1 td button{
    max-width: 70px;
    display: inline-block;
    padding:5px;
    font-size: 14px;
    border-radius: 3px;
  }

  /* 메타데이터 관리 */

  .dis__table input,
  .dis__table select{height: 43px;}

  .dis__table select{
    padding: 10px 10px 10px 16px;
    border-radius: 4px;
    border: 1px solid #c5c5c5;
    background: #fff;
    min-width: 100%;
    margin-right: 8px;
    height: 43px;
    background: url(../image/icon_down_arrow.svg) no-repeat 92% 50% / 15px auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .dis__right .dis__table_list .board01{
    margin-top: 20px;
    font-size: 14px;
  }

  .dis__right .dis__table_list .board01 .tui-grid-cell-header,
  .dis__right .dis__table_list .board01 .tui-grid-cell .tui-grid-cell-content{
    font-size: 14px;
  }


  /*이용신청관리*/
  .section__b{display: flex;}
  .section__b2{ flex-wrap: wrap;margin-bottom: 4%;}
  .section__b2 .left_section{display: flex; width: 55%;}
  .section__b2 .right_section{width: 45%;}
  .section__b3 {gap: 0px 2%;}
  .section__b3 .left_section{width: 49%; display: flex;    flex-direction: column;justify-content: space-between;}
  .section__b3 .right_section{width: 49%;}
  .section__b3 .tui-grid-container .tui-grid-pagination{display: none;}

  .section__b1{
    justify-content: center;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #dfe4e6;
  }
  .section__b2 > h3{
    width:100%;
  }
  .section__b2 .left_section ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0px 2%;
  }
  .section__b2 .left_section ul li{
    display: flex;
    flex-direction: column;
    flex: auto;
    width: 32%;
    border: 1px solid #d8d8d8;
    padding: 2%;
  }
  .section__b2 .left_section ul li .img{width:100%; height:160px; background-color: #d6dadd;margin-bottom: 10px;}
  .section__b2 .left_section ul li p{font-size: 0.8rem; line-height: 160%;}
  .section__b2 .right_section{padding-left: 2%;}
  .section__b table{width:100%;border-top: 2px solid #b9b9b9;}
  .section__b table th{height:45px;background-color: var(--box-basic);border-bottom: 1px solid #d4d4d4;padding:2rem;}
  .section__b table td{height:45px;padding: 5px 10px;border-bottom: 1px solid #d4d4d4;}

  .section__b .table_btn{width: 100%; height:45px; background-color: #3062a9; color:#ffffff;border-radius: 5px; margin-top: 20px;}

  .section__b4 {gap: 0px 2%;display: flex;flex-direction: row;flex-wrap: wrap; align-items: center;    align-items: stretch;}
  .section__b4 h3{margin-bottom: 0px;}
  /*.section__b4 .section__b4_section01{width: 24%; display: flex;flex-direction: column;gap: 1rem;}*/
  /*.section__b4 .section__b4_section02{width: 24%; display: flex;flex-direction: column;gap: 1rem;}*/
  /*.section__b4 .section__b4_section03{width: 40%; display: flex;flex-direction: column;gap: 1rem;}*/
  .section__b4 .section__b4_section01{width: 50%; display: flex;flex-direction: column;gap: 1rem;}
  .section__b4 .section__b4_section02{width: 50%; display: flex;flex-direction: column;gap: 1rem;}
  .section__b4 .section__b4_section03{width: 32%; display: flex;flex-direction: column;gap: 1rem;}
  .section__b4 .section__b4_section03 p{font-size:13px;}
  .section__b4 .sub_style_1{table-layout:auto;font-size: 15px;}
  .section__b4 .sub_style_1 td{padding:5px;background-color: #ffffff;}
  .section__b4 .sub_style_1 button{min-width: 68px;font-size: 1.25rem;}
  .section__b4 .ht40{height:40px;}
  .process_arrow{display: flex;    align-items: center;}


  .section__b4 .border-search01 input[type="text"] {
    display: flex;
    width: 300px;
    height: 43px;
    padding: 10px 10px 10px 16px;
    border-radius: 4px;
    border: 1px solid #c5c5c5;
    background: #fff;
    margin-right: 8px;
  }

  [type=radio]:before{position: absolute; z-index: 999999; background-color: #ffffff;}

  #columnList button, #columnSelectedList button{
    width: 68px;
    font-size: 1.25rem;
    align-items: center;
  }

  .columnSelectedList_wrap{width:100%;overflow: hidden;}

  #columnSelectedList2, #columnSelectedList3{
    width: 50%; float: left;
  }

  #columnSelectedList2 input[type="checkbox"], #columnSelectedList3 input[type="checkbox"] {
    display: block;
  }


  .joinRadioBtn li, .joinRadioBtn input, .joinRadioBtn span, .joinRadioBtn img {
    float: left;
  }
  .joinRadioBtn li {
    margin-right: 18px !important;
  }

  #joinRadioBtn input{
    margin-top: 20px;
  }
  #joinRadioBtn span{
    margin: 20px 10px;
  }

  /*#catalogList th, #selectedCatalogList th{*/
  /*  background-color: #ffecda;*/
  /*  color:#ff7a00;*/
  /*}*/

  #catalogList table, #selectedCatalogList table{
    border-top: 1px solid #ff7a00;
  }

  /*#catalogSaveBtn{*/
  /*  background-color: #eeeeee !important;*/
  /*  color:#ff7a00;*/
  /*  border: 1px solid #ff7a00;*/
  /*}*/
  .fl-catalog{
    color: #ff7a00;
  }

  /*#dataAddBtn{*/
  /*  background-color: #eeeeee !important;*/
  /*  color:#346fdb;*/
  /*  border: 1px solid #346fdb;*/
  /*}*/
  #catalogSaveBtn, #dataAddBtn{
    width: 12rem;
    height: 5rem;
    padding-top: 14px;
  }

  .fl-extract{
    color: #346fdb;
  }
  /*selectedExtractList*/

  /*#extractList th, #selectedExtractList th{*/
  /*  background-color: #e9f1ff;*/
  /*  color:#346fdb;*/
  /*}*/

  /*#extractList table, #selectedExtractList table{*/
  /*  border-top: 1px solid #346fdb;*/
  /*}*/


  #aimSaveBtn{
    background-color: #ffece7 !important;
    color:#F46E4E;
    border: 1px solid #F46E4E;
  }

  .fl-aim{
    color: #F46E4E;
  }


  /*#searchTypeCate, #searchTypeInstCheck, #keywordCatalog{*/
  /*  height: 44px !important;*/
  /*}*/

  #btn_like{
    height: 50px;
  }

  #aimList th, #selectedAimList th{
    background-color: #ffece7;
    color:#F46E4E;
  }

  #aimList table, #selectedAimList table{
    border-top: 1px solid #F46E4E;
  }

  #btnExtractAllColumn, #btnResetExtractSelectedColumn{
    width: 90px;
    padding: 10px;
  }



  #columnSelectedList table{
    margin-top: 10px;
  }

  td button{
    margin: 0 auto;
  }

  #columnSelectedList2 input[type="checkbox"], #columnSelectedList3 input[type="checkbox"] {
    width: 20px;
    margin: 0 auto;
  }
  #btnResetExtract{
    margin-left: 5px;
  }

  #columnSelectedList table{
    margin-bottom: 20px;
  }

  /*#tab-menu li{*/
  /*  width: 20%;*/
  /*  border: 1px solid #1a73b9;*/
  /*  border-bottom: 0px;*/
  /*}*/
  #tab-btn>ul{display: flex}
  #tab-btn>ul>li{
    width: 20%;
    cursor: pointer;
    border-top: 1px solid #1a73b9;
    border-left: 1px solid #1a73b9;
    border-right: 1px solid #1a73b9;
  }
  #tab-btn>ul>li:nth-child(2){border-right: 1px solid #1a73b9;}
  #tab-btn>ul>li:last-child{
    border-right: 1px solid #3e359b;
    border-color: #3e359b;
    margin-left: 2rem;
  }
  #tab-btn>ul>li:last-child a{
    background-color: #f4f0f8;
    color: #3e359b;
  }

  #tab-btn li a{
    width: 100%;
    display: block;
    text-align: center;
    padding: 1rem;
  }

  #tab-btn li.active a {
    color: #fff !important;
    background-color: #3e359b !important;
  }

  #tab-menu-step04 a, #tab-menu-step04 h3, #tab-menu-step04 span, #tab-menu-step04 th, .joinResult, #tab-menu-step04 div{
    font-size: 16px;
  }

  #tab-menu-step04 table{
    border-top: 2px solid #1a73b9 !important;
  }

  #extract-content li{
    border: none;
    float: left;
    width: auto;
  }

  #tab-menu-step04 input[type="checkbox"]{
    width: 20px;
    margin: 0 auto;
    display: block;
  }

  #btnJoinSetting{
    float: right;
  }

  #joinTempText{
    clear: both;
    text-align: center;
    padding: 40px 0px 60px 0px;
    background-color: #fcfcfc;
    border: 1px solid #e0e5eb;
    border-radius: 10px;
    color: #657da2;
  }

  #dialogJoinSetting input[type="checkbox"]{
    width: 20px;
    margin: 0 auto;
    display: block;
  }

  #btnJoinDelete, #btnJoinAdd{
    float: right;
    margin: 0px 0px 10px 10px;
  }


  /*  */

  .fillter__content{
    display: flex;
    align-items: center;
  }
  .fillter__content .left{width: 30%;}
  .fillter__content .right{width:68%;display: flex;flex-direction: column}
  .fillter__content .line{
    width: 1px;
    height: 24rem;
    border-right: 1px solid #eeeeee;
    margin: 0 3rem;
  }
  .fillter__content .list-table__wrap{
    width: 100%;
    height: 24rem;
    background-color: #f9f9f9;/*적용 시 삭제*/
  }
  .fillter__content .input-area{
    display: flex;
    gap: 1rem;
  }

  @media (max-width: 1280px) {
    .fillter__content{
      flex-direction: column;
      gap:2rem;
    }
    .fillter__content .line{display: none;}
    .fillter__content .left{width: 100%;}
    .fillter__content .right{width:100%;display: flex;flex-direction: column}
  }
  @media (max-width: 768px){
    .fillter__content .input-area{flex-direction: column;align-items: center;}
    .fillter__content .input-area input,
    .fillter__content .input-area select,
    .fillter__content .input-area button{width:100% !important;}
  }
}

.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 140px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}


/* modal section */

#tab-cont .dialog,  #tab-cont .dialog02{
  width: 1200px;
}
#tab-cont > div{position: relative;}

#tab-cont .flex-right{
  position: absolute;
  right: 0px;
  top: -70px;
}
#tab-cont .flex-right button{margin-left: 10px;}

$default--padding: 55px;

.modal_btn, .modal_btn02 {
  border: none;
  background-color: #afb8c9;
  padding: 17px $default--padding 17px $default--padding;
  border-radius: 30px;
  font-size: 15px;
  font-family: 'Nunito', sans-serif;
  color: #fff;
  box-shadow: 0 10px 25px #3c4a5645;
  outline: none;
  cursor: pointer;
}

.dialog h3, .dialog02 h3{
  font-size: 18px;
  margin-bottom: 15px;
}
.dialog p, .dialog02 p{
  font-size: 16px;
}

.button-close {
  padding: 10px;
  align-self: flex-end;
  background-color: transparent;
  box-shadow: none;
  color: #838282;
}

.dialog, .dialog02 {
  padding: 0;
  width: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border: none;
  border-radius: 6px;
  box-shadow: 0 25px 40px -20px #3c4a56;
}

.dialog__animate-out{
}
.dialog__inner {
  display: flex;
  flex-direction: column;
}
.dialog__header{
  width: 100%;
  display: flex;
  padding: 10px 20px;
  font-size: 18px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d1d1d1;
}
.dialog__header h2{
  margin-bottom: 0px;
  padding-top: 0px;
}
.dialog__close-btn {
  align-self: flex-end;
}
.dialog__content {
  padding: 30px;
}
.dialog__footer{
  padding: 30px 30px 0 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/**============================================
 *!                     btn
 *=============================================**/
.btn{
  display: flex;
  /*padding: 12px;*/
  justify-content: center;
  /*width: 140px;*/
  align-items: flex-start;
  /*gap: 8px;*/
  border-radius: 6px;
  background: var(--main, #346fdb);
  border: 1px solid var(--main, #346fdb);
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  filter: brightness(1);
}
.btn:hover{filter: drop-shadow(0px 2px 2px #aaaaaa);}

.btn_s{
  display: flex;
  padding: 10px;
  justify-content: center;
  min-width: 110px;
  align-items: flex-start;
  gap: 6px;
  border-radius: 5px;
  background: var(--main, #346fdb);
  border: 1px solid var(--main, #346fdb);
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  filter: brightness(1);
}
.btn_s:hover{filter: drop-shadow(0px 2px 2px #aaaaaa);}

/*bg btn style*/
.btn-main{background: var(--main, #346fdb);border: 1px solid var(--main, #346fdb);color: #fff;} /* 기본 버튼 */
.btn-l-bl{background: #7aa6f8;border: 1px solid #7aa6f8;color: #fff;}
.btn-d-bl{background: #124098;border: 1px solid #124098;color: #fff;}
.btn-red{background: #F46E4E;border: 1px solid #F46E4E;color: #fff;}
.btn-org{background: #ff7a00;border: 1px solid #ff7a00;color: #fff;}
.btn-grn {background: #05c322;border: 1px solid #05c322;color: #fff;}
.btn-gry{background: #949494;border: 1px solid #949494;color: #fff;}
.btn-l-gry{background: #ededed;border: 1px solid #d6d6d6;color: #212121;}
.btn-d-gry{background: #505050;border: 1px solid #505050;color: #fff;}
.btn-w{background: #ffffff;border: 1px solid #b3b3b3;color: #212121;}
.btn-b{background: #212121;border: 1px solid #212121;color: #fff;}

/*light bg btn style*/
.btn-lbg-main{background: #e9f1ff;border: 1px solid var(--main, #346fdb);color: #346fdb;} /* 기본 버튼 */
.btn-lbg-l-bl{background: #f6fafc;border: 1px solid #7aa6f8;color: #7aa6f8;}
.btn-lbg-d-bl{background: #f1f4fa;border: 1px solid #124098;color: #124098;}
.btn-lbg-red{background: #ffece7;border: 1px solid #F46E4E;color: #F46E4E;}
.btn-lbg-org{background: #ffecda;border: 1px solid #ff7a00;color: #ff7a00;}
.btn-lbg-grn {background: #f1f8f2;border: 1px solid #05c322;color: #05c322;}
.btn-lbg-gry{background: #e8eef1;border: 1px solid #bbc6d2;color: #51748c;}
.btn-lbg-l-gry{background: #ededed;border: 1px solid #d6d6d6;color: #212121;}
.btn-lbg-d-gry{background: #c5c5c5;border: 1px solid #848484;color: #505050;}
.btn-lbg-w{background: #f3f3f3;border: 1px solid #b3b3b3;color: #b3b3b3;}
.btn-lbg-b{background: #e2e2e2;border: 1px solid #727272;color: #212121;}


/*line btn style*/
.btn-line-main{background: #ffffff;border: 1px solid var(--main, #346fdb);color: #346fdb;} /* 기본 버튼 */
.btn-line-red{background: #ffffff;border: 1px solid #F46E4E;color: #F46E4E;}/* 삭제 버튼 */
.btn-line-grn {background: #ffffff;border: 1px solid #05c322;color: #05c322;} /* 수정 버튼 */
.btn-line-gry{background: #ffffff;border: 1px solid #949494;color: #949494;} /* 목록 버튼 */
.btn-line-w{background: #ffffff;border: 1px solid #b3b3b3;color: #212121;} /* 화이트 버튼 */
.btn-line-b{background: #ffffff;border: 1px solid #212121;color: #212121;} /* 블랙 버튼 */

/* [컬러값 설정]----------------------------------------------------------------*/
:root {
  --main: #2647b5;
  --primary: #3e359b;
  --openLab: #3e359b;
  --openLab-sub: #3969CF;
  --aiMarket: #00addf;
  --sub: #36adbb;
  --sub1: #04acdf;
  --sub2: #05addf;
  --point1: #d54a60;
  --point2: #238cd7;
  --point3: #fa8e9f;
  --point4: #ff5f78;
  --point5: #3c5fd4;
  --point6: #3549b1;
  --point7: #3c3a95;
  --point8: #008ab2;
  --point9: #564ac7;
  --msg-basic: #969faf;
  --msg-error: #b22c45;
  --msg-success: #3b5bc6;
  --btn-01-hover: #1b2c64;
  --btn-02-hover: #2a2f3e;
  --btn-03-hover: #f3f3f3;
  --btn-red-hover: #8f1b30;
  --aiMaket-hover: #0098c2;
  --bg-sub: #323a55;
  --bg-basic: #ebf0fa;
  --bg-footer: #39415d;
  --bg-box: #ebf0fa;
  --bg-tb: #f7f7f7;
  --bg-from: #f2f2f2;
  --bg-gra: linear-gradient(270deg, #6256f1, #2399ca);
  --bg-box-tit: #424756;
  --bg-sub-vi: #f0efff;
  --light-gray: #91a2ba;
  --light-gray-hover: #8194ae;
  --fc-sub: #03c4db;
  --fc-basic: #8b90a7;
  --fc-normal: #5e6169;
  --fc-before: #7f8599;
  --fc-date: #9598a6;
  --fc-bold: #1e2029;
  --fc-point1: #e3546a;
  --fc-tit: #252830;
  --fc-con-tit: #282a30;
  --fc-sub-tit: #848ea1;
  --fc-info: #969faf;
  --fc-h4: #1f2c59;
  --li-dot: #bec3d4;
  --li-dot2: #5480ff;
  --li-dot3: #3b5bc6;
  --charge-pay: #ec4b65;
  --charge-free: #0042ca;
  --bd-basic: #e5e5e5;
  --bd-basic2: #c9d1df;
  /* box-color */
  --box-basic: #f7f8fa;
  --box-select: #3b5bc6;
}

/* [width 설정]----------------------------------------------------------------*/
.w-100 { width: 100% !important }
.w-95 { width: 95% !important }
.w-90 { width: 90% !important }
.w-85 { width: 85% !important }
.w-80 { width: 80% !important }
.w-75 { width: 75% !important }
.w-70 { width: 70% !important }
.w-65 { width: 65% !important }
.w-60 { width: 60% !important }
.w-55 { width: 55% !important }
.w-50 { width: 50% !important }
.w-45 { width: 45% !important }
.w-40 { width: 40% !important }
.w-35 { width: 35% !important }
.w-33 { width: 33.3% !important }
.w-30 { width: 30% !important }
.w-25 { width: 25% !important }
.w-20 { width: 20% !important }
.w-15 { width: 15% !important }
.w-10 { width: 10% !important }
.w-5 { width: 5% !important }
.w-5 { width: 0% !important }

.input-style{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.input-style input{
  margin-bottom: 1em;
}

/* input sytle */
input[type="text"]{
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 5rem;
  padding: 10px 10px 10px 16px;
  border-radius: 7px;
  border: 1px solid var(--bd-basic2);
  background: #fff;
  margin-right: 8px;
}
input[type="number"]{
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 5rem;
  padding: 10px 10px 10px 16px;
  border-radius: 7px;
  border: 1px solid var(--bd-basic2);
  background: #fff;
  margin-right: 8px;
}
input[id="list"] {
  display: none;
}
textarea{appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;border:1px solid #ccc;padding:10px;width:100%;resize:both; border-radius: 5px;}
.select_content{
  display: flex;
  width: 200px;
  max-width: 200px;
  height: 43px;
  padding: 10px 10px 10px 16px;
  border-radius: 4px;
  border: 1px solid #c5c5c5;
  margin-right: 8px;
}
.checkbox_img {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('https://s.wemep.co.kr/ui/v2.8.307/dist/pc/css/spr/common.png') 0 -438px no-repeat;
  vertical-align: top;
}
.checkbox02 input[id="list"]:checked + label span {
  background-position: -75px -438px;
}
.checkbox02 input {
  display: none;
}
.checkbox02 .checkbox_icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 1px solid red;
  position: relative;
  cursor: pointer;
}
.checkbox02 .checkbox_icon::before, .checkbox_icon::after {
  content: ''; // 가상요소 필수값
display: inline-block; // 크기 지정
width: 1px;
  height: 0; // 체크박스가 체크가 되면 변화값으로 커지게 하기 위해 (일단 화면에는 나타나지 않음)
background-color: red;
  position: absolute; // 체크박스 테두리 기준으로 위치조정 가능
transform-origin: left top; // 기울기 지정, 기준점을 왼쪽 상단 모서리로 (기본값은 중심임)
}
.checkbox02 .checkbox_icon::before {
  top: 9px; // 위치값 top
left: 2px; // 위치값 left
transform: rotate(-45deg); // 회전값
}
.checkbox02 .checkbox_icon::after {
  top: 16px; // 위치값 top
left: 9px; // 위치값 left
transform: rotate(-135deg); // 회전값
}
.checkbox02 input:checked + .checkbox_icon {
  border-color: red;
}
.checkbox02 input:checked + .checkbox_icon::before {
  height: 10px; // 높이값 지정
transition: all 0.15s ease; // 0.15초 변화시간 줌
}

// 체크되었을 때 가상요소 after
   .checkbox input:checked + .checkbox_icon::after {
     height: 20px; // 높이값 지정
   transition: all 0.15s ease 0.15s; // 0.15초 변화시간 + 딜레이 시간 줌
   }

.check_btn__box{
  gap: 10px;
}
.check_btn{
  position: relative;
}
.check_btn input{
  position: absolute;
  top:14px;
  left: 10px;
}
.check_btn label{
  height: 42px;
  width: 200px;
  display: flex;
  align-items: center;
  padding-left: 40px;
  cursor: pointer;
  border-radius: 10px;
}
.w20{width:20%;}
.w30{width:30%;}
.w50{width:50%;}
.w100{width:100%;}

.table02{
input{appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;border:1px solid #ccc;padding:0px 5px;}
textarea{appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;border:1px solid #ccc;padding:5px;}

input{border:1px solid #ccc;margin:0px;padding:0px 5px;background:#fff;height:24px;line-height:1.0;font-family:tahoma;}

input[type=button]{border:1px solid #ccc;background:#eee;}
input[type=submit]{border:1px solid #ccc;background:#eee;}
input[type=cancel]{border:1px solid #ccc;background:#eee;}

input[type=file]{padding:0px;margin:0px;border:0px;background:#fff;}
input[type=file]::-webkit-file-upload-button {
  appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;
  border:1px solid #ccc;background:#eee;height:24px;line-height:1.0;margin:0px;padding:0px 5px;
}
input[type=file]::-ms-value {border:1px solid #ccc;background:#fff;}
input[type=file]::-ms-browse {border:1px solid #ccc;background:#eee;}

input[type=checkbox]{appearance:checkbox;-webkit-appearance:checkbox;-moz-appearance:checkbox;border:0px;padding:0px;margin:0px;height:1em;}
input[type=radio]{appearance:radio;-webkit-appearance:radio;-moz-appearance:radio;border:0px;padding:0px;margin:0px;height:1em;}
}
.table02 {
  border-top: 2px solid var(--main, #346fdb);
  display: flex;
  flex-wrap: wrap;
}
.table02 > div {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e1e4d4;
  width: 100%;
}
.table02 > div > div:nth-child(1) {
  background: #f9fafc;
  display: flex;
  width: 200px;
  padding: 20px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.table02 > div > div:nth-child(2) {
  display: flex;
  padding: 10px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}
.table02 > .table01-half {
  width: 50%;
}
.table02 p {
  color: #191919;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
}
.table02 a {
  color: var(--strong);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
  font-size: 18px;
}




.right-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.right-btn-wrap > a + a {
  margin-left: 8px;
}
.board01 .right-btn-wrap{
  margin-bottom: 36px;
}
.btn-outline {
  display: flex;
  padding: 12px;
  justify-content: center;
  width: 140px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 6px;
  background: #fff;
  color: var(--black);
  border: 1px solid #c5c5c5;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* line style */
.line{width:100%;height:1px;margin-bottom: 20px;}
.line-solid{border-top:1px solid #eeeeee;}
.line-dot{border-top:1px dotted #eeeeee;}
.line-dash{border-top:1px dashed #eeeeee;}
.line-double{border-top:1px double #eeeeee;}
.line-ridge{border-top:2mm ridge rgba(184, 184, 184, 0.6);}


/* 탭 영역 */
#tab-menu {
  width: 100%;
}
#tab-btn{position: relative;}
#tab-btn ul {
  overflow: hidden;
  border-bottom: 2px solid #1a73b9;
}
#tab-btn li {
  float: left; text-align: center;
}
#tab-btn li a {
  min-width: 170px;
  display: block;
  color: #7f9db2;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
  background-color: #e9f2f9;
  font-size:1.7rem;
}
#tab-btn li.active a {
  color: #fff;
  background-color: #1a73b9;
}
#tab-btn > div{
  position: absolute;
  right: 0px;
  top:0px;
}
#tab-btn div button{margin-left: 10px;}
#tab-cont {
  width: 100%;
  min-height:200px;
  background: #fff;
  box-sizing: border-box;
  /* border:1px solid #d2d2d2; */
  border-top:0px;
}
#tab-cont .sub_style_1, #tab-cont .table01{border:0px;}

#tab-cont .img_section,
.dialog__content .img_section{
  width:60%;
  min-height: 350px;
  max-height: 350px;
  background-color: #fafafb;
  border: 1px solid #e5dff5;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-image: url(/opl/images/openlab/logo_thum.svg);
  background-size: 10%;
  background-repeat: no-repeat;
  background-position: center;
}
#tab-cont .table_section,
.dialog__content .table_section{
  width:30%;
}
.tab_inner{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#tab-cont .img_section p,
.table_section .img_section p{
  font-size: 2em;
  color: #dddddd;
}


/* 상태표시 레이아웃 */

.app__step-area{
  width:100%;
}
.app__step-area .app__step{
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}
.app__step-area .app__step:first-child{
  width: 15%;
  padding-right: 2rem;
  border-right: 1px solid #d2c0db;
}
.app__step-area .app__step:nth-child(2){width: 85%;padding-left: 2rem;}

.app__step-area .app__step.grid_5{grid-template-columns: repeat(5, 1fr);}
.app__step-area .app__step.grid_6{grid-template-columns: repeat(6, 1fr);}
.app__step-area .app__step.grid_7{grid-template-columns: repeat(7, 1fr);}
.app__step-area .app__step.grid_8{grid-template-columns: repeat(8, 1fr);}

.app__step-area .app__step li{
  width: 100%;
  height: 9rem;
  display: flex;
  background: #f8fafb;
  border: 1px solid #e6e5e5;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/*.app__step-area .app__step li:nth-child(1):hover{border: none;cursor: auto;}*/

.app__step-area .app__step li p{
  font-size: 1.4rem;
}
.app__step-area .app__step li div{
  font-size: 1.8rem;
  font-weight: 600;
}

/*.app__step.col_gr li:first-child{background-color: #46a5a4; color:#ffffff;font-size:20px;font-weight: 600;}*/
/*.app__step.col_bl li:first-child{background-color: #7299CC; color:#ffffff;font-size:20px;font-weight: 600;}*/
/*.app__step.col_yel li:first-child{background-color: #dcb125; color:#ffffff;font-size:20px;font-weight: 600;}*/
.app__step.col_gr li.clicked{border: 2px solid #46a5a4;background-color: #46a5a4; color:#ffffff;}
.app__step.col_gr li:hover{border: 2px solid #46a5a4;}
.app__step.col_gr li.hover{border: 2px solid #46a5a4;}

.app__step.col_bl li.clicked{border: 2px solid #326EC9;;background-color: #326EC9; color:#ffffff;}
.app__step.col_bl li:hover{border: 2px solid #326EC9;}
.app__step.col_bl li.hover{border: 2px solid #326EC9;}

.app__step.col_yel li.clicked{border: 2px solid #dcb125;;background-color: #dcb125; color:#ffffff;}
.app__step.col_yel li:hover{border: 2px solid #dcb125;}
.app__step.col_yel li.hover{border: 2px solid #dcb125;}

.app__step.col_gr li.clicked div,.app__step.col_bl li.clicked div,.app__step.col_yel li.clicked div {color:#ffffff;}
.app__step.col_gr li div{color:#46a5a4;}
.app__step.col_bl li div{color:#326EC9;}
.app__step.col_yel li div{color:#dcb125;}
.progress_box #progress {
  appearance: auto;
}

.progress_box #progress::-webkit-progress-bar {
  background: #f0f0f0;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  height: 28px;
  width: 200px;
  overflow: hidden;
}

.progress_box #progress::-webkit-progress-value {
  background: #fdd4d6;
  border-radius: 0px;
  height: 28px;
  width: 48px;
}



.progress__step .steps {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.progress__step .steps .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  color: #999;
  font-size: 22px;
  font-weight: 500;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #e0e0e0;
  transition: all 200ms ease;
  transition-delay: 0s;
}
.progress__step .steps .circle.active {
  transition-delay: 100ms;
  border-color: #4070f4;
  color: #4070f4;
}
.progress__step .steps .progress-bar {
  position: absolute;
  height: 4px;
  width: 100%;
  background: #e0e0e0;
  z-index: -1;
}
.progress__step .progress-bar .indicator {
  position: absolute;
  height: 100%;
  width: 0%;
  background: #4070f4;
  transition: all 300ms ease;
}
.progress__step .buttons {
  display: flex;
  gap: 20px;
}
.progress__step .buttons button {
  padding: 8px 25px;
  background: #4070f4;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: all 200ms linear;
}
.progress__step .buttons button:active {
  transform: scale(0.97);
}
.progress__step .buttons button:disabled {
  background: #87a5f8;
  cursor: not-allowed;
}

/* 이미지 툴 레이아웃 */
.left_tool{
  background-color: #3C3F41;
  width:80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:20px;
  gap: 20px;
}
.left_tool li{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FBFBFB;
  font-size: 16px;
  gap: 10px;
}
.left_tool .tool{
  width:52px;
  height:52px;
  background-color: #5C5C5C;
  border: 1px solid #747474;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.left_tool .tool:hover{background-color:#3a3a3a;transition: 0.1s;}
.tool_content{
  width: calc(100% - 80px);
  border:1px solid #8D9398;
}

/* 이미지 + 테이블 */
.img_table{
  width: 100%;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}
.img_table li{
  width:31%;
}
.img_table .img{
  height: 300px;
  background-color: #eeeeee;
}
.img_table .img img{
  width: 100%;
}

/* modal table */
.modal__tb{
  width: 420px;
  padding: 20px;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
}
.modal__tb > div{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal__tb .tb_content{
  flex-direction: column;
  display: flex;
  gap: 10px;
}
.modal__tb .tb_content > div{
  display: flex;
}
.modal__tb .tb_content > div > div{width:30%;display: flex;align-items: center;}
.modal__tb .tb_content > div > input{width:70%;}
.modal__tb .btnBox{
  display: flex;
  justify-content: center;
  gap: 10px;
}



@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dissappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .flex.w-100{flex-direction: column;}
  input[type="text"]{width:100% !important;margin-right: 0px;}
  .border-search01 a, .border-search01 button{width:100%;}

  .app__step-area{flex-direction: column;}
  .app__step-area .app__step:first-child{width:100%;padding-right: 0px;border:0px;}
  .app__step-area .app__step:nth-child(2){width:100%;padding:0px;}

  .app__step-area .app__step.grid_5{grid-template-columns: repeat(2, 1fr);}
  .app__step-area .app__step.grid_6{grid-template-columns: repeat(2, 1fr);}
  .app__step-area .app__step.grid_7{grid-template-columns: repeat(2, 1fr);}
  .app__step-area .app__step.grid_8{grid-template-columns: repeat(2, 1fr);}


  .app__step-area .app__step li{
    height: 70px;
    flex-direction: row;
    gap: 4rem;
  }
  .app__step-area .app__step li p{margin-bottom: 0px;padding:2rem 0;}

  /* 이용신청관리 : 상세정보 */
  .section__b{flex-direction: column; gap: 1rem;}
  .section__b2 .left_section{width:100%;}
  .section__b2 .right_section{width:100%;padding:0;}

  .section__b3 .left_section{width: 100%;}
  .section__b3 .right_section{width: 100%;}
  .progress__step {width:100% !important; margin:0;}


  /**/
  .border-search01 > *{width: 100%;margin-bottom: 6px;padding-right: 5px;padding-left: 5px;}
  .tui-datepicker-input{width:100% !important;}

  /* 신청현황 대시보드 */
  .chart-box{width:100% !important;}
}

/* iconBox */
.iconBox{
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #e9e9e9;
  padding: 20px;
  border-radius: 20px;
  flex-wrap: wrap;
}
.iconBox li{
  width: 18%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}
.iconBox li p{ font-size: 13px;}
.iconBox li img{width:16%}

/*positio icon*/
.ico{width: 20px;height:20px;background: url(/images/icon/icon.svg);}
.ico_del{background-position: 0 0;}

.iconBox i{display: flex;align-items: center;flex-direction: column;justify-content: flex-end;}
.ico{width: 22px;height:22px;background: url(/images/icon/icon_black.svg);}
.ico.home01{background-position: 0 0;}
.ico.home02{background-position: -30px 0;}
.ico.home03{background-position: -59.5px 0;}
.ico.home04{background-position: -89px 0;}
.ico.home05{background-position: -117px 0;}
.ico.home06{background-position: -148px 0;}
.ico.home07{background-position: -177px 0;}
.ico.menu01{background-position: 0px -26px;}
.ico.menu02{background-position: -30px -26px;}
.ico.menu03{background-position: -59.5px -26px;}
.ico.menu04{background-position: -89px -26px;}
.ico.menu05{background-position: -117px -26px;}
.ico.menu06{background-position: -148px -26px;}
.ico.menu07{background-position: -177px -26px;}
.ico.sign01{background-position: 0px -55px;}
.ico.sign02{background-position: -30px -55px;}
.ico.sign03{background-position: -59.5px -55px;}
.ico.sign04{background-position: -89px -55px;}
.ico.sign05{background-position: -117px -55px;}
.ico.sign06{background-position: -148px -55px;}
.ico.sign07{background-position: -177px -55px;}

.ico_b{width: 22px;height:22px;background: url(/images/icon/icon.svg);}
.ico_b.home01{background-position: 0 0;}
.ico_b.home02{background-position: -30px 0;}
.ico_b.home03{background-position: -59.5px 0;}
.ico_b.home04{background-position: -89px 0;}
.ico_b.home05{background-position: -117px 0;}
.ico_b.home06{background-position: -148px 0;}
.ico_b.home07{background-position: -177px 0;}
.ico_b.menu01{background-position: 0px -26px;}
.ico_b.menu02{background-position: -30px -26px;}
.ico_b.menu03{background-position: -59.5px -26px;}
.ico_b.menu04{background-position: -89px -26px;}
.ico_b.menu05{background-position: -117px -26px;}
.ico_b.menu06{background-position: -148px -26px;}
.ico_b.menu07{background-position: -177px -26px;}
.ico_b.sign01{background-position: 0px -55px;}
.ico_b.sign02{background-position: -30px -55px;}
.ico_b.sign03{background-position: -59.5px -55px;}
.ico_b.sign04{background-position: -89px -55px;}
.ico_b.sign05{background-position: -117px -55px;}
.ico_b.sign06{background-position: -148px -55px;}
.ico_b.sign07{background-position: -177px -55px;}


input[type="button"]{
  width:100%;
  min-width: 140px;
  max-width: 160px;
  height:50px;
  border-radius: 6px;
  background: var(--main, #346fdb);
  border: 1px solid var(--main, #346fdb);
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
/* utililty btn */
.utililty li a{
  display: flex;
  width:34px;
  height:34px;
  border:1px solid #eeeeee;
  border-radius: 3px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}
.utililty li a:hover{background-color:#555555;}
.utililty li a:hover img{filter: brightness(100);}
.utililty li span{display: none;}